/* =========================
   CONTACT HERO
========================= */
.contact-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    color: var(--white-color);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-hero-img-mobile {
    width: 100%;
}

.contact-hero::before {
    content: '';
    display: block;
    position: absolute;
    background: var(--cc-bg-color);
    width: 100%;
    height: 100%;
    opacity: .25;
}

.contact-hero .overlay {
    position: absolute;
}

.contact-hero-content {
    position: relative;
}

.contact-hero-content h1 {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 64px;
    margin: 0 0 24px;
}

.contact-hero-content p {

    font-weight: 300;
    font-size: 20px;
    max-width: 848px;
    margin: 0 auto 40px;
}

.contact-hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* =========================
   GLOBAL HQ
========================= */

#contact-left-content {
    width: 85%;
}

.global-headquarters-title {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 48px;
    text-transform: capitalize;
    margin: 0 0 50px;
}

.global-headquarters-place {
    font-weight: 700;
    font-size: 24px;
}

.roadmap-card {
    margin: 0 0 100px;
    max-width: 375px;
}

.info-block {
    display: flex;
    gap: 14px;
    margin: 0 0 12px;
}

.info-block a:hover {
    color: var(--yellow-color);
}

.info-block span {
    display: inline-block;
}

.roadmap-card-headingtitle {
    font-weight: 300;
    font-size: 18px;
    word-break: break-word;
    text-decoration: none;
}

/* =========================
   SOCIAL CONNECT
========================= */
.social-connect-title {
    font-weight: 700;
    font-size: 24px;
}

.social-icon {
    width: 37px;
    height: 37px;
    border: 1px solid var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
}

.social-icon i {
    font-size: 12px;
}

/* =========================
   JOIN TEAM CARD
========================= */
.join-team-card {
    padding: 25px;
    background: var(--light-gold-color);
    color: var(--black-color);
    margin: 75px 0 0;
    max-width: 425px;
}

.join-team-heading {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 48px;
    margin: 0;
    max-width: 90%;
}

.join-team-description {

    font-weight: 300;
    font-size: 16px;
    padding: 24px 0 32px;
}

.join-team-btn,
.join-team-btn:hover,
.join-team-btn:focus {
    background: var(--black-color);
    font-weight: 500;
    font-size: 20px;
    color: var(--white-color);
    display: flex;
    justify-content: center;
    padding: 12px;
    text-decoration: none;
}

html .page-template .cog-form,
:root:root:root:root:root .page-template .cog-form {
    max-width: none;
    border: none !important;
    background: transparent;
    padding: 0;
}

.page-template input[type="text"],
.page-template input[type="email"],
.page-template input[type="url"],
.page-template input[type="password"],
.page-template input[type="search"],
.page-template input[type="number"],
.page-template input[type="tel"],
.page-template input[type="range"],
.page-template input[type="date"],
.page-template input[type="month"],
.page-template input[type="week"],
.page-template input[type="time"],
.page-template input[type="datetime"],
.page-template input[type="datetime-local"],
.page-template input[type="color"],
.page-template textarea,
.page-template select {
    height: 70px;
}


:root:root:root:root:root .page-template .cog-row .cog-col label {
    display: none;
}

html .cog-row .cog-col:not(td),
:root:root:root:root:root .cog-row .cog-col:not(td) {
    flex: 1;
}

:root:root:root:root:root .page-template .cog-row .cog-col label {
    display: none;
}

.contact-form-script {
    width: 100%;
    display: flex;
    justify-self: flex-end;
}

.contact-form-script form {
    width: 100%;
}

.social-icons a {
    padding: 8px;
    border: 1px solid var(--white-color);
    border-radius: 100%;
    font-size: 16px;
    background: transparent;
    color: var(--white-color);
    transition: all 0.3s ease-in;
}

.social-icons a:hover {
    background: var(--white-color);
    color: var(--black-color);
}

/* Contact Cognito Form CSS END*/

/* =========================
   1200px – 1500px
========================= */
@media (min-width: 1200px) and (max-width: 1500px) {
    .global-headquarters-title {
        font-size: 40px;
    }

    .global-headquarters-place {
        font-size: 20px;
    }

    .roadmap-card-headingtitle {
        font-size: 16px;
    }

    .join-team-heading {
        font-size: 44px;
    }
}

/* =========================
   <= 1399px
========================= */
@media (max-width: 1399px) {
    .contact-hero-content h1 {
        font-size: 40px;
        margin-bottom: 14px;
    }

    .contact-hero-content p {
        font-size: 14px;
        max-width: 75%;
        margin-bottom: 30px;
    }

    .contact-hero-buttons a {
        padding: 10px 20px;
        font-size: 14px;
        width: auto;
    }

    .page-template input[type="text"],
    .page-template input[type="email"],
    .page-template input[type="url"],
    .page-template input[type="password"],
    .page-template input[type="search"],
    .page-template input[type="number"],
    .page-template input[type="tel"],
    .page-template input[type="range"],
    .page-template input[type="date"],
    .page-template input[type="month"],
    .page-template input[type="week"],
    .page-template input[type="time"],
    .page-template input[type="datetime"],
    .page-template input[type="datetime-local"],
    .page-template input[type="color"],
    .page-template textarea,
    .page-template select {
        height: 50px;
    }



    .global-headquarters-title {
        font-size: 32px;
        margin-bottom: 40px;
    }

    .global-headquarters-place {
        font-size: 16px;
    }

    .roadmap-card-headingtitle {
        font-size: 14px;
    }

    .roadmap-card {
        margin: 0 0px 50px 0;
        max-width: 300px;
    }

    .join-team-heading {
        font-size: 36px;
    }

    .join-team-btn,
    .join-team-btn:hover,
    .join-team-btn:focus {
        font-size: 16px;
    }

    .social-connect-title {
        font-size: 18px;
    }

    .join-team-card {
        margin: 50px 0 0;
        max-width: 300px;
    }

    .join-team-description {
        padding: 14px 0 24px;
        font-size: 11px;
    }

    :root:root:root:root:root .page form.cog-cognito h1 {
        font-size: 36px;
        margin: 0 0 45px;
    }

    html .page-template [data-old-safari] .cog-row .cog-col:not(td),
    :root:root:root:root:root .page-template [data-old-safari] .cog-row .cog-col:not(td),
    html .cog-page>.cog-row>.cog-col,
    :root:root:root:root:root .cog-page>.cog-row>.cog-col {
        margin: 0 0 30px;
    }
}

/* =========================
   <= 991px
========================= */
@media (max-width: 991px) {
    .contact-hero-content h1 {
        font-size: 36px;
        margin-bottom: 14px;
    }

    .contact-hero-content p {
        font-size: 14px;
        max-width: 55%;
        margin-bottom: 20px;
    }

    .contact-hero-buttons a {
        padding: 10px 20px;
    }

    .global-headquarters-title {
        font-size: 24px;
    }

    .global-headquarters-place {
        font-size: 16px;
        margin: 0 0 24px;
    }

    :root:root:root:root:root .page form.cog-cognito h1 {
        font-size: 30px;
        margin: 30px 0;
    }


    .roadmap-card-headingtitle {
        font-size: 12px;
    }

    .roadmap-card {
        margin: 0 20px 30px 0;
    }

    .join-team-heading {
        max-width: 250px;
        font-size: 24px;
    }

    .join-team-btn,
    .join-team-btn:hover,
    .join-team-btn:focus {}

    .social-connect-title {
        font-size: 14px;
    }

    .join-team-card {
        max-width: fit-content;
        margin: 30px 0 60px;
    }

    .join-team-description {
        padding: 14px 0 24px;
    }

    .info-block i {
        font-size: 12px;
    }

    .social-icon {
        width: 27px;
        height: 27px;
    }

    .cog-heading {
        font-size: 30px;
        margin: 0;
    }

    html .page-template .cog-body:not(:first-child),
    :root:root:root:root:root .page-template .cog-body:not(:first-child) {
        margin: 20px 0 0;
    }

    button.el-button.cog-button--has-status.cog-button--primary.cog-button--navigation.cog-button--submit.el-button--default.cog-button {
        font-size: 16px;
        margin: 0;
    }

    .page-template input[type="text"],
    .page-template input[type="email"],
    .page-template input[type="url"],
    .page-template input[type="password"],
    .page-template input[type="search"],
    .page-template input[type="number"],
    .page-template input[type="tel"],
    .page-template input[type="range"],
    .page-template input[type="date"],
    .page-template input[type="month"],
    .page-template input[type="week"],
    .page-template input[type="time"],
    .page-template input[type="datetime"],
    .page-template input[type="datetime-local"],
    .page-template input[type="color"],
    .page-template textarea,
    .page-template select {
        height: 40px;
    }
}

/* =========================
   <= 767px
========================= */
@media (max-width: 767px) {
    .contact-hero-content h1 {
        margin-bottom: 10px;
    }

    .contact-hero-content p {
        max-width: 90%;
    }

    .roadmap-card-headingtitle {
        font-size: 12px;
    }

    .roadmap-card {
        margin: 0 20px 40px 0;
    }

    .join-team-heading {
        max-width: 250px;
        font-size: 36px;
    }

    .join-team-btn,
    .join-team-btn:hover,
    .join-team-btn:focus {}

    .social-connect-title {
        font-size: 24px;
    }

    .join-team-card {
        max-width: fit-content;
        margin: 30px 0 60px;
    }

    .join-team-description {
        padding: 14px 0 24px;
    }

    .info-block i {
        font-size: 12px;
    }

    .social-icon {
        width: 27px;
        height: 27px;
    }

    .cog-heading {
        font-size: 30px;
        margin: 0;
    }


}