/*==================================================
  TAJ EARTH RECYCLE
  Premium UI
  Part 1
==================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{

--primary:#2D6A4F;
--primary-dark:#1B4332;
--secondary:#52B788;
--light:#D8F3DC;
--accent:#FFD166;
--blue:#3A86FF;
--white:#ffffff;
--black:#202124;
--gray:#6b7280;
--bg:#f7faf8;

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

--radius:18px;

}

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

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;
background:var(--bg);
color:#222;
overflow-x:hidden;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;

}

.container{

width:min(1200px,92%);
margin:auto;

}


/*=========================================
Scrollbar
=========================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#edf5ef;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(
180deg,
var(--secondary),
var(--primary)
);

border-radius:50px;

}


/*=========================================
Section Title
=========================================*/

.section-title{

text-align:center;
margin-bottom:70px;

}

.section-title span{

display:inline-block;
padding:8px 18px;
border-radius:50px;

background:#d8f3dc;

color:var(--primary);

font-weight:600;

margin-bottom:15px;

}

.section-title h2{

font-size:48px;

color:var(--primary-dark);

margin-bottom:20px;

}

.section-title p{

font-size:18px;

max-width:700px;

margin:auto;

line-height:1.8;

color:#666;

}


/*=========================================
Buttons
=========================================*/

.btn{

display:inline-flex;

align-items:center;

gap:10px;

padding:16px 34px;

border-radius:60px;

font-weight:600;

transition:.4s;

position:relative;

overflow:hidden;

}

.btn::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:100%;

height:100%;

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

transform:skewX(-25deg);

transition:.7s;

}

.btn:hover::before{

left:140%;

}

.btn-primary{

background:linear-gradient(
135deg,
var(--secondary),
var(--primary)
);

color:white;

box-shadow:0 15px 35px rgba(45,106,79,.35);

}

.btn-primary:hover{

transform:translateY(-6px);

}

.btn-outline{

border:2px solid white;

color:white;

}

.btn-outline:hover{

background:white;

color:var(--primary);

}


/*=========================================
Header
=========================================*/

.header{

position:fixed;

left:0;

top:0;

width:100%;

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 5%;

z-index:1000;

transition:.4s;

}

.header.scrolled{

background:rgba(17,35,27,.82);

backdrop-filter:blur(15px);

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

}

.logo{

display:flex;

align-items:center;

gap:15px;

color:white;

}

.logo-icon{

width:55px;

height:55px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:linear-gradient(
135deg,
#7ef29c,
#2D6A4F
);

font-size:28px;

animation:spinLeaf 12s linear infinite;

}

.logo h2{

font-size:26px;

}

.logo span{

font-size:14px;

opacity:.8;

}

.navbar{

display:flex;

gap:35px;

}

.navbar a{

color:white;

font-weight:500;

position:relative;

transition:.3s;

}

.navbar a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:3px;

border-radius:30px;

background:#7ef29c;

transition:.35s;

}

.navbar a:hover::after,

.navbar a.active::after{

width:100%;

}

.navbar a:hover{

color:#9df4b8;

}

.menu-btn{

display:none;

cursor:pointer;

}

.menu-btn span{

display:block;

width:30px;

height:3px;

margin:6px;

background:white;

transition:.4s;

}


/*=========================================
Hero
=========================================*/

.hero{

position:relative;

height:100vh;

overflow:hidden;

display:flex;

justify-content:center;

align-items:center;

}

.hero-bg{

position:absolute;

inset:0;

width:100%;

height:100%;

object-fit:cover;

animation:kenburns 18s ease-in-out infinite alternate;

}

.hero-overlay{

position:absolute;

inset:0;

background:
linear-gradient(
120deg,
rgba(8,20,12,.82),
rgba(17,63,44,.68),
rgba(18,96,60,.35)
);

}

.hero-content{

position:relative;

z-index:2;

max-width:900px;

text-align:center;

color:white;

padding:0 20px;

}

.hero-tag{

display:inline-block;

padding:10px 22px;

border-radius:40px;

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

backdrop-filter:blur(10px);

margin-bottom:25px;

font-weight:600;

animation:fadeDown 1s;

}

.hero h1{

font-size:72px;

font-weight:800;

line-height:1.1;

margin-bottom:30px;

animation:fadeUp 1.1s;

}

.gradient-text{

background:
linear-gradient(
90deg,
#7ef29c,
#FFD166,
#3A86FF
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero p{

font-size:20px;

line-height:1.9;

margin-bottom:45px;

animation:fadeUp 1.3s;

}

.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

margin-bottom:55px;

animation:fadeUp 1.5s;

}

.hero-stats{

display:flex;

justify-content:center;

gap:60px;

flex-wrap:wrap;

animation:fadeUp 1.7s;

}

.hero-stats h3{

font-size:34px;

color:#7ef29c;

}

.hero-stats span{

opacity:.9;

}


/*=========================================
Floating Shapes
=========================================*/

.floating{

position:absolute;

z-index:2;

pointer-events:none;

}

.leaf1{

left:8%;

top:20%;

font-size:40px;

animation:float1 7s ease-in-out infinite;

}

.leaf2{

right:12%;

top:28%;

font-size:55px;

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

}

.recycle1{

left:12%;

bottom:18%;

font-size:46px;

color:#7ef29c;

animation:rotateFloat 12s linear infinite;

}

.recycle2{

right:15%;

bottom:15%;

font-size:46px;

color:#FFD166;

animation:rotateFloat 14s linear infinite reverse;

}

.circle1{

width:140px;

height:140px;

border-radius:50%;

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

left:-40px;

top:120px;

animation:pulse 6s infinite;

}

.circle2{

width:200px;

height:200px;

border-radius:50%;

background:rgba(126,242,156,.08);

right:-80px;

bottom:80px;

animation:pulse 8s infinite;

}

.scroll-indicator{

position:absolute;

bottom:30px;

left:50%;

transform:translateX(-50%);

}

.scroll-indicator span{

display:block;

width:26px;

height:45px;

border:2px solid white;

border-radius:20px;

position:relative;

}

.scroll-indicator span::before{

content:"";

position:absolute;

left:50%;

top:8px;

width:6px;

height:6px;

background:white;

border-radius:50%;

transform:translateX(-50%);

animation:scrollDown 2s infinite;

}


/*=========================================
Animations
=========================================*/

@keyframes kenburns{

0%{

transform:scale(1);

}

100%{

transform:scale(1.15);

}

}

@keyframes spinLeaf{

100%{

transform:rotate(360deg);

}

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(60px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes fadeDown{

from{

opacity:0;

transform:translateY(-50px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes float1{

50%{

transform:translateY(-25px) rotate(10deg);

}

}

@keyframes float2{

50%{

transform:translateY(20px) rotate(-12deg);

}

}

@keyframes rotateFloat{

100%{

transform:rotate(360deg);

}

}

@keyframes pulse{

50%{

transform:scale(1.15);

opacity:.5;

}

}

@keyframes scrollDown{

0%{

opacity:0;

top:8px;

}

50%{

opacity:1;

}

100%{

opacity:0;

top:25px;

}

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

.about{

padding:120px 0;

background:#fff;

position:relative;

overflow:hidden;

}

.about::before{

content:"";

position:absolute;

width:500px;

height:500px;

background:radial-gradient(circle,
rgba(82,183,136,.12),
transparent 70%);

top:-180px;

right:-180px;

border-radius:50%;

}

.about .container{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.about-image{

position:relative;

display:flex;

justify-content:center;

}

.image-bg{

position:absolute;

width:380px;

height:380px;

border-radius:30px;

background:linear-gradient(
135deg,
var(--secondary),
var(--primary)
);

transform:rotate(-8deg);

animation:floatImage 6s ease-in-out infinite;

}

.about-image img{

position:relative;

width:360px;

border-radius:25px;

box-shadow:var(--shadow);

z-index:2;

transition:.5s;

}

.about-image:hover img{

transform:scale(1.04) rotate(2deg);

}

.about-content h2{

font-size:48px;

color:var(--primary-dark);

margin:20px 0;

line-height:1.2;

}

.about-content p{

font-size:18px;

line-height:1.9;

margin-bottom:20px;

color:#555;

}

.about-features{

display:grid;

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

gap:18px;

margin:40px 0;

}

.about-features div{

display:flex;

align-items:center;

gap:12px;

padding:16px;

background:#f7faf8;

border-radius:15px;

transition:.35s;

}

.about-features div:hover{

transform:translateY(-6px);

background:var(--light);

}

.about-features i{

color:var(--secondary);

font-size:22px;

}

/*==================================================
OBJECTIVES
==================================================*/

.objectives{

padding:120px 0;

background:linear-gradient(
180deg,
#f8fcfa,
#eef9f2
);

}

.objective-grid{

width:min(1200px,92%);

margin:auto;

display:grid;

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

gap:30px;

}

.objective-card{

background:white;

padding:40px 30px;

border-radius:22px;

text-align:center;

transition:.45s;

position:relative;

overflow:hidden;

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

}

.objective-card::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

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

transition:.8s;

}

.objective-card:hover::before{

left:120%;

}

.objective-card:hover{

transform:translateY(-12px);

box-shadow:0 25px 45px rgba(45,106,79,.18);

}

.objective-icon{

width:90px;

height:90px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

font-size:40px;

border-radius:50%;

background:linear-gradient(
135deg,
var(--secondary),
var(--primary)
);

color:white;

margin-bottom:30px;

transition:.4s;

}

.objective-card:hover .objective-icon{

transform:rotate(360deg) scale(1.1);

}

.objective-card h3{

font-size:24px;

margin-bottom:15px;

color:var(--primary-dark);

}

.objective-card p{

color:#666;

line-height:1.8;

}

/*==================================================
SERVICES
==================================================*/

.services{

padding:120px 0;

background:#fff;

}

.services-grid{

width:min(1250px,94%);

margin:auto;

display:grid;

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

gap:35px;

}

.service-card{

border-radius:24px;

overflow:hidden;

background:#fff;

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

transition:.45s;

position:relative;

}

.service-card:hover{

transform:translateY(-15px);

}

.service-image{

height:250px;

position:relative;

overflow:hidden;

}

.service-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.7s;

}

.service-card:hover img{

transform:scale(1.15);

}

.service-overlay{

position:absolute;

inset:0;

background:linear-gradient(
180deg,
transparent,
rgba(0,0,0,.55)
);

}

.service-content{

padding:35px;

position:relative;

}

.service-icon{

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:linear-gradient(
135deg,
var(--secondary),
var(--primary)
);

font-size:30px;

color:#fff;

margin-top:-70px;

margin-bottom:25px;

position:relative;

box-shadow:0 15px 30px rgba(45,106,79,.25);

}

.service-card h3{

font-size:26px;

margin-bottom:15px;

color:var(--primary-dark);

}

.service-card p{

line-height:1.8;

color:#666;

margin-bottom:25px;

}

.service-card a{

display:inline-flex;

align-items:center;

gap:10px;

font-weight:600;

color:var(--secondary);

transition:.3s;

}

.service-card a:hover{

gap:18px;

color:var(--primary);

}

/* Glow Border */

.service-card::after{

content:"";

position:absolute;

inset:0;

padding:2px;

border-radius:24px;

background:linear-gradient(
135deg,
transparent,
var(--secondary),
transparent
);

-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

opacity:0;

transition:.4s;

}

.service-card:hover::after{

opacity:1;

}

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

.reveal{

opacity:0;

transform:translateY(60px);

transition:all .9s ease;

}

.reveal-left{

opacity:0;

transform:translateX(-70px);

transition:all .9s ease;

}

.reveal-right{

opacity:0;

transform:translateX(70px);

transition:all .9s ease;

}

.reveal.active,
.reveal-left.active,
.reveal-right.active{

opacity:1;

transform:none;

}

/*==================================================
ABOUT FLOAT
==================================================*/

@keyframes floatImage{

50%{

transform:rotate(-8deg) translateY(-18px);

}

}

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

@media(max-width:992px){

.about .container{

grid-template-columns:1fr;

text-align:center;

}

.about-features{

grid-template-columns:1fr;

}

.objective-grid{

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

}

.services-grid{

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

}

}

@media(max-width:768px){

.objective-grid,

.services-grid{

grid-template-columns:1fr;

}

.about-content h2{

font-size:36px;

}

.image-bg{

width:300px;

height:300px;

}

.about-image img{

width:280px;

}

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

.why-us{

padding:120px 0;

background:linear-gradient(
180deg,
#f8fcfa,
#ffffff
);

position:relative;

overflow:hidden;

}

.why-us::before{

content:"";

position:absolute;

width:600px;

height:600px;

right:-250px;

top:-250px;

background:radial-gradient(circle,
rgba(82,183,136,.10),
transparent 70%);

border-radius:50%;

}

.why-grid{

width:min(1200px,92%);

margin:auto;

display:grid;

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

gap:30px;

}

.why-card{

background:white;

padding:35px;

border-radius:22px;

position:relative;

overflow:hidden;

transition:.45s;

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

}

.why-card:hover{

transform:translateY(-15px);

box-shadow:0 30px 60px rgba(45,106,79,.18);

}

.why-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:6px;

height:0;

background:linear-gradient(
180deg,
var(--secondary),
var(--primary)
);

transition:.5s;

}

.why-card:hover::before{

height:100%;

}

.why-icon{

width:75px;

height:75px;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

border-radius:50%;

background:linear-gradient(
135deg,
var(--secondary),
var(--primary)
);

color:white;

margin-bottom:25px;

transition:.5s;

}

.why-card:hover .why-icon{

transform:rotate(360deg) scale(1.1);

}

.why-card h3{

font-size:25px;

color:var(--primary-dark);

margin-bottom:15px;

}

.why-card p{

line-height:1.8;

color:#666;

}


/*==================================================
ACHIEVEMENTS
==================================================*/

.achievements{

padding:120px 0;

background:linear-gradient(
135deg,
#163321,
#21543b
);

color:white;

position:relative;

overflow:hidden;

}

.achievement-bg{

position:absolute;

inset:0;

background:

radial-gradient(circle at top left,
rgba(255,255,255,.05),
transparent 40%),

radial-gradient(circle at bottom right,
rgba(126,242,156,.08),
transparent 45%);

}

.section-title.light h2{

color:white;

}

.section-title.light p{

color:#ddd;

}

.counter-grid{

width:min(1200px,92%);

margin:60px auto;

display:grid;

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

gap:25px;

}

.counter-card{

padding:40px;

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

border-radius:25px;

backdrop-filter:blur(10px);

text-align:center;

transition:.4s;

}

.counter-card:hover{

transform:translateY(-12px);

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

}

.counter-number{

font-size:54px;

font-weight:700;

color:#7ef29c;

margin-bottom:10px;

}


/*==================================================
TIMELINE
==================================================*/

.achievement-wrapper{

width:min(1200px,92%);

margin:auto;

display:grid;

grid-template-columns:1.1fr .9fr;

gap:80px;

align-items:center;

}

.timeline{

position:relative;

padding-left:45px;

}

.timeline::before{

content:"";

position:absolute;

left:12px;

top:0;

bottom:0;

width:4px;

background:#52B788;

}

.timeline-item{

position:relative;

margin-bottom:45px;

}

.timeline-dot{

position:absolute;

left:-40px;

top:5px;

width:24px;

height:24px;

border-radius:50%;

background:#FFD166;

border:5px solid white;

box-shadow:0 0 25px rgba(255,209,102,.4);

}

.timeline-content{

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

padding:25px;

border-radius:18px;

backdrop-filter:blur(10px);

transition:.35s;

}

.timeline-content:hover{

transform:translateX(12px);

}

.timeline-content h3{

font-size:24px;

margin-bottom:10px;

color:#7ef29c;

}

.timeline-content p{

line-height:1.8;

color:#ddd;

}


/*==================================================
SVG CIRCLE
==================================================*/

.progress-circle{

position:relative;

display:flex;

justify-content:center;

align-items:center;

margin-bottom:50px;

}

.progress-circle svg{

transform:rotate(-90deg);

}

.bg-circle{

fill:none;

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

stroke-width:16;

}

.progress-circle-path{

fill:none;

stroke:#7ef29c;

stroke-width:16;

stroke-linecap:round;

stroke-dasharray:754;

stroke-dashoffset:754;

animation:circleFill 3s forwards;

}

.circle-content{

position:absolute;

text-align:center;

}

.circle-content h2{

font-size:48px;

color:white;

}

.circle-content p{

color:#ddd;

}


/*==================================================
PROGRESS BARS
==================================================*/

.progress-item{

margin-bottom:28px;

}

.progress-title{

display:flex;

justify-content:space-between;

margin-bottom:8px;

font-weight:600;

}

.progress{

height:12px;

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

border-radius:30px;

overflow:hidden;

}

.bar{

height:100%;

border-radius:30px;

background:linear-gradient(
90deg,
#7ef29c,
#FFD166
);

animation:growBar 2s ease;

}


/*==================================================
KEYFRAMES
==================================================*/

@keyframes growBar{

from{

width:0;

}

}

@keyframes circleFill{

to{

stroke-dashoffset:188;

}

}


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

@media(max-width:992px){

.why-grid{

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

}

.counter-grid{

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

}

.achievement-wrapper{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.why-grid{

grid-template-columns:1fr;

}

.counter-grid{

grid-template-columns:1fr;

}

.timeline{

padding-left:30px;

}

}
/*==================================================
CLIENTS
==================================================*/

.clients{
    padding:120px 0;
    background:#fff;
    overflow:hidden;
}

.logo-slider{
    width:100%;
    overflow:hidden;
    position:relative;
    margin-top:50px;
}

.logo-slider::before,
.logo-slider::after{
    content:"";
    position:absolute;
    top:0;
    width:120px;
    height:100%;
    z-index:2;
}

.logo-slider::before{
    left:0;
    background:linear-gradient(to right,#fff,transparent);
}

.logo-slider::after{
    right:0;
    background:linear-gradient(to left,#fff,transparent);
}

.logo-track{
    display:flex;
    width:max-content;
    animation:logoScroll 35s linear infinite;
}

.logo-slider:hover .logo-track{
    animation-play-state:paused;
}

.logo-item{
    width:190px;
    height:120px;
    background:#fff;
    border-radius:18px;
    margin:0 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    transition:.4s;
}

.logo-item:hover{
    transform:translateY(-10px) scale(1.05);
    box-shadow:0 25px 45px rgba(45,106,79,.18);
}

.logo-item img{
    max-width:75%;
    max-height:70px;
    object-fit:contain;
    transition:.4s;
}

.logo-item:hover img{
    filter:none;
    transform:scale(1.08);
}

@keyframes logoScroll{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

/*==================================================
GALLERY
==================================================*/

.gallery{
    padding:120px 0;
    background:#f7faf8;
}

.gallery-grid{
    width:min(1200px,92%);
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.gallery-card{
    border-radius:22px;
    overflow:hidden;
    position:relative;
    cursor:pointer;
    box-shadow:0 15px 35px rgba(0,0,0,.1);
}

.gallery-card img{
    width:100%;
    height:320px;
    object-fit:cover;
    transition:.6s;
}

.gallery-card:hover img{
    transform:scale(1.12);
}

.gallery-card::after{
    content:"🔍";
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:40px;
    color:white;
    background:rgba(0,0,0,.45);
    opacity:0;
    transition:.4s;
}

.gallery-card:hover::after{
    opacity:1;
}

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

.cta{
    padding:100px 20px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    text-align:center;
}

.cta h2{
    font-size:50px;
    margin-bottom:20px;
}

.cta p{
    font-size:20px;
    max-width:700px;
    margin:0 auto 40px;
    line-height:1.8;
}

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

footer{
    background:#163321;
    color:#fff;
}

.footer-top{
    width:min(1200px,92%);
    margin:auto;
    padding:80px 0;
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:40px;
}

.footer-box h3,
.footer-box h4{
    margin-bottom:20px;
}

.footer-box p,
.footer-box a{
    color:#ddd;
    margin-bottom:12px;
    display:block;
    transition:.3s;
}

.footer-box a:hover{
    color:#7ef29c;
    padding-left:8px;
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.1);
    padding:20px;
    text-align:center;
    color:#bbb;
}

/*==================================================
WHATSAPP
==================================================*/

.whatsapp{
    position:fixed;
    right:25px;
    bottom:30px;
    width:65px;
    height:65px;
    border-radius:50%;
    background:#25D366;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    font-size:34px;
    box-shadow:0 15px 35px rgba(0,0,0,.2);
    z-index:999;
    animation:pulseWhats 2s infinite;
}

@keyframes pulseWhats{
    50%{
        transform:scale(1.12);
    }
}

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

.top-btn{
    position:fixed;
    left:25px;
    bottom:30px;
    width:55px;
    height:55px;
    border:none;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    font-size:22px;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transition:.4s;
    z-index:999;
}

.top-btn.show{
    opacity:1;
    visibility:visible;
}

/*==================================================
CURSOR GLOW
==================================================*/

.cursor-glow{
    position:fixed;
    width:220px;
    height:220px;
    border-radius:50%;
    background:radial-gradient(circle,
    rgba(82,183,136,.18),
    transparent 70%);
    pointer-events:none;
    transform:translate(-50%,-50%);
    z-index:1;
}

/*==================================================
LOADER
==================================================*/

.loader{
    position:fixed;
    inset:0;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:99999;
    transition:.6s;
}

.loader.hide{
    opacity:0;
    visibility:hidden;
}

.loader-circle{
    width:90px;
    height:90px;
    border:8px solid #ddd;
    border-top:8px solid var(--secondary);
    border-radius:50%;
    animation:loaderSpin 1s linear infinite;
}

@keyframes loaderSpin{
    to{
        transform:rotate(360deg);
    }
}

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

@media(max-width:992px){

.gallery-grid{
grid-template-columns:repeat(2,1fr);
}

.footer-top{
grid-template-columns:repeat(2,1fr);
}

.cta h2{
font-size:40px;
}

}

@media(max-width:768px){

.menu-btn{
display:block;
cursor:pointer;
z-index:1002;
}

.navbar{

display:flex;

position:fixed;

top:80px;

left:-100%;

width:100%;

height:calc(100vh - 80px);

background:#163321;

flex-direction:column;

justify-content:flex-start;

align-items:center;

gap:30px;

padding-top:40px;

transition:left .35s ease;

z-index:1001;

}

.navbar.show{

left:0;

}

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

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

.hero-stats{
gap:25px;
}

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

.gallery-grid{
grid-template-columns:1fr;
}

.footer-top{
grid-template-columns:1fr;
text-align:center;
}

.logo-item{
width:150px;
}

.whatsapp{
width:58px;
height:58px;
font-size:30px;
right:15px;
bottom:20px;
}

.top-btn{
left:15px;
bottom:20px;
}

}

@media(max-width:480px){

.hero{
padding:120px 15px 80px;
height:auto;
min-height:100vh;
}

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

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

.btn{
justify-content:center;
}

.about-content h2,
.cta h2{
font-size:30px;
}

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

.counter-number{
font-size:40px;
}

.logo-item{
margin:0 10px;
}

}
/* Mobile Navbar */

@media(max-width:768px){


}

/* Ripple */

.btn{

position:relative;
overflow:hidden;

}

.ripple{

position:absolute;
width:10px;
height:10px;
background:rgba(255,255,255,.5);
border-radius:50%;
transform:translate(-50%,-50%);
animation:ripple .6s linear;

}

@keyframes ripple{

to{

width:500px;
height:500px;
opacity:0;

}

}

/* Lightbox */

.lightbox{

position:fixed;
inset:0;
background:rgba(0,0,0,.9);
display:flex;
justify-content:center;
align-items:center;
opacity:0;
visibility:hidden;
transition:.3s;
z-index:9999;

}

.lightbox.show{

opacity:1;
visibility:visible;

}

.lightbox img{

max-width:90%;
max-height:90%;
border-radius:15px;

}

/* Floating Particles */

.particle{

position:absolute;
width:8px;
height:8px;
background:rgba(255,255,255,.4);
border-radius:50%;
bottom:-20px;
animation:particleUp linear infinite;

}

@keyframes particleUp{

from{

transform:translateY(0) scale(1);

opacity:0;

}

20%{

opacity:1;

}

to{

transform:translateY(-120vh) scale(.2);

opacity:0;

}

}