/*==================================================
    SAANVIKA STUDIOS
    RESPONSIVE.CSS
==================================================*/

/*=========================================
        LARGE DESKTOP (1400px+)
=========================================*/

@media (min-width:1400px){

    .container{
        max-width:1320px;
    }

    .hero-content h1{
        font-size:84px;
    }

    .hero-content p{
        font-size:22px;
    }

}

/*=========================================
        LAPTOP (1200px)
=========================================*/

@media (max-width:1200px){

    .hero-content h1{
        font-size:64px;
    }

    .navbar-nav{
        gap:18px;
    }

}

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

@media (max-width:992px){

    section{
        padding:80px 0;
    }

    .navbar{

        padding:15px 0;

    }

    .navbar-collapse{

        background:#111;

        padding:25px;

        border-radius:12px;

        margin-top:15px;

    }

    .navbar-nav{

        gap:15px;

        text-align:center;

    }

    .navbar-nav li{

        margin:10px 0;

    }

    .book-btn{

        display:block;

        margin:25px auto 0;

        width:220px;

        text-align:center;

    }

    .hero-content h1{

        font-size:54px;

    }

    .hero-content h4{

        font-size:16px;

        letter-spacing:4px;

    }

    .hero-content p{

        font-size:18px;

        padding:0 20px;

    }

}

/*=========================================
        MOBILE (768px)
=========================================*/

@media (max-width:768px){

    section{

        padding:70px 0;

    }

    .navbar-brand span{

        font-size:22px;

    }

    .navbar-brand small{

        letter-spacing:4px;

    }

    .hero-content h1{

        font-size:42px;

        line-height:1.3;

    }

    .hero-content h4{

        font-size:14px;

    }

    .hero-content p{

        font-size:17px;

    }

    .hero-buttons{

        display:flex;

        flex-direction:column;

        align-items:center;

    }

    .btn-primary-custom,

    .btn-outline-custom{

        width:250px;

        text-align:center;

    }

    .section-title h2{

        font-size:34px;

    }

    .section-title p{

        font-size:15px;

    }

    .card-box{

        padding:25px;

    }

}

/*=========================================
        SMALL MOBILE (576px)
=========================================*/

@media (max-width:576px){

    .container{

        width:94%;

    }

    #hero{

        height:90vh;

    }

    .hero-content h1{

        font-size:34px;

    }

    .hero-content p{

        font-size:15px;

        line-height:1.8;

    }

    .btn-primary-custom,

    .btn-outline-custom{

        width:100%;

        margin:8px 0;

    }

    .section-title{

        margin-bottom:45px;

    }

    .section-title h2{

        font-size:28px;

    }

    .whatsapp-btn{

        width:58px;

        height:58px;

        font-size:26px;

        right:18px;

        bottom:18px;

    }

}

/*=========================================
        EXTRA SMALL DEVICES (400px)
=========================================*/

@media (max-width:400px){

    .hero-content h1{

        font-size:28px;

    }

    .hero-content h4{

        letter-spacing:2px;

        font-size:13px;

    }

    .hero-content p{

        font-size:14px;

    }

    .navbar-brand span{

        font-size:20px;

    }

    .book-btn{

        width:100%;

    }

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

HERO MOBILE

==================================*/

@media(max-width:992px){

.hero-logo{

max-width:320px;

margin-top:50px;

}

.hero-content{

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.hero-content h1{

font-size:56px;

}

}

@media(max-width:576px){

.hero-logo{

max-width:240px;

}

.hero-content h1{

font-size:42px;

}

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

PORTFOLIO RESPONSIVE

====================================*/

@media(max-width:992px){

.gallery-grid{

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

}

#portfolio-hero h1{

font-size:52px;

}

}

@media(max-width:768px){

@media(max-width:992px){

.gallery-grid{

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

grid-auto-rows:220px;

}

.gallery-item.wide,
.gallery-item.large{

grid-column:span 2;

}

.gallery-item.tall{

grid-row:span 2;

}

}

@media(max-width:768px){

.gallery-grid{

grid-template-columns:1fr;

grid-auto-rows:250px;

}

.gallery-item,
.gallery-item.wide,
.gallery-item.large,
.gallery-item.tall{

grid-column:span 1;

grid-row:span 1;

}

}

.filter-buttons button{

width:100%;

}

#portfolio-hero{

height:45vh;

}

#portfolio-hero h1{

font-size:40px;

}

}