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


.section-with-half-background {
    background: linear-gradient(to bottom, rgb(102, 166, 255), rgb(119, 206, 254), rgb(133, 239, 254) 50%, transparent 50%);
    padding: 2rem 2rem 0 2rem;
}

.row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    max-width: 1430px;
    margin: 0 auto;
}

.col-md-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
}

.image-container {
    width: 100%;
    height: auto;
}

.bharti_image {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 650px;
}

.col-md-8 {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
}

.text-container {
    padding: 15px;
    max-width: 33rem;
}

.custom-heading-h2 {
    font-family: "Limelight", sans-serif;
    font-weight: 600;
    font-size: 78px;
    font-style: normal;
    margin: 0;
}

.custom-heading-h3 {
    margin: 0;
}

.custom-text {
    padding-top: 13rem;
}

.custom-text p {
    margin: 0;
}

.btn-primary.button, .btn.btn-primary {
    color: #fff;
    border-color: rgb(102, 166, 255);
    background: rgb(102, 166, 255);
}

.btn, .button {
    color: rgb(102, 166, 255);
    border: .05rem solid rgb(102, 166, 255);
}

.btn-primary.button:focus, .btn-primary.button:hover, .btn.btn-primary:focus, .btn.btn-primary:hover {
    border-color: rgb(119, 206, 254);
    background: rgb(119, 206, 254);
    color: rgb(31, 41, 55);
}

#section-03 {
    padding: 4rem 0;
}

@media (max-width: 768px) {
    .row {
        flex-wrap: wrap;
    }

    .col-md-4,
    .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .bharti_image {
        height: 700px;
    }

    .text-container {
        text-align: center;
        max-width: unset;
    }

    .custom-text {
        padding-top: 4rem;
    }
}

@media (max-width: 576px) {
    .bharti_image {
        height: 574px;
    }
}*/
@import url('https://fonts.googleapis.com/css2?family=Limelight&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
/*

!* Allgemeine Stile *!
.creative-section {
    background: linear-gradient(to right, rgba(146, 184, 247, 0.1), rgba(119, 206, 254, 0.1));
}

.creative-image {
    height: 400px; !* Höhe für die obere Hälfte des Bildes *!
    background-size: cover;
    background-position: top; !* Zeigt nur die obere Hälfte des Bildes *!
    border-radius: 15px 15px 0 0; !* Abgerundete Ecken oben *!
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.creative-text {
    background: white;
    border-radius: 0 0 15px 15px; !* Abgerundete Ecken unten *!
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    padding: 2rem !important;
}

!* Überschrift (Limelight) *!
.custom-heading-h2 {
    font-family: "Limelight", sans-serif;
    font-weight: 600;
    font-size: 78px;
    font-style: normal;
    margin: 0;
    color: rgb(102, 166, 255);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

!* Unterüberschrift (Roboto) *!
.custom-heading-h3 {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 1.75rem;
    color: rgb(119, 206, 254);
    margin-bottom: 1.5rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.creative-hr {
    border: 0;
    height: 2px;
    background: rgb(133, 239, 254);
    margin: 1.5rem 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.custom-text-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
    color: rgb(102, 166, 255);
    margin-bottom: 1rem;
}

.custom-text-normal {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.creative-button .btn-primary {
    background: rgb(102, 166, 255);
    border: none;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    transition: background 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.creative-button .btn-primary:hover {
    background: rgb(119, 206, 254);
    transform: translateY(-5px);
}

.creative-divider {
    border: 5px solid rgb(133, 239, 254);
    width: 100%;
    margin: 0;
}

!* Animationen *!
@keyframes pop-in {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slide-in {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.animate-pop-in {
    animation: pop-in 0.8s ease-out forwards;
}

.animate-slide-in {
    animation: slide-in 0.8s ease-out forwards;
}

.animate-fade-in {
    animation: fade-in 1.2s ease-out forwards;
}

!* Responsive Design *!
@media (max-width: 768px) {
    .creative-image {
        height: 300px; !* Kleinere Höhe für mobile Geräte *!
    }

    .custom-heading-h2 {
        font-size: 3rem; !* Kleinere Schriftgröße für mobile Geräte *!
    }

    .custom-heading-h3 {
        font-size: 1.5rem;
    }
}*/

/* Allgemeine Stile */
.creative-section {
    /*background: linear-gradient(to right, rgba(146, 184, 247, 0.1), rgba(119, 206, 254, 0.1));*/
    background: linear-gradient(to bottom, rgb(0 0 0), #f8f9fa, #f8f9fa 100%, transparent 50%);
    padding-top: 5.5rem;
}

.creative-image {
    height: 600px; /* Größere Höhe für das Bild */
    background-size: cover;
    background-position: top; /* Zeigt nur die obere Hälfte des Bildes */
    border-radius: 15px 0 0 15px; /* Abgerundete Ecken links */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.creative-text {
    background: white;
    border-radius: 0 15px 15px 0; /* Abgerundete Ecken rechts */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    padding: 2rem !important;
}

/* Überschrift (Limelight) */
.custom-heading-h2 {
    font-family: "Limelight", sans-serif;
    font-weight: 600;
    font-size: 97px;
    font-style: normal;
    margin: 0;
    color: rgb(0, 0, 0);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

/* Unterüberschrift (Roboto) */
.custom-heading-h3 {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-size: 1.75rem;
    color: rgb(0, 0, 0);
    margin-bottom: 1.5rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.creative-hr {
    border: 0;
    height: 3px !important;
    background: rgb(0 223 255);
    margin: 1.5rem 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.custom-text-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
    color: rgb(102, 166, 255);
    margin-bottom: 1rem;
}

.custom-text-normal {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.creative-button .btn-primary {
    height: auto;
    background: rgb(102, 166, 255);
    border: none;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    transition: background 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.creative-button .btn-primary:hover {
    background: rgb(119, 206, 254);
    transform: translateY(-5px);
}

.creative-divider {
    border: 5px solid rgb(133, 239, 254);
    width: 100%;
    margin: 0;
}

/* Animationen */
@keyframes pop-in {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slide-in {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.animate-pop-in {
    animation: pop-in 0.8s ease-out forwards;
}

.animate-slide-in {
    animation: slide-in 0.8s ease-out forwards;
}

.animate-fade-in {
    animation: fade-in 1.2s ease-out forwards;
}

/* Responsive Design */
@media (max-width: 768px) {
    .creative-image {
        height: 400px; /* Kleinere Höhe für mobile Geräte */
        border-radius: 15px 15px 0 0; /* Abgerundete Ecken oben */
    }

    .creative-text {
        border-radius: 0 0 15px 15px; /* Abgerundete Ecken unten */
    }

    .custom-heading-h2 {
        font-size: 3rem; /* Kleinere Schriftgröße für mobile Geräte */
    }

    .custom-heading-h3 {
        font-size: 1.5rem;
    }
}