.hero-banner{
height:50vh;
background:
linear-gradient(
rgba(255,255,255,0.4),
rgba(255,255,255,0.4)
),
url('/images/onion.jpg');

background-size:cover;
background-position:center;
position:relative;
}
.hero-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background: linear-gradient(
rgba(0,0,0,0.6),
rgba(0,0,0,0.4)
);

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
color:white;
text-align:center;
padding:20px;
}

.hero-overlay h1{
font-size:55px;
font-weight:700;
margin-top:120px;
}

.hero-overlay p{
font-size:20px;
margin-top:10px;
}

.breadcrumb-box{
margin-top:20px;
font-size:18px;
}

.breadcrumb-box a{
color:white;
text-decoration:none;
font-weight:600;
}

.breadcrumb-box span{
margin:0 8px;
}
.rice-card-section{
padding:60px 0;
background:#f8f9fa;
}

.rice-card{
display:flex;
align-items:center;
gap:40px;
background:white;
padding:40px;
border-radius:20px;
box-shadow:0 8px 25px rgba(0,0,0,0.08);
}

.rice-image{
flex:1;
}

.rice-image img{
width:90%;
border-radius:18px;
object-fit:cover;
}

.rice-content{
flex:1;
}

.rice-content h1{
font-size:48px;
font-weight:700;
margin-bottom:20px;
}

.rice-content p{
font-size:17px;
line-height:1.7;
color:#555;
}
.rice-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: grey;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.rice-btn:hover {
    background-color: darkgrey;
}
@media(max-width:768px){

.rice-card{
flex-direction:column;
text-align:center;
}

.rice-content h1{
font-size:32px;
}

}
.why-section{
    background:#f8f9fa;
}

.fade-up{
    opacity:0;
    transform:translateY(40px);
    animation:fadeUp 1s ease forwards;
}

.fade-up:nth-child(1){animation-delay:0.2s;}
.fade-up:nth-child(2){animation-delay:0.4s;}
.fade-up:nth-child(3){animation-delay:0.6s;}
.fade-up:nth-child(4){animation-delay:0.8s;}
.why-card{
    background:#fff;
    border-radius:18px;
    transition:0.4s ease;
    box-shadow:0 4px 18px rgba(0,0,0,0.08);
    height:100%;
}

.why-card:hover{
    background:rgb(192, 192, 192);
    backdrop-filter:blur(8px);
    transform:translateY(-10px);
    box-shadow:0 8px 25px rgba(0,0,0,0.12);
}
.why-icon{
    font-size:42px;
    color:rgb(0, 0, 64);
    margin-bottom:15px;
}

.why-card h5{
    font-weight:600;
    margin-bottom:12px;
}

.why-card p{
    font-size:15px;
    color:#6c757d;
}

@keyframes fadeUp{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@media(max-width:768px){
    .why-icon{
        font-size:34px;
    }
}
.product-section {
  background: linear-gradient(135deg, #f4f7fb, #eef3f9);
  position: relative;
  overflow: hidden;
}

.product-section h2 {
  font-size: 34px;
  font-weight: 700;
  color: #1f3b64;
  letter-spacing: 1px;
  position: relative;
}

.product-section h2::after {
  content: "";
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #28a745, #0d6efd);
  display: block;
  margin: 12px auto 0;
  border-radius: 50px;
}

.product-section .rounded-4 {
  border-radius: 18px !important;
}

.product-section .shadow-sm {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,0.05);
  transition: all 0.35s ease;
  position: relative;
}

.product-section .shadow-sm:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.product-section h5 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.product-section ul li {
  font-size: 15px;
  color: #4a4a4a;
  padding-left: 22px;
  position: relative;
  line-height: 1.7;
}

.product-section ul li::before {
 
  position: absolute;
  left: 0;
  top: 0;
  color: #28a745;
  font-weight: bold;
}

.product-section .text-primary {
  color: #0d6efd !important;
}

.product-section .text-success {
  color: #28a745 !important;
}

@media (max-width: 768px) {
  .product-section h2 {
    font-size: 26px;
  }
}
.whatsapp-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25D366;
    color: white;
    padding: 12px 18px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 9999;
    transition: transform 0.2s;
}

.whatsapp-btn:hover {
    transform: scale(1.1);
    text-decoration: none;
    color: white;
}

.whatsapp-btn i {
    font-size: 22px;
}