:root {
  --header-h: 96px;

  --color-primary:#2c6679;
  --color-primary-light:rgba(44,102,121,.5);
  --color-primary-dark:#245565;
  --color-accent:#FEEA9A;
  --color-navy:#2a6877;
  --bg:#2a6877;
  --muted:#6B7280;

  --teal-1:#2a6877;
  --teal-2:#0A6870;
  --teal-3:#7e7e7e;

  --white-glow: rgba(255,255,255,0.85);
  --dot: rgba(255,255,255,0.18);
    --header-h: 80px;

}

 
body{
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial; overflow-x: hidden;   padding-top: var(--header-h);

}
 
 
 
.nav-link{
  position:relative;
  padding-bottom:6px;
  color:black; font-size: 14px;
  transition:.3s;
}
.nav-link:hover,
.nav-link.active{ color:var(--color-primary); }

.nav-link::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  height:0.8px; width:0;
  background:var(--color-primary);
  transition:.3s;
}
.nav-link:hover::after,
.nav-link.active::after{ width:100%; }


.fade-out {
    opacity: 1;
    backdrop-filter: blur(10px);
}

.no-scrollbar{
  -ms-overflow-style:none; scrollbar-width:none;
}
.no-scrollbar::-webkit-scrollbar{ display:none; }

.glass-border{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.04);
}

 
.parallax-bg,
.parallax-thesis{
  background-position:center;
  background-size:cover;
  background-attachment:fixed;
  position:relative;
}

.parallax-thesis{
  background:var(--bg);
}

@media(max-width:768px){
  .parallax-bg,
  .parallax-thesis{ background-attachment:scroll; }
}

 video {
  backface-visibility: hidden;
  transform: translateZ(0);
}

.role-transition{ transition:transform .3s ease, box-shadow .3s ease; }

.roleCard.active{
  border-color:var(--color-primary);
  box-shadow:0 4px 12px rgba(44,102,121,.4);
}

.roleCard div i{ color:var(--color-navy); transition:.3s; }
.roleCard.active div i{ color:#fff; }
.roleCard.active .roleCircle{
  background:var(--color-primary);
  color:#fff;
  box-shadow:0 4px 12px rgba(44,102,121,.4);
}
.roleCard.active p{ color:var(--color-primary); }

 
@keyframes underline-draw{
  from{transform:scaleX(0);}
  to{transform:scaleX(1);}
}
.animated-underline{
  border-bottom:2px solid var(--color-primary);
  transform-origin:left;
  animation:underline-draw .5s ease-out forwards;
}

 
.chat-button,
.back-to-top{
  position:fixed;
  bottom:6px;
  right:6px;
  color:#fff;
  border-radius:9999px;
  box-shadow:0 10px 15px rgba(0,0,0,.1);
  transition:.3s;
  z-index:50;
}

.chat-button{
  right:20px;
  padding:1rem;
  background:var(--color-primary-light);
  display:flex; align-items:center; justify-content:center;
  animation:bounce 2s infinite;
}
.chat-button:hover{
  background:var(--color-primary);
  transform:scale(1.1);
}

.back-to-top{
  padding:.75rem;
  background:var(--color-navy);
  z-index:40;
}
.back-to-top:hover{
  background:var(--color-primary-dark);
  transform:scale(1.1);
}

/* Chat window */
.chat-section{
  position:fixed; bottom:6px; right:6px;
  width:20rem; height:24rem;
  background:#fff;
  overflow:hidden;
  border-radius:.5rem;
  border:1px solid #e5e7eb;
  box-shadow:0 10px 15px rgba(0,0,0,.1);
  display:flex; flex-direction:column;
  z-index:50;
}

.chat-header{
  background:var(--color-primary);
  color:#fff;
  padding:1rem;
  display:flex; justify-content:space-between; align-items:center;
}

.chat-messages{
  flex:1; padding:1rem;
  overflow-y:auto;
  font-size:.875rem; color:#374151;
}
.chat-input-section{
  padding:1rem;
  border-top:1px solid #e5e7eb;
}
.chat-input{
  width:100%; padding:.5rem .75rem;
  border:1px solid #d1d5db;
  border-radius:.375rem;
}
.chat-send-btn{
  margin-top:.5rem; padding:.5rem;
  width:100%;
  background:var(--color-primary);
  border-radius:.375rem;
  color:#fff; transition:.3s;
}
.chat-send-btn:hover{ opacity:.9; }

  @keyframes heartbeatPulse {
  0%   { stroke-dashoffset:1200; }
  30%  { stroke-dashoffset:600; }
  50%  { stroke-dashoffset:200; }
  80%  { stroke-dashoffset:0; }
  100% { stroke-dashoffset:0; }
}

.heartbeat-line polyline {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  /* Remove infinite, just run once */
  animation: heartbeatPulse 3s ease-in-out forwards;
}
 
 
 
.zoom-soft{
  transition:transform .4s cubic-bezier(.25,.1,.25,1), filter .3s ease;
  transform-origin:center;
}
.zoom-soft:hover{
  transform:scale(1.08);
  filter:brightness(1.1);
}

 
.center-line{
  position:absolute;
  left:50%; top:0; bottom:0;
  width:2px;
  background:rgba(10,35,66,.12);
  transform:translateX(-50%);
}
.timeline-dot{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:16px;height:16px;
  background:var(--color-primary);
  border-radius:9999px; border:4px solid #fff;
  box-shadow:0 4px 12px rgba(10,34,66,.06);
  z-index:15;
}

@media(max-width:768px){
  .center-line{ left:14px; transform:none; }
  .timeline-dot{ left:14px; transform:none; }
  .relative>.space-y-20{ gap:4rem; }
  .relative .w-1\/2{ width:100%; }
  .relative .pr-10,.relative .pl-10{
    padding-left:0; padding-right:0; text-align:left;
  }
}

 
#cookieOverlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,0.6);
  display:none; z-index:100;
}
#cookieBanner{
  position:fixed; bottom:0; left:0;
  width:100%;
  background:#fff;
  border-top:1px solid #ccc;
  box-shadow:0 -2px 10px rgba(0,0,0,0.1);
  transform:translateY(100%);
  transition:transform .5s ease-in-out;
  display:none; z-index:100;
}
#cookieBanner .buttons button{
  padding:8px 16px;
  border-radius:6px;
  border:1px solid #ccc;
  margin-left:10px;
}
#cookieBanner .buttons .accept{
  background:var(--color-primary);
  color:#fff; border:none;
}

 
.dots-bg{
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size:18px 18px;
  opacity:.55;
  pointer-events:none;
}

 
#animatedText{ min-height:2em; white-space:nowrap; letter-spacing:0.5px; }

@keyframes lineReveal{
  from{opacity:0; transform:translateX(-10px);}
  to{opacity:1; transform:translateX(0);}
}
 
.creative-shape{
  position:absolute;
  border-radius:50%;
  filter:blur(30px);
  opacity:.25;
  animation:floatShape 10s ease-in-out infinite alternate;
}
.shape-1{ width:80px;height:80px; left:5%; top:20%; }
.shape-2{ width:100px;height:100px; right:10%; top:35%; }
.shape-3{ width:60px;height:60px; left:10%; bottom:25%; }
.shape-4{ width:120px;height:120px; right:15%; bottom:20%; }

@keyframes floatShape{
  0%{ transform:translateY(0) rotate(0); }
  50%{ transform:translateY(-30px) rotate(15deg); }
  100%{ transform:translateY(0) rotate(0); }
}

 
.hero-gradient{
  background:
    radial-gradient(1200px 600px at 8% 22%, rgba(10,127,135,0.14), transparent 12%),
    radial-gradient(1000px 500px at 92% 82%, rgba(255,255,255,0.06), transparent 8%),
    linear-gradient(180deg, var(--teal-1) 0%, var(--teal-2) 50%, var(--teal-3) 100%);
}

 
.orb{
  position:absolute;
  border-radius:9999px;
  filter:blur(120px);
  opacity:.35;
  mix-blend-mode:screen;
  will-change:transform,opacity;
}
.orb-1{ width:520px;height:520px; left:-180px; top:8%; background:rgba(255,255,255,.95); }
.orb-2{ width:520px;height:520px; right:-160px; bottom:6%; background:rgba(255,255,255,.85); }
.orb-3{ width:360px;height:360px; left:10%; bottom:-80px; background:rgba(10,200,190,.12); filter:blur(80px); opacity:.28; }

.shimmer{
  position:absolute;
  width:220px;height:220px;
  border-radius:9999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.85), rgba(255,255,255,0.06) 35%, transparent 60%);
  filter:blur(40px);
  opacity:.6;
  mix-blend-mode:screen;
  animation:shimmerMove 7s ease-in-out infinite;
}
.sh-1{ left:20%; top:14%; }
.sh-2{ right:14%; top:22%; animation-delay:1.8s; }
.sh-3{ left:52%; bottom:18%; animation-delay:.9s; }

@keyframes shimmerMove{
  0%{ transform:translate(0,0) scale(1); opacity:.55; }
  50%{ transform:translate(18px,-28px) scale(1.05); opacity:.8; }
  100%{ transform:translate(0,0) scale(1); opacity:.55; }
}

.ring{
  position:absolute;
  width:760px;height:760px;
  left:50%; top:-120px;
  opacity:.12; filter:blur(8px);
  transform:translateX(-50%);
  mix-blend-mode:screen;
  animation:ringRotate 18s linear infinite;
}
@keyframes ringRotate{
  to{ transform:translateX(-50%) rotate(360deg); }
}

 
.svg-stroke path{
  stroke:rgba(255,255,255,0.12);
  stroke-width:1.3;
  fill:none;
  stroke-dasharray:600;
  stroke-dashoffset:600;
  animation:dash 10s linear infinite;
}
@keyframes dash{
  0%{ stroke-dashoffset:600; opacity:0; }
  40%{ stroke-dashoffset:0; opacity:.18; }
  100%{ stroke-dashoffset:-600; opacity:0; }
}

 
.particle{
  position:absolute;
  width:6px;height:6px;
  border-radius:9999px;
  background:rgba(255,255,255,0.7);
  opacity:.6;
  filter:blur(.6px);
  animation:float 6s ease-in-out infinite;
}
@keyframes float{
  0%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(20px,-60px) scale(.9); }
  100%{ transform:translate(0,0) scale(1); }
}

 
.title{
  text-shadow:0 6px 28px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.03);
  letter-spacing:.8px;
}
.subtitle{
  text-shadow:0 3px 20px rgba(0,0,0,.35);
  letter-spacing:.7px;
}

 
.soft-shape,
.curve-shape{
  position:absolute; border-radius:50%;
  pointer-events:none;
  mix-blend-mode:screen;
}

.soft-shape{ filter:blur(70px); opacity:.35; z-index:8; }
.curve-shape{
  width:420px; height:420px;
  filter:blur(40px);
  opacity:.65; z-index:5;
  background:radial-gradient(circle at 70% 70%,rgba(255,255,255,.35),rgba(255,255,255,.05) 60%,transparent 100%);
}

.soft-shape.glow-1{
  width:280px;height:280px;
  background:rgba(255,120,200,.35);
  top:15%; left:5%;
}
.soft-shape.glow-2{
  width:260px;height:260px;
  background:rgba(80,220,255,.35);
  bottom:12%; right:10%;
}
.soft-shape.glow-3{
  width:320px;height:320px;
  background:rgba(170,120,255,.35);
  top:45%; left:55%;
}

 .heartbeat-play {
  animation: heartbeatPulse 3s ease-in-out forwards;
}

 .heartbeat-line polyline {
  animation: none;
}
 #hero {
   
  padding-bottom: 6rem;
}
 

.hero-section {
  min-height: 100svh;
  display: flex;
  align-items: center;
}
 .contact-section {
  min-height: auto;        
  display: flex;
  flex-direction: column;
}
.contact-section {
  min-height: auto;
}

 
#contact {
  display: flex;
  flex-direction: column;
}

#contact .flex-1 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ourTeamSwiper {
  position: relative;
}

.ourTeamSwiper .team-prev,
.ourTeamSwiper .team-next {
  color: #2a6877;
  width: 44px;
  height: 44px;
   background-color: #f5f5f5 !important;
  border-radius: 9999px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.ourTeamSwiper .team-prev:hover,
.ourTeamSwiper .team-next:hover {
  transform: scale(1.1);
}

.ourTeamSwiper .team-prev.is-disabled,
.ourTeamSwiper .team-next.is-disabled {
  background-color: #e6e6e6;
  color: #b0b0b0;
  pointer-events: none;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.member-highlight {
  font-size: 0.875rem;      
  font-style: italic;
  color: #6b7280;          
  line-height: 1.6; margin-top: 10px;
}


.ourTeamSwiper .team-prev.is-disabled i,
.ourTeamSwiper .team-next.is-disabled i {
  color: #b0b0b0;
}

@media (min-width: 768px) {
  .ourTeamSwiper .team-prev {
    left: -60px;
  }
  .ourTeamSwiper .team-next {
    right: -60px;
  }
}

@media (max-width: 767px) {
  .ourTeamSwiper .team-prev {
    left: 8px;
  }
  .ourTeamSwiper .team-next {
    right: 8px;
  }
}

.ourTeamSwiper .swiper-pagination {
  position: relative;
  margin-top: 20px;
}

.ourTeamSwiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: #a7c4ca;
  opacity: 1;
}

.ourTeamSwiper .swiper-pagination-bullet-active {
  background-color: #2a6877;
}

body.modal-open {
  overflow: hidden;
  padding-right: var(--scrollbar-width);
}

.section-normal {
  display: block;         
}
.page-section--flow {
  justify-content: flex-start;
}

.footer {
  border-bottom: 1px solid #e5e7eb;  
  padding: 16px 0 8px;  
}

.footer-content {
  display: flex;
  align-items: flex-start; 
  gap: 10px;
  font-size: 16px;
  color: #374151;
}

.footer-content i {
  font-size: 18px;
}   

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  z-index: 0;
}

.hero-video.active {
  opacity: 1;
}


 .hero-video-overlay,
.video-overlay-bg {
  position: absolute;
  inset: 0;
  background-color: rgb(70 89 109 / 70%);
  z-index: 10;
  pointer-events: none;
}



 .popup-content {
  max-height: 80vh;
  overflow-y: auto;
  padding-right: 0.5rem;
  box-sizing: border-box;
}

.popup-content::-webkit-scrollbar {
  width: 6px;
}

.popup-content::-webkit-scrollbar-track {
  background: transparent;
}

.popup-content::-webkit-scrollbar-thumb {
  background-color: #2a6877;
  border-radius: 3px;
}

.popup-content {
  scrollbar-width: thin;
  scrollbar-color: #2a6877 transparent;
}
#teamModal {
  align-items: flex-start;
  padding: 2rem 1rem;
}

#teamModal #modalContent {
  max-height: 80vh;
  overflow-y: auto;
}

.popup-content {
  max-height: none;
}

#teamModal #modalContent::-webkit-scrollbar {
  width: 6px;
}

#teamModal #modalContent::-webkit-scrollbar-thumb {
  background-color: #2a6877;
  border-radius: 4px;
}

#teamModal #modalContent::-webkit-scrollbar-track {
  background: transparent;
}

#teamModal #modalContent {
  scrollbar-width: thin;
  scrollbar-color: #2a6877 transparent;
}