<style>
    .fakeimg {
      height: 200px;
      background: #aaa;
    }
    
    


body {
  background-color: #011714;
  margin: 0;
  padding: 0;
  font-family: "Barlow", sans-serif;
  cursor: auto; /* Regular default cursor */

}
    
    
/* Custom cursor for interactive elements on hover */
a:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    cursor: url('documents/hand.png'), pointer; /* Use hand image and fallback to pointer */
}

/* Make sure the cursor changes for active states as well */
a:active, button:active, input[type="submit"]:active, input[type="button"]:active {
    cursor: url('documents/hand.png'), pointer; /* Use hand image when active */
}

/* Custom cursor for interactive elements on hover */
a:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover,
.custom-button:hover {
    cursor: url('documents/hand.png'), pointer; /* Use hand image and fallback to pointer */
}

/* Make sure the cursor changes for active states as well */
a:active, button:active, input[type="submit"]:active, input[type="button"]:active,
.custom-button:active {
    cursor: url('documents/hand.png'), pointer; /* Use hand image when active */
}


/* Custom cursor for interactive elements on hover */
a:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover,
.jumbotron .custom-button:hover {
    cursor: url('documents/hand.png'), pointer; /* Use hand image and fallback to pointer */
}

/* Make sure the cursor changes for active states as well */
a:active, button:active, input[type="submit"]:active, input[type="button"]:active,
.jumbotron .custom-button:active {
    cursor: url('documents/hand.png'), pointer; /* Use hand image when active */
}

    p, ul, li, a {
      font-family: "Barlow", sans-serif;
      font-size: 16pt; 
    }

    h1, h2, h3, h4, h5 {c 	 font-family: "Barlow", sans-serif;
     font-weight: 600;
 	 font-style: bold;
    }
    
    
    h1 {
	font-size: 40pt; 
    }
    
    h2 {
    font-size: 36pt; 
    }
    
    h3 {
	font-size: 30pt; 
    }
    
    h4 {
    font-size: 24pt; 
    }
    
.navbar-toggler {
    background-color: #feeabb; /* Set background color to light yellow */
 border: 3px solid white; /* Add a white border */
    border-radius: 18px; /* Optional: round the corners slightly */
    margin-bottom: 10px;

}

.navbar-toggler-icon {
    background-color: transparent; /* Ensure transparency for the icon background */
    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='black' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}


/* Add the 'X' button styling when active */
.navbar-toggler-icon.close-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='black' stroke-width='2' stroke-linecap='round' d='M7 7l16 16M7 23L23 7'/%3E%3C/svg%3E");
}

 
    .custom-button {
 	 font-family: "Barlow", sans-serif;
      background-color: #191e2a; /* Change this to your desired color */
      color: white;
      border: none;
    }


    .content {
      min-height: calc(100vh - 50px); /* Adjust based on footer height */
    }
    
.btn-primary {
  background-color: #869cad;
  border: black;
  font-family: 'Berlin Sans FB', sans-serif;
}

a {
color: #e7cc84;
  text-decoration: underline;

}

a:hover {
  color: #b19844;
    text-decoration: underline;

}

.navbar-nav .nav-link {
  text-decoration: none;
    color: #ffffff !important; /* Force bright white text */
  font-size: 1.1rem
}

/* Navigation links should not be underlined */
.navbar-nav .nav-link:hover {
  text-decoration: none;
    color: #cccccc !important; /* Slightly darker on hover */

}

.navbar-nav .nav-item .nav-link.active {
    background-color: #074135; /* Highlight active link */
    color: #ffffff !important; /* Ensure active link stays white */
    border-radius: 20px;
    text-decoration: none;
}


.custom-container {
      margin-left: 30px;
      margin-right: 30px;
      background-color: #074135; /* Dark blue background */
      border-radius: 20px; /* Curved edges */
      padding: 30px; /* Optional: add padding for inner spacing */
      color: white; /* Optional: change text color to make it readable against dark background */
  box-sizing: border-box;
    }
    
    
    .black-container {
      margin-left: 30px;
      margin-right: 30px;
      background-color: #000; /* Dark blue background */
      border-radius: 20px; /* Curved edges */
      padding: 30px; /* Optional: add padding for inner spacing */
      color: white; /* Optional: change text color to make it readable against dark background */
  box-sizing: border-box;
    }
    
.main-container {
      margin-left: 30px;
      margin-right: 30px;
      background-color: #011714; /* Dark blue background */
      border-radius: 20px; /* Curved edges */
      padding: 20px; /* Optional: add padding for inner spacing */
      color: white; /* Optional: change text color to make it readable against dark background */
  box-sizing: border-box;
    }    
    



.teach-container {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    background-color: #feeabb; /* Background color */
    border-radius: 20px; /* Curved edges */
    padding: 20px; /* Inner spacing */
    color: black; /* Text color */
    box-sizing: border-box;
}


.teach-container a {
    color: #41766b; /* Default link color */
}


.teach-container a:hover {
    color: #28ac9b; /* Change link color on hover */
}

.teach-container a:active {
    color: #28ac9b; /* Dark green for active links */
}    
    
    
    
.about-container {
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 20px;
    background-color: #074135; /* Background color */
    border-radius: 20px; /* Curved edges */
    padding: 30px; /* Inner spacing */
    color: white; /* Text color */
    box-sizing: border-box;
}

.new-container {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    background-color: #feeabb; /* Background color */
    border-radius: 20px; /* Curved edges */
    padding: 20px; /* Inner spacing */
    color: black; /* Text color */
    box-sizing: border-box;
}


.new-container a {
    color: #41766b; /* Default link color */
}


.new-container a:hover {
    color: #28ac9b; /* Change link color on hover */
}

.new-container a:active {
    color: #28ac9b; /* Dark green for active links */
}    
    
    
.navbar {
background-color: #191e2a;
padding: 24px; 
 	 font-family: "Barlow", sans-serif;
font-size: 14pt; 


}




.nav-link {
color: #fff;
 	 font-family: "Barlow", sans-serif;


.footer {
  width: 100%;
  background-color: #191e2a;
  padding: 10px 0;
  position: relative;
  color: white; 
  bottom: 0;
  left: 0;
  margin: 0;
}


.card {
  border: none;
  border-radius: 5px;
}



.jumbotron {
      background-image: url('documents/banner-v3.jpg'); /* Path to your background image */
      background-size: cover; /* Make the background cover the entire jumbotron */
      background-repeat: no-repeat; /* Prevent the background image from repeating */

}




.active {
  background-color: #128878;
}



.video-container {
    position: relative;
    width: 50%;
    height: 0;
    padding-bottom: 56.25%;
    overflow:hidden;
}


.video-container.vertical { 

    padding-bottom: 177.78%;
}

.video-container.ratio_4_3 { 

    padding-bottom: 75%;
}


.iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}  


.custom-container .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: -15px;
    margin-right: -15px;
}

.custom-container .row > .col-lg-4,
.custom-container .row > .col-lg-6 {
    padding: 15px;
}

.jumbotron-secondary {
        margin-bottom: 0;
        background-image: url('documents/roundscreen_NLD-2nlevel-banner.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 20vh; /* Full screen height */
        position: relative; /* Added relative positioning */

    }
    
        
    @media (max-width: 800px) {
        .jumbotron-secondary {
            height: 20vh; /* Reduce height for smaller screens */
            background-size: cover; /* Ensure the image doesn't get cut off */
        }


   



@media (max-width: 576px) {
    .navbar-nav {
      text-align: center; /* Center navbar links in the collapsible menu */
    }
    
    
    .navbar-toggler {
        border-color: rgba(255, 255, 255, 0.5); /* Optional: more visible white border */
    }

    .navbar-toggler-icon {
        background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath stroke="rgba(255,255,255,1)" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/%3E%3C/svg%3E'); /* Force white icon */
    }
  
@media (max-width:800px) {
    .about-container, .new-container {
        margin-left: 20px;
        margin-right: 20px;
        padding: 15px; /* Adjust padding for smaller screens */
    }
}

@media (max-width: 768px) {
    .secondary-jumbotron {
        height: 20vh; /* Adjust height for smaller screens */
    }
    
    .secondary-jumbotron h1 {
        font-size: 2rem;
    }

    .secondary-jumbotron p {
        font-size: 1rem;
    }
}

    
  </style>
  