/* ==========================
   Countdown
========================== */

#countdownSection{

    min-height:100vh;

    background:#F9F6F0;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:25px 20px;

}

.countContainer{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:14px;

}

.countCircle{

    width:105px;

    height:105px;

    border-radius:50%;

    background:#FFF8E8;

    border:2px solid #D4AF37;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.countCircle span{

    font-size:40px;

    font-weight:300;

    color:#444;

    line-height:1;

}

.countCircle small{

    margin-top:10px;

    font-size:13px;

    letter-spacing:3px;

    color:#8A8A8A;

}
#nextSectionText,
#dateScrollHint{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    opacity:0;

}

#nextSectionText{

    bottom:90px;

}

#dateScrollHint{

    bottom:25px;

}
#countdownNextText{

    margin-top:18px;

    font-size:14px;

    letter-spacing:2px;

    color:#8F8F8F;

    font-family:'Cormorant Garamond',serif;

    opacity:0;

}

#countdownScrollHint{

    margin-top:18px;

    opacity:0;

    display:flex;

    justify-content:center;

    align-items:center;

}

#countdownScrollHint span{

    width:24px;

    height:40px;

    border:2px solid #555;

    border-radius:20px;

    position:relative;

}

#countdownScrollHint span::before{

    content:"";

    width:4px;

    height:8px;

    background:#555;

    border-radius:3px;

    position:absolute;

    left:50%;

    top:7px;

    transform:translateX(-50%);

    animation:scrollHint 1.3s infinite;

}
@keyframes scrollBounce{

    0%,100%{

        transform:rotate(45deg) translateY(0);

    }

    50%{

        transform:rotate(45deg) translateY(8px);

    }

}