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

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

:root{

--primary:#00C896;
--primary-dark:#009973;

--dark:#0A2540;
--dark2:#071428;

--light-bg:#f7f9fc;

--radius:18px;

}

html{
scroll-behavior:smooth;
}

body{

font-family:'Segoe UI',Arial,sans-serif;

background:var(--light-bg);

color:#222;

line-height:1.6;

overflow-x:hidden;

}

html, body{
max-width:100%;
overflow-x:hidden;
}

/* =====================================================
SCROLL PROGRESS BAR
===================================================== */

.scroll-bar{

position:fixed;
top:0;
left:0;

height:4px;
width:0%;

background:linear-gradient(90deg,#00C896,#00E5A8);

z-index:9999;

transition:width .2s ease;

}


/* =====================================================
HEADER (GLASS NAVBAR)
===================================================== */

header{

background:rgba(255,255,255,0.65);

backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);

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

position:sticky;

top:0;

z-index:1000;

box-shadow:0 10px 40px rgba(0,0,0,0.08);

}


/* NAV */

.nav{

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

padding:18px 40px;

max-width:1300px;
margin:auto;

}


/* LOGO */

.nav-left{
display:flex;
align-items:center;
gap:12px;
}

.logo{

width:58px;
height:58px;

border-radius:50%;

border:3px solid var(--primary);

}

.tagline{

font-size:14px;

font-weight:600;

letter-spacing:1px;

color:var(--primary);

}


/* NAV LINKS */

.nav-right{

display:flex;

align-items:center;

gap:30px;

}

.nav-right ul{

display:flex;

gap:30px;

list-style:none;

}

.nav-right ul li a{

text-decoration:none;

font-size:16px;

font-weight:600;

color:var(--dark);

position:relative;

}


/* NAV HOVER */

.nav-right ul li a::after{

content:"";

position:absolute;

left:0;
bottom:-6px;

width:0%;

height:2px;

background:var(--primary);

transition:.3s;

}

.nav-right ul li a:hover::after{

width:100%;

}

/* =====================================================
TAGLINE HIGHLIGHT
===================================================== */

.tagline{

font-size:15px;
font-weight:700;
letter-spacing:1px;

background:linear-gradient(90deg,#00C896,#00E5A8);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

text-shadow:0 0 10px rgba(0,200,150,0.4);

white-space:nowrap;

}


/* =====================================================
HAMBURGER MENU
===================================================== */

.menu-toggle{

display:none;

flex-direction:column;

cursor:pointer;

gap:6px;

align-items:center;
justify-content:center;

height:40px;
width:40px;

}


.menu-toggle span{

width:28px;
height:3px;

background:var(--dark);

border-radius:2px;

transition:.4s;

}


/* HAMBURGER ANIMATION */

.menu-toggle.open span:nth-child(1){

transform:rotate(45deg) translate(6px,6px);

}

.menu-toggle.open span:nth-child(2){

opacity:0;

}

.menu-toggle.open span:nth-child(3){

transform:rotate(-45deg) translate(6px,-6px);

}


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

@media(max-width:900px){

.menu-toggle{

display:flex;

}

/* NAV RIGHT */

.nav-right{

position:fixed;

top:0;
right:-100%;

height:100vh;

width:250px;
max-width:80%;


background:white;

flex-direction:column;

justify-content:center;

align-items:center;

gap:30px;

box-shadow:-10px 0 40px rgba(0,0,0,0.15);

transition:.45s ease;

}

.nav-right ul{

flex-direction:column;

gap:25px;

}

.nav-right.active{

right:0;

}

.nav-btn{

margin-top:20px;

}

}


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

@media(max-width:500px){

.tagline{

font-size:13px;

}

.logo{

width:50px;
height:50px;

}

}

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

.btn{

background:linear-gradient(135deg,#00C896,#00E5A8);

color:white;

padding:14px 30px;

border-radius:30px;

font-weight:600;

text-decoration:none;

transition:.35s;

box-shadow:0 10px 30px rgba(0,200,150,0.4);

}

.btn:hover{

transform:translateY(-4px) scale(1.03);

box-shadow:0 20px 50px rgba(0,200,150,0.5);

}

.btn-outline{

border:2px solid white;

padding:14px 28px;

border-radius:30px;

color:white;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.btn-outline:hover{

background:white;

color:var(--dark);

}


/* =====================================================
HERO (ANIMATED GRADIENT)
===================================================== */
.hero{
overflow:hidden;
max-width:100%;
}

.hero{

background:linear-gradient(
-45deg,
#071428,
#0A2540,
#003b35,
#071428
);

background-size:400% 400%;

animation:gradientMove 12s ease infinite;

color:white;

padding:160px 20px;

text-align:center;

position:relative;

overflow:hidden;

}


/* HERO FLOAT GLOW */

.hero::before{

content:"";

position:absolute;

width:600px;
height:600px;

background:radial-gradient(circle,#00C89633,transparent 70%);

top:-200px;
left:-200px;

animation:floatGlow 8s ease-in-out infinite;

}

.hero::after{

content:"";

position:absolute;

width:500px;
height:500px;

background:radial-gradient(circle,#00E5A833,transparent 70%);

bottom:-200px;
right:-200px;

animation:floatGlow 10s ease-in-out infinite;

}


.hero::before,
.hero::after{
pointer-events:none;
}


.hero-box{

max-width:850px;

margin:auto;

position:relative;

z-index:2;

}

.hero h1{

font-size:56px;

margin-bottom:20px;

}

.hero p{

font-size:22px;

opacity:.9;

}

.hero-buttons{

margin-top:40px;

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}


/* HERO ANIMATIONS */

@keyframes gradientMove{

0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}

}

@keyframes floatGlow{

0%{transform:translateY(0);}
50%{transform:translateY(30px);}
100%{transform:translateY(0);}

}


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

.features{

display:flex;

justify-content:center;

gap:60px;

padding:80px 20px;

flex-wrap:wrap;

background:white;

}

.feature{

text-align:center;

max-width:240px;

transition:.3s;

}

.feature:hover{

transform:translateY(-6px);

}


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

.section{

padding:110px 20px;

text-align:center;

}

.section h2{

font-size:40px;

margin-bottom:50px;

color:var(--dark);

}


/* =====================================================
CARDS (3D HOVER)
===================================================== */

.cards{

display:grid;

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

gap:30px;

max-width:1100px;

margin:auto;

}

.card{

background:white;

padding:40px 30px;

border-radius:18px;

width:100%;

text-align:center;

position:relative;

overflow:hidden;

box-shadow:0 10px 40px rgba(0,0,0,0.08);

transition:all .35s ease;

border:1px solid rgba(0,200,150,0.15);

}
.pricing{

padding-top:80px;

}

.card .btn{
    display:inline-block;
    margin-top:20px; /* adjust value if needed */
}


.card:hover{

transform:

rotateX(4deg)

rotateY(-4deg)

translateY(-12px)

scale(1.02);

box-shadow:0 30px 80px rgba(0,0,0,0.15);

}

.cards{
overflow:hidden;
}


/* CARD GLOW */

.card::before{

content:"";

position:absolute;

inset:-2px;

background:linear-gradient(120deg,transparent,#00C89655,transparent);

opacity:0;

border-radius:20px;

transition:.4s;

}

.card:hover::before{

opacity:1;

animation:cardGlow 3s linear infinite;

}

@keyframes cardGlow{

0%{transform:translateX(-100%)}
100%{transform:translateX(100%)}

}

.service-icon{

font-size:40px;

margin-bottom:20px;

}

.card .btn{

margin-top:30px;

}


/* =====================================================
PRICING
===================================================== */

.popular{

transform:scale(1.05);

border:2px solid #00C896;

}

.badge{

position:absolute;

top:20px;
right:20px;

background:#00C896;

color:white;

padding:6px 12px;

font-size:12px;

border-radius:20px;

}


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

.logo-slider{

overflow:hidden;

background:white;

padding:60px 0;

}

.logo-track{

display:flex;

gap:80px;

animation:logoScroll 25s linear infinite;

}

.logo-track img{

height:40px;

opacity:.7;

transition:.3s;

}

.logo-track img:hover{

opacity:1;

}

@keyframes logoScroll{

0%{transform:translateX(0);}
100%{transform:translateX(-50%);}

}


/* =====================================================
TESTIMONIALS
===================================================== */

.testimonials{

background:#eef2f7;

padding:100px 20px;

text-align:center;

}

.testimonial{

max-width:700px;

margin:auto;

font-size:20px;

opacity:.9;

}

.testimonial-author{

margin-top:20px;

font-weight:600;

color:var(--primary);

}


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

.cta{

background:var(--dark);

color:white;

padding:120px 20px;

text-align:center;

}

.cta h2{

font-size:38px;

margin-bottom:30px;

}

.btn2{

background:white;

color:var(--dark);

padding:16px 40px;

border-radius:30px;

text-decoration:none;

font-weight:600;

}

.btn2:hover{

background:var(--primary);

color:white;

}


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

.footer{

background:var(--dark2);

color:white;

padding:70px 20px;

text-align:center;

}

.footer-bottom{

margin-top:20px;

font-size:14px;

opacity:.7;

}


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

.hidden{

opacity:0;

transform:translateY(40px);

transition:all .8s ease;

}

.show{

opacity:1;

transform:translateY(0);

}


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

@media(max-width:900px){

.hero h1{

font-size:36px;

}

.hero p{

font-size:18px;

}

.cards{

grid-template-columns:1fr;

}

.features{

gap:40px;

}

}

@media(max-width:500px){

.hero h1{

font-size:30px;

}

.hero p{

font-size:16px;

}

.btn,
.btn-outline{

width:100%;

text-align:center;

}


.nav{
padding:15px 20px;
}


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

.about{

background:#eef2f7;

padding:100px 20px;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

}

.about-box{

max-width:700px;

margin:auto;

}

.about p{

margin:20px 0 30px;

font-size:18px;

}


*{
max-width:100%;
}