@charset "UTF-8";
/*
Theme Name: Neobit
Theme URI: https://www.Neobit.com
Author: Alper Balkaya
Authir URI: https://www.alperbalkaya.de
Description: Custom Bootstrap 5 theme of Avnetio.com
Requires at least: 5.0
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:
*/
/*  Theme colors
#113C80 Primary
#1E6CE6 Primary hoover
#35BE8A Secondary
#35BE8A Secondary hoover*/

/* Roboto regular */

@font-face {
    font-family: "Roboto";
    src: url("assets/fonts/Roboto/Roboto-Regular.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

/* Roboto thin */

@font-face {
    font-family: "Roboto";
    src: url("assets/fonts/Roboto/Roboto-Thin.ttf") format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap
}

/* Roboto bold */

@font-face {
    font-family: "Roboto";
    src: url("assets/fonts/Roboto/Roboto-Bold.ttf") format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

body {
    font-family: "Roboto";
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

img {
    pointer-events: none !important;
    user-select: none !important;
}

.wp-block-latest-posts__post-title {
    text-decoration: none !important;
    color: #6c757d !important;
    font-size: 1.25rem;
    font-weight: bold;
}

.wp-block-latest-posts__featured-image a,
.wp-block-latest-posts__featured-image img {
    width: 100%;
}

.shadow {
    box-shadow: 0 .1rem 1rem rgba(0, 0, 0, .15) !important;
}

.logged-in,
.logged-in .navbar {
    margin-top: 32px !important;
}

.bg-light {
    background-color: #efefef !important;
}

.navbar-brand {
    font-weight: 700;
    font-size: 2rem;
}

.navbar-brand img {
    max-height: 45px;
}

.navbar-collapse {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.nav-link {
    font-size: 1.25rem;
}

.nav-link:focus-visible {
    outline: none !important;
}

#nav-jetztkontaktieren {
    background-color: #35BE8A;
    color:#FFFFFF;
    text-align: center;
    border-radius: 5px;
    padding-left: 15px;
    padding-right: 15px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 200ms, visibility 200ms;
}

#nav-jetztkontaktieren:hover {
    background-color: #1E9170;
    color: #FFFFFF !important;
}

.sub-menu {
    padding: 0;
}

.sub-menu li {
    list-style-type: none;
    margin: 0;
}

.sub-menu li a {
    padding-left: 0 !important;
}

.megamenu .dropdown-menu {
    border: none;
    border-radius: 0;
    background-color: #fffffffa;
}

.dropdown .subtitle {
    margin-bottom: 20px;
    font-size: 30px;
    color: rgba(0, 0, 0, .55);
}

#anchor-links {
    top: 103px;
    background-color: #35BE8A;
}

#anchor-links .nav-item {
    margin: 0;
    padding: 0;
    flex-grow: 1;
    text-align: center;
}

#anchor-links .nav-link {
    color: #ffffff;
}

#anchor-links .nav-link:hover,
#anchor-links .active {
    background-color: #1E9170 !important;
    color: #ffffff !important;
}

#hero {
    padding: 0;
}

.hero-img {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("assets/img/hero.jpg");
    width: 100%;
    height: 80vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.hero-img::after {
    width: 100%;
    height: 100%;
    background: #1c1c1c;
    opacity: 0.6;
    display: block;
    content: "";
}

.hero-txt {
    position: absolute;
}

@keyframes moveHero {
    0% {
        transform: translate3d(0, -2px, 0)
    }

    to {
        transform: translate3d(0, 2px, 0)
    }
}

.cls-1 {
    fill: #ffffff;
}

#wave svg {
    vertical-align: top;
}

#wave-2 {
    transform: scaleY(-1);
}

#wave-2 .cls-1 {
    fill: #ffffff;
}

.cls-2,
.cls-3 {
    fill: none;
    stroke-miterlimit: 10;
    stroke-width: 5px;
}

.cls-2 {
    stroke: #1E6CE6;
}

.cls-3 {
    stroke: #35BE8A;
}

.cls-3 {
    stroke-dasharray: 135;
    stroke-dashoffset: 135;
    animation: dash 20s linear infinite;
}

@keyframes dash {
    to {
        stroke-dashoffset: -135;
    }
}

#motivation img {
    max-height: 350px;
    margin: auto;
}

#projekte img {
    max-height: 300px;
    margin: auto;
}

.card-call {
    max-width: 500px;
    width: 100% !important;
}

.card-call i {
    font-size: 80px;
}

.software-details>div>a:hover {
    background-color: #35BE8A !important;
}

.software-details>div>a:hover,
.software-details>div>a:hover i {
    color: #ffffff !important;
}

.software-details i {
    font-size: 60px !important;
}

.sdy-title {
    margin: 0 0 100px 0;
}

#it-dienstleistungen img,
#vorteile-individualsoftware img {
    max-height: 300px;
}

.img-150 {
    max-height: 200px !important;
}

.consulting-details .title-main {
    margin: 50px 0;
}

.consulting-details-box img {
    margin: auto;
}

.wpcf7-response-output {
    display: none !important;
}

.pcda-item {
    height: 150px;
    padding: 25px 50px !important;
}

.pcda-cylce {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pcda-cylce svg {
    width: 350px;
}

.pcda-box-1,
.pcda-box-2,
.pcda-box-3,
.pcda-box-4 {
    animation-name: cycle-change-bg;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

.pcda-box-2 {
    animation-delay: 2.5s;
}

.pcda-box-3 {
    animation-delay: 7.5s;
}

.pcda-box-4 {
    animation-delay: 5s;
}

@keyframes cycle-change-bg {
    0% {
        fill: #35BE8A;
    }

    24% {
        fill: #35BE8A
    }

    25% {
        fill: #113C80;
    }
}

.fs-12 {
    font-size: 12px !important;
}

.bs-50 {
    border-radius: 50% 0 0 0;
}

.bt-50 {
    border-radius: 0 50% 0 0;
}

.be-50 {
    border-radius: 0 0 0 50%;
}

.bb-50 {
    border-radius: 0 0 50% 0;
}

.py-100 {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

.pt-100 {
    padding-top: 100px !important;
}

.wcf7-checkbox .wpcf7-list-item {
    margin: 0 10px 0 0;
}

.form-control::placeholder {
    opacity: 0.5 !important;
}

.title-main {
    border-bottom: #35BE8A 4px solid;
    padding-bottom: 5px;
}

.smt-100 {
    padding-top: 100px !important;
}

.smt-200 {
    padding-top: 200px !important;
}

.pdca>div>div {
    max-height: 200px !important;
}

.pdca-cycle {
    max-width: 354px;
    z-index: 2;
    position: absolute;
    left: 0;
    right: 0;
    padding: 0 !important;
    margin-left: auto;
    margin-right: auto;
}

#pdca-cycle-1,
#pdca-cycle-2,
#pdca-cycle-3,
#pdca-cycle-4 {
    transition: transform 330ms ease-in-out;
    height: 175px;
    width: 173px;
}

#pdca-cycle-1.active {
    transform: translate3d(-10px, -10px, 0) !important;
}

#pdca-cycle-2.active {
    transform: translate3d(10px, -10px, 0) !important;
}

#pdca-cycle-3.active {
    transform: translate3d(10px, 10px, 0) !important;
}

#pdca-cycle-4.active {
    transform: translate3d(-10px, 10px, 0) !important;
}

#pdca-cycle-1.active path,
#pdca-cycle-2.active path,
#pdca-cycle-3.active path,
#pdca-cycle-4.active path {
    fill: #35BE8A;
}

#pdca-box-1,
#pdca-box-2,
#pdca-box-3,
#pdca-box-4 {
    opacity: 0.8;
    transition: opacity 330ms ease-in-out;
    transition: transform 330ms ease-in-out;
}

#pdca-box-1.active,
#pdca-box-2.active,
#pdca-box-3.active,
#pdca-box-4.active {
    opacity: 1 !important;
}

#pdca-box-1.active h3,
#pdca-box-2.active h3,
#pdca-box-3.active h3,
#pdca-box-4.active h3 {
    color: #35BE8A !important;
}

.sx {
    transform: scaleX(-1);
}

#page, #single {
    padding: 100px 15px;
}

.page-title {
    border-bottom: #35BE8A 4px solid;
    padding-bottom: 5px;
}

.post-title {
    margin-top: 50px;
}

.flex-even {
    flex: 1 !important;
}

#card1,
.card-icon-1 {
    z-index: 10;
}

#card2,
.card-icon-2 {
    z-index: 9;
}

#card3,
.card-icon-3 {
    z-index: 8;
}

#card4,
.card-icon-4 {
    z-index: 7;
}

#card5,
.card-icon-5 {
    z-index: 6;
}

.sw-cycle .card,
.card-icon {
    width: 90%;
    margin-bottom: 20px;
}

.sw-cycle .card-nr {
    width: 60%;
    border-bottom: 2px dashed;
    font-size: 50px;
}

.card-icon .card-nr {
    font-size: 60px;
}

.card-icon .card-header h4 {
    min-height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sw-cycle img,
.card-icon img {
    max-width: 250px;
    margin-right: auto;
    margin-left: auto;
    height: 150px;
    width: auto;
}

.contact-wrapper {
    max-width: 300px;
    margin: auto;
}

.contact-wrapper i {
    color: #1E6CE6;
    margin-bottom: 10px;
}

.contact-wrapper:hover {
    background-color: #35BE8A;
    color: #FFFFFF !important;
}

.contact-wrapper:hover i {
    color: #ffffff;
}

.visible {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 200ms, visibility 200ms;
}

#anfrage .form-label {
    display: flex;
}

footer,
#page-404 {
    margin-top: 100px;
    width: auto;
}

footer a {
    text-decoration: none !important;
}
/*

let draw=document.querySelector('.draw');
const lengthDraw=draw.getTotalLength();

*/

/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 5 breakpoints
*/

/*
Extra small devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap because it is "mobile first"
*/


/* Small devices (sm, landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* Medium devices (md, tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {}

/* Large devices (lg, desktops, 992px and up) */
@media (min-width: 992px) {
    .card-icon {
        width: 32%;
        margin-bottom: 0;
        margin-right: 10px;
    }

    .sw-cycle .card {
        width: 20%;
        margin-bottom: 0;
    }

    .sw-cycle .active,
    .card-icon:hover {
        transform: scale(1.05);
        transition: transform 330ms ease-in-out;
        z-index: 999 !important;
    }

    .sw-cycle .active,
    .sw-cycle .active .card-header,
    .card-icon:hover,
    .card-icon:hover .card-header {
        background-color: #35BE8A !important;
    }

    .sw-cycle .active h1,
    .sw-cycle .active h4,
    .sw-cycle .active .card-text,
    .card-icon:hover h1,
    .card-icon:hover h4,
    .card-icon:hover i,
    .card-icon:hover .card-text {
        color: #FFFFFF !important;
    }

    .megamenu {
        position: static;
    }

    .megamenu .dropdown-menu {
        top: 65px;
        padding: 25px 100px 50px 100px;
        box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
    }

    .dropdown .subtitle {
        font-size: 35px;
        padding-left: 20px;
    }

    .nav-item {
        margin-left: 10px;
    }

    .hero-img::after {
        padding: 150px 0 100px 0;
    }

    #individualsoftware,
    #vorteile-individualsoftware,
    #projekte {
        padding-top: 130px !important;
    }

    .cls-2,
    .cls-3 {
        stroke-width: 4px;
    }

    .pb-50 {
        padding-bottom: 50px !important;
    }

    .animated {
        -webkit-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both
    }

    @-webkit-keyframes fadeInLeft {
        to {
            opacity: 1;
            -webkit-transform: translateX(0);
            transform: translateX(0)
        }
    }

    @keyframes fadeInLeft {
        to {
            opacity: 1;
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0)
        }
    }

    .fadeInLeft {
        opacity: 0;
        -webkit-transform: translateX(-200px);
        -ms-transform: translateX(-200px);
        transform: translateX(-200px)
    }

    .fadeInLeft-animated {
        -webkit-animation-name: fadeInLeft;
        animation-name: fadeInLeft;
    }

    @-webkit-keyframes fadeInRight {
        to {
            opacity: 1;
            -webkit-transform: translateX(0);
            transform: translateX(0)
        }
    }

    @keyframes fadeInRight {
        to {
            opacity: 1;
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0)
        }
    }

    .fadeInRight {
        opacity: 0;
        -webkit-transform: translateX(200px);
        -ms-transform: translateX(200px);
        transform: translateX(200px)
    }

    .fadeInRight-animated {
        -webkit-animation-name: fadeInRight;
        animation-name: fadeInRight;
    }

    @-webkit-keyframes fadeInUp {
        to {
            opacity: 1;
            -webkit-transform: translateY(0);
            transform: translateY(0)
        }
    }

    @keyframes fadeInUp {
        to {
            opacity: 1;
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0)
        }
    }

    .fadeInUp {
        opacity: 0;
        -webkit-transform: translateY(200px);
        -ms-transform: translateY(200px);
        transform: translateY(200px)
    }

    .fadeInUp-animated {
        -webkit-animation-name: fadeInUp;
        animation-name: fadeInUp;
    }
}

/* Extra large devices (xl, large desktops, 1200px and up) */
@media (min-width: 1200px) {
    #single {
        padding: 100px 250px;
    }
}

@media (min-width: 1400px) {}

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Custom media queries
*/

/* Set width to make card deck cards 100% width */
@media (max-width: 1024px) {

}

@media (max-width: 992px) {

    #anchor-links {
        display: none;
    }

    #hero {
        padding: 100px 0 0 0;
    }

    #individualsoftware,
    #vorteile-individualsoftware,
    #projekte {
        padding-top: 100px !important;
    }

    #hero .col-lg-6 {
        margin-bottom: 50px;
        padding: 0 20px;
    }

    .smt-100,
    .smt-200 {
        padding-top: 50px !important;
    }

    .pdca-cycle {
        max-width: 250px;
    }

    #pdca-cycle-1,
    #pdca-cycle-2,
    #pdca-cycle-3,
    #pdca-cycle-4 {
        height: 125px;
        width: 123px;
    }
}

@media (max-width: 768px) {

    .card-icon .card-header h4 {
        min-height: 30px;
    }

    #projekte,
    #hero {
        padding-top: 50px;
    }

    .dropdown .subtitle {
        display: none !important;
    }

    .py-100 {
        padding: 50px 20px !important;
    }

    .pt-100 {
        padding-top: 50px !important;
    }

    #pdca-cycle {
        position: relative;
        padding-bottom: 50px !important;
    }

    #pdca-box-1,
    #pdca-box-2,
    #pdca-box-3,
    #pdca-box-4 {
        display: none;
    }

    #pdca-box-1.active,
    #pdca-box-2.active,
    #pdca-box-3.active,
    #pdca-box-4.active {
        display: block;
    }

    .wpcf7-spinner {
        display: none;
    }

    footer,
    #page-404 {
        margin-top: 10cls-10px !important;
    }

    .hero-img {
        background-image: url("assets/img/hero-sm.jpg");
    }

    .contact-wrapper {
        margin-bottom: 30px;
    }

    .form-check-label {
        font-size: 15px;
    }

}

@media (max-width: 576px) {

    #it-dienstleistungen .row {
        margin: 0;
        padding: 0;
    }

    .card-call i {
        font-size: 60px;
    }
}


/*
####################################################
Custom colors
####################################################
*/

.bg-primary {
    background-color: #1E6CE6 !important;
}

.text-primary-custom {
    color: #1E6CE6 !important;
}

.btn-primary-custom {
    background-color: #1E6CE6;
    border-color: #1E6CE6;
    color: #ffffff;
}

.btn-primary-custom:hover {
    background-color: #113C80;
    border-color: #113C80;
    color: #ffffff;
}

.text-secondary-custom,
.nav-item>.active,
.nav-item>.show,
.nav-link:hover {
    color: #35BE8A !important;
}

.text-secondary-custom:hover {
    color: #1E9170 !important;
}

.btn-secondary-custom {
    background-color: #35BE8A;
    border-color: #35BE8A;
    color: #ffffff;
}

.btn-secondary-custom:hover {
    background-color: #1E9170;
    border-color: #1E9170;
    color: #ffffff;
}

.bg-secondary-custom {
    background-color: #35BE8A !important;
    color: #ffffff !important;
}

.bg-secondary-custom:hover {
    background-color: #1E9170 !important
}

.bb-secondary-custom {
    border-bottom: 3px #35BE8A solid;
    padding-bottom: 5px;
}