@charset "utf-8";

body {
    background-color: #ff0000;  /* Red background color */
    color: #ffffff;             /* White text color for contrast */
}

/* Navbar styling */
.navbar {
    background-color: #005f99 !important; /* Navy Blue */
}

.navbar-brand, .nav-link {
    color: #ffffff !important; /* White */
}

.navbar-nav .nav-item.active .nav-link {
    color: #f1c40f !important; /* Yellow */
}

/* Carousel styling */
.carousel-caption h5 {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    color: #ffffff; /* White */
    padding: 10px;
}

.carousel {
    background-color: #333333; /* Dark Gray */
}

/* Button styling */
.btn-primary {
    background-color: #f50519; /* Red */
    border: none;
    transition: all 0.3s ease; /* Smooth transition */
    color: #ffffff; /* Ensure the text color is white */
}

.btn-primary:hover {
    background-color: #200303; /* Darker Red */
    color: #f1c40f; /* Yellow text on hover */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Custom box shadow on hover */
    transform: scale(1.05); /* Slightly enlarge the button */
}

/* Custom submit button for contact form */
.btn-custom-contact-form {
    background-color: #4caf50; /* Custom background color */
    color: #ffffff; /* Custom text color */
    border: none; /* Remove border */
    transition: all 0.3s ease; /* Smooth transition */
}

.btn-custom-contact-form:hover {
    background-color: #45a049; /* Darker color for hover effect */
    color: #f1c40f; /* Yellow text on hover */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Custom box shadow on hover */
    transform: scale(1.05); /* Slightly enlarge the button */
}

/* Card styling */
.card {
    background-color: #333333; /* Dark gray background for cards */
    color: #ffffff;            /* White text for cards */
}

.card-title {
    color: #005f99; /* Navy Blue */
}

.card-text {
    color: #b4b0b0; /* Dark Gray */
}

/* Text Center styling */
.text-center {
    color: #FBF8F8; /* Light Gray/White for contrast */
}

/* Banner image */
.banner {
    width: 100%;
    height: auto;
}

/* Container for cards */
.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.jumbotron {
    background-color: #333;  /* Dark background color */
    color: #fff;             /* White text color */
}

/* Custom form styles */
.form-group label {
    color: #ffffff; /* Custom label color */
}

.form-control {
    background-color: #1e1e1e; /* Custom input background color */
    color: #ffffff; /* Custom input text color */
    border: 1px solid #4caf50; /* Custom input border color */
}

.form-control:focus {
    background-color: #333333; /* Custom input background color on focus */
    color: #ffffff; /* Ensure text color remains white on focus */
    border-color: #80bdff; /* Custom border color on focus */
    outline: none; /* Remove default focus outline */
    box-shadow: 0 0 10px rgba(128, 189, 255, 0.5); /* Custom box shadow on focus */
}

/* Custom tricks */
input::placeholder, textarea::placeholder {
    color: #888888; /* Custom placeholder color */
}

input:focus::placeholder, textarea:focus::placeholder {
    color: transparent; /* Hide placeholder on focus */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .jumbotron {
        padding: 1rem;
    }

    .form-group label {
        font-size: 1.2rem;
    }

    .form-control {
        font-size: 1rem;
    }

    .btn-primary, .btn-custom-contact-form {
        width: 100%;
        margin-bottom: 1rem;
    }

    .card-container {
        flex-direction: column;
        align-items: center;
    }

    .card {
        margin-bottom: 1rem;
        width: 100%;
    }

    .navbar-nav {
        flex-direction: column;
        align-items: center;
    }

    .navbar-nav .nav-item {
        margin-bottom: 0.5rem;
    }

    .navbar-brand {
        font-size: 1.5rem;
    }
}