/* =====================================
   E&P SHIPPING & LOGISTICS
   PREMIUM BRAND DESIGN
   Safari Blue + Green + Red
===================================== */


/* ============ GLOBAL SETTINGS ============ */

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


html{
    scroll-behavior:smooth;
}


body{

    font-family:'Poppins',sans-serif;
    background:#f7f9fc;
    color:#222;

}


a{
    text-decoration:none;
    color:inherit;
}


img{
    height: auto;
    width: 100px;
    object-fit: contain;
    display: block;
    background: cover;
}
 
/*.image-modal{
    display: none;
    position: fixed;
    top: o;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.image-modal.show{
    display: flex;
}

#largeimage{
    max-width: 90%;
    max-height: 85%;
    object-fit: contain;
}

#closemodal{
    position: absolute;
    top: 15px;
    right: 25px;
    color: white;
    font-size: 40px;
    cursor: pointer;
}*/

.gallery-img{
    width: 200px;
    cursor: pointer;
}    

    



:root{

    --safari-blue:#075985;
    --green:#198754;
    --red:#dc2626;
    --white:#ffffff;
    --dark:#123047;
    --light:#f7f9fc;
    --shadow:0 15px 35px rgba(0,0,0,0.12);

}







/* ============ NAVIGATION BAR ============ */


header{

    position:sticky;
    top:0;
    z-index:1000;

}



.navbar{

      display: flex;
      align-items: center;

    background:var(--safari-blue);

    height:85px;
    width: 100%;
    padding:10px 20px;
    justify-content:space-between;
    box-shadow:0 5px 20px rgba(0,0,0,.15);

}




/*.logo{
    
    display:flex;

    align-items:center;

    gap:15px;

}

*/

.blue{
    
    color: rgb(21, 21, 90);
    font-size: x-large;
    font-weight: bolder;
}

.red{
    
    color: rgb(95, 13, 13);
    font-size: x-large;
    font-weight: bolder;
}

.green{
    
    color: rgb(8, 150, 8);
    font-size: x-large;
    font-weight: bolder;
}
    
    

.logo img{

    width:85px;

    height: 50px;

    border-radius: 50%;

    object-fit:contain;

}


.text{
    gap: 0;
}



#menu a:hover {
    color: rgb(50, 150, 50);
    text-decoration: underline;
}
/*.nav-links{

    display:none;
    flex-direction: column;
    list-style:none;
    width: 100%;
    gap:35px;

}



.nav-links a{

    color:white;

    font-weight:500;

    transition:.3s;

}



.nav-links a:hover{

    color:#90ee90;

}*/

#menu{
    border-radius:15px;
    display: none;
    position: absolute;
    border: none;
    top: 45px;
    background: white;
    width: 180px;
    padding: 10px;
    z-index: 1000;
}
.menu-toggle{
    display: none;
}
#menu.show{
    display: flex;
    flex-direction: column;
}
.dropdown-content{
    display: none;
}
.dropdown-content.show{
    display: block;
}
.menu-btn{
    font-size: 28px;
    background: none;
    border: none;
    color: white;
}
.dropdown button{
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
}

.about-section{
    display: block;
}

#categorymenu.show{
    display: none;
    flex-direction: column;
    position: absolute;

}

@media(max-width:768px) {
.menu-toggle{
    display: block;
    font-size: 30px;
    color: black;
    background-color: none;
    cursor: pointer;
}

.navbar.active{
    display: flex;
}
}





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


.hero{


    min-height:90vh;


    background:

    linear-gradient(
    rgba(7,89,133,.75),
    rgba(25,135,84,.65)
    ),

    url("../images/hero.jpg");


    background-position:center;

    background-size:cover;


    display:flex;

    align-items:center;


}



.hero-content{

    color:white;

    max-width:650px;

}



.hero h1{


    font-size:60px;

    font-weight:800;

}



.hero p{


    font-size:20px;

    margin:25px 0;


}








/* ============ BUTTONS ============ */


.btn{


    display:inline-block;

    padding:15px 35px;

    border-radius:30px;

    background:var(--green);

    color:white;

    margin-right:15px;

    transition:.3s;

}



.btn:hover{

    background:var(--red);

    transform:translateY(-5px);

}



.btn.second{

    background:white;

    color:var(--safari-blue);

}



.btn.second:hover{

    background:var(--red);

    color:white;

}








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


.categories h2,
.products h2,
.about-section h2,
.values h2,
.why-us h2{


    text-align:center;

    font-size:40px;

    color:var(--safari-blue);

    margin-bottom:50px;

}



.category-container{

    
    display:grid;

    grid-template-columns:repeat(2,1fr);
    width: 100%;
    padding: 10px;
    gap:15px;

}




.category-card{

    display: grid;
    gap: 15px;
    background:white;

    padding:10px;

    border-radius:20px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.4s;


}



.category-card:hover{


    transform:translateY(-10px);

    border-bottom:5px solid var(--green);


}



.category-card img{


    width: 100%;
     height: 180px;

    object-fit:cover;
     display: block;
    border-radius:10px;


}



.category-card h3{


    color:var(--safari-blue);

    margin:15px;


}








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


.product-container{


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

    gap:15px;


}



.product-card{


    background:white;

    padding:5px;

    border-radius:20px;

    box-shadow:var(--shadow);

    position:relative;

    overflow:hidden;


}




.product-card:hover{


    transform:translateY(-8px);

}




.product-card img{


    height: 200px;

    width: 100%;

    object-fit:cover;

    border-radius:15px;

    margin-bottom: 0;

}



.product-card h3{


    color:var(--safari-blue);

    margin:15px 0;


}



.old-price{

    color:gray;

    text-decoration:line-through;

}



.price{


    color:var(--green);

    font-size:24px;

    font-weight:700;

}



.product-card a{


    display:block;

    background:var(--safari-blue);

    color:white;

    text-align:center;

    padding:13px;

    margin-top:20px;

    border-radius:30px;

}



.product-card a:hover{

    background:var(--green);

}







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


.cta{


    background:var(--safari-blue);

    color:white;

    text-align:center;

}



.cta h2{

    font-size:40px;

}



.cta a{


    display:inline-block;

    margin-top:25px;

    background:var(--red);

    padding:15px 35px;

    border-radius:30px;

}





html,body{
    margin: 0;
    padding: 0;
    overflow-x:hidden ;
}

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


.contact-section{


    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

}



.contact-form input,
.contact-form textarea{


    width:100%;

    padding:15px;

    margin:10px 0;

    border:1px solid #ddd;

    border-radius:10px;

}



.contact-form button{


    width:100%;

    padding:15px;

    background:var(--green);

    color:white;

    border:none;

    border-radius:30px;

}







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


footer{


    background:#06324d;

    color:white;

    padding:50px 8%;


}



.footer-container{


    display:flexbox;

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

    gap:30px;


}



.footer-container h3{

    color:#90ee90;

}



.copyright{


    text-align:center;

    margin-top:30px;

}







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


.whatsapp{


    position:fixed;

    bottom:25px;

    right:25px;


    background:#25D366;

    color:white;

    padding:15px 25px;

    border-radius:40px;

    font-weight:bold;

}