@charset "utf-8";
html, body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}
.carousel-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.main-carousel2 {
  margin: 150px 0; 
  position: relative; 
  z-index: 4;
  width: 100%;
}
.content_area .inner {padding: 24px; width: 100%; box-sizing: border-box;}
.main-carousel2 {position: relative; margin-top: 46px; height: 377px;}
.main-carousel2 .li { 
  height: 447px; 
  background-color: #fff; 
  position: relative; 
  overflow: hidden;
  width: 100%; 
  box-sizing: border-box;
}
.main-carousel2 .li dl {transition: opacity 0.3s ease;}
.main-carousel2 .li .txtin {
  display: none;
  padding: 40px; 
  position: absolute; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  box-sizing: border-box; 
  background-color: #fff;
}
.main-carousel2 .li dt img {width: 100%; height: 300px; object-fit: cover;}
.main-carousel2 .li .tag {font-size: 14px; font-weight: 500; line-height: 1.5; color: #6ec5ff; display: block; padding: 20px 20px 0 20px}
.main-carousel2 .li .tit {font-size: 18px; font-weight: normal; line-height: normal; color: #555; display: block; margin-top: 3px; padding: 10px 20px 0 20px}
.main-carousel2 .li p {font-size: 16px; font-weight: normal; line-height: 1.5; letter-spacing: normal; color: #718096; margin-top: 10px; padding: 0 20px}
.main-carousel2 .li a.btn {margin-top: 20px; font-size: 14px; font-weight: bold; line-height: 20px; color: #000; display: inline-block; padding: 0 20px}
.main-carousel2 .li a.btn img {width: 20px; margin-left: 5px; vertical-align: middle; display: inline-block}
.main-carousel2 .li .info {position: absolute; left: 0; bottom: 0; padding: 0 40px 0 20px; width: 100%; box-sizing: border-box; display: flex; justify-content: space-between;}
.main-carousel2 .li .info .user {display: inline-block; font-size: 14px; line-height: 30px; color: #000000;}
.main-carousel2 .li .views {font-size: 12px; font-weight: normal; line-height: 30px; color: #718096;}

/* Desktop hover effect */
@media (hover: hover) and (pointer: fine) {
  .main-carousel2 .li:hover {transform: scale(1.05); z-index: 6; transition: transform 0.3s ease;}
  .main-carousel2 .li:hover dl {opacity: 0;}
  .main-carousel2 .li:hover .txtin {display: block; opacity: 1; transition: opacity 0.3s ease;}
}

/* Mobile styles - no hover effect */
@media (hover: none) and (pointer: coarse) {
  .main-carousel2 .li {transform: none !important; transition: none !important;}
  .main-carousel2 .li .txtin {display: none !important;}
  .main-carousel2 .li dl {opacity: 1 !important;}
}

.main-carousel2 .owl-dots{position: absolute; width: 100%; text-align: center; margin: 0 auto; bottom: -135px;}
.main-carousel2 .owl-dots .owl-dot{background: #ddd; width: 30px; height: 5px; display: inline-block; margin-left: 10px; border: 0}
.main-carousel2 .owl-dots .owl-dot.active{background: #000}

.main-carousel2 .owl-nav{position: absolute; width: 100%; bottom: 50%}
.main-carousel2 .owl-nav .owl-prev{width: 40px; height: 30px; position: absolute; left: -70px; font-size: 14px; color: #fff; border-top: 1px solid #fff; border-left: 0; border-right: 0; border-bottom: 0; padding-top: 5px; text-align: center; background-color: transparent; cursor: pointer}
.main-carousel2 .owl-nav .owl-next{width: 40px; height: 30px; position: absolute; right: -70px; font-size: 14px; color: #fff; border-top: 1px solid #fff; border-left: 0; border-right: 0; border-bottom: 0; padding-top: 5px; text-align: center; background-color: transparent; cursor: pointer}

/* Ensure the carousel doesn't overflow on smaller screens */
@media (max-width: 960px) {
  .main-carousel2 .owl-nav {display: none;} /* Hide navigation arrows on mobile */
  .content_area .inner {padding: 24px 0;} /* Remove horizontal padding on mobile */
  .main-carousel2 {margin: 50px 0;} /* Reduce top and bottom margin on mobile */
  .main-carousel2 .li {height: auto; min-height: 447px;} /* Adjust height for mobile */
}