/* ==========================================================
   SR COMPUTER SYSTEM
   Responsive Styles
========================================================== */

/* ==========================================================
   MOBILE DEVICES
   (0px - 767.98px)
========================================================== */

@media (max-width:767.98px){

    /* ===============================
       Global
    =============================== */

    .container{
        padding-left:20px;
        padding-right:20px;
    }

    /* ===============================
       Top Bar
    =============================== */

    .top-bar{

        padding:6px 0;

    }

    .topbar-wrapper{

        flex-direction:column;
        gap:6px;

    }

    .topbar-left{

        justify-content:center;
        flex-wrap:wrap;
        gap:10px;
        font-size:13px;

    }

    .topbar-right{

        justify-content:center;
        gap:16px;

    }

    /* ===============================
       Navbar
    =============================== */

    .custom-navbar{

        padding:10px 0;

    }

    .logo{

        max-height:42px;

    }

    .navbar-toggler{

        border:none;
        padding:0;

    }

    .navbar-toggler:focus{

        box-shadow:none;

    }

    .navbar-toggler i{

        font-size:30px;
        color:#ffffff;

    }

    .navbar-collapse{

        margin-top:12px;
        background:#081523;
        border-radius:12px;
        padding:12px 16px;

    }

    .navbar-nav .nav-link{

        padding:12px 0;
        font-size:15px;

    }

    .btn-whatsapp{

        width:100%;
        margin-top:15px;

    }

    /* ===============================
       Hero
    =============================== */

    .hero{

        padding:70px 0 40px;

    }

    .hero h1{

        font-size:1.9rem;
        line-height:1.2;

    }

    .hero p{

        font-size:15px;

    }

    .hero .btn{

        padding:12px 28px;
        font-size:15px;
        border-radius:30px;

    }

.hero-image{

    margin-top:25px;

}

.hero-image img{

    max-width:260px;

}

    /* ===============================
       Footer
    =============================== */

    .footer-top{

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

    }

    .footer-col{

        width:100%;
        text-align:left;

    }

    .footer-bottom{

        display:flex;
        flex-direction:column;
        gap:15px;
        text-align:center;

    }

    .social-links{

        justify-content:center;

    }

}

/* ==========================================================
   TABLET
   (768px - 991.98px)
========================================================== */

@media (min-width:768px) and (max-width:991.98px){

    .hero h1{

        font-size:2.4rem;

    }

    .hero-image img{

        max-width:320px;

    }

}