/* Slideshow Styling Start */
.slideshow {
    height: 50vw;
	padding: 0;
	margin: 10vh auto 5vh auto;
    width: 100%;
    max-height: 1000px;
    position: relative;   /* ← add this */
    z-index: 1;           /* ← add this */
}

.splide {
    height: 100%;
    margin: 0  ;
}
.splide__track {
    width: 100%;
    height: 100%;
}
.splide__slide img {
    width: 100%;
    height: 100%;
}

/* Slideshow Styling End */

/* Explore Styling Start */
#explore {
    width: 100%;
    font-size: 35px;
    text-align: center;
    margin: 0 auto 20px auto;
    text-decoration: underline var(--ghsred);
    text-transform: uppercase;
}


/* 4 Box Styling Start*/
main {
    
    display: flex;
    flex-direction: row;
    gap: 1vw;
    flex-wrap: wrap;
    justify-content: space-between;
}
main div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    width: 48vw;
    height: 27vw;
}
.learn_more {
    color: white;
    border: 2px solid white;
    border-radius: 5px;
    padding: 5px 10px;
    transition: all .2s linear;
}
.learn_more:hover {
    background-color: var(--ghsred);
    border: 2px solid #aaa;
}
.mainbtn {
    color: white;
}
.luxury_box {
    background: linear-gradient(rgba(0,0,0, .4), rgba(0,0,0, .4)),
    url("../img/houses/cochrane_villas/cochrane_villas.jpg");
    background-size: 100% 100%;
    box-shadow:5px 5px 10px 3px #ddd;
}
.affordable_box {
    background-image: linear-gradient(rgba(0,0,0, .4), rgba(0,0,0, .4)),url("../img/houses/Hazel/hazel_cropped.jpg");
    background-size: 100% 100%;
    box-shadow: -5px 5px 10px 3px #ddd;
}
.comfy_box {
    background-image: linear-gradient(rgba(0,0,0, .4), rgba(0,0,0, .4)),url("../img/houses/Willow/willow_court.jpg");
    background-size: 100% 100%;
    box-shadow:5px -5px 10px 3px #ddd;
}
.plots_box {
    background:  linear-gradient(rgba(0,0,0,.4) , rgba(0,0,0,.4)), url(../img/houses/heroes_3d/nobles_gate.jpg);
    background-size: 100% 100%;
    box-shadow: -5px -5px 10px 3px #ddd;
}
/* Four Box Styling End */

@media (max-width:1000px) {
    #explore {
        font-size: 30px;
    }
    
}
@media (max-width:730px) {
    body {
        background-color: #fff;
    }
    #explore {
        font-size: 25px;
    }
}

@media (max-width:520px) {
    main {
        flex-direction: column;
        flex-wrap: nowrap;
    }
    main div {
        width: 100%;
        height: 40vh;
    }
    #explore {
        font-size: 20px;
    }
}