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

/* Lenis Recommended CSS */
html.lenis,
html.lenis body {
  height: auto;
  background-color: #f8f7ed;
}

body{
  background-color: #f8f7ed;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: #f8f7ed;
  pointer-events: none;
}

:root {
  --them-color: #24AADD;
  --them-color2: #d9d7c0;
  /* --them-color2: #F6DCCF; */
  --black-color1: #0D0C0C;
  --black-color2: #000000;
  --bg-color: #FFF3ED;
  --bg-color-dark: #FBE9E1;
  --white: #fff;
  --gray-color: #D9D9D9;
  --blue-color: #170AAC;
  --heding-font: "DM Serif Display", serif;
  --primary-font: "Heebo", sans-serif;
  --style-font: "Licorice", cursive;
  --lora-font: "Lora", serif;
  --liner: linear-gradient(135deg, #13A8A2, #24AADD);
}

/* === comon css start === */

.main-btn a,
.main-btn button {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* MAIN BUTTON */
.main-btn a,
.main-btn button {
  position: relative;
  transition: all 0.3s ease-in-out;
  padding: 10px 25px;
  border-radius: 9999px;
  background: var(--liner);
  color: var(--white);
  font-family: var(--primary-font);
  font-size: 15px;
  font-weight: 500;
  gap: 10px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
}

/* ICON */
.main-btn .icon {
  width: 20px;
  height: 20px;
  transition: 0.3s;
}

/* HOVER SCALE */
.main-btn a:hover,
.main-btn button:hover {
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.6);
}

/* ICON MOVE */
.main-btn a:hover .icon,
.main-btn button:hover .icon {
  transform: translateX(4px);
}

/* SHINE EFFECT */
.main-btn a::before,
.main-btn button::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  top: 0;
  left: -100px;

  background: linear-gradient(120deg,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0) 70%);

  opacity: 0.6;
}

/* SHINE ANIMATION ON HOVER */
.main-btn a:hover::before,
.main-btn button:hover::before {
  animation: shine 1.5s ease-out infinite;
}

/* KEYFRAMES */
@keyframes shine {
  0% {
    left: -100px;
  }

  60% {
    left: 100%;
  }

  100% {
    left: 100%;
  }
}

.border-btn a,
.border-btn button {
  border: 1px solid var(--them-color);
  background: transparent;
  color: var(--them-color);
}

.border-btn a:hover,
.border-btn button:hover {
  background: var(--liner);
  color: var(--bg-color);
}

.des {
  font-size: 20px;
  color: var(--black-color2);
  font-style: var(--primary-font);
}

.section-title {
  font-size: 30px;
  color: var(--black-color2);
  font-family: var(--heding-font);
  text-transform: uppercase;
}

.section-title.pattern {
  position: relative;
  display: inline-block;
  padding-bottom: 15px;
  /* space for shape */
}

.section-title.pattern::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  /* move below text */
  width: 100%;
  height: 12px;

  background-image: url('../img/icon/title-shap.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left bottom;
}

.color-title {
  background: linear-gradient(135deg, #13A8A2, #24AADD);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* for modern browsers */
  color: transparent;
}

.padding {
  padding: 80px 0;
}

.padding-top {
  padding-top: 80px;
}

.padding-bottam {
  padding-bottom: 80px;
}

.margin {
  margin: 80px 0;
}

.margin-top {
  margin-top: 80px;
}

.margin-bottam {
  margin-bottom: 80px;
}

/* Common Button */
.custom-btn {
  position: relative;
  width: 55px;
  height: 55px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  overflow: hidden;
}

/* Outer Border */
.custom-btn::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 2px solid var(--black-color2);
  transition: all 0.4s ease;
}

/* Hover Border (Theme Gradient) */
.custom-btn::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 3px solid transparent;
  background: var(--liner);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transform: scale(1.2);
  transition: all 0.4s ease;
}

/* Icon */
.custom-btn .btn-icon {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.custom-btn i {
  font-size: 22px;
  color: var(--black-color2);
  transition: all 0.4s ease;
}


.custom-btn:hover::before {
  opacity: 0;
  transform: scale(0.7);
}

.custom-btn:hover::after {
  opacity: 1;
  transform: scale(1);
}

.custom-btn:hover i {
  color: var(--them-color);
  /* transform: translateX(3px); */
}

/* .slider-btn:first-child:hover i {
  transform: translateX(-3px);
} */

.bg-bottam {
  position: relative;
  overflow: hidden;
}

/* Animated Gradient Shape */
.bg-bottam::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -80px;
  transform: translateX(-50%);

  width: 140%;
  height: 80px;

  background:radial-gradient(circle at center, rgb(209 209 209), transparent 70%);
  filter: blur(40px);

  animation: floatGlow 6s ease-in-out infinite;
  z-index: 1;
}

/* Subtle top highlight */
.bg-bottam::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;

  background: linear-gradient(90deg, transparent, #24AADD, transparent);
  opacity: 0.7;
}

/* Animation */
@keyframes floatGlow {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: translateX(-50%) translateY(-20px);
    opacity: 1;
  }
}



.list-style-1 {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.list-style-1 li {
  position: relative;
  padding-left: 35px;
  /* space for icon */
  margin-bottom: 12px;
  font-size: 20px;
  font-family: var(--primary-font);
  line-height: 1.6;
}

/* Custom image icon */
.list-style-1 li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 18px;
  height: 18px;
  background-image: url(../img/icon/point-icon.svg);
  /* your path */
  background-size: contain;
  background-repeat: no-repeat;
}

/* .bg-dark1 {
  background: var(--white);
} */

/* === comon css end === */


/* === header section start === */

.navbar .setting-btn {
  width: 45px;
  height: 45px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: var(--black-color1);
  border-radius: 10px;
  cursor: pointer;
  border: none;
  box-shadow: 0px 0px 0px 2px rgb(212, 209, 255);
}
.navbar .setting-btn img{
  width: 30px;
  height: 30px;
}

.navbar .bar {
  width: 50%;
  height: 2px;
  background-color: rgb(229, 229, 229);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 2px;
}

.navbar .bar::before {
  content: "";
  width: 2px;
  height: 2px;
  background-color: rgb(255, 255, 255);
  position: absolute;
  border-radius: 50%;
  border: 2px solid white;
  transition: all 0.3s;
  box-shadow: 0px 0px 5px white;
}

.navbar .bar1::before {
  transform: translateX(-4px);
}

.navbar .bar2::before {
  transform: translateX(4px);
}

.navbar .setting-btn:hover .bar1::before {
  transform: translateX(4px);
}

.navbar .setting-btn:hover .bar2::before {
  transform: translateX(-4px);
}

/* NAV STYLE */
.offcanvas .custom-nav .nav-item {
  margin-bottom: 12px;
}

/* NAV LINK BASE */
.offcanvas .custom-nav .nav-link {
  position: relative;
  display: inline-block;
  justify-content: center;
  text-align: center;
  font-size: 45px;
  font-family: var(--heding-font);
  color: #818181;
  padding: 12px 20px;
  transition: all 0.3s ease;
}

/* UNDERLINE ANIMATION */
.offcanvas .custom-nav .nav-link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 0%;
  height: 2px;
  background: var(--white);
  transition: all 0.4s ease;
  transform: translateX(-50%);
}

/* HOVER EFFECT */
.offcanvas .custom-nav .nav-link:hover {
  color: var(--white);
}

.offcanvas .custom-nav .nav-link:hover::after {
  width: 60%;
}

/* ACTIVE LINK */
.offcanvas .custom-nav .nav-link.active {
  color: var(--white);
}

.offcanvas .custom-nav .nav-link.active::after {
  width: 60%;
}
/* ICON STYLE */
.offcanvas .custom-nav .nav-link i {
  font-size: 22px;
  color: var(--them-color);
  transition: all 0.3s ease;
}

/* RIGHT ICON STYLE */
.offcanvas .custom-nav .nav-link .right-icon {
  font-size: 16px;
  color: #adb5bd;
}

/* HOVER EFFECT */


/* CLOSE BUTTON WRAPPER */
.custom-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 45px;
  height: 45px;
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: 0.3s;
}

/* LINES */
.custom-close-btn span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background: #fff;
  transform-origin: center;
  transition: 0.3s;
}

/* CROSS SHAPE */
.custom-close-btn span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.custom-close-btn span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* HOVER EFFECT */
.custom-close-btn:hover {
  background: #13A8A2;
  transform: rotate(90deg);
}

.custom-close-btn:hover span {
  background: #fff;
}

.offcanvas .custom-nav .nav-link:hover i {
  color: #24AADD;
}

.offcanvas .custom-nav .nav-link:hover .right-icon {
  transform: translateX(3px);
  color: #24AADD;
}

/* ACTIVE STYLE */
.offcanvas .custom-nav .nav-link.active {
  background: var(--liner);
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 5px 15px rgba(36, 170, 221, 0.3);
}

.offcanvas .custom-nav .nav-link.active i {
  color: var(--white);
}

/* FULL SCREEN OFFCANVAS */
.offcanvas {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  background: rgb(0 0 0 / 55%) !important;
  backdrop-filter: blur(1px) !important;
}

.offcanvas-body {
  display: flex;
  flex-direction: column;
  justify-content: center;  
  align-items: center;     
  height: 100%;
}

.navbar .btn-close {
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  margin-right: 20px;
}

.navbar .navbar-brand img {
  width: 145px;
  height: 55px;
}

.navbar {
  transition: all 0.4s ease;
  background: transparent;
  padding: 20px 0;
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  padding: 10px 0;
  transform: translateY(0);
  animation: smoothSlide 0.4s ease;
}

@keyframes smoothSlide {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === header section end === */

/* === hero section start === */

.hero_wrapper {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

/* BACKGROUND FIX */
.hero-bg {
  position: absolute;
  inset: 0;
  background: url(../img/background/banner-bg.png) no-repeat center;
  background-size: cover;
  z-index: -1;
  height: 700px;
}

.hero_wrapper .hero-title {
  font-size: 75px;
  font-weight: 500;
  color: var(--black-color1);
  font-family: var(--heding-font);
  text-transform: uppercase;
}

/* === hero section end === */


/* ==== about section start === */
.about_wrapper {
  position: relative;
  /* background-color: var(--white); */
}

.about_wrapper::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 450px;
  height: 450px;
  background-image: url('../img/shap/right-cricle-shap.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
  pointer-events: none;
}

.about_wrapper .about-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.5s ease;
  /* smooth animation */
}

/* Hover Effect */
/* .about_wrapper .about-img:hover img {
  transform: scale(1.05) skewY(2deg);
} */

/* ==== about section end === */

/* === Counter section start === */
.counter-wrapper {
  background-color: var(--them-color2);
  padding: 20px 0;
}

/* Counter Box */
.counter-wrapper .counter-box {
  position: relative;
  flex: 0 0 16.66%;
  /* 6 columns */
  max-width: 16.66%;
  text-align: center;
  padding: 30px 20px;
  transition: all 0.4s ease;
  cursor: default;
}

.counter-wrapper .counter-box:hover {
  transform: translateY(-5px);
}

/* Number */
.counter-wrapper .count-number {
  font-size: 60px;
  color: var(--black-color1);
  font-family: var(--primary-font);
  font-weight: 700;
  margin-bottom: 5px;
  line-height: 1;
}

/* Text */
.counter-wrapper .count-text {
  font-size: 14px;
  font-weight: 500;
  color: #555;
  /* text-transform: uppercase; */
  letter-spacing: 1px;
  font-family: var(--primary-font);
  line-height: 1.4;
}

/* Vertical Divider (Perfect Center) */
.counter-wrapper .counter-box:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, var(--white), transparent);
  opacity: 0.3;
}



/* === Counter section end === */

/* === product section start === */

.product-wrapper .product-box img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.product-wrapper .product-box .product-name {
  font-size: 20px;
  color: var(--black-color2);
  font-weight: 600;
  font-family: var(--primary-font);
  padding-top: 15px;
}

.product-wrapper {
  position: relative;
}

.product-wrapper::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 450px;
  height: 450px;
  background-image: url('../img/shap/left-cricle-shap.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  pointer-events: none;
}



/* === product section end === */

/* === subbanner section start === */
.subbanner_wrapper {
  background-color: var(--them-color2);
  padding: 40px 0;
}

.subbanner_wrapper .subbanner-title {
  font-size: 24px;
  color: var(--black-color2);
  font-family: var(--primary-font);
  font-weight: 600;
  margin-bottom: 0px;
}

.subbanner_wrapper .subbanner-title img {
  height: 46px;
  width: 46px;
  object-fit: contain;
}

.subbanner_wrapper .subbanner-text {
  font-size: 20px;
  color: var(--black-color2);
  font-family: var(--primary-font);
  margin-bottom: 0px;
}


/* === subbanner section end === */

/* ==== hero slider section start === */

.panorama-slider {
  position: relative;
  overflow: hidden !important;
  padding-bottom: 200px !important;
  margin-top: 50px;
}

.panorama-slider .swiper {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.panorama-slider .swiper-slide {
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panorama-slider .slide-image {
  width: 100%;
  height: 400px !important;
  object-fit: cover;
  margin: auto;
  display: block;
  border-radius: 24px;
  /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); */
}

/* ==== hero slider section end === */

/* ==== client section start === */
.client_wrapper .client-title {
  font-size: 20px;
  color: var(--black-color2);
  font-family: var(--heding-font);
}

/* Logo Box */
.clientSwiper .client-logo {
  height: 120px; /* FIXED HEIGHT for alignment */
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

/* Logo Image */
.clientSwiper .client-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: all 0.4s ease;
}


.clientSwiper .swiper-wrapper {
  transition-timing-function: linear !important;
}

/* ==== client section end === */

/* ==== Customer section start === */


/* Main Card */
.customer-wrapper .customer-box {
  background: #fff;
  border-radius: 16px;
  padding: 40px 30px;
  border: 1px solid #eee;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: 0.3s ease;
}

/* Hover Effect */
.customer-wrapper .customer-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

/* Icon */
.customer-wrapper .custom-icon img {
  height: 46px;
  width: 46px;
  margin-bottom: 15px;
}

/* Review Text */
.customer-wrapper .customer-review {
  font-size: 22px;
  color: var(--black-color2);
  font-family: var(--primary-font);
  line-height: 1.7;
  text-align: center;
  position: relative;
  padding-bottom: 25px;
}

/* Bottom line image */
.customer-wrapper .customer-review::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 80%;
  /* responsive */
  max-width: 500px;
  /* limit */
  height: 14px;
  background-image: url(../img/shap/customer-line.svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Highlight text */
.customer-wrapper .customer-review strong {
  color: var(--them-color);
}

/* Bottom Section */
.customer-wrapper .customer-des {
  margin-top: 30px;
  align-items: center;
  justify-content: space-between;
}

/* Profile Image */
.customer-wrapper .customer-img img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--them-color);
}

/* Name */
.customer-wrapper .customer-name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 3px;
}

/* Subtitle */
.customer-wrapper .customer-subtitle {
  font-size: 14px;
  opacity: 0.7;
}

/* Company Logo */
.customer-wrapper .customer-company img {
  width: 120px;
  height: auto;
}

/* ==== Customer section end === */

/* === capabilities section start === */
.capabilities_wrapper .card {
  background-color: var(--white);
  border: 1px solid var(--them-color);
  border-radius: 5px;
  padding: 20px;
  height: 100%;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all 0.4s ease;
}

.capabilities_wrapper .card::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0%;
  /* start from bottom */
  background: var(--liner);
  transition: height 0.4s ease;
  z-index: -1;
}

/* Hover Effect */
.capabilities_wrapper .card:hover::before {
  height: 100%;
  /* move upward */
}

/* Card lift */
.capabilities_wrapper .card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  border-color: transparent;
}

.capabilities_wrapper .card .cap-img img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  transition: all 0.4s ease;
}

/* Icon color change (for SVG/PNG white effect) */
.capabilities_wrapper .card:hover .cap-img img {
  filter: brightness(0) invert(1);
  transform: scale(1.1);
}

.capabilities_wrapper .card .cap-title {
  font-size: 22px;
  color: var(--them-color);
  font-family: var(--primary-font);
  font-weight: 600;
  text-transform: uppercase;
  padding-top: 20px;
  margin-bottom: 0px;
  transition: all 0.3s ease;
}

.capabilities_wrapper .card .cap-des {
  font-size: 18px;
  color: var(--black-color2);
  font-family: var(--primary-font);
  text-transform: uppercase;
  margin-bottom: 0px;
  transition: all 0.3s ease;
}

/* Text color change on hover */
.capabilities_wrapper .card:hover .cap-title,
.capabilities_wrapper .card:hover .cap-des {
  color: var(--white);
}

/* === capabilities section end === */

/* ==== difference section start === */
.difference_wrapper .section-title span {
  color: var(--black-color2);
}
/* Fix image gap */
.difference_wrapper .diff-img-main {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* MAIN FIX */
.difference_wrapper .diff-img-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; 
}

/* ==== difference section end === */

/* === founder section start === */
.founder_wrapper .founder-box {
  position: relative;
  border: 2px solid var(--them-color);
  padding: 50px 20px 20px;
  margin-top: 40px;
  border-radius: 5px;
}

.founder_wrapper .founder-title-box {
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 30px;
  display: inline-block;
  width: 550px;
  background-color: #f8f7ed;
}

.founder_wrapper .founder-subtitle {
  font-size: 25px;
  margin: 0;
  color: var(--them-color);
  text-transform: uppercase;
  font-family: var(--primary-font);
}

.founder_wrapper .founder-title {
  font-size: 30px;
  text-transform: uppercase;
  margin: 0;
  color: var(--black-color2);
  background: transparent;
  font-family: var(--heding-font);
}

.founder_wrapper .founder-img img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

/* === founder section end === */

/* === map section start === */
.map_wrapper .main-map-img img {
  width: 100%;
  height: 100%;
  margin-top: 20px;
}

/* === map section end === */

/* === testimonials section start === */

.testimonials_wrapper {
  position: relative;
}

.testimonials_wrapper::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 350px;
  background-color: var(--them-color2);
  bottom: 0px;
  left: 0px;
  z-index: -1;
}

.testimonials_wrapper .card {
  background-color: var(--white);
  border: 1px solid var(--them-color);
  border-radius: 5px;
  padding: 20px;
  height: 100%;
  position: relative;
  margin-top: 20px;
}

.testimonials_wrapper .testimonial-icon {
  position: absolute;
  left: 50px;
  top: -20px;
}

.testimonials_wrapper .testimonial-icon img {
  height: 46px;
  width: 46px;
}

.testimonials_wrapper .testimonail-star {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.testimonials_wrapper .testimonail-star img {
  height: 20px;
  width: 20px;
}

.testimonials_wrapper .testimonail-text {
  font-size: 20px;
  color: var(--black-color2);
  font-family: var(--lora-font);
  line-height: 36px;
  padding-top: 20px;
}

.testimonials_wrapper .testimonial-img {
  background-color: var(--gray-color);
  height: 54px;
  width: 54px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.testimonials_wrapper .testimonial-img img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  object-fit: contain;
}

.testimonials_wrapper .testimonail-title {
  font-size: 20px;
  color: var(--black-color2);
  font-family: var(--primary-font);
  font-weight: 600;
}

.testimonials_wrapper .testimonail-subtitle {
  font-size: 15px;
  color: var(--black-color2);
  font-family: var(--primary-font);
}

/* === testimonials section end === */

/* === form section start === */
.form_wrapper {
background-color: var(--them-color2);
}
.form_wrapper .form-img img {
  width: 100%;
  height: 100%;
}

.form_wrapper input {
  width: 100%;
  height: 55px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 0 15px;
  color: var(--black-color1);
  font-size: 15px;
  font-family: var(--primary-font);
  font-weight: 500;
  background: #fff;
  transition: all 0.3s ease;
  outline: none;

}

/* Placeholder style */
.form_wrapper input::placeholder {
  color: var(--black-color1);
  font-size: 15px;
  font-family: var(--primary-font);
  font-weight: 500;
  text-transform: uppercase;
}

/* Focus effect */
.form_wrapper input:focus {
  border-color: var(--them-color);
  box-shadow: 0 0 0 3px rgba(36, 170, 221, 0.15);
}

/* Hover effect */
.form_wrapper input:hover {
  border-color: var(--them-color);
}

/* === form section end === */

/* === sub banner2 section start === */
.main-subbanner {
  position: relative;
  /* background-image: url(../img/background/sub-banner2.png); */
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  padding: 80px 0;
  overflow: hidden;
}

/* Gradient Layer */
.main-subbanner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgb(251 233 225 / 0%) 15%, /* #FBE9E1 */ rgb(247 247 237) 100% /* #F6DCCF */);
  z-index: 1;
}

/* Content above overlay */
.main-subbanner .container {
  position: relative;
  z-index: 2;
}

.main-subbanner .main-sub-text {
  font-size: 28px;
  color: var(--black-color2);
  font-family: var(--lora-font);
  font-weight: 500;
}

.main-subbanner .main-sub-title {
  font-size: 50px;
  font-family: var(--style-font);
  color: var(--blue-color);

}

/* === sub banner2 section end === */

/* === footer section start === */

.footer-wrapper{
  background-color: var(--black-color1);
}

.footer-wrapper .footer-main-box {
  display: flex;
  justify-content: space-between;
  padding: 60px 0;
}

.footer-wrapper .footer-main-box .footer-logo-box .footer-logo img {
  width: 143px;
  height: 52px;
}

.footer-wrapper .footer-main-box .footer-logo-box .footer-text {
  font-size: 15px;
  color: var(--white);
  font-family: var(--primary-font);
  padding: 20px 0;
}

.footer-wrapper .footer-title {
  font-size: 30px;
  color: var(--white);
  font-family: var(--heding-font);
  text-transform: uppercase;
}

.footer-wrapper .footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}


.footer-wrapper .footer-menu li {
  margin-bottom: 12px;
}

.footer-wrapper .footer-menu li a {
  font-size: 15px;
  font-family: var(--primary-font);
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  position: relative;
  display: inline-block;
  transition: all 0.3s ease;
}

.footer-wrapper .footer-menu li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background: var(--them-color);
  transition: width 0.3s ease;
}

.footer-wrapper .footer-menu li a:hover {
  color: var(--them-color);
  transform: translateX(5px);
}

.footer-wrapper .footer-menu li a:hover::after {
  width: 100%;
}


/* Flex layout */
.footer-wrapper .footer-content {
  display: flex;
  align-items: center;
  gap: 15px;
  /* margin-bottom: 18px; */
}

/* Icon */
.footer-wrapper .footer-icon {
  flex-shrink: 0;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease;
}

/* Icon style */
.footer-wrapper .footer-icon i {
  font-size: 20px;
  color: var(--them-color);
  transition: 0.3s ease;
}

/* Text */
.footer-wrapper .fc-text a {
  font-size: 15px;
  font-family: var(--primary-font);
  color: var(--white);
  text-decoration: none;
  transition: 0.3s ease;
}

.footer-wrapper .footer-content:hover .footer-icon {
  background: var(--liner);
  transform: translateY(-3px);
}

.footer-wrapper .footer-content:hover .footer-icon i {
  color: var(--white);
}

.footer-wrapper .footer-content:hover .fc-text a {
  color: var(--them-color);
  transform: translateX(5px);
}

/* Wrapper */
.footer-wrapper .footer-social {
  display: flex;
  gap: 15px;
}

/* Each icon box */
.footer-wrapper .footer-social a {
  width: 45px;
  height: 45px;
  border: 1px solid var(--them-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Icon image */
.footer-wrapper .footer-social a img {
  width: 20px;
  height: 20px;
  transition: all 0.3s ease;
}

.footer-wrapper .footer-social a:hover {
  background: var(--liner);
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Make icon white */
.footer-wrapper .footer-social a:hover img {
  filter: brightness(0) invert(1);
}

.footer-wrapper .footer-link {
  border-top: 1px solid var(--them-color);
}

.footer-wrapper .footer-link p {
  font-size: 15px;
  font-family: var(--primary-font);
  color: var(--white);
  text-decoration: none;
}

.footer-wrapper .footer-link p a {
  font-size: 15px;
  font-family: var(--primary-font);
  color: var(--them-color);
  text-decoration: none;
  font-weight: 600;
}

.footer-wrapper .footer-link a {
  font-size: 15px;
  font-family: var(--primary-font);
  color: var(--white);
  text-decoration: none;
}


/* === footer section end === */

/* === Back To Top Button === */
#backToTop {
  position: fixed;
  bottom: 35px;
  right: 35px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--liner);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.85);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
  box-shadow: 0 6px 24px rgba(36, 170, 221, 0.45);
}

#backToTop.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

#backToTop i {
  font-size: 24px;
  color: var(--white);
  transition: transform 0.3s ease;
}

#backToTop:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 10px 30px rgba(36, 170, 221, 0.6);
}

#backToTop:hover i {
  transform: translateY(-3px);
}

/* Pulse ring */
#backToTop::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--liner);
  opacity: 0.35;
  animation: bttPulse 2s ease-out infinite;
}

@keyframes bttPulse {
  0% {
    transform: scale(1);
    opacity: 0.35;
  }

  70% {
    transform: scale(1.55);
    opacity: 0;
  }

  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}

/* === Back To Top Button End === */


/* ==== modal section start === */
.modal input {
  width: 100%;
  height: 55px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 0 15px;
  color: var(--black-color1);
  font-size: 15px;
  font-family: var(--primary-font);
  font-weight: 500;
  background: #fff;
  transition: all 0.3s ease;
  outline: none;

}

/* Placeholder style */
.modal input::placeholder {
  color: var(--black-color1);
  font-size: 15px;
  font-family: var(--primary-font);
  font-weight: 500;
  text-transform: uppercase;
}

/* Focus effect */
.modal input:focus {
  border-color: var(--them-color);
  box-shadow: 0 0 0 3px rgba(36, 170, 221, 0.15);
}

/* Hover effect */
.modal input:hover {
  border-color: var(--them-color);
}

/* Modal spacing */
.custom-modal .modal-content {
  border-radius: 15px;
  padding: 20px;
  position: relative;
}

/* Close button */
.modal .custom-close {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 10;
  background-color: #fff;
  border-radius: 50%;
  padding: 10px;
  opacity: 1;
}

/* Image wrapper */
.modal .img-wrapper {
  max-width: 100%;
}

.modal .img-wrapper img {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: 10px;
}

/* Responsive Fix */
@media (max-width: 768px) {
 .modal .img-wrapper img {
    max-height: 220px;
  }
}
/* ==== modal section end === */