/*==========================================
VTOOS WEBSITE V2
Part 1B.1
==========================================*/

/* Google Font */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* Reset */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:#F4F8FC;

    color:#0F172A;

    overflow-x:hidden;

}

/* Variables */

:root{

--primary:#0A66C2;

--secondary:#2196F3;

--dark:#0F172A;

--white:#FFFFFF;

--light:#F8FBFF;

--shadow:0 20px 40px rgba(0,0,0,.08);

}

/* Animated Background */

.background{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

z-index:-1;

overflow:hidden;

background:
linear-gradient(
135deg,
#F8FBFF,
#EAF4FF);

}

.background span{

position:absolute;

width:220px;

height:220px;

border-radius:50%;

background:rgba(33,150,243,.08);

animation:float 18s infinite ease-in-out;

}

.background span:nth-child(1){

top:10%;

left:8%;

}

.background span:nth-child(2){

top:65%;

left:18%;

}

.background span:nth-child(3){

top:20%;

right:12%;

}

.background span:nth-child(4){

bottom:10%;

right:20%;

}

.background span:nth-child(5){

top:45%;

left:50%;

}

/* Header */

header{

position:fixed;

width:100%;

top:0;

left:0;

z-index:999;

}

.navbar{

max-width:1280px;

margin:auto;

height:90px;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 35px;

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

backdrop-filter:blur(16px);

box-shadow:var(--shadow);

border-radius:0 0 18px 18px;

}

/* Logo */

.logo{
    display:flex;
    align-items:center;
    text-decoration:none;
    min-width:260px;
}

.navbar-logo{
    height:60px;
    width:auto;
    display:block;
}
.logo-main{

font-size:34px;

font-weight:800;

color:var(--primary);

}

.logo-sub{

font-size:13px;

color:#555;

letter-spacing:2px;

}

/* Menu */

.nav-menu{

display:flex;

list-style:none;

gap:35px;

}

.nav-menu a{

text-decoration:none;

color:#0F172A;

font-weight:500;

transition:.3s;

}

.nav-menu a:hover{

color:var(--primary);

}

/* Button */

.consult-btn{

text-decoration:none;

padding:14px 28px;

background:linear-gradient(
135deg,
#0A66C2,
#2196F3);

color:#fff;

border-radius:50px;

font-weight:600;

transition:.3s;

}

.consult-btn:hover{

transform:translateY(-3px);
}
  /*==========================================
Hero Section
==========================================*/

.hero{

    max-width:1280px;

    margin:auto;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:70px;

    padding:150px 35px 80px;

}

.hero-left{

    flex:1;

}

.hero-tag{

    display:inline-block;

    padding:10px 20px;

    background:#E8F3FF;

    color:#0A66C2;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

    margin-bottom:25px;

}

.hero-left h1{

    font-size:64px;

    line-height:1.2;

    margin-bottom:25px;

}

.hero-left h1 span{

    color:#0A66C2;

}

.hero-left p{

    font-size:18px;

    color:#555;

    line-height:1.8;

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-bottom:40px;

}

.primary-btn,
.secondary-btn{

    padding:16px 34px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.primary-btn{

    background:linear-gradient(135deg,#0A66C2,#2196F3);

    color:white;

    box-shadow:0 15px 35px rgba(33,150,243,.35);

}

.primary-btn:hover{

    transform:translateY(-5px);

}

.secondary-btn{

    border:2px solid #0A66C2;

    color:#0A66C2;

    background:white;

}

.secondary-btn:hover{

    background:#0A66C2;

    color:white;

}

.trust-area{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.trust-item{

    background:white;

    padding:12px 18px;

    border-radius:30px;

    box-shadow:var(--shadow);

    font-size:14px;

}

/*==========================================
Dashboard
==========================================*/

.hero-right{

    flex:1;

    display:flex;

    justify-content:center;

}

.dashboard-card{

    width:100%;

    max-width:350px;

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

    backdrop-filter:blur(16px);

    border-radius:30px;

    padding:30px;

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}

.dashboard-header{

    font-size:22px;

    font-weight:700;

    margin-bottom:25px;

    color:#0A66C2;

}

.dashboard-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.dashboard-box{

    background:white;

    padding:25px;

    border-radius:18px;

    text-align:center;

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

    transition:.3s;

}

.dashboard-box:hover{

    transform:translateY(-8px);

}

.dashboard-box h3{

    color:#0A66C2;

    margin-bottom:10px;

}

.dashboard-footer{

    margin-top:25px;

    text-align:center;

    font-weight:600;

    color:#666;

}
  /*==========================================
Technologies
==========================================*/

.technologies{

    max-width:1280px;

    margin:80px auto;

    padding:20px 35px;

    text-align:center;

}

.technologies h2{

    font-size:42px;

    margin-bottom:15px;

}

.technologies p{

    color:#666;

    margin-bottom:45px;

}

.tech-grid{

    display:grid;

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

    gap:25px;

}

.tech-card{

    background:white;

    padding:35px 20px;

    border-radius:20px;

    box-shadow:var(--shadow);

    font-weight:600;

    transition:.3s;

}

.tech-card:hover{

    transform:translateY(-8px);

}

/*==========================================
Services
==========================================*/

.services{

    max-width:1280px;

    margin:100px auto;

    padding:20px 35px;

}

.section-title{

    text-align:center;

    margin-bottom:50px;

}

.section-title h2{

    font-size:42px;

    margin-bottom:15px;

}

.section-title p{

    color:#666;

}

.service-grid{

    display:grid;

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

    gap:30px;

}

.service-card{

    background:white;

    padding:35px;

    border-radius:22px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.service-card:hover{

    transform:translateY(-10px);

}

.service-card h3{

    color:#0A66C2;

    margin-bottom:15px;

}

.service-card p{

    color:#666;

    line-height:1.7;

}

/*==========================================
CTA
==========================================*/

.contact-cta{

    margin:100px auto;

    max-width:1000px;

    text-align:center;

    padding:70px 35px;

    border-radius:30px;

    background:linear-gradient(135deg,#0A66C2,#2196F3);

    color:white;

}

.contact-cta h2{

    font-size:42px;

    margin-bottom:20px;

}

.contact-cta p{

    margin-bottom:35px;

    line-height:1.8;

}

.contact-cta .primary-btn{

    background:white;

    color:#0A66C2;

}

/*==========================================
Footer
==========================================*/

footer{

    margin-top:80px;

    padding:50px 25px;

    background:#0F172A;

    color:white;

    text-align:center;

}

footer h3{

    margin-bottom:15px;

}

footer p{

    color:#CBD5E1;

}

.copyright{

    margin-top:20px;

    font-size:14px;

}

/*==========================================
Responsive
==========================================*/

@media(max-width:992px){

.hero{

flex-direction:column;

text-align:center;

padding-top:140px;

}

.hero-left h1{

font-size:46px;

}

.hero-buttons{

justify-content:center;

}

.trust-area{

justify-content:center;

}

.nav-menu{

display:none;

}

}

@media(max-width:768px){

.hero-left h1{

font-size:36px;

}

.dashboard-grid{

grid-template-columns:1fr;

}

.technologies h2,

.section-title h2,

.contact-cta h2{

font-size:32px;

}

.navbar{

padding:0 20px;

}

}
/*======================================
Products
======================================*/

.products{
padding:80px 8%;
background:#f8fbff;
}

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

.product-card{
background:#ffffff;
padding:30px;
border-radius:20px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
transition:.35s;
position:relative;
overflow:hidden;
border:1px solid rgba(0,123,255,.08);
}

.product-card:hover{
transform:translateY(-10px);
box-shadow:0 18px 40px rgba(0,123,255,.18);
}

.product-card h3{
font-size:24px;
margin:20px 0 15px;
color:#0d47a1;
}

.product-card p{
color:#555;
line-height:1.8;
margin-bottom:18px;
}

.product-card ul{
list-style:none;
padding:0;
margin:0;
}

.product-card ul li{
padding:8px 0;
color:#333;
font-size:15px;
}

.status{
display:inline-block;
padding:8px 15px;
border-radius:50px;
font-size:13px;
font-weight:600;
color:#fff;
}

.development{
background:#16a34a;
}

.planned{
background:#2563eb;
}

.research{
background:#ea580c;
}

.vision{
background:#7c3aed;
}

@media(max-width:768px){

.products{
padding:60px 20px;
}

.product-card{
padding:25px;
}

.product-card h3{
font-size:21px;
}

}
/*======================================
Portfolio
======================================*/

.portfolio{
padding:80px 8%;
background:#ffffff;
}

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

.portfolio-card{
background:#f8fbff;
padding:30px;
border-radius:20px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
transition:.35s;
border:1px solid rgba(0,123,255,.08);
}

.portfolio-card:hover{
transform:translateY(-10px);
box-shadow:0 18px 40px rgba(0,123,255,.18);
}

.portfolio-icon{
font-size:50px;
margin-bottom:20px;
}

.portfolio-card h3{
color:#0d47a1;
margin-bottom:15px;
font-size:24px;
}

.portfolio-card p{
line-height:1.8;
color:#555;
margin-bottom:20px;
}

.portfolio-status{
display:inline-block;
padding:8px 16px;
border-radius:50px;
font-size:13px;
font-weight:600;
color:#fff;
}

@media(max-width:768px){

.portfolio{
padding:60px 20px;
}

.portfolio-card{
padding:25px;
}

}
/*======================================
Innovation Roadmap
======================================*/

.roadmap{
padding:80px 8%;
background:#f8fbff;
}

.roadmap-container{
max-width:900px;
margin:50px auto 0;
display:flex;
flex-direction:column;
gap:25px;
}

.roadmap-item{
display:flex;
align-items:center;
gap:20px;
background:#fff;
padding:25px;
border-radius:18px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
transition:.35s;
border-left:6px solid #2563eb;
}

.roadmap-item:hover{
transform:translateX(10px);
box-shadow:0 18px 40px rgba(37,99,235,.18);
}

.roadmap-icon{
width:70px;
height:70px;
display:flex;
align-items:center;
justify-content:center;
font-size:34px;
background:#eef5ff;
border-radius:50%;
flex-shrink:0;
}

.roadmap-item h3{
margin:0 0 8px;
color:#0d47a1;
font-size:24px;
}

.roadmap-item p{
margin:0;
color:#555;
line-height:1.6;
}

.roadmap-item.completed{
border-left-color:#16a34a;
}

.roadmap-item.planned{
border-left-color:#2563eb;
}

.roadmap-item.future{
border-left-color:#7c3aed;
}

@media(max-width:768px){

.roadmap{
padding:60px 20px;
}

.roadmap-item{
flex-direction:column;
text-align:center;
}

}
.roadmap{
position:relative;
z-index:2;
overflow:hidden;
}

.roadmap-container{
position:relative;
z-index:2;
}
/*======================================
Industries We Serve
======================================*/

.industries{
padding:80px 8%;
background:#ffffff;
}

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

.industry-card{
background:#f8fbff;
padding:35px 25px;
border-radius:20px;
text-align:center;
box-shadow:0 10px 25px rgba(0,0,0,.08);
transition:.35s;
border:1px solid rgba(25,118,210,.08);
}

.industry-card:hover{
transform:translateY(-10px);
box-shadow:0 18px 40px rgba(25,118,210,.18);
}

.industry-icon{
font-size:50px;
margin-bottom:20px;
}

.industry-card h3{
font-size:24px;
color:#0d47a1;
margin-bottom:15px;
}

.industry-card p{
font-size:16px;
line-height:1.7;
color:#555;
}

@media(max-width:768px){

.industries{
padding:60px 20px;
}

.industry-card{
padding:25px;
}

}
/*======================================
About VTOOS
======================================*/

.about{
padding:90px 8%;
background:#f8fbff;
}

.about-container{
display:grid;
grid-template-columns:1.2fr 1fr;
gap:50px;
align-items:center;
}

.about-tag{
display:inline-block;
padding:8px 18px;
background:#eaf4ff;
color:#1976d2;
border-radius:30px;
font-size:14px;
font-weight:600;
margin-bottom:20px;
}

.about-left h2{
font-size:42px;
color:#0d1b3d;
margin-bottom:25px;
line-height:1.3;
}

.about-left p{
font-size:17px;
line-height:1.9;
color:#555;
margin-bottom:20px;
}

.about-right{
display:flex;
flex-direction:column;
gap:25px;
}

.about-card{
background:#fff;
padding:30px;
border-radius:20px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
border-left:5px solid #1976d2;
transition:.35s;
}

.about-card:hover{
transform:translateY(-8px);
box-shadow:0 18px 40px rgba(25,118,210,.18);
}

.about-card h3{
font-size:24px;
margin-bottom:15px;
color:#0d47a1;
}

.about-card p{
font-size:16px;
line-height:1.8;
color:#555;
}

@media(max-width:992px){

.about-container{
grid-template-columns:1fr;
}

.about-left{
text-align:center;
}

.about-left h2{
font-size:34px;
}

}
/*======================================
Why Choose VTOOS
======================================*/

.why-us{
padding:90px 8%;
background:#ffffff;
}

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

.why-card{
background:#f8fbff;
padding:35px 30px;
border-radius:20px;
text-align:center;
box-shadow:0 10px 25px rgba(0,0,0,.08);
border:1px solid rgba(25,118,210,.08);
transition:.35s;
}

.why-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 40px rgba(25,118,210,.18);
}

.why-icon{
width:80px;
height:80px;
margin:0 auto 20px;
display:flex;
align-items:center;
justify-content:center;
font-size:36px;
background:linear-gradient(135deg,#1976d2,#42a5f5);
border-radius:50%;
color:#fff;
}

.why-card h3{
font-size:24px;
color:#0d47a1;
margin-bottom:15px;
}

.why-card p{
font-size:16px;
line-height:1.8;
color:#555;
}

@media(max-width:768px){

.why-us{
padding:60px 20px;
}

}
/*======================================
Contact Section
======================================*/

.contact-section{
padding:90px 8%;
background:#f8fbff;
}

.contact-grid{
display:grid;
grid-template-columns:1fr 1.2fr;
gap:50px;
margin-top:50px;
align-items:start;
}

.contact-info{
display:flex;
flex-direction:column;
gap:25px;
}

.contact-box{
background:#fff;
padding:30px;
border-radius:20px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
border-left:5px solid #1976d2;
transition:.3s;
}

.contact-box:hover{
transform:translateY(-6px);
box-shadow:0 18px 35px rgba(25,118,210,.18);
}

.contact-box h3{
margin-bottom:12px;
color:#0d47a1;
font-size:22px;
}

.contact-box p{
color:#555;
line-height:1.8;
}

.contact-form{
background:#fff;
padding:35px;
border-radius:20px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
display:flex;
flex-direction:column;
gap:20px;
}

.contact-form input,
.contact-form textarea{
padding:15px;
border:1px solid #d9e4f5;
border-radius:12px;
font-size:16px;
font-family:inherit;
outline:none;
transition:.3s;
}

.contact-form input:focus,
.contact-form textarea:focus{
border-color:#1976d2;
box-shadow:0 0 0 3px rgba(25,118,210,.15);
}

.contact-form textarea{
resize:vertical;
min-height:140px;
}

@media(max-width:900px){

.contact-grid{
grid-template-columns:1fr;
}

}
/*======================================
Footer V2
======================================*/

.footer{
    background:#0f172a;
    color:#fff;
    padding:80px 8% 30px;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1.5fr;
    gap:50px;
}

.footer-logo{
    width:80px;
    margin-bottom:20px;
}

.footer h3{
    color:#fff;
    margin-bottom:20px;
    font-size:22px;
}

.footer p{
    color:#cbd5e1;
    line-height:1.8;
}

.footer-links{
    list-style:none;
}

.footer-links li{
    margin-bottom:12px;
}

.footer-links a{
    color:#cbd5e1;
    text-decoration:none;
    transition:.3s;
}

.footer-links a:hover{
    color:#42a5f5;
    padding-left:6px;
}

.footer-contact p{
    margin-bottom:10px;
}

.footer-bottom{
    margin-top:50px;
    padding-top:25px;
    border-top:1px solid rgba(255,255,255,.1);
    text-align:center;
    color:#94a3b8;
}

@media(max-width:900px){

.footer-grid{
grid-template-columns:1fr;
text-align:center;
}

.footer-logo{
margin:auto auto 20px;
}

}
.footer ul{
    list-style:none;
    margin:0;
    padding:0;
}

.footer li{
    list-style:none;
    margin:12px 0;
}

.footer a{
    text-decoration:none;
    color:#cbd5e1;
}

.footer a:hover{
    color:#42a5f5;
}
/*=====================================
Statistics
=====================================*/

.stats{

padding:80px 8%;
background:#ffffff;

}

.stats-grid{

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

}

.stat-card{

background:#fff;
padding:40px 30px;
border-radius:20px;
text-align:center;
box-shadow:0 15px 40px rgba(0,0,0,.08);
transition:.35s;

}

.stat-card:hover{

transform:translateY(-10px);

}

.stat-card h2{

font-size:52px;
font-weight:700;
color:#0d6efd;
margin-bottom:10px;

}

.stat-card p{

font-size:18px;
color:#666;
font-weight:500;

}
/*====================================
Floating WhatsApp
====================================*/

.whatsapp-float{

position:fixed;

bottom:30px;

right:30px;

width:65px;

height:65px;

background:#25D366;

color:#fff;

font-size:30px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

text-decoration:none;

box-shadow:0 12px 30px rgba(0,0,0,.25);

z-index:9999;

transition:.3s;

}

.whatsapp-float:hover{

transform:translateY(-6px) scale(1.08);

}



/*====================================
Scroll Top
====================================*/

#scrollTopBtn{

position:fixed;

bottom:110px;

right:30px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#1565d8;

color:#fff;

font-size:24px;

cursor:pointer;

display:none;

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

z-index:9998;

transition:.3s;

}

#scrollTopBtn:hover{

transform:translateY(-5px);

background:#0d4eb5;

}
.hero-logo{
    width:100%;
    max-width:650px;
    height:auto;
}
.footer-logo{
    width:260px;
    height:auto;
    display:block;
    margin-bottom:20px;
}