/* =====================================
PURPLE ENVIRONMENTAL RECOVERY TECHNOLOGIES
MAIN WEBSITE STYLE
===================================== */



* {

margin:0;
padding:0;
box-sizing:border-box;

}



body {

font-family:
Arial, Helvetica, sans-serif;

background:#ffffff;

color:#222;

line-height:1.6;

}




/* BRAND COLORS */

:root {

--purple:#6a0dad;

--dark-purple:#3b0066;

--green:#1ca64c;

--black:#111;

--light:#f5f5f5;

}







/* NAVIGATION */


.navbar {


display:flex;

justify-content:space-between;

align-items:center;

padding:20px 8%;

background:white;

position:sticky;

top:0;

z-index:1000;

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


}




.brand {


display:flex;

align-items:center;

gap:10px;

font-size:28px;

font-weight:bold;

color:var(--purple);


}



.brand img {


width:45px;

}





nav {


display:flex;

gap:25px;


}



nav a {


text-decoration:none;

color:#333;

font-weight:600;

}




nav a:hover {

color:var(--purple);

}







/* BUTTONS */


.btn {


display:inline-block;

padding:12px 25px;

border-radius:30px;

text-decoration:none;

font-weight:bold;

cursor:pointer;

}



.btn-primary {


background:var(--purple);

color:white;

}



.btn-green {


background:var(--green);

color:white;

}





.btn:hover {

opacity:.85;

}








/* HERO */


.hero {


min-height:500px;

display:flex;

align-items:center;

padding:80px 10%;

background:

linear-gradient(
rgba(0,0,0,.6),
rgba(0,0,0,.6)
),
url("../images/hero-bg.jpg");


background-size:cover;

background-position:center;

color:white;


}




.hero h1 {


font-size:55px;

margin-bottom:20px;


}




.hero p {


font-size:22px;

max-width:650px;

}







/* SECTIONS */


.section {


padding:70px 10%;

}




.section-title {


text-align:center;

margin-bottom:50px;

}




.section-title h2 {


font-size:38px;

color:var(--dark-purple);


}





.grid {


display:grid;

grid-template-columns:

repeat(auto-fit,minmax(280px,1fr));

gap:30px;


}







/* CARDS */


.card {


background:white;

padding:30px;

border-radius:15px;

box-shadow:

0 10px 25px rgba(0,0,0,.08);


}



.card h3 {


color:var(--purple);

margin-bottom:15px;


}



.card ul {


margin-top:15px;

padding-left:20px;


}







/* PROCESS */


.process {


display:grid;

grid-template-columns:

repeat(auto-fit,minmax(220px,1fr));

gap:25px;

}



.step {


text-align:center;

padding:30px;

}



.step-number {


width:60px;

height:60px;

margin:auto;

border-radius:50%;

background:var(--purple);

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

font-weight:bold;


}








/* ESG SECTION */


.esg {


background:

linear-gradient(
135deg,
var(--purple),
var(--dark-purple)
);


padding:70px 10%;

text-align:center;

color:white;


}




.esg h2 {


font-size:40px;

}







/* STATS */


.stats {


display:grid;

grid-template-columns:

repeat(auto-fit,minmax(200px,1fr));


padding:50px 10%;

background:var(--light);

text-align:center;


}



.stat h2 {


font-size:45px;

color:var(--purple);

}








/* FORMS */


.form-container {


max-width:700px;

margin:auto;

background:white;

padding:40px;

border-radius:15px;

box-shadow:

0 10px 25px rgba(0,0,0,.1);


}



form {


display:flex;

flex-direction:column;

gap:15px;


}



input,
textarea,
select {


padding:15px;

border-radius:8px;

border:1px solid #ccc;

font-size:16px;


}



textarea {


height:150px;

}








/* FOOTER */


footer {


background:#111;

color:white;

padding:50px 10%;


}



.footer-grid {


display:grid;

grid-template-columns:

repeat(auto-fit,minmax(250px,1fr));

gap:30px;


}



footer h3,
footer h4 {


color:white;

}


.copyright {


margin-top:30px;

text-align:center;

opacity:.7;


}







/* WHATSAPP */


.whatsapp {


position:fixed;

right:25px;

bottom:25px;

background:#25D366;

color:white;

padding:15px 25px;

border-radius:30px;

text-decoration:none;

font-weight:bold;


}







/* MOBILE */


@media(max-width:768px){



.navbar {


flex-direction:column;

gap:20px;


}



nav {


flex-direction:column;

text-align:center;


}




.hero h1 {


font-size:38px;


}




.hero {


min-height:400px;


}



}