* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #0A1F44;
    color: #ffffff;
    overflow-x: hidden;
}
/* Hero Section */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #06152e;
}

/* Video Background Container */
.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.video-background video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 1.8s ease-in-out;
    opacity: 0;
}

.video-background video.active {
    opacity: 1;
}

/* Overlay with dark gradient */
.overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
    circle at 20% 30%, 
    rgba(10, 31, 68, 0.5), 
    rgba(2, 12, 29, 0.7)
    );
    z-index: 2;
    backdrop-filter: brightness(1) contrast(1.05);
}

/* abstract electric lines & circuit pattern */
.circuit-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" opacity="0.08"><path fill="none" stroke="%2300e0ff" stroke-width="1.2" d="M0 200 L200 200 L250 150 L400 150 L450 200 L600 200 M800 100 L800 300 L850 350 L1000 350 M300 500 L300 600 L350 650 L500 650 M950 400 L950 550 L900 600 L800 600 M100 700 L250 700 L300 650 M1100 200 L1050 150 L950 150 L900 200" /><circle cx="200" cy="200" r="4" fill="%2300e0ff" /><circle cx="450" cy="200" r="4" fill="%2300e0ff" /><circle cx="800" cy="100" r="3" fill="%2300e0ff" /><circle cx="900" cy="600" r="3" fill="%2300e0ff" /><path d="M500 750 L550 700 L700 700 L750 750" stroke="%2300aaff" stroke-width="1" /></svg>'); */
    background-repeat: repeat;
    background-size: 380px;
    z-index: 3;
    pointer-events: none;
    opacity: 0.3;
}

/* glowing cable effect (floating) */
.glowing-cable {
    position: absolute;
    bottom: 12%;
    right: 5%;
    width: 280px;
    height: auto;
    z-index: 3;
    opacity: 0.35;
    pointer-events: none;
    animation: floatCable 7s infinite alternate ease-in-out;
}

.glowing-cable svg {
    filter: drop-shadow(0 0 6px #00e0ff);
}

@keyframes floatCable {
    0% { transform: translateY(0px) rotate(0deg); opacity: 0.3; }
    100% { transform: translateY(-18px) rotate(2deg); opacity: 0.55; }
}

/* hero content */
.hero-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0 3rem;
    top: 0;
}

.hero-text {
    max-width: 780px;
    animation: fadeUp 0.9s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
}

.hero-text h1 {
    font-size: 4.2rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1.2rem;
    background: linear-gradient(125deg, #ffffff, #b6e4ff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    letter-spacing: -0.02em;
}

.hero-text p {
    font-size: 1.2rem;
    font-weight: 400;
    color: #e2ecff;
    margin-bottom: 2.2rem;
    max-width: 620px;
    line-height: 1.5;
}

.btn-group {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.btn-primary {
    background: white;
    border: none;
    padding: 1rem 2.2rem;
    border-radius: 48px;
    font-weight: 700;
    font-size: 1rem;
    color: #0A1F44;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 14px rgba(0, 119, 255, 0.4);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary i {
    font-size: 1.1rem;
}

.btn-primary:hover {
    box-shadow: 0 12px 28px rgba(0, 200, 255, 0.5);
    background: #0ee6eead;
    color: white;
}

.btn-secondary {
    background: transparent;
    border: 1.5px solid #00ccff;
    padding: 1rem 2.2rem;
    border-radius: 48px;
    font-weight: 600;
    font-size: 1rem;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-secondary:hover {
    background: rgba(0, 204, 255, 0.12);
    border: 2px solid #ffffff;
}

/* scroll indicator */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    animation: bounce 2s infinite;
}

.scroll-indicator span {
    font-size: 0.8rem;
    letter-spacing: 2px;
    font-weight: 400;
    color: #cceeff;
}

.scroll-indicator .mouse {
    width: 26px;
    height: 42px;
    border: 2px solid #aad4ff;
    border-radius: 20px;
    position: relative;
}

.scroll-indicator .mouse::before {
    content: '';
    width: 4px;
    height: 8px;
    background: #00e0ff;
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    border-radius: 2px;
    animation: scrollWheel 1.8s infinite;
}

@keyframes scrollWheel {
    0% { opacity: 1; transform: translateX(-50%) translateY(0); }
    80% { opacity: 0; transform: translateX(-50%) translateY(12px); }
    100% { opacity: 0; transform: translateX(-50%) translateY(12px); }
}

@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

@keyframes fadeUp {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* floating particles / electric dots */
.particle-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    background: radial-gradient(circle, #00eaff, transparent);
    border-radius: 50%;
    opacity: 0.2;
    animation: floatParticle 12s infinite linear;
}

@keyframes floatParticle {
    0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
    20% { opacity: 0.4; }
    80% { opacity: 0.3; }
    100% { transform: translateY(-20vh) rotate(360deg); opacity: 0; }
}



/* subtle animation for header on scroll */
.scrolled {
    background: rgba(4, 18, 40, 0.92);
    backdrop-filter: blur(16px);
    border-bottom-color: #00e0ff;
}
  .btn-glow i, .btn-primary i, .btn-secondary i { margin-right: 6px; }
  .hero-text h1, .hero-text p { text-shadow: 0 2px 5px rgba(0,0,0,0.2); }

/* Products section container - full width, clean white background */
.products-section {
    background: #FFFFFF;
    width: 100%;
    padding: 5rem 2rem 8rem 2rem;
    position: relative;
}

.container {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

/* SECTION HEADER */
.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-header .section-title {
    font-size: 3.2rem;
    font-weight: 800;
    font-family: 'Montserrat', 'Inter', sans-serif;
    background: linear-gradient(135deg, #0A1F44 0%, #1B3A6B 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
}

.section-header .section-title::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 3px;
    background: linear-gradient(90deg, #00c3ff, #0077ff);
    border-radius: 4px;
}

.section-header .section-subtitle {
    font-size: 1.25rem;
    color: #4a5b7a;
    font-weight: 400;
    max-width: 620px;
    margin: 1.5rem auto 0;
    line-height: 1.5;
}

/* STICKY CARDS WRAPPER */
.cards-sticky-wrapper {
    position: relative;
    margin-top: 3rem;
    min-height: 200vh; /* gives enough scroll space for stacking effect */
    z-index: 0;
}

/* Individual product card - DARK BLUE THEME (#0A1F44) with subtle gradient */
.product-card {
    display: flex;
    background: linear-gradient(125deg, #0A1F44 0%, #102c54 100%);
    border-radius: 28px;
    box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    margin-bottom: 2rem;
    position: sticky;
    height: 500px;
    top: 80px; /* sticky offset: cards start sticking at 80px from top */
    z-index: 1;
    border: 1px solid rgba(0, 200, 255, 0.2);
}

/* Different z-index for stacking order: first card lower, later cards higher when overlapped */
.card-1 { z-index: 1 !important; }
.card-2 { z-index: 2 !important; }
.card-3 { z-index: 3 !important; }
.card-4 { z-index: 4 !important; }

/* When card becomes active (hover & while overlapping) - scale & glow effect */
.product-card.active-stack {
    box-shadow: 0 35px 55px -15px rgba(0, 160, 255, 0.45), 0 0 0 1px rgba(0, 200, 255, 0.3);
}

/* LEFT SIDE (Image Section) */
.card-image {
    flex: 1;
    min-width: 800px;
    position: relative;
    overflow: hidden;
}

/* Fix image sizing */
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Zoom effect */
.product-card:hover .card-image img {
    transform: scale(1.06);
}


/* Right content side */
.card-content {
    flex: 1;
    padding: 2.5rem 2.8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #ffffff;
}

/* PRODUCT NAME ON IMAGE (Overlay) */
.product-name {
    position: absolute;
    top: 20px;
    left: 20px;        
    right: auto;      

    display: inline-block;  
    width: fit-content;      /* ✅ fit to content */

    font-size: 1.8rem;
    font-weight: 700;
    color: #0A1F44;

    padding: 12px 16px;
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
}

.product-description {
    font-size: 1rem;
    line-height: 1.6;
    color: #cfdfef;
    margin-bottom: 2rem;
    font-weight: 400;
    max-width: 90%;
}

/* CTA Button: electric blue glow effect */
.btn-details {
    background: transparent;
    border: 1.8px solid #00ccff;
    padding: 0.85rem 2rem;
    border-radius: 60px;
    font-weight: 600;
    font-size: 0.95rem;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    backdrop-filter: blur(2px);
    letter-spacing: 0.3px;
}

.btn-details i {
    font-size: 0.9rem;
    transition: transform 0.25s;
}

.btn-details:hover {
    background: linear-gradient(95deg, #00aaff, #00e0ff);
    border-color: transparent;
    color: #0A1F44;
    box-shadow: 0 8px 20px rgba(0, 160, 255, 0.5);
    transform: translateY(-2px);
}

.btn-details:hover i {
    transform: translateX(6px);
}

/* Optional parallax effect for image on scroll - subtle */
@keyframes subtleFloat {
    0% { transform: translateY(0); }
    100% { transform: translateY(-8px); }
}

/* Responsive design */
@media (max-width: 992px) {
    .product-card {
    flex-direction: column;
    top: 60px;
    }
    .card-content {
    padding: 2rem;
    }
    .product-name {
    font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    .products-section {
    padding: 3rem 1.2rem 6rem 1.2rem;
    }
    .product-card {
    top: 70px;
    }
    .card-image {
    min-height: 260px;
    }
    .product-description {
    max-width: 100%;
    }
}

/* fade-up animation on scroll (reveal) */
.product-card {
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s ease, box-shadow 0.3s, scale 0.3s;
}

.product-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* additional glow border accent */
.product-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 28px;
    padding: 2px;
    background: linear-gradient(125deg, rgba(0, 224, 255, 0.2), rgba(0, 119, 255, 0.05));
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* subtle industrial icon decoration on cards */
.card-content .glow-icon {
    position: absolute;
    bottom: 20px;
    right: 25px;
    opacity: 0.15;
    font-size: 3.5rem;
    color: #00e0ff;
    pointer-events: none;
}

/* Scroll behavior: smooth stacking and scaling active */
.sticky-active {
    box-shadow: 0 35px 55px -12px rgba(0, 160, 255, 0.6);
}

/* ========== 1. OUR COMMITMENT SECTION ========== */
.commitment-section {
    background: #FFFFFF;
    padding: 5rem 2rem;
}

/* HEADER (TOP TITLE) */
.commitment-header {
    max-width: 700px;
    margin-bottom: 3rem;
}

.commitment-header h2 {
    font-size: 2.8rem;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(135deg, #0A1F44, #1B3A6B);
    -webkit-background-clip: text;
    color: transparent;
    margin-top: 0.5rem;
}


.split-commitment {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3rem;
}
.commitment-text {
    flex: 1.1;
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    padding: 0.5rem 1.2rem;
    border-radius: 999px;

    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;

    color: #0A1F44;

    /* Water gradient background */
    background: linear-gradient(
        135deg,
        rgba(0, 204, 255, 0.25),
        rgba(0, 119, 255, 0.15),
        rgba(0, 204, 255, 0.2)
    );

    /* Glass / water feel */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Soft border glow */
    border: 1px solid rgba(0, 170, 255, 0.35);

    /* Subtle depth */
    box-shadow: 
        0 4px 12px rgba(0, 119, 255, 0.15),
        inset 0 1px 0 rgba(255,255,255,0.4);

    position: relative;
    overflow: hidden;
}

/* ICON STYLE */
.section-tag i {
    color: #0051ff;
    font-size: 0.8rem;
}

/* OPTIONAL: flowing shine effect */
.section-tag::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.4),
        transparent
    );
    transform: skewX(-25deg);
    transition: 0.6s;
}

.section-tag:hover::after {
    left: 120%;
}

.commitment-text .section-tag {
    display: inline-block;
    background: rgba(10, 31, 68, 0.06);
    color: #0A1F44;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.3rem 1rem;
    border-radius: 40px;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    border-left: 3px solid #00ccff;
}
.commitment-text h2 {
    font-size: 2.6rem;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(135deg, #0A1F44, #1B3A6B);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    margin-bottom: 1rem;
}
.commitment-text .description {
    font-size: 1rem;
    line-height: 1.6;
    color: #4a5b7a;
    margin-bottom: 1.8rem;
}
/* LIST WRAPPER */
.commitment-list {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    margin-top: 1.5rem;
}

/* EACH ITEM (CARD STYLE) */
.commit-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;

    padding: 1.2rem 1.4rem;
    border-radius: 18px;

    background: rgba(10, 31, 68, 0.03);
    border: 1px solid rgba(0, 119, 255, 0.12);

    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}


.commit-item:hover::before {
    opacity: 1;
}

/* ICON */
.commit-icon {
    min-width: 52px;
    height: 52px;

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

    border-radius: 14px;

    background: linear-gradient(135deg, #e6f4ff, #d6ecff);
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.05);

    transition: all 0.3s ease;
}

/* ICON STYLE */
.commit-icon i {
    font-size: 1.3rem;
    color: #0077ff;
    transition: color 0.3s;
}

/* TEXT CONTENT */
.commit-text h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #0A1F44;
    margin-bottom: 0.25rem;
}

.commit-text p {
    font-size: 0.88rem;
    color: #5f6f8f;
    line-height: 1.5;
}
/* RIGHT SIDE */
.commitment-image {
    flex: 1;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 25px 35px -15px rgba(0, 0, 0, 0.2);
}

.commitment-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.commitment-image:hover img {
    transform: scale(1.03);
}

/* ========== 2. TRUSTED BY (MARQUEE LOGOS) ========== */
.trusted-section {
    background: #F8FAFF;
    padding: 4rem 2rem;
    overflow: hidden;
}
.section-header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.section-header h3 {
    font-size: 2rem;
    font-weight: 700;
    color: #0A1F44;
}
.divider {
    width: 70px;
    height: 3px;
    background: linear-gradient(90deg, #00ccff, #0077ff);
    margin: 0.8rem auto 0;
    border-radius: 4px;
}
.logo-marquee {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
}
.logo-track {
    display: flex;
    animation: scrollLogos 35s linear infinite;
    gap: 4rem;
    padding: 1rem 0;
}
.logo-track img {
    height: 60px;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s;
    object-fit: contain;
}
.logo-track img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.08);
}
@keyframes scrollLogos {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.logo-marquee:hover .logo-track {
    animation-play-state: paused;
}

/* ========== 3. STRONG CALL TO ACTION (CTA) ========== */
.cta-home-section {
    background: linear-gradient(135deg, #0A1F44 0%, #0d2a55 100%);
    padding: 5rem 2rem;
    position: relative;
    overflow: hidden;
}
.cta-home-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('');
    background-repeat: repeat;
    background-size: 380px;
    pointer-events: none;
}
.cta-container {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.cta-container h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}
.cta-container p {
    font-size: 1.1rem;
    color: #cae3ff;
    margin-bottom: 2rem;
}
.cta-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}
.btn-primary-glow {
    background: linear-gradient(95deg, #0077ff, #00ccff);
    border: none;
    padding: 1rem 2.2rem;
    border-radius: 60px;
    font-weight: 700;
    font-size: 1rem;
    color: #0A1F44;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(0, 119, 255, 0.3);
}
.btn-primary-glow:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 28px rgba(0, 200, 255, 0.5);
    background: linear-gradient(95deg, #1a86ff, #22d5ff);
    color: #ffffff;
}
.btn-secondary-outline {
    background: transparent;
    border: 1.5px solid #00ccff;
    padding: 1rem 2.2rem;
    border-radius: 60px;
    font-weight: 600;
    font-size: 1rem;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-secondary-outline:hover {
    background: rgba(0, 204, 255, 0.12);
    border-color: #3ae0ff;
    box-shadow: 0 0 14px rgba(0, 204, 255, 0.4);
    transform: translateY(-2px);
}

/* Scroll reveal base */
.reveal-left {
    transform: translateX(-35px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.9, 0.4, 1.1), transform 0.8s ease;
}
.reveal-right {
    transform: translateX(35px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.9, 0.4, 1.1), transform 0.8s ease;
}
.reveal-up {
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-left.active, .reveal-right.active, .reveal-up.active {
    transform: translateX(0) translateY(0);
}

/* Stagger for bullet items */
.commit-item:nth-child(1) { transition-delay: 0.05s; }
.commit-item:nth-child(2) { transition-delay: 0.15s; }
.commit-item:nth-child(3) { transition-delay: 0.25s; }
.commit-item:nth-child(4) { transition-delay: 0.35s; }
/* extra hover effects */
.commit-icon {
    transition: transform 0.2s, background 0.2s;
}
.commit-item:hover .commit-icon {
    background: rgba(0, 119, 255, 0.2);
    transform: scale(1.05);
}

/* Responsive */
@media (max-width: 1024px) {
    .hero-text h1, .section-header .section-title { 
        font-size: 3rem; 
    }
    .hero-text p, .section-header .section-subtitle { 
        font-size: 1.1rem; 
    }

    .product-name {
        font-size: 1.2rem;
    }

    .split-commitment {
        gap: 2rem;
    }
    .commitment-header h2 {
        font-size: 2.4rem;
    }

    .split-commitment {
        flex-direction: column-reverse;
        gap: 2rem;
    }
    .commitment-image {
        width: 100%;
        max-height: 400px;
    }
    .commitment-text {
        width: 100%;
    }

    .logo-track {
        gap: 3rem;
        padding: 0.8rem 0;
    }
    .logo-track img {
        height: 55px;
    }

    .card-image {
        width: 100%;
        height: 300px; /* fixed height for consistency */
    }

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

    .card-content {
        padding: 1.8rem;
        text-align: center;
    }

    .cta-home-section {
        padding: 4rem 2rem;
    }

    .cta-container h2 {
        font-size: 2.2rem;
    }

    .cta-container p {
        font-size: 1rem;
    }

    .cta-buttons {
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .hero-content { 
        padding: 0 1.5rem; 
    }

    .hero-text h1, .section-header .section-title {
        font-size: 2.5rem;
    }

    .hero-text p, .section-header .section-subtitle{
        font-size: 1rem;
    }

    .btn-group { 
        gap: 1rem; 
    }

    .card-image {
        height: 240px;
    }

    .card-content {
        padding: 1.5rem;
    }

    .card-content h3 {
        font-size: 1.3rem;
    }

    .card-content p {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .product-name {
        font-size: 1rem;
    }

    .product-description {
        font-size: 0.8rem;
    }

    .glowing-cable { 
        width: 160px; 
        bottom: 6%; 
        right: 2%; 
    }

    .commitment-header h2 {
        font-size: 2rem;
    }
    .commitment-text .description {
        font-size: 0.95rem;
    }
    .commit-text h4 {
        font-size: 0.95rem;
    }
    .commit-text p {
        font-size: 0.85rem;
    }
    .commit-icon {
        min-width: 46px;
        height: 46px;
    }

    .logo-track {
        gap: 2.5rem;
    }
    .logo-track img {
        height: 50px;
    }

    .cta-home-section {
        padding: 3rem 1.5rem;
    }

    .cta-container h2 {
        font-size: 1.7rem;
    }

    .cta-container p {
        font-size: 0.9rem;
    }

    .hero-content .cta-buttons {
        margin: auto;
        justify-content: center;
    }

    .cta-buttons a {
        width: 100%;
        text-align: center;
        font-size: 0.95rem;
    }

}

@media (max-width: 480px) {
    .hero-content{
        width: 100%;
    }
    .hero-text h1, .section-header .section-title, .commitment-header h2{
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }
    .hero-text p, .section-header .section-subtitle{
        font-size: 0.9rem;
    }

    .product-name {
        font-size: 0.8rem;
    }

    .commitment-section, .products-section {
        padding: 3rem 1rem;
    }
    
    .product-description {
        font-size: 0.7rem;
    }

    .commitment-header h2 {
        font-size: 1.8rem;
    }
    .commitment-text .description {
        font-size: 0.9rem;
    }
    .commit-text h4 {
        font-size: 0.9rem;
    }
    .commit-text p {
        font-size: 0.8rem;
    }
    .commit-icon {
        min-width: 40px;
        height: 40px;
    }
    .section-tag {
        font-size: 0.7rem;
        padding: 0.3rem 0.8rem;
    }

    .trusted-section {
        padding: 3rem 1.5rem;
    }
    .section-header h3 {
        font-size: 1.7rem;
    }
    .divider {
        width: 50px;
    }
    .logo-track {
        gap: 2rem;
    }
    .logo-track img {
        height: 45px;
    }

    .card-image {
        height: 200px;
    }

    .card-content {
        padding: 1.2rem;
    }

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

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

    .cta-home-section {
        padding: 2.5rem 1rem;
    }

    .cta-container h2 {
        font-size: 1.5rem;
    }

    .cta-container p {
        font-size: 0.85rem;
    }

    .hero-content .cta-buttons {
        margin: 10px auto;
        justify-content: center;
    }

    .cta-buttons a {
        width: 50%;
        font-size: 0.9rem;
        padding: 0.7rem 1rem;
        text-align: center;
        padding-left: 50px;
    }
}