/* CAUTION */
.cation{height: auto; background: red; padding:5px; color: #f9f9f9;top:100px; position: relative; z-index: 2; margin: 0px 10px 0px 10px; border-radius: 5px;display :flex; align-items: center;

  max-width: 100%;
  
  /* margin: 80px auto 40px auto; */
  text-align: center;
  
  /* padding-bottom: 20px; */
  /* padding: 10px 10px 10px 10px; */
  position: relative;
  height:auto;
}

.cation H {color: black; display: flex; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; }
/* FUTURED PROPARTY */


.featured-properties h1{
  color: white;
  background: black;
}
#featured-properties-p{
  color: white;
  background: gray;
  padding: 0px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

  z-index: 2;
  display:none;
}



.property-grid {
  display: flex;
  flex-direction: column;
  
  background: white;
  padding: 0px 10px 10px 10px;
margin-top: 0px;

}

.property {
  background-color: white;

  border: 0.5px solid rgb(133,129,129);
  border-radius: 10px;
  box-shadow:none;
  height: auto;
  width:100%;
  flex: 1;
padding: 0px;
margin-top:10px;
  /* position: relative; */
  
  /* margin: 0, 40px; */
  /* display: flex; */
  /* flex-direction: column;
  align-items: center; */
  /* transform:translateY(-50%); */
}


.property img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius:  10px 10px 0 0;
}

.property h2 {
  font-size: 18px;
  margin-top: 10px;
}

.property p {
  font-size: 14px;
  color: black;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  padding-bottom:0px;
  /* font-weight: bold; */
}
.property-discription {
  padding:10px
}

/* ================= TABLET ================= */
@media (min-width: 768px) {

  .hero h1 {
    font-size: 45px;
  }

  .search-box {
    flex-direction: row; /* inputs side by side */
    align-items: center;
    max-width: 700px;
  }

  .search-box input {
    flex: 1;
  }
  
.property {
  background-color: #ffffff;

  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(253, 252, 252, 0.1);
  height: 30px;
  width:100%;
  flex: 1;
padding: 10px;
margin-top: px;
  
}
}

/* ================= DESKTOP / LAPTOP ================= */
@media (min-width: 1024px) {

  /* Show nav, hide menu */
  .logo {
font-weight: 500;
font-size: 20px;
letter-spacing: 2px;
display: flex;
align-items: center;
justify-content: space-between;

 

}

.first-image{right:0;
     width: 60%;
    border-top-right-radius: 4em;
    border-bottom-left-radius: 10em;
    mask-image: linear-gradient(to right,transparent 150px, black 20px);
    -webkit-mask-image:linear-gradient(to right, transparent 150px, black 20px);
   top:-150px;
}
  .nav {
    display: flex;
    gap: 30px;
    
  }

  .nav a {
    color: white;
    text-decoration: none;
    font-size: 14px;
  }
.cation{height: auto; background: red; padding:5px; color: #f9f9f9;top:100px; position: relative; z-index: 2; margin: 0px 10px 0px 10px; border-radius: 5px;display :flex; align-items: center;}

.cation H {color: black; display: flex; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;text-align: center; margin:0 auto; }
  .menu-btn {
    display: none;
  }

  .property-grid {
  display: flex;
  flex-direction: column;
  
  background: white;
  padding: 60px 10px 10px 10px;
margin-top: 40px;}
.hero-content {
  max-width: 500px;
  margin-top: 5em;
 position: absolute;
}

  .hero {
    padding: 80px;
    
  /* Full screen height */
  min-height: 125vh;
  }

  .hero h1 {
    font-size: 55px;
  }

  .search-box {
    max-width: 900px;
    z-index: 1;
  }

.featured-properties {
  width: 100%;
  margin: 40px auto;
  text-align: center;
  top:0%;
}

.featured-properties h1{
  color: white;
  background: black;
}
#featured-properties-p{
  color: rgb(201, 201, 17);
  background: black;
  padding-bottom: 5px;
}
.property-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  top:0px;
  
}

.property {
  background-color: #f9f9f9;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: auto; 
  height:auto;
}

.property img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}

.property h2 {
  font-size: 18px;
  margin-top: 10px;
}

.property p {
  font-size: 14px;
  color: #666;
}





}

.footer{color:white; background:black; height:50px; width:100%; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;font-size: 15px; text-align: center;justify-content: center;
padding-top:10px;}





/* ================= SHOP ================= */
.shop-cation{height: 50%; background: blue; padding:5px; color: #f9f9f9;top:100px; z-index: 2; margin:0 auto;border-radius: 5px; align-items: center; justify-items: center;

  max-width: 100%;
  
  /* margin: 80px auto 40px auto; */
  text-align: center;
  
  /* padding-bottom: 20px; */
  /* padding: 10px 10px 10px 10px; */
  /* position:absolute; */
}

.shop-cation H {color: black; display: flex; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; }