*, *::before, *::after{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font: inherit;
}

svg{
    contain: layout paint;
}

object{
    background: transparent;
    color-scheme: normal;
}

html, body {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.spark, .prefix__leaf, .bgrMultiply, .bgrOverlayWrapper, .bgrTopOverlay,
.initialParagraph .paragraphLine, .initialParagraph .paragraphGlow {
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* block document scrolling while .no-scroll is present */
.no-scroll, .no-scroll body, .no-scroll html {
  overflow: hidden !important;
  height: 100% !important;
  touch-action: none !important; /* prevents touch scrolling on mobile */
}

/* additionally prevent overscroll bounce on iOS */
.no-scroll {
  -webkit-overflow-scrolling: auto !important;
}

:root{
    --deep-red: #510414;
    --deep-red2: #3a030e;
    --bright-red: #990E0E;
    --shadow-red: #47000f;
    --soft-gold: #D5B88F;
    --soft-grey: #f2f2f2;
    --pure-white: #FFFFFF;
    --soft-white: #f4f4f4;
    --medium-black: #202020;
}

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

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

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

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

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

html{
    color-scheme: dark light;
    background-color: var(--medium-black); /* Don't change, keep values to maintain dark ui*/
}

body{
    min-height: 100svh;
    max-width: 100svw;
}

/*Opening Section (Background of initial area)*/

#invitationIntro-Section{
    width: 100svw;
    height: 110svh;
    position: relative;
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    top: 0%;
    background-color: var(--pure-white);

    contain: paint;
    isolation: isolate;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform, opacity;
    z-index: 0;
}

#invitationIntro-Section::before{
    content: "";
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    background-image: url(Assets/svg/backgroundTexture.min.svg);
    background-repeat: repeat;
    background-size: 50svw;
    opacity: 0.6;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

#invitationIntro-Section::after{
    content: "";
    max-width: 100%;
    max-height: 115%;
    position: absolute;
    background-image: radial-gradient(150% 55% at 50% 50%, transparent 60%, rgb(255, 255, 255) 92%);
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

/* Arch Components*/

.bgrArch{
    width: 75svw;
    height: 109svh;
    position: absolute;
    bottom: 0%;
    border: solid 8.5px rgb(181, 181, 181);
    border-radius: 1000px 1000px 0px 0px;

    display: flex;
    justify-content: center;
    align-content: center;
    justify-items: center;
    overflow: hidden;
}

.bgrArchShadow{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 50;
    justify-self: center;
    border-radius: 1000px 1000px 0px 0px;
    background-color: rgba(0, 0, 0, 1);
    mask-image: linear-gradient(black 0%, black 60%, transparent 100%);
    opacity: 0.6;
    bottom: 0%;

}

/* Wall Component*/

#wallEmblem{
    width: 45svw;
    height: auto;
    aspect-ratio: 1 / 1;
    position: absolute;
    z-index: 0;
    top: 13svh;
    background-image: url(Assets/svg/wallEmblem.min.svg);
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0px -3px 0.5px rgba(0,0,0,0.2));
}

/* Background Components*/

.branchContainer{
    width: 100svw;
    height: 100svh;
    max-width: 100svw;
    position: absolute;
    overflow: hidden;
    z-index: 100;
}

.branchTwoIndexAnim{
    animation: branchTwoIndex 0.1s linear forwards 6.5s;
}

@keyframes branchTwoIndex {
    0%{
        z-index: 100;
    }100%{
        z-index: 200;
    }
}

.branch{
    width: 84svw;
    height: auto;
    position: absolute;
    aspect-ratio: 1/1;
    color-scheme: normal;
    object-fit: contain;
    
    will-change: transform, opacity;
    transform: translateZ(0);
    contain: layout paint;
    backface-visibility: hidden;
}

#topBranch{
    top: 0svh;
    left: -6svw;
    transform-origin: bottom left;
    transform: rotate(0deg);
}

#bottomBranch{
    bottom: -3svh;
    right: -10svw;
    transform-origin: top right;
    transform: rotate(5deg);
    bottom: -0.5%;
}

.prefix__leaf{
    position: absolute;
    transform-box: fill-box;
    transform: rotate(0deg);
    will-change: transform;
}

.prefix__bottomLeft{
    transform-origin: bottom left;
}

.prefix__bottomRight{
    transform-origin: bottom right;
}

.prefix__bottom{
    transform-origin: bottom center;
}

.prefix__left{
    transform-origin: left center;
}

.prefix__right{
    transform-origin: right center;
}

.prefix__top{
    transform-origin: top center;
}

.prefix__topLeft{
    transform-origin: top left;
}

.prefix__topRight{
    transform-origin: top right;
}

/* Initial Text Components*/

.initialTextWrapper{
    width: 100svw;
    height: 100svh;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;

    filter: drop-shadow(0px 0px 10px rgb(0, 0, 0)) drop-shadow(0px 0px 10px rgba(0, 0, 0));
    z-index: 150;
    padding-top: 12%;

    animation: textIndex 0.2s linear forwards 30s;
}

@keyframes textIndex {
    0%{
        z-index: 150;
    }100%{
        z-index: -200;
    }
}

.initialParagraph{
    width: 80%;
    height: auto;
    aspect-ratio: 1 / 1;
    position: absolute;
    z-index: 200;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*.initialParagraph.One{
    animation: closeParagraph 1s ease-in forwards 14s;
}

.initialParagraph.Two{
    animation: closeParagraph 1s ease-in forwards 25s;
}*/

.fade-out {
  opacity: 0;
  transition: opacity 1s ease; /* adjust duration as you like */
}

@keyframes closeParagraph {
    0%{
        opacity: 1;
    }100%{
        opacity: 0;
        display: none;
        visibility: hidden;
    }
}

.paragraphLineBox{
    width: 100%;
    display: flex;
    flex-direction: row;
}

.paragraphLine{
    width: 100%;
    mask-image: radial-gradient(85% 400% at 100% 50% , transparent 50%, black 55%);
    mask-repeat: no-repeat;
    mask-size: 230% 100%;
    

    -webkit-mask-image: radial-gradient(85% 400% at 100% 50% , transparent 50%, black 55%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 230% 100%;

    -webkit-mask-position: var(--mask-x) 0;
    mask-position: var(--mask-x) 0;
    
}

.paragraphGlow{
    width: 100%;
    height: auto;
    position: absolute;

    filter: drop-shadow(0px 0px 4px rgb(255, 255, 255)) drop-shadow(0px 0px 2px rgb(255, 255, 255));
    -webkit-filter: drop-shadow(0px 0px 4px rgb(255, 255, 255)) drop-shadow(0px 0px 2px rgb(255, 255, 255));
    
    mask-image: radial-gradient(15% 100% at 50% 50%, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.26) 55%, transparent 95%);
    mask-repeat: no-repeat;
    mask-size: 110% 100%;

    -webkit-mask-image: radial-gradient(15% 100% at 50% 50%, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.26) 55%, transparent 95%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 110% 100%;

    -webkit-mask-position: var(--mask-x) 0;
    mask-position: var(--mask-x) 0;
}

.initTxt1{
    font-family: specialText;
    font-size: 1.6rem;
    text-align: center;
    vertical-align: middle;
    color: white;
}

.initTxt3{
    font-family: titleText;
    font-size: 4rem;
    text-align: center;
    vertical-align: middle;
    color: white;
    margin-bottom: -5%;
}

/* Overlay Components*/

.bgrMultiply {
  width: 100svw;
  height: 100svh;
  max-height: 100svh;
  position: absolute;
  top: 0%;

  background-color: rgb(0, 0, 0);
  mix-blend-mode: multiply;
  overflow: hidden;
  z-index: 100;
  opacity: 1;
  
  contain: layout;
  backface-visibility: hidden;
  transform: translateZ(0.1px);
  will-change: opacity, transform;
}

.bgrOverlayWrapper{
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;

    transform-origin: bottom;
    transform: scale(0.001);
    z-index: 100;
    pointer-events: none;
    will-change: transform;
    backface-visibility: hidden;
}

.bgrOverlay{
    width: 95%;
    height: 95%;
    position: absolute;
    bottom: 0%;
    mix-blend-mode: overlay;
}

#overlay1{
    clip-path: polygon(0 0%, 100% 0%, 100% 90%, 82% 100%, 18% 100%, 0% 90%);
    background-image: radial-gradient(100% 140% at 50% 70%, rgb(255, 255, 255) -10%, transparent 50%);
    z-index: 100;
}

#overlay2{
    clip-path: polygon(0 0, 100% 0, 100% 83%, 78% 100%, 23% 100%, 0% 83%);
    background-image: radial-gradient(90% 110% at 50% 80%, rgb(255, 255, 255) 20%, transparent 50%);
    z-index: 200;
}

#overlay3{
    clip-path: polygon(0 0, 100% 0, 100% 70%, 75% 100%, 26% 100%, 0% 70%);
    background-image: radial-gradient(85% 100% at 50% 90%, rgb(255, 255, 255) 20%, transparent 50%);
    z-index: 0;
}

.bgrTopOverlay {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: radial-gradient(70% 45% at 50% 100%,rgb(255, 255, 255) 25%,rgba(255, 255, 255, 0.82) 35%, transparent 60%);
  transform-origin: bottom;
  transform: scale(0.001);
  opacity: 1;
  mix-blend-mode: normal;
  z-index: 200;
  will-change: transform;
  pointer-events: none;
  backface-visibility: hidden;
}

/* Initial Background Sparks Components*/

.baseSparkWrapper{
    width: 100svw;
    height: 85svh;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 100;
    overflow: hidden;
    top: 15svh;
    transform-origin: bottom;
    mask-image: radial-gradient(95% 80% at 50% 60%, rgb(255, 255, 255) 20%, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 0.1) 50%, transparent 60%);
}

.sparkWrapper{
    width: 100%;
    height: 100%;
    position: absolute;
}

.bgrOverlayWrapper,
.bgrMultiply,
.bgrTopOverlay {
  contain: paint;
  backface-visibility: hidden;
}



/* Spark Group Components*/

.sparkGrpStart{
    width: 100%;
    height: auto;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: start;
    transform: translateY(100svh);
    will-change: transform;
}


.startSparkAnimOne{
    animation: sparkMovement 15s linear forwards infinite 3s;
}

.sparkGrpMiddle{
    width: 100%;
    height: auto;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: start;
    transform: translateY(100svh);
    will-change: transform;
}

.startSparkAnimTwo{
    animation: sparkMovement 15s linear forwards infinite 8s;
}

.sparkGrpEnd{
    width: 100%;
    height: auto;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: start;
    transform: translateY(100svh);
    will-change: transform;
}

.startSparkAnimThree{
    animation: sparkMovement 15s linear forwards infinite 11.75s;
}

@keyframes sparkMovement {
    0%{
        transform: translateY(100svh);
    }100%{
        transform: translateY(-24svh);
    }
}

.sparkBox{
    width: 70%;
    filter: drop-shadow(0px 0px 7px white);
}


@keyframes rotateStar {
    0%{
        transform: rotate(0deg);
    }100%{
        transform: rotate(360deg);
    }
}

/* Letter properties*/

.letterWrapper{
    width: 100svw;
    height: 115svh;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 100;
    overflow: hidden;
    opacity: 1;
}

.letterBox{
    width: 45%;
    height: auto;
    position: absolute;
    bottom: 15svh;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    aspect-ratio: 1 / 1.2;
    transform: translateY(8%) scale(0.1) rotateY(-180deg);
    -webkit-transform: translateY(8%) scale(0.1) rotateY(-180deg);
    
    transform-style: preserve-3d;
    transform-origin: bottom;

    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: bottom;

    will-change: transform;
    animation-composition: replace, replace, add;

}

.letterGlowBox{
    width: 99%;
    height: auto;
    position: absolute;
    z-index: 100;
    aspect-ratio: 1 / 0.6;

    transform-style: preserve-3d;
    transform-origin: center;

    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: center;

    opacity: 1;
}

.letterGlow{
    width: 100%;
    height: 100%;
    transform: scale(0.7);
    -webkit-transform: scale(0.7s);

    transform-style: preserve-3d;
    transform-origin: center;

    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: center;

    border-radius: 0px 0px 10px 10px;
    box-shadow: 0px 0px 30px rgb(255, 255, 255), 0px 0px 30px rgb(255, 255, 255); 
    opacity: 1;
}

/* Letter body properties*/

.letterBody{
    width: 100%;
    height: auto;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    aspect-ratio: 1 / 0.6;

    transform-style: preserve-3d;
    transform-origin: center;

    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: center;
}   

.letterBody::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: radial-gradient(ellipse at top, var(--bright-red) 30%, var(--deep-red) 75%);
    -webkit-background-image: radial-gradient(ellipse at top, var(--bright-red) 30%, var(--deep-red) 75%);
    border-radius: 0px 0px 10px 10px;

    transform: rotateY(180deg);
    transform-style: preserve-3d;
    backface-visibility: hidden;

    -webkit-transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
}

.letterBody::after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: var(--deep-red2);
    border-radius: 0px 0px 10px 10px;

    transform-style: preserve-3d;
    backface-visibility: hidden;

    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
}

/* Letter card properties*/

.letterCard{
    width: 90%;
    height: auto;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 700;
    aspect-ratio: 1 / 0.6;
    background-color: var(--pure-white);
    border-radius: 4%;
    margin-bottom: 2%;

    transform: translateY(0svh);
    transform-style: preserve-3d;
    backface-visibility: hidden;

    -webkit-transform: translateY(0svh);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;

}

.letterCardGlow{
    width: 100%;
    height: auto;
    position: absolute;
    aspect-ratio: 1 / 1;
    background: radial-gradient(circle at center, white 10%, transparent 70%);
    opacity: 1;
    will-change: transform;

    transform: scale(0);
    -webkit-transform: scale(0);
}

.screenGlowAnim{
    animation: screenGlow 3s ease forwards 4s;
}

@keyframes screenGlow {
    0%{
        transform: scale(0);
        opacity: 1;
    }50%{
        transform: scale(25);
        opacity: 1;
    }51%{
        transform: scale(25);
        opacity: 1;
    }100%{
        transform: scale(0);
        opacity: 0;
    }
}

/* Inner letter properties*/

.letterComponents{
    width: 100%;
    height: auto;
    position: absolute;
    z-index: 800;
    aspect-ratio: 1 / 0.6;
    display: grid;
    grid-template-columns: 1fr 0.2fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    overflow: hidden;
    border-radius: 0px 0px 10px 10px;

    transform-style: preserve-3d;
    backface-visibility: hidden;

    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
}

.innerLetterLeft{
    width: 100%;
    height: 100%;
    display: grid;
    grid-column-start: 1; grid-column-end: 2;
    grid-row-start: 1; grid-row-end: 4;

    filter: drop-shadow(0px -4px 1.5px #47000fc1);
    -webkit-filter: drop-shadow(0px -4px 1.5px #47000fc1);
}

.innerLetterLeft::before{
    content: "";
    width: 100%;
    height: 100%;
    background-image: radial-gradient(ellipse at top right, var(--bright-red) 30%, var(--deep-red) 75%);
    -webkit-background-image: radial-gradient(ellipse at top right, var(--bright-red) 30%, var(--deep-red) 75%);
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}

.innerLetterRight{
    width: 100%;
    height: 100%;
    display: grid;
    grid-column-start: 3; grid-column-end: 4;
    grid-row-start: 1; grid-row-end: 4;

    filter: drop-shadow(0px -4px 1.5px #47000fc1);
    -webkit-filter: drop-shadow(0px -4px 1.5px #47000fc1);
}

.innerLetterRight::before{
    content: "";
    width: 100%;
    height: 100%;
    background-image: radial-gradient(ellipse at top left, var(--bright-red) 30%, var(--deep-red) 75%);
    -webkit-background-image: radial-gradient(ellipse at top left, var(--bright-red) 30%, var(--deep-red) 75%);
    clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
}

.innerLetterBottom{
    width: 100%;
    height: 100%;
    display: grid;
    grid-column-start: 1; grid-column-end: 4;
    grid-row-start: 2; grid-row-end: 4;
    filter: drop-shadow(0px -4px 1px #47000fc1);
    -webkit-filter: drop-shadow(0px -4px 1px #47000fc1);
}

.innerLetterBottom::before{
    content: "";
    width: 100%;
    height: 100%;
    background-image: radial-gradient(ellipse at top center, var(--bright-red) 30%, var(--deep-red) 75%);
    -webkit-background-image: radial-gradient(ellipse at top center, var(--bright-red) 30%, var(--deep-red) 75%);
    clip-path: polygon(0% 100%, 46% 3%, 47% 2% , 47.5% 1.5% ,48% 1% , 49% 0.5%, 50% 0.3%, 51% 0.5%,  52% 1%, 52.5% 1.5%, 53% 2%, 54% 3%, 100% 100%);
}

/* Letter lid properties*/

.letterLidBox{
    width: 100%;
    height: auto;
    aspect-ratio: 1/0.6;
    position: absolute;

    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: 1fr 0.2fr 1fr;

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

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

}

.letterLid{
    width: 100%;
    height: 100%;
    position: absolute;

    display: flex;
    grid-column-start: 1; grid-column-end: 4;
    grid-row-start: 1; grid-row-end: 3;
    z-index: 900;

    transform: rotateX(0deg);
    transform-style: preserve-3d;
    transform-origin: top;

    -webkit-transform: rotateX(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: top;

    will-change: transform;
}

@keyframes lidIndex {
    0%{
        z-index: 900;
    }49.9%{
        z-index: 900;
    }50%{
        z-index: 600;
    }100%{
        z-index: 600;
    }
}

.letterLid::after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;

    display: flex;
    grid-column-start: 1; grid-column-end: 4;
    grid-row-start: 1; grid-row-end: 3;
    
    background-image: radial-gradient(ellipse at top center, var(--bright-red) 30%, var(--deep-red) 75%);
    -webkit-background-image: radial-gradient(ellipse at top center, var(--bright-red) 30%, var(--deep-red) 75%);
    clip-path: polygon(0% 0%, 0% 20%, 46% 97%, 47% 98% , 47.5% 98.5% ,48% 99% , 49% 99.5%, 50% 99.7%, 51% 99.5%,  52% 99%, 52.5% 98.5%, 53% 98%, 54% 97%, 100% 20%, 100% 0%);
    
    transform-origin: center;
    backface-visibility: hidden;

    -webkit-transform-origin: center;
    -webkit-backface-visibility: hidden;
}

.letterLidShadow{
    width: 100%;
    height: 100%;
    position: absolute;
    filter: drop-shadow(0px 4px 1px var(--shadow-red));
    -webkit-filter: drop-shadow(0px 4px 1px var(--shadow-red));
}

.removeLidShadow{
    animation: removeLidShadow 2s cubic-bezier(.2,.88,.68,1.14) forwards 1s;
}

@keyframes removeLidShadow {
    0%{
        filter: drop-shadow(0px 4px 1px var(--shadow-red));
    }50%{
        filter: drop-shadow(0px -4px 1px var(--deep-red2));
    }100%{
        filter: drop-shadow(0px -4px 1px var(--deep-red2));
    }
}

.letterLidShadow::before{
    content: "";    
    width: 100%;
    height: 100%;
    display: grid;
    background-color: var(--deep-red2);
    clip-path: polygon(0% 0%, 0% 20%, 46% 97%, 47% 98% , 47.5% 98.5% ,48% 99% , 49% 99.5%, 50% 99.7%, 51% 99.5%,  52% 99%, 52.5% 98.5%, 53% 98%, 54% 97%, 100% 20%, 100% 0%);
}

/* LetterBranch properties*/

.letterBranchBox{
    width: 100%;
    height: auto;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    aspect-ratio: 1 / 0.6;

    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.letterBranch{
    width: auto;
    height: 95%;
    transform-origin: center;
    transform: rotate(18deg) translate( 13%, 0%);
    -webkit-transform: rotate(18deg) translate( 13%, 0%);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Letter seal properties*/

.letterSealBox{
    width: 100%;
    height: auto;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    aspect-ratio: 1 / 0.6;

    filter: drop-shadow(0px -1px 1px #47000fc1);
    -webkit-filter: drop-shadow(0px -1px 1px #47000fc1);

    transform-style: preserve-3d;
    backface-visibility: hidden;

    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;

}

.sealDropsBox{
    width: 100%;
    height: 100%;
    position: absolute;
}

.sealDrop{
    height: auto;
    position: absolute;
    aspect-ratio: 1 / 1;
    background: 
    radial-gradient(30% 30% at 70% 70%, rgba(255, 247, 208, 0.689) 0%, transparent 70%),
    radial-gradient(circle at  10% 20%, #bc7e33 30%, #d9cb8b 90%);

    -webkit-background: 
    radial-gradient(30% 30% at 70% 70%, rgba(255, 247, 208, 0.689) 0%, transparent 70%),
    radial-gradient(circle at  10% 20%, #bc7e33 30%, #d9cb8b 90%);
    border-radius: 100%;
}

#drop1{
    width: 16%;
    top: -2%;
    left: -3%;
}

#drop2{
    width: 13%;
    bottom: -0%;
    left: -3%;
}

#drop3{
    width: 9%;
    right: -12%;
    top: 66%;
}

.sealBody{
    width: 20%;
    height: auto;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(#BF6C25 20%, #EDDE9A 40%, #EDDE9A 60%, #BF6C25 80%);
    -webkit-background: linear-gradient(#BF6C25 20%, #EDDE9A 40%, #EDDE9A 60%, #BF6C25 80%);
    border-radius: 100%;

}

.sealRidge{
    width: 92%;
    height: auto;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background: linear-gradient(45deg, #BF6C25 20%, #f3e39b 40%, #f3e39b 55%, #BF6C25 80%);
    -webkit-background: linear-gradient(45deg, #BF6C25 20%, #f3e39b 40%, #f3e39b 55%, #BF6C25 80%);
    border-radius: 100%;
}

.sealRidge::before{
    content: "";
    width: 95%;
    height: auto;
    position: absolute;
    aspect-ratio: 1 / 1;
    background: linear-gradient(45deg, #cc7f3c 15%, #7b471a 35%, #7b471a 60%, #BF6C25 85%);
    -webkit-background: linear-gradient(45deg, #cc7f3c 15%, #7b471a 35%, #7b471a 60%, #BF6C25 85%);
    border-radius: 100%;
}

.sealRidgeOuter{
    width: 90%;
    height: auto;
    position: absolute;
    aspect-ratio: 1 / 1;
    background: radial-gradient(circle at center, transparent 55%, rgb(60, 20, 0)), linear-gradient(#b47323 30%, #ebdc98 90%);
    -webkit-background: radial-gradient(circle at center, transparent 55%, rgb(60, 20, 0)), linear-gradient(#b47323 30%, #ebdc98 90%);
    border-radius: 100%;
}

.sealEmblem{
    width: 100%;
    height: auto;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
}

.sealEmblem::before{
    content: "";
    width: 85%;
    height: auto;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;

    background: url(Assets/svg/weddingMonogramColor.svg);
    background-size: 65%;
    background-repeat: no-repeat;
    background-position: 50% 50%;

    -webkit-background: url(Assets/svg/weddingMonogramColor.svg);
    -webkit-background-size: 65%;
    -webkit-background-repeat: no-repeat;
    -webkit-background-position: 50% 50%;

    border-radius: 100%;
}

.sealSparkBox{
    width: auto;
    height: 100%;
    position: absolute;
    display: flex;
    top: 15%;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;

}

.sealSparkBgrGlow{
    width: 200%;
    height: auto;
    position: absolute;
    aspect-ratio: 1/1;
    background: radial-gradient(circle at center, #f9c128 -10%, #fbaa13af 15%, #fbbd1323 55%, transparent 70%);
    background-blend-mode: lighten;
    opacity: 0;
    will-change: transform;
}

.sealSpark{
    content: "";
    width: 15%;
    height: auto;
    aspect-ratio: 1 / 1;
    position: absolute;
    background: radial-gradient(circle at center, #ffefa8 0%, #e5a628 50%);
    clip-path: polygon(50% 0, 62% 35%, 100% 50%, 62% 65%, 50% 100%, 38% 65%, 0 50%, 38% 35%);
    opacity: 0;
    transform-origin: center;
    will-change: transform;
}

#sealSpark1{
    transform: translate(0%, -550%) rotate(270deg);
}

#sealSpark2{
    transform: translate(550%, -150%) rotate(270deg);
}

#sealSpark3{
    transform: translate(350%, 400%) rotate(270deg);
}

#sealSpark4{
    transform: translate(-350%, 400%) rotate(270deg);
}

#sealSpark5{
     transform: translate(-550%, -150%) rotate(270deg);
}

/*.SealSparkGlowShow{
    animation: sealSparkGlowMovement 1.3s cubic-bezier(.32,1.15,.78,1.15) forwards;
}

@keyframes sealSparkGlowMovement {
    0%{
        scale: 0;
        opacity: 0;
    }70%{
        opacity: 1;
    }100%{
        scale: 1;
        opacity: 0;
    }
}

.SealSparkShow{
    animation: sealSparkMovement 1.3s cubic-bezier(.32,1.15,.78,1.15) forwards 0.2s;
}

@keyframes sealSparkMovement {
    0%{
        transform: translate(0%, 0%) rotate(0deg);
        opacity: 0;
    }30%{
        opacity: 1;
    }60%{
        opacity: 1;
    }80%{
        opacity: 0;
    }100%{
        opacity: 0;
    }
}*/

.bottomArrowBox{
    width: 18%;
    height: auto;
    position: absolute;
    bottom: 0%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -100;
    opacity: 0;
}

.arrowBobAnim{
    animation: arrowBob 3s linear infinite 8s;
}

@keyframes arrowBob {
    0%{
        transform: translateY(0svh);
        opacity: 0;
    }5%{
        opacity: 0;
    }40%{
        opacity: 1;
    }45%{
        opacity: 1;
    }50%{
        transform: translateY(8svh);
        opacity: 0;
    }100%{
        transform: translateY(8svh);
        opacity: 0;
    }
}

.downArrowSvg{
    fill: var(--pure-white);
}

/*font value Components*/

.normalTextSlant{
    color: var(--medium-black);
    font-family: specialText;
    font-size: 1.3rem;
    text-align: center;
    letter-spacing: 0.05rem;
    font-weight: bold;
}

.normalText{
    color: var(--medium-black);
    font-family: normalText;
    font-size: 1.4rem;
    text-align: center;
    letter-spacing: 0.05rem;
    font-weight: bold;
}

.normalTextCursive{
    color: var(--medium-black);
    font-family: titleText;
    font-size: 3rem;
    text-align: center;
}

.numberText{
    color: var(--medium-black);
    font-family: numberText;
    font-size: 3rem;
    text-align: center;
}

.h1TextNormal{
    color: var(--medium-black);
    font-family: normalText;
    font-size: 1.5rem;
    text-align: center;
    letter-spacing: 0.05rem;
    font-weight: bold;
}

.h2TextNormal{
    color: var(--medium-black);
    font-family: normalText;
    font-size: 1.4rem;
    text-align: center;
    letter-spacing: 0.05rem;
    font-weight: bold;
}

.h1TextCursive{
    color: var(--medium-black);
    font-family: titleText;
    font-size: 3rem;
    text-align: center;
}

/*First Section Components*/

#firstSection{
    width: 100svw;
    height: 80svh;
    position: absolute;
    z-index: 300;
    top: 110svh;
    display: grid;
    background-color: var(--pure-white);
    border: solid 2px white;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 6fr;
}


.textBlock{
    width: 100%;
    height: 100%;
    position: absolute;
    text-align: center;
}

.parentTitle{
    top: -10svh;
    grid-column-start: 1; grid-column-end: 3;
    grid-row-start: 1; grid-row-end: 2;
}

.textBlock .h1TextCursive{
    color: var(--soft-gold);
    font-size: 3.2rem;
}

.firstSectionBox{
    width: 100%;
    height: 100%;
    position: absolute;
    display: grid;
    overflow-x: hidden;
    padding-top: 15%;
    padding-bottom: 15%;

    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: 1fr;

    grid-column-start: 1; grid-column-end: 3;
    grid-row-start: 1; grid-row-end: 3;
}

.parentNamesBox{
    width: 100%;
    height: 100%;
    position: absolute;
    display: grid;
    padding-left: 3%; padding-right: 3%;

    grid-template-columns: 1fr;
    grid-template-rows: repeat(9, 1fr);
    grid-template-rows: 1fr 1fr 0.6fr 1fr 2fr 1fr 0.6fr 1fr 1fr;

    grid-column-start: 1; grid-column-end: 2;
    grid-row-start: 1; grid-row-end: 2;
}

.parentNamesBox > :nth-child(1){
    grid-column-start: 1; grid-column-end: 2;
    grid-row-start: 2; grid-row-end: 3;
}

.parentNamesBox > :nth-child(2){
    grid-column-start: 1; grid-column-end: 2;
    grid-row-start: 3; grid-row-end: 4;
}

.parentNamesBox > :nth-child(3){
    grid-column-start: 1; grid-column-end: 2;
    grid-row-start: 4; grid-row-end: 5;
}

.parentNamesBox > :nth-child(4){
    grid-column-start: 1; grid-column-end: 2;
    grid-row-start: 6; grid-row-end: 7;
}

.parentNamesBox > :nth-child(5){
    grid-column-start: 1; grid-column-end: 2;
    grid-row-start: 7; grid-row-end: 8;
}

.parentNamesBox > :nth-child(6){
    grid-column-start: 1; grid-column-end: 2;
    grid-row-start: 8; grid-row-end: 9;
}

.textDivider{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content:center;
    align-items: center;
}

.textDivider.h2TextNormal{
    font-size: 1rem;
    color: var(--soft-gold);

}

.textDivider span{
    margin-left: 5%; margin-right: 5%;
}

.textDivider::before, .textDivider::after{
    content: "";
    width: 30%;
    height: 6%;
    margin-bottom: 2%;
    background-color: var(--soft-gold);
}

.partnerImgSection1{
    width: 150%;
    height: 95%;
    position: absolute;
    display: grid;
    grid-column-start: 2; grid-column-end: 3;
    grid-row-start: 1; grid-row-end: 2;
    top: 0%;
}

.partnerImgSectionBgr1{
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    mask-image: radial-gradient(58% 70% at 30% 60%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 95%);
    mask-position: left;
}

.partnerImgSectionBgr1::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 1500px 1500px 0px 0px;
    background-color: rgb(228, 228, 228);
}

.partnerImgSectionBgr1::after{
    content: "";
    width: 85%;
    height: 90%;
    position: absolute;
    border-radius: 1500px 1500px 0px 0px;
    background-image: url(Assets/svg/backgroundTexture.min.svg);
    background-repeat: repeat;
    background-size: 50svw;
    opacity: 0.35;
    box-shadow: inset 0px 0px 20px rgb(0, 0, 0);
}

.partnerImg{
    width: 85%;
    height: 90%;
    position: absolute;
    z-index: 200;
    overflow: hidden;
}

.partnerImg::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url(Assets/img/image2.png);
    background-size: auto 100%;    
    background-repeat: no-repeat;
    background-position: -10% 100%;
    left: -12%;
    bottom: -14%;
}

.decorativeMouldBox{
    position: absolute;
}

.sectionMould1{
    width: 115%;
    height: 10%;
    grid-column-start: 2; grid-column-end: 3;
    grid-row-start: 1; grid-row-end: 2;
    bottom: 0%;
    justify-self: center;
    transform-origin: center;
}

.decorativeMouldingInner{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.decorativeMouldingInner > div{
        box-shadow: 0px 2px 5px rgb(181, 181, 181);
}

.dMPart1{
    width: 100%;
    height: 15%;
    background-color: rgb(255, 255, 255);
    z-index: 200;
}

.dMPart2{
    width: 95%;
    height: 12%;
    position: relative;
    background: rgb(255, 255, 255);
    z-index: 100;
}

.dMPart3{
    width: 88%;
    height: 30%;
    position: relative;
    background: rgb(255, 255, 255);
}

.sectionMould1 .dMPart3{
    background-color: var(--soft-gold);
}

.dMPart4{
    width: 95%;
    height: 12%;
    position: relative;
    background-color: rgb(255, 255, 255);
    z-index: 200;
    
}

.decorativeMouldingPart5{
    width: 95%;
    height: 10%;
    position: relative;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 2px 5px rgb(170, 170, 170);
}

/* Section two components*/

#secondSection{
    width: 100svw;
    height: 95svh;
    position: absolute;
    z-index: 300;
    top: 190svh;
    display: grid;
    padding-top: 25%;

    background-color: var(--pure-white);
    grid-template-columns: 0.1fr 1fr 0.1fr;
    grid-template-rows: 0.3fr 1fr 0.25fr 0.15fr;
}

.partnerImgSection2BgrBox{
    width: 100%;
    height: 95%;
    display: grid;
    align-items: center;
    justify-items: center;
    position: absolute;
    overflow: hidden;

    grid-template-columns: 0.2fr 0.1fr 1fr 0.1fr 0.2fr;
    grid-template-rows: 1fr;

    grid-column-start: 1; grid-column-end: 4;
    grid-row-start: 1; grid-row-end: 5;

    mask-image: radial-gradient(40% 40% at 80% 80%, rgba(0, 0, 0, 0.150) 0%, rgb(0, 0, 0) 100%) ;
    mask-composite: intersect;
    bottom: 0%;
}

.partnerImgSection2{
    width: 100%;
    height: 100%;
    position: absolute;
    align-items: flex-end;
    justify-items: center;
    display: grid;
    background-color: rgb(228, 228, 228); 
}

.partnerImgSection2::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    display: grid;
    background-image: url(Assets/svg/backgroundTexture.min.svg);
    background-repeat: repeat;
    background-size: 50svw;
    opacity: 0.4;
    box-shadow: inset 0px 0px 15px rgb(0, 0, 0);
}

.partnerImgSection2.img::after{
    content: "";
    width: 110%;
    height: 100%;
    position: absolute;
    background-image: url(Assets/img/image1.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    scale: 1.2;
    z-index: 400;
    bottom: -20%;
}

.Bgr1{
    width: 250%;
    height: 95%;
    position: absolute;
    right: 0%; bottom: 0%;
    grid-column-start: 1; grid-column-end: 2;
    grid-row-start: 1; grid-row-end: 4;
    border-radius: 0px 1500px 0px 0px;
}

.Bgr1::before{
    border-radius: 0px 1500px 0px 0px;
}

.Bgr2{
    width: 100%;
    height: 100%;
    position: absolute;
    grid-column-start: 3; grid-column-end: 4;
    grid-row-start: 1; grid-row-end: 4;
    border-radius: 1500px 1500px 0px 0px;

}

.Bgr2::before{
    content: "";
    width: 85%;
    height: 96.5%;
    border-radius: 1500px 1500px 0px 0px;
}

.Bgr3{
    width: 250%;
    height: 95%;
    position: absolute;
    left: 0%; bottom: 0%;
    grid-column-start: 5; grid-column-end: 6;
    grid-row-start: 1; grid-row-end: 4;
    border-radius: 1500px 0px 0px 0px;
}

.Bgr3::before{
    border-radius: 1500px 0px 0px 0px;
}

.sectionMould2{
    width: 250%;
    height: 6%;
    position: absolute;
    grid-column-start: 2; grid-column-end: 3;
    grid-row-start: 1; grid-row-end: 2;
    top: 20%;
    margin-left: 60%;
    justify-self: center;
    transform-origin: center;
}

.sectionMould3{
    width: 250%;
    height: 6%;
    position: absolute;
    grid-column-start: 4; grid-column-end: 5;
    grid-row-start: 1; grid-row-end: 2;
    top: 20%;
    margin-right: 60%;
    justify-self: center;
    transform-origin: center;
}

.sectionMould2 .dMPart3, .sectionMould3 .dMPart3{
    background-color: var(--soft-gold);
}

.partnerNamesBox{
    width: 100%;
    height: 100%;
    display: grid;
    position: absolute;
    align-items: center;
    justify-items: center;
    z-index: 200;
}

.partnerNamesBox.one{
    grid-template-columns: 0.06fr 1fr 0.06fr;
    grid-template-rows: 1fr 0.2fr;
    grid-column-start: 1; grid-column-end: 4;
    grid-row-start: 1; grid-row-end: 2;
    bottom: 15%;
}

.partnerNamesBox.two{
    grid-template-columns: 0.06fr 1fr 0.06fr;
    grid-template-rows: 0.3fr 0.6fr 1fr 0.5fr;
    grid-column-start: 1; grid-column-end: 4;
    grid-row-start: 3; grid-row-end: 4;
}

.partnerNamesBox.two::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #d5b88fbf;
    backdrop-filter: blur(2px);
    
}

.partnerNameTextComposite1{
    width: 100%;
    height: 100%;
    position: absolute;
    display: grid;
    grid-template-columns: 0.8fr 1fr;
    grid-template-rows: 1fr 0.85fr;
    grid-column-start: 2; grid-column-end: 3;
    grid-row-start: 1; grid-row-end: 2;
}

#partnerNameText1{
    position: absolute;
    grid-column-start: 1; grid-column-end: 5;
    grid-row-start: 2; grid-row-end: 3;
    align-self: end;
    text-box-trim: trim-both;
    text-box-edge: ex alphabetic;
}

#partnerNameText2{
    position:absolute;
    grid-column-start: 1; grid-column-end: 2;
    grid-row-start: 1; grid-row-end: 2;
    font-size: 5.3rem;
    bottom: 0%;
    right: 0%;
    text-box-trim: trim-both;
    text-box-edge: ex alphabetic;
}

#partnerNameText3{
    position: absolute;
    grid-column-start: 1; grid-column-end: 2;
    grid-row-start: 2; grid-row-end: 3;
    font-size: 3.5rem;
    color: var(--soft-gold);
    bottom: 0%;
    right: 5%;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

#partnerNameText4{
    position: absolute;
    grid-column-start: 2; grid-column-end: 3;
    grid-row-start: 2; grid-row-end: 3;
    font-size: 5rem;
    bottom: 0%;
    left: 0%;
    text-box-trim: trim-both;
    text-box-edge: ex alphabetic;
}

.partnerNameTextComposite2{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    position: absolute;
    grid-column-start: 1; grid-column-end: 5;
    grid-row-start: 3; grid-row-end: 4;
}

#partnerNameText5{
    position: relative;
    bottom: 0%;
    margin-right: 2%;

    text-box-trim: trim-both;
    text-box-edge: ex alphabetic;
}

#partnerNameText6{
    position: relative;
    bottom: -20%;
    margin-left: 3%;
    font-size: 3.4rem;

    text-box-trim: trim-both;
    text-box-edge: ex alphabetic;
}


/*Third section and arch components*/

.thirdSection{
    width: 100svw;    
    height: 130svh;
    position: absolute;
    background-color: var(--pure-white);
    top: 285svh;
    overflow: hidden;
}

.dateLocationBox{
    width: 100%;
    height: 96%;
    position: absolute;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0.6fr 1fr 0.25fr;
    align-items: center;
    justify-items: center;
    transform-origin: bottom;
    bottom: 0%;
}

.dateLocationBox::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    
    background: url(Assets/svg/backgroundTexture.min.svg);
    background-repeat: repeat;
    background-size: 50svw;
    opacity: 0.6;
    mask-image: linear-gradient(180deg, black 10%, rgba(0, 0, 0, 0.3) 85%, rgba(0,0,0,0) 100%);
    
}

.sectionDivider1{
    width: 100%;
    height: 1.4%;
    position: absolute;
    top: 0%;
    z-index: 400;
    background-color: var(--soft-gold);
}

.sectionDivShadow{
    width: 100%;
    height: 4%;
    position: absolute;
    top: 0%;
    z-index: 300;
    background-image: linear-gradient(rgb(207, 207, 207) 0%, transparent 95%);
    filter: hue-rotate(10deg);
}

.locationArchBox{
    width: 100%;
    height: 65%;
    position: absolute;
    display: grid;
    align-self: flex-start;
    grid-row-start: 1; grid-row-end: 2;
    filter: drop-shadow(0px 5px 5px rgb(176, 176, 176));
}

.locationArch{
    width: 100%;
    height: 100%;
    position: absolute;
    background: repeating-conic-gradient(from 0deg at 50% 95%, rgb(205, 205, 205) 0%, rgb(205, 205, 205) 0.298%, rgb(205, 205, 205) 0.3%, rgb(228, 228, 228) 0.3%, rgb(228, 228, 228) 4.7%,rgb(240, 240, 240) 4.7%, rgb(205, 205, 205) 4.7%, rgb(205, 205, 205) 5%);       
    z-index: -100; 
    clip-path: shape(
    nonzero from 0% 0%, 
    line to 100% 0%,
    line to 100% 100%,
    line to 90% 115%,
    arc to 10% 115% of 10px small ccw,
    line to 0% 100%);
}

.locationArch::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: repeating-conic-gradient(from 0deg at 50% 95%, rgb(240, 240, 240) 0%, rgb(225, 225, 225) 0.298%, rgb(240, 240, 240) 0.3%, var(--pure-white) 0.3%, var(--pure-white) 4.7%,rgb(240, 240, 240) 4.7%, rgb(225, 225, 225) 4.7%, rgb(240, 240, 240) 5%);       
    clip-path: shape(
    nonzero from 0% 0%, 
    line to 100% 0%,
    line to 100% 100%,
    line to 95% 115%,
    arc to 5% 115% of 10px small ccw,
    line to 0% 100%);
}

/* Clock components*/

.clockWrapper{
    height: 75%;
    width: auto;
    aspect-ratio: 1 / 1;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
    top: 35%;

    grid-row-start: 1; grid-row-end: 2;
    background-color: var(--soft-gold);
    border-radius: 100%;
}

.clockDecor{
    width: 10%;
    height: auto;
    aspect-ratio: 1 / 1;
    position: absolute;
    background-color: var(--soft-gold);
}

.clockDecor.one{
    top: -5%;
    border-radius: 100%;
}

.clockDecor.two{
    width: 12%;
    bottom: -5%;
    border-radius: 100%;
}

.clockDecor.three{
    width: 6%;
    height: 20%;
    bottom: -15%;
    clip-path: polygon(0% 0%, 100% 0%, 45% 100%, 35% 100%);
    
}

.clockWrapperInner1{
    width: 95%;
    height: 95%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--soft-gold);
    border-radius: 100%;
    filter: brightness(1.1);
}

.clockWrapperInner2{
    width: 92%;
    height: 92%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(255, 248, 238);
    border-radius: 100%;
}

.clockWrapperInner2::after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: linear-gradient(45deg,
        rgb(255, 255, 255) 0%, rgb(251, 251, 251) 18%, 
        rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 28%, 
        rgb(255, 255, 255) 35%, rgb(255, 255, 255) 40%, 
        rgba(255, 255, 255, 0) 47%, rgba(255, 255, 255, 0) 48%,
        rgb(255, 255, 255) 55%, rgb(255, 255, 255) 57%,
        rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0) 63%,
        rgb(255, 255, 255) 67%, rgb(255, 255, 255) 67.5%,
        rgba(255, 255, 255, 0) 71%, rgba(255, 255, 255, 0) 73%,
        rgb(255, 255, 255) 82%, rgb(255, 255, 255) 100%);
    mix-blend-mode: plus-lighter;
    opacity: 0.1;
    border-radius: 100%;
    z-index: 500;
}

.clockWrapperInner3{
    width: 90%;
    height: 90%;
    position: absolute;
    border: solid 1.8px rgb(234, 219, 207);
    border-radius: 100%;
}

.clockWrapperInner4{
    width: 85%;
    height: 85%;
    position: absolute;
    background-image: repeating-conic-gradient(transparent 0%, transparent 5%, rgb(205, 192, 184) 5%, rgb(205, 192, 184) 5.56%);
    mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 45%, black 75%);
    border: solid 2px rgb(205, 192, 184);
    border-radius: 100%;
}

.clockWrapperInner5{
    width: 54%;
    height: 54%;
    position: absolute;
    border: solid 1.8px rgb(205, 192, 184);
    border-radius: 100%;
    opacity: 0.5;
}

.clockWrapperInner6{
    width: 50%;
    height: 50%;
    position: absolute;
    --s: 8px; /* control the size*/
    --c1: rgb(205, 192, 184);
    --c2: rgb(255, 252, 244);
  
    --_g: #0000 83%,var(--c1) 85% 99%,#0000 101%;
    background:
    radial-gradient(27% 29% at right ,var(--_g)) calc(var(--s)/ 2) var(--s),
    radial-gradient(27% 29% at left  ,var(--_g)) calc(var(--s)/-2) var(--s),
    radial-gradient(29% 27% at top   ,var(--_g)) 0 calc(var(--s)/ 2),
    radial-gradient(29% 27% at bottom,var(--_g)) 0 calc(var(--s)/-2)
    var(--c2);
    background-size: calc(2*var(--s)) calc(2*var(--s));

    border: solid 1.5px rgb(205, 192, 184);
    border-radius: 100%;
    opacity: 0.5;
    border-radius: 100%;
}

@property --clockTime{
    syntax: '<percentage>';
    initial-value: 100%;
    inherits: false;
}

.clockWrapperInnerTimer{
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 100%;
    will-change: transform, background-image;
    opacity: 1;

    background-image: conic-gradient(rgb(245, 233, 219) 0%, rgb(245, 233, 219) var(--clockTime), transparent var(--clockTime));
    animation: conic-gradient 8s linear 0s infinite none running;
}

@keyframes conic-gradient {
    0%{
        --clockTime: 0%;
    }100%{
        --clockTime: 100%;
    }
}

.dateBox{
    width: 80%;
    height: 80%;
    position: absolute;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: 1fr 0.3fr 1fr;
    grid-template-rows: 0.8fr 0.05fr 0.05fr 0.2fr 0.05fr 0.4fr;
    border-radius: 100%;

}

.dateBox > .numberText.day{
    position: absolute;
    font-size: clamp(5.5rem, 14vh, 9rem);
    z-index: 200;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

.numberText.day.number1{
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    justify-self: flex-end;
    align-self: flex-end;
    margin-right: 2%;
}

.numberText.day.number2{
    grid-column: 2 / 4;
    grid-row: 1 / 5;
    justify-self: flex-start;
    align-self: flex-end;
    margin-left: 2%;
}

.numberText.day.numberText.day.number2::before{
    position: absolute;
    content: "0";
    -webkit-text-stroke: transparent;
}

.numberDivider{
    width: 85%;
    height: 100%;
    position: absolute;
    grid-column: 1 / 4;
    grid-row: 3 / 4;
}

.leftDiv{
    width: 40%;
    height: 100%;
    position: absolute;
    border-top: 3px solid var(--soft-gold);
    left: 0%;
}

.rightDiv{
    width: 19%;
    height: 100%;
    position: absolute;
    border-top: 3px solid var(--soft-gold);
    right: 0%;
}

.dateBox > .normalText.month{
    position: absolute;
    justify-self: flex-end;
    align-self: flex-end;
    grid-column: 1 / 2;
    grid-row: 4 / 5;
    font-size: clamp(1.1rem, 2.8vh, 2rem);
    z-index: 200;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    letter-spacing: 0.2rem;
    margin-right: 6%;
}

.dateBox > .numberText.year{
    position: absolute;
    grid-column: 1 / 4;
    grid-row: 6 / 7;
    font-size: clamp(2rem, 5vh, 3rem);
    z-index: 200;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

/*STOPMOTION COMPONENTS*/

.stopMotionWrapper{
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: flex-end;
    justify-content: center;

    grid-row-start: 1; grid-row-end: 4;
    overflow: hidden;
    mix-blend-mode: multiply;
    z-index: 300;
    opacity: 1;
    mask-image: linear-gradient(180deg, black 90%, transparent 100%);

}

.frameImage{
    width: 61px;
    height: 100px;
    position: absolute;
    object-fit: contain;
    overflow: hidden;
    scale: 7;
    bottom: -5%;
    left: 46%;
    transform-origin: bottom;
}

.frameImage img{
    height: 100%;
    width: auto;
    transform-origin: top;
}

/*LOCATION COMPONENTS*/

.locationWrapper{
    width: 100%;
    height: 90%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    grid-row-start: 2; grid-row-end: 3;
    padding-top: 10%; padding-bottom: 5%;
    z-index: 500;
}

.locationBox{
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.locationInfo{
    width: 80%;
    height: 62%;
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 0.2fr 1fr 0.4fr 1fr;
}


.locationName{
    height: 100%;
    width: 100%;

    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.locationTime{
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 0.8fr 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    justify-content: center;

    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

.locationTime > .normalText{
    font-size: 1.1rem;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    grid-column-start: 2; grid-column-end: 3;
    border-left: solid 2px rgb(137, 137, 137);
    border-right: solid 2px rgb(137, 137, 137);
}

.timeDecorLine{
    width: 60%;
    height: 10%;
    display: flex;
    background-color: rgb(137, 137, 137);
}

.timeDecorLine.one{
    grid-column-start: 1; grid-column-end: 2;
    align-items: center;
    justify-self: flex-end;
}

.timeDecorLine.two{
    grid-column-start: 3; grid-column-end: 4;
    align-items: center;
    justify-self: flex-start;
}

.locationMapLink{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    grid-column: 1 / 2;
    grid-row: 5 / 6;
}

.locationMapLink a{
    text-decoration: none;
}

.locationBtn{
    width: 55%;
    height: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    border-radius: 1000px;
    background: #d5b88f;
    border: 0;
    appearance: none;
    margin-top: 2.5%;
    margin-bottom: 2.5%;
}

.locationBtn:focus{
    background-color: #fde6c6ae;
}


.locationBtn > .normalTextSlant{
    font-size: 1.4rem;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

.locationDivider{
    height: 18%;
    width: 100%;
    position: absolute;
    bottom: 0%;
    position: absolute;
    z-index: 600;
    overflow: hidden;
    filter: drop-shadow(0px 5px 5px rgb(177, 177, 177));
    
}

.locationDividerInner{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: var(--pure-white);
    clip-path: shape(
    nonzero from 0% 0%, 
    line to 100% 0%,
    line to 100% 100%,
    line to 97.5% 100%,
    line to 97.5% 55%,
    arc to 77.5% 55% of 5% ccw small, 
    line to 77.5% 55%,
    line to 77.5% 100%,
    line to 72.5% 100%,
    line to 72.5% 55%,
    arc to 52.5% 55% of 5% ccw small,
    line to 52.5% 55%,
    line to 52.5% 100%,
    line to 47.5% 100%,
    line to 47.5% 55%,
    arc to 27.5% 55% of 5% ccw small,
    line to 27.5% 55%,
    line to 27.5% 100%,
    line to 22.5% 100%,
    line to 22.5% 55%,
    arc to 2.5% 55% of 5% ccw small,
    line to 2.5% 55%,
    line to 2.5% 100%,
    line to 0% 100%,
    );
}

.locationDividerInnerBehind{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgb(222, 222, 222);
    clip-path: shape(
    nonzero from 0% 0%, 
    line to 100% 0%,
    line to 100% 100%,
    line to 95% 100%,
    line to 95% 55%,
    arc to 77.5% 55% of 5% ccw small, 
    line to 77.5% 55%,
    line to 77.5% 100%,
    line to 70% 100%,
    line to 70% 55%,
    arc to 52.5% 55% of 5% ccw small,
    line to 52.5% 55%,
    line to 52.5% 100%,
    line to 47.5% 100%,
    line to 47.5% 55%,
    arc to 30% 55% of 5% ccw small,
    line to 30% 55%,
    line to 30% 100%,
    line to 22.5% 100%,
    line to 22.5% 55%,
    arc to 5% 55% of 5% ccw small,
    line to 5% 55%,
    line to 5% 100%,
    line to 0% 100%,
    );
}

.sectionMould4{
    width: 120%;
    height: 20%;
    position: absolute;
    grid-column-start: 4; grid-column-end: 5;
    grid-row-start: 1; grid-row-end: 2;
    justify-self: center;
    transform-origin: center;
}

.fourthSection{
    width: 100svw;
    height: 85svh;
    top: 415svh;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--pure-white);
}

.fourthSection::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url(Assets/svg/backgroundTexture.svg);
    background-size: 50%;
    opacity: 0.4;    
}

.sectionMould5{
    width: 100%;
    height: 15%;
    position: absolute;
    top: 0%;
    grid-column-start: 4; grid-column-end: 5;
    grid-row-start: 1; grid-row-end: 2;
    justify-self: center;
    justify-items: center;
    align-items: center;
    transform-origin: center;
}

.sectionMould5 .dMPart1{
    height: 25%;
}

.sectionMould5 .dMPart2{
    height: 20%;
    width: 80%;
}

.sectionMould5 .dMPart3{
    height: 10%;
    width: 85%;
    z-index: 500;
    background-color: var(--soft-gold);
    box-shadow: none;
}

.decorativeWall{
    width: 75%;
    height: 85%;
    position: absolute;
    display: grid;
    justify-content: center;
    align-items: center;
    background-color: var(--soft-gold);
    border-radius: 0px 0px 300px 300px;
    filter: drop-shadow(0px 0px 10px rgb(192, 192, 192));

    --s: 15px; /* control the size*/
    --c1: #ddc098;
    --c2: #D5B88F;
  
    --_g: #0000 83%,var(--c1) 85% 99%,#0000 101%;
    background:
    radial-gradient(27% 29% at right ,var(--_g)) calc(var(--s)/ 2) var(--s),
    radial-gradient(27% 29% at left  ,var(--_g)) calc(var(--s)/-2) var(--s),
    radial-gradient(29% 27% at top   ,var(--_g)) 0 calc(var(--s)/ 2),
    radial-gradient(29% 27% at bottom,var(--_g)) 0 calc(var(--s)/-2)
    var(--c2);
    background-size: calc(2*var(--s)) calc(2*var(--s));

    grid-template-columns: 1fr;
    grid-template-rows: 0.3fr 0.5fr 0.15fr 0.9fr 0.3fr;
    justify-items: center;
}

.decorativeWall::before{
    content: "";
    width: 95%;
    height: 98%;
    position: absolute;
    border-radius: 0px 0px 300px 300px;
    border: double 5px var(--pure-white);
    border-top: none;
    top: 0%;
    grid-column-start: 1; grid-column-end: 2;
    grid-row-start: 1; grid-row-end: 6;
}

.decorativeWallInnerShadow{
    width: 100%;
    height: 100%;
    filter: drop-shadow(0px 0px 10px rgb(192, 192, 192));
    grid-column-start: 1; grid-column-end: 2;
    grid-row-start: 1; grid-row-end: 6;
}

.decorativeWallInner{
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--pure-white);

    clip-path: shape(
    nonzero from 15% 0%, 
    line to 85% 0%,
    line to 85% 90%,
    arc to 100% 100% of 70px ccw small,
    line to 100% 100%,
    line to 0% 100%,
    arc to 15% 90% of 70px ccw small,
    line to 15% 90%,
    line to 15% 0%
    );

}

.formalAttireRequired{
    width: 90%;
    height: 100%;
    position: absolute;
    display: grid;
    justify-content: center;
    align-items: center;
    justify-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 0.3fr 0.9fr 0.7fr;

    grid-column-start: 1; grid-column-end: 2;
    grid-row-start: 2; grid-row-end: 3;
}

.formalIcon{
    width: 100%;
    height: 100%;
    display: grid;
    justify-content: center;
    align-items: center;
    grid-column-start: 1; grid-column-end: 2;
    grid-row-start: 1; grid-row-end: 2;
}

.formalIcon.one{
    background-image: url(Assets/svg/FormalIcon.svg);
    background-position: center;
    background-repeat: no-repeat;
}

.formalIcon.two{
    background-image: url(Assets/svg/kidsIcon.svg);
    background-position: center;
    background-repeat: no-repeat;
}

.attireText{
    width: 100%;
    height: auto;
    position: absolute;
    grid-row-start: 3; grid-row-end: 4;
    text-wrap: nowrap;
    color: var(--pure-white);
}

.requiredTextBox{
    width: 90%;
    height: 100%;
    position: absolute;
    display: grid;
    grid-template-columns: 0.9fr 0.1fr 1fr 0.1fr 0.9fr;
    justify-content: center;
    align-items: center;
    grid-row-start: 4; grid-row-end: 5;
}

.requiredTextBox p{
    color: var(--medium-black);
    font-size: 1.2rem;
    grid-column-start: 3; grid-column-end: 4;
}

.requiredLine{
    width: 100%;
    height: 7%;
    background-color:rgb(218, 218, 218);
}
.requiredLine.one{
    grid-column-start: 1; grid-column-end: 2;
}

.requiredLine.two{
    grid-column-start: 5; grid-column-end: 6;
}

.noKidsAllowed{
    width: 90%;
    height: 100%;
    position: absolute;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 2.5fr;

    grid-column-start: 1; grid-column-end: 2;
    grid-row-start: 4; grid-row-end: 5;
}

.noKidsAllowed .attireText{
    grid-row-start: 2; grid-row-end: 3;
}

.noKidsExplanation{
    width: 100%;
    height: 100%;
    position: absolute;
    grid-row-start: 3; grid-row-end: 4;
    padding: 5%;
}

.noKidsExplanation.normalText{
    font-size: 1.1rem;
    color: var(--medium-black);
}

.fifthSection{
    width: 100svw;
    height: 130svh;
    position: absolute;
    display: grid;
    align-items: center;
    justify-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 0.15fr 0.04fr 1fr;
    top: 500svh;
    background-color: var(--pure-white);
    padding-top: 25%;
}

.fifthSection::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url(Assets/svg/backgroundTexture.min.svg);
    background-size: 50%;
    mask-image: radial-gradient(50% 50% at 30% 10%, transparent 50%, black 80%),
    radial-gradient(60% 30% at 80% -10%, transparent 50%, black 80%), 
    radial-gradient(70% 50% at 60% 50%, transparent 50%, black 80%),
    radial-gradient(50% 50% at 30% 80%, transparent 50%, black 80%),
    radial-gradient(50% 30% at 70% 100%, transparent 50%, black 80%),
    radial-gradient(20% 20% at 70% 80%, transparent 50%, black 80%),
    radial-gradient(100% 20% at 50% 100%, transparent 50%, black 80%);
    mask-composite: intersect;
    opacity: 0.4;
}

.scheduleTitleBox{
    width: 85%;
    height: 10%;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-row-start: 1; grid-row-end: 2;
}

.scheduleTitle{
    font-size: 1.6rem;
}

.scheduleSubTitle{
    color: var(--soft-gold);
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

.scheduleTimeLineBox{
    width: 100%;
    height: 100%;
    position: absolute;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-row-start: 3; grid-row-end: 4;
    padding-bottom: 10%;
    overflow: hidden;
}

.timeLineBox{
    width: 1%;
    height: 100%;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    grid-row-start: 1; grid-row-end: 2;
}

.timeLineBoxInner{
    width: 100%;
    height: 100%;
    transform-origin: top center;
    position: absolute;
    top: 0%;
    background-color: var(--soft-gold);
}

.startCircle{
    width: 300%;
    height: auto;
    aspect-ratio: 1 / 1;
    position: absolute;
    top: 0;
    background-color: var(--soft-gold);
    z-index: 200;
    border-radius: 100%;
}

.endCircle{
    width: 350%;
    height: auto;
    aspect-ratio: 1 / 1;
    position: absolute;
    bottom: 0%;
    background-color: var(--soft-gold);
    z-index: 200;
    border-radius: 100%;
}

.activityBox{
    width: 60%;
    height: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding-bottom: 10%;
}

.activityLineBox{
    width: 100%;
    height: 25%;
    display: grid;
    grid-template-columns: 0.3fr 1fr 0.3fr;
    grid-template-rows: 1fr 1fr 0.2fr 1fr 1fr;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(transparent 0%, rgb(255, 255, 255) 15%, rgb(255, 255, 255) 85%, transparent 100%);

}

.activityLineBox .h1TextNormal{
    grid-row-start: 2; grid-row-end: 3;
    grid-column-start: 2; grid-column-end: 3;

}

.activityLineBox .h2TextNormal{
    font-size: 1rem;
    color: var(--soft-gold);
    grid-row-start: 4; grid-row-end: 5;
    grid-column-start: 2; grid-column-end: 3;
    margin-top: 2%;
}

.indicator{
    color: var(--soft-gold);
}


.indicator.left{
    grid-row-start: 2; grid-row-end: 5;
    grid-column-start: 1; grid-column-end: 2;
    justify-self: flex-end;
}
.indicator.right{
    grid-row-start: 2; grid-row-end: 5;
    grid-column-start: 3; grid-column-end: 4;
    justify-self: flex-start;
}

.sixthSection{
    width: 100svw;
    height: 110svh;
    position: absolute;
    display: grid;

    grid-template-columns: 1fr;
    grid-template-rows: 1fr 0.15fr 0.8fr;
    justify-items: center;
    align-items: center;

    background-color: var(--pure-white);
    top: 630svh;
    padding-top: 15%;
    padding-bottom: 0%;
    overflow: hidden;
}

.presentBox{
    width: 115%;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(244, 244, 244);
    grid-row-start: 1; grid-row-end: 4;
    border-radius: 200px 200px 0px 0px;
}

.presentBox::before{
    content: "";
    width: 93%;
    height: 97%;
    position: absolute;
    background-color: var(--pure-white);
    background-size: 50%;
    opacity: 1;
    border-radius: 200px 200px 0px 0px;
    bottom: 0%;
}

.presentBox::after{
    content: "";
    width: 93%;
    height: 97%;
    position: absolute;
    background-image: url(Assets/svg/backgroundTexture.min.svg);
    background-size: 50%;
    opacity: 0.4;
    box-shadow: inset 0px 0px 15px black;
    border-radius: 200px 200px 0px 0px;
    bottom: 0%;
    mask-image: linear-gradient(black 20%, transparent 75%);
}

.presentText{
    height: 100%;
    width: 70%;
    display: grid;
    align-items: center;
    align-content: center;
    z-index: 400;
}

.presentText.one{
    flex-direction: column;
    grid-row-start: 2; grid-row-end: 4;
}

.presentText.two{
    grid-row-start: 6; grid-row-end: 8;
}

.presentText .normalTextCursive.one{
    font-size: 3.5rem;
    color: var(--soft-gold);
    text-wrap: nowrap;
}

.presentText .normalText.one{
    font-size: 1.5rem;
}


.presentText .normalText.two{
    font-size: 1.3rem;
}

.sectionMould6{
    width: 90%;
    height: 100%;
    position: absolute;
    top: 0%;
    grid-row-start: 2; grid-row-end: 3;
    justify-self: center;
    justify-items: center;
    align-items: center;
    transform-origin: center;
}


.sectionMould6 .dMPart1{
    height: 30%;
}

.sectionMould6 .dMPart2{
    height: 30%;
    width: 90%;
}

.sectionMould6 .dMPart3{
    height: 20%;
    width: 95%;
    z-index: 500;
    background-color: var(--soft-gold);
    box-shadow: none;
}

.presentDetails{
    width: 100%;
    height: 100%;
    position: absolute;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(7, 1fr);
    padding-top: 15%;
    filter: drop-shadow(0px 0px 15px rgb(202, 202, 202));
}

.presentPillar{
    width: 25%;
    height: 100%;
    position: absolute;
    grid-row-start: 5; grid-row-end: 8;
}

.presentPillar::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: repeating-linear-gradient(90deg, rgb(238, 238, 238) 0%, rgb(231, 231, 231) 7%, white 7%, white 14%);
    mask-image: linear-gradient(black 30%, transparent 90%);
}

.sectionMould6{
    width: 150%;
    height: 13%;
    position: absolute;
    top: 0%;
    transform-origin: center;
}

.sectionMould6 .dMPart1{
    height: 25%;
}

.sectionMould6 .dMPart2{
    height: 20%;
    width: 80%;
}

.sectionMould6 .dMPart3{
    height: 10%;
    width: 85%;
    z-index: 500;
    background-color: var(--soft-gold);
    box-shadow: none;
}

.present{
    height: 100%;
    width: auto;
    aspect-ratio: 1 / 1;
    position: absolute;
    grid-row-start: 4; grid-row-end: 5;
    background-image: url(Assets/svg/giftBox.svg);
}

.seventhSection{
    width: 100svw;
    max-width: 100svw;
    height: 75svh;
    position: absolute;
    display: grid;
    align-items: center;
    justify-items: center;
    justify-content: center;
    grid-template-columns: 1fr;
    grid-template-rows: 0.3fr 1fr 0.1fr 0.3fr 0.7fr;
    background-color: var(--pure-white);
    top: 740svh;
    overflow: hidden;

}

.seventhSection::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url(Assets/svg/backgroundTexture.min.svg);
    background-size: 50%;
    mask-image: radial-gradient(50% 50% at 30% 10%, transparent 50%, black 80%),
    radial-gradient(60% 30% at 80% -10%, transparent 50%, black 80%), 
    radial-gradient(70% 50% at 60% 50%, transparent 50%, black 80%),
    radial-gradient(50% 50% at 30% 80%, transparent 50%, black 80%),
    radial-gradient(50% 30% at 70% 100%, transparent 50%, black 80%),
    radial-gradient(20% 20% at 70% 80%, transparent 50%, black 80%),
    radial-gradient(100% 20% at 50% 100%, transparent 50%, black 80%);
    mask-composite: intersect;
    opacity: 0.4;
}

.confirmText{
    width: 80%;
    max-width: 80%;
    height: 100%;
    position: absolute;
    display: grid;
    align-items: center;
    justify-items: center;
    z-index: 500;
}

.confirmText.one{
    grid-row-start: 2; grid-row-end: 3;
}

.confirmText.two{
    grid-row-start: 4; grid-row-end: 5;
    text-wrap: nowrap;
}

.confirmText.one .normalText, .confirmText.two .normalText{
    font-size: 1.2rem;
}

.confirmText.two .locationBtn{
    height: auto;
    padding-top: 5%;
    padding-bottom: 5%;
    padding-left: 40%;
    padding-right: 40%;
    text-decoration: none;
}

.eighthSection{
    width: 100svw;
    height: 100svh;
    position: absolute;
    top: 815svh;
    background-color: var(--pure-white);
    display: grid;
    grid-template-columns: 0.15fr 0.05fr 1fr 0.05fr 0.15fr;
    grid-template-rows: 1fr 0.05fr 0.3fr;
    padding-top: 5%; padding-bottom: 5%;
}

.finalImgBackground{
    width: 100%;
    height: 100%;
    position: absolute;
    display: grid;
    align-items: self-end;
    justify-items: center;
    background-color: rgb(238, 238, 238);
    grid-column-start: 3; grid-column-end: 4;
    grid-row-start: 1; grid-row-end: 2;
    border-radius: 300px 300px 0px 0px;
}

.finalImgBackground::before{
    content: "";
    width: 86%;
    height: 96%;
    position: absolute;
    background-color: var(--pure-white);
    border-radius: 300px 300px 0px 0px;
}

.finalImgBackground::after{
    content: "";
    width: 86%;
    height: 96%;
    position: absolute;
    opacity: 0.3;
    background-image: url(Assets/svg/backgroundTexture.min.svg);
    border-radius: 300px 300px 0px 0px;
    box-shadow: inset 0px 0px 15px black;
}

.sectionMould7{
    width: 100%;
    height: 100%;
    top: 0%;
    grid-column-start: 2; grid-column-end: 5;
    grid-row-start: 2; grid-row-end: 3;
    justify-self: center;
    justify-items: center;
    align-items: center;
    transform-origin: center;
}


.sectionMould7 .dMPart1{
    height: 30%;
}

.sectionMould7 .dMPart2{
    height: 30%;
    width: 90%;
}

.sectionMould7 .dMPart3{
    height: 20%;
    width: 95%;
    z-index: 500;
    background-color: var(--soft-gold);
    box-shadow: none;
}

.finalText{
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-column-start: 2; grid-column-end: 5;
    grid-row-start: 3; grid-row-end: 4;
}

.finalText .normalTextCursive{
    font-size: 2.5rem;
}

.partnerImgtwo{
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url(Assets/img/image3.png);
    background-size: 100%;    
    background-repeat: no-repeat;
    background-position: 0% 100%;
    z-index: 200;
    overflow: hidden;
}

.flowerBoxWrapper{
    width: 100svw;
    height: 800svh;
    position: absolute;
    z-index: 6000;
    pointer-events: none;
    transform: translateZ(0); 
    will-change: transform;
    overflow: hidden;
}

.flowerBox{
    position: absolute;
}

.flowerBox svg{
    width: 100%;
    height: 100%;
}

.flowerBox.one{
    width: 60%;
    height: auto;
    right: -10%; top: 0.5%;
    transform: scaleX(-1) rotate(10deg);
    transform-box: border-box;
}

.flowerBox.two{
    width: 90%;
    height: auto;
    aspect-ratio: 1 / 0.5;
    right: -18%; top: 7.5%;
    transform: scale(-1) rotate(-23deg);
}

.flowerBox.three{
    width: 105%;
    height: auto;
    aspect-ratio: 1 / 0.5;
    left: -6%; top: 22%;
    transform: scale(1) rotate(0deg);
}

.flowerBox.four{
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 0.8;
    right: -10%; top: 35%;
    transform: scale(-1.1) rotate(-10deg);
}

.flowerBox.five{
    width: 60%;
    height: auto;
    aspect-ratio: 1 / 0.4;
    right: 0%; top: 48%;
    transform: scale(-1.3) rotate(10deg);
}

.flowerBox.six{
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 0.6;
    left: -8%; top: 65%;
    transform: scale(1) rotate(0deg);
}

.flowerBox.seven{
    width: 60%;
    height: auto;
    aspect-ratio: 1 / 0.5;
    right: -10%; top: 77.5%;
    transform: scale(1) rotate(-50deg);
}

.flowerBox.eight{
    width: 90%;
    height: auto;
    aspect-ratio: 1 / 0.7;
    left: -10%; top: 86.5%;
    transform: scaleX(1) rotate(-10deg);
}


@media screen and (max-height: 670px) {
    
    .partnerImg::before{
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        background-image: url(Assets/img/image2.png);
        background-size: contain;    
        background-repeat: no-repeat;
        background-position: -10% 100%;
        left: -10%;
        bottom: -16%;
    }

    .partnerImgtwo{
        width: 100%;
        height: 100%;
        position: absolute;
        background-image: url(Assets/img/image3.png);
        background-size: auto 85%;    
        background-repeat: no-repeat;
        background-position: center 100%;
        z-index: 200;
        overflow: hidden;
    }

    .flowerBox.two{
        width: 90%;
        height: auto;
        aspect-ratio: 1 / 0.5;
        right: -22%; top: 7.5%;
        transform: scale(-0.9) rotate(-23deg);
    }

    .locationInfo{
        width: 80%;
        height: 70%;
        display: grid;
        align-items: center;
        justify-content: center;
        grid-template-columns: 1fr;
        grid-template-rows: 2fr 0.2fr 1fr 0.4fr 1fr;
    }

    .flowerBox.four{
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 0.8;
        right: -10%; top: 34%;
        transform: scale(-1.1) rotate(-10deg);
    }
}