/* =========================================================
   SECTION 01
   SAP ACTIVATE METHODOLOGY
========================================================= */
*{
    box-sizing:border-box;
    margin: 0;
    padding: 0;
}

html{
    scroll-behavior:smooth;
}
.sap-activate-section{
    width:100%;
    min-height:530px;

    display:flex;
    align-items:center;

    padding:100px 0;

    background:#111;
    color:#fff;
}

.sap-activate-container{
    width:min(1800px,95%);
    margin:0 auto;

    display:grid;
    grid-template-columns:1fr 1fr;

    gap:100px;
    align-items:center;
}


/* LABEL */

.sap-section-label{
    display:inline-flex;
    align-items:center;

    gap:10px;

    margin-bottom:40px;

    color:#fff;

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

    letter-spacing:1.5px;
}

.sap-section-label b{
    color:#c9ff00;

    font-size:22px;
}


/* LEFT HEADING */

.sap-activate-left h2{
    margin:0;

    color:#fff;

    font-size:58px;
    line-height:.98;

    letter-spacing:-2px;
}

.sap-activate-left h2 strong{
    display:block;

    font-weight:800;
}

.sap-activate-left h2 span{
    display:block;

    font-size:60px;
    font-weight:300;

    letter-spacing:-3px;
}


/* RIGHT */

.sap-activate-right{
    max-width:780px;
}

.sap-activate-right h3{
    margin:0 0 25px;

    color:#fff;

    font-size:29px;
    font-weight:700;
}

.sap-activate-right p{
    margin:0;

    color:#d1d1d1;

    font-size:19px;
    line-height:1.45;
}




/* =========================================================
   SHARED
========================================================= */

*{
    box-sizing:border-box;
}

img{
    max-width:100%;
}

.mt-top-shell{
    width:min(1400px,90%);
    margin:0 auto;
}


/* =========================================================
   SECTION 02 - AI CAPABILITIES
========================================================= */

.mt-capabilities{
    position:relative;
    overflow:hidden;
    padding:118px 0 112px;
    color:#fff;
    background:#000 url("/assets/images/services/AI-Development-images/top-shape.png") no-repeat;
    background-size:cover;
}

.mt-capabilities-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(100px);
    pointer-events:none;
}

.mt-capabilities-glow-a{
    width:600px;
    height:220px;
    left:10%;
    bottom:40px;
    background:rgba(0,255,214,.22);
}

.mt-capabilities-glow-b{
    width:650px;
    height:260px;
    right:8%;
    bottom:60px;
    background:rgba(49,81,255,.3);
}

.mt-capabilities-inner{
    position:relative;
    z-index:2;
}

.mt-capabilities h2{
    max-width:980px;
    margin:0 auto 58px;
    text-align:center;
    color:#fff;
    font-size:clamp(32px,3vw,51px);
    line-height:1.05;
    font-family:Georgia,"Times New Roman",serif;
    font-weight:500;
}

.mt-capabilities h2 span{
    display:block;
    color:#8d9cff;
}

.mt-capabilities-grid{
    max-width:1120px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.mt-capability-item{
    position:relative;
    min-height:180px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:19px;
    border-bottom:1px solid rgba(255,255,255,.28);
}

.mt-capability-item:nth-child(n+5){
    border-bottom:1px solid rgba(255,255,255,.28);
}

.mt-capability-icon{
    width:80px;
    height:80px;
    border-radius:17px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:linear-gradient(
        145deg,
        rgba(45,119,203,.9),
        rgba(28,62,108,.86)
    );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 15px 30px rgba(0,93,255,.2);
    transition:.35s ease;
}

.mt-capability-item:hover .mt-capability-icon{
    transform:translateY(-6px) scale(1.03);
    box-shadow:0 20px 45px rgba(0,218,255,.28);
}

.mt-capability-icon svg{
    width:35px;
    height:35px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.mt-capability-item > span{
    color:#eee;
    font-size:15px;
    font-weight:500;
}

.mt-capabilities-footer{
    max-width:1120px;
    margin:0 auto;
    padding-top:27px;
    text-align:center;
    color:#fff;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(28px,2.6vw,42px);
    line-height:1.1;
}


/* =========================================================
   SECTION 03 - WORK PROCESS
========================================================= */

.mt-process{
    position:relative;
    overflow:hidden;
    min-height:720px;
    padding:96px 0 115px;
    background:#000;
    color:#fff;
}

.mt-process-ribbon{
    position:absolute;
    left:-12%;
    width:125%;
    height:210px;
    border-radius:50%;
    background:linear-gradient(
        180deg,
        rgba(255,255,255,.26),
        rgba(255,255,255,.025) 72%
    );
    filter:blur(.5px);
    opacity:.65;
}

.mt-process-ribbon-1{
    top:-52px;
    transform:rotate(-11deg);
    opacity:.92;
}

.mt-process-ribbon-2{
    top:162px;
    transform:rotate(-18deg);
    opacity:.42;
}

.mt-process-ribbon-3{
    bottom:-35px;
    transform:rotate(-9deg);
    opacity:.26;
}

.mt-process-inner{
    position:relative;
    z-index:2;
}

.mt-process-top{
    display:grid;
    grid-template-columns:56% 44%;
    gap:0;
    align-items:start;
}

.mt-process-image{
    position:relative;
    height:400px;
    margin-left:-28px;
    z-index:3;
}

.mt-process-image-frame{
    width:92%;
    height:100%;
    overflow:hidden;
    border-radius:0 0 48px 0;
    background:#111;
}

.mt-process-image-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:0;
}

.mt-process-image::after,
.mt-process-image-badge{
    display:none !important;
}

.mt-process-copy{
    align-self:start;
    padding:8px 0 0 36px;
}

.mt-process-label{
    display:inline-block;
    margin-bottom:28px;
    color:#fff;
    font-size:13px;
    font-weight:700;
    letter-spacing:1.5px;
}

.mt-process-label b{
    margin-right:10px;
    color:#ff4a16;
    font-weight:800;
}

.mt-process-copy h2{
    max-width:700px;
    margin:0 0 36px;
    font-size:clamp(42px,4vw,66px);
    line-height:.98;
    font-weight:300;
    letter-spacing:-2.8px;
}

.mt-process-copy h2 strong{
    font-weight:700;
}

.mt-process-copy > p{
    max-width:690px;
    margin:0;
    color:#fff;
    font-size:16px;
    line-height:2;
    font-weight:600;
}



/* =========================================================
   DESKTOP WORK PROCESS
========================================================= */

@media(min-width:1101px){

    .mt-process-top{
        grid-template-columns:56% 44%;
        gap:0;
        align-items:stretch;
    }

    .mt-process-image{
        height:auto;
        min-height:100%;
        margin-left:-28px;
        align-self:stretch;
    }

    .mt-process-image-frame{
        width:92%;
        height:100%;
        min-height:610px;
        overflow:hidden;
        border-radius:0 0 48px 0;
    }

    .mt-process-image-frame img{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .mt-process-copy{
        min-width:0;
        padding:8px 0 0 36px;
        display:flex;
        flex-direction:column;
    }

    .mt-process-copy > p{
        margin-bottom:0;
    }

    .mt-process-copy .mt-process-carousel{
        width:100%;
        margin:32px 0 0;
        padding:30px 0 8px;
    }

    .mt-process-copy .mt-process-track{
        width:100%;
        min-width:100%;
        gap:24px;
    }

    .mt-process-copy .mt-process-step{
        flex:0 0 calc((100% - 48px) / 3);
        width:calc((100% - 48px) / 3);
        min-width:0;
        max-width:none;
        margin-right:0 !important;
        padding:62px 8px 0 0;
    }

    .mt-process-copy .mt-process-step h3{
        margin-bottom:18px;
        font-size:18px;
        line-height:1.25;
    }

    .mt-process-copy .mt-process-step p{
        max-width:none;
        font-size:12.5px;
        line-height:1.75;
    }

    .mt-process-copy .mt-step-number{
        top:-24px;
        width:52px;
        height:52px;
        font-size:18px;
    }
}


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

@media(max-width:1100px){

    .mt-process-top{
        grid-template-columns:1fr 1fr;
    }

    .mt-process-image{
        height:350px;
        margin-left:0;
    }

    .mt-process-copy .mt-process-carousel{
        width:100%;
        margin:45px 0 0;
    }

    .mt-process-copy .mt-process-track{
        gap:22px;
    }

    .mt-process-copy .mt-process-step{
        flex:0 0 calc((100% - 22px) / 2);
        width:calc((100% - 22px) / 2);
        min-width:0;
        max-width:none;
        margin-right:0 !important;
    }
}


/* =========================================================
   991px
========================================================= */

@media(max-width:991px){

    .mt-capabilities{
        padding:90px 0;
    }

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

    .mt-process{
        padding:90px 0;
    }

    .mt-process-top{
        gap:45px;
    }
}


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

@media(max-width:767px){

    .mt-top-shell{
        width:88%;
    }

    /* SECTION 02 */

    .mt-capabilities{
        padding:76px 0 82px;
    }

    .mt-capabilities h2{
        margin-bottom:42px;
        font-size:32px;
    }

    .mt-capability-item{
        min-height:150px;
    }

    .mt-capability-icon{
        width:68px;
        height:68px;
        border-radius:15px;
    }

    .mt-capability-icon svg{
        width:30px;
        height:30px;
    }

    .mt-capabilities-footer{
        padding-top:23px;
        font-size:28px;
    }


    /* SECTION 03 */

    .mt-process{
        min-height:auto;
        padding:70px 0 85px;
    }

    .mt-process-top{
        grid-template-columns:1fr;
        gap:35px;
    }

    .mt-process-image{
        height:300px;
    }

    .mt-process-image-frame{
        width:100%;
        border-radius:0 0 34px 0;
    }

    .mt-process-copy{
        padding:0;
    }

    .mt-process-copy h2{
        font-size:42px !important;
    }

    .mt-process-copy p{
        font-size:14px;
        line-height:1.75;
    }

    .mt-process-copy .mt-process-carousel{
        width:100%;
        margin-top:28px;
        padding-top:30px;
    }

    .mt-process-copy .mt-process-track{
        gap:18px;
    }

    .mt-process-copy .mt-process-step{
        flex:0 0 86%;
        width:86%;
        min-width:86%;
        margin-right:0 !important;
    }

    .mt-process-step h3{
        font-size:23px;
    }
}


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

@media(max-width:480px){

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

    .mt-capability-item{
        min-height:138px;
    }

    .mt-capability-icon{
        width:60px;
        height:60px;
    }

    .mt-capability-item > span{
        font-size:13px;
    }
}




/* =========================================================
   SECTION 04 - DOUBLE IMAGE SHOWCASE
========================================================= */

.mt-double-showcase{
    position:relative;
    z-index:10;
    width:90%;
    padding:0 0 90px;
    background:#fff;
    margin: 0 auto;
}

/* Section 3 ke upar overlap */
.mt-double-showcase-inner{
    position:relative;
    width:min(1820px,99%);
    margin:-75px auto 0;

    display:grid;
    grid-template-columns:1fr 1fr;

    overflow:hidden;
}

/* IMAGE BOX */

.mt-showcase-image{
    position:relative;
    /* height:580px; */
    overflow:hidden;
}

.mt-showcase-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}


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

@media(max-width:991px){

    .mt-double-showcase-inner{
        width:94%;
        margin-top:-55px;
    }

    .mt-showcase-image{
        height:420px;
    }

}


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

@media(max-width:767px){

    .mt-double-showcase{
        padding-bottom:60px;
    }

    .mt-double-showcase-inner{
        width:88%;
        margin-top:-40px;
        grid-template-columns:1fr;
    }

    .mt-showcase-image{
        height:320px;
    }

}


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

@media(max-width:480px){

    .mt-showcase-image{
        height:260px;
    }

}

/* Related SAP page button */
.sap-related-link{display:inline-flex;align-items:center;gap:12px;margin-top:24px;padding:13px 22px;border-radius:999px;background:#153d70;color:#fff;text-decoration:none;font-size:14px;font-weight:700;transition:transform .25s ease,background .25s ease,box-shadow .25s ease;box-shadow:0 10px 24px rgba(21,61,112,.15)}
.sap-related-link span{font-size:18px;transition:transform .25s ease}
.sap-related-link:hover{background:#0d315f;transform:translateY(-2px);box-shadow:0 14px 30px rgba(21,61,112,.22)}
.sap-related-link:hover span{transform:translate(2px,-2px)}