.building1 {
    background: url("../Images/Houses&Buildings/building1.jpg");
    background-size: cover;
}

.building2 {
    background: url("../Images/Houses&Buildings/building3.jpg");
    background-size: cover;
}

/* The animation code */
@keyframes indexLeftAnimation {
    from {
        background: url("../Images/Houses&Buildings/building1.jpg");
        background-size: cover;
    }
    to {
        background: url("../Images/Houses&Buildings/building3.jpg");
        background-size: cover;
    }
}

  /* The element to apply the animation to */
.building1{
    animation: indexLeftAnimation 10s infinite;
}


/* Btn Home main */
.clBtn_Main {
    border: 0px solid var(--clrBorderBtn);
    border-radius: 5%;
    padding: 0px;
    box-shadow: 5px 5px var(--clrShadow_btn);
}
.clBtn_Main:hover {
    border: 0px solid var(--clrBorderBtn);
    border-radius: 5%;
    padding: 0px;
    box-shadow: 3px 3px var(--clrShadow_btn);
    opacity: 0.8;
}


.slide1 {
    background: url("../Images/Houses&Buildings/building2.jpg");
    background-size: cover;
}

.slide2 {
    background: url("../Images/Houses&Buildings/house1.jpg");
    background-size: cover;
}

.slide3 {
    background: url("../Images/Houses&Buildings/building1.jpg");
    background-size: cover;
}

.slide4 {
    background: url("../Images/Houses&Buildings/house3.jpg");
    background-size: cover;
}

.slide5 {
    background: url("../Images/Houses&Buildings/building3.jpg");
    background-size: cover;
}

.slide6 {
    background: url("../Images/Houses&Buildings/house2.png");
    background-size: cover;
}

@media screen and (max-width: 767px) {

    div.keyHandshake {
        background: url("../Images/Illustrations/handshake3.jpg");
        background-attachment: fixed;
        background-size: cover;
        background-position: 35% 75%;
    }
}

@media screen and (min-width: 768px) {
    div.keyHandshake {
        background: url("../Images/Illustrations/handshake3.jpg");
        background-attachment: fixed;
        background-size: cover;
    }
}