/* =====================================================
   SERVICE UNIVERSE HERO
   FINAL NO OVERLAP VERSION
===================================================== */


.sk-service-universe-section {

    position: relative;

    height: 500px;
    margin-top: 7%;

    overflow: hidden;

    padding: 60px 0;


    background:

        radial-gradient(circle at 70% 50%,
            rgba(14, 165, 233, .25),
            transparent 35%),

        linear-gradient(135deg,
            #050b18,
            #101f3d);


    color: white;

}






/* GLOW */

.sk-service-universe-section::before {

    content: "";

    position: absolute;

    width: 600px;

    height: 600px;

    border-radius: 50%;

    background:

        radial-gradient(circle,
            rgba(56, 189, 248, .20),
            transparent 70%);


    right: 5%;

    top: 50%;

    transform: translateY(-50%);


    animation:
        universeGlow 7s infinite alternate;

}




@keyframes universeGlow {


    from {

        scale: 1;

    }


    to {

        scale: 1.15;

    }

}









/* CONTAINER */


.sk-service-universe-container {


    max-width: 1300px;

    height: 100%;

    padding: 0 20px;

    margin: auto;


    display: flex;

    align-items: center;

    gap: 40px;

    position: relative;

    z-index: 2;

}









/* LEFT CONTENT */


.sk-service-universe-heading {


    width: 40%;

}



.sk-service-universe-heading span {


    color: #38bdf8;

    font-size: 13px;

    letter-spacing: 4px;

    font-weight: 800;

}





.sk-service-universe-heading h1 {


    font-size: 52px;

    line-height: 1.1;

    font-weight: 900;

    margin: 20px 0;


}




.sk-service-universe-heading strong {


    display: block;


    background:

        linear-gradient(90deg,
            #38bdf8,
            #d4af37);


    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}







.sk-service-universe-heading p {


    color: #cbd5e1;


    font-size: 16px;


    line-height: 28px;


    max-width: 480px;

}









/* BUTTON */


.sk-service-universe-btn {


    display: inline-flex;

    gap: 10px;

    align-items: center;


    margin-top: 25px;


    padding: 14px 32px;


    border-radius: 50px;


    background:

        linear-gradient(135deg,
            #0ea5e9,
            #2563eb);


    color: white;


    text-decoration: none;


    font-weight: 700;


}









/* RIGHT UNIVERSE AREA */


.sk-service-universe-wrapper {


    width: 60%;


    height: 560px;


    position: relative;


}









/* CENTER HUB */


.sk-service-universe-center {


    position: absolute;


    top: 50%;

    left: 50%;


    transform:

        translate(-50%, -50%);



    width: 180px;


    height: 180px;


    border-radius: 50%;


    display: flex;


    align-items: center;


    justify-content: center;



    background:

        linear-gradient(135deg,
            #0ea5e9,
            #2563eb);


    box-shadow:

        0 0 80px rgba(14, 165, 233, .7);


    animation:

        hubPulse 4s infinite;


}







.sk-service-universe-logo {


    width: 130px;


    height: 130px;


    border-radius: 50%;


    background: #050b18;


    display: flex;


    flex-direction: column;


    justify-content: center;


    align-items: center;


}





.sk-service-universe-logo i {


    color: #d4af37;

    font-size: 25px;

}



.sk-service-universe-logo h2 {


    margin: 5px 0;

    font-size: 25px;

}



.sk-service-universe-logo span {


    color: #38bdf8;

    font-size: 10px;

    letter-spacing: 3px;

}





@keyframes hubPulse {


    50% {

        scale: 1.08;

    }

}









/* SERVICE CARDS */


.sk-service-universe-card {


    position: absolute;


    width: 190px;


    padding: 20px;


    border-radius: 25px;


    background:

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


    border:

        1px solid rgba(255, 255, 255, .18);



    backdrop-filter: blur(15px);


    transition: .4s;


    animation:

        cardFloat 5s infinite ease-in-out;


}




.sk-service-universe-card:hover {


    background:

        rgba(56, 189, 248, .20);


    transform:

        translateY(-10px);

}





.service-card-icon {


    width: 45px;


    height: 45px;


    border-radius: 15px;


    display: flex;


    align-items: center;


    justify-content: center;


    background:

        linear-gradient(135deg,
            #0ea5e9,
            #2563eb);


}





.sk-service-universe-card h3 {


    font-size: 16px;

    margin: 12px 0 8px;


}





.sk-service-universe-card p {


    color: #cbd5e1;

    font-size: 13px;

    line-height: 22px;

}







@keyframes cardFloat {


    50% {

        translate: 0 -10px;

    }

}









/* CARD POSITIONS */


/* TOP */


.card-top {


    top: 20px;

    left: 50%;


    transform: translateX(-50%);


}




/* LEFT */


.card-left {


    left: 0;


    top: 50%;


    transform: translateY(-50%);


}





/* RIGHT */


.card-right {


    right: 0;


    top: 50%;


    transform: translateY(-50%);


}






/* BOTTOM LEFT */


.card-bottom {


    bottom: 20px;


    left: 15%;


}






/* BOTTOM RIGHT */


.card-bottom-right {


    bottom: 20px;


    right: 15%;


}









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


@media(max-width:1100px) {



    .sk-service-universe-section {


        height: auto;

        padding: 90px 0;

    }




    .sk-service-universe-container {


        flex-direction: column;


    }



    .sk-service-universe-heading {


        width: 100%;

        text-align: center;

    }




    .sk-service-universe-wrapper {


        width: 100%;


        max-width: 700px;


    }




    .sk-service-universe-heading p {


        margin: auto;


    }

}





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


@media(max-width:768px) {



    .sk-service-universe-section {


        overflow: visible;

    }




    .sk-service-universe-heading h1 {


        font-size: 36px;


    }





    .sk-service-universe-wrapper {


        height: auto;


        display: flex;


        flex-direction: column;


        align-items: center;


        gap: 25px;


    }



    .sk-service-universe-center {


        position: relative;


        top: auto;

        left: auto;


        transform: none;


        margin-bottom: 20px;


    }



    .sk-service-universe-card {


        position: relative;


        inset: auto;


        width: 100%;


        max-width: 320px;


    }





    .card-top,
    .card-left,
    .card-right,
    .card-bottom,
    .card-bottom-right {


        transform: none;


    }



}


















/* =====================================================
   SERVICES EXPERTISE SECTION CSS
   PREMIUM SERVICE CARDS
===================================================== */


.sk-service-expertise-section {


    position: relative;


    padding: 50px 0;


    background:


        linear-gradient(180deg,
            #ffffff,
            #f5fbff);


    overflow: hidden;


}








/* BACKGROUND EFFECT */


.sk-service-expertise-section::before {


    content: "";


    position: absolute;


    width: 500px;


    height: 500px;


    border-radius: 50%;


    background:


        radial-gradient(circle,
            rgba(14, 165, 233, .15),
            transparent 70%);


    top: -200px;


    right: -150px;


}








.sk-service-expertise-container {


    max-width: 1250px;


    padding: 0 20px;


    margin: auto;


    position: relative;


    z-index: 2;


}









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


.sk-service-expertise-heading {


    max-width: 850px;


    text-align: center;


    margin: 0 auto 70px;


}





.sk-service-expertise-heading span {


    color: #0284c7;


    font-size: 13px;


    letter-spacing: 4px;


    font-weight: 800;


}







.sk-service-expertise-heading h2 {


    font-size: 55px;


    line-height: 1.15;


    font-weight: 900;


    color: #0f172a;


    margin: 20px 0;


}







.sk-service-expertise-heading h2 strong {


    display: block;


    background:


        linear-gradient(90deg,
            #0ea5e9,
            #d4af37);


    -webkit-background-clip: text;


    -webkit-text-fill-color: transparent;


}







.sk-service-expertise-heading p {


    color: #64748b;


    font-size: 17px;


    line-height: 30px;


}









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


.sk-service-expertise-grid {


    display: grid;


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


    gap: 30px;


}









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


.sk-service-expertise-card {


    position: relative;


    padding: 35px;


    border-radius: 30px;


    background: white;


    border: 1px solid #e5f3ff;


    box-shadow:


        0 20px 50px rgba(14, 165, 233, .08);


    transition: .5s;


    overflow: hidden;


}








/* CARD GLOW */


.sk-service-expertise-card::before {


    content: "";


    position: absolute;


    width: 100px;


    height: 100px;


    border-radius: 50%;


    background:


        rgba(14, 165, 233, .12);


    top: -50px;


    right: -50px;


    transition: .5s;


}







.sk-service-expertise-card:hover::before {


    transform: scale(4);


}








.sk-service-expertise-card:hover {


    transform: translateY(-15px);


    box-shadow:


        0 35px 80px rgba(14, 165, 233, .18);


}









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


.sk-service-expertise-icon {


    width: 70px;


    height: 70px;


    border-radius: 22px;


    display: flex;


    align-items: center;


    justify-content: center;


    background:


        linear-gradient(135deg,
            #0ea5e9,
            #2563eb);


    color: white;


    font-size: 28px;


    margin-bottom: 25px;


    position: relative;


    z-index: 2;


    box-shadow:


        0 15px 35px rgba(14, 165, 233, .35);


    transition: .4s;


}







.sk-service-expertise-card:hover .sk-service-expertise-icon {


    transform: rotate(10deg) scale(1.1);


}









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


.sk-service-expertise-card h3 {


    font-size: 24px;


    color: #0f172a;


    font-weight: 800;


    margin-bottom: 15px;


    position: relative;


    z-index: 2;


}







.sk-service-expertise-card p {


    color: #64748b;


    font-size: 15px;


    line-height: 27px;


    margin-bottom: 25px;


    position: relative;


    z-index: 2;


}









/* LINK */


.sk-service-expertise-card a {


    display: inline-flex;


    align-items: center;


    gap: 10px;


    text-decoration: none;


    color: #0284c7;


    font-weight: 700;


    position: relative;


    z-index: 2;


    transition: .3s;


}







.sk-service-expertise-card a:hover {


    gap: 15px;


    color: #d4af37;


}









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


.sk-service-expertise-card {


    animation:


        skExpertiseFloat 6s infinite ease-in-out;


}



.sk-service-expertise-card:nth-child(2),
.sk-service-expertise-card:nth-child(5) {


    animation-delay: 1s;


}




.sk-service-expertise-card:nth-child(3),
.sk-service-expertise-card:nth-child(6) {


    animation-delay: 2s;


}





@keyframes skExpertiseFloat {


    0%,
    100% {


        transform: translateY(0);


    }


    50% {


        transform: translateY(-8px);


    }


}









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


@media(max-width:1000px) {


    .sk-service-expertise-grid {


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


    }


}









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


@media(max-width:650px) {


    .sk-service-expertise-section {


        padding: 80px 0;


    }



    .sk-service-expertise-heading h2 {


        font-size: 36px;


    }



    .sk-service-expertise-heading p {


        font-size: 15px;


    }



    .sk-service-expertise-grid {


        grid-template-columns: 1fr;


    }



    .sk-service-expertise-card {


        padding: 28px;


    }



    .sk-service-expertise-card h3 {


        font-size: 21px;


    }


}














/* =====================================================
   INFLUENCE CONTROL ROOM CSS
   FUTURISTIC DASHBOARD STYLE
===================================================== */


.sk-control-room-section {


    position: relative;


    padding: 120px 0;


    background:


        radial-gradient(circle at center,
            rgba(14, 165, 233, .18),
            transparent 35%),


        linear-gradient(135deg,
            #050b18,
            #0b1d36);


    overflow: hidden;


    color: white;


}









/* BACKGROUND GLOW */


.sk-control-room-section::before {


    content: "";


    position: absolute;


    width: 600px;


    height: 600px;


    border-radius: 50%;


    background:


        radial-gradient(circle,
            rgba(56, 189, 248, .20),
            transparent 70%);


    top: 50%;


    left: 50%;


    transform: translate(-50%, -50%);


    animation:


        controlGlow 8s infinite alternate;


}







@keyframes controlGlow {


    from {

        scale: 1;

        opacity: .5;

    }


    to {

        scale: 1.2;

        opacity: 1;

    }


}









/* CONTAINER */


.sk-control-room-container {


    max-width: 1250px;


    padding: 0 20px;


    margin: auto;


    position: relative;


    z-index: 2;


}









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


.sk-control-room-heading {


    text-align: center;


    max-width: 800px;


    margin: 0 auto 70px;


}





.sk-control-room-heading span {


    color: #38bdf8;


    font-size: 13px;


    letter-spacing: 4px;


    font-weight: 800;


}







.sk-control-room-heading h2 {


    margin: 20px 0;


    font-size: 58px;


    line-height: 1.1;


    font-weight: 900;


}







.sk-control-room-heading h2 strong {


    display: block;


    background:


        linear-gradient(90deg,
            #38bdf8,
            #d4af37);


    -webkit-background-clip: text;


    -webkit-text-fill-color: transparent;


}







.sk-control-room-heading p {


    color: #cbd5e1;


    font-size: 17px;


    line-height: 30px;


}









/* ===============================
   CONTROL PANEL
================================ */


.sk-control-room-panel {


    position: relative;


    height: 620px;


    border-radius: 40px;


    background:


        rgba(255, 255, 255, .06);


    border:


        1px solid rgba(255, 255, 255, .15);


    backdrop-filter: blur(20px);


    box-shadow:


        0 40px 100px rgba(0, 0, 0, .35);


    overflow: hidden;


}









/* GRID EFFECT */


.sk-control-room-panel::before {


    content: "";


    position: absolute;


    inset: 0;


    background-image:


        linear-gradient(rgba(255, 255, 255, .04) 1px,
            transparent 1px),


        linear-gradient(90deg,
            rgba(255, 255, 255, .04) 1px,
            transparent 1px);


    background-size: 40px 40px;


    opacity: .4;


}









/* ===============================
   STATUS BAR
================================ */


.sk-control-status {


    position: absolute;


    top: 25px;


    left: 30px;


    right: 30px;


    display: flex;


    justify-content: space-between;


    color: #cbd5e1;


    font-size: 13px;


    z-index: 3;


}







.online-dot {


    display: inline-block;


    width: 10px;


    height: 10px;


    border-radius: 50%;


    background: #22c55e;


    margin-right: 8px;


    box-shadow:


        0 0 15px #22c55e;


}









/* ===============================
   CORE
================================ */


.sk-control-core {


    position: absolute;


    top: 50%;


    left: 50%;


    transform: translate(-50%, -50%);


    width: 220px;


    height: 220px;


    border-radius: 50%;


    display: flex;


    justify-content: center;


    align-items: center;


    background:


        linear-gradient(135deg,
            #0ea5e9,
            #2563eb);


    box-shadow:


        0 0 90px rgba(14, 165, 233, .8);


    animation:


        corePulse 4s infinite;


}





.core-inner {


    width: 160px;


    height: 160px;


    border-radius: 50%;


    background: #050b18;


    display: flex;


    flex-direction: column;


    justify-content: center;


    align-items: center;


}





.core-inner i {


    font-size: 35px;


    color: #d4af37;


}





.core-inner h3 {


    margin: 8px 0 0;


    font-size: 28px;


}





.core-inner span {


    font-size: 11px;


    color: #38bdf8;


    letter-spacing: 3px;


}





@keyframes corePulse {


    50% {

        scale: 1.08;

    }

}









/* ===============================
   MODULES
================================ */


.sk-control-module {


    position: absolute;


    width: 260px;


    padding: 25px;


    border-radius: 25px;


    background:


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


    border:


        1px solid rgba(255, 255, 255, .15);


    backdrop-filter: blur(15px);


    display: flex;


    gap: 15px;


    align-items: center;


    transition: .4s;


}





.sk-control-module:hover {


    background:


        rgba(56, 189, 248, .18);


    transform: translateY(-10px);


}







.module-icon {


    width: 55px;


    height: 55px;


    border-radius: 18px;


    display: flex;


    align-items: center;


    justify-content: center;


    background:


        linear-gradient(135deg,
            #0ea5e9,
            #2563eb);


}







.module-icon i {


    font-size: 22px;


}







.sk-control-module h3 {


    font-size: 17px;


    margin: 0 0 8px;


}







.sk-control-module p {


    margin: 0;


    color: #cbd5e1;


    font-size: 13px;


}







.sk-control-module strong {


    color: #38bdf8;


    font-size: 25px;


}









/* MODULE POSITION */


.module-creator {


    top: 120px;


    left: 50px;


}



.module-brand {


    top: 120px;


    right: 50px;


}



.module-content {


    bottom: 120px;


    left: 50px;


}



.module-analysis {


    bottom: 120px;


    right: 50px;


}









/* ===============================
   METRICS
================================ */


.sk-control-metrics {


    position: absolute;


    bottom: 30px;


    left: 50%;


    transform: translateX(-50%);


    display: flex;


    gap: 60px;


    z-index: 3;


}





.sk-control-metrics div {


    text-align: center;


}





.sk-control-metrics span {


    display: block;


    color: #94a3b8;


    font-size: 13px;


}





.sk-control-metrics strong {


    font-size: 30px;


    color: #38bdf8;


}









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


@media(max-width:1000px) {


    .sk-control-room-panel {


        height: 850px;


    }



    .sk-control-module {


        width: 220px;


    }



    .module-creator {

        left: 20px;

    }



    .module-brand {

        right: 20px;

    }



    .module-content {

        left: 20px;

    }



    .module-analysis {

        right: 20px;

    }



}









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


@media(max-width:700px) {


    .sk-control-room-section {


        padding: 80px 0;


    }



    .sk-control-room-heading h2 {


        font-size: 38px;


    }



    .sk-control-room-panel {


        height: auto;


        padding: 40px 20px;


        display: flex;


        flex-direction: column;


        gap: 25px;


    }



    .sk-control-status {


        position: relative;


        top: auto;


        left: auto;


        right: auto;


    }



    .sk-control-core {


        position: relative;


        top: auto;


        left: auto;


        transform: none;


        margin: 40px auto;


    }



    .sk-control-module {


        position: relative;


        inset: auto;


        width: 100%;


    }



    .sk-control-metrics {


        position: relative;


        transform: none;


        left: auto;


        bottom: auto;


        flex-direction: column;


        gap: 20px;


    }


}



/* =====================================================
   INFLUENCE CONTROL ROOM
   PREMIUM LIGHT THEME VERSION
===================================================== */


.sk-control-room-section {

    position: relative;

    padding: 50px 0;

    background:

        radial-gradient(circle at 50% 0%,
            rgba(14, 165, 233, .18),
            transparent 35%),

        linear-gradient(180deg,
            #ffffff,
            #f4faff);

    overflow: hidden;

    color: #0f172a;

}








/* BACKGROUND EFFECT */

.sk-control-room-section::before {

    content: "";

    position: absolute;

    width: 650px;

    height: 650px;

    border-radius: 50%;


    background:

        radial-gradient(circle,
            rgba(14, 165, 233, .15),
            transparent 70%);


    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);


    animation:

        skControlGlow 8s infinite alternate;

}




@keyframes skControlGlow {


    from {

        scale: 1;

        opacity: .5;

    }


    to {

        scale: 1.2;

        opacity: 1;

    }

}








/* CONTAINER */


.sk-control-room-container {


    max-width: 1250px;

    padding: 0 20px;

    margin: auto;

    position: relative;

    z-index: 2;


}









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


.sk-control-room-heading {


    max-width: 850px;

    text-align: center;

    margin: 0 auto 70px;


}





.sk-control-room-heading span {


    color: #0284c7;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 4px;


}






.sk-control-room-heading h2 {


    font-size: 58px;

    line-height: 1.1;

    font-weight: 900;

    color: #0f172a;

    margin: 20px 0;


}







.sk-control-room-heading h2 strong {


    display: block;


    background:

        linear-gradient(90deg,
            #0ea5e9,
            #d4af37);


    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;


}







.sk-control-room-heading p {


    color: #64748b;

    font-size: 17px;

    line-height: 30px;


}









/* ===============================
   MAIN DASHBOARD PANEL
================================ */


.sk-control-room-panel {


    position: relative;


    height: 620px;


    border-radius: 40px;


    background:


        rgba(255, 255, 255, .75);



    border:

        1px solid rgba(14, 165, 233, .15);



    backdrop-filter: blur(25px);



    box-shadow:


        0 40px 100px rgba(14, 165, 233, .15);



    overflow: hidden;


}









/* GRID */

.sk-control-room-panel::before {


    content: "";


    position: absolute;


    inset: 0;


    background-image:


        linear-gradient(rgba(14, 165, 233, .08) 1px,
            transparent 1px),


        linear-gradient(90deg,
            rgba(14, 165, 233, .08) 1px,
            transparent 1px);


    background-size: 40px 40px;


    opacity: .5;


}









/* ===============================
   STATUS BAR
================================ */


.sk-control-status {


    position: absolute;


    top: 25px;


    left: 30px;


    right: 30px;


    display: flex;


    justify-content: space-between;


    align-items: center;


    color: #475569;


    font-size: 13px;


    font-weight: 600;


    z-index: 3;


}





.online-dot {


    width: 10px;


    height: 10px;


    display: inline-block;


    border-radius: 50%;


    background: #22c55e;


    margin-right: 8px;


    box-shadow:

        0 0 15px #22c55e;


}









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


.sk-control-core {


    position: absolute;


    top: 50%;


    left: 50%;


    transform:


        translate(-50%, -50%);



    width: 220px;


    height: 220px;



    border-radius: 50%;


    display: flex;


    align-items: center;


    justify-content: center;


    background:


        linear-gradient(135deg,
            #0ea5e9,
            #2563eb);



    box-shadow:


        0 0 90px rgba(14, 165, 233, .45);



    animation:


        skCorePulse 4s infinite;


}








.core-inner {


    width: 190px;


    height: 190px;


    border-radius: 50%;


    background: white;


    display: flex;


    flex-direction: column;


    justify-content: center;


    align-items: center;



    box-shadow:


        0 10px 40px rgba(14, 165, 233, .15);


}





.core-inner i {


    font-size: 35px;


    color: #d4af37;


}







.core-inner h3 {


    margin: 8px 0 0;


    font-size: 28px;


    color: #0f172a;


}





.core-inner span {


    color: #0284c7;


    font-size: 11px;


    letter-spacing: 3px;


}






@keyframes skCorePulse {


    50% {

        scale: 1.08;

    }

}









/* ===============================
   MODULE BOXES
================================ */


.sk-control-module {


    position: absolute;


    width: 260px;


    padding: 25px;


    border-radius: 25px;


    background:


        rgba(255, 255, 255, .85);



    border:


        1px solid rgba(14, 165, 233, .15);



    box-shadow:


        0 20px 50px rgba(14, 165, 233, .10);



    backdrop-filter: blur(15px);



    display: flex;


    align-items: center;


    gap: 15px;



    transition: .4s;


}







.sk-control-module:hover {


    transform: translateY(-10px);


    box-shadow:


        0 35px 70px rgba(14, 165, 233, .18);


}








.module-icon {


    width: 55px;


    height: 55px;


    border-radius: 18px;


    display: flex;


    align-items: center;


    justify-content: center;


    flex-shrink: 0;


    background:


        linear-gradient(135deg,
            #0ea5e9,
            #2563eb);


    color: white;


}








.sk-control-module h3 {


    font-size: 17px;


    margin: 0 0 8px;


    color: #0f172a;


}







.sk-control-module p {


    margin: 0;


    font-size: 13px;


    line-height: 22px;


    color: #64748b;


}







.sk-control-module strong {


    font-size: 26px;


    color: #0284c7;


}









/* MODULE POSITIONS */


.module-creator {


    top: 120px;


    left: 50px;


}



.module-brand {


    top: 120px;


    right: 50px;


}



.module-content {


    bottom: 120px;


    left: 50px;


}



.module-analysis {


    bottom: 120px;


    right: 50px;


}









/* ===============================
   METRICS
================================ */


.sk-control-metrics {


    position: absolute;


    bottom: 30px;


    left: 50%;


    transform: translateX(-50%);



    display: flex;


    gap: 70px;


    z-index: 3;


}





.sk-control-metrics div {


    text-align: center;


}





.sk-control-metrics span {


    display: block;


    color: #64748b;


    font-size: 13px;


}





.sk-control-metrics strong {


    font-size: 32px;


    color: #0284c7;


}









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


@media(max-width:1000px) {


    .sk-control-room-panel {


        height: 850px;


    }



    .sk-control-module {


        width: 220px;


    }



    .module-creator {

        left: 20px;

    }


    .module-brand {

        right: 20px;

    }


    .module-content {

        left: 20px;

    }


    .module-analysis {

        right: 20px;

    }



}









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


@media(max-width:700px) {


    .sk-control-room-section {


        padding: 80px 0;


    }




    .sk-control-room-heading h2 {


        font-size: 38px;


    }



    .sk-control-room-panel {


        height: auto;


        padding: 30px 20px;


        display: flex;


        flex-direction: column;


        gap: 25px;


    }



    .sk-control-status {


        position: relative;


        inset: auto;


    }



    .sk-control-core {


        position: relative;


        inset: auto;


        transform: none;


        margin: 50px auto;


    }



    .sk-control-module {


        position: relative;


        inset: auto;


        width: 100%;


    }



    .sk-control-metrics {


        position: relative;


        inset: auto;


        transform: none;


        flex-direction: column;


        gap: 20px;


    }


}









/*=========================================
    SK CREATIVE SHOWCASE
    PART 2A
=========================================*/

.sk-creative-showcase-section {

    position: relative;
    padding: 50px 0;
    overflow: hidden;

    background:
        radial-gradient(circle at 0% 0%, rgba(14, 165, 233, .08), transparent 35%),
        radial-gradient(circle at 100% 100%, rgba(212, 175, 55, .08), transparent 30%),
        linear-gradient(180deg, #ffffff, #f8fbff);

}

/*==========================
BACKGROUND GLOW
==========================*/

.sk-creative-showcase-section::before {

    content: "";
    position: absolute;

    width: 650px;
    height: 650px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(14, 165, 233, .12),
            transparent 70%);

    top: -250px;
    right: -200px;

    animation: skGlow1 8s infinite alternate;

}

.sk-creative-showcase-section::after {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(212, 175, 55, .10),
            transparent 70%);

    left: -180px;
    bottom: -180px;

    animation: skGlow2 8s infinite alternate;

}

@keyframes skGlow1 {

    from {

        transform: scale(1);

    }

    to {

        transform: scale(1.15);

    }

}

@keyframes skGlow2 {

    from {

        transform: scale(1);

    }

    to {

        transform: scale(.9);

    }

}

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

.sk-creative-showcase-heading {

    text-align: center;

    max-width: 850px;

    margin: auto;

    margin-bottom: 80px;

    position: relative;

    z-index: 2;

}

.sk-creative-showcase-heading span {

    display: inline-block;

    padding: 10px 22px;

    border-radius: 50px;

    background: rgba(14, 165, 233, .10);

    color: #0284c7;

    font-size: 13px;

    letter-spacing: 3px;

    font-weight: 700;

}

.sk-creative-showcase-heading h2 {

    margin: 25px 0;

    font-size: 58px;

    font-weight: 900;

    line-height: 1.15;

    color: #0f172a;

}

.sk-creative-showcase-heading h2 strong {

    display: block;

    background: linear-gradient(90deg, #0ea5e9, #d4af37);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

.sk-creative-showcase-heading p {

    color: #64748b;

    max-width: 720px;

    margin: auto;

    line-height: 30px;

    font-size: 17px;

}

/*==========================
PHONE AREA
==========================*/

.sk-showcase-phone-wrapper {

    position: sticky;

    top: 100px;

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 720px;

}

.sk-phone-glow {

    position: absolute;

    width: 430px;

    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(14, 165, 233, .22),
            transparent 70%);

    animation: phoneGlow 5s infinite alternate;

}

@keyframes phoneGlow {

    from {

        transform: scale(1);

    }

    to {

        transform: scale(1.15);

    }

}

/*==========================
PHONE
==========================*/

.sk-phone {

    position: relative;

    width: 330px;

    height: 670px;

    border-radius: 48px;

    padding: 14px;

    background:

        linear-gradient(145deg,
            #202020,
            #050505);

    box-shadow:

        0 40px 80px rgba(15, 23, 42, .20),

        inset 0 1px 1px rgba(255, 255, 255, .15);

    z-index: 3;

    animation: phoneFloat 6s ease-in-out infinite;

}

@keyframes phoneFloat {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

}

.sk-phone-notch {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    top: 12px;

    width: 135px;

    height: 28px;

    border-radius: 20px;

    background: #111;

    z-index: 5;

}

.sk-phone-screen {

    width: 100%;

    height: 100%;

    overflow: hidden;

    border-radius: 38px;

    background: #eef6ff;

    display: flex;

    justify-content: center;

    align-items: center;

}

.sk-phone-screen img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .5s;

}

/*=========================================
    SERVICE SHOWCASE CARDS
=========================================*/

.sk-service-showcase-card {

    position: relative;



    align-items: flex-start;

    gap: 25px;

    padding: 35px;


    border-radius: 28px;

    overflow: hidden;

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

    backdrop-filter: blur(20px);

    border: 1px solid rgba(14, 165, 233, .10);

    box-shadow:

        0 20px 45px rgba(15, 23, 42, .06);

    transition: .45s ease;

    width: 80%;



}



/*==============================
TOP GRADIENT
==============================*/

.sk-service-showcase-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 4px;

    background:

        linear-gradient(90deg,

            #0ea5e9,

            #2563eb,

            #d4af37);

}



/*==============================
NUMBER
==============================*/

.sk-service-number {

    flex-shrink: 0;

    width: 70px;

    height: 70px;

    border-radius: 22px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 22px;

    font-weight: 800;

    color: #0284c7;

    background:

        linear-gradient(135deg,

            rgba(14, 165, 233, .10),

            rgba(255, 255, 255, .95));

}



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

.sk-service-icon {

    flex-shrink: 0;

    width: 78px;

    height: 78px;

    border-radius: 24px;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #fff;

    font-size: 30px;

    background:

        linear-gradient(135deg,

            #0ea5e9,

            #2563eb);

    box-shadow:

        0 18px 35px rgba(14, 165, 233, .28);

}



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

.sk-service-content {

    flex: 1;

}



.sk-service-content h3 {

    margin: 0 0 16px;

    font-size: 28px;

    font-weight: 800;

    color: #0f172a;

}



.sk-service-content p {

    margin: 0;

    color: #64748b;

    font-size: 16px;

    line-height: 30px;

}



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

.sk-service-content a {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 22px;

    color: #0284c7;

    font-weight: 700;

    text-decoration: none;

    transition: .35s;

}



.sk-service-content a i {

    transition: .35s;

}



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

.sk-service-showcase-card.active {

    border: 1px solid rgba(14, 165, 233, .22);

    box-shadow:

        0 25px 60px rgba(14, 165, 233, .15);

}


/*=========================================
    PREMIUM HOVER EFFECT
=========================================*/

.sk-service-showcase-card {

    transform-style: preserve-3d;
    will-change: transform;

}

.sk-service-showcase-card:hover {

    transform:
        translateY(-15px) scale(1.02);

    border-color: rgba(14, 165, 233, .22);

    box-shadow:

        0 25px 70px rgba(14, 165, 233, .16),

        0 45px 100px rgba(15, 23, 42, .08);

}


/*=========================================
    GLASS SHINE
=========================================*/

.sk-service-showcase-card::after {

    content: "";

    position: absolute;

    top: -150%;

    left: -60%;

    width: 45%;

    height: 350%;

    transform: rotate(25deg);

    background:

        linear-gradient(transparent,

            rgba(255, 255, 255, .55),

            transparent);

    transition: 1.1s;

}

.sk-service-showcase-card:hover::after {

    left: 170%;

}



/*=========================================
    BACKGROUND GLOW
=========================================*/

.sk-service-showcase-card .card-glow {

    position: absolute;

    inset: 0;

    border-radius: inherit;

    pointer-events: none;

    opacity: 0;

    transition: .45s;

    background:

        radial-gradient(circle at top right,

            rgba(14, 165, 233, .12),

            transparent 65%);

}

.sk-service-showcase-card:hover .card-glow {

    opacity: 1;

}



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

.sk-service-icon {

    transition: .45s;

}

.sk-service-showcase-card:hover .sk-service-icon {

    transform:

        rotate(-10deg) scale(1.12);

    box-shadow:

        0 22px 45px rgba(14, 165, 233, .35);

}



/*=========================================
    NUMBER EFFECT
=========================================*/

.sk-service-number {

    transition: .45s;

}

.sk-service-showcase-card:hover .sk-service-number {

    background:

        linear-gradient(135deg,

            #0ea5e9,

            #2563eb);

    color: #fff;

}



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

.sk-service-content h3 {

    transition: .35s;

}

.sk-service-showcase-card:hover h3 {

    color: #0284c7;

}



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

.sk-service-content p {

    transition: .35s;

}

.sk-service-showcase-card:hover p {

    color: #475569;

}



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

.sk-service-content a {

    position: relative;

}

.sk-service-content a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -6px;

    width: 0;

    height: 2px;

    background:

        linear-gradient(90deg,

            #0ea5e9,

            #d4af37);

    transition: .35s;

}

.sk-service-showcase-card:hover a {

    color: #d4af37;

    gap: 16px;

}

.sk-service-showcase-card:hover a::after {

    width: 100%;

}

.sk-service-showcase-card:hover a i {

    transform: translateX(8px);

}



/*=========================================
    FLOAT ANIMATION
=========================================*/

.sk-service-showcase-card {

    animation: showcaseFloat 6s ease-in-out infinite;

}

.sk-service-showcase-card:nth-child(2) {

    animation-delay: .5s;

}

.sk-service-showcase-card:nth-child(3) {

    animation-delay: 1s;

}

.sk-service-showcase-card:nth-child(4) {

    animation-delay: 1.5s;

}

@keyframes showcaseFloat {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-8px);

    }

}



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

#sk-service-preview {

    transition: .6s;

}

.sk-service-showcase-card:hover~* #sk-service-preview {

    transform: scale(1.04);

}



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

@media(max-width:991px) {

    .sk-showcase-phone-wrapper {

        position: relative;

        top: auto;

        min-height: auto;

        margin-bottom: 60px;

    }

    .sk-phone {

        width: 280px;

        height: 570px;

    }

}

@media(max-width:767px) {

    .sk-service-showcase-card {

        flex-direction: column;

        gap: 18px;

        padding: 28px;

    }

    .sk-service-number {

        width: 58px;

        height: 58px;

        font-size: 18px;

    }

    .sk-service-icon {

        width: 65px;

        height: 65px;

        font-size: 24px;

    }

    .sk-service-content h3 {

        font-size: 24px;

    }

}

@media(max-width:600px) {

    .sk-service-showcase-card {

        flex-direction: column;

        gap: 18px;

        padding: 28px;

    }

    .sk-service-number {

        width: 58px;

        height: 58px;

        font-size: 18px;

    }

    .sk-service-icon {

        width: 65px;

        height: 65px;

        font-size: 24px;

    }

    .sk-service-content h3 {

        font-size: 24px;

    }


    .services-main-section {
        flex-direction: column;
        gap: 2%;
        max-width: 1400px;
        margin: auto;
    }


    .sk-service-showcase-card {
        position: relative;
        align-items: flex-start;
        gap: 25px;
        padding: 35px;
        border-radius: 28px;
        overflow: hidden;
        background: rgba(255, 255, 255, .78);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(14, 165, 233, .10);
        box-shadow: 0 20px 45px rgba(15, 23, 42, .06);
        transition: .45s ease;
        width: 90%;

        margin-bottom: 20px;
    }

}












.services-main-section {
    display: flex;

    gap: 2%;

    max-width: 1400px;

    margin: auto;
}

/* .services-main-section-card{
    width: 20%;
    height:20%;
} */