.banner-container {
    padding-left: 20px;
    padding-right: 20px;
}
.banner {
    background-image: url('../img/services/breadcrumb.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    /* margin-top: 20px; */
    border-radius: 20px;
    overflow: hidden;
    padding: 28px 90px;
    /* height: 400px; */
    position: relative;

}
.banner.simple-banner {
    height: 400px;
}
.banner.simple-banner > .bg {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.751);
    position: absolute;
    z-index: 2;
    display: none;
}



.banner > img {
    position: relative;
    z-index: 1;
}

.banner > .banner-content, .banner > form {
    z-index: 2;
}

.banner .banner-content {
    flex-basis: 60%;
}

.banner .banner-form {
    flex-basis: 35%;
    /* background-color: #6b47edd2; */
    background: #6B47EDD2;
    background: linear-gradient(135deg, rgba(107, 71, 237, 1) 0%, rgba(151, 127, 240, 0.7) 50%, rgba(107, 71, 237, 1) 100%);
    padding: 20px 26px;
}




.banner .simple-banner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 2;
}

.banner .my-breadcrumb {
    display: flex;
    align-items: center;
    gap: 30px;
    list-style: none;
    border : 2px solid var(--primary-color);
    border-radius: 15px;
    padding: 15px 20px !important;
}

.banner .my-breadcrumb li {
    position: relative;
}

.banner .my-breadcrumb li:not(:first-child)::before {
    content: '>';
    /* margin-right: 20px; */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -20px;
    font-size: 22px;
}

.banner .my-breadcrumb li a {
    color: var(--primary-color);
    text-decoration: none;
}


.btns {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 12px;

}

@media screen and (max-width: 1024px) {
    .banner {
        padding: 50px 40px;
        gap: 60px;
        flex-direction: column;
    }
}


@media screen and (max-width: 650px) {
    .banner {
        padding: 50px 20px;
    }
}

@media screen and (max-width: 425px) {

    .banner.simple-banner > .bg {
        display: block;
    }

    .btns {
        flex-direction: column;
    }
}