@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
    --white: #FFFFFF;
    --black: #111111;
    --theme-color: #f8b02f;
    --theme-color-hover: #e3970e;
    --theme-color-border: #e3970e;
}


html { font-size: 16px;}
@media (max-width: 768px) {html {font-size: 14px;}}

.custom-button {background-color: var(--theme-color); border: solid 1px var(--theme-color-border); padding: 8px 15px; border-radius: 10px; color: var(--white); font-weight: 500; transition: background-color 1s ease, transform 0.5s ease;}
.custom-button:hover {background-color: var(--theme-color-hover); border: solid 1px var(--theme-color-border); padding: 8px 15px; border-radius: 10px; color: var(--white); font-weight: 500;transition: background-color 1s ease, transform 0.5s ease;}
.custom-button-2 {background-color: var(--theme-color); padding: 10px 15px; border-radius: 4px; color: var(--white); font-size: 16px; font-weight: 500; transition: background-color 1s ease, transform 0.5s ease;}
.custom-button-2:hover {background-color: var(--theme-color-hover); padding: 10px 15px; border-radius: 4px; color: var(--white); font-size: 16px; font-weight: 500; transition: background-color 1s ease, transform 0.5s ease;}
.custom-button-3 {background-color: var(--theme-color); padding: 18px 20px; border-radius: 4px; color: var(--white); font-size: 20px; font-weight: 500; transition: background-color 1s ease, transform 0.5s ease; border: none;}
.custom-button-3:hover {background-color: var(--theme-color-hover); padding: 18px 20px; border-radius: 4px; color: var(--white); font-size: 20px; font-weight: 500; transition: background-color 1s ease, transform 0.5s ease; border: none;}

a {color: var(--black);}
a:hover {color: var(--black); text-decoration: none;}

body {font-family: Open Sans;}
header {background-color: var(--white); overflow: hidden; position: relative;}
header div.top-banner {display: flex; align-items: center; justify-content: center; gap: 5px; padding: 5px;}
header div.top-banner a {color: var(--theme-color); font-weight: 600; font-size: 13px;}
header div.logo-nav-wrapper {position: sticky;top: 0;z-index: 999;background: red; background-color: var(--white); height: 80px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 12px 0 rgba(51, 73, 94, 0.1) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.25);}
header div.logo-nav-wrapper div.logo-nav {padding: 5px 10px; display: flex; align-items: center; justify-content: space-between;}
header div.logo-nav-wrapper div.logo-nav div.logo img {max-height: 80px;}
header div.logo-nav-wrapper div.logo-nav span {font-size: 16px;}
header div.logo-nav-wrapper div.logo-nav div.button a {font-size: 17px;}
section.content-wrapper {max-width: 750px; padding: 15px; margin: 50px auto;}
section.content-wrapper div.content-title h3 {font-weight: 400; font-size: 2.5rem;}
section.content-wrapper div.content {padding: 20px; font-size: 20px; font-weight: 300 ; border-radius: 15px; box-shadow: 0 0 12px 0 rgba(51, 73, 94, 0.1) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.25);}

section.content-2-wrapper {width: 100%; padding: 10px; margin: 0 auto; padding: 80px 0px; background-color: #f8f8fc;}
section.content-2-wrapper div.content-2-title {padding: 0px 20px ; max-width: 750px; margin: auto;}
section.content-2-wrapper div.content-2-title h3 {font-weight: 400; font-size: 2rem;}
section.content-2-wrapper div.content-2 {padding: 0px 20px; max-width: 750px; margin: auto; font-size: 17px;}
section.content-2-wrapper div.content-2 ul {margin-left: 0px; padding-left: 0px;}
section.content-2-wrapper div.content-2 ul li {list-style: none;}

section.content-3-wrapper {max-width: 100%; padding: 10px; margin: 0 auto; padding: 80px 0px; background-color: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center;}
section.content-3-wrapper div.content-3-title h3 {font-weight: 400; font-size: 2.1rem;}
section.content-3-wrapper div.content-3 {width: 100%; display: flex; align-items: center; justify-content: center;}
section.content-3-wrapper div.content-3 a {width: 100%; max-width: 300px; display: block; text-align: center;}

section.phone-section-wrapper {width: 280px; height: 310px; position: fixed; right: 0px; top: 50%; transform: translateY(-50%); z-index: 2; cursor: pointer;}
section.phone-section-wrapper:hover div.phone-section img {transition: all .3s ease-in-out; animation: pulseTilt 1.1s ease-in-out infinite;}
section.phone-section-wrapper div.phone-section {width: 280px; height: 310px; position: relative;}
section.phone-section-wrapper div.phone-section img {height: 100%; float: right; margin-right: 30px;transform: rotate(-4deg) scale(1); transition: transform 0.3s ease;}
section.phone-section-wrapper div.phone-section div.phone-section-text {max-width: 80%;  transform: rotate(-4deg); position: fixed; z-index: 2; bottom: 20px; right: -5px;}
section.phone-section-wrapper div.phone-section div.phone-section-text a { text-align: center; padding: 8px;  background-color: #409bff;display: flex; align-items: center; justify-content: center;}
section.phone-section-wrapper div.phone-section div.phone-section-text span {color: var(--white);font-weight: 600;}
section.phone-section-wrapper div.phone-section div.phone-section-text i {font-size:23px; background-color: var(--white); color: #409bff; padding: 7px; border-radius: 100%;}
section.phone-section-wrapper div.phone-section div.phone-section-text a:before {content: '';display: block;position: absolute;height: 106px;width: 270px;bottom: -25px;right: -28px;z-index: -41;-webkit-transform: rotate(8deg);transform: rotate(6deg);background: url(../assets/img/AppCTABg@2x.png) center center no-repeat;background-size: cover;}

footer {max-width: 100%; padding: 60px 15px; background-color: #44434f;}
footer div.footer-content-title {max-width: 750px; margin: 0px auto;}
footer div.footer-content-title h3 {font-weight: 400; color: var(--white); text-align: center;}
footer div.footer-content {max-width: 1080px; margin: 0px auto; background-color: #eeeeee;}
footer div.footer-content ul.footer-tab {margin: 0px; padding: 0px;}
footer div.footer-content ul.footer-tab li {list-style: none;}
footer div.footer-content ul.footer-tab li a {line-height: 30px; color: #444444; font-size: 14px; display: block; padding: 12px 20px; transition: background-color 1s ease, transform 0.5s ease;}
footer div.footer-content ul.footer-tab li a:hover {background-color: #cccccc; transition: background-color 1s ease, transform 0.5s ease;}
footer div.footer-content ul.footer-tab li a.active {background-color: #cccccc; transition: background-color 1s ease, transform 0.5s ease;}
footer div.footer-content ul.footer-tab li div.tab-content {padding: 5px 20px 10px 20px; font-size: 14px; display: none;}

footer div.footer-social {max-width: 1080px; margin: 0px auto; padding: 40px 0px 0px 0px;}
footer div.footer-social ul {margin: 0px; padding: 0px; display: flex; align-items: center; justify-content: center; gap: 20px;}
footer div.footer-social ul li {list-style: none;}
footer div.footer-social ul li a i {color: var(--white); font-size: 35px;}


section.content-4-wrapper {width: 100%; padding: 10px; margin: 0 auto; padding: 80px 0px; background-color: #f8f8fc;}
section.content-4-wrapper div.content-4-title {padding: 0px 20px ; max-width: 750px; margin: auto;}
section.content-4-wrapper div.content-4-title h3 {font-weight: 400; font-size: 2rem;}
section.content-4-wrapper div.content-4 {padding: 0px 20px; max-width: 750px; margin: auto; font-size: 17px; margin-top: 10px;}
section.content-4-wrapper div.content-4 input:not([type="file"]), section.content-4-wrapper div.content-4 textarea {border-radius: 20px; border: solid 2px var(--theme-color); padding: 25px 15px;}
section.content-4-wrapper div.content-4 button {padding: 15px;}
section.content-4-wrapper div.content-4 .form-control:focus { border-color: inherit; box-shadow: none;outline: none;}
section.content-4-wrapper div.content-4 .custom-file-input:focus~.custom-file-label {border-color: var(--theme-color);box-shadow: 0 0 0 .2rem rgba(0, 87, 255, .25);}
section.content-4-wrapper div.content-4 .custom-file-label::after {content: "Seç";background-color: var(--theme-color);border-color: var(--theme-color);color: #fff;}
section.content-4-wrapper div.content-4 .custom-file-label:hover::after {filter: brightness(90%)}
section.content-4-wrapper div.content-4 .custom-file-label:lang(de)::after {content: "Durchsuchen";}
@keyframes pulseTilt {
  0%   { transform: scale(1) rotate(-4deg); }
  20%  { transform: scale(1.05) rotate(-4deg); }
  40%  { transform: scale(1.05) rotate(-1deg); }
  60%  { transform: scale(1.05) rotate(-7deg); }
  80%  { transform: scale(1.05) rotate(-2deg); }
  100% { transform: scale(1) rotate(-4deg); }
}

@media (max-width: 768px) {
  section.phone-section-wrapper div.phone-section img {display: none !important;}
  section.phone-section-wrapper div.phone-section div.phone-section-text span {display: none;}
  section.phone-section-wrapper div.phone-section div.phone-section-text a:before {right: -200px; bottom: -20px; height: 80px;}

}