:root		{

 			--azul-escuro:#050d18;

  			--azul-medio:#0a1d35;

  			--azul-claro:#102b4d;

	  		--azul-destaque:#2d6cb5;

  			--azul-hover:#6ea8ff;

  			--cinza:#f4f7fb;

  			--branco:#ffffff;

			}

*			{

 	 		margin:0;

 	 		padding:0;

 	 		box-sizing:border-box;

	  		font-family:Arial, Helvetica, sans-serif;

			}

html		{

 		 	scroll-behavior:smooth;

			}

body		{

  			background:var(--cinza);

		  	color:#222;

 		 	line-height:1.6;

			}

/* =========================
   menu
========================= */

nav					{

 		 			width:100%;

		  			position:fixed;

 		 			top:0;

		 			left:0;

		  			display:flex;

 		 			justify-content:space-between;

 		 			align-items:center;

  					padding:16px 8%;

 		 			background:rgba(5,13,24,.95);

  					backdrop-filter:blur(6px);

 		 			z-index:1000;

  					border-bottom:1px solid rgba(255,255,255,.08);

					}

.logo-area			{

  					display:flex;

  					align-items:center;

			  		gap:18px;

					}

.logo				{

 			 		width:58px;

			  		height:58px;

 			 		object-fit:contain;

 			 		background:transparent;

  					padding:0;

 			 		border-radius:10%;

  					box-shadow:none;

  					transition:.3s;

					}

.logo:hover			{

 				 	transform:scale(1.05);

					}

.logo-text h2		{

 				 	color:#ffffff;

 				 	font-size:1.7rem;

  					letter-spacing:2px;

  					font-weight:700;

					}

.logo-text p		{

  					color:#9fb8d9;

 				 	font-size:.78rem;

  					letter-spacing:4px;

					}

nav ul				{

  					display:flex;

  					list-style:none;

  					gap:30px;

					}


nav ul li a			{

 					color:white;

  					text-decoration:none;

  					font-weight:bold;

  					transition:.3s;

					}

nav ul li a:hover	{

  					color:var(--azul-hover);

					}

/* =============================
   3 barrinhas
===============================*/

.menu-toggle 		{

  					display: none; /* Escondido por padrão no desktop */

  					flex-direction: column;

  					gap: 6px;

  					cursor: pointer;

  					background: transparent;

  					border: none;

  					z-index: 1001;

					}

.menu-toggle .bar {

  					width: 30px;

  					height: 3px;

  					background-color: var(--branco);

  					border-radius: 5px;

  					transition: all 0.3s ease;

					}


/* ==========================================================
    3 barras um "X" quando ativo 
==============================================================*/


.menu-toggle.active .bar:nth-child(1) 	{

 	 									transform: translateY(9px) rotate(45deg);

										}

.menu-toggle.active .bar:nth-child(2) 	{

  										opacity: 0;

										}

.menu-toggle.active .bar:nth-child(3) 	{

  										transform: translateY(-9px) rotate(-45deg);

										}


/* =========================
   hero
========================= */



header									{

  										height:100vh;

  										background:

 										linear-gradient(rgba(5,13,24,.88),rgba(5,13,24,.90)),url('https://images.unsplash.com/photo-1474487548417-781cb71495f3?q=80&w=1600&auto=format&fit=crop');

  										background-size:cover;

  										background-position:center;

  										display:flex;

  										justify-content:center;

 										align-items:center;

  										text-align:center;

  										padding:20px;

										}

.hero 									{

  										max-width:850px;

  										color:white;

										}

.hero h1 								{

  										font-size:4rem;

  										margin-bottom:25px;

 										line-height:1.1;

										}

.hero p 									{

  										font-size:1.2rem;

  										color:#c8d6ea;

  										margin-bottom:35px;

										}

.btn 									{
  										display:inline-block;

  										background:var(--azul-destaque);

  										color:white;

  										text-decoration:none;

  										padding:15px 35px;

  										border-radius:8px;

  										font-weight:bold;

  										transition:.3s;

  										box-shadow:0 5px 15px rgba(0,0,0,.3);

										}

.btn:hover 								{

  										background:var(--azul-hover);

  										transform:translateY(-3px);

										}


/* =========================
   seções
========================= */


section 				{
  					padding:90px 10%;
					}

.title 				{
  					text-align:center;
  					margin-bottom:60px;
					}

.title h2 			{
  					font-size:2.8rem;
  					color:var(--azul-escuro);
 					position:relative;
  					display:inline-block;
					}

.title h2::after 		{
  					content:"";

  					width:70%;
  					height:4px;

  					background:var(--azul-destaque);

  					position:absolute;

  					left:15%;
 					bottom:-12px;

  					border-radius:20px;
					}


/* =========================
   serviços
========================= */


.services 			{
  					display:grid;

  					grid-template-columns:
  					repeat(auto-fit,minmax(280px,1fr));

  					gap:30px;
					}

.card				{
  					background:white;

  					border-radius:14px;

  					overflow:hidden;

  					box-shadow:0 8px 25px rgba(0,0,0,.08);

  					transition:.3s;
					}

.card:hover			{
  					transform:translateY(-8px);
					}

.card img			{
  					width:100%;
 	 				height:230px;
  					object-fit:cover;
					}

.card-content		{
  					padding:28px;
					}

.card-content h3	{
  					color:var(--azul-medio);
  					margin-bottom:15px;
  					font-size:1.4rem;
					}

.card-content p		{
  					color:#555;
					}


/* =========================
   sobre
========================= */


.about				{

  					display:grid;

  					grid-template-columns:1fr 1fr;

  					gap:60px;

  					align-items:center;

					}

.about img			{

  					width:100%;

  					border-radius:15px;

  					box-shadow:0 10px 30px rgba(0,0,0,.15);

  					text-decoration:none;

					}

.about h2			{

  					font-size:2.7rem;

  					color:var(--azul-escuro);

  					margin-bottom:25px;

					}

.about p			{

  					margin-bottom:20px;

  					color:#444;

					}


/* =========================
   estatísticas
========================= */


.stats				{

  					background: linear-gradient(135deg, #050d18, #0a1d35, #102b4d);
 	 				color: white;

  					display: grid;
  					grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

  					gap: 20px;

  					text-align: center;
  					padding: 70px 5%;

					}


.stat 				{

  					background: rgba(255,255,255,.04);
  					border: 1px solid rgba(255,255,255,.08);

  					padding: 25px 15px;
  					border-radius: 14px;

  					backdrop-filter: blur(6px);
  					transition: .3s;

					}



.stat:hover 			{

  					transform: translateY(-5px);

  					background: rgba(255,255,255,.08);

					}



/* ====================== 
    número 
==================*/

.stat h3 			{

  					font-size: 2.4rem;

  					color: #6ea8ff;

  					margin-bottom: 8px;

					}

/* =============== TEXTO */

.stat p 				{

  					color: #cfddee;

  					font-size: 0.95rem;

					}



/* =========================
   rodapé
===========================*/

footer				{

  					background:#030912;

  					color:#c8d6ea;

  					text-align:center;

  					padding:40px 20px;

					}

footer p			{

  					margin:8px 0;

					}

/* =======================================
   menu responsivo
============================================ */

@media(max-width:992px){

  nav 				{

    					flex-direction: row; /* Manter logo e botão alinhados */

    					justify-content: space-between;

    					padding: 16px 5%;

  					}


  /* ==================================================
      Botão das 3 barras 
=====================================================*/

  .menu-toggle 		{

    					display: flex;

  					}

  /* ====================================================
    lista de links em menu suspenso
=======================================================*/
  
nav ul 				{

    					position: fixed;

    					top: 90px; 	/* Logo abaixo da barra de navegação */

    					right: -100%; 	/* Escondido para o lado direito da tela */

    					width: 250px;

    					height: calc(100vh - 90px);

    					background: rgba(5, 13, 24, 0.98);

    					backdrop-filter: blur(10px);

    					flex-direction: column;

    					justify-content: flex-start;

   		 			padding: 40px 30px;

    					gap: 25px;

    					transition: right 0.4s cubic-bezier(0.1, 0.8, 0.3, 1);	 /* Animação suave de entrada */

    					border-left: 1px solid rgba(255, 255, 255, 0.08);

  					}

  nav ul.active 		{

    					right: 0;

  					}

  nav ul li 			{

    					width: 100%;

  					}

  nav ul li a 			{

    					font-size: 1.2rem;

    					display: block;

    					padding: 10px 0;

    					border-bottom: 1px solid rgba(255, 255, 255, 0.05);

  					}

  .hero h1 			{

    					font-size: 2.5rem;

  					}

  header 					{  							
							height: auto;  							
							padding: 140px 20px 60px 20px;  							
							}   

  .about 			{

    					grid-template-columns: 1fr;

  					}

					}

@media(max-width: 992px) {
    .cards-contato {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .logo-text h2 {
        font-size: 1.2rem;
    }

    .logo-text p {
        font-size: 0.65rem;
        letter-spacing: 1px;
    }
}