.elementor-8 .elementor-element.elementor-element-cdf0502{--display:flex;--align-items:stretch;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-12017e8{width:100%;max-width:100%;}.elementor-8 .elementor-element.elementor-element-12017e8 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-8 .elementor-element.elementor-element-56dab82{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-56dab82:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-56dab82 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#54595F;}.elementor-8 .elementor-element.elementor-element-8950c6d{width:100%;max-width:100%;}.elementor-8 .elementor-element.elementor-element-8950c6d > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-8 .elementor-element.elementor-element-a8a5dba{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0em;--padding-bottom:0em;--padding-left:0em;--padding-right:0em;}.elementor-8 .elementor-element.elementor-element-a8a5dba.e-con{--align-self:center;}.elementor-8 .elementor-element.elementor-element-05b8321{width:100%;max-width:100%;}.elementor-8 .elementor-element.elementor-element-05b8321 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-8 .elementor-element.elementor-element-05b8321.elementor-element{--align-self:center;}.elementor-8 .elementor-element.elementor-element-650ca34{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-4f6ae51 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-8 .elementor-element.elementor-element-ad9ac38{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-ad9ac38.e-con{--align-self:center;}.elementor-8 .elementor-element.elementor-element-7a6794a > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-8 .elementor-element.elementor-element-6850e97{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-3624425{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-8 .elementor-element.elementor-element-faee711{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-6caf328 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-8 .elementor-element.elementor-element-6850e97{--width:100%;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-537400d > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}}@media(min-width:768px){.elementor-8 .elementor-element.elementor-element-cdf0502{--width:100%;}.elementor-8 .elementor-element.elementor-element-56dab82{--width:100%;}.elementor-8 .elementor-element.elementor-element-650ca34{--width:100%;}.elementor-8 .elementor-element.elementor-element-6850e97{--width:100%;}.elementor-8 .elementor-element.elementor-element-faee711{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-12017e8 *//* ==========================================================================
   Hero Section Styles - Claroscuro Music Academy (v8.6 - Premium Hover & Stat Cards)
   Enhances link hover, redesigns stat cards for premium feel, keeps visibility fix.
   ========================================================================== */

/* Apply this CSS via Elementor Site Settings > Custom CSS, WPCode/Child Theme, etc. */

/* Keyframes remain the same */
@keyframes ns-hero-fade-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Ensure :root variables and timing functions are defined globally */
/* :root { --clr-accent-primary: #0D6E7A; --clr-text-light: #F8F9FA; ... } */
/* :root { --timing-function-smooth: cubic-bezier(0.25, 0.8, 0.25, 1); } */


/* --- Base Section --- */
.ns-hero-section {
    min-height: 95vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    padding: var(--space-xxxl, 100px) var(--space-lg, 40px) var(--space-xxxl, 100px) var(--space-xxl, 80px) !important;
    overflow: hidden;
    background-color: var(--clr-bg-dark, #1F1F1F);
    color: var(--clr-text-light, #F8F9FA); 
}

/* --- Background Image Slider --- */
.ns-hero-bg-slider {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; 
}
.ns-hero-bg-slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1; 
}
.ns-hero-bg-slide.is-active {
    opacity: 1;
    z-index: 2; 
}

/* --- Dark Overlay --- */
.ns-hero-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to right,
        rgba(31, 31, 31, 0.94) 0%,
        rgba(31, 31, 31, 0.82) 45%,
        rgba(31, 31, 31, 0.20) 100%
    );
    z-index: 3; 
    pointer-events: none;
}

/* --- Content Area --- */
.ns-hero-content {
    position: relative; 
    z-index: 10; /* Keep high z-index */
    max-width: 720px; 
    text-align: left;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); 
}

/* --- Headline & Subheadline --- */
.ns-hero-headline {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2.8rem, 7vw, 4.2rem);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 var(--space-sm, 16px) 0;
    color: var(--clr-text-light, #F8F9FA); 
    letter-spacing: -0.5px;
    opacity: 0;
    animation: ns-hero-fade-slide-up 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) 0.2s forwards;
    position: relative; 
    z-index: 1; 
}
.ns-hero-headline-accent { 
    color: var(--clr-accent-tertiary, #FD7E14);
    font-style: italic;
    font-weight: 600;
}
.ns-hero-subheadline {
    font-family: 'Roboto', sans-serif;
    font-size: clamp(1.1rem, 2.5vw, 1.3rem);
    font-weight: 400;
    line-height: 1.8;
    margin: 0 0 var(--space-lg, 40px) 0;
    color: var(--clr-text-muted-dark, #E0E0E0); 
    max-width: 620px;
    letter-spacing: 0.2px;
    opacity: 0;
    animation: ns-content-fade-slide-up 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s forwards;
    position: relative; 
    z-index: 1;
}

/* --- Call to Action Buttons --- */
.ns-hero-cta-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-sm, 16px) var(--space-md, 24px);
    margin-bottom: var(--space-xl, 64px);
    opacity: 0;
    animation: ns-hero-fade-slide-up 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s forwards;
    position: relative; 
    z-index: 1;
}

/* Base Button Style */
.ns-hero-cta,
.ns-hero-cta-secondary {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    padding: calc(var(--space-sm, 16px) - 2px) calc(var(--space-lg, 40px) - 2px);
    border: 2px solid transparent;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    text-transform: uppercase;
    letter-spacing: 0.75px;
    position: relative;
    overflow: hidden;
    will-change: transform, box-shadow, background-color, color;
}

/* Primary CTA Button */
.ns-hero-cta {
    background-color: var(--clr-accent-primary, #0D6E7A) !important;
    color: var(--clr-cta-text-light, #FFFFFF) !important;
    box-shadow: 0 4px 12px rgba(13, 110, 122, 0.3), 0 1px 3px rgba(0,0,0,0.1) !important;
}

/* Enhanced Primary CTA Hover State */
.ns-hero-cta:hover {
    background-color: var(--clr-accent-tertiary, #FD7E14) !important;
    color: var(--clr-bg-dark, #1F1F1F) !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 20px rgba(253, 126, 20, 0.4), 
                0 2px 6px rgba(0,0,0,0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Enhanced Primary CTA Active State */
.ns-hero-cta:active {
    transform: translateY(-1px) scale(0.98) !important;
    background-color: #E06D12 !important; /* Darker orange */
    color: var(--clr-bg-dark, #1F1F1F) !important;
    box-shadow: 0 4px 10px rgba(253, 126, 20, 0.3), 
                0 1px 3px rgba(0,0,0,0.1),
                inset 0 1px 0 rgba(0, 0, 0, 0.1) !important;
}

/* Secondary CTA Button */
.ns-hero-cta-secondary {
    background-color: transparent !important;
    color: var(--clr-text-light, #F8F9FA) !important;
    border: 2px solid var(--clr-text-light, #F8F9FA) !important;
    box-shadow: 0 0 0 rgba(248, 249, 250, 0) !important;
}

/* Enhanced Secondary CTA Hover State */
.ns-hero-cta-secondary:hover {
    background-color: var(--clr-text-light, #F8F9FA) !important;
    color: var(--clr-bg-dark, #1F1F1F) !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 20px rgba(248, 249, 250, 0.15),
                0 2px 6px rgba(0,0,0,0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    border-color: var(--clr-text-light, #F8F9FA) !important;
}

/* Enhanced Secondary CTA Active State */
.ns-hero-cta-secondary:active {
    transform: translateY(-1px) scale(0.98) !important;
    background-color: #E0E0E0 !important; /* Slightly darker white */
    color: var(--clr-bg-dark, #1F1F1F) !important;
    box-shadow: 0 4px 10px rgba(248, 249, 250, 0.1),
                0 1px 3px rgba(0,0,0,0.1),
                inset 0 1px 0 rgba(0, 0, 0, 0.1) !important;
    border-color: #E0E0E0 !important;
}

/* Focus States for Both Buttons */
.ns-hero-cta:focus-visible,
.ns-hero-cta-secondary:focus-visible {
    outline: 2px solid var(--clr-accent-tertiary, #FD7E14) !important;
    outline-offset: 3px !important;
    border-radius: var(--radius-sm) !important;
}

/* --- Stat Cards Area (Premium Redesign) --- */
.ns-hero-stat-card-container {
    position: relative;
    z-index: 5; 
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md, 24px);
    align-items: stretch;
    justify-content: flex-start;
}

/* Individual Stat Card (Premium Redesign) */
.ns-hero-stat-card {
    /* === Dark Background Approach === */
    background-color: rgba(45, 45, 48, 0.8); /* Dark semi-transparent */
    backdrop-filter: blur(5px); /* Subtle blur behind card */
    color: var(--clr-text-light, #F8F9FA); /* Light text */
    padding: var(--space-md, 24px);
    border-radius: var(--radius-lg, 12px); 
    flex: 1 1 160px;
    max-width: 200px;
    text-align: left;
     /* === Premium Shadow === */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 
                inset 0 1px 0px rgba(255, 255, 255, 0.08); /* Subtle top highlight */
    border: 1px solid rgba(255, 255, 255, 0.12); /* Faint border */
    transition: all 0.4s var(--timing-function-smooth); /* Smoother transition */
    position: relative;
    overflow: hidden;
    will-change: transform, box-shadow, background-color;
    opacity: 0;
    transform: translateY(20px);
}
/* Apply animation delays */
.ns-hero-stat-card:nth-child(1) { animation: ns-hero-fade-slide-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 0.8s forwards; }
.ns-hero-stat-card:nth-child(2) { animation: ns-hero-fade-slide-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 0.95s forwards; }
.ns-hero-stat-card:nth-child(3) { animation: ns-hero-fade-slide-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 1.1s forwards; }

/* Stat Card Hover State */
.ns-hero-stat-card:hover { 
    transform: translateY(-6px) scale(1.03); /* Refined hover transform */
    background-color: rgba(55, 55, 60, 0.9); /* Slightly lighter on hover */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25), /* Enhanced shadow */
                inset 0 1px 0px rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2); /* Brighter border */
}

/* Stat Card Number */
.ns-hero-stat-card-number { 
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.9rem, 4.5vw, 2.5rem); /* Slightly larger */
    font-weight: 600; /* Slightly less bold */
    line-height: 1.1;
    display: block;
    margin-bottom: var(--space-xs, 8px); /* More space below number */
    color: var(--clr-accent-primary, #0D6E7A); /* Teal accent color */
    position: relative;
    z-index: 1;
}
.ns-hero-stat-card-number sup { 
    font-size: 1.1rem; /* Larger '+' sign */
    font-weight: 500;
    color: var(--clr-accent-primary, #0D6E7A);
    margin-left: 2px;
    vertical-align: super; /* Proper superscript alignment */
    opacity: 0.9;
}

/* Stat Card Label */
.ns-hero-stat-card-label { 
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem; /* Slightly smaller label */
    font-weight: 400;
    line-height: 1.45;
    display: block;
    color: var(--clr-text-muted-dark, #E0E0E0); /* Muted light text */
    opacity: 0.95;
    position: relative;
    z-index: 1;
}

/* --- Ultrawide Screen Padding Adjustment --- */
@media (min-width: 1800px) { 
    .ns-hero-section {
        padding-left: 15vw !important; 
        padding-right: 10vw !important; 
    }
}
@media (min-width: 2200px) { 
    .ns-hero-section {
        padding-left: 20vw !important;
        padding-right: 15vw !important;
    }
}


/* --- Responsive Adjustments --- */
@media (max-width: 991px) { /* Tablet */
    .ns-hero-section {
        padding: var(--space-xxxl, 100px) var(--space-lg, 40px) !important; 
        justify-content: center;
    }
    .ns-hero-content {
        text-align: center;
        max-width: 700px;
        margin: 0 auto;
    }
    .ns-hero-cta-container {
        justify-content: center;
        margin-bottom: var(--space-lg, 40px);
    }
    .ns-hero-stat-card-container {
        justify-content: center;
        gap: var(--space-md, 24px); /* Increased gap slightly */
    }
    .ns-hero-stat-card {
        flex-basis: 160px; /* Adjusted basis */
        max-width: 190px; /* Adjusted max-width */
        padding: var(--space-md, 24px);
    }
    .ns-hero-stat-card-number { font-size: clamp(1.7rem, 4vw, 2.2rem); }
    .ns-hero-stat-card-label { font-size: 0.85rem; }
}

@media (max-width: 767px) { /* Mobile */
    .ns-hero-section {
        min-height: auto;
        padding: var(--space-xxl, 80px) var(--space-md, 24px) var(--space-xl, 64px) var(--space-md, 24px) !important; 
    }
    .ns-hero-headline { font-size: clamp(2.2rem, 9vw, 2.8rem); letter-spacing: -0.2px; }
    .ns-hero-subheadline { font-size: clamp(1rem, 4vw, 1.15rem); margin-bottom: var(--space-lg, 40px); line-height: 1.7; }
    .ns-hero-cta-container { flex-direction: column; width: 100%; align-items: center; gap: var(--space-sm, 16px); margin-bottom: var(--space-lg, 40px); }
    .ns-hero-cta, .ns-hero-cta-secondary { font-size: 0.9rem; padding: calc(var(--space-sm, 12px) - 1px) calc(var(--space-md, 24px) - 1px); width: 100%; max-width: 320px; letter-spacing: 0.5px; }
    .ns-hero-stat-card-container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md, 24px); width: 100%; max-width: 400px; margin: 0 auto; justify-content: center; }
    .ns-hero-stat-card { flex-grow: 0; flex-shrink: 0; min-width: unset; width: 100%; max-width: none; text-align: center; padding: var(--space-md, 24px); }
    .ns-hero-stat-card-number { font-size: 1.9rem; } /* Slightly larger on mobile */
    .ns-hero-stat-card-label { font-size: 0.8rem; }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .ns-hero-bg-slide { transition-duration: 0.01ms !important; }
    .ns-hero-cta, .ns-hero-cta-secondary, .ns-hero-stat-card { transition: none !important; } /* Disable all transitions */
    .ns-hero-cta:hover, .ns-hero-cta:focus-visible,
    .ns-hero-cta-secondary:hover, .ns-hero-cta-secondary:focus-visible,
    .ns-hero-stat-card:hover { transform: none !important; }
    .ns-hero-cta:active, .ns-hero-cta-secondary:active { transform: none !important; }
    .ns-hero-headline, .ns-hero-subheadline, .ns-hero-cta-container, .ns-hero-stat-card { animation: none !important; opacity: 1 !important; transform: none !important; }
    /* Keep base shadow on hover for reduced motion */
     .ns-hero-stat-card:hover { 
         box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28), 0 3px 7px rgba(0,0,0,0.18);
     }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8950c6d *//* CSS Index:
--- 0. Keyframes (Shared - Define Globally) ---
--- 1. Section Container & Background ---
--- 2. Content Container & Layout ---
--- 3. Text Content Area ---
--- 4. Typography Styles ---
--- 5. Image Area ---
--- 6. Image Slideshow Specifics (FIXED: Forced Animation & Initial Visibility) ---
--- 7. Responsive Adjustments ---
--- 8. Reduced Motion Adjustments (FIXED: Reflects Forced Initial Visibility) ---
*/

/* ========================================================================== */
/* 0. Keyframes (Shared - Define Globally)                                   */
/* ========================================================================== */
/* CRITICAL: Ensure these @keyframes rules are defined ONLY ONCE in global CSS */
/*
@keyframes ns-image-crossfade {
  0% { opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes ns-content-fade-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
*/

/* ========================================================================== */
/* 1. Section Container & Background (Using Variables)                       */
/* ========================================================================== */
.ns-intro-section {
    background-color: var(--clr-bg-light, #F8F9FA);
    padding: var(--space-xxxl, 100px) 0 !important;
    overflow: hidden;
    position: relative;
}

/* ========================================================================== */
/* 2. Content Container & Layout (Using Variables)                           */
/* ========================================================================== */
.ns-intro-container {
    width: 100%;
    max-width: 1360px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--space-lg, 40px) 0 var(--space-xxl, 80px) !important;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-xxl, 80px);
    position: relative;
    z-index: 1;
}

/* ========================================================================== */
/* 3. Text Content Area (Using Variables)                                    */
/* ========================================================================== */
.ns-intro-text {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--clr-text-dark, #212529);
    opacity: 0;
    transform: translateY(20px);
    animation: ns-content-fade-slide-up 0.8s var(--timing-function-smooth, cubic-bezier(0.25, 0.8, 0.25, 1)) 0.2s forwards;
    will-change: opacity, transform;
}

/* ========================================================================== */
/* 4. Typography Styles (Using Variables)                                    */
/* ========================================================================== */
.ns-intro-pre-headline {
    font-family: 'Poppins', sans-serif;
    font-size: var(--font-preheadline-size, 1rem);
    font-weight: 600;
    color: var(--clr-accent-primary, #0D6E7A);
    margin-bottom: var(--space-sm, 16px);
    text-transform: uppercase;
    letter-spacing: 1.3px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs, 8px);
}

.ns-pre-headline-icon {
    font-size: 1.1em;
    line-height: 1;
    color: var(--clr-accent-primary, #0D6E7A);
}

.ns-intro-heading {
    font-family: 'Poppins', sans-serif;
    font-size: var(--font-h2-size, clamp(2.4rem, 5.5vw, 3.4rem));
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: var(--space-md, 24px);
    color: var(--clr-text-dark, #212529);
    letter-spacing: -0.5px;
}

.ns-intro-paragraph {
    font-family: 'Roboto', sans-serif;
    font-size: 19px !important;
    line-height: 1.8 !important;
    color: var(--clr-text-dark, #212529) !important;
    margin-bottom: var(--space-lg, 40px);
    max-width: 680px;
}
.ns-intro-paragraph strong {
    font-weight: 500;
    color: inherit;
}

/* ========================================================================== */
/* 5. Image Area (Using Variables)                                           */
/* ========================================================================== */
.ns-intro-image-wrapper {
    flex: 0 0 45%;
    max-width: 580px;
    border-radius: var(--radius-xl, 16px);
    box-shadow: var(--shadow-lg, 0 12px 35px rgba(0, 0, 0, 0.12));
    overflow: hidden;
    position: relative; /* Children are positioned relative to this */
    aspect-ratio: 1 / 1;
    background-color: var(--clr-border-light, #e0e0e0);
    transition: transform var(--transition-duration-default, 0.35s) var(--timing-function-smooth, cubic-bezier(0.25, 0.8, 0.25, 1)),
                box-shadow var(--transition-duration-default, 0.35s) var(--timing-function-smooth, cubic-bezier(0.25, 0.8, 0.25, 1)),
                border-color var(--transition-duration-default, 0.35s) ease;
    will-change: transform, box-shadow, border;
    border: 3px solid transparent;
    z-index: 1; /* Ensure wrapper has stacking context */
}

.ns-intro-image-wrapper:hover {
    transform: scale(1.03) translateY(-5px);
    box-shadow: var(--shadow-card-hover, 0 12px 30px rgba(13, 110, 122, 0.15), 0 6px 12px rgba(13, 110, 122, 0.1));
    border-color: var(--clr-accent-primary, #0D6E7A);
}

/* ========================================================================== */
/* 6. Image Slideshow Specifics (FIXED: Forced Animation & Initial Visibility) */
/* ========================================================================== */
.ns-intro-slideshow-container {
    width: 100%;
    height: 100%;
    position: relative; /* Also ensure this has context */
    z-index: 1; /* Keep above background color */
}

.ns-intro-image-wrapper .ns-intro-slideshow-image { /* Increased specificity */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; /* Base opacity for animation */
    /* FIXED: Added !important to force animation */
    animation-name: ns-image-crossfade !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    animation-duration: 24s !important;
    z-index: 2; /* Ensure images are above container bg */
}

/* FIXED: Force initial visibility of the FIRST image only */
.ns-intro-image-wrapper .ns-intro-slideshow-image:nth-child(1) {
    opacity: 1 !important;
    /* Apply animation delay specifically */
    animation-delay: 0s !important;
}
.ns-intro-image-wrapper .ns-intro-slideshow-image:nth-child(2) { animation-delay: 6s !important; }
.ns-intro-image-wrapper .ns-intro-slideshow-image:nth-child(3) { animation-delay: 12s !important; }
.ns-intro-image-wrapper .ns-intro-slideshow-image:nth-child(4) { animation-delay: 18s !important; }


/* ========================================================================== */
/* 7. Responsive Adjustments (Using Variables)                               */
/* ========================================================================== */
@media (max-width: 1199px) {
    .ns-intro-container {
        gap: var(--space-xl, 64px);
    }
}

@media (max-width: 991px) { /* Tablet */
    .ns-intro-section {
        padding: var(--space-xxl, 80px) 0 !important;
    }
    .ns-intro-container {
        flex-wrap: wrap;
        flex-direction: column;
        padding: 0 var(--space-lg, 40px) !important;
        gap: var(--space-xl, 64px);
    }
    .ns-intro-text {
        flex-basis: auto;
        width: 100%;
        order: 1;
        text-align: left;
    }
    .ns-intro-pre-headline,
    .ns-intro-heading {
        text-align: left;
    }
    .ns-intro-heading {
         font-size: var(--font-h2-size, clamp(2.2rem, 5vw, 3rem));
    }
    .ns-intro-paragraph {
        max-width: none;
    }
    .ns-intro-image-wrapper {
        flex-basis: auto;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        order: 2;
    }
}

@media (max-width: 767px) { /* Mobile */
    .ns-intro-section {
        padding: var(--space-xl, 64px) 0 !important;
    }
    .ns-intro-container {
        padding: 0 var(--space-md, 24px) !important;
        gap: var(--space-lg, 40px);
    }
     .ns-intro-heading {
         font-size: var(--font-h2-size, clamp(2rem, 5.5vw, 2.6rem));
         margin-bottom: var(--space-sm, 16px);
    }
    .ns-intro-paragraph {
         font-size: 17px !important;
         line-height: 1.75 !important;
         margin-bottom: var(--space-md, 24px);
    }
    .ns-intro-image-wrapper {
        max-width: 100%;
        border: 2px solid var(--clr-border-light, #E0E0E0);
    }
     .ns-intro-image-wrapper:hover {
         border-color: var(--clr-accent-primary, #0D6E7A);
     }
}

/* ========================================================================== */
/* 8. Reduced Motion Adjustments (FIXED: Reflects Forced Initial Visibility) */
/* ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    /* Stop slideshow animation and force first image visible */
    .ns-intro-image-wrapper .ns-intro-slideshow-image {
        animation: none !important;
        opacity: 0 !important; /* Ensure others are hidden */
    }
    .ns-intro-image-wrapper .ns-intro-slideshow-image:nth-child(1) {
        opacity: 1 !important; /* Force first image visible */
    }

    /* Disable text entrance animation */
    .ns-intro-text {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Disable wrapper transitions */
    .ns-intro-image-wrapper {
        transition: none !important;
    }
    .ns-intro-image-wrapper:hover {
        transform: none !important;
        box-shadow: var(--shadow-lg, 0 12px 35px rgba(0, 0, 0, 0.12));
        border-color: transparent;
    }
    /* Ensure mobile border reverts correctly */
     @media (max-width: 767px) {
         .ns-intro-image-wrapper:hover {
            border-color: var(--clr-border-light, #E0E0E0) !important;
         }
     }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-05b8321 *//* CSS Index:
--- 0. Keyframes & Reduced Motion (Shared - Define Globally) ---
--- 1. Section Container & Background (Hardcoded) ---
--- 2. Content Container (Hardcoded) ---
--- 3. Section Header (Hardcoded) ---
--- 4. Course Grid Layout (Hardcoded) ---
--- 5. Course Card Base Styles (Hardcoded) ---
--- 6. Course Card Animation & Hover (Hardcoded - Targeted !important) ---
--- 7. Course Card Icon (Hardcoded) ---
--- 8. Course Card Content (Hardcoded) ---
--- 9. Responsive Adjustments (Hardcoded) ---
*/

/* ========================================================================== */
/* 0. Keyframes & Reduced Motion (Shared - Define Globally)                  */
/* ========================================================================== */
/* CRITICAL: Ensure these @keyframes rules are defined ONLY ONCE in global CSS */
/* DO NOT include these @keyframes in the CSS pasted for this specific section */
/*
@keyframes ns-content-fade-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes ns-bg-pulse {
    0%, 100% { opacity: 0.08; transform: scale(1); }
    50% { opacity: 0.15; transform: scale(1.03); }
}
*/
/* @media (prefers-reduced-motion: reduce) { ... global animation disables ... } */


/* ========================================================================== */
/* 1. Section Container & Background (Hardcoded)                           */
/* ========================================================================== */
.ns-courses-section-v3_2 {
    background: linear-gradient(180deg, #F8F9FA 0%, #FFFFFF 50%, #FDFEFF 100%);
    padding: 120px 0 !important; /* Hardcoded calc(100px * 1.2) */
    overflow: hidden;
    position: relative;
}

.ns-courses-section-v3_2 .ns-courses-bg-element {
    position: absolute;
    border-radius: 50%;
    /* Hardcoded hsla(188, 82%, 26%, 0.05) */
    background-color: rgba(13, 110, 122, 0.05); /* Using RGBA equivalent as fallback */
    z-index: 0;
    pointer-events: none;
    animation: ns-bg-pulse 12s ease-in-out infinite alternate;
    will-change: opacity, transform;
}
.ns-courses-section-v3_2 .ns-courses-bg-element--1 {
    width: clamp(300px, 40vw, 600px); height: clamp(300px, 40vw, 600px);
    top: 8%; left: -15vw; animation-delay: 0s;
}
.ns-courses-section-v3_2 .ns-courses-bg-element--2 {
    width: clamp(250px, 35vw, 500px); height: clamp(250px, 35vw, 500px);
    bottom: 5%; right: -12vw; animation-delay: -6s;
}
@media (prefers-reduced-motion: reduce) {
    .ns-courses-section-v3_2 .ns-courses-bg-element {
        animation: none !important; opacity: 0.06 !important; display: block !important;
    }
}


/* ========================================================================== */
/* 2. Content Container (Hardcoded)                                          */
/* ========================================================================== */
.ns-courses-section-v3_2 .ns-courses-container-v3_2 {
    width: 100%; max-width: 1360px; margin: 0 auto;
    /* Hardcoded padding: 0 40px 0 80px */
    padding: 0 40px 0 80px !important;
    position: relative; z-index: 1;
}


/* ========================================================================== */
/* 3. Section Header (Hardcoded)                                             */
/* ========================================================================== */
.ns-courses-section-v3_2 .ns-courses-header-v3_2 {
    text-align: center;
    margin-bottom: 80px; /* Hardcoded --space-xxl */
    opacity: 0; transform: translateY(20px);
    /* Hardcoded timing function */
    animation: ns-content-fade-slide-up 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) 0.1s forwards;
    will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce) {
    .ns-courses-section-v3_2 .ns-courses-header-v3_2 {
        animation: none !important; opacity: 1 !important; transform: none !important;
    }
}

.ns-courses-section-v3_2 .ns-courses-pre-headline-v3_2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem; /* Hardcoded --font-preheadline-size */
    font-weight: 600;
    color: #0D6E7A; /* Hardcoded --clr-accent-primary */
    margin-bottom: 16px; /* Hardcoded --space-sm */
    text-transform: uppercase;
    letter-spacing: 1.3px;
    display: block;
}

.ns-courses-section-v3_2 .ns-courses-heading-v3_2 {
    font-family: 'Poppins', sans-serif;
    /* Hardcoded --font-h2-size */
    font-size: clamp(2.4rem, 5.5vw, 3.4rem);
    font-weight: 700;
    line-height: 1.25;
    color: #212529; /* Hardcoded --clr-text-dark */
    margin: 0 0 24px 0; /* Hardcoded --space-md */
}

.ns-courses-section-v3_2 .ns-courses-subheading-v3_2 {
    font-family: 'Roboto', sans-serif;
    font-size: clamp(1.1rem, 2.5vw, 1.2rem);
    line-height: 1.8;
    color: #6C757D; /* Hardcoded --clr-text-secondary */
    max-width: 780px;
    margin: 0 auto;
}


/* ========================================================================== */
/* 4. Course Grid Layout (Hardcoded)                                         */
/* ========================================================================== */
.ns-courses-section-v3_2 .ns-courses-grid-v3_2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    /* Hardcoded gap: clamp(24px, 3vw, 40px) */
    gap: clamp(24px, 3vw, 40px);
    text-align: left;
}


/* ========================================================================== */
/* 5. Course Card Base Styles (Hardcoded)                                    */
/* ========================================================================== */
.ns-courses-section-v3_2 .ns-course-card-v3_2 {
    background-color: #FFFFFF; /* Hardcoded --clr-bg-card */
    border-radius: 16px; /* Hardcoded --radius-xl */
    /* Hardcoded padding: clamp(24px, 3.5vw, 40px) */
    padding: clamp(24px, 3.5vw, 40px);
    /* Hardcoded --shadow-md */
    box-shadow: 0 4px 10px rgba(100, 110, 130, 0.04), 0 8px 30px rgba(100, 110, 130, 0.08);
    display: flex; flex-direction: column;
    border: 1px solid transparent;
    /* Hardcoded transition */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                border-color 0.4s ease-out;
    position: relative; overflow: hidden;
    opacity: 0;
    will-change: transform, opacity, box-shadow;
}


/* ========================================================================== */
/* 6. Course Card Animation & Hover (Hardcoded - Targeted !important)      */
/* ========================================================================== */
/* Apply animation using the standard keyframe. Added !important HERE */
/* Hardcoded timing function in animation rule */
.ns-courses-section-v3_2 .ns-courses-grid-v3_2 > *:nth-child(1) { animation: ns-content-fade-slide-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 0.30s forwards !important; }
.ns-courses-section-v3_2 .ns-courses-grid-v3_2 > *:nth-child(2) { animation: ns-content-fade-slide-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 0.35s forwards !important; }
.ns-courses-section-v3_2 .ns-courses-grid-v3_2 > *:nth-child(3) { animation: ns-content-fade-slide-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 0.40s forwards !important; }
.ns-courses-section-v3_2 .ns-courses-grid-v3_2 > *:nth-child(4) { animation: ns-content-fade-slide-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 0.45s forwards !important; }
/* ... Continue pattern ... Add !important to each line */
.ns-courses-section-v3_2 .ns-courses-grid-v3_2 > *:nth-child(5) { animation: ns-content-fade-slide-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 0.50s forwards !important; }
.ns-courses-section-v3_2 .ns-courses-grid-v3_2 > *:nth-child(6) { animation: ns-content-fade-slide-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 0.55s forwards !important; }
.ns-courses-section-v3_2 .ns-courses-grid-v3_2 > *:nth-child(7) { animation: ns-content-fade-slide-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 0.60s forwards !important; }
.ns-courses-section-v3_2 .ns-courses-grid-v3_2 > *:nth-child(8) { animation: ns-content-fade-slide-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 0.65s forwards !important; }
.ns-courses-section-v3_2 .ns-courses-grid-v3_2 > *:nth-child(9) { animation: ns-content-fade-slide-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 0.70s forwards !important; }
.ns-courses-section-v3_2 .ns-courses-grid-v3_2 > *:nth-child(10){ animation: ns-content-fade-slide-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 0.75s forwards !important; }
.ns-courses-section-v3_2 .ns-courses-grid-v3_2 > *:nth-child(11){ animation: ns-content-fade-slide-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 0.80s forwards !important; }
.ns-courses-section-v3_2 .ns-courses-grid-v3_2 > *:nth-child(12){ animation: ns-content-fade-slide-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 0.85s forwards !important; }
.ns-courses-section-v3_2 .ns-courses-grid-v3_2 > *:nth-child(13){ animation: ns-content-fade-slide-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 0.90s forwards !important; }
.ns-courses-section-v3_2 .ns-courses-grid-v3_2 > *:nth-child(14){ animation: ns-content-fade-slide-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 0.95s forwards !important; }


/* Reduced motion for cards */
@media (prefers-reduced-motion: reduce) {
  .ns-courses-section-v3_2 .ns-course-card-v3_2 {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
      transition: box-shadow 0.3s ease, border-color 0.3s ease;
  }
  .ns-courses-section-v3_2 .ns-course-card-v3_2:hover {
      transform: none;
      /* Hardcoded --shadow-card-hover */
      box-shadow: 0 6px 15px rgba(100, 110, 130, 0.06), 0 12px 40px rgba(100, 110, 130, 0.1);
      /* Hardcoded hsla(188, 82%, 26%, 0.15) */
      border-color: rgba(13, 110, 122, 0.15);
  }
}

/* Card Hover State */
.ns-courses-section-v3_2 .ns-course-card-v3_2:hover {
    transform: translateY(-8px);
    /* Hardcoded --shadow-card-hover */
    box-shadow: 0 6px 15px rgba(100, 110, 130, 0.06), 0 12px 40px rgba(100, 110, 130, 0.1);
    /* Hardcoded hsla(188, 82%, 26%, 0.25) */
    border-color: rgba(13, 110, 122, 0.25);
}


/* ========================================================================== */
/* 7. Course Card Icon (Hardcoded)                                           */
/* ========================================================================== */
.ns-courses-section-v3_2 .ns-course-card-icon-wrapper-v3_2 {
    margin-bottom: 40px; /* Hardcoded --space-lg */
    text-align: left;
    line-height: 1;
}
.ns-courses-section-v3_2 .ns-course-card-icon-v3_2 {
    /* Hardcoded clamp size */
    width: clamp(44px, 5.5vw, 60px);
    height: clamp(44px, 5.5vw, 60px);
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    /* Hardcoded elastic transition */
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    will-change: transform;
}
.ns-courses-section-v3_2 .ns-course-card-v3_2:hover .ns-course-card-icon-v3_2 {
    transform: scale(1.12) rotate(-3deg);
}
@media (prefers-reduced-motion: reduce) {
    .ns-courses-section-v3_2 .ns-course-card-icon-v3_2 {
        transition: none;
    }
    .ns-courses-section-v3_2 .ns-course-card-v3_2:hover .ns-course-card-icon-v3_2 {
        transform: none;
    }
}


/* ========================================================================== */
/* 8. Course Card Content (Hardcoded)                                        */
/* ========================================================================== */
.ns-courses-section-v3_2 .ns-course-card-content-v3_2 {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.ns-courses-section-v3_2 .ns-course-card-title-v3_2 {
    font-family: 'Poppins', sans-serif;
    /* Hardcoded --font-h3-size */
    font-size: clamp(1.15rem, 2.5vw, 1.3rem);
    font-weight: 600;
    color: #212529; /* Hardcoded --clr-text-dark */
    margin: 0 0 16px 0; /* Hardcoded --space-sm */
    line-height: 1.4;
}
.ns-courses-section-v3_2 .ns-course-card-title-v3_2 a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease-out;
}
.ns-courses-section-v3_2 .ns-course-card-title-v3_2 a:hover {
    color: #0D6E7A; /* Hardcoded --clr-accent-primary */
}

.ns-courses-section-v3_2 .ns-course-card-description-v3_2 {
    font-family: 'Roboto', sans-serif;
    /* Hardcoded from v3.3 code */
    font-size: 0.95rem;
    line-height: 1.75;
    color: #6C757D; /* Hardcoded --clr-text-secondary */
    margin: 0 0 40px 0; /* Hardcoded --space-lg */
    flex-grow: 1;
}

.ns-courses-section-v3_2 .ns-course-card-link-v3_2 {
    font-family: 'Poppins', sans-serif;
    /* Hardcoded --font-link-sm-size */
    font-size: 0.9rem;
    font-weight: 600;
    color: #0D6E7A; /* Hardcoded --clr-accent-primary */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    margin-top: auto;
    transition: color 0.3s ease-out, transform 0.3s ease-out;
    position: relative;
}
.ns-courses-section-v3_2 .ns-course-card-link-v3_2:hover {
    color: #212529; /* Hardcoded --clr-text-dark */
    transform: translateX(3px);
}
.ns-courses-section-v3_2 .ns-course-card-link-v3_2 .ns-arrow {
    display: inline-block;
    margin-left: 8px;
    font-size: 1.15em;
    /* Hardcoded elastic transition */
    transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}
.ns-courses-section-v3_2 .ns-course-card-link-v3_2:hover .ns-arrow {
    transform: translateX(6px);
}
@media (prefers-reduced-motion: reduce) {
    .ns-courses-section-v3_2 .ns-course-card-link-v3_2 {
        transition: color 0.3s ease;
    }
    .ns-courses-section-v3_2 .ns-course-card-link-v3_2:hover {
        transform: none;
    }
    .ns-courses-section-v3_2 .ns-course-card-link-v3_2 .ns-arrow {
        transition: none;
    }
    .ns-courses-section-v3_2 .ns-course-card-link-v3_2:hover .ns-arrow {
        transform: none;
    }
}


/* ========================================================================== */
/* 9. Responsive Adjustments (Hardcoded)                                     */
/* ========================================================================== */
@media (max-width: 1199px) {
     .ns-courses-section-v3_2 .ns-courses-grid-v3_2 {
        grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
    }
}
@media (max-width: 991px) { /* Tablet */
    .ns-courses-section-v3_2 {
        padding: 80px 0 !important; /* Hardcoded --space-xxl */
    }
    .ns-courses-section-v3_2 .ns-courses-container-v3_2 {
        padding: 0 40px !important; /* Hardcoded --space-lg */
    }
    .ns-courses-section-v3_2 .ns-courses-grid-v3_2 {
        gap: 40px; /* Hardcoded --space-lg */
    }
}
@media (max-width: 767px) { /* Mobile */
     .ns-courses-section-v3_2 {
         padding: 64px 0 !important; /* Hardcoded --space-xl */
     }
     .ns-courses-section-v3_2 .ns-courses-container-v3_2 {
         padding: 0 24px !important; /* Hardcoded --space-md */
     }
     .ns-courses-section-v3_2 .ns-courses-header-v3_2 {
         text-align: left;
         margin-bottom: 64px; /* Hardcoded --space-xl */
     }
     .ns-courses-section-v3_2 .ns-courses-subheading-v3_2 {
         margin-left: 0; max-width: none;
     }
     .ns-courses-section-v3_2 .ns-courses-grid-v3_2 {
         gap: 24px; /* Hardcoded --space-md */
     }
     .ns-courses-section-v3_2 .ns-course-card-v3_2 {
         padding: 24px; /* Hardcoded --space-md */
     }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4f6ae51 *//* ==========================================================================
   Why Choose Us / Benefits Section Styles - Claroscuro Music Academy (v6.2)
   Focus: Added max-width to content container for ultrawide consistency.
   ========================================================================== */

/* --- Keyframes (Reuse) --- */
@keyframes ns-content-fade-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Section Container --- */
.ns-benefits-section-v6 {
    padding: var(--space-xxxl, 100px) var(--space-lg, 40px) var(--space-xxxl, 100px) var(--space-xxl, 80px) !important;
    position: relative;
    overflow: hidden;
    background-image: url('https://academiademusicaclaroscuro.com/wp-content/uploads/2025/04/claroscuro-escuela-de-musica-concierto.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* --- Dark Overlay --- */
.ns-benefits-section-v6::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(110deg, rgba(31, 31, 31, 0.90) 35%, rgba(31, 31, 31, 0.65) 70%, rgba(31, 31, 31, 0.4) 100%);
    z-index: 1;
}

/* --- Content Container (Flex Row for Header/Cards - Max Width Added) --- */
.ns-benefits-content-container {
    position: relative;
    z-index: 2;
    width: 100%;
    /* === ADDED: Max Width Constraint & Centering === */
    max-width: 1440px; /* Adjust value as needed (e.g., 1360px, 1500px) */
    margin-left: auto;
    margin-right: auto;
    /* === End Added === */
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; 
    gap: var(--space-xxl, 80px); 
}

/* --- Header Text Area (Left Side) --- */
.ns-benefits-header-v6 {
    flex: 1 1 40%; 
    min-width: 300px;
    text-align: left;
    color: var(--clr-text-light, #F8F9FA);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.ns-benefits-pre-headline-v6 {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--clr-accent-tertiary, #FD7E14);
    margin-bottom: var(--space-sm, 16px);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    opacity: 0;
    animation: ns-content-fade-slide-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 0.2s forwards;
}

.ns-benefits-heading-v6 {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2.4rem, 5.5vw, 3.2rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--clr-text-light, #F8F9FA);
    margin-bottom: var(--space-md, 24px);
    letter-spacing: -0.5px;
    opacity: 0;
    animation: ns-content-fade-slide-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 0.35s forwards;
}

.ns-benefits-subheading-v6 {
    font-family: 'Roboto', sans-serif;
    font-size: clamp(1rem, 2.5vw, 1.15rem);
    line-height: 1.75;
    color: var(--clr-text-muted-dark, #E0E0E0);
    margin: 0;
    opacity: 0;
    animation: ns-content-fade-slide-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 0.5s forwards;
}

/* === Benefits Cards Area (Grid) === */
.ns-benefits-card-area {
    flex: 1 1 55%; 
    min-width: 320px;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Columns */
    gap: var(--space-lg, 40px); 
}

/* Benefit Card Styling */
.ns-benefit-card-v6 {
    background-color: var(--clr-bg-card, #FFFFFF);
    border-radius: var(--radius-lg, 12px);
    padding: var(--space-md, 24px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm, 16px);
    border: 1px solid transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    will-change: transform, opacity, box-shadow;
}
/* Staggered animation delays */
.ns-benefits-card-area > *:nth-child(1) { animation: ns-content-fade-slide-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s forwards; }
.ns-benefits-card-area > *:nth-child(2) { animation: ns-content-fade-slide-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 0.7s forwards; }
.ns-benefits-card-area > *:nth-child(3) { animation: ns-content-fade-slide-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 0.8s forwards; }
.ns-benefits-card-area > *:nth-child(4) { animation: ns-content-fade-slide-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 0.9s forwards; }
.ns-benefits-card-area > *:nth-child(5) { animation: ns-content-fade-slide-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 1.0s forwards; }
.ns-benefits-card-area > *:nth-child(6) { animation: ns-content-fade-slide-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 1.1s forwards; }


.ns-benefit-card-v6:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.ns-benefit-card-icon-wrapper-v6 {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(13, 110, 122, 0.1);
}

.ns-benefit-card-icon-v6 {
    font-size: 20px;
    line-height: 1;
    color: var(--clr-accent-primary, #0D6E7A);
}

.ns-benefit-card-text-v6 {
    flex-grow: 1;
    text-align: left;
}

.ns-benefit-card-title-v6 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--clr-text-dark, #212529);
    margin: 0 0 3px 0;
    line-height: 1.4;
}

.ns-benefit-card-description-v6 {
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--clr-text-secondary, #6C757D);
    margin: 0;
}


/* --- Responsive Adjustments --- */
@media (max-width: 991px) { /* Tablet */
    .ns-benefits-section-v6 {
        padding: var(--space-xxl, 80px) var(--space-lg, 40px) !important;
    }
    .ns-benefits-content-container {
        gap: var(--space-xl, 64px);
         /* Keep container centered if max-width is less than viewport */
         max-width: 90%; /* Or adjust pixel value */
    }
    .ns-benefits-card-area {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md, 24px);
    }
     .ns-benefit-card-v6 {
        padding: var(--space-md, 24px);
    }
}

@media (max-width: 767px) { /* Mobile */
     .ns-benefits-section-v6 {
        padding: var(--space-xl, 64px) var(--space-md, 24px) !important;
    }
    .ns-benefits-content-container {
        flex-direction: column;
        gap: var(--space-lg, 40px);
        align-items: flex-start;
        max-width: 100%; /* Allow full width within padding */
        margin-left: 0; margin-right: 0; /* Reset auto margins */
    }
    .ns-benefits-header-v6 {
        flex-basis: auto;
        width: 100%;
        text-align: left;
    }
     .ns-benefits-heading-v6 {
        font-size: clamp(2rem, 7vw, 2.5rem);
    }
    .ns-benefits-subheading-v6 {
        margin-left: 0; margin-right: 0; max-width: none;
        font-size: var(--font-body-size, 1rem);
    }

    .ns-benefits-card-area {
        flex-basis: auto;
        width: 100%;
        grid-template-columns: 1fr;
        gap: var(--space-md, 24px);
    }
     .ns-benefit-card-icon-wrapper-v6 {
        width: 44px; height: 44px;
    }
     .ns-benefit-card-icon-v6 {
        font-size: 18px;
    }
    .ns-benefit-card-title-v6 {
        font-size: 1rem;
    }
     .ns-benefit-card-description-v6 {
        font-size: 0.875rem;
    }
}

/* Respect Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .ns-benefits-header-v6 > *,
  .ns-benefits-card-area > * {
      animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .ns-benefit-card-v6 {
    transition: box-shadow 0.3s ease;
  }
  .ns-benefit-card-v6:hover {
      transform: none; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7a6794a *//* ==========================================================================
   Testimonials Section Styles - Claroscuro Music Academy (v5.5 - Premium Refinements)
   Focus: Refined header centering, softer shadows, enhanced premium feel.
   ========================================================================== */

/* --- Keyframes (Reuse) --- */
@keyframes ns-content-fade-slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* --- Section Container --- */
.ns-testimonials-section-v5 {
    background-color: var(--clr-bg-card, #FFFFFF);
    position: relative;
    overflow: hidden; /* Add overflow hidden to contain elements */
}

/* --- Header Area with Background --- */
.ns-testimonials-bg-header-v5 {
    background-image: linear-gradient(rgba(31, 31, 31, 0.68), rgba(31, 31, 31, 0.85)), url('https://academiademusicaclaroscuro.com/wp-content/uploads/2025/04/claroscuro-recital-cancun-musica.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: var(--space-xxl, 80px) var(--space-xl, 64px); /* Consistent padding */
    position: relative;
    /* --- SIMPLIFIED CENTERING --- */
    text-align: center; /* Center text alignment for the block */
    min-height: 380px; /* Keep min-height */
    display: flex; /* Keep flex to vertically center */
    align-items: center; /* Keep vertical alignment */
    justify-content: center; /* Keep horizontal alignment */
    border-bottom-left-radius: 30px; /* Slightly larger radius */
    border-bottom-right-radius: 30px;
    overflow: hidden;
}

.ns-testimonials-header-content-v5 {
    max-width: 780px; /* Slightly increased max-width */
    margin: 0 auto; /* Standard block centering */
    color: var(--clr-text-light, #F8F9FA);
    position: relative;
    z-index: 2;
}

/* --- Header Typography (Minor adjustments for refinement) --- */
.ns-testimonials-pre-headline-v5 {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem; /* Consistent size */
    font-weight: 600;
    color: var(--clr-accent-tertiary, #FD7E14);
    margin-bottom: var(--space-sm, 16px); /* Increased spacing below */
    text-transform: uppercase;
    letter-spacing: 0.8px; /* Slightly wider spacing */
    display: block;
    opacity: 0;
    animation: ns-content-fade-slide-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 0.2s forwards;
}

.ns-testimonials-heading-v5 {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2.3rem, 5.5vw, 3.2rem); /* Slightly larger max size */
    font-weight: 700; /* Keep bold */
    line-height: 1.3;
    color: var(--clr-text-light, #F8F9FA);
    margin-bottom: var(--space-md, 24px); /* Increased spacing below */
    letter-spacing: -0.5px;
    opacity: 0;
    animation: ns-content-fade-slide-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 0.35s forwards;
}

.ns-testimonials-subheading-v5 {
    font-family: 'Roboto', sans-serif;
    font-size: clamp(1.05rem, 2.5vw, 1.15rem); /* Slightly larger */
    color: var(--clr-text-muted-dark, #E0E0E0);
    max-width: 680px; /* Slightly adjusted width */
    margin: 0 auto;
    line-height: 1.75; /* Slightly increased line height */
    opacity: 0;
    animation: ns-content-fade-slide-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 0.5s forwards;
}

/* --- Swiper Container Area (Handles Overlap and Padding) --- */
.ns-testimonials-swiper-container-v5 {
    /* Increased bottom padding for more space below */
    padding: var(--space-xl, 64px) var(--space-xl, 64px) var(--space-xxxl, 100px) var(--space-xl, 64px);
    margin-top: -130px; /* Keep overlap */
    position: relative;
    z-index: 3;
    opacity: 0;
    animation: ns-content-fade-slide-up 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s forwards;
}

/* Swiper instance - Controls peeking via JS settings */
.ns-testimonials-swiper-v5 {
    width: 100%;
    max-width: 1180px; /* Slightly wider max-width */
    margin: 0 auto;
    overflow: visible; /* Keep visible for peeking slides */
    position: relative;
}

.ns-testimonials-swiper-wrapper-v5 {
    align-items: stretch !important; /* Stretch needed for equal height if content varies */
    display: flex;
    padding: var(--space-sm, 16px) 0; /* Padding for shadow room */
}

/* --- Testimonial Slide Styling (Premium Refinements) --- */
.ns-testimonial-slide-v5 {
    background-color: var(--clr-bg-card, #FFFFFF);
    border-radius: var(--radius-lg, 12px); /* Slightly larger radius */
    padding: var(--space-xl, 48px) var(--space-lg, 40px); /* Adjusted padding */
    /* --- Softer, more elevated shadow --- */
    box-shadow: 0 10px 35px rgba(30, 30, 60, 0.07), 0 4px 10px rgba(30, 30, 60, 0.04);
    height: auto; /* Let content define height */
    display: flex !important; /* Keep flex for structure */
    flex-direction: column !important;
    text-align: left;
    border: 1px solid var(--clr-border-light, #E0E0E0);
    transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
    flex-shrink: 0;
    will-change: opacity, transform, box-shadow;
    position: relative;
    width: auto; /* Allow Swiper to calculate width based on slidesPerView */
}

/* Style adjustments for non-looping, non-centered slides */
/* No specific non-active opacity/transform needed unless desired for peek */
/* Example: */
/*
.ns-testimonial-slide-v5:not(.swiper-slide-visible) {
     opacity: 0.5;
}
*/


/* Quote Text (Slightly larger) */
.ns-testimonial-quote-v5 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.05rem; /* Slightly larger */
    line-height: 1.8; /* Increased line height */
    color: var(--clr-text-secondary, #6C757D);
    margin: 0 0 var(--space-lg, 40px) 0;
    flex-grow: 1;
    min-height: 6em; /* Keep minimum height for consistency */
}

/* Author Info (No major changes) */
.ns-testimonial-author-info-v5 {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 16px);
    margin-top: auto; /* Push to bottom */
    position: relative;
    padding-right: 40px; /* Keep space for quote mark */
}

.ns-testimonial-author-image-v5 {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.ns-testimonial-author-details-v5 { }
.ns-testimonial-author-name-v5 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1rem; /* Standard size */
    color: var(--clr-text-dark, #212529);
    display: block;
    margin-bottom: 2px;
}
.ns-testimonial-author-context-v5 {
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem; /* Standard label size */
    color: var(--clr-text-secondary, #6C757D);
    display: block;
}

/* Quote Mark (Subtler) */
.ns-testimonial-slide-v5::after {
    content: '\201D';
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 3rem; /* Slightly larger */
    font-weight: normal; /* Less bold */
    line-height: 1;
    color: var(--clr-accent-tertiary, #FD7E14);
    position: absolute;
    bottom: 25px; /* Adjusted position */
    right: 35px;  /* Adjusted position */
    z-index: 1;
    opacity: 0.75; /* Slightly softer opacity */
}

/* --- Swiper Pagination (Refined Active State) --- */
.ns-testimonials-pagination-v5 {
    position: static !important; /* Important for layout flow */
    margin-top: var(--space-xl, 64px) !important; /* Increased space */
    text-align: center;
    z-index: 10;
}

.ns-testimonials-pagination-v5 .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: rgba(13, 110, 122, 0.2);
    opacity: 1;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin: 0 6px !important;
    border-radius: 50%;
}

.ns-testimonials-pagination-v5 .swiper-pagination-bullet-active {
    background-color: var(--clr-accent-primary, #0D6E7A);
    transform: scale(1.25);
}

/* --- Optional Navigation Arrows (If added back) --- */
/*
.ns-testimonials-button-prev-v5,
.ns-testimonials-button-next-v5 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    background-color: var(--clr-bg-card);
    border: 1px solid var(--clr-border-light);
    border-radius: 50%;
    color: var(--clr-accent-primary);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 10;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
}
.ns-testimonials-button-prev-v5:hover,
.ns-testimonials-button-next-v5:hover {
     background-color: var(--clr-accent-primary);
     color: var(--clr-cta-text-light);
     border-color: var(--clr-accent-primary);
     box-shadow: var(--shadow-button-hover);
     transform: translateY(-50%) scale(1.05);
}
.ns-testimonials-button-prev-v5 { left: var(--space-sm); }
.ns-testimonials-button-next-v5 { right: var(--space-sm); }
.ns-testimonials-button-prev-v5::after,
.ns-testimonials-button-next-v5::after { font-size: 14px; font-weight: 600; }
.swiper-button-disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
*/


/* --- Responsive Adjustments --- */
@media (max-width: 991px) { /* Tablet */
    .ns-testimonials-bg-header-v5 {
        padding: var(--space-xl, 64px) var(--space-lg, 40px);
        min-height: 320px;
    }
    .ns-testimonials-swiper-container-v5 {
        padding: var(--space-lg, 40px) var(--space-lg, 40px) var(--space-xxl, 80px) var(--space-lg, 40px);
        margin-top: -110px;
    }
}

@media (max-width: 767px) { /* Mobile */
     .ns-testimonials-bg-header-v5 {
        padding: var(--space-xl, 64px) var(--space-md, 24px);
        min-height: auto;
        text-align: left;
        justify-content: flex-start;
        border-radius: 0 0 20px 20px;
     }
     .ns-testimonials-header-content-v5 {
         margin-left: 0; margin-right: 0; max-width: none;
         text-align: left;
     }
    .ns-testimonials-subheading-v5 {
        margin-left: 0; margin-right: 0; max-width: none;
        font-size: 1rem;
    }
     .ns-testimonials-heading-v5 {
        font-size: clamp(2rem, 7vw, 2.5rem);
    }

    .ns-testimonials-swiper-container-v5 {
        padding: var(--space-lg, 40px) var(--space-md, 24px) var(--space-xl, 64px) var(--space-md, 24px);
        margin-top: -70px;
    }
    .ns-testimonials-swiper-v5 {
        overflow: hidden; /* Hide overflow on mobile if showing 1 slide */
        max-width: none;
    }
    .ns-testimonial-slide-v5 {
        padding: var(--space-lg, 32px) var(--space-md, 24px);
        border-radius: var(--radius-md, 8px);
        /* Reset non-active styles for mobile if showing 1 slide */
        opacity: 1;
        transform: scale(1);
    }
    .ns-testimonial-slide-v5::after {
        font-size: 2.5rem;
        bottom: 15px;
        right: 20px;
        opacity: 0.7;
    }
     .ns-testimonials-pagination-v5 {
        margin-top: var(--space-lg, 40px) !important;
    }
     /* Hide nav arrows on mobile if added back */
     /* .ns-testimonials-button-prev-v5, .ns-testimonials-button-next-v5 { display: none; } */
}

/* --- Respect Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .ns-testimonials-pre-headline-v5,
    .ns-testimonials-heading-v5,
    .ns-testimonials-subheading-v5,
    .ns-testimonials-swiper-container-v5 {
        animation: none !important; opacity: 1 !important; transform: none !important;
    }
    .ns-testimonial-slide-v5 {
        transition: opacity 0.4s ease, box-shadow 0.4s ease !important;
        transform: none !important; /* Disable transform */
        opacity: 1 !important; /* Ensure visible */
    }
     .ns-testimonials-pagination-v5 .swiper-pagination-bullet {
         transition: background-color 0.2s ease !important;
     }
     .ns-testimonials-pagination-v5 .swiper-pagination-bullet-active {
         transform: none !important;
     }
     /* Add styles for arrows if used */
     /*
     .ns-testimonials-button-prev-v5, .ns-testimonials-button-next-v5 {
          transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
     }
     .ns-testimonials-button-prev-v5:hover, .ns-testimonials-button-next-v5:hover {
          transform: none !important; box-shadow: none !important;
      }
     */
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-537400d *//* ========================================================================== */
/* Concert Gallery Section Styles - v1.4 (Premium Slider - Centered Controls) */
/* ========================================================================== */

/* --- Keyframes (Ensure defined globally or here) --- */
@keyframes ns-content-fade-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 1. Main Section Styling (Overflow Fix & Premium Enhancements) */
.ns-concert-gallery-section-v1_3 {
    background-color: #FCFCFD; /* Slightly off-white */
    padding: var(--space-xxxl, 100px) 0; /* Vertical padding only on section */
    overflow: hidden; /* CRITICAL: Contain the slider */
    position: relative; /* Needed for absolute positioned controls */
}

/* Inner container for content alignment & padding */
.ns-concert-gallery-container-v1_3 {
     max-width: 1440px; /* Wider max-width */
     margin-left: auto;
     margin-right: auto;
     /* Apply asymmetrical padding here */
     padding-left: var(--space-xxl, 80px);
     padding-right: var(--space-lg, 40px);
}


/* 2. Section Header Styling (Refined) */
.ns-concert-gallery-header-v1_3 {
    text-align: center;
    margin-bottom: var(--space-xl, 64px);
    /* No padding needed here if using inner container */
    opacity: 0;
    animation: ns-content-fade-slide-up 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.ns-concert-gallery-pre-headline-v1_3 {
    font-family: 'Poppins', sans-serif;
    font-size: var(--font-preheadline-size, 1rem);
    font-weight: 600;
    color: var(--clr-accent-primary, #0D6E7A);
    margin-bottom: var(--space-sm, 16px);
    text-transform: uppercase;
    letter-spacing: 1px; /* Slightly more spacing */
}

.ns-concert-gallery-headline-v1_3 {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2.2rem, 5vw, 3.2rem); /* Slightly larger */
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: var(--space-md, 24px);
    color: var(--clr-text-dark, #212529);
    letter-spacing: -0.5px; /* Slight negative spacing */
}

.ns-concert-gallery-subheadline-v1_3 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.15rem;
    line-height: 1.75;
    color: var(--clr-text-secondary, #6C757D);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}


/* 3. Swiper Slideshow Styling (Premium & Overflow Fix) */
.ns-concert-swiper-container-v1_3 {
    width: 100%; /* Take full width of its container */
    position: relative; /* Context for arrows/pagination */
    margin-left: auto; /* Ensure centered if container is wider */
    margin-right: auto;
    opacity: 0;
    animation: ns-content-fade-slide-up 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s forwards;
}

/* Wrapper - Adjust padding */
.ns-concert-swiper-container-v1_3 .swiper-wrapper {
    padding-top: var(--space-sm, 16px); /* Padding for shadows */
    padding-bottom: var(--space-lg, 40px); /* More bottom padding */
    align-items: center;
    /* Cursors */
    cursor: grab;
}
.ns-concert-swiper-container-v1_3 .swiper-wrapper:active {
    cursor: grabbing;
}


.ns-concert-slide-v1_3 {
    width: auto; /* Let Swiper calculate based on content/CSS */
    max-width: 85%; /* Limit slide width for peek effect */
    border-radius: var(--radius-xl, 16px);
    overflow: hidden;
    /* Enhanced shadow */
    box-shadow: 0 10px 30px rgba(80, 90, 120, 0.07), 0 4px 10px rgba(80, 90, 120, 0.05);
    background-color: var(--clr-bg-card, #FFFFFF);
    transition: transform 0.6s var(--timing-function-smooth),
                box-shadow 0.6s var(--timing-function-smooth),
                opacity 0.6s var(--timing-function-smooth);
    opacity: 0.4; /* More faded non-active slides */
    transform: scale(0.92); /* Slightly smaller non-active */
    position: relative;
}

/* Active slide styling */
.ns-concert-slide-v1_3.swiper-slide-active {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 20px 60px rgba(50, 50, 90, 0.12), 0 10px 30px rgba(50, 50, 90, 0.1);
    z-index: 2;
}

/* Hover effect ONLY on non-active slides */
.ns-concert-slide-v1_3:not(.swiper-slide-active):hover {
    opacity: 0.7;
    transform: scale(0.95);
    box-shadow: 0 15px 45px rgba(50, 50, 90, 0.1), 0 6px 20px rgba(50, 50, 90, 0.08);
}


.ns-concert-slide-image-v1_3 {
    display: block;
    width: 100%;
    height: auto; /* Let height adjust */
    max-height: 600px; /* Max image display height */
    object-fit: cover;
    transition: transform 0.7s var(--timing-function-smooth);
}

/* Subtle zoom image slightly on active slide */
.ns-concert-slide-v1_3.swiper-slide-active .ns-concert-slide-image-v1_3 {
     transform: scale(1.02);
}


/* 4. Swiper Controls Wrapper (Centering Fix) */
.ns-concert-swiper-container-v1_3 .ns-swiper-controls-v1_3 {
    display: flex;
    /* === Changed: Center the items instead of spacing them out === */
    justify-content: center; 
    align-items: center;
    /* === Added: Use gap for consistent spacing === */
    gap: var(--space-md, 24px); 
    margin-top: var(--space-lg, 40px); /* Space above controls */
    /* Removed padding as items are now centered */
    /* padding: 0 var(--space-sm); */ 
    position: relative;
    z-index: 10;
}


/* 5. Swiper Pagination Styling (Refined Look & Spacing) */
.ns-concert-swiper-container-v1_3 .ns-swiper-pagination-v1_3 {
    position: static; /* Correct - Remains static */
    text-align: center; /* Keep for potential fallback */
    font-family: 'Poppins', monospace; 
    font-size: 1.05rem; /* Slightly larger */
    font-weight: 500;
    color: var(--clr-text-secondary, #6C757D);
    line-height: 1;
    flex-shrink: 0; /* Prevent shrinking */
    /* Removed margin as gap on parent handles spacing */
    /* margin: 0 var(--space-md); */ 
    /* Optional: Min-width to ensure some space */
    min-width: 60px; 
}
.ns-concert-swiper-container-v1_3 .swiper-pagination-current { /* Current number slightly bolder */
    font-weight: 700; /* Bolder */
    color: var(--clr-text-dark, #212529);
}
.ns-concert-swiper-container-v1_3 .swiper-pagination-total { /* Total number slightly lighter */
     color: var(--clr-text-secondary, #6C757D);
     opacity: 0.8; /* Make total slightly less prominent */
     font-weight: 500; /* Ensure consistency if changing base weight */
}
.ns-concert-swiper-container-v1_3 .ns-swiper-fraction-divider {
    margin: 0 0.3em; 
    opacity: 0.7;
}


/* 6. Swiper Navigation Arrows (Premium - Unchanged Styling, Centered Layout) */
.ns-concert-swiper-container-v1_3 .ns-swiper-button-prev-v1_3,
.ns-concert-swiper-container-v1_3 .ns-swiper-button-next-v1_3 {
    position: static; /* Correct */
    transform: none; /* Correct */
    width: 44px; 
    height: 44px;
    background-color: transparent;
    border: 1px solid var(--clr-border-light, #E0E0E0); 
    border-radius: 50%;
    color: var(--clr-accent-primary, #0D6E7A);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s var(--timing-function-smooth);
    cursor: pointer;
    margin: 0; /* Reset margins */
    flex-shrink: 0; 
}

.ns-concert-swiper-container-v1_3 .ns-swiper-button-prev-v1_3:hover,
.ns-concert-swiper-container-v1_3 .ns-swiper-button-next-v1_3:hover {
    background-color: var(--clr-accent-primary, #0D6E7A);
    color: var(--clr-cta-text-light, #FFFFFF);
    border-color: var(--clr-accent-primary, #0D6E7A);
    transform: scale(1.08); 
    box-shadow: 0 6px 15px rgba(13, 110, 122, 0.2);
}

.ns-concert-swiper-container-v1_3 .ns-swiper-button-prev-v1_3::after,
.ns-concert-swiper-container-v1_3 .ns-swiper-button-next-v1_3::after {
    font-size: 14px; 
    font-weight: 600;
}

/* Disabled state */
.ns-concert-swiper-container-v1_3 .swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}


/* 7. Responsive Adjustments */
@media (max-width: 991px) { /* Tablet */
    .ns-concert-gallery-section-v1_3 {
        padding-top: var(--space-xxl, 80px);
        padding-bottom: var(--space-xxl, 80px);
    }
    .ns-concert-gallery-container-v1_3 {
         padding-left: var(--space-lg, 40px);
         padding-right: var(--space-lg, 40px);
    }
     .ns-concert-gallery-headline-v1_3 {
        font-size: clamp(2.1rem, 4.5vw, 2.8rem);
     }
     .ns-concert-slide-v1_3 { max-width: 90%; } /* Adjust max-width */
}

@media (max-width: 767px) { /* Mobile */
    .ns-concert-gallery-section-v1_3 {
        padding-top: var(--space-xl, 64px);
        padding-bottom: var(--space-xl, 64px);
    }
     .ns-concert-gallery-container-v1_3 {
         padding-left: var(--space-md, 24px);
         padding-right: var(--space-md, 24px);
    }
     .ns-concert-gallery-headline-v1_3 { font-size: clamp(1.8rem, 6.5vw, 2.2rem); }
     .ns-concert-gallery-subheadline-v1_3 { font-size: 1.05rem; }
     .ns-concert-slide-v1_3 {
         max-width: 95%; /* Allow slightly larger slides on mobile */
         transform: scale(1); opacity: 1; /* Show slides fully */
         border-radius: var(--radius-lg);
     }
     .ns-concert-slide-v1_3:not(.swiper-slide-active) {
        opacity: 0.6; transform: scale(0.95); /* Reintroduce subtle difference */
     }
     .ns-concert-swiper-container-v1_3 .swiper-wrapper { padding-bottom: var(--space-lg); }
     /* Adjust controls for mobile */
     .ns-concert-swiper-container-v1_3 .ns-swiper-controls-v1_3 {
         margin-top: var(--space-md);
         /* Ensure gap is appropriate on mobile */
         gap: var(--space-sm, 16px); 
         padding: 0; /* Remove padding */
     }
     .ns-concert-swiper-container-v1_3 .ns-swiper-pagination-v1_3 { 
         font-size: 0.95rem; /* Slightly adjusted size */
         min-width: 50px; /* Adjusted min-width */
     }
     .ns-concert-swiper-container-v1_3 .ns-swiper-button-prev-v1_3,
     .ns-concert-swiper-container-v1_3 .ns-swiper-button-next-v1_3 {
         width: 38px; height: 38px;
     }
     .ns-concert-swiper-container-v1_3 .ns-swiper-button-prev-v1_3::after,
     .ns-concert-swiper-container-v1_3 .ns-swiper-button-next-v1_3::after { font-size: 12px; }
}

/* 8. Reduced Motion */
/* (Ensure global reduced motion styles cover transitions/animations here too) */
@media (prefers-reduced-motion: reduce) {
    .ns-concert-gallery-header-v1_3,
    .ns-concert-swiper-container-v1_3 { animation: none !important; opacity: 1 !important; }
     .ns-concert-slide-v1_3 {
        transition: opacity 0.4s ease, box-shadow 0.4s ease !important;
        transform: scale(1) !important;
        opacity: 1 !important;
     }
    .ns-concert-slide-v1_3.swiper-slide-active { box-shadow: var(--shadow-md) !important; }
     .ns-concert-slide-v1_3:not(.swiper-slide-active):hover { transform: none !important; }
     .ns-concert-slide-image-v1_3 { transition: none !important; transform: none !important; }
     .ns-concert-swiper-container-v1_3 .ns-swiper-button-prev-v1_3,
     .ns-concert-swiper-container-v1_3 .ns-swiper-button-next-v1_3 { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important; }
     .ns-concert-swiper-container-v1_3 .ns-swiper-button-prev-v1_3:hover,
     .ns-concert-swiper-container-v1_3 .ns-swiper-button-next-v1_3:hover { transform: none !important; box-shadow: none !important; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9bcb702 *//* ==================================================================== */
/* FAQ Section Styles v1.3 (Premium - Animated Particle BG)           */
/* ==================================================================== */

/* 0. Keyframes & Reduced Motion */

/* Keyframe for particle movement */
@keyframes ns-faq-particles-float {
  0% { background-position: 0% 0%; }
  50% { background-position: -10% 15%; } /* Gentle diagonal drift */
  100% { background-position: 0% 0%; }
}

/* Ensure global keyframes for content entrance exist if used elsewhere */
/* @keyframes ns-content-fade-slide-up { ... } */

@media (prefers-reduced-motion: reduce) {
  .ns-faq-section--premium {
      /* Disable particle animation */
      animation: none !important;
      /* Static background fallback */
      background-image: linear-gradient(
          to bottom,
          var(--clr-bg-card, #FFFFFF) 0%,
          var(--clr-bg-light, #F8F9FA) 70%,
          hsl(from var(--clr-bg-light) h s calc(l - 2%)) 100%
      ) !important;
  }
  /* Also disable other animations if needed globally */
  /* Example:
  .ns-faq-section--premium *,
  .ns-faq-section--premium *::before,
  .ns-faq-section--premium *::after {
      animation: none !important;
      transition: none !important;
  }
  */
}

/* Ensure HSL variables are defined globally in :root */
/* Example: :root { --clr-accent-primary-hsl: 188 82% 26%; } */


/* 1. Section General Styles - UPDATED ANIMATED BACKGROUND */
.ns-faq-section--premium {
  /* Fallback background color */
  background-color: hsl(from var(--clr-bg-light) h s calc(l - 1%)); /* Slightly darker base */

  /* Multi-layer Background: Particles + Gradient */
  background-image:
    /* Layer 1: Small faint particles (Teal accent) */
    radial-gradient(circle at 10% 20%, hsla(var(--clr-accent-primary-hsl, 188, 82%, 26%), 0.1) 1px, transparent 2px),
    radial-gradient(circle at 60% 40%, hsla(var(--clr-accent-primary-hsl, 188, 82%, 26%), 0.08) 1px, transparent 2px),
    /* Layer 2: Slightly larger faint particles (Light Gray) */
    radial-gradient(circle at 30% 70%, hsla(0, 0%, 80%, 0.15) 2px, transparent 3px),
    radial-gradient(circle at 80% 90%, hsla(0, 0%, 80%, 0.12) 2px, transparent 3px),
    radial-gradient(circle at 50% 50%, hsla(0, 0%, 80%, 0.1) 1px, transparent 2px),
    /* Layer 3: Base Soft Vertical Gradient */
    linear-gradient(
      to bottom,
      var(--clr-bg-card, #FFFFFF) 0%,
      var(--clr-bg-light, #F8F9FA) 60%, /* Adjust gradient stops */
      hsl(from var(--clr-bg-light) h s calc(l - 3%)) 100% /* Slightly darker end */
    );

  /* Control particle density and size */
  background-size:
    100px 100px, /* Particle layer 1 density */
    150px 150px, /* Particle layer 1 density */
    120px 120px, /* Particle layer 2 density */
    90px 90px,   /* Particle layer 2 density */
    200px 200px, /* Particle layer 2 density */
    auto;        /* Gradient layer */

  /* Apply animation to particle layers only */
  animation: ns-faq-particles-float 25s linear infinite; /* Adjust duration for speed */

  /* Padding and other styles */
  padding-top: var(--space-xxxl, 100px);
  padding-right: var(--space-lg, 40px);
  padding-bottom: var(--space-xxxl, 100px);
  padding-left: var(--space-xxl, 80px);
  position: relative;
  overflow: hidden;
}


/* 1.1 Container (Scoped) */
.ns-faq-section--premium .ns-faq-container {
   max-width: 850px;
   margin: 0 auto;
   position: relative; /* Ensure content stays above animated background */
   z-index: 1;
 }

/* 2. Section Heading (Scoped) */
.ns-faq-section--premium .ns-faq-heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: clamp(2.2rem, 4.8vw, 2.9rem);
  line-height: 1.35;
  color: var(--clr-text-dark, #212529);
  text-align: center;
  margin-bottom: calc(var(--space-xl, 64px) * 1.2);
  position: relative; /* Ensure heading is above background */
  z-index: 1;
}

/* 3. Accordion Wrapper (Scoped) */
.ns-faq-section--premium .ns-faq-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-md, 24px);
  position: relative; /* Ensure accordion is above background */
  z-index: 1;
}

/* 4. Individual FAQ Item (Scoped) */
.ns-faq-section--premium .ns-faq-item {
  background-color: var(--clr-bg-card, #FFFFFF);
  border: 1px solid transparent;
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm, 0 4px 15px rgba(0,0,0,0.05));
  overflow: hidden;
  transition: box-shadow 0.35s var(--timing-function-smooth),
              border-color 0.35s var(--timing-function-smooth);
  position: relative; /* Ensure item content is above section background */
  z-index: 1;
}
.ns-faq-section--premium .ns-faq-item:hover {
  box-shadow: var(--shadow-md, 0 8px 25px rgba(0,0,0,0.08));
}
.ns-faq-section--premium .ns-faq-item.is-open {
  border-color: var(--clr-accent-primary, #0D6E7A);
  box-shadow: var(--shadow-md, 0 8px 25px rgba(0,0,0,0.08));
}

/* 5. FAQ Question Button (Scoped) */
.ns-faq-section--premium .ns-faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: transparent;
  border: none;
  padding: var(--space-lg, 40px);
  cursor: pointer;
  text-align: left;
  position: relative;
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--clr-text-dark, #212529);
  transition: color 0.3s ease;
}
.ns-faq-section--premium .ns-faq-question:hover,
.ns-faq-section--premium .ns-faq-question:focus-visible {
  color: var(--clr-accent-primary, #0D6E7A);
}
.ns-faq-section--premium .ns-faq-item:has(.ns-faq-question:focus-visible) {
    outline: 2px solid var(--clr-accent-tertiary, #FD7E14);
    outline-offset: 3px;
}

/* 6. FAQ Icon Wrapper & Icon (Scoped) */
.ns-faq-section--premium .ns-faq-icon-wrapper {
  margin-left: var(--space-lg, 40px);
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: hsla(var(--clr-accent-primary-hsl, 188, 82%, 26%), 0.08);
  transition: background-color 0.3s ease;
}
.ns-faq-section--premium .ns-faq-question:hover .ns-faq-icon-wrapper {
    background-color: hsla(var(--clr-accent-primary-hsl, 188, 82%, 26%), 0.15);
}
.ns-faq-section--premium .ns-faq-icon {
  position: relative;
  width: 14px;
  height: 14px;
}
.ns-faq-section--premium .ns-faq-icon::before,
.ns-faq-section--premium .ns-faq-icon::after {
  content: '';
  position: absolute;
  background-color: var(--clr-accent-primary, #0D6E7A);
  transition: transform 0.35s var(--timing-function-smooth),
              opacity 0.35s var(--timing-function-smooth);
  border-radius: 1px;
}
.ns-faq-section--premium .ns-faq-icon::before {
  width: 100%; height: 2px; left: 0; top: 50%; transform: translateY(-50%);
}
.ns-faq-section--premium .ns-faq-icon::after {
  width: 2px; height: 100%; left: 50%; top: 0; transform: translateX(-50%);
}
.ns-faq-section--premium .ns-faq-item.is-open .ns-faq-icon::after {
  transform: translateX(-50%) rotate(90deg); opacity: 0;
}
.ns-faq-section--premium .ns-faq-item.is-open .ns-faq-icon::before {
   transform: translateY(-50%) rotate(180deg);
}

/* 7. FAQ Answer Panel (Scoped) */
.ns-faq-section--premium .ns-faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  position: static !important; visibility: visible !important; display: block !important;
}
.ns-faq-section--premium .ns-faq-answer-content {
  color: var(--clr-text-secondary, #6C757D);
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  padding: 0 var(--space-lg, 40px) var(--space-lg, 40px) var(--space-lg, 40px);
  border-top: 1px solid var(--clr-border-light, #E0E0E0);
  margin-top: calc(-1 * var(--space-xs));
}
.ns-faq-section--premium .ns-faq-answer-content p { margin-bottom: var(--space-sm, 16px); }
.ns-faq-section--premium .ns-faq-answer-content p:last-child { margin-bottom: 0; }
.ns-faq-section--premium .ns-faq-answer-content ul { list-style: disc; padding-left: var(--space-md, 24px); margin-top: var(--space-sm, 16px); margin-bottom: var(--space-sm, 16px); }
.ns-faq-section--premium .ns-faq-answer-content li { margin-bottom: var(--space-xs, 8px); }


/* 8. Responsive Adjustments (Scoped) */
@media (max-width: 991px) {
  .ns-faq-section--premium { padding: var(--space-xxl, 80px) var(--space-lg, 40px); }
}

@media (max-width: 767px) {
  .ns-faq-section--premium { padding: var(--space-xl, 64px) var(--space-md, 24px); }
  .ns-faq-section--premium .ns-faq-heading { font-size: clamp(1.8rem, 6vw, 2.2rem); margin-bottom: var(--space-lg, 40px); }
  .ns-faq-section--premium .ns-faq-accordion { gap: var(--space-sm, 16px); }
  .ns-faq-section--premium .ns-faq-item { border-radius: var(--radius-md); }
  .ns-faq-section--premium .ns-faq-question { font-size: 1.05rem; padding: var(--space-md, 24px); }
  .ns-faq-section--premium .ns-faq-icon-wrapper { margin-left: var(--space-md); width: 28px; height: 28px; }
  .ns-faq-section--premium .ns-faq-icon { width: 12px; height: 12px; }
  .ns-faq-section--premium .ns-faq-answer-content { font-size: 0.95rem; padding: var(--space-md, 24px); }
  /* Simplify background animation on mobile */
   .ns-faq-section--premium {
       animation: none; /* Disable float animation */
       /* Keep particle pattern static or remove entirely */
       /* background-size: ... adjust for static pattern ...; */
       /* OR */
       /* background-image: linear-gradient(...); */ /* Remove particle layers */
   }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6caf328 *//* ============================================================= */
/* Enhanced CTA Section Styles v1.4 (Premium Deco Icons & Combined) */
/* ============================================================= */

/* 0. Keyframes & Reduced Motion (Define Globally or Ensure Present) */
@keyframes ns-content-fade-slide-up {
  from {
    opacity: 0;
    transform: translateY(25px); /* Slightly larger initial offset */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ns-cta-section--ref-inspired .ns-animated-content,
  .ns-cta-section--ref-inspired .ns-deco-icon,
  .ns-cta-section--ref-inspired .ns-cta-bg-shape {
    animation: none !important;
    transition: none !important; /* Disable transitions too */
    opacity: 1 !important;
    transform: none !important;
  }
  .ns-cta-section--ref-inspired .ns-deco-icon,
  .ns-cta-section--ref-inspired .ns-cta-bg-shape {
     display: none !important; /* Hide purely decorative elements */
  }

}

/* 1. CTA Section General Styles */
.ns-cta-section--ref-inspired {
  position: relative; /* Crucial for absolute positioning of deco elements */
  background: linear-gradient(140deg, var(--clr-bg-dark, #1F1F1F) 10%, #2a2a2a 60%, #1a1a1a 100%); /* Enhanced gradient */
  color: var(--clr-text-light, #F8F9FA);
  /* Asymmetrical Desktop Padding (Guideline 6.3) */
  padding-top: calc(var(--space-xxxl, 100px) * 1.2); /* Slightly more top padding */
  padding-right: var(--space-lg, 40px);
  padding-bottom: calc(var(--space-xxxl, 100px) * 1.2); /* Slightly more bottom padding */
  padding-left: var(--space-xxl, 80px);
  text-align: center;
  overflow: hidden; /* MUST be hidden to contain absolute elements */
}

/* 1.1 Background Decorative Shapes */
.ns-cta-bg-shape {
  content: '';
  position: absolute;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.15); /* Slightly darker shapes */
  z-index: 0;
  pointer-events: none;
  transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.ns-cta-bg-shape--left {
  width: 350px; /* Larger */
  height: 350px;
  bottom: -150px; /* Adjusted position */
  left: -120px;
  opacity: 0.7;
}

.ns-cta-bg-shape--right {
  width: 500px; /* Larger */
  height: 500px;
  top: -200px; /* Adjusted position */
  right: -210px;
  opacity: 0.6;
}
/* Subtle parallax/movement on section hover for bg shapes */
.ns-cta-section--ref-inspired:hover .ns-cta-bg-shape--left {
    transform: translateX(-15px) translateY(10px) scale(1.05);
}
.ns-cta-section--ref-inspired:hover .ns-cta-bg-shape--right {
    transform: translateX(15px) translateY(-10px) scale(1.05);
}


/* 1.2 Decorative Music Icons */
.ns-deco-icon {
  position: absolute;
  color: rgba(255, 255, 255, 0.05); /* More subtle */
  font-size: 3rem; /* Base size */
  z-index: 1; /* Above bg shapes, below content */
  pointer-events: none;
  transition: transform 0.6s var(--timing-function-smooth), color 0.6s ease;
}

/* Positioning Example (Adjust as needed for visual balance) */
.ns-deco-icon--music1 {
  top: 10%;
  left: 5%; /* Further out */
  font-size: 4rem;
  transform: rotate(-20deg);
}
.ns-deco-icon--guitar {
  top: 20%;
  right: 8%; /* Further out */
  font-size: 5.5rem;
  transform: rotate(15deg);
}
.ns-deco-icon--notes {
  bottom: 12%;
  left: 20%;
  font-size: 3.5rem;
  transform: rotate(10deg);
}
.ns-deco-icon--mic {
  bottom: 18%;
  right: 15%;
  font-size: 4rem;
  transform: rotate(-10deg);
}
.ns-deco-icon--disc {
    top: 60%;
    left: 3%;
    font-size: 3rem;
    transform: rotate(25deg);
    opacity: 0.04; /* Even more subtle */
}

/* Subtle movement & visibility increase on section hover for icons */
.ns-cta-section--ref-inspired:hover .ns-deco-icon {
    color: rgba(255, 255, 255, 0.08);
    transform: scale(1.15) rotate(var(--hover-rotate, 0deg)) translateY(-10px); /* Use var for individual rotation */
}
/* Add individual rotations on hover */
.ns-cta-section--ref-inspired:hover .ns-deco-icon--music1 { --hover-rotate: -25deg; }
.ns-cta-section--ref-inspired:hover .ns-deco-icon--guitar { --hover-rotate: 20deg; }
.ns-cta-section--ref-inspired:hover .ns-deco-icon--notes { --hover-rotate: 15deg; }
.ns-cta-section--ref-inspired:hover .ns-deco-icon--mic { --hover-rotate: -15deg; }
.ns-cta-section--ref-inspired:hover .ns-deco-icon--disc { --hover-rotate: 30deg; }


/* 2. Main Content Wrapper */
.ns-cta-content {
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  position: relative; /* Ensure content is above decorative elements */
  z-index: 2;
}

/* 2.1 Pre-headline */
.ns-cta-preheadline {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--clr-accent-primary, #0D6E7A);
  margin-bottom: var(--space-xs, 8px);
  letter-spacing: 0.8px; /* Slightly more spacing */
}

/* 3. CTA Heading (H2) */
.ns-cta-heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  line-height: 1.3;
  color: var(--clr-text-light, #F8F9FA);
  margin-bottom: var(--space-md, 24px); /* More space after heading */
}

/* 4. CTA Text (Paragraph) */
.ns-cta-text {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 1.15rem; /* Slightly larger */
  line-height: 1.75; /* More line height */
  color: var(--clr-text-muted-dark, #E0E0E0);
  margin-bottom: calc(var(--space-xl, 64px) * 1.1); /* More space before actions */
  max-width: 580px; /* Consistent width */
  margin-left: auto;
  margin-right: auto;
}

/* 5. Actions Row Wrapper */
.ns-cta-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-lg, 40px);
}

/* 6. Primary Button Styles */
.ns-button {
    display: inline-block;
    text-decoration: none;
    border: 2px solid transparent;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: var(--font-button-size, 1rem);
    line-height: 1.5;
    text-transform: uppercase;
    padding: var(--space-sm, 16px) var(--space-lg, 40px);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: all var(--transition-duration-default, 0.35s) var(--timing-function-smooth, cubic-bezier(0.25, 0.8, 0.25, 1));
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0, 0.1); /* Subtle base shadow */
}

.ns-button--primary {
  background-color: var(--clr-accent-primary, #0D6E7A);
  color: var(--clr-cta-text-light, #FFFFFF);
  border-color: var(--clr-accent-primary, #0D6E7A);
}

.ns-button--ref-style {
  border-radius: var(--radius-lg, 12px);
  padding: calc(var(--space-sm, 16px) * 1.1) calc(var(--space-lg, 40px) * 1.1); /* Slightly larger padding */
}

.ns-button--primary:hover,
.ns-button--primary:focus-visible {
  background-color: #0B5F6A;
  border-color: #0B5F6A;
  transform: translateY(-5px) scale(1.03); /* Enhanced lift */
  box-shadow: var(--shadow-button-hover, 0 8px 20px rgba(13, 110, 122, 0.35)); /* Stronger hover shadow */
}

.ns-button--primary:active {
  transform: translateY(-2px) scale(0.98); /* Slightly deeper press */
  box-shadow: var(--shadow-button-active, inset 0 3px 6px rgba(0,0,0,0.2)); /* Stronger active shadow */
  background-color: #094d56;
  border-color: #094d56;
}

/* 7. Focus Visible Orange Outline */
.ns-button:focus-visible {
   outline: 3px solid var(--clr-accent-tertiary, #FD7E14); /* Thicker outline */
   outline-offset: 4px; /* More offset */
}

/* 8. Inquiry Block Styles */
.ns-cta-inquiry-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-radius: var(--radius-md, 8px);
  transition: transform 0.35s var(--timing-function-smooth),
              box-shadow 0.35s var(--timing-function-smooth);
}

.ns-cta-inquiry {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 16px);
  text-align: left;
}

.ns-cta-inquiry-icon {
  flex-shrink: 0;
  width: 56px; /* Slightly larger */
  height: 56px;
  background-color: var(--clr-accent-primary, #0D6E7A);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-cta-text-light, #FFFFFF);
  font-size: 1.7rem; /* Adjusted icon size */
  box-shadow: var(--shadow-sm);
  transition: background-color 0.3s ease, transform 0.3s var(--timing-function-smooth);
}

.ns-cta-inquiry-link:hover .ns-cta-inquiry-icon {
   background-color: #0B5F6A; /* Darken teal */
   transform: scale(1.1); /* Scale icon on hover */
}

.ns-cta-inquiry-text {
  display: flex;
  flex-direction: column;
}

.ns-cta-inquiry-label {
  font-family: 'Roboto', sans-serif;
  font-size: 0.85rem; /* Slightly larger */
  font-weight: 500;
  color: var(--clr-text-muted-dark, #E0E0E0);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: var(--space-xxs, 4px);
}

.ns-cta-inquiry-phone {
  font-family: 'Poppins', sans-serif;
  font-size: 1.3rem; /* Slightly larger */
  font-weight: 600;
  color: var(--clr-text-light, #F8F9FA);
  line-height: 1.3;
  transition: color 0.3s ease;
}

.ns-cta-inquiry-link:hover .ns-cta-inquiry-phone {
  color: var(--clr-accent-primary, #0D6E7A);
}

.ns-cta-inquiry-link:focus-visible {
   outline: 3px solid var(--clr-accent-tertiary, #FD7E14); /* Match button focus */
   outline-offset: 4px;
}

.ns-cta-inquiry-link:hover {
    transform: translateY(-4px); /* Match button hover lift */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
}
.ns-cta-inquiry-link:active {
    transform: translateY(-2px); /* Match button active */
}


/* 9. Entrance Animation Application */
.ns-cta-section--ref-inspired .ns-animated-content {
  opacity: 0;
  animation: ns-content-fade-slide-up 0.8s var(--timing-function-smooth, cubic-bezier(0.25, 0.8, 0.25, 1)) forwards; /* Slightly longer duration */
}

/* Staggered Delays (Adjusted slightly) */
.ns-cta-section--ref-inspired .ns-cta-preheadline.ns-animated-content {
  animation-delay: 0.2s;
}
.ns-cta-section--ref-inspired .ns-cta-heading.ns-animated-content {
  animation-delay: 0.3s;
}
.ns-cta-section--ref-inspired .ns-cta-text.ns-animated-content {
  animation-delay: 0.45s;
}
.ns-cta-section--ref-inspired .ns-cta-actions.ns-animated-content {
  animation-delay: 0.6s;
}


/* 10. Responsive Adjustments */
@media (max-width: 991px) { /* Tablet */
  .ns-cta-section--ref-inspired {
    padding: var(--space-xxl, 80px) var(--space-lg, 40px);
  }
  .ns-cta-heading {
     font-size: clamp(2.2rem, 5.5vw, 3rem);
  }
  .ns-deco-icon { font-size: 3rem; opacity: 0.04; } /* Smaller and fainter on tablet */
  .ns-deco-icon--guitar { font-size: 4rem; }

}

@media (max-width: 767px) { /* Mobile */
  .ns-cta-section--ref-inspired {
    padding: var(--space-xl, 64px) var(--space-md, 24px);
  }
  .ns-cta-heading {
     font-size: clamp(1.9rem, 7vw, 2.4rem);
  }
  .ns-cta-text {
      font-size: 1rem;
      line-height: 1.7;
      margin-bottom: var(--space-lg, 40px);
  }
  .ns-cta-actions {
      flex-direction: column;
      gap: var(--space-lg, 40px); /* More gap when stacked */
      align-items: center;
  }
  .ns-button--ref-style {
      width: 100%;
      max-width: 320px;
      padding: var(--space-sm, 16px) var(--space-md, 24px); /* Adjust padding for mobile */
  }
  .ns-cta-inquiry-link {
     width: auto; /* Don't force full width */
     justify-content: center;
  }
  .ns-cta-inquiry {
      flex-direction: row; /* Keep icon and text side-by-side if space allows */
      text-align: left;
  }
   .ns-cta-inquiry-phone {
       font-size: 1.15rem;
   }
  .ns-deco-icon, .ns-cta-bg-shape { display: none; } /* Hide all deco on mobile */
}/* End custom CSS */