@charset "utf-8"; /* CSS Document */


/* Container & General Spacing */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px 0 20px;
}



.logo-wrapper {
    float: right;
    margin: 0 0 20px 30px;   /* Top, Right, Bottom, Left */
    max-width: 300px;
}



.standard-intro {
    font-size: 1.4rem;         /* Slightly larger to make it stand out */
    font-weight: 700;           /* Bolder weight */
    color: #1a3a5a;             /* Using that professional blue from your headings */
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 1.5;
    display: block;      /* Helps the nowrap property behave */
}



.intro-text h2 {
    color: #f40000;   /* #1a3a5a Deep professional blue, #ff4b00 orange */
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 30px;
    padding-bottom: 10px;
    display: block;
}



.intro-text h3 {
    color: #16171a;   /* #1a3a5a Deep professional blue */
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 10px;
    padding-bottom: 10px;
    display: block;
}



.standard-intro p:first-of-type {
    font-size: 1.4rem;
    font-weight: 600;
    color: #16171a;
    margin-top: 0;
}



.standard-content p:last-child {
    margin-bottom: 0;
}



/* Apply vertical centering to all grid variations */
.intro-grid {
    clear: both;   /* This forces the grid to start below the floating logo */
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;   /* This centers everything vertically, start keeps items level at the top */
    gap: 60px;
    margin-bottom: 40px;
    min-height: min-content;
}



.grid-reverse {
    display: grid;
    grid-template-columns: 1fr 4fr;
    align-items: center !important;   /* The !important ensures it ignores the previous 'start' */
    align-content: center;
    height: 100%;
    margin-bottom: 50px;
}



.standard-logo img {
    width: 100%;       /* Forces the logo to fill its container */
    height: auto;
    border-radius: 8px;
    display: block;
}



/* Targeted fix for the squashed logo */
.standard-logo img.responsive-img {
    display: block !important;
    width: 100% !important;     /* Fill the 1/3 column width */
    height: auto !important;    /* FORCE the browser to calculate height naturally */
    max-height: none !important;   /* Remove any inherited height limits */
    object-fit: contain;        /* Ensures the logo isn't distorted */
}



.standard-content p:last-child {
    margin-bottom: 0;
}



/* Ensure the logo container always has width in the reversed grid */
.grid-reverse .intro-logo {
    display: block;
    width: 100%;
    min-width: 150px;   /* Forces the browser to reserve space */
}



.grid-reverse .intro-logo img {
    display: block;
    width: 100%;
    height: auto;
}



/* Responsive: Stack them on mobile devices */
@media (max-width: 768px) {
    .intro-grid, .grid-reverse {
        grid-template-columns: 1fr;
    }
}



.standard-text > p {
    font-size: 1.25rem !important;
    color: #16171a !important;
    font-weight: 400 !important;
}



/* The Content Wrapper inside the flex box */
.flex-content {
    flex: 2;
    min-width: 300px;
}



/* Ensure the first paragraph doesn't have extra top margin
.intro-content p:first-of-type {
    margin-top: 0;
} */




/* Force the red bar to disappear on the consortium page */
.standard-text h2 {
    border-left: none !important;
    padding-left: 0 !important;
}



/* Remove the inherited red sidebar from all h3 headings in this section */
.standard-text h3 {
    border-left: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}



/* Now, redefine your custom heading style clearly */
.section-heading {
    font-size: 2rem;
    font-weight: 600;
    color: #1a3a5a;
    margin-top: 45px;
    margin-bottom: 15px;
    display: block;   /* Ensures it sits on its own line */
    border-bottom: 1px solid #eee;   /* Horizontal line instead of vertical */
    padding-bottom: 8px;
}



/* Targeted kill of the orphaned red line attached to the H2 */
.standard-text h2::after, 
.standard-text h2::before {
    display: none !important;
    content: none !important;
    border: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
}



.btn-normal {
    display: inline-block;
    margin-top: 25px;   /* auto pushes button to the bottom of the box */
    padding: 10px 30px;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    background: #2323ff !important;
    background-color: #2323ff !important;
    animation: none !important;
    color: #ffffff !important;
    text-decoration: none !important;
    text-transform: uppercase;
    border: none;
    border-radius: 12px;   /* 12px radius for modern rounded look, or 50px for a pill-shaped look */
    transition: all 0.3s ease;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);   /* creates the shadow around the button box */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);   /* makes the text inside the button sharp */
    cursor: pointer;
}



.btn-normal:hover {
    background-color: #28a745 !important;   /* hover state: background fills with #28a745 green */
    border: none;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(244, 0, 0, 0.2);
}



/* Container spacing */
.benefits-section {
    margin: 30px 0;
    color: #16171a;
}

/* Main list styling */
.benefits-list {
    list-style-type: disc;
    padding-left: 25px;
    margin-top: 30px;
}

.benefits-list > li {
    font-size: 1.25rem;
    margin-bottom: 15px;
    font-weight: 400;
}

/* Sub-list (the dashed items) */
.benefits-list ul {
    list-style-type: none; /* We will use a manual dash */
    padding-left: 20px;
    margin-top: 5px;
}

.benefits-list ul li {
    font-size: 1.15rem;
    position: relative;
    margin-bottom: 5px;
}

/* Adds the dash before sub-items */
.benefits-list ul li::before {
    content: "-";
    position: absolute;
    left: -15px;
    color: #e74c3c; /* Matches your red accent color */
    font-weight: bold;
}



/* Create the side-by-side layout */
.about-flex-container {
    display: flex;
    align-items: flex-start; /* Aligns items to the top */
    gap: 40px;               /* Space between text and image */
    margin: 30px 0;
}

/* Ensure the text takes up more room than the image */
.benefits-text {
    flex: 2;
}

/* Style the image container */
.benefits-image {
    flex: 1;
    min-width: 300px;        /* Prevents the image from getting too tiny */
    margin-top: 60px;
}

.benefits-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;      /* Matches your logo/button style */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Adds a professional lift */
}

  
  
.benefits-image {
        width: 100%;
        order: -1;   /* Optional: puts image ABOVE text on mobile */
    }
}