/*==================================================
  SERVICE HERO SECTION - COMPLETE CSS
==================================================*/

/* ---------- CONTAINER & ROW ---------- */
.service-container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.service-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.service-col-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
    padding-right: 15px;
    padding-left: 15px;
}

/* ---------- HERO BANNER ---------- */
.service-hero-banner {
    position: relative;
    overflow: hidden;
    padding: 20px 0 20px;
    background-image: url('../../images/service-page/8.webp');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    /*max-height: 600px;*/
}
@media (max-width: 768px) {
    .service-hero-banner {
        background-image: none !important;
        background-color: #f8f9fc;
    }
}

.service-hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    /*background: linear-gradient(90deg,*/
    /*        rgba(255, 255, 255, 1) 0%,*/
    /*        rgba(255, 255, 255, .98) 18%,*/
    /*        rgba(255, 255, 255, .93) 35%,*/
    /*        rgba(255, 255, 255, .72) 48%,*/
    /*        rgba(255, 255, 255, 0) 68%);*/
    z-index: 1;
}

.service-hero-banner .service-container-fluid {
    position: relative;
    z-index: 2;
}

/* ---------- CONTENT ---------- */
.service-hero-content {
    max-width: 690px;
    padding-left: 70px;
}

/* ---------- BADGE ---------- */
.service-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 50px;
    background: rgba(192, 0, 99, .08);
    color: var(--secondary-color);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.service-hero-badge svg {
    width: 14px !important;
    height: 14px !important;
}

/* ---------- TITLE ---------- */
.service-hero-title {
    margin: 0 0 14px;
    font-size: 42px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--primary-color);
}

.service-hero-title span {
    color: var(--secondary-color);
}

/* ---------- DESCRIPTION ---------- */
.service-hero-desc {
    font-size: 14px;
    line-height: 1.8;
    color: #5b6475;
    margin-bottom: 16px;
    max-width: 760px;
    text-align: justify;
}

/* ---------- FEATURES ---------- */
.service-hero-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 14px 28px;
    margin-bottom: 24px;
}

.service-feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.service-feature-item svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
}

.service-feature-item span {
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.8;
}

/* ---------- BUTTONS ---------- */
.service-hero-buttons {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 25px;
}

.service-btn-primary,
.service-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    transition: .35s;
    text-decoration: none;
}

.service-btn-primary {
    background: var(--primary-color);
    color: #fff;
}

.service-btn-primary:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(192, 0, 99, .25);
    background: var(--secondary-color);
}

.service-btn-primary svg {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50%;
    background: #fff;
    color: var(--secondary-color);
    padding: 3px;
}

.service-btn-outline {
    background: #fff;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.service-btn-outline:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    transform: translateY(-3px);
}

.service-btn-outline svg {
    width: 16px !important;
    height: 16px !important;
}

/* ---------- BOTTOM INFO ---------- */
.service-hero-bottom {
    display: flex;
    align-items: center;
    gap: 35px;
    flex-wrap: wrap;
    margin: 25px 0 20px;
}

.hero-divider {
    width: 1px;
    height: 55px;
    background: #e5e5e5;
}

.service-client-box {
    display: flex;
    align-items: center;
    gap: 18px;
}

.service-client-images {
    display: flex;
}

.service-client-images img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-left: -12px;
    border: 2px solid #fff;
}

.service-client-images img:first-child {
    margin-left: 0;
}
.client-text{
    display:flex;
    flex-direction:column;
}
.rating-text{
        display:flex;
    flex-direction:column;
}
.client-text strong {
    font-size: 20px;
    color: var(--primary-color);
    line-height: 1;
}

.client-text span {
    font-size: 14px;
    color: #666;
}

.service-rating-box {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rating-text strong {
    font-size: 20px;
    color: var(--primary-color);
    line-height: 1;
}

.rating-text span {
    font-size: 14px;
    color: #666;
}

/* ---------- MOBILE FEATURES ---------- */
.service-mobile-features {
    display: none;
}

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

/* 1600px */
/*@media (max-width: 1600px) {*/
/*    .service-hero-content {*/
/*        padding-left: 50px;*/
/*    }*/
/*    .service-hero-title {*/
/*        font-size: 48px;*/
/*    }*/
/*    .service-hero-desc {*/
/*        font-size: 17px;*/
/*    }*/
/*}*/

/* 1400px */
@media (max-width: 1400px) {
    .service-hero-banner {
        min-height: 700px;
        padding: 45px 0 50px;
    }
    .service-hero-content {
        max-width: 620px;
        padding-left: 40px;
    }
    .service-hero-title {
        font-size: 44px;
    }
    .service-hero-desc {
        font-size: 15px;
        max-width: 540px;
    }
    .service-feature-item span {
        font-size: 15px;
    }
    .service-btn-primary,
    .service-btn-outline {
        padding: 15px 26px;
        font-size: 15px;
    }
}

/* 1200px */
@media (max-width: 1200px) {
    .service-hero-title {
        font-size: 36px;
    }
    .service-hero-content {
        max-width: 560px;
    }
}

/* Tablet */
@media (max-width: 991px) {
    .service-col-7 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .service-hero-features {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .service-hero-buttons {
        flex-wrap: wrap;
    }
}
@media (max-width: 767px) {
    .desktop-star {
        display: none;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .service-hero-banner {
        padding: 15px 0 25px;
        min-height: auto;
        background-position: center top;
        background-size: cover;
        /*max-height: 1000px;*/
    }

    .service-hero-banner::before {
        background: linear-gradient(180deg,
                rgba(255, 255, 255, .96),
                rgba(255, 255, 255, .90));
    }

    .service-hero-content {
        padding: 0 8px;
        max-width: 100%;
    }

    .service-hero-badge {
        font-size: 9px;
        padding: 8px 14px;
        margin-bottom: 10px;
    }

    .service-hero-title {
        font-size: 24px;
        line-height: 1.18;
        margin-bottom: 10px;
    }

    .service-hero-desc {
        font-size: 12px;
        line-height: 1.7;
        margin-bottom: 12px;
        max-width: 100%;
        text-align: justify;
    }

    .service-feature-item span {
        font-size: 14px;
    }

    .service-hero-features {
        display: none;
    }

    .service-mobile-features {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin: 20px 0 20px;
    }

    .service-mobile-item {
        text-align: center;
    }

    .service-mobile-icon {
        width: 46px;
        height: 46px;
        margin: 0 auto 10px;
        border-radius: 50%;
        background: rgba(192, 0, 99, .08);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .service-mobile-icon svg {
        width: 20px !important;
        height: 20px !important;
        color: var(--secondary-color);
    }

    .service-mobile-item h6 {
        margin: 0 0 5px;
        font-size: 11px;
        font-weight: 600;
        color: var(--primary-color);
        line-height: 1.4;
    }

    .service-mobile-item p {
        margin: 0;
        font-size: 9px;
        color: #666;
        line-height: 1.5;
    }

    .service-hero-buttons {
        flex-direction: row;
        gap: 10px;
        margin-bottom: 15px;
    }

    .service-btn-primary,
    .service-btn-outline {
        padding: 12px 10px;
        font-size: 10px;
        justify-content: center;
        white-space: nowrap;
        flex: 1;
    }

    .service-btn-primary svg {
        display: none;
    }

    .service-hero-bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        border-radius: 16px;
        padding: 15px 12px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, .06);
        border: 1px solid #f0f0f0;
        gap: 0;
        margin-top:18px;
        margin-bottom:8px;
    }

    .hero-divider {
        display: none;
    }

    .service-rating-box {
        width: 40%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        padding-right: 18px;
        gap: 0px;
    }

    .service-rating-box::after {
        content: "";
        position: absolute;
        right: 124px;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 65px;
        background: #dddddd;
    }

    .service-rating-box::before {
        content: "★★★★★";
        color: #ffb400;
        font-size: 17px;
        letter-spacing: 2px;
        margin-bottom: 6px;
    }

    .rating-text strong {
        font-size: 16px;
    }

    .rating-text span {
        font-size: 12px;
    }

    .service-client-box {
        width: 48%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 8px;
    }

    .service-client-images {
        justify-content: center;
    }

    .service-client-images img {
        width: 40px;
        height: 40px;
    }

    .client-text strong {
        font-size: 16px;
    }

    .client-text span {
        font-size: 12px;
    }
}

/* Small Mobile */
/*@media (max-width: 480px) {*/
    /*.service-mobile-features {*/
    /*    grid-template-columns: repeat(2, 1fr);*/
    /*    gap: 15px;*/
    /*}*/
    
/*    .service-hero-buttons {*/
/*        flex-direction: column;*/
/*        gap: 12px;*/
/*    }*/
    
/*    .service-btn-primary,*/
/*    .service-btn-outline {*/
/*        width: 100%;*/
/*        white-space: normal;*/
/*        font-size: 14px;*/
/*        padding: 14px 18px;*/
/*    }*/
    
/*    .service-rating-box {*/
/*        padding-right: 10px;*/
/*    }*/
    
/*    .service-rating-box::before {*/
/*        font-size: 13px;*/
/*    }*/
    
/*    .service-client-box {*/
/*        width: 45%;*/
/*    }*/
/*}*/

/*==================================================
   TRUST STRIP
==================================================*/

.service-trust-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 35px;
    padding: 18px 24px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #eef0f5;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    flex-wrap: wrap;
}

/* ---------- ITEMS ---------- */
.trust-strip-item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 120px;
}

.trust-strip-item .trust-stars {
    display: flex;
    align-items: center;
    gap: 8px;
}

.trust-strip-item .trust-stars span:first-child {
    color: #ffb400;
    font-size: 14px;
    letter-spacing: 1px;
}

.trust-strip-item .trust-score {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
}

.trust-strip-item .trust-label {
    font-size: 12px;
    color: #666;
    display: block;
    line-height: 1.2;
}

.trust-strip-item .trust-count {
    font-size: 11px;
    color: #999;
    display: block;
    line-height: 1.2;
}

/* ---------- BADGE TEXT ---------- */
.trust-badge-text {
    display: flex;
    flex-direction: column;
}

.trust-badge-text .trust-badge-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
}

.trust-badge-text .trust-badge-reg {
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.trust-strip-item svg {
    flex-shrink: 0;
    color: var(--secondary-color);
    width: 28px;
    height: 28px;
}

/* ---------- DIVIDER ---------- */
.trust-strip-divider {
    width: 1px;
    height: 45px;
    background: #e5e8ef;
    flex-shrink: 0;
}

/* ---------- SINCE 2019 ---------- */
.trust-since .trust-badge-name {
    color: var(--secondary-color) !important;
}

/* ==================================================
   RESPONSIVE - TRUST STRIP
================================================== */

/* Tablet */
@media (max-width: 991px) {
    .service-trust-strip {
        padding: 16px 18px;
        gap: 15px;
        justify-content: center;
    }
    
    .trust-strip-item {
        min-width: 100px;
        flex: 0 1 auto;
    }
    
    .trust-strip-divider {
        height: 35px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .service-trust-strip {
        flex-wrap: wrap;
        justify-content: center;
        padding: 14px 12px;
        gap: 12px 8px;
        margin-top: 20px;
        border-radius: 12px;
    }

    .trust-strip-item {
        flex: 0 1 auto;
        min-width: 80px;
        gap: 8px;
    }

    .trust-strip-item .trust-stars span:first-child {
        font-size: 11px;
    }

    .trust-strip-item .trust-score {
        font-size: 13px;
    }

    .trust-strip-item .trust-label {
        font-size: 10px;
    }

    .trust-strip-item .trust-count {
        font-size: 9px;
    }

    .trust-badge-text .trust-badge-name {
        font-size: 12px;
    }

    .trust-badge-text .trust-badge-reg {
        font-size: 8px;
    }

    .trust-strip-item svg {
        width: 22px;
        height: 22px;
    }

    .trust-strip-divider {
        height: 30px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .service-trust-strip {
        padding: 12px 10px;
        gap: 10px 6px;
    }

    .trust-strip-item {
        min-width: 60px;
        gap: 5px;
    }

    .trust-strip-item .trust-stars span:first-child {
        font-size: 10px;
    }

    .trust-strip-item .trust-score {
        font-size: 11px;
    }

    .trust-strip-item .trust-label {
        font-size: 8px;
    }

    .trust-strip-item .trust-count {
        font-size: 8px;
    }

    .trust-badge-text .trust-badge-name {
        font-size: 10px;
    }

    .trust-badge-text .trust-badge-reg {
        font-size: 7px;
    }

    .trust-strip-item svg {
        width: 18px;
        height: 18px;
    }

    .trust-strip-divider {
        height: 25px;
    }
}
   /*==========================================
   HERO TRUST STRIP
==========================================*/

.service-trust-strip{
    margin-top:-18px;
    margin-bottom:40px;
    position:relative;
    z-index:20;
}

.service-trust-grid{
    background:#fff;
    border-radius:18px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    border:1px solid #ececec;
    display:flex;
    align-items:center;
    justify-content:space-between;
    overflow:hidden;
    margin: 0 35px;
}

.service-trust-item{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    padding:22px 20px;
    position:relative;
}

.service-trust-item:not(:last-child)::after{
    content:"";
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    width:1px;
    height:65px;
    background:#e8e8e8;
}

.service-trust-item img{
    width:58px;
    height:auto;
    object-fit:contain;
}

.service-trust-icon{
    width:54px;
    height:54px;
    border-radius:14px;
    background:rgba(192,0,99,.08);
    color:var(--secondary-color);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}

.service-trust-item h4{
    margin:0;
    font-size:22px;
    font-weight:700;
    color:var(--primary-color);
    line-height:1.2;
}

.service-trust-item p{
    margin:4px 0;
    font-size:14px;
    font-weight:600;
    color:#222;
}

.service-trust-item span{
    display:block;
    font-size:13px;
    color:#777;
}

@media (max-width:991px){

    .service-trust-grid{
        flex-wrap:wrap;
    }

    .service-trust-item{
        flex:0 0 50%;
        border-bottom:1px solid #eee;
    }

    .service-trust-item:nth-child(2)::after,
    .service-trust-item:nth-child(4)::after{
        display:none;
    }

    .service-trust-item:last-child{
        flex:0 0 100%;
        /*border-bottom:none;*/
    }

}

@media (max-width:768px){

    .service-trust-strip{
        margin-top:20px;
    }

    .service-trust-grid{
        border-radius:16px;
            margin: 0px;
    }

    .service-trust-item{
        flex:0 0 100%;
        justify-content:flex-start;
        padding:18px;
    }

    .service-trust-item::after{
        display:none;
    }
    .for-dt{
        display:none !important;
    }

    .service-trust-item:not(:last-child){
        border-bottom:1px solid #efefef;
    }

    .service-trust-item img{
        width:46px;
    }

    .service-trust-icon{
        width:46px;
        height:46px;
        font-size:18px;
    }

    .service-trust-item h4{
        font-size:18px;
    }

    .service-trust-item p{
        font-size:13px;
    }

    .service-trust-item span{
        font-size:12px;
    }

}

@media (max-width:768px){

    .service-trust-grid{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:8px;
        padding:7px;
        border-radius:16px;
        margin: 0 8px;
    }

    .service-trust-item{
        width:100%;
        padding:15px 12px;
        justify-content:flex-start;
        border:1px solid #f0f0f0;
        border-radius:12px;
        background:#fff;
    }

    .service-trust-item::after{
        display:none;
    }

    .service-trust-item img{
        width:40px;
    }

    .service-trust-icon{
        width:40px;
        height:40px;
        font-size:16px;
    }

    .service-trust-item h4{
        font-size:15px;
    }

    .service-trust-item p{
        font-size:12px;
        margin:2px 0;
    }

    .service-trust-item span{
        font-size:13px;
    }

    /* Last item (Since 2019) */
    .service-trust-item:last-child{
        grid-column:1 / 3;
        max-width:160px;
        margin:0 auto;
        justify-content:center;
        text-align:left;
    }

}
   /* =====================================
   CLIENT LOGO STRIP
===================================== */

.ainosof-clients-strip{
    padding:0px 0 25px;
    background:#f8fafc;
}

.ainosof-clients-box{
    background:#fff;

    border-radius:24px;

    padding:14px 30px;

    display:flex;
    align-items:center;

    gap:25px;

    box-shadow:
    0 10px 40px rgba(0,0,0,.05);

    overflow:hidden;
}

/* LEFT */

.ainosof-clients-left{
    min-width:220px;
}

.ainosof-clients-left h5{
    font-size:14px;
    font-weight:700;
    color:var(--primary-color);

    /* margin-bottom:6px; */
}

.ainosof-clients-left p{
    margin:0;
    font-size:13px;
    color:var(--primary-color);
}

/* CENTER */

.ainosof-clients-marquee{
    flex:1;
    overflow:hidden;
}

.ainosof-clients-track{
    display:flex;
    align-items:center;

    width:max-content;

    animation:ainosofScroll 35s linear infinite;
}

.ainosof-clients-marquee:hover .ainosof-clients-track{
    animation-play-state:paused;
}

/* LOGOS */

.ainosof-client-logo{
    width:150px;

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

    margin:0 20px;
}

.ainosof-client-logo img{
    max-width:120px;
    max-height:55px;

    width:auto;
    height:auto;

    object-fit:contain;

    /* filter:grayscale(100%); */
    opacity:.8;

    transition:.3s;
}

.ainosof-client-logo:hover img{
    filter:none;
    opacity:1;
}

/* RIGHT */

.ainosof-clients-right{
    min-width:220px;

    text-align:right;
}

.ainosof-clients-right a{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:14px 24px;

    border:1px solid #d9dce6;

    border-radius:50px;

    color:var(--primary-color);

    text-decoration:none;

    font-weight:600;

    transition:.3s;
}

.ainosof-clients-right a:hover{
    background:var(--primary-color);
    color:#fff;
}

/* MARQUEE */

@keyframes ainosofScroll{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}
@media(max-width:991px){

    .ainosof-clients-box{
        flex-direction:column;
        text-align:center;
        gap:20px;
    }

    .ainosof-clients-left,
    .ainosof-clients-right{
        min-width:auto;
        width:100%;
        text-align:center;
    }

    .ainosof-client-logo{
        width:110px;
        margin:0 12px;
    }

    .ainosof-client-logo img{
        max-width:90px;
    }
}


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

.auditcta-section{

    margin:0px 0 15px;

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

    overflow:hidden;

    border-radius:14px;

    position:relative;

    background:var(--gbp-primary-color);
}

/* Right Pink Part */

.auditcta-right{

    width:33%;

    background:var(--gbp-secondary-color);

    padding:28px 25px;

    position:relative;

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

    min-height:192px;
}

/* Large Slant */

.auditcta-right::before{

    content:"";

    position:absolute;

    left:0px;

    top:0;

    width:60px;

    height:100%;

    background:var(--gbp-primary-color);

    clip-path:polygon(0 0,100% 50%,0 100%);
}

/* Left */

.auditcta-left{

    width:67%;

    display:flex;

    align-items:center;

    padding:22px 28px 28px 62px;

    gap:62px;
}

/* Vertical Divider */

.auditcta-content{

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

    padding-left:24px;

    flex:1;
}

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

.auditcta-icon-border{

    width:112px;
    height:112px;

    border-radius:50%;

    border:1px dashed rgba(255,0,120,.7);

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

.auditcta-icon-border span{

    width:86px;
    height:86px;

    border-radius:50%;

    background:#fff;

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

    color:var(--gbp-secondary-color);
}

.auditcta-icon-border svg{

    width:42px !important;
    height:42px !important;
}

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

.auditcta-content h3{


    color:#fff;

    font-size:28px;

    line-height:1.55;

    font-weight:600;
}

.auditcta-content h3 span{

    color:var(--gbp-secondary-color);
}

.auditcta-content p{

    margin:0;

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

    font-size:15px;

    line-height:1.8;

    max-width:470px;
}

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

.auditcta-btn{

    width:255px;

    height:52px;

    background:#fff;

    border-radius:8px;

    text-decoration:none;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    color:var(--gbp-secondary-color);

    font-weight:700;

    font-size:16px;

    transition:.3s;
}

.auditcta-btn:hover{

    transform:translateY(-2px);
}

.auditcta-btn span{

    width:34px;
    height:34px;

    border-radius:50%;

    background:var(--gbp-secondary-color);

    color:#fff;

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

.auditcta-btn span svg{

    width:14px !important;
    height:14px !important;
}

.auditcta-note{

    margin-top:14px;

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

    color:#fff;

    font-size:15px;
}

.auditcta-note svg{

    width:15px !important;
    height:15px !important;
}

/* Decorative dots */

.auditcta-right::after{

    content:"";

    position:absolute;

    right:10px;

    top:50%;

    width:42px;
    height:70px;

    transform:translateY(-50%);

    background-image:radial-gradient(rgba(255,255,255,.35) 1.5px,transparent 1.5px);

    background-size:10px 10px;
}

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

@media(max-width:767px){

.auditcta-section{

    flex-direction:column;

    align-items:stretch;

    border-radius:12px;

    margin:25px 0;
}

.auditcta-left{

    width:100%;

    padding:18px;

    gap:14px;
}

.auditcta-content{

    padding-left:14px;
}

.auditcta-content h3{

    font-size:18px;

    line-height:1.45;
}

.auditcta-content p{

    font-size:11px;

    line-height:1.6;
}

.auditcta-icon-border{

    width:90px;
    height:90px;
}

.auditcta-icon-border span{

    width:66px;
    height:66px;
}

.auditcta-icon-border svg{

    width:22px !important;
    height:22px !important;
}


.auditcta-btn{

    width:100%;

    max-width:240px;

    height:42px;

    font-size:13px;
}

.auditcta-btn span{

    width:28px;
    height:28px;
}

.auditcta-note{

    font-size:11px;

    margin-top:10px;
}

}


/* Hidden on Desktop */
.auditcta-mobile-action{
    display:none;
}

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

@media (max-width:767px){

    .auditcta-section{
        display:block;
        overflow:hidden;
    }

    .auditcta-left{
        width:100%;
        background:linear-gradient(90deg,var(--gbp-primary-color) 0%,#2a066d 60%,var(--gbp-secondary-color) 100%);
        padding:18px;
        gap:14px;
        align-items:flex-start;
    }

    .auditcta-right{
        display:none;
    }

    .auditcta-mobile-action{
        display:block;
        margin-top:16px;
    }

    .auditcta-content{
        border-left:none;
        padding-left:0;
    }


    .auditcta-content p{
       display:none;
    }

    .auditcta-btn{
        width:100%;
        height:48px;
        max-width:none;
        border-radius:8px;
        justify-content:center;
        font-size:14px;
    }

    .auditcta-note{
        justify-content:center;
        margin-top:12px;
        font-size:11px;
    }

    .auditcta-icon-border{
        width:72px;
        height:72px;
    }

    .auditcta-icon-border span{
        width:56px;
        height:56px;
    }

    .auditcta-icon-border svg{
        width:26px !important;
        height:26px !important;
    }

}




/*for the same upper design*/

/*=========================================
 WEBSITE PROBLEMS HEADING
=========================================*/

.gbp-problem-heading{
    text-align:center;
    max-width:900px;
    margin:0 auto 35px;
}

.gbp-problem-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 22px;
    border-radius:50px;
    background:rgba(192,0,99,.08);
    color:var(--gbp-secondary-color);
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.4px;
    margin-bottom:20px;
}

.gbp-problem-badge svg{
    width:18px !important;
    height:18px !important;
}

.gbp-problem-heading h2{
    margin:0;
    color:var(--gbp-primary-color);
    font-size:32px;
    font-weight:600;
    line-height:1.1;
}

.gbp-problem-heading h2 span{
    display:block;
    color:var(--gbp-secondary-color);
    margin-top:6px;
}

.gbp-problem-heading p{
    margin:10px auto 0;
    max-width:800px;
    color:var(--gbp-paragraph-color);
    font-size:14px;
    line-height:1.7;
}

/*=========================
 Tablet
=========================*/

@media(max-width:991px){

    .gbp-problem-heading h2{
        font-size:42px;
    }

    .gbp-problem-heading p{
        font-size:18px;
    }
    .gbp-industry-card p{
        max-width:280px;
    }
    .gbp-industry-card h3{
        max-width:280px;
    }

}

/*=========================
 Mobile
=========================*/

@media(max-width:767px){

    .gbp-problem-heading{
        margin-bottom:25px;
    }

    .gbp-problem-badge{
        font-size:10px;
        padding:8px 14px;
        gap:6px;
    }

    .gbp-problem-badge svg{
        width:14px !important;
        height:14px !important;
    }

    .gbp-problem-heading h2{
        font-size:22px;
        line-height:1.25;
    }

    .gbp-problem-heading h2 span{
        margin-top:4px;
    }

    .gbp-problem-heading p{
        font-size:14px;
        line-height:1.8;
        margin-top:10px;
    }

}
    /*===============================
NEW CARD DESIGN
================================*/

    .gbp-card-icon {
        margin-bottom: 18px;
    }

    .gbp-card-icon span {
        width: 65px;
        height: 65px;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: linear-gradient(180deg, #fdeaf3, #fff);
    }

    .gbp-card-icon span svg {
        width: 34px !important;
        height: 34px !important;
    }

    .gbp-card-number {
        width: 38px;
        height: 38px;
        margin: 0 auto 15px;
        border-radius: 50%;
        background: #fff2f7;
        color: var(--gbp-secondary-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 700;
    }

    .gbp-card-line {
        width: 45px;
        height: 3px;
        margin: 12px auto;
        background: var(--gbp-secondary-color);
        border-radius: 30px;
    }

    @media(max-width:767px) {
        .gbp-card-icon span {
            width: 50px;
            height: 50px;
        }

        .gbp-card-icon {
            margin-bottom: 10px;
        }

        .gbp-card-line {
            margin: 8px auto;
            ;
        }

        .gbp-card-icon span svg {
            width: 28px !important;
            height: 28px !important;
        }

        .gbp-card-number {
            width: 34px;
            height: 34px;
            font-size: 14px;
            padding: 0 auto 8px;
        }

        .gbp-card-line {
            width: 38px;
        }

        .gbp-industries-scroll .gbp-industry-card {
            min-width: 250px;
        }
    }
    
 /*==================================================
WEBSITE COMPARISON
PART 1 - LAYOUT
==================================================*/

.websitecompare-row{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    margin-top:35px;
}

/*==============================
LEFT - CENTER - RIGHT
==============================*/

.websitecompare-left,
.websitecompare-middle,
.websitecompare-right{

    position:relative;
}

.websitecompare-left,
.websitecompare-right{

    width:34%;
}

.websitecompare-middle{

    width:32%;
}

/*==============================
CARDS
==============================*/

.websitecompare-card,
.websitecompare-centercard{

    background:#fff;

    border-radius:22px;

    position:relative;

    overflow:hidden;

    box-shadow:0 12px 35px rgba(2,0,102,.06);

    /*min-height:650px;*/
}

/* Left */

.websitecompare-custom{

    border:2px solid var(--gbp-secondary-color);
}

/* Right */

.websitecompare-template{

    border:2px solid var(--gbp-primary-color);
}

/* Middle */

.websitecompare-centercard{

    border:1px solid rgba(2,0,102,.08);

    margin-top:5px;
}

/*==============================
HEADERS
==============================*/

.websitecompare-title{

    position:absolute;

    top:0px;

    left:50%;

    transform:translateX(-50%);

    width:300px;

    height:48px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    color:#fff;

    font-size:24px;

    font-weight:700;

    z-index:2;

    box-shadow:0 12px 25px rgba(0,0,0,.08);
}

.websitecompare-custom .websitecompare-title{

    background:var(--gbp-secondary-color);
}

.websitecompare-template .websitecompare-title{

    background:var(--gbp-primary-color);
}

.websitecompare-title svg{

    width:22px !important;

    height:22px !important;
}

/*==============================
BODY
==============================*/

.websitecompare-list{

    padding:62px 28px 25px;
}

.websitecompare-centercard{

    padding:18px 28px 25px;
}

/*==============================
VS SECTION
==============================*/

.websitecompare-arrows{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    margin-bottom:-10px;
}

.websitecompare-line{

    flex:1;

    height:2px;

    background:var(--gbp-secondary-color);

    position:relative;
}

.websitecompare-line::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    transform:translateY(-50%);

    width:10px;

    height:10px;

    border-top:2px solid var(--gbp-secondary-color);

    border-right:2px solid var(--gbp-secondary-color);

    /*transform:translateY(-50%) rotate(45deg);*/
    transform:translateY(-58%) rotate(225deg);
}

.websitecompare-line:last-child::before{

    left:auto;

    right:0;

    transform:translateY(-55%) rotate(46deg);
}

.websitecompare-vs{

    width:72px;

    height:72px;

    border-radius:50%;

    background:var(--gbp-secondary-color);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    font-weight:700;

    /*box-shadow:0 10px 30px rgba(192,0,99,.35);*/

    flex-shrink:0;
}

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

@media(max-width:991px){

.websitecompare-row{

    gap:15px;
}

.websitecompare-left{

    width:35%;
}

.websitecompare-middle{

    width:30%;
}

.websitecompare-right{

    width:35%;
}

.websitecompare-title{

    width:230px;

    height:50px;

    font-size:18px;
}

.websitecompare-card,
.websitecompare-centercard{

    min-height:auto;
}

}

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

@media(max-width:767px){

.websitecompare-row{

    display:block;
}

.websitecompare-left,
.websitecompare-middle,
.websitecompare-right{

    width:100%;
}

.websitecompare-middle{

    margin:25px 0;
}

.websitecompare-title{

    width:240px;

    height:50px;

    font-size:18px;
}

.websitecompare-list{

    padding:65px 18px 18px;
}

.websitecompare-centercard{

    margin-top:20px;

    padding:18px;
}

.websitecompare-vs{

    width:56px;

    height:56px;

    font-size:22px;
}

}
/*==================================================
WEBSITE COMPARISON
PART 2 - ITEMS
==================================================*/

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

.websitecompare-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

    /*padding:22px 0;*/
 padding:10px 0 14px;
    border-bottom:1px solid #ececec;
}

.websitecompare-item:last-child{

    border-bottom:none;

    padding-bottom:0;
}

/*==============================
LEFT & RIGHT ICON
==============================*/

.websitecompare-icon{

    width:62px;

    height:62px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff3f8;
}

.websitecompare-template .websitecompare-icon{

    background:#f5f5ff;
}

.websitecompare-custom .websitecompare-icon{

    color:var(--gbp-secondary-color);
}

.websitecompare-template .websitecompare-icon{

    color:var(--gbp-primary-color);
}

.websitecompare-icon svg{

    width:30px !important;

    height:30px !important;
}

/*==============================
CENTER CHECK ICON
==============================*/

.websitecompare-check{

    width:38px;

    height:38px;

    flex-shrink:0;

    border-radius:50%;

    background:var(--gbp-secondary-color);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-top:3px;
}

.websitecompare-check svg{

    width:16px !important;

    height:16px !important;
}

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

.websitecompare-content{

    flex:1;
}

.websitecompare-content h4{

    margin:0 0 6px;

    font-size:16px;

    line-height:1.4;

    font-weight:600;

    color:var(--gbp-primary-color);
}

.websitecompare-custom .websitecompare-content h4{

    color:var(--gbp-secondary-color);
}

.websitecompare-template .websitecompare-content h4{

    color:var(--gbp-primary-color);
}

.websitecompare-content p{

    margin:0;

    font-size:14px;

    line-height:1.6;

    color:var(--gbp-paragraph-color);
}

/*==============================
HOVER
==============================*/

.websitecompare-card{

    transition:.35s;
}

.websitecompare-card:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 45px rgba(2,0,102,.12);
}

.websitecompare-centercard{

    transition:.35s;
}

/*.websitecompare-centercard:hover{*/

/*    transform:translateY(-8px);*/

/*    box-shadow:0 18px 45px rgba(2,0,102,.10);*/
/*}*/

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

.websitecompare-title svg,
.websitecompare-icon svg,
.websitecompare-check svg{

    display:block;
}

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

@media(max-width:991px){

.websitecompare-item{

    gap:14px;

    padding:18px 0;
}

.websitecompare-icon{

    width:54px;

    height:54px;
}

.websitecompare-icon svg{

    width:24px !important;

    height:24px !important;
}

.websitecompare-check{

    width:34px;

    height:34px;
}

.websitecompare-content h4{

    font-size:18px;
}

.websitecompare-content p{

    font-size:13px;

    line-height:1.7;
}

}

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

@media(max-width:767px){

.websitecompare-item{

    gap:12px;

    padding:12px 0 12px;
}

.websitecompare-icon{

    width:46px;

    height:46px;
}

.websitecompare-icon svg{

    width:20px !important;

    height:20px !important;
}

.websitecompare-check{

    width:30px;

    height:30px;
}

.websitecompare-check svg{

    width:13px !important;

    height:13px !important;
}

.websitecompare-content h4{

    font-size:16px;

    margin-bottom:4px;
}

.websitecompare-content p{

    font-size:12px;

    line-height:1.6;
}

}

/*==================================================
WEBSITE COMPARISON
PART 3 - FINAL POLISH
==================================================*/

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

.websitecompare-card::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:6px;
}

.websitecompare-custom::before{

    background:var(--gbp-secondary-color);
}

.websitecompare-template::before{

    background:var(--gbp-primary-color);
}

/*.websitecompare-centercard::before{*/

/*    content:"";*/

/*    position:absolute;*/

/*    left:0;*/
/*    top:0;*/

/*    width:100%;*/
/*    height:5px;*/

/*    background:linear-gradient(*/
/*        90deg,*/
/*        var(--gbp-secondary-color),*/
/*        var(--gbp-primary-color)*/
/*    );*/
/*}*/

/*==========================
SOFT BACKGROUND
==========================*/

.websitecompare-custom{

    background:
    linear-gradient(to bottom,#fff,#fff9fc);
}

.websitecompare-template{

    background:
    linear-gradient(to bottom,#fff,#fafaff);
}

.websitecompare-centercard{

    background:#fff;
}

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

.websitecompare-title{

    letter-spacing:.3px;

    text-transform:none;
}

.websitecompare-title span{

    white-space:nowrap;
}

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

.websitecompare-list{

    display:flex;

    flex-direction:column;
}

.websitecompare-centercard{

    display:flex;

    flex-direction:column;
}

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

.websitecompare-item{

    transition:.30s;
}

.websitecompare-card .websitecompare-item:hover{

    padding-left:5px;
}

/*.websitecompare-centercard .websitecompare-item:hover{*/

/*    padding-left:5px;*/
/*}*/

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

.websitecompare-icon{

    box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.websitecompare-check{

    box-shadow:0 8px 18px rgba(192,0,99,.22);
}

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

.websitecompare-content h4{

    transition:.30s;
}

.websitecompare-item:hover h4{

    letter-spacing:.2px;
}

.websitecompare-content p{

    max-width:320px;
}

/*==========================
VS
==========================*/

.websitecompare-vs{

    border:5px solid #fff;
}

.websitecompare-middle{

    display:flex;

    flex-direction:column;

    justify-content:center;
}

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

.websitecompare-centercard{

    box-shadow:
    0 10px 30px rgba(2,0,102,.06);
}

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

@media(max-width:991px){

.websitecompare-row{

    flex-wrap:wrap;
}

.websitecompare-left,
.websitecompare-right{

    width:100%;
    
}
.websitecompare-right{
    margin-top: 10px;
}

.websitecompare-middle{

    width:100%;

    margin:20px 0;
}

.websitecompare-title{

    width:250px;
}

.websitecompare-card{

    margin-bottom:20px;
}

}

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

@media(max-width:767px){

.websitecompare-row{

    gap:0;
}

.websitecompare-title{

    width:210px;

    height:46px;

    font-size:17px;
}

.websitecompare-title svg{

    width:18px !important;

    height:18px !important;
}

.websitecompare-list{

    padding:50px 16px 18px;
}

.websitecompare-centercard{

    padding:16px;
}

.websitecompare-content h4{

    font-size:15px;
}

.websitecompare-content p{

    font-size:12px;

    max-width:100%;
}

.websitecompare-card .websitecompare-item:hover,
.websitecompare-centercard .websitecompare-item:hover{

    padding-left:0;
}

.websitecompare-vs{

    width:52px;
    height:52px;

    font-size:20px;
}

.websitecompare-line{

    height:1px;
}

}


@media(max-width:767px){

.websitecompare-centercard{
    display:none;
}

}

@media(max-width:767px){

.websitecompare-middle{

    position:relative;

    margin:-14px 0;

    height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:20;
}

}

@media(max-width:767px){

.websitecompare-line{
    display:none;
}

}

@media(max-width:767px){

/*.websitecompare-vs::before,*/
/*.websitecompare-vs::after{*/

/*    content:"";*/

/*    position:absolute;*/

/*    left:50%;*/

/*    width:2px;*/

/*    background:var(--gbp-secondary-color);*/

/*    transform:translateX(-50%);*/
/*}*/

 /*Top line */

/*.websitecompare-vs::before{*/

/*    bottom:100%;*/

/*    height:18px;*/
/*}*/

 /*Bottom line */

/*.websitecompare-vs::after{*/

/*    top:100%;*/

/*    height:18px;*/
/*}*/

/*.websitecompare-middle::before{*/

/*    content:"";*/

/*    position:absolute;*/

/*    left:50%;*/

/*    top:-2px;*/

/*    width:8px;*/
/*    height:8px;*/

/*    border-left:2px solid var(--gbp-secondary-color);*/
/*    border-top:2px solid var(--gbp-secondary-color);*/

/*    transform:translateX(-50%) rotate(45deg);*/
/*}*/

/*.websitecompare-middle::after{*/

/*    content:"";*/

/*    position:absolute;*/

/*    left:50%;*/

/*    bottom:-2px;*/

/*    width:8px;*/
/*    height:8px;*/

/*    border-right:2px solid var(--gbp-secondary-color);*/
/*    border-bottom:2px solid var(--gbp-secondary-color);*/

/*    transform:translateX(-50%) rotate(45deg);*/
/*}*/

.websitecompare-middle{

    position:relative;

    margin:-30px 0 -18px;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:20;
}

.websitecompare-centercard{
    display:none;
}

.websitecompare-arrows{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;
}

.websitecompare-vs{

    width:54px;
    height:54px;

    border-radius:50%;

    background:var(--gbp-secondary-color);

    color:#fff;

    border:4px solid #fff;

    font-size:20px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    position:relative;

    z-index:5;
}

.websitecompare-line{

    flex:1;

    height:2px;

    background:var(--gbp-secondary-color);

    position:relative;

    display:block;
}

/* LEFT ARROW */

.websitecompare-leftline span{

    position:absolute;

    left:-1px;

    top:50%;

    width:8px;
    height:8px;

    border-top:2px solid var(--gbp-secondary-color);

    border-left:2px solid var(--gbp-secondary-color);

    transform:translateY(-50%) rotate(-45deg);

    display:block;
}
@media (max-width:767px){

.websitecompare-centercard{
    display:none;
}

.websitecompare-middle{

    position:relative;

    margin:-32px 0 -22px;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:20;
}

.websitecompare-arrows{

    width:100%;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;
}

.websitecompare-vs{

    width:56px;
    height:56px;

    background:var(--gbp-secondary-color);

    border-radius:50%;

    color:#fff;

    font-size:22px;

    font-weight:700;

    border:4px solid #fff;

    position:relative;

    z-index:5;
}

/* LEFT ARROW */

.websitecompare-vs::before{

    content:"↑";

    position:absolute;

    left:-26px;

    top:6px;

    font-size:20px;

    color:var(--gbp-secondary-color);

    font-weight:bold;
}

/* RIGHT ARROW */

.websitecompare-vs::after{

    content:"↓";

    position:absolute;

    right:-26px;

    top:6px;

    font-size:20px;

    color:var(--gbp-secondary-color);

    font-weight:bold;
}

.websitecompare-line{

    display:none;
}
}

/* RIGHT ARROW */

.websitecompare-rightline span{

    position:absolute;

    right:-1px;

    top:50%;

    width:8px;
    height:8px;

    border-top:2px solid var(--gbp-secondary-color);

    border-right:2px solid var(--gbp-secondary-color);

    transform:translateY(-50%) rotate(45deg);

    display:block;
}

}

   /*==================================================
ROI SECTION
==================================================*/

.gbp-roi-section{
    padding:40px 0 30px;
    position:relative;
}

/*==================================================
LAYOUT
==================================================*/

.roi-wrapper{

    display:flex;

    gap:28px;

    align-items:stretch;

    margin-top:30px;
}

.roi-input-card{

    width:54%;

    background:#fff;

    border-radius:26px;

    position:relative;

    padding:40px 42px 16px;

    box-shadow:
    0 20px 50px rgba(2,0,102,.08);

    overflow:hidden;
}

.roi-result-card{

    width:46%;
}

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

.roi-card-title{

    position:absolute;

    top:-1px;

    left:42px;

    background:var(--gbp-primary-color);

    color:#fff;

    height:36px;

    padding:0 16px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:14px;

    font-weight:600;

    border-radius:0 0 14px 14px;

    letter-spacing:.3px;

    box-shadow:0 8px 20px rgba(2,0,102,.15);
}

/*==================================================
FIELD
==================================================*/

.roi-field{

    display:flex;

    align-items:center;

    gap:24px;

    padding:18px 0;

    border-bottom:1px solid #ececf6;
}

.roi-field:last-of-type{

    border-bottom:none;
}

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

.roi-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    flex-shrink:0;

    background:linear-gradient(180deg,#fff5f9,#ffeef5);

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--gbp-secondary-color);

    box-shadow:0 12px 25px rgba(192,0,99,.08);
}

.roi-icon svg{

    width:40px !important;

    height:40px !important;
}

.roi-icon{

    font-size:52px;

    font-weight:700;
}

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

.roi-content{

    flex:1;
}

.roi-heading h4{

    margin:0;

    font-size:16px;

    font-weight:600;

    color:var(--gbp-primary-color);

    line-height:1.3;
}

.roi-heading p{

    margin:2px 0 12px;

    font-size:14px;

    color:var(--gbp-paragraph-color);

    line-height:1.6;
}

/*==================================================
VALUE BOX
==================================================*/

.roi-value{

    width:130px;

    height:72px;

    flex-shrink:0;

    border-radius:16px;

    border:2px solid #ededf7;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:26px;

    font-weight:700;

    color:var(--gbp-secondary-color);

    background:#fff;

    box-shadow:0 6px 16px rgba(2,0,102,.04);
}

/*==================================================
SLIDER
==================================================*/

.roi-slider{

    width:100%;
}

.roi-slider input{

    width:100%;
    height:5px;
}

.roi-scale{

    display:flex;

    justify-content:space-between;

    margin-top:10px;
}

.roi-scale span{

    font-size:15px;

    font-weight:600;

    color:var(--gbp-primary-color);
}

/*==================================================
INFO BOX
==================================================*/

.roi-info-box{

    margin-top:14px;

    display:flex;

    align-items:center;

    gap:18px;

    padding:8px 24px;

    border-radius:18px;

    background:linear-gradient(90deg,#fff7fa,#fff1f7);

    border:1px solid rgba(192,0,99,.08);
}

.roi-info-icon{

    width:50px;

    height:50px;

    border-radius:50%;

    background:linear-gradient(180deg,var(--gbp-secondary-color),#ff4b93);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;
}

.roi-info-icon svg{

    width:28px !important;

    height:28px !important;
}

.roi-info-content{

    flex:1;
}

.roi-info-content h5{

    font-size:20px;

    font-weight:700;

    color:var(--gbp-primary-color);

    line-height:1.4;
}

.roi-info-content p{

    margin:0;

    font-size:17px;

    color:var(--gbp-paragraph-color);

    line-height:1.6;
}
/*==================================================
RIGHT RESULT CARD
==================================================*/

.roi-result-card{

    background:var(--gbp-primary-color);

    border-radius:28px;

    padding:34px 34px 28px;

    color:#fff;

    position:relative;

    overflow:hidden;

    box-shadow:0 25px 60px rgba(2,0,102,.22);
}

/* Decorative glow */

.roi-result-card::before{

    content:"";

    position:absolute;

    right:-120px;

    top:-120px;

    width:260px;
    height:260px;

    border-radius:50%;

    background:radial-gradient(
        rgba(255,255,255,.08),
        transparent 70%
    );
}

.roi-result-card::after{

    content:"";

    position:absolute;

    left:-80px;

    bottom:-80px;

    width:200px;
    height:200px;

    border-radius:50%;

    background:radial-gradient(
        rgba(255,255,255,.05),
        transparent 70%
    );
}

/*==================================================
TOP SECTION
==================================================*/

.roi-result-top{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:20px;

    padding-bottom:24px;

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

    position:relative;

    z-index:2;
}

.roi-small-title{

    display:block;

    font-size:20px;

    font-weight:600;

    letter-spacing:1.1px;

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

    margin-bottom:8px;

    text-transform:uppercase;
}

.roi-result-top h3{

    margin:0;

    font-size:40px;

    line-height:1.2;

    font-weight:700;

    color:#fff;
}


/*==================================================
TOTAL AMOUNT
==================================================*/

.roi-total{

    font-size:72px;

    font-weight:700;

    line-height:1;

    margin:16px 0 14px;

    color:#fff;

    letter-spacing:-2px;

    position:relative;

    z-index:2;
    text-align:center;
}

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

.roi-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 20px;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        var(--gbp-secondary-color),
        #ff2f7f
    );

    color:#fff;

    font-size:18px;

    font-weight:600;

    margin-bottom:18px;

    box-shadow:0 12px 25px rgba(192,0,99,.25);

    position:relative;
     text-align:center;
    z-index:2;
}

/*==================================================
SUB HEADING
==================================================*/

.roi-result-heading{

    font-size:22px;

    font-weight:700;

    color:#fff;

    margin-bottom:28px;

    position:relative;
     text-align:center;
    z-index:2;
}

/*==================================================
BENEFITS
==================================================*/

.roi-benefits{

    display:grid;

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

    gap:0;

    position:relative;

    z-index:2;
}

.roi-benefit{

    text-align:center;

    padding:0 18px;

    position:relative;
}

/* vertical divider */

.roi-benefit:not(:last-child)::after{

    content:"";

    position:absolute;

    right:0;

    top:16px;

    width:1px;

    height:130px;

    background:rgba(255,255,255,.16);
}

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

.roi-benefit-icon{

    width:82px;

    height:82px;

    border-radius:50%;

    background:#fff;

    color:var(--gbp-secondary-color);

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 14px;

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

.roi-benefit-icon svg{

    width:34px !important;

    height:34px !important;
}

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

.roi-benefit h4{

    margin:0 0 6px;

    font-size:20px;

    line-height:1.3;

    font-weight:600;

    color:#fff;
}

.roi-benefit p{

    margin:0;

    font-size:16px;

    line-height:1.7;

    color:rgba(255,255,255,.82);
}
/*==================================================
ROI CALCULATOR
PART 3 - CTA + RESPONSIVE
==================================================*/

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

.roi-bottom-cta{
    margin-top:30px;

    background:linear-gradient(90deg,#020066 0%,#020066 52%,#c00063 52%,#d80072 100%);

    border-radius:16px;

    display:flex;

    align-items:center;

    overflow:hidden;

    box-shadow:0 20px 50px rgba(2,0,102,.12);
}

.roi-bottom-left{
    width:52%;

    display:flex;

    align-items:center;

    gap:22px;

    padding:28px 35px;
}

.roi-bottom-icon{

    width:90px;
    height:90px;

    flex-shrink:0;

    border-radius:50%;

    background:#fff;

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

    position:relative;
}

.roi-bottom-icon::before{

    content:"";

    position:absolute;
    inset:-10px;

    border:2px dashed rgba(255,255,255,.35);

    border-radius:50%;
}

.roi-bottom-icon svg{

    width:38px!important;
    height:38px!important;

    color:var(--gbp-secondary-color);
}




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

/*==============================
HOVER
==============================*/

.roi-left-card,
.roi-right-card{

    transition:.35s;
}

.roi-left-card:hover,
.roi-right-card:hover{

    transform:translateY(-8px);

    box-shadow:0 30px 60px rgba(2,0,102,.14);
}

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

@media(max-width:1200px){

.roi-wrapper{

    flex-direction:column;
}

.roi-left,
.roi-right{

    width:100%;
}

.roi-bottom-cta{

    flex-direction:column;
}

.roi-bottom-left,
.roi-bottom-right{

    width:100%;
}

.roi-bottom-right{

    justify-content:center;

    gap:30px;
}

}

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

.roi-badge-wrapper{
    text-align:center;
}
/*=========================================
RESULT HEADER ICON
=========================================*/

.roi-result-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}

.roi-result-image{
    display:flex;
    align-items:center;
    gap:14px;
}


/*=========================================
RUPEE CIRCLE
=========================================*/

.roi-money-circle{

    width:88px;
    height:88px;

    border-radius:50%;

    position:relative;

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

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

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

.roi-money-circle::before{

    content:"";

    position:absolute;

    inset:-5px;

    border-radius:50%;

    border:5px solid transparent;

    border-top-color:#ff2d78;
    border-right-color:#9f7bff;

    transform:rotate(18deg);
}

.roi-money-circle span{

    font-size:56px;
    font-weight:700;
    color:#ff2d78;

    line-height:1;
}


/*=========================================
GRAPH
=========================================*/

.roi-growth-icon{

    position:relative;

    width:120px;
    height:95px;
}


/* Arrow */

.roi-arrow{

    position:absolute;

    top:0;
    left:12px;

    width:88px;
    height:42px;

    border-top:5px solid #fff;
    border-right:5px solid #fff;

    transform:skewX(-38deg) rotate(8deg);
}

.roi-arrow::after{

    content:"";

    position:absolute;

    right:-9px;
    top:-9px;

    width:14px;
    height:14px;

    border-top:5px solid #fff;
    border-right:5px solid #fff;

    transform:rotate(45deg);
}


/*=========================================
BARS
=========================================*/

.roi-bars{

    position:absolute;

    bottom:0;
    left:18px;

    display:flex;
    align-items:flex-end;
    gap:10px;
}

.roi-bars span{

    width:22px;

    border-radius:5px 5px 0 0;

    background:linear-gradient(
        to top,
        #b10067,
        #ff4d92
    );
}

.roi-bars span:nth-child(1){

    height:34px;
}

.roi-bars span:nth-child(2){

    height:52px;
}

.roi-bars span:nth-child(3){

    height:72px;
}

.roi-bars span:nth-child(4){

    height:94px;
}

/*====================================================
ROI MOBILE PART 1
LEFT INPUT CARD
====================================================*/

@media (max-width:768px){

/*-----------------------------------
Main Layout
-----------------------------------*/

.gbp-roi-section{
    padding:25px 0 20px;
}

.roi-wrapper{
    flex-direction:column;
    gap:20px;
}

.roi-input-card,
.roi-result-card{
    width:100%;
}


/*-----------------------------------
Input Card
-----------------------------------*/

.roi-input-card{

    padding:58px 18px 18px;

    border-radius:22px;
}


/*-----------------------------------
Top Badge
-----------------------------------*/

.roi-card-title{

    left:18px;

    top:0;

    height:34px;

    padding:0 18px;

    font-size:13px;

    border-radius:0 0 12px 12px;
}


/*-----------------------------------
Every Field
-----------------------------------*/

.roi-field{

    display:flex;

    flex-wrap:wrap;

    align-items:flex-start;

    gap:14px;

    padding:22px 0 20px;
}


/*-----------------------------------
Icon
-----------------------------------*/

.roi-icon{

    width:60px;

    height:60px;

    border-radius:15px;
}

.roi-icon svg{

    width:32px!important;

    height:32px!important;
}

.roi-icon{

    font-size:42px;
}


/*-----------------------------------
Content
-----------------------------------*/

.roi-content{

    flex:1;

    min-width:0;
}


/*-----------------------------------
Heading
-----------------------------------*/

.roi-heading h4{

    font-size:16px;

    margin-bottom:4px;
}

.roi-heading p{

    font-size:12px;

    line-height:1.45;

    margin-bottom:14px;
}


/*-----------------------------------
Value Box
-----------------------------------*/

.roi-value{

    width:65px;

    height:40px;

    font-size:16px;

    border-radius:10px;
}


/*-----------------------------------
Slider
-----------------------------------*/

.roi-slider{

    width:100%;
}

.roi-slider input{

    width:100%;
}

.roi-scale{

    margin-top:10px;
}

.roi-scale span{

    font-size:14px;
}


/*-----------------------------------
Info Box
-----------------------------------*/

.roi-info-box{

    padding:16px;

    gap:8px;

    border-radius:18px;
}

.roi-info-icon{

    width:48px;

    height:48px;
}

.roi-info-icon svg{

    width:24px!important;

    height:24px!important;
}

.roi-info-content h5{

    font-size:18px;

    line-height:1.45;

    margin-bottom:6px;
}

.roi-info-content p{

    font-size:15px;

    line-height:1.55;
}

}
/*==================================================
MOBILE PART 2
ROI FIELD LAYOUT
==================================================*/

@media (max-width:767px){

/*----------------------------------
Input Card
----------------------------------*/

.roi-input-card{

    padding:20px 18px 18px;

    border-radius:22px;
}


/*----------------------------------
Every Field
----------------------------------*/

.roi-field{

    display:flex;

    flex-wrap:wrap;

    align-items:flex-start;

    gap:14px;

    padding:20px 0;
}


/*----------------------------------
Icon
----------------------------------*/

.roi-icon{

    width:60px;

    height:60px;

    border-radius:14px;

    flex:0 0 60px;
}

.roi-icon svg{

    width:32px !important;

    height:32px !important;
}

.roi-icon{

    font-size:42px;
}


/*----------------------------------
Heading + Description
----------------------------------*/

.roi-content{

    flex:1;

    min-width:0;
}

.roi-heading{

    margin-bottom:2px;
}



/*----------------------------------
Value Box
----------------------------------*/

.roi-value{

    font-weight:600;

    flex-shrink:0;
}


/*----------------------------------
Slider below heading
----------------------------------*/

.roi-slider{

    width:100%;

    flex:0 0 100%;
}

.roi-slider input{

    width:100%;
}

.roi-scale{

    margin-top:8px;
}

.roi-scale span{

    font-size:12px;
}


.roi-info-icon{

    width:48px;

    height:48px;
}

.roi-info-icon svg{

    width:22px !important;

    height:22px !important;
}

.roi-info-content h5{

    font-size:14px;

    line-height:1.4;

    margin-bottom:4px;
}

.roi-info-content p{

    font-size:12px;

    line-height:1.5;
}

}
/*==================================================
MOBILE PART 3
RIGHT RESULT CARD
==================================================*/

@media (max-width:767px){

/*---------------------------------
Blue Card
---------------------------------*/

.roi-result-card{

    padding:22px 18px;

    border-radius:22px;

    margin-top:8px;
}


/*---------------------------------
Top Area
---------------------------------*/

.roi-result-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

    padding-bottom:10px;
}

.roi-small-title{

    display:inline-flex;

    padding:6px 12px;

    border-radius:4px;

    background:linear-gradient(90deg,#ff0d6b,#ff4d93);

    color:#fff;

    font-size:12px;

    letter-spacing:.5px;

    margin-bottom:10px;
}

.roi-result-top h3{

    font-size:18px;

    line-height:1.2;
}


/*---------------------------------
Top Right Icon
---------------------------------*/

.roi-result-image{

    gap:6px;
}

.roi-money-circle{

    width:50px;

    height:50px;

    border-width:3px;
}

.roi-money-circle span{

    font-size:30px;
}

.roi-growth-icon{

    width:82px;

    height:70px;
}

.roi-bars{

    left:12px;

    gap:6px;
}

.roi-bars span{

    width:14px;
}

.roi-bars span:nth-child(1){

    height:20px;
}

.roi-bars span:nth-child(2){

    height:34px;
}

.roi-bars span:nth-child(3){

    height:48px;
}

.roi-bars span:nth-child(4){

    height:64px;
}


/*---------------------------------
Revenue Amount
---------------------------------*/

.roi-total{

    font-size:40px;

    margin:16px 0 14px;

    letter-spacing:-1px;

    text-align:center;
}


/*---------------------------------
Pink Badge
---------------------------------*/

.roi-badge{


    justify-content:center;

    font-size:12px;

    padding:8px 12px;
    margin-bottom:0px;
}


/*---------------------------------
Heading
---------------------------------*/

.roi-result-heading{

    margin:16px 0 18px;

    font-size:12px;

    line-height:1.4;
}


/*---------------------------------
Benefits
---------------------------------*/

.roi-benefits{

    display:grid;

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

    gap:10px;
}

.roi-benefit{

    padding:0 6px;
}

.roi-benefit:not(:last-child)::after{

    height:110px;

    top:8px;
}

.roi-benefit-icon{

    width:48px;

    height:48px;

    margin-bottom:12px;
}

.roi-benefit-icon svg{

    width:22px !important;

    height:22px !important;
}

.roi-benefit h4{

    font-size:12px;

    line-height:1.3;

    margin-bottom:6px;
}

.roi-benefit p{

    font-size:10px;

    line-height:1.45;
}

}/*==================================================
/*==================================================
BOTTOM CTA
DESKTOP
==================================================*/

.roi-bottom-cta{

    margin-top:34px;

    display:flex;

    align-items:center;

    background:var(--gbp-primary-color);

    border-radius:24px;

    overflow:hidden;

    box-shadow:
    0 18px 45px rgba(2,0,102,.12);
}

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

.roi-bottom-left{

    width:42%;

    display:flex;

    align-items:center;

    gap:50px;

    padding:22px 26px;
}

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

.roi-bottom-icon{

    width:82px;

    height:82px;

    flex-shrink:0;

    border-radius:50%;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;
}

.roi-bottom-icon::before{

    content:"";

    position:absolute;

    inset:-7px;

    border-radius:50%;

    border:2px dotted rgba(255,60,140,.45);
}

.roi-bottom-icon svg{

    width:38px !important;

    height:38px !important;

    color:var(--gbp-secondary-color);
}

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

.roi-bottom-content{

    flex:1;
}

.roi-bottom-content h3{

    margin:0;

    color:#fff;

    font-size:22px;

    line-height:1.35;

    font-weight:600;
}

.roi-bottom-content p{

    margin:10px 0 0;

    color:var(--gbp-secondary-color);

    font-size:20px;

    font-weight:600;

    line-height:1.45;
}

/*=====================================
DIVIDERS
=====================================*/

.roi-divider{

    width:2px;

    align-self:center;

    background:rgba(255,255,255,.12);
}

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

.roi-bottom-center{

    width:36%;

    display:flex;

    justify-content:center;

    padding:0 34px;
}

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

.roi-cta-btn{


   padding:12px 20px;

    border-radius:10px;

    background:linear-gradient(
        90deg,
        #d50068,
        #ff216f
    );

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    text-decoration:none;

    font-size:18px;

    font-weight:600;

    transition:.35s;
}

.roi-cta-btn:hover{

    transform:translateY(-4px);

    color:#fff;

    box-shadow:
    0 16px 35px rgba(213,0,104,.30);
}

.roi-cta-btn span{

    width:50px;

    height:50px;

    border-radius:50%;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;
}

.roi-cta-btn span svg{

    width:24px !important;

    height:24px !important;

    color:var(--gbp-secondary-color);
}

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

.roi-bottom-right{

    width:22%;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:0 24px;
}

/*=====================================
FREE
=====================================*/

.roi-free{

    display:flex;

    align-items:center;

    gap:14px;
}

.roi-free svg{

    width:40px !important;

    height:40px !important;

    color:var(--gbp-secondary-color);
}

.roi-free strong{

    display:block;

    color:#fff;

    font-size:16px;

    font-weight:700;

    line-height:1.4;
}

.roi-free p{

    margin:3px 0 0;

    color:#fff;

    font-size:15px;

    opacity:.9;

    line-height:1.4;
}
/*==================================================
BOTTOM CTA
TABLET
==================================================*/

@media (max-width:991px){

.roi-bottom-cta{

    flex-wrap:wrap;
}


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

.roi-bottom-left{

    width:100%;

    padding:24px;

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


/* Hide Vertical Divider */

.roi-divider:first-of-type{

    display:none;
}


/*=====================================
BOTTOM AREA
(Button + Free)
=====================================*/

.roi-bottom-center{

    width:70%;

    padding:24px;
}

.roi-bottom-right{

    width:30%;

    padding:24px;

    justify-content:center;
}


/* Divider Between Button & Free */

.roi-divider:last-of-type{

    display:block;

    width:1px;

    align-self:stretch;

    background:rgba(255,255,255,.12);
}


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

.roi-bottom-content p{

    font-size:17px;
}


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

.roi-cta-btn{

    height:68px;

    font-size:17px;
}

.roi-cta-btn span{

    width:40px;

    height:40px;
}


/*=====================================
FREE
=====================================*/

.roi-free{

    gap:12px;
}

.roi-free svg{

    width:30px !important;

    height:30px !important;
}

.roi-free strong{

    font-size:15px;
}

.roi-free p{

    font-size:14px;
}

}

/*==================================================
BOTTOM CTA
MOBILE
==================================================*/

@media (max-width:767px){

/*=====================================
MAIN BAR
=====================================*/

.roi-bottom-cta{

    flex-direction:column;

    border-radius:20px;

    margin-top:22px;
}


/* Remove desktop dividers */

.roi-divider{

    display:none !important;
}


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

.roi-bottom-left{

    width:100%;

    padding:22px 18px 16px;

    display:flex;

    align-items:center;

    gap:35px;

    border-bottom:none;
}

.roi-bottom-icon{

    width:66px;

    height:66px;
}

.roi-bottom-icon::before{

    inset:-5px;
}

.roi-bottom-icon svg{

    width:30px !important;

    height:30px !important;
}


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

.roi-bottom-content{

    flex:1;
}

.roi-bottom-content h3{

    font-size:14px;

    line-height:1.4;

}

.roi-bottom-content p{

    font-size:14px;

    line-height:1.5;

    margin:0;
}


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

.roi-bottom-center{

    width:100%;

    padding:0 18px 16px;
}


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

.roi-cta-btn{

    width:100%;

    max-width:none;

    height:64px;

    border-radius:12px;

    font-size:18px;

    justify-content:center;

    gap:14px;
}

.roi-cta-btn span{

    width:38px;

    height:38px;
}

.roi-cta-btn span svg{

    width:15px !important;

    height:15px !important;
}


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

.roi-bottom-right{

    width:100%;

    padding:0 18px 22px;

    justify-content:center;
}


/*=====================================
FREE
=====================================*/

.roi-free{

    justify-content:center;

    gap:10px;

    text-align:center;
}

.roi-free svg{

    width:26px !important;

    height:26px !important;
}

.roi-free strong{

    font-size:15px;

    line-height:1.3;
}

.roi-free p{

    margin-top:2px;

    font-size:14px;

    opacity:.9;
}

}
/*=====================================
EXTRA SMALL
=====================================*/

@media (max-width:420px){

.roi-bottom-left{

    gap:14px;
}

.roi-bottom-icon{

    width:58px;

    height:58px;
}


.roi-bottom-content p{

    font-size:14px;
}

.roi-cta-btn{
    padding: 10px 16px;

    font-size:17px;
}
/*=====================================
RIGHT
=====================================*/

.roi-bottom-right{
    width:100%;
    padding:0 18px 22px;
    justify-content:center;
}

/*=====================================
FREE - ONE LINE ON MOBILE
=====================================*/

.roi-free{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-align:center;
    flex-direction:row; /* ← Ensure row direction */
}

.roi-free svg{
    width:26px !important;
    height:26px !important;
    flex-shrink:0;
}

.roi-free strong{
    font-size:15px;
    line-height:1.3;
    display:inline; /* ← Make it inline */
}

.roi-free p{
    margin:0;
    font-size:14px;
    opacity:.9;
    display:inline; /* ← Make it inline */
}


}
.roi-input-value{

    text-align:center;

    padding:0;

    outline:none;

    border:2px solid #ededf7;

    font-family:inherit;

    appearance:none;

    -webkit-appearance:none;
}
.roi-input-value:focus{

    border-color:var(--gbp-secondary-color);

    box-shadow:0 0 0 4px rgba(192,0,99,.10);
}
.roi-input-value{

    display:flex;
}

/*==================================================
SERVICE FIT SECTION
PART 1
==================================================*/
.gbp-service-fit-section{
position:relative;
padding:30px 0;
background:#f8f9fd;
overflow:hidden;
}
/*=========================
MAIN WRAPPER
=========================*/
.service-fit-wrapper{
display:flex;
gap:35px;
align-items:stretch;
margin-top:45px;
}
.service-fit-left{
width:58%;
display:flex;
flex-direction:column;
}
.service-fit-right{
width:42%;
}
/*=========================
LEFT INTRO
=========================*/
.service-left-intro{
display:flex;
align-items:center;
gap:24px;
padding:16px 28px;
border-radius:16px;
}
.service-left-icon{
width:60px;
height:60px;
border-radius:22px;
flex-shrink:0;
background:linear-gradient(180deg,#fff7fb,#ffeef6);
display:flex;
align-items:center;
justify-content:center;
color:var(--gbp-secondary-color);
}
.service-left-icon svg{
width:34px!important;
height:34px!important;
}
.service-left-content{
flex:1;
}
.service-left-content h3{
margin:0;
font-size:26px;
line-height:1.2;
font-weight:600;
color:var(--gbp-primary-color);
}
.service-left-content p{
font-size:18px;
line-height:1.8;
color:var(--gbp-secondary-color);
}
/*=========================
SERVICE GRID
=========================*/
.service-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
}
/*==================================================
SERVICE CARDS
PART 2
==================================================*/
.service-card{
position:relative;
background:#fff;
border-radius:24px;
padding:24px 28px;
overflow:hidden;
border:1px solid #edf0f7;
box-shadow:0 18px 40px rgba(2,0,102,.06);
transition:.35s;
}
.service-card:hover{
transform:translateY(-5px);
}
/*=========================
ICON
=========================*/
.service-card-icon{
width:60px;
height:60px;
border-radius:20px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:22px;
background:linear-gradient(180deg,#fff7fb,#ffeef6);
color:var(--gbp-secondary-color);
box-shadow:0 12px 25px rgba(192,0,99,.10);
transition:.35s;
}
.service-card:hover .service-card-icon{
background:linear-gradient(135deg,var(--gbp-secondary-color),#ff4d92);
color:#fff;
transform:rotate(-6deg) scale(1.08);
}
.service-card-icon svg{
width:34px!important;
height:34px!important;
}
/*=========================
TITLE
=========================*/
.service-card h4{
margin:0 0 8px;
font-size:20px;
line-height:1.3;
font-weight:600;
color:var(--gbp-primary-color);
}
/*=========================
DESCRIPTION
=========================*/
.service-card p{
margin:0;
font-size:16px;
line-height:1.8;
color:var(--gbp-paragraph-color);
}
/*=========================
HOVER TEXT
=========================*/
.service-card:hover h4{
color:var(--gbp-secondary-color);
}
.service-card:hover p{
color:#555;
}
/*==================================================
RIGHT CARD
PART 3
==================================================*/
.not-fit-card{
position:relative;
background:linear-gradient(180deg,#fff7fb,#ffeef6);
color:#fff;
border-radius:30px;
padding:35px;
height:100%;
overflow:hidden;
box-shadow:0 25px 60px rgba(2,0,102,.20);
}
.not-fit-card::before{
content:"";
position:absolute;
top:-120px;
right:-120px;
width:260px;
height:260px;
border-radius:50%;
background:radial-gradient(rgba(255,255,255,.08),transparent 70%);
}
.not-fit-card::after{
content:"";
position:absolute;
left:-80px;
bottom:-80px;
width:180px;
height:180px;
border-radius:50%;
background:radial-gradient(rgba(255,255,255,.05),transparent 70%);
}
/*=====================================
HEADER
=====================================*/
.not-fit-header{
display:flex;
align-items:flex-start;
gap:20px;
position:relative;
z-index:2;
}
.not-fit-icon{
width:70px;
height:70px;
border-radius:22px;
flex-shrink:0;
background:#fff;
color:var(--gbp-secondary-color);
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 15px 30px rgba(0,0,0,.18);
}
.not-fit-icon svg{
width:32px!important;
height:32px!important;
}
.not-fit-heading{
flex:1;
}
.not-fit-heading h3{
margin:0;
font-size:32px;
max-width:250px;
line-height:1.2;
font-weight:600;
color:var(--primary-color);
}
.not-fit-heading h3 span{
color:var(--gbp-secondary-color);
}
.not-fit-heading p{
margin:12px 0 14px;
font-size:18px;
line-height:1.7;
color:var(--primary-color);
}
.not-fit-line{
width:90px;
height:5px;
border-radius:50px;
background:linear-gradient(90deg,var(--gbp-secondary-color),#ff589d);
}
/*=====================================
ITEMS
=====================================*/
.not-fit-item{
display:flex;
gap:18px;
align-items:flex-start;
padding:22px 0 0;
border-bottom:1px solid rgba(255,255,255,.10);
position:relative;
z-index:2;
}
.not-fit-item:last-of-type{
border-bottom:none;
}
.not-fit-item-icon{
width:54px;
height:54px;
border-radius:50%;
flex-shrink:0;
background:rgba(255,255,255,.10);
color:#ff6a9e;
display:flex;
align-items:center;
border:2px solid var(--secondary-color);
justify-content:center;
}
.not-fit-item-icon svg{
width:22px!important;
height:22px!important;
}
.not-fit-item-content{
flex:1;
}
.not-fit-item-content h4{
margin:0 0 4px;
font-size:20px;
font-weight:600;
color:var(--primary-color);
}
.not-fit-item-content p{
margin:0;
font-size:16px;
line-height:1.8;
color:var(--primary-color);
}
/*=====================================
BOTTOM BOX
=====================================*/
.not-fit-bottom{
margin-top:24px;
display:flex;
gap:20px;
align-items:center;
padding:14px;
border-radius:22px;
background:#fff;
backdrop-filter:blur(10px);
position:relative;
z-index:2;
}
.not-fit-bottom-icon{
width:72px;
height:72px;
border-radius:18px;
background:#fff;
color:var(--gbp-secondary-color);
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.not-fit-bottom-icon svg{
width:30px!important;
height:30px!important;
}
.not-fit-bottom-content{
flex:1;
}
.not-fit-bottom-content h4{
margin:0 0 8px;
font-size:20px;
line-height:1.4;
color:var(--secondary-color);
}
.not-fit-bottom-content p{
margin:0;
font-size:17px;
color:var(--primary-color);
}
/*==================================================
BOTTOM CTA
PART 4
==================================================*/
.service-bottom-cta{
margin-top:45px;
background:linear-gradient(135deg,var(--gbp-primary-color),#03108f);
border-radius:16px;
overflow:hidden;
box-shadow:0 25px 60px rgba(2,0,102,.18);
}
/*====================================
TOP
====================================*/
.service-cta-top{
display:flex;
align-items:center;
padding:22px 30px;
}
/*====================================
ICON
====================================*/
.service-cta-icon{
width:55px;
height:55px;
flex-shrink:0;
border-radius:16px;
background:#fff;
color:var(--gbp-secondary-color);
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 18px 35px rgba(0,0,0,.18);
}
.service-cta-icon svg{
width:32px!important;
height:32px!important;
}
/*====================================
DIVIDER
====================================*/
.service-cta-divider{
width:1px;
align-self:stretch;
margin:0 35px;
background:rgba(255,255,255,.15);
}
/*====================================
RIGHT SIDE
====================================*/
.service-cta-main{
flex:1;
display:flex;
justify-content:space-between;
align-items:center;
gap:40px;
}
/*====================================
TEXT
====================================*/
.service-cta-content{
flex:1;
}
.service-cta-content h3{
margin:0;
color:#fff;
font-size:30px;
line-height:1.3;
font-weight:600;
}
/*====================================
BUTTON
====================================*/
.service-cta-button{
flex-shrink:0;
}
.service-cta-button a{
display:inline-flex;
align-items:center;
gap:18px;
padding:8px 14px;
border-radius:12px;
background:linear-gradient(135deg,var(--gbp-secondary-color),#ff4b93);
color:#fff;
text-decoration:none;
font-size:16px;
font-weight:600;
transition:.35s;
box-shadow:0 15px 30px rgba(192,0,99,.30);
}
.service-cta-button a:hover{
transform:translateY(-5px);
}
.service-cta-button span{
width:44px;
height:44px;
border-radius:50%;
background:#fff;
color:var(--gbp-secondary-color);
display:flex;
align-items:center;
justify-content:center;
}
.service-cta-button span svg{
width:20px!important;
height:20px!important;
}
/*====================================
BOTTOM FEATURES
====================================*/
.service-cta-features{
display:flex;
justify-content:center;
gap:70px;
padding:10px 35px;
background:rgba(255,255,255,.05);
border-top:1px solid rgba(255,255,255,.10);
}
.service-feature{
display:flex;
align-items:center;
gap:12px;
color:#fff;
font-size:14px;
font-weight:600;
}
.service-feature svg{
width:20px!important;
height:20px!important;
color:#42d96b;
}
/*==================================================
PART 5
RESPONSIVE
==================================================*/
/*==============================
1400px
==============================*/
@media (max-width:1400px){
.service-fit-wrapper{
gap:25px;
}
.service-left-content h3{
font-size:30px;
}
.not-fit-heading h3{
font-size:34px;
}
.service-card{
padding:28px 24px;
}
.service-card h4{
font-size:22px;
}
.service-card p{
font-size:16px;
}
.service-cta-content h3{
font-size:34px;
}
.service-cta-button a{
font-size:20px;
}
}
/*==============================
1200px
==============================*/
@media (max-width:1200px){
.service-fit-wrapper{
flex-direction:column;
}
.service-fit-left,
.service-fit-right{
width:100%;
}
.service-cta-top{
flex-direction:column;
text-align:center;
gap:30px;
}
.service-cta-divider{
display:none;
}
.service-cta-main{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:14px;
flex:1;
}
.service-cta-content h3{
font-size:34px;
}
.service-cta-features{
gap:35px;
flex-wrap:wrap;
}
}
/*==============================
992px
==============================*/
@media (max-width:992px){
.service-grid{
grid-template-columns:repeat(2,1fr);
gap:8px;
}
.service-left-intro{
padding:24px;
}
.service-left-icon{
width:80px;
height:80px;
}
.not-fit-card{
padding:28px;
}
.not-fit-heading h3{
font-size:30px;
}
.not-fit-bottom{
padding:20px;
}
.service-cta-content h3{
font-size:30px;
}
.service-cta-button a{
width:100%;
justify-content:center;
}
}
/*==============================
767px
==============================*/
@media (max-width:767px){
.gbp-service-fit-section{
padding:30px 0;
}
.service-left-intro{
display:flex;
align-items:center;
flex-direction:row;
gap:16px;
text-align:left;
padding:0;
margin-bottom:20px;
}
.service-left-icon{
width:60px;
height:60px;
border-radius:16px;
}
.service-left-content{
flex:1;
}
.service-left-content h3{
font-size:22px;
margin-bottom:4px;
}
.service-left-content p{
font-size:12px;
line-height:1.5;
margin:0;
}
.service-card{
text-align:center;
padding:18px 12px;
}
.service-card-icon{
margin:0 auto 12px;
}
.service-card h4{
font-size:18px;
}
.service-card p{
font-size:12px;
}
.not-fit-card{
border-radius:24px;
padding:25px;
}
.not-fit-header{
display:flex;
flex-direction:row;
align-items:flex-start;
gap:12px;
text-align:left;
}
.not-fit-icon{
width:58px;
height:58px;
border-radius:16px;
}
.not-fit-heading{
flex:1;
}
.not-fit-heading h3{
font-size:18px;
max-width:100%;
}
.not-fit-line{
margin:12px 0 0;
}
.not-fit-heading h3{
font-size:28px;
}
.not-fit-heading p{
font-size:11px;
margin:2px 0 4px;
}
.not-fit-item{
gap:15px;
}
.not-fit-item-icon{
width:46px;
height:46px;
}
.not-fit-item-content h4{
font-size:19px;
}
.not-fit-item-content p{
font-size:12px;
}
.not-fit-bottom{
display:flex;
flex-direction:row;
align-items:center;
gap:16px;
text-align:left;
padding:10px;
}
.not-fit-bottom-icon{
width:58px;
height:58px;
}
.not-fit-bottom-content h4{
font-size:18px;
}
.not-fit-bottom-content p{
font-size:15px;
}
.service-bottom-cta{
border-radius:24px;
margin-top:25px;
}
.service-cta-top{
display:flex;
flex-direction:row;
align-items:center;
gap:16px;
padding:22px 18px;
}
.service-cta-icon{
width:75px;
height:75px;
}
.service-cta-icon svg{
width:34px!important;
height:34px!important;
}
.service-cta-features{
display:flex;
flex-direction:row;
justify-content:space-around;
gap:12px;
padding:18px;
flex-wrap:wrap;
}
.service-cta-content h3{
font-size:22px;
text-align:left;
}
.service-cta-button{
width:100%;
}
.service-cta-button a{
width:100%;
justify-content:center;
font-size:16px;
padding:14px 18px;
}
.service-feature{
width:auto;
font-size:14px;
}
.service-feature{
width:100%;
justify-content:center;
font-size:16px;
}
.service-cta-top{
padding:14px 16px 12px;
align-items:center;
gap:14px;
}
.service-cta-icon{
width:58px;
height:58px;
border-radius:50%;
}
.service-cta-icon svg{
width:26px!important;
height:26px!important;
}
.service-cta-main{
gap:10px;
}
.service-cta-content h3{
font-size:17px;
line-height:1.35;
text-align:left;
margin:0;
}
.service-cta-button{
width:auto;
}
.service-cta-button a{
width:auto;
padding:10px 18px;
font-size:15px;
border-radius:12px;
gap:10px;
}
.service-cta-button span{
width:32px;
height:32px;
}
.service-cta-button span svg{
width:14px!important;
height:14px!important;
}
.service-cta-features{
display:flex;
flex-direction:row;
justify-content:space-between;
align-items:center;
flex-wrap:nowrap;
gap:0;
padding:10px 12px;
}
.service-feature{
width:33.33%;
justify-content:center;
font-size:12px;
gap:5px;
text-align:center;
}
.service-feature svg{
width:12px!important;
height:12px!important;
}
.service-feature:not(:last-child){
border-right:1px solid rgba(255,255,255,.18);
}
}
/*==============================
480px
==============================*/
@media (max-width:480px){
.service-card{
border-radius:20px;
}
.service-card-icon{
width:52px;
height:52px;
}
.service-card-icon svg{
width:28px!important;
height:28px!important;
}
.not-fit-heading h3{
font-size:24px;
}
.not-fit-item-content h4{
font-size:16px;
}
.not-fit-bottom-content h4{
font-size:14px;
}
.service-cta-content h3{
font-size:16px;
}
.service-cta-button a{
font-size:11px;
}
.service-feature{
font-size:10px;
}
}

    /*==================================================
PACKAGE SECTION
PART 1
==================================================*/

.gbp-package-section{

    position:relative;

    padding:30px 0 20px;

    background:#f8f9fd;

    overflow:hidden;

}

/*==========================
WRAPPER
==========================*/

.package-slider-wrapper{

    position:relative;

    margin-top:0px;

    overflow:hidden;

}

/*==========================
SLIDER
==========================*/

.package-slider{

    display:flex;

    gap:28px;

    align-items:stretch;

}

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

.package-card{

    position:relative;

    flex:1;

    min-width:0;

    display:flex;

}


/*==========================
INNER
==========================*/

.package-card-inner{

    position:relative;

    width:100%;

    display:flex;

    flex-direction:column;

    padding:24px 32px;

    background:#fff;

    border-radius:28px;

    border:1px solid #edf0f8;

    overflow:hidden;

    transition:.35s;

    box-shadow:
    0 20px 45px rgba(2,0,102,.07);

}

/*==========================
HOVER
==========================*/

.package-card:hover .package-card-inner{

    transform:translateY(-8px);

    box-shadow:
    0 30px 70px rgba(2,0,102,.12);

}

/*==========================
POPULAR BORDER
==========================*/

.package-popular .package-card-inner{

    border:2px solid var(--gbp-secondary-color);

}

.package-card-inner::after{

    content:"";

    position:absolute;

    bottom:-80px;

    left:-80px;

    width:170px;

    height:170px;

    border-radius:50%;

    background:linear-gradient(
        180deg,
        rgba(2,0,102,.03),
        transparent
    );

}

/*==================================================
PACKAGE SECTION
PART 2
ICON • BADGE • TITLE • DESCRIPTION
==================================================*/

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

.package-popular-badge{

    position:absolute;

    top:22px;

    right:12px;

    z-index:5;

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 16px;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        var(--gbp-secondary-color),
        #ff4f96
    );

    color:#fff;

    font-size:14px;

    font-weight:600;
}

.package-popular-badge svg{

    width:14px !important;
    height:14px !important;

}

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

.package-icon{

    width:62px;

    height:62px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin: 0 auto 10px;

    background:linear-gradient(
        180deg,
        #fff7fb,
        #ffeef6
    );

    color:var(--gbp-secondary-color);

    transition:.35s;

    position:relative;

    z-index:2;

}


.package-icon svg{

    width:34px !important;

    height:34px !important;

}

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

.package-card h3{

    margin:0;

    position:relative;

    z-index:2;

    color:var(--gbp-primary-color);

    font-size:28px;

    line-height:1.25;

    font-weight:600;

    transition:.3s;

}

.package-card:hover h3{

    color:var(--gbp-secondary-color);

}

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

.package-title-line{

    width:70px;

    height:5px;

    border-radius:50px;

    margin: 6px auto 6px; 

    background:linear-gradient(
        90deg,
        var(--gbp-secondary-color),
        #ff7aae
    );

}

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

.package-desc{

    margin:0;

    position:relative;

    z-index:2;

    color:var(--gbp-paragraph-color);

    font-size:15px;

    line-height:1.9;

}

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

.package-divider{

    margin:14px 0;

    height:1px;

    background:#eceff5;

}

/*==================================================
PACKAGE SECTION
PART 3
FEATURES + BUTTON
==================================================*/

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

.package-features{

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-bottom:18px;

    flex:1;

}

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

.package-feature{

    display:flex;

    align-items:center;

    gap:14px;

    color:var(--gbp-primary-color);

    font-size:16px;

    font-weight:500;

    line-height:1.6;

    transition:.3s;

}

.package-card:hover .package-feature{

    transform:translateX(4px);

}

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

.package-feature svg{

    width:18px !important;

    height:18px !important;

    flex-shrink:0;

    color:#19b75b;

}

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

.package-feature span{

    flex:1;

}

/*==========================
BUTTON AREA
==========================*/

.package-button{

    position:relative;

    z-index:2;

    margin-top:auto;

}

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

.package-button a{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:16px;

    width:100%;

    padding:6px 24px;

    border-radius:36px;

    text-decoration:none;

    font-size:18px;

    font-weight:700;

    color:#fff;

    background:linear-gradient(
        135deg,
        var(--gbp-primary-color),
        #2438c9
    );

    transition:.35s;

    box-shadow:
    0 18px 35px rgba(2,0,102,.18);

}

/*==========================
POPULAR BUTTON
==========================*/

.package-popular .package-button a{

    background:linear-gradient(
        135deg,
        var(--gbp-secondary-color),
        #ff4b93
    );

}

/*==========================
BUTTON HOVER
==========================*/

.package-button a:hover{

    transform:translateY(-4px);

    box-shadow:
    0 22px 45px rgba(2,0,102,.22);

}

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

.package-button span{

    width:34px;

    height:34px;

    border-radius:50%;

    background:#fff;

    color:var(--gbp-secondary-color);

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.35s;

}

.package-button span svg{

    width:18px !important;

    height:18px !important;

}

.package-button a:hover span{

    transform:translateX(4px);

}

/*==================================================
PACKAGE SECTION
PART 4
BOTTOM FEATURES
==================================================*/

/*==========================
HOVER
==========================*/

/*==========================
POPULAR CARD EFFECT
==========================*/

.package-popular .package-card-inner{

    position:relative;

    overflow:hidden;

}

.package-popular .package-card-inner::before{

    background:linear-gradient(
        180deg,
        rgba(192,0,99,.08),
        transparent
    );

}

/*==========================
CARD HOVER BORDER
==========================*/

.package-card:hover .package-card-inner{

    border-color:rgba(192,0,99,.25);

}
/*==================================================
PACKAGE SECTION
PART 5 - RESPONSIVE
==================================================*/

/*==============================
1400px
==============================*/

@media (max-width:1400px){

.package-card{
    width:440px;
}

.package-card-inner{
    padding:35px 30px;
}

.package-card h3{
    font-size:30px;
}

}


/*==============================
1200px
==============================*/

@media (max-width:1200px){

.package-slider{
    gap:22px;
}

.package-card{
    width:410px;
}

.package-card-inner{
    padding:30px 26px;
}

.package-card h3{
    font-size:28px;
}

.package-button a{
    font-size:18px;
}

.package-bottom-features{
    gap:20px;
}

}


/*==============================
992px
==============================*/

@media (max-width:992px){

.package-slider{

    overflow-x:auto;

    scroll-snap-type:x mandatory;

    padding-bottom:10px;

}

.package-slider::-webkit-scrollbar{
    display:none;
}

.package-card{

    width:82%;

    flex:none;

    scroll-snap-align:start;

}

}


/*==============================
767px
==============================*/

@media (max-width:767px){

.gbp-package-section{

    padding:20px 0;

}

.package-slider{

    gap:16px;

    padding-left:12px;

    padding-right:12px;

}

.package-card{

    width:90%;

}

.package-card-inner{

    padding:24px 18px;

}

.package-icon{

    width:68px;
    height:68px;
    border-radius:18px;

}

.package-icon svg{

    width:34px!important;
    height:34px!important;

}

.package-popular-badge{

    left:18px;
    top:18px;

    padding:8px 16px;

    font-size:13px;

}

.package-card h3{

    font-size:24px;

}

.package-desc{

    font-size:15px;

}

.package-feature{

    font-size:15px;

}

.package-button a{

    width:100%;

    justify-content:center;

    font-size:17px;

    padding:16px;

}

.package-button span{

    width:42px;
    height:42px;

}


}


/*==============================
480px
==============================*/

@media (max-width:480px){

.package-card{

    width:92%;

}

.package-card-inner{

    padding:22px 16px;

}

.package-card h3{

    font-size:22px;

}

.package-desc{

    font-size:14px;

}

.package-feature{

    font-size:14px;

    gap:10px;

}

.package-feature svg{

    width:16px!important;
    height:16px!important;

}

.package-button a{

    font-size:16px;

}


}
/*==================================================
PACKAGE SECTION
PART 5 - RESPONSIVE
==================================================*/

/*==============================
1400px
==============================*/

@media (max-width:1400px){

.package-card{
    width:440px;
}

.package-card-inner{
    padding:35px 30px;
}

.package-card h3{
    font-size:30px;
}

}


/*==============================
1200px
==============================*/

@media (max-width:1200px){

.package-slider{
    gap:22px;
}

.package-card{
    width:410px;
}

.package-card-inner{
    padding:30px 26px;
}

.package-card h3{
    font-size:28px;
}

.package-button a{
    font-size:18px;
}

.package-bottom-features{
    gap:20px;
}

}


/*==============================
992px
==============================*/

@media (max-width:992px){

.package-slider{

    overflow-x:auto;

    scroll-snap-type:x mandatory;

    padding-bottom:10px;

}

.package-slider::-webkit-scrollbar{
    display:none;
}

.package-card{

    width:82%;

    flex:none;

    scroll-snap-align:start;

}

.package-bottom-features{

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

}

}


/*==================================================
PACKAGE SECTION
PART 6 - FINAL MOBILE POLISH (EXACT-LIKE DESIGN)
Add AFTER Part 5
==================================================*/

/*==============================
MOBILE PREMIUM LAYOUT
==============================*/

@media (max-width:767px){

/* Make side cards visible like screenshot */

.package-slider-wrapper{

    overflow:hidden;

    margin-left:-6px;

    margin-right:-6px;

}

.package-slider{

    overflow-x:auto;

    scroll-snap-type:x mandatory;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;

    padding:10px 18px 18px;

    gap:16px;

}

.package-slider::-webkit-scrollbar{
    display:none;
}

/* Main trick: card width less than screen */

.package-card{

    flex:0 0 84%;

    width:84%;

    scroll-snap-align:center;

}

/* Popular card slightly larger */

.package-popular{

    flex-basis:82%;

    width:82%;

    transform:none;

}

/* Card styling */

.package-card-inner{

    border-radius:26px;

    padding:18px;

    min-height:100%;

}

/* Badge like screenshot */

.package-popular-badge{

    left:18px;

    right:auto;

    top:16px;

    font-size:10px;

    padding:6px 8px;

}

/* Icon */

.package-icon{

    width:54px;
    height:54px;

    border-radius:16px;

    margin-bottom:12px;

}

.package-icon svg{

    width:32px!important;
    height:32px!important;

}

/* Title */

.package-card h3{

    font-size:24px;

    line-height:1.25;
}

/* Description */

.package-desc{

    font-size:14px;

    line-height:1.7;

}

/* Divider */

.package-divider{

    margin:8px 0;

}

/* Features */

.package-features{

    gap:10px;

    margin-bottom:16px;

}

.package-feature{

    font-size:14px;

    line-height:1.5;

    gap:10px;

}

.package-feature svg{

    width:16px!important;
    height:16px!important;

}

/* Button */

.package-button a{

    width:100%;

    justify-content:center;

    padding:6px 14px;

    font-size:14px;

    border-radius:16px;

    gap:12px;

}

.package-button span{

    width:30px;
    height:30px;

}

.package-button span svg{

    width:16px!important;
    height:16px!important;

}

/* Remove heavy hover on mobile */

.package-card:hover .package-card-inner,
.package-button a:hover,
.package-bottom-item:hover{

    transform:none;

}

/*==============================
BOTTOM FEATURES - 2x2 GRID
==============================*/

.package-bottom-features{

    margin-top:15px;

    display:grid;

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

    gap:12px;

}

.package-bottom-item{

    flex-direction:column;

    text-align:center;

    justify-content:center;

    padding:16px 12px;

    min-height:110px;

    border-radius:18px;

    gap:10px;

}

.package-bottom-item svg{

    width:22px!important;
    height:22px!important;

}

.package-bottom-item span{

    font-size:13px;

    line-height:1.45;

    font-weight:600;

}

/*==============================
SMALL PHONE POLISH
==============================*/

@media (max-width:420px){

.package-slider{
    padding-left:14px;
    padding-right:14px;
}

.package-card{
    flex-basis:80%;
    width:80%;
}

.package-popular{
    flex-basis:84%;
    width:84%;
}

.package-card h3{
    font-size:22px;
}

.package-desc{
    font-size:13px;
}

.package-feature{
    font-size:12px;
}

.package-bottom-item{
    min-height:100px;
    padding:14px 10px;
}

.package-bottom-item span{
    font-size:12px;
}

}

}
.for-cen{
text-align:center;
}

/*==================================================
PACKAGE SECTION - BOTTOM FEATURES (FIXED)
==================================================*/

/* Bottom Strip - Flex layout */
.package-bottom-features {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    border: 2px solid #edf0f7;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    padding: 0;
}

/* Item */
.package-bottom-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 22px 24px;
    transition: .35s;
    flex: 1;
    position: relative;
}

.package-bottom-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 45px rgba(192, 0, 99, .14);
    z-index: 2;
}

/* Divider */
.package-bottom-divider {
    width: 2px;
    height: 50px;
    background: #edf0f7;
    flex-shrink: 0;
    align-self: center;
}

/* Icon */
.package-bottom-item svg {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0;
    color: var(--gbp-secondary-color);
    transition: .35s;
}

.package-bottom-item:hover svg {
    transform: scale(1.15);
}

/* Text */
.package-bottom-item span {
    color: var(--gbp-primary-color);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
}

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

/* Tablet - Switch to grid */
@media (max-width: 992px) {
    .package-bottom-features {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        border-radius: 12px;
        gap: 0;
    }

    .package-bottom-divider {
        display: none !important;
    }

    .package-bottom-item {
        padding: 20px 18px;
        border-bottom: 1px solid #edf0f7;
        border-right: 1px solid #edf0f7;
    }

    .package-bottom-item:nth-child(2),
    .package-bottom-item:nth-child(4) {
        border-right: none;
    }

    .package-bottom-item:nth-child(3),
    .package-bottom-item:nth-child(4) {
        border-bottom: none;
    }
}

/* Mobile - 2 columns */
@media (max-width: 767px) {
    .package-bottom-features {
        grid-template-columns: repeat(4, 1fr);
        border-radius: 12px;
        margin-top: 15px;
        border: 2px solid #edf0f7;
        gap: 0;
    }

    .package-bottom-divider {
        display: none !important;
    }

    .package-bottom-item {
        flex-direction: column;
        text-align: center;
        justify-content: center;
        padding: 16px 12px;
        min-height: 110px;
        gap: 10px;
        border-bottom: 1px solid #edf0f7;
        border-right: 1px solid #edf0f7;
    }

    .package-bottom-item:nth-child(2) {
        border-right: none;
    }

    .package-bottom-item:nth-child(3) {
        border-bottom: none;
        border-right: 1px solid #edf0f7;
    }

    .package-bottom-item:nth-child(4) {
        border-right: none;
        border-bottom: none;
    }

    .package-bottom-item svg {
        width: 22px !important;
        height: 22px !important;
    }

    .package-bottom-item span {
        font-size: 13px;
        line-height: 1.45;
        font-weight: 600;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .package-bottom-features {
        border-radius: 10px;
        border-width: 1.5px;
    }

    .package-bottom-item {
        min-height: 90px;
        padding: 12px 8px;
        gap: 6px;
    }

    .package-bottom-item span {
        font-size: 11px;
    }

    .package-bottom-item svg {
        width: 18px !important;
        height: 18px !important;
    }

    .package-bottom-divider {
        display: none !important;
    }
}
/*=========================================
COMPARISON SECTION
=========================================*/
.gbp-comparison-section {
    position: relative;
    padding: 30px 0;
    overflow: hidden;
    background: radial-gradient(circle at top left, rgba(255,20,120,.05), transparent 35%), radial-gradient(circle at bottom right, rgba(255,20,120,.05), transparent 35%), #fff;
}
.comparison-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 30px;
    align-items: stretch;
}
.comparison-left,
.comparison-right {
    position: relative;
}
.comparison-vs {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #fff;
    border: 3px dashed var(--secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: 800;
    color: var(--primary-color);
    z-index: 20;
    box-shadow: 0 15px 40px rgba(0,0,0,.12);
}
.gbp-comparison-section .gbp-problem-heading {
    margin-bottom: 0;
}
.comparison-card {
    position: relative;
    height: 100%;
    border-radius: 32px;
    padding: 18px 26px;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease;
}
.comparison-card:hover {
    transform: translateY(-8px);
}
.comparison-card-left {
    background: #fff;
    border: 1px solid #ececec;
    box-shadow: 0 20px 45px rgba(0,0,0,.06);
}
.comparison-card-left:hover {
    box-shadow: 0 30px 60px rgba(2,0,102,.10);
}
.comparison-card-right {
    background: linear-gradient(180deg, #fff7fb 0%, #ffe8f2 100%);
    border: 1px solid rgba(192,0,99,.15);
    box-shadow: 0 20px 45px rgba(192,0,99,.12);
}
.comparison-card-right:hover {
    box-shadow: 0 30px 70px rgba(192,0,99,.18);
}
.comparison-card-right::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    top: -120px;
    right: -120px;
    border-radius: 50%;
    background: radial-gradient(rgba(255,255,255,.65), transparent 70%);
    animation: comparisonFloat 6s ease-in-out infinite;
}
.comparison-card-right::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    left: -80px;
    bottom: -80px;
    border-radius: 50%;
    background: radial-gradient(rgba(255,255,255,.45), transparent 70%);
    animation: comparisonFloat 8s ease-in-out infinite reverse;
}
@keyframes comparisonFloat {
    0% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}
.comparison-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 14px;
    position: relative;
    z-index: 2;
}
.comparison-company-icon {
    width: 52px;
    height: 52px;
    border-radius: 28px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f8f9fc;
    color: var(--gbp-secondary-color);
    box-shadow: 0 12px 25px rgba(0,0,0,.08);
    transition: .35s;
}
.comparison-card:hover .comparison-company-icon {
    transform: rotate(-8deg) scale(1.06);
}
.comparison-card-right .comparison-company-icon {
    background: #fff;
}
.comparison-company-icon strong {
    font-size: 34px;
    font-weight: 800;
    color: var(--gbp-secondary-color);
}
.comparison-company-icon svg {
    width: 34px !important;
    height: 34px !important;
}
.comparison-company-content {
    flex: 1;
}
.comparison-company-content h3 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: var(--gbp-primary-color);
    line-height: 1.2;
}
.comparison-company-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--gbp-paragraph-color);
}
.comparison-card-right .comparison-company-content p {
    color: #555;
}
.comparison-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 14px 0;
    border-top: 1px solid #ececec;
    transition: .35s;
}
.comparison-item:first-of-type {
    border-top: none;
}
.comparison-card-right .comparison-item {
    border-color: rgba(192,0,99,.12);
}
.comparison-item:hover {
    transform: translateX(8px);
}
.comparison-item-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fc;
    color: var(--gbp-secondary-color);
    box-shadow: 0 10px 25px rgba(0,0,0,.06);
    transition: .35s;
}
.comparison-card-right .comparison-item-icon {
    background: #fff;
}
.comparison-item-icon svg {
    width: 28px !important;
    height: 28px !important;
}
.comparison-item:hover .comparison-item-icon {
    transform: rotate(-8deg);
}
.comparison-card-left .comparison-item:hover .comparison-item-icon {
    background: var(--gbp-primary-color);
    color: #fff;
}
.comparison-card-right .comparison-item:hover .comparison-item-icon {
    background: var(--gbp-secondary-color);
    color: #fff;
}
.comparison-item-status {
    position: absolute;
    left: 36px;
    top: 12px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ff4d5b;
    color: #fff;
    border: 3px solid #fff;
    box-shadow: 0 6px 15px rgba(0,0,0,.12);
    z-index: 5;
}
.comparison-item-status.success {
    background: #22c55e;
}
.comparison-item-status svg {
    width: 11px !important;
    height: 11px !important;
}
.comparison-item-content {
    flex: 1;
}
.comparison-item-content h4 {
    margin: 0 0 2px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--gbp-primary-color);
    transition: .35s;
}
.comparison-card-left .comparison-item:hover h4 {
    color: var(--gbp-primary-color);
}
.comparison-card-right .comparison-item:hover h4 {
    color: var(--gbp-secondary-color);
}
.comparison-item-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: var(--gbp-paragraph-color);
}
.comparison-card-right .comparison-item-content p {
    color: #555;
}
.comparison-vs {
    transition: .35s;
}
.comparison-wrapper:hover .comparison-vs {
    transform: translate(-50%, -50%) scale(1.08);
}

/*==================================================
RESPONSIVE - 1400px
==================================================*/
@media (max-width: 1400px) {
    .comparison-wrapper {
        gap: 24px;
    }
    .comparison-card {
        padding: 30px;
    }
    .comparison-header {
        margin-bottom: 26px;
    }
    .comparison-company-content h3 {
        font-size: 28px;
    }
    .comparison-item-content h4 {
        font-size: 18px;
    }
    .comparison-item-content p {
        font-size: 15px;
    }
    .comparison-vs {
        width: 78px;
        height: 78px;
        font-size: 24px;
    }
}

/*==================================================
RESPONSIVE - 1200px
==================================================*/
@media (max-width: 1200px) {
    .comparison-wrapper {
        gap: 18px;
    }
    .comparison-card {
        padding: 26px;
    }
    .comparison-company-icon {
        width: 74px;
        height: 74px;
    }
    .comparison-company-icon strong {
        font-size: 34px;
    }
    .comparison-company-content h3 {
        font-size: 24px;
    }
    .comparison-company-content p {
        font-size: 15px;
    }
    .comparison-item {
        gap: 15px;
        padding: 18px 0;
    }
    .comparison-item-icon {
        width: 56px;
        height: 56px;
    }
    .comparison-item-icon svg {
        width: 24px !important;
        height: 24px !important;
    }
    .comparison-item-status {
        left: 40px;
    }
    .comparison-vs {
        width: 70px;
        height: 70px;
        font-size: 22px;
    }
}

/*==================================================
RESPONSIVE - 992px (Tablet)
==================================================*/
@media (max-width: 992px) {
    .comparison-wrapper {
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }
    .comparison-left,
    .comparison-right {
        width: 100%;
    }
    .comparison-vs {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        margin: 0 auto;
        order: 0;
        width: 60px;
        height: 60px;
        font-size: 18px;
    }
    .comparison-left {
        order: 1;
    }
    .comparison-vs {
        order: 2;
    }
    .comparison-right {
        order: 3;
    }
    .comparison-card {
        padding: 28px 24px;
        border-radius: 24px;
    }
    .comparison-wrapper:hover .comparison-vs {
        transform: scale(1.08);
    }
}

/*==================================================
RESPONSIVE - 767px (Mobile)
==================================================*/
@media (max-width: 767px) {
    .gbp-comparison-section {
        padding: 30px 0 40px;
    }
    .comparison-wrapper {
        gap: 0px;
        margin-top: 20px;
    }
    .comparison-card {
        padding: 20px 16px 24px;
        border-radius: 20px;
    }
    .comparison-vs {
        width: 50px;
        height: 50px;
        font-size: 16px;
        border-width: 3px;
        box-shadow: 0 10px 30px rgba(0,0,0,.1);
    }
    .comparison-header {
        gap: 12px;
        margin-bottom: 18px;
    }
    .comparison-company-icon svg {
        width: 22px !important;
        height: 22px !important;
    }
    .comparison-company-icon strong {
        font-size: 24px;
    }
    .comparison-company-content h3 {
        font-size: 18px;
        margin-bottom: 2px;
    }
    .comparison-company-content p {
        font-size: 13px;
        line-height: 1.5;
    }
    .comparison-item {
        gap: 12px;
        padding: 14px 0;
        border-top: 1px solid rgba(0,0,0,.06);
    }
    .comparison-card-right .comparison-item {
        border-color: rgba(192,0,99,.08);
    }
    .comparison-item:first-of-type {
        border-top: none;
        padding-top: 0;
    }
    .comparison-item-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        flex-shrink: 0;
    }
    .comparison-item-icon svg {
        width: 18px !important;
        height: 18px !important;
    }
    .comparison-item-status {
        width: 20px;
        height: 20px;
        left: 28px;
        top: 10px;
        border-width: 2px;
    }
    .comparison-item-status svg {
        width: 9px !important;
        height: 9px !important;
    }
    .comparison-item-content h4 {
        font-size: 15px;
        line-height: 1.3;
        margin-bottom: 3px;
    }
    .comparison-item-content p {
        font-size: 12px;
        line-height: 1.6;
    }
    .comparison-item:hover {
        transform: none;
    }
    .comparison-card:hover {
        transform: none !important;
    }
    .comparison-wrapper:hover .comparison-vs {
        transform: none !important;
    }
}

/*==================================================
RESPONSIVE - 480px (Small Mobile)
==================================================*/
@media (max-width: 480px) {
    .comparison-card {
        padding: 16px 12px 20px;
        border-radius: 16px;
    }
    .comparison-vs {
        width: 44px;
        height: 44px;
        font-size: 14px;
        border-width: 2px;
    }
    .comparison-header {
        gap: 10px;
        margin-bottom: 14px;
    }
    .comparison-company-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }
    .comparison-company-icon svg {
        width: 18px !important;
        height: 18px !important;
    }
    .comparison-company-icon strong {
        font-size: 20px;
    }
    .comparison-company-content h3 {
        font-size: 16px;
    }
    .comparison-company-content p {
        font-size: 12px;
    }
    .comparison-item {
        gap: 10px;
        padding: 12px 0;
    }
    .comparison-item-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }
    .comparison-item-icon svg {
        width: 16px !important;
        height: 16px !important;
    }
    .comparison-item-status {
        width: 18px;
        height: 18px;
        left: 24px;
        top: 8px;
    }
    .comparison-item-status svg {
        width: 8px !important;
        height: 8px !important;
    }
    .comparison-item-content h4 {
        font-size: 14px;
    }
    .comparison-item-content p {
        font-size: 11px;
        line-height: 1.5;
    }
}
/*==================================================
DELIVERABLES SECTION
==================================================*/
.gbp-deliverables-section {
    position: relative;
    padding: 30px 0;
    background: #f8f9fd;
    overflow: hidden;
}
.gbp-deliverables-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    top: -180px;
    right: -180px;
    border-radius: 50%;
    background: radial-gradient(rgba(192,0,99,.08), transparent 72%);
}
.gbp-deliverables-section::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    bottom: -170px;
    left: -170px;
    border-radius: 50%;
    background: radial-gradient(rgba(2,0,102,.06), transparent 72%);
}
.deliverables-wrapper {
    display: flex;
    gap: 24px;
    align-items: stretch;
    margin-top: 30px;
    position: relative;
    z-index: 2;
}
.deliverables-left {
    width: 58%;
    display: flex;
}
.deliverables-right {
    width: 42%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-content: start;
}
.deliverables-showcase {
    position: relative;
    width: 100%;
    min-height: 500px;
    background: #fff;
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid #edf0f7;
    box-shadow: 0 25px 60px rgba(2,0,102,.08);
}
.deliverables-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 40px 25px 45px;
    position: relative;
    z-index: 5;
    gap: 30px;
    min-height: 500px;
}
.deliverables-content {
    flex: 0 0 35%;
    max-width: 45%;
}
.deliverables-content h3 {
    margin: 0 0 16px;
    font-size: 34px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--gbp-primary-color);
}
.deliverables-content h3 span {
    display: block;
    color: var(--gbp-secondary-color);
}
.deliverables-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 28px;
}
.deliverables-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 17px;
    font-weight: 600;
    color: var(--gbp-primary-color);
}
.deliverables-list-item svg {
    width: 18px !important;
    height: 18px !important;
    color: var(--secondary-color);
}
.deliverables-button a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border-radius: 32px;
    background: linear-gradient(135deg, var(--gbp-secondary-color), #ff4d92);
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    transition: .35s;
    box-shadow: 0 18px 35px rgba(192,0,99,.25);
}
.deliverables-button a:hover {
    transform: translateY(-4px);
}
.deliverables-button span {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: var(--gbp-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
.deliverables-button span svg {
    width: 16px !important;
    height: 16px !important;
}
.deliverables-image {
    flex: 0 0 65%;
    max-width: 65%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.deliverables-image img {
    width: 100%;
    max-width: 600px;
    display: block;
    height: auto;
}
.deliverables-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
}
.deliverable-card {
    position: relative;
    background: #fff;
    border: 1px solid #edf0f7;
    border-radius: 24px;
    padding: 16px 14px;
    overflow: hidden;
    transition: .35s;
    box-shadow: 0 18px 40px rgba(2,0,102,.06);
}
.deliverable-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gbp-secondary-color), #ff6aa8);
    transition: .35s;
}
.deliverable-card:hover::after {
    width: 100%;
}
.deliverable-header {
    display: flex;
    align-items: center;
    gap: 14px;
}
.deliverable-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff7fb, #ffeef6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gbp-secondary-color);
    flex-shrink: 0;
    transition: .35s;
}
.deliverable-icon svg {
    width: 24px !important;
    height: 24px !important;
}
.deliverable-card:hover .deliverable-icon {
    background: linear-gradient(135deg, var(--gbp-secondary-color), #ff5d9f);
    color: #fff;
    transform: rotate(-8deg);
}
.deliverable-header h4 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: var(--gbp-primary-color);
    font-weight: 600;
}
.deliverable-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--gbp-paragraph-color);
    padding-left: 54px;
}

/*==================================================
FEATURE STRIP
==================================================*/
.deliverables-feature-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
    padding: 28px 35px;
    background: linear-gradient(135deg, var(--gbp-primary-color), #0a1a6e);
    border-radius: 18px;
    box-shadow: 0 15px 45px rgba(2,0,102,.15);
}
.strip-feature {
    display: flex;
    align-items: center;
    gap: 16px;
}
.strip-feature .strip-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(255,255,255,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    transition: .35s;
}
.strip-feature:hover .strip-icon {
    background: rgba(255,255,255,.25);
    transform: scale(1.05);
}
.strip-feature .strip-icon svg {
    width: 22px !important;
    height: 22px !important;
    color: #fff;
}
.strip-text-group {
    display: flex;
    flex-direction: column;
}
.strip-feature .strip-label {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}
.strip-feature .strip-desc {
    font-size: 13px;
    color: rgba(255,255,255,.7);
    line-height: 1.4;
}
.strip-divider {
    width: 1px;
    height: 55px;
    background: rgba(255,255,255,.15);
    flex-shrink: 0;
}

/*==================================================
BOTTOM CTA
==================================================*/
.deliverables-cta-bottom {
    text-align: center;
    margin-top: 20px;
    padding: 20px 30px;
    background: #fff;
    border: 1px solid #edf0f7;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,.04);
}
.cta-bottom-content p {
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--gbp-secondary-color);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
}
.cta-bottom-content h3 {
    margin: 0 0 15px;
    font-size: 26px;
    font-weight: 700;
    color: var(--gbp-primary-color);
    line-height: 1.4;
}
.cta-bottom-button a {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 26px;
    background: linear-gradient(135deg, var(--gbp-secondary-color), #ff4d92);
    color: #fff;
    text-decoration: none;
    font-size: 17px;
    font-weight: 700;
    border-radius: 14px;
    transition: .35s;
    box-shadow: 0 12px 35px rgba(192,0,99,.25);
}
.cta-bottom-button a:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 45px rgba(192,0,99,.35);
}
.cta-bottom-button a span {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: var(--gbp-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .35s;
}
.cta-bottom-button a span svg {
    width: 16px !important;
    height: 16px !important;
}
.cta-bottom-button a:hover span {
    transform: translateX(4px);
}

/*==================================================
RESPONSIVE
==================================================*/
@media (max-width: 1400px) {
    .deliverables-wrapper {
        gap: 28px;
    }
    .deliverables-content {
        flex: 0 0 38%;
        max-width: 48%;
    }
    .deliverables-grid {
        gap: 16px;
    }
    .deliverable-card {
        padding: 14px 12px;
    }
}
@media (max-width: 1200px) {
    .deliverables-wrapper {
        flex-direction: column;
    }
    .deliverables-left,
    .deliverables-right {
        width: 100%;
    }
    .deliverables-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 992px) {
    .gbp-deliverables-section {
        padding: 20px 0;
    }
    .deliverables-flex {
        flex-direction: column;
        padding: 35px 30px;
        min-height: auto;
        gap: 30px;
    }
    .deliverables-content {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
    }
    .deliverables-image {
        flex: 0 0 100%;
        max-width: 100%;
        display: none;
    }
    .deliverables-list-item {
        justify-content: center;
    }
    .deliverables-button a {
        width: 100%;
        justify-content: center;
    }
    .deliverables-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 767px) {
    .gbp-deliverables-section {
        padding: 20px 0;
    }
    .deliverables-wrapper {
        gap: 22px;
    }
    .deliverables-showcase {
        border-radius: 24px;
        min-height: auto;
    }
    .deliverables-flex {
        padding: 20px 16px;
        gap: 20px;
        min-height: auto;
    }
    .deliverables-content h3 {
        font-size: 20px;
    }
    .deliverables-list {
        align-items: flex-start;
        gap: 2px;
        margin-bottom: 18px;
    }
    .deliverables-list-item {
        justify-content: center;
        font-size: 15px;
    }
    .deliverables-button a {
        width: 100%;
        justify-content: center;
        font-size: 14px;
        padding: 10px 16px;
    }
    .deliverables-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .deliverable-card {
        border-radius: 20px;
        padding: 12px 10px;
    }
    .deliverable-header {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
    .deliverable-icon {
        margin: 0 auto;
        width: 34px;
        height: 34px;
        border-radius: 14px;
    }
    .deliverable-header h4 {
        font-size: 14px;
    }
    .deliverable-card p {
        padding-left: 0;
        text-align: center;
        font-size: 12px;
    }
    .deliverables-feature-strip {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 20px 18px;
        border-radius: 14px;
    }
    .strip-feature {
        display: flex;
        align-items: center;
        gap: 14px;
        padding-bottom: 14px;
        border-bottom: 1px solid rgba(255,255,255,.08);
        flex: none;
    }
    .strip-feature:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    .strip-feature .strip-icon {
        width: 42px;
        height: 42px;
    }
    .strip-feature .strip-icon svg {
        width: 18px !important;
        height: 18px !important;
    }
    .strip-feature .strip-label {
        font-size: 15px;
    }
    .strip-feature .strip-desc {
        font-size: 12px;
    }
    .strip-divider {
        display: none;
    }
    .deliverables-cta-bottom {
        padding: 24px 16px 22px;
        border-radius: 16px;
    }
    .cta-bottom-content h3 {
        font-size: 18px;
    }
    .cta-bottom-button a {
        width: 100%;
        justify-content: center;
        font-size: 15px;
        padding: 14px 20px;
    }
}
@media (max-width: 480px) {
    .deliverables-flex {
        padding: 14px 10px;
        gap: 16px;
    }
    .deliverables-content h3 {
        font-size: 18px;
    }
    .deliverables-list-item {
        font-size: 13px;
        gap: 8px;
    }
    .deliverables-list-item svg {
        width: 14px !important;
        height: 14px !important;
    }
    .deliverables-button a {
        font-size: 14px;
        padding: 10px 14px;
    }
    .deliverables-button span {
        width: 32px;
        height: 32px;
    }
    .deliverables-grid {
        gap: 10px;
    }
    .deliverable-card {
        padding: 10px 8px;
    }
    .deliverable-icon {
        width: 30px;
        height: 30px;
    }
    .deliverable-icon svg {
        width: 16px !important;
        height: 16px !important;
    }
    .deliverable-header h4 {
        font-size: 13px;
    }
    .deliverable-card p {
        font-size: 11px;
    }
    .deliverables-feature-strip {
        padding: 16px 14px;
        gap: 12px;
    }
    .strip-feature {
        gap: 12px;
        padding-bottom: 12px;
    }
    .strip-feature .strip-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }
    .strip-feature .strip-icon svg {
        width: 16px !important;
        height: 16px !important;
    }
    .strip-feature .strip-label {
        font-size: 14px;
    }
    .strip-feature .strip-desc {
        font-size: 11px;
    }
    .cta-bottom-content h3 {
        font-size: 16px;
    }
    .cta-bottom-button a {
        font-size: 13px;
        padding: 12px 16px;
    }
    .cta-bottom-button a span {
        width: 28px;
        height: 28px;
    }
    .cta-bottom-button a span svg {
        width: 12px !important;
        height: 12px !important;
    }
}
    /*==================================================
TECHNOLOGY STACK SECTION
==================================================*/
    .gbp-technology-section {
        position: relative;
        padding: 20px 0;
        background: #fafbfd;
        overflow: hidden;
    }

    .technology-tabs-wrapper {
        width: 100%;
        padding: 0 20px;
        margin-top: 10px;
        box-sizing: border-box;
    }

    .technology-tabs {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 14px;
        width: 100%;
        overflow: visible;
        margin: 0 auto;
    }

    .technology-tab {
        border: none;
        outline: none;
        cursor: pointer;
        background: #fff;
        border: 1px solid #edf1f7;
        border-radius: 20px;
        padding: 12px 16px;
        display: flex;
        align-items: center;
        gap: 14px;
        transition: 0.35s;
        box-shadow: 0 12px 28px rgba(2, 0, 102, 0.05);
        width: 100%;
        min-width: 0;
        justify-content: center;
    }

    .technology-tab.active-tab {
        background: linear-gradient(135deg, var(--gbp-primary-color), #0416a8);
        border-color: transparent;
        box-shadow: 0 18px 35px rgba(2, 0, 102, 0.18);
    }

    .technology-tab-icon {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f6f8fd;
        color: var(--gbp-secondary-color);
        transition: 0.35s;
    }

    .technology-tab.active-tab .technology-tab-icon {
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
    }

    .technology-tab-icon svg {
        width: 22px !important;
        height: 22px !important;
    }

    .technology-tab-content {
        text-align: left;
        flex: 1;
        min-width: 0;
    }

    .technology-tab-content h4 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: var(--gbp-primary-color);
        line-height: 1.2;
        white-space: nowrap;
    }

    .technology-tab.active-tab h4 {
        color: #fff;
    }

    .technology-tab-content span {
        display: block;
        margin-top: 4px;
        font-size: 12px;
        color: #8b8fa5;
        white-space: nowrap;
    }

    .technology-tab.active-tab span {
        color: rgba(255, 255, 255, 0.75);
    }

    .technology-content {
        position: relative;
        margin-top: 28px;
    }

    .technology-panel {
        display: none;
        animation: technologyFade 0.45s ease;
    }

    .technology-panel.active-panel {
        display: block;
    }

    @keyframes technologyFade {
        from {
            opacity: 0;
            transform: translateY(15px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .technology-main-card {
        display: flex;
        gap: 24px;
        align-items: stretch;
    }

    .technology-left {
        width: 55%;
    }

    .technology-left-card {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 24px;
        height: 100%;
        background: #fff;
        border: 1px solid #edf1f7;
        border-radius: 30px;
        padding: 16px 24px 16px;
        box-shadow: 0 20px 45px rgba(2, 0, 102, 0.08);
    }

    .technology-right {
        width: 45%;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
        align-content: start;
    }

    .technology-image {
        position: relative;
        width: 40%;
        flex: 0 0 40%;
        border-radius: 18px;
        overflow: hidden;
    }

    .technology-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 18px;
    }

    .technology-content-box {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: #fff;
        border: 1px solid #edf1f7;
        border-radius: 30px;
        padding: 24px;
        box-shadow: 0 20px 45px rgba(2, 0, 102, 0.06);
    }

    .technology-left-card .technology-content-box {
        background: none;
        border: none;
        box-shadow: none;
        padding: 0;
    }

    .technology-label {
        display: inline-flex;
        align-items: center;
        padding: 6px 18px;
        border-radius: 50px;
        background: #fff3f8;
        color: var(--gbp-secondary-color);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.6px;
        max-width: 220px;
        text-transform: uppercase;
    }

    .technology-content-box h3 {
        margin: 10px 0 10px;
        font-size: 24px;
        line-height: 1.25;
        color: var(--gbp-primary-color);
        font-weight: 600;
    }

    .technology-content-box h3 span {
        color: var(--gbp-secondary-color);
    }

    .technology-content-box p {
        margin: 0;
        font-size: 18px;
        line-height: 1.5;
        color: var(--gbp-paragraph-color);
    }

    .technology-check-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-top: 28px;
    }

    .technology-check-item {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 16px;
        font-weight: 500;
        color: var(--gbp-primary-color);
    }

    .technology-check-item svg {
        width: 18px !important;
        height: 18px !important;
        color: #28c76f;
        flex-shrink: 0;
    }

    .technology-button {
        margin-top: 18px;
    }

    .technology-button a {
        display: inline-flex;
        align-items: center;
        gap: 15px;
        padding: 8px 14px;
        border-radius: 18px;
        background: linear-gradient(135deg, var(--gbp-secondary-color), #ff4f98);
        color: #fff;
        text-decoration: none;
        font-size: 16px;
        font-weight: 600;
        transition: 0.35s;
        box-shadow: 0 18px 35px rgba(192, 0, 99, 0.22);
    }

    .technology-button a:hover {
        transform: translateY(-4px);
    }

    .technology-button span {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #fff;
        color: var(--gbp-secondary-color);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .technology-button span svg {
        width: 16px !important;
        height: 16px !important;
    }

    .technology-card {
        position: relative;
        background: #fff;
        border: 1px solid #edf1f7;
        border-radius: 22px;
        padding: 20px 14px;
        text-align: center;
        overflow: hidden;
        transition: 0.35s;
        box-shadow: 0 12px 35px rgba(2, 0, 102, 0.05);
    }

    .technology-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, var(--gbp-secondary-color), #ff6da8);
        transform: scaleX(0);
        transition: 0.35s;
        transform-origin: left;
    }

    .technology-card:hover {
        transform: translateY(-8px);
        border-color: var(--gbp-secondary-color);
        box-shadow: 0 22px 50px rgba(2, 0, 102, 0.12);
    }

    .technology-card:hover::before {
        transform: scaleX(1);
    }

    .technology-card img {
        width: 60px;
        height: 60px;
        object-fit: contain;
        margin: 0 auto 14px;
        transition: 0.35s;
    }

    .technology-card:hover img {
        transform: scale(1.08) rotate(-4deg);
    }

    .technology-card h4 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: var(--gbp-primary-color);
        line-height: 1.3;
        transition: 0.35s;
    }

    .technology-card:hover h4 {
        color: var(--gbp-secondary-color);
    }

    .technology-card span {
        display: block;
        width: 42px;
        height: 4px;
        border-radius: 50px;
        margin: 10px auto 0;
        background: #e7eaf4;
        transition: 0.35s;
    }

    .technology-card:hover span {
        width: 70px;
        background: linear-gradient(90deg, var(--gbp-secondary-color), #ff5b9c);
    }

    .technology-features {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        margin-top: 14px;
        background: #fff;
        border: 1px solid #edf1f7;
        border-radius: 22px;
        overflow: hidden;
        box-shadow: 0 16px 35px rgba(2, 0, 102, 0.05);
    }

    .technology-feature-item {
        position: relative;
        display: flex;
        align-items: center;
        gap: 18px;
        padding: 20px 24px;
        background: #fff;
        transition: 0.35s;
        min-height: 100px;
    }

    .technology-feature-item:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 15%;
        height: 70%;
        width: 1px;
        background: #edf1f7;
    }

    .technology-feature-item:hover {
        background: #fafbfd;
    }

    .technology-feature-icon {
        width: 56px;
        height: 56px;
        border-radius: 16px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(180deg, #fff6fa, #ffeef6);
        color: var(--gbp-secondary-color);
        transition: 0.35s;
    }

    .technology-feature-icon svg {
        width: 24px !important;
        height: 24px !important;
    }

    .technology-feature-item:hover .technology-feature-icon {
        background: linear-gradient(135deg, var(--gbp-secondary-color), #ff5a9c);
        color: #fff;
        transform: rotate(-6deg) scale(1.06);
    }

    .technology-feature-content {
        flex: 1;
    }

    .technology-feature-content h4 {
        margin: 0 0 4px;
        font-size: 18px;
        font-weight: 600;
        color: var(--gbp-primary-color);
    }

    .technology-feature-item:hover h4 {
        color: var(--gbp-secondary-color);
    }

    .technology-feature-content p {
        margin: 0;
        font-size: 14px;
        line-height: 1.5;
        color: var(--gbp-paragraph-color);
    }

    /*==================================================
RESPONSIVE
==================================================*/
    @media(max-width:1400px) {
        .technology-tabs {
            gap: 12px;
        }

        .technology-tab {
            padding: 10px 14px;
            gap: 12px;
        }

        .technology-tab-icon {
            width: 42px;
            height: 42px;
        }

        .technology-tab-icon svg {
            width: 20px !important;
            height: 20px !important;
        }

        .technology-tab-content h4 {
            font-size: 16px;
        }

        .technology-tab-content span {
            font-size: 11px;
        }

        .technology-right {
            gap: 14px;
        }

        .technology-card {
            padding: 18px 12px;
        }

        .technology-card img {
            width: 52px;
            height: 52px;
        }

        .technology-card h4 {
            font-size: 16px;
        }
    }

    @media(max-width:1200px) {
        .technology-main-card {
            flex-direction: column;
        }

        .technology-left,
        .technology-right {
            width: 100%;
        }

        .technology-right {
            grid-template-columns: repeat(4, 1fr);
        }

        .technology-tabs {
            gap: 10px;
        }

        .technology-tab {
            padding: 10px 12px;
            gap: 10px;
        }

        .technology-tab-icon {
            width: 40px;
            height: 40px;
        }

        .technology-tab-icon svg {
            width: 18px !important;
            height: 18px !important;
        }

        .technology-tab-content h4 {
            font-size: 15px;
        }

        .technology-tab-content span {
            font-size: 10px;
        }
    }

    @media(max-width:992px) {
        .technology-right {
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
        }

        .technology-content-box {
            padding: 22px;
        }

        .technology-content-box h3 {
            font-size: 26px;
        }

        .technology-content-box p {
            font-size: 16px;
        }

        .technology-card {
            border-radius: 18px;
            padding: 16px 12px;
        }

        .technology-card img {
            width: 48px;
            height: 48px;
        }

        .technology-card h4 {
            font-size: 15px;
        }
    }

    @media(max-width:767px) {
        .technology-tabs-wrapper {
            padding: 0 12px;
        }

        .technology-tabs {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            overflow-y: hidden;
            padding-bottom: 10px;
            flex-wrap: nowrap;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .technology-tabs::-webkit-scrollbar {
            display: none;
        }

        .technology-tab {
            flex: 0 0 auto;
            min-width: 150px;
            padding: 10px 18px;
            gap: 12px;
            justify-content: flex-start;
            width: 80%;
        }

        .technology-tab-icon {
            width: 40px;
            height: 40px;
        }

        .technology-tab-icon svg {
            width: 18px !important;
            height: 18px !important;
        }

        .technology-tab-content h4 {
            font-size: 15px;
        }

        .technology-tab-content span {
            font-size: 10px;
        }

        .technology-main-card {
            flex-direction: column;
            gap: 20px;
        }

        .technology-left,
        .technology-right {
            width: 100%;
        }

        .technology-left-card {
            flex-direction: column;
            padding: 16px;
            gap: 16px;
        }

        .technology-image {
            width: 100%;
            flex: none;
        }

        .technology-image img {
            height: auto;
        }

        .technology-content-box {
            padding: 18px;
        }

        .technology-content-box h3 {
            font-size: 22px;
        }

        .technology-content-box p {
            font-size: 15px;
        }

        .technology-check-list {
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .technology-check-item {
            font-size: 12px;
        }

        .technology-right {
            grid-template-columns: repeat(4, 1fr);
            gap: 6px;
        }

        .technology-card {
            padding: 14px 10px;
        }

        .technology-card img {
            width: 36px;
            height: 36px;
            margin-bottom: 6px;
        }

        .technology-card h4 {
            font-size: 12px;
        }

        .technology-button a {
            width: 100%;
            justify-content: center;
            font-size: 14px;
            padding: 8px 10px;
        }

        .technology-button span {
            width: 34px;
            height: 34px;
        }

        .technology-button span svg {
            width: 14px !important;
            height: 14px !important;
        }

        .technology-features {
            grid-template-columns: repeat(2, 1fr);
            border-radius: 16px;
        }

        .technology-feature-item {
            padding: 16px 18px;
            gap: 14px;
            min-height: 80px;
        }

        .technology-feature-item::after {
            display: none !important;
        }

        .technology-feature-item:nth-child(1)::after,
        .technology-feature-item:nth-child(2)::after {
            content: "";
            display: block;
            position: absolute;
            bottom: 0;
            left: 15%;
            width: 70%;
            height: 1px;
            background: #edf1f7;
        }

        .technology-feature-item:nth-child(1)::before {
            content: "";
            display: block;
            position: absolute;
            right: 0;
            top: 15%;
            height: 70%;
            width: 1px;
            background: #edf1f7;
        }

        .technology-feature-icon {
            width: 44px;
            height: 44px;
        }

        .technology-feature-icon svg {
            width: 20px !important;
            height: 20px !important;
        }

        .technology-feature-content h4 {
            font-size: 16px;
        }

        .technology-feature-content p {
            font-size: 13px;
        }
    }

    @media(max-width:480px) {
        .technology-tab {
            min-width: 130px;
            padding: 8px 14px;
        }

        .technology-tab-icon {
            width: 34px;
            height: 34px;
        }

        .technology-tab-icon svg {
            width: 16px !important;
            height: 16px !important;
        }

        .technology-tab-content h4 {
            font-size: 13px;
        }

        .technology-tab-content span {
            font-size: 9px;
        }

        .technology-content-box h3 {
            font-size: 20px;
        }

        .technology-content-box p {
            font-size: 14px;
        }

        .technology-check-list {
            grid-template-columns: repeat(2, 1fr);
        }

        .technology-right {
            grid-template-columns: repeat(4, 1fr);
            gap: 4px;
        }

        .technology-card {
            padding: 12px 8px;
        }

        .technology-card img {
            width: 35px;
            height: 35px;
        }

        .technology-card h4 {
            font-size: 11px;
        }

        .technology-features {
            grid-template-columns: 1fr;
            border-radius: 14px;
        }

        .technology-feature-item {
            padding: 12px 14px;
            min-height: auto;
        }

        .technology-feature-item::before,
        .technology-feature-item::after {
            display: none !important;
        }

        .technology-feature-item:not(:last-child)::after {
            display: block !important;
            content: "";
            position: absolute;
            bottom: 0;
            left: 15%;
            width: 70%;
            height: 1px;
            background: #edf1f7;
            top: auto;
            right: auto;
        }

        .technology-feature-icon {
            width: 36px;
            height: 36px;
        }

        .technology-feature-icon svg {
            width: 16px !important;
            height: 16px !important;
        }

        .technology-feature-content h4 {
            font-size: 14px;
        }

        .technology-feature-content p {
            font-size: 12px;
        }
    }
    
               /*==================================================
INDUSTRY EXPERTISE
PART 3
DESKTOP LAYOUT
==================================================*/

.ain-industry-desktop{
    display:block;
    margin-top:25px;
}

.ain-industry-wrapper{
    display:flex;
    gap:14px;
    align-items:stretch;
    justify-content:center;
    width:100%;
    overflow:hidden;
}

.ain-industry-card{
    position:relative;
    flex:1;
    min-height:580px;
    border-radius:26px;
    overflow:hidden;
    cursor:pointer;
    transition:all .45s ease;
    display:flex;
    align-items:flex-end;
    box-shadow:0 12px 30px rgba(0,0,0,.10);
}

.ain-industry-card-active{
    flex:1.75;
}

.ain-industry-bg{
    position:absolute;
    inset:0;
    z-index:1;
    overflow:hidden;
}

.ain-industry-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .7s ease;
}

.ain-industry-overlay{
    position:absolute;
    inset:0;
    z-index:2;
    background:linear-gradient(180deg,rgba(2,0,102,.40) 0%,rgba(2,0,102,.58) 35%,rgba(2,0,102,.88) 100%);
    transition:.45s;
}

.ain-industry-content{
    position:relative;
    z-index:5;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    padding:22px;
}

.ain-industry-card:hover .ain-industry-bg img{
    transform:scale(1.12);
}

.ain-industry-card,
.ain-industry-content,
.ain-industry-bg img{
    transition:all .45s ease;
}

.vis{
    visibility:hidden;
}

.ain-industry-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:max-content;
    padding:8px 16px;
    margin-bottom:22px;
    border-radius:50px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
    color:#fff;
    font-size:13px;
    font-weight:600;
    letter-spacing:.4px;
}

.ain-industry-badge svg{
    width:13px;
    height:13px;
}

.ain-industry-icon{
    width:72px;
    height:72px;
    border:2px solid var(--gbp-secondary-color);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:22px;
    color:var(--gbp-secondary-color);
    transition:.35s;
}

.ain-industry-icon svg{
    width:34px;
    height:34px;
}

.ain-industry-content h3{
    margin:0;
    color:#fff;
    font-size:25px;
    font-weight:700;
    line-height:1.2;
}

.ain-industry-divider{
    width:56px;
    height:4px;
    margin:18px 0;
    border-radius:10px;
    background:var(--gbp-secondary-color);
}

.ain-industry-content p{
    margin:0;
    color:rgba(255,255,255,.92);
    font-size:16px;
    line-height:1.8;
}

.ain-industry-list{
    margin:22px 0 0;
    padding:0;
    list-style:none;
}

.ain-industry-list li{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
    color:#fff;
    font-size:15px;
}

.ain-industry-list li svg{
    width:15px;
    height:15px;
    color:var(--gbp-secondary-color);
    flex-shrink:0;
}

.ain-industry-btn{
    margin-top:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#fff;
    font-size:17px;
    font-weight:600;
    text-decoration:none;
}

.ain-industry-btn-icon{
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--gbp-secondary-color);
    color:#fff;
    transition:.35s;
}

.ain-industry-btn-icon svg{
    width:18px;
    height:18px;
}

.ain-industry-btn:hover .ain-industry-btn-icon{
    transform:translateX(5px);
}

.ain-industry-card:hover .ain-industry-icon{
    transform:scale(1.08);
    background:rgba(255,255,255,.08);
}

.ain-industry-card:hover .ain-industry-content h3{
    color:#fff;
}

.ain-industry-wrapper:hover .ain-industry-card{
    flex:1;
}

.ain-industry-wrapper:hover .ain-industry-card:hover{
    flex:1.8;
}

.ain-industry-card .ain-industry-content{
    padding:20px;
}

.ain-industry-card:hover .ain-industry-content{
    padding:24px;
}

.ain-industry-card .ain-industry-icon{
    width:58px;
    height:58px;
}

.ain-industry-card .ain-industry-icon svg{
    width:28px;
    height:28px;
}

.ain-industry-card:hover .ain-industry-icon{
    width:70px;
    height:70px;
}

.ain-industry-card:hover .ain-industry-icon svg{
    width:34px;
    height:34px;
}

.ain-industry-card h3{
    font-size:20px;
}

.ain-industry-card:hover h3{
    font-size:26px;
}

.ain-industry-card p{
    font-size:14px;
    line-height:1.7;
}

.ain-industry-card:hover p{
    font-size:15px;
}

.ain-industry-list li{
    font-size:14px;
}

.ain-industry-card:hover .ain-industry-list li{
    font-size:15px;
}

.ain-industry-btn{
    margin-top:5px;
}

.ain-industry-card:hover .ain-industry-btn{
    margin-top:18px;
}

.ain-industry-card:hover .ain-industry-overlay{
    background:linear-gradient(180deg,rgba(2,0,102,.20) 0%,rgba(2,0,102,.45) 30%,rgba(2,0,102,.92) 100%);
}

.ain-industry-card:hover{
    box-shadow:0 22px 45px rgba(0,0,0,.18);
}

/*==================================================
MOBILE INDUSTRY EXPERTISE
==================================================*/

.ain-industry-mobile{
    display:none;
}

@media(max-width:767px){
    .ain-industry-desktop{
        display:none;
    }
    .ain-industry-mobile{
        display:block;
        margin-top:40px;
    }
}

.ain-mobile-industry-wrapper{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.ain-mobile-industry-card{
    position:relative;
    overflow:hidden;
    border-radius:22px;
    min-height:180px;
    display:flex;
    align-items:center;
    box-shadow:0 12px 30px rgba(0,0,0,.12);
}

.ain-mobile-primary-card{
    border:2px solid var(--gbp-secondary-color);
    box-shadow:0 0 25px rgba(192,0,99,.35);
}

.ain-mobile-card-bg{
    position:absolute;
    inset:0;
    z-index:1;
}

.ain-mobile-card-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.ain-mobile-card-overlay{
    position:absolute;
    inset:0;
    z-index:2;
    background:linear-gradient(90deg,rgba(2,0,102,.96) 0%,rgba(2,0,102,.88) 55%,rgba(2,0,102,.70) 100%);
}

.ain-mobile-card-content{
    position:relative;
    z-index:5;
    width:100%;
    padding:16px 18px;
}

.ain-mobile-card-middle{
    display:flex;
    align-items:center;
    gap:16px;
    width:100%;
}

.ain-mobile-card-text{
    flex:1;
    min-width:0;
}

.ain-mobile-industry-card:hover .ain-mobile-card-bg img{
    transform:scale(1.06);
}

.ain-mobile-card-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 14px;
    margin-bottom:16px;
    border-radius:50px;
    background:var(--gbp-secondary-color);
    color:#fff;
    font-size:11px;
    font-weight:600;
    letter-spacing:.4px;
    text-transform:uppercase;
}

.ain-mobile-card-badge svg{
    width:11px;
    height:11px;
}

.ain-mobile-card-icon{
    width:62px;
    height:62px;
    flex-shrink:0;
    border:2px solid var(--gbp-secondary-color);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--gbp-secondary-color);
    transition:.35s;
}

.ain-mobile-card-icon svg{
    width:28px;
    height:28px;
}

.ain-mobile-card-text h3{
    margin:0;
    color:#fff;
    font-size:17px;
    font-weight:700;
    line-height:1.25;
}

.ain-mobile-card-line{
    display:block;
    width:42px;
    height:3px;
    margin:10px 0 12px;
    border-radius:10px;
    background:var(--gbp-secondary-color);
}

.ain-mobile-card-text p{
    margin:0;
    color:rgba(255,255,255,.92);
    font-size:14px;
    line-height:1.7;
}

.ain-mobile-card-arrow{
    width:54px;
    height:54px;
    flex-shrink:0;
    margin-left:14px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--gbp-secondary-color);
    color:#fff;
    text-decoration:none;
    transition:.35s;
}

.ain-mobile-card-arrow svg{
    width:18px;
    height:18px;
}

.ain-mobile-industry-card:hover .ain-mobile-card-arrow{
    transform:translateX(4px);
}

.ain-mobile-industry-card:hover .ain-mobile-card-icon{
    background:rgba(255,255,255,.08);
}

.ain-mobile-industry-card:hover .ain-mobile-card-text h3{
    color:#fff;
}

.ain-mobile-feature-box{
    margin-top:24px;
    background:#fff;
    border-radius:22px;
    padding:10px 18px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.ain-mobile-feature-item{
    display:flex;
    align-items:center;
    gap:15px;
    padding:16px 0;
}

.ain-mobile-feature-item:not(:last-child){
    border-bottom:1px solid rgba(2,0,102,.08);
}

.ain-mobile-feature-icon{
    width:56px;
    height:56px;
    flex-shrink:0;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#fff5fa,#fff);
    color:var(--gbp-secondary-color);
    box-shadow:0 8px 20px rgba(192,0,99,.10);
}

.ain-mobile-feature-icon svg{
    width:24px;
    height:24px;
}

.ain-mobile-feature-content{
    flex:1;
}

.ain-mobile-feature-content h4{
    margin:0 0 4px;
    color:var(--gbp-primary-color);
    font-size:17px;
    font-weight:700;
    line-height:1.3;
}

.ain-mobile-feature-content p{
    margin:0;
    color:var(--gbp-paragraph-color);
    font-size:14px;
    line-height:1.6;
}

.ain-mobile-bottom-btn{
    margin-top:28px;
}

.ain-mobile-main-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    width:100%;
    padding:16px 20px;
    border-radius:60px;
    background:linear-gradient(90deg,var(--gbp-secondary-color),#ff2b7d);
    color:#fff;
    font-size:20px;
    font-weight:700;
    text-decoration:none;
    box-shadow:0 15px 35px rgba(192,0,99,.25);
    transition:.35s;
}

.ain-mobile-main-btn:hover{
    transform:translateY(-4px);
}

.ain-mobile-main-btn-icon{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.15);
}

.ain-mobile-main-btn-icon svg{
    width:18px;
    height:18px;
}

@media(max-width:767px){
    .ain-mobile-industry-wrapper{
        gap:10px;
    }
    .ain-mobile-industry-card{
        min-height:175px;
    }
    .ain-mobile-card-content{
        padding:12px;
    }
}

@media(max-width:480px){
    .ain-mobile-card-middle{
        gap:12px;
    }
    .ain-mobile-card-icon{
        width:54px;
        height:54px;
    }
    .ain-mobile-card-icon svg{
        width:24px;
        height:24px;
    }
    .ain-mobile-card-arrow{
        width:46px;
        height:46px;
        margin-left:8px;
    }
    .ain-mobile-card-arrow svg{
        width:16px;
        height:16px;
    }
    .ain-mobile-card-text h3{
        font-size:15px;
    }
    .ain-mobile-card-text p{
        font-size:13px;
        line-height:1.55;
    }
    .ain-mobile-feature-box{
        padding:8px 14px;
        margin-top:12px;
    }
    .ain-mobile-feature-item{
        gap:12px;
        padding:14px 0;
    }
    .ain-mobile-feature-icon{
        width:48px;
        height:48px;
    }
    .ain-mobile-feature-icon svg{
        width:20px;
        height:20px;
    }
    .ain-mobile-feature-content h4{
        font-size:15px;
    }
    .ain-mobile-feature-content p{
        font-size:13px;
    }
    .ain-mobile-main-btn{
        padding:10px 14px;
        font-size:18px;
    }
}
/*==================================================
DEVELOPMENT PROCESS - DESKTOP
==================================================*/

.ain-process-desktop{
    display:block;
}
@media(max-width:767px){
    .ain-process-desktop{
        display:none;
    }
}

.ain-process-wrapper{
    display:flex;
    align-items:stretch;
    gap:18px;
    margin-top:20px;
}

.ain-process-card{
    position:relative;
    flex:1;
    padding:14px 10px;
    background:#fff;
    border-radius:28px;
    text-align:center;
    box-shadow:0 15px 45px rgba(2,0,102,.08);
    transition:.4s;
    overflow:visible;
}

.ain-process-card-highlight{
    border:2px solid var(--gbp-secondary-color);
    box-shadow:0 20px 55px rgba(192,0,99,.18);
}

.ain-process-badge{
    position:absolute;
    top:-16px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:7px;
    padding:8px 22px;
    background:linear-gradient(90deg,var(--gbp-secondary-color),#ff2b7d);
    color:#fff;
    border-radius:50px;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}
.ain-process-badge svg{
    width:13px;
    height:13px;
}

.ain-process-icon{
    width:66px;
    height:66px;
    margin:0 auto 10px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg,#fff5fa,#ffffff);
    border:1px solid rgba(192,0,99,.15);
}
.ain-process-icon svg{
    width:30px;
    height:30px;
    color:var(--gbp-primary-color);
}

.ain-process-number{
    color:var(--gbp-secondary-color);
    font-size:26px;
    font-weight:700;
}

.ain-process-card h3{
    margin:0;
    color:var(--gbp-primary-color);
    font-size:18px;
    font-weight:600;
    line-height:1.35;
}

.ain-process-line{
    display:block;
    width:44px;
    height:3px;
    margin:8px auto;
    border-radius:20px;
    background:var(--gbp-secondary-color);
}

.ain-process-card p{
    margin:0;
    color:var(--gbp-paragraph-color);
    font-size:16px;
    line-height:1.8;
}

.ain-process-list{
    margin:0;
    padding-left:10px;
    list-style:none;
    text-align:left;
}
.ain-process-list li{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:6px;
    color:var(--gbp-paragraph-color);
    font-size:15px;
    line-height:1.5;
}
.ain-process-list li:last-child{
    margin-bottom:0;
}
.ain-process-list svg{
    width:15px;
    height:15px;
    color:var(--gbp-secondary-color);
    flex-shrink:0;
}

.ain-process-quality{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:22px;
    padding:12px 18px;
    border-radius:40px;
    background:linear-gradient(90deg,#fff6fa,#ffe9f3);
    color:var(--gbp-secondary-color);
    font-size:18px;
    font-weight:700;
}
.ain-process-quality svg{
    width:18px;
    height:18px;
}

.ain-process-timeline{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:30px 90px 30px;
}
.ain-process-timeline::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:50%;
    height:4px;
    transform:translateY(-50%);
    background:linear-gradient(90deg,var(--gbp-secondary-color),#ff4a92);
    border-radius:20px;
}

.ain-process-dot{
    position:relative;
    width:24px;
    height:24px;
    background:#fff;
    border:5px solid var(--gbp-secondary-color);
    border-radius:50%;
    z-index:2;
    box-shadow:0 0 18px rgba(192,0,99,.18);
}
.ain-process-dot::before{
    content:"";
    position:absolute;
    left:50%;
    top:-38px;
    width:2px;
    height:30px;
    transform:translateX(-50%);
    border-left:2px dashed rgba(2,0,102,.20);
}
.ain-process-dot-active{
    width:34px;
    height:34px;
    border-width:7px;
    box-shadow:0 0 28px rgba(192,0,99,.45);
}

.ain-process-card:hover{
    transform:translateY(-10px);
    box-shadow:0 28px 60px rgba(2,0,102,.12);
}
.ain-process-card:hover .ain-process-icon{
    transform:scale(1.08);
    background:linear-gradient(180deg,#fff0f7,#ffffff);
}
.ain-process-card:hover .ain-process-number{
    transform:scale(1.08);
}
.ain-process-card:hover .ain-process-line{
    width:60px;
}
.ain-process-card-highlight:hover{
    border-color:var(--gbp-secondary-color);
    box-shadow:0 30px 70px rgba(192,0,99,.25);
}

.ain-process-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
    margin-top:20px;
    padding:14px 38px;
    background:#fff;
    border-radius:30px;
    box-shadow:0 18px 45px rgba(2,0,102,.08);
}
.ain-process-cta-left{
    flex:1;
    display:flex;
    align-items:center;
    gap:24px;
}
.ain-process-cta-icon{
    width:110px;
    height:110px;
    flex-shrink:0;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--gbp-primary-color),#121f8c);
    color:#fff;
    box-shadow:0 15px 35px rgba(2,0,102,.25);
}
.ain-process-cta-icon svg{
    width:52px;
    height:52px;
}
.ain-process-cta-content{
    flex:1;
}
.ain-process-cta-content h3{
    margin:0 0 10px;
    color:var(--gbp-primary-color);
    font-size:38px;
    font-weight:700;
    line-height:1.25;
}
.ain-process-cta-content p{
    margin:0;
    color:var(--gbp-paragraph-color);
    font-size:18px;
    line-height:1.8;
}
.ain-process-cta-right{
    padding-left:40px;
    border-left:1px solid rgba(2,0,102,.10);
}
.ain-process-btn{
    display:flex;
    align-items:center;
    gap:18px;
    padding:20px 34px;
    border-radius:20px;
    background:linear-gradient(135deg,var(--gbp-primary-color),#101e82);
    color:#fff;
    text-decoration:none;
    font-size:18px;
    font-weight:700;
    white-space:nowrap;
    transition:.35s;
    box-shadow:0 15px 35px rgba(2,0,102,.20);
}
.ain-process-btn:hover{
    transform:translateY(-5px);
}
.ain-process-btn-icon{
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.12);
}
.ain-process-btn-icon svg{
    width:18px;
    height:18px;
}

/*==================================================
RESPONSIVE
==================================================*/
@media(max-width:1400px){
    .ain-process-card{
        padding:25px 16px;
    }
    .ain-process-cta-content h3{
        font-size:32px;
    }
}
@media(max-width:1200px){
    .ain-process-wrapper{
        gap:14px;
    }
    .ain-process-card{
        padding:22px 14px;
    }
    .ain-process-icon{
        width:72px;
        height:72px;
    }
    .ain-process-icon svg{
        width:34px;
        height:34px;
    }
    .ain-process-number{
        font-size:30px;
    }
    .ain-process-card p,
    .ain-process-list li{
        font-size:14px;
    }
    .ain-process-cta{
        padding:28px;
    }
    .ain-process-cta-content h3{
        font-size:28px;
    }
    .ain-process-cta-content p{
        font-size:16px;
    }
}
@media(max-width:992px){
    .ain-process-wrapper{
        gap:12px;
    }
    .ain-process-card{
        padding:20px 12px;
    }
    .ain-process-card h3{
        font-size:16px;
    }
    .ain-process-card p,
    .ain-process-list li{
        font-size:13px;
    }
    .ain-process-icon{
        width:64px;
        height:64px;
    }
    .ain-process-icon svg{
        width:30px;
        height:30px;
    }
    .ain-process-number{
        font-size:26px;
    }
    .ain-process-quality{
        font-size:15px;
        padding:10px 14px;
    }
    .ain-process-timeline{
        margin:40px 55px 50px;
    }
    .ain-process-cta{
        gap:22px;
        padding:24px;
    }
    .ain-process-cta-left{
        gap:18px;
    }
    .ain-process-cta-icon{
        width:86px;
        height:86px;
    }
    .ain-process-cta-icon svg{
        width:40px;
        height:40px;
    }
    .ain-process-cta-content h3{
        font-size:24px;
    }
    .ain-process-btn{
        padding:18px 24px;
        font-size:16px;
    }
}

/*==================================================
MOBILE PROCESS SECTION
==================================================*/

.ain-process-mobile {
    display: none;
    padding: 20px 0 10px;
    position: relative;
}
@media (max-width: 767px) {
    .ain-process-mobile {
        display: block !important;
    }
    .ain-process-desktop {
        display: none !important;
    }
}

.ain-process-mobile-timeline{
    position:relative;
    padding-left:28px;
}
.ain-process-mobile-timeline::before{
    content:"";
    position:absolute;
    left:8px;
    top:12px;
    bottom:12px;
    border-left:2px dashed rgba(230,0,90,.35);
}

.ain-process-mobile-item{
    position:relative;
    margin-bottom:18px;
}
.ain-process-mobile-dot{
    position:absolute;
    left:-28px;
    top:78px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#e6005a;
    border:6px solid #fff;
    box-shadow:0 0 0 3px rgba(230,0,90,.15);
    z-index:5;
}

.ain-process-mobile-card{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:14px;
    background:#fff;
    border-radius:22px;
    padding:22px 18px;
    border:1px solid rgba(2,0,102,.08);
    box-shadow:0 15px 45px rgba(2,0,102,.08);
}

.ain-process-mobile-icon{
    width:74px;
    height:74px;
    min-width:74px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg,#fff6fa,#ffeaf2);
    border:1px solid rgba(230,0,90,.12);
}
.ain-process-mobile-icon svg{
    width:34px;
    height:34px;
    color:var(--primary-color);
}

.ain-process-mobile-content{
    flex:1;
    padding-right:55px;
}
.ain-process-mobile-number{
    font-size:28px;
    font-weight:800;
    line-height:1;
    margin-bottom:8px;
    color:var(--secondary-color);
}
.ain-process-mobile-content h3{
    font-size:27px;
    font-weight:700;
    line-height:1.2;
    margin-bottom:6px;
    color:var(--primary-color);
}
.ain-process-mobile-content p{
    font-size:17px;
    line-height:1.65;
    color:#5b6488;
    margin:0;
}

.ain-process-mobile-arrow{
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    width:52px;
    height:52px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    background:#fff3f8;
    color:var(--secondary-color);
    transition:.3s;
}
.ain-process-mobile-arrow:hover{
    background:var(--secondary-color);
    color:#fff;
    transform:translateY(-50%) scale(1.08);
}
.ain-process-mobile-arrow svg{
    width:18px;
    height:18px;
}

.ain-process-mobile-featured{
    border:2px solid var(--secondary-color);
    padding-top:42px;
}
.ain-process-mobile-featured::before{
    content:"";
    position:absolute;
    left:15px;
    right:15px;
    top:0;
    height:4px;
    background:linear-gradient(90deg,var(--secondary-color),#ff6ea9);
}

.ain-process-mobile-badge{
    position:absolute;
    left:50%;
    top:-15px;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 18px;
    background:var(--secondary-color);
    color:#fff;
    font-size:13px;
    font-weight:700;
    border-radius:30px;
    letter-spacing:.4px;
    white-space:nowrap;
    box-shadow:0 10px 25px rgba(230,0,90,.25);
}
.ain-process-mobile-badge svg{
    width:13px;
    height:13px;
}

.ain-process-mobile-content ul{
    margin:12px 0 0;
    padding:0;
    list-style:none;
}
.ain-process-mobile-content ul li{
    display:flex;
    align-items:flex-start;
    gap:8px;
    font-size:16px;
    line-height:1.7;
    color:#5b6488;
    margin-bottom:4px;
}
.ain-process-mobile-content ul li svg{
    width:15px;
    height:15px;
    margin-top:5px;
    flex:none;
    color:var(--secondary-color);
}

.ain-process-mobile-quality{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:18px;
    padding:8px 18px;
    border-radius:30px;
    background:linear-gradient(90deg,#fff2f7,#ffe8f2);
    color:var(--secondary-color);
    font-weight:600;
    font-size:15px;
}
.ain-process-mobile-quality svg{
    width:16px;
    height:16px;
}

.ain-process-mobile-featured .ain-process-mobile-icon{
    background:linear-gradient(180deg,#fff8fb,#ffeef5);
    border:1px solid rgba(230,0,90,.18);
}
.ain-process-mobile-featured .ain-process-mobile-icon svg{
    color:var(--primary-color);
}
.ain-process-mobile-featured .ain-process-mobile-arrow{
    background:#fff3f8;
    border:1px solid rgba(230,0,90,.12);
}
.ain-process-mobile-featured .ain-process-mobile-arrow:hover{
    background:var(--secondary-color);
    color:#fff;
}

.ain-process-mobile-item:last-child{
    margin-bottom:0;
}

/*==================================================
MOBILE CTA
==================================================*/
.ain-process-mobile-cta{
    display:none;
    margin-top:15px;
    padding:24px;
    border-radius:18px;
    background:linear-gradient(135deg,#fff7fa,#ffffff);
    border:1px solid rgba(2,0,102,.08);
    box-shadow:0 15px 45px rgba(2,0,102,.08);
}
@media (max-width:767px){
    .ain-process-mobile-cta{
        display:block;
    }
}

.ain-process-mobile-cta-top{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:16px;
}
.ain-process-mobile-cta-icon{
    width:70px;
    height:70px;
    min-width:70px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--primary-color),#16268d);
    box-shadow:0 15px 35px rgba(2,0,102,.20);
}
.ain-process-mobile-cta-icon svg{
    width:30px;
    height:30px;
    color:#fff;
}
.ain-process-mobile-cta-content{
    flex:1;
}
.ain-process-mobile-cta-content h3{
    font-size:34px;
    line-height:1.15;
    font-weight:800;
    color:var(--primary-color);
    margin-bottom:6px;
}
.ain-process-mobile-cta-content p{
    font-size:18px;
    line-height:1.7;
    color:#5b6488;
    margin:0;
}

.ain-process-mobile-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    width:100%;
    padding:18px 24px;
    border-radius:50px;
    background:linear-gradient(90deg,var(--secondary-color),#ff2b84);
    color:#fff;
    font-size:21px;
    font-weight:700;
    text-decoration:none;
    transition:.35s;
    box-shadow:0 18px 35px rgba(230,0,90,.25);
}
.ain-process-mobile-btn:hover{
    transform:translateY(-3px);
    color:#fff;
    box-shadow:0 24px 45px rgba(230,0,90,.35);
}
.ain-process-mobile-btn svg{
    width:18px;
    height:18px;
    transition:.35s;
}
.ain-process-mobile-btn:hover svg{
    transform:translateX(6px);
}

/*==================================================
RESPONSIVE POLISH
==================================================*/
@media(max-width:767px){
    .ain-process-mobile{
        padding:15px 0;
    }
    .ain-process-mobile-card{
        padding:18px 16px;
        border-radius:18px;
        gap:12px;
    }
    .ain-process-mobile-icon{
        width:52px;
        height:52px;
        min-width:52px;
    }
    .ain-process-mobile-icon svg{
        width:24px;
        height:24px;
    }
    .ain-process-mobile-content{
        padding-right:48px;
    }
    .ain-process-mobile-number{
        font-size:24px;
    }
    .ain-process-mobile-content h3{
        font-size:18px;
    }
    .ain-process-mobile-content p,
    .ain-process-mobile-content ul li{
        font-size:13px;
    }
    .ain-process-mobile-arrow{
        width:46px;
        height:46px;
        right:14px;
    }
    .ain-process-mobile-dot{
        width:16px;
        height:16px;
        border-width:5px;
    }
    .ain-process-mobile-cta{
        padding:16px;
        border-radius:16px;
    }
    .ain-process-mobile-cta-top{
        flex-direction:column;
        text-align:center;
        gap:16px;
    }
    .ain-process-mobile-cta-icon{
        width:62px;
        height:62px;
        min-width:62px;
    }
    .ain-process-mobile-cta-content h3{
        font-size:18px;
    }
    .ain-process-mobile-cta-content p{
        font-size:14px;
    }
    .ain-process-mobile-btn{
        font-size:16px;
        padding:14px 18px;
    }
}

/*==================================================
DESKTOP PROJECT TIMELINE - OPTIMIZED
==================================================*/

.ain-timeline-desktop {
    position: relative;
    margin-top: 16px;
}

.ain-timeline-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-left: 56px;
}

/* LEFT TIMELINE LINE */
.ain-timeline-wrapper::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 50px;
    background: linear-gradient(to bottom, var(--secondary-color), #ff8bb9);
}

/* TIMELINE CARD */
.ain-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 1px 1.1fr 1px 1.3fr 1px 0.9fr;
    align-items: center;
    column-gap: 24px;
    background: #fff;
    border: 1px solid rgba(2, 0, 102, 0.07);
    border-radius: 24px;
    padding: 12px 30px;
    box-shadow: 0 14px 40px rgba(2, 0, 102, 0.06);
}

/* TIMELINE DOT */
.ain-timeline-item::before {
    content: "";
    position: absolute;
    left: -48px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background: var(--secondary-color);
    border: 7px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 0, 102, 0.10);
    z-index: 3;
}

/* LEFT COLUMN */
.ain-timeline-left {
    display: flex;
    align-items: center;
    gap: 18px;
}

.ain-timeline-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--primary-color);
    background: linear-gradient(180deg, #fff8fb, #fff0f6);
    border: 1px solid rgba(255, 0, 102, 0.10);
}

.ain-timeline-icon svg {
    width: 22px;
    height: 22px;
}

.ain-timeline-days {
    font-size: 28px;
    line-height: 1;
    font-weight: 700;
    color: var(--secondary-color);
    white-space: nowrap;
}

/* DIVIDERS */
.ain-timeline-divider {
    width: 1px;
    height: 80px;
    justify-self: center;
    background: rgba(255, 0, 102, 0.10);
}

/* CENTER CONTENT */
.ain-timeline-content h3 {
    margin: 0 0 3px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--primary-color);
}

.ain-timeline-content p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-color);
}

/* PROGRESS COLUMN */
.ain-timeline-progress {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ain-timeline-progress-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--primary-color);
}

/* PROGRESS BAR */
.ain-timeline-bar {
    position: relative;
    width: 100%;
    height: 10px;
    border-radius: 50px;
    overflow: visible;
    background: #f0f0f5;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ain-timeline-fill {
    position: relative;
    height: 100%;
    border-radius: 50px;
    background: linear-gradient(90deg, var(--secondary-color), #ff5c98);
}

.ain-timeline-fill span {
    position: absolute;
    right: -9px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--secondary-color);
    box-shadow: 0 4px 10px rgba(255, 0, 102, 0.20);
}

/* BAR WIDTHS */
.ain-timeline-fill-1 { width: 64%; }
.ain-timeline-fill-2 { width: 69%; }
.ain-timeline-fill-3 { width: 83%; }
.ain-timeline-fill-4 { width: 95%; }

/* START / DELIVERY */
.ain-timeline-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.ain-timeline-labels span:first-child {
    color: var(--primary-color);
}

.ain-timeline-labels span:last-child {
    color: var(--secondary-color);
}

/* RIGHT COLUMN */
.ain-timeline-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ain-timeline-benefit-icon {
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--secondary-color);
    background: linear-gradient(180deg, #fff8fb, #fff1f6);
    border: 1px solid rgba(255, 0, 102, 0.10);
}

.ain-timeline-benefit-icon svg {
    width: 20px;
    height: 20px;
}

.ain-timeline-right p {
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
    color: var(--text-color);
    font-weight: 500;
}

/* BOTTOM HIGHLIGHTS */
.ain-timeline-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 16px;
    margin-left: 56px;
    margin-right: 56px;
}

.ain-timeline-highlight {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid rgba(2, 0, 102, 0.08);
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(2, 0, 102, 0.05);
    transition: all 0.35s ease;
}

.ain-timeline-highlight-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #fff8fb, #fff1f6);
    border: 1px solid rgba(255, 0, 102, 0.10);
    color: var(--secondary-color);
    font-size: 18px;
}

.ain-timeline-highlight-icon svg {
    width: 18px;
    height: 18px;
}

.ain-timeline-highlight h4 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--primary-color);
}

.ain-timeline-highlight p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-color);
}

/* HOVER EFFECTS */
.ain-timeline-item,
.ain-timeline-highlight {
    transition: all 0.35s ease;
}

.ain-timeline-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 50px rgba(2, 0, 102, 0.10);
}

.ain-timeline-highlight:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 45px rgba(2, 0, 102, 0.08);
}

.ain-timeline-icon,
.ain-timeline-benefit-icon,
.ain-timeline-highlight-icon {
    transition: all 0.35s ease;
}

.ain-timeline-item:hover .ain-timeline-icon,
.ain-timeline-item:hover .ain-timeline-benefit-icon,
.ain-timeline-highlight:hover .ain-timeline-highlight-icon {
    transform: scale(1.06) rotate(-4deg);
}

.ain-timeline-item:hover .ain-timeline-fill span {
    transform: translateY(-50%) scale(1.10);
}

/* DESKTOP / MOBILE */
/*.ain-timeline-desktop {*/
/*    display: block;*/
/*}*/

/*.ain-timeline-mobile {*/
/*    display: none;*/
/*}*/

/* RESPONSIVE - 1500px */
@media (max-width: 1500px) {
    .ain-timeline-item {
        grid-template-columns: 1.05fr 1px 1.05fr 1px 1.2fr 1px 0.85fr;
        column-gap: 18px;
        padding: 10px 24px;
    }
    
    .ain-timeline-days {
        font-size: 24px;
    }
}

/* RESPONSIVE - 1200px */
@media (max-width: 1200px) {
    .ain-timeline-item {
        grid-template-columns: 1fr 1px 1fr 1px 1.1fr 1px 0.8fr;
        column-gap: 14px;
        padding: 10px 18px;
        border-radius: 20px;
    }
    
    .ain-timeline-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        font-size: 18px;
    }
    
    .ain-timeline-icon svg {
        width: 18px;
        height: 18px;
    }
    
    .ain-timeline-days {
        font-size: 22px;
    }
    
    .ain-timeline-content h3 {
        font-size: 16px;
    }
    
    .ain-timeline-content p {
        font-size: 14px;
    }
    
    .ain-timeline-benefit-icon {
        width: 46px;
        height: 46px;
        min-width: 46px;
        font-size: 17px;
    }
    
    .ain-timeline-benefit-icon svg {
        width: 17px;
        height: 17px;
    }
    
    .ain-timeline-right p {
        font-size: 13px;
    }
}

/* RESPONSIVE - 992px */
/*@media (max-width: 992px) {*/
/*    .ain-timeline-desktop {*/
/*        display: none;*/
/*    }*/
    
/*    .ain-timeline-mobile {*/
/*        display: block;*/
/*        margin-top: 24px;*/
/*    }*/
/*}*/

/* DESKTOP / MOBILE */
.ain-timeline-desktop {
    display: block !important;
}

.ain-timeline-mobile {
    display: none !important;
}

/* RESPONSIVE - 992px */
@media (max-width: 992px) {
    .ain-timeline-desktop {
        display: none !important;
    }
    
    .ain-timeline-mobile {
        display: block !important;
        margin-top: 24px;
    }
}

/*==================================================
MOBILE PROJECT TIMELINE - OPTIMIZED
==================================================*/

.ain-timeline-mobile {
    display: none;
    margin-top: 24px;
}

.ain-timeline-mobile-wrapper {
    position: relative;
    padding-left: 24px;
}

.ain-timeline-mobile-wrapper::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: linear-gradient(to bottom, var(--secondary-color), #ff9bc3);
    border-radius: 30px;
}

.ain-timeline-mobile-item {
    position: relative;
    margin-bottom: 14px;
}

.ain-timeline-mobile-dot {
    position: absolute;
    left: -24px;
    top: 44px;
    width: 14px;
    height: 14px;
    background: var(--secondary-color);
    border: 4px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 0, 102, 0.10);
    z-index: 2;
}

.ain-timeline-mobile-card {
    background: #fff;
    border-radius: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(2, 0, 102, 0.08);
    box-shadow: 0 12px 30px rgba(2, 0, 102, 0.06);
}

.ain-timeline-mobile-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 6px;
}

.ain-timeline-mobile-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ain-timeline-mobile-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #fff7fb, #fff0f5);
    border: 1px solid rgba(255, 0, 102, 0.08);
    color: var(--primary-color);
    font-size: 18px;
}

.ain-timeline-mobile-icon svg {
    width: 18px;
    height: 18px;
}

.ain-timeline-mobile-days {
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    color: var(--secondary-color);
    white-space: nowrap;
}

.ain-timeline-mobile-benefit {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 140px;
}

.ain-timeline-mobile-benefit-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff5f8;
    border: 1px solid rgba(255, 0, 102, 0.08);
    color: var(--secondary-color);
    font-size: 14px;
}

.ain-timeline-mobile-benefit-icon svg {
    width: 14px;
    height: 14px;
}

.ain-timeline-mobile-benefit p {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-color);
    font-weight: 500;
}

.ain-timeline-mobile-content {
    margin-bottom: 12px;
}

.ain-timeline-mobile-content h3 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary-color);
}

.ain-timeline-mobile-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-color);
}

.ain-timeline-mobile-progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ain-timeline-mobile-progress-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary-color);
}

.ain-timeline-mobile-bar {
    position: relative;
    width: 100%;
    height: 6px;
    background: #edf0f7;
    border-radius: 30px;
    overflow: visible;
}

.ain-timeline-mobile-fill {
    position: relative;
    height: 100%;
    border-radius: 30px;
    background: linear-gradient(90deg, var(--secondary-color), #ff6aa5);
}

.ain-timeline-mobile-fill span {
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--secondary-color);
    box-shadow: 0 3px 8px rgba(255, 0, 102, 0.15);
}

.ain-timeline-mobile-fill-1 { width: 45%; }
.ain-timeline-mobile-fill-2 { width: 62%; }
.ain-timeline-mobile-fill-3 { width: 82%; }
.ain-timeline-mobile-fill-4 { width: 95%; }

.ain-timeline-mobile-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2px;
}

.ain-timeline-mobile-labels span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.ain-timeline-mobile-labels span:first-child {
    color: var(--primary-color);
}

.ain-timeline-mobile-labels span:last-child {
    color: var(--secondary-color);
}

/* MOBILE HIGHLIGHTS */
.ain-timeline-mobile-highlights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 18px;
}

.ain-timeline-mobile-highlight {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid rgba(2, 0, 102, 0.08);
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(2, 0, 102, 0.04);
    transition: 0.3s;
}

.ain-timeline-mobile-highlight:hover {
    transform: translateY(-3px);
}

.ain-timeline-mobile-highlight-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff8fb, #fff1f6);
    border: 1px solid rgba(255, 0, 102, 0.10);
    color: var(--secondary-color);
    font-size: 16px;
}

.ain-timeline-mobile-highlight-icon svg {
    width: 16px;
    height: 16px;
}

.ain-timeline-mobile-highlight h4 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary-color);
}

.ain-timeline-mobile-highlight p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-color);
}

/* MOBILE CTA */
.ain-timeline-mobile-cta {
    margin-top: 16px;
}

.ain-timeline-mobile-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 18px;
    border-radius: 16px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
    box-shadow: 0 12px 28px rgba(2, 0, 102, 0.15);
}

.ain-timeline-mobile-btn:hover {
    transform: translateY(-3px);
}

.ain-timeline-mobile-btn svg {
    width: 14px;
    height: 14px;
}

/* SMALL MOBILE */
@media (max-width: 480px) {
    .ain-timeline-mobile-card {
        padding: 12px 14px;
        border-radius: 14px;
    }

    .ain-timeline-mobile-top {
        flex-direction: column;
        gap: 10px;
    }

    .ain-timeline-mobile-benefit {
        max-width: 100%;
        display: none;
    }

    .ain-timeline-mobile-days {
        font-size: 20px;
    }

    .ain-timeline-mobile-content h3 {
        font-size: 15px;
    }

    .ain-timeline-mobile-content p {
        font-size: 13px;
    }

    .ain-timeline-mobile-highlights {
        grid-template-columns: 1fr;
    }

    .ain-timeline-mobile-btn {
        font-size: 13px;
        padding: 12px 16px;
    }
}
/*==================================================
CASE STUDIES DESKTOP - OPTIMIZED
==================================================*/

.ain-case-desktop {
    position: relative;
    margin-top: 50px;
}

.ain-case-wrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

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

.ain-case-card {
    background: #fff;
    border: 1px solid rgba(2, 0, 102, 0.08);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(2, 0, 102, 0.06);
    transition: 0.35s;
    display: flex;
    flex-direction: column;
    padding: 20px 20px 18px;
}

.ain-case-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(2, 0, 102, 0.12);
}

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

.ain-case-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.ain-case-company {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ain-case-company img {
    width: 56px;
    height: auto;
    flex-shrink: 0;
}

.ain-case-company h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ain-case-company span {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-color);
    opacity: 0.8;
}

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

.ain-case-category {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.ain-case-category-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: linear-gradient(180deg, #fff5f9, #ffeef5);
    color: var(--secondary-color);
    border: 1px solid rgba(255, 0, 102, 0.12);
}

.ain-case-category strong {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--secondary-color);
    text-transform: uppercase;
}

/*==================================================
WEBSITE PREVIEW
==================================================*/

.ain-case-preview {
    position: relative;
    margin-bottom: 5px;
}

.ain-case-preview img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    transition: 0.45s;
}

.ain-case-card:hover .ain-case-preview img {
    transform: scale(1.02);
}

/*==================================================
MAIN RESULT
==================================================*/

.ain-case-result {
    padding: 0 2px 14px;
    border-bottom: 1px solid rgba(2, 0, 102, 0.06);
    margin-bottom: 16px;
    margin-top:15px;
}

.ain-case-result {
    display: flex;
    /*align-items: center;*/
    gap: 18px;
}

.ain-case-result-icon {
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--secondary-color);
    background: linear-gradient(180deg, #fff6fa, #ffeef5);
    border: 1px solid rgba(255, 0, 102, 0.12);
    transition: 0.35s;
}

.ain-case-card:hover .ain-case-result-icon {
    transform: scale(1.06);
}

.ain-case-result-content {
    flex: 1;
}

.ain-case-result-content h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    color: var(--secondary-color);
}

.ain-case-result-content h4 {
    margin: 2px 0 4px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--primary-color);
}

.ain-case-result-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-color);
    opacity: 0.85;
    max-width:250px;
}

/*==================================================
MINI STATS
==================================================*/

.ain-case-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(2, 0, 102, 0.06);
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 16px;
}

.ain-case-stat {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ain-case-stat svg {
    font-size: 18px;
    color: var(--secondary-color);
    margin-top: 2px;
    flex-shrink: 0;
}

.ain-case-stat strong {
    display: block;
    margin-bottom: 3px;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    color: var(--primary-color);
}

.ain-case-stat span {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-color);
    opacity: 0.8;
}

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

.ain-case-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: auto;
    padding: 6px 0 2px;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    transition: 0.3s;
}

.ain-case-btn svg {
    font-size: 14px;
    color: var(--secondary-color);
    transition: 0.3s;
}

.ain-case-btn:hover {
    color: var(--secondary-color);
}

.ain-case-btn:hover svg {
    transform: translateX(6px);
}

/*==================================================
BOTTOM HIGHLIGHTS
==================================================*/

.ain-case-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 20px;
    background: #fff;
    border: 1px solid rgba(2, 0, 102, 0.08);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(2, 0, 102, 0.06);
}

.ain-case-highlight {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    position: relative;
    transition: 0.35s;
}

.ain-case-highlight:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: rgba(255, 0, 102, 0.12);
}

.ain-case-highlight:hover {
    background: #fff8fb;
}

.ain-case-highlight svg {
    width: 52px;
    height: 52px;
    min-width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff5f9, #ffeef5);
    border: 1px solid rgba(255, 0, 102, 0.12);
    color: var(--secondary-color);
    font-size: 22px;
    transition: 0.35s;
}

.ain-case-highlight:hover svg {
    transform: scale(1.08) rotate(-6deg);
}

.ain-case-highlight div {
    flex: 1;
}

.ain-case-highlight strong {
    display: block;
    margin-bottom: 4px;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    color: var(--secondary-color);
}

.ain-case-highlight span {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--primary-color);
    opacity: 0.85;
}

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

@media (max-width: 1400px) {
    .ain-case-wrapper {
        gap: 20px;
    }
    
    .ain-case-card {
        padding: 18px 18px 16px;
    }
    
    .ain-case-result-content h2 {
        font-size: 28px;
    }
    
    .ain-case-result-content h4 {
        font-size: 16px;
    }
}

@media (max-width: 1200px) {
    .ain-case-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .ain-case-highlights {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ain-case-highlight:not(:last-child)::after {
        display: none;
    }
    
    .ain-case-highlight:nth-child(2)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 20%;
        bottom: 20%;
        width: 1px;
        background: rgba(255, 0, 102, 0.12);
    }
}

@media (max-width: 992px) {
    .ain-case-wrapper {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    
    .ain-case-card {
        padding: 16px;
        border-radius: 20px;
    }
    
    .ain-case-highlights {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ain-case-highlight {
        padding: 16px 18px;
    }
    
    .ain-case-highlight strong {
        font-size: 24px;
    }
    
    .ain-case-result-content h2 {
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    .ain-case-desktop {
        margin-top: 30px;
    }
    
    .ain-case-wrapper {
        gap: 16px;
    }
    
    .ain-case-card {
        padding: 14px;
        border-radius: 16px;
    }
    
    .ain-case-header {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .ain-case-company img {
        width: 44px;
    }
    
    .ain-case-company h3 {
        font-size: 11px;
    }
    
    .ain-case-company span {
        font-size: 12px;
    }
    
    .ain-case-category-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 14px;
    }
    
    .ain-case-category strong {
        font-size: 10px;
    }
    
    .ain-case-result {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        display:none;
    }
    
    .ain-case-result-icon {
        width: 56px;
        height: 56px;
        min-width: 56px;
        font-size: 22px;
    }
    
    .ain-case-result-content h2 {
        font-size: 26px;
    }
    
    .ain-case-result-content h4 {
        font-size: 16px;
    }
    
    .ain-case-result-content p {
        font-size: 13px;
    }
    
    .ain-case-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-top:8px;
    }
    
    .ain-case-stat {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 4px;
    }
    
    .ain-case-stat svg {
        font-size: 16px;
        margin-top: 0;
    }
    
    .ain-case-stat strong {
        font-size: 16px;
    }
    
    .ain-case-stat span {
        font-size: 10px;
    }
    
    .ain-case-highlights {
        grid-template-columns: repeat(2, 1fr);
        border-radius: 16px;
        margin-top: 15px;
    }
    
    .ain-case-highlight {
        flex-direction: column;
        text-align: center;
        padding: 14px 12px;
        gap: 10px;
    }
    
    .ain-case-highlight svg {
        width: 44px;
        height: 44px;
        min-width: 44px;
        padding: 10px;
        font-size: 18px;
    }
    
    .ain-case-highlight strong {
        font-size: 22px;
    }
    
    .ain-case-highlight span {
        font-size: 13px;
    }
    
    .ain-case-highlight:nth-child(2)::after {
        display: none;
    }
}

@media (max-width: 480px) {
    .ain-case-highlights {
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }
    
    .ain-case-highlight {
        padding: 12px 10px;
    }
    
    .ain-case-highlight svg {
        width: 38px;
        height: 38px;
        min-width: 38px;
        padding: 8px;
        font-size: 16px;
    }
    
    .ain-case-highlight strong {
        font-size: 18px;
    }
    
    .ain-case-highlight span {
        font-size: 12px;
    }
}
/*==================================================
MAINTENANCE & SUPPORT - OPTIMIZED
==================================================*/

.ain-support-section {
    margin-top: 2rem;
}

.ain-support-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    align-items: stretch;
}

/*==================================================
PLAN CARDS
==================================================*/

.ain-support-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(2, 0, 102, 0.10);
    border-radius: 2.4rem;
    padding: 1.5rem 2.2rem 2.1rem;
    box-shadow: 0 1.5rem 4rem rgba(2, 0, 102, 0.06);
    transition: 0.35s;
    display: flex;
    flex-direction: column;
}

.ain-support-card:hover {
    transform: translateY(-0.6rem);
    box-shadow: 0 2.5rem 6rem rgba(2, 0, 102, 0.10);
}

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

.ain-support-card-featured {
    border: 2px solid var(--secondary-color);
    box-shadow: 0 1.5rem 4rem rgba(255, 0, 102, 0.10);
}

.ain-support-card-featured:hover {
    box-shadow: 0 2.5rem 7rem rgba(255, 0, 102, 0.18);
}

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

.ain-support-badge {
    position: absolute;
    left: 50%;
    top: -1.6rem;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 0.6rem 2rem;
    background: var(--secondary-color);
    color: #fff;
    border-radius: 5rem;
    font-size: 1.2rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 0.8rem 2rem rgba(255, 0, 102, 0.25);
    letter-spacing: 0.5px;
}

.ain-support-badge svg {
    width: 1.2rem;
    height: 1.2rem;
}

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

.ain-support-header {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    margin-bottom: 1.2rem;
}

.ain-support-icon {
    width: 6rem;
    height: 6rem;
    min-width: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.8rem;
    background: linear-gradient(180deg, #fff8fb, #fff1f6);
    border: 1px solid rgba(255, 0, 102, 0.10);
    flex-shrink: 0;
}

.ain-support-icon svg {
    width: 3.5rem;
    height: 3.5rem;
    color: var(--primary-color);
}

.ain-support-icon-featured svg {
    color: var(--secondary-color);
}

.ain-support-title {
    flex: 1;
}

.ain-support-title h3 {
    margin: 0 0 0.6rem;
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1;
    color: var(--primary-color);
}

.ain-support-title p {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.4;
    color: var(--text-color);
    opacity: 0.85;
}

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

.ain-support-features {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.3rem;
    border-top: 1px solid rgba(2, 0, 102, 0.06);
    flex: 1;
}

.ain-support-feature {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(2, 0, 102, 0.06);
}

.ain-support-check {
    width: 2.1rem;
    height: 2.1rem;
    min-width: 2.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--secondary-color);
    background: #fff;
    color: var(--secondary-color);
    flex-shrink: 0;
}

.ain-support-check svg {
    width: 1rem;
    height: 1rem;
}

.ain-support-feature span:last-child {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--primary-color);
}

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

.ain-support-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    width: 100%;
    padding: 1.1rem;
    border-radius: 1rem;
    border: 2px solid var(--primary-color);
    background: #fff;
    color: var(--primary-color);
    font-size: 1.4rem;
    font-weight: 600;
    text-decoration: none;
    transition: 0.35s;
    margin-top: auto;
}

.ain-support-btn svg {
    width: 1.6rem;
    height: 1.6rem;
    transition: 0.35s;
}

.ain-support-btn:hover {
    background: var(--primary-color);
    color: #fff;
}

.ain-support-btn:hover svg {
    transform: translateX(0.6rem);
}

.ain-support-btn-featured {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #fff;
}

.ain-support-btn-featured:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

/*==================================================
INFO CARD - DESKTOP
==================================================*/

.ain-support-info-desktop {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1.8rem;
    border-radius: 2.4rem;
    background: linear-gradient(180deg, #ffffff, #fff8fb);
    border: 1px solid rgba(2, 0, 102, 0.08);
    box-shadow: 0 1.5rem 4rem rgba(2, 0, 102, 0.06);
    position: relative;
    overflow: hidden;
}

.ain-support-info-desktop::before {
    content: "";
    position: absolute;
    top: -6rem;
    right: -6rem;
    width: 14rem;
    height: 14rem;
    border-radius: 50%;
    background: rgba(255, 0, 102, 0.04);
}

.ain-support-info-desktop::after {
    content: "";
    position: absolute;
    left: -5rem;
    bottom: -5rem;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background: rgba(2, 0, 102, 0.03);
}

.ain-support-info-icon {
    width: 6rem;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff5f9, #ffeef5);
    border: 1px solid rgba(255, 0, 102, 0.12);
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.ain-support-info-icon svg {
    width: 3rem;
    height: 3rem;
    color: var(--secondary-color);
}

.ain-support-info-desktop h3 {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--primary-color);
}

.ain-support-info-desktop h3 span {
    color: var(--secondary-color);
}

.ain-support-info-line {
    width: 5rem;
    height: 0.3rem;
    background: var(--secondary-color);
    border-radius: 5rem;
    margin: 0.6rem auto;
}

.ain-support-info-desktop p {
    margin: 0 0 1.1rem;
    font-size: 1.4rem;
    line-height: 1.7;
    color: var(--text-color);
    opacity: 0.85;
}

.ain-support-info-desktop h4 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--primary-color);
}

/*==================================================
MOBILE INFO CARD
==================================================*/

.ain-support-info-mobile {
    display: none;
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid rgba(2, 0, 102, 0.08);
    border-radius: 1.5rem;
    box-shadow: 0 1.5rem 4rem rgba(2, 0, 102, 0.06);
}

.ain-support-mobile-content {
    display: flex;
    /*align-items: center;*/
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.ain-support-mobile-icon,
.ain-support-mobile-service {
    width: 4rem;
    height: 4rem;
    min-width: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff5f9, #ffeef5);
    border: 1px solid rgba(255, 0, 102, 0.12);
}

.ain-support-mobile-icon svg,
.ain-support-mobile-service svg {
    width: 2rem;
    height: 2rem;
    color: var(--secondary-color);
}

.ain-support-mobile-center {
    flex: 1;
}

.ain-support-mobile-center h3 {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--primary-color);
}

.ain-support-mobile-center h3 span {
    color: var(--secondary-color);
}

.ain-support-mobile-center p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--text-color);
    opacity: 0.85;
}

.ain-support-mobile-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    width: 100%;
    padding: 1rem;
    border-radius: 1.3rem;
    background: var(--secondary-color);
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    transition: 0.35s;
}

.ain-support-mobile-btn:hover {
    background: var(--primary-color);
}

.ain-support-mobile-btn svg {
    width: 1.4rem;
    height: 1.4rem;
}

/*==================================================
DESKTOP / MOBILE VISIBILITY
==================================================*/

.ain-support-info-desktop {
    display: flex;
}

.ain-support-info-mobile {
    display: none;
}

/*==================================================
RESPONSIVE - 1200px
==================================================*/

@media (max-width: 1200px) {
    .ain-support-wrapper {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    .ain-support-info-desktop {
        grid-column: 1 / -1;
        flex-direction: row;
        text-align: left;
        padding: 2.4rem;
        gap: 2.4rem;
    }

    .ain-support-info-desktop h3 {
        font-size: 2rem;
    }

    .ain-support-info-desktop p {
        font-size: 1.4rem;
    }

    .ain-support-info-line {
        display: none;
    }

    .ain-support-info-icon {
        margin-bottom: 0;
    }
}

/*==================================================
RESPONSIVE - 992px
==================================================*/

@media (max-width: 992px) {
    .ain-support-section {
        margin-top: 2.6rem;
    }

    .ain-support-wrapper {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }

    .ain-support-card {
        padding: 2.1rem;
        border-radius: 0.9rem;
    }

    .ain-support-card-featured {
        order: -1;
    }

    .ain-support-header {
        gap: 1.6rem;
        margin-bottom: 1.2rem;
    }

    .ain-support-icon {
        width: 5.6rem;
        height: 5.6rem;
        min-width: 5.6rem;
        border-radius: 1.6rem;
    }

    .ain-support-icon svg {
        width: 2.8rem;
        height: 2.8rem;
    }

    .ain-support-title h3 {
        font-size: 2rem;
    }

    .ain-support-title p {
        font-size: 1.4rem;
    }

    .ain-support-feature {
        padding: 1rem 0;
    }

    .ain-support-feature span:last-child {
        font-size: 1.1rem;
    }

    .ain-support-btn {
        padding: 1rem;
        font-size: 1.1rem;
    }

    .ain-support-info-desktop {
        display: none;
    }

    .ain-support-info-mobile {
        display: block;
    }
}

/*==================================================
RESPONSIVE - 767px
==================================================*/

@media (max-width: 767px) {
    .ain-support-card {
        padding: 1.7rem;
        border-radius: 1.2rem;
    }

    .ain-support-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.1rem;
    }

    .ain-support-title h3 {
        font-size: 1.8rem;
    }

    .ain-support-title p {
        font-size: 1.3rem;
    }

    .ain-support-feature {
        gap: 0.8rem;
        padding: 0.6rem 0;
    }

    .ain-support-check {
        width: 1.8rem;
        height: 1.8rem;
        min-width: 1.8rem;
    }

    .ain-support-check svg {
        width: 0.7rem;
        height: 0.7rem;
    }

    .ain-support-feature span:last-child {
        font-size: 1.1rem;
    }

    .ain-support-badge {
        font-size: 0.6rem;
        padding: 0.3rem 1.1rem;
        top: -1rem;
    }

    .ain-support-btn {
        font-size: 1.3rem;
        padding: 1rem;
        border-radius: 1rem;
    }

    .ain-support-info-mobile {
        padding: 1.2rem;
        border-radius: 1.4rem;
    }

    .ain-support-mobile-content {
        gap: 1.2rem;
        flex-wrap: wrap;
    }

    .ain-support-mobile-icon,
    .ain-support-mobile-service {
        width: 4.4rem;
        height: 4.4rem;
        min-width: 4.4rem;
    }

    .ain-support-mobile-icon svg,
    .ain-support-mobile-service svg {
        width: 2rem;
        height: 2rem;
    }

    .ain-support-mobile-center h3 {
        font-size: 1.6rem;
    }

    .ain-support-mobile-center p {
        font-size: 1.3rem;
    }

    .ain-support-mobile-btn {
        font-size: 1.1rem;
        padding: 1rem;
        border-radius: 1.2rem;
    }
}

/*==================================================
RESPONSIVE - 480px
==================================================*/

@media (max-width: 480px) {
    .ain-support-card {
        padding: 1.4rem;
        border-radius: 0.8rem;
    }

    .ain-support-icon {
        width: 3.8rem;
        height: 3.8rem;
        min-width: 3.8rem;
        border-radius: 1.1rem;
    }

    .ain-support-icon svg {
        width: 2.1rem;
        height: 2.1rem;
    }

    .ain-support-title h3 {
        font-size: 1.4rem;
    }

    .ain-support-title p {
        font-size: 1rem;
    }

    .ain-support-feature span:last-child {
        font-size: 1rem;
    }

    .ain-support-btn {
        font-size: 1.1rem;
        padding: 0.8rem;
    }

    .ain-support-mobile-center h3 {
        font-size: 1.1rem;
    }

    .ain-support-mobile-center p {
        font-size: 1rem;
    }

    .ain-support-mobile-btn {
        font-size: 0.9rem;
        padding: 0.8rem;
    }
}
/*==================================================
CARD BUTTON - EXPLORE SERVICE
==================================================*/

.gbp-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: var(--gbp-secondary-color);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.35s;
    margin-top: 12px;
}

.gbp-card-btn .gbp-card-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.35s;
}

.gbp-card-btn .gbp-card-btn-icon svg {
    width: 8px;
    height: 8px;
}

.gbp-card-btn:hover .gbp-card-btn-icon {
    transform: translateX(2px);
}

/*==================================================
MOBILE RESPONSIVE - BUTTON
==================================================*/

@media (max-width: 767px) {
    .gbp-card-btn {
        font-size: 12px;
        /*padding: 8px 18px;*/
        gap: 8px;
    }

    .gbp-card-btn .gbp-card-btn-icon svg {
        width: 6px;
        height: 6px;
    }
}