/* ==========================
PS GLOBAL IMPEX
VERSION 3.0
========================== */

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

body{

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

background:#f8f9fa;

color:#333;

line-height:1.7;

}

.container{

width:90%;

max-width:1200px;

margin:auto;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}


/* ==========================
NAVBAR
========================== */

header{

background:#0f5132;

position:sticky;

top:0;

z-index:999;

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

}

.navbar{

display:flex;

justify-content:space-between;

align-items:center;

padding:15px 5%;

flex-wrap:wrap;

}

.logo{

display:flex;

align-items:center;

gap:12px;

}

.logo img{

width:55px;

height:55px;

}

.logo h2{

color:white;

font-size:24px;

}

.logo span{

color:#d4af37;

font-size:13px;

}

.navbar ul{

display:flex;

gap:25px;

flex-wrap:wrap;

}

.navbar ul li a{

color:white;

font-weight:bold;

transition:.3s;

}

.navbar ul li a:hover{

color:#d4af37;

}


/* ==========================
HERO
========================== */

.hero{

background:linear-gradient(rgba(0,0,0,.60),rgba(0,0,0,.60)),
url("hero.jpg") center/cover no-repeat;

min-height:90vh;

display:flex;

justify-content:flex-start;

align-items:center;

text-align:left;

padding:0 8%;

}

.hero-content{

max-width:850px;

}

.hero h1{

font-size:64px;

color:#ffffff;

font-family:Georgia, serif;

font-weight:700;

line-height:1.15;

margin-bottom:20px;

max-width:700px;

}

.hero h2{

font-size:26px;

color:#d4af37;

font-weight:600;

margin-bottom:25px;

}

.hero p{

color:#f1f1f1;

font-size:19px;

line-height:1.8;

max-width:600px;

margin-bottom:35px;

}

.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.button{

background:#d4af37;

color:#0f5132;

padding:16px 38px;

border-radius:30px;

font-weight:bold;

font-size:16px;

display:inline-block;

transition:.3s;

box-shadow:0 8px 20px rgba(0,0,0,.25);

}

.button:hover{

background:white;

}

.secondary{

background:white;

color:#0f5132;

border:2px solid #0f5132;

}

.secondary:hover{

background:#128C7E;

color:white;

}


/* ==========================
TRUST BAR
========================== */

.trust-bar{

background:#fff;

display:grid;

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

gap:20px;

padding:30px 5%;

}

.trust-box{

background:white;

padding:20px;

text-align:center;

border-radius:10px;

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

font-weight:bold;

transition:.3s;

}

.trust-box:hover{

transform:translateY(-5px);

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

.about{

padding:80px 0;

background:#ffffff;

}

.about h2,
.products h2,
.services h2{

text-align:center;

font-size:38px;

margin-bottom:20px;

color:#0f5132;

}

.about p{

text-align:center;

max-width:900px;

margin:0 auto 20px;

font-size:18px;

color:#555;

}

.about-grid{

display:grid;

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

gap:30px;

margin-top:40px;

}

.about-card{

background:#f8f9fa;

padding:30px;

border-radius:12px;

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

transition:.3s;

}

.about-card:hover{

transform:translateY(-8px);

}

.about-card h3{

margin-bottom:15px;

color:#0f5132;

}


/* ==========================
PRODUCT
========================== */

.products{

padding:80px 0;

background:#eef8f1;

}

.product-card{

max-width:700px;

margin:40px auto;

background:#ffffff;

border-radius:15px;

overflow:hidden;

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

transition:.3s;

}

.product-card:hover{

transform:translateY(-8px);

}

.product-card img{

width:100%;

height:350px;

object-fit:cover;

}

.product-card h3{

font-size:30px;

padding:25px 25px 10px;

color:#0f5132;

}

.product-card p{

padding:0 25px 15px;

color:#555;

}

.product-card ul{

padding:0 40px 30px;

list-style:disc;

}

.product-card li{

margin-bottom:10px;

}

.coming-soon{

margin-top:40px;

text-align:center;

background:#fff;

padding:25px;

border-radius:12px;

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

}

.coming-soon h3{

color:#0f5132;

margin-bottom:10px;

}


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

.services{

padding:80px 0;

background:#ffffff;

}

.service-grid{

display:grid;

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

gap:25px;

margin-top:40px;

}

.service-card{

background:#f8f9fa;

padding:30px;

border-radius:12px;

text-align:center;

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

transition:.3s;

}

.service-card:hover{

background:#0f5132;

color:#fff;

transform:translateY(-8px);

}

.service-card h3{

margin-bottom:15px;

}


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

.why-us{

padding:80px 0;

background:#eef8f1;

}

.why-us h2{

text-align:center;

font-size:38px;

color:#0f5132;

margin-bottom:15px;

}

.section-subtitle{

text-align:center;

max-width:700px;

margin:0 auto 40px;

color:#666;

}

.why-grid{

display:grid;

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

gap:25px;

}

.why-card{

background:#ffffff;

padding:30px;

border-radius:12px;

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

transition:.3s;

text-align:center;

}

.why-card:hover{

transform:translateY(-8px);

}

.why-card h3{

margin-bottom:15px;

color:#0f5132;

}

.why-card p{

color:#555;

  }
/* ==========================
EXPORT MARKETS
========================== */

.markets{

padding:80px 0;

background:#ffffff;

}

.markets h2{

text-align:center;

font-size:38px;

color:#0f5132;

margin-bottom:15px;

}

.country-grid{

display:grid;

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

gap:20px;

margin-top:40px;

}

.country-grid div{

background:#f8f9fa;

padding:18px;

border-radius:10px;

text-align:center;

font-weight:bold;

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

transition:.3s;

}

.country-grid div:hover{

background:#0f5132;

color:#fff;

transform:translateY(-6px);

}

.markets-note{

margin-top:35px;

text-align:center;

font-style:italic;

color:#666;

}


/* ==========================
HOW WE WORK
========================== */

.process{

padding:80px 0;

background:#eef8f1;

}

.process h2{

text-align:center;

font-size:38px;

color:#0f5132;

margin-bottom:40px;

}

.process-grid{

display:grid;

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

gap:25px;

}

.step{

background:#fff;

padding:30px;

border-radius:12px;

text-align:center;

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

transition:.3s;

}

.step:hover{

transform:translateY(-8px);

}

.step span{

display:inline-flex;

width:55px;

height:55px;

border-radius:50%;

justify-content:center;

align-items:center;

background:#d4af37;

color:#000;

font-size:22px;

font-weight:bold;

margin-bottom:18px;

}

.step h3{

color:#0f5132;

margin-bottom:12px;

}

.step p{

color:#555;

}


/* ==========================
OUR COMMITMENTS
========================== */

.commitments{

padding:80px 0;

background:#ffffff;

}

.commitments h2{

text-align:center;

font-size:38px;

color:#0f5132;

margin-bottom:40px;

}

.commitment-grid{

display:grid;

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

gap:25px;

}

.commitment-card{

background:#f8f9fa;

padding:30px;

border-radius:12px;

text-align:center;

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

transition:.3s;

}

.commitment-card:hover{

background:#0f5132;

color:#fff;

transform:translateY(-8px);

}

.commitment-card h3{

margin-bottom:15px;

}


/* ==========================
PACKAGING
========================== */

.packaging{

padding:80px 0;

background:#eef8f1;

}

.packaging h2{

text-align:center;

font-size:38px;

color:#0f5132;

margin-bottom:40px;

}

.package-grid{

display:grid;

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

gap:25px;

}

.package-card{

background:#fff;

padding:30px;

border-radius:12px;

text-align:center;

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

transition:.3s;

}

.package-card:hover{

transform:translateY(-8px);

}

.package-card h3{

color:#0f5132;

margin-bottom:12px;

}

.package-card p{

color:#555;

  }
/* ==========================
EXPORT DOCUMENTS
========================== */

.documents{
padding:80px 0;
background:#ffffff;
}

.documents h2{
text-align:center;
font-size:38px;
color:#0f5132;
margin-bottom:35px;
}

.document-list{
max-width:700px;
margin:auto;
}

.document-list li{
background:#f8f9fa;
padding:18px 20px;
margin-bottom:15px;
border-left:5px solid #d4af37;
border-radius:8px;
box-shadow:0 5px 15px rgba(0,0,0,.08);
}


/* ==========================
FAQ
========================== */

.faq{
padding:80px 0;
background:#eef8f1;
}

.faq h2{
text-align:center;
font-size:38px;
color:#0f5132;
margin-bottom:40px;
}

.faq-item{
background:#fff;
padding:25px;
margin-bottom:20px;
border-radius:12px;
box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.faq-item h3{
color:#0f5132;
margin-bottom:10px;
}

.faq-item p{
color:#555;
}


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

.cta{
background:#0f5132;
padding:80px 20px;
text-align:center;
color:#fff;
}

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

.cta p{
font-size:18px;
margin-bottom:30px;
}


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

.contact{
padding:80px 0;
background:#ffffff;
text-align:center;
}

.contact h2{
font-size:38px;
color:#0f5132;
margin-bottom:25px;
}

.contact p{
margin-bottom:12px;
font-size:18px;
}

.social-links{
margin-top:30px;
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.social-links a{
background:#0f5132;
color:#fff;
padding:12px 22px;
border-radius:8px;
font-weight:bold;
transition:.3s;
}

.social-links a:hover{
background:#d4af37;
color:#000;
}


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

footer{
background:#082d1d;
color:#fff;
padding:40px 20px;
text-align:center;
}

footer h3{
margin-bottom:15px;
font-size:28px;
}

footer p{
margin-bottom:10px;
color:#ddd;
}


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

.whatsapp{
position:fixed;
right:20px;
bottom:20px;
width:60px;
height:60px;
background:#25D366;
color:#fff;
font-size:30px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 5px 20px rgba(0,0,0,.25);
z-index:999;
transition:.3s;
}

.whatsapp:hover{
transform:scale(1.1);
background:#128C7E;
}


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

@media(max-width:992px){

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

.hero h2{
font-size:22px;
}

.navbar{
flex-direction:column;
gap:20px;
}

.navbar ul{
justify-content:center;
}

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

}

@media(max-width:900px){

.hero{
min-height:80vh;
padding:30px 20px;
}

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

.hero h2{
font-size:20px;
}

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

.hero-buttons{
flex-direction:column;
align-items:center;
}

.button{
width:260px;
text-align:center;
}

.trust-bar{
grid-template-columns:1fr;
}

.about h2,
.products h2,
.services h2,
.why-us h2,
.markets h2,
.process h2,
.commitments h2,
.packaging h2,
.documents h2,
.faq h2,
.contact h2,
.cta h2{
font-size:30px;
}

.logo h2{
font-size:20px;
}

.logo img{
width:45px;
height:45px;
}

}

@media(max-width:480px){

.navbar ul{
flex-direction:column;
align-items:center;
gap:15px;
}

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

.hero h2{
font-size:18px;
}

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

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

.contact p{
font-size:16px;
}

.whatsapp{
width:55px;
height:55px;
font-size:28px;
right:15px;
bottom:15px;
}

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

.menu-toggle{
display:none;
font-size:30px;
color:white;
cursor:pointer;
}

@media(max-width:900px){

.menu-toggle{
display:block;
}

.navbar{
flex-direction:row;
justify-content:space-between;
align-items:center;
}

#nav-links{
display:none;
flex-direction:column;
width:100%;
background:#0f5132;
margin-top:15px;
padding:15px 0;
}

#nav-links.active{
display:flex;
}

#nav-links li{
text-align:center;
margin:12px 0;
}

}
/* Landscape Mobile Fix */
@media (max-height: 500px) and (orientation: landscape) {

header{
    position: relative;
}

.navbar{
    padding: 8px 20px;
}

.logo img{
    width: 35px;
    height: 35px;
}

.logo h2{
    font-size: 20px;
}

.logo span{
    font-size: 11px;
}

.hero{
    min-height: 100vh;
    padding: 20px;
}

}