@media (max-width: 767.98px) {
    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    body {
        position: relative;
    }
    *, *::before, *::after {
        box-sizing: border-box;
    }
    img, svg, video, iframe {
        max-width: 100%;
    }
    .container,
    .container-fluid {
        width: 100%;
        max-width: 100%;
    }
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    section {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }
    section + section::before {
        left: 0;
        width: 100%;
        height: 24px;
        top: -12px;
        background-size: 100% 100%;
    }
    .section-padding {
        padding: 70px 0;
    }
    .section-dark {
        padding: 70px 0;
    }
    .section-title {
        margin-bottom: 35px;
        padding: 0 10px;
    }
    .section-title h2 {
        margin-bottom: 15px;
        font-size: 2rem;
        line-height: 1.2;
        letter-spacing: -0.5px;
    }
    .section-text {
        max-width: 100%;
        padding: 0 10px;
        font-size: 0.9rem;
        line-height: 1.7;
    }
    .row {
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 1.5rem;
    }
    .row > * {
        min-width: 0;
    }
    .user-account-sidebar {
        width: min(92vw, 380px) !important;
    }
    .user-account-sidebar .offcanvas-header {
        padding: 18px;
    }
    .user-account-sidebar .offcanvas-body {
        padding: 18px;
    }
    .user-appointment-card {
        padding: 14px;
    }
    .user-appointment-card-header {
        gap: 8px;
    }
    .user-appointment-card-header strong {
        font-size: 13px;
    }
    .user-appointment-status {
        font-size: 8px;
        padding: 5px 7px;
    }
    p, h1, h2, h3, h4, h5, h6 {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
    .table-responsive {
        max-width: 100%;
        overflow-x: auto;
    }
    .custom-navbar .container {
        position: relative;
    }
    .custom-navbar .navbar-toggler {
        order: 3;
        flex: 0 0 42px;
        margin-left: 8px;
    }
    .custom-navbar .header-user-account {
        order: 2;
        flex: 0 0 42px;
        margin-left: auto;
    }
    .custom-navbar .navbar-collapse {
        order: 4;
        flex: 0 0 100%;
        width: 100%;
        margin-top: 10px;
        padding: 10px 0 6px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
    .custom-navbar .navbar-brand {
        order: 1;
        flex: 0 0 auto;
    }
    .navbar-brand {
        margin: 0;
    }
    .navbar-brand img {
        width: 120px;
        height: 56px;
        object-fit: fill;
    }
    .navbar-toggler {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        padding: 0;
        margin-left: 8px;
        color: var(--white);
        font-size: 1.35rem;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 6px;
        transition:
            color 0.2s ease,
            border-color 0.2s ease,
            background-color 0.2s ease;
    }
    .navbar-toggler:hover,
    .navbar-toggler:focus {
        color: var(--silver);
        border-color: var(--silver);
        background: rgba(255, 255, 255, 0.05);
        box-shadow: none;
    }
    .navbar-nav {
        width: 100%;
        align-items: stretch;
    }
    .navbar-nav .nav-item {
        width: 100%;
    }
    .navbar-nav .nav-link {
        display: block;
        width: 100%;
        margin: 0;
        padding: 13px 5px;
        color: var(--text);
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .navbar-nav .nav-item:last-child .nav-link {
        border-bottom: none;
    }
    .navbar-nav .nav-link::after {
        display: none;
    }
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
        color: var(--silver);
    }
    .header-user-btn {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        font-size: 15px;
    }
    .user-dropdown-menu {
        min-width: 170px;
        margin-top: 8px;
    }
    .user-account-sidebar {
        width: min(92vw, 380px);
    }
    .user-sidebar-history-tabs {
        flex-wrap: wrap;
        gap: 5px;
    }
    .user-sidebar-history-tabs .nav-item {
        flex: 1 1 auto;
    }
    .user-sidebar-history-tabs .nav-link {
        width: 100%;
        font-size: 12px;
        padding: 8px 6px;
    }
    .user-appointment-card-header {
        gap: 10px;
    }
    .user-appointment-card-header > div:first-child {
        min-width: 0;
    }
    .user-appointment-card-header strong {
        word-break: break-word;
    }
    .user-appointment-datetime {
        flex-wrap: wrap;
    }
    .hero {
        min-height: 100svh;
        height: 100svh;
        padding: 90px 15px 70px;
        background-position: center center;
    }
    .hero-content {
        width: 100%;
        max-width: 100%;
        padding: 0 10px;
    }
    .hero-content .logo {
        width: 100%;
        margin-bottom: 28px;
    }
    .hero-content .logo .bold {
        margin-bottom: -5px;
    }
    .hero-content .logo .bold img {
        height: auto;
    }
    .hero-content .logo .bold .a {
        width: 55px;
        height: 58px;
    }
    .hero-content .logo .bold .r {
        width: 49px;
        height: 58px;
        margin-left: 6px;
    }
    .hero-content .logo .bold .t {
        width: 46px;
        height: 58px;
        margin-left: 6px;
    }
    .hero-content .logo .bold .e {
        width: 49px;
        height: 69px;
        margin-left: 6px;
    }
    .hero-content .logo .light .s {
        width: 27px;
        height: 21px;
    }
    .hero-content .logo .light .t {
        width: 22px;
        height: 21px;
    }
    .hero-content .logo .light .u {
        width: 28px;
        height: 21px;
    }
    .hero-content .logo .light .d {
        width: 28px;
        height: 21px;
    }
    .hero-content .logo .light .i {
        width: 12px;
        height: 21px;
    }
    .hero-content .logo .light .o {
        width: 28px;
        height: 21px;
    }
    .hero-content p {
        max-width: 340px;
        margin: 0 auto 28px;
        font-size: 0.85rem;
        line-height: 1.6;
    }
    .btn-book {
        padding: 13px 28px;
        font-size: 0.78rem;
        letter-spacing: 0.8px;
    }
    .scroll-down {
        bottom: 22px;
        font-size: 0.7rem;
        letter-spacing: 0.8px;
        gap: 7px;
    }
    .scroll-down i {
        font-size: 0.9rem;
    }
    #about {
        overflow: hidden;
    }
    #about .about-grid {
        display: flex;
        flex-direction: column;
        gap: 40px;
        align-items: stretch;
    }
    #about .about-copy {
        width: 100%;
    }
    #about .section-title {
        margin-bottom: 22px;
        text-align: center;
    }
    #about .section-title h2 {
        font-size: 1.9rem;
        line-height: 1.2;
    }
    #about .section-text {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        text-align: center;
        font-size: 0.88rem;
        line-height: 1.75;
    }
    #about .about-slider {
        width: 100%;
        min-height: 0;
        aspect-ratio: 4 / 3;
        box-shadow: 0 15px 35px rgba(18, 18, 18, 0.16);
    }
    #about .about-slider-arrow {
        width: 40px;
        height: 40px;
    }
    #about .about-slider-arrow i {
        font-size: 0.8rem;
    }
    #about .about-slider-prev {
        left: 10px;
    }
    #about .about-slider-next {
        right: 10px;
    }
    #team {
        overflow: hidden;
    }
    #team .section-title {
        margin-bottom: 35px;
    }
    #team .section-title h2 {
        font-size: 1.9rem;
        line-height: 1.2;
    }
    #team .row {
        --bs-gutter-y: 25px;
    }
    #team .team-card {
        width: 100%;
        padding: 22px !important;
        border-radius: 12px !important;
    }
    #team .team-header {
        align-items: center !important;
        gap: 15px !important;
    }
    #team .team-photo {
        flex: 0 0 72px;
        width: 72px;
        height: 92px;
        border-radius: 10%;
    }
    #team h3 {
        margin-bottom: 7px;
        font-size: 1.25rem;
        line-height: 1.25;
    }
    #team .team-position {
        margin-bottom: 7px;
        font-size: 0.78rem;
        line-height: 1.4;
    }
    #team .team-rating {
        margin-bottom: 0;
        font-size: 0.72rem;
        line-height: 1.4;
    }
    #team .team-rating i {
        font-size: 0.7rem;
    }
    #team .team-rating strong {
        font-size: 0.78rem;
    }
    #team .team-rating span {
        font-size: 0.68rem;
    }
    #team .team-description {
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 0.82rem;
        line-height: 1.7;
    }
    #team .portfolio-slider {
        height: auto;
        aspect-ratio: 4 / 3;
        margin: 20px auto 0;
        border-radius: 10px;
    }
    #team .portfolio-slide {
        flex: 0 0 100%;
        padding: 3px;
    }
    #team .portfolio-slide img {
        border-radius: 8px;
    }
    #team .portfolio-slider-arrow {
        width: 36px;
        height: 36px;
    }
    #team .portfolio-slider-arrow i {
        font-size: 0.75rem;
    }
    #team .portfolio-slider-prev {
        left: 9px;
    }
    #team .portfolio-slider-next {
        right: 9px;
    }
    #hours {
        overflow: hidden;
    }
    #hours .container {
        width: 100%;
    }
    #locationsHoursContainer {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;

        width: 100%;
    }
    .location-hours-card {
        width: 100%;
        border-radius: 14px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
    }
    .location-hours-map {
        width: 100%;
        height: 240px;
    }
    .location-hours-info {
        padding: 22px 18px 22px;
    }
    .location-hours-title {
        gap: 9px;
        margin-bottom: 9px;

        font-size: 1.25rem;
        line-height: 1.3;
    }
    .location-hours-title i {
        flex: 0 0 auto;
        font-size: 1rem;
    }
    .location-hours-address {
        align-items: flex-start;
        gap: 8px;

        margin-bottom: 22px;

        font-size: 0.78rem;
        line-height: 1.5;
    }
    .location-hours-address i {
        flex: 0 0 auto;
        margin-top: 2px;
        font-size: 0.75rem;
    }
    .location-hours-subtitle {
        gap: 8px;
        margin-bottom: 13px;

        font-size: 0.95rem;
    }
    .location-hours-subtitle i {
        font-size: 0.85rem;
    }
    .location-hours-list {
        gap: 7px;
        width: 100%;
        max-width: none;
    }
    .location-hours-row {
        gap: 15px;
        padding: 10px 12px;
        border-radius: 8px;
    }
    .location-hours-day {
        font-size: 0.76rem;
    }
    .location-hours-time {
        font-size: 0.76rem;
    }
    .locations-hours-empty,
    .locations-hours-loading {
        padding: 25px 15px;
        font-size: 0.82rem;
    }
    .location-map-empty {
        padding: 20px;
        text-align: center;
    }
    .location-map-empty i {
        font-size: 1.6rem;
    }
    #brands {
        overflow: hidden;
    }
    #brands .section-title {
        margin-bottom: 35px;
    }
    #brands .section-title h2 {
        font-size: 1.9rem;
        line-height: 1.25;
    }
    #brands .section-title::after {
        width: 45%;
        height: 1px;
        margin-top: 18px;
    }
    .brands-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
        width: 100%;
    }
    .brand-item {
        width: 100%;
        height: 90px;
        padding: 10px;
    }
    .brand-logo {
        width: 100%;
        max-width: 125px;
        height: 55px;
        object-fit: contain;
    }
    .brand-logo:hover {
        transform: none;
    }
    .footer {
        padding: 60px 0 25px;
    }
    .footer .container {
        width: 100%;
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
        padding-bottom: 35px;
    }
    .footer-brand {
        grid-column: auto;
        max-width: none;
    }
    .footer h3 {
        font-size: 1.6rem;
        margin-bottom: 15px;
    }
    .footer h4 {
        font-size: 1rem;
        margin-bottom: 18px;
    }
    .footer p {
        font-size: 0.9rem;
        line-height: 1.7;
    }
    .footer li {
        margin-bottom: 12px;
    }
    .footer-contact li {
        gap: 10px;
        font-size: 0.9rem;
    }
    .footer-contact li span,
    .footer-contact li a {
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .footer-social {
        margin-top: 22px;
    }
    .footer-social a {
        width: 40px;
        height: 40px;
    }
    .footer-button {
        padding: 13px 24px;
        font-size: 0.9rem;
    }
    .footer-payment {
        margin-top: 20px;
        gap: 10px;
        font-size: 0.85rem;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
        padding-top: 25px;
    }
    .footer-bottom p {
        font-size: 0.8rem;
        line-height: 1.6;
    }
    .footer-links {
        justify-content: center;
        gap: 10px 18px;
        font-size: 0.8rem;
    }
    .booking-modal {
        align-items: stretch;
        justify-content: stretch;
        padding: 0;
    }
    .booking-container {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border: 0;
        border-radius: 0;
    }
    .booking-header {
        flex-shrink: 0;
        padding: 20px 55px 18px 20px;
    }
    .booking-header h2 {
        font-size: 1.45rem;
        margin-bottom: 5px;
    }
    .booking-header p {
        font-size: 0.82rem;
        line-height: 1.45;
    }
    .booking-close {
        top: 14px;
        right: 14px;
        width: 38px;
        height: 38px;
    }
    .booking-content {
        overflow: hidden;
    }
    .booking-step {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .booking-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 18px;
        margin-bottom: 80px;
    }
    .location-choice,
    .staff-choice {
        min-height: 300px;
        border-radius: 14px;
    }
    .location-choice:hover,
    .staff-choice:hover {
        transform: none;
    }
    .location-choice-info,
    .staff-choice-overlay {
        padding: 20px;
    }
    .location-choice-info h3,
    .staff-choice-overlay h3 {
        font-size: 1.35rem;
    }
    .location-choice-info span {
        font-size: 0.85rem;
    }
    .location-choice-info small {
        font-size: 0.8rem;
    }
    .location-choice .booking-btn,
    .staff-choice .booking-btn {
        padding: 10px 24px;
    }
    .booking-actions {
        min-height: 65px;
        bottom: 0;
        background: rgba(11, 11, 11, 0.96);
        border-top: 1px solid var(--border);
        z-index: 10;
    }
    .booking-back {
        width: 145px;
        height: 65px;
        font-size: 15px;
        border-radius: 0 40px 40px 0;
    }
    .booking-columns {
        display: block;
        height: auto;
        min-height: 100%;
        overflow-y: auto;
        padding-bottom: 65px;
    }
    .services-panel {
        width: 100%;
        padding: 20px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
        overflow: visible;
    }
    .calendar-panel {
        width: 100%;
        padding: 20px;
        overflow: visible;
    }
    .services-panel h3,
    .calendar-panel h3,
    .booking-step h3 {
        font-size: 1.15rem;
        margin-bottom: 18px;
    }
    .service-item {
        padding: 15px;
        margin-bottom: 10px;
        border-radius: 10px;
    }
    .service-item strong {
        font-size: 0.95rem;
    }
    .service-item span {
        font-size: 0.82rem;
    }
    .addons-wrapper {
        margin-top: 22px;
        padding-top: 20px;
    }
    .addons-description {
        font-size: 0.82rem;
    }
    .addon-item {
        gap: 10px;
        padding: 13px;
        border-radius: 11px;
    }
    .addon-item input[type="checkbox"] {
        width: 19px;
        height: 19px;
    }
    .addon-info strong {
        font-size: 0.88rem;
    }
    .addon-info small {
        font-size: 0.75rem;
    }
    .addon-item > span {
        font-size: 0.75rem;
    }
    .addons-summary {
        gap: 10px;
        padding: 14px;
    }
    .addons-summary span {
        font-size: 0.72rem;
    }
    .addons-summary strong {
        font-size: 1rem;
    }
    .calendar-header {
        margin-bottom: 18px;
    }
    .calendar-header h3 {
        font-size: 1rem;
        margin: 0;
    }
    .calendar-header button {
        width: 36px;
        height: 36px;
        font-size: 23px;
    }
    .weekdays {
        gap: 4px;
        margin-bottom: 6px;
    }
    .weekdays div {
        font-size: 10px;
    }
    .calendar {
        gap: 5px;
        grid-auto-rows: 42px;
    }
    .calendar-day {
        height: 42px;
        border-radius: 8px;
        font-size: 0.82rem;
    }
    #stepTime {
        padding: 20px;
        padding-bottom: 85px;
    }
    #stepTime > h3 {
        font-size: 1.2rem;
        margin-bottom: 20px;
    }
    .time-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 9px;
    }
    .time-button {
        padding: 13px 6px;
        border-radius: 9px;
        font-size: 0.85rem;
    }
    #stepClient {
        padding: 20px;
        padding-bottom: 90px;
    }
    .booking-summary {
        gap: 8px;
        margin-bottom: 22px;
    }
    .booking-summary span {
        width: 100%;
        padding: 9px 13px;
        border-radius: 9px;
        font-size: 0.8rem;
    }
    .booking-form-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    #bookingForm label {
        font-size: 0.85rem;
        margin-bottom: 6px;
    }
    #bookingForm input,
    #bookingForm textarea {
        padding: 12px 13px;
        font-size: 0.9rem;
        border-radius: 8px;
    }
    #bookingForm textarea {
        min-height: 100px;
    }
    #stepClient .booking-actions {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        min-height: 65px;
        margin: 0;
        padding: 0;
        background: rgba(11, 11, 11, 0.97);
        border-top: 1px solid var(--border);
        z-index: 20;
    }
    #stepClient .booking-back {
        width: 125px;
        height: 65px;
    }
    #stepClient .booking-submit {
        width: auto;
        flex: 1;
        margin: 0 12px 0 10px;
        padding: 13px 16px;
        font-size: 0.9rem;
    }
}