/* About Page Section Headings */
.about-section h2,
.about-section h3 {
    color: #000000;  /* Black text */
}*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, sans-serif;
}

/* Body with orange background */
body{
  background: orange !important;
}
color: #333,


/* Header */
header{
background:#1f7a1f;
color:white;
padding:20px;
text-align:center;
}

nav{
margin-top:10px;
}

nav a{
color:white;
margin:10px;
text-decoration:none;
font-weight:bold;
}

/* Hero section */
.hero{
text-align:center;
padding:80px 20px;
background: rgba(255,255,255,0.3); /* light overlay to contrast */
border-radius:10px;
margin:20px;
}

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

.hero p{
font-size:18px;
margin-bottom:20px;
}

button{
background:#1f7a1f;
color:white;
padding:12px 25px;
border:none;
border-radius:5px;
cursor:pointer;
}

/* Info section */
.info{
padding:50px 20px;
text-align:center;
}

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

.card{
background:white;
width:250px;
box-shadow:0 0 10px rgba(0,0,0,0.1);
border-radius:10px;
}

/* Footer */
footer{
background:#333;
color:white;
text-align:center;
padding:15px;
margin-top:40px;
border-radius:5px;
}

/* Responsive design */
@media(max-width:768px){

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

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

.card{
width:90%;
}

}
/* Products Section */

.products-section{
padding:40px 20px;
text-align:center;
}

.products-section h{
font-size:32px;
margin-bottom:30px;
color:white;
}

/* Product Grid */

.products{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:20px;
}

.product{
background:white;
padding:15px;
width:250px;
border-radius:10px;
box-shadow:0 0 10px rgba(0,0,0,0.1);
text-align:center;
transition: transform 0.3s, box-shadow 0.3s;
}

.product img{
width:100%;
height:auto;
border-radius:5px;
margin-bottom:10px;
}

/* Hover effect */
.product:hover{
transform: translateY(-5px);
box-shadow:0 10px 20px rgba(0,0,0,0.2);
}

/* Button */
.product button{
background:#1f7a1f;
color:white;
padding:10px 20px;
border:none;
border-radius:5px;
cursor:pointer;
transition: background 0.3s;
}

.product button:hover{
background:#155d15;
}
/* Product Grid */
.products{
  display:flex;
  flex-wrap:wrap;
  justify-content:center; /* Centers all product cards horizontally */
  gap:20px;
}

.product{
  background:white;
  padding:15px;
  width:250px;
  border-radius:10px;
  box-shadow:0 0 10px rgba(0,0,0,0.1);
  text-align:center;  /* Centers text inside each card */
}
/* Responsive */
@media(max-width:768px){
.products{
flex-direction:column;
align-items:center;
}

.product{
width:90%;
}

/* About Page Section */
.about-section p, .about-section ul{
  font-size:18px;
  line-height:1.6;
  text-align: justify;  /* Force text to stretch from left to right */
}

.about-section h2{
  font-size:36px;
  margin-bottom:20px;
}

.about-section h3{
  font-size:24px;
  margin-top:20px;
  margin-bottom:10px;
}

.about-section p, .about-section ul{
  font-size:18px;
  line-height:1.6;
}

.about-section ul{
  list-style: disc;
  padding-left:20px;
}
/* Center the order container */
.order-container{
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center if needed */
  flex-direction: column;
  padding: 20px;
}

/* Order Form Styling */
.order-container form{
  width: 100%;
  max-width: 400px; /* limits form width */
  background: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  text-align: center;
}

/* Inputs & Textarea */
.order-container form input,
.order-container form textarea{
  width: 90%;
  padding: 12px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

/* Order Section */
.order-section {
  padding: 50px 20px;
  background: #f9f9f9;
  text-align: center;
}

.order-section h2 {
  font-size: 32px;
  margin-bottom: 20px;
}

/* Form Styling */
.order-form {
  max-width: 500px;
  margin: auto;
  background: #ffffff;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Inputs */
.order-form input,
.order-form select,
.order-form textarea {
  width: 100%;
  padding: 12px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
}

/* Button */
.order-form button {
  width: 100%;
  padding: 12px;
  background: #ff6600;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 18px;
  cursor: pointer;
  transition: 0.3s;
}

/* Button Hover */
.order-form button:hover {
  background: #e65c00;
}
}
}