/* =========================================================
   Africa Grains — Logistics (page-specific)
   Targets:
   .logistics-hero, .logistics-hero__actions,
   .logistics-overview,
   .logistics-steps .steps/.step,
   .logistics-options, .logistics-cta
   ========================================================= */

/* Hero */
:root {
    /* Brand (from project brief) */
    --brand-green: #044c26;   /* Main Color in logo */
    --brand-gold:  #c39933;   /* Secondary Color in logo */
    --brand-green-trans: #004e2594;
    /* --brand-green-trans: #044c2694; */

    /* Neutrals */
    --grey-900: #1a1a1a;
    --grey-800: #2a2a2a;
    --grey-700: #4a4a4a;
    --grey-600: #5f5f5f;
    --grey-500: #8a8a8a;
    --grey-300: #e6e6e6;
    --grey-200: #efefef;
    --grey-100: #f7f7f7;
    --white:    #ffffff;

    --ts-gold:   0 0 8px rgba(195, 153, 51, .65); /* brand glow */
}

.container{
    width: 80%;
    margin-left: 10%;
}
hr{
    margin-top: 50px;
    margin-bottom: 50px;
    color: var(--grey-300);
}

h1{
    font-size: 50px;
}



/* hero */
.hero-section{
    height: auto;
}
.hero-details{
    width: 80%;
    margin-left: 10%;
    margin-top: 100px;
    z-index: 2;
}
.hero-section .hero-img{
    margin-top: -100px;
    position: absolute;
    z-index: -2;

}
.hero-section .container{
    margin-top: 100px;
    z-index: 2;
}
.lead{
    text-shadow: var(--ts-strong);
    color: #1a1a1a;
    width: 50%;
}
.logistics-hero {
    padding-block: var(--space-8);
}
.logistics-hero .lead {
    max-width: 70ch;
}
.logistics-hero__actions {
    margin-top: var(--space-4);
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Overview cards */
.logistics-overview{
    margin-top: 550px;
    margin-bottom: 0;
}
.logistics-overview .card {
    height: 100%;
}
.grid{
    margin-bottom: -50px;
}

/* Steps (vertical list with numbers) */
.logistics-steps{
    margin-top: -350px;
    margin-bottom: 200px;
    
}
.steps {
    display: grid;
    gap: var(--space-4);
}
.step {
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: start;
    gap: var(--space-3);
}
.step__num {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--brand-gold);
    color: var(--grey-900);
    font-weight: 900;
    display: grid;
    place-items: center;
    line-height: 1;
    box-shadow: var(--shadow-xs);
}

/* Options grid */
.logistics-options .grid {
    margin-bottom: 100px;
    align-items: stretch;
}

/* CTA band spacing */
.logistics-cta .cta-band {
    margin-top: var(--space-4);
}

/* map */
.wrapper-cl{
    margin-top: -50px;
}
.transport-routes{
    margin-top: -100px;
}

/* Logistics partners */
.styled-container{
    margin-top: 100px;
    margin-bottom: 100px;
    width: 100%;
    height: auto;
}
.styled-container .wrapper{
    display: flex;
    flex-direction: row;
}
.transport-partners img{
    width: 50px;
    height: 50px;
    margin: 0;
    padding: 0;
    fill: var(--brand-green);
}
.wrapper-2{
    width: 50%;
    display: flex;
    flex-direction: row;
}
.wrapper-2 div{
    margin-left: 20px;
}
.wrapper-2 p{
    line-height: 0;
}
.country {
    font-size: 1.25rem;   /* match your previous h2 scale */
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}
/* 1080-wide tier: */
@media (max-width: 1080px) {
    .container{
        width: 90%;
        margin-left: 5%;
    }
    /* hero */
    .hero-section h1{
        font-size: 30px;
        margin-top: 20px;
    }
    .lead{
        width: 74%;
    }

    .hero-details{
        width: 90%;
        margin-left: 5%;
        margin-top: 0;
        z-index: 2;
    }
    .hero-section .hero-img{
        margin-top: -20px;
    }
    
    /* logistics overview */
    .logistics-overview{
        margin-top: 300px;
        margin-bottom: 20px;
        
    }
    /* map */
    .africa-routes{
        margin-top: -200px;
        width: 80%;
        margin-left: 20%;
    }
    .transport-routes .sub-title{
        margin-top: 200px;
        font-size: 25px;
    }
    .wrapper-map{
        display: flex;
        flex-direction: column;
    }
    .split{
        gap: 0;
    }
    .split_content, .spit_media{
        max-width: 100%;
        margin: 0;
    }
    .country-list .country{
        font-size: 15px;
        line-height: 0;
        margin-top: -10px;
    }

    /* logistics steps */
    .logistics-steps{
        width: 70%;
        margin-top: -550px;
    
    }
    .step__body{
        width: 50%;
    }

    .styled-container .wrapper{
        display: flex;
        flex-wrap: wrap;
        margin-bottom: -50px;
    }
    .wrapper .wrapper-2{
        width: 50%;
        margin-bottom: 50px;
        
    }

    

}
/* Mobile ~480-wide: full-bleed with safe padding */
@media (max-width: 520px) {
    .container{
        width: 90%;
        margin-left: 5%;
    }
    /* hero */
    .hero-details{
        width: 90%;
        margin-left: 5%;
        z-index: 2;
    }
    .lead{
        width: 100%;
    }
    .hero-section .hero-img{
        position: static;
        margin-top: 0;
    }
    
    /* cards */
    .logistics-overview{
        margin-top: 50px;
        position: relative;
        z-index: 50;
        isolation: isolate;
    }
    
    /* map */
    .transport-routes .sub-title{
        margin-top: 170px;
        font-size: 25px;
        margin-bottom: 20px;
    }
    .country-list .country{
        font-size: 15px;
        line-height: 0.1;
    }
    .country-list{
        margin-top: 50px;
    }
    .wrapper-map{
        display: flex;
        flex-direction: column;
        padding-top: 50px;
        z-index: -5;
    }
    .country{
        font-size: 10px;
    }
    .africa-routes{
        margin-top: -100px;
        width: 100%;
        margin-left: 0;
    }
    .logistics-steps{
        width: 100%;
        margin-top: -50px;

    }
    .step__body{
        width: 100%;
    }
    .transport-partners{
        margin-top: -100px;
    }
    .styled-container .wrapper{
        display: flex;
        flex-direction: column;
        margin-bottom: -50px;
    }
    .wrapper .wrapper-2{
        width: 100%;
        margin-bottom: 50px;
        
        
    }
}

@media (min-width: 2560px){
    /* glabals */
    p, li{
        font-size: 20px;
    }

    /* hero section */
    .hero-section h1{
        font-size: 50px;
    }
    .hero-img{
        width: 100%;
    }
    .lead{
        font-size: 20px;
    }

    .logistics-overview{
        margin-top: 800px;
    }



}