body{
font-family:Arial, Helvetica, sans-serif;
}

/* ===== NAVBAR ===== */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: linear-gradient(135deg, rgba(15, 32, 80, 0.95) 0%, rgba(50, 50, 120, 0.95) 100%);
    backdrop-filter: blur(10px);
    z-index: 1000;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
}

.brand-logo {
    height: 42px;
    width: auto;
    display: block;
}

.brand-icon {
    font-size: 28px;
}

.brand-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.navbar-menu {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-link {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    position: relative;
    transition: all 0.3s ease;
    font-size: 15px;
}

.nav-link:hover {
    color: #667eea;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.cta-link {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 10px 20px;
    border-radius: 6px;
    color: #fff !important;
}

.cta-link:hover::after {
    width: 0;
}

.mobile-toggle {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    gap: 6px;
}

.mobile-toggle span {
    width: 25px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: 0.3s;
}

@media (max-width: 768px) {
    .navbar-container {
        padding: 0 20px;
    }

    .navbar-menu {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        flex-direction: column;
        background: rgba(15, 32, 80, 0.99);
        padding: 20px;
        gap: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .navbar-menu.active {
        display: flex;
    }

    .mobile-toggle {
        display: flex;
    }

    .language-selector {
        margin-left: 0;
    }
}

.lang-btn {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.lang-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.lang-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

@media (max-width: 768px) {
    .language-selector {
        margin-left: 10px;
        gap: 6px;
    }

    .lang-btn {
        padding: 6px 10px;
        font-size: 12px;
    }
}

.hero-video{
    position:relative;
    height:100vh;
    overflow:hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-video video{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
}

.hero-background-video {
    z-index:0;
}

#particles-canvas,
.hero-gradient {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

#particles-canvas {
    z-index:1;
}

.hero-gradient {
    z-index:2;
}

/* ===== Demo form styles ===== */
.demo-form{
    margin-top:18px;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.06);
}
.demo-form .form-row{
    margin-bottom:12px;
    display:block;
}
.demo-form label{
    display:block;
    font-weight:600;
    margin-bottom:6px;
}
.demo-form input[type="text"],
.demo-form input[type="email"],
.demo-form input[type="tel"],
.demo-form input[type="date"],
.demo-form input[type="time"],
.demo-form textarea{
    width:100%;
    padding:10px 12px;
    border:1px solid #e6e9ef;
    border-radius:8px;
    font-size:15px;
}
.demo-form .two-cols{display:flex;gap:12px}
.demo-form .two-cols > div{flex:1}
.demo-form .btn{margin-top:6px}

@media (max-width:768px){
    .demo-form .two-cols{flex-direction:column}
}

/* Field error messages */
.error-msg{
    color:#c53030;
    font-size:13px;
    margin-top:6px;
}

.hero-content {
    position:relative;
    z-index:3;
}

.hero-text {
    color: #ffffff;
    text-align: center;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.hero-text .hero-title,
.hero-text .hero-subtitle,
.hero-text .hero-stats,
.hero-text .hero-ctas {
    color: #ffffff;
}

.hero-overlay{
    position:relative;
    z-index:2;
    top:40%;
    color:white;
}
/* Grid do portfólio */
#portfolio-grid {
    display: flex;
    flex-wrap: wrap;
}

/* Cada item */
.portfolio-item {
    display: flex;
}
.portfolio-item {
    overflow: hidden;
    position: relative;
}

.portfolio-item img {
    transition: transform 0.4s ease;
}

.portfolio-item:hover img {
    transform: scale(1.1);
}
#blog .row{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap:25px;
}

#blog .card{
height:100%;
border:none;
border-radius:12px;
transition:0.3s;
}

#blog .card:hover{
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

#blog .card-body{
display:flex;
flex-direction:column;
justify-content:center;
text-align:left;
padding:25px;
}


.portfolio-box {
position: relative;
overflow: hidden;
}

.portfolio-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2,6,23,0.0) 0%, rgba(2,6,23,0.55) 60%, rgba(2,6,23,0.75) 100%);
    color: #ffffff;
    display: flex;
    align-items: end;
    justify-content: center;
    opacity: 0;
    transition: opacity 220ms ease, transform 220ms ease;
    padding: 18px;
}

.portfolio-box:hover .portfolio-overlay {
    opacity: 1;
}

/* Container da imagem: usando proporção 16:9 para consistência */
.portfolio-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    transition: transform 0.5s ease, filter 0.35s ease;
}

/* Responsividade */
@media (max-width: 768px) {
    .portfolio-item img {
        height: 200px;
    }
}

@media (max-width: 576px) {
    .portfolio-item img {
        height: 180px;
    }
}

.portfolio-card{
    height:270px;
    overflow:hidden;
    border-radius:12px;
    background:#fff;
    box-shadow:0 8px 22px rgba(2,6,23,0.06);
}

.portfolio-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.portfolio-card:hover img{
    transform: scale(1.06);
}

.lazy-placeholder{ filter: blur(8px) saturate(0.95) contrast(0.95); }

.portfolio-overlay .overlay-content{ text-align:center }
.overlay-title{ font-size:1.05rem; font-weight:700; margin-bottom:6px }
.overlay-sub{ font-size:0.95rem; opacity:0.95 }

.portfolio-overlay .overlay-content h4,
.portfolio-overlay .overlay-content p{
    color:#fff;
    text-shadow:0 4px 18px rgba(0,0,0,0.6);
}

.portfolio-info h3{ color:#0f1724; }
.portfolio-info p{ color:#374151; }
.project-tags .tag{
    display:inline-block;
    background:rgba(15,23,42,0.06);
    color:#0f1724;
    padding:6px 8px;
    border-radius:6px;
    font-size:13px;
    margin-right:6px;
}

.portfolio-grid{
width:100%;
height:100%;
object-fit:cover;
transition:0.5s;
}

.portfolio-card:hover img{
transform:scale(1.1);
}


.card{
border:none;
border-radius:12px;
transition:0.3s;
}



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

.whatsapp-float{
    position:fixed;
    bottom:20px;
    right:20px;
    width:56px;
    height:56px;
    background:#25d366;
    color:white;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 6px 18px rgba(37,211,102,0.28);
    z-index:2000;
    transition:transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.whatsapp-float:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 28px rgba(37,211,102,0.32);
}
.whatsapp-float svg{
    display:block;
    stroke:#fff;
    width:22px;
    height:22px;
}

@media (max-width:480px){
    .whatsapp-float{
        width:48px;
        height:48px;
        bottom:16px;
        right:16px;
    }
    .whatsapp-float svg{ width:18px; height:18px; }
}

.blog-grid{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap:25px;
}

.blog-card{
text-decoration:none;
color:inherit;
}

.blog-card .card{
    border-radius:18px;
    transition:0.3s;
    height:100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.97), rgba(246,249,255,0.98));
    border: 1px solid rgba(102, 126, 234, 0.16);
    box-shadow: 0 16px 40px rgba(102, 126, 234, 0.08);
}

.blog-card:hover .card{
    transform:translateY(-8px);
    box-shadow:0 22px 50px rgba(102,126,234,0.18);
}
.blog-section{
padding:80px 0;
}
.blog-section .section-subtitle{
max-width:760px;
margin:16px auto 40px;
font-size:1rem;
color:#6f7684;
text-align:center;
}
.blog-card .card-body{
display:flex;
flex-direction:column;
gap:16px;
padding:30px;
height:100%;
}
.blog-card-title{
font-size:1.35rem;
margin-bottom:8px;
}
.blog-card-desc{
font-size:0.98rem;
line-height:1.7;
color:#586174;
}
.blog-link{
align-self:flex-start;
margin-top:auto;
font-weight:700;
color:#0d6efd;
}
.about-text{
max-width:850px;
margin:auto;
font-size:18px;
line-height:1.7;
color:#444;
text-align:center;
}

.about-text{
max-width:850px;
margin:auto;
font-size:18px;
line-height:1.7;
color:#555;
}

.tech-grid{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
gap:30px;
margin-top:40px;
}

.tech-card{
background:white;
padding:30px;
border-radius:14px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
transition:0.3s;
}

.tech-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

.tech-icon{
font-size:40px;
margin-bottom:15px;
}
.about-text{
max-width:850px;
margin:auto;
font-size:18px;
line-height:1.7;
color:#555;
}

.tech-grid{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
gap:30px;
margin-top:40px;
}
/* FORMULÁRIO */

#contacto form{
max-width:900px;
margin:auto;
}

#contacto .form-control,
#contacto select,
#contacto textarea{

border-radius:10px;
border:1px solid #ddd;
padding:12px 15px;
font-size:16px;
transition:all 0.3s ease;
box-shadow:none;
}

#contacto .form-control:focus,
#contacto select:focus,
#contacto textarea:focus{

border-color:#ffc107;
box-shadow:0 0 0 3px rgba(255,193,7,0.25);
outline:none;
}

#contacto textarea{
resize:none;
}

/* BOTÃO */

#contacto button{

border-radius:10px;
padding:12px;
font-weight:600;
letter-spacing:0.5px;
transition:all 0.3s ease;
}

#contacto button:hover{

transform:translateY(-2px);
box-shadow:0 10px 20px rgba(0,0,0,0.15);
}

/* ESPAÇAMENTO ENTRE CAMPOS */

#contacto .col-md-4,
#contacto .col-md-6,
#contacto .col-md-8{

margin-bottom:1000px;
}


/* SEÇÃO SERVIÇOS */

#servicos .row{
align-items:stretch;
justify-content:center;
}

/* CARDS */

#servicos .card{
border-radius:14px;
transition:0.3s;
height:100%;
}

/* HOVER */

#servicos .card:hover{
transform:translateY(-6px);
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

/* ÍCONES */

#servicos .tech-icon{
font-size:40px;
}

/* LISTA */

#servicos ul{
margin-top:10px;
padding-left:18px;
}

/* TÍTULOS */

#servicos h5{
font-weight:600;
}
/* ===== SEÇÃO SERVIÇOS ===== */

#servicos{
padding-top:60px;
padding-bottom:60px;
}

/* ===== CARDS ===== */

#servicos .card{
border-radius:16px;
border:none;
transition:all 0.35s ease;
box-shadow:0 10px 25px rgba(0,0,0,0.12);
}

/* EFEITO AO PASSAR MOUSE */

#servicos .card:hover{
transform:translateY(-12px);
box-shadow:0 25px 50px rgba(0,0,0,0.25);
}

/* ===== ÍCONES GRANDES ===== */

.tech-icon,
#servicos i{
font-size:55px;
display:inline-block;
margin-bottom:10px;
}

/* ===== ANIMAÇÃO DOS ÍCONES ===== */

.tech-icon,
#servicos i{
animation:iconeFlutuar 3s ease-in-out infinite;
}

/* ===== KEYFRAMES ===== */

@keyframes iconeFlutuar{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-6px);
}

100%{
transform:translateY(0px);
}

}

/* ===== TÍTULO ===== */

#servicos h5{
font-weight:600;
margin-top:10px;
}

/* ===== LISTA ===== */

#servicos ul{
margin-top:12px;
padding-left:18px;
}

#servicos li{
margin-bottom:5px;
}
/* FORMULÁRIO SKYWATCH */

#form-skywatch{
background:#f8f9fa;
}

.sky-input{

border-radius:12px;
padding:14px 16px;
border:1px solid #ddd;
font-size:16px;
transition:all 0.3s ease;
box-shadow:none;
}

.sky-input:focus{

border-color:#ffc107;
box-shadow:0 0 0 3px rgba(255,193,7,0.25);
outline:none;
}

.sky-btn{

background:#ffc107;
border:none;
border-radius:12px;
padding:14px;
font-weight:600;
transition:all 0.3s ease;
}

.sky-btn:hover{

transform:translateY(-2px);
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

@media (max-width:768px){

.sky-input{
padding:12px;
font-size:15px;
}
/* LOGO MAIOR SEM QUEBRAR MENU */

.logo-skywatch{
height:70px;
width:auto;
}

/* MANTER MENU ALINHADO */

.navbar{
padding-top:5px;
padding-bottom:5px;
}
/* ===== MENU NAVBAR ===== */

.navbar{
background:#0b1c3d;
padding:12px 0;
}

/* LINKS DO MENU */

.navbar-nav .nav-link{
color:white;
font-weight:500;
margin-left:20px;
position:relative;
transition:0.3s;
}

/* EFEITO HOVER */

.navbar-nav .nav-link:hover{
color:#f7a600;
}

/* LINHA ANIMADA */

.navbar-nav .nav-link::after{

content:"";
position:absolute;
width:0%;
height:2px;
left:0;
bottom:-5px;

background:#f7a600;
transition:0.4s;
h1 {
  text-align: center;
  margin: 35px 0 20px 0 !important;
}
}

/* ANIMAÇÃO DA LINHA */

.navbar-nav .nav-link:hover::after{
width:100%;
}

/* LINK ATIVO */

.navbar-nav .nav-link.active{
color:#f7a600;
}

/* LOGO */

.navbar-brand img{
height:70px;
transition:0.3s;
}

/* ANIMAÇÃO DO LOGO */

.navbar-brand img:hover{
transform:scale(1.05);
}

}
.logo-skywatch{
height:80px;
margin-top:-10px;
margin-bottom:-10px;
}

/* Store styles */
.store-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.product-card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 8px 24px rgba(2,6,23,0.06)}
.product-media{position:relative;padding-top:56.25%;overflow:hidden}
.product-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.product-card:hover .product-media img{transform:scale(1.03)}
.product-body{padding:14px}
.product-title{font-size:16px;margin:0 0 8px}
.product-price{font-weight:700;color:#0b1c3d}

/* Cart count badge */
.cart-count{display:inline-block;min-width:20px;text-align:center}





/* Authentication / social buttons */
.login-box, .auth-box{
    background: #ffffff;
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 12px 40px rgba(2,6,23,0.06);
}
.social-btn{
    display:inline-block;
    padding:10px 14px;
    border-radius:8px;
    color:#fff;
    text-decoration:none;
    font-weight:600;
    font-size:14px;
}
.social-google{background:#db4437}
.social-facebook{background:#1877f2}
.error-msg{background:#ffecec;color:#a80000;padding:10px;border-radius:8px;margin-bottom:12px}
.success-msg{background:#e6ffed;color:#006400;padding:10px;border-radius:8px;margin-bottom:12px}

@media (max-width:480px){
    .social-btn{flex:1;text-align:center;padding:10px 8px;font-size:13px}
    .login-box{margin:20px;padding:16px}
}