@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Jost", sans-serif;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

/* header section start */
.header-section {
    background-color: #004274;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 85%;
    margin: 0 auto;
    padding: 10px 0px;
}

.header-one {
    display: flex;
    align-items: center;
    gap: 40px;
}

.links ul {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    gap: 40px;
}

.links ul li a {
    color: white;
    font-size: 18px;
    font-weight: 400;
    text-decoration: none;
    padding: 0;
}

.links ul li a:hover {
    color: blue;
    transition: all 0.3s;
}

.dropdowns {
    flex-direction: column;
    justify-content: center;
    align-items: start;
    background-color: black;
    width: 150px;
    position: absolute;
    top: 73px;
}

.dropdowns li {
    color: black;
    display: none;
}

.blog:hover~.dropdowns li {
    display: block;
}

.header-two {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-two button {
    padding: 10px 25px;
    font-size: 18px;
    background-color: #00AEFF;
    border: 1px solid #00AEFF;
    font-weight: 400;
    text-transform: capitalize;
    border-radius: 3px;
    color: white;
}

.header-two button:hover {
    background-color: transparent;
    color: blue;
    transition: all 0.4s;
}

.call p {
    font-family: "Jost", sans-serif;
    font-size: 18px;
    color: white;
}

.call p span {
    border-bottom: 1px dotted white;
}

.menu-section {
    background-color: #6c757d;
    width: 85%;
    margin: 0 auto;
    position: relative;
    top: -10px;
    display: none;
}

.menu label {
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 10px;
    color: white;
    gap: 4px;
}

.menu label p {
    font-size: 24px;
    font-family: "Jost", sans-serif;
}

.menu label i {
    font-size: 24px;
}

#sidebarmenu {
    background-color: #6c757d;
    width: 85%;
    margin: 0 auto;
    height: 0;
    position: relative;
    top: -8px;
    transition: height 0.4s;
    display: none;
}

#opensidebarmenu {
    display: none;
}

#sidebarmenu ul {
    text-align: center;
}

#sidebarmenu ul li {
    padding-bottom: 10px;
    padding-top: 10px;
    display: none;
}

#sidebarmenu ul li a {
    color: white;
}

#opensidebarmenu:checked~#sidebarmenu {
    height: 50vh;
}

#opensidebarmenu:checked~#sidebarmenu ul li {
    display: block;
}

/* nav bar section start */
.nav-bar {
    width: 85%;
    margin: 0 auto;
    padding: 10px 0px;
    display: grid;
    gap: 10px;
    align-items: center;
}

.search {
    grid-column: 1/4;
}

.rent {
    grid-column: 4/6;
}

.bed {
    grid-column: 6/8;
}

.bath {
    grid-column: 8/10;
}

.search-btn {
    grid-column: 10/12;
}

.search-btn button {
    background-color: #004274;
    padding: 7px 25px;
    color: white;
    font-size: 18px;
    border-radius: 3px;
    cursor: pointer;
    width: 100%;
}

.nav-bar select {
    padding: 10px;
    width: 100%;
}

.nav-bar input[type=search] {
    padding: 10px;
    width: 100%;
}

/* nav bar section end */
/* hero section start */
.hero-section {
    background-image: url(h1_hero1.jpg);
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 90vh;
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero {
    flex-direction: column;
    gap: 10px;
    width: 85%;
    margin: 0 auto;
    justify-content: start;

}

.hero h1 {
    font-size: 60px;
    color: white;
    font-weight: 500;
    line-height: 70px;
}

.hero h4 {
    color: white;
    font-size: 18px;
    line-height: 60px;
    font-weight: 400;
}

.hero p {
    font-size: 20px;
    color: white;
}

.hero button {
    background-color: #00AEFF;
    color: white;
    font-size: 18px;
    padding: 10px 25px;
    margin-top: 10px;
    border: 1px solid #00AEFF;
    border-radius: 3px;
    cursor: pointer;
}

.hero button:hover {
    background-color: #004274;
    color: blue;
    transition: all 0.4s;
}

.hero h2 {
    font-size: 40px;
    font-weight: 500;
    color: white;
}

/* hero section end */
/* display section start */
.display-title {
    text-align: center;
    width: 85%;
    margin: 72px auto;
}

.display-title h1 {
    font-size: 38px;
    font-weight: 500;
}

.display-title p {
    font-size: 18px;
    font-weight: 300;
    color: gray;
    line-height: 27px;
}

.display {
    border: 1px solid gray;
    width: 100%;
}

.display-cards {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    margin: 0 auto;
    gap: 16px;
}

.display-img img {
    width: 100%;
    object-fit: cover;
}

.display-content-1 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 7px;
}

.display-icon-one img {
    width: 30px;
    height: 30px;
}

.display-icon-2 img {
    width: 30px;
    height: 30px;
}

.display-content-1 a {
    color: black;
    font-size: 20px;
}

.display-content-1 h4 {
    color: #00AEFF;
    font-size: 16px;
    font-weight: 500;
}

.display-content-1 p {
    font-size: 16px;
    font-weight: 400;
    color: gray;
}

.display-content-2 p {
    font-size: 12px;
    color: gray;
}

.display-content-2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 7px;
}

/* display section end */
/* help section start */
.help-section {
    background-image: url(section-bg1.jpg);
    width: 100%;
    height: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.help-title {
    width: 85%;
    margin: 0 auto;
}

.help-title h1 {
    font-size: 38px;
    font-weight: 500;
    text-align: center;
    color: white;
    padding-top: 80px;
}

.help-cards {
    display: grid;
    width: 85%;
    margin: 60px auto;
    grid-template-columns: auto auto auto;
    gap: 20px;
}

.help {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    background-color: #00AEFF;
    text-align: center;
    padding: 20px;
}

.help h2 {
    color: white;
    font-size: 22px;
    font-weight: 500;
}

.help p {
    font-size: 16px;
    color: white;
    font-weight: 300;
}

/* help section end */
/* properties section start */
.properties-title {
    width: 85%;
    margin: 80px auto;
}

.properties-title h1 {
    font-size: 38px;
    font-weight: 500;
    text-align: center;
}

/* properties section end */
/* explore section start */
.explore-section {
    background-color: rgba(192, 192, 192, 0.632);
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 80px;
}

.explore-content h1 {
    font-size: 38px;
    font-weight: 500;
    padding-bottom: 10px;
}

.explore-content p {
    color: gray;
    font-size: 18px;
    font-weight: 300;
    padding-bottom: 10px;
}

.explore-content button {
    font-size: 18px;
    background-color: #00AEFF;
    color: white;
    border: 1px solid #00AEFF;
    padding: 10px 25px;
    border-radius: 3px;
    margin-bottom: 10px;
}

.explore-content button:hover {
    background-color: #004274;
    transition: all 0.4s;
}

.explore-card-one {
    background: #fff;
    padding: 50px 20px 50px 20px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.explore-card {
    display: grid;
    grid-template-columns: auto auto auto auto;
    width: 60%;
}

.explore {
    display: flex;
    width: 85%;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
}

/* explore section end */
/* agent section start */
.no-js .owl-carousel,
.owl-carousel.owl-loaded {
    display: grid;
    width: 85%;
    margin: 80px auto;
}

.item h2 {
    font-size: 22px;
    font-weight: 500;
}

.item {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

.item p {
    font-size: 14px;
    font-weight: 300;
    color: gray;
}

.owl-carousel .owl-item img {
    display: block;
    width: 100%;
}

.info {
    position: fixed;
    top: 70%;
    display: flex;
    gap: 20px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.info i {
    border: 1px solid #004274;
    padding: 10px;
    background-color: #004274;
    color: white;
    border-radius: 50%;

}

.agent-img:hover~.info {
    opacity: 1;
}

/* agent section end */
/* newsletter section start */
.news {
    background-color: #004274;
    width: 50%;
    height: 414px;
}

.news-image {
    width: 50%;
}

.news-image img {
    width: 100%;
    height: 414px;
    object-fit: cover;
}

.newsletter-section {
    display: flex;
    width: 100%;
    margin-top: 80px;
}

.news {
    display: flex;
    align-items: center;
    gap: 20px;
}

.newsletter {
    width: 70%;
    margin: 0 auto;
}

.newsletter h1 {
    font-size: 38px;
    font-weight: 500;
    color: white;
    padding-bottom: 10px;
}

.newsletter p {
    font-size: 18px;
    font-weight: 300;
    color: white;
}

.newsletter input[type="email"] {
    background-color: transparent;
    border: none;
    padding-top: 20px;
}

.newsletter input[type="email"]::placeholder {
    font-size: 18px;
    color: white;
}

.newsletter button {
    background-color: #00AEFF;
    font-size: 18px;
    color: white;
    padding: 10px 25px;
    border: 1px solid #00AEFF;
    border-radius: 3px;
}

/* newsletter section end */
/* footer section start */
.footer {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    width: 85%;
    margin: 80px auto;
    gap: 20px;
}

.footer-logo p {
    padding: 20px 0;
}

.footer a {
    color: gray;
}

.footer p {
    color: gray;
}

.footer a:hover {
    border-bottom: 1px solid gray;
    transition: all 0.3s;
}

.us-3 {
    font-size: 22px;
}

.footer h2 {
    font-size: 20px;
    font-weight: 600;
}

.social {
    display: flex;
    gap: 10px;
}

.navigation ul li {
    padding: 10px 0px;
}

.support ul li {
    padding: 10px 0px;
}

.us ul li {
    padding: 10px 0px;
}

.services ul li {
    padding: 10px 0;
}

.social i {
    font-size: 18px;
    color: gray;
}

/* footer section end */
/* last section start */
.last-section {
    background-color: #F2F6F9;
    text-align: center;
    padding: 10px 0;
}

.last {
    width: 85%;
    margin: 0 auto;
}

.last p {
    color: gray;
}

/* last section start */
/* header section end */
@media (max-width:1200px) and (min-width:992px) {
    .call {
        display: none;
    }

    .explore-card {
        width: 100%;
    }

    .explore {
        flex-direction: column;
        align-items: start;
        gap: 10px;
    }

    .footer {
        grid-template-columns: auto auto auto auto;
        gap: 30px;
    }

    .info {
        top: 65%;
    }
}

@media (max-width:991px) and (min-width:768px) {
    .links {
        display: none;
    }

    .call {
        display: block;
    }

    .menu-section {
        display: block;
    }

    #sidebarmenu {
        display: block;
    }

    .search {
        grid-column: 1/6;
    }

    .rent {
        grid-column: 6/8;
    }

    .bed {
        grid-column: 8/10;
    }

    .bath {
        grid-column: 10/12;
    }

    .info {
        top: 55%;
    }

    .search-btn {
        grid-column: 1/6;
    }

    .help-cards {
        display: grid;
        grid-template-columns: auto auto;
    }

    .explore-card {
        grid-template-columns: auto auto auto;
        width: 100%;
        gap: 10px;
    }

    .explore {
        flex-direction: column;
        align-items: start;
        gap: 20px;
    }

    .agent-one {
        display: none;
    }

    .agent-two {
        display: none;
    }

    .newsletter-section {
        flex-direction: column;
    }

    .news {
        width: 100%;
    }

    .newsletter {
        width: 85%;
    }

    .news-image {
        width: 100%;
    }

    .footer {
        grid-template-columns: auto auto;
        gap: 30px;
    }
}

@media (max-width:767px) and (min-width:576px) {
    .call {
        display: none;
    }

    .links {
        display: none;
    }

    .header-two button {
        display: none;
    }

    .menu-section {
        display: block;
    }

    #sidebarmenu {
        display: block;
    }

    .search {
        grid-column: 1/6;
    }

    .rent {
        grid-column: 6/8;
    }

    .bed {
        grid-column: 8/10;
    }

    .bath {
        grid-column: 10/12;
    }

    .search-btn {
        grid-column: 1/6;
    }

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


    .display {
        width: 100%;
    }

    .display-icon-one {
        display: none;
    }

    .display-icon-2 {
        display: none;
    }

    .display-cards {
        justify-content: center;
    }

    .help-cards {
        display: grid;
        grid-template-columns: auto;
    }

    .explore-card {
        grid-template-columns: auto auto;
        width: 100%;
        gap: 10px;
    }

    .explore {
        flex-direction: column;
        align-items: start;
        gap: 20px;
    }

    .agent-one {
        display: none;
    }

    .agent-two {
        display: none;
    }

    .info {
        top: 50%;
    }

    .newsletter-section {
        flex-direction: column;
    }

    .news {
        width: 100%;
    }

    .newsletter {
        width: 85%;
    }

    .news-image {
        width: 100%;
    }

    .footer {
        grid-template-columns: auto auto;
        gap: 30px;
    }

}

@media (max-width:575px) and (min-width:425px) {
    .call {
        display: none;
    }

    .links {
        display: none;
    }

    .header-two button {
        display: none;
    }

    .menu-section {
        display: block;
    }

    #sidebarmenu {
        display: block;
    }

    .search {
        grid-column: 1/12;
    }

    .rent {
        grid-column: 1/6;
    }

    .bed {
        grid-column: 6/12;
    }

    .bath {
        grid-column: 1/6;
    }

    .search-btn {
        grid-column: 1/12;
    }

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


    .display {
        width: 100%;
    }

    .display-icon-one {
        display: none;
    }

    .display-icon-2 {
        display: none;
    }

    .display-cards {
        justify-content: center;
    }

    .help-cards {
        display: grid;
        grid-template-columns: auto;
    }

    .explore-card {
        grid-template-columns: auto;
        width: 100%;
        gap: 10px;
    }

    .explore {
        flex-direction: column;
        align-items: start;
        gap: 20px;
    }

    .agent-one {
        display: none;
    }

    .agent-two {
        display: none;
    }

    .agent-three {
        display: none;
    }

    .agent-img {
        width: 100%;
    }

    .newsletter-section {
        flex-direction: column;
    }

    .news {
        width: 100%;
    }

    .newsletter {
        width: 85%;
    }

    .news-image {
        width: 100%;
    }

    .footer {
        grid-template-columns: auto auto;
        gap: 30px;
    }

    .info {
        top: 70%;
    }
}

@media (max-width:424px) and (min-width:320px) {
    .call {
        display: none;
    }

    .links {
        display: none;
    }

    .header-two button {
        display: none;
    }

    .menu-section {
        display: block;
    }

    #sidebarmenu {
        display: block;
    }

    .search {
        grid-column: 1/12;
    }

    .rent {
        grid-column: 1/6;
    }

    .bed {
        grid-column: 6/12;
    }

    .bath {
        grid-column: 1/6;
    }

    .search-btn {
        grid-column: 1/12;
    }

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

    .display {
        width: 100%;
    }

    .display-icon-one {
        display: none;
    }

    .display-icon-2 {
        display: none;
    }

    .display-cards {
        justify-content: center;
    }

    .help-cards {
        display: grid;
        grid-template-columns: auto;
    }

    .explore-card {
        grid-template-columns: auto;
        width: 100%;
        gap: 10px;
    }

    .explore {
        flex-direction: column;
        align-items: start;
        gap: 20px;
    }

    .agent-one {
        display: none;
    }

    .agent-two {
        display: none;
    }

    .agent-three {
        display: none;
    }

    .info {
        top: 65%;
    }

    .agent-img {
        width: 100%;
    }

    .newsletter-section {
        flex-direction: column;
    }

    .news {
        width: 100%;
    }

    .newsletter {
        width: 85%;
    }

    .news-image {
        width: 100%;
    }

    .footer {
        grid-template-columns: auto;
        gap: 30px;
    }
}