/* ==========================================================
   RESPONSIVE
   TABLET (992px)
========================================================== */

@media (max-width:992px){

    section{
        padding:90px 0;
    }

    h1{
        font-size:48px;
    }

    h2{
        font-size:34px;
    }

    .hero-container{

        grid-template-columns:1fr;
        gap:60px;

        text-align:center;

    }

    .hero-content{

        order:2;

    }

    .hero-logo{

        margin:0 auto 20px;

        height:70px;

    }

    .hero-image{

        order:1;

        max-width:700px;

        margin:auto;

    }

    .hero-description{

        margin-left:auto;
        margin-right:auto;

    }
	
	.hero-description2{

        margin-left:auto;
        margin-right:auto;
		
    }
	
	ol.hero-description2 {
		margin-left: 20px;
		margin-right:20px;
	}
	


    .hero-buttons{

        justify-content:center;

    }

    .scroll-indicator{

        align-items:center;

    }

    .about-grid{

        grid-template-columns:1fr;

        gap:60px;

    }

    .about-content{

        text-align:center;

    }

    .about-content p{

        text-align:left;

    }

    .values-grid{

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

    }

    .media-grid{

        grid-template-columns:1fr;

    }

    .footer-top{

        flex-direction:column;

        text-align:center;

    }

}


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

@media (max-width:768px){

    body{

        font-size:15px;

    }

    section{

        padding:80px 0;

    }

    h1{

        font-size:38px;

    }

    h2{

        font-size:30px;

    }

    h3{

        font-size:22px;

    }

    .header{

        padding:14px 0;

    }

    .logo-text{

        font-size:20px;

    }

    .hero-logo{

        height:60px;

    }

    .menu-toggle{

        display:block;

    }

    .navbar{

        position:absolute;

        top:100%;
        left:0;

        width:100%;

        background:#fff;

        box-shadow:0 10px 30px rgba(0,0,0,.08);

        display:none;

    }

    .navbar.active{

        display:block;

    }

    .navbar ul{

        flex-direction:column;

        gap:0;

    }

    .navbar li{

        border-bottom:1px solid #ececec;

    }

    .navbar a{

        display:block;

        padding:18px 25px;

    }

    .hero{

        padding-top:140px;

        min-height:auto;

    }

    .hero-container{

        gap:45px;

    }

    .hero-content h2,
    .hero-content h4{

        font-size:28px;

    }

    .hero-description{

        font-size:16px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .btn{

        width:100%;

    }

    .announcement-box{

        flex-direction:column;

        text-align:center;

    }

    .announcement-content p{

        text-align:left;

    }

    .values-grid{

        grid-template-columns:1fr;

    }

    .media-card{

        padding:35px 28px;

    }

    .cta-buttons{

        flex-direction:column;

    }

    .footer-social{

        justify-content:center;

        flex-wrap:wrap;

    }

}

/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:480px){

    .container{

        width:92%;

    }

    h1{

        font-size:32px;

        line-height:1.2;

    }

    h2{

        font-size:26px;

    }

    .hero-content h2,
    .hero-content h4{

        font-size:24px;

    }

    .official-label{

        font-size:11px;

        letter-spacing:1px;

    }

    .hero-image img{

        border-radius:18px;

    }

    .announcement-box{

        padding:28px;

    }

    .announcement-icon{

        width:70px;

        height:70px;

        font-size:28px;

    }

    .value-card{

        padding:35px 25px;

    }

    .value-icon{

        width:75px;

        height:75px;

        font-size:28px;

    }

    .media-icon{

        width:75px;

        height:75px;

        font-size:30px;

    }

    .footer{

        padding-top:60px;

    }

}

/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (min-width:1400px){

    .container{

        width:1280px;

    }

    h1{

        font-size:68px;

    }

    h2{

        font-size:46px;

    }

    .hero-container{

        gap:100px;

    }

}