/*Villa card section HOME PAGE*/
.villa-content {
    display: flex;
    max-width: 100%;
    justify-content: center;
}

.main-area {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.villas-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}


.villa-wrapper {
    display: flex;
    flex-direction: row;

}


.villa-item {
    position: relative;
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 25px;
    box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);
}

.villa-item .image img {
    border-radius: 10px;
}


.villa-item .villa-desc-content {
    padding: 15px 10px;
    text-align: left !important;
}

.villa-item .villa-desc-content .villa-title h3 a {
    margin: 0;
    transition: all .5s ease-in-out;
}

.villa-item .villa-desc-content .villa-title h3 a:hover {
    color: #FCA702;
}

.villa-item .villa-desc-content .villa-title {
    margin-bottom: 20px;
}

.villa-price strong {
    color: #0dd0a0;
    font-size: 22px;
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
}

.villa-price span {
    font-size: 14px;
    color: #9fa6ae;
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
}


.villa-service {
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 10px 15px;
    border-radius: 5px;
    box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);
}

.villa-service ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
}

.villa-service ul .fas {
    margin-right: 5px;
    color: #fca702 !important;
}


.villa-btn {
    position: relative;
    margin-top: 10px;
    padding: 6px 20px;
    border-radius: 50px;
    color: #0dd0a0;
    border: 2px solid #0dd0a0;
    transition: all 0.3s ease-in-out;
}


.villa-btn:hover {
    color: #fff;
    background-color: #0dd0a0;



}


/*Single Villa Page*/

.single-villa-container {
    display: flex;
    padding: 0 20px;
    justify-content: center;
    z-index: 1;
    position: relative;
    flex-direction: column;
}


.villas-header{
    display: flex;
    width: 100%;
    padding: 10px 0 20px;
    max-height:620px !important;
}

.villas-header .villa-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    gap: 10px; /* 20px gap between items */
}


.villas-header .villa-images .featured-image img{
   
    border-radius: 5px;
    max-height:620px !important;
}

.villas-header .villa-images .image-thumbnails{
    flex:1;
    display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  gap: 10px; /* Adjust gap as needed */
  border-radius: 5px;
}

.villas-header .villa-images .image-thumbnails .image-item{
width:100%;
border-radius: 5px
}

.villas-header .villa-images .image-thumbnails .image-item img{
    border-radius: 5px; 
}

.single-villa-wrapper {
    display: flex;
    flex-direction: row;
    max-width: 1390px;
    align-self: center;
    padding: 50px 0;
    width: 100%;
}

.single-villa-wrapper .title h2 {
   font-size:45px;
   margin-bottom:10px;
}

.single-villa-wrapper .villa-details .villa-services{
    margin-bottom: 30px;
}

.single-villa-wrapper .villa-details .villa-services ul{
   display:flex;
   list-style: none;
   
}

.single-villa-wrapper .villa-details .villa-services ul li{
    margin-right:10px;
 }

 .single-villa-wrapper .villa-details .villa-services ul li .icon{
    margin-right:10px;
 }

 .single-villa-wrapper .description, .single-villa-wrapper .villa-features{
    padding: 30px 0;
    position: relative;
 }


 .single-villa-wrapper .description::after, .single-villa-wrapper .villa-features::after{
    position: absolute;
    content: "";
    width:100%;
    background-color: #9fa6ae;
    height:0.1px;
    bottom:0;
    right: 0;
    left:0;
 }

.single-villa-wrapper h3{
    font-size:26px;
 }

 .single-villa-wrapper p{
    font-size: 17px !important;
    font-weight: 100;
    text-align: justify !important;
 }



.single-villa-wrapper .villa-details .villa-services ul li i{
margin-right:5px !important;
}

.villa-details {
    flex: 2;

}

.villa-form{
    flex:1;
    margin-left:20px;
}

.villa-form .villa-rates {
    border: 1px solid #e8e8e8;
    border-radius: 5px;
    padding: 20px 23px;
    display:flex;
    justify-content: space-between;
    align-items: center;
}

.villa-form .villa-rates .rates-label h3{
    font-size: 26px !important;
    margin-bottom:0 !important;
}

.villa-form .villa-rates strong {
    font-size: 26px !important;
}

.villa-form .villa-rates span {
    font-size: 15px !important;
}

.villa-form .form{
    border: 1px solid #e8e8e8;
    border-radius: 5px;
    padding: 20px 23px;
    display:flex;
    margin-top:20px;
    flex-direction: column;
}



/*Mobile View*/

@media (min-width: 576px) {
    .main-area {
        max-width: 540px;
    }

    .villa-wrapper {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media (min-width: 768px) {
    .main-area {
        max-width: 720px;
    }

    .villa-wrapper {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (min-width: 992px) {
    .main-area {
        max-width: 960px;
    }

    .villa-wrapper {
        flex: 0 0 auto;
        width: 32.33333333%;
    }
}


@media (min-width: 1200px) {

    .main-area {
        max-width: 1190px;
    }

    .villa-wrapper {
        flex: 0 0 auto;
        width: 32.33333333%;
    }
}

@media (min-width: 1400px) {
    .main-area {
        max-width: 1320px;
    }

    .villa-wrapper {
        flex: 0 0 auto;
        width: 32.33333333%;
    }
}