/* ########################################################################################################## */
/* RESPONSIVE */
/* ########################################################################################################## */

/* TABLET */

@media (max-width: 1024px) {

    h1 {
        font-size: 1.6rem;
    }

    p,
    a {
        font-size: 1rem;
    }

    /* HEADER */

    .header-section {
        flex-direction: column;
        gap: 12px;
        padding: 12px 20px;
    }

    .nav-section {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        padding: 10px 20px;
    }

    /* HERO */

    .main-section {
        height: 450px;
    }

    /* CARDS */

    .section-section {
        flex-wrap: wrap;
        justify-content: center;
    }

    .lux-card {
        width: 320px;
    }

    /* WHY */

    .why-header h2,
    .gallery-header h2,
    .contact-header h2,
    .map-header h2,
    .booking-header h2,
    .about-content h2 {
        font-size: 46px;
    }

    /* ABOUT */

    .about-section {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 60px;
    }

    .about-image {
        display: flex;
        justify-content: center;
    }

    /* CONTACT */

    .contact-info {
        grid-template-columns: 1fr;
    }

    .form-wrapper {
        padding: 40px;
    }

    /* GALLERY */

    .gallery-grid {
        columns: 2;
    }

    /* BOOKING */

    .booking-meta {
        gap: 40px;
    }

    .auth-section {
        grid-template-columns: 1fr;
    }

    .auth-image {
        display: none;
    }

    .auth-box {
        padding: 60px 30px;
    }

    .profile-section {
        grid-template-columns: 1fr;
    }

    .profile-sidebar {
        padding: 40px 24px;
    }

    .profile-content {
        padding: 40px 28px;
    }

    .profile-header h1 {
        font-size: 42px;
    }

    .booking-history-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .booking-history-right {
        width: 100%;
    }

    .booking-action-btn,
    .booking-secondary-btn {
        width: 100%;
    }

    .cert-grid {
        grid-template-columns: 1fr;
    }

    .cert-card.featured {
        transform: none;
    }

    .cert-card.featured:hover {
        transform: translateY(-8px);
    }

    .cert-header h2 {
        font-size: 48px;
    }

    .admin-booking-form {
        grid-template-columns:
            repeat(2, 1fr);
    }
}



/* MOBILE */

@media (max-width: 768px) {

    body {
        overflow-x: hidden;
    }

    /* TYPOGRAPHY */

    .why-header h2,
    .gallery-header h2,
    .contact-header h2,
    .map-header h2,
    .booking-header h2,
    .about-content h2 {
        font-size: 38px;
        line-height: 1.2;
    }

    .booking-header p,
    .contact-header p,
    .gallery-header p,
    .map-header p,
    .why-header p {
        font-size: 16px;
    }

    /* HEADER */

    .header-section-row {
        flex-direction: column;
        gap: 10px;
    }

    .nav-section {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .nav-section-row {
        flex-wrap: wrap;
        justify-content: center;
    }

    .nav-link {
        padding: 8px;
    }

    /* HERO */

    .main-section {
        height: 320px;
    }

    /* SECTION */

    .section-section {
        padding: 10px;
    }

    .lux-card {
        width: 100%;
        max-width: 360px;
    }

    .lux-content h2 {
        font-size: 28px;
    }

    /* WHY */

    .why-section {
        padding: 80px 20px;
    }

    .why-grid {
        grid-template-columns: 1fr;
    }

    /* FOOTER */

    .footer-top {
        flex-direction: column;
        gap: 40px;
    }

    .footer-brand h2 {
        font-size: 30px;
    }

    /* GALLERY */

    .gallery-section {
        padding: 80px 20px;
    }

    .gallery-grid {
        columns: 1;
    }

    /* ABOUT */

    .about-section {
        padding: 80px 20px;
        gap: 40px;
    }

    .about-content p {
        font-size: 16px;
    }

    /* CONTACT */

    .contact-form-section {
        padding: 80px 20px;
    }

    .contact-header {
        padding: 80px 20px 60px;
    }

    .form-wrapper {
        padding: 28px;
        border-radius: 24px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .contact-card {
        padding: 28px;
    }

    /* MAP */
    .map-section {
        padding: 80px 20px;
    }

    .map-wrapper iframe {
        height: 400px;
    }

    /* BOOKING */
    .booking-container {
        padding: 0 20px 100px;
    }

    .booking-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
        padding: 28px;
    }

    .booking-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .booking-meta h3 {
        font-size: 28px;
    }

    .booking-btn {
        width: 100%;
    }

    .date-picker {
        flex-direction: column;
    }

    .auth-section {
        grid-template-columns: 1fr;
    }

    .auth-image {
        display: none;
    }

    .auth-box {
        padding: 40px 24px;
    }

    .auth-box {
        padding: 40px 20px;
    }

    .auth-form h2 {
        font-size: 40px;
    }

    .auth-tabs {
        width: 100%;
    }

    .auth-tab {
        flex: 1;
    }

    .profile-form {
        grid-template-columns: 1fr;
    }

    .profile-save-btn {
        width: 100%;
    }

    .profile-header h1 {
        font-size: 36px;
    }

    .profile-header p {
        font-size: 16px;
    }

    .profile-bookings-header h2 {
        font-size: 36px;
    }

    .booking-history-left h3 {
        font-size: 28px;
    }

    .cert-header h2 {
        font-size: 40px;
    }

    .cert-header p {
        font-size: 16px;
    }

    .cert-card img {
        height: 320px;
    }

    /* SERVICES */
    .lumiere-pricing {
        padding: 50px 18px;
    }

    .pricing-header h2 {
        font-size: 34px;
    }

    .service-item {
        padding: 16px 0;
    }

    .service-name {
        font-size: 15px;
    }

    .service-description {
        font-size: 12px;
    }

    .service-price {
        font-size: 15px;
        margin-left: 15px;
    }

    .public-price-list {
        margin: 35px auto;
        padding: 0 18px 60px;
    }

    .price-list-header {
        margin-bottom: 40px;
    }

    .price-list-header h1 {
        font-size: 40px;
    }

    .price-list-eyebrow {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .price-category {
        margin-bottom: 38px;
    }

    .price-category h2 {
        font-size: 23px;
    }

    .public-service-item {
        align-items: flex-start;

        gap: 15px;

        padding: 17px 2px;
    }

    .public-service-info h3 {
        font-size: 15px;
    }

    .public-service-info p {
        font-size: 13px;
    }

    .service-price {
        display: block;
        min-width: auto;
        text-align: right;
    }

    .service-current-price {
        font-size: 15px;
    }

    .service-old-price {
        display: block;
        margin: 0 0 3px;
        font-size: 12px;
    }

    .service-old-price-header {
        display: block;
        margin: 0 0 3px;
        font-size: 12px;
    }

    .admin-booking-header h2 {
        font-size: 42px;
    }

    .admin-booking-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-booking-right {
        width: 100%;
    }

    .admin-edit-btn,
    .admin-delete-btn {
        flex: 1;
    }

}

/* SMALL MOBILE */

@media (max-width: 480px) {

    .why-header h2,
    .gallery-header h2,
    .contact-header h2,
    .map-header h2,
    .booking-header h2,
    .about-content h2 {
        font-size: 32px;
    }

    .lux-content {
        padding: 22px;
    }

    .lux-content h2 {
        font-size: 24px;
    }

    .booking-meta h3 {
        font-size: 24px;
    }

    .footer {
        padding: 70px 20px 20px;
    }

    .profile-section {
        margin: 80px auto;
        padding: 0 16px;
    }

    .profile-content {
        padding: 32px 20px;
    }

    .profile-sidebar {
        border-radius: 24px;
    }

    .profile-content {
        border-radius: 24px;
    }

    .profile-avatar {
        width: 90px;
        height: 90px;
        font-size: 36px;
    }

    .profile-sidebar h2 {
        font-size: 26px;
    }

    .profile-header h1 {
        font-size: 30px;
    }

    .booking-history-card {
        padding: 24px;
        border-radius: 22px;
    }

    .profile-bookings-header h2 {
        font-size: 30px;
    }

    .booking-history-left h3 {
        font-size: 24px;
    }

    .cert-section {
        margin: 100px auto;
    }

    .cert-header h2 {
        font-size: 32px;
    }

    .cert-card {
        border-radius: 24px;
    }

    .cert-card img {
        border-radius: 18px;
    }

    .admin-booking-form {
        grid-template-columns: 1fr;
    }

    .admin-create-btn {
        width: 100%;
    }

    .admin-create-card {
        padding: 28px;
    }

    .admin-booking-item {
        padding: 24px;
    }

    .admin-booking-left h3 {
        font-size: 28px;
    }
}