@charset "utf-8";

:root {
    --content-box-width: 1500px;
    --col-sidebar-width: 300px;
    --faint-border: 1px solid #e0e0e0;
    --sidebar-bg: #fcfcfc;
}

.content-container {
    width: 100%;
    max-width: var(--content-box-width);
    margin: 40px auto;
    padding: 0 30px;
    box-sizing: border-box;
    flex-shrink: 0;
}



.content-box-2col {
    display: grid;
    grid-template-columns: 82% 18%;
    width: 100%;
    background: #ffffff;
    border: var(--faint-border);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 30px;
    align-items: stretch;
}



/* --- Left Side Styling --- */
.main-text {
    padding: 40px;
    background-color: #ffffff;
}



/* Custom spacing for buttons inside main-text */
.main-text .btn-primary {
    margin-top: 50px;
    display: inline-block; /* Ensures padding and margins apply correctly */
    min-width: 200px;      /* Optional: gives the button a consistent width */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-left: 50px;
}




.content-box-2col h3 {
    font-family: 'Open Sans', sans-serif;
    color: #16171a;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 25px;
}

.content-box-2col h4 {
    font-family: 'Open Sans', sans-serif;
    color: #16171a;
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 40px;
    margin-bottom: 20px;
}

.content-box-2col p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    line-height: 2;
    color: #16171a;
    margin-bottom: 20px;
}





/* --- Right Side (Sidebar) Styling --- */
.sidebar-column {
    padding: 10px;
    background-color: #f9f9f9;
    border-left: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
}


.side-info2 {
    background-color: #ffffff;
    padding: 20px;
    border: 1px solid #d1d1d1;
    border-left: 4px solid #2323ff;   /* Matching your blue theme as an accent */
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    width: 100%;
}


.side-info2 h3 {
    font-size: 1rem;
    text-weight: 700;
    color: #16171a;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}


.side-info2 p {
    font-size: 0.8rem;
    text-weight: 400;
    line-height: 1.6;
    color: #16171a;
    margin-bottom: 10px;
}


.side-info2 a {
    display: inline-block;
    margin-top: 10px;
    color: #16171a;
    text-decoration: underline;
    font-weight: 700;
    font-size: 0.8rem;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}


.side-info2 a:hover {
    color: #f40000;
}





.mt-1 .mt-2 .mt-3 {
    align-self: flex-start;   /* Ensures it doesn't try to 'stretch' vertically if not needed */
    width: 100%;    /* Keeps it full width of the sidebar */
}



.mt-1 { margin-top: 30px !important; }
.mt-2 { margin-top: 700px !important; }
.mt-3 { margin-top: 2300px !important; }
.mt-4 { margin-top: auto !important; }
.mt-5 { margin-top: 10px !important; }
.mt-auto { margin-top: auto; }   /* forces content to bottom */






/* Article Grid Layout */
.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.article-card {
    background: #ffffff;
    border: var(--faint-border);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.article-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

.article-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.category-tag {
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 800;
    color: #2323ff;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: block;
}

.article-card h3 {
    margin-bottom: 15px !important;
    font-size: 1.3rem !important;
}

.article-card p {
    font-size: 0.95rem;
    color: #555;
    flex-grow: 1;   /* Pushes the button to the bottom so all buttons align */
    margin-bottom: 25px;
}

/* The Button Style */
.btn-primary {
    display: inline-block;
    padding: 12px 24px;
    background-color: #2323ff;
    color: #ffffff !important; /* Force white text */
    text-decoration: none !important;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 12px;
    text-align: center;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #f40000;   /* Matches your link hover color */
    text-decoration: none !important;   /* Prevents underline shift */
    transform: none !important;        /* Forces the button to stay still */
    border: none;                       /* Ensures no extra pixels are added */
}







/* The container holding the three columns */
.content-box-3col {
    display: flex;
    align-items: stretch; /* Ensures columns are the same height */
    width: 100%;
}

/* Left Sidebar */
.content-box-3col .sidebar-column.left-sidebar {
    flex: 15%; /* Control Width here */
    background-color: #ffffff; /* Light Grey */
    padding: 20px;
}

/* Middle Column (Main Content) */
.content-box-3col .main-text {
    flex: 80%; /* Control Width here */
    background-color: #ffffff; /* White */
    padding: 20px;
}

/* Right Sidebar */
.content-box-3col .sidebar-column:not(.left-sidebar) {
    flex: 5%; /* Control Width here */
    background-color: #ffffff;     /* #e8f4fd Light Blue */
    padding: 20px;
}




.content-box-3col h1 {
    font-family: 'Open Sans', sans-serif;
    color: #2323ff;
    font-size: 6rem;
    font-weight: 700;
    margin-top: 10px;
}





/* Typography Overrides for 3-col */
.content-box-3col h3 {
    font-family: 'Open Sans', sans-serif;
    color: #2323ff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 25px;
}

.content-box-3col p {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.8;
    color: #444;
    margin-bottom: 20px;
}



.left-sidebar {
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
        order: 2; /* Moves left sidebar below main content on mobile */
    }
    
    .sidebar-column:not(.left-sidebar) {
        border-left: none;
        order: 3; /* Moves right sidebar to bottom */
    }
    
    .main-text {
        order: 1; /* Keeps main text at the top */
    }
}






.side-info3 {
    background-color: #ffffff;
    padding: 20px;
    border: none;
    width: 100%;
}



.side-info3 h1 {
    font-family: 'Open Sans', sans-serif;
    font-size: 6rem;
    text-weight: 600;
    color: #2323ff;
    margin-bottom: 15px;
}



.side-info3 h3 {
    font-size: 1rem;
    text-weight: 700;
    color: #2323ff;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}


.side-info3 p {
    font-size: 0.8rem;
    text-weight: 400;
    line-height: 1.6;
    color: #555;
    margin-bottom: 10px;
}


.side-info3 a {
    display: inline-block;
    margin-top: 10px;
    color: #2323ff;
    text-decoration: underline;
    font-weight: 700;
    font-size: 0.8rem;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}


.side-info3 a:hover {
    color: #f40000;
}





/* New 2-column Layout */
.content-box-2col-alt {
    display: flex;
    align-items: stretch;
    width: 100%;
}

/* Set Left Sidebar to 25% */
.content-box-2col-alt .sidebar-column.left-sidebar {
    flex: 0 0 20%; 
    background-color: #ffffff;
    padding: 20px;
    border-right: 1px solid #e0e0e0; /* Optional: adds a divider line */
}

/* Set Main Text to 75% */
.content-box-2col-alt .main-text {
    flex: 0 0 80%;
    background-color: #ffffff;
    padding: 40px;
}



.content-box-2col-alt .main-text h3 {
    font-family: 'Open Sans', sans-serif;
    color: #16171a;           /* Changed from blue to a dark grey */
    font-size: 1.5rem;        /* Slightly larger for the 2-col layout */
    font-weight: 800;
    line-height: 1.9;
    margin-bottom: 20px;
    letter-spacing: -0.5px;   /* Tighter heading look */
}

/* Target the Paragraphs in the second column */
.content-box-2col-alt .main-text p {
    font-family: 'Open Sans', sans-serif;
    color: #16171a;
    font-size: 1.05rem;       /* Slightly larger readability */
    font-weight: 400;
    line-height: 1.9;         /* Comfortable breathing room */
    margin-bottom: 20px;
}

/* Target the Bold text inside paragraphs specifically */
.content-box-2col-alt .main-text p strong {
    color: #16171a;           /* Keep the blue for emphasis only */
    font-weight: 700;
    margin-top: 20px;
}


.text-red {
    color: #f40000 !important;
}




.custom-underline {
    text-decoration: underline;
    text-decoration-color: #212427; /* Makes the underline match your blue theme */
    text-decoration-thickness: 2px; /* Makes it stand out more */
    text-underline-offset: 3px;    /* Adds a little gap between the word and the line */
}


.custom-underline2 {
    text-decoration: underline;
    text-decoration-color: #2323ff; /* Makes the underline match your blue theme */
    text-decoration-thickness: 2px; /* Makes it stand out more */
    text-underline-offset: 3px;    /* Adds a little gap between the word and the line */
}





/* Control the white box containing the number, pin icon or photo */
.side-info3 {
    margin-top: 30px !important;    /* Overrides the mt-4 auto setting */
    padding: 5px;
    background-color: #ffffff;
    /*border: 1px solid #d1d1d1;*/
    /*border-radius: 4px;*/
    width: 100%;
    text-align: center;
    box-sizing: border-box; /* ensures padding does not push the box out */
}


/* Style the number itself */
.side-info3 h1 {
    font-size: 4rem;
    color: #f0f0f0;             /* #2323ff Match your blue theme */
    font-weight: 800;
    margin: 0;
    line-height: 1;
}



.sidebar-caption {
    margin-top: 10px !important; 
    margin-bottom: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8rem;   /* Makes caption smaller than main text */
    color: #555;         /* Subtle grey color #16171a*/
    line-height: 1.2;
    text-align: center;
}



/* Targets the text inside the warning section */
.warning-section .main-text h3 {
    color: #f40000 !important;   /* Makes the text Red */
    font-size: 1.1rem !important;    /* Makes the text smaller (Standard is 1.5rem) */
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Ensures the sidebar box in this specific section is invisible */
.warning-section .side-info3 {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Optional: Removes the vertical divider line just for this last section */
.warning-section .sidebar-column.left-sidebar {
    border-right: none !important;
}