body {
    overflow-x: hidden;
}

/* Section 0: Banner Image */
.banner-img {
   height: 40vh;
   background-image: url('https://res.cloudinary.com/urbanagriculture/image/upload/v1756440051/photorealistic-sustainable-garden-with-home-grown-plants_mewazx.jpg');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat
}


/* Section 1: Who We Are */
.section-1  {
   width: auto; 
   height: auto;
   background-color:white;
   color: black;
   text-align: justify;
}
/* Section 2: Vision & Mission */
.section-2  {
   background-color: #094328;
   color: whitesmoke;
}
.section-2 ul li{
    list-style-type: disc;
}

/* Section 3: Five for Five */
.section-3  {
   background-color: mintcream;
   text-align: justify;
}
.rounded-custom {
    border-radius: 53px;
    object-fit: cover;
}


/* Section 4: Our Stakeholders */
.section-4 {
   padding: 2rem 0;
}
.section-4 img {
   max-height: 80px;
   width: auto;
}
.s-box{
   width: 100%;
   background-color: #0c453d;
   border-radius: 1rem;
   color: white;
   padding: 2rem;
}


/* Section 5: Our Brands */
.section-5 {
   background-color: #146c4330;
   text-align: justify;
   padding: 30px 0;
}
.section-5 .row {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
}
.section-5 .col-md-6 {
   flex: 1 1 45%;
   display: flex;
   flex-direction: column;
}
.section-5 .card-box {
   background-color: rgba(245, 255, 250, 0.856);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   border-radius: 12px;
   padding: 20px;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.section-5 .card-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.section-5 img {
   width: 7rem;
   display: block;
   margin: 20px auto;
}
.section-5 button {
   display: block;
   margin: 20px auto;
}
.card {
   width: 20rem;
   background-color: #f8f8ff9e;
   height: 43vh;
   transition: transform 0.3s ease;    
}
.card:hover {
   transform: scale(1.05);
   box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}


/* Section 6: Our Service Section */
.section-6 {
   min-height: 112vh;
   background-size: cover;      
   background-position: center;  
   background-repeat: no-repeat; 
   padding: 2rem 0;
}
.section-6 .row {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   align-items: stretch;
   justify-content: center;
}
.section-6 .col-md {
   display: flex;
   flex: 1;
   min-width: 300px;
   max-width: 400px;
}
.section-6 .card {
   display: flex;
   flex-direction: column;
   width: 100%;
   background-color: #ffffff9e;
   height: 100%;
   margin: 0;
}
.section-6 .card-body {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   padding: 1.25rem;
}
.section-6 .card-body ul {
   flex-grow: 1;
   padding-left: 1.2rem;
}
.section-6 .card-body ul li {
   margin-bottom: 0.5rem;
}
.section-6 img {
   width: 7rem;
   display: block;
   margin: 20px auto;
}
.section-6-subtitle {
   color: rgb(8, 40, 77);
   font-weight: bold;
   margin-top: 1.5em;
   margin-bottom: 0.5em;
   font-size: 1rem; 
}


/* Section 7: Our Moble Apps */
.section-7 {
   padding: 2rem 0;
   background-color: mintcream;
}
.section-7 img {
   width: auto;
   max-width: 100%;
   height: auto;
   display: block;
   margin: 20px auto;
}
.reduced-img {
   width: 200px;
   max-width: 100%;
   height: auto;
}
.section-7 ul {
   display: block;
   padding: 20px 0;
}


/* Section 8: Our Online Services */
.section-8 {
   padding: 2rem 0;
   background-color: #094328;
   color: white;
}
.section-8 img {
   width: 100%;
   max-width: 400px;
   height: auto;
}
.section-8 ul li{
    list-style-type: disc;
}

/* Section 9: Video Section */
.section-9 {
   padding: 2rem 0;
   text-align: justify;
}
.section-9 video{
    width: 100%;
    max-width: 33rem;
    height: auto;
    border-radius: .5rem;
}

/*==============================
  Responsive adjustments
==============================*/
@media (max-width: 768px) {
    .banner-img
 {
    height: 20vh;
    background-image: url('https://res.cloudinary.com/urbanagriculture/image/upload/v1756440051/photorealistic-sustainable-garden-with-home-grown-plants_mewazx.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* Section-3: five for five */
.section-3 .row {
   gap: 1rem;
   padding: 0 1rem;
   align-items: center; 
}
.section-two-div3-img {
   width: 80% !important;       
   max-width: 250px !important;
   height: auto !important;
   margin: 0 auto;
   display: block;
   border-radius: 16px !important;
}

/* Section-5 “Our Brands” */
.section-5 .row {
   flex-direction: column;
   gap: 1rem;
}
.section-5 .col-md-6 {
   flex: 1 1 100%;
}
.section-5 .card-box {
   padding: 1rem;
}
.card {
   width: 100% !important;
   margin: 1rem auto;
}

/* Section-6 “Our Services” */
.section-6 {
   padding-left: 1rem;
   padding-right: 1rem;
}
.section-6 .row {
   flex-direction: column;
   gap: 1.5rem;
   align-items: center;
}
.section-6 .col-md {
   min-width: auto;
   max-width: 100%;
}
.section-6 .card {
   padding: 1rem;
   width: 100% !important;
}

/* Section-7 “Our Mobile Apps” */
.section-7 .row {
   flex-direction: column;
   text-align: left;
   padding: 0 2rem;
   gap: 0.1rem;    
}
.section-7 .col {
   width: 100%;
}
.section-7 img {
   margin-top: 5%;
   width: 70%;              
   max-width: 300px;        
   height: auto;
   margin: 0 auto;         
   display: block;
}
.section-7 ul {
   padding: 0.5rem 0;
   margin: 0;
}

/* Section-8 “Our Online Services” */
.section-8 .row {
   flex-direction: column;
   text-align: left;
   gap: 1.5rem;
}
.section-8 .col {
   width: 100%;
}

/* Section-9 video + text */
.section-9 .row {
   flex-direction: column;
   gap: 1.5rem;
   text-align: justify;
}
.section-9 video {
   max-width: 100%;
   height: auto;
   margin: 0 auto;
}
img, video {
   max-width: 100%;
   height: auto;
}

/* Reduce padding on sections for small screens */
.section-1 .container,
.section-2 .container,
.section-3 .container,
.section-4 .container,
.section-5 .container,
.section-6 .container,
.section-7 .container,
.section-8 .container,
.section-9 .container {
   padding: 0 1rem;
}
}

/* Extra-small phones */
@media (max-width: 480px) {
.section-5 h2,
.section-6 h2,
.section-7 h2,
.section-8 h2 {
   font-size: 1.5rem;
}

.section-5 .card-box,
.section-6 .card-body {
   padding: 0.75rem;
}

.section-1, .section-2, .section-3, .section-4,
.section-5, .section-6, .section-7, .section-8, .section-9 {
   padding-top: 1rem;
   padding-bottom: 1rem;
}
}