/**********************************************
 * 1. CSS Variables
 **********************************************/
:root {
    /* #FF6347 Tomato red color */
    /* #81C784  Light, soft green */
    /* #FBC02D  Warm golden yellow */
    --base-green: #4CAF50; /* a vibrant green */
    --hover-green: #45a049; /* Slightly darker green */
    --active-green: #388E3C; /* Even darker green */
    
    --table-today-color: #FF6347; /* Bright red-orange (Tomato color) */
    
    --combined-div-background-color: #f0f0f0;
    --alt1-combined-div-background-color: #f0fff0; /*(Lightest green, almost minty)*/
    --alt2-combined-div-background-color: #e6ffe6; /* (Soft light green)*/
    --alt3-combined-div-background-color: #ccffcc; /*(Light green, a little darker than #e6ffe6)*/
    --alt4-combined-div-background-color: #C8E6C9; /* (A more subdued light green)*/
    --alt5-combined-div-background-color: #81C784; /*(Darker, more saturated green)*/
    --alt6-combined-div-background-color: #FFDAB3; /* mild orange */
    --alt7-combined-div-background-color: #e0e0e0;/*This is a light gray that is slightly darker than #f0f0f0 but still remains very subtle and soft.*/
    --section-divider-color: #ccc; /* This is a light gray color. */
    
    --footer-background-color: var(--base-green);
    --footer-text-color: white;
    --hyperlink-text-color: var(--base-green);
    --hyperlink-hover-color: var(--active-green);
    --footnote-text-color: #555; /* The color #555 is a medium dark gray. It’s shorthand for #555555, where the red, green, and blue components are all set to 85 (on a scale of 0 to 255). */
    
    --buttontextcombo-text-color: black;
    --button-background-color: var(--base-green);
    --button-text-color: white;
    --button-hover-color: var(--hover-green);
    --button-active-color: var(--active-green);
    --disabledbutton-background-color: #d3d3d3; /* Light gray background for disabled buttons */
    --disabledbutton-text-color: #a9a9a9; /* Darker gray text for disabled buttons */
    --disabledbutton-hover-color: #bbbbbb; /* Slightly darker gray on hover for disabled buttons */
    
    --textonlyslide-text-color: #333; /* Dark text */
    --textonlyslide-background-color:#e0e0e0; /* #cfcfcf;*/
    --swiper-buttons-color: white;
    
    --photogallery-img-background-color: transparent;
    --photogallery-figcaption-text-color: #333; /* Very dark gray (close to black) */
    
    --customtable-background-color: #fff;
    --customtable-border-color: #ddd;
    --customtable-text-color: #333;/*The color #333 is a very dark gray*/
    --customtable-tableheader-background-color: var(--base-green);
    --customtable-tableheader-text-color: #fff; /* White  */
    --customtable-tableheader-border-color: #ddd;
    --customtable-tabledata-border-color: #ccc;
    --customtable-tablerow-background-color: #f2f2f2;
    --customtable-tablerow-hover-color: #f1f1f1;
    --customtable-hyperlink-text-color: var(--base-green);
    --customtable-hyperlink-hover-color: var(--active-green);
    --customtable-centrenametext-color: var(--base-green);
    
    --headermenu-background-color: var(--base-green);
    --headermenu-hover-color: var(--hover-green);
    --headermenu-active-color: var(--active-green);
    --headermenu-text-color: #FFFFFF;
    --headermenu-border-color: #FFFFFF;
    
    --videogallery-text-color: #333;
}

/* Apply box-sizing to make padding and border included in the width calculation */
* {
    box-sizing: border-box;
}

/* Set a consistent font size for all text */
body {
    background: #1e1e1e !important;
    font-size: 18px; /* or your previous font size */
    margin: 0; /* Ensure no unexpected margins */
    padding: 0; /* Prevent extra padding */
    width: 100%; /* Ensure body spans full width */
    max-width: 100%; /* Prevent body from exceeding screen width */
    font-family: 'Roboto', Arial, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100%;  /* Ensures it takes up full height */
    height: 100%;  /* Ensures full height */
    overflow-anchor: none;
}

html {
  /*  -webkit-text-size-adjust: 100%;  Ensures text doesn't resize inconsistently */
    width: 100%; /* Ensures full width */
    max-width: 100%; /* Prevents the page from exceeding screen width */
    height: 100%;  /* Ensures full height */
    margin: 0; /* Ensure no unexpected margins */
    padding: 0; /* Prevent extra padding */
} 

/* -------------------------------------------------------------------------- */
/* --------------------------- BASIC STYLES --------------------------------- */
/* -------------------------------------------------------------------------- */

.my-combined-div {
    max-width: 980px;/* Ensures it doesn't exceed 980px */
    width: 100%;  /* Flexible for smaller screens */
    margin: 0px auto 0; /* Centers it and adds a top margin (20px from the inform div) */
    background-color: var(--combined-div-background-color);      /*; Gray background */
    padding: 0px;                /* Inner spacing */
    position: relative;           /* Normal document flow */
    transform: none !important;   /* Prevents unwanted scaling */
    font-family: Arial, sans-serif;  /* Sets the desired font */
    flex: 1;           /* Make sure it grows and takes available space */
}

/* Divider style between sections */
.section-divider {
  border: none;
  border-top: 2px solid var(--section-divider-color); 
  margin: 30px auto; /* Offset the 20px padding on each side */
  width: 100%; /* Increase width to compensate for negative margins */
}

.footer {
  background-color: var(--footer-background-color);
  height: 35px;
  font: bold 13px Arial, Helvetica, sans-serif;
  color: var(--footer-text-color); 
  line-height: 35px; 
  margin: 0 auto;
  width: 980px;
  text-align: center;
}

/* General style for all hyperlinks */
a {
    color: var(--hyperlink-text-color);    /* Set text color */
    text-decoration: none;          /* Remove underline */
    font-weight: bold;              /* Make text bold */
}

/* Optional: Add a hover effect to change color when the link is hovered */
a:hover {
    color: var(--hyperlink-hover-color);  /* Change color on hover */
    text-decoration: underline;     /* Add underline on hover */
    cursor: pointer;
}

em, i {
  font-style: italic;
}

.titles-text {
    text-align: center;
    font-size: 18px; /* Adjust as needed */
    text-shadow: none; /* Remove any shadow effect */
}

h1{
    text-align: center;
    font-size: 18px; /* Adjust as needed */
    text-shadow: none; /* Remove any shadow effect */
    font-weight: bold;
}
h2{
    text-align: center;
    font-size: 16px; /* Adjust as needed */
    font-weight: bold;
    text-shadow: none; /* Remove any shadow effect */
}


.indented-text {
    padding-left: 30px; /* Indentation */
    padding-right: 30px; /* Ensure balance */
    font-size: 16px; /* Consistent font size */
    text-align: justify; /* Centers text */
    display: block; /* Ensures it behaves like a block for centering */
    margin: 0 auto; /* Centers the block */
    max-width: 100%; /* Controls width for better alignment */
    line-height: 1.6;
}

p {
    padding-left: 40px; /* Indentation */
    padding-right: 40px; /* Ensure balance */
    font-size: 16px; /* Consistent font size */
    text-align: justify; /* Centers text */
    /*display: block;  Ensures it behaves like a block for centering */
    margin: 0 auto; /* Centers the block */
    max-width: 100%; /* Controls width for better alignment */
    line-height: 1.6;
}

ol {
    padding-left: 70px; /* Indentation */
    padding-right: 70px; /*  Ensure balance */
     font-size: 16px; /* Consistent font size */
     text-align: justify; /* Centers text */
    /* display: block;  Ensures it behaves like a block for centering */
     margin: 0 auto; /* Centers the block */
     max-width: 100%; /* Controls width for better alignment */
     line-height: 1.6;
 }
 
ol li {
   /* padding-left: 30px;  Indentation */
   /* padding-right: 30px;  Ensure balance */
   /* font-size: 16px;   Consistent font size */
   list-style: decimal;  
   /* text-align: justify;  Centers text */
   /*display:block;   Ensures it behaves like a block for centering */
   /*  margin: 0 auto; Centers the block */
   /*  max-width: 100%; Controls width for better alignment 
    line-height: 1.6;*/
}

dl {
    width: 80%;
    margin: 0 auto; /* Centers the block */
    font-size: 16px; /* Consistent font size */
    text-align: justify; /* Centers text */
    max-width: 90%; /* Controls width for better alignment */
    line-height: 1.6;
}

dl dt {
    font-weight:bold;
}
dl dd {
    margin-left: 30px;
    margin-top: 10px;
}

/* Footnote styling */
.footnote-text {
    text-align: center;
    width: 100%; /* Ensures it spans full width */
    font-size: 14px;
    color: var(--footnote-text-color); 
    margin-top: 10px;
    font-style: italic;
    display: block; /* Not needed for <p>, but safe */
}

.image-banner {
  width: 100%; /* Makes the div take up full width of the container */
  max-width: 980px; /* Ensures the image doesn't stretch beyond 980px */
  margin: 0 auto; /* Centers the div horizontally */
}

.image-banner img {
  width: 100%; /* Makes the image responsive */
  height: auto; /* Maintains the aspect ratio of the image */
}

/* -------------------------------------------------------------------------- */
/* ------------------------- NAVIGATION BUTTONS ----------------------------- */
/* -------------------------------------------------------------------------- */

/* Buttons*/
.nav-buttons-hor {
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 60px; /* Space between the buttons */
    margin-top: 20px;
    padding: 0 10%; /* Add padding to the left and right edge of the page */
}

.nav-buttons-hor a {
    text-decoration: none;
}

.nav-buttons-ver {
    display: flex;
    flex-direction: column;  /* Stack buttons vertically */
    align-items: flex-start;     /* Center them horizontally */
    gap: 30px;               /* Space between the buttons */
    margin-top: 0px;
    padding: 0 0%; /* Add padding to the left and right edge of the page */
}
.nav-buttons-ver a {
    text-decoration: none;
}

.buttontextcombo {
    display: flex;            /* Align button and description side by side */
    align-items: center;      /* Vertically center both button and text */
    gap: 10px;                /* Space between the button and description */
}

.buttontextcombo .button {
    margin-right: 10px;       /* Add a little space between the button and description */
    width: 250px;             /* Set a fixed width for all buttons */
}

.buttontextcombo-descriptiontext {
    font-size: 16px;          /* Adjust font size for description */
    color: var(--buttontextcombo-text-color); /* Set a color for the description text */
    max-width: 400px;         /* Limit description width */
    margin-left: 10px;        /* Ensure it aligns after the button */
    font-family: 'Roboto', Arial, sans-serif;
    text-align: center;
}

    /* Basic styling for the button */
    .button {
        padding: 15px 30px;
        background-color: var(--button-background-color); /* Default button color */
        color: var(--button-text-color);
        font-size: 19px;
        border: 2px solid transparent; /* No border initially */
        border-radius: 5px; /* Rounded corners */
        cursor: pointer;
        text-align: center;
        transition: background-color 0.3s ease;
        min-width: 175px; /* Ensure the button has enough width */
        min-height: 65px; /* Ensure the button has enough height */
        height: auto; /* Allow the button height to grow as needed */
        line-height: 1.5; /* Controls spacing between wrapped lines of text */
        display: flex;
        align-items: center; /* Vertically center the text */
        justify-content: center; /* Horizontally center the text */
        word-wrap: break-word; /* Allows text to break and wrap inside the button */
        overflow: hidden; /* Prevents any overflow from showing */
    }

    .button:hover {
        background-color: var(--button-hover-color); /* Darker shade of green on hover */
    }
    
    /* Prevent border issues on focus and active states */
    .button:focus,
    .button:active {
        outline: none; /* Remove default outline */
        box-shadow: none; /* Ensure no shadow appears */
        background-color: var(--button-active-color) !important; /* Darker green */ 
    }
    
    /* Highlighted button style for the active page */
    .button.active {
        background-color: var(--button-active-color) !important; /* Darker green */ 
        border: 2px solid transparent;
    }

/* ---- special sytles needed for the buttons on Basic Course Notes page -----*/
  /* Style for the grayed-out disabled input button */
  .button[disabled] {
    background-color: var(--disabledbutton-background-color); /* Gray background */
    color: var(--disabledbutton-text-color); /* Lighter gray text */
    cursor: not-allowed; /* Change the cursor to indicate the button is disabled */
  }

  /* Disable hover effect when disabled - No hover styles should apply */
  .button[disabled]:hover {
    background-color: var(--disabledbutton-hover-color); /* Keep the background gray when hovered */
    color: var(--disabledbutton-text-color); /* Keep the text color gray */
  }
 
/* -------------------------------------------------------------------------- */
/* -------------- LEFTRIGHT CONTAINER and SLIDESHOW ------------------------- */
/* -------------------------------------------------------------------------- */

  /* Flex container for left and right content */
  .left-right-container {
    display: flex;
    width: 100%;
    box-sizing: border-box; /* Includes padding/border in width calculation */
    margin: 0 auto;
    overflow: hidden;
    flex-wrap: nowrap; /* Prevent wrapping of containers */
    /* height: 276px;  Fixed height */
  }

.left-container {
    flex: 0 0 290px; /* Fixed width */
    padding-right: 0px; /* Optional padding between sections */
    display: flex; /* Allows child alignment */
    align-items: center; /* Centers vertically */
    justify-content: center; /* Centers horizontally */
    flex-direction: column;  /* Stack buttons vertically */
}
  
  /* Make images inside the left section cover the space */
  .left-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills its container without stretching */
    display: block; /* Prevents any extra space below the image */
  }
  
/* Right section container */
.right-container {
    display: flex; /* Enable flexbox */
    flex-direction: column; /* Stack content vertically */
    justify-content: center; /* Center text horizontally */
    align-items: center; /* Center text vertically */
    flex: 1; /* Takes remaining space */
    padding-left: 0px; /* Optional padding between sections */
    overflow: hidden;
    position: relative; /* Required for absolute positioning of arrows */
    height: 100%; /* Ensures the container takes full height if the parent container has height */
    width: 100%;  /* Explicitly define the width */
}

/* Styling for Slide with Only Text */
.textonlyslide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* Full slide height */
  width: 100%; /* Allow width to adjust to the content */
  text-align: center;
  background: var(--textonlyslide-background-color);
  color: var(--textonlyslide-text-color); 
  font-family: "Marck Script", cursive; /* Flowery font */
  font-size: 32px;
  font-weight: bold;
  padding: 20px;
  margin: 0 auto; /* Center horizontally */
  box-sizing: border-box; /* Include padding in the width calculation */
}

  /* Slider container for the swiper */
  .swiper-container {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    width: 100%;
    height: 100%;
  }

  .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Navigation arrows positioned within the right-container */
  .swiper-button-next,
  .swiper-button-prev {
    color: var(--swiper-buttons-color);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
  }

  .swiper-button-next {
    right: 10px;
    cursor: pointer;
  }

  .swiper-button-prev {
    left: 10px;
    cursor: pointer;
  }

/* -------------------------------------------------------------------------- */
/* ------------------------- PHOTO GALLERY ---------------------------------- */
/* -------------------------------------------------------------------------- */

    /* Gallery grid container */
    .photogallery {
      max-width: 85%;
      margin: 20px auto;
      display: grid;
      /* Each image (or figure) gets at least 175px, adjust gap as needed */
      grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
      gap: 16px;
      text-align: center;
      font-family: Arial, sans-serif;
    }

    .photogallery figure {
      margin: 0;
    }

    .photogallery img {
      width: 175px;
      height: 131px;
      object-fit: contain; /* Preserves aspect ratio, showing full image */
      background-color: var(--photogallery-img-background-color); /* Ensures any letterboxed areas are transparent */
  /*  border: 1px solid #ddd;     Your existing border style */
      border: none;
      display: block;
      margin: 0 auto;
    }

    .photogallery figcaption {
      margin-top: 5px;
      font-size: 14px;
      color: var(--photogallery-figcaption-text-color);
      line-height: 1.2;
    }

/* -------------------------------------------------------------------------- */
/* ------------------------- COURSE TABLE ----------------------------------- */
/* -------------------------------------------------------------------------- */

/* General Table Styling */
.customtable {
    max-width: 100%; /* Limit the table's maximum width */
    width: 95%;
    margin: 20px auto 30px;
    border-collapse: collapse;
    border: 1px solid var(--customtable-border-color);
    background-color: var(--customtable-background-color);
    color: var(--customtable-text-color); /*text color*/
    text-align: center;
    font-family: Arial, sans-serif;
    overflow-x: auto; /* Allow horizontal scrolling if necessary */
   /* display: block;  Makes the table scrollable */
}

    /* Table Headers */
    .customtable th {
        background-color: var(--customtable-tableheader-background-color); 
        color: var(--customtable-tableheader-text-color);
        padding: 12px;
        text-transform: none; /* No all caps */
        letter-spacing: 0;
        border: 1px solid var(--customtable-tableheader-border-color);
    }
/*By default, table headers (<th>) have a larger font size than table data cells (<td>) in most browsers. This is the standard styling behavior, which is why your header fonts are larger even though you haven't explicitly set a font-size for them.*/

    /* Table Data Cells */
    .customtable td {
        padding: 12px;
        font-size: 14px;
        border: 1px solid var(--customtable-tabledata-border-color);
        vertical-align: middle;
    }

    /* Alternating Row Colors */
    .customtable tr:nth-child(even) {
        background-color: var(--customtable-tablerow-background-color)
    }

    /* Hover Effect for Rows */
    .customtable tr:hover {
        background-color: var(--customtable-tablerow-hover-color);
    }

    /* Links inside table */
    .customtable a {
        color: var(--customtable-hyperlink-text-color);
        text-decoration: none;
        font-weight: bold;
    }

    /* Links hover effect */
    .customtable a:hover {
        text-decoration: underline;
        color: --customtable-hyperlink-hover-color;
    }


/* Specific styles for all COURSE CENTRES tables */
.customtable-centres {
    table-layout: fixed; /* Forces columns to follow the set widths */
    width: 95%;
    border-collapse: collapse;
}
.customtable-centres th,
.customtable-centres td {
    padding: 8px;
    text-align: center;
    word-wrap: break-word; /* Ensures long content wraps */
}
/* Styling for Centre Column text */
.customtable-centres .centrename {
    font-weight: bold;
    color: var(--customtable-centrenametext-color); /* Same green as button */
}

/* Specific styles for the INTERMEDIATE ASSESSMENT table */
.customtable-inttest {
    width: 48%;
}
/* Keep the first column centered */
.customtable-inttest th:nth-child(1),
.customtable-inttest td:nth-child(1) {
    text-align: center;
}
/* Apply left alignment to the second and third columns */
.customtable-inttest th:nth-child(2),
.customtable-inttest td:nth-child(2) {
    text-align: left;
}


/* Specific styles for the INTERMEDIATE/BASIC COURSE CONTENTS table */
/* Keep the first column centered */
.customtable-contents th:nth-child(1),
.customtable-contents td:nth-child(1) {
    text-align: center;
}
/* Apply left alignment to the second and third columns */
.customtable-contents th:nth-child(2),
.customtable-contents td:nth-child(2),
.customtable-contents th:nth-child(3),
.customtable-contents td:nth-child(3) {
    text-align: left;
}
.customtable-contents {
    width: 80% !important;
}

/* -------------------------------------------------------------------------- */
/* ----------------------------- HEADER MENU -------------------------------- */
/* -------------------------------------------------------------------------- */

/**********************************************
 *1. Navigation Menu Base Styles
 **********************************************/
 /*General base styles for the navigation container (.headernavmenu) — Defines the main container for the navigation menu.*/
.headernavmenu {
    width: 980px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    float: left;
    z-index: 1000; /* Add z-index to ensure the navigation stays on top */
    background-color: var(--headermenu-background-color);
    height: 30px;
}

/* Styles for the unordered list (ul) — Handles the basic styling of the list itself (removes padding, sets the list style, etc.). */
.headernavmenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline;
    color: var(--headermenu-text-color);
}

/* Styles for list items (ul li) — Sets basic styles for each menu item (like float, position, etc.). */
.headernavmenu ul li {
    float: left;
    position: relative;
    padding-bottom: 0;
}

/**********************************************
 * 2. Navigation Link Styles
 * (Consolidated common styles for main and submenu links)
 **********************************************/
 /* Styles for top-level navigation links (ul li a) — Styles the main navigation links, including hover, active, and selected states. */
.headernavmenu ul li a {
    font: bold 14px Verdana, Arial, Helvetica, sans-serif;
    display: block;
    color: var(--headermenu-text-color);
    text-decoration: none;
    text-align: center;
    padding: 0 15px;
    height: 30px;
    line-height: 30px;
    background-color: var(--headermenu-background-color);
    border-right: 1px solid var(--headermenu-border-color);
}

.headernavmenu ul li a:hover {
    cursor: pointer;
    background-color: var(--headermenu-hover-color);
}

.headernavmenu ul li a:active,
.headernavmenu ul li.selected a {
    background-color: var(--headermenu-active-color) !important;
    color: var(--headermenu-text-color);
}

.headernavmenu ul li a.current {
    background-color: var(--headermenu-active-color) !important;
    color: var(--headermenu-text-color);
}

/**********************************************
 * 3. Dropdown Menu Styles
 **********************************************/
 /* Styles for the dropdown menu container (ul li ul) — Handles the dropdown menu’s visibility, transition, and positioning. */
.headernavmenu ul li ul {
    display: block; /* Override inherited display: inline */
    position: absolute;
    visibility: hidden;
    opacity: 0;
    background-color: var(--headermenu-background-color);
    border-radius: 3px;
    width: 170px;
    transition: opacity 0.3s ease-in-out;
    z-index: 9999; /* Add z-index to make sure dropdowns are on top of other content */
}

.headernavmenu ul li:hover ul {
    visibility: visible;
    opacity: 1;
}

/* Styles for dropdown list items (ul li ul li) — Specifies the styles for the dropdown items. */
.headernavmenu ul li ul li {
    display: block;
    list-style: none;
    margin: 0;
    float: left;
    padding: 3px 0px 3px 0px;
}

/* Styles for dropdown links (ul li ul li a) — Handles the specific styles for the links inside the dropdown, including hover and active states. */
.headernavmenu ul li ul li a {
    font: bold 13px Verdana, Arial, Helvetica, sans-serif;
    display: block;
    color: var(--headermenu-text-color);
    text-decoration: none;
    text-align: left; /* Align text to the left for dropdowns */
    padding: 0px 10px;
    height: 30px;
    line-height: 30px;
    background-color: var(--headermenu-background-color);
    border-right: 1px solid var(--headermneu-border-color);
    border-radius: 3px;
    border: none;
    width: 170px;
    margin: 0;
    font-size: 14px;
}

.headernavmenu ul li ul li a:hover {
    background-color: var(--headermenu-hover-color) !important;
}

.headernavmenu ul li:hover {
    background-color: var(--headermenu-hover-color);
    color: var(--headermenu-text-color);
}

.headernavmenu ul li ul li a:active {
    background-color: var(--headermenu-active-color);
}

/* -------------------------------------------------------------------------- */
/* ------------------------- VIDEO GALLERY ---------------------------------- */
/* -------------------------------------------------------------------------- */

/* Video Gallery Grid */
.video-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px;
}

/* Each Video Item */
.video-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Responsive 4:3 Video Wrapper */
.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 75%; /* 4:3 Aspect Ratio */
  height: 0;
  overflow: hidden;
  background: black;
  border-radius: 10px;
  cursor: pointer;
}

/* YouTube Thumbnail Full Width */
.video-wrapper img.video-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Play Button using YouTube's Red & White Icon */
.play-button {
  position: absolute;
 /* top: 50%;
  left: 50%; */
  /* transform: translate(-50%, -50%); this centers the play button*/
  bottom: 13px; /*  Moves it 10px from the bottom of the parent */
  left: 13px;  /* Moves it 10px from the left of the parent */
  width: 68px;  /* Adjust size as needed */
  height: 48px; /* Set a fixed height */
  pointer-events: none; /* Ensures it doesn’t interfere with clicks */
}

/* Video Title Styling */
.video-title {
  font-size: 14px;
  font-weight: 600;
  margin-top: 8px;
  color: var(--videogallery-text-color);
}

/* Ensure iframe fills the wrapper */
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    
    body {
        font-size: 20px; /* Increase body text size */
    }
    .titles-text {
        color: red !important; /* Text turns red if media query works */
    }
    .customtable, .nav-buttons-hor button {
        font-size: 20px; /* Make table & button text bigger */
    }
}