/* ==========================================
   TABLET
========================================== */

@media (max-width:992px){

    .nav-menu{
        display:none;
    }

    .menu-btn{
        display:block;
    }

    .logo-title{
        font-size:28px;
    }

    /* HERO */

    .hero{
        padding:0;
    }

    .hero-wrapper{
        display:grid;
        grid-template-columns:1fr;
        height:auto;
        min-height:auto;
    }

    .hero-image{
        order:1;
        width:100%;
        height:420px;
    }

    .hero-image img{
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center top;
    }

    .hero-content-wrap{
        order:2;
        margin:0;
        padding:50px 40px;
        justify-content:center;
        text-align:center;
    }

    .hero-content{
        max-width:700px;
        margin:0 auto;
    }

    .hero-subtitle{
        font-size:13px;
        letter-spacing:2px;
    }

    .hero h1{
        font-size:64px;
        line-height:.95;
        margin-bottom:22px;
    }

    .hero p{
        max-width:680px;
        margin:0 auto 35px;
        font-size:20px;
    }

    .hero-buttons{
        justify-content:center;
    }

}


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

@media (max-width:576px){

    .navbar{
        height:75px;
    }

    .logo-title{
        font-size:22px;
    }

    .logo-tagline{
        display:none;
    }

    /* HERO */

    .hero-image{
        height:260px;
    }

    .hero-content-wrap{
        padding:35px 24px 45px;
    }

    .hero-subtitle{
        font-size:11px;
        letter-spacing:2px;
    }

    .hero h1{
        font-size:48px;
        line-height:.95;
    }

    .hero p{
        font-size:18px;
        line-height:1.8;
        margin-bottom:30px;
    }

    .hero-buttons{
        display:flex;
        flex-direction:column;
        gap:16px;
        width:100%;
    }

    .btn{
        width:100%;
        padding:16px 20px;
    }

}


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

@media (max-width:480px){

    .mobile-menu{
        width:100%;
    }

    .hero-image{
        height:220px;
    }

    .hero-content-wrap{
        padding:30px 20px 40px;
    }

    .hero h1{
        font-size:42px;
    }

    .hero p{
        font-size:17px;
    }

}

/*=========================================
            TABLET
=========================================*/

@media(max-width:992px){

    .footer-top{
        grid-template-columns:repeat(2,1fr);
        gap:50px;
    }

    .footer-logo{
        font-size:32px;
    }

    .footer-bottom{
        flex-direction:column;
        gap:12px;
        text-align:center;
    }

}

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

@media(max-width:576px){

    .site-footer{
        padding:70px 0 0;
    }

    .footer-top{
        grid-template-columns:1fr;
        gap:45px;
    }

    .footer-logo{
        font-size:28px;
    }

    .footer-text{
        max-width:100%;
    }

    .footer-social{
        flex-wrap:wrap;
    }

    .footer-column h3{
        margin-bottom:18px;
    }

    .newsletter-form input,
    .newsletter-form button{
        height:50px;
    }

    .footer-bottom{
        padding:22px 0;
        font-size:13px;
    }

}

/*======================================
  Large Laptop
======================================*/
@media (max-width:1200px){

    .historic-grid{
        grid-template-columns:repeat(3,1fr);
        gap:25px;
    }

    .section-heading h2{
        font-size:42px;
    }

}


/*======================================
  Tablet
======================================*/
@media (max-width:991px){

    .historic-moments{
        padding:80px 0;
    }

    .section-heading{
        margin-bottom:45px;
    }

    .section-heading h2{
        font-size:36px;
    }

    .section-heading p{
        font-size:16px;
    }

    .historic-grid{
        grid-template-columns:repeat(2,1fr);
        gap:25px;
    }

    .historic-content{
        padding:18px;
    }

    .historic-content h3{
        font-size:20px;
    }

}


/*======================================
  Mobile
======================================*/
@media (max-width:767px){

    .historic-moments{
        padding:60px 0;
    }

    .section-heading{
        margin-bottom:35px;
    }

    .section-heading h2{
        font-size:30px;
    }

    .section-heading p{
        font-size:15px;
        line-height:1.7;
    }

    .historic-grid{
        grid-template-columns:1fr;
        gap:22px;
    }

    .historic-content{
        padding:18px;
    }

    .historic-content h3{
        font-size:22px;
    }

    .load-more-btn{
        width:100%;
        max-width:260px;
    }

}


/*======================================
  Small Mobile
======================================*/
@media (max-width:480px){

    .section-tag{
        font-size:11px;
        letter-spacing:1.5px;
    }

    .section-heading h2{
        font-size:26px;
    }

    .historic-content{
        padding:16px;
    }

    .historic-category{
        font-size:11px;
    }

    .historic-content h3{
        font-size:20px;
    }

}
/*=========================================
TABLET
=========================================*/

@media (max-width:991px){

    .about-wrapper{
        grid-template-columns:1fr;
        gap:40px;
    }

    .about-left{
        grid-template-columns:1fr;
        gap:35px;
    }

    .about-image{
        width:100%;
    }

    .about-image img{
        width:100%;
        height:auto;
        aspect-ratio:4/3;
        object-fit:cover;
    }

    .about-content{
        width:100%;
        padding:0;
    }

    .about-title{
        font-size:48px;
        line-height:1.15;
    }

    .about-content p{
        font-size:18px;
        line-height:1.8;
    }

    .about-sidebar{
        padding-top:0;
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:18px;
    }

}

@media (max-width:767px){

    .about-section{
        padding:60px 0;
    }

    .about-wrapper{
        display:block;
    }

    .about-left{
        display:block;
    }

    .about-image{
        margin-bottom:30px;
    }

    .about-image img{
        width:100%;
        height:auto;
        border-radius:16px;
    }

    .about-subtitle{
        font-size:13px;
        letter-spacing:2px;
    }

    .about-title{
        font-size:42px;
        line-height:1.15;
        margin-bottom:20px;
    }

    .about-content p{
        font-size:17px;
        line-height:1.8;
    }

    .about-btn{
        width:100%;
        justify-content:center;
        margin-top:25px;
    }

    .about-sidebar{
        display:flex;
        flex-direction:column;
        gap:18px;
        margin-top:35px;
    }

    .about-card{
        min-height:auto;
    }

}

/*=========================================
TABLET
=========================================*/

@media (max-width:991px){

    .sb-subscribe-container{

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

    }

    .sb-subscribe-left{

        display:flex;
        align-items:center;
        justify-content:center;
        gap:18px;

    }

    .sb-subscribe-form{

        width:100%;
        max-width:650px;
        display:flex;
        flex-direction:row;

    }

    .sb-subscribe-input{

        flex:1;
        height:52px;
        padding:11px 18px;

    }

    .sb-subscribe-btn{

        width:180px;
        height:52px;

    }

}


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

@media (max-width:767px){

    .sb-subscribe-strip{

        padding:40px 20px;

    }

    .sb-subscribe-container{

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

    }

    .sb-subscribe-left{

        display:flex;
        flex-direction:column;
        align-items:center;
        gap:18px;

    }

    .sb-subscribe-icon{

        width:70px;
        height:70px;
        margin:0 auto;

    }

    .sb-subscribe-text h2{

        font-size:30px;
        margin-bottom:12px;

    }

    .sb-subscribe-text p{

        font-size:16px;
        line-height:1.7;
        max-width:320px;
        margin:0 auto;

    }

    .sb-subscribe-form{

        display:flex;
        flex-direction:column;
        width:100%;
        gap:14px;

    }

    .sb-subscribe-input{

        width:100%;
        height:52px;

    }

    .sb-subscribe-btn{

        width:100%;
        height:52px;

    }

}