/* ======================================== XAM Website - Custom Styles ======================================== *//* ======== TYPOGRAPHY ======== */body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}/* ======== HEADER / NAVIGATION ======== *//* Header states */.header-transparent{background:transparent;}.header-transparent.scrolled{background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);box-shadow:0 1px 3px 0 rgba(0,0,0,0.1);}.header-solid{background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);box-shadow:0 1px 3px 0 rgba(0,0,255,0.1);}/* Navigation links - transparent header (homepage) */.header-transparent .nav-link{color:white;}.header-transparent .nav-link:hover,.header-transparent .nav-link.active{color:rgb(229,229,231);}.header-transparent .nav-underline{background-color:white;}/* Navigation links - solid header (scrolled or other pages) */.header-transparent.scrolled .nav-link,.header-solid .nav-link{color:#1d1d1d;}.header-transparent.scrolled .nav-link:hover,.header-transparent.scrolled .nav-link.active,.header-solid .nav-link:hover,.header-solid .nav-link.active{color:#0066CC;}.header-transparent.scrolled .nav-underline,.header-solid .nav-underline{background-color:#0066CC;}/* Nav underline animation */.nav-underline{position:absolute;bottom:-4px;left:0;height:2px;transition:all 0.3s ease;}/* Mobile menu button */.header-transparent .mobile-menu-btn{color:white;}.header-transparent.scrolled .mobile-menu-btn,.header-solid .mobile-menu-btn{color:#1d1d1d;}/* Mobile navigation */.header-transparent .mobile-nav{background:rgba(0,0,0,0.9);}.header-transparent.scrolled .mobile-nav,.header-solid .mobile-nav{background:white;}.header-transparent .mobile-nav-link{color:white;}.header-transparent .mobile-nav-link:hover{background:rgba(255,255,255,0.2);}.header-transparent .mobile-nav-link.active{color:rgb(229,229,231);background:rgba(255,255,255,0.2);}.header-transparent.scrolled .mobile-nav-link,.header-solid .mobile-nav-link{color:#1d1d1d;}.header-transparent.scrolled .mobile-nav-link:hover,.header-solid .mobile-nav-link:hover{background:#F5F5F7;}.header-transparent.scrolled .mobile-nav-link.active,.header-solid .mobile-nav-link.active{color:#0066CC;background:#F5F5F7;}/* ======== BUTTONS ======== */.btn-gradient{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(90deg,#0066CC 0%,#2293F7 100%);color:white;font-weight:600;padding:0.5rem 1.5rem;border-radius:0.5rem;box-shadow:0 1px 8px rgba(34,147,247,0.2);transition:all 0.2s ease;text-decoration:none;}.btn-gradient:hover{background:linear-gradient(90deg,#0055AA 0%,#1976D2 100%);box-shadow:0 4px 12px rgba(34,147,247,0.3);}.btn-gradient:active{transform:scale(0.98);}/* ======== GRADIENTS & EFFECTS ======== */.heading-gradient{background:linear-gradient(90deg,#0066CC 0%,#2293F7 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}/* ======== HERO SECTION ======== */.hero-section{position:relative;height:100vh;display:flex;align-items:center;justify-content:center;}.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}/* ======== CARDS ======== */.card{background:white;border-radius:40px;padding:2rem;box-shadow:0 2px 12px rgba(0,0,0,0.08);transition:all 0.3s ease;}.card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.12);transform:translateY(-4px);}.card-rounded{border-radius:40px;}/* Training Card */.training-card{background:white;border-radius:1rem;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,0.08);transition:all 0.3s ease;}.training-card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.15);transform:translateY(-8px);}.training-card img{width:100%;height:16rem;object-fit:cover;}/* News Card */.news-card{background:white;border-radius:1rem;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,0.08);transition:all 0.3s ease;}.news-card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.15);transform:translateY(-4px);}/* ======== TESTIMONIALS ======== */.testimonial-card{background:#F8FAFF;border-radius:40px;padding:2rem;min-height:22rem;display:flex;flex-direction:column;transition:all 0.3s ease;}.testimonial-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.1);}/* Star rating */.star-icon{width:1.25rem;height:1.25rem;}.star-filled{color:#FF9500;fill:#FF9500;}.star-empty{color:#d1d5db;}/* ======== CAROUSEL / SLIDER ======== */.carousel-container{position:relative;overflow:hidden;}.carousel-button{background:white;border:1px solid #e5e7eb;border-radius:50%;padding:0.75rem;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1);transition:all 0.2s ease;cursor:pointer;}.carousel-button:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,0.15);background:#f9fafb;}.carousel-dots{display:flex;justify-content:center;gap:0.5rem;margin-top:2rem;}.carousel-dot{width:0.75rem;height:0.75rem;border-radius:50%;background:#d1d5db;transition:all 0.2s ease;cursor:pointer;}.carousel-dot.active{background:#0066CC;}.carousel-dot:hover{background:#9ca3af;}/* ======== FORMS ======== */input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input[type="date"],textarea,select{width:100%;border:1px solid #e5e7eb;border-radius:0.375rem;padding:0.625rem 0.75rem;background:#fafbfc;transition:border-color 0.2s ease;outline:none;}input:focus,textarea:focus,select:focus{border-color:#bdbdbd;background:white;}label{display:block;margin-bottom:0.5rem;font-weight:500;color:#333;}/* ======== UTILITY CLASSES ======== */.bg-light{background-color:#F5F5F7;}.text-gray{color:#86868B;}.container-max{max-width:1200px;margin:0 auto;}/* ======== LOADING STATES ======== */.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:loading 1.5s ease-in-out infinite;}@keyframes loading{0%{background-position:200% 0;}100%{background-position:-200% 0;}}/* ======== RESPONSIVE ======== */@media (max-width:768px){.training-card img,.news-card img{height:12rem;}.testimonial-card{min-height:auto;}}/* ======== ANIMATIONS ======== */.fade-in{animation:fadeIn 0.5s ease-in;}@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}/* ======== ACCESSIBILITY ======== */.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}/* Focus styles */a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #0066CC;outline-offset:2px;}