/* =========================================================
   Base
========================================================= */
body {
    margin: 0;
    background-color:#ffffff;
    color:#000000 !important;
    font-family:'Georgia', 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 (single big banner)
========================================================= */
.hero-section {
    background:url('../img/service1.jpg') center center no-repeat;
    background-size:cover;
    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 – one big background across all
========================================================= */
.hero-columns{
    position:relative;
    display:flex;
    height:100vh;
    width:100%;
    margin:0;
    --hero-bg: none;
}
.hero-columns::before{
    content:"";
    position:absolute;
    inset:0;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index:0;
}

/* Transparent columns over the background */
.hero-col{
    flex:1;
    position:relative;
    background: transparent;
    display:flex;
    align-items:flex-end;          /* keep captions in lower third */
    justify-content:center;        /* center horizontally */
    text-decoration:none;
    color:#fff;
    overflow:hidden;
    z-index:1;
    padding: 0 2vw;
}

/* Readability overlay */
.hero-overlay{
    position:absolute; inset:0;
    background:rgba(0,0,0,0.55);
    transition:background .4s ease;
    z-index:2;
}
/* Directional overlays (kept) */
.hero-col:nth-child(1) .hero-overlay{
    background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.25) 35%, rgba(0,0,0,0) 70%);
}
.hero-col:nth-child(2) .hero-overlay{
    background: radial-gradient(60% 60% at 50% 65%, rgba(0,0,0,.45), rgba(0,0,0,.15) 60%, rgba(0,0,0,0) 100%);
}
.hero-col:nth-child(3) .hero-overlay{
    background: linear-gradient(270deg, rgba(0,0,0,.55), rgba(0,0,0,.25) 35%, rgba(0,0,0,0) 70%);
}

/* Caption card: now neatly centered in *every* column */
.hero-caption{
    position:relative;
    z-index:3;
    margin-bottom: clamp(6vh, 10vh, 14vh);
    margin-inline: auto;           /* <- centers the block horizontally */
    max-width:26ch;
    text-align:center;             /* neat centering for text */
    padding:.95rem 1.25rem;
    border-radius:14px;
    backdrop-filter: blur(4px);
    background: rgba(0,0,0,.22);
    box-shadow:0 8px 24px rgba(0,0,0,.25);
    text-shadow:0 3px 8px rgba(0,0,0,.7);
}
.hero-caption h2{
    font-size:clamp(2rem, 3.2vw, 2.8rem);
    font-weight:800;
    letter-spacing:.2px;
    margin:0 0 .55rem 0;
    text-wrap:balance;
    transition:transform .3s ease, color .3s ease;
}
.hero-caption p{
    font-size:clamp(1rem,1.2vw,1.1rem);
    opacity:.92;
    margin:0;
    transition:transform .3s ease, color .3s ease;
}

/* Hover effects */
.hero-col:hover .hero-overlay,
.hero-col:focus-visible .hero-overlay{ filter: brightness(1.05); }
.hero-col:hover .hero-caption,
.hero-col:focus-visible .hero-caption{
    transform:translateY(-6px);
    transition:transform .25s ease;
}

/* (Removed) left/right offsets so everything centers cleanly */
/* .hero-col:nth-child(1) .hero-caption{ ... }  */
/* .hero-col:nth-child(3) .hero-caption{ ... }  */

/* (Removed) "center only middle tile" rule – all tiles are centered now */

/* Mobile stack */
@media (max-width:768px){
    .hero-columns{ flex-direction:column; height:auto; gap:0; }
    .hero-col{ height:auto; min-height:40vh; }
    .hero-overlay{ background:rgba(0,0,0,0.65); }
    .hero-caption{
        margin-bottom:8vh;
        max-width:30ch;
        backdrop-filter: blur(3px);
        background: rgba(0,0,0,.28);
        text-align:center;
    }
    .hero-caption h2{ font-size:1.9rem; }
    .hero-caption p{ font-size:1rem; }
}

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

/* =========================================================
   Hero Intro (card with image)
========================================================= */
.hero-intro{
    background:#fff;
    padding:32px 0 8px;
}
.hero-intro .container{
    max-width:1200px;
    padding-left:16px;
    padding-right:16px;
    margin:0 auto;
}
.hero-intro-card{
    background:#fff;
    padding:28px 28px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    border:1px solid rgba(0,0,0,.05);
    display:grid;
    grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr);
    gap:24px;
    align-items:center;
    position:relative;
    isolation:isolate;
}
.hero-intro-card::after{
    content:"";
    position:absolute;
    left:-1px; top:18px; bottom:18px;
    width:6px;
    border-radius:6px;
    background:linear-gradient(180deg,#13286b, #3aa0ff);
    opacity:.9;
}
.hero-intro-card .hero-intro-media{
    grid-column:2;
    grid-row:1 / span 3;
    align-self:stretch;
    position:relative;
    border-radius:22px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background: linear-gradient(135deg, rgba(19,40,107,.35), rgba(58,160,255,.35));
    box-shadow: 0 18px 40px rgba(0,0,0,.15);
}
.hero-intro-card .hero-intro-media::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(1200px 400px at 80% 20%, rgba(58,160,255,.15), transparent 60%),
        radial-gradient(800px 300px at 20% 90%, rgba(19,40,107,.12), transparent 60%);
    z-index:0;
}
.hero-intro-card .hero-intro-media img{
    position:relative;
    z-index:1;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:22px;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
    transform:none;
}
.hero-intro-title,
.hero-intro .section-title{
    margin:0 0 .35rem 0;
    font-weight:800;
    font-size:clamp(1.4rem,2.4vw,1.9rem);
    color:#0f2f66;
}
.hero-intro-text{
    margin:0 0 1rem 0;
    color:#333;
    line-height:1.7;
    font-size:clamp(1rem,1.25vw,1.05rem);
}
.hero-intro-btn{ margin-top:.25rem; }
@media (max-width:992px){
    .hero-intro-card{
        grid-template-columns: 1fr;
        gap:18px;
    }
    .hero-intro-card .hero-intro-media{
        grid-column:1;
        grid-row:auto;
        border-radius:20px;
    }
}
@media (max-width:768px){
    .hero-intro{ padding:20px 0 6px; }
    .hero-intro-card{ padding:22px 18px; border-radius:16px; }
}
@media (max-width:576px){
    .hero-intro-card .hero-intro-media img{ max-height:300px; }
}

/* =========================================================
   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.8rem,3.5vw,2.6rem); letter-spacing:.5px; margin-bottom:.4rem; }
.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:800; 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-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;
    }
}