:root {
    --white: rgba(255, 255, 255, 1);
    --dark-grey: rgba(42, 42, 46, 1);
    --grey: rgba(87, 87, 91, 1);
    --tosca: rgba(4, 140, 170, 1);
    --fw400: 400;
    --fw500: 500;
    --fw600: 600;
    --fw700: 700;
    --nunito: "Nunito Sans", Sans-serif;
}

/* Color */
.white {color: var(--white)!important}
.dark {color: var(--dark-grey)!important}
.grey {color: var(--grey)}
.bg-transparent {color: transparent}

/* Typography */
.fw400 {font-weight: var(--fw400)}
.fw500 {font-weight: var(--fw500)}
.fw600 {font-weight: var(--fw600)}
.fw700 {font-weight: var(--fw700)}
.fw800 {font-weight: var(--fw800)}
.lg-text {font-size: 32px!important;;line-height: 42px!important}
.md-text {font-size: 28px!important;;line-height: 36px!important}
.md-text-m {font-size: 24px!important;;line-height: 32px!important}
.sm-text {font-size: 20px!important;line-height: 28px!important}
.xs-text {font-size: 16px!important;;line-height: 24px!important}
.xxs-text {font-size: 14px!important;;line-height: 20px!important}

/* Margins */
.my-24 {margin: 1.5rem 0!important}
.mb-20 {margin-bottom: 1.25rem!important}
.mb-24 {margin-bottom: 1.5rem!important}
.mb-32 {margin-bottom: 2rem!important}
.mb-42 {margin-bottom: 2.625rem!important}
.mb-56 {margin-bottom: 5.5rem!important}
.mt-24 {margin-top: 1.5rem!important}
.mt-32 {margin-top: 2rem!important}
.mt-56 {margin-top: 3.5rem!important}
.mt-100 {margin-top: 6.5rem!important}

/* Border Radius */
.border-radius-12 {border-radius: .75rem}
.border-radius-24 {border-radius: 1.5rem}

/* Buttons */
.white-btn {
    background: var(--white);
    color: var(--dark-grey);
    padding: 12px 50px;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
}
.btn-with-border {border: 1px solid rgba(188, 188, 189, 1)}
.btn-with-shadow {box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05)}
.btn-with-shadow-1 {box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1)}

/* Width & Height */
.custom-width {width: calc(100% - 50px)}
.custom-height {min-height: 90px}

/* Shadows */
.shadow-element {box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.2)}

/* Columns */
.full-column {flex: 0 0 calc(100% - 16px)}
.column-third {flex: 0 0 calc(33.333% - 16px)}
.column-fourth {flex: 0 0 calc(25% - 16px)}
.column-half {flex: 0 0 calc(50% - 16px)}
.custom-column-half {flex: 0 0 calc(40% - 16px)}

.result-type-wrapper {gap: 30px}
.result-type-wrapper .result-items img {width: 150px}

.personal-test-wrapper {
    gap: 24px;
    padding: 6rem 2.75rem;
}
.personal-test-wrapper .block-text,
.personal-test-wrapper .block-image {
    position: relative;
}
.personal-test-wrapper .block-text {
    flex: 1 1 40%;
}
.personal-test-wrapper .block-text .bottom-left {
    bottom: -190px;
    left: -40px;
}
.personal-test-wrapper .block-image {
    flex: 1 1 35%;
}
.personal-test-wrapper .block-image .top-left {
    top: -85px;
    left: -140px;
}
.personal-tests .top-right {
    top: 110px;
    right: 0;
}
.personal-test-wrapper .block-text h4,
.personal-test-wrapper .block-text p {
    color: var(--dark-grey);
}
.featured-test-wrapper,
.other-test-wrapper {
    margin-top: 1.5rem;
    gap: 24px;
}
.featured-test-wrapper .test-items {
    min-height: 82px;
}
.featured-test-wrapper .test-items,
.other-test-wrapper .test-items {
    position: relative;
    background-color: var(--white);
    padding: 16px 24px;
    gap: 24px;
}
.featured-test-wrapper .test-items svg {
    position: absolute;
    right: 23px;
}
.other-test-wrapper .test-items svg {
    position: relative;
}

/* Banner Test */
.banner-test {
    overflow: inherit;
    padding: 145px 0 40px;
}
.banner-test-wrapper {
    position: relative;
    padding: 3rem;
    height: 294px;
}
.banner-test-wrapper .block-image {
    position: absolute;
    right: -1px;
    bottom: 0;
    width: calc(60% - -22px)
}

/* Accordion */
.accordion .card {
    border-radius: .75rem;
}
.accordion .card .card-header {
    background-color: transparent;
}
.accordion .card .card-header [aria-expanded='true'] {
    color: var(--tosca);
    text-decoration: none;
}
.accordion .card .card-header [aria-expanded='false'] {
    color: var(--dark-grey);
    text-decoration: none;
}
.accordion .card .card-body {
    padding: .5rem 1.75rem 1rem;
}

/* Responsive */
@media (max-width: 767px) {
    .hero-banner .caption {
        top: 100px;
        position: relative;
    }
    .featured-test-wrapper .test-items {min-height: auto}
    .featured-test-wrapper .test-items, 
    .other-test-wrapper .test-items {
        padding: 16px;
        gap: 10px;
    }
    .other-test-wrapper .test-items svg {
        position: absolute;
        right: 23px;
    }
    .personal-test-wrapper {padding: 1.5rem}
    .personal-test-wrapper .block-text .bottom-left,
    .personal-test-wrapper .block-image .top-left,
    .personal-test-wrapper .block-text p > br,
    .banner-test-wrapper .block-text h2 > br,
    .caption p > br {
        display: none;
    }
    .result-items .block-text {
        min-height: calc(140px - 16px);
        word-break: break-word;
    }
    .test-items .icon img {width: 32px}
    .test-items a {
        position: absolute;
        right: 22px;
    }
    .banner-test {padding: 20px 0 40px}
    .banner-test-wrapper {
        padding: 0;
        height: 100%;
    }
    .banner-test-wrapper .block-image {
        position: relative;
        top: 0;
        right: auto;
        margin-top: -70px;
        width: 100%;
    }
    .banner-test-wrapper .block-text {
        height: 250px;
    }
    .banner-test-wrapper .block-text a {
        padding: 12px 16px;
    }
    .cs-h-200 {
        min-height: calc(200px - 16px)!important
    }
}