/* General Dark Mode Styling */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #181818; /* Dark background for the entire page */
    color: #e0e0e0; /* Brighter text for better contrast */
}

.navbar-nav .nav-link {
    color: #f5f5f5 !important; /* Light color for nav links */
}

    .navbar-nav .nav-link:hover {
        color: #4a8dda !important; /* Brighten color on hover */
    }
body {
    font-family: 'Roboto', sans-serif;
}
header {
    position: relative;
    background-image: url('../img/header-bg.png');
    background-size: cover;
    background-position: center;
    padding: 100px 0;
    color: #ffffff; /* Brighter text */
    min-height: 180px;
}

    header h1, header p {        
        color: #ffffff; /* White text */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Text shadow for better readability */
    }

section {
    padding: 60px 0;
}

    section.bg-dark {
        background-color: #202020; /* Dark but lighter than the body background */
    }

    section.bg-light-dark {
        background-color: #2a2a2a; /* Slightly lighter background */
    }

/* Card Styles */
.card {
    background-color: #2e2e2e; /* Lighter background for cards */
    color: #e0e0e0; /* Brighter text inside cards */
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1); /* Subtle shadow for depth */
    border-radius: 10px;
}

.card-title, .card-text {
    color: #f5f5f5; /* Ensure text is readable inside the card */
}

/* Buttons */
.btn-primary {
    background-color: #3465a4; /* More distinct button color */
    border-color: #3465a4;
}

    .btn-primary:hover {
        background-color: #4a8dda; /* Brighter hover effect */
    }

.btn-outline-primary {
    border-color: #f5f5f5; /* Lighter border for better contrast */
    color: #f5f5f5;
}

    .btn-outline-primary:hover {
        background-color: #f5f5f5;
        color: #2a2a2a;
    }

/* Footer */
footer {
    background-color: #2a2a2a; /* Darker footer for separation */
    color: #ffffff;
}

/* Contact Form */
input, textarea {
    background-color: #2a2a2a; /* Dark background for input fields */
    color: #e0e0e0; /* Light text for inputs */
    border: 1px solid #4a4a4a; /* Border to separate inputs */
}

    input::placeholder, textarea::placeholder {
        color: #999999; /* Subtle placeholder text color */
    }

.navbar-brand{
    color: #f5f5f5 !important; /* Light color for the brand */
}

    .navbar-brand:hover {
        color: #ffffff !important; /* Brighten color on hover */
    }

.navbar-text{
    color: #f5f5f5 !important; /* Light color for the text */
    padding-left: 20px; /* Add some space to the left */
}
/* Cool Text Design for the Navbar Brand */
.cool-text {
    font-family: 'Poppins', sans-serif; /* Use a sleek and modern font */
    font-weight: 700; /* Bold text */
    font-size: 1rem; /* Slightly larger font */
    background: linear-gradient(45deg, #ffffff, #dedede, #4a8dda, #cecece);
    background-size: 200% 200%; /* Larger gradient background */
    -webkit-background-clip: text; /* Clips background to the text */
    -webkit-text-fill-color: transparent; /* Makes text transparent to show gradient */
    animation: gradientAnimation 4s ease-in-out infinite; /* Adds a smooth gradient animation */
    letter-spacing: 2px; /* Increase spacing between letters */
    transition: transform 0.3s ease-in-out; /* Smooth hover effect */
}

    .cool-text:hover {
        transform: scale(1.1); /* Slight zoom on hover */
    }

/* Animation for the gradient effect */
@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}