html {  scroll-behavior: smooth;}

:root {
    --primary-color: #2178B5;
    --primary-bg: #2178B5;

    --secondary-color: #327fda;
    --secondary-bg: #327fda;
    --white: #FFF;
	--black: #000;
}


body {
    background-color: #FFF !important;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-size-adjust:100%;
    font-family:"Open Sans",sans-serif; 
    font-weight: 400;
    color: #000;
}

a{
    text-decoration:none !important;
    color:var(--black);
    transition: 0.3s ease;
}
a:hover{
    color:var(--secondary-color);
}
p{font-size:1rem;font-family:"Open Sans",sans-serif !important;line-height: 1.7;}


.title{font-family: "Domine", serif;}
.title>span{color:var(--secondary-color);;}

.rounded-4{border-radius:0.5rem !important;}


.fw-300{font-weight: 300 !important;}
.fw-400{font-weight: 400 !important;}
.fw-500{font-weight: 500 !important;}
.fw-600{font-weight: 600 !important;}
.fw-700{font-weight: 700 !important;}
.fw-800{font-weight: 800 !important;}

.fs-7{font-size:0.9rem !important;}
.fs-8{font-size:0.85rem !important;}

.rounded-3 {    border-radius: .75rem !important;}

.text-light{color:#DBDBDB !important;}

.btn-site{background-color:transparent;color: var(--secondary-color);font-size:16px;padding: 7px 25px 7px 25px;transition: 0.3s ease-in;border-radius: 0.35rem;border: 2px solid var(--secondary-color);font-family: "open-sans",sans-serif;font-weight: 500;}
.btn-site:hover{border-color:var( --black);color: var( --black);opacity: 0.5;}
.text-site{color:var( --secondary-bg);}

.svg{display: inline-block;background: none;width: 1rem;margin-right: 0.3rem;}

.navbar-light .navbar-nav .nav-link{color: var(--black) !important;font-size: 13px;font-weight: 500;text-transform: uppercase;}
.navbar-light .navbar-nav .nav-link.active,.navbar-light .navbar-nav .nav-link:hover{color: #327fda !important;}



.home-language{background-color:rgba(0, 0, 0, 0.7);}
.home-language h2>span,.home-news h3>span{color:#f09714;}

.home-map{background: url("../../images/map.webp") no-repeat center center fixed;background-size:cover;position:relative;}
.home-map:after{content:'';position:absolute;top:0;bottom:0;left:0;right:0;background-color:rgba(0,0,0,0.5);z-index:1;}
.home-map .container{z-index:2;position:relative;}


.home-news{background: url("../../images/news.jpg") no-repeat center center;background-size:cover;position: relative;}
.home-news:after{content:'';position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-color: rgba(0,0,0,0.55);z-index: 1;}
.home-news .container{z-index: 2;position: relative;}

.home-news .contents .col-md-10{border-bottom: 2px solid #FFF;margin-bottom: 1rem;}

.equal-col {  display: flex;  flex-direction: column;  height: 100%;}
.equal-col h5 {  margin-top: auto;}

.objectives .col-3 i{display: block;color: var(--secondary-bg);font-size: 4rem;text-align: center;}


@media (min-width: 768px) {
  .border-between {
    border-right: 1px solid rgba(255, 255, 255, 0.25); /* subtle white line */
  }
}


@keyframes marquee {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Slider full height */
.sldr,
.sldr .carousel,
.sldr .carousel-inner,
.sldr .carousel-item,
.sldr .slider-bg {
  width: 100%;
  height: calc(100vh - 84px); /* full viewport minus navbar */
  overflow: hidden;
}

/* Slider background */
.slider-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  height: calc(100vh - 84px);
  z-index: 0; /* ensure overlay behind content */
}

/* Dark overlay */
.slider-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 0; /* behind content */
}

/* Slider content */
.slider-content {
  position: relative;
  z-index: 2; /* above overlay */
  text-align: center;
  padding: 0 15px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Carousel indicators container */
.carousel-indicators {
  bottom: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 3; /* above overlay */
  position: absolute;
}

/* Rounded dots */
.carousel-indicators button {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
  border: none !important;
  transition: all 0.3s ease;
  margin: 0 6px;
  padding: 0;
}

/* Active dot using variable */
.carousel-indicators .active {
  background-color: var(--secondary-bg) !important;
  transform: scale(1.3);
}

.bg-info-50{background-color: rgba(13,202,240,0.15) !important;}
.bg-warning-50{background-color: rgba(255,193,7,0.15) !important;}


.banner{position: relative;padding: 55px 0;background-image: url("../../images/network.webp");background-size: cover;background-position: center;color:#FFF;}
.banner:before{background:rgba(0,0,0,0.5);content: '';position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 1;}
.banner .container{position: relative;z-index: 2;}
.banner .container h1{font-weight: 600;margin-bottom: 1rem;}

.navbar{box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);padding: 0.5rem 0;}
.navbar-brand {padding-top: 0.75rem;padding-bottom: 0.75rem;margin-right: 0;white-space: nowrap;}
.navbar-brand img{height:60px;}

.bg-gradient-primary{background-image:linear-gradient(186deg, #7EB8FD 5.6%, #02479D 95.3%);}
.bg-gradient-secondary{background-image:linear-gradient(90deg, var( --secondary-bg ) 0%, #FBA20887 100%)}
.bg-site-primary{background-color:var( --primary-bg);}
.bg-site-secondary{background-color:var( --secondary-bg);}

.home-img{background: url("../../images/top-bg.webp") no-repeat center center;background-size:cover;position: relative;}
.home-img:before{content:'';position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: linear-gradient(217deg, #2D2E872B 22%, #22201D 100%);z-index: 1;}
.home-img .top-content{padding:150px 0;position: relative;z-index: 2;}
.home-img .top-content .display-3{font-weight: 600;}
.home-tabs .container {
  display: flex;
  justify-content: space-between; /* distribute evenly */
  flex-wrap: nowrap;              /* keep them in one row */
  width: 100%;
  gap: 5px;                       /* small spacing */
}
.home-tabs .container {
  display: flex;
  flex-wrap: wrap;      /* allow items to go to next line */
  gap: 10px;            /* spacing between items */
  justify-content: center; /* center all items */
}

.home-tabs .container span {
  display: inline-flex;  /* keep size according to content */
  background: var(--secondary-bg);
  color: #FFF;
  text-align: center;
  padding: 6px 12px;
  border-radius: 25px;
  transition: .45s ease-in-out;
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;   /* keep text in one line inside the span */
}

.home-tabs .container span:hover {
  background: var(--primary-bg);
  cursor: pointer;
}


.home-tabs .container span:first-child {  margin-left: 0;}
.home-tabs .container span:last-child {  margin-right: 0;}

.home-points h2 {font-size:3rem;text-align: center;}
.home-points .points .card {background-color:rgba(33,120,181,0.1);border-color:#DDDDDD;}
.home-points .points .card h4{color:#2178B5;font-weight: 600;}
.home-points .points svg {width: 3em;height: 3em;color: var(--secondary-color);margin-bottom: 1rem;}

.adv .card{padding: 2rem 2.5rem;border-radius:1rem;}
.adv .img_sp2 img{width: 45%;right:0;transform: rotate(15deg) translateY(-20%)}
.adv .text h3{font-size: 2.5rem;}
.adv .text .badge{font-size: 18px;padding-top:0.6rem !important; padding-bottom:0.6rem !important; }

.packages .card{padding: 2rem 1.5rem;color:#FFF;border-radius:1rem;}

.connection .new-cnc{background-color:rgb(33, 120, 181,0.1);padding: 4.5rem 3rem;}
.connection .cnc-cntr {
    width: 65px;
    height: 65px;
    line-height: 65px;
    border-radius: 50%;
    display: flex;               /* use flex to center content vertically & horizontally */
    justify-content: center;
    align-items: center;
    background-color: var(--secondary-bg);
    text-align: center;
    font-size: 2.2rem;
    font-weight: 600;
    color: #FFF;
    margin-right: 1rem;
    flex-shrink: 0;              /* prevent shrinking on small screens */
}


.thr-imgs .card{height: 320px;}
.thr-imgs .card img{width:100%;height:100%;object-fit: cover;transition: 0.7s ease-out;}
.thr-imgs .card:hover img{transform: scale(1.1);}
.thr-imgs .card .card-footer{background-color: var( --primary-bg);color: #FFF;text-align: center;font-size: 1.4rem;}

.footer{background-color:#3380da;}
.footer .logo{height:75px;max-width:100%;}

.ftr ul{padding: 0;margin: 0;}
.ftr ul li{display: block;}
.ftr ul li a{display: block;padding: 4px 0;font-size: 1.2rem;}

.ftr .btrc{width:75%;margin: auto;display: block;}
.ftr .members img.flex-img {  flex: 0 0 33.33%;max-width: 33.33%;padding: 0 3px;}

.ftp_server a{display: block;padding: 8px 3px;background-color: var(--primary-bg);color: #FFF;text-align: center;font-size: 1.5rem;border-radius: 0.4rem;font-weight: 600;transition: 0.3s ease-out;}
.ftp_server a:hover{background-color: var(--secondary-bg);color:#000;}

.contact iframe{height:100%;}
.contact .card i{width: 60px;height: 60px;line-height: 60px;border-radius: 50%;text-align: center;color: var( --secondary-bg);font-size: 1.7rem;background-color: #FFF;display: block;}

.reviews .card{background-color:rgb(33, 120, 181,0.09);}
.reviews .card h6{color:var( --primary-color);}

.navbar-light .navbar-toggler{background-color:var( --primary-bg);box-shadow: none;outline: none;}

.navbar-light .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");width: 1.3em;height: 1.7em;}

.offcanvas .navbar-nav .nav-link.active, .offcanvas .navbar-nav .nav-link:hover{color: var(--secondary-color) !important;}

@media (min-width:1400px) {
    .container{min-width:1100px !important;}
}

@media (max-width: 1366px) {
    .container{min-width:90% !important;}
    .connection .new-cnc{padding: 2.5rem 2rem;}
}
@media (max-width: 1080px) {
    .desktop-menu{display:none !important;}
    .home-img .top-content{padding:55px 0;}
    .home-img .top-content h1.display-3{font-size:calc(1.2rem + 3.3vw);}
    
    .home-tabs .container {justify-content: start;gap:5px;}
    .home-tabs .container span{padding:3px 12px;}
    .home-points h2.w-50{width:100% !important;font-size: 2rem;}
    .support p.w-50{width:100% !important;}
    .ftr .logoftr{height:150px;display: block;margin: auto;}
    .ftr .btrc{height:150px;width: auto;}
}