body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}
header {
  background-color: #fff;
  color: #fff;
  padding: 0px;
  text-align: center;
  height: 150px;
  width: 100%;
}
nav {
  background-color: #444;
  opacity: 0.5;
  padding: 10px;
  text-align: center;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}
nav a {
  color: #fff;
  text-decoration: none;
  padding: 0 10px;
}
section {
  padding: 20px;
  margin-top: 20px; /* home 섹션과의 간격 조정 */
}
#home {
  background-color: #fff;
  height: auto; /* 기본값으로 설정하여 내용에 맞게 높이 조정 */
  padding-top: 38px; /* header의 높이만큼 상단 여백 추가 */
}
/* 각 섹션의 너비를 조정 */
#about, #services, #contact, #portfolio {
  padding: 20px 0; /* 위아래 20px, 좌우 0 */
  width: 100%;
  margin: 0 auto; /* 가운데 정렬 */
  max-width: 1200px; /* 최대 너비 설정 */
}


/* footer의 너비를 조정 */
footer {
  width: 100%;
  margin: 0 auto; /* 가운데 정렬 */
  max-width: 1200px; /* 최대 너비 설정 */
}

#banner {
  margin: 0 auto; /* 가운데 정렬 */
  max-width: 1200px; /* 최대 너비 설정 */
  width: 100%; /* 전체 화면일 때 너비 조정 */
  height: auto; /* 비율 유지 */
  max-height: 500px;
}


.portfolio-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 0;
  margin: 0;
}

.portfolio-item {
  flex-basis: calc(25% - 20px); /* 포트폴리오 아이템의 기본 너비 */
  margin: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s;
  height:300px;
}

.portfolio-item img {
  width: 100%;
  height: auto;
}

.portfolio-item p {
  padding: 15px;
  text-align: center;
  background: #f3f3f3;
}

/* 화면 크기에 따른 반응형 조정 */
@media (max-width: 800px) {
  .portfolio-item {
    flex-basis: calc(50% - 20px);
  }
}

@media (max-width: 600px) {
  .portfolio-item {
    flex-basis: calc(100% - 20px);
  }
}

/* 마우스 오버 효과 */
.portfolio-item:hover {
  transform: scale(1.05);
}
.contact-links {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.contact-icon {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 0 20px;
  text-decoration: none;
  color: #333;
}

.contact-icon img {
  width: 50px; /* or any size you prefer */
  height: auto;
  margin-bottom: 8px;
}

.contact-icon span {
  text-align: center;
}

/* Optional: Add a hover effect to the icons */
.contact-icon:hover img {
  opacity: 0.7;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .contact-links {
    flex-direction: column;
  }
  
  .contact-icon {
    margin: 10px 0;
  }
}