/* Responsive Styles */

/* Extra large devices (large desktops) */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

/* Large devices (desktops) */
@media (max-width: 1199.98px) {
  .hero-title {
    font-size: 3.5rem;
  }
  
  .record-number {
    font-size: 2.25rem;
  }
}

/* Medium devices (tablets) */
@media (max-width: 991.98px) {
  .section-padding {
    padding: var(--space-6) 0;
  }
  
  .hero-title {
    font-size: 3rem;
  }
  
  .hero-content {
    max-width: 80%;
  }
  
  .hero-badge {
    width: 90%;
  }
  
  .legacy-image-grid {
    margin-top: var(--space-4);
  }
}

/* Small devices (landscape phones) */
@media (max-width: 767.98px) {
  .section-padding {
    padding: var(--space-5) 0;

  }
  
  .hero-title {
    font-size: 2.5rem;
        margin-top:30px ;
  }
  
  .hero-content {
    max-width: 100%;
  }
  
  .hero-cta {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .hero-cta .btn {
    margin-bottom: var(--space-2);
    width: 100%;
  }
  
  .badge-content {
    flex-direction: column;
    gap: var(--space-2);
  }
  
  .badge-divider {
    width: 60%;
    height: 1px;
  }
  
  .record-card {
    margin-bottom: var(--space-3);
  }
  
  .vision-cta {
    flex-direction: column;
    gap: var(--space-2);
  }
  
  .vision-cta .btn {
    width: 100%;
  }
}

/* Extra small devices (portrait phones) */
@media (max-width: 575.98px) {
  .section-title {
    font-size: 2rem;

  }
  
  .hero-section {
    min-height: 600px;
    height: auto;
    

  }
  
  .hero-title {
    font-size: 2rem;

  }
  
  .hero-subtitle {
    font-size: 1rem;
  }
  
  .hero-badge {
    position: relative;
    margin-top: var(--space-4);
    margin-bottom: -50px;
    width: 100%;
    left: 0;
    transform: none;
  }
  
  .legacy-image-grid {
    height: 400px;
  }
  
  .contact-form-wrapper {
    padding: var(--space-3);
  }
}

/* For Golden Ratio adjustments */
.golden-ratio {
  --phi: 1.618;
}

.golden-height {
  height: 0;
  padding-bottom: 61.8%; /* 1/1.618 ≈ 0.618 or 61.8% */
  position: relative;
}

.golden-width {
  width: 61.8%;
}

.golden-margin {
  margin: 0 19.1%; /* (1-0.618)/2 ≈ 0.191 or 19.1% */
}