/*
 Theme Name:     Ocean
 Theme URI:      https://oceanwp.org/
 Author:         pixeltypen / Tobias Bals
 Author URI:     https://pixeltypen.de
 Template:       oceanwp
 Version:        1.0.0
*/

/* Ab hier kannst du deine CSS-Anpassungen eintragen
------------------------------------------------------- */

/* General Settings */

/* Adjust Custom Colors here */
:root {
    --primary: #885839;
    --black: #111517;
    --beige-grey: #edebe9;
    --font-stack: "proxima-nova", "Montserrat", Arial, sans-serif !important;
}

/* Fonts */

@font-face {
    font-family: "Roboto";
    src: url("./fonts/Roboto-Black.woff2") format("woff2"),
        url("./fonts/Roboto-Black.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("./fonts/Roboto-BoldItalic.woff2") format("woff2"),
        url("./fonts/Roboto-BoldItalic.woff") format("woff");
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("./fonts/Roboto-BlackItalic.woff2") format("woff2"),
        url("./fonts/Roboto-BlackItalic.woff") format("woff");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("./fonts/Roboto-Light.woff2") format("woff2"),
        url("./fonts/Roboto-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("./fonts/Roboto-Italic.woff2") format("woff2"),
        url("./fonts/Roboto-Italic.woff") format("woff");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("./fonts/Roboto-Bold.woff2") format("woff2"),
        url("./fonts/Roboto-Bold.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("./fonts/Roboto-LightItalic.woff2") format("woff2"),
        url("./fonts/Roboto-LightItalic.woff") format("woff");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("./fonts/Roboto-Medium.woff2") format("woff2"),
        url("./fonts/Roboto-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("./fonts/Roboto-MediumItalic.woff2") format("woff2"),
        url("./fonts/Roboto-MediumItalic.woff") format("woff");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("./fonts/Roboto-Regular.woff2") format("woff2"),
        url("./fonts/Roboto-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("./fonts/Roboto-Thin.woff2") format("woff2"),
        url("./fonts/Roboto-Thin.woff") format("woff");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("./fonts/Roboto-ThinItalic.woff2") format("woff2"),
        url("./fonts/Roboto-ThinItalic.woff") format("woff");
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("fonts/Montserrat-Black.woff2") format("woff2"),
        url("fonts/Montserrat-Black.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("fonts/Montserrat-Bold.woff2") format("woff2"),
        url("fonts/Montserrat-Bold.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("fonts/Montserrat-BlackItalic.woff2") format("woff2"),
        url("fonts/Montserrat-BlackItalic.woff") format("woff");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("fonts/Montserrat-ExtraLight.woff2") format("woff2"),
        url("fonts/Montserrat-ExtraLight.woff") format("woff");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("fonts/Montserrat-LightItalic.woff2") format("woff2"),
        url("fonts/Montserrat-LightItalic.woff") format("woff");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("fonts/Montserrat-ExtraLightItalic.woff2") format("woff2"),
        url("fonts/Montserrat-ExtraLightItalic.woff") format("woff");
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("fonts/Montserrat-Medium.woff2") format("woff2"),
        url("fonts/Montserrat-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("fonts/Montserrat-ExtraBoldItalic.woff2") format("woff2"),
        url("fonts/Montserrat-ExtraBoldItalic.woff") format("woff");
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("fonts/Montserrat-Light.woff2") format("woff2"),
        url("fonts/Montserrat-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("fonts/Montserrat-ExtraBold.woff2") format("woff2"),
        url("fonts/Montserrat-ExtraBold.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("fonts/Montserrat-MediumItalic.woff2") format("woff2"),
        url("fonts/Montserrat-MediumItalic.woff") format("woff");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("fonts/Montserrat-BoldItalic.woff2") format("woff2"),
        url("fonts/Montserrat-BoldItalic.woff") format("woff");
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("fonts/Montserrat-Italic.woff2") format("woff2"),
        url("fonts/Montserrat-Italic.woff") format("woff");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("fonts/Montserrat-ThinItalic.woff2") format("woff2"),
        url("fonts/Montserrat-ThinItalic.woff") format("woff");
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("fonts/Montserrat-SemiBoldItalic.woff2") format("woff2"),
        url("fonts/Montserrat-SemiBoldItalic.woff") format("woff");
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("fonts/Montserrat-SemiBold.woff2") format("woff2"),
        url("fonts/Montserrat-SemiBold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("fonts/Montserrat-Regular.woff2") format("woff2"),
        url("fonts/Montserrat-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("fonts/Montserrat-Thin.woff2") format("woff2"),
        url("fonts/Montserrat-Thin.woff") format("woff");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* Mega Menu Popup */
.mega-menu-popup .elementor-icon {
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.mega-menu-popup .elementor-icon:hover {
    -webkit-transform: translateX(-3px);
    -ms-transform: translateX(-3px);
    transform: translateX(-3px);
}

.elementor-widget-nav-menu .elementor-nav-menu .elementor-item {
    font-family: var(--font-stack) !important;
    padding-left: 50px !important;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.elementor-widget-nav-menu .elementor-nav-menu .elementor-item:hover {
    -webkit-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
}

body .custom-header .elementor-col-50 .elementor-widget-wrap {
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    line-height: 1;
}

/* Typography */

body #wrap :is(div, span, p, li, a) {
    font-family: "proxima-nova", "Montserrat", Arial, sans-serif !important;
}

body #wrap :is(h1, h2, h3, h4, h5, h6) {
    text-transform: uppercase;
    color: var(--black);
    font-weight: 300;
    font-family: var(--font-stack);
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

body #wrap :is(h1, h2) {
    font-size: clamp(3.5rem, 2vw + 2rem, 9rem);
}

body #wrap .single-project-header h1,
body #wrap .elementor-slide-heading {
    font-size: clamp(3.5rem, 2vw + 4rem, 9rem);
    max-width: 850px;
    font-weight: 600 !important;
    line-height: 1.3;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/* Buttons */
.elementor-button-wrapper a.elementor-button-link,
.elementor-field-group button.elementor-button {
    width: 100%;
    text-align: left;
    color: #000 !important;
    text-transform: uppercase;
    font-weight: 600;
    padding: 16px !important;
    border-radius: 0;
    font-size: 1em !important;
}

.elementor-button-wrapper span.elementor-button-content-wrapper,
.elementor-field-group button.elementor-button > span {
    display: inline-block;
}

.elementor-button-wrapper span.elementor-button-content-wrapper:after,
.elementor-field-group button.elementor-button > span:after {
    content: "";
    background: url("/wp-content/uploads/2022/07/arrow-right-black.svg")
        no-repeat;
    background-size: contain;
    height: 12px;
    width: 60px;
    display: inline-block;
    -webkit-transform: translateY(1px);
    -ms-transform: translateY(1px);
    transform: translateY(1px);
    margin-left: 10px;
}

.section-intro-text .elementor-widget-container {
    font-size: 1.3em;
    text-align: right;
    max-width: 80%;
    margin-left: auto;
}

/* Image Box */
.elementor-widget-image-box h3.elementor-image-box-title {
    font-size: 1.5em;
    font-weight: 400 !important;
    margin-bottom: 5px !important;
}

/* Kontakt */

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

input::placeholder,
textarea::placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

body #wrap form :is(input, textarea) {
    border-radius: 0;
    border: 0;
    border-bottom: 2px solid var(--primary);
    background-color: transparent;
    color: #000;
    padding: 10px 0;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

/* Kontakt */
.contact-link {
    color: #000;
    display: inline-block;
    position: fixed;
    bottom: 0;
    right: 100px;
    z-index: 10;
    text-transform: uppercase;
    font-weight: 600;
    border-left: 95px solid var(--primary);
    border-top: 10px solid transparent;
    border-bottom: 50px solid var(--primary);
    height: 0;
    width: 0;
    padding: 0;
}

.contact-link:hover {
    color: #000;
    border-bottom-width: 60px;
}

.contact-link span {
    position: absolute;
    translate: -110% 30%;
}

/* Back to Top Button */
a#scroll-top {
    background: url("/wp-content/themes/Divi-Child-Theme/assets/icon-backtotop.svg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 40px;
    height: 52px;
    bottom: 85px;
}

a#scroll-top:hover {
    background-color: transparent;
}

a#scroll-top i {
    display: none !important;
}

/* Responsive */

@media screen and (max-width: 1024px) {
    body .mega-menu-popup {
        overflow-x: hidden;
    }

    .mega-menu-popup .elementor-nav-menu--dropdown {
        display: none !important;
    }

    .mega-menu-popup .elementor-nav-menu--main {
        display: block !important;
    }
}

@media screen and (max-width: 980px) {
    /* Start Leistungen */
    .section-start-leistungen .elementor-image-box-wrapper {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important;
        gap: 30px;
    }

    /* Custom Header */
    body .custom-header .elementor-container {
        -ms-flex-wrap: initial;
        flex-wrap: initial;
    }

    body .custom-header .elementor-container .elementor-col-50:first-child {
        width: 50px;
    }
}

@media screen and (max-width: 768px) {
    /* Start Leistungen */
    .section-start-leistungen .elementor-image-box-wrapper {
        max-width: 450px;
        margin: 0 auto;
    }

    .section-start-leistungen
        .elementor-image-box-wrapper
        .elementor-image-box-img
        img {
        max-width: 40px !important;
        max-height: 40px !important;
    }

    body #wrap .single-project-header h1,
    body #wrap .elementor-slide-heading {
        font-size: calc(100vw / 13);
    }
}

@media screen and (max-width: 594px) {
    /* Custom Header */
    body .custom-header .elementor-container.elementor-column-gap-default {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    body
        .custom-header
        .elementor-col-50:last-child
        .elementor-widget-container {
        text-align: center;
    }

    body #scroll-top {
        right: 20px;
        bottom: 20px;
        width: 40px;
        height: 40px;
        line-height: 40px;
    }
}