.sk-about-story-hero-section {

    position: relative;

    padding: 20px 0;
    margin-top: 5%;

    background:

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

    overflow: hidden;

}





.sk-about-story-hero-section::before {


    content: "";


    position: absolute;


    width: 500px;


    height: 500px;



    background:


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



    top: -180px;


    right: -150px;


}






.sk-about-story-hero-section::after {


    content: "";


    position: absolute;


    width: 350px;


    height: 350px;



    background:


        radial-gradient(circle,
            rgba(37, 99, 235, .12),
            transparent 70%);



    bottom: -100px;


    left: -100px;


}









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


.sk-about-story-hero-container {


    max-width: 1300px;


    padding: 0 15px;


    margin: auto;


    display: grid;


    grid-template-columns: 1fr 1fr;


    gap: 80px;


    align-items: center;


    position: relative;


    z-index: 2;


}









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


.sk-about-story-hero-content {


    max-width: 600px;


}







.sk-about-story-hero-tag {


    display: inline-block;


    padding: 10px 22px;


    border-radius: 50px;


    background: #e8f7ff;


    color: #0284c7;


    font-size: 14px;


    font-weight: 700;


    margin-bottom: 20px;


}







.sk-about-story-hero-content h1 {


    font-size: 58px;


    line-height: 1.15;


    font-weight: 800;


    color: #0f172a;


    margin-bottom: 25px;


}






.sk-about-story-hero-content h1 span {


    color: #0ea5e9;


}







.sk-about-story-hero-content p {


    font-size: 17px;


    line-height: 30px;


    color: #64748b;


    margin-bottom: 35px;


}








/* ===============================
   EXPERIENCE BLOCK
================================ */


.sk-about-story-experience {


    display: flex;


    align-items: center;


    gap: 25px;


    margin-bottom: 35px;


}





.sk-about-year {


    display: flex;


    flex-direction: column;


}





.sk-about-year strong {


    font-size: 55px;


    line-height: 1;


    color: #0ea5e9;


    font-weight: 800;


}





.sk-about-year span {


    font-size: 14px;


    color: #64748b;


}







.sk-about-divider {


    width: 1px;


    height: 60px;


    background: #dbeafe;


}







.sk-about-description p {


    margin: 0;


    font-size: 15px;


    line-height: 25px;


    color: #475569;


}









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


.sk-about-story-btn {


    display: inline-flex;


    align-items: center;


    gap: 12px;


    padding: 16px 32px;


    border-radius: 50px;


    text-decoration: none;


    color: white;


    font-weight: 700;


    background:


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


    box-shadow:


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


    transition: .4s;


}





.sk-about-story-btn:hover {


    transform: translateY(-6px);


}









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


.sk-about-story-hero-visual {


    position: relative;


    height: 580px;


}








/* MAIN IMAGE */


.sk-about-story-main-image {


    width: 420px;


    height: 520px;


    border-radius: 35px;


    overflow: hidden;


    position: absolute;


    right: 50px;


    top: 20px;


    z-index: 2;


    box-shadow:


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


    animation:


        skAboutMainFloat 5s infinite ease-in-out;


}







.sk-about-story-main-image img {


    width: 100%;


    height: 100%;


    object-fit: cover;


}







@keyframes skAboutMainFloat {


    0%,
    100% {


        transform: translateY(0);


    }


    50% {


        transform: translateY(-15px);


    }


}









/* SMALL IMAGES */


.sk-about-story-small-image {


    position: absolute;


    width: 180px;


    height: 150px;


    border-radius: 25px;


    overflow: hidden;


    z-index: 4;


    border: 6px solid white;


    box-shadow:


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


}





.sk-about-story-small-image img {


    width: 100%;


    height: 100%;


    object-fit: cover;


}








.image-one {


    left: 0;


    top: 80px;


    animation:


        skSmallFloat 4s infinite ease-in-out;


}







.image-two {


    right: 0;


    bottom: 80px;


    animation:


        skSmallFloat 4s infinite ease-in-out;


    animation-delay: 1s;


}






@keyframes skSmallFloat {


    0%,
    100% {


        transform: translateY(0);


    }


    50% {


        transform: translateY(-12px);


    }


}









/* ===============================
   TRUST BADGE
================================ */


.sk-about-story-badge {


    position: absolute;


    left: 80px;


    bottom: 25px;


    z-index: 5;


    display: flex;


    align-items: center;


    gap: 15px;


    padding: 18px 25px;


    background: white;


    border-radius: 22px;


    box-shadow:


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


    animation:


        skBadgeFloat 4s infinite ease-in-out;


}







.sk-about-story-badge i {


    width: 45px;


    height: 45px;


    border-radius: 15px;


    display: flex;


    align-items: center;


    justify-content: center;


    background: #0ea5e9;


    color: white;


}







.sk-about-story-badge strong {


    display: block;


    color: #0f172a;


    font-size: 20px;


}





.sk-about-story-badge span {


    font-size: 13px;


    color: #64748b;


}







@keyframes skBadgeFloat {


    0%,
    100% {


        transform: translateY(0);


    }


    50% {


        transform: translateY(-10px);


    }


}









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



@media(max-width:1050px) {


    .sk-about-story-hero-container {


        grid-template-columns: 1fr;


    }



    .sk-about-story-hero-content {


        max-width: 100%;


        text-align: center;


    }



    .sk-about-story-experience {


        justify-content: center;


    }



    .sk-about-story-hero-visual {


        margin-top: 50px;


    }


}







@media(max-width:650px) {


    .sk-about-story-hero-section {


        padding: 80px 0;


    }



    .sk-about-story-hero-content h1 {


        font-size: 38px;


    }



    .sk-about-story-hero-content p {


        font-size: 15px;


        line-height: 27px;


    }



    .sk-about-story-hero-visual {


        height: 430px;


    }



    .sk-about-story-main-image {


        width: 280px;


        height: 360px;


        right: 30px;


    }



    .sk-about-story-small-image {


        width: 120px;


        height: 100px;


    }



    .sk-about-story-badge {


        left: 20px;


    }



}







/* =====================================================
   ABOUT JOURNEY SECTION CSS
   PREMIUM STORY TIMELINE DESIGN
===================================================== */


.sk-about-journey-section {

    position: relative;

    padding: 50px 0;


    background:


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


    overflow: hidden;

}








.sk-about-journey-section::before {


    content: "";


    position: absolute;


    width: 450px;


    height: 450px;


    background:


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


    top: -150px;


    left: -120px;


}








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


.sk-about-journey-container {


    max-width: 1200px;


    padding: 0 15px;


    margin: auto;


    position: relative;


    z-index: 2;


}








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


.sk-about-journey-heading {


    max-width: 750px;


    text-align: center;


    margin: 0 auto 20px;


}






.sk-about-journey-tag {


    display: inline-block;


    padding: 10px 22px;


    border-radius: 50px;


    background: #e8f7ff;


    color: #0284c7;


    font-size: 14px;


    font-weight: 700;


    margin-bottom: 0px;


}








.sk-about-journey-heading h2 {


    font-size: 50px;


    line-height: 1.2;


    font-weight: 800;


    color: #0f172a;


    margin-bottom: 0px;


}






.sk-about-journey-heading h2 span {


    color: #0ea5e9;


}








.sk-about-journey-heading p {


    color: #64748b;


    font-size: 17px;


    line-height: 30px;


}









/* ===============================
   TIMELINE
================================ */


.sk-about-journey-timeline {


    position: relative;


    padding: 20px 0;


}








/* CENTER LINE */


.sk-about-journey-line {


    position: absolute;


    top: 0;


    bottom: 0;


    left: 50%;


    width: 3px;


    transform: translateX(-50%);


    background:


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


}








.sk-about-journey-line::after {


    content: "";


    position: absolute;


    top: 0;


    left: 0;


    width: 100%;


    height: 100px;


    background: white;


    filter: blur(8px);


    opacity: .7;


    animation:


        skJourneyLineMove 3s infinite;


}






@keyframes skJourneyLineMove {


    0% {


        transform: translateY(-120px);


    }


    100% {


        transform: translateY(600px);


    }


}









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


.sk-about-journey-item {


    position: relative;


    width: 50%;


    padding: 10px;


    display: flex;


    align-items: center;


    gap: 25px;


    margin-bottom: 0px;

    margin-right: 100px;


}






.sk-about-journey-item:nth-child(odd) {


    padding-right: 70px;


}







.sk-about-journey-item.reverse {


    margin-left: 43%;


    flex-direction: row-reverse;


    padding-left: 70px;


}









/* YEAR */


.sk-about-journey-year {


    width: 90px;


    height: 90px;


    flex-shrink: 0;


    border-radius: 50%;


    display: flex;


    align-items: center;


    justify-content: center;


    background:


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


    color: white;


    font-size: 22px;


    font-weight: 800;


    box-shadow:


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


    position: relative;


    z-index: 2;


    transition: .4s;


}







.sk-about-journey-item:hover .sk-about-journey-year {


    transform: scale(1.12) rotate(8deg);


}









/* CONTENT CARD */


.sk-about-journey-content {


    padding: 30px;


    border-radius: 25px;


    background:


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


    backdrop-filter: blur(15px);


    border: 1px solid #e5f4ff;


    box-shadow:


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


    transition: .4s;


}






.sk-about-journey-content:hover {


    transform: translateY(-10px);


    box-shadow:


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


}








.sk-about-journey-content h3 {


    margin: 0 0 12px;


    color: #0f172a;


    font-size: 24px;


    font-weight: 800;


}







.sk-about-journey-content p {


    margin: 0;


    color: #64748b;


    font-size: 15px;


    line-height: 28px;


}









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


@media(max-width:900px) {


    .sk-about-journey-line {


        left: 40px;


    }



    .sk-about-journey-item,
    .sk-about-journey-item.reverse {


        width: 100%;


        margin-left: 0;


        padding: 20px 0 20px 80px;


        flex-direction: row;


    }




    .sk-about-journey-item:nth-child(odd) {


        padding-right: 0;


    }



}





@media(max-width:600px) {


    .sk-about-journey-section {


        padding: 80px 0;


    }



    .sk-about-journey-heading h2 {


        font-size: 34px;


    }




    .sk-about-journey-heading p {


        font-size: 15px;


        line-height: 26px;


    }




    .sk-about-journey-year {


        width: 65px;


        height: 65px;


        font-size: 16px;


    }



    .sk-about-journey-content {


        padding: 22px;


    }



    .sk-about-journey-content h3 {


        font-size: 20px;


    }



    .sk-about-journey-item,
    .sk-about-journey-item.reverse {

        padding: 20px 0 20px 0px;


    }


}















/* =====================================================
   ABOUT DNA SECTION CSS
   CREATIVE INTERACTIVE DESIGN
===================================================== */


/* ===============================
   MAIN SECTION
================================ */


.sk-about-dna-section {


    position: relative;


    padding: 50px 0;

    padding-bottom: 0px;

    background:


        linear-gradient(135deg,
            #071426,
            #102b4a);


    overflow: hidden;

    width: 80%;

    margin: auto;

    border-radius: 50px;


}







.sk-about-dna-section::before {


    content: "";


    position: absolute;


    width: 600px;


    height: 600px;


    background:


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



    top: -200px;


    left: 50%;


    transform: translateX(-50%);


}









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


.sk-about-dna-container {


    max-width: 1200px;


    padding: 0 15px;


    margin: auto;


    position: relative;


    z-index: 2;


}








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


.sk-about-dna-heading {


    max-width: 750px;


    margin: 0 auto 30px;


    text-align: center;


    color: white;


}







.sk-about-dna-tag {


    display: inline-block;


    padding: 10px 25px;


    border-radius: 50px;


    background:


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


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


    color: #38bdf8;


    font-size: 14px;


    font-weight: 700;


    margin-bottom: 0px;


}







.sk-about-dna-heading h2 {


    font-size: 52px;


    line-height: 1.2;


    font-weight: 900;


    margin-bottom: 0px;


}







.sk-about-dna-heading h2 span {


    color: #38bdf8;


}








.sk-about-dna-heading p {


    color: #cbd5e1;


    font-size: 17px;


    line-height: 30px;


}









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


.sk-about-dna-wrapper {


    height: 650px;


    position: relative;


    max-width: 1000px;


    margin: auto;


}








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


.sk-about-dna-core {


    position: absolute;


    top: 50%;


    left: 50%;


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


    width: 220px;


    height: 220px;


    border-radius: 50%;


    background:


        radial-gradient(circle,
            #38bdf8,
            #2563eb);


    display: flex;


    align-items: center;


    justify-content: center;


    box-shadow:


        0 0 80px rgba(56, 189, 248, .60);



    animation:


        skDnaRotate 8s infinite linear;


}








.sk-about-dna-core::before {


    content: "";


    position: absolute;


    inset: -20px;


    border-radius: 50%;


    border: 2px dashed rgba(56, 189, 248, .5);


    animation:


        skDnaSpin 12s infinite linear;


}







.sk-about-dna-core-inner {


    width: 160px;


    height: 160px;


    border-radius: 50%;


    background: #071426;


    display: flex;


    flex-direction: column;


    align-items: center;


    justify-content: center;


    color: white;


}







.sk-about-dna-core-inner i {


    font-size: 35px;


    color: #38bdf8;


    margin-bottom: 8px;


}







.sk-about-dna-core-inner strong {


    font-size: 28px;


}







.sk-about-dna-core-inner span {


    font-size: 14px;


    color: #38bdf8;


}





@keyframes skDnaRotate {


    0%,
    100% {


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


    }


    50% {


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


    }


}





@keyframes skDnaSpin {


    100% {


        transform: rotate(360deg);


    }


}









/* ===============================
   CONNECTING LINES
================================ */


.sk-about-dna-line {


    position: absolute;


    background:


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


    opacity: .5;


}







.line-top {


    width: 180px;


    height: 2px;


    top: 120px;


    left: 50%;


    transform: translateX(-50%);


}






.line-bottom {


    width: 180px;


    height: 2px;


    bottom: 120px;


    left: 50%;


    transform: translateX(-50%);


}






.line-left {


    width: 2px;


    height: 160px;


    left: 260px;


    top: 50%;


    transform: translateY(-50%);


    background:


        linear-gradient(180deg,
            #38bdf8,
            transparent);


}





.line-right {


    width: 2px;


    height: 160px;


    right: 260px;


    top: 50%;


    transform: translateY(-50%);


    background:


        linear-gradient(180deg,
            #38bdf8,
            transparent);


}









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


.sk-about-dna-item {


    position: absolute;


    width: 280px;


    padding: 25px;


    display: flex;


    gap: 15px;


    align-items: center;


    border-radius: 25px;


    background:


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



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



    backdrop-filter: blur(15px);



    color: white;


    transition: .5s;


    animation:


        skDnaFloat 4s infinite ease-in-out;


}







.sk-about-dna-item:hover {


    transform: translateY(-10px);


    background:


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


}







@keyframes skDnaFloat {


    0%,
    100% {


        transform: translateY(0);


    }


    50% {


        transform: translateY(-12px);


    }


}









/* POSITIONS */


.dna-creativity {


    top: 40px;


    left: 80px;

    width: 20%;


}





.dna-trust {


    top: 40px;


    right: 80px;


}





.dna-innovation {


    bottom: 40px;


    left: 80px;


}





.dna-growth {


    bottom: 40px;


    right: 80px;


}









/* ICON */


.sk-about-dna-icon {


    width: 55px;


    height: 55px;


    border-radius: 18px;


    display: flex;


    align-items: center;


    justify-content: center;


    background:


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


    color: white;


    font-size: 22px;


}









/* TEXT */


.sk-about-dna-item h3 {


    margin: 0 0 5px;


    font: size 22px;


}







.sk-about-dna-item p {


    margin: 0;


    font-size: 15px;


    color: #cbd5e1;


    line-height: 22px;


}









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


@media(max-width:900px) {


    .sk-about-dna-wrapper {


        height: auto;


        display: grid;


        gap: 25px;


    }



    .sk-about-dna-core {


        position: relative;


        top: auto;


        left: auto;


        transform: none;


        margin: 0 auto 40px;


    }



    .sk-about-dna-line {


        display: none;


    }



    .sk-about-dna-item,


    .dna-creativity,
    .dna-trust,
    .dna-innovation,
    .dna-growth {


        position: relative;


        top: auto;


        right: auto;


        bottom: auto;


        left: auto;


        width: 100%;


    }


}







@media(max-width:600px) {


    .sk-about-dna-section {


        padding: 80px 0;


    }



    .sk-about-dna-heading h2 {


        font-size: 35px;


    }



    .sk-about-dna-core {


        width: 170px;


        height: 170px;

        margin: 92px 26px -46px 168px;


    }



    .sk-about-dna-core-inner {


        width: 125px;


        height: 125px;


    }


    .sk-about-dna-section {

        width: 100%;

    }


}














/* =====================================================
   ABOUT TEAM SECTION CSS
   PREMIUM PROFILE SHOWCASE
===================================================== */


/* ===============================
   MAIN SECTION
================================ */


.sk-about-team-section {


    position: relative;


    padding: 40px 0;


    background:


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


    overflow: hidden;


}







.sk-about-team-section::before {


    content: "";


    position: absolute;


    width: 500px;


    height: 500px;



    background:


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



    top: -200px;


    right: -150px;


}









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


.sk-about-team-container {


    max-width: 1250px;


    padding: 0 15px;


    margin: auto;


    position: relative;


    z-index: 2;


}









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


.sk-about-team-heading {


    max-width: 750px;


    text-align: center;


    margin: 0 auto 30px;


}







.sk-about-team-tag {


    display: inline-block;


    padding: 10px 22px;


    background: #e8f7ff;


    color: #0284c7;


    border-radius: 50px;


    font-size: 14px;


    font-weight: 700;


    margin-bottom: 0px;


}







.sk-about-team-heading h2 {


    font-size: 52px;


    color: #0f172a;


    font-weight: 900;


    line-height: 1.2;


    margin-bottom: 0px;


}







.sk-about-team-heading h2 span {


    color: #0ea5e9;


}







.sk-about-team-heading p {


    color: #64748b;


    font-size: 17px;


    line-height: 30px;


}









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


.sk-about-team-grid {


    display: grid;


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


    gap: 35px;


}









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


.sk-about-team-member {


    position: relative;


    transition: .5s;




}






.sk-about-team-member:hover {


    transform: translateY(-15px);


}









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


.sk-about-team-image {


    height: 430px;


    border-radius: 35px;


    overflow: hidden;


    position: relative;


    box-shadow:


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


}







.sk-about-team-image::after {


    content: "";


    position: absolute;


    inset: 0;


    background:


        linear-gradient(180deg,
            transparent,
            rgba(0, 0, 0, .55));


    opacity: 0;


    transition: .4s;


    border: 10px solid rgb(146, 202, 255);

    border-radius: 35px;


}






.sk-about-team-member:hover .sk-about-team-image::after {


    opacity: 1;


}








.sk-about-team-image img {


    width: 100%;


    height: 100%;


    object-fit: cover;


    transition: .6s;


}







.sk-about-team-member:hover .sk-about-team-image img {


    transform: scale(1.08);


}









/* ===============================
   SOCIAL ICONS
================================ */


.sk-about-team-social {


    position: absolute;


    bottom: 30px;


    left: 50%;


    transform:


        translateX(-50%) translateY(40px);



    display: flex;


    gap: 12px;


    opacity: 0;


    z-index: 3;


    transition: .5s;


}








.sk-about-team-member:hover .sk-about-team-social {


    opacity: 1;


    transform:


        translateX(-50%) translateY(0);

    margin-bottom: 40px;




}








.sk-about-team-social a {


    width: 45px;


    height: 45px;


    border-radius: 50%;


    display: flex;


    align-items: center;


    justify-content: center;


    text-decoration: none;


    background: white;


    color: #0284c7;


    transition: .3s;


    box-shadow:


        0 10px 25px rgba(0, 0, 0, .15);


}







.sk-about-team-social a:hover {


    background: #0ea5e9;


    color: white;


    transform: translateY(-5px);


}









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


.sk-about-team-info {


    position: relative;


    width: 85%;


    margin: -50px auto 0;


    z-index: 5;


    padding: 25px;


    text-align: center;


    background: white;


    border-radius: 25px;


    border: 1px solid #e5f4ff;


    box-shadow:


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


}








.sk-about-team-info h3 {


    margin: 0 0 8px;


    color: #0f172a;


    font-size: 22px;


    font-weight: 800;


}








.sk-about-team-info span {


    color: #0ea5e9;


    font-size: 14px;


    font-weight: 600;


}









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


.sk-about-team-member::before {


    content: "";


    position: absolute;


    width: 100px;


    height: 100px;


    background:


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


    border-radius: 50%;


    filter: blur(40px);


    top: 20px;


    right: 20px;


    opacity: 0;


    transition: .5s;


}






.sk-about-team-member:hover::before {


    opacity: 1;


}









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


@media(max-width:1000px) {


    .sk-about-team-grid {


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


    }


}








@media(max-width:650px) {


    .sk-about-team-section {


        padding: 80px 0;


    }



    .sk-about-team-heading h2 {


        font-size: 35px;


    }



    .sk-about-team-grid {


        grid-template-columns: 1fr;


    }



    .sk-about-team-image {


        height: 380px;


    }


}














/* =====================================================
   ABOUT IMPACT SECTION CSS
   PREMIUM NUMBERS EXPERIENCE
===================================================== */
/* =====================================================
   ABOUT IMPACT ROADMAP SECTION
   CONCEPT 2 - GROWTH JOURNEY
===================================================== */


.sk-about-impact2-section {


    position: relative;


    padding: 50px 0;


    background: #ffffff;


    overflow: hidden;


}





.sk-about-impact2-section::before {


    content: "";


    position: absolute;


    width: 500px;


    height: 500px;


    background:


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


    top: -150px;


    right: -120px;


}






.sk-about-impact2-container {


    max-width: 1250px;


    padding: 0 20px;


    margin: auto;


    position: relative;


    z-index: 2;


}









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


.sk-about-impact2-heading {


    text-align: center;


    max-width: 750px;


    margin: auto;


    margin-bottom: 50px;


}





.sk-about-impact2-tag {


    color: #0284c7;


    font-size: 13px;


    font-weight: 700;


    letter-spacing: 3px;


    text-transform: uppercase;


}







.sk-about-impact2-heading h2 {


    font-size: 45px;


    font-weight: 900;


    line-height: 1.15;


    color: #0f172a;


    margin: 20px 0;


}







.sk-about-impact2-heading h2 span {


    color: #0ea5e9;


}







.sk-about-impact2-heading p {


    color: #64748b;


    font-size: 17px;


    line-height: 30px;


}









/* ===============================
   ROADMAP
================================ */


.sk-about-impact2-roadmap {


    position: relative;


    display: grid;


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


    gap: 30px;


}








/* CONNECTING LINE */


.sk-about-impact2-roadmap::before {


    content: "";


    position: absolute;


    top: 70px;


    left: 10%;


    width: 80%;


    height: 3px;


    background: #dbeafe;


}






.sk-about-impact2-roadmap::after {


    content: "";


    position: absolute;


    top: 70px;


    left: 10%;


    width: 25%;


    height: 3px;


    background:


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


    animation:


        skRoadMove 4s infinite;


}






@keyframes skRoadMove {


    0% {

        width: 10%;

    }


    100% {

        width: 80%;

    }


}









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


.sk-about-impact2-item {


    text-align: center;


    position: relative;


    z-index: 2;


}







.sk-about-impact2-dot {


    width: 70px;


    height: 70px;


    margin: 0 auto 35px;


    border-radius: 50%;


    display: flex;


    align-items: center;


    justify-content: center;


    background: white;


    border: 3px solid #0ea5e9;


    color: #0ea5e9;


    font-weight: 800;


    font-size: 18px;


    box-shadow:


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


    transition: .4s;


}








.sk-about-impact2-item:hover .sk-about-impact2-dot {


    transform: scale(1.15);


    background: #0ea5e9;


    color: white;


}









/* YEAR */


.sk-about-impact2-item h3 {


    font-size: 22px;


    color: #0f172a;


    font-weight: 800;


    margin-bottom: 15px;


}








/* DESCRIPTION */


.sk-about-impact2-item p {


    color: #64748b;


    font-size: 15px;


    line-height: 26px;


    margin-bottom: 20px;


}








/* NUMBER */


.sk-about-impact2-number {


    font-size: 45px;


    font-weight: 900;


    color: #0ea5e9;


    line-height: 1;


}







.sk-about-impact2-label {


    display: block;


    margin-top: 8px;


    color: #64748b;


    font-size: 14px;


}









/* GOLD ACCENT */


.sk-about-impact2-item:nth-child(4) .sk-about-impact2-number {


    color: #d4af37;


}









/* ===============================
   HOVER CARD EFFECT
================================ */


.sk-about-impact2-item {


    padding: 20px;


    border-radius: 25px;


    transition: .4s;


}






.sk-about-impact2-item:hover {


    transform: translateY(-15px);


    background: #c7e1f7;


}









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


@media(max-width:900px) {


    .sk-about-impact2-roadmap {


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


    }



    .sk-about-impact2-roadmap::before,
    .sk-about-impact2-roadmap::after {


        display: none;


    }


}








@media(max-width:600px) {


    .sk-about-impact2-section {


        padding: 80px 0;


    }



    .sk-about-impact2-heading h2 {


        font-size: 36px;


    }



    .sk-about-impact2-roadmap {


        grid-template-columns: 1fr;


    }



    .sk-about-impact2-number {


        font-size: 38px;


    }


}















/* =====================================================
   ABOUT WALL OF LOVE SECTION
   PREMIUM CLIENT STORY WALL
===================================================== */



.sk-about-walllove-section {


    position: relative;


    padding: 50px 0;


    background:


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


    overflow: hidden;


}







/* BACKGROUND EFFECT */


.sk-about-walllove-section::before {


    content: "";


    position: absolute;


    width: 500px;


    height: 500px;


    border-radius: 50%;


    background:


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


    top: -200px;


    left: -150px;


    animation:


        skWallGlow 8s infinite alternate;


}





.sk-about-walllove-section::after {


    content: "";


    position: absolute;


    width: 350px;


    height: 350px;


    border-radius: 50%;


    background:


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


    bottom: -150px;


    right: -100px;


}







@keyframes skWallGlow {


    from {

        transform: translate(0, 0);

    }


    to {

        transform: translate(120px, 80px);

    }


}









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


.sk-about-walllove-container {


    max-width: 1250px;


    padding: 0 20px;


    margin: auto;


    position: relative;


    z-index: 2;


}









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


.sk-about-walllove-heading {


    text-align: center;


    max-width: 850px;


    margin: 0 auto 50px;


}







.sk-about-walllove-tag {


    display: inline-block;


    font-size: 13px;


    letter-spacing: 3px;


    font-weight: 800;


    color: #0284c7;


    text-transform: uppercase;


}







.sk-about-walllove-heading h2 {


    margin: 20px 0;


    font-size: 58px;


    line-height: 1.15;


    font-weight: 900;


    color: #0f172a;


}







.sk-about-walllove-heading h2 span {


    color: #0ea5e9;


}







.sk-about-walllove-heading p {


    color: #64748b;


    font-size: 17px;


    line-height: 30px;


}









/* ===============================
   MASONRY WALL
================================ */


.sk-about-walllove-grid {


    columns: 3;


    column-gap: 35px;


}








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


.sk-about-walllove-card {


    position: relative;


    display: inline-block;




    margin-bottom: 35px;


    padding: 35px;


    background: white;


    border-radius: 30px;


    border: 1px solid #e8f4ff;


    box-shadow:


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


    overflow: hidden;


    transition: .5s;


}





.sk-about-walllove-card::before {


    content: "";


    position: absolute;


    width: 80px;


    height: 80px;


    border-radius: 50%;


    background:


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


    top: -40px;


    right: -40px;


    transition: .5s;


}








.sk-about-walllove-card:hover::before {


    transform: scale(3);


}








.sk-about-walllove-card:hover {


    transform: translateY(-15px);


    box-shadow:


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


}









/* BIG CARD */


.sk-about-walllove-card.large {


    padding: 45px;


}









/* ===============================
   TOP AREA
================================ */


.sk-about-walllove-top {


    display: flex;


    justify-content: space-between;


    align-items: center;


    margin-bottom: 25px;


    position: relative;


    z-index: 2;


}







.sk-about-walllove-logo {


    font-size: 24px;


    font-weight: 900;


    color: #0f172a;


    letter-spacing: 1px;


}







.sk-about-walllove-stars {


    color: #d4af37;


    letter-spacing: 2px;


}









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


.sk-about-walllove-card p {


    position: relative;


    z-index: 2;


    color: #64748b;


    font-size: 16px;


    line-height: 30px;


    margin: 0;


}








.sk-about-walllove-user {


    margin-top: 30px;


    padding-top: 20px;


    border-top: 1px solid #e5f4ff;


    color: #0284c7;


    font-weight: 700;


    position: relative;


    z-index: 2;


}









/* ===============================
   FLOATING ANIMATION
================================ */


.sk-about-walllove-card:nth-child(odd) {


    animation:


        skWallCardFloat 6s infinite ease-in-out;


}



.sk-about-walllove-card:nth-child(even) {


    animation:


        skWallCardFloat 7s infinite ease-in-out;


    animation-delay: 1s;


}







@keyframes skWallCardFloat {


    0%,
    100% {


        transform: translateY(0);


    }


    50% {


        transform: translateY(-10px);


    }


}









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


@media(max-width:1000px) {


    .sk-about-walllove-grid {


        columns: 2;


    }



}







@media(max-width:650px) {


    .sk-about-walllove-section {


        padding: 80px 0;


    }



    .sk-about-walllove-heading h2 {


        font-size: 36px;


    }



    .sk-about-walllove-grid {


        columns: 1;


    }



    .sk-about-walllove-card,
    .sk-about-walllove-card.large {


        padding: 25px;


    }



}

















/* =====================================================
   ABOUT CREATIVE CULTURE SECTION CSS
   PREMIUM STUDIO GALLERY DESIGN
===================================================== */



.sk-about-culture-section {


    position: relative;


    padding: 0px 0;


    background:


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


    overflow: hidden;


}








.sk-about-culture-section::before {


    content: "";


    position: absolute;


    width: 500px;


    height: 500px;


    border-radius: 50%;


    background:


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


    top: -200px;


    left: -150px;


}








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


.sk-about-culture-container {


    max-width: 1250px;


    padding: 0 20px;


    margin: auto;


    position: relative;


    z-index: 2;


}









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


.sk-about-culture-heading {


    max-width: 800px;


    text-align: center;


    margin: 0 auto 80px;


}







.sk-about-culture-tag {


    display: inline-block;


    color: #0284c7;


    font-size: 13px;


    font-weight: 800;


    letter-spacing: 3px;


    text-transform: uppercase;


}








.sk-about-culture-heading h2 {


    margin: 20px 0;


    font-size: 58px;


    line-height: 1.15;


    font-weight: 900;


    color: #0f172a;


}







.sk-about-culture-heading h2 span {


    color: #0ea5e9;


}







.sk-about-culture-heading p {


    color: #64748b;


    font-size: 17px;


    line-height: 30px;


}









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


.sk-about-culture-gallery {


    display: grid;


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


    grid-auto-rows: 220px;


    gap: 25px;


}








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


.sk-about-culture-card {


    position: relative;


    overflow: hidden;


    border-radius: 35px;


    box-shadow:


        0 25px 60px rgba(15, 23, 42, .12);


}







.sk-about-culture-card img {


    width: 100%;


    height: 100%;


    object-fit: cover;



    transition: .8s;


}







.sk-about-culture-card:hover img {


    transform: scale(1.12);


}








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


.sk-about-culture-card.main-card {


    grid-column: span 6;


    grid-row: span 2;


}





.sk-about-culture-card.small-card {


    grid-column: span 3;


}









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


.sk-about-culture-overlay {


    position: absolute;


    inset: 0;


    display: flex;


    flex-direction: column;


    justify-content: flex-end;


    padding: 30px;


    background:


        linear-gradient(180deg,
            transparent,
            rgba(0, 0, 0, .75));


    opacity: 0;


    transition: .5s;


}







.sk-about-culture-card:hover .sk-about-culture-overlay {


    opacity: 1;


}








.sk-about-culture-overlay h3 {


    color: white;


    font-size: 24px;


    font-weight: 800;


    margin: 0 0 8px;


    transform: translateY(20px);


    transition: .5s;


}







.sk-about-culture-overlay span {


    color: #dbeafe;


    font-size: 14px;


    transform: translateY(20px);


    transition: .5s;


}







.sk-about-culture-card:hover .sk-about-culture-overlay h3,
.sk-about-culture-card:hover .sk-about-culture-overlay span {


    transform: translateY(0);


}









/* ===============================
   FLOAT EFFECT
================================ */


.sk-about-culture-card:nth-child(odd) {


    animation:


        skCultureFloat 6s infinite ease-in-out;


}




.sk-about-culture-card:nth-child(even) {


    animation:


        skCultureFloat 7s infinite ease-in-out;


    animation-delay: 1s;


}







@keyframes skCultureFloat {


    0%,
    100% {


        transform: translateY(0);


    }


    50% {


        transform: translateY(-8px);


    }


}









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


@media(max-width:1000px) {


    .sk-about-culture-gallery {


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


        grid-auto-rows: 250px;


    }




    .sk-about-culture-card.main-card,
    .sk-about-culture-card.small-card {


        grid-column: span 1;


        grid-row: span 1;


    }


}








@media(max-width:600px) {


    .sk-about-culture-section {


        padding: 80px 0;


    }



    .sk-about-culture-heading h2 {


        font-size: 36px;


    }



    .sk-about-culture-gallery {


        display: grid;


        grid-template-columns: 1fr;


    }



    .sk-about-culture-card {


        height: 280px;


    }

    .sk-about-dna-item {
        width: 80%;
    }



}