/* FML Group additions — kept separate from the theme's own CSS files
   so the original template styling stays fully intact and upgradeable. */

.services-list .item{
  position:relative;
  overflow:hidden;
}
.cluster-photo{
  position:absolute;
  inset:0;
  z-index:-2;
  background-size:cover;
  background-position:center;
  filter:saturate(.8) brightness(.45);
}
.cluster-illustration{
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.22;
  pointer-events:none;
  transition:opacity .5s ease;
}
.services-list .item:hover .cluster-illustration{ opacity:.14; }
.cluster-illustration svg{ width:100%; height:100%; display:block; }
.services-list .item::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(180deg, rgba(20,21,23,0) 0%, rgba(20,21,23,.5) 45%, rgba(20,21,23,.72) 100%);
  pointer-events:none;
}
.service-box{ position:relative; z-index:1; }
.cluster-tagline{ margin-bottom:8px; }
.sub-list{
  list-style:none;
  margin:0;
  padding:0;
  text-align:left;
}
.sub-list li{
  position:relative;
  padding-left:16px;
  margin-bottom:6px;
  font-size:14px;
  line-height:1.5;
}
.sub-list li::before{
  content:'';
  position:absolute;
  left:0;
  top:9px;
  width:6px;
  height:1px;
  background:currentColor;
  opacity:.6;
}
.services-list .item:hover{
  color:#fff;
}
.services-list .item:hover .service-box,
.services-list .item:hover .service-box h3,
.services-list .item:hover .service-box p{
  color:#fff;
}

.hero-photo{
  position:absolute;
  inset:0;
  z-index:-1;
  background-size:cover;
  background-position:center;
  filter:saturate(.85) brightness(.75);
}

.hero-illustration{
  position:absolute;
  inset:0;
  z-index:0;
  opacity:.35;
  pointer-events:none;
}
.hero-illustration svg{ width:100%; height:100%; display:block; }
#video .counter-box{
  padding-left:8px;
  padding-right:8px;
}
.fact-label{
  display:block;
  font-size:13px;
  line-height:1.3;
  white-space:normal;
  word-break:break-word;
  margin-top:2px;
}

.legal-box{
  margin-top:16px;
  padding:16px 20px;
  background:rgba(0,0,0,.2);
  border-radius:10px;
  font-size:12.5px;
  line-height:1.7;
  text-align:left;
  color:rgba(255,255,255,.75);
}

@media (max-width:767px){
  #header{
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  #logo{ color:#fff !important; }
  #navigation button i{ color:#fff !important; }
  .navigation-menu > li > a{ color:#fff !important; }
  .navigation-menu > li.active > a,
  .navigation-menu > li > a:hover{ color:#fff !important; text-decoration:underline; text-underline-offset:4px; }
  .nav-box{
    background: linear-gradient(160deg, #2f6fb8 0%, #1f8a90 100%) !important;
    min-height:100vh;
  }
  .navbar-nav{
    background: transparent !important;
  }
}

.scroll-progress-btn{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:500;
  width:56px;
  height:56px;
  border:none;
  border-radius:50%;
  background:rgba(0,0,0,.4);
  backdrop-filter:blur(4px);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:background .3s ease, transform .3s ease;
}
.scroll-progress-btn:hover{
  background:rgba(0,0,0,.6);
  transform:translateY(-2px);
}
.progress-ring{
  position:absolute;
  inset:0;
  width:56px;
  height:56px;
  transform:rotate(-90deg);
}
.progress-ring-bg{
  fill:none;
  stroke:rgba(255,255,255,.25);
  stroke-width:3;
}
.progress-ring-fill{
  fill:none;
  stroke:#39ced6;
  stroke-width:3;
  stroke-linecap:round;
  transition:stroke-dashoffset .5s cubic-bezier(.16,1,.3,1);
}
.progress-arrow{
  position:relative;
  z-index:1;
  color:#fff;
  width:16px;
  height:16px;
  display:flex;
}
.progress-arrow svg{ width:100%; height:100%; }
.progress-percent{
  position:absolute;
  bottom:-22px;
  left:50%;
  transform:translateX(-50%);
  font-family:'Raleway', sans-serif;
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,.75);
  white-space:nowrap;
}
@media (max-width:768px){
  .scroll-progress-btn{
    right:16px;
    bottom:16px;
    width:46px;
    height:46px;
  }
  .progress-ring{ width:46px; height:46px; }
}

.social-icons li a.lang-link{
  font-family:'Raleway', sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
}
.social-icons li a.lang-link.active{
  background:linear-gradient(90deg, #4096ee, #39ced6);
  color:#fff;
}
@media (max-width:768px){
  .social-icons li a.lang-link{
    width:34px;
    font-size:11px;
  }
}

.welcome-box{ position:relative; z-index:2; }

.gallery-list .item{
  width:100%;
}

.about-contentbox{
  margin-top:0;
}
.illustration-box{
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:4px;
}
.illustration-box svg{ width:100%; height:100%; display:block; }

.milestone-tile{
  width:100%;
  aspect-ratio:16/10;
  background:linear-gradient(160deg, #2c2d30 0%, #1c1d1f 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.milestone-tile::before{
  content: attr(data-year);
  font-family:'Raleway', sans-serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:.08em;
  color:transparent;
  background:linear-gradient(90deg, #4096ee, #39ced6);
  -webkit-background-clip:text;
  background-clip:text;
}

.service-icon i,
.counter-icon{
  background:linear-gradient(90deg, #4096ee, #39ced6);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.placeholder-note{
  font-family:'Raleway', sans-serif;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
  position:fixed;
  bottom:14px;
  right:14px;
  z-index:999;
  background:rgba(0,0,0,.4);
  padding:6px 10px;
  border-radius:3px;
}