* {
    margin: 0;
    padding: 0;
}

body {
    overflow-x: hidden;
}

.roboto {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #EDAC36;
    --green: #066337;
    --light-green: #5fa33333;
    --teal: #20c997;
    --cyan: #1863b9;
    --white: #fff;
    --gray: #c7c7c7;
    --gray-dark: #1a2328;
    --primary: #007bff;
    --secondary: #b1b6ba;
    --success: #28a745;
    --info: #5aa9b6;
    --lightyellow: #ffc107;
    --black: #0c141a;
    --redium: #3aee91;
}

.bg-c {
    background-color: var(--black);
}
.container {
    width: 1440px;
    margin: auto;
}
.mtop-50 {
    margin-top: 50px;
}
.mtop-100 {
    margin-top: 100px;
}
.mtop-150 {
    margin-top: 150px;
}
.mtop-200 {
    margin-top: 200px;
}
.mtop-250 {
    margin-top: 250px;
}
.mtop-300 {
    margin-top: 300px;
}
/* ===nav section== */
.top-bar {
    background: var(--green);
    font-size: 14px;
}
.top-bar i {
    cursor: pointer;
}
.top-bar span{ 
    font-family: roboto;
}
/* ===navbar start=== */
.nav-link:hover {
    color: var(--green);
}
.nav-btn {
    background-color: var(--green);
    border: none;
    border-radius: 20px;
}
/* ===main-section start=== */
.main-section-bg {
    background-color: var(--light-green);
}
.oil-box {
    background: #0f6a3b;
    color: white;
    padding: 60px 40px;
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 25% 100%, 0 50%);
}
.oil-title {
    color: #f4a62a;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
}
.oil-text {
    font-size: 20px;
    line-height: 1.6;
}
@media (max-width:768px) {
    .oil-box {
        clip-path: none;
        border-radius: 20px;
        text-align: center;
        padding: 40px 25px;
    }
    .oil-title {
        font-size: 32px;
    }
}
/* ===product start=== */
.heading {
    color: var(--green);
    font-weight: 700;
}
/* ===why choose start=== */
.box1 {
    background-color: var(--white);
    border-radius: 15px;
}
.whychoose-section i {
    color: var(--green);
}
/* ===our process section start=== */
.ourprocess-section i {
    color: var(--yellow);
    font-size: 30px;
    background-color: var(--green);
    border-radius: 50%;
    height: 70px;
    width: 70px;
}
.ourprocess-section p {
    font-size: 14px;
}
/* ====our strength section start=== */
.icon-box {
    width: 120px;
    height: 120px;
    background: var(--green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}
.icon-box i {
    font-size: 40px;
    color: var(--yellow);
}
.process-carousel p {
    font-size: 16px;
    font-weight: 500;
    max-width: 250px;
    margin: auto;
}
.process-carousel .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
}
.process-carousel .owl-nav .owl-prev {
    position: absolute;
    left: -40px;
}
.process-carousel .owl-nav .owl-next {
    position: absolute;
    right: -40px;
}
.process-carousel .owl-nav button {
    background: var(--light-green) !important;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 30px !important;
}
.process-carousel .owl-nav button:hover {
    background: #0f6a3b !important;
    color: white !important;
}
@media (max-width:768px) {
    .process-carousel .owl-nav .owl-prev {
        left: -10px;
    }
    .process-carousel .owl-nav .owl-next {
        right: -10px;
    }
}
/* ===best selling product == */
.product-card{
border-radius:12px;
overflow:hidden;
}
.product-card img{
width:100%;
height:170px;
object-fit:cover;
}
.product-info p{
font-weight:600;
margin-top: 20px;
}
/* ===footer start== */
footer {
    background-color: var(--green);
    color: var(--white-text);
    padding: 60px 0 0 0;
    font-family: sans-serif;
}

.footer-logo-bg {
    background: white;
    padding: 10px;
    display: inline-block;
    border-radius: 4px;
    margin-bottom: 20px;
}

.footer-heading {
     color: var(--yellow);
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 25px;
    letter-spacing: 1px;
}
        .footer-links {
            list-style: none;
            padding: 0;
        }

        .footer-links li {
            margin-bottom: 12px;
        }

        .footer-links a {
            color: var(--white);
            text-decoration: none;
            text-transform: uppercase;
            font-size: 0.9rem;
            transition: 0.3s;
        }

        .footer-links a:hover {
            color: var(--yellow);
        }

        .map-img {
            width: 100%;
            max-width: 200px;
            border-radius: 15px;
            border: 2px solid rgba(255,255,255,0.1);
        }
        .contact-item {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        .icon-circle i{
            color: var(--green);
        }
        .icon-circle {
            background: white;
            color: var(--footer-bg);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            flex-shrink: 0;
        }
        .contact-text p {
            margin: 0;
            font-size: 0.9rem;
            color: var(--white);
        }
    
        .copyright-bar {
            background: white;
            color: #333;
            margin-top: 50px;
            padding: 15px 30px;
            border-radius: 15px 15px 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }
        .copyright-bar a {
            color: #333;
            text-decoration: none;
            margin-left: 15px;
        }
/* ==========about section===== */

.about-bg{
    background-color: #F6F4F4;
}
.about-bg h3{
   color: var(--green);
}
.process-slider{
    background-color: var(--green);
}
.process-con{
    background-color: var(--white);
}
.ourstory-section h3{
    color: var(--green);
}
.feature-container{
    background-color: var(--light-green);
    border-radius: 20px;
}
@media (max-width: 768px) {
            .feature-name {
                margin-bottom: 5px;
                color: var(--green);
            }
            .feature-row {
                padding: 20px 0;
            }
        }
.btn-section button{
    background-color: var(--green);
    border: none;
    border-radius: 10px;
    display: flex;
    margin: auto;
}
        /* ==============product section start===== */

.boxone,
.boxtwo{
    background: var(--green);
    color: white;
    padding: 15px 10px;
    text-align: center;
    font-size: 20px;
    border-radius: 10px;
    width: 100%;
}
.breadcrumb-box{
    background:#e9e9e9;
    border-radius:6px;
    padding:10px 20px;
}

.breadcrumb-title{
    color:var(--green);
    font-weight:600;
    margin-right:15px;
}

.breadcrumb a{
    text-decoration:none;
    color:#888;
    font-size:14px;
}

.breadcrumb-item.active{
    color:#000;
    font-weight:500;
}

@media(max-width:576px){
    .breadcrumb-title{
        display:block;
        margin-bottom:5px;
    }
}
        .img-wrapper img {
            max-width: 100%;
            height: auto;
            object-fit: contain;
            border-radius: 0 !important;
        }
        .card-footer{
            background-color: #066337;
            color: white;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            text-decoration: none;
            border-radius: 0 0 20px 20px;
        }
        .card-title {
            padding: 10px 0;
            margin: 0;
            flex: 1;
        }
        .arrow-icon1,
        .arrow-icon2,
        .arrow-icon3,
        .arrow-icon4,
        .arrow-icon5 {
           margin-left: auto;
           flex-shrink: 0;
        }
    @media (width:425px) {
        .img1{
            width: 400px;
        }
    }


.onion-img-box{

padding:15px;
border-radius:12px;

}

.onion-title{
color:#166534;
font-weight:700;
margin-bottom:15px;
}

.enquiry-btn{
background:#166534;
color:#fff;
border:none;
padding:10px 22px;
border-radius:6px;
margin-top:10px;
}

.enquiry-btn:hover{
background:#14532d;
}

.check-list{
list-style:none;
padding-left:0;
}

.check-list li{
margin-bottom:10px;
position:relative;
padding-left:22px;
}

.normal-list{
padding-left:18px;
}

@media(max-width:768px){

.onion-title{
font-size:24px;
}

}
/* =====contect us start==== */
.bg{
    background-color: var(--green);
}
.bg h1{
    color: var(--yellow);
}

.contact-section {
            background-color: #b2ccbd; /* Light sage green background */
            padding: 50px;
            border-radius: 20px;
            margin: 40px auto;
        }
        .section-title {
            color: var(--green);
            font-weight: 800;
            margin-bottom: 30px;
        }
        /* Form Styling */
        .form-label {
            font-size: 0.9rem;
            color: #333;
            margin-bottom: 5px;
        }
        .form-control {
            border: none;
            border-radius: 5px;
            padding: 10px 15px;
            font-size: 0.85rem;
        }
        .input-group-text {
            background-color: white;
            border: none;
            color: #888;
        }
        .btn-send {
            background-color: var(--green);
            color: white;
            padding: 10px 25px;
            border: none;
            border-radius: 8px;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 20px;
        }
        .info-card {
            background-color: var(--green);
            color: white;
            padding: 40px;
            border-radius: 20px;
            height: 100%;
        }
        .info-card h4 {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .info-card p {
            font-size: 0.95rem;
            opacity: 0.9;
            margin-bottom: 20px;
        }
        .social-icons {
            display: flex;
            gap: 15px;
            margin-top: 30px;
        }
        .social-circle {
            width: 40px;
            height: 40px;
            border: 1px solid rgba(255,255,255,0.4);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            transition: 0.3s;
        }
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .contact-section {
                 padding: 20px;
                 }
            .info-card {
                 border-radius: 30px;
                  margin-top: 30px; 
                }
        }