/*==================================================
RESPONSIVE.CSS
==================================================*/

/* XXL (1400px) */

/* XL (1200px) */

/* LG (992px) */

/* MD (768px) */

/* SM (576px) */

/* XS (430px) */

/* XXS (360px) */

/*==================================================
1400px
==================================================*/

@media (max-width:1400px){

    :root{

        --container:1140px;

    }

}

/*==================================================
1200px
==================================================*/

@media (max-width:1200px){

    :root{

        --container:960px;

    }

    h1{

        font-size:62px;

    }

    h2{

        font-size:48px;

    }

    .hero-title{

        font-size:72px;

    }

    .grid-3{

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

    }

}

/*==================================================
992px
==================================================*/

@media (max-width:992px){

    section{

        padding:90px 0;

    }

    .grid-2{

        grid-template-columns:1fr;

        gap:45px;

    }

    .grid-3{

        grid-template-columns:1fr 1fr;

    }

    .couple-list{

        grid-template-columns:1fr;

    }

    .venue-grid{

        grid-template-columns:1fr;

    }

    .gallery-grid{

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

    }

    .event-meta{

        grid-template-columns:1fr;

    }

    .hero-title{

        font-size:60px;

    }

    .hero-title span{

        font-size:40px;

    }

}

/*==================================================
768px
==================================================*/

@media (max-width:768px){

    section{

        padding:80px 0;

    }

    h1{

        font-size:52px;

    }

    h2{

        font-size:42px;

    }

    h3{

        font-size:30px;

    }

    .section-title{

        margin-bottom:50px;

    }

    .hero-title{

        font-size:52px;

    }

    .hero-title span{

        font-size:34px;

    }

    .hero-quote{

        font-size:16px;

    }

    .count-item{

        width:90px;

        height:90px;

    }

    .count-item span{

        font-size:30px;

    }

    .bible-card{

        padding:45px 30px;

    }

    .c-card-body{

        padding:35px;

    }

    .event-card{

        padding:35px;

    }

    .venue-body{

        padding:30px;

    }

    .gift-card{

        padding:35px;

    }

    .rsvp-box{

        padding:35px;

    }
    
    
    /* ==========================
       MOBILE NAVBAR
    ========================== */
    
    #navbar{
    
        height:70px;
    
        padding:0 20px;
    
    }
    
    .logo{
    
        font-size:24px;

        font-weight:700;
    
        white-space:nowrap;
    
    }
    
    #menuToggle{
    
        display:flex;
    
        align-items:center;
    
        justify-content:center;
    
        font-size:26px;
    
        cursor:pointer;
    
        color:var(--heading);
    
    }
    
    #menu{
    
        position:fixed;
    
        top:70px;
    
        left:0;
    
        right:0;
    
        background:#fff;
    
        display:flex;
    
        flex-direction:column;
    
        align-items:center;
    
        gap:0;
    
        padding:20px 0;
    
        box-shadow:0 12px 30px rgba(0,0,0,.08);
    
        transform:translateY(-120%);
    
        opacity:0;
    
        visibility:hidden;
    
        transition:.35s;
    
    }
    
    #menu.active{
    
        transform:translateY(0);
    
        opacity:1;
    
        visibility:visible;
    
    }
    
    #menu li{
    
        width:100%;
    
        text-align:center;
    
    }
    
    #menu a{
    
        display:block;
    
        padding:15px 20px;
    
    }
    
    .nav{

        display:none;
    
    }

}

/*==================================================
576px
==================================================*/

@media (max-width:576px){

    .container{

        width:92%;

    }

    .hero-title{

        font-size:42px;

    }

    .hero-title span{

        font-size:28px;

    }

    .hero-button{

        width:100%;

    }

    .btn{

        width:100%;

    }

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .grid-3{

        grid-template-columns:1fr;

    }

    .footer h2{

        font-size:42px;

    }

    .couple-circle{

        width:120px;

        height:120px;

    }

    .couple-circle h2{

        font-size:34px;

    }

    .countdown{

        gap:10px;

    }

    .count-item{

        width:72px;

        height:72px;

    }

    .count-item span{

        font-size:24px;

    }

}

/*==================================================
430px
==================================================*/

@media (max-width:430px){

    h1{

        font-size:42px;

    }

    h2{

        font-size:34px;

    }

    .hero-title{

        font-size:36px;

    }

    .hero-title span{

        font-size:24px;

    }

    .hero-subtitle{

        font-size:11px;

        letter-spacing:3px;

    }

    .section-title h2{

        font-size:34px;

    }

    .section-title p{

        font-size:15px;

    }

    .count-item{

        width:68px;

        height:68px;

    }

    .count-item small{

        font-size:10px;

    }

}

/*==================================================
360px
==================================================*/

@media (max-width:360px){

    .hero-title{

        font-size:30px;

    }

    .hero-title span{

        font-size:20px;

    }

    .btn{

        padding:14px 20px;

        font-size:14px;

    }

    .footer h2{

        font-size:34px;

    }

    .count-item{

        width:60px;

        height:60px;

    }

    .count-item span{

        font-size:20px;

    }

}