*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#dff5ff;
overflow-x:hidden;
}

a{
text-decoration:none;
}

li{
list-style:none;
}

/* Navbar */

.navbar{

display:flex;
justify-content:space-between;
align-items:center;

padding:20px 8%;

position:fixed;

top:0;

width:100%;

background:#dff5ff;

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

z-index:999;

}

.logo img{

height:80px;

}

.nav-links{

display:flex;

gap:40px;

}

.nav-links a{

color:#222;

font-weight:500;

transition:.3s;

}

.nav-links a:hover{

color:#2F80ED;

}

.menu-btn{

display:none;

font-size:28px;

cursor:pointer;

}

/* Hero */

.hero{

padding:140px 8% 100px;

display:flex;

align-items:center;

justify-content:space-between;

gap:60px;

}

.hero-left{

flex:1;

}

.hero-left h1{

font-size:60px;

font-weight:700;

line-height:75px;

color:#111;

}

.hero-left span{

color:#2F80ED;

}

.hero-left p{

margin:30px 0;

font-size:20px;

line-height:35px;

color:#555;

}

.btn{

display:inline-block;

background:#2F80ED;

padding:16px 40px;

border-radius:50px;

color:white;

font-weight:600;

transition:.3s;

}

.btn:hover{

background:#1e5fc4;

transform:translateY(-5px);

}

.hero-right{

flex:1;

text-align:center;

}

.hero-right img{

width:100%;

max-width:600px;

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

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

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

.about-section{

background:#f5f7fa;

padding:85px 0;

}

.about-container{

width:90%;

max-width:1400px;

margin:auto;

}

.about-container h2{

text-align:center;

font-size:58px;

font-weight:700;

color:#2F80ED;

margin-bottom:55px;

}

.about-content{

display:flex;

align-items:center;

justify-content:center;

gap:45px;

}

.about-icon{

flex:0 0 110px;

display:flex;

justify-content:center;

}

.about-icon img{

width:85px;

}

.about-text{

flex:1;

text-align:center;

}

.about-text p{

font-size:34px;

line-height:58px;

color:#222;

font-weight:400;

}

.about-text strong{

font-weight:700;

color:#111;

}
.about-section{

background:#f4f6fa;

position:relative;

overflow:hidden;

}

.about-section::before{

content:"";

position:absolute;

left:-150px;

top:-100px;

width:350px;

height:350px;

background:#dff6ff;

filter:blur(140px);

opacity:.7;

}

.about-section::after{

content:"";

position:absolute;

right:-120px;

bottom:-120px;

width:320px;

height:320px;

background:#d8efff;

filter:blur(140px);

opacity:.7;

}

.about-container{

position:relative;

z-index:2;

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

.features{

position:relative;

padding:90px 0;

background:#ffffff;

overflow:hidden;

}

.features-bg{

position:absolute;

right:0;

top:0;

width:55%;

height:100%;

background:url(images/feature-bg.png);

background-size:cover;

background-position:center;

opacity:.28;

pointer-events:none;

}

.features .container{

width:90%;

max-width:1400px;

margin:auto;

position:relative;

z-index:2;

}

.features h2{

font-size:72px;

font-weight:700;

color:#2F80ED;

margin-bottom:55px;

}

.feature-grid{

display:grid;

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

gap:30px;

}

.feature-card{

background:#fff;

border-radius:28px;

padding:30px 35px;

display:flex;

align-items:center;

gap:28px;

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

transition:.35s;

}

.feature-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 45px rgba(47,128,237,.18);

}

.feature-card img{

width:100px;

flex-shrink:0;

}

.feature-card h3{

font-size:28px;

font-weight:500;

line-height:38px;

color:#111;

}
.features::before{

content:"";

position:absolute;

left:-120px;

top:120px;

width:320px;

height:320px;

background:#dff6ff;

filter:blur(120px);

opacity:.8;

border-radius:50%;

}

.features::after{

content:"";

position:absolute;

right:-100px;

bottom:0;

width:350px;

height:350px;

background:#d8ecff;

filter:blur(140px);

opacity:.7;

border-radius:50%;

}
/*================================
KEY BENEFITS
================================*/

.benefits{

padding:90px 0;

background:linear-gradient(90deg,#ffffff,#edfaff);

position:relative;

overflow:hidden;

}

.benefits::before{

content:"";

position:absolute;

right:120px;

top:120px;

width:450px;

height:450px;

background:#d9f7ff;

filter:blur(130px);

opacity:.8;

border-radius:50%;

}

.benefits-container{

width:90%;

max-width:1400px;

margin:auto;

position:relative;

z-index:2;

}

.benefits h2{

text-align:center;

font-size:68px;

font-weight:700;

color:#2F80ED;

margin-bottom:60px;

}

.benefits-content{

display:flex;

justify-content:space-between;

align-items:center;

gap:60px;

}

.benefits-left{

flex:1;

}

.benefits-left ul{

list-style:none;

padding:0;

margin:0;

}

.benefits-left li{

display:flex;

align-items:flex-start;

gap:18px;

margin-bottom:18px;

}

.benefits-left img{

width:35px;

flex-shrink:0;

margin-top:3px;

}

.benefits-left span{

font-size:24px;

line-height:38px;

color:#222;

}

.benefits-right{

flex:1;

text-align:right;

}

.benefits-right img{

width:100%;

max-width:700px;

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

filter:drop-shadow(0 20px 40px rgba(0,0,0,.15));

}
/*=========================
WHY CHOOSE
==========================*/

.why-section{

padding:90px 8%;

background:linear-gradient(90deg,#ffffff,#eef9ff);

}

.why-section .container{

display:flex;

align-items:center;

justify-content:space-between;

gap:70px;

}

.why-left{

flex:1;

}

.why-left h2{

font-size:52px;

color:#2F80ED;

margin-bottom:45px;

font-weight:700;

}

.why-item{

display:flex;

align-items:flex-start;

gap:20px;

margin-bottom:28px;

transition:.3s;

}

.why-item:hover{

transform:translateX(10px);

}

.why-item img{

width:55px;

}

.why-item h3{

font-size:32px;

font-weight:700;

margin-bottom:8px;

color:#111;

}

.why-item p{

font-size:25px;

color:#444;

line-height:38px;

}

.why-right{

flex:1;

text-align:center;

}

.why-right img{

width:100%;

max-width:600px;

animation:float 4s ease infinite;

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

.cta-section{

padding:100px 8%;

display:flex;

justify-content:space-between;

align-items:center;

gap:70px;

background:linear-gradient(135deg,#eef8ff,#ffffff);

overflow:hidden;

}

.cta-content{

flex:1;

}

.cta-content h2{

font-size:55px;

line-height:70px;

font-weight:700;

color:#2F80ED;

margin-bottom:15px;

}

.cta-content h3{

font-size:42px;

color:#111;

margin-bottom:25px;

}

.cta-content p{

font-size:20px;

line-height:36px;

color:#555;

margin-bottom:35px;

max-width:600px;

}

.cta-image{

flex:1;

text-align:center;

}

.cta-image img{

width:100%;

max-width:620px;

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

filter:drop-shadow(0 20px 40px rgba(0,0,0,.15));

}
.cta-section{

position:relative;

}

.cta-section::before{

content:"";

position:absolute;

width:500px;

height:500px;

background:#8bd5ff;

filter:blur(180px);

opacity:.25;

right:-120px;

top:-100px;

border-radius:50%;

}

.cta-content,
.cta-image{

position:relative;

z-index:2;

}

/*===================================
WHY IT MATTERS
====================================*/

.why-matter{

padding:0;

display:flex;

align-items:center;

justify-content:space-between;

background:linear-gradient(90deg,#ffffff 0%,#eef9ff 100%);

overflow:hidden;

}

.why-content{

width:50%;

padding:80px;

}

.why-content h2{

font-size:70px;

font-weight:700;

color:#2F80ED;

margin-bottom:10px;

}

.why-content h3{

font-size:52px;

font-weight:700;

color:#111;

margin-bottom:40px;

}

.why-content p{

font-size:30px;

line-height:55px;

color:#333;

margin-bottom:55px;

}

.why-content strong{

font-weight:700;

}

.matter-btn{

display:inline-block;

padding:22px 45px;

background:#F58220;

color:#fff;

font-size:26px;

font-weight:600;

border-radius:12px;

transition:.4s;

}

.matter-btn:hover{

background:#dc6b0d;

transform:translateY(-5px);

}

.why-image{

width:50%;

}

.why-image img{

width:100%;

display:block;

}
/*==============================
USE CASES
===============================*/

.use-case{

padding:90px 8%;

background:#fff;

}

.title{

text-align:center;

margin-bottom:45px;

}

.title h2{

font-size:55px;

color:#2F80ED;

margin-bottom:10px;

}

.title h3{

font-size:42px;

font-weight:700;

color:#111;

}

.ribbon{

display:flex;

justify-content:center;

margin:40px 0;

}

.ribbon span{

background:#2F80ED;

color:white;

padding:12px 35px;

font-size:22px;

font-weight:600;

border-radius:8px;

}

.use-grid{

display:grid;

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

gap:25px;

margin-top:35px;

}

.use-card{

background:#fff;

border:2px solid #d8e7f8;

border-radius:15px;

padding:30px;

text-align:left;

transition:.4s;

}

.use-card:hover{

transform:translateY(-10px);

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

}

.use-card img{

width:100px;

margin-bottom:10px;

}

.use-card h4{

font-size:24px;

margin-bottom:15px;

}

.use-card p{

font-size:18px;

line-height:30px;

color:#555;

}

/* CASE STUDIES */

.case-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:25px;

margin-top:35px;

}

.case-card{

display:flex;

align-items:center;

gap:25px;

padding:25px;

border:2px solid #dbe8f8;

border-radius:15px;

background:white;

}

.case-card img{

width:120px;

}

.case-card small{

font-size:16px;

color:#666;

}

.case-card h3{

font-size:30px;

margin-top:8px;

}

.blue{

background:#2F80ED;

color:white;

}

.blue small{

color:#fff;

}

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

.footer{

background:#3d4c70;

color:#fff;

padding:70px 8% 25px;

}

.footer-container{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:40px;

}

.footer-logo{

width:180px;

margin-bottom:20px;

}

.footer-box p{

color:#ccc;

line-height:30px;

margin-bottom:12px;

}

.footer-box h3{

margin-bottom:25px;

font-size:24px;

}

.footer-box ul{

padding:0;

}

.footer-box li{

list-style:none;

margin-bottom:14px;

}

.footer-box a{

color:#ccc;

text-decoration:none;

transition:.3s;

}

.footer-box a:hover{

color:#2F80ED;

padding-left:6px;

}

.social-icons{

margin-top:25px;

display:flex;

gap:15px;

}

.social-icons a{

width:45px;

height:45px;

background:#1E293B;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

color:white;

font-size:18px;

transition:.3s;

}

.social-icons a:hover{

background:#2F80ED;

transform:translateY(-5px);

}

.footer hr{

margin:50px 0 20px;

border:0;

height:1px;

background:#334155;

}

.copyright{

text-align:center;

color:#aaa;

font-size:15px;

}

/* Back To Top */

.top-btn{

position:fixed;

right:30px;

bottom:30px;

width:50px;

height:50px;

background:#2F80ED;

color:#fff;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

text-decoration:none;

font-size:20px;

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

transition:.3s;

}

.top-btn:hover{

background:#1d6fd6;

transform:translateY(-5px);

}