@import url("https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&display=swap");
    @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

    :root {
      --font: "Alexandria";
      --font-en: "Roboto";
      --darker-primary-color: #092f62;
      --primary-color: #1A4B8C;
      --secondary-color: #D92D2D;
      --whatsApp-color: #29a71a;
      --offWhite-color: #e0f6ff;
      --text-color: #212121;
      --transition: 0.3s all ease;
      --shadow: 0 0px 10px rgba(0, 0, 0, 0.35);
    }

    /* !EN */

    html[dir="ltr"] {
      *:not(i) {
        font-family: var(--font-en), sans-serif;
      }

      p,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        line-height: 1.25;
      }

      #productInfo,nav{
        direction: ltr;
      }

        .searchEngine label {
      left: initial !important;
      right: 1rem;
    }
      nav li {
        font-size: 1rem;
      }
      .productVariants{
  direction: rtl ;

      }

      #lang_changer .langs {
        font-size: 1.125rem;
      }

      .heroIntro {
        font-size: Clamp(2rem, calc(3vw + 1rem), 4rem);
      }

      input,
      textarea {
        direction: ltr;
      }

      ::placeholder {
        transform-origin: left;
      }

      .headerIntro {
        text-wrap: balance;
      }


    .filter {
      order: 1;
    }

    .filterWrapper {
      direction: ltr;
    }

    .productFilter .container {
      grid-template-columns: 73% 25% !important;
    }

      @media (max-width: 480px) {
        #lang_changer {
          left: -30px;
        }
      }

    }

    /* !INTRO */

    .intro {
      font-size: 2rem;
      font-weight: bold;
      color: var(--primary-color);
      width: fit-content;
      margin: auto;
      text-align: center;
      margin-bottom: 3rem;
    }

    /* !NAVBAR */

    .floating_nav {
      position: fixed;
      max-width: 1536px;
      transition: var(--transition);
      will-change: transform;
      padding-inline: 1rem;
      width: 92%;
      left: 0;
      top: 0;
      transform: translateY(-100%);
      animation: navSlide 0.75s ease-out forwards;
      -webkit-animation: navSlide 0.75s ease-out forwards;
    }

    nav.floating_nav .logo {
      max-height: 60px;
    }

    nav.floating_nav .container {
      width: 100%;
    }

    nav {
      position: absolute;
      z-index: 999;
      display: flex;
      flex-direction: column;
      left: 0;
      right: 0;
      top: 25px;
      margin: auto;
      justify-content: space-between;
      color: white;
      max-height: fit-content;
    }

    nav .container {
      display: flex;
      background-color: var(--primary-color);
      align-items: center;
      border-radius: 1.5rem;
      position: relative;
      box-shadow: var(--shadow);
      justify-content: space-between;
    }

    #navigation_dropdown {
      position: absolute;
      left: 0;
      display: none;
      width: 100%;
      transform: translateY(70px);
      transition: all 700ms linear(0, 0.012 0.9%, 0.05 2%, 0.411 9.2%, 0.517 11.8%, 0.611 14.6%, 0.694 17.7%, 0.765 21.1%, 0.824 24.8%, 0.872 28.9%, 0.91 33.4%, 0.939 38.4%, 0.977 50.9%, 0.994 68.4%, 1);
      transform-origin: bottom;
      overflow: hidden;
      interpolate-size: allow-keywords;
      margin: auto;
      right: 0;
      height: 0;
      top: -20px;
      z-index: -1;

      .main_Links {
        gap: 1.5rem !important;
      }
    }

    #navigation_dropdown.show_dropdown {
      height: auto;
    }

    #navigation_dropdown .container {
      border-top-right-radius: 0;
      background-color: white;
      border-top-left-radius: 0;
      box-shadow: 0 0px 10px 0px rgba(0, 0, 0, 0.3);
      color: black;
      padding-bottom: 2rem !important;
      padding-top: 3rem !important;
      justify-content: center;

      svg path {
        fill: black;
      }

      .main_Links {
        flex-direction: column;
      }

      li:hover:not(:has(#menuDropDown)) {
        a {
          color: var(--secondary-color);
        }
      }

      a {
        color: black;
      }
    }

    li:has(#menuDropDown).active a.active {
      background-color: var(--secondary-color);
      color: white !important;
    }

    li:has(#menuDropDown).active {
      a {
        color: black !important;
      }
    }

    li:has(#menuDropDown).active a:hover {
      color: white !important;
    }

    nav.floating_nav #navigation_dropdown .container {
      max-width: 92%;
    }

    nav:not(.floating_nav) .container {
      box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3);
      padding-block: 8px !important;
    }

    nav .logo {
      width: 100%;
      height: 55px;
      padding-block: 4px;
      object-fit: contain;
    }

    nav ul,
    .main_Links {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1.5rem;
      max-height: fit-content;
    }

    nav li,
    .contact a {
      font-size: 0.9rem;
      font-weight: bold;
      user-select: none;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      white-space: nowrap;
      transition: var(--transition);
      cursor: pointer;
      align-items: center;

      a {
        color: white;
        display: flex;
        align-items: center;
        gap: 0.25rem;
      }
    }




    svg {
      path {
        transition: var(--transition);
      }
    }

    nav li:hover {
      color: var(--secondary-color);

      a {
        color: var(--secondary-color);
      }

      svg path {
        fill: var(--secondary-color) !important;
      }
    }

    #menu {
      font-size: 1.5rem;
      display: none;
    }

    li.active {
      color: var(--secondary-color) !important;

      a {
        color: var(--secondary-color) !important;
      }

      svg path {
        fill: var(--secondary-color) !important;
      }
    }



    nav button {
      padding-inline: 1.5rem !important;
    }

    nav button.active {
      background-color: var(--secondary-color);

      a {
        color: white;
      }
    }

    button.contact {
      border: 2px solid var(--primary-color);
      background: white;
      padding: 0 !important;
      border-radius: 1.1rem;
      box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.075);
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;

      a {
        padding: 0.85rem 2rem;
        width: 100%;
        color: var(--primary-color);
        text-align: center;
        justify-content: center;
      }

      svg path {
        fill: var(--primary-color);
      }

      &:hover {
        background-color: var(--secondary-color);

        a {
          color: white;
        }

        path {
          fill: white;
        }
      }
    }

    li#lang {
      position: relative;
    }

    #lang_changer,
    #allServices {
      position: absolute;
      z-index: 100;
      left: 0;
      top: 60px;
      transition: var(--transition);
      border-radius: 8px;
      width: 140px;
      background-color: white;
      border-radius: 12px;
      color: black;
      box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
      -ms-border-radius: 8px;
      -o-border-radius: 8px;
      overflow: hidden;
    }

    .hide_lang_changer {
      visibility: hidden;
      pointer-events: none;
      opacity: 0;
    }

    #servicesHolder {
      position: relative;
    }

    li#servicesHolder.active a {
      color: black !important;
    }

    li#servicesHolder.active a.active {
      background: linear-gradient(90deg, var(--secondary-color), var(--primary-color)) !important;
      color: white !important;
    }

    #lang_changer .langs,
    #allServices a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.95rem;
      padding: 0.75rem;
      transition: var(--transition);

      &:not(:last-child) {
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
      }

      width: 100%;
      color: black;

      &:hover {
        background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
        color: white !important;
      }
    }

    .langs img {
      width: 24px;
      height: 24px;
    }

    #allServices {
      min-width: 190px;
      right: 0;
      font-weight: 500;
    }

    li:has(#menuDropDown) {
      flex-direction: column;
      gap: 0;
    }

    #menuDropDown {
      flex-direction: column;
      display: flex;
      transition: all 500ms linear(0, 0.012 0.9%, 0.05 2%, 0.411 9.2%, 0.517 11.8%, 0.611 14.6%, 0.694 17.7%, 0.765 21.1%, 0.824 24.8%, 0.872 28.9%, 0.91 33.4%, 0.939 38.4%, 0.977 50.9%, 0.994 68.4%, 1);
      transform-origin: bottom;
      overflow: hidden;
      interpolate-size: allow-keywords;
      height: 0;

      a {
        padding: 0.5rem;
        text-align: center;
        scale: 0.9;
        justify-content: center;
        border-bottom: 2px solid var(--secondary-color);

        &:hover {
          background-color: var(--secondary-color);
          color: white;
        }
      }
    }

    #menuDropDown.show_dropdown {
      height: auto;
    }

    .arrowDownUp {
      rotate: 180deg;
    }

    /* !HERO SECTION */

    .mySwiper {
      width: 100%;
      flex-grow: 1;
    }

    header {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      padding: 0;
      position: relative;
    }

    header::after {
      width: 100%;
      height: 8px;
      background-color: var(--primary-color);
      z-index: 10;
      left: 0;
      bottom: 0;
      content: "";
      position: absolute;
    }

    header .swiper {
      width: 100%;
    }

    header .swiper-pagination {
      bottom: 5% !important;
    }

    header .swiper-pagination-bullet {
      opacity: 1 !important;
      background-color: white;
      scale: 1.25;
    }

    .swiper-pagination-bullet-active {
      background-color: var(--primary-color) !important;
    }

    header .swiper-slide {
      min-height: 100vh;
      min-height: 100dvh;
      font-size: 4rem;
      display: flex;
      align-items: center;
      justify-content: center;
      isolation: isolate;
    }

    .heroOverlay {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      z-index: -1;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 10%;
      }
    }

    header .container {
      padding-block: 10rem;
      min-height: 100vh;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      isolation: isolate;
    }

    .heroIntro {
      width: fit-content;
      display: flex;
      gap: 1rem;
      flex-direction: column;

      img {
        width: 100%;
        height: 100%;
        /* scale: 0.9; */
        filter: drop-shadow(2px 4px 0px white);
        max-width: 400px;
      }

      h1 {
        font-size: Clamp(2rem, calc(3vw + 1rem), 3rem);
        color: var(--primary-color);
        text-shadow: 2px 0 white, -2px 0 white, 0 2px white, 0 -2px white;
        text-wrap: balance;
        font-weight: bold;
        width: 80%;
      }

      button.contact {
        width: fit-content;
        background-color: var(--primary-color);

        a {
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
          color: white;
        }

        svg path {
          fill: white;
        }

        &:hover {
          background-color: white;

          a {
            color: var(--primary-color);
          }

          svg path {
            fill: var(--primary-color);
          }
        }
      }
    }

    .whatsApp {
      position: fixed;
      bottom: 3rem;
      right: 5rem;
      color: white;
      font-size: 1.1rem;
      background-color: var(--whatsApp-color);
      padding-block: 0.5rem;
      padding-left: 1rem;
      padding-right: 2rem;
      z-index: 1000;
      text-align: end;
      border-radius: 0.7rem;
      box-shadow: var(--shadow);
      transition: var(--transition);
      scale: 0;
      opacity: 0;
      animation: whatsApp 0.6s ease-out forwards;
      will-change: transform, opacity;

      &:hover {
        background-color: white;
        color: var(--whatsApp-color);
      }
    }

    .WhatsAppIcon {
      position: absolute;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2rem;
      right: 0;
      box-shadow: 6px 0px 10px -4px rgba(0, 0, 0, 0.3);
      top: 0;
      transform: translate(25px, -7.5px);
      background-color: inherit;
    }

    /*! SERVICE SECTION */


    /*! WHO WE SECTION */

    section.whoWe {
      overflow: hidden;
      background: linear-gradient(to bottom, var(--primary-color) 75%, transparent 25%);
    }

    .whoWeOverlay {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      z-index: -1;
      height: 300px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .whoWe .container {
      background-color: white;
      box-shadow: var(--shadow);
      border-radius: 2rem;
      display: flex;
      gap: 3rem;
      flex-wrap: wrap;
      padding: 4rem 3rem;
    }

    .whoWe .container article:not(:has(img)) {
      max-height: none !important;
    }

    .whoWe .container article {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      max-height: 200px;
      flex: 1;

      h2 {
        color: var(--primary-color);
      }

      p {
        color: var(--text-color);
        /* text-wrap: balance; */
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      button {
        background-color: var(--secondary-color);

        &:hover {
          background-color: transparent !important;

          a {
            color: var(--secondary-color) !important;
          }

          path {
            fill: currentColor !important;
          }

          border-color: var(--secondary-color) !important;
        }
      }
    }

    .whoWe .container article:nth-child(2) {
      flex: 2;
    }

    #mapLocation{
      margin-top: 1rem;
      display: block;
      /* margin-inline: auto; */
      background-color: var(--primary-color);
      width: 100%;
      border-radius: 0.5rem;
      max-width: 200px;
      &:hover{
        background-color: transparent;
        a{
          color: var(--primary-color);
        }
      }
      a{
      color: white;
      }
    }
    .readMore {
      max-width: fit-content;
      background-color: var(--primary-color);
      border-radius: 0.5rem;
      min-height: 40px;
      border: 2px solid transparent;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;

      a {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
        width: 100%;
        color: white;
      }

      &:hover {
        background-color: white;
        border-color: var(--primary-color);

        a {
          color: var(--primary-color);
        }

        svg path {
          fill: var(--primary-color);
        }
      }
    }

    /*! DOCTORS SECTIONS */
    section.products {
      padding-top: 0;

      >.readMore {
        display: block;
        margin-inline: auto;
        margin-top: 1rem;
        width: 100%;
        max-width: 250px;
      }
    }

    .readMore:has(.seeAllProducts) {
      background-color: var(--secondary-color);

      &:hover {
        a {
          color: var(--secondary-color);
        }

        background-color: white;
        border-color: var(--secondary-color);
      }

    }

.products .intro{
  margin-bottom: 0;
}
    .products .container {
      padding-block: 50px;

    }

    .products .swiper-wrapper {
      align-items: stretch;

      .swiper-slide {
        height: auto;
      }
    }

    .products .container article,
    #allProducts article {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      font-size: 1rem;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      color: var(--text-color);
      font-weight: bold;

      &:hover {
        img {
          scale: 1.05;
        }
      }

      img {
        border-radius: 1rem;
        border: 2px solid var(--primary-color);
        box-shadow: var(--shadow);
        object-fit: contain;
        min-height: 270px;
        width: 100%;
        transition: var(--transition);

      }

      p {
        color: var(--secondary-color);
        font-size: 0.75rem;
        font-weight: 400;
      }

      button {
        width: 100%;
        max-width: none;

        a {
          font-size: 0.9rem;
        }

      }
    }

    .productName,
    .productDesc {
      display: -webkit-box;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      min-height: fit-content;
    }

    .seeAllProducts {
      width: fit-content;
      margin: auto;
      color: var(--primary-color);
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.25rem;
      transition: var(--transition);

      i {
        margin-top: 4px;
        transition: inherit;
      }

      &:hover {
        color: var(--secondary-color);

        i {
          transform: translateX(6px);
        }
      }
    }

    /* !CONTACT SECTION */

    section.contact .container {
      display: flex;
      flex-wrap: wrap;
      gap: 3rem;

      .readMore {
        background-color: var(--secondary-color);

        &:hover {
          background-color: transparent;

          a {
            color: var(--secondary-color);
          }

          border-color: var(--secondary-color);
        }

      }
    }

    ::placeholder {
      transform-origin: right;
      transition: var(--transition);
    }

    input:focus::placeholder,
    textarea:focus::placeholder {
      scale: 0.85;
      transform: translateY(-12px);
    }

    .contact .container form,
    .contact .container .contactInfo {
      flex: 1 1 400px;
    }

    .contact .container form {
      display: flex;
      flex-direction: column;
      gap: 1rem;

      .readMore {
        min-width: 200px;
        font-weight: bold;
        font-size: 1rem;

        a {
          padding-block: 0.25rem;
          justify-content: center;
          align-items: center;

        }
      }
    }

    .inputHolder {
      display: flex;
      flex-direction: column;
      gap: 0.65rem;

      input,
      textarea {
        padding: 1rem 2rem;
        border-radius: 6px;
        resize: none;
        border: 1px solid var(--primary-color);
        direction: rtl;
      }

      textarea {
        height: 200px;
      }
    }

    ::placeholder {
      color: var(--primary-color);
      opacity: 0.75;
      min-height: 24px;
    }

    .contactInfo {
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      width: 100%;
    }

    .contactHandle {
      background-color: var(--primary-color);
      padding: 1rem 2rem;
      color: white;
      border-radius: 0.5rem;
      margin-bottom: 1rem;
      overflow-x: auto;
      gap: 1rem !important;
      border: 2px solid transparent;
      transition: var(--transition);

      i.fa-whatsapp {
        scale: 125%;
      }

      &:hover {
        background-color: transparent;
        border-color: var(--primary-color);
        color: var(--primary-color);

        .contactIcon {
          background-color: var(--primary-color);
          color: white;
        }
      }
    }

    .contactIcon {
      min-width: 35px;
      min-height: 35px;
      color: var(--primary-color);
      background-color: white;
      border-radius: 50%;
      font-size: 1.25rem;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: inherit;
    }

    .map {
      height: 250px;
      border-radius: 1.125rem;
      border: 2px solid var(--primary-color);
      overflow: hidden;

      iframe {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    /* !FOOTER */

    footer {
      background-color: var(--primary-color);
    }

    footer .container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 5rem;
      color: white;

      h3 {
        padding-bottom: 0.75rem;
        width: fit-content;
        border-bottom: 5px solid white;
      }
    }

    footer .container article {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-inline: auto;
      max-width: 400px;

      img {
        max-height: 90px;
        max-width: 180px;
        width: 100%;
        height: 100%;
      }
    }

    footer .container article:has(img) {
      justify-content: center;
      align-items: center;
      text-align: center;

      button {
        width: 100%;
        border-radius: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary-color);
        font-size: 0.9rem;
        font-weight: bold;

        &:hover {
          color: white;
        }

      }
    }

    footer li:not(.socials) .contactIcon {
      font-size: 0.8rem;
      min-height: 24px;
      min-width: 24px;
    }

    footer .contactIcon {
      color: var(--primary-color);
      transition: inherit;
    }

    footer ul,
    .calender {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      width: 295px;

      p {
        font-weight: 300;
      }

      span {
        font-weight: bold;
      }
    }

    footer ul li {
      cursor: pointer;
      line-height: 1.5;
      font-weight: 400;
      transition: var(--transition);
      font-size: 0.85rem;

      a {
        display: flex;
        align-items: center;
        text-transform: none !important;

        gap: 4px;
        color: white;
      }
    }

    footer ul li:not(.socials):hover {
      a {
        color: var(--secondary-color);
      }

      .contactIcon {
        background-color: var(--secondary-color);
        color: white;
      }
    }

    .socials {
      margin-top: 0.5rem;
      display: flex;
      gap: 0.5rem;

      .contactIcon:hover {
        background-color: var(--secondary-color);
        color: white;
      }
    }

    .calender div {
      display: flex;
      margin-block: 0.25rem;
      flex-direction: column;
      gap: 0.35rem;
      font-weight: 400;
    }

    /* ! INNER PAGES HERO*/

    main.innerPage header .container {
      min-height: calc(60vh - 3rem);
      min-height: calc(60dvh - 3rem);
      display: flex;
      justify-content: end;
      align-items: center;
      padding-block: 6rem;

      .intro {
        margin-bottom: 0;
        margin-top: 4rem;
        font-size: Clamp(2.25rem, calc(4vw + 1rem), 3rem);
      }
    }

    .headerIntro {
      display: flex;
      flex-direction: column;
      margin-bottom: -5rem;
      gap: 1rem;

      h2 {
        color: white;
        font-size: 3rem;
      }

      p {
        color: var(--primary-color);
        font-size: 1.75rem;
      }
    }



    /* !WHO WE viewMessage SECTION */

    section#viewMessage .container {
      display: flex;
      align-items: stretch;
      justify-content: center;
      column-gap: 4rem;
      row-gap: 2rem;
      flex-wrap: wrap;

      article {
        display: flex;
        flex-direction: column;
        height: auto;
        justify-content: center;
        flex: 1 1 400px;
        gap: 3rem;

        div {
          display: flex;
          flex-direction: column;
          gap: 1rem;

          h3 {
            font-size: 1.5rem;
            color: var(--primary-color);

          }

          p {
            text-wrap: balance;
            max-width: 90%;
            line-height: 2;

          }
        }
      }
    }

    section#viewMessage .container article:has(img) {
      max-width: 400px;
      height: auto;

      img {
        width: 100%;
        height: 100%;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
        object-fit: cover;
        object-position: center;
        border-radius: 2rem;
      }
    }

    /* !VALUES SECTION */

    main.innerPage section.service .container {
      grid-template-rows: initial;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    main.innerPage section.service .container article {
      grid-column: initial;
      min-height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      gap: 0.5rem;
      padding: 1rem;
      color: white;
      flex-direction: column;

      p {
        font-size: 0.8rem;
      }

      img {
        max-width: 54px;
      }
    }

    .specialIntro {
      color: var(--secondary-color);
      margin-top: 5rem;

      span {
        color: var(--primary-color);
      }
    }

    .subIntro {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      font-size: 1.25rem;

      h2 {
        color: var(--secondary-color);
      }

      p {
        text-wrap: balance;
      }
    }


    section.productFilter {
      overflow: initial;
    }

    section.productFilter .container {
      display: grid;
      grid-template-columns: 25% 73%;
      column-gap: 2%;
      row-gap: 2rem;
      position: relative;

      article {
        height: fit-content;
      }

      .filter {
        position: sticky;
        top: 120px;
      }

      .readMore {
        color: white;
        font-weight: bold;

        &:hover {
          color: var(--primary-color);
        }
      }

      .inputHolder {
        position: relative;
        isolation: isolate;

        label {
          width: fit-content;
          height: fit-content;
          color: var(--darker-primary-color);
          position: absolute;
          z-index: 1000;
          left: 1rem;
          top: 0;
          bottom: 0;
          margin: auto;
          font-size: 1.25rem;
        }
      }
    }

    .filterOptions {
      display: flex;
      flex-direction: column;
      gap: 1rem;

      .filterWrapper {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
        border-radius: 0.5rem;
        border: 1px solid var(--primary-color);
        overflow: hidden;
      }

      ul {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;

        li {
          color: var(--primary-color);
          display: flex;
          gap: 0.5rem;
        }

        input {
          accent-color: var(--darker-primary-color);
          scale: 1.25;
        }
      }

      .readMore {
        max-width: 100%;
      }

    }

    .searchEngine {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 1rem;

      .inputHolder {
        flex-grow: 1;
      }

      button {
        max-width: 100%;
      }
    }

    #allProducts {
      margin-top: 2rem;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
      column-gap: 1.5rem;
      row-gap: 2rem;

      article img {
        max-height: 300px;
      }
    }



    #productPagination {
      margin-top: 2rem;
      display: flex;
      justify-content: center;
      gap: 1rem;
      flex-wrap: wrap;
      border: 2px solid var(--primary-color);
      padding: 1rem;
      border-radius: 0.25rem;
      align-items: center;
    }

    #productAmount {
      color: rgba(0, 0, 0, 0.65);
      flex-grow: 1;
      text-align: end;
      pointer-events: none;
    }

    #next,
    #prev {
      font-size: 1.5rem;
      background-color: transparent;
      color: rgba(0, 0, 0, 0.5);
      transition: var(--transition);

      &:hover {
        color: var(--darker-primary-color);
      }
    }

    #paginationBtns {
      display: flex;
      align-items: center;
      gap: 1rem;
      justify-content: center;
    }

    #paginationNumbers {
      display: flex;
      gap: 1rem;
      align-items: center;
    }

    .paginationNumber {
      width: 40px;
      height: 40px;

      display: flex;
      justify-content: center;
      align-items: center;
      transition: var(--transition);
      border-radius: 50%;
      font-size: 0.9rem;
      background-color: rgba(0, 0, 0, 0.05);
      color: rgba(0, 0, 0, 0.75);

      &:hover {
        background-color: var(--darker-primary-color);
        color: white;
      }

    }

    .paginationNumber.dots {
      pointer-events: none;
    }

    .paginationNumber.active {
      background-color: var(--darker-primary-color);
      color: white;
    }

    #otherProducts{
      .intro{
        width: 100%;
        background-color: var(--primary-color);
        color: white;
        text-align: center;
        padding-block: 3rem;
      }
    }

section#productInfo{
  overflow-x: hidden;
  overflow: initial !important;
  /* padding-inline: 25px; */
}

#productInfo .container{
  background-color: white;
  display: flex;
  gap: 2rem;
  padding-block: 2rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  border: 2px solid var(--primary-color);
  border-radius: 1.5rem;
  margin-top: -200px;
  article{
    flex: 1 1 300px;
    display: flex;
    gap: 1rem;
    padding-inline: 2rem;
    flex-direction: column;
    justify-content: space-between;
    .readMore{
      margin-top: auto;
      max-width: 100%;
      width: 100%;
      display: block;
    }
    img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      min-height: 200px;
      max-height: 500px;
    }
  }
}


#productInfo .swiper{
  width: 400px;
  .swiper-slide{
    cursor: pointer !important;
  }
}

.productImage{
  min-width: 500px;
  justify-content: center !important;
  align-items: center;
}

#currentProductImage{
  display: flex;
  img{
    min-width: 0;
  }
}
.otherImages{
  display: flex;
  align-items: center;
  width: fit-content;
  max-height: fit-content;
  overflow: hidden;
  width: 100%;
  min-width: 75px;
  border-radius: 0.25rem;
  max-width: 450px;

  border: 1px solid var(--darker-primary-color);
  img{
    width: 75px !important;
    height: 75px !important;
    object-fit: cover;
    cursor: pointer;
      background-color: transparent;
    mix-blend-mode: multiply;
    min-height: 0px !important;
transition: inherit;
  }
}
.otherImg{
  overflow: hidden;
  transition: var(--transition);
    border: 4px solid transparent;
}
.otherImg.active{
  background-color: whitesmoke;
  border-color: var(--darker-primary-color);
}

.otherImg:hover{
  background-color: whitesmoke;

  img{
    scale: 1.05;
  }
}

#selectedProductName{
  color: var(--darker-primary-color);
}
#selectedProductDesc{
  color: var(--primary-color);
}

.productVariants{
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  width: 100%;
  max-width: 450px;
  gap: 0.5rem;
  margin: auto;
}

#variantButtons{
  display: flex;
  gap: 1rem ;
  align-items: center;
}

.hidden{
  display: none;
}
.swipeVariant{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.75rem 1.25rem ;
  background-color: transparent;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  border-radius: 0.25rem;
  transition: var(--transition);
  /* min-width: 367px; */
  &:hover{
     background-color: var(--primary-color);
  color: white;
  }
}
.swiper-next,.swiper-prev{
  min-width:0px !important;
  max-width: 60px;
  i{
    scale: 1.5;
  }

}

.swipeVariant.active{
  background-color: var(--primary-color);
  color: white;
}


#variantButtons,#variantButtons button{
  width: 100%;
  max-width: 450px;
}


#imagePopup{
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 5rem;
  position: fixed;
  z-index: 1000;
  inset: 0;
  transition: 0.5s all ease;
  opacity: 0;
  pointer-events: none;
  visibility: none;
  overflow-y: auto;
}
#zoomedImage{
  max-height: 800px;
  min-height: 300px;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
  scale: 0.9;
  transition: 0.5s all ease;
  background-color: white;
  img{
  object-fit: contain;
width: 100%;
height: 100%;
  }
}

#closeBtn{
  position: absolute;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-left-radius: 0.25rem;
  font-size: 2rem;
  background: var(--darker-primary-color);
  padding: 0.5rem;
  top: 0;
  right: 0;
  transition: var(--transition);
  &:hover{
    background-color: red;
  }
}


#imagePopup.active{
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

#imagePopup.active #zoomedImage{
  scale: 1;
}




    /*! KEYFRAMES */

    @keyframes navSlide {
      from {
        transform: translateY(-100%);
        opacity: 0;
      }

      to {
        transform: translateY(20%);
        opacity: 1;
      }
    }

    @keyframes whatsApp {
      to {
        scale: 1;
        opacity: 1;
      }
    }

    /* ?MEDIA QUERIES */
    /* ! HEIGHT */

    @media (min-height: 1024px) {

      header .container,
      header .swiper-slide {
        min-height: 1024px !important;
      }

      header {
        max-height: 1024px;
      }
    }

    /* ! WIDTH */

    @media (min-width: 1280px) {
      .service .container {
        grid-template-columns: repeat(20, 1fr);
        grid-template-rows: repeat(2, 1fr);

        article {
          grid-column: span 4;
        }
      }

      nav .container {
        padding-inline: 3rem;
      }

      article.bigger {
        grid-column: span 5 !important;
      }

      .products .container article img,
      #allProducts .container article img {
        max-height: 200px;
      }

      .biggerGrid {
        grid-column: span 6 !important;
      }
    }

    @media (min-width: 1024px) {
      #side_menu {
        display: none;
      }

    }


    @media(max-width:1280px) {
      .whatsApp {
        bottom: 1rem !important;
        right: 2rem;
      }
    }

    @media (max-width: 1024px) {
      *[data-aos-delay] {
        transition-delay: 0s !important;
      }

      #navigation_dropdown {
        display: flex;
      }

      nav>.container .main_Links {
        display: none;
      }

      nav ul {
        gap: 0.5rem;
      }

      #menu,
      #side_menu {
        display: block;
      }

      nav ul {
        flex-direction: row-reverse;
      }

      section#eachDoctor .container article {
        flex-direction: column;
      }

      .products .swiper-slide img,
      #allProducts article img {
        height: 100%;
        aspect-ratio: 1/1;
      }

      .productFilter .container {
        grid-template-columns: 1fr !important;
      }

      .filter {
        position: static !important;
      }
    }

    @media (max-width: 768px) {

      nav .container,
      .whoWe .container {
        width: 95%;
      }

      nav .container {
        padding: 3rem 1rem;
      }

      .whoWe .container {
        padding: 3rem 2rem;
      }
          header#home .swiper-slide,
      header#home .container {
        min-height: 70dvh !important;
        max-height: 700px;
      }
      header#home .container{
        justify-content: end;
        padding-block: 4rem;
      }
         header#home .heroIntro button {
        scale: 0.9;
      }
         section#productInfo{
        padding-inline: 15px;
      }

#productInfo .swiper{
  width: 300px;
}

#imagePopup{
  padding-inline: 1rem;
}

    }

    @media (max-width: 640px) {

      nav {
        width: 100%;

        ul li {
          font-size: 0.8rem;
        }
      }

      nav:not(.floating_nav) {
        padding: 0 0rem;
      }



      .whoWe .container article {
        flex: 1 1 300px !important;
      }

      #productAmount {
        text-align: center;
      }

      main.innerPage header .container {
        padding-block: 4rem;
        min-height: 300px !important;
      }
      .productVariants,.otherImages{
        white-space: nowrap;
        max-width: 400px;
      }
      .productImage{
        min-width: 100% !important;
        padding: 0 !important;
      }
       .otherImages img{
    width: 60px !important;
    height: 60px !important;
  }

.swipeVariant{
  /* min-width: 312px; */
}

    }

    @media (max-width: 480px) {
      nav {
        width: 95% !important;
        min-width: 280px;

        button {
          display: none;
        }

      }

      nav:not(.floating_nav) {
        top: 20px;
      }

      .map_mask {
        scale: 0.85;
      }



      nav:not(.floating_nav) .container {
        padding-block: 4px !important;
      }

      nav .container {
        width: 95%;
      }

      nav.floating_nav {
        padding: 0;
      }

      #navigation_dropdown {
        transform: translateY(60px);
      }

      body[dir='rtl'] {

        button.contact a {
          font-size: 0.75rem;
        }
      }
      header#home .container{
        justify-content: center;
        padding-block: 10rem;
      }

      .heroIntro h1 {
        width: 100%;
      }

      .headerIntro {
        h2 {
          font-size: 2.25rem;
        }

        p {
          font-size: 1.5rem;
        }

        justify-content: center;
        align-items: center;
        text-align: center;
      }

      .heroIntro {
        justify-content: center;
        align-items: center;
        text-align: center;
      }



      footer .container {
        display: flex;
        flex-direction: column;
      }





      #drService .container {
        grid-template-columns: 1fr;

        article {
          padding: 2rem 1rem;
          flex-direction: column;

          img {
            max-height: 120px;
          }
        }
      }


      .products article,
      #allProducts article {
        h3 {
          font-size: 1rem;
        }

        img {
          min-height: 200px !important;
          height: 200px !important;
        }

        button a {
          font-size: 0.75rem !important;
        }
      }

      #allProducts {
        grid-template-columns: 1fr !important;
      }

      .searchEngine .readMore {
        width: 100%;
        max-width: 100%;
        display: block;
      }


      .intro {
        font-size: 1.5rem;
      }

#variantButtons{
  max-width: 100%;
  width: 100% !important;
  flex-direction: column;
}
.swipeVariant{
  width: 100%;
}
#prevVariant,#nextVariant{
  max-width: 100px;
}
      #productInfo .container article{
padding-inline: 0;
    }



  .swipeVariant{
    font-size: 0.75rem;
  }



#productInfo .swiper{
  width: 225px;
}

#zoomedImage{
  max-height: 500px;
}

#closeBtn{
  font-size: 1.5rem;
}

 .otherImages img{
    width: 40px !important;
    height: 40px !important;
  }

  .otherImg{
    border-width:3px;
  }
  .swipeVariant{
  /* min-width: 141px; */
}
#productInfo .container{
  padding-inline: 0.5rem;
}
  .productVariants,.otherImages{
        max-width: 270px;
      }
  }