/* ==========================================================
   NHẬT NAM TECHNOLOGY WEBSITE 2.0
   RESPONSIVE CSS
   ========================================================== */


/* ==========================================================
   LARGE DESKTOP
   1400px ↓
========================================================== */

@media (max-width: 1399.98px){

    .container{
        max-width:1140px;
    }

}


/* ==========================================================
   DESKTOP
   1200px ↓
========================================================== */

@media (max-width:1199.98px){

    .nn-hero-title{

        font-size:2.6rem;

    }

    .nn-hero .row{

        min-height:560px;

    }

}


/* ==========================================================
   TABLET
   992px ↓
========================================================== */

@media (max-width:991.98px){

    /* ===========================
       Header
    =========================== */

    .nn-header-top{

        display:none;

    }

    .nn-navbar{

        min-height:78px;

        padding:10px 0;

    }

    .nn-logo img{

        height:54px;

    }

    .navbar-collapse{

        margin-top:18px;

        padding:20px;

        border-radius:16px;

        background:#ffffff;

        box-shadow:0 12px 35px rgba(0,0,0,.08);

    }

    .nn-navbar .navbar-nav{

        gap:8px;

        align-items:flex-start !important;

    }

    .nn-navbar .nav-link{

        width:100%;

        padding:12px 0;

    }

    .nn-navbar .nav-link::after{

        display:none;

    }

    .nn-navbar .nn-btn-primary{

        width:100%;

        margin-top:12px;

        text-align:center;

    }


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

    .nn-hero{

        padding:80px 0;

    }

    .nn-hero .row{

        min-height:auto;

    }

    .nn-hero-title{

        font-size:2.3rem;

    }

    .nn-hero-description{

        max-width:100%;

    }

    .nn-hero-image{

        margin-top:50px;

    }

}


/* ==========================================================
   MOBILE
   768px ↓
========================================================== */

@media (max-width:767.98px){

    section{

        padding:60px 0;

    }

    .nn-navbar{

        min-height:72px;

    }

    .nn-logo img{

        height:46px;

    }

    .nn-hero{

        padding:60px 0;

        text-align:center;

    }

    .nn-hero-subheading{

        font-size:.82rem;

    }

    .nn-hero-title{

        font-size:2rem;

    }

    .nn-hero-description{

        font-size:1rem;

    }

    .nn-hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .nn-hero-buttons .btn{

        width:100%;

        max-width:320px;

    }

    .nn-hero-image{

        margin-top:40px;

    }

}


/* ==========================================================
   SMALL MOBILE
   576px ↓
========================================================== */

@media (max-width:575.98px){

    .container{

        padding-left:18px;

        padding-right:18px;

    }

    .nn-hero-title{

        font-size:1.75rem;

        line-height:1.4;

    }

    .nn-hero-subheading{

        padding:6px 14px;

    }

    .nn-hero-image img{

        border-radius:18px;

    }

}


/* ==========================================================
   EXTRA SMALL
   400px ↓
========================================================== */

@media (max-width:399.98px){

    .nn-logo img{

        height:42px;

    }

    .nn-hero-title{

        font-size:1.55rem;

    }

    .nn-hero-buttons .btn{

        font-size:.92rem;

        padding:12px 18px;

    }

}