/* ============================================================================
   DYNAMIC CSS GENERATOR
   Generated: 2026-07-25 15:49:22   
   Custom CSS classes from cms_css database table
   This file is loaded by CKEditor and front-end for dynamic styling
   Access via: /dynamic.css
   ============================================================================ */

/* ============================================================================
   CUSTOM CSS CLASSES
   Managed via Admin > CSS Class Library
   ============================================================================ */

/* Blurred Text Box */

.blurredTextBox {
    padding: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid hsla(var(--White), 0.5);
    width: 100%;
    color: hsla(var(--White), 1);
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@media (max-width: 768px) {
    .blurredTextBox {
        max-height: 50vh;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .blurredTextBox .content-block-richtext {
        font-size: clamp(0.9rem, 3.2vw, 1rem);
        line-height: 1.4;
    }

    .blurredTextBox .content-block-richtext > :first-child {
        margin-top: 0 !important;
    }

    .blurredTextBox .content-block-richtext p {
        margin-top: 0;
    }

    .blurredTextBox .content-block-richtext h1 {
        font-size: clamp(1.35rem, 5.5vw, 1.8rem);
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .blurredTextBox .content-block-richtext h2 {
        font-size: clamp(1.15rem, 4.6vw, 1.45rem);
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .blurredTextBox .content-block-richtext h3 {
        font-size: clamp(1rem, 4vw, 1.2rem);
    }

    .blurredTextBox .content-block-richtext img,
    .blurredTextBox .content-block-richtext svg,
    .blurredTextBox .content-block-richtext video,
    .blurredTextBox .content-block-richtext iframe {
        display: block;
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }
}


/* .twoColumnGrid */

.twoColumnGrid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 16px;
width: 90%; 
max-width: 1920px;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.twoColumnGrid {
 grid-template-columns: 1fr;
}
}


/* .twoThirdsLeft */

.twoThirdsLeft {
display: grid;
grid-template-columns: 70% 30%;
grid-gap: var(--Space4);
width: 90%;
max-width: 1920px;
margin: 0 auto;
padding: var(--Space4);
}
@media screen and (max-width: 768px) {
      .twoThirdsLeft {
        grid-template-columns: 1fr;
padding: 0;
      }
    }


/* .threecolumn */

.threecolumn  {
  display: flex;
  gap: 20px;           /* Space between columns */
  padding: 20px 0;     /* Optional spacing above/below */
}

.column {
  flex: 1;             /* All 3 equal width */
  padding: 20px;       /* Inner padding for content */
  box-sizing: border-box;
}

/* Mobile responsive: stacks into one column */
@media (max-width: 768px) {
  .three-columns {
    flex-direction: column;
  }
}


/* .twoThirdsRight */

.twoThirdsRight {
display: grid;
grid-template-columns: 30% 70%;
grid-gap: var(--Space2);
width: 90%;
max-width: 1920px;
margin: 0 auto;
padding: var(--Space4);
}
@media screen and (max-width: 768px) {
      .twoThirdsRight {
        grid-template-columns: 1fr;
      }
    }


/* threeColumnGrid */

.threeColumnGrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  width: 80%;
  margin: 0 auto;
  align-items: start;
}

@media screen and (max-width: 768px) {
  .threeColumnGrid {
    grid-template-columns: 1fr;
    width: 90%;
  }
}


/* singleColumn */

.singleColumn {
width: 90%;
max-width: 1920px;
margin: 0 auto;
padding-top: 60px;
}


/* .fourColumnGrid */

.fourColumnGrid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 16px;
width: 90%; 
max-width: 1920px;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.fourColumnGrid {
 grid-template-columns: 1fr;
}
}


/* divBorders */

.borderLeftGray {
border-left: 1px solid hsl(var(--Gray80));
padding-left: 20px;
}


/* singleColumnFlex */

.singleColumnFlex {
display: flex;
flex-direction: column;
}



/* ============================================================================
   USAGE INSTRUCTIONS
   
   1. Go to Admin > CSS Class Library
   2. Add a new CSS class with a name (e.g., "heroSection")
   3. Enter CSS properties (without the class selector)
   4. The class will be available as .heroSection in both CKEditor and front-end
   5. Use in HTML: <div class="heroSection">Content</div>
   
   Note: Caching is disabled - changes appear immediately
   ============================================================================ */