@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400&display=swap');
    @font-face {
        font-family: 'Gravord';
        src: url('media/fonts/gravord.otf') format('opentype');
        font-weight: normal;
        font-style: normal;
        font-display: swap; 
    }
    
    p, label, input {
        font-family: 'Cormorant', serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        font-size: 1rem;
    }
    
    .navbar-brand:hover, .nav-link:hover {
        color: #FEFEFE!important;
    }

    nav, button {
        font-family: 'Gravord', sans-serif !important;
        letter-spacing: 0.1em;
        font-size: 1.3rem;
        text-transform: uppercase;
    }
    nav .navbar-brand{
        color: #FEFEFE;
        font-size: 1.5rem;
    }
    .navbar .nav-link{
        color: #FEFEFE;
    }
    
    .navbar .nav-link.active {
        color: #FEFEFE;
        font-weight: bold;
    }
    
    .navbar {
        background-color: transparent;
        transition: background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    }
    
    /* This class will be applied via JavaScript on scroll */
    .navbar-scrolled {
        background-color: #212529 !important; /* Bootstrap's dark hex color */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }
    
    .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%28254, 254, 254, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
    }
    
    *.title{
        letter-spacing: 0.075em;
        font-family: "Gravord", sans-serif;
        font-optical-sizing: auto;
        font-size: 1.75rem;
    }
    
    body{
        background-color: #1A1A22;
        color: #FEFEFE;
    }
    
    /* Home */
    #home {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }
    
    .main {
        width: 100%;
        overflow-x: hidden;
    }
    
    
    /* Main Banner*/
    .main-banner {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }
    .main-banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .main-banner::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(26, 26, 34, 0.5), rgba(26, 26, 34, 0));
    }
    
    /* Press Release hover overlays */
    .press-item {
        position: relative;
        overflow: hidden;
        padding: 0;
        box-sizing: border-box;
    }
    .press-item:hover::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.75);
        z-index: 1;
    }
    .press-item-img {
        width: 100%;
        height: 340px;
    }
    .press-item-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .press-item-overlay-text {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        opacity: 0;
        color: #fff;
        text-align: center;
        padding: 1rem;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }
    .press-item:hover .press-item-overlay-text {
        opacity: 1;
    }
    
    /* Ensure that the newsletter image is behind the form :before effect */
    #newsletter .news-image{
        position: relative;
        overflow: hidden;
        min-height: 100%;
        z-index: -1; /* Ensure it stays behind the form */
    }
    /* Ensure the image has the same height as the form */
    #newsletter .news-image img{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* Diagonal shape before, creating a visual effect */
    #newsletter .news-form:before {
        display: none; /* Initially hidden, will be shown on larger screens */
        content: '';
        position: absolute;
        top: 0;
        left: 0; /* Adjust as needed */
        width: 100%;
        height: 100%;
        background-color: #1A1A22; /* Match the background color */
        transform: skewX(-10deg) translateX(-25%); /* Adjust the angle as needed */
        z-index: -1; /* Ensure it stays behind the form */
    }
    
    #footer {
        background-color: #212529;
        color: #FEFEFE;
        text-align: center;
    }
    
    @media (min-width: 768px) {
        #newsletter .news-form:before {
            display: block; /* Show the diagonal shape on larger screens */
        }
    }