@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');
@font-face {
    font-family: "Gilroy";
    font-display: swap;
    font-weight: 400;
    src: url(../fonts/Gilroy/Regular.woff) format('woff2'), url(../fonts/Gilroy/Regular.woff) format('woff'), url(../fonts/Gilroy/Regular.ttf) format('TrueType'), url(../fonts/Gilroy/Regular.eot) format('eot');
}

@font-face {
    font-family: "Gilroy";
    font-display: swap;
    font-weight: 600;
    src: url(../fonts/Gilroy/SemiBold.woff) format('woff2'), url(../fonts/Gilroy/Black.woff) format('woff'), url(../fonts/Gilroy/SemiBold.ttf) format('TrueType'), url(../fonts/Gilroy/SemiBold.eot) format('eot');
}

@font-face {
    font-family: "Gilroy";
    font-display: swap;
    font-weight: 700;
    src: url(../fonts/Gilroy/Bold.woff) format('woff2'), url(../fonts/Gilroy/Bold.woff) format('woff'), url(../fonts/Gilroy/Bold.ttf) format('TrueType'), url(../fonts/Gilroy/Bold.eot) format('eot');
}

@font-face {
    font-family: "Gilroy";
    font-display: swap;
    font-weight: 900;
    src: url(../fonts/Gilroy/Black.woff) format('woff2'), url(../fonts/Gilroy/Black.woff) format('woff'), url(../fonts/Gilroy/Black.ttf) format('TrueType'), url(../fonts//Gilroy/Black.eot) format('eot');
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root {
    --bs-primary: rgba(79, 149, 255, 1);
    --bs-primary-hovered: rgb(43, 125, 249);
    --bs-blue: 79, 149, 255;
    --bs-sky-blue: 184, 212, 255;
    --bs-danger: rgba(243, 112, 90, 1);
    --bs-danger-hovered: rgb(241, 91, 65);
    --bs-red: 243, 112, 90;
    --bs-green: 102, 198, 185;
    --bs-gray-dark: 52, 52, 52;
    --bs-gray: 128, 129, 146;
    --bs-gray-light: 229, 229, 229;
    --bs-gray-200: 248, 248, 248;
    --bs-gray-100: 203, 203, 203;
    --bs-white: 255, 255, 255;
    --bs-font-sans-serif: 'Montserrat', sans-serif;
}

body {
    color: rgba(var(--bs-gray-dark), 1);
}

a {
    transition: 0.2s all ease;
    text-decoration: none;
}

b,
strong {
    font-weight: 700;
}

.container {
    max-width: 100%;
    --bs-gutter-x: 30px;
}

.text-primary {
    color: rgba(var(--bs-blue), 1) !important;
}

.text-danger {
    color: rgba(var(--bs-red), 1) !important;
}

.text-success {
    color: rgba(var(--bs-green), 1) !important;
}

.header-light {
    box-shadow: 0px 4px 10px 0px rgba(var(--bs-sky-blue), 0.36);
}

.signup-header {
    height: 110px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.signup-header h1 {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: 5px;
    margin: 0;
}

.btn-primary {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
}

.btn:hover,
.btn:focus,
.btn:active:focus {
    box-shadow: none;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    border-color: var(--bs-primary-hovered);
    background-color: var(--bs-primary-hovered);
}

.btn-danger {
    border-color: var(--bs-danger);
    background-color: var(--bs-danger);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    border-color: var(--bs-danger-hovered);
    background-color: var(--bs-danger-hovered);
}

.btn {
    position: relative;
    overflow: hidden;
}

.btn::after {
    background: #fff;
    content: "";
    height: 155px;
    left: -75px;
    opacity: 0.2;
    position: absolute;
    top: -50px;
    transform: rotate(35deg);
    transition: all 0s cubic-bezier(0.19, 1, 0.22, 1);
    width: 40px;
    z-index: 1;
}

.btn:hover::after {
    left: 120%;
    transition: all 2s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-lg {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 16px 18px;
    height: 60px;
}

.btn-sm {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-transform: uppercase;
    padding: 13px 21px;
    height: 50px;
}

.intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40px;
    position: relative;
    padding-left: 40px;
    padding-right: 40px;
    text-align: center;
    min-height: calc(100vh - 110px);
}

.intro h2 {
    font-size: 36px;
    line-height: 54px;
    font-weight: 700;
    max-width: 382px;
}

.intro p {
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
    max-width: 654px;
}

.border-line {
    border-right: 1px solid rgba(var(--bs-gray-light), 1);
}

.c-nav-tabs {
    border-bottom: 4px solid rgba(var(--bs-sky-blue), 0.36);
    margin-bottom: 30px;
}

.c-nav-tabs .nav-link {
    border-radius: 0px;
    border-width: 0 0 2px 0;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: -3px;
    text-align: left;
    color: rgba(var(--bs-gray-dark), 1);
    padding-left: 0;
    margin-right: 54px;
    background-color: transparent;
}

.c-nav-tabs .nav-link.active {
    border-color: var(--bs-primary);
}

.form-label {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 500;
}

.form-control {
    background-color: rgba(248, 248, 248, 1);
    height: 60px;
    font-weight: 500;
    font-size: 16px;
    padding: 20px;
    border: 1px solid rgba(var(--bs-gray-light), 1);
    transition: 0.2s all ease;
}

.form-control:focus {
    outline: 0 none;
    box-shadow: none;
    border-color: rgba(var(--bs-gray-light), 1);
}

.login {
    max-width: 520px;
    width: 100%;
    margin-top: 98px;
    margin-left: 141px;
}

.form-check {
    padding-left: 0;
}

.form-check>input {
    display: none;
}

.form-check>label {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    font-size: 14px;
}

.form-check>label::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    left: 0;
    border-radius: 3px;
    border: 1px solid rgba(var(--bs-gray-light), 1);
    background-image: url(../images/tick.svg);
    background-repeat: no-repeat;
    background-position: center center;
    top: -2px;
}

.form-check>input:checked+label::before {
    border-color: rgba(var(--bs-blue), 1);
    background-color: rgba(var(--bs-blue), 1);
}

.c-link-muted {
    color: rgba(var(--bs-gray), 1);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.c-link-muted:hover {
    color: rgba(var(--bs-gray), 1);
}

.terms {
    font-size: 14px;
    line-height: 21px;
}

.terms>a {
    color: var(--bs-primary);
    text-decoration: none;
}

.terms>a:hover {
    color: var(--bs-primary-hovered);
    text-decoration: none;
}

.intro img {
    position: relative;
    left: 40px;
}

.gx-30 {
    --bs-gutter-x: 30px;
}

.about-header {
    display: flex;
    align-items: center;
    height: 100px;
}

.about-header ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.about-header ul a {
    font-size: 16px;
    color: rgba(var(--bs-gray-dark), 1);
    text-transform: uppercase;
    font-weight: 700;
    margin-right: 50px;
    position: relative;
    line-height: 24px;
    padding: 7px 0;
}

.about-header ul li.active a {
    color: var(--bs-danger);
}

.about-header ul a::after {
    transition: 0.3s width ease;
    height: 2px;
    background-color: rgba(var(--bs-gray-dark), 1);
    border-radius: 2px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    content: '';
    width: 0;
}

.about-header ul a:hover::after {
    width: 100%;
}

.about-header ul li.active>a::after {
    width: 100%;
    background-color: var(--bs-danger);
}

.btn-home-outline {
    border: 2px solid var(--bs-primary);
    color: var(--bs-primary);
    width: 189px;
    height: 50px;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    justify-content: center;
    background-color: rgba(var(--bs-white), 1);
    border-radius: 4px;
    margin-left: 10px;
    transition: 0.15s all ease;
}

.btn-home-outline svg {
    margin-right: 10px;
    transition: 0.15s all ease;
}

.btn-home-outline:hover {
    background-color: var(--bs-primary);
    color: rgba(var(--bs-white), 1);
}

.btn-home-outline:hover svg path {
    fill: rgba(var(--bs-white), 1);
}

.about-hero-section {
    height: 547px;
    background-image: url(../images/world-map.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    overflow: hidden;
}

.team-hero-section {
    height: 547px;
    overflow: hidden;
}

.about-hero-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-top: 20px;
}

.about-hero-image {
    margin-left: 25px;
}

.about-hero-content h6 {
    font-size: 24px;
    color: var(--bs-primary);
    font-weight: 600;
    margin-bottom: 0px;
    font-family: "Gilroy";
    letter-spacing: 0.02px;
}

.about-hero-content h1 {
    font-size: 46px;
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: 25px;
    font-family: "Gilroy";
}

.about-hero-content p {
    line-height: 24px;
    font-size: 16px;
    margin-bottom: 35px;
    font-weight: 400;
    font-family: "Gilroy";
}

.about-text-section {
    padding: 40px 0;
    background-color: rgba(var(--bs-gray-200), 1);
}

.about-text-section p {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
}

.about-text-section p:not(:last-child) {
    margin-bottom: 25px;
}

.banner-section {
    padding: 70px 0 122px;
}

.banner-block {
    height: 435px;
    background-image: url(../images/banner-bg-left.png);
    background-size: auto 100%;
    display: flex;
    justify-content: flex-start;
    background-position: left;
    border-radius: 20px;
}

.banner-content {
    padding-right: 63px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 510px;
}

.banner-content>img {
    margin-bottom: 13px;
    width: 100%;
    max-width: 464px;
}

.banner-content h4 {
    font-weight: 700;
    font-size: 21px;
    line-height: 31px;
    color: var(--bs-primary);
    margin-bottom: 17px;
    font-weight: 700;
    font-family: "Gilroy";
}

.banner-content p {
    font-size: 18px;
    line-height: 27px;
    font-weight: 400;
    font-family: "Gilroy";
    margin-bottom: 22px;
}

.follow-us {
    width: 225px;
    border-top: 1px solid #6D6D6D;
    padding-top: 34px;
}

.follow-us h6 {
    margin-bottom: 14px;
    font-size: 15px;
    line-height: 22px;
}

footer {
    background-color: rgba(var(--bs-gray-dark), 1);
}

.footer-block {
    color: rgba(var(--bs-gray-100), 1);
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 24px;
    padding: 27px 0;
    justify-content: space-between;
}

.footer-block p {
    margin-bottom: 0;
}

.footer-block ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    list-style: none;
}

.footer-block ul a {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0 5px;
    color: rgba(var(--bs-gray-100), 1);
}

.menu-toggler {
    background-color: transparent;
    border: none;
}

.offcanvas-end {
    width: 340px;
    border-left: none;
    box-shadow: 0px 0px 20px rgba(184, 212, 255, 0.36);
}

.offcanvas+.modal-backdrop.show {
    opacity: 0;
}

.offcanvas-header {
    padding: 20px;
    margin-top: 20px;
}

.btn-home {
    display: flex;
    align-items: center;
    font-weight: 700;
    color: var(--bs-primary);
    font-size: 14px;
}

.btn-home:hover {
    color: var(--bs-primary);
}

.btn-home svg {
    margin-right: 10px;
}

.btn-cancel {
    padding: 0;
    background-color: transparent;
    border: none;
}

.offcanvas-body {
    padding: 20px;
}

.offcanvas-menu {
    padding: 0;
    margin: 0;
    list-style: none;
}

.offcanvas-menu a {
    color: rgba(var(--bs-gray-dark), 1);
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
    margin-bottom: 10px;
    display: block;
}

.offcanvas-menu li.active a {
    color: var(--bs-danger);
}

.team-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 30px 30px 30px;
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    border-radius: 10px;
    min-height: 443px;
}

.team-avatar {
    margin-bottom: 18px;
}

.team-unit h3 {
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 0;
}

.team-unit h5 {
    font-size: 16px;
    line-height: 24px;
    color: var(--bs-primary);
    margin-bottom: 15px;
}

.team-unit p {
    font-size: 14px;
    line-height: 21px;
    margin-bottom: 15px;
}

.member-location {
    display: flex;
    text-align: left;
    align-items: center;
    font-size: 14px;
    justify-content: center;
    margin-top: auto;
}

.member-location img {
    margin-right: 8px;
}

.our-team-section {
    padding: 0 0 30px;
}

.team-hero-image {
    margin-top: 64px;
    position: relative;
    left: -73px;
}

.loader-wrapper {
    position: fixed;
    inset: 0px;
    background-color: rgba(255, 255, 255, 1);
    z-index: 6000;
    visibility: visible;
    opacity: 1;
    transition: 0.3s all ease;
}

body.loaded .loader-wrapper {
    visibility: hidden;
    opacity: 0;
}

.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.25);
    background-color: rgb(0, 181, 214);
    transform-origin: center center 0px;
    animation: 10s ease 0s infinite normal none running color-loader, 2s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s infinite normal none running scale-loader;
    z-index: 6001;
}

@keyframes scale-loader {
    0% {
        -webkit-transform: translate(-50%, -50%) scale(0.25);
        -ms-transform: translate(-50%, -50%) scale(0.25);
        transform: translate(-50%, -50%) scale(0.25);
    }
    50% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        -ms-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) scale(0.25);
        -ms-transform: translate(-50%, -50%) scale(0.25);
        transform: translate(-50%, -50%) scale(0.25);
    }
}

@keyframes color-loader {
    0% {
        background-color: rgba(var(--bs-blue), 1);
    }
    20% {
        background-color: rgba(var(--bs-red), 1);
    }
    40% {
        background-color: rgba(var(--bs-green), 1);
    }
    60% {
        background-color: rgba(var(--bs-blue), 1);
    }
    80% {
        background-color: rgba(var(--bs-red), 1);
    }
    100% {
        background-color: rgba(var(--bs-green), 1);
    }
}

@media (max-width: 1699px) {
    .login {
        margin-left: 81px;
    }
}

@media (min-width: 1200px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1200px;
        --bs-gutter-x: 30px;
    }
}

@media (max-width: 1399px) {
    .login {
        margin-left: 30px;
    }
}

@media (max-width: 1199px) {
    .login {
        margin-left: 0;
        padding-left: 20px;
        padding-right: 20px;
    }
    .intro {
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .intro img {
        position: relative;
        left: 33px;
    }
    .about-hero-image {
        margin-left: 0;
    }
    .about-header ul a {
        margin-right: 20px;
    }
    .team-hero-image {
        left: -183px;
    }
}

@media (max-width: 991px) {
    .login {
        margin-left: auto;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 20px;
        margin-right: auto;
        margin-top: 50px;
    }
    .border-line {
        border-top: 1px solid rgba(var(--bs-gray-light), 1);
        border-right: none;
        margin-top: 50px;
    }
    .intro {
        padding-top: 50px;
        padding-left: 0px;
        padding-right: 0px;
    }
    .signup-header h1 {
        font-size: 38px;
    }
    .about-hero-section {
        height: auto;
        background-position: bottom;
    }
    .about-hero-content {
        padding-top: 50px;
        align-items: center;
        text-align: center;
    }
    .about-hero-image {
        text-align: center;
    }
    .about-hero-image img {
        max-width: 100%;
    }
    .banner-section {
        padding: 70px 0;
    }
    .banner-block {
        background-image: none;
        height: auto;
    }
    .banner-content {
        max-width: 100%;
        padding-right: 0;
        align-items: center;
        text-align: center;
    }
    .footer-block {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-block ul {
        margin-top: 10px;
    }
    .team-hero-section {
        height: auto;
    }
    .team-hero-image {
        text-align: center;
        left: 0;
        margin: 40px 0;
    }
    .team-hero-image img {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .signup-header h1 {
        font-size: 22px;
    }
    .intro img {
        left: 0;
    }
    .container {
        --bs-gutter-x: 15px;
    }
    .about-header {
        height: 80px;
    }
    .signup-header {
        height: 80px;
    }
    .logo img {
        width: 168px;
    }
    .offcanvas-header {
        margin-top: 10px;
    }
    .team-hero-image {
        text-align: center;
        left: 0;
        margin: 80px 0;
    }
    .team-hero-image img {
        max-width: 100%;
        transform: scale(1.5);
    }
    .logo {
        margin-left: 5px;
    }
}

@media (max-width: 575px) {
    .c-nav-tabs .nav-link {
        margin-right: 21px;
    }
    .signup-header {
        justify-content: center;
    }
    .login {
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 20px;
        margin-top: 40px;
    }
    .intro {
        padding-left: 10px;
        padding-right: 10px;
    }
}