/* ======================================================
   MWEYEDZI SHREDDING
   PREMIUM LANDING PAGE
====================================================== */

:root{

--primary:#042049;
--secondary:#0B376D;
--accent:#76C043;
--white:#ffffff;
--light:#F4F7FB;
--text:#505C6B;

--radius:20px;

--shadow:
0 20px 45px rgba(0,0,0,.10);

--transition:.35s ease;

}

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

html{
scroll-behavior:smooth;
}

body{

font-family:Poppins,sans-serif;
background:var(--light);
color:var(--text);
overflow-x:hidden;

}

/******************************************
CONTAINER
******************************************/

.container{

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

}

/******************************************
LOADER
******************************************/

#loader{

position:fixed;
inset:0;

background:#042049;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

z-index:999999;

transition:.6s;

}

.loader-logo img{

width:180px;

animation:logoFloat 2s infinite ease-in-out;

}

.loader-text{

margin-top:25px;

color:white;

letter-spacing:5px;

font-size:13px;

}

@keyframes logoFloat{

50%{

transform:translateY(-10px);

}

}

/******************************************
HEADER
******************************************/

header{

position:fixed;

top:0;
left:0;

width:100%;

z-index:999;

background:rgba(4,32,73,.90);

backdrop-filter:blur(18px);

transition:.4s;

border-bottom:

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

}

.nav{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

}

.logo img{

height:70px;

}

nav{

display:flex;

gap:40px;

}

nav a{

text-decoration:none;

color:white;

font-weight:500;

transition:var(--transition);

}

nav a:hover{

color:var(--accent);

}

.call-button{

padding:14px 26px;

background:var(--accent);

border-radius:40px;

color:white;

text-decoration:none;

font-weight:600;

}

.menu{

display:none;

color:white;

font-size:30px;

cursor:pointer;

}

/******************************************
HERO
******************************************/

.hero{

min-height:100vh;

display:grid;

grid-template-columns:1.2fr .8fr;

gap:60px;

align-items:center;

padding-top:120px;

padding-bottom:70px;

background:

linear-gradient(

135deg,

#042049,

#0B376D);

position:relative;

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

width:700px;

height:700px;

border-radius:50%;

background:#76C043;

filter:blur(180px);

opacity:.12;

right:-200px;

top:-200px;

}

.hero-left{

position:relative;

z-index:2;

}

.coming{

display:inline-block;

padding:12px 20px;

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

border-radius:40px;

color:white;

font-size:14px;

letter-spacing:2px;

margin-bottom:25px;

}

.hero h1{

font-family:Montserrat,sans-serif;

font-size:72px;

line-height:1.05;

color:white;

margin-bottom:25px;

}

.hero h1 span{

color:var(--accent);

}

.hero p{

font-size:18px;

line-height:1.9;

max-width:650px;

color:#d7dfe9;

margin-bottom:40px;

}

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:45px;

}

.primary,
.secondary{

padding:16px 32px;

border-radius:50px;

text-decoration:none;

font-weight:600;

transition:.35s;

}

.primary{

background:var(--accent);

color:white;

}

.secondary{

border:2px solid white;

color:white;

}

.primary:hover,
.secondary:hover{

transform:translateY(-6px);

}

.hero-trust{

display:grid;

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

gap:18px;

max-width:500px;

}

.hero-trust div{

display:flex;

align-items:center;

gap:10px;

color:white;

}

.hero-trust i{

color:var(--accent);

}

/******************************************
HERO CARD
******************************************/

.hero-card{

background:

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

backdrop-filter:blur(20px);

border-radius:30px;

padding:50px;

border:

1px solid rgba(255,255,255,.18);

box-shadow:var(--shadow);

text-align:center;

}

.hero-card img{

width:170px;

margin-bottom:25px;

}

.hero-card h2{

font-family:Montserrat;

font-size:38px;

color:white;

margin-bottom:15px;

}

.hero-card p{

color:#dce4ed;

}

.status{

margin-top:30px;

background:#76C043;

padding:14px;

border-radius:50px;

color:white;

font-weight:600;

}

/******************************************
WAVE
******************************************/

.wave svg{

display:block;

width:100%;

height:80px;

margin-top:-2px;

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

.about{

padding:70px 0;

background:white;

}

.section-title{

text-align:center;

margin-bottom:55px;

}

.section-title span{

display:inline-block;

color:var(--accent);

font-weight:700;

letter-spacing:2px;

margin-bottom:12px;

}

.section-title h2{

font-family:Montserrat,sans-serif;

font-size:48px;

color:var(--primary);

}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.about-image{

height:420px;

background:

linear-gradient(135deg,#042049,#0b376d);

border-radius:30px;

display:flex;

align-items:center;

justify-content:center;

color:white;

font-size:120px;

box-shadow:var(--shadow);

}

.about-content p{

font-size:17px;

line-height:2;

margin-bottom:30px;

}

.check{

padding:18px 22px;

background:#F6F8FC;

margin-bottom:15px;

border-radius:14px;

font-weight:500;

transition:.35s;

}

.check:hover{

transform:translateX(10px);

background:#EEF6E8;

}

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

.services{

padding:70px 0;

background:#F5F8FC;

}

.services-grid{

display:grid;

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

gap:30px;

margin-top:50px;

}

.service{

background:white;

padding:40px 30px;

border-radius:22px;

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

transition:.35s;

position:relative;

overflow:hidden;

}

.service::before{

content:"";

position:absolute;

top:0;

left:0;

height:5px;

width:100%;

background:var(--accent);

}

.service:hover{

transform:translateY(-10px);

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

}

.service-icon{

width:75px;

height:75px;

background:#EEF7E8;

color:var(--accent);

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:32px;

margin-bottom:25px;

}

.service h3{

font-family:Montserrat;

color:var(--primary);

margin-bottom:18px;

}

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

.why{

padding:70px 0;

background:linear-gradient(135deg,#042049,#0A356D);

color:white;

}

.why-grid{

display:grid;

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

gap:30px;

margin-top:55px;

}

.why-card{

padding:35px;

border-radius:20px;

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

backdrop-filter:blur(12px);

transition:.35s;

text-align:center;

}

.why-card:hover{

transform:translateY(-10px);

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

}

.why-card i{

font-size:55px;

color:#76C043;

margin-bottom:25px;

}

.why-card h3{

margin-bottom:15px;

font-family:Montserrat;

}

/* ======================================================
PROCESS
====================================================== */

.process{

padding:70px 0;

background:white;

}

.timeline{

display:grid;

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

gap:25px;

margin-top:60px;

}

.step{

padding:35px;

background:#F7F9FC;

border-radius:20px;

text-align:center;

transition:.35s;

}

.step:hover{

transform:translateY(-10px);

}

.number{

width:70px;

height:70px;

border-radius:50%;

background:#042049;

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:26px;

font-weight:bold;

margin:auto auto 25px;

}

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

.cta-section{

padding:80px 0;

background:

linear-gradient(135deg,#042049,#0B376D);

color:white;

text-align:center;

}

.cta-section h2{

font-size:46px;

font-family:Montserrat;

margin-bottom:25px;

}

.cta-section p{

max-width:750px;

margin:auto;

line-height:1.9;

margin-bottom:40px;

}

/* ======================================================
CONTACT
====================================================== */

.contact{

padding:70px 0;

background:#F5F8FC;

}

.contact-grid{

display:grid;

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

gap:25px;

margin-top:50px;

}

.contact-box{

background:white;

padding:35px;

border-radius:18px;

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

transition:.35s;

text-align:center;

}

.contact-box:hover{

transform:translateY(-10px);

}

.contact-box i{

font-size:45px;

color:#76C043;

margin-bottom:20px;

}

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

footer{

background:#02152E;

padding:60px 0 20px;

color:white;

}

.footer-grid{

display:grid;

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

gap:40px;

}

.footer-logo{

width:170px;

margin-bottom:20px;

}

.footer-grid h3{

margin-bottom:18px;

color:#76C043;

font-family:Montserrat;

}

.footer-grid a{

display:block;

color:#D6DCE6;

text-decoration:none;

margin-bottom:10px;

transition:.35s;

}

.footer-grid a:hover{

color:white;

padding-left:6px;

}

.footer-grid p{

color:#D6DCE6;

margin-bottom:10px;

}

.copyright{

margin-top:45px;

padding-top:20px;

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

text-align:center;

color:#98A5B8;

}

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

.whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;

border-radius:50%;

background:#25D366;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

color:white;

z-index:999;

text-decoration:none;

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

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(37,211,102,.7);

}

70%{

box-shadow:0 0 0 18px rgba(37,211,102,0);

}

100%{

box-shadow:0 0 0 0 rgba(37,211,102,0);

}

}

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

#topButton{

position:fixed;

right:25px;

bottom:105px;

width:55px;

height:55px;

border:none;

background:#042049;

color:white;

border-radius:50%;

cursor:pointer;

display:none;

font-size:18px;

box-shadow:var(--shadow);

}

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

@media(max-width:992px){

.hero,
.about-grid{

grid-template-columns:1fr;

}

.timeline{

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

}

.hero{

padding-top:140px;

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.hero-trust{

margin:auto;

}

}

@media(max-width:768px){

nav{

display:none;

}

.menu{

display:block;

}

.timeline{

grid-template-columns:1fr;

}

.section-title h2{

font-size:34px;

}

.hero h1{

font-size:44px;

}

.hero-card{

padding:35px;

}

.hero-buttons{

flex-direction:column;

}

.hero-trust{

grid-template-columns:1fr;

}

.whatsapp{

width:58px;

height:58px;

}
	/* ===========================
CONTACT
=========================== */

.contact-section{

padding:70px 0;

background:white;

}

.contact-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

margin-top:50px;

}

.contact-info{

background:#042049;

color:white;

padding:50px;

border-radius:24px;

}

.contact-info h3{

margin-bottom:35px;

font-family:Montserrat;

}

.info-item{

display:flex;

gap:20px;

margin-bottom:28px;

align-items:flex-start;

}

.info-item i{

font-size:26px;

color:#76C043;

width:35px;

}

.contact-form{

background:#F7F9FC;

padding:45px;

border-radius:24px;

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

}

.contact-form input,

.contact-form textarea{

width:100%;

padding:18px;

border:none;

background:white;

border-radius:12px;

margin-bottom:20px;

font-family:Poppins;

font-size:15px;

}

.contact-form textarea{

resize:vertical;

min-height:150px;

}

.contact-form button{

width:100%;

padding:18px;

border:none;

background:#76C043;

color:white;

font-size:16px;

font-weight:600;

border-radius:50px;

cursor:pointer;

transition:.35s;

}

.contact-form button:hover{

background:#5FA62D;

transform:translateY(-3px);

}

@media(max-width:900px){

.contact-wrapper{

grid-template-columns:1fr;

}

}

}