@charset "utf-8";

/*
Theme Name: Pawtel - Pet Hotel & Boarding HTML5 Template.
Author: Metropolitanthemes
Author URL: https://themeforest.net/user/metropolitantheme
Version: 1.0.0

%%%%%%% Responsive Breakpoints %%%%%%%

1. Large Desktop  (max-width: 1399px)
2. Desktop        (max-width: 1199px)
3. Tablet         (max-width: 991px)
4. Mobile         (max-width: 767px)
5. Small Mobile   (max-width: 575px)
*/

/*======================
1. Large Desktop (max-width: 1399px)
========================*/
@media (max-width: 1399px) {
  .sec-pt-120 { padding-top: 100px; }
  .sec-pb-120 { padding-bottom: 100px; }
  .pw-hero { padding: 80px 0 190px; }
  .pw-nav > ul > li > a { padding: 34px 11px; font-size: 15px; }
  .pw-header .header-call { display: none; }
  .pw-hero .hero-sticker-1 { left: -20px; }
  .pw-welcome .wc-badge { left: -10px; width: 112px; height: 112px; }
  .pw-welcome .wc-badge strong { font-size: 30px; }
  .pw-tour .tour-fact { left: -16px; }
  .su-grid { grid-auto-rows: 228px; }
}

/*======================
2. Desktop (max-width: 1199px)
========================*/
@media (max-width: 1199px) {
  .sec-pt-120 { padding-top: 90px; }
  .sec-pb-120 { padding-bottom: 90px; }
  .pw-hero { padding: 70px 0 180px; }
  .pw-hero.hero-two { padding: 120px 0 180px; }
  .op-shell { grid-template-columns: 240px 1fr; }
  .sd-specs { grid-template-columns: repeat(2, 1fr); }
  .pw-header .header-inner { min-height: 84px; }
  .pw-header .header-call { display: none; }
  /* Eight items will not fit a 960px container - offcanvas takes over */
  .pw-nav { display: none; }
  .pw-booking { grid-template-columns: 260px 1fr; }
  .pw-booking .booking-aside { padding: 38px 30px; }
  .pw-booking .booking-panel { padding: 38px 32px; }
  .pw-welcome .wc-body { padding-left: 0; }
  .pw-welcome .wc-grid { gap: 20px; }
  .pw-why .why-body { padding-right: 0; }
  /* The card is taller than any sensible photograph here, so it drops out of
     the collage and sits under the picture instead of floating on it. */
  .pw-spaces .facility-stage { padding-bottom: 54px; }
  .pw-spaces .facility-slider .swiper-slide { height: 400px; }
  .pw-spaces .facility-overlay { bottom: auto; height: 400px; }
  .pw-spaces .facility-wrap { position: relative; top: auto; right: auto; bottom: auto; left: auto; display: block; pointer-events: auto; }
  .pw-spaces .facility-nav { position: static; margin-top: 28px; justify-content: center; }
  .facility-card { max-width: 100%; margin-top: -92px; padding: 34px 32px; }
  .facility-rail { position: static; padding: 34px 0 0; background: none; }
  .facility-thumbs { gap: 12px; }
  .facility-thumb { background-color: var(--pw-color-white); border-color: var(--pw-color-border); color: var(--pw-color-ink); }
  .facility-thumb .th-label { color: var(--pw-color-ink); }
  .facility-thumb .th-num { color: var(--pw-color-muted); }
  .facility-thumb:hover { background-color: var(--pw-color-white); border-color: var(--pw-color-primary); }
  .facility-thumbs li.is-active .facility-thumb { background-color: var(--pw-color-primary); border-color: var(--pw-color-primary); }
  .facility-thumbs li.is-active .th-label { color: var(--pw-color-white); }
  .facility-thumbs li.is-active .th-num { color: rgba(var(--pw-color-white-rgb), 0.6); }
  .day-card { flex: 0 0 300px; }
  .pw-cta { padding: 110px 0; }
  .pw-stats { padding: 80px 0; }
  .st-item .st-value { font-size: 42px; }
  .pw-social-strip a { min-height: 96px; font-size: 16px; }
  .pw-footer .footer-top { padding: 84px 0 50px; }
}

/*======================
3. Tablet (max-width: 991px)
========================*/
@media (max-width: 991px) {
  .sec-pt-120 { padding-top: 80px; }
  .sec-pb-120 { padding-bottom: 80px; }
  body { font-size: 16px; }
  /* The topbar gives way; the nav already did at 1199 */
  .pw-topbar { display: none; }
  .pw-header .header-inner { min-height: 78px; }
  .pw-hero { padding: 60px 0 170px; text-align: center; }
  .pw-hero.hero-two { padding: 100px 0 170px; }
  .pw-hero.hero-two .hero-prev { left: 16px; }
  .pw-hero.hero-two .hero-next { right: 16px; }
  .pw-hero.hero-two .hero-facts { gap: 22px 40px; padding-top: 32px; margin-top: 42px; }
  .op-shell { grid-template-columns: 1fr; }
  .op-side { position: static; }
  .gal-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 224px; }
  .bk-steps .bk-label { font-size: 13.5px; }
  .ps-nav { grid-template-columns: 1fr; }
  .pw-rail { position: static; }
  .pw-hero .hero-lead { margin-left: auto; margin-right: auto; }
  .pw-hero .hero-actions,
  .pw-hero .hero-trust { justify-content: center; }
  .pw-hero .hero-visual { margin-top: 56px; padding: 30px 20px; max-width: 520px; margin-left: auto; margin-right: auto; }
  .pw-hero .hero-ring { display: none; }
  .pw-booking { grid-template-columns: 1fr; margin-top: -120px; }
  .pw-booking .booking-aside { padding: 34px 32px; }
  .pw-booking .booking-aside .aside-dots { display: none; }
  .pw-welcome .wc-visual { max-width: 540px; margin: 0 auto 52px; }
  .pw-welcome .wc-grid { margin: 32px 0 34px; }
  .pw-suites .su-head { flex-direction: column; align-items: flex-start; }
  .su-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 216px; }
  .su-box.su-wide { grid-column: span 2; }
  .su-box.su-tall { grid-row: span 1; }
  .pw-why .why-body { margin-bottom: 48px; }
  .pw-why .why-stats { gap: 34px; }
  .wp-row .wp-count { font-size: 46px; }
  .pw-day .day-viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .pw-day .day-track { padding-bottom: 8px; }
  .day-card { flex: 0 0 300px; scroll-snap-align: start; }
  .pw-spaces .facility-slider .swiper-slide { height: 340px; }
  .pw-spaces .facility-overlay { height: 340px; }
  .pw-spaces .facility-head { padding-bottom: 42px; }
  .pw-tour .tour-media { margin-top: 52px; }
  .pw-tour .tour-dots { display: none; }
  .pw-tour .tour-play { width: 78px; height: 78px; font-size: 19px; }
  .pw-cta { padding: 96px 0; }
  .pw-cta p { font-size: 17px; }
  .pw-social-strip { grid-template-columns: repeat(2, 1fr); }
  .pw-social-strip .sc-x { grid-column: span 2; }
  .pw-footer .footer-top { padding: 74px 0 40px; }
  .pw-footer .footer-bottom .bottom-inner { justify-content: center; text-align: center; }
}

/*======================
4. Mobile (max-width: 767px)
========================*/
@media (max-width: 767px) {
  .sec-pt-120 { padding-top: 70px; }
  .sec-pb-120 { padding-bottom: 70px; }
  :root {
    --pw-radius: 20px;
    --pw-radius-sm: 14px;
  }
  .pw-hero { padding: 48px 0 160px; }
  .pw-hero.hero-two { padding: 80px 0 160px; }
  .pw-hero.hero-two .hero-nav button { width: 46px; height: 46px; font-size: 14px; }
  .pw-hero.hero-two .hero-facts strong { font-size: 30px; }
  .bk-addons { grid-template-columns: 1fr; }
  .sd-specs { gap: 14px; }
  .ps-figures { grid-template-columns: 1fr; }
  .ps-author { flex-direction: column; gap: 18px; }
  .comment-item.is-reply { margin-left: 26px; }
  .op-gallery { grid-template-columns: repeat(2, 1fr); }
  .pw-subheader { padding: 56px 0 60px; }
  .pw-hero .hero-trust { flex-direction: column; gap: 12px; }
  .pw-hero .hero-sticker-1 { left: 0; top: 2%; }
  .pw-hero .hero-sticker-2 { right: 0; bottom: 2%; }
  .pw-hero .hero-orb-1, .pw-hero .hero-orb-2, .pw-hero .hero-dots { display: none; }
  .pw-booking { margin-top: -116px; border-radius: 26px; }
  .pw-booking .booking-panel { padding: 30px 24px; }
  .pw-booking .booking-foot { flex-direction: column; align-items: stretch; }
  .pw-booking .booking-submit { justify-content: center; }
  .pw-booking .booking-aside { padding: 30px 26px; }
  .pw-welcome .wc-grid { grid-template-columns: 1fr; }
  .pw-welcome .wc-img-sub { width: 52%; }
  .pw-welcome .wc-badge { width: 96px; height: 96px; left: 0; }
  .pw-welcome .wc-badge strong { font-size: 26px; }
  .pw-welcome .wc-badge span { font-size: 12px; }
  .pw-tabs .nav-link { padding: 11px 20px; font-size: 15px; }
  .su-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .su-box.su-wide { grid-column: span 1; }
  .su-box .pw-round-link { opacity: 1; transform: none; }
  .wp-row { flex-direction: column; gap: 18px; padding: 26px 24px; }
  .wp-row .wp-count { font-size: 40px; top: 18px; }
  .wp-row:hover { transform: none; }
  .pw-why .why-stats { gap: 26px 34px; }
  .pw-why .why-stats .st-value { font-size: 34px; }
  .day-card { flex: 0 0 268px; }
  .pw-spaces .facility-slider .swiper-slide { height: 290px; }
  .pw-spaces .facility-overlay { height: 290px; }
  .facility-card { padding: 30px 26px; border-radius: 24px; }
  .facility-card .facility-count { right: 24px; }
  .pw-tour .tour-fact { left: 0; bottom: -20px; }
  .pw-tour .tour-media { border-width: 8px; }
  .pw-stats { padding: 64px 0; }
  .st-item { margin-bottom: 34px; }
  .st-item i { width: 62px; height: 62px; font-size: 22px; }
  .st-item .st-value { font-size: 38px; }
  .pw-cta { padding: 80px 0; }
  .pw-cta .cta-actions { flex-direction: column; align-items: stretch; }
  .pw-cta .cta-actions .pw-btn { justify-content: center; }
  .pw-footer .footer-top { padding: 64px 0 30px; }
  .pw-backtop { right: 18px; bottom: 18px; width: 46px; height: 46px; }
}

/*======================
5. Small Mobile (max-width: 575px)
========================*/
@media (max-width: 575px) {
  .sec-pt-120 { padding-top: 60px; }
  .sec-pb-120 { padding-bottom: 60px; }
  :root {
    --pw-fs-h3: 21px;
    --pw-fs-h4: 19px;
  }
  .pw-btn { padding: 15px 26px; font-size: 15px; }
  .pw-hero { padding: 40px 0 150px; }
  .pw-hero.hero-two { padding: 64px 0 150px; }
  .pw-hero.hero-two .hero-facts { flex-direction: column; gap: 20px; }
  .gal-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .gal-item.is-tall { grid-row: span 1; }
  .bk-steps .bk-label { display: none; }
  .bk-steps .bk-dot { width: 44px; height: 44px; font-size: 15px; }
  .bk-panel { padding: 26px 22px; }
  .calc-form, .calc-out { padding: 28px 24px; }
  .auth-card { padding: 34px 26px; }
  .countdown .cd-cell { min-width: 104px; padding: 18px 14px; }
  .countdown .cd-value { font-size: 34px; }
  .comment-item { flex-direction: column; gap: 14px; }
  .sd-specs { grid-template-columns: 1fr; }
  .pw-pagination a, .pw-pagination span { min-width: 42px; height: 42px; }
  .pw-hero .hero-tag { font-size: 14px; padding: 9px 18px 9px 10px; }
  .pw-hero .hero-actions { flex-direction: column; align-items: stretch; }
  .pw-hero .hero-actions .pw-btn { justify-content: center; }
  .pw-hero .hero-visual { padding: 24px 10px; }
  .pw-hero .hero-photo { border-width: 8px; }
  .pw-hero .trust-faces img { width: 44px; height: 44px; }
  .pw-sticker { padding: 11px 15px; gap: 10px; }
  .pw-sticker i { width: 34px; height: 34px; font-size: 13px; }
  .pw-sticker .s-value { font-size: 16px; }
  .pw-sticker .s-label { font-size: 12px; }
  .pw-booking { margin-top: -112px; }
  .pw-sec-title .title-tag { font-size: 13px; padding: 8px 16px 8px 9px; }
  .pw-welcome .wc-visual { padding-bottom: 46px; }
  .pw-welcome .wc-img-sub { width: 58%; border-width: 7px; }
  .su-grid { grid-auto-rows: 216px; }
  .su-box { padding: 22px; }
  .day-card { flex: 0 0 240px; padding: 18px; }
  .pw-day .day-track { gap: 18px; }
  .pw-spaces .facility-slider .swiper-slide { height: 250px; }
  .pw-spaces .facility-overlay { height: 250px; }
  .pw-arrow-nav button { width: 44px; height: 44px; }
  .ts-card { padding: 28px 24px; }
  .pw-offcanvas { padding: 26px 24px 34px; }
  .pw-offcanvas .oc-links { columns: 1; }
  .pw-social-strip { grid-template-columns: 1fr; }
  .pw-social-strip .sc-x { grid-column: span 1; }
  .pw-social-strip a { min-height: 76px; }
  .pw-footer .footer-bottom .bottom-links { gap: 16px; justify-content: center; }
}