@media (min-width: 1400px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1300px;
    }
}

.title-wrap h1 {
    font-size: 50px;
    font-weight: 600;
    line-height: 140%;
    letter-spacing: -0.5px;
    color: #fff;
    position: relative;
    z-index: 99;
    margin: 0;
}

/* .title-wrap h1 span {
    color: var(--primarycolor);
    font-family: var(--primaryfont);
} */
.dots {
    position: relative;
}

.common-media {
    padding: 60px 0 7px 0;
}

@media screen and (max-width:1199px) {
    .common-media {
        padding: 55px 0px 12px 0;
    }
}

@media screen and (max-width:991px) {
    .common-media {
        padding: 50px 0 26px 0;
    }
}

@media screen and (max-width:767px) {
    .common-media {
        padding: 45px 0px 37px 0;
    }
}

@media (max-width:576px) {
    .common-media {
        padding: 35px 0;
    }
}

@media (max-width:480px) {
    .common-media {
        padding: 25px 0;
    }
}

.title-wrap .h4 .dots {
    left: 0;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background: var(--primarycolor);
    display: block;
}

.title-wrap .h4 {
    font-size: 14px;
    color: #4C596D;
    font-weight: 500;
    line-height: 150%;
    position: relative;
    padding-bottom: 15px;
    display: flex;
    gap: 10px;
    margin: 0;
}

.details-img-wrap img {
    margin: 0;
}

.banner-right-content {
    padding: 24px 16px;
    background: rgba(255, 108, 26, 0.05);
}

.banner-right-content .h3,
.banner-right-content h3 {
    color: #192A44;
    font-size: 22px;
    font-weight: 600;
    line-height: 29px;
    padding-bottom: 24px;
    margin-bottom: 0;
}

.banner-right-content p {
    color: #192A44;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
}

.author-main {
    margin-top: 10px;
}

audio {
    width: 500px;
    height: 60px;
}

.blog-author-detail p a {
    color: #192A44;
    font-size: 20px;
    font-weight: 600;
    line-height: 40px;
}

.blog-author-detail p a:hover {
    color: #ff6c1a;
}

.author-detail {
    color: #192A44;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
}

.blogs-main-content-wrap {
    margin-top: 85px;
}

.blog-post-content ul li,
.blog-post-content ol li,
.blog-post-content p{
    color: #192A44;
    font-size: 18px;
    font-weight: 400;
    line-height: 35px;
    padding-bottom: 14px;
}
label { color: #192A44;
    font-size: 18px;
    font-weight: 400;
    padding-bottom: 14px;}

li b,
p b {
    font-weight: 600;
}

@media (max-width:1199px) {

    .banner-right-content .h3,
    .banner-right-content h3 {
        font-size: 20px;
        font-weight: 600;
        line-height: 24px;
        margin-bottom: 0;
    }

    .title-wrap h1 {
        font-size: 34px;
        line-height: 132%;
    }

    audio {
        width: 400px;
        height: 50px;
    }

    .ai-cta .title-wrap {
        padding: 50px 0px 50px 50px;
    }

    .blogs-main-content-wrap {
        margin-top: 60px;
    }
}
@media (max-width:991px) {
    audio {
        width: 300px;
        height: 50px;
    }

    .blogs-main-content-wrap {
        margin-top: 50px;
    }
}
.blog-post-content .h2,
.blog-post-content h2 {
    color: #192A44;
    font-size: 26px;
    font-weight: 700;
    line-height: 36px;
    padding-bottom: 20px;
}
.blog-post-content h3,
.blog-post-content .h3 {
    color: #192A44;
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    padding-bottom: 10px;
}
.blog-post-content h4,
.blog-post-content .h4 {
    color: #192A44;
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
    padding: 10px 0px;
}
.sub-titles {
    color: #192A44;
    font-size: 18px;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 10px;
}
/* Table of contents start */
.table-of-content-section {
    position: sticky;
    top: 100px;
}
.blog-toc {
    border: 3px solid #FF6C1A66;
    border-radius: 15px;
    padding-top: 10px;
}
.recent-blogs-head .h2 {
    color: #192A44;
    font-size: 20px;
    font-weight: 700;
    line-height: 150%;
    padding-left: 20px;
}
.sidebar-blogs-single .h4 {
    margin-bottom: 0;
}
.smart-header .h4 {
    display: block;
    color: #192A44;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    padding: 10px 25px;
    border-radius: 4px;
    width: 100%;
    margin-bottom: 0;
}
.sidebar-blogs-single .h4 a {
    display: block;
    color: #192A44;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    padding: 10px 25px;
    border-radius: 4px;
    width: 100%;
}
.smart-image {
    padding: 10px 10px 0 10px;
}
.smart-image img {
    border-radius: 15px;
}
.smart-blog-first {
    cursor: pointer;
}
.popular-item:hover .popular-number {
    color: #FF8A3D !important;
    transition: 0.3s ease-in-out;
}
.popular-item:hover .h4 {
    color: #FF8A3D;
    transition: 0.3s ease-in-out;
}
.toc-scroll .menu-link.active {
    background: rgba(255, 108, 26, 0.15);
    color: #FF6C1A;
    font-weight: 600;
}
.toc-scroll {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.table-responsive.ai-table td,
.table-responsive.ai-table th {
    padding: 14px;
    text-align: start;
    border: 1px solid #E5E7EB;
}
.ai-table .table th {
    font-size: 16px;
    font-weight: 600;
    background: rgba(255, 108, 26, 0.10);
    color: #FF6C1A;
}
.ai-table .table td ul li,
.ai-table .table td {
    font-size: 18px;
    font-weight: 400;
}
.ai-table .table {
    font-size: 20px;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 20px 20px 0px 0px;
    overflow: hidden;
    border: 1px solid #E5E7EB;
}
@media (max-width:1199px) {

    .ai-table .table td ul li,
    .ai-table .table td {
        font-size: 16px;
    }
}
/* CTA STart */
.ai-cta-request {
    border-radius: 24px;
    border: 1.5px solid #E5E7EB;
    background: rgba(255, 108, 26, 0.02);
    padding: 50px 60px;
    max-width: 830px;
    margin: 0 auto;
}
@media (max-width:1199px) {
    .ai-cta-request {
        padding: 40px 50px;
    }
}
@media (max-width:991px) {
    .blog-post-content .h2,
    .blog-post-content h2 {
        font-size: 24px;
        line-height: 32px;
    }
    .ai-cta-request {
        padding: 40px;
        border-radius: 10px;
    }
    .title-wrap h1 {
        font-size: 30px;
    }
    .ai-table {
        margin-bottom: 20px;
    }
    .ai-table .table td ul li,
    .ai-table .table td {
        font-size: 16px;
        font-weight: 400;
    }
    .blog-video iframe {
        height: 270px !important;
    }
    .smart-image {
        padding: 0;
    }
    .recent-blogs-head .h2 {
        padding: 0px 0px 10px 0px
    }
}
@media (max-width: 700px) {
    .ai-cta-request {
        padding: 35px 40px;
        margin: 0;
    }
    .title-wrap h1 {
        font-size: 28px;
    }
    .blog-author-detail img {
        width: 33px !important;
        height: 33px !important;
    }
    .blog-author-detail p a {
        font-size: 18px;
        line-height: 130%;
    }
    .author-detail {
        font-size: 16px;
    }
    .blogs-main-content-wrap {
        margin-top: 35px;
    }
    .blog-post-content .h2,
    .blog-post-content h2 {
        font-size: 22px;
        line-height: 28px;
    }
    .blog-post-content ul li,
    .blog-post-content ol li,
    .blog-post-content p {
        font-size: 17px;
        line-height: 150%;
    }
    label{font-size: 17px;}
    .blog-post-content h4,
    .blog-post-content .h4 {
        font-size: 18px;
    }
    .blog-post-content .h2 {
        text-align: center !important;
    }
    .ai-cta .title-wrap {
        padding: 26px;
    }
}
@media (max-width: 575px) {
    .title-wrap h1 {
        font-size: 26px;
    }
    .author-detail {
        font-size: 14px;
    }
    audio {
        height: 40px;
    }
    .blog-video iframe {
        height: 250px !important;
    }
}
@media (max-width: 480px) {
    .ai-cta-request {
        padding: 30px 15px;
        border-radius: 16px;
    }
    .title-wrap h1 {
        font-size: 24px;
    }
    .blog-post-content .h2,
    .blog-post-content h2 {
        font-size: 20px;
        line-height: 26px;
        padding-bottom: 15px;
    }
    .blog-post-content ul li,
    .blog-post-content ol li,
    .blog-post-content p {
        font-size: 16px;
    }
    label{font-size: 16px;}

    .sub-titles {
        font-size: 16px;
    }
    .blog-post-content h4,
    .blog-post-content .h4 {
        font-size: 17px;
    }
    .blog-post-content .h2,
    .blog-post-content h2 {
        font-size: 18px;
    }
    .banner-cta-btns a {
        font-size: 12px;
    }
}
/* CTA End */
/* CTA Start */
.ai-cta-main {
    padding: 70px 0;
}
.ai-cta {
    border: 1px solid #E5E7EB;
    border-radius: 15px;
    background: rgba(255, 108, 26, 0.02);
    min-height: 336px;
    margin: 0 auto;
}
.ai-cta .title-wrap {
    padding: 0 0 0 45px;
}
.ai-cta-imgs {
    border-radius: 0px 15px 15px 0px;
}
@media (max-width: 1199px) {
    .ai-cta .title-wrap h2 {
        font-size: 24px;
    }
    .ai-cta-main {
        padding-top: 0;
    }
    /* .ai-cta .title-wrap {padding: 80px 0 70px 70px;} */
}
@media (max-width: 991px) {
    .ai-cta .title-wrap {
        padding: 40px;
    }
    .ai-cta-main {
        padding: 0 0 60px;
    }
    .ai-cta {
        margin: 0px;
    }
}
@media (max-width: 767px) {
    .ai-cta .title-wrap h2 {
        font-size: 22px;
    }
    .ai-cta .title-wrap {
        padding: 40px;
    }
}
@media (max-width: 480px) {
    .ai-cta .title-wrap h2 {
        font-size: 20px;
    }
    .ai-cta .title-wrap {
        padding: 30px 20px;
    }
    .ai-cta-main {
        padding: 0 0 45px;
    }
}
/* CTA End */
/* banner-cta-btns style start here */
.banner-cta-btns {
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;}
.banner-cta-btns a {
    display: block;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.5s;}
.banner-cta-btns a:first-child {
    border: 1px solid #ff6c1a;
    background: rgba(255, 108, 26, 0.10);
    color: #ff6c1a;}
.banner-cta-btns a:hover {
    color: #fff;
    background: #ff6c1a;}
.banner-list p {
    color: #192A44;
    font-size: 14px;
    font-weight: 600;}
.banner-list p span {
    color: #FF6C1A;}
@media (max-width:1199px) {
    .banner-cta-btns a {
        font-size: 15px;
        padding: 12px;}
    .banner-list p {
        font-size: 12px;}
    .ai-cta {
        min-height: auto;}
}
@media (max-width: 991px) {
    .banner-cta-btns a {
        padding: 10px 12px;
    }
}
@media (max-width:767px) {
    .banner-cta-btns a {
        font-size: 14px;
    }
}
/* Blog Scroll Section style start here */
.blog-section .blog-card {
    padding-bottom: 0
}
.blog-section .blog-card figure {
    margin-bottom: 0
}
.blog-section .desc {
    padding: 15px;
    background: #f7f7f7;
    border: 1px solid #ededed
}
.blog-section .bolg-category-title .h4,
.blog-section .bolg-category-title h4 {
    font-size: 14px;
    line-height: 21px;
    font-weight: 600;
    color: #192a44;
    padding-right: 10px;
    margin: 0;}
.blog-section .blog-card .bolg-category-title img {
    visibility: hidden;}
.blog-section .blog-card:hover .bolg-category-title img {
    transition: 1s ease-in-out;
    visibility: visible;}
.blog-section .blog-card h3,
.blog-section .blog-card .h3 {
    color: var(--secondrycolor);
    font-size: 20px;
    font-weight: 600;
    line-height: 150%;
    transition: .3s ease-in-out;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 60px;
    margin: 0 !important;
    padding: 0;}
.blog-section .blog-card:hover h3 {
    color: var(--primarycolor)
}
@media screen and (max-width:1199px) {
    .blog-section .blog-card h3,
    .blog-section .blog-card .h3 {
        font-size: 18px;
        min-height: 54px;}
}
@media screen and (max-width:767px) {
    .blog-section .blog-card h3,
    .blog-section .blog-card .h3 {
        font-size: 17px;
        min-height: 50px;}
}
@media screen and (max-width:480px) {
    .blog-section .desc {
        padding: 10px;}
    .blog-section .bolg-category-title .h4,
    .blog-section .bolg-category-title h4 {
        font-size: 13px;}
    .blog-section .blog-card h3,
    .blog-section .blog-card .h3 {
        font-size: 15px;
        min-height: 45px;}
}
/* Blog Scroll Section style ends here */
/* Contact Section style start here */
.contact-section {
    margin: 40px 0 100px
}
.contact-section hr {
    border-top: 0 solid #e6e8ea;
    position: relative;
    height: 2px;
    opacity: 1;
    background: #e6e8ea;
    margin-bottom: 90px
}
.contact-section .btm-hr {
    margin-top: 90px;
    margin-bottom: 0;}
.contact-section hr:before,
.contact-section hr:after {
    width: 35px;
    height: 2px;
    background: #ff6c1a;
    content: "";
    position: absolute;
    left: 0;
    top: 0;}
.contact-section hr:after {
    width: 6px;
    background: #fff;
    left: 35px
}
.quick-contact .q-contact h4,
.quick-contact .q-contact .h4 {
    color: #ff6c1a;
    font-size: 20px;
    font-weight: 600;
    line-height: 150%;
    padding-bottom: 20px;}
.quick-contact .q-contact a {
    color: var(--secondrytextcolor);
    font-size: 16px;
    line-height: 168%;
    text-decoration: none;
    padding-bottom: 0;
    border-bottom: 1px solid #96a1b3;}
.quick-contact .q-contact a:hover {
    color: var(--primarycolor);
    border-bottom: 1px solid var(--primarycolor);}
.q-contact p {
    padding: 0;
    margin: 0 0 15px;}
.q-contact p i {
    width: 26px;
    height: 26px;
    line-height: 26px;
    background: #ff6c1a;
    text-align: center;
    border-radius: 100%;
    color: #fff;
    margin: 0 10px 0 0;
    display: inline-block;
    font-size: 16px;}
.bi-envelope-open::before {
    content: "\f32e"
}
.bi-whatsapp::before {
    content: "\f618"
}
.bi-skype::before {
    content: "\f656"
}
.bi-telegram::before {
    content: "\f5b3"
}
.bi-people::before {
    content: "\f4d0"
}
.bi-book::before {
   content: "\f194"
}
@media screen and (max-width:1199px) {
    .contact-section {
        margin: 50px 0 100px;
    }
    .quick-contact .q-contact h4,
    .quick-contact .q-contact .h4 {
        font-size: 18px;
    }
}
@media screen and (max-width:991px) {
    .q-contact {
        width: 50%;
    }
    .quick-contact {
        flex-wrap: wrap;
        row-gap: 20px;
    }
    .quick-contact .q-contact a {
        font-size: 14px;
    }
}
@media (max-width:767px) {
    .contact-section {
        margin: 0 0 50px;
    }
    .quick-contact {
        flex-wrap: wrap;
        row-gap: 20px;
    }
}
@media (max-width:480px) {
    .q-contact {
        width: 100%;
    }
    .contact-section .btm-hr {
        margin-top: 50px;
        margin-bottom: 0;
    }
}
.getintochform {
    position: relative !important;
    margin-bottom: 30px
}
.getintochform .form-floating>.form-control,
.getintochform .form-floating>.form-control-plaintext,
.getintochform .form-floating>.form-select {
    height: 52px !important;
    min-height: 52px !important;
    line-height: 1.25 !important
}
.getintochform .form-control {
    border-radius: 4px;
    height: 52px;
    min-height: 52px;
    border: 1px solid rgba(0, 0, 0, .09);
    background-color: rgba(0, 0, 0, .04);
    color: #000;
    width: 100%;
    padding: 17px 10px 0;
    font-size: 16px;
    letter-spacing: -0.3px
}
.getintochform select.form-control {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    padding-top: 0
}
.getintochform .form-floating textarea.form-control {
    height: 104px !important;
    min-height: 104px !important
}
.getintochform .form-floating>label {
    font-size: 16px
}
.getintochform .form-floating>.form-control-plaintext~label::after,
.getintochform .form-floating>.form-control:focus~label::after,
.getintochform .form-floating>.form-control:not(:placeholder-shown)~label::after,
.getintochform .form-floating>.form-select~label::after {
    background-color: transparent
}
.getintochform .form-control:focus,
.getintochform .form-control:hover {
    background-color: rgba(242, 88, 48, 0.08);
    border-color: rgba(242, 88, 48, 0.25);
    outline: 0;
    box-shadow: none
}
.getintochform .btn-primary {
    min-width: 175px !important;
    padding: 12px 38px !important;
    font-size: 16px !important;
    line-height: 168% !important;
    font-weight: 500 !important;
    border-radius: 0 !important;
    height: auto !important;
    width: auto !important;
    margin-bottom: 20px;
    background: #ff6c1a !important;
    color: #fff !important;
    border: 1px solid #ff6c1a !important;
    transition: .3s ease-in-out !important;
    display: inline-block !important;
    text-align: center !important
}
.getintochform .btn-check:checked+.btn,
.getintochform .btn.active,
.getintochform .btn.show,
.getintochform .btn:first-child:active,
.getintochform :not(.btn-check)+.btn:active,
.getintochform .btn-check:active+.btn-primary,
.getintochform .btn-check:checked+.btn-primary,
.getintochform .btn-primary.active,
.getintochform .btn-primary:active,
.getintochform .show>.btn-primary.dropdown-toggle,
.getintochform .btn-primary:not(:disabled):not(.disabled).active:focus,
.getintochform .btn-primary:not(:disabled):not(.disabled):active:focus,
.getintochform .show>.btn-primary.dropdown-toggle:focus,
.getintochform .btn:focus-visible {
    background: #ff6c1a !important;
    color: #fff !important;
    border: 1px solid #ff6c1a !important;
    box-shadow: none !important
}
.getintochform .error {
    color: red;
    font-size: 0.875rem;
    position: absolute;
}
@media (max-width:480px) {
    .getintochform .btn-primary {
        min-width: 150px !important;
        padding: 8px 38px !important;
    }
}
/* Contact Section style ends here */
.pros-cons {
    background-color: #f3f6f9;
}
.list-img.tick li:before {
    background: url(../images/tick.svg) no-repeat left top;
}
.list-img.exclamation li:before {
    background: url(../images/exclamation-red.svg) no-repeat left top;
}
/* FAQ Start */
.faq .accordion-item {
    border: 0;
    border-bottom: 1px solid #E5E7EB;
    &:last-child {
        border-bottom: 0;
    }
}
.faq .accordion-button {
    font-size: 20px;
    color: #4C596D;
    padding: 30px 0;
    gap: 5px;
}
.faq .accordion-button:not(.collapsed) {
    font-weight: 600;
    color: #111928;
    background-color: transparent;
    box-shadow: 0 0 0 0;
}
.faq .accordion-button::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.0007 0.0820312C8.10555 0.0820312 0.0839844 8.1036 0.0839844 17.9987C0.0839844 27.8939 8.10555 35.9154 18.0007 35.9154C27.8958 35.9154 35.9173 27.8939 35.9173 17.9987C35.9173 8.1036 27.8958 0.0820312 18.0007 0.0820312ZM19.6673 11.332C19.6673 10.4116 18.9212 9.66536 18.0007 9.66536C17.0802 9.66536 16.334 10.4116 16.334 11.332V16.332H11.334C10.4135 16.332 9.66732 17.0782 9.66732 17.9987C9.66732 18.9192 10.4135 19.6654 11.334 19.6654H16.334V24.6654C16.334 25.5859 17.0802 26.332 18.0007 26.332C18.9212 26.332 19.6673 25.5859 19.6673 24.6654V19.6654H24.6673C25.5878 19.6654 26.334 18.9192 26.334 17.9987C26.334 17.0782 25.5878 16.332 24.6673 16.332H19.6673V11.332Z" fill="%23FF6C1A" fill-opacity="0.2"/></svg>');
    width: 40px;
    height: 40px;
    background-size: 40px;
}
.faq .accordion-button:not(.collapsed)::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.0007 2.08203C10.1056 2.08203 2.08398 10.1036 2.08398 19.9987C2.08398 29.8939 10.1056 37.9154 20.0007 37.9154C29.8958 37.9154 37.9173 29.8939 37.9173 19.9987C37.9173 10.1036 29.8958 2.08203 20.0007 2.08203ZM13.334 18.332C12.4135 18.332 11.6673 19.0782 11.6673 19.9987C11.6673 20.9192 12.4135 21.6654 13.334 21.6654H26.6673C27.5878 21.6654 28.334 20.9192 28.334 19.9987C28.334 19.0782 27.5878 18.332 26.6673 18.332H13.334Z" fill="%23FF6C1A"/></svg>');
}
.faq .accordion-button:focus {
    box-shadow: 0 0 0 0;
}
.faq .accordion-body {
    padding: 0 0 30px;
}
.faq .accordion-body p {
    color: #192A44;
    font-size: 18px;
    font-weight: 400;
    line-height: 162%;
}
/* FAQ End */
@media (max-width: 767px) {
    .faq .accordion-button {
        font-size: 18px;
        padding: 20px 0;
    }
    .faq .accordion-body p {
        font-size: 17px;
    }
}
@media (max-width: 576px) {
    .faq .accordion-button {
        font-size: 16px;
        padding: 20px 0;
    }
    .faq .accordion-body p {
        font-size: 15px;
    }
    .faq .accordion-button::after {
        width: 30px;
        height: 30px;
        background-size: 30px;
    }
}/* Footer Start */
.lines-white hr {
    background: #D1D5DB;
}
.social-icons ul li a {
    transition: 0.3s ease-in-out;

    &:hover svg path {
        fill: #ff6c1a;
    }
}
.footer-heading ul li a:hover {
    font-weight: 400 !important;
}
@media screen and (max-width: 991px) {
    .footer-heading p {
        padding-bottom: 25px !important;
    }
    .lines-white hr {
        margin: 0 0 25px;
    }
}
/* Footer End */
/* Table of Contents style start here */
body button.btn.btn-toc {
    background: #ff6c1a !important;
    color: #fff !important;
    border-radius: 0;
    position: relative;
}
body button.btn.btn-toc.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;}
.toc-main {
    position: relative;
    margin-top: 30px;
    margin-bottom: -60px;
    z-index: 1;}
.btn-toc {
    background: #ff6c1a !important;
    color: #fff !important;
    border-radius: 0;}
.btn-toc .btn.show {
    color: #fff !important;}
.btn-toc.dropdown-menu.show {
    position: relative !important;
    transform: translate(0, 0) !important;
    transition: all 2s ease-in-out;}
.btn-toc.toc-tab-menu.dropdown-menu.show {
    position: absolute !important;
    top: 100% !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    &::-webkit-scrollbar {
        width: 5px !important;
    }
    &::-webkit-scrollbar-thumb {
        background-color: #ff6c1a !important;
        border-radius: 20px !important;
    }
}

.btn-toc.dropdown-menu {
    width: 100%;
    background: #f3f6f9 !important;
    border-radius: 6px;
    padding: 25px
}
.btn-toc.dropdown-menu li {
    list-style: disc;
    list-style-position: inside;
    color: #000
}
.btn-toc.dropdown-menu li a {
    font-size: 16px;
    color: #4c596d !important
}
.btn-toc.dropdown-menu li a:hover {
    color: #ff6c1a !important
}
@media (max-width:991px) {
    .toc-main {
        margin-bottom: -40px;
    }
    .table-of-content-section {
        top: 20px;
    }
}
@media (max-width:767px) {
    .toc-main {
        margin-bottom: -20px;
    }
    .btn-toc.dropdown-menu li a {
        font-size: 14px;
    }
    .btn-toc.dropdown-menu {
        padding: 15px;
    }
}
@media (max-width:576px) {
    .btn-toc.dropdown-menu {
        padding: 10px;
    }
}
.ai-table::-webkit-scrollbar {
    background-color: #e5e7eb;
    width: 5px;
    height: 5px;
    /* width of the entire scrollbar */
}
.ai-table::-webkit-scrollbar-thumb {
    background-color: #ff6c1a;
    border-radius: 6px;
    width: 5px;
    height: 5px;
}
/* Keep TOC labels in logical LTR order even inside RTL scroll containers */
.blog-toc .menu-link {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
    display: block;
}
.toc-scroll .toc-subitems .menu-link.active {
    background: transparent;
}
.toc-subitems li {
    list-style: none;
    position: relative;
    padding-left: 30px;
}
.toc-scroll .toc-subitems li .menu-link.active::before {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background: #ff6c1a;
    left: 15px;
    top: 12px;
    transform: translate(-50%, -50%);
}
.toc-subitems {
    flex-direction: column;
    gap: 10px;
    margin: 10px 0;
}
.custom-scroll {
    /* max-height: calc(100vh - 150px); */
    max-height: 300px;
    overflow-y: auto;
    padding-right: 6px;
    direction: rtl;
    text-align: end;
    &::-webkit-scrollbar {
        width: 5px;
    }
    &::-webkit-scrollbar-thumb {
        background-color: transparent;
        border-radius: 20px;}
}
.custom-scrolls {
    max-height: 600px;
    overflow-y: auto;
    padding-right: 6px;
    direction: rtl;
    text-align: end;
    position: sticky;
    top: 100px;
    &::-webkit-scrollbar {
        width: 5px;
    }
    &::-webkit-scrollbar-thumb {
        background-color: #ff6c1a;
        border-radius: 20px;}
    }
.popular-number {
    margin: auto;
    color: #FF6C1A66;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;}
.popular-section {
    border: 3px solid #FF6C1A66;
    padding: 10px;
    border-radius: 15px;}
.horizontal-line {
    margin: 30px 0px;
    height: 0px;
    border-top: 0 solid #e6e8ea;
    position: relative;
    height: 2px;
    opacity: 1;
    background: #e6e8ea;}
.horizontal-lines {
    margin: 30px 0px 20px 0px;
    height: 0px;
    border-top: 0 solid #e6e8ea;
    position: relative;
    height: 2px;
    opacity: 1;
    background: #e6e8ea;}
.horizontal-lines:before,
.horizontal-lines:after,
.horizontal-line:before,
.horizontal-line:after {
    width: 35px;
    height: 2px;
    background: #ff6c1a;
    content: "";
    position: absolute;
    left: 0;
    top: 0;}

.horizontal-lines:after,
.horizontal-line:after {
    width: 6px;
    background: #fff;
    left: 35px;}

.responsive-height {
    height: auto;
    /* mobile (default) */}
@media (min-width: 768px) {
    .responsive-height {
        height: 100%;
        /* tablet + desktops */}
}

.toc-subitems {
    display: none;}
/* End */

/* how-to-build-deploy-spring-boot-application blog Start */
.content-main {
    border-radius: 15px;
    background: #2b2f35;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);}
.content-main:hover {
    transform: translateY(-3px);}
.content-copy {
    padding: 10px 15px;
    border-radius: 15px 15px 0 0;
    border-bottom: 1px solid #ffddb9;}
.content-body {
    padding: 15px 15px;}
.content-body p {
    color: #ffddb9;}
.copy-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 8px;
    color: #fff;
    background: #ff6c1a;
    padding: 3px 10px;
    cursor: pointer;
    &:hover {
        background-color: #e65a00;}
}
.content-body pre {
    &::-webkit-scrollbar {
        height: 4px;}

    &::-webkit-scrollbar-thumb {
        background-color: #ff6c1a;
        border-radius: 20px;}
}
.content-body pre code {
    color: #ffddb9;}
.copy-main {
    position: absolute;
    right: 10px;
    top: 10px;}
.copy-tooltip {
    position: absolute;
    top: -30px;
    right: 0;
    background-color: #fff;
    color: #000;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateY(5px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 10;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);}

.copy-tooltip.show {
    opacity: 1;
    transform: translateY(0);}
@media (max-width:991px) {
    .copy-main {
        position: relative;
        right: 10px;
        top: 10px;
        display: flex;
        justify-content: end;
        margin-bottom: 5px;}
}

/* End */
.author-detail-img {
    width: calc(100% - 70px);

    & img {
        width: 100%;}
}

@media (max-width:991px) {
    .author-detail-img {
        width: auto;

        & img {
            width: auto;}
    }
}

@media (max-width:700px) {
    .author-detail-img {
        width: calc(100% - 70px);

        & img {
            width: 100% !important;
            height: auto !important;}
    }
}
.banner-new {
    background-color: #4c596d;
    align-items: center;
    justify-content: center;
}
/* .banner-image {
    width: calc(100% - 250px);
} */
.blog-banner-header {
    background-color: #192A44;
    height: 430px;
    padding: 20px;}
.blog-banner {
    height: 100%;}

@media(max-width:1199px) {
    .blog-banner-header {
        height: auto;}
    .blog-banner {
        height: auto;}
    }
@media(max-width: 991px) {
    .popular-number {
        text-align: end;
        margin: 0;}
    }
@media(max-width:576px) {
    .blog-header h1 {
        text-align: center !important;
        margin: auto !important;}
    .blog-banner-header {
        display: flex;
        align-items: center;
        height: 200px;}
    .blog-banner {
        display: block;
        align-items: center !important;
        margin: auto;}
    .banner-image {
        display: none;}
}
@media (max-width:991px) {
    .popular-content hr {
        border-top: 0 solid #e6e8ea;
        position: relative;
        height: 2px;
        opacity: 1;
        background: #e6e8ea;
        margin: 70px 0px 10px 0px;}
    .popular-content hr:before,
    .popular-content hr:after {
        width: 35px;
        height: 2px;
        background: #ff6c1a;
        content: "";
        position: absolute;
        left: 0;
        top: 0;}
    .popular-content hr:after {
        width: 6px;
        background: #fff;
        left: 35px;}
}
@media (max-width: 480px) {
    .popular-content hr {
        margin: 40px 0px 60px 0px;}
}
.recommend {
    display: flex;
    border-radius: 24px;
    border: 1.5px solid #ff6c1a;
    background: rgba(255, 108, 26, 0.02);
    padding: 30px 40px;
    max-width: 830px;
    margin: 0 auto;
    flex-direction: row;
    background: linear-gradient(240deg, #ffe6cf, #fff2e8);}
/* recommend section Start */
.recommend h4 {
    padding: 10px 0 5px 0 !important;}

.recommend h5 {
    font-size: 14px !important;
    padding: 7px !important;
    border-radius: 24px;
    font-size: 12px;
    font-weight: 600;
    color: #ff7a00;
    background: linear-gradient(180deg, #ffe6cf);
    width: fit-content;}

.recommend p {
    font-size: 16px;
    padding: 0px;}

@media (max-width:767px) {
    .recommend {
        flex-direction: column;}

    .recommend p {
        padding-bottom: 10px;}
}
@media (max-width:567px) {
    .recommend {
        padding: 20px 17px;}
    .banner-cta-btns a {
        padding: 8px 10px;}
}
/* recommend section End */
/* protips section Start */
.protips {
    display: flex;
    border-radius: 24px;
    border: 1.5px solid #2563EB;
    background: rgba(255, 108, 26, 0.02);
    padding: 30px 40px;
    max-width: 830px;
    margin: 0 auto;
    flex-direction: row;
    background: linear-gradient(180deg, #DCE6F6 10%, #FFFFFF 100%);}
.protips span {
    color: #2563EB !important;}
.protips p {
    color: #2563EB !important;}
.protips ul li {
    color: #2563EB !important;}
.protips h4 {
    color: #2563EB !important;}
.protips.orange {background: linear-gradient(180deg, #FFE6CF 10%, #FFFFFF 100%);
border: 1.5px solid #FF6C1A;}
.protips.orange span {
    color: #FF6C1A !important; }
.protips.orange p {
    color: #FF6C1A !important;}
.protips.orange ul li {
    color: #FF6C1A !important;}
.protips.orange h4 {
    color: #FF6C1A !important;}
@media (max-width:567px) {
    .protips {
        padding: 20px 17px;
    }
}
/* protips section End */
/* quote section Start */
.quote-box {
    background: #f5f5f5;
    border-left: 4px solid #F97316;
    padding: 16px 18px;
    font-style: italic;
    font-family: "Georgia", "Times New Roman", serif;
    color: #1F2937;
    font-size: 20px;
    max-width: 700px;}
@media (max-width: 1199px) {
    .quote-box {
        max-width: 500px;
        font-size: 18px; }
}
@media (max-width: 767px) {
    .quote-box {
        max-width: auto;
        font-size: 16px;}
}
/* quote section End */
/* preferred notes Start */
.preferred-box {
  padding: 20px 24px!important;
  margin: 15px 0px!important;
  background-color: transparent;
  border-left: 4px solid transparent;
  transition: 
    background-color 0.4s ease,
    border-left 0.4s ease,
    transform 0.3s ease;}
.preferred-box {
  border-left: 4px solid #FF6C1A;
   background-color: #f3f7ff;
  transform: translateY(-2px);}
.preferred-box:hover {
 transform: translateY(-4px);}
/* preferred notes End */
/* important notes Start */
.important-box{border-left: 4px solid #FF6C1A;
padding: 10px 20px;}
@media (max-width: 767px) {
    .important-box{border-left: 3px solid #FF6C1A;
        padding: 3px 8px;}
}
/* important notes End */
/* Quick Facts Start */

.quick-facts {
    display: flex;
    flex-direction: column;
    gap: 12px;}
.fact-item {
    display: flex;
    align-items: center; 
    gap: 10px;}
.fact-item span {
    font-size: 18px;}
@media (max-width: 700px) {
    .fact-item span {font-size: 17px;}
}
@media (max-width: 480px) {
    .fact-item span {font-size: 16px;}
}
/* Quick Facts End */

  .blog-post-content ul.star-list {
      list-style: none !important;
      padding-left: 0 !important;
      margin-left: 0 !important;
    }
    .blog-post-content ul.star-list li {
      list-style: none !important;
      position: relative;
      padding-left: 22px;
    }
    .blog-post-content ul.star-list li::before {
      content: "\2605";
      position: absolute;
      left: 0;
      top: 10px;
      color: #000000;
      font-size: 14px;
      line-height: 1;
    }

    /* how-to-build-deploy-spring-boot-application blog Start */
.content-main {border-radius: 15px;background: #2b2f35;box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);}
.content-main:hover{transform: translateY(-3px);}
.content-copy {padding: 10px 15px;border-radius: 15px 15px 0 0;border-bottom: 1px solid #ffddb9;}
.content-body {padding: 15px 15px;}
.content-body p {color: #ffddb9;}
.copy-wrapper {position: relative;display: flex;align-items: center;justify-content: center;font-size: 14px;border-radius: 8px;color: #fff;background: #ff6c1a;padding: 3px 10px;cursor: pointer;
&:hover {background-color: #e65a00;}}
.content-body pre {
  &::-webkit-scrollbar {height: 4px;}
&::-webkit-scrollbar-thumb {background-color: #ff6c1a;border-radius: 20px;}
}
.content-body pre code {color: #ffddb9;}
.copy-main {position: absolute;right: 10px;top: 10px;}
.copy-tooltip {position: absolute;top: -30px;right: 0;background-color: #fff;color: #000;padding: 4px 8px;border-radius: 4px;font-size: 12px;white-space: nowrap;opacity: 0;pointer-events: none;transform: translateY(5px);transition: opacity 0.3s ease, transform 0.3s ease;z-index: 10;box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);}
.copy-tooltip.show {opacity: 1;transform: translateY(0);}
@media (max-width:991px) {.copy-main {position: relative;right: 10px;top: 10px;display: flex;justify-content: end;margin-bottom: 5px;}}
/* End */