@import url('https://fonts.googleapis.com/css?family=Montaga');
@import url('https://fonts.googleapis.com/css?family=Cabin Condensed');
@import url('https://fonts.googleapis.com/css?family=Lato');

/* Base Styling */
:root {
    --body-base: 1rem;   /* Body text is typically around 16px (1rem). */
    --h1-base: 2.3rem;   /* H1 usually has a prominent size, around 40px. */
    --h2-base: 1.6rem;     /* H2 is generally slightly smaller than H1, around 32px. */
    --h3-base: 1.4rem;  /* H3 is typically 28px, creating good hierarchy with H2. */
    --h4-base: 1.2rem;   /* H4 is usually around 24px. */
    --p-base: 1rem;      /* Paragraph text remains at 16px for readability. */
}


.site_wrapper_class {
    container-type: inline-size;
    container-name: main-container;
    max-width: 100%;
    height: auto;
    margin: auto;
    text-align: center;
    background-color: #ffffff;
}

* {
    font-family: 'Lato';
    font-weight: 300;
    -webkit-box-shadow: none;
    box-shadow: none;
}



html,
body {
    padding: 0;
    width: 100%;
    margin: auto;
    text-align: center;
    --scrollbarbg: #ff9179;
    --thumbbg: #018489;
    overscroll-behavior: none;
    touch-action: pan-y;
    overflow-x: hidden;
}

body,
.body {
    font-size: var(--body-base);
}

p,
.p {
    font-size: var(--p-base);
}

h1,
.h1 {
    font-size: var(--h1-base);
text-align:left;

color:#1e3a5f;
letter-spacing:2px;
}

h2,
.h2 {
    font-size: var(--h2-base);
text-align:left;
letter-spacing:2px;
}

h3,
.h3 {
    font-size: var(--h3-base);
text-align:left;
}

h4,
.h4 {
    font-size: var(--h4-base);
text-align:left;
}





/* Text and Font Styling */
p {
    text-align: left;
}

ul li {
    padding: 0.3125rem; /* 5px equivalent */
}

.reflist {
    text-align: left;
}

a:link,
a:visited,
a:hover,
a:active {
    letter-spacing: 1px;
    text-decoration: none;
}

a:visited {
    color: #A5301E;

}

a:link {
    color: #A5301E;

}

a:hover {
    color: #ff9179;
}

a:active {
    color: #A5301E;
}



/* Miscellaneous Styling */
.slogan {
    padding-top: 3%;
}


/* Unordered List */
.unorderedlist {
    list-style-position: outside;
    padding-left: 2.5rem;          /* Space for the bullet */
    text-align: left;
}

.unorderedlist li {
    padding-left: 1.25rem;
    margin-bottom: 0.625rem;       /* Space between items */
    position: relative;            /* Relative positioning for custom styles */
}


label {
    font-size: 0.9rem;
    color: #ffffff;
    margin-bottom: 0.5rem;
    display: block;
    text-align: center;
}

.outputdata_default {
    width: 80%;
    padding-top: 0%;
    margin: auto;
border:0px solid yellow;
}

.outputdata_default h2 {
    padding-bottom: 0;
}

.centre-image {
    padding-top: 2%;
    padding-bottom: 2%;
}

.centre-image img {
    width: 80%;
    border-radius: 10px;
}

.fade-in h2 {
    padding-top: 3%;
    font-size: 0.95rem;
}

.infographics {
    padding-top: 2%;
    font-size: 120%;
}

.infographicstop {
    padding-top: 2%;
    font-size: 140%;
}

.pcentre {
    text-align: center;
}

/* Button Styling */
.single-page-btn {
    font-size: 0.9rem;
    padding: 0.75rem 1.125rem; /* 12px 18px equivalent */
    background-color: #1e3a5f;
    color: white !important;
    text-align: left;
    border: 0.0625rem solid #ffffff;
    border-radius: 0.5rem; /* 8px equivalent */
    text-transform: uppercase;
    white-space: nowrap;
    box-sizing: border-box;
    cursor: pointer;
margin-bottom:2rem;
}

.single-page-btn:hover {
    background-color: #706a9b;
    color: #1e3a5f;
}

.single-page-btn:active {
    background-color: #c98021;
    color: white !important;
    border: 0.125rem solid #ffffff;
}

html {
    scroll-behavior: smooth;
}

.left-align {
    text-align: left !important;
    padding: 1.5rem 0 1.5rem 0; /* 40px equivalent */
}
.middle-align{
    text-align: center;
margin:auto;
width:20rem !important;
}

.ref-tab
{
width:50%;
margin:auto !important;
text-align:center !important;
border:3px solid #706a9b;
padding:1rem;
border-radius:1rem;

}