/* ==========================================================================
   1. BASE
   ========================================================================== */

   *,
   *::before,
   *::after {
       box-sizing: border-box;
   }
   
   body {
       margin: 0;
       overflow-x: hidden;
   }
   
   #content {
       margin-bottom: -43px;
   }
   
   .skyscraper {
       display: none;
   }
   
   /* ==========================================================================
      2. LAYOUT
   
      #MATemplate is full-width. Regular sections are centered with max-width.
      Full-bg sections stretch edge-to-edge; their children are constrained.
      ========================================================================== */
   
   #MATemplate {
       font-family: "Poppins", sans-serif;
   }
   
   #MATemplate .MAHeader {
       margin-top: 2px;
       height: 400px;
       width: 100dvw;
       position: relative;
       left: 50%;
       right: 50%;
       margin-left: -50vw !important;
       margin-right: -50vw !important;
       margin-bottom: 30px !important;
       display: flex;
       justify-content: center;
       align-items: center;
       color: white;
       padding: 75px 0;
       background-image: url(https://www.alternate.be/download/b2c_be_nl/pic/B2CBlogs/header.png);
       background-repeat: no-repeat;
       background-size: cover;
       background-position: center;
       box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5);
   }
   
   .MAHeader p {
       font-size: 3rem !important;
       font-weight: 800 !important;
       color: #fff !important;
   }
   
   #MATemplate section {
       margin: 50px 0;
   }
   
   #MATemplate .section--full-bg {
       position: relative;
       margin-top: 0;
       margin-bottom: 0;
       padding: 50px 0;
   }
   
   #MATemplate .section--full-bg-contact {
       position: relative;
       margin-top: 0;
       margin-bottom: 0;
       padding: 50px 0;
   }
   
   #MATemplate .section--full-bg::before {
       content: "";
       position: absolute;
       top: 0;
       bottom: 0;
       left: 50%;
       width: 100vw;
       margin-left: -50vw;
       background-color: #ececec;
       z-index: -1;
   }
   
   #MATemplate .section--full-bg-contact::before {
       content: "";
       position: absolute;
       top: 0;
       bottom: 0;
       left: 50%;
       width: 100vw;
       margin-left: -50vw;
       background-color: #ddd;
       z-index: -1;
   }
   
   /* ==========================================================================
      3. TYPOGRAPHY
      ========================================================================== */
   
   #MATemplate h1 {
       font-size: 28px;
       font-weight: 700;
       color: #000;
       line-height: 1.3;
   }
   
   #MATemplate h2 {
       font-size: 24px;
       font-weight: 700;
       color: #000;
       line-height: 1.3;
   }
   
   #MATemplate h3 {
       font-size: 18px;
       font-weight: 700;
       color: #000;
       line-height: 1.3;
   }
   
   #MATemplate p {
       font-size: 16px;
       font-weight: 400;
       color: #000;
   }
   
   #MATemplate ul {
       font-size: 1rem;
       padding: 0 2rem;
   }
   
   #MATemplate li {
       margin: 0.5rem 0;
   }
   
   /* ==========================================================================
      4. LINKS
      ========================================================================== */
   
   #MATemplate a:not(.btn) {
       color: #ad0109;
       font-weight: 700;
       text-decoration: none;
   }
   
   #MATemplate a:hover:not(.btn) {
       text-decoration: underline;
   }
   
   /* ==========================================================================
      5. HERO
      ========================================================================== */
   
   #MATemplate .hero img {
       width: 100%;
       height: auto;
       display: block;
       border-radius: 5px;
   }
   
   #MATemplate .hero--desktop {
       display: block;
   }
   
   #MATemplate .hero--mobile {
       display: none;
   }
   
   @media (max-width: 760px) {
       #MATemplate .hero--desktop {
           display: none;
       }
   
       #MATemplate .hero--mobile {
           display: block;
       }
   }
   
   /* ==========================================================================
      6. TABLE
      ========================================================================== */
   
   #MATemplate .table-wrapper {
       overflow-x: auto;
       max-width: 100%;
       margin: 1.5rem 0 1rem;
       background-color: #fff;
       border: 1px solid #d6d6d6;
       border-radius: 8px;
   }
   
   #MATemplate table {
       width: 100%;
       border-collapse: collapse;
       margin: 0;
       font-size: 15px;
   }
   
   #MATemplate th {
       background-color: #ad0109;
       color: #fff;
       padding: 12px 16px;
       text-align: left;
       font-weight: 600;
   }
   
   #MATemplate td {
       padding: 10px 16px;
       border-bottom: 1px solid #e0e0e0;
   }
   
   #MATemplate tbody tr:last-child td {
       border-bottom: none;
   }
   
   #MATemplate tr:nth-child(even) {
       background-color: #f9f9f9;
   }
   
   #MATemplate tr:hover {
       background-color: #fff0f0;
   }
   
   /* ==========================================================================
      7. FAQ ACCORDION
   
      Overrides Bootstrap defaults to match ALTERNATE brand.
      ========================================================================== */
   
   #MATemplate .accordion-item {
       margin-bottom: 15px;
       border: 1px solid #e0e0e0;
       border-radius: 8px;
       overflow: hidden;
   }
   
   #MATemplate .accordion-button {
       width: 100%;
       padding: 15px 20px;
       background-color: #fff;
       border: none;
       text-align: left;
       font-size: 14px;
       font-weight: 600;
       color: #000;
       cursor: pointer;
       display: flex;
       justify-content: space-between;
       align-items: center;
       transition: background-color 0.3s ease;
   }
   
   /* Override Bootstrap's blue highlight on open accordion buttons */
   
   #MATemplate .accordion-button:not(.collapsed) {
       background-color: #fff;
       color: #000;
       box-shadow: none;
   }
   
   #MATemplate .accordion-body {
       padding: 20px;
       background: white;
   }
   
   #MATemplate .accordion-body p {
       margin: 0;
       font-size: 14px;
       font-weight: 400;
       line-height: 1.6;
   }
   
   #MATemplate .accordion-body ul {
       margin: 0.5rem 0;
   }
   
   /* FAQ in 2 kolommen bij meer dan 5 vragen (1 kolom op mobiel) */
   
   #MATemplate .faq-grid {
       display: flex;
       gap: 30px;
       align-items: flex-start;
   }
   
   #MATemplate .faq-column {
       flex: 1 1 0;
       min-width: 0;
       display: flex;
       flex-direction: column;
   }
   
   @media (max-width: 768px) {
       #MATemplate .faq-grid {
           flex-direction: column;
           gap: 0;
       }
   }
   
   /* ==========================================================================
      8. CAROUSEL
      ========================================================================== */
   
   #MATemplate #fngc-fotos {
       width: 90%;
       margin-left: auto;
       margin-right: auto;
   }
   
   /* ==========================================================================
      9. RESPONSIVE
      ========================================================================== */
   
   @media (max-width: 760px) {
       #MATemplate h1 {
           font-size: 24px;
       }
   
       #MATemplate h2 {
           font-size: 20px;
       }
   
       #MATemplate h3 {
           font-size: 16px;
       }
   
       #MATemplate p {
           font-size: 14px;
       }
   
       #MATemplate section {
           margin: 30px auto;
       }
   
       #MATemplate .section--full-bg {
           padding: 30px 0px;
       }
   }