@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap');

*{
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    align-items: center;

}
@keyframes transitionIn {
    from{
        opacity: 0;
        transform: rotateX(-10deg);
    }
    to{
        opacity: 1;
        transform: rotateX(0);
    }
}
::-webkit-scrollbar{
    width: 1em;
}
::-webkit-scrollbar-track{
    background: hwb(11 32% 10%);
}
::-webkit-scrollbar-thumb{
    background: #275C88
}
body{
    background-color: #284e5f8f;
    z-index: -1;
}

header {
        box-shadow: 0 3px 5px -2px rgba(0,0,0,.5);
        background: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        position: fixed;
        width: 100%;
        z-index: 999;
      }
      .logo {
        cursor: pointer;
        padding: 0 1rem;
        border-radius: 50%;
        margin-left: 5%;
      }
      .toggle {
        cursor: pointer;
        padding: 25px 20px;
        position: relative;
      }
      nav {
        flex: 1 1 100%;
        margin-right: 5%;
      }
      nav ul {
        list-style: none;
      }
      #mobile-icon,
      [id^="submenu"] {
        display: none;
      }
      nav a,
      nav label {
        font-weight: 500;
        font-size: 16px;
        color: #275C88;
        background: white;
        text-decoration: none;
        display: flex;
        align-items: center;
        padding: 0 1rem;
        height: 64px;
        transition: background 0.4s ease-out;
      }
      nav a:hover,
      nav label:hover {
        background: #eee;
      }
      .arrow {
        margin-left: 9px;
        margin-top: 4px;
        color: #EF6F52;
        font-size: 10px;
        cursor: default;
      }
      section:nth-of-type(1) {
        padding-top: 6rem;
      }

.properties{
    width: 80%;
    margin: 0 auto;
    height: auto;
    min-height: 120rem; /* change height of properties*/
    overflow: hidden;
}
.let_container{
    height: 560px;
    width: 31%;
    position: relative;
    top: 10em;
    border: 1px solid #c9c5c5;
    float: left;
    margin-bottom: 30px;
    margin-left: 15px;
    padding: 20px;
    border-radius: 25px;
    background: white;
    box-shadow: 0 5px 5px 5px rgba(0,0,0,.2);
}
.let_container h3,h4{
    color: #1f4869;
}
#fr1{
    width: 100%;
    height: 330px;
    margin-top: .6em;
    margin-bottom: .6em;
    border: 1px solid grey;
}
.content{
    margin-right: 1.6em;
    align-content: center;
    display: inline-block;
    color: #1f4869;
}
.content p{
    left: 10px;
    position: relative;
}
#rent{
    float: right;
    font-size: 18px;
    font-weight: bold;
    color: #1f4869;
}
#type{
    position: relative;
    top: 20px;
    font-size: 18px;
}
.letview{
    font-family: 'roboto', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    align-items: center;
    font-size: 18px;
    text-decoration: none;
    padding: 3px 14px;
    position: relative;
    float: right;
    background-color: hsl(207, 55%, 34%, 1);
    border: none;
    border-radius: 20px;
    letter-spacing: 0.1rem;
    color: white;
    cursor: pointer;    
    bottom: 8px;
}
.letview:hover{
    background: rgb(240, 105, 75);
    transition: transform ease 100ms;
}
.let_container:hover{
    transform: scale(1.012);
    transition: transform ease 270ms;
}
footer{
    position: relative;
    background: #111;
    width: 100%;
    padding-top: 50px;
    color: #fff;
    top: 1rem;
}
.foot_content{
    width: 75%;
    margin: 0 auto;
    position: relative;
    bottom: 1.7em;
}
.foot_content p{
    display: inline-block;
    position: relative;
    font-family: 'Roboto Mono', monospace;
    top: 0.5em;
}
.foot_content img{
    filter: invert(1);
    position: relative;
    float: right;
    cursor: pointer;
}
 /*-------desktop nav --------*/
 @media (min-width: 1120px) {
    header {
      flex-wrap: nowrap;
    }
    nav,
    .logo {
      flex: none;
    }
    .toggle,
    nav label {
      display: none;
    }
    nav ul {
      display: flex;
    }
    nav li {
      position: relative;
    }
    nav ul ul {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
    }
    li:hover > ul {
      max-height: 100vh;
      overflow: visible;
    }
    [class^="submenu"] {
      flex-direction: column;
      position: absolute;
    }
    .submenu-1 a, .submenu-2 a{
        background-color: white;
        width: 150px;
    }
  
  }  
@media screen and (max-width:1650px) {
    #rent{
        font-size: 15px;
        margin-bottom: 10px;
    }
    #type{
        font-size: 15px;
    }
}
  @media (max-width: 1300px){
    .logo img{
      width: 400px;
    }
    .properties{
        position: relative;
        top: -3rem;
    }
    
  }
@media screen and (max-width:1200px){
    .let_container{
        width: 48%;
    }

}
  /*------- mobile nav --------*/
  @media (max-width: 1120px) {
    nav ul {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out;
    }
    #mobile-icon:checked ~ nav > ul {
      max-height: 100vh;
    }
    .nav-items ul {
      padding-left: 1rem;
    }
    [id^="submenu"]:checked ~ [class^="submenu"] {
      max-height: 100vh;
      overflow: visible;
    }
  
    .hamburger-icon {
      width: 18px;
      height: 3px;
      background-color: #EF6F52;
      display: block;
      position: relative;
    }
    .hamburger-icon:before,
    .hamburger-icon:after {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      background-color: #275C88;
      transition: all 0.2s;
    }
    .hamburger-icon:before {
      top: 5px;
    }
    .hamburger-icon:after {
      top: -5px;
    }
    #mobile-icon:checked ~ .toggle {
      border-radius: 50em;
      transition: all 0.2s ease-out;
    }
  
    /* mobile nav change hamburger to x on click */
    #mobile-icon:checked ~ .toggle .hamburger-icon {
      background-color: transparent;
    }
    #mobile-icon:checked ~ .toggle .hamburger-icon:before {
      top: 0;
      transform: rotate(45deg);
    }
    #mobile-icon:checked ~ .toggle .hamburger-icon:after {
      top: 0;
      transform: rotate(-45deg);
    }
    .hide-mobile {
      display: none;
    }
    .properties{
        width: 85%;
    }
  }
  
@media screen and (max-width:990px)
{   
    .let_container a{
        top: 1rem;
    }
    #type{
        position: relative;
        top:-.2rem ;
    }
}
@media screen and (max-width:890px){
.properties{
        float: center;
        width: 100%;
        height: 2500px;
      }
      .let_container:after {
        content: "";
        display: table;
        clear: both;
      }
}

@media screen and (max-width:760px){
    #type{
        position: relative;
        top:1rem ;
    }
    .let_container{
        margin-left: 10%;
        width: 80%;
    }
    .properties{
        float: center;
        position: relative;
        height: 390rem;
    }

}
  @media (max-width: 520px){
    .logo img{
      width: 250px;
    }
    .properties{
        top: -6rem;
    }
    .foot_content img{
        position: relative;
        bottom: 0.25rem;
        left: 20px;
        display: block;
    }
    .let_container{
        max-height: 680px;
    }
  }
@media screen and (max-width:445px){
    
    .content{
        position: relative;
        top: 3rem;
        left: 10rem;
    }
    #rent{
        position: relative;
        bottom: 3rem;
        float: center;
        width: 90%;
        font-size: 16px;
    }
    #type{
        position: relative;
        top:-.1em ;
    }
    #fr1{
        height: 200px;
    }
    .let_container{
        max-height: 440px;
    }
    .properties{
        position: relative;
        height: 250rem;
}
}
@media screen and (max-width:350px){
    .let_container{
        max-height: 500px;
    }
    .content{

        left: 7rem;
    }

}