body{
    /* max-width: 1440px; */
    margin: 0 auto;
}

.green{
    background-color: #15803D ;
}

/* Yellow - Button */
.yellow-button{
    border-radius: 15px;
    justify-content: center;
    align-items: center;
    background-color: #FACC15;
    color:#15803D;
    border: none;
    margin: 24px;
    font-weight: 300;
    /* margin-right: 135px; */
    padding: 7px 20px;
    /* font-size: 0.25rem */
}


/* ========== Nav Bar Design */
.navbar{
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 60px;
    gap: 50px;
     
}
.left-element p{
    color: #FFFFFF;
    font-weight: bold;
    font: 20px;
}

.middle-element-list{
    display: flex;
    gap: 20px;
}
.middle-element-list li{
    list-style: none;
    /* justify-content: space-between; */
    gap: 10px;
    color: #FFFFFF;
}
/* =================================================================================== */
/* =============  Bannern design   ================ */

.banner-section{
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* height:600px; */
    background-color: #CFF0DC;
    /* gap: 50px; */
}
.middle-banner{
    justify-content: center;
    align-items: center;
    text-align: center;
}

/*   ====   MAin Section Design */
.main-section{
    background-color: #ecf8f1;
}
.banner-section .yellow-button{
    padding: 15px 38px;
    font-size: 1.25rem;
    border-radius: 25px;
}


/* =============================== */
/* ================================================= */

.choose-trees-mother-container{
   
    /* border: 1px solid blue;  */
    display: grid;
    grid-template-columns: 1fr 3fr 1fr; /* left 1, middle 3, right 1 */
    gap: 20px;
    padding: 20px;
    margin-bottom: 62px;
    
    
 
}
.choose-trees-mother-container > div {
    background-color: #d3d3d3; /* light grey */
    padding: 15px;
    border-radius: 8px;
    /* margin-bottom: 6px; */
}

#categories-container {
    background-color: transparent;
    padding-left: 50px;

    /* background-color: transparent; 
    height: auto;                  
    display: flex;                
    flex-direction: column;
    gap: 10px;                     
    padding-left: 0;     */
    
}
#cards-container{
    background-color: transparent;
    /* max-height: 800px;       */
    overflow-y: auto;       /* vertical scroll  */
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
#cards-container {
    scroll-behavior: smooth;
}


.card {
    height: 381px;  
    
}





#categories-container button {
    background-color: transparent; 
    border: none; 
    color: #000;                    
    flex: 1;   
    cursor: pointer; 
    font-size: 1rem;   
    padding: 10px 15px;   
    transition: all 0.3s ease;  
    /* margin-bottom: 6px;   */
}
#categories-container button:hover {
    background-color: #08583e;
    color: #FFFFFF;
    /* font: 1.7rem; */
    /* font-size: 1.1rem;   */
    transform: scaleX(1.1); /* 10% wider horizontally */
    transition: all 0.3s ease;
}


/* Center the heading above all columns */
.choose-trees-mother-container h2 {
    grid-column: 1 / span 3;
    text-align: center;
    margin-bottom: 20px;
};


/* =======  CAmpaign Section Design */

.campaign-mother-container{
    /* border: 1px solid black; */
    margin: 0px 415px;
    max-height: 610px;
    max-width: 1090px;
    /* margin-bottom: 28px; */

}

.campaign-container{
    display: flex;
    /* justify-content: space-between; */
    gap: 24px;
    margin-bottom: 28px;
    padding-bottom: 38px;
    /* flex: 1; */
    /* height: 100%; */
    /* align-items: stretch; */
}

.campaign-img, .campaign-text {
    flex: 1;
    /* box-sizing: border-box; */
    /* width: 50%;
    height: 100%; */
   
}
.campaign-img{
    flex: 1;
}

.campaign-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.campaign-mother-container h1{
    text-align: center;
    /* margin-top: 24px; */
    padding-top: 24px;
    margin-bottom: 24px;
}
/* .campaign-container div{
    flex: 1;
} */

.campaign-text {
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    /* border: 1px solid red; */
}


/* Our Impact Section */
.impact-section{
    background-color: #CFF0DC;
}
.impact-mother-container{
    margin: 100px 135px;
    padding-bottom: 100px;
}
#impact-title{
    text-align: center;
    padding-top: 24px;
    margin-bottom: 24px;
}
.impact-container{
    display: flex;
    justify-content: space-evenly;
    gap: 50px;
}
.impact-box{
    width: 516.67px;
    height: 156px;
    background-color: #FFFFFF;
    /* font-size: bolder; */
    /* font-weight: bolder; */
    font: .12rem;
    border-radius: 10px;

    /* align-items: center; */
    text-align: center;
    margin-top: 20px;
    padding: 10px;
}
.impact-box h1{
    color: #0d4221;
}

/*================================= Footer Section ====================*/ 
.footer{
    background-color: #126d33;

}
.footer-section {
    /* background-color: #053617; */
    color: #FFFFFF;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* max-width: 650px;
    max-height: 391px; */
}
.form-container{
    background-color: #0f582b;
    width: 650px;
    height: 311px;
    align-items: center;
    margin: 0 auto;
    padding: 40px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    
}
.form-container input,.form-container .yellow-button{
    width: 100%;
    box-sizing: border-box;
    flex: 1;
    margin: 0;
}

.form-container input{
    padding-left: 18px;
    font-size: 1.1rem;
    border-radius: 15px;

}
.form-container .yellow-button{
    font-size: 1.25rem; 
    border-radius: 35px;
}

/* ======= all rights ================ */
.all-rights{
    background-color: #08391a;
    color: #FFFFFF;
    text-align: center;
    padding: 12px 0;
    max-height: 591px;
}
.all-rights p{
    /* margin: 0; */
    font-size: 1rem;
}
/* =========== finish ============== */

/* ==================================== */
#inner-div{
    display: flex;
    justify-content: space-around;
    margin: 10px 0;
    font-weight: bold;
}
.card{
    max-width: 343.33px;
    height: 381px;
    background-color: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
    /* border: 1px solid red;  */
    padding: 15px;

    display: flex;            
    flex-direction: column;
}
#cards-container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 20px;
    /* ===== */
    max-height: 600px; 
    overflow-y: auto; 
    scrollbar-width: thin; 

}

/* == */
.card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 12px;
}
.card h4 {
    margin: 8px 0;
    font-size: 1.2rem;
    /* color: #15803D; */
}
.card p {
    font-size: 0.9rem;
    color: #555;
    margin: 8px 0 12px 0;
}

.card button {
    background-color: #0b692d;
    color: #FFFFFF;
    border: none;
    border-radius: 25px;
    padding: 12px;
    width: 80%;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    /* margin: auto 0 0;  */
    margin-top: auto;         
    align-self: center;
   
}

/* Button hover effect */
.card button:hover {
    background-color: #08583e;
}



/* ======================================== jjsssssss */
.active{
    background-color: #08583e;
    color:#FFFFFF
}

/* =============   cart section design */
#cart-container{
    background-color: #FFFFFF;
    /* padding-right: 30px; */
    margin-right: 30px;
}

.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #e0f2e9; 
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 8px;
    position: relative;
}
.cart-item .cart-info {
    
    flex: 1;
}

.cart-item button.remove-btn {
    background-color: transparent;
    border: none;
    font-weight: bold;
    font-size: 1.2rem;
    cursor: pointer;
    color: #a00;
    margin-left: 10px; 
}



/* Total price container */
.cart-total {
    text-align: right;
    font-weight: bold;
    margin-top: 10px;
}



/*  modal  design  */
#details-container{
    max-width: 343.33px;
    height: 381px;
    background-color: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
    /* border: 1px solid red;  */
    padding: 15px;

    display: flex;            
    flex-direction: column;
}

#details-container img{
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 12px;
}

#details-container h3 {
    margin: 8px 0;
    font-size: 1.2rem;
    /* color: #15803D; */
}
#details-container p {
    font-size: 0.9rem;
    color: #555;
    margin: 8px 0 12px 0;
}



/* Center the close button */
#my_modal_5 .modal-action {
  display: flex;
  justify-content: center;
}

/* ==============   spinner adding design ======== */
.spinner{
    display: flex;
    justify-content: center;
    align-items: center;
}



/*=====================  Mobile Responsiveness ==================== */


@media screen and (max-width:576px){

    /* Navbar adjustments */
    .navbar {
        flex-direction: column;
        height: auto;
        gap: 10px;
        padding: 10px 0;
    }
    .middle-element-list {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
    .middle-element-list li {
        font-size: 0.9rem;
    }
    .left-element p {
        font-size: 1.2rem;
    }
    .yellow-button {
        margin: 10px 0;
        padding: 8px 15px;
        font-size: 1rem;
    }

    /* Banner adjustments */
    .banner-section {
        flex-direction: column;
        padding: 20px 10px;
        text-align: center;
    }
    .banner-section .left-img,
    .banner-section .right-img {
        display: none; /* Remove leaf images */
    }
    .middle-banner h1 {
        font-size: 1.5rem;
    }
    .middle-banner p {
        font-size: 0.9rem;
    }
    .middle-banner .yellow-button {
        padding: 10px 20px;
        font-size: 1rem;
    }

    /* Main Section adjustments */
    .choose-trees-mother-container {
        display: flex;
        flex-direction: column;
        padding: 10px;
        gap: 15px;
    }
    #categories-container {
        padding-left: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }
    #cards-container {
        grid-template-columns: 1fr; /* Single column cards */
        padding: 0;
        gap: 15px;
    }
    #cart-container {
        margin-right: 0;
        margin-top: 20px;
    }

    /* Campaign Section adjustments */
    .campaign-mother-container {
        /* margin: 0 10px; */
        margin: 0 10px 40px 10px; /* extra bottom margin */
        max-width: 100%;
        padding-bottom: 20px;
    }
    .campaign-container {
        /* display: flex; */
        flex-direction: column;
        gap: 15px;
    }
    .campaign-img, .campaign-text {
        width: 100%;
    }

    .campaign-text {
    display: flex;            
    flex-direction: column;   
    gap: 10px;                
    }
    .campaign-text p, .campaign-text ul {
        font-size: 0.9rem;
        margin: 0;
        padding: 0;
    }

    /* Impact Section adjustments */
    .impact-mother-container {
        /* margin: 50px 10px; */
        margin: 100px 10px 50px 10px; 
        padding-bottom: 50px;
    }
    .impact-container {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
    .impact-box {
        width: 100%;
        max-width: 300px;
        height: auto;
        padding: 15px;
        text-align: center;
    }
    .impact-box h1 {
        font-size: 1.2rem;
    }
    .impact-box p {
        font-size: 0.9rem;
    }

    /* Footer adjustments */
    .form-container {
        width: 90%;
        padding: 20px;
    }
    .form-container input,
    .form-container .yellow-button {
        font-size: 0.9rem;
    }

    /* Card adjustments */
    .card {
        max-width: 100%;
        height: auto;
        padding: 10px;
    }
    .card img {
        height: 150px;
    }
    .card h4 {
        font-size: 1rem;
    }
    .card p {
        font-size: 0.85rem;
    }
    .card button {
        font-size: 0.9rem;
        padding: 10px;
        width: 100%;
    }

    /* Modal adjustments */
    #details-container {
        max-width: 90%;
        height: auto;
        padding: 10px;
    }
    #details-container img {
        height: 150px;
    }
    #details-container h3 {
        font-size: 1rem;
    }
    #details-container p {
        font-size: 0.85rem;
    }

    /* Cart adjustments */
    .cart-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .cart-item button.remove-btn {
        margin-left: 0;
        margin-top: 5px;
    }
    .cart-total {
        text-align: left;
        font-size: 0.95rem;
    }

    /* Spinner adjustments */
    .spinner {
        margin: 20px 0;
    }

    /* All-rights section */
    .all-rights p {
        font-size: 0.85rem;
        padding: 0 5px;
    }
}