/* ============================================================
    NOTES:
   - Mobile-first
   ============================================================ */
:root {
    /* Brand colors*/
    --color-main: #76240c;
    --color-main-trn: #551a08af;
    --color-main-dark: #432212;
    --color-main-dark-2: #1b0e07;
    --color-secondary: #e17f28;
    --color-sub-0: #b8dae7;
    --color-sub-1: #b99b92;
    --color-sub-2: #c4c4c4;

    /* Neutrals */
    --color-bg: #f7f5f9;
    --color-white: #ffffff;
    --color-text: #222222;
    --color-border: #9c9c9c;

    /* Feedback */
    --color-success: #2f855a;
    --color-warning: #b7791f;
    --color-error: #b54a4a;

    /* Layout */
    --container-width: 100%;
    --radius-md: 8px;
    --radius-lg: 16px;
    --btn-radius: 999px;

    /* Spacing (4/8px scale) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --space-8: 48px;
    --space-9: 50px;
    --space-10: 100px;
    --space-11: 200px;
    

    --text-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.25);

    --text-shadow-hard: 
        0 2px 4px rgba(0,0,0,0.6),
        0 4px 10px rgba(0,0,0,0.8);
}

.itin-container{
    text-align: center;
    width: 80%;
    margin-left: 10%;
    margin-top: var(--space-10);
    padding-bottom: var(--space-10);
}
@media (max-width: 450px) {
    .itin-container{
        width: 100%;
        margin: 0;
        padding-bottom: var(--space-5);
    }
    .itin-container p{
        width: 90%;
        margin-left: 5%;
        padding: 0;
    }
    .h1-hero{
        margin: 0;
        font-size: 1.7rem;
        width: 100%;
        padding: 0;
    }
    .p-hero{
        width: 100%;
        padding: 10px;

    }


}

/* Full-width hero */
.hero {
    background:
        url('../img/hero/namib-desert-dunes-safaris-1920.webp') center center fixed;
    background-size: cover;
    background-repeat: no-repeat;
        

}
@media (min-width: 2400px) {

    .hero {
        background:
            url('../img/hero/namib-desert-dunes-safaris.webp') center;

    }
}
@media (max-width: 480px) {

    .hero {
        background:
            url('../img/hero/namib-desert-dunes-safaris-500.webp') no-repeat;
        height: 765px;
        padding-bottom: 0px;
        margin-bottom: 0px;
    }
    .hero-content{
        margin-top: 100px;
    }
}


/* ============================================================
   Featured Itineraries Section
============================================================ */
.itineraries-intro{
    margin-top: var(--space-11);
}
/* .featured-itineraries {
    padding: 80px 0;
} */

/* One itinerary per row */

.itinerary-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    /* margin-top: 40px; */
}


/* ============================================================
   Itinerary Card
============================================================ */

.itinerary-card {
    margin-top: var(--space-10);
    transition: transform 0.3s ease;
}
.itinerary-card h3{
    font-size: 2rem;
}
.itinerary-card:hover {
    transform: translateY(-5px);
}

@media (max-width: 480px) {
    .itineraries-intro{
        margin-top: var(--space-9);
    }
    .itinerary-card{
        max-width: 100vw;
    }
    .itinerary-card h3{
        max-width: 90%;
        margin-left: 5%;
        font-size: 1.5rem;
    }
}
/* ============================================================
   Gallery Layout
============================================================ */

.itinerary-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* padding: 20px; */
    gap: 5px;
    
}

/* MAIN IMAGE LEFT */
.itinerary-main-image{ 
    margin: 0;
    /* background-color: #852f7e; */
    /* width: 715px;
    height: 450px; */
}
.itinerary-main-image img {
    background-color: #2f855a;
    width: 100%;

    object-fit: cover;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}


/* RIGHT COLUMN */

.itinerary-sub-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 5px;
}

/* small images */

.itinerary-sub-images img {
    background-color: #b7791f;
    width: 100%;
    /* width: 400px;
    height: 222.5px; */
    object-fit: cover;
}
.img-r{
    border-top-right-radius: 15px;
    
}
.img-r-2{
    border-bottom-right-radius: 15px;
}

/* paragraph below thumbnails */

.itinerary-content {
    font-size: 0.95rem;
    line-height: 1.6;
    
}

.itinerary-content h3 {
    margin-bottom: 8px;
}


/* ============================================================
   Hover Expand Panel
============================================================ */

.itinerary-hover {
    max-height: 0;
    overflow: hidden;
    padding: 0 25px;
    transition: max-height 0.4s ease;
    border-style: solid;
    border-width: 1px;
    border-color: var(--color-sub-1);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top: none;
}

.itinerary-card:hover .itinerary-hover {
    max-height: 850px;
    padding: 20px 25px;
}

.itinerary-hover ul {
    width: 60%;
    margin-bottom: 15px;
    padding-left: 18px;
}

.itinerary-hover li {
    margin-bottom: 5px;
}

.itinerary-hover p{
    margin-left: 20px;
    width: 100%;
}

.itinerary-hover .wrapper{
    text-align: left;
}

.itin-btn{
    margin-top: 50px;
}
/* ============================================================
   Responsive
============================================================ */

@media (max-width: 768px) {

    .itinerary-gallery {
        grid-template-columns: 1fr;
    }

    .itinerary-main-image img {
        height: 240px;
    }

    .itinerary-sub-images {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .itinerary-sub-images img {
        height: 100px;
    }

    .itinerary-hover {
        max-height: none;
        padding: 20px;
    }

}

@media (max-width: 450px) {
    .wrapper{
        display: flex;
        flex-direction: column;
    }
    .img-r{
        border-top-right-radius: 0px;
        
    }
    .img-r-2{
        border-bottom-right-radius: 0px;
    }
    .itinerary-main-image img {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    /* .itinerary-hover{
        display: none;
    } */

    .itinerary-hover ul {
        width: 100%;
        margin-bottom: 15px;
        padding-left: 18px;
    }
    .itinerary-hover p{
        display: none;
    }
}


/* ============================================================
itinerary Card
============================================================ */

.itinerary-card-b {
    padding: 1.5rem;
    /* background: var(--color-main-dark); */
    margin-top: var(--space-10);
}
.itinerary-card-b .it-wrapper{
    display: flex;
    flex-direction: row;
}
.wrapper-h{
    display: flex;
    flex-direction: row;
}
.itinerary-card-b .it-img{
    height: 250px;
    margin-right: 20px;
    border-radius: 10px;
    border-style: solid;
    border-width: 2px;
    border-color: var(--color-main);
}

.itinerary-card-b h3 {
    margin-bottom: 0.6rem;
    text-align: left;
    font-size: 2rem;
    color: var(--color-main);

}
.itinerary-card-b p {
    font-size: 0.95rem;
    line-height: 1.5;
    width: 50%;
    padding: 20px;
    color: var(--color-main);

}
.itinerary-card-2 p {
    font-size: 0.95rem;
    line-height: 1.5;
    width: 100%;
    padding: 20px;

}

.itinerary-card-b .btn{
    background-color: var(--color-sub-1);
    
}
.itinerary-card-b .btn:hover{
    background-color: var(--color-sub-0);
}

@media (max-width: 450px) {

    .itinerary-card-b{
        max-width: 100vw;
        margin-top: 0px;
    }
    .itinerary-card-b .it-wrapper{
        display: flex;
        flex-direction: column;
    }
    .wrapper-h{
        display: flex;
        flex-direction: column;
    }
    .itinerary-card-b h3 {
        margin-bottom: 0.6rem;
        text-align: center;
        font-size: 1.5rem;

    }
    .itinerary-card-b p{
        width: 100%;
        margin-left: 0%;

    }
    .itinerary-card-b .it-img{
        margin-right: 0px;
    }
}

.background-image .itin-container{
    margin-top: 650px;
}
.background-image h2{
    color: var(--color-white);
    text-shadow: var(--text-shadow-hard);
}
.background-image p{
    color: var(--color-white);
    font-size: 1.2rem;
    text-shadow: var(--text-shadow-hard);
}

.background-image {
    background: url('../img/background-images/pink-lake-namibia-day-tour-1920.webp') center;
}
@media (min-width: 2400px) {

    .background-image {
       background: url('../img/background-images/pink-lake-namibia-day-tour.webp') center;
    }
}
@media (max-width: 480px) {

    .background-image {
        background:
            url('../img/background-images/pink-lake-namibia-day-tour-500.webp') center;
        height: 765px;
        padding-bottom: 0px;
        margin-bottom: 0px;
    }
    .background-image .itin-container{
        margin-top: 150px;
    }

}