/* Various design system styles */
:root {
  --primary: #FF1D43;
  --secondary: #FFE100;
  --accent:#0b76ff;
  --text: #000000;
  --text-nav: #FFFFFF;
  --muted: #8C8C8C;
  --bg: #FFFFFF;
  --card: #F7F7F7;
  --radius: 20px;
  --container: 1440px;
  --time-col:100px;
  --image-col`:120px;
  --font-family: 'Alibaba PuHuiTi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%; /* Ensure header spans full width */
    z-index: 1000; /* Ensure header stays on top of other content */
    /* Add other styling for your sticky header as needed */
}

/* Add padding to the content to prevent it from going under the fixed header */
body.has-sticky-header #content {
    padding-top: 80px; /* Adjust this value to your header's height */
}

html, body {
  height: 100%;
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  color: var(--text);
  background: var(--bg);
}

.container {
  max-width: var(--container);
  margin: 0 150px;
  padding: 0 28px;
}

/* banner */
.container-banner {
  position: relative; /* Important for positioning child elements */
  display: inline-block; /* Helps contain the image correctly */
}

.text-overlay {
  position: absolute; /* Position the text over the image */
  top: 90%; /* Adjusts vertical position */
  left: 10%; /* Adjusts horizontal position */
  transform: translate(-10%, -90%); /* Centers the text precisely */
  color: white; /* Ensures text is readable */
  /* background-color: rgba(0, 0, 0, 0.6);*/ /* Adds a semi-transparent background for readability */
  padding: 10px;
  font-size:50px;
}

/* qualification */
.container-qualification {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  max-width: 900px;
  margin: 40px auto;
  /*background: #f9f9f9;
  padding: 32px;*/
  /*border-radius: 16px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);*/

  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

.container-qualification img {
  width: 50%;
  height: auto;
  /*border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.11);*/
  /*max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;*/
}

.subheaders {
  flex: 1; /* Take up remaining space */
  display: flex;
  flex-direction: column;
  gap: 24px; /* Spacing each section */
}

.section {
  /*background: #fff;
  border-radius: 10px;*/
  padding: 18px 24px;
  /*box-shadow: 0 1px 8px rgba(0,0,0,0.05);
  transition: box-shadow 0.2s;*/
}
.section:hover {
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
}

.section h3 {
  margin: 0 0 8px 0;
  /*font-size: 1.3rem;
  color: #3a5ad1;
  font-weight: 600;
*/
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--primary);
  letter-spacing: 0.5px;
}

.section p {
  margin: 0;
  /*color: #444;
  font-size: 1rem;
  line-height: 1.6;
*/
   font-size: 20px;
  line-height: 1.6;
  color: var(--text);
}

/* header */
.site-header {
  position: fixed;
  top: 0;
  z-index: 100;
  background: var(--bg);
  padding: 20px 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  width:100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.logo-link {
  display: block;
  text-decoration: none;
}

.logo {
  display: block;
  height: 70px;
  width: auto;
}

/* dropdown menu */
.dropdown-content {
  /* Initially hide the dropdown content */
  display: none;
  
  /* Position it right below the button */
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  /* Ensure it is above other content */
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block; /* Makes each link take up the full width */
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

/* CSS Class added by JavaScript to show the menu */
.show {
  display: block;
}

/* news card */
/* Basic reset */
/**{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.page{max-width:1000px;margin:28px auto;padding:0 16px}
.page__title{margin:0 0 18px;font-size:clamp(18px,2.4vw,26px);font-weight:700}
*/

/* News list container */
.news-list{display:flex;flex-direction:column;gap:var(--gap)}

/* News card */
.news-card{
  display:flex;
  grid-template-columns: var(--time-col) 1fr var(--image-col);
  gap:18px;
  align-items:center;
  background:var(--card);
  padding:16px;
  margin:16px;
  border-radius:var(--radius);
  box-shadow:0 6px 18px rgba(15,23,36,0.06);
  transition:transform .18s ease, box-shadow .18s ease;
  overflow:hidden;
}

/* Hover/Focus visual affordance */
.news-card:hover,
.news-card:focus-within{
  transform:translateY(-4px);
  box-shadow:0 12px 30px rgba(15,23,36,0.08);
}

/* Left column: time */
.news-card__time{
  font-size:13px;
  color:var(--muted);
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
  flex:0 0 auto;
}
.news-card__time time{font-weight:600;color:var(--muted)}
.news-card__meta{font-size:12px;color:var(--muted)}

/* Middle column: title, summary */
.news-card__content{
  min-width:0; /* enables truncation in flex/grid children */
  flex:1 1 auto;
}
.news-card__title{
  margin:0 0 8px;
  font-size:16px;
  line-height:1.25;
  color:var(--text);
  font-weight:700;
  /* prevent long titles from breaking layout */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.news-card__summary{
  margin:0 0 12px;
  color:#334155;
  font-size:14px;
  line-height:1.5;
  /* clamp summary to 3 lines with ellipsis */
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Actions */
.news-card__actions{margin-top:4px}
.news-card__link{
  display:inline-block;
  font-weight:600;
  color:var(--accent);
  text-decoration:none;
  padding:6px 8px;
  border-radius:8px;
}
.news-card__link:hover,
.news-card__link:focus{ text-decoration:underline; outline:none }

/* Right column: image */
.news-card__image{
  margin:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 90px;
}
.news-card__image img{
  width:100%;
  height:84px;
  object-fit:cover;
  border-radius:8px;
  display:block;
  box-shadow:0 6px 18px rgba(11,118,255,0.06);
}

/* Optional: tighter compact card */
.news-card--compact .news-card__image img{height:64px}

/*******************More Button*********************************************/
.more-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 18px auto 0 auto;
}

.more-dots {
  display: flex;
  gap: 8px;
  background: #fff;
  box-shadow: 0 1px 8px rgba(44,62,80,0.11);
  border-radius: 50px;
  padding: 10px 24px;
  border: none;
  cursor: pointer;
  transition: box-shadow 0.17s, background 0.17s;
  align-items: center;
}
.more-dot {
  width: 10px;
  height: 10px;
  background: #D9d9d9; /*#3a5ad1;*/
  border-radius: 50%;
  display: inline-block;
  transition: background 0.17s;
}
.more-dots:hover .more-dot {
  background: #fff;
}
.more-dots:hover {
  background: #D9d9d9; /*#3a5ad1;*/
  box-shadow: 0 4px 22px rgba(44,62,80,0.11);
}

/*************QR Code *****************************************/
/* Screen-reader only helper */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Sticky QR button (fixed to the right, vertically centered) */
.qr-button{
  position:fixed;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  z-index:1200;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:999px;
  border:0;
  background:linear-gradient(180deg,var(--primary),#FF1d43);
  /*
  background:linear-gradient(180deg,var(--accent),#0866d6);
*/
  color:white;
  box-shadow: var(--shadow);
  cursor:pointer;
  font-size:20px;
  transition: transform .12s ease, box-shadow .12s ease;
  will-change: transform;
}
.qr-button:hover{ transform:translateY(-50%) scale(1.06) }
.qr-button:active{ transform:translateY(-50%) scale(.98) }
.qr-icon{pointer-events:none}

/* Optional subtle pulse to attract attention */
.qr-button::after{
  content:"";
  position:absolute;
  inset:auto;
  right:-2px;
  top:-2px;
  width:100%;
  height:100%;
  border-radius:999px;
  box-shadow:0 0 0 6px rgba(11,118,255,0.06);
  animation: none;
}
@media (prefers-reduced-motion: no-preference){
  .qr-button::after{ animation: qrPulse 2.8s infinite; }
}
@keyframes qrPulse{
  0%{ transform:scale(.98); opacity:0.7 }
  70%{ transform:scale(1.4); opacity:0.0 }
  100%{ transform:scale(1.4); opacity:0 }
}

/* QR popover (initially hidden) */
.qr-popover{
  position:fixed;
  right:92px; /* position to the left of the button */
  top:50%;
  transform:translateY(-50%) translateX(8px);
  z-index:1250;
  width:260px;
  max-width:calc(100% - 110px);
  background:var(--bg);
  border-radius:12px;
  box-shadow:0 20px 40px rgba(2,6,23,0.12);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  border:1px solid rgba(15,23,36,0.04);
}

/* Visible state */
.qr-popover[data-open="true"]{
  opacity:1;
  pointer-events:auto;
  transform:translateY(-50%) translateX(0);
}

/* Popover inner layout */
.qr-popover__inner{ padding:14px; outline:none; }
.qr-popover__header{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px }
.qr-popover__title{ margin:0; font-size:14px; font-weight:700 }
.qr-popover__close{
  border:0;
  background:transparent;
  font-size:16px;
  cursor:pointer;
  color:var(--muted);
  padding:6px;
  border-radius:8px;
}
.qr-popover__close:hover{ background:rgba(15,23,36,0.04) }

/* Body */
.qr-popover__body{ display:flex; flex-direction:column; align-items:center; gap:8px }
.qr-popover__img{ width:180px; height:180px; object-fit:contain; display:block; border-radius:8px }
.qr-popover__caption{ margin:0; font-size:13px; color:var(--muted); text-align:center }

/* Small screens: shift popover above the button so it doesn't overflow off-screen */
@media (max-width:520px){
  .qr-button{ right:12px; top:auto; bottom:28px; transform:none }
  .qr-popover{ right:20px; top:auto; bottom:96px; transform:none; width:220px; max-width:calc(100% - 40px) }
}

/* Add a little pointer triangle (optional) */
.qr-popover::after{
  content:"";
  position:absolute;
  right:26px;
  top:50%;
  transform:translateY(-50%) translateX(50%);
  width:10px;height:10px;
  background:var(--bg);
  border-left:1px solid rgba(15,23,36,0.04);
  border-top:1px solid rgba(15,23,36,0.04);
  transform-origin:center;
  transform: rotate(45deg) translateY(-50%);
  border-radius:2px;
}

/* Focus styles for keyboard users */
.qr-button:focus{ outline:3px solid rgba(11,118,255,0.16); }
.qr-popover__close:focus{ outline:3px solid rgba(11,118,255,0.12); }


/***************Navigation**********************/
/* navigation */
.main-nav {
  display: flex;
  gap: 24px;
  align-items: center;

  background: rgba(136,136,136,0.2);
  border-radius: 26.5px;
  backdrop-filter: blur(30px);
  padding: 0px 20px;
}

.nav-item {
  color: var(--text-nav);
  text-decoration: none;
  font-size: 23px;
  padding: 8px 16px;
  border-radius: 22.5px;
  transition: background-color 0.2s;
}

.nav-item:hover {
  background: rgba(255,29,67,0.1);
}

.nav-item.active {
  background: var(--primary);
  color: var(--bg);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.login-link {
  color: var(--text-nav);
  text-decoration: none;
  font-size: 23px;
  padding: 8px 16px;
  background: rgba(136,136,136,0.2);
  backdrop-filter: blur(30px);
  border-radius: 26.5px;
}

.lang-switch {
  color: var(--text-nav);
  text-decoration: none;
  font-size: 23px;
  padding: 8px 16px;
  background: rgba(136,136,136,0.2);
  backdrop-filter: blur(30px);
  border-radius: 26.5px;
  border: none;
  cursor: pointer;
}
.hero {
  position: relative;
  /*padding: 60px 0;*/
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 970px;
  margin: 0 7%;
  text-align: left;
  padding: 40px 0;
}

.hero-title {
  font-size: 71px;
  font-weight: 400;
  margin-bottom: 30px;
}

.brand {
  color: white; //var(--text);
  display: block;
  margin-bottom: 10px;
}

.hero-text {
  font-size: 71px;
  color: var(--text);
  margin-bottom: 30px;
}

.hero-description {
  font-size: 20px;
  line-height: 1.6;
  color: var(--text);
}

.hero-image {
  display: block;
  width: 100%;
  height: auto;
  /*margin-top: 40px;*/
  /* border-radius: var(--radius);*/
}

.section-title {
  font-size: 55px;
  font-weight: 400;
  margin-bottom: 40px;
}

.advantages {
  padding: 80px 0;
  background: var(--bg);
}

.advantages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
  margin-top: 40px;
}

.advantage-card {
  background: var(--bg);
  border: 3px solid var(--text);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: 7px 7px 15.7px rgba(0,0,0,0.25);
}

.advantage-header {
  margin-bottom: 20px;
}

.advantage-header h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary);
}

.advantage-text {
  font-size: 20px;
  line-height: 1.6;
  color: var(--text);
}
.qualifications {
  padding: 80px 0;
  background: var(--secondary);
}

.qualifications-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 60px;
}

.qualification-item {
  background: var(--bg);
  padding: 30px;
  border-radius: var(--radius);
}

.qualification-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--primary);
}

.qualification-text {
  font-size: 20px;
  line-height: 1.6;
  color: var(--text);
}

.qualification-image {
  text-align: center;
}

.qualification-image img {
  max-width: 100%;
  height: auto;
  /*border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);*/
}
.teaching {
  padding: 80px 0;
  background: var(--bg);
}

.teaching-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
  margin-top: 40px;
}

.teaching-item {
  background: var(--bg);
  padding: 30px;
  border-radius: var(--radius);
}

.teaching-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--primary);
}

.teaching-text {
  font-size: 20px;
  line-height: 1.6;
  color: var(--text);
}

.calculator {
  padding: 80px 0;
  background: var(--bg);
}

.calculator-preview {
  text-align: center;
  margin-top: 40px;
}

.calculator-preview img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.faq {
  padding: 80px 0;
  background: var(--bg);
}

.faq-list {
  max-width: 1200px;
  margin: 40px auto;
}

.faq-item {
  border-bottom: 0.5px solid var(--text);
  padding: 20px 0;
}

.faq-item summary {
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  padding: 20px 50px 20px 0;
  position: relative;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: var(--text);
}

.faq-item[open] summary::after {
  content: "-";
}

.faq-content {
  padding: 20px 0;
  font-size: 18px;
  line-height: 1.6;
}

.site-footer {
  padding: 0px 0;
  background: var(--secondary); /*var(--bg);*/
  border-top: 1px solid rgba(0,0,0,0.1);
}

.footer-content {
  text-align: center;
}

.footer-info {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--text);
}

@media (max-width: 1024px) {
  .advantages-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .teaching-grid {
    grid-template-columns: 1fr;
  }
  
  .qualifications-grid {
    grid-template-columns: 1fr;
  }
  
/*  .container {
    padding-left: 15px; 
    padding-right: 15px; 
    
    margin-left: 15px; 
    margin-right: 15px; 
  }
*/
}
@media only screen and (max-width: 14in) { /* Adjust max-width as needed for your definition of "small screen" */
  .container {
    padding-left: 15px; 
    padding-right: 15px; 
    margin-left: 15px; 
    margin-right: 15px;
  }
}
/* Responsive: stack columns on small screens */
@media (max-width: 768px) {
  .advantages-grid {
    grid-template-columns: 1fr;
  }
  
  .hero-title,
  .hero-text {
    font-size: 48px;
  }
  
  .section-title {
    font-size: 40px;
  }
  
  .main-nav {
    display: none;
  }
  
  .nav-toggle {
    display: block;
  }
  
  .main-nav.active {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  }

  .news-card{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap:12px;
  }
  .news-card__time{
    flex-direction:row;
    gap:12px;
    align-items:center;
  }
  .news-card__image img{height:160px;width:100%}
  .news-card__title{white-space:normal} /* allow wrapping on small screens */

/*  .container {
    padding-left: 15px; 
    padding-right: 15px;
    margin-left: 15px; 
    margin-right: 15px; 
  }
*/
}
@media (max-width:880px){
  .hero-inner{flex-direction:column-reverse}
  .nav{display:none}
  .nav-toggle{display:inline-block}
  .container{padding:20px}
}