/* Why Choose Us Page Specific Styles */

/* HERO / COVER IMAGE  */
.cover-container {
    width: 100%;
    margin-bottom: 2rem;
    /* Add spacing below hero */
}

.cover {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* MAIN CONTENT LAYOUT */
/* Mobile First / Base Styles */
.content-grid {
    padding: 1rem 5% 4rem;
}

.content-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
    padding: 0;
}

/* Text & Image Wrappers */
.text-wrapper {
    display: contents;
}

.text-wrapper h2 {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 2rem;
    font-weight: 600;
    color: var(--secondary-color);
}

.text-wrapper p {
    text-align: left;
    margin-bottom: 1rem;
}

.image-wrapper img {
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    height: auto;
    display: block;
}

/* Offer Section */
.offer-section {
    text-align: center;
    padding: 2rem 5%;
}

#whovr {
    font-size: 2rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 0.5rem;
}

.underline .whovr-svg {
    display: inline-block;
    width: 150px;
    height: auto;
    margin-bottom: 0.5rem;
}


/*LIST STYLES */
/* Desktop List (in .text-wrapper ul) */
.text-wrapper ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1rem;
    row-gap: 1rem;
    /* gap for pills */
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Desktop Pill Style */
.text-wrapper li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1rem;
    /* Pill Styling */
    background-color: #F0F4F2;
    /* Subtle background */
    padding: 0.8rem 1.2rem;
    border-radius: 50px;
    border: 1px solid rgba(12, 92, 62, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.text-wrapper li:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border-color: var(--primary-color);
}

.text-wrapper i {
    color: var(--primary-color);
}


/* Mobile List Styling */
@media screen and (max-width: 767px) {
    .content-grid.desktop-only {
        display: none;
    }

    .newspaper-mobile {
        display: block;
    }

    .mobile-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        margin-top: 1.5rem;
        padding: 0;
        clear: both;
    }

    .mobile-list li {
        list-style: none;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background-color: #e0e0e0;
        padding: 0.5rem;
        border-radius: 50px;
        color: #000;
    }

    .mobile-list i {
        color: #0C5C3E;
    }

    /* Override generic image-text-pair grid for Why Page (No Header) */
    .newspaper-mobile .image-text-pair {
        display: block;
        overflow: visible;
        /* Allow text to flow */
    }

    .newspaper-mobile .image-text-pair figure {
        float: left;
        width: 48%;
        /* Slightly less than 50% for gap */
        margin-right: 4%;
        margin-bottom: 0.5rem;
        margin-top: 5px;
        /* Visual alignment fix */
    }

    .newspaper-mobile .image-text-pair .sectionsub {
        text-align: left;
        display: inline;
        /* Helps text wrap tightly */
        margin: 0;
    }
}

@media screen and (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }

    .desktop-only {
        display: block !important;
    }

    .content-container {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: center;
    }

    .text-wrapper {
        display: block;
    }

    .text-wrapper h2 {
        text-align: left;
    }
}

/*DESKTOP RESPONSIVE (min-width: 1024px) */
@media screen and (min-width: 1024px) {

    /* Content */
    #whovr {
        font-size: 4vw;
        margin-top: 4vh;
    }

    .underline .whovr-svg {
        width: 22vw;
        max-width: none;
    }

    .content-grid {
        padding: 4vw 10%;
    }

    .content-container {
        gap: 4vw;
        align-items: start;
    }

    .text-wrapper h2 {
        font-size: 3vw;
        margin-bottom: 5vh;
    }

    .text-wrapper p {
        font-size: 1.2vw;
        margin-bottom: 8vh;
        max-width: 90%;
    }

    .text-wrapper ul {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 1.5vw;
        row-gap: 1vw;
    }

    .text-wrapper li {
        font-size: 1.1vw;
        padding: 1vw 1.5vw;
    }
}