/* =============================================================
   SOLUTIONS PAGE
   Breakpoints: 1399 · 1199 · 991 · 767 · 575
   ============================================================= */

/* ─── Shared gradient text helper ─────────────────────────────── */
.sol-grad-text {
    background: linear-gradient(269deg, #6e196f 5%, #f433e7 152%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* =============================================================
   HERO
   ============================================================= */
.sol-hero {
    padding: 160px 0 80px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(181.79deg, rgba(255, 214, 219, 0) 29.59%, rgb(255, 212, 254) 67.12%);
    min-height: 600px;
}

.sol-hero__left {
    position: relative;
    z-index: 2;
}

.sol-hero__heading {
    font-family: var(--font-body);
    font-size: var(--fs-h1);
    font-weight: 500;
    color: #000;
    line-height: 1.17;
    letter-spacing: -0.58px;
    margin: 0 0 20px;
}

.sol-hero__desc {
    font-size: var(--fs-p);
    font-weight: 300;
    color: #000;
    line-height: 1.55;
    letter-spacing: -0.18px;
    margin: 0 0 28px;
    max-width: 659px;
}

.sol-hero__btn {
    display: inline-block;
    margin-bottom: 28px;
}

/* Breadcrumb */
.sol-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: -0.18px;
}
.sol-bc-link {
    color: #000;
    text-decoration: none;
    transition: color 0.2s;
}
.sol-bc-link:hover { color: var(--squibit-purple); }
.sol-bc-sep { color: #000; font-size: 14px; line-height: 1; }
.sol-bc-active { color: var(--squibit-purple); }

/* Hero images */
.sol-hero__right {
    justify-content: center;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}
.sol-hero__imgs {
    position: relative;
    width: 530px;
    height: 390px;
}
.sol-hero__img-laptop {
    position: absolute;
    left: 0;
    top: 0;
    width: 339px;
    height: 200px;
    object-fit: cover;
    box-shadow: 20px 24px 27px rgba(0, 0, 0, 0.2);
}
.sol-hero__img-person {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 321px;
    height: 246px;
    object-fit: cover;
    border-radius: 24px;
}


/* =============================================================
   COMMUNICATION SOLUTIONS OVERVIEW
   ============================================================= */
.sol-overview {
    padding: 80px 0 70px;
    background: #fff;
}

.sol-overview__heading {
    font-family: var(--font-body);
    font-size: var(--fs-h2);
    font-weight: 600;
    color: var(--color-heading);
    line-height: 1.22;
    letter-spacing: -0.45px;
    margin: 0 0 32px;
}

.sol-overview__body p {
    font-size: var(--fs-p);
    font-weight: 300;
    color: var(--color-dark);
    line-height: 1.55;
    letter-spacing: -0.2px;
    margin: 0 0 16px;
}
.sol-overview__body p:last-child { margin-bottom: 0; }


/* =============================================================
   SOLUTIONS FEATURE TABS  (.sf-*)
   ============================================================= */

/* ── Outer section ───────────────────────────────────────────── */
.sf {
    background: linear-gradient(269.93deg, #6e196f 4.97%, #f433e7 151.61%);
}

/* ── Tab Bar ─────────────────────────────────────────────────── */
.sf__bar {
    display: flex;
    align-items: center;
    z-index: 99;
    position: relative;
}

/* Arrow scroll buttons */
.sf__arrow {
      /* flex-shrink: 0; */
    width: 40px;
     height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, opacity 0.2s;
    opacity: 0.35;
    z-index: 2;
}
.sf__arrow:hover  { background: rgba(0, 0, 0, 0.22); }
.sf__arrow:focus-visible {
    outline: 2px solid rgba(255,255,255,0.7);
    outline-offset: -2px;
}

/* Scrollable tab list */
.sf__tabs {
    display: flex;
    align-items: center;
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    padding: 0;
}
.sf__tabs::-webkit-scrollbar { display: none; }

/* Individual tab button */
.sf__tab {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 20px 20px;
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: border-color 0.2s, background 0.2s;
    text-align: left;
    position: relative;
    bottom: -1px; /* overlap the bar border-bottom */
}
.sf__tab:hover { background: rgba(255,255,255,0.07); }
.sf__tab:focus-visible {
    outline: 2px solid rgba(255,255,255,0.75);
    outline-offset: -2px;
}

/* Active tab: white border underline + bright icon/text */
.sf__tab--active {
    /* border-bottom-color: #fff;
    background: rgba(255,255,255,0.1); */
}

/* Tab icon: muted by default, white when active */
.sf__tab-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
    filter: brightness(0) invert(1) opacity(0.45);
    transition: filter 0.2s;
}
.sf__tab--active .sf__tab-icon,
.sf__tab:hover   .sf__tab-icon {
    filter: brightness(0) invert(1) opacity(1);
}

/* Tab label */
.sf__tab-label {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.25;
    letter-spacing: -0.16px;
    white-space: nowrap;
    transition: color 0.2s;
    pointer-events: none;
}
.sf__tab--active .sf__tab-label,
.sf__tab:hover   .sf__tab-label {
    color: #fff;
}

/* Vertical divider between tabs */
.sf__tab-div {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

/* ── Content Panels ──────────────────────────────────────────── */
.sf__panel { display: none; }

.sf__panel--active {
    display: block;
    /* Fade + lift-up animation on every tab switch */
    animation: sfPanelIn 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes sfPanelIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Panel inner layout */

.sf__panel-right {

    justify-content: flex-end;
}

.sf__panel-heading {
    font-family: var(--font-body);
    font-size: var(--fs-h2);
    font-weight: 600;
    color: #fff;
    line-height: 1.22;
    letter-spacing: -0.44px;
    margin: 0 0 22px;
}

.sf__panel-body p {
    font-size: var(--fs-p);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
    letter-spacing: -0.18px;
    margin: 0 0 14px;
}
.sf__panel-body p:last-child { margin-bottom: 28px; }

/* White-bg button with gradient text */
.sf__panel-btn {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.18px;
    color: #fff;
    background: linear-gradient(269.59deg, #6e196f 4.97%, #f433e7 151.61%);
    -webkit-background-clip: text;
    background-clip: text;
    background-color: #fff;
    border: 1.5px solid #fff;
    border-radius: 26px;
    padding: 13px 38px;
    text-decoration: none;
    transition: opacity 0.22s, transform 0.22s;
}
.sf__panel-btn:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

/* Feature image card */
.sf__panel-card {
    width: 100%;
    max-width: 520px;
    height: 480px;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(0,0,0,0.28);
}
.sf__panel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.sf__panel-card:hover .sf__panel-img { transform: scale(1.04); }


/* =============================================================
   SETUP & SUPPORT CTA
   ============================================================= */
.sol-setup {
    padding: 90px 0;
    position: relative;
    overflow: hidden;
    background: #fff;
}

.sol-setup::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160.79deg,
        rgba(255, 214, 219, 0) 18.34%,
        rgb(204, 118, 201) 77.99%,
        #fff 90.61%);
    pointer-events: none;
}

.sol-setup__left { position: relative; z-index: 1; }
.sol-setup [class*="col-lg-4"] { position: relative; z-index: 1; }

.sol-setup__heading {
    font-family: var(--font-body);
    font-size: var(--fs-h2);
    font-weight: 600;
    color: #000;
    line-height: 1.16;
    letter-spacing: -0.49px;
    margin: 0 0 20px;
}

.sol-setup__desc {
    font-size: var(--fs-p);
    font-weight: 300;
    color: #000;
    line-height: 1.38;
    letter-spacing: -0.18px;
    margin: 0;
    max-width: 857px;
}

.sol-setup__btn {
    font-size: 18px;
    padding: 18px 42px;
}
.sf__arrow--l{    left: -60px;position: absolute;}
.sf__arrow--r{right:-60px;position: absolute;}
.sf__panels{padding: 40px 0 30px;}
/* =============================================================
   RESPONSIVE
   ============================================================= */

/* 1399px */
@media (max-width: 1399.98px) {
    .sol-hero__imgs { width: 480px; height: 360px; }
    .sol-hero__img-laptop { width: 300px; height: 178px; }
    .sol-hero__img-person { width: 285px; height: 218px; }
    .sf__panel-card { height: 420px; }
    .sf__arrow--l{    left: -35px;}
}
@media (max-width: 1280px) {
.sf__arrow--l{left: -35px;}
.sf__arrow--r{right: -35px;}
}
/* 1199px */
@media (max-width: 1199.98px) {
    .sol-hero { padding: 140px 0 70px; }
    .sol-hero__imgs { width: 420px; height: 320px; }
    .sol-hero__img-laptop { width: 260px; height: 154px; }
    .sol-hero__img-person { width: 248px; height: 190px; }
    .sf__panel-card { height: 380px; }
    .sf__tab { padding: 18px 16px; }
    .sf__tab-label { font-size: 15px; }
}

/* 991px — single column, hide right image */
@media (max-width: 991.98px) {
    .sol-hero { padding: 120px 0 60px; min-height: auto; }
    .sol-setup { padding: 70px 0; }
    .sf__arrow { width: 44px; height: 72px; }
    .sf__tab { padding: 16px 14px; }
    .sf__tab-label { font-size: 14px; }

    .sf__bar{    margin: 0 30px 0 15px;}
    .sf__arrow--r {
    right: -35px;
    position: absolute;
}
.sf__arrow--l{
        left: -30px;
}
.sol-hero__imgs{width: 100%;height: 100%;}
.sf__panel-card{height: 100%;}
}

/* 767px */
@media (max-width: 767.98px) {
    .sol-hero { padding: 110px 0 50px; }
    .sol-overview { padding: 60px 0 50px; }

    .sf__tab { padding: 14px 12px; gap: 8px; }
    .sf__tab-icon { width: 34px; height: 34px; }
    .sf__tab-label { font-size: 13px; }
    .sf__arrow { width: 38px; height: 64px; }
    .sf__panel-btn { font-size: 16px; padding: 11px 30px; }
}

/* 575px */
@media (max-width: 575.98px) {
    .sol-hero { padding: 100px 0 44px; }
    .sol-overview { padding: 48px 0 40px; }
    .sol-setup { padding: 56px 0; }
    
    .sf__tab { padding: 12px 10px; gap: 7px; }
    .sf__tab-icon { width: 28px; height: 28px; }
    .sf__tab-label { font-size: 12px; }
    .sf__arrow { width: 32px; height: 56px; }
    .sf__arrow svg { width: 8px; height: 14px; }
        .sol-hero__imgs {
        width: 100%;
        height: auto;
        margin-bottom: 20px;
        max-width: 420px;
    }
    .sf__arrow--l {
    left: -15px;
    position: absolute;
}
.sf__tabs{
        margin: 0 25px 0 10px;
}
.sf__arrow--r {
    right: -15px;
    position: absolute;
}

.sf__panel-card{margin-bottom: 20px;}
.sol-setup__btn{font-size: 18px;}
.sf__panels {
    padding: 20px 0 0px;text-align: center;}
    .sf__panel-card {margin-top: 30px;}
.page-solutions .blog-section{padding-top: 40px!important;}
.sol-setup{text-align: center;padding: 40px 0!important}
.sol-setup__btn {
    font-size: 18px;
    padding: 10px 30px;
}
.sol-hero__left{text-align:center}
.sol-overview{justify-content: center;text-align: center}
}