/* ==========================
   GOOGLE FONT
========================== */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Cairo',sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#f7f7f7;
    color:#222;
    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

.container{
    width:90%;
    max-width:1400px;
    margin:auto;
}


/* ==========================
   LOADER
========================== */

.loader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#ffffff;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:9999;
    transition:.3s;
}

.loader.hide{
    opacity:0;
    visibility:hidden;
}

.loader img{
    width:180px;
    animation:pulseLogo 1.8s infinite;
}

@keyframes pulseLogo{

    0%{
        transform:scale(4);
        opacity:.8;
    }

    50%{
        transform:scale(1.08);
        opacity:1;
    }

    100%{
        transform:scale(4);
        opacity:.8;
    }

}


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

#header{
    background:rgba(255,255,255,.92);
    border-bottom:1px solid rgba(0,0,0,.08);
}

#header.scrolled{
    background:#ffffff;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

#header .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:90px;
}

.logo img{
    height:55px;
}

nav ul{
    display:flex;
    gap:35px;
}

nav a{
    color:#222;
    font-size:16px;
    font-weight:600;
    transition:.3s;
}

nav a:hover,
nav a.active{
    color:#f47521;
}


/* ==========================
   HERO
========================== */

.hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    padding:0;
}

.hero-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    z-index:-2;
    transform:none;
    will-change:auto;
    backface-visibility:hidden;
}

.overlay{
    position:absolute;
    width:100%;
    height:100%;
    background:
    linear-gradient(
    90deg,
    rgba(255,255,255,.75) 0%,
    rgba(255,255,255,.35) 45%,
    rgba(255,255,255,.05) 100%
    );
}

.hero-content{
    background:rgba(255,255,255,.45);
    backdrop-filter:blur(5px);
    padding:40px;
    border-radius:30px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    position:relative;
    z-index:2;
    max-width:650px;
}

.hero-content span{
    color:#f47521;
}

.hero-content h1{
    font-size:95px;
    font-weight:900;
    line-height:1;
    margin:15px 0;
    color:#222;
    
}

.hero-content h3{
    letter-spacing:8px;
    font-weight:300;
    margin-bottom:20px;
}

.hero-content h2{
    font-size:52px;
    font-weight:900;
    margin-bottom:20px;
    line-height:1.3;
}

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

.btn-primary{
    background:#f47521;
    color:#ffffff;
    padding:15px 35px;
    border-radius:50px;
    font-weight:700;
    transition:.3s;
}

.btn-primary:hover{
    transform:translateY(-3px);
    background:#ffffff;
    color:#f47521;
}

.btn-secondary{
    border:1px solid #333;
    padding:15px 35px;
    border-radius:50px;
    color:#333;
    background:rgba(255,255,255,.4);
}

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


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

.features{
    margin-top:-60px;
    position:relative;
    z-index:5;
}

.features .container{
    background:#ffffff;
    border:1px solid #e5e5e5;
    border-radius:25px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    overflow:hidden;
}

.feature{
    padding:30px;
    display:flex;
    gap:15px;
    align-items:center;
    border-left:1px solid rgba(255,255,255,.08);
}

.feature:last-child{
    border-left:none;
}

.feature i{
    font-size:35px;
    color:#f47521;
}

.feature h3{
    margin-bottom:5px;
}

.feature p{
    color:#aaa;
    font-size:14px;
}


/* ==========================
   CATEGORIES
========================== */

.categories{
    padding:30px 0 70px;
}

.categories .container{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
}

.category-card{
    height:280px;
    position:relative;
    overflow:hidden;
    border-radius:20px;
    border:1px solid rgba(244,117,33,.15);
    cursor:pointer;
    transition:.4s ease;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.category-card:hover{
    transform:translateY(-25px);
    box-shadow:
    0 20px 40px rgba(0,0,0,.15),
    0 0 25px rgba(244,117,33,.25);
}

.category-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.6s ease;
}

.category-card:hover img{
    transform:scale(1.50);
}

.category-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
    to top,
    rgba(0,0,0,.80),
    rgba(0,0,0,0)
    );
}

.category-card .content{
    position:absolute;
    bottom:20px;
    right:20px;
    left:20px;
    z-index:2;
    transition:.3s;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.category-card:hover .content{
    transform:translateY(-5px);
}

.category-card h3{
    font-size:20px;
    margin-bottom:5px;
    color:#fff;
    text-shadow:0 2px 10px rgba(0,0,0,.7);
}

.category-card p{
    color:#f1f1f1;
    text-shadow:0 2px 10px rgba(0,0,0,.7);
    margin-bottom:8px;
}


/* ==========================
   DISCOVER LINK (اكتشف)
========================== */

.discover-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:8px;
    padding:8px 16px;
    background:rgba(244,117,33,.15);
    border:1px solid rgba(244,117,33,.5);
    border-radius:50px;
    color:#f47521;
    font-size:14px;
    font-weight:800;
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
    transition:.3s;
}

.discover-link i{
    font-size:11px;
    transition:transform .3s;
}

.category-card:hover .discover-link{
    background:#f47521;
    color:#fff;
    border-color:#f47521;
    box-shadow:0 5px 20px rgba(244,117,33,.5);
}

.category-card:hover .discover-link i{
    transform:translateX(-4px);
}


/* =====================================================
   EXCLUSIVE AGENTS SECTION
===================================================== */

.agents-section{
    padding:90px 20px;
    background:linear-gradient(180deg, #f7f7f7 0%, #ffffff 100%);
    position:relative;
}

.agents-header{
    text-align:center;
    max-width:750px;
    margin:0 auto 60px;
}

.agents-label{
    display:inline-block;
    color:#f47521;
    font-weight:700;
    font-size:16px;
    letter-spacing:.5px;
    margin-bottom:10px;
    position:relative;
}

.agents-header h2{
    font-size:52px;
    font-weight:900;
    color:#222;
    margin-bottom:18px;
    line-height:1.2;
}

.agents-header h2::after{
    content:"";
    display:block;
    width:80px;
    height:4px;
    background:#f47521;
    border-radius:10px;
    margin:20px auto 0;
}

.agents-header p{
    font-size:18px;
    color:#000000;
    line-height:1.8;
}

.agents-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    max-width:1300px;
    margin:auto;
}


/* =====================================================
   AGENT CARD — BASE
===================================================== */

.agent-card{
    position:relative;
    border-radius:25px;
    padding:45px 30px 35px;
    text-align:center;
    border:2px solid #ebebeb;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    transition:.4s ease;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    z-index:1;

    /* الافتراضي (برتقالي الموقع) */
    --brand-color:#f47521;
    --brand-color-light:#ffa05a;
    --brand-rgb:244,117,33;

    /* صورة الخلفية */
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    background-color:#ffffff;
}

/* ✨ طبقة خفيفة جداً — بدون blur */
.agent-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(255,255,255,0.05);
    z-index:0;
    pointer-events:none;
}

/* الشريط العلوي */
.agent-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:5px;
    background:linear-gradient(90deg, var(--brand-color) 0%, var(--brand-color-light) 100%);
    transform:scaleX(0);
    transform-origin:right;
    transition:.4s ease;
    z-index:3;
}

.agent-card:hover{
    transform:translateY(-10px);
    border-color:var(--brand-color);
    box-shadow:
        0 25px 50px rgba(0,0,0,.12),
        0 0 40px rgba(var(--brand-rgb), .25);
}

.agent-card:hover::after{
    background:rgba(255,255,255,0);
}

.agent-card:hover::before{
    transform:scaleX(1);
}


/* =====================================================
   BRAND VARIATIONS — BACKGROUND IMAGES
===================================================== */

/* 🔵 BWOO */
.agent-card.brand-bwoo{
    --brand-color:#47D3D8;
    --brand-color-light:#7ee5e9;
    --brand-rgb:71,211,216;
    background-image:url("../images/bwoo/bwoo-hero.webp");
    background-position:left center;
}

/* 🟡 AGM */
.agent-card.brand-agm{
    --brand-color:#FFC107;
    --brand-color-light:#ffd84d;
    --brand-rgb:255,193,7;
    background-image:url("../images/agm/agm card.webp");
    background-position:center center;
}

/* 🟠 WINDHORSE */
.agent-card.brand-windhorse{
    --brand-color:#E8790F;
    --brand-color-light:#F58A2A;
    --brand-rgb:232,121,15;
    background-image:url("../images/windhorse/windhorse card.webp");
    background-position:center center;
}


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

.agent-badge{
    position:absolute;
    top:18px;
    right:18px;
    background:linear-gradient(135deg, var(--brand-color) 0%, var(--brand-color-light) 100%);
    color:#fff;
    padding:6px 14px;
    border-radius:50px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.3px;
    box-shadow:0 5px 15px rgba(var(--brand-rgb), .4);
    z-index:3;
}

/* نص AGM يصير أسود لأنه أصفر فاتح */
.agent-card.brand-agm .agent-badge{
    color:#111;
}


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

.agent-logo{
    width:140px;
    height:140px;
    margin:0 auto 25px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ffffff;
    border-radius:50%;
    padding:20px;
    transition:.4s ease;
    border:2px solid transparent;
    position:relative;
    z-index:2;
    box-shadow:0 4px 15px rgba(0,0,0,.06);
}

.agent-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
    filter:grayscale(0.2);
    transition:.4s ease;
}

.agent-card:hover .agent-logo{
    background:#fff;
    transform:scale(1.05);
    border-color:var(--brand-color);
    box-shadow:0 10px 30px rgba(var(--brand-rgb), .3);
}

.agent-card:hover .agent-logo img{
    filter:grayscale(0);
    transform:scale(1.05);
}


/* =====================================================
   TITLE
===================================================== */

.agent-card h3{
    font-size:26px;
    font-weight:900;
    color:var(--brand-color);
    margin-bottom:15px;
    letter-spacing:.5px;
    transition:.3s;
    position:relative;
    z-index:2;
}

.agent-card:hover h3{
    color:var(--brand-color);
}


/* =====================================================
   DESCRIPTION — بطاقة داخلية مع Blur خفيف
===================================================== */

.agent-card p{
    font-size:16px;
    color:#222;
    line-height:1.8;
    margin:0 0 20px;
    flex:1;
    position:relative;
    z-index:2;
    font-weight:700;

    /* ✨ البطاقة الداخلية — Blur خفيف */
    background:rgba(255, 255, 255, 0.70);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    border:2px solid var(--brand-color);
    border-radius:16px;
    padding:16px 18px;
    box-shadow:
        0 6px 20px rgba(var(--brand-rgb), 0.25),
        inset 0 1px 0 rgba(255,255,255,0.6);
    transition:.3s ease;
}

.agent-card:hover p{
    background:rgba(255,255,255,0.95);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    box-shadow:
        0 10px 30px rgba(var(--brand-rgb), 0.4),
        inset 0 1px 0 rgba(255,255,255,0.8);
    transform:translateY(-2px);
}


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

.agent-cert-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    padding:11px 20px;
    margin-bottom:12px;
    background:#fff;
    color:var(--brand-color);
    border:2px solid var(--brand-color);
    border-radius:50px;
    font-family:'Cairo',sans-serif;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    transition:.3s ease;
    position:relative;
    z-index:2;
}

.agent-cert-btn i{
    font-size:14px;
}

.agent-cert-btn:hover{
    background:var(--brand-color);
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(var(--brand-rgb), .4);
}

/* AGM: النص يبقى أسود عند Hover لأن الأصفر فاتح */
.agent-card.brand-agm .agent-cert-btn:hover{
    color:#111;
}


/* =====================================================
   AGENT MAIN BUTTON
===================================================== */

.agent-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:13px 26px;
    background:var(--brand-color);
    color:#fff;
    border-radius:50px;
    font-size:14px;
    font-weight:800;
    transition:.3s ease;
    box-shadow:0 8px 20px rgba(var(--brand-rgb), .35);
    margin-top:auto;
    position:relative;
    z-index:2;
}

/* AGM: النص أسود */
.agent-card.brand-agm .agent-btn{
    color:#111;
}

.agent-btn i{
    font-size:12px;
    transition:transform .3s ease;
}

.agent-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(var(--brand-rgb), .55);
    filter:brightness(1.1);
}

.agent-btn:hover i{
    transform:translateX(-5px);
}


/* =====================================================
   CERTIFICATE MODAL
===================================================== */

.certificate-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.92);
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:99999;
    opacity:0;
    transition:opacity .3s ease;
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
}

.certificate-modal.show{
    display:flex;
    opacity:1;
}

.certificate-modal-content{
    position:relative;
    max-width:900px;
    width:100%;
    max-height:90vh;
    background:#fff;
    border-radius:20px;
    padding:30px;
    box-shadow:0 25px 80px rgba(0,0,0,.5);
    animation:certZoomIn .4s ease;
    overflow-y:auto;
}

@keyframes certZoomIn{
    from{
        opacity:0;
        transform:scale(.85);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

.certificate-modal-content h3{
    text-align:center;
    font-size:24px;
    font-weight:900;
    color:#222;
    margin-bottom:20px;
    padding-bottom:15px;
    border-bottom:2px solid #f5f5f5;
}

.certificate-modal-content img{
    width:100%;
    height:auto;
    max-height:70vh;
    object-fit:contain;
    border-radius:12px;
    display:block;
    margin:auto;
}

.certificate-close{
    position:absolute;
    top:15px;
    right:15px;
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:#f47521;
    color:#fff;
    font-size:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.3s;
    z-index:10;
    box-shadow:0 5px 15px rgba(244,117,33,.4);
}

.certificate-close:hover{
    background:#d96515;
    transform:rotate(90deg);
}


/* ==========================
   WHATSAPP
========================== */

.whatsapp{
    position:fixed;
    bottom:25px;
    left:25px;
    width:65px;
    height:65px;
    border-radius:50%;
    background:#25d366;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    color:#fff;
    z-index:999;
    box-shadow:0 0 25px rgba(37,211,102,.5);
}


/* ==========================
   WARRANTY HOME (index)
========================== */

.warranty-home{
    padding:90px 0;
    background:#fafafa;
}

.warranty-home-box{
    max-width:850px;
    margin:auto;
    background:#fff;
    padding:60px;
    border-radius:25px;
    text-align:center;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
    transition:.3s;
}

.warranty-home-box:hover{
    transform:translateY(-8px);
}

.warranty-icon{
    font-size:70px;
    color:#f47521;
    margin-bottom:25px;
}

.warranty-home-box h2{
    font-size:38px;
    margin-bottom:15px;
    color:#222;
}

.warranty-home-box p{
    font-size:18px;
    color:#666;
    margin-bottom:35px;
    line-height:1.8;
}

.home-warranty-form{
    display:flex;
    gap:15px;
    justify-content:center;
}

.home-warranty-form input{
    flex:1;
    height:60px;
    padding:0 25px;
    border:1px solid #ddd;
    border-radius:50px;
    font-size:17px;
    outline:none;
}

.home-warranty-form input:focus{
    border-color:#f47521;
}

.home-warranty-form button{
    height:60px;
    padding:0 35px;
    border:none;
    border-radius:50px;
    background:#f47521;
    color:#fff;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
    transition:.3s;
}

.home-warranty-form button:hover{
    background:#d96012;
}


/* ==========================
   SCROLLBAR
========================== */

::-webkit-scrollbar{
    width:12px;
}

::-webkit-scrollbar-track{
    background:#050505;
}

::-webkit-scrollbar-thumb{
    background:#686868;
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#f47521;
}


/* ==========================
   RESPONSIVE - Tablet
========================== */

@media(max-width:991px){

    nav{
        display:block;
    }

    nav ul{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:15px;
    }

    nav a{
        font-size:14px;
    }

    .logo img{
        height:50px;
    }

    .hero-content h1{
        font-size:65px;
    }

    .hero-content h2{
        font-size:30px;
    }

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

    .categories .container{
        grid-template-columns:repeat(3,1fr);
    }

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

    .agents-header h2{
        font-size:42px;
    }
}


/* ==========================
   RESPONSIVE - Mobile
========================== */

@media(max-width:768px){

    /* HEADER */
    #header{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        z-index:9999;
        background:rgba(255,255,255,.95);
        backdrop-filter:blur(10px);
    }

    #header .container{
        height:75px;
    }

    .logo img{
        height:50px;
    }

    body{
        padding-top:75px;
    }

    nav{
        display:block;
    }

    nav ul{
        display:flex;
        justify-content:center;
        align-items:center;
        gap:10px;
        flex-wrap:wrap;
        overflow-x:auto;
    }

    nav a{
        font-size:10px;
    }


    /* HERO */
    .hero{
        position:relative;
        height:520px;
        padding:0;
        overflow:hidden;
    }

    .hero-bg{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center top;
    }

    .hero-content{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        width:88%;
        max-width:88%;
        padding:25px;
        background:rgba(255,255,255,.55);
        backdrop-filter:blur(2px);
        border-radius:25px;
        text-align:center;
    }

    .hero-content h1{
        font-size:34px;
        margin:10px ;
    }

    .hero-content h2{
        font-size:26px;
        font-weight:900;
    }

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

    .hero-buttons{
        flex-direction:column;
        gap:12px;
    }

    .btn-primary,
    .btn-secondary{
        padding:12px 25px;
        font-size:15px;
    }


    /* FEATURES */
    .categories .container{
        padding:0;
    }

    .features{
        margin-top:15px;
    }

    .features .container{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:15px;
    }

    .feature{
        border-radius:20px;
        box-shadow:0 5px 15px rgba(0,0,0,.05);
        padding:20px 15px;
        flex-direction:column;
        text-align:center;
        gap:10px;
    }

    .feature i{
        font-size:28px;
    }

    .feature h3{
        font-size:18px;
    }

    .feature p{
        font-size:13px;
    }


    /* ================= AGENTS - Mobile ================= */

    .agents-section{
        padding:60px 15px;
    }

    .agents-header{
        margin-bottom:40px;
    }

    .agents-header h2{
        font-size:32px;
    }

    .agents-header p{
        font-size:15px;
    }

    .agents-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .agent-card{
        padding:35px 22px 28px;
    }

    /* على الجوال — بدون blur */
    .agent-card::after{
        background:rgba(255,255,255,0.05);
    }

    .agent-logo{
        width:110px;
        height:110px;
        margin-bottom:20px;
    }

    .agent-card h3{
        font-size:22px;
    }

    /* ✨ الوصف داخل بطاقة على الجوال */
    .agent-card p{
        font-size:13px;
        line-height:1.7;
        padding:12px 14px;
        border-radius:14px;
        margin-bottom:16px;
        backdrop-filter:blur(3px);
        -webkit-backdrop-filter:blur(3px);
    }

    .agent-btn{
        padding:11px 22px;
        font-size:13px;
    }

    .agent-badge{
        font-size:10px;
        padding:5px 12px;
    }

    .agent-cert-btn{
        padding:10px 16px;
        font-size:12px;
    }


    /* ================= CERTIFICATE MODAL - Mobile ================= */

    .certificate-modal{
        padding:10px;
    }

    .certificate-modal-content{
        padding:20px 15px;
        border-radius:16px;
        max-height:95vh;
    }

    .certificate-modal-content h3{
        font-size:18px;
        margin-bottom:15px;
        padding-bottom:12px;
    }

    .certificate-modal-content img{
        max-height:75vh;
        border-radius:10px;
    }

    .certificate-close{
        width:36px;
        height:36px;
        font-size:22px;
        top:10px;
        right:10px;
    }


    /* ================= WARRANTY HOME - Mobile ================= */

    .warranty-home{
        padding:50px 15px;
    }

    .warranty-home-box{
        padding:30px 20px;
        border-radius:20px;
    }

    .warranty-icon{
        font-size:50px;
        margin-bottom:15px;
    }

    .warranty-home-box h2{
        font-size:24px;
        margin-bottom:12px;
        line-height:1.3;
    }

    .warranty-home-box p{
        font-size:14px;
        margin-bottom:25px;
        line-height:1.6;
    }

    .home-warranty-form{
        flex-direction:column;
        gap:12px;
    }

    .home-warranty-form input{
        width:100%;
        height:50px;
        padding:0 20px;
        font-size:15px;
        border-radius:14px;
    }

    .home-warranty-form button{
        width:100%;
        height:50px;
        padding:0 20px;
        font-size:15px;
        border-radius:14px;
    }


    /* WHATSAPP */
    .whatsapp{
        width:55px;
        height:55px;
        font-size:28px;
        left:15px;
        bottom:10px;
    }


    /* CATEGORIES - Mobile */
    .categories .container{
        grid-template-columns:1fr;
        padding: 20px;
    }

    .category-card{
        height:280px;
    }

    .category-card h3{
        font-size:20px;
    }

    .category-card p{
        font-size:14px;
        margin-bottom:6px;
    }

    .discover-link{
        font-size:12px;
        padding:6px 14px;
        margin-top:6px;
    }

    .discover-link i{
        font-size:10px;
    }

}