@charset "utf-8";

/*
Theme Name: Hibo - Hospitality Suite HTML5 Templates.
Author: Metropolitanthemes
Version: 1.0.0

%%%%%%% Responsive Stylesheet %%%%%%%
Desktop-first max-width cascade: 1399 / 1199 / 991 / 767 / 575
*/

/*======================
Max Width 1399px
========================*/
@media (max-width: 1399.98px) {
  /* General */
  .container-wide {
    padding-left: 32px;
    padding-right: 32px;
  }
  /* Header */
  .ho-nav > ul {
    gap: 26px;
  }
  .mega-inner {
    grid-template-columns: 420px minmax(0, 1fr);
  }
  /* Hero */
  .ho-hero .wall-cols {
    width: 76%;
    right: -120px;
  }
  /* Showroom */
  .showroom {
    grid-template-columns: 250px minmax(0, 1fr) 270px;
    gap: 22px;
  }
  /* The Dashboard */
  .dt-num {
    font-size: 150px;
  }
  /* Engine Room */
  .desk-main {
    grid-template-columns: 260px minmax(0, 1fr);
  }
  .desk-form {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
  /* Kit In One Scan */
  .kit-grid {
    gap: 30px;
  }
  .kit-list li,
  .kit-value {
    font-size: 15px;
  }
}

/*======================
Max Width 1199px
========================*/
@media (max-width: 1199.98px) {
  /* General */
  .sec-pt-130 {
    padding-top: 110px;
  }
  .sec-pb-130 {
    padding-bottom: 110px;
  }
  /* Header */
  .suite-tally {
    display: none;
  }
  .ho-nav > ul {
    gap: 20px;
  }
  .ho-nav > ul > li > a {
    font-size: 14.5px;
  }
  .mega-panel {
    left: 20px;
    right: 20px;
  }
  .mega-shots {
    gap: 12px;
  }
  /* Hero */
  .ht-num {
    font-size: clamp(160px, 21vw, 250px);
  }
  .ht-label,
  .ht-label em {
    font-size: 13.5px;
  }
  .ho-hero .wall-cols {
    width: 90%;
    right: -200px;
  }
  .hero-facts {
    gap: 0 30px;
  }
  .hero-facts .fig {
    font-size: 32px;
  }
  /* Pillars */
  .pillars-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pillar {
    min-height: 380px;
  }
  /* Showroom */
  /* the list runs across the top, two rows of five names; the window and the card sit side by side under it */
  .showroom {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 32px 28px;
  }
  .sr-list {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 20px;
  }
  .sr-niche {
    display: none;
  }
  /* The Suite */
  .suite-grid {
    gap: 30px;
  }
  .suite-card.is-full .sc-body {
    padding: 26px 26px 28px;
  }
  .suite-card.is-full .sc-body h3 {
    font-size: 26px;
  }
  .sc-body {
    padding: 22px 22px 24px;
  }
  .sc-body h3 {
    font-size: 24px;
  }
  /* The Dashboard */
  .dash-intro {
    gap: 36px 50px;
  }
  .dt-num {
    font-size: 128px;
  }
  .dash-kinds b {
    font-size: 28px;
  }
  /* Engine Room */
  .desk-main {
    grid-template-columns: minmax(0, 1fr);
  }
  .desk-tabs {
    position: static;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .desk-tab {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }
  .desk-tab i {
    width: 42px;
    height: 42px;
    font-size: 21px;
  }
  .desk-tab i::after {
    inset: 3px;
  }
  .desk-tab .dt-name {
    font-size: 15px;
  }
  /* Kit In One Scan */
  .kit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 50px 40px;
  }
  /* Standards */
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bento-tile.is-code {
    grid-row: span 1;
  }
  /* Footer */
  .ho-standards {
    padding-bottom: 202px;
  }
}

/*======================
Max Width 991px
========================*/
@media (max-width: 991.98px) {
  /* General */
  .sec-pt-130 {
    padding-top: 90px;
  }
  .sec-pb-130 {
    padding-bottom: 90px;
  }
  .sec-pt-90 {
    padding-top: 72px;
  }
  .sec-pb-90 {
    padding-bottom: 72px;
  }
  /* Header */
  .ho-header .header-inner {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 84px;
  }
  .ho-header .ho-nav {
    display: none;
  }
  .header-right {
    justify-content: flex-end;
  }
  .ho-logo img {
    height: 50px;
  }
  /* Hero */
  .ho-hero > .container-wide {
    display: block;
  }
  .hero-total {
    display: none;
  }
  .ho-hero {
    min-height: 0;
    padding: 140px 0 70px;
  }
  .ho-hero .wall-cols {
    width: 130%;
    right: -45%;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .wall-shade {
    background:
      linear-gradient(90deg, rgba(var(--ho-color-ink-rgb), 0.96) 0%, rgba(var(--ho-color-ink-rgb), 0.86) 55%, rgba(var(--ho-color-ink-rgb), 0.55) 100%),
      linear-gradient(180deg, rgba(var(--ho-color-ink-rgb), 0.85) 0%, rgba(var(--ho-color-ink-rgb), 0) 20%, rgba(var(--ho-color-ink-rgb), 0) 72%, rgba(var(--ho-color-ink-rgb), 0.95) 100%);
  }
  /* Brand Wall */
  /* ten logos: five across, then two across - never a lone tile on the last row; the dashboard's row stays full */
  .ho-brands {
    padding-bottom: 80px;
  }
  .brand-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Pillars Marquee */
  .mq-word {
    font-size: 64px;
  }
  .marquee-set {
    gap: 36px;
    padding-right: 36px;
  }
  /* Pillars */
  .pillars-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 44px;
  }
  /* Showroom */
  .showroom-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 40px;
  }
  .showroom {
    grid-template-columns: minmax(0, 1fr);
  }
  .sr-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sr-niche {
    display: block;
  }
  /* the card under the window: logo, line and facts on the left; home shots on the right, the button level with
     the facts */
  .sr-set.is-active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    grid-template-areas: "logo homes" "engine homes" "facts open";
    gap: 10px 40px;
    align-items: start;
  }
  .sr-set .sr-logo {
    grid-area: logo;
  }
  .sr-set .sr-engine {
    grid-area: engine;
  }
  .sr-set .sr-facts {
    grid-area: facts;
  }
  .sr-set .sr-homes {
    grid-area: homes;
    margin-top: 0;
  }
  .sr-set .sr-open {
    grid-area: open;
    align-self: end;
    margin-top: 0;
  }
  /* The Suite */
  /* two level columns on a tablet (one per row made the suite 9,600px long) */
  .suite-grid {
    gap: 24px;
  }
  .suite-card.is-right {
    margin-top: 0;
    margin-bottom: 0;
  }
  .suite-card.is-full {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 0;
  }
  .suite-card.is-full .sc-scroll {
    flex: none;
    aspect-ratio: 16 / 10.4;
    min-height: 0;
  }
  .sc-shot,
  .suite-card.is-full .sc-shot {
    margin: 10px 10px 0;
  }
  .suite-card.is-full .sc-body {
    padding: 20px 18px 22px;
  }
  .sc-facts b {
    font-size: 24px;
  }
  .sc-shot .shot-url {
    display: none;
  }
  .sc-body {
    padding: 20px 18px 22px;
  }
  .sc-body h3 {
    font-size: 21px;
  }
  .sc-head {
    flex-wrap: wrap;
    gap: 10px;
  }
  .sc-logo {
    height: 32px;
  }
  .sc-homes {
    gap: 8px;
  }
  .suite-head {
    margin-bottom: 44px;
  }
  /* The Dashboard */
  .dash-intro {
    grid-template-columns: minmax(0, 1fr);
  }
  .dash-pages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
  .dash-head {
    margin-bottom: 48px;
  }
  .dash-compare {
    margin-bottom: 48px;
  }
  /* Engine Room */
  .desk-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 40px;
  }
  .desk-form {
    grid-template-columns: minmax(0, 1fr);
  }
  .desk-quote {
    grid-column: 1;
    grid-row: auto;
  }
  .desk-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Kit In One Scan */
  .kit-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 44px;
  }
  /* Footer */
  .ho-standards {
    padding-bottom: 182px;
  }
  .footer-homes {
    margin-top: -90px;
    padding-bottom: 42px;
  }
  .footer-acronym {
    padding: 64px 0 50px;
  }
  .acro-line {
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    column-gap: 60px;
    font-size: clamp(30px, 6.4vw, 56px);
  }
  .footer-widget-area {
    padding: 60px 0 150px;
  }
}

/*======================
Max Width 767px
========================*/
@media (max-width: 767.98px) {
  /* General */
  .container-wide {
    padding-left: 20px;
    padding-right: 20px;
  }
  .ho-lead,
  .ho-sec-title .lead-text {
    font-size: 17.5px;
  }
  /* Preloader */
  .ho-preloader .pre-word {
    font-size: 10px;
    letter-spacing: 0.14em;
  }
  /* Offcanvas Menu */
  .offcanvas-head {
    padding: 26px 26px 20px;
  }
  .offcanvas-nav {
    padding: 22px 26px 26px;
  }
  .offcanvas-foot {
    padding: 20px 26px 24px;
  }
  /* Hero */
  .hero-facts {
    grid-template-columns: repeat(2, auto);
    gap: 22px 40px;
  }
  .ho-hero .wall-cols {
    width: 180%;
    right: -95%;
  }
  /* Showroom */
  .sr-set.is-active {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "logo" "engine" "facts" "homes" "open";
  }
  .sr-set .sr-homes {
    margin-top: 12px;
  }
  .sr-set .sr-open {
    margin-top: 14px;
  }
  /* The Suite */
  .suite-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* The Dashboard */
  .dash-kinds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dc-knob {
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    font-size: 15px;
  }
  .dc-tag {
    bottom: 12px;
    padding: 5px 10px;
    font-size: 11px;
  }
  .dc-tag.is-dark {
    left: 12px;
  }
  .dc-tag.is-light {
    right: 12px;
  }
  /* Kit In One Scan */
  .kit-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .kit-list li {
    padding: 16px 0;
  }
  /* Standards */
  .help-row {
    margin-top: 70px;
  }
  .help-title {
    font-size: 30px;
  }
  .help-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .help-card {
    padding: 32px 26px 30px;
  }
  .bento {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }
  .bento-tile.is-code,
  .bento-tile.is-ruler,
  .bento-tile.is-docs {
    grid-column: auto;
  }
  .bt-code {
    font-size: 13px;
    padding: 20px;
  }
}

/*======================
Max Width 575px
========================*/
@media (max-width: 575.98px) {
  /* General */
  .sec-pt-130 {
    padding-top: 72px;
  }
  .sec-pb-130 {
    padding-bottom: 72px;
  }
  .ho-btn {
    height: 54px;
    padding: 0 24px;
  }
  /* Preloader */
  .ho-preloader {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .ho-preloader .pre-word {
    font-size: 11px;
  }
  /* Header */
  .ho-logo img,
  .ho-header.sticky-on .ho-logo img {
    height: 44px;
  }
  .ho-menu-toggle {
    width: 46px;
    height: 46px;
  }
  /* Hero */
  .ho-hero {
    padding: 120px 0 56px;
  }
  .hero-actions .ho-btn {
    width: 100%;
  }
  .hero-bar {
    gap: 12px;
  }
  .slider-nav {
    width: 46px;
    height: 46px;
  }
  .ho-hero .wall-cols {
    width: 240%;
    right: -150%;
  }
  /* Brand Wall */
  .brand-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .brand-tile.is-wide {
    flex-direction: column;
    gap: 12px;
  }
  .brand-tile.is-wide img {
    max-width: 80%;
    height: 32px;
  }
  .brand-tile {
    min-height: 124px;
  }
  .brand-tile img {
    height: 36px;
  }
  /* Pillars Marquee */
  .ho-marquee {
    padding: 24px 0;
  }
  .mq-word {
    font-size: 46px;
  }
  .mq-disc {
    width: 18px;
    height: 18px;
  }
  /* Pillars */
  .pillars-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .pillar {
    min-height: 0;
  }
  .pillar .pl-letter {
    font-size: 190px;
  }
  .pl-fig {
    margin-top: 30px;
  }
  .pl-fig .fig {
    font-size: 46px;
  }
  /* Showroom */
  /* two columns of names on a phone, so the window follows five rows, not ten */
  .sr-list {
    column-gap: 14px;
  }
  .sr-item {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 6px;
  }
  .sr-item.is-active {
    padding-left: 8px;
  }
  .sr-name {
    font-size: 16px;
  }
  .sr-niche {
    display: none;
  }
  .sr-item {
    padding-top: 10px;
    padding-bottom: 11px;
  }
  /* The Suite */
  .suite-leaf.is-la,
  .suite-leaf.is-ra {
    width: 130px;
  }
  .suite-leaf.is-lb,
  .suite-leaf.is-rb {
    width: 150px;
  }
  .suite-leaf.is-la {
    left: -46px;
    top: 330px;
  }
  .suite-leaf.is-lb {
    left: -80px;
    top: 420px;
  }
  .suite-leaf.is-ra {
    right: -46px;
    top: 560px;
  }
  .suite-leaf.is-rb {
    right: -80px;
    top: 990px;
  }
  .suite-tab {
    padding: 9px 14px;
    font-size: 14px;
  }
  /* The Dashboard */
  .dt-num {
    font-size: 104px;
  }
  .dash-total {
    gap: 14px;
  }
  .dash-pages {
    grid-template-columns: minmax(0, 1fr);
  }
  .dc-frame {
    padding: 0 8px 8px;
  }
  .dc-frame .shot-url {
    display: none;
  }
  /* Engine Room */
  .desk-form .df-head {
    padding: 28px 22px 4px;
  }
  .desk-form .df-grid {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px 22px 28px;
  }
  .desk-quote {
    padding: 28px 22px;
  }
  .desk-form .df-head h3 {
    font-size: 26px;
  }
  .desk-tab .dt-from {
    font-size: 12.5px;
  }
  /* Kit In One Scan */
  .ho-kit {
    padding-bottom: 150px;
  }
  .kit-limo {
    width: 240px;
  }
  .kit-jet {
    left: -6%;
    top: -40px;
    width: 240px;
  }
  /* Standards */
  /* a phone: smaller shots and faces, so both rows fit the card */
  .help-shots,
  .help-faces {
    height: 70px;
  }
  .help-shots .shot-frame {
    width: 84px;
  }
  .help-shots .shot-frame + .shot-frame {
    margin-left: -34px;
  }
  .help-shots .shot-frame:nth-child(even) {
    transform: translateY(10px);
  }
  .help-faces img,
  .hf-more {
    width: 46px;
    height: 46px;
  }
  .help-faces img + img,
  .hf-more {
    margin-left: -11px;
  }
  .hf-more {
    font-size: 17px;
  }
  /* Footer */
  .ho-standards {
    padding-bottom: 142px;
  }
  .footer-brands {
    margin-top: -70px;
  }
  .footer-widget-area {
    padding-bottom: 120px;
  }
  .footer-homes {
    margin-top: -70px;
    padding-bottom: 36px;
  }
  .fh-progress.swiper-pagination-progressbar {
    margin-top: 26px;
  }
  .fb-tile {
    height: 140px;
  }
  .acro-line {
    column-gap: 24px;
    font-size: 30px;
  }
  .copyright-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-promise {
    padding: 16px 0;
  }
  .pr-item {
    padding: 0 20px;
    font-size: 16px;
  }
  /* Back To Top */
  .ho-back-to-top {
    right: 18px;
    bottom: 18px;
    width: 50px;
    height: 50px;
  }
}