.vertical-center {
  min-height: 50%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 50vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}

blockquote {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
  border-left: 6px solid rgba(36, 152, 253, 1.0);
  padding: 0px 15px;
}

/* ######################################## */
/* ########## HIDDIN CONTENT ############## */
/*
.hidden-content {
  display: none;
}
*/
/* ######################################## */
/* ######################################## */



/* ######################################## */
/* ########## SCROLL TO TOP ############### */
/*
.scrollTop {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgb(36, 152, 253) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='currentColor' d='M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z'%3E%3C/path%3E%3C/svg%3E") center no-repeat;
  box-shadow: 0 0.25rem 0.5rem 0 gray;
  opacity: 0.7;
}
.scrollTop:hover {
  opacity: 0.5;
}
.scrollTop:focus {
  opacity: 0.9;
}
.scrollTop:active {
  opacity: 1.0;
}

:root {
  scroll-behavior: smooth;
}
*/
/* ######################################## */
/* ######################################## */





/* ######################################## */
/* ########## A FADING HEADER? ############ */
/* Custom CSS 
#main-header {
  transition: transform 0.3s ease-in-out;
}

#main-header.scrolled-up {
  transform: translateY(0);
}

#main-header:not(.scrolled-up) {
  transform: translateY(-100%); /* Hides the header by moving it up 
}


.header-hidden {
  transform: translateY(-100%); /* Hides the header by moving it up 
  transition: transform 0.3s ease-in-out; /* Smooth transition 
}

.header-visible {
  transform: translateY(0); /* Shows the header
  transition: transform 0.3s ease-in-out;
}
*/
/* ######################################## */
/* ######################################## */




/* ######################################## */
/* ########## A CUSTOMIZED BUTTON ########## */

.btn-custom {
    color: #fff;
/*    background-color:transparent;
*/
    background-color: rgba(36, 152, 253, .4);
    padding:.7em;
    font-size:1em;
    text-align:center;
    text-decoration:none;
    border:1px solid white;
    border-color: #fff;
    border-radius:0;
    border-color:#fff;
}

.btn-custom:hover {
    color: #fff;
    background-color: rgba(36, 152, 253, .9);
    border-color: #fff;
}

.btn-custom.focus, .btn-custom:focus {
    color: #fff;
    background-color: rgba(36, 152, 253, .7);
    border-color: #0fff;
}
/* ######################################## */
/* ######################################## */




/* ######################################## */
/* ########## FADING CAROUSEL TEXT ######## */
.first-animated-text {
  opacity: 0; /* Initially hidden */
  animation: fadeInHold 9s forwards; /* 3s in + 3s hold + 3s out = 9s total */
}

@keyframes fadeInHold {
  0% {
    opacity: 0; /* Start hidden */
  }
  33% {
    opacity: 0; /* Fade in to fully visible (3 seconds) */
  }
  66% {
    opacity: 1; /* Hold fully visible (3 seconds) */
  }
  100% {
    opacity: 0; /* Fade out to hidden (3 seconds) */
  }
}

.animated-text {
  opacity: 0; /* Initially hidden */
  animation: fadeInOutHold 9s forwards; /* 3s in + 3s hold + 3s out = 9s total */
}

@keyframes fadeInOutHold {
  0% {
    opacity: 0; /* Start hidden */
  }
  33% {
    opacity: 1; /* Fade in to fully visible (3 seconds) */
  }
  66% {
    opacity: 1; /* Hold fully visible (3 seconds) */
  }
  100% {
    opacity: 0; /* Fade out to hidden (3 seconds) */
  }
}
/* ######################################## */
/* ######################################## */









/* ######################################## */
/* ########## BOOTSTRAP CAROUSEL  ######### */
.carousel-item {
  transition: 1s;
  height: px; /* Or a suitable height for your carousel */
  background-repeat: no-repeat;
  background-size: cover; /* Ensures the image covers the entire item */
  background-position: center center; /* Centers the image */
}

.carousel-indicators [data-bs-target] {
  list-style:none;
  width: 8vw;
  height: 8vh;
  border-radius:;
}

.carousel-indicators [data-bs-target] img {
  list-style:none;
  position: absolute;
  width: 8vw;
  border-radius:;
  height: 8vh;
  top:;
  left:;            
}






























/* ######################################## */
/* ######################################## */






/* ######################################## */
/* ########## ACCORDION ################### */
/*
.accordion {
    --bs-accordion-bg: ; /* Change background color 
    --bs-accordion-color: ; /* Change text color 
    --bs-accordion-btn-color:;
    --bs-accordion-btn-bg: ;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-focus-border-color: ;
    --bs-accordion-active-color: rgba(36, 152, 253, 1.0);
    --bs-accordion-active-bg: ;
    --bs-accordion-border-width:;
    --bs-accordion-border-color:;
    --bs-accordion-btn-icon-transform:;
    --bs-accordion-btn-icon-transition: 0.4s;
}

.accordion-button {
  display: ;
  text-align: left;
  font-weight: regular;
  font-size: 1.2rem;
}

.accordion-button:hover{
  color: rgba(36, 152, 253, .9);
}

.accordion-button::after {
  background-image: initial;
  width: 0;
}

.accordion-button:not(.collapsed)::after {
  background-image: initial;
  width: 0;
}

.accordion-collapse {
  display: none; /* Hide by default on all screens 
}

@media (min-width: 768px) { /* Or any breakpoint you prefer 
 .accordion-collapse.show {
  display: block; /* Show on larger screens */
}
}
/* ######################################## */
/* ######################################## */



/* ######################################## */
/* ########## CUSTOMIZING A DROPDOWN  ##### */
/*
.dropdown-menu { 
  background-color:; 
  display:;
}

.dropdown-menu a:hover {
    color:#2498fd;
    background-color:;
}

.dropdown-menu a:focus {
    color:#ffffff;
    background-color:;
}
/* ######################################## */
/* ######################################## */




/* ######################################## */
/* ########## LOGO UNDERLINING  ########### */
.custom-underline-thick {
  text-decoration: none; /* Remove default underline */
  color:#0298fd;
  border-bottom: 1.5px solid; /* Adjust thickness (2px) and color (theme) */
  padding-bottom: 2px; /* Adjust spacing between text and underline */
}

.custom-underline {
  text-decoration-color: #0298FD; /* Green underline */
  text-decoration-thickness: 2px; /* 3px thick */
}
/* ######################################## */
/* ######################################## */





/* ######################################## */
/* ########## SPLASH SCREEN  ############## */
.embed-responsive {
  position: relative; /* 'relative' or 'absolute' is Important for positioning the overlay */
}

.splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black; /* Fallback background */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
  opacity: 1;
  transition: opacity 1.5s ease-in-out; /* Fade transition */
}

.splash-screen.fade-out {
  opacity: 0;
  pointer-events: none; /* Disable interaction after fade */
}

#splash-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures video covers the whole area */
  z-index: -1; /* Place video behind content */
}

.splash-content {
  text-align: center;
  color: white;
  z-index: 1;
}

.main-content {
  /* Add any specific styling for your main content */
}
/* ######################################## */
/* ######################################## */