html {
    scroll-behavior: smooth;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-width: 378px;
}
a:link, a:visited{
    color: white;
    text-decoration:none;
}
@font-face {
    font-family: 'DM Sans';
    src: url('/fonts/DMSans-Regular.woff2') format('woff');;
    font-display: swap;
}
@font-face {
    font-family: 'Source Sans 3';
    src: url('/fonts/SourceSans3-Regular.woff2') format('woff');;
    font-display: swap;
}
.SourceSans-regular {
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.SourceSans-bold {
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}
.dm-sans-medium {
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}
.dm-sans-bold {
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}
#all{
    max-width: 1920px;
    width: 100%;
}
.btn{
    height: 60px;
    background-color: #FDC921;
    border-radius: 30px;
    padding: 0 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn a{
    color: #0C0C0C;
    font-size: 22px;
}
main{
    width: 100%;
}
header{
    width: 100%;
}
footer{
    width: 100%;
}
.title-size{
    font-size: 56px;
}
.text-size{
    font-size: 20px;
}
.minitext-size{
    font-size: 16px;
}
.text-black{
    color: black !important;
}
.flex-c{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.flex-c-b{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: first baseline;
    gap: 16px;
}
#navbar{
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 80px;
    background-color: #1D1B20;
    color: white;
    font-size: 22px;
    position: relative;
}
#logo{
    display: flex;
    justify-content: center;
    align-items: center;
}
#logo_icon{
    height: 40px;
    width: 229.6px;
    margin-left: 80px;
    margin-right: 32px;
}
.nav_font{
    font-size: 24px;
}
#menu{
    color: white;
    display: flex;
    justify-content: center;
    gap: 32px
}
#hamburger{
    width: 40px;
    height: 40px;
}
#hamburger-div{
    display: none;
}
#nav_call{
    margin-left: auto;
    margin-right: 80px;
    display: flex;
    justify-content: center;
    align-items: center; 
    gap: 10px;
}
#call_icon{
    height: 21.16px;
    width: 21.3px;
}
#slide{
    display: flex;
    flex-direction: row;
}
.slide-item{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}
#slide-left{
    margin: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: first baseline;
    gap: 50px;
}
#slide-text{
    max-width: 840px;
}
#slide-img{
    min-width: 920px;
    height: 667px;
}
#slide-img img{
    min-width: 920px;
    height: 667px;
}
#services{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    gap: 24px
}
#services-title{
    margin: 120px 80px 0 80px;
}
#servics-content{
    margin: 32px 80px 120px 80px;
    display: flex;
    flex-direction: row;
    gap: 64px;
}
.services-items{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
}
.service_icon{
    width: 88px;
    height: 88px;
}
.services-check{
    display: flex;
    flex-direction: column;
    align-items: first baseline;
    gap: 8px;
    width: 100%;
}
#extra{
    background-color: #F3EDE1;
    display: flex;
    flex-direction: row;
    align-items: center;
}
#extra-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: baseline;
    max-width: 1000px;
    margin: 120px 80px 120px 80px;
    gap: 32px;
}
#extra-textbox{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
#extra-textbox-mini{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.check-text{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.check_icon{
    width: 21.5px;
    height: 21.5px;
    flex-shrink: 0;
}
#extra-img{
    margin-right: 80px;
}
#tariffs{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 120px;
    gap: 32px;
}
table, tr, td{
    border-collapse: separate;
    border-spacing: 0;
}
table tr td{
    border-right: 1px solid #9FA6AD;
    border-bottom: 1px solid #9FA6AD;
    border-collapse: separate;
}
td{
    width: 300px;
}
table tr td:first-child {
    border-left: 1px solid #bbb;
}
table tr:first-child td:first-child {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-top: 1px solid #9FA6AD;
}

table tr:last-child td:first-child {
    border-bottom-left-radius: 6px;
}
table tr:last-child td:last-child {
    border-bottom-right-radius: 6px;
}
.table-tile{
    padding: 12px;
    background-color: #FEF3CE;
}
.table-content td{
    padding: 12px;
}
#order{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    background-color: #F3EDE1;
}
#order-contact{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: baseline;
    gap: 24px;
    max-width: 728px;
    width: 100%;
    margin: 120px 80px 120px 80px;
}
#order-contact span{
    color: #0C0C0C;
}
.order_icon{
    width: 20px;
    height: 24px;
}
.order-link{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
#order-contact span a{
    color: #0C0C0C;
    text-decoration:none;
}
#order-frame{
    width: 100%;
    margin: 120px 80px 120px 80px;
    background-color: white;
    border-radius: 20px;
}
#order-table{
    margin: 50px;
}
label {
    font-weight: bold;
    display: block;
    margin-top: 10px;
}
input, textarea {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.row {
    display: flex;
    gap: 20px;
}
.row div {
    flex: 1;
}
#footer{
    display: flex;
    flex-direction: column;
    gap: 88px;
    background-color: #1D1B20;
}
#footer-content{
    margin: 80px 180px 0 180px;
    display: flex;
    flex-direction: row; 
    justify-content: space-between;
}
#footer a{
    color: #FFFFFF;
    font-size: 18px;
}
#footer-logo{
    height: 40px;
    width: 229.6px;
}
#footer-left{
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: space-between;
}
#footer-right{
    display: flex;
    flex-direction: column;
    gap: 26px;
}
#footer-address{
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.footer-icon{
    width: 24px;
    height: 26px;
}
#footer-address-text{
    display: flex;
    flex-direction: column;
    gap: 5px
}
#legal-link{
    display: flex;
    flex-direction: row;
    gap: 88px;
}
#footer-contact{
    display: flex;
    flex-direction: row;
    gap: 80px;
}
.footer-link{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}
#seperator{
    height: 1px;
    margin: 0 180px 131px 180px;
    background-color: #FFFFFF;
}

#impressum{
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 120px 80px;
}
#datenschutz{
    margin:20px 40px;
}
#datenschutz a{
    color: black;
}
#disclaimer{
    color: #0C0C0C;
}
#jobs{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    background-color: #F3EDE1;
}
#business{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 100px 0;
}
.business-content{
  margin: 32px 80px 0 80px;
  display: flex;
  flex-direction: row;
  gap: 64px;
  justify-content: center;
  width: 90%;
}
.business-items{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: baseline;
    gap: 32px;
    width: 30%;
    max-width: 550px;
    padding: 20px;
}
.business-icon {
  background-color: rgb(254, 243, 206);
  padding: 20px;
  border-radius: 20px;
}
.bseperator {
  background-color: black;
  width: 20px;
}
#company{
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #F3EDE1;
}
#company-img{
    margin-left: 80px;
}
.addressv{
    font-size: 14px;
}
.price{
    margin: 10px 0;
}

@media only screen and (max-width: 900px){
    #logo_icon{
        height: 40px;
        width: 229.6px;
        margin-right: 0;
    }
    #menu{
        display: none;
        position: absolute;
        height: auto;
        flex-direction: column;
        top: 80px;
        width: 100%;
        align-items: baseline;
        background-color: #1D1B20;
        gap: 0;
    }
    #menu a{
        padding: 10px 20px;
        border: 1px solid white;
        width: 100%;
    }
    #hamburger-div{
        margin-left: auto;
        margin-right: 10px;
        display: flex;
    }
    #navbar{
        flex-wrap: wrap;
    }
    #nav_call{
        margin-right: 0;
        gap: 5px;
        order: -1;
        width: 100%;
    }
        .title-size {
        font-size: 40px;
    }
    #slide-img{
        display: none;
    }
    .slide-item{
        background-image: url("img/taxi_light_m.webp");
        background-size: cover;
        background-position: inherit;
     }
     #slide-text{
        background-color: rgba(255, 255, 255, 0.8);
        padding: 10px;
        border-radius: 20px;
     }
     #services-title{
        margin: 20px;
     }
     #servics-content{
        flex-direction: column;
        margin: 20px;
     }
     #extra-img{
        display: none;
     }
     #order{
        flex-direction: column;
     }
     #order-contact{
        margin: 20px;
        width: auto;
     }
     #order-frame{
        margin: 20px;
     }
     #order-table {
        margin: 20px;
      }
     #extra-text{
        margin: 20px
     }
     #tariffs{
        margin: 20px;
     }
     #footer{
        gap: 0;
     }
     #footer-content{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap:32px;
        margin:20px
     }
     #footer-left{
        gap:32px
     }
     #footer-contact{
        flex-direction: column;
        gap:20px
     }
     #seperator{
        margin: 20px
     }
     #datenschutz{
        margin: 0px;
     }
     #jobs{
        flex-direction: column;
     }
     #jobs-left{
        margin: 20px;
     }
     #company{
        flex-direction: column-reverse;
     }
     #company-img {
        margin: 10px;
    }
    #company-image{
        width: 100%;
    }
    .business-content {
        margin: 0;
        flex-direction: column;
        width: 100%;
        align-items: center;
    }
    .business-items{
        align-items: center;
        width: 100%;
    }
    .bseperator {
        background-color: black;
        width: 100%;
        height: 5px;
    }
}