/* =========================================================
   Base
========================================================= */
body {
    margin: 0;
    background-color:#ffffff;
    color:#000000 !important;
    font-family: 'Raleway', sans-serif;
}
.section-title { color:#0f2f66; font-weight:bold; margin-bottom:20px; }
.container-fluid { padding-left:0 !important; padding-right:0 !important; }

/* Buttons */
.btn-primary-custom {
    background-color:#13286b; color:#ffffff;
    padding:8px 20px; text-transform:uppercase; font-weight:bold;
    border-radius:8px; font-size:0.9rem;
}
.btn-primary-custom:hover { background-color:#558ac8; color:#fff; }
.btn-hero-custom {
    background-color:transparent; border:2px solid #ffffff; color:#ffffff;
    padding:10px 30px; text-transform:uppercase; font-weight:bold;
}
.btn-hero-custom:hover { background-color:#13286b; color:#fff; }

/* =========================================================
   Header Hero
========================================================= */
.hero-section {
    background:url('../img/service1.jpg') center/cover no-repeat;
    display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
    text-align:left; padding:80px 20px 40px; padding-left:8rem;
    min-height:80vh; position:relative;
}
.hero-section::before{ content:""; position:absolute; inset:0; background-color:rgba(0,0,0,0.3); z-index:1; }
.hero-section > * { position:relative; z-index:2; }
.hero-section h1{ font-size:5rem; font-weight:bold; color:#fff; font-family:'Bebas Neue', sans-serif; }
.hero-section p { font-size:2rem; color:#fffef7; font-family:'Bebas Neue', sans-serif; }
@media (max-width:1200px){ .hero-section{ padding-left:4rem; } }
@media (max-width:992px){
    .hero-section{ padding-left:3rem; min-height:60vh; }
    .hero-section h1{ font-size:4rem; } .hero-section p{ font-size:1.5rem; }
}
@media (max-width:768px){
    .hero-section{ padding:60px 20px 40px; align-items:center; text-align:center; }
    .hero-section h1{ font-size:3rem; } .hero-section p{ font-size:1.2rem; }
}
@media (max-width:576px){
    .hero-section h1{ font-size:2.5rem; } .hero-section p{ font-size:1rem; }
    .btn-hero-custom{ padding:8px 20px; font-size:0.9rem; }
}

/* =========================================================
   Three-Column Hero
========================================================= */
.hero-columns.v2{
    --gap: clamp(0px, 0vw, 0px);
    --tile-shadow-hover: 0 18px 44px rgba(0,0,0,.32);

    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    align-items: stretch;
    gap:var(--gap);
    width:100%;
    min-height:100vh;
    padding:var(--gap);
    background:#0b1d44;
}

/* Entrance animation */
@keyframes fadeUp {
    from { transform:translateY(22px); opacity:0; }
    to   { transform:translateY(0);   opacity:1; }
}

/* Tile */
.hero-columns.v2 .hero-col{
    position:relative;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    min-height: calc(100vh - (var(--gap) * 2));

    border-radius:0;
    border:3px solid #000;

    background-image: var(--bg);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    overflow:hidden;
    text-decoration:none;
    color:#fff;

    transform:translateZ(0);
    transition:transform .35s ease, box-shadow .35s ease, filter .35s ease;

    opacity:0;
    animation:fadeUp .7s ease forwards;
}


.hero-columns.v2 .hero-col:nth-child(1){ animation-delay:.08s; }
.hero-columns.v2 .hero-col:nth-child(2){ animation-delay:.2s; }
.hero-columns.v2 .hero-col:nth-child(3){ animation-delay:.32s; }

/* remove inner hairline from previous versions */
.hero-columns.v2 .hero-col::after{ display:none; }

.hero-columns.v2 .hero-col:hover,
.hero-columns.v2 .hero-col:focus-visible{
    transform:translateY(-4px) scale(1.015);
    box-shadow:var(--tile-shadow-hover);
    z-index:2;
}

/* Overlay */
.hero-columns.v2 .hero-overlay{
    position:absolute; inset:0;
    background:
        radial-gradient(80% 60% at 50% 40%, rgba(0,0,0,.10), transparent 70%),
        linear-gradient(to bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.70) 100%);
    transition:filter .35s ease, opacity .35s ease;
    z-index:1;
}
.hero-columns.v2 .hero-col:hover .hero-overlay{
    filter: brightness(1.03);
}

/* Video */
.hero-columns.v2 .hero-video{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center;
    opacity:0; transition:opacity .35s ease;
    z-index:0; pointer-events:none;
}
.hero-columns.v2 .hero-col:hover .hero-video,
.hero-columns.v2 .hero-col:focus-visible .hero-video{ opacity:1; }
@media (hover:none){ .hero-columns.v2 .hero-video{ display:none; } }

/* Caption */
.hero-columns.v2 { --cap-w: 340px; }                     /* desktop default */
@media (max-width: 1200px){ .hero-columns.v2 { --cap-w: 320px; } }
@media (max-width: 768px){  .hero-columns.v2 { --cap-w: 280px; } }

/* Caption panel */
.hero-columns.v2 .hero-caption {
    position: absolute;
    z-index: 2;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;

    /* unified width so cards align (desktop) */
    width: var(--cap-w);
    max-width: none;

    padding: .8rem 1.1rem;
    text-align: center;

    background: rgba(15,17,22,.35);
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 22px rgba(0,0,0,.35);
    text-shadow: 0 3px 8px rgba(0,0,0,.7);
    transition: transform .28s ease, background .28s ease;
    overflow: hidden;
    border-radius: 8px;
}

.hero-columns.v2 .hero-col:hover .hero-caption,
.hero-columns.v2 .hero-col:focus-visible .hero-caption {
    transform: translateX(-50%) translateY(-6px);
    background: rgba(15,17,22,.42);
}

/* Title */
.hero-columns.v2 .hero-caption h2 {
    margin: 0 0 .35rem 0;
    font-weight: 700;
    letter-spacing: .2px;
    font-size: clamp(1.6rem, 2.2vw, 2.1rem);
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.15;
}

/* Subtitle */
.hero-columns.v2 .hero-caption p {
    margin: 0;
    opacity: .95;
    font-size: clamp(.95rem, 1.1vw, 1.05rem);
    white-space: normal;
    overflow-wrap: anywhere;
}

/* =========================================================
   Caption Flash — Flash column captions 
========================================================= */
@keyframes mie-caption-flash {
  0%   { box-shadow: 0 8px 22px rgba(0,0,0,.35); }
  35%  { box-shadow: 0 0 0 8px rgba(58,160,255,.28); }
  65%  { box-shadow: 0 0 0 12px rgba(58,160,255,.18); }
  100% { box-shadow: 0 8px 22px rgba(0,0,0,.35); }
}

/* apply the flash */
.hero-columns.v2 .hero-caption.flash {
  animation: mie-caption-flash 900ms ease-in-out 1;
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-columns.v2 .hero-caption.flash { animation: none !important; }
}

/* =========================================================
   Equalizer — animate only on hover/focus
========================================================= */
.equalizer {
    display:flex; gap:4px; margin-top:10px;
    justify-content:center; align-items:flex-end; height:14px;
}
.equalizer span{
    display:block; width:4px; height:100%; border-radius:2px;
    animation:bounce 1s infinite ease-in-out;
    animation-play-state: paused;                 /* paused by default */
    transform-origin: bottom;
}
/* per-tile colors */
.hero-col:nth-child(1) .equalizer span{ background:#ff69b4; }
.hero-col:nth-child(2) .equalizer span{ background:#3aa0ff; }
.hero-col:nth-child(3) .equalizer span{ background:#b43aff; }

/* run animation only when that tile is hovered/focused */
.hero-col:hover .equalizer span,
.hero-col:focus-visible .equalizer span{
    animation-play-state: running;
}
.equalizer span:nth-child(2){ animation-delay:.2s; }
.equalizer span:nth-child(3){ animation-delay:.4s; }

@keyframes bounce{
    0%,100%{ transform:scaleY(0.3); }
    50%    { transform:scaleY(1); }
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
    .equalizer span{ animation: none !important; }
    .hero-columns.v2 .hero-col,
    .hero-columns.v2 .hero-caption,
    .hero-columns.v2 .hero-video { transition:none !important; animation:none !important; }
}

/* Responsive */
/* =========================================================
   Responsive Layout — improved stacking for smaller screens
========================================================= */
@media (max-width: 1200px){
    .hero-columns.v2{
        grid-template-columns: 1fr;   /* stack vertically */
        gap: 12px;
        padding: 12px;
        background: #000;             /* removes visible gaps */
    }

    .hero-columns.v2 .hero-col{
        min-height: 68vh;
        border: 0;
        box-shadow: 0 6px 18px rgba(0,0,0,.35);
    }

    .hero-columns.v2 .hero-overlay{
        background:
            radial-gradient(80% 60% at 50% 40%, rgba(0,0,0,.18), transparent 70%),
            linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,.65) 55%, rgba(0,0,0,.85) 100%);
    }

    .hero-columns.v2 .hero-caption{
        bottom: 12vh;
        padding: 1rem 1.5rem;
        max-width: 32ch;
        background: rgba(15,17,22,.50);
        backdrop-filter: blur(8px);
        transform: translateX(-50%);
    }

    .hero-columns.v2 .hero-caption h2{
        font-size: clamp(1.8rem, 4.5vw, 2.4rem);
    }
    .hero-columns.v2 .hero-caption p{
        font-size: clamp(1rem, 3.6vw, 1.15rem);
    }

    /* disable hover effects on touch */
    .hero-columns.v2 .hero-col:hover,
    .hero-columns.v2 .hero-col:focus-visible{
        transform:none;
        box-shadow:0 6px 18px rgba(0,0,0,.35);
    }
    .hero-columns.v2 .hero-video{ display:none; }
}

/* =========================================================
   Section Divider Headings (true vertical + horizontal centering)
========================================================= */
.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    background: #fff;
    min-height: 140px;          /* ensures section has height to center in */
    padding: 0;                 /* no top/bottom padding needed when using flex */
    margin: 0;
    position: relative;
    z-index: 2;
    text-align: center;
}

/* Center heading inside */
.section-divider .section-title {
    font-weight: 700;
    color: #0f2f66;
    font-size: clamp(1.9rem, 3vw, 2.4rem);
    margin: 0;
    letter-spacing: 0.3px;
    line-height: 1.25;
    text-align: center;
    display: inline-block;
}

/* No underline */
.section-divider .section-title::after {
    content: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .section-divider {
        min-height: 120px;
    }
    .section-divider .section-title {
        font-size: clamp(1.6rem, 5vw, 2rem);
    }
}



/* =========================================================
   Hero Intro
========================================================= */
.hero-intro {
    background: #f3f4f6;
}

/* container */
.hero-intro .container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding-left: clamp(16px, 3vw, 64px);
    padding-right: clamp(16px, 3vw, 64px);   /* default site gutter */
}

/* two-column layout */
.hero-intro-card {
    display: grid;
    grid-template-columns: 1fr 1fr;          /* equal halves */
    align-items: stretch;                    /* image fills full height */
    gap: clamp(24px, 4vw, 56px);
    border: 0;
    box-shadow: none;
    background: none;
    overflow: hidden;
    min-height: clamp(420px, 48vw, 560px);
}

/* left text column */
.hero-intro-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 2rem;
}

.hero-intro-title {
    margin: 0 0 .8rem;
    font-weight: 700;
    color: #0f2f66;
    font-size: clamp(1.8rem, 2.6vw, 2.6rem);
    line-height: 1.2;
}

.hero-intro-text {
    color: #333;
    line-height: 1.7;
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    margin: 0 0 1.25rem;
}

.hero-intro-btn {
    border-radius: 8px;
    padding: .7rem 1.4rem;
    font-weight: 700;
    background: #0f2f66;
    color: #fff;
    text-transform: uppercase;
    width: fit-content;
    box-shadow: 0 3px 10px rgba(19, 40, 107, .15);
}
.hero-intro-btn:hover {
    background: #264c96;
    color: #fff;
}

/* right image column */
.hero-intro-media {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 0;
    overflow: hidden;
    display: flex;
}
.hero-intro-media img {
    flex: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* remove right gutter on desktop so image touches the viewport edge */
@media (min-width: 992px) {
    .hero-intro .container {
        padding-right: 0 !important;
    }
}

/* add vertical padding only when screen is smaller */
@media (max-width: 992px) {
    .hero-intro {
        padding: 48px 0; /* ✅ only active below 992px */
    }
    .hero-intro-card {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .hero-intro-copy {
        order: 1;
        padding-right: 0;
        text-align: center;
    }
    .hero-intro-media {
        order: 2;
        height: 340px;
    }
}

/* tighter mobile spacing */
@media (max-width: 576px) {
    .hero-intro {
        padding: 40px 0 32px;
    }
    .hero-intro-media {
        height: 260px;
    }
}

/* Section spacing between hero-intro and next divider */
.hero-intro + div[style] {
    height: 50px !important;
}

/* =========================================================
   Top Buttons
========================================================= */
.top-buttons{ padding:20px 0; text-align:center; }
.top-buttons .container{ display:flex; justify-content:center; gap:20px; flex-wrap:wrap; }
.top-btn{
    flex:1; min-width:200px; text-align:center; padding:12px 20px; margin:0;
    display:inline-block; border-radius:5px; text-decoration:none; font-weight:bold; font-size:1rem;
}
.btn-book{ background-color:#13286b; color:#fff; }
.btn-manage{ background-color:transparent; color:#13286b; border:2px solid #17a2b8; }
.btn-location{ background-color:#17a2b8; color:#fff; }
@media (max-width:768px){
    .top-buttons .container{ flex-direction:column; align-items:stretch; padding:0 20px; }
    .top-btn{ width:100%; max-width:400px; margin:5px auto; }
}

/* =========================================================
   Features
========================================================= */
.dj-features-section{ background:#ffffff; padding:50px 0; }
.feature-card{ text-align:center; padding:40px 20px; }
.feature-icon i{ font-size:6rem; color:#13286b; margin-bottom:20px; }
.feature-title{ font-size:1.5rem; font-weight:bold; color:#333; margin-bottom:20px; font-family:sans-serif; }
.feature-description{ font-size:1rem; color:#333; line-height:1.6; text-align:center; }
@media (max-width:992px){ .feature-icon i{ font-size:4rem; } }
@media (max-width:768px){
    .feature-card{ padding:30px 15px; }
    .feature-icon i{ font-size:3rem; }
    .feature-title{ font-size:1.3rem; }
}

/* =========================================================
   Services & Packages Carousel
========================================================= */
.sp-section{ background:#ffffff; padding-top:0 !important; }
.sp-slide{
    position:relative; height:80vh; min-height:420px;
    background-size:cover; background-position:center; background-repeat:no-repeat;
    display:flex; align-items:center; justify-content:center;
    margin:0 2rem; border-radius:20px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,0.3);
}
.sp-overlay{ position:absolute; inset:0; background:rgba(0,0,0,0.8); }
.sp-content{ position:relative; text-align:center; max-width:780px; padding:0 2rem; color:#fff; z-index:2; }
.sp-title{ font-size:clamp(1.9rem, 3vw, 2.4rem);; letter-spacing:.5px; margin-bottom:.4rem; font-weight: 700 }
.sp-sub{ font-size:clamp(1rem,1.4vw,1.125rem); opacity:.95; margin-bottom:1rem; }
#servicesCarousel .carousel-indicators [data-bs-target]{ width:10px; height:10px; border-radius:50%; }
@media (max-width:768px){
    .sp-slide{ height:60vh; min-height:350px; margin:0; }
    .sp-content{ padding:0 1.5rem; }
}
@media (max-width:576px){
    .sp-slide{ height:50vh; min-height:300px; margin:0; }
    .sp-content{ padding:0 1rem; }
}

/* =========================================================
   Promo Section
========================================================= */
.promo-section{ background:#fff; }
.promo-img{ margin:0; border-radius:20px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.12); }
.promo-img img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:16 / 9; }
.promo-copy{ max-width:560px; }
.promo-title{ font-weight:700; font-size:clamp(1.5rem,2.2vw,2.25rem); margin-bottom:.25rem; }
.promo-sub{ font-weight:600; font-size:clamp(1rem,1.4vw,1.25rem); margin-bottom:.75rem; color:#111; }
.promo-text{ color:#444; }
.promo-row + .promo-row{ margin-top:3rem; }
@media (max-width:991.98px){
    .promo-row + .promo-row{ margin-top:2rem; }
    .promo-copy{ text-align:center; margin:0 auto; }
}
@media (max-width:768px){ .promo-img img{ aspect-ratio:4 / 3; } }

/* =========================================================
   Clients
========================================================= */
.clients-section{ background:#ffffff; min-height:300px; padding:3rem 0; }
.clients-section h2 {
    font-weight: 700;
    color: #0f2f66;
    font-size: clamp(1.9rem, 3vw, 2.4rem);
    margin: 0 auto 0rem auto;
    letter-spacing: 0.3px;
    line-height: 1.25;
    text-align: center;
    display: inline-block;
    background: #fff;
}

@media (max-width: 768px) {
    .clients-section h2 {
        font-size: clamp(1.6rem, 5vw, 2rem);
        margin-bottom: 1rem;
    }
}


.clients-track{ min-height:220px; display:flex; align-items:center; justify-content:center; }
#clientsCarousel{ width:100%; max-width:2000px; margin:0 auto; text-align:center; }
.client-logo{ max-height:80px; width:auto; opacity:.9; transition:filter .25s ease, opacity .25s ease, transform .25s ease; }
.client-logo:hover{ filter:grayscale(0%) brightness(100%); opacity:1; transform:translateY(-2px); }
#clientsCarousel .carousel-control-prev-icon,
#clientsCarousel .carousel-control-next-icon{ filter:invert(1) drop-shadow(0 0 4px rgba(0,0,0,.6)); }
@media (max-width:768px){
    .client-logo{ max-height:60px; } .clients-track{ min-height:180px; }
}
@media (max-width:576px){
    .client-logo{ max-height:50px; } .clients-section h2{ font-size:1.5rem; }
}

/* =========================================================
   Reviews
========================================================= */
.reviews-section{
    color:#ffffff; background-color:#16336c; border-radius:20px;
    padding:3rem 2rem; max-width:1450px; margin:2rem auto;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
}
@media (max-width:768px){
    .reviews-section{ padding:2rem 1.5rem; margin:1rem auto; }
    .reviews-section h2{ font-size:1.5rem; }
}
@media (max-width:576px){
    .reviews-section{ padding:1.5rem 1rem; border-radius:15px; }
    .reviews-section h2{ font-size:1.2rem; }
}

/* =========================================================
   Utilities
========================================================= */
@media (max-width:576px){
    .container { padding-left: 15px; padding-right: 15px; }
}