/*==================================================
                RESPONSIVE
==================================================*/

/* ---------- TABLET (max 900px) ---------- */
@media(max-width:900px){

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

    .image-box{
        max-width:420px;
        margin:auto;
    }

    .dashboard-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .gallery-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .dateplan-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .wishlist-grid,
    .rules-grid,
    .promise-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .about-title h2,
    .section-title h2{
        font-size:36px;
    }

    .gallery-title h1{
        font-size:42px;
    }
}

/* ---------- MOBILE (max 600px) ---------- */
@media(max-width:600px){

    .navbar{
        padding:0 18px;
    }

    .menu{
        gap:14px;
    }

    .menu a{
        font-size:12.5px;
    }

    .about-cards{
        flex-direction:column;
    }

    .dashboard-grid{
        grid-template-columns:1fr;
    }

    .gallery-grid{
        grid-template-columns:1fr;
    }

    .dateplan-grid{
        grid-template-columns:1fr;
    }

    .wishlist-grid,
    .rules-grid,
    .promise-grid{
        grid-template-columns:1fr;
    }

    .timeline-list{
        padding-left:32px;
    }

    .timeline-dot{
        left:-44px;
        width:26px;
        height:26px;
        font-size:10px;
    }

    .letter-paper{
        padding:35px 25px;
    }

    .countdown-box{
        width:75px;
        padding:16px 6px;
    }

    .countdown-box .num{
        font-size:24px;
    }

    .quiz-options{
        grid-template-columns:1fr;
    }

    .envelope{
        height:190px;
    }

    .envelope-body::before{
        border-width:95px 0 95px 145px;
    }

    .envelope-body::after{
        border-width:95px 145px 95px 0;
    }

    .envelope-flap{
        border-width:0 145px 95px 145px;
    }

    .envelope.open .letter-inside{
        transform:translate(-50%,-210px);
    }

    .about-title h2,
    .section-title h2{
        font-size:28px;
    }

    .about-text h3{
        font-size:28px;
    }

    .gallery-title h1{
        font-size:32px;
    }

    .meter-you-box{
        padding:28px 22px;
    }

    .container{
        width:92%;
    }
}