/* ════════════════════════════
       HERO TEXT  — z-index 10
    ════════════════════════════ */
 .hero-content {
     position: absolute;
     top: 45%;
     left: 10%;
     transform: translateY(-42%);
     z-index: 10;
     max-width: 420px;
 }

 .headline {
     color: #fff;
     line-height: 0.95;
 }

 .headline-upper {
     font-family: "Anton", sans-serif;
     font-weight: 400;
     font-style: normal;
     font-size: 72px;
     letter-spacing: 3px;
     display: block;
 }

 .headline-script {
     font-family: "Coconut Beach Personal Use";
     font-style: italic;
     font-size: 120px;
     color: #e8c87a;
     font-weight: 400;
     display: block;
     line-height: 1.08;
     margin-top: -34px;
 }

 .tagline {
     color: #ffffff;
     font-size: 16px;
     font-weight: 400;
     font-family: 'Poppins', sans-serif;
     /* line-height: 1.75;
     letter-spacing: 1px; */
     margin-top: 30px;
     /* max-width: 300px; */
 }

 .house-image-wrap {
     position: absolute;
     bottom: 0;
     right: 8%;
     width: 75%;
     height: 88%;
     z-index: 4;
     padding: 1%;
     overflow: visible;
 }

 .house-carousel,
 .house-carousel .slick-list,
 .house-carousel .slick-track {
     height: 100% !important;
     padding-top: 20px !important;
 }

 .house-carousel .slick-slide {
     height: 100% !important;
 }

 .house-carousel .slick-slide>div {
     height: 100%;
 }

 .house-slide {
     display: flex !important;
     align-items: flex-end;
     justify-content: center;
     height: 100%;
     width: 100%;
 }

 .house-slide img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     object-position: bottom center;
     display: block;
 }

 /* ════════════════════════════
       STATS  — z-index 10
    ════════════════════════════ */
 .stats-row {
     position: static;
     display: flex;
     gap: 14px;
     margin-top: 28px;
     z-index: 10;
 }

 .stat-card {
     background: rgba(255, 255, 255, 0.08);
     backdrop-filter: blur(5px) saturate(140%);
     -webkit-backdrop-filter: blur(16px) saturate(140%);
     border: 1px solid rgba(255, 255, 255, 0.18);
     border-radius: 12px;
     padding: 24px 24px;
     min-width: 200px;
     box-shadow:
         0 4px 24px rgba(0, 0, 0, 0.25),
         inset 0 1px 0 rgba(255, 255, 255, 0.15);
 }

 .stat-number {
     font-size: 28px;
     font-weight: 700;
     color: #e8c87a;
     line-height: 1;
     letter-spacing: -0.5px;
 }

 .stat-label {
     font-size: 16px;
     font-style: italic;
     color: #e8c87a;
     margin-top: 5px;
     letter-spacing: 0.2px;
 }

 .tagline {
     color: #ffffff;
     font-size: 16px;
     font-weight: 400;
     font-family: 'Poppins', sans-serif;
     margin-top: 25%;
 }

 /* =========================
   RIGHT CTA BUTTONS
========================= */

 .right-ctas {
     position: absolute;
     right: 10%;
     top: 50%;
     transform: translateY(-10%);
     z-index: 10;

     display: flex;
     flex-direction: column;
     gap: 16px;
 }

 .btn-cta-pill {
     width: 240px;
     height: 58px;

     background: #ffffff;
     border: 2px solid #ffffff;
     border-radius: 50px;

     padding: 4px;

     display: flex;
     align-items: center;
     justify-content: space-between;

     cursor: pointer;

     transition: transform 0.4s ease,
         box-shadow 0.4s ease;
 }

 .btn-cta-pill .btn-text {
     flex: 1;
     height: 100%;

     background: #F3CF8E;
     border-radius: 40px;

     display: flex;
     align-items: center;
     justify-content: center;

     font-family: 'Poppins', sans-serif;
     font-size: 16px;
     font-weight: 600;
     color: #000;

     transition: background-color 0.4s ease,
         color 0.4s ease;
 }

 .btn-cta-pill .arrow-circle {
     width: 48px;
     height: 48px;

     background: #ffffff;
     border-radius: 50%;

     display: flex;
     align-items: center;
     justify-content: center;

     flex-shrink: 0;

     transition: transform 0.4s ease;
 }

 .btn-cta-pill .arrow-circle svg {
     width: 18px;
     height: 18px;

     fill: none;
     stroke: #F3CF8E;
     stroke-width: 2;
     stroke-linecap: round;
     stroke-linejoin: round;

     transition: transform 0.4s ease,
         stroke 0.4s ease;
 }

 /* Hover Effects */
 .btn-cta-pill:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
 }

 .btn-cta-pill:hover .btn-text {
     background: #000;
     color: #fff;
 }

 .btn-cta-pill:hover .arrow-circle {
     /* transform: translateX(-4px); */
     stroke: #000000;
 }

 .btn-cta-pill:hover .arrow-circle svg {
     transform: rotate(-45deg);
     stroke: #000000;
 }

 /* ════════════════════════════
       RESPONSIVE
    ════════════════════════════ */
 @media (max-width: 960px) {
     .banner-header {
         padding: 16px 24px;
     }

     .nav-pill {
         gap: 24px;
         padding: 10px 24px;
     }

     .hero-content {
         left: 24px;
         max-width: 340px;
     }

     .stats-row {
         left: 24px;
     }

     .right-ctas {
         right: 16px;
     }

     .house-image-wrap {
         width: 54%;
     }
 }

 @media (max-width: 700px) {
     .nav-pill {
         display: none;
     }

     .right-ctas {
         display: none;
     }

     .house-image-wrap {
         width: 82%;
         transform: translateX(-50%);
     }

     /* .hero-content {
         left: 16px;
         max-width: 260px;
     } */

     .stats-row {
         left: 16px;
         gap: 10px;
     }

     .stat-card {
         padding: 12px 16px;
         min-width: 105px;
     }
 }


 /* ══════════════════════════════════════
     ONGOING PROJECTS SECTION
  ══════════════════════════════════════ */
 .projects-section {
     width: 100%;
     padding: 10px 0 65px;
     background: #fff;
     overflow: hidden;

 }

 /* clips the left edge only; right side intentionally bleeds via slick-list overflow:visible */
 .projects-slider-clip {
     overflow: hidden;
     width: 100%;
 }

 /* ── Section heading ── */
 .section-head {
     text-align: center;
     margin-bottom: 48px;
     padding: 0 24px;
 }

 .section-head h2 {
     font-family: 'Poppins', sans-serif;
     font-size: 45px;
     font-weight: 700;
     color: #1a1a1a;
     letter-spacing: 0.2px;
     margin-bottom: 10px;

 }

 .section-head p {
     font-size: 22px;
     color: #555;
     margin: 0;
 }

 .section-head p strong {
     font-weight: 700;
     color: #1a1a1a;
     letter-spacing: 1px;
     text-transform: uppercase;
     font-size: 14px;
 }

 /* ── Slider wrapper ── */
 .projects-slider {
     padding: 0 100px;
     position: relative;
 }

 .project-slide {
     padding: 0 15px;
 }

 .projects-slider .slick-list {
     overflow: visible;
 }

 .projects-slider .slick-track {
     display: flex !important;
 }

 .projects-slider .slick-slide {
     height: auto;
     display: flex !important;
     padding: 0 14px;
 }

 .projects-slider .slick-slide>div {
     width: 100%;
 }

 /* ── Project Card ── */
 .project-card {
     background: #FCD79C;
     border-radius: 24px;
     padding: 18px 18px 22px;
     display: flex;
     flex-direction: column;
     height: 100%;
     /* width: 100%; */
     box-sizing: border-box;
 }


 .card-img-wrap {
     width: 100%;
     aspect-ratio: 4 / 3;
     border-radius: 14px;
     overflow: hidden;
     margin-bottom: 18px;
     flex-shrink: 0;
     position: relative;
 }

 .card-img-wrap img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     display: block;
     transition: transform 0.4s ease;
 }

 .project-card:hover .card-img-wrap img {
     transform: scale(1.04);
 }

 .card-body {
     display: flex;
     flex-direction: column;
     gap: 8px;
     flex: 1;
 }

 .card-title {
     font-size: 22px;
     font-weight: 700;
     color: #1a1a1a;
     line-height: 1.28;
 }

 .card-desc {
     font-size: 14.5px;
     color: #4a4a4a;
     line-height: 1.55;
     font-weight: 400;
 }

 .card-footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-top: 16px;
     flex-shrink: 0;
 }

 .card-price {
     font-family: 'Poppins', sans-serif;
     font-size: 32px;
     font-weight: 700;
     color: #1a1a1a;
     letter-spacing: -0.5px;
     line-height: 1;
 }

 .btn-view {
     width: 160px;
     height: 40px;


     background: #ffffff;
     border: 2px solid #ffffff;
     border-radius: 50px;

     padding: 4px;

     display: flex;
     align-items: center;
     justify-content: space-between;

     cursor: pointer;

     transition: transform 0.4s ease,
         box-shadow 0.4s ease;
 }

 .btn-view .btn-text {
     flex: 1;
     height: 100%;

     background: #F3CF8E;
     border-radius: 40px;

     display: flex;
     align-items: center;
     justify-content: center;

     font-family: 'Poppins', sans-serif;
     font-size: 14px;
     font-weight: 400;
     color: #000;

     transition: background-color 0.4s ease,
         color 0.4s ease;
 }

 .btn-view .arrow-circle {
     width: 28px;
     height: 28px;

     background: #ffffff;
     border-radius: 50%;

     display: flex;
     align-items: center;
     justify-content: center;

     flex-shrink: 0;

     transition: transform 0.4s ease;
 }

 .btn-view .arrow-circle svg {
     width: 15px;
     height: 15px;

     fill: none;
     stroke: #F3CF8E;
     stroke-width: 2;
     stroke-linecap: round;
     stroke-linejoin: round;
     margin-left: 5px;

     transition: transform 0.4s ease,
         stroke 0.4s ease;
 }

 /* Hover */

 .btn-view:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
 }

 .btn-view:hover .btn-text {
     background: #000;
     color: #fff;
 }

 .btn-view:hover .arrow-circle {
     /* transform: translateX(-4px); */
     stroke: #000000;
 }

 .btn-view:hover .arrow-circle svg {
     transform: rotate(-45deg);
     stroke: #000000;
 }

 /* ══════════════════════════════════════
     SLICK ARROW — visible mid-card, right edge
  ══════════════════════════════════════ */
 .slick-arrow {
     position: absolute;
     top: 35%;
     width: 56px;
     height: 56px;
     z-index: 20;
     cursor: pointer;
     background: transparent;
     border: none;
     padding: 0;
 }

 .slick-arrow::before {
     content: '';
     display: block;
     width: 100%;
     height: 100%;
     background: transparent;
 }

 .arrow-next-visual {
     position: absolute;
     top: 35%;
     right: 6px;
     transform: translateY(-50%);
     width: 56px;
     height: 56px;
     border-radius: 50%;
     background: rgba(0, 0, 0, 0.04);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 19;
     pointer-events: none;
 }

 .arrow-next-visual svg {
     width: 22px;
     height: 22px;
     stroke: #e0a93e;
     stroke-width: 2.2;
     fill: none;
 }

 .slick-next {
     right: -10px;
 }

 .slick-prev {
     left: -10px;
     opacity: 0;
     pointer-events: none;
 }

 /* ── Pagination dots ── */
 .slick-dots {
     position: relative;
     bottom: auto;
     margin-top: 38px;
     display: flex;
     align-items: center;
     bottom: -35px !important;
     justify-content: center;
     gap: 8px;
     list-style: none;
 }

 .slick-dots li {
     width: auto;
     height: auto;
     margin-top: 20px !important;
 }

 .slick-dots li button {
     width: 20px !important;
     height: 20px !important;
     padding: 0;
     border-radius: 50%;
     background: #d9d9d9 !important;
     border: none;
     opacity: 1;
     transition: background 0.2s, transform 0.2s;
 }

 .slick-dots li button::before {
     content: '';
     display: none;
 }

 .slick-dots li.slick-active button {
     background: #f0b94d !important;
     transform: scale(1.0);
     margin-top: 16px !important;
     width: 20px !important;
     height: 20px !important;
 }

 /* ── Responsive ── */
 @media (max-width: 900px) {
     .projects-slider {
         padding: 0 40px;
     }
 }

 @media (max-width: 600px) {
     .projects-slider {
         padding: 0 20px;
     }

     .section-head h2 {
         font-size: 24px;
     }

     .arrow-next-visual {
         width: 44px;
         height: 44px;
     }
 }

 .services-section {
     /* padding: 30px 0 20px; */
     background: #fff;
 }

 .service-head {
     text-align: center;
     margin-bottom: 25px;
 }

 .service-head h2 {
     font-family: 'Poppins', sans-serif;
     font-size: 45px;
     font-weight: 700;
     color: #1a1a1a;
     letter-spacing: 0.2px;
     margin-bottom: 10px;

 }

 .service-head p {
     font-size: 22px;
     color: #555;
     margin: 0;
     margin-bottom: -20px;
 }

 .section-head strong {
     font-weight: 700;
     color: #222;
 }

 .services-layout {
     max-width: 1600px;
     margin: 0 auto;

     display: grid;
     grid-template-columns: 1fr 460px 1fr;

     align-items: center;
 }

 /* LEFT */

 .services-left {
     position: relative;
     height: 620px;
 }

 .service-one {
     position: absolute;
     top: 110px;
     right: 10px;
 }

 .service-two {
     position: absolute;
     bottom: 110px;
     right: 10px;
 }

 /* RIGHT */

 .services-right {
     position: relative;
     height: 620px;
 }

 .service-three {
     position: absolute;
     top: 95px;
     left: 10px;
 }

 .service-four {
     position: absolute;
     bottom: 95px;
     left: 10px;
 }

 /* BOX */

 .service-box {
     display: flex;
     align-items: flex-start;
     transition: all 0.35s ease;
     cursor: pointer;
 }

 .service-box:hover {
     transform: translateY(-8px);
     background-color: #FCD79C;
     padding: 20px;
     border-radius: 30px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
 }

 .services-left .service-box {
     text-align: right;
 }

 .services-right .service-box {
     text-align: left;
 }

 .service-content {
     width: 350px;
 }

 .service-content h3 {
     font-size: 32px;
     font-weight: 700;
     line-height: 1.15;
     margin-bottom: 14px;
     color: #333;
 }

 .service-content p {
     font-size: 18px;
     line-height: 1.55;
     color: #555;
 }

 /* NUMBER */

 .service-number {
     width: 56px;
     height: 56px;
     min-width: 56px;

     border-radius: 50%;
     background: #e6c277;

     display: flex;
     align-items: center;
     justify-content: center;

     font-size: 26px;
     font-weight: 700;
     color: #222;
 }

 .service-box:hover .service-number {
     background: #111;
     color: #fff;
 }

 .services-left .service-number {
     margin-left: 18px;
 }

 .services-right .service-number {
     margin-right: 18px;
 }

 /* CENTER */
 .services-center {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .building-slider {
     width: 420px;
     height: 560px;
     overflow: hidden;
 }

 .building-slider .slick-list {
     height: 560px !important;
     overflow: hidden;
 }

 .building-slider .slick-track {
     display: block;
 }

 .building-slide {
     height: 560px !important;

     display: flex !important;
     align-items: center;
     justify-content: center;
 }

 .building-slide img {
     max-width: 420px;
     max-height: 520px;
     width: auto;
     height: auto;
     object-fit: contain;
     display: block;
 }



 .dream-section {
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: #1b1b1d;
     min-height: 680px;
     overflow: hidden;
 }

 .dream-left {
     width: 57%;
     padding: 0 80px;
     text-align: center;
 }

 .dream-left h2 {
     color: #fff;
     font-size: 72px;
     line-height: 0.95;
     font-weight: 900;
     text-transform: uppercase;
     margin-bottom: 40px;
 }

 .dream-left h2 span {
     display: block;
     margin-top: 25px;
 }

 .dream-left p {
     max-width: 760px;
     margin: 0 auto;
     color: #f5f5f5;
     font-size: 20px;
     line-height: 1.6;
     font-weight: 300;
     margin-bottom: 40px;
 }

 .dream-btn {
     width: 220px;
     height: 58px;

     background: #fff;
     border: 2px solid #fff;
     border-radius: 50px;

     padding: 4px;

     display: inline-flex;
     align-items: center;
     justify-content: space-between;

     text-decoration: none;
     cursor: pointer;

     transition: transform 0.4s ease,
         box-shadow 0.4s ease;
 }

 .dream-btn .btn-text {
     flex: 1;
     height: 100%;

     background: #F3CF8E;
     border-radius: 40px;

     display: flex;
     align-items: center;
     justify-content: center;

     font-family: 'Poppins', sans-serif;
     font-size: 16px;
     font-weight: 600;
     color: #000;

     transition: background-color 0.4s ease,
         color 0.4s ease;
 }

 .dream-btn .arrow-circle {
     width: 38px;
     height: 38px;

     background: #fff;
     border-radius: 50%;

     display: flex;
     align-items: center;
     justify-content: center;

     flex-shrink: 0;

     transition: transform 0.4s ease;
 }

 .dream-btn .arrow-circle svg {
     width: 18px;
     height: 18px;

     fill: none;
     stroke: #F3CF8E;
     stroke-width: 2;
     stroke-linecap: round;
     stroke-linejoin: round;

     transition: transform 0.4s ease;
 }

 /* Hover */

 .dream-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
 }

 .dream-btn:hover .btn-text {
     background: #000;
     color: #fff;
 }

 .dream-btn:hover .arrow-circle {
     /* transform: translateX(-4px); */
 }

 .dream-btn:hover .arrow-circle svg {
     transform: rotate(-45deg);
     stroke: #000000;
 }

 .dream-right {
     width: 43%;
     height: 680px;
     overflow: hidden;
 }

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

 .gallery-section {
     background: #ffffff;
     padding: 10px 0;
     overflow: hidden;
 }

 /* HEADER */

 .gallery-header {
     text-align: center;
     max-width: 900px;
     margin: 0 auto 20px;
 }

 .gallery-header h2 {
     font-family: 'Poppins', sans-serif;
     font-size: 45px;
     font-weight: 700;
     color: #1a1a1a;
     letter-spacing: 0.2px;
     margin-bottom: 10px;
     margin-top: 20px;
 }

 .gallery-header p {
     font-size: 18px;
     line-height: 1.6;
     color: #555;
 }

 /* CURVED CONTAINER */

 .gallery-curved-wrap {
     width: 100%;
     height: 760px;
     overflow: hidden;
     background-color: #ffffff;
     position: relative;

     clip-path: polygon(0% 10%,
             10% 16%,
             25% 20%,
             50% 22%,
             75% 20%,
             90% 16%,
             100% 10%,

             100% 90%,
             90% 84%,
             75% 80%,
             50% 78%,
             25% 80%,
             10% 84%,
             0% 90%);

     -webkit-clip-path: polygon(0% 10%,
             10% 16%,
             25% 20%,
             50% 22%,
             75% 20%,
             90% 16%,
             100% 10%,

             100% 90%,
             90% 84%,
             75% 80%,
             50% 78%,
             25% 80%,
             10% 84%,
             0% 90%);
 }

 /* TRACK */
 .gallery-track {
     display: flex;
     align-items: flex-end;
     /* important */
     gap: 42px;
     width: max-content;
     animation: galleryMarquee 40s linear infinite;
     align-items: center;
     gap: 40px;
     padding-top: 20px;
 }

 /* ITEMS */

 .gallery-item {
     flex-shrink: 0;
 }

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

 /* SIDE */


 .side-img {
     width: 420px;
     height: 720px;
 }

 /* LARGE */

 .large-img {
     width: 560px;
     height: 620px;
 }

 /* BEFORE AFTER */

 .before-after {
     width: 430px;
     height: 620px;

     display: flex;
     flex-direction: column;
     gap: 10px;

     flex-shrink: 0;
 }

 .ba-card {
     flex: 1;
     position: relative;
 }

 .ba-card span {
     position: absolute;
     left: 20px;
     bottom: 20px;

     color: #fff;
     font-size: 22px;
     font-weight: 700;
 }

 /* BUTTON WRAPPER */

 .gallery-btn-wrap {
     display: flex;
     justify-content: center;
 }

 /* BUTTON */

 .gallery-btn {
     width: 240px;
     height: 58px;

     background: #ffffff;
     border: 2px solid #ffffff;
     border-radius: 50px;

     padding: 4px;

     display: flex;
     align-items: center;
     justify-content: space-between;

     text-decoration: none;
     cursor: pointer;

     transition: transform 0.4s ease,
         box-shadow 0.4s ease;
     margin-top: -70px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }

 /* TEXT SECTION */

 .gallery-btn-text {
     flex: 1;
     height: 100%;

     background: #F3CF8E;
     border-radius: 40px;

     display: flex;
     align-items: center;
     justify-content: center;

     font-family: 'Poppins', sans-serif;
     font-size: 16px;
     font-weight: 600;
     color: #000;

     transition: background-color 0.4s ease,
         color 0.4s ease;
 }

 /* ARROW CIRCLE */

 .gallery-btn-icon {
     width: 48px;
     height: 48px;

     background: #ffffff;
     border-radius: 50%;

     display: flex;
     align-items: center;
     justify-content: center;

     flex-shrink: 0;

     transition: transform 0.4s ease;
 }

 /* SVG ARROW */

 .gallery-btn-icon svg {
     width: 18px;
     height: 18px;

     fill: none;
     stroke: #F3CF8E;
     stroke-width: 2;
     stroke-linecap: round;
     stroke-linejoin: round;

     transition: transform 0.4s ease,
         stroke 0.4s ease;
 }

 /* HOVER EFFECTS */

 .gallery-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
 }

 .gallery-btn:hover .gallery-btn-text {
     background: #000;
     color: #fff;
 }

 .gallery-btn:hover .gallery-btn-icon {
     /* transform: translateX(-4px); */
 }

 .gallery-btn:hover .gallery-btn-icon svg {
     transform: rotate(-45deg);
     stroke: #000000;
 }

 /* MARQUEE */

 @keyframes galleryMarquee {

     from {
         transform: translateX(0);
     }

     to {
         transform: translateX(-50%);
     }
 }

 /* ===========================
   ABOUT SECTION
=========================== */
 /* Outer Frame to match the thin wireframe border in your image */
 .page-frame {
     position: relative;
     width: 100%;
     /* max-width: 1200px; */
     border: 1px solid #d1d1d1;
     border-top: none;
     /* Open top as per image */
     border-bottom-left-radius: 20px;
     border-bottom-right-radius: 20px;
     padding: 10px 60px 80px 60px;
     background-color: #fff;
 }

 /* Architectural Side Lines */
 .side-line {
     position: absolute;
     top: 0;
     bottom: 40px;
     width: 1px;
     background-color: #7a7a7a;
 }

 .line-left-1 {
     left: 15px;
     height: 60%;
     width: 2px;
     background-color: #7a7a7a;
 }

 .line-left-2 {
     left: 35px;
     height: 70%;
     width: 2px;
 }

 .line-left-3 {
     left: 55px;
     height: 80%;
     width: 2px;
 }

 .line-right-1 {
     right: 15px;
     height: 60%;
     width: 2px;
 }

 .line-right-2 {
     right: 35px;
     height: 70%;
     width: 2px;
 }

 .line-right-3 {
     right: 55px;
     height: 80%;
     width: 2px;

 }

 /* Section Title */
 .section-title {
     font-family: 'Poppins', sans-serif;
     font-size: 45px;
     font-weight: 700;
     color: #1a1a1a;
     letter-spacing: 0.2px;
     margin-bottom: 10px;
     text-align: center;
 }

 /* The Main Yellow Banner */
 .banner {
     background-color: #FCE1AA;
     /* Exact peach/yellow color from image */
     border-radius: 50px;
     position: relative;
     display: flex;
     align-items: stretch;
     min-height: 480px;
     margin-left: 2%;
     margin-right: 2%;
 }

 /* Left Content Area (Text) */
 .content-left {
     width: 50%;
     padding: 60px 0 60px 60px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     z-index: 2;
 }

 .main-heading {
     font-size: 34px;
     font-weight: 900;
     line-height: 1.4;
     color: #1a1a1a;
     margin-bottom: 30px;
     letter-spacing: 1px;
 }

 .description {
     font-size: 15px;
     line-height: 1.6;
     color: #2c2c2c;
     margin-bottom: 45px;
     max-width: 90%;
 }

 .description strong {
     font-weight: 800;
 }

 .view-more-btn {
     width: 220px;
     height: 58px;

     background: #ffffff;
     border: 2px solid #ffffff;
     border-radius: 50px;

     padding: 4px;

     display: inline-flex;
     align-items: center;
     justify-content: space-between;

     text-decoration: none;
     cursor: pointer;

     transition: transform 0.4s ease,
         box-shadow 0.4s ease;
 }

 .view-more-btn .btn-text {
     flex: 1;
     height: 100%;

     background: #F3CF8E;
     border-radius: 40px;

     display: flex;
     align-items: center;
     justify-content: center;

     font-family: 'Poppins', sans-serif;
     font-size: 16px;
     font-weight: 600;
     color: #000;

     transition: background-color 0.4s ease,
         color 0.4s ease;
 }

 .view-more-btn .icon-circle {
     width: 38px;
     height: 38px;

     background: #ffffff;
     border-radius: 50%;

     display: flex;
     align-items: center;
     justify-content: center;

     flex-shrink: 0;

     transition: transform 0.4s ease;
 }

 .view-more-btn .icon-circle svg {
     width: 18px;
     height: 18px;

     fill: none;
     stroke: #F3CF8E;
     stroke-width: 2;
     stroke-linecap: round;
     stroke-linejoin: round;

     transition: transform 0.4s ease;
 }

 /* Hover */

 .view-more-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
 }

 .view-more-btn:hover .btn-text {
     background: #000;
     color: #fff;
 }



 .view-more-btn:hover .icon-circle svg {
     transform: rotate(-45deg);
     stroke: #000000;
 }

 /* Right Content Area (Image Pop-out Setup) */
 .content-right {
     position: absolute;
     right: -3px;
     /* Pushes image slightly outside the right edge */
     bottom: -40px;
     /* Pushes image slightly outside the bottom edge */
     width: 55%;
     height: 115%;
     /* Makes container larger than the banner */
     display: flex;
     align-items: flex-end;
     justify-content: flex-end;
     z-index: 3;
     pointer-events: none;
     /* Prevents image bounding box from blocking clicks */
 }

 .content-right img {
     width: 100%;
     height: auto;
     object-fit: contain;
     filter: drop-shadow(-15px 25px 20px rgba(0, 0, 0, 0.2));
     /* Adds realistic shadow to transparent PNG */
 }

 /* Responsive Adjustments */
 @media (max-width: 992px) {
     .banner {
         flex-direction: column;
         min-height: auto;
     }

     .content-left {
         width: 100%;
         padding: 50px;
     }

     .content-right {
         position: relative;
         width: 90%;
         right: 0;
         bottom: -20px;
         margin: 0 auto;
     }
 }

 /* ==================================
   DIFFERENCE SECTION
================================== */

 .difference-section {
     background: #ffffff;
     padding: 20px 20px;

 }

 .difference-container {
     max-width: 1280px;
     margin: auto;
 }

 .section-title {
     font-family: 'Poppins', sans-serif;
     font-size: 45px;
     font-weight: 700;
     color: #1a1a1a;
     letter-spacing: 0.2px;
     margin-bottom: 10px;
 }

 .section-desc {
     text-align: center;
     max-width: 820px;
     margin: 0 auto 50px;
     font-size: 20px;
     line-height: 1.6;
     color: #555;
 }

 .section-desc strong {
     color: #222;
     font-weight: 700;
 }

 .difference-grid {
     display: grid;
     grid-template-columns: 520px 1fr;
     gap: 40px;
     align-items: center;
 }

 /* ==================================
   FEATURE CARDS
================================== */

 .features-column {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .feature-card {
     background: #efcb8d;
     border-radius: 20px;
     padding: 18px 26px;
     display: flex;
     align-items: center;
     gap: 20px;
 }

 .feature-icon {
     width: 72px;
     min-width: 72px;
 }

 .feature-icon img {
     width: 100%;
     display: block;
 }

 .feature-content h3 {
     font-size: 28px;
     font-weight: 700;
     color: #111;
     margin: 0 0 8px;
 }

 .feature-content p {
     margin: 0;
     font-size: 19px;
     line-height: 1.5;
     color: #333;
 }

 /* ==================================
   RIGHT VISUAL
================================== */

 .visual-column {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .difference-image {
     width: 100%;
     max-width: 700px;
     height: auto;
     display: block;
     object-fit: contain;
 }

 /* ==================================
   RESPONSIVE
================================== */

 @media (max-width: 991px) {

     .difference-grid {
         grid-template-columns: 1fr;
     }

     .visual-column {
         order: -1;
     }

     .visual-wrapper {
         height: 340px;
     }

     .section-title {
         font-size: 32px;
     }

     .section-desc {
         font-size: 16px;
     }

     .feature-content h3 {
         font-size: 22px;
     }

     .feature-content p {
         font-size: 15px;
     }
 }

 /* ══════════════════════════════════
                   ARCHITECTURAL WRAPPER
           ══════════════════════════════════ */
 .page-wrapper {
     position: relative;
     /* max-width: 1100px; */
     width: 100%;
     padding: 0 40px;
     /* Space for the external lines */
 }

 /* Decorative Grid Lines */
 .decor-line-v,
 .decor-line-h {
     position: absolute;
     background-color: #d0d0d0;
     z-index: 0;
 }

 .decor-line-v {
     width: 1px;
 }

 .decor-line-h {
     height: 1px;
 }

 /* Left side lines */
 .line-left-inner {
     left: 20px;
     top: 25px;
     bottom: 0px;
 }

 .line-left-outer {
     left: 5px;
     top: 150px;
     bottom: 0px;
 }

 /* Right side lines */
 .line-right-inner {
     right: 20px;
     top: 60px;
     bottom: 0px;
 }

 .line-right-outer {
     right: 5px;
     top: 250px;
     bottom: 20px;
 }

 /* Bottom horizontal crossing lines */
 .line-bottom-left {
     left: 0;
     bottom: 0;
     width: 180px;
 }

 .line-bottom-right {
     right: 0;
     bottom: 0;
     width: 180px;
 }

 /* Hide lines on smaller screens to prevent overflow/clutter */
 @media (max-width: 1150px) {

     .decor-line-v,
     .decor-line-h {
         display: none;
     }

     .page-wrapper {
         padding: 0;
     }
 }

 /* ══════════════════════════════════
                   OUTER BORDER FRAME
           ══════════════════════════════════ */
 .stories-section {
     position: relative;
     z-index: 1;
     /* Keep above the decorative lines */
     background: #fff;
     border: 1px solid #d9d9d9;
     border-radius: 20px;
     padding: 36px 32px 40px;
     width: 100%;
 }

 /* ── Heading ── */
 .stories-section__heading {
     font-family: 'Poppins', sans-serif;
     font-size: 45px;
     font-weight: 700;
     color: #1a1a1a;
     letter-spacing: 0.2px;
     margin-bottom: 10px;
 }

 /* ── Subtitle ── */
 .stories-section__sub {
     text-align: center;
     font-size: 15px;
     color: #555;
     line-height: 1.6;
     margin-bottom: 40px;
 }

 .stories-section__sub strong {
     font-weight: 700;
     color: #1a1a1a;
 }

 /* ══════════════════════════════════
                   3-COLUMN CARD GRID
           ══════════════════════════════════ */
 .stories-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
 }

 /* ── Individual project card ── */
 .stories-card {
     display: flex;
     flex-direction: column;
     background: transparent;
 }

 /* ── Card image ── */
 .stories-card__img {
     width: 100%;
     height: 220px;
     object-fit: cover;
     border-radius: 16px;
     display: block;
 }

 /* ── Card title ── */
 .stories-card__title {
     font-size: 18px;
     font-weight: 700;
     color: #333;
     margin-top: 18px;
     margin-bottom: 8px;
     line-height: 1.3;
 }

 /* ── Card description ── */
 .stories-card__desc {
     font-size: 14px;
     color: #666;
     line-height: 1.5;
     margin-bottom: 24px;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 /* View More Button */

 .stories-card__btn {
     width: 180px;
     height: 38px;

     background: #ffffff;
     border: 2px solid #ffffff;
     border-radius: 50px;

     padding: 4px;

     display: inline-flex;
     align-items: center;
     justify-content: space-between;
     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

     text-decoration: none;
     cursor: pointer;
     gap: 5px;

     margin-top: auto;

     transition: transform 0.4s ease,
         box-shadow 0.4s ease;
 }

 .stories-card__btn-text {
     flex: 1;
     height: 100%;

     background: #F3CF8E;
     border-radius: 40px;

     display: flex;
     align-items: center;
     justify-content: center;

     font-family: 'Poppins', sans-serif;
     font-size: 14px;
     font-weight: 400;
     color: #000;

     transition: background-color 0.4s ease,
         color 0.4s ease;
 }

 .stories-card__btn-icon {
     width: 15px;
     height: 15px;

     background: #ffffff;
     border-radius: 50%;

     display: flex;
     align-items: center;
     justify-content: center;

     flex-shrink: 0;

     transition: transform 0.4s ease;
 }

 .stories-card__btn-icon svg {
     width: 18px;
     height: 18px;

     fill: none;
     stroke: #F3CF8E;
     stroke-width: 2;
     stroke-linecap: round;
     stroke-linejoin: round;

     transition: transform 0.4s ease,
         stroke 0.4s ease;
 }

 /* Hover */

 .stories-card__btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
 }

 .stories-card__btn:hover .stories-card__btn-text {
     background: #000;
     color: #fff;
 }

 .stories-card__btn:hover .stories-card__btn-icon {
     /* transform: translateX(-4px); */
 }

 .stories-card__btn:hover .stories-card__btn-icon svg {
     transform: rotate(-45deg);
     stroke: #000000;
 }

 /* ── Responsive ── */
 @media (max-width: 900px) {
     .stories-grid {
         grid-template-columns: 1fr 1fr;
         gap: 20px;
     }
 }

 @media (max-width: 600px) {
     .stories-grid {
         grid-template-columns: 1fr;
     }

     .stories-section {
         padding: 30px 20px;
     }
 }

 /* ══════════════════════════════════
                   SECTION LAYOUT
           ══════════════════════════════════ */
 .testimonial-section {
     position: relative;
     max-width: 1400px;
     margin: 0 auto;
     padding: 20px 40px;
 }

 /* ── Header Area ── */
 .section-header {
     font-family: 'Poppins', sans-serif;
     font-size: 45px;
     font-weight: 700;
     color: #1a1a1a;
     letter-spacing: 0.2px;
     margin-bottom: 10px;
     text-align: center;
 }

 .section-header h2 {
     font-size: 28px;
     font-weight: 800;
     color: #1a1a1a;
     margin-bottom: 12px;
     letter-spacing: -0.5px;
 }

 .section-header p {
     font-size: 15px;
     color: #555;
     line-height: 1.6;
 }

 .section-header p strong {
     font-weight: 700;
     color: #1a1a1a;
 }

 /* ══════════════════════════════════
                   CAROUSEL & CARDS
           ══════════════════════════════════ */

 /* Container for the slick slider */
 .testimonial-slider {
     margin: 0 -10px;
     /* Offset for slide padding */
 }

 /* Wrapper for spacing between slick slides */
 .slick-slide {
     padding: 0 10px;
 }

 .testimonial-slider .slick-track {
     display: flex !important;
 }

 .testimonial-slider .slick-slide {
     height: inherit !important;
 }

 .testimonial-slider .slick-slide>div {
     height: 100%;
 }

 .testimonial-card {
     background: #efcb8d;
     border-radius: 20px;
     padding: 30px;
     min-height: 280px;

     display: flex;
     flex-direction: column;
 }

 .card-avatar {
     width: 65px;
     height: 65px;
     margin-bottom: 25px;
 }

 .card-divider {
     margin-top: auto;
     margin-bottom: 20px;
 }

 .card-footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .client-name {
     font-size: 14px;
     font-weight: 700;
     color: #1a1a1a;
 }

 /* ── Star Ratings ── */
 .stars {
     display: flex;
     gap: 2px;
 }

 .stars svg {
     width: 14px;
     height: 14px;
     fill: #1a1a1a;
     /* Dark stars matching text */
 }