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

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

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

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

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

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

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

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

/* ========== 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;
}

/* ==================== Business Card =================== */
.business-card {
    max-width: 576px !important;
}

/* ========================== Hero Component ========================== */

.user-hero {
	width: 100%;
}

/* ========== Hero Component > Banner ========== */

.user-hero-banner {
    margin-top: 15%;
}

.user-hero-banner-container {
    position: relative;
	width: 100%;
    background-color: var(--tertiary-bg);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
    margin-top: -12%;
    padding-bottom: 50%;
}

/**
 * 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;
}

/* ========== Hero Component > Profile Pic & Agency Logo ========== */

.user-hero-images-container {
    height: 100px;
    width: 100%;
}

.user-hero-images-container:first-child {
    margin-top: 70px;
}

.user-hero-images .row {
    height: 100%
}

.user-hero-images .row .col {
    height: 100%;
}

.profile-pic-container {
    height: 136px;
    width: 100%;
}

img {
	display: block;
	height: auto;
	width: auto;
	object-fit: contain;
}

.profile-pic {
	object-fit: cover;
	border-radius: 50%;
	height: 136px;
	width: 136px;
    border: solid var(--secondary-bg) 2px;
    position: relative;
    bottom: 40%;
}

.company-logo-container {
    width: 160px;
    height: 80px;
}

.company-logo {
    max-height: 80px;
    max-width: 160px
}

/* ========== Hero Continer > User Information ========== */

.user-hero-info-container {
    width: 100%;
}

.user-hero-info-container .name {
    font-weight: 700;
    font-size: 24px;
    line-height: 36px;
}

.user-hero-info-container .agency {
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 20px;
}

/* ===== Hero Container > User Information > Role */

.user-hero-info-container .role {
    margin-bottom: 20px;
}

.user-hero-info-container .role .title {
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
}

.user-hero-info-container .role .department {
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
}

.user-hero-info-container .role .division {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
}

.user-hero-info-container .role .role-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* ===== Hero Container > User Information > Preview Contact Banner ===== */
.user-hero-info-container .preview-contact-banner {
    display: none;
    flex-direction: row;
    column-gap: 9px;
    padding: 9px;
    margin-bottom: 9px;
    background-color: #EDF8FF;
    border-radius: 8px;
}

.user-hero-info-container .preview-contact-banner p {
    font-size: 14px;
    line-height: 20px;
    color: #376EEE !important;
}

.user-hero-info-container .preview-contact-banner p strong {
    font-weight: 700;
}

.user-hero-info-container .preview-contact-banner svg path {
    fill: #376EEE !important;
}

/* ===== Hero Container > User Information > Save Contact Button ===== */

.user-hero-info-container .save-contact-button {
    height: 48px;
    width: 100%;
    margin-top: 8px;
    margin-bottom: 24px;
}

.user-hero-info-container .save-contact-button a {
    background-color: var(--button-color);
    height: 100%;
    width: 100%;
    border-radius: 25px;
}

.user-hero-info-container .save-contact-button a button {
    color: var(--button-font-color);
    background-color: transparent;
    border-color: transparent;
    height: 100%;
    width: 100%;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}

/* ========================== Contact Information Component ========================== */

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

/* ========== Contact Info Header ========== */

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

.contact-info-container-header svg {
    height: 16px;
    width: 15px;
    position: relative;
    top: 1.5px;
}

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

/* =========== Contact Info ========== */

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

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

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

/* ==================== 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;
}

/* ==================== Footer ===================== */
footer {
    height: 20px;
    width: 100%;
}