:root {
   --primary-color: #4765e4;
   --dark-color: #333;
   --light-color: #f8f9fa;
   --border-color: #ddd;
   --whatsapp-color: #25d366;
 }

 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 html,
 body {
   overflow-x: hidden;
   width: 100%;
   min-width: 320px;
 }

 body {
   font-family: "Poppins", sans-serif;
   color: var(--dark-color);
   line-height: 1.6;
   overflow-x: hidden;
   background-color: #fff;
 }

 a {
   text-decoration: none;
   color: inherit;
 }

 a:hover {
   text-decoration: none;
   color: inherit;
 }

 ul {
   list-style: none;
 }

 img {
   max-width: 100%;
   height: auto;
 }

 .img-fluid {
   max-width: 100%;
   height: auto;
   border-radius: 10%;
 }

 p {
   text-align: justify;
 }

 .container {
   width: 90%;
   max-width: 1200px;
   margin: 0 auto;
 }

 /* UTILS */
 .max-img img {
   max-width: 100%;
   height: auto;
 }

 /* .row-center {
   align-items: center;
   justify-content: center;
 } */

 /* HEADER */
 .header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   background: rgba(255, 255, 255, 0.95);
   z-index: 1000;
   padding: 20px 0;
   border-bottom: solid 2px var(--primary-color);
   transition: all 0.5s;
 }

 .header.scrolled {
   padding: 10px 0;
   background: rgba(255, 255, 255, 0.98);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }

 .header.scrolled .nav a,
 .header.scrolled .slogan,
 .header.scrolled .fa-whatsapp-square {
   color: var(--dark-color) !important;
 }

.slogan {
    font-size: 12px;
    color: var(--dark-color);
    line-height: 1.4;
        margin-left: 30px;
}
.slogan span b{
  font-size: 30px;
  text-align: center;
}

  .whatsapp-link {
   position: relative;
    left: 124px;
    bottom: 27px;
  }

 .ic-menu {
   background: url("../img/icon_menu_hamburguer_azulepreto.svg") center center no-repeat;
   background-size: cover;
   display: inline-block;
   color: var(--dark-color);
   width: 35px;
   height: 35px;
   cursor: pointer;
 }

 .content-nav.active {
   display: block !important;
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   background: white;
   padding: 20px 0;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
   z-index: 999;
 }

 .nav {
   list-style: none;
   padding: 0;
   justify-content: flex-end;
   display: flex;
 }

 .nav .menu-item a {
   display: inline-block;
   padding: 0 10px;
   font-weight: 800;
   color: var(--dark-color);
   font-size: 12px;
   text-decoration: none;
   text-transform: uppercase;
   transition: color 0.3s;
 }

 .nav .menu-item a:hover {
   color: var(--light-color);
   background-color: var(--primary-color);
   border-radius: 10px;
   padding: 5px 15px;
   transition: all 0.3s;
 }

 /*CONTEUDO*/
 /* HERO SECTION */
 .hero-services {
   background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../img/img_hero_nossosserviços.jpg') center center no-repeat;
   background-size: cover;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   color: white;
   margin-bottom: 60px;
   margin-top: 7rem;
 }

 .hero-services h1 {
   font-size: 2.8rem;
   font-weight: 700;
   margin-bottom: 15px;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 }

 .hero-services p {
   font-size: 1.2rem;
   max-width: 700px;
   margin: 0 auto;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
 }

 .btn-hero {
   background: var(--primary-color);
   text-decoration: none;
   color: #f8fafc;
   border-radius: 10px;
   margin-top: 46px;
   padding: 10px 18px;
   display: inline-block;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
   transition: all 0.3s;
   border: 2px solid var(--primary-color);
 }

 .btn-hero:hover {
   background: transparent;
   color: var(--primary-color);
   transform: translateY(-3px);
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }

 /* SERVICES GRID */
 .section-title {
   text-align: center;
   font-size: 2.2rem;
   font-weight: 700;
   margin: 0 0 40px;
   position: relative;
   display: inline-block;
 }

 .section-title:after {
   content: '';
   position: absolute;
   bottom: -10px;
   left: 12%;
   transform: translateX(-50%);
   width: 60px;
   height: 3px;
   background: var(--primary-color);
 }

 .services-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 30px;
   margin-bottom: 80px;
 }

 /* CARD DE SERVIÇO COM IMAGEM DE FUNDO */
 .service-card {
   height: 380px;
   border-radius: 12px;
   overflow: hidden;
   position: relative;
   cursor: pointer;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
   transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .service-card:hover {
   transform: scale(1.03);
   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
 }

 .service-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(71, 101, 228, 0.2) 100%);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   color: white;
   padding: 20px;
   text-align: center;
   transition: all 0.3s ease;
 }

 .service-icon {
   width: 70px;
   height: 70px;
   background: white;
   color: var(--primary-color);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
   font-size: 28px;
   transition: all 0.3s ease;
 }

 .service-card:hover .service-icon {
   background: var(--primary-color);
   color: white;
   transform: scale(1.1);
 }

 .service-title {
   font-size: 1.4rem;
   font-weight: 700;
   margin: 0;
   text-transform: uppercase;
   letter-spacing: 1px;
   transition: all 0.3s ease;
 }

 .service-card:hover .service-title {
   color: var(--primary-color);
 }

 /* ANIMAÇÃO FADE IN UP */
 .fade-in-up {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 0.8s ease, transform 0.8s ease;
 }

 .fade-in-up.appear {
   opacity: 1;
   transform: translateY(0);
 }

 /* CARD DE SERVIÇO COM VÍDEO DE FUNDO */
 .service-card {
   height: 380px;
   border-radius: 12px;
   overflow: hidden;
   position: relative;
   cursor: pointer;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
   transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .service-card:hover {
   transform: scale(1.03);
   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
 }

 .service-video-container {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
 }

 .service-video {
   width: 100%;
   height: 100%;
   object-fit: cover;
   pointer-events: none;
 }

 .service-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(71, 101, 228, 0.2) 100%);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   color: white;
   padding: 20px;
   text-align: center;
   transition: all 0.3s ease;
 }

 .service-icon {
   width: 70px;
   height: 70px;
   background: white;
   color: var(--primary-color);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
   font-size: 28px;
   transition: all 0.3s ease;
 }

 .service-card:hover .service-icon {
   background: var(--primary-color);
   color: white;
   transform: scale(1.1);
 }

 .service-title {
   font-size: 1.4rem;
   font-weight: 700;
   margin: 0;
   text-transform: uppercase;
   letter-spacing: 1px;
   transition: all 0.3s ease;
 }

 .service-card:hover .service-title {
   color: var(--primary-color);
 }

 /* MODAL DE SERVIÇO */
 .modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.7);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 9999;
   opacity: 0;
   visibility: hidden;
   transition: all 0.4s ease;
 }

 .modal-overlay.active {
   opacity: 1;
   visibility: visible;
 }

 .modal-content {
   background: white;
   width: 90%;
   max-width: 600px;
   max-height: 80vh;
   border-radius: 12px;
   position: relative;
   transform: translateY(-30px);
   opacity: 0;
   transition: all 0.4s ease;
   overflow-y: auto;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
 }

 .modal-overlay.active .modal-content {
   transform: translateY(0);
   opacity: 1;
 }

 /* ESTILO DO CABEÇALHO DO MODAL COM VÍDEO */
 .modal-header {
   position: relative;
   padding: 40px 20px;
   border-radius: 12px 12px 0 0;
   text-align: center;
   overflow: hidden;
   height: 200px;
   min-height: 150px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }

 .modal-header-video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   pointer-events: none;
   z-index: 0;
 }

 .modal-header-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.6);
   z-index: 1;
 }

 .modal-header-content {
   position: relative;
   z-index: 2;
   color: white;
 }

 .modal-header i {
   font-size: 36px;
   margin-bottom: 15px;
   color: white;
 }

 .modal-header h3 {
   font-size: 1.5rem;
   font-weight: 700;
   margin: 0;
   color: white;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
 }

 .modal-body {
   padding: 30px;
 }

 .modal-text {
   font-size: 1rem;
   color: #555;
   line-height: 1.8;
   margin: 0 0 30px 0;
 }

 .close-modal-full {
   position: absolute;
   top: 20px;
   right: 20px;
   background: white;
   color: #333;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   font-weight: bold;
   cursor: pointer;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
   z-index: 10;
 }

 .close-modal {
   position: absolute;
   top: 15px;
   right: 15px;
   background: none;
   border: none;
   font-size: 24px;
   cursor: pointer;
   color: #aaa;
   transition: color 0.3s;
 }

 .close-modal:hover {
   color: var(--primary-color);
 }

 .btn-cta {
   background: var(--primary-color);
   color: white;
   padding: 15px 35px;
   border-radius: 30px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
   text-decoration: none;
   display: inline-block;
   transition: all 0.3s ease;
   border: 2px solid var(--primary-color);
 }

 .btn-cta:hover {
   background: transparent;
   color: var(--primary-color);
   transform: translateY(-3px);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
 }

 /* FOOTER */
 footer {
   background: #111;
   color: #aaa;
 }

 .session-footer {
   padding: 35px 0;
   color: #000;
   font-size: 13px;
   border-top: solid 1px var(--border-color);
 }

 .session-footer span {
   display: inline-block;
   margin: 0 10px 10px 0;
   color: #ccc;
 }

 .session-footer span i {
   color: var(--primary-color);
 }

 .nav-footer {
   padding: 0;
   display: block;
 }

 .nav-footer .menu-item {
   display: block;
   width: 100%;
 }

 .nav-footer .menu-item a {
   display: block;
   width: 100%;
   padding: 5px 0;
   font-size: 13px !important;
   color: #ccc !important;
   transition: color 0.3s;
   text-decoration: none;
 }

 .nav-footer .menu-item a:hover {
   color: var(--primary-color) !important;
 }

 .redes a {
   display: inline-block;
   font-size: 16px;
   margin: 0 6px;
   border-radius: 100%;
   color: var(--primary-color);
   transition: color 0.3s;
   text-decoration: none;
 }

 .redes a:hover {
   color: #fff;
 }
  .my-3 a{
     display: inline-block;
    font-size: 16px;
    margin: 0 6px;
    border-radius: 100%;
    color: var(--primary-color);
    transition: color 0.3s;
    text-decoration: none;
  }
    .my-3 a:hover {
    color: #fff;
    text-decoration: none;
  }

  

 .copy {
   padding: 10px 0;
   font-size: 12px;
   background: #000;
   color: #777;
   text-align: center;
 }

 .copy a {
   font-size: 12px;
   color: var(--primary-color);
   font-weight: 500;
   text-decoration: none;
 }

 .btn-pdf{    background-color: var(--primary-color);
    max-width: 132px;
    font-weight: 700;
    border-radius: 10px;
    text-align: center;
    line-height: 2rem;
    margin-top: 9px;
    margin-left: -17px;
}
.btn-pdf:hover{
      background: transparent;
    color: var(--primary-color);
    transform: translateY(-3px);
    border-color: var(--primary-color);
    border:1px solid;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

 /* BOTÃO VOLTAR AO TOPO */
 .seta-up {
   display: none;
   position: fixed;
   width: 50px;
   height: 50px;
   font-size: 25px;
   text-align: center;
   color: #fff;
   padding: 12px 17px;
   border-radius: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 9999;
   right: 15px;
   bottom: 120px;
   cursor: pointer;
   line-height: 1.2;
   transition: all 0.3s ease;
 }

 .seta-up:hover {
   background-color: rgba(71, 101, 228, 0.8);
   transform: translateY(-3px);
 }

 /* WHATSAPP FLOAT */
 .whatsapp-float {
   position: fixed;
   width: 60px;
   height: 60px;
   bottom: 30px;
   right: 30px;
   background-color: var(--whatsapp-color);
   color: #fff;
   border-radius: 50px;
   text-align: center;
   font-size: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
   z-index: 100;
   transition: all 0.3s ease-in-out;
   text-decoration: none;
 }

 .whatsapp-float:hover {
   transform: scale(1.1);
   background-color: #128c7e;
 }

 /* LINK BTN */
 .link-btn {
   display: inline-flex;
   color: var(--primary-color) !important;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
   align-items: center;
   transition: transform 0.3s;
 }

 .link-btn img {
   margin-left: 5px;
   width: 20px;
   transition: transform 0.3s;
 }

 .link-btn:hover img {
   transform: translateX(3px);
 }



 /* MAPS */
 .maps-container {
   display: flex;
   flex-wrap: wrap;
   gap: 25px;
   margin: 40px 40px;
   justify-content: center;
 }

 .map-box {
   flex: 1 1 calc(50% - 12.5px);
   min-width: 300px;
   background: white;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
   transition: all 0.3s ease;
 }

 .map-box:hover {
   transform: translateY(-5px);
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
 }

 .map-header {
   background: #4765e4;
   color: white;
   padding: 15px;
   font-weight: 600;
   font-size: 1.1rem;
   text-align: center;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }

 .map-embed {
   width: 100%;
   height: 0;
   padding-bottom: 56.25%;
   position: relative;
 }

 .map-embed iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: none;
 }


 /* ESTILO DO BOTÃO CIRCULAR DE TRAÇAR ROTA */

 .btn-go {
   position: absolute;
   top: 15px;
   right: 15px;
   width: 45px;
   height: 45px;
   background: #4765e4;
   color: white;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
   transition: all 0.3s ease;
   z-index: 2;
   font-size: 18px;
 }

 .btn-go:hover {
   background: #3a56c5;
   transform: scale(1.1);
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
 }

 /* ANIMAÇÕES DE ENTRADA PARA OS MAPAS */
 .slideInLeft {
   opacity: 0;
   transform: translateX(-50px);
   transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .slideInLeft.appear {
   opacity: 1;
   transform: translateX(0);
 }

 .slideInRight {
   opacity: 0;
   transform: translateX(50px);
   transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .slideInRight.appear {
   opacity: 1;
   transform: translateX(0);
 }

 /* RESPONSIVO */
 @media screen and (max-width: 991px) {
   .nav {
     padding: 20px 0 0 0;
     flex-direction: column;
     display: none;
   }

   .nav .menu-item {
     display: block;
     width: 100%;
   }

   .nav .menu-item a {
     display: block;
     width: 100%;
     padding: 15px 0;
     font-size: 16px;
     text-align: center;
     border-top: solid 0.3px var(--border-color);
     font-weight: 400;
     text-decoration: none;
   }

   .nav .menu-item a:hover {
     transition: all 0.3s;
   }

   .content-nav {
     display: none;
   }

   .content-nav.active .nav {
     display: flex;
     flex-direction: column;
     padding: 0;
   }

   .header {
     padding: 20px;
   }


   .slogan {
     font-size: 14px;
     line-height: 16px;
     display: block;
     margin: 5px 0 0 0;
   }

               .slogan span b{
  font-size: 25px;
  text-align: center;
}

   .nav-footer .menu-item a,
   .session-footer span {
     font-size: 16px !important;
   }
 }


 @media screen and (max-width: 768px) {
   .hero-services h1 {
     font-size: 4.2rem;
   }

   .hero-services p {
     font-size: 1.5rem;
   }

   .section-title {
     font-size: 1.8rem;
   }

   .service-card {
     height: 320px;
   }

   .service-title {
     font-size: 1.2rem;
   }

   .content-nav {
     display: none;
   }

   .nav .menu-item a:hover {
     transition: all 0.3s;
   }

   .content-nav.active .nav .menu-item a {
     display: block;
     width: 100%;
     padding: 15px 20px;
     font-size: 16px;
     text-align: center;
     border-top: solid 1px #eee;
     font-weight: 500;
     text-decoration: none;
     color: #333;
   }
               .slogan span b{
  font-size: 20px;
  text-align: center;
}
   .map-box {
     flex: 1 1 100%;
   }

 }

 @media (max-width: 480px) {
   .hero-services h1 {
     font-size: 1.8rem;
   }

   .nav .menu-item a:hover {
     transition: all 0.3s;
   }

   .modal-content {
     width: 80%;
   }

   .content-nav {
     display: none;
   }

   
        .slogan span b{
  font-size: 16px;
  text-align: center;
}
 }