/* =====================================
   Sampad PRO 1405 Responsive Design
===================================== */





/* Tablet */

@media (min-width:768px){



    .container {

        padding:
        0 30px;

    }



    .hero-box {


        flex-direction:row;


    }





    .hero-content h1 {


        font-size:42px;


    }






    .advantages-grid {


        grid-template-columns:

        repeat(2,1fr);


    }




    .grade-grid {


        grid-template-columns:

        repeat(3,1fr);


    }




    #payments {


        display:grid;


        grid-template-columns:

        repeat(2,1fr);


    }


    #step2.has-floating-action,
    #step3 {

        padding-bottom:110px;

    }


    #step2.active .next,
    #step3.active .payment-continue {

        position:fixed;
        right:50%;
        bottom:24px;
        left:auto;
        z-index:50;
        width:min(420px, calc(100vw - 48px));
        transform:translateX(50%);
        box-shadow:0 14px 34px rgba(15,23,42,.22);

    }


    #step2.active .next:hover,
    #step3.active .payment-continue:hover {

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

    }



}

@media (min-width:1024px){

    #payments {

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

    }


    .payment-card {

        padding:20px 16px;

    }


    .installments {

        margin-top:14px;

    }


    .installment-row {

        gap:6px;
        padding:10px 8px;

    }


    .installment-row span {

        font-size:12px;

    }

}


@media(max-width:767px){

    #payments {

        display:flex;
        flex-direction:column;
        gap:12px;

    }


    .payment-card {

        min-height:0;
        padding:16px;
        border-radius:18px;

    }


    .payment-card .payment-price {

        font-size:19px;

    }


    .payment-card .payment-count {

        font-size:14px;

    }


    .payment-card .installments {

        display:none;
        margin-top:12px;
        border-radius:14px;

    }


    .payment-card.selected .installments {

        display:block;

    }


    .payment-card .installment-mobile-title {

        display:block;
        padding:8px;
        color:#475569;
        font-size:12px;
        text-align:center;

    }


    .installment-row {

        gap:6px;
        padding:9px 7px;

    }


    .payment-card .installment-row span {

        font-size:13px;
        white-space:nowrap;

    }


    .payment-card .payment-card-action {

        padding-top:10px;

    }


    #step3 {

        padding-bottom:88px;

    }


    #step2.has-floating-action {

        padding-bottom:0;

    }


    #step2 .next,
    #step3 .payment-continue {

        position:fixed;
        right:15px;
        bottom:calc(12px + env(safe-area-inset-bottom));
        left:15px;
        z-index:50;
        width:auto;
        box-shadow:0 12px 30px rgba(15,23,42,.22);

    }

}








/* Desktop */


@media (min-width:1024px){



    .hero {


        padding:

        80px 0;


    }





    .hero-box {


        min-height:550px;


    }





    .advantages-grid {


        grid-template-columns:

        repeat(4,1fr);


    }





    .wizard-card {


        padding:

        50px;


    }



}









/* Mobile */

@media(max-width:767px){



    body {


        overflow-x:hidden;


    }





    .container {


        padding:

        0 15px;


    }






    .header-inner {


        height:70px;


    }





    .brand-title {


        font-size:16px;


    }






    .logo {


        width:120px;


        height:42px;


        font-size:12px;


    }








    .hero {


        padding:

        30px 0;


    }






    .hero-box {


        flex-direction:column-reverse;


        gap:25px;


        width:100%;


        min-width:0;


    }



    .hero-content {


        flex:none;


        width:100%;


        max-width:100%;


        min-width:0;


        overflow-wrap:anywhere;


    }






    .hero-content h1 {


        font-size:27px;


        line-height:1.5;


        max-width:100%;


    }







    .hero-content p {


        font-size:15px;


        max-width:100%;


    }






    .hero-image {


        flex:none;


        width:100%;


        max-width:100%;


        min-width:0;


        overflow:hidden;


    }



    .hero-image img {


        display:block;


        width:100%;


        max-width:100%;


        height:auto;


        object-fit:contain;


        border-radius:20px;


    }



    .badge {


        max-width:100%;


        white-space:normal;


        line-height:1.8;


    }



    .hero-features,
    .hero-features div {


        max-width:100%;


        overflow-wrap:anywhere;


    }







    .main-action {


        width:100%;


        padding:

        17px;


        font-size:16px;


    }






    .advantages {


        padding:

        40px 0;


    }






    .advantages h2 {


        font-size:25px;


    }






    .adv-card {


        padding:20px;


    }






    .wizard-card {


        padding:

        20px;


        border-radius:22px;


    }







    .wizard-progress {


        width:100%;


        text-align:center;


    }







    .grade-grid {


        grid-template-columns:

        1fr;


    }







    .grade-card {


        border-radius:20px;


    }






    .grade-card img {


        height:170px;


        object-fit:cover;


    }








    #payments {


        gap:12px;


    }







    .payment-card {


        padding:20px;


    }







    .payment-card div {


        font-size:20px;


    }







    input {


        font-size:16px;


        padding:15px;


    }








    footer {


        font-size:14px;


        padding:

        35px 15px;


    }






}


/* Keep these overrides last so refresh and small screens stay consistent. */

@media(max-width:767px){

    .countdown-inner {
        min-height:94px;
        flex-direction:column;
        gap:5px;
        padding-top:7px;
        padding-bottom:7px;
    }

    .countdown-copy {
        width:100%;
        justify-content:center;
        gap:7px;
        padding:0 8px;
        overflow:hidden;
        font-size:11px;
        line-height:1.4;
        white-space:nowrap;
    }

    .countdown-copy strong {
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .countdown-pulse {
        flex:0 0 9px;
        width:9px;
        height:9px;
    }

    .countdown-units {
        gap:5px;
    }

    .countdown-unit {
        min-width:43px;
        padding:4px 5px;
        border-radius:8px;
    }

    .countdown-unit b {
        font-size:16px;
    }

    .countdown-unit small {
        font-size:9px;
    }

    .payment-redirect-card {
        padding:23px 17px;
        border-radius:22px;
    }

    .payment-redirect-icon {
        width:50px;
        height:50px;
        margin-bottom:10px;
        border-radius:15px;
        font-size:24px;
    }

    .payment-redirect-card h2 {
        font-size:20px;
    }

    .payment-redirect-card p {
        font-size:14px;
        line-height:1.9;
    }

    .footer-logos {
        gap:10px;
    }

    .trust-logo {
        width:135px;
        height:100px;
        border-radius:14px;
    }

    .trust-logo-payping img {
        width:155px;
    }

    .trust-logo-enamad img {
        width:85px;
        max-height:90px;
    }

    .step {
        scroll-margin-top:12vh;
    }

    .step[tabindex="-1"]:focus {
        outline:none;
    }

    .step [hidden] {
        display:none !important;
    }

    #step2 .next,
    #step3 .payment-continue {
        position:static;
        right:auto;
        bottom:auto;
        left:auto;
        width:100%;
    }

    #step2.active .next,
    #step3.active .payment-continue {
        position:fixed;
        right:15px;
        bottom:calc(12px + env(safe-area-inset-bottom));
        left:15px;
        z-index:50;
        width:auto;
        box-shadow:0 12px 30px rgba(15,23,42,.22);
    }

    .grade-grid {
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
    }

    .grade-card {
        min-width:0;
        min-height:0;
        border-radius:14px;
    }

    .grade-card img {
        width:100%;
        height:86px;
        object-fit:cover;
    }

    .grade-card span {
        padding:8px 3px;
        font-size:14px;
        white-space:nowrap;
    }

}

@media(max-width:360px){

    .grade-grid {
        gap:6px;
    }

    .grade-card img {
        height:72px;
    }

    .grade-card span {
        font-size:12px;
    }

}