.course-dates .spaces {}/* General Body and Typography */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
    margin: 0;
    padding: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
    font-size: 18px; 
    color: #53555c;
}

.logo {
    max-width: 300px;
}

h1, h2, h3, h4, h5 {
    font-size: 35px;
    margin: auto;
    padding: initial;
    font-weight: normal;
}

a {
    color: #006699;
    text-shadow: 0 0 1px #0d0d0d7a;
    text-decoration: underline;
}

/* Active State */
.active {
    border-bottom: 10px solid #afdcb7 !important;
}

/* Info Section */
#infoot {
    max-width: 98%;
    margin: auto;
}

#infoot pre {
 
}

/* Footer */
#footer {
    padding-top: 50px;
    color: #fff;
    z-index: 99;
    font-size: 14px;
    background: #2c2d2f;
}

#footer a {
    color: white;
}

/* Top Bar */
#topBar {
    width: 100%;
    background-color: #394f59;
    z-index: 10001;
    box-shadow: -1px 10px 28px -1px rgb(0 0 0 / 25%);
}

#banner {
    padding: 15px;
    margin: auto;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
}

div#topSocials {
    color: white;
    text-decoration: none;
    text-align: right;
}

div#topSocials a {
                 color: #afdcb7;
                 text-decoration:none;
                 }

/* Three Footer Section */
#threeFooter {
    text-align: center;
    margin: auto;
    max-width: 1200px;
}

#threeFooter div {
    width: 31%;
    overflow: hidden;
    padding-bottom: 17px;
    margin-bottom: 15px;
    display: inline-block;
    vertical-align: top;
    z-index: 100;
    position: relative;
}

#threeFooter h3 {
    color: #ffffff;
    text-transform: capitalize;
}

#threeFooter div:first-child {
    margin-left: 0 !important;
    text-align: left;
    float: left;
}

#threeFooter div:last-child {
    margin-right: 0 !important;
    float: right;
    text-align: right;
}

#threeFooter ul {
    list-style: none;
    padding: 0;
}

#threeFooter li a {
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #585d69;
    padding: 7px;
    font-size: 12px;
    padding-right: 20px;
    text-transform: lowercase;
}

/* Misc Layout */
.textBoxes {
    position: relative;
    margin: auto;
    background: #fff;
}

.readingBit {
    padding-top: 0px;
    display: flow-root;
    margin: auto;
    margin-top: -1px;
}

/* Flexbox Utility */

.setStyle > div {
    max-width: 1100px;
    text-align: center;
    /* align-items: center; */
    justify-content: center;
    margin: auto;
    flex: 1;
    display: flex;
    padding-top: 30px;
    padding-bottom: 30px;
}

.setStyle > div > div {
    display: inline-block;
    /* vertical-align: middle; */
    text-align: left;
    padding: 1%;
    box-sizing: border-box;
    flex: 1;
}
 div#bread {
    background: #efefef;
    padding: 10px;
}
/*BLog Section */

main.news {
    width: 100%;
    margin: auto;
}

.news section {
    border: 1px solid #d7d7d7;
    padding: 10px;
    border-radius: 5px;
    width: 100%;
    text-align: left;
    content-visibility: auto;
    margin-bottom: 20px;
}

img.blogIcon {
    float: left;
    margin-right: 30px;
    max-width: 200px;
}

#galBoxes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    max-width: 1200px;
    margin: auto;
}

#galBoxes div {
    flex: 1 1 calc(20% - 10px); /* Adjust to control how many items per row */
    max-width: calc(20% - 10px);
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    transition: transform 0.3s ease;
}

#galBoxes img {
    width: 100%;
    height: 180px; /* Adjust height as needed */
    object-fit: cover;
    transition: transform 0.3s ease;
    border-radius: 6px;
}

#galBoxes div:hover {
    transform: translateY(-5px);
}

#galBoxes div:hover img {
    transform: scale(1.1);
}

/* subenus */

 
.setStyle.subMenu {
    padding-bottom: 120px;
    text-align: center;
}

.setStyle.subMenu h2 {
    font-size: 25px;
    text-shadow: none;
}

.subMenu {
}
.subMenu .delement {
    max-width: 1600px;
}

.subMenu .delement > div {
    max-width: 1200px;
    margin: 12px;
    flex: 0 1 calc(31.333% - 24px); /* 3 per row, minus gap */
    box-sizing: border-box;
    border: 1px solid #c9c4c4;
    background: white;
    /* overflow: hidden; */
    padding: 0;
    position: relative;
}

.subMenu img {
    width: 100%;
    clear: both;
    margin: auto;
    display: block;
}

.subMenu .delement > div a {
    text-decoration: none;
    font-size: 27px;
    font-weight: bold;
    color: black;
    text-align: center;
}
.subMenu .delement {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* gap: 20px; */
    max-width: 1600px;
    margin: 0 auto;
}

 .showSub p {
    color: white;
    font-size: 17px;
}
 
.showSub div div {
     position: absolute;
     display: flex;
     align-items: center;   /* vertical centre */
     justify-content: center; /* optional: horizontal centre */
     width: 100%;
     bottom: 0px;
     background: #394f59;
}
/* tabs */

div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    text-align: center;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    /* float: left; */
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    /* border: 1px solid #ccc; */
    border-top: none;
}

.tabcontent {
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
    max-width: 1200px;
    margin: auto;
    text-align: left;
    border: 1px solid rgb(209 209 209 / 43%);
    margin-top: 30px;
}

/* end tabs */

.setStyle.intro {
    background: #aedbb7;
    margin-top: -5px;
}

.setStyle.intro > div {padding:30px;box-sizing: content-box;}

.intro .delement {
  display: flex;
  /* align-items: flex-start; */   /* keeps text + slider aligned top */
  gap: 20px;                 /* breathing space between them */
}

.intro .delement > div:last-child {
  flex: 0 0 auto;            /* don’t let it stretch */
  max-width: 519px;          /* adjust to taste */
  width: 100%;               /* allow it to shrink under max-width */
}

.intro .featured-slider {
  width: 100%;
  min-height: 250px;         /* reserve vertical space */
  background: #fff;          /* keeps it neat until slider loads */
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 10px;
  box-sizing: border-box;
}

video#bgvid {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(layout/HomeBG.jpg) no-repeat;
    background-size: cover;
}

/* Already have the video as page background */
#bgvid {
  position: fixed;      /* or absolute if that's how you’ve set it up */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;         /* cover the viewport */
  object-fit: cover;
  z-index: -1;          /* sits behind all content */
}

/* Creates the visible  window for the video */
.video-hero-spacer {
  height: 20vh;        /* tweak if you want a different hero height */
  width: 100%;
  background: transparent;
  pointer-events: none; /* clicks pass through if needed */
}

 

/* Constrain the whole carousel */
.featured-slider .splide {
  max-width: 380px;     /* tweak to taste */
  margin: 0 auto;
}

/* Keep the track from showing neighbors */
.featured-slider .splide__track {
  overflow: hidden;
}

/* Let slides expand to the track width */
.splide__slide {
  display: block;       /* no need for flex here */
  max-width: none;      /* remove your 350px cap */
  margin: 0;            /* let Splide handle spacing via `gap` */
}

/* your card styles stay the same */
.fc-card { width: 100%; }

.splide__pagination {
    bottom: -1.5em;
    left: 0;
    padding: 0 1em;
    position: absolute;
    right: 0;
    z-index: 1;
}

 .featured-courses {margin: 24px 0;background: #add1b4;padding: 20px;border-radius: 8px;box-shadow: 0px -2px 25px hsl(0deg 0% 50.2% / 35%);}
      .fc-heading {margin: 0 0 12px;font-size: clamp(20px, 2.2vw, 28px);color: #ffffff;text-shadow: 1px 5px 18px rgb(0 0 0 / 33%);}
      .fc-card {
        display:block;
        width: 100%;
        margin: auto;
        text-decoration:none;
        color:inherit;
        background:#fff;
        overflow:hidden;
        box-shadow:0 10px 24px rgba(0,0,0,.08);
        overflow: hidden;
        height: 410px;
        position: relative;
      }
      .fc-img {display:block;width: 100%;/* height: 261px; *//* object-fit:cover; */position: relative;}
      .fc-img--placeholder { background:#e8eef1; height:160px; }
      .fc-body {padding:14px 16px 16px;position: absolute;bottom: 0px;background: white;width: 100%;}
      .fc-title { text-align:center; margin:6px 0 14px; font-weight:700; line-height:1.25; font-size:clamp(16px,1.8vw,18px); }
      .fc-cta { display:flex; justify-content:center; }
      .fc-button {display:inline-block;padding:10px 18px;background:#34434a;color:#fff;font-weight:600;}
 
.search-list{display:grid;grid-template-columns:1fr;gap:.75rem;margin:1rem 0}
    @media (min-width:700px){.search-list{grid-template-columns:1fr 1fr}}
    .search-item{display:flex;gap:.75rem;align-items:center;padding:.75rem;border:1px solid #e6e6e6;border-radius:12px;text-decoration:none}
    .search-item:hover{box-shadow:0 2px 10px rgba(0,0,0,.06)}
    .search-item img{width:64px;height:64px;object-fit:cover;border-radius:8px;flex:0 0 64px;background:#f6f6f6}
    .search-item span{font-weight:600;line-height:1.2}
    .muted{opacity:.7}

.site-search  {position:relative;overflow: hidden;border-radius: 33px;width: 250px;float: right;}
.site-search input {
    border-radius: 12px;
    height: 30px;
    box-sizing: content-box;
    border: none;
    width: 100%;
    padding-left: 40px;
}
.site-search button {
    position: absolute;
    font-size: 24px;
    left: 0px;
    background: white;
    border: none;
    top: 0px;
    padding: 3px;
    height: 32px;
    color:black;
}
.site-search button:hover{
    cursor: pointer;
}
.site-search input:focus,
.site-search input:focus-visible {
  outline: none;
  box-shadow: none;
}

.course-dates {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
 
}

.course-dates li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f5f5f5;
  padding: 12px;
  margin-bottom: 5px;
}

.course-dates li.header {
  font-weight: bold;
  background: #d6ead6; /* your green */
  text-transform: uppercase;
}

.course-dates li > span,
.course-dates li > a {
  flex: 0 0 20%;     /* fixed 20% width each */
  max-width: 20%;
  text-align: left;  /* you can use center/right per column */
}

.course-dates li:hover {
    background: #dcf3e4;
}
 

.course-dates .date {
  font-weight: bold;
   /* dark blue like screenshot */
}

.course-dates .time {
  margin: 0 20px;
  color: #555;
}

.course-dates .price {
  /* margin: 0 20px; */
}

.course-dates .capacity {
  /* margin: 0 20px; */
}
.course-dates .book {
  color: #003366;
  text-decoration: none;
  font-weight: bold;
  padding-right: 20px;
}

.course-dates .book:hover {
  text-decoration: underline;
}

.actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end; /* pushes buttons to right */
}

.btn {
   padding: 11px;
   text-decoration: none;
   /* border-radius: 3px; */
   border: 0;
   background: #afdcb7;
   color: black;
   cursor: pointer;
   }

.btn-book {
    background: blue !important;
    color: white !important;
}

                           .courses-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* three equal columns */
  gap: 16px;
  align-items: center;
}

                            .courses-head {
                                font-weight: 600;
                                padding: 10px 12px;
                                border-bottom: 1px solid #ddd;
                            }

                            .courses-row {
                                /* padding:12px; */
                            }

                            .courses-row h2 {
                                margin: 0;
                                font-size: 18px;
                                font-weight: 600;
                            }

                            .courses-actions form {
                                display: inline-block;
                                margin: 0 8px 8px 0;
                            }

                            .courses-actions .Gbuttons {
                                white-space: nowrap;
                            }

                            @media (max-width: 720px) {
                                .courses-grid {
                                    grid-template-columns: 1fr;
                                }

                                .courses-head {
                                    display: none;
                                }
                            }

.venue-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.venue-item{border:1px solid #e5e5e5;border-radius:8px}
.venue-link{display:flex;align-items:center;gap:12px;padding:12px 14px;text-decoration:none}
.venue-link:hover{background:#f8f8f8}
.swatch{width:14px;height:14px;border-radius:3px;display:inline-block;flex:0 0 14px;background:#2F80ED}
.v-name{font-weight:600}
.v-meta{margin-left:auto;opacity:.75;font-size:.95rem}
a.btn {
    padding: 10px;
    background: green;
    color: white;
    text-decoration: none;
    display: inline-block;
}


.tableHeader {display:flex; font-weight:bold; border-bottom:1px solid #ccc; padding:10px 0;}
.tableRow {display:flex;font-weight:bold;border-bottom:1px solid #ccc;padding:10px 0;align-items: anchor-center;}
.tableRow  div {padding:10px;}
.tableRow:hover {
    background: #dfdfdf;
}

.showAnswers {}
.showAnswers > div {
    border-bottom: 1px solid #e6e6e6;
    padding: 10px;
    margin-bottom: 10px;
}
.showAnswers img {width:30px;margin-bottom: -7px;}


.ajax-file-upload-statusbar {
    border: 1px solid #3563c5;
    margin-top: 10px;
    width: 420px;
    margin-right: 10px;
    margin: 5px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    padding: 5px 5px 5px 15px
}

.ajax-file-upload-filename {
    width: 100%;
    height: auto;
    margin: 0 5px 5px 0px;
}

.ajax-file-upload-filesize {
    width: 50px;
    height: auto;
    margin: 0 5px 5px 0px;
    display: inline-block;
    vertical-align: middle;
}

.ajax-file-upload-progress {
    margin: 5px 10px 5px 0px;
    position: relative;
    width: 98%;
    border: 1px solid #ddd;
    padding: 1px;
    border-radius: 3px;
    display: inline-block;
    color: #FFFFFF;
}

.ajax-file-upload-bar {
    background-color: #0099FF;
    width: 0;
    height: 20px;
    border-radius: 3px;
    color: #FFFFFF;
}

.ajax-file-upload-percent {
    position: absolute;
    display: inline-block;
    top: 3px;
    left: 48%
}

.ajax-file-upload-red {
    -moz-box-shadow: inset 0 39px 0 -24px #e67a73;
    -webkit-box-shadow: inset 0 39px 0 -24px #e67a73;
    box-shadow: inset 0 39px 0 -24px #e67a73;
    background-color: #e4685d;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    display: inline-block;
    color: #fff;
  
    font-size: 13px;
    font-weight: normal;
    padding: 4px 15px;
    text-decoration: none;
    text-shadow: 0 1px 0 #b23e35;
    cursor: pointer;
    vertical-align: top;
    margin: 5px 10px 5px 0px;
}

.ajax-file-upload-green {
    background-color: #77b55a;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    margin: 0;
    padding: 0;
    display: inline-block;
    color: #fff;
  
    font-size: 13px;
    font-weight: normal;
    padding: 4px 15px;
    text-decoration: none;
    cursor: pointer;
    text-shadow: 0 1px 0 #5b8a3c;
    vertical-align: top;
    margin: 5px 10px 5px 0px;
}

.ajax-file-upload {
    cursor: pointer;
    background: #3664c5 !important;
    padding: 10px !important;
    font-size: 15px;
    color: white !important;
    /* border: solid 2px #FF9800 !important; */
    margin: 0;
    text-decoration: none;
    width: fit-content;
}

.ajax-file-upload form {
    position: unset !important;
}

.ajax-file-upload:hover {
    background: #404040;
    -moz-box-shadow: 0 2px 0 0 #15719f;
    /* -webkit-box-shadow: 0 2px 0 0 #15719f; */
    /* box-shadow: 0 2px 0 0 #15719f; */
}

.ajax-upload-dragdrop {
    border: 1px dotted #A5A5C7;
    width: 100%;
    color: #4f7c9e;
    text-align: center;
    padding: 15px;
    box-sizing: border-box;
    background: rgba(204, 204, 204, 0.30980392156862746);
}

.state-hover {
    border: 2px solid #A5A5C7;
}

.ajax-file-upload-container {
    margin: 20px 0px 20px 0px;
}

.footerContacts {
  display: flex;
  flex-wrap: wrap;
  /* gap: 20px; */
  max-width: 1200px;
  margin: auto;
  margin-bottom: 30px;
  border-bottom: 1px solid grey;
}

.footerVenue {
  flex: 1 1 200px;
  padding: 10px;
  border-right: 1px solid #616161;
}
.footerContacts > div:last-child {
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}
div#topStrap {
    text-align: center;
    padding: 15px;
}marquee {
    background: #394f59;
    color: white;
    padding: 10px;
    margin: 0;
}