.typing-demo {
    width: 63ch;
    animation: typing 2s steps(10), blink .5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    font-family: monospace;
    font-size: 2em;
}

@keyframes typing {
    from {
        width: 0
    }
}

@keyframes blink {
    50% {
        border-color: transparent
    }
}

.itslogo {
    width: 44%
}

section {
    padding: 24px !important;
}



.carousel-caption {
    position: absolute !important;
    right: 22% !important;
    bottom: 1.25rem !important;
    left: 0% !important;
    padding-top: 3.25rem !important;
    padding-bottom: 3.25rem !important;
    color: #fff !important;
    text-align: center !important;
}

/* XS Devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .carousel-caption {
        position: absolute !important;
        right: 22% !important;
        bottom: -3.75rem !important;
        left: 0% !important;
        padding-top: 3.25rem !important;
        color: #fff !important;
        text-align: center !important;
    }

    .itslogo {
        width: 30%
    }

    .itstxt {
        font-size: 16px !important;
    }

    .common-steps .step-item::before {
        position: absolute;
        content: "";
        height: 1px;
        width: 100%;
        top: 50px;
        left: 50%;
        z-index: -1;
    }
}

/* SM Devices (landscape phones, ≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767.98px) {

    .carousel-caption {
        position: absolute !important;
        right: 22% !important;
        bottom: -9.75rem !important;
        left: 0% !important;
        padding-top: 3.25rem !important;
        padding-bottom: 14.25rem !important;
        color: #fff !important;
        text-align: center !important;
    }

    .itslogo {
        width: 44%
    }

    .itstxt {
        font-size: 63px !important;
    }

    .common-steps .step-item::before {
        position: absolute;
        content: "";
        height: 1px;
        width: 100%;
        border: 1px dashed #00447e;
        top: 50px;
        left: 50%;
        z-index: -1;
    }
}

/* MD Devices (tablets, ≥768px and <992px) */
@media (min-width: 768px) and (max-width: 991.98px) {

    .carousel-caption {
        position: absolute !important;
        right: 22% !important;
        bottom: -9.75rem !important;
        left: 0% !important;
        padding-top: 3.25rem !important;
        padding-bottom: 14.25rem !important;
        color: #fff !important;
        text-align: center !important;
    }

    .itslogo {
        width: 44%
    }

    .itstxt {
        font-size: 63px !important;
    }

    .common-steps .step-item::before {
        position: absolute;
        content: "";
        height: 1px;
        width: 100%;
        top: 50px;
        left: 50%;
        z-index: -1;
    }
}

/* LG Devices (desktops, ≥992px and <1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {

    .carousel-caption {
        position: absolute !important;
        right: 22% !important;
        bottom: -9.75rem !important;
        left: 0% !important;
        padding-top: 3.25rem !important;
        padding-bottom: 14.25rem !important;
        color: #fff !important;
        text-align: center !important;
    }

    .itslogo {
        width: 44%
    }

    .itstxt {
        font-size: 63px !important;
    }

    .common-steps .step-item::before {
        position: absolute;
        content: "";
        height: 1px;
        width: 100%;
        border: 1px dashed #00447e;
        top: 50px;
        left: 50%;
        z-index: -1;
    }
}

/* XL Devices (large desktops, ≥1200px and <1400px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {

    .carousel-caption {
        position: absolute !important;
        right: 22% !important;
        bottom: -9.75rem !important;
        left: 0% !important;
        padding-top: 3.25rem !important;
        padding-bottom: 14.25rem !important;
        color: #fff !important;
        text-align: center !important;
    }

    .itslogo {
        width: 44%
    }

    .itstxt {
        font-size: 63px !important;
    }

    .common-steps .step-item::before {
        position: absolute;
        content: "";
        height: 1px;
        width: 100%;
        border: 1px dashed #00447e;
        top: 50px;
        left: 50%;
        z-index: -1;
    }
}

/* XXL Devices (larger desktops, ≥1400px) */
@media (min-width: 1400px) {
    .carousel-caption {
        position: absolute !important;
        right: 22% !important;
        bottom: -14.75rem !important;
        left: 0% !important;
        padding-top: 3.25rem !important;
        padding-bottom: 14.25rem !important;
        color: #fff !important;
        text-align: center !important;
    }

    .itslogo {
        width: 44%
    }

    .itstxt {
        font-size: 63px !important;
    }

    .common-steps .step-item::before {
        position: absolute;
        content: "";
        height: 1px;
        width: 100%;
        border: 1px dashed #00447e;
        top: 50px;
        left: 50%;
        z-index: -1;
    }
}



/* Button styling */


/* Responsive text adjustments */
@media (max-width: 767px) {
    .hedclass {
        font-size: 18px;
    }

    .subclass {
        font-size: 14px;
    }

    .read-more {
        font-size: 14px;
        padding: 6px 12px;
    }
}


@media (max-width: 576px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

   
}


@media (max-width: 768px) {
    .hedclass {
        font-size: 18px;
    }

    .subclass {
        font-size: 14px;
    }

    .read-more {
        font-size: 14px;
        padding: 8px 16px;
    }
}


.read-more-wrapper {
    position: absolute;
    bottom: 7px;
    left: 20px;
    right: 20px;
}

.read-more {
    display: inline-block;
    background-color: #2a347f;
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s;
    font-size: 11px;
}

.read-more:hover {
    background-color: #0056b3;
}