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


@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,500,100&subset=latin,latin-ext);

@font-face {
  font-family: LeJour;
  src: url(../fonts/LeJourScript-Eaqpg.otf);
}


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

/*@font-face {
  font-family: FuturaBold;
  src: url(../fonts/futura/Futura-bold.ttf);
}*/

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

/*@font-face {
  font-family: CinzelBlack;
  src: url(../fonts/Cinzel/Cinzel-Black.ttf);
}*/

@font-face {
  font-family: CinzelRegular;
  src: url(../fonts/Cinzel/Cinzel-Regular.ttf);
}
/*
@font-face {
  font-family: DobkinPlain;
  src: url(../fonts/DobkinPlain.ttf);
}*/


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

@font-face {
  font-family: Dahlia;
  src: url(../fonts/dahlia.otf);
}

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


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


@font-face {
  font-family: Authsign;
  src: url(../fonts/Auth_sign.otf);
}


body {
  padding: 0;
  margin: 0;
}

a {
    display: inline-block;
}
.swiper-container {
    width: 100%;
    height: 100vh;
    position: relative;

    .slider {
        min-height: 50vh;

        .swiper-slide {
            background: #ffffff;
            overflow: hidden;
            position: relative;
            height: 100%;
            text-align: center;
            font-size: 18px;
            display: flex;
            justify-content: center;
            align-items: center;
          
            .slide-inner {
                position: absolute;
                width: 100%;
                height: 100vh;
                left: 0;
                top: 0;

            }
        }
    }
  
    .swiper-pagination-bullet {
        background-color: rgba($color: #000000, $alpha: 0);
     }
  
    .swiper-pagination {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width: 7em;
        position: absolute;
        z-index: 3;
        right: 0;
      
        span {
            margin-bottom: 3em;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.8rem;
            letter-spacing: 0.07em;
            color: #000;

            &:focus {
                outline: none;
            }
        }
    }
}

#content {
    text-align: center;
    color: white;
    padding: 200px 0;
    background: #002020;
}


.mydiv {
    position: relative;
    height: 100vh;
    width: 100%;
    /*color: #fff;*/
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size: 10vh;

    &:nth-child(1) {
        background: #ffffff;
    }
    &:nth-child(2) {
        /*background: #2980b9;*/
    }
    &:nth-child(3) {
        background: #c0392b;
    }
}

/**/
.home-bg {
    
    height: 100vh;
/*     display: flex; */
    max-width: 600px;
    width: 100%;
    align-items: center;
    justify-content: center;
    /*color: #fff;*/
    position: relative;
    text-align: center;
    background-color: rgba(248, 224, 199, 0.5);
}


.my-bg {
    background-image: url(../images/1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    /* display: flex; */
    max-width: 600px;
    width: 100%;
    align-items: center;
    justify-content: center;
    /*color: #fff;*/
    position: relative;
}

.my-bg2 {
    background-image: url(../images/3.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    /* display: flex; */
    max-width: 600px;
    width: 100%;
    align-items: center;
    justify-content: center;
    /*color: #fff;*/
    position: relative;
}
.my-bg3 {
    background-image: url(../images/5.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    /* display: flex; */
    max-width: 600px;
    width: 100%;
    align-items: center;
    justify-content: center;
    /*color: #fff;*/
    position: relative;
}

.my-bg99 {
    background-image: url(../images/thank-you.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    /* display: flex; */
    max-width: 600px;
    width: 100%;
    align-items: center;
    justify-content: center;
    /*color: #fff;*/
    position: relative;
}

.my-bg4 {
    background-image: url(../images/4.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    /* display: flex; */
    max-width: 600px;
    width: 100%;
    align-items: center;
    justify-content: center;
    /*color: #fff;*/
    position: relative;
}
.my-bg5 {
    background-image: url(../images/6.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    /* display: flex; */
    max-width: 600px;
    width: 100%;
    align-items: center;
    justify-content: center;
    /*color: #fff;*/
    position: relative;
}
.my-bg6 {
    background-image: url(../images/7.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    /* display: flex; */
    max-width: 600px;
    width: 100%;
    align-items: center;
    justify-content: center;
    /*color: #fff;*/
    position: relative;
}

.my-bg7 {
    background-image: url(../images/2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    /* display: flex; */
    max-width: 600px;
    width: 100%;
    align-items: center;
    justify-content: center;
    /*color: #fff;*/
    position: relative;
}

.wedding_content {
max-width: 420px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
height: 100%;
align-items: center;
justify-content: center;
}
.mydiv {
    min-height: 100vh; /* Make each section take the full viewport height */
}

.InviteTitle {
    font-size: 20px;
    margin-bottom: 30px;
    text-transform: capitalize;
    transform: translateY(-120px);
    opacity: 0;
    transition: transform 2s ease;
}
.ProgramTitle {
    font-size: 38px;
    text-transform: uppercase;
    color: #d39348;
    transform: translateY(-120px);
    opacity: 0;
    transition: transform 2s ease;
    font-family: CinzelRegular;
    font-weight: bold;
}
.InvitationName {
    margin-top: 32px;
    transform: translateY(-120px);
    opacity: 0;
    transition: transform 2s ease;
}
.InvitationName , .InvitatinoTime {
    font-size: 14px;
    text-transform: capitalize;
    font-family: FuturaLight;
    line-height: 1.3;
}
.Invitaionaddress {
transform: translateY(120px);
    opacity: 0;
    transition: transform 2s ease;
}
.InvitaionLocation {
    font-size: 24px;
    margin-top: 32px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 6px;
    color: #d39348;
    transform: translateY(120px);
    opacity: 0;
    transition: transform 2s ease;
}
.InvitatinoTime {
    margin-top: 32px;
    text-transform: capitalize;
    margin-bottom: 8px;
    transform: translateY(120px);
    opacity: 0;
    transition: transform 2s ease;
}
.InvitatinoDate {
    font-size: 18px;
    text-transform: capitalize;
    color: #d39348;
    transform: translateY(120px);
    opacity: 0;
    transition: transform 2s ease;
}
.InviteBlessing {
    font-size: 15px;
    margin-top: 60px;
    text-transform: capitalize;
    font-style: italic;
    transform: translateY(120px);
    opacity: 0;
    transition: transform 2s ease;
    font-family: FuturaLight;
}
.activeSlide .InviteTitle , .activeSlide .ProgramTitle ,.activeSlide .InvitationName , .activeSlide .InvitaionLocation , .activeSlide .Invitaionaddress , .activeSlide .InvitatinoTime , .activeSlide .InvitatinoDate , .activeSlide .InviteBlessing{
    opacity: 1;
    transform: translate(0);
}

.reception_Program_wrapper .ProgramTitle , .reception_Program_wrapper .InvitaionLocation , .reception_Program_wrapper .InvitatinoDate{
color: #72106e;
}

.payBtn {
    font-family: FuturaLight;
    
    max-width: 250px;
    margin: 0 auto;
    padding: 10px;
    height: 44px;
    background-color: #cd7e91;
    outline: none;
    border: none;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid gold;
}
.downBtn {
    background-color: #cd7e91;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    position: fixed;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 30px;
    bottom: 30px;
    outline: none;
    border: none;
    cursor: pointer;
    z-index: 999;
    border: 1px solid gold;
    color: white;
}

.downBtn2 {
    background-color: #cd7e91;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    position: fixed;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 30px;
    bottom: 30px;
    outline: none;
    border: none;
    cursor: pointer;
    z-index: 999;
    border: 1px solid gold;
    color: white;
}

.downBtn img {
    height: 33px;
}
.logoImage {
    max-width: 240px;
    width: 100%;
    height: 240px;
    background-color: #cd7e91;
    margin: 0 auto;
    border-radius: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 40%;
    transform: translateY(-40%);
}


.swiper-button-next:after, .swiper-button-prev:after {
    display: none;
}

@media only screen and (max-width: 575px) {
    .ProgramTitle {
        font-size: 26px;
    }
}

.common{
    font-size: 15px;
    text-transform: capitalize;
    font-family: FuturaLight;
    line-height: 1.2;
}

.haldi{
    font-size: 14px;
    text-transform: capitalize;
    font-family: FuturaLight;
    line-height: 1.1;
}

.sangeet{
    font-size: 14px;
    text-transform: capitalize;
    font-family: FuturaLight;
    line-height: 1.1;
}

.wedding{
    font-size: 14px;
    text-transform: capitalize;
    font-family: FuturaLight;
}

.reception{
    font-size: 14px;
    text-transform: capitalize;
    font-family: FuturaLight;
}

.invitees{
    font-size: 14px;
    text-transform: capitalize;
    font-family: FuturaLight;
}

.para1{
    padding-top: 15px;
    padding-bottom:10px;
    padding-left: 28px;
    padding-right: 28px;
    text-align: justify;
}

.para2{
    padding-top: 10px;
    padding-bottom:10px;
    padding-left: 28px;
    padding-right: 28px;
    text-align: justify;
}


@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-10px);
    }
    50% {
        transform: translateY(0);
    }
    70% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

.bounce-text {
    font-size: 18px;
    color: lightcoral;
    width: 100%;
    text-align: center;
    animation: bounce 1s infinite;
    font-family: FuturaLight;
    padding-top : 15px;
    font-weight: bold;
}


.container {
    position: relative;
    background: url(../images/collage.png);
    background-repeat: repeat;
    background-size: contain;
}
.container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Adjust opacity as needed */
    pointer-events: none; /* Ensures clicks pass through to container content */
    z-index: 1; /* Keep the shade below any other elements within the container */
}

/* For content inside the container, use higher z-index so it appears above the overlay */
.container-content {
    position: relative;
    z-index: 2;
}

.inviteename {
    font-size: 15px;
    font-family: 'CinzelRegular';
}



@media only screen and (max-width: 430px) {
    /* Adjust font sizes for all elements with existing classes */
    #content {
        font-size: calc(16px - 2px); /* Adjust as needed */
    }

    .InviteTitle {
        font-size: calc(20px - 2px); /* Adjust as needed */
    }

    .ProgramTitle {
        font-size: calc(38px - 12px); /* Adjust as needed */
    }

    .InvitationName, .InvitatinoTime {
        font-size: calc(14px - 2px);
    }

    .Invitaionaddress, .InvitatinoDate, .InviteBlessing {
        font-size: calc(15px - 2px);
    }

    .para1, .para2 {
        padding-top: calc(15px - 1px);
        padding-bottom: calc(10px - 1px);
        padding-left: calc(28px - 1px);
        padding-right: calc(28px - 1px);
    }

    .payBtn, .downBtn, .downBtn2 {
        padding: calc(10px - 1px);
        font-size: calc(18px - 2px);
    }

    .inviteename {
        font-size: 13px;
        font-family: 'CinzelRegular';
    }

    /* Add similar adjustments for other existing classes */
}