@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");


:root {
  --main-color: #27237d;
  --second-color: #40c2cd;
  --white-color: #ffffff;
  --background-color: rgba(192, 192, 192, 0.2);
  --placeholder-color: #a1a1a1;
  --box-shadow: rgba(0, 0, 0, 0.2) 0px 9px 32px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
}

ul li {
  list-style: none;
}


body.header-is-fixed {
  padding-top: var(--header-height, 0px);
}

[dir="rtl"] body {
  font-family: "Almarai", sans-serif;
}
[dir="rtl"] input {
  direction: rtl;
}

html,
body {
  scroll-behavior: auto !important;
  font-family: "Montserrat", sans-serif;
}

::-webkit-scrollbar {
  width: 6px;
}

/* ::-webkit-scrollbar-track {
  background: transparent;
} */

::-webkit-scrollbar-thumb {
  background-color: var(--main-color);
  border-radius: 4px;
}

/* ——— Base: utilities ——— */
.text-main {
  color: var(--main-color);
}

.bg-section {
  background-color: #f9f9f9;
}



.btn-send {
  background: linear-gradient(135deg, var(--second-color), var(--main-color));
  padding: 10px 10px 10px 24px;
  color: var(--white-color);
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 15px;
  width: fit-content;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  border: none;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 0%;
    /* height: 100%; */
    border-radius: 30px;
    background: linear-gradient(135deg, var(--main-color), var(--second-color));
    transition: all 0.4s ease;
    z-index: -1;
    overflow: hidden;
  }

  .btn-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: var(--white-color);
    padding: 10px;
    color: var(--main-color);
    border-radius: 50%;
    font-size: 20px;
    transition: all 0.3s ease;
    transform: rotate(-45deg);
  }

  &:hover {
    font-weight: bold;
    color: var(--white-color) !important;

    &::before {
      width: 100%;
    }

    .btn-icon {
      transform: rotate(0deg) !important;
    }
  }
}

[dir="rtl"] .btn-send {
  padding: 10px 24px 10px 10px;

  .btn-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: var(--white-color);
    padding: 10px;
    color: var(--main-color);
    border-radius: 50%;
    font-size: 20px;
    transition: all 0.3s ease;
    transform: rotate(220deg);
  }

  &:hover {
    font-weight: bold;
    color: var(--white-color) !important;

    &::before {
      width: 100%;
    }

    .btn-icon {
      transform: rotate(180deg) !important;
    }
  }
}

/* ——— مكوّنات مشتركة (تُستخدم في عدة أقسام) ——— */
.header-section {
  h2 {
    font-weight: bold;
    color: var(--main-color);

    font-size: 2.5rem;
    font-weight: 700;
  }

  p {
    font-size: 1rem;
    color: #666;
  }
}

/*  
##################################################
#                  SOCIAL ICONS                  #
##################################################
*/
.social-icon {
  inset-inline-end: 0 !important;
  margin-inline-end: 16px;
  margin-bottom: 50px;
  width: fit-content;
  height: fit-content;
  z-index: 999 !important;

  a {
    background: linear-gradient(135deg, var(--second-color), var(--main-color)) !important;
    color: var(--white-color);
    border: 2px solid var(--second-color);
    padding: 0.8rem;
    border-radius: 50px;
    margin: 0.5rem;
    text-decoration: none;
    width: 50px;
    height: 50px;
    font-size: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;

    &:hover {
      background: linear-gradient(135deg, var(--main-color), var(--second-color)) !important;
      color: var(--white-color);
      border: 2px solid var(--second-color);
      transform: translateY(-5px) scale(1.05);
      filter: brightness(1.1);
    }
  }
}

.back-to-top {
  position: fixed;
  bottom: 50px;
  inset-inline-start: 16px;
  width: 50px;
  height: 50px;
  font-size: 25px;
  background: linear-gradient(135deg, var(--second-color), var(--main-color));
  border: 2px solid var(--second-color);

  color: var(--white-color);
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(0.96);
  cursor: pointer;
  z-index: 998;
  overflow: visible;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  box-shadow: 0 10px 20px rgba(10, 35, 78, 0.22);
  transition:
    transform 0.3s ease,
    color 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    opacity 0.25s ease,
    visibility 0.25s ease;

  &.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  &:hover {
    transform: translateY(-4px) scale(1.03);
    color: var(--white-color);
    background: linear-gradient(135deg, var(--main-color), var(--second-color));
    border-color: var(--second-color);
  }

  i {
    font-size: 16px;
    z-index: 2;
  }

}

/*  
##################################################
#                  LOADING                       #
##################################################
*/
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--white-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;

  .loader-container {
    position: relative;
    width: 350px;
    height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .pulse-circle img {
    width: 100%;
  }
}

/*  
##################################################
#                   Navbar                       #
##################################################
*/

.fixed {
  .navbar {
    box-shadow: var(--box-shadow);
    background: var(--white-color) !important;

    .nav-link {
      position: relative;
      /* display: inline-block; */
      padding: 10px 24px;

      font-size: 0.95rem;
      color: var(--main-color) !important;
      border-radius: 0px;
      text-decoration: none;
      transition:
        color 0.3s ease,
        font-weight 0.3s ease;
      z-index: 1;
      overflow: hidden;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0%;
        height: 2px;

        background: var(--main-color) !important;

        transition: width 0.4s ease;
        z-index: -1;
      }

      &:hover {
        color: var(--white-color) !important;

        &::before {
          width: 100%;
        }
      }

      &.active {
        color: var(--black-color) !important;

        &::before {
          width: 100%;
          transition: width 0.25s ease-in-out;
        }
      }
    }

    .navbar-toggler {
      color: var(--main-color);

      i {
        color: var(--main-color) !important;
      }
    }
  }
}

.fixed-top {
  .navbar {
    .navbar-nav {
      .nav-link {
        color: var(--white-color);
      }
    }
  }
}

.header.fixed {
  background: var(--white-color);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;

  .nav-link {
    color: var(--main-color) !important;

  }
}

.site-header {
  z-index: 1050;
}

.top-header {
  background: linear-gradient(135deg, var(--main-color) 0%, var(--second-color) 100%);
  color: var(--white-color);
  padding: 10px 0;

  a {
    color: var(--white-color);
    transition: opacity 0.3s ease;

    &:hover {
      opacity: 0.8;
    }
  }

  .top-header-phone i {
    font-size: 14px;
  }

  .top-header-social {
    a {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
    }
  }
}





.navbar {
  width: 100%;
  z-index: 999;
  transition: all 0.4s ease;

  .navbar-nav {
    margin-inline-start: auto;

    .nav-item {
      position: relative;
      width: 100%;
      text-wrap: nowrap;

      .nav-link {
        position: relative;
        /* display: inline-block; */
        padding: 10px 24px;
        font-size: 0.95rem;
        color: var(--main-color);
        font-weight: 600;
        border-radius: 25px;
        text-decoration: none;
        transition:
          color 0.3s ease,
          font-weight 0.3s ease;
        z-index: 1;
        overflow: hidden;

        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 0%;
          height: 100%;
          background: var(--main-color);

          transition: width 0.4s ease;
          z-index: -1;
        }

        &:hover {
          font-weight: bold;
          color: var(--white-color) !important;

          &::before {
            width: 100%;
          }
        }

        &.active {
          font-weight: bold;
          color: var(--white-color) !important;

          &::before {
            width: 100%;
            transition: width 0.25s ease-in-out;
          }
        }
      }
    }
  }


}

/*  
##################################################
#              Navbar Dropdown (Hover)            #
##################################################
*/
.navbar {
  .nav-item--dropdown {
    position: relative;

    /* hover bridge so the menu doesn't close */
    &::after {
      content: "";
      position: absolute;
      top: 100%;
      inset-inline: 0;
      height: 10px;
      background: transparent;
    }

    .nav-dropdown-caret {
      font-size: 0.85em;
      transition: transform 0.2s ease;
    }

    /* fallback layout (in case utilities are missing) */
    .nav-link--dropdown {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .nav-dropdown-menu {
      position: absolute;
      top: 100%;
      inset-inline-start: 0;
      min-width: 220px;
      padding: 10px;
      margin-top: 10px;
      background: var(--white-color);
      border: 1px solid #e7ecf3;
      border-radius: 16px;
      box-shadow: 0 18px 40px rgba(8, 21, 43, 0.14);
      z-index: 2000;

      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(8px);
      transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;
    }

    .nav-dropdown-link {
      display: block;
      padding: 10px 12px;
      border-radius: 12px;
      color: var(--main-color);
      font-weight: 700;
      text-align: start;
      transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;

      &:hover {
        background: var(--main-color);
        color: var(--white-color);
        transform: translateX(-2px);
      }
    }

    &:hover {
      .nav-dropdown-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
      }

      .nav-dropdown-caret {
        transform: rotate(180deg);
      }
    }
  }
}

.offcanvas {
  .nav-item--dropdown {
    &::after {
      display: none;
    }

    .nav-dropdown-caret {
      display: none;
    }

    .nav-dropdown-menu {
      position: static;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: none;
      box-shadow: none;
      border: 0;
      padding: 0;
      margin-top: 6px;
      background: transparent;
    }

    .nav-dropdown-link {
      padding: 8px 14px;
      border-radius: 12px;
      width: fit-content;

      &:hover {
        transform: none;
      }
    }
  }
}

.btn-lang {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 30px;
  border: none;
  border-radius: 25px;
  background: linear-gradient(135deg, var(--second-color), var(--main-color)) !important;
  color: var(--white-color);
  font-size: 17px;
  font-weight: 600;
  text-transform: capitalize;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s ease;
  z-index: 1;

  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(135deg, var(--main-color), var(--second-color));

    transition: width 0.4s ease;
    z-index: -1;
  }

  &:hover {
    font-weight: bold;
    color: var(--white-color) !important;

    &::before {
      width: 100%;
    }
  }
}

.offcanvas {


  .nav-link {
    position: relative;
    /* display: inline-block; */
    padding: 10px 24px;
    font-size: 0.95rem;
    color: var(--main-color);
    font-weight: 600;
    border-radius: 25px;
    text-decoration: none;
    transition:
      color 0.3s ease,
      font-weight 0.3s ease;
    z-index: 1;
    overflow: hidden;
    width: fit-content !important;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 0%;
      height: 100%;
      background: var(--main-color);

      transition: width 0.4s ease;
      z-index: -1;
    }

    &:hover {
      font-weight: bold;
      color: var(--white-color) !important;

      &::before {
        width: 100%;
      }
    }

    &.active {
      font-weight: bold;
      color: var(--white-color) !important;

      &::before {
        width: 100%;
        transition: width 0.25s ease-in-out;
      }
    }
  }

  .list-contact {
    a {
      transition: all 0.3s ease;
      color: var(--main-color) !important;
      display: block;

      &:hover {
        font-weight: bold;
      }
    }

    i,
    h3 {
      color: var(--main-color) !important;
    }
  }

  .header-social {
    .social-link {
      width: 45px;
      height: 45px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);

      i {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--main-color) !important;
        color: var(--white-color) !important;
        transition: all 0.4s ease;

        &:hover {
          background-color: var(--main-color) !important;
          color: var(--white-color) !important;
          transform: translateY(-10px);
        }
      }

    }

  }



}

/*  
##################################################
#                     Home                       #
##################################################
*/

.hero {
  position: relative;
  transition: all 0.3s;
  padding: 0 40px;
  overflow: hidden;

  &-pages {
    .overlay {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: hsla(0, 0%, 0%, 0.2);
    }
  }

  .swiper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 182px);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;

    .swiper-wrapper {
      .swiper-slide {
        height: 100vh;
        position: relative;
        transition: all 0.4s ease;
        cursor: pointer;

        &::before {
          content: "";
          position: absolute;
          inset: 0;
          z-index: 1;
          background: linear-gradient(10deg,
              rgba(0, 0, 0, 0.2) 0%,
              rgba(0, 0, 0, 0.1) 40%,
              rgba(255, 255, 255, 0.05) 100%);

          transition: all 0.5s ease;
          cursor: pointer;
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          cursor: pointer;
          /* transform: scale(1);
          animation: scaleIn 10s ease-in-out infinite alternate; */
        }
      }
    }

    .swiper-pagination {
      bottom: 130px !important;

      .swiper-pagination-bullet {
        background: rgba(255, 255, 255, 0.5);
        opacity: 1;
        width: 12px;
        height: 12px;
        margin: 0 10px !important;
        transition: all 0.3s ease;
        border-radius: 50px !important;
        position: relative;

        &::before {
          content: "";
          position: absolute;
          border: 2.5px solid var(--second-color);
          width: 100%;
          height: 100%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50px !important;
          padding: 10px;
        }
      }

      .swiper-pagination-bullet-active {
        background: var(--second-color);
        height: 14px;
        width: 14px;
        border-radius: 50px !important;
      }
    }
  }

  .text-box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px 20px;
    color: #fff;
    transition: all 0.4s ease;
    z-index: 5;
    transform: translateY(-30px) !important;

    h2 {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 10px;
      transition: all 0.4s ease;
    }

    p {
      font-size: 1.2rem;
    }
  }
}

.hero-mobile {
  .swiper {
    .swiper-wrapper {
      .swiper-slide {
        height: 60vh;
        position: relative;
        transition: all 0.4s ease;
        cursor: pointer;

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

  .swiper-pagination {
    bottom: 30px !important;

    .swiper-pagination-bullet {
      background: rgba(255, 255, 255, 0.5);
      opacity: 1;
      width: 12px;
      height: 12px;
      margin: 0 10px !important;
      transition: all 0.3s ease;
      border-radius: 50px !important;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        border: 2.5px solid var(--second-color);
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50px !important;
        padding: 10px;
      }
    }

    .swiper-pagination-bullet-active {
      background: var(--second-color);
      height: 14px;
      width: 14px;
      border-radius: 50px !important;
    }
  }

  .text-box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px 20px;
    color: #fff;
    transition: all 0.4s ease;
    z-index: 5;
    background: linear-gradient(10deg,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.5) 40%,
        rgba(255, 255, 255, 0.05) 100%);

    h2 {
      font-size: 1.5rem;
      font-weight: 700;
      margin: 15px 0;
      transition: all 0.4s ease;
    }
  }
}

/* Services marquee (home) — under hero */
.dental-services-ticker {
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, var(--main-color), var(--second-color));
  color: var(--white-color);
  border-block: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  margin: 0 40px;

  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}

.dental-services-ticker__viewport {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg,
      transparent,
      #000 12%,
      #000 88%,
      transparent);
}

.dental-services-ticker__rail {
  position: relative;
  display: block;
  align-items: center;
  width: 100%;
  min-height: 44px;
  overflow: hidden;
}

.dental-services-ticker__set {
  display: inline-flex;
  align-items: center;
  position: absolute;
  top: 0;
  min-width: 100%;
  width: max-content;
  direction: ltr;
  will-change: transform;
  animation: dental-services-ticker-scroll 22s linear infinite;
}

.dental-services-ticker__set:first-child {
  inset-inline-start: 0;
}

.dental-services-ticker__set:last-child {
  inset-inline-start: 100%;
}

.dental-services-ticker__item {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  white-space: nowrap;
  padding-inline: 1rem;
  padding-block: 0.7rem;
  font-size: clamp(0.8rem, 1.5vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.95;
}

.dental-services-ticker__item::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-inline-start: 1.35rem;
  border-radius: 50%;
  background: var(--second-color);
  opacity: 0.9;
  flex-shrink: 0;
}

.dental-services-ticker__set .dental-services-ticker__item:last-child::after {
  display: none;
}

@keyframes dental-services-ticker-scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-100%, 0, 0);
  }
}



/*  
##################################################
#                    hero pages                  #
##################################################
*/
.hero-pages {
  margin: 0 40px;
  border-radius: 30px;

  .overlay {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: hsla(0, 0%, 0%, 0.4);
    border-radius: 30px;
  }

  .contact-bg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1;
  }
}

/*  
##################################################
#                    About Us                    #
##################################################
*/

.dental-about-section {
  position: relative;

            z-index: 0 !important;
  &::before {
    content: "";
    position: absolute;
    background-color: var(--white-color);
    opacity: 0.8;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .header-section {
    h2 {
      font-size: 60px;
      font-weight: 700;
      color: var(--main-color);
    }
  }

  .img-one {
    overflow: hidden !important;
    border-radius: 30px;
    height: 400px;
    width: 100%;

    img {
      height: 100%;
      width: 90%;
      transition: transform 0.5s ease;

      &:hover {
        transform: scale(1.05);
      }
    }
  }

  .img-two {
    overflow: hidden;
    position: absolute;
    right: 0;
    bottom: -100px;
    border-radius: 30px;

    img {
      width: 400px;
      height: 300px;
      border-radius: 24px !important;
      transition: transform 0.5s ease;

      &:hover {
        transform: scale(1.02);
      }
    }
  }

  p {
    font-size: 18px;
    color: var(--black-color);
  }

  .about-list {
    list-style: none;
    padding-left: 0;

    .content-list {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 15px;
      border-radius: 15px;
      background: #f8f9fa;
      width: 100%;
      transition: 0.3s;
      box-shadow: var(--box-shadow);

      &:hover {
        background: var(--white-color);
        transform: translateY(-3px);
      }

      .icon-box {
        width: 55px;
        height: 55px;
        border-radius: 15px;
        background: linear-gradient(135deg, #f8f9fa, #ececec);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
      }

      &:hover .icon-box {
        transform: scale(1.1);
      }

      img {
        width: 40px;
        height: 40px;
      }

      span {
        font-size: 17px;
        font-weight: 600;
        color: #333;
      }
    }
  }



  .about-counter-strip {
    /* position: relative; */
    /* z-index: -3 !important; */
    
    
    
    
    
    
    

    .about-counter-card {
      background: rgba(255, 255, 255, 0.86);
      border: 1px solid rgba(0, 0, 0, 0.06);
      border-radius: 16px;
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
      text-align: center;
      padding: 18px 14px;
      transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
      position: relative;
      z-index: -1 !important;
      
      
      
      
      
      
      
      

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 30px rgba(0, 0, 0, 0.12);
      }

      .about-badge__value {
        display: block;
        font-size: clamp(30px, 2.8vw, 42px);
        font-weight: 800;
        line-height: 1.1;
        color: var(--main-color);
        margin-bottom: 6px;
      }

      .about-badge__label {
        display: block;
        margin: 0;
        font-size: 13px;
        line-height: 1.45;
        color: #4c4c4c;
        font-weight: 500;
      }
    }
  }
}

.about-layout {
  .about-layout-wrap {
    z-index: 2;
  }

  .about-layout-row {
    position: relative;
  }



  .about-layout-picture {
    height: 100%;
    min-height: clamp(250px, 34vw, 420px);


    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.45s ease;
    }

    &:hover img {
      transform: scale(1.05);
    }
  }

  .about-layout-kicker {
    color: #5f6e82;
    font-size: 0.88rem;
    letter-spacing: 0.05em;
    font-weight: 700;
    text-transform: uppercase;
  }

  .about-layout-title {
    font-size: clamp(2rem, 3.5vw, 3rem) !important;
    line-height: 1.2;
    margin-bottom: 0.4rem;
  }

  .about-layout-name {
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    font-weight: 700;
  }

  .about-layout-text,
  .about-layout-value {
    color: #4d5a6b;
    line-height: 1.9;
    font-size: 1.02rem;
  }

  .about-layout-values {
    display: grid;
    gap: 0.85rem;
  }

  .about-layout-value {
    margin: 0;
    background: #f7f9fc;
    border: 1px solid #e6ecf4;
    border-radius: 14px;
    padding: 0.9rem 1rem;
  }

  .about-layout-value-label {
    display: inline-flex;
    margin-inline-end: 0.45rem;
    color: var(--main-color);
    font-weight: 800;
  }

  .about-layout-bullets,
  .about-layout-numbered {
    display: grid;
    gap: 0.65rem;

    li {
      margin: 0;
      color: #455467;
      line-height: 1.85;
      background: #f7f9fc;
      border: 1px solid #e6ecf4;
      border-radius: 12px;
      padding: 0.7rem 0.95rem;
      font-size: 0.96rem;
    }
  }

  .about-layout-numbered {
    padding-inline-start: 1.2rem;
  }
}

.vision,
.mission {
  img {
    height: 600px;
    width: 100%;
    transition: transform 0.5s ease;

    &:hover {
      transform: scale(1.05);
    }
  }
}


/*  
##################################################
#                  Services                      #
##################################################
*/
.services-section {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    background-color: var(--white-color);
    opacity: 0.8;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .service-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;

    .btn-send-content {
      background: var(--white-color);
      padding: 12px 12px 12px 24px !important;
      color: var(--main-color);
      border-radius: 30px;
      border: 1px solid var(--main-color);
      display: flex;
      justify-content: center;
      align-items: center;
      width: fit-content;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      z-index: 1 !important;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 0%;
        height: 100%;
        background-color: var(--main-color);
        transition: width 0.4s ease;
        z-index: -1;
      }

      &:hover {
        font-weight: bold;
        color: var(--white-color) !important;

        &::before {
          width: 100%;
        }
      }
    }

    &:hover {
      border-color: var(--main-color);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
      transform: translateY(-10px);

      &::before {
        transform: scaleX(1);
      }

      .service-icon {
        background: var(--main-color);
        transform: scale(1.1) rotate(5deg);

        &::after {
          opacity: 1;
          transform: scale(1);
        }

        img {
          filter: brightness(0) invert(1);
          transform: scale(1.1);
        }
      }

      .service-title {
        color: #333;
      }

      .service-features {
        li {
          padding-left: 5px;

          i {
            transform: scale(1.2);
          }
        }
      }
    }

    .service-icon {
      width: 120px;
      height: 120px;
      margin: 0 auto 25px;
      background: #f8f8f8;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.4s ease;
      position: relative;

      img {
        width: 60px;
        height: 60px;
      }

      &::after {
        content: "";
        position: absolute;
        width: 110%;
        height: 110%;
        border: 2px solid var(--main-color);
        border-radius: 50%;
        opacity: 0;
        transform: scale(0.8);
        transition: all 0.4s ease;
      }
    }

    .service-title {
      font-size: 24px;
      font-weight: 700;
      color: var(--main-color);
      margin-bottom: 15px;
      transition: color 0.3s ease;
    }

    .service-description {
      font-size: 15px;
      color: #666;
      line-height: 1.7;
      margin-bottom: 25px;
    }

    .service-features {
      list-style: none;
      padding: 0;
      margin: 0 0 30px 0;
      text-align: left;
      flex-grow: 1;

      li {
        font-size: 14px;
        color: #555;
        padding: 10px 0;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
        gap: 12px;
        transition: all 0.3s ease;

        &:last-child {
          border-bottom: none;
        }

        i {
          font-size: 16px;
          color: var(--main-color);
          flex-shrink: 0;
          transition: transform 0.3s ease;
        }
      }
    }
  }


}

/*  
##################################################
#  Home  #
##################################################
*/
.dental-services-section {


  .dental-service-card {
    transition:
      transform 0.35s ease,
      box-shadow 0.35s ease;

    img {
      height: 100% !important;
      object-fit: contain;
      transition: transform 0.45s ease;
    }

    .dental-service-card__body {
      background: linear-gradient(180deg,
          rgba(7, 14, 27, 0) 0%,
          rgba(7, 14, 27, 0.82) 100%);
      width: 100%;

      h3 {
        margin: 0.55rem 0 0;
        color: var(--white-color);
        font-size: 1.15rem;
        font-weight: 700;
      }
    }

    .dental-service-card__tag {
      display: inline-flex;
      padding: 0.26rem 0.64rem;
      border-radius: 999px;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--main-color);
      background: rgba(255, 255, 255, 0.9);
    }

    &:hover {
      transform: translateY(-6px) !important;
      box-shadow: 0 24px 45px rgba(8, 21, 43, 0.18);

      img {
        transform: scale(1.06);
      }
    }
  }

  .dental-services-swiper-wrap {
    margin-top: 0.5rem;
  }

  .dentalServicesSwiper {
    padding-bottom: 2.5rem;



    .swiper-button-prev,
    .swiper-button-next {
      width: 44px;
      height: 44px;
      padding: 10px;
      border-radius: 50%;
      background: #fff;
      color: var(--main-color);
      box-shadow: 0 4px 18px rgba(8, 21, 43, 0.12);
      border: 1px solid #e7ecf3;

      top: 50%;
      transform: translateY(-50%);
      transition: all 0.3s ease;

      &:hover {
        background: var(--main-color);
        border-color: var(--second-color);
        color: #fff;
      }
    }

    .swiper-pagination {
      bottom: 0;
    }

    .swiper-pagination-bullet {
      width: 8px;
      height: 8px;
      background: var(--main-color);
      opacity: 0.25;
    }

    .swiper-pagination-bullet-active {
      opacity: 1;
      width: 22px;
      border-radius: 999px;
    }
  }
}

/*  
##################################################
#  عروض الرئيسية + صفحات المشاريع — كروت الشبكة   #
##################################################
*/
.dental-branches-section {
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);

  .dental-branch-card {
    cursor: pointer;
    transition:
      transform 0.4s ease,
      box-shadow 0.4s ease;

    img {
      width: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease;
      height: clamp(420px, 38vw, 480px);
    }



    &:hover {
      transform: translateY(-10px) !important;
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);

      img {
        transform: scale(1.08);
      }

      .content-card {
        transform: translateY(0);
      }
    }
  }
}

.dental-before-after-section {
  overflow: hidden;
  position: relative;
  z-index: 1;
  border-radius: 30px;
  margin: 0 60px;

  background: transparent;

  .header-section {
    h2 {
      font-size: 40px;
      font-weight: 700;
      color: var(--white-color);
    }

    p {
      font-size: 16px;
      color: var(--white-color) !important;
    }
  }

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23FFFFFF' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%2327237D' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23172f87' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23003a91' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%2300449a' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%23004ea1' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%230057a8' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%230061ae' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%23006ab4' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%230073b8' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%23007dbc' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%230086bf' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%23008ec2' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%230097c4' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%2300a0c6' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%2300a9c8' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%2300b1ca' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%2324bacb' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%2340C2CD' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
    opacity: 1;
  }

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background: url("../images/after&before/bg.png") no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    opacity: 0.6;
  }
  
.dental-ba-item{
  overflow: hidden;
  border-radius: 30px;
  img{
 transition: transform 0.5s ease;
 &:hover{
  transform: scale(1.05);
 }
  }
}
}

/* Plain variant (used on before-after page) */
.dental-before-after-section.dental-before-after-section--plain {
  margin: 0;
  border-radius: 0;
  overflow: visible;
}

.dental-before-after-section.dental-before-after-section--plain::before,
.dental-before-after-section.dental-before-after-section--plain::after {
  content: none;
}

.dental-before-after-section.dental-before-after-section--plain .header-section h2 {
  color: var(--main-color);
}

.dental-before-after-section.dental-before-after-section--plain .header-section p {
  color: #666 !important;
}






/*  
##################################################
#                  Contact                       #
##################################################
*/
/* ===== CONTACT SECTION ===== */

.dental-contact-section {

  position: relative;
  overflow: hidden;



  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23FFFFFF' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%2327237D' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23172f87' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23003a91' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%2300449a' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%23004ea1' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%230057a8' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%230061ae' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%23006ab4' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%230073b8' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%23007dbc' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%230086bf' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%23008ec2' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%230097c4' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%2300a0c6' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%2300a9c8' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%2300b1ca' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%2324bacb' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%2340C2CD' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
    opacity: 0.5;

  }

  .header-section {
    position: relative;
    z-index: 1;

    h2 {

      color: var(--white-color) !important;
    }

    p {
      color: var(--white-color) !important;
    }
  }

  .contact-section__quick-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--main-color);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition:
      color 0.2s ease,
      opacity 0.2s ease;
  }

  .contact-section__quick-link:hover {
    color: var(--main-color);
  }

  .contact-section__quick-sep {
    color: #ccc;
    user-select: none;
  }

  .contact-map-side__title {
    color: var(--main-color);
  }

  .contact-map-side__meta {
    margin-top: -0.35rem;
  }

  /* Decorative Elements */
  .contact-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
  }

  /* Section Header */
  .section-header {
    position: relative;
    z-index: 1;

    .section-subtitle {
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #666;
      margin-bottom: 15px;
      display: inline-block;
    }

    .section-title {
      font-size: 42px;
      font-weight: 700;
      color: var(--main-color);
      margin-bottom: 20px;
      line-height: 1.3;

      span {
        font-style: italic;
        font-weight: 300;
      }
    }

    .section-description {
      font-size: 16px;
      color: #666;
      max-width: 700px;
      margin: 0 auto;
      line-height: 1.8;
    }
  }

  /* Contact Info Cards */
  .contact-info-wrapper {
    position: relative;
    z-index: 1;

    .contact-info-card {
      background: #fff;
      border: 2px solid #f0f0f0;
      border-radius: 16px;
      padding: 30px;
      margin-bottom: 20px;
      display: flex;
      gap: 20px;
      position: relative;
      overflow: hidden;
      transition: all 0.4s ease;

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 0;
        background: var(--main-color);
        transition: height 0.4s ease;
      }

      &:hover {
        border-color: var(--main-color);
        transform: translateX(10px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

        .contact-icon {
          background: var(--main-color);
          transform: scale(1.1);

          i {
            color: #fff;
            transform: rotate(10deg);
          }
        }
      }

      .contact-icon {
        width: 60px;
        height: 60px;
        background: #f8f8f8;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.4s ease;

        i {
          font-size: 24px;
          color: var(--main-color);
          transition: transform 0.4s ease;
        }
      }

      .contact-content {
        h4 {
          font-size: 20px;
          font-weight: 700;
          color: var(--main-color);
          margin-bottom: 8px;
        }

        p {
          font-size: 14px;
          color: #888;
          margin-bottom: 12px;
        }

        a {
          color: #555;
          display: block;
          text-decoration: none;
          font-size: 15px;
          margin-bottom: 5px;
          transition: all 0.3s ease;

          &:hover {
            color: var(--main-color);
            padding-left: 10px;
          }
        }

        .location-link {
          line-height: 1.8;
        }
      }
    }
  }

  /* Social Media */
  .contact-social {
    margin-top: 30px;

    h5 {
      font-size: 18px;
      font-weight: 700;
      color: var(--main-color);
      margin-bottom: 20px;
    }

    .social-links {
      display: flex;
      gap: 12px;

      .social-link {
        width: 45px;
        height: 45px;
        background: #f8f8f8;
        border: 2px solid #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: var(--main-color);
        font-size: 18px;
        position: relative;
        overflow: hidden;
        transition: all 0.4s ease;

        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          width: 0;
          height: 0;
          background: var(--main-color);
          border-radius: 50%;
          transform: translate(-50%, -50%);
          transition: all 0.4s ease;
        }

        &:hover {
          border-color: var(--main-color);
          transform: translateY(-5px);

          &::before {
            width: 100%;
            height: 100%;
          }

          i {
            color: #fff;
            z-index: 1;
          }
        }
      }
    }
  }

  /* Contact Form */
  .contact-form-wrapper {
    .form-header {
      margin-bottom: 35px;

      h3 {
        font-size: 1.35rem;
        font-weight: 700;
        color: var(--main-color);
      }

      p {
        font-size: 15px;
        color: #666;
      }
    }

    .form-group {
      label {
        font-size: 14px;
        font-weight: 600;
        color: var(--white-color);

        i {
          font-size: 16px;
          color: var(--white-color);
        }
      }

      .form-control,
      .form-select {
        width: 100%;
        padding: 15px 20px;
        font-size: 15px;
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 2px solid #f0f0f0;
        border-radius: 30px;
        color: var(--white-color);
        transition: all 0.3s ease;

        &:focus {
          background: rgba(255, 255, 255, 0.8);
          backdrop-filter: blur(10px);
          color: var(--main-color) !important;
          -webkit-backdrop-filter: blur(10px);
          border-color: var(--main-color);
          box-shadow: 0 0 0 4px rgba(29, 74, 151, 0.12);
          outline: none;
          &::placeholder {
            color: var(--main-color) !important;
          }
        }

        &::placeholder {
          color: var(--white-color);
        }
      }

      textarea.form-control {
        resize: vertical;
        min-height: 150px;
      }

      
    }

    /* Form Message */
    .form-message {
      display: none;
      margin-top: 20px;
      padding: 20px;
      border-radius: 12px;
      align-items: center;
      gap: 15px;

      &.show {
        display: flex;
      }

      i {
        font-size: 24px;
      }

      p {
        margin: 0;
        font-size: 15px;
      }
    }
  }

  /* Map Section */
  .contact-map {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 30px !important;


    p {
      color: var(--main-color) !important;
      font-weight: 600;
      font-size: 16px;



      background: rgba(255, 255, 255, 0.55);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }


    .map-container {
      border: 2px solid #f0f0f0;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);

      iframe {
        display: block;
        filter: grayscale(100%);
        transition: filter 0.4s ease;
        height: 450px;

        &:hover {
          filter: grayscale(0%);
        }
      }
    }
  }
}


.dental-contact-section {
  .dental-contact-card {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .dental-contact-card__row {
    width: 100%;
    color: inherit;
    transition: background-color 0.25s ease;
  }

  .dental-contact-card__row:not(:last-child) {
    border-bottom: 1px solid rgba(39, 35, 125, 0.12);
  }

  a.dental-contact-card__row:hover {
    background: rgba(64, 194, 205, 0.08);
  }


  .dental-contact-tile {
    color: inherit;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 24px rgba(39, 35, 125, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:
      transform 0.25s ease,
      box-shadow 0.25s ease,
      border-color 0.25s ease;
  }

  .dental-contact-tile--link:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(39, 35, 125, 0.12);
    border-color: rgba(64, 194, 205, 0.45);
  }

  .dental-contact-tile__icon {
    width: 44px;
    height: 44px;
    background: rgba(39, 35, 125, 0.08);
    color: var(--white-color);
    font-size: 1.15rem;
  }


  .dental-contact-tile__body {
    text-align: justify !important;
  }

  .dental-contact-tile__label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--main-color);
    letter-spacing: 0.02em;
    margin-bottom: 0.15rem;
  }

  .dental-contact-tile__value {
    display: block;
    font-size: 1rem;
    font-weight: 600;

    color: var(--main-color);
    transition: all 0.3s ease;

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

  .dental-contact-tile__hint {
    display: block;
    font-size: 0.8rem;
    color: #5a6a7a;
    margin-top: 0.2rem;
  }

  .dental-contact-tile__chev {
    flex-shrink: 0;
    align-self: center;
    font-size: 0.7rem;
    color: #99a3b0;
    opacity: 0.7;
  }

  .dental-contact-tile--link:hover .dental-contact-tile__chev {
    color: var(--main-color);
    opacity: 1;
  }

  .dental-contact-tile--addresses .dental-contact-tile__icon {
    background: rgba(64, 194, 205, 0.12);
  }

  .dental-contact-tile__addr {
    color: #4a5560;
    line-height: 1.55;
    text-align: start;
  }

  .dental-contact-tile__addr li strong {
    color: var(--main-color);
    display: block;
    margin-bottom: 0.15rem;
  }
}

/*  
##################################################
#                     Blogs                      #
##################################################
*/

.dental-blogs-section {




  .dental-feature-card {
    transition:
      transform 0.35s ease,
      box-shadow 0.35s ease;

    .dental-feature-card__thumb {
      overflow: hidden;

      img {
        width: 100%;
        height: clamp(220px, 24vw, 280px);
        border-radius: 30px;
        object-fit: cover;
        transition: transform 0.45s ease;
      }
    }


    .dental-feature-card__meta {
      display: inline-block;
      color: #5f6e82;
      font-size: 0.82rem;
      font-weight: 600;
      margin-bottom: 0.75rem;
    }


    .dental-feature-card__title {
      margin: 0 0 0.7rem;
      line-height: 1.45;
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--main-color);

      a {
        color: inherit;
      }
    }


    .dental-feature-card__excerpt {
      margin: 0 0 0.95rem;
      color: #68788f;
      line-height: 1.75;
      font-size: 0.96rem;
    }


    .dental-feature-card__link {
      color: var(--main-color);
      font-weight: 700;
      transition: gap 0.25s ease;

      i {
        font-size: 0.85rem;
      }
    }

    &:hover {
      transform: translateY(8px) !important;
      box-shadow: 0 20px 42px rgba(12, 34, 67, 0.14) !important;

      img {
        transform: scale(1.06) !important;
      }


      .dental-feature-card__link {
        gap: 0.6rem;
      }
    }
  }
}
[dir="rtl"]{
  .dental-feature-card__link {
    color: var(--main-color);
    font-weight: 700;
    transition: gap 0.25s ease;

    i {
      font-size: 0.85rem;
      transform: rotate(180deg);
    }
  }
}
/*  
##################################################
#                 Blog Details                   #
##################################################
*/
.blog-details-section {
  background: linear-gradient(180deg, #fff 0%, #f7f9fc 100%);
  border-top: 1px solid #eef0f3;
  border-bottom: 1px solid #eef0f3;

  .blog-details-article {
    border: 1px solid #e7ecf3;
    box-shadow: 0 10px 28px rgba(10, 28, 55, 0.08);
  }

  .blog-details-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.05) 0%,
        rgba(0, 0, 0, 0.45) 65%,
        rgba(0, 0, 0, 0.68) 100%);
    pointer-events: none;
  }

  .blog-details-hero-badges {
    z-index: 2;
  }

  .blog-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.9);
    color: var(--main-color);
    font-weight: 800;
    font-size: 0.82rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .blog-pill--main {
    background: linear-gradient(135deg,
        rgba(64, 194, 205, 0.92),
        rgba(39, 35, 125, 0.92));
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
  }

  .blog-details-hero {
    height: clamp(260px, 42vw, 430px);
    object-fit: cover;
  }

  .blog-details-body {

    p,
    li {
      color: #4f6076;
      line-height: 1.9;
    }

    h3 {
      color: var(--main-color);
      margin-top: 1.2rem;
      margin-bottom: 0.65rem;
      font-size: 1.25rem;
    }

    ul {
      margin: 0 0 1rem;
      padding-left: 1.25rem;
    }
  }

  .blog-details-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #5e6f85;
    font-size: 0.84rem;
    font-weight: 600;
    margin-bottom: 0.9rem;

    .dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #93a4ba;
    }
  }

  .blog-details-title {
    color: var(--main-color);
    margin-bottom: 1rem;
    font-size: clamp(1.45rem, 3vw, 2.05rem);
  }

  .blog-details-quote {
    border-left: 4px solid var(--main-color);
    background: #f3f7fd;
    color: #2f4461;
    font-style: italic;
  }

  .blog-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    background: #f7f9fc;
    border: 1px solid #e6ecf4;
    color: #304760;
    font-weight: 800;
    font-size: 0.86rem;
  }

  .blog-details-quote--tip {
    position: relative;
    border-left-color: var(--second-color);
    background: linear-gradient(135deg,
        rgba(64, 194, 205, 0.10),
        rgba(39, 35, 125, 0.06));
    font-style: normal;
  }

  .blog-quote-title {
    font-weight: 900;
    color: var(--main-color);
  }

  .blog-details-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    gap: 0.65rem;

    li {
      position: relative;
      padding: 0.85rem 0.95rem;
      border-radius: 14px;
      background: #f7f9fc;
      border: 1px solid #e6ecf4;
      color: #455467;
      font-weight: 600;
      padding-inline-start: 2.2rem;
    }

    li::before {
      content: "";
      position: absolute;
      inset-inline-start: 12px;
      top: 50%;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--second-color), var(--main-color));
      transform: translateY(-50%);
      box-shadow: 0 8px 18px rgba(39, 35, 125, 0.2);
    }
  }

  .blog-details-cta-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 14px 16px;
    background: linear-gradient(135deg,
        rgba(64, 194, 205, 0.10),
        rgba(39, 35, 125, 0.06));
    border: 1px solid rgba(39, 35, 125, 0.12);
  }

  .blog-details-cta-card__icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(39, 35, 125, 0.12);
    color: var(--main-color);
    font-size: 1.2rem;
  }

  .blog-details-cta-card__body h3 {
    margin: 0;
    font-size: 1.05rem;
  }

  .blog-details-cta-card__body p {
    color: #5a6a7a;
    margin-top: 6px;
    font-size: 0.95rem;
  }

  .blog-details-cta-card__btn {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 4px;
  }



  .blog-side-card {
    border: 1px solid #e7ecf3;
    background: #fff;
    box-shadow: 0 8px 22px rgba(10, 28, 55, 0.07);

    h3 {
      color: var(--main-color);
      margin-bottom: 0.9rem;
      font-size: 1.05rem;
    }
  }

  .blog-side-card--cta {
    background: linear-gradient(135deg,
        rgba(64, 194, 205, 0.10),
        rgba(39, 35, 125, 0.06));
    border-color: rgba(39, 35, 125, 0.14);
  }


  .blog-side-link {
    color: #304760;
    font-weight: 600;

    img {
      width: 72px;
      height: 58px;
      border-radius: 10px;
      object-fit: cover;
      flex-shrink: 0;
    }
  }

  .blog-side-link+.blog-side-link {
    border-top: 1px dashed #dfe6f2;
    margin-top: 0.45rem;
    padding-top: 0.8rem;
  }

  /* Service details sidebar refinements */
  .service-details-section {
    .service-side-card {
      border-color: #dce7f4;
      border-radius: 16px;
      box-shadow: 0 10px 24px rgba(10, 28, 55, 0.08);
      transition: transform 0.22s ease, box-shadow 0.22s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 28px rgba(10, 28, 55, 0.11);
      }

      h3 {
        font-size: 1.08rem;
        font-weight: 800;
        margin-bottom: 0.9rem;
        padding-bottom: 0.6rem;
        border-bottom: 1px solid #e9f0fb;
      }
    }

    .service-side-card--cta {
      background: linear-gradient(155deg, #f8fcff 0%, #edf7ff 100%);
    }

    .service-side-points {
      display: grid;
      gap: 10px;

      li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        color: #2f465f;
        line-height: 1.5;
        background: rgba(255, 255, 255, 0.7);
        border: 1px solid #deebf8;
        border-radius: 12px;
        padding: 10px;
      }

      i {
        width: 26px;
        height: 26px;
        border-radius: 8px;
        background: rgba(64, 194, 205, 0.16);
        color: var(--main-color);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-top: 1px;
      }

      .service-side-points__title {
        display: block;
        font-size: 0.8rem;
        font-weight: 800;
        color: var(--main-color);
        margin-bottom: 1px;
      }

      .service-side-points__text {
        display: block;
        font-size: 0.85rem;
        font-weight: 600;
        color: #2f465f;
      }
    }

    .blog-side-link {
      border-radius: 12px;
      padding-inline: 8px;
      transition: background-color 0.2s ease;

      &:hover {
        background-color: #f4f8ff;
      }
    }

    .service-side-quick-links a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: #2f465f;
      font-weight: 700;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid #dfe8f5;
      background: #f9fbff;
      transition: all 0.2s ease;

      i {
        font-size: 0.72rem;
        color: var(--main-color);
      }

      &:hover {
        color: var(--main-color);
        background: #eef7ff;
        border-color: rgba(64, 194, 205, 0.45);
        transform: translateX(-1px);
      }
    }
  }
}

/*  
##################################################
#                    Gallery                     #
##################################################
*/
.gallery-section {
  .gallery-img {
    transition: all 0.5s ease;
    cursor: pointer;
    height: 400px;

    &:hover {
      transform: scale(1.05);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    }
  }
}

/*  
##################################################
#                    Footer                      #
##################################################
*/

/* ===== FOOTER ===== */
footer {
  background: linear-gradient(135deg, var(--main-color) 0%, var(--second-color) 100%);
  color: var(--white-color) !important;
  margin: 0px 40px 20px 40px;
  border-radius: 30px;

  position: relative;
  overflow: hidden;
  z-index: 1;
  /* margin-top: 80px; */


  .footer-logo {
    h2 {
      font-size: 32px;
      font-weight: 700;
      margin-bottom: 20px;
      color: #fff;
    }

    span {
      color: #fff;
      font-weight: 300;
      font-style: italic;
    }
  }

  .footer-description {
    color: #b0b0b0;
    line-height: 1.8;
    margin-bottom: 30px;
    font-size: 15px;
  }

  /* fallback layout (in case utilities are missing) */
  .footer-social {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
  }

  .social-link {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background: #fff;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: all 0.4s ease;
    }

    &:hover {
      border-color: #fff;
      transform: translateY(-5px);

      &::before {
        width: 100%;
        height: 100%;
      }

      i {
        color: var(--main-color);
        position: relative;
        z-index: 1;
      }
    }
  }

  .footer-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 15px;

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      inset-inline-start: 0;
      width: 50px;
      height: 2px;
      background: #fff;
    }
  }

  .links-list {
    a {
      color: var(--white-color);
      text-decoration: none;
      font-size: 15px;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: all 0.3s ease;

      i {
        font-size: 12px;
        transition: transform 0.3s ease;
      }

      &:hover {
        color: #fff;
        padding-left: 8px;

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

  .footer-links a {
    color: var(--white-color);
  }

  .contact-list {
    li {
      display: flex;
      gap: 15px;
      margin-bottom: 20px;
      color: var(--white-color);
      font-size: 14px;
    }

    i {
      font-size: 20px;
      color: #fff;
      width: 25px;
      flex-shrink: 0;
      margin-top: 3px;
    }

    strong {
      color: #fff;
      display: block;
      margin-bottom: 5px;
      font-size: 15px;
    }

    p {
      margin: 0;
      line-height: 1.6;
    }
  }


  .footer-bottom {
    padding: 30px 0;
    position: relative;
    z-index: 1;
  }

  .copyright {
    color: var(--second-color);
    font-size: 14px;
    margin: 0;

    strong {
      color: #fff;
    }
  }

}

/* Section title reveal (typewriter.js — simple x + opacity like fade-in-right) */
.section-title-reveal {
  will-change: transform, opacity;
}

/* Wrap when title + subtitle are wrapped for a single reveal (JS may create) */
.section-title-reveal-block {
  display: block;
  min-width: 0;
}