/* 네비게이션 바 스타일 */
.navbar {
  background-color: #333;
  padding: 15px;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}

.navbar-nav {
  list-style-type: none;
  display: flex;
  justify-content: center;
}

.nav-item {
  position: relative;
  margin: 0 15px;
}

.nav-link {
  color: white;
  text-decoration: none;
  padding: 10px 15px;
  display: inline-block;
  font-size: 15px;
}

.nav-link:hover {
  background-color: #575757;
  border-radius: 5px;
}

/* 메인 섹션 이미지와 텍스트 나란히 배치 */
.main-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  margin-top: 50px !important;
}

.main-section img {
  width: 30%;
  margin-right: 20px;
}

.main-section .text-container {
  width: 50%;
  padding-left: 100px;
  white-space: pre-wrap; /* 띄어쓰기를 유지 */
}

div.main-section div.text-container p {
  font-size: 80px;
  line-height: 3;
}

.left-image {
  width: 50%;
  margin-right: 20px;
}

.right-text {
  width: 50%;
  padding-left: 100px;
  white-space: pre-wrap; /* 띄어쓰기를 유지 */
}

.main-section::after {
  content: "";
  display: table;
  clear: both;
}

/* 공통 스타일 */
.services {
    margin-bottom: 30px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none; /* 테두리 제거 */
    box-shadow: none; /* 박스 그림자 제거 */
    background-color: transparent; /* 배경색 제거 */
}

/* 하위 및 상위 서비스 이미지와 텍스트 배치 */
.left-image {
    width: 40%;
    margin-right: 20px;
}

.right-text {
    width: 55%;
}

/* 상위 서비스 섹션 스타일 */
.upper-management, .upper-engineering {
    display: block; /* Flex 사용 대신 블록 레이아웃 사용 */
    padding: 20px;
    margin-bottom: 30px;
    border: none; /* 테두리 제거 */
    background-color: transparent; /* 배경색 제거 */
    box-shadow: none; /* 박스 그림자 제거 */
    scroll-margin-top: 80px; /* 이 부분은 스크롤 조정에 사용되므로 유지 */
}


/* 이미지와 텍스트를 수평으로 배치 */
.upper-management .content-container, .upper-engineering .content-container {
    display: flex;
    align-items: center;    /* 이미지와 텍스트를 수직 가운데 정렬 */
    gap: 20px;              /* 이미지와 텍스트 사이 간격 */
    margin-top: 20px;       /* 제목과 이미지/텍스트 간의 간격 */
}

/* 이미지 스타일 */
.upper-management img, .upper-engineering img {
    width: 30%;             /* 이미지 크기 설정 */
    height: auto;           /* 이미지 비율 유지 */
}

/* 텍스트 정렬 */
.upper-management .right-text, .upper-engineering .right-text {
    flex: 1;                /* 텍스트가 남은 공간을 차지하도록 설정 */
    text-align: left;       /* 텍스트 왼쪽 정렬 */
    margin-bottom: 50px;
    width: 50%;
    padding-left: 100px;
    white-space: pre-wrap; /* 띄어쓰기를 유지 */
}

#management-services, #engineering-services {
    display: flex;
    flex-direction: column; /* 하위 서비스가 상위 서비스 아래에 배치되도록 */
    margin-bottom: 30px;
}

/* 하위 서비스 섹션 스타일 */
.service-section {
    flex: 1 1 30%;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    cursor: pointer;
    text-align: center;
    transition: transform 0.3s ease;
}

.service-section img {
    width: 30%;
    height: auto;
    margin-bottom: 10px;
}

.service-section h3 {
    font-size: 16px;
    margin-bottom: 10px;
}

.service-section p {
    font-size: 14px;
    line-height: 1.4;
    max-height: 60px;  /* 텍스트가 처음에 길지 않게 */
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.service-section.expanded {
    flex: 1 1 100%; /* 클릭하면 전체 넓이로 확장 */
    padding: 30px;
    transform: scale(1.05); /* 약간 확대 효과 */
}

.service-section.expanded p {
    max-height: none;  /* 텍스트 전체를 표시 */
}


.subsection-box {
    flex: 1 1 30%;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    text-align: center;
    background-color: #f9f9f9;
    transition: transform 0.3s ease;
    font-size: 22px;
}



.subsection-box img {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
}


.subsection-box h3 {
    font-size: 22px;
    margin-bottom: 10px;
}

.subsection-box p {
    font-size: 22px;
    max-height: 40px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}


.subsection-box:hover {
    transform: scale(1.05);
}

.subsection-box.expanded {
    height: auto;
    padding: 30px;
    transform: scale(1.05);
}

.subsection-box.expanded img {
    width: 100%;
}

.subsection-box.expanded p {
    max-height: none;
}
/* 팝업 오버레이 스타일 */
  .popup-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* 반투명 검정 배경 */
      z-index: 999;
      display: none; /* 처음에는 보이지 않음 */
  }

  /* 팝업 창 스타일 */
  .popup {
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 2000px;
      background-color: white;
      border-radius: 8px;
      padding: 20px;
      z-index: 1000;
      flex-direction: column;   /* 세로 방향 정렬 */
      display: flex;            /* Flexbox 활성화 */
      align-items: center;      /* 가로축 중앙 정렬 */
  }



  .popup img {
      max-width: 30%;
      height: auto;
  }

  .popup p {
      margin-top: 10px;
      font-size: 22px;
      white-space: pre-wrap;
      line-height: 1.5;
  }

  .popup-close {
      cursor: pointer;
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 22px;
  }

/* 모바일 반응형 스타일 */
@media (max-width: 768px) {
    .upper-management, .upper-engineering {
        flex-direction: column;
        align-items: flex-start;
    }

    .upper-management img, .upper-engineering img {
        width: 100%;
        margin-bottom: 20px;
    }


    .service-section img {
        width: 100%;
        margin-bottom: 20px;
    }

    .service-section h2, .service-section p {
        width: 100%;
    }

    .subsection-container {
        flex-direction: column;
    }

    .subsection-box {
        width: 100%;
    }

    .popup {
        width: 90%;
        max-width: 100%;
    }
}



* 각 단어에 적용될 애니메이션 */
.animated-word {
  display: inline-block;
  opacity: 0;
  font-weight: normal;
  transform: scale(1);
  transition: font-weight 10s ease, transform 10s ease;
  animation: fadeInOut 5s infinite; /* 무한 반복 애니메이션 */
}

/* 애니메이션 정의 */
@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: scale(1);
    font-weight: normal;
  }
  50% {
    opacity: 1;
    transform: scale(1.2); /* 약간 확대 */
    font-weight: bold;
  }
  100% {
    opacity: 0;
    transform: scale(1);
    font-weight: normal;
  }
}

/* 애니메이션의 딜레이 효과 적용 */
.animated-word {
  animation-delay: 10s; /* 각 단어마다 다른 딜레이 적용 */
}