@charset "utf-8";

/*
Theme Name: Dentora - Dentist & Dental Clinic HTML5 Template.
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) {
  /* Header */
  .dt-nav > ul {
    gap: 26px;
  }
  .split-items li {
    padding: 0 18px;
  }
  /* Hero */
  .hero-inset {
    width: 360px;
  }
  /* Services And Booking */
  .book-inner {
    max-width: 570px;
  }
  /* Home 02 Cosmetic */
  .cascade-col { width: 200px; }
  .cascade-col:nth-child(1) { width: 170px; }
  .cascade-col:nth-child(3) { width: 220px; }
  .cascade-col:nth-child(4) { width: 180px; }
  .cascade-col:nth-child(6) { width: 210px; }
  /* Home 03 Family */
  .tiles-side .dt-avatars {
    display: none;
  }
  /* Inner Pages */
  .dt-week th,
  .dt-week td {
    padding: 16px 10px;
  }
  .wk-who {
    min-width: 0;
  }
  .wk-who small {
    display: none;
  }
}

/*======================
Max Width 1199px
========================*/
@media (max-width: 1199.98px) {
  /* General */
  .dt-pt-120 { padding-top: 100px; }
  .dt-pb-120 { padding-bottom: 100px; }
  /* Header */
  .dt-nav,
  .split-items,
  .split-book,
  .top-social {
    display: none;
  }
  .dt-menu-toggle {
    display: inline-flex;
  }
  /* the split header folds into its menu row: the compact logo and the round actions */
  .is-split .split-info {
    display: none;
  }
  .is-split .dt-logo.is-compact {
    display: block;
    width: 150px;
  }
  .is-split .header-inner {
    height: var(--dt-header-h);
  }
  /* Hero */
  .dt-hero .hero-swiper .swiper-slide {
    min-height: 760px;
    padding: 170px 0 200px;
  }
  .hero-inset {
    width: 320px;
  }
  /* Services And Booking */
  .book-inner {
    max-width: 480px;
    padding: 0 40px 0 12px;
  }
  .mosaic-grid {
    gap: 22px;
  }
  /* Home Bands */
  .visit-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    min-height: 0;
  }
  .visit-card .visit-photo {
    grid-row: auto;
    grid-column: auto;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 8;
  }
  /* Emergency And Contact */
  .always-card {
    width: 340px;
  }
  /* Home 02 Cosmetic */
  .studio-prints {
    max-width: 520px;
  }
  .zig-row,
  .zig-row.is-flip {
    gap: 50px;
  }
  .csplit-inner {
    padding: 90px 50px;
  }
  .compare-inner {
    max-width: 570px;
    padding: 100px 50px 100px 12px;
  }
  .shade-tool {
    padding: 30px;
  }
  /* Home 03 Family */
  .info-tile {
    flex-direction: column;
    gap: 18px;
    padding: 30px 26px;
  }
  .shop-panel-inner {
    max-width: 570px;
    padding: 90px 40px 90px 12px;
  }
  .dt-product-card.is-feature {
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 20px;
  }
  .procedure-inner {
    padding: 90px 50px;
  }
  .split-services-copy {
    padding-left: 0;
  }
  /* Inner Pages */
  .dt-week .wk-who img {
    width: 42px;
    height: 42px;
  }
  .wk-in {
    white-space: normal;
  }
  .brush-split-inner {
    max-width: 570px;
    padding: 90px 40px 90px 12px;
  }
  .dt-calc,
  .dt-trip-box {
    padding: 36px;
  }
  .profile-copy {
    padding-left: 0;
  }
  /* Booking Shop And Account */
  .time-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .account-form {
    padding: 50px 40px;
  }
  .pd-info {
    padding-left: 0;
  }
}

/*======================
Max Width 991px
========================*/
@media (max-width: 991.98px) {
  /* General */
  .dt-pt-120 { padding-top: 90px; }
  .dt-pb-120 { padding-bottom: 90px; }
  .dt-section-title {
    margin-bottom: 44px;
  }
  .dt-section-head {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 44px;
  }
  /* Subheader */
  .dt-subheader {
    padding: calc(var(--dt-header-h) + 50px + 80px) 0 90px;
  }
  /* Hero */
  .dt-hero .hero-swiper .swiper-slide {
    min-height: 720px;
    padding: 150px 0 190px;
  }
  .hero-img::after {
    background:
      linear-gradient(0deg, rgba(var(--dt-night-rgb), 0.7) 0%, rgba(var(--dt-night-rgb), 0) 40%),
      linear-gradient(90deg, rgba(var(--dt-night-rgb), 0.88) 0%, rgba(var(--dt-ink-rgb), 0.6) 60%, rgba(var(--dt-ink-rgb), 0.3) 100%);
  }
  .hero-inset {
    width: auto;
    padding: 0;
    border-radius: var(--dt-r-leaf-sm);
  }
  .hero-inset .inset-swiper {
    display: none;
  }
  .inset-bar {
    padding: 8px 8px 8px 20px;
  }
  /* Services And Booking */
  .book-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .book-panel {
    justify-content: center;
    padding: 90px 0;
  }
  .book-inner {
    max-width: 720px;
    padding: 0 12px;
  }
  .book-photo {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }
  .mosaic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Home Bands */
  .video-top {
    padding: 90px 0 220px;
  }
  .video-frame {
    margin-top: -170px;
  }
  .visit-side {
    position: static;
  }
  .visit-card {
    top: 100px;
  }
  .visit-card:nth-child(2) { top: 116px; }
  .visit-card:nth-child(3) { top: 132px; }
  .visit-card:nth-child(4) { top: 148px; }
  .visit-card:nth-child(5) { top: 164px; }
  /* Emergency And Contact */
  .dt-always {
    padding: 110px 0 90px;
  }
  .always-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .map-frame {
    height: 460px;
  }
  /* Home 02 Cosmetic */
  .dt-studio {
    padding: 60px 0 90px;
  }
  .studio-prints {
    max-width: 560px;
    margin: 20px auto 0;
  }
  .zig-row,
  .zig-row.is-flip {
    grid-template-columns: minmax(0, 1fr);
  }
  .zig-row.is-flip {
    margin-top: 80px;
  }
  .zig-row.is-flip .zig-photos {
    order: 1;
  }
  .dt-contact-split,
  .dt-compare {
    grid-template-columns: minmax(0, 1fr);
  }
  .csplit-photo {
    min-height: 0;
    aspect-ratio: 957 / 700;
  }
  .csplit-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 90px 12px;
  }
  .compare-copy {
    justify-content: center;
  }
  .compare-inner {
    max-width: 720px;
    padding: 90px 12px;
  }
  .dt-ba {
    min-height: 0;
    aspect-ratio: 1300 / 760;
  }
  .bubble.b2,
  .bubble.b4 {
    display: none;
  }
  .cascade {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 12px;
  }
  .cascade-col,
  .cascade-col:nth-child(n) {
    width: auto;
    margin-top: 0;
    gap: 18px;
  }
  .cascade-col:nth-child(even) {
    margin-top: 50px;
  }
  /* Home 03 Family */
  .tiles-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .info-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
  .info-tile {
    flex-direction: row;
  }
  .dt-brush {
    height: auto;
  }
  .brush-stage {
    position: relative;
    height: auto;
    min-height: 0;
    padding: 90px 0;
  }
  .brush-clock {
    margin: 0 auto;
  }
  .dt-shop-split,
  .dt-procedure {
    grid-template-columns: minmax(0, 1fr);
  }
  .shop-panel {
    justify-content: center;
  }
  .shop-panel-inner {
    max-width: 720px;
    padding: 90px 12px;
  }
  .shop-photo {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .procedure-photo {
    min-height: 0;
    aspect-ratio: 927 / 640;
  }
  .procedure-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 90px 12px;
  }
  .termin-photo.is-alt {
    margin-top: 50px;
  }
  /* Inner Pages */
  /* the week: one card per dentist, the six days in a grid under the name */
  .table-wrap.is-cards {
    overflow: visible;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .dt-week thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .dt-week,
  .dt-week tbody,
  .dt-week th,
  .dt-week td {
    display: block;
  }
  .dt-week tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .dt-week tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 20px;
    border-radius: var(--dt-r-leaf-sm);
    background: var(--dt-surface);
    box-shadow: var(--dt-shadow-sm);
  }
  .dt-week tr th {
    grid-column: 1 / -1;
    padding: 0 0 8px;
    border-bottom: 0;
  }
  .dt-week td {
    padding: 10px 6px;
    border: 0;
    border-radius: 0 12px 0 12px;
    background: var(--dt-bg-alt);
  }
  .dt-week td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-family: var(--dt-ff-heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dt-muted);
  }
  .dt-week td .wk-in {
    padding: 0;
    background: transparent;
  }
  .dt-week td.is-today {
    background: var(--dt-ink);
  }
  .dt-week td.is-today::before,
  .dt-week td.is-today .wk-in,
  .dt-week td.is-today .wk-off {
    color: #FFFFFF;
  }
  .numbers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 40px;
  }
  .dt-brush-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .brush-split-copy {
    justify-content: center;
  }
  .brush-split-inner {
    max-width: 720px;
    padding: 90px 12px;
  }
  .brush-split-photo {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  .dt-visit-band {
    padding: 110px 0;
  }
  .dt-area-card.is-feature {
    padding: 40px 34px;
  }
  /* Booking Shop And Account */
  .wiz-summary,
  .cart-totals,
  .shop-side {
    position: static;
  }
  .day-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .account-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .account-side {
    min-height: 420px;
  }
  .map-frame.is-tall {
    min-height: 460px;
  }
  /* Footer */
  .cta-inner {
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    padding: 60px 0;
  }
}

/*======================
Max Width 767px
========================*/
@media (max-width: 767.98px) {
  /* General */
  .dt-pt-120 { padding-top: 80px; }
  .dt-pb-120 { padding-bottom: 80px; }
  .dt-pt-90 { padding-top: 70px; }
  .dt-pb-90 { padding-bottom: 70px; }
  .dt-lead {
    font-size: 17px;
  }
  :root {
    --dt-r-leaf: 50px 0 50px 0;
    --dt-r-leaf-alt: 0 50px 0 50px;
    --dt-r-leaf-md: 34px 0 34px 0;
    --dt-r-leaf-md-alt: 0 34px 0 34px;
  }
  /* Header */
  .dt-topbar .top-item:not(.dt-status),
  .head-book {
    display: none;
  }
  .top-end {
    width: 100%;
    justify-content: space-between;
  }
  .dt-logo {
    width: 150px;
  }
  :root {
    --dt-header-h: 80px;
  }
  /* Subheader */
  .dt-subheader {
    padding: calc(var(--dt-header-h) + 50px + 56px) 0 70px;
  }
  .sub-lead {
    font-size: 16.5px;
  }
  /* Hero */
  .hero-foot {
    bottom: 34px;
  }
  .hero-inset .inset-cap {
    display: none;
  }
  .inset-bar {
    padding: 8px;
  }
  .hero-lead {
    font-size: 17px;
  }
  /* Services And Booking */
  .dt-svc-card .svc-disc {
    width: 72px;
    height: 72px;
    margin: 0 22px -36px 0;
    font-size: 34px;
  }
  .book-panel {
    padding: 80px 0;
  }
  .mosaic-grid {
    gap: 16px;
  }
  .mosaic-text h3 {
    font-size: 20px;
  }
  /* Home Bands */
  .video-frame {
    aspect-ratio: 4 / 3;
  }
  .video-play {
    width: 80px;
    height: 80px;
    font-size: 20px;
  }
  .video-tag {
    left: 20px;
    bottom: 20px;
  }
  .dt-feature {
    padding: 22px 18px;
  }
  .visit-card {
    padding: 26px;
  }
  .visit-card .visit-photo {
    aspect-ratio: 16 / 10;
  }
  .quote-box {
    gap: 14px;
  }
  .quote-arrow {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  /* Home 02 Cosmetic */
  .shade-tabs {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    row-gap: 14px;
  }
  .shade-result {
    grid-template-columns: minmax(0, 1fr);
  }
  .dt-bubbles {
    padding: 120px 0;
  }
  .bubble.b1 { left: 4%; top: auto; bottom: 6%; width: 74px; height: 74px; }
  .bubble.b3 { right: 4%; top: 5%; width: 84px; height: 84px; }
  .bubble.b5 { left: 5%; top: 5%; width: 56px; height: 56px; }
  .bubble.b6 { right: 6%; bottom: 5%; width: 56px; height: 56px; }
  .emergency-card {
    padding: 34px 26px;
  }
  /* Home 03 Family */
  .tile-label {
    right: 22px;
    bottom: 18px;
    font-size: 19px;
  }
  .dt-product-card.is-feature {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Inner Pages */
  .dt-week tbody {
    grid-template-columns: minmax(0, 1fr);
  }
  /* the plans table: one card per class of treatment, the three plans side by side inside it */
  .table-wrap.is-cards .dt-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .table-wrap.is-cards .dt-table,
  .table-wrap.is-cards .dt-table tbody,
  .table-wrap.is-cards .dt-table th,
  .table-wrap.is-cards .dt-table td {
    display: block;
  }
  .table-wrap.is-cards .dt-table tbody {
    display: grid;
    gap: 14px;
  }
  .table-wrap.is-cards .dt-table tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 18px;
    border-radius: var(--dt-r-leaf-sm);
    background: var(--dt-surface);
    box-shadow: var(--dt-shadow-sm);
  }
  .table-wrap.is-cards .dt-table th {
    grid-column: 1 / -1;
    padding: 0 0 6px;
    border: 0;
    background: transparent;
  }
  .table-wrap.is-cards .dt-table td {
    padding: 10px 8px;
    border: 0;
    border-radius: 0 12px 0 12px;
    background: var(--dt-bg-alt);
    font-size: 16px;
  }
  .table-wrap.is-cards .dt-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--dt-muted);
  }
  .table-wrap.is-cards .dt-table tr.is-foot td {
    font-size: 14px;
  }
  .detail-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .who-badge {
    right: 10px;
    padding: 16px 20px;
  }
  .who-badge b {
    font-size: 40px;
  }
  .dt-calc,
  .dt-trip-box {
    padding: 28px 20px;
    border-radius: var(--dt-r-leaf-md);
  }
  .calc-result,
  .payplan-card {
    padding: 28px 22px;
  }
  .calc-head {
    font-size: 30px;
  }
  .payplan-monthly b {
    font-size: 46px;
  }
  .profile-foot {
    flex-direction: column;
    align-items: flex-start;
  }
  /* Booking Shop And Account */
  .wiz-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wiz-done {
    padding: 34px 24px;
  }
  .cart-head {
    display: none;
  }
  .cart-line {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    padding: 18px 0;
  }
  .cart-line .cl-total {
    text-align: end;
  }
  .cart-line .cl-product {
    grid-column: 1 / -1;
  }
  .cart-line .cl-price {
    display: none;
  }
  .shop-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .shop-sort {
    width: 100%;
  }
  .post-author {
    flex-direction: column;
  }
  .comment.is-reply {
    margin-left: 30px;
  }
  .post-quote {
    padding: 28px 24px;
  }
  .post-quote p {
    font-size: 20px;
  }
  /* Footer */
  .footer-main {
    padding: 70px 0 50px;
  }
  .cta-copy {
    padding-right: 110px;
  }
  .bottom-inner {
    flex-direction: column;
    text-align: center;
  }
}

/*======================
Max Width 575px
========================*/
@media (max-width: 575.98px) {
  /* General */
  .dt-pt-120 { padding-top: 70px; }
  .dt-pb-120 { padding-bottom: 70px; }
  .dt-btn {
    height: 52px;
    padding: 0 24px;
  }
  .row.g-5,
  .row.gx-5 {
    --bs-gutter-x: 1.5rem;
  }
  /* Header */
  .dt-header.is-light .header-actions .dt-lang,
  .dt-header.is-split .header-actions .dt-lang {
    display: none;
  }
  .dt-header.is-light .header-actions .dt-lang,
  .dt-header.is-split .header-actions .dt-lang {
    display: none;
  }
  .dt-header.is-light .header-actions .dt-lang,
  .dt-header.is-split .header-actions .dt-lang {
    display: none;
  }
  .dt-topbar [data-hs-text] {
    display: none;
  }
  /* Offcanvas And Bag Drawer */
  .dt-offcanvas {
    padding: 22px 22px 30px;
  }
  .dt-back-to-top {
    right: 16px;
    bottom: 16px;
  }
  /* Hero */
  .dt-hero .hero-swiper .swiper-slide {
    min-height: 700px;
    padding: 140px 0 150px;
  }
  .hero-title {
    font-size: clamp(30px, 8.4vw, 44px);
  }
  .hero-lead {
    margin: 20px 0 28px;
  }
  .hero-avatars {
    margin-top: 32px;
  }
  .dt-hero .hero-dots .swiper-pagination-bullet {
    width: 22px;
  }
  .dt-hero .hero-dots .swiper-pagination-bullet-active {
    width: 40px;
  }
  /* Services And Booking */
  .book-panel {
    padding: 70px 0;
  }
  .book-inner {
    padding: 0 16px;
  }
  .mosaic-text {
    padding: 0 4px;
  }
  .mosaic-text p {
    font-size: 14.5px;
  }
  /* Home Bands */
  .video-top {
    padding: 70px 0 170px;
  }
  .video-frame {
    margin-top: -130px;
  }
  .quote-box {
    flex-wrap: wrap;
    justify-content: center;
  }
  .quote-swiper {
    order: -1;
    flex-basis: 100%;
  }
  .team-ctrl .dt-link {
    margin-left: auto;
  }
  /* Emergency And Contact */
  .dt-always {
    padding: 90px 0 70px;
  }
  .always-card {
    width: 100%;
    padding: 24px;
  }
  .always-phone {
    font-size: 25px;
  }
  .map-frame {
    height: 420px;
  }
  .map-card {
    left: 14px;
    right: 14px;
    bottom: 14px;
    flex-wrap: wrap;
  }
  .contact-list li {
    font-size: 16px;
  }
  /* Home 02 Cosmetic */
  .studio-title {
    font-size: clamp(30px, 8.6vw, 42px);
  }
  .studio-lead {
    font-size: 17px;
  }
  .studio-controls {
    margin-top: 40px;
  }
  .print img {
    top: 8px;
    left: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
  }
  .print.is-polaroid img {
    height: calc(100% - 46px);
  }
  .print-note {
    bottom: 8px;
    font-size: 13px;
  }
  .shade-tool {
    padding: 22px 16px;
  }
  .shade-tabs {
    gap: 4px;
  }
  .shade-tooth .tooth {
    width: 80px;
  }
  .zig-photos {
    gap: 16px;
  }
  .cascade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .cascade-col,
  .cascade-col:nth-child(n) {
    gap: 14px;
  }
  /* Home 03 Family */
  .tiles-title {
    font-size: clamp(28px, 8vw, 40px);
  }
  .tiles-arrows {
    display: none;
  }
  .dt-tiles .tiles-dots.rail-dots {
    display: flex;
    margin-top: 18px;
  }
  .info-tile {
    flex-direction: column;
    padding: 28px 22px;
  }
  .info-tile.is-mint,
  .info-tile.is-sky {
    border-radius: 0 50px 0 50px;
  }
  .post-title {
    font-size: 21px;
  }
  .termin-photos {
    gap: 16px;
  }
  /* Inner Pages */
  .numbers-grid {
    gap: 30px 16px;
  }
  .number {
    padding-left: 16px;
  }
  .pair-photos {
    gap: 14px;
  }
  .pair-photo.is-alt {
    margin-top: 40px;
  }
  .pl-name {
    font-size: 17px;
  }
  .pl-price {
    font-size: 19px;
  }
  .side-card {
    padding: 24px 20px;
  }
  .dt-faq-item summary {
    padding: 18px 20px;
    font-size: 17px;
  }
  .faq-answer {
    padding: 0 20px 18px;
  }
  /* Booking Shop And Account */
  .day-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .time-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .wiz-title {
    font-size: 25px;
  }
  .account-form {
    padding: 36px 22px;
  }
  .account-over {
    padding: 100px 24px 28px;
  }
  .soon-count {
    gap: 8px;
  }
  .soon-count b {
    font-size: 32px;
  }
  .post-tip {
    flex-direction: column;
  }
}