#FloatingContainer{
    width: 100%;
    background-color: white;
}

#Floater{
    width: 85%;
    position: relative;
    background-color: white;
    background-image: url("../Assets/KitchenImage.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    top: -100px;
    -webkit-box-shadow: 15px 15px 33px -11px rgba(0,0,0,0.75);
    -moz-box-shadow: 15px 15px 33px -11px rgba(0,0,0,0.75);
    box-shadow: 15px 15px 33px -11px rgba(0,0,0,0.75);
}

.FloaterGradient{
    width: 100%;
    padding-top: 80px;
    padding-bottom: 80px;
    background: radial-gradient(circle farthest-corner at top right, rgba(255, 255, 255, 1) 50%, rgba(242, 245, 241, 0.0) 90%);
    display: flex;
    justify-content: flex-end;
}

.FloaterContent{
    width: 50%;
    display: flex;
    flex-direction: column;
}

.FloaterParagraph{
    color: black;
    font-size: 22px;
    padding-right: 60px;
    padding-bottom: 30px;
}

@media (max-width: 1000px){
    .FloaterContent{
        width: 80%;
    }
}

@media (max-width: 500px){
    #Floater{
        width: 100%;
    }

    .FloaterParagraph{
        padding-right: 0px;
    }

    .FloaterGradient{
        justify-content: center;
    }
}

.ConcreteCoatings{
    display: flex;
    align-items: center;
    background-color: rgb(250, 249, 246);
    padding: 100px;
}

.ConcreteContent{
    width: 50%;
    padding-right: 150px;
    padding-left: 50px;
}

.ConcreteImg{
    width: 50%; 
    height: 500px;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
    object-fit: cover;
}

@media (max-width: 1200px){
    .ConcreteCoatings{
        padding-left: 40px;
        padding-right: 40px;
    }

    .ConcreteContent{
        padding-left: 0px;
        padding-right: 40px;
    }

    .FloaterContent{
        width: 70%;
    }

}

.WhyUs{
    width: 100%;
    display: flex;
    height: 600px;
}

.WhyImgContainer{
    width: 30%;
    height: 100%;
}

.WhyImg{
    width: 100%;
    object-fit: cover;
    height: 60%;
    position: relative;
    top: 20%;
    right: -50%;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
}

.WhyContent{
    width: 70%;
    background: rgb(161, 116, 72);
}

.WhyGradient{
    width: 100%;
    height: 100%;
    background: linear-gradient(-45deg, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.0));
}

.WhyBlocks{
    padding-left: 24%;
    padding-right: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.WhyParagraph{
    color: white;
    font-size: 22px;
}

@media (max-width: 1000px){
    .WhyUs{
        flex-direction: column;
        height: auto;
    }

    .WhyImgContainer{
        width: 100%;
        height: 25vw;
        background-color: rgb(250, 249, 246);
    }

    .WhyContent{
        width: 100%;
    }

    .WhyBlocks{
        padding-left: 10%;
        padding-right: 10%;
        padding-bottom: 60px;
        padding-top: 20vw;
    }

    .WhyImg{
        height: 150%;
        bottom: -50%;
        right: -25%;
        width: 50%;
    }

    .ConcreteCoatings{
        flex-direction: column;
    }
    
    .ConcreteContent{
        width: 100%;
        padding-right: 0;
        padding-left: 0;
        margin-bottom: 60px;
    }
    
    .ConcreteImg{
        width: 100%; 
        height: 500px;
        background-image: url("../Assets/ConcreteCoating.jpg");
        -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
        background-repeat: no-repeat;
        background-size: cover;
    }

    .ConcParagraph{
        padding-right: 0px !important;
    }
}

.Contact{
    display: flex;
    padding-top: 80px;
    padding-bottom: 80px;
    padding-left: 100px;
    padding-right: 100px;
    background-color: rgb(250, 249, 246);
}

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

.InfoWrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.SocialLinks{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 70%;
    margin-top: 20px;
}

.SocialIcon{
    height: 70px;
    width: 70px;
    cursor: pointer;
}

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

@media (max-width: 1210px){
    .Contact{
        flex-direction: column;
        padding-left: 30px;
        padding-right: 30px;
    }

    .Info{
        Width: 100%;
    }

    .InfoWrapper{
        margin-bottom: 60px;
    }

    .Map{
        Width: 100%;
    }

    .WhyBlocks{
        padding-right: 10%;
    }
}