body {

background-image: url("img/onpback2.jpg"); /* Set the background image URL */
background-repeat: no-repeat; /* Adjust the background repeat (repeat, no-repeat, repeat-x, repeat-y) */
background-size: cover; /* Adjust the background size as needed (cover, contain, etc.) */
font-family: "Arial", sans-serif;
font-size: 12pt;    }
/* Add some styles to your dropdown */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
    display: block;
}




     /* Simple Slider Styles */
     * {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
}


/* Hide the images by default */
.mySlides {
display: none;
}

/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}

/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 9px;
padding: 8px 12px;
position: absolute;
top: 0;
}

/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active, .dot:hover {
background-color: #717171;
}

/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 3.5s;
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}

}





#secondaryNavbar {
background-color: green; /* Change this to your desired background color */
font-size: 18pt;
}

#secondaryNavbar .navbar-nav .nav-link {
color: white; /* Change this to your desired text color */
font-size: 15pt;
}

#secondaryNavbar .dropdown-content {
background-color: green; /* Change this to your desired background color for dropdown */
}

#secondaryNavbar .dropdown-content a {
color: white; /* Change this to your desired text color for dropdown items */
}

#secondaryNavbar .dropdown-content a:hover {
background-color: #ffffff; /* Change this to your desired hover background color for dropdown items */
color: green; /* Change this to your desired hover text color for dropdown items */
}


/*imagesoverlay*/

/* Image Overlay Styles */
.image-overlay {
position: relative;
overflow: hidden;
margin-bottom: 20px;
}

.image-overlay img {
width: 100%;
height: auto;
transition: transform 0.6s ease;
}

.image-overlay:hover img {
transform: scale(1.1);
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.6s ease;
}

.image-overlay:hover .overlay {
opacity: 1;
}
.icontext {
background-color: #04AA6D;
color: white;
font-size: 16px;
padding: 16px 32px;
text-align: center;

}

/*card header*/
.card-header {
    background-color: green; /* Change this to your desired background color */
    color: #ffffff; /* Change this to your desired text color */
}



/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}

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

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

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

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

#nav-item {
    font-size: 14pt;}