/* =====================================
   SMARTAPPS STUDIO
   STYLE.CSS
   PART 1
===================================== */

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

:root{

--primary:#1565C0;
--primary-dark:#0D47A1;
--secondary:#42A5F5;

--accent:#FF9800;

--text:#222;
--text-light:#666;

--white:#ffffff;

--bg:#f5f7fb;

--card:#ffffff;

--shadow:0 10px 35px rgba(0,0,0,.08);

--radius:18px;

}

html{

scroll-behavior:smooth;

}

body{

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

background:var(--bg);

color:var(--text);

line-height:1.7;

overflow-x:hidden;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

.container{

width:92%;

max-width:1200px;

margin:auto;

}

/* =========================
HEADER
========================= */

.header{

position:sticky;

top:0;

z-index:999;

background:white;

box-shadow:0 4px 18px rgba(0,0,0,.08);

}

.header .container{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

}

.brand{

display:flex;

align-items:center;

gap:15px;

color:#222;

}

.brand img{
width:110px;
height:110px;
    
border-radius:30px;


}

.brand h2{

font-size:24px;

font-weight:700;

}

.brand p{

font-size:13px;

color:#777;

}

.navbar ul{

display:flex;

gap:35px;

}

.navbar a{

font-weight:600;

color:#333;

transition:.3s;

position:relative;

}

.navbar a:hover,

.navbar .active{

color:var(--primary);

}

.navbar a::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:3px;

background:var(--primary);

transition:.3s;

}

.navbar a:hover::after,

.navbar .active::after{

width:100%;

}

.header-buttons{

display:flex;

gap:10px;

}

.header-buttons button{

width:45px;

height:45px;

border:none;

border-radius:12px;

background:#eef3ff;

cursor:pointer;

font-size:20px;

transition:.3s;

}

.header-buttons button:hover{

background:var(--primary);

color:white;

}

/* =========================
HERO
========================= */

.hero{

padding:90px 0;

background:

linear-gradient(135deg,#1565C0,#42A5F5);

color:white;

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.badge{

display:inline-block;

padding:8px 20px;

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

border-radius:50px;

margin-bottom:25px;

font-size:14px;

}

.hero h1{

font-size:62px;

line-height:1.1;

margin-bottom:25px;

font-weight:800;

}

.hero h1 span{

color:#FFE082;

}

.hero p{

font-size:19px;

max-width:600px;

margin-bottom:35px;

}

.hero-buttons{

display:flex;

gap:18px;

margin-bottom:45px;

}

.btn{

padding:15px 30px;

border-radius:50px;

font-weight:600;

transition:.3s;

display:inline-block;

}

.btn-primary{

background:white;

color:var(--primary);

}

.btn-primary:hover{

transform:translateY(-4px);

}

.btn-outline{

border:2px solid white;

color:white;

}

.btn-outline:hover{

background:white;

color:var(--primary);

}

.hero-features{

display:flex;

gap:35px;

flex-wrap:wrap;

}

.hero-features div{

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

padding:18px;

border-radius:16px;

min-width:140px;

text-align:center;

}

.phone{

background:white;

padding:35px;

border-radius:30px;

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

text-align:center;

color:#222;

}

.phone img{

width:120px;

margin:auto;

margin-bottom:20px;

border-radius:24px;

}

.phone span{

display:inline-block;

margin-top:18px;

background:#e8f5e9;

color:#2e7d32;

padding:10px 18px;

border-radius:30px;

font-weight:600;

}
/* =====================================
   ABOUT SECTION
===================================== */

.about-home{

padding:100px 0;

background:#fff;

}

.about-home .container{

max-width:900px;

text-align:center;

}

.about-home h2{

font-size:42px;

margin-bottom:25px;

color:var(--primary-dark);

}

.about-home p{

font-size:18px;

color:var(--text-light);

line-height:1.9;

}


/* =====================================
   COMMON SECTION TITLE
===================================== */

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title span{

display:inline-block;

background:#E3F2FD;

color:var(--primary);

padding:8px 18px;

border-radius:50px;

font-size:14px;

font-weight:600;

margin-bottom:18px;

}

.section-title h2{

font-size:42px;

margin-bottom:15px;

color:var(--primary-dark);

}

.section-title p{

max-width:720px;

margin:auto;

color:var(--text-light);

font-size:17px;

}


/* =====================================
   WHY US
===================================== */

.why-us{

padding:100px 0;

background:var(--bg);

}

.why-grid{

display:grid;

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

gap:30px;

}

.why-card{

background:#fff;

padding:35px;

border-radius:var(--radius);

box-shadow:var(--shadow);

transition:.35s;

text-align:center;

}

.why-card:hover{

transform:translateY(-10px);

}

.icon{

width:80px;

height:80px;

margin:auto;

margin-bottom:20px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

background:#E3F2FD;

}

.why-card h3{

margin-bottom:15px;

font-size:22px;

}

.why-card p{

color:var(--text-light);

}


/* =====================================
   APPS
===================================== */

.apps-preview{

padding:100px 0;

background:white;

}

.apps-grid{

display:grid;

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

gap:35px;

}

.app-card{

background:white;

border-radius:25px;

padding:35px;

box-shadow:var(--shadow);

transition:.35s;

text-align:center;

}

.app-card:hover{

transform:translateY(-12px);

}

.app-card img{

width:100px;

margin:auto;

margin-bottom:20px;

border-radius:22px;

}

.coming-icon{

width:100px;

height:100px;

margin:auto;

margin-bottom:20px;

display:flex;

align-items:center;

justify-content:center;

font-size:42px;

border-radius:22px;

background:#E3F2FD;

}

.app-card h3{

margin-bottom:15px;

font-size:24px;

}

.app-card p{

color:var(--text-light);

margin-bottom:25px;

}

.app-card a{

display:inline-block;

padding:12px 24px;

background:var(--primary);

color:white;

border-radius:40px;

font-weight:600;

transition:.3s;

}

.app-card a:hover{

background:var(--primary-dark);

}


/* =====================================
   STATS
===================================== */

.stats{

padding:90px 0;

background:linear-gradient(135deg,#1565C0,#42A5F5);

color:white;

}

.stats-grid{

display:grid;

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

gap:25px;

text-align:center;

}

.stat-item h2{

font-size:48px;

margin-bottom:10px;

}

.stat-item p{

font-size:18px;

}


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

.cta{

padding:100px 0;

text-align:center;

background:white;

}

.cta h2{

font-size:42px;

margin-bottom:20px;

}

.cta p{

max-width:700px;

margin:auto;

margin-bottom:35px;

color:var(--text-light);

font-size:18px;

}
/* =====================================
   FAQ SECTION
===================================== */

.faq{
padding:100px 0;
background:var(--bg);
}

.faq-list{
max-width:900px;
margin:auto;
}

.faq-item{
background:#fff;
padding:25px 30px;
margin-bottom:20px;
border-radius:18px;
box-shadow:var(--shadow);
transition:.3s;
}

.faq-item:hover{
transform:translateY(-5px);
}

.faq-item h3{
font-size:22px;
margin-bottom:12px;
color:var(--primary-dark);
}

.faq-item p{
color:var(--text-light);
line-height:1.8;
}

/* =====================================
   FOOTER
===================================== */

footer{
background:#0D1B2A;
color:#fff;
padding:70px 0 25px;
}

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

.footer-logo{
    width:110px;
    height:auto;
    max-width:110px;
    display:block;
    margin-bottom:15px;
}

footer h2,
footer h3{
margin-bottom:18px;
}

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

footer ul li{
margin-bottom:12px;
}

footer a{
color:#cfd8dc;
transition:.3s;
}

footer a:hover{
color:#fff;
padding-left:6px;
}

.copyright{
margin-top:45px;
padding-top:25px;
border-top:1px solid rgba(255,255,255,.12);
text-align:center;
font-size:15px;
color:#b0bec5;
}

/* =====================================
   BACK TO TOP
===================================== */

#topBtn{
position:fixed;
right:25px;
bottom:25px;
width:50px;
height:50px;
border:none;
border-radius:50%;
background:var(--primary);
color:#fff;
font-size:22px;
cursor:pointer;
box-shadow:var(--shadow);
transition:.3s;
z-index:999;
}

#topBtn:hover{
background:var(--primary-dark);
transform:translateY(-4px);
}

/* =====================================
   DARK MODE
===================================== */

body.dark{
--bg:#121212;
--card:#1e1e1e;
--white:#1e1e1e;
--text:#f5f5f5;
--text-light:#c5c5c5;
}

body.dark .header,
body.dark .about-home,
body.dark .apps-preview,
body.dark .cta,
body.dark .faq-item,
body.dark .why-card,
body.dark .app-card,
body.dark .phone{
background:var(--card);
color:var(--text);
}

body.dark .brand,
body.dark .navbar a{
color:var(--text);
}

/* =====================================
   RESPONSIVE
===================================== */

@media(max-width:992px){

.hero-grid,
.footer-grid,
.why-grid,
.apps-grid,
.stats-grid{
grid-template-columns:1fr 1fr;
}

.hero h1{
font-size:46px;
}

}

@media(max-width:768px){

.navbar{
display:none;
}

.hero-grid,
.footer-grid,
.why-grid,
.apps-grid,
.stats-grid{
grid-template-columns:1fr;
}

.hero{
text-align:center;
}

.hero-buttons{
justify-content:center;
flex-wrap:wrap;
}

.hero-features{
justify-content:center;
}

.section-title h2{
font-size:34px;
}

.about-home h2,
.cta h2{
font-size:34px;
}

.brand h2{
font-size:20px;
}

.phone{
margin-top:35px;
}

}

@media(max-width:480px){

.hero{
padding:70px 0;
}

.hero h1{
font-size:36px;
}

.btn{
width:100%;
text-align:center;
}

.hero-buttons{
flex-direction:column;
}

.container{
width:94%;
}

}
/* Mobile Menu */

@media(max-width:768px){

.navbar.show{

display:block;

position:absolute;

top:80px;

left:5%;

width:90%;

background:#fff;

padding:20px;

border-radius:18px;

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

}

body.dark .navbar.show{

background:#1f1f1f;

}

.navbar.show ul{

display:flex;

flex-direction:column;

gap:18px;

}

}