/*.top-section {
    margin: 8rem 0 4rem 0 !important;
    background-color: white !important;
    border-radius: .6rem !important;
    padding: 3rem !important;
    box-shadow: 0px 10px 33px -7px rgba(0,0,0,0.02);
    -webkit-box-shadow: 0px 10px 33px -7px rgba(0,0,0,0.02);
    -moz-box-shadow: 0px 10px 33px -7px rgba(0,0,0,0.02);
}

    .top-section > div {
    }

        .top-section > div.titlex {
            font-size: 2rem;
            padding: 1rem 0 !important;
            font-weight: bold !important;
        }


.border-dashed-lg {
    border-left: none;
}

@media (min-width: 992px) {
    .border-dashed-lg {
        border-left: .3rem dashed #D9E8F5;
    }
}
        edited 

.top-section > div > div {
    padding: 0 3rem !important;
}

.bottom-wrapperx {
    margin: 0 0 !important;
    background-color: white !important;
    padding: 3rem !important;
}

.bottom-section {
}

    .bottom-section > div > div > p.titlex {
        font-size: 8.3rem;
        font-weight: bold !important;
                text-align:right;
                background-color:red;
    }

.big-num-text {
    font-size: 8.3rem;
    font-weight: bolder !important;
}

.bottom-section > div.descx {
    font-size: 1.5rem;
    font-weight: normal !important;
}*/



/*====================*/
/* Keep your existing custom CSS */

/*================*/

/* .bottom-section { */ /* Commented out original rule, replaced above */
/* } */

/* Original rule potentially conflicting or less specific */
/* .bottom-section > div > div > p.titlex {
        font-size: 8.3rem;
        font-weight: bold !important;
           text-align:right;
           background-color:red;
    } */

/* Original rule, modified above */
/* .big-num-text {
    font-size: 8.3rem;
    font-weight: bolder !important;
} */

/* Original rule, modified above */
/* .bottom-section > div.descx {
    font-size: 1.5rem;
    font-weight: normal !important;
} */


/*===========*/


/* EDITED: Added padding, background, overflow */
.bottom-section {
    /* background-color: white; /* Example background */
    padding: 1rem 0; /* Add some padding if needed */
    overflow: hidden; /* Prevent horizontal scrollbar from yellow bg */
}

/* EDITED: Added responsive font-size and example color */
.titlex {
    font-size: 1.5rem; /* Adjust as needed */
    color: #19234E; /* Example color */
}

@media (min-width: 768px) {
    .titlex {
        font-size: 1.75rem;
    }
}

/* EDITED: Added example color, max-width and margin handling for centering */
.descx_ {
    font-size: 1rem; /* Adjust as needed */
    color: #5A648A; /* Example color */
    max-width: 450px; /* Optional: constrain width */
    margin-left: auto; /* Center when text-center */
    margin-right: auto; /* Center when text-center */
}

@media (min-width: 768px) { /* EDITED: Added media query */
    .descx_ {
        margin-left: 0; /* Align left on md+ */
        margin-right: 0; /* Align left on md+ */
    }
}

/* EDITED: Made font size responsive, added line-height */
.big-num-text {
    font-size: 5rem; /* Smaller for mobile */
    font-weight: bolder !important;
    line-height: 1;
}

@media (min-width: 992px) { /* EDITED: Adjusted font size for lg */
    .big-num-text {
        font-size: 8.3rem;
    }
}

/* EDITED: Added rule for rounded image corners */
.bottom-section img.rounded {
    border-radius: 0.8rem !important; /* Adjust corner rounding */
}

/* EDITED: Added rule for consistent column padding */
.bottom-section > div[class*="col-"] {
    padding-left: 15px;
    padding-right: 15px;
}

/* EDITED: Added rule to remove padding for full-width background column */
.bottom-section > div.order-1 { /* Targetting the yellow column specifically */
    padding-left: 0;
    padding-right: 0;
}
    /* EDITED: Added rule for padding inside the yellow column */
    .bottom-section > div.order-1 > span {
        padding: 1rem; /* Add padding around the number */
    }

@media (min-width: 992px) { /* EDITED: Added media query */
    /* Adjust padding for lg if needed */
    .bottom-section > div.order-1 > span {
        padding: 0 1rem 0 0; /* Example: Padding only on right for lg */
    }
}

/* EDITED: Added rule for vertical spacing on mobile */
.bottom-section .mb-4 {
    margin-bottom: 1.5rem !important;
}

/* Your original CSS below - keep as is */
.top-section {
    margin: 8rem 0 4rem 0 !important;
    background-color: white !important;
    border-radius: .6rem !important;
    padding: 3rem !important;
    box-shadow: 0px 10px 33px -7px rgba(0,0,0,0.02);
    -webkit-box-shadow: 0px 10px 33px -7px rgba(0,0,0,0.02);
    -moz-box-shadow: 0px 10px 33px -7px rgba(0,0,0,0.02);
}


        .top-title {
/*            font-size: 1.7rem;*/
/*            color:red !important;*/
/*            background-color:yellow !important;*/
            font-weight:500 !important;
/*            font-size: 2rem;*/
            padding: 1rem 0 !important;
            font-weight: bold !important;
        }



.border-dashed-lg {
    border-left: none;
}

@media (min-width: 992px) {
    .border-dashed-lg {
        border-left: .3rem dashed #D9E8F5;
    }
}
/*        edited */ /* This comment was in your original CSS */

.top-section > div > div {
    padding: 0 3rem !important;
}

.bottom-wrapperx { /* Assuming this is unused based on HTML */
    margin: 0 0 !important;
    background-color: white !important;
    padding: 3rem !important;
}