/* =========================================================
   PHONE.CSS
   MOBILE NAVIGATION
   ========================================================= */

@media (max-width: 768px) {

    /* =========================================
       MOBILE NAVBAR
       ========================================= */

    nav {
        position: fixed;
        top: 0;
        left: 0;

        width: 100%;
        height: 6rem;

        background: var(--clr-white);

        z-index: 9999;

        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    }


    /* =========================================
       NAVBAR INNER CONTAINER
       ========================================= */

    nav .topbar_nav {
        width: min(92%, 1280px);
        height: 6rem;

        display: flex;
        align-items: center;
        justify-content: space-between;
    }


    /* =========================================
       LOGO
       ========================================= */

    nav img {
        width: 8rem;
        height: auto;
        max-height: 5.5rem;

        object-fit: contain;
    }


    /* =========================================
       HAMBURGER + CLOSE BUTTON
       ========================================= */

    nav .topbar_nav button {
        display: flex;

        align-items: center;
        justify-content: center;

        width: 4.4rem;
        height: 4.4rem;

        color: var(--clr-primary);

        background: transparent;

        border-radius: 50%;

        cursor: pointer;

        font-size: 2.4rem;

        transition:
            background 0.25s ease,
            transform 0.25s ease;
    }


    nav .topbar_nav button:hover {
        background: rgba(7, 28, 86, 0.07);
    }


    nav .topbar_nav button:active {
        transform: scale(0.92);
    }


    /* =========================================
       HAMBURGER VISIBLE
       ========================================= */

    nav #open-menu {
        display: flex;
    }


    /* =========================================
       CLOSE BUTTON HIDDEN INITIALLY
       ========================================= */

    nav #close-menu {
        display: none;
    }


    /* =========================================
       MOBILE MENU
       ========================================= */

    nav ul {

        position: fixed;

        top: 6rem;
        left: 0;

        width: 100%;

        display: flex;
        flex-direction: column;

        gap: 0;

        padding: 1.5rem 2rem 2rem;

        background: var(--clr-white);

        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.10);

        max-height: 0;

        overflow: hidden;

        opacity: 0;
        visibility: hidden;

        transform: translateY(-10px);

        transition:
            max-height 0.4s ease,
            opacity 0.3s ease,
            transform 0.3s ease,
            visibility 0.3s ease;

        z-index: 9998;
    }


    /* =========================================
       OPEN MENU
       ========================================= */

    nav ul.show-menu {

        max-height: calc(100vh - 6rem);

        overflow-y: auto;

        opacity: 1;
        visibility: visible;

        transform: translateY(0);
    }


    /* =========================================
       MENU ITEMS
       ========================================= */

    nav ul li {
        width: 100%;
    }


    nav ul li a {

        display: flex;
        align-items: center;

        width: 100%;
        min-height: 5.2rem;

        padding: 1.4rem 1rem;

        color: var(--clr-heading);

        font-size: 1.6rem;
        font-weight: 600;

        border-bottom: 1px solid rgba(7, 28, 86, 0.08);

        transition:
            background 0.25s ease,
            color 0.25s ease,
            padding-left 0.25s ease;
    }


    nav ul li:last-child a {
        border-bottom: none;
    }


    nav ul li a:hover,
    nav ul li a:focus {
        color: var(--clr-primary);

        background: rgba(7, 28, 86, 0.04);

        padding-left: 1.6rem;
    }


    /* =========================================
       WHEN MENU IS OPEN
       ========================================= */

    nav.menu-open #open-menu {
        display: none;
    }


    nav.menu-open #close-menu {
        display: flex;
    }


    /* =========================================
       STOP HORIZONTAL OVERFLOW
       ========================================= */

    body {
        overflow-x: hidden;
    }

}




    /* FOOTER MOBILE LAYOUT */
    
/* ==========================================
   TABLET DEVICES
   769px - 1024px
   ========================================== */
@media screen and (min-width: 769px) and (max-width: 1024px) {

    /* FOOTER TABLET LAYOUT */
    #footer {
        padding-top: 6rem;
    }

    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        place-items: start;
    }

    .lead {
        width: 100%;
    }

}


/* ==========================================
   MOBILE DEVICES
   768px AND BELOW
   ========================================== */
@media screen and (max-width: 768px) {

    /* FOOTER MOBILE LAYOUT */
    #footer {
        padding-top: 6rem;
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 3.5rem;
        place-items: start;
    }

    .lead {
        width: 100%;
    }

}


/* INDEX MOBILE HERE */

/* ============================================================
   TABLET 768px - 1024px
   ============================================================ */

@media screen and (min-width: 768px) and (max-width: 1024px) {
    
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .container {
        width: calc(100% - 4rem);
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* ========================================================
       HERO
       ======================================================== */

    header {
        min-height: 40vh;
        height: 40vh;

        background-position: center center;
        background-size: cover;

        padding: 8rem 0 8rem;
    }

    .header_container {
        padding: 3rem 0;
    }

    .header_content {
        max-width: 75rem;
        text-align: center;
        align-items: center;
    }

    .header-badge {
        font-size: 1.2rem;
        padding: .55rem 1.4rem;
        margin-bottom: 1.5rem;
    }

    .header_content h1 {
        font-size: 4rem;
        line-height: 1.15;
        margin-bottom: 2rem;
    }

    .header_content p {
        max-width: 62rem;
        font-size: 1.4rem;
        text-align: center;
        line-height: 1.6;
        margin-bottom: 2.5rem;
    }

    .btn-group {
        justify-content: center;
        align-items: center;
    }

    .btn-group .btn {
        width: auto;
    }

    .btn-hero,
    .btn-secondary {
        font-size: 1.4rem;
        padding: 1.1rem 2.5rem;
        margin-bottom: 2rem;
    }
    
     .card-holder {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin: 6rem auto;
        text-align: center;
    }

    .left-card,
    .right-card {
        min-height: 25rem;
        padding: 3.5rem;
        border-radius: 2.5rem;
    }

    .card-holder > article > i {
        font-size: 2.7rem;
        margin-bottom: 2rem;
    }

    .card-holder h2,
    .right-card h6 {
        font-size: 2.6rem;
        line-height: 1.2;
        margin-bottom: 1.2rem;
    }

    .card-holder p {
        font-size: 1.5rem;
        line-height: 1.6;
        text-align: center;
    }

    .card-bg-icon {
        top: 2rem;
        right: 2rem;
    }

    .card-bg-icon i {
        font-size: 9rem;
    }


.art-featured {
        width: calc(100% - 4rem);

        display: grid;
        grid-template-columns: 1fr;

        text-align: center;

        padding: 4rem 3rem;

        margin: 7rem auto;

        border-radius: 3rem;
    }

    .feat-image {
        width: 100%;

        display: flex;
        justify-content: center;
        align-items: center;

        margin-bottom: 2.2rem;
    }

    .feat-image img {
        width: min(100%, 42rem);
        height: 420px;
        max-height: 420px;

        object-fit: cover;

        margin: 0 auto;

        border-radius: 2rem;
    }

    .feat-detal {
        width: 100%;

        padding: 2rem 1rem;

        display: flex;
        flex-direction: column;
        align-items: center;

        text-align: center;
    }

    .featured-badge {
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
    }

    .featured-badge i {
        font-size: 2.4rem;
    }

    .feat-detal h1 {
        font-size: 3.8rem;
        line-height: 1.15;

        margin-bottom: 1.5rem;
    }

    .feat-detal p {
        max-width: 65rem;

        font-size: 1.5rem;
        line-height: 1.6;

        margin-bottom: 2.5rem;
    }

    .artist-stats {
        width: min(80%, 50rem);

        display: flex;

        gap: 1.5rem;

        margin-left: auto;
        margin-right: auto;
        margin-bottom: 3rem;
    }

    .artist-stats article {
        padding: 1.2rem;
    }

    .artist-stats h3 {
        font-size: 2rem;
    }

    .artist-stats small {
        font-size: 1.3rem;
    }

    .art-featured .btn {
        width: fit-content;
    }


  /* Artist List Carousel Section (2 cards on tablet) */
  .artist-card {
    flex: 0 0 calc(50% - 1.25rem);
  }

  /* Upcoming Events Section (3 cards on tablet with reduced sizes) */
  .eventz-card {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .eventi-image {
    height: 18rem;
  }

  .eventi-content h3 {
    font-size: 1.8rem;
  }

  .eventi-meta {
    font-size: 1.3rem;
  }

  /* Study in UK Section */
  .study-section {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  /* Our Services Section (2 cards per line on tablet) */
  .services .section-heading h2 {
    font-size: 4rem;
  }

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

  /* Media Section (2 cards per line on tablet) */
  .vhe-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Testimonials Section */
  .testimonial-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .testimonial-left {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .testimonial-left h2 {
    text-align: center;
  }

  .testimonial-left p {
    margin-inline: auto;
  }

  .testimonial-nav {
    justify-content: center;
  }

  /* CTA Pill Card Section (Keeps reduced font pill layout) */
  .cta-box h2 {
    font-size: 2rem;
  }

  .cta-box p {
    font-size: 1rem;
  }

  /* Contact Form Section */
  .contact-card h2 {
    font-size: 3.8rem;
  }
}

/* ============================================================
   MOBILE PHONES
   305px — 768px ONLY
   ============================================================ */

@media screen and (min-width: 305px) and (max-width: 768px) {


    html,
    body {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }


    .container {
        width: calc(100% - 2rem);
        max-width: none;

        margin-left: auto;
        margin-right: auto;
    }


    /* ========================================================
       HERO / HEADER
       ======================================================== */

    header {
        width: 100%;

        min-height: 40vh;
        height: 40vh;
        max-height: 550px;

        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;

        padding: 7rem 0 7rem;

        display: grid;
        place-items: center;
    }

    .header_container {
        width: calc(100% - 2rem);

        padding: 1.5rem 0;

        display: flex;

        justify-content: center;
        align-items: center;
    }

    .header_content {
        width: 100%;
        max-width: 100%;

        display: flex;
        flex-direction: column;

        align-items: center;

        text-align: center;
    }

    .header-badge {
        font-size: 1rem;

        padding: .5rem 1rem;

        margin-bottom: 1.2rem;

        white-space: nowrap;
    }

    /*
     * Typing headline:
     *
     * clamp keeps the text responsive without
     * allowing it to become enormous.
     */

    .header_content h1 {
        width: 100%;

        font-size: clamp(2.4rem, 8vw, 3.6rem);

        line-height: 1.12;

        margin-bottom: 1.3rem;

        text-align: center;

        overflow-wrap: break-word;
    }

    .header_content p {
        width: 94%;
        max-width: 55rem;

        font-size: 1.25rem;

        line-height: 1.5;

        margin-left: auto;
        margin-right: auto;

        margin-bottom: 1.8rem;

        text-align: center;
    }

    /*
     * Buttons are stacked but NEVER full width.
     */

    .btn-group {
        width: auto;

        display: flex;

        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: .8rem;
    }

    .btn-group .btn {
        width: fit-content;

        max-width: calc(100vw - 4rem);

        white-space: nowrap;
    }

    .btn-hero,
    .btn-secondary {
        font-size: 1.25rem;

        padding: .9rem 2rem;
        margin-bottom: 2rem;
    }


    /* ========================================================
       CARD HOLDER
       
       ONE CARD PER LINE
       WHITE → BLUE
       ======================================================== */

    .card-holder {
        width: calc(100% - 2rem);

        display: grid;

        grid-template-columns: 1fr;

        gap: 1rem;

        margin: 4rem auto;

        text-align: center;
    }

    .left-card,
    .right-card {
        width: 100%;

        min-width: 0;

        min-height: 22rem;

        padding: 2.5rem 2rem;

        border-radius: 2.5rem;
    }

    .card-holder > article > i {
        font-size: 2.3rem;

        margin-bottom: 1.5rem;
    }

    .card-holder h2,
    .right-card h6 {
        font-size: 2.2rem;

        line-height: 1.2;

        margin-bottom: 1rem;
    }

    .card-holder p {
        width: 100%;

        max-width: 40rem;

        margin-left: auto;
        margin-right: auto;

        font-size: 1.35rem;

        line-height: 1.6;
    }

    .card-bg-icon {
        top: 1.5rem;
        right: 1.5rem;
    }

    .card-bg-icon i {
        font-size: 7rem;
    }


    /* ========================================================
       FEATURED ARTIST
       
       WHITE CARD
       IMAGE ON TOP
       DETAILS BELOW
       ======================================================== */

    .art-featured {
        width: calc(100% - 2rem);

        display: grid;

        grid-template-columns: 1fr;

        text-align: center;

        padding: 2rem 1.5rem 3rem;

        margin: 5rem auto;

        border-radius: 2.5rem;

        overflow: hidden;
    }

    .feat-image {
        width: 100%;

        display: flex;

        justify-content: center;
        align-items: center;

        margin-bottom: 2.2rem;
    }

    .feat-image img {
        width: 100%;

        height: 420px;
        max-height: 420px;

        object-fit: cover;

        margin: 0 auto;

        border-radius: 2rem;
    }

    .feat-detal {
        width: 100%;

        padding: 1.5rem .5rem 0;

        display: flex;

        flex-direction: column;

        align-items: center;

        text-align: center;
    }

    .featured-badge {
        font-size: 1.05rem;

        margin-bottom: 1.2rem;
    }

    .featured-badge i {
        font-size: 2.2rem;
    }

    .feat-detal h1 {
        width: 100%;

        font-size: clamp(2.7rem, 8vw, 3.5rem);

        line-height: 1.12;

        margin-bottom: 1.3rem;
    }

    .feat-detal p {
        width: 100%;

        max-width: 55rem;

        font-size: 1.35rem;

        line-height: 1.6;

        margin-bottom: 2rem;
    }

    .artist-stats {
        width: 100%;
        max-width: 42rem;

        display: flex;

        justify-content: center;

        gap: 1rem;

        margin-left: auto;
        margin-right: auto;

        margin-bottom: 2.5rem;
    }

    .artist-stats article {
        flex: 1;

        padding: 1.2rem .8rem;

        border-radius: 1.4rem;
    }

    .artist-stats h3 {
        font-size: 1.9rem;
    }

    .artist-stats small {
        font-size: 1.2rem;
    }

    .art-featured .btn {
        width: fit-content;

        font-size: 1.3rem;

        padding: 1rem 2.4rem;
    }


    /* ========================================================
       ARTIST CAROUSEL
       
       ONE ARTIST PER VIEW

       IMPORTANT:
       We are NOT disabling the carousel.
       .artists-track remains a flex track.
       ======================================================== */

    .art-list {
        width: calc(100% - 2rem);

        margin: 6rem auto;
    }

    .artist-header {
        width: 100%;

        display: flex;

        flex-direction: column;

        justify-content: center;
        align-items: center;

        gap: 1.5rem;

        margin-bottom: 2.5rem;

        text-align: center;
    }

    .artists-title {
        width: 100%;

        text-align: center;
    }

    .artists-title h3 {
        font-size: 2.8rem;

        line-height: 1.2;

        text-align: center;
    }

    .artists-title p {
        font-size: 1.3rem;

        line-height: 1.5;

        text-align: center;
    }

    .artists-filter {
        width: 100%;

        display: flex;

        flex-wrap: wrap;

        justify-content: center;
        align-items: center;

        gap: .6rem;
    }

    .artists-filter button {
        padding: .7rem 1.2rem;

        font-size: 1.15rem;
    }

    /*
     * ONE CARD PER VIEW
     */

    .artists-carousel {
        position: relative;

        width: 100%;

        overflow: hidden;

        margin-top: 2rem;

        padding: 0 3rem;
    }

    .artists-track {
        display: flex;

        gap: 1rem;

        transition: transform .6s ease-in-out;

        will-change: transform;
    }

    .artist-card {
        flex: 0 0 100%;

        width: 100%;
        min-width: 0;

        border-radius: 2rem;
    }

    .artist-image {
        width: 100%;

        height: 30rem;
    }

    .artist-info {
        padding: 1.5rem;
    }

    .artist-info h3 {
        font-size: 1.5rem;

        margin-bottom: .5rem;
    }

    .artist-info p {
        font-size: 1.2rem;
    }

    /*
     * Navigation arrows remain beside the
     * current artist card.
     */

    .artist-prev,
    .artist-next {
        width: 3.8rem;
        height: 3.8rem;

        font-size: 1.7rem;

        z-index: 20;
    }

    .artist-prev {
        left: .3rem;
    }

    .artist-next {
        right: .3rem;
    }




    .upcoming1 {
        width: 100%;

        padding: 6rem 0;
    }

    .upcoming1 > .container {
        width: calc(100% - 2rem);
    }

    .section-headingx {
        margin-bottom: 3rem;
        text-align: center;
    }

    .section-headingx h2 {
        font-size: 3.2rem;
        line-height: 1.2;
    }

    .section-headingx p {
        font-size: 1.3rem;
    }

    .eventz-card {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .eventi-card {
        width: 100%;
        min-width: 0;
        border-radius: 2rem;
    }

    .eventi-image {
        height: 22rem;
    }

    .eventi-content {
        padding: 1.8rem;
    }

    .eventi-meta {
        font-size: 1.15rem;
        margin-bottom: 1rem;
    }

    .eventi-content h3 {
        font-size: 2rem;
        line-height: 1.25;
        margin-bottom: 1.8rem;
    }

    .eventi-content .btn {
        width: fit-content;
        font-size: 1.25rem;
    }



    .study-section {
        width: calc(100% - 2rem);

        display: grid;

        grid-template-columns: 1fr;

        gap: 3rem;

        margin: 6rem auto;
    }

    .study-left {
        text-align: center;
    }

    .study-left h2 {
        font-size: 2.8rem;
        line-height: 1.2;
    }

    .study-left > p {
        font-size: 1.35rem;

        line-height: 1.6;

        margin-left: auto;
        margin-right: auto;
    }

    .study-right {
        width: 100%;
    }

    .study-right img {
        width: 100%;
        height: 280px;
        object-fit: cover;
    }


    .services {
        width: 100%;
    }

    .services > .container {
        width: calc(100% - 2rem);
    }

    .services .section-heading {
        text-align: center;
    }

    .services .section-heading h2 {
        font-size: 3rem;
        line-height: 1.2;
    }

    .services .section-heading p {
        font-size: 1.3rem;
        line-height: 1.5;
    }

    .services-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.3rem;
    }

    .service-card {
        width: 100%;
        min-width: 0;
        padding: 2.5rem 2rem;
        text-align: center;
    }

    .service-icon {
        width: 4rem;
        height: 4rem;
        margin-left: auto;
        margin-right: auto;
        font-size: 1.8rem;
    }

    .service-card h3 {
        font-size: 1.7rem;
    }

    .service-card p {
        font-size: 1.3rem;
        line-height: 1.6;
    }



    .VHE-media {
        width: 100%;
    }

    .VHE-media > .container {
        width: calc(100% - 2rem);
    }

    .VHE-media .section-heading {
        text-align: center;
    }

    .VHE-media .section-heading h2 {
        font-size: 3rem;
    }

    .vhe-gallery {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.3rem;
    }

    .vhe-card {
        width: 100%;
        min-width: 0;
    }

    .vhe-card img {
        width: 100%;
        height: auto;

        object-fit: cover;
    }


    

    .testimonial {
        width: 100%;
        padding: 6rem 0;
    }

    .testimonial-container {
        width: calc(100% - 2rem);

        display: grid;
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }

    .testimonial-left {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .testimonial-left h2 {
        font-size: 3.2rem;
        line-height: 1.15;
        text-align: center;
        margin-bottom: 1.2rem;
    }

    .testimonial-left p {
        width: 100%;

        max-width: 45rem;

        font-size: 1.3rem;

        line-height: 1.6;

        text-align: center;

        margin-left: auto;
        margin-right: auto;

        margin-bottom: 2rem;
    }

    .testimonial-nav {
        display: flex;

        justify-content: center;

        gap: .8rem;
    }

    .testimonial-nav button {
        width: 4rem;
        height: 4rem;
    }

    .testimonial-nav i {
        font-size: 1.8rem;
    }

    .testimonial-slider {
        width: 100%;

        display: flex;

        flex-direction: column;

        gap: 1.5rem;
    }

    .testimonial-card {
        width: 100%;

        flex: none;

        padding: 2.5rem 2rem;

        border-radius: 2rem;
    }

    .quote {
        font-size: 2.8rem;

        margin-bottom: 1.5rem;
    }

    .testimonial-card p {
        font-size: 1.3rem;

        line-height: 1.65;
    }

    .client {
        gap: 1rem;
    }

    .client img {
        width: 5.5rem;
        height: 5.5rem;
    }

    .client h4 {
        font-size: 1.4rem;
    }

    .client span {
        font-size: 1.15rem;
    }


    .cta-section {
        width: calc(100% - 2rem);
        margin-left: auto;
        margin-right: auto;
        padding: 5rem 0;
    }

    .cta-card {
        width: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 2.5rem !important;
        overflow: hidden;
    }

    .cta-box {
        width: 100%;
        flex: none !important;
        padding: 3rem 1.5rem !important;
        text-align: center;
    }

    .cta-box h2 {
        font-size: 1.9rem;
        line-height: 1.2;
    }

    .cta-box p {
        font-size: 1rem;
        line-height: 1.5;
    }

    .cta-box .btn {
        width: fit-content;
        font-size: 1.25rem;
        padding: 1rem 2.2rem !important;
    }



    .contact-section {
        width: 100%;
    }

    .contact-section > .container {
        width: calc(100% - 2rem);
    }

    .contact-card {
        width: 100%;

        padding: 2.5rem 1.5rem;
    }

    .contact-card .section-heading {
        text-align: center;
    }

    .contact-card h2 {
        font-size: 2.8rem;

        line-height: 1.2;
    }

    .contact-card .section-heading p {
        font-size: 1.3rem;
    }

    .form-grid {
        display: grid;

        grid-template-columns: 1fr;

        gap: 1.2rem;
    }

    .form-group {
        width: 100%;
    }

    .form-group label {
        font-size: 1.2rem;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;

        display: block;

        font-size: 1.3rem;
    }

}


/*about us */

/* ==========================================================================
   TABLET RESPONSIVE STYLES (max-width: 1024px)
   ========================================================================== */
@media screen and (max-width: 1024px) {
  /* Hero Section */
  .PagesHero h1 {
    font-size: 4.2rem;
  }

  .PagesHero p {
    font-size: 1.5rem;
  }

  /* Why / Study Section */
  .study-section {
    grid-template-columns: 1fr;
    gap: 4rem;
    margin: 8rem auto;
  }

  .study-left h2 {
    font-size: 3.8rem;
  }

  .study-left > p {
    font-size: 1.7rem;
    margin-bottom: 3rem;
  }

  .study-right img {
    height: 380px;
    object-fit: cover;
  }

  /* Our Core Values Section (2 cards per line) */
  .values-section h2 {
    font-size: 3.8rem;
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .value-card,
  .value-card.wide-card {
    grid-column: span 1;
  }

  /* Blue Bridge / Stats Section */
  .bridge-card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 4.5rem 3rem;
    gap: 3.5rem;
  }

  .bridge-content h2 {
    font-size: 3.4rem;
  }

  .bridge-content p {
    font-size: 1.5rem;
    margin-inline: auto;
  }

  .bridge-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 2rem;
  }

  .stat-number {
    font-size: 3.8rem;
  }

  /* CTA Section */
  .about-cta-section {
    padding: 7rem 0;
  }

  .about-cta-content h2 {
    font-size: 3rem;
  }

  .about-cta-content p {
    font-size: 1.5rem;
  }

  .cta-actions .btn {
    font-size: 1.4rem;
    padding: 1rem 2.2rem;
  }
}

/* ==========================================================================
   MOBILE RESPONSIVE STYLES (max-width: 600px)
   ========================================================================== */
@media screen and (max-width: 600px) {
  /* Hero Section */
  .PagesHero {
    padding: 7rem 0 5rem;
  }

  .PagesHero h1 {
    font-size: 3.2rem;
  }

  .PagesHero p {
    font-size: 1.4rem;
  }

  /* Why Study Section */
  .study-section {
    margin: 5rem auto;
    gap: 3rem;
  }

  .study-left h2 {
    font-size: 3rem;
  }

  .study-left > p {
    font-size: 1.5rem;
  }

  .step span {
    min-width: 4rem;
    height: 4rem;
    font-size: 1.6rem;
  }

  .step h3 {
    font-size: 1.9rem;
  }

  .step p {
    font-size: 1.4rem;
  }

  .study-right img {
    height: 260px;
  }

  /* Our Core Values Section (1 card per line) */
  .values-section {
    padding: 5rem 0;
  }

  .values-section h2 {
    font-size: 3rem;
  }

  .values-grid {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .value-card {
    padding: 2.5rem;
  }

  .value-image-card {
    height: 18rem;
  }

  /* Blue Bridge / Stats Section */
  .blue-bridge-section {
    padding: 4rem 0;
  }

  .bridge-card {
    padding: 3.5rem 2rem;
  }

  .bridge-content h2 {
    font-size: 2.6rem;
  }

  .bridge-content p {
    font-size: 1.4rem;
  }

  .bridge-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 1rem;
  }

  .stat-number {
    font-size: 3rem;
  }

  .stat-label {
    font-size: 1rem;
    letter-spacing: 1px;
  }

  /* CTA Section */
  .about-cta-section {
    padding: 5rem 0;
  }

  .about-cta-content h2 {
    font-size: 2.4rem;
  }

  .about-cta-content p {
    font-size: 1.4rem;
    margin-bottom: 2.5rem;
  }

  .cta-actions {
    flex-direction: column;
    width: 100%;
    gap: 1.2rem;
  }

  .cta-actions .btn {
    width: 100%;
    font-size: 1.4rem;
    padding: 1rem 2rem;
  }
}

/*contact us */

/* ==========================================================================
   TABLET RESPONSIVE STYLES (max-width: 1024px)
   ========================================================================== */
@media screen and (max-width: 1024px) {
  /* Hero Section */
  .contactHero h1 {
    font-size: 4.2rem;
  }

  .contactHero p {
    font-size: 1.5rem;
  }

  /* Main Contact Layout (Stacks form and info card vertically line-by-line) */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  /* Form Section */
  .contactForm {
    padding: 3rem;
  }

  .contactForm h2 {
    font-size: 3rem;
  }

  /* Form Fields Line-by-Line */
  .form-row {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Global Presence / Map Section */
  .globalPresence {
    padding: 12rem 0;
  }

  .mapCard {
    padding: 2.5rem 3.5rem;
  }

  .mapCard h3 {
    font-size: 2.4rem;
  }

  .mapCard p {
    font-size: 1.5rem;
  }
}

/* ==========================================================================
   MOBILE RESPONSIVE STYLES (max-width: 600px)
   ========================================================================== */
@media screen and (max-width: 600px) {
  /* Hero Section */
  .contactHero {
    padding: 7rem 0 5rem;
  }

  .contactHero h1 {
    font-size: 3.2rem;
  }

  .contactHero p {
    font-size: 1.4rem;
  }

  /* Form Section */
  .contactMain {
    padding: 4rem 0 6rem;
  }

  .contactForm {
    padding: 2.5rem 1.8rem;
  }

  .contactForm h2 {
    font-size: 2.4rem;
    margin-bottom: 2rem;
  }

  .input-group input,
  .input-group textarea,
  .input-group select {
    padding: 1.2rem;
    font-size: 1.4rem;
    width: 100%;
    display: block;
  }

  .contactForm .btn-primary {
    width: 100%;
  }

  /* Info Cards Section */
  .infoCard {
    padding: 2rem;
  }

  .infoCard h4,
  .directContact h4 {
    font-size: 1.8rem;
  }

  .directContact {
    padding: 2rem;
  }

  .directContact li {
    font-size: 1.4rem;
    word-break: break-word;
  }

  /* Global Presence / Map Section */
  .globalPresence {
    padding: 8rem 0;
  }

  .mapCard {
    width: 90%;
    padding: 2rem;
  }

  .mapCard h3 {
    font-size: 2rem;
  }

  .mapCard p {
    font-size: 1.3rem;
  }
}

/* education page */

/* ==========================================================================
   TABLET RESPONSIVE STYLES (max-width: 1024px)
   ========================================================================== */
@media screen and (max-width: 1024px) {
  /* Hero Section */
  .hero-section {
    padding-top: 5rem;
  }

  .hero-content {
    padding-block: 6rem;
  }

  .hero-badge {
    font-size: 1.1rem;
    padding: 0.5rem 1.4rem;
  }

  .hero-content h1 {
    font-size: 3.8rem;
  }

  .hero-content p {
    font-size: 1.5rem;
  }

  .hero-content .btn {
    font-size: 1.4rem;
    padding: 0.7rem 2.4rem;
  }

  /* Why Study in the UK Section */
  .why-study-section {
    padding: 6rem 0;
  }

  .why-study-section .why-study-header h2 {
    font-size: 3.4rem;
  }

  .why-study-section .why-study-header p {
    font-size: 1.6rem;
  }

  .why-study-section .why-card h3 {
    font-size: 2.2rem;
  }

  .why-study-section .why-card p {
    font-size: 1.4rem;
  }

  /* Bespoke Support Services Section */
  .services-section {
    padding: 6rem 0;
  }

  .services-header h2 {
    font-size: 3rem;
  }

  .services-header p {
    font-size: 1.5rem;
  }

  .services-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .service-card {
    padding: 2rem 1.6rem;
  }

  .service-icon {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.6rem;
  }

  .service-card h3 {
    font-size: 1.6rem;
  }

  .service-card p {
    font-size: 1.3rem;
  }

  /* Application Journey Section */
  .journey-section {
    padding: 6rem 0;
  }

  .journey-section .section-header h2 {
    font-size: 3.4rem;
  }

  .journey-section .section-header p {
    font-size: 1.6rem;
  }

  .timeline-line {
    top: 2.3rem;
  }

  .step-number {
    width: 4.6rem;
    height: 4.6rem;
    font-size: 1.6rem;
  }

  .timeline-step h4 {
    font-size: 1.6rem;
  }

  .timeline-step p {
    font-size: 1.3rem;
  }

  /* Placement Logos Section */
  .logos-section {
    padding: 5rem 0;
  }

  .logos-title {
    font-size: 2.2rem;
  }

  .logos-grid span {
    font-size: 1.6rem;
  }

  /* Testimonials Section */
  .testimonials-section {
    padding: 6rem 0;
  }

  .testimonials-section h2 {
    font-size: 3.4rem;
  }

  .testimonials-section .section-header p {
    font-size: 1.6rem;
  }

  .testimonials-grid {
    gap: 1.5rem;
  }

  .testimonial-card {
    padding: 2.5rem 2rem;
  }

  .stars {
    font-size: 1.2rem;
  }

  .quote {
    font-size: 1.35rem;
  }

  .author-info img {
    width: 4rem;
    height: 4rem;
  }

  .author-info h5 {
    font-size: 1.4rem;
  }

  .author-info span {
    font-size: 1.2rem;
  }

  /* FAQ Section */
  .faq-section {
    padding: 7rem 0;
  }

  .faq-section h2 {
    font-size: 3.4rem;
  }

  .faq-item summary {
    font-size: 1.5rem;
    padding: 1.6rem 2rem;
  }

  .faq-answer {
    font-size: 1.35rem;
    padding: 0 2rem 1.6rem 2rem;
  }

  /* Student Booking / Application Form Section */
  .stbooking-section {
    padding: 5rem 0;
  }

  .contact-kard {
    padding: 4rem 3rem;
  }

  .contact-kard h2 {
    font-size: 2.8rem;
  }

  .contact-kard p {
    font-size: 1.5rem;
    margin-bottom: 3.5rem;
  }

  .form-group label {
    font-size: 1.3rem;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 1.4rem;
    padding: 1.4rem;
  }

  .submit-btn {
    font-size: 1.8rem;
  }
}

/* ==========================================================================
   MOBILE RESPONSIVE STYLES (max-width: 600px)
   ========================================================================== */
@media screen and (max-width: 600px) {
  /* Hero Section */
  .hero-section {
    min-height: auto;
    padding-top: 4rem;
  }

  .hero-content {
    padding-block: 4rem 5rem;
  }

  .hero-badge {
    font-size: 1rem;
    padding: 0.4rem 1.2rem;
  }

  .hero-content h1 {
    font-size: 2.8rem;
  }

  .hero-content p {
    font-size: 1.4rem;
  }

  .hero-content .btn {
    font-size: 1.3rem;
    padding: 0.6rem 2rem;
  }

  /* Why Study in the UK Section */
  .why-study-section {
    padding: 4rem 0;
  }

  .why-study-section .why-study-header h2 {
    font-size: 2.6rem;
  }

  .why-study-section .why-study-header p {
    font-size: 1.4rem;
  }

  .why-study-section .why-card {
    padding: 2rem;
  }

  .why-study-section .why-card h3 {
    font-size: 2rem;
  }

  .why-study-section .why-card p {
    font-size: 1.35rem;
  }

  /* Bespoke Support Services Section */
  .services-section {
    padding: 4rem 0;
  }

  .services-header-wrap {
    text-align: center;
  }

  .services-header h2 {
    font-size: 2.6rem;
  }

  .services-header p {
    font-size: 1.4rem;
    margin-inline: auto;
  }

  .services-grid {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .service-card {
    padding: 2.5rem 2rem;
    align-items: center;
    text-align: center;
  }

  /* Application Journey Section */
  .journey-section {
    padding: 4rem 0;
  }

  .journey-section .section-header h2 {
    font-size: 2.6rem;
  }

  .journey-section .section-header p {
    font-size: 1.4rem;
  }

  .journey-timeline {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-top: 3.5rem;
  }

  .timeline-line {
    display: none;
  }

  .timeline-step {
    display: block;
    text-align: center;
  }

  .step-number {
    width: 4.2rem;
    height: 4.2rem;
    font-size: 1.5rem;
    margin-bottom: 1.2rem;
    box-shadow: none;
  }

  .timeline-step h4 {
    font-size: 1.6rem;
  }

  .timeline-step p {
    font-size: 1.3rem;
  }

  /* Placement Logos Section */
  .logos-section {
    padding: 4rem 0;
  }

  .logos-title {
    font-size: 1.8rem;
    margin-bottom: 2rem;
  }

  .logos-grid {
    justify-content: center;
    gap: 1.5rem 2.5rem;
  }

  .logos-grid span {
    font-size: 1.4rem;
  }

  /* Testimonials Section */
  .testimonials-section {
    padding: 4rem 0;
  }

  .testimonials-section h2 {
    font-size: 2.6rem;
  }

  .testimonials-section .section-header p {
    font-size: 1.4rem;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .testimonial-card {
    display: block;
    padding: 2.2rem 1.8rem;
  }

  .quote {
    font-size: 1.3rem;
    margin-bottom: 2rem;
  }

  /* FAQ Section */
  .faq-section {
    padding: 5rem 0;
  }

  .faq-section h2 {
    font-size: 2.6rem;
    margin-bottom: 2rem;
  }

  .faq-item summary {
    font-size: 1.4rem;
    padding: 1.4rem 1.6rem;
  }

  .faq-answer {
    font-size: 1.3rem;
    padding: 0 1.6rem 1.4rem 1.6rem;
  }

  /* Student Booking / Application Form Section */
  .stbooking-section {
    padding: 4rem 0;
  }

  .contact-kard {
    padding: 2.5rem 1.5rem;
  }

  .contact-kard h2 {
    font-size: 2.2rem;
  }

  .contact-kard p {
    font-size: 1.35rem;
    margin-bottom: 2.5rem;
  }

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

  .form-group input,
  .form-group select,
  .form-group textarea {
    display: block;
    width: 100%;
    font-size: 1.4rem;
    padding: 1.2rem;
  }

  .submit-btn {
    font-size: 1.6rem;
    padding: 1.2rem;
  }
}


/* entertainment page */

/* ==========================================================================
   TABLET RESPONSIVE STYLES (max-width: 1024px)
   ========================================================================== */
@media screen and (max-width: 1024px) {
  /* Hero Section */
  
  .hero-section {
        min-height: 40vh;
        height: 40vh;
        background-position: center center;
        background-size: cover;
        padding: 5rem 0 3rem;
  }
  
  
  .hero-title {
    font-size: 3.8rem;
  }

  .hero-description {
    font-size: 1.5rem;
    margin-bottom: 2.8rem;
  }

  .hero-cta-group .btn-primary {
    font-size: 1.4rem;
    padding: 0.7rem 2.2rem;
  }

  .hero-cta-group .btn-hero-secondary {
    font-size: 1.35rem;
    padding: 0.9rem 2rem;
  }

  /* Spotlight Section */
  .spotlight-card {
    gap: 2.5rem;
    padding: 2.5rem;
  }

  .spotlight-image-wrapper img {
    height: 320px;
  }

  .spotlight-quote {
    font-size: 2.2rem;
  }

  .spotlight-text {
    font-size: 1.35rem;
    margin-bottom: 2rem;
  }

  .spotlight-stats {
    gap: 3rem;
    margin-bottom: 2rem;
  }

  .stat-item h3 {
    font-size: 2.4rem;
  }

  .stat-item p {
    font-size: 1.1rem;
  }

  .btn-spotlight {
    font-size: 1.35rem;
    padding: 1rem 2rem;
  }

  /* Roster Section */
  .roster-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .section-label {
    font-size: 2rem;
  }

  .roster-header h2 {
    font-size: 1.8rem;
  }

  .filter-pills {
    justify-content: center;
  }

  .artist-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  /* Events Section */
  .events-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .event-card {
    padding: 1.8rem;
  }

  .date-badge .day {
    font-size: 1.6rem;
  }

  .event-body h4 {
    font-size: 1.6rem;
  }

  .event-location {
    font-size: 1.25rem;
  }

  .btn-event {
    font-size: 1.3rem;
    padding: 0.8rem;
  }

  /* Media Gallery Section */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
  }

  .gallery-item.large {
    grid-column: span 1;
    grid-row: span 2;
  }

  .gallery-item.wide {
    grid-column: span 1;
    grid-row: span 1;
  }

  /* Booking Section */
  .booking-info h3 {
    font-size: 2.2rem;
  }

  .booking-info p {
    font-size: 1.35rem;
  }

  .booking-features li {
    font-size: 1.3rem;
  }

  .inquiry-form .form-row {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }
}

/* ==========================================================================
   MOBILE RESPONSIVE STYLES (max-width: 600px)
   ========================================================================== */
@media screen and (max-width: 600px) {
  /* Hero Section */
  
  .hero-section {
        min-height: 40vh;
        height: 40vh;
        background-position: center center;
        background-size: cover;
        padding: 5rem 0 3rem;
  }
  
  .hero-section {
    padding: 6rem 0 5rem;
  }

  .sub-tag {
    font-size: 1.1rem;
  }

  .hero-title {
    font-size: 2.8rem;
  }

  .hero-description {
    font-size: 1.35rem;
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }

  .hero-cta-group .btn-primary,
  .hero-cta-group .btn-hero-secondary {
    width: 100%;
    text-align: center;
    font-size: 1.3rem;
    padding: 0.8rem 1.6rem;
  }

  /* Spotlight Section */
  .spotlight-card {
    display: block;
    padding: 2rem;
  }

  .spotlight-image-wrapper img {
    height: 250px;
    margin-bottom: 2rem;
  }

  .spotlight-stats {
    gap: 2rem;
  }

  /* Roster Section */
  .roster-header h2 {
    font-size: 1.6rem;
  }

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

  /* Events Section */
  .events-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .section-title-center h2 {
    font-size: 2.8rem;
  }

  /* Media Gallery Section */
  .media-section h2 {
    font-size: 2.8rem;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
  }

  .gallery-item.large,
  .gallery-item.wide {
    grid-column: span 1;
    grid-row: span 1;
  }

  /* Booking Section */
  .booking-container {
    display: block;
    padding: 2.5rem 1.5rem;
  }

  .booking-info {
    margin-bottom: 3rem;
  }

  .booking-info h3 {
    font-size: 2rem;
  }

  .booking-form-card {
    padding: 2rem 1.5rem;
  }

  .inquiry-form .form-row {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    display: block;
    width: 100%;
  }
}

/** ARTPROFILE */

/* ==========================================================================
   TABLET RESPONSIVE STYLES (max-width: 1024px)
   ========================================================================== */
@media screen and (max-width: 1024px) {
  /* Hero Section */
  #artistHero {
    background:
      linear-gradient(
        90deg,
        rgba(8,17,55,.92) 0%,
        rgba(8,17,55,.78) 35%,
        rgba(8,17,55,.45) 65%,
        rgba(8,17,55,.15) 100%
      ),
      url("./images/artimage.png") center center/cover no-repeat;
  }

  .artistHeroContent {
    padding-top: 8rem;
    padding-bottom: 5rem;
    padding-left: clamp(1.5rem, 5vw, 4rem);
  }

  .artistGenre {
    font-size: 1.15rem;
  }

  #artistName {
    font-size: 3.4rem;
  }

  #artistBio {
    font-size: 1.45rem;
    margin-bottom: 2.5rem;
  }

  .artistHeroActions .btn {
    font-size: 1.6rem;
    padding: 0.8rem 2.2rem;
  }

  .artistSocials a {
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
  }

  /* Stats Section */
  .statsGrid {
    gap: 1.2rem;
  }

  .statCard {
    padding: 2rem 1.2rem;
  }

  .statCard h2 {
    font-size: 2.4rem;
  }

  .statCard p {
    font-size: 0.9rem;
  }

  /* Gallery Header */
  .galleryHeader {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
  }

  .galleryHeader p {
    margin-inline: auto;
  }

  .galleryLink {
    display: inline-block;
    text-align: center;
  }

  /* Spotlight Section */
  .spotlight-card {
    padding: 2.5rem;
    gap: 2.5rem;
  }

  .spotlight-image-wrapper img {
    height: 320px;
  }

  .spotlight-quote {
    font-size: 2.2rem;
  }

  .spotlight-text {
    font-size: 1.35rem;
  }

  .spotlight-stats {
    gap: 3rem;
  }

  .stat-item h3 {
    font-size: 2.4rem;
  }

  /* Booking Section */
  .bookingWrapper {
    gap: 4rem;
  }

  .bookingContent h2 {
    font-size: 3.2rem;
  }

  .bookingContent p {
    font-size: 1.6rem;
  }

  .bookingFeature h4 {
    font-size: 1.7rem;
  }

  .bookingFeature p {
    font-size: 1.35rem;
  }

  .bookingGrid {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  /* Related Artists Section */
  .relatedArtistsGrid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
}

/* ==========================================================================
   MOBILE RESPONSIVE STYLES (max-width: 600px)
   ========================================================================== */
@media screen and (max-width: 600px) {
  /* Hero Section */
  #artistHero {
    background:
      linear-gradient(
        90deg,
        rgba(8,17,55,.92) 0%,
        rgba(8,17,55,.78) 35%,
        rgba(8,17,55,.45) 65%,
        rgba(8,17,55,.15) 100%
      ),
      url("./images/artimage.png") center center/cover no-repeat;
  }

  .artistHeroContent {
    padding-top: 6rem;
    padding-bottom: 4rem;
    padding-left: 0;
  }

  .artistGenre {
    font-size: 1rem;
    padding: 0.35rem 0.8rem;
  }

  #artistName {
    font-size: 2.8rem;
  }

  #artistBio {
    font-size: 1.35rem;
    margin-bottom: 2rem;
  }

  .artistHeroActions {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .artistHeroActions .btn {
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
  }

  /* Stats Section */
  .artistStats {
    margin-top: -50px;
    margin-bottom: 5rem;
  }

  .statsGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }

  .statCard {
    padding: 1.8rem 1rem;
  }

  .statCard h2 {
    font-size: 2.2rem;
  }

  .statCard p {
    font-size: 0.85rem;
  }

  /* About Artist Section */
  #artistAbout {
    padding: 5rem 0;
  }

  .artistAboutGrid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  #aboutArtistName {
    font-size: 3rem;
    margin-bottom: 1.8rem;
  }

  #artistFullBio p {
    font-size: 1.5rem;
  }

  /* Gallery Header */
  .galleryHeader {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.2rem;
  }

  .galleryHeader h2 {
    font-size: 2.4rem;
  }

  .galleryHeader p {
    font-size: 1.35rem;
  }

  .galleryLink {
    display: inline-block;
    text-align: center;
    font-size: 1.4rem;
  }

  /* Spotlight Section */
  .spotlight-card {
    display: block;
    padding: 2rem;
  }

  .spotlight-image-wrapper img {
    height: 240px;
    margin-bottom: 2rem;
  }

  .spotlight-quote {
    font-size: 2rem;
  }

  .spotlight-text {
    font-size: 1.3rem;
  }

  .spotlight-stats {
    gap: 2rem;
    flex-wrap: wrap;
  }

  /* Booking Section */
  #artistBooking {
    padding: 5rem 0;
  }

  .bookingWrapper {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .bookingContent h2 {
    font-size: 2.8rem;
  }

  .bookingContent p {
    font-size: 1.45rem;
    margin-bottom: 2.5rem;
  }

  .bookingFeature {
    margin-bottom: 2rem;
  }

  .bookingFeature h4 {
    font-size: 1.6rem;
  }

  .bookingFeature p {
    font-size: 1.3rem;
  }

  .bookingFormCard {
    padding: 2.5rem 1.8rem;
  }

  .bookingGrid {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .formGroup input,
  .formGroup select,
  .formGroup textarea {
    display: block;
    width: 100%;
  }

  /* Related Artists Section */
  .relatedArtists {
    padding: 5rem 0;
  }

  .relatedArtistsGrid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}