/*==================================================
BRISK BOX
MOBILE HERO STYLESHEET
Desktop Defaults
==================================================*/

/* Hide mobile hero on desktop */

.mobile-hero{
    display:none;
}

/* Hide hamburger on desktop */

.menu-toggle{
    display:none;
}


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

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

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

#header{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    padding:18px 20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:transparent;

    z-index:9999;

}

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

.logo{

    display:flex;

    align-items:center;

}

.logo img{

    height:52px;

}

.brand-name{

    font-size:34px;

}

.brand-subtitle{

    display:none;

}

/*==============================================
HELPLINE
==============================================*/

.helpline{

    display:none;

}

/*==============================================
HAMBURGER
==============================================*/

.menu-toggle{

    display:flex;

    justify-content:center;

    align-items:center;

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:rgba(255,255,255,.18);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.25);

    color:#ffffff;

    font-size:22px;

    transition:.35s;

}

.menu-toggle:hover{

    background:rgba(255,255,255,.28);

}

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

.desktop-hero{

    display:none;

}
/*==================================================
MOBILE NAVIGATION
==================================================*/

#mainNav{

    display:none;

}

#mainNav.mobile-open{

    display:block;

    position:absolute;

    top:86px;
    right:20px;

    width:320px;
    max-width:calc(100vw - 40px);

    background:#ffffff;

    border-radius:22px;

    box-shadow:0 20px 50px rgba(0,0,0,.18);

    overflow-y:auto;
    overflow-x:hidden;

    max-height:80vh;

    z-index:99999;

}

/* Main List */

#mainNav.mobile-open ul{

    display:flex;

    flex-direction:column;

    margin:0;

    padding:0;

}

/* Main Items */

#mainNav.mobile-open li{

    width:100%;

    list-style:none;

}

/* Main Links */

#mainNav.mobile-open > ul > li > a{

    display:block;

    padding:18px 22px;

    font-size:16px;

    font-weight:600;

    color:#222;

    border-bottom:1px solid #ececec;

    transition:.3s;

}

#mainNav.mobile-open > ul > li > a:hover{

    background:#f7f7f7;

    color:var(--secondary);

}

/*==================================================
SUB MENUS
==================================================*/

#mainNav.mobile-open .dropdown{

    display:block;

    position:static;

    width:100%;

    background:#f8f9fb;

    padding:6px 0 10px;

    border-left:4px solid var(--secondary);

}

#mainNav.mobile-open .dropdown a{

    display:block;

    padding:12px 20px 12px 35px;

    font-size:14px;

    font-weight:500;

    color:#555;

    background:none;

    border:none;

    box-shadow:none;

    border-radius:0;

    transition:.25s;

}

#mainNav.mobile-open .dropdown a:hover{

    background:#eef2ff;

    color:var(--primary);

}

/* Last Item */

#mainNav.mobile-open > ul > li:last-child > a{

    border-bottom:none;

}

/* Scrollbar */

#mainNav.mobile-open::-webkit-scrollbar{

    width:8px;

}

#mainNav.mobile-open::-webkit-scrollbar-thumb{

    background:#d2d2d2;

    border-radius:10px;

}

#mainNav.mobile-open::-webkit-scrollbar-track{

    background:transparent;

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

.mobile-hero{

    display:block;

    position:relative;

    height:92vh;

    min-height:720px;

    background:url("../images/mobilehero.webp") center 30%/cover no-repeat;

    overflow:hidden;

}

/*==============================================
OVERLAY
==============================================*/

.mobile-hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        to bottom,

        rgba(10,20,45,.15),

        rgba(10,20,45,.03),

        rgba(10,20,45,.12)

    );

}

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

.mobile-hero-content{

    position:relative;

    z-index:10;

    width:92%;

    max-width:370px;

    margin:auto;

    padding-top:90px;

    text-align:center;

}

/*==============================================
HEADING
==============================================*/

.mobile-heading h1{

    color:#ffffff;

    font-size:42px;

    line-height:1.08;

    font-family:"Arial Black",Arial,sans-serif;

    margin-bottom:12px;

}

.mobile-heading p{

    color:#ffffff;

    font-size:16px;

    opacity:.95;

    margin-bottom:28px;

}

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

.mobile-track-card{

    width:100%;

    max-width:350px;

    margin:auto;

    padding:24px;

    border-radius:24px;

    background:rgba(255,255,255,.28);

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    border:1px solid rgba(255,255,255,.40);

    box-shadow:0 20px 45px rgba(0,0,0,.18);

}

.mobile-track-card h2{

    color:#1D2F8F;

    font-size:24px;

    margin-bottom:18px;

    font-weight:700;

}

/*==============================================
FORM
==============================================*/

.mobile-track-card form{

    display:flex;

    flex-direction:column;

}

.mobile-track-card input{

    width:100%;

    height:54px;

    padding:0 18px;

    border:none;

    border-radius:14px;

    font-size:16px;

    margin-bottom:16px;

    background:#ffffff;

}

.mobile-track-card input:focus{

    outline:none;

}

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

.mobile-track-card button{

    width:100%;

    height:54px;

    border:none;

    border-radius:14px;

    background:linear-gradient(90deg,#ff8b00,#f57c00);

    color:#ffffff;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.30s;

}

.mobile-track-card button:hover{

    transform:translateY(-2px);

}

/*==============================================
FEATURE PILLS
==============================================*/

.mobile-features{

    margin-top:28px;

    display:flex;

    gap:10px;

    overflow-x:auto;

    overflow-y:hidden;

    white-space:nowrap;

    scrollbar-width:none;

    -ms-overflow-style:none;

}

.mobile-features::-webkit-scrollbar{

    display:none;

}

.mobile-features span{

    flex:0 0 auto;

    padding:10px 16px;

    border-radius:30px;

    background:#1D2F8F;

    color:#ffffff;

    font-size:13px;

    font-weight:600;

    box-shadow:0 8px 18px rgba(0,0,0,.15);

}


@media(max-width:992px){

.footer-container{

    grid-template-columns:1fr;
    gap:45px;

}

.footer-column{

    text-align:center;

}

.footer-social{

    justify-content:center;

}

.footer-column ul li{

    line-height:1.7;

}

}

/*==================================================
SMALL PHONES
==================================================*/

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

    #header{

        padding:15px;

    }

    .logo img{

        height:46px;

    }

    .brand-name{

        font-size:30px;

    }

    .menu-toggle{

        width:46px;

        height:46px;

        font-size:20px;

    }

    .mobile-hero{

        min-height:680px;

        background-position:center 35%;

    }

    .mobile-hero-content{

        width:92%;

        padding-top:75px;

    }

    .mobile-heading h1{

        font-size:36px;

    }

    .mobile-heading p{

        font-size:15px;

        margin-bottom:24px;

    }

    .mobile-track-card{

        padding:20px;

        border-radius:20px;

    }

    .mobile-track-card h2{

        font-size:22px;

    }

    .mobile-track-card input,

    .mobile-track-card button{

        height:50px;

        font-size:15px;

    }

    .mobile-features{

        margin-top:24px;

        gap:8px;

    }

    .mobile-features span{

        font-size:12px;

        padding:9px 14px;

    }

}

/*==================================================
END MOBILE
==================================================*/

}