/* FBA911 Custom CSS Generated by the www.smallnetworkingassistant.com */

body {  
background-image:url('../../img/backgroundFBA.png');
background-color:#d7d7d759;
}

/* Parallax Sections */
.parallax {
background-size: cover;
background-position: center;
height: 100vh;
position: relative;
color: white;
overflow: hidden;
}

/* Overlay for better text visibility */
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.content {
position: relative;
z-index: 2;
opacity: 0;
transform: translateY(30px);
transition: opacity 1s ease-out, transform 1s ease-out;
}
.content.visible {
opacity: 1;
transform: translateY(0);
}

/* Smooth scrolling */
html {
scroll-behavior: smooth;
}

/*GDPR Cookie Warning Banner - Cookie Warning Banner Styles */
#cookie-banner {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #ffffff;
color: #333;
padding: 15px 20px;
box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
display: none; /* Prevent flash */
flex-direction: column;
align-items: center;
z-index: 9999;
font-family: Arial, sans-serif;
transition: transform 0.3s ease-in-out;
transform: translateY(100%);
}
#cookie-banner.show {
display: flex;
transform: translateY(0);
}
#cookie-banner p {
margin: 0 0 10px;
text-align: center;
font-size: 14px;
}
.cookie-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.cookie-buttons button {
padding: 10px 20px;
border: none;
cursor: pointer;
font-size: 14px;
border-radius: 4px;
}
#accept-cookies {
background-color: #198754; /*Boostrap 5 Success Color #198754*/
color: white;
}
#decline-cookies {
background-color: #DC3545; /*Boostrap 5 Success Color #DC3545*/
color: white;
}

/* Sticky Change Preferences Banner */
#sticky-preferences {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #f8f8f8;
color: #333;
padding: 10px 15px;
text-align: center;
font-size: 14px;
box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
display: none;
z-index: 9998;
}
#sticky-preferences a {
color: #007BFF;
text-decoration: underline;
cursor: pointer;
}

/* Responsive */
@media (min-width: 600px) {
#cookie-banner {
flex-direction: row;
justify-content: space-between;
text-align: left;
}
#cookie-banner p {
margin: 0;
font-size: 15px;
}
.cookie-buttons {
flex-wrap: nowrap;
}
.spinner img {
vertical-align: middle;
}
button:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.btn-outline-dark {
transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.btn-outline-dark:hover {
background-color: #808080;
color: #fff;
}
.btn-outline-dark:focus {
box-shadow: 0 0 0 0.25rem rgba(192, 192, 192, .5);
}

/*Contact & Social Media Banner Above Top Nav*/

/* Gradient for Contact Banner */
.contact-banner {
background: linear-gradient(180deg, #f8f9fa,#212529 ); /* Bootstrap secondary shades */
color: #fff;
font-size: 14px;
padding: 8px 0;
position: sticky;
top: 0;
z-index: 1030;
border-bottom-color: rgba(0, 0, 0, .2);
}
.contact-banner a {
color: #fff;
margin-right: 15px;
text-decoration: none;
}
.contact-banner a:hover {
color: #f8f9fa;
}

/* Admin Banner */
.admin-banner {
background: linear-gradient(180deg, #000, #DC3545); /* Bootstrap Danger shades */
color: #fff;
font-size: 14px;
padding: 8px 0;
position: sticky;
top: 0;
z-index: 1030;
border-bottom-color: rgba(0, 0, 0, .2);
}
.admin-banner a {
color: #fff;
margin-right: 15px;
text-decoration: none;
}
.admin-banner a:hover {
color: #f8f9fa;
}

/* Login Banner */
.login-banner {
background: linear-gradient(180deg, #CCC, #198754); /* Bootstrap Danger shades */
color: #000;
font-size: 14px;
padding: 8px 0;
position: sticky;
top: 0;
z-index: 1030;
border-bottom-color: rgba(0, 0, 0, .2);
}
.login-banner a {
color: #000;
margin-right: 15px;
text-decoration: none;
}
.login-banner a:hover {
color: #f8f9fa;
}


/* Login Banner */
.member-banner {
background: linear-gradient(180deg, #CCC, #0D6EFD); /* Bootstrap Danger shades */
color: #CCC;
font-size: 14px;
padding: 8px 0;
position: sticky;
top: 0;
z-index: 1030;
border-bottom-color: rgba(0, 0, 0, .2);
}
.member-banner a {
color: #CCC;
margin-right: 15px;
text-decoration: none;
}
.member-banner a:hover {
color: #f8f9fa;
}


/* Top Nav Bar */
.navbar {
position: sticky;
top: 40px; /* Height of banner */
z-index: 1020;
border-bottom: 2px solid;
border-bottom-color: rgba(0, 0, 0, 0.2);
}

/* Bread Banner */
.bread-crumbs {
background: linear-gradient(180deg, #DC3545, #000 ); /* Bootstrap Dangery shades */
color: #fff;
font-size: 14px;
padding: 8px 0;
position: sticky;
top: 0;
z-index: 1030;
border-bottom-color: rgba(0, 0, 0, .2);
}
.bread-crumbs a {
color: #fff;
margin-right: 15px;
text-decoration: none;
}
.bread-crumbs a:hover {
color: #f8f9fa;
}

/* Month Crumb */
.month-crumbs {
background: linear-gradient(180deg,#e2e2e2, #fff ); /* Bootstrap Dangery shades */
color: #fff;
font-size: 14px;
padding: 8px 0;
top: 0;
position:relative;
-index: 0 !important;  /* force it behind */
border-bottom-color: rgba(195, 195, 195, .29);
}
.month-crumbs a {
color: #fff;
margin-right: 15px;
text-decoration: none;
position:relative;
-index: 0 !important;  /* force it behind */
}
.month-crumbs a:hover {
position:relative;
-index: 0 !important;  /* force it behind */
color: #000;
}

/* Member Crumbs */
.member-crumbs {
background: linear-gradient(180deg, #CCC, #0D6EFD); /* Bootstrap Dangery shades */
color: #fff;
font-size: 14px;
padding: 8px 0;
top: 0;
position:relative;
-index: 0 !important;  /* force it behind */
border-bottom-color: rgba(195, 195, 195, .29);
}
.member-crumbs a {
color: #fff;
margin-right: 15px;
text-decoration: none;
position:relative;
-index: 0 !important;  /* force it behind */
}
.member-crumbs a:hover {
position:relative;
-index: 0 !important;  /* force it behind */
color: #000;
}