/* Classical theme - Phase 3 content sections, cards, blog and policy polish */

.heading-container,
.feature-heading {
    position: relative;
    max-width: 840px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.heading,
.feature-heading .heading,
.heading-container .heading {
    position: relative !important;
    display: block !important;
    width: auto !important;
    margin: 0 auto 14px !important;
    color: var(--classical-primary) !important;
    background: none !important;
    -webkit-text-fill-color: var(--classical-primary) !important;
    font-size: clamp(42px, 4.4vw, 68px) !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em;
    line-height: 1.08 !important;
    text-align: center !important;
}

.sub-heading,
.heading .sub-heading,
.heading-container .sub-heading {
    display: block;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
    margin: 10px auto 0 !important;
    color: var(--classical-accent) !important;
    background: none !important;
    -webkit-text-fill-color: var(--classical-accent) !important;
    font-size: clamp(18px, 1.8vw, 28px) !important;
    font-weight: 900 !important;
    letter-spacing: .02em;
    line-height: 1.2 !important;
    text-align: center !important;
}

.slogan,
.pro-heading,
.text-block .h3 {
    position: relative !important;
    color: var(--classical-primary) !important;
    background: none !important;
    -webkit-text-fill-color: var(--classical-primary) !important;
    font-size: clamp(22px, 2vw, 34px) !important;
    line-height: 1.25 !important;
    text-align: center;
}

.feature-heading .text-block,
.heading-container .slogan {
    max-width: 780px;
    margin: 0 auto !important;
}

.shape-circle,
.left-shape,
.right-shape {
    display: none !important;
}

#feature,
#services:not(.service-page),
#how-it-works,
#about-us,
#testimonial,
#blog,
#work-with,
.privacy-section {
    position: relative;
    overflow: hidden;
    background: #f8fafc !important;
}

#feature,
#services:not(.service-page),
#how-it-works,
#blog,
.privacy-section {
    padding: 88px 0 !important;
}

#about-us,
#testimonial {
    padding: 96px 0 !important;
}

#feature::before,
#how-it-works::before,
#blog::before,
.privacy-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 8% 12%, rgba(15, 159, 138, 0.10), transparent 24%),
        radial-gradient(circle at 90% 85%, rgba(36, 59, 107, 0.07), transparent 26%);
}

#feature .container,
#services:not(.service-page) .container,
#how-it-works .container,
#about-us .container,
#testimonial .container,
#blog .container,
#work-with .container,
.privacy-section .container {
    position: relative;
    z-index: 1;
}

#feature .card-type-1.card,
#services:not(.service-page) .card-type-1.card,
.card-blog.card,
#faq .faq-card,
.privacy-section-inner {
    overflow: hidden;
    border: 1px solid var(--classical-line) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 20px 54px rgba(17, 24, 39, 0.08) !important;
}

#feature .feature-card-h,
#services:not(.service-page) .service-card-h,
#services:not(.service-page) .feature-card-h {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#feature .feature-card-h {
    flex: 0 0 340px !important;
    width: 340px !important;
    max-width: 340px !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
}

#feature .card-track,
#services:not(.service-page) .card-track,
#services:not(.service-page) .card-track-service {
    background: transparent !important;
}

#feature .card-type-1.card,
#services:not(.service-page) .card-type-1.card {
    width: 100% !important;
    padding: 0 !important;
}

#feature .card-type-1.card:hover,
#services:not(.service-page) .card-type-1.card:hover,
.card-blog.card:hover {
    border-color: rgba(15, 159, 138, 0.32) !important;
    background: #ffffff !important;
    box-shadow: 0 26px 66px rgba(17, 24, 39, 0.12) !important;
    transform: translateY(-6px);
}

#feature .owl-item.center .card-type-1.card,
#feature .owl-item.active.center .card-type-1.card,
#feature .feature-card-h.active .card-type-1.card,
#feature .feature-card-h:hover .card-type-1.card,
#services:not(.service-page) .owl-item.center .card-type-1.card,
#services:not(.service-page) .owl-item.active.center .card-type-1.card,
#services:not(.service-page) .service-card-h.active .card-type-1.card,
#services:not(.service-page) .service-card-h:hover .card-type-1.card {
    border-color: var(--classical-line) !important;
    background: #ffffff !important;
    box-shadow: 0 20px 54px rgba(17, 24, 39, 0.08) !important;
    transform: none !important;
}

#feature .card-type-1.card,
#services:not(.service-page) .card-type-1.card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#feature .card-type-1.card::before,
#services:not(.service-page) .card-type-1.card::before,
.card-blog.card::before {
    content: none !important;
    display: none !important;
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: none !important;
}

#feature .card-icon,
#services:not(.service-page) .card-icon {
    height: 185px;
    flex: 0 0 185px;
    padding: 0;
    border-radius: 20px 20px 0 0;
    background: transparent !important;
}

#feature .card-icon img,
#services:not(.service-page) .card-icon img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 20px 20px 0 0;
    object-fit: contain;
    transition: transform .35s ease;
}

#feature .card-type-1.card:hover .card-icon img,
#services:not(.service-page) .card-type-1.card:hover .card-icon img {
    transform: scale(1.06) rotate(-1deg);
}

#feature .card-body,
#services:not(.service-page) .card-body {
    padding: 22px 24px 26px !important;
}

#feature .card-title,
#services:not(.service-page) .card-title {
    color: var(--classical-primary) !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
}

#feature .card-text,
#services:not(.service-page) .card-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    color: var(--classical-muted) !important;
    line-height: 1.75 !important;
}

#services:not(.service-page) .btn-readmore,
.card-blog .btn-readmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 16px;
    color: #ffffff !important;
    border: 1px solid var(--classical-primary);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--classical-primary), var(--classical-accent)) !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 900;
    box-shadow: 0 12px 26px rgba(15, 159, 138, 0.18);
}

#services:not(.service-page) .btn-readmore::after,
#services:not(.service-page) .btn-readmore::before,
.card-blog .btn-readmore::after,
.card-blog .btn-readmore::before {
    content: none !important;
    display: none !important;
}

#services:not(.service-page) .btn-readmore:hover,
.card-blog .btn-readmore:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--classical-accent), var(--classical-primary)) !important;
    border-color: var(--classical-accent) !important;
    transform: translateY(-2px);
}

#how-it-works .how-it-works {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 44px;
}

#how-it-works .content-wrapper {
    width: auto !important;
    min-height: 250px;
    padding: 30px 24px !important;
    border: 1px solid var(--classical-line);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(17, 24, 39, 0.07);
}

#how-it-works .content-wrapper::after,
#how-it-works .content-wrapper::before {
    display: none !important;
}

#how-it-works .how-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--classical-primary), var(--classical-accent)) !important;
    box-shadow: 0 14px 30px rgba(15, 159, 138, 0.18);
}

#how-it-works .how-count span {
    color: #ffffff !important;
    font-weight: 900;
}

#how-it-works .m_title,
#how-it-works .h6 {
    color: var(--classical-primary) !important;
    font-weight: 900 !important;
}

#how-it-works p {
    color: var(--classical-muted) !important;
    line-height: 1.7 !important;
}

#about-us {
    background:
        linear-gradient(135deg, #ffffff 0%, #f8fafc 56%, #eef9f6 100%) !important;
}

#about-us .wrapper {
    position: relative;
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#about-us .img-w,
#about-us .img-br-6 {
    width: 100%;
    border-radius: 28px !important;
    object-fit: cover;
}

#about-us .youtube-wrapper {
    inset: 18px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 28px !important;
    background: linear-gradient(135deg, rgba(36, 59, 107, 0.08), rgba(15, 159, 138, 0.08)) !important;
}

#about-us .btn-play,
#about-us .grow-play {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--classical-primary), var(--classical-accent)) !important;
    box-shadow: 0 18px 40px rgba(15, 159, 138, 0.24);
}

#about-us .text-wrapper,
#testimonial .text-wrapper {
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#about-us .text,
#testimonial .text {
    color: var(--classical-muted) !important;
    line-height: 1.85 !important;
}

#testimonial {
    background: #ffffff !important;
}

#testimonial .circle-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    border: 1px solid var(--classical-line);
    border-radius: 34px;
    background:
        radial-gradient(circle at 50% 50%, rgba(15, 159, 138, 0.12), transparent 45%),
        #f8fafc;
}

#testimonial .circle-indicators li,
#testimonial .circle-indicators img {
    border-radius: 50% !important;
}

#testimonial .circle-indicators img {
    border: 4px solid #ffffff;
    box-shadow: 0 14px 34px rgba(17, 24, 39, 0.12);
    object-fit: cover;
}

#testimonial .clients-title h6 {
    color: var(--classical-primary) !important;
    font-weight: 900;
}

#testimonial .clients-title p {
    color: var(--classical-accent) !important;
    font-weight: 800;
}

#testimonial .carousel-control a {
    color: #ffffff !important;
    border-radius: 50%;
    background: var(--classical-primary) !important;
}

#counter {
    margin: 70px 0 !important;
    background: #ffffff !important;
}

#counter .counter-wrap {
    overflow: hidden;
    padding: 74px 26px !important;
    border-radius: 44px 12px 44px 12px !important;
    background:
        radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.18), transparent 26%),
        linear-gradient(135deg, var(--classical-primary) 0%, var(--classical-primary-2) 48%, var(--classical-accent) 100%) !important;
    box-shadow: 0 24px 70px rgba(36, 59, 107, 0.18);
}

#counter .counter-wrap::before,
#counter .counter-wrap::after {
    content: none !important;
    display: none !important;
}

#counter .counting .h2,
#counter .counting p {
    color: #ffffff !important;
}

#counter .counting p {
    letter-spacing: .06em;
    text-transform: uppercase;
}

#banner-wrap {
    background-color: var(--classical-primary) !important;
    background-blend-mode: multiply;
}

#banner-wrap::before,
#banner-wrap::after {
    content: none !important;
    display: none !important;
}

#banner-wrap .content {
    color: #ffffff;
}

#banner-wrap .content .h3,
#banner-wrap .content p {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 2px 14px rgba(2, 6, 23, 0.20);
}

#banner-wrap .content .h3,
#banner-wrap .content .h3 *,
#banner-wrap .content .pro-heading,
#banner-wrap .content .pro-heading * {
    color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #ffffff !important;
}

#banner-wrap .content p,
#banner-wrap .content p * {
    color: #eaf6ff !important;
    -webkit-text-fill-color: #eaf6ff !important;
}

#banner-wrap .btn {
    color: var(--classical-primary) !important;
    border-color: #ffffff !important;
    background: #ffffff !important;
}

#service_home {
    padding: 92px 0 !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(15, 159, 138, 0.10), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}

#service_home .service_content h2,
#service_home .service_content h2 *,
#service_home .text-colorful-2,
#service_home .text-colorful-2 * {
    color: var(--classical-primary) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--classical-primary) !important;
}

#service_home .service_content p {
    color: var(--classical-muted) !important;
}

#service_home .service_content .text-center img {
    filter: hue-rotate(72deg) saturate(.82);
}

#service_home .card_services {
    border: 1px solid var(--classical-line) !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 44px rgba(17, 24, 39, 0.06) !important;
}

#service_home .card_services .card-header {
    border-bottom: 1px solid var(--classical-line) !important;
    border-radius: 24px 24px 0 0 !important;
    background: #f8fafc !important;
}

#service_home .card_services .service_tabs button {
    color: var(--classical-primary) !important;
    border: 1px solid var(--classical-line) !important;
    background: #ffffff !important;
    box-shadow: 0 10px 22px rgba(17, 24, 39, 0.05) !important;
}

#service_home .card_services .service_tabs button.active,
#service_home .card_services .service_tabs button:hover {
    color: #ffffff !important;
    border-color: var(--classical-primary) !important;
    background: linear-gradient(135deg, var(--classical-primary), var(--classical-accent)) !important;
}

#service_home .card_services .service_tabs button.active .texts,
#service_home .card_services .service_tabs button:hover .texts {
    color: #ffffff !important;
}

#service_home .services_tabs_content h3,
#service_home .services_tabs_content h3 *,
#service_home .text-colorful-4,
#service_home .text-colorful-4 * {
    color: var(--classical-primary) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--classical-primary) !important;
}

#service_home .services_tabs_content,
#service_home .services_tabs_content p,
#service_home .services_tabs_content div {
    color: var(--classical-ink) !important;
}

#blog {
    background:
        linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
}

#blog .row {
    row-gap: 24px;
}

.card-blog.card {
    height: 100%;
}

.card-blog .fig-container {
    height: 238px;
    border-radius: 22px 22px 0 0;
    background: #eef6ff;
}

.card-blog .fig-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: transform .35s ease;
}

.card-blog.card:hover .fig-container img {
    transform: scale(1.05);
}

.card-blog .published-date {
    top: 16px !important;
    left: 16px !important;
    right: auto !important;
    color: #ffffff !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, var(--classical-primary), var(--classical-accent)) !important;
    box-shadow: 0 12px 26px rgba(17, 24, 39, 0.14);
}

.card-blog .published-date span {
    color: #ffffff !important;
}

.card-blog .card-body {
    padding: 24px !important;
}

.card-blog .card-title,
#blog .card-blog .card-title {
    color: var(--classical-primary) !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
}

.card-blog .p,
.card-blog .lineheight-30 {
    color: var(--classical-muted) !important;
    font-size: 16px;
    line-height: 1.9 !important;
}

#blog .blog-sidebar {
    position: sticky;
    top: 110px;
    padding: 24px !important;
    border: 1px solid var(--classical-line);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(17, 24, 39, 0.08);
}

#blog .blog-sidebar .h5 {
    margin-top: 0 !important;
    color: var(--classical-primary) !important;
    font-weight: 900;
}

#blog .popular-post .media {
    padding: 12px;
    border: 1px solid var(--classical-line);
    border-radius: 16px;
    background: #f8fafc;
}

#blog .popular-post .media + .media {
    margin-top: 14px;
}

#blog .popular-post-img,
#blog .media-img img {
    width: 78px !important;
    height: 70px !important;
    border-radius: 14px !important;
    object-fit: cover;
}

#blog .post-date {
    color: var(--classical-accent) !important;
    font-size: 12px;
    font-weight: 900;
}

#blog .popular-post a {
    color: var(--classical-primary) !important;
    font-weight: 900;
}

#blog .share {
    margin-top: 34px;
    padding: 20px;
    border: 1px solid var(--classical-line);
    border-radius: 20px;
    background: #f8fafc;
}

#blog .share h6 {
    color: var(--classical-primary);
    font-weight: 900;
}

#work-with {
    padding: 64px 0 !important;
    background: #ffffff !important;
}

.workwith {
    justify-content: center !important;
    gap: 14px;
}

.workwith img {
    width: 150px !important;
    height: 82px !important;
    padding: 16px;
    border: 1px solid var(--classical-line);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(17, 24, 39, 0.06);
    object-fit: contain;
}

.privacy-section-inner {
    padding: 44px !important;
}

.privacy-section-inner h1,
.privacy-section-inner h2,
.privacy-section-inner h3,
.privacy-section-inner h4,
.privacy-section-inner h5,
.privacy-section-inner h6 {
    color: var(--classical-primary) !important;
    font-weight: 900 !important;
}

.privacy-section-inner p,
.privacy-section-inner li {
    color: var(--classical-muted) !important;
    font-size: 16px;
    line-height: 1.85;
}

.privacy-section-inner a {
    color: var(--classical-accent) !important;
    font-weight: 900;
}

@media (max-width: 1199px) {
    #how-it-works .how-it-works {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #testimonial .circle-layout {
        min-height: 320px;
        margin-bottom: 28px;
    }
}

@media (max-width: 767px) {
    #feature,
    #services:not(.service-page),
    #how-it-works,
    #blog,
    .privacy-section {
        padding: 56px 0 !important;
    }

    #about-us,
    #testimonial {
        padding: 62px 0 !important;
    }

    .heading,
    .feature-heading .heading,
    .heading-container .heading {
        font-size: clamp(34px, 10vw, 46px) !important;
        text-align: center !important;
    }

    #feature .card-icon,
    #services:not(.service-page) .card-icon {
        height: 170px;
    }

    #feature .feature-card-h {
        flex-basis: min(100%, 340px) !important;
        width: min(100%, 340px) !important;
        max-width: 100% !important;
    }

    #how-it-works .how-it-works {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    #how-it-works .content-wrapper {
        min-height: auto;
        padding: 24px 20px !important;
    }

    #about-us .wrapper,
    #about-us .text-wrapper,
    #testimonial .text-wrapper,
    #testimonial .circle-layout,
    .privacy-section-inner {
        border-radius: 22px !important;
    }

    #about-us .text-wrapper,
    #testimonial .text-wrapper,
    .privacy-section-inner {
        padding: 24px !important;
    }

    .card-blog .fig-container {
        height: 210px;
    }

    #blog .blog-sidebar {
        position: static;
        margin-top: 26px;
    }

    .workwith {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .workwith img {
        width: 100% !important;
    }
}