html, body {
    overflow-x: hidden;
  }

body {
    background-color: var(--color-bg) !important;
}

.landing-content {
    width: 100%;
    height: auto;
    padding: 0;
    background-color: var(--color-black);
    overflow: visible;
    margin: 0;
}

.page-content {
    display: flex;
    flex-direction: column;
    gap: 100px;
    background-color: var(--color-black);
}

.featured-projects-section,
.about-us-section,
.case-studies-section,
.faq-container {
    padding: 0;
}



/* ===========================================
   Media Queries - Mobile First Approach
   =========================================== */

/* Base styles (mobile) are outside media queries */
.page-content {
    padding: 50px var(--page-inline-padding-sm);
}

/* Fade-in on viewport animation */
.fade-in-section {
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1), transform 0.8s cubic-bezier(0.4,0,0.2,1);
  will-change: opacity, transform;
}
.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}


@media (min-width: 400px) {
    
    
}

/* 768px and up */
@media (min-width: 768px) {
    .page-content {
        padding: 100px var(--page-inline-padding-md);
    }
    
    

    
}

/* 990px and up */
@media (min-width: 990px) {
    .page-content {
        padding: 100px var(--page-inline-padding-lg);
    }

}