/*==============================
RESET
===============================*/

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Segoe UI',sans-serif;
background:#071a46;
color:#fff;
overflow-x:hidden;
line-height:1.6;
}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
transition:.3s;
}

section{
position:relative;
}

.container{
max-width:1250px;
}


/*==============================
BACKGROUND
===============================*/

body::before{

content:"";
position:fixed;
top:-250px;
right:-180px;
width:700px;
height:700px;
border-radius:50%;
background:rgba(0,153,255,.08);
filter:blur(70px);
z-index:-1;

}

body::after{

content:"";
position:fixed;
bottom:-250px;
left:-200px;
width:650px;
height:650px;
border-radius:50%;
background:rgba(0,255,255,.05);
filter:blur(80px);
z-index:-1;

}



/*==============================
NAVBAR
===============================*/

.navbar{

padding:18px 0;
background:rgba(3,15,70,.85);
backdrop-filter:blur(15px);
transition:.3s;

}

.navbar-brand{

font-size:30px;
font-weight:800;
color:#fff;

}

.navbar-brand i{

color:#25b6ff;
margin-right:10px;

}

.nav-link{

color:#fff!important;
font-size:17px;
padding:12px 18px!important;

}

.nav-link:hover{

color:#4ecbff!important;

}

.navbar .btn{

padding:12px 28px;
font-weight:bold;
border-radius:50px;

}



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

.hero{

padding-top:150px;
padding-bottom:100px;
background:linear-gradient(135deg,#05153d,#0d47b8,#1877f2);

}

.hero-badge{

display:inline-block;
background:rgba(255,255,255,.15);
padding:10px 25px;
border-radius:50px;
margin-bottom:25px;
backdrop-filter:blur(10px);

}

.hero h1{

font-size:64px;
font-weight:900;
line-height:1.1;
margin-bottom:25px;

}

.hero h1 span{

color:#34d6ff;

}

.hero p{

font-size:20px;
opacity:.9;
margin-bottom:35px;

}

.hero-buttons{

display:flex;
gap:15px;
flex-wrap:wrap;

}

.hero-buttons .btn{

padding:16px 35px;
border-radius:14px;
font-size:18px;

}

.hero-buttons .btn-primary{

background:#fff;
border:none;
color:#1565c0;
font-weight:bold;

}

.hero-buttons .btn-primary:hover{

background:#e6f3ff;

}

.hero-buttons .btn-outline-light{

border:2px solid rgba(255,255,255,.6);

}

.hero-buttons .btn-outline-light:hover{

background:#fff;
color:#1565c0;

}



/*==============================
STATISTICS
===============================*/

.hero-stats{

display:flex;
gap:25px;
margin-top:50px;
flex-wrap:wrap;

}

.hero-stats div{

flex:1;
min-width:120px;
padding:20px;
border-radius:18px;
background:rgba(255,255,255,.12);
backdrop-filter:blur(10px);
text-align:center;

}

.hero-stats h3{

font-size:34px;
font-weight:800;

}

.hero-stats span{

font-size:15px;
opacity:.85;

}



/*==============================
PHONE FRAME
===============================*/

.phone-frame{

padding:18px;
border-radius:35px;

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

backdrop-filter:blur(15px);

box-shadow:

0 25px 60px rgba(0,0,0,.35);

}

.phone-frame img{

width:100%;
border-radius:25px;

}



/*==============================
SLIDER
===============================*/

.carousel{

max-width:900px;
margin:auto;

}

.carousel-control-prev,
.carousel-control-next{

width:55px;
height:55px;
background:rgba(255,255,255,.2);
border-radius:50%;
top:45%;

}

.carousel-control-prev:hover,
.carousel-control-next:hover{

background:#25b6ff;

}

.carousel-indicators{

margin-top:25px;

}

.carousel-indicators button{

width:12px!important;
height:12px!important;
border-radius:50%;
margin:0 6px!important;

}



/*==============================
TECHNOLOGIES
===============================*/

.technologies{

padding:70px 0;
background:#08152d;

}

.tech-card{

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

padding:35px 15px;

border-radius:20px;

transition:.4s;

height:100%;

backdrop-filter:blur(10px);

}

.tech-card:hover{

transform:translateY(-8px);

background:#1565c0;

}

.tech-card i{

font-size:45px;

margin-bottom:18px;

color:#34d6ff;

}

.tech-card h5{

font-weight:600;

}

/* Floating phone */

.float{

animation:floating 3s ease-in-out infinite;

}

@keyframes floating{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}

/* Back To Top */

#backTop{

position:fixed;

right:20px;

bottom:20px;

width:50px;

height:50px;

border:none;

border-radius:50%;

background:#1e88e5;

color:#fff;

font-size:20px;

cursor:pointer;

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

z-index:999;

transition:.3s;

}

#backTop:hover{

transform:translateY(-5px);

background:#1565c0;

}

/* Active menu */

.navbar .nav-link.active{

color:#34d6ff !important;

font-weight:bold;

}


.features{

padding:100px 0;

background:#07162f;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

display:inline-block;

padding:8px 20px;

background:#1565c0;

border-radius:50px;

margin-bottom:15px;

}

.section-title h2{

font-size:48px;

font-weight:bold;

margin-bottom:15px;

}

.feature-card{

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

padding:40px;

border-radius:25px;

height:100%;

transition:.4s;

backdrop-filter:blur(12px);

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

}

.feature-card:hover{

transform:translateY(-12px);

background:#1565c0;

}

.feature-icon{

width:80px;

height:80px;

border-radius:20px;

background:#2196f3;

display:flex;

justify-content:center;

align-items:center;

font-size:32px;

margin-bottom:25px;

}


.pricing{

padding:100px 0;

background:#05142d;

}

.price-card{

background:white;

padding:45px;

border-radius:25px;

color:#222;

text-align:center;

position:relative;

height:100%;

}

.price-card.active{

background:#1565c0;

color:white;

transform:scale(1.05);

}

.popular{

position:absolute;

top:-12px;

right:20px;

background:#ffc107;

padding:8px 18px;

border-radius:50px;

color:black;

font-weight:bold;

}

.price-card h1{

font-size:55px;

margin:20px 0;

}

.price-card ul{

list-style:none;

padding:0;

margin:30px 0;

}

.price-card ul li{

padding:10px;

}

/* ===========================
TABLET
=========================== */
@media (max-width:991px){

.hero{
padding-top:120px;
text-align:center;
}

.hero .row{
flex-direction:column-reverse;
}

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

.hero p{
font-size:18px;
}

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

.hero-stats{
justify-content:center;
margin-top:35px;
}

.phone-frame{
margin:40px auto 0;
max-width:500px;
}

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

}

/* ===========================
MOBILE
=========================== */

@media (max-width:768px){

.navbar-brand{
font-size:22px;
}

.navbar-collapse{
background:#06255b;
padding:20px;
border-radius:15px;
margin-top:15px;
}

.navbar .btn{
width:100%;
margin-top:15px;
}

.hero{
padding-top:110px;
padding-bottom:60px;
}

.hero h1{
font-size:34px;
line-height:1.2;
}

.hero p{
font-size:16px;
}

.hero-buttons{
display:flex;
flex-direction:column;
gap:15px;
}

.hero-buttons .btn{
width:100%;
}

.hero-stats{
display:grid;
grid-template-columns:1fr;
gap:15px;
}

.phone-frame{
max-width:340px;
padding:12px;
}

.carousel-control-prev,
.carousel-control-next{
width:42px;
height:42px;
}

.feature-card{
padding:25px;
text-align:center;
}

.price-card{
padding:30px;
margin-bottom:25px;
}

.price-card.active{
transform:none;
}

.tech-card{
padding:25px 15px;
}

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

}

/* ===========================
SMALL MOBILE
=========================== */

@media (max-width:480px){

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

.hero p{
font-size:15px;
}

.hero-badge{
font-size:13px;
padding:8px 18px;
}

.phone-frame{
max-width:280px;
}

.feature-icon{
width:65px;
height:65px;
font-size:26px;
margin:auto auto 20px;
}

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

.price-card h1{
font-size:42px;
}

footer{
text-align:center;
}

footer .row>div{
margin-bottom:25px;
}

}

/* ===========================
320px DEVICES
=========================== */

@media (max-width:360px){

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

.hero p{
font-size:14px;
}

.phone-frame{
max-width:240px;
}

.navbar-brand{
font-size:18px;
}

}

/* ===========================
TABLET
=========================== */
@media (max-width:991px){

.hero{
padding-top:120px;
text-align:center;
}

.hero .row{
flex-direction:column-reverse;
}

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

.hero p{
font-size:18px;
}

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

.hero-stats{
justify-content:center;
margin-top:35px;
}

.phone-frame{
margin:40px auto 0;
max-width:500px;
}

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

}

/* ===========================
MOBILE
=========================== */

@media (max-width:768px){

.navbar-brand{
font-size:22px;
}

.navbar-collapse{
background:#06255b;
padding:20px;
border-radius:15px;
margin-top:15px;
}

.navbar .btn{
width:100%;
margin-top:15px;
}

.hero{
padding-top:110px;
padding-bottom:60px;
}

.hero h1{
font-size:34px;
line-height:1.2;
}

.hero p{
font-size:16px;
}

.hero-buttons{
display:flex;
flex-direction:column;
gap:15px;
}

.hero-buttons .btn{
width:100%;
}

.hero-stats{
display:grid;
grid-template-columns:1fr;
gap:15px;
}

.phone-frame{
max-width:340px;
padding:12px;
}

.carousel-control-prev,
.carousel-control-next{
width:42px;
height:42px;
}

.feature-card{
padding:25px;
text-align:center;
}

.price-card{
padding:30px;
margin-bottom:25px;
}

.price-card.active{
transform:none;
}

.tech-card{
padding:25px 15px;
}

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

}

/* ===========================
SMALL MOBILE
=========================== */

@media (max-width:480px){

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

.hero p{
font-size:15px;
}

.hero-badge{
font-size:13px;
padding:8px 18px;
}

.phone-frame{
max-width:280px;
}

.feature-icon{
width:65px;
height:65px;
font-size:26px;
margin:auto auto 20px;
}

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

.price-card h1{
font-size:42px;
}

footer{
text-align:center;
}

footer .row>div{
margin-bottom:25px;
}

}

/* ===========================
320px DEVICES
=========================== */

@media (max-width:360px){

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

.hero p{
font-size:14px;
}

.phone-frame{
max-width:240px;
}

.navbar-brand{
font-size:18px;
}

}