/* MAIN SCENE */

        .scene {
            position: relative;

            width: 700px;
            height: 65vh;

            display: flex;
            justify-content: center;
            align-items: center;

            perspective: 1500px;
        }


        /* INVITATION CARD */

        .invitation-card {

            position: absolute;

            width: 638px;
            height: 0%;

            bottom:20%;
            left:13%;
            opacity: 0;

            background: #fffaf2;

            border: 1px solid #d6ae67;

            border-radius: 5px;

            z-index: 1;

            display: flex;
            flex-direction: column;

            justify-content: center;
            align-items: center;

            text-align: center;

            padding: 20px;

            box-shadow:
                0 20px 40px
                rgba(0, 0, 0, 0.18);

            transform:
                translateY(130px);

            transition:
            transform 1.5s ease,
            height 1.5s ease,
            opacity 0.5s ease;
        }

        /* CARD TEXT */

        .invitation-card h4 {
            color: #b8893e;
            letter-spacing: 4px;
            margin-bottom: 30px;
        }

        .invitation-card h1 {
            color: #7b5a35;
            font-size: 45px;
            margin-bottom: 15px;
        }

        .invitation-card p {
            color: #876b4c;
            font-size: 18px;
            line-height: 1.8;
        }

        .invitation-card .date {
            margin-top: 30px;
            color: #b8893e;
            font-size: 22px;
            font-weight: bold;
        }

        /* ENVELOPE */

        .envelope {

            position: absolute;

            width: 900px;
            height: 600px;

            bottom: 0px;

            z-index: 5;

            perspective: 1200px;
            /* overflow: hidden; */
        }


        /* ENVELOPE BACK */

        .envelope-back {

            position: absolute;

            width: 100%;
            height: 100%;

            background: 
                linear-gradient(
                    135deg,
                    #f4e1ca,
                    #E8BFC6
                );

            border-radius: 5px;

            box-shadow:
                0 20px 35px
                rgba(0,0,0,0.2);
        }


        /* TOP FLAP */

        .flap {

            position: absolute;

            width: 100%;
            height: 390px;

            top: 0;

            background: linear-gradient(167deg, #f8ead6, #E8BFC6);
                
            clip-path: polygon(
                0 0,
                100% 0,
                70% 65%,
                62% 82%,
                56% 94%,
                52% 99%,
                50% 100%,
                48% 99%,
                44% 94%,
                38% 82%,
                30% 65%
            );

            transform-origin: top;

            z-index: 10;

            transition:
                transform 1.2s ease;

            filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.15));

        }


/* Detailed outer border */
.flap::before {
    content: "";
    position: absolute;
    inset: 0;

    background: #eac2c9;

    clip-path: polygon(
        0 0,
        100% 0,
        70% 65%,
        62% 82%,
        56% 94%,
        52% 99%,
        50% 100%,
        48% 99%,
        44% 94%,
        38% 82%,
        30% 65%
    );

    z-index: -1;
}

/* Inner elegant border */
.flap::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;

    background: linear-gradient(
        167deg,
        #f8ead6,
        #E8BFC6
    );

    clip-path: polygon(
        0 1%,
        100% 1%,
        69.5% 65.5%,
        61.7% 82.3%,
        55.8% 94.2%,
        51.8% 98.7%,
        50% 99.5%,
        48.2% 98.7%,
        44.2% 94.2%,
        38.3% 82.3%,
        30.5% 65.5%
    );

    z-index: 1;
}


        /* LEFT ENVELOPE FOLD */

        .left-fold {

            position: absolute;

            width: 50%;
            height: 100%;

            left: 0;

            background:
                linear-gradient(
                    135deg,
                    #f4e1ca,
                    #E8BFC6
                );

            clip-path:
                polygon(
                    0 0,
                    100% 50%,
                    0 100%
                );

            z-index: 8;
        }


        /* RIGHT ENVELOPE FOLD */

        .right-fold {

            position: absolute;

            width: 50%;
            height: 100%;

            right: 0;

            background:
                linear-gradient(
                    225deg,
                    #f7e8d4,
                    #E8BFC6
                );

            clip-path:
                polygon(
                    100% 0,
                    0 50%,
                    100% 100%
                );

            z-index: 8;
        }


        /* BOTTOM FOLD */

        .bottom-fold {

            position: absolute;

            width: 100%;
            height: 100%;

            background:
                linear-gradient(150deg, #fbe8cf, #E8BFC6);

            clip-path:
                polygon(
                    0 100%,
                    50% 48%,
                    100% 100%
                );

            z-index: 9;
        }


        /* OPEN BUTTON */
        .open-btn {
    position: absolute;

    top: 60%;
    left: 50%;

    transform: translate(-50%, -50%);

    border: none;
    padding: 14px 40px;

    border-radius: 50px;

    background: linear-gradient( 
        135deg, 
        #fff6f6, 
        #E8BFC6
    );  

    color: white; 
    font-size: 16px;

    cursor: pointer;

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

    z-index: 20;
}

.open-btn:hover {
    transform: translate(-50%, -50%) scale(1.05);
}

        /* ============================
           OPEN ANIMATION
        ============================ */


        /* OPEN FLAP */

        .scene.open .flap {

            transform:
                rotateX(180deg);

            z-index: 0;
        }


        /* INVITATION CARD COMES OUT */

        /* ============================
        STAGE 4
        CARD COMES OUT
        ============================ */

        .scene.open .invitation-card {

            /* transform: translateY(-110px); */

            transition-delay: 0.6s;

            z-index: 0;

            height: 100%;

            opacity: 1;

            animation: invitationMove 4s ease-in-out forwards;
        }


        /* CARD COMES OUT */

        @keyframes invitationMove {

            0% {
                transform: translateY(0);
            }

            20% {
                transform: translateY(-15%);
            }

            50% {
                transform: translateY(-30%);
            }

            80% {
                transform: translateY(-40%);
            }

            100% {
                transform: translateY(-55%);
            }
        }


        /* HIDE BUTTON */

        .scene.open .open-btn {

            opacity: 0;

            pointer-events: none;

            transition:
                opacity 0.4s ease;
        }

        /* ============================
        STAGE 5
        CARD ZOOMS IN
        ============================ */

        /* .scene.zoom .invitation-card {

            width: 560px;

            height: 100%;

            left: 10%;

            bottom: 0;

            z-index: 100;

            transform: scale(1.25);

            box-shadow:
                0 30px 70px rgba(0, 0, 0, 0.25);

            transition:
                width 1.5s ease,
                left 1.5s ease,
                bottom 1.5s ease,
                transform 1.5s ease,
                box-shadow 1.5s ease;
        } */


        /* ============================
        STAGE 6
        FULL SCREEN
        ============================ */

        /* .scene.fullscreen .invitation-card {

            position: fixed;

            top: 0;
            left: 0;

            width: 100%;
            height: 100vh;

            bottom: auto;

            transform: scale(1);

            border-radius: 0;

            border: none;

            z-index: 9999;

            padding: 8vw;

            box-shadow: none;

            transition:
                width 1.5s ease,
                height 1.5s ease,
                top 1.5s ease,
                left 1.5s ease,
                transform 1.5s ease,
                border-radius 1.5s ease,
                padding 1.5s ease;
        } */


        /* ============================
        HIDE ENVELOPE IN STAGE 6
        ============================ */

        .scene.fullscreen .envelope-back,
        .scene.fullscreen .flap,
        .scene.fullscreen .left-fold,
        .scene.fullscreen .right-fold,
        .scene.fullscreen .bottom-fold,
        .scene.fullscreen .open-btn {

            opacity: 0;

            pointer-events: none;

            transition: opacity 1s ease;
        }


        /* ============================
        FULL SCREEN CARD TEXT 
        ============================ */

        .scene.fullscreen .invitation-card h4 {
            font-size: 24px;
            letter-spacing: 6px;
        }

        .scene.fullscreen .invitation-card h1 {
            font-size: clamp(50px, 7vw, 100px);
        }

        .scene.fullscreen .invitation-card p {
            font-size: clamp(18px, 2vw, 28px);
        }

        .scene.fullscreen .invitation-card .date {
            font-size: clamp(24px, 2.5vw, 36px);
        }


        /* MOBILE */

        @media (max-width: 768px) {

            .scene {

                width: 100%;
                height: 600px;

                transform:
                    scale(0.8);
            }

        }


        @media (max-width: 500px) {

            .scene {

                transform:
                    scale(0.6);
            }

        } 

        /* OPEN BUTTON */
        .open-btn {
    position: absolute;

    top: 60%;
    left: 50%;

    transform: translate(-50%, -50%);

    border: none;
    padding: 14px 40px;

    border-radius: 50px;

    background: linear-gradient(
        135deg,
        #fff6f6,
        #E8BFC6
    );

    color: white;
    font-size: 16px;

    cursor: pointer;

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

    z-index: 20;
}

.open-btn:hover {
    transform: translate(-50%, -50%) scale(1.05);
}

        /* ============================
           OPEN ANIMATION
        ============================ */


        /* OPEN FLAP */

        .scene.open .flap {

            transform:
                rotateX(180deg);

            z-index: 0;
        }


        /* INVITATION CARD COMES OUT */

        /* ============================
        STAGE 4
        CARD COMES OUT
        ============================ */
 
        .scene.open .invitation-card {

            /* transform: translateY(-110px); */

            transition-delay: 0.6s;

            z-index: 0;

            height: 100%;

            opacity: 1;

            animation: invitationMove 4s ease-in-out forwards;
        }


        /* CARD COMES OUT */

        @keyframes invitationMove {

            0% {
                transform: translateY(0);
            }

            20% {
                transform: translateY(-15%);
            }

            50% {
                transform: translateY(-30%);
            }

            80% {
                transform: translateY(-40%);
            }

            100% {
                transform: translateY(-55%);
            }
        }


        /* HIDE BUTTON */

        .scene.open .open-btn {

            opacity: 0;

            pointer-events: none;

            transition:
                opacity 0.4s ease;
        }

        /* ============================
        STAGE 5
        CARD ZOOMS IN
        ============================ */

        /* .scene.zoom .invitation-card {

            width: 560px;

            height: 100%;

            left: 10%;

            bottom: 0;

            z-index: 100;

            transform: scale(1.25);

            box-shadow:
                0 30px 70px rgba(0, 0, 0, 0.25);

            transition:
                width 1.5s ease,
                left 1.5s ease,
                bottom 1.5s ease,
                transform 1.5s ease,
                box-shadow 1.5s ease;
        } */


        /* ============================
        STAGE 6
        FULL SCREEN
        ============================ */

        .scene.fullscreen .invitation-card img{
            position: fixed !important;
            inset: 0 !important;
            width: 100% !important;
            height: 100% !important;
            overflow: hidden !important;
            pointer-events: none !important;
            z-index: 9999 !important;
        } 

        .scene.fullscreen .invitation-card {
            position: fixed !important;
            top: -90% !important;
            left: -5% !important;
            right: 0 !important;

            width: 100vw !important;
            min-width: 100vw !important;
            max-width: none !important;

            height: 100vh !important;
            min-height: 100vh !important;

            bottom: auto !important;

            transform: scale(1) !important;
            transform-origin: center center;

            border-radius: 0 !important;
            border: none !important;

            z-index: 9999 !important;

            padding: 0 !important;
            margin: 0 !important;

            box-sizing: border-box;
            box-shadow: none;

            transition:
                width 1s ease,
                height 1s ease,
                top 1s ease,
                left 1s ease,
                transform 1s ease,
                border-radius 1s ease,
                padding 12s ease;
        }


        /* ============================
        HIDE ENVELOPE IN STAGE 6
        ============================ */

        .scene.fullscreen .envelope-back,
        .scene.fullscreen .flap,
        .scene.fullscreen .left-fold,
        .scene.fullscreen .right-fold,
        .scene.fullscreen .bottom-fold,
        .scene.fullscreen .open-btn {

            opacity: 0;

            pointer-events: none;

            transition: opacity 1s ease;
        }


        /* ============================
        FULL SCREEN CARD TEXT
        ============================ */

        .scene.fullscreen .invitation-card h4 {
            font-size: 24px;
            letter-spacing: 6px;
        }

        .scene.fullscreen .invitation-card h1 {
            font-size: clamp(50px, 7vw, 100px);
        }

        .scene.fullscreen .invitation-card p {
            font-size: clamp(18px, 2vw, 28px);
        }

        .scene.fullscreen .invitation-card .date {
            font-size: clamp(24px, 2.5vw, 36px);
        }


        /* MOBILE */

        @media (max-width: 768px) {

            .scene {

                width: 100%;
                height: 600px;

                transform:
                    scale(0.8);
            }

        }


        @media (max-width: 500px) {

            .scene {

                transform:
                    scale(0.6);
            }

        } 

/*=========================*/

.top-right {
    position: relative;
    width: 55% !important;
    background-size: contain;
    margin-left: 44%;
}

.bottom-left {
    position: relative;
    width: 55% !important;
    background-size: contain;
    margin-right: 46%;
}

.divsectwo {
    background-color:white !important;
}

.aos-init,
.aos-animate {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
 

.section3-peach-cls {
    background-image: url('../../image/nikkah_images/section_three_back_peach.png');
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    width:100%;
    min-height: 100vh;
    height: auto;
    position:relative;
    overflow:hidden;
}

.peach-content{
    padding-top: 22vh !important;
    padding-bottom: 20%;
    padding-left: 70px;
    padding-right: 70px;
}

.gmap-btn{
    margin-top:20px;
    border:none;
    border-radius:100px;
    padding:22px 45px;
    background:white;
    color:#111;
    box-shadow:0 8px 25px rgba(0,0,0,0.15);
    transition:0.3s;
}

.gmap-btn:hover{
    transform:scale(1.05);
}

.gmap-text{
    font-size:4rem;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:15px;
}

/* Mobile Responsive */
@media(max-width:768px){

    .gmap-btn{
        padding:18px 35px;
    }

    .gmap-text{
        font-size:7vw;
    }
}

/* COUNTDOWN SECTION */

.countdown-wrapper{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    margin-top:30px;
    padding:10px;
}

.countdown-box{
    width:22%;
    min-width:140px;
    padding:30px 15px;
    border-radius:25px;

    background:rgba(255,255,255,0.18);
    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,0.25);

    box-shadow:
        0 10px 30px rgba(0,0,0,0.12),
        inset 0 1px 1px rgba(255,255,255,0.3);

    transition:0.4s ease;
}

.countdown-box:hover{
    transform:translateY(-8px) scale(1.03);
}

.count-number{
    font-size:5rem;
    font-weight:700;
    color:#5c684c;
    line-height:1;
    padding-bottom:15px;
    font-family:'Cinzel', serif;
}

.count-label{
    font-size:2rem;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#333;
    font-weight:600;
}

/* MOBILE */

@media(max-width:768px){

    .countdown-wrapper{
        gap:12px;
    }

    .countdown-box{
        width:45%;
        min-width:auto;
        padding:25px 10px;
    }

    .count-number{
        font-size:10vw;
    }

    .count-label{
        font-size:3.5vw;
    }
}
.peach-decor.overlay {
    top: 80px;
    bottom: 80px;
    left: 80px;
    border: 15px solid #E6D5BB;
    right: 80px;
    border-radius: 19%;
    z-index: 0;
    opacity: 0.65 !important;
    background: white !important;
    
    
    border: 0px solid #ededed;
    position: absolute; 
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 1px 6px #777;
    border-radius: 220px 220px 0px 0px;
} 

.section3_climber-top-right {
  position: relative;
  top: 0px;
  right: 0;
  left:56%;
  width: 45%;
}

.section3_climber-top-left {
  position: absolute;
  top: 0px;
  left: 0%;
  width: 45%;
  transform: scaleX(-1);
}

.section3_climber-peach-right {
  position: relative;
  bottom: 0px;
  right: 0;
  left:56%;
  width: 45%;
}

.section3_climber-peach-left {
  position: absolute;
  bottom: 0px;
  left: 0%;
  width: 45%;
}

.top-peach-decor {
    position: absolute !important;
}

/*#popupclose{*/
/*    pointer-events:none;*/
/*}*/

.left-door{
    position: relative;
}

.left-door > img{
    position: relative;
    z-index: 1;
}

.left-door .aos_obj{
    z-index: 5;
}

.flower-container{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 9999;
}

.flower{
    position: absolute;
    top: -60px;
    width: 30px;
    height: 30px;

    background-image: url('../../image/nikkah_images/flower_fall.png'); /* your flower image */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    opacity: 0.9;

    animation: flowerFall linear forwards;
}

/* STRAIGHT FALL */
@keyframes flowerFall{
    from{
        transform: translateY(-100px);
        opacity: 0;
    }

    to{
        transform: translateY(110vh);
        opacity: 1;
    }
}

.ptext p {
    color:white !important;
}

.form-check-input{
    width: 26px;
    height: 26px;
    border: 2px solid #d6c7b5;
    background-color: #fff;
    box-shadow: none !important;
}

.form-check-input:checked{
    background-color: #cbb8a3;
    border-color: #cbb8a3;
}

#section-three{
    min-height: 100svh;
    height: auto !important;
    overflow: hidden;
    padding: 120px 0;
    position: relative;
}

@media(max-width:768px){

    .peach-content{
        padding-top: 180px !important;
        padding-bottom: 180px !important;
    }

    #section-three [style*="bottom:600px"]{
        bottom: 72% !important;
    }

    #section-three [style*="bottom:900px"]{
        bottom: 82% !important;
    }

    #section-three .playball-regular{
        font-size: 12vw !important;
    }

    #section-three .font0,
    #section-three .font3{
        font-size: 5vw !important;
    }

    #section-three .aos-init img{
        max-width: 120px !important;
        height: auto;
    }

    #section-three .aos-init[style*="border-radius:220px"]{
        border-radius: 60px !important;
        top: 30px !important;
        bottom: 30px !important;
    }
}

#section-footer .footer-content{
    position: relative;
    text-align: center;
    color: #fff;
}
.tap-contain {
    bottom:40% !important;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 10;
}
.swipe-text {
    font-size:3vw;
    font-family: sans-serif;
} 

.invitation-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
 
.scene.fullscreen .invitation-image {
    width: 100vw !important;
    height: 100vh !important;
    display: block;
    object-fit: cover;
}

.invitation-icon i {
    animation: heartPulse 1.8s infinite;
}

@keyframes heartPulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

#section-two {
    padding: 0px;
    background-color: #95a6ba !important;
}
#section-footer {
    background-color:  #95a6ba !important;
}
#section-one {
    /* background-color:  #95a6ba !important; */
    background: linear-gradient(150deg, #d1dce9 0%, #eef2f6 100%) !important;
    /* background: linear-gradient(173deg, #d1dce9 0%, #f5f7fa 50%, #c4d2e1 100%) !important; */
}
.flower-left, .flower-right {
    width: 125% !important;
}
.climber-right {
    left: 55% !important;
    display: none;
}
.climber-left {
    RIGHT: 55% !important;
    display: none;
}
.mehendi-center {
    position: absolute;
    bottom: -155px;
    left: 43%;
    transform: translateX(-50%);
    width: 197%;
}
.arch-flower-right {
    position: absolute;
    top: 133px;
    right: 125px;
    width: 55%;
}
.arch-flower-left {
    position: absolute;
    top: 133px;
    left: 125px !important;
    width: 54%;
}
.playball-regular {
    font-family: "Eagle Lake", serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
}
.peach-couple-name {
    font-size: 7rem !important;
}
.openinivitation {
    background-color: rgb(95 99 118) !important;
}
.overlay {
    background:rgb(255 255 255 / 20%) !important; 
}

.bottom-decor .bottom_flower {
    opacity: 1 !important;
}

#btn_play {
    animation: none !important;
    transform: none !important;
}
.loading_arrow {
    animation: wave 1.5s ease-in-out infinite !important;
    transform-origin: center !important;
}

@keyframes wave {
    0%, 100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-8deg);
    }

    75% {
        transform: rotate(8deg);
    }
}
.main-couple-name {
    font-size: 6rem !important; 
}