/* Responsive Overrides & Breakpoints */

/* Desktop / Large Screens (>= 1200px) */
@media (min-width: 1200px) {
  /* Keep standard styles or add minor alignments */
}

/* Laptop Screens (<= 992px) */
@media (max-width: 992px) {
  html {
    font-size: 15px;
  }
  
  h1 {
    font-size: 2.25rem;
  }
  
  h2 {
    font-size: 1.75rem;
  }
  
  .section-padding {
    padding: 4rem 0;
  }
}

/* Tablet Screens (<= 768px) */
@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
  
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  .section-padding {
    padding: 3.5rem 0;
  }
  
  .timeline::after {
    left: 31px;
  }
  
  .timeline-item {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }
  
  .timeline-item::after {
    left: 21px;
    right: auto;
  }
  
  .timeline-right {
    left: 0%;
  }
  
  .timeline-right::after {
    left: 21px;
  }
}

/* Mobile Screens (<= 576px) */
@media (max-width: 576px) {
  html {
    font-size: 13px;
  }
  
  h1 {
    font-size: 1.75rem;
  }
  
  .container {
    padding: 0 1.25rem;
  }
  
  .btn {
    padding: 0.65rem 1.5rem;
    font-size: 0.9rem;
  }
}

/* Utilities for responsive display */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }

@media (max-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
}

@media (max-width: 576px) {
  .d-sm-none { display: none !important; }
  .d-sm-block { display: block !important; }
}