/* Global Page Styling */
    .about-page-body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: #333;
        line-height: 1.6;
        padding: 0;
        margin: 0;
        background-color: #f9f9f9;
    }

   containeraboutus {
        max-width: 1200px;
        margin: 0 auto;
        padding: 40px 20px;
    }

    h2 {
        font-size: 2.5rem;
        color: #228B22;
        text-align: center;
        margin-bottom: 30px;
        position: relative;
    }

    h2::after {
        content: '';
        display: block;
        width: 60px;
        height: 3px;
        background-color: #3498db;
        margin: 10px auto 0;
    }

    h3 {
        font-size: 1.8rem;
        color: #228B22;
        margin-top: 0;
        text-align:center;
    }

    /* 1. Logo Section */
    .logo-hero-section {
        background-color: #ffffff;
        text-align: center;
        padding: 40px 20px;
        border-bottom: 1px solid #eee;
    }

    .main-company-logo {
        max-width: 250px;
        height: auto;
        object-fit: contain;
    }

    /* 2. Company Profile & Showcase */
    .profile-section{
    background:#f8f5ee;
    padding:80px 0;
}

    
    .profile-showcase {
        position:relative;
    width:1100px;
    height:650px;
    margin:auto;
    }

    .showcase-card {
     position:absolute;
    overflow:visible;
    border-radius:18px;
    box-shadow:0 12px 30px rgba(0,0,0,.25);
    }

    .showcase-card img {
         width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    
    }

    .showcase-card:hover img {
        transform: scale(1.08);
    }
    
    
/* Left Africa-shaped picture */

.card1{
    width:300px;
    height:260px;
    left:20px;
    top:40px;
    overflow: visible;

    clip-path:polygon(
    35% 0%,
    55% 5%,
    75% 5%,
    88% 15%,
    100% 30%,
    100% 65%,
    98% 80%,
    85% 95%,
    60% 100%,
    40% 100%,
    15% 95%,
    2% 80%,
    0% 65%,
    0% 30%,
    12% 15%);
}

/* Lalibela */

.card2{
    width:360px;
    height:260px;
    left:370px;
    top:30px;
    border-radius:18px;
}

/* Hamer tribe */

.card3{
    width:230px;
    height:320px;
    right:20px;
    top:20px;

    clip-path:polygon(
     42% 0%,
    58% 2%,
    72% 10%,
    88% 22%,
    95% 42%,
    90% 62%,
    98% 82%,
    82% 100%,
    55% 92%,
    25% 100%,
    0% 85%,
    0% 60%,
    0% 35%,
    8% 15%);
}

/* Land Cruiser */

.card4{
    width:420px;
    height:240px;
    left:340px;
    bottom:10px;
    transform:rotate(-8deg);
}

    .showcase-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        background: linear-gradient(transparent, rgba(0,0,0,0.7));
        padding: 20px;
        color: white;
        box-sizing: border-box;
    }
    
    .showcase-overlay h3{
    color:#fff;
    margin:0;
    font-size:24px;
     word-wrap: break-word;
}

    /* 3. History & Mission */
    .history-mission-section {
        background-color: #ffffff;
        border-radius: 8px;
        padding: 40px 40px;
        margin: 40px 100px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    .grid-two-col {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
        gap: 40px;
    }
    .history-block {
        margin:0 100px;
    }
    
    .mission-block {
        margin:0 100px;
    }
    
    .mission-goal {
        margin:0 100px;
    }

    /* 4. Services Bullet List */
    .services-overview-section {
        margin: 40px 0;
        text-align: center;
    }

    .services-list {
        display: inline-block;
        text-align: left;
        list-style: none;
        padding: 0;
        margin: 20px auto 0;
    }

    .services-list li {
        font-size: 1.1rem;
        margin-bottom: 12px;
        padding-left: 30px;
        position: relative;
    }

    .services-list li::before {
        content: "✓";
        position: absolute;
        left: 0;
        color: #2ecc71;
        font-weight: bold;
    }

    /* 5. Detailed Services Sections */
    .detailed-service-item {
        display: flex;
        align-items: center;
        gap: 40px;
        background-color: #ffffff;
        padding: 40px;
        margin: 30px 0;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }

    .detailed-service-item.reverse {
        flex-direction: row-reverse;
    }

    .service-img-wrapper {
        flex: 1;
        min-width: 300px;
    }

    .service-img-wrapper img {
        width: 100%;
        height: auto;
        border-radius: 6px;
        object-fit: cover;
    }

    .service-content-wrapper {
        flex: 1;
    }

    /* 6. Top Clients Logo Grid (11 places) */
    .clients-section {
        
        padding: 40px;
        border-radius: 8px;
        margin: 40px 0;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    .client-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 80px;
        justify-content: center;
        align-items: center;
        margin-top: 30px;
    }

   

    .client-logo-box:hover {
        border-color: #3498db;
        background-color: #fff;
    }

    
    .client-logo-box{
    width:220px;
    height:120px;
    background:#fff;
    border-radius:18px;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:15px;
    border:1px solid #e8e8e8;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
    transition:.3s;
}

.client-logo-box img{
    width:100%;
    height:100%;
    object-fit:contain;
}
    
    .client-logo-box:hover img {
        filter: grayscale(0%);
        opacity: 1;
    }

    /* 7. Location / Address Section */
    .location-section {
        background-color: #2c3e50;
        color: #ffffff;
        padding: 40px;
        border-radius: 8px;
        margin-top: 40px;
    }

    .location-section h2 {
        color: #ffffff;
    }

    .location-section h2::after {
        background-color: #e74c3c;
    }

    .location-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
        margin-top: 30px;
    }

    .map-placeholder {
        width: 100%;
        height: 250px;
        border-radius: 6px;
        border: none;
    }

   /* ==========================================================================
   8. Mobile & Tablet Responsive View (Add to the bottom of your CSS file)
   ========================================================================== */

@media screen and (max-width: 1024px) {
    /* Adjust main layout containers for tablets and large phones */
    .history-mission-section {
        margin: 20px 20px;
        padding: 30px 20px;
    }

    .history-block, .mission-block, .mission-goal {
        margin: 0 0 20px 0; /* Clear huge desktop horizontal margins */
    }

    /* Convert the absolute desktop collage into a fluid container */
    .profile-showcase {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* Reset absolute position and styling rules of the image cards */
    .showcase-card {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: 250px !important;
        transform: none !important; /* Removes the Land Cruiser rotation */
        clip-path: none !important; /* Removes complex clip paths for cleaner mobile renders */
    }
}

@media screen and (max-width: 768px) {
    /* Typography adjustments */
    h2 {
        font-size: 2rem;
        margin-bottom: 20px;
    }

    h3 {
        font-size: 1.5rem;
    }

    /* Grid layout structure conversions */
    .grid-two-col {
        grid-template-columns: 1fr; /* Stack mission blocks vertically */
        gap: 20px;
    }

    /* Detailed Services Section (Images & Text Stack cleanly) */
    .detailed-service-item {
        flex-direction: column !important; /* Enforces stacking even on reversed classes */
        padding: 20px;
        gap: 20px;
    }

    .service-img-wrapper {
        width: 100%;
        min-width: 100%;
    }

    /* Top Clients Logo Grid Adjustment */
    .client-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 20px;
    }

    .client-logo-box {
        width: 100%; /* Scale to fit standard grid slots */
        height: 90px;
        padding: 10px;
    }

    /* Location / Footer Grid */
    .location-grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 480px) {
    /* Extra optimization for small mobile displays */
    containeraboutus {
        padding: 20px 15px;
    }

    .logo-hero-section {
        padding: 20px 10px;
    }

    .main-company-logo {
        max-width: 180px;
    }

    .showcase-card {
        height: 200px !important;
    }
    
    .services-list li {
        font-size: 1rem;
        padding-left: 25px;
    }
}