.before_container {
            position: relative;
        }

        .before_banner {
            overflow: hidden;
        }

        .before_slider {
            position: relative;
            width: 100%;
            max-width: 1280px; /* Set max-width to 1280px */
            height: 100%;
            overflow: hidden;
        }

        .slider-content {
            display: flex;
            transition: transform 1s ease-in-out;
        }

        .before_slider img {
            flex: 0 0 100%;
            max-width: 100%;
            height: auto;
        }

        .mid_text {
            font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
            font-size: 21px; 
            color:#000000;
            text-align: center;
            padding: 21px;
            position: absolute;
            top: 45%;
            left: 49%; /* Adjusted to be centered horizontally */
            transform: translate(-50%, -50%);
            width: 360px;
        }
         .mid_text_small {
            font-size: 21px; 
            color:#000000;
           font-weight:bold;
        }
         .mid_text_large {
            font-size:70px; 
            color:#000000;
           font-weight:bold;
            padding-bottom:10px;
        }

        .button_before_after {
            background-color: #024f9f;
            color: #ffffff;
            font-size: 18px;
            padding: 5px 15px 5px 15px;
            margin: 20px 0px 5px 0px;
            display: inline-block;
            cursor: pointer;
            border-radius: 0px;
            width: auto;
            border: solid 1px #033262;
            max-width: 300px;
        }

        .button_before_after:hover {
            background-color: #ffffff;
            color: #024f9f;
        }


@media screen and (max-width: 768px) {
    .before_slider {
        /* Adjust styles for smaller screens */
        max-width: 100%; /* Adjust the width to fit smaller screens */
    }

    .mid_text {
        font-size:10px; 
        color:#000000;
        width: 80%; /* Adjust width to fit smaller screens */
        left: 50%; /* Keep it centered horizontally */
        top: -26%;
        transform: translateX(-50%);
        line-height:11px;
    }

         .mid_text_large {
            font-size:26px; 
            color:#000000;
            margin-bottom:1px;
            padding-bottom:0px;
        }
  .button_before_after {
            font-size: 9px;
            padding: 5px 5px 5px 5px;
            margin: 2px 0px 2px 0px;
            display: inline-block;
            cursor: pointer;
            border-radius: 0px;
            width: auto;           
            max-width: 180px;
        }