/*
Theme Name: Music Hub Child
Theme URI: https://digitalwurl.com/
Author: Mandla - Digitalwurl
Author URI: https://digitalwurl.com/
Description: Child theme for Music Hub.
Version: 1.0
Template: music-hub
Text Domain: music-hub-child
*/

.site-logo {
    position: relative;
    height: 6rem;
    width: auto;
    display: block;
    transition:ease-in-out, .5s;
}
.scrolled .site-logo {
    top: 0.2rem;
    height: 4rem;
    transition:ease-in-out, .5s;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
.footer-logo {width:36px;}

    /* Nav */
    .nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);transition:all 0.3s ease}
    .nav.scrolled{box-shadow:var(--shadow-sm)}
    .nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
    .brand{display:flex;gap:10px;align-items:center;font-weight:800;font-size:20px}
    .brand-badge{width:40px;height:40px;border-radius:12px;background:conic-gradient(from 0deg, #22d3ee, #a3e635, #facc15, #fb923c, #f43f5e, #22d3ee);display:grid;place-items:center;color:white;font-weight:800;font-size:18px;box-shadow:var(--shadow-sm)}
    
    .nav-links { list-style: none;}
    
    /* Enhanced Navigation Hover Effects */
    .nav-links a {
      position: relative;
      padding: 10px 14px;
      font-weight: 700;
      color: #334155;
      text-decoration: none;
      transition: all 0.3s ease;
      overflow: hidden;
      background: none;
    }
    
    .nav-links a::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: linear-gradient(90deg, 
        #22d3ee 0%, 
        #a3e635 20%, 
        #facc15 40%, 
        #fb923c 60%, 
        #f43f5e 80%, 
        #a78bfa 100%);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
      border-radius: 2px;
      z-index: 1;
    }
    
    .nav-links a::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, 
        transparent, 
        rgba(255,255,255,0.4), 
        transparent);
      transition: left 0.7s ease;
      z-index: 0;
    }
    
    .nav-links a:hover {
      color: #0f172a;
      transform: translateY(-2px);
    }
    
    .nav-links a:hover::before {
      transform: scaleX(1);
    }
    
    .nav-links a:hover::after {
      left: 100%;
    }
    
    /* Individual color effects for each nav item */
    .nav-links a:nth-child(1):hover::before { background: linear-gradient(90deg, #22d3ee, #14b8a6); }
    .nav-links a:nth-child(2):hover::before { background: linear-gradient(90deg, #a3e635, #facc15); }
    .nav-links a:nth-child(3):hover::before { background: linear-gradient(90deg, #fb923c, #f43f5e); }
    .nav-links a:nth-child(4):hover::before { background: linear-gradient(90deg, #60a5fa, #22d3ee); }
    .nav-links a:nth-child(5):hover::before { background: linear-gradient(90deg, #a78bfa, #c084fc); }
    .nav-links a:nth-child(6):hover::before { background: linear-gradient(90deg, #22d3ee, #a3e635); }
    .nav-links a:nth-child(7):hover::before { background: linear-gradient(90deg, #facc15, #fb923c); }
    .nav-links a:nth-child(8):hover::before { background: linear-gradient(90deg, #f43f5e, #a78bfa); }
    .nav-links a:nth-child(9):hover::before { background: linear-gradient(90deg, #14b8a6, #60a5fa); }
    .nav-links a:nth-child(10):hover::before { background: linear-gradient(90deg, #a3e635, #f43f5e); }
    
    /* Prominent Book CTA - Always Visible */
    .nav-cta {
      background: linear-gradient(45deg, #fb923c, #f43f5e)!important;
      color: white !important;
      border-radius: 12px;
      padding: 12px 20px !important;
      font-weight: 800;
      box-shadow: var(--shadow-md);
      transition: all 0.3s ease;
      margin-left: 8px;
      display: inline-flex !important;
      opacity: 1 !important;
      visibility: visible !important;
    }
    
    .nav-cta:hover {
      transform: translateY(-3px) !important;
      box-shadow: var(--shadow-lg);
      background: linear-gradient(45deg, #fd7e14, #e11d48) !important;
    }
    
    .nav-cta::before {
      display: none;
    }
    
    /* Focus states for accessibility */
    .btn:focus, .dot:focus, .arrow:focus, input:focus, select:focus, textarea:focus {
      outline: 2px solid #0f172a;
      outline-offset: 2px;
    }
    
    /* Navigation Dropdown */
    .nav-dropdown {
      position: relative;
    }
    
    .nav-dropdown > a {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    
    .nav-dropdown > a::after {
      content: '♪';
      font-size: 14px;
      background: linear-gradient(45deg, #22d3ee, #a3e635, #facc15, #fb923c, #f43f5e);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      transition: transform 0.3s ease;
    }
    
    .nav-dropdown:hover > a::after {
      transform: rotate(20deg);
    }
    
    .dropdown-content {
      position: absolute;
      top: 100%;
      left: 0;
      background: rgba(255,255,255,.98);
      backdrop-filter: saturate(180%) blur(12px);
      border: 1px solid var(--line);
      border-radius: 12px;
      box-shadow: var(--shadow-md);
      min-width: 200px;
      padding: 8px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: all 0.3s ease;
      z-index: 100;
    }
    
    .nav-dropdown:hover .dropdown-content {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    
    .dropdown-content a {
      display: block;
      padding: 10px 14px;
      border-radius: 8px;
      margin: 2px 0;
      transition: all 0.2s ease;
    }
    
    .dropdown-content a:hover {
      background: #f1f5f9;
    }
    
    /* Mobile navigation */
    .mobile-toggle {display: none; background: none; border: none; font-size: 24px; cursor: pointer; padding: 8px; border-radius: 8px;}
    .mobile-toggle:hover {background: #f1f5f9;}
    .nav-links {display: flex; gap: 8px; align-items: center;}
    
/*====== Home Slider =====*/
.musichub-slide {margin:0em;}

/* LESSONS PAGE LAYOUT */
    .lessons-container {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 40px;
      padding: 40px 0;
    }
    
   
    
    /* Instrument Sidebar */
    .instrument-sidebar {
      position: sticky;
      top: 100px;
      height: fit-content;
      background: rgba(255,255,255,.95);
      backdrop-filter: saturate(180%) blur(12px);
      border-radius: 24px;
      border: 1px solid var(--line);
      box-shadow: var(--shadow-md);
      padding: 24px;
      overflow: hidden;
    }
    
    .instrument-sidebar h3 {
      margin-top: 0;
      font-size: 20px;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--line);
      text-align: center;
    }
    
    .instrument-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    
    .instrument-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      border-radius: 14px;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 1px solid transparent;
    }
    
    .instrument-item:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm);
      border-color: var(--line);
    }
    
    .instrument-item.active {
      background: rgba(255,255,255,.8);
      border-color: var(--line);
      box-shadow: var(--shadow-sm);
    }
    
    .instrument-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      color: white;
      font-size: 18px;
      box-shadow: var(--shadow-sm);
    }
    
    .instrument-name {
      font-weight: 700;
      font-size: 16px;
    }
    
    /* Hide handle on desktop */
.instrument-sidebar-handle {
  display: none;
}


    
    /* Lesson Content Area */
    .lesson-content {
      background: rgba(255,255,255,.95);
      backdrop-filter: saturate(180%) blur(12px);
      border-radius: 24px;
      border: 1px solid var(--line);
      box-shadow: var(--shadow-md);
      padding: 40px;
      overflow: hidden;
    }
    
    .lesson-header {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 30px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--line);
    }
    
    .lesson-icon {
      width: 80px;
      height: 80px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      color: white;
      font-size: 32px;
      box-shadow: var(--shadow-md);
    }
    
    .lesson-title {
      font-size: 32px;
      margin: 0;
      font-weight: 800;
    }
    
    .lesson-overview {
      font-size: 18px;
      line-height: 1.6;
      color: var(--muted);
      margin-bottom: 30px;
    }
    
    .lesson-details-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
      margin-bottom: 40px;
    }
    
    .detail-card {
      background: #f8fafc;
      border-radius: 16px;
      padding: 24px;
      border: 1px solid var(--line);
      transition: all 0.3s ease;
    }
    
    .detail-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-md);
    }
    
    .detail-card h3 {
      margin-top: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 18px;
    }
    
    .detail-card ul {
      padding-left: 20px;
      margin-bottom: 0;
    }
    
    .detail-card li {
      margin-bottom: 8px;
    }
    
    .lesson-cta {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      margin-top: 30px;
    }
    
    /* Floating elements */
    .floating {animation: float 6s ease-in-out infinite;}
    @keyframes float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-10px); }
      100% { transform: translateY(0px); }
    }
    
/* Booking */
    /*#gform_1{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}*/
    #gform_wrapper_1 {padding: 0 2rem 2rem;}
    #gform_fields_1 .ginput_container input,#gform_fields_1 .ginput_container select{height: 3rem;}
    #gform_fields_1 .ginput_container input,#gform_fields_1 .ginput_container select,#gform_fields_1 .ginput_container textarea, .form input,.form select,.form textarea{width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--line);font:inherit;transition:all 0.3s ease;background:#fcfcfc}
    #gform_fields_1 .ginput_container input:focus,#gform_fields_1 .ginput_container select:focus,#gform_fields_1 .ginput_container textarea:focus,.form input:focus,.form select:focus,.form textarea:focus{background:#fff;box-shadow:0 0 0 3px rgba(15,23,42,0.1);border-color:#0f172a}
    #gform_fields_1 .ginput_container textarea,.form textarea{min-height:120px;grid-column:1/-1}
    #gform_submit_button_1::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.5s;
}
#gform_submit_button_1:hover::before {
  left: 100%;
}
    #gform_submit_button_1{
        display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #000;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
    }
    #gform_submit_button_1 .gform_button{
        background: #0f172a;
  color: #fff;
  border-color: #0f172a;
    }
  #gform_submit_button_1 .gform_button:hover{  background: #1e293b;
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);}
    .aside{display:grid;gap:16px}
    .aside .note{position:relative;border:1px solid var(--line);background:#fff;border-radius:18px;padding:20px;transition:all 0.3s ease}
    .aside .note:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
    .aside .dot{position:absolute;right:-8px;top:-8px;width:40px;height:40px;border-radius:12px;filter:saturate(140%);box-shadow:var(--shadow-sm)}    
    
    
/* GALLERY HERO */
    .gallery-hero {
      position: relative;
      overflow: hidden;
      padding: 140px 0 100px;
      background: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.7)), 
                  url('https://images.unsplash.com/photo-1506157786151-b8491531f063?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') center/cover no-repeat;
      color: white;
      text-align: center;
    }
    
    .gallery-hero-content {
      max-width: 800px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }
    
    .gallery-hero h1 {
      font-size: clamp(42px, 5vw, 64px);
      line-height: 1.05;
      font-weight: 800;
      margin: 0 0 20px;
      text-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }
    
    .gallery-hero p {
      font-size: 20px;
      line-height: 1.6;
      margin-bottom: 30px;
      opacity: 0.9;
    } 
    
    /* GALLERY STYLES */
    .gallery-container {
      padding: 80px 0;
    }
    
    .gallery-filters {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-bottom: 40px;
      flex-wrap: wrap;
    }
    
    .filter-btn {
      padding: 12px 20px;
      border: 1px solid var(--line);
      background: white;
      border-radius: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .filter-btn:hover, .filter-btn.active {
      background: #0f172a;
      color: white;
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm);
    }
    
    /* Masonry Grid Gallery */
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 24px;
      margin-bottom: 60px;
    }
    
    @media (min-width: 1200px) {
      .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    
    .gallery-item {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      transition: all 0.4s ease;
      aspect-ratio: 1/1;
      background: #f8fafc;
    }
    
    .gallery-item:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-lg);
    }
    
    .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    
    .gallery-item:hover img {
      transform: scale(1.05);
    }
    
    .gallery-item-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(transparent, rgba(0,0,0,0.7));
      color: white;
      padding: 20px;
      transform: translateY(100%);
      transition: transform 0.3s ease;
    }
    
    .gallery-item:hover .gallery-item-overlay {
      transform: translateY(0);
    }
    
    .gallery-item-category {
      display: inline-block;
      padding: 6px 12px;
      background: var(--pill1);
      border-radius: 20px;
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 8px;
    }
    
    .gallery-item-title {
      font-size: 18px;
      font-weight: 800;
      margin: 0;
    }
    
    /* Upload Section */
    .upload-section {
      background: rgba(255,255,255,.95);
      backdrop-filter: saturate(180%) blur(12px);
      border-radius: 24px;
      border: 1px solid var(--line);
      box-shadow: var(--shadow-md);
      padding: 40px;
      margin-top: 60px;
    }
    
    .upload-area {
      border: 2px dashed var(--line);
      border-radius: 16px;
      padding: 60px 20px;
      text-align: center;
      transition: all 0.3s ease;
      cursor: pointer;
      background: #f8fafc;
    }
    
    .upload-area:hover {
      border-color: #94a3b8;
      background: #f1f5f9;
    }
    
    .upload-area.dragover {
      border-color: #22d3ee;
      background: rgba(34, 211, 238, 0.05);
    }
    
    .upload-icon {
      font-size: 48px;
      margin-bottom: 16px;
      display: block;
    }
    
    .upload-text {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 8px;
    }
    
    .upload-subtext {
      color: var(--muted);
      margin-bottom: 20px;
    }
    
    .file-input {
      display: none;
    }
    
    .upload-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 24px;
      background: var(--pill2);
      color: white;
      border: none;
      border-radius: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .upload-btn:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }
    
    /* Modal for Image Viewing */
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.9);
      z-index: 1000;
      justify-content: center;
      align-items: center;
    }
    
    .modal-content {
      max-width: 90%;
      max-height: 90%;
      position: relative;
    }
    
    .modal img {
      max-width: 100%;
      max-height: 100%;
      border-radius: 8px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }
    
    .modal-close {
      position: absolute;
      top: -40px;
      right: 0;
      background: none;
      border: none;
      color: white;
      font-size: 30px;
      cursor: pointer;
    }
    
    .modal-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255,255,255,0.2);
      border: none;
      color: white;
      font-size: 24px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .modal-nav:hover {
      background: rgba(255,255,255,0.3);
    }
    
    .modal-prev {
      left: 20px;
    }
    
    .modal-next {
      right: 20px;
    }
    
    .modal-info {
      position: absolute;
      bottom: -50px;
      left: 0;
      right: 0;
      text-align: center;
      color: white;
    }
    
    /* Floating elements */
    .floating {
      animation: float 6s ease-in-out infinite;
    }
    
    @keyframes float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-10px); }
      100% { transform: translateY(0px); }
    }
    
    /* Loading animation */
    .loading {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 3px solid rgba(255,255,255,.3);
      border-radius: 50%;
      border-top-color: #fff;
      animation: spin 1s ease-in-out infinite;
      margin-right: 8px;
    }
    
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    
    /* TUITION HERO */
    .tuition-hero {
      position: relative;
      overflow: hidden;
      padding: 140px 0 100px;
      background: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.7)), 
                  url('https://images.unsplash.com/photo-1571974599782-87624638275f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') center/cover no-repeat;
      color: white;
      text-align: center;
    }
    
    .tuition-hero-content {
      max-width: 800px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }
    
    .tuition-hero h1 {
      font-size: clamp(42px, 5vw, 64px);
      line-height: 1.05;
      font-weight: 800;
      margin: 0 0 20px;
      text-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }
    
    .tuition-hero p {
      font-size: 20px;
      line-height: 1.6;
      margin-bottom: 30px;
      opacity: 0.9;
    }

    /* TUITION STYLES */
    .tuition-container {
      padding: 80px 0;
    }
    
    /* Instrument Tabs */
    .instrument-tabs {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-bottom: 40px;
      flex-wrap: wrap;
    }
    
    .instrument-tab {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      padding: 20px;
      border: 1px solid var(--line);
      background: white;
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.3s ease;
      min-width: 120px;
    }
    
    .instrument-tab:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-md);
    }
    
    .instrument-tab.active {
      border-color: #0f172a;
      box-shadow: var(--shadow-md);
    }
    
    .instrument-tab-icon {
      width: 60px;
      height: 60px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      color: white;
      box-shadow: var(--shadow-sm);
    }
    
    .instrument-tab-name {
      font-weight: 700;
      font-size: 16px;
      text-align: center;
    }
    
    /* Pricing Tables */
    .pricing-section {
      margin-bottom: 80px;
    }
    
    .pricing-table {
      background: white;
      border-radius: 20px;
      border: 1px solid var(--line);
      box-shadow: var(--shadow-md);
      overflow: hidden;
    }
    
    .pricing-header {
      padding: 30px;
      text-align: center;
      border-bottom: 1px solid var(--line);
      background: #f8fafc;
    }
    
    .pricing-header h3 {
      margin: 0 0 10px;
      font-size: 24px;
    }
    
    .pricing-header p {
      color: var(--muted);
      margin: 0;
    }
    
    .pricing-body {
      padding: 0;
    }
    
    .pricing-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      border-bottom: 1px solid var(--line);
    }
    
    .pricing-row:last-child {
      border-bottom: none;
    }
    
    .pricing-cell {
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    .pricing-cell.header {
      background: #f8fafc;
      font-weight: 700;
    }
    
    .pricing-cell.emphasis {
      background: rgba(34, 211, 238, 0.05);
    }
    
    .price {
      font-size: 24px;
      font-weight: 800;
      margin-bottom: 5px;
    }
    
    .price-note {
      font-size: 14px;
      color: var(--muted);
    }
    
    .pricing-features {
      margin: 0;
      padding-left: 20px;
    }
    
    .pricing-features li {
      margin-bottom: 8px;
    }
    
    /* Payment Options */
    .payment-options {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 24px;
      margin-bottom: 60px;
    }
    
    .payment-card {
      background: white;
      border-radius: 16px;
      border: 1px solid var(--line);
      padding: 30px;
      box-shadow: var(--shadow-sm);
      transition: all 0.3s ease;
    }
    
    .payment-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-md);
    }
    
    .payment-card h3 {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 0;
    }
    
    .payment-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: white;
    }
    
    /* Financial Aid Section */
    .financial-aid {
      background: white;
      border-radius: 20px;
      border: 1px solid var(--line);
      padding: 40px;
      box-shadow: var(--shadow-md);
      margin-top: 40px;
    }
    
    .financial-aid h2 {
      margin-top: 0;
      text-align: center;
    }
    
    .aid-options {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin-top: 30px;
    }
    
    .aid-option {
      padding: 20px;
      border-radius: 12px;
      background: #f8fafc;
      border: 1px solid var(--line);
    }
    
    .aid-option h4 {
      margin-top: 0;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
       /* Responsive adjustments */
    @media (max-width: 768px) {
      .pricing-row {
        grid-template-columns: 1fr;
      }
      
      .pricing-cell.header {
        display: none;
      }
      
      .pricing-cell::before {
        content: attr(data-label);
        font-weight: 700;
        margin-bottom: 5px;
        display: block;
      }
    }    

/*======== Confirmation Message =========*/
#gform_confirmation_message_1 {margin: 20% auto; width: fit-content; text-align:center;}
    
/*==== Instructors ====*/
.instructor-bio {
    text-align: justify;
}
/*==== Event Video Btn ====*/    
.event-video-modal[hidden] {
  display: none;
}

.event-video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-video-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.8);
}

.event-video-dialog {
  position: relative;
  z-index: 1;
  width: min(900px, 90vw);
  aspect-ratio: 16 / 9;
  background: #020617;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.6);
}

.event-video-frame-wrap,
#eventVideoFrame {
  width: 100%;
  height: 100%;
  border: 0;
}

.event-video-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  border: 0;
  background: rgba(15, 23, 42, 0.75);
  color: #e5e7eb;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}