/*=========================================================
  Electronic Jacquard Sales & Services
  File : responsive.css
  Version : 1.0.0
  Description : Responsive Design Rules
=========================================================*/


/*=========================================================
  LARGE DESKTOP
  1400px+
=========================================================*/


@media (min-width:1400px){


    .container-custom{

        width:min(
            calc(100% - 80px),
            var(--container)
        );

    }


}



/*=========================================================
  LAPTOP
  1200px - 1399px
=========================================================*/


@media (max-width:1399px){


    :root{

        --container:1140px;

    }



    .section-padding{

        padding-block:80px;

    }


}



/*=========================================================
  TABLET LANDSCAPE
  992px - 1199px
=========================================================*/


@media(max-width:1199px){


    :root{


        --header-height:80px;


    }



    .navbar-brand{

        font-size:20px;

    }



    .section-title__heading{

        font-size:38px;

    }



}



/*=========================================================
  TABLET PORTRAIT
  768px - 991px
=========================================================*/


@media(max-width:991px){


    :root{


        --space-96:70px;

        --space-120:80px;


    }



    .container-custom{


        width:calc(100% - 32px);


    }



    /* Navbar */


    .navbar-collapse{


        background:var(--bg-card);

        padding:25px;

        margin-top:15px;

        border-radius:var(--radius-lg);

        box-shadow:var(--shadow-md);


    }



    .nav-link{


        padding:12px 0;


    }



    .nav-link::after{


        display:none;


    }



    /* Sections */


    .section-padding{


        padding-block:70px;


    }



    /* Grid */


    .grid-4{


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


    }



    .grid-3{


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


    }



    /* Feature cards */


    .feature-card{


        flex-direction:column;

        text-align:center;


    }



    .feature-card__icon{


        margin:auto;


    }



}



/*=========================================================
  MOBILE
  576px - 767px
=========================================================*/


@media(max-width:767px){


    :root{


        --header-height:75px;


    }



    body{


        font-size:15px;


    }



    .section-padding{


        padding-block:55px;


    }



    .section-title{


        margin-bottom:35px;


    }



    .section-title__heading{


        font-size:30px;


    }



    .section-title__description{


        font-size:14px;


    }



    /* Buttons */


    .btn-custom{


        height:48px;

        padding-inline:22px;

        font-size:14px;


    }



    /* Cards */


    .card-custom{


        padding:22px;


    }



    .product-card__image{


        height:220px;


    }



    .service-card{


        padding:30px 20px;


    }



    /* Grid */


    .grid-2,
    .grid-3,
    .grid-4{


        grid-template-columns:1fr;


    }



    /* Floating Buttons */


    .floating-btn{


        width:50px;

        height:50px;

        right:15px;


    }



    .whatsapp-btn{


        bottom:80px;


    }



    .call-btn{


        bottom:20px;


    }



    .scroll-top{


        right:15px;

        bottom:140px;


    }



}



/*=========================================================
  SMALL MOBILE
  Below 576px
=========================================================*/


@media(max-width:575px){


    .container-custom{


        width:calc(100% - 24px);


    }



    .navbar-brand{


        font-size:18px;


    }



    .navbar-brand i{


        font-size:20px;


    }



    .section-title__heading{


        font-size:26px;


    }



    .section-title__tag{


        font-size:12px;


    }



    .btn-custom{


        width:100%;


    }



    .hero-buttons{


        flex-direction:column;


    }



}



/*=========================================================
  VERY SMALL DEVICES
  Below 400px
=========================================================*/


@media(max-width:400px){


    .navbar-brand{


        font-size:16px;


    }



    .floating-btn{


        width:45px;

        height:45px;


    }



}



/*=========================================================
  TOUCH DEVICES
=========================================================*/


@media(hover:none){


    .card-custom:hover,
    .product-card:hover,
    .service-card:hover{


        transform:none;


    }



}



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


@media(max-height:500px)
and (orientation:landscape){


    .section-padding{


        padding-block:40px;


    }



}



/*=========================================================
  PRINT
=========================================================*/


@media print{


    .navbar,
    .footer,
    .floating-btn,
    .scroll-progress{


        display:none!important;


    }


}
@media(max-width:991px){


.hero{

text-align:center;

padding-top:120px;

}



.hero-buttons{

justify-content:center;

}



.hero-machine{

margin-top:40px;

}



.hero-machine img{

max-height:350px;

}


}
@media(max-width:767px){


.product-card__image{

height:230px;

}


.product-card__body{

padding:20px;

}


}
@media(max-width:767px){


.service-card{

text-align:center;

}


.service-card__icon{

margin-inline:auto;

}


}
@media(max-width:991px){


.about-image img{

height:350px;

}


.about-section{

text-align:center;

}


.about-feature{

justify-content:center;

}


}
@media(max-width:767px){


.statistics-section{

padding:70px 0;

}



.stat-card h2{

font-size:42px;

}


}
@media(max-width:767px){


.testimonial-card{

padding:25px;

}


.trust-row{

gap:20px;

flex-direction:column;

align-items:center;

}


}

@media(max-width:767px){


.contact-form{

padding:20px;

}


.footer{

text-align:center;

}


.footer-social{

justify-content:center;

}


}