/*==============================================================
    GENIUNE.PK
    responsive.css
==============================================================*/


/*==============================================================
    Large Desktop
==============================================================*/

@media (min-width:1600px){

    .container{

        max-width:1500px;

    }

    .hero-content h1{

        font-size:68px;

    }

}


/*==============================================================
    Desktop
==============================================================*/

@media (max-width:1400px){

    .hero-content h1{

        font-size:50px;

    }

    .hero-content h1 span{

        font-size:28px;

    }

}


/*==============================================================
    Laptop
==============================================================*/

@media (max-width:1200px){

    .hero-content{

        padding-right:0;

    }

    .hero-content h1{

        font-size:44px;

    }

    .glass-card{

        padding:28px;

    }

    .action-buttons{

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

    }

}


/*==============================================================
    Tablet Landscape
==============================================================*/

@media (max-width:992px){

    .hero-section{

        text-align:center;

        padding-top:50px;

    }

    .logo-area{

        justify-content:center;

    }

    .hero-content{

        margin-bottom:50px;

    }

    .hero-features{

        justify-content:center;

    }

    .hero-image{

        margin-top:30px;

    }

    .verification-section{

        padding-top:40px;

    }

    .glass-card{

        margin-bottom:30px;

    }

    .result-header{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }

}


/*==============================================================
    Tablet Portrait
==============================================================*/

@media (max-width:768px){

    .hero-content h1{

        font-size:36px;

    }

    .hero-content h1 span{

        font-size:22px;

    }

    .hero-content p{

        font-size:16px;

    }

    .hero-features{

        flex-direction:column;

        align-items:center;

    }

    .hero-features div{

        width:100%;

        text-align:center;

    }

    .section-title{

        flex-direction:column;

        text-align:center;

    }

    .security-footer{

        flex-direction:column;

        gap:15px;

        text-align:center;

    }

    .result-banner{

        flex-direction:column;

        text-align:center;

    }

    .action-buttons{

        grid-template-columns:1fr;

    }

    .stats-card{

        margin-bottom:20px;

    }

}


/*==============================================================
    Mobile Large
==============================================================*/

@media (max-width:576px){

    section{

        padding:50px 0;

    }

    .hero-section{

        padding-top:30px;

    }

    .hero-content h1{

        font-size:30px;

    }

    .hero-content h1 span{

        font-size:18px;

    }

    .logo{

        width:45px;

        height:45px;

    }

    .logo-area span{

        font-size:22px;

    }

    .glass-card{

        padding:20px;

        border-radius:18px;

    }

    .icon-box{

        width:60px;

        height:60px;

        font-size:24px;

    }

    .section-title h3{

        font-size:24px;

    }

    .form-control{

        height:55px;

    }

    .btn-lg{

        height:54px;

    }

    .captcha-box{

        height:75px;

    }

    .banner-icon{

        width:65px;

        height:65px;

        font-size:30px;

    }

    .result-banner h4{

        font-size:22px;

    }

    .info-card{

        padding:18px;

    }

    .info-card h6{

        font-size:16px;

    }

    .stats-card{

        padding:25px 15px;

    }

    .stats-card h2{

        font-size:30px;

    }

    footer{

        font-size:14px;

        padding:25px 15px;

    }

}


/*==============================================================
    Small Mobile
==============================================================*/

@media (max-width:400px){

    .hero-content h1{

        font-size:26px;

    }

    .hero-content h1 span{

        font-size:16px;

    }

    .hero-features div{

        font-size:14px;

        padding:12px 15px;

    }

    .logo-area{

        flex-direction:column;

        gap:10px;

    }

    .logo-area span{

        font-size:20px;

    }

    .status-badge{

        width:100%;

        text-align:center;

    }

    .result-header{

        align-items:center;

        text-align:center;

    }

}