.main_container.anim_sec {
    margin-top: 50px;
}

.anim_sec .container {
    width: 900px !important;
    max-width: unset !important;
    padding: 0px 0px !important;
    margin: auto;
}

.anim_sec p,a,li,h1,h2,h3,h4,h5,h6{
    color: #000 !important;
}
p.end_para.active {
    color: #111 !important;
}

section.open_ai_form {
            max-width: 1044px;
            margin: 0 auto;
            background: #ffffff;
        }

        section.open_ai_form input[type="submit"] {
            position: absolute;
            bottom: 15px;
            right: 10px;
            height: 40px;
            width: 40px;
            border-radius: 50%;
            overflow: hidden;
            font-size: 0px;
            padding: 0;
            background: url(https://staging.vipankumar.com/jhon/wp-content/uploads/2025/02/Frame-1171276263-1.png);
            background-size: cover;
        }

        .typewriter {
            position: absolute;
            top: 15px;
            left: 10px;
            right: auto;
            height: auto;
        }


        section.open_ai_form form {
            position: relative;
        }

        section.open_ai_form h2 {
            font-family: Rethink Sans;
            font-weight: 400;
            font-size: 44px;
            line-height: 44px;
            letter-spacing: -5%;
            text-align: center;
            color: #3F4B62;
        }

        section.open_ai_form textarea {
            font-family: Rethink Sans;
            background: #F3F3F3;
            border: none;
            border-radius: 25px;
            resize: none;
            width: 100%;
            padding: 15px;
        }

        .suggestion_wrapper li {
            list-style: none;
            display: inline-block;
            padding: 12px;
            margin-right: 12px;
            border: 1px solid #DDDDE1;
            border-radius: 51px;
            margin-bottom: 12px;
            font-family: Rethink Sans;
            font-weight: 500;
            font-size: 16px;
            line-height: 14px;
            letter-spacing: -1%;
            cursor: pointer;
        }

        .suggestion_wrapper ul {
            text-align: center;
        }

        .rotating {
            width: max-content;
            border-radius: 5px;
        }

        span.has_border {
            background: #000;
            height: 35px;
            width: 35px;
            display: block;
            border-radius: 0px;
            position: relative;
            overflow: hidden;
        }

        .top {
            position: absolute;
            height: 7px;
            width: 100%;
            background: rgb(255, 255, 255);
            top: 0px;
            left: -7px;
            animation: moveright 1.5s linear infinite;
        }

        .bottom {
            position: absolute;
            height: 7px;
            width: 100%;
            background: rgb(255, 255, 255);
            bottom: 0px;
            left: -7px;
            animation: moveleft 1.5s linear infinite;
        }


        .left {
            position: absolute;
            height: 100%;
            width: 7px;
            background: rgb(255, 255, 255);
            bottom: 0px;
            left: 0px;
            animation: moveup 2s linear infinite;

        }

        .right {
            position: absolute;
            height: 100%;
            width: 7px;
            background: rgb(255, 255, 255);
            bottom: 0px;
            left: auto;
            right: 0;
            animation: movedown 2s linear infinite;

        }

        .end_of_animation .rotating {
            margin: 0 auto;
            border: none;
        }

        .end_of_animation span.has_border {
            background: #fff;
            height: 50px;
            width: 50px;
            border-radius: 5px;
            overflow: hidden;
        }

        .end_of_animation .top,
        .end_of_animation .bottom,
        .end_of_animation .left,
        .end_of_animation .right {
            background: rgb(0, 0, 0);
        }

        @keyframes moveright {
            0% {
                transform: translateX(50%);
            }

            100% {
                transform: translateX(100%);
            }
        }

        @keyframes moveleft {
            0% {
                transform: translateX(-50%);
            }

            100% {
                transform: translateX(-100%);
            }
        }

        @keyframes moveup {
            0% {
                transform: translateY(50%);
            }

            100% {
                transform: translateY(-100%);
            }
        }

        @keyframes movedown {
            0% {
                transform: translateY(-50%);
            }

            100% {
                transform: translateY(100%);
            }
        }

        .processing_text {
            font-size: 25px;
        }

        .processing_text {
            font-size: 25px;
        }

        .custom.container {
            position: relative;
            width: 100%;
            height: 600px;
            /* Adjust based on your section size */
            max-width: 1000px;
            margin: 0 auto;

        }

        .main_container {
            background: #ffffff;
            padding: 30px 80px;
            border-radius: 16px 16px 0 0;
            outline: 12px solid #F7F6F433;
            max-width: 1100px;
            margin: 0 auto;
            overflow: hidden;
        }

        .section {
            position: absolute;
            opacity: 0;
            top: 0%;
            transform: translateY(100%);
            transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out,
                top 0.8s ease-in-out;
            width: 100%;
        }

        .section.active {
            opacity: 1;
            transform: translateY(-50%);
            top: 50%;
        }

        .hidden {
            opacity: 0;
            transform: translateY(-100%) scale(1.1);
            top: 0;

        }

        .last-section {
            position: relative;
            overflow: hidden;
            height: 80vh;
        }

        .last-section .scrolling-text {
            position: absolute;
            bottom: -100%;
            width: 100%;
            animation: scrollDown 3s linear forwards;
        }

        @keyframes scrollDown {
            0% {
                bottom: -100%;
            }

            100% {
                bottom: 0%;
            }
        }

        section.processing,
        section.processing2 {
            min-height: 250px;
            width: 100%;
            padding-top: 85px;
        }


        .process_wrapper {
            display: flex;
            gap: 15px;
            padding: 10px;
            border: 2px solid transparent;
            align-items: center;
            position: relative;
            left: calc(50% - 125px);
            /* transform: translateX(-50%); */
            transition: left 2s ease-in;
        }

        section.processing.visible .process_wrapper,
        section.processing2.visible .process_wrapper {
            left: 0;
            transform: none;
            transition: left 0.8s ease-in-out;
        }



        section.processing.visible .process_wrapper,
        section.processing2.visible .process_wrapper {
            padding: 10px;
            border: 2px solid #ccc;
            border-radius: 15px;
            width: 100%;
        }

        span.suggestion {
            padding: 5px 10px;
            background: #e7e7e7;
            color: #565656;
            border-radius: 10px;
            opacity: 0;

        }

        section.processing.visible span.suggestion {
            animation: opacity 2s linear forwards;
        }

        @keyframes opacity {
            0% {
                opacity: 0;
            }

            50% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        .scroll-section {
            width: 100%;
            height: 600px;
            overflow: hidden;
            /* Hide overflow to create scrolling effect */
            position: relative;
            padding: 20px;
        }

        .scroll-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            font-size: 18px;
            line-height: 1.6;
        }
        .scroll-content li{
            text-align: left;
        }

        /* Keyframes for smooth auto-scroll */
        @keyframes scrollContent {
            from {
                transform: translateY(0%);
            }

            to {
                transform: translateY(calc(-100% + 600px));
                /* Scrolls content to bottom */
            }
        }

        .box {
            opacity: 0;
        }

        .visible .box {
            padding: 5px 10px;
            background: #e7e7e7;
            color: #565656;
            border-radius: 10px;
            opacity: 0;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.8s ease forwards;
        }

        /* Adding delay for each component */
        .box:nth-child(1) {
            animation-delay: 0.0s;
        }

        .box:nth-child(2) {
            animation-delay: 0.2s;
        }

        .box:nth-child(3) {
            animation-delay: 0.4s;
        }

        .box:nth-child(4) {
            animation-delay: 0.6s;
        }

        .box:nth-child(5) {
            animation-delay: 0.8s;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .processing2 .processing_text span.box {

            margin-right: 10px;
        }

        /* .processing2 span.starting_text {
                font-size: 24px;
            } */

        .text_suffel p {
            font-size: 25px;
            background: #e7e7e7;
            padding: 10px;
            border-radius: 10px;
            width: max-content;
            display: none;
        }

        .text_suffel .end_para {
            background: transparent;
            padding: 10px;
        }

        .text_suffel p.active {
            display: block;
        }

        .text_suffel {
            width: max-content;
        }

        .text_suffel.active {
            animation: moveforward 1.5s ease-in forwards;
            animation-delay: 3.5s;
        }

        @keyframes moveforward {
            from {
                transform: translateX(0px);
            }

            to {
                transform: translateX(100%);
            }
        }

        .end_para.active {
            font-size: 24px;
            white-space: nowrap;
            overflow: hidden;
            width: 0;
            animation: typing 1s steps(20, end) forwards, blink 0.5s infinite;
        }


        .end_of_animation {
            text-align: center;
            padding: 60px 0;
            background: #fff;
        }


        .section .animated_text {
            position: absolute;
            top: 15px;
            left: 10px;
            right: auto;
            height: auto;
            width: 0px;
            padding: 0;
            white-space: nowrap;
            overflow: hidden;
        }

        .section.active .animated_text {
            animation: typing 3s steps(50, end) 0.5s forwards;
        }

        @keyframes typing {
            from {
                width: 0;
            }

            to {
                width: 100%;
            }
        }

        .loader {
            width: 50px;
            height: 50px;
            border: 5px solid #ddd;
            border-top: 5px solid #000;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @media screen and (max-width:767px) {
            .text_suffel p {
                font-size: 14px;
            }

            .end_para.active {
                font-size: 14px;
            }

            .scroll-content {
                font-size: 14px;
            }

            span.suggestion {
                display: flex;
                gap: 10px;

            }

            .processing_text {
                display: flex;
                flex-direction: column;
                gap: 8px;
            }

            .process_wrapper {
                align-items: start;
            }

            .scroll-section {
                height: 500px;
            }

            .custom.container {
                height: 500px;
            }

            span.starting_text {
                padding-top: 15px;

            }

            @keyframes moveforward {
                from {
                    transform: translateX(0px);
                }

                to {
                    transform: translateX(50px);
                }
            }
.anim_sec .container {
    width: 500px !important;
    max-width: 500px !important;
    padding: 0px 0px !important;
    margin: auto;
}
        }


        /* backup css temp */
        @media only screen and (max-width: 425px) {
    /* .container{
    max-width: 400px !important;
} */
.heading-one {
    font-size: 30px;
    line-height: 1.4;
}
.hero_section h1 span {
    padding: 0px 7px;

}
.hero_section {
    padding: 3rem 0rem;

}
.btn_primary{
font-size: 16px;
}

.btn_primary:hover{
    background-color: #111;
}

.btn_secondary{
font-size: 16px;
}
.btn-tertiary{
font-size: 16px;
}
.anim_sec .container {
    width: 232px !important;
    max-width: 500px !important;
    padding: 0px 0px !important;
    margin: auto;
}
.carousel {

    gap: 4rem;
}
.blog_card {
    flex: 0 0 85%;
}
.navbar-brand {
    width: 25%;
}
.btn_primary {
    font-size: 14px;
}
.roclo-ai-section {
    width: 100%;

}
}