/*==================================================
ABOUT HERO
PART 1
==================================================*/

.about-hero {

    position: relative;

    overflow: hidden;

    padding: 120px 0;

    background:
        radial-gradient(circle at top left, #dff4ff 0%, transparent 35%),
        radial-gradient(circle at bottom right, #d8ecff 0%, transparent 40%),
        linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);

}

/*========================================*/

.about-hero::before {

    content: "";

    position: absolute;

    top: -260px;

    left: -260px;

    width: 620px;

    height: 620px;

    border-radius: 50%;

    background: rgba(20, 184, 255, .10);

    filter: blur(90px);

}

.about-hero::after {

    content: "";

    position: absolute;

    right: -220px;

    bottom: -220px;

    width: 520px;

    height: 520px;

    border-radius: 50%;

    background: rgba(10, 99, 255, .08);

    filter: blur(90px);

}

/*========================================*/

.about-hero .container {

    max-width: 1400px;

    margin: auto;

    padding: 0 20px;

    position: relative;

    z-index: 2;

}

/*========================================*/

.about-hero-wrapper {

    display: grid;

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

    gap: 70px;

    align-items: center;

}

/*========================================*/

.about-left {

    position: relative;

}

/*========================================*/

.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 24px;

    border-radius: 60px;

    background: rgba(20, 184, 255, .08);

    border: 1px solid rgba(20, 184, 255, .18);

    color: #0a63ff;

    font-size: 13px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2px;

    margin-bottom: 30px;

}

.hero-badge::before {

    content: "";

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #14b8ff;

}

/*========================================*/

.about-left h1 {

    font-size: 66px;

    line-height: 1.08;

    font-weight: 800;

    color: #071c4d;

    margin-bottom: 30px;

    letter-spacing: -2px;

    max-width: 760px;

}

/*========================================*/

.about-left p {

    font-size: 18px;

    line-height: 1.9;

    color: #5d6f87;

    max-width: 700px;

    margin-bottom: 45px;

}

/*========================================*/

.about-left {

    animation: heroFadeLeft .8s ease;

}

@keyframes heroFadeLeft {

    from {

        opacity: 0;

        transform: translateX(-60px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

/*========================================*/

.about-right {

    animation: heroFadeRight .8s ease;

}

@keyframes heroFadeRight {

    from {

        opacity: 0;

        transform: translateX(60px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

/*========================================*/

.about-hero::before {

    animation: heroGlowOne 8s ease-in-out infinite;

}

.about-hero::after {

    animation: heroGlowTwo 10s ease-in-out infinite;

}

@keyframes heroGlowOne {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-25px);

    }

}

@keyframes heroGlowTwo {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(25px);

    }

}


/*==================================================
ABOUT HERO
PART 2
BUTTONS + STATS + COMPANY CARD
==================================================*/

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

.hero-buttons {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 55px;

}

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

.primary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 220px;

    height: 60px;

    padding: 0 35px;

    border-radius: 60px;

    text-decoration: none;

    font-size: 16px;

    font-weight: 700;

    color: #fff;

    background: linear-gradient(135deg,
            #18b8ff,
            #0a63ff);

    box-shadow:
        0 18px 40px rgba(10, 99, 255, .28);

    transition: .35s;

}

.primary-btn:hover {

    transform: translateY(-5px);

    box-shadow:
        0 30px 55px rgba(10, 99, 255, .35);

}

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

.secondary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 220px;

    height: 60px;

    padding: 0 35px;

    border-radius: 60px;

    text-decoration: none;

    font-size: 16px;

    font-weight: 700;

    color: #0a63ff;

    background: #fff;

    border: 2px solid #d7e7ff;

    transition: .35s;

}

.secondary-btn:hover {

    background: #0a63ff;

    color: #fff;

    border-color: #0a63ff;

}

/*=========================================
HIGHLIGHTS
=========================================*/

.hero-highlights {

    display: grid;

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

    gap: 20px;

}

.hero-highlights div {

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

    backdrop-filter: blur(20px);

    padding: 30px;

    border-radius: 24px;

    border: 1px solid rgba(10, 99, 255, .08);

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

    transition: .35s;

    position: relative;

    overflow: hidden;

}

.hero-highlights div::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 4px;

    background: linear-gradient(90deg,
            #14b8ff,
            #0a63ff);

}

.hero-highlights div:hover {

    transform: translateY(-6px);

    box-shadow:
        0 25px 60px rgba(10, 99, 255, .14);

}

.hero-highlights strong {

    display: block;

    font-size: 38px;

    color: #0a63ff;

    margin-bottom: 8px;

    font-weight: 800;

}

.hero-highlights span {

    display: block;

    color: #66758c;

    line-height: 1.6;

    font-size: 15px;

}

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

.about-right {

    position: relative;

}

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

.hero-info-card {

    position: relative;

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

    backdrop-filter: blur(25px);

    border-radius: 32px;

    padding: 40px;

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

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

    overflow: hidden;

}

/*=========================================
TOP BAR
=========================================*/

.hero-info-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 5px;

    background: linear-gradient(90deg,
            #14b8ff,
            #0a63ff,
            #14b8ff);

}

/*=========================================
SHINE EFFECT
=========================================*/

.hero-info-card::after {

    content: "";

    position: absolute;

    top: -100px;

    left: -220px;

    width: 180px;

    height: 500px;

    transform: rotate(25deg);

    background: linear-gradient(transparent,
            rgba(255, 255, 255, .75),
            transparent);

    transition: 1.2s;

}

.hero-info-card:hover::after {

    left: 600px;

}

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

.hero-info-card>span {

    display: inline-block;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    color: #0a63ff;

    margin-bottom: 15px;

}

.hero-info-card h3 {

    font-size: 34px;

    color: #081b4b;

    margin-bottom: 35px;

    line-height: 1.2;

}

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

.hero-info-card ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

.hero-info-card li {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 18px 0;

    border-bottom: 1px solid #eef4fb;

    gap: 20px;

}

.hero-info-card li:last-child {

    border-bottom: none;

}

.hero-info-card strong {

    color: #081b4b;

    font-size: 15px;

    font-weight: 700;

}

.hero-info-card li span {

    color: #64748b;

    font-size: 15px;

    text-align: right;

    max-width: 55%;

}

/*=========================================
FLOATING GLOW
=========================================*/

.about-right::before {

    content: "";

    position: absolute;

    width: 260px;

    height: 260px;

    right: -80px;

    top: -80px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(20, 184, 255, .20),
            transparent 70%);

    filter: blur(45px);

    z-index: -1;

}

.about-right::after {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    left: -60px;

    bottom: -60px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(10, 99, 255, .16),
            transparent 70%);

    filter: blur(45px);

    z-index: -1;

}


/*==================================================
ABOUT HERO
PART 3
RESPONSIVE + PREMIUM EFFECTS
==================================================*/

/*=========================================
FLOATING SHAPES
=========================================*/

.about-hero .shape-1,
.about-hero .shape-2,
.about-hero .shape-3 {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: 1;

}

.about-hero .shape-1 {

    width: 260px;

    height: 260px;

    top: 80px;

    right: 4%;

    background: radial-gradient(circle,
            rgba(20, 184, 255, .18),
            transparent 70%);

    animation: floatOne 8s ease-in-out infinite;

}

.about-hero .shape-2 {

    width: 180px;

    height: 180px;

    bottom: 60px;

    left: 3%;

    background: radial-gradient(circle,
            rgba(10, 99, 255, .14),
            transparent 70%);

    animation: floatTwo 10s ease-in-out infinite;

}

.about-hero .shape-3 {

    width: 120px;

    height: 120px;

    top: 45%;

    left: 48%;

    background: radial-gradient(circle,
            rgba(255, 255, 255, .60),
            transparent 75%);

    animation: pulseGlow 6s ease infinite;

}

/*=========================================
ANIMATIONS
=========================================*/

@keyframes floatOne {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-20px);

    }

}

@keyframes floatTwo {

    0%,
    100% {

        transform: translateX(0);

    }

    50% {

        transform: translateX(25px);

    }

}

@keyframes pulseGlow {

    0%,
    100% {

        transform: scale(1);

        opacity: .8;

    }

    50% {

        transform: scale(1.15);

        opacity: 1;

    }

}

/*=========================================
LARGE DESKTOP
=========================================*/

@media(max-width:1400px) {

    .about-left h1 {

        font-size: 58px;

    }

    .about-hero-wrapper {

        gap: 55px;

    }

}

/*=========================================
LAPTOP
=========================================*/

@media(max-width:1200px) {

    .about-hero {

        padding: 90px 0;

    }

    .about-hero-wrapper {

        grid-template-columns: 1fr;

        gap: 55px;

    }

    .about-left {

        text-align: center;

    }

    .about-left p {

        margin: auto auto 45px;

    }

    .hero-buttons {

        justify-content: center;

    }

    .hero-highlights {

        max-width: 760px;

        margin: auto;

    }

    .about-right {

        max-width: 760px;

        margin: auto;

        width: 100%;

    }

}

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

@media(max-width:992px) {

    .about-left h1 {

        font-size: 48px;

    }

    .about-left p {

        font-size: 16px;

    }

    .hero-highlights {

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

    }

    .hero-info-card {

        padding: 35px;

    }

    .hero-info-card h3 {

        font-size: 30px;

    }

}

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

@media(max-width:768px) {

    .about-hero {

        padding: 70px 0;

    }

    .about-left h1 {

        font-size: 34px;

        line-height: 1.2;

        letter-spacing: -1px;

    }

    .hero-badge {

        font-size: 11px;

        padding: 10px 18px;

        letter-spacing: 1px;

    }

    .about-left p {

        font-size: 15px;

        line-height: 1.8;

    }

    .hero-buttons {

        flex-direction: column;

        align-items: center;

        gap: 15px;

    }

    .primary-btn,
    .secondary-btn {

        width: 100%;

        max-width: 320px;

    }

    .hero-highlights {

        grid-template-columns: 1fr;

        gap: 18px;

    }

    .hero-info-card {

        padding: 28px;

    }

    .hero-info-card h3 {

        font-size: 26px;

        margin-bottom: 25px;

    }

    .hero-info-card li {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

    }

    .hero-info-card li span {

        max-width: 100%;

        text-align: left;

    }

}

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

@media(max-width:480px) {

    .about-hero {

        padding: 60px 0;

    }

    .about-left h1 {

        font-size: 28px;

    }

    .about-left p {

        font-size: 14px;

    }

    .hero-highlights strong {

        font-size: 30px;

    }

    .hero-highlights span {

        font-size: 13px;

    }

    .hero-info-card {

        padding: 22px;

        border-radius: 24px;

    }

    .hero-info-card h3 {

        font-size: 22px;

    }

    .hero-info-card strong {

        font-size: 14px;

    }

    .hero-info-card li span {

        font-size: 14px;

    }

}

/*=========================================
REDUCE MOTION
=========================================*/

@media(prefers-reduced-motion:reduce) {

    * {

        animation: none !important;

        transition: none !important;

        scroll-behavior: auto !important;

    }

}



/*==================================================
COMPANY STORY
PART 1
==================================================*/

.company-story {

    position: relative;

    overflow: hidden;

    padding: 120px 0;

    background:
        radial-gradient(circle at top left, #e7f7ff 0%, transparent 35%),
        radial-gradient(circle at bottom right, #dcecff 0%, transparent 40%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);

}

/*==========================================*/

.company-story::before {

    content: "";

    position: absolute;

    top: -250px;

    left: -250px;

    width: 600px;

    height: 600px;

    border-radius: 50%;

    background: rgba(20, 184, 255, .10);

    filter: blur(90px);

}

.company-story::after {

    content: "";

    position: absolute;

    right: -250px;

    bottom: -250px;

    width: 520px;

    height: 520px;

    border-radius: 50%;

    background: rgba(10, 99, 255, .08);

    filter: blur(90px);

}

/*==========================================*/

.company-story .container {

    position: relative;

    z-index: 2;

    max-width: 1400px;

    margin: auto;

    padding: 0 20px;

}

/*==========================================*/

.about-grid {

    display: grid;

    grid-template-columns: 1.1fr .9fr;

    gap: 80px;

    align-items: center;

}

/*==========================================*/

.about-content {

    position: relative;

}

/*==========================================*/

.about-content>span {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 24px;

    border-radius: 60px;

    background: rgba(20, 184, 255, .08);

    border: 1px solid rgba(20, 184, 255, .18);

    color: #0a63ff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-bottom: 30px;

}

.about-content>span::before {

    content: "";

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #14b8ff;

}

/*==========================================*/

.about-content h2 {

    font-size: 54px;

    line-height: 1.12;

    color: #081b4b;

    font-weight: 800;

    letter-spacing: -2px;

    margin-bottom: 35px;

    max-width: 760px;

}

/*==========================================*/

.about-content p {

    font-size: 17px;

    color: #64748b;

    line-height: 1.95;

    margin-bottom: 24px;

}

/*==========================================*/

.company-features {

    display: grid;

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

    gap: 18px;

    margin-top: 45px;

}

/*==========================================*/

.company-features div {

    position: relative;

    background: #fff;

    border: 1px solid rgba(10, 99, 255, .08);

    border-radius: 18px;

    padding: 20px 22px 20px 55px;

    color: #081b4b;

    font-weight: 600;

    font-size: 15px;

    transition: .35s;

    overflow: hidden;

}

/*==========================================*/

.company-features div::before {

    content: "";

    position: absolute;

    left: 22px;

    top: 50%;

    transform: translateY(-50%);

    width: 14px;

    height: 14px;

    border-radius: 50%;

    background: linear-gradient(135deg,
            #18b8ff,
            #0a63ff);

    box-shadow: 0 0 0 6px rgba(20, 184, 255, .10);

}

/*==========================================*/

.company-features div::after {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 4px;

    height: 100%;

    background: linear-gradient(180deg,
            #18b8ff,
            #0a63ff);

}

/*==========================================*/

.company-features div:hover {

    transform: translateY(-6px);

    box-shadow:

        0 20px 45px rgba(10, 99, 255, .12);

}

/*==========================================*/

.about-content {

    animation: companyFadeLeft .8s ease;

}

@keyframes companyFadeLeft {

    from {

        opacity: 0;

        transform: translateX(-50px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}


/*==================================================
COMPANY STORY
PART 2
RIGHT SIDE PREMIUM CARD
==================================================*/

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

.about-image {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

}

/*==========================================
FLOATING GLOW
==========================================*/

.about-image::before {

    content: "";

    position: absolute;

    width: 320px;

    height: 320px;

    top: -80px;

    right: -60px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(24, 184, 255, .18),
            transparent 70%);

    filter: blur(45px);

    z-index: -1;

}

.about-image::after {

    content: "";

    position: absolute;

    width: 250px;

    height: 250px;

    left: -60px;

    bottom: -70px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(10, 99, 255, .12),
            transparent 70%);

    filter: blur(40px);

    z-index: -1;

}

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

.about-card {

    position: relative;

    width: 100%;

    max-width: 520px;

    padding: 45px;

    border-radius: 32px;

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

    backdrop-filter: blur(28px);

    -webkit-backdrop-filter: blur(28px);

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

    box-shadow:

        0 25px 70px rgba(0, 0, 0, .08);

    overflow: hidden;

    transition: .45s;

}

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

.about-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 5px;

    background: linear-gradient(90deg,
            #14b8ff,
            #0a63ff,
            #14b8ff);

}

/*==========================================
SHINE EFFECT
==========================================*/

.about-card::after {

    content: "";

    position: absolute;

    top: -120px;

    left: -240px;

    width: 180px;

    height: 550px;

    background: linear-gradient(transparent,
            rgba(255, 255, 255, .70),
            transparent);

    transform: rotate(25deg);

    transition: 1.3s;

}

.about-card:hover::after {

    left: 650px;

}

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

.about-card:hover {

    transform: translateY(-10px);

    box-shadow:

        0 35px 80px rgba(10, 99, 255, .16);

}

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

.about-card>span {

    display: inline-block;

    margin-bottom: 16px;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    color: #0a63ff;

    text-transform: uppercase;

}

.about-card h3 {

    font-size: 52px;

    font-weight: 800;

    line-height: 1;

    color: #081b4b;

    margin-bottom: 22px;

}

.about-card p {

    color: #64748b;

    font-size: 16px;

    line-height: 1.9;

    margin-bottom: 30px;

}

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

.about-card hr {

    border: none;

    height: 1px;

    background: #edf3fb;

    margin: 30px 0;

}

/*==========================================
COMPANY INFO
==========================================*/

.company-info {

    display: flex;

    flex-direction: column;

    gap: 18px;

}

.company-info div {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    padding-bottom: 18px;

    border-bottom: 1px solid #eef4fb;

}

.company-info div:last-child {

    border-bottom: none;

    padding-bottom: 0;

}

.company-info div {

    color: #64748b;

    font-size: 15px;

}

.company-info strong {

    color: #081b4b;

    font-size: 15px;

    font-weight: 700;

    text-align: right;

    max-width: 55%;

}

/*==========================================
RIGHT ENTRY ANIMATION
==========================================*/

.about-image {

    animation: companyFadeRight .8s ease;

}

@keyframes companyFadeRight {

    from {

        opacity: 0;

        transform: translateX(60px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}


/*==================================================
COMPANY STORY
PART 3
RESPONSIVE + PREMIUM EFFECTS
==================================================*/

/*==========================================
FLOATING SHAPES
==========================================*/

.company-story .shape-1,
.company-story .shape-2,
.company-story .shape-3 {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: 1;

}

.company-story .shape-1 {

    width: 260px;

    height: 260px;

    top: 80px;

    right: 5%;

    background:
        radial-gradient(circle,
            rgba(20, 184, 255, .18),
            transparent 70%);

    animation: companyFloatOne 8s ease-in-out infinite;

}

.company-story .shape-2 {

    width: 180px;

    height: 180px;

    bottom: 60px;

    left: 3%;

    background:
        radial-gradient(circle,
            rgba(10, 99, 255, .15),
            transparent 70%);

    animation: companyFloatTwo 10s ease-in-out infinite;

}

.company-story .shape-3 {

    width: 120px;

    height: 120px;

    top: 45%;

    left: 48%;

    background:
        radial-gradient(circle,
            rgba(255, 255, 255, .60),
            transparent 75%);

    animation: companyPulse 6s ease infinite;

}

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

@keyframes companyFloatOne {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-20px);

    }

}

@keyframes companyFloatTwo {

    0%,
    100% {

        transform: translateX(0);

    }

    50% {

        transform: translateX(25px);

    }

}

@keyframes companyPulse {

    0%,
    100% {

        transform: scale(1);

        opacity: .8;

    }

    50% {

        transform: scale(1.15);

        opacity: 1;

    }

}

/*==========================================
LARGE DESKTOP
==========================================*/

@media(max-width:1400px) {

    .about-grid {

        gap: 60px;

    }

    .about-content h2 {

        font-size: 48px;

    }

}

/*==========================================
LAPTOP
==========================================*/

@media(max-width:1200px) {

    .company-story {

        padding: 90px 0;

    }

    .about-grid {

        grid-template-columns: 1fr;

        gap: 60px;

    }

    .about-content {

        text-align: center;

    }

    .about-content h2 {

        margin-left: auto;

        margin-right: auto;

    }

    .about-content p {

        max-width: 760px;

        margin-left: auto;

        margin-right: auto;

    }

    .company-features {

        max-width: 760px;

        margin: 45px auto 0;

    }

    .about-image {

        max-width: 650px;

        margin: auto;

        width: 100%;

    }

}

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

@media(max-width:992px) {

    .about-content h2 {

        font-size: 42px;

    }

    .about-content p {

        font-size: 16px;

    }

    .company-features {

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

    }

    .about-card {

        padding: 35px;

    }

    .about-card h3 {

        font-size: 42px;

    }

}

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

@media(max-width:768px) {

    .company-story {

        padding: 70px 0;

    }

    .about-content h2 {

        font-size: 32px;

        line-height: 1.2;

        letter-spacing: -1px;

    }

    .about-content>span {

        font-size: 11px;

        padding: 10px 18px;

        letter-spacing: 1px;

    }

    .about-content p {

        font-size: 15px;

        line-height: 1.8;

    }

    .company-features {

        grid-template-columns: 1fr;

        gap: 16px;

    }

    .company-features div {

        padding: 18px 18px 18px 52px;

        font-size: 14px;

    }

    .about-card {

        padding: 28px;

        border-radius: 24px;

    }

    .about-card h3 {

        font-size: 34px;

    }

    .about-card p {

        font-size: 15px;

    }

    .company-info div {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

    }

    .company-info strong {

        max-width: 100%;

        text-align: left;

    }

}

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

@media(max-width:480px) {

    .company-story {

        padding: 60px 0;

    }

    .about-content h2 {

        font-size: 28px;

    }

    .about-content p {

        font-size: 14px;

    }

    .company-features div {

        font-size: 13px;

        padding: 16px 16px 16px 48px;

    }

    .company-features div::before {

        left: 18px;

        width: 12px;

        height: 12px;

    }

    .about-card {

        padding: 22px;

    }

    .about-card h3 {

        font-size: 28px;

    }

    .about-card>span {

        font-size: 11px;

    }

    .about-card p {

        font-size: 14px;

    }

    .company-info div {

        font-size: 14px;

    }

    .company-info strong {

        font-size: 14px;

    }

}

/*==========================================
REDUCE MOTION
==========================================*/

@media(prefers-reduced-motion:reduce) {

    * {

        animation: none !important;

        transition: none !important;

        scroll-behavior: auto !important;

    }

}


/*==================================================
COMPANY JOURNEY
PART 1
==================================================*/

.company-journey {

    position: relative;

    overflow: hidden;

    padding: 120px 0;

    background:
        radial-gradient(circle at top left, #e9f7ff 0%, transparent 35%),
        radial-gradient(circle at bottom right, #dcecff 0%, transparent 40%),
        linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);

}

/*====================================*/

.company-journey::before {

    content: "";

    position: absolute;

    top: -250px;

    left: -250px;

    width: 620px;

    height: 620px;

    border-radius: 50%;

    background: rgba(20, 184, 255, .10);

    filter: blur(90px);

}

.company-journey::after {

    content: "";

    position: absolute;

    right: -250px;

    bottom: -250px;

    width: 520px;

    height: 520px;

    border-radius: 50%;

    background: rgba(10, 99, 255, .08);

    filter: blur(90px);

}

/*====================================*/

.company-journey .container {

    position: relative;

    z-index: 2;

    max-width: 1300px;

    margin: auto;

    padding: 0 20px;

}

/*====================================*/

.company-journey .section-title {

    text-align: center;

    max-width: 850px;

    margin: 0 auto 80px;

}

.company-journey .section-title span {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 24px;

    border-radius: 60px;

    background: rgba(20, 184, 255, .08);

    border: 1px solid rgba(20, 184, 255, .18);

    color: #0a63ff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-bottom: 25px;

}

.company-journey .section-title span::before {

    content: "";

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #14b8ff;

}

.company-journey .section-title h2 {

    font-size: 54px;

    line-height: 1.15;

    font-weight: 800;

    color: #081b4b;

    letter-spacing: -2px;

    margin-bottom: 25px;

}

.company-journey .section-title p {

    font-size: 18px;

    line-height: 1.9;

    color: #64748b;

}

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

.journey-wrapper {

    position: relative;

    max-width: 1100px;

    margin: auto;

    padding-left: 80px;

}

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

.journey-wrapper::before {

    content: "";

    position: absolute;

    left: 28px;

    top: 0;

    bottom: 0;

    width: 4px;

    border-radius: 20px;

    background: linear-gradient(180deg,
            #18b8ff,
            #0a63ff);

}

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

.journey-item {

    position: relative;

    margin-bottom: 45px;

}

.journey-item:last-child {

    margin-bottom: 0;

}

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

.journey-item::before {

    content: "";

    position: absolute;

    left: -64px;

    top: 18px;

    width: 20px;

    height: 20px;

    border-radius: 50%;

    background: #14b8ff;

    border: 6px solid #fff;

    box-shadow:

        0 0 0 8px rgba(20, 184, 255, .15);

}

/*====================================
YEAR BADGE
====================================*/

.journey-year {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 180px;

    height: 48px;

    padding: 0 24px;

    border-radius: 50px;

    background: linear-gradient(135deg,
            #14b8ff,
            #0a63ff);

    color: #fff;

    font-size: 15px;

    font-weight: 700;

    margin-bottom: 22px;

    box-shadow:

        0 15px 35px rgba(10, 99, 255, .22);

}

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

.journey-content {

    background: #fff;

    border-radius: 24px;

    padding: 35px;

    border: 1px solid rgba(10, 99, 255, .08);

    box-shadow:

        0 18px 45px rgba(0, 0, 0, .05);

}

.journey-content h3 {

    font-size: 28px;

    color: #081b4b;

    font-weight: 700;

    margin-bottom: 18px;

}

.journey-content p {

    color: #64748b;

    line-height: 1.9;

    font-size: 16px;

}

/*==================================================
COMPANY JOURNEY
PART 2
GLASS EFFECT + HOVER
==================================================*/

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

.journey-content {

    position: relative;

    overflow: hidden;

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

    backdrop-filter: blur(25px);

    -webkit-backdrop-filter: blur(25px);

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

    transition: .45s;

}

/*==========================================
TOP BORDER
==========================================*/

.journey-content::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 5px;

    background: linear-gradient(90deg,
            #18b8ff,
            #0a63ff,
            #18b8ff);

}

/*==========================================
SHINE EFFECT
==========================================*/

.journey-content::after {

    content: "";

    position: absolute;

    top: -120px;

    left: -230px;

    width: 180px;

    height: 500px;

    transform: rotate(25deg);

    background: linear-gradient(transparent,
            rgba(255, 255, 255, .75),
            transparent);

    transition: 1.3s;

}

.journey-item:hover .journey-content::after {

    left: 700px;

}

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

.journey-item:hover .journey-content {

    transform: translateY(-8px);

    box-shadow:

        0 30px 70px rgba(10, 99, 255, .14);

}

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

.journey-content h3 {

    transition: .35s;

}

.journey-item:hover .journey-content h3 {

    color: #0a63ff;

}

/*==========================================
YEAR BADGE
==========================================*/

.journey-year {

    transition: .35s;

}

.journey-item:hover .journey-year {

    transform: translateX(10px);

    box-shadow:

        0 20px 45px rgba(10, 99, 255, .28);

}

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

.journey-item::before {

    transition: .35s;

}

.journey-item:hover::before {

    transform: scale(1.3);

    box-shadow:

        0 0 0 10px rgba(20, 184, 255, .20);

}

/*==========================================
LINE GLOW
==========================================*/

.journey-wrapper::after {

    content: "";

    position: absolute;

    left: 22px;

    top: 0;

    bottom: 0;

    width: 16px;

    border-radius: 20px;

    background:

        linear-gradient(180deg,
            rgba(20, 184, 255, .18),
            rgba(10, 99, 255, .10));

    filter: blur(10px);

    z-index: -1;

}

/*==========================================
FLOATING GLOW
==========================================*/

.company-journey .glow-left {

    position: absolute;

    width: 320px;

    height: 320px;

    left: -120px;

    top: 120px;

    border-radius: 50%;

    background:

        radial-gradient(circle,
            rgba(20, 184, 255, .18),
            transparent 70%);

    filter: blur(50px);

}

.company-journey .glow-right {

    position: absolute;

    width: 280px;

    height: 280px;

    right: -100px;

    bottom: 100px;

    border-radius: 50%;

    background:

        radial-gradient(circle,
            rgba(10, 99, 255, .15),
            transparent 70%);

    filter: blur(45px);

}

/*==========================================
ENTRY ANIMATION
==========================================*/

.journey-item {

    animation: timelineFade .8s ease both;

}

.journey-item:nth-child(2) {

    animation-delay: .15s;

}

.journey-item:nth-child(3) {

    animation-delay: .30s;

}

@keyframes timelineFade {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

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

.journey-content p {

    max-width: 95%;

}

/*==========================================
PREMIUM SPACING
==========================================*/

.journey-item:not(:last-child) {

    padding-bottom: 15px;

}

/*==================================================
COMPANY JOURNEY
PART 3
RESPONSIVE
==================================================*/

/*==============================
LARGE DESKTOP
==============================*/

@media(max-width:1400px) {

    .company-journey {

        padding: 110px 0;

    }

    .company-journey .section-title h2 {

        font-size: 48px;

    }

    .journey-wrapper {

        max-width: 1000px;

    }

}

/*==============================
LAPTOP
==============================*/

@media(max-width:1200px) {

    .company-journey {

        padding: 90px 0;

    }

    .company-journey .section-title {

        margin-bottom: 60px;

    }

    .company-journey .section-title h2 {

        font-size: 42px;

    }

    .company-journey .section-title p {

        font-size: 17px;

    }

    .journey-wrapper {

        padding-left: 70px;

    }

    .journey-content {

        padding: 30px;

    }

    .journey-content h3 {

        font-size: 24px;

    }

}

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

@media(max-width:992px) {

    .company-journey {

        padding: 80px 0;

    }

    .company-journey .section-title h2 {

        font-size: 36px;

        line-height: 1.2;

    }

    .company-journey .section-title p {

        font-size: 16px;

        line-height: 1.8;

    }

    .journey-wrapper {

        padding-left: 55px;

    }

    .journey-wrapper::before {

        left: 20px;

    }

    .journey-wrapper::after {

        left: 14px;

    }

    .journey-item::before {

        left: -43px;

        width: 18px;

        height: 18px;

    }

    .journey-year {

        min-width: 170px;

        height: 44px;

        font-size: 14px;

    }

    .journey-content {

        padding: 28px;

    }

    .journey-content h3 {

        font-size: 22px;

    }

    .journey-content p {

        font-size: 15px;

    }

}

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

@media(max-width:768px) {

    .company-journey {

        padding: 70px 0;

    }

    .company-journey .section-title {

        margin-bottom: 50px;

    }

    .company-journey .section-title span {

        font-size: 11px;

        padding: 10px 18px;

        letter-spacing: 1px;

    }

    .company-journey .section-title h2 {

        font-size: 30px;

        letter-spacing: -1px;

    }

    .company-journey .section-title p {

        font-size: 15px;

        line-height: 1.8;

    }

    .journey-wrapper {

        padding-left: 38px;

    }

    .journey-wrapper::before {

        left: 12px;

        width: 3px;

    }

    .journey-wrapper::after {

        display: none;

    }

    .journey-item {

        margin-bottom: 35px;

    }

    .journey-item::before {

        left: -33px;

        width: 16px;

        height: 16px;

        border-width: 5px;

    }

    .journey-year {

        min-width: 160px;

        height: 42px;

        font-size: 13px;

        padding: 0 18px;

        margin-bottom: 18px;

    }

    .journey-content {

        padding: 24px;

        border-radius: 20px;

    }

    .journey-content h3 {

        font-size: 20px;

        margin-bottom: 14px;

    }

    .journey-content p {

        font-size: 14px;

        line-height: 1.8;

        max-width: 100%;

    }

}

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

@media(max-width:480px) {

    .company-journey {

        padding: 60px 0;

    }

    .company-journey .section-title h2 {

        font-size: 26px;

    }

    .company-journey .section-title p {

        font-size: 14px;

    }

    .journey-wrapper {

        padding-left: 28px;

    }

    .journey-wrapper::before {

        left: 8px;

    }

    .journey-item::before {

        left: -24px;

        width: 14px;

        height: 14px;

        border-width: 4px;

    }

    .journey-year {

        width: 100%;

        min-width: 100%;

        justify-content: center;

        font-size: 13px;

        height: 40px;

        margin-bottom: 16px;

    }

    .journey-content {

        padding: 20px;

        border-radius: 18px;

    }

    .journey-content h3 {

        font-size: 18px;

    }

    .journey-content p {

        font-size: 13px;

    }

}

/*==============================
REDUCED MOTION
==============================*/

@media(prefers-reduced-motion:reduce) {

    .journey-item,
    .journey-content,
    .journey-year,
    .company-journey::before,
    .company-journey::after {

        animation: none !important;

        transition: none !important;

    }

}

/*==============================
PRINT
==============================*/

@media print {

    .company-journey {

        background: #fff;

        padding: 30px 0;

    }

    .company-journey::before,
    .company-journey::after,
    .glow-left,
    .glow-right {

        display: none;

    }

    .journey-content {

        box-shadow: none;

        border: 1px solid #ddd;

    }

}


/*==============================
MISSION & VISION
===============================*/

.mission-vision {
    position: relative;
    padding: 110px 0;
    background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
    overflow: hidden;
}

.mission-vision::before {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    background: rgba(31, 110, 255, .06);
    top: -180px;
    left: -180px;
    filter: blur(40px);
}

.mission-vision::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: rgba(0, 193, 255, .08);
    right: -150px;
    bottom: -150px;
    filter: blur(50px);
}

.mission-vision .container {
    max-width: 1240px;
    margin: auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

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

.section-title {
    max-width: 760px;
    margin: 0 auto 70px;
    text-align: center;
}

.section-title span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 50px;
    background: #eaf3ff;
    color: #1466ff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.section-title h2 {
    margin: 22px 0;
    font-size: 52px;
    line-height: 1.15;
    font-weight: 800;
    color: #081c3d;
}

.section-title p {
    font-size: 18px;
    line-height: 1.9;
    color: #6f7b8f;
}

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

.mission-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
}

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

.mission-card {
    position: relative;
    background: #fff;
    padding: 45px;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid #edf2f8;
    transition: .45s;
    box-shadow: 0 20px 60px rgba(0, 30, 80, .08);
}

.mission-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 28px;
    background: linear-gradient(135deg, #0f62fe, #2bc7ff);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: .4s;
}

.mission-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 35px 80px rgba(15, 98, 254, .18);
}

.mission-card:hover::before {
    opacity: 1;
}

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

.card-number {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #1466ff, #00c2ff);
    margin-bottom: 28px;
    box-shadow: 0 15px 35px rgba(20, 102, 255, .28);
}

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

.mission-card h3 {
    font-size: 32px;
    color: #081c3d;
    margin-bottom: 18px;
    font-weight: 700;
}

.mission-card p {
    font-size: 17px;
    line-height: 1.9;
    color: #66758b;
    margin-bottom: 30px;
}

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

.mission-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mission-card ul li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 17px;
    color: #24364f;
    font-weight: 600;
    padding: 15px 0;
    border-top: 1px solid #eef2f8;
}

.mission-card ul li:first-child {
    border-top: none;
}

.mission-card ul li::before {
    content: "✓";
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    background: linear-gradient(135deg, #1466ff, #00c2ff);
}

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

@media(max-width:991px) {

    .section-title h2 {
        font-size: 40px;
    }

    .mission-grid {
        grid-template-columns: 1fr;
    }

    .mission-card {
        padding: 35px;
    }

}

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

@media(max-width:767px) {

    .mission-vision {
        padding: 80px 0;
    }

    .section-title {
        margin-bottom: 50px;
    }

    .section-title h2 {
        font-size: 32px;
    }

    .section-title p {
        font-size: 16px;
    }

    .mission-card {
        padding: 28px;
        border-radius: 22px;
    }

    .card-number {
        width: 60px;
        height: 60px;
        font-size: 20px;
    }

    .mission-card h3 {
        font-size: 26px;
    }

    .mission-card p {
        font-size: 15px;
    }

    .mission-card ul li {
        font-size: 15px;
        gap: 10px;
    }

}

/*======================================
FOUNDER SECTION
======================================*/

.founder-section {
    position: relative;
    padding: 110px 0;
    background: #ffffff;
    overflow: hidden;
}

.founder-section::before {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    background: rgba(20, 102, 255, .05);
    border-radius: 50%;
    top: -180px;
    right: -180px;
    filter: blur(60px);
}

.founder-section::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    background: rgba(0, 194, 255, .07);
    border-radius: 50%;
    bottom: -150px;
    left: -120px;
    filter: blur(60px);
}

.founder-section .container {
    max-width: 1240px;
    margin: auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

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

.founder-wrapper {
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 70px;
    align-items: center;
}

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

.founder-left span {
    display: inline-block;
    padding: 8px 18px;
    background: #eaf3ff;
    color: #1565ff;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 25px;
}

.founder-left h2 {
    font-size: 56px;
    line-height: 1.1;
    color: #081c3d;
    margin-bottom: 28px;
    font-weight: 800;
}

.founder-left p {
    font-size: 17px;
    line-height: 1.95;
    color: #66758b;
    margin-bottom: 25px;
}

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

.founder-card {
    position: relative;
    background: #ffffff;
    border-radius: 30px;
    padding: 45px;
    overflow: hidden;
    border: 1px solid #edf2f8;
    box-shadow: 0 25px 70px rgba(0, 35, 90, .08);
    transition: .45s;
}

.founder-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #1466ff, #00c2ff);
}

.founder-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 35px 90px rgba(20, 102, 255, .16);
}

.founder-card span {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #1565ff;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.founder-card h3 {
    font-size: 34px;
    color: #081c3d;
    margin-bottom: 35px;
    line-height: 1.3;
}

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

.founder-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.founder-card li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 25px;
    padding: 18px 0;
    border-bottom: 1px solid #edf2f8;
    font-size: 16px;
    color: #6d7788;
}

.founder-card li:last-child {
    border-bottom: none;
}

.founder-card strong {
    color: #081c3d;
    font-size: 16px;
    font-weight: 700;
    text-align: right;
    max-width: 170px;
}

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

@media(max-width:991px) {

    .founder-wrapper {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .founder-left h2 {
        font-size: 44px;
    }

    .founder-card {
        padding: 35px;
    }

}

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

@media(max-width:767px) {

    .founder-section {
        padding: 80px 0;
    }

    .founder-left h2 {
        font-size: 34px;
    }

    .founder-left p {
        font-size: 15px;
    }

    .founder-card {
        padding: 28px;
        border-radius: 22px;
    }

    .founder-card h3 {
        font-size: 26px;
    }

    .founder-card li {
        flex-direction: column;
        gap: 8px;
        padding: 16px 0;
    }

    .founder-card strong {
        text-align: left;
        max-width: 100%;
    }

}

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

.core-values {
    position: relative;
    padding: 110px 0;
    background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
    overflow: hidden;
}

.core-values::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(20, 102, 255, .05);
    top: -180px;
    left: -180px;
    filter: blur(70px);
}

.core-values::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: rgba(0, 194, 255, .08);
    right: -150px;
    bottom: -150px;
    filter: blur(70px);
}

.core-values .container {
    max-width: 1240px;
    margin: auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

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

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

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

.value-card {
    position: relative;
    background: #fff;
    padding: 45px 35px;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid #edf2f8;
    box-shadow: 0 18px 55px rgba(0, 30, 80, .07);
    transition: .45s ease;
}

.value-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #1466ff, #00c2ff);
}

.value-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 30px 70px rgba(20, 102, 255, .15);
}

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

.value-card span {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    background: linear-gradient(135deg, #1466ff, #00c2ff);
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    box-shadow: 0 15px 35px rgba(20, 102, 255, .25);
}

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

.value-card h3 {
    font-size: 28px;
    line-height: 1.3;
    color: #081c3d;
    margin-bottom: 18px;
    font-weight: 700;
}

.value-card p {
    font-size: 16px;
    line-height: 1.9;
    color: #6b778d;
}

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

.value-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 26px;
    border: 2px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, #1466ff, #00c2ff) border-box;
    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: .4s;
}

.value-card:hover::after {
    opacity: 1;
}

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

@media(max-width:991px) {

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

    .value-card {
        padding: 35px 30px;
    }

    .value-card h3 {
        font-size: 24px;
    }

}

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

@media(max-width:767px) {

    .core-values {
        padding: 80px 0;
    }

    .values-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .value-card {
        padding: 30px 25px;
        border-radius: 22px;
    }

    .value-card span {
        width: 56px;
        height: 56px;
        font-size: 20px;
    }

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

    .value-card p {
        font-size: 15px;
    }

}

/*=========================================
WHY SUPERPAGESPEEDY
=========================================*/

.why-superpagespeedy {
    position: relative;
    padding: 110px 0;
    background: #081c3d;
    overflow: hidden;
}

.why-superpagespeedy::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    background: rgba(20, 102, 255, .18);
    border-radius: 50%;
    top: -220px;
    left: -180px;
    filter: blur(80px);
}

.why-superpagespeedy::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    background: rgba(0, 194, 255, .12);
    border-radius: 50%;
    right: -150px;
    bottom: -150px;
    filter: blur(80px);
}

.why-superpagespeedy .container {
    position: relative;
    z-index: 2;
    max-width: 1240px;
    margin: auto;
    padding: 0 20px;
}

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

.why-superpagespeedy .section-title {
    max-width: 760px;
    margin: 0 auto 70px;
    text-align: center;
}

.why-superpagespeedy .section-title span {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    color: #69b6ff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.why-superpagespeedy .section-title h2 {
    margin-top: 22px;
    font-size: 52px;
    line-height: 1.2;
    color: #fff;
    font-weight: 800;
}

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

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

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

.why-item {
    position: relative;
    padding: 38px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .08);
    transition: .4s ease;
    overflow: hidden;
}

.why-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(to bottom, #00c2ff, #1466ff);
    transition: .35s;
}

.why-item:hover {
    transform: translateY(-12px);
    background: rgba(255, 255, 255, .09);
    border-color: rgba(0, 194, 255, .45);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .28);
}

.why-item:hover::before {
    width: 100%;
    height: 5px;
}

/*=========================================
ICON STYLE NUMBER
=========================================*/

.why-item::after {
    content: "✓";
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, #1466ff, #00c2ff);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 28px;
    box-shadow: 0 18px 35px rgba(20, 102, 255, .35);
}

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

.why-item h3 {
    font-size: 26px;
    line-height: 1.3;
    margin: 22px 0 18px;
    color: #fff;
    font-weight: 700;
}

.why-item p {
    font-size: 16px;
    line-height: 1.9;
    color: rgba(255, 255, 255, .78);
}

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

@media(max-width:991px) {

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

    .why-superpagespeedy .section-title h2 {
        font-size: 40px;
    }

    .why-item {
        padding: 32px;
    }

    .why-item h3 {
        font-size: 22px;
    }

}

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

@media(max-width:767px) {

    .why-superpagespeedy {
        padding: 80px 0;
    }

    .why-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .why-superpagespeedy .section-title {
        margin-bottom: 50px;
    }

    .why-superpagespeedy .section-title h2 {
        font-size: 32px;
    }

    .why-item {
        padding: 28px;
        border-radius: 20px;
    }

    .why-item::after {
        width: 50px;
        height: 50px;
        font-size: 18px;
        margin-bottom: 20px;
    }

    .why-item h3 {
        margin-top: 18px;
        font-size: 22px;
    }

    .why-item p {
        font-size: 15px;
    }

}


/*==================================================
INDUSTRIES SECTION
PART 1
==================================================*/

.industries-section {

    position: relative;

    overflow: hidden;

    padding: 120px 0;

    background:
        radial-gradient(circle at top left, #eaf8ff 0%, transparent 35%),
        radial-gradient(circle at bottom right, #dcecff 0%, transparent 40%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);

}

/*==========================================*/

.industries-section::before {

    content: "";

    position: absolute;

    top: -260px;

    left: -260px;

    width: 620px;

    height: 620px;

    border-radius: 50%;

    background: rgba(24, 184, 255, .10);

    filter: blur(90px);

}

.industries-section::after {

    content: "";

    position: absolute;

    right: -260px;

    bottom: -260px;

    width: 520px;

    height: 520px;

    border-radius: 50%;

    background: rgba(10, 99, 255, .08);

    filter: blur(90px);

}

/*==========================================*/

.industries-section .container {

    position: relative;

    z-index: 2;

    max-width: 1400px;

    margin: auto;

    padding: 0 20px;

}

/*==========================================*/

.industries-section .section-title {

    text-align: center;

    max-width: 850px;

    margin: 0 auto 70px;

}

/*==========================================*/

.industries-section .section-title span {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 24px;

    background: rgba(20, 184, 255, .08);

    border: 1px solid rgba(20, 184, 255, .18);

    border-radius: 50px;

    color: #0a63ff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-bottom: 24px;

}

.industries-section .section-title span::before {

    content: "";

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #14b8ff;

}

/*==========================================*/

.industries-section .section-title h2 {

    font-size: 54px;

    font-weight: 800;

    color: #081b4b;

    line-height: 1.15;

    letter-spacing: -2px;

    margin-bottom: 22px;

}

/*==========================================*/

.industries-section .section-title p {

    font-size: 18px;

    color: #64748b;

    line-height: 1.9;

}

/*==========================================*/

.industry-grid {

    display: grid;

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

    gap: 25px;

}

/*==========================================*/

.industry-box {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 150px;

    padding: 30px;

    background: #ffffff;

    border: 1px solid rgba(10, 99, 255, .08);

    border-radius: 24px;

    text-align: center;

    font-size: 18px;

    font-weight: 700;

    color: #081b4b;

    overflow: hidden;

    transition: .35s;

}

/*==========================================*/

.industry-box::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 5px;

    background: linear-gradient(90deg,
            #18b8ff,
            #0a63ff);

}

/*==========================================*/

.industry-box::after {

    content: "";

    position: absolute;

    width: 14px;

    height: 14px;

    border-radius: 50%;

    background: #18b8ff;

    left: 22px;

    top: 22px;

    box-shadow: 0 0 0 8px rgba(20, 184, 255, .10);

}

/*==========================================*/

.industry-box:hover {

    transform: translateY(-8px);

    box-shadow:

        0 25px 60px rgba(10, 99, 255, .12);

}

/*==================================================
INDUSTRIES SECTION
PART 2
GLASS EFFECT + PREMIUM HOVER
==================================================*/

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

.industry-grid {

    position: relative;

}

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

.industry-box {

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

    backdrop-filter: blur(22px);

    -webkit-backdrop-filter: blur(22px);

    overflow: hidden;

    transition: .45s;

}

/*==========================================
GRADIENT BORDER
==========================================*/

.industry-box::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 5px;

    background: linear-gradient(90deg,
            #18b8ff,
            #0a63ff,
            #18b8ff);

}

/*==========================================
SHINE EFFECT
==========================================*/

.industry-box span {

    position: relative;

    z-index: 3;

}

.industry-box::after {

    content: "";

    position: absolute;

    top: -120px;

    left: -220px;

    width: 170px;

    height: 500px;

    background: linear-gradient(transparent,
            rgba(255, 255, 255, .75),
            transparent);

    transform: rotate(25deg);

    transition: 1.3s;

}

.industry-box:hover::after {

    left: 420px;

}

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

.industry-box:hover {

    transform: translateY(-10px);

    border-color: #0a63ff;

    box-shadow:

        0 30px 70px rgba(10, 99, 255, .15);

}

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

.industry-box {

    color: #081b4b;

    font-weight: 700;

    transition: .35s;

}

.industry-box:hover {

    color: #0a63ff;

}

/*==========================================
GLOW DOT
==========================================*/

.industry-box::marker {

    display: none;

}

/*==========================================
FLOATING BACKGROUND
==========================================*/

.industries-section .glow-one {

    position: absolute;

    width: 320px;

    height: 320px;

    left: -120px;

    top: 150px;

    border-radius: 50%;

    background:

        radial-gradient(circle,
            rgba(24, 184, 255, .18),
            transparent 70%);

    filter: blur(50px);

    animation: industryGlowOne 8s ease-in-out infinite;

}

.industries-section .glow-two {

    position: absolute;

    width: 260px;

    height: 260px;

    right: -90px;

    bottom: 100px;

    border-radius: 50%;

    background:

        radial-gradient(circle,
            rgba(10, 99, 255, .16),
            transparent 70%);

    filter: blur(45px);

    animation: industryGlowTwo 10s ease-in-out infinite;

}

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

@keyframes industryGlowOne {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-25px);

    }

}

@keyframes industryGlowTwo {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(25px);

    }

}

/*==========================================
ENTRY
==========================================*/

.industry-box {

    animation: industryFade .8s ease both;

}

.industry-box:nth-child(2) {
    animation-delay: .05s;
}

.industry-box:nth-child(3) {
    animation-delay: .10s;
}

.industry-box:nth-child(4) {
    animation-delay: .15s;
}

.industry-box:nth-child(5) {
    animation-delay: .20s;
}

.industry-box:nth-child(6) {
    animation-delay: .25s;
}

.industry-box:nth-child(7) {
    animation-delay: .30s;
}

.industry-box:nth-child(8) {
    animation-delay: .35s;
}

.industry-box:nth-child(9) {
    animation-delay: .40s;
}

.industry-box:nth-child(10) {
    animation-delay: .45s;
}

.industry-box:nth-child(11) {
    animation-delay: .50s;
}

.industry-box:nth-child(12) {
    animation-delay: .55s;
}

@keyframes industryFade {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/*==========================================
PREMIUM SHADOW
==========================================*/

.industry-box {

    box-shadow:

        0 15px 40px rgba(0, 0, 0, .05);

}

/*==================================================
INDUSTRIES SECTION
PART 3
RESPONSIVE
==================================================*/

/*==========================================
LARGE DESKTOP
==========================================*/

@media (max-width:1400px) {

    .industries-section {

        padding: 110px 0;

    }

    .industries-section .section-title h2 {

        font-size: 48px;

    }

    .industry-grid {

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

        gap: 22px;

    }

}

/*==========================================
LAPTOP
==========================================*/

@media (max-width:1200px) {

    .industries-section {

        padding: 90px 0;

    }

    .industries-section .section-title {

        margin-bottom: 60px;

    }

    .industries-section .section-title h2 {

        font-size: 42px;

    }

    .industries-section .section-title p {

        font-size: 17px;

    }

    .industry-grid {

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

        gap: 22px;

    }

    .industry-box {

        min-height: 145px;

        padding: 26px;

        font-size: 17px;

    }

}

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

@media (max-width:992px) {

    .industries-section {

        padding: 80px 0;

    }

    .industries-section .section-title h2 {

        font-size: 36px;

        line-height: 1.2;

    }

    .industries-section .section-title p {

        font-size: 16px;

        line-height: 1.8;

    }

    .industry-grid {

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

        gap: 20px;

    }

    .industry-box {

        min-height: 140px;

        padding: 24px;

        font-size: 16px;

        border-radius: 20px;

    }

}

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

@media (max-width:768px) {

    .industries-section {

        padding: 70px 0;

    }

    .industries-section .section-title {

        margin-bottom: 50px;

    }

    .industries-section .section-title span {

        font-size: 11px;

        padding: 10px 18px;

        letter-spacing: 1px;

    }

    .industries-section .section-title h2 {

        font-size: 30px;

        letter-spacing: -1px;

    }

    .industries-section .section-title p {

        font-size: 15px;

        line-height: 1.8;

    }

    .industry-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }

    .industry-box {

        min-height: 90px;

        padding: 22px;

        font-size: 15px;

        justify-content: flex-start;

        text-align: left;

        padding-left: 65px;

    }

    .industry-box::after {

        left: 25px;

        top: 50%;

        transform: translateY(-50%);

    }

}

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

@media (max-width:480px) {

    .industries-section {

        padding: 60px 0;

    }

    .industries-section .section-title h2 {

        font-size: 26px;

    }

    .industries-section .section-title p {

        font-size: 14px;

    }

    .industry-box {

        min-height: 82px;

        font-size: 14px;

        padding: 20px;

        padding-left: 58px;

        border-radius: 18px;

    }

    .industry-box::after {

        width: 12px;

        height: 12px;

        left: 20px;

        box-shadow: 0 0 0 6px rgba(20, 184, 255, .10);

    }

}

/*==========================================
HOVER DISABLE ON TOUCH DEVICES
==========================================*/

@media (hover:none) {

    .industry-box:hover {

        transform: none;

        box-shadow: 0 15px 35px rgba(0, 0, 0, .05);

    }

}

/*==========================================
REDUCE MOTION
==========================================*/

@media (prefers-reduced-motion:reduce) {

    .industry-box,
    .glow-one,
    .glow-two {

        animation: none !important;

        transition: none !important;

    }

}

/*==========================================
PRINT
==========================================*/

@media print {

    .industries-section {

        background: #ffffff;

        padding: 30px 0;

    }

    .industries-section::before,
    .industries-section::after,
    .glow-one,
    .glow-two {

        display: none;

    }

    .industry-grid {

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

        gap: 12px;

    }

    .industry-box {

        box-shadow: none;

        border: 1px solid #d9d9d9;

        background: #ffffff;

        min-height: auto;

        padding: 15px;

    }

}

.industry-box {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    text-align: left;

    min-height: 260px;

    padding: 35px;

}

.industry-box span {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 55px;

    height: 55px;

    border-radius: 50%;

    background: linear-gradient(135deg, #18b8ff, #0a63ff);

    color: #fff;

    font-size: 18px;

    font-weight: 700;

    margin-bottom: 25px;

    position: relative;

    z-index: 2;

}

.industry-box h3 {

    font-size: 24px;

    color: #081b4b;

    margin-bottom: 18px;

    font-weight: 700;

    line-height: 1.3;

}

.industry-box p {

    font-size: 15px;

    line-height: 1.8;

    color: #64748b;

    margin: 0;

}


/*==================================================
SUPPORTED PLATFORMS
PART 1
==================================================*/

.platforms {

    position: relative;

    overflow: hidden;

    padding: 120px 0;

    background:
        radial-gradient(circle at top left, #eaf8ff 0%, transparent 35%),
        radial-gradient(circle at bottom right, #dcebff 0%, transparent 40%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);

}

/*================================*/

.platforms::before {

    content: "";

    position: absolute;

    top: -260px;

    left: -260px;

    width: 620px;

    height: 620px;

    border-radius: 50%;

    background: rgba(24, 184, 255, .10);

    filter: blur(90px);

}

.platforms::after {

    content: "";

    position: absolute;

    right: -260px;

    bottom: -260px;

    width: 520px;

    height: 520px;

    border-radius: 50%;

    background: rgba(10, 99, 255, .08);

    filter: blur(90px);

}

/*================================*/

.platforms .container {

    position: relative;

    z-index: 2;

    max-width: 1400px;

    margin: auto;

    padding: 0 20px;

}

/*================================*/

.platforms .section-title {

    max-width: 850px;

    text-align: center;

    margin: 0 auto 70px;

}

.platforms .section-title span {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 24px;

    border-radius: 60px;

    background: rgba(24, 184, 255, .08);

    border: 1px solid rgba(24, 184, 255, .18);

    color: #0a63ff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-bottom: 25px;

}

.platforms .section-title span::before {

    content: "";

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #14b8ff;

}

.platforms .section-title h2 {

    font-size: 54px;

    font-weight: 800;

    line-height: 1.15;

    color: #081b4b;

    letter-spacing: -2px;

    margin-bottom: 24px;

}

.platforms .section-title p {

    font-size: 18px;

    line-height: 1.9;

    color: #64748b;

}

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

.platform-grid {

    display: grid;

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

    gap: 28px;

}

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

.platform-item {

    position: relative;

    background: #ffffff;

    border-radius: 24px;

    padding: 35px;

    border: 1px solid rgba(10, 99, 255, .08);

    overflow: hidden;

    transition: .35s;

    min-height: 240px;

}

/*==================================
TOP BAR
==================================*/

.platform-item::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 5px;

    background: linear-gradient(90deg,
            #18b8ff,
            #0a63ff);

}

/*==================================
BLUE DOT
==================================*/

.platform-item::after {

    content: "";

    position: absolute;

    width: 14px;

    height: 14px;

    left: 30px;

    top: 30px;

    border-radius: 50%;

    background: #18b8ff;

    box-shadow: 0 0 0 8px rgba(24, 184, 255, .12);

}

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

.platform-item h3 {

    font-size: 28px;

    color: #081b4b;

    font-weight: 700;

    margin-top: 28px;

    margin-bottom: 20px;

    line-height: 1.3;

}

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

.platform-item p {

    color: #64748b;

    font-size: 16px;

    line-height: 1.9;

    margin: 0;

}

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

.platform-item:hover {

    transform: translateY(-8px);

    box-shadow:

        0 25px 60px rgba(10, 99, 255, .12);

}

/*==================================================
SUPPORTED PLATFORMS
PART 2
GLASS EFFECT + PREMIUM HOVER
==================================================*/

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

.platform-item {

    position: relative;

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

    backdrop-filter: blur(24px);

    -webkit-backdrop-filter: blur(24px);

    overflow: hidden;

    transition: .45s ease;

}

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

.platform-item::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 5px;

    background: linear-gradient(90deg,
            #18b8ff,
            #0a63ff,
            #18b8ff);

    background-size: 300%;

    animation: platformGradient 6s linear infinite;

}

@keyframes platformGradient {

    0% {

        background-position: 0 0;

    }

    100% {

        background-position: 300% 0;

    }

}

/*=========================================
SHINE EFFECT
=========================================*/

.platform-item::after {

    content: "";

    position: absolute;

    top: -120px;

    left: -220px;

    width: 180px;

    height: 520px;

    transform: rotate(25deg);

    background: linear-gradient(transparent,

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

            transparent);

    transition: 1.2s;

}

.platform-item:hover::after {

    left: 500px;

}

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

.platform-item h3 {

    position: relative;

    z-index: 2;

    transition: .35s;

}

.platform-item:hover h3 {

    color: #0a63ff;

}

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

.platform-item p {

    position: relative;

    z-index: 2;

}

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

.platform-item:hover {

    transform: translateY(-10px);

    border-color: #0a63ff;

    box-shadow:

        0 35px 70px rgba(10, 99, 255, .16);

}

/*=========================================
GLOW DOT
=========================================*/

.platform-item .dot {

    display: none;

}

/*=========================================
FLOATING GLOW
=========================================*/

.platforms .platform-glow-left {

    position: absolute;

    width: 320px;

    height: 320px;

    left: -120px;

    top: 180px;

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(20, 184, 255, .18),

            transparent 70%);

    filter: blur(50px);

    animation: platformGlowOne 8s ease-in-out infinite;

}

.platforms .platform-glow-right {

    position: absolute;

    width: 260px;

    height: 260px;

    right: -100px;

    bottom: 100px;

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(10, 99, 255, .15),

            transparent 70%);

    filter: blur(45px);

    animation: platformGlowTwo 10s ease-in-out infinite;

}

@keyframes platformGlowOne {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-25px);

    }

}

@keyframes platformGlowTwo {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(25px);

    }

}

/*=========================================
ENTRY ANIMATION
=========================================*/

.platform-item {

    animation: platformFade .8s ease both;

}

.platform-item:nth-child(2) {
    animation-delay: .05s;
}

.platform-item:nth-child(3) {
    animation-delay: .10s;
}

.platform-item:nth-child(4) {
    animation-delay: .15s;
}

.platform-item:nth-child(5) {
    animation-delay: .20s;
}

.platform-item:nth-child(6) {
    animation-delay: .25s;
}

.platform-item:nth-child(7) {
    animation-delay: .30s;
}

.platform-item:nth-child(8) {
    animation-delay: .35s;
}

.platform-item:nth-child(9) {
    animation-delay: .40s;
}

.platform-item:nth-child(10) {
    animation-delay: .45s;
}

.platform-item:nth-child(11) {
    animation-delay: .50s;
}

.platform-item:nth-child(12) {
    animation-delay: .55s;
}

.platform-item:nth-child(13) {
    animation-delay: .60s;
}

.platform-item:nth-child(14) {
    animation-delay: .65s;
}

.platform-item:nth-child(15) {
    animation-delay: .70s;
}

.platform-item:nth-child(16) {
    animation-delay: .75s;
}

.platform-item:nth-child(17) {
    animation-delay: .80s;
}

.platform-item:nth-child(18) {
    animation-delay: .85s;
}

@keyframes platformFade {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

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

.platform-item::marker {

    display: none;

}

/*==================================================
SUPPORTED PLATFORMS
PART 3
RESPONSIVE + FINAL POLISH
==================================================*/

/*==============================
LARGE DESKTOP
==============================*/

@media (max-width:1400px) {

    .platforms {

        padding: 110px 0;

    }

    .platforms .section-title h2 {

        font-size: 48px;

    }

    .platform-grid {

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

        gap: 24px;

    }

    .platform-item {

        padding: 32px;

        min-height: 230px;

    }

    .platform-item h3 {

        font-size: 26px;

    }

}

/*==============================
LAPTOP
==============================*/

@media (max-width:1200px) {

    .platforms {

        padding: 90px 0;

    }

    .platforms .section-title {

        margin-bottom: 60px;

    }

    .platforms .section-title h2 {

        font-size: 42px;

    }

    .platforms .section-title p {

        font-size: 17px;

    }

    .platform-grid {

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

        gap: 22px;

    }

    .platform-item {

        min-height: 220px;

        padding: 30px;

    }

    .platform-item h3 {

        font-size: 24px;

        margin-top: 24px;

    }

    .platform-item p {

        font-size: 15px;

    }

}

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

@media (max-width:992px) {

    .platforms {

        padding: 80px 0;

    }

    .platforms .section-title h2 {

        font-size: 36px;

        line-height: 1.2;

    }

    .platforms .section-title p {

        font-size: 16px;

        line-height: 1.8;

    }

    .platform-grid {

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

        gap: 20px;

    }

    .platform-item {

        padding: 28px;

        border-radius: 22px;

        min-height: 210px;

    }

    .platform-item::after {

        left: 24px;

        top: 24px;

    }

    .platform-item h3 {

        font-size: 22px;

        margin-top: 22px;

        margin-bottom: 16px;

    }

}

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

@media (max-width:768px) {

    .platforms {

        padding: 70px 0;

    }

    .platforms .section-title {

        margin-bottom: 50px;

    }

    .platforms .section-title span {

        font-size: 11px;

        padding: 10px 18px;

        letter-spacing: 1px;

    }

    .platforms .section-title h2 {

        font-size: 30px;

        letter-spacing: -1px;

    }

    .platforms .section-title p {

        font-size: 15px;

        line-height: 1.8;

    }

    .platform-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }

    .platform-item {

        min-height: auto;

        padding: 24px;

        border-radius: 20px;

    }

    .platform-item::after {

        left: 22px;

        top: 22px;

        width: 12px;

        height: 12px;

    }

    .platform-item h3 {

        font-size: 20px;

        margin-top: 18px;

        margin-bottom: 14px;

    }

    .platform-item p {

        font-size: 14px;

        line-height: 1.8;

    }

}

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

@media (max-width:480px) {

    .platforms {

        padding: 60px 0;

    }

    .platforms .section-title h2 {

        font-size: 26px;

    }

    .platforms .section-title p {

        font-size: 14px;

    }

    .platform-item {

        padding: 20px;

        border-radius: 18px;

    }

    .platform-item::after {

        left: 18px;

        top: 18px;

        width: 10px;

        height: 10px;

        box-shadow: 0 0 0 6px rgba(24, 184, 255, .12);

    }

    .platform-item h3 {

        font-size: 18px;

        margin-top: 14px;

    }

    .platform-item p {

        font-size: 13px;

        line-height: 1.7;

    }

}

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

@media (hover:none) {

    .platform-item:hover {

        transform: none;

        box-shadow: 0 15px 35px rgba(0, 0, 0, .05);

    }

    .platform-item:hover::after {

        left: 30px;

    }

}

/*==============================
REDUCE MOTION
==============================*/

@media (prefers-reduced-motion:reduce) {

    .platform-item,
    .platform-glow-left,
    .platform-glow-right {

        animation: none !important;

        transition: none !important;

    }

}

/*==============================
PRINT
==============================*/

@media print {

    .platforms {

        background: #ffffff;

        padding: 30px 0;

    }

    .platforms::before,
    .platforms::after,
    .platform-glow-left,
    .platform-glow-right {

        display: none;

    }

    .platform-grid {

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

        gap: 15px;

    }

    .platform-item {

        box-shadow: none;

        background: #fff;

        border: 1px solid #ddd;

        padding: 18px;

        min-height: auto;

    }

}