/* style.css */
html {
    scroll-behavior: smooth;
}

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

body{
    background:#0b0b0b;
    font-family:'Poppins', sans-serif;
}

/* ================= HEADER ================= */

.header{
    width:100%;
    height:95px;

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

    padding:0 6%;

    position:sticky;
    top:0;
    z-index:1000;

    background:rgb(255, 255, 255);

    border-bottom:2px solid #ff0000;

    backdrop-filter:blur(12px);

    box-shadow:
    0 0 25px rgba(255,0,0,0.12);
}

/* ================= LOGO AREA ================= */

.logo-area{
    display:flex;
    align-items:center;
    gap:18px;
}

.logo{
    width:72px;
    object-fit:contain;
    transition:0.4s ease;
}

.logo:hover{
    transform:scale(1.05);
}

/* ================= BRAND TEXT ================= */

.brand-text h1{
    font-family:'Bebas Neue', sans-serif;
    font-size:2.4rem;

    letter-spacing:3px;
    color:#cc0000;

    line-height:1;
}

.brand-text p{
    color:#000000;

    font-size:0.72rem;

    letter-spacing:2px;

    margin-top:4px;

    font-weight:500;
}

/* ================= NAVBAR ================= */

.navbar{
    display:flex;
    gap:38px;
}

.navbar a{
    text-decoration:none;

    color:#000000;

    font-size:0.95rem;

    font-weight:500;

    position:relative;

    transition:0.3s ease;
}

/* UNDERLINE EFFECT */

.navbar a::after{
    content:'';

    position:absolute;

    left:0;
    bottom:-8px;

    width:0%;

    height:2px;

    background:#cc0000;

    transition:0.3s ease;
}

.navbar a:hover{
    color:#cc0000;
}

.navbar a:hover::after{
    width:100%;
}

/* ================= BUTTON ================= */

.shop-btn{
    padding:12px 26px;

    border:none;

    background:#FF0000;

    color:#000000;

    font-weight:600;

    border-radius:50px;

    cursor:pointer;

    transition:0.3s ease;

    font-family:'Poppins', sans-serif;

    text-decoration: none;
}

.shop-btn:hover{
    background:#CC0000;
    color:white;

    transform:translateY(-2px);
}

/* ================= RIGHT SIDE ================= */

.header-right{
    display:flex;
    align-items:center;
    gap:20px;
}

/* ================= MOBILE MENU ================= */

.menu-toggle{
    display:none;

    width:48px;
    height:48px;

    position:relative;

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

    cursor:pointer;

    z-index:1001;
}

/* ALL LINES */

.menu-toggle span{
    position:absolute;

    width:26px;
    height:2px;

    background:#000;

    border-radius:20px;

    transition:
    transform 0.35s cubic-bezier(.68,-0.6,.32,1.6),
    opacity 0.25s ease,
    background 0.3s ease;
}

/* TOP */

.menu-toggle span:nth-child(1){
    transform:translateY(-8px);
}

/* MIDDLE */

.menu-toggle span:nth-child(2){
    opacity:1;
}

/* BOTTOM */

.menu-toggle span:nth-child(3){
    transform:translateY(8px);
}

/* =========================
   ACTIVE STATE
========================= */

.menu-toggle.active span:nth-child(1){

    transform:
    rotate(45deg);
}

.menu-toggle.active span:nth-child(2){

    opacity:0;
}

.menu-toggle.active span:nth-child(3){

    transform:
    rotate(-45deg);
}

/* OPTIONAL HOVER */

.menu-toggle:hover span{
    background:#ff0000;
}
/* ================= RESPONSIVE ================= */

@media(max-width:950px){

    /* =========================
       MOBILE NAVBAR
    ========================= */

    .navbar{

        position:absolute;

        top:95px;
        left:50%;

        transform:
        translateX(-50%)
        translateY(-20px);

        width:92%;

        background:rgba(255,255,255,0.96);

        backdrop-filter:blur(14px);

        border-radius:22px;

        flex-direction:column;

        align-items:center;

        padding:35px 0;

        gap:28px;

        box-shadow:
        0 20px 60px rgba(0,0,0,0.12);

        opacity:0;

        visibility:hidden;

        pointer-events:none;

        transition:
        opacity 0.35s ease,
        transform 0.4s cubic-bezier(.22,1,.36,1),
        visibility 0.35s ease;

        z-index:999;
    }

    /* ACTIVE */

    .navbar.active{

        opacity:1;

        visibility:visible;

        pointer-events:auto;

        transform:
        translateX(-50%)
        translateY(0);
    }

    /* NAV LINKS */

    .navbar a{

        font-size:1rem;

        color:#111;

        font-weight:600;

        transform:translateY(10px);

        opacity:0;

        transition:
        0.35s ease;
    }

    /* STAGGER EFFECT */

    .navbar.active a{

        opacity:1;

        transform:translateY(0);
    }

    .navbar.active a:nth-child(1){
        transition-delay:0.08s;
    }

    .navbar.active a:nth-child(2){
        transition-delay:0.12s;
    }

    .navbar.active a:nth-child(3){
        transition-delay:0.16s;
    }

    .navbar.active a:nth-child(4){
        transition-delay:0.20s;
    }

    .navbar.active a:nth-child(5){
        transition-delay:0.24s;
    }

    .navbar.active a:nth-child(6){
        transition-delay:0.28s;
    }

    /* SHOW MENU BUTTON */

    .menu-toggle{
        display:flex;
    }

    /* HIDE BUTTON */

    .shop-btn{
        display:none;
    }

    /* RESPONSIVE LOGO */

    .brand-text h1{
        font-size:2rem;
    }

    .brand-text p{
        font-size:0.62rem;
    }

    .logo{
        width:62px;
    }

}
/* ================= HERO SECTION ================= */

.hero{
    position:relative;

    width:100%;
    height:100vh;

    overflow:hidden;

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

/* VIDEO */

.hero-video{
    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:1;
}

/* OVERLAY */

.hero-overlay{
    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:
    linear-gradient(
        to right,
        rgba(0,0,0,0.85),
        rgba(0,0,0,0.45)
    );

    z-index:2;
}

/* CONTENT */

.hero-content{
    position:relative;

    z-index:3;

    width:100%;
    max-width:1300px;

    padding:0 8%;

    color:white;
}

/* SUB HEADING */

.hero-content h3{
    color:#ad0404;

    letter-spacing:4px;

    margin-bottom:20px;

    font-size:1rem;

    font-weight:600;
}

/* MAIN HEADING */

.hero-content h1{
    font-family:'Bebas Neue', sans-serif;

    font-size:7rem;

    line-height:0.95;

    letter-spacing:3px;

    margin-bottom:25px;
}

.hero-content h1 span{
    color:#ff1e1e;
}

/* PARAGRAPH */

.hero-content p{
    width:600px;
    max-width:100%;

    color:#e4e4e4;

    line-height:1.8;

    font-size:1.05rem;

    margin-bottom:40px;
}

/* BUTTONS */

.hero-buttons{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

/* PRIMARY BUTTON */

.primary-btn{
    padding:15px 34px;

    background:#ff1e1e;

    color:white;

    text-decoration:none;

    border-radius:50px;

    font-weight:600;

    transition:0.35s ease;
}

.primary-btn:hover{
    background:white;
    color:black;

    transform:translateY(-3px);
}

/* SECONDARY BUTTON */

.secondary-btn{
    padding:15px 34px;

    border:2px solid white;

    color:white;

    text-decoration:none;

    border-radius:50px;

    font-weight:600;

    transition:0.35s ease;
}

.secondary-btn:hover{
    background:white;
    color:black;
}

/* SCROLL DOWN */

.scroll-down{
    position:absolute;

    bottom:35px;
    left:50%;

    transform:translateX(-50%);

    z-index:3;
}

.scroll-down span{
    display:block;

    width:28px;
    height:48px;

    border:2px solid white;

    border-radius:30px;

    position:relative;
}

.scroll-down span::before{
    content:'';

    position:absolute;

    top:8px;
    left:50%;

    width:6px;
    height:6px;

    background:#ff1e1e;

    border-radius:50%;

    transform:translateX(-50%);

    animation:scrollAnim 1.5s infinite;
}

/* ANIMATION */

@keyframes scrollAnim{

    0%{
        opacity:0;
        top:8px;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:0;
        top:24px;
    }

}

/* RESPONSIVE */

@media(max-width:950px){

    .hero-content{
        text-align:center;
    }

    .hero-content h1{
        font-size:4.5rem;
    }

    .hero-content p{
        margin:auto;
        margin-bottom:35px;
    }

    .hero-buttons{
        justify-content:center;
    }

}

@media(max-width:600px){

    .hero-content h1{
        font-size:3.2rem;
    }

    .hero-content h3{
        font-size:0.8rem;
        letter-spacing:3px;
    }

    .hero-content p{
        font-size:0.95rem;
    }

}

/* =========================
   PRODUCTS SECTION
========================= */

.products-section{

    padding:120px 7%;

    background:#ffffff;
}

/* =========================
   TOP AREA
========================= */

.section-top{

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

    margin-bottom:70px;

    gap:30px;

    flex-wrap:wrap;
}

/* SMALL TITLE */

.section-title span{

    color:#ff0000;

    font-size:0.9rem;

    font-weight:700;

    letter-spacing:0.18em;

    display:block;

    margin-bottom:16px;
}

/* MAIN TITLE */

.section-title h2{

    font-size:4.2rem;

    line-height:0.95;

    color:#000000;

    font-weight:800;

    letter-spacing:-0.04em;

    font-family:'Space Grotesk', sans-serif;
}

/* VIEW BUTTON */

.view-all-btn{

    height:54px;

    padding:0 28px;

    border-radius:999px;

    background:#000000;

    color:#ffffff;

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

    text-decoration:none;

    font-weight:600;

    transition:0.35s ease;
}

.view-all-btn:hover{

    background:#ff0000;

    transform:translateY(-3px);
}

/* =========================
   GRID
========================= */

.products-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:28px;
}

/* =========================
   CARD
========================= */

.product-card{

    position:relative;

    background:#f5f5f5;

    border-radius:30px;

    overflow:hidden;

    transition:
    transform 0.45s cubic-bezier(.22,1,.36,1),
    box-shadow 0.4s ease;

    cursor:pointer;
}

/* HOVER */

.product-card:hover{

    transform:
    translateY(-12px);

    box-shadow:
    0 25px 60px rgba(0,0,0,0.12);
}

/* =========================
   IMAGE AREA
========================= */

.product-image{

    height:300px;

    background:
    linear-gradient(
        180deg,
        #ffffff,
        #ececec
    );

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

    overflow:hidden;
}

.product-image img{

    width:82%;

    transition:0.45s ease;
}

/* IMAGE ANIMATION */

.product-card:hover img{

    transform:
    scale(1.06)
    rotate(-2deg);
}

/* =========================
   CONTENT
========================= */

.product-content{

    padding:28px;
}

.product-content h3{

    font-size:1.45rem;

    color:#000;

    margin-bottom:14px;

    font-weight:700;
}

.product-content p{

    color:#666;

    line-height:1.7;

    font-size:0.96rem;

    margin-bottom:22px;
}

/* LINK */

.product-content a{

    text-decoration:none;

    color:#ff0000;

    font-weight:700;

    transition:0.3s ease;
}

.product-content a:hover{

    letter-spacing:0.03em;
}

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

@media(max-width:1200px){

    .products-grid{

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

}

@media(max-width:700px){

    .products-section{

        padding:90px 5%;
    }

    .section-title h2{

        font-size:2.8rem;
    }

    .products-grid{

        grid-template-columns:1fr;
    }

    .product-image{

        height:260px;
    }

}

/* =========================
   BRAND STORY
========================= */

.brand-story{

    padding:130px 7%;

    background:#000000;

    display:grid;

    grid-template-columns:
    1.1fr 1fr;

    align-items:center;

    gap:90px;

    overflow:hidden;
}

/* =========================
   IMAGE AREA
========================= */

.story-image{

    position:relative;
}

.story-image img{

    width:100%;

    border-radius:34px;

    object-fit:cover;

    display:block;
}

/* =========================
   FLOATING BADGE
========================= */

.floating-badge{

    position:absolute;

    bottom:40px;
    right:-30px;

    width:220px;

    padding:28px;

    border-radius:28px;

    background:
    linear-gradient(
        135deg,
        #ff0000,
        #cc0000
    );

    box-shadow:
    0 25px 60px rgba(255,0,0,0.25);

    backdrop-filter:blur(10px);
}

.floating-badge h3{

    font-size:3rem;

    color:#ffffff;

    line-height:1;

    margin-bottom:10px;

    font-family:'Space Grotesk', sans-serif;
}

.floating-badge p{

    color:#ffffff;

    font-size:0.95rem;

    line-height:1.5;
}

/* =========================
   CONTENT
========================= */

.story-content span{

    display:inline-block;

    color:#ff0000;

    font-size:0.9rem;

    font-weight:700;

    letter-spacing:0.18em;

    margin-bottom:22px;
}

/* TITLE */

.story-content h2{

    font-size:5rem;

    line-height:0.92;

    letter-spacing:-0.05em;

    color:#ffffff;

    margin-bottom:30px;

    font-family:'Space Grotesk', sans-serif;
}

/* PARAGRAPH */

.story-content p{

    color:#b5b5b5;

    font-size:1rem;

    line-height:1.9;

    margin-bottom:24px;

    max-width:620px;
}

/* =========================
   STATS
========================= */

.story-stats{

    display:flex;

    flex-wrap:wrap;

    gap:50px;

    margin-top:45px;

    margin-bottom:50px;
}

.stat h3{

    font-size:2rem;

    color:#ffffff;

    margin-bottom:10px;

    font-family:'Space Grotesk', sans-serif;
}

.stat p{

    margin:0;

    color:#8e8e8e;

    font-size:0.92rem;
}

/* =========================
   BUTTON
========================= */

.story-btn{

    display:inline-flex;

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

    height:56px;

    padding:0 30px;

    border-radius:999px;

    background:#ffffff;

    color:#000000;

    text-decoration:none;

    font-weight:700;

    transition:0.35s ease;
}

.story-btn:hover{

    background:#ff0000;

    color:#ffffff;

    transform:translateY(-3px);
}

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

@media(max-width:1100px){

    .brand-story{

        grid-template-columns:1fr;

        gap:70px;
    }

    .story-content h2{

        font-size:4rem;
    }

}

@media(max-width:700px){

    .brand-story{

        padding:90px 5%;
    }

    .story-content h2{

        font-size:2.8rem;
    }

    .floating-badge{

        width:180px;

        right:10px;

        bottom:10px;

        padding:22px;
    }

    .floating-badge h3{

        font-size:2.2rem;
    }

    .story-stats{

        gap:30px;
    }

}

/* =========================
   INFRASTRUCTURE SECTION
========================= */

.infrastructure-section{

    padding:130px 7%;

    background:#ffffff;
}

/* =========================
   TOP
========================= */

.infra-top{

    max-width:850px;

    margin-bottom:80px;
}

.infra-top span{

    display:inline-block;

    color:#ff0000;

    font-size:0.9rem;

    font-weight:700;

    letter-spacing:0.18em;

    margin-bottom:20px;
}

.infra-top h2{

    font-size:5rem;

    line-height:0.92;

    letter-spacing:-0.05em;

    color:#000000;

    margin-bottom:28px;

    font-family:'Space Grotesk', sans-serif;
}

.infra-top p{

    color:#5f5f5f;

    line-height:1.9;

    font-size:1rem;

    max-width:720px;
}

/* =========================
   GRID
========================= */

.infra-grid{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:24px;

    margin-bottom:90px;
}

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

.infra-card{

    position:relative;

    overflow:hidden;

    border-radius:30px;

    min-height:340px;

    background:#f5f5f5;

    cursor:pointer;
}

/* LARGE CARD */

.large-card{

    grid-column:span 2;

    min-height:520px;
}

/* WIDE CARD */

.wide-card{

    grid-column:span 2;
}

/* IMAGE */

.infra-card img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
    transform 0.7s cubic-bezier(.22,1,.36,1);
}

/* OVERLAY */

.infra-overlay{

    position:absolute;

    left:0;
    bottom:0;

    width:100%;

    padding:34px;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,0.88),
        rgba(0,0,0,0)
    );

    color:#ffffff;
}

/* TITLE */

.infra-overlay h3{

    font-size:1.7rem;

    margin-bottom:14px;

    font-family:'Space Grotesk', sans-serif;
}

/* TEXT */

.infra-overlay p{

    color:#d5d5d5;

    line-height:1.7;

    max-width:500px;
}

/* HOVER EFFECT */

.infra-card:hover img{

    transform:scale(1.08);
}

/* =========================
   STATS
========================= */

.infra-stats{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:24px;
}

/* STAT CARD */

.infra-stat{

    background:#f5f5f5;

    border-radius:24px;

    padding:38px 30px;

    transition:0.35s ease;
}

/* HOVER */

.infra-stat:hover{

    background:#000000;

    transform:translateY(-6px);
}

.infra-stat:hover h3,
.infra-stat:hover p{

    color:#ffffff;
}

/* NUMBER */

.infra-stat h3{

    font-size:2.5rem;

    color:#000000;

    margin-bottom:12px;

    font-family:'Space Grotesk', sans-serif;

    transition:0.35s ease;
}

/* TEXT */

.infra-stat p{

    color:#666666;

    transition:0.35s ease;
}

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

@media(max-width:1100px){

    .infra-grid{

        grid-template-columns:1fr 1fr;
    }

    .large-card,
    .wide-card{

        grid-column:span 2;
    }

    .infra-stats{

        grid-template-columns:1fr 1fr;
    }

    .infra-top h2{

        font-size:4rem;
    }

}

@media(max-width:700px){

    .infrastructure-section{

        padding:90px 5%;
    }

    .infra-grid{

        grid-template-columns:1fr;
    }

    .large-card,
    .wide-card{

        grid-column:span 1;
    }

    .infra-top h2{

        font-size:2.8rem;
    }

    .infra-card{

        min-height:300px;
    }

    .large-card{

        min-height:420px;
    }

    .infra-stats{

        grid-template-columns:1fr;
    }

}

/* =========================
   TESTIMONIAL SECTION
========================= */

.testimonial-section{

    padding:130px 0;

    background:#000000;

    overflow:hidden;
}

/* =========================
   TOP
========================= */

.testimonial-top{

    text-align:center;

    margin-bottom:70px;

    padding:0 7%;
}

.testimonial-top span{

    display:inline-block;

    color:#ff0000;

    font-size:0.9rem;

    font-weight:700;

    letter-spacing:0.18em;

    margin-bottom:20px;
}

.testimonial-top h2{

    font-size:5rem;

    line-height:0.95;

    color:#ffffff;

    margin-bottom:28px;

    letter-spacing:-0.05em;

    font-family:'Space Grotesk', sans-serif;
}

.testimonial-top p{

    color:#9c9c9c;

    max-width:700px;

    margin:auto;

    line-height:1.9;
}

/* =========================
   SLIDER
========================= */

.testimonial-slider{

    width:100%;

    overflow:hidden;

    position:relative;

    margin-bottom:28px;
}

/* TRACK */

.testimonial-track{

    display:flex;

    gap:28px;

    width:max-content;

    animation:
    scrollLeft 35s linear infinite;
}

/* REVERSE */

.reverse .testimonial-track{

    animation:
    scrollRight 35s linear infinite;
}

/* =========================
   CARD
========================= */

.testimonial-card{

    width:420px;

    padding:34px;

    border-radius:30px;

    background:#f5f5f5;

    flex-shrink:0;

    transition:0.35s ease;
}

/* DARK CARD */

.testimonial-card.dark{

    background:#1a1a1a;
}

.testimonial-card.dark h3{

    color:#ffffff;
}

.testimonial-card.dark span,
.testimonial-card.dark p{

    color:#a0a0a0;
}

/* HOVER */

.testimonial-card:hover{

    transform:
    translateY(-8px);
}

/* =========================
   PLAYER INFO
========================= */

.player-info{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:24px;
}

/* IMAGE */

.player-info img{

    width:62px;
    height:62px;

    border-radius:50%;

    object-fit:cover;
}

/* NAME */

.player-info h3{

    font-size:1.1rem;

    margin-bottom:4px;

    color:#000000;
}

/* ROLE */

.player-info span{

    color:#666666;

    font-size:0.9rem;
}

/* REVIEW */

.testimonial-card p{

    line-height:1.9;

    color:#444444;

    font-size:0.98rem;
}

/* =========================
   ANIMATIONS
========================= */

@keyframes scrollLeft{

    from{

        transform:translateX(0);
    }

    to{

        transform:translateX(-50%);
    }

}

@keyframes scrollRight{

    from{

        transform:translateX(-50%);
    }

    to{

        transform:translateX(0);
    }

}

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

@media(max-width:700px){

    .testimonial-section{

        padding:90px 0;
    }

    .testimonial-top h2{

        font-size:2.8rem;
    }

    .testimonial-card{

        width:320px;

        padding:28px;
    }

}

/* =========================
   DISTRIBUTOR SECTION
========================= */

.distributor-section{

    position:relative;

    padding:140px 7%;

    background:#0a0a0a;

    display:grid;

    grid-template-columns:
    1.05fr 1fr;

    align-items:center;

    gap:90px;

    overflow:hidden;
}

/* =========================
   BACKGROUND GLOW
========================= */

.distributor-glow{

    position:absolute;

    top:-250px;
    right:-200px;

    width:600px;
    height:600px;

    background:radial-gradient(
        circle,
        rgba(255,0,0,0.16),
        transparent 70%
    );

    pointer-events:none;
}

/* =========================
   CONTENT
========================= */

.distributor-content{

    position:relative;

    z-index:2;
}

.distributor-content span{

    display:inline-block;

    color:#ff0000;

    font-size:0.9rem;

    font-weight:700;

    letter-spacing:0.18em;

    margin-bottom:24px;
}

/* TITLE */

.distributor-content h2{

    font-size:5rem;

    line-height:0.92;

    letter-spacing:-0.05em;

    color:#ffffff;

    margin-bottom:32px;

    font-family:'Space Grotesk', sans-serif;
}

/* TEXT */

.distributor-content p{

    color:#b0b0b0;

    line-height:1.9;

    font-size:1rem;

    max-width:650px;
}

/* =========================
   FEATURES
========================= */

.distributor-features{

    margin-top:45px;

    display:flex;

    flex-direction:column;

    gap:26px;
}

/* FEATURE */

.feature{

    display:flex;

    gap:18px;
}

/* ICON */

.feature-icon{

    min-width:42px;
    height:42px;

    border-radius:50%;

    background:#ff0000;

    color:#ffffff;

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

    font-weight:700;
}

/* FEATURE TEXT */

.feature h3{

    color:#ffffff;

    font-size:1.08rem;

    margin-bottom:8px;
}

.feature p{

    margin:0;

    color:#9a9a9a;

    line-height:1.7;
}

/* =========================
   BUTTONS
========================= */

.distributor-buttons{

    display:flex;

    gap:18px;

    margin-top:50px;

    flex-wrap:wrap;
}

/* PRIMARY BUTTON */

.primary-distributor-btn{

    height:56px;

    padding:0 30px;

    border-radius:999px;

    background:#ff0000;

    color:#ffffff;

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

    text-decoration:none;

    font-weight:700;

    transition:0.35s ease;
}

.primary-distributor-btn:hover{

    background:#cc0000;

    transform:translateY(-3px);
}

/* SECONDARY */

.secondary-distributor-btn{

    height:56px;

    padding:0 30px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,0.14);

    color:#ffffff;

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

    text-decoration:none;

    font-weight:600;

    transition:0.35s ease;
}

.secondary-distributor-btn:hover{

    background:#ffffff;

    color:#000000;
}

/* =========================
   VISUAL SIDE
========================= */

.distributor-visual{

    position:relative;
}

/* MAIN CARD */

.visual-card{

    position:relative;

    overflow:hidden;

    border-radius:36px;

    background:#1a1a1a;
}

.visual-card img{

    width:100%;
    height:720px;

    object-fit:cover;

    display:block;

    transition:0.6s ease;
}

/* OVERLAY */

.visual-overlay{

    position:absolute;

    left:0;
    bottom:0;

    width:100%;

    padding:40px;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,0.9),
        rgba(0,0,0,0)
    );
}

.visual-overlay h3{

    color:#ffffff;

    font-size:2rem;

    margin-bottom:12px;

    font-family:'Space Grotesk', sans-serif;
}

.visual-overlay p{

    color:#c5c5c5;

    line-height:1.7;
}

/* IMAGE HOVER */

.visual-card:hover img{

    transform:scale(1.05);
}

/* =========================
   FLOATING CARD
========================= */

.floating-profit-card{

    position:absolute;

    left:-50px;
    bottom:40px;

    width:260px;

    padding:30px;

    border-radius:30px;

    background:
    linear-gradient(
        135deg,
        #ff0000,
        #cc0000
    );

    box-shadow:
    0 30px 60px rgba(255,0,0,0.25);
}

.floating-profit-card h4{

    color:#ffffff;

    font-size:0.95rem;

    letter-spacing:0.08em;

    margin-bottom:10px;
}

.floating-profit-card h2{

    color:#ffffff;

    font-size:2.4rem;

    line-height:1;

    margin-bottom:12px;

    font-family:'Space Grotesk', sans-serif;
}

.floating-profit-card p{

    color:#ffeaea;

    line-height:1.7;

    font-size:0.92rem;
}

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

@media(max-width:1150px){

    .distributor-section{

        grid-template-columns:1fr;

        gap:80px;
    }

    .distributor-content h2{

        font-size:4rem;
    }

    .floating-profit-card{

        left:20px;
    }

}

@media(max-width:700px){

    .distributor-section{

        padding:90px 5%;
    }

    .distributor-content h2{

        font-size:2.8rem;
    }

    .visual-card img{

        height:520px;
    }

    .floating-profit-card{

        width:220px;

        padding:24px;
    }

    .floating-profit-card h2{

        font-size:2rem;
    }

}

/* =========================
   FOOTER
========================= */

.footer{

    position:relative;

    background:#ffffff;

    padding-top:110px;

    overflow:hidden;

    border-top:
    1px solid rgba(220, 219, 219, 0.06);
}

/* RED GLOW */

.footer::before{

    content:'';

    position:absolute;

    top:-250px;
    right:-250px;

    width:600px;
    height:600px;

    background:
    radial-gradient(
        circle,
        rgba(255,0,0,0.12),
        transparent 70%
    );

    pointer-events:none;
}

/* =========================
   TOP
========================= */

.footer-top{

    position:relative;

    z-index:2;

    padding:0 7% 70px;

    display:grid;

    grid-template-columns:
    1.5fr 1fr 1fr 1fr;

    gap:60px;

    border-bottom:
    1px solid rgba(255,255,255,0.08);
}

/* =========================
   BRAND
========================= */

.footer-brand img{

    width:78px;

    margin-bottom:22px;
}

.footer-brand h2{

    font-size:2.2rem;

    color:#000000;

    margin-bottom:18px;

    letter-spacing:0.05em;

    font-family:'Space Grotesk', sans-serif;
}

.footer-brand p{

    color:#9d9d9d;

    line-height:1.9;

    max-width:420px;
}

/* =========================
   SOCIALS
========================= */

.footer-socials{

    display:flex;

    gap:14px;

    margin-top:30px;
}

.footer-socials a{

    width:46px;
    height:46px;

    border-radius:50%;

    background:#ffffff;

    color:#111111;

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

    text-decoration:none;

    transition:0.35s ease;
}

.footer-socials a:hover{

    background:#ff0000;

    transform:translateY(-4px);
}

/* =========================
   COLUMNS
========================= */

.footer-column h3{

    color:#000000;

    font-size:1.2rem;

    margin-bottom:28px;

    font-family:'Space Grotesk', sans-serif;
}

.footer-column{

    display:flex;

    flex-direction:column;
}

.footer-column a{

    color:#8d8d8d;

    text-decoration:none;

    margin-bottom:16px;

    line-height:1.7;

    transition:0.3s ease;
}

.footer-column a:hover{

    color:#0a0000;

    transform:translateX(4px);
}

/* =========================
   STRIP
========================= */

.footer-strip{

    padding:40px 7%;

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:24px;

    border-bottom:
    1px solid rgba(255,255,255,0.08);
}

/* ITEM */

.strip-item{

    background:#101010;

    border:
    1px solid rgba(255,255,255,0.05);

    border-radius:24px;

    padding:28px;

    transition:0.35s ease;
}

/* HOVER */

.strip-item:hover{

    background:#151515;

    border-color:
    rgba(255,0,0,0.3);

    transform:translateY(-6px);
}

.strip-item h4{

    color:#ffffff;

    font-size:1rem;

    margin-bottom:10px;
}

.strip-item p{

    color:#8f8f8f;

    line-height:1.7;
}

/* =========================
   BOTTOM
========================= */

.footer-bottom{

    padding:28px 7%;

    display:flex;

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

    flex-wrap:wrap;

    gap:20px;
}

.footer-bottom p{

    color:#777777;

    font-size:0.92rem;
}

/* LINKS */

.footer-bottom-links{

    display:flex;

    gap:24px;
}

.footer-bottom-links a{

    color:#777777;

    text-decoration:none;

    transition:0.3s ease;
}

.footer-bottom-links a:hover{

    color:#b30000;
}

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

@media(max-width:1100px){

    .footer-top{

        grid-template-columns:
        1fr 1fr;
    }

    .footer-strip{

        grid-template-columns:
        1fr 1fr;
    }

}

@media(max-width:700px){

    .footer{

        padding-top:80px;
    }

    .footer-top{

        grid-template-columns:1fr;

        gap:50px;

        padding:0 5% 60px;
    }

    .footer-strip{

        grid-template-columns:1fr;

        padding:30px 5%;
    }

    .footer-bottom{

        padding:24px 5%;

        flex-direction:column;

        align-items:flex-start;
    }

}