/* =========================================================
   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;
}



/* =========================================================
   SECTION 02
   WORK PROCESS
========================================================= */

.mt-process{
    position:relative;

    width:100%;

    overflow:hidden;

    padding:50px 0;

    background:#000;
    color:#fff;
}


/* =========================================================
   BACKGROUND RIBBONS
========================================================= */

.mt-process-ribbon{
    position:absolute;

    left:-10%;

    width:125%;
    height:170px;

    border-radius:50%;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.18),
            rgba(255,255,255,.015)
        );

    transform:rotate(-10deg);
}

.mt-process-ribbon-1{
    top:-20px;

    opacity:.65;
}

.mt-process-ribbon-2{
    top:250px;

    transform:rotate(-15deg);

    opacity:.32;
}

.mt-process-ribbon-3{
    bottom:-10px;

    transform:rotate(-8deg);

    opacity:.18;
}



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

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

    width:min(1800px,97%);
    margin:0 auto;

    display:grid;

    grid-template-columns:48% 52%;

    align-items:stretch;
}


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

.mt-process-image{
    min-height:790px;

    overflow:hidden;

    border-radius:0 0 55px 0;

    background:#111;
}

.mt-process-image img{
    width:100%;
    height:100%;

    min-height:790px;

    display:block;

    object-fit:cover;
}



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

.mt-process-right{
    min-width:0;

    padding:

        20px
        0
        25px
        110px;

    display:flex;
    flex-direction:column;
}


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

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

.mt-process-label{
    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:30px;

    color:#fff;

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

    letter-spacing:1.4px;
}

.mt-process-label b{
    color:#ff4100;

    font-size:18px;
}


/* HEADING */

.mt-process-copy h2{
    margin:0 0 40px;

    color:#fff;

    font-size:73px;
    line-height:.95;

    font-weight:300;

    letter-spacing:-4px;
}

.mt-process-copy h2 strong{
    display:block;

    font-weight:700;
}

.mt-process-copy h2 span{
    display:block;

    font-weight:300;
}


/* DESCRIPTION */

.mt-process-copy > p{
    max-width:720px;

    margin:0;

    color:#fff;

    font-size:17px;
    line-height:2;

    font-weight:600;
}



/* =========================================================
   PROCESS CAROUSEL
========================================================= */

.mt-process-carousel{
    width:100%;

    margin-top:45px;

    overflow-x:auto;
    overflow-y:hidden;

    scrollbar-width:none;

    cursor:grab;

    user-select:none;

    touch-action:pan-y;

    scroll-snap-type:x mandatory;

    scroll-behavior:smooth;
}

.mt-process-carousel::-webkit-scrollbar{
    display:none;
}

.mt-process-carousel.is-dragging{
    cursor:grabbing;

    scroll-snap-type:none;

    scroll-behavior:auto;
}


/* TRACK */

.mt-process-track{
    display:flex;

    width:max-content;
    padding-top: 30px;

    gap:28px;
}



/* =========================================================
   SINGLE PROCESS STEP
========================================================= */

.mt-process-step{
    position:relative;

    flex:0 0 calc((52vw - 165px) / 3);

    min-width:250px;

    padding:

        72px
        12px
        0
        0;

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

    scroll-snap-align:start;
}


/* NUMBER */

.mt-step-number{
    position:absolute;

    top:-29px;
    left:0;

    width:60px;
    height:60px;

    display:flex;

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

    border-radius:50%;

    background:#343434;

    color:#fff;

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


/* STEP TITLE */

.mt-process-step h3{
    margin:0 0 24px;

    color:#fff;

    font-size:22px;
    line-height:1.2;

    font-weight:700;
}


/* STEP TEXT */

.mt-process-step p{
    max-width:250px;

    margin:0;

    color:#fff;

    font-size:14px;
    line-height:1.75;

    font-weight:600;
}



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

@media(max-width:1100px){

    .sap-activate-container{
        gap:60px;
    }

    .sap-activate-left h2{
        font-size:48px;
    }

    .sap-activate-left h2 span{
        font-size:50px;
    }


    .mt-process-container{
        width:92%;

        grid-template-columns:1fr;
    }

    .mt-process-image{
        min-height:500px;

        border-radius:0 0 40px 0;
    }

    .mt-process-image img{
        min-height:500px;
    }

    .mt-process-right{
        padding:

            60px
            0
            40px;
    }

    .mt-process-step{
        flex-basis:
            calc((92vw - 28px) / 2);
    }

}



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

@media(max-width:767px){

    /* SAP SECTION */

    .sap-activate-section{
        min-height:auto;

        padding:75px 0;
    }

    .sap-activate-container{
        width:88%;

        grid-template-columns:1fr;

        gap:60px;
    }

    .sap-activate-left h2{
        font-size:40px;
    }

    .sap-activate-left h2 span{
        font-size:41px;
    }

    .sap-activate-right h3{
        font-size:26px;
    }

    .sap-activate-right p{
        font-size:16px;

        line-height:1.7;
    }


    /* WORK PROCESS */

    .mt-process-container{
        width:88%;
    }

    .mt-process-image{
        min-height:380px;

        border-radius:0 0 32px 0;
    }

    .mt-process-image img{
        min-height:380px;
    }

    .mt-process-right{
        padding-top:45px;
    }

    .mt-process-copy h2{
        font-size:44px;

        letter-spacing:-2px;
    }

    .mt-process-copy > p{
        font-size:14px;

        line-height:1.8;
    }

    .mt-process-carousel{
        margin-top:55px;
    }

    .mt-process-track{
        gap:20px;
    }

    .mt-process-step{
        flex:0 0 82vw;

        min-width:82vw;
    }

}





/* =========================================================
   SAP GOALS SECTION
========================================================= */

.sap-goals-section{
    position:relative;
    overflow:hidden;
    padding:110px 0 95px;
    background:#000;
    color:#fff;
    isolation:isolate;
}

.sap-goals-container{
    position:relative;
    z-index:3;
    width:min(1820px, 96%);
    margin:0 auto;
    display:grid;
    grid-template-columns:1.25fr 1fr 1fr 1fr;
    gap:38px;
    align-items:start;
}

/* =========================================================
   BACKGROUND SHAPE PNG
   replace image path below
========================================================= */

.sap-goals-shape{
    position:absolute;
    inset:0;
    z-index:1;
    background-image:url("/assets/images/services/AI-Development-images/top-shape.png");
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    opacity:.45;
    pointer-events:none;
    background-attachment:fixed;
}

/* =========================================================
   GLOW EFFECTS
========================================================= */

.sap-goals-glow{
    position:absolute;
    z-index:0;
    border-radius:50%;
    filter:blur(90px);
    pointer-events:none;
}

.sap-goals-glow-left{
    left:-140px;
    bottom:-60px;
    width:420px;
    height:420px;
    background:rgba(0, 255, 213, .55);
}

.sap-goals-glow-top{
    top:-130px;
    left:50%;
    transform:translateX(-50%);
    width:760px;
    height:250px;
    background:rgba(73, 98, 255, .65);
}

.sap-goals-glow-right{
    right:-120px;
    top:120px;
    width:420px;
    height:420px;
    background:rgba(0, 255, 213, .52);
}

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

.sap-goals-heading{
    padding-top:165px;
}

.sap-goals-heading h2{
    margin:0;
    font-size:clamp(42px, 4vw, 68px);
    line-height:.95;
    letter-spacing:-2.5px;
    font-weight:400;
    color:#fff;
}

.sap-goals-heading h2 strong{
    font-weight:800;
}

.sap-goals-heading h2 span{
    display:block;
    font-weight:300;
}

/* =========================================================
   GOAL ITEMS
========================================================= */

.sap-goal-item{
    position:relative;
    padding-top:120px;
}

.sap-goal-number{
    width:60px;
    height:60px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:48px;
    background:rgba(255,255,255,.14);
    color:#fff;
    font-size:22px;
    font-weight:700;
    backdrop-filter:blur(6px);
}

.sap-goal-item h3{
    margin:0 0 24px;
    color:#fff;
    font-size:26px;
    line-height:1.2;
    font-weight:700;
}

.sap-goal-item p{
    max-width:360px;
    margin:0;
    color:#e8e8e8;
    font-size:16px;
    line-height:1.9;
    font-weight:500;
}

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

@media(max-width:1200px){
    .sap-goals-container{
        grid-template-columns:1fr 1fr;
        gap:50px 40px;
    }

    .sap-goals-heading{
        padding-top:40px;
    }

    .sap-goal-item{
        padding-top:20px;
    }
}

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

@media(max-width:767px){
    .sap-goals-section{
        padding:80px 0 70px;
    }

    .sap-goals-container{
        width:88%;
        grid-template-columns:1fr;
        gap:35px;
    }

    .sap-goals-heading{
        padding-top:0;
    }

    .sap-goals-heading h2{
        font-size:42px;
        letter-spacing:-1.8px;
    }

    .sap-goal-item{
        padding-top:0;
    }

    .sap-goal-number{
        width:54px;
        height:54px;
        margin-bottom:28px;
        font-size:20px;
    }

    .sap-goal-item h3{
        font-size:24px;
        margin-bottom:16px;
    }

    .sap-goal-item p{
        font-size:15px;
        line-height:1.75;
    }

    .sap-goals-shape{
        background-position:center top;
        background-size:cover;
        opacity:.35;
    }
}












/* =========================================================
   CORE FUNCTION OF SAP OPERATIONS
========================================================= */

.sap-core-section{
    position:relative;
    overflow:hidden;

    min-height:740px;

    display:flex;
    align-items:center;

    padding:100px 0;

    background:#fff;
    color:#000;
}


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

.sap-core-bg{
    position:absolute;
    inset:0;

    z-index:0;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.095),
            rgba(255, 255, 255, 0.082)
        ),
        url("/assets/images/services/AI-Development-images/bottom-shape.png");

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

    /* opacity:; */

    pointer-events:none;
    background-attachment:fixed;
}


/* optional extra white wash */
.sap-core-section::after{
    content:"";

    position:absolute;
    inset:0;

    z-index:1;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.18),
            rgba(255,255,255,.08)
        );

    pointer-events:none;
}


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

.sap-core-container{
    position:relative;
    z-index:2;

    width:min(1820px,96%);
    margin:0 auto;

    display:grid;

    grid-template-columns:
        1.35fr
        .85fr
        .85fr
        .85fr;

    gap:70px;

    align-items:center;
}


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

.sap-core-heading h2{
    margin:0;

    color:#000;

    font-size:clamp(46px,4vw,68px);
    line-height:.95;

    letter-spacing:-3px;

    font-weight:400;
}

.sap-core-heading h2 strong{
    font-weight:800;
}

.sap-core-heading h2 span{
    display:block;

    margin-top:6px;

    font-weight:300;
}


/* =========================================================
   ITEMS
========================================================= */

.sap-core-item{
    align-self:start;

    padding-top:20px;
}


/* NUMBER */

.sap-core-number{
    display:block;

    margin-bottom:72px;

    color:#111;

    font-size:27px;
    font-weight:400;
}


/* TITLE */

.sap-core-item h3{
    margin:0 0 28px;

    color:#111;

    font-size:27px;
    line-height:1.2;

    font-weight:700;
}


/* DESCRIPTION */

.sap-core-item p{
    max-width:310px;

    margin:0;

    color:#191919;

    font-size:16px;
    line-height:2;

    font-weight:400;
}


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

@media(max-width:1200px){

    .sap-core-container{
        grid-template-columns:1fr 1fr;

        gap:70px 50px;
    }

    .sap-core-heading{
        grid-column:1 / -1;
    }

    .sap-core-heading h2{
        max-width:650px;
    }

    .sap-core-number{
        margin-bottom:35px;
    }

}


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

@media(max-width:767px){

    .sap-core-section{
        min-height:auto;

        padding:80px 0;
    }

    .sap-core-container{
        width:88%;

        grid-template-columns:1fr;

        gap:55px;
    }

    .sap-core-heading{
        grid-column:auto;
    }

    .sap-core-heading h2{
        font-size:42px;

        letter-spacing:-2px;
    }

    .sap-core-item{
        padding-top:0;
    }

    .sap-core-number{
        margin-bottom:24px;

        font-size:24px;
    }

    .sap-core-item h3{
        margin-bottom:16px;

        font-size:24px;
    }

    .sap-core-item p{
        max-width:100%;

        font-size:15px;
        line-height:1.8;
    }

    .sap-core-bg{
        opacity:.55;
    }

}