body {
    text-align: center !important;
}

.home-img {
    padding-top: 10%;
    padding-bottom: 10%;
}

h1,
h2,
h3 {
    color: white;
}

@import url('https://fonts.googleapis.com/css2?family=Asap&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Asap", sans-serif;
}



.headline {
    font-size: 2.7rem;
    text-transform: uppercase;
}

.img-second {
    height: 85vh;
    width: 100vh;
    padding-left: 10%;
    padding-top: 10%;
}

section {
    min-height: 100vh;
    text-align: center;
}



#section01 {
    background-image: url("images/water.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    box-shadow: inset 0 0 8px 8px #AECCE4;
}

#section02 {
    background-image: url("images/water\ 4.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    box-shadow: inset 0 0 16px 8px #AECCE4;
    padding-left: 20%;
    padding-right: 20%;
    padding-top: 15%;
}

#section03 {
    background-image: url("images/dive-fron.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    box-shadow: inset 0 0 16px 8px #AECCE4;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 8%;
}

.nav-item a {
    font-size: 1.5rem;

}

section h1 {
    font-size: 3.5rem;
    margin: 20px;
    text-transform: uppercase;

}

section h2 {

    font-size: 2.7rem;
    text-align: center;
    text-transform: uppercase;
}

section h3 {
    font-size: 2rem;
    text-align: center;


}


section .text-container {
    display: flex;
}

section .text-container .text-box {
    margin: 20px;
    padding: 20px;
    background: #00c2cb;
}

section .text-container .text-box h3 {
    font-size: 50px;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 10px;
}

@media (max-width: 900px) {
    section h1 {
        font-size: 2rem;
        text-align: center;
    }

    section .text-container {
        flex-direction: column;
    }
}



.reveal {
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: 1s all ease;
}

.reveal.active {
    transform: translateY(0);
    opacity: 1;
}


section a {
    padding-top: 70px;
}

.spanscroll {
    position: absolute;
    top: 0;
    left: 30%;
    width: 24px;
    height: 24px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
    -webkit-animation: sdb06 1.5s infinite;
    animation: sdb06 1.5s infinite;
}

.ascroll {
    position: absolute;
    bottom: 0;
    /* Oder passen Sie diesen Wert an, um die vertikale Position zu ändern */
    left: 50%;
    /* Zentriert den Link horizontal */
    transform: translateX(-50%);
    /* Verschiebt den Link zur Hälfte seiner Breite nach links, um eine echte Zentrierung zu erreichen */
    padding-bottom: 2%;
    color: #fff;
    font: normal 400 20px/1 'Josefin Sans', sans-serif;
    letter-spacing: .1em;
    text-decoration: none;
    transition: opacity .3s;
}

@-webkit-keyframes sdb06 {
    0% {
        -webkit-transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        -webkit-transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 200px);
        opacity: 0;
    }
}

@keyframes sdb06 {
    0% {
        transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
        opacity: 0;
    }
}

.Fit-First {
    padding-left: 5%;
    padding-right: 5%;
}

.hfirst-page {
    padding-top: 10%;
    padding-bottom: 5%;
}

.first-page {
    padding-left: 10%;
    padding-right: 10%;
}

.work-First {
    padding-top: 2%;
    padding-bottom: 2%;
}

.card {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex-grow: 1;
    padding-left: 2%;
    padding-top: 20px;
    padding-bottom: 20px;

}

.second-page {
    padding-top: 2%;
    padding-bottom: 5%;
}

.form-outline .form-control {
    background-color: #fff !important;
    /* Set background to white */
    color: #000 !important;
    /* Set text color to black for visibility */
}

/* If you want to also style the focus color of the input */
.form-outline .form-control:focus {
    border-color: #aaa !important;
    /* Example focus color */
    box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.25) !important;
    /* Example focus shadow */
}

.gehard-img {
    width: 100%;
    /* This will make the image responsive within its column */
    max-width: 600px;
    /* Adjust this value to match the actual width you want */
    display: block;
    margin: 0 auto;
    /* This will center the image within the column */
}

#contact-form {
    width: 100%;
    /* This will make the form responsive within its column */
    max-width: 600px;
    /* Adjust this value to match the actual width you want */
    display: block;
    margin: 0 auto;
    /* This will center the form within the column */
}

.text {
    padding-left: 25%;
    /* Optionaler Abstand zum Text */
    /* Optional: Hintergrundfarbe */
    display: flex;
    align-items: center;
    /* Zentriert den Inhalt vertikal */
    justify-content: center;
    /* Zentriert den Inhalt horizontal */
    color: white;
}

@media screen and (max-width: 600px) {
    body {
        section {
            text-align: center;
        }



        #section01 {
            background-image: url("images/water.jpg");
            box-shadow: inset 0 0 8px 8px #AECCE4;
            padding-top: 15%!important;

        }

        #section02 {
            background-image: url("images/water\ 4.jpg");
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            box-shadow: inset 0 0 16px 8px #AECCE4;
            padding-left: 20%;
            padding-right: 20%;
            padding-top: 15%;
        }

        #section03 {
            background-image: url("images/dive-fron.jpg");
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            box-shadow: inset 0 0 16px 8px #AECCE4;
            padding-left: 10%;
            padding-right: 10%;
            padding-top: 8%;
        }

    }
}

.accordion-item,
.accordion-item .accordion-header,
.accordion-button.collapsed {
    border-radius: 0 !important;
}

.list-group-item {
    border-radius: 0 !important;
    /* Removes the rounded corners */
}

.navbar-bottom {
    background-color: #f4f8f4;
    /* Dark background for contrast */
    text-align: center;
    padding: 15px 10px;
    /* Add more padding for touch targets */
    font-size: 1rem;
}

.navbar-bottom p {
    margin: 10px 0;
    /* Add some space between text lines */
}

.spitz-section {
    padding-top: 5%;
}

.full-height-section {
    height: 100vh;
    /* Sets the height to 100% of the viewport height */
    overflow: auto;
    /* Allows scrolling within the section if the content is too long */
}

@media only screen and (max-width: 1000px) {
    body {
        font-size: 14px !important;
        /* Verkleinern der Standardschriftgröße */
    }

    .home-img,
    .img-second,
    .gehard-img {
        width: 100%;
        /* Bilder auf volle Breite anpassen */
        height: auto;
        /* Höhe automatisch anpassen, um Verzerrungen zu vermeiden */
        padding: 5%;
        /* Anpassung des Innenabstands */
    }

    h1,
    h2,
    h3,
    .headline {
        font-size: 20px !important;
        /* Schriftgröße für Überschriften anpassen */
        text-align: center;
        /* Zentrieren der Überschriften */
    }

    h4 {
        font-size: 15px !important;

    }

    #section01,
    #section02,
    #section03 {
        padding: 5%;
        padding-top: 40%;
    }


    */ .nav-item a {
        font-size: 1.2rem;
        /* Schriftgröße in der Navigation anpassen */
    }

    .home-text {
        padding: 5%;
        padding-top: 20%;
    }

    .text-container {
        flex-direction: column;
        /* Inhalt der Textcontainer untereinander anordnen */
    }

    .text-box {
        font-size: 0.9rem;
        /* Schriftgröße in Textboxen anpassen */
    }

    .card {
        flex-direction: column;
        /* Karteninhalte vertikal anordnen */
    }

    .text {
        flex-direction: column;
        /* Textausrichtung in Textbereichen anpassen */
        padding: 5%;
        /* Innenabstand anpassen */
    }

    .gcontainer {
        flex-direction: column;
        /* Flex-Container für kleinere Bildschirme anpassen */
    }

    .h5 {
        font-size: 10px !important;
        /* Schriftgröße der unteren Navigationsleiste anpassen */
    }

    .ascroll {
        font-size: 14px;
        /* Adjust font-size as needed */
        padding-bottom: 0px;
    }

    .spanscroll {
        width: 12px;
        /* Adjust width as needed */
        height: 12px;
        /* Adjust height as needed */
        /* Other styles */
    }

    .navbar-bottom {
        padding: 20px 10px;
        /* Increase padding on smaller screens */
        font-size: 10px;
        /* Slightly increase font size for readability */
        line-height: 1.8;
        /* Improve line spacing */
        background-color: #222;
        /* Slightly different background for style */
        border-top: 2px solid #444;
        /* Add a border top for visual separation */
    }

    .navbar-logo {
        width: 30% !important;
        height: 30% !important;
    }

    .navbar-bottom p {
        margin-bottom: 5px;
        /* Reduce margin between paragraphs for compact look */
    }

    .fit-section {
        padding-left: 2% !important;
        padding-right: 2% !important;
    }

    .first-page {
        padding-left: 0%;
        padding-right: 0%;
    }

    .work-page {
        padding-top: 25% !important;
        padding-left: 2% !important;
        padding-right: 2% !important;
    }

    .gehard-img {
        width: 100%;
        height: auto;
        margin-bottom: 30px;
        /* Add some space above the form */
    }


}