/* =========================================================
   BASE / RESET / PRINT
   ========================================================= */

@media print {
  .no-print { display: none !important; }
}

:root{
  --colour00:#000000;   /* Black */
  --colour01:#0583cf;   /* Celtic blue */
  --colour03:#303030;
  --colour04:#B80C09;   /* International red */
  --hoverred:#970000;
  --colour05:#F7F7FF;   /* Ghost white */
  --colour06:#EEC643;   /* Ming */
  --colour07:#077a07;
  --colour08:#000d1a;   /* Dark blue */
}

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body{
  font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background-color:#fffcf4;
  margin:0;
}

a, a:hover, a:focus { text-decoration:none; }

.btn, .btn:focus{
  outline:none !important;
  box-shadow:none !important;
}

.layout_padding{ padding:40px 0; }
.layout_padding-top{ padding-top:40px; }
.layout_padding-bottom{ padding-bottom:40px; }

/* =========================================================
   HEADER
   ========================================================= */

.header_section{
  font-family:"Roboto",sans-serif;
  background:#000;
  color:#fff;
  min-height:90px;
  padding:1% 0;
}

.custom_nav-container.navbar-expand-lg .navbar-nav .nav-link{
  color:#fff;
  padding:0 12px;
}

.custom_nav-container .navbar-toggler{
  border-color:#fff;
  outline:none;
}

.custom_nav-container .navbar-toggler .navbar-toggler-icon{
  background-image:url(../images/menu.png);
}

.custom_nav-container .nav_search-btn{
  background-image:url(../images/search-icon.png);
  background-size:22px;
  background-repeat:no-repeat;
  background-position:center 7px;
  width:35px;height:35px;
  padding:0;border:none;
}

.nav-link:hover{ color:#fefefe; }

.logo_box{ width:80px; }
.logo_box img{ width:250%; }

.call_to_btn{
  display:inline-block;
  color:#fefefe;
  padding:10px 35px;
  background-color:#f6bb08;
  margin-top:5%;
  margin-bottom:20%;
  border-radius:0;
}

/* =========================================================
   SLIDER
   ========================================================= */

.slider_section{ height:calc(100vh - 90px); }

.slider_section .carousel-indicators{
  top:50%;left:-75px;transform:translateY(-50%);
  display:block;bottom:auto;right:auto;
}

.slider_section .carousel-indicators li{
  width:16px;height:16px;opacity:1;margin:0 auto;
}

.slider_section .carousel-indicators .active{
  width:24px;height:24px;background-color:var(--colour01);
}

.carousel-control-prev, .carousel-control-next{ display:none; }

/* vertical slide helpers */
.vert .carousel-item-next.carousel-item-left,
.vert .carousel-item-prev.carousel-item-right{
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);
}
.vert .carousel-item-next,
.vert .active.carousel-item-right{
  -webkit-transform:translate3d(0,100%,0);
  transform:translate3d(0,100%,0);
}
.vert .carousel-item-prev,
.vert .active.carousel-item-left{
  -webkit-transform:translate3d(0,-100%,0);
  transform:translate3d(0,-100%,0);
}

.slider_section .slider_box{
  display:flex;position:relative;
  height:calc(100vh - 90px);
  background-size:cover;background-repeat:no-repeat;
}

#photo2{ background-image:url(../images/photos/vtr.jpg); }
#photo3{ background-image:url(../images/photos/articulacao.jpg); }
#photo4{ background-image:url(../images/photos/pc-susp-2.jpg); }

/* Negative Section */
img.logo{ display:block;margin:auto;height:70px; }
img.code{ display:block;margin:auto;height:150px; }

.negative{
  margin-top:200px;display:block;margin-inline:auto;
  width:90vw;max-width:1000px;
}

p.negative{
  font-size:18px;text-align:justify;color:var(--colour00);margin-top:20px;
}

.protocol{ color:var(--hoverred); }

h1.negative{
  margin:7px;font-size:30px;text-align:center;color:var(--colour00);
}
h3.negative{
  margin:10px;font-size:24px;text-align:center;color:var(--colour07);
}

/* slider content */
.slider_section .slider_box .fixed_company-detail{
  position:absolute;top:50%;right:10%;transform:translate(-50%,-50%);
}
.slider_section .slider_box .fixed_company-detail p{
  width:12px;text-align:center;word-break:break-word;color:#fff;text-transform:uppercase;
}
.slider_section .slider_box .slider-detail{
  color:#fff;width:60%;margin-top:14%;margin-left:20%;
}
.slider_section .slider_box .slider-detail .slider_detail-heading h2{
  font-weight:100;text-transform:uppercase;
}
.slider_section .slider_box .slider-detail .slider_detail-heading h1{
  font-weight:700;text-transform:uppercase;
}
.slider_section .slider_box .slider-detail .slider_detail-text{ color:#f8fafd; }
.slider_section .slider_box .slider-detail .slider_detail-btn{ display:flex; }
.slider_section .slider_box .slider-detail .slider_detail-btn a{
  margin-top:28px;padding:16px 20px;background-color:var(--colour01);color:#fff;
}

/* =========================================================
   WELCOME
   ========================================================= */

.welcome_section {}
.welcome_section .col-md-6{ padding:0 4%; }

.welcome_detail{ width:75%; }
.welcome_super{ width:100%; }

.welcome_detail h2, .welcome_super h2{
  text-transform:uppercase;color:#0c0b09;font-weight:bold;
}
.welcome_detail h3, .welcome_super h3{
  text-transform:uppercase;color:var(--colour00);position:relative;
}
.welcome_super h3{ text-align:center; }

.welcome_detail h3::after,
.welcome_super h3::after{
  position:absolute;bottom:0;left:0;content:"";
  height:1.5px;width:140px;background-color:var(--colour01);
}
.welcome_super h3::after{ left:0; } /* mantido */

.welcome_detail h2, .welcome_detail p, .welcome_detail .welcome_detail-btn{ margin-top:25px; }
.welcome_section .welcome_detail-btn a,
.welcome_section .welcome_detail-btn a:hover{
  text-transform:uppercase;color:#0c0b09;
}
.welcome_section .welcome_detail-btn a img{ width:25px; }

/* =========================================================
   SERVICES
   ========================================================= */

.service_section .container{ padding:0 50px; }

.service_detail h2{
  text-transform:uppercase;color:#0c0b09;font-weight:bold;
}
.service_detail h3{
  text-transform:uppercase;color:var(--colour00);position:relative;
}
.service_detail h3::after{
  position:absolute;bottom:0;left:0;content:"";
  height:1.5px;width:45px;background-color:var(--colour01);
}

.service_section .service_img-container{
  display:flex;flex-wrap:wrap;padding-top:40px;
}
.service_section .service_img-container .service_img-box{
  display:flex;justify-content:center;align-items:center;
  min-width:300px;height:325px;background-size:cover;
}

.service_img-container .service_img-box.i-box-1{ width:49%;background-image:url(../images/services/gcm.jpg);margin:4px; }
.service_img-container .service_img-box.i-box-2{ width:49%;background-image:url(../images/services/defesacivil-2.jpg);margin:4px; }
.service_img-container .service_img-box.i-box-3{ width:49%;background-image:url(../images/photos/gu-dmt.jpg);margin:4px; }
.service_img-container .service_img-box.i-box-4{ width:49%;background-image:url(../images/services/cima.jpg);margin:4px;background-repeat:no-repeat; }
.service_img-container .service_img-box.i-box-5{ width:49%;background-image:url(../images/services/segmail-2.jpg);margin:4px; }
.service_img-container .service_img-box.i-box-6{ width:49%;background-image:url(../images/services/susp4.jpg);margin:4px; }
.service_img-container .service_img-box.i-box-7{ width:49%;background-image:url(../images/services/the-lady.jpg);margin:4px; }
.service_img-container .service_img-box.i-box-8{ width:49%;background-image:url(../images/services/function.jpg);margin:4px; }

.service_section .service_img-container a,
.service_section .service_img-container a:hover{
  color:#fff;text-transform:uppercase;padding:15px 40px;
}

.service_section .service_img-container .service_img-box:hover{ cursor:pointer; }
.service_section .service_img-container .service_img-box:hover a{ background-color:var(--colour00); }

.service_btn{ margin-top:20px;display:flex;justify-content:center; }
.service_btn a, .service_btn a:hover{ text-transform:uppercase;color:#0c0b09; }
.service_btn a img{ width:25px; }

/* =========================================================
   SECURITY (SEÇÃO DOS CARDS)
   ========================================================= */

.security_section h2{
  text-transform:uppercase;color:#0c0b09;font-weight:bold;text-align:center;margin-bottom:35px;
}
.security_section h3{
  text-transform:uppercase;color:var(--colour00);position:relative;text-align:center;
}
.desc h3{ color:#ffffff; }
.security_section h3::after{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  content:"";height:1.5px;width:140px;background-color:var(--colour01);
}

.security_section .security_container{
  width:90%;margin:0 auto;
}

.security_section .security_img-box{
  display:flex;justify-content:center;align-items:center;
  background-size:cover;width:300px;height:490px;margin:0 auto;z-index:999;
}

.security_section .security_img-box a{
  display:none;opacity:0;text-transform:uppercase;padding:8px 12px;border:1.5px solid #f0f0f0;color:#fff;
}
.security_section .security_img-box:hover a{ display:inline-block;opacity:1; }

.security_btn{ margin-top:20px;display:flex;justify-content:center; }
.security_btn a, .security_btn a:hover{ text-transform:uppercase;color:#0c0b09; }
.security_btn a img{ width:25px; }

/* BG + overlay (para toda a seção) */
.security_section{
  position:relative;width:100%;
  color:#fff;
}

.security_section::before{
  content:"";position:absolute;inset:0;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  z-index:0;
}
.security_section > *{ position:relative;z-index:1; }
#system{ color:#fff; }

/* =========================================================
   OWL (LEGADO) – mantido para compatibilidade
   ========================================================= */

.owl-carousel .owl-nav,
.owl-carousel .owl-nav.disabled{
  display:flex;justify-content:space-between;width:100%;z-index:0;
}
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-nav .owl-prev{
  position:absolute;top:50%;
  background-color:var(--colour00);
  border:2px solid var(--colour05);
  width:70px;height:40px;
  background-repeat:no-repeat;background-size:22px;background-position:50%;
  transform:translateY(-50%);
}
.owl-carousel .owl-nav .owl-next{
  right:-25px;background-image:url(../images/right-arrow.png);
}
.owl-carousel .owl-nav .owl-prev{
  left:-25px;background-image:url(../images/left-arrow.png);
}

/* =========================================================
   STORY
   ========================================================= */

.story_section{ padding:0 4%; }
.story_section .container-fluid{
  box-shadow:1px -1px 24px -13px rgba(0,0,0,.75);
}
.story_section .col-md-6{
  padding:0;display:flex;align-items:center;background-color:#fcfcfc;
}

.story_detail{ margin-left:40px;width:85%; }
.story_detail h2{
  text-transform:uppercase;color:#0c0b09;font-weight:bold;
}
.story_detail h3{
  text-transform:uppercase;color:var(--colour00);margin:0;
}

.story_detail .story_detail-btn{ margin-top:25px; }
.story_section .story_detail-btn a,
.story_section .story_detail-btn a:hover{
  text-transform:uppercase;color:#0c0b09;
}
.story_section .story_detail-btn a img{ width:25px; }

/* =========================================================
   CONTACT
   ========================================================= */

.contact_form-container{
  background-image:url(../images/photos/vtr.jpg);background-size:cover;
}
.contact_form-container form{
  display:flex;flex-direction:column;align-items:flex-start;
}
.contact_form-container .contact_box{
  background-color:#ffffffe0;padding:35px 40px;width:50%;height:60%;
  margin:100px 50px;
}
.contact_form-container form input,
.contact_form-container form input:focus,
.contact_form-container form input:active{
  border:none;background-color:transparent;border-bottom:1px solid var(--colour01);
  width:85%;margin-top:12px;outline:none;
}
.contact_form-container form button{
  border:none;background-color:var(--colour00);color:#fff;padding:8px 20px;margin-top:15px;
}
.contact_section .row .col-md-6{ padding:0; }

/* =========================================================
   INFO / FOOTER
   ========================================================= */

.info_section{
  background-color:#000202;font-family:"Roboto",sans-serif;
}
.info_section .info_detail{ display:flex;align-items:center; }
.info_section .info_detail p{ color:#fff; }

.address_link-container{ display:block; }
.address_link-container a{
  display:flex;color:#fff;margin:15px 0;align-items:center;
}
.address_link-container a img{ margin-right:10px; }

.info_section .news_container h3,
.info_section .address_container h3{
  text-transform:uppercase;color:#fff;font-size:22px;
}
.info_section .news_container form{ margin:28px 0; }
.info_section .news_container form input{
  border:none;background-color:#fff;width:70%;padding:7px 10px;
}
.info_section .news_container form button{
  border:none;background-color:var(--colour00);color:#fff;font-size:14px;padding:8px 15px;
  margin-top:15px;text-transform:uppercase;
}
.info_section .news_container .social_container{
  width:50%;display:flex;justify-content:space-between;
}

.footer_section{
  background-color:#000;padding:20px 0;font-family:"Roboto",sans-serif;
}
.footer_section p{ color:#fff;margin:0;text-align:center; }
.footer_section a{ color:#fff; }

/* =========================================================
   VALID (cartões/área extra que você usa)
   ========================================================= */

.main{
  display:block;margin-inline:auto;width:80vw;
}

section#validation{
  width:100vw;background-image:url(../images/background/abstract.jpg);
  background-size:cover;background-repeat:no-repeat;
}

div.valid{
  background-image:url(../images/logo/federacao/federal600opac25.png);
  background-size:contain;background-repeat:no-repeat;background-position:center;
}
div.valid-transporte{
  background-image:url(../images/logo/municipal/municipal600opac25.png);
  background-size:contain;background-repeat:no-repeat;background-position:center;
}
div.valid-justice{
  background-image:url(../images/logo/logo-gcm-04/gcm-transparente-25.png);
  background-size:contain;background-repeat:no-repeat;background-position:center;
}

div.validation{ margin:0;padding:20px; }

h3.invalid{ font-size:1.2em;text-align:center;color:var(--hoverred); }
h3.valid{ font-size:1.2em;text-align:center;color:var(--colour07); }
h3.zero{ font-weight:700;font-size:1.6em;text-align:left; }

p.valid{ font-size:.8em; }

a.system{ background-color:rgba(0,0,0,.568); }

button.sub, button.option, button.link{
  border:0;border-radius:15px;height:40px;margin:10px;
  color:var(--colour05);
}
button.sub{ background-color:var(--colour07); width:40vw; }
button.option{ background-color:var(--colour00); width:40vw; }
button.link{ background-color:var(--colour00); padding:10px 40px; }
button.link:hover{ background-color:var(--colour01); }
button.option:hover{ background-color:var(--colour00); }
button.sub:hover{ background-color:#004200; }

.true{ color:var(--colour07); }
.false{ color:var(--colour04); }

/* box */
iframe.map{ width:50vw; }

/* CP */
div.super{
  margin:auto;border:7px solid goldenrod;height:400px;width:270px;
  background-repeat:no-repeat;background-position:center;background-size:cover;
}
div.block{
  text-align:center;background-color:var(--colour08);color:var(--colour05);
  border-radius:7px;padding:20px;margin:20px;
}
div.centre{
  text-align:center;background-color:var(--colour05);color:var(--colour00);
  padding:0;margin:0;border-radius:0;
}
div.photo{ height:4cm;width:3cm;border:1px solid; }

/* =========================================================
   VÍDEO HERO
   ========================================================= */

.video_section,
.video_section .video-hero{
  position:relative;width:100%;
  min-height:70vh;height:100svh;overflow:hidden;
}
.video-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
.video-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.35),rgba(0,0,0,.35));
  pointer-events:none;
}
.video_section .slider_box{
  position:relative;z-index:2;color:#fff;max-width:1100px;margin:0 auto;
  padding:clamp(16px,4vw,48px);
  display:flex;flex-direction:column;gap:12px;height:100%;justify-content:center;
}
.video_section .slider_detail-heading h1{
  font-size:clamp(2rem,6vw,4rem);line-height:1.1;margin:0;
}
.video_section .slider_detail-text p,
.video_section .fixed_company-detail p{
  font-size:clamp(.9rem,2.2vw,1.25rem);margin:0;opacity:.95;
}

/* Acessibilidade: reduzir movimento */
@media (prefers-reduced-motion: reduce){
  .video-bg{ animation:none !important; }
}

/* =========================================================
   SYSTEM CARD - Alinhamento central real
   ========================================================= */

.systems-deck {
  --card-w: 300px;
  --gap: 32px;

  display: flex;
  justify-content: center;   /* Centraliza todo o grupo */
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: var(--gap);
  width: 100%;
  margin-inline: auto;
  padding: 20px 0;
  box-sizing: border-box;
}

/* garante proporção visual e evita overflow */
.systems-deck > .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 var(--card-w);
  transition: transform .2s ease, opacity .2s ease, filter .2s ease;
}

/* destaca o card central */
.item:not(.is-main) {
  transform: scale(0.95);
  opacity: 0.8;
  filter: saturate(0.9);
}
.item.is-main {
  transform: scale(1.05);
  z-index: 2;
}

/* cartão vidro */
.system-card {
  position: relative;
  width: var(--card-w);
  height: 480px;
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 18px;
  padding: 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
  isolation: isolate;
}

.system-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg) center/cover no-repeat, rgba(255,255,255,0.05);
  filter: blur(14px) saturate(115%);
  transform: scale(1.15);
  z-index: -2;
}

.system-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 10px 30px rgba(0,0,0,0.2), 0 12px 24px rgba(0,0,0,0.25);
  z-index: -1;
}

/* conteúdo */
.system-icon {
  width: 140px;
  height: 140px;
  object-fit: contain;
}

.system-btn {
  display: inline-block;
  padding: 10px 22px;
  font-weight: 700;
  background: rgba(0,0,0,0.8);
  color: #fff;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.18);
  transition: transform .15s ease, opacity .15s ease;
}
.system-btn:hover {
  transform: translateY(-2px);
  opacity: 0.95;
}

.system-caption {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;            /* ocupa toda a largura do card */
  text-align: center;     /* alinha o texto dentro */
  font-size: 0.95rem;
  margin-top: 8px;
}

/* fundo */
.security_section {
  position: relative;
  background: url('../images/background/back-brain.jpg') center/cover no-repeat fixed;
  color: #fff;
}
.security_section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 0;
}
.security_section > * {
  position: relative;
  z-index: 1;
}

/* responsivo */
@media (max-width: 1024px) {
  .systems-deck {
    --card-w: 260px;
    --gap: 24px;
  }
  .system-card {
    height: 440px;
  }
}

@media (max-width: 768px) {
  .systems-deck {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    justify-content: flex-start;
    padding: 20px;
    gap: 20px;
  }
  .systems-deck > .item {
    scroll-snap-align: center;
    flex: 0 0 85vw;
  }
}

@media (max-width: 480px) {
  .system-card {
    height: 420px;
  }
  .system-icon {
    width: 110px;
    height: 110px;
  }
}

