/* NAVBAR BASE */
/* NAVBAR STYLE */
.custom-navbar{
    background: #fff;
    padding: 18px 0;
    transition: all 0.4s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* Scroll effect */
.custom-navbar.scrolled{
    padding: 12px 0;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

/* Nav links */
.custom-navbar .nav-link{
    color:#000;
    font-weight:700;
    font-size: 15px;
}

.custom-navbar .nav-link:hover{
    color:#dc3545;
}

/* Logo size */
.logo-img{
    height:80px;
    width:auto;
}

/* Nav links */
.nav-animate {
    position: relative;
    margin: 0 10px;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: 0.3s ease;
}

/* Red underline animation */
.nav-animate::after {
    content: "";
    position: absolute;
    width: 0%;
    height: 2px;
    background: #dc3545;
    left: 0;
    bottom: -5px;
    transition: 0.3s ease;
}

.nav-animate::after {
    content:"";
    position:absolute;
    width:0%;
    height:2px;
    background:#dc3545;
    left:0;
    bottom:-5px;
    transition:0.3s;
}

.nav-animate:hover::after{
    width:100%;
}
/* Dropdown premium look */
.premium-dropdown {
    background: #111;
    border: none;
    padding: 10px;
    border-radius: 10px;
}

.premium-dropdown .dropdown-item {
    color: #fff;
    padding: 8px 15px;
    transition: 0.3s ease;
}

.premium-dropdown .dropdown-item:hover {
    background: #dc3545;
    border-radius: 6px;
}





.hero-section{
position:relative;
margin-top: 100px;
height:100vh;
color:white;
overflow:hidden;
}
.hero-slides{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
animation: heroSlider 30s infinite;
z-index:1;
}
.hero-content{
position:relative;
z-index:3;
}

.hero-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.55);
z-index:2;
}
.hero-slides{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background-size:cover;
background-position:center;

animation: heroSlider 24s infinite;
z-index:1;
}

@keyframes heroSlides{

0%{
background-image:url("img/kirabe-sembe.jpg");
transform:scale(1);
}

25%{
background-image:url("img/kirabe-maize-supplier.jpg");
transform:scale(1.1);
}

33%{
background-image:url("img/grain1.jpg");
transform:scale(1);
}

58%{
background-image:url("img/chickpeas.jpg");
transform:scale(1.1);
}

66%{
background-image:url("img/kireba-soft-drinks.jpg");
transform:scale(1);
}

91%{
background-image:url("img/lenties.jpg");
transform:scale(1.1);
}

100%{
background-image:url("img/kireba-animal-feed.jpg");
transform:scale(1);
}

}
.scroll-indicator{
position:absolute;
bottom:30px;
left:50%;
transform:translateX(-50%);
z-index:3;
}

.scroll-indicator span{
display:block;
width:24px;
height:40px;
border:2px solid white;
border-radius:20px;
position:relative;
}

.scroll-indicator span::after{
content:"";
position:absolute;
top:8px;
left:50%;
width:4px;
height:8px;
background:white;
transform:translateX(-50%);
animation:scrollMove 2s infinite;
}

@keyframes scrollMove{
0%{opacity:0; top:8px;}
50%{opacity:1;}
100%{opacity:0; top:20px;}
}



/* ABOUT SECTION */

.about-section{
background:#ffffff;
padding:80px 0;
}

.about-title{
font-size:2.2rem;
font-weight:700;
margin-bottom:20px;
color:#000;
}

.about-title span{
color:#dc3545;
}

.about-text{
color:#555;
font-size:16px;
line-height:1.7;
margin-bottom:15px;
}

/* FEATURES */

.about-features{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;
margin-top:25px;
}

.feature-item{
display:flex;
align-items:center;
gap:10px;
background:#f8f9fa;
padding:12px 15px;
border-radius:8px;
font-weight:500;
}

.feature-item i{
color:#dc3545;
}

/* IMAGE */

.about-media img{
width:100%;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
}




/* SCROLL INDICATOR */

.scroll-indicator{
    position:absolute;
    bottom:30px;
    left:50%;
    transform:translateX(-50%);
}

.scroll-indicator span{
    display:block;
    width:25px;
    height:40px;
    border:2px solid #fff;
    border-radius:20px;
    position:relative;
}

.scroll-indicator span::before{
    content:"";
    position:absolute;
    top:8px;
    left:50%;
    width:6px;
    height:6px;
    background:#fff;
    border-radius:50%;
    transform:translateX(-50%);
    animation:scrollMove 2s infinite;
}

@keyframes scrollMove{
    0%{
        opacity:0;
        transform:translate(-50%,0);
    }
    50%{
        opacity:1;
    }
    100%{
        opacity:0;
        transform:translate(-50%,12px);
    }
}








.dark-section{

background:#111;
color:#fff;

}

/* title */

.dark-section .store-title{

color:#fff;

}

/* filter buttons */

.dark-section .filter-btn{

background:#2a2a2a;
color:#ddd;

}

.dark-section .filter-btn.active{

background:#dc3545;
color:#fff;

}

/* product cards */

.dark-section .product-card{

background:#1c1c1c;
color:#fff;
box-shadow:0 10px 30px rgba(0,0,0,0.4);

}

.dark-section .product-card p{

color:#bbb;

}

.products-section{
background:#f8f9fa;
}

.section-title{
font-weight:700;
margin-bottom:10px;
padding: 10px;
color: #b02a37;
}

.section-subtitle{
max-width:600px;
margin:auto;
color:#f8f8f8;
padding-bottom: 20px;
}

/* PRODUCT CARD */

.product-card{
background:#fff;
border-radius:12px;
overflow:hidden;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
transition:all 0.3s ease;
height:100%;
}

.product-card:hover{
transform:translateY(-8px);
box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

/* IMAGE */

.product-image{
overflow:hidden;
height:200px;
}

.product-image img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.5s ease;
}

.product-card:hover img{
transform:scale(1.1);
}

/* CONTENT */

.product-content{
padding:20px;
}

.product-content h5{
font-weight:600;
margin-bottom:10px;
}

.product-content p{
font-size:14px;
color:#666;
margin-bottom:15px;
}


.store-section{

padding:80px 0;
background:#f7f7f7;

}

.store-title{

text-align:center;
font-size:34px;
font-weight:700;
margin-bottom:40px;

}

/* CATEGORY FILTER */

.product-filter{

display:flex;
justify-content:center;
flex-wrap:wrap;
gap:15px;
margin-bottom:40px;

}

.filter-btn{

border:none;
padding:10px 22px;
background:#eee;
border-radius:30px;
cursor:pointer;
transition:0.3s;
font-weight:500;

}

.filter-btn.active,
.filter-btn:hover{

background:#dc3545;
color:#fff;

}

/* GRID */

.product-grid{

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

}

/* CARD */

.product-card{

background:#fff;
border-radius:12px;
padding:20px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
transition:0.4s;

}

.product-card:hover{

transform:translateY(-10px);
box-shadow:0 20px 40px rgba(0,0,0,0.15);

}

.product-card img{

width:100%;
height:200px;
object-fit:cover;
border-radius:10px;
margin-bottom:15px;

}

.product-card h5{

font-weight:600;
margin-bottom:8px;

}

.product-card p{

font-size:14px;
color:#666;
margin-bottom:15px;

}

.buy-btn{

border:none;
background:#dc3545;
color:#fff;
padding:10px 20px;
border-radius:6px;
cursor:pointer;
transition:0.3s;

}

.buy-btn:hover{

background:#b02a37;

}

/* ANIMATION */

.product-item{

transition:0.4s ease;

}

.hide{

display:none;

}






.hero-brokerage{
position: relative;
height: 90vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;

background-size:cover;
background-position:center;

animation: heroSlider 18s infinite;
}

.hero-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.55);
}

.hero-content{
position:relative;
z-index:2;
max-width:700px;
}

.hero-content h1{
font-size:48px;
font-weight:700;
}

.hero-content p{
font-size:18px;
margin-top:10px;
}

@keyframes heroSlider{

0%{
background-image:url("img/kirabe-maize-supplier.jpg");
}

33%{
background-image:url("img/grain2.jpg");
}

66%{
background-image:url("img/grain3.jpg");
}

100%{
background-image:url("img/grain1.jpg");
}

}

.hero-brokerage{
animation: heroSlider 18s infinite, zoomHero 18s infinite;
}

@keyframes zoomHero{
0%{background-size:100%}
100%{background-size:110%}
}

.service-about{
padding:80px 0;
}

.service-list li{
margin-bottom:10px;
}

.brokerage-services{
background:#f7f7f7;
padding:80px 0;
}

.service-card{
background:#fff;
padding:30px;
border-radius:10px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
transition:0.3s;
}

.service-card:hover{
transform:translateY(-10px);
}

.service-card i{
font-size:30px;
color:#dc3545;
margin-bottom:15px;
}

.process-section{
padding:80px 0;
}

.process-step{
text-align:center;
}

.process-step span{
font-size:40px;
color:#dc3545;
font-weight:bold;
}

.cta-section{
background:#dc3545;
color:#fff;
padding:70px 0;
}








.section-padding{
padding:80px 0;
}

.animal-hero{
height:80vh;
background:url("img/kireba-animal-feeds-food.jpg") center/cover no-repeat;
position:relative;
color:white;
}

.hero-overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.55);
top:0;
left:0;
}

.hero-content{
position:relative;
z-index:2;
}

.feed-card{
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
margin-bottom:30px;
text-align:center;
}

.feed-cta{
background:#111;
color:white;
padding:80px 0;
}







.pay-hero{
height:60vh;
background:url("img/kirabe-maize-supplier.jpg") center/cover no-repeat;
position:relative;
color:white;
}

.payment-box{
background:white;
padding:30px;
border-radius:8px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
}

.payment-form input,
.payment-form textarea{
padding:12px;
}

/* FORM SECTION */
.payorder-form{
    background:#f8f9fa;
    padding:50px 20px;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,0.1);
}

.payorder-form h2{
    font-weight:700;
    margin-bottom:30px;
    color:#dc3545;
}

.payorder-form .form-control{
    margin-bottom:20px;
    border-radius:8px;
}

.payorder-form .btn{
    border-radius:8px;
}

/* INSTRUCTIONS SECTION */
.instructions{
    background:#343a40;
    color:white;
    padding:50px 20px;
    border-radius:15px;
    margin-top:40px;
}





.contact-section{

padding:80px 0;
background:#f5f5f5;

}

/* form */

.contact-form-box{

background:#fff;
padding:40px;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);

}

.contact-form-box h3{

margin-bottom:25px;
font-weight:600;

}

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

width:100%;
padding:12px;
border:1px solid #ddd;
margin-bottom:15px;
border-radius:6px;
outline:none;

}

.contact-form-box input:focus,
.contact-form-box textarea:focus{

border-color:#dc3545;

}

.contact-form-box button{

background:#dc3545;
border:none;
color:#fff;
padding:12px 25px;
border-radius:6px;
cursor:pointer;
transition:0.3s;

}

.contact-form-box button:hover{

background:#b02a37;

}

/* contact info */

.contact-info{

background:#111;
color:#fff;
padding:30px;
border-radius:10px;
margin-bottom:20px;

}

.contact-info h3{

margin-bottom:20px;

}

.contact-info p{

margin-bottom:10px;
font-size:15px;

}

.contact-info i{

margin-right:10px;
color:#dc3545;

}

/* map */

.map-box{

border-radius:10px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,0.2);

}




.page-hero{

background:#111;
color:#fff;
padding:80px 0;
text-align:center;

}

.page-hero h1{

font-size:40px;
font-weight:700;

}

.product-store{

padding:80px 0;

}

.product-filter{

display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;
margin-bottom:40px;

}

.filter-btn{

border:none;
background:#eee;
padding:10px 20px;
border-radius:30px;
cursor:pointer;

}

.filter-btn.active{

background:#dc3545;
color:#fff;

}

.product-grid{

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

}

.product-card{

background:#fff;
padding:20px;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
text-align:center;
transition:0.3s;

}

.product-card:hover{

transform:translateY(-10px);

}

.product-card img{

width:100%;
height:200px;
object-fit:cover;
border-radius:8px;
margin-bottom:15px;

}

.buy-btn{

background:#dc3545;
border:none;
color:#fff;
padding:10px 18px;
border-radius:6px;
cursor:pointer;

}

.buy-btn:hover{

background:#b02a37;

}





.footer{

background:#111;
color:#ddd;
padding:70px 0;

}

.footer h4{

color:#fff;
margin-bottom:20px;
font-weight:600;

}

.footer p{

font-size:14px;
line-height:1.6;

}

.footer a{

color:#ccc;
text-decoration:none;
transition:0.3s;

}

.footer a:hover{

color:#dc3545;

}

/* quick links */

.footer ul{

padding:0;
list-style:none;

}

.footer ul li{

margin-bottom:10px;

}

/* social icons */

.footer-social{

display:flex;
gap:12px;
margin-bottom:15px;

}

.footer-social a{

width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
background:#222;
border-radius:50%;
font-size:16px;

}

.footer-social a:hover{

background:#dc3545;
color:#fff;

}

/* subscribe */

.subscribe-box{

display:flex;
margin-top:10px;

}

.subscribe-box input{

flex:1;
padding:10px;
border:none;
outline:none;
border-radius:5px 0 0 5px;

}

.subscribe-box button{

background:#dc3545;
color:#fff;
border:none;
padding:10px 15px;
border-radius:0 5px 5px 0;
cursor:pointer;

}

.subscribe-box button:hover{

background:#b02a37;

}

/* copyright */

.copyright{

background:#000;
text-align:center;
padding:15px;
font-size:14px;
color:#aaa;

}

.copyright a{

color:#dc3545;

}