/* Custom styles for TA2WEB */

/* Apply padding to the body to prevent content from hiding behind the fixed header */
body {
    padding-top: 110px; /* Adjust this value based on the height of your header */
}

/* Media query for medium and larger screens */
@media (min-width: 768px) {
    body {
        padding-top: 110px; /* Adjust padding for medium and larger screens */
    }
}

/* Define the height of the fixed top */
.fixed-top {
    height: 110px; /* Or whatever height your header logo requires */
}

/* Define the height of the fixed header */
.fixed-header {
    height: 65px; /* Or whatever height your header logo requires */
}

/* Ensure header and main container widths match */
.header-container, .main-container {
    max-width: 1140px; /* Adjust to your desired maximum width */
    margin-left: auto;
    margin-right: auto;
}

/* Adjust padding for main content */
.main-container {
    padding: 1rem; /* Default padding for small screens */
}

@media (min-width: 576px) {
    .main-container {
        padding: 1.5rem; /* Slightly more padding for small screens and up */
    }
}

@media (min-width: 768px) {
    .main-container {
        padding: 2rem; /* More padding for medium screens and up */
    }
}

@media (min-width: 992px) {
    .main-container {
        padding: 2.5rem; /* More padding for large screens and up */
    }
}

@media (min-width: 1200px) {
    .main-container {
        padding: 3rem; /* Maximum padding for extra large screens and up */
    }
}

/* Custom color for headings */
h1 {
    color: #F4F4F4; /* Replace with your desired color */
}

h2 {
    color: #E2E2E2; /* Replace with your desired color */
}

h3, h4, h5, h6 {
    color: #D5D5D5; /* Replace with your desired color */
}

/* Custom navigation styles */
.nav-scroller {
    background-color: transparent;
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
}

.nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

/* Example of customizing Bootstrap components */
.btn-primary {
    background-color: #0056b3; /* Change primary button color */
    border-color: #004494;
}

.btn-primary:hover {
    background-color: #004494; /* Change hover state */
    border-color: #00337a;
}

/* Blog posts */
.blog-post {
    margin-bottom: 2rem;
}

.blog-post-meta {
    margin-bottom: 1.25rem;
    color: #A4A4A4;
}

/* Additional custom styles */
.nav-item.nav-link {
    color: #fff;
}

.nav-item.nav-link.active {
    font-weight: bold;
}