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

header {
    width: 100%;
}

a {
  text-decoration: none;
  color: #000;
  cursor: pointer;
}

a:hover {
  color: #FE643D;
}

h1, h2 {
    font-size: 1.8rem;
  }

section > div {
  padding: 3% 0 !important;
}

.container {
    max-width: 1280px;
    margin: auto;
}

.header_area {
    width: 100%;
    height: 79px;  
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    column-gap: 3%;
}

.header_logo {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    column-gap: 12px;
    width: 100%;
    max-width: 280px;
    font-weight: bold;
}

img {
    width: 100%;
    height: 100%;
}

.logo_img {
    max-width: 118px;
}

/* menu */
.nav-menu {
    position: relative;
    width: 70%;
    font-size: 0.8rem;
  }
  
  .link_list {
    display: flex;
    flex-wrap: wrap;
  }
  
  .header_link {
    padding: 1%;
  }
  
  .hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1000;
  }
  
  .hamburger-icon {
    display: block;
    width: 25px;
    height: 3px;
    background: #333;
    margin: 5px 0;
    transition: all 0.3s ease;
  }

  .menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    z-index: 998;
    transition: opacity 0.3s ease;
  }

  /* banner */
  .banner_area {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    /* column-gap: 4%; */
  }

  .banner_area > * {
    width: 48%;
  }  

  .bg.colorYB {
    background-image: linear-gradient(130deg, #fdffd5 45%, #7bb8ff);
  }

  .bg.colorGray {
    background-color: #efefef;
  }

  .bg.colorGW {
    background-image: url(../images/des2025/img_003.png), linear-gradient(180deg, #efefef 50%, #fff);
  }

  .bg.colorDG {
    background: darkgray;
    background-image: url(../images/des2025/img_005.png);
  }

  .imgBG {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .small_title {
    font-size: 0.8rem;
  }

  .text_area span.small_title {
    padding: 5px 15% 5px 5px;
  }

  .small_title.icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    column-gap: 5px;
    }

  .small_title img {
    max-width: 23px;
  }

  .text_area {
    font-size: 1rem;
  }

  .green_text {
    color: #2FC7A1;
  }

  .green_bg {
    background: rgba(47, 199, 161, 0.15);
  }

  .small_title.green_text.green_bg + h3 {
    margin-top: 10px;
  }

  .orange_text {
    color: #FE543D;
  }

  .text_area h3 {
    font-size: 1.4rem;
    color: #FE643D;
  }

  .text_btn {    
    padding:15px 40px 15px 15px;
    background-color: orange;
    color: #fff;
    width: 100%;
    max-width: 150px;
    border-radius: 30px;
    position: relative; /* For positioning ::after */
    display: inline-flex; /* Align text and arrow */
    align-items: center; /* Vertically center content */
    cursor: pointer; /* Indicate interactivity */
  }

  .text_btn::after {
    content: '→'; /* Unicode right arrow */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 52.5px; /* Circle size */
    height: 100%;
    background-color: #FE643D; /* White circle background */
    border-radius: 50%; /* Perfect circle */
    position: absolute;
    right: 0; /* Space from right edge */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust for vertical centering */
    font-size: 1rem; /* Arrow size */
  }

  .text_area .text_btn {
    margin-top: 5%;
  }

  .left:has(.img_area), .right:has(.img_area) {
    max-width: 450px;
  }

  .banner_area > .left {

  }

  .banner_area > .right {
    
  }

/* carousel */
.swiper {
    margin: 0 auto;
    height: auto; /* Fixed height for consistency */
  }

  .swiper-slide {
    position: relative;
  }

  .swiper-wrapper{
    align-items: center;
  }
  
  .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure images fill slide */
    display: block;
  }
  
  .carousel-caption {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 10px;
    border-radius: 5px;
  }
  
  .swiper-button-prev,
  .swiper-button-next {
    /* background: rgba(0, 0, 0, 0.5); */
    color: #FE643D;
    padding: 10px;
  }

  .relativeMenu, .relativeMenu .swiper-button-prev.show, .relativeMenu .swiper-button-next.show {
    position: relative;
  }

  .relativeMenu .swiper-pagination {
    margin-top: 0 !important;
    bottom: auto;
  }

  .relativeMenu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 5%;
  }

  .swiper-button-prev.show,
  .swiper-button-next.show {
    display: block;
    padding: 0;
    margin: 0;
    left: auto;
    right: auto;
  }

  .colorDG .swiper-pagination-bullet {
    background: #fff;
  }
  
  .swiper-pagination-bullet {
    background: #F4F4F4;
    width: 40px;
    height: 10px;
    border-radius: 30px;
    opacity: 0.8;
  }
  
  .swiper-pagination-bullet-active, .colorDG .swiper-pagination-bullet-active {
    background: #FE643D;
    opacity: 1;
  }

  .btn_area {
    width: 100%;
    text-align: right;
    text-align: -webkit-right;
  }

  /* 同學仔著數情報 */
  #adv > .container > * {
    width: 90%;
    margin: auto;
  }

  .text_area h3, #adv > .container > h2, #adv > .container > span, #addoil h2 {
    margin: 5px auto;
  }

  .swiperCard {
    padding-top: 1%;
    max-width: 100%;    
  }

  .swiperCard .swiper-slide {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    background: #fff;
    border-radius: 8px;
    font-size: 1rem;
    padding: 10px;
    max-width: 360px;
    min-height: 300px;
    max-height: 450px;
  }

  .swiperCard .swiper-wrapper {
    justify-content: flex-start;
  }

  .cardImg {
    width: 100%;
  }

  .cardImg span {
    position: absolute;
    top: 6%;
    left: 6%;
    color: #fff;
    padding: 8px;
    background-color: #FE543D;
    border-radius: 8px;
  }

  .cardContent, .localPrice {
    width: 100%;
  }  

  .cardContent h3, .cardContent p, .localPrice * {
    padding: 0;
    margin: 10px 0;
  }

  .logoText {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    column-gap: 5px;
  }

  .localPrice hr {
    border-top: 1px dashed #000;
  }

  .logoText img{
    max-width: 30px;
    margin: 0;
  }

  .price {
    font-weight: bold;
  }

  .swiperCard .swiper-pagination, .swiper-pagination {
    position: relative;
    margin-top: 5%;
}

/* DSE考生打氣專區 */
#related h2, #addoil h2 {
    text-align: center;
}

#addoil .small_title.orange_text.icon {
    justify-content: center;
}

.guests_area {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 10px;
}

.guests {
    max-height: 490px;
    border-radius: 5px;
}

.guests .guests_photo {
    max-width: 100%;
    max-height: 360px;
}

.guests .playVideo {
    max-width: 40px;    
}

.playVideo {
    position: absolute;
    top: -27%;
    left: 40%;
}

.guests_info {
    background-color: #0E2A46;
    color: #fff;
    position: relative;
    padding: 35px 0;
    border-end-start-radius: 5px;
    border-end-end-radius: 5px;
    text-align: center;
}

.guests_info .guests_text {
    width: 100%;
}

.guests_info span {
    color: #FE543D;
}

/* video pop-up */
/* Trigger Divs */
.playVideo {
    cursor: pointer;
    max-width: 300px; /* Adjust as needed */
    margin: 10px;
    display: inline-block;
  }
  
  .playVideo img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  /* Modal */
  .modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Dark overlay */
    z-index: 1000;
    justify-content: center;
    align-items: center;
  }
  
  .modal-content {
    background: #fff;
    padding: 0 20px 20px 20px;
    border-radius: 8px;
    position: relative;
    max-width: 800px;
    width: 90%;
    text-align: right;
  }
  
  .close-btn {
    position: relative;
    font-size: 2rem;
    cursor: pointer;
    color: #FE543D;
  }
  
  .video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
  }
  
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  /* Screen Reader Only */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  } 

  /* relatedNews */
  .relatedNews_area {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
  }

  .relatedNews_area > div {
    max-width: 380px;
  }

  /* Dark Mode */
	.darkMode * {
		color: white !important;   
  }

  .darkMode section, .darkMode main, .darkMode div.link_list {
    background-color: black !important;
    background: black !important; 
  }

  .darkMode .swiperCard .swiper-slide {
    background: black;
    border: 1px solid white;
  }

  .darkMode .cardImg span {
    background-color: black;
  }

	.darkMode .text_area h3 {
		color: #585858 !important;
	}

	.darkMode .text_btn, .darkMode .text_btn::after {
		background-color: #585858 !important;
	}

  .darkMode .hamburger-icon, .darkMode .swiper-pagination-bullet {
    background: white !important;
  }

  .darkMode .green_bg {
    background: #585858 !important;
  }

	.darkMode img{
		filter: grayscale(100%);
	}
  
  @media (max-width: 425px) {
    .swiperCard .swiper-slide {
      max-width: 100%; 
    }

    .swiper-button-prev, .swiper-button-next {
      display: none;
    }
  }

  /* Mobile Responsive */
  @media (max-width: 768px) {
    section > div {
      padding: 5% 0 !important;
    }

    .imgBG {
      background-size: cover;
    }

    /* hamburger menu */
    .nav-menu {        
        font-size: 1rem;
        width: auto;
      }
    
    .header_area {
      justify-content: space-between;
    }

    .hamburger {
      display: block;
      position: sticky;
      margin-left: auto;
    }
  
    .link_list {
      flex-direction: column;
      width: 50vw; /* Half screen */
      height: 100vh;
      position: fixed;
      top: 0;
      right: 0; /* Start off-screen */    
      background: #fff;
      border: 1px solid #ddd;
      padding: 10px;
      z-index: 999;
      transform: translateX(50vw);
      opacity: 0;
      transition: transform 1s, opacity 0.3s;
      align-items: center;
    }
  
    .link_list.active {
        transform: translateX(0);
        display: flex;
        opacity: 1;
        justify-content: space-evenly;
        flex-wrap: nowrap;
        flex-direction: column;
      }
    
      .menu-overlay.active {
        display: block;
        opacity: 1; /* Fade in overlay */
      }
      
    .hamburger.active .hamburger-icon:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }
  
    .hamburger.active .hamburger-icon:nth-child(2) {
      opacity: 0;
    }
  
    .hamburger.active .hamburger-icon:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -7px);
    }
    
    .swiper-button-prev,
    .swiper-button-next {
      padding: 8px;
    }

    .banner_area {
      flex-direction: column;
      row-gap: 10px;
    }
    .banner_area.col_reverse {
      flex-direction: column-reverse;
      row-gap: 10px;
    }
    .banner_area > * {
        width: 100%;
    }

    .modal-content {
      width: 95%;
      padding: 10px;
    }
    .playVideo {
      max-width: 100%;
    }
    .swiperCard .swiper-wrapper {
      /*justify-content: start;*/
    }
  }

  @media (max-width: 1280px) {
    .container {
      max-width: 90%;
    }
  }