@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Sunflower:wght@300&display=swap');

:root {
    --main-color: #00976a; /* Define main color variable */
}

* {
    font-family: 'Nanum Gothic', sans-serif;
}

.navbar-brand img {
    height: 35px;
}

/* Add styles for carousel captions */
.carousel-caption {
    top: 62%;
    transform: translateY(-50%);
    text-align: left;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add drop shadow */
}

.carousel-caption h2 {
    font-weight: bolder;
}

/* Add transparency and drop shadow to the navbar */
.navbar {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add drop shadow */
}

.navbar-transparent {
    opacity: 0.9; /* Adjust transparency */
}

.container h2 {
    border-left: 5px solid var(--main-color); /* Use main color variable */
    padding-left: 5px;
    margin-bottom: 20px;
}

/* Add animation for carousel images */
.carousel-item img {
    transition: transform 5s linear;
}

.carousel-item.active img {
    transform: scale(1.1);
}

/* Add padding to sections */
#about, #news {
    padding: 80px 0; /* Adjust this value based on the height of your navbar */
}

.about-card {
    border-radius: 5px;
    padding: 15px;
    margin: 25px 0;
}

.news-card {
    border: silver 1px solid;
    border-radius: 5px;
    padding: 15px;
    margin: 25px 0;
}

.news-card button {
    color: var(--main-color);
    border-color: var(--main-color);
}

.news-card button:hover {
    background-color: var(--main-color);
    color: white;
}

#news h3{
    color: var(--main-color); /* Use main color variable */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Add drop shadow */
}

.about-card ul {
    list-style-type: none;
    padding-left: 0;
}

.about-card ul li::before {
    content: "🔹"; /* Use emoji as bullet point */
}

.navbar-nav .nav-link:hover {
    border-bottom: 2px solid var(--main-color); /* Add green border on hover */
}

.navbar-nav .nav-link {
    transition: transform 0.2s ease-in-out;
}

.navbar-nav .nav-link:active {
    transform: scale(1.1);
}

.vision-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

@keyframes backgroundScaleAnimation {
    0%, 100% {
        background-size: 100%;
    }
    50% {
        background-size: 110%;
    }
}

.vision-background {
    min-height: 400px;
    background-image: url('img/future.jpg'); 
    background-size: 100%; /* Start with normal size */
    background-position: center;
    animation: backgroundScaleAnimation 20s infinite; /* Apply scaling animation to the background */
}