/* --------------------------------------------
   Theme Resets
-------------------------------------------- */
div#content {
    display: block;
    padding: 0;
  }
  
  h1, h2, h3, h4, h5, h6, p {
    margin: 0!important;
    padding: 0;
  }
  
  div#page {
    max-width: 100%;
    padding: 0;
    width: 100%;
  }
  
  
  /* --------------------------------------------
     Design System: Grid Layout - Base Row (BEM-style)
  -------------------------------------------- */
  .row {
    display: grid;
    margin: 0 auto;
    width: 90%;
  }
  
  .row--fluid {
    display: grid;
  }
  
  
  /* --------------------------------------------
     Design System: Row Alignments (All Viewports)
  -------------------------------------------- */
  .row--align-center {
    align-items: center;
  }
  
  .row--align-top {
    align-items: flex-start;
  }
  
  .row--align-bottom {
    align-items: flex-end;
  }
  
  .row--align-stretch {
    align-items: stretch;
  }
  
  
  /* --------------------------------------------
     Design System: Row Alignments - Mobile Only
  -------------------------------------------- */
  .row--align-top-onlymobile {
    align-items: flex-start;
  }
  
  .row--align-center-onlymobile {
    align-items: center;
  }
  
  .row--align-bottom-onlymobile {
    align-items: flex-end;
  }
  
  .row--align-stretch-onlymobile {
    align-items: stretch;
  }
  
  @media (min-width: 1025px) {
    .row--align-top-onlymobile,
    .row--align-center-onlymobile,
    .row--align-bottom-onlymobile,
    .row--align-stretch-onlymobile {
      align-items: unset;
    }
  }
  
  
  /* --------------------------------------------
     Design System: Section Padding (Mobile Default)
  -------------------------------------------- */
  .section--padding-sm,
  .section--padding-md,
  .section--padding-lg,
  .section--padding-xl {
    padding-top: clamp(80px, 7.80vw, 80px);
    padding-bottom: clamp(80px, 7.80vw, 80px);
  }
  
  
  /* --------------------------------------------
     Design System: Grid Columns (Mobile Default)
  -------------------------------------------- */
  .row--1col-full,
  .row--2col-equal,
  .row--3col-equal,
  .row--4col-equal,
  .row--5col-equal,
  .row--6col-equal,
  .row--2col-60-40,
  .row--2col-40-60,
  .row--3col-50-25-25,
  .row--3col-60-20-20,
  .row--3col-20-60-20,
  .row--3col-25-25-50,
  .row--2col-45-55,
  .row--2col-55-45,
  .row--2col-70-30,
  .row--2col-30-70 {
    grid-template-columns: 1fr;
  }
  
  
  /* --------------------------------------------
     Design System: Reverse Grid Utility
  -------------------------------------------- */
  .row--reverse {
    direction: rtl;
  }
  
  .row--reverse > * {
    direction: ltr;
  }
  
  .row--reverse-onlymobile {
    display: flex;
    flex-direction: column-reverse;
  }
  
  @media (min-width: 1025px) {
    .row--reverse-onlymobile {
      display: grid;
      flex-direction: unset;
    }
  }
  
  
  /* --------------------------------------------
     Design System: Gap Utilities
  -------------------------------------------- */
  .row--gap-sm { gap: 20px; }
  .row--gap-md { gap: 30px; }
  .row--gap-lg { gap: 40px; }
  .row--gap-xl { gap: 60px; }
  .row--gap-xxl { gap: 80px; }
  .row--mobile__gap{ gap: 40px; }
  
  @media(min-width: 1025px){
    .row--mobile__gap{ gap: 0; }
  }
  
  /* --------------------------------------------
     Media Queries - Desktop (≥1025px)
  -------------------------------------------- */
  @media (min-width: 1025px) {
    .row {
      max-width: 1720px;
    }
  
    /* Equal column layouts */
    .row--2col-equal { grid-template-columns: repeat(2, 1fr); }
    .row--3col-equal { grid-template-columns: repeat(3, 1fr); }
    .row--4col-equal { grid-template-columns: repeat(4, 1fr); }
    .row--5col-equal { grid-template-columns: repeat(5, 1fr); }
    .row--6col-equal { grid-template-columns: repeat(6, 1fr); }
  
    /* Two-column proportional layouts */
    .row--2col-60-40 { grid-template-columns: 3fr 2fr; }
    .row--2col-40-60 { grid-template-columns: 2fr 3fr; }
    .row--2col-45-55 { grid-template-columns: 9fr 11fr; }
    .row--2col-55-45 { grid-template-columns: 11fr 9fr; }
    .row--2col-70-30 { grid-template-columns: 7fr 3fr; }
    .row--2col-30-70 { grid-template-columns: 3fr 7fr; }
  
    /* Three-column proportional layouts */
    .row--3col-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
    .row--3col-60-20-20 { grid-template-columns: 3fr 1fr 1fr; }
    .row--3col-20-60-20 { grid-template-columns: 1fr 3fr 1fr; }
    .row--3col-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
  
    /* Section paddings - Responsive */
    .section--padding-sm {
      padding-top: clamp(60px, 5.20vw, 100px);
      padding-bottom: clamp(60px, 5.20vw, 100px);
    }
    .section--padding-md {
      padding-top: clamp(60px, 7.80vw, 150px);
      padding-bottom: clamp(60px, 7.80vw, 150px);
    }
    .section--padding-lg {
      padding-top: clamp(60px, 10.40vw, 200px);
      padding-bottom: clamp(60px, 10.40vw, 200px);
    }
    .section--padding-xl {
      padding-top: clamp(60px, 13.00vw, 250px);
      padding-bottom: clamp(60px, 13.00vw, 250px);
    }
  }
  
  
  /* --------------------------------------------
     Media Queries - Ultra Wide Screens (≥1921px)
  -------------------------------------------- */
  @media (min-width: 1921px) {
    .row {
      max-width: 95%;
      width: 95%;
    }
  }
  
  
  /* --------------------------------------------
     Global Styles
  -------------------------------------------- */
  html, body {
    overflow-x: hidden;
  }


  /* --------------------------------------------
     Section background styles
  -------------------------------------------- */
  .section--bg__cover__center{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .section--overlay__dark{
    background-blend-mode: overlay;
    background-color: #00000048;
  }
  .section--relative{
    position: relative;
  }

  /* --------------------------------------------
     Global Blocks
  -------------------------------------------- */

  .column {
    width: 100%;
  }
  .block--image {
    display: flex;
    height: 100%;
    transition: 300ms;
    width: 100%;
  }
  
  .block--image > img {
    height: 100%;
    transition: 300ms;
    width: 100%;
  }

  .block--button {
    display: flex;
    width: max-content;
  }
  
  .block--button__link {
    padding: 8px 20px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: 300ms;
  }
  
  .block--button--primary .block--button__link {
    background: #000;
    color: #fff;
  }
  
  .block--button--primary .block--button__link:hover {
    background: #666;
    color: #fff;
  }
  .block--paragraph {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
  .block--title__center{
    text-align: center;
  }
  .block--title__right{
    text-align: right;
  }
  .block--title__left{
    text-align: left;
  }