.banner {
    max-width: 100%;
    display: flex;
    height: 700px;
    width: 100%;
    padding: 0px;
}

.BannerSepartor > h1 {
    font-family: 'Poppins-M';
    font-size: 65px;
}

.BannerSepartor > h3 {
    margin-top: 7%;
}

.BannerSepartor > p {
    font-size: 18px;
    font-family: 'Poppins-R';
}

.container-fluid.banner {
    width: 100vw;
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

/* CSS for the background image */
.background-image {
    flex: 1;
    background-image: url('../images/Banner-Desktop.gif'); /* Replace with your image URL */
    background-size: cover;
    background-position: left;
    position: relative;
}

/* CSS for the white container */
.white-container {
    text-align: center;
    color: white;
    max-width: 600px; /* Adjust the width as needed */
    z-index: 1; /* Ensure the white container is on top */
}

.BannerBtn {
    font-size: 22px;
    padding-top: 18px;
    padding-bottom: 18px;
    padding-left: 5%;
    padding-right: 5%;
    border-radius: 10px;
    background-color: white;
    color: #5400a8;
    text-transform: uppercase;
    margin-top: 5%;
}

.BannerBtn:hover {
    background-color: #00b3c0;
    color: white;
}

.header-home .row {
    align-items: center;
    display: flex;
    height: 700px;
}

.background-image-wave {
    flex: 1;
    background-image: url('../images/Background-wave.png'); /* Replace with your image URL */
    background-size: cover;
    background-position: left;
    position: relative;
}

.background-image-net {
    flex: 1;
    background-image: url('../images/Background-net.png'); /* Replace with your image URL */
    background-size: cover;
    background-position: left;
    position: relative;
}

.background-image-net-Xflip {
    flex: 1;
    background-image: url('../images/Background-net.png'); /* Replace with your image URL */
    background-size: cover;
    background-position: left;
    position: relative;
}

.Statistic-Number {
    color: white;
    font-weight: bold;
    font-size: 3.5rem;
}

.Pill {
    display: flex;
    border-radius: 40px;
    padding: 15px 28px;
    border: solid 0.5px;
    border-color: #5400a84f;
    justify-content: space-between;
    background-color: #5400a84f;
    width: 65%;
}

.Pill-Stat {
    display: flex;
    border-radius: 40px;
    padding: 15px 28px;
    border: solid 0.5px;
    border-color: black;
    background-color: #001e4b;
    justify-content: space-evenly;
}

.Pill-Sub-Stat {
    display: flex;
    background-color: #001e4b;
    justify-content: space-evenly;
}

.Pill-Stat-Mobile {
    display: none;
    border-radius: 40px;
    padding: 15px 28px;
    border: solid 0.5px;
    border-color: black;
    background-color: #001e4b;
    justify-content: space-evenly;
}

.Pill > .Border {
    margin-right: 2%;
    height: auto;
    border: none !important;
    width: 4px;
    background-image: linear-gradient(180deg, #6D3BF5 0%, #30DDC1 50.5%, #BDE6D5 96.5%);
}

.Pill-Stat > .Border {
    height: auto;
    border: none !important;
    width: 4px;
    background-image: linear-gradient(180deg, #6D3BF5 0%, #30DDC1 50.5%, #BDE6D5 96.5%);
}

.Pill-Sub-Stat > .Border {
    margin-right: 2%;
    height: auto;
    border: none !important;
    width: 4px;
    background-image: linear-gradient(180deg, #6D3BF5 0%, #30DDC1 50.5%, #BDE6D5 96.5%);
}

.Pill-Stat-Mobile > .BorderMobile {
    display: block;
    height: 4px;
    border: none !important;
    width: 100%;
    background-image: radial-gradient(#6D3BF5 19%,#30DDC1 75.5%,#BDE6D5 54.5%);
}

.Pill > .Details {
    text-align: left;
    /* font-weight:bold; */
}

.Pill > .Button {
    border: none;
    border-radius: 1000px;
    padding: 1rem 2rem 1rem;
    background-color: #272793;
    color: white;
    font-weight: bold;
}

.Pill > .Button:hover {
    background-color: #00b3c0;
}


.Pill-Stat > .Statistic {
    display: flow;
    align-items: center;
    justify-content: center;
}

.Pill-Stat > span {
    font-size: 14px;
}

.Pill-Stat > .Statistic > span {
    color: white;
    font-size: 1.4rem;
    font-weight: bold
}

.Pill-Sub-Stat > .Statistic > span {
    color: white;
    font-size: 1.4rem;
    font-weight: bold
}

.Pill-Stat-Mobile > .Statistic > span {
    color: white;
    font-size: 1.4rem;
    font-weight: bold
}

@media (max-width: 1580px) {
    .background-image {
        /*background-position: 60%;*/
    }

    .offset-lg-1 {
        margin-left: 5.333333%;
    }
}

@media (max-width: 1330px) {
    .background-image {
        /*background-position: 65%;*/
    }

    .offset-lg-1 {
        margin-left: 2.333333%;
    }

    .white-container h1 {
        /*font-size: 34px;*/
        /*line-height: 42px;*/
    }

    .white-container h2 {
        font-size: 26px;
        /*line-height: 32px;*/
    }

   /* .white-container {
        max-width: 550px;
    }*/

    .header-home .row {
        background: rgba(4, 157, 13, 0);
/*        background: linear-gradient(90deg, rgba(21, 30, 71, 1.0) 42%, rgba(1, 1, 1, 0) 52%);*/
    }
}

@media (max-width: 1230px) {  
    .background-image {
        background-position: 65%;
    }
/*
    .white-container {
        max-width: 550px;
    }*/

    .header-home .row,
    .banner {
        height: 896px;
    }
    .header-home .row {
        background: rgba(4, 157, 13, 0);
/*        background: linear-gradient(90deg, rgba(21, 30, 71, 1.0) 48%, rgba(1, 1, 1, 0) 57%);*/
    }
}

@media (max-width: 1080px) {
    .header-home .row {
        background: transparent;
        height: 620px;
    }

    .banner {
        height: 630px;
    }

    .background-image {
        background-position: center;
        background-position-y:top;
        display: flex;
        align-items: flex-end;
    }

/*    .header-home .row {
        height: 570px;
    }*/

    .white-container h3 {
        margin-top: 30px;
    }

    .background-image {
        background-image: url('../images/Banner-Desktop.gif'); /* Replace with your image URL */
    }

    .white-container {
        margin: 0 auto;
        max-width: 750px;
    }

    .BannerBtn {
        font-size: 18px;
        padding-top: 15px;
        padding-bottom: 15px;
        margin-top: 4%;
    }

    .header-home .col-lg-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .header-home .offset-lg-1 {
        margin-left: 0px;
    }

    .Pill {
        width: 100%;
    }
}

@media (max-width:1025px) {
    .header-home .row {
        height: 702px;
    }

    .banner {
        height: 674px;
    }

    .BannerSepartor > h1 {
        font-size: 55px;
    }

    .BannerSepartor > p {
        font-size: 16px;
    }

    .Details > span{
        font-size:15px
    }
}

@media(max-width:990px) {
    .Pill {
        width: 85%;
    }
}

@media(max-width:811px){
    .header-home .row {
        height: 555px;
    }

    .banner {
        height: 585px;
    }
}


@media(max-width:686px) {
    .header-home .row {
        height: 605px;
    }

    .banner {
        height: 600px;
    }

    .Pill {
        width: 100%;
    }
}


@media(max-width:655px) {
    .Details > span {
        font-size: 14px
    }

    .BannerButtonColor {
        font-size: 14px
    }
}


@media(max-width:621px) {
    .Details > span {
        font-size: 12px
    }

    .BannerButtonColor {
        font-size:12px
    }
}


@media(max-width:426px) {
    .Pill-Stat-Mobile {
        display:block;
    }

    .Pill-Stat {
        display:none;
    }

    .ExtraMarginB {
        margin-bottom: 5.5%;
    }
}

@media(max-width:425px){
    .BannerSepartor > h1 {
        font-size: 45px;
        line-height: 45px;
    }

    .BannerSepartor > h2 {
        font-size: 19px;
        line-height: 32px;
    }

    .BannerSepartor > h3 {
        font-size: 16px;
        line-height: 32px;
        margin-top: 2%;
    }

    .BannerSepartor > h4 {
        font-size: 14px;
        line-height: 32px;
    }

    .banner {
        height: 595px;
    }
}


@media(max-width:420px) {
    .Pill {
        display: inline-block;
        text-align:center;
    }

    .Pill-Stat > .Statistic > span {
        font-size: 1.2rem;
    }

    .Pill > .Details {
        text-align:left;
        margin-bottom: 4%;
    }

    .Details > span {
        font-size: 14px
    }

    .BannerButtonColor {
        font-size: 15px
    }
}


@media(max-width:412px) {
    .banner {
        height: 600px;
    }
}

@media(max-width:409px) {
    .banner {
        height: 620px;
    }

    .header-home .row {
        height: 640px;
    }
}


@media(max-width:378px) {
    .Pill > .Border {
        display: none;
    }

    .header-home .row {
        height: 656px;
    }

    .banner {
        height: 650px;
    }

    .Pill {
        padding-top:10px;
        padding-right:18px;
        padding-left:18px;
    }
}

@media(max-width:340px) {
    .MainSpacer {
        margin-top: 70px;
    }

    .header-home .row,
    .banner {
        height: 730px;
    }

    .banner {
        height: 780px;
    }

    .BannerBtn {
        font-size: 14px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .Pill-Stat > .Statistic > span {
        font-size: 1rem;
    }


    .Statistic-Number {
        font-size: 2.5rem;
    }
}