/*======================================
LARGE LAPTOP
======================================*/

@media(max-width:1400px){

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

.hero h3{
font-size:24px;
}

.section-title h2{
font-size:46px;
}

}

/*======================================
LAPTOP
======================================*/

@media(max-width:1200px){

.container{
width:92%;
}

.navbar{
padding:20px 5%;
}

.navbar.active{
padding:15px 5%;
}

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

.hero h3{
font-size:22px;
}

.person{
width:300px;
}

.time-box{
width:160px;
height:160px;
}

}

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

@media(max-width:992px){

.menu-btn{
display:block;
z-index:1001;
}

.nav-links{

position:fixed;
top:0;
right:-300px;
width:280px;
max-width:80%;
height:100vh;
background:#fff;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:35px;
transition:.4s;
box-shadow:-10px 0 30px rgba(0,0,0,.1);

}

.nav-links.active{
right:0;
}

.nav-links li a{
color:#333 !important;
font-size:17px;
}

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

.hero h3{
font-size:21px;
}

.hero h4{
font-size:21px;
}

.hero-date span{
font-size:28px;
}

.couple-wrapper{
flex-direction:column;
gap:40px;
}

.heart{
width:70px;
height:70px;
font-size:28px;
}

.invitation-content{
padding:50px 35px;
}

.dua-content{
padding:50px 35px;
}

#countdown{
gap:20px;
}

.time-box{
width:140px;
height:140px;
}

.time-box h3{
font-size:46px;
}

}

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

@media(max-width:768px){

section{
padding:80px 0;
}

.hero{
padding:0 20px;
}

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

.hero h3{
font-size:18px;
}

.hero h4{
font-size:18px;
}

.hero-date{
font-size:16px;
}

.hero-date span{
font-size:24px;
}

.bismillah{
font-size:34px;
}

.section-title h2{
font-size:38px;
}

.person{
width:100%;
padding:35px 25px;
}

.person img{
width:180px;
height:180px;
}

.person h3{
font-size:34px;
}

.person h4{
font-size:18px;
}

.event-card{
padding:35px 25px;
}

.event-card h3{
font-size:30px;
}

.event-card i{
width:70px;
height:70px;
line-height:70px;
font-size:28px;
}

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

.gallery-grid img{
height:300px;
}

.rsvp form{
padding:35px 25px;
}

.dua-content h3{
font-size:34px;
}

footer h2{
font-size:42px;
}

.social a{
width:48px;
height:48px;
}

.flower{
display:none;
}

}

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

@media(max-width:576px){

.navbar{
padding:18px 20px;
}

.logo{
font-size:28px;
}

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

.hero h3{
font-size:16px;
}

.hero-btn{
padding:15px 35px;
font-size:15px;
}

.section-title h2{
font-size:34px;
}

.invitation-content{
padding:35px 20px;
}

.invitation-content h3{
font-size:28px;
}

.arabic{
font-size:26px;
}

.time-box{
width:120px;
height:120px;
}

.time-box h3{
font-size:38px;
}

.time-box p{
font-size:13px;
}

.dua-content{
padding:40px 20px;
}

.dua-content h3{
font-size:28px;
}

footer{
padding:60px 20px;
}

footer h2{
font-size:36px;
}

footer p{
font-size:14px;
}

}

/*======================================
EXTRA SMALL
======================================*/

@media(max-width:400px){

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

.hero h4{
font-size:15px;
}

.hero-date span{
font-size:20px;
}

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

.person img{
width:150px;
height:150px;
}

.person h3{
font-size:30px;
}

.event-card h3{
font-size:26px;
}

.event-card span{
font-size:16px;
}

.time-box{
width:100px;
height:100px;
}

.time-box h3{
font-size:32px;
}

.time-box p{
font-size:12px;
}

.rsvp form{
padding:25px 18px;
}

.rsvp input,
.rsvp textarea,
.rsvp select{
padding:15px;
}

.rsvp button{
padding:16px;
}

.social{
gap:12px;
}

.social a{
width:42px;
height:42px;
font-size:17px;
}

}