/* === CSS VARIABLES === */
:root {
  /* Main Colors */
  --primary: #a58ad2;
  --primary-dark: #8e6fc0;
  --primary-light: #c6b2e3;
  --secondary: #5dccc3;
  --secondary-dark: #41b3aa;
  --secondary-light: #8ee0d9;
  --accent: #ff9d7a;
  --accent-dark: #ff7c4c;
  --accent-light: #ffbeaa;
  
  /* Neutral Colors */
  --white: #ffffff;
  --light-gray: #f5f7fa;
  --medium-gray: #e4e9f2;
  --dark-gray: #9aa5b8;
  --text-dark: #495057;
  --text-light: #868e96;
  --black: #212529;
  
  /* Neomorphism Shadows */
  --shadow-light: 0.8rem 0.8rem 1.4rem rgba(202, 210, 221, 0.6);
  --shadow-dark: -0.4rem -0.4rem 1rem rgba(255, 255, 255, 0.8);
  --inner-shadow: inset 0.2rem 0.2rem 0.5rem rgba(202, 210, 221, 0.4), 
                  inset -0.2rem -0.2rem 0.5rem rgba(255, 255, 255, 0.8);
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Border Radius */
  --radius-small: 0.5rem;
  --radius-medium: 1rem;
  --radius-large: 2rem;
  
  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
}

/* === GLOBAL STYLES === */
html, body {
  scroll-behavior: smooth;
  font-family: 'DM Sans', sans-serif;
  color: var(--text-dark);
  overflow-x: hidden;
  background-color: var(--light-gray);
}

h1, h2, h3, h4, h5, h6, .title, .subtitle {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  color: var(--text-dark);
}

p {
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.section {
  padding: var(--space-xl) 0;
}

.section-title {
  position: relative;
  display: inline-block;
  margin-bottom: var(--space-lg);
  color: var(--primary);
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: var(--radius-small);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* === BUTTONS === */
.button {
  transition: all var(--transition-medium);
  font-weight: 500;
  letter-spacing: 0.5px;
  box-shadow: var(--shadow-light);
  border: none;
}

.button:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.button:active {
  transform: translateY(0);
  box-shadow: var(--inner-shadow);
}

.button.is-primary {
  background-color: var(--primary);
  color: white;
}

.button.is-primary:hover {
  background-color: var(--primary-dark);
}

.button.is-light {
  background-color: var(--light-gray);
  color: var(--primary);
  border: 1px solid var(--primary-light);
}

.button.is-light:hover {
  background-color: var(--medium-gray);
}

.button.is-rounded {
  border-radius: 25px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* === HEADER === */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: all var(--transition-medium);
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(5px);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.navbar {
  padding: 0.5rem 0;
}

.navbar-item {
  color: var(--text-dark);
  font-weight: 500;
  transition: color var(--transition-fast);
}

.navbar-item:hover {
  color: var(--primary);
  background-color: transparent !important;
}

.brand-name {
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 1px;
}

/* === HERO SECTION === */
.hero {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  display: flex;
  align-items: center;
  color: var(--white);
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7));
}

.hero-title {
  font-size: 4rem;
  margin-bottom: 1rem;
  color: var(--white);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
  animation: fadeInUp 1s ease-out;
}

.hero-subtitle {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  color: var(--white);
  text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
  animation: fadeInUp 1.2s ease-out;
}

.hero-description {
  font-size: 1.2rem;
  max-width: 600px;
  margin-bottom: 2rem;
  color: var(--white);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  animation: fadeInUp 1.4s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === HISTORY SECTION === */
.history-section {
  background-color: var(--white);
  position: relative;
  overflow: hidden;
}

.history-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top right, var(--primary-light), transparent 60%);
  opacity: 0.05;
  z-index: 0;
}

.image-container {
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-light), var(--shadow-dark);
  padding: 1rem;
  background-color: var(--light-gray);
  overflow: hidden;
  transition: transform var(--transition-medium);
}

.image-container:hover {
  transform: translateY(-5px);
}

.image-container img {
  border-radius: calc(var(--radius-medium) - 5px);
  transition: transform var(--transition-medium);
}

.image-container:hover img {
  transform: scale(1.03);
}

.history-content {
  padding: var(--space-md);
}

.read-more-btn {
  margin-top: var(--space-md);
  padding: 0.6rem 1.5rem;
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 25px;
  font-weight: 500;
  transition: all var(--transition-medium);
  box-shadow: var(--shadow-light);
}

.read-more-btn:hover {
  background-color: var(--primary-dark);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* === SERVICES SECTION === */
.services-section {
  background-color: var(--light-gray);
  position: relative;
}

.service-card {
  height: 100%;
  border-radius: var(--radius-medium);
  overflow: hidden;
  box-shadow: var(--shadow-light);
  transition: transform var(--transition-medium);
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--white);
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.card-image {
  width: 100%;
  height: 250px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.service-card:hover .card-image img {
  transform: scale(1.1);
}

.card-content {
  padding: var(--space-md);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.price {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary);
  margin-top: var(--space-sm);
}

/* === RESOURCES SECTION === */
.resources-section {
  background-color: var(--white);
}

.resource-card {
  height: 100%;
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-light);
  transition: all var(--transition-medium);
  background-color: var(--light-gray);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.resource-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.resource-card .card-content {
  padding: var(--space-md);
}

.resource-card a {
  color: var(--primary);
  transition: color var(--transition-fast);
}

.resource-card a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

/* === EVENTS SECTION === */
.events-section {
  background-color: var(--light-gray);
  position: relative;
}

.events-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at bottom left, var(--secondary-light), transparent 60%);
  opacity: 0.05;
  z-index: 0;
}

.event-card {
  height: 100%;
  border-radius: var(--radius-medium);
  overflow: hidden;
  box-shadow: var(--shadow-light);
  transition: transform var(--transition-medium);
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--white);
  margin-bottom: var(--space-md);
}

.event-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.event-date {
  color: var(--accent);
  font-weight: 700;
  margin-bottom: var(--space-xs);
  font-size: 0.9rem;
}

.event-register-btn {
  margin-top: auto;
}

/* === WEBINARS SECTION === */
.webinars-section {
  background-color: var(--white);
  position: relative;
}

.webinars-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at bottom right, var(--accent-light), transparent 60%);
  opacity: 0.05;
  z-index: 0;
}

.webinar-card {
  height: 100%;
  border-radius: var(--radius-medium);
  overflow: hidden;
  box-shadow: var(--shadow-light);
  transition: transform var(--transition-medium);
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--light-gray);
}

.webinar-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.webinar-date {
  color: var(--secondary);
  font-weight: 700;
  margin-bottom: var(--space-xs);
  font-size: 0.9rem;
}

.webinar-register-btn {
  margin-top: auto;
}

/* === PARTNERS SECTION === */
.partners-section {
  background-color: var(--light-gray);
}

.partner-card {
  text-align: center;
  padding: var(--space-md);
  border-radius: var(--radius-medium);
  background-color: var(--white);
  box-shadow: var(--shadow-light);
  height: 100%;
  transition: transform var(--transition-medium);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.partner-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.partner-card img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto var(--space-md);
  border: 5px solid var(--medium-gray);
  transition: transform var(--transition-medium);
}

.partner-card:hover img {
  transform: scale(1.05);
  border-color: var(--primary-light);
}

.partner-card h3 {
  color: var(--primary);
  margin-bottom: var(--space-xs);
}

.partner-contact-btn {
  margin-top: var(--space-md);
}

/* === CONTACT SECTION === */
.contact-section {
  background-color: var(--white);
  position: relative;
}

.contact-info {
  padding: var(--space-md);
  border-radius: var(--radius-medium);
  background-color: var(--light-gray);
  box-shadow: var(--shadow-light);
}

.contact-info h3 {
  color: var(--primary);
  margin-bottom: var(--space-sm);
}

.map-container {
  border-radius: var(--radius-medium);
  overflow: hidden;
  height: 300px;
}

.map-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-form-container {
  padding: var(--space-md);
  border-radius: var(--radius-medium);
  background-color: var(--light-gray);
  box-shadow: var(--shadow-light);
  height: 100%;
}

.contact-form {
  display: flex;
  flex-direction: column;
}

.contact-form .input,
.contact-form .textarea,
.contact-form .select select {
  background-color: var(--white);
  border: 1px solid var(--medium-gray);
  box-shadow: var(--inner-shadow);
  border-radius: var(--radius-small);
  transition: all var(--transition-fast);
}

.contact-form .input:focus,
.contact-form .textarea:focus,
.contact-form .select select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light);
}

.submit-btn {
  background-color: var(--primary);
  color: white;
  border: none;
  padding: 0.8rem;
  border-radius: var(--radius-medium);
  font-weight: 500;
  transition: all var(--transition-medium);
  margin-top: var(--space-sm);
}

.submit-btn:hover {
  background-color: var(--primary-dark);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* === FOOTER === */
.footer {
  background-color: var(--text-dark);
  color: var(--light-gray);
  padding: var(--space-xl) 0 var(--space-md);
}

.footer .title {
  color: var(--white);
  margin-bottom: var(--space-md);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: var(--space-xs);
}

.footer-links a {
  color: var(--medium-gray);
  transition: color var(--transition-fast);
  display: inline-block;
}

.footer-links a:hover {
  color: var(--white);
  transform: translateX(5px);
}

.social-links {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.social-links a {
  color: var(--medium-gray);
  transition: all var(--transition-fast);
  position: relative;
  padding-left: 25px;
  display: inline-block;
  margin-bottom: var(--space-xs);
}

.social-links a:hover {
  color: var(--white);
}

.social-links a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.social-links a[href*="facebook"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239aa5b8"><path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"/></svg>');
}

.social-links a[href*="twitter"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239aa5b8"><path d="M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z"/></svg>');
}

.social-links a[href*="instagram"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239aa5b8"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>');
}

.newsletter-form .input {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
}

.newsletter-form .input::placeholder {
  color: var(--dark-gray);
}

.newsletter-form .button {
  background-color: var(--primary);
  border-color: var(--primary);
}

.newsletter-form .button:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
}

/* === COOKIE CONSENT === */
.cookie-popup {
  position: fixed;
  bottom: 20px;
  left: 20px;
  max-width: 400px;
  background-color: var(--white);
  border-radius: var(--radius-medium);
  padding: var(--space-md);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  display: none;
}

.cookie-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cookie-content p {
  margin-bottom: var(--space-sm);
}

/* === SUCCESS PAGE === */
.success-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  text-align: center;
  padding: var(--space-md);
  background-color: var(--light-gray);
}

.success-content {
  max-width: 600px;
  padding: var(--space-lg);
  border-radius: var(--radius-medium);
  background-color: var(--white);
  box-shadow: var(--shadow-light);
}

.success-icon {
  font-size: 4rem;
  color: var(--secondary);
  margin-bottom: var(--space-md);
}

/* === PRIVACY & TERMS PAGES === */
.privacy-page, .terms-page {
  padding-top: 100px;
  min-height: 100vh;
  background-color: var(--light-gray);
}

.privacy-content, .terms-content {
  padding: var(--space-lg);
  border-radius: var(--radius-medium);
  background-color: var(--white);
  box-shadow: var(--shadow-light);
}

/* === RESPONSIVE STYLES === */
@media screen and (max-width: 1023px) {
  .hero-title {
    font-size: 3rem;
  }
  
  .hero-subtitle {
    font-size: 1.8rem;
  }
  
  .section {
    padding: var(--space-lg) 0;
  }
}

@media screen and (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.5rem;
  }
  
  .hero-description {
    font-size: 1rem;
  }
  
  .section-title {
    font-size: 1.8rem;
  }
  
  .section {
    padding: var(--space-md) 0;
  }
  
  .partner-card img {
    width: 120px;
    height: 120px;
  }
  
  .event-card, .webinar-card, .service-card {
    margin-bottom: var(--space-md);
  }
}

@media screen and (max-width: 480px) {
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-subtitle {
    font-size: 1.2rem;
  }
  
  .buttons {
    flex-direction: column;
  }
  
  .buttons .button {
    width: 100%;
    margin-bottom: var(--space-xs);
  }
  
  .section-title {
    font-size: 1.5rem;
  }
  
  .card-image {
    height: 200px;
  }
  
  .social-links {
    flex-direction: column;
  }
}