/* CSS */

main {
  font-family: 'Poppins', sans-serif;
}

/* Nev */
.logo {
  max-height: 40px;
}

.active a{ 
  color: aliceblue;
  text-decoration: overline;
  text-decoration-thickness: 1px;
}


/* Index */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInUp {
  animation: fadeInUp 5s ease-out;
}

.text-center p {
	color: grey;
}

.card-title {
  color: crimson;
}

/* border hover effect */
.hover-effect {
  transition: border-color 0.2s, border-width 0.1s; /* hover effect time manage */
  border: 0px solid transparent; /* invisible at the beginning */
}

/* active border hover */
.hover-effect:hover {
  border-color: #989898; /* borders line color change */
  border-width: 1px; /* borders line thickness change */
}

.card-btn a {
  margin-top: 10px;
  padding: 10px 25px 10px 25px;
  border-radius: 20px;
}


/* Fashion */

.fashion-info p {
  margin-bottom: 45px;
}

#video-section {
  padding: 0;
}

.ratio {
  overflow: hidden;
}

#autoplay-video {
  object-fit: cover;
}

.fashion-item {
  background-color: #f8f9fa;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.fashion-item h3 {
  color: crimson;
}

.fashion-item img {
  max-width: 100%;
  border-radius: 5px;
}

.fashion-item .btn {
  width: 100%;     
}

.fashion-item:hover {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}


/* Food */

#food-section {
  margin: 0;
}

.food-title {
  margin-top: 55px;
}

.left-side {
 text-align: center;
}

.left-food {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;  
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 25px; 
  text-align: center; 
  text-shadow: 1.5px 1.5px 1.5px rgba(0, 0, 0, 0.2);
}

.left-food h2,
.left-food p,
.left-food h5,
.left-food a {
  margin: 0; /* zero margin */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content:space-between;
  align-items:flex-end;
  padding: 20px; 
  text-align: left;
  text-shadow: 1.5px 1.5px 1.5px rgba(0, 0, 0, 0.2);  
}

.overlay h2,
.overlay p,
.overlay h5,
.overlay a {
  margin: 0; 
}

.overlay a {
  text-decoration: none;
}

.left-img {
  width: auto;
  height: auto; 
}

.right-img {
  width: 100%; 
  height: 246px;
}


/* Film */

.film-box {
  border: 1px solid white;
}

.film-box h5 {
  color: white;
}

.ratio {
  border-top-left-radius: 0.25rem; 
  border-top-right-radius: 0.25rem; 
}


/* Blog */

.img-opacity:hover {
  opacity: 0.7; 
  transition: opacity 0.3s ease; 
}


/* Footer */

footer a {
    text-decoration: none; 
    color: white; 
}
  
footer a:hover {
	color: rgba(243, 58, 106, 1);
}

footer h5 {
	color: #f33a6a99;
}


/* hover etc */
.hover-effect1 {
  transition: background-color 0.3s; /* 배경색 변화의 전환 시간을 조절합니다. */
  background-color: lightgray; /* 초기 배경색을 설정합니다. */
  padding: 20px; /* 요소의 패딩을 추가하여 내용을 강조합니다. */
}

/* hover active etc */
.hover-effect1:hover {
  background-color: #007bff; /* 호버 상태에서 배경색을 변경합니다. */
}


/* Scroll btn */

.scroll-to-top-btn {
  position: fixed;
  bottom: 20px; 
  right: 20px; 
  background-color: rgba(243, 58, 106, 0.6);
  color: #fff;	
  border: none;
  border-radius: 50%;
  padding: 10px; 
  font-size: 14px; 
  font-weight: bold; 
  cursor: pointer;
  transition: opacity 0.3s ease;
  opacity: 0;
  z-index: 9999; /* Float on other elements */
  text-align: center; 
  line-height: 20px; 
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); 
}

/* Scroll in the middle */
.show-scroll-btn {
  opacity: 1; 
}

.scroll-to-top-btn:hover {
  background-color: rgba(243, 58, 106, 1); 
}

.scroll-to-top-btn:focus {
  outline: none; 
}


/* Media Query */

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  
  .col {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  #carousel-section .carousel-item img {
    height: 300px; 
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
 
  .col-sm {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  #carousel-section .carousel-item img {
    height: 300px; 
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  
  .col-md {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  #carousel-section .carousel-item img {
    height: 400px; 
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  
  .col-lg {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  #carousel-section .carousel-item img {
    height: 600; 
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  
  .col-xl {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  #carousel-section .carousel-item img {
    height: 600px; 
  }
}