/* Font-face declarations */
@font-face {
    font-family: 'Interstate Black';
    src: url('Interstate-Black.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: 'Interstate Bold';
    src: url('Interstate-Bold.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: 'Interstate Regular';
    src: url('Interstate-Regular.ttf') format('truetype');
    font-weight: normal;
}

html {
    scroll-padding-top: 75px;
}

body {
    scroll-behavior: smooth;
    font-family: 'Interstate Regular', Arial, sans-serif;
    font-size: 1.2em;
    color: #414141;
    display: flex;
    flex-direction: column;
}

a {
    color: #583795;
    text-decoration: underline;
}

.text-primary {
    color: #583795 !important;
}

a:hover {
    color: #EC579F; /* Pink color on hover for footer links */
    text-decoration: none;
}

.btn {
    background-color: #EC579F;
    border-color: #583795;
    text-decoration: none;
    color: #fff !important;
    border-radius: 1px;
}

.btn:active {
    background-color: #414141 !important;
}

.btn:hover {
    background-color: #583795 !important;
}

.header {
    font-family: 'Interstate Black', Arial Black, sans-serif;
}

.navbar {
    /* background-color: #583795 !important; */
    background-color: #000000c8 !important;
}

.navbar-nav .nav-link {
    color: #FFFFFF !important;
    padding-right: 20px;
    text-decoration: none;
}

.navbar-nav .nav-link sup {
    font-size: 0.4em;
}

/* Custom styles for the navbar toggler */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.6); /* Change border color */
}

.navbar-toggler:focus {
    background-color: #EC579F !important;
}

.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.7)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); /* White icon */
}

.navbar-nav a.nav-link:hover {
    color: #FFD38E !important;
    text-decoration: underline;
}

.navbar-nav a.nav-link.active {
    color: #FFD38E !important;
}

.alt-color {
    color: #FFD38E;
}

.container {
    max-width: 1200px;
    flex: 1;
}

.container-bg {
    display: block;
    margin: auto;
    max-width: 100%;
    width: 100%;
    background-color: #000;
    color: #fff;
}

.container-bg a, .container-bg .header {
    color: #EC579F;
}

.container-bg a:hover {
    color: #583795;
}

.row-bg {
    max-width: 1200px;
    margin: auto;
}

section {
    padding: 60px 0;
}

button {
    background-color: #00A9A4;
    border-color: #00A9A4;
}

button:hover {
    background-color: #2AACE3;
}

/* Header background image styling */
.header-section {
    background-image: url('images/header.jpg');
    background-size: cover;
    background-position: center;
    height: 600px; /* Adjust height as needed */
}

/* Responsive Adjustments */
@media (max-width: 576px) {
    .header-section {
        max-height: 250px; /* Shrinks the height on smaller screens */
        object-position: center; /* Centers the image content */
        background-position: bottom;
        margin-top: 56px;
    }
    .parallax-section {
        display: none; /* Hides the parallax section on small screens */
    }
}

@media (min-width: 577px) {
    .h-md-100 {
        height: 100%;
    }
}

.header-overlay {
    background-color: rgba(255, 255, 255, 0.8); /* Mostly transparent white */
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    width: 80%; /* Optional: controls the width of the overlay */
    max-width: 600px; /* Optional: limits maximum width */
}

.grey {
    color: #939598;
}

.event-details {
    font-size: 1.4rem;
}

.event-date {
    font-size: 1.7em;
}

.no-margin {
    margin-bottom: 0;
}

/* Styling for CFP Review Board Section */
#cfp .rounded-circle {
    border: 2px solid #EC579F; /* Optional: border color to match style guide */
}

.review-image {
    border-radius: 0px !important;
    border-bottom: 4px solid transparent;
    border-right: 4px solid transparent;
    box-shadow: 2px 2px #000;
}

#cfp h5 {
    font-family: 'Interstate Bold', Arial, sans-serif;
    color: #183053;
}

#cfp p {
    font-family: 'Interstate Regular', Arial, sans-serif;
    color: #414141;
}

@media (max-width: 768px) {
    #calendar .card {
        margin-bottom: 20px;
    }
}

/* CFP Dates Section */
.cfp-section {
    /*
    background-color: #EC579F18;
    border-left: 4px solid #EC579F;
    */
    background-color: #FFD38E18;
    border-left: 4px solid #FFD38E;
}

/* Training Dates Section */
.training-section {
    background-color: #00A9A418; /* Light teal background for Training */
    border-left: 4px solid #00A9A4; /* Teal left border for distinction */
}

/* Conference Dates Section */
.conference-section {
    background-color: #58379518; /* Light lavender background for Conference */
    border-left: 4px solid #583795; /* Purple left border for distinction */
}

/* Calendar Links Styling */
.calendar-links {
    display: flex; /* Ensures items are aligned inline */
    align-items: center; /* Vertically centers the items */
    gap: 10px; /* Adds uniform spacing between elements */
}

.calendar-links span {
    font-family: 'Interstate Regular', Arial, sans-serif;
    font-size: 0.9rem;
    color: #414141;
}

.calendar-links a {
    font-size: 0.8rem; /* Slightly larger icons */
    text-decoration: none;
}

.calendar-links a:hover {
    color: #2AACE3; /* Color on hover for icons */
    text-decoration: underline;
}

/* Common Card Styles */
.card-title {
    font-family: 'Interstate Bold', Arial, sans-serif;
    color: #183053;
}

.card-text {
    font-family: 'Interstate Regular', Arial, sans-serif;
    color: #414141;
}

/* Footer Styles */
footer {
    background-color: #000;
    color: #ffffff;
    margin-top: auto;
}

footer a {
    color: #ffffff;
    transition: color 0.3s ease;
}

footer h5 {
    font-family: 'Interstate Bold', Arial, sans-serif;
    margin-bottom: 15px;
}

footer p {
    font-family: 'Interstate Regular', Arial, sans-serif;
    margin-bottom: 10px;
}

/* Sponsor Section Styles */
.bg-dark-overlay {
    background-color: #333333; /* Darker background color */
    padding: 20px 20px 0px 20px;
    border-radius: 8px; /* Optional: Adds rounded corners */
}

.gold-sponsor {
    max-width: 400px;
}

.sponsor-image {
    max-height: 200px;
    object-fit: contain;
}

/* Parallax Scrolling Section */
.parallax-section {
    background-image: url('images/bg.jpg'); /* Path to your background image */
    background-attachment: fixed; /* Creates the parallax effect */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px; /* Adjust height for a small slice effect */
    margin: 0px 0 0px 0; /* Adds some space above and below the parallax section */
}

/* Mailing list signup button */
#mc_embed_signup .button {
    background-color: #555;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
#mc_embed_signup .button:hover {
    background-color: #777;
}

/* Training Section Styles */
#trainings {
}

.training-img {
    border-radius: 0px !important;
    border-bottom: 3px solid transparent;
    border-right: 3px solid transparent;
    box-shadow: 2px 2px #000;
}

#trainings div.card {
    /* border: 1px solid #e3e6ea;
    background-color: rgb(255, 227, 182) !important;
    */
    /*background-color: #E6F6F6 !important;*/
    border-radius: 0px;
    border-bottom: 2px solid #000;
}