/* 기본 설정 */
body {
    font-family: 'Noto Sans KR', sans-serif;
    color: #333;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
}

.header-logo-container {
    padding-right: 8px;
}

.header-logo {
    max-height: 40px;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box; /* 패딩과 보더를 포함한 전체 크기 계산 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: transparent;
    transition: background-color 0.3s ease;
    padding-left: 20px; /* 네비게이션 바의 좌측 여백 추가 */
    padding-right: 20px; /* 네비게이션 바의 우측 여백 추가 */
}

.navbar-brand {
    padding-left: 15px; /* 로고 부분에 추가적인 좌측 여백 */
    height: 100%;
    color: #43558b;
}

.navbar.scrolled {
    background-color: rgba(0, 0, 0, 0.8); /* 스크롤 시 네비게이션 배경 색상 */
}

/* 헤더 스타일 개선 */
.main-header {
    position: relative;
    color: white;
    padding: 120px 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    overflow: hidden; /* 헤더 내에서 이미지를 제한 */
    transition: background-color 0.3s ease;
}

.main-header .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.25);
    z-index: 1;
    pointer-events: none; /* 배경 도형이 클릭 이벤트를 차단하지 않도록 설정 */
}

.main-header .text-shadow {
    text-shadow:
        -0.5px -0.5px 0.5px black, /* 왼쪽 위 */
         0.5px -0.5px 0.5px black, /* 오른쪽 위 */
        -0.5px  0.5px 0.5px black, /* 왼쪽 아래 */
         0.5px  0.5px 0.5px black, /* 오른쪽 아래 */
        -1px -1px 1px black,       /* 더 멀리 왼쪽 위 */
         1px -1px 1px black,       /* 더 멀리 오른쪽 위 */
        -1px  1px 1px black,       /* 더 멀리 왼쪽 아래 */
         1px  1px 1px black,       /* 더 멀리 오른쪽 아래 */
        -1.5px -1.5px 1.5px black, /* 가장 멀리 왼쪽 위 */
         1.5px -1.5px 1.5px black, /* 가장 멀리 오른쪽 위 */
        -1.5px  1.5px 1.5px black, /* 가장 멀리 왼쪽 아래 */
         1.5px  1.5px 1.5px black; /* 가장 멀리 오른쪽 아래 */
}
    
    font-weight: bold;
}

#learn-more-btn {
    z-index: 13;
}

.image-container2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0; /* 배경 이미지가 다른 요소 뒤에 있도록 설정 */
}

.image-container2 img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 영역을 꽉 채우도록 설정 */
    animation: zoom-in-out 10s ease-in-out infinite;
}

/* 애니메이션 키프레임 */
@keyframes zoom-in-out {
    0%, 100% {
        transform: scale(1); /* 원래 크기 */
    }
    50% {
        transform: scale(1.05); /* 살짝 확대 */
    }
}



.main-header h1, .main-header p {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.main-header .btn {
    font-size: 1.25rem;
    padding: 10px 30px;
    z-index: 1;
    background-color: #ff6b6b; /* 주요 버튼 색상 */
    border: none;
    border-radius: 30px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.main-header .btn:hover {
    background-color: #ff4b4b;
    transform: scale(1.05);
}

.main-header.scrolled {
    background-color: #333; /* 스크롤 시 헤더 배경색 */
}

.animated-text {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}

.animated-btn {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease 0.5s; /* 버튼은 텍스트 이후에 애니메이션 */
}

/* 페이지가 로드되면 텍스트와 버튼에 애니메이션 적용 */
body.loaded .animated-text {
    opacity: 1;
    transform: translateY(0);
}

body.loaded .animated-btn {
    opacity: 1;
    transform: translateY(0);
}

/* 반응형 헤더 스타일 */
@media (max-width: 768px) {
    .main-header h1 {
        font-size: 2.5rem;
    }

    .main-header p {
        font-size: 1.25rem;
    }

    .main-header .btn {
        font-size: 1rem;
        padding: 8px 20px;
    }
}

@media (max-width: 576px) {
    .main-header h1 {
        font-size: 2rem;
    }

    .main-header p {
        font-size: 1rem;
    }

    .main-header .btn {
        font-size: 0.875rem;
        padding: 6px 16px;
    }
}

.navbar-nav .nav-link {
    color: #555; /* 기본 링크 색상 */
    font-weight: 400; /* 기본 링크 굵기 */
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: #6CACE4; /* 마우스 오버 시 링크 색상 (파스텔 블루) */
}

.navbar-nav .nav-link.active {
    color: #6CACE4; /* 활성화된 링크 색상 (파스텔 블루) */
    font-weight: 700; /* 활성화된 링크 굵기 */
}