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


@media (max-width:900px){


    /* HERO */

    .hero{


        min-height:100svh;


    }



    .hero small{


        letter-spacing:3px;

        font-size:11px;


    }



    .hero small::before,
    .hero small::after{


        width:35px;


    }



    .hero h1{


        font-size:
        clamp(65px,15vw,100px);


        margin:25px 0;


    }



    .hero h1 span{


        margin:0 10px;


    }



    .hero p{


        font-size:15px;

        padding:14px 25px;


    }



    .view-btn{


        bottom:65px;


        width:80%;


        max-width:300px;


    }




    /* WELCOME */


    .welcome{


        padding:90px 15px;


    }



    .welcome-container{


        padding:55px 30px;


        border-radius:30px;


    }



    .welcome h2{


        font-size:42px;


    }



    .welcome p{


        font-size:21px;


    }



    .verses{


        grid-template-columns:1fr;


        gap:20px;


        margin-top:50px;


    }



    .couple-grid{


        grid-template-columns:1fr;


        margin-top:60px;


    }




    .person-card{


        padding:30px 20px;


    }


}




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


@media(max-width:600px){



    /* HERO */


    .hero-content{


        width:94%;


    }



    .hero small{


        gap:10px;


        letter-spacing:2px;


    }



    .hero small::before,
    .hero small::after{


        width:25px;


    }




    .hero h1{


        font-size:70px;


        line-height:1.05;


    }



    .hero h1 span{


        display:block;


        margin:5px 0;


    }



    .hero p{


        letter-spacing:1px;


        font-size:14px;


    }



    .view-btn{


        padding:16px 25px;


        font-size:15px;


    }




    .scroll-indicator{


        font-size:22px;


    }




    /* WELCOME */


    .welcome{


        padding:70px 12px;


    }



    .welcome-container{


        padding:45px 20px;


        border-radius:25px;


    }




    .heart{


        width:75px;


        height:75px;


        font-size:30px;


    }



    .welcome small{


        font-size:11px;


        letter-spacing:3px;


    }




    .welcome h2{


        font-size:34px;


        line-height:1.3;


    }



    .welcome p{


        font-size:19px;


        line-height:1.7;


    }





    /* VERSES */


    .verse-card{


        padding:25px 20px;


        border-radius:20px;


    }



    .verse-card blockquote{


        font-size:21px;


    }




    /* NOIVOS */


    .person-card img{


        width:140px;


        height:140px;


    }



    .person-card h3{


        font-size:45px;


    }



    .person-card p{


        font-size:19px;


    }



}

/*=====================================
    MEMORY
======================================*/

@media (max-width:768px){

    .memory-section{

        margin-top:90px;

    }

    .memory-photo-wrapper{

        width:95%;

        height:420px;

        border-radius:

            170px
            170px
            165px
            165px;


    }

    .memory-content h3{

        font-size:36px;

    }

    .memory-content p{

        font-size:18px;

    }

}

/*=====================================
    AGENDA
======================================*/

@media (max-width:992px){

    .agenda{

        padding:110px 25px;

    }

    .agenda-title{

        font-size:58px;

    }

    .agenda-date span{

        font-size:28px;

    }

    .agenda-date strong{

        font-size:36px;

    }

    .agenda-events{

        margin:80px 0;

        gap:60px;

    }

    .agenda-item h3{

        font-size:38px;

    }

    .agenda-item span{

        font-size:32px;

    }

    .location-title{

        font-size:44px;

    }

    .location-address{

        font-size:22px;

    }

}

@media (max-width:768px){

    .agenda{

        padding:90px 20px;

    }

    .agenda-divider{

        width:60px;

    }

    .agenda-icon,
    .agenda-location-icon{

        width:56px;
        height:56px;

    }

    .agenda-icon svg{

        width:42px;
        height:42px;

    }

    .agenda-title{

        font-size:48px;

        margin-top:28px;

    }

    .agenda-date{

        margin-top:60px;

    }

    .agenda-date span{

        font-size:24px;

    }

    .agenda-date strong{

        font-size:30px;

        line-height:1.4;

    }

    .agenda-events{

        margin:70px 0;

        gap:50px;

    }

    .agenda-line{

        width:90px;

        margin-bottom:25px;

    }

    .agenda-item h3{

        font-size:30px;

    }

    .agenda-item span{

        font-size:26px;

    }

    .location-title{

        font-size:38px;

    }

    .location-address{

        font-size:20px;

        line-height:1.7;

    }

    .map-button{

        width:100%;

        max-width:320px;

        padding:18px;

        font-size:18px;

        letter-spacing:2px;

    }

}

@media (max-width:480px){

    .agenda{

        padding:80px 18px;

    }

    .agenda-divider{

        width:40px;

    }

    .agenda-title{

        font-size:40px;

    }

    .agenda-date span{

        font-size:20px;

    }

    .agenda-date strong{

        font-size:25px;

    }

    .agenda-events{

        gap:45px;

    }

    .agenda-item h3{

        font-size:24px;

    }

    .agenda-item span{

        font-size:22px;

    }

    .location-title{

        font-size:30px;

    }

    .location-address{

        font-size:18px;

    }

    .map-button{

        font-size:16px;

        padding:16px;

    }

}

/*=====================================
    LOVE COUNTDOWN
======================================*/

@media(max-width:768px){

    .love-countdown{

        min-height:auto;

    }

    .love-container{

        padding:110px 0 80px;

    }

    .love-content{

        margin-bottom:60px;

    }

    .love-content h2{

        font-size:44px;

    }

    .love-content p{

        font-size:18px;

    }

    .love-countdown-card{

        padding:35px 25px;

    }

    .love-counter-grid{

        gap:18px;

    }

    .love-counter strong{

        font-size:58px;

    }

}

@media(max-width:480px){

    .love-counter-grid{

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

        gap:15px;

    }

    .love-counter{

        padding:25px 12px;

    }

    .love-counter strong{

        font-size:46px;

    }

    .love-counter span{

        font-size:12px;

    }

}


/*=====================================
    RSVP
======================================*/

@media (max-width:992px){

    .rsvp{

        padding:130px 20px;

    }

    .rsvp-card{

        padding:45px;

    }

}

@media (max-width:768px){

    .rsvp{

        padding:110px 18px;

    }

    .rsvp-container{

        width:100%;

    }

    .rsvp h2{

        font-size:42px;

        line-height:1.2;

    }

    .rsvp > .rsvp-container > p{

        font-size:18px;

        margin-bottom:50px;

    }

    .rsvp-card{

        padding:35px 25px;

        border-radius:28px;

    }

    #rsvpForm{

        gap:28px;

    }

    .form-group label{

        font-size:14px;

    }

    .form-group input,
    .form-group textarea{

        padding:18px;

        font-size:16px;

        border-radius:16px;

    }

    .form-group textarea{

        min-height:150px;

    }

    .invite-grid{

        grid-template-columns:1fr;

        gap:15px;

    }

    .invite-card{

        padding:18px;

    }

    .invite-card span{

        font-size:16px;

    }

    .rsvp-submit{

        padding:18px;

        font-size:16px;

    }

    .success-circle{

        width:90px;

        height:90px;

    }

    .success-circle svg{

        width:34px;

        height:34px;

    }

    .rsvp-success h3{

        font-size:38px;

    }

    .rsvp-success p{

        font-size:17px;

    }

}

@media (max-width:480px){

    .rsvp{

        padding:90px 15px;

    }

    .rsvp-badge{

        padding:10px 20px;

        font-size:11px;

        letter-spacing:2px;

    }

    .rsvp h2{

        font-size:34px;

    }

    .rsvp > .rsvp-container > p{

        font-size:16px;

        line-height:1.8;

    }

    .rsvp-card{

        padding:28px 18px;

        border-radius:22px;

    }

    .form-group input,
    .form-group textarea{

        padding:16px;

        font-size:15px;

    }

    .invite-card{

        padding:16px;

        border-radius:14px;

    }

    .invite-card span{

        font-size:15px;

    }

    .rsvp-submit{

        padding:16px;

        font-size:15px;

        gap:10px;

    }

    .success-circle{

        width:75px;

        height:75px;

    }

    .success-circle svg{

        width:28px;

        height:28px;

    }

    .success-badge{

        font-size:11px;

        letter-spacing:2px;

        padding:8px 18px;

    }

    .rsvp-success h3{

        font-size:30px;

    }

    .rsvp-success p{

        font-size:15px;

        line-height:1.8;

    }

}