/* ===============================
   Color Palette & Global Variables
   =============================== */
:root {
    --brand-green: #248B4E;
    --brand-dark: #1a1e21;
    --brand-green-rgb: 61, 126, 49;
    --hover:#287249;
}

/* ===============================
   Base Overrides
   =============================== */
body {
    padding-top: 76px;
    background-color: #f8f9fa;
    font-family: 'Segoe UI', sans-serif;
    color: var(--brand-dark);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

.btn-primary {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
}

.brand-color-text {
    color: var(--brand-green);
}

.brand-bg-green {
    background-color: var(--brand-green) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active { 
  background-color: var(--hover) !important;
  transform: translateY(-2px);
}

/* ===============================
   HERO SECTION
   =============================== */

.hero-section {
    min-height:10vh;
    max-height: 90vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #fff;
    position: relative;
}

.brand-title {
    font-weight: 800;
    line-height: 1.1;
    font-size: clamp(2.5rem, 8vw, 5rem);
}

.text-green { color: var(--brand-green); }
.text-dark-custom { color: var(--brand-dark); }

.brand-footer-logo {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 50px;
}

.m-logo-icon {
    width: 80px;
    height: auto;
}

/* Right panel image container */
.hero-image-container {
    position: relative;
    height: 100%;
    min-height: 200px;
    max-height:600px;
    overflow: hidden;
    object-fit: contain;
    object-position: center;
}

.hero-image-container img {
    object-fit: contain;
    width: 100%;
    height: 90%;
}

/* ===============================
   SECTIONS & CARDS
   =============================== */
.custom-card-container {
    border-radius: 20px; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.06) !important; 
    border: 1px solid rgba(0,0,0,0.02);
}

.left-info-panel { min-height: 500px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.location-pin-img { max-width: 80%; }
.brand-heading-main { color: var(--brand-green); line-height: 1.2; }
.arrow-bullet { color: var(--brand-green); font-size: 1.2rem; margin-top: 0.3rem; }

.overlay-shape-muted {
    background-color: var(--brand-green);
    clip-path: polygon(100% 0, 0% 0, 100% 30%);
    opacity: 0.1;
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
}

/* ===============================
   GOAL SECTION
   =============================== */
.goal-header {
    clip-path: polygon(0 0, 100% 0, 100% 70%, 3% 100%, 0 100%);
    background-color: var(--brand-green) !important;
}

.icon-circle {
    width: 80px;
    height: 80px;
    margin: -40px auto 20px auto;
    border: 5px solid white;
    background-color: var(--brand-green) !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.goal-text { line-height: 1.6; }


/* benifits*/
/* THICK GREEN ACCENT BAR ON LEFT EDGE */
.delivery-section {
    position: relative;
    margin-top: 2rem;
}

.delivery-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 12px; /* thickness of the green bar */
    height: 100%; /* full height of the section */
    background-color: var(--brand-green);
    z-index: 1; /* behind text and image */
}

/* Ensure content is above the green bar */
.delivery-section .container {
    position: relative;
    z-index: 2;
}

/*

companys
*/

/* ===============================
   COMPANIES SECTION
   =============================== */
.companies-section .brand-bg-green {
    background-color: var(--brand-green);
    color: #fff;
    text-align: center;
    padding: 2rem 1rem;
    border-radius: 0.75rem 0.75rem 0.75rem 0;
    margin-bottom: 1rem;
}

/* Table spacing */
.companies-section .table-responsive {
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-radius: 1rem;
    padding: 1.5rem;
}


.companies-section table tbody tr td {
    height: 80px;
    vertical-align: middle;
    font-size: 1.1rem;
    color: var(--brand-dark);
}

.companies-section p {
    font-size: 1.1rem;
    font-weight: 600;
}

/* ===============================*/
   CONTACT / CONNECT SECTION
.contact-section {
    position: relative;
    max-height: 400px;
}

.contact-section .col-md-7 {
    background-color: #fff;
    padding: 1rem;
    z-index: 2;
}

.contact-section img {
    max-height: 300px;
    object-fit: cover;
}

.contact-section h1 {
    color: var(--brand-green);
    line-height: 1.2;
}

.contact-section p {
    line-height: 1.5;
}

.contact-section .contact-img-container {
    background-color: var(--brand-green); /* Green background */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.contact-section .contact-icon {
    color: #fff;          /* White icon */
    font-size: 6rem;      /* Adjust size as needed */
}

/* ===============================
   Me6rash App Section
   =============================== */
/* ===============================
   App Section Styling
   =============================== */
.app-section {
    background-color: #f8f9fa;
}

.app-section h2 {
    color: var(--brand-green);
    font-size: clamp(2rem, 4vw, 2.5rem);
    line-height: 1.2;
}

.app-section .lead {
    color: var(--brand-dark);
}

.app-section .app-mockup {
    max-width: 80%;
    border-radius: 30px;
}

.app-section .app-features li {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.app-section .app-features i {
    color: var(--brand-green);
}




/* ===============================
   RESPONSIVE FIXES
   =============================== */
@media (max-width: 991px) {
    .hero-section { text-align: center; padding: 40px 20px; }
    .brand-footer-logo { justify-content: center; }
    .geometric-bg { opacity: 0.2; clip-path: none; }
    .col-lg-5, .col-lg-6, .col-lg-7 { text-align: center; }
    .arrow-bullet { display: none; }
    .delivery-section::before {
        display: none; /* hide green bar on mobile */
       }
      .companies-section .brand-bg-green {
        min-height: auto;   /* let it shrink to fit content */
        border-radius: 0.75rem 0.75rem 0 0; /* rounded top corners */
        padding: 2rem 1rem;
        justify-content: center;
        text-align: center;
    }

    .companies-section .table-responsive {
        margin-top: 1rem;  /* space between green panel and table */
        box-shadow: none;   /* optional for cleaner mobile look */
        padding: 1rem;
        width: 100%;
    }

     .companies-section table tbody tr td {
        display: block;
        text-align: center;
        height: auto;
        padding: 0.5rem 0;
    }
    .contact-section .contact-img-container {
        display: none; /* hide image on mobile */
    }

    .contact-section .col-md-7 {
        padding: 2rem;
        text-align: center;
    }
      .companies-section .row {
        flex-direction: column; /* stack columns vertically */
    }

    .me6rash-section .content-box {
        text-align: center;
        padding: 2rem;
    }

    .me6rash-section .d-flex.align-items-center {
        justify-content: center;
    }

    .phone-mockup-container {
        margin-top: 2rem;
        max-width: 250px;
    }

   }