body,
html {
    background: #EBE8E2;
    overflow-x: hidden;
    overflow-x: clip !important;
    scroll-behavior: smooth;
}

body.overclosed {
    overflow: hidden;
}

canvas {
    display: block;
    vertical-align: top;
    top: 0;
    position: absolute;
}

.header-title {
    margin-top: 30vh;
}

@font-face {
    font-family: Legan;
    src: url(../fonts/Legan.ttf);
}

@font-face {
    font-family: CandleFish;
    src: url(../fonts/Candlefish.ttf);
}

@font-face {
    font-family: TheSignature;
    src: url(../fonts/Thesignature.ttf);
}

.cover {
    color: #fff;
    padding: 0 !important;
    position: fixed !important;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    background-size: cover !important;
    z-index: 4;
    font-family: "Poppins", sans-serif;
}

.header-title .wedding-of h3 {
    font-family: Legan;
    font-weight: 300;
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
}

.cover .nama-nganten h3 {
    font-family: Legan;
    font-size: 50px;
    font-weight: 500;
}

.cover .wedding-ofdate {
    padding-top: 50px;
}

.cover .wedding-ofdate h3 {
    font-family: Legan;
    padding-top: 200px;
    font-size: 18px;
}

.cover .invited {
    font-family: Legan;
    font-size: 48px;
}

.cover .invited h3 {
    font-size: 30px;
}

.cover .greetings-word {
    font-family: Legan;
    margin-bottom: 20px;
}

.cover .greetings-word h5 {
    font-size: 14px;
    font-weight: 400;
}

.page-holder {
    min-height: 100vh;
}

.bg-cover {
    background-size: cover !important;
    padding: 0px;
    position: fixed;
}

.bg-cover::before,
.cover::before {
    content: '';
    width: 100%;
    min-height: 100vh;
    background: rgb(0 0 0 / 60%);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.bg-cover .container {
    position: relative;
}

@media only screen and (max-width: 767px) {
    .cover {
        background-position: 49% 51% !important;
    }

    .header-title {
        margin-top: 40vh;
    }

    .header-title .wedding-of h3 {
        font-size: 14px;
    }

    .cover .nama-nganten h3 {
        font-size: 40px;
    }

    .cover .wedding-ofdate h3 {
        padding-top: 30px;
        font-size: 12px;
    }

    .cover .invited h3 {
        font-size: 20px;
    }

    .cover .greetings-word h5 {
        font-size: 12px;
    }

    .bannerOne .name {
        font-size: 40px;
    }

    
    .preloader {
        background-color: #fff;
    }

    .preloader::before {
        font-family: Legan;
        font-size: 36px;
        color: #005482;
        opacity: 0.1;
    }

    .counter {
        font-family: 'Poppins', sans-serif;
        color: #005482;
        font-size: 36px;
        text-transform: capitalize;
        font-weight: 700;

    }

    .counter img {
        width: 200px;
    }

    .counter::after {
        content: '%';
        font-family: 'Poppins', sans-serif;
        font-size: 18px;
        text-transform: capitalize;
        font-weight: 700;
    }
}

@media (min-width: 768px) {
    .cover {
        background-position: 49% 51% !important;
    }

    /*preloader */

    .preloader {
        background-color: #fff;
    }

    .preloader::before {
        font-family: Legan;
        font-size: 36px;
        color: #fff;
        opacity: 0.1;
    }

    .counter {
        font-family: 'Poppins', sans-serif;
        color: #fff;
        font-size: 36px;
        text-transform: capitalize;
        font-weight: 700;

    }

    .counter img {
        width: 200px;
    }

    .counter::after {
        content: '%';
        font-family: 'Poppins', sans-serif;
        font-size: 18px;
        text-transform: capitalize;
        font-weight: 700;
    }
}

/* animated cover button */

.button {
    display: inline-block;
    padding: 0.75rem 1.25rem;
    border: none;
    color: #fff;
    text-transform: uppercase;
    font-size: 12px;
    font-family: Legan;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-cvr:after {
    font-family: Legan;
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #333;
    z-index: -2;
}

.btn-cvr:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #ebad57;
    transition: all 0.3s;
    z-index: -1;
}

.btn-cvr:hover {
    color: #fff;
}

.btn-cvr:hover:before {
    width: 100%;
}

/* Preloader */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.content {
    padding: 100px;
}

.content h2 {
    font-size: 4em;
    color: aqua;
}

.preloader {
    position: fixed;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: #333;
    z-index: 1000000;
}

.preloader::before {
    font-family: Legan;
    content: 'timeless';
    position: absolute;
    font-size: 10em;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.9);

}

.preloader.active {
    transform: translateY(-100vh);
    transition: ease-in-out 2s;
    transition-delay: 1s;
}

.counter {
    position: relative;
    color: #fff;
    font-size: 16em;
    font-weight: 700;
    z-index: 1;
}

.counter::after {
    font-size: 0.5em;

}

.hide {
    opacity: 0;
    transition: 1s;
    pointer-events: none;
}

.bOne {
    height: 920px;
    background: url(../images/bOne.webp);
    overflow: hidden;
    position: relative;
    background-size: cover;
    object-fit: cover;
    background-position: 49% 51%;
    background-repeat: no-repeat;
}

.bOne .gradient-effect {
    z-index: 0;
    margin-top: -15vh;
    height: 500px;
    position: absolute;
    background-position: 50% 50%;
    background-image: linear-gradient(180deg, transparent, #EBE8E2 99%);
    background-size: cover;
    width: 100%;
}

.bannerOne {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 300px;
}

.bannerOne .description {
    font-family: Legan;
    font-size: 14px;
    text-transform: uppercase;
}

.bannerOne .name {
    font-family: CandleFish;
    font-size: 36px;
}

.bannerOne .time {
    font-family: Legan;
    font-size: 14px;
    text-transform: uppercase;
}

.bannerOne .bottom-icon {
    padding-top: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bottom-icon .down-icon {
    position: absolute;
    z-index: 3;
    padding: 10px;
    border-radius: 50px;
    border: 1px solid #fff;
    width: 40px;
    height: 40px;
}

.bSec {
    height: auto;
}

.bSec .brideSides {
    background-size: cover;
    background-position: 50% 50%;
    background-image: url(../images/brides.webp);
    width: 50%;
    height: 100vh;
}

.brideSides .gradient-effect {
    z-index: 0;
    margin-top: -15vh;
    height: 500px;
    position: absolute;
    background-position: 50% 50%;
    background-image: linear-gradient(180deg, transparent, #707070 80%);
    background-size: cover;
    width: 100%;
}

.brideText {
    position: relative;
    z-index: 1;
    padding-top: 70vh;
    padding-left: 10px;
}

.brideText .the {
    font-family: Legan;
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
}

.brideText .name {
    font-family: candleFish;
    color: #fff;
    font-size: 36px;
}

.brideText .desc {
    font-family: TheSignature;
    color: #fff;
    font-size: 64px;
}

.brideText .divider {
    border-bottom: 1px solid #fff;
    width: 50%;
    position: absolute;
    margin-top: -50px;
    margin-left: 40vh;
}

.brideText .nameDesc{
    font-family: Legan;
    font-size: 16px;
    color: #CCCCCC;
}

.bSec .groomSides {
    background-size: cover;
    background-position: 50% 50%;
    background-image: url(../images/grooms.webp);
    width: 50%;
    height: 100vh;
}

.groomSides .gradient-effect {
    z-index: 0;
    margin-top: -15vh;
    height: 500px;
    position: absolute;
    background-position: 50% 50%;
    background-image: linear-gradient(180deg, transparent, #707070 80%);
    background-size: cover;
    width: 100%;
}


.groomText {
    position: relative;
    z-index: 1;
    padding-top: 70vh;
    padding-left: 10px;
}

.groomSides .the {
    font-family: Legan;
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
}

.groomSides .name {
    font-family: candleFish;
    color: #fff;
    font-size: 36px;
}

.groomSides .desc {
    font-family: TheSignature;
    color: #fff;
    font-size: 64px;
}

.groomSides .divider {
    border-bottom: 1px solid #fff;
    width: 55%;
    position: absolute;
    margin-top: -50px;
    margin-left: 35vh;
}

.groomSides .nameDesc{
    font-family: Legan;
    font-size: 16px;
    color: #fff;
}

.bThi {
    height: 920px;
    background: url(../images/story.webp);
    position: relative;
    background-size: cover;
    object-fit: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.bFourth {
    height: 920px;
    background: url(../images/event.webp);
    position: relative;
    background-size: cover;
    object-fit: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.eventSeries {
    padding-top: 150px;
    text-align: center;
}

.eventSeries .text {
    padding-top: 30px;
    font-family: Legan;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
}

.eventSeries .day {
    font-family: candleFish;
    color: #fff;
    font-size: 28px;
    text-transform: uppercase;
}

.eventSeries .date {
    font-family: candleFish;
    color: #fff;
    font-size: 28px;
    text-transform: uppercase;
}

.holyMatrimony {
    padding-top: 100px;
    text-align: center;
}

.holyMatrimony .text {
    font-family: candleFish;
    color: #fff;
    font-size: 36px;
}

.holyMatrimony .time {
    font-family: candleFish;
    color: #fff;
    font-size: 36px;
}

.holyMatrimony .nameLocation {
    font-family: Legan;
    line-height: 24px;
    color: #fff;
    font-size: 14px;
}

.holyMatrimony .description {
    font-family: Legan;
    color: #fff;
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 30px;
}

.holyMatrimony .bLocation {
    font-family: Legan;
    padding: 9px 20px;
    text-transform: uppercase;
    background: #808080;
    color: #fff;
    text-decoration: none;
}

.weddingReception {
    padding-top: 100px;
    text-align: center;
}

.weddingReception .text {
    font-family: candleFish;
    color: #fff;
    font-size: 36px;
}

.weddingReception .time {
    font-family: candleFish;
    color: #fff;
    font-size: 36px;
}

.weddingReception .nameLocation {
    font-family: Legan;
    line-height: 24px;
    color: #fff;
    font-size: 14px;
}

.weddingReception .description {
    font-family: Legan;
    color: #fff;
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 30px;
}

.weddingReception .bLocation {
    font-family: Legan;
    padding: 9px 20px;
    text-transform: uppercase;
    background: #808080;
    color: #fff;
    text-decoration: none;
}

.bFifth {
    height: 920px;
    background: url(../images/countdownn.webp);
    position: relative;
    background-size: cover;
    object-fit: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.bannerFive {
    padding-top: 320px;
}

.bannerFive .text {
    font-family: candleFish;
    text-align: center;
    padding-bottom: 10px;
}

.bannerFive .text .title {
    color: #fff;
    text-transform: uppercase;
    font-size: 48px;
    font-weight: 300;
}

/* ------------------------------------------------ */
/* 9. Countdown Section
/* ------------------------------------------------ */

#countdown .countdown-box {
    color: #F5F5F5;
    margin-bottom: 40px;
    text-align: center;
}

#countdown.v2 .subtitle {
    color: #F5F5F5;
}

#countdown .countdown-box .headline {
    color: #F5F5F5;
}

#countdown.v2 .countdown-box .headline {
    margin-bottom: 20px;
}

#countdown .countdown-box .strike>span:before,
#countdown .countdown-box .strike>span:after {
    background: #F5F5F5;
}

#countdown .wraper-clock {
    display: inline-block;
    vertical-align: bottom;
    padding: 35px 10px;
}

#countdown .wraper-clock .value {
    font: normal 42px/32px candleFish;
    color: #F5F5F5;
    padding-bottom: 8px;
    min-width: 95px;
}

#countdown .wraper-clock .value-label {
    font: normal 20px/18px candleFish;
    text-transform: uppercase;
    letter-spacing: 0;
}

#countdown .sep {
    display: none;
}

#countdown #clock {
    padding: 40px 0px;
}

#countdown #clock span {
    font-size: 16px;
}

#countdown .controls {
    font-family: candleFish;
    letter-spacing: 1px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
}

#countdown .controls label {
    font-weight: 300;
    font-size: 14px;
}

#countdown .headline {
    font-family: arima;
    font-size: 45px;
    font-weight: bold;
    text-align: center;
}

#countdown .subtitle {
    font-size: 18px;
    color: #F5F5F5;
}

@media (max-width: 768px) {

    #countdown .countdown-box .strike>span:before,
    #countdown .countdown-box .strike>span:after {
        background: transparent;
    }

    #countdown .wraper-clock {
        display: inline-block;
        vertical-align: bottom;
        padding: 20px 5px;
    }

    #countdown .wraper-clock .value {
        font: normal 24px/20px candleFish;
        color: #F5F5F5;
        padding-bottom: 5px;
        min-width: 55px;
        font-weight: 500;
    }
    
    #countdown .wraper-clock .value-label {
        font: normal 10px/8px candleFish;
        text-transform: uppercase;
        letter-spacing: 0;
    }
}

@media (min-width: 767px) {
    #countdown .sep {
        display: inline-block;
        height: 90px;
        line-height: 0px;
    }
}

@media (min-width: 769px) {
    #countdown #clock span {
        font-size: 16px;
    }
}

.savetheDate {
    padding-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-gcalendar {
    background: #808080;
    color: #fff;
    font-family: Legan;
    text-transform: uppercase;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 18px;
}

.formInvitation {
    height: 920px;
    background: url(../images/contact.webp);
    position: relative;
    background-size: cover;
    object-fit: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.formInvitation .formHeader {
    padding-top: 100px;
}

.formHeader .title {
    font-family: candleFish;
    color: #fff;
    font-size: 28px;
}

.formHeader .description {
    font-family: Legan;
    color: #fff;
    font-size: 16px;
}

.formContent {
    padding: 50px 210px 0px 210px;
}

.wishesForm {
    padding-top: 50px;
}

.formStyle {
    width: 100%;
}

.formStyle label {
    color: #fff;
    font-family: Legan;
    text-transform: uppercase;
    font-size: 16px;
    margin-bottom: 5px;
}

.formStyle input[type="text"] {
    background: transparent;
    color: #fff;
}

.formStyle input[type="text"]:focus {
    color: #fff;
}

.formStyle select {
    background: transparent;
    color: #fff;
}

.form-control {
    border-radius: 0px !important;
}

.formButton {
    padding-top: 10px;
}

.formButton .btn-submit {
    font-family: Legan;
    text-transform: uppercase;
    font-size: 18px;
    width: 100%;
    border-radius: 0px;
    background: #333;
    color: #fff;
}

.formButton .btn-submit:hover {
    background: #808080;
    color: #fff;
}

/* checkboxes style */
.attend-now {
    list-style-type: none;
    padding: 0;
}
  
.attend-now li {
    float: left;
    width: 50%;
    height: 45px;
    position: relative;
}
  
.attend-now label,
.attend-now input {
    font-family: Legan;
    font-size: 16px;
    display: flex;
    justify-content: center;
    text-align: center;
    color: #fff;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
  
.attend-now input[type="radio"] {
    opacity: 0.01;
    z-index: 100;
}
  
.attend-now input[type="radio"]:checked+label,
.Checked+label {
    background: #679186;
}
  
.attend-now label {
    padding: 5px;
    border: 1px solid #CCC;
    cursor: pointer;
    z-index: 90;
}
  
.attend-now label:hover {
    background: #DDD;
}

.bSixth {
    height: 103vh;
    background: url(../images/wishes.webp);
    position: relative;
    background-size: cover;
    object-fit: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.bannerSix .headerWish {
    padding: 50px 30px;
}

.headerWish .text {
    font-family: candleFish;
    color: #fff;
    font-size: 36px;
    text-transform: capitalize;
}

.headerWish .load {
    margin-top: 0px;
    padding-top: 20px;
    padding-right: 15px;
    font-family: Legan;
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
    display: flex;
    justify-content: end;
}

.load a {
    color: #fff;
    text-decoration: none;
}

.load .fCustom {
    padding-top: 5px;
    margin-left: 10px;
}

.dividerHeader {
    padding-top: 20px;
    margin: 0px 12px;
    border-bottom: 1px solid #fff;
    width: 100%;
}

.bannerSix .contentWish {
    padding: 0px 30px;
    color: #fff;
}

.contentWish .leftWishes {
    float: left;
    padding-bottom: 20px;
}

.leftWishes .name {
    font-size: 36px;
    font-family: candleFish;
}

.leftWishes .message {
    font-size: 14px;
    font-family: Legan;
}

.leftWishes .time {
    color: #C7BDBD;
    font-family: Legan;
    font-size: 12px;
}

.contentWish .rightWishes {
    float: right;
    padding-bottom: 20px;
}

.rightWishes .name {
    font-size: 36px;
    font-family: candleFish;
}

.rightWishes .message {
    font-size: 14px;
    font-family: Legan;
}

.rightWishes .time {
    font-family: Legan;
    font-size: 12px;
}

.bSeventh {
    height: 920px;
    background: url(../images/wgift.webp);
    position: relative;
    background-size: cover;
    object-fit: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.wgiftHeader {
    padding-top: 150px;
    padding-left: 150px;
    font-family: candleFish;
}

.wgiftHeader .title {
    text-transform: capitalize;
    color: #fff;
    font-size: 36px;
}

.wgiftHeader .description {
    color: #fff;
}

.wgiftContent {
    padding: 0 150px;
}

.wgiftContent .wgiftCol1 {
    border: 1px solid #fff;
    padding: 10px 10px;
    border-radius: 5px;
}

.wgiftCol1 .accountname {
    color: #fff;
    text-transform: uppercase;
    font-family: candleFish;
    padding: 8px 10px;
    font-size: 20px;
    margin-bottom: 0px !important;
}

.wgiftCol1 .accountnumber {
    font-family: candleFish;
    margin-bottom: 0px !important;
    font-size: 16px;
    background: #707070;
    color: #fff;
    padding: 10px 10px;
}

.wgiftCol1 .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding: 7px 0px;
}

.wgiftContent .wgiftCol2 {
    border: 1px solid #fff;
    padding: 10px 10px;
    border-radius: 5px;
    margin-top: 45px;
}

.wgiftCol2 .accountname {
    color: #fff;
    text-transform: uppercase;
    font-family: candleFish;
    padding: 8px 10px;
    font-size: 20px;
    margin-bottom: 0px !important;
}

.wgiftCol2 .accountnumber {
    font-family: candleFish;
    margin-bottom: 0px !important;
    font-size: 16px;
    background: #707070;
    color: #fff;
    padding: 10px 10px;
}

.wgiftCol2 .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding: 7px 0px;
}

.wgiftContent .wgiftCol3 {
    border: 1px solid #fff;
    padding: 10px 10px;
    border-radius: 5px;
    margin-top: 45px;
}

.wgiftCol3 .accountname {
    color: #fff;
    text-transform: uppercase;
    font-family: candleFish;
    padding: 5px 10px;
    font-size: 20px;
    margin-bottom: 0px !important;
}

.wgiftCol3 .accountnumber {
    font-family: candleFish;
    margin-bottom: 0px !important;
    background: #707070;
    font-size: 16px;
    color: #fff;
    padding: 10px 10px;
}

.wgiftCol3 .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding: 7px 0px;
}


.bEight {
    height: auto;
}

.bEight .carousel {
    height: 100vh;
}

.carousel .slidesPosition {
    font-family: candleFish;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -80px;
    z-index: 1;
    position: relative;
}

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

.carousel .slidesDescription {
    font-family: Legan;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -70px;
    z-index: 5;
    position: relative;
}

.slidesDescription .instruction {
    font-size: 14px;
}

.footer {
    margin-top: 40px;
    height: 102vh;
    background: url(../images/awe.webp);
    position: relative;
    background-size: cover;
    object-fit: cover;
    background-position: 49% 50%;
    background-repeat: no-repeat;
}

.footer-start {
    justify-content: center;
    padding-top: 300px;
    text-align: center;
}

.headerFooter {
    padding-top: 200px;
}

.headerFooter .credits {
    font-family: candleFish;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    font-size: 36px;
}

.headerFooter .text {
    color: rgba(255, 255, 255, 0.8);
    font-family: Legan;
    font-size: 14px;
}

.headerFooter .name {
    color: rgba(255, 255, 255, 0.8);
    font-family: Legan;
    font-size: 24px;
    text-transform: uppercase;
}

.footer-start .endFooter {
    padding-top: 50px;
}

.endFooter .copyright {
    font-family: Legan;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
}

.endFooter .collaboration-with {
    font-family: Legan;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
}

@media (max-width: 768px) { 
    .formInvitation {
        height: 103vh;
    }

    .formInvitation .formHeader {
        padding-top: 30px;
    }

    .bOne {
        height: 100vh;
        background-position: 50% 50%;
    }

    .bannerOne {
        padding-top: 250px;
    }

    .bannerOne .bottom-icon {
        padding-top: 200px;
    }

    .bSec .brideSides {
        position: relative;
        width: 100%;
        height: 102vh;
    }

    .brideText {
        padding-top: 60vh;
    }

    .brideText .the {
        font-size: 14px;
    }

    .brideText .desc {
        font-size: 36px;
    }

    .brideText .divider {
        width: 30%;
        margin-top: -30px;
        margin-left: 28vh;
    }

    .brideSides .gradient-effect {
        bottom: 0;
        height: 360px;
        background-image: linear-gradient(180deg, transparent, #707070 99%);
    }

    .bSec .groomSides {
        position: relative;
        width: 100%;
        height: 102vh;
    }

    .groomSides .name {
        padding-right: 10px;
    }

    .groomText {
        padding-top: 60vh;
    }

    .groomText .the {
        font-size: 14px;
    }

    .groomText .desc {
        font-size: 36px;
    }

    .groomText .divider {
        width: 30%;
        margin-top: -30px;
        margin-left: 28vh;
    }

    .groomSides .gradient-effect {
        bottom: 0;
        height: 360px;
        background-image: linear-gradient(180deg, transparent, #707070 99%);
    }

    .eventSeries {
        padding-top: 110px;
    }

    .eventSeries .text {
        padding-top: 10px;
        font-size: 14px;
    }

    .eventSeries .day {
        font-size: 24px;
    }

    .eventSeries .date {
        font-size: 24px;
    }

    .holyMatrimony {
        padding-top: 20px;
    }

    .holyMatrimony .text {
        font-size: 24px;
    }

    .holyMatrimony .time {
        font-size: 24px;
    }

    .holyMatrimony .nameLocation {
        line-height: 16px;
    }

    .holyMatrimony .description {
        font-size: 12px;
        line-height: 16px;
    }

    .holyMatrimony .bLocation {
        padding: 8px 15px;
        font-size: 12px;
        text-decoration: none;
    }

    .weddingReception {
        padding-top: 50px;
    }

    .weddingReception .text {
        font-size: 24px;
    }

    .weddingReception .time {
        font-size: 24px;
    }

    .weddingReception .nameLocation {
        line-height: 16px;
    }

    .weddingReception .description {
        font-size: 12px;
        line-height: 16px;
    }

    .weddingReception .bLocation {
        padding: 8px 15px;
        font-size: 12px;
        text-decoration: none;
    }

    .bFifth {
        height: 103vh;
    }

    .bannerFive .text .title {
        font-size: 28px;
    }

    .savetheDate {
        padding-top: 0px;
    }

    .btn-gcalendar {
        font-size: 12px;
        padding: 8px 15px;
    }

    .formContent {
        padding: 80px 40px 20px 40px;
    }

    .attend-now label, .attend-now input {
        font-size: 12px;
    }

    .attend-now label {
        padding: 10px; 
    }
    
    .formHeader .description {
        font-size: 14px;
    }

    .formButton .btn-submit {
        font-size: 14px;
    }

    .wishesForm {
        padding-top: 0px;
    }

    .bannerSix .headerWish {
        padding: 50px 30px 20px 30px;
    }

    .headerWish .text {
        font-size: 28px;
    }

    .headerWish .load {
        padding-right: 0px;
        margin-top: -50px;
        font-size: 14px;
    }

    .dividerHeader {
        margin: 0px;
        padding-top: 10px;
    }

    .bannerSix .contentWish {
        padding: 0px 20px;
    }

    .leftWishes .name {
        font-size: 28px;
    }

    .leftWishes .message {
        font-size: 12px;
    }

    .rightWishes .name {
        font-size: 28px;
    }

    .rightWishes .message {
        font-size: 12px;
    }

    .bSeventh {
        height: 103vh;
    }

    .wgiftHeader {
        padding-top: 300px;
        padding-left: 20px;
    }

    .wgiftHeader .title {
        font-size: 28px;
    }

    .wgiftHeader .description {
        font-size: 12px;
    }

    .wgiftContent {
        padding: 0 10px;
    }

    .wgiftCol1 .accountname {
        font-size: 14px;
        padding: 14px 10px;
    }

    .wgiftCol1 .accountnumber {
        margin: 10px 0px;
        font-size: 14px;
        padding: 5px 10px;
        border-radius: 5px;
    }

    .wgiftCol2 .accountname {
        font-size: 14px;
        padding: 14px 10px;
    }

    .wgiftCol2 .accountnumber {
        margin: 10px 0px;
        font-size: 14px;
        padding: 5px 10px;
        border-radius: 5px;
    }

    .wgiftCol3 .accountname {
        font-size: 14px;
        padding: 14px 10px;
    }

    .wgiftCol3 .accountnumber {
        margin: 10px 0px;
        font-size: 14px;
        padding: 5px 10px;
        border-radius: 5px;
    }

    .icon .material-icons {
        font-size: 24px;
        margin-left: -15px;
    }

    .wgiftCol1 .icon {
        padding: 10px 10px 10px 0px;
    }

    .wgiftContent .wgiftCol2 {
        margin-top: 20px;
    }

    .wgiftContent .wgiftCol3 {
        margin-top: 20px;
    }

    .bEight .carousel {
        height: 100vh;
    }

    .carousel-item .w-100 {
        width: 100%;
        height: 110vh;
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        object-fit: cover;
    }

    .carousel .slidesDescription {
        margin-top: -100px;
    }

    .slidesDescription .instruction {
        font-size: 16px;
    }

    .footer {
        background-position: 49% 50%;
        height: 106vh;
    }

    .headerFooter {
        padding-top: 100px;
    }

    .headerFooter .credits {
        font-size: 24px;
    }

    .headerFooter .text {
        padding: 0px 20px;
    }

    .headerFooter .name {
        font-size: 18px;
    }

    .endFooter .copyright {
        margin-bottom: 10px;
    }

    .wlogo .wpicture {
        width: 80px;
    }

    .wlogo {
        padding-bottom: 20px;
    }

    /*preloader */

    .preloader {
        background-color: #333;
    }

    .preloader::before {
        font-family: Legan;
        font-size: 36px;
        color: #fff;
        opacity: 0.1;
    }

    .counter {
        font-family: 'Poppins', sans-serif;
        color: #fff;
        font-size: 36px;
        text-transform: capitalize;
        font-weight: 700;

    }

    .counter img {
        width: 200px;
    }

    .counter::after {
        content: '%';
        font-family: 'Poppins', sans-serif;
        font-size: 18px;
        text-transform: capitalize;
        font-weight: 700;
    }
}

@media (min-width: 768px) {
    .bOne {
        height: 100vh;
        background-position: 50% 50%;
    }

    .bannerOne {
        padding-top: 40vh;
    }

    .bannerOne .description {
        font-size: 16px;
    }

    .bannerOne .name {
        font-size: 40px;
    }

    .bOne .gradient-effect {
        margin-top: -1vh;
    }

    .bFourth {
        height: 100vh;
    }

    .eventSeries {
        padding-top: 140px;
    }

    .holyMatrimony {
        padding-top: 40px;
    }

    .weddingReception {
        padding-top: 40px;
    }

    .bFifth {
        height: 100vh;
    }

    .formContent {
        padding: 50px 50px 0px 50px;
    }

    .formInvitation {
        height: 100vh;
    }

    .formInvitation .formHeader {
        padding-top: 200px;
    }

    .headerWish .load {
        margin-top: 0px;
        padding-top: 0px;
    }

    .bSeventh {
        height: 100vh;
    }

    .wgiftHeader {
        padding: 350px 50px 10px 50px;
    }

    .wgiftHeader .description {
        padding-top: 10px;
    }

    .wgiftContent {
        padding: 10px 50px 0px 50px;
    }

    .carousel-item .w-100 {
        width: 100%;
        height: 105vh;
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        object-fit: cover;
    }

    .wlogo .wpicture {
        width: 120px;
        padding-bottom: 30px;
    }

    .brideSides .name {
        font-size: 24px;
    }
    
    .groomSides .name {
        font-size: 24px;
    }
}