/* ======================================
   GOOGLE FONT
====================================== */
/*==================================================
            GOOGLE FONT
==================================================*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');



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

.register-btn{

    padding:12px 34px;

    border:none;

    border-radius:50px;

    background:#17325c;

    color:#fff;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

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

}

.register-btn:hover{

    background:#0B63C7;

    transform:translateY(-3px);

}

/*==================================================
            POPUP
==================================================*/

.popup{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(4px);

    z-index:999;

    padding:15px;

}

.popup.show{

    display:flex;

}

/*==================================================
            POPUP BOX
==================================================*/

.popup-box{

    width:360px;

    background:#162544;

    border-radius:18px;

    padding:18px;

    position:relative;

    animation:popup .3s ease;

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

}

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

.close{

    position:absolute;

    top:12px;

    right:12px;

    width:32px;

    height:32px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#F4B400;

    color:#162544;

    cursor:pointer;

    transition:.3s;

}

.close:hover{

    transform:rotate(180deg);

    background:#fff;

}

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

.logo{

    width:18px;

    height:18px;

    margin:auto;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#F4B400;

    font-size:8px;

}

.logo:hover,
.logo:focus {
    transform:none !important;
    box-shadow:none !important;
    background:#F4B400 !important;
}

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

h1{

    color:#fff;

    text-align:center;

    font-size:22px;

    margin-top:12px;

}

.subtitle{

    color:#cfd7e6;

    text-align:center;

    font-size:12px;

    margin-top:4px;

    margin-bottom:18px;

}

/*==================================================
            POPUP LOGIN BUTTON
==================================================*/

.bottom{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-top:14px;
    color:#cfd7e6;
    font-size:13px;
    flex-wrap:wrap;
}

.popup-login-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    border:none;
    border-radius:999px;
    background:linear-gradient(135deg, #f4b400 0%, #ffd54f 100%);
    color:#162544;
    font-weight:700;
    box-shadow:0 10px 24px rgba(244,180,0,.24);
    transition:transform .2s ease, box-shadow .2s ease;
}

.popup-login-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(244,180,0,.32);
    color:#162544;
}

/*==================================================
            POPUP ANIMATION
==================================================*/

@keyframes popup{

    from{

        opacity:0;

        transform:scale(.9);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}
/*==================================================
                carS
==================================================*/

.cars{

    display:flex;

    gap:10px;

}

.car{

    flex:1;

    background:#203256;

    border-radius:12px;

    padding:12px 10px;

    text-align:center;

    cursor:pointer;

    transition:.3s;

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

}

.car:hover{

    background:#F4B400;

    transform:translateY(-4px);

}

/*==================================================
                ICON
==================================================*/

.icon{

    width:42px;

    height:42px;

    margin:auto;

    margin-bottom:8px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

    color:#fff;

    font-size:20px;

    transition:.3s;

}

.car:hover .icon{

    background:#fff;

    color:#162544;

    transform:scale(1.08);

}

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

.car h2{

    color:#fff;

    font-size:16px;

    font-weight:600;

    margin-bottom:10px;

}

.car:hover h2{

    color:#162544;

}

/*==================================================
      REMOVE UNNECESSARY CONTENT
==================================================*/

/* Hide long description */

.car p{

    display:none;

}

/* Hide feature list */

.car ul{

    display:none;

}

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

.car button{

    width:100%;

    padding:8px;

    border:none;

    border-radius:30px;

    background:#F4B400;

    color:#162544;

    font-size:12px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.car button:hover{

    transform:scale(1.03);

}

.car:hover button{

    background:#162544;

    color:#fff;

}

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

.bottom{

    margin-top:15px;

    text-align:center;

    color:#d7dbe5;

    font-size:12px;

}

.bottom a{

    color:#F4B400;

    text-decoration:none;

    font-weight:600;

}

.bottom a:hover{

    color:#fff;

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

@media (max-width:768px){

    .popup-box{

        width:95%;
        max-width:360px;

        padding:15px;

    }

    /* Keep both cars side-by-side */

    .cars{

        display:flex;

        gap:8px;

    }

    .car{

        flex:1;

        padding:10px 8px;

    }

    .icon{

        width:38px;
        height:38px;

        font-size:18px;

    }

    .car h2{

        font-size:14px;

    }

    .car button{

        padding:7px;

        font-size:11px;

    }

}

@media (max-width:380px){

    .popup-box{

        width:96%;

        padding:12px;

    }

    .cars{

        gap:6px;

    }

    .car{

        padding:8px 6px;

    }

    .icon{

        width:34px;
        height:34px;

        font-size:16px;

    }

    .car h2{

        font-size:13px;

    }

    .car button{

        padding:6px;

        font-size:10px;

    }

}

/*==================================================
                HOVER EFFECTS
==================================================*/

.car{

    transition:.3s ease;

}

.car:hover{

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

}

.register-btn{

    transition:.3s;

}

.register-btn:hover{

    box-shadow:0 10px 25px rgba(23,50,92,.30);

}

.close{

    transition:.3s;

}

.close:hover{

    transform:rotate(180deg) scale(1.1);

}

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

::-webkit-scrollbar{

    width:5px;

}

::-webkit-scrollbar-thumb{

    background:#F4B400;

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#162544;

}

/*==================================================
                TEXT SELECTION
==================================================*/

::selection{

    background:#F4B400;

    color:#162544;

}

/*==================================================
                SMOOTH TRANSITIONS
==================================================*/

*{

    transition:
        background .3s,
        color .3s,
        transform .3s;

}