/* ==========================================
   HERO
========================================== */

#hero{

    position: relative;

    min-height: 100vh;

    background: url("../img/background/hero-sunset.jpg") center center / cover no-repeat;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;

    color: #fff;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.55),
        rgba(0,0,0,.65)
    );

}

.hero-content{

    position:relative;

    z-index:2;

    width:100%;

    max-width:900px;

    text-align:center;

    padding:120px 20px 80px;
transition:1s ease;
}

/* ==========================================
   TITLE
========================================== */

.hero-subtitle{

    font-size:14px;

    letter-spacing:5px;

    text-transform:uppercase;

    color:#f3f3f3;

    margin-bottom:20px;

}

.hero-title{

    display:flex;

    flex-direction:column;

    align-items:center;

    line-height:1;

}

.hero-name{

    font-family:"Great Vibes",cursive;

    font-size:90px;

    font-weight:400;

}

.hero-and{

    font-family:"Great Vibes",cursive;

    color:#D4AF37;

    font-size:60px;

    margin:8px 0;

}

.hero-date{

    margin-top:35px;

    font-size:22px;

    font-weight:500;

}

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

#countdown{

    display:flex;

    justify-content:center;

    gap:16px;

    flex-wrap:wrap;

    margin:50px 0;

}

.countdown-item{

    width:90px;

    height:90px;

    border-radius:18px;

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(12px);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    transition:.3s;

}

.countdown-item:hover{

    transform:translateY(-5px);

    background:rgba(255,255,255,.18);

}

.countdown-item span{

    font-size:34px;

    font-weight:bold;

}

.countdown-item small{

    margin-top:6px;

    font-size:13px;

}

/* ==========================================
   QUOTE
========================================== */

.hero-divider{

    width:90px;

    height:2px;

    background:#D4AF37;

    margin:35px auto;

}

.hero-quote{

    max-width:700px;

    margin:auto;

    font-size:18px;

    line-height:32px;

    color:#f4f4f4;

}

.hero-ayat{

    display:block;

    margin-top:18px;

    color:#D4AF37;

    letter-spacing:2px;

}

/* ==========================================
   SCROLL
========================================== */

.scroll-down{

    display:inline-flex;

    flex-direction:column;

    align-items:center;

    margin-top:50px;

    color:#fff;

    text-decoration:none;

    transition:.3s;

}

.scroll-down:hover{

    color:#D4AF37;

}

.scroll-down i{

    font-size:28px;

    animation:bounce 2s infinite;

}

.scroll-down span{

    margin-top:8px;

    font-size:14px;

}

@keyframes bounce{

    0%,20%,50%,80%,100%{

        transform:translateY(0);

    }

    40%{

        transform:translateY(10px);

    }

    60%{

        transform:translateY(5px);

    }

}

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

@media(max-width:768px){

.hero-content{

padding:90px 20px 60px;
transition:1s ease;
}

.hero-name{

font-size:58px;

}

.hero-and{

font-size:42px;

}

.hero-date{

font-size:18px;

}

.hero-subtitle{

font-size:12px;

letter-spacing:3px;

}

.countdown-item{

width:70px;

height:70px;

}

.countdown-item span{

font-size:24px;

}

.countdown-item small{

font-size:11px;

}

.hero-quote{

font-size:15px;

line-height:28px;

padding:0 5px;

}

}