/* Service.css */
html,
body {
  overflow-x: hidden !important;
  width: 100% !important;
   font-family: poppins, sans-serif;
}
* {
  box-sizing: border-box;
}

/* body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: poppins, sans-serif;
} */

/* ********************************** Hero Section *******************************    */

.hero__image {
    /* position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0; */
     position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;

}

.hero__image .img-responsive {
    /* position: absolute;
    top: 0;
    left: 0;*/
    width: 100%;
    height: 100%; 
    object-fit: cover;
    object-position: right;
    display: block;
}

.hero__image .carousel-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    z-index: 10;
    width: 90%;
    padding: 0 20px;
}

.hero__image .carousel-caption h1 {
    font-size: clamp(2rem, 5.5vw, 7rem);
    font-weight: 400;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
}

/* Additional breakpoints for fine-tuning */
@media (min-width: 2560px) {
    .hero__image .carousel-caption h1 {
        font-size: 8rem;
    }
}

@media (max-width: 1400px) {
    .hero__image .carousel-caption h1 {
        font-size: 5.5rem;
    }
}

@media (max-width: 1200px) {
    .hero__image {
        padding-bottom: 45%;
    }
    
    .hero__image .carousel-caption h1 {
        font-size: 4.5rem;
    }
}

@media (max-width: 992px) {
    .hero__image {
        padding-bottom: 50%;
    }
    
    .hero__image .carousel-caption h1 {
        font-size: 3.5rem;
    }
}

@media (max-width: 768px) {
    .hero__image {
        padding-bottom: 60%;
    }
    
    .hero__image .carousel-caption h1 {
        font-size: 2.5rem;
        white-space: normal;
    }
}

@media (max-width: 576px) {
    .hero__image {
        padding-bottom: 70%;
    }
    
    .hero__image .carousel-caption h1 {
        font-size: 2rem;
        white-space: normal;
    }
    
    .hero__image .carousel-caption {
        width: 95%;
        padding: 0 10px;
    }
}

@media (max-width: 480px) {
    .hero__image .carousel-caption h1 {
        font-size: 1.75rem;
    }
}

@media (max-width: 360px) {
    .hero__image .carousel-caption h1 {
        font-size: 1.5rem;
    }
}

/* For very large screens */
@media (min-width: 3840px) {
    .hero__image .carousel-caption h1 {
        font-size: 10rem;
    }
}

/* Utility class if you're using it */
.mb-5 {
    margin-bottom: 3rem;
}

/* ************************** Section - 2 ************************** */
  .deck1 {
    margin-top: 1rem;
  }
 .card-deck-container {
  margin: 1rem;
  display: flex;
  gap: 0;
}

.content-area {
  flex: 3;
  order: 1;
  margin-bottom: 30px;
}

.ff-heading h2 {
font-size: 5.5rem;
color: #1650A0;
margin-left: 1rem;
margin-top: 4rem;
margin-bottom: 4rem;
text-align: right;
}

.card-deck {
  display: flex;
  flex-direction: column;
  gap: 15px;
  order: 0;
  flex: 2;
  width: auto;
  min-width: 300px;
  align-items: flex-end;
  margin-bottom: 30px;
}
.card-deck-active {
  padding: 0 0 40px 0;
  position: relative;
}
.card-deck-active::before {
  position: absolute;
  content: "";
  top: 0;
  /* left: 0; */
  right: -10px;
  width: 80%;
  height: 100%;
  display: block;
  background-color: #1c61be;
  border-bottom-left-radius: 15px;
}
.tab-card {
  background: #1650A0;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 25px;
  width: 100%;
}

.tab-card.inactive {
  background: #ffffff;
}
.tab-card.white-state {
  background: #ffffff;
}

.tab-card.active {
  background: #1c61be;
  min-height: 80px;
}

.tab-card .tab-card-title {
  color: white;
  font-weight: 400 !important;
  font-size: 24px;
  margin: 0;
  position: relative;
  flex: 1;
  text-align: left;
  transition: color 0.3s ease;
}

.tab-card.inactive .tab-card-title {
  color: #333333;
}
.tab-card.white-state .tab-card-title {
  color: #4B89D9;
}

.tab-card.active .tab-card-title {
  color: white;
}

.tab-icon {
  font-size: 45px;
  /* font-weight: bold; */
  transition: transform 0.3s ease;
  margin-right: 50px !important;
  color: white;
}

.tab-card.inactive .tab-icon {
  color: #1c61be;
}
.tab-card.white-state .tab-icon {
  color: #4B89D9;
}

.tab-card.active .tab-icon {
  /* transform: rotate(45deg); */
  color: white;
}

.tab-content {
  background: #ffffff;
  padding: 0px 0 0 40px;
  height: 100%;
  min-height: 100%;
  /* min-height: 400px; */
  transition: all 0.3s ease;
  border-radius: 15px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.content-section {
  display: none;
}
.content-section.active {
  display: block;
}
#tabContent {
  display: block; /* keep it visible always */
}

.tab-content.active-content {
  background: #1c61be;
  color: white;
  padding-left: 30px;
  padding-top: 30px;
  padding-bottom: 30px;
  border-radius: 15px;
}

.default-tab {
  font-family: "poppins";
  font-size: 1.35rem;
  text-align: left;
  color: #2e2e2e;
}

.default-tab h3 {
  color: #4b89d9;
  margin-bottom: 20px;
}

.content-section {
  display: none;
}

.content-section.active {
  display: block;
}

.content-section h4 {
  margin-bottom: 20px;
  font-weight: 600;
}

.tab-content.active-content .content-section h4 {
  color: white;
}

.content-section p {
  line-height: 1.6;
  margin-bottom: 15px;
}

.feature-list {
  list-style: none;
  padding: 0;
}

.feature-list li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.feature-list li:last-child {
  border-bottom: none;
}

.tab-content.active-content .feature-list li {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

.tab-content:not(.active-content) .feature-list li {
  border-bottom-color: rgba(75, 137, 217, 0.2);
}

@media (max-width: 1400px) and (min-width: 1201px) {
.ff-heading h2 {
  font-size: 4.5rem;
}
}

@media (max-width: 1024px) { 
 .content-section p {
    font-size: 18px;
  }
  .tab-card .tab-card-title {
    font-size: 19px;
  }
  .tab-card {
    min-height: 70px;
  }    
}

@media (max-width: 992px) { 
.ff-heading h2 {
    font-size: 65px;
    text-align: center;
  }

  .card-deck-container {
    flex-flow: wrap;
  }
  .card-deck {
    order: 1;
    display: flex;
    flex-direction: row; /* This is the key change */
    gap: 15px;
    overflow-x: overlay;
    margin-bottom: 20px;
    margin-top: 10px;
  }
  .content-area {
    order: 2;
    flex: unset;
  }
  .tab-card .tab-card-title {
    width: max-content;
  }
.card-deck-active::before {
    background-color: #fff;
  }
  .tab-content {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
  }
}

@media (max-width: 768px) { 
.ff-heading h2 {
    margin-top: 25px;
  }

  .heading-content h2 {
    font-size: 55px;
  }
}

@media (max-width: 640px) { 

}

/* ************************** Section - 3 ************************** */
.text-content-wrapper {
  padding-bottom: 12%;
}

.right-column-bg {
  background-color: #609AE9;
}

.one-stop-text {
  font-size: 5.5rem;
  line-height: 1.1;
  margin: 0;
  font-weight: bold;
  color: white;
}

.squares-img {
  position: absolute;
  left: calc(100% - 12rem);
  top: 0;
  transform: translateY(-90%);
  height: 10rem;
}

/* 4K and Ultra Wide screens */

@media (min-width: 3001px)  {
 .one-stop-text {
    font-size: clamp(7rem, 3vw, 15rem);
    padding-bottom: 20vh !important;
  }
  
  .squares-img {
    height: clamp(13rem, 6vw, 25rem);
    left: calc(100% - clamp(13rem, 6vw, 25rem));
  }
  
  .person-laptop-img {
    width: clamp(61%,64vw,65%) !important;
    /* width: 61% !important; */
  }
  
  .text-content-wrapper {
    padding: 50px 40px 50px 90px;
  }
  .finance-shop-section {
    height: clamp(60vh,37vw,90vh) !important;
  }
}

/* Solution 1: Use aspect ratio to determine size */
@media (min-width: 3001px) {
  .person-laptop-img {
    /* Calculate based on aspect ratio */
    width: calc(58% + (100vw / 100vh * 2%)) !important;
  }
}

/* Solution 2: Use viewport height in calculation */
@media (min-width: 3001px) {
  .person-laptop-img {
    /* Base 61% + adjustment based on viewport height */
    width: calc(61% + ((100vh - 1354px) * 0.04)) !important;
  }
}

/* Solution 3: Multiple media queries for different aspect ratios */
/* For wider aspect ratios (shorter screens like 3440x1354) */
@media (min-width: 3001px) and (min-aspect-ratio: 2.5) {
  .person-laptop-img {
    width: 61% !important;
  }
}

/* For narrower aspect ratios (taller screens like 3440x1440) */
@media (min-width: 3001px) and (max-aspect-ratio: 2.49) {
  .person-laptop-img {
    width: 65% !important;
  }
}

/* Solution 4: Use container queries with CSS custom properties */
:root {
  --laptop-img-width: 61%;
}

@media (min-width: 3001px) and (min-height: 1400px) {
  :root {
    --laptop-img-width: 65%;
  }
}

@media (min-width: 3001px) {
  .person-laptop-img {
    width: var(--laptop-img-width) !important;
  }
}

/* Solution 5: Dynamic calculation with clamp and viewport units */
@media (min-width: 3001px) {
  .person-laptop-img {
    /* This will scale between 61% and 65% based on viewport height */
    width: clamp(61%, calc(57% + 0.3vh), 65%) !important;
  }
}

/* Solution 6: Most precise - specific height-based media queries */
@media (min-width: 3001px) and (max-height: 1380px) {
  .person-laptop-img {
    width: 61% !important;
  }
}

@media (min-width: 3001px) and (min-height: 1381px) and (max-height: 1420px) {
  .person-laptop-img {
    width: 63% !important;
  }
}

@media (min-width: 3001px) and (min-height: 1421px) {
  .person-laptop-img {
    width: 65% !important;
  }
}

/* Solution 7: Using CSS min() and max() for smooth scaling */
@media (min-width: 3001px) and (min-height:1400px) {
  .person-laptop-img {
    /* Smoothly scales based on viewport height */
    width: min(65%, max(61%, calc(61% + (100vh - 1354px) * 0.0444))) !important;
    /* width: 55vw !important; */
    /* 0.0444 = 4% / 90px (difference in heights) */
  }
}

@media (min-width: 3001px) and (max-height:1399px) {
  .person-laptop-img {
    /* Smoothly scales based on viewport height */
    width: min(60%, max(55%, calc(55% + (100vh - 1354px) * 0.0444))) !important;
    /* width: 55vw !important; */
    /* 0.0444 = 4% / 90px (difference in heights) */
  }
}

@media (min-width: 2560px) and (max-width:3000px) {
 .one-stop-text {
    font-size: 5.5rem;
    padding-bottom: 20vh !important;
  }
  
  .squares-img {
    height: 10rem;
    left: calc(100% - 12rem);
  }
  
  .person-laptop-img {
    width: 65% !important;
  }
  
  .text-content-wrapper {
    padding: 50px 40px 50px 90px;
  }
  .finance-shop-section {
    height: clamp(60vh,37vw,67vh) !important;
  }
}

/* Large Desktop (1920px - 2559px) */

@media (max-width: 2559px) and (min-width: 2001px) {
  .one-stop-text {
    font-size: 4.5rem;
    padding-bottom: 20vh !important;
  }
  
  .squares-img {
    height: 7.5rem;
    left: calc(100% - 9rem);
  }
  
  .person-laptop-img {
    width: 65% !important;
  }
  
  .text-content-wrapper {
    padding: 50px 40px 50px 90px;
  }
  .finance-shop-section {
    height: 67vh !important;
  }
}

@media (max-width: 2000px) and (min-width: 1920px) {
  .one-stop-text {
    font-size: 4.5rem;
    padding-bottom: 20vh !important;
  }
  
  .squares-img {
    height: 7.5rem;
    left: calc(100% - 9rem);
  }
  
  .person-laptop-img {
    width: 65% !important;
  }
  
  .text-content-wrapper {
    padding: 50px 40px 50px 90px;
  }
  .finance-shop-section {
    /* height: 37vw !important; */
    height: clamp(60vh,37vw,67vh) !important;
  }
}

@media (max-width: 1919px) and (min-width: 1651px) {
  .one-stop-text {
    font-size: 4rem;
    padding-bottom: 20vh !important;
  }
  
  .squares-img {
    height: 8rem;
    left: calc(100% - 9rem);
  }
  
  .person-laptop-img {
    width: 65% !important;
  }
  
  .text-content-wrapper {
    padding: 50px 40px 50px 90px;
  }
  .finance-shop-section {
    height: 60vh !important;
  }
}


@media (max-width: 1650px) and (min-width: 1501px) {
  .one-stop-text {
    font-size: 3.5rem;
    padding-bottom: 20vh !important;
  }
  
  .squares-img {
    height: 6rem;
    left: calc(100% - 7.5rem);
  }
  
  .person-laptop-img {
    width: 65% !important;
  }
  
  .text-content-wrapper {
    padding: 50px 40px 50px 90px;
  }
  .finance-shop-section {
    height: 67vh !important;
  }
}


/* Desktop (1440px - 1919px) */
@media (max-width: 1500px) and (min-width: 1440px) {
  .one-stop-text {
    font-size: 3.5rem;
    padding-bottom: 20vh !important;
  }
  
  .squares-img {
    height: 6rem;
    left: calc(100% - 7rem);
  }
  
  .person-laptop-img {
    width: 65% !important;
  }
  
  .text-content-wrapper {
    padding: 50px 40px 50px 90px;
  }
  .finance-shop-section {
    height: 60vh !important;
  }
}

/* Small Desktop (1200px - 1439px) */

/* Solution 1: Dynamic height calculation based on viewport height */
@media (max-width: 1439px) and (min-width: 1200px) {
  .one-stop-text {
    font-size: 3rem;
    padding-bottom: 25vh !important;
  }
  
  .squares-img {
    height: 5.5rem;
    left: calc(100% - 6.5rem);
  }
  
  .person-laptop-img {
    width: 65% !important;
  }
  
  .text-content-wrapper {
    padding: 50px 40px 50px 90px;
  }
  
  .finance-shop-section {
    /* Dynamically adjust based on viewport height */
    height: calc(60vh + min(10vh, (100vh - 681px) * 0.08)) !important;
  }
}

/* Solution 2: Using clamp with viewport height consideration */
@media (max-width: 1439px) and (min-width: 1200px) {
  .finance-shop-section {
    /* This will scale better with viewport height */
    height: clamp(60vh, calc(55vh + 0.4vw), 70vh) !important;
  }
}

/* Solution 3: Specific height-based adjustments */
@media (max-width: 1439px) and (min-width: 1200px) and (max-height: 700px) {
  .finance-shop-section {
    height: 75vh !important;
  }
}

@media (max-width: 1439px) and (min-width: 1200px) and (min-height: 701px) and (max-height: 750px) {
  .finance-shop-section {
    height: 67vh !important;
  }
}

@media (max-width: 1439px) and (min-width: 1200px) and (min-height: 751px) {
  .finance-shop-section {
    height: 67vh !important;
  }
}


/* Large Tablet / Small Laptop (992px - 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
  .one-stop-text {
    font-size: 4.5rem;
  }
  
  .squares-img {
    height: 8rem;
    left: calc(100% - 10rem);
  }
  
  .person-laptop-img {
    width: 60% !important;
    left: 3% !important;
  }
  
  .text-content-wrapper {
    padding: 45px 35px 45px 80px;
  }
}

/* Tablet (768px - 991px) */
@media (max-width: 991px) and (min-width: 768px) {

   .finance-shop-section {
                height: auto !important;
                min-height: 100%;
            }
             .finance-shop-row {
                flex-direction: column !important;
            }
 
            .image-column {
                order: 1 !important;
                flex: 0 0 100%;
                max-width: 100%;
                height: 400px;
                position: relative;
            }

            /* Second column (text) - order 1 */
            .text-column {
                order: 2 !important;
                flex: 0 0 100%;
                max-width: 100%;
                min-height: 400px;
            }

            /* Make image relative positioned */
            .person-laptop-img {
                position: relative !important;
                width: 100% !important;
                left: 0 !important;
                top: 0 !important;
                transform: none !important;
                height: auto;
                max-width: 600px;
                margin: 0 auto;
                display: block;
            }

                  
        .one-stop-text {
          font-size: 4rem;
        }
        
        .squares-img {
          height: 7rem;
          left: calc(100% - 9rem);
        }
  
  /* .person-laptop-img {
    width: 55% !important;
    left: 2% !important;
  } */
  
  .text-content-wrapper {
    padding: 30px 30px 40px 70px;
  }
}

/* Large Mobile / Small Tablet (576px - 767px) */
@media (max-width: 767px) and (min-width: 576px) {
   .finance-shop-section {
                height: auto !important;
                min-height: 100%;
            }

            .finance-shop-row {
                flex-direction: column !important;
            }

            .image-column {
                order: 2 !important;
                flex: 0 0 100%;
                max-width: 100%;
                padding: 20px;
            }

            .text-column {
                order: 1 !important;
                flex: 0 0 100%;
                max-width: 100%;
                min-height: 350px;
            }

            .person-laptop-img {
                position: relative !important;
                width: 100% !important;
                transform: none !important;
                display: block;
            }

            .one-stop-text {
                font-size: 3rem;
            }

            .squares-img {
                height: 5rem;
                left: calc(100% - 7rem);
            }

            .text-content-wrapper {
                padding: 30px 20px !important;
            }
}
@media (max-width: 767px) {
            .finance-shop-section {
                height: auto !important;
                min-height: 100%;
            }

            .finance-shop-row {
                flex-direction: column !important;
            }

            .image-column {
                order: 2 !important;
                flex: 0 0 100%;
                max-width: 100%;
                padding: 20px;
            }

            .text-column {
                order: 1 !important;
                flex: 0 0 100%;
                max-width: 100%;
                min-height: 350px;
            }

            .person-laptop-img {
                position: relative !important;
                width: 100% !important;
                transform: none !important;
                display: block;
            }

            .one-stop-text {
                font-size: 3rem;
            }

            .squares-img {
                height: 5rem;
                left: calc(100% - 7rem);
            }

            .text-content-wrapper {
                padding: 20px 10px !important;
            }
        }

        /* Desktop styles - normal layout */
        @media (min-width: 992px) {
            .finance-shop-section {
                height: 67vh;
            }

            .person-laptop-img {
                position: absolute;
                left: 5%;
                top: 50%;
                transform: translateY(-50%);
                width: 70%;
                z-index: 10;
                height: auto;
            }
        }

/* iPad Pro specific adjustments */
@media only screen and (min-width: 1024px) and (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) {
  .one-stop-text {
    font-size: 3.5rem;
  }
  
  .squares-img {
    height: 8.5rem;
    left: calc(100% - 10.5rem);
  }
}

/* ************************** Section - 4 ************************** */


.card-deck-container-reverse {
  margin: 1rem;
  display: flex;
  gap: 0;
}

.content-area-reverse {
  flex: 3;
  order: 1;
  margin-bottom: 30px;
}

.ff-heading-reverse h2 {
  font-size: 5.5rem;
  color: #1650A0;
  margin-left: 5rem;
  margin-top: 6rem;
  margin-bottom: 4rem;
}

.card-deck-reverse {
  display: flex;
  flex-direction: column;
  gap: 15px;
  order: 1;
  flex: 2;
  width: auto;
  min-width: 300px;
  align-items: flex-end;
  margin-bottom: 30px;
}

.card-deck-active-reverse {
  padding: 0 0 80px 0;
  position: relative;
}

.card-deck-active-reverse::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 80%;
  height: 100%;
  display: block;
  background-color: #1c61be;
  border-bottom-right-radius: 15px;
}

.tab-card-reverse {
  background: #1650A0;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 25px;
  width: 100%;
}

.tab-card-reverse.inactive {
  background: #ffffff;
}

.tab-card-reverse.white-state {
  background: #ffffff;
}

.tab-card-reverse.active {
  background: #1c61be;
  min-height: 80px;
}

.tab-card-reverse .tab-card-title-reverse {
  color: white;
  font-weight: 400 !important;
  font-size: 24px;
  margin: 0;
  position: relative;
  flex: 1;
  text-align: left;
  transition: color 0.3s ease;
}

.tab-card-reverse.inactive .tab-card-title-reverse {
  color: #333333;
}

.tab-card-reverse.white-state .tab-card-title-reverse {
  color: #4B89D9;
}

.tab-card-reverse.active .tab-card-title-reverse {
  color: white;
}

.tab-icon-reverse {
  font-size: 45px;
  /* font-weight: bold; */
  transition: transform 0.3s ease;
  margin-right: 50px !important;
  color: white;
}

.tab-card-reverse.inactive .tab-icon-reverse {
  color: #1c61be;
}

.tab-card-reverse.white-state .tab-icon-reverse {
  color: #4B89D9;
}

.tab-card-reverse.active .tab-icon-reverse {
  color: white;
}

.tab-content-reverse {
  background: #ffffff;
  padding: 0px 0 0 40px;
  height: 100%;
  min-height: 100%;
  transition: all 0.3s ease;
  border-radius: 15px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.content-section-reverse {
  display: none;
}

.content-section-reverse.active {
  display: block;
}

#tabContentReverse {
  display: block;
}

.tab-content-reverse.active-content {
  background: #1c61be;
  color: white;
  padding-left: 30px;
  padding-top: 30px;
  padding-bottom: 30px;
}

.default-tab-reverse {
  font-family: "poppins";
  font-size: 1.35rem;
  text-align: left;
  color: #2e2e2e;
}

.default-tab-reverse h3 {
  color: #4b89d9;
  margin-bottom: 20px;
}

.content-section-reverse {
  display: none;
}

.content-section-reverse.active {
  display: block;
}

.content-section-reverse h4 {
  margin-bottom: 20px;
  font-weight: 600;
}

.tab-content-reverse.active-content .content-section-reverse h4 {
  color: white;
}

.content-section-reverse p {
  line-height: 1.6;
  margin-bottom: 15px;
}

.feature-list-reverse {
  list-style: none;
  padding: 0;
}

.feature-list-reverse li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.feature-list-reverse li:last-child {
  border-bottom: none;
}

.tab-content-reverse.active-content .feature-list-reverse li {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

.tab-content-reverse:not(.active-content) .feature-list-reverse li {
  border-bottom-color: rgba(75, 137, 217, 0.2);
}

@media (max-width: 1024px) { 
  .content-section-reverse p {
    font-size: 18px;
  }
  .tab-card-reverse .tab-card-title-reverse {
    font-size: 19px;
  }
  .tab-card-reverse {
    min-height: 70px;
  }    
}

@media (max-width: 992px) { 
  .ff-heading-reverse h2 {
    font-size: 3rem;
    text-align: center;
  }

  .card-deck-container-reverse {
    flex-flow: wrap;
  }
  .card-deck-reverse {
    order: 1;
    display: flex;
    flex-direction: row;
    gap: 15px;
    overflow-x: overlay;
    margin-bottom: 20px;
    margin-top: 10px;
  }
  .content-area-reverse {
    order: 2;
    flex: unset;
  }
  .tab-card-reverse .tab-card-title-reverse {
    width: max-content;
  }
  .card-deck-active-reverse::before {
    background-color: #fff;
  }
  .tab-content-reverse {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
  }
}

@media (max-width: 768px) { 
  .ff-heading-reverse h2 {
    margin-top: 25px;
  }

  .heading-content-reverse h2 {
    font-size: 55px;
  }
}


/* ********************************** Section - 5 ****************************************** */


.sect-head  h2 {
    color: #1650A0;
    font-size: 6rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
}

@media (max-width: 991px) and (min-width: 769px) { 
.sect-head  h2 {
    font-size: 5rem;
}
}
@media (max-width: 768px) {
  .sect-head  h2 {
    font-size: 4rem;
}
}


@media (max-width: 560px) { 
    .sect-head  h2 {
    font-size: 2.5rem;
}
}


/* .carousel-wrapper {
  max-width: 100%;
  overflow-x: hidden;
  margin-top: 10rem;
  
}

.sect-head  h2 {
    color: #1650A0;
    font-size: 6rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
}

  .v2-carousel-wrapper {
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
  margin-left: calc(-50vw + 50%);
  position: relative;
}

.v2-carousel {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.v2-carousel-track {
  display: flex;
  gap: 0.5vw;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  overflow-x: hidden;
  width: 100%;
  justify-content: center;
  max-width: 100vw;
}

.v2-card {
  position: relative;
  color: white;
  border-radius: 12px;
  overflow: hidden;
  scroll-snap-align: start;
  transition: all 0.3s ease;
  flex: 0 0 auto;
  cursor: pointer;
  z-index: 1;
}

.v2-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  cursor: pointer;
}

.v2-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  position: relative;
  z-index: 1;
}

.v2-card[data-index="0"] img {
  object-position: 60%;
}

.v2-card[data-index="1"] img {
  object-position: 70%;
}

.v2-card[data-index="2"] img {
  object-position: 50%;
}

.v2-card[data-index="3"] img {
  object-position: 40%;
}

.v2-card-title {
  position: absolute;
  color: #fff;
  font-size: 1.5vw;
  top: 3.5rem;
  right: 2.5rem;
  width: 100%;
  text-align: center;
  pointer-events: none;
  z-index: 5;
}

.v2-plus-btn {
  position: absolute;
  bottom: 2.5rem;
  right: 2.5rem;
  font-size: 2.5vw;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
  z-index: 5;
}

.v2-card.v2-expanded {
  width: 65vw;
  height: auto;
  writing-mode: vertical-rl;
}

.v2-card.v2-expanded .v2-plus-btn {
  opacity: 0;
  pointer-events: none;
}

.v2-card.v2-collapsed {
  width: 9vw;
  height: auto;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.v2-card.v2-collapsed:hover {
  transform: none !important;
  box-shadow: none !important;
  background: inherit !important;
}

.v2-person-info {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem !important;
  padding: 0 2rem;
  gap: 3rem;
  margin-left: 10rem;
}

.v2-person-details {
  flex: 1;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.3s ease;
}

.v2-person-details.v2-active {
  opacity: 1;
  transform: translateY(0);
}

.v2-person-name {
  font-size: 2rem;
  font-weight: 600;
  color: #175ebc;
  margin-bottom: 0.5rem;
}

.v2-person-text {
  font-size: 1.3rem;
  color: #525252;
  line-height: 1.6;
}

.v2-carousel-nav {
  display: flex;
  justify-content: start;
  gap: 10px;
  align-items: start;
  margin-left: 10rem;
  margin-bottom: 10px;
}

.v2-nav-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #a5b3c5;
  cursor: pointer;
  transition: all 0.3s ease;
}

.v2-nav-dot.v2-active {
  background-color: #1c61be;
}
@media (max-width: 991px) and (min-width: 769px) { 
.sect-head  h2 {
    font-size: 5rem;
}
}
@media (max-width: 768px) {
  .sect-head  h2 {
    font-size: 4rem;
}
  .v2-carousel-nav {
    margin-left: 0;
  }
  
  .v2-card {
    height: 400px !important;
  }

  
  .v2-card-title {
    font-size: 2.5vw;
  }
}

@media (max-width: 560px) { 
    .sect-head  h2 {
    font-size: 2.5rem;
}
  .v2-card-title {
    font-size: 2.7vw;
  }
  .v2-carousel-nav {
    margin-left: -90px;
  }
}

@media (max-width: 415px) {
  .v2-card {
    height: 350px !important;
  }
  .v2-card-title {
    font-size: 3.5vw;
    right: 0.5rem;
  }
  .v2-plus-btn {
    right: 0.5rem;
  }
  .v2-carousel-nav {
    margin-left: -130px;
  }
} */

 /* Updated One
.carousel-wrapper {
  max-width: 100%;
  overflow-x: hidden;
  margin-top: 10rem;
}

.sect-head h2 {
  color: #1650A0;
  font-size: 6rem;
  font-weight: 700;
  display: flex;
  justify-content: center;
}

.v2-carousel-wrapper {
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
  margin-left: calc(-50vw + 50%);
  position: relative;
}

.v2-carousel {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.v2-carousel-track {
  display: flex;
  gap: 0.5vw;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  overflow-x: hidden;
  width: 100%;
  justify-content: center;
  max-width: 100vw;
  align-items: stretch;
  min-height: 70vh; 
}

.v2-card {
  position: relative;
  color: white;
  border-radius: 12px;
  overflow: hidden;
  scroll-snap-align: start;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
              transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  flex: 0 0 auto;
  cursor: pointer;
  z-index: 1;
  height: 70vh;
  min-height: 400px;
  will-change: width, transform;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.v2-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  cursor: pointer;
}

.v2-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  position: relative;
  z-index: 1;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.v2-card[data-index="0"] img {
  object-position: 60%;
}

.v2-card[data-index="1"] img {
  object-position: 70%;
}

.v2-card[data-index="2"] img {
  object-position: 50%;
}

.v2-card[data-index="3"] img {
  object-position: 40%;
}

.v2-card-title {
  position: absolute;
  color: #fff;
  font-size: 1.5vw;
  top: 3.5rem;
  right: 2.5rem;
  width: 100%;
  text-align: center;
  pointer-events: none;
  z-index: 5;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.v2-plus-btn {
  position: absolute;
  bottom: 2.5rem;
  right: 2.5rem;
  font-size: 2.5vw;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
  z-index: 5;
}

.v2-card.v2-expanded {
  width: 65vw;
  height: 70vh;
  writing-mode: vertical-rl;
  z-index: 10;
}

.v2-card.v2-expanded .v2-plus-btn {
  opacity: 0;
  pointer-events: none;
}

.v2-card.v2-collapsed {
  width: 9vw;
  height: 70vh;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  z-index: 1;
}

.v2-card.v2-collapsed:hover {
  transform: none !important;
  width: 12vw;
  box-shadow: none !important;
  background: inherit !important;
}

.v2-person-info {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem !important;
  padding: 0 2rem;
  gap: 3rem;
  margin-left: 10rem;
}

.v2-person-details {
  flex: 1;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.3s ease;
}

.v2-person-details.v2-active {
  opacity: 1;
  transform: translateY(0);
}

.v2-person-name {
  font-size: 2rem;
  font-weight: 600;
  color: #175ebc;
  margin-bottom: 0.5rem;
}

.v2-person-text {
  font-size: 1.3rem;
  color: #525252;
  line-height: 1.6;
}

.v2-carousel-nav {
  display: flex;
  justify-content: start;
  gap: 10px;
  align-items: start;
  margin-left: 10rem;
  margin-bottom: 10px;
}

.v2-nav-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #a5b3c5;
  cursor: pointer;
  transition: all 0.3s ease;
}

.v2-nav-dot.v2-active {
  background-color: #1c61be;
}

@media (max-width: 991px) and (min-width: 769px) { 
  .sect-head h2 {
    font-size: 5rem;
  }
}

@media (max-width: 768px) {
  .sect-head h2 {
    font-size: 4rem;
  }
  
  .v2-carousel-nav {
    margin-left: 0;
  }
  
  .v2-card {
    height: 400px !important;
  }
  
  .v2-card-title {
    font-size: 2.5vw;
  }
}

@media (max-width: 560px) { 
  .sect-head h2 {
    font-size: 2.5rem;
  }
  
  .v2-card-title {
    font-size: 2.7vw;
  }
  
  .v2-carousel-nav {
    margin-left: -90px;
  }
}

@media (max-width: 415px) {
  .v2-card {
    height: 350px !important;
  }
  
  .v2-card-title {
    font-size: 3.5vw;
    right: 0.5rem;
  }
  
  .v2-plus-btn {
    right: 0.5rem;
  }
  
  .v2-carousel-nav {
    margin-left: -130px;
  }
} */
/* ********************************** Section - 6 ****************************************** */

/* Company Logo Section Styles */
.image-wrapper {
  padding: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-bw {
  width: 100%;
  height: auto;
}

/* .company-logo {
  max-width: 100%;
  height: auto;
  border: 3px solid #333;
  padding: 2rem;
  background-color: white;
} */

/* .text-content-wrapper {
  padding: 2rem 3rem;
} */
.text-content-wrapper {
  overflow-x: hidden;
}
.company-description {
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1.6;
  color: #525252;
  margin: 0;
  text-align: justify;
  font-family: poppins, sans-serif;
  overflow-x: hidden !important;
}

/* For screens above 1920px */
@media (min-width: 2500px) {
  .company-description {
    /* clamp(minimum, preferred, maximum) */
    font-size: clamp(2rem, 2.5vw, 3rem);
  }
}

@media (max-width: 1919px) and (min-width: 1600px) {
  .company-description {
    font-size: 2rem;
  }
}

@media (max-width: 1599px) and (min-width: 1200px) {
  .company-description {
    font-size: 1.5rem;
  }
}

@media (max-width: 1199px) and (min-width: 992px) {
  .company-description {
    font-size: 1.190rem;
  }
}

@media (max-width: 991px) and (min-width: 768px) {
  .company-description {
    font-size: 0.85rem;
  }
}

@media (max-width: 767px) and (min-width: 576px) {
  .company-description {
    font-size: 1.5rem !important;
    text-align: center;
    margin: 2rem;
  }
}

@media (max-width: 399px) {
  .company-description {
    font-size: 1rem !important;
    text-align: center;
    margin: 2rem;
  }
}


/* Responsive adjustments */
@media (max-width: 768px) {
  /* .text-content-wrapper {
    padding: 1.5rem;
  } */
  
  .company-description {
    font-size: 1rem;
    text-align: left;
  }
  
  .image-wrapper {
    padding: 1rem;
  }
}

@media (max-width: 576px) {
  /* .text-content-wrapper {
    padding: 1rem;
  } */
  
  .company-description {
    font-size: 0.95rem;
  }
}


/* ********************************** Section - 7 ****************************************** */

/* Blue Section Styles - Base at 1920px */
.blue-section {
  background-color: #1C61BE;
  padding-top: 200px !important;
  padding-bottom: 200px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5rem;
}

.content-center {
  min-height: 150px;
}

.cube-icon {
  flex-shrink: 0;
}

.cube-image {
  width: 180px;
  height: 180px;
}

.section-text {
  color: white;
  font-size: 7rem;
  font-weight: 400;
  font-family: 'poppins', sans-serif;
  letter-spacing: 0.5px;
}

/* 4K Displays (3840px and above) */
@media (min-width: 3840px) {
  .blue-section {
    padding-top: 400px !important;
    padding-bottom: 400px !important;
  }
  
  .cube-image {
    width: 360px;
    height: 360px;
  }
  
  .section-text {
    font-size: 14rem;
  }
}

/* Ultra-wide 2K+ (3000px - 3839px) */
@media (min-width: 3000px) and (max-width: 3839px) {
  .blue-section {
    padding-top: 350px !important;
    padding-bottom: 350px !important;
  }
  
  .cube-image {
    width: 300px;
    height: 300px;
  }
  
  .section-text {
    font-size: 12rem;
  }
}

/* 2K Displays (2560px - 2999px) */
@media (min-width: 2560px) and (max-width: 2999px) {
  .blue-section {
    padding-top: 300px !important;
    padding-bottom: 300px !important;
  }
  
  .cube-image {
    width: 250px;
    height: 250px;
  }
  
  .section-text {
    font-size: 10rem;
  }
}

/* Wide Full HD (2200px - 2559px) */
@media (min-width: 2200px) and (max-width: 2559px) {
  .blue-section {
    padding-top: 250px !important;
    padding-bottom: 250px !important;
  }
  
  .cube-image {
    width: 220px;
    height: 220px;
  }
  
  .section-text {
    font-size: 8.5rem;
  }
}

/* Above Full HD (1920px - 2199px) - Base styles */
@media (min-width: 1920px) and (max-width: 2199px) {
  /* Base styles already defined above */
}

/* Standard Desktop (1600px - 1919px) */
@media (max-width: 1919px) and (min-width: 1600px) {
  .blue-section {
    padding-top: 180px !important;
    padding-bottom: 180px !important;
  }
  
  .cube-image {
    width: 160px;
    height: 160px;
  }
  
  .section-text {
    font-size: 6rem;
  }
}

/* Laptop (1366px - 1599px) */
@media (max-width: 1599px) and (min-width: 1366px) {
  .blue-section {
    padding-top: 150px !important;
    padding-bottom: 150px !important;
  }
  
  .cube-image {
    width: 140px;
    height: 140px;
  }
  
  .section-text {
    font-size: 5rem;
  }
}

/* Large Tablets / Small Laptops (1200px - 1365px) */
@media (max-width: 1365px) and (min-width: 1200px) {
  .blue-section {
    padding-top: 130px !important;
    padding-bottom: 130px !important;
  }
  
  .cube-image {
    width: 120px;
    height: 120px;
  }
  
  .section-text {
    font-size: 4.5rem;
  }
}

/* Tablets Landscape (992px - 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
  .blue-section {
    padding-top: 110px !important;
    padding-bottom: 110px !important;
  }
  
  .cube-image {
    width: 100px;
    height: 100px;
  }
  
  .section-text {
    font-size: 3.8rem;
  }
}

/* Tablets Portrait (768px - 991px) */
@media (max-width: 991px) and (min-width: 768px) {
  .blue-section {
    padding-top: 90px !important;
    padding-bottom: 90px !important;
  }
  
  .cube-image {
    width: 80px;
    height: 80px;
  }
  
  .section-text {
    font-size: 3.2rem;
  }
}

/* Mobile Landscape (576px - 767px) */
@media (max-width: 767px) and (min-width: 576px) {
  .blue-section {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  
  .cube-image {
    width: 70px;
    height: 70px;
  }
  
  .section-text {
    font-size: 2.8rem;
  }
  
  .content-center {
    min-height: 100px;
  }
}

/* Mobile Portrait (up to 575px) */
@media (max-width: 575px) {
  .blue-section {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }
  
  .cube-image {
    width: 60px;
    height: 60px;
  }
  
  .section-text {
    font-size: 2.2rem;
  }
  
  .content-center {
    flex-direction: column;
    text-align: center;
    min-height: auto;
  }
  
  .cube-icon {
    margin-bottom: 1rem;
    margin-right: 0 !important;
  }
}

/* Extra Small Mobile (up to 375px) */
@media (max-width: 375px) {
  .blue-section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  
  .cube-image {
    width: 50px;
    height: 50px;
  }
  
  .section-text {
    font-size: 1.8rem;
  }
}


/* ********************************** Section - 8 *******************************    */

/* Main Section - Base at 1920px */
.get-in-touch-section {
    background-color: #ffffff;
    padding: 120px 0;
    display: flex;
    align-items: center;
}

/* Content Wrapper */
.content-wrapper-last {
    padding: 40px 20px;
}

/* Main Heading */
.main-heading {
    color: #1550A0;
    font-size: 5rem;
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 0;
}

/* Sub Heading */
.sub-heading {
    color: #1550A0;
    font-size: 5rem;
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 3rem;
}

/* Action Section */
.action-section {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 2rem;
    margin-right: 0;
   
}

/* Get in Touch Button */
.get-touch-btn {
    background: linear-gradient(90deg, #1c61be 0%, #5c97e7 100%);
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
    padding: 18px 45px;
    border-radius: 12px;
    border: none;
    text-transform: none;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    
}

.get-touch-btn:hover {
    background-color: #357abd;
    transform: translateY(-2px);
    color: #fff;
    /* box-shadow: 0 4px 12px rgba(27, 97, 190, 0.3); */
}

.get-touch-btn:focus {
    background-color: #357abd;
    /* box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.25); */
    outline: none;
}


/* 4K Displays (3840px and above) */
@media (min-width: 3840px) {
    .get-in-touch-section {
        padding: 240px 0;
    }
    
    .content-wrapper-last {
        padding: 80px 40px;
    }
    
    .main-heading,
    .sub-heading {
        font-size: 10rem;
    }
    
    .sub-heading {
        margin-bottom: 6rem;
    }
    
    .get-touch-btn {
        font-size: 2.4rem;
        padding: 36px 90px;
        border-radius: 24px;
    }
        
    .action-section {
        gap: 4rem;
    }
}

/* Ultra-wide 2K+ (3000px - 3839px) */
@media (min-width: 3000px) and (max-width: 3839px) {
    .get-in-touch-section {
        padding: 200px 0;
    }
    
    .content-wrapper-last {
        padding: 65px 35px;
    }
    
    .main-heading,
    .sub-heading {
        font-size: 8rem;
    }
    
    .sub-heading {
        margin-bottom: 5rem;
    }
    
    .get-touch-btn {
        font-size: 2rem;
        padding: 30px 75px;
        border-radius: 20px;
    }

}

/* 2K Displays (2560px - 2999px) */
@media (min-width: 2560px) and (max-width: 2999px) {
    .get-in-touch-section {
        padding: 160px 0;
    }
    
    .content-wrapper-last {
        padding: 55px 30px;
    }
    
    .main-heading,
    .sub-heading {
        font-size: 6.5rem;
    }
    
    .sub-heading {
        margin-bottom: 4rem;
    }
    
    .get-touch-btn {
        font-size: 1.6rem;
        padding: 24px 60px;
        border-radius: 16px;
    }

}

/* Wide Full HD (2200px - 2559px) */
@media (min-width: 2200px) and (max-width: 2559px) {
    .get-in-touch-section {
        padding: 140px 0;
    }
    
    .main-heading,
    .sub-heading {
        font-size: 5.75rem;
    }
    
    .get-touch-btn {
        font-size: 1.4rem;
        padding: 21px 52px;
    }

}

/* Full HD (1920px - 2199px) - Base styles already defined */

/* Standard Desktop (1600px - 1919px) */
@media (max-width: 1919px) and (min-width: 1600px) {
    .get-in-touch-section {
        padding: 100px 0;
    }
    
    .content-wrapper-last {
        padding: 35px 20px;
    }
    
    .main-heading,
    .sub-heading {
        font-size: 4.2rem;
    }
    
    .sub-heading {
        margin-bottom: 2.5rem;
    }
    
    .get-touch-btn {
        font-size: 1.1rem;
        padding: 16px 40px;
    }

}

/* Laptop (1366px - 1599px) */
@media (max-width: 1599px) and (min-width: 1366px) {
    .get-in-touch-section {
        padding: 90px 0;
    }
    
    .content-wrapper-last {
        padding: 30px 15px;
    }
    
    .main-heading,
    .sub-heading {
        font-size: 3.5rem;
    }
    
    .sub-heading {
        margin-bottom: 2.2rem;
    }
    
    .get-touch-btn {
        font-size: 1rem;
        padding: 14px 35px;
    }

}

/* Large Tablets / Small Laptops (1200px - 1365px) */
@media (max-width: 1365px) and (min-width: 1200px) {
    .get-in-touch-section {
        padding: 80px 0;
    }
    
    .main-heading,
    .sub-heading {
        font-size: 3rem;
    }
    
    .sub-heading {
        margin-bottom: 2rem;
    }
    
    .get-touch-btn {
        font-size: 0.95rem;
        padding: 13px 32px;
    }
}

/* Tablets Landscape (992px - 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
    .get-in-touch-section {
        padding: 70px 0;
    }
    
    .content-wrapper-last {
        padding: 25px 15px;
    }
    
    .main-heading,
    .sub-heading {
        font-size: 2.5rem;
    }
    
    .sub-heading {
        margin-bottom: 1.8rem;
    }
    
    .get-touch-btn {
        font-size: 0.9rem;
        padding: 12px 28px;
    }
}

/* Tablets Portrait (768px - 991px) */
@media (max-width: 991px) and (min-width: 768px) {
    .get-in-touch-section {
        padding: 60px 0;
    }
    
    .main-heading,
    .sub-heading {
        font-size: 2.2rem;
    }
    
    .sub-heading {
        margin-bottom: 1.5rem;
    }
    
    .get-touch-btn {
        font-size: 0.9rem;
        padding: 11px 25px;
    }
    
    .action-section {
        justify-content: center;
    }
}

/* Mobile Landscape (576px - 767px) */
@media (max-width: 767px) and (min-width: 576px) {
    .get-in-touch-section {
        padding: 50px 0;
    }
    
    .content-wrapper-last {
        padding: 20px 10px;
        text-align: center;
    }
    
    .main-heading,
    .sub-heading {
        font-size: 1.9rem;
        text-align: center;
    }
    
    .sub-heading {
        margin-bottom: 1.5rem;
    }
    
    .get-touch-btn {
        font-size: 0.85rem;
        padding: 10px 24px;
    }
    
    .action-section {
        gap: 1.5rem;
        flex-direction: column;
        gap: 1rem;
        justify-content: center;
    }
}

/* Mobile Portrait (up to 575px) */
@media (max-width: 575px) {
    .get-in-touch-section {
        padding: 40px 0;
    }
    
    .content-wrapper-last {
        padding: 15px 10px;
        text-align: center;
    }
    
    .main-heading,
    .sub-heading {
        font-size: 1.6rem;
        line-height: 1.2;
        text-align: center;
    }
    
    .sub-heading {
        margin-bottom: 1.2rem;
    }
    
    .get-touch-btn {
        font-size: 0.8rem;
        padding: 10px 20px;
        width: 100%;
    }
    
    .action-section {
        flex-direction: column;
        gap: 1rem;
        justify-content: center;
    }
}

/* Extra Small Mobile (up to 375px) */
@media (max-width: 375px) {
    .main-heading,
    .sub-heading {
        font-size: 1.4rem;
    }
    
    .get-touch-btn {
        font-size: 0.75rem;
        padding: 9px 18px;
    }
}

/* Accessibility - Keep existing styles */
.get-touch-btn:focus {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
}

/* High contrast mode - Keep existing styles */
@media (prefers-contrast: high) {
    .main-heading,
    .sub-heading {
        color: #000000;
    }
    
    .get-touch-btn {
        background-color: #000000;
        border-color: #000000;
    }
    
    .get-touch-btn:hover,
    .get-touch-btn:focus {
        background-color: #333333;
        border-color: #333333;
    }
  
}


/* <!-- ********************************** Footer ********************************** --> */





.corner-image {
    position: absolute;
    bottom: -25%;
    left: -5rem;
    /* width: 100px; 
    height: 100px;  */
    z-index: 10; /* Higher z-index to ensure it's on top */
    pointer-events: none;
}

.corner-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;

}

@media (max-width: 768px) {
    .hero__image {
        display: flex;
        flex-direction: column;
    }

    .corner-image {
        position: relative;
        bottom: auto;
        left: auto;
        order: 2; /* This makes it appear after the hero content */
        margin-top: 2rem; /* Add some spacing */
        width: 100%; /* Make it full width on mobile */
        margin-left: -5rem;
        margin-right: auto;
    }

    .hero-content-wrapper {
        order: 1; /* This ensures hero content comes first */
    }

    .hero__image {
      padding-bottom: 5%;
    }
}

@media (max-width: 991px) and (min-width: 768px) {
      .hero__image {
      padding-bottom: 2rem;
      height: 145vh !important;
    }
}

@media (max-width: 767px) and (min-width: 551px) {
      .hero__image {
      padding-bottom: 2rem;
      height: 140vh !important;
    }
}

@media (max-width: 550px) and (min-width: 350px) {
      .hero__image {
      padding-bottom: 2rem;
      height: 130vh !important;
    }
}

@media (max-width: 1200px) {
   .hero__image {
        display: flex;
        flex-direction: column;
    }

  .corner-image {
        position: relative;
        bottom: 10rem;
        left: auto;
        order: 2; /* This makes it appear after the hero content */
        margin-top: 2rem; /* Add some spacing */
        width: 100vw; /* Make it full width on mobile */
        margin-left: -20vw;
        margin-right: auto;
    }

    .hero-content-wrapper {
        order: 1; /* This ensures hero content comes first */
    }

    .hero__image {
      padding-bottom: 2rem ;
      height: 160vh;
    }

}