/*==================================================
  CSWARZONE.RO
  STYLE.CSS
  PART 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:#0b0f17;
    color:#fff;
    overflow-x:hidden;
    line-height:1.6;
}

/*==========================
VARIABLES
==========================*/

:root{

--bg:#0b0f17;

--bg2:#111827;

--card:#161d29;

--blue:#00b7ff;

--blue2:#0099ff;

--text:#ffffff;

--text2:#b8c2d4;

--border:rgba(255,255,255,.08);

--radius:18px;

--transition:.35s;

}

/*==========================
SCROLLBAR
==========================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#0d121c;

}

::-webkit-scrollbar-thumb{

background:var(--blue);

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#00d2ff;

}

/*==========================
LINKS
==========================*/

a{

text-decoration:none;

color:#fff;

transition:.3s;

}

img{

max-width:100%;

display:block;

}

/*==========================
CONTAINER
==========================*/

.container{

width:1200px;

max-width:95%;

margin:auto;

}

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

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

padding:18px 0;

background:rgba(10,15,23,.80);

backdrop-filter:blur(15px);

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

transition:.35s;

}

header.scrolled{

padding:12px 0;

background:#0b0f17;

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

}

.nav{

display:flex;

align-items:center;

justify-content:space-between;

}

.logo{

font-size:30px;

font-weight:800;

letter-spacing:1px;

color:#fff;

}

.logo span{

color:var(--blue);

}

.menu{

display:flex;

gap:40px;

align-items:center;

}

.menu a{

font-size:15px;

font-weight:500;

position:relative;

}

.menu a::after{

content:"";

position:absolute;

bottom:-8px;

left:0;

width:0;

height:2px;

background:var(--blue);

transition:.3s;

}

.menu a:hover::after{

width:100%;

}

.download-btn{

padding:14px 34px;

border-radius:40px;

background:linear-gradient(90deg,#009dff,#00d4ff);

font-weight:700;

box-shadow:0 0 25px rgba(0,183,255,.45);

transition:.35s;

}

.download-btn:hover{

transform:translateY(-3px);

box-shadow:0 0 35px rgba(0,183,255,.8);

}

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

.hero{

padding-top:170px;

padding-bottom:120px;

background:url("assets/images/hero.webp") center center/cover no-repeat;

position:relative;

}

.hero::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(8,12,18,.70);

}

.hero .container{

position:relative;

z-index:2;

}

.hero h1{

font-size:62px;

font-weight:800;

line-height:1.1;

margin-bottom:25px;

}

.hero h1 span{

color:var(--blue);

}

.hero p{

max-width:700px;

font-size:18px;

color:var(--text2);

margin-bottom:40px;

}

.hero-buttons{

display:flex;

gap:20px;

align-items:center;

flex-wrap:wrap;

}

.btn-main{

padding:18px 45px;

background:linear-gradient(90deg,#009cff,#00d8ff);

border-radius:50px;

font-size:16px;

font-weight:700;

transition:.35s;

box-shadow:0 0 30px rgba(0,183,255,.45);

}

.btn-main:hover{

transform:translateY(-4px);

box-shadow:0 0 45px rgba(0,183,255,.85);

}

.btn-outline{

padding:18px 45px;

border-radius:50px;

border:2px solid var(--blue);

color:#fff;

transition:.35s;

}

.btn-outline:hover{

background:var(--blue);

}

/*==========================
SECTION
==========================*/

section{

padding:90px 0;

}

.section-title{

font-size:42px;

font-weight:800;

margin-bottom:15px;

text-align:center;

}

.section-subtitle{

text-align:center;

color:var(--text2);

margin-bottom:60px;

font-size:17px;

}




.clients-grid{

display:grid;

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

gap:35px;

}

.client-card{

background:var(--card);

border:1px solid var(--border);

border-radius:22px;

overflow:hidden;

transition:.35s;

position:relative;

}

.client-card:hover{

transform:translateY(-10px);

border-color:rgba(0,183,255,.5);

box-shadow:0 20px 45px rgba(0,183,255,.15);

}

.client-image{

height:240px;

overflow:hidden;

}

.client-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.45s;

}

.client-card:hover .client-image img{

transform:scale(1.08);

}

.client-content{

padding:28px;

}

.client-content h3{

font-size:28px;

margin-bottom:10px;

font-weight:700;

}

.client-content p{

color:var(--text2);

font-size:15px;

margin-bottom:22px;

min-height:55px;

}

/*==========================
FEATURES
==========================*/

.features{

list-style:none;

display:flex;

flex-direction:column;

gap:12px;

margin-bottom:28px;

}

.features li{

display:flex;

align-items:center;

gap:10px;

font-size:15px;

color:#dbe6ff;

}

.features li::before{

content:"✔";

color:var(--blue);

font-weight:700;

font-size:16px;

}

/*==========================
DOWNLOAD BUTTON
==========================*/

.download-button{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

padding:18px;

background:linear-gradient(90deg,#009cff,#00d7ff);

border-radius:14px;

font-weight:700;

font-size:18px;

transition:.35s;

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

}

.download-button:hover{

transform:translateY(-3px);

box-shadow:0 0 40px rgba(0,183,255,.70);

}

.download-button small{

margin-top:8px;

font-size:13px;

font-weight:500;

color:#fff;

opacity:.9;

}

/*==========================
BADGE
==========================*/

.badge{

position:absolute;

top:18px;

right:18px;

background:#00b7ff;

padding:8px 14px;

font-size:12px;

font-weight:700;

border-radius:30px;

color:#fff;

box-shadow:0 0 20px rgba(0,183,255,.5);

}

/*==========================
ADVANTAGES
==========================*/

.advantages{

background:#0e1420;

}

.advantages-grid{

display:grid;

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

gap:30px;

}

.adv-box{

background:var(--card);

border-radius:20px;

padding:35px;

border:1px solid var(--border);

transition:.35s;

text-align:center;

}

.adv-box:hover{

transform:translateY(-8px);

border-color:rgba(0,183,255,.4);

}

.adv-icon{

width:70px;

height:70px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

margin:0 auto 20px;

background:rgba(0,183,255,.12);

font-size:28px;

color:var(--blue);

}

.adv-box h4{

font-size:22px;

margin-bottom:12px;

}

.adv-box p{

font-size:15px;

color:var(--text2);

}

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

.stats{

margin-top:60px;

display:grid;

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

gap:25px;

}

.stat-box{

background:var(--card);

padding:35px;

border-radius:20px;

text-align:center;

border:1px solid var(--border);

}

.stat-box h2{

font-size:42px;

color:var(--blue);

margin-bottom:10px;

}

.stat-box span{

color:var(--text2);

font-size:15px;

}

/*==========================
HOVER EFFECT
==========================*/

.client-card::after{

content:"";

position:absolute;

left:-120%;

top:0;

width:60%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.08),
transparent
);

transition:.8s;

}

.client-card:hover::after{

left:150%;

}

/*==========================
ANIMATION
==========================*/

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0px);

}

}

.hero-image{

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

}




.screenshots{

background:#0b111b;

}

.screenshot-grid{

display:grid;

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

gap:25px;

}

.screenshot{

overflow:hidden;

border-radius:18px;

border:1px solid var(--border);

background:var(--card);

transition:.35s;

}

.screenshot:hover{

transform:translateY(-8px);

box-shadow:0 20px 45px rgba(0,183,255,.18);

border-color:rgba(0,183,255,.35);

}

.screenshot img{

width:100%;

height:240px;

object-fit:cover;

transition:.45s;

}

.screenshot:hover img{

transform:scale(1.08);

}

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

footer{

background:#080c13;

padding:70px 0 30px;

border-top:1px solid rgba(255,255,255,.05);

}

.footer-content{

display:flex;

justify-content:space-between;

align-items:center;

gap:40px;

flex-wrap:wrap;

}

.footer-logo{

font-size:32px;

font-weight:800;

}

.footer-logo span{

color:var(--blue);

}

.footer-text{

color:var(--text2);

max-width:450px;

margin-top:15px;

line-height:1.8;

}

.footer-links{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.footer-links a{

color:var(--text2);

transition:.3s;

}

.footer-links a:hover{

color:var(--blue);

}

.footer-copy{

margin-top:45px;

padding-top:25px;

border-top:1px solid rgba(255,255,255,.05);

text-align:center;

color:var(--text2);

font-size:14px;

}

/*==========================
UTILITY
==========================*/

.text-center{

text-align:center;

}

.mt-20{

margin-top:20px;

}

.mt-30{

margin-top:30px;

}

.mt-40{

margin-top:40px;

}

.mt-50{

margin-top:50px;

}

.mb-20{

margin-bottom:20px;

}

.mb-30{

margin-bottom:30px;

}

.mb-40{

margin-bottom:40px;

}

.mb-50{

margin-bottom:50px;

}

/*==========================
ANIMATIONS
==========================*/

.fade-up{

opacity:0;

transform:translateY(40px);

transition:all .7s ease;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}

.zoom{

transition:.35s;

}

.zoom:hover{

transform:scale(1.05);

}

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

@media(max-width:1100px){

.clients-grid{

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

}

.advantages-grid{

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

}

.screenshot-grid{

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

}

.stats{

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

}

.hero h1{

font-size:50px;

}

}

@media(max-width:768px){

header{

padding:15px 0;

}

.nav{

flex-direction:column;

gap:20px;

}

.menu{

flex-wrap:wrap;

justify-content:center;

gap:18px;

}

.hero{

padding-top:150px;

padding-bottom:80px;

text-align:center;

}

.hero h1{

font-size:38px;

}

.hero p{

font-size:16px;

margin:auto;

margin-bottom:35px;

}

.hero-buttons{

justify-content:center;

}

.clients-grid{

grid-template-columns:1fr;

}

.advantages-grid{

grid-template-columns:1fr;

}

.screenshot-grid{

grid-template-columns:1fr;

}

.stats{

grid-template-columns:1fr;

}

.footer-content{

flex-direction:column;

text-align:center;

}

.footer-links{

justify-content:center;

}

.section-title{

font-size:34px;

}

}

@media(max-width:480px){

.logo{

font-size:24px;

}

.hero h1{

font-size:30px;

}

.download-btn,

.btn-main,

.btn-outline{

width:100%;

text-align:center;

}

.client-content{

padding:22px;

}

.adv-box{

padding:28px;

}

.stat-box{

padding:28px;

}


.menu a.active{

color:var(--blue);

}

.menu a.active::after{

width:100%;

}



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

#backTop{

position:fixed;

right:25px;

bottom:25px;

width:55px;

height:55px;

border-radius:50%;

background:linear-gradient(90deg,#009cff,#00d7ff);

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:20px;

box-shadow:0 0 25px rgba(0,183,255,.45);

transition:.35s;

z-index:999;

}

#backTop:hover{

transform:translateY(-5px);

box-shadow:0 0 40px rgba(0,183,255,.8);

}