body {
    background-color:  #FFF;
    font-family: "Poppins", sans-serif;;
  }

  .outfit {
    font-family: "Outfit", sans-serif;
  }

  .carousel-container {
    position: relative;
    width: 100%;
    max-width: 300px; /* card width stays controlled */
    height: 450px;
    margin: 0 auto;
    perspective: 1000px;
    z-index: 10;
  }

  .rectangle-overlay {
    height: 40%;
    /* background: url('/assets/images/banner/Rectangle.png') no-repeat bottom center; */
    background: linear-gradient(180deg, rgba(0, 27, 50, 0.00) 0%, #001B32 50%);

    background-size: cover;
    pointer-events: none;
    z-index: 10;
  }

  .carousel {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* border: solid 3px #171a21; */
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.6s ease, opacity 0.6s ease;
    opacity: 0;
    z-index: 0;
  }

  .card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Main states */
  .card.active {
    opacity: 1;
    transform: translateX(0) scale(1);
    z-index: 5;
  }

  .card.prev1 {
    /* opacity: 0.8; */
    opacity: 1;
    transform: translateX(-70%) scale(0.9) rotate(-7deg);
    z-index: 4;
  }

  .card.next1 {
    /* opacity: 0.8; */
    opacity: 1;
    transform: translateX(70%) scale(0.9) rotate(7deg);
    z-index: 4;
  }

  .card.prev2 {
    /* opacity: 0.5; */
    opacity: 1;
    transform: translateX(-150%) scale(0.8) rotate(-20.587deg) translateY(30%);
    z-index: 3;
  }

  .card.next2 {
    /* opacity: 0.5; */
    opacity: 1;
    transform: translateX(150%) scale(0.8) rotate(20.587deg) translateY(30%);
    z-index: 3;
  }
  

  .btn {
    position: absolute;
    top: 50%;
    width: 50px;
    height: 50px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    border: solid 1px #171a21;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s;
  }

  .btn:hover {
    background: white;
  }

  .prev {
    left: -25%;
  }

  .next {
    right: -25%;
  }

  .gradient-bg {
    position: relative;
  }

  .gradient-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      #001B32 0%,
      #001B32 45%,
      rgba(0, 27, 50, 0.7) 65%,
      rgba(0, 27, 50, 0.3) 80%,
      transparent 100%
    );
    pointer-events: none;
  }

  .gradient-wrap {
    position: relative;
    overflow: hidden;
    height: 640px;
    /* background: #001B32; */
  }

  /* dark fade from bottom */
  .gradient-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, #FFF 6.41%, rgba(255, 204, 42, 0.60) 29.81%, rgba(16, 170, 97, 0.60) 53.2%, rgba(5, 106, 150, 0.80) 76.6%, #014478 100%) !important;
    pointer-events: none;
  }

  @media (max-width:1023px) {

    .gradient-wrap {
      height: 300px;
    }

    
  }
 
  @media (max-width:767px) {
    .gradient-wrap::after {
      background: url('/assets/images/banner/hero-mobile.png') !important;
      background-size: cover;
      background-position: bottom;
      background-repeat: no-repeat;
    }
  }

  .service-card {
    transition: all 0.4s ease;
  }

  .bg-img {
    background-image: url("/assets/images/banner/7.jpg");
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .bg-img1 {
    background-image: url("/assets/images/banner/14.jpg");
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .bg-img2 {
    background-image: url("/assets/images/banner/15.jpg");
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .bg-img3 {
    background-image: url("/assets/images/banner/16.jpg");
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .bg-img4 {
    background-image: url("/assets/images/banner/18-new.jpg");
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .bg-img5 {
    background-image: url("/assets/images/banner/17.jpg");
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .bg-gradient {
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .service-card:hover .bg-img,
  .service-card:hover .bg-img1,
  .service-card:hover .bg-img2,
  .service-card:hover .bg-img3,
  .service-card:hover .bg-img4,
  .service-card:hover .bg-img5,
  .service-card:hover .bg-img6,
  .service-card:hover .bg-gradient {
    opacity: 1;
  }

  .service-card:hover h3,
  .service-card:hover p {
    color: #fff;
  }

  .service-card svg path {
    fill: #111827;
    transition: fill 0.3s ease;
  }

  .service-card:hover svg path {
    fill: #ffffff !important;
  }



.text-5xl {
  /* font-size: 42px !important; */
}


  .testimonialSwiper .swiper-wrapper,
  .communicationSwiper .swiper-wrapper,
  .deadlineSwiper .swiper-wrapper {
    align-items: stretch;
    }

    .testimonialSwiper .swiper-slide,
    .communicationSwiper .swiper-slide,
    .deadlineSwiper .swiper-slide {
    height: auto;
    }




    /* ======== */

    .bg-bottom-color {
      background: url('/assets/images/banner/color.png');
      background-position: bottom;
      background-size: contain;
      background-repeat: no-repeat;
    }

    @media (max-width: 767px) {
      .bg-bottom-color {
        background: url('/assets/images/banner/color-mobile.png');
        background-position: bottom;
        background-size: contain;
        background-repeat: no-repeat;
      }
    }


    @media (max-width: 1023px) {
      .card.prev2,
      .card.next2 {
        opacity: 0;
        pointer-events: none;
      }

      .card.prev1 {
        transform: translateX(-60%) scale(0.9) rotate(-6deg);
      }

      .card.next1 {
        transform: translateX(60%) scale(0.9) rotate(6deg);
      }

      .carousel-container {
        max-width: 138px;
        height: 191px;
      }

      .rectangle-overlay {
        height: 40%;
        background: linear-gradient(180deg, rgba(0, 27, 50, 0.00) 0%, #001B32 50%);
        background-size: cover;
      }

      .gradient-wrap::after {
        /* content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        background: url('/assets/images/banner/color-mobile.png');
        background-repeat: no-repeat;
        pointer-events: none; */
      }
    }




    /* Header mobile no btn hover effext */

  .btn-mobile {
  position: relative;
  display: inline-block;
  /* width: 200px; */
  /* height: 60px; */
  text-align: center;
  /* line-height: 60px; */
  color: #fff;
  /* font-size: 24px; */
  /* text-transform: uppercase; */
  text-decoration: none;
  /* font-family: sans-serif; */
  box-sizing: border-box;
  /* background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); */
  /* background-size: 400%; */
  /* border-radius: 30px; */
  z-index: 1;
}
 
.btn-mobile:hover {
  animation: animate 8s linear infinite;
}
 
@keyframes animate {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 400%;
  }
}
 
.btn-mobile:before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: -1;
  background: linear-gradient(90deg, #03a9f4, #014478, #ffeb3b, #03a9f4);
  background-size: 400%;
  border-radius: 40px;
  opacity: 0;
  transition: .5s;
}
 
.btn-mobile:hover:before {
  /* filter: blur(20px); */
  opacity: 1;
  animation: animate 8s linear infinite;
}


/* Flip logo */

@keyframes logo-flip {
  0%, 20% {
    transform: rotateX(0deg);
  }
  50%, 70% {
    transform: rotateX(180deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}

/* @layer utilities {
  .animate-logo-flip {
    animation: logo-flip 24s infinite ease-in-out;
  }
} */

.animate-logo-flip {
  transform-style: preserve-3d;
  transition: transform 0.5s ease-in-out;
}

.logo-flipped {
  transform: rotateX(180deg);
}


/* number count */

.odometer.plus::after {
  /* content: "+";
  position: absolute;
  top: 0;
  right: -16px;
  font-size: 96px; */
}

@media (max-width: 1023px) {
  .odometer.plus::after {
    /* font-size: 48px; */
  }
}

 .swiper-slide-active .slide-inner {
    @apply scale-[1.25] opacity-100;
  }

  .swiper-slide-prev .slide-inner,
  .swiper-slide-next .slide-inner {
    @apply scale-[0.85] opacity-80;
  }


/* Sidebar bg */
.animated-bg {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* animated gradient layer */
.animated-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background: linear-gradient(
    90deg,
    #00B2FF,
    #014478,
    #FFCC2A,
    #10AA61,
    #00B2FF
  );

  background-size: 400% 400%;
  animation: animate 16s linear infinite;
}

/* optional soft glow like video */
.animated-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  filter: blur(60px);
  opacity: 0.7;
  z-index: -2;
}

/* reuse your animation */
@keyframes animate {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 400% 50%;
  }
}

.serviceSwiper {
  position: relative;
  padding: 0 60px 50px;
}

.serviceSwiper .swiper-button-prev,
.serviceSwiper .swiper-button-next {
  top: 50%;
  transform: translateY(-50%);
}

.serviceSwiper .swiper-button-prev {
  left: 0;
}

.serviceSwiper .swiper-button-next {
  right: 0;
}

.serviceSwiper .swiper-pagination {
  bottom: 0 !important;
  position: absolute;
}


@media (max-width: 767px) {
  .service-card .bg-img,
  .service-card .bg-img1,
  .service-card .bg-img2,
  .service-card .bg-img3,
  .service-card .bg-img4,
  .service-card .bg-img5,
  .service-card .bg-img6,
  .service-card .bg-gradient {
    opacity: 1;
  }

  .service-card h3,
  .service-card p {
    color: #fff;
  }

  .service-card svg path {
    fill: #111827;
    transition: fill 0.3s ease;
  }

  .service-card svg path {
    fill: #ffffff !important;
  }

}

/* Ring */

.outer-ring, .inner-ring {
  position: relative;
  padding: 2px;
  border-radius: 9999px;
}

.outer-ring::before,
.inner-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: 9999px;
  background: linear-gradient(
      180deg,
      #F9F9F9 0%,
      #CECECE 50%,
      #F9F9F9 100%
  );

  /* Mask magic */
  -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  }

  .gap-1 { padding: 48px; }
  .gap-2 { padding: 40px; }

  @media (max-width: 1279px) {
    .gap-1 { padding: 28px; }
    .gap-2 { padding: 20px; }
  }

  @media (max-width: 768px) {
    .gap-1 { padding: 32px; }
    .gap-2 { padding: 26px; }
  }   


  [x-cloak] {
      display: none !important;
  }


.swiper-pagination-bullet {
    @apply !bg-[#D9D9D9] opacity-100;
  }
  .swiper-pagination-bullet-active {
    @apply !bg-[#EE6013];
  }

  
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
  content: 'next';
  font-size: 30px !important;
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
  content: 'prev';
  font-size: 30px !important;
}

.swiper-pagination-bullet {
  background-color: #D9D9D9 !important;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background-color: #EE6013 !important;
}

/* Active arrows */
.swiper-button-prev,
.swiper-button-next {
  color: #000000 !important;
  opacity: 1 !important;
}

/* Disabled arrows */
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  color: #B0B0B0 !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

@media (max-width:1024px) {
.mb-bl-0{
border-left:0 !important;
}
.mb-bb-0{
border-bottom:0 !important;
}
.mb-br-0{
border-right:0 !important;
}
}

/* How We Work - Mobile Swiper*/
.mb-how-we-work {
    width: 100vw;
    position: relative;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.6s ease;
    overflow-x:hidden;
  }

  .mb-how-we-work.swiper-initialized {
    visibility: visible;
    opacity: 1;
  }

  .mb-how-we-work .swiper-slide {
    opacity: 1;
    transform: scale(0.8);
    transition: all 0.3s ease;
    cursor: grab;
    min-height:500px;
  }

  .mb-how-we-work .swiper-slide.swiper-slide-active {
    opacity: 1;
    transform: scale(1);
    cursor: pointer;
  }

  .mb-how-we-work .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mb-how-we-work .swiper-controls-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    margin: 30px auto 0;
    font-size: 18px;
    font-weight: bold;
    color: white;
    max-width: 300px;
  }

  figure.menu-card {
    background-color: transparent;
    color: #fff;
    font-size: 16px;
    text-align: left;
    position: relative;
    overflow: hidden;
    opacity: 0.95;
    margin: 0;
  }

  figure.menu-card img {
    width: 100%;
    vertical-align: top;
    transition: transform 0.4s ease;
  }

  figure.menu-card figcaption {
    padding: 25px;
    position: relative;
  } 
  .mb-how-we-work .swiper-slide img {
    width: 72px !important;
    height: 72px !important;
    border-radius: 100px;
    margin: 0 auto;
    margin-top:35px;
    transition: width 0.4s ease, height 0.4s ease;
}
  .mb-how-we-work .swiper-slide.swiper-slide-active img {
    width: 200px !important;
    height: 200px !important;
    margin-top:0;
    transition: width 0.4s ease, height 0.4s ease;
}
  .mb-how-we-work .swiper-slide figcaption {
    display: none;
    transition: all 0.4s ease;
}

.mb-how-we-work .swiper-slide.swiper-slide-active figcaption {
    display: block;
    transition: all 0.4s ease;
}
.mb-how-we-work .swiper-pagination-fraction {
    color: #000 !important;
    font-weight: normal;
    font-size: 14px;
}
.mb-hww-circle {
    background: url('/assets/images/banner/hww-bg-circle.svg') no-repeat;
    background-size: 80%;
    background-position: top center;
    position: absolute;
    width: 400px;
    height: 400px;
    margin-left: calc(50% - 200px);
    top: 93px;
    text-align: center;
}
.mb-hww-wave-line {
    background: url('/assets/images/banner/hww-bg-wave-line.svg') no-repeat;
    background-size: 100%;
    background-position: center 26%;
    position: absolute;
    width: 100%;
    height: 100%;
}
@media (max-width:768px) {
    .mb-hww-wave-line{
background-position: center 22%;
}
    .mb-hww-circle{
        top: 68px;
    }
}
@media (max-width:520px) {
    .mb-hww-circle{
        top: 61px;
    }
}
.ft-brandtxtbg-pos{
background-position: center 50px;
}
@media (max-width:1023px) {
   .ft-brandtxtbg-pos{
background-position: center 30px;
}

}
@media (max-width:767px) {
 .ft-brandtxtbg-pos{
background-position: center 20px;
}
}