﻿.two-col-content-div a, h4.post-title {
    white-space: normal;
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.plan-wrapper .col-md-4, .plan-wrapper .col-md-6 {
    border-right: 1px solid #d3d3d3;
    padding: 39px
}

.plan-wrapper, .what-wrapper {
    box-shadow: 0 4px 8px 0 transparent,0 6px 25px 0 rgba(0,0,0,.1)
}

.link, .news-block .image-box .image img {
    width: 100%
}

.news-block .image-box .image img {
    max-width: 100%;
    height: 100%
}

.cloud-heading, .plan-wrapper, .section-tab .nav-item, .section-tab .tab-content ul li, .what, .what-wrapper, section.fourth-wrapper-slide.app-development-wrap .cloud-wrapper ul li, ul.cloud-native li {
    text-align: center
}

.blog-form-container .form-row .col-md-6 {
    max-width: 100%
}

.blog-form-container-section {
    border-radius: 15px;
    padding: 0;
    position: sticky;
    top: 72px
}

.blog-form-container .col-lg-12 .form-row .form-control:focus {
    box-shadow: none !important
}

.blog-form-container.row.contact-from-wrap-container.align-items-center.w-100.m-auto.contact-from-wrap.contact-from-wrap-home {
    padding: 0 0 20px
}

    .blog-form-container.row.contact-from-wrap-container.align-items-center.w-100.m-auto.contact-from-wrap.contact-from-wrap-home .col-lg-12 {
        padding: 10px
    }

.blog-form-container-section .contact-from-wrap form .form-control {
    min-height: 35px
}

.two-col-divs-blog-listing-page {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 15px;
    margin-bottom: 30px
}

.two-col-content-div span {
    background: #b6b5b5;
    padding: 5px 7px;
    border-radius: 10px;
    font-size: 14px
}

.two-col-content-div a {
    margin-top: 10px;
    font-weight: 700;
    color: #000
}

.pg-cloud p, .what {
    color: #fff
}

.two-col-content-div a:hover {
    color: #595959
}

.latest-blog-img-blog-listing-page {
    max-width: 100%;
    margin-bottom: unset;
    border-radius: 12px
}

.blog-listing-page-rigt-container {
    background: #eee;
    padding-inline: 15px;
    padding-top: 15px;
    position: sticky;
    top: 90px
}

.link, .section-tab .tab-content ul li, .w-underline, .what-wrapper {
    position: relative
}

.consent-blog-form.consent-checkbox input[type=checkbox] {
    margin-top: -7px !important
}

.blog-grid-wrapper {
    padding: 30px 0 40px
}

h4.post-title {
    height: 48px
}

.blog-detail-wrapper {
    padding: 30px 0 0
}

.what-we-do {
    background: #000
}

section.plan {
    padding: unset
}

.plan-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: #fff;
    margin-top: -3rem
}

    .plan-wrapper h2, .plan-wrapper p {
        padding-top: 19px
    }

.remove-border-right {
    border-right: none !important
}

.plan-wrapper .col-md-6 {
    border-top: 1px solid #d3d3d3
}

    .plan-wrapper .col-md-6:last-child, ul.cloud-native li:nth-child(2n) {
        border-right: none
    }

.what-wrapper {
    display: flex;
    background-color: #fff;
    padding: 32px 10px;
    border-radius: 5px
}

    .what-wrapper::before {
        content: '';
        position: absolute;
        height: 2px;
        width: 150%;
        background: #d3d3d3;
        margin: auto;
        top: 0;
        left: -178px;
        z-index: -1;
        bottom: 0
    }

.link::after, .link::before {
    border-radius: 10px;
    left: 46%;
    transform: translateX(-50%);
    position: absolute
}

.expert-slide .owl-stage, .what-wrapper p, section.section-tab .contempt li:last-child, ul.contemt-list li {
    margin: auto
}

.approach {
    border-top: 2px solid #000;
    display: flex;
    list-style: none;
    padding: 0;
    justify-content: space-between;
    align-items: stretch
}

.link {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center
}

    .link a {
        font-weight: 700;
        text-decoration: none;
        color: #000;
        text-transform: uppercase;
        font-size: 15px
    }

    .link:first-child {
        margin-left: -55px
    }

    .link:last-child {
        margin-right: -55px
    }

    .link::after {
        content: "";
        width: 10px;
        height: 10px;
        background: red;
        top: -16px
    }

    .link::before {
        content: '';
        background: green;
        width: 16px;
        height: 16px;
        top: -19px
    }

.cloudslider, .fade:not(.show) {
    opacity: 1
}

.section-tab .tab-content ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: auto;
    list-style: none
}

    .section-tab .tab-content ul li {
        width: 33.33%;
        padding: 85px;
        align-items: center
    }

        .section-tab .tab-content ul li h2 {
            padding-top: 21px
        }

    .section-tab .tab-content ul.content-list li::before {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        width: 1px;
        height: 100%;
        background: #d3d3d3
    }

    .section-tab .tab-content ul.content-list li::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: #d3d3d3
    }

    .section-tab .tab-content ul.content-list li:nth-child(3n)::before, .section-tab .tab-content ul.content-list li:nth-last-child(-n+2)::after {
        display: none
    }

.border-bottom {
    border-bottom: 3px solid #d3d3d3
}

.border-left {
    border-left: 2px solid #d3d3d3
}

.border-right {
    border-right: 2px solid #d3d3d3;
    border: none
}

.clientdiv ul li {
    padding: 9px 10px;
    margin-right: 20px;
    background: #e8f1fb;
    border-radius: 3px
}

.clientdiv ul {
    display: flex;
    list-style: none
}

.section-tab .nav-item {
    width: 30%
}

a.nav-link.section-nav.active {
    border-bottom: 5px solid #e62e4f;
    background: #e62e4f;
    border-radius: 30px;
    border: 1px solid #d3d3d3 !important
}

.section-tab .nav-item .nav-link:hover {
    background: #e62e4f;
    color: #fff;
    border: 1px solid #d3d3d3 !important
}

.section-tab .nav-tabs, ul.cloud-native li:nth-last-child(-n+2) {
    border-bottom: none
}

.w-underline:before {
    content: "";
    position: absolute;
    width: 18%;
    height: 2px;
    background: #e62e4f;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -10px
}

section.section-tab {
    padding-top: 0
}

.cloud-heading h1 {
    color: #fff;
    font-size: 36px;
    padding: 101px 0 18px;
    text-transform: uppercase
}

.section-tab .nav-item .nav-link {
    background-color: unset;
    position: relative;
    padding: 10px 0;
    margin-left: 50px;
    border-bottom: 5px solid #e62e4f;
    border-radius: 30px;
    border: 1px solid #000 !important
}

ul.cloud-native {
    display: flex;
    flex-wrap: wrap;
    list-style: none
}

    ul.cloud-native li {
        width: 50%;
        border-right: 2px solid #d3d3d3;
        padding: 71px;
        border-bottom: 2px solid #d3d3d3
    }

        ul.cloud-native li h3 {
            padding-top: 24px
        }

.optimize {
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}

section.fourth-wrapper-slide.app-development-wrap .cloud-wrapper ul li p {
    color: #000;
    font-size: 13px;
    text-align: center;
    min-height: 0
}

.inner-blog .post-title {
    height: 31px
}

.news-block .image-box .image .blog-image {
    width: 100%;
    height: 386px;
    object-fit: cover
}

.blog-section .blog-detail-page-content-padding .ck-editor table td {
    padding: 10px !important
}

/*.blog-listing-heading-center h2 {
    display: flex;
    justify-content: center
}*/

section.blog-listing-heading-center {
    padding-bottom: 0 !important
}



/*Table Of Content */
.expando-toc {
    display: inline-block;
    position: relative;
    font-family: inherit;
    margin-bottom: 15px;

}

.toc-shell {
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.5s ease;
    width: auto;
    max-width: 700px;
}

.toc-head {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
/*    background: #e9f4ff;*/
    transition: all 0.5s ease;
}

.toc-label {
    font-weight: 500;
    font-size: 17px;
    color: #fff !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toc-switch {
/*    font-size: 18px;
    font-weight: 300;*/
    width: 30px;
/*    text-align: center;
    color: #fff;*/
    transition: all 0.5s ease;
/*    flex-shrink: 0;*/
    margin: 0 !important;
}
.blog-section .toc-switch  {
    margin-top: 0 !important;
}
.toc-body {
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease;
}

/*.toc-body {*/
    /* Remove these lines: */
    /* max-height: 0; */
    /* overflow: hidden; */
    /* Add this to ensure smooth transitions when collapsing (if needed) */
    /*transition: all 0.5s ease;*/
    /* Optional: Set a reasonable max-height */
    /*max-height: 1000px;
}*/

.toc-links {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    min-width: 300px;
}

    .toc-links a {
        color: #000;
        text-decoration: none;
        font-size: 14px;
        padding: 8px 20px 8px 15px;
        transition: all 0.2s;
        white-space: normal; /* Changed to normal to show all text */
        display: flex;
        align-items: flex-start;
        line-height: 1.4;
    }

.toc-number {
    display: inline-block;
    min-width: 20px;
    color: #64748b;
    margin-right: 8px;
    font-weight: 500;
}

.toc-links a:hover {
    color: #3b82f6;
    background: #f1f5f9;
    /*    padding-left: 20px;*/
}

/* Expanded state */
.expando-toc.expanded .toc-shell {
    max-width: 700px; /* Increased to accommodate longer text */
    width: auto;
}

.expando-toc.expanded .toc-head {
    padding-right: 25px;
/*    background: #e9f4ff;*/
    justify-content: space-between;
}

.expando-toc.expanded .toc-body {
    max-height: 1000px;
}

/*.expando-toc.expanded .toc-switch {
    transform: rotate(45deg);
    color: #fff;
}
*/



.ck-editor h2{
    font-size: 32px;
    font-weight: 700 !important;
}
.blog-detail-page-form-width {
    position: sticky;
    top: 72px;
    align-self: flex-start;
}
  












@media (min-width:320px) and (max-width:700px) {
    .section-tab .tab-content ul li {
        width: 100%;
        border-bottom: 0;
        border-left: 0 !important;
        border-right: 0px !important
    }

    ul.cloud-native li {
        width: 100%;
        border-right: none
    }

    .section-tab .tab-content ul.content-list li:nth-child(4)::after {
        display: block
    }

    .section-tab .tab-content ul.content-list li::before {
        position: unset
    }

    .section-tab .nav-item {
        width: unset
    }

        .section-tab .nav-item .nav-link {
            padding: 7px 29px;
            margin-left: 10px
        }

    ul.contemt-list li {
        border-right: none !important;
        border-left: none !important
    }

    ul.cloud-native li:nth-child(3) {
        border-bottom: 2px solid #d3d3d3
    }

    .section-tab .nav-tabs li {
        margin-bottom: 12px
    }

    .section-tab .nav-tabs {
        border-bottom: none;
        justify-content: center
    }

    .heading-port h1 {
        color: #fff;
        font-size: 25px;
        margin: 50px 0 0;
        padding: 0 20px
    }

    .heading-port p {
        padding: 10px 14px
    }

    .plan-head {
        padding-top: 32px
    }

    .section-tab .tab-content ul.contempt li:nth-child(4)::after {
        display: none
    }
}

@media (min-width:768px) and (max-width:1024px) {
    ul.cloud-native li {
        padding: 30px 5px;
        margin: auto
    }

    .section-tab .tab-content ul li {
        padding: 30px
    }
}
.search-box-blog {
    background-color: #f5f5f5;
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    color: #000;
    width: 100%;
   
}
    .search-box-blog:focus, .search-box-blog:active, .search-box-blog:focus-visible {
        outline: #8c8d8d;
    }
.highlight {
    background-color: yellow;
}
.blog-category {
    background-color: #1674B8;
    color: white;
    padding: 10px;
    border-radius: 5px
}