/* =========================================
   1. STRICT 2-FONT SYSTEM & BASE STYLES
   ========================================= */
body {
    background-color: #f0f4f8;
    color: #334155;
    overflow-x: hidden;
    font-family: 'Lato', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Fixed Background */
.fixed-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: 
        radial-gradient(at 0% 0%, hsla(253,16%,7%,0.05) 0, transparent 50%), 
        radial-gradient(at 50% 0%, hsla(225,39%,30%,0.05) 0, transparent 50%), 
        radial-gradient(at 100% 0%, hsla(339,49%,30%,0.05) 0, transparent 50%);
    background-size: cover;
    pointer-events: none; /* Ensures background doesn't block clicks */
}

/* Fonts */
h1, h2, h3, h4, h5, h6, .font-serif {
    font-family: 'Playfair Display', serif; 
    color: #0f172a;
}

p, span, li, a, input, select, label, button, div, textarea {
    font-family: 'Lato', sans-serif;
}

.font-serif-force {
    font-family: 'Playfair Display', serif !important;
}

/* =========================================
   2. UI COMPONENTS (Buttons, Nav, Glass)
   ========================================= */

/* Glassmorphism */
.glass-effect {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    transform: translateZ(0);
    backface-visibility: hidden; 
    will-change: transform; 
}

.glass-card-hover {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform; 
}

.glass-card-hover:hover {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 20px 40px -5px rgba(31, 38, 135, 0.15);
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 1);
}

/* Navigation */
.nav-link {
    position: relative;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: #475569;
    padding-bottom: 4px;
    transition: color 0.3s;
}

.nav-link:hover, .nav-link.active { color: #1e3a8a; }

.nav-link::after {
    content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 0;
    background-color: #bfdbfe; transition: width 0.3s ease;
}

.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* Buttons */
.btn-classic {
    background-color: #bfdbfe; color: #1e3a8a;
    text-transform: uppercase; font-weight: 800; letter-spacing: 0.15em;
    padding: 16px 40px; font-size: 0.8rem; transition: all 0.3s ease;
    display: inline-block; border-radius: 0px; cursor: pointer; border: none;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}

.btn-classic:hover {
    background-color: #1e3a8a; color: #ffffff;
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.15);
}

.mobile-btn-adjust {
    width: 100%; padding: 12px 0; text-align: center; font-size: 0.75rem; letter-spacing: 0.1em;
}

@media (min-width: 768px) {
    .mobile-btn-adjust { width: auto; padding: 14px 35px; font-size: 0.8rem; }
}

/* =========================================
   3. CARDS & SWIPER CONTAINERS
   ========================================= */

.vertical-card {
    display: flex; flex-direction: column; height: 100%;
    border-radius: 16px; overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    will-change: transform;
}

/* Swiper Wrappers */
.card-swiper-container { width: 100%; aspect-ratio: 3 / 2; position: relative; overflow: hidden; }
.card-swiper-container-p { width: 100%; aspect-ratio: 1204 / 1280; position: relative; overflow: hidden; }        

/* Counseling Container - Taller aspect ratio */
.card-swiper-container-c { 
    width: 100%; 
    aspect-ratio: 4 / 5; 
    position: relative; 
    overflow: hidden; 
    background-color: #f8fafc;
}

/* Image Styles within Cards */
.card-swiper-container img, .card-swiper-container-p img {
    width: 100%; height: 100%; object-fit: cover; object-position: top;
    transition: transform 0.8s ease;
}

/* Specific rule for Counseling images to fit fully */
.card-swiper-container-c img {
    width: 100%; 
    height: 100%; 
    object-fit: contain; /* Ensure full image is visible */
    object-position: center;
    transition: transform 0.8s ease;
}

/* Hover Effects */
.vertical-card:hover .card-swiper-container img, 
.vertical-card:hover .card-swiper-container-p img,
.vertical-card:hover .card-swiper-container-c img {
    transform: scale(1.08);
}

.vertical-card-content {
    padding: 1.5rem; text-align: center; flex-grow: 1; 
    display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.5rem;
}

.vertical-card h3 {
    font-size: 1.2rem; letter-spacing: 0.05em; text-transform: uppercase;
    margin-bottom: 0.5rem; font-weight: 700; color: #1e293b;
}

.vertical-card p {
    color: #64748b; font-size: 0.9rem; line-height: 1.5; margin: 0; max-width: 30ch;
}

/* Service Cards */
.service-card {
    border-radius: 12px; overflow: hidden; height: 100%; display: flex; flex-direction: column;
    border-bottom: 3px solid transparent;
}

.service-card:hover { border-bottom: 3px solid #2563eb; }

.service-content {
    padding: 2rem 1.5rem; flex-grow: 1; display: flex; flex-direction: column;
    justify-content: center; align-items: center; text-align: center;
}

/* Attached Header (PC View) */
.attached-header-card {
    max-width: 48rem; margin: 0 auto 4rem auto; border-radius: 1rem; overflow: hidden;
}

.attached-header-img { height: 12rem; position: relative; }

@media (min-width: 768px) { .attached-header-img { height: 28rem; } }

/* Testimonials */
.testimonial-card {
    border-radius: 16px; padding: 2rem; position: relative;
    transition: transform 0.3s ease; height: 100%;
    display: flex; flex-direction: column; justify-content: space-between;
}

.quote-icon {
    position: absolute; top: 1.5rem; right: 1.5rem; font-size: 2rem; color: #bfdbfe; opacity: 0.5;
}

/* Coaching Images Container */
.coaching-img-container {
    width: 100%;
    height: 250px; 
    position: relative;
    overflow: hidden;
    background-color: #f1f5f9;
}

@media (min-width: 768px) {
    .coaching-img-container {
        height: auto;
        min-height: 400px;
        width: 50%;
    }
}

/* Force Coaching Images to CONTAIN */
.coaching-img-container .swiper-slide img {
    object-fit: contain !important; 
    background-color: #f1f5f9; 
}

/* =========================================
   4. ANIMATIONS & INTERACTIVITY
   ========================================= */

/* Universal Slider Zoom */
.swiper-slide img {
    transition: transform 0.8s ease; 
    will-change: transform;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.heroSwiper:hover .swiper-slide img { transform: scale(1.08); }
.trainingHeaderSwiper:hover .swiper-slide img,
.counselingHeaderSwiper:hover .swiper-slide img { transform: scale(1.08); }
.service-card:hover .swiper-slide img { transform: scale(1.08); }

/* Star Rating */
.star-rating-box i {
    cursor: pointer;
    color: #cbd5e1; 
    transition: color 0.2s ease, transform 0.1s;
}

.star-rating-box i.active { color: #eab308; }
.star-rating-box i:hover { transform: scale(1.2); }

/* Fade Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up {
    animation: fadeInUp 0.5s ease-out forwards;
}

/* Feedback Utilities */
.hidden {
    display: none !important;
}

.hidden-feedback {
    display: none; 
}

.hidden-feedback.show-review {
    display: flex !important; 
}

/* =========================================
   5. IMAGE SECURITY (Safe Version)
   ========================================= */
img {
    /* Prevent dragging images to desktop */
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    
    /* Prevent selecting image as text */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    
    /* Prevent long-press menu on mobile */
    -webkit-touch-callout: none; 
    
    /* NOTE: pointer-events: none is REMOVED intentionally.
       If we keep it, swiping on mobile will break. */
}