/* public/css/style.css */
body {
    font-family: "Kanit", sans-serif; /* Example Google Font */
}

.hero-section .container-fluid {
    /* Add overlay or gradient if needed */
    position: relative;
    justify-content: flex-start;
    height: 100vh;
    z-index: 1;
}

.hero-section .container-fluid::before {
    content: "";
    position: absolute;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.6),
        rgba(0, 0, 0, 0.1)
    );
    z-index: -1;
}

/* Adjust navbar height or spacing if desired */
.navbar-brand img {
    margin-right: 10px; /* Space between logo and text if text is added */
}

.bg-custom-green {
    background-color: #26a02d; /* A shade of blue, similar to the original image's header bar */
    /* If you want a more distinct green, try: */
    /* background-color: #28a745; */ /* Bootstrap's success green */
    /* background-color: #1a5e30; */ /* A darker, richer green */
    /* You can pick any hex color code that matches your desired green */
}

/* Navbar default transparent state */
.transparent-navbar {
    background-color: transparent !important; /* Make it fully transparent */
    transition: background-color 0.3s ease-in-out; /* Smooth transition for background color */
}

/* Adjustments for the navbar text when using navbar-dark */
.navbar-dark .navbar-nav .nav-link {
    color: rgba(
        255,
        255,
        255,
        0.85
    ); /* Default white text for transparent state */
    transition: color 0.3s ease-in-out; /* Smooth transition for link color */
}

.navbar-dark.bg-custom-green .navbar-nav .nav-link {
    color: #ffffff; /* Solid white text when green background is applied */
}

/* Adjust dropdown menu colors for consistency if needed */
.navbar-dark.transparent-navbar .dropdown-menu {
    background-color: #26a02d;
    /* background-color: rgba(
        46,
        62,
        78,
        0.8
    ); Slightly transparent dark for dropdowns in transparent state */
}

.navbar-dark.bg-custom-green .dropdown-menu {
    background-color: #2e3e4e; /* Solid dark for dropdowns in solid state */
    color: #ffffff;
}
/* Add this to your public/css/style.css file */

/* ... (Existing styles for .student-activities-section, .custom-card, etc.) ... */

.student-services-section {
    background-color: #ffffff; /* White background for this section */
    /* Add padding-top/bottom as needed, py-5 already does this via Bootstrap */
}

.student-services-section h2 {
    font-size: 2.2rem; /* Consistent font size for main titles */
    color: #ffffff;
    margin-bottom: 3rem;
    position: relative;
}

.student-services-section h2::after {
    content: "";
    display: block;
    width: 60%;
    height: 1px;
    background-color: #ddd;
    margin: 1rem auto 0 auto;
}

.custom-service-card {
    /* No borders or shadows by default, as seen in the image */
    /* You might add a subtle hover effect if desired */
    border: none;
    background-color: transparent; /* No background for the card itself */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%; /* Ensure consistent height within the grid */
}

.custom-service-card:hover {
    /* Optional: Add a subtle effect on hover */
    /* background-color: rgba(0, 0, 0, 0.03); */
    /* border-radius: 0.5rem; */
}

.custom-service-icon {
    width: 100px; /* Adjust icon size as needed */
    height: 100px;
    border-radius: 50%; /* Make it circular */
    background-color: #33d6a2; /* Purple background for the icon circle */
    padding: 15px; /* Padding inside the circle */
    object-fit: contain; /* Ensure icon scales properly inside the circle */
    // filter: brightness(0) invert(1); /* Makes black/dark icons white */
    /* If your SVG icons are already white, you might not need the filter */
    margin-bottom: 10px; /* Space between icon and text */
}

.custom-service-card p {
    color: #343a40; /* Dark text color */
    font-size: 0.95rem; /* Adjust font size */
    line-height: 1.2; /* Adjust line height for multi-line text */
}