@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

*{
    font-family: 'Poppins', sans-serif;
    margin: 0 0;
    /* position: relative; */
}

body {
    background-color: rgba(110, 110, 110, 0.315);
    background-image: url("Images/house.jpg");
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
    overflow-y: scroll;
    overflow-x: hidden;
}

.navbar {
    /* position: static; */
    height: 100px;
    /* background: linear-gradient(to right, #272727, #353535); */
    /* background: linear-gradient(90deg, rgb(61, 61, 61) 21%, rgb(32, 32, 32) 100%); */
}

.ul {
    list-style: none; /* Remove the bullet points from the list */
    margin: 0; /* Remove any default margin from the list */
    padding: 0; /* Remove any default padding from the list */
    display: flex; /* Use flexbox layout */
    justify-content: center; /* Center the content horizontally */
    align-items: center; /* Center the content vertically */
    height: 60px; /* Set the height of the nav bar */
}

a {
    color: white; /* Set the color of the link */
    text-decoration: none; /* Remove the underline from the link */
    text-align: center; /* Center the text horizontally */
    line-height: 100px; /* Center the text vertically */
    padding: 0 0px;
}

.center-redirect, .left-redirect, .right-redirect {
    white-space: nowrap;
    font-size: 25px;
    font-weight: 400;
    padding: 0 15px;
    height: 100%;
    width: 33.3333vw;
}

.center-redirect:hover, .left-redirect:hover, .right-redirect:hover {
    color: rgb(231, 238, 255)
}

.center-redirect {
    font-size: 50px;
}
.left-redirect, .right-redirect {
    line-height: 115px;
}


.sub1 {
    width: 100vw;
    transform: translateY(82vh);
    height: 300px;
    background-color: white;
}

.block1 {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.box {
    padding: 50px;
    display: flex;
    justify-content: center;
}

.block1-header {
    font-size: 50px;
    transform: translateY(50%);
}
.block1-paragraph {
    text-align: center;
    width: 500px;
    transform: translateY(45%);
    /* font-size: 20px; */
}

.sub2 {
    width: 100vw;
    transform: translateY(82vh);
    height: 300px;
    background-color: rgb(248, 248, 248);
}

.block2-header {
    font-size: 50px;
    width: 100vw;
    text-align: center;
    line-height: 300px;
}

.block2-text {
    font-size: 50px;
    width: 100vw;
    text-align: center;
    line-height: 300px;
}

.sub3 {
    background-color: white;
    width: 100vw;
    transform: translateY(82vh);
    height: 750px;
    display: flex;
    flex-direction: column;
    justify-content: center;

}

.block3-header {
    font-size: 50px;
    width: 100vw;
    text-align: center;
    /* line-height: 250px; */
    transform: translateY(0px) translateX(-20px);
}

.block3-list {
    font-size: 20px;
    transform: translateY(25px) translateX(-40px);
    width: 100vw;
    text-align: center;
    line-height: 40px;
}

.sub4 {
    background-color: rgb(248, 248, 248);
    width: 100vw;
    transform: translateY(82vh);
    height: 300px;
}

.block4-header {
    transform: translateY(75px);
    font-size: 50px;
    width: 100vw;
    text-align: center;
}
.block4-list {
    width: 100vw;
    text-align: center;
}

.sub5 {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    width: 100vw;
    transform: translateY(82vh);
    height: 250px;
}

.block5-header {
    transform: translateY(25px);
    font-size: 35px;
    width: 100vw;
    text-align: center;
}

.contact-button {
    cursor: pointer;
    width: 250px;
    height: 85px;
    border-radius: 15px;
    background-color: rgb(31, 120, 253);
    color: white;
    border: none;
    font-size: 25px;
    font-weight: bold;
    box-shadow: 0 0 4px 0 black;
    transition: 0.1s ease-in;
    /* transform: translateY(75px) translateX(850px); */
}

.contact-button:hover {
    box-shadow: 0 0 8px 0 black;
}

.block8-header {
    transform: translateX(50px);
    text-align: center;
    font-size: 20px;
}

.sub6 {
    width: 100vw;
    transform: translateY(82vh);
    height: 300px;
    background-color: rgb(248, 248, 248);
}

.sub7 {
    background-color: white;
    width: 100vw;
    transform: translateY(82vh);
    height: 550px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.block7-list {
    font-size: 20px;
    /* transform: translateY(-50px); */
    width: 65vw;
    text-align: center;
    line-height: 40px;
}

.block7-header { 
    font-size: 50px;
    width: 100vw;
    text-align: center;
    transform: translateY(-50px);
    /* line-height: 250px; */
}

.star-align {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.sub8 {
    width: 100vw;
    transform: translateY(82vh);
    height: 100px;
    background-color: white;
    text-align: center;
    display: flex;
    justify-content: center;
}

.block8-header {
    font-size: 15px;
}


.hiddeno {
    opacity: 0;
    transition: all 1.5s;
}

.showo {
    opacity: 1;
}

.hiddens {
    opacity: 0;
    filter: blur(2px);
    transform: translateX(-100%) translateY(50px);
    transition: all 1s;
}

.shows {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0) translateY(50px);
}

.hiddenlist {
    opacity: 0;
    filter: blur(2px);
    transform: translateX(-100%) translateY(-50px);
    transition: all 1s;
}

.showlist {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0) translateY(-50px);
}

/* .c1 {
    transition-delay: 100ms;
}

.c2 {
    transition-delay: 150ms;
}

.c3 {
    transition-delay: 200ms;
}

.c4 {
    transition-delay: 250ms;
}

.c5 {
    transition-delay: 300ms;
}

.c6 {
    transition-delay: 450ms;
}

.c7 {
    transition-delay: 500ms;
}

.c8 {
    transition-delay: 550ms;
}

.c9 {
    transition-delay: 600ms;
}

.c10 {
    transition-delay: 650ms;
}

.c11 {
    transition-delay: 700ms;
}

.c12 {
    transition-delay: 750ms;
}

.c13 {
    transition-delay: 800ms;
}

.c14 {
    transition-delay: 850ms;
} */



.subar {
    display: none;
}

/* a { color: white; text-decoration: none; } */

.arrow {
  color: white;
  text-align: center;
  font-size: 50px;
  transform: translateY(78vh);
}
.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(79vh);
  }
  40% {
    transform: translateY(77vh);
  }
  60% {
    transform: translateY(77.5vh);
  }
}

@media screen and (max-width: 500px) {
    .arrow {
        color: white;
        text-align: center;
        font-size: 65px;
        transform: translateY(63vh);
      }
      .bounce {
        -moz-animation: bounce 2s infinite;
        -webkit-animation: bounce 2s infinite;
        animation: bounce 2s infinite;
      }
      
      @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
          transform: translateY(64vh);
        }
        40% {
          transform: translateY(62vh);
        }
        60% {
          transform: translateY(62.5vh);
        }
      }
    body {
        background-color: rgba(110, 110, 110, 0.315);
        background-image: url("Images/wp6701058.png");
        /* background-size: 100vw 100vh; COMPLETE AND FUNCTIONING */
        background-repeat: no-repeat;
        overflow-y: auto; /* COMPLETE AND FUNCTIONING */ 
        /* overflow-x: hidden; */
        max-width: 100%;
        height: 100vh;
    }

    html {
        /* transform: translate3d(0,0,0); */
        overflow-x: hidden;
        height: 100vh;
    }

    .right-redirect, .left-redirect {
        display: none;
    }

    .center-redirect {
        white-space: nowrap;
        font-size: 40px;
        font-weight: 500;
        padding: 0 15px;
        height: 100%;
        width: 100vw;
        transform: translateY(40px);
    }

    .subar {
        display: flex;
        flex-direction: row;
        width: 100vw;
        /* transform: translateY(110vh); */
        height: 10px;
        background-color: none;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        transform: translateY(25px);
        font-weight: bold;
    }

    .gallery-redirect, .contact-redirect {
        height: 50px;
        color: white;
        font-size: 25px;
        /* background-color: rgb(255, 255, 255); */
    }

    .divider {
        color: white;
        font-size: 25px;
    }

    .sub1 {
        width: 100vw;
        transform: translateY(70vh);
        height: 300px;
        background-color: white;
    }
    
    .block1 {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    
    .box {
        /* width: 50%; */
        
        padding: 50px;
        display: flex;
        justify-content: center;
    }
    
    .block1-header {
        font-size: 50px;
        transform: translateY(10%) translateX(30%);
    }
    .block1-paragraph {
        text-align: center;
        width: 500px;
        transform: translateY(45%);
        display: none;
        /* font-size: 20px; */
    }
    
    .sub2 {
        width: 100vw;
        transform: translateY(70vh);
        height: 300px;
        background-color: rgb(248, 248, 248);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .check {
        display: none;
    }
    
    .block2-header {
        scale: 120%;
        line-height: 65px;
        transform: translateY(0px);
        font-size: 30px;
        width: 300px;
        text-align: center;
        overflow-wrap: break-word;
    }
    
    .sub3 {
        background-color: white;
        width: 100vw;
        transform: translateY(70vh);
        height: 800px;
    }
    
    .block3-header {
        font-size: 50px;
        width: 100vw;
        text-align: center;
        /* line-height: 250px; */
        transform: translateY(0px)
    }
    
    .block3-list {
        font-size: 20px;
        transform: translateY(25px) translateX(-45px);
        width: 100vw;
        text-align: center;
        line-height: 40px;
    }
    
    .sub4 {
        background-color: rgb(248, 248, 248);
        width: 100vw;
        transform: translateY(70vh);
        height: 300px;
    }
    
    .block4-header {
        scale: 75%;
        transform: translateY(60px);
        font-size: 50px;
        width: 100vw;
        text-align: center;
    }
    .block4-list {
        scale: 75%;
        width: 100vw;
        text-align: center;
    }
    
    .sub5 {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: white;
        width: 100vw;
        transform: translateY(70vh);
        height: 250px;
        flex-direction: column;
    }

    .block8-header {
        margin-top: 25px;
        transform: translateX(0px);
        text-align: center;
        font-size: 100px;
    }
    
    .block5-header {
        transform: translateY(25px);
        font-size: 35px;
        width: 100vw;
        text-align: center;
    }
    
    .contact-button {
        cursor: pointer;
        width: 250px;
        height: 85px;
        border-radius: 15px;
        background-color: rgb(31, 120, 253);
        color: white;
        border: none;
        font-size: 25px;
        font-weight: bold;
        box-shadow: 0 0 4px 0 black;
        transition: 0.1s ease-in;
        /* transform: translateY(75px) translateX(850px); */
    }
    
    .contact-button:hover {
        box-shadow: 0 0 8px 0 black;
    }
    
    .sub6 {
        /* display: none; */
        width: 100vw;
        transform: translateY(70vh);
        height: 300px;
        background-color: rgb(248, 248, 248);
        text-align: center;
    }

    .block6-header {
        font-size: 50px;
        transform: translateY(10%) translateX(18%);
    }
    
    .sub7 {
        background-color: white;
        width: 100vw;
        transform: translateY(70vh);
        height: 844px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    
    .block7-list {
        font-size: 17.5px;
        /* transform: translateY(175px); */
        width: 80vw;
        text-align: center;
        line-height: 30px;
    }
    
    .block7-header { 
        font-size: 50px;
        width: 100vw;
        text-align: center;
        transform: translateY(-40px);
        /* line-height: 250px; */
    }
    
    .star-align {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    /* .sub8 {
        width: 100vw;
        transform: translateY(91vh);
        height: 200px;
        background-color: white;
        text-align: center;
        display: flex;
        justify-content: center;
    } */

    /* .c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12, .c13, .c14 {
        transition-delay: 0s;
    } */

}