/* ==========================================
   LARGE DEVICES (1200px and below)
========================================== */

@media (max-width:1200px){

    .hero-section h1{
        font-size:60px;
    }
    
    .hero-section h2{
        font-size:28px;
    }
    
    .hero-image{
        max-width:520px;
    }
    
    }
    
    /* ==========================================
       LAPTOPS (992px and below)
    ========================================== */
    
    @media (max-width:992px){
    
    section{
        padding:70px 0;
    }
    
    .navbar{
        background:#000;
        padding:15px;
    }
    
    .navbar-nav{
        gap:15px;
        padding:25px 0;
        text-align:center;
    }
    
    .whatsapp-btn{
        display:block;
        width:100%;
        text-align:center;
        margin-top:15px;
    }
    
    .hero-section{
        text-align:center;
        padding-top:150px;
    }
    
    .hero-section h1{
        font-size:52px;
    }
    
    .hero-section h2{
        font-size:24px;
        letter-spacing:4px;
    }
    
    .hero-section p{
        margin-left:auto;
        margin-right:auto;
    }
    
    .hero-buttons{
        justify-content:center;
    }
    
    .features{
        justify-content:center;
    }
    
    .hero-image{
        margin-top:50px;
        max-width:450px;
    }
    
    .about{
        text-align:center;
    }
    
    .about .btn{
        margin-bottom:40px;
    }
    
    .info-box{
        text-align:left;
    }
    
    .contact{
        text-align:center;
    }
    
    .contact img{
        margin-bottom:40px;
    }
    
    .contact-list li{
        justify-content:center;
        text-align:left;
    }
    
    .section-title h2{
        font-size:34px;
    }
    
    }
    
    /* ==========================================
       TABLETS (768px and below)
    ========================================== */
    
    @media (max-width:768px){
    
    .logo{
        height:50px;
    }
    
    .hero-section h1{
        font-size:42px;
    }
    
    .hero-section h2{
        font-size:20px;
    }
    
    .hero-section p{
        font-size:16px;
    }
    
    .hero-buttons{
        flex-direction:column;
    }
    
    .hero-buttons .btn{
        width:100%;
    }
    
    .features{
        gap:20px;
    }
    
    .features div{
        width:45%;
    }
    
    .about h2,
    .contact h2{
        font-size:32px;
    }
    
    .product-card{
        padding:30px;
    }
    
    .product-card img{
        width:200px;
    }
    
    .why-us i{
        width:80px;
        height:80px;
        font-size:30px;
    }
    
    .section-title h2{
        font-size:30px;
    }
    
    }
    
    /* ==========================================
       MOBILE (576px and below)
    ========================================== */
    
    @media (max-width:576px){
    
    .container{
        width:92%;
    }
    
    .hero-section{
        min-height:auto;
    }
    
    .hero-section h1{
        font-size:34px;
    }
    
    .hero-section h2{
        font-size:18px;
    }
    
    .hero-section p{
        font-size:15px;
    }
    
    .features{
        flex-direction:column;
        align-items:center;
    }
    
    .features div{
        width:100%;
    }
    
    .about h2,
    .contact h2{
        font-size:28px;
    }
    
    .section-title h2{
        font-size:26px;
    }
    
    .product-card{
        padding:25px;
    }
    
    .product-card h3{
        font-size:24px;
    }
    
    .product-card img{
        width:170px;
    }
    
    .info-box{
        flex-direction:column;
        text-align:center;
    }
    
    .info-box i{
        margin-bottom:10px;
    }
    
    .contact-list li{
        flex-direction:column;
        text-align:center;
    }
    
    .contact-list i{
        margin:auto;
    }
    
    .floating-whatsapp{
        width:58px;
        height:58px;
        font-size:26px;
        right:18px;
        bottom:18px;
    }
    
    .scroll-top{
        width:48px;
        height:48px;
        right:18px;
        bottom:90px;
    }
    
    footer{
        padding:25px 0;
    }
    
    footer p{
        font-size:14px;
    }
    
    }
    
    /* ==========================================
       EXTRA SMALL (400px and below)
    ========================================== */
    
    @media (max-width:400px){
    
    .hero-section h1{
        font-size:28px;
    }
    
    .hero-section h2{
        font-size:16px;
    }
    
    .hero-section p{
        font-size:14px;
    }
    
    .btn{
        padding:12px 20px;
        font-size:14px;
    }
    
    .product-card{
        padding:20px;
    }
    
    .product-card img{
        width:150px;
    }
    
    }