html{font-size: 16px}
*{box-sizing:border-box;margin:0;padding:0; }
html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
.pagenum{width:35px;    margin: 0 0.1rem;}
/*
body{margin:0;position: relative;overflow-x:hidden;font-size: .16rem;
   font-family:-apple-system,PingFang SC,BlinkMacSystemFont,Microsoft YaHei,Helvetica Neue,"Helvetica Neue", Arial, "Open Sans", "Hiragino Sans GB", sans-serif;color: #333}
*/
body{margin:0;position: relative;overflow-x:hidden;font-size: .16rem!important;
   font-family: "Microsoft Yahei", sans-serif, Arial, Helvetica !important;color: #333}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;line-height:1.2em;font-weight:normal;}
ol,ul{list-style:none}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0}
[hidden],template{display:none}
a{color:#333;background-color:transparent;-webkit-tap-highlight-color:transparent;text-decoration: none;}
a:active,a:hover{outline:0;text-decoration:none}
a:hover{color: #003680}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:700}
dfn{font-style:italic}
mark{color:#000;background:#ff0}
small{font-size:80%}
sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
img{display:block;padding:0;border:none;-ms-interpolation-mode:bicubic;max-width:100%;max-height:100%}
address,cite,dfn,em,var,i{font-style: normal;}
svg:not(:root){overflow:hidden}
figure{margin:1em 40px}
hr{height:0;border: none; border-top: 2px solid #f4f3f2; -webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
pre{overflow:auto}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
blockquote,q{quotes:none}
blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}
:focus{outline:0}
button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit}
button{overflow:visible;border: none}
button,select{text-transform:none}
button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
input{line-height:normal;-webkit-appearance:none}
input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}
input[type=search]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid silver}
legend{padding:0;border:0}
textarea{overflow:auto}
optgroup{font-weight:700}
table{border-spacing:0;border-collapse:collapse}
td,th{padding:0}
select::-ms-expand { display: none; }
.none{display: none}
.check:checked,.check:not(:checked){position:absolute;left:-9999px;opacity:0}
.check:checked+label,.check:not(:checked)+label{position:relative;display:inline-block;
	height:14px;font-size:14px;cursor:pointer;padding-left: 20px;}
.check+label:after,.check+label:before{position:absolute;top:2px;left:0;z-index:0;width:16px;height:13px;
	border-radius:3px;content:'';background: #000}
.check:checked+label:after{background: #ca140d}

.scbox{overflow-y:auto }
.scbox::-webkit-scrollbar{width:4px}
.scbox::-webkit-scrollbar-track{border-radius:5px;;background: #ddd}
.scbox::-webkit-scrollbar-thumb{border-radius:5px;background:linear-gradient(to right,#7410ab 0%,#3707a1 100%);;}

.banner, .swiper-container{ width: 100%}

.radio:checked+label,.radio:not(:checked)+label{position:relative;display:inline-block;height:16px;font-size:14px;line-height:16px;cursor:pointer;padding-left: 20px}
.radio+label:after,.radio+label:before{position:absolute;top:-1px;left:0;z-index:0;width:16px;height:16px;border-radius:50%;content:''}
.radio:not(:checked)+label:after,.radio:not(:checked)+label:before{border:1px solid #888}
.radio:checked,.radio:not(:checked){position:absolute;left:-9999px;opacity:0}
.radio:checked+label:before{border:1px solid #d9a65c}
.radio:checked+label:after{width:8px;height:8px;border-radius:50%;background:#d9a65c;top:3px;left:4px}

::-webkit-input-placeholder{color:#999;opacity:.54}
::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}
:-ms-input-placeholder {color:#999 }  
.clearfix:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0;content:"."}
.l{float:left}
.r{float:right}
.fl{float:left!important}
.fr{float:right!important}
.bor{border:1px dashed #999}
.poab{position:absolute}
.pore{position:relative}
.texto a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eclip{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eclips{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imgInline{display:inline-block!important;vertical-align:middle}
.imgMargin{margin:0 auto}
.imgW100{width:100%}

.text-r{text-align:right}
.text-m{text-align:center}
.text-bold{font-weight: 700;}
.text-light{font-weight:100;}
.text-up{text-transform: uppercase;}

.flex{display:flex;justify-content:space-between;flex-wrap:wrap}
.flex-left{display:flex;flex-wrap:wrap}
.flex-center{display:flex;flex-wrap:wrap;justify-content: center;}
.flex-right{display:flex;flex-wrap:wrap;justify-content: flex-end;}
.flex-v-center{display:-webkit-flex;display:flex;flex-direction:column;justify-content:center}
.flex-v{display:-webkit-flex;display:flex;flex-direction:column;justify-content:space-between;}
.flex-v-bottom{display: -webkit-flex;display: flex;align-items: flex-end;flex-wrap: wrap;justify-content: left;}

@media screen and (min-width: 999px){
.trans-mask:hover img{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}	
.bg-mask:hover .pic .a{-webkit-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);}

}
.trans{transition:all .5s}
.trans-mask{display:block;overflow:hidden;width:100%;cursor:pointer;position: relative;}
.trans-mask img{-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s;transform:scale(1.01)}
.bg-mask .pic .a{background-repeat: no-repeat;background-position: center;background-size: cover;height: 100%;display: block;-webkit-transition: all .4s;-o-transition: all .4s;transition: all .4s;transform:scale(1.01)}
.bg-mask .pic{overflow: hidden;}

.bgimg{background-repeat: no-repeat;background-position: center;background-size: cover;}
.ablink{position: absolute;left: 0;top: 0;right: 0;bottom: 0;z-index: 5;background: rgba(255,255,255,0);}
.wp{margin:0 auto;max-width:14.4rem;width: 94%}
.wpa{width:94%;margin:0 auto;max-width:17.5rem}
.greybg{background:#f2f2f2}
.co{color:#0142ae}
.fixdbody{position:fixed;top:0;left:0;right:0;bottom:0}
.m-show{display:none}
.filter-page{filter: blur(5px);}
@media screen and (max-width:980px){.pc-show{display:none}
.m-show{display:block}
}

.aline_w{position:relative;background-image:linear-gradient(rgba(255,255,255,1),rgba(255,255,255,1));background-position:0 100%;background-size:0 1px;background-repeat:no-repeat;transition:background-size .5s}
.alin_w:hover .aline_w{background-size:100% 1px;color: #181596}
.aline_w:hover{background-size:100% 1px}

.aline_r{position:relative;background-image:linear-gradient(#180596,#180596);background-position:0 100%;background-size:0 1px;background-repeat:no-repeat;transition:background-size .5s}
.alin_r:hover .aline_r{background-size:100% 1px;color: #180596}
.aline_r:hover{background-size:100% 1px}

.titline_r{position:relative;background-image:linear-gradient(#6510ad,#6510ad);background-position:0 100%;background-size:0 1px;background-repeat:no-repeat;transition:background-size .3s}
.titlin_r:hover .titline_r{background-size:100% 1px;color: #6510ad}
.titline_r:hover{background-size:100% 1px}

.zi6{position: relative;z-index: 6}
.zi5{position: relative;z-index: 5}
.zi4{position: relative;z-index: 4}
.zi3{position: relative;z-index: 3}
.zi2{position: relative;z-index: 2}
.zi1{position: relative;z-index: 1}
.l2{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.l3{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.l4{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.l5{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical}
.l6{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical}
.l8{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical}

@keyframes sca{
  0%{transform: scale(1);}
  50%{transform:  scale(1.1)}
  100%{transform:  scale(1)}
}
@keyframes go{
  0%{transform: translateX(0);}
  50%{transform: translateX(10px);}
  100%{transform: translateX(0);}
}
@keyframes up{
  0%{transform: translateY(0);}
  50%{transform: translateY(-8px);}
  100%{transform: translateY(0);}
}
@keyframes roted{
  0%{transform: rotate(0deg);}
  100%{transform: rotate(360deg);}
}


/* --- Full-width Background Wrapper --- */
.facility-bg {
  width: 100%;
  background-image: url('your-background.jpg'); /* replace with your background image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 5px 0;
  position: relative;
}



/* --- Main Container --- */

.new-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: -60px auto 0 auto; /* negative top margin to move it up */
  max-width: 1160px; /* slightly wider */
  padding: 0 20px;
  box-sizing: border-box;
}


/* --- Facility Box --- */
.facility {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  min-height: 270px;
  padding: 20px;
  gap: 25px;
  flex-wrap: nowrap;
}

.facility.reverse {
  flex-direction: row-reverse;
}

/* --- Image Box with Permanent Blue Border (Top + Left Only) --- */
.facility-img {
  flex: 2;
  max-width: 55%;
  height: 350px;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border-left: 10px solid #007bff;
  border-top: 10px solid #007bff;
}

/* --- Slideshow images with zoom-in/out effect --- */
.facility-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
  animation: slideShow 16s infinite;
  transition: transform 0.8s ease; /* smooth scaling */
}
.swiper-slide img,
.swiper-slide .bg {
  animation: none !important;
}

/* ===== FIX SLIDE WIDTH ===== */
/* Only banner controls height */
.banner .swiper-container{
  height: 520px;
  min-height: 0;
  overflow: hidden;
}
@media (max-width: 991px){
  .banner .swiper-container{ height: 320px; }
}

/* Other swipers should not be forced to hero height */
.slide-news.swiper-container{ height:auto !important; min-height:0 !important; }


.banner {
  position: relative;
}


.swiper-slide {
  height: 100%;
}


.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== PAGINATION DOTS ===== */
.swiper-pagination {
  bottom: 30px !important;
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #ffffff;
  opacity: 0.5;
  margin: 0 6px !important;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: #00aaff;
}


/* Pause slideshow on hover */
.facility-img:hover img {
  animation-play-state: paused;
}

/* Animation delay for multiple images */
.facility-img img:nth-child(1) { animation-delay: 0s; }
.facility-img img:nth-child(2) { animation-delay: 4s; }
.facility-img img:nth-child(3) { animation-delay: 8s; }
.facility-img img:nth-child(4) { animation-delay: 12s; }

/* --- SlideShow Keyframes with zoom --- */
@keyframes slideShow {
  0% {
    opacity: 0;
    transform: scale(1.2); /* more zoomed in at start */
  }
  5% {
    opacity: 1;
    transform: scale(1); /* normal size when fully visible */
  }
  25% {
    opacity: 1;
    transform: scale(1.15); /* more noticeable zoom while visible */
  }
  30% {
    opacity: 0;
    transform: scale(1.2); /* zoom out while fading */
  }
  100% {
    opacity: 0;
    transform: scale(1.2); /* back to start */
  }
}



/* --- Content Area --- */
.facility-content {
  flex: 1.5;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.facility-content h3 {
  color: #003366;
  font-size: 26px;
  margin-bottom: 12px;
}

.facility-content em {
  color: #0077cc;
  font-style: normal;
  font-size: 16px;
}

.facility-content p {
  margin-bottom: 14px;
  color: #444;
  line-height: 1.6;
}

/* --- List Items --- */
.facility-content ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 10px 0 20px 0;
  list-style: none;
}

.facility-content ul li {
  background-color: #007bff;
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 500;
  transition: background 0.3s ease, color 0.3s ease;
  cursor: pointer;
}

.facility-content ul li:hover {
  background-color: #ffffff;
  color: #007bff;
}

/* --- Responsive (Mobile) --- */
@media (max-width: 900px) {
  .facility,
  .facility.reverse {
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px;




  }

  .facility-img {
    flex: none;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9;
    border-left: 6px solid #007bff;  
    border-top: 6px solid #007bff;   
    border-right: none;
    border-bottom: none;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
  }

  .facility-content {
    flex: none;
    text-align: left;
    padding: 15px 10px;
    margin-top: 0; /* collapse top margin */
    padding-top: 10px; /* optional small gap if needed */
  }

  .facility-content h3 {
    text-align: center;
    font-size: 18px;
    position: absolute;
    top: 5px; /* slightly above image */
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff;
    background: rgba(0, 123, 255, 0.8);
    padding: 8px 14px;
    border-radius: 6px;
    z-index: 3;
    white-space: nowrap;
    margin: 0;
    line-height: normal;
    opacity: 0;
    animation: slideDown 0.8s ease forwards;
  }

  .facility-content em {
    font-size: 14px;
  }

  .facility-content ul li {
    padding: 6px 10px;
    font-size: 14px;
  }

  .facility-content p,
  .facility-content ul {
    margin-top: 0; /* remove default margin on content elements */
  }

  @keyframes slideDown {
    0% {
      opacity: 0;
      transform: translate(-50%, -20px);
    }
    100% {
      opacity: 1;
      transform: translate(-50%, 0);
    }
 

 }
}


.bg-mask .pic {
  position: relative;
  width: 100%;
  height: 280px;           /* fixed box size */
  overflow: hidden;
  border-radius: 8px;
}

.bg-mask .pic .a {
  position: relative;
  width: 100%;
  height: 100%;
}

.bg-mask .pic .a img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center; /* zoom evenly from center */
  opacity: 0;
  animation: zoomBlur 10s ease-in-out infinite; /* faster & cinematic */
  animation-fill-mode: both;
  will-change: opacity, transform, filter;
}

/* second image starts halfway through the cycle */
.bg-mask .pic .a img.second {
  animation-delay: 5s; /* half of 10s */
}

@keyframes zoomBlur {
  0%   { opacity: 0; transform: scale(1); filter: blur(0px); }      
  8%   { opacity: 1; transform: scale(1); filter: blur(0px); }      /* fade in */
  30%  { opacity: 1; transform: scale(1.15); filter: blur(0px); }   /* zoom in uniformly */
  60%  { opacity: 1; transform: scale(1.15); filter: blur(0px); }   /* hold full zoom */
  75%  { opacity: 0; transform: scale(1.15); filter: blur(4px); }   /* fade out + blur */
  100% { opacity: 0; transform: scale(1); filter: blur(0px); }      /* reset */
}


.bg-mask .pic .a img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center; /* zoom evenly from center */
  opacity: 0;
  animation: zoomBlur 10s ease-in-out infinite;
  animation-fill-mode: both;
  will-change: opacity, transform, filter;
  transition: none; /* optional, ensures no transition on hover */
}

/* second image starts halfway through the cycle */
.bg-mask .pic .a img.second {
  animation-delay: 5s; /* half of 10s */
}

/* PAUSE ANIMATION ON HOVER */
.bg-mask .pic:hover .a img {
  animation-play-state: paused; /* pause the animation */
  opacity: 1; /* ensure the image is fully visible */
  transform: scale(1.15); /* keep the zoomed state (or whichever scale you want) */
  filter: blur(0); /* remove any blur */
}





/* Read more + arrow button */
.read-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;                     /* space between text and arrow */
  width: max-content;            /* button adjusts to text + arrow */
  color: #0077b6;               /* ocean blue text + arrow */
  font-size: 14px;
  margin-top: 8px;
  padding: 6px 12px;            /* box padding */
  background: #ffffff;          /* white box background */
  border: 2px solid #0077b6;   /* ocean blue outline */
  border-radius: 4px;           /* rounded corners */
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* Arrow after the text */
.read-arrow::after {
  content: "➔";                 
  font-size: 14px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
  display: inline-block;        /* required for scaling */
}

/* Hover effect */
.read-arrow:hover {
  background: linear-gradient(135deg, #0077b6, #0096c7);  /* subtle ocean gradient */
  color: #ffffff;               /* text + arrow turn white */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* soft shadow */
}

/* Arrow movement + horizontal scale on hover (no rotation) */
.read-arrow:hover::after {
  transform: translateX(4px) scaleX(1.5);  /* slide and stretch horizontally */
}























/* Hide original COMMANDANT in header only on small screens */
@media screen and (max-width: 768px) {
  .intit a[href*="news.hust.edu.cn/index.html"] {
    display: none;
  }

  /* New COMMANDANT above image */
  .commandant-link {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    text-align: center;
    color: #fff; /* adjust if needed */
    text-decoration: none;
  }

  /* Make the list stack nicely below */
  .aright {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}


.aright5 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }




.txt h4.l3 span {
font-family: 'Raleway', sans-serif;





}


.new-badge {
  position: absolute;
  top: -20px;          /* move the GIF above the text */
  left: 30%;           /* center horizontally */
  transform: translateX(-50%);
  width: 50px;         /* adjust size of your GIF */
  height: 50px;        /* adjust size of your GIF */
  display: inline-block;
}

.new-badge img {
  width: 100%;
  height: 100%;
  display: block;
}




.time-box {
  width: 60px;               /* slightly bigger */
  border-radius: 5px;
  overflow: hidden;         
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;      
  border: 1px solid #007bff;   /* optional outline in blue */
}

.time-box .time-upper {
  background-color: #007bff; /* blue */
  color: #fff;               /* white text */
  padding: 8px 0;            /* increased padding */
  font-size: 16px;           /* larger font */
}

.time-box .time-lower {
  background-color: #fff;    /* white */
  color: #007bff;            /* blue text */
  padding: 5px 0;            /* increased padding */
  font-size: 14px;
  border-top: 1px solid #007bff; /* blue separator line */
}






.overhide{overflow: hidden}

.header2 {
  position: absolute; /* Keeps it pinned to the screen */
  top: 15px;
  left: 134px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  z-index: 1000; /* Ensures it stays above other elements */
  font-family: 'Poppins', sans-serif;
}

.header2 a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 500; /* Corrected from 5000 to valid value */
  transition: color 0.3s ease;
}

.header2 a:hover {
  color: #FFE601;
}







.header33 {
  position: absolute;
  top: 10px;
  right: 125px;
  z-index: 1000;
  display: flex;
  flex-direction: row; /* horizontal layout */
  gap: 20px; /* spacing between icons */
}

.header33 img {
  height: 24px;
  width: 24px; /* square for perfect circle */
  border-radius: 50%; /* circular shape */
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  /* Solid, closer black shadow */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

/* Hover effect: slight lift with solid shadow */
.header33 img:hover {
  transform: translateY(-2px) scale(1.03); /* small lift and slight enlargement */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.9); /* solid, closer shadow */
}


.header{position: fixed;top:0; left: 0;right: 0;z-index: 50;padding: .0rem 0 .10rem;}
.header:before{content: "";display: block;position: absolute;left: 0;top: -0.05rem;right: 0;height: 0.12em;background-size: auto 99%;}
.header:after{content: "";display: block;position: absolute;left: 0;top:0;right: 0;height:2px; background: #003680;z-index: 1 ;transition: .3s linear}

.header .logo{position: absolute;left: 53%;transform: translateX(-50%);  padding: 8px 0; top: -.2rem;transition: .3s}
/* ===== FORCE TRITA LOGO SIZE ===== */
.header .logo img{
  height: 40px !important;
  width: auto !important;
  max-height: 40px !important;
}

.header .wp{position: relative;z-index: 3;max-width: 16.2rem;width: calc(100% - 1.2rem)}


.header .hd-a{line-height:.3rem;transition: .3s;margin-bottom: .10rem;transition: .3s}
.header .hd-a .btn-link{color:rgba(255,255,255,.6);font-size: .10rem;padding-left: .1rem}
.header .hd-a  a{padding: 0 .10rem;position: relative;color: rgba(255,255,255,.8);display: inline-block;}
.header .hd-a  a i{font-size: .18rem;margin-right: 5px;vertical-align: -1px}
.header .hd-a  a:hover{color: rgba(255,255,255,1)}
.header .hd-a .links{position: relative;}
.header /*.hd-a .links a:after{content: '';height: .12rem;width: 1px;background: rgba(255,255,255,.6);right: 0;top:50%;margin-top: -.06rem;position: absolute}*/
.header .hd-a .links a:last-child:after{display: none}

.header .hd-a {

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.header .hd-a .btn-link {

  padding-left: 10 !important;
  margin-top: 1px;
  text-align: center !important;
  float: none !important;   /* cancel any float */
}



.header .hd-a h1{
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.12rem;
  color: #ffffff;
  margin: 0;
  text-align: center;

  /* MAIN DEPTH */
  text-shadow:
    0 1px 1px rgba(0,0,0,0.35),

    /* LIGHT BLUE UNDERLINE GLOW */
    0 3px 0 rgba(120,190,255,0.45),
    0 6px 6px rgba(120,190,255,0.25);
}

/* ===== ACADEMIC WAVE EFFECT (SAFE & PROFESSIONAL) ===== */
.header .hd-a{
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    #0b1d3a,
    #08162d
  );
}

/* wave layer */
.header .hd-a::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      120% 80% at 10% 50%,
      rgba(120,190,255,0.18),
      transparent 60%
    ),
    radial-gradient(
      120% 80% at 90% 40%,
      rgba(120,190,255,0.14),
      transparent 55%
    );
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

/* keep text above wave */
.header .hd-a *{
  position: relative;
  z-index: 1;
}


.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  
  color: #fff;
  transition: opacity 1s ease, top 1s ease, filter 1s ease; /* smooth fade + slide + color */
  opacity: 1;
  filter: brightness(100%); /* normal brightness */
}



.scrollDown .header{top: -70.9px; padding-top: 6px;}



@media screen and (max-width: 1200px){

}

.headerm{
  display: none !important;
}

@media screen and (max-width:1024px){
  .header{
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
  }
}


@media screen and (max-width:900px){
.wp{width: 90%}
.wpa{width: 90%}	
html{font-size: 85px!important;}
}
@media screen and (max-width:640px){
body{font-size: .18rem}
.Gsearch{width:100% !important;}
.Gsearch .Gsearch-nr{padding:0.3rem 0.2rem;}
}
@media screen and (max-width:480px){
html{font-size: 80px!important;}
.eclips{display:block;overflow:visible;text-overflow:inherit;white-space:normal;}
.Gsearch .Gsearch-nr li h3{width:20% !important;}
.Gsearch .Gsearch-nr li input{width:80%;}
.Gsearch .Gsearch-nr li.Stime input{    width: 38.5% !important;}
}
@media screen and (max-width:375px){
html{font-size: 75px!important;}
}
@media screen and (max-width:360px){
html{font-size: 70px!important;}
}


.publine {background: linear-gradient(45deg,#0e53ba 0%,#ac0b5e 100%);}
.footer {
  background: url("../../__local/G/Footer.jpg") no-repeat center center;
  background-size: cover;
  color: #fff;
  padding: 40px 20px; /* optional: adds space inside the footer */
  text-align: center; /* optional: centers text */
}
.footer a{color: #fff}
.footer .ftb{padding: .2rem 0;border-top: 1px solid rgba(255,255,255,.15);font-size: .14rem;color: rgba(255,255,255,.8);}
.footer .ftb span{margin: 0 .1rem;display: inline-block;line-height: 1.6em}
.footer .ftb p span:first-child{margin-left: 0}
.footer .ftb p span:last-child{margin-right: 0}
.footer .ftb a{color: rgba(255,255,255,.7);}
.footer .ftb a:hover{color: rgba(255,255,255,1);}
.footer .ftb img{display: inline-block;height: .24rem;vertical-align: -.07rem;}
.footer .fta .logoft{padding: .55rem .55rem .55rem 0;border-right: 1px solid rgba(255,255,255,.15) }
.footer .fta .logoft img{/*height: .75rem;*/width: 3.65rem}
.footer .fta .linkft{padding: .55rem 0 .55rem 0rem}
.footer .fta .linkft ul li{margin-left: .2rem;text-align: center;}
.footer .fta .linkft ul li a{color: #fff}
.footer .fta .linkft ul li p{font-size: .14rem!important;margin-top: .1rem}
.footer .fta .linkft ul li i{display: block;width: .65rem;height: .65rem;text-align: center;line-height: .7rem;background: rgba(255,255,255,.2);border-radius: 5px;margin: 0 auto;font-size: .34rem;transition: .4s}
.footer .fta .linkft ul li:hover i{transform:translateY(-5px);}
@media (max-width: 1200px){
.footer .fta .logoft{padding: .4rem 0;flex-direction: inherit;width: 100%;border-right: 0}
.footer .fta .linkft{padding: 0 0 .4rem;width: 100%;justify-content: center;}
.footer .fta .linkft ul li{margin: 0}
.footer .ftb p{width: 100%;text-align: center;}
.footer .ftb p span:first-child{margin-left: .1rem}
.footer .ftb p span:last-child{margin-right: .1rem}
}
@media (max-width:760px){
.footer .fta .linkft ul li{width: 20%;margin-bottom: .2rem}
}
@media (max-width:480px){
.footer .fta .linkft ul li p,.footer .ftb{font-size: .15rem}
}
@media (max-width:360px){

}
/*print*/
@media print{

}

/*ie11*/ 
@media all and (-ms-high-contrast:none) { 
*::-ms-backdrop, 
} 
/*ie10*/ 
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 

}



/* ================================
   HEADER & MENU ALIGNMENT FIX
   (NO DROPDOWN EFFECT CHANGED)
================================ */

/* ---------- HEADER TITLE ---------- */
.site-title {
  text-align: center;
  width: 100%;
}



.site-title .trita {
  display: block;
  margin-top: 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 6px;
  color: #fff;
  text-align: center;
}

/* REMOVE FAKE SPACING EFFECT */
.site-title h1,
.site-title span {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---------- HEADER CONTAINERS ---------- */
.hd-a,
.hd-b {
  width: 100%;
  margin: 0 auto;
}

/* ---------- LOGO + MENU ROW ---------- */
.hd-b {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CENTER LOGO */
.hd-b .logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

.hd-b .logo img {
  height: 60px;
}

/* ---------- MAIN MENU ---------- */
.hd-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1400px;
  padding: 0 40px;
}

/* LEFT SIDE ITEMS */
.hd-nav li {
  white-space: nowrap;
}

/* PUSH LEFT ITEMS LEFT */
.hd-nav li:nth-child(-n+5) {
  margin-right: auto;
}

/* PUSH RIGHT ITEMS RIGHT */
.hd-nav li:nth-child(n+6) {
  margin-left: auto;
}

/* LINKS STYLE (UNCHANGED EFFECTS) */
.hd-nav > li > a {
  color: #fff;
  font-weight: 600;
}

/* ================================
   MOBILE RESPONSIVE FIX
================================ */
@media (max-width: 1024px) {

  /* TITLE SCALE */
  .site-title h1 {
    font-size: 22px;
    line-height: 1.3;
  }

  .site-title .trita {
    font-size: 16px;
    letter-spacing: 4px;
  }

  /* STACK HEADER */
  .hd-b {
    flex-direction: column;
  }

  /* LOGO CENTER */
  .hd-b .logo {
    position: relative;
    transform: none;
    margin: 10px 0;
  }

  /* MENU STACK */
  .hd-nav {
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
  }

  .hd-nav li {
    margin: 8px 0;
  }

  /* KEEP DROPDOWNS WORKING */
  .sub-nav {
    position: relative;
  }
}



/* correct easing */
:root{
  --uani-ease: cubic-bezier(.2,.8,.2,1);
}

/* DEFAULT (NO-JS): show content normally */
.uani{
  opacity: 1;
  transform: none;
}

/* ONLY animate when JS enables it */
html.uani-js .uani{
  opacity: 0;
  transform: translate3d(0, 70px, 0);
  transition:
    opacity 0.9s var(--uani-ease),
    transform 1.2s var(--uani-ease);
  will-change: opacity, transform;
}

html.uani-js .uani.show,
html.uani-js .uani.is-in{
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* keep your existing class name */
.fadeInUp{}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  html.uani-js .uani{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}




/* =========================================================
   TRITA ANIMATION FIX (uani / fadeInUp)
   Add this at the END of style.css
========================================================= */
:root{
  --uani-ease: cubic-bezier(.2,.8,.2,1);
}

/* default state (hidden) */
.uani{
  opacity: 0;
  transform: translate3d(0, 70px, 0);
  transition:
    opacity 0.9s cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: opacity, transform;
}

/* visible state (shown) */
.uani.show{
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* keep your existing class names (no need to change HTML) */
.fadeInUp{ /* the animation style is handled by .uani */ }

/* optional: smoother hover float feel for cards/images (safe) */
.bg-mask .pic .a,
.trans-mask img,
.bgimg{
  transition: transform .6s var(--uani-ease);
}
.bg-mask:hover .pic .a{
  transform: scale(1.18);
}

.trans-mask:hover img{
  transform: scale(1.18);
}


/* accessibility */
@media (prefers-reduced-motion: reduce){
  .uani,
  .bg-mask .pic .a,
  .trans-mask img{
    transition: none !important;
    transform: none !important;
  }
  .uani{ opacity: 1 !important; }
}

/* =========================================================
   TRITA FOOTER NEO – RIGHT ANGLE + SWEEP EFFECT (UNIQUE)
   Paste at END of style.css
========================================================= */

.trita-footer-neo{
  --navy:#061428;
  --navy2:#040b18;
  --ink:#f2f7ff;
  --muted:rgba(242,247,255,.82);
  --line:rgba(255,255,255,.14);
  --sky:#67b0ff;
  --sky2:#2f7df6;

  position:relative;
  width:100%;
  color:var(--ink);
  background: linear-gradient(180deg, #07172f 0%, #061428 55%, #040b18 100%);
  border-top: 2px solid rgba(103,176,255,.25);
  overflow:hidden;
}

/* sweep layer (left -> right) */
.trita-footer-neo::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:70%;
  height:180%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(103,176,255,.10) 25%,
    rgba(255,255,255,.08) 45%,
    rgba(103,176,255,.10) 65%,
    transparent 100%
  );
  transform: skewX(-18deg);
  opacity:.95;
  animation: tfSweep 7.5s linear infinite;
  pointer-events:none;
}

@keyframes tfSweep{
  0%{ transform: translateX(-30%) skewX(-18deg); }
  100%{ transform: translateX(260%) skewX(-18deg); }
}

/* subtle grid for “official” texture */
.trita-footer-neo::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity:.10;
  mask-image: radial-gradient(circle at 30% 10%, #000 0%, transparent 70%);
  pointer-events:none;
}

.tf-neo-wrap{
  position:relative;
  z-index:2;
  width:min(1250px, 92%);
  margin:0 auto;
  padding: 40px 0 16px;
}

/* top layout */
.tf-neo-top{
  display:grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 18px;
  align-items: start;
}

/* BRAND block (square style) */
.tf-neo-brand{
  display:flex;
  gap:14px;
  align-items:flex-start;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  padding: 18px 18px;
}

.tf-neo-logo{
  width: 74px;
  height: 74px;
  border: 1px solid rgba(103,176,255,.22);
  background: rgba(103,176,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
}
.tf-neo-logo img{
  width: 72%;
  height:auto;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.30));
}

.tf-neo-title{
  font-weight: 900;
  letter-spacing:.3px;
  line-height: 1.2;
  font-size: 15px;
  text-transform: uppercase;
}
.tf-neo-desc{
  margin-top: 10px;
  line-height: 1.75;
  font-size: 14px;
  color: var(--muted);
  max-width: 56ch;
}
.tf-neo-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 14px;
}
.tf-chip{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  padding: 8px 10px;
  font-size: 12px;
  color: rgba(242,247,255,.92);
}

/* Panels (square) */
.tf-neo-panel{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  padding: 18px 18px 16px;
  min-height: 100%;
}

.tf-h{
  font-weight: 900;
  letter-spacing: 2px;
  font-size: 13px;
  color: #fff;
}
.tf-line{
  height: 2px;
  width: 52px;
  background: linear-gradient(90deg, var(--sky), transparent);
  margin: 12px 0 14px;
}

/* Contact rows */
.tf-info{ display:grid; gap: 12px; }
.tf-row{
  display:grid;
  grid-template-columns: 10px auto 1fr;
  column-gap: 10px;
  align-items: start;
  color: rgba(242,247,255,.88);
  line-height: 1.55;
  font-size: 13.5px;
}
.tf-bullet{
  width: 8px;
  height: 8px;
  margin-top: 6px;
  background: var(--sky);
  box-shadow: 0 0 0 6px rgba(103,176,255,.10);
}
.tf-k{
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
}
.tf-v{ color: rgba(242,247,255,.86); }

/* Buttons (square + sweep shine on hover) */
.tf-neo-btn{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 13px 14px;
  margin-bottom: 12px;
  border: 1px solid rgba(103,176,255,.30);
  background: linear-gradient(180deg, rgba(103,176,255,.16), rgba(47,125,246,.08));
  color:#fff;
  text-decoration:none;
  font-weight: 900;
  letter-spacing:.2px;
  overflow:hidden;
  transition: transform .25s ease, border-color .25s ease, filter .25s ease;
}
.tf-neo-btn::after{
  content:"";
  position:absolute;
  top:0; left:-40%;
  width:40%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
  transform: skewX(-18deg);
  opacity:0;
}
.tf-neo-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(103,176,255,.55);
  filter: brightness(1.05);
}
.tf-neo-btn:hover::after{
  opacity:1;
  animation: btnShine 1.0s ease forwards;
}
@keyframes btnShine{
  0%{ transform: translateX(-40%) skewX(-18deg); }
  100%{ transform: translateX(320%) skewX(-18deg); }
}

.tf-neo-btn.alt{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.16);
}

.tf-neo-ico{ width: 26px; text-align:center; }
.tf-neo-arr{
  opacity:.95;
  transition: transform .25s ease;
}
.tf-neo-btn:hover .tf-neo-arr{ transform: translateX(6px); }

.tf-neo-note{
  margin-top: 8px;
  font-size: 12.5px;
  color: rgba(242,247,255,.70);
  line-height: 1.6;
}
.tf-neo-mini{
  margin-top: 8px;
  display:grid;
  gap: 6px;
  color: rgba(242,247,255,.82);
}

/* Bottom bar (square, strong contrast) */
.tf-neo-bottom{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.14);
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  color: rgba(242,247,255,.86);
  font-size: 13px;
}
.tf-neo-dev{ opacity: .92; }

/* Responsive */
@media (max-width: 980px){
  .tf-neo-top{ grid-template-columns: 1fr; }
  .tf-neo-bottom{ flex-direction:column; text-align:center; }
}
/* ================================
   TRITA PRO FOOTER (SHARP / SWEEP)
================================ */
.trita-ft-pro{
  position: relative;
  background: linear-gradient(180deg, #07172f 0%, #051126 55%, #040c1b 100%);
  color: rgba(255,255,255,.86);
  overflow: hidden;
}

/* sweep light from left -> right */
.trita-ft-pro::before{
  content:"";
  position:absolute;
  inset:-40% -30%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(120,180,255,.10) 35%,
    rgba(120,180,255,.22) 50%,
    rgba(120,180,255,.10) 65%,
    transparent 100%
  );
  transform: translateX(-35%) skewX(-14deg);
  animation: tfp-sweep 6.5s linear infinite;
  pointer-events:none;
  opacity:.55;
}

@keyframes tfp-sweep{
  0%{ transform: translateX(-45%) skewX(-14deg); }
  100%{ transform: translateX(45%) skewX(-14deg); }
}

.tfp-wrap{
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 34px 18px 14px; /* keep bottom tight to avoid big gaps */
}

.tfp-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}

.tfp-panel{
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  padding: 18px 18px 16px;
}

/* headings */
.tfp-head{ margin-bottom: 12px; }
.tfp-title{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
}
.tfp-rule{
  height: 2px;
  width: 44px;
  margin-top: 10px;
  background: #67b0ff;
  opacity: .8;
}

/* brand */
.tfp-brand-top{
  display:flex;
  gap: 14px;
  align-items:flex-start;
}
.tfp-logo{
  width: 44px;
  height: 44px;
  object-fit: contain;
  display:block;
  /* NO border box */
  background: transparent;
}

.tfp-brand h3{
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(255,255,255,.95);
}
.tfp-brand p{
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255,255,255,.78);
}

.tfp-meta{
  display:flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.tfp-tag{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 8px 10px;
  font-size: 12px;
  color: rgba(255,255,255,.82);
}

/* contact rows */
.tfp-rows{ display:flex; flex-direction:column; gap: 10px; }
.tfp-row{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 12px;
}
.tfp-row:last-child{ border-bottom: none; padding-bottom: 0; }
.tfp-row span{ color: rgba(255,255,255,.70); }
.tfp-row b{
  font-weight: 600;
  color: rgba(255,255,255,.92);
}
.tfp-row-wide{
  grid-template-columns: 1fr;
}
.tfp-row-wide b{
  margin-top: 6px;
  color: rgba(255,255,255,.86);
  font-weight: 500;
}

/* buttons */
.tfp-actions{ display:flex; flex-direction:column; gap: 12px; }
.tfp-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 12px 12px;
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .02em;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.tfp-btn:hover{
  transform: translateY(-1px);
  background: rgba(103,176,255,.10);
  border-color: rgba(103,176,255,.28);
}
.tfp-btn-ghost{
  background: rgba(255,255,255,.02);
}

.tfp-ico{
  width: 18px;
  height: 18px;
  display:grid;
  place-items:center;
  color: #9cc9ff;
  flex: 0 0 auto;
}
.tfp-ico svg{ width: 18px; height: 18px; display:block; }

.tfp-arr{
  opacity: .85;
  font-size: 14px;
}

/* note */
.tfp-note{
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255,255,255,.72);
  line-height: 1.6;
}
.tfp-mini{
  margin-top: 8px;
  display:flex;
  flex-direction:column;
  gap: 4px;
  color: rgba(255,255,255,.78);
}
.tfp-mini b{ color: rgba(255,255,255,.92); }

/* bottom line (CENTERED) */
.tfp-bottom{
  margin-top: 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 12px 6px 6px; /* keep it tight */
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,.75);
}

/* smooth reveal */
.tfp-reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .65s ease, transform .65s ease;
}
.tfp-reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}

/* responsive */
@media (max-width: 980px){
  .tfp-grid{ grid-template-columns: 1fr; }
  .tfp-brand-top{ align-items: center; }
}
/* =========================================
   IMPORTANT: STOP EXTRA SPACE UNDER FOOTER
========================================= */
#trita-bot{
  position: fixed !important;
  right: 22px;
  bottom: 22px;
  z-index: 9999;
  height: auto !important;
}



/* Banner base */
.trita-banner { overflow: hidden; }
.trita-banner .swiper-slide { transform: translateZ(0); }

.trita-banner .bgimg{
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
}

/* Ensure the banner has a height */
.banner .trita-banner { height: 520px; }
@media (max-width: 991px){
  .banner .trita-banner { height: 320px; }
}

/* Slide relative so caption can be positioned */
.trita-banner .swiper-slide {
  position: relative;
}

/* Caption bottom left */
.trita-banner .slide-caption {
  position: absolute;
  left: 4%;
  bottom: 8%;
  z-index: 6;
  pointer-events: none;
}

/* Box fits text length only (with fallback) */
.trita-banner .cap-inner {
  display: inline-block;
  width: fit-content;
  max-width: 760px;
  padding: 14px 18px;
  border-radius: 6px;

  background: rgba(0,0,0,0.08);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);

  color: #fff;

  opacity: 0;
  transform: translateY(18px);
}

/* Title and subtitle */
.trita-banner .cap-inner h2 {
  font-size: clamp(22px, 3vw, 46px);
  line-height: 1.12;
  margin: 0 0 8px 0;
  font-weight: 800;
  white-space: nowrap;
}

.trita-banner .cap-inner p {
  font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1.35;
  margin: 0;
  opacity: 0.95;
  white-space: nowrap;
}

/* Float up animation on active slide */
.trita-banner .swiper-slide-active .cap-inner {
  animation: capFloatUp 650ms ease-out forwards;
}

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

/* Reset on inactive slides */
.trita-banner .swiper-slide:not(.swiper-slide-active) .cap-inner {
  opacity: 0;
  transform: translateY(18px);
}

/* =========================================
   Mobile improvements
========================================= */
@media (max-width: 768px){
  .trita-banner .slide-caption{
    left: 5%;
    right: 5%;
    bottom: 6%;
  }

  /* Fallback: fit-content may not behave on all mobiles */
  .trita-banner .cap-inner{
    width: auto;
    max-width: 100%;
    padding: 12px 14px;
  }

  /* Allow wrapping on small screens */
  .trita-banner .cap-inner h2,
  .trita-banner .cap-inner p{
    white-space: normal;
  }
}

/* Banner: show full image (no crop) */
.trita-banner .bg.bgimg{
  background-size: contain !important;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #000;
}

/* ===== FIX: News slider must NOT overflow into Commandant column ===== */
#newsCmdRow{
  display: flex;
  align-items: stretch;
  gap: 24px;
}

/* left column (NEWS) */
#newsCol{
  flex: 1 1 0;
  min-width: 0;              /* IMPORTANT for flex + swiper */
}

/* right column (COMMANDANT) */
#cmdCol{
  flex: 0 0 350px;           /* adjust if you want wider/narrower */
  position: relative;
  z-index: 5;                /* keep it above if anything overlaps */
}

/* swiper container must clip slides */
.swiper-container.slide-news{
  width: 100%;
  overflow: hidden !important;
  position: relative;
  z-index: 1;
}

/* ensure each slide stays inside the container width */
.slide-news .swiper-slide{
  width: 100% !important;
}