body {
            background-color: rgba(0, 0, 0, 0.001);
        }
        /* Font Styles for Headings */
        h1, h2, h3, h4 {
            font-family: 'Rubik', sans-serif;
            font-weight: bold;
            font-size: 80px;
            line-height: 90px;
            color: #363B3E;
        }

        h2 {
            font-size: 60px;
            text-transform: uppercase;
        }

        h3 {
            font-size: 25px;
        }

        h4 {
            font-size: 24px;
            font-weight: 500;
            line-height: 30px;
        }

        

        .section {
            margin-bottom: 5vh;
        }

        .navbar-brand {
            position: absolute;
            z-index: 99;
            left: 30%;
            top: 0;
            padding: 0 40px 10px 40px;
            padding-top: 20px;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            background-color: #fff;
            /* background-color: #4a148c; */
        }

        .logo {
            margin-top: 0 rem;
            width: 240px;
        }

        .title {
            font-size: 80px;
            font-weight: bolder;
        }

        .gallery {
            img {max-width: 300px;}
            .image-grid div  {
                margin-top: 2vh;
                margin-bottom: 2vh;
            }
        }

        

        /* Custom Button Styles */
        .custom-button {
            background-color: #ffffff; /* White background */
            color: #000000; /* Black text */
            font-weight: bold;
            text-align: center;
            font-size: small;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
        }
        .custom-button:hover {
            background-color: #f0f0f0;
            color: #000000;
        }

        /* Scruffy Row Styles */
        .scruffy-row {
            background-color: #000000; /* Dark background */
            position: relative;
            color: #ffffff;
            padding-top: 40px; /* Adjust for the pseudo-element height */
            padding-bottom: 40px;
        }
        .scruffy-row::before,
        .scruffy-row::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            height: 40px;
            background-image: url('/images/scruffy-edge.png');
            background-repeat: repeat-x;
        }
        .scruffy-row::before {
            top: 0;
            transform: rotate(180deg);
        }
        .scruffy-row::after {
            bottom: 0;
        }

        /* Textured Background */
        .textured-background {
            background-image: url('/images/light-brown-texture.png');
            background-repeat: repeat;
        }

        /* Navbar menu hover and active state */
        .navbar-nav .nav-link.active,
        .navbar-nav .nav-link:hover {
            background-color: #fff; /* Bootstrap primary color */
            color: #000;
            border-radius: 4px;
        }
        .sponsor_text_list ul {
            list-style-type: none;
            text-align: center;
        }
        /* Hero Section Styles */
        .hero {
            position: relative;
            background-image: url('./images/backgrounds/background_4_blurred.png');
            background-size: cover;
            background-attachment: fixed; /* Parallax effect */
            min-height: 60vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #fff;
        }
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8); /* 80% opacity overlay */
        }
        .hero-content {
            position: relative;
            z-index: 1;
        }
        /* Square Link Styles */
        .square-link {
            min-height: 220px;
            background-color: #0d6efd; /* Primary color */
            color: #fff;
            display: flex;
            align-items: bottom;
            justify-content: bottom;
            text-decoration: none;
            text-align: center;
            border-radius: 4px;
            margin-bottom: 15px;
        }
        .square-link:hover {
            background-color: #0b5ed7;
            color: #fff;
        }
        /* Image Grid */
        .image-grid img {
            width: 100%;
            height: auto;
            margin-bottom: 1vh;
            /* filter: grayscale(1.0); */
        }
        .image-grid img:hover {
            border: 1px solid lightblue;
            filter: grayscale(1.0);
            transition: opacity 0.3s, visibility 0.3s;
        }
        /* Footer Social Icons */
        .social-icons a {
            color: inherit;
            margin: 0 5px;
            font-size: 1.5rem;
        }
        /* Newsletter Input */
        .newsletter-form .form-control {
            border-radius: 0;
        }
        .newsletter-form .btn {
            border-radius: 0;
        }
        .lead {
            font-size: 24px;
            font-weight: 100;
            line-height: 40px;
            text-transform: none;
            padding-left: 5%;
            padding-right: 5%;
        }
        .lead strong {
            font-weight: bold;
        }



.ml-50 {
    margin-left: 50%;
}

/* Button styles */
.btn {
    border-radius: 0; /* 90° corners */
}

/* Light themed button */
.btn.light, .white {
    background-color: white;
    color: black;
    border: 1px solid black;
}

/* Dark themed button */
.btn.dark, .black {
    background-color: black;
    color: white;
    border: 1px solid white;
}

.btn.brand {
    background-color: #5f86d3;
    color: #fff;
    border-radius: 5px;
    font-weight: 700;
    font-size: 24px;
    padding: 10px 20px;
}
.btn.brand:hover {
    background-color: #526ea6;
    color: #f6d2e0;
    transition: 0.3s;
}

.text-white {
    color: white;
}
/* Container class to make images equal height and centered */
.img-equal-height {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.nav-link {
    color: white;
    font-weight: bold;
    padding:10%;
    text-transform: uppercase;
    font-size: 20px;
    border-radius: 5px;
}

/* Button styles */
.navbar-nav .nav-link, .navbar-nav .nav-link:hover, .navbar-nav .nav-link:active {
    
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link:hover {
    border-radius: 0;
    background-color: #5f86d3;
    text-decoration: underline;
    color: white;
    transition: 0.3s;
    border-radius: 5px;
}


.navbar-nav .nav-link.active {
    background-color: #fff;
    color: #5f86d3;
    margin: 0;
}

.bg-brand {
    background-color: #5f86d3;
}

.bg-text {
    color: #4a148c;
}

.bg-brown {
    background-color: #5B320D;
}

.bg-green {
    background-color: #3A5533;
}

.bg-grey {
    background-color: #3D3D3D;
}

.bg-brand-pink, .btn.bg-brand-pink {
    background-color: #e040fb;

}

.bg-brand-green {
    background-color: #c6ff00;
}

/* Image styling */
.img-equal-height img {
    max-height: 250px;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.4s ease, opacity 0.4s ease;
    opacity: 0.9;
}

/* Hover effect: Zoom and slight opacity change */
.img-equal-height img:hover {
    transform: scale(1.1);
    opacity: 1;
}

/* Fade-in effect */
.img-equal-height img {
    animation: fadeIn 0.5s ease-in-out;
}

.navbar-expand-md .navbar-nav .nav-link {
    padding: 0.5rem 1rem;
}

.color-white {
    color: white;
}


@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.9;
    }
}


        /* Responsive Adjustments */
        @media (max-width: 767px) {
            .hero {
                background-attachment: scroll;
            }
            .navbar-light {
                background-color: #e1e1e1;
            }
            .logo, .navbar-brand {
                display:none !important;
            }
            .footer-row {
                text-align: center;
            }
            .social-icons {
                justify-content: center;
            }
            .navbar-nav {
                color: #fff !important;
            }
            .nav-item .nav-link {
                color: #4a148c;
            }
            .nav-item:active {
                background-color: #5f86d3 !important;
                color: #fff !important;
            }
        }