/*====================================================
  DESKTOP.CSS
  BÖLÜM 1
====================================================*/



    /*====================================================
  01. VARIABLES
====================================================*/



@media (min-width:992px)

{
    .menu a:not(.menu__cta)::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -3px;
        width: 0;
        height: 3px;
        background: var(--orange);
        transition: var(--transition);
    }
    .menu a:hover,
    .menu a.active {
        color: var(--blue);
    }
      .hero__services {
        list-style: none;
        margin: 10px 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(220px, 1fr));
        gap: 14px 24px;
    }

}

    :root {
        --blue: #316bff;
        --blue2: #1b4fe0;
        --orange: #ff8a3d;
        --dark: #102039;
        --text: #657086;
        --soft: #f6f9ff;
        --white: #fff;
        --shadow: 0 18px 45px rgba(25,50,100,.12);
        --shadow-lg: 0 30px 70px rgba(16,32,57,.12);
        --radius: 22px;
        --radius-lg: 28px;
        --transition: .35s cubic-bezier(.22,.61,.36,1);
    }

    /*====================================================
  02. RESET
====================================================*/
    .reveal p {
        padding-bottom: 10px;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: Nunito,Arial,sans-serif;
        background: #fff;
        color: var(--text);
        line-height: 1.65;
        overflow-x: hidden;
    }

    .logo img {
        width: 240px !important;
    }

    img {
        display: block;
        max-width: 100%;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    ul {
        list-style: none;
    }

    section {
        position: relative;
        z-index: 2;
    }

    .container {
        width: min(1170px,92%);
        margin-inline: auto;
    }

    .section-pad {
        position: relative;
        padding: 60px 0;
    }

        .section-pad::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            border-radius: 30px;
            background: #ff8a3d;
            opacity: .12;
        }

    /*====================================================
  TYPOGRAPHY
====================================================*/

    .eyebrow {
        color: var(--orange);
        font-weight: 900;
        letter-spacing: 0;
        margin-bottom: 10px;
        font-size: 20px;
    }

    h2 {
        font-size: clamp(30px,4vw,30px);
        line-height: 1.12;
        color: var(--dark);
        margin-bottom: 18px;
        font-weight: 900;
        letter-spacing: -1px;
    }

    h3 {
        color: var(--dark);
        font-size: 22px;
        margin-bottom: 12px;
    }

    .lead {
        font-size: 19px;
        max-width: 620px;
    }

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

        .section-title h2 {
            position: relative;
            display: inline-block;
            padding-bottom: 18px;
        }

            .section-title h2::after {
                content: "";
                position: absolute;
                left: 50%;
                bottom: 0;
                transform: translateX(-50%);
                width: 70px;
                height: 4px;
                background: var(--orange);
                border-radius: 30px;
            }
    /*====================================================
  HEADER
====================================================*/

    .topbar {
        background: #0d1a32;
        color: #d9e2ff;
        font-size: 14px;
    }

    .topbar__inner {
        min-height: 46px;
        display: flex;
        align-items: center;
        gap: 24px;
    }

    .topbar-left {
        display: flex;
        align-items: center;
        gap: 25px;
    }

    .topbar-right {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .topbar-right a {
            transition: var(--transition);
            font-weight: 700;
        }

            .topbar-right a:hover {
                transform: translateY(-3px);
                font-weight: 700;
            }

    .topbar__social,
    .footer-social {
        display: flex;
        gap: 10px;
    }

    .topbar__social {
        margin-left: auto;
    }

        .topbar__social a,
        .footer-social a {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: rgba(255,255,255,.12);
            font-size: 12px;
        }

    .top-whatsapp {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 18px;
        border-radius: 50px;
        background: #25D366;
        color: #fff;
        font-weight: 700;
        transition: var(--transition);
    }

        .top-whatsapp:hover {
            background: #1fb85b;
        }

    /*====================================================
  NAVBAR
====================================================*/

    .site-header {
        position: sticky;
        top: 0;
        z-index: 50;
        background: #ffffff;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: 0 8px 25px rgba(16,32,57,.06);
    }

        .site-header.scrolled {
            background: rgba(255,255,255,.96);
            box-shadow: 0 10px 35px rgba(0,0,0,.08);
        }

    .nav {
        height: 82px;
        display: flex;
        align-items: center;
    }

    .logo {
        font-size: 34px;
        font-weight: 900;
        color: var(--dark);
        letter-spacing: -1px;
        transition: var(--transition);
    }

        .logo span {
            color: var(--blue);
        }

    .menu {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 30px;
        font-weight: 800;
        color: #24324c;
    }

        .menu a {
            position: relative;
            transition: var(--transition);
            padding: 8px 20px;
        }

          


            .menu a:hover::after,
            .menu a.active::after {
                width: 100%;
            }

    .menu__cta {
        padding: 12px 22px;
        border-radius: 999px;
        background: var(--blue);
        color: #fff;
        box-shadow: 0 12px 25px rgba(49,107,255,.25);
    }

        .menu__cta:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 35px rgba(49,107,255,.35);
        }

    .nav-toggle {
        display: none;
        margin-left: auto;
        border: 0;
        padding: 9px 12px;
        border-radius: 10px;
        background: var(--blue);
        color: #fff;
        font-size: 22px;
    }

    /*====================================================
  05. BUTTONS
====================================================*/

    .btn {
        position: relative;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 999px;
        padding: 7px 28px;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
        transition: var(--transition);
    }

        .btn::before {
            content: "";
            position: absolute;
            left: -100%;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(255,255,255,.18);
            transition: .45s;
        }

        .btn:not(.btn-online):hover {
            transform: translateY(-3px);
            color: #fff !important;
        }

            .btn:not(.btn-online):hover::before {
                left: 100%;
            }

        .btn:hover {
            transform: translateY(-3px);
            color: #fff !important;
        }

            .btn:hover::before {
                left: 100%;
            }

    .btn--primary {
        background: linear-gradient(135deg,var(--blue),#6d8cff);
        color: #fff;
        box-shadow: 0 12px 30px rgba(49,107,255,.28);
    }

    .btn--ghost {
        background: #fff;
        color: var(--blue);
        box-shadow: var(--shadow);
    }

    .btn--dark {
        background: var(--dark);
        color: #fff;
    }

    .btn--outline {
        background: #fff;
        border: 2px solid #dbe5ff;
        color: var(--blue);
    }

    .hero__actions,
    .button-group {
        display: flex;
        align-items: center;
        gap: 18px;
        flex-wrap: wrap;
    }

    .play {
        font-weight: 900;
        color: var(--dark);
    }

        .play span {
            width: 44px;
            height: 44px;
            display: inline-grid;
            place-items: center;
            margin-right: 8px;
            border-radius: 50%;
            background: var(--orange);
            color: #fff;
        }

    /*====================================================
  06. HERO
====================================================*/

    .hero {
        position: relative;
        overflow: hidden;
        padding: 96px 0 115px;
        background: radial-gradient(circle at top right,#316bff15,transparent 40%), radial-gradient(circle at bottom left,#ff8a3d20,transparent 40%), #fff;
    }

        .hero::before {
            content: "";
            position: absolute;
            width: 650px;
            height: 650px;
            top: -250px;
            right: -180px;
            border-radius: 50%;
            background: radial-gradient(circle,#316bff22 0%,transparent 70%);
        }

        .hero::after {
            content: "";
            position: absolute;
            width: 450px;
            height: 450px;
            left: -150px;
            bottom: -180px;
            border-radius: 50%;
            background: radial-gradient(circle,#ff8a3d20 0%,transparent 70%);
        }

        .hero > * {
            position: relative;
            z-index: 2;
        }

    .hero-wave {
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 100%;
        line-height: 0;
    }

        .hero-wave svg {
            width: 100%;
            height: 90px;
            display: block;
        }

    .hero__grid,
    .about__grid,
    .seo-check__grid,
    .process__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 64px;
    }

    .hero h1 {
        color: var(--dark);
        font-size: clamp(44px,6vw,30px);
        font-weight: 900;
        line-height: .98;
        margin-bottom: 22px;
    }

    .hero__visual {
        position: relative;
        min-height: 520px;
    }

    .hero-dashboard {
        width: 100%;
        border-radius: 15px;
        filter: drop-shadow(0 35px 60px rgba(0,0,0,.15));
        animation: float 6s ease-in-out infinite;
    }

    /*====================================================
  05. BUTTONS
====================================================*/

    .btn {
        position: relative;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 999px;
        padding: 7px 28px;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
        transition: var(--transition);
    }

        .btn::before {
            content: "";
            position: absolute;
            left: -100%;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(255,255,255,.18);
            transition: .45s;
        }

        .btn:not(.btn-online):hover {
            transform: translateY(-3px);
            color: #fff !important;
        }

            .btn:not(.btn-online):hover::before {
                left: 100%;
            }

        .btn:hover {
            transform: translateY(-3px);
            color: #fff !important;
        }

            .btn:hover::before {
                left: 100%;
            }

    .btn--primary {
        background: linear-gradient(135deg,var(--blue),#6d8cff);
        color: #fff;
        box-shadow: 0 12px 30px rgba(49,107,255,.28);
    }

    .btn--ghost {
        background: #fff;
        color: var(--blue);
        box-shadow: var(--shadow);
    }

    .btn--dark {
        background: var(--dark);
        color: #fff;
    }

    .btn--outline {
        background: #fff;
        border: 2px solid #dbe5ff;
        color: var(--blue);
    }

    .hero__actions,
    .button-group {
        display: flex;
        align-items: center;
        gap: 18px;
        flex-wrap: wrap;
    }

    .play {
        font-weight: 900;
        color: var(--dark);
    }



        .hero__services li {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 17px;
            font-weight: 600;
            color: #035ac8;
        }

        .hero__services i {
            color: #22c55e;
            font-size: 18px;
        }

    .play span {
        width: 44px;
        height: 44px;
        display: inline-grid;
        place-items: center;
        margin-right: 8px;
        border-radius: 50%;
        background: var(--orange);
        color: #fff;
    }

    /*====================================================
  06. HERO
====================================================*/

    .hero {
        position: relative;
        overflow: hidden;
        padding: 50px 0 50px;
        background: radial-gradient(circle at top right,#316bff15,transparent 40%), radial-gradient(circle at bottom left,#ff8a3d20,transparent 40%), #fff;
    }

        .hero::before {
            content: "";
            position: absolute;
            width: 650px;
            height: 650px;
            top: -250px;
            right: -180px;
            border-radius: 50%;
            background: radial-gradient(circle,#316bff22 0%,transparent 70%);
        }

        .hero::after {
            content: "";
            position: absolute;
            width: 450px;
            height: 450px;
            left: -150px;
            bottom: -180px;
            border-radius: 50%;
            background: radial-gradient(circle,#ff8a3d20 0%,transparent 70%);
        }

        .hero > * {
            position: relative;
            z-index: 2;
        }

    .hero-wave {
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 100%;
        line-height: 0;
    }

        .hero-wave svg {
            width: 100%;
            height: 90px;
            display: block;
        }

    .hero__grid,
    .about__grid,
    .seo-check__grid,
    .process__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 64px;
    }

    .hero h1 {
        color: var(--dark);
        font-size: clamp(44px,6vw,30px);
        font-weight: 900;
        line-height: .98;
        margin-bottom: 22px;
    }

    .hero__visual {
        position: relative;
        min-height: 520px;
    }

    .hero-dashboard {
        width: 100%;
        border-radius: 15px;
        filter: drop-shadow(0 35px 60px rgba(0,0,0,.15));
        animation: float 6s ease-in-out infinite;
    }

    /*====================================================
  FLOATING CARDS
====================================================*/

    .floating-card {
        position: absolute;
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 18px;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 20px 45px rgba(0,0,0,.12);
    }

        .floating-card i {
            font-size: 28px;
            color: var(--blue);
        }

    .card1 {
        left: -40px;
        top: 60px;
    }

    .card2 {
        right: -30px;
        top: 260px;
    }

    .card3 {
        left: 30px;
        bottom: 20px;
    }

    .card-a {
        top: 35px;
        left: 0;
    }

    .card-b {
        right: 0;
        bottom: 95px;
    }

    /*====================================================
  DASHBOARD INFO CARD
====================================================*/

    .dashboard-card {
        position: absolute;
        z-index: 2;
        min-width: 170px;
        padding: 18px 20px;
        border-radius: 18px;
        background: #fff;
        box-shadow: var(--shadow);
    }

        .dashboard-card strong {
            display: block;
            color: var(--dark);
        }

        .dashboard-card span {
            color: var(--blue);
            font-size: 28px;
            font-weight: 900;
        }


    /*====================================================
  07. FEATURE SECTION
====================================================*/

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

    .feature-card {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        padding: 38px;
        border-radius: 26px;
        background: rgba(255,255,255,.92);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border: 1px solid rgba(49,107,255,.08);
        box-shadow: 0 15px 45px rgba(16,32,57,.08);
        transition: all .45s cubic-bezier(.22,.61,.36,1);
    }

        .feature-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient( 135deg, rgba(49,107,255,.08), transparent 60% );
            opacity: 0;
            transition: .45s;
        }

        .feature-card::after {
            content: "";
            position: absolute;
            width: 230px;
            height: 230px;
            left: -160px;
            top: -160px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(49,107,255,.18), transparent 70%);
            transition: .6s;
        }

        .feature-card:hover {
            transform: translateY(-14px) scale(1.02);
            box-shadow: 0 35px 70px rgba(0,0,0,.10), 0 0 40px rgba(49,107,255,.10);
        }

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

            .feature-card:hover::after {
                left: -30px;
                top: -30px;
            }

        .feature-card .icon {
            width: 82px;
            height: 82px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 28px;
            border-radius: 24px;
            background: linear-gradient( 135deg, #eef4ff, #dce8ff );
            color: var(--blue);
            font-size: 36px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 15px 35px rgba(49,107,255,.18);
            transition: .45s;
        }

        .feature-card:hover .icon {
            background: linear-gradient( 135deg, var(--blue), #5c8dff );
            color: #fff;
            transform: rotate(-8deg) scale(1.08);
        }

        .feature-card h3 {
            font-size: 24px;
            font-weight: 800;
            transition: .35s;
        }

        .feature-card:hover h3 {
            color: var(--blue);
        }

        .feature-card p {
            color: #66728b;
            line-height: 1.8;
            margin-bottom: 25px;
        }

    .feature-list {
        margin: 24px 0;
        padding: 0;
        list-style: none;
    }

        .feature-list li {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
            color: #4c5b73;
        }

        .feature-list i {
            color: var(--blue);
            transition: .3s;
        }

    .feature-card:hover .feature-list i {
        transform: scale(1.2);
    }

    .feature-card .shine {
        position: absolute;
        inset: 0;
        background: linear-gradient( 120deg, transparent 20%, rgba(255,255,255,.35), transparent 80% );
        transform: translateX(-140%);
        transition: .8s;
    }

    .feature-card:hover .shine {
        transform: translateX(140%);
    }

    /*====================================================
  07. FEATURE SECTION
====================================================*/

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

    .feature-card {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        padding: 38px;
        border-radius: 26px;
        background: rgba(255,255,255,.92);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border: 1px solid rgba(49,107,255,.08);
        box-shadow: 0 15px 45px rgba(16,32,57,.08);
        transition: all .45s cubic-bezier(.22,.61,.36,1);
    }

        .feature-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient( 135deg, rgba(49,107,255,.08), transparent 60% );
            opacity: 0;
            transition: .45s;
        }

        .feature-card::after {
            content: "";
            position: absolute;
            width: 230px;
            height: 230px;
            left: -160px;
            top: -160px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(49,107,255,.18), transparent 70%);
            transition: .6s;
        }

        .feature-card:hover {
            transform: translateY(-14px) scale(1.02);
            box-shadow: 0 35px 70px rgba(0,0,0,.10), 0 0 40px rgba(49,107,255,.10);
        }

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

            .feature-card:hover::after {
                left: -30px;
                top: -30px;
            }

        .feature-card .icon {
            width: 82px;
            height: 82px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 28px;
            border-radius: 24px;
            background: linear-gradient( 135deg, #eef4ff, #dce8ff );
            color: var(--blue);
            font-size: 36px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 15px 35px rgba(49,107,255,.18);
            transition: .45s;
        }

        .feature-card:hover .icon {
            background: linear-gradient( 135deg, var(--blue), #5c8dff );
            color: #fff;
            transform: rotate(-8deg) scale(1.08);
        }

        .feature-card h3 {
            font-size: 24px;
            font-weight: 800;
            transition: .35s;
        }

        .feature-card:hover h3 {
            color: var(--blue);
        }

        .feature-card p {
            color: #66728b;
            line-height: 1.8;
            margin-bottom: 25px;
        }

    .feature-list {
        margin: 24px 0;
        padding: 0;
        list-style: none;
    }

        .feature-list li {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
            color: #4c5b73;
        }

        .feature-list i {
            color: var(--blue);
            transition: .3s;
        }

    .feature-card:hover .feature-list i {
        transform: scale(1.2);
    }

    .feature-card .shine {
        position: absolute;
        inset: 0;
        background: linear-gradient( 120deg, transparent 20%, rgba(255,255,255,.35), transparent 80% );
        transform: translateX(-140%);
        transition: .8s;
    }

    .feature-card:hover .shine {
        transform: translateX(140%);
    }

    /*====================================================
  08. ABOUT
====================================================*/

    .about__visual {
        position: relative;
        min-height: 430px;
    }

    .about-image {
        position: relative;
    }

        .about-image img {
            width: 100%;
            border-radius: 28px;
            box-shadow: 0 30px 70px rgba(0,0,0,.12);
        }

    .experience-badge {
        position: absolute;
        left: -20px;
        bottom: 40px;
        padding: 18px 22px;
        background: var(--blue);
        color: #fff;
        border-radius: 20px;
        box-shadow: 0 20px 45px rgba(49,107,255,.35);
    }

        .experience-badge strong {
            display: block;
            font-size: 34px;
        }

    .project-badge {
        position: absolute;
        top: 35px;
        right: -20px;
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 18px 22px;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 20px 45px rgba(0,0,0,.10);
    }

        .project-badge i {
            color: var(--orange);
            font-size: 30px;
        }

    .about-features {
        margin: 35px 0;
    }

    .about-item {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 18px;
        font-weight: 700;
    }

        .about-item i {
            color: var(--blue);
        }

    .stats {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 24px;
        margin-top: 70px;
    }

    .stat {
        text-align: center;
        padding: 30px;
        background: #fff;
        border-radius: 20px;
        box-shadow: var(--shadow);
        transition: .4s;
    }

        .stat span {
            display: block;
            color: var(--blue);
            font-size: 44px;
            font-weight: 900;
        }

        .stat small {
            color: var(--dark);
            font-weight: 900;
        }

        .stat:hover {
            transform: translateY(-10px);
            background: var(--blue);
        }

            .stat:hover span,
            .stat:hover small {
                color: #fff;
            }

    /*====================================================
  09. SERVICES
====================================================*/

    .services {
        background: var(--soft);
    }

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

    /*====================================================
  10. PREMIUM SERVICE CARD
  (Eski service-card tanımlarını tamamen sil)
====================================================*/

    .service-card {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        padding: 38px;
        border-radius: 26px;
        background: rgba(255,255,255,.90);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border: 1px solid rgba(49,107,255,.08);
        box-shadow: 0 15px 45px rgba(16,32,57,.08);
        transition: all .45s cubic-bezier(.22,.61,.36,1);
    }

        .service-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient( 135deg, rgba(49,107,255,.08), transparent 60% );
            opacity: 0;
            transition: .45s;
        }

        .service-card::after {
            content: "";
            position: absolute;
            width: 240px;
            height: 240px;
            left: -170px;
            top: -170px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(49,107,255,.18), transparent 70%);
            transition: .6s;
        }

        .service-card:hover {
            transform: translateY(-14px) scale(1.02);
            box-shadow: 0 35px 70px rgba(0,0,0,.10), 0 0 40px rgba(49,107,255,.10);
        }

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

            .service-card:hover::after {
                left: -40px;
                top: -40px;
            }

    .service-top-line {
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 4px;
        background: linear-gradient( 90deg, var(--blue), var(--orange) );
        transition: .45s;
    }

    .service-card:hover .service-top-line {
        width: 100%;
    }

    .service-icon {
        width: 84px;
        height: 84px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 28px;
        border-radius: 24px;
        background: linear-gradient( 135deg, #eef4ff, #dce8ff );
        color: var(--blue);
        font-size: 38px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 15px 30px rgba(49,107,255,.18);
        transition: .45s;
    }

    .service-card:hover .service-icon {
        background: linear-gradient( 135deg, var(--blue), #5c8dff );
        color: #fff;
        transform: rotate(-10deg) scale(1.08);
        box-shadow: 0 18px 40px rgba(49,107,255,.35);
    }

    .service-card h3 {
        margin: 28px 0 14px;
        font-size: 24px;
        font-weight: 800;
        transition: .35s;
    }

    .service-card:hover h3 {
        color: var(--blue);
    }

    .service-card p {
        margin-bottom: 24px;
        color: #66728b;
        line-height: 1.8;
    }

    .service-card ul {
        margin: 0 0 28px;
        padding: 0;
        list-style: none;
    }

    .service-card li {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
        color: #4d5c75;
    }

        .service-card li i {
            color: var(--blue);
        }

    .service-link {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-weight: 800;
        color: var(--blue);
        transition: .35s;
    }

        .service-link i {
            transition: .35s;
        }

        .service-link:hover {
            color: var(--blue2);
        }

            .service-link:hover i {
                transform: translateX(6px);
            }

    .service-floating {
        position: absolute;
        right: 22px;
        top: 22px;
        font-size: 70px;
        color: var(--blue);
        opacity: .05;
        transition: .45s;
    }

    .service-card:hover .service-floating {
        opacity: .08;
        transform: rotate(12deg) scale(1.15);
    }


    /*====================================================
  11. CASE STUDIES
====================================================*/

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

    .case-card {
        overflow: hidden;
        border-radius: var(--radius);
        background: #fff;
        box-shadow: var(--shadow);
        transition: .4s;
    }

        .case-card:hover {
            transform: translateY(-12px);
            box-shadow: 0 35px 60px rgba(0,0,0,.12);
        }

        .case-card h3,
        .case-card p {
            padding-inline: 25px;
        }

    .case-img {
        height: 230px;
    }

    .gradient-1 {
        background: linear-gradient(135deg,#5d8cff,#dce6ff);
    }

    .gradient-2 {
        background: linear-gradient(135deg,#ff8a3d,#ffd9bf);
    }

    .gradient-3 {
        background: linear-gradient(135deg,#2ed3b7,#e8fff9);
    }

    .center {
        text-align: center;
        margin-top: 40px;
    }

    /*====================================================
  12. SEO SECTION
====================================================*/

    .seo-check {
        background: linear-gradient(135deg,#326dff,#7047ff);
        color: #dce6ff;
        padding: 80px 0;
        overflow: hidden;
    }

        .seo-check h2,
        .seo-check .eyebrow {
            color: #fff;
        }

    .seo-check__art {
        position: relative;
        height: 270px;
    }

    .magnifier {
        position: absolute;
        left: 20%;
        top: 10%;
        width: 210px;
        height: 210px;
        border: 22px solid #fff;
        border-radius: 50%;
        box-shadow: var(--shadow);
    }

        .magnifier::after {
            content: "";
            position: absolute;
            width: 110px;
            height: 24px;
            right: -80px;
            bottom: -30px;
            border-radius: 20px;
            background: #fff;
            transform: rotate(45deg);
        }

    .pulse {
        position: absolute;
        inset: 50px;
        border-radius: 50%;
        background: rgba(255,255,255,.12);
        animation: pulse 2s infinite;
    }

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

    .process {
        background: #102039;
        color: #bdc9df;
    }

        .process h2 {
            color: #fff;
        }

    .process-list {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 20px;
    }

    .step {
        padding: 28px;
        border-radius: 20px;
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.08);
        color: #fff;
    }

        .step b {
            display: block;
            margin-bottom: 8px;
            color: var(--orange);
            font-size: 34px;
        }

    /*====================================================
  TESTIMONIAL
====================================================*/

    .testimonials {
        background: linear-gradient(180deg,#fff,#f7f9ff);
    }

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

    blockquote {
        margin: 0;
        padding: 36px;
        border-radius: var(--radius);
        background: #fff;
        box-shadow: var(--shadow);
        font-size: 18px;
        color: #53617a;
    }

        blockquote cite {
            display: block;
            margin-top: 22px;
            font-style: normal;
            font-weight: 900;
            color: var(--dark);
        }

    /*====================================================
 BLOG
====================================================*/

    .blog {
        background: var(--soft);
    }

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

    .blog-card {
        padding: 10px;
        border-radius: var(--radius);
        background: #fff;
        box-shadow: var(--shadow);
        transition: .35s;
    }

        .blog-card:hover {
            transform: translateY(-10px);
        }

    .blog-img {
        margin-bottom: 15px;
        border-radius: 18px;
        position: relative;
    }

        .blog-img img {
            border-radius: 18px;
        }

        .blog-img.alt {
            background: linear-gradient(135deg,#ff8a3d,#ffd2b6);
        }

        .blog-img.alt2 {
            background: linear-gradient(135deg,#102039,#647bff);
        }

        .blog-img span {
            position: absolute;
            left: 18px;
            bottom: 18px;
            padding: 10px 14px;
            border-radius: 14px;
            background: #fff;
            color: var(--blue);
            font-weight: 900;
        }

    /*====================================================
 FOOTER
====================================================*/

    .footer {
        padding-top: 50px;
        color: #b8c5df;
        background: linear-gradient(135deg,#081222,#13284b);
    }

    .footer__grid {
        display: grid;
        grid-template-columns: 1.2fr .9fr .8fr 1.1fr;
        gap: 42px;
    }

    .footer h3,
    .footer .logo {
        color: #fff;
    }

    .footer .logo {
        display: block;
        margin-bottom: 18px;
    }

    .footer__grid a {
        display: block;
        margin: 8px 0;
        transition: .3s;
    }

        .footer__grid a:hover {
            color: #fff;
            padding-left: 6px;
        }

    .subscribe {
        display: flex;
        padding: 5px 15px;
        border-radius: 999px;
        background: #172845;
    }

        .subscribe input {
            flex: 1;
            border: 0;
            outline: 0;
            color: #fff;
            background: transparent;
        }

        .subscribe button {
            width: 44px;
            height: 44px;
            border: 0;
            border-radius: 50%;
            background: var(--orange);
            color: #fff;
        }

    .copyright {
        margin-top: 60px;
        padding: 22px 0;
        border-top: 1px solid rgba(255,255,255,.08);
    }

    /*====================================================
 SCROLLBAR
====================================================*/

    ::-webkit-scrollbar {
        width: 10px;
    }

    ::-webkit-scrollbar-thumb {
        background: var(--blue);
        border-radius: 30px;
    }

    ::-webkit-scrollbar-track {
        background: #eef3ff;
    }

    /*====================================================
 TO TOP
====================================================*/

    .to-top {
        position: fixed;
        right: 22px;
        bottom: 22px;
        width: 46px;
        height: 46px;
        border: none;
        border-radius: 50%;
        background: var(--orange);
        color: #fff;
        cursor: pointer;
        box-shadow: var(--shadow);
        opacity: 0;
        visibility: hidden;
        transition: .35s;
    }

        .to-top.show {
            opacity: 1;
            visibility: visible;
        }

        .to-top:hover {
            transform: translateY(-6px);
            background: var(--blue);
        }

    /*====================================================
 REVEAL
====================================================*/

    .reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: .75s ease;
    }

        .reveal.show {
            opacity: 1;
            transform: none;
        }

    .delay-1 {
        transition-delay: .12s;
    }

    .delay-2 {
        transition-delay: .24s;
    }

    .delay-3 {
        transition-delay: .36s;
    }

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

    @keyframes float {

        50% {
            transform: translateY(-18px);
        }
    }

    @keyframes pulse {

        50% {
            transform: scale(1.07);
            opacity: .45;
        }
    }

    /* ==========================
   PRICING
========================== */

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

    .price-card {
        background: #fff;
        border-radius: 24px;
        padding: 40px 32px;
        box-shadow: var(--shadow);
        transition: .35s;
        display: flex;
        flex-direction: column;
    }

        .price-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 30px 60px rgba(0,0,0,.12);
        }

        .price-card.featured {
            border: 3px solid var(--blue);
            transform: translateY(-12px);
        }

        .price-card h3 {
            margin-bottom: 25px;
        }

        .price-card ul {
            list-style: none;
            padding: 0;
            margin: 0 0 30px;
            flex: 1;
        }

        .price-card li {
            padding: 12px 0;
            border-bottom: 1px dashed #e5ebf7;
        }

        .price-card .btn {
            width: 100%;
        }

    .testimonial-card {
        height: 100%;
        padding: 35px;
        border-radius: 24px;
        background: #fff;
        box-shadow: 0 15px 45px rgba(0,0,0,.08);
    }

        .testimonial-card p {
            line-height: 1.8;
            margin-bottom: 25px;
            color: #5f6d84;
        }

        .testimonial-card cite {
            font-style: normal;
        }

        .testimonial-card strong {
            display: block;
            color: #102039;
        }

    .swiper {
        padding: 20px 5px 40px;
    }

    .testimonialSlider .swiper-wrapper {
        align-items: stretch;
    }

    .testimonialSlider .swiper-slide {
        display: flex;
        height: auto;
    }

    .testimonial-card {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        padding: 15px;
        border-radius: 22px;
        background: #fff;
        box-shadow: 0 15px 35px rgba(0,0,0,.08);
    }

        .testimonial-card p {
            flex: 1;
            line-height: 1.8;
            color: #797979;
            margin-bottom: 15px;
            font-size: 16px;
            font-style: italic;
        }

        .testimonial-card cite {
            margin-top: auto;
            display: block;
            font-style: normal;
        }

        .testimonial-card strong {
            display: block;
            color: #0040a3;
            font-size: 15px;
        }

        .testimonial-card span {
            color: #5169cd;
            font-size: 12px;
            font-weight: 600;
        }

    .testimonial-pagination {
        position: relative;
        margin-top: 45px;
        text-align: center;
    }

        .testimonial-pagination .swiper-pagination-bullet {
            width: 12px;
            height: 12px;
            background: #d7deea;
            opacity: 1;
            transition: .35s;
        }

        .testimonial-pagination .swiper-pagination-bullet-active {
            width: 32px;
            border-radius: 20px;
            background: var(--blue);
        }

    .about__visual {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .about__visual img {
            width: 100%;
            max-width: 560px;
            border-radius: 28px;
            display: block;
            object-fit: cover;
            box-shadow: 0 25px 60px rgba(0,0,0,.15);
            transition: .4s;
        }

            .about__visual img:hover {
                transform: translateY(-8px);
            }

    .contact-info {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

        .contact-info h3 {
            margin-bottom: 10px;
            color: #fff;
        }

    .contact-item {
        display: flex !important;
        align-items: center;
        gap: 12px;
        color: #dcdcdc;
        text-decoration: none;
        transition: .3s;
        font-size: 16px;
    }

        .contact-item i {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(255,255,255,.08);
            font-size: 18px;
            transition: .3s;
        }

        .contact-item:hover {
            color: #fff;
            transform: translateX(6px);
        }

            .contact-item:hover i {
                background: #0d6efd;
            }

        .contact-item.whatsapp:hover i {
            background: #25D366;
        }

    .topbar-left {
        display: flex;
        align-items: center;
        gap: 25px;
    }

        .topbar-left span {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
        }

        .topbar-left a {
            color: inherit;
            text-decoration: none;
            transition: .3s;
        }

            .topbar-left a:hover {
                color: #3b82f6;
            }

        .topbar-left i {
            color: #3b82f6;
            font-size: 15px;
        }

    .topbar-slogan {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-style: italic;
        color: #ddd;
    }

        .topbar-slogan i {
            color: #3b82f6;
            font-size: 12px;
        }

    .mobile-menu-header {
        display: none !important;
    }

    @media (min-width:768px) {

        .menu-header,
        .menu-subtitle,
        .menu-whatsapp,
        .menu-contact,
        .menu-overlay,
        .menu-close {
            display: none;
        }
    }