@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=Cinzel:wght@400..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Saira:ital,wght@0,100..900;1,100..900&display=swap');


/* ============================================
           BASE SETUP & PERFORMANCE OPTIMIZATION
           ============================================ */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     color: #FDF6E8;
     overflow-x: hidden;
     background: #F7F5F2;
 }

 /* GPU Acceleration for animated elements */
 .hero-content>*,
 .benefit-item,
 .solution-card,
 .testi-card {
     will-change: transform, opacity;
 }

 /* ============================================
           HERO SECTION - Fixed Parallax Container
           ============================================ */
 .hero-container {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100vh;
     z-index: 1;
     overflow: hidden;
 }

 .hero {
     height: 100vh;
     width: 100%;
     background-size: cover;
     background-position: center;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     position: relative;
     transition: background-image 1.2s ease-in-out;
 }

 /* dark overlay */
 .hero::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
     z-index: 1;
 }

 .hero-content {
     position: relative;
     z-index: 2;
     color: #fff;
 }




 /* ============================================
           BUTTONS
           ============================================ */
 .btn {
     text-decoration: none;
     padding: 10px 24px;
     border-radius: 20px;
     font-size: 0.9rem;
     font-weight: 500;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
     cursor: pointer;
     display: inline-block;
 }

 .btn-primary {
     background: rgb(10, 56, 124);
     color: white;
 }

 .btn-primary::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
     transition: left 0.5s;
 }

 .btn-primary:hover::before {
     left: 100%;
 }

 .btn-outline {
     border: 1px solid rgba(255, 255, 255, 0.4);
     color: #fff;
     background: transparent;
 }

 .btn-outline:hover {
     background: rgba(255, 255, 255, 0.1);
     border-color: #fff;
 }

 .btn-cta {
     background: #FDF6E8;
     color: #1a1a1a;
     padding: 14px 30px;
     font-weight: 600;
     margin-top: 30px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
     font-family: "Roboto", sans-serif;
 }

 .btn:hover {
     transform: translateY(-2px);
 }

 /* ============================================
           HERO CONTENT
           ============================================ */
 .hero-content {
     z-index: 2;
     max-width: 800px;
     padding: 0 20px;
 }

 .tag {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(5px);
     padding: 8px 20px;
     border-radius: 50px;
     font-size: 0.85rem;
     margin-bottom: 25px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     opacity: 0;
     transform: translateY(40px);
 }

 .dot {
     width: 6px;
     height: 6px;
     background: #fff;
     border-radius: 50%;
     animation: pulse 2s ease-in-out infinite;
     font-family: "Roboto", sans-serif;
 }

 @keyframes pulse {

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

     50% {
         opacity: 0.5;
         transform: scale(1.2);
     }
 }

 h1 {
     /* font-family: "Saira", sans-serif; */
     font-family: "Saira", sans-serif;
     font-size: 5rem;
     line-height: 1.1;
     color: #95a9dd;
     margin-bottom: 20px;
     font-weight: 400;
     opacity: 0;
     transform: translateY(40px);
 }

 p {
     font-size: 1rem;
     line-height: 1.6;
     color: rgba(255, 255, 255, 0.8);
     max-width: 600px;
     margin: 0 auto;
     font-family: "Roboto", sans-serif;
 }

 .hero-content>p {
     opacity: 0;
     transform: translateY(40px);
 }

 .giant-text {
     position: absolute;
     bottom: -60px;
     left: 0;
     width: 100%;
     text-align: center;
     font-size: 18vw;
     font-weight: 700;
     text-transform: capitalize;
     z-index: 1;
     pointer-events: none;
     background: linear-gradient(to bottom, #EFCEAD 30%, transparent);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     opacity: 0.8;
     line-height: 1;
 }

  @media (max-width: 320px) {

    .hero-content {
        padding: 0 12px;
    }

    .tag {
        font-size: 0.65rem;
        padding: 6px 14px;
        margin-bottom: 15px;
    }

    h1 {
        font-size: 2rem;
        line-height: 1.2;
        margin-bottom: 12px;
    }

    p {
        font-size: 0.8rem;
        line-height: 1.5;
    }

    .btn-cta {
        padding: 10px 18px;
        font-size: 0.75rem;
        margin-top: 20px;
    }
}
@media (max-width: 480px) {

    .hero-content {
        padding: 0 15px;
    }

    .tag {
        font-size: 0.7rem;
        padding: 6px 16px;
    }

    h1 {
        font-size: 2.4rem;
        line-height: 1.2;
    }

    p {
        font-size: 0.85rem;
    }

    .btn-cta {
        padding: 11px 22px;
        font-size: 0.8rem;
    }
}
@media (max-width: 576px) {

    h1 {
        font-size: 2.8rem;
    }

    p {
        font-size: 0.9rem;
    }

    .tag {
        font-size: 0.75rem;
    }
}
@media (max-width: 768px) {

    .hero-container {
        position: relative; /* FIXED hata diya mobile ke liye */
        height: 100vh;
    }

    .hero {
        height: 100vh;
    }

    h1 {
        font-size: 3.2rem;
    }

    p {
        font-size: 0.95rem;
    }
}
@media (max-width: 992px) {

    h1 {
        font-size: 3.8rem;
    }

    .hero-content {
        max-width: 700px;
    }
}
@media screen and (max-width: 1152px) {

    h1 {
        font-size: 4.2rem;
    }
}
@media screen and (max-width: 1440px) {

    h1 {
        font-size: 4.6rem;
    }
}


 /* ============================================
           MAIN CONTENT WRAPPER
           ============================================ */
 .main-content-wrapper {
     position: relative;
     z-index: 10;
     margin-top: 100vh;
     background: #F7F5F2;
     box-shadow: 0 -50px 50px rgba(0, 0, 0, 0.2);
 }

 /* ============================================
           BENEFITS SECTION
           ============================================ */
 .benefits {
     background: linear-gradient(to bottom, #F7F5F2, #FBECE0);
     color: #2a2a2a;
     padding: 100px 50px;
 }

 .container {
     max-width: 1200px;
     margin: 0 auto;
 }

 .benefits-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     margin-bottom: 60px;
     gap: 50px;
     opacity: 0;
 }

 .benefits-header h2 {
     font-family: "Saira", sans-serif;
     font-size: 3.5rem;
     line-height: 1.1;
     font-weight: 400;
     color: #1a1a1a;
     flex: 1;
 }

 .benefits-desc {
     flex: 1;
     display: flex;
     align-items: flex-end;
 }

 .benefits-desc p {
     color: #555;
     max-width: 500px;
     font-family: "Roboto", sans-serif;
 }

 .divider {
     border: none;
     height: 1px;
     background: rgba(0, 0, 0, 0.1);
     margin-bottom: 60px;
 }

 .benefits-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 60px 40px;
 }

 .benefit-item {
     opacity: 0;
     transform: translateY(60px);
 }

 .benefit-item h3 {
     font-size: 1.5rem;
     font-weight: 500;
     margin-bottom: 15px;
     color: #1a1a1a;
     transition: color 0.3s;
     font-family: "Saira", sans-serif;
 }

 .benefit-item:hover h3 {
     color: rgb(10, 56, 124);
 }

 .benefit-item p {
     color: #555;
     font-family: "Roboto", sans-serif;
 }

 @media (max-width: 320px) {

    .benefits {
        padding: 50px 15px;
    }

    .benefits-header {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 30px;
    }

    .benefits-header h2 {
        font-size: 1.9rem;
        line-height: 1.2;
    }

    .benefits-desc p {
        font-size: 0.8rem;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .benefit-item h3 {
        font-size: 1.1rem;
    }

    .benefit-item p {
        font-size: 0.8rem;
    }
}
@media (max-width: 480px) {

    .benefits {
        padding: 60px 20px;
    }

    .benefits-header {
        flex-direction: column;
        gap: 25px;
    }

    .benefits-header h2 {
        font-size: 2.2rem;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .benefit-item h3 {
        font-size: 1.2rem;
    }

    .benefit-item p {
        font-size: 0.85rem;
    }
}
@media (max-width: 576px) {

    .benefits-header h2 {
        font-size: 2.5rem;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .benefit-item h3 {
        font-size: 1.25rem;
    }
}
@media (max-width: 768px) {

    .benefits {
        padding: 70px 30px;
    }

    .benefits-header {
        flex-direction: column;
        gap: 30px;
    }

    .benefits-header h2 {
        font-size: 2.8rem;
    }

    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 30px;
    }

    .main-content-wrapper {
     position: relative;
     z-index: 10;
     margin-top: 0px;
     background: #F7F5F2;
     box-shadow: 0 -50px 50px rgba(0, 0, 0, 0.2);
 }
}
@media (max-width: 992px) {

    .benefits-header h2 {
        font-size: 3rem;
    }

    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 50px 40px;
    }
}
@media screen and (max-width: 1152px) {

    .benefits-header h2 {
        font-size: 3.2rem;
    }

    .benefits-grid {
        gap: 50px 35px;
    }
}

@media screen and (max-width: 1440px) {

    .benefits-header h2 {
        font-size: 3rem;
    }
}

 /* ============================================
           SOLUTIONS SECTION
           ============================================ */
 .solutions {
     position: relative;
     background: url('public/cherry_1.jpg') fixed center/cover;
     padding: 100px 50px;
     color: #fff;
 }

 .solutions-overlay {
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, 0.4);
     z-index: 1;
 }

 .solutions .container {
     position: relative;
     z-index: 2;
 }

 .solutions-header {
     text-align: center;
     margin-bottom: 60px;
     opacity: 0;
 }

 .solutions-header h2 {
     font-family: "Saira", sans-serif;
     font-size: 3.5rem;
     margin-bottom: 20px;
     font-weight: 400;
 }

 .solutions-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
 }

 .solution-card {
     background: #FBECE0;
     color: #1a1a1a;
     padding: 30px;
     height: 400px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     cursor: pointer;
     opacity: 0;
     transform: translateY(60px) scale(0.95);
     position: relative;
     overflow: hidden;
 }

 .solution-card h3 {
     font-size: 1.5rem;
     font-weight: 500;
     line-height: 1.3;
     font-family: "Saira", sans-serif;
 }

 .card-content p {
     color: #555;
     margin-bottom: 30px;
 }

 .btn-explore {
     display: inline-block;
     text-decoration: none;
     color: #1a1a1a;
     border: 1px solid #1a1a1a;
     padding: 10px 20px;
     font-size: 1rem;
     font-weight: 600;
     transition: all 0.3s;
     font-family: "Roboto", sans-serif;
 }

 .solution-card:hover {
     background: rgba(255, 255, 255, 0.2);
     backdrop-filter: blur(10px);
     color: #fff;
     transform: translateY(-10px) scale(1);
     border: 1px solid rgba(255, 255, 255, 0.3);
 }

 .solution-card:hover p,
 .solution-card:hover h3 {
     color: rgba(255, 255, 255, 0.9);
 }

 .solution-card:hover .btn-explore {
     border-color: #fff;
     background: #fff;
     color: #1a1a1a;
 }

 /* ===============================
   RESPONSIVE MEDIA QUERIES
   =============================== */

/* Extra small devices */
@media (max-width: 320px) {

    .solutions {
        padding: 50px 15px;
        background-attachment: scroll;
    }

    .solutions-header h2 {
        font-size: 1.8rem;
    }

    .solutions-header p {
        font-size: 0.8rem;
    }

    .solutions-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .solution-card {
        height: auto;
        padding: 20px;
    }

    .solution-card h3 {
        font-size: 1.1rem;
    }

    .btn-explore {
        font-size: 0.8rem;
    }
}

/* Small devices */
@media (max-width: 480px) {

    .solutions {
        padding: 60px 20px;
        background-attachment: scroll;
    }

    .solutions-header h2 {
        font-size: 2.2rem;
    }

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

    .solution-card {
        height: auto;
    }
}

/* Medium devices */
@media (max-width: 576px) {

    .solutions-header h2 {
        font-size: 2.5rem;
    }

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

/* Large phones */
@media (max-width: 768px) {

    .solutions {
        padding: 70px 30px;
        background-attachment: scroll;
    }

    .solutions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .solution-card {
        height: 280px;
    }
}

/* Tablets */
@media (max-width: 992px) {

    .solutions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 35px;
    }

    .solutions-header h2 {
        font-size: 3rem;
    }
}

/* Small laptop */
@media screen and (max-width: 1152px) {

    .solutions-header h2 {
        font-size: 3.2rem;
    }
}

/* Large desktop */
@media screen and (max-width: 1440px) {

    .solutions-header h2 {
        font-size: 3.4rem;
    }
}


 /* ============================================
           ECO SECTION
           ============================================ */
 .eco-tech {
     background: #F7F5F2;
     padding: 100px 50px;
     color: #2a2a2a;
 }

 .eco-content-grid {
     display: flex;
     justify-content: space-between;
     align-items: stretch;
 }

 .eco-left,
 .eco-right {
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     opacity: 0;
 }

 .eco-title {
     font-family: "Saira", sans-serif;
     font-size: 3.5rem;
     font-weight: 400;
     margin-bottom: 50px;
     line-height: 1.1;
 }

 .eco-main-desc {
     font-size: 1.1rem;
     color: #555;
     max-width: 500px;
     margin-bottom: 50px;
     align-self: flex-end;
     text-align: right;
 }

 .stat-block {
     margin-top: auto;
 }

 .stat-number {
     font-family: "Saira", sans-serif;
     font-size: 5rem;
     font-weight: 400;
     margin-bottom: 20px;
 }

 .stat-title {
     font-size: 1.5rem;
     font-weight: 500;
     margin-bottom: 15px;
     font-family: "Saira", sans-serif;
 }

 .stat-desc {
     color: #555;
     max-width: 350px;
 }

 .eco-divider {
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 0 60px;
     opacity: 0;
 }

 .divider-line {
     width: 1px;
     background: rgba(0, 0, 0, 0.1);
     flex-grow: 1;
 }

 .divider-icon {
     background: #2a2a2a;
     color: #F7F5F2;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 20px 0;
     animation: rotate 20s linear infinite;
 }

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

 @media (max-width: 320px) {

    .eco-tech {
        padding: 50px 15px;
    }

    .eco-content-grid {
        flex-direction: column;
        gap: 40px;
    }

    .eco-title {
        font-size: 1.9rem;
        margin-bottom: 25px;
        text-align: center;
    }

    .eco-left,
    .eco-right {
        align-items: center;
        text-align: center;
    }

    .stat-number {
        font-size: 3rem;
    }

    .stat-title {
        font-size: 1.1rem;
    }

    .stat-desc {
        font-size: 0.8rem;
        max-width: 100%;
    }

    .eco-divider {
        flex-direction: row;
        padding: 0;
    }

    .divider-line {
        height: 1px;
        width: 100%;
    }
}

@media (max-width: 480px) {

    .eco-tech {
        padding: 60px 20px;
    }

    .eco-content-grid {
        flex-direction: column;
        gap: 45px;
    }

    .eco-title {
        font-size: 2.2rem;
        text-align: center;
    }

    .stat-number {
        font-size: 3.5rem;
    }

    .stat-desc {
        text-align: center;
        max-width: 100%;
    }

    .eco-divider {
        flex-direction: row;
    }

    .divider-line {
        height: 1px;
        width: 100%;
    }
}

@media (max-width: 576px) {

    .eco-title {
        font-size: 2.5rem;
    }

    .stat-number {
        font-size: 4rem;
    }

    .eco-content-grid {
        flex-direction: column;
        gap: 50px;
    }
}
@media (max-width: 768px) {

    .eco-tech {
        padding: 70px 30px;
    }

    .eco-content-grid {
        flex-direction: column;
        gap: 60px;
    }

    .eco-left,
    .eco-right {
        align-items: center;
        text-align: center;
    }

    .eco-divider {
        flex-direction: row;
        padding: 0;
    }

    .divider-line {
        height: 1px;
        width: 100%;
    }
}
@media (max-width: 992px) {

    .eco-title {
        font-size: 3rem;
    }

    .stat-number {
        font-size: 4.5rem;
    }

    .eco-divider {
        padding: 0 30px;
    }
}
@media screen and (max-width: 1152px) {

    .eco-title {
        font-size: 3.2rem;
    }

    .stat-number {
        font-size: 4.8rem;
    }
}
@media screen and (max-width: 1440px) {

    .eco-title {
        font-size: 3.4rem;
    }
}


 /* ============================================
           NEWS SECTION - HORIZONTAL SCROLL
           ============================================ */
 .process-section {
     background: #F0EFEA;
     width: 100%;
     height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     overflow: hidden;
     position: relative;
     color: #1a1a1a;
 }

 .process-container {
     width: 90%;
     max-width: 1400px;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     margin-bottom: 50px;
 }

 .process-header-left h2 {
     font-family: "Saira", sans-serif;
     font-size: 4rem;
     line-height: 1.1;
     font-weight: 400;
     color: #1a1a1a;
 }

 .process-header-right {
     flex: 0.5;
     padding-top: 15px;
 }

 .process-header-right p {
     font-size: 1rem;
     line-height: 1.6;
     color: #555;
     margin-bottom: 20px;
     font-family: "Roboto", sans-serif;
 }

 .scroll-hint {
     font-weight: 700;
     font-size: 0.9rem;
     color: #1a1a1a;
     font-family: "Roboto", sans-serif;
     text-decoration: none;
 }

 /* The sliding track */
 .cards-wrapper {
     width: 100%;
     padding-left: 5vw;
 }

 .cards-track {
     display: flex;
     gap: 40px;
     width: max-content;
 }

 /* Card Design */
 .process-card {
     width: 400px;
     height: 500px;
     padding: 40px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     cursor: pointer;
     background-color: #FDF6E8;
     color: #1a1a1a;
     border-bottom: 12px solid #1a1a1a;
     transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
 }

 .process-card h3 {
     font-family: "Saira", sans-serif;
     font-size: 2.2rem;
     font-weight: 400;
 }

 .card-bottom p {
     font-size: 1rem;
     line-height: 1.6;
     margin-bottom: 30px;
     color: #444;
     transition: color 0.4s;
 }

 .tags {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
 }

 .process-card .tag {
     padding: 8px 24px;
     border-radius: 50px;
     font-size: 0.85rem;
     font-weight: 500;
     border: 1px solid #ccc;
     color: #555;
     transition: all 0.4s;
     background: transparent;
     opacity: 1;
     transform: none;
     margin-bottom: 0;
 }

 /* Hover Interaction */
 .process-card:hover {
     background-color: #1a1a1a;
     color: #ffffff;
     border-bottom-color: #1a1a1a;
     transform: translateY(-10px);
 }

 .process-card:hover .card-bottom p {
     color: rgba(255, 255, 255, 0.8);
 }

 .process-card:hover .tag {
     border-color: rgba(255, 255, 255, 0.3);
     color: #fff;
     background: rgba(255, 255, 255, 0.1);
 }

 @media (max-width: 992px) {

  .process-section {
    height: auto;
    padding: 80px 0;
  }

  .process-container {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
  }

  .process-header-left h2 {
    font-size: 3rem;
  }

  .process-header-right {
    flex: 1;
    padding-top: 0;
  }

  .cards-wrapper {
    padding-left: 5vw;
  }
}
@media (max-width: 768px) {

  .process-section {
    height: auto;
    padding: 60px 0;
  }

  .process-header-left h2 {
    font-size: 2.5rem;
  }

  /* Enable horizontal scroll */
  .cards-wrapper {
    padding: 0 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cards-track {
    flex-direction: row;   /* column hata diya */
    gap: 20px;
    width: max-content;
  }

  .process-card {
    min-width: 280px;   /* Mobile width */
    height: auto;
    padding: 24px;
    flex-shrink: 0;     /* Shrink hone se roke */
  }

  .process-card h3 {
    font-size: 1.6rem;
  }
}

@media (max-width: 576px) {

  .process-header-left h2 {
    font-size: 2.2rem;
  }

  .process-header-right p {
    font-size: 0.95rem;
  }

  .process-card {
    padding: 24px;
  }

  .process-card h3 {
    font-size: 1.6rem;
  }

  .card-bottom p {
    font-size: 0.95rem;
  }
}
@media (max-width: 480px) {

  .process-header-left h2 {
    font-size: 2rem;
  }

  .process-card {
    padding: 22px;
  }

  .process-card h3 {
    font-size: 1.4rem;
  }

  .card-bottom p {
    font-size: 0.9rem;
  }

  .process-card .tag {
    font-size: 0.75rem;
    padding: 6px 18px;
  }
}
@media (max-width: 320px) {

  .process-header-left h2 {
    font-size: 1.8rem;
  }

  .process-card {
    padding: 18px;
  }

  .process-card h3 {
    font-size: 1.25rem;
  }

  .card-bottom p {
    font-size: 0.85rem;
  }
}



/* Our Alliance Section */

.heading {
  text-align: center;
  margin-bottom: 0;
}

.heading span {
  color: rgb(10, 56, 124);
  font-size: 65px;
  font-family: "Saira", sans-serif;
}

.bold {
  font-weight: 700;
  font-family: "Saira", sans-serif;
}

/* ------------------------------- */

.img-div {
  margin-top: 0;
  position: relative;
}

.img-div img {
  top: 0;
  height: 500px;
  width: 100%;
}
/* ------------------------------- */
.styling {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  display: flex;
  justify-content: space-between;
  color: white;
  text-align: center;
  z-index: 2;
  font-family: "Saira", sans-serif;
}

/* ------------------------------- */
.styling-2 {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translateX(-50%);
  width: 55%;
  display: flex;
  justify-content: space-between;
  color: white;
  text-align: center;
  /* z-index: 2; */
  font-family: "Saira", sans-serif;
}

.styling div,
.styling-2 div {
  font-size: 28px;
  font-weight: 600;
}

.styling span,
.styling-2 span {
  display: block;
  font-size: 16px;
  font-weight: bold;
  opacity: 0.8;
  font-family: "Roboto", sans-serif;
}

i {
  font-size: 30px;
  margin-bottom: 8px;
}


/* ================= Scroll Animation ================= */

.reveal {
  opacity: 0;
  transform: translateY(80px);
  transition: all 1s ease-out;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Thoda delay for inner content */
.reveal .heading {
  transition-delay: 0.1s;
  background-color: white;
}

.reveal .img-div {
  transition-delay: 0.3s;
}


.flag img {
  width: 32px;
  height: 22px;
  object-fit: cover;
  border-radius: 3px;
  margin-bottom: 8px;
}

@media (max-width: 320px) {

  .heading span {
    font-size: 22px;
  }

  .img-div img {
    height: 60vh;
    object-fit: cover;
  }

  .styling,
  .styling-2 {
    width: 95%;
    flex-direction: column;
    gap: 14px;
    text-align: center;
  }

  .styling { top: 20%; }
  .styling-2 { top: 48%; }

  .styling div,
  .styling-2 div {
    font-size: 14px;
  }

  .styling span,
  .styling-2 span {
    font-size: 11px;
  }

  .flag img {
    width: 24px;
    height: 16px;
  }
}
@media (max-width: 480px) {

  .heading span {
    font-size: 26px;
  }

  .styling,
  .styling-2 {
    width: 92%;
    flex-direction: column;
    gap: 18px;
  }

  .styling { top: 22%; }
  .styling-2 { top: 46%; }

  .styling div,
  .styling-2 div {
    font-size: 17px;
  }

  .styling span,
  .styling-2 span {
    font-size: 12px;
  }
}
@media (max-width: 576px) {

  .heading span {
    font-size: 30px;
  }

  .styling,
  .styling-2 {
    width: 90%;
    flex-direction: column;
    gap: 20px;
  }

  .styling { top: 24%; }
  .styling-2 { top: 45%; }

  .styling div,
  .styling-2 div {
    font-size: 18px;
  }
}
@media (max-width: 768px) {

  .heading span {
    font-size: 36px;
  }


   .img-div img {
    object-fit: cover;
  }
  .img-div {
    display: flex;
    flex-direction: column;
  }

  .img-div img {
  top: 0;
  height: 600px;
  width: 100%;
}

    .styling {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    flex-direction: column;
    gap: 16px;
    text-align: center;
    z-index: 2;
  }

  .styling-2 {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    flex-direction: column;
    gap: 16px;
    text-align: center;
    z-index: 2;
  }

  .styling div,
  .styling-2 div {
    font-size: 16px;
  }

  .styling span,
  .styling-2 span {
    font-size: 12px;
  }

  .flag img {
    width: 24px;
    height: 16px;
  }
}
@media (max-width: 992px) {

  .heading span {
    font-size: 48px;
  }

  .styling {
    width: 60%;
    top: 18%;
  }

  .styling-2 {
    width: 75%;
  }

}
@media screen and (max-width: 1152px) {

  .heading span {
    font-size: 56px;
  }

  .styling {
    width: 50%;
  }

  .styling-2 {
    width: 65%;
  }
}
@media screen and (max-width: 1440px) {

  .heading span {
    font-size: 60px;
  }
}

 

 /* =========================================
           CARD DESIGN & HOVER EFFECTS (UPDATED)
           ========================================= */
 .swiper {
     padding: 20px 20px 60px 20px !important;
 }

 .testi-card {
     background: #FDF6E8;
     /* Default Light Color */
     padding: 40px;
     height: auto;
     min-height: 400px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     cursor: pointer;

     /* SMOOTH TRANSITION FOR COLOR CHANGE */
     transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
 }

 /* --- HOVER STATE (THE COLOR CHANGE) --- */
 .testi-card:hover {
     background: #1a1a1a;
     /* Turns Dark */
     color: #ffffff;
     /* Text turns White */
     transform: translateY(-10px);
     /* Lifts up */
 }

 .card-top {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     margin-bottom: 25px;
 }

 .profile-img {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid transparent;
     transition: border-color 0.3s;
 }

 /* Add a ring to image on hover */
 .testi-card:hover .profile-img {
     border-color: rgba(255, 255, 255, 0.3);
 }

 .quote-icon {
     font-family: "Saira", sans-serif;
     font-size: 4rem;
     line-height: 1;
     color: #1a1a1a;
     opacity: 0.2;
     margin-top: -10px;
     transition: color 0.4s;
 }

 /* Quote Icon turns white on hover */
 .testi-card:hover .quote-icon {
     color: #ffffff;
     opacity: 0.3;
 }

 .quote-text {
     font-size: 1.05rem;
     line-height: 1.6;
     color: #333;
     margin-bottom: 30px;
     flex-grow: 1;
     transition: color 0.4s;
 }

 /* Text turns light grey on hover */
 .testi-card:hover .quote-text {
     color: rgba(255, 255, 255, 0.9);
 }

 .author-info h5 {
     font-family: 'DM Sans', sans-serif;
     font-size: 1.1rem;
     font-weight: 700;
     color: #1a1a1a;
     margin-bottom: 5px;
     transition: color 0.4s;
 }

 /* Name turns white on hover */
 .testi-card:hover .author-info h5 {
     color: #ffffff;
 }

 .author-info span {
     font-size: 0.9rem;
     color: #666;
     font-weight: 400;
     transition: color 0.4s;
 }

 /* Title turns grey on hover */
 .testi-card:hover .author-info span {
     color: rgba(255, 255, 255, 0.6);
 }



 /* ============================================
           RESPONSIVE DESIGN
           ============================================ */
 @media (max-width: 1024px) {
     .solutions-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .benefits-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 900px) {
     h1 {
         font-size: 3rem;
     }

     .giant-text {
         font-size: 25vw;
     }

     .benefits-header,
     .eco-content-grid,
     .footer-layout {
         flex-direction: column;
     }

     .impact-card {
         flex-direction: column;
     }

     .impact-image {
         height: 300px;
         min-height: auto;
     }

     .eco-main-desc {
         text-align: left;
         align-self: flex-start;
     }

     /* Responsive Process Section */
     .process-container {
         flex-direction: column;
         gap: 30px;
     }

     .process-card {
         width: 85vw;
         height: 450px;
     }

     /* Responsive Testimonials */
     .testi-header {
         flex-direction: column;
         gap: 30px;
         align-items: flex-start;
     }

     .testi-header h2 {
         font-size: 3rem;
     }
 }

 @media (max-width: 768px) {
     header {
         padding: 20px;
     }

     .nav-buttons .btn-outline {
         display: none;
     }

     .benefits-grid,
     .solutions-grid {
         grid-template-columns: 1fr;
     }

     .benefits,
     .solutions,
     .eco-tech,
     .testimonials-section {
         padding: 60px 20px;
     }

     .footer-layout {
         padding: 0 20px 60px;
     }

     .copyright-bar {
         padding: 30px 20px;
     }

     .copy-content {
         flex-direction: column;
         gap: 20px;
         text-align: center;
     }
 }



 /* Brands Section */

 .partners-section {
     padding: 100px 20px;
     font-family: 'Noto Sans JP', sans-serif;
     position: relative;
     overflow: hidden;
     background: white url("https://www.transparenttextures.com/patterns/cubes.png");
     background-size: cover;
     background-attachment: fixed;
     color: #333;
 }

 .partners-header {
     margin-bottom: 60px;
 }

 .partners-header h2 {
     font-size: 3rem;
     font-weight: 600;
     margin-bottom: 40px;
     /* border-bottom: 1px solid #333; */
     padding-bottom: 10px;
     padding: 0px 40px;
     font-family: "Saira", sans-serif;
 }

 .partners-slider-container {
     max-width: 1400px;
     margin: auto;
     overflow: hidden;
     position: relative;
 }

 .clients-slider {
     display: flex;
     gap: 22px;
     align-items: center;
     white-space: nowrap;
     will-change: transform;
 }

 .clients-slider img {
     max-height: 150px;
     object-fit: contain;
     background: rgba(0, 0, 0, 0.03);
     padding: 16px 28px;
     border-radius: 16px;
     border: 1px solid rgba(0, 0, 0, 0.08);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     transition: all 0.45s ease;
 }

 .clients-slider img:hover {
     transform: scale(1.15);
     box-shadow: 0 0 25px rgba(0, 188, 212, 0.3), 0 0 40px rgba(255, 123, 0, 0.25);
 }

 /* Button */
 .partners-btn {
     text-align: center;
     margin-top: 40px;
     font-family: "Roboto", sans-serif;
 }

 .partners-btn button {
     /* padding: 14px 32px;
  font-size: 1.2rem;
  border: none;
  border-radius: 25px;
  background-color: #b71c1c;
  color: white;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: 0.3s; */

     display: inline-flex;
     align-items: center;
     gap: 8px;
     background-color: rgb(10, 56, 124);
     color: white;
     font-family: "Roboto", sans-serif;
     font-weight: 500;
     padding: 12px 30px;
     border-radius: 2px;
     text-decoration: none;
     font-size: 1.1rem;
     transition: background 0.3s ease;
 }

 .partners-btn button:hover {
     background-color: #6d57fa;
 }

 /* Popup */
 .popup-overlay {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.8);
     z-index: 9999;
     overflow-y: auto;
     padding: 60px 20px;
 }

 .popup-box {
     max-width: 1200px;
     margin: auto;
     background: white;
     border-radius: 12px;
     padding: 40px;
     position: relative;
 }

 .close-btn {
     position: absolute;
     top: 20px;
     right: 20px;
     background: #4739a0;
     border: none;
     color: white;
     padding: 10px 18px;
     font-family: "Roboto", sans-serif;
     border-radius: 6px;
     font-weight: bold;
     cursor: pointer;
 }

 .popup-box h3 {
     text-align: center;
     font-size: 2rem;
     font-weight: 700;
     margin-bottom: 30px;
     color: #444;
 }

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

 .popup-grid img {
     width: 100%;
     max-height: 120px;
     object-fit: contain;
     border: 1px solid #eee;
     padding: 10px;
     border-radius: 8px;
     background: #f9f9f9;
     transition: transform 0.3s;
 }

 .popup-grid img:hover {
     transform: scale(1.1);
 }

 /* Responsive */
 @media (max-width: 768px) {
     .clients-slider {
         gap: 16px;
     }

     .clients-slider img {
         max-height: 60px;
         padding: 10px 16px;
     }

     .close-btn {
         font-size: 14px;
         padding: 6px 12px;
         top: 15px;
         right: 15px;
     }

     .partners-header h2 {
         font-size: 2.8rem;
         font-weight: 600;
         margin-top: -40px;
         /* border-bottom: 1px solid #333; */
         padding-bottom: 10px;
         padding: 0px 40px;
     }
 }

 .popup-overlay {
     display: none;
 }

 .popup-overlay.active {
     display: block;
 }