:root{
    --primarycolor:rgb(9, 36, 22);
    --secondarycolor:#a9a9a9;
    --btncolor1:#b4b4f6;
    --tetiarycolor: #ffffff;
}
@font-face {
    font-family:poppinsbold ;
    src: url(../font/Poppins-Bold.ttf);
}
@font-face {
    font-family: poppins-light;
    src: url('../font/Poppins-Light.ttf');
}
*{
    margin:0;
    padding: 0;
    box-sizing: border-box; 
    font-family: poppins-light; 
  
}
.heroimg{
   background-image: url(../sitepictures/heroimg.png);
   background-repeat: no-repeat;
   height: 55vh;
   background-position-y :-120px ;
}

.heroimg ul li{
    list-style-type: none;
 
  
}
.heroimg a{
    text-decoration: none;
    color:var(--tetiarycolor);
    font-weight: 700
    
}
nav{
    display: flex;
}
.navlist{
    display: flex;
    width: 90%;
    gap: 50px;
   justify-content: right;
}
.navlist a{

    font-size: 1rem;
    
}
.navlist a:hover{
  border-bottom: 4px solid goldenrod;
}
.navlist a:active{
    color: var(--tetiarycolor);
}
.login{
    width: 100px;
    height:10vh;
    font-size: 1rem;


}
/* .login li{
  
  
} */

.login li a{
    color:var(--tetiarycolor);
   
}
.login li a:hover{
 border-bottom: 2px solid var(--secondarycolor);
}
.login li:active{
    color: green;
}
.logo{
    width: 250px;

    margin-left: 2%;
  
   
}

.logo li img{
    width: 185px;
 
    margin-top: -52px;
    object-fit: cover;
    
    

}
/* for hiding menu list in large screens */
.hideclass{
    /* display: none; */
    height: 0;
    overflow: hidden;
}

/* for hiding menubar in large screens */
.menubtn{
    display: none;
    
}

/* heroText */
.hero-text{
    color:white;
    margin-top: 100px;
    margin-left:5% ;
    font-size: 1.3rem;
}
.hero-text h1{
    font-weight: 700;
    font-family: poppinsbold;
}
.ads-slider{
   
    width: 70%;
    margin: 0 auto;
 
}
 /* Ads Carousel */
    .ads{
      max-width:1000px;
       margin:1rem auto;
        padding:0 1rem;
    }
    .ads-track{
      
      overflow:hidden;
       border-radius:10px; 
       background-image: url(../sitepictures/irent-chatpic\ \(1\).jpeg);
      
    }
    .ads-slider{
      display:flex; 
      transition:transform .7s ease-in-out; 
      will-change:transform;
    }
    .ads-slide{
      flex:0 0 30%;
       display:flex; 
       flex-direction: column;
       align-items:center; 
       justify-content:center;
      border:1px solid var(--green);
       background:#fff;
    }

/* categories  we offer */
.category-we-offer h2{
    margin-top: 100px;
    margin-bottom: 60px;
    margin-left: 5%;
}

/* featured listings */
.featured-properties-heading{
    margin-top: 100px;
    margin-left: 5%;
    margin-bottom: 20px;
}
.featured-properties{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px;
    width: 60%;
    margin: 0 auto;
   
}
.featured-space img{
   width: 98%;
   height: 27.625vh; 
   padding : 3px;
    margin: 0 auto;
}
.featured-space{
    
   border: 1px solid var(--secondarycolor);
   border-radius: 8px;
   box-shadow: 0 8px 20px rgba(171, 164, 164, 0.15);
   margin-bottom: 20px;
}
.featured-space h5,h6,p{
    width: 80%;
    padding-left: 3%;
    padding-top: 5%;
}
.featured-space p{
    font-size: 0.8rem;
}
.featured-space button{
    width: 40%;
    margin-left: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    color: white;
    font-weight: 600;
    border-radius: 3px;
    border: none;
    background-color: goldenrod;
}

.featured-space h6{
   border-bottom: 1px solid var(--secondarycolor);
  
}
.featured-space button:hover{
    background-color: var(--tetiarycolor);
    color: goldenrod;
}
.featured-space button:active{
    background-color: gold;
}

/* single-featuered-listing */
.single-featured{
    margin:150px auto;
    width:60%;
   
    

}

.single-featuered-listing{
  display:flex;
  gap:30px;
  padding:5px;
  background-color:rgb(208, 181, 115);
  border-radius: 8px;

}
.single-featuered-listing img{
    border-radius: 10px;
    width: 450px;
    height: 38vh;
    object-fit: cover;
   
}
.single-featured-description{
font-size: 1.2rem;
}
.single-featured-description h6{
    margin-left:5px;
}
.single-featured-description h4{
    margin-top:15px;
}
.brief-description{
    width: 90%;
    background-color: white;
    box-shadow: 3px 3px 1px 2px rgba(0, 0, 0,0.1);
    margin-top: 30px;
    padding-left: 10px;
    padding-bottom: 7px;
    border-radius: 6px;
    
}
.brief-description p{
width: 90%;
font-size: 0.9rem;
}


.brief-description button,h5{
    padding-left: 15px;   
}
.brief-description button{
    width: 80%;
    padding: 3px;
    background-color: goldenrod;
    border-radius: 5px;
    border: none;
   outline: none;
}

/* rent now content */
.rent-now-title{
    text-align: center;
    margin-bottom: 40px;
}
.rent-now-title h6{
    text-align: center;
    margin: 0 auto;
    font-size: 0.8rem;
}
.rent-now-contents{
    display:flex;
  gap:5px;
  width: 60%;
  margin: 10px auto;
  padding:5px;
  border-radius: 8px;
  
}
.rent-now-texts{
    margin-top: 10px;
}
.rent-now-texts button{
    width: 60%;
    padding: 3px;
    margin-top: 20px;
    background-color: goldenrod;
    color:white;
    border-radius: 5px;
    border: none;
   outline: none;
}
.rent-now-texts button a{
 text-decoration: none;
}
.rent-now-texts button:hover{
 background-color: white;
}
.rent-now-texts button:active{
background-color:rgb(225, 197, 126);
}
.rent-now-contents h2{
    width: 90%;
    margin-left: 5px;
    font-size: 1.2rem;

}
/* ......Benefits section */
.our-benefits{
    width: 70%;
    margin: 200px auto;
}
.our-benefits-heading{
    text-align: center;
}
.listof-benefits{
    display: flex;
    gap: 2%;
    width: 100%;
    margin: 20px 0;
   
}
.listof-benefits i{
    font-size: 2rem;
    color: goldenrod;
}
.group{
    padding-left: 0;
}
.its-a-community{
    width: 50%;
    padding: 1%;
    font-family: poppins-light;
    border-radius: 8px;
    background-color: white;
    box-shadow: 3px 3px 1px 2px rgba(0, 0, 0,0.1);
}
.its-a-community p{
    width: 100%;
    font-size: 0.9rem;
}
/* join section */
.join-us-bar{
    display: flex;
    gap: 10%;
  justify-content: center;
    background: linear-gradient(20deg, rgb(251, 167, 12), goldenrod);
    padding: 20px;
}
.join-us-bar h5{
    color :white;
}
.join-us-bar button{
    width: 10%;
    padding: 3px;
    background-color: whitesmoke;
    color:black;
    border-radius: 5px;
    border: none;
   outline: none;
}
.join-button a{
    text-decoration: none;
    color: black;
}
.join-us-bar button:hover{
background-color: goldenrod;

}

.join-us-bar button:active{
background-color:rgb(225, 197, 126);
color: rgb(18, 8, 38);
}
/* Media Query */
/* .................max-width 1150........ */
@media (max-width:1150px) {
    .single-featured{
        width:70%;
    }  
    .rent-now-contents{
      width: 75%;  
    }
}
/* .................max-width 966px........ */
@media (max-width:966px) {
    .navlist{
        width: 80%;
        gap: 30px;
    }  

    
    .logo li img{
        width: 150px;
        height: 15vh;
        margin-top: -50px;
    }
    .featured-properties{
        grid-template-columns: repeat(3,1fr);
        width: 80%;
    }
    .single-featured{
        width:80%;
    }  
    .rent-now-contents{
        width: 85%;  
      }
}
/* .................max-width 840px........ */
@media (max-width:840px) {
    .single-featured{
        width:93%;
    }
    .rent-now-contents{
        width: 95%;  
      }
    .navlist a{
        font-size: 1rem; 
    }
    .navlist{
        width: 100%;
        gap: 30px;
    }  
.login{
    width: 80px;
}
    
    .logo li img{
        width: 150px;
        height: 15vh;
        margin-top: -50px;
    }
    .our-benefits{
        width: 80%;
    }
}

/* .................max-width 774px........ */
@media (max-width:774px) {    
    .logo li img{
        width: 120px;
        height: 15vh;
        margin-top: -50px;
    }
    .rent-now-contents{
        /* width: 95%;   */
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .rent-now-texts{
       width: 65%;
       padding-left: 10%;
       
      }
      .rent-now-texts p{
        width: 100%;
      }
      .rent-now-image{
        margin-top: 2%;
      }
      .our-benefits{
        width: 90%;
    }
    .navlist{
        width: 110%;
        gap: 25px;
       
    }  
.login{
    width: 80px;
}
}
/* dropdown styling */
/* .................max-width 680px........ */
@media (max-width:723px) {
    .navlist{
        display: none;
    }
    .menubtn{  
        position: relative;
        z-index: 2;
        display: block;
        position: absolute;
        text-align: right;
        width: 100%;
        padding: 0.5%;
        margin-top: 0.5%;
        color: white;
        background: none;
        outline: none;
        border: none;
        
    }
    .menubtn i{
        padding-right: 10px;
        font-size: 2rem;
    }
    .login{
        position: relative;
        z-index: 1000;
    width: 380px;
    font-size: 1rem;
    text-align: right;
    margin-right: 65px;
   


}
.login li{
    margin-top: 5px;
}
    .small-screen-menu{
      
        width: 100%;
        height: 0;
        overflow: hidden;
        margin-top: 45px;
       padding-bottom:1%;
       position: absolute;
      background: none;
       transition: height 1s ease-in-out; 
    
    }
    .small-screen-menu li{
        width: 100%;
        display: flex;
        flex-direction: column;
        font-size: 1.1rem;
       padding-left: 3%;
        padding-top: 5px;
      
          
    }
    
    .featured-properties{
        grid-template-columns: repeat(2,1fr);
        width: 80%;
    }  
    .single-featured{
        width:93%;
    }  
   
    .single-featuered-listing img{
        width: 50%;
      
    }
    .listof-benefits{
        width: 70%;
        display: block;
        margin: 0 auto;
       
    }
    .its-a-community{
        width: 100%;
        margin-top: 20px;
    }
    /*  this is on available rentals */
    .featured-heading{
        margin-left: 20px;
    }
}

/* .................max-width 500px........ */
@media (max-width:500px) {
    .ads-slide{
        flex:0 0 25%;
         display:flex; 
         flex-direction: column;
         align-items:center; 
         justify-content:center;
        border:1px solid var(--green);
         background:#fff;
         font-size: 0.8;
      }
      .single-featured{
        font-size: 0.9rem;
        width:90%;
       
      }
    .single-featuered-listing{
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width:90%;
        margin: 10px auto;
    }
    .single-featuered-listing img{
        width: 90%;
        padding-top: 20px; 
    }
    .single-featured-description h4{
        margin-left: 5%
    }
    .single-featured-description h6{
        margin-left: 5%;
    }
    .category-we-offer h2{
        font-size: 1.1rem;
       }
       .featured-properties-heading{
           font-size: 1.1rem;
       }
       .single-featured h2{
             font-size: 1.1rem; 
       }
    .brief-description{
      margin-left: 5%;
      margin-bottom: 5%;
      width: 85%;
    }
    .brief-description h5{
        padding-left: 1px;
    }
    .rent-now-contents{
        flex-direction: column;
       
    }
    .rent-now-title h2{
        font-size: 1.2rem;
    }
    .rent-now-image img{
        width:90%;
        padding-top: 20px; 
        padding-left: 10%;
    }
    .rent-now-texts{
        width: 85%;
        padding-left: 10%;
        
       } 
       .rent-now-texts h2{
        font-size: 1.2rem;
       }
.rent-now-texts button{
    width: 100%;
}  

}

/* .................max-width 470px........ */
@media (max-width:470px) {
 

    .featured-properties{
        grid-template-columns: repeat(1,1fr);
        width: 60%;
    } 
   
}
/* .................max-width 400px........ */
@media (max-width:400px) {
 
    .listof-benefits{
        width: 80%;
       
    }
    .featured-properties{
        grid-template-columns: repeat(1,1fr);
        width: 80%;
    }
    
    /*  this is on available rentals */
    .featured-heading{
        margin-left: 20px;
        font-size: 1.2rem;
    } 
   
}
/* Height responsiveness */


/* For heights 1100px and above */
@media (min-height:1100px){   
    .category-we-offer h2{
    margin-top: -10px;
}
}

/* For heights 900px and above */

@media (min-height:900px){   
    .logo li img{
        margin-top: -54px;
        object-fit: fill;
      
    }
.category-we-offer h2{
    margin-top: 20px;
}
}
/* For heights 999px and below */
@media (max-height:999px){   
    .logo li img{
        margin-top: -40px;
        width: 124px;
    }
}
/* For heights 800px and below */
@media (max-height:800px){   
    .logo li img{
        margin-top: -40px;
    }
}
/* For heights 700px and below */
@media (max-height:700px){   
    .logo li img{
        padding-top: 5px;
    }
   
}
/* For heights 600px and below */
@media (max-height:650px){  
    .logo li {
        margin-top: 7px;
       
    } 
}
/* For heights 500px and below */
@media (max-height:500px){  
    .heroimg{
        height: 65vh;
    } 
    .hero-text{
        color:white;
        margin-top: 100px;
        margin-left:5% ;
        font-size: 1.2rem;
    }
    .small-screen-menu ul{
        margin-top: -4px;
    }
    .logo li img{
        margin-top: -17px;
    } 
}