/* Set base font family */
body {
    font-family: 'Inter', sans-serif;
}

/* --- Basic Background Image Setup --- */
header {
    /* Keep your original image settings */
    background-image: url('./hero.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    
    color: white; /* Your text color */
  
    /* Add position relative to contain the pseudo-element */
    position: relative;
    
    /* Ensure content sits above the overlay */
    z-index: 1; 

    padding-top: 6rem;    
    padding-bottom: 7rem; 
  }
  
  header::before {
    content: ''; /* Required for pseudo-elements */
    position: absolute; /* Position it relative to the header */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    /* The overlay color: Black with 50% opacity. Adjust as needed. */
    /* Try rgba(0, 0, 0, 0.5) for dark, rgba(255, 255, 255, 0.3) for light */
    background-color: rgba(0, 0, 0, 0.5); 
    
    /* Place the overlay behind the header's content */
    z-index: -1; 
  }
  
  @media (min-width: 768px) {
    header {
      padding-top: 8rem;    
      padding-bottom: 10rem; 
    }
  }

i.fa-chevron-down, .faq-question {
    cursor: pointer;
}

/* Basic styling for the FAQ accordion */
.faq-answer {
    display: none; /* Hidden by default */
    max-height: 0; /* Start collapsed */
    overflow: hidden; /* Hide content when collapsed */
    transition: max-height 0.4s ease-out; /* Smooth transition for opening/closing */
}

/* Styling for an active/open FAQ item */
.faq-item.active .faq-answer {
    display: block; /* Show the answer */
    max-height: 1000px; /* Allow it to expand (adjust if needed for very long answers) */
}

/* Rotate the chevron icon when FAQ is open */
.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

/* Smooth scroll behavior for anchor links */
html {
    scroll-behavior: smooth;
}

form button:hover {
    cursor: pointer;
}

span.comp-info {
    font-size: 13px;
}

.logo {
    width: 185px;
    height: auto;
}

@media (max-width: 768px) {
    p.adv {
        left: 65% !important;
    }
}