/* 
 * style.css - Unified Stylesheet for BikinSlide Landing Pages
 * Premium 'Quasimoda' Font, Custom Video Showcases, and CSS-driven Page Context Styling
 */

/* Web Fonts Import: Quasimoda from lettersoup via db.onlinewebfonts.com */
@font-face {
  font-family: 'quasimoda';
  src: url('https://db.onlinewebfonts.com/t/62bf916155166f87cb5cadf6cf2c101e.woff2') format('woff2'),
       url('https://db.onlinewebfonts.com/t/62bf916155166f87cb5cadf6cf2c101e.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'quasimoda';
  src: url('https://db.onlinewebfonts.com/t/ab7546c976eeaf64ef57c6a39628c127.woff2') format('woff2'),
       url('https://db.onlinewebfonts.com/t/ab7546c976eeaf64ef57c6a39628c127.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'quasimoda';
  src: url('https://db.onlinewebfonts.com/t/c3b4150996fc3f0796151e869e32a063.woff2') format('woff2'),
       url('https://db.onlinewebfonts.com/t/c3b4150996fc3f0796151e869e32a063.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* E-Learning System Colors (Yellow Accent) */
  --color-navy: #0F214A;
  --color-yellow: #FFE81A;
  --color-yellow-hover: #F3E013;
  --color-bg-light: #F4F8FC;
  --color-card-tint: #EBF2FF;
  --color-card-tint-darker: #DDE9FC;
  --color-footer-bg: #101828;
  --color-muted: #667085;
  --color-muted-dark: #4B5563;
  
  /* PowerPoint Agency Homepage System Colors (Gold/Tan Accent) */
  --color-dark-bg: #080D1A;
  --color-dark-bg-alt: #0A111E;
  --color-card-dark: #111A2C;
  --color-card-dark-alt: #16233B;
  --color-gold: #C88A4B;
  --color-gold-hover: #D49A54;
  --color-text-white: #FFFFFF;
  --color-text-gray: #D1D5DB;
  --color-text-muted: #9CA3AF;
  --color-text-dark-muted: #6B7280;

  /* Shadows & Glows */
  --shadow-soft: 0 10px 30px rgba(15, 33, 74, 0.05);
  --shadow-glow: 0 0 20px rgba(255, 232, 26, 0.3);
  --shadow-gold-glow: 0 0 20px rgba(200, 138, 75, 0.35);
  --border-gold-subtle: rgba(200, 138, 75, 0.2);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* Offset for sticky nav */
  font-family: 'quasimoda', sans-serif;
}

body {
  font-family: 'quasimoda', sans-serif;
  background-color: #FFFFFF;
  color: var(--color-navy);
  overflow-x: hidden;
}

/* Base Dark Mode override (For Homepage) */
.dark-theme-body {
  background-color: var(--color-dark-bg);
  color: var(--color-text-gray);
}

/* Custom Utilities & Micro-interactions */
.btn-hover-effect {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-hover-effect:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 20px rgba(15, 33, 74, 0.1);
}

/* Glow effects */
.btn-yellow-glow {
  transition: all 0.3s ease;
}
.btn-yellow-glow:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 25px rgba(255, 232, 26, 0.4);
}

.btn-gold-glow {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-gold-glow:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: var(--shadow-gold-glow);
  background-color: var(--color-gold-hover);
}

/* Floating Animations */
@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(0.5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

.floating-mockup {
  animation: float 6s ease-in-out infinite;
}

@keyframes float-delayed {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(-0.5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

.floating-mockup-delayed {
  animation: float-delayed 8s ease-in-out infinite;
  animation-delay: 2s;
}

/* Accordion Transition Rules */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
}

.accordion-item.active .accordion-content {
  max-height: 500px;
  padding-top: 1rem;
}

.accordion-item {
  transition: all 0.3s ease;
}

.accordion-item.active {
  background-color: var(--color-navy);
  color: #FFFFFF;
}

/* Sticky Header Custom Shadow */
.header-scrolled {
  background-color: rgba(10, 17, 30, 0.95) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.header-scrolled-elearning {
  background-color: rgba(15, 33, 74, 0.95) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Grid & Dotted Pattern Overlay */
.dotted-pattern {
  background-image: radial-gradient(#ffffff 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.08;
}

.dotted-pattern-gold {
  background-image: radial-gradient(#C88A4B 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.12;
}

/* Carousel Track Container */
.carousel-track-container {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}

.carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .carousel-slide {
    flex: 0 0 50%;
  }
}

@media (min-width: 1024px) {
  .carousel-slide {
    flex: 0 0 33.333%;
  }
}

/* City Silhouette overlay styling */
.city-skyline-bg {
  background: linear-gradient(180deg, #E8F1F9 0%, #FFFFFF 100%);
  position: relative;
}

.city-skyline-bg::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,120 L0,90 L30,90 L30,100 L50,100 L50,85 L80,85 L80,105 L100,105 L100,70 L140,70 L140,100 L170,100 L170,60 L210,60 L210,95 L240,95 L240,75 L280,75 L280,110 L310,110 L310,50 L360,50 L360,95 L390,95 L390,80 L430,80 L430,105 L470,105 L470,40 L510,40 L510,90 L550,90 L550,65 L600,65 L600,105 L640,105 L640,55 L680,55 L680,95 L720,95 L720,70 L760,70 L760,110 L800,110 L800,30 L850,30 L850,100 L880,100 L880,75 L920,75 L920,105 L960,105 L960,50 L1010,50 L1010,90 L1040,90 L1040,60 L1090,60 L1090,110 L1120,110 L1120,80 L1160,80 L1160,100 L1200,100 L1200,120 Z" fill="%23FFFFFF" opacity="0.12"/></svg>');
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  pointer-events: none;
}


/* ===================================================================
 * CSS SELECTOR-DRIVEN FOOTER CONTEXT STYLING
 * =================================================================== */

/* PowerPoint Agency Homepage context (dark-theme-body) */
body.dark-theme-body #global-footer {
  background-color: var(--color-navy-midnight);
}
body.dark-theme-body #global-footer .footer-social-icon:hover {
  background-color: var(--color-gold);
  color: var(--color-navy-midnight);
}
body.dark-theme-body #global-footer .footer-link:hover {
  color: var(--color-gold);
}
body.dark-theme-body #global-footer .footer-contact-link:hover {
  color: var(--color-gold);
}
body.dark-theme-body #global-footer .footer-contact-icon {
  color: var(--color-gold);
}

/* E-Learning Page context (without dark-theme-body) */
body:not(.dark-theme-body) #global-footer {
  background-color: var(--color-footer-bg);
}
body:not(.dark-theme-body) #global-footer .footer-social-icon:hover {
  background-color: var(--color-yellow);
  color: var(--color-navy-dark-elearning);
}
body:not(.dark-theme-body) #global-footer .footer-link:hover {
  color: var(--color-yellow);
}
body:not(.dark-theme-body) #global-footer .footer-contact-link:hover {
  color: var(--color-yellow);
}
body:not(.dark-theme-body) #global-footer .footer-contact-icon {
  color: var(--color-yellow);
}