:root {
    --navbar-text-color: #000000; 
    --navbar-text-hover: #00596B;
    --header-background-color: #ffe073;
    --paragraph-text-color: #333333;
    --button-color:#00596b;
    --button-hover-color:#FFE073;
    --secondary:#8BC34A;
    --primary:#1F6F93;
    --orange:#8BC34A;
    --gray:#1F6F93;
  }
/*
    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }
    .content {
      flex: 1;
    }
*/
/*  FONTS */
.orange {
    color: var(--secondary);
}
.blue {
    color: var(--primary);
}
.green {
    color: var(--secondary);
}
.roboto-thin {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: normal;
  }
  
  .roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .roboto-medium {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .roboto-black {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: normal;
  }
  
  .roboto-thin-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: italic;
  }
  
  .roboto-light-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .roboto-regular-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .roboto-medium-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: italic;
  }
  
  .roboto-bold-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: italic;
  }
  
  .roboto-black-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: italic;
  }
/* END FONTS */
.primary {
    color: var(--primary);
}
.secondary {
    color: var(--secondary);

}
.bg-green {
    background-color: var(--secondary);
}
.bg-blue {
    background-color: var(--primary);
}
/* Blue Button for Press Release */
.btn-blue {
    color: #fff;
    background-color: var(--button-color);
    border-color: var(--primary);
}
.halfButton {
    width: 40%;
}
.bg-white:hover {
	color:red;
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.8); /* White border with slight transparency */
  }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  }

.navbar-nav:hover {
    color: #CC5500;
}
.navbar-nav:hover {
    color: var(--secondary);
}
.navbar-nav .nav-link {
    margin-right: 15px; /* Adjust the value as needed */
  }
.navbar-nav .nav-link:hover {
     color: var(--secondary);
}
  .navbar {
    background-color: var(--primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add drop shadow */
    position: sticky;
    top: 0;
    z-index: 1000; /* Ensure it's above other content */
  }
  .logo-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
  }
  .logo {
    width: 350px;
  }
  .text-box {
    text-align: center;
  }
  .footer {
    bottom: 0;
    width: 100%;
    background-color: #f8f9fa;
    padding: 20px 0;
    text-align: center;
  }
  .logo-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 200px; /* Move the logo container down 200px */
}

.logo {
    width: 350px;
    border-radius: 10px; /* Apply slight rounding to the logos */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add light drop shadow */
}
.top-container {
    background-color:white;
    position: relative;
    min-height: 150px;
}
.date-text {
    font-size: 0.8em; 
}
/* Green circles around navigation arrows */
.carousel-control-prev,
.carousel-control-next {
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    border-radius: 30%;
    background-color: var(--orange);
    opacity: 0.7;
    border: none;
    transform: translateY(-50%);
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
}
/* Ticket Button Behavior */
.nav-ticket-btn {
    width:400px;
    background-color: var(--secondary);
    color:#8B008B;
    font-size: 1.3rem;
    font-weight:bold;
    letter-spacing: .05rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 1rem;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: inline-block;
    margin-top:1rem;
    margin-bottom: 1rem;
}
.ticket-btn {
    width:200px;
    background-color: var(--secondary);
    color: #8B008B;
    font-size: 1.3rem;
    font-weight:bold;
    letter-spacing: .05rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 1rem;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: inline-block;
    margin-top:1rem;
    margin-bottom: 1rem;
}
.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Adjust this if needed */
}
.nav-ticket-btn:hover {
    background-color: var(--primary);
    color: #FFFFFF;
    font-weight: bold;
}
.ticket-btn:hover {
    background-color: var(--primary);
    color: #FFFFFF;
    font-weight: bold;
}
.full-width-button {
      display: block;
      width: 100%;
      background-color: #8BC34A;
      color: white;
      font-weight: bold;
      text-align: center;
      font-size: 1.3rem;
      padding: 15px;
      text-decoration: none;
      border: none;
      border-radius: 0;
      cursor: pointer;
    }
.full-width-button a{
    text-decoration: none;
    color:white;
}
/* White arrows */
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 8 8'%3e%3cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
    width:25px;
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 8 8'%3e%3cpath d='M4 0l4 4-4 4-1.5-1.5 2.5-2.5-2.5-2.5 1.5-1.5z'/%3e%3c/svg%3e");
    width:25px;
}

/* Position the navigation arrows */
.carousel-control-prev {
    left: 10px;
}

.carousel-control-next {
    right: 10px;
}
.featuredBox {
  background-color: #ffffff;
  border: solid 1px #c9c9c9;
  border-top: solid #550000 15px;
  padding:1em 0 0 1em;
  min-height: 290px;
  width:65%;
  margin-left:15%;
}
/* CSS for the show box */
.show-box {
  background-color: white;
  border: solid 1px #f1f1f1;
  width: 600px;
  height: 360px;
  position: absolute;
  top: 0;
  left: 100px;
  z-index: 5;
  padding: .5rem;
    }
/* Social */
ul.social {
    list-style: none;
    display: flex;
    margin-bottom: 1em;
    margin-top:1em;
   }
 .social-icon{
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 15px;
    border-radius: 7px;
    margin-right: 11px;
    cursor: pointer;
    }
.social-facebook{
      background-color: #3b5999;
    }
.social-instagram{
      background-color: #dd4b39;
    }
    .social-icon i{
      transition: 0.4s all;
    }
    .social-icon:hover i{
      transform: scale(1.1);
    }

/* Navigation Colors */
.nav-light {
    background-color:var(--gray);
}
a.nav-link {
    color:white;

}
.orange-underline {
  border-top:5px solid var(--secondary);
  width: 40%;
  margin-bottom:1rem;
}
.dark-underline {
    border-top:5px solid var(--primary);
    width: 40%;
    margin-bottom: 1rem;
}
.footer-color {
    background-color: var(--primary);
    color: white;
}
.footer-btn {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color:#ffffff;
    font-weight: bold;
}

.footer-btn:hover {
    background-color: darken(var(--secondary), 10%);
    border-color: darken(var(--secondary), 10%);
}
/* Navigation Logo */
.logo-container {
      position: absolute;
      top: 410px;
      left: 410px;
      z-index: 1000;
      transition: opacity 0.5s;
    }
    .navbar-logo img {
      height: 62px; /* Adjust size as needed */
      width: 100px; /* Ensure the logo remains square */
              top: 410px;
      left: 410px;
      z-index: 1000;

      transition: opacity 0.5s;
    }
    .navbar-logo img.d-none {
      opacity: 0;
    }
    .hidden-image {
      opacity: 0;
      transition: opacity 0.5s;
    }
    .visible {
      opacity: 1;
    }
.btn-warning {
    background-color: var(--orange);
    color:white;
    font-weight: bold;
}
.card {
    margin-bottom:2rem;
}
.seminar-title {
	color:var(--primary);
	font-weight: bold;
}
@media (max-width: 768px) {
  .orange-underline {
      width:63%;
  }
  /* Base Styles */
.text-container {
  position: relative; /* Adjusted positioning */
}
.logo-small {
  display: none; /* Initially hidden */
  margin-top: 1rem;
}
.logo-large {
  display: block; /* Initially shown */
}

/* Social Icons and Text */
.social-icon {
  font-size: 1.5rem; /* Adjust size as needed */
}
.location-text {
  font-size: 1.5rem; /* Initial size, adjust as needed */
}
.fb-box {
    border: 2px solid #1f6f93;
    border-radius: 5px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    color: #1f6f93;
    margin-bottom: 1.5rem;
}

.fb-logo {
    margin-right: 1rem;
    height: 40px;
}

/* Bootstrap Breakpoints */
@media (max-width: 992px) { /* Adjustments for smaller screens */
  .logo-small {
      display: block; /* Show the small logo */
  }
  /* Ensure the container is set to display:flex for vertical alignment if needed */
  .text-container {
      display: flex;
      flex-direction: column;
      align-items: center; /* Centers content horizontally in the flex container */
  }
}

@media (max-width: 768px) { /* Targeting Bootstrap's 'md' breakpoint and below */
  .text-container {
      text-align: center; /* Center content for medium devices */
  }
  .social-icon {
      font-size: 1.25rem; /* Adjust social icon size for smaller screens */
  }
}

@media (max-width: 576px) { /* Targeting Bootstrap's 'sm' breakpoint and below */
  /* Further adjustments for very small devices */
  .location-text {
      font-size: 1rem; /* Adjust location text size for small screens */
  }
}