*{
    padding:0px;
    margin:0px;
}

:root{
    --main-black:#000000;
    --main-gray:#EBF2F7;
    --body-font-size:15px;
    --accent-color:#17a2b8;
    --gray-color:rgb(128, 127, 127);
    --card-shadow:1px 1px 5px rgba(0, 0, 0, 0.1);
}







.pre-auth-page{
    position:relative;
}

.pre-auth-page .hero{
    position:relative;
    width:100%;
    height:80vh;
    background-image:url(../images/backgrounds/nysc2.jpg);
    background-size: cover;
    background-repeat:no-repeat;
    background-position: center;
}

.pre-auth-page .hero .overlay{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background: rgba(0, 0, 0, 0.7);
    z-index:1;
}

.pre-auth-page .hero .content{
    position:relative;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:2;
}

.pre-auth-page .hero .content .title-and-subtitle-container{
    position:absolute;
    width:100%;
    left:0px;
    bottom:100px;
}

.pre-auth-page .hero .content .title-and-subtitle-container .title{
    position:relative;
    width:90%;
    margin:auto;
    text-align: center;
    color:white;
    font-size:30px;
    font-weight:600;
    margin-bottom:15px;
}

.pre-auth-page .hero .content .title-and-subtitle-container .subtitle{
    position:relative;
    width:90%;
    margin:auto;
    text-align: center;
    color:white;
    font-size:20px;
}

.pre-auth-page .auth-btns{
    position:relative;
    width:100%;
    display:flex;
    gap:30px;
    margin-top:30px;
    margin-bottom:30px;
    justify-content: center;
}


.auth-page{
    position:relative;
}

.auth-page .auth-container{
    position:relative;
    display:flex;
    flex-wrap:nowrap;
}

.auth-page .auth-container .left{
    position:relative;
    width:50%;
    height:100vh;
    background-image:url(../images/backgrounds/DALL·E\ 2024-10-12\ 08.55.23.webp);
    background-size: cover;
    background-repeat:no-repeat;
    background-position: center;
}

.auth-page .auth-container .left .overlay{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background: rgba(0, 0, 0, 0.7);
    z-index:1;
}

.auth-page .auth-container .left .content{
    position:relative;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:2;
    display:flex;
    justify-content: center;
    align-items: center;
}

.auth-page .auth-container .left .content .title-and-subtitle-container{
    width:90%;
}

.auth-page .auth-container .left .content .title-and-subtitle-container h1{
    color:white;
    font-size:30px;
    font-weight:600;
    text-align: center;
}

.auth-page .auth-container .right{
    width:50%;
    position:relative;
    overflow-y: auto;
}

.auth-page .auth-container .right form{
    position:relative;
    width:80%;
    max-width: 450px;
    margin:auto;
    margin-top:50px;
    margin-bottom:50px;
    border-radius:5px;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
    padding:30px 0px;
}

.auth-page .auth-container .right form .title{
    width:90%;
    margin:auto;
    text-align:center;
    color:var(--main-black);
    font-size:25px;
    margin-bottom:10px;
}

.auth-page .auth-container .right form .subtitle{
    width:90%;
    margin:auto;
    text-align:center;
    font-size:var(--body-font-size);
    margin-bottom:20px;
    color:red;
    font-style: italic;
}

.auth-page .auth-container .right form label{
    font-size:14px;
    color:var(--main-black);
    display:block;
    width:90%;
    margin:auto;
    margin-bottom:5px;
}

.auth-page .auth-container .right form .field-container{
    width:90%;
    margin:auto;
    margin-bottom:15px;
}
.auth-page .auth-container .right form .field{
    font-size:var(--body-font-size);
    color:var(--main-black);
    width:calc(100% - 20px);
    padding:10px;
    border-radius:100px;
    border:1px solid lightgrey;
}

.auth-page .auth-container .right form select.field{
    width:100%;
}

.home-page{
    position:relative;
    background:var(--main-gray);
}

.home-page .main-section{
    position:relative;
    width:100%;
    display:flex;
    height:calc(100vh - 40px);
    /* background: green; */

}



.home-page .main-section .section1{
    position:relative;
    width:25%;
    height:100%;
    padding:0px 20px;
    overflow-y: auto;
    background:#fff;
    transition: 0.5s ease;
}



.home-page .main-section .section1 .close-btn{
    position:absolute;
    top:20px;
    right:20px;
    color:var(--accent-color);
    font-size:25px;
    z-index:50;
    display:none;
}

.home-page .main-section .section1 .field-container {
    width: 90%;
    display: flex;
    margin: 30px 0 35px;
  }

  .home-page .main-section .section1 .field-container .field span{
    position:relative;
    display:block;
    margin-bottom:10px;
  }
  .home-page .main-section .section1 .field-container .field {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 45px;
  }
  

  .home-page .main-section .section1 .field-container .field input {
    width: 100%;
    height: 100%;
    outline: none;
    font-size: 15px;
    border-radius: 10px;
    border: 1px solid lightgrey;
    -moz-appearance: textfield;
    padding:10px 10px;
  }
  .home-page .main-section .section1 input[type="number"]::-webkit-outer-spin-button,
  .home-page .main-section .section1 input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  .home-page .main-section .section1 .field-container .separator {
    width: 130px;
    display: flex;
    font-size: 19px;
    align-items: center;
    justify-content: center;
  }
  .home-page .main-section .section1 .slider {
    height: 5px;
    position: relative;
    background: #ddd;
    border-radius: 5px;
  }
  .home-page .main-section .section1 .slider .progress {
    height: 100%;
    left: 25%;
    right: 25%;
    position: absolute;
    border-radius: 5px;
    background: var(--accent-color);
  }

  .home-page .main-section .section1 .range-input {
    position: relative;
  }

  .home-page .main-section .section1 .range-input input {
    position: absolute;
    width: 100%;
    height: 5px;
    top: -5px;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }

  .home-page .main-section .section1 input[type="range"]::-webkit-slider-thumb {
    height: 17px;
    width: 17px;
    border-radius: 50%;
    background: var(--accent-color);
    pointer-events: auto;
    -webkit-appearance: none;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
  }

  .home-page .main-section .section1 input[type="range"]::-moz-range-thumb {
    height: 17px;
    width: 17px;
    border: none;
    border-radius: 50%;
    background: var(--accent-color);
    pointer-events: auto;
    -moz-appearance: none;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
  }

  .home-page .main-section .section1 .section-title{
    position:relative;
    font-size:20px;
    color:var(--main-black);
    margin-bottom:20px;
    font-weight:600;
  }

  .home-page .main-section .section1 .price-title{
    margin-top:30px;
  }

  .home-page .main-section .section1 .price-section{
    margin-bottom:50px;
  }

  .home-page .main-section .section1 .property-types-section{
    margin-bottom:50px;
  }

  .home-page .main-section .section1 .property-types-section ul{
    position:relative;
  }

  .home-page .main-section .section1 .property-types-section ul li{
    position:relative;
    list-style: none;
    margin-bottom:20px;
    font-size: var(--body-font-size);
  }

  .home-page .main-section .section1 .property-types-section ul li input{
    margin-right:10px;
    -webkit-appearance: none; 
    appearance: none; 
    transform: translateY(5px);
    width: 20px;
    height: 20px;
    border: 1px solid lightgrey;
    padding: 2px;
    border-radius:5px;
    cursor: pointer;
  }

  .home-page .main-section .section1 .property-types-section ul li input::before {
    display: block;
    content: "";
    width: 14px;
    height: 14px;
    transition: 120ms transform ease-in-out;
    box-shadow: inset 14px 14px var(--accent-color);
    transform-origin: bottom left;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
  }

  .home-page .main-section .section1 .property-types-section ul li input:checked::before{
    transform: scale(1);
    accent-color: #F76F72;
  }

  .home-page .main-section .section1 .property-types-section ul li label{
    cursor: pointer;
  }

  .home-page .main-section .section1 .action-btns-section{
    position:fixed;
    bottom:0%;
    left:0px;
    background:#FBFBFB;
    display:flex;
    justify-content: center;
    border-top:1px solid lightgrey;
    width:calc(25% + 30px);
    z-index:1000;
    padding:10px 0px;
  }

  .home-page .section1-background-overlay{
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background:rgba(0, 0, 0, 0.7);
    z-index:1050;
    display:none;
  }


.home-page .main-section .section2{
    position:relative;
    width:75%;
    height:100%;
    overflow-y: auto;
    padding:0px 10px;
    border-right:1px solid #eee;
    border-left:1px solid #eee;
    /* background:#fff; */
}

.home-page .main-section .section2 .banner-image{
    position:relative;
    width:100%;
    height:100px;
    object-fit: cover;
}

.home-page .main-section .section2 .properties-for-rent-text{
    font-size:20px;
    font-weight:normal;
    margin-top:30px;
    margin-bottom:30px;
}

.home-page .main-section .section2 .properties-for-rent-text .bold{
    font-weight:600;
    font-style: italic;
    color:var(--accent-color);
}

.home-page .main-section .section2 .filter-container{
    position:relative;
    width:100%;
    display:flex;
    justify-content: space-between;
    margin-top:10px;
    margin-bottom:20px;
}

.home-page .main-section .section2 .filter-container .row1{
    width:50%;
    /* display:flex; */
    display:none;
    align-items:center;
}

.home-page .main-section .section2 .filter-container .row1 .number-of-listings{
    color:var(--gray-color);
    font-size:17px;
}

.home-page .main-section .section2 .filter-container .row2{
    /* width:50%; */
    width:100%;
    display:flex;
    align-items:center;
    /* justify-content: flex-end; */
    gap:15px;
}

.home-page .main-section .section2 .filter-container .row2 .sort-by-text{
    font-size:15px;
    color:var(--gray-color);
    display:block;
}

.home-page .main-section .section2 .filter-container .row2 .sort-by-field{
    font-size:15px;
    color:var(--main-black);
    display:block;
    border:1px solid lightgrey;
    padding:10px;
    border-radius:10px;
}

.home-page .main-section .section2 .filter-container .row2 .filter-btn{
    font-size:17px;
    color:#fff;
    display:block;
    border:none;
    padding:10px;
    border-radius:10px;
    background:var(--accent-color);
}

.home-page .main-section .section3{
    position:relative;
    width:25%;
    height:100%;
    background:#fff;
    display:none;
}

.property-page{
    position:relative;
    width:100%;
    background:var(--main-gray);
}

.property-page .main-section{
    position:relative;
    width:80%;
    max-width: 1500px;
    margin:auto;
    display:flex;
    margin-top:50px;
    margin-bottom:50px;
    gap:20px;
}

.property-page .main-section .section1{
    position:relative;
    width:70%;
}

.property-page .main-section .section1 .main-image-container{
    position:relative;
    width:100%;
    height:500px;

}

.property-page .main-section .section1 .main-image-container .main-image{
    position:relative;
    width:100%;
    height:500px;
    object-fit: cover;
    border-radius:10px 10px 0px 0px;
}

.property-page .main-section .section1 .main-image-container .owl-nav .owl-prev{
    color:#fff;
    position:absolute;
    top:calc(50% - 50px);
    left:0px;
    font-size:50px;
    opacity: 0.9;
    cursor: pointer;
}

.property-page .main-section .section1 .main-image-container .owl-nav .owl-prev:hover{
    background:var(--accent-color);
}

.property-page .main-section .section1 .main-image-container .owl-nav .owl-next{
    color:#fff;
    position:absolute;
    top:calc(50% - 50px);
    right:0px;
    font-size:50px;
    opacity: 0.9;
    cursor: pointer;
}

.property-page .main-section .section1 .main-image-container .owl-nav .owl-next:hover{
    background:var(--accent-color);
}

.property-page .main-section .section1 .image-count{
    position:relative;
    background:rgba(0, 0, 0, 0.8);
    color:#fff;
    font-size:var(--body-font-size);
    padding:5px;
}

.property-page .main-section .section1 .thumbnail-image-container{
    position:relative;
    width:100%;
    margin-top:10px;
    margin-bottom:10px;
}


.property-page .main-section .section1 .thumbnail-image-container .box{
    position:relative;
    width:100px;
    height:100px;
    background:gray;
}

.property-page .main-section .section1 .thumbnail-image-container .box .thumbnail-image{
    position:relative;
    width:100%;
    height:100%;
    object-fit: cover;
}

.property-page .main-section .section1 .details-container{
    width:100%;
    background:#fff;
    box-shadow: var(--card-shadow);
    padding:20px 0px;
    border-radius:5px;

}

.property-page .main-section .section1 .details-container .container{
    width:90%;
    position:relative;
    margin:auto;
}

.property-page .main-section .section1 .details-container .container .property-name{
    position:relative;
    font-size:25px;
    color:var(--main-black);
    font-weight:600;
    margin-bottom:15px;
    display:flex;
    justify-content: space-between;
}

.property-page .main-section .section1 .details-container .container .property-name .price{
    position:relative;
}

.property-page .main-section .section1 .details-container .container .location-container{
    position:relative;
    width:100%;
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom:20px;
}

.property-page .main-section .section1 .details-container .container .location-container .location{
    color:var(--accent-color);
    font-size:17px;
    display:flex;
    align-items: center;
}

.property-page .main-section .section1 .details-container .container .location-container .views{
    color:var(--gray-color);
    font-size:var(--body-font-size);
    display:flex;
    align-items: center;
}

.property-page .main-section .section1 .details-container .container .description-container{
    position:relative;
    width:100%;
}

.property-page .main-section .section1 .details-container .container .description-container .title{
    font-size:20px;
    color:var(--main-black);
    font-weight:500;
    margin-bottom:10px;
}

.property-page .main-section .section1 .details-container .container .description-container .content{
    font-size:var(--body-font-size);
    color:var(--gray-color);
    margin-bottom:10px;
}

.property-page .main-section .section2{
    position:relative;
    width:30%;
}

.property-page .main-section .section2 .card{
    position:relative;
    width:100%;
    background:#fff;
    border-radius:5px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
    padding:20px 0px;
    margin-bottom:20px;
}

.property-page .main-section .section2 .card .container{
    width:90%;
    margin:auto;
}

.property-page .main-section .section2 .price-container{
    position:relative;
   
}

.property-page .main-section .section2 .price-container .price{
    font-size:20px;
    color:var(--main-black);
    margin-bottom:20px;
    font-weight:500;
}

.property-page .main-section .section2 .price-container .request-call-back-btn{
    width:100%;
    display:block;
    border:1px solid var(--accent-color);
    border-radius:100px;
    color:var(--accent-color);
    font-size:var(--body-font-size);
    text-align: center;
    padding:10px 0px;
}

.property-page .main-section .section2 .abuse-container{
    position:relative;
    display:flex;
    gap:10px;
   
}

.property-page .main-section .section2 .abuse-container .container{
    display:flex;
    gap:10px;
}

.property-page .main-section .section2 .abuse-container .action-btn{
    width:50%;
    display:block;
    border:1px solid var(--accent-color);
    border-radius:100px;
    color:var(--accent-color);
    font-size:var(--body-font-size);
    text-align: center;
    padding:10px 0px;
}

.property-page .main-section .section2 .abuse-container .action-btn .red-flag{
    color:red;
}

.property-page .main-section .section2 .agent-container{
    position:relative;
}

.property-page .main-section .section2 .agent-container .profile-container{
    width:100%;
    position:relative;
    display:flex;
    gap:10px;
    margin-bottom:10px;
}

.property-page .main-section .section2 .agent-container .profile-container .left{
    position:relative;
}

.property-page .main-section .section2 .agent-container .profile-container .left .image-container{
    position:relative;
    width:50px;
    height:50px;
    border-radius:50px;
}

.property-page .main-section .section2 .agent-container .profile-container .left .image-container .image{
    position:relative;
    width:50px;
    height:50px;
    border-radius:50px;
    object-fit: cover;
}

.property-page .main-section .section2 .agent-container .profile-container .left .image-container .online-status{
    position:absolute;
    width:10px;
    height:10px;
    border-radius:10px;
    background:#eee;
    bottom:2px;
    right:2px;
}

.property-page .main-section .section2 .agent-container .profile-container .right{
    position:relative;
}

.property-page .main-section .section2 .agent-container .profile-container .right .name{
    color:var(--main-black);
    font-size:15px;
    margin-bottom:10px;
    font-weight:500;
}

.property-page .main-section .section2 .agent-container .profile-container .right .verification-status{
    background:rgba(173, 216, 230, 0.577);
    color:rgb(7, 70, 91);
    font-weight:500;
    font-size:13px;
    margin-bottom:10px;
    display:inline-block;
    padding:5px 10px;
    border-radius:100px;
}

.property-page .main-section .section2 .agent-container .profile-container .right .details{
    position:relative;
    font-size:13px;
    color:var(--gray-color);
    margin-bottom:5px;
}

.property-page .main-section .section2 .agent-container .action-btns-container{
    position:relative;
    width:100%;
}

.property-page .main-section .section2 .agent-container .action-btns-container .show-contact-btn{
    position:relative;
    width:100%;
    padding:10px 0px;
    background:var(--accent-color);
    color:#fff;
    border-radius:100px;
    font-size:var(--body-font-size);
    text-align:center;
    margin-bottom:10px;
    display:block;
}

.property-page .main-section .section2 .agent-container .action-btns-container .send-message-btn{
    position:relative;
    width:100%;
    padding:10px 0px;
    background:#fff;
    color:var(--accent-color);
    border:1px solid var(--accent-color);
    border-radius:100px;
    font-size:var(--body-font-size);
    text-align:center;
    display:block;
}


.property-page .main-section .section2 .safety-tips-container{
    position:relative;
}

.property-page .main-section .section2 .safety-tips-container .title{
    position:relative;
    color:var(--main-black);
    font-size:20px;
    font-weight: 500;
    margin-bottom:10px;
    text-align: center;
}

.property-page .main-section .section2 .safety-tips-container ul{
    position:relative;
    width:90%;
    margin:auto;
}

.property-page .main-section .section2 .safety-tips-container ul li{
    position:relative;
    color:var(--main-black);
    font-size:14px;
    margin-bottom:10px;
}
/** *******************start of tablet screen************************/

@media only screen and (max-width: 700px) {

   


    .mobile-menu-section{
        display:flex;
    }

    .properties-container .box{
        width:48%;
    }

    .pre-auth-page .auth-btns{
        flex-wrap:wrap;
        gap:10px;
    }

    .pre-auth-page .auth-btns a{
        width:50%;
        text-align:center;
    }

    .auth-page .auth-container{
        flex-wrap:wrap;
    }

    .auth-page .auth-container .left{
        display:none;
    }

    .auth-page .auth-container .right{
        width:100%;
    }

    .auth-page .auth-container .right form{
        width:90%;
    }

    .home-page .main-section .sidebar-overlay{
        position:fixed;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
        background:rgba(0, 0, 0, 0.8);
        z-index:1050;
        display:none;
    }
    .home-page .main-section .section1{
        position:fixed;
        background:#fff;
        width:80%;
        height:100%;
        left:-100%;
        top:0px;
        padding:0px 20px;
        overflow-y: auto;
        z-index:1100;
        transition: 0.5s ease;
        /* display:none; */
    }
    

    .home-page .main-section .section1.open{
        left:0px;
    }

    .home-page .main-section .section1.close{
        left:-100%;
    }

    .home-page .main-section .section1 .close-btn{
        display:block;
    }

    .home-page .main-section .section1 .action-btns-section{
        width:calc(80% + 40px);
        left:100%;
        z-index:1100;
        transition:0.5s ease;
      }

    .home-page .main-section .section1 .action-btns-section.open{
        left:0px;
    }

    .home-page .main-section .section1 .action-btns-section.close{
        left:-100%;
    }

    .home-page .main-section .section2{
        width:100%;
        padding-top:10px;
    }

    .home-page .main-section .section2 .filter-container .row1 .number-of-listings{
        font-size:14px;
    }

    .home-page .main-section .section2 .filter-container .row2 .sort-by-text{
        font-size:14px;
    }
    
    .home-page .main-section .section2 .filter-container .row2 .sort-by-field{
        font-size:14px;
    }

    .home-page .main-section .section3{
        display:none;
    }

    .property-page .main-section{
        width:90%;
        flex-wrap:wrap;
        gap:0px;
    }
    
    .property-page .main-section .section1{
        width:100%;
        margin-bottom:20px;
    }

    .property-page .main-section .section1 .main-image-container{
        height:300px;
    
    }
    
    .property-page .main-section .section1 .main-image-container .main-image{
        height:300px;
    }

    .property-page .main-section .section1 .details-container .container .property-name{
        flex-wrap:wrap;
    }
    .property-page .main-section .section1 .details-container .container .location-container{
        flex-wrap:wrap;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .property-page .main-section .section2{
        width:100%;
    }

    
}

/************************ end of tablet screen ************************/