@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Poppins:wght@600;700&display=swap');

/* =========================================
   USER-PROVIDED PREMIUM THEME
   ========================================= */
:root {
  --background: hsl(50 100% 97%);
  --foreground: hsl(250 40% 15%);
  --card: hsl(0 0% 100%);
  --card-foreground: hsl(250 40% 15%);
  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(250 40% 15%);
  --primary: hsl(220 95% 58%);
  --primary-foreground: hsl(0 0% 100%);
  --secondary: hsl(45 100% 60%);
  --secondary-foreground: hsl(250 40% 15%);
  --muted: hsl(45 50% 94%);
  --muted-foreground: hsl(250 20% 40%);
  --accent: hsl(330 90% 65%);
  --accent-foreground: hsl(0 0% 100%);
  --lime: hsl(145 75% 55%);
  --lime-foreground: hsl(250 40% 15%);
  --orange: hsl(22 100% 60%);
  --orange-foreground: hsl(0 0% 100%);
  --purple: hsl(268 85% 65%);
  --purple-foreground: hsl(0 0% 100%);
  --destructive: hsl(0 85% 60%);
  --destructive-foreground: hsl(0 0% 100%);
  --border: hsl(250 30% 90%);
  --input: hsl(250 30% 90%);
  --ring: hsl(220 95% 58%);

  --radius: 1.5rem;

  --gradient-hero: linear-gradient(135deg, hsl(220 95% 58%), hsl(268 85% 65%) 50%, hsl(330 90% 65%));
  --gradient-sunny: linear-gradient(135deg, hsl(45 100% 60%), hsl(22 100% 60%));
  --gradient-cool: linear-gradient(135deg, hsl(145 75% 55%), hsl(180 80% 55%));
  --gradient-bg: linear-gradient(180deg, hsl(50 100% 97%), hsl(200 100% 96%));

  --shadow-pop: 0 8px 0 0 hsl(250 40% 15% / 0.15);
  --shadow-pop-hover: 0 12px 0 0 hsl(250 40% 15% / 0.2);
  --shadow-glow: 0 10px 40px -10px hsl(220 95% 58% / 0.5);
  --shadow-card: 0 20px 50px -20px hsl(250 40% 15% / 0.25);
}

/* Apply new fonts and base styles */
body {
  background: var(--gradient-bg) !important;
  color: var(--foreground) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  min-height: 100vh;
}

h1, .hero-title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
}

h2, .sec-title, .logo-title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
}

h3, h4, h5, h6, .sec-subtitle, .subheading, .hero-desc, .subtitle, .lead {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
}

/* Section title color — match hero title (#0A3D91) */
.sec-title, .pw-title, .cs-header .sec-title, .sfs-header h2,
.page-banner h1, .contact-banner h1, .about-content .sec-title,
.fc-text h2, .hiw-card h3, .feat-detail-card h3, .why-card h3,
.mvv-title, .address-card h4, .contact-form-box h3 {
  color: #0A3D91 !important;
}

/* Ensure card text is visible */
.feat-detail-card p, .why-card p {
  color: #334155 !important;
}
.feat-detail-card h3, .why-card h3 {
  color: #0B3D91 !important;
}
.sec-title span, .pw-title .pw-highlight, .sfs-header h2 span,
.cs-header .sec-title span, .about-content .sec-title span {
  color: #F4A000 !important;
}

/* Background resets to ensure gradient and floating circles are visible everywhere */
.section, section, html, body, .pathway-section, .curriculum-section, .hiw-section, .badges-section, .courses-section, #courses {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Map specific elements to the new design system */
.main-footer, footer {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(20px);
    padding-top: 10px !important;
    padding-bottom: 0 !important;
    color: var(--foreground) !important;
}

.footer-grid {
    padding-top: 20px !important;
    padding-bottom: 40px !important;
}

/* Fix Footer Text Visibility on Light Background */
.main-footer p, .main-footer a, .main-footer span, .main-footer .footer-desc {
    color: var(--muted-foreground) !important;
}

.main-footer h1, .main-footer h2, .main-footer h3, .main-footer h4, .main-footer h5, .main-footer h6, .main-footer .footer-col-title {
    color: var(--foreground) !important;
}

.main-footer a:hover {
    color: var(--primary) !important;
}

.footer-bottom-bar {
    background: rgba(0, 0, 0, 0.05) !important;
    padding-block: 16px !important;
    border-top: 1px solid var(--border);
}

.footer-bottom-bar a, .footer-bottom-bar span {
    color: var(--muted-foreground) !important;
}

.footer-social-icon {
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--foreground) !important;
}

.footer-social-icon:hover {
    background: var(--primary) !important;
    color: white !important;
}

/* Remove excess spacing inside the footer */
.footer-divider {
    display: none !important;
}

.footer-address {
    margin-top: 24px !important;
    padding-top: 24px !important;
    border-top: 1px solid var(--border) !important;
    color: var(--muted-foreground) !important;
}

nav, .navbar, .header {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border) !important;
}

/* Hero Section */
.hero-section {
    position: relative;
    z-index: 1;
}
.hero-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, hsl(268 85% 65% / 0.15), transparent 60%);
    z-index: -2;
    pointer-events: none;
    animation: blob 10s infinite;
}

/* Premium Floating Image for Transparent PNGs */
.hero-image-element {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    display: block;

    /* Gentle float without 3D rotation that clips edges */
    transform: translateY(0px);
    transition: transform 0.5s ease, filter 0.5s ease;

    /* Use drop-shadow instead of box-shadow so it hugs the edges of the transparent image */
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.15));
}

.hero-image-element:hover {
    transform: translateY(-15px);
    filter: drop-shadow(0 30px 40px hsl(220 95% 58% / 0.25));
}

/* Apply Shadows to Cards */
.program-card, .cd-card, .course-card, .pathway-card, .curr-card {
    background: var(--card) !important;
    border: 2px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-pop) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.program-card:hover, .cd-card:hover, .course-card:hover, .pathway-card:hover, .curr-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-pop-hover) !important;
}

/* CTA & Primary Buttons */
.btn-cta, .cta-button, .btn-primary {
    background: var(--gradient-hero) !important;
    color: white !important;
    box-shadow: var(--shadow-glow) !important;
    border: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    background-size: 200% auto !important;
    animation: gradient-shift 5s ease infinite !important;
}
.btn-cta:hover, .cta-button:hover, .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 15px 45px -10px hsl(220 95% 58% / 0.6) !important;
    background-position: right center !important;
}

/* 4. UTILITY CLASSES (Converted from Tailwind snippet) */
.font-display { font-family: 'Poppins', sans-serif !important; }
.font-body { font-family: 'Inter', sans-serif !important; }

.bg-gradient-hero { background: var(--gradient-hero) !important; }
.bg-gradient-sunny { background: var(--gradient-sunny) !important; }
.bg-gradient-cool { background: var(--gradient-cool) !important; }
.bg-gradient-bg { background: var(--gradient-bg) !important; }

.shadow-pop { box-shadow: var(--shadow-pop) !important; }
.shadow-pop-hover { box-shadow: var(--shadow-pop-hover) !important; }
.shadow-glow { box-shadow: var(--shadow-glow) !important; }
.shadow-card { box-shadow: var(--shadow-card) !important; }

.text-gradient {
  background: var(--gradient-hero) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.wiggle-on-hover { transition: transform 0.3s ease; }
.wiggle-on-hover:hover { animation: wiggle 0.5s ease-in-out; }

/* Global BG Mesh (Clean background layer) */
.global-bg-mesh {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -10; pointer-events: none;
    background: var(--gradient-bg);
}

/* Floating Decorative Shapes (from Hero.tsx) */
.floating-circle {
    position: fixed; pointer-events: none; z-index: -1;
}

.circle-1 {
    top: 15%; left: 5%;
    width: 6rem; height: 6rem;
    background-color: var(--secondary);
    border-radius: 50%;
    opacity: 0.7;
    animation: float-slow 6s ease-in-out infinite;
}

.circle-2 {
    top: 25%; right: 10%;
    width: 5rem; height: 5rem;
    background-color: var(--accent);
    opacity: 0.6;
    animation: blob 8s ease-in-out infinite;
}

.circle-3 {
    bottom: 20%; left: 25%;
    width: 4rem; height: 4rem;
    background-color: var(--lime);
    border-radius: 1.5rem;
    opacity: 0.7;
    animation: float 4s ease-in-out infinite;
}

.circle-4 {
    top: 20%; right: 33%;
    width: 3rem; height: 3rem;
    background-color: var(--purple);
    border-radius: 50%;
    opacity: 0.6;
    /* Replaced bounce-soft with float to fulfill 'not bouncing' request */
    animation: float 5s ease-in-out infinite reverse;
}

/* User Defined Keyframes */
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg) scale(1.05); }
  75% { transform: rotate(5deg) scale(1.05); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-30px) rotate(10deg); }
}

@keyframes bounce-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

@keyframes pop-in {
  0% { transform: scale(0) rotate(-10deg); opacity: 0; }
  60% { transform: scale(1.1) rotate(5deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes blob {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}