.hero-explore {

     background: url('/images/explore.jpg') center/cover no-repeat;
     height: 100%;
     text-align: center;
     color: #fff;
 }

 .hero-buttons-explore {
     display: flex;
     gap: 20px;
     justify-content: center;
     flex-direction: column;
     padding-top: 20px;
     padding-bottom: 90px;
     height: auto;
     /* background-color: red; */
 }

 .hero-content-explore {
     position: relative;
     padding: 100px 80px;
     z-index: 1;
     /* ensure text is above */
 }

 #listingbtn {

     display: flex;
     align-items: center;
     justify-content: center;
     gap: 20px;
 }

 .hero-content-explore::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: #1A1C20BF;
     /* your background color */
     opacity: 0.9;
     /* only background opacity */
     z-index: -1;
     /* place behind text */
 }

 #search-box-explore {
    display: flex;
    gap: 10px;
}

.explore-btns {
    padding: 10px 24px;
    border-radius: 12px;
    border: 1px solid #C8A648;
    background: #F4F4F4;
    font-family: DM Sans;
    font-weight: 600;
    font-size: 16px;
    color: #1A1A1A;
    cursor: pointer;
}

/* ACTIVE BUTTON COLOR */
.explore-btns.active {
    background: #C8A648;   /* Yellow */
    color: #1A1A1A;
    border-color: #C8A648;
}


 .searchcontainer{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-top:70px;
    /* background-color: red; */

 }
#search-box-explore-content{
    display: flex;
    align-items: center;
    justify-content: space-between;
box-shadow: 0px 0px 10px 0px #0800001f;
   border-radius: 24px;
   width: 90%;
     padding: 44px;
     background-color: #9e6565;
}
#search-box-home-content-explore{
    display: flex;
    gap: 20px;
    padding: 44px;
    border-radius: 20px;
    box-shadow: 0px 0px 10px 0px #0800001f;
    
}
.exploremainhead{
    display: flex;
align-items: end;
justify-content: space-between;
}
.exploremainhead .gradient-text{
text-align: start;
font-family: Josefin Sans;
font-weight: 700;
font-style: Bold;
font-size: 50px;
padding: 0px;
margin: 15px 0px;
}
.exploremainhead .main-content{
    text-align: start;
    font-family: DM Sans;
font-weight: 400;
font-style: Regular;
font-size: 16px;
 padding: 0%;
 margin: 0px;
}
.searchcontainer .searchbutton{
    background-color: #dbd9d9;
   color: #0B0C0E;
}



#explorehide{
    padding: 20px;
    margin: auto;
    box-shadow: 0px 10px 26px 12px #0800001f;
   border-radius: 24px;
   width: 90%;
    
}

.explleft{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 30px;
    /* background-color: #9e2929; */
}
.explorelinks
{
    display: flex;
    gap: 40px;
  font-family: DM Sans;
font-weight: 500;
font-style: Medium;
font-size: 16px;
 color: #FFFFFF;
line-height: 100%;
letter-spacing: 0%;
}
.vsf{
    display: flex;
 font-family: DM Sans;
font-weight: 400;
font-style: Regular;
font-size: 16px;
    gap: 30px;
}
.head-text-rigth{
    display: flex;
    
    gap: 30px;
}
.head-text-rigth{
    h1{
        font-family: Josefin Sans;
font-weight: 700;
font-style: Bold;
font-size: 24px;
text-align: center;
color: #C8A648;
    }
    p{
        font-family: DM Sans;
font-weight: 400;
font-style: Regular;
font-size: 14px;
 color: #FFFFFF ;

    }
}

.weekly-realestate{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:100px;
}
.wrcontent{
     display:flex;
    align-items:center;
    justify-content:space-evenly;
    background-color:#0B0C0E;
     
    flex-direction:column;
    padding:40px 10px;
    border-radius:40px; 
    gap: 10px;
}
.wrcontent h1{
    font-family: Josefin Sans;
font-weight: 700;
font-style: Bold;
font-size: 36px;
text-align: center;
color:#FFFFFF;
}
.wrcontent p{
    width: 70%;
    font-family: DM Sans;
font-weight: 500;
font-style: Medium;
font-size: 18px;
text-align: center;
color:#FFFFFF;
}
.wrcontent input{
    width: 432px;
height: 56px;
padding-top: 12px;
padding-right: 16px;
padding-bottom: 12px;
padding-left: 16px;
border-radius: 8px;
border-width: 1px;
border: 1px solid #2255558C;
color:#FFFFFF;
background-color:#FFFFFF0F;
font-family: DM Sans;
font-weight: 400;
}
.wrcontent button{
    width: 432px;
height: 56px;
 background-color:#C8A648;
padding-top: 12px;
padding-right: 24px;
padding-bottom: 12px;
padding-left: 24px;
border-radius: 12px;
border:none;
font-family: DM Sans;
font-weight: 600;
font-style: SemiBold;
font-size: 16px;
color:#1A1A1A;
}

#input-text{
    display: flex;
    align-items: center;
    justify-content:center ;
    flex-direction: column;
    gap: 20px;
}
.input-container {
    position: relative;
    width: 432px;

}

.input-container .input-icon {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    width:20px;
    height: 20px;
    
}

.input-container input {
    width: 100%;
    padding: 10px 10px 10px 40px; /* space for icon */
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 16px;
}
#nospan{
    font-family: DM Sans;
font-weight: 400;
font-style: Regular;
font-size: 13px;
 color: #FFFFFF8F;
}


/* CARD */
.explore-location{
    padding: 80px;
}
.explore-location .location-card {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    transition: all .5s ease;
     height: 400px;

}

.location-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
     
}
.location-card:hover{
    border-radius: 32px;
   transform: scale(1.05);
}
 
.overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
     
}

.loc-info {
    position: absolute;
    bottom: 30px;
    left: 25px;
    text-align: left;
    bottom: -120px;
    transition: all .6s ease;
}
.loc-info h3 {
    font-size: 22px;
    font-weight: 700;
  padding: 20px 0px;
    transition: all 1s ease;
    color: #FFFFFF;
}
 .loc-info:hover{
bottom: 20px;
h3{
    padding: 10px 0px;
}
 .loc-count{
     border: none;
      background: #C8A648;
      color: rgb(7, 7, 7);
}
 }
 

.loc-count {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid #C8A648;
    border-radius: 20px;
    font-size: 13px;
    margin-bottom: 10px;
    background: rgba(0,0,0,0.3);
    color: #C8A648  ;
}

.loc-info button{
    outline: none;
    border:none;
    background-color: transparent;
}
.loc-info p{
color: #FFFFFF;
}
 
.explore-headings{
    display:flex ;
   align-items: start;
   justify-content: left; 
   flex-direction: column;
   padding: 50px 0px;
}
.explore-headings h1{
    font-family: Josefin Sans;
font-weight: 700;
font-style: Bold;
font-size: 36px;
 color: #1A1A1A;
}
.explore-headings p{
    font-family: DM Sans;
font-weight: 500;
font-style: Medium;
font-size: 18px;
 color:#4A4A4A;

}
.premium-btns{
    display: flex;
    gap: 30px;
}
.cardsgridexplore {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
    #premiumheadingsexplore{
        margin: 30px 0px 0px 0px ;
        display: flex;
        align-items: center;
        justify-content: space-between;
         padding:20px 80px
    }
.flitercontainer{
 display: flex;
opacity: 1;
gap: 10px;
padding-top: 12px;
padding-right: 16px;
padding-bottom: 12px;
padding-left: 16px;
border-radius: 8px;
border-width: 1px;
border: 1px solid #000000;
}
@media (max-width:992px){ 
    #search-box-explore-content{
    display: flex;
    align-items: center;
    justify-content: space-between;
box-shadow: 0px 10px 26px 12px #0800001f;
   border-radius: 24px;
   width: 90%;
     padding: 44px;
     flex-direction: column;
}
.cardsgridexplore{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap:20px;
}
.exploremainhead{
    display: flex;
align-items: start;
justify-content: space-between;
flex-direction: column;
}

    #search-box-explore-content{
    display: flex;
    align-items: center;
    justify-content: space-between;
box-shadow: 0px 10px 26px 12px #0800001f;
   border-radius: 24px;
   width: 90%;
     padding: 20px;
     flex-direction: column;
}
 .searchcontainer{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 50px 20px;
 }
     .blog-grid-home {
     padding: 20px;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     width: 100%;
     margin: auto;
     gap: 20px;
     /* background-color: #008136; */
 }
   

    .weekly-realestate{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    
}
.properties-grid-home {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 25px;
     width: 100%;
     margin: auto;
     padding: 20px;
 }
.explore-location{
    width: 100%;
    padding: 20px;
}
.wrcontent{
     display:flex;
    align-items:center;
    justify-content:space-evenly;
    background-color:#0B0C0E;
    flex-direction:column;
    padding:20px;
    border-radius:40px; 
    gap: 10px;
}

 
.wrcontent h1{
    font-family: Josefin Sans;
font-weight: 700;
font-style: Bold;
font-size: 24px;
text-align: center;
color:#FFFFFF;
}
.wrcontent p{
    width: 70%;
    font-family: DM Sans;
font-weight: 500;
font-style: Medium;
font-size: 18px;
text-align: center;
color:#FFFFFF;
}
.wrcontent input{
    width: 100%;
padding-top: 12px;
padding-right: 6px;
padding-bottom: 2px;
padding-left: 6px;
border-radius: 4px;
border-width: 1px;
border: 1px solid #2255558C;
color:#FFFFFF;
background-color:#FFFFFF0F;
font-family: DM Sans;
font-weight: 400;
}
.wrcontent button{
    width:90%;
 background-color:#C8A648;
padding-top:6px;
padding-right: 8px;
padding-bottom: 6px;
padding-left: 8px;
border-radius: 12px;
border:none;
font-family: DM Sans;
font-weight: 600;
font-style: SemiBold;
font-size: 16px;
color:#1A1A1A;
}

#input-text{
    display: flex;
    align-items: center;
    justify-content:center ;
    flex-direction: column;
    gap: 20px;
}
.input-container {
    position: relative;
    width: 90%;

}

.input-container .input-icon {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    width:20px;
    height: 20px;
    
}

.input-container input {
    width: 100%;
    padding: 10px 10px 10px 40px; /* space for icon */
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 16px;
}
 
}

@media (max-width: 600px) {
  
 .hero-about {

     background: url('/images/explore.jpg') center/cover no-repeat;
     height: 100%;
     text-align: center;
     color: #fff;
 }

 .hero-buttons-explore {
     display: flex;
     gap: 10px;
     justify-content: center;
     flex-direction: column;
     padding-top: 20px;
     padding-bottom: 10px;
     height: auto;
     /* background-color: red; */
 }

 .hero-content-explore {
     position: relative;
     padding: 10px 8px;
     z-index: 1;
     /* ensure text is above */
 }

    .properties-grid-explore {
     display: grid;
     grid-template-columns: repeat(1, 1fr);
      
     width: 100%;
     
   
 }
    .cardsgridexplore{
    display: grid;
    grid-template-columns: repeat(1,1fr);
     
}
    /* Mobile styles */
     .blog-grid-home {
     padding: 10px;
     display: grid;
     grid-template-columns: repeat(1, 1fr);
     width: 100%;
     margin: auto;
     gap: 10px;
     /* background-color: #008136; */
 }
     .weekly-realestate{
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 10px;
}

.exploremainhead .gradient-text{
 font-family: Josefin Sans;
font-weight: 700;
font-style: Bold;
font-size: 30px;
 

}
.exploremainhead .main-content{
    text-align: start;
    font-family: DM Sans;
font-weight: 400;
font-style: Regular;
font-size: 11px;
 padding: 0%;
 margin: 0px;
}
.explorelinks
{
    display: flex;
    gap: 10px;
   font-family: DM Sans;
font-weight: 500;
font-style: Medium;
font-size: 10px;
color: #FFFFFF;
}


.vsf{
    display: flex;
 font-family: DM Sans;
font-weight: 400;
font-style: Regular;
font-size: 10px;
    gap: 10px;
}
.head-text-rigth{
    display: flex;
    gap: 10px;
    font-size: 15px;
}
.explleft{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 10px;
    /* background-color: #9e2929; */
}


 .searchbutton {
 padding: 5px 8px;

}

}