/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme
Template: betheme
Version: 2.1.0
*/

/* fonts */

/* lexend-regular - latin */
@font-face {
    font-display: swap;
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/lexend-v24-latin-regular.woff2') format('woff2');
}

/* lexend-700 - latin */
@font-face {
    font-display: swap;
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/lexend-v24-latin-700.woff2') format('woff2');
}

/* general settings */

:root {
    --pearl-silver: #e4eeee;
    --glacier-sky: #85D6CB;
    --midnight-petrol: #0D494E;
    --obsidian-black: #101921;
    --inferno-red: #f26749;
    --white: #FFFFFF;

    --h1-font-size: 2.25rem;
    --h2-font-size: 2rem;
    --h3-font-size: 1.875rem;
    --h4-font-size: 1.125rem;

    --p-font-size: 1.125rem;
    --preheader-font-size: 1.125rem;

    --btn-font-size: 1rem;
}

@media (min-width:768px) {
    :root {
        --h1-font-size: 2.75rem;
        --h2-font-size: 2.5rem;
        --h3-font-size: 2rem;
        --h4-font-size: 1.25rem;

        --p-font-size: 1.25rem;
        --preheader-font-size: 1.5rem;

        --btn-font-size: 1.25rem;
    }
}

@media (min-width:1200px) {
    :root {
        --h1-font-size: 5rem;
        --h2-font-size: 3.75rem;
        --h3-font-size: 2.5rem;
        --h4-font-size: 1.6875rem;

        --p-font-size: 1.25rem;
        --preheader-font-size: 1.875rem;

        --btn-font-size: 1.5rem;
    }
}

::selection {
    background: var(--inferno-red);
    color: var(--white);
}

#Content {
    overflow: hidden;
}

.the_content_wrapper {
    margin-bottom: 0 !important;
}

.wpb_content_element+.spacer {
    margin-top: 0 !important;
}

.wpb_wrapper>div {
    margin-bottom: 0 !important;
}

@media (max-width: 1239px) {
    .no-content-padding #Content {
        padding-top: 91px !important;
    }
}

@media (max-width: 768px) {
    .no-content-padding #Content {
        padding-top: 81px !important;
    }
}

.opus-sm-links {
    font-size: 20px;
    font-weight: 700;
}

.opus-sm-link {
    border-radius: 10px 0px 0 10px;
}

.opus-sm-link__text {
    color: var(--white);
}

/* typo */

h1,
.h1 {
    font-size: var(--h1-font-size);
    line-height: 1.125;
    color: var(--obsidian-black);
    font-weight: 700;
}

h2,
.h2 {
    font-size: var(--h2-font-size);
    line-height: 1.325;
    color: var(--obsidian-black);
    font-weight: 400;
}

h3,
.h3 {
    font-size: var(--h3-font-size);
    line-height: 1.325;
    color: var(--obsidian-black);
    font-weight: 700;
}

h4,
.h4 {
    font-size: var(--h4-font-size);
    line-height: 1.35;
    color: var(--obsidian-black);
    font-weight: 700;
}

p,
#Content li {
    font-size: var(--p-font-size);
    line-height: 1.5;
    color: var(--obsidian-black);
}

#Content .text--white li::marker {
    color: white;
}

.preheader {
    font-size: var(--preheader-font-size);
    line-height: 1.2;
    font-weight: 700;
    color: var(--glacier-sky);
    margin-bottom: 20px !important;
}

#Content a:not(.btn-default, .btn-custom1, .btn-custom2, .btn-jump-mark) {
    color: var(--inferno-red);
    text-decoration: none;
}

#Content a:not(.btn-default, .btn-custom1, .btn-custom2, .btn-jump-mark):hover {
    text-decoration: underline;
}

/* buttons */

.btn-default {
    background-color: transparent;
    color: var(--obsidian-black);
    border: 2px solid var(--obsidian-black);
    border-radius: 33px;
    padding: 17px 32px;
    font-size: var(--btn-font-size);
    line-height: 1.25;
}

.btn-default:hover,
.btn-default:focus {
    background-color: var(--glacier-sky);
    border: 2px solid var(--glacier-sky);
    color: var(--obsidian-black);
    opacity: 1;
}

.btn-custom1 {
    background-color: var(--glacier-sky);
    color: var(--obsidian-black);
    border: 2px solid var(--glacier-sky);
    border-radius: 33px;
    padding: 17px 32px;
    font-size: var(--btn-font-size);
    line-height: 1.25;
}

.btn-custom1:hover,
.btn-custom1:focus {
    color: var(--obsidian-black);
    opacity: 1;
}

.btn-custom2 {
    background-color: transparent;
    font-weight: 700;
    color: var(--obsidian-black);
    font-size: var(--btn-font-size);
    line-height: 1.25;
    border: 0;
    padding: 0;
    display: inline-flex;
    gap: 20px;
    transition: gap 0.3s ease;
}

.btn-custom2::before {
    content: '';
    display: inline-block;
    width: 45px;
    height: 23px;
    background-image: url(img/yuucar-smart-car-service-pfeil-obsidian.svg);
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
    align-self: center;
}

.btn-custom2:hover:before {
    background-image: url(img/yuucar-smart-car-service-pfeil-glacier.svg);
}

.btn-custom2:hover,
.btn-custom2:focus {
    color: var(--glacier-sky);
    opacity: 1;
    gap: 24px;
}

/* row background dark */

.bg-style--dark h1,
.bg-style--dark .h1,
.bg-style--dark h2,
.bg-style--dark .h2,
.bg-style--dark h3,
.bg-style--dark .h3,
.bg-style--dark h4,
.bg-style--dark .h4,
.bg-style--dark p,
#Content .bg-style--dark li {
    color: var(--white);
}

.bg-style--dark .preheader {
    color: var(--glacier-sky);
}

.bg-style--dark .btn-default {
    color: var(--white);
    border-color: var(--white);
}

.bg-style--dark .btn-default:hover {
    color: var(--obsidian-black);
    border-color: var(--glacier-sky);
}

.bg-style--dark .btn-custom2 {
    color: var(--white);
}

.bg-style--dark .btn-custom2::before {
    background-image: url(img/yuucar-smart-car-service-pfeil-weiss.svg);
}

.bg-style--dark .btn-custom2:hover:before {
    background-image: url(img/yuucar-smart-car-service-pfeil-glacier.svg);
}

.bg-style--dark .btn-custom2:hover,
.bg-style--dark .btn-custom2:focus {
    color: var(--glacier-sky);
}

/* header */

#Top_bar {
    position: fixed !important;
    top: 15px !important;
}

@media (max-width: 1239px) {
    #Top_bar {
        top: 0px !important;
        background: var(--midnight-petrol) !important;
    }
}

#Header .top_bar_left {
    background-color: var(--midnight-petrol) !important;
    padding: 0 20px;
    border-radius: 100px;
}

#Top_bar .menu>li>a,
#Top_bar .menu>li.current_page_ancestor>a {
    color: var(--white);
}

#Header .container {
    padding-left: var(--mfn-column-gap-left) !important;
    padding-right: var(--mfn-column-gap-right) !important;
}

#Top_bar .menu>li.current-menu-item>a,
#Top_bar .menu>li.hover>a {
    color: var(--glacier-sky);
}

#Top_bar #logo img.svg {
    width: 210px;
}

#Top_bar .menu>li>a span:not(.description) {
    font-size: 20px;
}

#Top_bar .menu li ul li {
    background-color: var(--midnight-petrol);
    width: 220px;
}

#Top_bar .menu>li ul li a {
    color: var(--white);
    border-bottom: 0;
}

#Top_bar .menu li>ul {
    background: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
    border-radius: 20px;
    overflow: hidden;
    border-top: 2px solid transparent;
}

#Top_bar .menu>li ul li a:hover,
#Top_bar .menu>li ul li.hover>a {
    color: var(--glacier-sky);
    background: none;
}

.icon-cancel-fine::before {
    font-weight: 900;
}

#Side_slide .close-wrapper a.close {
    margin: 13px 9px 0 0;
}

@media (max-width: 1239px) {
    #Header .top_bar_left {
        padding: 0;
    }

    #Top_bar .logo {
        margin: 0;
    }
}

@media (max-width: 767px) {
    #Header .top_bar_left {
        padding: 0 20px;
    }

    #Top_bar .logo {
        width: fit-content !important;
    }

    #Top_bar .logo #logo {
        margin: 10px 5px !important;
    }
}

.icon-menu-fine::before {
    color: var(--white);
}

/* side slide */

#Side_slide {
    background-color: var(--midnight-petrol);
    border-color: var(--midnight-petrol);
}

#Side_slide .menu>li>a span:not(.description) {
    font-size: 20px;
    color: var(--white);
    font-weight: 700;
}

#Side_slide li.menu-item>a:not(.menu-toggle) {
    padding: 20px 5px 20px 20px !important;
}

#Side_slide #menu ul li {
    border-top: 0;
}

#Side_slide #menu>ul:last-child>li:last-child {
    border-bottom: 0;
}

#Side_slide #menu ul li.submenu .menu-toggle {
    font-size: 40px;
    opacity: 1;
    color: white !important;
    top: 6px;
}

#Top_bar a.responsive-menu-toggle i {
    font-size: 2.2rem;
    line-height: 2.2rem;
}

[class^="icon-"]:before {
    font-size: 2.2rem;
    line-height: 2.2rem;
    width: 2.2rem;
}

#Side_slide .close-wrapper a.close {
    color: var(--white);
}

#Side_slide #menu ul li ul {
    background: none !important;
}

#Side_slide .sub-menu li.menu-item {
    padding: 10px 5px 20px 60px !important;
}

#Side_slide .sub-menu li.menu-item a {
    padding: 0 !important;
    color: white;
    font-size: 16px;
}

/* footer */

#Footer {
    background-color: var(--obsidian-black);
}

#Footer .footer_action {
    background: var(--glacier-sky);
}

.mfn-footer a:not(.button, .icon_bar, .mfn-btn, .mfn-option-btn) {
    color: var(--obsidian-black);
    align-self: center;
}

.mfn-footer a:not(.button, .icon_bar, .mfn-btn, .mfn-option-btn):hover {
    color: var(--white);
    background: var(--obsidian-black);
}

.footer_action .mcb-column-inner {
    margin-bottom: 60px !important;
    padding-top: 60px !important;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.footer_action .mcb-column-inner .h3 {
    text-align: left;
}

.copyright {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.copyright .social-icons {
    display: flex;
    gap: 20px;
}

.copyright .social-icons i {
    background: var(--white);
    display: flex;
    border-radius: 30px;
    padding: 10px;
}

.copyright .social-icons i::before {
    font-size: 27px;
}

.copyright a {
    color: var(--white) !important;
}

.legal-links {
    display: flex;
    gap: 20px;
}

#Footer .widgets_wrapper p,
#Footer .widgets_wrapper a {
    color: var(--white);
}

#Footer .footer_copy .one {
    margin-bottom: 25px;
    padding-top: 25px;
}

.mfn-footer .footer_copy {
    border-top: 0;
}

.footer_copy>.container {
    border-top: 2px solid var(--white);
}

.widgets_wrapper>.container {
    display: grid;
    grid-template-columns: 1fr;
}

.one-fourth.column,
.four.columns {
    width: 100%;
}

#Footer .widgets_wrapper {
    padding: 100px 0 60px 0;
}

@media (min-width: 768px) {
    .widgets_wrapper>.container {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

@media (min-width: 992px) {
    .footer_action .mcb-column-inner {
        grid-template-columns: 2fr 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .copyright {
        flex-direction: column;
        gap: 25px;
        align-items: flex-start;
    }

    .footer_copy .mcb-column-inner {
        margin-bottom: 0;
    }

    #Footer .widgets_wrapper {
        padding: 30px 0;
    }

    #Footer .footer_copy .one {
        margin-bottom: 100px;
    }
}

/* yuucar hero */

.yuucar-hero {
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 992px) {
    .yuucar-hero {
        grid-template-columns: 1fr 1fr;
    }
}

.yuucar-hero .b2b,
.yuucar-hero .b2c {
    width: 100%;
    position: relative;
}

.yuucar-hero img {
    display: block;
    width: 100%;
    height: auto;
}

.yuucar-hero .overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 350px;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
}

.yuucar-hero .overlay .h1 {
    margin-bottom: 20px;
}

.yuucar-hero .overlay p {
    margin-bottom: 60px;
}

.yuucar-hero .overlay--text {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.yuucar-hero .btn-default {
    color: var(--white);
    border-color: var(--white);
}

.yuucar-hero .btn-default:hover {
    border-color: var(--glacier-sky);
}

.yuucar-hero .b2b .bg-image::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--obsidian-black);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.yuucar-hero .b2c .bg-image::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--glacier-sky);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.yuucar-hero .b2b:hover .bg-image::before,
.yuucar-hero .b2c:hover .bg-image::before {
    opacity: 0.8;
}

.yuucar-hero .b2b:hover .overlay--text,
.yuucar-hero .b2c:hover .overlay--text {
    opacity: 1;
}

.yuucar-hero .overlay-pattern {
    position: absolute;
    top: 100%;
    z-index: 1;
    height: 100px;
    object-fit: cover;
    pointer-events: none;
}

.wpb_wrapper>.yuucar-hero {
    margin-bottom: 75px !important;
}

@media (min-width: 992px) {
    .yuucar-hero .overlay-pattern {
        top: calc(100% - 75px);
        height: 150px;
        object-fit: unset;
    }

    .yuucar-hero .overlay {
        width: 450px;
    }
}

/* swiper settings */

.swiper-scrollbar {
    height: 4px;
    background: var(--obsidian-black);
    border-radius: 0;
}

.swiper-wrapper {
    padding-bottom: 30px;
}

.swiper--pb {
    padding-bottom: 0;
}

.swiper-scrollbar-drag {
    height: 12px;
    top: -4px;
    background: var(--glacier-sky);
    border-radius: 0;
}

.swiper .teaser-card {
    padding-bottom: 0;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.swiper .teaser-card img {
    display: block;
}

.swiper .teaser-card::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--glacier-sky);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.swiper .teaser-card:hover::before {
    opacity: 0.8;
}

.swiper .teaser-card__content {
    padding: 0;
    position: absolute;
    bottom: 40px;
    left: 40px;
    z-index: 2;
}

.swiper .teaser-card__image {
    padding-bottom: 0;
}

.swiper .teaser-card__content p {
    color: var(--white);
    transition: color 0.3s ease;
}

.swiper .teaser-card:hover .teaser-card__content p {
    color: var(--obsidian-black);
}

.swiper .teaser-icon-circle {
    display: none !important;
}

/* animated text */

.animated-text {
    color: var(--white);
    font-size: var(--h2-font-size);
    line-height: 1.325;
    font-weight: 700;
    position: relative;
}

.typed-cursor {
    color: var(--white);
    font-size: var(--h2-font-size);
    line-height: 1.325;
}

/* two animated images */

.two-images__50vw {
    background: linear-gradient(180deg, var(--obsidian-black) 0%, var(--obsidian-black) 50%, var(--pearl-silver) 50%, var(--pearl-silver) 100%);
}

.two-images__50vw img {
    width: 50vw;
}

.two-images__50vw .vc_column-inner {
    padding: 0;
    padding-top: 0 !important;
}

/* teaser cards */

.teaser-card {
    background-color: var(--white);
    border-radius: 20px;
    padding-bottom: 40px;
    transition: background-color 0.3s ease;
}

.teaser-card:hover {
    background-color: var(--glacier-sky);
}

.teaser-card__image {
    padding-bottom: 80px;
}

.teaser-card__content {
    padding: 0 40px;
}

.teaser-icon-circle {
    width: 70px;
}

/* jump marks */

.btn-jump-mark a {
    text-decoration: none;
}

.btn-jump-mark {
    font-size: var(--btn-font-size);
    background-color: var(--midnight-petrol);
    color: var(--white);
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    border-radius: 20px;
    margin-bottom: 5px;
    padding: 40px;
    font-weight: 700;
    transition: background-color 0.3s ease, color 0.3s ease;
    justify-content: space-between;
    min-height: 245px;
}

.btn-jump-mark::after {
    content: url(img/yuucar-smart-car-service-pfeil-kreis-weiss.svg);
    display: block;
    width: 70px;
    height: 70px;
    transform: rotate(90deg);
    transition: content 0.3s ease;
}

.btn-jump-mark:hover {
    background-color: var(--glacier-sky);
    color: var(--obsidian-black);
    text-decoration: none;
}

.btn-jump-mark:hover::after {
    content: url(img/yuucar-smart-car-service-pfeil-kreis-obsidian.svg);
}

@media (max-width: 767px) {
    .btn-jump-mark {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        flex-direction: row;
        min-height: unset;
    }

    .btn-jump-mark::after {
        margin-top: 0;
        width: 40px;
        height: 40px;
    }
}

@media (min-width: 768px) {
    .btn-jump-mark {
        margin-bottom: 30px;
    }
}

@media (min-width: 1200px) {
    .btn-jump-mark {
        margin-bottom: 0px;
    }
}

/* faq */

.wpb_wrapper .faq {
    margin-bottom: 4px !important;
}

.faq .question::before {
    display: none;
}

.faq .question>.title {
    padding: 40px 105px 40px 50px;
    line-height: 1.5;
}

.faq .question>.answer {
    padding: 0 140px 40px 50px;
}

@media (max-width: 991px) {
    .faq .question>.title {
        padding: 40px 105px 40px 30px;
    }

    .faq .question>.answer {
        padding: 0 30px 40px 30px;
    }
}

.wpb_wrapper .faq .question .title>.acc-icon-plus,
.wpb_wrapper .faq .question .title>.acc-icon-minus {
    left: auto;
    right: 20px;
    width: 70px;
    height: 70px;
    top: 50%;
    transform: translateY(-50%);
}

.faq p,
.faq .title {
    color: var(--white) !important;
}

.faq .title {
    font-size: var(--h4-font-size) !important;
    font-weight: 700 !important;
}

.faq .question::after {
    display: none !important;
}

.faq .question {
    background-color: var(--midnight-petrol);
    border-radius: 20px;
}

.faq .question>.title>.acc-icon-plus:before {
    content: url(img/yuucar-smart-car-service-kreis-plus.svg);
    width: 70px;
    height: 70px;
}

.faq .question .title>.acc-icon-minus:before {
    content: url(img/yuucar-smart-car-service-kreis-minus.svg);
    width: 70px;
    height: 70px;
}

@media (max-width: 991px) {

    .wpb_wrapper .faq .question .title>.acc-icon-plus,
    .wpb_wrapper .faq .question .title>.acc-icon-minus,
    .faq .question>.title>.acc-icon-plus:before,
    .faq .question .title>.acc-icon-minus:before {
        width: 40px;
        height: 40px;
    }
}

/* akkordion */

.vc_tta-color-grey.vc_tta-style-flat .vc_tta-panel .vc_tta-panel-heading {
    background-color: transparent !important;
}

.vc_tta-title-text {
    font-size: var(--h2-font-size) !important;
}

.vc_tta-panel-title>a {
    padding: 40px 0 !important;
    color: white !important;
}

.vc_tta-panel-body {
    padding: 0 0 40px 0 !important;
}

.vc_tta.vc_tta-accordion .vc_tta-controls-icon-position-right .vc_tta-controls-icon {
    right: 0 !important;
    width: 60px;
    height: 60px;
}

@media (max-width: 767px) {
    .vc_tta.vc_tta-accordion .vc_tta-controls-icon-position-right .vc_tta-controls-icon {
        width: 30px;
        height: 30px;
    }

    .vc_tta-title-text {
        font-size: var(--h4-font-size) !important;
        font-weight: 700;
        max-width: 270px;
        display: block;
    }

    .vc_tta-panel-title>a {
        padding: 30px 0 !important;
    }
}

.vc_tta .vc_tta-controls-icon.vc_tta-controls-icon-plus:before {
    border-width: 3px 0 0 !important;
    border-color: var(--white) !important;
}

.vc_tta .vc_tta-controls-icon.vc_tta-controls-icon-plus:after {
    border-width: 0 0 0 3px !important;
    border-color: var(--white) !important;
}

.vc_tta .vc_tta-panel {
    border-top: 3px solid var(--glacier-sky) !important;
}

.vc_tta .vc_tta-panel:last-child {
    border-bottom: 3px solid var(--glacier-sky) !important;
}

/* contact form */

.wpcf7-radio {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: fit-content;
    column-gap: 100px;
    row-gap: 10px;
    padding: 20px 0 100px 0;
}

.wpcf7-list-item,
.wpcf7-list-item input,
.wpcf7-list-item label {
    margin: 0 !important;
}

.cf-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.wpcf7 input,
.wpcf7 textarea {
    background: transparent !important;
    border-radius: 0;
    border: 0;
    border-bottom: 2px solid white;
    padding: 10px 0;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
    color: var(--white);
    font-size: var(--p-font-size);
}

.wpcf7-radio label,
.wpcf7-checkbox label {
    display: flex;
    align-items: center;
    gap: 14px;
}

.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] {
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 100px;
    border: 2px solid var(--glacier-sky);
    background-color: white !important;
    vertical-align: sub;
}

.wpcf7 input[type="checkbox"]:checked,
.wpcf7 input[type="radio"]:checked {
    background-color: var(--glacier-sky) !important;
}

.wpcf7 .btn-default {
    margin-top: 30px;
}

@media (max-width: 767px) {
    .wpcf7-radio {
        grid-template-columns: 1fr;
        padding: 20px 0;
    }

    .cf-col {
        grid-template-columns: 1fr;
    }
}

.wpcf7-response-output {
    color: var(--white) !important;
}

/* hover box icon */

.hover_box_wrapper {
    text-align: left;
    margin-top: 30px;
}

.hover_box .hover_box_wrapper .hidden_photo {
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    opacity: 0;
    transform: translate(0, -50%);
}

/* customer logos */

.customer-logos img {
    padding-bottom: 30px;
}

/* teaser karten ohne icon */

.teaser-card--no-icon .teaser-card__content img {
    display: none;
}

@media only screen and (max-width: 1239px) {
    a[href^=tel]:not(.action_button):not(.button) {
        color: var(--obsidian-black);
    }

    a[href^=tel]:not(.action_button):not(.button):hover {
        color: var(--white);
    }
}