:root{
  --aapa-orange:#f6a21a;
  --aapa-red:#ef3f55;
  --aapa-blue:#17618e;
  --aapa-cyan:#58c4cc;
  --ink:#3d3d3d;
  --line:#cfcfcf;
  --soft:#f5f5f5;
}
html{scroll-behavior:smooth}
body{
  color:var(--ink);
  background:#fff;
    font-family: "Inter", sans-serif;
  letter-spacing:.02em;
}
.py-lg-6{padding-top:5rem;padding-bottom:5rem}
 
.brand-ribbon {
    width: 100%;
    height: 22px;
    display: flex;
    overflow: hidden;
    background: #fff;
}

.brand-ribbon .ribbon {
    flex: 1;
    height: 18px;
    transform: none;

    border-bottom-left-radius: 50% 20px;
    border-bottom-right-radius: 50% 20px;
}

.brand-ribbon .orange {
    background: var(--aapa-orange);
}

.brand-ribbon .red {
    background: var(--aapa-red);
}

.brand-ribbon .blue {
    background: var(--aapa-blue);
}

.brand-ribbon .cyan {
    background: var(--aapa-cyan);
}

a:link{ color: #444;}
a:hover{ color: #444;}
a:visited{ color: #444;}
a:active{ color: #444;}

.brand-logo{width:135px;height:auto}
.navbar .nav-link{
  color:#4d4d4d;
  font-size:1rem;
  letter-spacing:.07em;
  position:relative;
}
.navbar .nav-link::after{
  content:"";
  position:absolute;
  left:.5rem;right:.5rem;bottom:.25rem;
  height:2px;background:var(--aapa-red);
  transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
.navbar .nav-link:hover::after{transform:scaleX(1)}


.hero-section {
    

    

  

    /* IMPORTANT */
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Main dropdown */
.custom-course-menu {
    min-width: 330px;
    padding: 12px 0 16px;
    border: 0;
    border-radius: 0 0 18px 18px;
    background: #fff;
    box-shadow: 0 15px 40px rgba(0,0,0,.12);
}

/* Main links */
.custom-course-menu .dropdown-item {
    
    
    
    
    transition: .25s ease;
    padding: 16px 32px 7px;
    color: #333;
    font-size: 15px;
    font-weight: 600; 
}

.custom-course-menu .dropdown-item:hover {
    color: var(--aapa-orange);
    background: #fafafa;
}

/* Acting & Modelling heading */
.course-menu-title {
    margin-top: 5px;
    padding: 12px 12px 12px!important;

    color: #333;
    font-size: 14px !important;;
    font-weight: 600;
    line-height: 1.5;
    text-transform: uppercase!important;
    text-decoration: none !important;
}
.course-menu-title:active {     color: #333; }
.course-menu-title:visited {     color: #333; }


/* Child courses */
.custom-course-menu .course-sub-item {
    position: relative;

    padding: 9px 30px 9px 52px;

    color: #666;
    font-size: 13px;
    font-weight: 400;
}

/* Vertical hierarchy line */
.custom-course-menu .course-sub-item::before {
    content: "";
    position: absolute;

    left: 36px;
    top: 0;
    bottom: 0;

    width: 1px;
    background: #e5e5e5;
}

/* Small dot */
.custom-course-menu .course-sub-item::after {
    content: "";
    position: absolute;

    left: 33px;
    top: 50%;

    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: #d5d5d5;

    transform: translateY(-50%);
}

.custom-course-menu .course-sub-item:hover {
    padding-left: 56px;
    color: var(--aapa-orange);
    background: #fafafa;
}

.custom-course-menu .course-sub-item:hover::after {
    background: var(--aapa-orange);
}
 /* =========================================
   COURSES DROPDOWN
========================================= */

.navbar .dropdown {
    position: relative;
}

.custom-course-menu {
    min-width: 290px;
    padding: 12px 0;

    border: 0;
    border-radius: 16px;

    background: #fff;

    box-shadow: 0 15px 40px rgba(0,0,0,.12);
}

.custom-course-menu {
    min-width: 330px;
    padding: 12px 0;

    border: 0;
    border-radius: 0 0 18px 18px;

    background: #fff;

    box-shadow: 0 15px 40px rgba(0,0,0,.12);
}


/* Normal main menu items */

.custom-course-menu .dropdown-item {
    padding: 13px 32px;

    color: #555;

    font-size: 15px;
    font-weight: 500;

    transition: all .25s ease;
}

.custom-course-menu .dropdown-item:hover {
    background: #f7f7f7;
    color: var(--aapa-orange);
}


/* School for Acting & Modelling heading */
 

/* Courses under the heading */

.custom-course-menu .course-sub-item {
    position: relative;

    padding: 8px 32px 8px 52px;

    color: #777;

    font-size: 13px;
    font-weight: 400;
}


/* Small line/dot before sub course */

.custom-course-menu .course-sub-item::before {
    content: "";

    position: absolute;

    left: 34px;
    top: 50%;

    width: 7px;
    height: 1px;

    background: #bbb;

    transform: translateY(-50%);
}


.custom-course-menu .course-sub-item:hover {
    padding-left: 57px;

    color: var(--aapa-orange);

    background: #fafafa;
}


.custom-course-menu .course-sub-item:hover::before {
    background: var(--aapa-orange);
}


/* FIX COURSES DROPDOWN OPEN / CLOSE */



/* Show only when Bootstrap adds .show */
#mainNav .custom-course-menu.show {
    display: block;
}
/* =========================================
   DESKTOP - OPEN ON HOVER
========================================= */

@media (min-width: 992px) {


    .custom-course-menu {
    min-width: 290px;
    padding: 12px 0;

    border: 0;
    border-radius: 16px;

    background: #fff;

    box-shadow: 0 0px 0px rgba(0,0,0,.12);
}


    .navbar .dropdown-menu {
        display: block  ;

        top: 100%;
        left: 0;

        margin-top: 0 !important;

        opacity: 0;
        visibility: hidden;

        transform: translateY(8px);

        pointer-events: none;

        transition:
            opacity .25s ease,
            transform .25s ease,
            visibility .25s ease;
    }
.custom-course-menu .dropdown-item {
    position: relative;

 

    color: #444;

  
    font-weight: 500;

    letter-spacing: .4px;

    text-transform: none;

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


    /* OPEN DROPDOWN */

    .navbar .dropdown:hover > .dropdown-menu,
    .navbar .dropdown:focus-within > .dropdown-menu {
        opacity: 1;
        visibility: visible;

        transform: translateY(0);

        pointer-events: auto;
    }


    /* COURSES TEXT COLOR */

    .navbar .dropdown:hover > .nav-link {
        color: var(--aapa-orange);
    }

}
/* Hero content */

.hero-content {
    position: relative;
    z-index: 2;

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

    text-align: center;
}


/* Text */

.hero-copy {
    color: #fff;
    width: 100%;
    max-width: 800px;

    margin: 0 auto;
}


.hero-copy .eyebrow {
    font-size: 16px;
    letter-spacing: 3px;
    text-transform: uppercase;
}


.hero-copy h1 {
    font-size: 48px;
    font-weight: 300;
}
 
.next-section{background:#fff}
.next-title{
  border-top:1px solid #cfcfcf;
  border-bottom:1px solid #cfcfcf;
  padding:18px 8px;
 
  font-size:2rem;
  letter-spacing:.03em;
}
.next-title strong{display:block;font-weight:500}
.megaphone{
  width:100px;height:100px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--aapa-orange);color:#fff;
  font-size:1.4rem;
}
.megaphone img {width:60px;height:auto}
.feature-card{
  border:1px solid #aaa;
  border-radius:36px;
  padding:30px 30px 24px;
  min-height:220px;
  transition:.3s ease;
  background:#fff;
}
.feature-card:hover{
  transform:translateY(-7px);
  box-shadow:0 16px 40px rgba(0,0,0,.08);
}
 

.mini-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    color:#555
    font-size:1rem;font-weight:700;letter-spacing:.05em
}

.color-dots {
    display: flex;
    align-items: center;
    gap: 4px;
}

.color-dots .dot {
    display: block;

    width: 16px;
    height: 16px;

    border-radius: 50%;
    flex-shrink: 0;
}

/* Individual colours */

.color-dots .orange {
    background-color: var(--aapa-orange);
}

.color-dots .red {
    background-color: var(--aapa-red);
}

.color-dots .blue {
    background-color: var(--aapa-blue);
}

.color-dots .cyan {
    background-color: var(--aapa-cyan);
}


/* WORKSHOP text */

.kicker-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #333;
}




.next-icon img{ height:120px; margin-bottom:20px; margin-top:40px; }

.nextimg{ height:140px !important;   }

.feature-card p{font-size:.8rem}
.feature-card h3{font-weight:400;letter-spacing:.08em}
.section-title{font-size:2rem;font-weight:400;letter-spacing:.05em}
.section-subtitle{font-size:.86rem;letter-spacing:.08em;color:#666}
.course-card{
  border:1px solid #aaa;
  border-radius:34px;
  padding:44px 32px 30px;
  background:#fff;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  position:relative;
  overflow:hidden;
}
.course-card::before{
  content:"";
  position:absolute;left:0;top:0;width:100%;height:4px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s ease;
  background:linear-gradient(90deg,var(--aapa-orange),var(--aapa-red),var(--aapa-blue));
}
.course-card:hover{transform:translateY(-9px);box-shadow:0 18px 44px rgba(0,0,0,.11);border-color:#888}
.course-card:hover::before{transform:scaleX(1)}
.course-badge{
  display:inline-block;
  color:#fff;
  
  line-height:1;
  padding:7px 12px;
  min-width:128px;
}
.badge-workshop{background:var(--aapa-orange)}
.badge-certificate{background:var(--aapa-red)}
.badge-diploma{background:var(--aapa-blue)}
.course-prefix{font-size:1rem;margin:16px 0 0;color:#555}
.course-card h3{font-size:1.75rem;font-weight:400;letter-spacing:.05em;margin-bottom:14px}
.course-image{width:100%;height:150px;object-fit:cover;display:block;margin-bottom:14px}
.course-text{font-size:1rem;line-height:1.35;min-height:74px;color:#555; text-align:left-justify}
.course-btn{
  color:#fff!important;
  border-radius:999px;
  padding:9px 22px;
  font-size:1rem;
  font-weight:600;
  border:0;
  transition:.25s ease;
}
.course-btn:hover{transform:translateY(-2px);filter:brightness(.95)}
.btn-workshop{background:var(--aapa-orange)}
.btn-workshop:hover{background:#b77823}
.btn-certificate{background:var(--aapa-red)}
.btn-certificate:hover{background:#cd3340}
.btn-diploma{background:var(--aapa-blue)}
.btn-diploma:hover{background:#0f4066}


.footer-logos{background:#f0f0f0}
.footer-logos img{ max-height:100px;object-fit:contain}
.copyright{background:var(--aapa-red);color:#fff;font-size:.8rem}

.copyright a:link { color:#fff; text-decoration: none; margin-right: 10px; }
.copyright a:hover,a:visited { color:#fff; text-decoration: none; }

.back-to-top{
  position:fixed;right:20px;bottom:20px;z-index:1040;
  width:44px;height:44px;border:0;border-radius:50%;
  background:var(--aapa-blue);color:#fff;
  box-shadow:0 8px 25px rgba(0,0,0,.2);
  opacity:0;visibility:hidden;transform:translateY(15px);
  transition:.25s ease;
}
.back-to-top.show{opacity:1;visibility:visible;transform:none}
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s ease,transform .7s ease;
}
.reveal.in-view{opacity:1;transform:none}
.delay-1{transition-delay:.12s}
.delay-2{transition-delay:.24s}


.course-filters {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.course-filter {
    border: 0;
    background: transparent;
    padding: 4px 5px;

    color: #666;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;

    cursor: pointer;

    transition: color 0.3s ease;
}

.course-filter:hover {
    color: var(--aapa-orange);
}

.course-filter.active {
    color: var(--aapa-orange);
    font-weight: 600;
}

/* Filtering animation */

.course-item {
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.course-item.filter-hide {
    display: none;
}


@media (max-width: 991.98px){
  .py-lg-6{padding-top:4rem;padding-bottom:4rem}
  .navbar-nav{padding-top:1rem}
  
.custom-course-menu {
    min-width: 330px;
    padding: 12px 0;
    border: 0;
    border-radius: 0 0 18px 18px;
    background: #fff;
    box-shadow: 0 0px 0px rgba(0, 0, 0, .12);
}
  .navbar .dropdown-menu {
        display: block;

        opacity: 1;
        visibility: visible;

        transform: translateY(10px);

        transition:
            opacity .25s ease,
            transform .25s ease,
            visibility .25s ease;

        pointer-events: none;
    }


    .navbar .dropdown:hover > .dropdown-menu {
        opacity: 1;
        visibility: visible;

        transform: translateY(0);

        pointer-events: auto;
    }

}
@media (max-width: 575.98px){
  .brand-logo{width:110px}
 
  .hero-copy h1{font-size:2rem}
  .next-title{font-size:1.05rem}
  .course-card{padding:36px 24px 26px}
  .section-title{font-size:1.2rem}
  .section-subtitle{line-height:1.8}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
}


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

.about-hero {
    position: relative;

    min-height: 380px;

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

    background:
        url("../images/bg1.jpg")
        center center / cover no-repeat;
}


.about-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .55),
            rgba(0, 0, 0, .25)
        );
}


.about-hero-content {
    position: relative;

    z-index: 2;

    color: #fff;
}


.about-eyebrow {
    margin-bottom: 12px;

    font-size: 13px;

    letter-spacing: 3px;

    font-weight: 500;
}


.about-hero h1 {
    margin: 0;

    font-size: clamp(42px, 6vw, 72px);

    font-weight: 300;

    letter-spacing: 3px;
}


.about-hero-subtitle {
    margin-top: 15px;
    margin-bottom: 0;

    font-size: 18px;

    font-weight: 300;

    letter-spacing: 2px;
}



/* =========================================
   COLOR DOTS
========================================= */

.color-dots {
    display: flex;
    align-items: center;

    gap: 4px;
}


.color-dots .dot {
    display: block;

    width: 15px;
    height: 15px;

    border-radius: 50%;
}


.dot.orange {
    background: var(--aapa-orange);
}

.dot.red {
    background: var(--aapa-red);
}

.dot.blue {
    background: var(--aapa-blue);
}

.dot.cyan {
    background: var(--aapa-cyan);
}



/* =========================================
   STORY
========================================= */

.about-story {
    background: #fff;
}


.section-label {
    margin-bottom: 10px;

    color: #777;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 3px;
}


.story-heading h2 {
  /*  max-width: 480px;*/

    font-size: clamp(30px, 4vw, 48px);

    font-weight: 300;

    line-height: 1.2;
}


.story-heading h2 span {
    color: var(--aapa-orange);

    font-weight: 500;
}


.story-content {
    border-left: 1px solid #ddd;

    padding-left: 45px;
}


.story-content p {
    color: #555;

    font-size: 15px;

    line-height: 1.9;
}


.story-content p:last-child {
    margin-bottom: 0;
}



/* =========================================
   DIVISIONS
========================================= */

.alchemy-divisions {
    background: #f7f7f7;
}


.section-title {
    font-size: clamp(26px, 3vw, 38px);

    font-weight: 300;

    letter-spacing: 1px;
}


.section-description {
    /*max-width: 650px;*/

    color: #777;

    line-height: 1.8;
}


.division-card {
    position: relative;

    min-height: 245px;

    padding: 42px 32px;

    overflow: hidden;

    background: #fff;

    border: 1px solid #cfcfcf;

    border-radius: 34px;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


.division-card:hover {
    transform: translateY(-8px);

    border-color: #999;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .09);
}


.division-number {
    display: inline-flex;

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

    width: 45px;
    height: 45px;

    margin-bottom: 28px;

    border-radius: 50%;

    color: #fff;

    font-size: 13px;

    font-weight: 600;
}


.orange-bg {
    background: var(--aapa-orange);
}

.red-bg {
    background: var(--aapa-red);
}

.blue-bg {
    background: var(--aapa-blue);
}

.cyan-bg {
    background: var(--aapa-cyan);
}


.division-card h3 {
    margin-bottom: 15px;

    color: #333;

    font-size: 20px;

    font-weight: 500;

    line-height: 1.4;
}


.division-card p {
    margin-bottom: 0;

    color: #777;

    font-size: 14px;

    line-height: 1.7;
}



/* =========================================
   VISION MISSION
========================================= */

.vision-mission {
    background: #fff;
}


.vm-card {
    position: relative;

    padding: 60px;

    overflow: hidden;

    border-radius: 42px;

    color: #fff;
}


.vision-card {
    background:
        linear-gradient(
            135deg,
            #15577e,
            #237aa7
        );
}


.mission-card {
    background:
        linear-gradient(
            135deg,
            #e83d51,
            #f2616f
        );
}


.vm-label {
    display: inline-block;

    margin-bottom: 30px;

    padding-bottom: 8px;

    border-bottom: 2px solid rgba(255,255,255,.7);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 4px;
}


.vm-card h2 {
    margin-bottom: 30px;

    font-size: clamp(35px, 4vw, 52px);

    font-weight: 300;

    line-height: 1.15;
}


.vm-card p {
    max-width: 600px;

    color: rgba(255,255,255,.9);

    font-size: 15px;

    line-height: 1.8;
}



/* =========================================
   CLOSING
========================================= */

.about-closing {
    padding: 100px 0;

    background: #fafafa;
}


.closing-content p {
    margin-bottom: 18px;

    color: var(--aapa-orange);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 4px;
}


.closing-content h2 {
    margin: 0;

    color: #333;

    font-size: clamp(30px, 4vw, 48px);

    font-weight: 300;

    line-height: 1.4;
}



/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {

    .about-hero {
        min-height: 320px;
    }


    .story-content {
        border-left: 0;

        padding-left: 0;
    }


    .vm-card {
        padding: 45px 35px;
    }

}


@media (max-width: 575px) {

    .about-hero {
        min-height: 270px;
    }


    .about-hero h1 {
        font-size: 38px;
    }


    .about-hero-subtitle {
        font-size: 14px;
    }


    .division-card {
        padding: 35px 25px;

        border-radius: 28px;
    }


    .vm-card {
        padding: 40px 27px;

        border-radius: 30px;
    }


    .about-closing {
        padding: 70px 0;
    }

}

/* =========================================
   CORE TEAM
========================================= */

.core-team {
    background: #fff;
}


.team-card {
    cursor: pointer;

    overflow: hidden;

    background: #fff;

    border: 1px solid #d2d2d2;

    border-radius: 34px;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


.team-card:hover {
    transform: translateY(-8px);

    border-color: #aaa;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .10);
}



/* PHOTO */

.team-image-wrap {
    position: relative;

    height: 330px;

    overflow: hidden;

    background: #eee;
}


.team-image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .5s ease;
}


.team-card:hover .team-image {
    transform: scale(1.06);
}



/* IMAGE OVERLAY */

.team-overlay {
    position: absolute;

    inset: 0;

    display: flex;

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

    background: rgba(0, 0, 0, .45);

    opacity: 0;

    transition: opacity .35s ease;
}


.team-card:hover .team-overlay {
    opacity: 1;
}


.team-overlay span {
    padding: 10px 20px;

    border: 1px solid rgba(255,255,255,.8);

    border-radius: 30px;

    color: #fff;

    font-size: 12px;

    font-weight: 500;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}



/* TEAM NAME */

.team-info {
    padding: 25px 25px 28px;

    text-align: center;
}


.team-info h3 {
    margin-bottom: 12px;

    color: #333;

    font-size: 17px;

    font-weight: 500;
}


.profile-link {
    color: var(--aapa-orange);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1.5px;
}



/* =========================================
   TEAM PROFILE MODAL
========================================= */

.team-modal .modal-content {
    overflow: hidden;

    border: 0;

    border-radius: 35px;

    box-shadow:
        0 25px 80px rgba(0, 0, 0, .25);
}


.team-modal .modal-dialog {
    padding: 15px;
}


.team-close {
    position: absolute;

    top: 22px;
    right: 22px;

    z-index: 10;

    width: 38px;
    height: 38px;

    padding: 10px;

    background-color: #fff;

    border-radius: 50%;

    opacity: 1;
}



/* PROFILE IMAGE */

.profile-photo {
    height: 100%;
    min-height: 600px;

    background: #eee;
}


.profile-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}



/* PROFILE CONTENT */

.profile-content {
    padding: 70px 60px;
}


.profile-label {
    margin-bottom: 10px;

    color: #888;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 3px;
}


.profile-content h2 {
    margin-bottom: 20px;

    color: #333;

    font-size: clamp(30px, 4vw, 46px);

    font-weight: 300;
}


.profile-line {
    width: 65px;
    height: 3px;

    margin-bottom: 30px;

    background: var(--aapa-orange);
}


.profile-content p {
    color: #666;

    font-size: 14px;

    line-height: 1.9;
}



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

@media (max-width: 991px) {

    .profile-photo {
        min-height: 450px;
        height: 450px;
    }


    .profile-content {
        padding: 45px 35px;
    }

}


@media (max-width: 575px) {

    .team-image-wrap {
        height: 370px;
    }


    .team-card {
        border-radius: 28px;
    }


    .profile-photo {
        height: 380px;
        min-height: 380px;
    }


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


    .team-modal .modal-content {
        border-radius: 25px;
    }

}

 


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

.course-hero {

    position: relative;

    min-height: 620px;

    background:
        url("../images/bg1.jpg")
        center center / cover no-repeat;

}


.course-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.82) 0%,
            rgba(0,0,0,.60) 45%,
            rgba(0,0,0,.12) 100%
        );

}


.course-hero-content {

    position: relative;

    z-index: 2;

}


.min-vh-course {

    min-height: 620px;

}


.hero-eyebrow {

    color: #fff;

    font-size: 13px;

    font-weight: 500;

    letter-spacing: 3px;

}


.course-hero h1 {

    max-width: 820px;

    margin: 18px 0;

    color: #fff;

    font-size:
        clamp(42px, 5.5vw, 72px);

    font-weight: 300;

    line-height: 1.12;

}


.course-hero h1 span {

    color: var(--aapa-orange);

}


.hero-description {

    color:
        rgba(255,255,255,.85);

    font-size: 18px;

    letter-spacing: 1px;

}


.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 32px;

}


.btn-alchemy-primary {

    padding: 12px 28px;

    border-radius: 40px;

    background:
        var(--aapa-orange);

    color: #fff;

    font-size: 13px;

    font-weight: 600;

}


.btn-alchemy-primary:hover {

    background: #dd8d0f;

    color: #fff;

}


.btn-alchemy-outline {

    padding: 12px 28px;

    border: 1px solid #fff;

    border-radius: 40px;

    color: #fff;

    font-size: 13px;

}


.btn-alchemy-outline:hover {

    background: #fff;

    color: #222;

}



/* ======================================================
   INTRO
====================================================== */

.intro-heading h2 {

    max-width: 500px;

    font-size:
        clamp(32px, 4vw, 48px);

    font-weight: 300;

    line-height: 1.25;

}


.intro-heading h2 span {

    display: block;

    color: var(--aapa-orange);

    font-weight: 500;

}


.intro-copy {

    padding-left: 45px;

    border-left:
        1px solid #ddd;

}


.intro-copy p {

    color: #555;

    font-size: 15px;

    line-height: 1.9;

}



/* ======================================================
   TRAINING
====================================================== */

.training-experience {

    background: #f7f7f7;

}


.training-card {

    height: 100%;

    min-height: 175px;

    padding: 30px 20px;

    text-align: center;

    background: #fff;

    border: 1px solid #ddd;

    border-radius: 28px;

    transition: .3s ease;

}


.training-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.08);

}


.training-icon {

    display: block;

    margin-bottom: 18px;

    font-size: 35px;

}


.training-card h3 {

    margin: 0;

    font-size: 14px;

    font-weight: 500;

}



/* ======================================================
   ELIGIBILITY
====================================================== */

.eligibility-strip {

    padding: 65px 0;

    background:
        var(--aapa-blue);

    color: #fff;

}


.eligibility-small {

    font-size: 11px;

    letter-spacing: 3px;

}


.eligibility-content h2 {

    margin: 12px 0;

    font-size:
        clamp(28px, 4vw, 42px);

    font-weight: 300;

}


.eligibility-content h2 strong {

    font-weight: 600;

}


.eligibility-content p {

    margin: 0;

    color:
        rgba(255,255,255,.8);

}


.eligibility-btn {

    padding: 13px 27px;

    border-radius: 40px;

    background: #fff;

    color: var(--aapa-blue);

    font-weight: 600;

}



/* ======================================================
   TESTIMONIAL
====================================================== */

.testimonials-section {

    background: #fff;

}


.testimonial-video {

    overflow: hidden;

    border: 1px solid #ddd;

    border-radius: 30px;

    background: #fff;

}


.video-thumbnail {

    position: relative;

    height: 250px;

    overflow: hidden;

}


.video-thumbnail img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


.video-thumbnail::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        rgba(0,0,0,.20);

}


.play-button {

    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 2;

    transform:
        translate(-50%,-50%);

    width: 65px;
    height: 65px;

    border: 0;

    border-radius: 50%;

    background:
        rgba(255,255,255,.95);

    color: var(--aapa-red);

    font-size: 22px;

}


.testimonial-caption {

    padding: 25px;

}


.testimonial-caption span {

    font-size: 10px;

    letter-spacing: 2px;

    color: var(--aapa-orange);

}


.testimonial-caption h3 {

    margin-top: 8px;

    font-size: 16px;

    font-weight: 500;

}



/* ======================================================
   PROGRAMS
====================================================== */

.programs-section {

    background: #f6f6f6;

}


.program-filters {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

}


.program-filter {

    border: 0;

    background: transparent;

    color: #777;

    font-size: 12px;

    letter-spacing: 1px;

    font-weight: 500;

}


.program-filter:hover,
.program-filter.active {

    color:
        var(--aapa-orange);

}


.program-item {

    transition:
        opacity .3s ease,
        transform .3s ease;

}


.program-hidden {

    display: none;

}



/* CARD */

.program-card {

    padding: 38px 30px 30px;

    background: #fff;

    border: 1px solid #bbb;

    border-radius: 35px;

    transition: .35s ease;

}


.program-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.10);

}


.program-badge {

    display: inline-block;

    min-width: 130px;

    padding: 7px 12px;

    color: #fff;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 1px;

}


.badge-workshop {

    background:
        var(--aapa-orange);

}


.badge-certificate {

    background:
        var(--aapa-red);

}


.program-type {

    margin:
        20px 0 5px;

    color: #777;

    font-size: 10px;

    letter-spacing: 2px;

}


.program-card h3 {

    min-height: 58px;

    margin-bottom: 5px;

    font-size: 25px;

    font-weight: 400;

    line-height: 1.2;

}


.program-medium {

    display: block;

    min-height: 32px;

   /* margin-bottom: 15px;*/

    color: #888;

    font-size: 9px;

    letter-spacing: 1.5px;

}


.program-image {

    height: 190px;

    margin-bottom: 16px;

    overflow: hidden;

}


.program-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .5s ease;

}


.program-card:hover
.program-image img {

    transform:
        scale(1.05);

}


.program-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-bottom: 18px;

}


.program-meta span {

    padding: 5px 9px;

    border-radius: 20px;

    background: #f2f2f2;

    color: #666;

    font-size: 9px;

}


.program-card > p:last-of-type {

    min-height: 88px;

    color: #666;

    font-size: 12px;

    line-height: 1.6;

}


.program-btn {

    padding: 9px 22px;

    border: 0;

    border-radius: 40px;

    color: #fff;

    font-size: 11px;

    font-weight: 600;

}


.btn-workshop {

    background:
        var(--aapa-orange);

}


.btn-certificate {

    background:
        var(--aapa-red);

}


.program-btn:hover {

    color: #fff;

    filter:
        brightness(.92);

}



/* ======================================================
   MODAL
====================================================== */

.program-modal
.modal-content {

    border: 0;

    border-radius: 35px;

    overflow: hidden;

}


.program-modal
.modal-body {

    position: relative;

    padding: 65px;

}


.modal-close {

    position: absolute;

    top: 25px;
    right: 25px;

    z-index: 10;

}


.modal-program-label {

    display: inline-block;

    padding: 7px 14px;

    margin-bottom: 20px;

    color: #fff;

    font-size: 10px;

    letter-spacing: 2px;

}


.workshop-label {

    background:
        var(--aapa-orange);

}


.certificate-label {

    background:
        var(--aapa-red);

}


.program-modal h2 {

    margin-bottom: 5px;

    font-size:
        clamp(32px, 4vw, 48px);

    font-weight: 300;

}


.modal-subtitle {

    color: #777;

    font-size: 13px;

    letter-spacing: 2px;

}


.program-divider {

    width: 70px;

    height: 3px;

    margin: 25px 0 35px;

    background:
        var(--aapa-orange);

}


.program-modal p {

    color: #555;

    font-size: 14px;

    line-height: 1.9;

}


.program-modal h3 {

    margin:
        40px 0 20px;

    font-size: 22px;

    font-weight: 500;

}


.benefit-list {

    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 12px;

}


.benefit-list div {

    position: relative;

    padding:
        15px 16px 15px 40px;

    background: #f7f7f7;

    border-radius: 12px;

    color: #555;

    font-size: 13px;

}


.benefit-list div::before {

    content: "✓";

    position: absolute;

    left: 15px;

    color:
        var(--aapa-orange);

    font-weight: 700;

}


.program-quote {

    margin-top: 35px;

    padding: 25px 30px;

    border-left:
        4px solid
        var(--aapa-orange);

    background: #fafafa;

    color: #333;

    font-size: 16px;

    font-style: italic;

    line-height: 1.7;

}



/* STATS */

.course-stats {

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 10px;

    margin-bottom: 35px;

}


.course-stats div {

    padding: 18px;

    text-align: center;

    background: #f7f7f7;

    border-radius: 15px;

}


.course-stats strong {

    display: block;

    color:
        var(--aapa-red);

    font-size: 23px;

}


.course-stats span {

    color: #777;

    font-size: 10px;

    text-transform: uppercase;

}



/* ======================================================
   CTA
====================================================== */

.course-cta {

    padding: 100px 0;

    background: #fff;

}


.course-cta-content > p:first-of-type {

    color:
        var(--aapa-orange);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 3px;

}


.course-cta h2 {

    margin:
        18px 0;

    font-size:
        clamp(34px, 5vw, 55px);

    font-weight: 300;

}


.cta-description {

    max-width: 700px;

    margin:
        0 auto 30px;

    color: #666;

    line-height: 1.8;

}



/* ======================================================
   RESPONSIVE
====================================================== */

@media
(max-width: 991px) {

    .course-hero,
    .min-vh-course {

        min-height: 520px;

    }


    .intro-copy {

        padding-left: 0;

        border-left: 0;

    }


    .benefit-list {

        grid-template-columns: 1fr;

    }


    .course-stats {

        grid-template-columns:
            repeat(2,1fr);

    }

}


@media
(max-width: 575px) {

    .course-hero,
    .min-vh-course {

        min-height: 480px;

    }


    .course-hero h1 {

        font-size: 38px;

    }


    .program-card {

        padding:
            32px 24px 26px;

        border-radius: 28px;

    }


    .program-modal
    .modal-body {

        padding:
            55px 25px 35px;

    }


    .program-modal
    .modal-content {

        border-radius: 25px;

    }


    .course-stats {

        grid-template-columns:
            repeat(2,1fr);

    }

}
.gallery-hero {
    position: relative;
    min-height: 380px;

    display: flex;
    align-items: center;

    background:
        url("../images/bg1.jpg")
        center / cover no-repeat;
}

.gallery-hero-overlay {
    position: absolute;
    inset: 0;

    background: rgba(0,0,0,.55);
}

.gallery-hero-content {
    position: relative;
    z-index: 2;

    max-width: 750px;
    margin: auto;

    color: #fff;
}

.gallery-hero h1 {
    margin: 10px 0 15px;

    font-size: clamp(45px, 6vw, 70px);
    font-weight: 300;
    letter-spacing: 3px;
}

.gallery-hero p:last-child {
    color: rgba(255,255,255,.85);
    line-height: 1.8;
}

.hero-eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 3px;
}


/* FILTER */

.gallery-filters {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;
}

.gallery-filter {
    padding: 5px;

    border: 0;
    background: transparent;

    color: #777;

    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;

    transition: .3s ease;
}

.gallery-filter:hover,
.gallery-filter.active {
    color: var(--aapa-orange);
}

.gallery-hidden {
    display: none;
}


/* IMAGE */

.gallery-card {
    position: relative;

    height: 310px;

    overflow: hidden;

    border-radius: 30px;

    cursor: pointer;
}

.gallery-tall {
    height: 390px;
}

.gallery-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .6s ease;
}

.gallery-card:hover img {
    transform: scale(1.07);
}


/* OVERLAY */

.gallery-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: flex-end;

    padding: 30px;

    color: #fff;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.80),
            rgba(0,0,0,.05) 65%
        );

    transition: .35s ease;
}

.gallery-overlay span {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;

    color: var(--aapa-orange);
}

.gallery-overlay h3 {
    margin: 7px 0 0;

    font-size: 20px;
    font-weight: 400;
}

.gallery-plus {
    position: absolute;

    right: 25px;
    bottom: 25px;

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

    width: 40px;
    height: 40px;

    border: 1px solid rgba(255,255,255,.7);
    border-radius: 50%;

    font-size: 23px;

    transition: .3s;
}

.gallery-card:hover .gallery-plus {
    background: #fff;
    color: #222;
}


/* MODAL */

.gallery-modal .modal-content {
    position: relative;

    overflow: hidden;

    border: 0;
    border-radius: 25px;

    background: #111;
}

.gallery-modal img {
    width: 100%;
    max-height: 80vh;

    object-fit: contain;
}

.gallery-close {
    position: absolute;

    top: 20px;
    right: 20px;

    z-index: 5;

    width: 38px;
    height: 38px;

    padding: 10px;

    border-radius: 50%;

    background-color: #fff;

    opacity: 1;
}

.gallery-modal-caption {
    padding: 20px 25px;

    color: #fff;
}

.gallery-modal-caption h3 {
    margin: 0;

    font-size: 17px;
    font-weight: 400;
}


@media (max-width: 767px) {

    .gallery-card,
    .gallery-tall {
        height: 330px;
    }

    .gallery-hero {
        min-height: 300px;
    }

}
/* ==========================================
   CONTACT HERO
========================================== */

.contact-hero {
    position: relative;

    min-height: 380px;

    display: flex;
    align-items: center;

    background:
        url("../images/bg1.jpg")
        center / cover no-repeat;
}

.contact-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.65),
            rgba(0,0,0,.30)
        );
}

.contact-hero-content {
    position: relative;
    z-index: 2;

    color: #fff;
}

.contact-eyebrow {
    margin-bottom: 10px;

    font-size: 11px;
    font-weight: 500;

    letter-spacing: 3px;
}

.contact-hero h1 {
    margin-bottom: 15px;

    font-size: clamp(45px, 6vw, 70px);

    font-weight: 300;

    letter-spacing: 3px;
}

.contact-hero-content > p:last-child {
    color: rgba(255,255,255,.85);

    font-size: 16px;
}


/* ==========================================
   CONTACT INTRO
========================================== */

.contact-intro {
    margin-bottom: 45px;
}

.contact-intro h2 {
    max-width: 450px;

    margin-bottom: 25px;

    color: #333;

    font-size: clamp(32px, 4vw, 48px);

    font-weight: 300;

    line-height: 1.25;
}

.contact-intro h2 span {
    color: var(--aapa-orange);

    font-weight: 500;
}

.contact-description {
    max-width: 500px;

    color: #777;

    font-size: 14px;

    line-height: 1.8;
}


/* ==========================================
   DETAILS
========================================== */

.contact-detail {
    display: flex;

    gap: 20px;

    margin-bottom: 30px;

    padding-bottom: 30px;

    border-bottom: 1px solid #eee;
}

.contact-icon {
    flex: 0 0 52px;

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

    width: 52px;
    height: 52px;

    border-radius: 50%;

    color: #fff;

    font-size: 20px;
}

.orange-icon {
    background: var(--aapa-orange);
}

.red-icon {
    background: var(--aapa-red);
}

.blue-icon {
    background: var(--aapa-blue);
}

.contact-detail span {
    color: #999;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 2px;
}

.contact-detail h3 {
    margin: 5px 0 8px;

    color: #333;

    font-size: 16px;

    font-weight: 500;
}

.contact-detail p {
    margin: 0;

    color: #777;

    font-size: 13px;

    line-height: 1.7;
}


/* ==========================================
   FORM
========================================== */

.contact-form-card {
    padding: 55px;

    background: #f7f7f7;

    border-radius: 40px;
}

.form-small-title {
    margin-bottom: 8px;

    color: var(--aapa-red);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 3px;
}

.contact-form-card h2 {
    margin-bottom: 10px;

    color: #333;

    font-size: 38px;

    font-weight: 300;
}

.form-intro {
    margin-bottom: 35px;

    color: #777;

    font-size: 13px;
}

.contact-form-card .form-control,
.contact-form-card .form-select {
    min-height: 60px;

    border: 1px solid #ddd;

    border-radius: 12px;

    background-color: #fff;

    box-shadow: none;
}

.contact-form-card .form-control:focus,
.contact-form-card .form-select:focus {
    border-color: var(--aapa-orange);

    box-shadow:
        0 0 0 .2rem
        rgba(246,162,26,.10);
}

.contact-message {
    min-height: 150px !important;
}

.contact-submit {
    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding: 13px 28px;

    border: 0;

    border-radius: 50px;

    background: var(--aapa-orange);

    color: #fff;

    font-size: 12px;

    font-weight: 600;

    transition: .3s ease;
}

.contact-submit span {
    font-size: 20px;

    transition: transform .3s ease;
}

.contact-submit:hover {
    background: #df8e0e;

    color: #fff;
}

.contact-submit:hover span {
    transform: translateX(5px);
}


/* ==========================================
   MAP
========================================== */

.location-map {
    height: 450px;

    overflow: hidden;
}

.location-map iframe {
    display: block;

    width: 100%;
    height: 100%;
}


/* ==========================================
   BOTTOM CTA
========================================== */

.contact-bottom {
    padding: 65px 0;

    background: var(--aapa-blue);

    color: #fff;
}

.contact-bottom p {
    margin-bottom: 8px;

    color: rgba(255,255,255,.7);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 3px;
}

.contact-bottom h2 {
    margin: 0;

    font-size: clamp(27px, 4vw, 40px);

    font-weight: 300;
}

.contact-course-btn {
    padding: 12px 26px;

    border-radius: 40px;

    background: #fff;

    color: var(--aapa-blue);

    font-size: 12px;

    font-weight: 600;
}

.contact-course-btn:hover {
    background: var(--aapa-orange);

    color: #fff;
}


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

@media (max-width: 991px) {

    .contact-form-card {
        padding: 40px;
    }

    .contact-bottom {
        text-align: center;
    }

}

@media (max-width: 575px) {

    .contact-hero {
        min-height: 300px;
    }

    .contact-form-card {
        padding: 35px 22px;

        border-radius: 28px;
    }

    .contact-detail {
        gap: 15px;
    }

}
/* =========================================================
   HERO
========================================================= */

.kids-hero {

    position: relative;

    min-height: 620px;

    display: flex;
    align-items: center;

    background:
        url("../images/kids-theatre-hero.jpg")
        center center / cover no-repeat;

}


.kids-hero-overlay {

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(14,19,25,.88) 0%,
            rgba(14,19,25,.68) 46%,
            rgba(14,19,25,.12) 100%
        );

}


.kids-hero-container {

    position: relative;
    z-index: 2;

}


.kids-hero-container > .row {

    min-height: 620px;

}


.hero-eyebrow {

    margin-bottom: 14px;

    color: rgba(255,255,255,.85);

    font-size: 12px;

    font-weight: 500;

    letter-spacing: 3px;

}


.kids-hero h1 {

    max-width: 800px;

    margin-bottom: 22px;

    color: #fff;

    font-size:
        clamp(45px, 6vw, 74px);

    font-weight: 300;

    line-height: 1.08;

}


.kids-hero h1 span {

    display: block;

    color: var(--aapa-orange);

    font-weight: 500;

}


.hero-intro {

    max-width: 680px;

    margin-bottom: 26px;

    color: rgba(255,255,255,.86);

    font-size: 17px;

    line-height: 1.8;

}


.hero-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 32px;

}


.hero-tags span {

    padding: 7px 13px;

    border:
        1px solid
        rgba(255,255,255,.3);

    border-radius: 30px;

    color: rgba(255,255,255,.9);

    font-size: 10px;

    letter-spacing: .5px;

}


.hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

}


.kids-primary-btn,
.kids-outline-btn {

    padding: 12px 27px;

    border-radius: 40px;

    font-size: 12px;

    font-weight: 600;

}


.kids-primary-btn {

    border: 1px solid
        var(--aapa-orange);

    background:
        var(--aapa-orange);

    color: #fff;

}


.kids-primary-btn:hover {

    background: #dd8e0f;

    border-color: #dd8e0f;

    color: #fff;

}


.kids-outline-btn {

    border: 1px solid #fff;

    color: #fff;

}


.kids-outline-btn:hover {

    background: #fff;

    color: #222;

}



/* =========================================================
   INTRODUCTION
========================================================= */

.intro-heading h2 {

    max-width: 460px;

    margin-bottom: 25px;

    color: #333;

    font-size:
        clamp(34px,4vw,50px);

    font-weight: 300;

    line-height: 1.2;

}


.intro-heading h2 span {

    display: block;

    color:
        var(--aapa-orange);

    font-weight: 500;

}


.intro-highlight {

    max-width: 400px;

    padding-left: 20px;

    border-left:
        3px solid
        var(--aapa-orange);

    color: #777;

    font-size: 14px;

    font-style: italic;

    line-height: 1.8;

}


.intro-content {

    padding-left: 45px;

    border-left:
        1px solid #ddd;

}


.intro-content p {

    color:
        var(--kids-text);

    font-size: 15px;

    line-height: 1.9;

}



/* =========================================================
   STATS
========================================================= */

.kids-stats {

    background:
        var(--aapa-blue);

}


.stat-box {

    padding: 45px 20px;

    text-align: center;

    border-right:
        1px solid
        rgba(255,255,255,.18);

}


.stat-box strong {

    display: block;

    margin-bottom: 8px;

    color: #fff;

    font-size:
        clamp(30px,4vw,45px);

    font-weight: 300;

}


.stat-box span {

    color:
        rgba(255,255,255,.70);

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 2px;

    text-transform: uppercase;

}



/* =========================================================
   SKILLS
========================================================= */

.kids-skills {

    background:
        var(--kids-light);

}
 

.skill-card {

    padding: 38px 30px;

    background: #fff;

    border:
        1px solid #d6d6d6;

    border-radius: 30px;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}


.skill-card:hover {

    transform:
        translateY(-7px);

    border-color: #aaa;

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.08);

}


.skill-number {

    display: flex;

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

    width: 42px;
    height: 42px;

    margin-bottom: 25px;

    border-radius: 50%;

    color: #fff;

    font-size: 11px;

    font-weight: 600;

}


.orange-bg {

    background:
        var(--aapa-orange);

}


.red-bg {

    background:
        var(--aapa-red);

}


.blue-bg {

    background:
        var(--aapa-blue);

}


.cyan-bg {

    background:
        var(--aapa-cyan);

}


.skill-card h3 {

    margin-bottom: 14px;

    color: #333;

    font-size: 18px;

    font-weight: 500;

}


.skill-card p {

    margin: 0;

    color: #777;

    font-size: 13px;

    line-height: 1.75;

}



/* =========================================================
   DEVELOPMENTAL DRAMA
========================================================= */

.development-section {

    background: #fff;

}


.development-copy h2 {

    margin-bottom: 25px;

    color: #333;

    font-size:
        clamp(34px,4vw,50px);

    font-weight: 300;

    line-height: 1.2;

}


.development-copy h2 span {

    display: block;

    color:
        var(--aapa-red);

    font-weight: 500;

}


.development-copy p {

    color: #666;

    line-height: 1.85;

}


.development-path {

    position: relative;

}


.development-path::before {

    content: "";

    position: absolute;

    top: 45px;
    bottom: 45px;
    left: 34px;

    width: 1px;

    background: #ddd;

}


.path-item {

    position: relative;

    display: flex;

    gap: 28px;

    margin-bottom: 25px;

}


.path-circle {

    position: relative;

    z-index: 2;

    flex: 0 0 68px;

    width: 68px;
    height: 68px;

    display: flex;

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

    border-radius: 50%;

    color: #fff;

    font-size: 12px;

    font-weight: 600;

}


.orange-path {

    background:
        var(--aapa-orange);

}


.red-path {

    background:
        var(--aapa-red);

}


.blue-path {

    background:
        var(--aapa-blue);

}


.cyan-path {

    background:
        var(--aapa-cyan);

}


.path-content {

    flex: 1;

    padding: 20px 25px;

    background: #f7f7f7;

    border-radius: 20px;

}


.path-content span {

    color: #999;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 2px;

}


.path-content h3 {

    margin:
        5px 0 9px;

    color: #333;

    font-size: 23px;

    font-weight: 400;

}


.path-content p {

    margin: 0;

    color: #777;

    font-size: 12px;

    line-height: 1.7;

}



/* =========================================================
   IMPACT
========================================================= */

.impact-section {

    position: relative;

    padding: 110px 0;

    background:
        url("../images/kids-impact.jpg")
        center center / cover no-repeat;

}


.impact-overlay {

    position: absolute;
    inset: 0;

    background:
        rgba(18,30,42,.82);

}


.impact-section .container {

    z-index: 2;

}


.impact-section p:first-child {

    color:
        var(--aapa-orange);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 3px;

}


.impact-section h2 {

    margin:
        15px auto 25px;

    color: #fff;

    font-size:
        clamp(34px,5vw,55px);

    font-weight: 300;

    line-height: 1.3;

}


.impact-section h2 strong {

    color:
        var(--aapa-orange);

    font-weight: 500;

}


.impact-line {

    width: 70px;
    height: 3px;

    margin:
        0 auto 25px;

    background:
        var(--aapa-orange);

}


.impact-description {

    max-width: 700px;

    margin: auto;

    color:
        rgba(255,255,255,.80);

    font-size: 14px;

    line-height: 1.8;

}



/* =========================================================
   CENTRES
========================================================= */

.centres-section {

    background: #fff;

}


.centre-card {

    padding: 38px 20px;

    text-align: center;

    border:
        1px solid #ddd;

    border-radius: 30px;

    transition: .3s ease;

}


.centre-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.07);

}


.centre-dot {

    display: block;

    width: 16px;
    height: 16px;

    margin:
        0 auto 20px;

    border-radius: 50%;

}


.centre-card h3 {

    margin-bottom: 5px;

    color: #333;

    font-size: 19px;

    font-weight: 500;

}


.centre-card p {

    margin: 0;

    color: #999;

    font-size: 11px;

    letter-spacing: 1px;

}



/* =========================================================
   PARENTS CTA
========================================================= */

.parents-cta {

    padding: 75px 0;

    background:
        var(--aapa-red);

    color: #fff;

}


.cta-small {

    display: block;

    margin-bottom: 10px;

    color:
        rgba(255,255,255,.7);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 3px;

}


.parents-cta h2 {

    margin-bottom: 15px;

    font-size:
        clamp(30px,4vw,42px);

    font-weight: 300;

}


.parents-cta h2 strong {

    display: block;

    font-weight: 600;

}


.parents-cta p {

    max-width: 750px;

    margin: 0;

    color:
        rgba(255,255,255,.80);

    font-size: 13px;

    line-height: 1.8;

}


.visit-kids-btn {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding: 13px 26px;

    border-radius: 40px;

    background: #fff;

    color:
        var(--aapa-red);

    font-size: 11px;

    font-weight: 600;

}


.visit-kids-btn span {

    font-size: 18px;

    transition:
        transform .3s ease;

}


.visit-kids-btn:hover {

    background:
        var(--aapa-orange);

    color: #fff;

}


.visit-kids-btn:hover span {

    transform:
        translateX(4px);

}



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

@media (max-width: 991px) {

    .kids-hero,
    .kids-hero-container > .row {

        min-height: 540px;

    }


    .intro-content {

        padding-left: 0;

        border-left: 0;

    }


    .stat-box {

        border-bottom:
            1px solid
            rgba(255,255,255,.15);

    }


    .parents-cta {

        text-align: center;

    }


    .parents-cta p {

        margin:
            0 auto 25px;

    }

}


@media (max-width: 575px) {

    .kids-hero,
    .kids-hero-container > .row {

        min-height: 500px;

    }


    .kids-hero h1 {

        font-size: 40px;

    }


    .hero-intro {

        font-size: 14px;

    }


    .skill-card {

        padding: 32px 24px;

        border-radius: 26px;

    }


    .development-path::before {

        left: 27px;

    }


    .path-circle {

        flex-basis: 55px;

        width: 55px;
        height: 55px;

    }


    .path-item {

        gap: 15px;

    }


    .path-content {

        padding: 17px;

    }


    .impact-section {

        padding: 80px 0;

    }

}
/* ==========================================
   COURSE DETAIL
========================================== */

.min-vh-60 {
    min-height: 600px;
}


/* HERO */

.course-detail-hero {
    position: relative;
    min-height: 600px;
    background-position: center;
    background-size: cover;
}

.acting-hero {
    background-image: url("../images/acting-hero.jpg");
}

.course-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(10, 12, 16, .90) 0%,
        rgba(10, 12, 16, .65) 50%,
        rgba(10, 12, 16, .12) 100%
    );
}

.course-detail-hero .container {
    z-index: 2;
}

.course-type {
    color: var(--aapa-orange);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.5px;
}

.course-detail-hero h1 {
    margin: 15px 0 5px;
    color: #fff;
    font-size: clamp(44px, 6vw, 72px);
    font-weight: 300;
    line-height: 1.05;
}

.course-detail-hero h1 strong {
    font-weight: 500;
}

.course-hero-subtitle {
    color: var(--aapa-orange);
    font-size: 22px;
    font-weight: 300;
}

.course-hero-text {
    max-width: 610px;
    margin: 22px 0 30px;
    color: rgba(255,255,255,.8);
    font-size: 15px;
    line-height: 1.8;
}

.course-enquire-btn {
    padding: 12px 28px;
    border-radius: 30px;
    background: var(--aapa-orange);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.course-enquire-btn:hover {
    background: var(--aapa-red);
    color: #fff;
}


/* QUICK INFO */

.course-quick-info {
    position: relative;
    z-index: 5;
    margin-top: -45px;
}

.quick-info-box {
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 15px 45px rgba(0,0,0,.1);
}

.quick-item {
    padding: 25px 15px;
    border-right: 1px solid #eee;
}

.quick-item:last-child {
    border-right: 0;
}

.quick-item span {
    display: block;
    margin-bottom: 6px;
    color: #999;
    font-size: 9px;
    letter-spacing: 1.5px;
}

.quick-item strong {
    color: #333;
    font-size: 14px;
    font-weight: 600;
}


/* CONTENT */

.course-heading {
    margin-top: 12px;
    color: #333;
    font-size: clamp(34px,4vw,48px);
    font-weight: 300;
    line-height: 1.2;
}

.course-heading span {
    display: block;
    color: var(--aapa-orange);
    font-weight: 500;
}

.course-content {
    padding-left: 40px;
    border-left: 1px solid #ddd;
}

.course-content p {
    color: #666;
    line-height: 1.9;
}


/* LEARNING */

.learning-section {
    background: #f7f7f7;
}

.learning-card {
    padding: 35px 28px;
    border: 1px solid #ddd;
    border-radius: 26px;
    background: #fff;
    transition: .3s ease;
}

.learning-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0,0,0,.07);
}

.learning-number {
    color: var(--aapa-orange);
    font-size: 11px;
    font-weight: 700;
}

.learning-card h3 {
    margin: 22px 0 12px;
    font-size: 19px;
}

.learning-card p {
    margin: 0;
    color: #777;
    font-size: 13px;
    line-height: 1.7;
}


/* WHO */

.who-image {
    height: 520px;
    overflow: hidden;
    border-radius: 35px;
}

.who-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.benefit-list {
    margin: 25px 0 0;
    padding: 0;
    list-style: none;
}

.benefit-list li {
    position: relative;
    padding: 11px 0 11px 30px;
    border-bottom: 1px solid #eee;
    color: #666;
    font-size: 14px;
}

.benefit-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--aapa-orange);
    font-weight: 700;
}


/* QUOTE */

.course-quote {
    padding: 80px 0;
    background: var(--aapa-blue);
    color: #fff;
}

.quote-mark {
    display: block;
    height: 50px;
    color: rgba(255,255,255,.2);
    font-size: 80px;
    line-height: 1;
}

.course-quote blockquote {
    margin: 0;
    font-size: clamp(22px,3vw,34px);
    font-weight: 300;
    line-height: 1.5;
}


/* ENQUIRY */

.course-enquiry {
    background: #f5f5f5;
}

.enquiry-wrapper {
    overflow: hidden;
    border-radius: 32px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0,0,0,.08);
}

.enquiry-info {
    padding: 55px 45px;
    background: #1c5d86;
    color: #fff;
}

.enquiry-info h2 {
    margin: 14px 0 20px;
    font-size: 38px;
    font-weight: 300;
}

.enquiry-info h2 strong {
    display: block;
    font-weight: 600;
}

.enquiry-info p {
    color: rgba(255,255,255,.75);
    line-height: 1.8;
}

.enquiry-course {
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px solid rgba(255,255,255,.2);
    font-size: 13px;
    line-height: 1.7;
}

.enquiry-form {
    padding: 55px;
}

.enquiry-form h3 {
    color: #333;
    font-size: 28px;
    font-weight: 500;
}

.enquiry-form > p {
    margin-bottom: 30px;
    color: #888;
    font-size: 13px;
}

.enquiry-form .form-label {
    color: #555;
    font-size: 11px;
    font-weight: 600;
}

.enquiry-form .form-control {
    min-height: 48px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: none;
}

.enquiry-form textarea.form-control {
    min-height: 110px;
}

.enquiry-form .form-control:focus {
    border-color: var(--aapa-orange);
}

.enquiry-submit {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
    padding: 12px 27px;
    border-radius: 30px;
    background: var(--aapa-orange);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.enquiry-submit:hover {
    background: var(--aapa-red);
    color: #fff;
}


/* RESPONSIVE */

@media (max-width: 991px) {

    .course-content {
        padding-left: 0;
        border-left: 0;
    }

    .who-image {
        height: 400px;
    }

    .enquiry-form,
    .enquiry-info {
        padding: 40px 30px;
    }
}

@media (max-width: 575px) {

    .course-detail-hero,
    .min-vh-60 {
        min-height: 520px;
    }

    .course-detail-hero h1 {
        font-size: 39px;
    }

    .course-quick-info {
        margin-top: -25px;
    }

    .quick-item {
        border-bottom: 1px solid #eee;
    }

    .who-image {
        height: 340px;
    }

    .enquiry-form,
    .enquiry-info {
        padding: 35px 22px;
    }
}


/* =====================================================
   ALUMNI HERO
===================================================== */

.alumni-hero {
    position: relative;
    background:
        url('../images/alumni-hero.jpg')
        center / cover no-repeat;
}

.alumni-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(10,15,20,.92),
            rgba(10,15,20,.60),
            rgba(10,15,20,.15)
        );
}

.alumni-hero-height {
    min-height: 570px;
}

.alumni-hero .container {
    z-index: 2;
}

.alumni-kicker {
    color: var(--aapa-orange);

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 2.5px;
}

.alumni-hero h1 {
    max-width: 720px;

    margin: 15px 0;

    color: #fff;

    font-size: clamp(42px,6vw,70px);
    font-weight: 300;

    line-height: 1.08;
}

.alumni-hero h1 strong {
    display: block;
    font-weight: 500;
}

.alumni-hero p {
    max-width: 600px;

    color: rgba(255,255,255,.78);

    font-size: 16px;
    line-height: 1.8;
}

.alumni-hero-btn,
.alumni-submit {
    display: inline-flex;
    align-items: center;

    gap: 18px;

    margin-top: 15px;
    padding: 13px 27px;

    border-radius: 30px;

    background: var(--aapa-orange);
    color: #fff;

    font-size: 12px;
    font-weight: 600;
}

.alumni-hero-btn:hover,
.alumni-submit:hover {
    background: var(--aapa-red);
    color: #fff;
}


/* INTRO */

.alumni-intro h2 {
    margin: 12px 0 20px;

    font-size: clamp(34px,4vw,48px);
    font-weight: 300;
}

.alumni-intro h2 strong {
    color: var(--aapa-orange);
    font-weight: 500;
}

.alumni-intro p {
    color: #777;
    line-height: 1.9;
}


/* =====================================================
   FORM
===================================================== */

.alumni-registration {
    background: #f5f5f5;
}

.alumni-form-wrapper {
    max-width: 1050px;
    margin: auto;

    overflow: hidden;

    border-radius: 30px;

    background: #fff;

    box-shadow:
        0 20px 60px rgba(0,0,0,.07);
}

.alumni-form-header {
    padding: 50px 55px;

    border-bottom: 1px solid #eee;
}

.alumni-form-header h2 {
    margin: 8px 0;

    color: #333;

    font-size: 35px;
    font-weight: 400;
}

.alumni-form-header p {
    margin: 0;
    color: #888;
}


/* SECTIONS */

.alumni-form-section {
    padding: 50px 55px;

    border-bottom: 1px solid #eee;
}

.form-section-title {
    display: flex;
    align-items: center;

    gap: 17px;

    margin-bottom: 32px;
}

.form-section-title > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--aapa-blue);
    color: #fff;

    font-size: 11px;
    font-weight: 600;
}

.form-section-title small {
    color: var(--aapa-orange);

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 1.5px;
}

.form-section-title h3 {
    margin: 2px 0 0;

    color: #333;

    font-size: 22px;
    font-weight: 500;
}


/* FIELDS */

.alumni-form-section .form-label {
    margin-bottom: 8px;

    color: #555;

    font-size: 11px;
    font-weight: 600;
}

.alumni-form-section .form-control,
.alumni-form-section .form-select {
    min-height: 49px;

    border: 1px solid #ddd;
    border-radius: 9px;

    box-shadow: none;
}

.alumni-form-section textarea.form-control {
    min-height: 100px;
}

.alumni-form-section .form-control:focus,
.alumni-form-section .form-select:focus {
    border-color: var(--aapa-orange);
}


/* CHECKBOX CARDS */

.activity-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 10px;
}

.activity-option {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 14px 16px;

    border: 1px solid #e4e4e4;
    border-radius: 10px;

    cursor: pointer;

    transition: .2s ease;
}

.activity-option:hover {
    border-color: var(--aapa-orange);
    background: #fffaf2;
}

.activity-option span {
    color: #555;
    font-size: 12px;
}


/* SUBMIT */

.submit-area {
    display: flex;
    align-items: center;

    gap: 25px;

    margin-top: 10px;
}

.submit-area small {
    color: #999;
}


/* MOBILE */

@media (max-width: 767px) {

    .alumni-hero-height {
        min-height: 520px;
    }

    .alumni-form-header,
    .alumni-form-section {
        padding: 35px 22px;
    }

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

    .submit-area {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   WORKSHOP SCHEDULE
========================================================= */

.workshop-schedule {
    background: #f7f7f7;
}

.workshop-subtitle {
    margin-top: 12px;
    color: #777;
    font-size: 15px;
}


/* LEFT CARD */

.workshop-info-card {
    padding: 35px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 15px 45px rgba(0,0,0,.06);
}

.workshop-small-label {
    display: block;
    margin-bottom: 8px;
    color: var(--aapa-orange);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

.workshop-info-card h3 {
    margin-bottom: 28px;
    color: #333;
    font-size: 23px;
    font-weight: 500;
}


/* DATES */

.workshop-dates {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 30px;
}

.workshop-date {
    display: flex;
    align-items: center;
    gap: 9px;
}

.workshop-date > strong {
    color: var(--aapa-blue);
    font-size: 42px;
    font-weight: 600;
    line-height: 1;
}

.workshop-date span,
.workshop-date small {
    display: block;
}

.workshop-date span {
    color: #333;
    font-size: 12px;
    font-weight: 700;
}

.workshop-date small {
    color: #999;
    font-size: 10px;
}

.date-or {
    color: #aaa;
    font-size: 9px;
    font-weight: 700;
}


/* FEE */

.workshop-fee {
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.workshop-fee > div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 9px 0;
}

.workshop-fee span {
    color: #777;
    font-size: 12px;
}

.workshop-fee strong {
    color: #333;
    font-size: 13px;
}

.workshop-fee .workshop-total {
    margin-top: 10px;
    padding-top: 17px;
    border-top: 1px solid #ddd;
}

.workshop-total span {
    color: #333;
    font-weight: 600;
}

.workshop-total strong {
    color: var(--aapa-orange);
    font-size: 24px;
}


/* REGISTER BUTTON */

.workshop-register-btn {
    width: 100%;
    margin-top: 25px;
    padding: 14px 25px;
    border: 0;
    border-radius: 30px;
    background: var(--aapa-orange);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.workshop-register-btn span {
    margin-left: 7px;
}

.workshop-register-btn:hover {
    background: var(--aapa-blue);
    color: #fff;
}


/* =========================================================
   SCHEDULE
========================================================= */

.schedule-card {
    height: 100%;
    padding: 35px 40px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 15px 45px rgba(0,0,0,.06);
}

.schedule-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}

.schedule-heading h3 {
    margin: 0;
    color: #333;
    font-size: 25px;
    font-weight: 500;
}

.schedule-time {
    padding: 8px 15px;
    border-radius: 20px;
    background: #f3f3f3;
    color: #555;
    font-size: 10px;
    font-weight: 600;
}


/* ROW */

.schedule-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.schedule-item:last-child {
    border-bottom: 0;
}

.schedule-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #f4f4f4;
    color: var(--aapa-blue);
    font-size: 10px;
    font-weight: 700;
}

.schedule-details {
    flex: 1;
}

.schedule-details span,
.schedule-details strong,
.schedule-details small {
    display: block;
}

.schedule-details span {
    margin-bottom: 2px;
    color: #aaa;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.schedule-details strong {
    color: #333;
    font-size: 13px;
    font-weight: 600;
}

.schedule-details small {
    margin-top: 3px;
    color: #888;
    font-size: 10px;
}


/* BREAKS */

.break-item .schedule-icon {
    background: rgba(246,162,26,.12);
}

.lunch-item .schedule-icon {
    background: rgba(88,196,204,.13);
}


/* FINAL */

.final-session {
    margin-top: 7px;
    padding: 17px 15px;
    border: 0;
    border-radius: 14px;
    background: rgba(23,97,142,.06);
}

.final-session .schedule-icon {
    background: var(--aapa-blue);
    color: #fff;
}

.final-session .schedule-details span {
    color: var(--aapa-blue);
}


/* MOBILE */

@media (max-width: 767px) {

    .workshop-info-card,
    .schedule-card {
        padding: 25px 20px;
    }

    .schedule-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .workshop-dates {
        justify-content: flex-start;
        gap: 18px;
    }

    .workshop-date > strong {
        font-size: 35px;
    }
}

/* ==========================================
   DANCE FEES
========================================== */

.dance-fees-section {
    background: #f8f9fb;
}

.dance-fee-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    transition: all .3s ease;
}

.dance-fee-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,.08);
}

.dance-fee-header {
    background: #17618e;
    padding: 25px;
    color: #fff;
    text-align: center;
}

.dance-fee-header h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #fff;
}

.dance-fee-header span {
    font-size: 13px;
    opacity: .85;
}

.dance-fee-body {
    padding: 30px;
}

.dance-fee-price {
    font-size: 38px;
    font-weight: 800;
    color: #17618e;
    text-align: center;
    margin-bottom: 25px;
}

.dance-fee-price small {
    font-size: 14px;
    font-weight: 400;
    color: #777;
}

.dance-fee-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 10px 0;
    font-size: 14px;
}

.dance-fee-row strong {
    color: #333;
}

.dance-fee-total {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    margin-top: 8px;
    border-top: 1px solid #ddd;
    font-weight: 700;
    color: #17618e;
}

.dance-registration-box {
    margin-top: 25px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
}

.dance-registration-box h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
}

.dance-first-payment {
    text-align: center;
    background: #fff7e9;
    border: 1px solid #ffe2a8;
    border-radius: 10px;
    padding: 20px;
    margin: 25px 0;
}

.dance-first-payment span {
    display: block;
    font-size: 13px;
    margin-bottom: 5px;
}

.dance-first-payment strong {
    display: block;
    font-size: 30px;
    color: #ef3f55;
}

.dance-first-payment small {
    display: block;
    font-size: 12px;
    color: #777;
    margin-top: 5px;
}

@media (max-width: 767px) {
    .dance-fee-body {
        padding: 20px;
    }

    .dance-fee-price {
        font-size: 32px;
    }
}
.know-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #f6a21a;
    font-size: 16px;
    font-weight: 600;
    margin-top: 15px;
}

.arrow-circle {
    width: 38px;
    height: 38px;
    background: #f6a21a;
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all 0.3s ease;
}

.know-more-btn:link{ color: #f6a21a;}



.know-more-btn:hover .arrow-circle {
    background: #ef3f55;
    transform: translateX(5px);
}

.know-more-btn:visited{ color: #f6a21a;}
.know-more-btn:active{ color: #f6a21a;}

/* Enquiry Messages */

.enquiry-alert {
    border-radius: 12px;
    padding: 20px 24px;
    margin: 20px 0 25px;
    font-size: 14px;
    line-height: 1.7;
}

.enquiry-alert.alert-success {
    background: #eaf8ef;
    border: 1px solid #a9dfba;
    border-left: 5px solid #28a745;
    color: #176b35;
}

.enquiry-alert.alert-danger {
    background: #fff0f0;
    border: 1px solid #f5b5b5;
    border-left: 5px solid #dc3545;
    color: #a52834;
}

.enquiry-alert strong {
    font-size: 15px;
}

.enquiry-alert p {
    margin-bottom: 8px;
}