* {
    font-family: sans-serif;
}

body,
ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}

body,
html {
    background-color: rgb(35, 38, 45);
    height: 100%;
    color: white;
}

html, body {
    height: 100%;
    margin: 0;
}

a {
    text-decoration: none;
    color: black;
}

/* CONTACT 메뉴 하위 항목 초기 상태 */
.contact-menu {
    position: relative;
}

.contact-menu .dropdown {
    position: absolute;
    top: 100%;
    left: 50%; /* 부모 컨테이너 기준 중앙 정렬 */
    transform: translateX(-50%); /* 중앙으로 이동 */
    background-color: #2d3039;
    padding: 10px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    opacity: 0;
    visibility: hidden; /* 숨겨진 상태 */
    border-radius: 10px; /* 모서리를 둥글게 */
    transition: opacity 1s ease, visibility 1s ease; /* 페이드 효과 1초 */
}

/* 하위 메뉴 스타일 */
.contact-menu .dropdown li {
    list-style: none;
}

.contact-menu .dropdown li a {
    padding: 10px 20px;
    display: block;
    color: white;
    text-align: center; /* 텍스트 가운데 정렬 */
    text-decoration: none;
    white-space: nowrap;
    border-radius: 10px; /* 각 메뉴 항목도 둥글게 설정 */
}

.contact-menu .dropdown li a:hover {
    background-color: #007bff; /* 마우스 오버 시 배경색 변경 */
}

/* Hover 시 하위 메뉴 표시 */
.contact-menu:hover .dropdown {
    opacity: 1; /* 페이드 인 효과 */
    visibility: visible; /* 1초 후 표시 */
}

/* 기존 햄버거 메뉴 스타일을 유지 */
.hamburger-menu {
    display: none; /* 기본적으로는 보이지 않도록 설정 */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    cursor: pointer;
    position: fixed;
    top: 15px;
    right: 20px;
    z-index: 1001; /* Ensure it's on top */
}

.hamburger-menu .bar {
    width: 100%;
    height: 4px;
    background-color: white;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.hamburger-menu.active .bar:nth-child(1) {
    transform: rotate(45deg) translateY(10px);
}

.hamburger-menu.active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active .bar:nth-child(3) {
    transform: rotate(-45deg) translateY(-10px);
}

.navigation.active {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 60px;
    right: 0;
    width: 200px;
    background-color: #2d3039;
    padding: 10px;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
}

/* 1000px 미만일 때 햄버거 메뉴 보이도록 설정 */
@media (max-width: 1000px) {
    .hamburger-menu {
        display: flex;
    }

    .navigation {
        display: none; /* 기본적으로는 숨김 */
    }

    .navigation.active {
        display: flex; /* 햄버거 메뉴 클릭 시 보임 */
    }
}

/* 모바일 메뉴 스타일 */
.mobile-menu {
    display: none; /* 기본적으로는 숨김 */
    position: fixed;
    top: 60px;
    right: 0;
    width: 200px;
    background-color: #2d3039;
    padding: 10px;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

.mobile-menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.mobile-menu li {
    margin: 15px 0;
}

.mobile-menu a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 10px 0;
    text-align: center;
    font-weight: bold;
}

/* 햄버거 메뉴를 클릭했을 때 보이도록 설정 */
.mobile-menu.active {
    display: block;
}

/* 1000px 이상에서는 모바일 메뉴가 보이지 않도록 설정 */
@media (min-width: 1000px) {
    .mobile-menu {
        display: none;
    }
}

.navigation {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #2d3039; /* 배경색을 필요에 따라 조정 */
    z-index: 1000; /* 다른 요소 위에 오도록 z-index 설정 */
    padding: 10px 20px; /* 메뉴 바의 내용과 여백 조정 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 선택적으로 그림자 추가 */
}

.navigation > li > a {
    font-weight: bold;
    padding: 1rem;
    display: block;
    color: #ffffff;
}

.navigation > li > img {
    font-weight: bold;
    padding: 1.0rem;
    display: block;
    width: 80%;
    height: auto;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.item {
    color: white;
}

.main_text {
    font-size: 80px;
}

.sub_text {
    font-size: 30px;
    color: gray;
}

.fade-in {
    opacity: 0;
    animation: fadeInAnimation 2s forwards;
}

@keyframes fadeInAnimation {
    to {
        opacity: 1;
    }
}

.container_bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 30vh;
}

.blue-button:hover {
    background-color: #0056b3; /* 마우스 오버 시 배경색 변경 */
}

.button-container {
    margin-top: 20px;
}

.section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70vh;
    opacity: 0;
    transition: opacity 3s;
    margin-bottom: 250px; /* Adjusted margin-bottom */
}

.section img {
    margin-right: 20px;
    margin-left: 20px;
    width: 33%;
    height: auto;
}

.section .description {
    max-width: 600px;
    text-align: left;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 10px;
    /*margin-left: 20px;*/
    /*margin-right: 20px;*/
    border-radius: 10px;
    flex: 1;
    font-size: 1.2rem;
    margin: 20px; /* Adjusted margin */
}

/* New styles for the content images */
.content-image {
    width: 800px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Animation class for section visibility */
.visible {
    opacity: 1 !important;
}

.footer {
    background-color: #2d3039;
    color: white;
    text-align: center;
    padding: 50px 0;
}

.footer h1 {
    margin-bottom: 20px;
}

.footer ul {
    list-style-type: none;
    padding: 0;
}

.footer ul li {
    margin-bottom: 10px;
}

.footer a {
    color: #ffffff;
    font-size: 1.2rem;
}

.container_bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30vh;
    margin-top: 20px; /* Adjusted margin-top */
}

.blue-button {
    display: inline-block;
    padding: 15px 30px;
    background-color: #007bff;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 10px;
    transition: background-color 0.3s ease;
    font-size: 1.2rem;
    width: 150px;
    margin-top: 20px; /* Adjusted margin-top */
}

@media (max-width: 1000px) {
    .section {
        flex-direction: column; /* 세로로 배치 */
        text-align: center;      /* 텍스트 가운데 정렬 */
        margin-bottom: 40px;     /* 각 섹션 간 여백 추가 */
        justify-content: center; /* 섹션의 요소를 가운데 정렬 */
        align-items: center;     /* 섹션의 요소를 수평 중앙 정렬 */
    }

    .section img {
        flex-basis: 50%;        /* 이미지가 최대 50%까지 줄어듦 */
        max-width: 70%;         /* 이미지 너비를 70%로 제한 */
        min-width: 300px;       /* 이미지의 최소 크기를 300px로 설정 */
        height: auto;           /* 이미지 비율 유지 */
        margin-bottom: 20px;    /* 이미지와 설명란 사이의 여백 */
        order: 1;               /* 이미지가 설명란보다 먼저 오도록 설정 */
    }

    .section .description {
        flex-basis: 50%;        /* 설명란이 나머지 50%를 차지 */
        max-width: 40%;         /* 설명란 너비를 50%로 제한 */
        min-width: 30%;         /* 설명란이 원본 크기 대비 30% 이하로 줄어들지 않도록 설정 */
        padding: 10px 20px;     /* 설명란 내부 패딩 */
        box-sizing: border-box; /* 패딩을 포함한 박스 크기 계산 */
        text-align: center;     /* 설명란 텍스트 정렬 */
        order: 2;               /* 설명란이 이미지 다음에 오도록 설정 */
    }

    .button-container {
        flex-direction: column; /* 작은 화면에서 버튼을 세로로 배치 */
        align-items: center;    /* 버튼을 가운데 정렬 */
        text-align: center;     /* 텍스트를 가운데 정렬 */
    }

    .blue-button {
        width: 100%;           /* 작은 화면에서는 버튼이 전체 너비를 차지 */
        max-width: 300px;       /* 최대 너비를 제한하여 너무 커지지 않도록 설정 */
        margin: 10px 0;         /* 버튼 위아래에 여백을 추가 */
    }

    .main_text {
        font-size: 30px;
    }
}

/* 700px 이하의 더 작은 화면에서 레이아웃 조정 */
@media (max-width: 700px) {
    .section {
        flex-direction: column; /* 작은 화면에서 세로로 배치 */
        text-align: center;
        margin-bottom: 30px; /* 더 작은 화면에서 섹션 간 여백 조정 */
    }

    .section img {
        flex-basis: 100%;     /* 이미지가 화면 너비 100% 차지 */
        max-width: 100%;      /* 이미지 너비 100%로 유지 */
        min-width: unset;     /* 최소 크기 제한 해제 */
        margin-bottom: 20px;  /* 이미지 아래에 여백 추가 */
        order: 1;             /* 이미지가 설명란보다 먼저 오도록 설정 */
    }

    .section .description {
        flex-basis: 100%;     /* 설명란도 화면 너비를 100% 차지 */
        max-width: 100%;      /* 설명란 너비를 100%로 설정 */
        padding: 10px;        /* 설명란의 패딩 조정 */
        min-width: unset;     /* 최소 크기 제한 해제 */
        box-sizing: border-box; /* 패딩을 포함한 박스 크기 계산 */
        text-align: center;   /* 설명란 텍스트 가운데 정렬 */
        order: 2;             /* 설명란이 이미지 다음에 오도록 설정 */
    }

    .button-container {
        flex-direction: column; /* 작은 화면에서 버튼을 세로로 배치 */
        align-items: center;    /* 버튼을 가운데 정렬 */
        text-align: center;     /* 텍스트를 가운데 정렬 */
    }

    .blue-button {
        width: 100%;           /* 작은 화면에서는 버튼이 전체 너비를 차지 */
        max-width: 300px;       /* 최대 너비를 제한하여 너무 커지지 않도록 설정 */
        margin: 10px 0;         /* 버튼 위아래에 여백을 추가 */
    }
}