/* =========================================================
   SOLUTIONS PAGE 
========================================================= */

body.solution-page{
    background:#f5f7fb;
    overflow-x:hidden;
}

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

.solution-page .container{
    width:92%;
    max-width:1400px;
    margin:auto;
}

/* =========================================================
   PREMIUM SOLUTIONS HERO
========================================================= */

.solution-page .inner-hero{

    position:relative;

    width:92%;
    max-width:1400px;

    min-height:560px;

    margin:24px auto 0;

    border-radius:34px;

    overflow:hidden;

    display:flex;

    align-items:center;

    background-size:cover !important;
    background-position:center !important;
    background-repeat:no-repeat !important;

    box-shadow:
    0 20px 45px rgba(0,0,0,.10);

    padding-bottom:90px;
}

/* =========================================================
   OVERLAY
========================================================= */

.solution-page .inner-hero::before{

    content:'';

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.92) 0%,
        rgba(0,0,0,.72) 38%,
        rgba(0,0,0,.28) 100%
    );

    z-index:1;
}

/* =========================================================
   HERO GRID
========================================================= */

.solution-page .inner-hero-grid{

    position:relative;

    z-index:2;

    width:100%;

    display:grid;

    grid-template-columns:1fr;

    align-items:center;

    padding:100px 0 80px;
}

/* =========================================================
   CONTENT
========================================================= */

.solution-page .inner-hero-content{

    max-width:620px;

    color:#fff;

    position:relative;

    z-index:2;
}

/* =========================================================
   TAG
========================================================= */

.solution-page .inner-hero-content span{

    display:inline-flex;

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

    height:46px;

    padding:0 24px;

    border-radius:50px;

    background:#15B012;

    color:#fff;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:28px;
}

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

.solution-page .inner-hero-content h1{

    font-size:76px;

    line-height:1.02;

    color:#fff;

    margin-bottom:24px;

    font-weight:700;
}

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

.solution-page .inner-hero-content p{

    color:#e5e7eb;

    font-size:18px;

    line-height:1.9;

    max-width:560px;

    margin-bottom:38px;
}

/* =========================================================
   BUTTON WRAP
========================================================= */

.solution-page .hero-btn-wrap{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-top:34px;
}

/* =========================================================
   BUTTONS
========================================================= */

.solution-page .hero-btn{

    display:inline-flex;

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

    height:58px;

    padding:0 34px;

    border-radius:16px;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    transition:.3s ease;
}

.solution-page .primary-btn{

    background:#15B012;

    color:#fff;
}

.solution-page .primary-btn:hover{

    background:#11940F;

    transform:translateY(-2px);
}

.solution-page .secondary-btn{

    background:rgba(255,255,255,.08);

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

    color:#fff;

    backdrop-filter:blur(10px);
}

.solution-page .secondary-btn:hover{

    background:#fff;

    color:#111827;
}

/* =========================================================
   HERO BREADCRUMB
========================================================= */

.solution-page .product-breadcrumb{

    position:absolute;

    left:0;
    bottom:34px;

    width:100%;

    z-index:5;
}

.solution-page .product-breadcrumb .container{

    color:#fff;

    font-size:14px;
}

.solution-page .product-breadcrumb a{

    color:#fff;

    text-decoration:none;

    transition:.3s ease;
}

.solution-page .product-breadcrumb a:hover{

    color:#15B012;
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:992px){

    .solution-page .inner-hero{

        min-height:auto;

        border-radius:28px;
    }

    .solution-page .inner-hero-grid{

        padding:90px 0 70px;
    }

    .solution-page .inner-hero-content{

        max-width:100%;
    }

    .solution-page .inner-hero-content h1{

        font-size:52px;
    }

}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

    .solution-page .inner-hero{

        width:94%;

        margin-top:16px;

        min-height:auto;

        border-radius:24px;

        padding-bottom:70px;
    }

    .solution-page .inner-hero-grid{

        padding:80px 0 60px;
    }

    .solution-page .inner-hero-content span{

        height:40px;

        padding:0 18px;

        font-size:11px;
    }

    .solution-page .inner-hero-content h1{

        font-size:40px;

        line-height:1.1;
    }

    .solution-page .inner-hero-content p{

        font-size:16px;
    }

    .solution-page .hero-btn-wrap{

        flex-direction:column;
    }

    .solution-page .hero-btn{

        width:100%;
    }

    .solution-page .product-breadcrumb{

        bottom:24px;
    }

}

/* =========================================================
   CATEGORY STRIP
========================================================= */

.solution-page .category-strip{
    padding:30px 0;
    background:#fff;
}

.solution-page .category-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:20px;
}

.solution-page .category-item{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:18px;
    height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
}

.solution-page .category-item.active,
.solution-page .category-item:hover{
    background:#15B012;
    color:#fff;
}

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

.solution-page .section-title{
    text-align:center;
    margin-bottom:60px;
}

.solution-page .section-title h2{
    font-size:46px;
}

/* =========================================================
   PRODUCT GRID 
========================================================= */

.solution-page .solution-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.solution-page .solution-card{
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
    transition:.3s;
}

.solution-page .solution-card:hover{
    transform:translateY(-6px);
}

.solution-page .solution-image img{
    width:100%;
    height:260px;
    object-fit:cover;
}

.solution-page .solution-content{
    padding:25px;
}

.solution-page .solution-content h3{
    font-size:24px;
    margin-bottom:10px;
}

.solution-page .solution-content p{
    color:#64748b;
}

/* =========================================================
   FEATURES
========================================================= */

.solution-page .feature-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.solution-page .feature-box{
    background:#fff;
    border-radius:20px;
    padding:25px;
    text-align:center;
}

/* =========================================================
   CTA
========================================================= */

.solution-page .cta-box{
    background:linear-gradient(135deg,#15B012,#11940F);
    border-radius:30px;
    padding:60px;
    text-align:center;
    color:#fff;
}

.solution-page .cta-btn{
    background:#fff;
    color:#111;
    padding:14px 30px;
    border-radius:40px;
    display:inline-block;
}

/* =========================================================
   CONTENT
========================================================= */

.solution-page .content-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:40px;
}

.solution-page .content-card{
    background:#fff;
    padding:30px;
    border-radius:24px;
}

.solution-page .sidebar-box{
    background:#fff;
    padding:25px;
    border-radius:24px;
    position:sticky;
    top:100px;
}

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

@media(max-width:992px){

    .solution-page .inner-hero-grid,
    .solution-page .solution-grid,
    .solution-page .feature-grid{
        grid-template-columns:1fr 1fr;
    }

    .solution-page .content-grid{
        grid-template-columns:1fr;
    }
}



/* =========================================================
   GLOBAL SECTION SPACING
========================================================= */

.solution-page section{
    position:relative;
}

.solution-page .section-space{
    padding:90px 0;
}



/* =========================================================
   CATEGORY STRIP
========================================================= */

.solution-page .category-strip{

    position:relative;

    z-index:10;

    margin-top:-35px;

}

.solution-page .category-item{

    transition:.3s ease;

    cursor:pointer;

}

.solution-page .category-item:hover{

    transform:translateY(-3px);

}

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

.solution-page .section-title span{

    display:inline-block;

    color:#15B012;

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:14px;

}

.solution-page .section-title p{

    max-width:760px;

    margin:18px auto 0;

    color:#64748b;

    line-height:1.9;

    font-size:17px;

}

/* =========================================================
   PREMIUM SOLUTION CARD
========================================================= */

.solution-page .solution-card{

    border:1px solid #edf2f7;

}

.solution-page .solution-image{

    overflow:hidden;

}

.solution-page .solution-image img{

    transition:transform .4s ease;

}

.solution-page .solution-card:hover .solution-image img{

    transform:scale(1.05);

}

.solution-page .solution-content h3{

    color:#111827;

    line-height:1.3;

}

.solution-page .solution-content p{

    line-height:1.8;

    margin-bottom:24px;

}

/* =========================================================
   CARD BUTTON
========================================================= */

.solution-page .solution-btn{

    display:inline-flex;

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

    height:50px;

    padding:0 24px;

    border-radius:14px;

    background:#111827;

    color:#fff;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    transition:.3s ease;

}

.solution-page .solution-btn:hover{

    background:#15B012;

}

/* =========================================================
   FEATURE BOX
========================================================= */

.solution-page .feature-box{

    border:1px solid #edf2f7;

    transition:.3s ease;

}

.solution-page .feature-box:hover{

    transform:translateY(-5px);

    box-shadow:
    0 12px 30px rgba(0,0,0,.06);

}

.solution-page .feature-box h4{

    font-size:22px;

    margin:18px 0 12px;

    color:#111827;

}

.solution-page .feature-box p{

    color:#64748b;

    line-height:1.8;

}

/* =========================================================
   CTA
========================================================= */

.solution-page .cta-box{

    box-shadow:
    0 20px 45px rgba(21,176,18,.20);

}

.solution-page .cta-box h2{

    font-size:54px;

    line-height:1.1;

    margin-bottom:18px;

}

.solution-page .cta-box p{

    max-width:760px;

    margin:auto auto 28px;

    line-height:1.9;

    color:rgba(255,255,255,.92);

}

.solution-page .cta-btn{

    font-weight:700;

    transition:.3s ease;

}

.solution-page .cta-btn:hover{

    transform:translateY(-3px);

}

/* =========================================================
   CONTENT SECTION
========================================================= */

.solution-page .content-card h3{

    font-size:34px;

    margin-bottom:18px;

    color:#111827;

}

.solution-page .content-card p{

    color:#64748b;

    line-height:1.9;

    margin-bottom:18px;

}

.solution-page .sidebar-box h4{

    font-size:24px;

    margin-bottom:18px;

}

.solution-page .sidebar-box ul{

    padding:0;
    margin:0;
    list-style:none;

}

.solution-page .sidebar-box ul li{

    padding:12px 0;

    border-bottom:1px solid #eef2f7;

}




/* =========================================================
   CONTENT SECTION 
========================================================= */

.solution-page .content-section{

    padding:90px 0;

}

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

.solution-page .content-grid{

    display:grid;

    grid-template-columns:minmax(0,1.7fr) 380px;

    gap:34px;

    align-items:start;

}

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

.solution-page .content-grid > div:first-child{

    min-width:0;

}

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

.solution-page .content-card{

    background:#fff;

    border-radius:34px;

    padding:34px;

    box-shadow:
    0 10px 30px rgba(15,23,42,.05);

    border:1px solid #edf2f7;

    overflow:hidden;

}

.solution-page .section-gap{

    margin-top:30px;

}

/* =========================================================
   IMAGE
========================================================= */

.solution-page .content-card img{

    width:100%;

    height:520px;

    object-fit:cover;

    border-radius:26px;

    display:block;

    margin-bottom:30px;

}

/* =========================================================
   TYPOGRAPHY
========================================================= */

.solution-page .content-card h2,
.solution-page .content-card h3{

    font-size:48px;

    line-height:1.1;

    color:#0f172a;

    margin-bottom:22px;

    font-weight:700;

}

.solution-page .content-card p{

    font-size:17px;

    line-height:1.95;

    color:#64748b;

    margin-bottom:18px;

}

/* =========================================================
   FEATURES
========================================================= */

.solution-page .feature-grid{

    display:grid;

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

    gap:20px;

    margin-top:34px;

}

.solution-page .feature-box{

    background:#f8fafc;

    border-radius:24px;

    padding:30px 24px;

    border:1px solid #edf2f7;

    transition:.3s ease;

}

.solution-page .feature-box:hover{

    transform:translateY(-5px);

    background:#fff;

    box-shadow:
    0 14px 35px rgba(15,23,42,.08);

}

.solution-page .feature-box h3{

    font-size:18px;

    line-height:1.5;

    margin-bottom:12px;

}

.solution-page .feature-box p{

    font-size:15px;

    line-height:1.9;

    margin:0;

}

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

.solution-page .solution-list{

    margin:22px 0 0;

    padding-left:22px;

}

.solution-page .solution-list li{

    font-size:17px;

    color:#475569;

    line-height:2.1;

}

/* =========================================================
   SIDEBAR
========================================================= */

.solution-page .sidebar-box{

    position:sticky;

    top:120px;

    background:#fff;

    border-radius:34px;

    padding:34px;

    border:1px solid #edf2f7;

    box-shadow:
    0 10px 30px rgba(15,23,42,.05);

}

.solution-page .sidebar-box h3{

    font-size:24px;

    line-height:1.3;

    color:#0f172a;

    margin-bottom:28px;

}

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

.solution-page .contact-item{

    display:flex;

    gap:18px;

    align-items:flex-start;

    margin-bottom:26px;

}

.solution-page .contact-icon{

    width:48px;

    height:48px;

    border-radius:50%;

    background:#15B012;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    flex-shrink:0;

}

.solution-page .contact-item strong{

    display:block;

    font-size:16px;

    color:#0f172a;

    margin-bottom:6px;

}

.solution-page .contact-item p{

    margin:0;

    color:#64748b;

    line-height:1.8;

    font-size:15px;

}

/* =========================================================
   SIDEBAR CTA
========================================================= */

.solution-page .sidebar-cta{

    margin-top:36px;

    background:#15B012;

    border-radius:28px;

    padding:34px 28px;

    color:#fff;

}

.solution-page .sidebar-cta h4{

    font-size:38px;

    line-height:1.15;

    margin-bottom:16px;

    font-weight:700;

}

.solution-page .sidebar-cta p{

    color:rgba(255,255,255,.92);

    line-height:1.9;

    margin-bottom:24px;

}

.solution-page .sidebar-cta a{

    height:54px;

    padding:0 28px;

    border-radius:50px;

    background:#fff;

    color:#111827;

    text-decoration:none;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    font-size:15px;

    font-weight:700;

}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:1200px){

    .solution-page .content-grid{

        grid-template-columns:1fr;

    }

    .solution-page .sidebar-box{

        position:relative;

        top:auto;

    }

}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

    .solution-page .content-section{

        padding:60px 0;

    }

    .solution-page .content-card{

        border-radius:24px;

        padding:24px;

    }

    .solution-page .content-card img{

        height:260px;

        border-radius:18px;

    }

    .solution-page .content-card h2,
    .solution-page .content-card h3{

        font-size:32px;

    }

    .solution-page .content-card p{

        font-size:15px;

    }

    .solution-page .feature-grid{

        grid-template-columns:1fr;

    }

    .solution-page .sidebar-box{

        border-radius:24px;

        padding:24px;

    }

    .solution-page .sidebar-cta{

        border-radius:22px;

        padding:28px 22px;

    }

    .solution-page .sidebar-cta h4{

        font-size:28px;

    }

}

@media(max-width:768px){

    .solution-page .inner-hero{

        width:96%;

        padding-bottom:70px;
    }

    .solution-page .inner-hero .container{

        width:100%;

        max-width:100%;

        padding-left:22px;
        padding-right:22px;
    }

    .solution-page .inner-hero-grid{

        padding:70px 0 50px;

        width:100%;
    }

    .solution-page .inner-hero-content{

        width:100%;

        max-width:100%;
    }

    .solution-page .inner-hero-content h1{

        width:100%;

        max-width:100%;

        font-size:56px;

        line-height:1.02;
    }

    .solution-page .inner-hero-content p{

        width:100%;

        max-width:100%;

        font-size:16px;

        line-height:1.8;
    }

    .solution-page .hero-btn-wrap{

        width:100%;
    }

    .solution-page .hero-btn{

        width:100%;
    }

}