/* rem and em do NOT depend on html font-size in media queries! Instead, 1rem = 1em = 16px */

:root {
    --dark-purple: #370075;
    --light-purple: #620097;
    --light-cream: #e2dada;
    --dark-yellow: #fdba31;
    --dark-orange: #e67e22;
    --dark-grey: #333333;
    --medium-grey: #636363;
    --light-grey: #eeeeee;
    --ash: #f4f4f4;
    --border: 1px solid var(--medium-grey);
    --shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.9), 0 6px 20px 0 rgba(0, 0, 0, 0.8);
}

/**************************/
/* BELOW 1344px (Smaller desktops) */
/**************************/

@media (max-width: 84em) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
    .small-image img {
        max-width: 20rem; /* Adjust the size of the small image */
        height: auto;
    }

    .adult-content-description {
        font-size: 2.4rem;
    }
}

/**************************/
/* BELOW 1200px (Landscape Tablets) */
/**************************/

@media (max-width: 75em) {
    html {
    /* 9px / 16px  */
        font-size: 56.25%;
    }

    .grid {
        column-gap: 4.8rem;
        row-gap: 6.4rem;
    }

    .heading-secondary {
        font-size: 3.6rem;
    }

    .heading-tertiary {
        font-size: 2.4rem;
    }

    .header {
        padding: 0 3.2rem;
    }

    .lightbox-content {
        width: 100%; /* Adjust the width as needed */
        max-width: fit-content;
        flex-direction: column;
        min-height: 60rem;
    }

    .left-column {
        display: none;
    }

    .right-column {
        margin: 0;
        padding: 5rem;
        background: linear-gradient(
        rgba(255, 255, 255, 0.6),
        rgba(255, 255, 255, 0.6)
        ),
        url("/images/adult-content-01.jpg"); /* Center the image */
        background-repeat: no-repeat; /* Do not repeat the image */
        background-size: cover; /* Resize the background image to cover the entire container */
    }
}

/**************************/
/* BELOW 944px (Tablets) */
/**************************/
@media (max-width: 59em) {
    .container-full-width {
        justify-content: flex-end;
    }

    .logo-header {
        left: 50%;
        margin-left: 0;
        transform: translate(-50%, 0%);
    }

    .container-navigation {
        padding: 1.2rem;
        width: auto;
        margin-right: 2rem;
    }

    #hamburger {
        display: block;
    }

    .menu {
        display: none;
        position: absolute;
        top: 25rem;
        left: 0;
        min-height: 100vh;
        width: 100vw;
    }

    .menu-bar li:first-child ul:nth-child(1) {
        border-right: none;
        border-bottom: var(--border);
    }

    .dropdown2 {
        display: none;
        min-width: 100%;
        border: none !important;
        border-radius: 5px;
        position: static;
        top: 0;
        left: 0;
        visibility: visible;
        opacity: 1;
        transform: none;
        box-shadow: none;
    }

    .menu.show,
    .dropdown2.active {
        display: block;
        background-color: var(--ash);
        z-index: 2;
    }

    .dropdown2 ul {
        padding-left: 0.3rem;
    }

    .menu-bar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        row-gap: 1rem;
        padding: 1rem;
    }

    .menu-bar .nav-link {
        display: flex;
        justify-content: space-between;
        width: 100%;
        font-weight: 600;
        font-size: 1.8rem;
        margin: 0;
        color: var(--dark-purple);
    }

    .menu-bar li:first-child .dropdown {
        min-width: 100%;
    }

    .menu-bar > li:not(:last-child) {
        padding-bottom: 0.5rem;
        border-bottom: var(--border);
    }

    .hero-images img {
        width: calc(100% / 1);
    }

    .section-benefits .container {
        flex-direction: column;
        gap: 4rem;
    }

    .benefits-container {
        width: auto;
        min-height: 64rem;
    }

    .gallery {
        grid-template-columns: repeat(6, 1fr);
    }

    .profile-header-avatar {
        display: none;
    }

    .profile-gallery .photo {
        grid-template-columns: repeat(2, 1fr);
        min-width: calc(100% / 2);
    }

    .profile-header-info-container {
        padding-left: 30rem;
    }
}

/**************************/
/* BELOW 870px (Tablets) */
/**************************/
@media (max-width: 55em) {
    .profile-header-title {
        padding-top: 6rem;
    }

    .profile-header-info {
        gap: 5rem;
    }

    .profile-header-avatar  {
        display: none !important;
    }

    .profile-header-info-container {
        padding-left: 10rem;
    }

    .profile-agency-banner {
        flex-direction: column;
    }
}

/**************************/
/* BELOW 704px (Smaller tablets) */
/**************************/

@media (max-width: 44em) {

    .grid--3-cols,
    .grid--4-cols {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--footer {
        grid-template-columns: repeat(6, 1fr);
    }

    .logo-col,
    .address-col {
        grid-column: span 3;
    }

    .nav-col {
        grid-row: 1;
        grid-column: span 2;
        margin-bottom: 3.2rem;
    }

    .profile-header-banner {
        height: fit-content;
    }

    .profile-header-banner-hero {
        width: 100%;
        height: 100%;
    }

    .profile-header-banner-sec {
        display: none;
    }

    .profile-header-info {
        flex-direction: column;
        gap: 0rem;
    }

    .stats-wrapper {
        gap: 1rem;
    }

    .stats-box {
        min-width: 25%;
    }

    .stats-box span.stats-num {
        font-size: 2rem;
    }

    .stats-box span.stats-label {
        font-size: 1.5rem;
    }
}

/**************************/
/* BELOW 544px (Phones) */
/**************************/

@media (max-width: 34em) {
    .grid {
        row-gap: 4.8rem;
    }

    .grid--2-cols,
    .grid--3-cols,
    .grid--4-cols {
        grid-template-columns: 1fr;
    }

    .gallery {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.2rem;
    }
    .breadcrumb {
        padding: 1.4rem 1rem;
        font-size: 1.8rem;
    }

    .section-profile-header {
        margin-top: 3rem;
    }

    .profile-header-info-container {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .profile-header-info-table {
        width: 98%;
        margin-bottom: 5rem;
    }

    .profile-header-avatar {
        display: none !important;
    }

    .listing-content {
        padding-top: 3rem;
        padding-right: 1rem;
        padding-left: 3rem;
        background-color: rgba(192, 129, 255, 0.13);
    }

    .profile-gallery-container {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .profile-services-container {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .services-tab-container {
        flex-direction: column;
    }

    .tab-container {
        flex-direction: column;
        border-left: none; /* Remove left border for mobile layout */
    }

    .tabs {
        flex-direction: row;
        align-items: baseline;
        overflow-x: auto; /* Enable horizontal scrolling for small screens */
        overflow-y: hidden;
        width: 100%;
    }

    .tab {
        padding: 10px 15px;
    }

    .tab.selected {
        border-right: none;
        border-bottom: 4px solid #e67e22;
    }

    .table-container {
        overflow-x: auto; /* Enable horizontal scrolling for small screens */
        margin-top: 0;
    }

    .content {
        width: 100%;
    }

    .dashboard-overview {
        flex-direction: column-reverse;
        width: 100%;
        gap: 5rem;
    }

    .dashboard-overview-group {
        width: 100%;
    }
}

/* 
- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/