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


html {
    overflow-x: hidden;
    
    background-color: rgba(195, 194, 194, 0.8);
    font-family: Georgia, 'Times New Roman', Times, serif;

} 



header {
    position: fixed;
    display: flex;
    align-items:center;
    justify-content: space-between;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    border-bottom: 2px solid rgba(0, 0, 0, 0.3);
    background: white;
}

header a {
    font-size: 2.5vw;
    margin-left: 1.5rem;
    color: black;
    text-decoration: none;
}

header .title a {
    font-size: 3.5vw;
    margin-left: 0;
    color: black;

}

header .navbar a:hover {
    color: rgb(12, 109, 25);
    text-decoration: underline;
    cursor: pointer;
}




@media screen and (min-width: 1050px) {
    header .title a {
        font-size: 36px;
    }
    header .navbar a {
        font-size: 25px;
    }
}




.home .content{

    display: flex;
    flex-wrap: wrap;
    margin-top: 100px;
    width: 100vw;
    max-height: 100%;
    position: relative;
    margin-left: 1vw;
   
}



.home .content .img {
    width: 100%;
    height: 100%;
   border: 6px solid rgba(196, 193, 193, 0.8);

}
.home .content .phone-icon {
    width: 2vw;
    height: 2vw;
    transform: translate(0%, 14%);
}


.home .content .button{
    position: absolute;
    left: 50%;
    bottom: 27%;
    transform: translate(-50%);
    border: 4px solid rgb(162, 172, 166);
    padding: 1vw;
    font-family: arial;
    border-radius: 5%;
    background-color: rgb(238, 253, 242);
    font-size: 2vw;
    cursor: pointer;
}

@media (min-width: 850px) {
    .home .content {
        height: 79vh;
    }
    .home .content .button {
        bottom: 14%;
    }
}



.home .content .button::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 0%;
    height: 100%;
    background: rgb(78, 153, 78);
    
    transition: 0.2s linear;
    z-index: -1;
}
.home .content .button:hover::before {
    width: 100%;
    left: 0;
}
.home .content .button:hover {
    color: white;
    border: 6px solid rgb(3, 73, 3);
    border-radius: 0%;
    text-decoration: underline;
}

.home .logo {
    visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}
.home .logo-picture {
    margin-bottom: 0.7vw;
}
.home .logo p {
    font-size: 1.75vw;
    margin: 0.2vw 0;;
}


.logo {
    justify-content: center;
    display: flex;
}
.logo .logo-picture {
    width: 30%;
    max-width: 300px;
    min-width: 40px;
}






@media (min-width: 1050px) {
    .home .content {
        margin-top: 100px;
        align-items: center;
        background-color: white;
        background-image: url('images/white_fractal_background.jpg');
    }

    .home .content .img {
        height: 45vw;
        width: 60%;
        position: absolute;
        max-height: 75vh;
        margin-left: 2vw;
    }

    .home .content {
        height: 80vh;
    }

    .home .content .call-button {
        visibility: hidden;
    }

    .home .logo {
        position: absolute;
        visibility: visible;
        margin-left: 57.5%;
        height: 17vw;
        max-height: 210px;
        width: 46vw;
        top: 25%;
    }

}





@media (min-width: 1275px) {
    .home .content {
        margin-top: 100px;
        margin-left: 0.5vw;
    }
    .home .logo {
        top: 24%;
    }

    .home .content .img {
        left: 2vw;
        margin-top: 3vw;
        margin-bottom: 3vw;
        width: 58%;
        max-height: 70vh;
    }
}

@media (min-width: 1400px) {
    .home .content {
        margin-top: 103px;
    
    }
    .home .content .img {
        left: 3vw;
        width: 58%;
        max-width: 800px;

    }

    .home .logo {
        top: 23%;
        margin-left: 56%;
    }
}








.about { 
    margin-top: 5rem;
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-color: white;
}

.about h1 {
    margin: auto;
    margin-top: 5vh;
}


.about .content {
    background: rgb(211, 210, 210);
    border: 3px solid rgba(8, 208, 243, 0.15);
    margin: auto;
    width: 80vw;
    max-width: 900px;
    padding: 2.5%;
    font-size: 120%;
    margin-bottom: 10vh;
    margin-top: 2vh;

    
    
}
.about .content .right {
    margin-top: 5%;
    text-indent: 7%;
}
.about .content .left {
    text-indent: 7%;
}



@media (min-width: 1050px) {
    .about {
        margin-top: 6rem;
    }
}

@media (min-width: 1250px) {
    .about {
        margin-top: 9rem;
        background: url('images/about-background.png') bottom left;
        background-repeat: repeat-x;
        background-color: white;

    }


}












.gallery {
    position: relative;
    height: 215vw;
}
h2 {
    margin-top: 5%;
    font-size: 4vw;
    margin-left: 42.5%;
    
}




.gallery .houses {
    font-size: 3vw;
}
.gallery .house-imgs {
    height: 40vw;
    width: 60%;
    margin: auto;
    position: relative;
    top: 4%;
    overflow: hidden;
    user-select: none;
}
.house-imgs .img1 {
    display: none;
    width: 100%;
    height: 100%;
    border: 4px solid rgb(42, 41, 41);

}

.gallery .right_arrow {
    right: -15px;
    position: absolute;
    top: 42%;
    height: 7vh;
    user-select: none;
}
.gallery .left_arrow {
    left: -15px;
    top: 42%;
    position: absolute;
    height: 6vh;
    user-select: none;
}
.gallery .right_arrow:hover {
    height: 10vh;
    top: 39%;
    right: -25px;
    background-color: rgba(0,0,0,0.3);
}
.gallery .left_arrow:hover {
    height: 10vh;
    top: 39%;
    left: -25px;
    background-color: rgba(0,0,0,0.3);
}
.fade {
    animation-name: fade;
    animation-duration: 1s;
}
@keyframes fade {
    from {opacity: 0.4}
    to {opacity: 1}
}



.gallery .interior {
    font-size: 3vw;
} 


.gallery .interior-imgs {
    height: 40vw;
    width: 60%;
    margin: auto;
    position: relative;
    top: 8%;
    overflow: hidden;
    user-select: none;
}
.gallery .interior-imgs .img2 {
    width: 100%;
    height: 100%;
    display: none;
    border: 4px solid rgb(42, 41, 41);
}



.gallery .kitchens {
    font-size: 3vw;
} 
.gallery .kitchen-imgs {
    height: 40vw;
    width: 60%;
    margin: auto;
    position: relative;
    top: 13%;
    overflow: hidden;
    user-select: none;
}
.gallery .kitchen-imgs .img3 {
    width: 100%;
    height: 100%;
    display: none;
    border: 4px solid rgb(42, 41, 41);

}



.gallery .bathrooms {
    font-size: 3vw;

} 
.gallery .bathroom-imgs {
    height: 40vw;
    width: 60%;
    margin: auto;
    position: relative;
    top: 17%;
    overflow: hidden;
    user-select: none;
}
.gallery .bathroom-imgs .img4 {
    width: 100%;
    height: 100%;
    display: none;
    border: 4px solid rgb(42, 41, 41);

}


@media (min-width: 1200px) {

    h2 {
        font-size: 47px;
    }

    .gallery {
        height: 100vw;
    }

    .gallery .houses {
        font-size: 35px;
    }

    .gallery .house-imgs {
        height: 35vw;
        width: 40vw;
        position: absolute;
        left: 5vw;
        top: 8vw;
        max-width: 650px;
        max-height: 500px;
    }

    .gallery .interior {
        font-size: 35px;
    }
    .gallery .interior-imgs {
        height: 35vw;
        width: 40vw;
        position: absolute;
        left: 55vw;
        top: 8vw;
        max-width: 650px;
        max-height: 500px;
    }

    .gallery .kitchens {
        font-size: 35px;
    }
    .gallery .kitchen-imgs {
        height: 35vw;
        width: 40vw;
        position: absolute;
        left: 5vw;
        top: 50vw;
        max-width: 650px;
        max-height: 500px;

    }

    .gallery .bathrooms {
        font-size: 35px;
    }
    .gallery .bathroom-imgs {
        height: 35vw;
        width: 40vw;
        position: absolute;
        left: 55vw; 
        top: 50vw;
        max-width: 650px;
        max-height: 500px;
    }
}

@media (min-width: 1400px) {
    .gallery .house-imgs {
        top: 110px;
    }
    .gallery .interior-imgs {
        top: 110px;
    }
    .gallery .kitchen-imgs {
        top: 710px;
    }
    .gallery .bathroom-imgs {
        top: 710px;
    }

    .gallery {
        height: 1400px;
    }
}














.footer {
    height: 25vw;
    width: 100%;
    background: rgba(0, 10, 5, 0.774);
    padding: 5%;
    position: relative;
    display: flex;
    
}

.footer h2 {
    color: white;
    top: 0px;
    left: 7.5vw;
    transform: translate(-50%);
    position: absolute;
    font-size: 4vw;
    
}

.footer .content-nav {
    color: white;
    top: 50%;
    position: absolute;
    width: 93%;
    display: flex;
    justify-content: center;
    gap: 3vw;
    
}


.footer .content-nav button {
    background: rgb(79, 144, 79);
    padding: 1.5vw;
    border: 1px solid rgb(4, 44, 21);
    border-radius: 10px;
    color: white;
    user-select: pointer;
    font-size: 2vw;
    
}

.footer .content-nav button:hover {
    text-decoration: underline;
    color: black;
    background: rgb(188, 236, 188);
  
}



.facebook-logo {
    width: 2vw;
    height: 2vw;
    transform: translate(0%, 14%);
    margin-right: 1vw;
    
}
.phone-logo {
    width: 2vw;
    height: 2vw;
    transform: translate(0%, 14%);
    margin-right: 2.0vw;
}
.email-logo {
    width: 4vw;
    height: 3.5vw;
    transform: translate(0%, 32%);
    margin-right: 1vw;
    margin-top: -15.7%;
}



@media (min-width: 1050px) {
    .footer {
        max-height: 300px;
    }
    .footer .content-nav {
        gap: 28px;
    }

    .footer .content-nav button {
        font-size: 22px;
        padding: 15px;
    }

    .footer h2 {
        font-size: 40px;
    }

    .facebook-logo {
        width: 17px; 
        height: 17px; 
    }

    .phone-logo {
        width: 20px;
        height: 20px;
    }

    .email-logo {
        width:36px; 
        height: 33px;
    }
}