/* custom css */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* Universal reset for margin and padding, and box-sizing */
*, *::before, *::after {box-sizing: border-box; margin: 0; padding: 0;}
/* Base styles for images and videos to prevent overflow */
img, video {max-width: 100%; height: auto;}
/* Optional: Reset list styles */
ul, ol {list-style: none;}
/* Optional: Reset heading font weights and sizes */
h1, h2, h3, h4, h5, h6, p {font-size: 100%; font-weight: normal;}
body {margin: 0; font: normal 16px/24px "Poppins", sans-serif; color:#4E4E4E;}
a{margin: 0; padding: 0;}
html {scroll-behavior: smooth;}


/* common style */
.mt-10{margin-bottom: 10px !important;} .mt-15{margin-bottom: 15px !important;} .mt-20{margin-bottom: 20px !important;} .mt-25{margin-bottom: 25px !important;} .mt-30{margin-bottom: 30px !important;}
.mb-10{margin-bottom: 10px !important;} .mb-15{margin-bottom: 15px !important;} .mb-20{margin-bottom: 20px !important;} .mb-25{margin-bottom: 25px !important;} .mb-30{margin-bottom: 30px !important;}
.ms-10{margin-bottom: 10px !important;} .ms-15{margin-bottom: 15px !important;} .ms-20{margin-bottom: 20px !important;} .ms-25{margin-bottom: 25px !important;} .ms-30{margin-bottom: 30px !important;}
.me-10{margin-bottom: 10px !important;} .me-15{margin-bottom: 15px !important;} .me-20{margin-bottom: 20px !important;} .me-25{margin-bottom: 25px !important;} .me-30{margin-bottom: 30px !important;}
.pt-10{margin-bottom: 10px !important;} .pt-15{margin-bottom: 15px !important;} .pt-20{margin-bottom: 20px !important;} .pt-25{margin-bottom: 25px !important;} .pt-30{margin-bottom: 30px !important;}
.pb-10{margin-bottom: 10px !important;} .pb-15{margin-bottom: 15px !important;} .pb-20{margin-bottom: 20px !important;} .pb-25{margin-bottom: 25px !important;} .pb-30{margin-bottom: 30px !important;}
.ps-10{margin-bottom: 10px !important;} .ps-15{margin-bottom: 15px !important;} .ps-20{margin-bottom: 20px !important;} .ps-25{margin-bottom: 25px !important;} .ps-30{margin-bottom: 30px !important;}
.pe-10{margin-bottom: 10px !important;} .pe-15{margin-bottom: 15px !important;} .pe-20{margin-bottom: 20px !important;} .pe-25{margin-bottom: 25px !important;} .pe-30{margin-bottom: 30px !important;}

.fs-10{font-size: 10px !important;}
.fs-11{font-size: 11px !important;}
.fs-12{font-size: 12px !important;}
.fs-13{font-size: 13px !important;}
.fs-14{font-size: 14px !important;}
.fs-15{font-size: 15px !important;}
.fs-16{font-size: 16px !important;}
.fs-17{font-size: 17px !important;}
.fs-18{font-size: 18px !important;}
.fs-19{font-size: 19px !important;}
.fs-20{font-size: 20px !important;}
.fs-21{font-size: 21px !important;}
.fs-22{font-size: 22px !important;}
.fs-23{font-size: 23px !important;}
.fs-24{font-size: 24px !important;}
.fs-25{font-size: 25px !important;}
.fs-26{font-size: 26px !important;}
.fs-27{font-size: 27px !important;}
.fs-28{font-size: 28px !important;}
.fs-29{font-size: 29px !important;}
.fs-30{font-size: 30px !important;}
.fs-31{font-size: 31px !important;}
.fs-32{font-size: 32px !important;}
.fs-33{font-size: 33px !important;}
.fs-34{font-size: 34px !important;}
.fs-35{font-size: 35px !important;}
.fs-40{font-size: 40px !important;}
.fs-45{font-size: 45px !important;}
.fs-50{font-size: 50px !important;}

/* Width css */
.w10 {width: 10px !important; min-width: 10px !important; max-width: 10px !important;}
.w20 {width: 20px !important; min-width: 20px !important; max-width: 20px !important;}
.w30 {width: 30px !important; min-width: 30px !important; max-width: 30px !important;}
.w40 {width: 40px !important; min-width: 40px !important; max-width: 40px !important;}
.w50 {width: 50px !important; min-width: 50px !important; max-width: 50px !important;}
.w60 {width: 60px !important; min-width: 60px !important; max-width: 60px !important;}
.w70 {width: 70px !important; min-width: 70px !important; max-width: 70px !important;}
.w80 {width: 80px !important; min-width: 80px !important; max-width: 80px !important;}
.w90 {width: 90px !important; min-width: 90px !important; max-width: 90px !important;}
.w100 {width: 100px !important; min-width: 100px !important; max-width: 100px !important;}
.w110 {width: 110px !important; min-width: 110px !important; max-width: 110px !important;}
.w120 {width: 120px !important; min-width: 120px !important; max-width: 120px !important;}
.w130 {width: 130px !important; min-width: 130px !important; max-width: 130px !important;}
.w140 {width: 140px !important; min-width: 140px !important; max-width: 140px !important;}
.w150 {width: 150px !important; min-width: 150px !important; max-width: 150px !important;}
.w160 {width: 160px !important; min-width: 160px !important; max-width: 160px !important;}
.w170 {width: 170px !important; min-width: 170px !important; max-width: 170px !important;}
.w180 {width: 180px !important; min-width: 180px !important; max-width: 180px !important;}
.w190 {width: 190px !important; min-width: 190px !important; max-width: 190px !important;}
.w200 {width: 200px !important; min-width: 200px !important; max-width: 200px !important;}
.w210 {width: 210px !important; min-width: 210px !important; max-width: 210px !important;}
.w220 {width: 220px !important; min-width: 220px !important; max-width: 220px !important;}
.w230 {width: 230px !important; min-width: 230px !important; max-width: 230px !important;}
.w240 {width: 240px !important; min-width: 240px !important; max-width: 240px !important;}
.w250 {width: 250px !important; min-width: 250px !important; max-width: 250px !important;}
.w260 {width: 260px !important; min-width: 260px !important; max-width: 260px !important;}
.w270 {width: 270px !important; min-width: 270px !important; max-width: 270px !important;}
.w280 {width: 280px !important; min-width: 280px !important; max-width: 280px !important;}
.w290 {width: 290px !important; min-width: 290px !important; max-width: 290px !important;}
.w300 {width: 300px !important; min-width: 300px !important; max-width: 300px !important;}
.w310 {width: 310px !important; min-width: 310px !important; max-width: 310px !important;}
.w320 {width: 320px !important; min-width: 320px !important; max-width: 320px !important;}
.w330 {width: 330px !important; min-width: 330px !important; max-width: 330px !important;}
.w340 {width: 340px !important; min-width: 340px !important; max-width: 340px !important;}
.w350 {width: 350px !important; min-width: 350px !important; max-width: 350px !important;}
.w380 {width: 380px !important; min-width: 380px !important; max-width: 380px !important;}
.w400 {width: 400px !important; min-width: 400px !important; max-width: 400px !important;}
/* Width css */

.table-responsive{
  scrollbar-color: var(--bs-primary) transparent !important;
  /* thumb and track color */
  scrollbar-width: thin !important;
}

.table-responsive::-webkit-scrollbar{
  width: 5px;
  height: 5px;
}

.table-responsive::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 6px transparent;
  box-shadow: inset 0 0 6px transparent;
  background-color: transparent;
}

.table-responsive::-webkit-scrollbar-thumb{
  background-color: var(--bs-primary);
}

.gecko .table-responsive{
  scrollbar-color: var(--bs-primary) transparent !important;
  /* thumb and track color */
  scrollbar-width: thin !important;
}

.firefox .table-responsive{
  scrollbar-color: var(--bs-primary) transparent !important;
  /* thumb and track color */
  scrollbar-width: thin !important;
}
.table-responsive:hover{
  scrollbar-color: var(--bs-primary) transparent !important;
  /* thumb and track color */
  scrollbar-width: thin !important;
}


.header-wrapper {background-image: url(../images/header-bg.png); background-color: #ffffff; background-repeat: repeat; background-position: center 0; border-bottom: 1px solid #F0F0F0;}
header .link-item, header ul li a.nav-link {font-weight: 500; font-size: 16px; line-height: 24px; color: #5B5B5B; text-decoration: none; position: relative;}
header .link-item:hover {color: #d83941; text-decoration: none;}
header .navbar ul.icons-nav li {border-bottom: 2px solid transparent; padding-bottom: 10px;}
header .navbar ul.icons-nav li:hover{border-color: #222;}
header .navbar ul.icons-nav li:hover a.nav-link {color: #222;}
.shadow-sm {box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.08) !important;}
.card .card-title {font-weight: 600; font-size: 20px; line-height: 30px; color: #222222;}
.btn_menu.dropdown-toggle:after {display: none;}
.btn_menu.dropdown-toggle + .dropdown-menu {min-width: 200px; padding: 15px 10px;}
.btn_menu.dropdown-toggle + .dropdown-menu li{margin-bottom: 0;}
.btn_menu.dropdown-toggle + .dropdown-menu li .dropdown-item {font-size: 14px; line-height: 20px; color: #222222; padding: 8px 12px; border-radius: 8px;}
header ul.navbar-nav a[data-active]::after{position: absolute; left: 0; right: 0; bottom: 0;}
header .navbar ul.icons-nav li.search-toogle:hover {border-color: transparent;}
.navbar > ul li.search-toogle {display: none;}
.navbar > ul li.search-toogle:hover{border-color: transparent;}
.navbar > ul li.search-toogle > a{display: flex; width: 32px; height: 32px; padding: 0; border-radius: 9999px; align-items: center; justify-content: center;}
header.sticky-top .search-bar, header.sticky-top a.home-menu-link{display: none;}
header.sticky-top .search-bar {position: absolute; left: 0; right: 0;}
header.sticky-top .navbar.py-lg-4{ padding-top: .75rem !important; padding-bottom: .75rem !important;}
/*header.sticky-top .navbar .navbar-brand img{width: 150px;}*/
header.sticky-top .navbar > ul li.search-toogle{display: flex;}
header .navbar.navbar-expand-lg{display: grid; grid-template-columns: 1fr auto 1fr;}
header .navbar.navbar-expand-lg .navbar-brand{grid-column: 1; display: flex; align-items: center; justify-content: flex-start;}
header .navbar.navbar-expand-lg .navbar-nav{grid-column: 2; justify-content: center;}
header .navbar.navbar-expand-lg .profile-menu{grid-column: 3;}

.page-main{min-height: 532px;}


input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="search"], input[type="tel"], input[type="url"], select, textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid rgba(rgba(0,0,0,.14));
    border-radius: 10px;
    outline: none;
    font: inherit;
}

a.btn_menu {background: #E9E9E9; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; text-decoration: none; color: #222222;}
.btn{font-weight: 500; font-size: 15px; line-height: 24px; border-radius: 10px; padding: 10px 25px; border: none; text-decoration: none; display: inline-block; text-align: center;}
.btn.btn-primary {background-color: #d83941; color: #fff;}
.btn.btn-primary:hover {background-color: #C4292D;}
.btn.btn-gray {background-color: #f0f0f0; color: #222;}
.btn.btn-gray:hover {background-color: #ebebeb;}
.link-sm{font-size: 14px; line-height: 20px; color: #5B5B5B;}
.link-sm:hover {color: #d83941;}
.divider-or {display: flex; align-items: center; text-align: center; color: #666; margin-bottom: 16px;}
.divider-or::before, .divider-or::after {content: ""; flex: 1; height: 1px; background: #ddd;}
.divider-or span {padding: 0 12px; font-size: 14px;}
.auth-btn {width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid #333; background: #fff; border-radius: 8px; padding: 14px 16px; font-size: 24px; font-weight: 500; text-decoration: none; cursor: pointer; margin-bottom: 12px;}
.auth-btn img {width: 20px; height: 20px;}
.auth-btn .icon {font-size: 18px; max-width: 20px;}
.auth-btn span {flex: 1; text-align: center;}
.auth-btn:hover {background-color: #f5f5f5;}
.footer {background-color: #222222; color: #ffffff; font-size: 13px;}
.footer .container {max-width: 1320px;}
/* MAIN FOOTER */
.footer-main {padding: 48px 0 32px;}
.footer-col h4 {color: #ffffff; font-size: 16px; font-weight: 500; margin-bottom: 16px;}
/* LINKS */
.footer-links {list-style: none; padding: 0; margin: 0;}
.footer-links li {margin-bottom: 10px;}
.footer-links a {color: #dddddd; text-decoration: none; font-size: 13px; line-height: 1.6; transition: color 0.2s ease;}
.footer-links a:hover {color: #ffffff;}
/* SOCIAL LINKS */
.footer-social li a {display: flex; align-items: center; gap: 10px;}
.footer-social span {font-size: 16px; color: #ffffff; min-width: 20px; text-align: center;}
/* BOTTOM BAR */
.footer-copyright {/* border-top: 1px solid rgba(255, 255, 255, 0.08); */ background-color: #171717; padding: 14px 0;}
.footer-bottom-inner {display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: #dddddd;}
.footer-left {white-space: nowrap;}
.footer-right {display: flex; align-items: center; gap: 10px;}
.footer-right a {color: #dddddd; text-decoration: none; font-size: 13px;}
.footer-right a:hover {color: #ffffff;}

.search-bar {display: flex; align-items: center; background: #ffffff; border-radius: 50px; padding: 10px 12px; max-width: 780px; box-shadow: 0px 6px 10px 0px rgb(0 0 0 / 9%);}
.search-bar.listing{max-width: 1100px;}
.search-bar .search-field {display: flex; flex-direction: column; padding: 0 18px; flex: 1; width: 100%;}
.search-bar .search-field label {font-size: 16px; font-weight: 00; color: #222222; margin-bottom: 2px;}
.search-bar .search-field input, .search-bar .search-field select {border: none; outline: none; font-size: 16px; color: #222222; padding: 0; height: 24px;}
.search-bar .search-field input::placeholder {color: #5B5B5B;}
.search-bar .divider {width: 1px; height: 42px; background: #e0e0e0;}

.info-card {display: flex; align-items: center; background: #ffffff; border-radius: 16px; padding: 18px 24px; box-shadow: 0px 0px 6px 1px rgb(0 0 0 / 7%);}
.info-card .info-card-icon {display: flex; align-items: center; justify-content: center; font-size: 28px; margin-right: 15px; flex-shrink: 0;}
.info-card .info-card-content h4 {margin: 0; font-size: 18px; font-weight: 600; color: #222222;}
.info-card .info-card-content p {margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: #5B5B5B;}

/* GRID SECTION */
.grid-section{letter-spacing: -1px;}
/* Title */
.grid-section .grid-title {display: inline-flex; align-items: center; font-size: 24px; font-weight: 500; color: #222222; text-decoration: none; margin-bottom: 16px;}
.grid-section .grid-title .arrow {margin-left: 6px;}
/* Grid layout */
.grid-section .grid-wrapper {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;}
/* Card */
.grid-section .grid-card {width: 200px;}
/* Image */
.grid-section .grid-image {overflow: hidden; border-radius: 16px; }
.grid-section .grid-image img {width: 100%; max-height: 200px; aspect-ratio: 1 / 1; object-fit: cover;}
/* Content */
.grid-section .grid-content {padding: 10px 0;}
.grid-section .grid-content h4 {margin: 0 0 6px; font-size: 14px; font-weight: 600; color: #222222;}
.grid-section .grid-price {font-size: 14px; font-weight: 400; color: #5B5B5B;}
.grid-section .grid-rating {font-size: 14px; font-weight: 400; color: #222222;}
/* Meta info */
.grid-section .grid-meta {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 300; color: #5B5B5B;}

.bg-light-grey{background-color: #FBFBFB;}
.section-title{font-size: 24px; font-weight: 500; color: #222222;}
p{font-size: 14px;}

.city-card {position: relative; height: 200px; border-radius: 20px; overflow: hidden; cursor: pointer;}
.city-card img {width: 100%; height: 100%; object-fit: cover;}
/* overlay */
.city-card::after {content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45);}
/* text container */
.city-card .city-card-overlay {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2;}
.city-card .city-card-overlay span {color: #ffffff; font-size: 24px; font-weight: 600;}

.hero-card {border-radius: 20px; background: #ffffff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07); overflow: hidden;}
/* TOP SECTION */
.hero-card .hero-card-top {padding: 32px;}
.hero-card .hero-card-top h2 {margin: 0 0 8px; font-size: 24px; font-weight: 500; color: #222222;}
.hero-card .hero-card-top p {margin: 0 0 20px; font-size: 14px; color: #666;}
.hero-card .hero-card-input {width: 100%; padding: 12px 20px; border-radius: 30px; border: 1px solid #ddd; font-size: 14px; margin-bottom: 16px;}
.hero-card .hero-card-options {display: flex; gap: 20px; font-size: 14px; color: #444; margin-bottom: 24px;}
.hero-card .hero-card-btn {background: #e53935; color: #fff; border: none; border-radius: 30px; padding: 14px 26px; font-size: 15px; font-weight: 600; cursor: pointer;}
.hero-card .hero-card-btn span {margin-left: 8px;}
/* BOTTOM SECTION */
.hero-card .hero-card-bottom {background: #222222; color: #fff; padding: 24px 32px;}
.hero-card .hero-review {display: flex; align-items: center; gap: 16px;}
.hero-card .hero-review img {width: 90px; object-fit: cover; aspect-ratio: 1 / 1;}
.hero-card .hero-review-content p {margin: 0 0 6px; font-size: 14px; line-height: 1.4;}
.hero-card .hero-review-content .username {display: block; font-size: 13px;}
.hero-card .hero-stars {color: #f5b301; font-size: 14px;}
/* DOTS */
.hero-card .hero-dots {display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.hero-card .hero-dots span {width: 15px; height: 15px; border-radius: 50%; background: #D9D9D9;}
.hero-card .hero-dots span.active {background: #D93A3F;}

.btn.btn-icon{padding: 0; width: 44px; height: 44px; display: flex; justify-content: center; align-items: center;}
.input-with-btn{position: relative; border: 1px solid #dee2e6; border-radius: 0.375rem; padding: 5px;}
.input-with-btn .form-control{border: 0; padding: 5px; outline: 0; box-shadow: none; min-height: 44px;}
.input-with-btn .btn{position: absolute; right: 5px; top: 5px;}

.image-blank img{max-width: 200px;}
.nav-pills .nav-link {background-color: #f0f0f0; font-size: 14px; font-weight: 500; color: #222; padding: 8px 20px;}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link{background-color: #222;}

 /* Toolbar */
.listings-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.view-toggle button {
  border: 1px solid #ddd;
  background: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  margin-left: 4px;
}

.view-toggle button.active {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}

/* Grid/List containers */
.listings.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.listings.list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Card */
.listing-card {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  gap: 14px;
  align-items: center;
  background: #fff;
}
.listing-card:hover{ box-shadow: 0 14px 30px rgba(0,0,0,.06); }
.grid .listing-card {
  flex-direction: column;
  align-items: stretch;
  padding: 12px;
}

.listing-thumb {
  width: 92px;
  height: 70px;
  border-radius: 12px;
  background: #f1f1f1;
  overflow:hidden;
  flex-shrink: 0;
}
.listing-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.grid .listing-thumb { width: 100%; height: 170px; border-radius: 14px; }

.listing-info { flex: 1; }
.listing-title { font-weight: 600; }
.listing-meta { font-size: 13px; color: #666; }

.listing-actions { text-align: right; }
.grid .listing-actions {
  width: 100%;
  text-align: left;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.06);
}

/* ✅ Filters bar */
.filters-bar{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 12px;
  background:#fff;
  margin-bottom: 14px;
}
.filters-bar .form-control,
.filters-bar .form-select{
  border-color: rgba(0,0,0,.12);
}

.table-responsive{padding: 0 5px;}
table.table.table-borderless{box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.08); width: 100%; border-spacing:0; text-align: left; border-radius: 16px 16px 16px 16px; overflow: hidden;}
table.table.table-borderless thead th{background: #E9E9E9; padding: 10px; font: 600 14px/150% Poppins, sans-serif; color:#222;}
table.table.table-borderless thead th:nth-child(1){border-radius:16px 0px 0px 0px;}
table.table.table-borderless tbody td{background: #fff; padding: 10px; border-bottom: 1px #E9E9E9 solid; font-size: 14px;}
table.table.table-borderless tr:hover td {background-color: #f0f0f0; /* Replace with your desired hover color */}
table.table.table-borderless tbody td .status{background:url('../images/Ellipse_yellow.png') no-repeat left center; padding-left:20px;}
table.table.table-borderless tbody td .green{background:url('../images/Ellipse_green.png') no-repeat left center;}
table.table.table-borderless tbody td .status{white-space:nowrap;}

#previewModal.modal .modal-dialog {
    border-radius: 15px;
}
#previewModal.modal .modal-content {
    border: 0;
}
    #previewModal.modal .modal-content .modal-header {
        background-color: #d83941;
        color: #fff;
    }

.pagination .page-item .page-link {
    border-radius: 0;
    font-size: 15px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}



/* RESPONSIVE */
@media (min-width: 768px) {
  .search-bar .search-btn {width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-left: 10px;}
  .w-md-auto {width: auto !important;}
}
@media (max-width: 1399px) {
  header ul li a.nav-link{font-size: 14px;}
  .grid-section .grid-card {width: 360px;}
}
@media (max-width: 1199px) {
  .grid-section .grid-card {width: 300px;}
}
@media (max-width: 991px) {
  .footer-bottom-inner {flex-direction: column; gap: 8px; text-align: center;}
  .footer-left {white-space: normal;}
  header .link-item{color: #ffffff;}
  header .link-item.active{color: #d83941;}
  header .home-menu-link{color: #ffffff; display: none;}
  /*header.sticky-top .navbar .navbar-brand img, header .navbar .navbar-brand img{height: 33px;}*/
  .grid-section .grid-card {width: 31%;}
}
@media (max-width: 820px){
   table th, table td{ white-space: nowrap; }
   table td .property_box{ white-space: normal; }
}
@media (max-width: 767px) {
    .search-bar {
        flex-direction: column;
        padding: 16px;
        max-width: 100%;
        border-radius: 15px;
        width: 100%;
    }
  .search-bar .divider {width: 100%; height: 1px; margin: 5px 0;}
  .search-bar .search-btn {margin-top: 5px; margin-bottom:5px;}
  .grid-section .grid-image img {height: 180px;}
  header ul li a.nav-link span{display: none;}
 /* header ul li a.nav-link img{width: 45px;}*/
  header .navbar > ul li {padding-bottom: 0; border: 0;}
  .hero-card .hero-dots span {width: 10px; height: 10px;}
}
@media (max-width: 575px) {
  .info-card {padding: 14px 18px; border-radius: 24px;}
  .info-card .info-card-icon {width: 40px; height: 40px; font-size: 18px; margin-right: 12px;}
  .info-card-content h4 {font-size: 16px;}
  .info-card .info-card-content p {font-size: 13px;}
  .city-card {height: 180px;}
  .city-card .city-card-overlay span {font-size: 24px;}
  .hero-card .hero-card-top {padding: 24px;}
  .hero-card .hero-card-top h2 {font-size: 20px;}
  .hero-card .hero-card-bottom {padding: 20px;}
  .grid-section .grid-card {width: 47.5%;}
  .grid-section .grid-image img {height: 160px;}
}

.av-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-wrapper {
    flex: 1; /* This pushes footer down */
}

.footer {
    margin-top: auto;
}

/* Fullscreen modal look */
#previewModal .av-preview-modal .modal-content {
    background: #0f1115;
    color: #fff;
    border: 0;
}

#previewModal .av-preview-header {
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

#previewModal .av-prev-ico {
    font-size: 20px;
    opacity: .9;
}

/* Body/stage */
#previewModal .av-preview-body {
    padding: 0;
}

#previewModal .av-preview-stage {
    height: calc(100vh - 64px); /* header height approx */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: radial-gradient(circle at 20% 10%, rgba(255,255,255,0.06), transparent 40%), radial-gradient(circle at 80% 30%, rgba(255,255,255,0.05), transparent 45%), #0f1115;
}

/* Device frame wrapper */
#previewModal .av-preview-frame {
    width: 1280px; /* default desktop */
    height: 780px;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,0.10);
    transform: translateZ(0);
    transition: width .18s ease, height .18s ease, border-radius .18s ease;
}

    /* Make it feel like a device */
    .av-preview-frame.is-mobile,
    .av-preview-frame.is-tablet {
        border-radius: 28px;
    }

/* Iframe */
#previewModal .av-preview-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #fff;
}

/* Toolbar tweaks */
#previewModal .av-device-group .btn {
    border-color: rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.90);
}

    #previewModal .av-device-group .btn:hover {
        border-color: rgba(255,255,255,0.45);
    }

    #previewModal .av-device-group .btn.is-active {
        background: rgba(255,255,255,0.16);
        border-color: rgba(255,255,255,0.35);
    }

#previewModal .av-customsize .form-control {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
}

    #previewModal .av-customsize .form-control::placeholder {
        color: rgba(255,255,255,0.45);
    }
#previewModal .av-device-group .btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.35);
}