.middle {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40%; /* Optional: minimum height to see the centering effect */
    height: 100%; /* Takes full height of parent container */
    width:100%;
}

/* Alternative method using grid */
.middle-grid {
    display: grid;
    place-items: center;
    width:100%;
    min-height: 30px; /* Optional: minimum height to see the centering effect */
    height: 100%; /* Takes full height of parent container */
}

.middle-grid-banner {
    display: grid;
    place-items: center;
    width:100%;
    min-height: 90px; /* Optional: minimum height to see the centering effect */
    height: 130px; /* Takes full height of parent container */
}

.middle-bullet-banner {
    display: grid;
    place-items: center;
    width:100%;
    min-height: 130px; /* Optional: minimum height to see the centering effect */
    height: 190px; /* Takes full height of parent container */
}

.middle-large-banner {
    display: grid;
    place-items: center;
    width:100%;
    min-height: 480px; /* Optional: minimum height to see the centering effect */
     
}

/* ==========================================================================
   GLOBAL RESETS & BASE STYLES
   ========================================================================== */
* {
  box-sizing: border-box;
  font-family: Ubuntu, sans-serif;
}

html {
  margin: 0;
  padding: 0;
  font-size: 18px;
  line-height: 1.4;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

body {
  margin: 0;
  padding: 0;
  font-size: .8em;
  line-height: 1.4;
  text-rendering: optimizeLegibility;
}


/* ==========================================================================
   responsive table grid style one non-slider based
   ========================================================================== */
.side-by-side {
  display: flex;                /* Activate flex layout */
  flex-direction: row;          /* Arrange children horizontally */
  align-items: center;          /* Vertically center the items */
  justify-content: flex-start;  /* Start items from the left (can change to space-between, etc.) */
  flex-wrap: wrap;              /* Allow items to wrap if there isn’t enough space */

  
  /* Optional padding and border for visual separation */
  padding: 10px;
  border: 1px solid #ccc;
}

/* Optional: Style child elements for demonstration purposes */
.side-by-side > * {
  
  padding: 10px;
  border: 0px solid #ccc;
  flex: 1;              /* Each item takes an equal share of available space */
       
}




/* ==========================================================================
   responsive table grid style one non-slider based
   ========================================================================== */



 
            .responsive-table {
                width: 100%;
                border-collapse: collapse;
            }

            .responsive-table th,
            .responsive-table td {
                border: 1px solid #ddd;
                padding: 8px;
                text-align: left;
            }

            .responsive-table tr:nth-child(even) {
                
            }

            @media (max-width: 767px) {
                .responsive-table,
                .responsive-table thead,
                .responsive-table tbody,
                .responsive-table th,
                .responsive-table td,
                .responsive-table tr {
                    display: block;
                }

                .responsive-table thead tr {
                    position: absolute;
                    top: -9999px;
                    left: -9999px;
                }

                .responsive-table tr {
                    margin-bottom: 1rem;
                }

                .responsive-table td {
                    border: none;
                    border-bottom: 1px solid #ddd;
                    position: relative;
                    padding-left: 50%;
                }

                .responsive-table td:before {
                    content: attr(data-column);
                    position: absolute;
                    top: 6px;
                    left: 6px;
                    font-weight: bold;
                }
            }
        
/*

 <table class="responsive-table">
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                    <th>Column 4</th>
                    <th>Column 5</th>
                    <th>Column 6</th>
                    <th>Column 7</th>
                    <th>Column 8</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td data-column="Column 1">Value 1</td>
                    <td data-column="Column 2">Value 2</td>
                    <td data-column="Column 3">Value 3</td>
                    <td data-column="Column 4">Value 4</td>
                    <td data-column="Column 5">Value 5</td>
                    <td data-column="Column 6">Value 6</td>
                    <td data-column="Column 7">Value 7</td>
                    <td data-column="Column 8">Value 8</td>
                </tr>
            </tbody>
        </table>


*/



/* ==========================================================================
   responsive table grid style Two Slider based
   ========================================================================== */

    
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}    
    
.table-container {
  overflow-x: auto;
  width: 100%;
  display: block;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 15px;
  border: 1px solid #ccc;
  text-align: center;
}

@media (max-width: 767px) { /* For mobile phones */
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  th, td {
    padding: 8px;
    border: 1px solid #ccc;
    text-align: center;
  }
}

/* New style for the overflow bar */
.overflow-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: red;
  z-index: 9;
}

/*  below is an example for resonsive table style 2 with slider
<div class="table-container">
  <table>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
      <th>Column 7</th>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
      <td>Cell 7</td>
    </tr>
    <tr>
      <td>Cell 8</td>
      <td>Cell 9</td>
      <td>Cell 10</td>
      <td>Cell 11</td>
      <td>Cell 12</td>
      <td>Cell 13</td>
      <td>Cell 14</td>
    </tr>
  </table>
</div>

<!-- New element for the overflow bar -->
<div class="overflow-bar"></div>

<script>
   const tableContainer = document.querySelector('.table-container');
const table = tableContainer.querySelector('table');
const overflowBar = document.querySelector('.overflow-bar');

// Show or hide the overflow bar depending on whether the table overflows
function updateOverflowBar() {
  if (table.offsetWidth > tableContainer.offsetWidth) {
    overflowBar.style.display = 'block';
  } else {
    overflowBar.style.display = 'none';
  }
}

// Update the overflow bar when the window is resized or the table is scrolled
window.addEventListener('resize', updateOverflowBar);
tableContainer.addEventListener('scroll', updateOverflowBar);

// Initial update
updateOverflowBar();
 
    
    
</script>

*/



/* ==========================================================================
   Apply below on all field types to make uniform
   ========================================================================== */
.general-field-element {
  height: 37px;
  width: 100%;
  box-sizing: border-box;  /* Includes border and padding in the total width/height */
  padding: 0 10px;
  border: 1px solid #ccc;
  font-size: 14px;
  border-radius: 3px;
}



/* ==========================================================================
   Apply below on all textarea to make uniform
   ========================================================================== */

.general-textarea-field {
  height: 100px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #ccc;
  font-size: 14px;
  border-radius: 3px;
  resize: vertical; /* Allow users to resize vertically if desired */
}


/* ==========================================================================
   Use this below where its child elements are stacked vertically
   ========================================================================== */

.middle-all {
  display: flex;
  flex-direction: column;   /* Stacks children vertically */
  justify-content: center;  /* Centers children vertically within the container */
  align-items: center;      /* Centers children horizontally within the container */
}



/* ==========================================================================
   SELECTION & BASIC ELEMENTS
   ========================================================================== */
::-moz-selection {
  background: #b3d4fc;
}
::selection {
  background: #b3d4fc;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

audio,
canvas,
iframe,
svg,
video {
  display: flex;
  align-items: center;
  justify-content: center;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

header,
nav {
  margin: 0;
}

/* ==========================================================================
   VISIBILITY HELPERS & MARGIN UTILITIES
   ========================================================================== */
.invisible {
  visibility: hidden;
  display: none;
}

.hide-mobile {
  display: none;
  visibility: hidden;
}

.hide-desktop {
  display: none;
  visibility: hidden;
}

/* Margin utilities */
.mt-5 { margin-top: 20px; }
.mt-4 { margin-top: 15px; }
.mt-3 { margin-top: 10px; }
.mt-2 { margin-top: 5px; }
.mt-1 { margin-top: 3px; }

.mb-5 { margin-bottom: 20px; }
.mb-4 { margin-bottom: 15px; }
.mb-3 { margin-bottom: 10px; }
.mb-2 { margin-bottom: 5px; }
.mb-1 { margin-bottom: 3px; }

.mr-5 { margin-right: 20px; }
.mr-4 { margin-right: 15px; }
.mr-3 { margin-right: 10px; }
.mr-2 { margin-right: 5px; }
.mr-1 { margin-right: 3px; }

.ml-5 { margin-left: 20px; }
.ml-4 { margin-left: 15px; }
.ml-3 { margin-left: 10px; }
.ml-2 { margin-left: 5px; }
.ml-1 { margin-left: 3px; }

/* ==========================================================================
   TYPOGRAPHY & BUTTONS
   ========================================================================== */
.dark-text{
    color:#222222;
}
.light-text{
    color:whitesmoke;
}

p {
  margin: 10px 10px 20px 10px;
}

.btn-1 {
  font-size: 15px;
  font-family: Arial;
  width: 150px;
  height: 45px;
  padding: 12px;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
}

.btn-2 {
  font-size: 15px;
  font-family: Arial;
  width: 100%;
  height: 45px;
  padding: 12px;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
}


.btn-primary { background: #142FF8; color: white; }
.btn-secondary { background: #6C7B8B; color: white; }
.btn-success { background: #177245; color: white; }
.btn-danger { background: red; color: white; }
.btn-warning { background: #f1c232; color: black; }
.btn-info { background: #2986cc; color: white; }
.btn-light { background: #ccc; color: black; }
.btn-dark { background: #222; color: white; }

/* ==========================================================================
   GRID CONTAINERS & COMPONENTS
   ========================================================================== */

/* Centering container */
.middle {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically */
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* Left control panel (no additional rules provided) */
.left-control-panel-nav { }

/* Header */
header {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}

 
/* Column header styling for first and second rows */
.first-row .column-h,
.second-row .column-h {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.second-row .column-h {
  padding: 25px;
}

/* Container for a horizontal row */
.row-h {
  display: flex;
  flex-wrap: wrap; /* Allows wrapping if needed */
  gap: 10px;       /* Optional gap between columns */
}

/* Column widths for row-h */
.column-1 { width: 20%; }
.column-2 { width: 60%; }
.column-3,
.column-4,
.column-5,
.column-6 { width: 10%; }
.column-7 { width: 80%; }
.column-8 { width: 20%; }

/* Optional styling for visualization */
[class^="column-"] {
  background-color: #eee;
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
  font-size: 1rem;
}


/* ==========================================================================
   ROW-2 GRID CONTAINER & COLUMNS (Desktop Rules)
   ========================================================================== */



.row-2 > * {
  border: 0;
  border-radius: 0px;
  padding: 0px;
  margin: 0;
  text-align: center;
}


.row-2 {
  margin: 0 auto;
  display: flex;
  width: 99.9%;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* Hardcoded desktop widths for .row-2 columns */
.row-2 > .col-1  { width: 8.33%; }
.row-2 > .col-2  { width: 16.66%; }
.row-2 > .col-3  { width: 24.99%; }
.row-2 > .col-4  { width: 33.32%; }
.row-2 > .col-5  { width: 41.65%; }
.row-2 > .col-6  { width: 49.98%; }
.row-2 > .col-7  { width: 58.31%; }
.row-2 > .col-8  { width: 66.64%; }
.row-2 > .col-9  { width: 74.97%; }
.row-2 > .col-10 { width: 83.3%; }
.row-2 > .col-11 { width: 91.63%; }
.row-2 > .col-12 { width: 100%; }

/* Hardcoded desktop widths for .row-2 medium device columns */
.row-2 > .col-1-md  { width: 5.83%;  margin: 10px; }
.row-2 > .col-2-md  { width: 14.16%; margin: 10px; }
.row-2 > .col-3-md  { width: 22.49%; margin: 10px; }
.row-2 > .col-4-md  { width: 30.82%; margin: 10px; }
.row-2 > .col-5-md  { width: 39.15%; margin: 10px; }
.row-2 > .col-6-md  { width: 47.49%; margin: 10px; }
.row-2 > .col-7-md  { width: 55.81%;  margin: 10px; }
.row-2 > .col-8-md  { width: 64.14%; margin: 10px; }
.row-2 > .col-9-md  { width: 72.47%; margin: 10px; }
.row-2 > .col-10-md { width: 80.8%;  margin: 10px; }
.row-2 > .col-11-md { width: 89.13%; margin: 10px; }
.row-2 > .col-12-md { width: 97.5%;  margin: 10px; }

/* ==========================================================================
   ROW GRID CONTAINER & COLUMNS (Desktop Rules)
   ========================================================================== */
.row {
    
    
    flex-direction: row;
     
    align-content: center;
      margin: 0 auto;
    
  
  display: flex;
  width: 80%;
 
  flex-wrap: wrap;
  justify-content: space-between;
}

.row > * {
  
  border: 0;
  border-radius: 2px;
  padding: 10px;
  margin: 0;
  text-align: center;
}

/* Hardcoded desktop widths for .row columns */
.row > .col-1  { width: 8.33%; }
.row > .col-2  { width: 16.66%; }
.row > .col-3  { width: 24.99%; }
.row > .col-4  { width: 33.32%; }
.row > .col-5  { width: 41.65%; }
.row > .col-6  { width: 49.98%; }
.row > .col-7  { width: 58.31%; }
.row > .col-8  { width: 66.64%; }
.row > .col-9  { width: 74.97%; }
.row > .col-10 { width: 83.3%; }
.row > .col-11 { width: 91.63%; }
.row > .col-12 { width: 100%; }

/* Hardcoded desktop widths for .row medium device columns */
.row > .col-1-md  { width: 5.83%;  margin: 10px; }
.row > .col-2-md  { width: 14.16%; margin: 10px; }
.row > .col-3-md  { width: 22.49%; margin: 10px; }
.row > .col-4-md  { width: 30.82%; margin: 10px; }
.row > .col-5-md  { width: 39.15%; margin: 10px; }
.row > .col-6-md  { width: 47.49%; margin: 10px; }
.row > .col-7-md  { width: 55.81%;  margin: 10px; }
.row > .col-8-md  { width: 64.14%; margin: 10px; }
.row > .col-9-md  { width: 72.47%; margin: 10px; }
.row > .col-10-md { width: 80.8%;  margin: 10px; }
.row > .col-11-md { width: 89.13%; margin: 10px; }
.row > .col-12-md { width: 97.5%;  margin: 10px; }

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS (Desktop → Mobile)
   ========================================================================== */

/* For screens up to 884px, change layout to vertical stacking */
@media (max-width: 884px) {
  .hide-on-mobile {
    display: none !important;
  }
  .row,
  .row-2 {
      flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;      
      display: flex;   
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 5vh;  /* Added: container will be at least the height of the viewport */
  margin: 0 auto;       
  }
  .row > * {
    padding: 0px;
    margin: 0px;
    text-align: center;
  }
  /* For .row-2, you might choose to leave the row direction, but here we apply vertical stacking as well */
  
  .right, .left {
    float: none;
    text-align: center;
    margin: 0;
  }
  .responsive {
    width: 95%;
    margin: 0 auto;
  }
  
    
    .row > .col-1  { width: 50%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-2  { width: 50%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-3  { width: 32%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-4  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-5  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-6  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-7  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-8  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-9  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-10 { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-11 { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-12 { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  
   .row-2 > .col-1  { width: 50%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-2  { width: 50%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-3  { width: 32%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-4  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-5  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-6  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-7  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-8  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-9  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-10 { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-11 { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-12 { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  
  
}

/* For screens greater than 884px */
@media (min-width: 885px) {
  .hide-on-mobile {
    display: block !important;
    width: 100% !important;
  }
  .hide-on-desktop {
    display: none !important;
  }
  
    .row > .col-1  { width: 50%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-2  { width: 50%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-3  { width: 32%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-4  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-5  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-6  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-7  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-8  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-9  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-10 { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-11 { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-12 { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  
   .row-2 > .col-1  { width: 50%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-2  { width: 50%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-3  { width: 32%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-4  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-5  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-6  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-7  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-8  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-9  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-10 { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-11 { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-12 { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  
  
}

/* For very small screens (0px - 499px) */
/* Apply vertical stacking with explicit rules for .row */
@media all and (max-width: 499px) {
  .row {
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    align-content: center;
  }
  .row > .col-1  { width: 50%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-2  { width: 50%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-3  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-4  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-5  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-6  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-7  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-8  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-9  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-10 { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-11 { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row > .col-12 { width: 100%; padding: 5px; margin: 1px; text-align: center; }

  /* Also apply explicit stacking for .row-2 */
  .row-2 {
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    align-content: center;
  }
  .row-2 > .col-1  { width: 50%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-2  { width: 50%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-3  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-4  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-5  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-6  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-7  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-8  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-9  { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-10 { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-11 { width: 100%; padding: 5px; margin: 1px; text-align: center; }
  .row-2 > .col-12 { width: 100%; padding: 5px; margin: 1px; text-align: center; }

  .right, .left {
    float: none;
    text-align: center;
    margin: 0;
  }
  .responsive {
    width: 95%;
    margin: 0 auto;
  }
}

/* Additional responsive override for screens up to 768px */
/* Hardcoded rules for .row and .row-2 are not needed here because the max-width: 499px block already forces 100% width,
   but you may include additional adjustments if desired. */

/* Additional responsive width adjustments for .center */
@media all and (min-width: 1078px) and (max-width: 1264px) {
  .center { width: 97.5%; }
}
@media all and (min-width: 1263px) and (max-width: 1500px) {
  .center { width: 99.5%; }
}
@media all and (min-width: 1499px) {
  .center { width: 99.5%; }
}

/* ==========================================================================
   FOOTER & RELATED CLASSES
   ========================================================================== */
footer {
   
  
  min-height: 200px;
margin:0px;
  box-sizing: border-box;
}
.footer-column {
  flex: 1;
  padding: 20px;
  text-align: center;
}
.footer-column:not(:last-child) {
  margin-right: 20px;
}
@media (max-width: 768px) {
  footer {
    flex-direction: column;
    height: auto;
  }
  .footer-column {
    margin-bottom: 20px;
  }
  .footer-column:not(:last-child) {
    margin-right: 0;
  }
}

/* ==========================================================================
   POSITIONING CLASSES
   ========================================================================== */
.right {
  float: right;
  text-align: center;
  margin-left: 120px;
}
.left {
  float: left;
  text-align: center;
  margin-left: 120px;
}
.center {
  display: flex;
  flex-direction:row;
  align-items: center;
  margin:0px auto;
  text-align: center; 
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 5vh;  /* Added: container will be at least the height of the viewport */
  margin: 0 auto;
}

.fixed {
  position: fixed;
  width: 100%;
  margin: 0;
  z-index: 9;
}
.vcenter {
  display: flex;
  align-items: center;
  justify-content: center;
}
.vcenter * {
  margin: auto;
}

/* ==========================================================================
   LIST & IMAGE/MEDIA CLASSES
   ========================================================================== */
li {
  list-style-type: none;
  flex-basis: 33.33%;
}

.img-fluid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  /* Remove fixed width so the container isn't forcing images to shrink */  
  gap: 0.5rem;
}

/* Ensure that images inside .img-fluid maintain their natural proportions
   and only scale down when necessary to fit the container */
.img-fluid img {
  flex: 0 1 auto;       /* Let the image take its natural size, but shrink if needed */
  max-width: 100%;      /* Prevent the image from overflowing its container */
  height: auto;         /* Preserve aspect ratio */
  object-fit: contain;  /* Make sure the image is fully visible */
}


.left-img-adjust {
  margin-left: -1px;
}



/* ==========================================================================
   CONTAINER CLASSES
   ========================================================================== */
.container-fluid {
  padding: 0;
  margin: 0;
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
}

.container {
  margin: 0;
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
}

.p-1{
    padding:1px;
}

.p-2{
    padding:2px;
}
.p-3{
    padding:3px;
}

.p-4{
    padding:4px;
}
.p-5{ 
    padding:5px;
}

.p-6{
    padding:6px;
}

.p-7{
    padding:7px;
}

.p-8{
    padding:8px;
}
.p-9{
    padding:9px;
}

.p-10{
    padding:10px;
}

.p-11{
    padding:11px;
}

.p-12{
    padding:12px;
}

.p-15{
    padding:15px;
}

.p-20{
    padding:20px;
}

.p-25{
    padding:25px;
}

.p-30{
    padding:30px;
}

.p-35{
    padding:35px;
}

.f-10px{
    font-size:12px;
}


.f-11px{
    font-size:12px;
}

.f-12px{
    font-size:12px;
}

.f-14px{
    font-size:14px;
}

.f-18px{
    font-size:18px;
}

.f-20px{
    font-size:20px;
}

.f-30px{
    font-size:30px;
}

.f-1em{
    font-size:1em;
}

.f-2em{
    font-size:2em;
}

.f-3em{
    font-size:3em;
}

.f-4em{
    font-size:4em;
}

/* Base styling for .row with high specificity */
div.mobile-row {
  display: flex !important; /* Enforce flex display */
  flex-direction: row !important; /* Force horizontal layout */
  flex-wrap: nowrap !important; /* Prevent wrapping */
  width: 100% !important; /* Full width */
  margin: 0; /* Reset margins */
  padding: 0; /* Reset padding */
  overflow-x: auto; /* Allow horizontal scrolling */
}

  div.mobile-row  > div.col-1-mobile {
  flex: 0 0 8.2% !important; /* Fixed width, no grow/shrink */
  min-width: 8.2% !important; /* Ensure width is respected */
  padding: 10px; /* Internal spacing */
  box-sizing: border-box; /* Include padding in width */
  background-color: #f0f0f0; /* Visual feedback */
  text-align: center; /* Optional: center content */
} 


div.mobile-row  > div.col-2-mobile {
  flex: 0 0 16.59% !important; /* Fixed width, no grow/shrink */
  min-width: 16.59% !important; /* Ensure width is respected */
  padding: 10px; /* Internal spacing */
  box-sizing: border-box; /* Include padding in width */
  background-color: #f0f0f0; /* Visual feedback */
  text-align: center; /* Optional: center content */
}


/* Styling for .col-1-mobile within .row with high specificity */
div.mobile-row  > div.col-3-mobile {
  flex: 0 0 24.5% !important; /* Fixed width, no grow/shrink */
  min-width: 24.5% !important; /* Ensure width is respected */
  padding: 10px; /* Internal spacing */
  box-sizing: border-box; /* Include padding in width */
  background-color: #f0f0f0; /* Visual feedback */
  text-align: center; /* Optional: center content */
}

div.mobile-row  > div.col-4-mobile {
  flex: 0 0 32.8% !important; /* Fixed width, no grow/shrink */
  min-width: 32.8% !important; /* Ensure width is respected */
  padding: 10px; /* Internal spacing */
  box-sizing: border-box; /* Include padding in width */   
  text-align: center; /* Optional: center content */
}


div.mobile-row  > div.col-5-mobile {
  flex: 0 0 41.0% !important; /* Fixed width, no grow/shrink */
  min-width: 41.0% !important; /* Ensure width is respected */
  padding: 10px; /* Internal spacing */
  box-sizing: border-box; /* Include padding in width */   
  text-align: center; /* Optional: center content */
}



/* Styling for .col-1-mobile within .row with high specificity */
div.mobile-row  > div.col-6-mobile {
  flex: 0 0 49.2% !important; /* Fixed width, no grow/shrink */
  min-width: 49.2% !important; /* Ensure width is respected */
  padding: 10px; /* Internal spacing */
  box-sizing: border-box; /* Include padding in width */
  background-color: #f0f0f0; /* Visual feedback */
  text-align: center; /* Optional: center content */
}

/* Styling for .col-1-mobile within .row with high specificity */
div.mobile-row  > div.col-7-mobile {
  flex: 0 0 57.4% !important; /* Fixed width, no grow/shrink */
  min-width: 57.4% !important; /* Ensure width is respected */
  padding: 10px; /* Internal spacing */
  box-sizing: border-box; /* Include padding in width */
  background-color: #f0f0f0; /* Visual feedback */
  text-align: center; /* Optional: center content */
}

/* Styling for .col-1-mobile within .row with high specificity */
div.mobile-row  > div.col-8-mobile {
  flex: 0 0 65.6% !important; /* Fixed width, no grow/shrink */
  min-width: 65.6% !important; /* Ensure width is respected */
  padding: 10px; /* Internal spacing */
  box-sizing: border-box; /* Include padding in width */
  background-color: #f0f0f0; /* Visual feedback */
  text-align: center; /* Optional: center content */
}

div.mobile-row  > div.col-9-mobile {
  flex: 0 0 73.8% !important; /* Fixed width, no grow/shrink */
  min-width: 73.8% !important; /* Ensure width is respected */
  padding: 10px; /* Internal spacing */
  box-sizing: border-box; /* Include padding in width */
  background-color: #f0f0f0; /* Visual feedback */
  text-align: center; /* Optional: center content */
}


div.mobile-row  > div.col-10-mobile {
  flex: 0 0 82.00% !important; /* Fixed width, no grow/shrink */
  min-width: 82.00% !important; /* Ensure width is respected */
  padding: 10px; /* Internal spacing */
  box-sizing: border-box; /* Include padding in width */
  background-color: #f0f0f0; /* Visual feedback */
  text-align: center; /* Optional: center content */
}

div.mobile-row  > div.col-11-mobile {
  flex: 0 0 90.2% !important; /* Fixed width, no grow/shrink */
  min-width: 90.2% !important; /* Ensure width is respected */
  padding: 10px; /* Internal spacing */
  box-sizing: border-box; /* Include padding in width */
  background-color: #f0f0f0; /* Visual feedback */
  text-align: center; /* Optional: center content */
}

div.mobile-row  > div.col-12-mobile {
  flex: 0 0 98.5% !important; /* Fixed width, no grow/shrink */
  min-width: 98.5% !important; /* Ensure width is respected */
  padding: 10px; /* Internal spacing */
  box-sizing: border-box; /* Include padding in width */
  background-color: #f0f0f0; /* Visual feedback */
  text-align: center; /* Optional: center content */
}


/* Maintain side-by-side layout on mobile with high specificity */
@media (max-width: 767px) {
    

  div.mobile-row  > div.col-1-mobile {
  flex: 0 0 8.2% !important; /* Fixed width, no grow/shrink */
  min-width: 8.2% !important; /* Ensure width is respected */
  padding: 10px; /* Internal spacing */
  box-sizing: border-box; /* Include padding in width */
  background-color: #f0f0f0; /* Visual feedback */
  text-align: center; /* Optional: center content */
} 


div.mobile-row  > div.col-2-mobile {
  flex: 0 0 16.59% !important; /* Fixed width, no grow/shrink */
  min-width: 16.59% !important; /* Ensure width is respected */
  padding: 10px; /* Internal spacing */
  box-sizing: border-box; /* Include padding in width */
  background-color: #f0f0f0; /* Visual feedback */
  text-align: center; /* Optional: center content */
}


/* Styling for .col-1-mobile within .row with high specificity */
div.mobile-row  > div.col-3-mobile {
  flex: 0 0 24.5% !important; /* Fixed width, no grow/shrink */
  min-width: 24.5% !important; /* Ensure width is respected */
  padding: 10px; /* Internal spacing */
  box-sizing: border-box; /* Include padding in width */
  background-color: #f0f0f0; /* Visual feedback */
  text-align: center; /* Optional: center content */
}

div.mobile-row  > div.col-4-mobile {
  flex: 0 0 32.8% !important; /* Fixed width, no grow/shrink */
  min-width: 32.8% !important; /* Ensure width is respected */
  padding: 10px; /* Internal spacing */
  box-sizing: border-box; /* Include padding in width */   
  text-align: center; /* Optional: center content */
}


div.mobile-row  > div.col-5-mobile {
  flex: 0 0 41.0% !important; /* Fixed width, no grow/shrink */
  min-width: 41.0% !important; /* Ensure width is respected */
  padding: 10px; /* Internal spacing */
  box-sizing: border-box; /* Include padding in width */   
  text-align: center; /* Optional: center content */
}



/* Styling for .col-1-mobile within .row with high specificity */
div.mobile-row  > div.col-6-mobile {
  flex: 0 0 49.2% !important; /* Fixed width, no grow/shrink */
  min-width: 49.2% !important; /* Ensure width is respected */
  padding: 10px; /* Internal spacing */
  box-sizing: border-box; /* Include padding in width */
  background-color: #f0f0f0; /* Visual feedback */
  text-align: center; /* Optional: center content */
}

/* Styling for .col-1-mobile within .row with high specificity */
div.mobile-row  > div.col-7-mobile {
  flex: 0 0 57.4% !important; /* Fixed width, no grow/shrink */
  min-width: 57.4% !important; /* Ensure width is respected */
  padding: 10px; /* Internal spacing */
  box-sizing: border-box; /* Include padding in width */
  background-color: #f0f0f0; /* Visual feedback */
  text-align: center; /* Optional: center content */
}

/* Styling for .col-1-mobile within .row with high specificity */
div.mobile-row  > div.col-8-mobile {
  flex: 0 0 65.6% !important; /* Fixed width, no grow/shrink */
  min-width: 65.6% !important; /* Ensure width is respected */
  padding: 10px; /* Internal spacing */
  box-sizing: border-box; /* Include padding in width */
  background-color: #f0f0f0; /* Visual feedback */
  text-align: center; /* Optional: center content */
}

div.mobile-row  > div.col-9-mobile {
  flex: 0 0 73.8% !important; /* Fixed width, no grow/shrink */
  min-width: 73.8% !important; /* Ensure width is respected */
  padding: 10px; /* Internal spacing */
  box-sizing: border-box; /* Include padding in width */
  background-color: #f0f0f0; /* Visual feedback */
  text-align: center; /* Optional: center content */
}


div.mobile-row  > div.col-10-mobile {
  flex: 0 0 82.00% !important; /* Fixed width, no grow/shrink */
  min-width: 82.00% !important; /* Ensure width is respected */
  padding: 10px; /* Internal spacing */
  box-sizing: border-box; /* Include padding in width */
  background-color: #f0f0f0; /* Visual feedback */
  text-align: center; /* Optional: center content */
}

div.mobile-row  > div.col-11-mobile {
  flex: 0 0 90.2% !important; /* Fixed width, no grow/shrink */
  min-width: 90.2% !important; /* Ensure width is respected */
  padding: 10px; /* Internal spacing */
  box-sizing: border-box; /* Include padding in width */
  background-color: #f0f0f0; /* Visual feedback */
  text-align: center; /* Optional: center content */
}

div.mobile-row  > div.col-12-mobile {
  flex: 0 0 98.5% !important; /* Fixed width, no grow/shrink */
  min-width: 98.5% !important; /* Ensure width is respected */
  padding: 10px; /* Internal spacing */
  box-sizing: border-box; /* Include padding in width */
  background-color: #f0f0f0; /* Visual feedback */
  text-align: center; /* Optional: center content */
}




  
}