/* ==================== Global Variables ==================== */
html, body {
	width: 100%;
    height: 100%;
}

:root {
    --font-icon-color: #000000 !important;
    --primary-bg: rgba(238 ,238 , 238, 0.5) !important;
    --secondary-bg: #ffffff !important;
    --tertiary-bg: #d0d0d0 !important;
    --button-color: #376eee !important;
    --button-font-color: white !important;
}

body {
    background-color: var(--primary-bg) !important;
}

p {
    margin-bottom: 0 !important; 
    font-family: 'Open Sans', sans-serif;
    color: var(--font-icon-color) !important;
}

a {
    color: var(--font-icon-color) !important;
    text-decoration: unset !important;
}

.left-margin {
    margin-left: 6px;
    margin-right: 6px;
}

svg path {
    fill: var(--font-icon-color) !important;
}

.container-bg {
    background-color: var(--secondary-bg) !important;
}

/**
 * Requires absolute, top 0 and left 0 for image to stay
 * within container.
 */
 .banner {
    object-fit: cover;
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* ========== Social Media ========== */

.social-media .social-media-icons {
    margin-top: 12px;
}

.social-media .social-media-icon {
    margin-right: 16px;
    margin-bottom: 10px;
}

.social-media svg {
    width: 48px;
    height: 48px;
}

/* ==================== Agency Information Component ==================== */

.agency-info-container {
    margin-top: 16px;
    width: 100%;
}

.agency-info-container-header {
    margin-top: 16px;
    margin-bottom: 24px;
}

.agency-info-container-header svg {
    height: 19px;
    width: 19px;
}

.agency-info-container-header p {
    margin-left: 6px;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.1px;
}

.agency-info {
    margin-bottom: 20px;
}

.agency-info .header {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.15px;
}

.agency-info .info {
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
}

.agency-achievements .agency-achievements-icons {
    margin-top: 12px;
}

.agency-achievements .agency-achievement-container {
    height: 60px;
    width: 60px;
    background-color: var(--tertiary-bg);
    border-radius: 8px;
    margin-right: 16px;
}