.hero {
    position: relative;
    height: 100vh;
    background: url('/template/images/5.png') no-repeat center center/cover;
}

.hero .content {
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-40%, -50%);
    z-index: 8;
    color: white;
}


/* General Section Styling */
#philosophie {
    position: relative;
    padding: 0;
}

.orange-background {
    background-color: #ffa500;
    /* Orange background */
    height: 100%;
}

.orange-background-1 {
    background-color: #ffb11b;
    /* Orange background */
    height: 100%;
}

.orange-background-2 {
    background-color: #ffbd2c;
    /* Orange background */
    height: 100%;
}

/* Image and Column Styling */
.img-half {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* White Box Styling */
.white-box {
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 40px 70px;
    max-width: 400px;
    border-radius: 20px;
    z-index: 10;
}

/* Position the white box in the center */
.position-absolute {
    position: absolute;
}

.top-50 {
    top: 50%;
}

.start-50 {
    left: 50%;
}

.translate-middle {
    transform: translate(-50%, -50%);
}

@media (min-width: 981px) and (max-width: 1400px) {
    .white-box {
        padding: 30px 50px;

    }

    h4 {
        font-size: 1.25rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    p {
        font-size: 1rem !important;
    }
}

@media (min-width: 769px) and (max-width: 980px) {
    .white-box {
        padding: 20px 35px;

    }

    h4 {
        font-size: 1rem !important;
    }

    h2 {
        font-size: 0.9rem !important;
    }

    p {
        font-size: 0.7rem !important;
    }

}

/* Responsive Styles */
@media (max-width: 768px) {

    h4 {
        font-size: 1.25rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    p {
        font-size: 1rem !important;
    }

    .white-box {
        width: 90%;
        padding: 20px;
    }

    .position-relative {
        padding: 0;
        margin: 0;
    }
}

.hund-hinterground {
    background-image: url(/template/images/prototyp/hund-hinterground.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.hund-hinterground label {
    color: black !important;
    font-size: 20px !important;
}

.hund-hinterground .card {
    background-color: #ffffffba;
}

.f-btn {
    background-color: #ffcd7f !important;
    color: black !important;
    border: 1px solid #ff6600 !important;
}

.f-btn:hover {
    background-color: #ff6600 !important;
}

.button{
    display:inline-block;
    margin-right:20px;
}