html {
  scroll-behavior: smooth;
}
/* ────────────────────────────── */
/*         GLOBAL VARIABLES      */
/* ────────────────────────────── */
:root {
  /* Colors */
  --color-primary: #d11341; /* Main accent (e.g., logo, buttons) */
  --color-secondary: #1d1341; /* Secondary accents and backgrounds */
  --color-tertiary: #8d1432; /* Additional accent (hover states, etc.) */
  --color-bg-light: #f9f4f7; /* Light background */
  --color-bg-dark: #111111; /* Dark background (footers, etc.) */

  --color-text-primary: #2d1040; /* Primary text (headings) */
  --color-text-secondary: #5e5e5e; /* Secondary text (paragraphs) */
  --color-text-light: #ffffff; /* Text on dark backgrounds */

  --link-color: var(--color-primary);
  --link-hover: var(--color-tertiary);

  --button-bg: var(--color-secondary);
  --button-text: #ffffff;
  --button-hover-bg: var(--color-primary);
  --button-hover-text: #ffffff;

  /* Typography */
  --font-family-primary: "Roboto Flex", sans-serif;
  --font-family-heading: "Philosopher", sans-serif;
  --font-size-xs: 14px; /* Extra small text */
  --font-size-sm: 16px; /* Base text size */
  --font-size-md: 16px; /* Medium text */
  --font-size-lg: 20px; /* Large text */
  --font-size-xl: 28px; /* Extra large headings */
  --font-size-xxl: 36px; /* Huge headings/titles */
  --line-height: 1.6;
  --section-title: 33px;
}
/* Style the scrollbar container */
::-webkit-scrollbar {
  width: 12px; /* Set the width of the scrollbar */
  height: 12px; /* Set the height for horizontal scrollbar */
}

/* Style the scrollbar thumb (the draggable part) */
::-webkit-scrollbar-thumb {
  background-color: var(--color-primary); /* Set color */
  border-radius: 10px; /* Make it rounded */
  border: 3px solid #f1f1f1; /* Optional border for the thumb */
  transition: all 168ms ease;
}

/* Style the scrollbar track (the background) */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* Set track color */
}

/* Style when the scrollbar is hovered */
::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-tertiary);
  cursor: pointer;
}

body {
  font-optical-sizing: auto;
  font-smooth: always;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--font-family-primary);
  font-size: calc(var(--font-size-md) + 1px) !important;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-family-heading) !important;
}

.navbar-nav {
  gap: 3rem;
}

.eightTfour_prime {
  display: block;
  padding: 11px 33px;
  position: relative;
  color: white;
  background: var(--color-secondary);
  border: 0;
  border-radius: 8px;
  min-width: max-content;
  max-width: min-content;
  font-size: var(--font-size-lg);
  font-family: var(--font-family-heading);
  text-decoration: none;
}

.eightTfour_prime:before {
  content: "";
  z-index: 0;
  position: absolute;
  inset: 0;
  --progress: 100%;
  background: var(--color-primary);
  clip-path: polygon(
    100% 0,
    var(--progress) var(--progress),
    0 100%,
    100% 100%
  );
  border-radius: 8px;
  transition: clip-path 0.2s;
}

.eightTfour_prime:hover:before {
  --progress: 0%;
}

.eightTfour_prime .text-container {
  display: block;
  position: relative;
  overflow: hidden;
}

.eightTfour_prime .text {
  display: block;
  position: relative;
  font-weight: 600;
}

.eightTfour_prime:hover .text {
  animation: move-up-alternate 0.3s forwards;
  will-change: transform;
  color: #fff;
}

.eightTfour_sec {
  display: block;
  padding: 11px 33px;
  position: relative;
  color: var(--color-secondary);
  background: transparent;
  border: 1px solid var(--color-secondary);
  border-radius: 8px;
  min-width: max-content;
  max-width: min-content;
  font-size: var(--font-size-lg);
  font-family: var(--font-family-heading);
  text-decoration: none;
}

.eightTfour_sec:before {
  content: "";
  z-index: 0;
  position: absolute;
  inset: 0;
  --progress: 100%;
  background: var(--color-primary);
  clip-path: polygon(
    100% 0,
    var(--progress) var(--progress),
    0 100%,
    100% 100%
  );
  border-radius: 8px;
  transition: clip-path 0.2s;
}

.eightTfour_sec:hover:before {
  --progress: 0%;
}

.eightTfour_sec .text-container {
  display: block;
  position: relative;
  overflow: hidden;
}

.eightTfour_sec .text {
  display: block;
  position: relative;
  font-weight: 600;
}

.eightTfour_sec:hover .text {
  animation: move-up-alternate 0.3s forwards;
  will-change: transform;
  color: #fff;
}

@keyframes move-up-alternate {
  from {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(80%);
  }
  51% {
    transform: translateY(-80%);
  }
  100% {
    transform: translateY(0%);
  }
}

/* ────────────────────────────── */
/*          HEADER CSS            */
/* ────────────────────────────── */

.dropdown-item {
  font-size: var(--font-size-md) !important;
}

/* Navbar */
.main-navbar-div {
  width: 100%;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}
.announcement {
  position: relative;
}
.announcement:after {
  content: "";
  position: absolute;
  bottom: auto;
  left: 0;
  height: 1px;
  background: var(--bs-border-color);
  display: block;
  width: 200%;
}

.hero-banner-section {
  overflow: hidden;
  width: 100vw;
}
.banner-slider .slick-slide,
.banner-slider .slick-slide div,
.banner-slider .slick-list,
.banner-slider .slick-track,
.banner-slider .slick-slider,
.banner-slider .slick-slide img {
  height: 100%;
  object-fit: cover;
}

.banner-slider {
  height: calc(100vh - var(--navbar-height, 86px));
  max-height: 1080px;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.dropdown-menu {
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  animation: fadeInUp 0.4s forwards;
}

.dropdown-menu.show {
  display: block;
  opacity: 1;
  animation: fadeInUp 0.4s forwards;
}
.nav-link {
  font-weight: 600 !important;
  padding: 0 !important;
}

/* ────────────────────────────── */
/*          BANNER CSS            */
/* ────────────────────────────── */

.banner-slide-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.banner-slide-content h2 {
  font-size: 46px;
  color: var(--color-primary);
  font-weight: 700;
}
.banner-slide-content h4 {
  font-size: 27px;
  font-weight: 600;
  font-family: "Poppins";
  color: var(--color-bg-dark);
}
.banner-slide {
  background-size: cover;
  background-position: left center;
}
.slick-dots {
  bottom: 0px;
  z-index: 2;
}
.slick-dots li button:before {
  content: none;
}
.slick-dots li button {
  height: 0;
  padding: 0;
}
.slick-dots li {
  background: #1d134140;
  height: 8px;
  width: 46px;
  border-radius: 84px;
  margin-bottom: 27px;
}
.slick-dots li.slick-active {
  background: #1d1341;
}

/* ────────────────────────────── */
/*         About Us Section      */
/* ────────────────────────────── */
.title_wrapper {
  margin-bottom: 38px;
}
.title_wrapper h2 {
  font-weight: 600;
  font-size: var(--section-title);
}
.section-sec-title {
  font-size: 27px;
  font-weight: 700;
}
.section-desc {
  line-height: 2;
}
.b-l-image {
  position: absolute;
  top: 100%;
  right: 100%;
}
.t-r-image {
  position: absolute;
  top: 0;
  right: -20%;
  z-index: -1;
}

.special-numbers h5 {
  font-size: 70px;
  font-family: var(--font-family-heading);
  font-weight: 800;
}
.special-numbers-wrapper {
  background: var(--color-secondary)
    url("../image/small-images/number-background-image.webp") center/cover
    no-repeat;
  color: #fff;
  padding: 70px;
  border-radius: 33px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  position: relative;
}
.special-numbers-wrapper:after {
  content: "";
  position: absolute;
  right: -96%;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-secondary)
    url("../image/small-images/number-background-image.webp") center/cover
    no-repeat;
  z-index: -1;
}
.special-numbers-wrapper:before {
  content: "";
  position: absolute;
  right: 0;
  border-radius: 33px;
  bottom: 84px;
  display: block;
  width: 200%;
  height: 100%;
  background-color: #fdf4f6;
  z-index: -1;
}
.special-numbers p {
  margin-bottom: 0;
}
.positioned-image {
  position: absolute;
  right: 0;
  top: -24px;
  z-index: 2;
}
.special-numbers {
  position: relative;
  padding: 18px;
}
.special-numbers:after {
  content: "";
  display: block;
  width: 2px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(0deg, transparent, #ffffff, transparent);
}
.special-numbers::before {
  content: "";
  display: block;
  width: 33px;
  height: 100%;
  position: absolute;
  top: 45%;
  right: 95%;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='16' viewBox='0 0 32 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle opacity='0.8' cx='8.27588' cy='8.1839' r='7.80713' fill='%23D11341'/%3E%3Cpath d='M23.8906 15.991C28.2024 15.991 31.6978 12.4957 31.6978 8.1839C31.6978 3.87214 28.2024 0.37677 23.8906 0.37677V15.991Z' fill='%23D9D9D9'/%3E%3Cpath d='M16.0781 15.991C20.3899 15.991 23.8853 12.4957 23.8853 8.1839C23.8853 3.87214 20.3899 0.37677 16.0781 0.37677V15.991Z' fill='%23D9D9D9'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
}
.special-numbers-wrapper .special-numbers:last-child:after {
  content: none;
}
.special-numbers-wrapper .special-numbers:first-child:before {
  content: none;
}

/* ────────────────────────────── */
/*         Products      */
/* ────────────────────────────── */
.flip-horizontal {
  transform: scaleX(-1);
}
.flip-vertical {
  transform: scaleY(-1);
}
.product_title h3 {
  font-size: var(--section-title);
  font-weight: 600;
  margin: 0;
}
.product_title {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  padding: 20px;
  background: linear-gradient(0deg, #fff, transparent);
  border-radius: 11px;
}
.btn-small {
  font-size: 16px;
  padding: 8px 18px;
}
.text-decoration-none {
  text-decoration: none !important;
}
.wrap-img .main_img {
  border-radius: 11px;
}
.wrap-img {
  position: relative;
}
.border_animation path {
  stroke-dasharray: 2000;
  stroke-dashoffset: -2000;
  animation: drawFillReverse 8s ease-out forwards infinite;
}

.border_animation.ltr {
  left: -15px;
}
.border_animation.rtl {
  right: -15px;
  transform: scaleX(-1);
}
.border_animation {
  position: absolute;
  bottom: 11px;
  max-width: calc(var(--eightTfour-img-width) + 10px) !important;
  max-height: calc(var(--eightTfour-img-height) + 10px) !important;
}
@keyframes drawFillReverse {
  to {
    stroke-dashoffset: 2000;
  }
}
.heart-animation {
  margin: 0 4px;
  color: #d11341;
  animation: beat 8s infinite;
  transition: transform 0.3s ease;
}

@keyframes beat {
  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    transform: scale(1);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: scale(1.2);
  }
}
.path_animation {
  stroke-dasharray: 2000;
  stroke-dashoffset: -2000;
  animation: drawFillReverse 8s ease forwards infinite;
}
@keyframes drawFillReverse {
  to {
    stroke-dashoffset: 2000;
  }
}
/* ────────────────────────────── */
/*    Start : Infrasturcture      */
/* ────────────────────────────── */

.infrasturcture {
  background: linear-gradient(0deg, #fff, transparent),
    url("../image/small-images/infrasturcture-background-img.webp");
  background-repeat: no-repeat;
  background-size: cover;
}
.infrasturcture .slick-slide {
  margin-right: 20px;
  border-radius: 9px;
  overflow: hidden;
}
.slide-link {
  font-size: 22px;
  font-family: var(--font-family-heading);
  color: var(--color-primary);
  font-weight: 600;
  transition: all 168ms ease;
}
.slide-link:hover {
  color: var(--color-tertiary);
}
/* ────────────────────────────── */
/*    Reached : Infrasturcture    */
/* ────────────────────────────── */
.exports-section {
  background: linear-gradient(180deg, #fdf3f5, #fef3ff);
}

/* ────────────────────────────── */
/*    Started : Application    */
/* ────────────────────────────── */
.slider-text {
  font-weight: 600;
  font-size: calc(var(--section-title) + 18px);
  max-width: 460px;
  width: 100%;
}
.slider-description {
  max-width: 500px;
  width: 100%;
}
.slick-slider .slick-dots {
  top: 100%;
}
/* ────────────────────────────── */
/*    Reached : Application    */
/* ────────────────────────────── */

/* ────────────────────────────── */
/*    Start : Footer    */
/* ────────────────────────────── */
footer,
.footer-bottom-div {
  background-color: #151617;
  color: #fff;
}
.footer_links {
  list-style: none;
  padding-left: 0;
}
.footer_links li {
  margin-bottom: 20px;
}
.footer_links a {
  text-decoration: none;
  color: #ffffffcb;
  font-weight: 300;
  transition: all 168ms ease;
  line-height: 1.4;
}
.footer_links a:hover {
  color: #ffffff;
}
.link-list-heading {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
}
.footer_links i.fa-solid {
  line-height: 1.4 !important;
}

/* ────────────────────────────── */
/*    Reached : Footer    */
/* ────────────────────────────── */

/* ────────────────────────────── */
/*         Animations      */
/* ────────────────────────────── */
/* Preloader Styles */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(#ffffff, #fdf3f5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  opacity: 1;
  visibility: visible;
}

#preloader.fade-out {
  opacity: 0;
  visibility: hidden;
}

#preloader img {
  width: 180px;
  height: auto;
  position: relative;
  z-index: 1;
}

/* Border with Progress Animation */
#preloader::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border: 2px solid transparent;
  border-top: 2px solid #d11341;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Spinning Animation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* *************** Reached Preloader *************** */

a.egOne {
  position: relative;
  transition: all 0.15s ease-out;
  /*
    webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    -o-transition: all 0.15s ease-out;
    -ms-transition: all 0.15s ease-out;
  */
}
a.egOne:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.5s cubic-bezier(1, 0.25, 0, 0.75) 0s;
  transition: all 0.5s cubic-bezier(1, 0.25, 0, 0.75) 0s;
}
a.egOne:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.animated_border {
  text-decoration: none;
  display: inline-block;
}
.animated_border:hover {
  border-bottom: none;
  background-repeat: repeat;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 10 18'%3E%3Cstyle type='text/css'%3E.squiggle%7Banimation:shift .5s linear infinite;%7D@keyframes shift %7Bfrom %7Btransform:translateX(-10px);%7Dto %7Btransform:translateX(0);%7D%7D%3C/style%3E%3Cpath fill='none' stroke='%23d11341' stroke-width='0.5' class='squiggle' d='M0,17.5 c 2.5,0,2.5,-1.5,5,-1.5 s 2.5,1.5,5,1.5 c 2.5,0,2.5,-1.5,5,-1.5 s 2.5,1.5,5,1.5' /%3E%3C/svg%3E");
}

.floating {
  display: inline-block;
  animation: float 4s ease-in-out infinite;
}

.bg_light {
  background-color: #fdf4f6;
}

.banner_section {
  position: relative;
}

.banner_section img {
  width: 100%;
}

.banner_content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}

.banner_content h1 {
  font-size: 84px;
  font-weight: 700;
  color: var(--color-primary);
}

.banner_section {
  overflow: hidden;
}

.vision_mission_section .special-numbers-wrapper {
  grid-template-columns: repeat(2, 1fr);
}

.vision_mission_section .special-numbers p {
  margin-bottom: 0;
  max-width: 470px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.7;
}

.vision_mission_section .special-numbers::before {
  right: 97%;
}

.icon_box {
  background: linear-gradient(0deg, #ffffff, #fff0f359),
    url(../image/small-images/infrasturcture-background-img.webp);
  border-radius: 40px 0 0 0;
}

.icon_box i {
  background: #d113410f;
  padding: 10px;
  font-size: 30px;
  height: 60px;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border-radius: 168px;
  color: var(--color-primary);
}

.present-circle {
  outline: 3px solid #f6d7df;
  outline-offset: 4px;
}

.why_choose_us .icon_box {
  background: linear-gradient(0deg, #ffffff, #ffffff),
    url(../image/small-images/infrasturcture-background-img.webp);
  border-radius: 40px;
}
.bg_gradient {
  background: linear-gradient(0deg, #ffffff, #fff0f359),
    url(../image/small-images/infrasturcture-background-img.webp);
}
.why_choose_us .icon_box p {
  margin-bottom: 0;
}
.why_choose_us .icon_box i::after {
  border-color: #1d134133;
}
.why_choose_us .icon_box i {
  background: #1d13411c;
  color: var(--color-secondary);
}
.highlight {
  position: relative;
}
.highlight:before {
  content: "";
  display: inline-block;
  background: #290f781a;
  width: -webkit-fill-available;
  height: 8px;
  position: absolute;
  top: 70%;
  left: 0;
  z-index: 2;
}
/* ***************** Timeline CSS ************************* */

/* =================== Inquiry Form ======================= */

.input-container {
  position: relative;
}

.input-container .form_label {
  position: absolute;
  left: 8px;
  top: 10px;
  transition: all 0.3s ease;
  background: #fff;
  padding: 0 4px;
  /* Adjust padding for better spacing */
  pointer-events: none;
  color: #8b8b8b;
}

.active .form_label {
  left: 8px;
  top: -10px;
  font-size: 15px;
}

.input-container.focused .form_label {
  top: -12px;
  font-size: 16px;
  left: 18px;
  color: #afafaf;
}

input,
textarea {
  width: 100%;
  outline: none;
  border: 2px solid #ececec;
  background: #fff;
  padding: 0.6rem 1.2rem;
  color: #000000;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.5px;
  border-radius: 5px;
  transition: 0.3s;
}

label.error {
  color: #ff4e4c;
  font-size: 14px;
}

.input-container .form_label {
  font-weight: 500;
}
.contact_information {
  border: none;
  background: #fff;
  padding: 24px;
  border-radius: 16px;
  box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px,
    rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px,
    rgba(42, 51, 70, 0.04) 0px 2px 2px -1px,
    rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px,
    rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px,
    rgba(42, 51, 70, 0.03) 0px 10px 10px -5px,
    rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;
}
.contact__form {
  border-radius: 16px;
  padding: 33px;
  /* box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px; */

  background: linear-gradient(#ffffffe0, #ffffff),
    url(../image/form-bg-img.webp);
  background-size: contain;
  background-repeat: repeat;
  background-position: bottom center;
  border: 2px dashed #1d134152;
}
.contact_page svg {
}
/* =================== End Inquiry Form ======================= */

.eightTfour-timeline div {
  padding: 0;
  height: 40px;
}

.eightTfour-timeline hr {
  border-top: 3px solid #f7d8e0;
  margin: 0;
  top: 17px;
  position: relative;
  opacity: 1;
}

.eightTfour-timeline .col-2 {
  display: flex;
  overflow: hidden;
}

.eightTfour-timeline .eightTfour-corner {
  border: 3px solid #f7d8e0;
  width: 100%;
  position: relative;
  border-radius: 15px;
}
.text_primary {
  color: var(--color-primary);
}
.text_secondary {
  color: var(--color-secondary);
}
.eightTfour-timeline .eightTfour-top-right {
  left: 50%;
  top: -50%;
}

.eightTfour-timeline .eightTfour-left-bottom {
  left: -50%;
  top: calc(50% - 3px);
}

.eightTfour-timeline .eightTfour-top-left {
  left: -50%;
  top: -50%;
}

.eightTfour-timeline .eightTfour-right-bottom {
  left: 50%;
  top: calc(50% - 3px);
}

.eightTfour-circle {
  padding: 20px;
  border-radius: 50%;
  background: linear-gradient(45deg, #d11341, #ff829e, #ff829e);
  color: #fff;
  z-index: 2;
  line-height: 2;
  font-weight: 600;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}

.eightTfour-how-it-works h5 {
  font-weight: 600;
  color: #111;
  font-family: var(--font-family-heading);
}

.eightTfour-how-it-works p {
  color: #848484;
}
.osr_section .icon_box {
  background: linear-gradient(0deg, #ffffff, #dee9d8);
}
.osr_section .icon_box i {
  color: #22490e;
  background: #ffffff;
}
.icon_box * {
  transition: all 168ms ease;
}
.icon_box:hover i {
  transform: scale(1.27) rotate(2deg);
}

.map_img {
  box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px,
    rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px,
    rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px,
    rgba(42, 51, 70, 0.04) 0px 6px 6px -3px,
    rgba(14, 63, 126, 0.04) 0px 12px 12px -6px,
    rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
}

.icon_box_wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.wcu_card {
  background: linear-gradient(70deg, #f5f5f5, #f3f3f3, #fbfbfb, #ffffff);
  border-radius: 36px !important;
}

.wcu_card .card_icon {
  background: #fff;
  border-radius: 84px;
  font-size: 24px;
  height: 50px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
  /* border-right: 3px solid #f0f0f0; */
}

.wcu_card p,
.wcu_card ul {
  font-size: 16px;
}

.styled_ul {
  list-style: none;
  padding-left: 0;
}

.styled_ul li {
  display: flex;
  align-items: flex-start;
  /* Align icon and text in the same line */
  gap: 8px;
  /* Space between icon and text */
  margin-bottom: 10px;
}

.styled_ul li::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  /* background-image: url("../image/title-svg.svg"); */
  background-image: url("data:image/svg+xml,%3Csvg width='93' height='95' viewBox='0 0 93 95' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M44.16 47.5C34.7042 42.6234 26.9909 34.938 22.08 25.5C17.1691 34.938 9.45576 42.6234 0 47.5C9.6444 52.472 17.3984 60.4613 22.08 70.25C22.08 70.25 26.57 60.99 31.08 56.51C35.02 53.63 39.59 50.58 44.16 47.5ZM70.88 24.75C65.9824 34.2177 58.2677 41.9324 48.8 46.83C58.4317 51.7814 66.1842 59.7411 70.88 69.5C70.88 69.5 75.36 60.24 79.88 55.76C83.88 52.88 88.42 49.84 92.99 46.76C83.5216 41.8858 75.7971 34.1962 70.88 24.75ZM46.13 44.75C46.13 44.75 50.61 35.49 55.13 31.01C59.13 28.13 63.68 25.08 68.24 22.01C58.7728 17.1342 51.0487 9.44501 46.13 0C41.2324 9.46769 33.5177 17.1824 24.05 22.08C33.688 27.0417 41.4413 35.0162 46.13 44.79V44.75ZM46.83 50.17C41.9401 59.6499 34.2288 67.3786 24.76 72.29C34.393 77.2552 42.1421 85.229 46.83 95C46.83 95 51.32 85.74 55.83 81.26C59.83 78.38 64.37 75.33 68.94 72.26C59.4657 67.3753 51.7404 59.671 46.83 50.21V50.17Z' fill='%23333333'/%3E%3C/svg%3E%0A");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
  margin-top: 5px;
}

.why-us {
  background: linear-gradient(135deg, #fff0f0, #ffe6e9, #ffedf5, #fff7fb);
  /* padding: 27px; */
  /* border-radius: 27px; */

  /* border: 1px solid #ffe6e9; */
}
.outer_border {
  background: linear-gradient(168deg, #ffacc0 10%, transparent 40%);
  padding: 2px;
}
.styled_ul.tick_li li::before {
  background-image: url("data:image/svg+xml,%3Csvg width='62' height='62' viewBox='0 0 62 62' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.1908 32.238C15.3314 31.2927 15.3978 29.8278 16.3431 28.9646C17.2885 28.1052 18.7533 28.1716 19.6165 29.1169L26.9056 37.1208L41.8156 19.3668C42.636 18.3864 44.0968 18.2535 45.0773 19.0778C46.0578 19.8981 46.1867 21.359 45.3664 22.3395L28.7534 42.1245C28.687 42.2026 28.6167 42.2807 28.5386 42.351C27.5933 43.2104 26.1284 43.144 25.2652 42.1987L16.1908 32.238ZM30.7498 0C22.2576 0 14.5698 3.4414 9.0078 9.0078C3.4414 14.5703 0 22.2578 0 30.7498C0 39.2418 3.4414 46.9298 9.0078 52.4918C14.5742 58.0582 22.2618 61.4996 30.7498 61.4996C39.2378 61.4996 46.9298 58.0582 52.4918 52.4918C58.0582 46.9293 61.4996 39.2418 61.4996 30.7498C61.4996 22.2578 58.0582 14.5698 52.4918 9.0078C46.9293 3.4414 39.2378 0 30.7498 0ZM49.2108 12.289C44.4881 7.5663 37.9608 4.6445 30.7498 4.6445C23.5388 4.6445 17.0118 7.5664 12.2888 12.2929C7.5661 17.0117 4.6443 23.5389 4.6443 30.7499C4.6443 37.9609 7.5662 44.4879 12.2927 49.2109C17.0193 53.9336 23.5467 56.8593 30.7537 56.8593C37.9646 56.8593 44.4917 53.9374 49.2147 49.2109C53.9374 44.4882 56.8592 37.9569 56.8592 30.7499C56.8553 23.539 53.9334 17.012 49.2108 12.289Z' fill='black'/%3E%3C/svg%3E%0A");
}
.bg_offwhite {
  background: linear-gradient(45deg, #fff, #fbfbfb, #fbfbfb);
  border-top: 2px dashed #ffeced;
  border-bottom: 2px dashed #ffeced;
}
.icon_box h5 {
  font-family: var(--font-family-heading);
}
.icon_box i {
  position: relative;
  display: inline-block;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon_box_wrapper_3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 20px;
}

.icon_box i::after {
  content: "";
  position: absolute;
  top: -4px; /* Adjust as needed for spacing */
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 2px dashed transparent;
  border-color: #ffb5c7;
  border-radius: 50%;
  animation: rotateBorder 27s linear infinite;
  z-index: -1;
}
.card-title {
  color: var(--color-secondary);
}

@keyframes rotateBorder {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.dropdown-menu {
  padding: 10px;
  border: 0;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}
.dropdown-item {
  padding: 10px;
}
.dropdown-menu li:not(:last-child) {
  border-bottom: 1px solid #e9ecef;
}
.dropdown-item:focus,
.dropdown-item:active {
  background: #d11341;
  color: #fff !important;
}

.guide .eightTfour-circle {
  background: linear-gradient(45deg, #121212, #6f6668, #060606);
  font-size: 24px;
  font-weight: 400 !important;
  font-family: var(--font-family-heading);
  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}
.guide .eightTfour-timeline .eightTfour-corner,
.guide .eightTfour-timeline hr {
  border-color: #e5e5e5;
}
.guide .eightTfour-circle {
  width: 50px;
  height: 50px;
}
/* ***************** Timeline CSS ************************* */

@media (max-width: 1399px) and (min-width: 992px) {
  .sticky_1399 {
    position: sticky;
    top: 27%;
  }
}

@media (max-width: 1024px) {
  .banner_content h1 {
    font-size: 36px;
  }

  .banner_section img {
    width: 200%;
  }
  .bg_overlay {
    position: relative;
  }
  .bg_overlay:before {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: radial-gradient(#fff, transparent);
  }
}

@media (max-width: 767px) {
  .vision_mission_section .special-numbers-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }

  .special-numbers:after {
    content: none;
  }
  .banner_section h5 {
    font-size: 16px;
  }
  .border-l-r {
    border: 0 !important;
  }
  .quick-links {
    border-bottom: 0 !important;
  }
}

@keyframes float {
  0% {
    transform: translateY(0) rotate(0deg); /* No rotation */
  }
  50% {
    transform: translateY(-5px) rotate(5deg); /* Move up and rotate slightly */
  }
  100% {
    transform: translateY(0) rotate(0deg); /* Return to original position with no rotation */
  }
}

/* ────────────────────────────── */
/*         Reached Animations      */
/* ────────────────────────────── */

/* ────────────────────────────── */
/*      RESPONSIVE ADJUSTMENTS     */
/* ────────────────────────────── */

.section_padding {
  padding-top: 100px;
  padding-bottom: 100px;
}

/* Large laptops (max-width: 1200px) */
@media (max-width: 1440px) {
  .t-r-image {
    right: -8%;
  }
  .b-l-image {
    right: -300%;
  }
  .special-numbers-wrapper {
    padding: 66px 33px;
  }
}
@media (max-width: 1200px) {
  .t-r-image,
  .b-l-image {
    display: none;
  }

  .navbar-nav {
    gap: 2rem;
  }
  .banner-slide-content h4 {
    font-size: 27px;
  }
  .banner-slide-content h2 {
    font-size: 40px;
  }
  .banner-slider {
    height: 60vh;
  }
  .section_padding {
    padding-top: 84px;
    padding-bottom: 84px;
  }
  .special-numbers h5 {
    font-size: 46px;
  }
  .special-numbers::before {
    right: 93%;
  }
}

/* Small laptops (max-width: 992px) */
@media (min-width: 991px) {
  .dropdown:hover .dropdown-menu {
    display: block;
  }
}
@media (max-width: 992px) {
  .navbar-nav {
    gap: 1rem;
  }
  .navbar-collapse {
    padding-top: 33px;
    padding-bottom: 33px;
  }
  .banner-slide {
    background-position: center;
  }
  .section_padding {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .about-image {
    order: -1;
    margin-bottom: 33px;
  }
  .special-numbers-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
  .special-numbers::before {
    content: none;
  }
  .special-numbers-wrapper > div:nth-child(2):after {
    content: none;
  }
  .special-numbers:after {
    height: 50%;
    top: 50%;
    transform: translateY(-50%);
  }
  .banner-slide-content {
    justify-content: flex-end !important;
    padding: 40px !important;
  }
  .special-numbers-wrapper:before {
    bottom: 27px !important;
  }
  .slider-text {
    font-size: calc(var(--section-title) + 0px);
  }
  .img_bg_light {
    background: linear-gradient(168deg, #fdebf3, transparent);
    border-radius: 16px;
  }
}

/* Tablets (max-width: 768px) */
@media (max-width: 768px) {
  .banner-slide-content h4 {
    font-size: 27px;
  }
  .banner-slide-content h2 {
    font-size: 36px;
  }
  .eightTfour_prime,
  .eightTfour_sec {
    padding: 8px 18px;
    font-size: 14px !important;
  }
  .site-logo {
    max-width: 168px;
  }
  :root {
    --section-title: 27px;
  }
  .title_wrapper {
    margin-bottom: 20px;
  }
  .title_wrapper img {
    max-width: 40px;
  }
  .section-sec-title {
    font-size: 20px;
  }
  .slick-dots li {
    height: 4px;
    width: 26px;
  }
  .swap_in_tab {
    order: 1;
  }
}

/* Mobiles (max-width: 576px) */
@media (max-width: 576px) {
  .icon_box_wrapper {
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 15px;
  }
  .banner-slide-content h4 {
    font-size: 22px;
  }

  .special-numbers:after {
    width: 0;
  }
  .special-numbers-wrapper:after {
    content: none;
  }
  .special-numbers {
    padding: 27px;
  }
  .special-numbers-wrapper {
    padding: 33px;
  }
  .special-numbers-wrapper {
    background-size: inherit;
    background-repeat: repeat;
  }
  .footer-box-div,
  .footer-box-div ul div {
    text-align: center;
    justify-content: center;
  }
  .footer-bottom-div {
    font-size: 14px;
  }
  .address br {
    display: none;
  }
  .banner-slide-content h2 {
    font-size: 27px !important;
  }
  .banner-slide-content h4 {
    font-size: 20px;
  }
  .product_title h3 {
    font-size: 22px;
  }
  .section-desc {
    line-height: 1.8;
}
}

@media (max-width: 425px) {
  .special-numbers-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}

.special-numbers-wrapper:before {
  content: "";
  position: absolute;
  right: 0;
  border-radius: 33px;
  bottom: 84px;
  display: block;
  width: 200%;
  height: 100%;
  background: linear-gradient(45deg, #fdf4f6, #fadde1, #f1c7c9, #fdf4f6);
  background-size: 400% 400%;
  animation: gradientAnimation 5s ease infinite;
  z-index: -1;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.icon_border {
  position: relative;
  width: max-content;
  margin: auto;
}
.icon_border::after {
  content: "";
  position: absolute;
  top: -4px; /* Adjust as needed for spacing */
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 4px dotted transparent;
  border-color: #cdcdcd;
  border-radius: 50%;
  animation: rotateBorder 27s linear infinite;
  z-index: -1;
}

@keyframes rotateBorder {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.quick-links {
  max-width: 840px;
  margin: auto;
  /* background: #e7edf1; */
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding-top: 27px;
  padding-bottom: 27px;
}
.quick-links a {
  color: #6d6d6d;
}
.quick-links li {
  margin-bottom: 10px !important;
}
.border-l-r {
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
.link_btn {
  background: #ffffff;
  padding: 4px 16px;
  /* border-radius: 84px; */
}
.list-style-none {
  list-style: none;
}
.quick-links {
  overflow: hidden !important;
}