/* Hero */

@media(max-width:992px){

.hero-content h1{

font-size:54px;

}

.hero-content{

text-align:center;

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

}

}

@media(max-width:768px){

.hero-content h1{

font-size:38px;

}

.hero-content p{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

}

.hero-stats{

flex-wrap:wrap;

gap:30px;

}

}

/*==============================
        MOBILE HEADER
==============================*/

@media(max-width:992px){

.navbar{

display:none;

position:absolute;

top:100%;

left:0;

width:100%;

background:#fff;

box-shadow:0 10px 20px rgba(0,0,0,.1);

}

.navbar.active{

display:block;

}

.navbar ul{

flex-direction:column;

padding:20px;

gap:18px;

}

.menu-toggle{

display:block;

}

.btn-primary{

display:none;

}

.top-bar{

display:none;

}

}

<link rel="stylesheet" href="assets/css/style.css">


/*==============================
        ABOUT
===============================*/

@media(max-width:991px){

.about-wrapper{

grid-template-columns:1fr;

gap:60px;

}

.about-image{

max-width:550px;

margin:auto;

}

.about-content{

text-align:center;

}

.about-list{

grid-template-columns:1fr;

text-align:left;

}

.experience-box{

right:20px;

bottom:20px;

}

.about-content h2{

font-size:38px;

}

}

@media(max-width:576px){

.about{

padding:80px 0;

}

.about-content h2{

font-size:32px;

}

.about-content p{

font-size:16px;

line-height:28px;

}

.experience-box{

width:150px;

padding:20px;

}

.experience-box h3{

font-size:34px;

}

}


/*====================================
        WHY CHOOSE NIH
====================================*/

@media(max-width:991px){

.choose-grid{

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

}

.section-heading h2{

font-size:38px;

}

}

@media(max-width:768px){

.choose-grid{

grid-template-columns:1fr;

}

.section-heading{

margin-bottom:50px;

}

.section-heading h2{

font-size:32px;

}

.choose-card{

padding:35px 25px;

}

}


@media(max-width:991px){

.gallery-grid{

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

}

}

@media(max-width:768px){

.gallery-grid{

grid-template-columns:1fr;

grid-auto-rows:250px;

}

.gallery-item.large{

grid-row:span 1;

}

}

/*==================================================
                HERO MOBILE
==================================================*/

@media(max-width:991px){

.hero{

min-height:700px;

}

.hero-content{

margin-left:0;

max-width:100%;

text-align:center;

padding:0 20px;

}

.hero-content h1{

font-size:42px;

line-height:1.2;

}

.hero-content p{

font-size:17px;

}

.hero-buttons{

justify-content:center;

flex-wrap:wrap;

}

.hero-stats{

justify-content:center;

flex-wrap:wrap;

}

}

@media(max-width:768px){

.hero{

min-height:650px;

}

.hero-content h1{

font-size:34px;

}

.hero-content p{

font-size:16px;

line-height:28px;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons a{

width:100%;

text-align:center;

}

.hero-stats{

gap:25px;

margin-top:35px;

}

.hero-stats h3{

font-size:30px;

}

}


/*=========================================
        WHY CHOOSE RESPONSIVE
=========================================*/

@media (max-width:991px){

.choose-grid{

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

    gap:25px;

}

}

@media (max-width:768px){

.why-choose{

    padding:70px 0;

}

.section-heading h2{

    font-size:34px;

}

.section-heading p{

    font-size:16px;

    line-height:28px;

}

.choose-grid{

    grid-template-columns:1fr;

    gap:20px;

}

.choose-card{

    padding:35px 25px;

}

.choose-card h3{

    font-size:26px;

}

.choose-card p{

    line-height:28px;

}

}


/*========================================
        ABOUT MOBILE FIX
========================================*/

@media (max-width:768px){

.about-wrapper{

    grid-template-columns:1fr;

    gap:40px;

}

.about-image{

    text-align:center;

}

.experience-box{

    position:relative;

    right:auto;

    left:auto;

    bottom:auto;

    margin:20px auto 0;

    width:180px;

}

.about-content{

    text-align:center;

}

.about-list{

    grid-template-columns:1fr;

}

}