* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    }
    body {
        margin: 0;
        width: 100%;
        height: 100%;
        }
    .right-dropdown{
        padding-right: 3%;
    }
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: white;
        right: 0px;
        top: 0;
        width: 100%;
    }
    li {
        float: right;
        display: inline;
        margin-right: 1vw;
        margin-top: auto;
        margin-bottom: auto;
        margin: 0;
        top: 50%;
        border-left: 1px;
    }
    
    
    li.nav-bar-logo{
    float: left;
    margin: 10px;
    }
    li a, .dropbtn {
        display: inline-block;
        color: black;
        text-align: center;
        margin: 22px 10px;
        text-decoration: none;
        font-size: 20px;
        border-left: #151414 1px;
    }
    li a:hover, .dropdown:hover .dropbtn {
    color: red;
    }
    li.dropdown {
        display: inline-block;
        border-radius: 20px;
    
    }
    hr{
      color: #151414;
      background-color: #151414;
      width: 90%;
      margin: auto auto;
      height: 1px;
    }
    .dropdown-content {
        display: none;
        position: absolute;
        background-color:#acacac;
        min-width: 80px;
        z-index: 1000;
        border-radius: 20px;
    }
    .dropdown-content a {
        background-color: #acacac;
        color: black;
        /* padding: 4px; */
        text-decoration: none;
        display: block;
        z-index: 1000;
        /* text-align: left; */
    }
    .dropdown-content a:hover {
      
    }
    .dropdown:hover .dropdown-content {
        display: block;
        position: relative;
    }
    
    .VL{
      rotate: 90;
    }

    /*  */
    @import url("https://fonts.googleapis.com/css?family=Josefin+Sans:400,700");
    @import url("https://fonts.googleapis.com/css?family=Oswald");
    .site {
        display: grid;
        grid-template-rows: 1fr 5fr;
        grid-template-columns: 5rem 2fr 1fr 0rem;
        box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.1);
        width: 90vw;
        height: 122vh;
        background-color: white;
        font-family: "Josefin Sans", sans-serif;
    }
    .site * {
    transition: all 0.5s ease;
    }

    .site {
    --total: 4;
    --percentage: calc( var(--scene)/var(--total));
    }

    input[value="1"]:checked ~ .site {
    --scene: 1;
    }

    input[value="2"]:checked ~ .site {
    --scene: 2;
    }

    input[value="3"]:checked ~ .site {
    --scene: 3;
    }

    input[value="4"]:checked ~ .site {
    --scene: 4;
    }

    input[name=scene] {
    display: none;
    }

    input[value="1"]:checked ~ * label[data-scene="1"],
    input[value="2"]:checked ~ * label[data-scene="2"],
    input[value="3"]:checked ~ * label[data-scene="3"],
    input[value="4"]:checked ~ * label[data-scene="4"] {
    display: none;
    }

    input[value="1"]:checked ~ * [data-scene]:not([data-scene="1"]) .heading,
    input[value="1"]:checked ~ * [data-scene]:not([data-scene="1"]) .paragraph,
    input[value="2"]:checked ~ * [data-scene]:not([data-scene="2"]) .heading,
    input[value="2"]:checked ~ * [data-scene]:not([data-scene="2"]) .paragraph,
    input[value="3"]:checked ~ * [data-scene]:not([data-scene="3"]) .heading,
    input[value="3"]:checked ~ * [data-scene]:not([data-scene="3"]) .paragraph,
    input[value="4"]:checked ~ * [data-scene]:not([data-scene="4"]) .heading,
    input[value="4"]:checked ~ * [data-scene]:not([data-scene="4"]) .paragraph {
    transform: translateX(-25%);
    opacity: 0;
    }

    input[value="1"]:checked ~ * [data-scene="1"] + [data-scene],
    input[value="2"]:checked ~ * [data-scene="2"] + [data-scene],
    input[value="3"]:checked ~ * [data-scene="3"] + [data-scene],
    input[value="4"]:checked ~ * [data-scene="4"] + [data-scene] {
    tranform: translateX(25%);
    }

    .layer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    }

    .landscape {
    display: flex;
    align-items: center;
    grid-row: 1/2;
    grid-column: 1/-1;
    background-color: rgba(88, 83, 83, 0.299);
    background-image: url(https://picsum.photos/4000/2660?image=992);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 20%;
    overflow: hidden;
    }

    .landscape-text {
    display: inline-block;
    font-size: 20vh;
    font-weight: bold;
    background: inherit;
    background-image: url("https://picsum.photos/5615/2907?image=974");
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 160% auto;
    background-position: calc(80% + ( -70% * var(--percentage))) 0;
    color: transparent;
    transform: translateX(calc( 40% + (-100% * var(--percentage)) ));
    }

    .left-side {
    grid-row: 1/2;
    grid-column: 2/3;
    font-family: "Oswald";
    align-self: end;
    }

    .page-numbers {
    color: white;
    overflow: hidden;
    }
    .page-numbers:after {
    content: "/" attr(data-total);
    font-size: 1rem;
    position: absolute;
    top: 0;
    left: 4rem;
    }

    .page-number {
    font-size: 4rem;
    line-height: 4.2rem;
    }
    .page-number--tens {
    align-self: flex-end;
    }
    .page-number--ones {
    position: absolute;
    top: 0;
    left: 0.5em;
    transform: translateY(calc((-100% * (var(--percentage) - 1/var(--total) ) ) ));
    }

    .left-content {
    grid-row: 2/6;
    grid-column: 1/3;
    color: black;
    overflow: auto;
    }
    .left-content > .layer {
    /* padding: 1px; */
    }
    

    .right-content {
    color: black;
    grid-row: 2/6;
    grid-column: 3/-1;
    overflow: auto;
    }
    .right-content > .layer {
    padding: 30px;
    }

    .slide-nav {
    position: absolute;
    right: 0;
    bottom: 0;
    overflow: hidden;
    }

    .nav-button-container {
    display: flex;
    position: absolute;
    top: 0;
    transition: none;
    transform: translateX(calc(100% + (-1 * 5rem * (var(--scene) + 1))));
    opacity: 0;
    }

    .button-container {
    display: flex;
    outline: none;
    right: 0;
    }

    .nav-button {
    display: inline-block;
    padding: 0.5em;
    width: 5rem;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    cursor: pointer;
    font-family: inherit;
    height: 2rem;
    border: none;
    padding: 0.5rem;
    outline: none;
    }

    .hero {
    color: white;
    grid-row: 1/2;
    grid-column: 3/-1;
    }
    .hero > .layer {
    display: flex;
    height: 40%;
    }

    *,
    *:before,
    *:after {
    box-sizing: border-box;
    position: relative;
    }

    .register-form {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 145vh;
    
    }

    .layer .calender-widget {
        display: none;
    }
    
    /* Show Calendly widget in the third scene */
    input[value="3"]:checked ~ .site .layer[data-scene="3"] .calender-widget {
        display: block;
    }
    .calender-widget {
        z-index: 1000; /* or a higher value if necessary */
        pointer-events: auto;
        position: absolute;
        width: 90%;
    }
    .layer .form-widget {
        display: none;
    }
    input[value="2"]:checked ~ .site .layer[data-scene="2"] .form-widget {
        display: block;
    }
    .form-widget {
        z-index: 1000; /* or a higher value if necessary */
        pointer-events: auto;
        position: absolute;
        width: 100%;
    }
    .layer .form-widget-1 {
        display: none;
    }
    input[value="4"]:checked ~ .site .layer[data-scene="4"] .form-widget-1 {
        display: block;
    }
    .form-widget-1 {
        z-index: 1000; /* or a higher value if necessary */
        pointer-events: auto;
        position: absolute;
        width: 100%;
    }