.strip-logo img {
    width: 123px;
    height: 87px;
}

/* ── Hero wrapper ── */
.synops-body-section .synops-hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    background: #000;
    margin-top: 86px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 0px;
}

.synops-body-section .synops-hero-section .section-container {
    width: 100%;
    max-width: 1140px;
}

/*.hero-glow{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    z-index:0;
}*/
.hero-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 116vh;
    z-index: 0;
}

.hero-glow svg {
    width: 100%;
    height: 100%;
}

/*.section-container{
    position:relative;
    z-index:2;
}*/

/* ── Content ── */
.hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero__logo {
    display: block;
    height: 46px;
    width: auto;
    margin-bottom: 44px;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #00000033;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    margin-bottom: 40px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero__badge-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.hero__heading {
    font-size: 43px;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -1.2px;
    color: #ffffff;
    margin-bottom: 24px;
}

.hero__heading-highlight {
    background: linear-gradient(135deg, #ffffff 0%, #a5c8ff 48%, #67e8f9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero__desc {
    font-size: 16px;
    font-weight: 200;
    line-height: 1.75;
    color: #fff;
    max-width: 762px;
}

/*==========================*/

.synops-dashboard {

    /*    width:100%;*/

    /*    max-width:1180px;*/

    margin: 0px auto 0;

    display: grid;

    grid-template-columns:180px 1fr;

    border-radius: 22px;

    overflow: hidden;

    background: linear-gradient(180deg, rgba(26, 79, 204, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    /*   max-width: none;*/
}

/*==========================*/

.synops-sidebar {
    position: relative;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    padding: 16px;
    overflow: hidden;
    /*        margin-right:16px;*/
    background: linear-gradient(180deg, rgba(26, 79, 204, 0.2) 0%, rgba(0, 0, 0, 0.2) 44.71%, rgba(0, 0, 0, 0.2) 100%);
    height: 530px;
}

.synops-dashboard {
    padding: 18px;
}

/* ── Sidebar entrance animation ── */
.synops-sidebar {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 1.8s ease, transform 1.2s ease;
}

.synops-sidebar.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/*.synops-sidebar::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:20px;
    padding:1px;

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.15),
        rgba(255,255,255,.02)
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;
            mask-composite:exclude;

    pointer-events:none;
}*/

/*==========================*/

.synops-logo-box {

    text-align: center;

    margin-bottom: 10px;

}

.synops-logo-box img {

    height: 26px;

}

/*==========================*/

.synops-company-box {

    height: 28px;
    font-size: 9px;

    border-radius: 10px;

    background: rgba(13, 25, 53, 0.6);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 12px;

    color: rgba(148, 163, 184, 1);

    margin-bottom: 10px;
    gap: 8px;
}

.synops-company-icon {
    width: 11px;
    height: 11px;
    object-fit: contain;
    flex-shrink: 0;
}

.synops-chevron-icon {
    width: 11px;
    height: 11px;
    object-fit: contain;
    margin-left: auto;
    flex-shrink: 0;
}

/*==========================*/

.synops-sidebar-nav {

    display: flex;

    flex-direction: column;

    gap: 4px;

}

/*==========================*/

.synops-nav-item {

    /*    height: 25px;
    font-size: 9px;*/
    height: 22px;
    font-size: 8px;
    border-radius: 9px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 0 10px;


    color: #64748B;

    transition: .3s;

}

.synops-nav-item.active {

    background: rgba(61, 120, 255, 0.15);

    color: #E2E8F5;

}

.synops-nav-icon {
    width: 15px;
    height: 11px;
    flex-shrink: 0;
    object-fit: contain;
    opacity: .9;
    transition: .3s ease;
}

/*==========================*/

.synops-count {
    margin-left: auto;
    width: 17px;
    height: 16px;
    border-radius: 74%;
    background: rgba(239, 68, 68, 0.2);
    color: rgba(239, 68, 68, 1);

    font-size: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*==========================*/

.synops-sidebar-footer {

    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .05);
    padding-top: 10px;

}

/*==========================*/

.synops-notification-row {

    align-items: center;
    color: #7f96b5;
    font-size: 11px;
    margin-bottom: 10px;
    display: flex;
    gap: 5px;
}

.synops-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #EF4444;

    margin-left: auto;

}

/*==========================*/

.synops-user {

    display: flex;

    align-items: center;

    gap: 10px;

}

.synops-user-avatar {

    width: 26px;

    height: 26px;

    border-radius: 50%;

    background: #2d6bff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 10px;

    color: #fff;

}

.synops-user h6 {

    margin: 0;

    font-size: 9px;

    color: #E2E8F5;

}

.synops-user small {

    color: #64748B;

    font-size: 9px;

}

/*==========================*/

.synops-main {

    min-height: 520px;

    padding: 18px;

}

/*===================================

TOP BAR

===================================*/

.synops-topbar {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 15px;

}

/* ── Topbar children: fall from top + fade in ── */
/* ── Topbar children: fall from top + fade in ── */
.synops-body-section .synops-topbar > * {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 1.1s ease, transform 1.1s ease;
}

.synops-topbar.is-visible > *:nth-child(1) {
    transition-delay: 0.1s;
}

.synops-topbar.is-visible > *:nth-child(2) {
    transition-delay: 0.25s;
}

.synops-topbar.is-visible > *:nth-child(3) {
    transition-delay: 0.4s;
}

.synops-topbar.is-visible > *:nth-child(4) {
    transition-delay: 0.55s;
}

.synops-topbar.is-visible > *:nth-child(5) {
    transition-delay: 0.7s;
}

.synops-topbar.is-visible > *:nth-child(6) {
    transition-delay: 0.85s;
}

.synops-topbar.is-visible > *:nth-child(7) {
    transition-delay: 1.0s;
}

.synops-topbar.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

.synops-dashboard-head {
    margin-bottom: 10px;
}

/* ── Dashboard Header ── */
.synops-dashboard-header > * {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 1.1s ease, transform 1.1s ease;
}

.synops-dashboard-header.is-visible > *:nth-child(1) {
    transition-delay: 0.1s;
}

.synops-dashboard-header.is-visible > *:nth-child(2) {
    transition-delay: 0.35s;
}

.synops-dashboard-header.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* ── Stat Cards ── */

/* ── Stat Cards: rise from below + fade in ── */
.synops-stat-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.6s ease, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.synops-stats-grid.is-visible .synops-stat-card:nth-child(1) {
    transition-delay: 0.1s;
}

.synops-stats-grid.is-visible .synops-stat-card:nth-child(2) {
    transition-delay: 0.3s;
}

.synops-stats-grid.is-visible .synops-stat-card:nth-child(3) {
    transition-delay: 0.5s;
}

.synops-stats-grid.is-visible .synops-stat-card:nth-child(4) {
    transition-delay: 0.7s;
}

.synops-stats-grid.is-visible .synops-stat-card {
    opacity: 1;
    transform: translateY(0);
}

/* ── Stat Card inner text: fade in ── */
.synops-stat-card .synops-stat-title,
.synops-stat-card .synops-stat-badge,
.synops-stat-card h3,
.synops-stat-card small {
    opacity: 0;
    transition: opacity 1.2s ease;
}

/* card 1 inner elements */
.synops-stats-grid.is-visible .synops-stat-card:nth-child(1) .synops-stat-title {
    transition-delay: 0.4s;
}

.synops-stats-grid.is-visible .synops-stat-card:nth-child(1) .synops-stat-badge {
    transition-delay: 0.55s;
}

.synops-stats-grid.is-visible .synops-stat-card:nth-child(1) h3 {
    transition-delay: 0.7s;
}

.synops-stats-grid.is-visible .synops-stat-card:nth-child(1) small {
    transition-delay: 0.85s;
}

/* card 2 inner elements */
.synops-stats-grid.is-visible .synops-stat-card:nth-child(2) .synops-stat-title {
    transition-delay: 0.6s;
}

.synops-stats-grid.is-visible .synops-stat-card:nth-child(2) .synops-stat-badge {
    transition-delay: 0.75s;
}

.synops-stats-grid.is-visible .synops-stat-card:nth-child(2) h3 {
    transition-delay: 0.9s;
}

.synops-stats-grid.is-visible .synops-stat-card:nth-child(2) small {
    transition-delay: 1.05s;
}

/* card 3 inner elements */
.synops-stats-grid.is-visible .synops-stat-card:nth-child(3) .synops-stat-title {
    transition-delay: 0.8s;
}

.synops-stats-grid.is-visible .synops-stat-card:nth-child(3) .synops-stat-badge {
    transition-delay: 0.95s;
}

.synops-stats-grid.is-visible .synops-stat-card:nth-child(3) h3 {
    transition-delay: 1.1s;
}

.synops-stats-grid.is-visible .synops-stat-card:nth-child(3) small {
    transition-delay: 1.25s;
}

/* card 4 inner elements */
.synops-stats-grid.is-visible .synops-stat-card:nth-child(4) .synops-stat-title {
    transition-delay: 1.0s;
}

.synops-stats-grid.is-visible .synops-stat-card:nth-child(4) .synops-stat-badge {
    transition-delay: 1.15s;
}

.synops-stats-grid.is-visible .synops-stat-card:nth-child(4) h3 {
    transition-delay: 1.3s;
}

.synops-stats-grid.is-visible .synops-stat-card:nth-child(4) small {
    transition-delay: 1.45s;
}

/* reveal all inner text when grid is visible */
.synops-stats-grid.is-visible .synops-stat-card .synops-stat-title,
.synops-stats-grid.is-visible .synops-stat-card .synops-stat-badge,
.synops-stats-grid.is-visible .synops-stat-card h3,
.synops-stats-grid.is-visible .synops-stat-card small {
    opacity: 1;
}

/* ── Mini chart SVG inside each card ── */
.synops-mini-chart svg,
.synops-main-chart svg {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.synops-stats-grid.is-visible .synops-stat-card:nth-child(1) .synops-mini-chart svg,
.synops-stats-grid.is-visible .synops-stat-card:nth-child(1) .synops-main-chart svg {
    transition-delay: 0.35s;
}

.synops-stats-grid.is-visible .synops-stat-card:nth-child(2) .synops-mini-chart svg,
.synops-stats-grid.is-visible .synops-stat-card:nth-child(2) .synops-main-chart svg {
    transition-delay: 0.48s;
}

.synops-stats-grid.is-visible .synops-stat-card:nth-child(3) .synops-mini-chart svg,
.synops-stats-grid.is-visible .synops-stat-card:nth-child(3) .synops-main-chart svg {
    transition-delay: 0.61s;
}

.synops-stats-grid.is-visible .synops-stat-card:nth-child(4) .synops-mini-chart svg,
.synops-stats-grid.is-visible .synops-stat-card:nth-child(4) .synops-main-chart svg {
    transition-delay: 0.74s;
}

.synops-stats-grid.is-visible .synops-mini-chart svg,
.synops-stats-grid.is-visible .synops-main-chart svg {
    opacity: 1;
    transform: scaleX(1);
}

/* ── Chart Card: fade in ── */
.synops-chart-card {
    opacity: 0;
    transition: opacity 1.4s ease;
}

.synops-bottom-grid.is-visible .synops-chart-card {
    opacity: 1;
    transition-delay: 0.2s;
}

synops-chart-area {
    width: 100% !important;
    flex: unset !important;
    min-width: unset !important;
}

/* ── Line chart SVG paths: draw from left ── */
.synops-chart-area svg path[stroke="#F59E0B"],
.synops-chart-area svg path[stroke="#3D78FF"],
.synops-chart-area svg path[stroke="#002170"] {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 2s ease;
}

.synops-bottom-grid.is-visible .synops-chart-area svg path[stroke="#F59E0B"] {
    stroke-dashoffset: 0;
    transition-delay: 0.6s;
}

.synops-bottom-grid.is-visible .synops-chart-area svg path[stroke="#3D78FF"] {
    stroke-dashoffset: 0;
    transition-delay: 0.9s;
}

.synops-bottom-grid.is-visible .synops-chart-area svg path[stroke="#002170"] {
    stroke-dashoffset: 0;
    transition-delay: 1.2s;
}

/* ── Both cards: rise from bottom + fade in ── */
.synops-chart-card,
.synops-donut-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.4s ease, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.synops-bottom-grid.is-visible .synops-chart-card {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

.synops-bottom-grid.is-visible .synops-donut-card {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

/* ── Line chart paths: draw from left ── */
.synops-chart-area svg path[stroke="#F59E0B"],
.synops-chart-area svg path[stroke="#3D78FF"],
.synops-chart-area svg path[stroke="#002170"] {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 2s ease;
}

.synops-bottom-grid.is-visible .synops-chart-area svg path[stroke="#F59E0B"] {
    stroke-dashoffset: 0;
    transition-delay: 1s;
}

.synops-bottom-grid.is-visible .synops-chart-area svg path[stroke="#3D78FF"] {
    stroke-dashoffset: 0;
    transition-delay: 1.4s;
}

.synops-bottom-grid.is-visible .synops-chart-area svg path[stroke="#002170"] {
    stroke-dashoffset: 0;
    transition-delay: 1.8s;
}

/* ── Card header: fade in ── */
.synops-donut-card .synops-card-header {
    opacity: 0;
    transition: opacity 1s ease;
}

.synops-bottom-grid.is-visible .synops-donut-card .synops-card-header {
    opacity: 1;
    transition-delay: 0.9s;
}

/* ── Donut arches: each path fades in one by one ── */
.synops-donut-svg svg path {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.synops-bottom-grid.is-visible .synops-donut-svg svg path:nth-child(1) {
    opacity: 1;
    transition-delay: 1.0s;
}

.synops-bottom-grid.is-visible .synops-donut-svg svg path:nth-child(2) {
    opacity: 1;
    transition-delay: 1.4s;
}

.synops-bottom-grid.is-visible .synops-donut-svg svg path:nth-child(3) {
    opacity: 1;
    transition-delay: 1.8s;
}

.synops-bottom-grid.is-visible .synops-donut-svg svg path:nth-child(4) {
    opacity: 1;
    transition-delay: 2.2s;
}

.synops-bottom-grid.is-visible .synops-donut-svg svg path:nth-child(5) {
    opacity: 1;
    transition-delay: 2.6s;
}

/* ── Legend rows: fade in after arches ── */
.synops-legend div {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.synops-bottom-grid.is-visible .synops-legend div:nth-child(1) {
    opacity: 0.4;
    transition-delay: 1.2s;
}

.synops-bottom-grid.is-visible .synops-legend div:nth-child(2) {
    opacity: 0.4;
    transition-delay: 1.6s;
}

.synops-bottom-grid.is-visible .synops-legend div:nth-child(3) {
    opacity: 0.4;
    transition-delay: 2.0s;
}

.synops-bottom-grid.is-visible .synops-legend div:nth-child(4) {
    opacity: 0.4;
    transition-delay: 2.4s;
}

.synops-bottom-grid.is-visible .synops-legend div:nth-child(5) {
    opacity: 0.4;
    transition-delay: 2.8s;
}

/* ── Donut SVG wrapper ── */
/* ── Donut SVG wrapper ── */
.synops-donut-svg {
    opacity: 0;
    transition: opacity 1s ease;
}

.synops-bottom-grid.is-visible .synops-donut-svg {
    opacity: 1;
    transition-delay: 0.5s;
}

/* ── All segments: start invisible and very slightly scaled down ── */
.synops-donut-svg svg path,
.synops-donut-svg svg g {
    opacity: 0;
    transform: scale(0.92);
    transform-origin: 50% 50%;
    transform-box: fill-box;
    transition: opacity 1s ease, transform 1s ease;
}

/* ── Segment 1: blue ── */
.synops-bottom-grid.is-visible .synops-donut-svg svg path:nth-child(1) {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.7s;
}

/* ── Segment 2: teal ── */
.synops-bottom-grid.is-visible .synops-donut-svg svg path:nth-child(2) {
    opacity: 1;
    transform: scale(1);
    transition-delay: 1.0s;
}

/* ── Segment 3 ── */
.synops-bottom-grid.is-visible .synops-donut-svg svg g:nth-of-type(1) {
    opacity: 0.44;
    transform: scale(1);
    transition-delay: 1.3s;
}

/* ── Segment 4 ── */
.synops-bottom-grid.is-visible .synops-donut-svg svg g:nth-of-type(2) {
    opacity: 0.44;
    transform: scale(1);
    transition-delay: 1.6s;
}

/* ── Segment 5 ── */
.synops-bottom-grid.is-visible .synops-donut-svg svg g:nth-of-type(3) {
    opacity: 0.44;
    transform: scale(1);
    transition-delay: 1.9s;
}

/* ── Card header ── */
.synops-donut-card .synops-card-header {
    opacity: 0;
    transition: opacity 1s ease;
}

.synops-bottom-grid.is-visible .synops-donut-card .synops-card-header {
    opacity: 1;
    transition-delay: 0.6s;
}

/* ── Legend rows: clean fade only ── */
.synops-legend div {
    opacity: 0;
    transition: opacity 0.9s ease;
}

.synops-bottom-grid.is-visible .synops-legend div:nth-child(1) {
    opacity: 0.4;
    transition-delay: 0.8s;
}

.synops-bottom-grid.is-visible .synops-legend div:nth-child(2) {
    opacity: 0.4;
    transition-delay: 1.1s;
}

.synops-bottom-grid.is-visible .synops-legend div:nth-child(3) {
    opacity: 0.4;
    transition-delay: 1.4s;
}

.synops-bottom-grid.is-visible .synops-legend div:nth-child(4) {
    opacity: 0.4;
    transition-delay: 1.7s;
}

.synops-bottom-grid.is-visible .synops-legend div:nth-child(5) {
    opacity: 0.4;
    transition-delay: 2.0s;
}

/*===================================*/

.synops-search-box {

    width: 287px;

    height: 34px;

    border-radius: 10px;

    background: #00000069;

    border: 1px solid rgba(255, 255, 255, .06);

    display: flex;

    align-items: center;

    padding: 0 14px;

    gap: 10px;

    color: #8398b7;

    font-size: 9px;

}

.synops-search-icon {
    width: 11px;
    height: 11px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

.synops-search-box i {

    font-size: 12px;

    color: #9fb5d4;

}

/*===================================*/

.synops-pill {

    height: 34px;

    padding: 0 14px;

    border-radius: 10px;

    /*background:#27466d;*/

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 9px;

    color: rgba(255, 255, 255, 0.5);

    background: rgba(0, 0, 0, 0.41);

    border: 1px solid rgba(255, 255, 255, .05);
    gap: 8px;
}

.synops-calendar-icon {
    width: 11px;
    height: 11px;
    object-fit: contain;
    flex-shrink: 0;
}

.synops-arrow-down-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    margin-left: auto;
    flex-shrink: 0;
}

.synops-cloud-icon {
    width: 11px;
    height: 11px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}


/*===================================*/

.synops-flex-space {

    flex: 1;

}

/*===================================*/

.synops-icon-circle {

    position: relative;

    width: 29px;

    height: 29px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #d9e6ff;

}

.synops-notification-icon {
    width: 29px;

    height: 29px;
    object-fit: contain;
    display: block;
}

/*===================================*/


/*===================================*/

.synops-ai-btn {

    height: 36px;

    padding: 0 18px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    gap: 8px;

    background: linear-gradient(135deg, rgba(61, 120, 255, 0.3) 0%, #3D78FF 100%);
    border-top: 0.79px solid #3D78FF66;
    box-shadow: 0px 0px 15.81px 0px #3D78FF26;

    font-size: 11px;

    font-weight: 600;

    color: #E2E8F5;


}

.synops-ai-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

/*===================================*/

.synops-profile-box {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #dbe6ff;

    font-size: 11px;

}

/*===================================*/

.synops-profile-circle {

    width: 26px;

    height: 26px;

    border-radius: 50%;
    background: linear-gradient(135deg, #3D78FF 0%, #0736A2 100%);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 9px;

    font-weight: 600;

}

/*===================================

HEADER

===================================*/

.synops-dashboard-head {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 8px;
    background: #3D78FF06;
    border-bottom: 0.79px solid #3D78FF1A
}

/*===================================*/

.synops-dashboard-header h2 {

    font-size: 14px;

    font-weight: 700;

    color: rgba(226, 232, 245, 1);

    margin-bottom: 4px;

}

.synops-dashboard-header p {

    font-size: 11px;

    color: rgba(100, 116, 139, 1);

    margin: 0;

}

/*===================================*/

.synops-refresh-btn {

    height: 30px;
    padding: 0 14px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    color: #64748B;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, .08);

}

.synops-refresh-icon {
    width: 11px;
    height: 11px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

/*=====================================

Statistics Grid

======================================*/

.synops-stats-grid {

    display: grid;

    grid-template-columns:repeat(4, 1fr);

    gap: 14px;

    margin-bottom: 18px;

}

/*=====================================*/

.synops-stat-card {

    position: relative;

    padding: 16px;

    border-radius: 14px;

    /*background:

linear-gradient(180deg,

rgba(12,24,46,.95),

rgba(5,9,20,.98));*/


    overflow: hidden;

    min-height: 118px;


    box-shadow: 0px 3.56px 21.34px 0px #00000066;

    box-shadow: 0px 0px 24.9px 0px #3D78FF1F;
    border-top: 0.71px solid #3864DC33;
    background: rgba(8, 13, 36, 0.25);

}

/*=====================================*/

.synops-stat-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 12px;

}

.synops-stat-title {

    font-size: 9px;
    font-weight: 600;
    color: rgba(100, 116, 139, 1);

}

/*=====================================*/

.synops-stat-badge {

    padding: 3px 6px;
    border-radius: 30px;
    font-size: 9px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.synops-badge-icon {
    width: 10px; /* Adjust as needed */
    height: 10px;
    object-fit: contain;
    flex-shrink: 0;
}

.danger {

    background: rgba(239, 68, 68, 0.12);
    color: rgba(239, 68, 68, 1);
    border-top: 0.71px solid rgba(239, 68, 68, 0.25)
}

.success {
    background: rgba(16, 185, 129, 0.12);
    color: rgba(16, 185, 129, 1);


}

.warning {
    background: rgba(245, 158, 11, 0.12);
    color: rgba(245, 158, 11, 1);


}

.blue {
    background: rgba(61, 120, 255, 0.12);
    color: rgba(61, 120, 255, 1);


}

/*=====================================*/

.synops-stat-card h3 {

    font-size: 14px;

    font-weight: 700;

    color: rgba(226, 232, 245, 1);
    margin-bottom: 0px;

}

.synops-stat-card small {

    font-size: 8px;
    font-weight: 400;
    color: rgba(100, 116, 139, 1);

}

/*=====================================*/

.synops-mini-chart {
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 42px;
}

/*==============================*/

.synops-bottom-grid {

    display: grid;

    grid-template-columns:2fr 1fr;

    gap: 16px;

}

/*==============================*/

.synops-chart-card,
.synops-donut-card {

    padding: 15px 36px 8px 12px;

    border-radius: 16px;

    /*background:#091321;*/

    /*border:1px solid rgba(255,255,255,.08);*/
    max-height: 283px;
    overflow: hidden;
    background: rgba(8, 13, 36, 0.35);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0px 0.89px 0px 0px rgba(255, 255, 255, 0.04) inset;

}

.synops-donut-card {
    background: linear-gradient(360deg, rgba(0, 0, 0, 0.58) 0%, rgba(31, 50, 138, 0.58) 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0px 0.89px 0px 0px rgba(255, 255, 255, 0.04) inset;
}

/*==============================*/

.synops-card-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 5px;

}

.synops-card-header h5 {

    font-size: 11px;

    color: #E2E8F5;
    font-weight: 600;
    margin-bottom: 0px;

}

.synops-card-header small {

    color: #64748B;
    font-weight: 400;
    font-size: 9px;

}

.synops-chart-filter {

    color: #d9e6ff;
    font-size: 10px;
    height: 28px;
    padding: 0 4px;
    display: flex;
    gap: 2px;
    background: transparent;
    border-radius: 8px;
}


/*==============================*/

.synops-chart-wrapper {

    display: flex;

    gap: 16px;

}

.synops-chart-area {

    flex: 1;

}

.synops-chart-area svg {

    width: 100%;

    height: 150px;

}

.synops-grid line {

    stroke: #17304d;

    stroke-width: 1;

}

/*==============================*/


/*==============================*/

.synops-donut-wrapper {

    display: flex;

    justify-content: center;

    padding: 0px 0;

}

.synops-donut {

    width: 220px;

    height: 220px;

    border-radius: 50%;

    background: conic-gradient(
            #3f84ff 0 42%,
            #15d8c2 42% 68%,
            #8b63ff 68% 86%,
            #ff9d2f 86% 100%
    );

    display: flex;

    align-items: center;

    justify-content: center;

}

.synops-donut-center {

    width: 135px;

    height: 135px;

    background: #08111e;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}

.synops-donut-center h4 {

    color: #fff;

    font-size: 24px;

    margin-bottom: 2px;

}

.synops-donut-center span {

    font-size: 11px;

    color: #8096b7;

}

/*==============================*/

.synops-legend {

    display: grid;

    grid-template-columns:repeat(2, 1fr);
    opacity: 0.4;
    gap: 5px;

    font-size: 9px;

    color: #d5e2ff;

    margin-top: 0px;
    display: flex;
    flex-direction: column;
    color: #d5e2ff;

}

.synops-legend div {

    display: flex;

    align-items: center;

    gap: 8px;

}

.synops-legend span {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    display: block;

}

.aws {

    background: #3f84ff;

}

.azure {

    background: #15d8c2;

}

.gcp {

    background: #8b63ff;

}

.other {

    background: #ff9d2f;

}

/*==================================
 Trusted Companies
===================================*/

.trusted-companies-section {
    background: #000;
    padding: 100px 0 0px;
}

.trusted-companies-title {
    font-size: 16px; /* according to your notes */
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    margin-bottom: 48px;
}

.trusted-logo-row {
    row-gap: 16px;
}

.trusted-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
}

.trusted-logo-item img {
    height: 34px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    opacity: .75;
    transition: .3s;
    display: block;
}

.trusted-logo-item img:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* Main Heading */

.cloud-problem-section {
    background: #000;
    padding: 70px 0;
}

/*.cloud-problem-title{

    font-size:36px;

    font-weight:500;

    line-height:1.2;

    color:#fff;

    max-width:920px;

    margin:0 auto 60px;

}*/


/* Card Heading */


.cloud-card h4 {

    font-size: 14px;

    font-weight: 600;

    line-height: 1.4;

    color: #fff;

    margin-bottom: 14px;

}


/* Card Paragraph */


.cloud-card p {

    font-size: 12.2px;
    line-height: 1.7;
    color: #888888;
    margin: 0;

}

.cloud-card {

    /*background: linear-gradient(
    90deg,
    rgba(61, 120, 255, 0.2) 0%,
    rgba(0, 0, 0, 0.2) 100%
);*/
    background: #FFFFFF0A;
    border: 1px solid #FFFFFF1C;
    /*    border:1px solid rgba(255,255,255,.08);*/

    border-radius: 12.65px;

    padding: 22px 18px;

    height: 100%;

    transition: .3s;

}


.cloud-card:hover {

    /*background: linear-gradient(
    90deg,
    rgba(61, 120, 255, 0.47) 0%,
    rgba(61, 120, 255, 0) 100%
);*/
    background: linear-gradient(
            90deg,
            rgba(61, 120, 255, 0.47) 0%,
            rgba(61, 120, 255, 0.15) 45%,
            rgba(0, 0, 0, 0) 100%
    );

    transform: translateY(-5px);
}


.cloud-icon {

    width: 42px;

    height: 42px;

    border-radius: 12px;

    border: 1px solid rgba(255, 255, 255, .15);

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 18px;

}


.cloud-icon.blue {

    border-color: #2E6BFF;

}


.cloud-icon img {

    width: 20px;

    height: 20px;

}


.cloud-line {

    width: 100%;

    height: 1px;

    background: linear-gradient(90deg, rgba(255, 255, 255, 0.333) 0%, rgba(0, 0, 0, 0) 100%);
    margin-bottom: 20px;

}

.cloud-problem-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 8px 22px;
    border-radius: 55.33px;
    border: 1px solid rgba(255, 255, 255, 0.12);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    margin-bottom: 28px;
    background: rgba(0, 0, 0, 0.2);

}

.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;

    background: #ffffff;
    box-shadow: 0px 0px 5.93px 0px #FFFFFF;

    /*    box-shadow:
        0 0 4px #fff,
        0 0 10px rgba(255,255,255,.8),
        0 0 18px rgba(255,255,255,.5);*/
}

.badge-text {
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
}

/*=========================================
 SynOps AI Engine Section
 Base Screen : 1280px
=========================================*/

.synops-ai-engine-section {
    background: #000;
    padding: 18px 0;
    position: relative;
    overflow: hidden;
}

.synops-ai-engine-section .col-lg-8,
.synops-ai-engine-section .col-lg-4 {
    padding-left: 8px;
    padding-right: 8px;
}

.mt-4.mt-lg-0 {
    margin-top: 0 !important;
}

.synops-ai-heading {
    max-width: 820px;
    margin: 0 auto 14px;
}

.synops-ai-title {
    font-size: 36px;
    /*        margin-bottom: 6px;*/
    font-weight: 500;
    line-height: 1.15;
    color: #fff;
    margin: 0 auto 20px;
    max-width: 514px;
}

.synops-ai-description {
    font-size: 16px;
    line-height: 1.4;
    color: #888888;
    max-width: 737px;
    margin: 0 auto 50px;
}

/*=============================
 Dashboard
==============================*/

.synops-dashboard-wrapper {

    background: #00000033;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    padding: 12px;
}

.synops-dashboard-header {

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;

}

.synops-dashboard-title {

    color: #F1F5F9;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 2px;
    padding-bottom: 4px;
}

.synops-dashboard-subtitle {

    color: #94A3B894;
    margin: 0;
    font-size: 9px;
    line-height: 1.35;
    max-width: 400px;
    padding-bottom: 10px;
}

.synops-dashboard-status {

    display: flex;
    align-items: center;
    color: #94A3B899;
    font-size: 8.5px;
    gap: 5px;
    font-weight: 700;
}

.synops-live-dot {

    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34D399;
    box-shadow: 0px 0px 6.92px 0px #34D399;

}

.synops-powered-tag {
    border: 0.79px solid rgba(91, 155, 255, .24);
    color: #5B9BFF;
    background: rgba(91, 155, 255, .14);
    border-radius: 30px;
    font-size: 8px;
    padding: 2px 7px;
}

.synops-ai-stats-row {
    margin-bottom: 8px !important;
}

.synops-ai-stat-card {
    background: #FFFFFF06;
    border: 0.79px solid #3D78FF33;

    box-shadow: 0px 5.93px 23.71px 0px #00000066;
    box-shadow: 0px 0px 0px 0.99px #06B6D424;

    padding: 10px 12px;
    min-height: 68px;
    border-radius: 12px;
}

.stat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.stat-icon-box {
    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-label {
    position: static;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    text-transform: uppercase;
    color: #94A3B8BF;

    margin-bottom: 0px;

    font-size: 8px;
    letter-spacing: 0.7px;
}

.stat-value-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.synops-ai-stat-card h4 {
    line-height: 1;
    font-weight: 700;
    color: #F1F5F9;
    margin: 0;
    font-size: 16px;
}

.stat-loss,
.stat-profit {

    display: inline-block;
    border-radius: 20px;
    font-weight: 600;
    font-weight: 600;
    line-height: 1.2;
    font-size: 8px;
    padding: 3px 6px;
    border-radius: 6px;
}

.stat-loss {
    color: #EF4444BF;
    background: #EF444405;
    border: 0.59px solid #EF444433;
}

.stat-profit {
    background: #22C55E24;
    border: 0.79px solid #22C55E47;
    color: #4ADE80;

}

/*=========================
 Graph Placeholder
==========================*/

/*.synops-graph-wrapper{

    border:1px solid rgba(255,255,255,.05);
    border-radius:14px;
    overflow:hidden;
    background:#080B12;

}*/

.synops-chart-grid {
    display: flex;
    padding: 12px;
    height: auto;
    align-items: flex-start;

    padding: 0 !important;
    gap: 0 !important;
    margin-top: 0 !important;
    display: block !important;
    background: #00000033;

}

.synops-chart-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c3d3ef;
    padding: 15px 10px;
    gap: 14px;
    margin-top: 11px;
    font-size: 8.5px;
    /*  border-top: 1px solid rgba(255, 255, 255, .06);*/
}

.synops-chart-legend div {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #94A3B89E;
    font-size: 9px;
}

.legend-item {
    display: flex;
    align-items: center;
    font-weight: 500;
    color: #AAB2C5;
    font-size: 8.5px;
    gap: 6px;
}

.legend-svg-icon {
    width: 16px;
    height: 11px;
    display: block;
    object-fit: contain;
    flex-shrink: 0;
}

/*==================================
 Recommendation Panel
===================================*/

.synops-recommendations {

    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;

}

.synops-ai-recommendation-label {

    display: flex;
    align-items: center;
    gap: 8px;
    color: #6D7483;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;

    font-size: 9px;
    margin-bottom: 8px !important;
}

.recommend-dot {

    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #F4B84D;

}

.synops-recommend-card {

    background: #FFFFFF0A;
    border: 0.79px solid #64748B80;
    box-shadow: 0px 7.9px 27.66px 0px #0000006B;

    box-shadow: 0px 0px 0px 0.99px #06B6D412;

    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    border-radius: 14px;
}

.recommend-top {

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 6px;

}

.recommend-top h5 {

    color: #E2E8F0;
    margin: 0;
    font-weight: 600;
    font-size: 11px;
    line-height: 1.3;
}

.recommend-badge {

    background: #22C55E21;
    color: #4ADE80;
    font-weight: 600;
    border: 0.79px solid #22C55E47;
    white-space: nowrap;
    font-size: 7.5px;
    padding: 3px 7px;
    border-radius: 12px;
}

.recommend-label {

    display: block;
    color: #94A3B88C;
    text-transform: uppercase;
    font-size: 7.5px;
    margin-bottom: 2px;

}

.recommend-price {
    font-size: 16px;
    margin-bottom: 8px;
    color: #FFFFFF;
    opacity: 1;
    font-weight: 700;
}

.recommend-month {
    font-size: 10px;
    color: #94A3B880;
    font-weight: 400;
}

.recommend-note {

    display: block;
    color: #94A3B880;
    font-size: 8px !important;
    margin-bottom: 0 !important;
}

.recommend-btn {

    width: 100%;
    border: none;
    outline: none;
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.157) 0%, rgba(255, 255, 255, 0.157) 100%);
    border: 0.79px solid #464646;

    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    transition: .3s;
    cursor: default !important;
    height: 26px;
    font-size: 7.5px;
    border-radius: 9px;
    gap: 8px;
    color: #FFFFFF;
}

.recommend-arrow-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.synops-total-saving-card {
    background: linear-gradient(143.68deg, rgba(20, 20, 20, 0.157) 0%, rgba(255, 255, 255, 0.157) 129.29%);
    border: 0.79px solid #64748B80;
    padding: 11px 14px;
    border-radius: 14px;
    margin-top: 0;
}

.recommend-ai-note {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    gap: 6px;
}

.recommend-ai-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #7A9CC824;
    border: 0.79px solid #5B9BFF3D;
    color: #5B9BFF;
    font-weight: 600;
    flex-shrink: 0;
    font-size: 7px;
    height: 14px;
    min-width: 18px;
    padding: 0 4px;
    border-radius: 3px;
}

.saving-title {

    display: block;
    color: #94A3B88C;
    text-transform: uppercase;
    font-size: 7.5px;
    margin-bottom: 4px;
    letter-spacing: 1px;
}

.synops-total-saving-card h2 {
    color: #EBFFF8;
    font-weight: 700;
    font-size: 18px;
    margin: 0;
}

.synops-total-saving-card small {

    font-size: 10px;
    color: #94A3B880;
    font-weight: 400;
}

/*=====================================
 Feature Slider
======================================*/

.synops-feature-slider {

    height: 62px !important;
    margin-top: 8px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

.synops-feature-track {

    display: flex;
    gap: 10px;
    flex-direction: column;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.synops-feature-card {

    height: 62px !important;
    min-height: 62px !important;
    flex-shrink: 0;
    flex-basis: auto !important;
    padding: 8px 12px;
    gap: 10px;
    border-radius: 14px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF0A;
    border: 0.79px solid #FFFFFF1C;
    transition: .35s;
    margin-bottom: 0;
    width: 55%;
}


.synops-feature-icon {

    font-size: 11px;

    display: flex;
    justify-content: center;
    align-items: center;

    color: #fff;

    flex-shrink: 0;

}

.synops-feature-icon-img {
    /*    width:30px;
    height:30px;*/
    object-fit: contain;
    display: block;
    width: 26px;
    height: 26px;
}

.synops-feature-content {

    flex: 1;

}

.synops-feature-content h6 {

    color: #fff;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 2px;
}

.synops-feature-content p {

    margin: 0;
    color: #888888;
    font-size: 9px;
    line-height: 1.3;
}

.synops-feature-arrow {

    color: #6E7688;

    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.synops-feature-arrow-img {
    width: 8px;
    height: 8px;
    object-fit: contain;
    display: block;
}

/*========================================
 Chart
========================================*/


.synops-y-axis {

    width: 50px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

.synops-y-axis span {

    font-size: 11px;

    color: #6F788A;

}

.synops-chart-area {

    position: relative;
    flex: 1;
    min-width: 0; /* NOT flex, NOT column — was causing the huge height */


}

.synops-horizontal-grid {

    position: absolute;

    left: 0;
    right: 0;
    top: 0;
    bottom: 35px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}

.synops-horizontal-grid span {

    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, .06);

}

.synops-chart-svg {

    width: 100%;
    height: 258px;
    overflow: hidden;
    position: relative;
    z-index: 2;
    display: block;
    line-height: 0;
}

.synops-chart-svg svg {
    width: 100%;
    height: 285px;
    display: block;
    max-height: none;
}

.synops-x-axis {

    display: flex;

    justify-content: space-between;

    margin-top: 12px;

}

.synops-x-axis span {

    font-size: 11px;

    color: #6E7787;

}

/*========================*/

.finops-platform-section {

    /*   padding:120px 0;*/

    background: #020407;

    position: relative;

    overflow: hidden;
    padding: 60px 0;
}

/*========================*/

.finops-platform-section::before {

    content: "";

    position: absolute;

    left: 50%;

    top: 110px;

    transform: translateX(-50%);

    width: 520px;

    height: 180px;

    background: radial-gradient(circle,
    rgba(32, 114, 255, .25),
    transparent 70%);

    filter: blur(70px);

}

/*========================*/

/*.finops-platform-heading{

    position:relative;

    z-index:2;

    margin-bottom: 30px;

}*/

.finops-platform-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    /*    padding:6px 14px;*/

    border-radius: 30px;

    background: #17191d;

    border: 1px solid rgba(255, 255, 255, .08);

    /*    font-size:11px;*/

    color: #d5d8de;

    letter-spacing: .08em;

    /*    margin-bottom:22px;*/

    font-size: 9px;
    padding: 4px 10px;
    margin-bottom: 12px;

}

.finops-platform-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #ffffff;

}

/*.finops-platform-heading h2{

    color:#fff;

    font-size:34px;

    font-weight:700;

    margin-bottom:20px;

}*/

/*.finops-platform-heading p{

    color:#888888;

    font-size:16px;

    max-width:620px;

    margin:auto;

    line-height:1.7;

}*/

/*========================*/

.finops-platform-dashboard {

    position: relative;

    background: #050505;

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 18px;

    /*    padding:20px;*/

    box-shadow: 0 20px 80px rgba(0, 0, 0, .45);
    padding: 14px;
}

/*========================*/


.finops-platform-tab {
    display: flex;

    flex-wrap: wrap;
    /*padding:9px 14px;

    border-radius:9px;
*/
    color: #7d8ca5;

    /* font-size:12px;
*/
    cursor: pointer;

    transition: .3s;
    gap: 6px;
    margin-bottom: 12px;
    padding: 6px 10px;
    font-size: 10px;
    border-radius: 7px;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

.finops-platform-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    height: auto !important;
    overflow-x: visible !important;
    overflow-y: hidden !important;
}

.finops-platform-tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
}

.finops-platform-tabs::-webkit-scrollbar {
    display: none !important;
}

.finops-platform-tab.active {

    background: #123c83;

    color: #5ca2ff;

}

/*========================*/

.finops-chart-card {

    background: #0b0b0b;

    border: 1px solid rgba(255, 255, 255, .05);

    border-radius: 16px;

    padding: 16px;
    /*
    height: 66%;*/
    height: 100%;
    box-sizing: border-box;
}

.finops-chart-card .finops-graph-area {
    height: 229px;
}

.finops-chart-card .finops-graph-area svg {
    width: 100%;
    height: 229px;
    display: block;
}

/*========================*/

.finops-chart-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 20px;

}

.finops-chart-header h4 {

    color: #fff;

    font-size: 12px;

    margin-bottom: 6px;

    font-weight: 500;

}

.finops-chart-header h3 {

    color: #00d49d;
    font-size: 26.3px;
    font-weight: 700;

}

/*========================*/

.finops-growth-badge {

    background: #103523;

    color: #16e69c;

    padding: 8px 12px;

    border-radius: 20px;

    font-size: 11px;

    font-weight: 600;

}

/*========================*/

.finops-chart-body {

    display: flex;

    gap: 14px;
    height: 229px;

}

/*========================*/

.finops-y-axis {

    width: 42px;

    height: 250px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    font-size: 11px;

    color: #6f7580;

}

/*========================*/

.finops-graph-area {

    flex: 1;

}

.finops-graph-area svg {

    width: 100%;

    height: 250px;

}

/*========================*/

.finops-grid line {

    stroke: #191919;

    stroke-width: 1;

    stroke-dasharray: 4 6;

}

/*========================*/

.finops-x-axis {

    display: flex;

    justify-content: space-between;

    margin-left: 45px;

    margin-top: 8px;

    font-size: 11px;

    color: #6f7580;

}

/*===================================

RESOURCE CARD

===================================*/

.finops-resource-card {
    /*    padding:16px;*/

    height: 100%;
    box-sizing: border-box !important;
}

/*===================================*/

.finops-resource-title {

    color: #fff;

    font-size: 15px;

    font-weight: 600;

    margin-bottom: 18px;

}

/*===================================*/

.finops-resource-item {

    padding: 12px;

    background: #111111;

    border: 1px solid rgba(255, 255, 255, .05);

    border-radius: 12px;

    margin-bottom: 12px;

}

/*===================================*/

.finops-resource-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 10px;

}

.finops-resource-header span {

    color: #8f98a8;

    font-size: 11px;

}

.finops-resource-header strong {

    color: #fff;

    font-size: 13px;

}

/*===================================*/

.finops-progress {

    width: 100%;

    height: 4px;

    border-radius: 20px;

    background: #2a2a2a;

    overflow: hidden;

    margin-bottom: 8px;

}

/*===================================*/

.finops-progress-fill {

    height: 100%;

    border-radius: 20px;

}

.finops-progress-fill.blue {

    background: #4c82ff;

}

.finops-progress-fill.green {

    background: #1fcf82;

}

/*===================================*/

.finops-resource-item small {

    color: #5f6875;

    font-size: 10px;

}

/*====================================

BOTTOM STATS

=====================================*/

.finops-bottom-stats {

    margin-top: 24px;

    border-top: 1px solid rgba(255, 255, 255, .06);

    padding-top: 22px;

}

/*====================================*/

.finops-stat-box {

    text-align: center;

}

/*====================================*/

.finops-stat-box h3 {

    /*    font-size:34px;*/
    font-weight: 500;
    color: #ffffff;
    font-size: 22px;
    margin-bottom: 3px;

}

/*====================================*/

.finops-stat-box p {

    /*    font-size:12px;*/
    font-size: 10px;
    color: #888888;

    margin: 0;

}

/*================================================*/

.finops-capabilities-section {

    background: #040404;

    padding: 70px 0;

    position: relative;

    overflow: hidden;

}


/*================================================*/

.finops-capabilities-grid {

    display: grid;

    grid-template-columns:repeat(3, 1fr);

    gap: 18px;

}

.finops-feature-large {

    grid-column: span 2;

}

/*================================================*/

.finops-feature-card {

    position: relative;

    background: #FFFFFF0A;
    border-top: 0.79px solid #FFFFFF1C;
    border-right: 1px solid rgba(255, 255, 255, .06);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    border-left: 1px solid rgba(255, 255, 255, .06);

    border-radius: 16px;

    padding: 18px;

    min-height: 138px;

    overflow: hidden;

    transition: .35s;

}

.finops-feature-card:hover {

    /*    border-color:#2d5cff;

    transform:translateY(-4px);*/
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.25);
    background: #0b0b0b;
}

/*====================================

ICON

=====================================*/

.finops-feature-icon {

    width: 38px;

    height: 38px;

    margin-bottom: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.finops-feature-icon img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    display: block;
}

.finops-feature-icon i {

    color: #ffffff;

    font-size: 16px;

}

/*====================================

TITLE

=====================================*/

.finops-feature-card h4 {

    color: #ffffff;

    font-weight: 600;

    margin-bottom: 12px;
    font-size: 16px;

}

/*====================================

DESCRIPTION

=====================================*/

.finops-feature-card p {

    color: #7f7f7f;

    font-size: 12px;

    line-height: 1.7;

    max-width: 420px;

    margin: 0;

}

/*====================================

LARGE CARD

=====================================*/

.finops-feature-large {

    min-height: 165px;

}

.finops-feature-card {

    position: relative;

    overflow: hidden;

}

.finops-feature-card::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background: linear-gradient(90deg, #FFFFFF 0%, rgba(0, 0, 0, 0) 100%);

}

/* ══════════════════════════════════════
   FINOPS PLATFORM SECTION — COMPACT
   ══════════════════════════════════════ */

.finops-platform-dashboard .row.g-3 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ── Chart card ── */
.finops-chart-card {
    padding: 12px;
    height: auto;
}

.finops-chart-header {
    margin-bottom: 10px;
}

.finops-chart-header h4 {
    font-size: 12px;
    margin-bottom: 3px;
}

.finops-chart-header h3 {
    font-size: 26px;
}

.finops-growth-badge {
    font-size: 9px;
    padding: 5px 9px;
    border-radius: 14px;
}

/* ── Chart SVG — scale down ── */
.finops-graph-area svg {
    width: 100%;
    height: 140px;
}

.finops-chart-body {
    gap: 8px;
}

.finops-y-axis {
    height: 140px;
    font-size: 9px;
    width: 32px;
}

.finops-x-axis {
    margin-top: 5px;
    font-size: 9px;
    margin-left: 32px;
}

/* ── Resource card ── */
.finops-resource-card {
    padding: 12px;
}

.finops-resource-title {
    font-size: 12px;
    margin-bottom: 10px;
}

.finops-resource-item {
    padding: 8px 10px;
    margin-bottom: 7px;
    border-radius: 9px;
}

.finops-resource-header {
    margin-bottom: 6px;
}

.finops-resource-header span {
    font-size: 9.5px;
}

.finops-resource-header strong {
    font-size: 11px;
}

.finops-progress {
    height: 3px;
    margin-bottom: 5px;
}

.finops-resource-item small {
    font-size: 9px;
}

/* ── Bottom stats ── */
.finops-bottom-stats {
    margin-top: 14px;
    padding-top: 14px;
}


/* =========================================
   FINOPS OPTIMIZATION TOP CARDS
========================================= */

.finops-optimization-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.finops-optimization-card {
    position: relative;
    min-height: 350px;
    padding: 18px 20px 14px;

    background: #0A0A0A;
    border: 0.79px solid #FFFFFF1C;
    border-radius: 14px;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    transition: transform 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease;
}

.finops-optimization-card:hover {
    transform: translateY(-4px);

    border-color: rgba(255, 255, 255, 0.25);
    background: #0b0b0b;
}


/* =========================================
   ICON
========================================= */

.finops-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 16px;
}

.finops-icon img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    display: block;
}


/* =========================================
   BADGE
========================================= */

.finops-optimization-badge {
    width: fit-content;

    display: inline-flex;
    align-items: center;

    padding: 7px 20px;
    border: 1px solid #FFFFFF80;
    border-radius: 999px;

    color: #ffffff;

    font-size: 9px;
    font-weight: 700;
    line-height: 1;

    margin-bottom: 16px;
}


/* =========================================
   DESCRIPTION
========================================= */

.finops-optimization-description {
    color: #ffffff;

    font-size: 11px;
    font-weight: 400;

    line-height: 1.45;

    margin: 0 0 14px;
}


/* =========================================
   LIST
========================================= */

.finops-optimization-card ul {
    margin: 0;
    padding-left: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4);
    font-size: 10px;
    line-height: 1.8;

    flex: 1;
}

.finops-optimization-card li {
    padding-left: 2px;
}

.finops-optimization-card li::marker {
    color: #777777;
    font-size: 7px;
}


/* =========================================
   DIVIDER
========================================= */

/*.finops-optimization-line {
    width: 100%;
    height: 1px;

    margin: 12px 0 14px;

    background: rgba(255, 255, 255, 0.05);
}*/

.finops-optimization-card {
    position: relative;
}

/* Line above the pills */
.finops-optimization-line {
    width: 100%;
    height: 1px;
    margin: 12px 0 14px;
    background: rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

/* Line at the very bottom of the card */
.finops-optimization-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #FFFFFF 0%, rgba(0, 0, 0, 0) 100%);

}

/* =========================================
   BOTTOM TAGS
========================================= */

.finops-optimization-tags {
    display: flex;
    align-items: center;
    gap: 8px;

    min-height: 22px;
}

.finops-optimization-tags span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 4px 11px;

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;

    color: rgba(255, 255, 255, 1);

    font-size: 8px;
    font-weight: 400;

    white-space: nowrap;
}


/* =========================================
   RESPONSIVE
========================================= */

/*@media (max-width: 991px) {

    .finops-optimization-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .finops-optimization-card:last-child {
        grid-column: span 2;
    }

}


@media (max-width: 566px) {

    .finops-optimization-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .finops-optimization-card:last-child {
        grid-column: span 1;
    }

    .finops-optimization-card {
        min-height: 330px;
    }

    .finops-optimization-tags {
        flex-wrap: wrap;
    }

}*/
/* Below 320px */
@media (max-width: 320px) {
    .finops-optimization-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .finops-optimization-card:last-child {
        grid-column: span 1;
    }

    .finops-optimization-card {
        min-height: 260px;
        padding: 12px 14px 10px;
    }

    .finops-icon, .finops-icon img {
        width: 28px;
        height: 28px;
    }

    .finops-optimization-badge {
        padding: 5px 14px;
        font-size: 7px;
        margin-bottom: 12px;
    }

    .finops-optimization-description {
        font-size: 9px;
        margin-bottom: 10px;
    }

    .finops-optimization-card ul {
        font-size: 8px;
        line-height: 1.6;
    }

    .finops-optimization-card li::marker {
        font-size: 6px;
    }

    .finops-optimization-line {
        margin: 8px 0 10px;
    }

    .finops-optimization-tags {
        flex-wrap: wrap;
    }

    .finops-optimization-tags span {
        font-size: 7px;
        padding: 3px 9px;
    }
}

/* 320.5px – 480px */
@media (min-width: 320.5px) and (max-width: 480px) {
    .finops-optimization-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .finops-optimization-card:last-child {
        grid-column: span 1;
    }

    .finops-optimization-card {
        min-height: 290px;
        padding: 14px 16px 12px;
    }

    .finops-icon, .finops-icon img {
        width: 30px;
        height: 30px;
    }

    .finops-optimization-badge {
        padding: 6px 16px;
        font-size: 7px;
        margin-bottom: 13px;
    }

    .finops-optimization-description {
        font-size: 9px;
        margin-bottom: 12px;
    }

    .finops-optimization-card ul {
        font-size: 8px;
        line-height: 1.7;
    }

    .finops-optimization-card li::marker {
        font-size: 6px;
    }

    .finops-optimization-line {
        margin: 9px 0 11px;
    }

    .finops-optimization-tags {
        flex-wrap: wrap;
    }

    .finops-optimization-tags span {
        font-size: 7px;
        padding: 3px 10px;
    }
}

/* 480.5px – 567px */
@media (min-width: 480.5px) and (max-width: 567px) {
    .finops-optimization-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .finops-optimization-card:last-child {
        grid-column: span 1;
    }

    .finops-optimization-card {
        min-height: 330px;
        padding: 16px 18px 12px;
    }

    .finops-icon, .finops-icon img {
        width: 33px;
        height: 33px;
    }

    .finops-optimization-badge {
        padding: 6px 18px;
        font-size: 8px;
        margin-bottom: 14px;
    }

    .finops-optimization-description {
        font-size: 10px;
        margin-bottom: 13px;
    }

    .finops-optimization-card ul {
        font-size: 9px;
        line-height: 1.75;
    }

    .finops-optimization-card li::marker {
        font-size: 6px;
    }

    .finops-optimization-line {
        margin: 10px 0 12px;
    }

    .finops-optimization-tags {
        flex-wrap: wrap;
    }

    .finops-optimization-tags span {
        font-size: 8px;
        padding: 4px 10px;
    }
}

/* 567.5px – 768px */
@media (min-width: 567px) and (max-width: 768px) {
    .finops-optimization-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .finops-optimization-card:last-child {
        grid-column: span 2;
    }

    .finops-optimization-card {
        min-height: 300px;
        padding: 16px 18px 12px;
    }

    .finops-icon, .finops-icon img {
        width: 34px;
        height: 34px;
    }

    .finops-optimization-badge {
        padding: 6px 18px;
        font-size: 8px;
        margin-bottom: 14px;
    }

    .finops-optimization-description {
        font-size: 10px;
        margin-bottom: 13px;
    }

    .finops-optimization-card ul {
        font-size: 9px;
        line-height: 1.75;
    }

    .finops-optimization-card li::marker {
        font-size: 7px;
    }

    .finops-optimization-line {
        margin: 10px 0 12px;
    }

    .finops-optimization-tags span {
        font-size: 8px;
        padding: 4px 10px;
    }
}

/* 768.5px – 991px */
@media (min-width: 768.5px) and (max-width: 991px) {
    .finops-optimization-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .finops-optimization-card:last-child {
        grid-column: span 2;
    }

    .finops-optimization-card {
        min-height: 320px;
        padding: 17px 19px 13px;
    }

    .finops-icon, .finops-icon img {
        width: 35px;
        height: 35px;
    }

    .finops-optimization-badge {
        padding: 7px 19px;
        font-size: 8px;
        margin-bottom: 15px;
    }

    .finops-optimization-description {
        font-size: 10px;
        margin-bottom: 13px;
    }

    .finops-optimization-card ul {
        font-size: 9px;
        line-height: 1.78;
    }

    .finops-optimization-card li::marker {
        font-size: 7px;
    }

    .finops-optimization-line {
        margin: 11px 0 13px;
    }

    .finops-optimization-tags span {
        font-size: 8px;
        padding: 4px 10px;
    }
}

/* 991.5px – 1024px */
@media (min-width: 991.5px) and (max-width: 1024px) {
    .finops-optimization-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .finops-optimization-card:last-child {
        grid-column: span 1;
    }

    .finops-optimization-card {
        min-height: 330px;
        padding: 17px 19px 13px;
    }

    .finops-icon, .finops-icon img {
        width: 36px;
        height: 36px;
    }

    .finops-optimization-badge {
        padding: 7px 19px;
        font-size: 8px;
        margin-bottom: 15px;
    }

    .finops-optimization-description {
        font-size: 10px;
        margin-bottom: 13px;
    }

    .finops-optimization-card ul {
        font-size: 9px;
        line-height: 1.78;
    }

    .finops-optimization-card li::marker {
        font-size: 7px;
    }

    .finops-optimization-line {
        margin: 11px 0 13px;
    }

    .finops-optimization-tags span {
        font-size: 8px;
        padding: 4px 10px;
    }
}

/* 1024.5px – 1199px */
@media (min-width: 1024.5px) and (max-width: 1199px) {
    .finops-optimization-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .finops-optimization-card {
        min-height: 340px;
        padding: 17px 19px 13px;
    }

    .finops-icon, .finops-icon img {
        width: 37px;
        height: 37px;
    }

    .finops-optimization-badge {
        padding: 7px 19px;
        font-size: 9px;
        margin-bottom: 15px;
    }

    .finops-optimization-description {
        font-size: 11px;
        margin-bottom: 14px;
    }

    .finops-optimization-card ul {
        font-size: 10px;
        line-height: 1.79;
    }

    .finops-optimization-card li::marker {
        font-size: 7px;
    }

    .finops-optimization-line {
        margin: 12px 0 13px;
    }

    .finops-optimization-tags span {
        font-size: 8px;
        padding: 4px 11px;
    }
}

/* 1199.5px – 1279px */
@media (min-width: 1199.5px) and (max-width: 1279px) {
    .finops-optimization-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .finops-optimization-card {
        min-height: 348px;
        padding: 18px 20px 14px;
    }

    .finops-icon, .finops-icon img {
        width: 38px;
        height: 38px;
    }

    .finops-optimization-badge {
        padding: 7px 20px;
        font-size: 9px;
        margin-bottom: 16px;
    }

    .finops-optimization-description {
        font-size: 11px;
        margin-bottom: 14px;
    }

    .finops-optimization-card ul {
        font-size: 10px;
        line-height: 1.8;
    }

    .finops-optimization-card li::marker {
        font-size: 7px;
    }

    .finops-optimization-line {
        margin: 12px 0 14px;
    }

    .finops-optimization-tags span {
        font-size: 8px;
        padding: 4px 11px;
    }
}


/* 1300px – 1440px */
@media (min-width: 1300px) and (max-width: 1440px) {
    .finops-optimization-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .finops-optimization-card {
        min-height: 370px;
        padding: 19px 21px 15px;
    }

    .finops-icon, .finops-icon img {
        width: 40px;
        height: 40px;
    }

    .finops-optimization-badge {
        padding: 7px 21px;
        font-size: 10px;
        margin-bottom: 17px;
    }

    .finops-optimization-description {
        font-size: 12px;
        margin-bottom: 15px;
    }

    .finops-optimization-card ul {
        font-size: 11px;
        line-height: 1.82;
    }

    .finops-optimization-card li::marker {
        font-size: 8px;
    }

    .finops-optimization-line {
        margin: 13px 0 15px;
    }

    .finops-optimization-tags span {
        font-size: 9px;
        padding: 5px 12px;
    }
}

/* 1440.5px – 1530px */
@media (min-width: 1440.5px) and (max-width: 1530px) {
    .finops-optimization-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .finops-optimization-card {
        min-height: 390px;
        padding: 20px 22px 16px;
    }

    .finops-icon, .finops-icon img {
        width: 42px;
        height: 42px;
    }

    .finops-optimization-badge {
        padding: 8px 22px;
        font-size: 11px;
        margin-bottom: 18px;
    }

    .finops-optimization-description {
        font-size: 13px;
        margin-bottom: 16px;
    }

    .finops-optimization-card ul {
        font-size: 12px;
        line-height: 1.84;
    }

    .finops-optimization-card li::marker {
        font-size: 8px;
    }

    .finops-optimization-line {
        margin: 14px 0 16px;
    }

    .finops-optimization-tags span {
        font-size: 10px;
        padding: 5px 13px;
    }
}

/* Above 1530px */
@media (min-width: 1530.5px) {
    .finops-optimization-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .finops-optimization-card {
        min-height: 410px;
        padding: 22px 24px 18px;
    }

    .finops-icon, .finops-icon img {
        width: 44px;
        height: 44px;
    }

    .finops-optimization-badge {
        padding: 8px 24px;
        font-size: 12px;
        margin-bottom: 19px;
    }

    .finops-optimization-description {
        font-size: 14px;
        margin-bottom: 17px;
    }

    .finops-optimization-card ul {
        font-size: 13px;
        line-height: 1.85;
    }

    .finops-optimization-card li::marker {
        font-size: 9px;
    }

    .finops-optimization-line {
        margin: 15px 0 17px;
    }

    .finops-optimization-tags span {
        font-size: 10px;
        padding: 5px 13px;
    }
}

/* Above 1530px AND height above 700px */
@media (min-width: 1530.5px) and (min-height: 701px) {
    .finops-optimization-card {
        min-height: 440px;
        padding: 24px 26px 20px;
    }

    .finops-icon, .finops-icon img {
        width: 46px;
        height: 46px;
    }

    .finops-optimization-badge {
        font-size: 13px;
    }

    .finops-optimization-description {
        font-size: 15px;
        margin-bottom: 18px;
    }

    .finops-optimization-card ul {
        font-size: 14px;
        line-height: 1.87;
    }

    .finops-optimization-card li::marker {
        font-size: 9px;
    }

    .finops-optimization-tags span {
        font-size: 11px;
    }
}

.synops-main {
    padding: 14px;
}

.synops-stats-grid {
    gap: 12px;
}

.synops-bottom-grid {
    gap: 12px;
}


.synops-logo-box img {
    height: 22px;
}


.synops-user-avatar,
.synops-profile-circle {
    width: 22px;
    height: 22px;
}


.synops-ai-btn {
    height: 34px;
    padding: 0 16px;
}


.synops-dashboard-header p {
    font-size: 10px;
}

.synops-refresh-btn {
    height: 28px;
    font-size: 10px;
}

.synops-stat-card {
    min-height: 90px;
    padding: 12px 14px;
}


.synops-stat-card small {
    font-size: 10px;
}


.synops-card-header h5 {
    font-size: 13px;
}

.synops-card-header small {
    font-size: 9px;
}

.synops-donut-svg {
    width: 145px;
    height: 145px;
    opacity: 0.6;
}

.synops-chart-area svg {
    width: 100%;
    height: 130px;
}


.synops-mini-chart svg {
    width: 100% !important;
    height: 33px;
}


.synops-donut-svg {
    width: 115px;
    height: 115px;
}

.synops-donut-svg svg {
    width: 115px;
    height: 115px;
}


.synops-legend span {
    width: 8px;
    height: 8px;
}

.synops-main {
    padding: 14px;
}

.synops-stats-grid {
    gap: 10px;
}

.synops-bottom-grid {
    gap: 10px;
}

.synops-logo-box img {
    height: 20px;
}


.synops-user-avatar,
.synops-profile-circle {
    width: 20px;
    height: 20px;
}

.synops-ai-btn {
    height: 30px;
    padding: 0 14px;
    font-size: 10px;
}


.synops-dashboard-header p {
    font-size: 9px;
}

.synops-refresh-btn {
    height: 26px;
    font-size: 9px;
}

.synops-stat-card {
    min-height: 82px;
    padding: 10px 12px;
}

.synops-stat-card small {
    font-size: 9px;
}


.synops-card-header h5 {
    font-size: 12px;
}

.synops-card-header small {
    font-size: 9px;
}

.synops-donut-svg,
.synops-donut-svg svg {
    width: 105px;
    height: 105px;
}

.synops-chart-area svg {
    width: 100%;
    height: 170px;
}


.synops-chart-filter span {
    padding: 7px 8px 0px 8px;
    border-radius: 11px;
    font-size: 9px;
    color: #64748B;
}

.synops-chart-filter span.active {
    background: #3D78FF33;
    color: #3D78FF;
}

.synops-legend span.dot {
    width: 7px;
    height: 7px;
}

.synops-legend .pct {
    margin-left: auto;
    color: #6f84a6;
}


.legend-icon {
    width: 12px;
    height: 12px;
    object-fit: contain;
    flex-shrink: 0;
}

.synops-chart-legend .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: block;
}

.aws-line {
    background: #f59e0b;
}

.azure-line {
    background: #3f84ff;
}

.gcp-line {
    background: #22d3ee;
}

/* donut legend — single column, with % */

.synops-legend div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.synops-legend .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
}

.synops-legend .pct {
    margin-left: auto;
    color: #8096b7;
    font-weight: 600;
}

.compute {
    background: #3f84ff;
}

.storage {
    background: #1ab3cb;
}

.database {
    background: #4b3a8f;
}

.networking {
    background: #1f6e4a;
}

.kubernetes {
    background: #8a5a1f;
}


.synops-dashboard-section {
    margin-top: -180px; /* adjust */
    position: relative;
    z-index: 10;
    background: black;
}


/*==============================
        JOURNEY SECTION
==============================*/

.kl-journey {
    background: #000;
    padding: 100px 0;
    overflow: hidden;
    position: relative;
}


/*==============================
        DASHBOARD
==============================*/

.journey-dashboard {

    position: relative;

    border-radius: 30px;

    border: 1px solid rgba(255, 255, 255, .08);

    overflow: hidden;

    background: radial-gradient(circle at bottom left, #1f4fff55 0%, transparent 50%),
    linear-gradient(180deg, #060b16 0%, #0b1326 100%);

    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03),
    0 40px 100px rgba(0, 0, 0, .65);

    min-height: 720px;

    padding: 65px 50px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 36px 40px;
}

/* subtle blue glow */

.journey-dashboard::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    background: #2563eb;

    filter: blur(220px);

    opacity: .18;

    left: -220px;

    bottom: -260px;

    pointer-events: none;

}

.journey-dashboard::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 30px;

    border: 1px solid rgba(255, 255, 255, .05);

    pointer-events: none;

}

/*==============================
            LEFT
==============================*/

.journey-left {

    position: relative;

    z-index: 2;

    padding-right: 40px;

}

.journey-left h3 {

    color: #fff;

    font-size: 33.4px;
    font-weight: 700;
    margin-bottom: 18px;

}

.cloud-provider {
    width: 56px;
    height: 56px;
}

.journey-left p {

    font-size: 16px;
    line-height: 1.4;
    max-width: 280px;
    color: #9ca3af;

}


/*==============================
      PROVIDER BOXES
==============================*/

.provider {

    position: absolute;

    width: 88px;

    text-align: center;

}

.provider span {

    display: block;

    margin-top: 10px;

    color: #8ea3c5;

    font-size: 13px;

}

/*==============================
      CORE CONTAINER
==============================*/

.cloud-core {

    position: absolute;

    left: 50%;

    top: 52%;

    transform: translate(-50%, -50%);

    width: 170px;

    height: 170px;

}

.core-circle {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    background: radial-gradient(circle, #3b82f6 0%, #1f4fff 40%, #071224 100%);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    color: #fff;

    z-index: 5;

    border: 2px solid rgba(255, 255, 255, .12);

    box-shadow: 0 0 60px rgba(37, 99, 235, .6),
    inset 0 0 40px rgba(255, 255, 255, .05);

}

.core-circle h5 {

    margin: 0;

    font-size: 22px;

    font-weight: 700;

}

.core-circle small {

    color: #c4d5ff;

    letter-spacing: 1px;

}

/*=========================================
        CORE PULSE ANIMATION
==========================================*/

.pulse,
.pulse2 {

    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    border: 1px solid rgba(61, 120, 255, .25);

    animation: pulseGlow 4s linear infinite;

}

.pulse {

    width: 210px;
    height: 210px;

}

.pulse2 {

    width: 270px;
    height: 270px;

    animation-delay: 1.5s;

}

@keyframes pulseGlow {

    0% {

        transform: translate(-50%, -50%) scale(.8);

        opacity: .6;

    }

    70% {

        opacity: .05;

    }

    100% {

        transform: translate(-50%, -50%) scale(1.15);

        opacity: 0;

    }

}

/*=========================================
        CONNECTION LINES
==========================================*/

.line {

    position: absolute;

    background: linear-gradient(90deg, #3d78ff, #6ea8ff);

    height: 2px;

    border-radius: 20px;

    box-shadow: 0 0 12px rgba(61, 120, 255, .55);

}

.line::before {

    content: "";

    position: absolute;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #3d78ff;

    top: 50%;

    left: -4px;

    transform: translateY(-50%);

    box-shadow: 0 0 12px #3d78ff;

}

.line::after {

    content: "";

    position: absolute;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #7cb5ff;

    right: -4px;

    top: 50%;

    transform: translateY(-50%);

    box-shadow: 0 0 12px #3d78ff;

}


/*=========================================
       FLOATING BADGES
==========================================*/

/*.floating-tag{

    position:absolute;

    padding:8px 16px;

    border-radius:14px;

    background:rgba(7,19,42,.82);

    border:1px solid rgba(61,120,255,.18);

    color:#6fa7ff;

    font-size:12px;

    backdrop-filter:blur(14px);

    box-shadow:0 15px 35px rgba(0,0,0,.35);

}

.t1{

    top:90px;
    right:255px;

}

.t2 {
    top: 108px;
    right: -12px;
}

.t3 {
    top: 183px;
    right: 134px;
}

.t4{

    top:235px;
    right:250px;

}

.t5{

    top:255px;
    right:50px;

}

.t6 {
    top: 240px;
    right: 43px;
}*/

/* Floating animation */

/*.floating-tag{

    animation:floatTag 5s ease-in-out infinite;

}

.t2{animation-delay:.5s;}
.t3{animation-delay:1s;}
.t4{animation-delay:1.5s;}
.t5{animation-delay:2s;}
.t6{animation-delay:2.5s;}

@keyframes floatTag{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}*/
/*=========================================
        RIGHT PANEL
==========================================*/

.journey-right {
    display: flex;
    flex-direction: column;
    padding-top: 170px;
}

/*=========================================
        METRIC GRID
==========================================*/

.journey-right {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-content: flex-start;
}

.metric-card {

    background: linear-gradient(180deg,
    rgba(17, 30, 56, .96),
    rgba(10, 17, 34, .96));

    border: 1px solid rgba(255, 255, 255, .06);

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04),
    0 18px 35px rgba(0, 0, 0, .35);

    transition: .35s;
    width: 150px;
    height: 92px;
    padding: 14px;
    border-radius: 14px;
}

.metric-card:hover {

    transform: translateY(-8px);

    border-color: rgba(61, 120, 255, .35);

    box-shadow: 0 0 25px rgba(61, 120, 255, .15),
    0 25px 45px rgba(0, 0, 0, .45);

}

.metric-card small {

    display: block;

    color: #7d90ad;

    font-size: 11px;

    letter-spacing: 1.5px;

    margin-bottom: 18px;

    text-transform: uppercase;

}

.metric-card h4 {

    color: #fff;

    font-size: 34px;

    font-weight: 700;

    margin: 0;

    line-height: 1;

}

.metric-card p {

    margin-top: 15px;

    color: #6ea8ff;

    font-size: 13px;

}

/*=========================================
      VALUE COLORS
==========================================*/

.metric-card:nth-child(1) h4 {
    color: #ffffff;
}

.metric-card:nth-child(2) h4 {
    color: #48d597;
}

.metric-card:nth-child(3) h4 {
    color: #ffb44c;
}

.metric-card:nth-child(4) h4 {
    color: #6ea8ff;
}

/*=========================================
      INTEGRATION CARD
==========================================*/


.integration-card {
    overflow: hidden;
    border-radius: 18px 18px 0 0;
    background: rgba(10, 20, 42, .88);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(77, 120, 255, .35);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02), 0 20px 40px rgba(0, 0, 0, .45);
    z-index: 3;
    margin-left: auto;
    position: relative;
    z-index: 2;
    margin-top: 0;
    width: 247px;
    max-height: 280px;
    padding: 4px;
}

/*=========================================
      TITLE
==========================================*/

.integration-title {

    font-size: 24px;

    color: #fff;

    font-weight: 600;

    margin-bottom: 24px;

}

/*=========================================
      HEADER
==========================================*/

.integration-header {


    margin-bottom: 5px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 9px 18px;

    border-bottom: 1px solid rgba(255, 255, 255, .06);

    background: rgba(18, 35, 68, .6);
}

.integration-header span:first-child {

    color: #8CC8FF;
    font-weight: 600;
    font-size: 8px;
}

.integration-card ul li {
    padding: 8px 14px;
}

.integration-card ul li span {
    font-size: 8px;
}

.integration-card li span:first-child {
    font-size: 10px;
}

.integration-card ul li::before {
    width: 6px;
    height: 6px;
}

.integration-header span:last-child {

    font-weight: 600;
    color: #5F9EFF;

    font-size: 8px;
}

/*=========================================
      LIST
==========================================*/

.integration-card ul {

    padding: 0;

    margin: 0;

    list-style: none;
    gap: 4px;
}

.integration-card li {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 5px 20px;

    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.integration-card li:last-child {

    border: none;

}

.integration-card li span:first-child {

    color: #fff;

    font-size: 15px;

}

/*=========================================
        CONNECTED
==========================================*/

.connected {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #4bd48d;

    font-size: 13px;

    font-weight: 500;

}

.connected::before {

    content: "";

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #49d48d;

    box-shadow: 0 0 12px #49d48d,
    0 0 25px rgba(73, 212, 141, .5);

}

/* ============================================
   BASE (1280px)
============================================ */
.synops-prefix {
    font-size: 10px;
    font-weight: 600;
    color: #888888;
    margin-right: 3px;
    text-transform: lowercase;
}

.synops-suffix {
    font-size: 11px;
    font-weight: 600;
    color: #888888;
    margin-left: 2px;
    position: relative;
    top: 0px;
}

.synops-result-stat {
    display: flex;
    justify-content: center;
    align-items: baseline;
    height: 58px;
    position: relative;
}

/* Below 320px */
@media (max-width: 320px) {
    .synops-prefix {
        font-size: 7px;
        margin-right: 2px;
    }

    .synops-suffix {
        font-size: 8px;
        margin-left: 1px;
    }

    .synops-result-stat {
        height: 38px;
    }
}

/* 320.5px – 480px */
@media (min-width: 320.5px) and (max-width: 480px) {
    .synops-prefix {
        font-size: 7px;
        margin-right: 2px;
    }

    .synops-suffix {
        font-size: 8px;
        margin-left: 1px;
    }

    .synops-result-stat {
        height: 42px;
    }
}

/* 480.5px – 567px */
@media (min-width: 480.5px) and (max-width: 567px) {
    .synops-prefix {
        font-size: 8px;
        margin-right: 2px;
    }

    .synops-suffix {
        font-size: 9px;
        margin-left: 2px;
    }

    .synops-result-stat {
        height: 46px;
    }
}

/* 567.5px – 768px */
@media (min-width: 567.5px) and (max-width: 768px) {
    .synops-prefix {
        font-size: 8px;
        margin-right: 2px;
    }

    .synops-suffix {
        font-size: 9px;
        margin-left: 2px;
    }

    .synops-result-stat {
        height: 48px;
    }
}

/* 768.5px – 991px */
@media (min-width: 768.5px) and (max-width: 991px) {
    .synops-prefix {
        font-size: 9px;
        margin-right: 3px;
    }

    .synops-suffix {
        font-size: 10px;
        margin-left: 2px;
    }

    .synops-result-stat {
        height: 52px;
    }
}

/* 991.5px – 1024px */
@media (min-width: 991.5px) and (max-width: 1024px) {
    .synops-prefix {
        font-size: 9px;
        margin-right: 3px;
    }

    .synops-suffix {
        font-size: 10px;
        margin-left: 2px;
    }

    .synops-result-stat {
        height: 54px;
    }
}

/* 1024.5px – 1199px */
@media (min-width: 1024.5px) and (max-width: 1199px) {
    .synops-prefix {
        font-size: 9px;
        margin-right: 3px;
    }

    .synops-suffix {
        font-size: 10px;
        margin-left: 2px;
    }

    .synops-result-stat {
        height: 56px;
    }
}

/* 1199.5px – 1279px */
@media (min-width: 1199.5px) and (max-width: 1279px) {
    .synops-prefix {
        font-size: 10px;
        margin-right: 3px;
    }

    .synops-suffix {
        font-size: 11px;
        margin-left: 2px;
    }

    .synops-result-stat {
        height: 58px;
    }
}

/* 1280px = base — no query needed */

/* 1300px – 1440px */
@media (min-width: 1300px) and (max-width: 1440px) {
    .synops-prefix {
        font-size: 11px;
        margin-right: 3px;
    }

    .synops-suffix {
        font-size: 12px;
        margin-left: 2px;
    }

    .synops-result-stat {
        height: 62px;
    }
}

/* 1440.5px – 1530px */
@media (min-width: 1440.5px) and (max-width: 1530px) {
    .synops-prefix {
        font-size: 12px;
        margin-right: 4px;
    }

    .synops-suffix {
        font-size: 13px;
        margin-left: 3px;
    }

    .synops-result-stat {
        height: 66px;
    }
}

/* Above 1530px */
@media (min-width: 1530.5px) {
    .synops-prefix {
        font-size: 13px;
        margin-right: 4px;
    }

    .synops-suffix {
        font-size: 14px;
        margin-left: 3px;
    }

    .synops-result-stat {
        height: 70px;
    }
}

/* Above 1530px AND height above 700px */
@media (min-width: 1530.5px) and (min-height: 701px) {
    .synops-prefix {
        font-size: 14px;
        margin-right: 4px;
    }

    .synops-suffix {
        font-size: 15px;
        margin-left: 3px;
    }

    .synops-result-stat {
        height: 76px;
    }
}

.synops-results-section {
    background: #000;
    color: #fff;
}


.synops-result-card {
    background: #FFFFFF0A;
    border: 0.79px solid #FFFFFF1C;
    border-radius: 18px;
    padding: 30px 20px;
    text-align: center;
}

.synops-result-card:hover {
    transform: translateY(-6px);
    border: 0.8px solid #FFFFFF52;
    background: #FFFFFF14;
    box-shadow: 0px 7.34px 22.03px 0px #3D78FF14;

}

.synops-result-card h3 {
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #FFF;
}

.synops-result-card h5 {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 8px;
    color: #FFF;
}

.synops-result-card p {
    font-size: 12px;
    line-height: 1.5;
    color: #888888;
    margin-bottom: 0;
}


.synops-testimonials {
    background: #000;
    color: #fff;
}


.testimonial-card {
    background: #0d0d0d;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    padding: 20px;

    display: flex;
    flex-direction: column;

    height: 100%;

}

.testimonial-text {

    font-size: 14px;
    line-height: 1.5;
    color: #cfcfcf;
    min-height: 100px;

}

.tick-icon {
    color: #18E385;
    width: 14px;
    height: 14px;
    font-weight: 700;
    line-height: 1;
}

.testimonial-user {

    display: flex;
    align-items: center;
    gap: 14px;

}

.testimonial-user img {

    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;

}

.testimonial-user h5 {

    font-size: 13.3px;
    font-weight: 600;
    margin-bottom: 2px;

}

.testimonial-user span {

    font-size: 10.54px;
    color: #888888;

}

.testimonial-card:hover {

    border-color: #2f2f2f;
    transition: .3s;

}

.synops-cloud-section {
    background: linear-gradient(180deg, #000000 0%, #081629 100%);

    padding: 80px 0;
    overflow: hidden;
}


.synops-cloud-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.synops-cloud-svg {
    width: 100%;
    max-width: 502px;
    height: auto;
    display: block;
}

.synops-cta-section {
    background: linear-gradient(180deg, #000000 0%, #081629 100%);

    /*   background:#000;*/
    color: #fff;
    padding: 90px 0 90px 0;

}

.synops-btn-primary,
.synops-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* Buttons */

.synops-btn-primary {
    gap: 10px;

    padding: 14px 28px;

    border-radius: 12px;

    background: linear-gradient(180deg, rgba(91, 92, 94, 0.2) 0%, rgba(61, 120, 255, 0.2) 100%);
    color: #fff;

    text-decoration: none;

    font-size: 12.4px;

    font-weight: 600;

    transition: .3s;

}

.synops-hero-section .synops-btn-primary {
    margin-bottom: 20px;
}

.synops-btn-primary:hover {

    background: linear-gradient(180deg, rgba(215, 215, 215, 0.5) 0%, rgba(61, 120, 255, 0.5) 100%);

    color: #fff;

}


.synops-btn-secondary {

    gap: 10px;
    padding: 14px 28px;
    border-radius: 12px;
    border: 0.81px solid #FFFFFF21;
    background: #151a23;
    color: #fff;
    text-decoration: none;

    font-size: 12.4px;

    font-weight: 600;

    transition: .3s;
    background: #FFFFFF0E;

}

.synops-btn-secondary:hover {

    border: 0.81px solid #FFFFFF52;
    color: #fff;
    background: #FFFFFF14;

}

.synops-btn-secondary:hover .tick-icon {
    color: #3D78FF;
}

.synops-btn-primary .bi-arrow-right {
    display: inline-block;
    transition: transform 0.3s ease;
}

.synops-btn-primary:hover .bi-arrow-right {
    transform: rotate(-45deg);
}

.btn-content {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Bottom Tags */

.synops-tags {

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;

}

.testimonial-stars {
    display: flex;
    align-items: center;
    gap: 4px;
}

.testimonial-stars i {
    font-size: 11px;
    color: #FFFFFF;
}

.testimonial-stars.green i {
    color: #18E385;
}

.synops-tags span {

    padding: 8px 14px;

    border-radius: 20px;

    border: 0.79px solid #FFFFFF17;

    background: #FFFFFF0A;


    color: #888888CC;

    font-size: 12px;

}


/*=====================================================
                JOURNEY SECTION
======================================================*/

.kl-journey-section {
    background: #000;
    overflow: hidden;
    position: relative;
    padding: 90px 0;
}

/*======================================
Journey Card
======================================*/

.kl-journey-card {

    position: relative;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: radial-gradient(circle at bottom left,
    rgba(35, 74, 173, .45),
    transparent 55%),
    linear-gradient(180deg,
            #05070B,
            #07111E 55%,
            #13264A);
    padding: 65px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02),
    0 30px 70px rgba(0, 0, 0, .45);
    height: 551px;
    overflow: hidden;
}

/*======================================
LEFT
======================================*/

.kl-left {

    position: relative;
    z-index: 2;

}

.kl-card-heading {

    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
    text-align: center;
}

.kl-card-para {

    color: #888888;

    font-size: 20px;

    line-height: 1.2;

    margin-bottom: 12px;
    text-align: center;

}

/*======================================
CENTER SVG
======================================*/

/*.kl-cloud-svg{

    width:100%;

    max-width:620px;

    display:block;

    margin:auto;

}*/
.kl-cloud-svg {
    height: 380px;
    max-width: 620px;
    display: block;
    position: relative;
    margin: 0 auto;
}

/*======================================
RIGHT
======================================*/

.kl-right {

    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* push content to bottom */
    align-items: flex-end;
    height: 100%;
    padding-top: 0; /* remove padding-top: 170px */
    gap: 16px;
}

.kl-right-content {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    position: absolute;
    right: 105px;
    bottom: 9px;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 40px;
}

/* =====================================
   CLOUD VISIBILITY CARD
   ===================================== */

.cloud-visibility-card {
    width: 226px;
    height: 254px;

    padding: 18px 20px;

    border-radius: 17px;

    background: linear-gradient(
            180deg,
            rgba(14, 38, 91, 0.48) 0%,
            rgba(5, 20, 53, 0.78) 100%
    );

    border: 1px solid rgba(61, 120, 255, 0.30);

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 30px rgba(0, 0, 0, 0.25);

    box-sizing: border-box;
}


/* Heading */

.cloud-visibility-title {
    margin: 0 0 14px;

    color: #3D78FF;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 1px;
    line-height: 1.2;
}


/* =====================================
   ITEM
   ===================================== */

.visibility-item {
    display: flex;
    align-items: center;

    gap: 11px;

    min-height: 39px;
}


/* =====================================
   ICON BOX
   ===================================== */

.visibility-icon {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}


.visibility-icon img {
    width: 32px;
    height: 32px;

    object-fit: contain;

    display: block;
}


/* =====================================
   TEXT
   ===================================== */

.visibility-content {
    min-width: 0;
}

.visibility-content h4 {
    margin: 0 0 3px;

    color: #fff;

    font-size: 10px;
    font-weight: 500;

    line-height: 1.2;
}

.visibility-content p {
    margin: 0 0 12px;

    color: rgba(148, 163, 184, 0.85);

    font-size: 7.68px;
    font-weight: 400;

    line-height: 1.25;
}


/* =====================================
   ARROW / TRANSITION
   ===================================== */

.visibility-arrow {
    display: flex;
    align-items: center;

    width: 100%;

    gap: 5px;

    margin: 6px 0;
}


.visibility-arrow span {
    flex: 1;

    height: 1px;

    background: rgba(148, 163, 184, 0.30);
}


.visibility-arrow div {
    color: rgba(148, 163, 184, 0.65);

    font-size: 9px;

    line-height: 1;

    width: 10px;

    text-align: center;
}


/* =====================================
   RESPONSIVE
   ===================================== */

@media (max-width: 991px) {

    .cloud-visibility-card {
        max-width: 100%;
    }

}


@media (max-width: 576px) {

    .cloud-visibility-card {
        padding: 18px;

        min-height: auto;
    }

    .cloud-visibility-title {
        font-size: 12px;
    }

    .visibility-content h4 {
        font-size: 10px;
    }

    .visibility-content p {
        font-size: 8px;
    }

}

/*======================================
Background SVG
======================================*/

/*.kl-floating-svg{

    position:absolute;

    right:-60px;

    top:20px;

    width:430px;

    opacity:.7;

    pointer-events:none;

    z-index:0;

}*/
/*.kl-floating-svg {
    position: absolute;
    width: 909px;
    height: 666px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: 0px;
}*/
.kl-floating-svg {
    position: absolute;
    width: 960px;
    height: 316px;
    left: 52%;
    right: auto;
    transform: translateX(-50%);
    top: 0px;
}

/*======================================
Stats Wrapper
======================================*/

/*.kl-stats{

    width: 170px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-left:auto;
    z-index:2;


}*/
/*======================================
STAT CARD
======================================*/
/*
.journey-card{
    position: relative;
    background:rgba(17,27,52,.78);

    backdrop-filter:blur(18px);

    border:1px solid rgba(110,154,255,.28);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.03),
        0 12px 28px rgba(0,0,0,.35);

      padding: 6px 8px;
      border-radius: 10px;
}*/
/*
.stat-sub-text {
    font-size: 10px;
    margin-top: 4px;
    font-weight: 400;
    color: #7C88A8;
    line-height: 1.4;
}

.stat-arrow {
    margin-right: 4px;
    color: #7C88A8;
}

.journey-card small{

    display:block;
    color:#7F93C4;
    letter-spacing:.12em;
    text-transform:uppercase;
    font-size: 6px;
    margin-bottom: 4px;
}

.journey-card h4{


    color:#fff;
    font-weight:700;
    line-height:1;
    font-size: 11px;
    margin: 1px 0 0 0;
}

.journey-card p{

    margin:6px 0 0;

    font-size:8px;

    color:#97A4C8;

}


.integration-card li:last-child{

    border-bottom:none;

}
*/


/*======================================
Left Side
======================================*/

/*.integration-card li span:first-child{

    position:relative;

    padding-left:16px;

    color:#C6D2F4;

    font-size:11px;

}

.integration-card li span:first-child::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    transform:translateY(-50%);

    width:6px;

    height:6px;

    border-radius:50%;

    background:#3B82F6;

    box-shadow:0 0 8px #3B82F6;

}*/

/*======================================
Connected
======================================*/

/*.integration-card li span:last-child{

    color:#57A5FF;

    font-size:11px;

    font-weight:600;

}*/

/*======================================
Glow Effect
======================================*/
/*
.integration-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    padding:1px;

    background:linear-gradient(
        180deg,
        rgba(110,170,255,.45),
        transparent
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    pointer-events:none;

}*/

/*======================================
Card Glow
======================================*/

.kl-journey-card::after {

    content: "";

    position: absolute;

    left: -180px;

    bottom: -180px;

    width: 500px;

    height: 500px;

    background: radial-gradient(circle,
    rgba(47, 92, 255, .30),
    transparent 70%);

    pointer-events: none;

}


/* ── Right panel size reduction ── */
/*.kl-floating-svg {
    width: 320px;
}*/

/*.kl-stats {
    width: 130px;
    gap: 10px;
}*/

/*
==============================================
  synops-chart.css

==============================================
*/

.synops-chart-svg {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.synops-chart-svg svg {
    width: 100%;
    height: auto;
    display: block;
}

.travel-dot {
    opacity: 0.88;
    pointer-events: none;
}

.pulse-node {
    opacity: 0.72;
    pointer-events: none;
}

.finops-platform-dashboard .row.g-3 > .col-lg-8 {
    flex: 0 0 60% !important;
    width: 60% !important;
    max-width: 60% !important;
    min-width: 0 !important;
    /* remove Bootstrap's default padding that creates gutter */
    padding-left: 0 !important;
    padding-right: 6px !important;
    box-sizing: border-box !important;
}

.finops-platform-dashboard .row.g-3 > .col-lg-4 {
    flex: 0 0 40% !important;
    width: 40% !important;
    max-width: 40% !important;
    min-width: 0 !important;
    padding-left: 6px !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* 3. Stats row: col-6 becomes 25% always (not 50%)
      Bootstrap makes col-6 = 50% below md (768px) */
.finops-bottom-stats .row.g-0 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
}

.finops-bottom-stats .row.g-0 > .col-6 {
    flex: 0 0 25% !important;
    width: 25% !important;
    max-width: 25% !important;
    min-width: 0 !important;
    padding: 0 !important;
}

.strip-contact-text {
    writing-mode: vertical-rl !important;
    text-orientation: upright !important;

    color: #fff !important;
    font-size: 9px !important;
    font-weight: 600 !important;

    letter-spacing: 6px !important;
    line-height: 1 !important;

    margin-top: 8px !important;
}

.synops-strip-row > .strip-contact-column {

    transform: translate(69px, 36px) !important;
    margin-left: 0;
    margin-right: 0;
}

/* =========================
   FAQ SECTION
========================= */
.faq-section {

    background: #000;
}

.faq-section .section-container {
    width: 100%;
    max-width: 690px;
    margin: 0 auto;
    padding: 80px 20px 0px 20px;
}


/* Accordion */

.faq-accordion {
    width: 100%;
    border: 0.8px solid #FFFFFF12;
    border-radius: 12px;

    overflow: hidden;

    background: #080b0f;
}


/* Individual item */

.faq-item {
    border-bottom: 1px solid #242424;
}

.faq-item:last-child {
    border-bottom: none;
}


/* Question */

.faq-question {
    width: 100%;

    min-height: 58px;

    padding: 0 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    border: none;
    outline: none;

    background: transparent;

    color: #d5d5d5;

    font-family: inherit;
    font-size: 11px;
    font-weight: 400;

    text-align: left;

    cursor: pointer;

    transition: background 0.25s ease;
}

.faq-question:hover {
    background: rgba(255, 255, 255, 0.025);
}


/* Question text */

.faq-question > span:first-child {
    flex: 1;
}


/* Plus / Close icon */

.faq-icon {
    width: 15px;
    height: 15px;

    flex: 0 0 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #1d2024;

    color: #c7c7c7;

    font-size: 13px;
    font-weight: 400;

    line-height: 1;

    transition: transform 0.3s ease,
    background 0.3s ease;
}


/* Answer */

.faq-answer {
    max-height: 0;

    overflow: hidden;

    padding: 0 16px;

    background: #0a0d11;

    opacity: 0;

    transition: max-height 0.35s ease,
    padding 0.35s ease,
    opacity 0.25s ease;
}

.faq-answer p {
    /*    max-width: 478px;*/
    margin: 0;
    color: #929292;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.55;
}


/* =========================
   ACTIVE ACCORDION
========================= */

.faq-item.active .faq-question {
    background: #FFFFFF0D;

}

.faq-item.active .faq-icon {
    background: #303030;

    color: #a8a8a8;

    font-size: 14px;

    transform: rotate(0deg);
}

.faq-item.active .faq-answer {
    max-height: 200px;

    padding-top: 20px;
    padding-bottom: 20px;
    background: #FFFFFF05;
    opacity: 1;
}


/* ══════════════════════════════════════════
   MEDIA QUERIES
   ══════════════════════════════════════════ */

@media (min-width: 1530px) {


    /*.synops-body-section .synops-hero-section .section-container {
    width: 100%;
    max-width: 1350px;
}*/
    .synops-body-section .synops-hero-section .section-container {
        width: 100%;
        max-width: 1320px;
    }

    .hero__content {
        max-width: 840px;
    }

    .cloud-problem-section {
        padding: 90px 0;
    }

    .badge-text {
        font-size: 15px;
    }

    .cloud-card {
        padding: 26px 22px;
    }

    .cloud-icon {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        margin-bottom: 20px;
    }

    .cloud-icon img {
        width: 22px;
        height: 22px;
    }

    .cloud-card h4 {
        font-size: 15px;
        margin-bottom: 15px;
    }

    .cloud-card p {
        font-size: 13px;
        line-height: 1.75;
    }

    .trusted-companies-section {
        /*        padding: 100px 0 82px;*/
        padding: 100px 0 0px;
    }

    .trusted-companies-title {
        font-size: 18px;
        letter-spacing: 2px;
        margin-bottom: 52px;
    }

    .trusted-logo-item img {
        height: 40px;
    }

    .synops-body-section .synops-hero-section {
        padding: 50px 20px 10px;
    }

    .hero__logo {
        height: 48px;
        margin-bottom: 46px;
    }

    .hero__badge {
        font-size: 13px;
        padding: 9px 20px;
        gap: 8px;
        margin-bottom: 40px;
    }

    .hero__badge-icon {
        width: 15px;
        height: 15px;
    }

    .hero__heading {
        font-size: 44px;
        letter-spacing: -1.2px;
        margin-bottom: 24px;
        line-height: 1.12;
    }

    .hero__desc {
        font-size: 16px;
        line-height: 1.75;
        margin-bottom: 68px;
        max-width: 591px;
    }

    /* .synops-dashboard           { grid-template-columns: 190px 1fr; padding: 20px; }
    .synops-sidebar             { height: 530px; padding: 18px; }
    .synops-logo-box img        { height: 26px; }
    .synops-stat-card h3        { font-size: 14px; }
    .synops-chart-area svg      { height: 150px; }
    .synops-donut-svg,
    .synops-donut-svg svg       { width: 120px; height: 120px; }*/
    /* ── DASHBOARD WRAPPER ── */
    .synops-dashboard {
        grid-template-columns: 190px 1fr;
        padding: 20px;
        border-radius: 22px;
        gap: 0;
    }

    /* ── SIDEBAR ── */
    .synops-sidebar {
        height: 530px;
        padding: 18px;
        border-radius: 20px;
        overflow: hidden;
    }

    .synops-logo-box {
        margin-bottom: 10px;
    }

    .synops-logo-box img {
        height: 26px;
    }

    .synops-company-box {
        height: 28px;
        font-size: 9px;
        padding: 0 12px;
        border-radius: 10px;
        margin-bottom: 10px;
        gap: 8px;
    }

    .synops-company-icon,
    .synops-chevron-icon {
        width: 11px;
        height: 11px;
    }

    .synops-sidebar-nav {
        gap: 4px;
    }

    .synops-nav-item {
        height: 22px;
        font-size: 8px;
        gap: 10px;
        padding: 0 10px;
        border-radius: 9px;
    }

    .synops-nav-icon {
        width: 15px;
        height: 11px;
        flex-shrink: 0;
    }

    .synops-count {
        width: 17px;
        height: 16px;
        font-size: 7px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .synops-sidebar-footer {
        margin-top: 10px;
        padding-top: 10px;
    }

    .synops-notification-row {
        font-size: 11px;
        gap: 5px;
        margin-bottom: 10px;
    }

    .synops-dot {
        width: 6px;
        height: 6px;
    }

    .synops-user {
        gap: 10px;
    }

    .synops-user-avatar {
        width: 26px;
        height: 26px;
        font-size: 10px;
        flex-shrink: 0;
    }

    .synops-user h6 {
        font-size: 9px;
        margin: 0;
    }

    .synops-user small {
        font-size: 9px;
    }

    /* ── MAIN ── */
    .synops-main {
        padding: 18px;
        min-height: auto;
        overflow: hidden;
    }

    /* ── TOPBAR ── */
    .synops-topbar {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 15px;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .synops-search-box {
        width: 287px;
        min-width: 0;
        flex-shrink: 1;
        height: 34px;
        font-size: 9px;
        padding: 0 14px;
        gap: 10px;
        border-radius: 10px;
    }

    .synops-search-icon {
        width: 11px;
        height: 11px;
        flex-shrink: 0;
    }

    .synops-pill {
        height: 34px;
        padding: 0 14px;
        font-size: 9px;
        border-radius: 10px;
        gap: 8px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .synops-cloud-icon,
    .synops-calendar-icon {
        width: 11px;
        height: 11px;
    }

    .synops-arrow-down-icon {
        width: 20px;
        height: 20px;
    }

    .synops-flex-space {
        flex: 1;
    }

    .synops-icon-circle {
        width: 29px;
        height: 29px;
        flex-shrink: 0;
    }

    .synops-notification-icon {
        width: 29px;
        height: 29px;
    }

    .synops-ai-btn {
        height: 36px;
        padding: 0 18px;
        font-size: 11px;
        border-radius: 18px;
        gap: 8px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .synops-ai-icon {
        width: 11px;
        height: 11px;
    }

    .synops-profile-box {
        font-size: 11px;
        gap: 8px;
        flex-shrink: 0;
    }

    .synops-profile-circle {
        width: 26px;
        height: 26px;
        font-size: 9px;
    }

    /* ── DASHBOARD HEADER ── */
    .synops-dashboard-head {
        margin-bottom: 8px;
    }

    .synops-dashboard-header {
        margin-bottom: 12px;
        align-items: center;
    }

    .synops-dashboard-header h2 {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .synops-dashboard-header p {
        font-size: 11px;
        margin: 0;
    }

    .synops-refresh-btn {
        height: 30px;
        padding: 0 14px;
        font-size: 10px;
        border-radius: 15px;
        gap: 8px;
        flex-shrink: 0;
    }

    .synops-refresh-icon {
        width: 11px;
        height: 11px;
    }

    /* ── STAT CARDS — 4 columns in a row ── */
    .synops-stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
        margin-bottom: 18px;
    }

    .synops-stat-card {
        min-height: 118px;
        padding: 16px 16px 0 16px;
        border-radius: 14px;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
    }

    .synops-stat-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        gap: 2px;
        flex-wrap: nowrap;
    }

    .synops-stat-title {
        font-size: 9px;
        font-weight: 600;
        line-height: 1.2;
        color: rgba(100, 116, 139, 1);
    }

    .synops-stat-badge {
        font-size: 9px;
        padding: 3px 6px;
        gap: 4px;
        border-radius: 30px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
    }

    .synops-badge-icon {
        width: 10px;
        height: 10px;
    }

    .synops-stat-card h3 {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 0;
        line-height: 1;
        color: rgba(226, 232, 245, 1);
    }

    .synops-stat-card small {
        font-size: 8px;
        display: block;
        line-height: 1.2;
        color: rgba(100, 116, 139, 1);
    }

    .synops-mini-chart,
    .synops-main-chart {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 42px;
    }

    .synops-mini-chart svg,
    .synops-main-chart svg {
        width: 100%;
        height: 42px;
        display: block;
    }

    /* ── BOTTOM GRID — chart left, donut right ── */
    .synops-bottom-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 16px;
    }

    /* Chart card */
    .synops-chart-card {
        padding: 15px 36px 8px 12px;
        max-height: 283px;
        border-radius: 16px;
        overflow: hidden;
    }

    .synops-card-header {
        margin-bottom: 5px;
    }

    .synops-card-header h5 {
        font-size: 11px;
        margin-bottom: 0;
    }

    .synops-card-header small {
        font-size: 9px;
    }

    .synops-chart-filter {
        height: auto;
        gap: 2px;
    }

    .synops-chart-filter span {
        font-size: 9px;
        padding: 7px 8px 0;
    }

    .synops-chart-wrapper {
        gap: 0;
    }

    .synops-chart-area {
        width: 100%;
        overflow: hidden;
    }

    .synops-chart-area svg {
        width: 100%;
        height: 150px;
    }

    .synops-chart-legend {
        font-size: 8.5px;
        gap: 14px;
        padding: 6px 10px;
        margin-top: 4px;
    }

    .legend-icon {
        width: 12px;
        height: 11px;
    }

    /* Donut card */
    .synops-donut-card {
        padding: 15px 12px 8px 12px;
        max-height: 283px;
        border-radius: 16px;
        overflow: hidden;
    }

    .synops-donut-wrapper {
        padding: 0;
        display: flex;
        justify-content: center;
    }

    .synops-donut-svg {
        width: 120px;
        height: 120px;
        flex-shrink: 0;
    }

    .synops-donut-svg svg {
        width: 120px;
        height: 120px;
    }

    .synops-legend {
        display: flex;
        flex-direction: column;
        gap: 5px;
        font-size: 9px;
        opacity: 1;
        width: 100%;
        margin-top: 0;
    }

    .synops-legend div {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .synops-legend .dot {
        width: 9px;
        height: 9px;
        flex-shrink: 0;
        border-radius: 50%;
    }

    .synops-legend .pct {
        margin-left: auto;
        font-size: 9px;
        color: #8096b7;
        font-weight: 600;
    }

    .synops-ai-engine-section {
        padding: 18px 0;
    }

    .synops-ai-title {
        font-size: 36px;
    }

    .synops-ai-description {
        font-size: 16px;
        margin-bottom: 50px;
    }

    .synops-dashboard-wrapper {
        padding: 12px;
    }

    .synops-dashboard-title {
        font-size: 13px;
    }

    .synops-dashboard-subtitle {
        font-size: 9px;
        max-width: 400px;
    }

    .synops-dashboard-status {
        font-size: 8.5px;
        gap: 5px;
    }

    .synops-powered-tag {
        font-size: 8px;
        padding: 2px 7px;
    }

    /* Stat Cards */
    .synops-ai-stat-card {
        padding: 10px 12px;
        min-height: 68px;
        border-radius: 12px;
    }

    .stat-label {
        font-size: 8px;
        letter-spacing: 0.7px;
    }

    .synops-ai-stat-card h4 {
        font-size: 16px;
    }

    .stat-loss,
    .stat-profit {
        font-size: 8px;
        padding: 3px 6px;
    }

    /* Chart */
    .synops-chart-svg {
        height: 333px;
    }

    .synops-chart-svg svg {
        height: 370px;
    }

    .synops-chart-legend {
        font-size: 8.5px;
        gap: 14px;
        padding: 6px 10px;
    }

    .legend-svg-icon {
        width: 16px;
        height: 11px;
    }

    /* Feature Slider */
    .synops-feature-slider {
        height: 62px;
    }

    .synops-feature-card {
        width: 55%;
        height: 62px;
        min-height: 62px;
        padding: 8px 12px;
        border-radius: 14px;
    }

    .synops-feature-icon-img {
        width: 26px;
        height: 26px;
    }

    .synops-feature-content h6 {
        font-size: 11px;
        margin-bottom: 2px;
    }

    .synops-feature-content p {
        font-size: 9px;
        line-height: 1.3;
    }

    .synops-feature-arrow-img {
        width: 8px;
        height: 8px;
    }

    /* Recommendation Cards */
    .synops-recommendations {
        gap: 8px;
    }

    .synops-ai-recommendation-label {
        font-size: 9px;
        margin-bottom: 8px;
    }

    .synops-recommend-card {
        padding: 12px 14px;
        border-radius: 14px;
    }

    .recommend-top h5 {
        font-size: 11px;
        line-height: 1.3;
    }

    .recommend-badge {
        font-size: 7.5px;
        padding: 3px 7px;
        border-radius: 12px;
    }

    .recommend-label {
        font-size: 7.5px;
        margin-bottom: 2px;
    }

    .recommend-price {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .recommend-month {
        font-size: 10px;
    }

    .recommend-ai-tag {
        font-size: 7px;
        height: 14px;
        min-width: 18px;
    }

    .recommend-note {
        font-size: 8px;
    }

    .recommend-btn {
        height: 26px;
        font-size: 7.5px;
        border-radius: 9px;
        gap: 8px;
    }

    .recommend-arrow-icon {
        width: 14px;
        height: 14px;
    }

    .synops-total-saving-card {
        padding: 11px 14px;
        border-radius: 14px;
    }

    .saving-title {
        font-size: 7.5px;
        letter-spacing: 1px;
        margin-bottom: 4px;
    }

    .synops-total-saving-card h2 {
        font-size: 18px;
    }

    .synops-total-saving-card small {
        font-size: 10px;
    }

    .finops-platform-section {
        padding: 60px 0;
    }

    /*    .finops-platform-section .synops-ai-title { font-size: 36px; }
    .finops-platform-section .synops-ai-description { font-size: 16px; margin-bottom: 50px; }*/
    .finops-platform-dashboard {
        padding: 20px;
        border-radius: 18px;
    }

    .finops-platform-tabs {
        gap: 12px;
        margin-bottom: 20px;
    }

    .finops-platform-tab {
        padding: 9px 14px;
        font-size: 12px;
        border-radius: 9px;
    }

    /* Chart card */
    .finops-chart-card {
        padding: 16px;
        height: 66%;
    }

    .finops-chart-header {
        margin-bottom: 20px;
    }

    .finops-chart-header h4 {
        font-size: 12px;
        margin-bottom: 6px;
    }

    .finops-chart-header h3 {
        font-size: 26.3px;
    }

    .finops-growth-badge {
        font-size: 11px;
        padding: 8px 12px;
        border-radius: 20px;
    }

    /* y-axis + SVG */
    .finops-chart-body {
        display: flex;
        gap: 14px;
    }

    .finops-y-axis {
        display: flex;
        width: 42px;
        height: 250px;
        font-size: 11px;
        color: #6f7580;
    }

    .finops-graph-area svg {
        width: 100%;
        height: 250px;
        display: block;
    }

    .finops-x-axis {
        margin-left: 45px;
        margin-top: 8px;
        font-size: 11px;
    }

    /* Resource card */
    .finops-resource-card {
        padding: 16px;
        height: 100%;
    }

    .finops-resource-title {
        font-size: 15px;
        margin-bottom: 18px;
    }

    .finops-resource-item {
        padding: 12px;
        margin-bottom: 12px;
        border-radius: 12px;
    }

    .finops-resource-header {
        margin-bottom: 10px;
    }

    .finops-resource-header span {
        font-size: 11px;
    }

    .finops-resource-header strong {
        font-size: 13px;
    }

    .finops-progress {
        height: 4px;
        margin-bottom: 8px;
    }

    .finops-resource-item small {
        font-size: 10px;
    }

    /* Bottom stats */
    .finops-bottom-stats {
        margin-top: 24px;
        padding-top: 22px;
    }

    .finops-stat-box h3 {
        font-size: 34px;
        margin-bottom: 6px;
    }

    .finops-stat-box p {
        font-size: 12px;
    }

    .finops-capabilities-section {
        padding: 90px 0;
    }

    .finops-capabilities-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
    }

    .finops-feature-large {
        grid-column: span 2;
        min-height: 178px;
    }

    .finops-feature-card {
        padding: 24px;
        min-height: 150px;
        border-radius: 18px;
    }

    /*    .finops-feature-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 20px;
    }

    .finops-feature-icon img {
        width: 22px;
        height: 22px;
    }

    .finops-feature-card h4 {
        font-size: 17px;
        margin-bottom: 14px;
    }

    .finops-feature-card p {
        font-size: 13px;
        line-height: 1.75;
    }*/
    .finops-feature-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 20px;
    }

    .finops-feature-icon img {
        width: 42px;
        height: 42px;
    }

    .finops-feature-card h4 {
        font-size: 17px;
        margin-bottom: 14px;
    }

    .finops-feature-card p {
        font-size: 13px;
        line-height: 1.75;
    }

    .kl-journey-section {
        padding: 110px 0;
    }

    .kl-journey-card {
        height: 600px;
        padding: 46px 52px;
        border-radius: 32px;
    }

    /*    . kl-card-heading { font-size: 34px; margin-bottom: 14px; }
    .kl-card-para  { font-size: 18px; max-width: 460px; }*/
    /*    .kl-cloud-svg {
        width: 61%;
        max-width: 660px;
        bottom: -36px;
        left: -22px;
    }*/
    /*    .kl-floating-svg { width: 480px; right: -60px; top: 20px; }*/
    .kl-stats {
        width: 192px;
        gap: 14px;
    }

    .kl-right-content {
        gap: 17px;
    }

    .journey-card {
        padding: 7px 9px;
        border-radius: 11px;
    }

    .journey-card small {
        font-size: 6.5px;
    }

    .journey-card h4 {
        font-size: 12.5px;
    }

    .journey-card p {
        font-size: 8.5px;
    }

    .stat-sub-text {
        font-size: 9.5px;
    }

    .integration-card {
        width: 278px;
        max-height: 310px;
        border-radius: 19px 19px 0 0;
    }

    .integration-header {
        padding: 10px 19px;
    }

    .integration-header span:first-child,
    .integration-header span:last-child {
        font-size: 9px;
    }

    integration-card ul li {
        padding: 6px 17px;
    }

    .integration-card li span:first-child {
        font-size: 11px;
    }

    .integration-card li span:last-child {
        font-size: 8.5px;
    }

    .cloud-provider {
        width: 62px;
        height: 62px;
    }

    .synops-results-section {
        padding: 90px 0;
    }

    .synops-result-card {
        padding: 38px 26px;
        border-radius: 20px;
    }

    .synops-result-card h3 {
        font-size: 56px;
        margin-bottom: 22px;
    }

    .synops-result-card h5 {
        font-size: 17.5px;
        margin-bottom: 9px;
    }

    .synops-result-card p {
        font-size: 13px;
        line-height: 1.58;
    }

    .synops-ai-icon {
        width: 18px;
        height: 18px;
    }

    .synops-testimonials {
        padding: 100px 0;
    }

    .synops-ai-title {
        font-size: 44px;
        max-width: 632px;
    }

    .synops-ai-description {
        font-size: 16.5px;
        margin-bottom: 56px;
    }

    .testimonial-card {
        padding: 26px;
        border-radius: 20px;
    }

    .testimonial-text {
        font-size: 15px;
        line-height: 1.65;
        min-height: 110px;
    }

    .testimonial-user img {
        width: 50px;
        height: 50px;
    }

    .testimonial-user h5 {
        font-size: 14px;
    }

    .testimonial-user span {
        font-size: 11px;
    }

    .testimonial-stars i {
        font-size: 13px;
    }

    .synops-cloud-section {
        padding: 100px 0;
    }

    .synops-cloud-svg {
        max-width: 680px;
    }

    .synops-cta-section {
        padding: 83px 0;
    }

    .synops-btn-primary,
    .synops-btn-secondary {
        padding: 14px 28px;
        font-size: 12.5px;
        border-radius: 12px;

        height: 55px;
        min-height: 55px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    .synops-tags span {
        font-size: 13px;
        padding: 9px 16px;
    }

    .synops-tags {
        gap: 12px;
        margin-top: 52px;
    }

    .synops-strip-row .strip-logo img:first-child {
        width: 120px !important;
        height: auto !important;
    }

    .synops-strip-row .strip-logo img:last-child {
        width: 150px !important;
        height: auto !important;
    }

    .synops-strip-row .strip-logo {
        gap: 18px !important;
    }

    .synops-strip-row .strip-text h4 {
        font-size: 25px !important;
    }

    .synops-strip-row > div:first-child {
        flex: 0 0 28% !important;
        width: 28% !important;
        max-width: 28% !important;
    }

    .synops-strip-row .strip-logo {
        gap: clamp(8px, 0.7vw, 16px) !important;
    }

    .synops-strip-row .strip-text h4 {
        /* font-size: 15px !important;*/
        white-space: nowrap !important;
    }

    .synops-strip-row > .strip-contact-column {
        transform: translate(75px, 40px) !important;
    }

    .strip-contact {
        gap: clamp(7px, 0.65vw, 12px) !important;
    }

    .strip-contact-arrow {
        width: clamp(32px, 3.2vw, 44px) !important;
        height: clamp(32px, 3.2vw, 44px) !important;
    }

    .strip-contact-text {
        font-size: 11px !important;
        width: 20px !important;
        gap: 13px !important;
    }

    .hero-glow {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 0;
    }
}

@media (min-width: 1440px) and (max-width: 1529.5px) {
    .synops-body-section .synops-hero-section .section-container {
        width: 100%;
        max-width: 1270px;
    }

    .hero__content {
        max-width: 820px;
    }

    .cloud-problem-section {
        padding: 80px 0;
    }

    .badge-text {
        font-size: 14px;
    }

    .cloud-card {
        padding: 24px 20px;
    }

    .cloud-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 18px;
    }

    .cloud-card h4 {
        font-size: 15px;
        margin-bottom: 14px;
    }

    .cloud-card p {
        font-size: 12.5px;
        line-height: 1.72;
    }

    .trusted-companies-section {
        padding: 94px 0 76px;
    }

    .trusted-companies-title {
        font-size: 17px;
        letter-spacing: 1.9px;
        margin-bottom: 48px;
    }

    .trusted-logo-item img {
        height: 36px;
    }

    .trusted-logo-row {
        gap: 22px;
    }

    .trusted-logo-item img {
        height: 40px;
    }

    .trusted-companies-title {
        font-size: 18px;
    }

    .synops-body-section .synops-hero-section {
        padding: 50px 20px 10px;
    }

    .hero__logo {
        height: 46px;
        margin-bottom: 44px;
    }

    .hero__badge {
        font-size: 13px;
        padding: 9px 20px;
        gap: 8px;
        margin-bottom: 40px;
    }

    .hero__badge-icon {
        width: 15px;
        height: 15px;
    }

    .hero__heading {
        font-size: 43px;
        letter-spacing: -1.2px;
        margin-bottom: 24px;
        line-height: 1.12;
    }

    .hero__desc {
        font-size: 16px;
        line-height: 1.75;
        margin-bottom: 65px;
        max-width: 750px;
    }

    /*    .synops-dashboard           { grid-template-columns: 185px 1fr; padding: 18px; }
    .synops-sidebar             { height: 525px; }
    .synops-stat-card h3        { font-size: 14px; }
    .synops-chart-area svg      { height: 140px; }
    .synops-donut-svg,
    .synops-donut-svg svg       { width: 115px; height: 115px; }*/
    /* ── DASHBOARD WRAPPER ── */
    .synops-dashboard {
        grid-template-columns: 185px 1fr;
        padding: 18px;
        border-radius: 22px;
        gap: 0;
    }

    /* ── SIDEBAR ── */
    .synops-sidebar {
        height: 525px;
        padding: 17px;
        border-radius: 20px;
        overflow: hidden;
    }

    .synops-logo-box {
        margin-bottom: 10px;
    }

    .synops-logo-box img {
        height: 23px;
    }

    .synops-company-box {
        height: 28px;
        font-size: 9px;
        padding: 0 12px;
        border-radius: 10px;
        margin-bottom: 10px;
        gap: 8px;
    }

    .synops-company-icon,
    .synops-chevron-icon {
        width: 11px;
        height: 11px;
    }

    .synops-sidebar-nav {
        gap: 4px;
    }

    .synops-nav-item {
        height: 22px;
        font-size: 8px;
        gap: 8px;
        padding: 0 10px;
        border-radius: 9px;
    }

    .synops-nav-icon {
        width: 15px;
        height: 11px;
        flex-shrink: 0;
    }

    .synops-count {
        width: 17px;
        height: 16px;
        font-size: 7px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .synops-sidebar-footer {
        margin-top: 10px;
        padding-top: 10px;
    }

    .synops-notification-row {
        font-size: 9px;
        gap: 5px;
        margin-bottom: 10px;
    }

    .synops-dot {
        width: 6px;
        height: 6px;
    }

    .synops-user {
        gap: 8px;
    }

    .synops-user-avatar {
        width: 24px;
        height: 24px;
        font-size: 9px;
        flex-shrink: 0;
    }

    .synops-user h6 {
        font-size: 9px;
        margin: 0;
    }

    .synops-user small {
        font-size: 8px;
    }

    /* ── MAIN ── */
    .synops-main {
        padding: 16px 15px;
        min-height: auto;
        overflow: hidden;
    }

    /* ── TOPBAR ── */
    .synops-topbar {
        display: flex;
        align-items: center;
        gap: 11px;
        margin-bottom: 15px;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .synops-search-box {
        width: 275px;
        min-width: 0;
        flex-shrink: 1;
        height: 33px;
        font-size: 9px;
        padding: 0 13px;
        gap: 8px;
        border-radius: 10px;
    }

    .synops-search-icon {
        width: 11px;
        height: 11px;
        flex-shrink: 0;
    }

    .synops-pill {
        height: 33px;
        padding: 0 13px;
        font-size: 9px;
        border-radius: 10px;
        gap: 7px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .synops-cloud-icon,
    .synops-calendar-icon {
        width: 11px;
        height: 11px;
    }

    .synops-arrow-down-icon {
        width: 19px;
        height: 19px;
    }

    .synops-flex-space {
        flex: 1;
    }

    .synops-icon-circle {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
    }

    .synops-notification-icon {
        width: 28px;
        height: 28px;
    }

    .synops-ai-btn {
        height: 33px;
        padding: 0 17px;
        font-size: 10px;
        border-radius: 17px;
        gap: 8px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .synops-ai-icon {
        width: 11px;
        height: 11px;
    }

    .synops-profile-box {
        font-size: 9px;
        gap: 7px;
        flex-shrink: 0;
    }

    .synops-profile-circle {
        width: 25px;
        height: 25px;
        font-size: 9px;
    }

    /* ── DASHBOARD HEADER ── */
    .synops-dashboard-head {
        margin-bottom: 8px;
    }

    .synops-dashboard-header {
        margin-bottom: 12px;
        align-items: center;
    }

    .synops-dashboard-header h2 {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .synops-dashboard-header p {
        font-size: 10px;
        margin: 0;
    }

    .synops-refresh-btn {
        height: 28px;
        padding: 0 14px;
        font-size: 10px;
        border-radius: 14px;
        gap: 6px;
        flex-shrink: 0;
    }

    .synops-refresh-icon {
        width: 11px;
        height: 11px;
    }

    /* ── STAT CARDS — 4 columns in a row ── */
    .synops-stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 13px;
        margin-bottom: 16px;
    }

    .synops-stat-card {
        min-height: 0;
        height: 112px;
        padding: 12px 12px 0 12px;
        border-radius: 14px;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
    }

    .synops-stat-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 6px;
        gap: 2px;
        flex-wrap: nowrap;
    }

    .synops-stat-title {
        font-size: 9px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 55%;
        color: rgba(100, 116, 139, 1);
    }

    .synops-stat-badge {
        font-size: 8px;
        padding: 2px 6px;
        gap: 3px;
        border-radius: 20px;
        flex-shrink: 0;
        white-space: nowrap;
        display: inline-flex;

        align-items: center;
    }

    .synops-badge-icon {
        width: 8px;
        height: 8px;
    }

    .synops-stat-card h3 {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 3px;
        line-height: 1;
        white-space: nowrap;
        color: rgba(226, 232, 245, 1);
    }

    .synops-stat-card small {
        font-size: 8px;
        display: block;
        line-height: 1.2;
        color: rgba(100, 116, 139, 1);
    }

    .synops-mini-chart,
    .synops-main-chart {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 36px;
    }

    .synops-mini-chart svg,
    .synops-main-chart svg {
        width: 100%;
        height: 36px;
        display: block;
    }

    /* ── BOTTOM GRID — chart left, donut right ── */
    .synops-bottom-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 13px;
    }

    /* Chart card */
    .synops-chart-card {
        padding: 14px 12px;
        max-height: none;
        border-radius: 14px;
        overflow: hidden;
    }

    .synops-card-header {
        margin-bottom: 10px;
    }

    .synops-card-header h5 {
        font-size: 11px;
        margin-bottom: 0;
    }

    .synops-card-header small {
        font-size: 9px;
    }

    .synops-chart-filter {
        height: auto;
        gap: 2px;
    }

    .synops-chart-filter span {
        font-size: 9px;
        padding: 5px 7px 0;
    }

    .synops-chart-wrapper {
        gap: 0;
    }

    .synops-chart-area {
        width: 100%;
        overflow: hidden;
    }

    .synops-chart-area svg {
        width: 100%;
        height: 152px;
    }

    .synops-chart-legend {
        font-size: 9px;
        gap: 14px;
        padding: 6px 9px;
        margin-top: 10px;
    }

    .legend-icon {
        width: 13px;
        height: 11px;
    }

    /* Donut card */
    .synops-donut-card {
        padding: 14px 11px;
        max-height: none;
        border-radius: 14px;
        overflow: hidden;
    }

    .synops-donut-wrapper {
        padding: 6px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .synops-donut-svg {
        width: 122px;
        height: 122px;
        flex-shrink: 0;
    }

    .synops-donut-svg svg {
        width: 122px;
        height: 122px;
    }

    .synops-legend {
        display: flex;
        flex-direction: column;
        gap: 5px;
        font-size: 9px;
        opacity: 1;
        width: 100%;
        margin-top: 10px;
    }

    .synops-legend div {
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .synops-legend .dot {
        width: 8px;
        height: 8px;
        flex-shrink: 0;
        border-radius: 50%;
    }

    .synops-legend .pct {
        margin-left: auto;
        font-size: 9px;
        color: #8096b7;
        font-weight: 600;
    }

    /*    .hero-glow {
        width: 100%;
        height: 87vh;
        left: 0;
        top: 0;
        transform: none;
    }*/
    .hero-glow {
        width: 100%;
        height: 100vh;
        left: 0;
        top: 0;
        transform: none;
    }

    .synops-ai-engine-section {
        padding: 18px 0;
    }

    .synops-ai-title {
        font-size: 35px;
    }

    .synops-ai-description {
        font-size: 15.5px;
        margin-bottom: 46px;
    }

    .synops-dashboard-wrapper {
        padding: 12px;
    }

    .synops-dashboard-title {
        font-size: 13px;
    }

    .synops-dashboard-subtitle {
        font-size: 9px;
    }

    .synops-ai-stat-card {
        padding: 10px 12px;
        min-height: 68px;
    }

    .stat-label {
        font-size: 8px;
    }

    .synops-ai-stat-card h4 {
        font-size: 16px;
    }

    /* Chart */
    .synops-chart-svg {
        height: 290px;
    }

    .synops-chart-svg svg {
        height: 334px;
    }

    .synops-chart-legend {
        font-size: 8.5px;
        gap: 14px;
    }

    /* Feature Slider */
    .synops-feature-card {
        width: 40%;
    }

    .synops-feature-icon-img {
        width: 26px;
        height: 26px;
    }

    .synops-feature-content h6 {
        font-size: 11px;
    }

    .synops-feature-content p {
        font-size: 9px;
    }

    /* Recommendation Cards */
    .synops-recommend-card {
        padding: 12px 14px;
    }

    .recommend-top h5 {
        font-size: 11px;
    }

    .recommend-price {
        font-size: 16px;
    }

    .recommend-btn {
        height: 26px;
        font-size: 7.5px;
    }

    .synops-total-saving-card h2 {
        font-size: 18px;
    }

    .saving-title {
        font-size: 7.5px;
    }

    .finops-platform-section {
        padding: 60px 0;
    }

    /*    .finops-platform-section .synops-ai-title {
        font-size: 32px;
        margin-bottom: 10px;
    }
    .finops-platform-section .synops-ai-description {
        font-size: 15px;
        margin-bottom: 42px;
    }*/
    .finops-platform-section .cloud-problem-badge {
        padding: 8px 22px;
        margin-bottom: 24px;
    }

    .finops-platform-section .badge-text {
        font-size: 10.5px;
    }

    .finops-platform-dashboard {
        padding: 18px;
        border-radius: 18px;
    }

    .finops-platform-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 11px;
        margin-bottom: 19px;
    }

    .finops-platform-tab {
        padding: 8px 14px;
        font-size: 11.5px;
        border-radius: 9px;
    }

    /* Chart card */
    .finops-chart-card {
        padding: 16px;
        border-radius: 16px;
        height: 66%;
    }

    .finops-chart-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 19px;
    }

    .finops-chart-header h4 {
        font-size: 12px;
        margin-bottom: 5px;
    }

    .finops-chart-header h3 {
        font-size: 26px;
    }

    .finops-growth-badge {
        font-size: 10.5px;
        padding: 8px 12px;
        border-radius: 19px;
    }

    .finops-chart-body {
        display: flex;
        gap: 13px;
    }

    .finops-y-axis {
        display: flex;
        width: 40px;
        height: 230px;
        font-size: 10.5px;
        color: #6f7580;
    }

    .finops-graph-area {
        flex: 1;
    }

    .finops-graph-area svg {
        width: 100%;
        height: 230px;
        display: block;
    }

    .finops-x-axis {
        margin-left: 40px;
        margin-top: 7px;
        font-size: 10.5px;
        color: #6f7580;
    }

    /* Resource card */
    .finops-resource-card {
        padding: 16px;
        border-radius: 16px;
        height: 100%;
    }

    .finops-resource-title {
        font-size: 14.5px;
        margin-bottom: 17px;
    }

    .finops-resource-item {
        padding: 11px 12px;
        border-radius: 11px;
        margin-bottom: 11px;
    }

    .finops-resource-header {
        margin-bottom: 9px;
    }

    .finops-resource-header span {
        font-size: 11px;
    }

    .finops-resource-header strong {
        font-size: 13px;
    }

    .finops-progress {
        height: 4px;
        margin-bottom: 7px;
    }

    .finops-resource-item small {
        font-size: 10px;
    }

    /* Bottom stats */
    .finops-bottom-stats {
        margin-top: 22px;
        padding-top: 21px;
    }

    .finops-stat-box h3 {
        font-size: 32px;
        margin-bottom: 5px;
    }

    .finops-stat-box p {
        font-size: 11.5px;
    }

    .finops-capabilities-section {
        padding: 80px 0;
    }

    .finops-capabilities-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .finops-feature-large {
        grid-column: span 2;
        min-height: 170px;
    }

    .finops-feature-card {
        padding: 22px;
        min-height: 145px;
        border-radius: 17px;
    }

    /*        .finops-feature-icon {
            width: 42px;
            height: 42px;
            margin-bottom: 20px;
        }

*//*        .finops-feature-icon img {
            width: 21px;
            height: 21px;
        }*//*

        .finops-feature-card h4 {
            font-size: 16.5px;
            margin-bottom: 13px;
        }

        .finops-feature-card p {
            font-size: 13px;
            line-height: 1.73;
        }*/
    .finops-feature-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 20px;
    }

    .finops-feature-icon img {
        width: 40px;
        height: 40px;
    }

    .finops-feature-card h4 {
        font-size: 16.5px;
        margin-bottom: 13px;
    }

    .finops-feature-card p {
        font-size: 13px;
        line-height: 1.73;
    }

    .kl-journey-section {
        padding: 100px 0;
    }

    .kl-journey-card {
        height: 575px;
        padding: 42px 48px;
        border-radius: 30px;
    }

    /*    . kl-card-heading { font-size: 31px; margin-bottom: 12px; }
    .kl-card-para  { font-size: 17px; max-width: 440px; }*/
    /*    .kl-cloud-svg {
        width: 60%;
        max-width: 640px;
        bottom: -32px;
        left: -20px;
    }*/
    /*    .kl-floating-svg { width: 455px; right: -58px; top: 20px; }*/
    .kl-stats {
        width: 182px;
        gap: 13px;
    }

    .kl-right-content {
        gap: 16px;
    }

    .journey-card {
        padding: 6px 8px;
        border-radius: 10px;
    }

    .journey-card small {
        font-size: 6px;
    }

    .journey-card h4 {
        font-size: 12px;
    }

    .journey-card p {
        font-size: 8px;
    }

    .stat-sub-text {
        font-size: 9px;
    }

    .integration-card {
        width: 264px;
        max-height: 295px;
        border-radius: 18px 18px 0 0;
    }

    .integration-header {
        padding: 9px 18px;
    }

    .integration-header span:first-child,
    .integration-header span:last-child {
        font-size: 8.5px;
    }

    integration-card ul li {
        padding: 6px 16px;
    }

    .integration-card li span:first-child {
        font-size: 10.5px;
    }

    .integration-card li span:last-child {
        font-size: 8px;
    }

    .cloud-provider {
        width: 58px;
        height: 58px;
    }


    .synops-results-section {
        padding: 80px 0;
    }

    .synops-result-card {
        padding: 34px 24px;
        border-radius: 20px;
    }

    .synops-result-card h3 {
        font-size: 52px;
        margin-bottom: 22px;
    }

    .synops-result-card h5 {
        font-size: 17px;
        margin-bottom: 9px;
    }

    .synops-result-card p {
        font-size: 12.5px;
    }

    .synops-ai-icon {
        width: 17px;
        height: 17px;
    }

    .synops-testimonials {
        padding: 90px 0;
    }

    .synops-ai-title {
        font-size: 43px;
        max-width: 627px;
    }

    .synops-ai-description {
        font-size: 16px;
        margin-bottom: 52px;
    }

    .testimonial-card {
        padding: 24px;
        border-radius: 19px;
    }

    .testimonial-text {
        font-size: 14.5px;
        line-height: 1.6;
        min-height: 106px;
    }

    .testimonial-user img {
        width: 48px;
        height: 48px;
    }

    .testimonial-user h5 {
        font-size: 13.5px;
    }

    .testimonial-user span {
        font-size: 10.5px;
    }

    .testimonial-stars i {
        font-size: 12px;
    }

    .synops-cloud-section {
        padding: 90px 0;
    }

    .synops-cloud-svg {
        max-width: 640px;
    }

    .synops-cta-section {
        padding: 100px 0;
    }

    .synops-btn-primary,
    .synops-btn-secondary {
        padding: 15px 28px;
        font-size: 13px;
        border-radius: 13px;
    }

    .synops-tags span {
        font-size: 12.5px;
        padding: 9px 15px;
    }

    .synops-tags {
        gap: 11px;
        margin-top: 48px;
    }

    .synops-strip-row .strip-logo img:first-child {
        width: 110px !important;
        height: auto !important;
    }

    .synops-strip-row .strip-logo img:last-child {
        width: 135px !important;
        height: auto !important;
    }

    .synops-strip-row .strip-logo {
        gap: 16px !important;
    }

    .synops-strip-row .strip-text h4 {
        font-size: 23px !important;
    }

    .synops-strip-row > div:first-child {
        flex: 0 0 30% !important;
        width: 30% !important;
        max-width: 30% !important;
    }

    .synops-strip-row .strip-logo {
        gap: clamp(7px, 0.7vw, 14px) !important;
    }

    .synops-strip-row .strip-text h4 {
        /*   font-size: 14px !important;*/
        white-space: nowrap !important;
    }

    .synops-strip-row > .strip-contact-column {
        transform: translate(69px, 21px) !important;
    }

    .strip-contact {
        gap: clamp(6px, 0.6vw, 10px) !important;
    }

    .strip-contact-arrow {
        width: clamp(30px, 3vw, 40px) !important;
        height: clamp(30px, 3vw, 40px) !important;
    }

    .strip-contact-text {
        font-size: 10px !important;
        width: 18px !important;
        gap: 12px !important;
    }
}

@media (min-width: 1300px) and (max-width: 1440px) {

    .finops-capabilities-section {
        padding: 72px 0;
    }

    .finops-capabilities-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

    .finops-feature-large {
        grid-column: span 2;
        min-height: 165px;
    }

    .finops-feature-card {
        padding: 20px;
        min-height: 140px;
        border-radius: 16px;
    }

    .finops-feature-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 18px;
    }

    .finops-feature-icon img {
        width: 20px;
        height: 20px;
    }

    .finops-feature-card h4 {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .finops-feature-card p {
        font-size: 12.5px;
        line-height: 1.72;
    }

    .synops-body-section .synops-hero-section .section-container {
        max-width: 1200px;
        width: 100%;
        padding-left: 32px;
        padding-right: 32px;
    }

    .trusted-logo-row {
        gap: 28px;
    }

    .trusted-logo-item img {
        height: 34px;
    }

    .hero__content {
        max-width: 800px;
    }

    .cloud-problem-section {
        padding: 72px 0;
    }

    .badge-text {
        font-size: 14px;
    }

    .cloud-card {
        padding: 22px 18px;
    }

    .cloud-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 18px;
    }

    .cloud-card h4 {
        font-size: 14px;
        margin-bottom: 14px;
    }

    .cloud-card p {
        font-size: 12.5px;
        line-height: 1.72;
    }

    .trusted-companies-section {
        padding: 88px 0 72px;
    }

    .trusted-companies-title {
        font-size: 16px;
        letter-spacing: 1.8px;
        margin-bottom: 46px;
    }

    .trusted-logo-item img {
        height: 34px;
    }

    .synops-body-section .synops-hero-section {
        padding: 50px 20px 10px;
    }

    .hero__logo {
        height: 44px;
        margin-bottom: 42px;
    }

    .hero__badge {
        font-size: 13px;
        padding: 9px 19px;
        gap: 8px;
        margin-bottom: 38px;
    }

    .hero__badge-icon {
        width: 15px;
        height: 15px;
    }

    .hero__heading {
        font-size: 43px;
        letter-spacing: -1.1px;
        margin-bottom: 24px;
        line-height: 1.12;
    }

    .hero__desc {
        font-size: 15.5px;
        line-height: 1.74;
        margin-bottom: 60px;
        max-width: 733px;
    }

    /*    .synops-dashboard           { grid-template-columns: 180px 1fr; padding: 18px; }
    .synops-sidebar             { height: 520px; }
    .synops-stats-grid          { gap: 12px; }
    .synops-stat-card           { min-height: 100px; }
    .synops-stat-card h3        { font-size: 14px; }
    .synops-chart-area svg      { height: 135px; }
    .synops-donut-svg,
    .synops-donut-svg svg       { width: 110px; height: 110px; }*/
    .synops-dashboard {
        grid-template-columns: 180px 1fr;
        padding: 18px;
        border-radius: 22px;
        gap: 0;
    }

    /* ── SIDEBAR ── */
    .synops-sidebar {
        height: 520px;
        padding: 16px;
        border-radius: 20px;
        overflow: hidden;
    }

    .synops-logo-box {
        margin-bottom: 10px;
    }

    .synops-logo-box img {
        height: 22px;
    }

    .synops-company-box {
        height: 28px;
        font-size: 9px;
        padding: 0 12px;
        border-radius: 10px;
        margin-bottom: 10px;
        gap: 8px;
    }

    .synops-company-icon,
    .synops-chevron-icon {
        width: 11px;
        height: 11px;
    }

    .synops-sidebar-nav {
        gap: 4px;
    }

    .synops-nav-item {
        height: 22px;
        font-size: 8px;
        gap: 8px;
        padding: 0 10px;
        border-radius: 9px;
    }

    .synops-nav-icon {
        width: 14px;
        height: 11px;
        flex-shrink: 0;
    }

    .synops-count {
        width: 16px;
        height: 16px;
        font-size: 7px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .synops-sidebar-footer {
        margin-top: 10px;
        padding-top: 10px;
    }

    .synops-notification-row {
        font-size: 9px;
        gap: 5px;
        margin-bottom: 10px;
    }

    .synops-dot {
        width: 6px;
        height: 6px;
    }

    .synops-user {
        gap: 8px;
    }

    .synops-user-avatar {
        width: 24px;
        height: 24px;
        font-size: 8px;
        flex-shrink: 0;
    }

    .synops-user h6 {
        font-size: 9px;
        margin: 0;
    }

    .synops-user small {
        font-size: 8px;
    }

    /* ── MAIN ── */
    .synops-main {
        padding: 16px 15px;
        min-height: auto;
        overflow: hidden;
    }

    /* ── TOPBAR ── */
    .synops-topbar {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 15px;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .synops-search-box {
        width: 260px;
        min-width: 0;
        flex-shrink: 1;
        height: 32px;
        font-size: 9px;
        padding: 0 13px;
        gap: 8px;
        border-radius: 10px;
    }

    .synops-search-icon {
        width: 11px;
        height: 11px;
        flex-shrink: 0;
    }

    .synops-pill {
        height: 32px;
        padding: 0 13px;
        font-size: 9px;
        border-radius: 10px;
        gap: 7px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .synops-cloud-icon,
    .synops-calendar-icon {
        width: 11px;
        height: 11px;
    }

    .synops-arrow-down-icon {
        width: 18px;
        height: 18px;
    }

    .synops-flex-space {
        flex: 1;
    }

    .synops-icon-circle {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
    }

    .synops-notification-icon {
        width: 28px;
        height: 28px;
    }

    .synops-ai-btn {
        height: 32px;
        padding: 0 16px;
        font-size: 9.5px;
        border-radius: 16px;
        gap: 8px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .synops-ai-icon {
        width: 11px;
        height: 11px;
    }

    .synops-profile-box {
        font-size: 9px;
        gap: 7px;
        flex-shrink: 0;
    }

    .synops-profile-circle {
        width: 24px;
        height: 24px;
        font-size: 8.5px;
    }

    /* ── DASHBOARD HEADER ── */
    .synops-dashboard-head {
        margin-bottom: 8px;
    }

    .synops-dashboard-header {
        margin-bottom: 12px;
        align-items: center;
    }

    .synops-dashboard-header h2 {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .synops-dashboard-header p {
        font-size: 10px;
        margin: 0;
    }

    .synops-refresh-btn {
        height: 28px;
        padding: 0 14px;
        font-size: 10px;
        border-radius: 14px;
        gap: 6px;
        flex-shrink: 0;
    }

    .synops-refresh-icon {
        width: 11px;
        height: 11px;
    }

    /* ── STAT CARDS — 4 columns in a row ── */
    .synops-stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin-bottom: 16px;
    }

    .synops-stat-card {
        min-height: 0;
        height: 108px;
        padding: 12px 12px 0 12px;
        border-radius: 14px;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
    }

    .synops-stat-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 6px;
        gap: 2px;
        flex-wrap: nowrap;
    }

    .synops-stat-title {
        font-size: 9px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 55%;
        color: rgba(100, 116, 139, 1);
    }

    .synops-stat-badge {
        font-size: 8px;
        padding: 2px 6px;
        gap: 3px;
        border-radius: 20px;
        flex-shrink: 0;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
    }

    .synops-badge-icon {
        width: 8px;
        height: 8px;
    }

    .synops-stat-card h3 {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 3px;
        line-height: 1;
        white-space: nowrap;
        color: rgba(226, 232, 245, 1);
    }

    .synops-stat-card small {
        font-size: 8px;
        display: block;
        line-height: 1.2;
        color: rgba(100, 116, 139, 1);
    }

    .synops-mini-chart,
    .synops-main-chart {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 34px;
    }

    .synops-mini-chart svg,
    .synops-main-chart svg {
        width: 100%;
        height: 34px;
        display: block;
    }

    /* ── BOTTOM GRID — chart left, donut right ── */
    .synops-bottom-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 12px;
    }

    /* Chart card */
    .synops-chart-card {
        padding: 14px 12px;
        max-height: none;
        border-radius: 14px;
        overflow: hidden;
    }

    .synops-card-header {
        margin-bottom: 10px;
    }

    .synops-card-header h5 {
        font-size: 11px;
        margin-bottom: 0;
    }

    .synops-card-header small {
        font-size: 9px;
    }

    .synops-chart-filter {
        height: auto;
        gap: 2px;
    }

    .synops-chart-filter span {
        font-size: 9px;
        padding: 5px 7px 0;
    }

    .synops-chart-wrapper {
        gap: 0;
    }

    .synops-chart-area {
        width: 100%;
        overflow: hidden;
    }

    .synops-chart-area svg {
        width: 100%;
        height: 148px;
    }

    .synops-chart-legend {
        font-size: 9px;
        gap: 14px;
        padding: 6px 9px;
        margin-top: 10px;
    }

    .legend-icon {
        width: 13px;
        height: 11px;
    }

    /* Donut card */
    .synops-donut-card {
        padding: 14px 11px;
        max-height: none;
        border-radius: 14px;
        overflow: hidden;
    }

    .synops-donut-wrapper {
        padding: 6px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .synops-donut-svg {
        width: 118px;
        height: 118px;
        flex-shrink: 0;
    }

    .synops-donut-svg svg {
        width: 118px;
        height: 118px;
    }

    .synops-legend {
        display: flex;
        flex-direction: column;
        gap: 5px;
        font-size: 9px;
        opacity: 1;
        width: 100%;
        margin-top: 10px;
    }

    .synops-legend div {
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .synops-legend .dot {
        width: 8px;
        height: 8px;
        flex-shrink: 0;
        border-radius: 50%;
    }

    .synops-legend .pct {
        margin-left: auto;
        font-size: 9px;
        color: #8096b7;
        font-weight: 600;
    }

    /*    .hero-glow {
        width: 100%;
        height: 91vh;
        left: 0;
        top: 0;
        transform: none;
    }*/
    .hero-glow {
        width: 100%;
        height: 100vh;
        left: 0;
        top: 0;
        transform: none;
    }

    .synops-ai-engine-section {
        padding: 16px 0;
    }

    .synops-ai-title {
        font-size: 34px;
    }

    .synops-ai-description {
        font-size: 15.5px;
        margin-bottom: 44px;
    }

    .synops-dashboard-wrapper {
        padding: 12px;
    }

    .synops-dashboard-title {
        font-size: 13px;
    }

    .synops-dashboard-subtitle {
        font-size: 9px;
    }

    .synops-ai-stat-card {
        padding: 10px 12px;
        min-height: 66px;
    }

    .stat-label {
        font-size: 7.5px;
    }

    .synops-ai-stat-card h4 {
        font-size: 15px;
    }

    /* Chart */
    .synops-chart-svg {
        height: 270px;
    }

    .synops-chart-svg svg {
        height: 309px;
    }

    .synops-chart-legend {
        font-size: 8.5px;
        gap: 14px;
    }

    /* Feature Slider */
    .synops-feature-card {
        width: 42%;
    }

    /* Recommendation Cards */
    .synops-recommend-card {
        padding: 11px 13px;
    }

    .recommend-top h5 {
        font-size: 10.5px;
    }

    .recommend-price {
        font-size: 15px;
    }

    .recommend-btn {
        height: 25px;
        font-size: 7.5px;
    }

    .synops-total-saving-card h2 {
        font-size: 17px;
    }

    .finops-platform-section {
        padding: 60px 0;
    }

    .finops-platform-section .cloud-problem-badge {
        padding: 8px 22px;
        margin-bottom: 22px;
    }

    .finops-platform-section .badge-text {
        font-size: 10.5px;
    }

    .finops-platform-dashboard {
        padding: 18px;
        border-radius: 17px;
    }

    .finops-platform-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 18px;
    }

    .finops-platform-tab {
        padding: 8px 13px;
        font-size: 11.5px;
        border-radius: 8px;
    }

    /* Chart card */
    .finops-chart-card {
        padding: 15px;
        border-radius: 15px;
        height: 66%;
    }

    .finops-chart-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 18px;
    }

    .finops-chart-header h4 {
        font-size: 12px;
        margin-bottom: 5px;
    }

    .finops-chart-header h3 {
        font-size: 25px;
    }

    .finops-growth-badge {
        font-size: 10.5px;
        padding: 8px 12px;
        border-radius: 18px;
    }

    .finops-chart-body {
        display: flex;
        gap: 12px;
    }

    .finops-y-axis {
        display: flex;
        width: 38px;
        height: 200px;
        font-size: 10px;
        color: #6f7580;
    }

    .finops-graph-area {
        flex: 1;
    }

    .finops-graph-area svg {
        width: 100%;
        height: 200px;
        display: block;
    }

    .finops-x-axis {
        margin-left: 38px;
        margin-top: 7px;
        font-size: 10px;
        color: #6f7580;
    }

    /* Resource card */
    .finops-resource-card {
        padding: 15px;
        border-radius: 15px;
        height: 100%;
    }

    .finops-resource-title {
        font-size: 14px;
        margin-bottom: 16px;
    }

    .finops-resource-item {
        padding: 11px 12px;
        border-radius: 11px;
        margin-bottom: 10px;
    }

    .finops-resource-header {
        margin-bottom: 8px;
    }

    .finops-resource-header span {
        font-size: 11px;
    }

    .finops-resource-header strong {
        font-size: 12.5px;
    }

    .finops-progress {
        height: 4px;
        margin-bottom: 7px;
    }

    .finops-resource-item small {
        font-size: 10px;
    }

    /* Bottom stats */
    .finops-bottom-stats {
        margin-top: 20px;
        padding-top: 20px;
    }

    .finops-stat-box h3 {
        font-size: 30px;
        margin-bottom: 5px;
    }

    .finops-stat-box p {
        font-size: 11.5px;
    }

    .finops-feature-icon {
        width: 38px;
        height: 38px;
        margin-bottom: 18px;
    }

    .finops-feature-icon img {
        width: 38px;
        height: 38px;
    }

    .finops-feature-card h4 {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .finops-feature-card p {
        font-size: 12.5px;
        line-height: 1.72;
    }

    .kl-journey-section {
        padding: 95px 0;
    }

    .kl-journey-card {
        height: 551px;
        padding: 36px 40px;
        border-radius: 28px;
    }

    /*    . kl-card-heading { font-size: 28px; margin-bottom: 10px; }
    .kl-card-para  { font-size: 16px; max-width: 400px; }*/
    /*    .kl-cloud-svg {
        width: 59%;
        max-width: 610px;
        bottom: -30px;
        left: -20px;
    }*/
    /*    .kl-floating-svg { width: 418px; right: -55px; top: 18px; }*/
    .kl-stats {
        width: 168px;
        gap: 12px;
    }

    .kl-right-content {
        gap: 15px;
    }

    .journey-card {
        padding: 6px 8px;
        border-radius: 10px;
    }

    .journey-card small {
        font-size: 6px;
    }

    .journey-card h4 {
        font-size: 11px;
    }

    .journey-card p {
        font-size: 8px;
    }

    .stat-sub-text {
        font-size: 8.5px;
    }

    .integration-card {
        width: 243px;
        max-height: 278px;
        border-radius: 17px 17px 0 0;
    }

    .integration-header {
        padding: 9px 17px;
    }

    .integration-header span:first-child,
    .integration-header span:last-child {
        font-size: 8px;
    }

    integration-card ul li {
        padding: 5px 15px;
    }

    .integration-card li span:first-child {
        font-size: 10px;
    }

    .integration-card li span:last-child {
        font-size: 8px;
    }

    .cloud-provider {
        width: 54px;
        height: 54px;
    }

    .synops-results-section {
        padding: 76px 0;
    }

    .synops-result-card {
        padding: 32px 22px;
        border-radius: 19px;
    }

    .synops-result-card h3 {
        font-size: 50px;
        margin-bottom: 20px;
    }

    .synops-result-card h5 {
        font-size: 16.5px;
        margin-bottom: 8px;
    }

    .synops-result-card p {
        font-size: 12px;
    }

    .synops-ai-icon {
        width: 16px;
        height: 16px;
    }

    .synops-testimonials {
        padding: 80px 0;
    }

    .synops-ai-title {
        font-size: 40px;
        max-width: 577px;
    }

    .synops-ai-description {
        font-size: 15.5px;
        margin-bottom: 48px;
    }

    .testimonial-card {
        padding: 22px;
        border-radius: 18px;
    }

    .testimonial-text {
        font-size: 14px;
        line-height: 1.58;
        min-height: 100px;
    }

    .testimonial-user img {
        width: 46px;
        height: 46px;
    }

    .testimonial-user h5 {
        font-size: 13px;
    }

    .testimonial-user span {
        font-size: 10.5px;
    }

    .testimonial-stars i {
        font-size: 12px;
    }

    .synops-cloud-section {
        padding: 80px 0;
    }

    .synops-cloud-svg {
        max-width: 600px;
    }

    .synops-cta-section {
        padding: 90px 0;
    }

    .synops-btn-primary,
    .synops-btn-secondary {
        /*        padding: 14px 28px;
        font-size: 12.5px;
        border-radius: 12px;*/
        padding: 14px 28px;
        font-size: 12.5px;
        border-radius: 12px;

        height: 47px;
        min-height: 47px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    .synops-tags span {
        font-size: 12px;
        padding: 8px 14px;
    }

    .synops-tags {
        gap: 10px;
        margin-top: 44px;
    }

    .synops-strip-row .strip-logo img:first-child {
        width: 100px !important;
        height: auto !important;
    }

    .synops-strip-row .strip-logo img:last-child {
        width: 125px !important;
        height: auto !important;
    }

    .synops-strip-row .strip-logo {
        gap: 14px !important;
    }

    .synops-strip-row .strip-text h4 {
        font-size: 21px !important;
    }

    .synops-strip-row > div:first-child {
        flex: 0 0 30% !important;
        width: 30% !important;
        max-width: 30% !important;
    }

    .synops-strip-row .strip-logo {
        gap: clamp(7px, 0.7vw, 13px) !important;
    }

    .synops-strip-row .strip-text h4 {
        /*font-size: 14px !important;*/
        white-space: nowrap !important;
    }

    .synops-strip-row > .strip-contact-column {
        transform: translate(67px, 36px) !important;
    }

    .strip-contact {
        gap: clamp(6px, 0.6vw, 10px) !important;
    }

    .strip-contact-arrow {
        width: clamp(30px, 3vw, 38px) !important;
        height: clamp(30px, 3vw, 38px) !important;
    }

    .strip-contact-text {
        font-size: 10px !important;
        width: 18px !important;
        gap: 12px !important;
    }

    .finops-platform-section .finops-chart-body {
        gap: 13px;
        height: 208px;
    }

    .finops-chart-card .finops-graph-area,
    .finops-chart-card .finops-graph-area svg {
        height: 208px;
    }
}

@media (min-width: 1199px) and (max-width: 1279px) {
    /*    .hero-glow {
        width: 100%;
        height: 91vh;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
    }*/
    .hero-glow {
        width: 115%;
        height: 116vh;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
    }

    .cloud-problem-section {
        padding: 70px 0;
    }

    .badge-text {
        font-size: 14px;
    }

    .cloud-card {
        padding: 22px 18px;
    }

    .cloud-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 18px;
    }

    .cloud-card h4 {
        font-size: 14px;
        margin-bottom: 14px;
    }

    .cloud-card p {
        font-size: 12.2px;
        line-height: 1.7;
    }

    .trusted-companies-section {
        padding: 80px 0 66px;
    }

    .trusted-companies-title {
        font-size: 15px;
        letter-spacing: 1.7px;
        margin-bottom: 44px;
    }

    .trusted-logo-item img {
        height: 32px;
    }

    .synops-body-section .synops-hero-section {
        padding: 78px 20px 10px;
    }

    .hero__logo {
        height: 40px;
        margin-bottom: 40px;
    }

    .hero__badge {
        font-size: 12px;
        padding: 9px 18px;
        gap: 8px;
        margin-bottom: 36px;
    }

    .hero__badge-icon {
        width: 14px;
        height: 14px;
    }

    .hero__heading {
        font-size: 40px;
        letter-spacing: -1px;
        margin-bottom: 22px;
        line-height: 1.12;
    }

    .hero__desc {
        font-size: 15px;
        line-height: 1.74;
        margin-bottom: 50px;
        max-width: 570px;
    }

    /* .synops-dashboard           { grid-template-columns: 170px 1fr; padding: 16px; }
    .synops-sidebar             { height: 505px; }
    .synops-stats-grid          { gap: 11px; }
    .synops-stat-card           { min-height: 90px; }
    .synops-stat-card h3        { font-size: 13px; }
    .synops-mini-chart          { height: 34px; }
    .synops-chart-area svg      { height: 125px; }
    .synops-donut-svg,
    .synops-donut-svg svg       { width: 105px; height: 105px; }*/
    /* ── DASHBOARD WRAPPER ── */
    .synops-dashboard {
        grid-template-columns: 172px 1fr;
        padding: 15px;
        border-radius: 20px;
        gap: 0;
        height: 110vh;
    }

    /* ── SIDEBAR ── */
    .synops-sidebar {
        height: auto;
        padding: 15px 13px;
        border-radius: 17px;
        overflow: hidden;
    }

    .synops-logo-box {
        margin-bottom: 9px;
    }

    .synops-logo-box img {
        height: 21px;
    }

    .synops-company-box {
        height: 27px;
        font-size: 8.5px;
        padding: 0 11px;
        border-radius: 9px;
        margin-bottom: 9px;
        gap: 6px;
    }

    .synops-company-icon,
    .synops-chevron-icon {
        width: 10px;
        height: 10px;
    }

    .synops-sidebar-nav {
        gap: 3px;
    }

    .synops-nav-item {
        height: 22px;
        font-size: 8px;
        gap: 7px;
        padding: 0 10px;
        border-radius: 8px;
    }

    .synops-nav-icon {
        width: 13px;
        height: 11px;
        flex-shrink: 0;
    }

    .synops-count {
        width: 15px;
        height: 15px;
        font-size: 6.5px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .synops-sidebar-footer {
        margin-top: 9px;
        padding-top: 9px;
    }

    .synops-notification-row {
        font-size: 8px;
        gap: 5px;
        margin-bottom: 9px;
    }

    .synops-dot {
        width: 5px;
        height: 5px;
    }

    .synops-user {
        gap: 7px;
    }

    .synops-user-avatar {
        width: 22px;
        height: 22px;
        font-size: 8px;
        flex-shrink: 0;
    }

    .synops-user h6 {
        font-size: 8px;
        margin: 0;
    }

    .synops-user small {
        font-size: 7px;
    }

    /* ── MAIN ── */
    .synops-main {
        padding: 15px 14px;
        min-height: auto;
        overflow: hidden;
    }

    /* ── TOPBAR ── */
    .synops-topbar {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .synops-search-box {
        width: 230px;
        min-width: 0;
        flex-shrink: 1;
        height: 31px;
        font-size: 8.5px;
        padding: 0 12px;
        gap: 7px;
        border-radius: 9px;
    }

    .synops-search-icon {
        width: 11px;
        height: 11px;
        flex-shrink: 0;
    }

    .synops-pill {
        height: 31px;
        padding: 0 12px;
        font-size: 8.5px;
        border-radius: 9px;
        gap: 6px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .synops-cloud-icon,
    .synops-calendar-icon {
        width: 11px;
        height: 11px;
    }

    .synops-arrow-down-icon {
        width: 15px;
        height: 15px;
    }

    .synops-flex-space {
        flex: 1;
    }

    .synops-icon-circle {
        width: 27px;
        height: 27px;
        flex-shrink: 0;
    }

    .synops-notification-icon {
        width: 27px;
        height: 27px;
    }

    .synops-ai-btn {
        height: 31px;
        padding: 0 15px;
        font-size: 9px;
        border-radius: 15px;
        gap: 7px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .synops-ai-icon {
        width: 10px;
        height: 10px;
    }

    .synops-profile-box {
        font-size: 8.5px;
        gap: 6px;
        flex-shrink: 0;
    }

    .synops-profile-circle {
        width: 23px;
        height: 23px;
        font-size: 8px;
    }

    /* ── DASHBOARD HEADER ── */
    .synops-dashboard-head {
        margin-bottom: 8px;
    }

    .synops-dashboard-header {
        margin-bottom: 12px;
        align-items: center;
    }

    .synops-dashboard-header h2 {
        font-size: 13px;
        margin-bottom: 3px;
    }

    .synops-dashboard-header p {
        font-size: 9px;
        margin: 0;
    }

    .synops-refresh-btn {
        height: 27px;
        padding: 0 13px;
        font-size: 9px;
        border-radius: 13px;
        gap: 6px;
        flex-shrink: 0;
    }

    .synops-refresh-icon {
        width: 11px;
        height: 11px;
    }

    /* ── STAT CARDS — 4 columns in a row ── */
    .synops-stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin-bottom: 15px;
    }

    .synops-stat-card {
        min-height: 0;
        height: 100px;
        padding: 11px 11px 0 11px;
        border-radius: 13px;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
    }

    .synops-stat-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 5px;
        gap: 2px;
        flex-wrap: nowrap;
    }

    .synops-stat-title {
        font-size: 8.5px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 55%;
        color: rgba(100, 116, 139, 1);
    }

    .synops-stat-badge {
        font-size: 7.5px;
        padding: 2px 5px;
        gap: 2px;
        border-radius: 20px;
        flex-shrink: 0;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
    }

    .synops-badge-icon {
        width: 8px;
        height: 8px;
    }

    .synops-stat-card h3 {
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 3px;
        line-height: 1;
        white-space: nowrap;
        color: rgba(226, 232, 245, 1);
    }

    .synops-stat-card small {
        font-size: 7.5px;
        display: block;
        line-height: 1.2;
        color: rgba(100, 116, 139, 1);
    }

    /*    .synops-mini-chart,
    .synops-main-chart {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 31px;
    }*/
    .synops-mini-chart, .synops-main-chart {
        position: absolute;
        left: 8px;
        bottom: 9px;
        width: 90%;
        height: 31px;
    }

    .synops-mini-chart svg,
    .synops-main-chart svg {
        width: 100%;
        height: 31px;
        display: block;
    }

    /* ── BOTTOM GRID — chart left, donut right ── */
    .synops-bottom-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 12px;
    }

    /* Chart card */
    .synops-chart-card {
        padding: 13px 11px;
        max-height: none;
        border-radius: 13px;
        overflow: hidden;
        height: 57vh;
    }

    .synops-card-header {
        margin-bottom: 10px;
    }

    .synops-card-header h5 {
        font-size: 11px;
        margin-bottom: 0;
    }

    .synops-card-header small {
        font-size: 8.5px;
    }

    .synops-chart-filter {
        height: auto;
        gap: 2px;
    }

    .synops-chart-filter span {
        font-size: 8.5px;
        padding: 4px 6px 0;
    }

    .synops-chart-wrapper {
        gap: 0;
    }

    .synops-chart-area {
        width: 100%;
        overflow: hidden;
    }

    .synops-chart-area svg {
        width: 100%;
        height: 140px;
    }

    .synops-chart-legend {
        font-size: 8.5px;
        gap: 12px;
        padding: 5px 8px;
        margin-top: 28px;
    }

    .legend-icon {
        width: 12px;
        height: 10px;
    }

    /* Donut card */
    .synops-donut-card {
        padding: 13px 19px;
        max-height: none;
        border-radius: 13px;
        overflow: hidden;
        height: 57vh;
    }

    .synops-donut-wrapper {
        padding: 5px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .synops-donut-svg {
        width: 112px;
        height: 112px;
        flex-shrink: 0;
    }

    .synops-donut-svg svg {
        width: 112px;
        height: 112px;
    }

    .synops-legend {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 8.5px;
        opacity: 1;
        width: 100%;
        margin-top: 9px;
    }

    .synops-legend div {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .synops-legend .dot {
        width: 7px;
        height: 7px;
        flex-shrink: 0;
        border-radius: 50%;
    }

    .synops-legend .pct {
        margin-left: auto;
        font-size: 8.5px;
        color: #8096b7;
        font-weight: 600;
    }

    .synops-ai-engine-section {
        padding: 60px 0;
    }

    .synops-ai-title {
        font-size: 32px;
    }

    .synops-ai-description {
        font-size: 15px;
        margin-bottom: 40px;
    }

    .synops-dashboard-wrapper {
        padding: 11px;
    }

    .synops-dashboard-title {
        font-size: 12.5px;
    }

    .synops-dashboard-subtitle {
        font-size: 8.5px;
    }

    .synops-ai-stat-card {
        padding: 9px 11px;
        min-height: 64px;
    }

    .stat-label {
        font-size: 7.5px;
    }

    .synops-ai-stat-card h4 {
        font-size: 14px;
    }

    /* Chart */
    .synops-chart-svg {
        height: 250px;
    }

    /*    .synops-chart-svg svg {
        height: 250px;
    }*/
    .synops-chart-svg svg {
        height: 293px;
    }

    /* Feature Slider */
    .synops-feature-card {
        width: 44%;
    }

    /* Recommendation Cards */
    .synops-recommend-card {
        padding: 10px 12px;
    }

    .recommend-top h5 {
        font-size: 10.5px;
    }

    .recommend-price {
        font-size: 15px;
    }

    .recommend-btn {
        height: 24px;
        font-size: 7px;
    }

    .synops-total-saving-card h2 {
        font-size: 17px;
    }

    .finops-platform-section {
        padding: 48px 0;
    }

    /*     .finops-platform-section .synops-ai-title  { font-size: 24px; margin-bottom: 8px; }
     .finops-platform-section .synops-ai-description { font-size: 13px; margin-bottom: 24px; }*/
    .finops-platform-section .cloud-problem-badge {
        padding: 6px 18px;
        margin-bottom: 18px;
    }

    .finops-platform-section .badge-text {
        font-size: 10px;
    }

    .finops-platform-dashboard {
        padding: 12px;
        border-radius: 14px;
    }

    .finops-platform-tabs {
        gap: 5px;
        margin-bottom: 12px;
    }

    .finops-platform-tab {
        padding: 6px 10px;
        font-size: 9.5px;
        border-radius: 7px;
    }

    /* Chart card */
    .finops-chart-card {
        padding: 11px;
        border-radius: 13px;
    }

    .finops-chart-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 10px;
    }

    .finops-chart-header h4 {
        font-size: 10px;
        margin-bottom: 3px;
    }

    .finops-chart-header h3 {
        font-size: 19px;
        line-height: 1;
    }

    .finops-growth-badge {
        font-size: 8.5px;
        padding: 4px 9px;
        border-radius: 12px;
        white-space: nowrap;
    }

    .finops-chart-body {
        display: flex;
        gap: 8px;
    }

    .finops-y-axis {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 120px;
        font-size: 8px;
        color: #6f7580;
        flex-shrink: 0;
    }

    .finops-graph-area {
        flex: 1;
        min-width: 0;
    }

    .finops-graph-area svg {
        width: 100% !important;
        height: 120px !important;
        display: block;
    }

    .finops-x-axis {
        margin-left: 30px;
        margin-top: 5px;
        font-size: 8px;
        color: #6f7580;
    }

    /* Resource card */
    .finops-resource-card {
        padding: 11px;
        border-radius: 13px;
    }

    .finops-resource-title {
        font-size: 10px;
        margin-bottom: 9px;
    }

    .finops-resource-item {
        padding: 7px 9px;
        border-radius: 8px;
        margin-bottom: 6px;
    }

    .finops-resource-header {
        margin-bottom: 5px;
    }

    .finops-resource-header span {
        font-size: 9px;
    }

    .finops-resource-header strong {
        font-size: 9.5px;
    }

    .finops-progress {
        height: 3px;
        margin-bottom: 4px;
    }

    .finops-resource-item small {
        font-size: 8.5px;
    }

    /* Bottom stats */
    .finops-bottom-stats {
        margin-top: 12px;
        padding-top: 12px;
    }

    .finops-stat-box h3 {
        font-size: 20px;
        margin-bottom: 3px;
    }

    .finops-stat-box p {
        font-size: 9px;
    }

    .finops-feature-icon {
        width: 36px;
        height: 36px;
        margin-bottom: 17px;
    }

    .finops-feature-icon img {
        width: 36px;
        height: 36px;
    }

    .finops-feature-card h4 {
        font-size: 15px;
        margin-bottom: 12px;
    }

    .finops-feature-card p {
        font-size: 12px;
        line-height: 1.7;
    }

    .kl-journey-section {
        padding: 90px 0;
    }

    .kl-journey-card {
        height: 530px;
        padding: 34px 38px;
        border-radius: 26px;
    }

    /*    . kl-card-heading { font-size: 26px; margin-bottom: 10px; }
    .kl-card-para  { font-size: 15px; max-width: 370px; }*/
    /*    .kl-cloud-svg {
        width: 58%;
        max-width: 560px;
        bottom: -28px;
        left: -18px;
    }*/
    /*    .kl-floating-svg { width: 396px; right: -50px; top: 16px; }*/
    .kl-stats {
        width: 158px;
        gap: 11px;
    }

    .kl-right-content {
        gap: 14px;
    }

    .journey-card {
        padding: 6px 7px;
        border-radius: 9px;
    }

    .journey-card small {
        font-size: 5.8px;
    }

    .journey-card h4 {
        font-size: 10.5px;
    }

    .journey-card p {
        font-size: 7.8px;
    }

    .stat-sub-text {
        font-size: 8.5px;
    }

    .integration-card {
        width: 228px;
        max-height: 265px;
        border-radius: 16px 16px 0 0;
    }

    .integration-header {
        padding: 8px 16px;
    }

    .integration-header span:first-child,
    .integration-header span:last-child {
        font-size: 7.5px;
    }

    integration-card ul li {
        padding: 5px 14px;
    }

    .integration-card li span:first-child {
        font-size: 9.5px;
    }

    .integration-card li span:last-child {
        font-size: 7.5px;
    }

    .cloud-provider {
        width: 50px;
        height: 50px;
    }

    .synops-results-section {
        padding: 70px 0;
    }

    .synops-result-card {
        padding: 28px 18px;
        border-radius: 18px;
    }

    /*   .synops-result-card h3 { font-size: 46px; margin-bottom: 18px; }*/
    .synops-result-card h3 {
        font-size: 46px;
        margin-bottom: 20px;
    }

    .synops-result-card h5 {
        font-size: 15.5px;
        margin-bottom: 7px;
    }

    .synops-result-card p {
        font-size: 11.5px;
    }

    .synops-ai-icon {
        width: 16px;
        height: 16px;
    }

    .synops-testimonials {
        padding: 76px 0;
    }

    .synops-ai-title {
        font-size: 38px;
    }

    .synops-ai-description {
        font-size: 15px;
        margin-bottom: 44px;
    }

    .testimonial-card {
        padding: 20px;
        border-radius: 17px;
    }

    .testimonial-text {
        font-size: 13.5px;
        line-height: 1.55;
        min-height: 96px;
    }

    .testimonial-user img {
        width: 44px;
        height: 44px;
    }

    .testimonial-user h5 {
        font-size: 13px;
    }

    .testimonial-user span {
        font-size: 10px;
    }

    .testimonial-stars i {
        font-size: 11px;
    }

    .synops-cloud-section {
        padding: 76px 0;
    }

    .synops-cloud-svg {
        max-width: 560px;
    }

    .synops-cta-section {
        padding: 84px 0;
    }

    .synops-btn-primary,
    .synops-btn-secondary {
        padding: 13px 26px;
        font-size: 12px;
        border-radius: 12px;
    }

    .synops-tags span {
        font-size: 11.5px;
        padding: 8px 13px;
    }

    .synops-tags {
        gap: 10px;
        margin-top: 40px;
    }

    .synops-strip-row .strip-logo img:first-child {
        width: 90px !important;
        height: auto !important;
    }

    .synops-strip-row .strip-logo img:last-child {
        width: 115px !important;
        height: auto !important;
    }

    .synops-strip-row .strip-logo {
        gap: 12px !important;
    }

    .synops-strip-row .strip-text h4 {
        font-size: 20px !important;
    }

    .synops-strip-row > div:first-child {
        flex: 0 0 30% !important;
        width: 30% !important;
        max-width: 30% !important;
    }

    .synops-strip-row .strip-logo {
        gap: clamp(6px, 0.68vw, 13px) !important;
    }

    .synops-strip-row .strip-text h4 {
        /* font-size: 13px !important;*/
        white-space: nowrap !important;
    }

    .synops-strip-row > .strip-contact-column {
        transform: translate(65px, 36px) !important;
    }

    .strip-contact {
        gap: clamp(6px, 0.6vw, 10px) !important;
    }

    .strip-contact-arrow {
        width: clamp(28px, 3vw, 37px) !important;
        height: clamp(28px, 3vw, 37px) !important;
    }

    .strip-contact-text {
        font-size: 10px !important;
        width: 18px !important;
        gap: 11px !important;
    }

    .finops-platform-section .finops-chart-body {
        gap: 12px;
        height: 196px;
    }

    .finops-chart-card .finops-graph-area,
    .finops-chart-card .finops-graph-area svg {
        height: 196px;
    }
}

@media (min-width: 1024px) and (max-width: 1198.5px) {
    /*    .hero-glow {
        width: 79%;
        height: auto;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
    }*/
    /*    .hero-glow {
        width: 93%;
        height: 454px;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
    }*/
    .hero-glow {
        width: 150%;
        height: 526px;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
    }

    .trusted-logo-row {
        gap: 24px;
    }

    .trusted-logo-item img {
        height: 30px;
    }

    .trusted-companies-title {
        font-size: 15px;
    }

    .cloud-problem-section {
        padding: 68px 0;
    }

    .badge-text {
        font-size: 13px;
    }

    .cloud-card {
        padding: 21px 18px;
    }

    .cloud-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 17px;
    }

    .cloud-card h4 {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .cloud-card p {
        font-size: 12px;
        line-height: 1.7;
    }

    .trusted-companies-section {
        padding: 72px 0 60px;
    }

    .trusted-companies-title {
        font-size: 14px;
        letter-spacing: 1.7px;
        margin-bottom: 42px;
    }

    .trusted-logo-item img {
        height: 30px;
    }

    .synops-body-section .synops-hero-section {
        padding: 72px 20px 10px;
    }

    .hero__logo {
        height: 34px;
        margin-bottom: 38px;
    }

    .hero__badge {
        font-size: 12px;
        padding: 8px 18px;
        gap: 8px;
        margin-bottom: 32px;
    }

    .hero__badge-icon {
        width: 14px;
        height: 14px;
    }

    .hero__heading {
        font-size: 36px;
        letter-spacing: -0.8px;
        margin-bottom: 22px;
        line-height: 1.13;
    }

    .hero__desc {
        font-size: 14.5px;
        line-height: 1.73;
        margin-bottom: 44px;
        max-width: 560px;
    }

    /* ── DASHBOARD WRAPPER ── */
    .synops-dashboard {
        grid-template-columns: 165px 1fr;
        padding: 14px;
        border-radius: 20px;
        gap: 0;
    }

    /* ── SIDEBAR ── */
    .synops-sidebar {
        height: auto;
        padding: 14px 12px;
        border-radius: 16px;
        overflow: hidden;
    }

    .synops-logo-box {
        margin-bottom: 9px;
    }

    .synops-logo-box img {
        height: 20px;
    }

    .synops-company-box {
        height: 26px;
        font-size: 8px;
        padding: 0 10px;
        border-radius: 8px;
        margin-bottom: 9px;
        gap: 6px;
    }

    .synops-company-icon,
    .synops-chevron-icon {
        width: 10px;
        height: 10px;
    }

    .synops-sidebar-nav {
        gap: 3px;
    }

    .synops-nav-item {
        height: 21px;
        font-size: 8px;
        gap: 7px;
        padding: 0 9px;
        border-radius: 8px;
    }

    .synops-nav-icon {
        width: 12px;
        height: 11px;
        flex-shrink: 0;
    }

    .synops-count {
        width: 15px;
        height: 15px;
        font-size: 6.5px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .synops-sidebar-footer {
        margin-top: 9px;
        padding-top: 9px;
    }

    .synops-notification-row {
        font-size: 8px;
        gap: 5px;
        margin-bottom: 9px;
    }

    .synops-dot {
        width: 5px;
        height: 5px;
    }

    .synops-user {
        gap: 7px;
    }

    .synops-user-avatar {
        width: 22px;
        height: 22px;
        font-size: 7.5px;
        flex-shrink: 0;
    }

    .synops-user h6 {
        font-size: 8px;
        margin: 0;
    }

    .synops-user small {
        font-size: 7px;
    }

    /* ── MAIN ── */
    .synops-main {
        padding: 15px 14px;
        min-height: auto;
        overflow: hidden;
    }

    /* ── TOPBAR ── */
    .synops-topbar {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 14px;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .synops-search-box {
        width: 210px;
        min-width: 0;
        flex-shrink: 1;
        height: 30px;
        font-size: 8px;
        padding: 0 11px;
        gap: 7px;
        border-radius: 9px;
    }

    .synops-search-icon {
        width: 11px;
        height: 11px;
        flex-shrink: 0;
    }

    .synops-pill {
        height: 30px;
        padding: 0 11px;
        font-size: 8px;
        border-radius: 9px;
        gap: 6px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .synops-cloud-icon,
    .synops-calendar-icon {
        width: 11px;
        height: 11px;
    }

    .synops-arrow-down-icon {
        width: 14px;
        height: 14px;
    }

    .synops-flex-space {
        flex: 1;
    }

    .synops-icon-circle {
        width: 26px;
        height: 26px;
        flex-shrink: 0;
    }

    .synops-notification-icon {
        width: 26px;
        height: 26px;
    }

    .synops-ai-btn {
        height: 30px;
        padding: 0 14px;
        font-size: 8.5px;
        border-radius: 15px;
        gap: 7px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .synops-ai-icon {
        width: 10px;
        height: 10px;
    }

    .synops-profile-box {
        font-size: 8px;
        gap: 6px;
        flex-shrink: 0;
    }

    .synops-profile-circle {
        width: 22px;
        height: 22px;
        font-size: 7.5px;
    }

    /* ── DASHBOARD HEADER ── */
    .synops-dashboard-head {
        margin-bottom: 8px;
    }

    .synops-dashboard-header {
        margin-bottom: 12px;
        align-items: center;
    }

    .synops-dashboard-header h2 {
        font-size: 13px;
        margin-bottom: 3px;
    }

    .synops-dashboard-header p {
        font-size: 9px;
        margin: 0;
    }

    .synops-refresh-btn {
        height: 26px;
        padding: 0 13px;
        font-size: 9px;
        border-radius: 13px;
        gap: 6px;
        flex-shrink: 0;
    }

    .synops-refresh-icon {
        width: 11px;
        height: 11px;
    }

    /* ── STAT CARDS — 4 columns in a row ── */
    .synops-stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 11px;
        margin-bottom: 15px;
    }

    .synops-stat-card {
        min-height: 0;
        height: 96px;
        padding: 11px 11px 0 11px;
        border-radius: 12px;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
    }

    .synops-stat-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 5px;
        gap: 2px;
        flex-wrap: nowrap;
    }

    .synops-stat-title {
        font-size: 8px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 55%;
        color: rgba(100, 116, 139, 1);
    }

    .synops-stat-badge {
        font-size: 7px;
        padding: 2px 5px;
        gap: 2px;
        border-radius: 20px;
        flex-shrink: 0;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
    }

    .synops-badge-icon {
        width: 7px;
        height: 7px;
    }

    .synops-stat-card h3 {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 3px;
        line-height: 1;
        white-space: nowrap;
        color: rgba(226, 232, 245, 1);
    }

    .synops-stat-card small {
        font-size: 7px;
        display: block;
        line-height: 1.2;
        color: rgba(100, 116, 139, 1);
    }

    .synops-mini-chart,
    .synops-main-chart {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 30px;
    }

    .synops-mini-chart svg,
    .synops-main-chart svg {
        width: 100%;
        height: 30px;
        display: block;
    }

    /* ── BOTTOM GRID — chart left, donut right ── */
    .synops-bottom-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 11px;
    }

    /* Chart card */
    .synops-chart-card {
        padding: 13px 11px;
        max-height: none;
        border-radius: 12px;
        overflow: hidden;
    }

    .synops-card-header {
        margin-bottom: 10px;
    }

    .synops-card-header h5 {
        font-size: 11px;
        margin-bottom: 0;
    }

    .synops-card-header small {
        font-size: 8px;
    }

    .synops-chart-filter {
        height: auto;
        gap: 2px;
    }

    .synops-chart-filter span {
        font-size: 8px;
        padding: 4px 6px 0;
    }

    .synops-chart-wrapper {
        gap: 0;
    }

    .synops-chart-area {
        width: 100%;
        overflow: hidden;
    }

    .synops-chart-area svg {
        width: 100%;
        height: 135px;
    }

    .synops-chart-legend {
        font-size: 8px;
        gap: 12px;
        padding: 5px 8px;
        margin-top: 10px;
    }

    .legend-icon {
        width: 12px;
        height: 10px;
    }

    /* Donut card */
    .synops-donut-card {
        padding: 13px 10px;
        max-height: none;
        border-radius: 12px;
        overflow: hidden;
    }

    .synops-donut-wrapper {
        padding: 5px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .synops-donut-svg {
        width: 108px;
        height: 108px;
        flex-shrink: 0;
    }

    .synops-donut-svg svg {
        width: 108px;
        height: 108px;
    }

    .synops-legend {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 8px;
        opacity: 1;
        width: 100%;
        margin-top: 9px;
    }

    .synops-legend div {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .synops-legend .dot {
        width: 7px;
        height: 7px;
        flex-shrink: 0;
        border-radius: 50%;
    }

    .synops-legend .pct {
        margin-left: auto;
        font-size: 8px;
        color: #8096b7;
        font-weight: 600;
    }

    .synops-ai-engine-section {
        padding: 60px 0;
    }

    .synops-ai-title {
        font-size: 30px;
    }

    .synops-ai-description {
        font-size: 14.5px;
        margin-bottom: 38px;
    }

    .synops-dashboard-wrapper {
        padding: 11px;
        border-radius: 16px;
    }

    .synops-dashboard-title {
        font-size: 12.5px;
    }

    .synops-dashboard-subtitle {
        font-size: 8.5px;
    }

    .synops-dashboard-status {
        font-size: 7.5px;
    }

    .synops-powered-tag {
        font-size: 7px;
    }

    /* Stat Cards */
    .synops-ai-stat-card {
        padding: 9px 11px;
        min-height: 64px;
        border-radius: 11px;
    }

    .stat-label {
        font-size: 7px;
    }

    .synops-ai-stat-card h4 {
        font-size: 14px;
    }

    .stat-loss,
    .stat-profit {
        font-size: 7px;
        padding: 2px 5px;
    }

    /* Chart */
    .synops-chart-svg {
        height: 230px;
    }

    .synops-chart-svg svg {
        height: 230px;
    }

    .synops-chart-legend {
        font-size: 8px;
        gap: 12px;
    }

    .legend-svg-icon {
        width: 15px;
        height: 10px;
    }

    /* Feature Slider */
    .synops-feature-card {
        width: 46%;
    }

    .synops-feature-content h6 {
        font-size: 10.5px;
    }

    .synops-feature-content p {
        font-size: 8.5px;
    }

    /* Recommendation Cards */
    .synops-recommend-card {
        padding: 10px 12px;
        border-radius: 12px;
    }

    .recommend-top h5 {
        font-size: 10px;
    }

    .recommend-price {
        font-size: 15px;
    }

    .recommend-btn {
        height: 24px;
        font-size: 7px;
    }

    .synops-total-saving-card h2 {
        font-size: 16px;
    }

    .saving-title {
        font-size: 7px;
    }

    .finops-platform-section {
        padding: 44px 0;
    }

    /*     .finops-platform-section .synops-ai-title  { font-size: 22px; margin-bottom: 7px; }
     .finops-platform-section .synops-ai-description { font-size: 12.5px; margin-bottom: 22px; }*/
    .finops-platform-section .cloud-problem-badge {
        padding: 5px 16px;
        margin-bottom: 16px;
    }

    .finops-platform-section .badge-text {
        font-size: 9.5px;
    }

    .finops-platform-dashboard {
        padding: 11px;
        border-radius: 14px;
    }

    .finops-platform-tabs {
        gap: 5px;
        margin-bottom: 11px;
    }

    .finops-platform-tab {
        padding: 5px 9px;
        font-size: 9px;
        border-radius: 6px;
    }

    /* Chart card */
    .finops-chart-card {
        padding: 10px;
        border-radius: 12px;
    }

    .finops-chart-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 9px;
    }

    .finops-chart-header h4 {
        font-size: 9.5px;
        margin-bottom: 2px;
    }

    .finops-chart-header h3 {
        font-size: 17px;
        line-height: 1;
    }

    .finops-growth-badge {
        font-size: 8px;
        padding: 4px 8px;
        border-radius: 11px;
        white-space: nowrap;
    }

    .finops-chart-body {
        display: flex;
        gap: 7px;
    }

    .finops-y-axis {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 28px;
        height: 110px;
        font-size: 7.5px;
        color: #6f7580;
        flex-shrink: 0;
    }

    .finops-graph-area {
        flex: 1;
        min-width: 0;
    }

    .finops-graph-area svg {
        width: 100% !important;
        height: 110px !important;
        display: block;
    }

    .finops-x-axis {
        margin-left: 28px;
        margin-top: 4px;
        font-size: 7.5px;
        color: #6f7580;
    }

    /* Resource card */
    .finops-resource-card {
        padding: 10px;
        border-radius: 12px;
    }

    .finops-resource-title {
        font-size: 9.5px;
        margin-bottom: 8px;
    }

    .finops-resource-item {
        padding: 6px 8px;
        border-radius: 7px;
        margin-bottom: 5px;
    }

    .finops-resource-header {
        margin-bottom: 4px;
    }

    .finops-resource-header span {
        font-size: 8.5px;
    }

    .finops-resource-header strong {
        font-size: 9px;
    }

    .finops-progress {
        height: 3px;
        margin-bottom: 3px;
    }

    .finops-resource-item small {
        font-size: 8px;
    }

    /* Bottom stats */
    .finops-bottom-stats {
        margin-top: 11px;
        padding-top: 11px;
    }

    .finops-stat-box h3 {
        font-size: 18px;
        margin-bottom: 3px;
    }

    .finops-stat-box p {
        font-size: 8.5px;
    }

    .finops-feature-icon {
        width: 34px;
        height: 34px;
        margin-bottom: 16px;
    }

    .finops-feature-icon img {
        width: 34px;
        height: 34px;
    }

    .finops-feature-card h4 {
        font-size: 14px;
        margin-bottom: 11px;
    }

    .finops-feature-card p {
        font-size: 11.5px;
        line-height: 1.68;
    }

    .kl-journey-section {
        padding: 80px 0;
    }

    .kl-journey-card {
        height: 492px;
        padding: 30px 34px;
        border-radius: 24px;
    }

    /*    . kl-card-heading { font-size: 24px; margin-bottom: 9px; }
    .kl-card-para  { font-size: 14px; max-width: 330px; }*/
    /*    .kl-cloud-svg {
        width: 57%;
        max-width: 500px;
        bottom: -24px;
        left: -16px;
    }*/
    /*    .kl-floating-svg { width: 356px; right: -40px; top: 12px; }*/
    .kl-stats {
        width: 143px;
        gap: 9px;
    }

    .kl-right-content {
        gap: 12px;
    }

    .journey-card {
        padding: 5px 7px;
        border-radius: 8px;
    }

    .journey-card small {
        font-size: 5.5px;
    }

    .journey-card h4 {
        font-size: 10px;
    }

    .journey-card p {
        font-size: 7.5px;
    }

    .stat-sub-text {
        font-size: 8px;
    }

    .integration-card {
        width: 210px;
        max-height: 248px;
        border-radius: 15px 15px 0 0;
    }

    .integration-header {
        padding: 7px 14px;
    }

    .integration-header span:first-child,
    .integration-header span:last-child {
        font-size: 7px;
    }

    integration-card ul li {
        padding: 5px 13px;
    }

    .integration-card li span:first-child {
        font-size: 9px;
    }

    .integration-card li span:last-child {
        font-size: 7px;
    }

    .cloud-provider {
        width: 44px;
        height: 44px;
    }

    .synops-results-section {
        padding: 64px 0;
    }

    .synops-result-card {
        padding: 24px 16px;
        border-radius: 16px;
    }

    /*    .synops-result-card h3 { font-size: 42px; margin-bottom: 16px; }*/
    .synops-result-card h3 {
        font-size: 42px;
        margin-bottom: 18px;
    }

    .synops-result-card h5 {
        font-size: 14.5px;
        margin-bottom: 7px;
        line-height: 1.3;
    }

    .synops-result-card p {
        font-size: 11px;
    }

    .synops-ai-icon {
        width: 15px;
        height: 15px;
    }

    .synops-testimonials {
        padding: 70px 0;
    }

    .synops-ai-title {
        font-size: 35px;
    }

    .synops-ai-description {
        font-size: 14.5px;
        margin-bottom: 40px;
    }

    .testimonial-card {
        padding: 20px;
        border-radius: 16px;
    }

    .testimonial-text {
        font-size: 13px;
        line-height: 1.52;
        min-height: 92px;
    }

    .testimonial-user img {
        width: 42px;
        height: 42px;
    }

    .testimonial-user h5 {
        font-size: 12.5px;
    }

    .testimonial-user span {
        font-size: 10px;
    }

    .testimonial-stars i {
        font-size: 11px;
    }

    .synops-cloud-section {
        padding: 70px 0;
    }

    .synops-cloud-svg {
        max-width: 520px;
    }

    .synops-cta-section {
        padding: 76px 0;
    }

    .synops-btn-primary,
    .synops-btn-secondary {
        padding: 13px 24px;
        font-size: 12px;
        border-radius: 11px;
    }

    .synops-tags span {
        font-size: 11.5px;
        padding: 7px 13px;
    }

    .synops-tags {
        gap: 9px;
        margin-top: 38px;
    }

    /* FIX: 1024–1198px should be between 991 and 1199 ranges */
    .synops-strip-row .strip-logo img:first-child {
        width: 88px !important;
        height: auto !important;
    }

    .synops-strip-row .strip-logo img:last-child {
        width: 108px !important;
        height: auto !important;
    }

    .synops-strip-row .strip-text h4 {
        font-size: 18px !important;
    }

    .synops-strip-row > div:first-child {
        flex: 0 0 30% !important;
        width: 30% !important;
        max-width: 30% !important;
    }

    .synops-strip-row .strip-logo {
        gap: clamp(6px, 0.68vw, 12px) !important;
    }

    .synops-strip-row .strip-text h4 {
        /*font-size: 13px !important;*/
        white-space: nowrap !important;
    }

    .synops-strip-row > .strip-contact-column {
        transform: translate(63px, 35px) !important;
    }

    .strip-contact {
        gap: clamp(6px, 0.6vw, 10px) !important;
    }

    .strip-contact-arrow {
        width: clamp(28px, 3vw, 36px) !important;
        height: clamp(28px, 3vw, 36px) !important;
    }

    .strip-contact-text {
        font-size: 10px !important;
        width: 18px !important;
        gap: 11px !important;
    }

    .finops-platform-section .finops-chart-body {
        gap: 12px;
        height: 182px;
    }

    .finops-chart-card .finops-graph-area,
    .finops-chart-card .finops-graph-area svg {
        height: 182px;
    }
}

@media (min-width: 991px) and (max-width: 1023.5px) {
    /*    .hero-glow {
        width: 77%;
        height: auto;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
    }*/
    /*    .hero-glow {
        width: 93%;
        height: 425px;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
    }*/
    .hero-glow {
        width: 248%;
        height: 511px;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
    }

    .cloud-problem-section {
        padding: 66px 0;
    }

    .badge-text {
        font-size: 13px;
    }

    .cloud-card {
        padding: 20px 18px;
    }

    .cloud-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 16px;
    }

    .cloud-card h4 {
        font-size: 13.5px;
        margin-bottom: 12px;
    }

    .cloud-card p {
        font-size: 12px;
        line-height: 1.68;
    }

    .trusted-companies-section {
        padding: 68px 0 56px;
    }

    .trusted-companies-title {
        font-size: 13px;
        letter-spacing: 1.6px;
        margin-bottom: 40px;
    }

    .trusted-logo-item img {
        height: 28px;
    }

    .synops-body-section .synops-hero-section {
        padding: 66px 20px 10px;
    }

    .hero__logo {
        height: 32px;
        margin-bottom: 36px;
    }

    .hero__badge {
        font-size: 12px;
        padding: 8px 17px;
        gap: 7px;
        margin-bottom: 30px;
    }

    .hero__badge-icon {
        width: 14px;
        height: 14px;
    }

    .hero__heading {
        font-size: 33px;
        letter-spacing: -0.7px;
        margin-bottom: 22px;
        line-height: 1.13;
    }

    .hero__desc {
        font-size: 14px;
        line-height: 1.72;
        margin-bottom: 40px;
        max-width: 540px;
    }

    .synops-dashboard {
        grid-template-columns: 155px 1fr;
        padding: 12px;
        border-radius: 18px;
        gap: 0;
    }

    /* ── SIDEBAR ── */
    .synops-sidebar {
        height: auto;
        padding: 12px 10px;
        border-radius: 14px;
        overflow: hidden;
    }

    .synops-logo-box {
        margin-bottom: 8px;
    }

    .synops-logo-box img {
        height: 18px;
    }

    .synops-company-box {
        height: 24px;
        font-size: 7.5px;
        padding: 0 8px;
        border-radius: 7px;
        margin-bottom: 8px;
        gap: 5px;
    }

    .synops-company-icon,
    .synops-chevron-icon {
        width: 9px;
        height: 9px;
    }

    .synops-sidebar-nav {
        gap: 2px;
    }

    .synops-nav-item {
        height: 20px;
        font-size: 7.5px;
        gap: 6px;
        padding: 0 8px;
        border-radius: 7px;
    }

    .synops-nav-icon {
        width: 11px;
        height: 10px;
        flex-shrink: 0;
    }

    .synops-count {
        width: 14px;
        height: 14px;
        font-size: 6px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .synops-sidebar-footer {
        margin-top: 8px;
        padding-top: 8px;
    }

    .synops-notification-row {
        font-size: 7.5px;
        gap: 5px;
        margin-bottom: 8px;
    }

    .synops-dot {
        width: 5px;
        height: 5px;
    }

    .synops-user {
        gap: 6px;
    }

    .synops-user-avatar {
        width: 20px;
        height: 20px;
        font-size: 7px;
        flex-shrink: 0;
    }

    .synops-user h6 {
        font-size: 7.5px;
        margin: 0;
    }

    .synops-user small {
        font-size: 6.5px;
    }

    /* ── MAIN ── */
    .synops-main {
        padding: 14px 13px;
        min-height: auto;
        overflow: hidden;
    }

    /* ── TOPBAR ── */
    .synops-topbar {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 13px;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .synops-search-box {
        width: 190px;
        min-width: 0;
        flex-shrink: 1;
        height: 28px;
        font-size: 6.5px;
        padding: 0 10px;
        gap: 6px;
        border-radius: 8px;
    }

    .synops-search-icon {
        width: 10px;
        height: 10px;
        flex-shrink: 0;
    }

    .synops-pill {
        height: 28px;
        padding: 0 10px;
        font-size: 7.5px;
        border-radius: 8px;
        gap: 5px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .synops-cloud-icon,
    .synops-calendar-icon {
        width: 10px;
        height: 10px;
    }

    .synops-arrow-down-icon {
        width: 13px;
        height: 13px;
    }

    .synops-flex-space {
        flex: 1;
    }

    .synops-icon-circle {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }

    .synops-notification-icon {
        width: 24px;
        height: 24px;
    }

    .synops-ai-btn {
        height: 28px;
        padding: 0 12px;
        font-size: 8px;
        border-radius: 14px;
        gap: 6px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .synops-ai-icon {
        width: 9px;
        height: 9px;
    }

    .synops-profile-box {
        font-size: 7.5px;
        gap: 5px;
        flex-shrink: 0;
    }

    .synops-profile-circle {
        width: 20px;
        height: 20px;
        font-size: 7px;
    }

    /* ── DASHBOARD HEADER ── */
    .synops-dashboard-head {
        margin-bottom: 7px;
    }

    .synops-dashboard-header {
        margin-bottom: 11px;
        align-items: center;
    }

    .synops-dashboard-header h2 {
        font-size: 12px;
        margin-bottom: 3px;
    }

    .synops-dashboard-header p {
        font-size: 8.5px;
        margin: 0;
    }

    .synops-refresh-btn {
        height: 24px;
        padding: 0 12px;
        font-size: 8.5px;
        border-radius: 12px;
        gap: 5px;
        flex-shrink: 0;
    }

    .synops-refresh-icon {
        width: 10px;
        height: 10px;
    }

    /* ── STAT CARDS — 4 columns in a row ── */
    .synops-stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin-bottom: 14px;
    }

    .synops-stat-card {
        min-height: 0;
        height: 90px;
        padding: 10px 10px 0 10px;
        border-radius: 11px;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
    }

    .synops-stat-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 5px;
        gap: 2px;
        flex-wrap: nowrap;
    }

    .synops-stat-title {
        font-size: 7.5px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 55%;
        color: rgba(100, 116, 139, 1);
    }

    .synops-stat-badge {
        font-size: 6.5px;
        padding: 2px 5px;
        gap: 2px;
        border-radius: 20px;
        flex-shrink: 0;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
    }

    .synops-badge-icon {
        width: 7px;
        height: 7px;
    }

    .synops-stat-card h3 {
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 3px;
        line-height: 1;
        white-space: nowrap;
        color: rgba(226, 232, 245, 1);
    }

    .synops-stat-card small {
        font-size: 6.5px;
        display: block;
        line-height: 1.2;
        color: rgba(100, 116, 139, 1);
    }

    .synops-mini-chart, .synops-main-chart {
        position: absolute;
        left: 7px;
        bottom: 6px;
        width: 90%;
        height: 28px;
    }

    .synops-mini-chart svg,
    .synops-main-chart svg {
        width: 100%;
        height: 28px;
        display: block;
    }

    /* ── BOTTOM GRID — chart left, donut right ── */
    .synops-bottom-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 10px;
    }

    /* Chart card */
    .synops-chart-card {
        padding: 12px 10px;
        max-height: none;
        border-radius: 11px;
        overflow: hidden;
    }

    .synops-card-header {
        margin-bottom: 9px;
    }

    .synops-card-header h5 {
        font-size: 10px;
        margin-bottom: 0;
    }

    .synops-card-header small {
        font-size: 7.5px;
    }

    .synops-chart-filter {
        height: auto;
        gap: 2px;
    }

    .synops-chart-filter span {
        font-size: 7.5px;
        padding: 4px 5px 0;
    }

    .synops-chart-wrapper {
        gap: 0;
    }

    .synops-chart-area {
        width: 100%;
        overflow: hidden;
    }

    .synops-chart-area svg {
        width: 100%;
        height: 125px;
    }

    .synops-chart-legend {
        font-size: 7.5px;
        gap: 10px;
        padding: 5px 7px;
        margin-top: 10px;
    }

    .legend-icon {
        width: 11px;
        height: 9px;
    }

    /* Donut card */
    .synops-donut-card {
        padding: 12px 8px;
        max-height: none;
        border-radius: 11px;
        overflow: hidden;
    }

    .synops-donut-wrapper {
        padding: 4px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .synops-donut-svg {
        width: 100px;
        height: 100px;
        flex-shrink: 0;
    }

    .synops-donut-svg svg {
        width: 100px;
        height: 100px;
    }

    .synops-legend {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 7.5px;
        opacity: 1;
        width: 100%;
        margin-top: 8px;
    }

    .synops-legend div {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .synops-legend .dot {
        width: 7px;
        height: 7px;
        flex-shrink: 0;
        border-radius: 50%;
    }

    .synops-legend .pct {
        margin-left: auto;
        font-size: 7.5px;
        color: #8096b7;
        font-weight: 600;
    }

    .synops-ai-engine-section {
        padding: 60px 0;
    }

    .synops-ai-title {
        font-size: 28px;
    }

    .synops-ai-description {
        font-size: 14px;
        margin-bottom: 36px;
    }

    .synops-dashboard-wrapper {
        padding: 11px;
        border-radius: 15px;
    }

    .synops-dashboard-title {
        font-size: 12px;
    }

    .synops-dashboard-subtitle {
        font-size: 8.5px;
    }

    .synops-dashboard-status {
        font-size: 7.5px;
    }

    .synops-powered-tag {
        font-size: 7px;
    }

    /* Stat Cards — 4 in a row but compact */
    .synops-ai-stat-card {
        padding: 8px 10px;
        min-height: 62px;
        border-radius: 10px;
    }

    .stat-label {
        font-size: 7px;
        letter-spacing: 0.5px;
    }

    .synops-ai-stat-card h4 {
        font-size: 13px;
    }

    .stat-loss,
    .stat-profit {
        font-size: 7px;
        padding: 2px 5px;
    }

    /* Chart */
    .synops-chart-svg {
        height: 277px;
    }

    .synops-chart-svg svg {
        height: 322px;
    }

    .synops-chart-legend {
        font-size: 8px;
        gap: 12px;
    }

    .legend-svg-icon {
        width: 14px;
        height: 10px;
    }

    /* Feature Slider */
    .synops-feature-card {
        width: 48%;
    }

    .synops-feature-content h6 {
        font-size: 10px;
    }

    .synops-feature-content p {
        font-size: 8px;
    }

    /* Recommendation Cards */
    .synops-recommend-card {
        padding: 10px 12px;
        border-radius: 12px;
    }

    .recommend-top h5 {
        font-size: 10px;
    }

    .recommend-price {
        font-size: 14px;
    }

    .recommend-btn {
        height: 23px;
        font-size: 6.5px;
    }

    .synops-total-saving-card h2 {
        font-size: 16px;
    }

    .saving-title {
        font-size: 7px;
    }

    .finops-platform-section {
        padding: 40px 0;
    }

    /* Heading */
    /*    .finops-platform-section .synops-ai-title  { font-size: 20px; margin-bottom: 6px; }
    .finops-platform-section .synops-ai-description { font-size: 12px; margin-bottom: 20px; }*/
    .finops-platform-section .cloud-problem-badge {
        padding: 5px 14px;
        margin-bottom: 14px;
    }

    .finops-platform-section .badge-text {
        font-size: 9px;
    }

    /* Dashboard */
    .finops-platform-dashboard {
        padding: 10px;
        border-radius: 13px;
    }

    /* Tabs */
    .finops-platform-tabs {
        gap: 4px;
        margin-bottom: 10px;
    }

    .finops-platform-tab {
        padding: 5px 8px;
        font-size: 8.5px;
        border-radius: 6px;
    }

    /* Chart card */
    .finops-chart-card {
        padding: 9px;
        border-radius: 11px;
    }

    .finops-chart-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 8px;
    }

    .finops-chart-header h4 {
        font-size: 9px;
        margin-bottom: 2px;
        font-weight: 500;
        color: #fff;
    }

    .finops-chart-header h3 {
        font-size: 16px;
        font-weight: 700;
        color: #00d49d;
        line-height: 1;
    }

    .finops-growth-badge {
        font-size: 7.5px;
        padding: 3px 7px;
        border-radius: 10px;
        white-space: nowrap;
    }

    /* SVG chart */
    .finops-chart-body {
        display: flex;
        gap: 6px;
    }

    .finops-y-axis {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 26px;
        height: 100px;
        font-size: 7px;
        color: #6f7580;
        flex-shrink: 0;
    }

    .finops-graph-area {
        flex: 1;
        min-width: 0;
    }

    .finops-graph-area svg {
        width: 100% !important;
        height: 100px !important;
        display: block;
    }

    .finops-x-axis {
        display: flex;
        justify-content: space-between;
        margin-left: 26px;
        margin-top: 4px;
        font-size: 7px;
        color: #6f7580;
    }

    /* Resource card */
    .finops-resource-card {
        padding: 9px;
        border-radius: 11px;
    }

    .finops-resource-title {
        font-size: 9px;
        font-weight: 600;
        margin-bottom: 7px;
        color: #fff;
    }

    .finops-resource-item {
        padding: 5px 7px;
        border-radius: 7px;
        margin-bottom: 5px;
    }

    .finops-resource-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 4px;
    }

    .finops-resource-header span {
        font-size: 8px;
        color: #8f98a8;
    }

    .finops-resource-header strong {
        font-size: 8.5px;
        color: #fff;
    }

    .finops-progress {
        height: 3px;
        border-radius: 20px;
        margin-bottom: 3px;
    }

    .finops-resource-item small {
        font-size: 7.5px;
        color: #5f6875;
    }

    /* Bottom stats */
    .finops-bottom-stats {
        margin-top: 10px;
        padding-top: 10px;
    }

    .finops-stat-box {
        text-align: center;
        padding: 0 4px;
    }

    .finops-stat-box h3 {
        font-size: 16px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 3px;
    }

    .finops-stat-box p {
        font-size: 8px;
        color: #6d7687;
        margin: 0;
    }

    .finops-feature-icon {
        width: 33px;
        height: 33px;
        margin-bottom: 15px;
    }

    .finops-feature-icon img {
        width: 33px;
        height: 33px;
    }

    .finops-feature-card h4 {
        font-size: 13.5px;
        margin-bottom: 10px;
    }

    .finops-feature-card p {
        font-size: 11.5px;
        line-height: 1.67;
    }


    .kl-journey-section {
        padding: 70px 0;
    }

    .kl-journey-card {
        height: 460px;
        padding: 26px 30px;
        border-radius: 22px;
    }

    /*    . kl-card-heading { font-size: 22px; margin-bottom: 8px; }
    .kl-card-para  { font-size: 13px; max-width: 290px; }*/
    /*    .kl-cloud-svg {
        width: 56%;
        max-width: 462px;
        bottom: -20px;
        left: -14px;
    }*/
    /*    .kl-cloud-svg {
        width: 56%;
        max-width: 342px;
        top: 56px;
        left: 48px;
    }*/
    .integration-card ul li {
        padding: 5px 4px;
    }

    /*    .kl-floating-svg {
        width: 259px;
        right: -30px;
        top: 4px;
    }*/
    .kl-stats {
        width: 130px;
        gap: 8px;
    }

    .kl-right-content {
        gap: 11px;
    }

    .journey-card {
        padding: 5px 6px;
        border-radius: 8px;
    }

    .journey-card small {
        font-size: 5px;
    }

    .journey-card h4 {
        font-size: 9.5px;
    }

    .journey-card p {
        font-size: 7px;
    }

    .stat-sub-text {
        font-size: 7.5px;
    }

    .integration-card {
        width: 192px;
        max-height: 230px;
        border-radius: 14px 14px 0 0;
    }

    .integration-header {
        padding: 7px 13px;
    }

    .integration-header span:first-child,
    .integration-header span:last-child {
        font-size: 6.5px;
    }

    integration-card ul li {
        padding: 4px 12px;
    }

    .integration-card li span:first-child {
        font-size: 8.5px;
    }

    .integration-card li span:last-child {
        font-size: 6.5px;
    }

    .cloud-provider {
        width: 40px;
        height: 40px;
    }

    .synops-results-section {
        padding: 58px 0;
    }

    .synops-result-card {
        padding: 22px 14px;
        border-radius: 15px;
    }

    /*    .synops-result-card h3 { font-size: 38px; margin-bottom: 14px; }*/
    .synops-result-card h3 {
        font-size: 40px;
        margin-bottom: 18px;
    }

    .synops-result-card h5 {
        font-size: 13.5px;
        margin-bottom: 6px;
        line-height: 1.3;
    }

    .synops-result-card p {
        font-size: 11px;
    }

    .synops-ai-icon {
        width: 15px;
        height: 15px;
    }

    .synops-testimonials {
        padding: 64px 0;
    }

    .synops-ai-title {
        font-size: 32px;
    }

    .synops-ai-description {
        font-size: 14px;
        margin-bottom: 36px;
    }

    .testimonial-card {
        padding: 18px;
        border-radius: 16px;
    }

    .testimonial-text {
        font-size: 13px;
        line-height: 1.5;
        min-height: 90px;
    }

    .testimonial-user img {
        width: 40px;
        height: 40px;
    }

    .testimonial-user h5 {
        font-size: 12px;
    }

    .testimonial-user span {
        font-size: 10px;
    }

    .testimonial-stars i {
        font-size: 10px;
    }

    .synops-cloud-section {
        padding: 64px 0;
    }

    .synops-cloud-svg {
        max-width: 490px;
    }

    .synops-cta-section {
        padding: 70px 0;
    }

    .synops-btn-primary,
    .synops-btn-secondary {
        padding: 12px 22px;
        font-size: 11.5px;
        border-radius: 11px;
    }

    .synops-tags span {
        font-size: 11px;
        padding: 7px 12px;
    }

    .synops-tags {
        gap: 9px;
        margin-top: 36px;
    }

    /* FIX: 991–1023px should be slightly smaller than 1024px */
    .synops-strip-row .strip-logo img:first-child {
        width: 80px !important;
        height: auto !important;
    }

    .synops-strip-row .strip-logo img:last-child {
        width: 98px !important;
        height: auto !important;
    }

    .synops-strip-row .strip-text h4 {
        font-size: 18px !important;
    }

    .synops-strip-row > div:first-child {
        flex: 0 0 30% !important;
        width: 30% !important;
        max-width: 30% !important;
    }

    .synops-strip-row .strip-logo {
        gap: clamp(6px, 0.67vw, 12px) !important;
    }

    /*    .synops-strip-row .strip-text h4 {
        font-size: 12px !important;
        white-space: nowrap !important;
    }*/
    .synops-strip-row > .strip-contact-column {
        transform: translate(60px, 34px) !important;
    }

    .strip-contact {
        gap: clamp(5px, 0.6vw, 10px) !important;
    }

    .strip-contact-arrow {
        width: clamp(27px, 2.9vw, 35px) !important;
        height: clamp(27px, 2.9vw, 35px) !important;
    }

    .strip-contact-text {
        font-size: 9px !important;
        width: 17px !important;
        gap: 10px !important;
    }

    .finops-platform-section .finops-chart-body {
        gap: 11px;
        height: 172px;
    }

    .finops-chart-card .finops-graph-area,
    .finops-chart-card .finops-graph-area svg {
        height: 172px;
    }
}

@media (min-width: 768px) and (max-width: 990.5px) {
    /*    .hero-glow {
        width: 93%;
        height: auto;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
    }*/
    /*    .hero-glow {
        width: 93%;
        height: 401px;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
    }*/
    .hero-glow {
        width: 116%;
        height: 486px;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
    }

    .trusted-logo-item img {
        height: 28px;
    }

    /*    .cloud-problem-title{
        font-size:36px;
    }*/
    .synops-bottom-grid {

        grid-template-columns:1fr;

    }

    .synops-donut {

        width: 180px;
        height: 180px;

    }

    .synops-donut-center {

        width: 110px;
        height: 110px;

    }

    .synops-stats-grid {

        grid-template-columns:repeat(2, 1fr);

    }

    .cloud-problem-section {
        padding: 62px 0;
    }

    .badge-text {
        font-size: 12px;
    }

    .cloud-card {
        padding: 20px;
        border-radius: 14px;
        /* 2-column via Bootstrap col-md-6 — cards fill naturally */
    }

    .cloud-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 16px;
    }

    .cloud-icon img {
        width: 18px;
        height: 18px;
    }

    .cloud-card h4 {
        font-size: 13.5px;
        margin-bottom: 12px;
    }

    .cloud-card p {
        font-size: 12px;
        line-height: 1.68;
    }

    .trusted-companies-section {
        padding: 60px 0 50px;
    }

    .trusted-companies-title {
        font-size: 12px;
        letter-spacing: 1.5px;
        margin-bottom: 36px;
    }

    .trusted-logo-row {
        flex-wrap: wrap;
    }


    .trusted-logo-item img {
        height: 26px;
    }

    .trusted-logo-row > div:last-child {
        margin-left: auto;
        margin-right: auto;
    }

    .synops-feature-card {

        flex: 0 0 320px;

    }

    .finops-platform-section {

        padding: 90px 0;

    }

    .finops-chart-header {

        flex-direction: column;

        gap: 14px;

    }

    .finops-resource-card {

        margin-top: -10px;

    }

    .finops-stat-box {

        margin-bottom: 20px;

    }

    .finops-capabilities-grid {

        grid-template-columns:repeat(2, 1fr);

    }

    .finops-feature-large {

        grid-column: span 2;

    }

    .synops-body-section .synops-hero-section {
        padding: 62px 20px 10px;
    }

    .hero__logo {
        height: 30px;
        margin-bottom: 34px;
    }

    .hero__badge {
        font-size: 11px;
        padding: 8px 16px;
        gap: 7px;
        margin-bottom: 28px;
    }

    .hero__badge-icon {
        width: 14px;
        height: 14px;
    }

    .hero__heading {
        font-size: 30px;
        letter-spacing: -0.6px;
        margin-bottom: 20px;
        line-height: 1.14;
    }

    .hero__desc {
        font-size: 13.5px;
        line-height: 1.72;
        margin-bottom: 38px;
        max-width: 520px;
    }

    /* ── DASHBOARD WRAPPER ── */
    .synops-dashboard {
        grid-template-columns: 140px 1fr;
        padding: 10px;
        border-radius: 16px;
        gap: 0;
    }

    /* ── SIDEBAR ── */
    .synops-sidebar {
        height: auto;
        padding: 10px 8px;
        border-radius: 12px;
        overflow: hidden;
    }

    .synops-logo-box {
        margin-bottom: 6px;
    }

    .synops-logo-box img {
        height: 16px;
    }

    .synops-company-box {
        height: 22px;
        font-size: 7px;
        padding: 0 7px;
        border-radius: 6px;
        margin-bottom: 6px;
        gap: 4px;
    }

    .synops-company-icon,
    .synops-chevron-icon {
        width: 8px;
        height: 8px;
    }

    .synops-sidebar-nav {
        gap: 2px;
    }

    .synops-nav-item {
        height: 18px;
        font-size: 7px;
        gap: 5px;
        padding: 0 7px;
        border-radius: 6px;
    }

    .synops-nav-icon {
        width: 10px;
        height: 9px;
        flex-shrink: 0;
    }

    .synops-count {
        width: 13px;
        height: 13px;
        font-size: 5.5px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .synops-sidebar-footer {
        margin-top: 6px;
        padding-top: 6px;
    }

    .synops-notification-row {
        font-size: 7px;
        gap: 4px;
        margin-bottom: 6px;
    }

    .synops-dot {
        width: 5px;
        height: 5px;
    }

    .synops-user {
        gap: 5px;
    }

    .synops-user-avatar {
        width: 18px;
        height: 18px;
        font-size: 6px;
        flex-shrink: 0;
    }

    .synops-user h6 {
        font-size: 7px;
        margin: 0;
    }

    .synops-user small {
        font-size: 6px;
    }

    /* ── MAIN ── */
    .synops-main {
        padding: 14px 12px;
        min-height: auto;
        overflow: hidden;
    }

    /* ── TOPBAR ── */
    .synops-topbar {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 12px;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .synops-search-box {
        width: 160px;
        min-width: 0;
        flex-shrink: 1;
        height: 26px;
        font-size: 6px;
        padding: 0 8px;
        gap: 5px;
        border-radius: 7px;
    }

    .synops-search-icon {
        width: 9px;
        height: 9px;
        flex-shrink: 0;
    }

    .synops-pill {
        height: 26px;
        padding: 0 8px;
        font-size: 7px;
        border-radius: 7px;
        gap: 4px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .synops-cloud-icon,
    .synops-calendar-icon {
        width: 9px;
        height: 9px;
    }

    .synops-arrow-down-icon {
        width: 12px;
        height: 12px;
    }

    .synops-flex-space {
        display: none;
    }

    .synops-icon-circle {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    .synops-notification-icon {
        width: 22px;
        height: 22px;
    }

    .synops-ai-btn {
        height: 26px;
        padding: 0 10px;
        font-size: 7px;
        border-radius: 13px;
        gap: 5px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .synops-ai-icon {
        width: 8px;
        height: 8px;
    }

    .synops-profile-box {
        font-size: 7px;
        gap: 4px;
        flex-shrink: 0;
    }

    .synops-profile-circle {
        width: 18px;
        height: 18px;
        font-size: 6px;
    }

    /* ── DASHBOARD HEADER ── */
    .synops-dashboard-head {
        margin-bottom: 6px;
    }

    .synops-dashboard-header {
        margin-bottom: 10px;
        align-items: center;
    }

    .synops-dashboard-header h2 {
        font-size: 11px;
        margin-bottom: 3px;
    }

    .synops-dashboard-header p {
        font-size: 8px;
        margin: 0;
    }

    .synops-refresh-btn {
        height: 22px;
        padding: 0 10px;
        font-size: 8px;
        border-radius: 11px;
        gap: 4px;
        flex-shrink: 0;
    }

    .synops-refresh-icon {
        width: 9px;
        height: 9px;
    }

    /* ── STAT CARDS — 4 columns in a row ── */
    .synops-stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-bottom: 14px;
    }

    .synops-stat-card {
        min-height: 0;
        height: 82px;
        padding: 8px 8px 0 8px;
        border-radius: 10px;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
    }

    .synops-stat-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 4px;
        gap: 2px;
        flex-wrap: nowrap;
    }

    .synops-stat-title {
        font-size: 7px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 55%;
        color: rgba(100, 116, 139, 1);
    }

    .synops-stat-badge {
        font-size: 6px;
        padding: 1px 4px;
        gap: 2px;
        border-radius: 20px;
        flex-shrink: 0;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
    }

    .synops-badge-icon {
        width: 6px;
        height: 6px;
    }

    .synops-stat-card h3 {
        font-size: 9px;
        font-weight: 700;
        margin-bottom: 3px;
        line-height: 1;
    }

    .synops-stat-card small {
        font-size: 6px;
        display: block;
        line-height: 1.2;
        color: rgba(100, 116, 139, 1);
    }

    .synops-mini-chart, .synops-main-chart {
        position: absolute;
        left: 6px;
        bottom: 7px;
        width: 90%;
        height: 26px;
    }

    .synops-mini-chart svg,
    .synops-main-chart svg {
        width: 100%;
        height: 26px;
        display: block;
    }

    /* ── BOTTOM GRID — chart left, donut right ── */
    .synops-bottom-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 8px;
    }

    /* Chart card */
    .synops-chart-card {
        padding: 10px 8px;
        max-height: none;
        border-radius: 10px;
        overflow: hidden;
    }

    .synops-card-header {
        margin-bottom: 8px;
    }

    .synops-card-header h5 {
        font-size: 9px;
        margin-bottom: 0;
    }

    .synops-card-header small {
        font-size: 7px;
    }

    .synops-chart-filter {
        height: auto;
        gap: 2px;
    }

    .synops-chart-filter span {
        font-size: 7px;
        padding: 3px 4px 0;
    }

    .synops-chart-wrapper {
        gap: 0;
    }

    .synops-chart-area {
        width: 100%;
        overflow: hidden;
    }

    .synops-chart-area svg {
        width: 100%;
        height: 110px;
    }

    .synops-chart-legend {
        font-size: 7px;
        gap: 8px;
        padding: 4px 6px;
        margin-top: 25px;
    }

    .legend-icon {
        width: 10px;
        height: 8px;
    }

    /* Donut card */
    .synops-donut-card {
        padding: 10px 8px;
        max-height: none;
        border-radius: 10px;
        overflow: hidden;
    }

    .synops-donut-wrapper {
        padding: 4px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .synops-donut-svg {
        width: 90px;
        height: 90px;
        flex-shrink: 0;
    }

    .synops-donut-svg svg {
        width: 90px;
        height: 90px;
    }

    .synops-legend {
        display: flex;
        flex-direction: column;
        gap: 3px;
        font-size: 7px;
        opacity: 1;
        width: 100%;
        margin-top: 6px;
    }

    .synops-legend div {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .synops-legend .dot {
        width: 6px;
        height: 6px;
        flex-shrink: 0;
        border-radius: 50%;
    }

    .synops-legend .pct {
        margin-left: auto;
        font-size: 7px;
        color: #8096b7;
        font-weight: 600;
    }

    .synops-ai-engine-section {
        padding: 56px 0;
    }

    .synops-ai-title {
        font-size: 26px;
    }

    .synops-ai-description {
        font-size: 13.5px;
        margin-bottom: 32px;
    }

    .synops-dashboard-wrapper {
        padding: 12px;
        border-radius: 15px;
    }

    .synops-dashboard-title {
        font-size: 12.5px;
    }

    .synops-dashboard-subtitle {
        font-size: 9px;
    }

    .synops-dashboard-status {
        font-size: 8px;
    }

    .synops-powered-tag {
        font-size: 7px;
        padding: 2px 6px;
    }

    /* Stat Cards — 2 per row */
    .synops-ai-stats-row .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .synops-ai-stat-card {
        padding: 10px 12px;
        min-height: 64px;
        border-radius: 11px;
    }

    .stat-label {
        font-size: 7.5px;
    }

    .synops-ai-stat-card h4 {
        font-size: 15px;
    }

    .stat-loss,
    .stat-profit {
        font-size: 7.5px;
        padding: 3px 6px;
    }

    /* Chart */
    .synops-chart-svg {
        height: 245px;
    }

    .synops-chart-svg svg {
        height: 289px;
    }

    .synops-chart-legend {
        font-size: 9px;
        gap: 16px;
    }

    .legend-svg-icon {
        width: 14px;
        height: 10px;
    }

    /* Feature Slider */
    .synops-feature-slider {
        height: 62px;
    }

    .synops-feature-card {
        width: 50%;
        height: 62px;
        min-height: 62px;
    }

    .synops-feature-icon-img {
        width: 22px;
        height: 22px;
    }

    .synops-feature-content h6 {
        font-size: 10.5px;
    }

    .synops-feature-content p {
        font-size: 8.5px;
    }

    /* col-lg-8 and col-lg-3 stack on tablets */
    .synops-ai-engine-section .col-lg-8,
    .synops-ai-engine-section .col-lg-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Recommendation Cards */
    .synops-recommendations {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 24px;
    }

    .synops-recommend-card {
        flex: 0 0 calc(50% - 5px);
        padding: 12px 14px;
        border-radius: 13px;
    }

    .synops-ai-recommendation-label {
        flex: 0 0 100%;
        width: 100%;
    }

    .synops-total-saving-card {
        flex: 0 0 calc(50% - 5px);
        margin-top: 0; /* remove if this was creating extra gap */
    }

    .synops-total-saving-card {
        flex: 0 0 calc(50% - 5px);
        margin-top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .recommend-top h5 {
        font-size: 11px;
    }

    .recommend-badge {
        font-size: 7.5px;
    }

    .recommend-price {
        font-size: 15px;
    }

    .recommend-note {
        font-size: 8px;
    }

    .recommend-btn {
        height: 24px;
        font-size: 7px;
        border-radius: 8px;
    }

    .synops-total-saving-card h2 {
        font-size: 17px;
    }

    .saving-title {
        font-size: 7.5px;
    }

    .finops-platform-section {
        padding: 30px 0;
    }

    .finops-platform-section .section-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .finops-platform-section .cloud-problem-badge {
        padding: 5px 15px;
        margin-bottom: 14px;
    }

    .finops-platform-section .badge-text {
        font-size: 8.5px;
    }

    .finops-platform-dashboard {
        padding: 10px;
        border-radius: 13px;
    }

    .finops-platform-tabs {
        gap: 5px;
        margin-bottom: 10px;
    }

    .finops-platform-tab {
        padding: 5px 10px;
        font-size: 8px;
        border-radius: 6px;
    }

    .finops-platform-dashboard .row.g-3 > .col-lg-8 {
        padding-right: 5px !important;
    }

    .finops-platform-dashboard .row.g-3 > .col-lg-4 {
        padding-left: 5px !important;
    }

    .finops-chart-card {
        padding: 10px;
        border-radius: 12px;
    }

    .finops-chart-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 8px;
    }

    .finops-chart-header h4 {
        font-size: 8px;
        margin-bottom: 2px;
    }

    .finops-chart-header h3 {
        font-size: 18px;
        line-height: 1;
    }

    .finops-growth-badge {
        font-size: 7.5px;
        padding: 4px 9px;
        border-radius: 9px;
    }

    /*    .finops-chart-card svg    { height: 112px !important; }*/
    .finops-resource-card {
        padding: 10px;
        border-radius: 12px;
    }

    .finops-resource-title {
        font-size: 8px;
        margin-bottom: 8px;
    }

    .finops-resource-item {
        padding: 6px 8px;
        border-radius: 7px;
        margin-bottom: 6px;
    }

    .finops-resource-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 4px;
    }

    .finops-resource-header span {
        font-size: 7.5px;
    }

    .finops-resource-header strong {
        font-size: 8px;
    }

    .finops-progress {
        height: 3px;
        border-radius: 10px;
        margin-bottom: 4px;
    }

    .finops-resource-item small {
        font-size: 7px;
        display: block;
    }

    .finops-bottom-stats {
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, .06);
    }

    .finops-stat-box {
        text-align: center;
        padding: 0 4px;
    }

    .finops-stat-box h3 {
        font-size: 18px;
        margin-bottom: 3px;
    }

    .finops-stat-box p {
        font-size: 7.5px;
        margin: 0;
    }

    .finops-capabilities-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .finops-feature-large {
        grid-column: span 2;
        min-height: auto;
    }

    /*.finops-feature-icon{
    width:34px;
    height:34px;
}

.finops-feature-icon img{
    width:34px;
    height:34px;
}
    .finops-feature-card h4 { font-size: 13px; margin-bottom: 10px; }
    .finops-feature-card p  { font-size: 11px;  line-height: 1.65; }*/
    .finops-feature-icon {
        width: 32px;
        height: 32px;
        margin-bottom: 14px;
    }

    .finops-feature-icon img {
        width: 32px;
        height: 32px;
    }

    .finops-feature-card h4 {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .finops-feature-card p {
        font-size: 11px;
        line-height: 1.65;
    }

    .kl-journey-section {
        padding: 60px 0;
    }

    .kl-journey-card {
        height: 420px;
        padding: 22px 26px;
        border-radius: 20px;
    }

    /*    . kl-card-heading { font-size: 20px; margin-bottom: 7px; }
    .kl-card-para  { font-size: 12px; max-width: 250px; }*/
    /*    .kl-cloud-svg {
        width: 55%;
        max-width: 404px;
        bottom: -16px;
        left: -12px;
    }*/
    /*    .kl-floating-svg { width: 278px; right: -20px; top: 8px; }*/
    .kl-stats {
        width: 112px;
        gap: 7px;
    }

    .kl-right-content {
        gap: 9px;
    }

    .journey-card {
        padding: 4px 5px;
        border-radius: 7px;
    }

    .journey-card small {
        font-size: 4.5px;
    }

    .journey-card h4 {
        font-size: 8.5px;
    }

    .journey-card p {
        font-size: 6.5px;
    }

    .stat-sub-text {
        font-size: 7px;
    }

    .integration-card {
        width: 166px;
        max-height: 204px;
        border-radius: 12px 12px 0 0;
    }

    .integration-header {
        padding: 6px 11px;
    }

    .integration-header span:first-child,
    .integration-header span:last-child {
        font-size: 6px;
    }

    integration-card ul li {
        padding: 4px 10px;
    }

    .integration-card li span:first-child {
        font-size: 8px;
    }

    .integration-card li span:last-child {
        font-size: 6px;
    }

    .cloud-provider {
        width: 34px;
        height: 34px;
    }

    .synops-results-section {
        padding: 52px 0;
    }

    /* 2 columns via Bootstrap col-md-6 — already set */
    .synops-result-card {
        padding: 28px 20px;
        border-radius: 16px;
    }

    /* .synops-result-card h3 { font-size: 44px; margin-bottom: 18px; }*/
    .synops-result-card h3 {
        font-size: 38px;
        margin-bottom: 18px;
    }

    .synops-result-card h5 {
        font-size: 15px;
        margin-bottom: 7px;
    }

    .synops-result-card p {
        font-size: 11.5px;
    }

    .synops-results-section .synops-ai-title {
        font-size: 24px;
    }

    .synops-results-section .synops-ai-description {
        font-size: 13px;
        margin-bottom: 32px;
    }

    .synops-ai-icon {
        width: 15px;
        height: 15px;
    }

    .synops-testimonials {
        padding: 56px 0;
    }

    .synops-ai-title {
        font-size: 28px;
    }

    .synops-ai-description {
        font-size: 13.5px;
        margin-bottom: 32px;
    }

    .testimonial-card {
        padding: 18px;
        border-radius: 15px;
    }

    .testimonial-text {
        font-size: 13px;
        line-height: 1.5;
        min-height: 88px;
    }

    .testimonial-user img {
        width: 40px;
        height: 40px;
    }

    .testimonial-user h5 {
        font-size: 12px;
    }

    .testimonial-user span {
        font-size: 10px;
    }

    .testimonial-stars i {
        font-size: 10px;
    }

    .synops-cloud-section {
        padding: 56px 0;
    }

    .synops-cloud-svg {
        max-width: 460px;
    }

    .synops-cta-section {
        padding: 60px 0;
    }

    .synops-btn-primary,
    .synops-btn-secondary {
        padding: 12px 22px;
        font-size: 11.5px;
        border-radius: 11px;
    }

    .synops-tags span {
        font-size: 11px;
        padding: 7px 12px;
    }

    .synops-tags {
        gap: 8px;
        margin-top: 32px;
    }

    .synops-strip-row .strip-logo img:first-child {
        width: 75px !important;
        height: auto !important;
    }

    .synops-strip-row .strip-logo img:last-child {
        width: 85px !important;
        height: auto !important;
    }

    .strip-text h4 {
        font-size: 17px;
    }

    .finops-platform-section .finops-chart-body {
        gap: 10px;
        height: 159px;
    }

    .finops-chart-card .finops-graph-area,
    .finops-chart-card .finops-graph-area svg {
        height: 159px;
    }

}

@media (min-width: 567px) and (max-width: 767.5px) {
    /*    .hero-glow {
        width: 114%;
        height: auto;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
    }*/
    /*    .hero-glow {
        width: 114%;
        height: 376px;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
    }*/
    /*    .hero-glow {
        width: 153%;
        height: 494px;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
    }*/
    .hero-glow {
        width: 153%;
        height: 448px;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
    }

    .trusted-companies-section {
        padding: 60px 0;
    }

    .trusted-logo-item img {
        height: 26px;
    }

    .trusted-companies-title {
        font-size: 14px;
        line-height: 1.5;
    }

    .cloud-problem-section {
        padding: 56px 0;
    }

    .badge-text {
        font-size: 12px;
    }

    .cloud-card {
        padding: 20px;
        border-radius: 14px;
    }

    .cloud-icon {
        width: 38px;
        height: 38px;
        margin-bottom: 16px;
    }

    .cloud-icon img {
        width: 18px;
        height: 18px;
    }

    .cloud-card h4 {
        font-size: 13px;
        margin-bottom: 12px;
    }

    .cloud-card p {
        font-size: 12px;
        line-height: 1.65;
    }

    .trusted-companies-section {
        padding: 50px 0 40px;
    }

    .trusted-companies-title {
        font-size: 11px;
        letter-spacing: 1.4px;
        margin-bottom: 32px;
    }

    .trusted-logo-item img {
        height: 24px;
    }

    .synops-feature-card {

        flex: 0 0 320px;

    }

    .synops-feature-card {

        flex: 0 0 280px;

        padding: 16px;

    }

    .synops-feature-content h6 {

        font-size: 15px;

    }

    .synops-feature-content p {

        font-size: 12px;

    }

    .finops-platform-dashboard {

        padding: 16px;

    }

    .finops-platform-tabs {

        gap: 8px;

    }

    .finops-platform-tab {

        font-size: 11px;

        padding: 8px 12px;

    }

    .finops-chart-header h3 {

        font-size: 30px;

    }

    /*    .finops-chart-body{

        flex-direction:column;

    }*/
    .finops-y-axis {

        display: none;

    }

    .finops-x-axis {

        margin-left: 0;

    }

    .finops-graph-area svg {

        height: 180px;

    }

    .finops-stat-box h3 {

        font-size: 26px;

    }

    .finops-capabilities-grid {

        grid-template-columns:1fr;

    }

    .finops-feature-large {

        grid-column: span 1;

    }

    .synops-body-section .synops-hero-section {
        padding: 56px 18px 10px;
    }

    .hero__logo {
        height: 28px;
        margin-bottom: 30px;
    }

    .hero__badge {
        font-size: 11px;
        padding: 7px 15px;
        gap: 7px;
        margin-bottom: 26px;
    }

    .hero__badge-icon {
        width: 14px;
        height: 14px;
    }

    .hero__heading {
        font-size: 26px;
        letter-spacing: -0.5px;
        margin-bottom: 18px;
        line-height: 1.15;
    }

    .hero__desc {
        font-size: 13px;
        line-height: 1.7;
        margin-bottom: 34px;
        max-width: 480px;
    }

    .synops-dashboard {
        grid-template-columns: 110px 1fr;
        padding: 6px;
        border-radius: 14px;
        gap: 0;
    }

    /* ── SIDEBAR ── */
    .synops-sidebar {
        height: auto;
        padding: 6px 5px;
        border-radius: 10px;
        overflow: hidden;
    }

    .synops-logo-box {
        margin-bottom: 4px;
    }

    .synops-logo-box img {
        height: 12px;
    }

    .synops-company-box {
        height: 18px;
        font-size: 6px;
        padding: 0 5px;
        border-radius: 5px;
        margin-bottom: 4px;
        gap: 3px;
    }

    .synops-company-icon,
    .synops-chevron-icon {
        width: 7px;
        height: 7px;
    }

    .synops-sidebar-nav {
        gap: 1px;
    }

    .synops-nav-item {
        height: 15px;
        font-size: 6px;
        gap: 4px;
        padding: 0 5px;
        border-radius: 5px;
    }

    .synops-nav-icon {
        width: 8px;
        height: 7px;
        flex-shrink: 0;
    }

    .synops-count {
        width: 10px;
        height: 10px;
        font-size: 5px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .synops-sidebar-footer {
        margin-top: 4px;
        padding-top: 4px;
    }

    .synops-notification-row {
        font-size: 6px;
        gap: 3px;
        margin-bottom: 4px;
    }

    .synops-dot {
        width: 4px;
        height: 4px;
    }

    .synops-user {
        gap: 4px;
    }

    .synops-user-avatar {
        width: 14px;
        height: 14px;
        font-size: 5.5px;
        flex-shrink: 0;
    }

    .synops-user h6 {
        font-size: 5.5px;
        margin: 0;
    }

    .synops-user small {
        font-size: 5px;
    }

    /* ── MAIN ── */
    .synops-main {
        padding: 12px 9px;
        min-height: auto;
        overflow: hidden;
    }

    /* ── TOPBAR ── */
    .synops-topbar {
        display: flex;
        align-items: center;
        gap: 3px;
        margin-bottom: 10px;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .synops-search-box {
        width: 137px;
        min-width: 0;
        flex-shrink: 1;
        height: 20px;
        font-size: 5px;
        padding: 0 5px;
        gap: 3px;
        border-radius: 5px;
    }

    .synops-search-icon {
        width: 7px;
        height: 7px;
        flex-shrink: 0;
    }

    .synops-pill {
        height: 20px;
        padding: 0 5px;
        font-size: 5.5px;
        border-radius: 5px;
        gap: 2px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .synops-cloud-icon,
    .synops-calendar-icon {
        width: 7px;
        height: 7px;
    }

    .synops-arrow-down-icon {
        width: 10px;
        height: 10px;
    }

    /*  .synops-flex-space { display: none; }*/
    .synops-icon-circle {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    .synops-notification-icon {
        width: 18px;
        height: 18px;
    }

    .synops-ai-btn {
        height: 20px;
        padding: 0 6px;
        font-size: 5.5px;
        border-radius: 10px;
        gap: 3px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .synops-ai-icon {
        width: 6px;
        height: 6px;
    }

    .synops-profile-box {
        font-size: 5px;
        gap: 3px;
        flex-shrink: 0;
    }

    .synops-profile-circle {
        width: 14px;
        height: 14px;
        font-size: 5px;
    }

    /* ── DASHBOARD HEADER ── */
    .synops-dashboard-head {
        margin-bottom: 4px;
    }

    .synops-dashboard-header {
        margin-bottom: 9px;
        align-items: center;
    }

    .synops-dashboard-header h2 {
        font-size: 8px;
        margin-bottom: 5px;
    }

    .synops-dashboard-header p {
        font-size: 6px;
        margin: 0;
    }

    .synops-refresh-btn {
        height: 18px;
        padding: 0 7px;
        font-size: 6px;
        border-radius: 9px;
        gap: 3px;
        flex-shrink: 0;
    }

    .synops-refresh-icon {
        width: 7px;
        height: 7px;
    }

    /* ════════════════════════
       STAT CARDS — 4 col, compact
    ════════════════════════ */
    .synops-stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
        margin-bottom: 12px;
    }

    .synops-stat-card {
        min-height: 0;
        height: 62px; /* fixed height, not min-height */
        padding: 5px 5px 0 5px;
        border-radius: 7px;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
    }

    .synops-stat-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 3px;
        gap: 2px;
        flex-wrap: nowrap;
    }

    .synops-stat-title {
        font-size: 5px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 55%;
        color: rgba(100, 116, 139, 1);
    }

    .synops-stat-badge {
        font-size: 4.5px;
        padding: 1px 3px;
        gap: 1px;
        border-radius: 20px;
        flex-shrink: 0;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
    }

    .synops-badge-icon {
        width: 5px;
        height: 5px;
    }

    /* ── Big number ── */
    .synops-stat-card h3 {
        font-size: 7px;
        font-weight: 700;
        margin-bottom: 4px;
        line-height: 1;
        white-space: nowrap;
        color: rgba(226, 232, 245, 1);
    }

    /* ── Sub label ── */
    .synops-stat-card small {
        font-size: 5px;
        display: block;
        line-height: 1.2;
        color: rgba(100, 116, 139, 1);
    }

    /* ── Mini chart pinned to bottom ── */
    .synops-mini-chart, .synops-main-chart {
        position: absolute;
        left: 4px;
        bottom: 5px;
        width: 90%;
        height: 20px;
    }

    .synops-mini-chart svg,
    .synops-main-chart svg {
        width: 100%;
        height: 20px;
        display: block;
    }

    /* ════════════════════════
       BOTTOM GRID — 2fr 1fr
    ════════════════════════ */
    .synops-bottom-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 4px;
    }

    /* Chart card */
    .synops-chart-card {
        padding: 8px 6px;
        max-height: none;
        border-radius: 7px;
        overflow: hidden;
    }

    .synops-card-header {
        margin-bottom: 7px;
    }

    .synops-card-header h5 {
        font-size: 7px;
        margin-bottom: 0;
    }

    .synops-card-header small {
        font-size: 5.5px;
    }

    .synops-chart-filter {
        height: auto;
        gap: 1px;
    }

    .synops-chart-filter span {
        font-size: 5px;
        padding: 2px 3px 0;
    }

    .synops-chart-wrapper {
        gap: 0;
    }

    .synops-chart-area {
        width: 100%;
        overflow: hidden;
    }

    .synops-chart-area svg {
        width: 100%;
        height: 70px;
    }

    .synops-chart-legend {
        font-size: 5.5px;
        gap: 6px;
        padding: 3px 4px;
        margin-top: 15px;
    }

    .legend-icon {
        width: 8px;
        height: 6px;
    }

    /* Donut card */
    .synops-donut-card {
        padding: 10px 5px;
        max-height: none;
        border-radius: 7px;
        overflow: hidden;
    }

    .synops-donut-wrapper {
        padding: 2px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .synops-donut-svg {
        width: 60px;
        height: 60px;
        flex-shrink: 0;
    }

    .synops-donut-svg svg {
        width: 60px;
        height: 60px;
    }

    .synops-legend {
        display: flex;
        flex-direction: column;
        gap: 2px;
        font-size: 5.5px;
        opacity: 1;
        width: 100%;
        margin-top: 3px;
    }

    .synops-legend div {
        display: flex;
        align-items: center;
        gap: 3px;
    }

    .synops-legend .dot {
        width: 5px;
        height: 5px;
        flex-shrink: 0;
        border-radius: 50%;
    }

    .synops-legend .pct {
        margin-left: auto;
        font-size: 5.5px;
        color: #8096b7;
        font-weight: 600;
    }

    .synops-ai-engine-section {
        padding: 48px 0;
    }

    .synops-ai-title {
        font-size: 22px;
    }

    .synops-ai-description {
        font-size: 13px;
        margin-bottom: 28px;
    }

    .synops-dashboard-wrapper {
        padding: 11px;
        border-radius: 14px;
    }

    .synops-dashboard-title {
        font-size: 12px;
    }

    .synops-dashboard-subtitle {
        font-size: 8.5px;
    }

    .synops-dashboard-status {
        font-size: 7.5px;
    }

    .synops-powered-tag {
        font-size: 7px;
        padding: 2px 6px;
    }

    /* Stat Cards — 2 per row */
    .synops-ai-stats-row .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .synops-ai-stat-card {
        padding: 9px 11px;
        min-height: 64px;
        border-radius: 10px;
    }

    .stat-label {
        font-size: 7px;
    }

    .synops-ai-stat-card h4 {
        font-size: 14px;
    }

    .stat-loss,
    .stat-profit {
        font-size: 7px;
        padding: 2px 5px;
    }

    /* Chart */
    /*  .synops-chart-svg {
        height: 180px;
    }*/
    .synops-chart-svg {
        height: 190px;
    }

    /*    .synops-chart-svg svg {
        height: 180px;
    }*/
    .synops-chart-svg svg {
        height: 224px;
    }

    .synops-chart-legend {
        font-size: 8.5px;
        gap: 14px;
    }

    .legend-svg-icon {
        width: 14px;
        height: 10px;
    }

    /* Feature Slider */
    .synops-feature-slider {
        height: 62px;
    }

    .synops-feature-card {
        width: 55%;
        height: 62px;
        min-height: 62px;
    }

    .synops-feature-icon-img {
        width: 22px;
        height: 22px;
    }

    .synops-feature-content h6 {
        font-size: 10px;
    }

    .synops-feature-content p {
        font-size: 8px;
    }

    /* Recommendation Cards */
    .synops-recommendations {
        gap: 8px;
        margin-top: 22px;
    }

    .synops-recommend-card {
        padding: 11px 13px;
        border-radius: 12px;
    }

    .recommend-top h5 {
        font-size: 10.5px;
    }

    .recommend-badge {
        font-size: 7px;
    }

    .recommend-price {
        font-size: 15px;
    }

    .recommend-note {
        font-size: 7.5px;
    }

    .recommend-btn {
        height: 23px;
        font-size: 7px;
        border-radius: 8px;
    }

    .synops-total-saving-card h2 {
        font-size: 16px;
    }

    .saving-title {
        font-size: 7px;
    }

    .finops-platform-section {
        padding: 24px 0;
    }

    .finops-platform-section .section-container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .finops-platform-section .cloud-problem-badge {
        padding: 4px 13px;
        margin-bottom: 12px;
    }

    .finops-platform-section .badge-text {
        font-size: 8px;
    }

    .finops-platform-dashboard {
        padding: 8px;
        border-radius: 11px;
    }

    .finops-platform-tabs {
        gap: 4px;
        margin-bottom: 8px;
    }

    .finops-platform-tab {
        padding: 4px 8px;
        font-size: 7px;
        border-radius: 5px;
    }

    .finops-platform-dashboard .row.g-3 > .col-lg-8 {
        padding-right: 4px !important;
    }

    .finops-platform-dashboard .row.g-3 > .col-lg-4 {
        padding-left: 4px !important;
    }

    .finops-chart-card {
        padding: 8px;
        border-radius: 10px;
    }

    .finops-chart-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 6px;
    }

    .finops-chart-header h4 {
        font-size: 7px;
        margin-bottom: 2px;
    }

    .finops-chart-header h3 {
        font-size: 14px;
        line-height: 1;
    }

    .finops-growth-badge {
        font-size: 6px;
        padding: 3px 7px;
        border-radius: 7px;
    }

    /*    .finops-chart-card svg    { height: 88px !important; }*/
    .finops-resource-card {
        padding: 8px;
        border-radius: 10px;
    }

    .finops-resource-title {
        font-size: 6.5px;
        margin-bottom: 6px;
    }

    .finops-resource-item {
        padding: 5px 7px;
        border-radius: 6px;
        margin-bottom: 4px;
    }

    .finops-resource-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 3px;
    }

    .finops-resource-header span {
        font-size: 6px;
    }

    .finops-resource-header strong {
        font-size: 6.5px;
    }

    .finops-progress {
        height: 2.5px;
        border-radius: 10px;
        margin-bottom: 3px;
    }

    .finops-resource-item small {
        font-size: 5.5px;
        display: block;
    }

    .finops-bottom-stats {
        margin-top: 10px;
        padding-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, .06);
    }

    .finops-stat-box {
        text-align: center;
        padding: 0 3px;
    }

    .finops-stat-box h3 {
        font-size: 14px;
        margin-bottom: 2px;
    }

    .finops-stat-box p {
        font-size: 6px;
        margin: 0;
    }

    .finops-capabilities-section {
        padding: 56px 0;
    }

    .finops-capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .finops-feature-large,
    .finops-capabilities-grid {
        grid-column: span 2;
        min-height: auto;
    }

    .finops-feature-card {
        padding: 14px;
        min-height: auto;
        border-radius: 12px;
    }

    /*    .finops-feature-icon{
        width:30px;
        height:30px;
        margin-bottom:14px;
    }

    .finops-feature-icon img{
        width:30px;
        height:30px;
    }
    .finops-feature-card h4 { font-size: 12px; margin-bottom: 6px; }
    .finops-feature-card p { font-size: 10px; line-height: 1.5; }*/
    .finops-feature-icon {
        width: 30px;
        height: 30px;
        margin-bottom: 12px;
    }

    .finops-feature-icon img {
        width: 30px;
        height: 30px;
    }

    .finops-feature-card h4 {
        font-size: 12px;
        margin-bottom: 8px;
    }

    .finops-feature-card p {
        font-size: 10px;
        line-height: 1.6;
    }

    .kl-journey-section {
        padding: 48px 0;
    }

    .kl-journey-card {
        height: 360px;
        padding: 18px 20px;
        border-radius: 18px;
    }

    /*    . kl-card-heading { font-size: 16px; margin-bottom: 6px; }
    .kl-card-para  { font-size: 10.5px; max-width: 192px; }*/
    /*    .kl-cloud-svg {
        width: 54%;
        max-width: 334px;
        bottom: -12px;
        left: -10px;
    }*/
    /*    .kl-cloud-svg {
        width: 54%;
        max-width: 271px;
        top: 4px;
        left: 101px;
    }*/
    /*    .kl-floating-svg { width: 236px; right: -16px; top: 6px; }*/
    .kl-stats {
        width: 96px;
        gap: 6px;
    }

    .kl-right-content {
        gap: 18px;
    }

    .journey-card {
        padding: 3px 5px;
        border-radius: 6px;
    }

    .journey-card small {
        font-size: 5px;
    }

    .journey-card h4 {
        font-size: 8.5px;
    }

    .journey-card p {
        font-size: 5.5px;
    }

    .stat-sub-text {
        font-size: 6px;
    }

    .integration-card {
        width: 125px;
        max-height: 176px;
        border-radius: 10px 10px 0 0;
        padding: 3px;
    }

    .integration-header {
        padding: 5px 9px;
    }

    .integration-header span:first-child,
    .integration-header span:last-child {
        font-size: 5.5px;
    }

    integration-card ul li {
        padding: 3px 8px;
    }

    .integration-card li span:first-child {
        font-size: 7px;
    }

    .integration-card li span:last-child {
        font-size: 5.5px;
    }

    .cloud-provider {
        width: 28px;
        height: 28px;
    }

    .journey-card {
        margin-bottom: 0px;
    }

    .integration-card ul li {
        padding: 6px 4px;
    }

    /*    .kl-floating-svg {
        width: 189px;
        right: -18px;
        top: -46px;
    }*/
    .synops-results-section {
        padding: 44px 0;
    }

    .synops-result-card {
        padding: 24px 18px;
        border-radius: 15px;
    }

    /*    .synops-result-card h3 { font-size: 40px; margin-bottom: 16px; }*/
    .synops-result-card h3 {
        font-size: 34px;
        margin-bottom: 16px;
    }

    .synops-result-card h5 {
        font-size: 14px;
        margin-bottom: 6px;
        line-height: 1.3;
    }

    .synops-result-card p {
        font-size: 11px;
    }

    .synops-ai-icon {
        width: 14px;
        height: 14px;
    }

    .synops-testimonials {
        padding: 48px 0;
    }

    .synops-ai-title {
        font-size: 24px;
    }

    .synops-ai-description {
        font-size: 13px;
        margin-bottom: 28px;
    }

    .testimonial-card {
        padding: 18px;
        border-radius: 15px;
    }

    .testimonial-text {
        font-size: 13px;
        line-height: 1.5;
        min-height: auto;
    }

    .testimonial-user img {
        width: 40px;
        height: 40px;
    }

    .testimonial-user h5 {
        font-size: 12.5px;
    }

    .testimonial-user span {
        font-size: 10px;
    }

    .testimonial-stars i {
        font-size: 10px;
    }

    .synops-cloud-section {
        padding: 48px 0;
    }

    .synops-cloud-svg {
        max-width: 420px;
    }

    .synops-cta-section {
        padding: 50px 0;
    }

    .synops-btn-primary,
    .synops-btn-secondary {
        padding: 11px 20px;
        font-size: 11px;
        border-radius: 10px;
    }

    .btn-content {
        gap: 8px;
    }

    .synops-tags span {
        font-size: 10.5px;
        padding: 7px 11px;
    }

    .synops-tags {
        gap: 8px;
        margin-top: 28px;
    }

    .synops-strip-row .strip-logo img:first-child {
        width: 55px !important;
        height: auto !important;
    }

    .synops-strip-row .strip-logo img:last-child {
        width: 70px !important;
        height: auto !important;
    }

    .strip-text h4 {
        font-size: 15px;
    }

    .strip-logo {
        padding-left: 0px;

    }

    .finops-platform-section .finops-chart-body {
        gap: 10px;
        height: 105px;
    }

    .finops-chart-card .finops-graph-area,
    .finops-chart-card .finops-graph-area svg {
        height: 105px;
    }
}

@media (min-width: 480px) and (max-width: 566.5px) {

    /*    .hero-glow {
        width: 123%;
        height: auto;
        left: 50%;
        top: -4px;
        transform: translateX(-50%);
    }*/
    /*    .hero-glow {
        width: 123%;
        height: 320px;
        left: 50%;
        top: -4px;
        transform: translateX(-50%);
    }*/
    /*    .hero-glow {
        width: 123%;
        height: 351px;
        left: 50%;
        top: -4px;
        transform: translateX(-50%);
    }*/
    /*    .hero-glow {
        width: 166%;
        height: 438px;
        left: 50%;
        top: 0px;
        transform: translateX(-50%);
    }*/
    .hero-glow {
        width: 166%;
        height: 465px;
        left: 50%;
        top: 0px;
        transform: translateX(-50%);
    }

    .cloud-card {
        padding: 20px;
    }

    .synops-chart-wrapper {

        flex-direction: column;

    }

    .synops-stats-grid {

        grid-template-columns:1fr;

    }

    .cloud-problem-section {
        padding: 52px 0;
    }

    .badge-text {
        font-size: 11px;
    }

    .cloud-card {
        padding: 18px;
        border-radius: 14px;
    }

    .cloud-icon {
        width: 38px;
        height: 38px;
        margin-bottom: 16px;
    }

    .cloud-icon img {
        width: 18px;
        height: 18px;
    }

    .cloud-card h4 {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .cloud-card p {
        font-size: 11.5px;
        line-height: 1.65;
    }

    .trusted-companies-section {
        padding: 44px 0 36px;
    }

    .trusted-companies-title {
        font-size: 10px;
        letter-spacing: 1.2px;
        margin-bottom: 28px;
    }

    .trusted-logo-item img {
        height: 22px;
    }

    .synops-feature-card {

        flex: 0 0 250px;

    }

    .finops-platform-section {

        padding: 70px 0;

    }

    .finops-platform-badge {

        font-size: 10px;

    }

    .finops-chart-header h3 {

        font-size: 26px;

    }

    .finops-resource-item {

        padding: 10px;

    }

    .finops-stat-box {

        padding: 10px 0;

    }


    .finops-feature-card {

        min-height: auto;

    }

    .finops-capabilities-section {

        padding: 70px 0;

    }

    .finops-feature-card {

        min-height: auto;

    }

    .synops-body-section .synops-hero-section {
        padding: 50px 16px 10px;
    }

    .hero__logo {
        height: 26px;
        margin-bottom: 26px;
    }

    .hero__badge {
        font-size: 10px;
        padding: 7px 13px;
        gap: 7px;
        margin-bottom: 24px;
    }

    .hero__badge-icon {
        width: 13px;
        height: 13px;
    }

    .hero__heading {
        font-size: 23px;
        letter-spacing: -0.4px;
        margin-bottom: 16px;
        line-height: 1.18;
    }

    .hero__desc {
        font-size: 12.5px;
        line-height: 1.68;
        margin-bottom: 30px;
        max-width: 420px;
    }

    /* ══════════════════════════════════
       DASHBOARD WRAPPER
    ══════════════════════════════════ */
    .synops-dashboard {
        grid-template-columns: 90px 1fr;
        padding: 5px;
        border-radius: 12px;
        gap: 0;
    }

    /* ══════════════════════════════════
       SIDEBAR
    ══════════════════════════════════ */
    .synops-sidebar {
        height: auto;
        padding: 5px 4px;
        border-radius: 8px;
        overflow: hidden;
    }

    .synops-logo-box {
        margin-bottom: 3px;
    }

    .synops-logo-box img {
        height: 10px;
    }

    .synops-company-box {
        height: 16px;
        font-size: 5.5px;
        padding: 0 4px;
        border-radius: 4px;
        margin-bottom: 3px;
        gap: 2px;
    }

    .synops-company-icon,
    .synops-chevron-icon {
        width: 6px;
        height: 6px;
    }

    .synops-sidebar-nav {
        gap: 0px;
    }

    .synops-nav-item {
        height: 13px;
        font-size: 5.5px;
        gap: 3px;
        padding: 0 4px;
        border-radius: 4px;
    }

    .synops-nav-icon {
        width: 7px;
        height: 6px;
        flex-shrink: 0;
    }

    .synops-count {
        width: 9px;
        height: 9px;
        font-size: 4.5px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .synops-sidebar-footer {
        margin-top: 3px;
        padding-top: 3px;
    }

    .synops-notification-row {
        font-size: 5.5px;
        gap: 2px;
        margin-bottom: 3px;
    }

    .synops-dot {
        width: 3px;
        height: 3px;
    }

    .synops-user {
        gap: 3px;
    }

    .synops-user-avatar {
        width: 12px;
        height: 12px;
        font-size: 5px;
        flex-shrink: 0;
    }

    .synops-user h6 {
        font-size: 5px;
        margin: 0;
    }

    .synops-user small {
        font-size: 4.5px;
    }

    /* ══════════════════════════════════
       MAIN AREA
    ══════════════════════════════════ */
    .synops-main {
        padding: 10px 7px;
        min-height: auto;
        overflow: hidden;
    }

    /* ══════════════════════════════════
       TOPBAR
    ══════════════════════════════════ */
    .synops-topbar {
        display: flex;
        align-items: center;
        gap: 2px;
        margin-bottom: 8px;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .synops-search-box {
        width: 115px;
        min-width: 0;
        flex-shrink: 1;
        height: 18px;
        font-size: 4.5px;
        padding: 0 4px;
        gap: 2px;
        border-radius: 4px;
    }

    .synops-search-icon {
        width: 6px;
        height: 6px;
        flex-shrink: 0;
    }

    .synops-pill {
        height: 18px;
        padding: 0 4px;
        font-size: 5px;
        border-radius: 4px;
        gap: 2px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .synops-cloud-icon,
    .synops-calendar-icon {
        width: 6px;
        height: 6px;
    }

    .synops-arrow-down-icon {
        width: 8px;
        height: 8px;
    }

    /*    .synops-flex-space { display: none; }*/
    .synops-icon-circle {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    .synops-notification-icon {
        width: 16px;
        height: 16px;
    }

    .synops-ai-btn {
        height: 18px;
        padding: 0 5px;
        font-size: 5px;
        border-radius: 9px;
        gap: 2px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .synops-ai-icon {
        width: 5px;
        height: 5px;
    }

    .synops-profile-box {
        font-size: 4.5px;
        gap: 2px;
        flex-shrink: 0;
    }

    .synops-profile-circle {
        width: 12px;
        height: 12px;
        font-size: 4.5px;
    }

    /* ══════════════════════════════════
       DASHBOARD HEADER
    ══════════════════════════════════ */
    .synops-dashboard-head {
        margin-bottom: 3px;
    }

    .synops-dashboard-header {
        margin-bottom: 7px;
        align-items: center;
    }

    .synops-dashboard-header h2 {
        font-size: 7px;
        margin-bottom: 4px;
    }

    .synops-dashboard-header p {
        font-size: 5.5px;
        margin: 0;
    }

    .synops-refresh-btn {
        height: 16px;
        padding: 0 6px;
        font-size: 5.5px;
        border-radius: 8px;
        gap: 2px;
        flex-shrink: 0;
    }

    .synops-refresh-icon {
        width: 6px;
        height: 6px;
    }

    /* ══════════════════════════════════
       STAT CARDS — 4 columns
    ══════════════════════════════════ */
    .synops-stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 3px;
        margin-bottom: 10px;
    }

    .synops-stat-card {
        min-height: 0;
        height: 54px;
        padding: 4px 4px 0 4px;
        border-radius: 6px;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
    }

    .synops-stat-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 2px;
        gap: 1px;
        flex-wrap: nowrap;
    }

    .synops-stat-title {
        font-size: 4.5px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 55%;
        color: rgba(100, 116, 139, 1);
    }

    .synops-stat-badge {
        font-size: 4px;
        padding: 1px 2px;
        gap: 1px;
        border-radius: 20px;
        flex-shrink: 0;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
    }

    .synops-badge-icon {
        width: 4px;
        height: 4px;
    }

    .synops-stat-card h3 {
        font-size: 8px;
        font-weight: 700;
        margin-bottom: 3px;
        line-height: 1;
        white-space: nowrap;
        color: rgba(226, 232, 245, 1);
    }

    .synops-stat-card small {
        font-size: 4.5px;
        display: block;
        line-height: 1.2;
        color: rgba(100, 116, 139, 1);
    }

    .synops-mini-chart,
    .synops-main-chart {
        position: absolute;
        left: 3px;
        bottom: 4px;
        width: 90%;
        height: 16px;
    }

    .synops-mini-chart svg,
    .synops-main-chart svg {
        width: 100%;
        height: 16px;
        display: block;
    }

    /* ══════════════════════════════════
       BOTTOM GRID — 2fr 1fr
    ══════════════════════════════════ */
    .synops-bottom-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 3px;
    }

    /* Chart card */
    .synops-chart-card {
        padding: 6px 5px;
        max-height: none;
        border-radius: 6px;
        overflow: hidden;
    }

    .synops-card-header {
        margin-bottom: 5px;
    }

    .synops-card-header h5 {
        font-size: 6.5px;
        margin-bottom: 0;
    }

    .synops-card-header small {
        font-size: 5px;
    }

    .synops-chart-filter {
        height: auto;
        gap: 1px;
    }

    .synops-chart-filter span {
        font-size: 4.5px;
        padding: 2px 2px 0;
    }

    .synops-chart-wrapper {
        gap: 0;
    }

    .synops-chart-area {
        width: 100%;
        overflow: hidden;
    }

    .synops-chart-area svg {
        width: 100%;
        height: 58px;
    }

    .synops-chart-legend {
        font-size: 5px;
        gap: 5px;
        padding: 2px 3px;
        margin-top: 12px;
    }

    .legend-icon {
        width: 7px;
        height: 5px;
    }

    /* Donut card */
    .synops-donut-card {
        padding: 8px 4px;
        max-height: none;
        border-radius: 6px;
        overflow: hidden;
    }

    .synops-donut-wrapper {
        padding: 2px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .synops-donut-svg {
        width: 50px;
        height: 50px;
        flex-shrink: 0;
    }

    .synops-donut-svg svg {
        width: 50px;
        height: 50px;
    }

    .synops-legend {
        display: flex;
        flex-direction: column;
        gap: 2px;
        font-size: 5px;
        opacity: 1;
        width: 100%;
        margin-top: 3px;
    }

    .synops-legend div {
        display: flex;
        align-items: center;
        gap: 2px;
    }

    .synops-legend .dot {
        width: 4px;
        height: 4px;
        flex-shrink: 0;
        border-radius: 50%;
    }

    .synops-legend .pct {
        margin-left: auto;
        font-size: 5px;
        color: #8096b7;
        font-weight: 600;
    }

    .synops-ai-engine-section {
        padding: 40px 0;
    }

    .synops-ai-title {
        font-size: 19px;
    }

    .synops-ai-description {
        font-size: 12px;
        margin-bottom: 24px;
    }

    .synops-dashboard-wrapper {
        padding: 10px;
        border-radius: 12px;
    }

    .synops-dashboard-title {
        font-size: 11.5px;
    }

    .synops-dashboard-subtitle {
        font-size: 8px;
    }

    .synops-dashboard-status {
        font-size: 7px;
    }

    .synops-powered-tag {
        font-size: 6.5px;
        padding: 2px 5px;
    }

    .synops-powered-tag {
        border-radius: 9px;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Stat Cards — 2 per row */
    .synops-ai-stats-row .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .synops-ai-stat-card {
        padding: 8px 10px;
        min-height: 60px;
        border-radius: 10px;
    }

    .stat-label {
        font-size: 6.5px;
    }

    .synops-ai-stat-card h4 {
        font-size: 13px;
    }

    .stat-loss,
    .stat-profit {
        font-size: 6.5px;
        padding: 2px 5px;
    }

    /* Chart */
    .synops-chart-svg {
        height: 150px;
    }

    /*    .synops-chart-svg svg {
        height: 150px;
    }*/
    .synops-chart-svg svg {
        height: 176px;
    }

    .synops-chart-legend {
        font-size: 8px;
        gap: 12px;
        flex-wrap: wrap;
    }

    .legend-svg-icon {
        width: 13px;
        height: 9px;
    }

    /* Feature Slider */
    .synops-feature-slider {
        height: 62px;
    }

    .synops-feature-card {
        width: 100%;
        height: 62px;
        min-height: 62px;
    }

    .synops-feature-icon-img {
        width: 20px;
        height: 20px;
    }

    .synops-feature-content h6 {
        font-size: 9px;
    }

    .synops-feature-content p {
        font-size: 7.5px;
    }

    /* Recommendation Cards */
    .synops-recommendations {
        gap: 7px;
        margin-top: 20px;
    }

    .synops-recommend-card {
        padding: 10px 12px;
        border-radius: 11px;
    }

    .recommend-top h5 {
        font-size: 10px;
    }

    .recommend-badge {
        font-size: 7px;
    }

    .recommend-price {
        font-size: 14px;
    }

    .recommend-btn {
        height: 22px;
        font-size: 6.5px;
        border-radius: 7px;
    }

    .synops-total-saving-card h2 {
        font-size: 15px;
    }

    .saving-title {
        font-size: 6.5px;
    }

    .finops-platform-section {
        padding: 20px 0;
    }

    .finops-platform-section .section-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /*    .finops-platform-section .synops-ai-title       { font-size: 16px; margin-bottom: 4px; }
    .finops-platform-section .synops-ai-description { font-size: 10px; margin-bottom: 12px; }*/
    .finops-platform-section .cloud-problem-badge {
        padding: 4px 11px;
        margin-bottom: 10px;
    }

    .finops-platform-section .badge-text {
        font-size: 7.5px;
    }

    .finops-platform-dashboard {
        padding: 7px;
        border-radius: 10px;
    }

    .finops-platform-tabs {
        gap: 3px;
        margin-bottom: 7px;
    }

    .finops-platform-tab {
        padding: 3px 7px;
        font-size: 6.5px;
        border-radius: 5px;
    }

    .finops-platform-dashboard .row.g-3 > .col-lg-8 {
        padding-right: 4px !important;
    }

    .finops-platform-dashboard .row.g-3 > .col-lg-4 {
        padding-left: 4px !important;
    }

    .finops-chart-card {
        padding: 7px;
        border-radius: 9px;
    }

    .finops-chart-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 5px;
    }

    .finops-chart-header h4 {
        font-size: 6px;
        margin-bottom: 1px;
    }

    .finops-chart-header h3 {
        font-size: 12px;
        line-height: 1;
    }

    .finops-growth-badge {
        font-size: 5.5px;
        padding: 2px 6px;
        border-radius: 6px;
    }

    /*    .finops-chart-card svg    { height: 76px !important; }*/
    .finops-resource-card {
        padding: 7px;
        border-radius: 9px;
    }

    .finops-resource-title {
        font-size: 6px;
        margin-bottom: 5px;
    }

    .finops-resource-item {
        padding: 4px 6px;
        border-radius: 5px;
        margin-bottom: 3px;
    }

    .finops-resource-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2px;
    }

    .finops-resource-header span {
        font-size: 5.5px;
    }

    .finops-resource-header strong {
        font-size: 6px;
    }

    .finops-progress {
        height: 2px;
        border-radius: 10px;
        margin-bottom: 2px;
    }

    .finops-resource-item small {
        font-size: 5px;
        display: block;
    }

    .finops-bottom-stats {
        margin-top: 8px;
        padding-top: 7px;
        border-top: 1px solid rgba(255, 255, 255, .06);
    }

    .finops-stat-box {
        text-align: center;
        padding: 0 2px;
    }

    .finops-stat-box h3 {
        font-size: 12px;
        margin-bottom: 2px;
    }

    .finops-stat-box p {
        font-size: 5.5px;
        margin: 0;
    }

    .finops-capabilities-section {
        padding: 48px 0;
    }

    .finops-capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .finops-feature-large,
    .finops-capabilities-grid {
        grid-column: span 2;
        min-height: auto;
    }

    .finops-feature-card {
        padding: 14px;
        min-height: auto;
        border-radius: 11px;
    }

    /*    .finops-feature-icon { width: 28px; height: 28px; margin-bottom: 11px; }
    .finops-feature-icon img { width: 14px; height: 14px; }
    .finops-feature-card h4 { font-size: 11px; margin-bottom: 7px; }
    .finops-feature-card p { font-size: 9px; line-height: 1.58; }*/
    .finops-feature-icon {
        width: 28px;
        height: 28px;
        margin-bottom: 11px;
    }

    .finops-feature-icon img {
        width: 28px;
        height: 28px;
    }

    .finops-feature-card h4 {
        font-size: 11px;
        margin-bottom: 7px;
    }

    .finops-feature-card p {
        font-size: 9px;
        line-height: 1.58;
    }


    .kl-journey-section {
        padding: 38px 0;
    }

    .kl-journey-card {
        height: 300px;
        padding: 15px 17px;
        border-radius: 16px;
    }

    /*    . kl-card-heading { font-size: 14px; margin-bottom: 5px; }
    .kl-card-para  { font-size: 9.5px; max-width: 160px; }*/
    /*    .kl-cloud-svg {
        width: 53%;
        max-width: 272px;
        bottom: -10px;
        left: -8px;
    }*/
    /*    .kl-cloud-svg {
        width: 53%;
        max-width: 201px;
        bottom: -310px;
        left: 22px;
    }*/
    /*    .kl-floating-svg { width: 196px; right: -12px; top: 5px; }*/
    /*    .kl-floating-svg {
        width: 161px;
        right: -12px;
        top: -50px;
    }*/
    .kl-stats {
        width: 82px;
        gap: 5px;
    }

    .kl-right-content {
        gap: 8px;
    }

    .journey-card {
        padding: 3px 4px;
        border-radius: 5px;
    }

    .journey-card small {
        font-size: 3.5px;
    }

    .journey-card h4 {
        font-size: 6.5px;
    }

    .journey-card p {
        font-size: 5px;
    }

    .stat-sub-text {
        font-size: 5px;
    }

    .integration-card {
        width: 127px;
        max-height: 152px;
        border-radius: 9px 9px 0 0;
        padding: 2px;
    }

    .integration-header {
        padding: 4px 8px;
    }

    .integration-header span:first-child,
    .integration-header span:last-child {
        font-size: 5px;
    }

    .integration-card ul li {
        padding: 3px 7px;
    }

    .integration-card li span:first-child {
        font-size: 6.5px;
    }

    .integration-card li span:last-child {
        font-size: 5px;
    }

    .cloud-provider {
        width: 24px;
        height: 24px;
    }

    .synops-results-section {
        padding: 38px 0;
    }

    .synops-result-card {
        padding: 22px 16px;
        border-radius: 14px;
    }

    /*    .synops-result-card h3 { font-size: 36px; margin-bottom: 14px; }*/
    .synops-result-card h3 {
        font-size: 30px;
        margin-bottom: 15px;
    }

    .synops-result-card h5 {
        font-size: 13px;
        margin-bottom: 6px;
        line-height: 1.3;
    }

    .synops-result-card p {
        font-size: 10.5px;
    }

    .synops-results-section .synops-ai-title {
        font-size: 20px;
    }

    .synops-results-section .synops-ai-description {
        font-size: 12px;
        margin-bottom: 26px;
    }

    .synops-ai-icon {
        width: 14px;
        height: 14px;
    }

    .synops-testimonials {
        padding: 40px 0;
    }

    .synops-ai-title {
        font-size: 22px;
    }

    .synops-ai-description {
        font-size: 12.5px;
        margin-bottom: 24px;
    }

    .testimonial-card {
        padding: 16px;
        border-radius: 14px;
    }

    .testimonial-text {
        font-size: 12.5px;
        line-height: 1.48;
        min-height: auto;
    }

    .testimonial-user img {
        width: 38px;
        height: 38px;
    }

    .testimonial-user h5 {
        font-size: 12px;
    }

    .testimonial-user span {
        font-size: 9.5px;
    }

    .testimonial-stars i {
        font-size: 10px;
    }

    .synops-cloud-section {
        padding: 40px 0;
    }

    .synops-cloud-svg {
        max-width: 360px;
    }

    .synops-cta-section {
        padding: 42px 0;
    }

    /*    .synops-btn-primary,
    .synops-btn-secondary {
        padding: 11px 18px;
        font-size: 11px;
        border-radius: 10px;
        width: 100%;
        justify-content: center;
    }*/
    .synops-btn-primary, .synops-btn-secondary {
        padding: 11px 18px;
        font-size: 11px;
        border-radius: 10px;
        width: 42%;
        justify-content: center;
    }

    /*    .d-flex.justify-content-center.flex-wrap.gap-3.mt-4 {
        flex-direction: column;
        align-items: center;
        gap: 12px !important;
    }*/
    .btn-content {
        gap: 8px;
    }

    .synops-tags span {
        font-size: 10px;
        padding: 6px 11px;
    }

    .synops-tags {
        gap: 7px;
        margin-top: 24px;
    }

    .finops-platform-section .finops-chart-body {

        gap: 8px;

        height: 95px;

    }

    .finops-chart-card .finops-graph-area,
    .finops-chart-card .finops-graph-area svg {

        height: 95px;

    }
}

@media (min-width: 320px) and (max-width: 479.5px) {
    .synops-dashboard-img-fallback {
        border-radius: 12px;
        margin-top: 0px;
    }

    /*    .hero-glow {
        width: 160%;
        height: auto;
        left: 50%;
        top: -4px;
        transform: translateX(-50%);
    }*/
    /*   .hero-glow {
        width: 160%;
        height: 288px;
        left: 50%;
        top: -4px;
        transform: translateX(-50%);
    }*/
    /*    .hero-glow {
        width: 283%;
        height: 457px;
        left: 50%;
        top: -4px;
        transform: translateX(-50%);
    }*/
    .hero-glow {
        width: 314%;
        height: 490px;
        left: 50%;
        top: -4px;
        transform: translateX(-50%);
    }

    .trusted-logo-item img {
        height: 24px;
    }

    .cloud-problem-section {
        padding: 48px 0;
    }

    .badge-text {
        font-size: 11px;
    }

    .cloud-card {
        padding: 18px 16px;
        border-radius: 13px;
    }

    .synops-ai-title {
        font-size: 13.4px;
    }

    .cloud-icon {
        width: 36px;
        height: 36px;
        margin-bottom: 14px;
        display: flex;
        /*        margin: 0 auto 20px;*/
        justify-content: center;
        align-items: center;
    }

    .cloud-icon img {
        width: 17px;
        height: 17px;

    }

    .cloud-card h4 {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .cloud-card p {
        font-size: 11.5px;
        line-height: 1.65;
    }

    .trusted-companies-section {
        padding: 40px 0 32px;
    }

    .trusted-companies-title {
        font-size: 9px;
        letter-spacing: 1.1px;
        margin-bottom: 26px;
        line-height: 1.6;
    }

    /*    .trusted-logo-item img {
        height: 20px;
    }*/
    .synops-feature-card {

        flex: 0 0 250px;

    }

    .synops-body-section .synops-hero-section {
        padding: 20px 14px 10px;
        background-position: center center;
    }

    .hero__logo {
        height: 24px;
        margin-bottom: 24px;
    }

    .hero__badge {
        font-size: 10px;
        padding: 6px 12px;
        gap: 6px;
        margin-bottom: 10px;
    }

    .hero__badge-icon {
        width: 13px;
        height: 13px;
    }

    .hero__heading {
        font-size: 21px;
        letter-spacing: -0.3px;
        margin-bottom: 14px;
        line-height: 1.18;
    }

    .hero__desc {
        font-size: 12px;
        line-height: 1.65;
        margin-bottom: 28px;
        max-width: 100%;
    }

    /* DASHBOARD WRAPPER */
    .synops-dashboard {
        grid-template-columns: 80px 1fr;
        padding: 4px;
        border-radius: 10px;
        gap: 0;
    }

    /* SIDEBAR */
    .synops-sidebar {
        height: auto;
        padding: 4px 3px;
        border-radius: 7px;
        overflow: hidden;
    }

    .synops-logo-box {
        margin-bottom: 3px;
    }

    .synops-logo-box img {
        height: 9px;
    }

    .synops-company-box {
        height: 14px;
        font-size: 5px;
        padding: 0 3px;
        border-radius: 3px;
        margin-bottom: 3px;
        gap: 2px;
    }

    .synops-company-icon,
    .synops-chevron-icon {
        width: 5px;
        height: 5px;
    }

    .synops-sidebar-nav {
        gap: 0px;
    }

    .synops-nav-item {
        height: 12px;
        font-size: 5px;
        gap: 3px;
        padding: 0 3px;
        border-radius: 3px;
    }

    .synops-nav-icon {
        width: 6px;
        height: 5px;
        flex-shrink: 0;
    }

    .synops-count {
        width: 8px;
        height: 8px;
        font-size: 4px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .synops-sidebar-footer {
        margin-top: 3px;
        padding-top: 3px;
    }

    .synops-notification-row {
        font-size: 5px;
        gap: 2px;
        margin-bottom: 3px;
    }

    .synops-dot {
        width: 3px;
        height: 3px;
    }

    .synops-user {
        gap: 3px;
    }

    .synops-user-avatar {
        width: 11px;
        height: 11px;
        font-size: 4.5px;
        flex-shrink: 0;
    }

    .synops-user h6 {
        font-size: 4.5px;
        margin: 0;
    }

    .synops-user small {
        font-size: 4px;
    }

    /* MAIN */
    .synops-main {
        padding: 8px 5px;
        min-height: auto;
        overflow: hidden;
    }

    /* TOPBAR */
    .synops-topbar {
        display: flex;
        align-items: center;
        gap: 2px;
        margin-bottom: 6px;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .synops-search-box {
        width: 70px;
        min-width: 0;
        flex-shrink: 1;
        height: 16px;
        font-size: 4px;
        padding: 0 4px;
        gap: 2px;
        border-radius: 3px;
    }

    .synops-search-icon {
        width: 5px;
        height: 5px;
        flex-shrink: 0;
    }

    .synops-pill {
        height: 16px;
        padding: 0 3px;
        font-size: 4.5px;
        border-radius: 3px;
        gap: 1px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .synops-cloud-icon,
    .synops-calendar-icon {
        width: 5px;
        height: 5px;
    }

    .synops-arrow-down-icon {
        width: 7px;
        height: 7px;
    }

    .synops-flex-space {
        display: none;
    }

    .synops-icon-circle {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    .synops-notification-icon {
        width: 14px;
        height: 14px;
    }

    .synops-ai-btn {
        height: 16px;
        padding: 0 4px;
        font-size: 4.5px;
        border-radius: 8px;
        gap: 2px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .synops-ai-icon {
        width: 4px;
        height: 4px;
    }

    .synops-profile-box {
        font-size: 4px;
        gap: 2px;
        flex-shrink: 0;
    }

    .synops-profile-circle {
        width: 11px;
        height: 11px;
        font-size: 4px;
    }

    /* DASHBOARD HEADER */
    .synops-dashboard-head {
        margin-bottom: 10px;
    }

    .synops-dashboard-header {
        margin-bottom: 5px;
        align-items: center;
    }

    .synops-dashboard-header h2 {
        font-size: 6.5px;
        margin-bottom: 2px;
    }

    .synops-dashboard-header p {
        font-size: 5px;
        margin: 0;
    }

    .synops-refresh-btn {
        height: 14px;
        padding: 0 5px;
        font-size: 5px;
        border-radius: 7px;
        gap: 2px;
        flex-shrink: 0;
    }

    .synops-refresh-icon {
        width: 5px;
        height: 5px;
    }

    /* STAT CARDS — 4 columns */
    .synops-stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 3px;
        margin-bottom: 8px;
    }

    .synops-stat-card {
        min-height: 0;
        height: 48px;
        padding: 4px 3px 0 3px;
        border-radius: 5px;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
    }

    .synops-stat-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 2px;
        gap: 1px;
        flex-wrap: nowrap;
    }

    .synops-stat-title {
        font-size: 4px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 55%;
        color: rgba(100, 116, 139, 1);
    }

    .synops-stat-badge {
        font-size: 3.5px;
        padding: 1px 2px;
        gap: 1px;
        border-radius: 20px;
        flex-shrink: 0;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
    }

    .synops-badge-icon {
        width: 3.5px;
        height: 3.5px;
    }

    .synops-stat-card h3 {
        font-size: 7px;
        font-weight: 700;
        margin-bottom: 2px;
        line-height: 1;
        white-space: nowrap;
        color: rgba(226, 232, 245, 1);
    }

    .synops-stat-card small {
        font-size: 4px;
        display: block;
        line-height: 1.2;
        color: rgba(100, 116, 139, 1);
    }

    .synops-mini-chart,
    .synops-main-chart {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 14px;
    }

    .synops-mini-chart svg,
    .synops-main-chart svg {
        width: 100%;
        height: 14px;
        display: block;
    }

    /* BOTTOM GRID */
    .synops-bottom-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 3px;
    }

    /* Chart card */
    .synops-chart-card {
        padding: 5px 4px;
        max-height: none;
        border-radius: 5px;
        overflow: hidden;
    }

    .synops-card-header {
        margin-bottom: 3px;
    }

    .synops-card-header h5 {
        font-size: 6px;
        margin-bottom: 0;
    }

    .synops-card-header small {
        font-size: 4.5px;
    }

    .synops-chart-filter {
        height: auto;
        gap: 1px;
    }

    .synops-chart-filter span {
        font-size: 4px;
        padding: 1px 2px 0;
    }

    .synops-chart-wrapper {
        gap: 0;
    }

    .synops-chart-area {
        width: 100%;
        overflow: hidden;
    }

    .synops-chart-area svg {
        width: 100%;
        height: 50px;
    }

    .synops-chart-legend {
        font-size: 4.5px;
        gap: 5px;
        padding: 2px 3px;
        margin-top: 8px;
    }

    .legend-icon {
        width: 6px;
        height: 5px;
    }

    /* Donut card */
    .synops-donut-card {
        padding: 5px 3px;
        max-height: none;
        border-radius: 5px;
        overflow: hidden;
    }

    .synops-donut-wrapper {
        padding: 1px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .synops-donut-svg {
        width: 42px;
        height: 42px;
        flex-shrink: 0;
    }

    .synops-donut-svg svg {
        width: 42px;
        height: 42px;
    }

    .synops-legend {
        display: flex;
        flex-direction: column;
        gap: 1px;
        font-size: 4.5px;
        opacity: 1;
        width: 100%;
        margin-top: 3px;
    }

    .synops-legend div {
        display: flex;
        align-items: center;
        gap: 2px;
    }

    .synops-legend .dot {
        width: 4px;
        height: 4px;
        flex-shrink: 0;
        border-radius: 50%;
    }

    .synops-legend .pct {
        margin-left: auto;
        font-size: 4.5px;
        color: #8096b7;
        font-weight: 600;
    }


    .synops-ai-engine-section {
        padding: 36px 0;
    }

    .synops-ai-title {
        font-size: 17px;
        line-height: 1.2;
    }

    .synops-ai-description {
        font-size: 11.5px;
        margin-bottom: 22px;
    }

    .synops-dashboard-wrapper {
        padding: 9px;
        border-radius: 11px;
    }

    .synops-dashboard-title {
        font-size: 11px;
    }

    .synops-dashboard-subtitle {
        font-size: 7.5px;
        max-width: 100%;
    }

    .synops-dashboard-status {
        font-size: 6.5px;
        gap: 4px;
    }

    .synops-live-dot {
        width: 5px;
        height: 5px;
    }

    .synops-powered-tag {
        font-size: 6px;
        padding: 1px 5px;
    }

    .synops-powered-tag {
        border-radius: 9px;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Stat Cards */
    .synops-ai-stats-row .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .synops-ai-stat-card {
        padding: 7px 9px;
        min-height: 56px;
        border-radius: 9px;
    }

    .stat-icon-box {
        width: 17px;
        height: 17px;
    }

    .stat-label {
        font-size: 6px;
        letter-spacing: 0.4px;
    }

    .synops-ai-stat-card h4 {
        font-size: 12px;
    }

    .stat-loss,
    .stat-profit {
        font-size: 6px;
        padding: 2px 4px;
    }

    /* Chart */
    .synops-chart-svg {
        height: 130px;
    }

    .synops-chart-svg svg {
        height: 130px;
    }

    .synops-chart-legend {
        font-size: 7.5px;
        gap: 10px;
        padding: 4px 6px;
        flex-wrap: wrap;
    }

    .legend-item {
        font-size: 7.5px;
        gap: 4px;
    }

    .legend-svg-icon {
        width: 13px;
        height: 9px;
    }

    /* Feature Slider */
    .synops-feature-slider {
        height: 60px;
        margin-top: 6px;
    }

    .synops-feature-card {
        width: 75%;
        padding: 7px 9px;
        border-radius: 9px;
        height: 60px;
        min-height: 60px;
    }

    .synops-feature-icon-img {
        width: 20px;
        height: 20px;
    }

    .synops-feature-content h6 {
        font-size: 8.5px;
        margin-bottom: 1px;
    }

    .synops-feature-content p {
        font-size: 7.5px;
        line-height: 1.25;
    }

    .synops-feature-arrow-img {
        width: 6px;
        height: 6px;
    }

    /* Recommendation Cards */
    .synops-recommendations {
        gap: 7px;
        margin-top: 18px;
    }

    .synops-ai-recommendation-label {
        font-size: 7.5px;
        margin-bottom: 6px;
    }

    .synops-recommend-card {
        padding: 9px 11px;
        border-radius: 11px;
    }

    .recommend-top h5 {
        font-size: 9.5px;
    }

    .recommend-badge {
        font-size: 6.5px;
        padding: 2px 5px;
    }

    .recommend-label {
        font-size: 6.5px;
    }

    .recommend-price {
        font-size: 14px;
        margin-bottom: 6px;
    }

    .recommend-month {
        font-size: 8.5px;
    }

    .recommend-ai-tag {
        font-size: 6px;
        height: 12px;
        min-width: 15px;
    }

    .recommend-note {
        font-size: 7px;
    }

    .recommend-btn {
        height: 22px;
        font-size: 6px;
        border-radius: 7px;
        gap: 5px;
    }

    .synops-total-saving-card {
        padding: 9px 11px;
        border-radius: 11px;
    }

    .saving-title {
        font-size: 6.5px;
        letter-spacing: 0.6px;
    }

    .synops-total-saving-card h2 {
        font-size: 15px;
    }

    .synops-total-saving-card small {
        font-size: 8.5px;
    }

    .finops-platform-section {
        padding: 16px 0;
    }

    .finops-platform-section .section-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /*    .finops-platform-section .synops-ai-title       { font-size: 14px; margin-bottom: 4px; }
    .finops-platform-section .synops-ai-description { font-size: 9px;  margin-bottom: 10px; }*/
    .finops-platform-section .cloud-problem-badge {
        padding: 3px 10px;
        margin-bottom: 9px;
    }

    .finops-platform-section .badge-text {
        font-size: 7px;
    }

    .finops-platform-dashboard {
        padding: 6px;
        border-radius: 9px;
    }

    .finops-platform-tabs {
        gap: 2px;
        margin-bottom: 6px;
    }

    .finops-platform-tab {
        padding: 3px 6px;
        font-size: 6px;
        border-radius: 4px;
    }

    .finops-platform-dashboard .row.g-3 > .col-lg-8 {
        padding-right: 3px !important;
    }

    .finops-platform-dashboard .row.g-3 > .col-lg-4 {
        padding-left: 3px !important;
    }

    .finops-chart-card {
        padding: 6px;
        border-radius: 8px;
    }

    .finops-chart-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 4px;
    }

    .finops-chart-header h4 {
        font-size: 5.5px;
        margin-bottom: 1px;
    }

    .finops-chart-header h3 {
        font-size: 10px;
        line-height: 1;
    }

    .finops-growth-badge {
        font-size: 5px;
        padding: 2px 5px;
        border-radius: 5px;
    }

    /*    .finops-chart-card svg    { height: 65px !important; }*/
    .finops-resource-card {
        padding: 6px;
        border-radius: 8px;
    }

    .finops-resource-title {
        font-size: 5.5px;
        margin-bottom: 4px;
    }

    .finops-resource-item {
        padding: 3px 5px;
        border-radius: 4px;
        margin-bottom: 3px;
    }

    .finops-resource-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2px;
    }

    .finops-resource-header span {
        font-size: 5px;
    }

    .finops-resource-header strong {
        font-size: 5.5px;
    }

    .finops-progress {
        height: 2px;
        border-radius: 10px;
        margin-bottom: 2px;
    }

    .finops-resource-item small {
        font-size: 4.5px;
        display: block;
    }

    .finops-bottom-stats {
        margin-top: 7px;
        padding-top: 6px;
        border-top: 1px solid rgba(255, 255, 255, .06);
    }

    .finops-stat-box {
        text-align: center;
        padding: 0 2px;
    }

    .finops-stat-box h3 {
        font-size: 10px;
        margin-bottom: 1px;
    }

    .finops-stat-box p {
        font-size: 5px;
        margin: 0;
        line-height: 1.2;
    }

    .finops-capabilities-section {
        padding: 40px 0;
    }

    .finops-capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .finops-feature-large,
    .finops-capabilities-grid {
        grid-column: span 2;
        min-height: auto;
    }

    .finops-feature-card {
        padding: 12px;
        min-height: auto;
        border-radius: 10px;
    }

    /*    .finops-feature-icon{
        width:26px;
        height:26px;
        margin-bottom:12px;
    }

    .finops-feature-icon img{
        width:26px;
        height:26px;
    }
    .finops-feature-card h4 { font-size: 10.5px; margin-bottom: 6px; }
    .finops-feature-card p { font-size: 8.5px; line-height: 1.55; }*/
    .finops-feature-icon {
        width: 26px;
        height: 26px;
        margin-bottom: 10px;
    }

    .finops-feature-icon img {
        width: 26px;
        height: 26px;
    }

    .finops-feature-card h4 {
        font-size: 10.5px;
        margin-bottom: 6px;
    }

    .finops-feature-card p {
        font-size: 8.5px;
        line-height: 1.55;
    }

    .kl-journey-section {
        padding: 28px 0;
    }

    .kl-journey-card {
        height: 240px;
        padding: 10px 12px;
        border-radius: 12px;
    }

    /*    . kl-card-heading { font-size: 10.5px; margin-bottom: 3px; }
    .kl-card-para  { font-size: 7.5px; max-width: 120px; line-height: 1.15; }*/
    /*    .kl-floating-svg {
        width: 117px;
        right: -8px;
        top: -81px;
    }*/
    .kl-stats {
        width: 62px;
        gap: 3px;
    }

    .kl-right-content {
        gap: 6px;
    }

    .journey-card {
        padding: 2px 3px;
        border-radius: 4px;
    }

    .journey-card small {
        font-size: 2.8px;
        letter-spacing: .08em;
    }

    .journey-card h4 {
        font-size: 5px;
    }

    .journey-card p {
        font-size: 4px;
        margin-top: 2px;
    }

    .stat-sub-text {
        font-size: 4px;
    }

    .integration-card {
        width: 86px;
        max-height: 120px;
        border-radius: 7px 7px 0 0;
        padding: 2px;
    }

    .integration-header {
        padding: 3px 6px;
    }

    .integration-header span:first-child,
    .integration-header span:last-child {
        font-size: 3.8px;
    }

    .integration-card ul li {
        padding: 2px 5px;
    }

    .integration-card li span:first-child {
        font-size: 5.5px;
        padding-left: 12px;
    }

    .integration-card li span:first-child::before {
        width: 5px;
        height: 5px;
    }

    .integration-card li span:last-child {
        font-size: 3.8px;
    }

    .cloud-provider {
        width: 18px;
        height: 18px;
    }

    /*    .kl-cloud-svg {
        width: 48%;
        max-width: 175px;
        top: -57px;
        left: 52px;
    }*/
    /*    .kl-cloud-svg {
        width: 48%;
        max-width: 175px;
        top: -61px;
        left: 1px;
    }*/
    .journey-card {
        margin-bottom: 0px;
    }

    .integration-card ul li {
        padding: 3px 5px;
    }

    .synops-results-section {
        padding: 32px 0;
    }

    /* Stack to 1 column */
    .synops-results-section .col-lg-3,
    .synops-results-section .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .synops-result-card {
        padding: 24px 20px;
        border-radius: 14px;
    }

    /*    .synops-result-card h3 { font-size: 48px; margin-bottom: 16px; }*/
    .synops-result-card h3 {
        font-size: 26px;
        margin-bottom: 14px;
    }

    .synops-result-card h5 {
        font-size: 15px;
        margin-bottom: 6px;
    }

    .synops-result-card p {
        font-size: 11.5px;
    }

    .synops-results-section .synops-ai-title {
        font-size: 22px;
    }

    .synops-results-section .synops-ai-description {
        font-size: 12px;
        margin-bottom: 24px;
    }

    .synops-ai-icon {
        width: 13px;
        height: 13px;
    }

    .synops-testimonials {
        padding: 36px 0;
    }

    .synops-ai-title {
        font-size: 20px;
        line-height: 1.2;
    }

    .synops-ai-description {
        font-size: 12px;
        margin-bottom: 22px;
    }

    .testimonial-card {
        padding: 16px;
        border-radius: 14px;
    }

    .testimonial-text {
        font-size: 12px;
        line-height: 1.48;
        min-height: auto;
    }

    .testimonial-user {
        gap: 10px;
    }

    .testimonial-user img {
        width: 36px;
        height: 36px;
    }

    .testimonial-user h5 {
        font-size: 11.5px;
        margin-bottom: 1px;
    }

    .testimonial-user span {
        font-size: 9px;
    }

    .testimonial-stars i {
        font-size: 10px;
    }

    .tick-icon {
        width: 12px;
        height: 12px;
    }

    .synops-cloud-section {
        padding: 36px 0;
    }

    .synops-cloud-svg {
        max-width: 300px;
    }

    .synops-cta-section {
        padding: 36px 0;
    }

    .synops-btn-primary,
    .synops-btn-secondary {
        padding: 11px 18px;
        font-size: 11px;
        border-radius: 10px;
        width: 48%;
        justify-content: center;
    }

    /*    .d-flex.justify-content-center.flex-wrap.gap-3.mt-4 {
        flex-direction: column;
        align-items: center;
        gap: 10px !important;
    }*/
    .btn-content {
        gap: 7px;
    }

    .synops-tags span {
        font-size: 10px;
        padding: 6px 10px;
    }

    .synops-tags {
        gap: 6px;
        margin-top: 22px;
    }

    .finops-platform-section .finops-chart-body {
        gap: 8px;
        height: 85px;
    }

    .finops-chart-card .finops-graph-area,
    .finops-chart-card .finops-graph-area svg {
        height: 85px;
    }
}

@media (max-width: 320px) {

    .trusted-logo-row {
        row-gap: 8px;
    }

    /*    .hero-glow {
        width: 200%;
        height: auto;
        left: 50%;
        top: -4px;
        transform: translateX(-50%);
    }*/
    /*    .hero-glow {
        width: 200%;
        height: 301px;
        left: 50%;
        top: -4px;
        transform: translateX(-50%);
    }*/
    /*        .hero-glow {
            width: 200%;
            height: 377px;
            left: 50%;
            top: 2px;
            transform: translateX(-50%);
        }*/
    .hero-glow {
        width: 259%;
        height: 447px;
        left: 50%;
        top: 0px;
        transform: translateX(-50%);
    }

    .cloud-problem-section {
        padding: 40px 0;
    }

    .cloud-problem-badge {
        padding: 6px 14px;
        gap: 8px;
    }

    .badge-text {
        font-size: 10px;
    }

    .cloud-card {
        padding: 16px 14px;
        border-radius: 12px;
    }

    .cloud-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        margin-bottom: 14px;
    }

    .cloud-icon img {
        width: 16px;
        height: 16px;
    }

    .cloud-card h4 {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .cloud-card p {
        font-size: 11px;
        line-height: 1.6;
    }

    .cloud-line {
        margin-bottom: 14px;
    }

    .trusted-companies-section {
        padding: 36px 0 30px;
    }

    .trusted-companies-title {
        font-size: 9px;
        letter-spacing: 1px;
        margin-bottom: 24px;
        line-height: 1.6;
    }

    .trusted-logo-item img {
        height: 18px;
    }

    .synops-body-section .synops-hero-section {
        padding: 36px 10px 10px;
        background-position: center center;
        min-height: 77vh;
    }

    .hero__logo {
        height: 20px;
        margin-bottom: 20px;
    }

    .hero__badge {
        font-size: 9px;
        padding: 5px 10px;
        gap: 6px;
        margin-bottom: 18px;
    }

    .hero__badge-icon {
        width: 12px;
        height: 12px;
    }

    .hero__heading {
        font-size: 17px;
        letter-spacing: -0.2px;
        margin-bottom: 12px;
        line-height: 1.2;
    }

    .hero__desc {
        font-size: 11px;
        line-height: 1.6;
        margin-bottom: 24px;
        max-width: 100%;
    }

    .synops-ai-engine-section {
        padding: 30px 0;
    }

    /*    .synops-ai-title {
        font-size: 16px;
        line-height: 1.2;
    }*/
    .synops-ai-title {
        font-size: 13px;
        line-height: 1.2;
    }

    .synops-ai-description {
        font-size: 11px;
        margin-bottom: 20px;
        max-width: 297px;
    }

    .synops-dashboard-wrapper {
        padding: 8px;
        border-radius: 10px;
    }

    .synops-dashboard-title {
        font-size: 10px;
    }

    .synops-dashboard-subtitle {
        font-size: 7px;
        max-width: 100%;
    }

    .synops-dashboard-status {
        font-size: 6px;
        gap: 3px;
    }

    .synops-live-dot {
        width: 4px;
        height: 4px;
    }

    .synops-powered-tag {
        border-radius: 9px;
        font-size: 5.5px;
        padding: 1px 4px;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Stat Cards */
    .synops-ai-stats-row .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .synops-ai-stat-card {
        padding: 6px 8px;
        min-height: 52px;
        border-radius: 8px;
    }

    .stat-icon-box {
        width: 16px;
        height: 16px;
    }

    .stat-icon-box img {
        width: 14px;
        height: 14px;
    }

    .stat-label {
        font-size: 5.5px;
        letter-spacing: 0.3px;
    }

    .synops-ai-stat-card h4 {
        font-size: 11px;
    }

    .stat-loss,
    .stat-profit {
        font-size: 5.5px;
        padding: 2px 4px;
    }

    /* Chart */
    .synops-chart-svg {
        height: 120px;
    }

    .synops-chart-svg svg {
        height: 120px;
    }

    .synops-chart-legend {
        font-size: 7px;
        gap: 8px;
        padding: 4px 6px;
        flex-wrap: wrap;
    }

    .legend-item {
        font-size: 7px;
        gap: 4px;
    }

    .legend-svg-icon {
        width: 12px;
        height: 8px;
    }

    /* Feature Slider */
    .synops-feature-slider {
        height: 58px;
        margin-top: 6px;
    }

    .synops-feature-card {
        width: 80%;
        padding: 6px 8px;
        border-radius: 8px;
        height: 58px;
        min-height: 58px;
    }

    .synops-feature-icon-img {
        width: 18px;
        height: 18px;
    }

    .synops-feature-content h6 {
        font-size: 8px;
        margin-bottom: 1px;
    }

    .synops-feature-content p {
        font-size: 7px;
        line-height: 1.2;
    }

    .synops-feature-arrow-img {
        width: 6px;
        height: 6px;
    }

    /* Recommendation Cards */
    .synops-recommendations {
        gap: 6px;
        margin-top: 16px;
    }

    .synops-ai-recommendation-label {
        font-size: 7px;
        margin-bottom: 5px;
    }

    .synops-recommend-card {
        padding: 8px 10px;
        border-radius: 10px;
    }

    .recommend-top h5 {
        font-size: 9px;
    }

    .recommend-badge {
        font-size: 6px;
        padding: 2px 5px;
    }

    .recommend-label {
        font-size: 6px;
    }

    .recommend-price {
        font-size: 13px;
        margin-bottom: 5px;
    }

    .recommend-month {
        font-size: 8px;
    }

    .recommend-ai-tag {
        font-size: 5.5px;
        height: 11px;
        min-width: 14px;
    }

    .recommend-note {
        font-size: 6.5px;
    }

    .recommend-btn {
        height: 20px;
        font-size: 5.5px;
        border-radius: 6px;
        gap: 4px;
    }

    .recommend-arrow-icon {
        width: 10px;
        height: 10px;
    }

    .synops-total-saving-card {
        padding: 8px 10px;
        border-radius: 10px;
    }

    .saving-title {
        font-size: 6px;
        letter-spacing: 0.5px;
    }

    .synops-total-saving-card h2 {
        font-size: 14px;
    }

    .synops-total-saving-card small {
        font-size: 8px;
    }

    .finops-platform-section {
        padding: 14px 0;
    }

    .finops-platform-section .section-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* heading */
    /*    .finops-platform-section .synops-ai-title       { font-size: 12px; margin-bottom: 3px; line-height: 1.2; }*/
    /*    .finops-platform-section .synops-ai-description { font-size: 8px;  margin-bottom: 8px; }*/
    .finops-platform-section .cloud-problem-badge {
        padding: 3px 8px;
        margin-bottom: 8px;
    }

    .finops-platform-section .badge-text {
        font-size: 6px;
    }

    /* dashboard */
    .finops-platform-dashboard {
        padding: 5px;
        border-radius: 8px;
    }

    /* tabs */
    .finops-platform-tabs {
        gap: 2px;
        margin-bottom: 5px;
    }

    .finops-platform-tab {
        padding: 2px 5px;
        font-size: 5.5px;
        border-radius: 4px;
    }

    /* gutter between columns */
    .finops-platform-dashboard .row.g-3 > .col-lg-8 {
        padding-right: 3px !important;
    }

    .finops-platform-dashboard .row.g-3 > .col-lg-4 {
        padding-left: 3px !important;
    }

    /* chart card */
    .finops-chart-card {
        padding: 5px;
        border-radius: 7px;
    }

    .finops-chart-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 3px;
    }

    .finops-chart-header h4 {
        font-size: 5px;
        margin-bottom: 1px;
        color: #fff;
        font-weight: 500;
    }

    .finops-chart-header h3 {
        font-size: 9px;
        color: #00d49d;
        font-weight: 700;
        line-height: 1;
    }

    .finops-growth-badge {
        font-size: 4.5px;
        padding: 1px 4px;
        border-radius: 4px;
    }

    /*    .finops-chart-card svg    { height: 55px !important; }*/
    /* resource card */
    .finops-resource-card {
        padding: 5px;
        border-radius: 7px;
    }

    .finops-resource-title {
        font-size: 5px;
        font-weight: 600;
        margin-bottom: 4px;
        color: #fff;
    }

    .finops-resource-item {
        padding: 3px 4px;
        border-radius: 4px;
        margin-bottom: 3px;
    }

    .finops-resource-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2px;
    }

    .finops-resource-header span {
        font-size: 4.5px;
        color: #8f98a8;
    }

    .finops-resource-header strong {
        font-size: 5px;
        color: #fff;
    }

    .finops-progress {
        height: 2px;
        border-radius: 10px;
        margin-bottom: 2px;
    }

    .finops-resource-item small {
        font-size: 4px;
        color: #5f6875;
        display: block;
    }

    /* bottom stats */
    .finops-bottom-stats {
        margin-top: 6px;
        padding-top: 5px;
        border-top: 1px solid rgba(255, 255, 255, .06);
    }

    .finops-stat-box {
        text-align: center;
        padding: 0 2px;
    }

    .finops-stat-box h3 {
        font-size: 8px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 1px;
    }

    .finops-stat-box p {
        font-size: 4.5px;
        color: #6d7687;
        margin: 0;
        line-height: 1.2;
    }

    .finops-capabilities-section {
        padding: 30px 0;
    }

    .finops-capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .finops-feature-large,
    .finops-capabilities-grid {
        grid-column: span 2;
        min-height: auto;
    }

    .finops-feature-card {
        padding: 10px;
        min-height: auto;
        border-radius: 8px;
    }

    .finops-feature-icon {
        width: 22px;
        height: 22px;
        margin-bottom: 8px;
    }

    .finops-feature-icon img {
        width: 22px;
        height: 22px;
    }

    .finops-feature-card h4 {
        font-size: 9.5px;
        margin-bottom: 5px;
    }

    .finops-feature-card p {
        font-size: 8px;
        line-height: 1.5;
    }

    .synops-body-section .synops-hero-section .section-container {
        margin-top: 0px;
    }

    .kl-journey-section {
        padding: 22px 0;
    }

    .kl-journey-card {
        height: 200px;
        padding: 9px 10px;
        border-radius: 10px;
    }

    /*    . kl-card-heading { font-size: 9px; margin-bottom: 3px; }
    .kl-card-para  { font-size: 6.5px; max-width: 100px; line-height: 1.1; }*/
    /*    .kl-cloud-svg {
        width: 50%;
        max-width: 160px;
        bottom: -5px;
        left: -4px;
    }*/
    /*    .kl-floating-svg {
        width: 90px;
        right: -5px;
        top: -86px;
    }*/
    /*    .kl-floating-svg { width: 115px; right: -5px; top: 2px; }*/
    .kl-stats {
        width: 50px;
        gap: 2px;
    }

    .kl-right-content {
        gap: 3px;
    }

    .journey-card {
        padding: 2px 3px;
        border-radius: 3px;
    }

    .journey-card small {
        font-size: 3px;
        letter-spacing: .05em;
    }

    .journey-card h4 {
        font-size: 5px;
    }

    .journey-card p {
        font-size: 4px;
        margin-top: 2px;
    }

    .stat-sub-text {
        font-size: 3px;
    }

    .integration-card {
        width: 76px;
        max-height: 100px;
        border-radius: 5px 5px 0 0;
        padding: 1px;
    }

    .integration-header {
        padding: 2px 4px;
    }

    .integration-header span:first-child,
    .integration-header span:last-child {
        font-size: 3px;
    }

    .integration-card ul li {
        padding: 1px 4px;
    }

    .integration-card li span:first-child {
        font-size: 4.5px;
        padding-left: 10px;
    }

    .integration-card li span:first-child::before {
        width: 4px;
        height: 4px;
    }

    .integration-card li span:last-child {
        font-size: 3px;
    }

    .cloud-provider {
        width: 14px;
        height: 14px;
    }

    .integration-card ul li {
        padding: 3px 3px;
    }

    /*    .kl-cloud-svg {
        width: 50%;
        max-width: 160px;
        top: -79px;
        left: -4px;
    }*/
    .journey-card {
        margin-bottom: 0px;
        padding: 2px 3px;
        border-radius: 6px;
    }

    .synops-results-section {
        padding: 26px 0;
    }

    .synops-results-section .col-lg-3,
    .synops-results-section .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .synops-result-card {
        padding: 20px 16px;
        border-radius: 12px;
    }

    .synops-result-card h3 {
        font-size: 23px;
        margin-bottom: 12px;
    }

    /*    .synops-result-card h3 { font-size: 42px; margin-bottom: 14px; }*/
    .synops-result-card h5 {
        font-size: 13.5px;
        margin-bottom: 5px;
    }

    .synops-result-card p {
        font-size: 11px;
    }

    .synops-results-section .synops-ai-title {
        font-size: 19px;
    }

    .synops-results-section .synops-ai-description {
        font-size: 11px;
        margin-bottom: 20px;
    }

    .synops-chart-svg {
        height: 160px !important;
    }

    .synops-chart-svg svg {
        height: 162px !important;
    }

    .synops-ai-icon {
        width: 12px;
        height: 12px;
    }

    .synops-testimonials {
        padding: 28px 0;
    }

    .synops-ai-title {
        font-size: 17px;
        line-height: 1.2;
    }

    .synops-ai-description {
        font-size: 11px;
        margin-bottom: 18px;
    }

    .testimonial-card {
        padding: 14px;
        border-radius: 12px;
    }

    .testimonial-text {
        font-size: 11.5px;
        line-height: 1.45;
        min-height: auto;
    }

    .testimonial-user {
        gap: 8px;
    }

    .testimonial-user img {
        width: 34px;
        height: 34px;
    }

    .testimonial-user h5 {
        font-size: 11px;
        margin-bottom: 1px;
    }

    .testimonial-user span {
        font-size: 8.5px;
    }

    .testimonial-stars i {
        font-size: 9px;
    }

    .tick-icon {
        width: 11px;
        height: 11px;
    }

    .synops-cloud-section {
        padding: 28px 0;
    }

    .synops-cloud-svg {
        max-width: 260px;
    }

    .synops-cta-section {
        padding: 28px 0;
    }

    .synops-btn-primary,
    .synops-btn-secondary {
        padding: 10px 16px;
        font-size: 10.5px;
        border-radius: 9px;
        width: 68%;
        justify-content: center;
    }

    /*    .d-flex.justify-content-center.flex-wrap.gap-3.mt-4 {
        flex-direction: column;
        align-items: center;
        gap: 8px !important;

    }*/
    .btn-content {
        gap: 6px;
    }

    .synops-tags span {
        font-size: 9.5px;
        padding: 5px 9px;
    }

    .synops-tags {
        gap: 6px;
        margin-top: 20px;
    }

    .tick-icon {
        width: 12px;
        height: 12px;
    }

    .finops-platform-section .finops-chart-body {
        gap: 6px;
        height: 75px;
    }

    .finops-chart-card .finops-graph-area,
    .finops-chart-card .finops-graph-area svg {
        height: 75px;
    }
}

@media (min-width: 1530px) and (min-height: 700px) {

    /*    .hero-glow {
        width: 100%;
        height: 80vh;
    }*/
    .hero-glow {
        width: 100%;
        height: 96vh;
    }

    .hero__content {
        max-width: 860px;
    }

    .synops-body-section .synops-hero-section {
        padding: 50px 20px 10px;
    }

    .hero__logo {
        height: 50px;
        margin-bottom: 48px;
    }

    .hero__badge {
        font-size: 14px;
        padding: 9px 22px;
        gap: 8px;
        margin-bottom: 42px;
    }

    .hero__badge-icon {
        width: 15px;
        height: 15px;
    }

    .hero__heading {
        font-size: 46px;
        letter-spacing: -1.3px;
        margin-bottom: 26px;
        line-height: 1.11;
    }

    .hero__desc {
        font-size: 16.5px;
        line-height: 1.76;
        margin-bottom: 72px;
        max-width: 769px;
    }

    /* .synops-sidebar             { height: 540px; }
    .synops-stat-card           { min-height: 118px; }
    .synops-chart-area svg      { height: 155px; }*/
    /* ── SIDEBAR ── */
    .synops-sidebar {
        height: 540px;
    }

    /* ── STAT CARDS ── */
    .synops-stat-card {
        min-height: 118px;
    }

    .synops-mini-chart,
    .synops-main-chart {
        height: 42px;
    }

    .synops-mini-chart svg,
    .synops-main-chart svg {
        height: 42px;
    }

    /* ── CHART ── */
    .synops-chart-area svg {
        height: 155px;
    }

    /* ── DONUT ── */
    .synops-donut-svg {
        width: 125px;
        height: 125px;
    }

    .synops-donut-svg svg {
        width: 125px;
        height: 125px;
    }

    .synops-ai-engine-section {
        padding: 24px 0 40px;
    }

    /* ── Badge ── */
    .cloud-problem-badge {
        padding: 9px 24px;
        gap: 10px;
        margin-bottom: 30px;
    }

    .badge-dot {
        width: 7px;
        height: 7px;
    }

    .badge-text {
        font-size: 11px;
        letter-spacing: 0.05em;
    }

    /* ── Heading block ── */
    .synops-ai-heading {
        max-width: 900px;
        margin: 0 auto 18px;
    }

    .synops-ai-title {
        font-size: 42px;
        font-weight: 700;
        line-height: 1.13;
        margin-bottom: 12px;
    }

    .synops-ai-description {
        font-size: 16.5px;
        line-height: 1.65;
        max-width: 760px;
        margin: 0 auto 56px;
    }

    /* ── Column gutters ── */
    .synops-ai-engine-section .col-lg-8,
    .synops-ai-engine-section .col-lg-3 {
        padding-left: 10px;
        padding-right: 10px;
    }

    .synops-ai-engine-section .mt-4.mt-lg-0 {
        margin-top: 0;
    }

    /* ── Dashboard wrapper ── */
    .synops-dashboard-wrapper {
        padding: 14px;
        border-radius: 20px;
    }

    /* ── Dashboard head ── */
    .synops-dashboard-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 12px;
        padding-bottom: 10px;
    }

    .synops-dashboard-title {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 3px;
        padding-bottom: 0;
    }

    .synops-dashboard-subtitle {
        font-size: 9.5px;
        max-width: 440px;
        padding-bottom: 0;
        line-height: 1.4;
    }

    .synops-dashboard-status {
        font-size: 9px;
        font-weight: 700;
        gap: 6px;
    }

    .synops-live-dot {
        width: 7px;
        height: 7px;
    }

    .synops-powered-tag {
        font-size: 8.5px;
        padding: 2px 8px;
        border-radius: 30px;
    }

    /* ── Stat cards — 4-col row ── */
    .synops-ai-stats-row {
        display: flex; /* back to Bootstrap flex row */
        flex-wrap: nowrap;
        gap: 0; /* Bootstrap gutters take over */
        margin-bottom: 10px;
    }

    .synops-ai-stats-row .col-md-3 {
        /* restore Bootstrap column behaviour */
        width: 25%;
        flex: 0 0 25%;
        max-width: 25%;
        padding: 0 6px;
    }

    .synops-ai-stat-card {
        padding: 12px 14px;
        min-height: 72px;
        border-radius: 12px;
    }

    .stat-header {
        gap: 10px;
        margin-bottom: 8px;
    }

    .stat-icon-box {
        width: 26px;
        height: 26px;
    }

    .stat-icon {
        width: 18px;
        height: 18px;
    }

    .stat-label {
        font-size: 8px;
        font-weight: 600;
        letter-spacing: 0.7px;
    }

    .stat-value-row {
        gap: 8px;
    }

    .synops-ai-stat-card h4 {
        font-size: 18px;
        font-weight: 700;
        line-height: 1;
    }

    .stat-loss,
    .stat-profit {
        font-size: 8px;
        padding: 3px 7px;
        border-radius: 6px;
    }

    /* ── Chart grid / SVG ── */
    .synops-chart-grid {
        display: block;
        background: #00000033;
        padding: 0;
        margin-top: 0;
    }

    /*    .synops-chart-svg {
        width: 100%;
        height: 268px;
        overflow: hidden;
    }*/
    .synops-chart-svg {
        width: 100%;
        height: 314px;
        overflow: hidden;
    }

    /*    .synops-chart-svg svg {
        width: 100%;
        height: 268px;
        display: block;
    }*/
    .synops-chart-svg svg {
        width: 100%;
        height: 359px;
        display: block;
    }

    /* ── Chart legend ── */
    .synops-chart-legend {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
        padding: 7px 12px;
        margin-top: 4px;
        font-size: 9px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 9px;
        font-weight: 500;
        color: #AAB2C5;
    }

    .legend-svg-icon {
        width: 18px;
        height: 11px;
        display: block;
        object-fit: contain;
        flex-shrink: 0;
    }

    /* ── Feature slider ── */
    .synops-feature-slider {
        height: 62px;
        margin-top: 10px;
        width: 100%;
        overflow: hidden;
    }

    .synops-feature-track {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .synops-feature-card {
        height: 62px;
        min-height: 62px;
        flex-shrink: 0;
        width: 56%; /* show ~1.5 cards = easy to see "more" */
        padding: 9px 14px;
        gap: 12px;
        border-radius: 14px;
    }

    .synops-feature-icon-img {
        width: 28px;
        height: 28px;
        object-fit: contain;
    }

    .synops-feature-content h6 {
        font-size: 11.5px;
        font-weight: 600;
        margin-bottom: 2px;
    }

    .synops-feature-content p {
        font-size: 9.5px;
        line-height: 1.35;
        color: #888888;
        margin: 0;
    }

    .synops-feature-arrow-img {
        width: 8px;
        height: 8px;
    }

    /* ── Recommendation panel ── */
    .synops-recommendations {
        display: flex;
        flex-direction: column;
        gap: 9px;
        height: 100%;
    }

    .synops-ai-recommendation-label {
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 1px;
        margin-bottom: 8px;
    }

    /* Individual recommendation cards */
    .synops-recommend-card {
        padding: 13px 15px;
        border-radius: 14px;
    }

    .recommend-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 6px;
    }

    .recommend-top h5 {
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1.3;
        color: #E2E8F0;
        margin: 0;
    }

    .recommend-badge {
        font-size: 7.5px;
        padding: 3px 8px;
        border-radius: 12px;
        white-space: nowrap;
        font-weight: 600;
    }

    .recommend-label {
        display: block;
        font-size: 7.5px;
        text-transform: uppercase;
        margin-bottom: 2px;
        color: #94A3B88C;
    }

    .recommend-price {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 8px;
        color: #FFFFFF;
    }

    .recommend-month {
        font-size: 10px;
        color: #94A3B880;
        font-weight: 400;
    }

    .recommend-ai-note {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 9px;
    }

    .recommend-ai-tag {
        font-size: 7px;
        height: 14px;
        min-width: 18px;
        padding: 0 4px;
        border-radius: 3px;
        font-weight: 600;
    }

    .recommend-note {
        font-size: 8px;
        color: #94A3B880;
        margin-bottom: 0;
    }

    .recommend-btn {
        width: 100%;
        height: 27px;
        font-size: 7.5px;
        border-radius: 9px;
        gap: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-transform: uppercase;
        color: #FFFFFF;
        border: 0.79px solid #464646;
    }

    /* ── Total saving card ── */
    .synops-total-saving-card {
        padding: 12px 15px;
        border-radius: 14px;
        margin-top: 0;
    }

    .saving-title {
        display: block;
        font-size: 7.5px;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 4px;
        color: #94A3B88C;
    }

    .synops-total-saving-card h2 {
        font-size: 20px;
        font-weight: 700;
        margin: 0;
        color: #EBFFF8;
    }

    .synops-total-saving-card small {
        font-size: 10px;
        color: #94A3B880;
        font-weight: 400;
    }

    .finops-platform-section {
        padding: 70px 0;
    }

    /*    .finops-platform-section .synops-ai-title { font-size: 38px; }
    .finops-platform-section .synops-ai-description { font-size: 16.5px; margin-bottom: 56px; }*/
    .finops-platform-dashboard {
        padding: 22px;
        border-radius: 20px;
    }

    .finops-platform-tabs {
        gap: 12px;
        margin-bottom: 22px;
    }

    .finops-platform-tab {
        padding: 9px 14px;
        font-size: 12px;
    }

    /* Chart card */
    .finops-chart-card {
        padding: 16px;
        height: 66%;
    }

    .finops-chart-header {
        margin-bottom: 20px;
    }

    .finops-chart-header h4 {
        font-size: 12px;
    }

    .finops-chart-header h3 {
        font-size: 26.3px;
    }

    .finops-growth-badge {
        font-size: 11px;
        padding: 8px 12px;
    }

    /* SVG: extra height room available */
    .finops-y-axis {
        height: 260px;
        font-size: 11px;
    }

    .finops-graph-area svg {
        width: 100%;
        height: 260px;
        display: block;
    }

    .finops-x-axis {
        margin-left: 45px;
        margin-top: 8px;
        font-size: 11px;
    }

    /* Resource */
    .finops-resource-card {
        padding: 16px;
    }

    .finops-resource-title {
        font-size: 15px;
        margin-bottom: 18px;
    }

    .finops-resource-item {
        padding: 12px;
        margin-bottom: 12px;
        border-radius: 12px;
    }

    .finops-resource-header span {
        font-size: 11px;
    }

    .finops-resource-header strong {
        font-size: 13px;
    }

    .finops-progress {
        height: 4px;
        margin-bottom: 8px;
    }

    .finops-resource-item small {
        font-size: 10px;
    }

    /* Bottom stats */
    .finops-bottom-stats {
        margin-top: 24px;
        padding-top: 22px;
    }

    .finops-stat-box h3 {
        font-size: 34px;
        margin-bottom: 6px;
    }

    .finops-stat-box p {
        font-size: 12px;
    }

    .finops-capabilities-section {
        padding: 100px 0;
    }

    .finops-capabilities-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .finops-feature-large {
        grid-column: span 2;
        min-height: 185px;
    }

    .finops-feature-card {
        padding: 26px;
        min-height: 155px;
        border-radius: 18px;
    }

    /*

        .finops-feature-icon {
            width: 46px;
            height: 46px;
            margin-bottom: 22px;
        }

        .finops-feature-icon img {
            width: 23px;
            height: 23px;
        }

        .finops-feature-card h4 {
            font-size: 17.5px;
            margin-bottom: 14px;
        }

        .finops-feature-card p {
            font-size: 13.5px;
            line-height: 1.76;
        }*/
    .finops-feature-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 22px;
    }

    .finops-feature-icon img {
        width: 44px;
        height: 44px;
    }

    .finops-feature-card h4 {
        font-size: 17.5px;
        margin-bottom: 14px;
    }

    .finops-feature-card p {
        font-size: 13.5px;
        line-height: 1.76;
    }


    .kl-journey-section {
        padding: 120px 0;
    }

    .kl-journey-card {
        height: 620px;
        padding: 50px 56px;
        border-radius: 34px;
    }

    /*    . kl-card-heading { font-size: 36px; margin-bottom: 16px; }
    .kl-card-para  { font-size: 19px; max-width: 480px; }*/
    /*    .kl-cloud-svg {
        width: 62%;
        max-width: 700px;
        bottom: -40px;
        left: -24px;
    }*/
    /*    .kl-floating-svg { width: 500px; right: -60px; top: 20px; }*/
    .kl-stats {
        width: 200px;
        gap: 15px;
    }

    .kl-right-content {
        gap: 18px;
    }

    .journey-card {
        padding: 8px 10px;
        border-radius: 12px;
    }

    .journey-card small {
        font-size: 7px;
    }

    .journey-card h4 {
        font-size: 13px;
    }

    .journey-card p {
        font-size: 9px;
    }

    .stat-sub-text {
        font-size: 10px;
    }

    .integration-card {
        width: 290px;
        max-height: 325px;
        border-radius: 20px 20px 0 0;
    }

    .integration-header {
        padding: 10px 20px;
    }

    .integration-header span:first-child,
    .integration-header span:last-child {
        font-size: 9.5px;
    }

    integration-card ul li {
        padding: 7px 18px;
    }

    .integration-card li span:first-child {
        font-size: 12px;
    }

    .integration-card li span:last-child {
        font-size: 9px;
    }

    .cloud-provider {
        width: 64px;
        height: 64px;
    }

    .synops-results-section {
        padding: 100px 0;
    }

    .synops-results-section .synops-ai-heading {
        margin-bottom: 60px;
    }

    .synops-result-card {
        padding: 40px 28px;
        border-radius: 22px;
    }

    .synops-result-card h3 {
        font-size: 58px;
        margin-bottom: 24px;
    }

    .synops-result-card h5 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .synops-result-card p {
        font-size: 13.5px;
        line-height: 1.6;
    }

    .synops-ai-icon {
        width: 18px;
        height: 18px;
    }

    .synops-testimonials {
        padding: 110px 0;
    }

    /*    .synops-ai-title {
        font-size: 46px;
    }*/
    .synops-ai-description {
        font-size: 16.5px;
        margin-bottom: 60px;
    }

    .testimonial-card {
        padding: 28px;
        border-radius: 22px;
    }

    .testimonial-text {
        font-size: 15px;
        line-height: 1.65;
        min-height: 115px;
    }

    .testimonial-user img {
        width: 52px;
        height: 52px;
    }

    .testimonial-user h5 {
        font-size: 14px;
    }

    .testimonial-user span {
        font-size: 11px;
    }

    .testimonial-stars i {
        font-size: 13px;
    }

    .tick-icon {
        width: 15px;
        height: 15px;
    }

    .synops-cloud-section {
        padding: 110px 0;
    }

    .synops-cloud-svg {
        max-width: 720px;
    }

    .synops-cta-section {
        padding: 120px 0;
    }

    .synops-btn-primary,
    .synops-btn-secondary {
        padding: 16px 32px;
        font-size: 14px;
        border-radius: 14px;
    }

    .synops-tags span {
        font-size: 13px;
        padding: 9px 16px;
    }

    .synops-tags {
        gap: 12px;
        margin-top: 56px;
    }
}

/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce) {

    .travel-dot,
    .pulse-node {
        animation: none;
    }

    *, *::before, *::after {
        transition: none;
        animation: none;
    }

    .hero__heading-highlight {
        transition: none;
    }

}

/*@media (min-width: 1279px) {
.synops-body-section .synops-nav {
      padding-left: 3.8rem;

}
}*/

@media (min-width: 991px) {
    .synops-body-section #navBackground5 {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(48, 135, 255, 0.12);
    }

}


@media (min-width: 1199px) {
    .trusted-logo-row {
        flex-wrap: nowrap;
    }

    .trusted-logo-row > div {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }
}


@media (max-width: 575px) {
    .synops-body-section .synops-hero-section .section-container {
        max-width: 500px;
        max-width: 100%;
        padding: 0 16px;
    }
}

/* ── Default: show real dashboard, hide image ── */
.synops-dashboard-img-fallback {
    display: none;
    width: 100%;
    height: auto;
    border-radius: 14px;
    object-fit: cover;
    /*    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);*/
}

/* ── Below 480px: hide real dashboard, show image ── */
@media (max-width: 479px) {
    .synops-dashboard {
        display: none;
    }

    .synops-dashboard-img-fallback {
        display: block;
    }
}

/* ── Below 320px: image sizing ── */
@media (max-width: 320px) {
    .synops-dashboard-img-fallback {
        border-radius: 10px;
        margin-top: 0px;
    }
}

kl-journey-card .text-center {
    position: static !important;
    text-align: left !important;
}

/* ── BASE: SVG absolutely out of column flow ── */
/*.kl-cloud-svg {
    position: absolute !important;
    display: block !important;
    z-index: 1;
    pointer-events: none;
    margin: 0 !important;
}*/

.synops-body-section .top-strip {
    background: #040A13;
}


@media (max-width: 566.5px) {

    .strip-logo {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .strip-logo img:first-child {
        width: 70px !important;
        height: auto !important;
    }

    .strip-logo img:last-child {
        width: 85px !important;
        height: auto !important;
    }
}


@media (min-width: 768px) {

    .synops-strip-row {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .synops-strip-row > div:first-child {
        flex: 0 0 30% !important;
        width: 30% !important;
        max-width: 30% !important;

        padding: 0 !important;
        margin: 0 !important;
    }

    .synops-strip-row .strip-logo {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;


        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 30px !important;
    }


    .synops-strip-row > div:nth-child(2) {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;

        padding: 0 !important;
        margin: 0 !important;

        min-width: 0 !important;
    }

    .synops-strip-row .strip-text {
        width: 100% !important;
        text-align: center !important;

        padding: 0 !important;
        margin: 0 !important;
    }

    /*    .synops-strip-row .strip-text h4 {
        margin: 0 !important;
        white-space: nowrap !important;
    }*/
    .synops-strip-row > .strip-contact-column {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        margin-left: auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;

    }

    .strip-contact {
        display: flex !important;
        flex-direction: row !important;

        align-items: center !important;
        justify-content: center !important;

        gap: clamp(6px, 0.6vw, 10px) !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .strip-contact-arrow {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: clamp(28px, 3vw, 40px) !important;
        height: clamp(28px, 3vw, 40px) !important;

        flex-shrink: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .strip-contact-arrow img {
        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;
    }

    .strip-contact-text {
        display: flex !important;
        flex-direction: column-reverse !important;
        align-items: center;
        justify-content: center;
        width: 18px;
        gap: 12px;
        writing-mode: initial !important;
        text-orientation: initial !important;
        direction: initial !important;
        transform: none !important;
        color: #fff !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .strip-contact-text span {
        display: block;
        width: 100%;
        text-align: center;
        line-height: 1 !important;
    }
}

@media (max-width: 768px) {
    .strip-contact-column {
        display: none;
    }
}


/* CONTACT — ONLY ABOVE 991px */
@media (min-width: 992px) {
    .synops-strip-row > .strip-contact-column {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }
}

@media (max-width: 991px) {
    .synops-strip-row > .strip-contact-column {
        display: none !important;
    }
}


@media (min-width: 320px) and (max-width: 359.5px) {
    .kl-journey-section {
        padding: 24px 0;
    }

    .kl-journey-card {
        height: 210px;
        padding: 10px 12px;
        border-radius: 12px;
    }

    /*    . kl-card-heading { font-size: 10px; margin-bottom: 3px; }
    .kl-card-para {
        font-size: 7px;
        max-width: 137px;
        line-height: 1.15;
    }*/
    /*    .kl-cloud-svg {
        width: 48%;
        max-width: 155px;
        top: -55px;
        left: 2px;
    }*/
    /*    .kl-cloud-svg {
        width: 48%;
        max-width: 155px;
        top: -78px;
        left: 2px;
    }*/
    /*    .kl-floating-svg {
        width: 96px;
        right: -6px;
        top: -75px;
    }*/
    .kl-stats {
        width: 54px;
        gap: 3px;
    }

    .kl-right-content {
        gap: 4px;
    }

    .journey-card {
        padding: 2px 3px;
        border-radius: 4px;
        margin-bottom: 0;
    }

    .journey-card small {
        font-size: 3px;
        letter-spacing: .05em;
    }

    .journey-card h4 {
        font-size: 5px;
        margin: 1px 0 0;
    }

    .journey-card p {
        font-size: 3.5px;
        margin-top: 2px;
    }

    .stat-sub-text {
        font-size: 3.5px;
    }

    .integration-card {
        width: 78px;
        max-height: 104px;
        border-radius: 6px 6px 0 0;
        padding: 1px;
    }

    .integration-header {
        padding: 2px 5px;
    }

    .integration-header span:first-child,
    .integration-header span:last-child {
        font-size: 3px;
    }

    .integration-card ul li {
        padding: 2px 4px;
    }

    .integration-card li span:first-child {
        font-size: 4.5px;
        padding-left: 10px;
    }

    .integration-card li span:first-child::before {
        width: 4px;
        height: 4px;
    }

    .integration-card li span:last-child {
        font-size: 3px;
    }

    .cloud-provider {
        width: 14px;
        height: 14px;
    }
}

@media (min-width: 360px) and (max-width: 399.5px) {
    .kl-journey-section {
        padding: 26px 0;
    }

    .kl-journey-card {
        height: 226px;
        padding: 11px 13px;
        border-radius: 13px;
    }

    /*    . kl-card-heading { font-size: 11px; margin-bottom: 3px; }
    .kl-card-para {
        font-size: 7.5px;
        max-width: 144px;
        line-height: 1.15;
    }*/
    /*    .kl-cloud-svg {
        width: 49%;
        max-width: 170px;
        top: -58px;
        left: 2px;
    }*/
    /*    .kl-cloud-svg {
        width: 49%;
        max-width: 170px;
        top: -68px;
        left: 2px;
    }*/
    /*   .kl-floating-svg {
        width: 110px;
        right: -7px;
        top: -68px;
    }*/
    .kl-stats {
        width: 60px;
        gap: 3px;
    }

    .kl-right-content {
        gap: 9px;
    }

    .journey-card {
        padding: 2px 3px;
        border-radius: 4px;
        margin-bottom: 0;
    }

    .journey-card small {
        font-size: 3.2px;
        letter-spacing: .05em;
    }

    .journey-card h4 {
        font-size: 5.5px;
        margin: 1px 0 0;
    }

    .journey-card p {
        font-size: 4px;
        margin-top: 2px;
    }

    .stat-sub-text {
        font-size: 4px;
    }

    .integration-card {
        width: 86px;
        max-height: 116px;
        border-radius: 7px 7px 0 0;
        padding: 1px;
    }

    .integration-header {
        padding: 3px 5px;
    }

    .integration-header span:first-child,
    .integration-header span:last-child {
        font-size: 3.5px;
    }

    .integration-card ul li {
        padding: 2px 5px;
    }

    .integration-card li span:first-child {
        font-size: 5px;
        padding-left: 10px;
    }

    .integration-card li span:first-child::before {
        width: 4px;
        height: 4px;
    }

    .integration-card li span:last-child {
        font-size: 3.5px;
    }

    .cloud-provider {
        width: 16px;
        height: 16px;
    }
}

@media (min-width: 400px) and (max-width: 479.5px) {
    .kl-journey-section {
        padding: 30px 0;
    }

    .kl-journey-card {
        height: 248px;
        padding: 12px 14px;
        border-radius: 14px;
    }

    /*    . kl-card-heading { font-size: 12px; margin-bottom: 4px; }
    .kl-card-para {
        font-size: 8px;
        max-width: 147px;
        line-height: 1.15;
    }*/
    /*    .kl-cloud-svg {
        width: 49%;
        max-width: 182px;
        top: -59px;
        left: 4px;
    }*/
    /*    .kl-floating-svg {
        width: 130px;
        right: -14px;
        top: -62px;
    }*/
    .kl-stats {
        width: 68px;
        gap: 4px;
    }

    .kl-right-content {
        gap: 10px;
    }

    .journey-card {
        padding: 2px 4px;
        border-radius: 5px;
        margin-bottom: 0;
    }

    .journey-card small {
        font-size: 3.5px;
        letter-spacing: .06em;
    }

    .journey-card h4 {
        font-size: 6px;
        margin: 1px 0 0;
    }

    .journey-card p {
        font-size: 4.5px;
        margin-top: 2px;
    }

    .stat-sub-text {
        font-size: 4.5px;
    }

    .integration-card {
        width: 96px;
        max-height: 130px;
        border-radius: 8px 8px 0 0;
        padding: 2px;
    }

    .integration-header {
        padding: 3px 6px;
    }

    .integration-header span:first-child,
    .integration-header span:last-child {
        font-size: 4px;
    }

    .integration-card ul li {
        padding: 2px 6px;
    }

    .integration-card li span:first-child {
        font-size: 5.5px;
        padding-left: 11px;
    }

    .integration-card li span:first-child::before {
        width: 4px;
        height: 4px;
    }

    .integration-card li span:last-child {
        font-size: 4px;
    }

    .cloud-provider {
        width: 18px;
        height: 18px;
    }

}

@media (min-width: 480px) and (max-width: 566.5px) {
    .kl-journey-section {
        padding: 36px 0;
    }

    .kl-journey-card {
        height: 288px;
        padding: 14px 16px;
        border-radius: 16px;
    }

    /*    . kl-card-heading { font-size: 13.5px; margin-bottom: 5px; }
    .kl-card-para {
        font-size: 9px;
        max-width: 160px;
        line-height: 1.18;
    }*/
    /*    .kl-cloud-svg {
        width: 50%;
        max-width: 218px;
        top: -52px;
        left: 18px;
    }*/
    /*    .kl-cloud-svg {
        width: 50%;
        max-width: 210px;
        top: -38px;
        left: 18px;
    }*/
    /*    .kl-floating-svg {
        width: 152px;
        right: -19px;
        top: -60px;
    }*/
    .kl-stats {
        width: 78px;
        gap: 4px;
    }

    .kl-right-content {
        gap: 16px;
    }

    .journey-card {
        padding: 3px 4px;
        border-radius: 5px;
        margin-bottom: 0;
    }

    .journey-card small {
        font-size: 3.8px;
        letter-spacing: .07em;
    }

    .journey-card h4 {
        font-size: 6.8px;
        margin: 1px 0 0;
    }

    .journey-card p {
        font-size: 5px;
        margin-top: 2px;
    }

    .stat-sub-text {
        font-size: 5px;
    }

    .integration-card {
        width: 114px;
        max-height: 152px;
        border-radius: 9px 9px 0 0;
        padding: 2px;
    }

    .integration-header {
        padding: 4px 7px;
    }

    .integration-header span:first-child,
    .integration-header span:last-child {
        font-size: 4.8px;
    }

    .integration-card ul li {
        padding: 3px 7px;
    }

    .integration-card li span:first-child {
        font-size: 6.5px;
        padding-left: 12px;
    }

    .integration-card li span:first-child::before {
        width: 5px;
        height: 5px;
    }

    .integration-card li span:last-child {
        font-size: 4.5px;
    }

    .cloud-provider {
        width: 22px;
        height: 22px;
    }
}

@media (min-width: 567px) and (max-width: 639.5px) {
    .kl-journey-section {
        padding: 40px 0;
    }

    .kl-journey-card {
        height: 330px;
        padding: 16px 18px;
        border-radius: 17px;
    }

    /*    . kl-card-heading { font-size: 15px; margin-bottom: 5px; }
    .kl-card-para  { font-size: 10px; max-width: 178px; line-height: 1.2; }*/
    /*    .kl-cloud-svg {
        width: 51%;
        max-width: 248px;
        top: -8px;
        left: 68px;
    }*/
    /*    .kl-cloud-svg {
        width: 51%;
        max-width: 240px;
        top: -12px;
        left: 46px;
    }*/
    /*    .kl-floating-svg {
        width: 176px;
        right: -22px;
        top: -50px;
    }*/
    .kl-stats {
        width: 88px;
        gap: 5px;
    }

    .kl-right-content {
        gap: 23px;
    }

    .journey-card {
        padding: 3px 5px;
        border-radius: 6px;
        margin-bottom: 0;
    }

    .journey-card small {
        font-size: 4.2px;
        letter-spacing: .07em;
    }

    .journey-card h4 {
        font-size: 7.5px;
        margin: 1px 0 0;
    }

    .journey-card p {
        font-size: 5.5px;
        margin-top: 2px;
    }

    .stat-sub-text {
        font-size: 5.5px;
    }

    .integration-card {
        width: 128px;
        max-height: 170px;
        border-radius: 10px 10px 0 0;
        padding: 3px;
    }

    .integration-header {
        padding: 5px 8px;
    }

    .integration-header span:first-child,
    .integration-header span:last-child {
        font-size: 5.2px;
    }

    .integration-card ul li {
        padding: 4px 8px;
    }

    .integration-card li span:first-child {
        font-size: 7px;
        padding-left: 12px;
    }

    .integration-card li span:first-child::before {
        width: 5px;
        height: 5px;
    }

    .integration-card li span:last-child {
        font-size: 5px;
    }

    .cloud-provider {
        width: 26px;
        height: 26px;
    }
}

@media (min-width: 640px) and (max-width: 719.5px) {
    .kl-journey-section {
        padding: 44px 0;
    }

    .kl-journey-card {
        height: 352px;
        padding: 18px 20px;
        border-radius: 18px;
    }

    /*    . kl-card-heading { font-size: 16px; margin-bottom: 6px; }
    .kl-card-para  { font-size: 10.5px; max-width: 196px; line-height: 1.22; }*/
    /*    .kl-cloud-svg {
        width: 52%;
        max-width: 272px;
        top: -4px;
        left: 72px;
    }*/
    /*    .kl-cloud-svg {
        width: 52%;
        max-width: 266px;
        top: -4px;
        left: 72px;
    }*/
    /*    .kl-floating-svg {
        width: 196px;
        right: -21px;
        top: -44px;
    }*/
    .kl-stats {
        width: 96px;
        gap: 5px;
    }

    .kl-right-content {
        gap: 27px;
    }

    .journey-card {
        padding: 3px 5px;
        border-radius: 6px;
        margin-bottom: 0;
    }

    .journey-card small {
        font-size: 4.5px;
        letter-spacing: .07em;
    }

    .journey-card h4 {
        font-size: 8px;
        margin: 1px 0 0;
    }

    .journey-card p {
        font-size: 5.8px;
        margin-top: 2px;
    }

    .stat-sub-text {
        font-size: 5.8px;
    }

    .integration-card {
        width: 138px;
        max-height: 180px;
        border-radius: 10px 10px 0 0;
        padding: 3px;
    }

    .integration-header {
        padding: 5px 9px;
    }

    .integration-header span:first-child,
    .integration-header span:last-child {
        font-size: 5.5px;
    }

    .integration-card ul li {
        padding: 4px 8px;
    }

    .integration-card li span:first-child {
        font-size: 7.5px;
        padding-left: 12px;
    }

    .integration-card li span:first-child::before {
        width: 5px;
        height: 5px;
    }

    .integration-card li span:last-child {
        font-size: 5.2px;
    }

    .cloud-provider {
        width: 28px;
        height: 28px;
    }
}

@media (min-width: 720px) and (max-width: 767.5px) {
    .kl-journey-section {
        padding: 48px 0;
    }

    .kl-journey-card {
        height: 372px;
        padding: 20px 22px;
        border-radius: 19px;
    }

    /*    . kl-card-heading { font-size: 17px; margin-bottom: 6px; }
    .kl-card-para  { font-size: 11px; max-width: 210px; line-height: 1.22; }*/
    /*    .kl-cloud-svg {
        width: 53%;
        max-width: 292px;
        top: 2px;
        left: 72px;
    }*/
    /*
    .kl-floating-svg {
        width: 214px;
        right: -30px;
        top: -36px;
    }*/
    .kl-stats {
        width: 104px;
        gap: 6px;
    }

    .kl-right-content {
        gap: 26px;
    }

    .journey-card {
        padding: 4px 5px;
        border-radius: 7px;
        margin-bottom: 0;
    }

    .journey-card small {
        font-size: 4.8px;
        letter-spacing: .07em;
    }

    .journey-card h4 {
        font-size: 8.5px;
        margin: 1px 0 0;
    }

    .journey-card p {
        font-size: 6px;
        margin-top: 2px;
    }

    .stat-sub-text {
        font-size: 6px;
    }

    .integration-card {
        width: 148px;
        max-height: 190px;
        border-radius: 11px 11px 0 0;
        padding: 3px;
    }

    .integration-header {
        padding: 6px 10px;
    }

    .integration-header span:first-child,
    .integration-header span:last-child {
        font-size: 5.8px;
    }

    .integration-card ul li {
        padding: 4px 9px;
    }

    .integration-card li span:first-child {
        font-size: 8px;
        padding-left: 13px;
    }

    .integration-card li span:first-child::before {
        width: 5px;
        height: 5px;
    }

    .integration-card li span:last-child {
        font-size: 5.5px;
    }

    .cloud-provider {
        width: 30px;
        height: 30px;
    }
}

@media (min-width: 768px) and (max-width: 849.5px) {
    .kl-journey-section {
        padding: 52px 0;
    }

    .kl-journey-card {
        height: 400px;
        padding: 20px 24px;
        border-radius: 20px;
    }

    /*    . kl-card-heading { font-size: 18.5px; margin-bottom: 7px; }
    .kl-card-para  { font-size: 11.5px; max-width: 230px; line-height: 1.22; }*/
    /*    .kl-cloud-svg {
        width: 54%;
        max-width: 328px;
        bottom: -12px;
        left: -8px;
    }*/
    /*    .kl-cloud-svg {
        width: 54%;
        max-width: 314px;
        bottom: -347px;
        left: 45px;
    }*/
    /*    .kl-floating-svg {
        width: 234px;
        right: -26px;
        top: -26px;
    }*/
    .kl-stats {
        width: 108px;
        gap: 15px;
    }

    .kl-right-content {
        gap: 30px;
    }

    .journey-card {
        padding: 4px 5px;
        border-radius: 7px;
        margin-bottom: 0;
    }

    .journey-card small {
        font-size: 4.5px;
        letter-spacing: .07em;
    }

    .journey-card h4 {
        font-size: 8.5px;
        margin: 1px 0 0;
    }

    .journey-card p {
        font-size: 6px;
        margin-top: 2px;
    }

    .stat-sub-text {
        font-size: 6.5px;
    }

    .integration-card {
        width: 158px;
        max-height: 200px;
        border-radius: 12px 12px 0 0;
        padding: 3px;
    }

    .integration-header {
        padding: 6px 11px;
    }

    .integration-header span:first-child,
    .integration-header span:last-child {
        font-size: 6px;
    }

    .integration-card ul li {
        padding: 5px 10px;
    }

    .integration-card li span:first-child {
        font-size: 8px;
        padding-left: 13px;
    }

    .integration-card li span:first-child::before {
        width: 6px;
        height: 6px;
    }

    .integration-card li span:last-child {
        font-size: 5.8px;
    }

    .cloud-provider {
        width: 32px;
        height: 32px;
    }
}

@media (min-width: 850px) and (max-width: 990.5px) {
    .kl-journey-section {
        padding: 58px 0;
    }

    .kl-journey-card {
        height: 428px;
        padding: 22px 26px;
        border-radius: 21px;
    }

    /*    . kl-card-heading { font-size: 20px; margin-bottom: 7px; }
    .kl-card-para  { font-size: 12px; max-width: 260px; line-height: 1.22; }*/
    /*    .kl-cloud-svg {
        width: 55%;
        max-width: 372px;
        bottom: -16px;
        left: -10px;
    }*/
    /*    .kl-cloud-svg {
        width: 55%;
        max-width: 344px;
        top: 26px;
        left: 100px;
    }*/
    /*    .kl-floating-svg {
        width: 258px;
        right: -38px;
        top: -15px;
    }*/
    .kl-stats {
        width: 118px;
        gap: 15px;
    }

    .kl-right-content {
        gap: 24px;
    }

    .journey-card {
        padding: 4px 6px;
        border-radius: 7px;
        margin-bottom: 0;
    }

    .journey-card small {
        font-size: 4.8px;
        letter-spacing: .08em;
    }

    .journey-card h4 {
        font-size: 9px;
        margin: 1px 0 0;
    }

    .journey-card p {
        font-size: 6.5px;
        margin-top: 2px;
    }

    .stat-sub-text {
        font-size: 7px;
    }

    .integration-card {
        width: 176px;
        max-height: 218px;
        border-radius: 13px 13px 0 0;
        padding: 4px;
    }

    .integration-header {
        padding: 7px 12px;
    }

    .integration-header span:first-child,
    .integration-header span:last-child {
        font-size: 6.2px;
    }

    .integration-card ul li {
        padding: 5px 11px;
    }

    .integration-card li span:first-child {
        font-size: 8.5px;
        padding-left: 14px;
    }

    .integration-card li span:first-child::before {
        width: 6px;
        height: 6px;
    }

    .integration-card li span:last-child {
        font-size: 6px;
    }

    .cloud-provider {
        width: 36px;
        height: 36px;
    }

    .finops-platform-section .finops-chart-body {
        gap: 12px;
        height: 182px;
    }

    .finops-chart-card .finops-graph-area,
    .finops-chart-card .finops-graph-area svg {
        height: 182px;
    }
}

@media (min-width: 991px) and (max-width: 1023.5px) {
    .kl-journey-section {
        padding: 64px 0;
    }

    .kl-journey-card {
        height: 452px;
        padding: 24px 28px;
        border-radius: 22px;
    }

    /*    . kl-card-heading { font-size: 21px; margin-bottom: 8px; }
    .kl-card-para  { font-size: 12.5px; max-width: 276px; line-height: 1.23; }*/
    /*    .kl-cloud-svg {
        width: 55%;
        max-width: 400px;
        bottom: -18px;
        left: -12px;
    }*/
    /*    .kl-cloud-svg {
        width: 80%;
        max-width: 414px;
        top: 38px;
        left: 77px;
    }*/
    /*    .kl-floating-svg {
        width: 276px;
        right: -39px;
        top: -8px;
    }*/
    .kl-stats {
        width: 124px;
        gap: 12px;
    }

    .kl-right-content {
        gap: 28px;
    }

    .journey-card {
        padding: 5px 6px;
        border-radius: 8px;
        margin-bottom: 0;
    }

    .journey-card small {
        font-size: 5px;
        letter-spacing: .08em;
    }

    .journey-card h4 {
        font-size: 9.5px;
        margin: 1px 0 0;
    }

    .journey-card p {
        font-size: 7px;
        margin-top: 2px;
    }

    .stat-sub-text {
        font-size: 7.2px;
    }

    .integration-card {
        width: 188px;
        max-height: 232px;
        border-radius: 14px 14px 0 0;
        padding: 4px;
    }

    .integration-header {
        padding: 7px 13px;
    }

    .integration-header span:first-child,
    .integration-header span:last-child {
        font-size: 6.4px;
    }

    .integration-card ul li {
        padding: 5px 12px;
    }

    .integration-card li span:first-child {
        font-size: 9px;
        padding-left: 14px;
    }

    .integration-card li span:first-child::before {
        width: 6px;
        height: 6px;
    }

    .integration-card li span:last-child {
        font-size: 6.2px;
    }

    .cloud-provider {
        width: 38px;
        height: 38px;
    }
}

@media (min-width: 1024px) and (max-width: 1099.5px) {
    .kl-journey-section {
        padding: 70px 0;
    }

    .kl-journey-card {
        height: 474px;
        padding: 26px 30px;
        border-radius: 23px;
    }

    /*    . kl-card-heading { font-size: 22px; margin-bottom: 8px; }
    .kl-card-para  { font-size: 13px; max-width: 300px; line-height: 1.24; }*/
    /*    .kl-cloud-svg {
        width: 56%;
        max-width: 430px;
        bottom: -20px;
        left: -13px;
    }*/
    /*    .kl-cloud-svg {
        width: 80%;
        max-width: 430px;
        top: 54px;
        left: 40px;
    }*/
    /*    .kl-floating-svg {
        width: 300px;
        right: -42px;
        top: 4px;
    }*/
    .kl-stats {
        width: 132px;
        gap: 14px;
    }

    .kl-right-content {
        gap: 26px;
    }

    .journey-card {
        padding: 5px 7px;
        border-radius: 8px;
        margin-bottom: 0;
    }

    .journey-card small {
        font-size: 5.2px;
        letter-spacing: .08em;
    }

    .journey-card h4 {
        font-size: 10px;
        margin: 1px 0 0;
    }

    .journey-card p {
        font-size: 7.2px;
        margin-top: 2px;
    }

    .stat-sub-text {
        font-size: 7.5px;
    }

    .integration-card {
        width: 200px;
        max-height: 244px;
        border-radius: 14px 14px 0 0;
        padding: 4px;
    }

    .integration-header {
        padding: 8px 13px;
    }

    .integration-header span:first-child,
    .integration-header span:last-child {
        font-size: 6.6px;
    }

    .integration-card ul li {
        padding: 5px 12px;
    }

    .integration-card li span:first-child {
        font-size: 9px;
        padding-left: 14px;
    }

    .integration-card li span:first-child::before {
        width: 6px;
        height: 6px;
    }

    .integration-card li span:last-child {
        font-size: 6.4px;
    }

    .cloud-provider {
        width: 40px;
        height: 40px;
    }
}

@media (min-width: 1100px) and (max-width: 1199.5px) {
    .kl-journey-section {
        padding: 76px 0;
    }

    .kl-journey-card {
        height: 500px;
        padding: 28px 33px;
        border-radius: 24px;
    }

    /*    . kl-card-heading { font-size: 23.5px; margin-bottom: 9px; }
    .kl-card-para  { font-size: 13.5px; max-width: 325px; line-height: 1.25; }*/
    /*    .kl-cloud-svg {
        width: 57%;
        max-width: 464px;
        bottom: -22px;
        left: -14px;
    }*/
    /*    .kl-cloud-svg {
        width: 82%;
        max-width: 464px;
        top: 76px;
        left: 38px;
    }*/
    /*    .kl-floating-svg {
        width: 339px;
        right: -55px;
        top: 15px;
    }*/
    .kl-stats {
        width: 142px;
        gap: 12px;
    }

    .kl-right-content {
        gap: 26px;
    }

    .journey-card {
        padding: 5px 7px;
        border-radius: 9px;
        margin-bottom: 0;
    }

    .journey-card small {
        font-size: 5.4px;
        letter-spacing: .09em;
    }

    .journey-card h4 {
        font-size: 10.5px;
        margin: 1px 0 0;
    }

    .journey-card p {
        font-size: 7.5px;
        margin-top: 3px;
    }

    .stat-sub-text {
        font-size: 7.8px;
    }

    .integration-card {
        width: 214px;
        max-height: 256px;
        border-radius: 15px 15px 0 0;
        padding: 4px;
    }

    .integration-header {
        padding: 8px 14px;
    }

    .integration-header span:first-child,
    .integration-header span:last-child {
        font-size: 6.8px;
    }

    .integration-card ul li {
        padding: 5px 13px;
    }

    .integration-card li span:first-child {
        font-size: 9.5px;
        padding-left: 15px;
    }

    .integration-card li span:first-child::before {
        width: 6px;
        height: 6px;
    }

    .integration-card li span:last-child {
        font-size: 6.6px;
    }

    .cloud-provider {
        width: 44px;
        height: 44px;
    }
}

@media (min-width: 1200px) and (max-width: 1279px) {
    .kl-journey-section {
        padding: 82px 0;
    }

    .kl-journey-card {
        height: 524px;
        padding: 30px 36px;
        border-radius: 25px;
    }

    /*    . kl-card-heading { font-size: 25px; margin-bottom: 9px; }
    .kl-card-para  { font-size: 14px; max-width: 348px; line-height: 1.25; }*/
    /*    .kl-cloud-svg {
        width: 57%;
        max-width: 500px;
        bottom: -24px;
        left: -15px;
    }*/
    /*    .kl-cloud-svg {
        width: 95%;
        max-width: 527px;
        top: 82px;
        left: 55px;
    }*/
    /*    .kl-floating-svg {
        width: 363px;
        right: -70px;
        top: 20px;
    }*/
    .kl-stats {
        width: 152px;
        gap: 7px;
    }

    .kl-right-content {
        gap: 28px;
    }

    .journey-card {
        padding: 9px 7px;
        border-radius: 9px;
        margin-bottom: 0;
    }

    .journey-card small {
        font-size: 5.6px;
        letter-spacing: .09em;
    }

    .journey-card h4 {
        font-size: 10.8px;
        margin: 1px 0 0;
    }

    .journey-card p {
        font-size: 7.8px;
        margin-top: 3px;
    }

    .stat-sub-text {
        font-size: 8.2px;
    }

    .integration-card {
        width: 228px;
        max-height: 268px;
        border-radius: 15px 15px 0 0;
        padding: 4px;
    }

    .integration-header {
        padding: 8px 15px;
    }

    .integration-header span:first-child,
    .integration-header span:last-child {
        font-size: 7px;
    }

    .integration-card ul li {
        padding: 5px 14px;
    }

    .integration-card li span:first-child {
        font-size: 9.8px;
        padding-left: 15px;
    }

    .integration-card li span:first-child::before {
        width: 6px;
        height: 6px;
    }

    .integration-card li span:last-child {
        font-size: 6.8px;
    }

    .cloud-provider {
        width: 48px;
        height: 48px;
    }
}

@media (min-width: 1300px) and (max-width: 1439.5px) {
    .kl-journey-section {
        padding: 88px 0;
    }

    .kl-journey-card {
        height: 542px;
        padding: 32px 38px;
        border-radius: 26px;
    }

    /* . kl-card-heading { font-size: 26.5px; margin-bottom: 10px; }
    .kl-card-para  { font-size: 14.5px; max-width: 368px; line-height: 1.26; }*/
    /*    .kl-cloud-svg {
        width: 58%;
        max-width: 530px;
        bottom: -26px;
        left: -16px;
    }*/
    /*   .kl-cloud-svg {
        width: 100%;
        max-width: 546px;
        top: 102px;
        left: 34px;
    }*/
    /*    .kl-floating-svg {
        height: 310px;
        right: -43px;
        top: 16px;
    }*/
    .kl-stats {
        width: 160px;
        gap: 11px;
    }

    .kl-right-content {
        gap: 41px;
    }

    .journey-card {
        padding: 10px 8px;
        border-radius: 10px;
        margin-bottom: 0;
    }

    .journey-card small {
        font-size: 5.8px;
        letter-spacing: .1em;
    }

    .journey-card h4 {
        font-size: 11px;
        margin: 1px 0 0;
    }

    .journey-card p {
        font-size: 8px;
        margin-top: 3px;
    }

    .stat-sub-text {
        font-size: 8.5px;
    }

    .integration-card {
        width: 295px;
        max-height: 278px;
        border-radius: 16px 16px 0 0;
        padding: 4px;
    }

    .integration-header {
        padding: 9px 16px;
    }

    .integration-header span:first-child,
    .integration-header span:last-child {
        font-size: 7.2px;
    }

    .integration-card ul li {
        padding: 6px 14px;
    }

    .integration-card li span:first-child {
        font-size: 10px;
        padding-left: 15px;
    }

    .integration-card li span:first-child::before {
        width: 6px;
        height: 6px;
    }

    .integration-card li span:last-child {
        font-size: 7px;
    }

    .cloud-provider {
        width: 50px;
        height: 50px;
    }

}

@media (min-width: 1440px) and (max-width: 1529.5px) {
    .kl-journey-section {
        padding: 96px 0;
    }

    .kl-journey-card {
        height: 564px;
        padding: 34px 42px;
        border-radius: 28px;
    }

    /*    . kl-card-heading { font-size: 29px; margin-bottom: 11px; }
    .kl-card-para  { font-size: 15px; max-width: 398px; line-height: 1.27; }*/
    /*    .kl-cloud-svg {
        width: 100%;
        max-width: 574px;
        top: 122px;
        left: 105px;
    }*/
    /*    .kl-floating-svg {
        height: 320px;
        right: -46px;
        top: 24px;
    }*/
    .kl-stats {
        width: 172px;
        gap: 12px;
    }

    .kl-right-content {
        gap: 45px;
    }

    .journey-card {
        padding: 6px 8px;
        border-radius: 10px;
        margin-bottom: 0;
    }

    .journey-card small {
        font-size: 6px;
        letter-spacing: .1em;
    }

    .journey-card h4 {
        font-size: 11.5px;
        margin: 1px 0 0;
    }

    .journey-card p {
        font-size: 8.2px;
        margin-top: 3px;
    }

    .stat-sub-text {
        font-size: 8.8px;
    }

    .integration-card {
        width: 296px;
        max-height: 290px;
        border-radius: 17px 17px 0 0;
        padding: 4px;
    }

    .integration-header {
        padding: 9px 17px;
    }

    .integration-header span:first-child,
    .integration-header span:last-child {
        font-size: 7.6px;
    }

    .integration-card ul li {
        padding: 6px 15px;
    }

    .integration-card li span:first-child {
        font-size: 10.2px;
        padding-left: 16px;
    }

    .integration-card li span:first-child::before {
        width: 6px;
        height: 6px;
    }

    .integration-card li span:last-child {
        font-size: 7.4px;
    }

    .cloud-provider {
        width: 54px;
        height: 54px;
    }
}

@media (min-width: 1530px) {
    .kl-journey-section {
        padding: 110px 0;
    }

    .kl-journey-card {
        height: 600px;
        padding: 46px 52px;
        border-radius: 32px;
    }

    /*    . kl-card-heading { font-size: 34px; margin-bottom: 14px; }
    .kl-card-para  { font-size: 18px; max-width: 460px; line-height: 1.28; }*/
    /*    .kl-cloud-svg {
        width: 100%;
        max-width: 660px;
        top: 142px;
        left: 57px;
    }*/
    /*    .kl-floating-svg {
        height: 346px;
        right: -87px;
        top: 20px;
    }*/
    .kl-stats {
        width: 192px;
        gap: 14px;
    }

    .kl-right-content {
        gap: 37px;
    }

    .journey-card {
        padding: 7px 9px;
        border-radius: 11px;
        margin-bottom: 0;
    }

    .journey-card small {
        font-size: 6.5px;
        letter-spacing: .12em;
    }

    .journey-card h4 {
        font-size: 12.5px;
        margin: 1px 0 0;
    }

    .journey-card p {
        font-size: 8.5px;
        margin-top: 3px;
    }

    .stat-sub-text {
        font-size: 9.5px;
    }

    .integration-card {
        width: 278px;
        max-height: 310px;
        border-radius: 19px 19px 0 0;
        padding: 4px;
    }

    .integration-header {
        padding: 10px 19px;
    }

    .integration-header span:first-child,
    .integration-header span:last-child {
        font-size: 9px;
    }

    .integration-card ul li {
        padding: 6px 17px;
    }

    .integration-card li span:first-child {
        font-size: 11px;
        padding-left: 16px;
    }

    .integration-card li span:first-child::before {
        width: 6px;
        height: 6px;
    }

    .integration-card li span:last-child {
        font-size: 8.5px;
    }

    .cloud-provider {
        width: 62px;
        height: 62px;
    }
}

.synops-body-section .footer-strip {
    background-color: #040A13;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.synops-strip-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-height: 110px;
}

.strip-logo {
    display: flex;
    align-items: center;
    /*    justify-content: center;*/
    justify-content: flex-start;
    gap: 1.25rem;
}

.strip-contact-column {
    margin-left: auto;
    flex-shrink: 0;
    align-self: stretch;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.strip-contact {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    gap: 0;
}

.strip-contact-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: #fff;
    flex-shrink: 0;
    margin: auto 0 auto 1rem;
    text-decoration: none;
    transition: background 0.2s;
}

.strip-contact-arrow:hover {
    background: #e0e0e0;
}

.strip-contact-arrow img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.strip-contact-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 1rem;
    height: 100%;


}

.strip-contact-text span {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #fff;
    line-height: 1;
    display: block;
}

@media (max-width: 768px) {
    .synops-strip-row {
        flex-wrap: wrap !important;
        min-height: unset;
        padding: 1.25rem 0;
        gap: 1rem;
    }

    .strip-contact-column {
        margin-left: 0;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        width: 100%;
        padding-top: 1rem;
    }

    .strip-contact {
        justify-content: center;
    }

    .strip-contact-arrow {
        margin: 0;
    }
}


.strip-contact-text {
    width: auto !important;
    gap: 8px !important;
    overflow: visible !important;
}

.strip-contact-text,
.strip-contact,
.strip-contact-column {
    overflow: visible !important;
    width: auto !important;
}

.strip-contact-column {
    border-left: none !important;
}

.synops-strip-row > .strip-contact-column {
    transform: none !important;
    position: absolute !important;
    top: 32px !important;
    right: -27px !important;
    bottom: unset !important;
    height: auto !important;
    z-index: 100002 !important;
}

.footer-strip {
    overflow: visible !important;
    position: relative !important;
    z-index: 100002 !important;
}

.top-strip {
    overflow: visible !important;
}

@media (min-width: 1530px) {
    .synops-strip-row > .strip-contact-column {
        top: 32px !important;
        right: -69px !important;
    }
}

@media (min-width: 1480px) and (max-width: 1529.5px) {
    .synops-strip-row > .strip-contact-column {
        top: 32px !important;
        right: -65px !important;
    }
}

@media (min-width: 1440px) and (max-width: 1479.5px) {
    .synops-strip-row > .strip-contact-column {
        top: 32px !important;
        right: -45px !important;
    }
}

@media (min-width: 1340px) and (max-width: 1439.5px) {
    .synops-strip-row > .strip-contact-column {
        top: 32px !important;
        right: -57px !important;
    }
}

@media (min-width: 1300px) and (max-width: 1339.5px) {
    .synops-strip-row > .strip-contact-column {
        top: 32px !important;
        right: -27px !important;
    }
}

@media (min-width: 1199px) and (max-width: 1279px) {
    .synops-strip-row > .strip-contact-column {
        top: 32px !important;
        right: -27px !important;
    }
}

@media (min-width: 1111px) and (max-width: 1198.5px) {
    .synops-strip-row > .strip-contact-column {
        top: 32px !important;
        right: -68px !important;
    }
}

@media (min-width: 1024px) and (max-width: 1110.5px) {
    .synops-strip-row > .strip-contact-column {
        top: 32px !important;
        right: -42px !important;
    }
}

@media (min-width: 991px) and (max-width: 1023.5px) {
    .synops-strip-row > .strip-contact-column {
        top: 32px !important;
        right: -27px !important;
    }
}

@media (min-width: 768px) and (max-width: 990.5px) {
    .synops-strip-row > .strip-contact-column {
        top: 32px !important;
        right: -27px !important;
    }
}

@media (max-width: 767.5px) {
    .synops-strip-row > .strip-contact-column {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .companyINFO > .section-container > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

.companyINFO > .section-container > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ════════════════════════════════════════════════════════
   SYNOPS CLOUD SVG — ANIMATION
   ════════════════════════════════════════════════════════ */

/* Clip overflow so pills don't show while sliding in */
.synops-cloud-image {
    overflow: hidden;
}

/* ── Hidden state ── */
/*.synops-cloud-svg .sc-center-logo {
    opacity: 0;
    transform-origin: 459px 283px;
    transform: scale(0.2);
    transition: opacity 0.5s ease 0.1s, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
}*/

.synops-cloud-svg .sc-center-logo {
    opacity: 0;
    transform-origin: 459px 283px;
    transform: scale(0.2);
    transition: opacity 0.5s ease 0s, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0s;
}

/*.synops-cloud-svg .sc-pill-gcloud {
    opacity: 0;
    transform: translateX(-200px);
    transition: opacity 0.55s ease 0.7s, transform 0.55s cubic-bezier(0.34, 1.2, 0.64, 1) 0.7s;
}*/
.synops-cloud-svg .sc-pill-gcloud {
    opacity: 0;
    transform: translateX(-200px);
    transition: opacity 0.55s ease 0.25s, transform 0.55s cubic-bezier(0.34, 1.2, 0.64, 1) 0.25s;
}

/*.synops-cloud-svg .sc-pill-aws {
    opacity: 0;
    transform: translateX(200px);
    transition: opacity 0.55s ease 0.9s, transform 0.55s cubic-bezier(0.34, 1.2, 0.64, 1) 0.9s;
}*/
.synops-cloud-svg .sc-pill-aws {
    opacity: 0;
    transform: translateX(200px);
    transition: opacity 0.55s ease 0.4s, transform 0.55s cubic-bezier(0.34, 1.2, 0.64, 1) 0.4s;
}

/*.synops-cloud-svg .sc-pill-azure {
    opacity: 0;
    transform: translateX(-200px);
    transition: opacity 0.55s ease 1.05s, transform 0.55s cubic-bezier(0.34, 1.2, 0.64, 1) 1.05s;
}*/
.synops-cloud-svg .sc-pill-azure {
    opacity: 0;
    transform: translateX(-200px);
    transition: opacity 0.55s ease 0.55s, transform 0.55s cubic-bezier(0.34, 1.2, 0.64, 1) 0.55s;
}

/*.synops-cloud-svg .sc-pill-oracle {
    opacity: 0;
    transform: translateX(200px);
    transition: opacity 0.55s ease 1.2s, transform 0.55s cubic-bezier(0.34, 1.2, 0.64, 1) 1.2s;
}*/
.synops-cloud-svg .sc-pill-oracle {
    opacity: 0;
    transform: translateX(200px);
    transition: opacity 0.55s ease 0.7s, transform 0.55s cubic-bezier(0.34, 1.2, 0.64, 1) 0.7s;
}

/*.synops-cloud-svg .sc-dot {
    opacity: 0;
    transition: opacity 0.35s ease;
}*/
.synops-cloud-svg .sc-dot {
    opacity: 0;
    transition: opacity 0.35s ease;
}

/*.synops-cloud-svg .sc-dot-gcloud { transition-delay: 1.0s; }
.synops-cloud-svg .sc-dot-aws    { transition-delay: 1.2s; }
.synops-cloud-svg .sc-dot-azure  { transition-delay: 1.35s; }
.synops-cloud-svg .sc-dot-oracle { transition-delay: 1.5s; }*/
.synops-cloud-svg .sc-dot-gcloud {
    transition-delay: 0.5s;
}

.synops-cloud-svg .sc-dot-aws {
    transition-delay: 0.65s;
}

.synops-cloud-svg .sc-dot-azure {
    transition-delay: 0.8s;
}

.synops-cloud-svg .sc-dot-oracle {
    transition-delay: 0.95s;
}

/* ── Animated state — triggered when section enters viewport ── */
.synops-cloud-animated .synops-cloud-svg .sc-center-logo {
    opacity: 1;
    transform: scale(1);
}

.synops-cloud-animated .synops-cloud-svg .sc-pill-gcloud,
.synops-cloud-animated .synops-cloud-svg .sc-pill-aws,
.synops-cloud-animated .synops-cloud-svg .sc-pill-azure,
.synops-cloud-animated .synops-cloud-svg .sc-pill-oracle {
    opacity: 1;
    transform: translateX(0);
}

.synops-cloud-animated .synops-cloud-svg .sc-dot {
    opacity: 1;
}

/* =============================================
   YOUR JOURNEY SECTION — MEDIA QUERIES
============================================= */

@media (max-width: 320px) {

    /*    .kl-journey-section       { padding: 22px 0; }
    .kl-journey-card          { height: 200px; padding: 9px 10px; border-radius: 10px; }*/
    .kl-card-heading {
        font-size: 9px;
        margin-bottom: 3px;
    }

    .kl-card-para {
        font-size: 6.5px;
        line-height: 1.1;
    }

    /*    .kl-cloud-svg {
        position: absolute !important;
        width: 50%;
        max-width: 160px;
        height: auto;
        top: 8px;
        left: 9px;
        margin: 0 !important;
        z-index: 1;
        pointer-events: none;
    }*/
    /* .kl-floating-svg          { width: 90px; top: -86px; right: -5px; height: auto; transform: none; left: auto; }*/
    .kl-right-content {
        gap: 3px;
        right: 6px;
        bottom: 6px;
    }

    .cloud-visibility-card {
        width: 105px;
        height: auto;
        padding: 6px 7px;
        border-radius: 8px;
    }

    .cloud-visibility-title {
        font-size: 5.5px;
        margin-bottom: 5px;
        letter-spacing: 0.5px;
    }

    .visibility-item {
        gap: 4px;
        min-height: 18px;
    }

    .visibility-icon {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
    }

    .visibility-icon img {
        width: 14px;
        height: 14px;
    }

    .visibility-content h4 {
        font-size: 4.5px;
        margin-bottom: 1px;
    }

    .visibility-content p {
        font-size: 3.5px;
        margin-bottom: 4px;
    }

    .visibility-arrow {
        margin: 2px 0;
        gap: 2px;
    }

    .visibility-arrow div {
        font-size: 4px;
    }

    .kl-journey-card::after {
        width: 150px;
        height: 150px;
        left: -60px;
        bottom: -60px;
    }

}

/* ── 320px – 479.5px ──────────────────────── */
@media (min-width: 320.5px) and (max-width: 479.5px) {

    .kl-journey-section {
        padding: 28px 0;
    }

    .kl-journey-card {
        height: 240px;
        padding: 10px 12px;
        border-radius: 12px;
    }

    .kl-card-heading {
        font-size: 10.5px;
        margin-bottom: 3px;
    }

    .kl-card-para {
        font-size: 7.5px;
        line-height: 1.15;
    }

    /*    .kl-cloud-svg             {
        position: absolute !important;
        width: 48%; max-width: 175px;
        height: auto;
        top: -61px; left: 1px;
        margin: 0 !important;
        z-index: 1;
        pointer-events: none;
    }*/
    /*  .kl-floating-svg          { width: 117px; top: -81px; right: -8px; height: auto; transform: none; left: auto; }*/
    .kl-right-content {
        gap: 6px;
        right: 8px;
        bottom: 6px;
    }

    .cloud-visibility-card {
        width: 113px;
        height: auto;
        padding: 7px 8px;
        border-radius: 9px;
    }

    .cloud-visibility-title {
        font-size: 6px;
        margin-bottom: 6px;
        letter-spacing: 0.6px;
    }

    .visibility-item {
        gap: 5px;
        min-height: 20px;
    }

    .visibility-icon {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
    }

    .visibility-icon img {
        width: 16px;
        height: 16px;
    }

    .visibility-content h4 {
        font-size: 5px;
        margin-bottom: 1px;
    }

    .visibility-content p {
        font-size: 4px;
        margin-bottom: 5px;
    }

    .visibility-arrow {
        margin: 2px 0;
        gap: 2px;
    }

    .visibility-arrow div {
        font-size: 5px;
    }

    .kl-journey-card::after {
        width: 200px;
        height: 200px;
        left: -80px;
        bottom: -80px;
    }

}

/* ── 480px – 566.5px ──────────────────────── */
@media (min-width: 480px) and (max-width: 566.5px) {

    .kl-journey-section {
        padding: 36px 0;
    }

    .kl-journey-card {
        height: 288px;
        padding: 14px 16px;
        border-radius: 16px;
    }

    .kl-card-heading {
        font-size: 13.5px;
        margin-bottom: 5px;
    }

    .kl-card-para {
        font-size: 9px;
        line-height: 1.18;
    }

    /*    .kl-cloud-svg             {
        position: absolute !important;
        width: 50%; max-width: 210px;
        height: auto;
        top: -38px; left: 18px;
        margin: 0 !important;
        z-index: 1;
        pointer-events: none;
    }*/
    /*    .kl-floating-svg          { width: 152px; top: -60px; right: -19px; height: auto; transform: none; left: auto; }*/
    .kl-right-content {
        gap: 8px;
        right: 12px;
        bottom: 8px;
    }

    .cloud-visibility-card {
        width: 155px;
        height: auto;
        padding: 9px 10px;
        border-radius: 10px;
    }

    .cloud-visibility-title {
        font-size: 7px;
        margin-bottom: 7px;
        letter-spacing: 0.7px;
    }

    .visibility-item {
        gap: 6px;
        min-height: 24px;
    }

    .visibility-icon {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
    }

    .visibility-icon img {
        width: 18px;
        height: 18px;
    }

    .visibility-content h4 {
        font-size: 6px;
        margin-bottom: 2px;
    }

    .visibility-content p {
        font-size: 4.8px;
        margin-bottom: 6px;
    }

    .visibility-arrow {
        margin: 3px 0;
        gap: 3px;
    }

    .visibility-arrow div {
        font-size: 6px;
    }

    .kl-journey-card::after {
        width: 250px;
        height: 250px;
        left: -100px;
        bottom: -100px;
    }

}

/* ── 567px – 767.5px ──────────────────────── */
@media (min-width: 567px) and (max-width: 767.5px) {

    .kl-journey-section {
        padding: 48px 0;
    }

    .kl-journey-card {
        height: 360px;
        padding: 18px 20px;
        border-radius: 18px;
    }

    .kl-card-heading {
        font-size: 16px;
        margin-bottom: 6px;
    }

    .kl-card-para {
        font-size: 10.5px;
    }

    /*    .kl-cloud-svg             {
        width: 54%; max-width: 271px;
        height: auto;
        top: 4px; left: 101px;
        position: relative;
        margin: 0;
    }*/
    /* .kl-floating-svg          { width: 189px; top: -46px; right: -18px; height: auto; transform: none; left: auto; }*/
    .kl-right-content {
        gap: 18px;
        right: 14px;
        bottom: 10px;
    }

    .cloud-visibility-card {
        width: 185px;
        height: auto;
        padding: 12px 14px;
        border-radius: 12px;
    }

    .cloud-visibility-title {
        font-size: 9px;
        margin-bottom: 9px;
    }

    .visibility-item {
        gap: 8px;
        min-height: 28px;
    }

    .visibility-icon {
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
    }

    .visibility-icon img {
        width: 22px;
        height: 22px;
    }

    .visibility-content h4 {
        font-size: 7.5px;
        margin-bottom: 2px;
    }

    .visibility-content p {
        font-size: 5.8px;
        margin-bottom: 7px;
    }

    .visibility-arrow {
        margin: 4px 0;
        gap: 3px;
    }

    .visibility-arrow div {
        font-size: 7px;
    }

    .kl-journey-card::after {
        width: 320px;
        height: 320px;
        left: -130px;
        bottom: -130px;
    }

}

/* ── 768px – 990.5px ──────────────────────── */
@media (min-width: 768px) and (max-width: 990.5px) {

    .kl-journey-section {
        padding: 60px 0;
    }

    .kl-journey-card {
        height: 420px;
        padding: 22px 26px;
        border-radius: 20px;
    }

    .kl-card-heading {
        font-size: 20px;
        margin-bottom: 7px;
    }

    .kl-card-para {
        font-size: 12px;
    }

    /*    .kl-cloud-svg             {
        width: 55%; max-width: 404px;
        height: auto;
        bottom: -16px; left: -12px;
        top: auto;
    }*/
    /*        .kl-floating-svg {
            width: 680px;
            height: 498px;
            left: 52%;
            right: auto;
            transform: translateX(-50%);
            top: -6px;
        }*/
    .kl-right-content {
        gap: 9px;
        right: 20px;
        bottom: 9px;
    }

    .cloud-visibility-card {
        width: 200px;
        height: auto;
        padding: 14px 16px;
        border-radius: 14px;
        max-width: 100%;
    }

    .cloud-visibility-title {
        font-size: 10px;
        margin-bottom: 10px;
    }

    .visibility-item {
        gap: 9px;
        min-height: 32px;
    }

    .visibility-icon {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
    }

    .visibility-icon img {
        width: 24px;
        height: 24px;
    }

    .visibility-content h4 {
        font-size: 8.5px;
    }

    .visibility-content p {
        font-size: 6.5px;
        margin-bottom: 8px;
    }

    .visibility-arrow {
        margin: 5px 0;
    }

    .visibility-arrow div {
        font-size: 8px;
    }

    .kl-journey-card::after {
        width: 380px;
        height: 380px;
        left: -150px;
        bottom: -150px;
    }

}

/* ── 991px – 1023.5px ─────────────────────── */
@media (min-width: 991px) and (max-width: 1023.5px) {

    .kl-journey-section {
        padding: 70px 0;
    }

    .kl-journey-card {
        height: 460px;
        padding: 26px 30px;
        border-radius: 22px;
    }

    .kl-card-heading {
        font-size: 22px;
        margin-bottom: 8px;
    }

    .kl-card-para {
        font-size: 13px;
    }

    /*    .kl-cloud-svg             {
        width: 56%; max-width: 342px;
        height: auto;
        top: 56px; left: 48px;
        bottom: auto;
    }*/
    /*    .kl-floating-svg {
        width: 740px;
        height: 542px;
        left: 53%;
        right: auto;
        transform: translateX(-50%);
        top: -7px;
    }*/
    .kl-right-content {
        gap: 11px;
        right: 24px;
        bottom: 9px;
    }

    .cloud-visibility-card {
        width: 210px;
        height: auto;
        padding: 15px 17px;
        border-radius: 15px;
    }

    .cloud-visibility-title {
        font-size: 11px;
        margin-bottom: 11px;
    }

    .visibility-item {
        gap: 9px;
        min-height: 34px;
    }

    .visibility-icon {
        width: 26px;
        height: 26px;
        flex: 0 0 26px;
    }

    .visibility-icon img {
        width: 26px;
        height: 26px;
    }

    .visibility-content h4 {
        font-size: 9px;
    }

    .visibility-content p {
        font-size: 7px;
        margin-bottom: 9px;
    }

    .visibility-arrow {
        margin: 5px 0;
    }

    .visibility-arrow div {
        font-size: 8px;
    }

    .kl-journey-card::after {
        width: 420px;
        height: 420px;
        left: -160px;
        bottom: -160px;
    }

}

/* ── 1024px – 1198.5px ────────────────────── */
@media (min-width: 1024px) and (max-width: 1198.5px) {

    .kl-journey-section {
        padding: 80px 0;
    }

    .kl-journey-card {
        height: 492px;
        padding: 30px 34px;
        border-radius: 24px;
    }

    .kl-card-heading {
        font-size: 24px;
        margin-bottom: 9px;
    }

    .kl-card-para {
        font-size: 14px;
    }

    /*    .kl-cloud-svg             {
        width: 57%; max-width: 500px;
        height: 340px;
        bottom: -24px; left: -16px;
        top: auto;
    }*/
    /*     .kl-floating-svg {
         width: 758px;
         height: 586px;
         left: 52%;
         right: auto;
         transform: translateX(-50%);
         top: -21px;
     }*/
    .kl-right-content {
        gap: 12px;
        right: 30px;
        bottom: 9px;
    }

    .cloud-visibility-card {
        width: 218px;
        height: 240px;
        padding: 16px 18px;
        border-radius: 16px;
    }

    .cloud-visibility-title {
        font-size: 12px;
        margin-bottom: 12px;
    }

    .visibility-item {
        gap: 10px;
        min-height: 36px;
    }

    .visibility-icon {
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
    }

    .visibility-icon img {
        width: 28px;
        height: 28px;
    }

    .visibility-content h4 {
        font-size: 9.5px;
    }

    .visibility-content p {
        font-size: 7.3px;
        margin-bottom: 10px;
    }

    .visibility-arrow {
        margin: 5px 0;
    }

    .visibility-arrow div {
        font-size: 8.5px;
    }

    .kl-journey-card::after {
        width: 450px;
        height: 450px;
        left: -170px;
        bottom: -170px;
    }

}

/* ── 1199px – 1279px ──────────────────────── */
@media (min-width: 1199px) and (max-width: 1279px) {

    .kl-journey-section {
        padding: 90px 0;
    }

    .kl-journey-card {
        height: 530px;
        padding: 34px 38px;
        border-radius: 26px;
    }

    .kl-card-heading {
        font-size: 26px;
        margin-bottom: 10px;
    }

    .kl-card-para {
        font-size: 15px;
    }

    /*    .kl-cloud-svg             {
        width: 58%; max-width: 560px;
        height: 360px;
        bottom: -28px; left: -18px;
        top: auto;
    }*/
    /*    .kl-floating-svg {
        width: 824px;
        height: 598px;
        left: 52%;
        right: auto;
        transform: translateX(-50%);
        top: -3px;
    }*/
    .kl-right-content {
        gap: 14px;
        right: 60px;
        bottom: 9px;
    }

    .cloud-visibility-card {
        width: 222px;
        height: 248px;
        padding: 17px 19px;
        border-radius: 16px;
    }

    .cloud-visibility-title {
        font-size: 12.5px;
        margin-bottom: 13px;
    }

    .visibility-item {
        gap: 10px;
        min-height: 37px;
    }

    .visibility-icon {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
    }

    .visibility-icon img {
        width: 30px;
        height: 30px;
    }

    .visibility-content h4 {
        font-size: 9.8px;
    }

    .visibility-content p {
        font-size: 7.5px;
        margin-bottom: 11px;
    }

    .visibility-arrow {
        margin: 6px 0;
    }

    .visibility-arrow div {
        font-size: 8.8px;
    }

    .kl-journey-card::after {
        width: 470px;
        height: 470px;
        left: -175px;
        bottom: -175px;
    }

}

/* ── 1300px – 1439.5px ────────────────────── */
@media (min-width: 1300px) and (max-width: 1439.5px) {

    .kl-journey-section {
        padding: 95px 0;
    }

    .kl-journey-card {
        height: 551px;
        padding: 36px 40px;
        border-radius: 28px;
    }

    .kl-card-heading {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .kl-card-para {
        font-size: 16px;
    }

    /*    .kl-cloud-svg             {
        width: 59%; max-width: 610px;
        height: 380px;
        bottom: -30px; left: -20px;
        top: auto;
    }*/
    /*  .kl-floating-svg          { width: 418px; top: 18px; right: -55px; height: auto; transform: none; left: auto; }*/
    .kl-right-content {
        gap: 15px;
        right: 80px;
        bottom: 9px;
    }

    .cloud-visibility-card {
        width: 226px;
        height: 254px;
        padding: 18px 20px;
        border-radius: 17px;
    }

    .cloud-visibility-title {
        font-size: 13px;
        margin-bottom: 14px;
    }

    .visibility-item {
        gap: 11px;
        min-height: 39px;
    }

    .visibility-icon {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
    }

    .visibility-icon img {
        width: 32px;
        height: 32px;
    }

    .visibility-content h4 {
        font-size: 10px;
    }

    .visibility-content p {
        font-size: 7.68px;
        margin-bottom: 12px;
    }

    .visibility-arrow {
        margin: 6px 0;
    }

    .visibility-arrow div {
        font-size: 9px;
    }

    .kl-journey-card::after {
        width: 500px;
        height: 500px;
        left: -180px;
        bottom: -180px;
    }

}

/* ── 1440px – 1529.5px ────────────────────── */
@media (min-width: 1440px) and (max-width: 1529.5px) {

    .kl-journey-section {
        padding: 100px 0;
    }

    .kl-journey-card {
        height: 575px;
        padding: 42px 48px;
        border-radius: 30px;
    }

    .kl-card-heading {
        font-size: 31px;
        margin-bottom: 12px;
    }

    .kl-card-para {
        font-size: 17px;
    }

    /*    .kl-cloud-svg             {
        width: 60%; max-width: 640px;
        height: 400px;
        bottom: -32px; left: -20px;
        top: auto;
    }*/
    /*.kl-floating-svg          { width: 455px; top: 20px; right: -58px; height: auto; transform: none; left: auto; }*/
    .kl-right-content {
        gap: 16px;
        right: 90px;
        bottom: 9px;
    }

    .cloud-visibility-card {
        width: 226px;
        height: 254px;
        padding: 18px 20px;
        border-radius: 17px;
    }

    .cloud-visibility-title {
        font-size: 13px;
        margin-bottom: 14px;
    }

    .visibility-item {
        gap: 11px;
        min-height: 39px;
    }

    .visibility-icon {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
    }

    .visibility-icon img {
        width: 32px;
        height: 32px;
    }

    .visibility-content h4 {
        font-size: 10px;
    }

    .visibility-content p {
        font-size: 7.68px;
        margin-bottom: 12px;
    }

    .visibility-arrow {
        margin: 6px 0;
    }

    .visibility-arrow div {
        font-size: 9px;
    }

    .kl-journey-card::after {
        width: 500px;
        height: 500px;
        left: -180px;
        bottom: -180px;
    }

}

/* ── ≥ 1530px ─────────────────────────────── */
@media (min-width: 1530px) {

    .kl-journey-section {
        padding: 110px 0;
    }

    .kl-journey-card {
        height: 600px;
        padding: 46px 52px;
        border-radius: 32px;
    }

    .kl-card-heading {
        font-size: 34px;
        margin-bottom: 14px;
    }

    .kl-card-para {
        font-size: 18px;
    }

    /*    .kl-cloud-svg             {
        width: 61%; max-width: 660px;
        height: 420px;
        bottom: -36px; left: -22px;
        top: auto;
    }*/
    /*    .kl-floating-svg          { width: 480px; top: 20px; right: -60px; height: auto; transform: none; left: auto; }*/
    .kl-right-content {
        gap: 17px;
        right: 105px;
        bottom: 9px;
    }

    .cloud-visibility-card {
        width: 226px;
        height: 254px;
        padding: 18px 20px;
        border-radius: 17px;
    }

    .cloud-visibility-title {
        font-size: 13px;
        margin-bottom: 14px;
    }

    .visibility-item {
        gap: 11px;
        min-height: 39px;
    }

    .visibility-icon {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
    }

    .visibility-icon img {
        width: 34px;
        height: 34px;
    }

    .visibility-content h4 {
        font-size: 10px;
    }

    .visibility-content p {
        font-size: 8px;
        margin-bottom: 12px;
    }

    .visibility-arrow {
        margin: 6px 0;
    }

    .visibility-arrow div {
        font-size: 9px;
    }

    .kl-journey-card::after {
        width: 500px;
        height: 500px;
        left: -180px;
        bottom: -180px;
    }

}

/*@media (max-width: 319.5px) {
    .kl-floating-svg {
        width: 300px;
        height: 220px;  *//* manually set — don't rely on auto *//*
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        top: 2px;
    }
}

@media (min-width: 320px) and (max-width: 479.5px) {
    .kl-floating-svg {
        width: 360px;
        height: 264px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        top: 2px;
    }
}

@media (min-width: 480px) and (max-width: 566.5px) {
    .kl-floating-svg {
        width: 440px;
        height: 322px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        top: 2px;
    }
}

@media (min-width: 567px) and (max-width: 767.5px) {
    .kl-floating-svg {
        width: 560px;
        height: 410px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        top: 0px;
    }
}


@media (min-width: 1300px) and (max-width: 1439.5px) {
    .kl-floating-svg {
        width: 880px;
        height: 645px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        top: 0px;
    }
}

@media (min-width: 1440px) and (max-width: 1529.5px) {
    .kl-floating-svg {
        width: 909px;
        height: 666px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        top: 0px;
    }
}

@media (min-width: 1530px) {
    .kl-floating-svg {
        width: 1000px;
        height: 733px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        top: 0px;
    }
}

@media (min-width: 1530px) and (min-height: 700px) {
    .kl-floating-svg {
        width: 1060px;
        height: 776px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        top: 0px;
    }
}*/
/* =========================
   FAQ RESPONSIVE
========================= */

@media (max-width: 319px) {

    .faq-section .section-container {
        padding: 40px 10px;
    }

    .faq-question {
        min-height: 50px;
        padding: 0 10px;
        gap: 10px;
        font-size: 9.5px;
    }

    .faq-icon {
        width: 13px;
        height: 13px;
        flex-basis: 13px;
        font-size: 11px;
    }

    .faq-answer {
        padding-left: 10px;
        padding-right: 10px;
    }

    .faq-answer p {
        font-size: 9.5px;
    }
}

@media (min-width: 320px) and (max-width: 480px) {

    .faq-section .section-container {
        padding: 50px 12px;
    }

    .faq-question {
        min-height: 52px;
        padding: 0 12px;
        gap: 12px;
        font-size: 10px;
    }

    .faq-icon {
        width: 14px;
        height: 14px;
        flex-basis: 14px;
        font-size: 12px;
    }

    .faq-answer {
        padding-left: 12px;
        padding-right: 12px;
    }

    .faq-answer p {
        font-size: 10px;
    }
}

@media (min-width: 481px) and (max-width: 567px) {

    .faq-section .section-container {
        padding: 55px 16px;
    }

    .faq-question {
        min-height: 54px;
        padding: 0 14px;
        gap: 14px;
        font-size: 10.5px;
    }

    .faq-icon {
        width: 14px;
        height: 14px;
        flex-basis: 14px;
        font-size: 12px;
    }

    .faq-answer {
        padding-left: 14px;
        padding-right: 14px;
    }

    .faq-answer p {
        font-size: 10.5px;
    }
}

@media (min-width: 568px) and (max-width: 768px) {

    .faq-section .section-container {
        padding: 60px 20px;
    }

    .faq-question {
        min-height: 56px;
        padding: 0 16px;
        gap: 16px;
        font-size: 10.5px;
    }

    .faq-icon {
        width: 15px;
        height: 15px;
        flex-basis: 15px;
        font-size: 13px;
    }

    .faq-answer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .faq-answer p {
        font-size: 10.5px;
    }
}

@media (min-width: 769px) and (max-width: 991px) {

    .faq-section .section-container {
        max-width: 640px;
        padding: 65px 20px;
    }

    .faq-question {
        min-height: 57px;
        padding: 0 16px;
        gap: 18px;
        font-size: 10.5px;
    }

    .faq-icon {
        width: 15px;
        height: 15px;
        flex-basis: 15px;
        font-size: 13px;
    }

    .faq-answer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .faq-answer p {
        font-size: 10.5px;
    }
}

@media (min-width: 992px) and (max-width: 1024px) {

    .faq-section .section-container {
        max-width: 660px;
        padding: 70px 20px;
    }

    .faq-question {
        min-height: 58px;
        padding: 0 16px;
        gap: 20px;
        font-size: 11px;
    }

    .faq-icon {
        width: 15px;
        height: 15px;
        flex-basis: 15px;
        font-size: 13px;
    }

    .faq-answer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .faq-answer p {
        font-size: 11px;
    }
}

@media (min-width: 1025px) and (max-width: 1199px) {

    .faq-section .section-container {
        max-width: 670px;
        padding: 75px 20px;
    }

    .faq-question {
        min-height: 58px;
        padding: 0 16px;
        gap: 20px;
        font-size: 11px;
    }

    .faq-icon {
        width: 15px;
        height: 15px;
        flex-basis: 15px;
        font-size: 13px;
    }

    .faq-answer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .faq-answer p {
        font-size: 11px;
    }
}

@media (min-width: 1200px) and (max-width: 1279px) {

    .faq-section .section-container {
        max-width: 680px;
        padding: 78px 20px;
    }

    .faq-question {
        min-height: 58px;
        padding: 0 16px;
        gap: 20px;
        font-size: 11px;
    }

    .faq-icon {
        width: 15px;
        height: 15px;
        flex-basis: 15px;
        font-size: 13px;
    }

    .faq-answer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .faq-answer p {
        font-size: 11px;
    }
}

/*@media (min-width: 1280px) and (max-width: 1299px) {

    .faq-section .section-container {
        max-width: 690px;
        padding: 80px 20px;
    }

    .faq-question {
        min-height: 58px;
        padding: 0 16px;
        gap: 20px;
        font-size: 11px;
    }

    .faq-icon {
        width: 15px;
        height: 15px;
        flex-basis: 15px;
        font-size: 13px;
    }

    .faq-answer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .faq-answer p {
        max-width: 478px;
        font-size: 11px;
    }
}*/

@media (min-width: 1300px) and (max-width: 1440px) {

    .faq-section .section-container {
        max-width: 700px;
        padding: 82px 20px;
    }

    .faq-question {
        min-height: 59px;
        padding: 0 16px;
        gap: 20px;
        font-size: 12px;
    }

    .faq-icon {
        width: 15px;
        height: 15px;
        flex-basis: 15px;
        font-size: 13px;
    }

    .faq-answer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .faq-answer p {
        /*        max-width: 485px;*/
        font-size: 11px;
    }
}

@media (min-width: 1441px) and (max-width: 1530px) {

    .faq-section .section-container {
        max-width: 710px;
        padding: 85px 20px;
    }

    .faq-question {
        min-height: 60px;
        padding: 0 17px;
        gap: 20px;
        font-size: 14px;
    }

    .faq-icon {
        width: 16px;
        height: 16px;
        flex-basis: 16px;
        font-size: 13px;
    }

    .faq-answer {
        padding-left: 17px;
        padding-right: 17px;
    }

    .faq-answer p {
        /*    max-width: 490px;*/
        font-size: 13px;
    }
}

@media (min-width: 1531px) {

    /*    .faq-section .section-container {
        max-width: 720px;
        padding: 88px 20px;
    }*/
    .faq-section .section-container {
        max-width: 915px;
        padding: 88px 20px;
    }

    .faq-question {
        min-height: 61px;
        padding: 0 17px;
        gap: 21px;
        font-size: 16px;
    }

    .faq-icon {
        width: 16px;
        height: 16px;
        flex-basis: 16px;
        font-size: 13px;
    }

    .faq-answer {
        padding-left: 17px;
        padding-right: 17px;
    }

    .faq-answer p {
        /*        max-width: 500px;*/
        font-size: 15px;
    }
}

@media (min-width: 1530px) and (min-height: 700px) {

    .faq-section .section-container {
        max-width: 700px;
        padding: 85px 20px;
    }

    .faq-question {
        min-height: 61px;
        padding: 0 17px;
        gap: 21px;
        font-size: 16px;
    }

    .faq-icon {
        width: 16px;
        height: 16px;
        flex-basis: 16px;
        font-size: 13px;
    }

    .faq-answer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .faq-answer p {
        /*       max-width: 478px;*/
        font-size: 12px;
    }
}

@media (min-width: 1300px) {

    .synops-body-section .synops-hero-section .section-container {
        max-width: 1200px;
        width: 100%;

    }
}

@media (min-width: 1440px) {

    .synops-body-section .synops-hero-section .section-container {
        max-width: 1270px;
        margin: auto;
        width: 100%;
    }
}

@media (min-width: 1500px) {

    .synops-body-section .synops-hero-section .section-container {
        max-width: 1320px;
        width: 100%;
    }
}

@media (max-width: 1279.5px) {

    .synops-body-section .synops-hero-section .section-container {
        max-width: 1100px;
        width: 100%;
    }
}

@media (min-width: 1070px) and (max-width: 1199px) {
    .synops-body-section .synops-hero-section .section-container {
        max-width: 913px;
        width: 100%;
    }

}

@media (min-width: 1024px) and (max-width: 1070px) {
    .synops-body-section .synops-hero-section .section-container {
        max-width: 870px;
        width: 100%;
    }

}

@media (max-width: 1024px) {
    .synops-body-section .synops-hero-section .section-container {
        max-width: 851px;
        width: 100%;
    }
}

@media (max-width: 991px) {
    .synops-body-section .synops-hero-section .section-container {
        width: 100%;
        max-width: 935px;
    }
}

@media (max-width: 980px) {
    .synops-body-section .synops-hero-section .section-container {
        max-width: 890px;
        width: 100%;
    }

}

@media (max-width: 930px) {
    .synops-body-section .synops-hero-section .section-container {
        max-width: 860px;
        width: 100%;
    }

}

@media (min-width: 840px) and (max-width: 890px) {

    .synops-body-section .synops-hero-section .section-container {
        max-width: 890px;
        width: 100%;
    }

}

@media (min-width: 769px) and (max-width: 840px) {

    .synops-body-section .synops-hero-section .section-container {
        width: 100%;
        max-width: 740px;
    }

}

@media (max-width: 575px) {
    .synops-body-section .synops-hero-section .section-container {
        max-width: 500px;
        width: 100%;
    }
}


/* ===== 1530px and above ===== */
@media (min-width: 1530px) and (min-height: 700px) {

    .finops-platform-section .finops-chart-body {
        gap: 16px;
        height: 240px;
    }

    .finops-chart-card .finops-graph-area,
    .finops-chart-card .finops-graph-area svg {
        height: 240px;
    }
}

@media (min-width: 1530px) {

    .finops-platform-section .finops-chart-body {
        gap: 16px;
        height: 240px;
        padding-top: 35px;
    }

    .finops-chart-card .finops-graph-area,
    .finops-chart-card .finops-graph-area svg {
        height: 240px;
    }

    .finops-chart-card {
        padding: 16px;
        height: 87%;
    }
}

/* ===== 1440px to 1529px ===== */
@media (min-width: 1440px) and (max-width: 1529px) {

    .finops-platform-section .finops-chart-body {
        gap: 15px;
        height: 235px;
        padding-top: 28px;
    }

    .finops-chart-card .finops-graph-area,
    .finops-chart-card .finops-graph-area svg {
        height: 235px;
    }

    .finops-chart-card {
        padding: 16px;
        border-radius: 16px;
        height: 87%;
    }
}


/* ===== 1300px to 1439px ===== */
@media (min-width: 1300px) and (max-width: 1439px) {

    .finops-platform-section .finops-chart-body {
        gap: 14px;
        height: 232px;
        padding-top: 23px;
    }

    .finops-chart-card {
        height: 84%;
    }

    .finops-chart-card .finops-graph-area,
    .finops-chart-card .finops-graph-area svg {
        height: 232px;
    }

}

#finopsLineReveal {
    transition: width 2.5s ease-out;
}

.finops-progress-fill {
    width: 0;
    transition: width 2.5s ease-out;
}

/* Base (1280px) — your original rule stays as the default */
/*.kl-floating-svg {
  position: absolute;
  width: 960px;
  height: 316px;
  left: 52%;
  right: auto;
  transform: translateX(-50%);
  top: 0px;
}*/

/* Below 320px */
@media (max-width: 320px) {
    .kl-floating-svg {
        width: 259px;
        height: 79px;
    }
}

/* 320px – 480px */
@media (min-width: 320.5px) and (max-width: 380px) {
    .kl-floating-svg {
        width: 259px;
        height: 79px;
    }
}

@media (min-width: 380.5px) and (max-width: 400px) {
    .kl-floating-svg {
        width: 354px;
        height: 90px;
    }
}

@media (min-width: 400.5px) and (max-width: 480px) {
    .kl-floating-svg {
        width: 343px;
        height: 101px;
    }
}

/* 480px – 567px */
@media (min-width: 480px) and (max-width: 566.99px) {
    .kl-floating-svg {
        width: 425px;
        height: 129px;
    }
}

/* 567px – 768px */
@media (min-width: 567px) and (max-width: 650px) {
    .kl-floating-svg {
        width: 497px;
        height: 151px;
    }
}

@media (min-width: 650.5px) and (max-width: 768px) {
    .kl-floating-svg {
        width: 591px;
        height: 162px;
    }
}

@media (min-width: 768.5px) and (max-width: 850px) {
    .kl-floating-svg {
        width: 648px;
        height: 201px;
    }
}

/* 850px - 992px */
@media screen and (min-width: 850px) and (max-width: 991.99px) {
    .kl-floating-svg {
        width: 811px !important;
        height: 198px !important;
    }
}

/* 993px - 1024px */
@media screen and (min-width: 991px) and (max-width: 1024px) {
    .kl-floating-svg {
        width: 768px !important;
        height: 228px !important;
    }
}

/* 1024px – 1199px */
@media (min-width: 1024.5px) and (max-width: 1199px) {
    .kl-floating-svg {
        width: 772px;
        height: 235px;
    }
}

@media (min-width: 1100.5px) and (max-width: 1199.5px) {
    .kl-floating-svg {
        width: 772px;
        height: 235px;
    }
}

/* 1199px – 1279px (typo fixed: was 1999.5px) */
@media (min-width: 1200px) and (max-width: 1279px) {
    .kl-floating-svg {
        width: 959px;
        height: 290px;
    }
}

/* 1280px is your base rule — no query needed */

/* 1300px – 1440px */
@media (min-width: 1300px) and (max-width: 1440px) {
    /*      .kl-floating-svg {
          width: 1028px;
          height: 306px;
      }*/
    .kl-floating-svg {
        width: 908px;
        height: 269px;
    }
}

/*@media (min-width: 1370.5px) and (max-width: 1440px) {
  .kl-floating-svg { width: 1080px; height: 356px; }
}*/

/* 1440px – 1530px */
@media (min-width: 1440.5px) and (max-width: 1530px) {
    /*      .kl-floating-svg {
          width: 1114px;
          height: 334px;
      }*/
    .kl-floating-svg {
        width: 1004px;
        height: 306px;
    }

}

/*@media (min-width: 1485.5px) and (max-width: 1530px) {
  .kl-floating-svg { width: 1148px; height: 378px; }
}*/

/* Above 1530px */
@media (min-width: 1530.5px) {
    .kl-floating-svg {
        width: 1200px;
        height: 361px;
    }
}

/* Above 1530px AND height above 700px */
@media (min-width: 1530.5px) and (min-height: 701px) {
    .kl-floating-svg {
        width: 1280px;
        height: 421px;
    }
}

/* Base (1280px) — unchanged, your original */

.kl-cloud-svg {
    height: 380px;
    max-width: 620px;
    aspect-ratio: 411 / 421;
    display: block;
    position: relative;
    margin: 0 auto;
}

@media (max-width: 320px) {
    .kl-cloud-svg {
        height: 113px;
        max-width: 167px;
        aspect-ratio: 411 / 421;
        left: -39px;
        top: 27px;
    }
}

@media (min-width: 320.5px) and (max-width: 380px) {
    .kl-cloud-svg {
        height: 133px;
        max-width: 167px;
        aspect-ratio: 411 / 421;
        left: -63px;
        top: 35px;
    }
}

@media (min-width: 380.5px) and (max-width: 400px) {
    .kl-cloud-svg {
        height: 140px;
        max-width: 229px;
        aspect-ratio: 411 / 421;
        left: -53px;
        top: 26px;
    }
}

@media screen and (min-width: 480px) and (max-width: 566.99px) {
    .kl-cloud-svg {
        height: 168px !important;
        max-width: 221px !important;
        left: -69px !important;
        top: 34px !important;
    }
}

@media screen and (min-width: 567px) and (max-width: 650px) {
    .kl-cloud-svg {
        height: 197px !important;
        max-width: 321px !important;
        left: -75px !important;
        top: 60px !important;
    }
}

@media (min-width: 650.5px) and (max-width: 768px) {
    .kl-cloud-svg {
        height: 221px;
        max-width: 373px;
        aspect-ratio: 411 / 421;
        left: -97px;
        top: 41px;
    }
}

@media (min-width: 768.5px) and (max-width: 850px) {
    .kl-cloud-svg {
        height: 253px;
        max-width: 446px;
        aspect-ratio: 411 / 421;
        left: -116px;
        top: 56px;
    }
}

@media screen and (min-width: 850px) and (max-width: 991.99px) {
    .kl-cloud-svg {
        height: 262px;
        max-width: 480px;
        aspect-ratio: 411 / 421;
        left: -112px;
        top: 52px;
    }
}

@media screen and (min-width: 991px) and (max-width: 1024px) {
    /*      .kl-cloud-svg {
          height: 278px;
          max-width: 496px;
          aspect-ratio: 411 / 421;
          left: -13px;
          top: 69px;
          margin: 0;
      }*/
    .kl-cloud-svg {
        height: 288px;
        max-width: 496px;
        aspect-ratio: 411 / 421;
        left: 30px;
        top: 54px;
        margin: 0;
    }
}

@media (min-width: 1024.5px) and (max-width: 1100px) {
    .kl-cloud-svg {
        height: 321px;
        max-width: 533px;
        aspect-ratio: 411 / 421;
        left: 1px;
        top: 47px;
    }
}

@media (min-width: 1100.5px) and (max-width: 1199.5px) {
    .kl-cloud-svg {
        height: 343px;
        max-width: 581px;
        aspect-ratio: 411 / 421;
        left: 55px;
        top: 23px;
    }
}

@media (min-width: 1200px) and (max-width: 1279px) {
    /*      .kl-cloud-svg {
          height: 324px;
          max-width: 619px;
          aspect-ratio: 411 / 421;
          left: 43px;
          top: 73px;
      }*/
    .kl-cloud-svg {
        height: 353px;
        max-width: 619px;
        aspect-ratio: 411 / 421;
        left: 43px;
        top: 43px;
    }
}

@media (min-width: 1300px) and (max-width: 1440px) {
    .kl-cloud-svg {
        height: 374px;
        max-width: 664px;
        aspect-ratio: 411 / 421;
        left: 65px;
        top: 35px;
    }
}

/*@media (min-width: 1370.5px) and (max-width: 1440px) {
  .kl-cloud-svg { height: 428px; max-width: 698px; aspect-ratio: 411 / 421; left: -13px; top: 130px; }
}*/
@media (min-width: 1440.5px) and (max-width: 1530px) {
    .kl-cloud-svg {
        height: 388px;
        max-width: 719px;
        aspect-ratio: 411 / 421;
        left: 34px;
        top: 32px;
    }
}

/*@media (min-width: 1485.5px) and (max-width: px) {
  .kl-cloud-svg { height: 454px; max-width: 741px; aspect-ratio: 411 / 421;  left: -13px; top: 138px; }
}*/
@media (min-width: 1530.5px) {
    .kl-cloud-svg {
        height: 475px;
        max-width: 775px;
        aspect-ratio: 411 / 421;
        left: 30px;
        top: -14px;
    }
}

@media (min-width: 1530.5px) and (min-height: 701px) {
    .kl-cloud-svg {
        height: 507px;
        max-width: 827px;
        aspect-ratio: 411 / 421;
        left: -13px;
        top: 154px;
    }
}

/* ============================================
   BASE (1280px)
============================================ */
.hero__badge {
    margin-bottom: 15px;
}

.hero__heading {
    margin-bottom: 15px;
}

.hero__desc {
    margin-bottom: 3px;
}


/* Below 320px */
@media (max-width: 320px) {
    .hero__badge {
        margin-bottom: 9px;
    }

    .hero__heading {
        margin-bottom: 9px;
    }

    .hero__desc {
        margin-bottom: 2px;
    }

    .synops-btn-primary {
        margin-bottom: 9px;
    }
}

/* 320.5px – 480px */
@media (min-width: 320.5px) and (max-width: 480px) {
    .hero__badge {
        margin-bottom: 10px;
    }

    .hero__heading {
        margin-bottom: 10px;
    }

    .hero__desc {
        margin-bottom: 2px;
    }

    .synops-btn-primary {
        margin-bottom: 10px;
    }
}

/* 480.5px – 567px */
@media (min-width: 480.5px) and (max-width: 567px) {
    .hero__badge {
        margin-bottom: 11px;
    }

    .hero__heading {
        margin-bottom: 11px;
    }

    .hero__desc {
        margin-bottom: 2px;
    }

    .synops-btn-primary {
        margin-bottom: 11px;
    }
}

/* 567.5px – 768px */
@media (min-width: 567.5px) and (max-width: 768px) {
    .hero__badge {
        margin-bottom: 12px;
    }

    .hero__heading {
        margin-bottom: 12px;
    }

    .hero__desc {
        margin-bottom: 2px;
    }

    .synops-btn-primary {
        margin-bottom: 12px;
    }
}

/* 768.5px – 991px */
@media (min-width: 768.5px) and (max-width: 991px) {
    .hero__badge {
        margin-bottom: 13px;
    }

    .hero__heading {
        margin-bottom: 13px;
    }

    .hero__desc {
        margin-bottom: 3px;
    }

    .synops-btn-primary {
        margin-bottom: 13px;
    }
}

/* 991.5px – 1024px */
@media (min-width: 991.5px) and (max-width: 1024px) {
    .hero__badge {
        margin-bottom: 13px;
    }

    .hero__heading {
        margin-bottom: 13px;
    }

    .hero__desc {
        margin-bottom: 3px;
    }

    .synops-btn-primary {
        margin-bottom: 13px;
    }
}

/* 1024.5px – 1199px */
@media (min-width: 1024.5px) and (max-width: 1199px) {
    .hero__badge {
        margin-bottom: 14px;
    }

    .hero__heading {
        margin-bottom: 14px;
    }

    .hero__desc {
        margin-bottom: 3px;
    }

    .synops-btn-primary {
        margin-bottom: 14px;
    }
}

/* 1199.5px – 1279px */
@media (min-width: 1199.5px) and (max-width: 1279px) {
    .hero__badge {
        margin-bottom: 15px;
    }

    .hero__heading {
        margin-bottom: 15px;
    }

    .hero__desc {
        margin-bottom: 3px;
    }

    .synops-btn-primary {
        margin-bottom: 15px;
    }
}

/* 1280px = base — no query needed */

/* 1300px – 1440px */
@media (min-width: 1300px) and (max-width: 1440px) {
    .hero__badge {
        margin-bottom: 17px;
    }

    .hero__heading {
        margin-bottom: 17px;
    }

    .hero__desc {
        margin-bottom: 4px;
    }

    .synops-btn-primary {
        margin-bottom: 17px;
    }
}

/* 1440.5px – 1530px */
@media (min-width: 1440.5px) and (max-width: 1530px) {
    .hero__badge {
        margin-bottom: 19px;
    }

    .hero__heading {
        margin-bottom: 19px;
    }

    .hero__desc {
        margin-bottom: 4px;
        max-width: 751px;
    }

    .synops-btn-primary {
        margin-bottom: 19px;
    }
}

/* Above 1530px */
@media (min-width: 1530.5px) {
    .hero__badge {
        margin-bottom: 21px;
    }

    .hero__heading {
        margin-bottom: 21px;
    }

    .hero__desc {
        margin-bottom: 4px;
    }

    .synops-btn-primary {
        margin-bottom: 21px;
    }
}

/* Above 1530px AND height above 700px */
@media (min-width: 1530.5px) and (min-height: 701px) {
    .hero__badge {
        margin-bottom: 24px;
    }

    .hero__heading {
        margin-bottom: 24px;
    }

    .hero__desc {
        margin-bottom: 5px;
    }

    .synops-btn-primary {
        margin-bottom: 24px;
    }
}

/* ============================================
   BASE (1280px)
============================================ */
.synops-body-section .synops-hero-section {
    padding-top: 20px;
}

/* Below 320px */
@media (max-width: 320px) {
    .synops-body-section .synops-hero-section {
        padding-top: 12px;
    }
}

/* 320.5px – 480px */
@media (min-width: 320.5px) and (max-width: 480px) {
    .synops-body-section .synops-hero-section {
        padding-top: 13px;
    }
}

/* 480.5px – 567px */
@media (min-width: 480.5px) and (max-width: 567px) {
    .synops-body-section .synops-hero-section {
        padding-top: 14px;
    }
}

/* 567.5px – 768px */
@media (min-width: 567.5px) and (max-width: 768px) {
    .synops-body-section .synops-hero-section {
        padding-top: 15px;
    }
}

/* 768.5px – 991px */
@media (min-width: 768.5px) and (max-width: 991px) {
    .synops-body-section .synops-hero-section {
        padding-top: 17px;
    }
}

/* 991.5px – 1024px */
@media (min-width: 991.5px) and (max-width: 1024px) {
    .synops-body-section .synops-hero-section {
        padding-top: 17px;
    }
}

/* 1024.5px – 1199px */
@media (min-width: 1024.5px) and (max-width: 1199px) {
    .synops-body-section .synops-hero-section {
        padding-top: 18px;
    }
}

/* 1199.5px – 1279px */
@media (min-width: 1199.5px) and (max-width: 1279px) {
    .synops-body-section .synops-hero-section {
        padding-top: 20px;
    }
}

/* 1280px = base — no query needed */

/* 1300px – 1440px */
@media (min-width: 1300px) and (max-width: 1440px) {
    .synops-body-section .synops-hero-section {
        padding-top: 23px;
    }
}

/* 1440.5px – 1530px */
@media (min-width: 1440.5px) and (max-width: 1530px) {
    .synops-body-section .synops-hero-section {
        padding-top: 25px;
    }
}

/* Above 1530px */
@media (min-width: 1530.5px) {
    .synops-body-section .synops-hero-section {
        padding-top: 27px;
    }
}

/* Above 1530px AND height above 700px */
@media (min-width: 1530.5px) and (min-height: 701px) {
    .synops-body-section .synops-hero-section {
        padding-top: 30px;
    }
}

@media (max-width: 320px) {
    .synops-hero-section .synops-btn-primary {
        width: 110%;
        margin-top: 0px;
    }
}

@media (min-width: 320px) and (max-width: 479.5px) {
    .synops-hero-section .synops-btn-primary {
        width: 114%;
    }
}

@media (min-width: 480px) and (max-width: 566.5px) {
    .synops-hero-section .synops-btn-primary {
        width: 119%;
        margin-top: 0px;
    }
}

@media (min-width: 567px) and (max-width: 767.5px) {
    .strip-logo {
        padding-left: 0px;
        justify-content: center;
    }
}

/* ============================================================
   FOOTER STRIP — full breakpoint set, scaled from your 1280px base
   Base is height-controlled (not width) so the two logos with
   different aspect ratios stay visually balanced at every size.
   No clamp(), everything scoped under .synops-strip-row.
============================================================ */

/* ---- BASE (1280px) — your confirmed values ---- */
.footer-strip {
    padding: 8px 8px 8px 0;
}

.synops-strip-row .strip-logo img:first-child {
    height: 60px !important;
    width: auto !important;
}

.synops-strip-row .strip-logo img:last-child {
    height: 50px !important;
    width: auto !important;
}

.synops-strip-row .strip-logo {
    gap: 16px !important;
}

.synops-strip-row .strip-text h4 {
    font-size: 24px !important;
}

.synops-strip-row .strip-contact-arrow {
    width: 42px !important;
    height: 42px !important;
}

/* ---- Below 320px ---- */
@media (max-width: 320px) {
    .footer-strip {
        padding: 4px 4px 4px 0;
    }

    .synops-strip-row .strip-logo img:first-child {
        height: 31px !important;
        width: auto !important;
    }

    .synops-strip-row .strip-logo img:last-child {
        height: 26px !important;
        width: auto !important;
    }

    .synops-strip-row .strip-logo {
        gap: 13px !important;
    }

    .synops-strip-row .strip-text h4 {
        font-size: 15px !important;
    }
}

/* ---- 320.5px – 480px ---- */
@media (min-width: 320.5px) and (max-width: 480px) {
    .footer-strip {
        padding: 5px 5px 5px 0;
    }

    .synops-strip-row .strip-logo img:first-child {
        height: 36px !important;
        width: auto !important;
    }

    .synops-strip-row .strip-logo img:last-child {
        height: 30px !important;
        width: auto !important;
    }

    .synops-strip-row .strip-logo {
        gap: 15px !important;
    }

    .synops-strip-row .strip-text h4 {
        font-size: 16px !important;
    }
}

/* ---- 480.5px – 567px ---- */
@media (min-width: 480.5px) and (max-width: 567px) {
    .footer-strip {
        padding: 6px 6px 6px 0;
    }

    .synops-strip-row .strip-logo img:first-child {
        height: 43px !important;
        width: auto !important;
    }

    .synops-strip-row .strip-logo img:last-child {
        height: 36px !important;
        width: auto !important;
    }

    .synops-strip-row .strip-logo {
        gap: 16px !important;
    }

    .synops-strip-row .strip-text h4 {
        font-size: 17px !important;
    }
}

/* ---- 567.5px – 768px ---- */
@media (min-width: 567px) and (max-width: 768px) {
    .footer-strip {
        padding: 5px 5px 5px 0;
    }

    .synops-strip-row .strip-logo img:first-child {
        height: 34px !important;
        width: auto !important;
    }

    .synops-strip-row .strip-logo img:last-child {
        height: 28px !important;
        width: auto !important;
    }

    .synops-strip-row .strip-logo {
        gap: 12px !important;
    }

    .synops-strip-row .strip-text h4 {
        font-size: 17px !important;
    }
}

/* ---- 768.5px – 991px ---- */
@media (min-width: 768.5px) and (max-width: 991px) {
    .footer-strip {
        padding: 6px 6px 6px 0;
    }

    .synops-strip-row .strip-logo img:first-child {
        height: 46px !important;
        width: auto !important;
    }

    .synops-strip-row .strip-logo img:last-child {
        height: 38px !important;
        width: auto !important;
    }

    .synops-strip-row .strip-logo {
        gap: 15px !important;
    }

    .synops-strip-row .strip-text h4 {
        font-size: 19px !important;
    }
}

/* ---- 991.5px – 1024px ---- */
@media (min-width: 991px) and (max-width: 1024px) {
    .footer-strip {
        padding: 6px 6px 6px 0;
    }

    .synops-strip-row .strip-logo img:first-child {
        height: 50px !important;
        width: auto !important;
    }

    .synops-strip-row .strip-logo img:last-child {
        height: 42px !important;
        width: auto !important;
    }

    .synops-strip-row .strip-logo {
        gap: 16px !important;
    }

    .synops-strip-row .strip-text h4 {
        font-size: 21px !important;
    }

    .synops-strip-row .strip-contact-arrow {
        width: 39px !important;
        height: 39px !important;
    }
}

/* ---- 1024.5px – 1199px ---- */
@media (min-width: 1024.5px) and (max-width: 1199px) {
    .footer-strip {
        padding: 7px 7px 7px 0;
    }

    .synops-strip-row .strip-logo img:first-child {
        height: 54px !important;
        width: auto !important;
    }

    .synops-strip-row .strip-logo img:last-child {
        height: 45px !important;
        width: auto !important;
    }

    .synops-strip-row .strip-logo {
        gap: 16px !important;
    }

    .synops-strip-row .strip-text h4 {
        font-size: 21px !important;
    }

    .synops-strip-row .strip-contact-arrow {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ---- 1199.5px – 1279px ---- */
@media (min-width: 1199.5px) and (max-width: 1279px) {
    .footer-strip {
        padding: 7px 7px 7px 0;
    }

    .synops-strip-row .strip-logo img:first-child {
        height: 56px !important;
        width: auto !important;
    }

    .synops-strip-row .strip-logo img:last-child {
        height: 47px !important;
        width: auto !important;
    }

    .synops-strip-row .strip-logo {
        gap: 17px !important;
    }

    .synops-strip-row .strip-text h4 {
        font-size: 23px !important;
    }

    .synops-strip-row .strip-contact-arrow {
        width: 41px !important;
        height: 41px !important;
    }
}

/* 1280px = base — no query needed */

/* ---- 1300px – 1440px ---- */
@media (min-width: 1300px) and (max-width: 1440px) {
    .footer-strip {
        padding: 9px 9px 9px 0;
    }

    .synops-strip-row .strip-logo img:first-child {
        height: 65px !important;
        width: auto !important;
    }

    .synops-strip-row .strip-logo img:last-child {
        height: 54px !important;
        width: auto !important;
    }

    .synops-strip-row .strip-logo {
        gap: 17px !important;
    }

    .synops-strip-row .strip-text h4 {
        font-size: 25px !important;
    }

    .synops-strip-row .strip-contact-arrow {
        width: 43px !important;
        height: 43px !important;
    }
}

/* ---- 1440.5px – 1530px ---- */
@media (min-width: 1440.5px) and (max-width: 1530px) {
    .footer-strip {
        padding: 10px 10px 10px 0;
    }

    .synops-strip-row .strip-logo img:first-child {
        height: 68px !important;
        width: auto !important;
    }

    .synops-strip-row .strip-logo img:last-child {
        height: 57px !important;
        width: auto !important;
    }

    .synops-strip-row .strip-logo {
        gap: 19px !important;
    }

    .synops-strip-row .strip-text h4 {
        font-size: 26px !important;
    }

    .synops-strip-row .strip-contact-arrow {
        width: 44px !important;
        height: 44px !important;
    }
}

/* ---- Above 1530px ---- */
@media (min-width: 1530.5px) {
    .footer-strip {
        padding: 11px 11px 11px 0;
    }

    .synops-strip-row .strip-logo img:first-child {
        height: 74px !important;
        width: auto !important;
    }

    .synops-strip-row .strip-logo img:last-child {
        height: 62px !important;
        width: auto !important;
    }

    .synops-strip-row .strip-logo {
        gap: 24px !important;
    }

    .synops-strip-row .strip-text h4 {
        font-size: 29px !important;
    }

    .synops-strip-row .strip-contact-arrow {
        width: 49px !important;
        height: 49px !important;
    }
}

/* ---- Above 1530px AND height above 700px ---- */
@media (min-width: 1530.5px) and (min-height: 701px) {
    .footer-strip {
        padding: 12px 12px 12px 0;
    }

    .synops-strip-row .strip-logo img:first-child {
        height: 79px !important;
        width: auto !important;
    }

    .synops-strip-row .strip-logo img:last-child {
        height: 66px !important;
        width: auto !important;
    }

    .synops-strip-row .strip-logo {
        gap: 27px !important;
    }

    .synops-strip-row .strip-text h4 {
        font-size: 31px !important;
    }

    .synops-strip-row .strip-contact-arrow {
        width: 53px !important;
        height: 53px !important;
    }
}


/* ===== Single-logo pages (non-SynOps) — larger lone logo ===== */
@media (max-width: 320px) {
    .synops-strip-row.single-logo .strip-logo img:first-child {
        height: 41px !important;
        width: auto !important;
    }
}

@media (min-width: 320.5px) and (max-width: 480px) {
    .synops-strip-row.single-logo .strip-logo img:first-child {
        height: 48px !important;
        width: auto !important;
    }
}

@media (min-width: 480.5px) and (max-width: 567px) {
    .synops-strip-row.single-logo .strip-logo img:first-child {
        height: 58px !important;
        width: auto !important;
    }
}

@media (min-width: 567px) and (max-width: 768px) {
    .synops-strip-row.single-logo .strip-logo img:first-child {
        height: 45px !important;
        width: auto !important;
    }
}

@media (min-width: 768.5px) and (max-width: 991px) {
    .synops-strip-row.single-logo .strip-logo img:first-child {
        height: 62px !important;
        width: auto !important;
    }
}

@media (min-width: 991px) and (max-width: 1024px) {
    .synops-strip-row.single-logo .strip-logo img:first-child {
        height: 67px !important;
        width: auto !important;
    }
}

@media (min-width: 1024.5px) and (max-width: 1199px) {
    .synops-strip-row.single-logo .strip-logo img:first-child {
        height: 72px !important;
        width: auto !important;
    }
}

@media (min-width: 1199.5px) and (max-width: 1279.99px) {
    .synops-strip-row.single-logo .strip-logo img:first-child {
        height: 75px !important;
        width: auto !important;
    }
}

@media (min-width: 1280px) and (max-width: 1299.98px) {
    .synops-strip-row.single-logo .strip-logo img:first-child {
        height: 78px !important;
        width: auto !important;
    }
}

@media (min-width: 1300px) and (max-width: 1440px) {
    .synops-strip-row.single-logo .strip-logo img:first-child {
        height: 87px !important;
        width: auto !important;
    }
}

@media (min-width: 1440.5px) and (max-width: 1530px) {
    .synops-strip-row.single-logo .strip-logo img:first-child {
        height: 91px !important;
        width: auto !important;
    }
}

@media (min-width: 1530.5px) {
    .synops-strip-row.single-logo .strip-logo img:first-child {
        height: 99px !important;
        width: auto !important;
    }
}

@media (min-width: 1530.5px) and (min-height: 701px) {
    .synops-strip-row.single-logo .strip-logo img:first-child {
        height: 106px !important;
        width: auto !important;
    }
}

@media (min-width: 991.5px) and (max-width: 1199px) {
    .faq-section .section-container {
        max-width: 70%;
    }
}

@media (min-width: 1199.5px) and (max-width: 1279px) {
    .faq-section .section-container {
        max-width: 830px;
        padding: 80px 20px;
    }
}

/* 1279px – 1300px */
@media (min-width: 1279.5px) and (max-width: 1300px) {
    .faq-section .section-container {
        max-width: 850px;
        padding: 82px 20px;
    }
}

/* 1300px – 1440px */
@media (min-width: 1300.5px) and (max-width: 1440px) {
    .faq-section .section-container {
        max-width: 870px;
        padding: 84px 20px;
    }
}

/* 1440px – 1530px */
@media (min-width: 1440.5px) and (max-width: 1529.99px) {
    .faq-section .section-container {
        max-width: 900px;
        padding: 86px 20px;
    }
}

@media (min-width: 1530px) {
    .faq-section .section-container {

        max-width: 915px;
        padding: 88px 20px;
    }
}

@media (min-width: 768px) {
    /* equal-weight side columns → middle column lands at true centre */
    .synops-strip-row.single-logo > div:first-child {
        /*          flex: 1 1 0 !important;*/
        width: auto !important;
        max-width: none !important;
    }

    .synops-strip-row.single-logo > div:nth-child(2) {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
    }

    .synops-strip-row.single-logo > .strip-contact-column {
        flex: 1 1 0 !important;
        margin-left: 0 !important;
        justify-content: flex-end !important;
    }
}

.synops-body-section .followBrochure {

    color: #fff !important;
    background: linear-gradient(0deg, #3964E9 0%, #16191E 100%) !important;
    border: 0.99px solid #5270B5 !important;
    border-radius: 13px !important;

}

.synops-body-section .footerDiagonal {
    color: #040A13;
}