@media (min-width: 1400px) {}

@media (max-width: 1600px) {
      .login-box {

            padding: 20px 20px 20px;
            margin: 0 auto;
      }

      .login-box .text-box h3 {
            font-size: 20px;
            margin: 20px 0 10px 0;
      }

      .login-bottom {
            padding: 20px 30px;
      }

      .login-top {
            height: calc(100vh - 175px);
      }
}

@media (max-width: 1400px) {}

@media (max-width: 1300px) {
      .navbar-brand {
            padding: 0;
            margin: 0;
      }

      .navbar-nav {
            gap: 18px;
      }

      .headr-social ul {
            gap: 8px;
      }

      .cta-box {
            padding: 30px;
      }

      .cta-box .text-box h4 {
            font-size: 20px;
            margin-bottom: 10px;
      }
}

@media (max-width: 1199px) {
      .navbar-brand {
            margin: 0;
      }

      .navbar-nav {
            gap: 15px;
      }

      .navbar-nav .nav-item .nav-link {
            font-size: 11px;
      }

      .contac-btn {
            font-size: 12px;
            width: 100px;
      }

      .appointment-btn {
            height: 55px;
            font-size: 14px;
            gap: 10px;
            padding: 0 15px;
      }

      .banner-inner {
            padding: 40px 64px 0 64px;
      }

      .about-box {
            padding: 20px;
            margin-left: -60px;
            width: 510px;
      }

      .about-box .text-box {
            margin-bottom: 20px;
      }

      .about-box .text-box h4 {
            margin-bottom: 5px;
            font-size: 20px;
      }

      .about-box .text-inner h4 {
            font-size: 18px;
            padding-bottom: 5px;
            margin-bottom: 5px;
      }

      .about-box .text-inner p {
            font-size: 14px;
            line-height: 22px;
      }

      .cta-inner .image-holder {
            max-width: 620px;
            width: 100%;
      }

      .cta-box {
            padding: 20px;
            width: 490px;
            margin-left: -175px;
      }

      .cta-box form .form-group textarea.form-control {
            height: 100px;
      }

      .cta-box form .form-group {
            margin-bottom: 20px;
      }

      .cta-box .text-box {
            margin-bottom: 24px;
      }

      .cta-box .text-box h4 {
            font-size: 20px;
            margin-bottom: 5px;
      }

      .cta-box .text-box p {
            font-size: 14px;
            line-height: 20px;
      }

      .company-inner .text-box {
            padding: 24px;
      }

      .company-inner .text-box h4 {
            font-size: 22px;
            padding-bottom: 10px;
      }

      .company-inner .text-box p {
            font-size: 14px;
            line-height: 20px;
            margin-top: 14px;
      }

      .subdivision-detail {
            margin-top: 24px;
      }
      tbody tr td,
      thead tr th { 
            font-size: 14px; 
            padding: 28px 2px; 
        }
}

@media (max-width: 991px) {
      body.active {
            overflow: hidden;
      }

      .wrapper {
            padding: 96px 0 0 0;
      }

      header {
            padding: 21px 0;
      }

      .navbar-brand {
            position: relative;
            z-index: 1000;
      }

      .navbar-toggler {
            padding: 0;
            border-radius: 0;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            width: 22px;
            position: relative;
            height: 22px;
      }

      .navbar-toggler:focus {
            box-shadow: none;
      }

      .navbar-toggler.active .menu-btn {
            display: none;
      }

      .navbar-toggler.active .menu-close {
            display: block;
      }

      .navbar-collapse {
            background-color: #1D1D1B;
            position: fixed;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            z-index: 100;
            padding: 130px 16px 16px;
            opacity: 0;
            visibility: hidden;
            transition: all 0.5s ease-in-out;
            overflow-y: auto;
      }

      .navbar-collapse.active {
            opacity: 1;
            visibility: visible;
            transition: all 0.5s ease-in-out;
      }

      .collapse:not(.show) {
            display: block;
      }

      .navbar-nav {
            gap: 42px;
            margin-bottom: 40px !important;
      }

      .navbar-nav .nav-item .nav-link {
            text-align: center;
            font-size: 16px;
            letter-spacing: 0.64px;
            text-transform: uppercase;
      }

      .navbar-nav .nav-item .nav-link.active,
      .navbar-nav .nav-item .nav-link:hover {
            color: #00BDC5;
      }

      .headr-social {
            border-top: 1px solid #53535B;
            text-align: center;
            padding-top: 38px;
      }

      .headr-social ul {
            gap: 24px;
            justify-content: center;
            flex-direction: column;
      }

      .headr-social ul li {
            width: 100%;
      }

      .social-btn {
            width: 100%;
      }

      .contac-btn {
            width: 100%;
            font-size: 14px;
            height: 52px;
      }

      .social-btn span {
            display: block;
      }

      .social-btn.phone img {
            display: none;
      }

      .headr-social ul li:first-child {
            order: 3;
      }

      .headr-social ul li:nth-child(2) {
            order: 2;
      }

      .headr-social ul li:last-child {
            order: 1;
      }

      .appointment-btn {
            height: 56px;
            font-size: 14px;
            padding: 0 30px;
      }

      .appointment-btn:hover {
            background-color: #00BDC5;
            color: #fff;
      }

      .appointment-btn img {
            transition: all 0.5s ease-in-out;
      }

      .appointment-btn:hover img {
            filter: brightness(2000%);
            transition: all 0.5s ease-in-out;
      }



      .banner-inner {
            padding: 30px 30px 0 30px;
            height: 220px;
      }

      .banner-inner h1 {
            font-size: 30px;
      }

      .banner-inner span {
            font-size: 16px;
            margin: 0 0 14px 0;
      }

      .banner-form {
            padding: 30px;
            max-width: 630px;
            margin: -50px auto 0;
      }

      .title h2 {
            font-size: 28px;
            padding-bottom: 14px;
      }

      .lots-box ul li {
            font-size: 13px;
      }

      .lots-box p {
            font-size: 14px;
            line-height: 24px;
            margin-bottom: 15px;
      }

      .about-inner .image-holder {
            max-width: 500px;
            width: 100%;
      }

      .about-box {
            padding: 15px;
            width: 396px;
            margin-left: -200px;
      }

      .about-box .media {
            row-gap: 15px;
            column-gap: 15px;
      }

      .about-box .text-inner p {
            font-size: 12px;
            line-height: 18px;
      }

      .cta-box .text-box {
            margin-bottom: 10px;
      }

      .cta-box form .form-group .form-control {
            height: 38px;
            font-size: 14px;
      }

      .cta-box form .form-group {
            margin-bottom: 12px;
      }

      .cta-box form .form-group textarea.form-control {
            height: 85px;
      }

      .cta-inner .image-holder {
            max-width: 530px;
            width: 100%;
      }

      .cta-box {
            width: 400px;
            margin-left: -230px;
      }

      .footer-nav {
            padding: 30px 0 50px;
      }

      .footer-nav ul {
            gap: 20px;
      }

      .footer-nav ul li a {
            font-size: 13px;
      }

      .copyright ul {
            gap: 15px;
      }

      .copyright ul li img {
            height: 20px;
      }

      .copyright p {
            font-size: 12px;
      }

      .copyright ol {
            gap: 10px;
      }

      .copyright ol li a {
            font-size: 12px;
      }

      .company-inner .text-box {
            padding: 18px;
      }

      .company-inner .text-box h4 {
            font-size: 18px;
      }

      .company-inner .text-box p {
            font-size: 12px;
            line-height: 18px;
            margin-top: 8px;
      }

      .neighborhoods-banner-sec .image-holder .text-box {
            padding: 40px 16px;
      }

      .neighborhoods-banner-sec .image-holder .text-box h3 {
            font-size: 34px;
            margin: 12px 0;
      }

      .contact-sec {
            padding: 50px 0;
      }

      .contact-title h3 {
            font-size: 28px;
            margin: 18px 0;
      }

      .contact-box {
            margin: 12px 0;
      }

      .contact-inner {
            margin: 30px 0 0 0;
      }

      .login-box .text-box h3 {
            font-size: 16px;
            margin: 14px 0;
      }

      .login-box .text-box p {
            font-size: 12px;
            font-weight: 400;
            line-height: 16px;
      }

      table {
            width: 930px;
      }

}

@media (max-width: 767px) {
      .container {
            padding: 0 16px;
            max-width: 100%;
      }

      .banner-sec {
            padding: 16px 0;
      }

      .banner-inner span {
            font-size: 14px;
            margin: 0 0 12px 0;
      }

      .banner-inner h1 {
            font-size: 24px;
            line-height: 32px;
      }

      .banner-inner {
            padding: 54px 16px 0 16px;
            height: 264px;
      }

      .banner-form {
            padding: 21px 16px 16px 16px;
            max-width: 513px;
            margin: -78px auto 0;
      }

      .title h2 {
            font-size: 24px;
            padding-bottom: 14px;
            line-height: 32px;
      }

      .explore-offer-sec {
            padding: 33px 0 35px;
      }

      .explore-box {
            gap: 40px;
            padding: 34px 15px 28px;
      }

      .explore-box {
            flex-direction: column;
      }

      .our-lots-sec {
            padding: 35px 0 44px;
      }

      .appointment-btn {
            height: 60px;
            max-width: 100%;
      }

      .about-sec .title h2 {
            margin-bottom: 0;
            font-size: 24px;
      }

      .about-inner {
            flex-direction: column;
      }

      .about-inner .image-holder {
            max-width: 100%;
            width: 100%;
      }

      .about-sec {
            padding: 36px 0 40px;
      }

      .about-box {
            padding: 26px 16px 16px 16px;
            width: 93%;
            margin-left: 0;
            margin-top: -123px;
      }

      .about-box .text-box {
            margin-bottom: 35px;
      }

      .about-box .text-box h4 {
            margin-bottom: 5px;
            font-size: 20px;
            text-transform: uppercase;
            line-height: 24px;
      }

      .about-box .text-box p {
            font-size: 14px;
            line-height: 20px;
      }

      .about-box .text-inner h4 {
            font-size: 20px;
            margin-bottom: 9px;
            line-height: 24px;
      }

      .about-box .text-inner p {
            font-size: 14px;
            line-height: 20px;
      }

      .about-box .media {
            grid-template-columns: 12fr;
            row-gap: 35px;
            column-gap: 0;
      }

      .map-sec {
            padding: 30px 0;
      }

      .map-sec::after {
            height: 230px;
      }

      .cta-sec {
            padding: 30px 0 24px;
      }

      .cta-inner {
            flex-direction: column;
      }

      .cta-inner .image-holder {
            max-width: 100%;
            width: 100%;
      }

      .cta-box {
            width: 95%;
            margin-left: 0;
            padding: 20px 16px 16px;
            margin-top: -124px;
      }

      .cta-box .text-box h4 {
            font-size: 20px;
            letter-spacing: 0.8px;
            margin-bottom: 10px;
            line-height: 24px;
      }

      .cta-box form .form-group .form-control {
            height: 44px;
            font-size: 16px;
      }

      .cta-box form .form-group textarea.form-control {
            height: 130px;
      }

      .cta-box .text-box {
            margin-bottom: 38px;
      }

      .cta-box form .form-group {
            margin-bottom: 38px;
      }

      footer {
            padding: 44px 34px 0 34px;
      }

      .footer-nav {
            padding: 35px 0 66px;
      }

      .footer-nav ul {
            row-gap: 40px;
            column-gap: 0;
            flex-direction: column;
      }

      .footer-nav ul li a {
            font-size: 16px;
      }

      .copyright {
            flex-direction: column;
            padding: 35px 0 37px;
      }

      .copyright p {
            font-size: 16px;
            line-height: 24px;
            text-align: center;
      }

      .copyright ul li img {
            height: auto;
      }

      .copyright ul {
            gap: 32px;
            width: 100%;
            margin: 34px 0 40px 0;
      }

      .copyright ol {
            row-gap: 42px;
            column-gap: 0;
            flex-direction: column;
      }

      .copyright ol li a {
            font-size: 16px;
      }

      .company-sec {
            padding: 54px 0 32px;
      }

      .company-sec .title h2 {
            font-size: 32px;
      }

      .company-inner .text-box {
            padding: 36px 16px 34px;
            margin-top: 24px;
      }

      .company-inner .text-box h4 {
            font-size: 24px;
            line-height: 32px;
            padding-bottom: 14px;
      }

      .company-inner .text-box p {
            font-size: 16px;
            line-height: 24px;
            margin-top: 16px;
      }

      .lots-filter .form-group .form-control {
            font-size: 12px;
      }

      .lots-detail-sec {
            padding: 50px 0 35px;
      }

      .mySwiper {
            margin: 11px 0 0 0;
      }

      .lots-map-sec {
            padding: 35px 0 24px;
      }

      .neighborhoods-banner-sec {
            padding: 24px 0 8px;
      }

      .neighborhoods-banner-sec .carousel {
            margin: 0 -16px;
      }

      .neighborhoods-banner-sec .image-holder img {
            height: 300px;
            object-fit: cover;
      }

      .neighborhoods-banner-sec .appointment-btn img {
            height: auto;
      }

      .neighborhoods-banner-sec .image-holder .text-box {
            padding: 52px 16px;
      }

      .neighborhoods-banner-sec .image-holder .text-box span {
            font-size: 14px;
      }

      .neighborhoods-banner-sec .image-holder .text-box h3 {
            font-size: 24px;
            margin: 12px 0;
      }

      .neighborhoods-banner-sec .appointment-btn {
            height: 48px;
            width: 100%;
      }

      .neighborhoods-banner-sec .image-holder .text-box h3 {
            font-size: 24px;
            margin: 10px 0 20px;
      }

      .neighborhoods-page .company-sec .title h2 {
            font-size: 24px;
      }

      .houseSwiper .image-holder img {
            height: 300px;
            object-fit: cover;
      }

      .contact-sec {
            padding: 54px 0 14px;
      }

      .contact-title h3 {
            font-size: 24px;
            margin: 12px 0 22px;
            line-height: 32px;
            letter-spacing: 0.96px;
      }

      .contact-title p {
            line-height: 24px;
      }

      .contact-inner {
            margin: 20px 0 0 0;
      }

      .contact-box h4 {
            margin: 36px 0 10px 0;
      }

      .contact-box p {
            margin-bottom: 22px;
      }

      .login-sec {
            grid-template-columns: 12fr;
            height: calc(100vh - 96px);
      }

      .login-top {
            height: calc(100vh - 150px);
      }

      .login-sec .image-holder {
            display: none;
      }

      .contract-inner {
            margin: 30px 0 0 0;
      }

      .contract-detail {
            border: none;
            border-radius: 0;
            box-shadow: none;
            margin: 0 -20px;
      }

      .contract-detail .lots-filter {
            margin: 0 20px 8px 20px;
            box-shadow: 0px 0px 48px 0px rgba(17, 17, 17, 0.08);
      }

      .table-responsive {
            box-shadow: 0px 0px 48px 0px rgba(17, 17, 17, 0.08);
      }

      .table-top {
            padding-left: 20px;
      }

      thead tr th {
            font-size: 12px;
            padding: 16px 5px;
      }

      tbody tr td {
            font-size: 12px;
            padding: 18px 5px;
      }

      tbody tr:last-child td {
            border-bottom: 1px solid #D3D1D1;
      }

      tbody tr:last-child td:first-child,
      tbody tr:last-child td:last-child {
            border-radius: 0;
      } 
            .contract-sec {
                padding: 54px 0 34px;
            }
}

@media (max-width: 575px) {
      .look-btn {
            width: 80px;
      }

      .banner-form {
            max-width: 100%;
            margin: -83px auto 0;
            width: 92%;
      }

      .lots-box .image-holder img {
            height: 300px;
            object-fit: cover;
      }

      .company-page .banner-sec {
            padding: 24px 0 14px;
      }

      .company-page .banner-inner {
            margin: 0 -16px;
      }

      .lots-filter form {
            flex-direction: column;
            gap: 16px;
      }

      .lots-filter .form-group {
            width: 100%;
      }

      .lots-filter .form-group .form-control {
            font-size: 14px;
            padding-left: 16px;
      }

      .lots-filter .look-btn {
            width: 96px;
      }

      .pag-arrwo {
            margin: 0 15px;
      }

      .company-page .our-lots-sec {
            padding: 35px 0 30px;
      }

      .swiper-slide {
            border: 2px solid transparent;
      }

      .swiper-slide.swiper-slide-thumb-active {
            border: 2px solid #00BDC5;
      }

      .lots-map-sec.house-plan-sec {
            padding: 45px 0;
      }

      .lots-map-sec .swiper-slide .image-holder {
            margin: 0;
      }

      .neighborhoods-page .company-inner .text-box p {
            font-size: 14px;
            line-height: 20px;
      }

      .login-sec {
            background-color: #fff;
      }

      .login-box {
            padding: 0;
            box-shadow: none;
      }

      .login-top {
            overflow-y: auto;
            display: block;
            padding-top: 60px;
      }

      .login-box .text-box h3 {
            font-size: 24px;
            margin: 45px 0 16px;
      }

      .login-box .text-box p {
            font-size: 16px;
            line-height: 24px;
      }

      .header-account-left a {
            margin-right: 16px;
      }

      .header-account-left h4 {
            font-size: 20px;
            padding: 0 16px;
            line-height: 24px;
      }
      .contract-detail .lots-filter form {
            gap: 16px;
        }
        .contract-detail .lots-filter .form-group {
            width: 100%;
        }
}

@media (max-width: 374px) {
      .lots-box ul {
            gap: 12px;
            flex-wrap: wrap;
      }

      .banner-inner {
            padding: 20px 16px 0 16px;
      }

      .banner-inner h1 {
            font-size: 22px;
      }

      .company-sec .title h2 {
            font-size: 26px;
      }

      .company-inner .text-box h4 {
            font-size: 20px;
            line-height: 29px;
            padding-bottom: 10px;
      }

      .company-inner .text-box p {
            font-size: 14px;
            line-height: 22px;
            margin-top: 10px;
      }

      .lots-filter .look-btn {
            width: 80px;
      }

      .lots-filter .form-group .form-control {
            font-size: 13px;
            padding-left: 12px;
      }

      .pag-link {
            font-size: 14px;
            width: 30px;
            height: 30px;
            border-radius: 5px;
      }
}