/* FlexGrid System
 * A lightweight responsive grid system with unique naming conventions
 */

/* Main container */
.fg-wrapper {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
  }
  
  /* Fixed-width container with breakpoints */
  .fg-wrapper-fixed {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
  }
  
  
  @media (min-width: 576px) {
    .fg-wrapper-fixed {
      max-width: 540px;
    }
  }
  
  @media (min-width: 768px) {
    .fg-wrapper-fixed {
      max-width: 720px;
    }
  }
  
  @media (min-width: 992px) {
    .fg-wrapper-fixed {
      max-width: 960px;
    }
  }

  @media (min-width: 1024px) {
  .fg-wrapper-fixed {
    max-width: 1024px;
  }
}
  
  @media (min-width: 1200px) {
    .fg-wrapper-fixed {
      max-width: 1140px;
    }
  }

  @media (min-width: 1400px) {
    .fg-wrapper-fixed {
      max-width: 1500px;
    }
  }

/* Fluid container (always 100% width) */
.fg-wrapper-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/* Grid row */
.fg-grid {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  /* margin-right: -15px; */
  /* margin-left: -15px; */

  margin-right: calc(var(--gutter-x, 0) * -0.5);
  margin-left: calc(var(--gutter-x, 0) * -0.5);
}

.fg-grid > * {
  padding-right: calc(var(--gutter-x, 0) * 0.5);
  padding-left: calc(var(--gutter-x, 0) * 0.5);
  padding-top: var(--gutter-y, 0);
  margin-top: 0; /* Reset margin to prevent unexpected spacing */
}

.gx-0 { --gutter-x: 0; }
.gx-1 { --gutter-x: 0.25rem; }
.gx-2 { --gutter-x: 0.5rem; }
.gx-3 { --gutter-x: 1rem; }
.gx-4 { --gutter-x: 1.5rem; }
.gx-5 { --gutter-x: 3rem; }

/* Vertical gutters (gy-*) */
.gy-0 { --gutter-y: 0; }
.gy-1 { --gutter-y: 0.25rem; }
.gy-2 { --gutter-y: 0.5rem; }
.gy-3 { --gutter-y: 1rem; }
.gy-4 { --gutter-y: 1.5rem; }
.gy-5 { --gutter-y: 3rem; }

/* Combined gutters (g-*) */
.g-0 { --gutter-x: 0; --gutter-y: 0; }
.g-1 { --gutter-x: 0.25rem; --gutter-y: 0.25rem; }
.g-2 { --gutter-x: 0.5rem; --gutter-y: 0.5rem; }
.g-3 { --gutter-x: 1rem; --gutter-y: 1rem; }
.g-4 { --gutter-x: 1.5rem; --gutter-y: 1.5rem; }
.g-5 { --gutter-x: 3rem; --gutter-y: 3rem; }

/* Base box classes */
.fg-box {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

/* Fixed width boxes (12 box grid) */
.fg-box-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.fg-box-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.fg-box-3 { flex: 0 0 25%; max-width: 25%; }
.fg-box-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.fg-box-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.fg-box-6 { flex: 0 0 50%; max-width: 50%; }
.fg-box-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.fg-box-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.fg-box-9 { flex: 0 0 75%; max-width: 75%; }
.fg-box-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.fg-box-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.fg-box-12 { flex: 0 0 100%; max-width: 100%; }

/* Small devices (s) */
@media (min-width: 576px) {
  .fg-box-s { flex-basis: 0; flex-grow: 1; max-width: 100%; }
  .fg-box-s-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .fg-box-s-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .fg-box-s-3 { flex: 0 0 25%; max-width: 25%; }
  .fg-box-s-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .fg-box-s-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .fg-box-s-6 { flex: 0 0 50%; max-width: 50%; }
  .fg-box-s-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .fg-box-s-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .fg-box-s-9 { flex: 0 0 75%; max-width: 75%; }
  .fg-box-s-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .fg-box-s-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .fg-box-s-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Medium devices (m) */
@media (min-width: 768px) {
  .fg-box-m { flex-basis: 0; flex-grow: 1; max-width: 100%; }
  .fg-box-m-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .fg-box-m-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .fg-box-m-3 { flex: 0 0 25%; max-width: 25%; }
  .fg-box-m-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .fg-box-m-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .fg-box-m-6 { flex: 0 0 50%; max-width: 50%; }
  .fg-box-m-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .fg-box-m-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .fg-box-m-9 { flex: 0 0 75%; max-width: 75%; }
  .fg-box-m-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .fg-box-m-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .fg-box-m-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Large devices (l) */
@media (min-width: 992px) {
  .fg-box-l { flex-basis: 0; flex-grow: 1; max-width: 100%; }
  .fg-box-l-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .fg-box-l-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .fg-box-l-3 { flex: 0 0 25%; max-width: 25%; }
  .fg-box-l-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .fg-box-l-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .fg-box-l-6 { flex: 0 0 50%; max-width: 50%; }
  .fg-box-l-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .fg-box-l-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .fg-box-l-9 { flex: 0 0 75%; max-width: 75%; }
  .fg-box-l-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .fg-box-l-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .fg-box-l-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Extra large devices (xl) */
@media (min-width: 1200px) {
  .fg-box-xl { flex-basis: 0; flex-grow: 1; max-width: 100%; }
  .fg-box-xl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .fg-box-xl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .fg-box-xl-3 { flex: 0 0 25%; max-width: 25%; }
  .fg-box-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .fg-box-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .fg-box-xl-6 { flex: 0 0 50%; max-width: 50%; }
  .fg-box-xl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .fg-box-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .fg-box-xl-9 { flex: 0 0 75%; max-width: 75%; }
  .fg-box-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .fg-box-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .fg-box-xl-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Utility classes for box order */
.fg-order-first { order: -1; }
.fg-order-last { order: 13; }

/* Utility classes for alignment */
.fg-align-start { align-items: flex-start; }
.fg-align-center { align-items: center; }
.fg-align-end { align-items: flex-end; }

.fg-justify-start { justify-content: flex-start; }
.fg-justify-center { justify-content: center; }
.fg-justify-end { justify-content: flex-end; }
.fg-justify-between { justify-content: space-between; }
.fg-justify-around { justify-content: space-around; }

/* Utility classes for visibility */
.fg-hide { display: none !important; }
.fg-show { display: block !important; }

@media (min-width: 576px) {
  .fg-hide-s { display: none !important; }
  .fg-show-s { display: block !important; }
}

@media (min-width: 768px) {
  .fg-hide-m { display: none !important; }
  .fg-show-m { display: block !important; }
}

@media (min-width: 992px) {
  .fg-hide-l { display: none !important; }
  .fg-show-l { display: block !important; }
}

@media (min-width: 1200px) {
  .fg-hide-xl { display: none !important; }
  .fg-show-xl { display: block !important; }
}

/* FlexGrid Flexbox Utilities */

/* Display */
.fg-d-flex { display: flex !important; }
.fg-d-inline-flex { display: inline-flex !important; }

/* Direction */
.fg-flex-row { flex-direction: row !important; }
.fg-flex-column { flex-direction: column !important; }
.fg-flex-row-reverse { flex-direction: row-reverse !important; }
.fg-flex-column-reverse { flex-direction: column-reverse !important; }

/* Wrap */
.fg-flex-wrap { flex-wrap: wrap !important; }
.fg-flex-nowrap { flex-wrap: nowrap !important; }
.fg-flex-wrap-reverse { flex-wrap: wrap-reverse !important; }

/* Justify Content */
.fg-justify-start { justify-content: flex-start !important; }
.fg-justify-end { justify-content: flex-end !important; }
.fg-justify-center { justify-content: center !important; }
.fg-justify-between { justify-content: space-between !important; }
.fg-justify-around { justify-content: space-around !important; }
.fg-justify-evenly { justify-content: space-evenly !important; }

/* Align Items */
.fg-align-start { align-items: flex-start !important; }
.fg-align-end { align-items: flex-end !important; }
.fg-align-center { align-items: center !important; }
.fg-align-baseline { align-items: baseline !important; }
.fg-align-stretch { align-items: stretch !important; }

/* Align Content */
.fg-content-start { align-content: flex-start !important; }
.fg-content-end { align-content: flex-end !important; }
.fg-content-center { align-content: center !important; }
.fg-content-between { align-content: space-between !important; }
.fg-content-around { align-content: space-around !important; }
.fg-content-stretch { align-content: stretch !important; }

/* Align Self */
.fg-self-auto { align-self: auto !important; }
.fg-self-start { align-self: flex-start !important; }
.fg-self-end { align-self: flex-end !important; }
.fg-self-center { align-self: center !important; }
.fg-self-baseline { align-self: baseline !important; }
.fg-self-stretch { align-self: stretch !important; }

/* Order */
.fg-order-first { order: -1 !important; }
.fg-order-last { order: 13 !important; }
.fg-order-0 { order: 0 !important; }
.fg-order-1 { order: 1 !important; }
.fg-order-2 { order: 2 !important; }
.fg-order-3 { order: 3 !important; }
.fg-order-4 { order: 4 !important; }
.fg-order-5 { order: 5 !important; }

/* Flex Grow */
.fg-grow-0 { flex-grow: 0 !important; }
.fg-grow-1 { flex-grow: 1 !important; }

/* Flex Shrink */
.fg-shrink-0 { flex-shrink: 0 !important; }
.fg-shrink-1 { flex-shrink: 1 !important; }

/* Responsive variations */
@media (min-width: 576px) {
  .fg-d-s-flex { display: flex !important; }
  .fg-flex-s-row { flex-direction: row !important; }
  .fg-flex-s-column { flex-direction: column !important; }
  .fg-justify-s-start { justify-content: flex-start !important; }
  .fg-justify-s-center { justify-content: center !important; }
  .fg-justify-s-end { justify-content: flex-end !important; }
  .fg-justify-s-between { justify-content: space-between !important; }
  .fg-align-s-start { align-items: flex-start !important; }
  .fg-align-s-center { align-items: center !important; }
  .fg-align-s-end { align-items: flex-end !important; }
}

@media (min-width: 768px) {
  .fg-d-m-flex { display: flex !important; }
  .fg-flex-m-row { flex-direction: row !important; }
  .fg-flex-m-column { flex-direction: column !important; }
  .fg-justify-m-start { justify-content: flex-start !important; }
  .fg-justify-m-center { justify-content: center !important; }
  .fg-justify-m-end { justify-content: flex-end !important; }
  .fg-justify-m-between { justify-content: space-between !important; }
  .fg-align-m-start { align-items: flex-start !important; }
  .fg-align-m-center { align-items: center !important; }
  .fg-align-m-end { align-items: flex-end !important; }
}

@media (min-width: 992px) {
  .fg-d-l-flex { display: flex !important; }
  .fg-flex-l-row { flex-direction: row !important; }
  .fg-flex-l-column { flex-direction: column !important; }
  .fg-justify-l-start { justify-content: flex-start !important; }
  .fg-justify-l-center { justify-content: center !important; }
  .fg-justify-l-end { justify-content: flex-end !important; }
  .fg-justify-l-between { justify-content: space-between !important; }
  .fg-align-l-start { align-items: flex-start !important; }
  .fg-align-l-center { align-items: center !important; }
  .fg-align-l-end { align-items: flex-end !important; }
}

@media (min-width: 1200px) {
  .fg-d-xl-flex { display: flex !important; }
  .fg-flex-xl-row { flex-direction: row !important; }
  .fg-flex-xl-column { flex-direction: column !important; }
  .fg-justify-xl-start { justify-content: flex-start !important; }
  .fg-justify-xl-center { justify-content: center !important; }
  .fg-justify-xl-end { justify-content: flex-end !important; }
  .fg-justify-xl-between { justify-content: space-between !important; }
  .fg-align-xl-start { align-items: flex-start !important; }
  .fg-align-xl-center { align-items: center !important; }
  .fg-align-xl-end { align-items: flex-end !important; }
}

.fg-m-0 { margin: 0 !important; }
.fg-m-1 { margin: 0.25rem !important; }
.fg-m-2 { margin: 0.5rem !important; }
.fg-m-3 { margin: 1rem !important; }
.fg-m-4 { margin: 1.5rem !important; }
.fg-m-5 { margin: 3rem !important; }
.fg-m-auto { margin: auto !important; }

/* Margin-right */
.fg-mr-0 { margin-right: 0 !important; }
.fg-mr-1 { margin-right: 0.25rem !important; }
.fg-mr-2 { margin-right: 0.5rem !important; }
.fg-mr-3 { margin-right: 1rem !important; }
.fg-mr-4 { margin-right: 1.5rem !important; }
.fg-mr-5 { margin-right: 3rem !important; }
.fg-mr-auto { margin-right: auto !important; }

/* Margin-bottom */
.fg-mb-0 { margin-bottom: 0 !important; }
.fg-mb-1 { margin-bottom: 0.25rem !important; }
.fg-mb-2 { margin-bottom: 0.5rem !important; }
.fg-mb-3 { margin-bottom: 1rem !important; }
.fg-mb-4 { margin-bottom: 1.5rem !important; }
.fg-mb-5 { margin-bottom: 3rem !important; }
.fg-mb-auto { margin-bottom: auto !important; }

/* Margin-left */
.fg-ml-0 { margin-left: 0 !important; }
.fg-ml-1 { margin-left: 0.25rem !important; }
.fg-ml-2 { margin-left: 0.5rem !important; }
.fg-ml-3 { margin-left: 1rem !important; }
.fg-ml-4 { margin-left: 1.5rem !important; }
.fg-ml-5 { margin-left: 3rem !important; }
.fg-ml-auto { margin-left: auto !important; }

/* Margin-top */
.fg-mt-0 { margin-top: 0 !important; }
.fg-mt-1 { margin-top: 0.25rem !important; }
.fg-mt-2 { margin-top: 0.5rem !important; }
.fg-mt-3 { margin-top: 1rem !important; }
.fg-mt-4 { margin-top: 1.5rem !important; }
.fg-mt-5 { margin-top: 3rem !important; }
.fg-mt-auto { margin-top: auto !important; }

/* 
 * Display Utility CSS Framework
 * A lightweight display utility system inspired by Bootstrap
 */

/* Display Property Classes */
.d-none {
  display: none !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.d-grid {
  display: grid !important;
}

.d-table {
  display: table !important;
}

.d-table-cell {
  display: table-cell !important;
}

/* Responsive Display Classes */
/* Small devices (576px and up) */
@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }
  
  .d-sm-inline {
    display: inline !important;
  }
  
  .d-sm-inline-block {
    display: inline-block !important;
  }
  
  .d-sm-block {
    display: block !important;
  }
  
  .d-sm-flex {
    display: flex !important;
  }
  
  .d-sm-inline-flex {
    display: inline-flex !important;
  }
  
  .d-sm-grid {
    display: grid !important;
  }
  
  .d-sm-table {
    display: table !important;
  }
  
  .d-sm-table-cell {
    display: table-cell !important;
  }
}

/* Medium devices (768px and up) */
@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }
  
  .d-md-inline {
    display: inline !important;
  }
  
  .d-md-inline-block {
    display: inline-block !important;
  }
  
  .d-md-block {
    display: block !important;
  }
  
  .d-md-flex {
    display: flex !important;
  }
  
  .d-md-inline-flex {
    display: inline-flex !important;
  }
  
  .d-md-grid {
    display: grid !important;
  }
  
  .d-md-table {
    display: table !important;
  }
  
  .d-md-table-cell {
    display: table-cell !important;
  }
}

/* Large devices (992px and up) */
@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }
  
  .d-lg-inline {
    display: inline !important;
  }
  
  .d-lg-inline-block {
    display: inline-block !important;
  }
  
  .d-lg-block {
    display: block !important;
  }
  
  .d-lg-flex {
    display: flex !important;
  }
  
  .d-lg-inline-flex {
    display: inline-flex !important;
  }
  
  .d-lg-grid {
    display: grid !important;
  }
  
  .d-lg-table {
    display: table !important;
  }
  
  .d-lg-table-cell {
    display: table-cell !important;
  }
}

/* X-Large devices (1200px and up) */
@media (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }
  
  .d-xl-inline {
    display: inline !important;
  }
  
  .d-xl-inline-block {
    display: inline-block !important;
  }
  
  .d-xl-block {
    display: block !important;
  }
  
  .d-xl-flex {
    display: flex !important;
  }
  
  .d-xl-inline-flex {
    display: inline-flex !important;
  }
  
  .d-xl-grid {
    display: grid !important;
  }
  
  .d-xl-table {
    display: table !important;
  }
  
  .d-xl-table-cell {
    display: table-cell !important;
  }
}

/* XX-Large devices (1400px and up) */
@media (min-width: 1400px) {
  .d-xxl-none {
    display: none !important;
  }
  
  .d-xxl-inline {
    display: inline !important;
  }
  
  .d-xxl-inline-block {
    display: inline-block !important;
  }
  
  .d-xxl-block {
    display: block !important;
  }
  
  .d-xxl-flex {
    display: flex !important;
  }
  
  .d-xxl-inline-flex {
    display: inline-flex !important;
  }
  
  .d-xxl-grid {
    display: grid !important;
  }
  
  .d-xxl-table {
    display: table !important;
  }
  
  .d-xxl-table-cell {
    display: table-cell !important;
  }
}

/* Print Display Classes */
@media print {
  .d-print-none {
    display: none !important;
  }
  
  .d-print-inline {
    display: inline !important;
  }
  
  .d-print-inline-block {
    display: inline-block !important;
  }
  
  .d-print-block {
    display: block !important;
  }
  
  .d-print-flex {
    display: flex !important;
  }
  
  .d-print-inline-flex {
    display: inline-flex !important;
  }
  
  .d-print-grid {
    display: grid !important;
  }
  
  .d-print-table {
    display: table !important;
  }
  
  .d-print-table-cell {
    display: table-cell !important;
  }
}

/* Visibility Classes */
.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

/* Responsive Visibility Classes */
@media (min-width: 576px) {
  .visible-sm {
    visibility: visible !important;
  }
  
  .invisible-sm {
    visibility: hidden !important;
  }
}

@media (min-width: 768px) {
  .visible-md {
    visibility: visible !important;
  }
  
  .invisible-md {
    visibility: hidden !important;
  }
}

@media (min-width: 992px) {
  .visible-lg {
    visibility: visible !important;
  }
  
  .invisible-lg {
    visibility: hidden !important;
  }
}

@media (min-width: 1200px) {
  .visible-xl {
    visibility: visible !important;
  }
  
  .invisible-xl {
    visibility: hidden !important;
  }
}

@media (min-width: 1400px) {
  .visible-xxl {
    visibility: visible !important;
  }
  
  .invisible-xxl {
    visibility: hidden !important;
  }
}



.fg-image {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.fg-image img {
  max-width: 100%;
  height: 320px;
  display: block;
}

.fg-img{
  width: 100%;
  object-fit: contain;
}

.intro-text{
  line-height: 1.8;
  text-align: justify;
  position: relative;
  bottom: 3.4%;
}

.w-100{
  width: 100% !important;
}

.p-relative{
  position: relative;
}

.p-absolute{
  position: absolute;
}
