.slider{
    background-image: linear-gradient(0deg, rgba(31, 31, 31, 0.8), rgba(31, 31, 31, 0.8)),  url('../images/slider.png');
    background-size: cover;
    background-position: 0px -120px;
    background-blend-mode: darken;
}
.countdown{
    background-image: url('../images/section_2_web.png'), linear-gradient(180deg, #FFFFFF 0%, #FFF2DE 96.48%);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    border-radius: 80px 80px 0px 0px;
    margin-top: -135px;
}
.bottom{
    background:linear-gradient(0deg, #FFFFFF 0%, #FFF2DE 96.48%);
    margin-top: -99px;
}
.hot-images{
    background-image: linear-gradient(#FFF3E0 50%, #FFFEFB 50%);
    height: 300px;
}


.hot-images li{
    display: inline;
    list-style-type: none;
    padding-right: 20px;
    vertical-align: top;
}
.scrollable-x{
    overflow-x: hidden;
    margin: 0 auto;
}
.scrollable-x:hover {
    overflow-x: scroll;
}
.wedding-images{
    background-color: #fff;
}


.timer{
    text-align: center;
    border-right: 1px #000 solid;
    font-weight: 400;
    font-size: 60px;
}
.timer p{
    margin: 0px;
}

.timer:last-child{
    border: 0px;
}

.timer-label{
    text-align: center;
    font-weight: 300;
    font-size: 24px;
}

.wedding-images .header{
    font-weight: 400;
    display: inline-grid;
    font-size: 70px;
    color:#373737;
    padding: 0px;
    margin: 0px;
}
.invitation-content p{
    color: #D6671C;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 42px;
    text-align: center;
}
.invitation-content .highlight{
    color: #D6671C;
    font-family: 'Prata', sans-serif;
    font-weight: 400;
    font-size: 182px;
    text-align: center;
}

.confirmation{
    z-index: 10;
    position: fixed;
    right: 20px;
    top: 100px;
    width: 250px;
    height: 250px;

    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 22px;
    gap: 10px;
    color: #000;
    background-image: url("../images/circle-popup.png");
    background-size: cover;
    background-repeat: no-repeat;


}
.confirmation .popup{
    width: 250px;
    height: 250px;

    background-color: #ffffff6e;
    border-radius: 100px;
    backdrop-filter: blur(7px);
    background-position: -31px -31px;
}
.confirmation .confirm-btn{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 16px;
    margin: auto;
}
.circle-above{
    transform: scaleX(4.5) scaleY(2) rotate(88deg);
}
.circle-under{
    transform: scaleX(4.5) scaleY(2.5) rotate(-68deg);
}
.slider-label
{
    color: #fff;
    font-size: 20px;
}
.slider-info{
    border-right: 1px #fff solid;
}
.slider-info:last-child{
    border-right:none;
}
.slider .content{
    line-height: 250px;
}

.modal-content{
    background-image: url('../images/popup-bg.png');
    background-position: center;
    background-size: cover;
    min-height: 840px;
    margin: 20px;
}
.modal-label{

}
@media (min-width: 300px) {

    .timer {
        font-size: 25px;
    }
    .timer-label{
        font-size: 20px;
    }
    .countdown .label{
        font-size: 16px;
    }
    .wedding-images .header{
        font-size: 32px;
    }
    .confirmation{
        display: none;
    }
    .countdown{
        background-size: contain;
    }
    .circle-above{
        transform: scaleX(1.7) scaleY(1.2) rotate(88deg);
    }
    .circle-under{
        transform: scaleX(1.7) scaleY(1.5) rotate(-68deg);
    }

}
@media (max-width: 767px) {
    .countdown{
        padding-top: 180px;
        background-image: url(../images/section_2_mobile.png), linear-gradient(180deg, #FFFFFF 0%, #FFF2DE 96.48%);
        background-size: contain !important;
        background-position: top;
        background-repeat: no-repeat;
        border-radius: 40px 40px 0px 0px;
        margin-top: -135px;
    }
    .slider .content{
        line-height: 50px;
    }
    .slider-info{
        border: none;
        line-height: 20px !important;
    }
}
@media (min-width: 768px) {
    .timer {
        font-size: 40px;
    }
    .timer-label{
        font-size: 20px;
    }
    .countdown .label{
        font-size: 16px;
    }
    .wedding-images .header{
        font-size: 70px;
    }
    .confirmation{
        display: flex;
    }
    .circle-above{
        transform: scaleX(2.5) scaleY(1.5) rotate(88deg);
    }
    .circle-under{
        transform: scaleX(2.5) scaleY(1.5) rotate(-68deg);
    }
    .slider-info{
        border-right: 1px #fff solid;
    }
    .slider-info:last-child{
        border-right:none;
    }
}

@media (min-width: 1400px) {
    .timer {
        font-size: 60px;
    }
    .timer-label{
        font-size: 24px;
    }
    .circle-above{
        transform: scaleX(3) scaleY(2) rotate(88deg);
    }
    .circle-under{
        transform: scaleX(3) scaleY(2.5) rotate(-68deg);
    }
    .countdown{
        background-size: contain;
    }
}
@media (min-width: 2000px) {
    .countdown{
        background-size: cover;
    }
    .circle-above{
        transform: scaleX(4) scaleY(2) rotate(88deg);
    }
    .circle-under{
        transform: scaleX(4) scaleY(2.5) rotate(-68deg);
    }
}