@font-face {
    font-family: 'YourFontName';  /* Replace with your desired font name */
    src: url('../fonts/your-font-file.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

body{
    margin: 0;
    height: 100vh;
    width: 100vw;
    perspective: 100vh;
    /*hide content*/
    position: fixed; /* Prevent body scroll on mobile */
    overflow: hidden; /* Prevent body scroll */
    touch-action: none; /* Prevent default touch actions */
}

.scroll-container {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    overflow-y: scroll;
    pointer-events: auto; /* Changed from none to allow touch events */
    opacity: 0; /*hide any content in scroll container*/
    z-index: -1000;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    touch-action: pan-y; /* Allow vertical scrolling */
}

.scroll-content {
    position: relative;
    width: 100%;
    height: 3000vh;  /* This creates the scrollable area */
    pointer-events: auto;
    touch-action: pan-y; /* Allow vertical scrolling */
}



section {
    height: 100vh;
    perspective: inherit;
}



div {
    position: absolute;
    display: flex;
    perspective: inherit;

}

/* Initial cover image that will split */



.image-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; 
    touch-action: none; /* Prevent touch events on images */
    
    /*position: fixed;
    top: 0;
    left: 0;

    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    */
}

.cover-left, .cover-right {
    background-size: absolute;
    height: 100vh;
    width: 50vw;
    background-size:contain;
    background-repeat: no-repeat;
    top: 0;
    pointer-events: none;
    z-index: 0;
}

.cover-left {
    right: 50%;
    background-image: url("../images/front-gate-crop-left.webp");
    background-position: right center;

}

.cover-right {
    left: 50%;
    background-image: url("../images/front-gate-crop-right.webp");
    background-position: left center;

}

@media (max-width: 850px) {
    .cover-left, .cover-right {
        height: 100vh;
        background-size: cover;
        min-width: 300px;
        overflow-x: hidden;
        overflow-y: hidden;
        touch-action: none;
            }
    
    /* Add specific mobile styles for other tiers */
    [class*="tier"] {
        touch-action: none;
        pointer-events: none;
    }

    .tier10-left, .tier10-right, .tier-end-center{
        height: 100vh;
        background-size: cover;
        min-width: 600px;
        overflow-x: hidden;
        overflow-y: hidden;
        touch-action: none;
    }
    .tier-end-center{
        min-width: 250px;
    }

}

.tier1-left, .tier1-right {
    background-size: absolute;
    height: 100vh;
    width: 100vw;
    background-size:contain;
    background-repeat: no-repeat;
    top: 0;
    pointer-events: none;
    z-index: -1;
    transform: translateZ(-50px);
}

.tier1-left {
    right: 26%;
    background-image: url("../images/left tree.webp");
    background-position: right center;
}

.tier1-right{
    left: 26%;
    background-image: url("../images/right-tree.webp");
    background-position: left center;
}


.tier2-left, .tier2-right {
    background-size: absolute;
    height: 100vh;
    width: 100vw;
    background-size:contain;
    background-repeat: no-repeat;
    top: 0;
    pointer-events: none;
    z-index: -2;
    transform: translateZ(-80px);
}

.tier2-left {
    right: 20%;
    background-image: url("../images/left tree.webp");
    background-position: right center;
}

.tier2-right{
    left: 20%;
    background-image: url("../images/right-tree.webp");
    background-position: left center;

}

.tier3-left, .tier3-right {
    background-size: absolute;
    height: 100vh;
    width: 100vw;
    background-size:contain;
    background-repeat: no-repeat;
    top: 0;
    pointer-events: none;
    z-index: -3;
    transform: translateZ(-110px);
}

.tier3-left {
    right: 15%;
    background-image: url("../images/left tree.webp");
    background-position: right center;
}

.tier3-right{
    left: 15%;
    background-image: url("../images/right-tree.webp");
    background-position: left center;

}

.tier4-left, .tier4-right {
    background-size: absolute;
    height: 100vh;
    width: 100vw;
    background-size:contain;
    background-repeat: no-repeat;
    top: 0;
    pointer-events: none;
    z-index: -4;
    transform: translateZ(-250px);
}

.tier4-left {
    right: 50%;
    background-image: url("../images/single-pillar.webp");
    background-position: right center;
}

.tier4-right{
    left: 50%;
    background-image: url("../images/single-pillar.webp");
    background-position: left center;

}

.tier5-left, .tier5-right {
    background-size: absolute;
    height: 100vh;
    width: 100vw;
    background-size:contain;
    background-repeat: no-repeat;
    top: 0;
    pointer-events: none;
    z-index: -5;
    transform: translateZ(-350px);
}

.tier5-left {
    right: 50%;
    background-image: url("../images/single-pillar.webp");
    background-position: right center;
}

.tier5-right{
    left: 50%;
    background-image: url("../images/single-pillar.webp");
    background-position: left center;

}


.tier6-left, .tier6-right {
    background-size: absolute;
    height: 100vh;
    width: 100vw;
    background-size:contain;
    background-repeat: no-repeat;
    top: 0;
    pointer-events: none;
    z-index: -6;
    transform: translateZ(-450px);
}

.tier6-left {
    right: 50%;
    background-image: url("../images/single-pillar.webp");
    background-position: right center;
}

.tier6-right{
    left: 50%;
    background-image: url("../images/single-pillar.webp");
    background-position: left center;
}

.tier7-left, .tier7-right {
    background-size: absolute;
    height: 100vh;
    width: 100vw;
    background-size:contain;
    background-repeat: no-repeat;
    top: 0;
    pointer-events: none;
    z-index: -7;
    transform: translateZ(-550px);
}

.tier7-left {
    right: 50%;
    background-image: url("../images/single-pillar.webp");
    background-position: right center;
}

.tier7-right{
    left: 50%;
    background-image: url("../images/single-pillar.webp");
    background-position: left center;
}


.tier8-left, .tier8-right {
    background-size: absolute;
    height: 100vh; 
    width: 70vw;
    min-width: 800px;  /* Reduced from 1000px */
    background-size: contain;
    background-repeat: no-repeat;
    bottom: -15vh; 
    pointer-events: none;
    z-index: -8;
    transform: translateZ(-700px);
}

.tier8-left {
    right: 35%;
    background-image: url("../images/olivia-bush-left.webp");
    background-position: right bottom;
}

.tier8-right{
    left: 35%;
    background-image: url("../images/olivia-bush-right.webp");
    background-position: left bottom;
}

.tier9-left, .tier9-right {
    background-size: absolute;
    height: 100vh;
    width: 40vw;
    min-width: 600px;
    background-size:contain;
    background-repeat: no-repeat;
    bottom: -5vh;
    pointer-events: none;
    z-index: -9;
    transform: translateZ(-900px);
}

.tier9-left {
    right: 50%;

    background-image: url("../images/fountain-sketch-cropped.webp");
    background-position: right bottom;
}

.tier9-right{
    left: 42%;
    background-image: url("../images/fountain-sketch-cropped.webp");
    background-position: left bottom;
}

.tier10-left, .tier10-right {
    background-size: absolute;
    height: 95vh;
    width: 50vw;
    background-size:contain;
    background-repeat: no-repeat;
    top: 0;
    pointer-events: none;
    z-index: -10;
    transform: translateZ(-3000px);
}



.tier10-left {
    right: 50%;
    background-image: url("../images/olivia-circle-left.webp");
    background-position: right center;
}

.tier10-right{
    left: 50%;
    background-image: url("../images/olivia-circle-right.webp");
    background-position: left center;
}



.tier-end-center{
    background-size: absolute;
    height: 33vh;
    width: 100vw;
    background-size:contain;
    background-repeat: no-repeat;
    top: 60%;
    pointer-events: none;
    z-index: -11;
    transform: translateZ(-4000px);
}



.tier-end-center{
    position: absolute;
    justify-content: center;
    pointer-events: none;
    align-items: center;
    background-image: url("../images/lovers-sillouette.webp");
    background-position: center center;
}

.button-container {
    position: absolute;
    justify-content: center;
    left: 50%;
    right: 50%;
    top: 70%;
    z-index: -8;
    pointer-events: auto;
    transform: translateZ(-4000px);

}

button {
    font-size: 36px;
    background: none;
    border: none;
    color: white;
    font-family: 'YourFontName', sans-serif;  /* Replace YourFontName with your actual font name */
}

button:hover{
    background: none;
    border: none;
    color: white;
    background-color: blue;
    scale: 1.1
}


ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3,auto);
    justify-content: center;
    align-items: middle;
    place-items: center;
    height: 100vh;
    perspective: inherit;
    
}

 
span {

    width: 110px;
    height: 110px;
    position: absolute;
    bottom: 0;
    left:0;
    background-color: black;
    border-radius: 50%;
}