:root {
    --primary-red: #ff0000;
    --primary-red-dark: #d90000;
    --blue: #022c63;
    --blue: #001535;
    --white: #ffffff;
    --light-bg: #f8f8f8;
    --border-color: #eeeeee;
    --text-color: #022c63;
    --muted: #777777;
     --red: #ff0000;
    --red-dark: #d90000;
    --light: #f7f7f7;
    --text: #022c63;
    --border: #e9e9e9;
    --primary: #ff0000;
    --black: #0b0b0b;
}

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

body {
    font-family: "Inter", Arial, sans-serif;
    color: var(--text-color);
    background: #ffffff;
}

a {
    text-decoration: none;
}

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

.main-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(15px);
}

.navbar {
    min-height: 90px;
    padding: 0;
}

.site-logo img {
    width: 130px;
    height: auto;
    display: block;
}

.navbar-nav {
    gap: 5px;
}

.nav-link {
    position: relative;
    padding: 34px 18px !important;
    color: var(--blue) !important;
    font-size: 15px;
    font-weight: 600;
    transition: 0.3s ease;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 20px;
    height: 2px;
    background: var(--primary-red);
    transform: scaleX(0);
    transform-origin: center;
    transition: 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary-red) !important;
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
}

.nav-link.dropdown-toggle::after {
    display: none;
}

.nav-arrow {
    font-size: 9px;
    margin-left: 5px;
    transition: 0.3s ease;
}

.dropdown.show .nav-arrow {
    transform: rotate(180deg);
}

.project-btn-wrapper {
    margin-left: 15px;
}

.project-btn {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 16px 23px;
    background: var(--primary-red);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    transition: 0.35s ease;
}

.project-btn span {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-btn:hover {
    background: var(--blue);
    color: #fff;
    transform: translateY(-2px);
}

.mega-menu {
    width: 1050px;
    border: 0;
    padding: 0;
    margin-top: 12px !important;

    left: 50% !important;
    transform: translateX(-48%);

    border-radius: 18px;
    overflow: hidden;

    background: #ffffff;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.14),
        0 5px 20px rgba(0, 0, 0, 0.05);
}

.mega-menu::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--primary-red),
        #ff5555,
        var(--primary-red)
    );
}

.mega-menu-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 290px;
    gap: 0;
}

.mega-column {
    padding: 28px 25px;
    border-right: 1px solid var(--border-color);
}

.mega-column:last-child {
    border-right: 0;
}

.mega-title {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 15px;
}

.title-icon {
    width: 38px;
    min-width: 38px;
    height: 38px;

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

    background: rgba(255, 0, 0, 0.08);
    color: var(--primary-red);

    border-radius: 10px;

    font-size: 15px;
}

.mega-title h6 {
    margin: 0 0 3px;
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.mega-title small {
    color: #999;
    font-size: 10px;
}

.second-title {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px dashed #e6e6e6;
}

.mega-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 9px 10px;

    margin-bottom: 2px;

    color: #383838;

    font-size: 13px;
    font-weight: 500;

    border-radius: 7px;

    transition: 0.25s ease;
}

.mega-link i {
    color: var(--primary-red);
    font-size: 10px;

    opacity: 0;
    transform: translateX(-5px);

    transition: 0.25s ease;
}

.mega-link:hover {
    color: var(--primary-red);
    background: #fff4f4;
    padding-left: 15px;
}

.mega-link:hover i {
    opacity: 1;
    transform: translateX(0);
}

.mega-feature {
    padding: 35px 28px;

    background:
        linear-gradient(
            145deg,
            #151515,
            #252525
        );

    color: white;

    position: relative;
    overflow: hidden;
}

.mega-feature::before {
    content: "";
    position: absolute;

    width: 170px;
    height: 170px;

    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50%;

    right: -80px;
    top: -60px;
}

.mega-feature::after {
    content: "";
    position: absolute;

    width: 100px;
    height: 100px;

    border: 1px solid rgba(255,0,0,0.25);
    border-radius: 50%;

    right: 35px;
    bottom: -55px;
}

.feature-icon {
    width: 48px;
    height: 48px;

    background: var(--primary-red);

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

    border-radius: 12px;

    margin-bottom: 25px;

    position: relative;
    z-index: 2;
}

.feature-small {
    color: #ff4b4b;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;

    position: relative;
    z-index: 2;
}

.mega-feature h4 {
    font-size: 25px;
    line-height: 1.25;

    margin: 10px 0 14px;

    position: relative;
    z-index: 2;
}

.mega-feature h4 span {
    color: var(--primary-red);
}

.mega-feature p {
    color: #bdbdbd;
    font-size: 12px;
    line-height: 1.7;

    position: relative;
    z-index: 2;
}

.feature-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-top: 10px;

    padding: 11px 17px;

    background: #ffffff;
    color: #022c63;

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

    position: relative;
    z-index: 2;

    transition: 0.3s ease;
}

.feature-btn:hover {
    background: var(--primary-red);
    color: #fff;
}

.product-menu {
    width: 370px;

    padding: 12px;

    border: 0;
    border-radius: 16px;

    margin-top: 12px !important;

    box-shadow:
        0 20px 60px rgba(0,0,0,0.13);
}

.product-menu-inner {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.product-item {
    display: grid;
    grid-template-columns: 42px 1fr 20px;
    align-items: center;

    gap: 12px;

    padding: 12px;

    border-radius: 10px;

    transition: 0.25s ease;

    color: #222;
}

.product-item:hover {
    background: #fff3f3;
    color: var(--primary-red);
}

.product-item > i {
    font-size: 10px;
    color: var(--primary-red);

    opacity: 0;
    transform: translateX(-5px);

    transition: 0.25s ease;
}

.product-item:hover > i {
    opacity: 1;
    transform: translateX(0);
}

.product-icon {
    width: 42px;
    height: 42px;

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

    background: #f7f7f7;

    color: var(--primary-red);

    border-radius: 10px;

    transition: 0.25s ease;
}

.product-item:hover .product-icon {
    background: var(--primary-red);
    color: #fff;
}

.product-item strong {
    display: block;
    font-size: 13px;
    margin-bottom: 2px;
}

.product-item small {
    display: block;
    font-size: 10px;
    color: #999;
}

.demo-section {
    min-height: calc(100vh - 90px);

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

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(255,0,0,0.07),
            transparent 30%
        ),
        #fafafa;
}

.demo-label {
    color: var(--primary-red);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.demo-section h1 {
    max-width: 800px;
    margin: 15px auto;

    font-size: 60px;
    line-height: 1.1;
    color: #022c63;
}

.demo-section h1 span {
    color: var(--primary-red);
}

.demo-section p {
    max-width: 650px;
    margin: auto;

    color: #777;
    font-size: 16px;
    line-height: 1.8;
}

.custom-toggler {
    border: 0 !important;
    box-shadow: none !important;
    padding: 8px;
}

.toggler-line {
    width: 27px;
    height: 2px;

    background: #022c63;

    display: block;

    margin: 5px 0;

    transition: 0.3s;
}

.section-padding {
    padding: 110px 0;
}

.section-heading {
    max-width: 650px;
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--red);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}

.section-tag::before {
    content: "";

    width: 25px;
    height: 2px;

    background: var(--red);
}

.section-heading h2 {
    margin: 15px 0;

    font-size: 48px;
    line-height: 1.12;

    color: var(--blue);

    font-weight: 800;
}

.section-heading h2 span {
    color: var(--red);
}

.section-heading p {
    color: #777777;

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

    margin-bottom: 10px;
}

.centered-heading {
    margin: 0 auto;
    text-align: center;
}

.centered-heading .section-tag {
    justify-content: center;
}

/* =========================================================
   HERO
========================================================= */

.hero-section {
    position: relative;

    min-height: 760px;

    display: flex;
    align-items: center;

    padding: 90px 0;

    background:
        radial-gradient(
            circle at 5% 20%,
            rgba(255,0,0,0.07),
            transparent 28%
        ),
        #ffffff;

    overflow: hidden;
}

.hero-grid {
    position: absolute;
    inset: 0;

    opacity: 0.4;

    background-image:
        linear-gradient(#eeeeee 1px, transparent 1px),
        linear-gradient(90deg, #eeeeee 1px, transparent 1px);

    background-size: 80px 80px;

    mask-image: linear-gradient(
        to right,
        blue,
        transparent
    );
}

.hero-glow {
    position: absolute;

    width: 350px;
    height: 350px;

    border-radius: 50%;

    filter: blur(100px);

    opacity: 0.12;
}

.hero-glow-one {
    background: var(--red);

    right: 5%;
    top: 5%;
}

.hero-glow-two {
    background: #555;

    right: 25%;
    bottom: 0;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--red);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 22px;
}

.badge-dot {
    width: 7px;
    height: 7px;

    background: var(--red);

    border-radius: 50%;

    box-shadow: 0 0 0 5px rgba(255,0,0,0.1);
}

.badge-line {
    width: 35px;
    height: 1px;

    background: var(--red);
}


.hero-title {
    max-width: 750px;

    font-size: 72px;
    line-height: 1.02;

    font-weight: 850;

    letter-spacing: -3px;

    color: var(--blue);

    margin-bottom: 25px;
}

.hero-title span {
    display: block;

    color: var(--red);
}


.hero-text {
    max-width: 650px;

    font-size: 17px;

    line-height: 1.8;

    color: #666;

    margin-bottom: 35px;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.btn-primary-red,
.btn-outline-dark {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    padding: 15px 20px;

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

    transition: 0.3s ease;
}

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

.btn-primary-red span {
    width: 30px;
    height: 30px;

    border: 1px solid rgba(255,255,255,0.4);

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-primary-red:hover {
    background: var(--blue);
    color: #fff;
    transform: translateY(-3px);
}


.btn-outline-dark {
    color: var(--blue);

    border: 1px solid #d8d8d8;
}

.btn-outline-dark:hover {
    background: var(--blue);
    color: #fff;

    border-color: var(--blue);

    transform: translateY(-3px);
}

.hero-trust {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-top: 35px;
}

.trust-avatars {
    display: flex;
}

.trust-avatars span {
    width: 35px;
    height: 35px;

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

    margin-left: -7px;

    border: 2px solid #fff;

    border-radius: 50%;

    background: #222;

    color: #fff;

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

.trust-avatars span:first-child {
    margin-left: 0;
    background: var(--red);
}

.trust-avatars span:nth-child(2) {
    background: #444;
}

.trust-avatars span:nth-child(3) {
    background: #777;
}

.trust-avatars span:last-child {
    background: #f3f3f3;
    color: #222;
}

.trust-text strong {
    display: block;

    font-size: 12px;
}

.trust-text small {
    color: #999;

    font-size: 10px;
}

.hero-visual {
    min-height: 520px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
}

.visual-ring {
    position: absolute;

    border: 1px solid rgba(255,0,0,0.15);

    border-radius: 50%;
}

.ring-one {
    width: 480px;
    height: 480px;
}

.ring-two {
    width: 380px;
    height: 380px;

    border-color: rgba(0,0,0,0.08);
}


.hero-card {
    position: relative;

    width: 390px;

    padding: 28px;

    background: rgba(255,255,255,0.96);

    border: 1px solid #ededed;

    border-radius: 20px;

    box-shadow:
        0 30px 80px rgba(0,0,0,0.12);

    z-index: 3;
}

.card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mini-label {
    display: block;

    color: #999;

    font-size: 8px;

    letter-spacing: 1px;
}

.card-top h5 {
    margin: 5px 0 0;

    font-size: 17px;
}

.growth-icon {
    width: 42px;
    height: 42px;

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

    color: #fff;
    background: var(--red);

    border-radius: 10px;
}

.growth-number {
    margin-top: 25px;

    font-size: 45px;

    font-weight: 800;
}

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

.growth-number small {
    color: var(--red);
    font-size: 20px;
}

.chart-area {
    height: 150px;

    position: relative;

    margin-top: 10px;

    border-bottom: 1px solid #ddd;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 29px,
            #eeeeee 30px
        );
}

.chart-line {
    position: absolute;

    left: 0;
    right: 0;

    bottom: 25px;

    height: 100px;

    background: linear-gradient(
        140deg,
        transparent 0%,
        transparent 15%,
        rgba(255,0,0,0.12) 16%,
        rgba(255,0,0,0.12) 18%,
        transparent 19%,
        transparent 35%,
        rgba(255,0,0,0.15) 36%,
        rgba(255,0,0,0.15) 38%,
        transparent 39%,
        transparent 55%,
        rgba(255,0,0,0.15) 56%,
        rgba(255,0,0,0.15) 58%,
        transparent 59%
    );

    border-bottom: 3px solid var(--red);

    clip-path: polygon(
        0 80%,
        15% 65%,
        30% 72%,
        45% 45%,
        60% 58%,
        75% 25%,
        90% 35%,
        100% 5%,
        100% 100%,
        0 100%
    );
}

.chart-point {
    position: absolute;

    width: 8px;
    height: 8px;

    background: var(--red);

    border: 2px solid #fff;

    box-shadow: 0 0 0 2px var(--red);

    border-radius: 50%;
}

.point-one {
    left: 15%;
    bottom: 88px;
}

.point-two {
    left: 35%;
    bottom: 70px;
}

.point-three {
    left: 55%;
    bottom: 95px;
}

.point-four {
    left: 75%;
    bottom: 120px;
}

.point-five {
    right: 2%;
    bottom: 140px;
}


.chart-footer {
    display: flex;
    justify-content: space-between;

    margin-top: 12px;

    font-size: 10px;

    color: #999;
}

.chart-footer strong {
    color: #18a558;
}

.hero-floating-card {
    position: absolute;

    left: 0;
    top: 80px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 12px 15px;

    background: #fff;

    border: 1px solid #eee;

    border-radius: 10px;

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

    z-index: 5;

    animation: floatCard 4s ease-in-out infinite;
}

.hero-floating-card strong {
    display: block;
    font-size: 10px;
}

.hero-floating-card small {
    color: #999;
    font-size: 8px;
}

.floating-icon {
    width: 32px;
    height: 32px;

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

    background: var(--red);

    color: #fff;

    border-radius: 8px;

    font-size: 12px;
}

.blue-icon {
    background: #022c63;
}

.second-floating {
    left: auto;
    right: -15px;
    top: auto;
    bottom: 60px;

    animation-delay: 1s;
}

@keyframes floatCard {

    0%, 100% {
        transform: translateY(0);
    }

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

}

.trust-strip {
    padding: 25px 0;

    background: rgb(1 29 64);

    color: #fff;
}

.trust-grid {
    display: grid;

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

    gap: 20px;
}

.trust-item {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 10px;

    border-right: 1px solid #333;
}

.trust-item:last-child {
    border-right: 0;
}

.trust-icon {
    width: 40px;
    height: 40px;

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

    background: rgba(255,0,0,0.12);

    color: var(--red);

    border-radius: 8px;
}

.trust-item strong {
    display: block;

    font-size: 11px;
}

.trust-item span {
    color: #888;

    font-size: 9px;
}


/* =========================================================
   ABOUT SECTION
========================================================= */

.about-section {
    background: #fff;
}

.about-visual {
    position: relative;

    min-height: 500px;

    padding: 20px;
}

.about-image-main {
    width: 82%;
    height: 450px;

    overflow: hidden;

    border-radius: 20px;

    position: relative;
    z-index: 2;
}

.about-image-main img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: 0.5s ease;
}

.about-image-main:hover img {
    transform: scale(1.05);
}

.about-pattern {
    position: absolute;

    width: 230px;
    height: 230px;

    right: 0;
    top: 0;

    background-image:
        radial-gradient(
            var(--red) 1px,
            transparent 1px
        );

    background-size: 13px 13px;

    opacity: 0.25;
}

.experience-card {
    position: absolute;

    left: 0;
    bottom: 45px;

    z-index: 5;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 18px 20px;

    background: var(--red);

    color: #fff;

    border-radius: 10px;

    box-shadow: 0 15px 35px rgba(255,0,0,0.25);
}

.experience-number {
    font-size: 35px;
    font-weight: 800;
}

.experience-card strong,
.experience-card small {
    display: block;
}

.experience-card strong {
    font-size: 12px;
}

.experience-card small {
    font-size: 9px;
    opacity: 0.8;
}

.about-mini-card {
    position: absolute;

    right: 0;
    bottom: 0;

    z-index: 6;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 12px 15px;

    background: #fff;

    border: 1px solid #eee;

    border-radius: 10px;

    box-shadow: 0 15px 35px rgba(0,0,0,0.10);
}

.about-mini-card > span {
    width: 32px;
    height: 32px;

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

    background: #eaf9ef;

    color: #1aa052;

    border-radius: 50%;
}

.about-mini-card strong,
.about-mini-card small {
    display: block;
}

.about-mini-card strong {
    font-size: 10px;
}

.about-mini-card small {
    font-size: 8px;
    color: #999;
}

.about-points {
    margin-top: 25px;
}

.about-point {
    display: flex;

    gap: 12px;

    margin-bottom: 17px;
}

.about-point > span {
    width: 25px;
    min-width: 25px;
    height: 25px;

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

    color: #fff;

    background: var(--red);

    border-radius: 50%;

    font-size: 9px;
}

.about-point strong {
    display: block;

    font-size: 13px;
}

.about-point p {
    color: #999;

    font-size: 11px;

    margin: 3px 0 0;
}

.text-arrow-btn {
    display: inline-flex;
    align-items: center;

    gap: 15px;

    margin-top: 15px;

    color: var(--blue);

    font-size: 12px;
    font-weight: 800;

    border-bottom: 1px solid #022c63;

    padding-bottom: 7px;
}

.text-arrow-btn span {
    color: var(--red);
}


/* =========================================================
   SERVICES  SECTION
========================================================= */

.services-section {
    background: #f7f7f7;
}

.service-card {
    position: relative;

    height: 100%;

    padding: 30px;

    background: #fff;

    border: 1px solid #ebebeb;

    border-radius: 15px;

    transition: 0.35s ease;

    overflow: hidden;
}

.service-card::before {
    content: "";

    position: absolute;

    width: 0;
    height: 3px;

    left: 0;
    top: 0;

    background: var(--red);

    transition: 0.4s ease;
}

.service-card:hover {
    transform: translateY(-8px);

    box-shadow: 0 25px 55px rgba(0,0,0,0.09);

    border-color: transparent;
}

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

.service-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.service-number {
    font-size: 11px;

    color: #aaa;

    font-weight: 700;
}

.service-icon {
    width: 52px;
    height: 52px;

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

    color: var(--red);

    background: #fff1f1;

    border-radius: 12px;

    font-size: 19px;

    transition: 0.3s ease;
}

.service-card:hover .service-icon {
    background: var(--red);
    color: #fff;
}

.service-card h3 {
    margin: 30px 0 12px;

    font-size: 20px;
}

.service-card p {
    color: #888;

    font-size: 12px;
    line-height: 1.8;

    min-height: 65px;
}

.service-card a,
.product-card a {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-top: 15px;

    color: var(--blue);

    font-size: 11px;
    font-weight: 800;

    transition: 0.3s ease;
}

.service-card a i,
.product-card a i {
    color: var(--red);

    transition: 0.3s ease;
}

.service-card a:hover,
.product-card a:hover {
    color: var(--red);
}

.service-card a:hover i,
.product-card a:hover i {
    transform: translateX(5px);
}

.dark-outline-btn {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    padding: 14px 22px;

    border: 1px solid #222;

    color: #222;

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

    transition: 0.3s ease;
}

.dark-outline-btn:hover {
    background: #022c63;
    color: #fff;
}


/* =========================================================
   STATS SECTION
========================================================= */

.stats-section {
    position: relative;

    padding: 75px 0;

    background: #022c63;

    overflow: hidden;
}

.stats-pattern {
    position: absolute;

    inset: 0;

    opacity: 0.08;

    background-image:
        linear-gradient(#fff 1px, transparent 1px),
        linear-gradient(90deg, #fff 1px, transparent 1px);

    background-size: 50px 50px;
}

.stat-item {
    position: relative;

    text-align: center;

    color: #fff;

    padding: 15px;

    border-right: 1px solid #333;
}

.col-lg-3:last-child .stat-item {
    border-right: 0;
}

.stat-icon {
    width: 45px;
    height: 45px;

    margin: 0 auto 15px;

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

    background: rgba(255,0,0,0.12);

    color: var(--red);

    border-radius: 10px;
}

.stat-item h3 {
    font-size: 38px;

    margin-bottom: 3px;
}

.stat-item p {
    margin: 0;

    color: #888;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1px;
}


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

.process-section {
    background: #fff;
}

.process-sec-wrapper {
    position: relative;

    display: grid;

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

    gap: 30px;

    margin-top: 70px;
}

.process-sec-line {
    position: absolute;

    left: 10%;
    right: 10%;
    top: 35px;

    height: 1px;

    background: #ddd;
}

.process-sec-item {
    position: relative;

    text-align: center;
}

.process-sec-number {
    position: relative;
    z-index: 2;

    width: 70px;
    height: 70px;

    margin: 0 auto 25px;

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

    background: #fff;

    border: 1px solid #ddd;

    color: var(--red);

    border-radius: 50%;

    font-size: 15px;
    font-weight: 800;

    transition: 0.3s ease;
}

.process-sec-item:hover .process-sec-number {
    background: var(--red);
    color: #fff;

    border-color: var(--red);

    transform: translateY(-5px);
}

.process-sec-content span {
    color: #aaa;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1px;
}

.process-sec-content h3 {
    font-size: 20px;
    font-weight: 800;
    margin: 8px 0;
}

.process-sec-content p {
    color: #888;

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   WHY CHOOSE SECTION
========================================================= */

.why-section {
    background: #f7f7f7;
}

.why-list {
    margin-top: 30px;
}

.why-item {
    display: flex;

    gap: 15px;

    margin-bottom: 22px;
}

.why-check {
    width: 35px;
    min-width: 35px;
    height: 35px;

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

    background: var(--red);

    color: #fff;

    border-radius: 50%;

    font-size: 11px;
}

.why-item h4 {
    font-size: 14px;

    margin: 0 0 5px;
}

.why-item p {
    margin: 0;

    color: #888;

    font-size: 11px;

    line-height: 1.7;
}

.why-visual {
    position: relative;

    min-height: 430px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.why-main-card {
    width: 420px;

    padding: 30px;

    background: #fff;

    border-radius: 18px;

    box-shadow: 0 25px 60px rgba(0,0,0,0.10);
}

.why-card-header {
    display: flex;
    justify-content: space-between;

    color: #aaa;

    font-size: 9px;

    letter-spacing: 1px;
}

.performance-number {
    font-size: 55px;
    font-weight: 800;

    margin: 25px 0;
}

.performance-number small {
    display: block;

    color: #999;

    font-size: 10px;

    font-weight: 500;
}

.performance-bars > div {
    margin-bottom: 18px;
}

.performance-bars span {
    display: block;

    margin-bottom: 6px;

    color: #777;

    font-size: 10px;
}

.bar {
    height: 6px;

    background: #eee;

    border-radius: 20px;

    overflow: hidden;
}

.bar i {
    display: block;

    height: 100%;

    background: var(--red);

    border-radius: 20px;
}

.why-small-card {
    position: absolute;

    right: 0;
    bottom: 35px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 14px 16px;

    background: #022c63;

    color: #fff;

    border-radius: 10px;

    box-shadow: 0 15px 40px rgba(0,0,0,0.20);
}

.why-small-icon {
    width: 35px;
    height: 35px;

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

    background: var(--red);

    border-radius: 8px;
}

.why-small-card strong,
.why-small-card small {
    display: block;
}

.why-small-card strong {
    font-size: 10px;
}

.why-small-card small {
    color: #888;

    font-size: 8px;
}


/* =========================================================
   PRODUCTS SECTION
========================================================= */

.products-section {
    background: #fff;
}

.product-card {
    height: 100%;

    padding: 30px;

    border: 1px solid #e9e9e9;

    border-radius: 15px;

    transition: 0.35s ease;
}

.product-card:hover {
    transform: translateY(-7px);

    box-shadow: 0 25px 55px rgba(0,0,0,0.08);
}

.featured-product {
    background: #022c63;

    color: #fff;

    border-color: #022c63;
}

.product-icon-large {
    width: 58px;
    height: 58px;

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

    background: #fff0f0;

    color: var(--red);

    border-radius: 12px;

    font-size: 20px;

    margin-bottom: 25px;
}

.featured-product .product-icon-large {
    background: var(--red);
    color: #fff;
}

.product-category {
    color: var(--red);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1px;
}

.product-card h3 {
    font-size: 21px;

    margin: 10px 0;
}

.product-card p {
    color: #888;

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

.featured-product p {
    color: #aaa;
}

.featured-product a {
    color: #fff;
}


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

.testimonial-section {
    background: #f7f7f7;
}

.testimonial-slider {
    max-width: 800px;

    margin: 45px auto 0;
}

.testimonial-card {
    position: relative;

    padding: 50px;

    background: #fff;

    border-radius: 20px;

    text-align: center;

    box-shadow: 0 20px 50px rgba(0,0,0,0.06);
}

.quote-icon {
    width: 55px;
    height: 55px;

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

    margin: 0 auto 20px;

    background: var(--red);

    color: #fff;

    border-radius: 50%;
}

.stars {
    color: #ffb400;

    letter-spacing: 3px;

    margin-bottom: 20px;
}

.testimonial-card > p {
    color: #555;

    font-size: 17px;

    line-height: 1.8;
}

.client-info {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-top: 30px;
}

.client-avatar {
    width: 42px;
    height: 42px;

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

    background: #022c63;

    color: #fff;

    border-radius: 50%;

    font-weight: 700;
}

.client-info strong,
.client-info small {
    display: block;

    text-align: left;
}

.client-info strong {
    font-size: 11px;
}

.client-info small {
    color: #999;

    font-size: 9px;
}

.testimonial-dots {
    display: flex;
    justify-content: center;

    gap: 7px;

    margin-top: 25px;
}

.testimonial-dot {
    width: 8px;
    height: 8px;

    border: 0;

    border-radius: 50%;

    background: #ddd;
}

.testimonial-dot.active {
    width: 25px;

    border-radius: 20px;

    background: var(--red);
}


/* =========================================================
   FAQ SECTION
========================================================= */

.faq-section {
    background: #fff;
}

.faq-contact-card {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 30px;

    padding: 20px;

    background: #f7f7f7;

    border-radius: 12px;
}

.faq-contact-icon {
    width: 45px;
    height: 45px;

    min-width: 45px;

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

    background: var(--red);

    color: #fff;

    border-radius: 10px;
}

.faq-contact-card strong {
    display: block;

    font-size: 12px;
}

.faq-contact-card p {
    margin: 4px 0;

    color: #888;

    font-size: 10px;
}

.faq-contact-card a {
    color: var(--red);

    font-size: 10px;

    font-weight: 700;
}

.premium-accordion .accordion-item {
    border: 0;

    border-bottom: 1px solid #e8e8e8;
}

.premium-accordion .accordion-button {
    padding: 22px 5px;

    background: transparent;

    box-shadow: none !important;

    color: #022c63;

    font-size: 14px;

    font-weight: 700;
}

.premium-accordion .accordion-button:not(.collapsed) {
    color: var(--red);

    background: transparent;
}

.premium-accordion .accordion-button::after {
    background-size: 12px;
}

.premium-accordion .accordion-body {
    padding: 0 5px 22px;

    color: #888;

    font-size: 12px;

    line-height: 1.8;
}


/* =========================================================
   CTA SECTION
========================================================= */

.cta-section {
    position: relative;

    padding: 80px 0;

    background: var(--red);

    overflow: hidden;
}

.cta-shape {
    position: absolute;

    width: 450px;
    height: 450px;

    right: -150px;
    top: -220px;

    border: 1px solid rgba(255,255,255,0.2);

    border-radius: 50%;
}

.cta-shape::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: 75px;
    top: 75px;

    border: 1px solid rgba(255,255,255,0.15);

    border-radius: 50%;
}

.cta-inner {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;
}

.light-tag {
    color: #fff;
}

.light-tag::before {
    background: #fff;
}

.cta-content h2 {
    max-width: 700px;

    margin: 15px 0;

    color: #fff;

    font-size: 45px;
}

.cta-content h2 span {
    color: #022c63;
}

.cta-content p {
    max-width: 600px;

    color: rgba(255,255,255,0.8);

    font-size: 13px;
}

.cta-button {
    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding: 16px 20px;

    background: #022c63;

    color: #fff;

    white-space: nowrap;

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

    transition: 0.3s ease;
}

.cta-button span {
    width: 30px;
    height: 30px;

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

    border: 1px solid #444;

    border-radius: 50%;
}

.cta-button:hover {
    background: #fff;

    color: #022c63;
}

.site-footer {
    background: #001530;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}


/* =====================================================
   CTA SECTION
===================================================== */

.footer-cta {
    background: #ff0000;
    position: relative;
    overflow: hidden;
}

.footer-cta::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50%;
    right: -120px;
    top: -180px;
}

.footer-cta::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;
    right: 30px;
    bottom: -190px;
}

.footer-cta-inner {
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    z-index: 2;
}

.footer-cta-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 12px;
    color: #ffffff;
}

.footer-cta-content h2 {
    font-size: 42px;
    line-height: 1.15;
    font-weight: 700;
    margin: 0 0 12px;
}

.footer-cta-content h2 span {
    color: #022c63;
}

.footer-cta-content p {
    max-width: 650px;
    margin: 0;
    color: rgba(255,255,255,0.9);
    font-size: 15px;
    line-height: 1.7;
}

.footer-cta-btn {
    flex-shrink: 0;
    background: #022c63;
    color: #ffffff;
    padding: 17px 27px;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-cta-btn i {
    transition: transform 0.3s ease;
}

.footer-cta-btn:hover {
    background: #ffffff;
    color: #022c63;
}

.footer-cta-btn:hover i {
    transform: translateX(5px);
}


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

.footer-main {
    padding: 75px 0 60px;
    background: url(../images/footer-bg.jpg);
}

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

.footer-logo img {
    max-width: 210px;
    height: auto;
    display: block;
}

.footer-description {
    color: #a7a7a7;
    font-size: 14px;
    line-height: 1.9;
    max-width: 390px;
    margin-bottom: 25px;
}

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

.footer-social a {
    width: 40px;
    height: 40px;
    border: 1px solid #333333;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-social a:hover {
    background: #ff0000;
    border-color: #ff0000;
    transform: translateY(-4px);
}

.footer-title {
    font-size: 17px;
    font-weight: 700;
    margin: 8px 0 25px;
    color: #ffffff;
    position: relative;
    padding-bottom: 12px;
}

.footer-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 35px;
    height: 2px;
    background: #ff0000;
}

.footer-links {
    padding: 0;
    margin: 0;
    list-style: none;
}

.footer-links li {
    margin-bottom: 13px;
}

.footer-links a {
    color: #a7a7a7;
    text-decoration: none;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: all 0.3s ease;
}

.footer-links a i {
    color: #ff0000;
    font-size: 10px;
    transition: transform 0.3s ease;
}

.footer-links a:hover {
    color: #ffffff;
    transform: translateX(4px);
}

.footer-links a:hover i {
    transform: translateX(3px);
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.footer-contact-item:hover .contact-icon {
    background: #ff0000;
    border-color: #ff0000;
    color: #ffffff;
}

.footer-contact-item small {
    color: #777777;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-contact-item p {
    margin: 4px 0 0;
    color: #d0d0d0;
    font-size: 14px;
    line-height: 1.5;
}

.footer-contact-item a {
    color: #d0d0d0;
    text-decoration: none;
    transition: 0.3s ease;
}

.footer-contact-item a:hover {
    color: #ff0000;
}

.footer-address-item {
    align-items: flex-start;
}

.footer-address-content {
    flex: 1;
}

.footer-address-content > small {
    display: block;
    margin-bottom: 15px;
}

.address-column {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.address-column:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.address-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    color: var(--white);
    font-size: 13px;
    font-weight: 600;
}

.address-label i {
    color: var(--primary-red);
    font-size: 12px;
}

.address-column p {
    margin: 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    line-height: 1.7;
}

.footer-bottom {
    border-top: 1px solid #222222;
    background: #001640;
}

.footer-bottom-inner {
    min-height: 75px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.footer-bottom p {
    margin: 0;
    color: #777777;
    font-size: 13px;
}

.footer-bottom p strong {
    color: #ffffff;
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-bottom-links a {
    color: #777777;
    font-size: 13px;
    text-decoration: none;
    transition: 0.3s ease;
}

.footer-bottom-links a:hover {
    color: #ff0000;
}

.footer-bottom-links span {
    color: #333333;
}


/* =====================================================
   FLOATING BUTTONS
===================================================== */

.footer-floating {
    position: fixed;
    right: 20px;
    bottom: 25px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-floating a {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    font-size: 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.18);
    transition: all 0.3s ease;
}

.floating-call {
    background: #022c63;
}

.floating-whatsapp {
    background: #20c76a;
}

.footer-floating a:hover {
    transform: translateY(-4px) scale(1.05);
}


.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 145px;
    width: 45px;
    height: 45px;
    border: none;
    background: #ff0000;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s ease;
    z-index: 998;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: #022c63;
}



/* =====================================================
    LOADER
===================================================== */

.page-loader {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    overflow: hidden;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.6s ease,
        visibility 0.6s ease;
}

.page-loader.loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loader-logo {
    width: 190px;
    height: 190px;
    position: relative;

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

    margin-bottom: 25px;
}

.loader-logo img {
    width: 135px;
    height: 135px;
    object-fit: contain;

    position: relative;
    z-index: 3;

    animation: logoPulse 2s ease-in-out infinite;
}

.loader-ring {
    position: absolute;

    width: 175px;
    height: 175px;

    border-radius: 50%;

    border: 3px solid #eeeeee;
    border-top-color: #ff0000;
    border-right-color: #ff0000;

    animation: loaderRotate 1.3s linear infinite;

    box-shadow:
        0 0 20px rgba(255, 0, 0, 0.08),
        inset 0 0 15px rgba(255, 0, 0, 0.05);
}

.loader-logo::before {
    content: "";

    position: absolute;

    width: 145px;
    height: 145px;

    border-radius: 50%;

    border: 1px dashed rgba(255, 0, 0, 0.35);

    animation: loaderReverse 3s linear infinite;
}

.loader-text {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    margin-bottom: 18px;
}


.loader-text span {
    font-size: 19px;
    font-weight: 800;

    letter-spacing: 4px;

    color: #022c63;

    line-height: 1.2;
}


.loader-text small {
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 5px;

    color: #ff0000;

    margin-top: 5px;
}

.loader-dots {
    display: flex;
    align-items: center;
    gap: 7px;
}


.loader-dots span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #ff0000;

    animation: loadingDots 1.2s infinite ease-in-out;
}


.loader-dots span:nth-child(1) {
    animation-delay: 0s;
}


.loader-dots span:nth-child(2) {
    animation-delay: 0.15s;
}


.loader-dots span:nth-child(3) {
    animation-delay: 0.30s;
}


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

@keyframes loaderRotate {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }

}


@keyframes loaderReverse {

    0% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
    }

}


@keyframes logoPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

}


@keyframes loadingDots {

    0%,
    80%,
    100% {
        transform: scale(0.6);
        opacity: 0.4;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }

}

/* =====================================================
 ABOUT PAGE
===================================================== */

.section-padding {
    padding: 100px 0;
}

.section-tag {
    display: inline-block;
    color: #ff0000;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.section-heading {
    max-width: 700px;
    margin: auto;
}

.section-heading h2,
.about-content h2,
.why-about h2 {
    font-size: 44px;
    line-height: 1.15;
    font-weight: 750;
    color: var(--blue);
}

.section-heading h2 span,
.about-content h2 span,
.why-about h2 span {
    color: var(--primary-red);
    display: block;
}

.section-heading p {
    color: var(--text);
    line-height: 1.8;
    margin-top: 15px;
}

.about-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin: 30px 0;
}

.about-feature {
    display: flex;
    gap: 13px;
}

.about-feature > span {
    width: 35px;
    height: 35px;
    min-width: 35px;
    background: rgba(255,0,0,.1);
    color: var(--primary-red);
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-feature h5 {
    font-size: 15px;
    margin: 0 0 5px;
}

.about-feature p {
    color: #777;
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
}
.primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: var(--primary-red);
    color: var(--white);
    padding: 16px 25px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: .3s ease;
}

.primary-btn i {
    transition: .3s ease;
}

.primary-btn:hover {
    background: var(--black);
    color: var(--white);
}

.primary-btn:hover i {
    transform: translateX(5px);
}


/* =====================================================
   MISSION
===================================================== */

.mission-section {
    background: var(--light);
}

.mission-card {
    height: 100%;
    background: var(--white);
    padding: 40px;
    display: flex;
    gap: 25px;
    position: relative;
    overflow: hidden;
    border: 1px solid #eeeeee;
    transition: .4s ease;
}

.mission-card::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    right: -45px;
    bottom: -45px;
    border-radius: 50%;
    border: 15px solid rgba(255,0,0,.08);
}

.mission-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0,0,0,.08);
}

.mission-icon {
    width: 65px;
    height: 65px;
    min-width: 65px;
    background: rgba(255,0,0,.1);
    color: var(--primary-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}

.mission-card span {
    color: var(--primary-red);
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 800;
}

.mission-card h3 {
    font-size: 23px;
    margin: 8px 0 12px;
}

.mission-card p {
    color: var(--text);
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
}

.mission-card-dark {
    background: var(--blue);
    border-color: var(--blue);
}

.mission-card-dark h3 {
    color: var(--white);
}

.mission-card-dark p {
    color: #999;
}


/* =====================================================
   CTA
===================================================== */

.about-cta {
    background: var(--primary-red);
}

.about-cta-inner {
    min-height: 230px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.about-cta-inner > div > span {
    color: #111;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.about-cta h2 {
    color: var(--white);
    font-size: 40px;
    margin: 10px 0 0;
}

.about-cta h2 strong {
    color: #111;
}

.about-cta-inner > a {
    background: #111;
    color: var(--white);
    padding: 17px 27px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    white-space: nowrap;
    transition: .3s ease;
}

.about-cta-inner > a:hover {
    background: var(--white);
    color: #111;
}

.about-cta-inner > a i {
    transition: .3s ease;
}

.about-cta-inner > a:hover i {
    transform: translateX(5px);
}


/* =====================================================
 PROJECTS PAGE
===================================================== */

.projects-intro,
.projects-filter-section,
.featured-project,
.projects-grid-section,
.project-process {
    position: relative;
}

.section-tag {
    display: inline-block;
    color: var(--primary-red);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;
    margin-bottom: 14px;
}


/* =====================================================
   PROJECT INTRO
===================================================== */

.projects-intro {
    padding: 100px 0 55px;
    background: var(--white);
}

.projects-intro h2 {
    max-width: 700px;
    font-size: 48px;
    line-height: 1.12;
    font-weight: 800;
    color: var(--blue);
    margin: 0;
}

.projects-intro h2 span {
    color: var(--primary-red);
    display: block;
}

.projects-intro-text {
    max-width: 500px;
    color: var(--text);
    font-size: 15px;
    line-height: 1.9;
    margin: 0;
}


/* =====================================================
   FILTER
===================================================== */

.projects-filter-section {
    padding: 0 0 65px;
    background: var(--white);
}

.projects-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 20px;
    flex-wrap: wrap;
}

.project-filter-btn {
    border: 1px solid #dedede;
    background: transparent;
    color: #555;
    padding: 11px 21px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: .3s ease;
}

.project-filter-btn:hover,
.project-filter-btn.active {
    background: var(--primary-red);
    border-color: var(--primary-red);
    color: var(--white);
}


/* =====================================================
   FEATURED PROJECT
===================================================== */

.featured-project {
    padding: 0 0 100px;
    background: var(--white);
}

.featured-project-card {
    background: var(--black);
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,.12);
}

.featured-project-image {
    height: 560px;
    position: relative;
    overflow: hidden;
}

.featured-project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s ease;
}

.featured-project-card:hover
.featured-project-image img {
    transform: scale(1.05);
}

.featured-overlay {
    position: absolute;
    left: 25px;
    bottom: 25px;
    right: 25px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    color: var(--white);
}

.featured-overlay span {
    background: var(--primary-red);
    padding: 9px 14px;
    font-size: 10px;
    letter-spacing: 1.5px;
    font-weight: 800;
}

.featured-overlay i {
    width: 45px;
    height: 45px;
    background: var(--white);
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
}


.featured-project-content {
    height: 100%;
    min-height: 560px;
    padding: 65px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.project-category {
    color: var(--primary-red);
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 800;
}

.featured-project-content h3 {
    color: var(--white);
    font-size: 34px;
    line-height: 1.2;
    margin: 16px 0 20px;
}

.featured-project-content > p {
    color: #999;
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 30px;
}

.project-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    border-top: 1px solid #292929;
    border-bottom: 1px solid #292929;
    padding: 20px 0;
    margin-bottom: 30px;
}

.project-details div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.project-details small {
    color: #666;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.project-details strong {
    color: #ddd;
    font-size: 12px;
}

.project-view-btn {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    color: var(--white);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    border-bottom: 1px solid var(--primary-red);
    padding-bottom: 8px;
    transition: .3s ease;
}

.project-view-btn i {
    color: var(--primary-red);
    transition: .3s ease;
}

.project-view-btn:hover {
    color: var(--primary-red);
}

.project-view-btn:hover i {
    transform: translateX(5px);
}


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

.projects-grid-section {
    padding: 100px 0;
    background: var(--light-bg);
}

.section-heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 50px;
}

.section-heading-row h2 {
    font-size: 42px;
    line-height: 1.15;
    font-weight: 800;
    color: var(--blue);
    margin: 0;
}

.section-heading-row h2 span {
    color: var(--primary-red);
    display: block;
}

.section-heading-row > p {
    max-width: 430px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
}

.project-card {
    background: var(--white);
    overflow: hidden;
    transition: .4s ease;
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(0,0,0,.1);
}

.project-image {
    height: 400px;
    position: relative;
    overflow: hidden;
    background: #ddd;
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}

.project-card:hover .project-image img {
    transform: scale(1.07);
}

.project-number {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 42px;
    height: 42px;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black);
    font-size: 12px;
    font-weight: 800;
}

.project-arrow {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 48px;
    height: 48px;
    background: var(--primary-red);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transform: translateY(15px);
    opacity: 0;
    transition: .4s ease;
}

.project-card:hover .project-arrow {
    opacity: 1;
    transform: translateY(0);
}

.project-card-content {
    padding: 27px 28px 30px;
    display: flex;
    justify-content: space-between;
    gap: 25px;
}

.project-card-content span {
    font-size: 9px;
    color: var(--primary-red);
    letter-spacing: 1.8px;
    font-weight: 800;
}

.project-card-content h3 {
    font-size: 21px;
    margin: 7px 0 0;
    color: var(--blue);
}

.project-card-content p {
    max-width: 210px;
    color: #777;
    font-size: 12px;
    line-height: 1.7;
    margin: 0;
}

.project-item.project-hidden {
    display: none;
}



/* =====================================================
   CTA
===================================================== */

.projects-cta {
    background: var(--primary-red);
}

.projects-cta-inner {
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.projects-cta-inner > div > span {
    color: #111;
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 800;
}

.projects-cta h2 {
    color: var(--white);
    font-size: 42px;
    line-height: 1.15;
    margin: 10px 0 0;
}

.projects-cta h2 strong {
    color: #111;
}

.projects-cta-inner > a {
    background: #111;
    color: var(--white);
    padding: 17px 28px;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    transition: .3s ease;
}

.projects-cta-inner > a:hover {
    background: var(--white);
    color: #111;
}

.projects-cta-inner > a i {
    transition: .3s ease;
}

.projects-cta-inner > a:hover i {
    transform: translateX(5px);
}


/* =====================================================
 CAREER PAGE
===================================================== */

.section-tag {
    display: inline-block;
    color: var(--primary-red);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;
    margin-bottom: 14px;
}

.career-heading {
    max-width: 750px;
}

.career-heading.text-center {
    margin-left: auto;
    margin-right: auto;
}

.career-heading h2 {
    color: var(--blue);
    font-size: 45px;
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 18px;
}

.career-heading h2 span {
    color: var(--primary-red);
    display: block;
}

.career-heading > p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.9;
    margin: 0;
}

.career-intro {
    padding: 105px 0;
    background: var(--white);
    overflow: hidden;
}

.career-intro h1 {
    max-width: 720px;
    color: var(--blue);
    font-size: 60px;
    line-height: 1.08;
    font-weight: 800;
    margin: 0 0 25px;
}

.career-intro h1 span {
    color: var(--primary-red);
    display: block;
}

.career-intro > .container
.row > .col-lg-7 > p {
    max-width: 650px;
    color: var(--text-color);
    font-size: 16px;
    line-height: 1.9;
}

.career-intro-buttons {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 30px;
}

.career-primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: var(--primary-red);
    color: var(--white);
    text-decoration: none;
    padding: 16px 24px;
    font-size: 12px;
    font-weight: 800;
    transition: .3s ease;
}

.career-primary-btn:hover {
    background: var(--primary-red-dark);
    color: var(--white);
}

.career-primary-btn i {
    transition: .3s ease;
}

.career-primary-btn:hover i {
    transform: translateY(4px);
}

.career-text-btn {
    color: var(--blue);
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.career-text-btn i {
    color: var(--primary-red);
    transition: .3s ease;
}

.career-text-btn:hover {
    color: var(--primary-red);
}

.career-text-btn:hover i {
    transform: translateX(5px);
}

.career-visual {
    position: relative;
    padding: 0 25px 25px 0;
}

.career-main-image {
    height: 530px;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.career-main-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 0, 0, .12),
        transparent 45%
    );
}

.career-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .7s ease;
}

.career-visual:hover .career-main-image img {
    transform: scale(1.05);
}

.career-pattern {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 180px;
    height: 180px;

    background-image: radial-gradient(
        var(--primary-red) 1px,
        transparent 1px
    );

    background-size: 11px 11px;
}

.career-floating-card {
    position: absolute;
    left: -35px;
    bottom: 55px;
    z-index: 5;

    background: var(--primary-red);
    color: var(--white);

    min-width: 205px;
    padding: 22px;

    display: flex;
    align-items: center;
    gap: 15px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .2);
}

.career-floating-card > i {
    font-size: 25px;
}

.career-floating-card strong,
.career-floating-card span {
    display: block;
}

.career-floating-card strong {
    font-size: 14px;
}

.career-floating-card span {
    font-size: 11px;
    opacity: .8;
    margin-top: 3px;
}


/* =====================================================
   WHY JOIN
===================================================== */

.why-join-section {
    padding: 100px 0;
    background: var(--light-bg);
}

.career-benefit-card {
    position: relative;
    background: var(--white);

    padding: 38px;
    min-height: 290px;

    border: 1px solid var(--border-color);

    overflow: hidden;
    transition: .4s ease;
}

.career-benefit-card::after {
    content: "";

    position: absolute;
    right: -55px;
    bottom: -55px;

    width: 140px;
    height: 140px;

    border-radius: 50%;
    border: 18px solid rgba(255, 0, 0, .05);
}

.career-benefit-card:hover {
    transform: translateY(-7px);

    border-color: var(--primary-red);

    box-shadow: 0 18px 45px rgba(0, 0, 0, .08);
}

.benefit-number {
    position: absolute;
    top: 20px;
    right: 22px;

    color: #ddd;
    font-size: 11px;
    font-weight: 800;
}

.benefit-icon {
    width: 58px;
    height: 58px;

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

    background: rgba(255, 0, 0, .08);
    color: var(--primary-red);

    font-size: 21px;

    margin-bottom: 22px;
}

.career-benefit-card h3 {
    color: var(--blue);
    font-size: 20px;
    margin-bottom: 12px;
}

.career-benefit-card p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
    margin: 0;
}


/* =====================================================
   CULTURE
===================================================== */

.career-culture {
    padding: 105px 0;
    background: var(--white);
}

.career-culture h2 {
    color: var(--blue);
    font-size: 44px;
    line-height: 1.15;
    font-weight: 800;
    margin-bottom: 20px;
}

.career-culture h2 span {
    display: block;
    color: var(--primary-red);
}

.career-culture > .container
.row > .col-lg-5 > p {
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.9;
}

.culture-points {
    margin-top: 25px;
}

.culture-points > div {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 13px;
}

.culture-points i {
    width: 24px;
    height: 24px;

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

    background: rgba(255, 0, 0, .1);
    color: var(--primary-red);

    font-size: 10px;
}

.culture-points span {
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
}


/* =====================================================
   CULTURE GALLERY
===================================================== */

.culture-gallery {
    min-height: 550px;
    position: relative;
}

.culture-image {
    position: absolute;
    overflow: hidden;
}

.culture-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .6s ease;
}

.culture-image:hover img {
    transform: scale(1.06);
}

.culture-image-one {
    width: 58%;
    height: 360px;
    top: 0;
    left: 0;
}

.culture-image-two {
    width: 45%;
    height: 300px;

    right: 0;
    bottom: 0;

    z-index: 2;

    border: 12px solid var(--white);
}

.culture-image-three {
    width: 38%;
    height: 220px;

    left: 22%;
    bottom: 0;
}

/* =====================================================
   OPEN POSITIONS
===================================================== */

.open-position-section {
    padding: 100px 0;
    background: var(--light-bg);
}

.job-list {
    margin-top: 45px;
}

.job-card {
    background: var(--white);

    padding: 28px 32px;
    margin-bottom: 15px;

    border: 1px solid var(--border-color);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    transition: .35s ease;
}

.job-card:hover {
    border-color: var(--primary-red);

    transform: translateX(5px);

    box-shadow: 0 12px 35px rgba(0, 0, 0, .06);
}

.job-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.job-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;

    background: var(--blue);
    color: var(--primary-red);

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

    font-size: 20px;

    transition: .3s ease;
}

.job-card:hover .job-icon {
    background: var(--primary-red);
    color: var(--white);
}

.job-type {
    color: var(--primary-red);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.job-card h3 {
    color: var(--blue);

    font-size: 19px;

    margin: 6px 0 10px;
}

.job-meta {
    display: flex;
    align-items: center;
    gap: 20px;
}

.job-meta span {
    color: var(--muted);
    font-size: 11px;
}

.job-meta i {
    color: var(--primary-red);
    margin-right: 5px;
}

.job-apply-btn {
    color: var(--blue);

    border-bottom: 1px solid var(--primary-red);

    text-decoration: none;

    padding-bottom: 6px;

    font-size: 12px;
    font-weight: 800;

    white-space: nowrap;
}

.job-apply-btn i {
    color: var(--primary-red);
    margin-left: 8px;
    transition: .3s ease;
}

.job-apply-btn:hover {
    color: var(--primary-red);
}

.job-apply-btn:hover i {
    transform: translateX(5px);
}


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

.hiring-process {
    padding: 105px 0;
    background: var(--white);
    overflow: hidden;
}

.hiring-process-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 55px;
}

.hiring-process-header h2 {
    color: var(--blue);
    font-size: 45px;
    line-height: 1.12;
    font-weight: 800;
    margin: 0;
}

.hiring-process-header h2 span {
    color: var(--primary-red);
    display: block;
}

.hiring-process-header > p {
    max-width: 430px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.9;
    margin: 0 0 3px;
}

.hiring-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    position: relative;
}

.hiring-timeline::before {
    content: "";

    position: absolute;

    top: 39px;
    left: 8%;
    right: 8%;

    height: 1px;

    background: var(--border-color);

    z-index: 0;
}

.hiring-process-card {
    position: relative;
    z-index: 2;

    background: var(--light-bg);

    padding: 30px;

    min-height: 350px;

    border: 1px solid var(--border-color);

    transition:
        transform .4s ease,
        background .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}

.hiring-process-card:hover {
    background: var(--blue);

    border-color: var(--blue);

    transform: translateY(-8px);

    box-shadow: 0 25px 50px rgba(0, 21, 53, .16);
}

.process-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 45px;
}

.hiring-process-number {
    color: var(--primary-red);

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 1px;
}

.hiring-process-icon {
    width: 58px;
    height: 58px;

    background: var(--white);

    color: var(--primary-red);

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

    font-size: 19px;

    border: 1px solid var(--border-color);

    transition: .4s ease;
}

.hiring-process-card:hover .process-icon {
    background: var(--primary-red);

    color: var(--white);

    border-color: var(--primary-red);

    transform: rotate(-5deg);
}

.process-label {
    display: block;

    color: var(--muted);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 8px;

    transition: .3s ease;
}

.hiring-process-card:hover .process-label {
    color: rgba(255,255,255,.5);
}

.hiring-process-content h3 {
    color: var(--blue);

    font-size: 25px;
    font-weight: 800;

    margin: 0 0 15px;

    transition: .3s ease;
}

.hiring-process-card:hover .hiring-process-content h3 {
    color: var(--white);
}

.hiring-process-content p {
    color: var(--muted);

    font-size: 13px;
    line-height: 1.8;

    margin: 0;

    transition: .3s ease;
}

.hiring-process-card:hover .hiring-process-content p {
    color: rgba(255,255,255,.62);
}

.process-arrow {
    position: absolute;

    left: 30px;
    bottom: 28px;

    width: 38px;
    height: 38px;

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

    background: var(--white);

    color: var(--primary-red);

    font-size: 12px;

    transition: .4s ease;
}

.hiring-process-card:hover .process-arrow {
    background: var(--primary-red);

    color: var(--white);

    transform: translateX(5px);
}

.hiring-process-card-last {
    background: var(--blue);

    border-color: var(--blue);
}

.hiring-process-card-last .hiring-process-number {
    color: var(--primary-red);
}

.hiring-process-card-last .hiring-process-content h3 {
    color: var(--white);
}

.hiring-process-card-last .hiring-process-content p {
    color: rgba(255,255,255,.62);
}

.hiring-process-card-last .process-label {
    color: rgba(255,255,255,.5);
}

.hiring-process-card-last .hiring-process-icon {
    background: var(--primary-red);
    color: var(--white);
    border-color: var(--primary-red);
}

.hiring-process-card-last .process-arrow {
    background: var(--primary-red);
    color: var(--white);
}

.hiring-process-card-last:hover {
    background: var(--primary-red);
    border-color: var(--primary-red);
}

.hiring-process-card-last:hover .hiring-process-icon {
    background: var(--white);
    color: var(--primary-red);
}

.hiring-process-card-last:hover .process-arrow {
    background: var(--white);
    color: var(--primary-red);
}


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

.breadcrumb {
    position: relative;
    padding: 95px 0 85px;

    background: url(../images/bg1.png);
    background-size: cover;

    overflow: hidden;
}

.breadcrumb::before {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    right: -160px;
    top: -200px;

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

    border-radius: 50%;
}

.breadcrumb::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -50px;
    top: -110px;

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

    border-radius: 50%;
}

.breadcrumb-content {
    position: relative;
    z-index: 2;
}

.breadcrumb-label {
    color: var(--primary-red);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 3px;
}

.breadcrumb h1 {
    color: var(--white);

    font-size: 58px;
    font-weight: 800;

    margin: 15px 0 15px;
}

.breadcrumb h1 span {
    color: var(--primary-red);
}

.breadcrumb p {
    max-width: 600px;

    color: rgba(255,255,255,.6);

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

    margin-bottom: 28px;
}

.breadcrumb-links {
    display: flex;
    align-items: center;
    gap: 12px;

    font-size: 11px;
}

.breadcrumb-links a {
    color: var(--white);
    text-decoration: none;
}

.breadcrumb-links i {
    color: var(--primary-red);
    font-size: 9px;
}

.breadcrumb-links span {
    color: rgba(255,255,255,.45);
}


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

.featured-blog {
    padding: 100px 0;
    background: var(--white);
}

.featured-blog-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;

    background: var(--light-bg);
}

.featured-blog-image {
    min-height: 510px;
    position: relative;
    overflow: hidden;
}

.featured-blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: .7s ease;
}

.featured-blog-grid:hover .featured-blog-image img {
    transform: scale(1.05);
}

.featured-badge {
    position: absolute;

    top: 25px;
    left: 25px;

    background: var(--primary-red);
    color: var(--white);

    padding: 9px 15px;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.featured-blog-content {
    padding: 60px 55px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-category {
    color: var(--primary-red);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;
}

.featured-blog-content h2 {
    color: var(--blue);

    font-size: 39px;
    line-height: 1.15;
    font-weight: 800;

    margin: 15px 0 20px;
}

.featured-blog-content h2 span {
    color: var(--primary-red);
    display: block;
}

.featured-blog-content > p {
    color: var(--muted);

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

    margin-bottom: 25px;
}

.blog-meta {
    display: flex;
    gap: 25px;

    margin-bottom: 30px;
}

.blog-meta span {
    color: var(--muted);
    font-size: 10px;
}

.blog-meta i {
    color: var(--primary-red);
    margin-right: 6px;
}

.blog-read-btn {
    width: fit-content;

    display: inline-flex;
    align-items: center;
    gap: 15px;

    color: var(--blue);

    text-decoration: none;

    font-size: 11px;
    font-weight: 800;

    border-bottom: 1px solid var(--primary-red);

    padding-bottom: 8px;
}

.blog-read-btn i {
    color: var(--primary-red);
    transition: .3s ease;
}

.blog-read-btn:hover {
    color: var(--primary-red);
}

.blog-read-btn:hover i {
    transform: translateX(5px);
}


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

.latest-blog {
    padding: 100px 0;
    background: var(--light-bg);
}

.blog-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    margin-bottom: 50px;
}

.blog-section-heading h2,
.blog-category-header h2 {
    color: var(--blue);

    font-size: 43px;
    line-height: 1.15;
    font-weight: 800;

    margin: 0;
}

.blog-section-heading h2 span,
.blog-category-header h2 span {
    color: var(--primary-red);
}

.blog-section-heading > p {
    max-width: 470px;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.9;

    margin: 0;
}

.blog-grid {
    display: grid;

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

    gap: 25px;
}

.blog-card {
    background: var(--white);

    border: 1px solid var(--border-color);

    overflow: hidden;

    transition: .4s ease;
}

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

    border-color: var(--primary-red);

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

.blog-card-image {
    height: 245px;

    position: relative;

    overflow: hidden;
}

.blog-card-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: .6s ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.07);
}

.blog-card-category {
    position: absolute;

    left: 18px;
    bottom: 18px;

    background: var(--primary-red);

    color: var(--white);

    padding: 7px 11px;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1px;
}

.blog-card-content {
    padding: 27px;
}

.blog-card-meta {
    display: flex;
    justify-content: space-between;

    color: var(--muted);

    font-size: 9px;

    margin-bottom: 12px;
}

.blog-card h3 {
    color: var(--blue);

    font-size: 19px;
    line-height: 1.4;

    margin: 0 0 13px;
}

.blog-card p {
    color: var(--muted);

    font-size: 12px;
    line-height: 1.8;

    margin-bottom: 20px;
}

.blog-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--blue);

    text-decoration: none;

    font-size: 10px;
    font-weight: 800;
}

.blog-link i {
    color: var(--primary-red);

    transition: .3s ease;
}

.blog-link:hover {
    color: var(--primary-red);
}

.blog-link:hover i {
    transform: translateX(5px);
}


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

.blog-categories {
    padding: 100px 0;
    background: var(--white);
}

.blog-category-header {
    margin-bottom: 45px;
}

.category-list {
    display: grid;

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

    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
}

.category-item {
    min-height: 85px;

    padding: 0 25px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    color: var(--blue);

    text-decoration: none;

    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);

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

    transition: .3s ease;
}

.category-item i {
    color: var(--primary-red);

    transition: .3s ease;
}

.category-item:hover {
    background: var(--blue);

    color: var(--white);
}

.category-item:hover i {
    transform: translateX(5px);
}


/* =====================================================
   NEWSLETTER
===================================================== */

.blog-newsletter {
    padding: 85px 0;

    background: var(--primary-red);
}

.blog-newsletter-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 50px;
}

.newsletter-content {
    max-width: 600px;
}

.newsletter-content > span {
    color: var(--blue);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;
}

.newsletter-content h2 {
    color: var(--white);

    font-size: 40px;
    line-height: 1.1;

    margin: 10px 0;
}

.newsletter-content h2 strong {
    color: var(--blue);
}

.newsletter-content p {
    color: rgba(0,0,0,.6);

    font-size: 13px;
    line-height: 1.7;

    margin: 0;
}

.newsletter-form {
    display: flex;

    width: 100%;
    max-width: 470px;

    background: var(--white);

    padding: 6px;
}

.newsletter-form input {
    flex: 1;

    min-width: 0;

    border: 0;
    outline: none;

    padding: 15px;

    color: var(--blue);

    font-size: 12px;
}

.newsletter-form button {
    border: 0;

    background: var(--blue);

    color: var(--white);

    padding: 0 22px;

    font-size: 10px;
    font-weight: 800;

    display: flex;
    align-items: center;
    gap: 12px;

    cursor: pointer;

    transition: .3s ease;
}

.newsletter-form button:hover {
    background: var(--black);
}

.newsletter-form button i {
    color: var(--primary-red);
}

/* =====================================================
   CONTACT PAGE
===================================================== */


.contact-info-section {
    padding: 100px 0;
    background: var(--white);
}

.contact-info-card {
    height: 100%;
    display: flex;
    gap: 22px;
    padding: 30px;
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    transition: all 0.35s ease;
}

.contact-info-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-red);
    box-shadow: 0 18px 45px rgba(0,0,0,0.08);
}

.contact-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-red);
    color: var(--white);
    font-size: 22px;
}

.contact-info-content span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

.contact-info-content h4 {
    color: var(--blue);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    word-break: break-word;
}

.contact-info-content p {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 15px;
}

.contact-info-content a {
    color: var(--primary-red);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.contact-info-content a i {
    margin-left: 5px;
}


/* =====================================================
   MAIN CONTACT
===================================================== */

.main-contact-section {
    padding: 110px 0;
    background: var(--light-bg);
}

.contact-left-content {
    padding-right: 35px;
}

.contact-left-content h2 {
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.15;
    font-weight: 800;
    color: var(--blue);
    margin-bottom: 22px;
}

.contact-left-content h2 span {
    color: var(--primary-red);
}

.contact-description {
    color: var(--muted);
    line-height: 1.8;
    font-size: 15px;
    max-width: 500px;
}

.contact-benefits {
    margin-top: 35px;
}

.contact-benefit {
    display: flex;
    gap: 15px;
    margin-bottom: 23px;
}

.benefit-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--primary-red);
    color: var(--white);
    border-radius: 50%;
    font-size: 13px;
}

.contact-benefit h5 {
    margin: 0 0 5px;
    font-size: 16px;
    color: var(--blue);
    font-weight: 700;
}

.contact-benefit p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.contact-working-hours {
    margin-top: 35px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    border-left: 3px solid var(--primary-red);
    background: var(--white);
}

.hours-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: var(--white);
    font-size: 18px;
}

.contact-working-hours span,
.contact-working-hours strong,
.contact-working-hours small {
    display: block;
}

.contact-working-hours span {
    color: var(--primary-red);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.contact-working-hours strong {
    color: var(--blue);
    font-size: 14px;
    margin-top: 3px;
}

.contact-working-hours small {
    color: var(--muted);
    font-size: 12px;
    margin-top: 3px;
}


.contact-form-wrapper {
    background: var(--white);
    padding: 45px;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 60px rgba(0,0,0,0.06);
}

.form-header {
    margin-bottom: 30px;
}

.form-header span {
    color: var(--primary-red);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.form-header h3 {
    margin: 8px 0;
    color: var(--blue);
    font-size: 30px;
    font-weight: 800;
}

.form-header p {
    color: var(--muted);
    font-size: 14px;
    margin: 0;
}

.form-group label {
    display: block;
    color: var(--blue);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 9px;
}

.input-box {
    position: relative;
}

.input-box > i {
    position: absolute;
    top: 50%;
    left: 17px;
    transform: translateY(-50%);
    color: var(--primary-red);
    font-size: 15px;
    z-index: 2;
}

.input-box input,
.input-box textarea {
    width: 100%;
    border: 1px solid var(--border);
    outline: none;
    background: var(--light);
    color: var(--blue);
    font-size: 14px;
    padding: 15px 18px 15px 48px;
    transition: 0.3s ease;
}

.input-box input {
    height: 52px;
}

.input-box textarea {
    resize: vertical;
    min-height: 140px;
    padding-top: 16px;
}

.input-box.textarea-box > i {
    top: 20px;
    transform: none;
}

.input-box input:focus,
.input-box textarea:focus {
    border-color: var(--primary-red);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(255,0,0,0.06);
}

.contact-submit-btn {
    border: 0;
    outline: 0;
    width: 100%;
    min-height: 55px;
    padding: 0 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--primary-red);
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s ease;
}

.submit-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    color: var(--primary-red);
}

.contact-submit-btn:hover {
    background: var(--primary-red-dark);
}


/* =====================================================
   WHY CONNECT
===================================================== */

.contact-why-section {
    padding: 110px 0;
    background: var(--white);
}

.why-contact-card {
    position: relative;
    height: 100%;
    padding: 35px 30px;
    background: var(--white);
    border: 1px solid var(--border);
    transition: 0.35s ease;
    overflow: hidden;
}

.why-contact-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-red);
    box-shadow: 0 20px 45px rgba(0,0,0,0.08);
}

.why-number {
    position: absolute;
    top: 20px;
    right: 22px;
    color: #eeeeee;
    font-size: 40px;
    font-weight: 800;
}

.why-contact-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: var(--white);
    font-size: 22px;
    margin-bottom: 25px;
}

.why-contact-card h4 {
    color: var(--blue);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}

.why-contact-card p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
    margin: 0;
}



/* =====================================================
   WEBSITE DEVELOPMENT PAGE
===================================================== */


.service-page-banner {
    position: relative;
    padding: 120px 0 105px;
    background: var(--blue);
    overflow: hidden;
}

.service-page-banner::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    right: -180px;
    top: -220px;
    border-radius: 50%;
    background: var(--primary-red);
    opacity: 0.08;
}

.service-page-banner::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    left: -100px;
    bottom: -130px;
    border: 1px solid rgba(255,0,0,0.25);
    border-radius: 50%;
}

.service-banner-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.service-banner-tag {
    display: inline-block;
    color: var(--primary-red);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.service-banner-content h1 {
    color: var(--white);
    font-size: clamp(42px, 6vw, 72px);
    font-weight: 800;
    line-height: 1.1;
    margin: 0;
}

.service-banner-content h1 span {
    color: var(--primary-red);
}

.service-banner-content p {
    max-width: 700px;
    color: rgba(255,255,255,0.68);
    font-size: 17px;
    line-height: 1.8;
    margin: 25px 0;
}

.service-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.55);
    font-size: 13px;
}

.service-breadcrumb a {
    color: var(--white);
    text-decoration: none;
}

.service-breadcrumb i {
    color: var(--primary-red);
}


/* =====================================================
   INTRO
===================================================== */

.webdev-intro-section {
    padding: 110px 0;
    background: var(--white);
}

.webdev-intro-content h2 {
    color: var(--blue);
    font-size: clamp(34px, 4vw, 50px);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 25px;
}

.webdev-intro-content h2 span {
    color: var(--primary-red);
}

.webdev-intro-content p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 18px;
}

.webdev-intro-points {
    margin-top: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.intro-point {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--blue);
    font-size: 13px;
    font-weight: 600;
}

.intro-point i {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-red);
    color: var(--white);
    border-radius: 50%;
    font-size: 10px;
}


/* =====================================================
   CODE VISUAL
===================================================== */

.webdev-visual {
    position: relative;
    min-height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.webdev-main-box {
    width: 90%;
    min-height: 310px;
    background: var(--blue);
    box-shadow: 0 25px 70px rgba(0,0,0,0.18);
}

.code-topbar {
    height: 48px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.code-topbar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary-red);
}

.code-content {
    padding: 45px 35px;
}

.code-line {
    margin-bottom: 18px;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.8;
}

.code-indent {
    padding-left: 25px;
}

.code-red {
    color: var(--primary-red);
}

.code-blue {
    color: #66aaff;
}

.code-white {
    color: rgba(255,255,255,0.8);
}

.webdev-floating-card {
    position: absolute;
    right: 0;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 18px 22px;
    background: var(--white);
    box-shadow: 0 15px 45px rgba(0,0,0,0.15);
}

.floating-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-red);
    color: var(--white);
    font-size: 18px;
}

.webdev-floating-card strong,
.webdev-floating-card small {
    display: block;
}

.webdev-floating-card strong {
    color: var(--blue);
    font-size: 14px;
}

.webdev-floating-card small {
    color: var(--muted);
    font-size: 11px;
    margin-top: 3px;
}


/* =====================================================
   SERVICES
===================================================== */

.webdev-services-section {
    padding: 110px 0;
    background: var(--light-bg);
}

.section-heading {
    max-width: 720px;
    margin: auto;
}

.section-heading h2 {
    color: var(--blue);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.2;
}

.section-heading h2 span {
    color: var(--primary-red);
}

.section-heading p {
    color: var(--muted);
    line-height: 1.8;
    margin-top: 15px;
}

.webdev-service-card {
    position: relative;
    height: 100%;
    padding: 38px 32px;
    background: var(--white);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: all 0.35s ease;
}

.webdev-service-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-red);
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

.service-card-number {
    position: absolute;
    top: 18px;
    right: 20px;
    color: #eeeeee;
    font-size: 38px;
    font-weight: 800;
}

.service-card-icon {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: var(--white);
    font-size: 22px;
    margin-bottom: 25px;
}

.webdev-service-card h3 {
    color: var(--blue);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 14px;
}

.webdev-service-card p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
    margin-bottom: 20px;
}

.webdev-service-card a {
    color: var(--primary-red);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

.webdev-service-card a i {
    margin-left: 7px;
}


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

.webdev-process-section {
    padding: 110px 0;
    background: var(--white);
}

.webdev-process {
    max-width: 900px;
    margin: 55px auto 0;
    position: relative;
}

.webdev-process::before {
    content: "";
    position: absolute;
    left: 38px;
    top: 20px;
    bottom: 20px;
    width: 1px;
    background: var(--border);
}

.webdev-process-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 22px 0;
}

.webdev-process-number {
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-red);
    color: var(--white);
    font-size: 17px;
    font-weight: 800;
    position: relative;
    z-index: 2;
}

.webdev-process-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--light-bg);
    color: var(--primary-red);
    font-size: 19px;
}

.webdev-process-content h4 {
    color: var(--blue);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 7px;
}

.webdev-process-content p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
}


/* =====================================================
   TECHNOLOGIES
===================================================== */

.webdev-tech-section {
    padding: 100px 0;
    background: var(--blue);
}

.webdev-tech-section h2 {
    color: var(--white);
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
}

.webdev-tech-section h2 span {
    color: var(--primary-red);
}

.webdev-tech-section p {
    color: rgba(255,255,255,0.6);
    line-height: 1.8;
    max-width: 500px;
}

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

.technology-item {
    min-height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    color: var(--white);
    transition: 0.3s ease;
}

.technology-item:hover {
    border-color: var(--primary-red);
    transform: translateY(-5px);
}

.technology-item i {
    color: var(--primary-red);
    font-size: 30px;
}

.technology-item span {
    font-size: 13px;
    font-weight: 600;
}


/* =====================================================
   WHY CHOOSE US
===================================================== */

.webdev-why-section {
    padding: 110px 0;
    background: var(--light-bg);
}

.webdev-why-card {
    height: 100%;
    padding: 35px 28px;
    background: var(--white);
    border: 1px solid var(--border);
    transition: 0.35s ease;
}

.webdev-why-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-red);
    box-shadow: 0 18px 45px rgba(0,0,0,0.08);
}

.webdev-why-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-red);
    color: var(--white);
    font-size: 21px;
    margin-bottom: 22px;
}

.webdev-why-card h4 {
    color: var(--blue);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}

.webdev-why-card p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
    margin: 0;
}


/* =====================================================
   CTA
===================================================== */

.webdev-cta-section {
    padding: 100px 0;
    background: var(--blue);
}

.webdev-cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 60px;
    border: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(
        135deg,
        rgba(255,0,0,0.08),
        transparent
    );
}

.webdev-cta-box h2 {
    color: var(--white);
    font-size: clamp(32px, 4vw, 50px);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 15px;
}

.webdev-cta-box h2 span {
    color: var(--primary-red);
}

.webdev-cta-box p {
    color: rgba(255,255,255,0.62);
    line-height: 1.8;
    margin: 0;
}

.webdev-cta-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 16px 24px;
    background: var(--primary-red);
    color: var(--white);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: 0.3s ease;
}

.webdev-cta-btn:hover {
    background: var(--primary-red-dark);
    color: var(--white);
    transform: translateY(-3px);
}

/* =====================================================
   WEBSITE DESIGN PAGE
===================================================== */

.webdesign-intro {
    padding: 110px 0;
    background: var(--white);
}

.webdesign-intro-content h2 {
    color: var(--blue);
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.15;
    font-weight: 800;
    margin-bottom: 25px;
}

.webdesign-intro-content h2 span {
    color: var(--primary-red);
}

.webdesign-intro-content > p {
    color: var(--muted);
    line-height: 1.9;
    font-size: 15px;
}

.webdesign-feature-list {
    margin-top: 35px;
}

.webdesign-feature {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.webdesign-feature-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-red);
    color: var(--white);
    font-size: 17px;
}

.webdesign-feature h5 {
    color: var(--blue);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
}

.webdesign-feature p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
}


/* =====================================================
   DESIGN VISUAL
===================================================== */

.webdesign-visual {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
}

.design-window {
    width: 100%;
    min-height: 340px;
    padding: 0;
    background: var(--blue);
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}

.design-window-top {
    height: 45px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.design-window-top span {
    width: 9px;
    height: 9px;
    background: var(--primary-red);
    border-radius: 50%;
}

.design-window-content {
    display: flex;
    min-height: 295px;
}

.design-sidebar {
    width: 80px;
    padding: 25px 18px;
    border-right: 1px solid rgba(255,255,255,0.08);
}

.design-sidebar div {
    height: 8px;
    background: rgba(255,255,255,0.18);
    margin-bottom: 18px;
}

.design-preview {
    flex: 1;
    padding: 35px;
}

.preview-header {
    height: 35px;
    width: 100%;
    background: var(--primary-red);
    opacity: 0.8;
    margin-bottom: 25px;
}

.preview-title {
    width: 70%;
    height: 16px;
    background: rgba(255,255,255,0.7);
    margin-bottom: 14px;
}

.preview-title.small {
    width: 45%;
    background: rgba(255,255,255,0.3);
}

.preview-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 30px;
}

.preview-cards div {
    height: 90px;
    background: rgba(255,255,255,0.1);
}

.design-floating-tool {
    position: absolute;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-red);
    color: var(--white);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

.tool-one {
    right: -20px;
    top: 40px;
}

.tool-two {
    left: -20px;
    bottom: 50px;
    background: var(--white);
    color: var(--primary-red);
}

.tool-three {
    right: 50px;
    bottom: -20px;
}


/* =====================================================
   DESIGN SERVICES
===================================================== */

.webdesign-services {
    padding: 110px 0;
    background: var(--light-bg);
}

.webdesign-service-card {
    height: 100%;
    padding: 35px 30px;
    background: var(--white);
    border: 1px solid var(--border);
    transition: 0.35s ease;
}

.webdesign-service-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-red);
    box-shadow: 0 20px 45px rgba(0,0,0,0.08);
}

.design-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.design-card-top > span {
    color: #dddddd;
    font-size: 35px;
    font-weight: 800;
}

.design-service-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: var(--white);
    font-size: 19px;
}

.webdesign-service-card h3 {
    color: var(--blue);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 13px;
}

.webdesign-service-card p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
    margin: 0;
}


/* =====================================================
   DESIGN APPROACH
===================================================== */

.webdesign-approach {
    padding: 110px 0;
    background: var(--white);
}

.webdesign-approach h2 {
    color: var(--blue);
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
}

.webdesign-approach h2 span {
    color: var(--primary-red);
}

.webdesign-approach p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
}

.design-outline-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 15px 23px;
    margin-top: 20px;
    border: 1px solid var(--primary-red);
    color: var(--primary-red);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: 0.3s;
}

.design-outline-btn:hover {
    background: var(--primary-red);
    color: var(--white);
}

.design-approach-step {
    display: flex;
    gap: 25px;
    padding: 25px 0;
    border-bottom: 1px solid var(--border);
}

.approach-number {
    min-width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--light-bg);
    color: var(--primary-red);
    font-size: 16px;
    font-weight: 800;
}

.design-approach-step h4 {
    color: var(--blue);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.design-approach-step p {
    margin: 0;
    font-size: 13px;
}


/* =====================================================
   DESIGN PRINCIPLES
===================================================== */

.webdesign-principles {
    padding: 110px 0;
    background: var(--blue);
}

.webdesign-principles .section-heading h2 {
    color: var(--white);
}

.design-principle-card {
    height: 100%;
    text-align: center;
    padding: 40px 25px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    transition: 0.3s;
}

.design-principle-card:hover {
    transform: translateY(-7px);
    border-color: var(--primary-red);
}

.design-principle-card > i {
    width: 60px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-red);
    color: var(--white);
    font-size: 21px;
    margin-bottom: 22px;
}

.design-principle-card h4 {
    color: var(--white);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}

.design-principle-card p {
    color: rgba(255,255,255,0.58);
    font-size: 13px;
    line-height: 1.8;
    margin: 0;
}


/* =====================================================
   DESIGN IMPACT
===================================================== */

.webdesign-impact {
    padding: 110px 0;
    background: var(--light-bg);
}

.design-impact-content h2 {
    color: var(--blue);
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.2;
    font-weight: 800;
    margin-bottom: 20px;
}

.design-impact-content h2 span {
    color: var(--primary-red);
}

.design-impact-content > p {
    color: var(--muted);
    line-height: 1.8;
}

.impact-points {
    margin-top: 30px;
    display: grid;
    gap: 15px;
}

.impact-points div {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--blue);
    font-size: 14px;
    font-weight: 600;
}

.impact-points i {
    color: var(--primary-red);
}

.design-impact-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.impact-stat {
    min-height: 180px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--white);
    border: 1px solid var(--border);
}

.impact-stat strong {
    color: var(--primary-red);
    font-size: 38px;
    font-weight: 800;
}

.impact-stat span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.dark-stat {
    background: var(--blue);
}

.dark-stat span {
    color: rgba(255,255,255,0.65);
}

.red-stat {
    background: var(--primary-red);
}

.red-stat strong,
.red-stat span {
    color: var(--white);
}


/* =====================================================
   CTA
===================================================== */

.webdesign-cta {
    padding: 100px 0;
    background: var(--white);
}

.webdesign-cta-box {
    padding: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    background: var(--blue);
}

.webdesign-cta-box h2 {
    color: var(--white);
    font-size: clamp(32px, 4vw, 50px);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 15px;
}

.webdesign-cta-box h2 span {
    color: var(--primary-red);
}

.webdesign-cta-box p {
    color: rgba(255,255,255,0.6);
    margin: 0;
}

.webdesign-cta-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 16px 24px;
    background: var(--primary-red);
    color: var(--white);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: 0.3s;
}

.webdesign-cta-btn:hover {
    background: var(--primary-red-dark);
    color: var(--white);
    transform: translateY(-3px);
}



/* =====================================================
   WEBSITE REDESIGN PAGE
===================================================== */



.redesign-intro {
    padding: 110px 0;
    background: var(--white);
}

.redesign-intro-content h2 {
    color: var(--blue);
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.15;
    font-weight: 800;
    margin-bottom: 25px;
}

.redesign-intro-content h2 span {
    color: var(--primary-red);
}

.redesign-intro-content > p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.9;
}

.redesign-check-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 30px;
}

.redesign-check-list div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--blue);
    font-size: 13px;
    font-weight: 600;
}

.redesign-check-list i {
    width: 23px;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-red);
    color: var(--white);
    border-radius: 50%;
    font-size: 10px;
}


/* =====================================================
   BEFORE / AFTER
===================================================== */

.redesign-comparison {
    display: flex;
    align-items: center;
    gap: 15px;
}

.website-preview {
    flex: 1;
}

.preview-label {
    display: inline-block;
    margin-bottom: 10px;
    padding: 6px 13px;
    background: var(--blue);
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.new-preview .preview-label {
    background: var(--primary-red);
}

.preview-browser {
    background: var(--blue);
    padding: 0;
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

.browser-bar {
    height: 35px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.browser-bar span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary-red);
}

.old-layout,
.new-layout {
    padding: 18px;
    min-height: 180px;
}

.old-header {
    height: 20px;
    background: rgba(255,255,255,0.2);
    margin-bottom: 20px;
}

.old-content div {
    height: 16px;
    background: rgba(255,255,255,0.12);
    margin-bottom: 14px;
}

.old-content div:nth-child(2) {
    width: 70%;
}

.old-content div:nth-child(3) {
    width: 50%;
}

.new-header {
    height: 15px;
    background: rgba(255,255,255,0.3);
    margin-bottom: 12px;
}

.new-hero {
    height: 45px;
    background: var(--primary-red);
    margin-bottom: 15px;
}

.new-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.new-cards div {
    height: 50px;
    background: rgba(255,255,255,0.12);
}

.redesign-arrow {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-red);
    color: var(--white);
}


/* =====================================================
   SERVICES
===================================================== */

.redesign-services {
    padding: 110px 0;
    background: var(--light-bg);
}

.redesign-service-card {
    height: 100%;
    padding: 38px 30px;
    background: var(--white);
    border: 1px solid var(--border);
    transition: 0.35s ease;
}

.redesign-service-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-red);
    box-shadow: 0 20px 45px rgba(0,0,0,0.08);
}

.redesign-service-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: var(--white);
    font-size: 20px;
    margin-bottom: 25px;
}

.redesign-service-card h3 {
    color: var(--blue);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 13px;
}

.redesign-service-card p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
    margin: 0;
}


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

.redesign-process {
    padding: 110px 0;
    background: var(--white);
}

.redesign-process-wrapper {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-top: 55px;
}

.redesign-process-item {
    position: relative;
    text-align: center;
    padding: 30px 15px;
    border: 1px solid var(--border);
    background: var(--white);
    transition: 0.3s;
}

.redesign-process-item:hover {
    transform: translateY(-7px);
    border-color: var(--primary-red);
}

.process-step-number {
    color: var(--primary-red);
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 18px;
}

.process-step-icon {
    width: 58px;
    height: 58px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--light-bg);
    color: var(--primary-red);
    font-size: 19px;
}

.redesign-process-item h4 {
    color: var(--blue);
    font-size: 16px;
    font-weight: 700;
    margin: 20px 0 10px;
}

.redesign-process-item p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
    margin: 0;
}


/* =====================================================
   BENEFITS
===================================================== */

.redesign-benefits {
    padding: 110px 0;
    background: var(--blue);
}

.redesign-benefits h2 {
    color: var(--white);
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
}

.redesign-benefits h2 span {
    color: var(--primary-red);
}

.redesign-benefits > .container p {
    color: rgba(255,255,255,0.6);
    line-height: 1.8;
}

.benefit-card {
    height: 100%;
    padding: 30px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    transition: 0.3s;
}

.benefit-card:hover {
    border-color: var(--primary-red);
    transform: translateY(-5px);
}

.benefit-card i {
    color: var(--primary-red);
    font-size: 25px;
    margin-bottom: 20px;
}

.benefit-card h4 {
    color: var(--white);
    font-size: 17px;
    font-weight: 700;
}

.benefit-card p {
    color: rgba(255,255,255,0.55);
    font-size: 13px;
    line-height: 1.8;
    margin: 10px 0 0;
}


/* =====================================================
   WHY CHOOSE US
===================================================== */

.redesign-why {
    padding: 110px 0;
    background: var(--light-bg);
}

.redesign-why-card {
    height: 100%;
    padding: 35px 28px;
    background: var(--white);
    border-top: 3px solid var(--blue);
    transition: 0.3s;
}

.redesign-why-card:hover {
    border-top-color: var(--primary-red);
    transform: translateY(-7px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.redesign-why-card span {
    color: var(--primary-red);
    font-size: 13px;
    font-weight: 800;
}

.redesign-why-card h4 {
    color: var(--blue);
    font-size: 18px;
    font-weight: 700;
    margin: 18px 0 12px;
}

.redesign-why-card p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
    margin: 0;
}


/* =====================================================
   CTA
===================================================== */

.redesign-cta {
    padding: 100px 0;
    background: var(--white);
}

.redesign-cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 60px;
    background: var(--blue);
    border-left: 5px solid var(--primary-red);
}

.redesign-cta-box h2 {
    color: var(--white);
    font-size: clamp(32px, 4vw, 50px);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 15px;
}

.redesign-cta-box h2 span {
    color: var(--primary-red);
}

.redesign-cta-box p {
    color: rgba(255,255,255,0.6);
    margin: 0;
}

.redesign-cta-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 25px;
    background: var(--primary-red);
    color: var(--white);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: 0.3s;
}

.redesign-cta-btn:hover {
    background: var(--primary-red-dark);
    color: var(--white);
    transform: translateY(-3px);
}


/* =====================================================
   WORDPRESS DEVELOPMENT PAGE
===================================================== */


.wordpress-intro {
    padding: 110px 0;
    background: var(--white);
}

.wordpress-intro-content h2 {
    color: var(--blue);
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.15;
    font-weight: 800;
    margin-bottom: 25px;
}

.wordpress-intro-content h2 span {
    color: var(--primary-red);
}

.wordpress-intro-content > p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.9;
}

.wordpress-intro-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 30px;
}

.wordpress-intro-points div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--blue);
    font-size: 13px;
    font-weight: 600;
}

.wordpress-intro-points i {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-red);
    color: var(--white);
    font-size: 10px;
}


/* =====================================================
   WORDPRESS VISUAL
===================================================== */

.wordpress-visual {
    position: relative;
    min-height: 410px;
    display: flex;
    align-items: center;
}

.wordpress-main-box {
    width: 100%;
    background: var(--blue);
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}

.wordpress-topbar {
    height: 45px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.wordpress-dots {
    display: flex;
    gap: 6px;
}

.wordpress-dots span {
    width: 8px;
    height: 8px;
    background: var(--primary-red);
    border-radius: 50%;
}

.wordpress-url {
    color: rgba(255,255,255,0.45);
    font-size: 11px;
}

.wordpress-screen {
    display: flex;
    min-height: 310px;
}

.wordpress-sidebar {
    width: 80px;
    padding: 20px;
    border-right: 1px solid rgba(255,255,255,0.08);
}

.wp-logo {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-red);
    color: var(--white);
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 30px;
}

.wp-menu {
    height: 8px;
    margin-bottom: 17px;
    background: rgba(255,255,255,0.16);
}

.wp-menu.active {
    background: var(--primary-red);
}

.wordpress-dashboard {
    flex: 1;
    padding: 35px;
}

.dashboard-title {
    width: 60%;
    height: 15px;
    background: rgba(255,255,255,0.75);
    margin-bottom: 14px;
}

.dashboard-title.small {
    width: 35%;
    background: rgba(255,255,255,0.25);
    margin-bottom: 30px;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.dashboard-stats div {
    height: 60px;
    background: rgba(255,255,255,0.08);
}

.dashboard-chart {
    height: 100px;
    display: flex;
    align-items: end;
    gap: 12px;
    margin-top: 25px;
    padding: 15px;
    background: rgba(255,255,255,0.05);
}

.dashboard-chart span {
    width: 18%;
    background: var(--primary-red);
}

.dashboard-chart span:nth-child(1) {
    height: 35%;
}

.dashboard-chart span:nth-child(2) {
    height: 65%;
}

.dashboard-chart span:nth-child(3) {
    height: 45%;
}

.dashboard-chart span:nth-child(4) {
    height: 85%;
}

.wordpress-floating {
    position: absolute;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-red);
    color: var(--white);
    box-shadow: 0 15px 35px rgba(0,0,0,0.18);
}

.wp-float-one {
    right: -20px;
    top: 40px;
}

.wp-float-two {
    left: -20px;
    bottom: 50px;
    background: var(--white);
    color: var(--primary-red);
}

.wp-float-three {
    right: 60px;
    bottom: -20px;
}


/* =====================================================
   WORDPRESS SOLUTIONS
===================================================== */

.wordpress-solutions {
    padding: 110px 0;
    background: var(--light-bg);
}

.wordpress-solution-card {
    position: relative;
    height: 100%;
    padding: 35px 30px;
    background: var(--white);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: 0.35s ease;
}

.wordpress-solution-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-red);
    box-shadow: 0 20px 45px rgba(0,0,0,0.08);
}

.wordpress-solution-number {
    position: absolute;
    top: 18px;
    right: 22px;
    color: #e8e8e8;
    font-size: 32px;
    font-weight: 800;
}

.wordpress-solution-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: var(--white);
    font-size: 20px;
    margin-bottom: 25px;
}

.wordpress-solution-card h3 {
    color: var(--blue);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 13px;
}

.wordpress-solution-card p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
    margin: 0;
}


/* =====================================================
   ADVANTAGES
===================================================== */

.wordpress-advantages {
    padding: 110px 0;
    background: var(--white);
}

.wordpress-advantages-content h2 {
    color: var(--blue);
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
}

.wordpress-advantages-content h2 span {
    color: var(--primary-red);
}

.wordpress-advantages-content p {
    color: var(--muted);
    line-height: 1.8;
}

.wordpress-outline-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 15px 24px;
    margin-top: 20px;
    border: 1px solid var(--primary-red);
    color: var(--primary-red);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: 0.3s;
}

.wordpress-outline-btn:hover {
    background: var(--primary-red);
    color: var(--white);
}

.wordpress-advantages-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.wordpress-advantage-item {
    display: flex;
    gap: 17px;
    padding: 28px 20px;
    border: 1px solid var(--border);
    transition: 0.3s;
}

.wordpress-advantage-item:hover {
    border-color: var(--primary-red);
}

.wordpress-advantage-item > i {
    color: var(--primary-red);
    font-size: 24px;
}

.wordpress-advantage-item h4 {
    color: var(--blue);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.wordpress-advantage-item p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
    margin: 0;
}


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

.wordpress-process {
    padding: 110px 0;
    background: var(--blue);
}

.wordpress-process .section-heading h2 {
    color: var(--white);
}

.wordpress-process-timeline {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-top: 55px;
}

.wordpress-process-step {
    text-align: center;
    padding: 30px 18px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    transition: 0.3s;
}

.wordpress-process-step:hover {
    transform: translateY(-7px);
    border-color: var(--primary-red);
}

.wp-step-icon {
    width: 58px;
    height: 58px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-red);
    color: var(--white);
    font-size: 18px;
}

.wp-step-number {
    color: var(--primary-red);
    font-size: 12px;
    font-weight: 800;
    margin-top: 20px;
}

.wordpress-process-step h4 {
    color: var(--white);
    font-size: 16px;
    font-weight: 700;
    margin: 12px 0;
}

.wordpress-process-step p {
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    line-height: 1.7;
    margin: 0;
}


/* =====================================================
   FEATURES
===================================================== */

.wordpress-features {
    padding: 110px 0;
    background: var(--light-bg);
}

.wordpress-feature-main h2 {
    color: var(--blue);
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.2;
    font-weight: 800;
    margin-bottom: 20px;
}

.wordpress-feature-main h2 span {
    color: var(--primary-red);
}

.wordpress-feature-main p {
    color: var(--muted);
    line-height: 1.8;
}

.wordpress-feature-list {
    display: grid;
    gap: 15px;
}

.wordpress-feature-item {
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 22px;
    background: var(--white);
    border: 1px solid var(--border);
    color: var(--blue);
    font-size: 14px;
    font-weight: 600;
}

.wordpress-feature-item i {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: var(--primary-red);
}


/* =====================================================
   CTA
===================================================== */

.wordpress-cta {
    padding: 100px 0;
    background: var(--white);
}

.wordpress-cta-box {
    padding: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    background: var(--blue);
    border-left: 5px solid var(--primary-red);
}

.wordpress-cta-box h2 {
    color: var(--white);
    font-size: clamp(32px, 4vw, 50px);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 15px;
}

.wordpress-cta-box h2 span {
    color: var(--primary-red);
}

.wordpress-cta-box p {
    color: rgba(255,255,255,0.6);
    margin: 0;
}

.wordpress-cta-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 25px;
    background: var(--primary-red);
    color: var(--white);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: 0.3s;
}

.wordpress-cta-btn:hover {
    background: var(--primary-red-dark);
    color: var(--white);
    transform: translateY(-3px);
}



/* =====================================================
   E-COMMERCE WEBSITE DESIGN PAGE
===================================================== */


.ecommerce-intro {
    padding: 110px 0;
    background: var(--white);
}

.ecommerce-intro-content h2 {
    color: var(--blue);
    font-size: clamp(34px, 4vw, 50px);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 25px;
}

.ecommerce-intro-content h2 span {
    color: var(--primary-red);
}

.ecommerce-intro-content > p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.9;
}

.ecommerce-intro-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 30px;
}

.ecommerce-intro-list div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--blue);
    font-size: 13px;
    font-weight: 600;
}

.ecommerce-intro-list i {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-red);
    color: var(--white);
    font-size: 10px;
}


/* =====================================================
   STORE VISUAL
===================================================== */

.ecommerce-store-visual {
    position: relative;
}

.store-browser {
    background: var(--blue);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}

.store-browser-top {
    height: 45px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.store-dots {
    display: flex;
    gap: 6px;
}

.store-dots span {
    width: 8px;
    height: 8px;
    background: var(--primary-red);
    border-radius: 50%;
}

.store-address {
    flex: 1;
    color: rgba(255,255,255,0.45);
    font-size: 11px;
}

.store-browser-top > i {
    color: var(--primary-red);
}

.store-screen {
    padding: 20px;
}

.store-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.store-logo-line {
    width: 90px;
    height: 15px;
    background: var(--primary-red);
}

.store-nav-links {
    display: flex;
    gap: 10px;
}

.store-nav-links span {
    width: 30px;
    height: 7px;
    background: rgba(255,255,255,0.2);
}

.store-hero {
    min-height: 120px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.06);
    margin-bottom: 20px;
}

.store-hero-content {
    width: 50%;
}

.store-hero-content div:first-child {
    width: 80%;
    height: 18px;
    background: rgba(255,255,255,0.7);
    margin-bottom: 12px;
}

.store-hero-content div:last-child {
    width: 55%;
    height: 10px;
    background: rgba(255,255,255,0.2);
}

.store-hero-product {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-red);
    color: var(--white);
    font-size: 25px;
}

.store-products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.store-product-card {
    padding: 10px;
    background: rgba(255,255,255,0.05);
}

.product-image {
    height: 75px;
    background: rgba(255,255,255,0.15);
    margin-bottom: 10px;
}

.product-line {
    height: 7px;
    background: rgba(255,255,255,0.4);
    margin-bottom: 7px;
}

.product-line.small {
    width: 55%;
    background: var(--primary-red);
}

.store-floating-card {
    position: absolute;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-red);
    color: var(--white);
    box-shadow: 0 15px 35px rgba(0,0,0,0.18);
}

.store-cart {
    right: -20px;
    top: 55px;
}

.store-payment {
    left: -20px;
    bottom: 70px;
    background: var(--white);
    color: var(--primary-red);
}

.store-growth {
    right: 60px;
    bottom: -20px;
}


/* =====================================================
   E-COMMERCE SOLUTIONS
===================================================== */

.ecommerce-solutions {
    padding: 110px 0;
    background: var(--light-bg);
}

.ecommerce-solution-card {
    height: 100%;
    padding: 38px 30px;
    background: var(--white);
    border: 1px solid var(--border);
    transition: 0.35s ease;
}

.ecommerce-solution-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-red);
    box-shadow: 0 20px 45px rgba(0,0,0,0.08);
}

.ecommerce-solution-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: var(--white);
    font-size: 20px;
    margin-bottom: 25px;
}

.ecommerce-solution-card h3 {
    color: var(--blue);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 13px;
}

.ecommerce-solution-card p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
    margin: 0;
}


/* =====================================================
   FEATURES
===================================================== */

.ecommerce-features {
    padding: 110px 0;
    background: var(--blue);
}

.ecommerce-features-content h2 {
    color: var(--white);
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
}

.ecommerce-features-content h2 span {
    color: var(--primary-red);
}

.ecommerce-features-content p {
    color: rgba(255,255,255,0.6);
    line-height: 1.8;
}

.ecommerce-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.ecommerce-feature-box {
    position: relative;
    padding: 30px 25px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    transition: 0.3s;
}

.ecommerce-feature-box:hover {
    border-color: var(--primary-red);
    transform: translateY(-5px);
}

.feature-number {
    position: absolute;
    top: 15px;
    right: 18px;
    color: rgba(255,255,255,0.15);
    font-size: 22px;
    font-weight: 800;
}

.ecommerce-feature-box > i {
    color: var(--primary-red);
    font-size: 24px;
    margin-bottom: 20px;
}

.ecommerce-feature-box h4 {
    color: var(--white);
    font-size: 16px;
    font-weight: 700;
}

.ecommerce-feature-box p {
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    line-height: 1.8;
    margin: 10px 0 0;
}


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

.ecommerce-process {
    padding: 110px 0;
    background: var(--white);
}

.ecommerce-process-wrapper {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-top: 55px;
}

.ecommerce-process-step {
    text-align: center;
    padding: 30px 18px;
    border: 1px solid var(--border);
    transition: 0.3s;
}

.ecommerce-process-step:hover {
    border-color: var(--primary-red);
    transform: translateY(-7px);
}

.ecommerce-step-icon {
    width: 58px;
    height: 58px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: var(--primary-red);
    font-size: 18px;
}

.ecommerce-process-step > span {
    display: block;
    color: var(--primary-red);
    font-size: 12px;
    font-weight: 800;
    margin: 18px 0 10px;
}

.ecommerce-process-step h4 {
    color: var(--blue);
    font-size: 16px;
    font-weight: 700;
}

.ecommerce-process-step p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
    margin: 10px 0 0;
}


/* =====================================================
   WHY US
===================================================== */

.ecommerce-why-us {
    padding: 110px 0;
    background: var(--light-bg);
}

.ecommerce-why-card {
    height: 100%;
    padding: 35px 25px;
    background: var(--white);
    border-bottom: 3px solid transparent;
    transition: 0.3s;
}

.ecommerce-why-card:hover {
    transform: translateY(-7px);
    border-bottom-color: var(--primary-red);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.ecommerce-why-card i {
    color: var(--primary-red);
    font-size: 25px;
    margin-bottom: 20px;
}

.ecommerce-why-card h4 {
    color: var(--blue);
    font-size: 17px;
    font-weight: 700;
}

.ecommerce-why-card p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
    margin: 10px 0 0;
}


/* =====================================================
   CTA
===================================================== */

.ecommerce-cta {
    padding: 100px 0;
    background: var(--white);
}

.ecommerce-cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 60px;
    background: var(--blue);
    border-left: 5px solid var(--primary-red);
}

.ecommerce-cta-box h2 {
    color: var(--white);
    font-size: clamp(32px, 4vw, 50px);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 15px;
}

.ecommerce-cta-box h2 span {
    color: var(--primary-red);
}

.ecommerce-cta-box p {
    color: rgba(255,255,255,0.6);
    margin: 0;
    max-width: 650px;
}

.ecommerce-cta-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 25px;
    background: var(--primary-red);
    color: var(--white);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: 0.3s;
}

.ecommerce-cta-btn:hover {
    background: var(--primary-red-dark);
    color: var(--white);
    transform: translateY(-3px);
}



/* =====================================================
   E-COMMERCE WEBSITE DEVELOPMENT
===================================================== */


.ecom-dev-intro {
    padding: 110px 0;
}

.ecom-dev-intro-content h2 {
    color: var(--blue);
    font-size: clamp(34px, 4vw, 50px);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 25px;
}

.ecom-dev-intro-content h2 span {
    color: var(--primary-red);
}

.ecom-dev-intro-content > p {
    color: var(--muted);
    line-height: 1.9;
}

.ecom-dev-intro-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 30px;
}

.ecom-dev-intro-points div {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--blue);
}

.ecom-dev-intro-points i {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-red);
    color: var(--white);
    font-size: 10px;
}


/* VISUAL */

.ecom-dev-visual {
    position: relative;
}

.ecom-dev-window {
    background: var(--blue);
    box-shadow: 0 25px 60px rgba(0,0,0,0.16);
}

.ecom-dev-topbar {
    height: 45px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.ecom-dev-dots {
    display: flex;
    gap: 6px;
}

.ecom-dev-dots span {
    width: 8px;
    height: 8px;
    background: var(--primary-red);
    border-radius: 50%;
}

.ecom-dev-url {
    color: rgba(255,255,255,0.45);
    font-size: 11px;
}

.ecom-dev-screen {
    min-height: 310px;
    display: flex;
}

.ecom-dev-sidebar {
    width: 80px;
    padding: 20px;
    border-right: 1px solid rgba(255,255,255,0.08);
}

.ecom-dev-brand {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-red);
    color: var(--white);
    font-weight: 800;
    margin-bottom: 30px;
}

.ecom-dev-sidebar span {
    display: block;
    height: 8px;
    background: rgba(255,255,255,0.15);
    margin-bottom: 18px;
}

.ecom-dev-dashboard {
    flex: 1;
    padding: 35px;
}

.dashboard-heading {
    width: 60%;
    height: 15px;
    background: rgba(255,255,255,0.7);
    margin-bottom: 14px;
}

.dashboard-heading.small {
    width: 35%;
    height: 8px;
    background: rgba(255,255,255,0.2);
    margin-bottom: 30px;
}

.dashboard-overview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.dashboard-overview div {
    height: 60px;
    background: rgba(255,255,255,0.08);
}

.dashboard-performance {
    height: 100px;
    margin-top: 25px;
    padding: 15px;
    display: flex;
    align-items: end;
    gap: 10px;
    background: rgba(255,255,255,0.05);
}

.dashboard-performance span {
    width: 16%;
    background: var(--primary-red);
}

.dashboard-performance span:nth-child(1) {
    height: 35%;
}

.dashboard-performance span:nth-child(2) {
    height: 65%;
}

.dashboard-performance span:nth-child(3) {
    height: 45%;
}

.dashboard-performance span:nth-child(4) {
    height: 85%;
}

.dashboard-performance span:nth-child(5) {
    height: 55%;
}

.ecom-dev-float {
    position: absolute;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-red);
    color: var(--white);
    box-shadow: 0 15px 35px rgba(0,0,0,0.18);
}

.dev-code {
    right: -20px;
    top: 45px;
}

.dev-cart {
    left: -20px;
    bottom: 50px;
    background: var(--white);
    color: var(--primary-red);
}

.dev-secure {
    right: 60px;
    bottom: -20px;
}


/* SERVICES */

.ecom-dev-services {
    padding: 110px 0;
    background: var(--light-bg);
}

.ecom-dev-service-card {
    position: relative;
    height: 100%;
    padding: 38px 30px;
    background: var(--white);
    border: 1px solid var(--border);
    transition: 0.35s;
}

.ecom-dev-service-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-red);
    box-shadow: 0 20px 45px rgba(0,0,0,0.08);
}

.ecom-dev-service-card > span {
    position: absolute;
    right: 20px;
    top: 18px;
    color: #e9e9e9;
    font-size: 28px;
    font-weight: 800;
}

.ecom-dev-service-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: var(--white);
    font-size: 20px;
    margin-bottom: 25px;
}

.ecom-dev-service-card h3 {
    color: var(--blue);
    font-size: 19px;
    font-weight: 700;
}

.ecom-dev-service-card p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
    margin-top: 12px;
}


/* CORE FEATURES */

.ecom-dev-core {
    padding: 110px 0;
}

.ecom-dev-core-content h2 {
    color: var(--blue);
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
}

.ecom-dev-core-content h2 span {
    color: var(--primary-red);
}

.ecom-dev-core-content p {
    color: var(--muted);
    line-height: 1.8;
}

.ecom-dev-outline-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 15px 24px;
    border: 1px solid var(--primary-red);
    color: var(--primary-red);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.ecom-dev-outline-btn:hover {
    background: var(--primary-red);
    color: var(--white);
}

.ecom-dev-core-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.ecom-dev-core-card {
    display: flex;
    gap: 16px;
    padding: 28px 20px;
    border: 1px solid var(--border);
    transition: 0.3s;
}

.ecom-dev-core-card:hover {
    border-color: var(--primary-red);
}

.ecom-dev-core-card > i {
    color: var(--primary-red);
    font-size: 24px;
}

.ecom-dev-core-card h4 {
    color: var(--blue);
    font-size: 16px;
    font-weight: 700;
}

.ecom-dev-core-card p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
    margin: 8px 0 0;
}


/* PROCESS */

.ecom-dev-process {
    padding: 110px 0;
    background: var(--blue);
}

.ecom-dev-process .section-heading h2 {
    color: var(--white);
}

.ecom-dev-process-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-top: 55px;
}

.ecom-dev-process-step {
    text-align: center;
    padding: 30px 18px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    transition: 0.3s;
}

.ecom-dev-process-step:hover {
    transform: translateY(-7px);
    border-color: var(--primary-red);
}

.ecom-dev-step-icon {
    width: 58px;
    height: 58px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-red);
    color: var(--white);
}

.ecom-dev-step-number {
    color: var(--primary-red);
    font-size: 12px;
    font-weight: 800;
    margin-top: 18px;
}

.ecom-dev-process-step h4 {
    color: var(--white);
    font-size: 16px;
    margin: 10px 0;
}

.ecom-dev-process-step p {
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    line-height: 1.7;
}


/* BENEFITS */

.ecom-dev-benefits {
    padding: 110px 0;
    background: var(--light-bg);
}

.ecom-dev-benefits-content h2 {
    color: var(--blue);
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.2;
}

.ecom-dev-benefits-content h2 span {
    color: var(--primary-red);
}

.ecom-dev-benefits-content p {
    color: var(--muted);
    line-height: 1.8;
    margin-top: 20px;
}

.ecom-dev-benefit-list {
    display: grid;
    gap: 15px;
}

.ecom-dev-benefit-list > div {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px;
    background: var(--white);
    border: 1px solid var(--border);
    font-weight: 600;
    color: var(--blue);
}

.ecom-dev-benefit-list i {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: var(--primary-red);
}


/* CTA */

.ecom-dev-cta {
    padding: 100px 0;
}

.ecom-dev-cta-box {
    padding: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    background: var(--blue);
    border-left: 5px solid var(--primary-red);
}

.ecom-dev-cta-box h2 {
    color: var(--white);
    font-size: clamp(32px, 4vw, 50px);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 15px;
}

.ecom-dev-cta-box h2 span {
    color: var(--primary-red);
}

.ecom-dev-cta-box p {
    color: rgba(255,255,255,0.6);
    margin: 0;
    max-width: 650px;
}

.ecom-dev-cta-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 25px;
    background: var(--primary-red);
    color: var(--white);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.ecom-dev-cta-btn:hover {
    background: var(--primary-red-dark);
    color: var(--white);
}


/* =====================================================
   SINGLE VENDOR E-COMMERCE WEBSITE
===================================================== */

.single-vendor-intro {
    padding: 110px 0;
    background: var(--white);
}

.single-vendor-intro-content h2 {
    color: var(--blue);
    font-size: clamp(34px, 4vw, 50px);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 25px;
}

.single-vendor-intro-content h2 span {
    color: var(--primary-red);
}

.single-vendor-intro-content > p {
    color: var(--muted);
    line-height: 1.9;
}

.single-vendor-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 30px;
}

.single-vendor-points div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--blue);
    font-size: 13px;
    font-weight: 600;
}

.single-vendor-points i {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-red);
    color: var(--white);
    font-size: 10px;
}


/* =====================================================
   DASHBOARD VISUAL
===================================================== */

.single-vendor-visual {
    position: relative;
}

.single-vendor-dashboard {
    background: var(--blue);
    box-shadow: 0 25px 60px rgba(0,0,0,.16);
}

.vendor-topbar {
    height: 45px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.vendor-dots {
    display: flex;
    gap: 6px;
}

.vendor-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-red);
}

.vendor-url {
    color: rgba(255,255,255,.45);
    font-size: 11px;
}

.vendor-dashboard-body {
    display: flex;
    min-height: 310px;
}

.vendor-sidebar {
    width: 80px;
    padding: 20px;
    border-right: 1px solid rgba(255,255,255,.08);
}

.vendor-logo {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-red);
    color: var(--white);
    font-weight: 800;
    margin-bottom: 30px;
}

.vendor-sidebar span {
    display: block;
    height: 8px;
    margin-bottom: 18px;
    background: rgba(255,255,255,.14);
}

.vendor-main {
    flex: 1;
    padding: 35px;
}

.vendor-title {
    color: var(--white);
    font-size: 18px;
    font-weight: 700;
}

.vendor-subtitle {
    width: 35%;
    height: 7px;
    margin-top: 10px;
    background: rgba(255,255,255,.2);
}

.vendor-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    margin-top: 30px;
}

.vendor-stats div {
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.06);
    color: var(--primary-red);
}

.vendor-chart {
    height: 100px;
    display: flex;
    align-items: end;
    gap: 10px;
    margin-top: 25px;
    padding: 15px;
    background: rgba(255,255,255,.04);
}

.vendor-chart span {
    flex: 1;
    background: var(--primary-red);
}

.vendor-chart span:nth-child(1) {
    height: 35%;
}

.vendor-chart span:nth-child(2) {
    height: 55%;
}

.vendor-chart span:nth-child(3) {
    height: 45%;
}

.vendor-chart span:nth-child(4) {
    height: 80%;
}

.vendor-chart span:nth-child(5) {
    height: 65%;
}

.vendor-chart span:nth-child(6) {
    height: 90%;
}

.vendor-floating {
    position: absolute;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-red);
    color: var(--white);
    box-shadow: 0 15px 35px rgba(0,0,0,.18);
}

.vendor-order {
    right: -20px;
    top: 50px;
}

.vendor-payment {
    left: -20px;
    bottom: 50px;
    background: var(--white);
    color: var(--primary-red);
}


/* =====================================================
   FEATURES
===================================================== */

.single-vendor-features {
    padding: 110px 0;
    background: var(--light-bg);
}

.single-vendor-feature-card {
    position: relative;
    height: 100%;
    padding: 38px 30px;
    background: var(--white);
    border: 1px solid var(--border);
    transition: .35s ease;
}

.single-vendor-feature-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-red);
    box-shadow: 0 20px 45px rgba(0,0,0,.08);
}

.single-vendor-feature-card > span {
    position: absolute;
    right: 20px;
    top: 18px;
    color: #e8e8e8;
    font-size: 28px;
    font-weight: 800;
}

.feature-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: var(--white);
    font-size: 20px;
    margin-bottom: 25px;
}

.single-vendor-feature-card h3 {
    color: var(--blue);
    font-size: 19px;
    font-weight: 700;
}

.single-vendor-feature-card p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
    margin-top: 12px;
}


/* =====================================================
   MANAGEMENT
===================================================== */

.single-vendor-management {
    padding: 110px 0;
    background: var(--white);
}

.single-vendor-management-content h2 {
    color: var(--blue);
    font-size: clamp(34px,4vw,48px);
    font-weight: 800;
    line-height: 1.2;
}

.single-vendor-management-content h2 span {
    color: var(--primary-red);
}

.single-vendor-management-content p {
    color: var(--muted);
    line-height: 1.8;
    margin-top: 20px;
}

.single-vendor-management-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.management-card {
    display: flex;
    gap: 16px;
    padding: 28px 20px;
    border: 1px solid var(--border);
    transition: .3s;
}

.management-card:hover {
    border-color: var(--primary-red);
    transform: translateY(-4px);
}

.management-card > i {
    color: var(--primary-red);
    font-size: 23px;
}

.management-card h4 {
    color: var(--blue);
    font-size: 16px;
    font-weight: 700;
}

.management-card p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
    margin: 8px 0 0;
}


/* =====================================================
   CUSTOMER EXPERIENCE
===================================================== */

.single-vendor-customer {
    padding: 110px 0;
    background: var(--blue);
}

.single-vendor-customer .section-heading h2 {
    color: var(--white);
}

.single-vendor-customer-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
}

.customer-flow-item {
    text-align: center;
    min-width: 130px;
}

.customer-flow-item > div {
    width: 60px;
    height: 60px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-red);
    color: var(--white);
    font-size: 19px;
}

.customer-flow-item h4 {
    color: var(--white);
    font-size: 15px;
    margin: 15px 0 7px;
}

.customer-flow-item p {
    color: rgba(255,255,255,.5);
    font-size: 11px;
    margin: 0;
}

.customer-flow-line {
    width: 55px;
    height: 1px;
    background: rgba(255,255,255,.18);
}


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

.single-vendor-process {
    padding: 110px 0;
    background: var(--white);
}

.single-vendor-process-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px;
    margin-top: 55px;
}

.single-vendor-process-card {
    position: relative;
    text-align: center;
    padding: 35px 20px;
    border: 1px solid var(--border);
    transition: .3s;
}

.single-vendor-process-card:hover {
    border-color: var(--primary-red);
    transform: translateY(-7px);
}

.process-number {
    position: absolute;
    top: 15px;
    right: 18px;
    color: #e9e9e9;
    font-size: 25px;
    font-weight: 800;
}

.single-vendor-process-card > i {
    color: var(--primary-red);
    font-size: 27px;
    margin: 10px 0 20px;
}

.single-vendor-process-card h4 {
    color: var(--blue);
    font-size: 17px;
}

.single-vendor-process-card p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
}


/* =====================================================
   BENEFITS
===================================================== */

.single-vendor-benefits {
    padding: 110px 0;
    background: var(--light-bg);
}

.single-vendor-benefits-content h2 {
    color: var(--blue);
    font-size: clamp(34px,4vw,48px);
    font-weight: 800;
    line-height: 1.2;
}

.single-vendor-benefits-content h2 span {
    color: var(--primary-red);
}

.single-vendor-benefits-content p {
    color: var(--muted);
    line-height: 1.8;
    margin-top: 20px;
}

.single-vendor-benefit-list {
    display: grid;
    gap: 14px;
}

.single-vendor-benefit-list > div {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    background: var(--white);
    border: 1px solid var(--border);
    color: var(--blue);
    font-weight: 600;
}

.single-vendor-benefit-list i {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: var(--primary-red);
}


/* =====================================================
   CTA
===================================================== */

.single-vendor-cta {
    padding: 100px 0;
    background: var(--white);
}

.single-vendor-cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 60px;
    background: var(--blue);
    border-left: 5px solid var(--primary-red);
}

.single-vendor-cta-box h2 {
    color: var(--white);
    font-size: clamp(32px,4vw,50px);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 15px;
}

.single-vendor-cta-box h2 span {
    color: var(--primary-red);
}

.single-vendor-cta-box p {
    max-width: 650px;
    color: rgba(255,255,255,.6);
    margin: 0;
}

.single-vendor-cta-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 25px;
    background: var(--primary-red);
    color: var(--white);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: .3s;
}

.single-vendor-cta-btn:hover {
    background: var(--primary-red-dark);
    color: var(--white);
    transform: translateY(-3px);
}

/* =====================================================
   MULTI VENDOR WEBSITE
===================================================== */


.multi-vendor-intro {
    padding: 110px 0;
    background: var(--white);
}

.multi-vendor-intro-content h2 {
    color: var(--blue);
    font-size: clamp(34px,4vw,50px);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 25px;
}

.multi-vendor-intro-content h2 span {
    color: var(--primary-red);
}

.multi-vendor-intro-content > p {
    color: var(--muted);
    line-height: 1.9;
}

.multi-vendor-intro-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 30px;
}

.multi-vendor-intro-points div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--blue);
    font-size: 13px;
    font-weight: 600;
}

.multi-vendor-intro-points i {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-red);
    color: var(--white);
    font-size: 10px;
}


/* =====================================================
   MARKETPLACE VISUAL
===================================================== */

.multi-vendor-visual {
    position: relative;
}

.marketplace-window {
    background: var(--blue);
    box-shadow: 0 25px 60px rgba(0,0,0,.17);
}

.marketplace-topbar {
    height: 45px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.marketplace-dots {
    display: flex;
    gap: 6px;
}

.marketplace-dots span {
    width: 8px;
    height: 8px;
    background: var(--primary-red);
    border-radius: 50%;
}

.marketplace-url {
    color: rgba(255,255,255,.4);
    font-size: 11px;
}

.marketplace-body {
    display: flex;
    min-height: 315px;
}

.marketplace-sidebar {
    width: 80px;
    padding: 20px;
    border-right: 1px solid rgba(255,255,255,.08);
}

.marketplace-logo {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-red);
    color: var(--white);
    font-weight: 800;
    margin-bottom: 30px;
}

.marketplace-sidebar span {
    display: block;
    height: 8px;
    background: rgba(255,255,255,.14);
    margin-bottom: 18px;
}

.marketplace-main {
    flex: 1;
    padding: 35px;
}

.marketplace-heading {
    color: var(--white);
    font-size: 18px;
    font-weight: 700;
}

.marketplace-subheading {
    width: 35%;
    height: 7px;
    background: rgba(255,255,255,.2);
    margin-top: 10px;
}

.marketplace-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    margin-top: 30px;
}

.marketplace-stats div {
    padding: 15px;
    background: rgba(255,255,255,.06);
}

.marketplace-stats strong {
    display: block;
    color: var(--primary-red);
    font-size: 20px;
}

.marketplace-stats small {
    color: rgba(255,255,255,.45);
    font-size: 9px;
}

.marketplace-graph {
    height: 95px;
    display: flex;
    align-items: end;
    gap: 9px;
    margin-top: 25px;
    padding: 12px;
    background: rgba(255,255,255,.04);
}

.marketplace-graph span {
    flex: 1;
    background: var(--primary-red);
}

.marketplace-graph span:nth-child(1) {
    height: 35%;
}

.marketplace-graph span:nth-child(2) {
    height: 55%;
}

.marketplace-graph span:nth-child(3) {
    height: 45%;
}

.marketplace-graph span:nth-child(4) {
    height: 75%;
}

.marketplace-graph span:nth-child(5) {
    height: 60%;
}

.marketplace-graph span:nth-child(6) {
    height: 85%;
}

.marketplace-graph span:nth-child(7) {
    height: 95%;
}

.marketplace-floating {
    position: absolute;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-red);
    color: var(--white);
    box-shadow: 0 15px 35px rgba(0,0,0,.18);
}

.vendor-icon {
    top: 45px;
    right: -20px;
}

.seller-icon {
    bottom: 50px;
    left: -20px;
    background: var(--white);
    color: var(--primary-red);
}

.payment-icon {
    right: 60px;
    bottom: -20px;
}


/* =====================================================
   FEATURES
===================================================== */

.multi-vendor-features {
    padding: 110px 0;
    background: var(--light-bg);
}

.multi-vendor-feature-card {
    position: relative;
    height: 100%;
    padding: 38px 30px;
    background: var(--white);
    border: 1px solid var(--border);
    transition: .35s ease;
}

.multi-vendor-feature-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-red);
    box-shadow: 0 20px 45px rgba(0,0,0,.08);
}

.multi-vendor-feature-card > span {
    position: absolute;
    right: 20px;
    top: 18px;
    color: #e9e9e9;
    font-size: 28px;
    font-weight: 800;
}

.multi-vendor-feature-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: var(--white);
    font-size: 20px;
    margin-bottom: 25px;
}

.multi-vendor-feature-card h3 {
    color: var(--blue);
    font-size: 19px;
    font-weight: 700;
}

.multi-vendor-feature-card p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
    margin-top: 12px;
}


/* =====================================================
   VENDOR MANAGEMENT
===================================================== */

.multi-vendor-management {
    padding: 110px 0;
    background: var(--white);
}

.multi-vendor-management-content h2 {
    color: var(--blue);
    font-size: clamp(34px,4vw,48px);
    font-weight: 800;
    line-height: 1.2;
}

.multi-vendor-management-content h2 span {
    color: var(--primary-red);
}

.multi-vendor-management-content > p {
    color: var(--muted);
    line-height: 1.8;
    margin-top: 20px;
}

.vendor-management-highlight {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
    color: var(--blue);
    font-size: 13px;
    font-weight: 700;
}

.vendor-management-highlight i {
    color: var(--primary-red);
    font-size: 20px;
}

.vendor-management-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.vendor-management-card {
    padding: 25px 20px;
    border: 1px solid var(--border);
    transition: .3s;
}

.vendor-management-card:hover {
    border-color: var(--primary-red);
    transform: translateY(-5px);
}

.vendor-management-card > i {
    color: var(--primary-red);
    font-size: 22px;
    margin-bottom: 15px;
}

.vendor-management-card h4 {
    color: var(--blue);
    font-size: 16px;
    font-weight: 700;
}

.vendor-management-card p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
    margin: 8px 0 0;
}


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

.multi-vendor-platform {
    padding: 110px 0;
    background: var(--light-bg);
}

.platform-card {
    position: relative;
    height: 100%;
    padding: 40px 30px;
    background: var(--white);
    border: 1px solid var(--border);
    transition: .35s;
}

.platform-card:hover,
.platform-card-active {
    border-color: var(--primary-red);
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(0,0,0,.08);
}

.platform-number {
    position: absolute;
    top: 18px;
    right: 20px;
    color: #e9e9e9;
    font-size: 30px;
    font-weight: 800;
}

.platform-icon {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: var(--primary-red);
    font-size: 22px;
    margin-bottom: 25px;
}

.platform-card h3 {
    color: var(--blue);
    font-size: 21px;
    font-weight: 800;
}

.platform-card > p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
}

.platform-card ul {
    list-style: none;
    padding: 0;
    margin: 22px 0 0;
}

.platform-card li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 0;
    color: var(--blue);
    font-size: 12px;
}

.platform-card li i {
    color: var(--primary-red);
}


/* =====================================================
   CUSTOMER JOURNEY
===================================================== */

.multi-vendor-journey {
    padding: 110px 0;
    background: var(--blue);
}

.multi-vendor-journey .section-heading h2 {
    color: var(--white);
}

.multi-vendor-journey-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
}

.journey-item {
    text-align: center;
    min-width: 125px;
}

.journey-item > div {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    background: var(--primary-red);
    color: var(--white);
    font-size: 19px;
}

.journey-item h4 {
    color: var(--white);
    font-size: 15px;
    margin: 15px 0 7px;
}

.journey-item p {
    color: rgba(255,255,255,.48);
    font-size: 11px;
    margin: 0;
}

.journey-line {
    width: 55px;
    height: 1px;
    background: rgba(255,255,255,.18);
}


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

.multi-vendor-process {
    padding: 110px 0;
    background: var(--white);
}

.multi-vendor-process-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 15px;
    margin-top: 55px;
}

.multi-vendor-process-card {
    position: relative;
    text-align: center;
    padding: 35px 18px;
    border: 1px solid var(--border);
    transition: .3s;
}

.multi-vendor-process-card:hover {
    border-color: var(--primary-red);
    transform: translateY(-7px);
}

.multi-vendor-process-card > span {
    position: absolute;
    right: 15px;
    top: 12px;
    color: #e8e8e8;
    font-size: 24px;
    font-weight: 800;
}

.multi-vendor-process-card > i {
    display: block;
    color: var(--primary-red);
    font-size: 26px;
    margin-bottom: 20px;
}

.multi-vendor-process-card h4 {
    color: var(--blue);
    font-size: 16px;
}

.multi-vendor-process-card p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
}


/* =====================================================
   BENEFITS
===================================================== */

.multi-vendor-benefits {
    padding: 110px 0;
    background: var(--light-bg);
}

.multi-vendor-benefits-content h2 {
    color: var(--blue);
    font-size: clamp(34px,4vw,48px);
    font-weight: 800;
    line-height: 1.2;
}

.multi-vendor-benefits-content h2 span {
    color: var(--primary-red);
}

.multi-vendor-benefits-content p {
    color: var(--muted);
    line-height: 1.8;
    margin-top: 20px;
}

.multi-vendor-benefit-list {
    display: grid;
    gap: 14px;
}

.multi-vendor-benefit-list > div {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    background: var(--white);
    border: 1px solid var(--border);
    color: var(--blue);
    font-size: 13px;
    font-weight: 600;
}

.multi-vendor-benefit-list i {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: var(--primary-red);
}


/* =====================================================
   CTA
===================================================== */

.multi-vendor-cta {
    padding: 100px 0;
    background: var(--white);
}

.multi-vendor-cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 60px;
    background: var(--blue);
    border-left: 5px solid var(--primary-red);
}

.multi-vendor-cta-box h2 {
    color: var(--white);
    font-size: clamp(32px,4vw,50px);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 15px;
}

.multi-vendor-cta-box h2 span {
    color: var(--primary-red);
}

.multi-vendor-cta-box p {
    max-width: 650px;
    color: rgba(255,255,255,.6);
    margin: 0;
}

.multi-vendor-cta-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 25px;
    background: var(--primary-red);
    color: var(--white);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: .3s;
}

.multi-vendor-cta-btn:hover {
    background: var(--primary-red-dark);
    color: var(--white);
    transform: translateY(-3px);
}


/* =====================================================
   ANDROID APP DEVELOPMENT
===================================================== */


.android-intro {
    padding: 110px 0;
    background: var(--white);
}

.android-intro h2 {
    color: var(--blue);
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.2;
    font-weight: 800;
    margin: 15px 0 25px;
}

.android-intro h2 span {
    color: var(--primary-red);
}

.android-intro p {
    color: var(--muted);
    line-height: 1.9;
}

.android-check-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 30px;
}

.android-check-list div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--blue);
    font-size: 13px;
    font-weight: 600;
}

.android-check-list i {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    background: var(--primary-red);
    font-size: 10px;
}


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

.android-phone-area {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.android-phone {
    position: relative;
    width: 265px;
    height: 520px;
    padding: 10px;
    background: #111;
    border: 5px solid #222;
    border-radius: 35px;
    box-shadow: 0 30px 70px rgba(0,0,0,.25);
    z-index: 2;
}

.android-speaker {
    position: absolute;
    width: 65px;
    height: 5px;
    top: 13px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    border-radius: 10px;
    z-index: 3;
}

.android-screen {
    height: 100%;
    padding: 30px 15px 15px;
    background: var(--light-bg);
    border-radius: 25px;
    overflow: hidden;
}

.app-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--blue);
    font-size: 13px;
    font-weight: 700;
}

.app-top i {
    color: var(--primary-red);
}

.app-welcome {
    margin-top: 30px;
}

.app-welcome small {
    color: var(--muted);
    font-size: 10px;
}

.app-welcome h4 {
    color: var(--blue);
    font-size: 21px;
    margin-top: 5px;
}

.app-card-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 25px;
}

.app-card-row div {
    padding: 14px 10px;
    background: var(--white);
    border: 1px solid var(--border);
}

.app-card-row i {
    display: block;
    color: var(--primary-red);
    margin-bottom: 10px;
}

.app-card-row strong {
    display: block;
    color: var(--blue);
    font-size: 16px;
}

.app-card-row small {
    color: var(--muted);
    font-size: 9px;
}

.app-chart {
    height: 130px;
    display: flex;
    align-items: end;
    gap: 8px;
    padding: 15px;
    margin-top: 15px;
    background: var(--white);
    border: 1px solid var(--border);
}

.app-chart span {
    flex: 1;
    background: var(--primary-red);
}

.app-chart span:nth-child(1) {
    height: 30%;
}

.app-chart span:nth-child(2) {
    height: 50%;
}

.app-chart span:nth-child(3) {
    height: 40%;
}

.app-chart span:nth-child(4) {
    height: 75%;
}

.app-chart span:nth-child(5) {
    height: 55%;
}

.app-chart span:nth-child(6) {
    height: 80%;
}

.app-chart span:nth-child(7) {
    height: 95%;
}

.app-bottom {
    display: flex;
    justify-content: space-around;
    padding-top: 25px;
    color: #aaa;
}

.app-bottom i:first-child {
    color: var(--primary-red);
}

.android-floating {
    position: absolute;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: var(--primary-red);
    box-shadow: 0 15px 35px rgba(0,0,0,.15);
    z-index: 3;
}

.android-floating-one {
    top: 40px;
    right: 70px;
}

.android-floating-two {
    left: 45px;
    bottom: 75px;
    background: var(--primary-red);
    color: var(--white);
}

.android-floating-three {
    right: 35px;
    bottom: 30px;
}


/* =====================================================
   SERVICES
===================================================== */

.android-services {
    padding: 110px 0;
    background: var(--light-bg);
}

.section-heading {
    max-width: 750px;
    margin: auto;
}

.section-tag {
    display: inline-block;
    color: var(--primary-red);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.section-heading h2 {
    color: var(--blue);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.2;
    margin: 12px 0 15px;
}

.section-heading h2 span {
    color: var(--primary-red);
}

.section-heading p {
    color: var(--muted);
    line-height: 1.8;
}

.android-service-card {
    position: relative;
    height: 100%;
    padding: 38px 30px;
    background: var(--white);
    border: 1px solid var(--border);
    transition: .35s ease;
    overflow: hidden;
}

.android-service-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-red);
    box-shadow: 0 20px 45px rgba(0,0,0,.08);
}

.service-number {
    position: absolute;
    top: 15px;
    right: 20px;
    color: #e8e8e8;
    font-size: 30px;
    font-weight: 800;
}

.android-service-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: var(--primary-red);
    font-size: 20px;
    margin-bottom: 25px;
}

.android-service-card h3 {
    color: var(--blue);
    font-size: 19px;
    font-weight: 700;
}

.android-service-card p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
    margin: 12px 0 20px;
}

.android-service-card a {
    color: var(--primary-red);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

.android-service-card a i {
    margin-left: 7px;
}


/* =====================================================
   FEATURES
===================================================== */

.android-features {
    padding: 110px 0;
    background: var(--white);
}

.android-features h2 {
    color: var(--blue);
    font-size: clamp(34px,4vw,48px);
    font-weight: 800;
    line-height: 1.2;
    margin: 15px 0;
}

.android-features h2 span {
    color: var(--primary-red);
}

.android-features > .container > .row > .col-lg-5 p {
    color: var(--muted);
    line-height: 1.8;
}

.android-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.android-feature-grid > div {
    padding: 25px;
    border: 1px solid var(--border);
    transition: .3s;
}

.android-feature-grid > div:hover {
    border-color: var(--primary-red);
    transform: translateY(-5px);
}

.android-feature-grid i {
    color: var(--primary-red);
    font-size: 22px;
    margin-bottom: 15px;
}

.android-feature-grid h4 {
    color: var(--blue);
    font-size: 16px;
}

.android-feature-grid p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
    margin: 8px 0 0;
}


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

.android-process {
    padding: 110px 0;
    background: var(--light-bg);
}

.android-process-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-top: 55px;
}

.android-process-card {
    position: relative;
    text-align: center;
    padding: 35px 18px;
    background: var(--white);
    border: 1px solid var(--border);
    transition: .3s;
}

.android-process-card:hover {
    border-color: var(--primary-red);
    transform: translateY(-7px);
}

.android-process-card > span {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #e7e7e7;
    font-size: 24px;
    font-weight: 800;
}

.android-process-card > i {
    display: block;
    color: var(--primary-red);
    font-size: 26px;
    margin-bottom: 20px;
}

.android-process-card h4 {
    color: var(--blue);
    font-size: 16px;
}

.android-process-card p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
}


/* =====================================================
   TECHNOLOGIES
===================================================== */

.android-technologies {
    padding: 110px 0;
    background: var(--blue);
}

.android-technologies h2 {
    color: var(--white);
    font-size: clamp(34px,4vw,48px);
    font-weight: 800;
    line-height: 1.2;
    margin: 15px 0;
}

.android-technologies h2 span {
    color: var(--primary-red);
}

.android-technologies p {
    color: rgba(255,255,255,.6);
    line-height: 1.8;
}

.technology-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.technology-box > div {
    padding: 28px 15px;
    text-align: center;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    transition: .3s;
}

.technology-box > div:hover {
    border-color: var(--primary-red);
    transform: translateY(-5px);
}

.technology-box i {
    display: block;
    color: var(--primary-red);
    font-size: 25px;
    margin-bottom: 12px;
}

.technology-box span {
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
}


/* =====================================================
   WHY CHOOSE US
===================================================== */

.android-why {
    padding: 110px 0;
    background: var(--white);
}

.android-why-card {
    height: 100%;
    padding: 35px 25px;
    text-align: center;
    border: 1px solid var(--border);
    transition: .3s;
}

.android-why-card:hover {
    border-color: var(--primary-red);
    transform: translateY(-7px);
    box-shadow: 0 20px 40px rgba(0,0,0,.07);
}

.android-why-card i {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    background: var(--blue);
    color: var(--primary-red);
}

.android-why-card h4 {
    color: var(--blue);
    font-size: 16px;
}

.android-why-card p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
}


/* =====================================================
   CTA
===================================================== */

.android-cta {
    padding: 100px 0;
    background: var(--light-bg);
}

.android-cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 60px;
    background: var(--blue);
    border-left: 5px solid var(--primary-red);
}

.android-cta-box h2 {
    color: var(--white);
    font-size: clamp(32px,4vw,50px);
    font-weight: 800;
    line-height: 1.2;
    margin: 12px 0 15px;
}

.android-cta-box h2 span {
    color: var(--primary-red);
}

.android-cta-box p {
    max-width: 650px;
    color: rgba(255,255,255,.6);
    margin: 0;
}

.android-cta-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 25px;
    background: var(--primary-red);
    color: var(--white);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: .3s;
}

.android-cta-btn:hover {
    background: var(--primary-red-dark);
    color: var(--white);
    transform: translateY(-3px);
}



/* =====================================================
IOS APP DEVELOPMENT PAGE
===================================================== */

.ios-intro {
padding: 110px 0;
background: var(--white);
}

.ios-intro h2 {
margin: 15px 0 25px;
color: var(--blue);
font-size: clamp(34px, 4vw, 50px);
font-weight: 800;
line-height: 1.2;
}

.ios-intro h2 span {
color: var(--primary-red);
}

.ios-intro p {
color: var(--muted);
line-height: 1.9;
}

.ios-check-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-top: 30px;
}

.ios-check-list div {
display: flex;
align-items: center;
gap: 10px;
color: var(--blue);
font-size: 13px;
font-weight: 600;
}

.ios-check-list i {
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary-red);
color: var(--white);
font-size: 10px;
}

/* IOS PHONE */

.ios-phone-area {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 520px;
}

.ios-phone {
position: relative;
width: 265px;
height: 530px;
padding: 10px;
background: #111;
border: 5px solid #222;
border-radius: 42px;
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25);
z-index: 2;
}

.ios-speaker {
position: absolute;
top: 13px;
left: 50%;
width: 70px;
height: 5px;
background: #333;
border-radius: 10px;
transform: translateX(-50%);
z-index: 3;
}

.ios-screen {
height: 100%;
padding: 25px 15px 15px;
background: var(--light-bg);
border-radius: 30px;
}

.ios-status {
display: flex;
align-items: center;
justify-content: space-between;
color: var(--blue);
font-size: 9px;
font-weight: 700;
}

.ios-status div {
display: flex;
gap: 5px;
}

.ios-app-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 28px;
color: var(--blue);
font-size: 13px;
font-weight: 700;
}

.ios-app-header i {
color: var(--primary-red);
}

.ios-welcome {
margin-top: 28px;
}

.ios-welcome small {
color: var(--muted);
font-size: 10px;
}

.ios-welcome h4 {
margin-top: 6px;
color: var(--blue);
font-size: 20px;
}

.ios-main-card {
margin-top: 20px;
padding: 20px;
background: var(--primary-red);
color: var(--white);
}

.ios-main-card span,
.ios-main-card small {
display: block;
font-size: 10px;
opacity: 0.8;
}

.ios-main-card strong {
display: block;
margin: 8px 0;
font-size: 27px;
}

.ios-mini-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 15px;
}

.ios-mini-cards div {
padding: 14px 10px;
background: var(--white);
border: 1px solid var(--border);
}

.ios-mini-cards i {
display: block;
margin-bottom: 10px;
color: var(--primary-red);
}

.ios-mini-cards strong {
display: block;
color: var(--blue);
font-size: 15px;
}

.ios-mini-cards span {
color: var(--muted);
font-size: 9px;
}

.ios-bottom-menu {
display: flex;
justify-content: space-around;
margin-top: 28px;
color: #aaa;
}

.ios-bottom-menu .active {
color: var(--primary-red);
}

.ios-floating {
position: absolute;
z-index: 3;
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
background: var(--blue);
color: var(--primary-red);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.ios-floating-one {
top: 40px;
right: 70px;
}

.ios-floating-two {
bottom: 75px;
left: 45px;
background: var(--primary-red);
color: var(--white);
}

.ios-floating-three {
right: 35px;
bottom: 30px;
}

/* SERVICES */

.ios-services {
padding: 110px 0;
background: var(--light-bg);
}

.ios-service-card {
position: relative;
height: 100%;
padding: 38px 30px;
overflow: hidden;
background: var(--white);
border: 1px solid var(--border);
transition: 0.35s ease;
}

.ios-service-card:hover {
border-color: var(--primary-red);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
transform: translateY(-8px);
}

.ios-service-icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
background: var(--blue);
color: var(--primary-red);
font-size: 21px;
}

.ios-service-card h3 {
color: var(--blue);
font-size: 19px;
font-weight: 700;
}

.ios-service-card p {
margin: 12px 0 20px;
color: var(--muted);
font-size: 13px;
line-height: 1.8;
}

.ios-service-card a {
color: var(--primary-red);
font-size: 12px;
font-weight: 700;
text-decoration: none;
}

.ios-service-card a i {
margin-left: 7px;
}

/* FEATURES */

.ios-features {
padding: 110px 0;
background: var(--white);
}

.ios-features h2 {
margin: 15px 0;
color: var(--blue);
font-size: clamp(34px, 4vw, 48px);
font-weight: 800;
line-height: 1.2;
}

.ios-features h2 span {
color: var(--primary-red);
}

.ios-features p {
color: var(--muted);
line-height: 1.8;
}

.ios-feature-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}

.ios-feature-grid > div {
padding: 25px;
border: 1px solid var(--border);
transition: 0.3s;
}

.ios-feature-grid > div:hover {
border-color: var(--primary-red);
transform: translateY(-5px);
}

.ios-feature-grid i {
margin-bottom: 15px;
color: var(--primary-red);
font-size: 22px;
}

.ios-feature-grid h4 {
color: var(--blue);
font-size: 16px;
}

.ios-feature-grid p {
margin: 8px 0 0;
color: var(--muted);
font-size: 12px;
}

/* PROCESS */

.ios-process {
padding: 110px 0;
background: var(--light-bg);
}

.ios-process-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 15px;
margin-top: 55px;
}

.ios-process-card {
position: relative;
padding: 35px 18px;
text-align: center;
background: var(--white);
border: 1px solid var(--border);
transition: 0.3s;
}

.ios-process-card:hover {
border-color: var(--primary-red);
transform: translateY(-7px);
}

.ios-process-card > span {
position: absolute;
top: 10px;
right: 15px;
color: #e7e7e7;
font-size: 24px;
font-weight: 800;
}

.ios-process-card > i {
display: block;
margin-bottom: 20px;
color: var(--primary-red);
font-size: 26px;
}

.ios-process-card h4 {
color: var(--blue);
font-size: 16px;
}

.ios-process-card p {
color: var(--muted);
font-size: 12px;
line-height: 1.7;
}

/* TECHNOLOGIES */

.ios-technologies {
padding: 110px 0;
background: var(--blue);
}

.ios-technologies h2 {
margin: 15px 0;
color: var(--white);
font-size: clamp(34px, 4vw, 48px);
font-weight: 800;
line-height: 1.2;
}

.ios-technologies h2 span {
color: var(--primary-red);
}

.ios-technologies p {
color: rgba(255, 255, 255, 0.6);
line-height: 1.8;
}

.ios-technology-box {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}

.ios-technology-box > div {
padding: 28px 15px;
text-align: center;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
transition: 0.3s;
}

.ios-technology-box > div:hover {
border-color: var(--primary-red);
transform: translateY(-5px);
}

.ios-technology-box i {
display: block;
margin-bottom: 12px;
color: var(--primary-red);
font-size: 25px;
}

.ios-technology-box span {
color: var(--white);
font-size: 12px;
font-weight: 600;
}

/* WHY CHOOSE US */

.ios-why {
padding: 110px 0;
background: var(--white);
}

.ios-why-card {
height: 100%;
padding: 35px 25px;
text-align: center;
border: 1px solid var(--border);
transition: 0.3s;
}

.ios-why-card:hover {
border-color: var(--primary-red);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.07);
transform: translateY(-7px);
}

.ios-why-card i {
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
background: var(--blue);
color: var(--primary-red);
}

.ios-why-card h4 {
color: var(--blue);
font-size: 16px;
}

.ios-why-card p {
color: var(--muted);
font-size: 12px;
line-height: 1.7;
}

/* CTA */

.ios-cta {
padding: 100px 0;
background: var(--light-bg);
}

.ios-cta-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: 60px;
background: var(--blue);
border-left: 5px solid var(--primary-red);
}

.ios-cta-box h2 {
margin: 12px 0 15px;
color: var(--white);
font-size: clamp(32px, 4vw, 50px);
font-weight: 800;
line-height: 1.2;
}

.ios-cta-box h2 span {
color: var(--primary-red);
}

.ios-cta-box p {
max-width: 650px;
margin: 0;
color: rgba(255, 255, 255, 0.6);
}

.ios-cta-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 14px;
padding: 16px 25px;
background: var(--primary-red);
color: var(--white);
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: 0.3s;
}

.ios-cta-btn:hover {
background: var(--primary-red-dark);
color: var(--white);
transform: translateY(-3px);
}



/* =====================================================
WEBVIEW APP DEVELOPMENT PAGE
===================================================== */



/* INTRODUCTION */

.webview-intro {
padding: 110px 0;
background: var(--white);
}

.webview-intro h2,
.webview-services h2,
.webview-benefits h2 {
margin: 15px 0 25px;
color: var(--blue);
font-size: clamp(34px, 4vw, 50px);
font-weight: 800;
line-height: 1.2;
}

.webview-intro h2 span,
.webview-services h2 span,
.webview-benefits h2 span {
color: var(--primary-red);
}

.webview-intro p,
.webview-services p,
.webview-benefits p {
color: var(--muted);
line-height: 1.9;
}

.webview-check-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-top: 30px;
}

.webview-check-list div {
display: flex;
align-items: center;
gap: 10px;
color: var(--blue);
font-size: 13px;
font-weight: 600;
}

.webview-check-list i,
.webview-benefit-list i {
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--primary-red);
color: var(--white);
font-size: 10px;
}

/* WEBVIEW PHONE VISUAL */

.webview-visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 520px;
}

.webview-phone {
position: relative;
width: 280px;
height: 530px;
padding: 10px;
background: #111;
border: 5px solid #222;
border-radius: 40px;
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25);
z-index: 2;
}

.webview-phone-top {
position: absolute;
width: 90px;
height: 18px;
top: 12px;
left: 50%;
background: #111;
border-radius: 0 0 15px 15px;
transform: translateX(-50%);
z-index: 3;
}

.webview-screen {
height: 100%;
padding-top: 18px;
overflow: hidden;
background: var(--light-bg);
border-radius: 28px;
}

.webview-browser {
height: 100%;
}

.browser-top {
padding: 12px 10px;
background: var(--white);
border-bottom: 1px solid var(--border);
}

.browser-dots {
display: flex;
gap: 4px;
margin-bottom: 8px;
}

.browser-dots span {
width: 7px;
height: 7px;
background: #ccc;
border-radius: 50%;
}

.browser-dots span:first-child {
background: var(--primary-red);
}

.browser-url {
display: block;
padding: 7px 10px;
overflow: hidden;
background: var(--light-bg);
color: var(--muted);
border-radius: 5px;
font-size: 9px;
}

.browser-content {
padding: 20px 15px;
}

.mini-logo {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
background: var(--primary-red);
color: var(--white);
font-weight: 800;
}

.mini-title {
color: var(--blue);
font-size: 17px;
font-weight: 700;
}

.mini-banner {
margin-top: 15px;
padding: 22px 15px;
background: var(--blue);
}

.mini-banner span {
display: block;
margin-bottom: 7px;
color: rgba(255, 255, 255, 0.6);
font-size: 9px;
}

.mini-banner strong {
color: var(--primary-red);
font-size: 16px;
}

.mini-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-top: 18px;
}

.mini-cards div {
height: 60px;
background: var(--white);
border: 1px solid var(--border);
}

.mini-line {
width: 100%;
height: 8px;
margin-top: 18px;
background: #ddd;
}

.mini-line.small {
width: 65%;
margin-top: 8px;
}

.webview-floating {
position: absolute;
z-index: 3;
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
background: var(--blue);
color: var(--primary-red);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
font-size: 20px;
}

.webview-float-one {
top: 55px;
right: 65px;
}

.webview-float-two {
bottom: 80px;
left: 40px;
background: var(--primary-red);
color: var(--white);
}

.webview-float-three {
right: 35px;
bottom: 25px;
}

/* FEATURES */

.webview-features {
padding: 110px 0;
background: var(--light-bg);
}

.webview-feature-card {
height: 100%;
padding: 38px 30px;
background: var(--white);
border: 1px solid var(--border);
transition: 0.35s ease;
}

.webview-feature-card:hover {
border-color: var(--primary-red);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
transform: translateY(-8px);
}

.webview-feature-icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
background: var(--blue);
color: var(--primary-red);
font-size: 21px;
}

.webview-feature-card h3 {
color: var(--blue);
font-size: 19px;
font-weight: 700;
}

.webview-feature-card p {
margin: 12px 0 0;
color: var(--muted);
font-size: 13px;
line-height: 1.8;
}

/* SERVICES */

.webview-services {
padding: 110px 0;
background: var(--white);
}

.webview-service-list {
display: flex;
flex-direction: column;
gap: 12px;
}

.webview-service-list > div {
display: grid;
grid-template-columns: 55px 1fr 30px;
align-items: center;
gap: 20px;
padding: 22px;
border: 1px solid var(--border);
transition: 0.3s;
}

.webview-service-list > div:hover {
border-color: var(--primary-red);
transform: translateX(5px);
}

.webview-service-list > div > span {
color: var(--primary-red);
font-size: 18px;
font-weight: 800;
}

.webview-service-list h4 {
margin: 0 0 7px;
color: var(--blue);
font-size: 16px;
}

.webview-service-list p {
margin: 0;
font-size: 12px;
line-height: 1.6;
}

.webview-service-list > div > i {
color: var(--primary-red);
}

/* PROCESS */

.webview-process {
padding: 110px 0;
background: var(--light-bg);
}

.webview-process-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 15px;
margin-top: 55px;
}

.webview-process-card {
position: relative;
padding: 35px 18px;
text-align: center;
background: var(--white);
border: 1px solid var(--border);
transition: 0.3s;
}

.webview-process-card:hover {
border-color: var(--primary-red);
transform: translateY(-7px);
}

.webview-process-card > span {
position: absolute;
top: 10px;
right: 15px;
color: #e7e7e7;
font-size: 24px;
font-weight: 800;
}

.webview-process-card > i {
display: block;
margin-bottom: 20px;
color: var(--primary-red);
font-size: 26px;
}

.webview-process-card h4 {
color: var(--blue);
font-size: 16px;
}

.webview-process-card p {
color: var(--muted);
font-size: 12px;
line-height: 1.7;
}

/* BENEFITS */

.webview-benefits {
padding: 110px 0;
background: var(--white);
}

.webview-benefit-list {
display: flex;
flex-direction: column;
gap: 18px;
margin-top: 30px;
}

.webview-benefit-list > div {
display: flex;
align-items: flex-start;
gap: 12px;
color: var(--blue);
font-size: 14px;
line-height: 1.7;
}

.webview-benefit-visual {
position: relative;
min-height: 430px;
display: flex;
align-items: center;
justify-content: center;
background: var(--light-bg);
overflow: hidden;
}

.webview-benefit-visual::before {
content: "";
position: absolute;
width: 260px;
height: 260px;
border: 1px dashed rgba(255, 0, 0, 0.3);
border-radius: 50%;
}

.benefit-main-icon {
position: relative;
z-index: 2;
width: 130px;
height: 130px;
display: flex;
align-items: center;
justify-content: center;
background: var(--blue);
color: var(--primary-red);
border-radius: 50%;
font-size: 55px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.benefit-circle {
position: absolute;
z-index: 3;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: var(--white);
color: var(--primary-red);
border: 1px solid var(--border);
border-radius: 50%;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.circle-one {
top: 60px;
left: 90px;
}

.circle-two {
top: 70px;
right: 85px;
}

.circle-three {
bottom: 60px;
left: 100px;
}

.circle-four {
right: 80px;
bottom: 65px;
}

/* WHY CHOOSE */

.webview-why {
padding: 110px 0;
background: var(--light-bg);
}

.webview-why-card {
height: 100%;
padding: 35px 25px;
text-align: center;
background: var(--white);
border: 1px solid var(--border);
transition: 0.3s;
}

.webview-why-card:hover {
border-color: var(--primary-red);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.07);
transform: translateY(-7px);
}

.webview-why-card i {
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
background: var(--blue);
color: var(--primary-red);
}

.webview-why-card h4 {
color: var(--blue);
font-size: 16px;
}

.webview-why-card p {
color: var(--muted);
font-size: 12px;
line-height: 1.7;
}

/* CTA */

.webview-cta {
padding: 100px 0;
background: var(--white);
}

.webview-cta-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: 60px;
background: var(--blue);
border-left: 5px solid var(--primary-red);
}

.webview-cta-box h2 {
margin: 12px 0 15px;
color: var(--white);
font-size: clamp(32px, 4vw, 50px);
font-weight: 800;
line-height: 1.2;
}

.webview-cta-box h2 span {
color: var(--primary-red);
}

.webview-cta-box p {
max-width: 650px;
margin: 0;
color: rgba(255, 255, 255, 0.6);
line-height: 1.8;
}

.webview-cta-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 14px;
padding: 16px 25px;
background: var(--primary-red);
color: var(--white);
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: 0.3s;
}

.webview-cta-btn:hover {
background: var(--primary-red-dark);
color: var(--white);
transform: translateY(-3px);
}



/* =====================================================
E-COMMERCE APP DEVELOPMENT PAGE
===================================================== */

.ecommerce-app-banner {
position: relative;
padding: 120px 0 105px;
background: var(--blue);
overflow: hidden;
}

.ecommerce-app-banner::before {
content: "";
position: absolute;
width: 500px;
height: 500px;
top: -250px;
right: -180px;
border: 1px solid rgba(255, 0, 0, 0.2);
border-radius: 50%;
}

.ecommerce-app-banner::after {
content: "";
position: absolute;
width: 320px;
height: 320px;
bottom: -180px;
left: -120px;
background: var(--primary-red);
opacity: 0.05;
border-radius: 50%;
}

.ecommerce-app-banner-content {
position: relative;
z-index: 2;
max-width: 850px;
}

.ecommerce-app-tag {
display: inline-block;
margin-bottom: 15px;
color: var(--primary-red);
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
}

.ecommerce-app-banner h1 {
margin-bottom: 20px;
color: var(--white);
font-size: clamp(42px, 6vw, 70px);
font-weight: 800;
line-height: 1.1;
}

.ecommerce-app-banner h1 span {
color: var(--primary-red);
}

.ecommerce-app-banner p {
max-width: 720px;
color: rgba(255, 255, 255, 0.65);
font-size: 17px;
line-height: 1.8;
}

.ecommerce-app-breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 25px;
font-size: 13px;
}

.ecommerce-app-breadcrumb a {
color: var(--white);
text-decoration: none;
}

.ecommerce-app-breadcrumb i {
color: var(--primary-red);
}

.ecommerce-app-breadcrumb span {
color: rgba(255, 255, 255, 0.45);
}

/* INTRODUCTION */

.ecommerce-app-intro {
padding: 110px 0;
background: var(--white);
}

.ecommerce-app-intro h2,
.ecommerce-app-solutions h2,
.ecommerce-app-benefits h2 {
margin: 15px 0 25px;
color: var(--blue);
font-size: clamp(34px, 4vw, 50px);
font-weight: 800;
line-height: 1.2;
}

.ecommerce-app-intro h2 span,
.ecommerce-app-solutions h2 span,
.ecommerce-app-benefits h2 span {
color: var(--primary-red);
}

.ecommerce-app-intro p,
.ecommerce-app-solutions p,
.ecommerce-app-benefits p {
color: var(--muted);
line-height: 1.9;
}

.ecommerce-app-check-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-top: 30px;
}

.ecommerce-app-check-list div {
display: flex;
align-items: center;
gap: 10px;
color: var(--blue);
font-size: 13px;
font-weight: 600;
}

.ecommerce-app-check-list i,
.ecommerce-app-benefit-list i {
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--primary-red);
color: var(--white);
font-size: 10px;
}

/* MOBILE APP VISUAL */

.ecommerce-app-visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 540px;
}

.ecommerce-app-phone {
position: relative;
width: 285px;
height: 540px;
padding: 9px;
background: #111;
border: 5px solid #222;
border-radius: 42px;
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.22);
z-index: 2;
}

.app-phone-notch {
position: absolute;
width: 100px;
height: 20px;
top: 10px;
left: 50%;
background: #111;
border-radius: 0 0 15px 15px;
transform: translateX(-50%);
z-index: 3;
}

.app-phone-screen {
position: relative;
height: 100%;
padding: 25px 12px 60px;
overflow: hidden;
background: var(--light-bg);
border-radius: 30px;
}

.app-store-header {
display: flex;
align-items: center;
justify-content: space-between;
}

.app-mini-logo {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary-red);
color: var(--white);
}

.app-store-header > i {
color: var(--blue);
}

.app-search-box {
display: flex;
align-items: center;
gap: 8px;
margin: 15px 0;
padding: 10px;
background: var(--white);
border: 1px solid var(--border);
color: var(--muted);
font-size: 10px;
}

.app-search-box i {
color: var(--primary-red);
}

.app-product-banner {
padding: 25px 15px;
background: var(--blue);
}

.app-product-banner span {
display: block;
margin-bottom: 8px;
color: var(--primary-red);
font-size: 9px;
font-weight: 700;
letter-spacing: 1px;
}

.app-product-banner strong {
display: block;
color: var(--white);
font-size: 17px;
line-height: 1.3;
}

.app-product-banner small {
display: block;
margin-top: 8px;
color: rgba(255, 255, 255, 0.5);
}

.app-product-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 15px;
}

.app-product-item {
padding: 8px;
background: var(--white);
border: 1px solid var(--border);
}

.product-image {
height: 70px;
display: flex;
align-items: center;
justify-content: center;
background: var(--light-bg);
color: var(--primary-red);
}

.app-product-item span,
.app-product-item strong {
display: block;
}

.app-product-item span {
margin-top: 7px;
color: var(--muted);
font-size: 9px;
}

.app-product-item strong {
margin-top: 4px;
color: var(--blue);
font-size: 11px;
}

.app-bottom-menu {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-around;
padding: 14px 0;
background: var(--white);
border-top: 1px solid var(--border);
}

.app-bottom-menu i {
color: var(--muted);
font-size: 14px;
}

.app-bottom-menu div:first-child i {
color: var(--primary-red);
}

.ecommerce-app-float {
position: absolute;
z-index: 3;
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
background: var(--blue);
color: var(--primary-red);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
font-size: 20px;
}

.float-cart {
top: 65px;
right: 60px;
}

.float-payment {
bottom: 85px;
left: 50px;
background: var(--primary-red);
color: var(--white);
}

.float-mobile {
right: 30px;
bottom: 30px;
}

/* FEATURES */

.ecommerce-app-features {
padding: 110px 0;
background: var(--light-bg);
}

.ecommerce-app-feature-card {
height: 100%;
padding: 38px 30px;
background: var(--white);
border: 1px solid var(--border);
transition: 0.35s ease;
}

.ecommerce-app-feature-card:hover {
border-color: var(--primary-red);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
transform: translateY(-8px);
}

.ecommerce-app-feature-icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
background: var(--blue);
color: var(--primary-red);
font-size: 21px;
}

.ecommerce-app-feature-card h3 {
color: var(--blue);
font-size: 19px;
font-weight: 700;
}

.ecommerce-app-feature-card p {
margin: 12px 0 0;
color: var(--muted);
font-size: 13px;
line-height: 1.8;
}

/* SOLUTIONS */

.ecommerce-app-solutions {
padding: 110px 0;
background: var(--white);
}

.ecommerce-app-solution-list {
display: flex;
flex-direction: column;
gap: 12px;
}

.ecommerce-app-solution-list > div {
display: grid;
grid-template-columns: 55px 1fr 30px;
align-items: center;
gap: 20px;
padding: 22px;
border: 1px solid var(--border);
transition: 0.3s;
}

.ecommerce-app-solution-list > div:hover {
border-color: var(--primary-red);
transform: translateX(5px);
}

.ecommerce-app-solution-list > div > span {
color: var(--primary-red);
font-size: 18px;
font-weight: 800;
}

.ecommerce-app-solution-list h4 {
margin: 0 0 7px;
color: var(--blue);
font-size: 16px;
}

.ecommerce-app-solution-list p {
margin: 0;
font-size: 12px;
line-height: 1.6;
}

.ecommerce-app-solution-list > div > i {
color: var(--primary-red);
}

/* DEVELOPMENT PROCESS */

.ecommerce-app-process {
padding: 110px 0;
background: var(--light-bg);
}

.ecommerce-app-process-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 15px;
margin-top: 55px;
}

.ecommerce-app-process-card {
position: relative;
padding: 35px 18px;
text-align: center;
background: var(--white);
border: 1px solid var(--border);
transition: 0.3s;
}

.ecommerce-app-process-card:hover {
border-color: var(--primary-red);
transform: translateY(-7px);
}

.ecommerce-app-process-card > span {
position: absolute;
top: 10px;
right: 15px;
color: #e7e7e7;
font-size: 24px;
font-weight: 800;
}

.ecommerce-app-process-card > i {
display: block;
margin-bottom: 20px;
color: var(--primary-red);
font-size: 26px;
}

.ecommerce-app-process-card h4 {
color: var(--blue);
font-size: 15px;
}

.ecommerce-app-process-card p {
color: var(--muted);
font-size: 12px;
line-height: 1.7;
}

/* BENEFITS */

.ecommerce-app-benefits {
padding: 110px 0;
background: var(--white);
}

.ecommerce-app-benefit-list {
display: flex;
flex-direction: column;
gap: 18px;
margin-top: 30px;
}

.ecommerce-app-benefit-list > div {
display: flex;
align-items: flex-start;
gap: 12px;
color: var(--blue);
font-size: 14px;
line-height: 1.7;
}

.ecommerce-app-benefit-visual {
position: relative;
min-height: 430px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--light-bg);
}

.ecommerce-app-benefit-visual::before {
content: "";
position: absolute;
width: 270px;
height: 270px;
border: 1px dashed rgba(255, 0, 0, 0.3);
border-radius: 50%;
}

.ecommerce-main-circle {
position: relative;
z-index: 2;
width: 130px;
height: 130px;
display: flex;
align-items: center;
justify-content: center;
background: var(--blue);
color: var(--primary-red);
border-radius: 50%;
font-size: 50px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.ecommerce-small-circle {
position: absolute;
z-index: 3;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: var(--white);
color: var(--primary-red);
border: 1px solid var(--border);
border-radius: 50%;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.circle-cart {
top: 60px;
left: 90px;
}

.circle-payment {
top: 65px;
right: 85px;
}

.circle-truck {
bottom: 60px;
left: 95px;
}

.circle-heart {
right: 80px;
bottom: 65px;
}

/* WHY CHOOSE US */

.ecommerce-app-why {
padding: 110px 0;
background: var(--light-bg);
}

.ecommerce-app-why-card {
height: 100%;
padding: 35px 25px;
text-align: center;
background: var(--white);
border: 1px solid var(--border);
transition: 0.3s;
}

.ecommerce-app-why-card:hover {
border-color: var(--primary-red);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.07);
transform: translateY(-7px);
}

.ecommerce-app-why-card i {
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
background: var(--blue);
color: var(--primary-red);
}

.ecommerce-app-why-card h4 {
color: var(--blue);
font-size: 16px;
}

.ecommerce-app-why-card p {
color: var(--muted);
font-size: 12px;
line-height: 1.7;
}

/* CTA */

.ecommerce-app-cta {
padding: 100px 0;
background: var(--white);
}

.ecommerce-app-cta-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: 60px;
background: var(--blue);
border-left: 5px solid var(--primary-red);
}

.ecommerce-app-cta-box h2 {
margin: 12px 0 15px;
color: var(--white);
font-size: clamp(32px, 4vw, 50px);
font-weight: 800;
line-height: 1.2;
}

.ecommerce-app-cta-box h2 span {
color: var(--primary-red);
}

.ecommerce-app-cta-box p {
max-width: 650px;
margin: 0;
color: rgba(255, 255, 255, 0.6);
line-height: 1.8;
}

.ecommerce-app-cta-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 14px;
padding: 16px 25px;
background: var(--primary-red);
color: var(--white);
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: 0.3s;
}

.ecommerce-app-cta-btn:hover {
background: var(--primary-red-dark);
color: var(--white);
transform: translateY(-3px);
}


/* =====================================================
SEARCH ENGINE OPTIMIZATION PAGE
===================================================== */

.seo-intro {
padding: 110px 0;
background: var(--white);
}

.seo-intro h2,
.seo-matters h2,
.seo-benefits h2 {
margin: 15px 0 25px;
color: var(--blue);
font-size: clamp(34px, 4vw, 50px);
font-weight: 800;
line-height: 1.2;
}

.seo-intro h2 span,
.seo-matters h2 span,
.seo-benefits h2 span {
color: var(--primary-red);
}

.seo-intro p,
.seo-matters p,
.seo-benefits p {
color: var(--muted);
line-height: 1.9;
}

.seo-check-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-top: 30px;
}

.seo-check-list div {
display: flex;
align-items: center;
gap: 10px;
color: var(--blue);
font-size: 13px;
font-weight: 600;
}

.seo-check-list i,
.seo-benefit-list i {
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--primary-red);
color: var(--white);
font-size: 10px;
}

.seo-visual {
position: relative;
min-height: 450px;
display: flex;
align-items: center;
justify-content: center;
}

.seo-main-card {
position: relative;
z-index: 2;
width: 100%;
max-width: 460px;
padding: 30px;
background: var(--white);
border: 1px solid var(--border);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
}

.seo-search-top {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 25px;
color: var(--blue);
font-size: 17px;
font-weight: 700;
}

.seo-search-logo {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary-red);
color: var(--white);
}

.seo-search-box {
display: flex;
align-items: center;
justify-content: space-between;
padding: 13px 15px;
margin-bottom: 25px;
border: 1px solid var(--border);
color: var(--muted);
font-size: 12px;
}

.seo-search-box i {
color: var(--primary-red);
}

.seo-ranking-list {
display: flex;
flex-direction: column;
gap: 12px;
}

.seo-ranking-list > div {
display: grid;
grid-template-columns: 38px 1fr 25px;
align-items: center;
gap: 12px;
padding: 13px;
background: var(--light-bg);
}

.ranking-number {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: var(--white);
color: var(--blue);
font-size: 13px;
font-weight: 700;
}

.ranking-number.active {
background: var(--primary-red);
color: var(--white);
}

.seo-ranking-list strong,
.seo-ranking-list small {
display: block;
}

.seo-ranking-list strong {
color: var(--blue);
font-size: 12px;
}

.seo-ranking-list small {
margin-top: 3px;
color: var(--muted);
font-size: 10px;
}

.seo-ranking-list > div > i {
color: var(--primary-red);
}

.seo-floating-card {
position: absolute;
z-index: 3;
display: flex;
align-items: center;
gap: 8px;
padding: 13px 16px;
background: var(--blue);
color: var(--white);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
font-size: 12px;
font-weight: 600;
}

.seo-floating-card i {
color: var(--primary-red);
}

.seo-keyword {
top: 30px;
left: -25px;
}

.seo-chart {
right: -20px;
top: 150px;
background: var(--primary-red);
}

.seo-chart i {
color: var(--white);
}

.seo-globe {
bottom: 35px;
left: 10px;
}

/*SEO SERVICES */

.seo-services {
padding: 110px 0;
background: var(--light-bg);
}

.seo-service-card {
height: 100%;
padding: 38px 30px;
background: var(--white);
border: 1px solid var(--border);
transition: 0.35s ease;
}

.seo-service-card:hover {
border-color: var(--primary-red);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
transform: translateY(-8px);
}

.seo-service-icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
background: var(--blue);
color: var(--primary-red);
font-size: 21px;
}

.seo-service-card h3 {
color: var(--blue);
font-size: 19px;
font-weight: 700;
}

.seo-service-card p {
margin: 12px 0 0;
color: var(--muted);
font-size: 13px;
line-height: 1.8;
}

/* WHY SEO MATTERS */

.seo-matters {
padding: 110px 0;
background: var(--white);
}

.seo-matters-list {
display: flex;
flex-direction: column;
gap: 12px;
}

.seo-matters-list > div {
display: grid;
grid-template-columns: 55px 1fr 30px;
align-items: center;
gap: 20px;
padding: 22px;
border: 1px solid var(--border);
transition: 0.3s;
}

.seo-matters-list > div:hover {
border-color: var(--primary-red);
transform: translateX(5px);
}

.seo-matters-list > div > span {
color: var(--primary-red);
font-size: 18px;
font-weight: 800;
}

.seo-matters-list h4 {
margin: 0 0 7px;
color: var(--blue);
font-size: 16px;
}

.seo-matters-list p {
margin: 0;
font-size: 12px;
line-height: 1.6;
}

.seo-matters-list > div > i {
color: var(--primary-red);
}

/* SEO PROCESS */

.seo-process {
padding: 110px 0;
background: var(--light-bg);
}

.seo-process-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 15px;
margin-top: 55px;
}

.seo-process-card {
position: relative;
padding: 35px 18px;
text-align: center;
background: var(--white);
border: 1px solid var(--border);
transition: 0.3s;
}

.seo-process-card:hover {
border-color: var(--primary-red);
transform: translateY(-7px);
}

.seo-process-card > span {
position: absolute;
top: 10px;
right: 15px;
color: #e7e7e7;
font-size: 24px;
font-weight: 800;
}

.seo-process-card > i {
display: block;
margin-bottom: 20px;
color: var(--primary-red);
font-size: 26px;
}

.seo-process-card h4 {
color: var(--blue);
font-size: 15px;
}

.seo-process-card p {
color: var(--muted);
font-size: 12px;
line-height: 1.7;
}

/* SEO BENEFITS */

.seo-benefits {
padding: 110px 0;
background: var(--white);
}

.seo-benefit-list {
display: flex;
flex-direction: column;
gap: 18px;
margin-top: 30px;
}

.seo-benefit-list > div {
display: flex;
align-items: flex-start;
gap: 12px;
color: var(--blue);
font-size: 14px;
line-height: 1.7;
}

.seo-benefit-visual {
position: relative;
min-height: 430px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--light-bg);
}

.seo-benefit-visual::before {
content: "";
position: absolute;
width: 270px;
height: 270px;
border: 1px dashed rgba(255, 0, 0, 0.3);
border-radius: 50%;
}

.seo-center-icon {
position: relative;
z-index: 2;
width: 130px;
height: 130px;
display: flex;
align-items: center;
justify-content: center;
background: var(--blue);
color: var(--primary-red);
border-radius: 50%;
font-size: 50px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.seo-small-icon {
position: absolute;
z-index: 3;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: var(--white);
color: var(--primary-red);
border: 1px solid var(--border);
border-radius: 50%;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.seo-icon-key {
top: 60px;
left: 90px;
}

.seo-icon-chart {
top: 65px;
right: 85px;
}

.seo-icon-globe {
bottom: 60px;
left: 95px;
}

.seo-icon-target {
right: 80px;
bottom: 65px;
}

/* WHY CHOOSE US */

.seo-why {
padding: 110px 0;
background: var(--light-bg);
}

.seo-why-card {
height: 100%;
padding: 35px 25px;
text-align: center;
background: var(--white);
border: 1px solid var(--border);
transition: 0.3s;
}

.seo-why-card:hover {
border-color: var(--primary-red);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.07);
transform: translateY(-7px);
}

.seo-why-card i {
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
background: var(--blue);
color: var(--primary-red);
}

.seo-why-card h4 {
color: var(--blue);
font-size: 16px;
}

.seo-why-card p {
color: var(--muted);
font-size: 12px;
line-height: 1.7;
}

/*SEO CTA */

.seo-cta {
padding: 100px 0;
background: var(--white);
}

.seo-cta-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: 60px;
background: var(--blue);
border-left: 5px solid var(--primary-red);
}

.seo-cta-box h2 {
margin: 12px 0 15px;
color: var(--white);
font-size: clamp(32px, 4vw, 50px);
font-weight: 800;
line-height: 1.2;
}

.seo-cta-box h2 span {
color: var(--primary-red);
}

.seo-cta-box p {
max-width: 650px;
margin: 0;
color: rgba(255, 255, 255, 0.6);
line-height: 1.8;
}

.seo-cta-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 14px;
padding: 16px 25px;
background: var(--primary-red);
color: var(--white);
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: 0.3s;
}

.seo-cta-btn:hover {
background: var(--primary-red-dark);
color: var(--white);
transform: translateY(-3px);
}


/* =====================================================
SOCIAL MEDIA MARKETING PAGE
===================================================== */

.smm-banner {
position: relative;
padding: 120px 0 105px;
background: var(--blue);
overflow: hidden;
}

.smm-banner::before {
content: "";
position: absolute;
width: 500px;
height: 500px;
top: -250px;
right: -150px;
border: 1px solid rgba(255, 0, 0, 0.25);
border-radius: 50%;
}

.smm-banner::after {
content: "";
position: absolute;
width: 320px;
height: 320px;
left: -120px;
bottom: -160px;
background: var(--primary-red);
opacity: 0.06;
border-radius: 50%;
}

.smm-banner-content {
position: relative;
z-index: 2;
max-width: 850px;
}

.smm-banner-tag {
display: inline-block;
margin-bottom: 15px;
color: var(--primary-red);
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
}

.smm-banner h1 {
margin-bottom: 20px;
color: var(--white);
font-size: clamp(42px, 6vw, 70px);
font-weight: 800;
line-height: 1.1;
}

.smm-banner h1 span {
color: var(--primary-red);
}

.smm-banner p {
max-width: 720px;
color: rgba(255, 255, 255, 0.65);
font-size: 17px;
line-height: 1.8;
}

.smm-breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 25px;
font-size: 13px;
}

.smm-breadcrumb a {
color: var(--white);
text-decoration: none;
}

.smm-breadcrumb i {
color: var(--primary-red);
}

.smm-breadcrumb span {
color: rgba(255, 255, 255, 0.45);
}

.smm-intro {
padding: 110px 0;
background: var(--white);
}

.smm-intro h2,
.smm-benefits h2 {
margin: 15px 0 25px;
color: var(--blue);
font-size: clamp(34px, 4vw, 50px);
font-weight: 800;
line-height: 1.2;
}

.smm-intro h2 span,
.smm-benefits h2 span {
color: var(--primary-red);
}

.smm-intro p,
.smm-benefits p {
color: var(--muted);
line-height: 1.9;
}

.smm-check-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-top: 30px;
}

.smm-check-list div {
display: flex;
align-items: center;
gap: 10px;
color: var(--blue);
font-size: 13px;
font-weight: 600;
}

.smm-check-list i,
.smm-benefit-list i {
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--primary-red);
color: var(--white);
font-size: 10px;
}

/* SOCIAL VISUAL */

.smm-visual {
position: relative;
min-height: 480px;
display: flex;
align-items: center;
justify-content: center;
}

.smm-main-card {
position: relative;
z-index: 2;
width: 100%;
max-width: 400px;
background: var(--white);
border: 1px solid var(--border);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
}

.smm-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px;
}

.smm-profile {
display: flex;
align-items: center;
gap: 10px;
}

.smm-profile-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary-red);
color: var(--white);
}

.smm-profile strong,
.smm-profile small {
display: block;
}

.smm-profile strong {
color: var(--blue);
font-size: 13px;
}

.smm-profile small {
margin-top: 2px;
color: var(--muted);
font-size: 10px;
}

.smm-card-header > i {
color: var(--muted);
}

.smm-post-image {
height: 210px;
display: flex;
align-items: center;
justify-content: center;
background: var(--blue);
}

.smm-post-icon {
width: 85px;
height: 85px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 50%;
color: var(--primary-red);
font-size: 36px;
}

.smm-post-content {
padding: 18px;
}

.smm-reaction {
display: flex;
gap: 15px;
}

.smm-reaction span {
color: var(--primary-red);
font-size: 15px;
}

.smm-lines {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 15px;
}

.smm-lines span {
display: block;
height: 6px;
background: var(--light-bg);
}

.smm-lines span:nth-child(1) {
width: 90%;
}

.smm-lines span:nth-child(2) {
width: 75%;
}

.smm-lines span:nth-child(3) {
width: 55%;
}

.smm-floating-card {
position: absolute;
z-index: 3;
display: flex;
align-items: center;
gap: 10px;
padding: 13px 16px;
background: var(--white);
border: 1px solid var(--border);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.smm-floating-card > i {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: var(--blue);
color: var(--primary-red);
}

.smm-floating-card strong,
.smm-floating-card span {
display: block;
}

.smm-floating-card strong {
color: var(--blue);
font-size: 12px;
}

.smm-floating-card span {
color: var(--muted);
font-size: 10px;
}

.smm-engagement {
top: 45px;
left: -25px;
}

.smm-followers {
right: -25px;
top: 180px;
}

.smm-reach {
left: 10px;
bottom: 35px;
}

/*SMM SERVICES */

.smm-services {
padding: 110px 0;
background: var(--light-bg);
}

.smm-service-card {
height: 100%;
padding: 38px 30px;
background: var(--white);
border: 1px solid var(--border);
transition: 0.35s ease;
}

.smm-service-card:hover {
border-color: var(--primary-red);
transform: translateY(-8px);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}

.smm-service-icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
background: var(--blue);
color: var(--primary-red);
font-size: 21px;
}

.smm-service-card h3 {
color: var(--blue);
font-size: 19px;
font-weight: 700;
}

.smm-service-card p {
margin: 12px 0 0;
color: var(--muted);
font-size: 13px;
line-height: 1.8;
}

/* PLATFORMS */

.smm-platforms {
padding: 110px 0;
background: var(--white);
}

.smm-platform-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px;
margin-top: 50px;
}

.smm-platform-card {
padding: 35px 20px;
text-align: center;
border: 1px solid var(--border);
transition: 0.3s;
}

.smm-platform-card:hover {
border-color: var(--primary-red);
transform: translateY(-7px);
}

.smm-platform-card > i {
display: block;
margin-bottom: 20px;
color: var(--primary-red);
font-size: 32px;
}

.smm-platform-card h4 {
color: var(--blue);
font-size: 16px;
font-weight: 700;
}

.smm-platform-card p {
margin: 10px 0 0;
color: var(--muted);
font-size: 11px;
line-height: 1.7;
}

/* PROCESS */

.smm-process {
padding: 110px 0;
background: var(--light-bg);
}

.smm-process-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 15px;
margin-top: 55px;
}

.smm-process-card {
position: relative;
padding: 35px 18px;
text-align: center;
background: var(--white);
border: 1px solid var(--border);
transition: 0.3s;
}

.smm-process-card:hover {
border-color: var(--primary-red);
transform: translateY(-7px);
}

.smm-process-card > span {
position: absolute;
top: 10px;
right: 15px;
color: #e7e7e7;
font-size: 24px;
font-weight: 800;
}

.smm-process-card > i {
display: block;
margin-bottom: 20px;
color: var(--primary-red);
font-size: 26px;
}

.smm-process-card h4 {
color: var(--blue);
font-size: 15px;
}

.smm-process-card p {
color: var(--muted);
font-size: 12px;
line-height: 1.7;
}

/* BENEFITS */

.smm-benefits {
padding: 110px 0;
background: var(--white);
}

.smm-benefit-list {
display: flex;
flex-direction: column;
gap: 18px;
margin-top: 30px;
}

.smm-benefit-list > div {
display: flex;
align-items: flex-start;
gap: 12px;
color: var(--blue);
font-size: 14px;
}

.smm-benefit-visual {
position: relative;
min-height: 430px;
display: flex;
align-items: center;
justify-content: center;
background: var(--light-bg);
overflow: hidden;
}

.smm-benefit-visual::before {
content: "";
position: absolute;
width: 270px;
height: 270px;
border: 1px dashed rgba(255, 0, 0, 0.3);
border-radius: 50%;
}

.smm-center-icon {
position: relative;
z-index: 2;
width: 130px;
height: 130px;
display: flex;
align-items: center;
justify-content: center;
background: var(--blue);
color: var(--primary-red);
border-radius: 50%;
font-size: 48px;
}

.smm-small-icon {
position: absolute;
z-index: 3;
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
background: var(--white);
color: var(--primary-red);
border: 1px solid var(--border);
border-radius: 50%;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.smm-icon-heart {
top: 60px;
left: 90px;
}

.smm-icon-users {
top: 60px;
right: 90px;
}

.smm-icon-chat {
bottom: 60px;
left: 90px;
}

.smm-icon-chart {
right: 90px;
bottom: 60px;
}

/* WHY CHOOSE US */

.smm-why {
padding: 110px 0;
background: var(--light-bg);
}

.smm-why-card {
height: 100%;
padding: 35px 25px;
text-align: center;
background: var(--white);
border: 1px solid var(--border);
transition: 0.3s;
}

.smm-why-card:hover {
border-color: var(--primary-red);
transform: translateY(-7px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.07);
}

.smm-why-card i {
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
background: var(--blue);
color: var(--primary-red);
}

.smm-why-card h4 {
color: var(--blue);
font-size: 16px;
}

.smm-why-card p {
color: var(--muted);
font-size: 12px;
line-height: 1.7;
}

/* CTA */

.smm-cta {
padding: 100px 0;
background: var(--white);
}

.smm-cta-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: 60px;
background: var(--blue);
border-left: 5px solid var(--primary-red);
}

.smm-cta-box h2 {
margin: 12px 0 15px;
color: var(--white);
font-size: clamp(32px, 4vw, 50px);
font-weight: 800;
line-height: 1.2;
}

.smm-cta-box h2 span {
color: var(--primary-red);
}

.smm-cta-box p {
max-width: 650px;
margin: 0;
color: rgba(255, 255, 255, 0.65);
line-height: 1.8;
}

.smm-cta-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 14px;
padding: 16px 25px;
background: var(--primary-red);
color: var(--white);
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: 0.3s;
}

.smm-cta-btn:hover {
background: var(--primary-red-dark);
color: var(--white);
transform: translateY(-3px);
}

/* =====================================================
SOCIAL MEDIA OPTIMIZATION PAGE
===================================================== */


.smo-intro {
padding: 110px 0;
background: var(--white);
}

.smo-intro h2,
.smo-strategy h2,
.smo-why h2 {
margin: 15px 0 25px;
color: var(--blue);
font-size: clamp(34px, 4vw, 50px);
font-weight: 800;
line-height: 1.2;
}

.smo-intro h2 span,
.smo-strategy h2 span,
.smo-why h2 span {
color: var(--primary-red);
}

.smo-intro p,
.smo-strategy p,
.smo-why p {
color: var(--muted);
line-height: 1.9;
}

.smo-check-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-top: 30px;
}

.smo-check-list div {
display: flex;
align-items: center;
gap: 10px;
color: var(--blue);
font-size: 13px;
font-weight: 600;
}

.smo-check-list i,
.smo-why-list i {
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--primary-red);
color: var(--white);
font-size: 10px;
}

.smo-visual {
position: relative;
min-height: 450px;
display: flex;
align-items: center;
justify-content: center;
}

.smo-main-card {
position: relative;
z-index: 2;
width: 100%;
max-width: 420px;
padding: 28px;
background: var(--white);
border: 1px solid var(--border);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
}

.smo-profile-top {
display: flex;
align-items: center;
}

.smo-avatar {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
background: var(--blue);
color: var(--primary-red);
border-radius: 50%;
font-size: 22px;
}

.smo-profile-info strong,
.smo-profile-info span {
display: block;
}

.smo-profile-info strong {
color: var(--blue);
font-size: 16px;
}

.smo-profile-info span {
margin-top: 4px;
color: var(--muted);
font-size: 11px;
}

.smo-verified {
margin-left: auto;
color: var(--primary-red);
font-size: 20px;
}

.smo-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin: 28px 0;
padding: 20px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}

.smo-stats div {
text-align: center;
border-right: 1px solid var(--border);
}

.smo-stats div:last-child {
border-right: 0;
}

.smo-stats strong,
.smo-stats span {
display: block;
}

.smo-stats strong {
color: var(--blue);
font-size: 18px;
}

.smo-stats span {
margin-top: 4px;
color: var(--muted);
font-size: 10px;
}

.smo-growth-top {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
color: var(--blue);
font-size: 13px;
font-weight: 600;
}

.smo-growth-top strong {
color: var(--primary-red);
}

.smo-progress {
height: 8px;
background: var(--light-bg);
}

.smo-progress span {
display: block;
width: 68%;
height: 100%;
background: var(--primary-red);
}

.smo-floating {
position: absolute;
z-index: 3;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: var(--white);
border: 1px solid var(--border);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
color: var(--blue);
font-size: 12px;
font-weight: 600;
}

.smo-floating i {
color: var(--primary-red);
}

.smo-search {
top: 40px;
left: -20px;
}

.smo-engage {
right: -25px;
top: 180px;
}

.smo-growth-card {
left: 20px;
bottom: 35px;
}

/* SERVICES */

.smo-services {
padding: 110px 0;
background: var(--light-bg);
}

.smo-service-card {
height: 100%;
padding: 38px 30px;
background: var(--white);
border: 1px solid var(--border);
transition: 0.35s ease;
}

.smo-service-card:hover {
border-color: var(--primary-red);
transform: translateY(-8px);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}

.smo-service-icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
background: var(--blue);
color: var(--primary-red);
font-size: 21px;
}

.smo-service-card h3 {
color: var(--blue);
font-size: 19px;
font-weight: 700;
}

.smo-service-card p {
margin: 12px 0 0;
color: var(--muted);
font-size: 13px;
line-height: 1.8;
}

/* STRATEGY */

.smo-strategy {
padding: 110px 0;
background: var(--white);
}

.smo-strategy-list {
display: flex;
flex-direction: column;
gap: 18px;
}

.smo-strategy-item {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 22px;
border: 1px solid var(--border);
transition: 0.3s;
}

.smo-strategy-item:hover {
border-color: var(--primary-red);
transform: translateX(8px);
}

.smo-strategy-number {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--primary-red);
color: var(--white);
font-size: 13px;
font-weight: 700;
}

.smo-strategy-item h4 {
margin-bottom: 7px;
color: var(--blue);
font-size: 17px;
}

.smo-strategy-item p {
margin: 0;
font-size: 13px;
}

/* BENEFITS */

.smo-benefits {
padding: 110px 0;
background: var(--light-bg);
}

.smo-benefit-card {
height: 100%;
padding: 38px 25px;
text-align: center;
background: var(--white);
border: 1px solid var(--border);
transition: 0.3s;
}

.smo-benefit-card:hover {
border-color: var(--primary-red);
transform: translateY(-7px);
}

.smo-benefit-card i {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 22px;
background: var(--blue);
color: var(--primary-red);
font-size: 21px;
}

.smo-benefit-card h4 {
color: var(--blue);
font-size: 17px;
}

.smo-benefit-card p {
margin: 10px 0 0;
color: var(--muted);
font-size: 12px;
line-height: 1.8;
}

/* PROCESS */

.smo-process {
padding: 110px 0;
background: var(--white);
}

.smo-process-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 15px;
margin-top: 55px;
}

.smo-process-card {
position: relative;
padding: 35px 18px;
text-align: center;
background: var(--light-bg);
border: 1px solid var(--border);
transition: 0.3s;
}

.smo-process-card:hover {
border-color: var(--primary-red);
background: var(--white);
transform: translateY(-7px);
}

.smo-process-card > span {
position: absolute;
top: 10px;
right: 15px;
color: #dedede;
font-size: 24px;
font-weight: 800;
}

.smo-process-card > i {
display: block;
margin-bottom: 20px;
color: var(--primary-red);
font-size: 25px;
}

.smo-process-card h4 {
color: var(--blue);
font-size: 15px;
}

.smo-process-card p {
margin: 8px 0 0;
color: var(--muted);
font-size: 11px;
line-height: 1.7;
}

/* WHY */

.smo-why {
padding: 110px 0;
background: var(--light-bg);
}

.smo-why-list {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 30px;
}

.smo-why-list div {
display: flex;
align-items: center;
gap: 12px;
color: var(--blue);
font-size: 14px;
font-weight: 600;
}

.smo-performance-box {
padding: 35px;
background: var(--blue);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
}

.smo-performance-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 25px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
color: var(--white);
font-size: 15px;
font-weight: 600;
}

.smo-performance-header i {
color: var(--primary-red);
font-size: 24px;
}

.smo-performance-chart {
padding: 40px 0;
}

.smo-chart-line {
display: flex;
align-items: flex-end;
justify-content: space-between;
height: 150px;
padding: 0 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.smo-chart-line span {
width: 12%;
background: var(--primary-red);
}

.smo-chart-line span:nth-child(1) {
height: 30%;
}

.smo-chart-line span:nth-child(2) {
height: 45%;
}

.smo-chart-line span:nth-child(3) {
height: 60%;
}

.smo-chart-line span:nth-child(4) {
height: 75%;
}

.smo-chart-line span:nth-child(5) {
height: 95%;
}

.smo-performance-bottom {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}

.smo-performance-bottom div {
padding: 15px;
background: rgba(255, 255, 255, 0.05);
}

.smo-performance-bottom small,
.smo-performance-bottom strong {
display: block;
}

.smo-performance-bottom small {
color: rgba(255, 255, 255, 0.45);
font-size: 10px;
}

.smo-performance-bottom strong {
margin-top: 5px;
color: var(--white);
font-size: 12px;
}

/* CTA */

.smo-cta {
padding: 100px 0;
background: var(--white);
}

.smo-cta-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: 60px;
background: var(--blue);
border-left: 5px solid var(--primary-red);
}

.smo-cta-box h2 {
margin: 12px 0 15px;
color: var(--white);
font-size: clamp(32px, 4vw, 50px);
font-weight: 800;
line-height: 1.2;
}

.smo-cta-box h2 span {
color: var(--primary-red);
}

.smo-cta-box p {
max-width: 650px;
margin: 0;
color: rgba(255, 255, 255, 0.65);
line-height: 1.8;
}

.smo-cta-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 14px;
padding: 16px 26px;
background: var(--primary-red);
color: var(--white);
text-decoration: none;
font-size: 13px;
font-weight: 700;
transition: 0.3s;
}

.smo-cta-btn:hover {
background: var(--primary-red-dark);
color: var(--white);
transform: translateY(-3px);
}

/* =====================================================
PAY PER CLICK (PPC) ADVERTISING PAGE
===================================================== */


.ppc-intro {
padding: 110px 0;
background: var(--white);
}

.ppc-intro h2,
.ppc-strategy h2,
.ppc-performance h2 {
margin: 15px 0 25px;
color: var(--blue);
font-size: clamp(34px, 4vw, 50px);
font-weight: 800;
line-height: 1.2;
}

.ppc-intro h2 span,
.ppc-strategy h2 span,
.ppc-performance h2 span {
color: var(--primary-red);
}

.ppc-intro p,
.ppc-strategy p,
.ppc-performance p {
color: var(--muted);
line-height: 1.9;
}

.ppc-check-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-top: 30px;
}

.ppc-check-list div {
display: flex;
align-items: center;
gap: 10px;
color: var(--blue);
font-size: 13px;
font-weight: 600;
}

.ppc-check-list i,
.ppc-performance-list i {
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--primary-red);
color: var(--white);
font-size: 10px;
}

.ppc-visual {
position: relative;
min-height: 470px;
display: flex;
align-items: center;
justify-content: center;
}

.ppc-main-dashboard {
position: relative;
z-index: 2;
width: 100%;
max-width: 430px;
padding: 28px;
background: var(--white);
border: 1px solid var(--border);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
}

.ppc-dashboard-top {
display: flex;
justify-content: space-between;
align-items: center;
}

.ppc-dashboard-top span {
display: block;
margin-bottom: 5px;
color: var(--muted);
font-size: 11px;
}

.ppc-dashboard-top h4 {
margin: 0;
color: var(--blue);
font-size: 18px;
}

.ppc-live {
display: flex;
align-items: center;
gap: 6px;
color: var(--primary-red);
font-size: 10px;
font-weight: 700;
}

.ppc-live span {
width: 7px;
height: 7px;
margin: 0;
background: var(--primary-red);
border-radius: 50%;
}

.ppc-dashboard-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin: 28px 0;
}

.ppc-stat-card {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 15px;
background: var(--light-bg);
}

.ppc-stat-card i {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
background: var(--blue);
color: var(--primary-red);
}

.ppc-stat-card strong,
.ppc-stat-card span {
display: block;
}

.ppc-stat-card strong {
color: var(--blue);
font-size: 17px;
}

.ppc-stat-card span {
margin-top: 3px;
color: var(--muted);
font-size: 10px;
}

.ppc-chart {
padding-top: 20px;
border-top: 1px solid var(--border);
}

.ppc-chart-title {
display: flex;
justify-content: space-between;
margin-bottom: 18px;
color: var(--blue);
font-size: 12px;
}

.ppc-chart-title strong {
color: var(--primary-red);
}

.ppc-bars {
height: 140px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 10px;
border-bottom: 1px solid var(--border);
}

.ppc-bars span {
width: 10%;
background: var(--primary-red);
}

.ppc-bars span:nth-child(1) {
height: 30%;
}

.ppc-bars span:nth-child(2) {
height: 45%;
}

.ppc-bars span:nth-child(3) {
height: 40%;
}

.ppc-bars span:nth-child(4) {
height: 60%;
}

.ppc-bars span:nth-child(5) {
height: 72%;
}

.ppc-bars span:nth-child(6) {
height: 85%;
}

.ppc-bars span:nth-child(7) {
height: 100%;
}

.ppc-floating-card {
position: absolute;
z-index: 3;
display: flex;
align-items: center;
gap: 10px;
padding: 13px 16px;
background: var(--white);
border: 1px solid var(--border);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.ppc-floating-card > i {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: var(--blue);
color: var(--primary-red);
}

.ppc-floating-card strong,
.ppc-floating-card span {
display: block;
}

.ppc-floating-card strong {
color: var(--blue);
font-size: 12px;
}

.ppc-floating-card span {
color: var(--muted);
font-size: 10px;
}

.ppc-click-card {
top: -20px;
left: -25px;
}

.ppc-target-card {
top: 180px;
right: -25px;
}

.ppc-conversion-card {
left: 15px;
bottom: -30px;
}

/* SERVICES */

.ppc-services {
padding: 110px 0;
background: var(--light-bg);
}

.ppc-service-card {
height: 100%;
padding: 38px 30px;
background: var(--white);
border: 1px solid var(--border);
transition: 0.35s ease;
}

.ppc-service-card:hover {
border-color: var(--primary-red);
transform: translateY(-8px);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}

.ppc-service-icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
background: var(--blue);
color: var(--primary-red);
font-size: 21px;
}

.ppc-service-card h3 {
color: var(--blue);
font-size: 19px;
font-weight: 700;
}

.ppc-service-card p {
margin: 12px 0 0;
color: var(--muted);
font-size: 13px;
line-height: 1.8;
}

/* STRATEGY */

.ppc-strategy {
padding: 110px 0;
background: var(--white);
}

.ppc-strategy-list {
display: flex;
flex-direction: column;
gap: 18px;
}

.ppc-strategy-item {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 22px;
border: 1px solid var(--border);
transition: 0.3s;
}

.ppc-strategy-item:hover {
border-color: var(--primary-red);
transform: translateX(8px);
}

.ppc-strategy-number {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--primary-red);
color: var(--white);
font-size: 13px;
font-weight: 700;
}

.ppc-strategy-item h4 {
margin-bottom: 7px;
color: var(--blue);
font-size: 17px;
}

.ppc-strategy-item p {
margin: 0;
font-size: 13px;
}

/* PROCESS */

.ppc-process {
padding: 110px 0;
background: var(--light-bg);
}

.ppc-process-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 15px;
margin-top: 55px;
}

.ppc-process-card {
position: relative;
padding: 35px 18px;
text-align: center;
background: var(--white);
border: 1px solid var(--border);
transition: 0.3s;
}

.ppc-process-card:hover {
border-color: var(--primary-red);
transform: translateY(-7px);
}

.ppc-process-card > span {
position: absolute;
top: 10px;
right: 15px;
color: #e2e2e2;
font-size: 24px;
font-weight: 800;
}

.ppc-process-card > i {
display: block;
margin-bottom: 20px;
color: var(--primary-red);
font-size: 25px;
}

.ppc-process-card h4 {
color: var(--blue);
font-size: 15px;
}

.ppc-process-card p {
margin: 8px 0 0;
color: var(--muted);
font-size: 11px;
line-height: 1.7;
}

/* BENEFITS */

.ppc-benefits {
padding: 110px 0;
background: var(--white);
}

.ppc-benefit-card {
height: 100%;
padding: 38px 25px;
text-align: center;
background: var(--light-bg);
border: 1px solid var(--border);
transition: 0.3s;
}

.ppc-benefit-card:hover {
background: var(--white);
border-color: var(--primary-red);
transform: translateY(-7px);
}

.ppc-benefit-card i {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 22px;
background: var(--blue);
color: var(--primary-red);
font-size: 21px;
}

.ppc-benefit-card h4 {
color: var(--blue);
font-size: 17px;
}

.ppc-benefit-card p {
margin: 10px 0 0;
color: var(--muted);
font-size: 12px;
line-height: 1.8;
}

/* PERFORMANCE */

.ppc-performance {
padding: 110px 0;
background: var(--light-bg);
}

.ppc-performance-list {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 30px;
}

.ppc-performance-list > div {
display: flex;
align-items: center;
gap: 12px;
color: var(--blue);
font-size: 14px;
font-weight: 600;
}

.ppc-performance-dashboard {
padding: 35px;
background: var(--blue);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
}

.ppc-dashboard-heading {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 25px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ppc-dashboard-heading small {
color: rgba(255, 255, 255, 0.45);
font-size: 10px;
}

.ppc-dashboard-heading h4 {
margin: 5px 0 0;
color: var(--white);
font-size: 18px;
}

.ppc-dashboard-heading > i {
color: var(--primary-red);
font-size: 24px;
}

.ppc-performance-chart {
height: 230px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
padding: 35px 5px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.ppc-chart-column {
width: 12%;
height: 100%;
display: flex;
align-items: flex-end;
}

.ppc-chart-column span {
width: 100%;
background: var(--primary-red);
}

.ppc-dashboard-footer {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 25px;
}

.ppc-dashboard-footer div {
padding: 15px;
background: rgba(255, 255, 255, 0.05);
}

.ppc-dashboard-footer small,
.ppc-dashboard-footer strong {
display: block;
}

.ppc-dashboard-footer small {
color: rgba(255, 255, 255, 0.45);
font-size: 10px;
}

.ppc-dashboard-footer strong {
margin-top: 5px;
color: var(--white);
font-size: 12px;
}

/* CTA */

.ppc-cta {
padding: 100px 0;
background: var(--white);
}

.ppc-cta-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: 60px;
background: var(--blue);
border-left: 5px solid var(--primary-red);
}

.ppc-cta-box h2 {
margin: 12px 0 15px;
color: var(--white);
font-size: clamp(32px, 4vw, 50px);
font-weight: 800;
line-height: 1.2;
}

.ppc-cta-box h2 span {
color: var(--primary-red);
}

.ppc-cta-box p {
max-width: 650px;
margin: 0;
color: rgba(255, 255, 255, 0.65);
line-height: 1.8;
}

.ppc-cta-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 14px;
padding: 16px 26px;
background: var(--primary-red);
color: var(--white);
text-decoration: none;
font-size: 13px;
font-weight: 700;
transition: 0.3s;
}

.ppc-cta-btn:hover {
background: var(--primary-red-dark);
color: var(--white);
transform: translateY(-3px);
}

/* =====================================================
BRAND PROMOTION PAGE
===================================================== */

.brand-intro {
padding: 110px 0;
background: var(--white);
}

.brand-intro h2,
.brand-strategy h2,
.brand-growth h2 {
margin: 15px 0 25px;
color: var(--blue);
font-size: clamp(34px, 4vw, 50px);
font-weight: 800;
line-height: 1.2;
}

.brand-intro h2 span,
.brand-strategy h2 span,
.brand-growth h2 span {
color: var(--primary-red);
}

.brand-intro p,
.brand-strategy p,
.brand-growth p {
color: var(--muted);
line-height: 1.9;
}

.brand-check-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-top: 30px;
}

.brand-check-list div {
display: flex;
align-items: center;
gap: 10px;
color: var(--blue);
font-size: 13px;
font-weight: 600;
}

.brand-check-list i,
.brand-growth-list i {
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--primary-red);
color: var(--white);
font-size: 10px;
}

/* BRAND VISUAL */

.brand-visual {
position: relative;
min-height: 470px;
display: flex;
align-items: center;
justify-content: center;
}

.brand-main-card {
position: relative;
z-index: 2;
width: 100%;
max-width: 420px;
padding: 30px;
background: var(--white);
border: 1px solid var(--border);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
}

.brand-card-top {
display: flex;
align-items: center;
gap: 15px;
}

.brand-mini-logo {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary-red);
color: var(--white);
font-size: 20px;
font-weight: 800;
}

.brand-card-top small {
color: var(--muted);
font-size: 10px;
}

.brand-card-top h4 {
margin: 4px 0 0;
color: var(--blue);
font-size: 16px;
}

.brand-growth-circle {
width: 170px;
height: 170px;
display: flex;
align-items: center;
justify-content: center;
margin: 35px auto;
border: 14px solid var(--primary-red);
border-left-color: var(--border);
border-radius: 50%;
}

.brand-growth-circle div {
text-align: center;
}

.brand-growth-circle strong,
.brand-growth-circle span {
display: block;
}

.brand-growth-circle strong {
color: var(--blue);
font-size: 34px;
}

.brand-growth-circle span {
margin-top: 4px;
color: var(--muted);
font-size: 10px;
}

.brand-card-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}

.brand-card-stats > div {
display: flex;
align-items: center;
gap: 10px;
padding: 15px;
background: var(--light-bg);
}

.brand-card-stats i {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--blue);
color: var(--primary-red);
}

.brand-card-stats strong,
.brand-card-stats span {
display: block;
}

.brand-card-stats strong {
color: var(--blue);
font-size: 14px;
}

.brand-card-stats span {
margin-top: 3px;
color: var(--muted);
font-size: 9px;
}

/* FLOATING CARDS */

.brand-floating-card {
position: absolute;
z-index: 3;
display: flex;
align-items: center;
gap: 10px;
padding: 13px 16px;
background: var(--white);
border: 1px solid var(--border);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.brand-floating-card > i {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: var(--blue);
color: var(--primary-red);
}

.brand-floating-card strong,
.brand-floating-card span {
display: block;
}

.brand-floating-card strong {
color: var(--blue);
font-size: 12px;
}

.brand-floating-card span {
color: var(--muted);
font-size: 10px;
}

.brand-reach-card {
top: -20px;
left: -25px;
}

.brand-engagement-card {
top: 185px;
right: -25px;
}

.brand-growth-card {
bottom: -5px;
left: 10px;
}

/* SERVICES */

.brand-services {
padding: 110px 0;
background: var(--light-bg);
}

.brand-service-card {
height: 100%;
padding: 38px 30px;
background: var(--white);
border: 1px solid var(--border);
transition: 0.35s ease;
}

.brand-service-card:hover {
border-color: var(--primary-red);
transform: translateY(-8px);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}

.brand-service-icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
background: var(--blue);
color: var(--primary-red);
font-size: 21px;
}

.brand-service-card h3 {
color: var(--blue);
font-size: 19px;
font-weight: 700;
}

.brand-service-card p {
margin: 12px 0 0;
color: var(--muted);
font-size: 13px;
line-height: 1.8;
}

/* STRATEGY */

.brand-strategy {
padding: 110px 0;
background: var(--white);
}

.brand-strategy-list {
display: flex;
flex-direction: column;
gap: 18px;
}

.brand-strategy-item {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 22px;
border: 1px solid var(--border);
transition: 0.3s;
}

.brand-strategy-item:hover {
border-color: var(--primary-red);
transform: translateX(8px);
}

.brand-strategy-number {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--primary-red);
color: var(--white);
font-size: 13px;
font-weight: 700;
}

.brand-strategy-item h4 {
margin-bottom: 7px;
color: var(--blue);
font-size: 17px;
}

.brand-strategy-item p {
margin: 0;
font-size: 13px;
}

/* PROCESS */

.brand-process {
padding: 110px 0;
background: var(--light-bg);
}

.brand-process-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 15px;
margin-top: 55px;
}

.brand-process-card {
position: relative;
padding: 35px 18px;
text-align: center;
background: var(--white);
border: 1px solid var(--border);
transition: 0.3s;
}

.brand-process-card:hover {
border-color: var(--primary-red);
transform: translateY(-7px);
}

.brand-process-card > span {
position: absolute;
top: 10px;
right: 15px;
color: #e2e2e2;
font-size: 24px;
font-weight: 800;
}

.brand-process-card > i {
display: block;
margin-bottom: 20px;
color: var(--primary-red);
font-size: 25px;
}

.brand-process-card h4 {
color: var(--blue);
font-size: 15px;
}

.brand-process-card p {
margin: 8px 0 0;
color: var(--muted);
font-size: 11px;
line-height: 1.7;
}

/* BENEFITS */

.brand-benefits {
padding: 110px 0;
background: var(--white);
}

.brand-benefit-card {
height: 100%;
padding: 38px 25px;
text-align: center;
background: var(--light-bg);
border: 1px solid var(--border);
transition: 0.3s;
}

.brand-benefit-card:hover {
background: var(--white);
border-color: var(--primary-red);
transform: translateY(-7px);
}

.brand-benefit-card i {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 22px;
background: var(--blue);
color: var(--primary-red);
font-size: 21px;
}

.brand-benefit-card h4 {
color: var(--blue);
font-size: 17px;
}

.brand-benefit-card p {
margin: 10px 0 0;
color: var(--muted);
font-size: 12px;
line-height: 1.8;
}

/* BRAND GROWTH */

.brand-growth {
padding: 110px 0;
background: var(--light-bg);
}

.brand-growth-list {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 30px;
}

.brand-growth-list > div {
display: flex;
align-items: center;
gap: 12px;
color: var(--blue);
font-size: 14px;
font-weight: 600;
}

/* ANALYTICS DASHBOARD */

.brand-growth-dashboard {
padding: 35px;
background: var(--blue);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
}

.brand-dashboard-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 25px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.brand-dashboard-header small {
color: rgba(255, 255, 255, 0.45);
font-size: 10px;
}

.brand-dashboard-header h4 {
margin: 5px 0 0;
color: var(--white);
font-size: 18px;
}

.brand-dashboard-header > i {
color: var(--primary-red);
font-size: 24px;
}

.brand-chart-area {
height: 230px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
padding: 35px 5px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.brand-chart-column {
width: 12%;
height: 100%;
display: flex;
align-items: flex-end;
}

.brand-chart-column span {
width: 100%;
background: var(--primary-red);
}

.brand-dashboard-footer {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 25px;
}

.brand-dashboard-footer div {
padding: 15px;
background: rgba(255, 255, 255, 0.05);
}

.brand-dashboard-footer small,
.brand-dashboard-footer strong {
display: block;
}

.brand-dashboard-footer small {
color: rgba(255, 255, 255, 0.45);
font-size: 10px;
}

.brand-dashboard-footer strong {
margin-top: 5px;
color: var(--white);
font-size: 12px;
}

/* CTA */

.brand-cta {
padding: 100px 0;
background: var(--white);
}

.brand-cta-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: 60px;
background: var(--blue);
border-left: 5px solid var(--primary-red);
}

.brand-cta-box h2 {
margin: 12px 0 15px;
color: var(--white);
font-size: clamp(32px, 4vw, 50px);
font-weight: 800;
line-height: 1.2;
}

.brand-cta-box h2 span {
color: var(--primary-red);
}

.brand-cta-box p {
max-width: 650px;
margin: 0;
color: rgba(255, 255, 255, 0.65);
line-height: 1.8;
}

.brand-cta-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 14px;
padding: 16px 26px;
background: var(--primary-red);
color: var(--white);
text-decoration: none;
font-size: 13px;
font-weight: 700;
transition: 0.3s;
}

.brand-cta-btn:hover {
background: var(--primary-red-dark);
color: var(--white);
transform: translateY(-3px);
}



/* =====================================================
   PRODUCT PAGE BANNER
===================================================== */

.product-page-banner {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    background: var(--blue);
}

.product-page-banner::before {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    top: -200px;
    right: -100px;
    border: 1px solid rgba(255, 0, 0, 0.25);
    border-radius: 50%;
}

.product-page-banner::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    bottom: -150px;
    left: 10%;
    background: var(--primary-red);
    opacity: 0.06;
    border-radius: 50%;
}

.product-banner-content {
    position: relative;
    z-index: 2;
}

.product-banner-content h1 {
    margin: 15px 0 20px;
    color: var(--white);
    font-size: 54px;
    font-weight: 800;
    line-height: 1.15;
}

.product-banner-content h1 span {
    display: block;
    color: var(--primary-red);
}

.product-banner-content p {
    max-width: 700px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 16px;
    line-height: 1.9;
}

.product-banner-icon {
    position: relative;
    z-index: 2;
    width: 150px;
    height: 150px;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
    color: var(--primary-red);
    font-size: 55px;
}

.product-cta-content {
    position: relative;

    z-index: 5;

    width: 100%;

    text-align: center;
}

.product-cta-label {

    display: flex;

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

    gap: 10px;

    margin-bottom: 32px;

    color: #e31319;

    font-size: 17px;

    font-weight: 700;

    letter-spacing: 1.5px;

    font-family: "Montserrat", sans-serif;
}


.cta-line {

    width: 52px;

    height: 2px;

    background: #e31319;

    display: block;
}


.cta-dot {

    width: 7px;
    height: 7px;

    background: #e31319;

    border-radius: 50%;

    display: block;
}

.product-cta-content h2 {

    margin: 0;

    color: #071c38;

    font-family: "Montserrat", sans-serif;

    font-size: 26px;

    line-height: 1.15;

    font-weight: 700;
}


.product-cta-content h2 span {

    color: #e31319;
}

.product-cta-desc {
    margin: 7px auto 0;
    color: #56647a;
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    line-height: 1.65;
    font-weight: 400;
}

.product-cta-button {
    position: relative;
    width: 197px;
    height: 54px;
    margin: 20px auto 0;
    padding: 0 15px 0 20px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #f51c21 0%,
        #ed1117 50%,
        #e7070d 100%
    );
    border-radius: 30px;
    box-shadow:
        0 20px 35px rgba(237, 17, 23, 0.25),
        0 8px 15px rgba(237, 17, 23, 0.10);
    overflow: hidden;
    transition: all 0.35s ease;
}

.product-cta-button::before {

    content: "";

    position: absolute;

    left: -100%;
    top: 0;

    width: 65%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.18),
        transparent
    );

    transform: skewX(-20deg);

    transition: 0.6s ease;
}


.product-cta-button:hover::before {
    left: 130%;
}


.product-cta-button:hover {

    color: #ffffff;

    transform: translateY(-5px);

    box-shadow:
        0 25px 45px rgba(237, 17, 23, 0.30),
        0 10px 20px rgba(237, 17, 23, 0.12);
}

.product-phone {

    width: 25px;
    height: 25px;

    flex-shrink: 0;

    display: flex;

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

    background: #ffffff;

    color: #ed1117;

    border-radius: 50%;

    font-size: 14px;
}


.product-phone i {
    transform: rotate(-10deg);
}

.product-button-text {

    margin-left: 10px;

    text-align: left;

    color: #ffffff;

    font-family: "Montserrat", sans-serif;

    font-size: 15px;

    font-weight: 700;
}

.product-arrow {

    width: 43px;

    display: flex;

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

    color: #ffffff;

    font-size: 25px;

    transition: transform 0.3s ease;
}


.product-cta-button:hover .product-arrow {
    transform: translateX(8px);
}

.product-expert {

    margin-top: 26px;

    display: flex;

    align-items: center;

    justify-content: center;
}

.expert-icon {

    width: 25px;
    height: 25px;

    display: flex;

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

    border-radius: 50%;

    background: #fff0f1;

    color: #ed1117;

    font-size: 22px;
}

.expert-divider {

    width: 1px;

    height: 22px;

    margin: 0 23px;

    background: #bcc3cc;
}

.expert-content {
    text-align: left;
}


.expert-content h5 {

    margin: 0 0 5px;

    color: #071c38;

    font-family: "Montserrat", sans-serif;

    font-size: 13px;

    font-weight: 700;
}


.expert-content p {

    margin: 0;

    color: #56647a;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;
}

.product-cta-circle {

    position: absolute;

    border: 1px solid rgba(237, 17, 23, 0.13);

    border-radius: 50%;

    pointer-events: none;
}


.circle-1 {

    width: 450px;
    height: 450px;

    right: -210px;
    top: 165px;
}


.circle-2 {

    width: 330px;
    height: 330px;

    right: -145px;
    top: 225px;
}

.product-cta-dots {

    position: absolute;

    left: 0;
    bottom: 25px;

    width: 190px;
    height: 220px;

    opacity: 0.55;

    background-image: radial-gradient(
        #ef9fa2 3px,
        transparent 3px
    );

    background-size: 33px 33px;

    pointer-events: none;
}

.product-filter-section {
    padding: 70px 0 30px;
    background: var(--light-bg);
}

.product-filter-wrapper {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
}

.product-filter-title span {
    color: var(--primary-red);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.product-filter-title h2 {
    margin: 10px 0 0;
    color: var(--blue);
    font-size: 38px;
    font-weight: 800;
}

.product-filter-title h2 span {
    color: var(--primary-red);
    font-size: inherit;
    letter-spacing: normal;
}

.product-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.product-filter-buttons button {
    padding: 12px 20px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--blue);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.product-filter-buttons button:hover,
.product-filter-buttons button.active {
    background: var(--primary-red);
    border-color: var(--primary-red);
    color: var(--white);
}


/* =====================================================
   PRODUCT LISTING
===================================================== */

.product-listing-section {
    padding: 40px 0 100px;
    background: var(--light-bg);
}

.product-list-card {
    position: relative;
    margin-bottom: 35px;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--border);
    transition: 0.3s;
}

.product-list-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.product-number {
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 5;
    color: rgba(2, 44, 99, 0.08);
    font-size: 70px;
    font-weight: 800;
}

.product-image-box {
    position: relative;
    height: 100%;
    min-height: 360px;
    overflow: hidden;
}

.product-image-box img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    transition: 0.5s;
}

.product-list-card:hover .product-image-box img {
    transform: scale(1.05);
}

.product-image-overlay {
    position: absolute;
    left: 20px;
    bottom: 20px;
}

.product-image-overlay span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background: var(--primary-red);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
}

.product-list-content {
    position: relative;
    padding: 35px;
}

.product-top-info {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.product-category {
    display: block;
    margin-bottom: 8px;
    color: var(--primary-red);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.product-top-info h2 {
    margin: 0;
    color: var(--blue);
    font-size: 26px;
    font-weight: 750;
}

.product-price {
    min-width: 125px;
    text-align: right;
}

.product-price small {
    display: block;
    color: var(--muted);
    font-size: 10px;
}

.product-price strong {
    display: block;
    margin-top: 5px;
    color: var(--blue);
    font-size: 22px;
}

.product-description {
    margin: 20px 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
}


/* PRODUCT SPECIFICATIONS */

.product-specifications {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border: 1px solid var(--border);
}

.product-spec {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.product-spec:nth-child(odd) {
    border-right: 1px solid var(--border);
}

.product-spec:nth-last-child(-n+2) {
    border-bottom: none;
}

.product-spec span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 11px;
}

.product-spec span i {
    width: 18px;
    color: var(--primary-red);
}

.product-spec strong {
    color: var(--blue);
    font-size: 13px;
}


/* PRODUCT BUTTONS */

.product-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 25px;
}

.product-interest-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    background: var(--blue);
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
}

.product-interest-btn:hover {
    background: var(--primary-red);
    color: var(--white);
}

.product-details-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--primary-red);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.product-details-btn i {
    transition: 0.3s;
}

.product-details-btn:hover i {
    transform: translateX(5px);
}


/* =====================================================
   PRODUCT BENEFITS
===================================================== */

.product-benefits-section {
    padding: 100px 0;
    background: var(--white);
}

.product-benefit-card {
    height: 100%;
    padding: 35px 25px;
    text-align: center;
    border: 1px solid var(--border);
    transition: 0.3s;
}

.product-benefit-card:hover {
    transform: translateY(-7px);
    border-color: var(--primary-red);
}

.product-benefit-card i {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    background: var(--blue);
    color: var(--primary-red);
    font-size: 22px;
}

.product-benefit-card h4 {
    color: var(--blue);
    font-size: 17px;
    font-weight: 700;
}

.product-benefit-card p {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
}

/* =====================================================
   PRIVACY PAGE BANNER
===================================================== */


.privacy-policy-section {
    padding: 90px 0;
    background: var(--light-bg);
}


/* SIDEBAR */

.privacy-sidebar {
    position: sticky;
    top: 110px;
    padding: 25px;
    background: var(--white);
    border: 1px solid var(--border);
}

.sidebar-title {
    display: block;
    margin-bottom: 18px;
    color: var(--primary-red);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.privacy-sidebar a {
    display: block;
    padding: 11px 12px;
    margin-bottom: 3px;
    border-left: 2px solid transparent;
    color: var(--muted);
    font-size: 13px;
    text-decoration: none;
    transition: .3s;
}

.privacy-sidebar a:hover,
.privacy-sidebar a.active {
    color: var(--primary-red);
    background: #fafafa;
    border-left-color: var(--primary-red);
}


/* MAIN CONTENT */

.privacy-content {
    padding: 45px;
    background: var(--white);
    border: 1px solid var(--border);
}

.privacy-block {
    padding-bottom: 45px;
    margin-bottom: 45px;
    border-bottom: 1px solid var(--border);
    scroll-margin-top: 100px;
}

.privacy-block:last-of-type {
    margin-bottom: 0;
}

.privacy-heading {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}

.privacy-heading > span {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: var(--primary-red);
    font-size: 13px;
    font-weight: 700;
}

.privacy-heading h2 {
    margin: 0 0 3px;
    color: var(--blue);
    font-size: 25px;
    font-weight: 750;
}

.privacy-heading small {
    color: var(--muted);
    font-size: 11px;
}

.privacy-block > p {
    margin-bottom: 15px;
    color: #666;
    font-size: 14px;
    line-height: 1.9;
}


/* LIST */

.privacy-list {
    padding: 0;
    margin: 20px 0 0;
    list-style: none;
}

.privacy-list li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 0;
    color: #555;
    font-size: 14px;
    border-bottom: 1px solid #f1f1f1;
}

.privacy-list li:last-child {
    border-bottom: 0;
}

.privacy-list li i {
    margin-top: 3px;
    color: var(--primary-red);
    font-size: 12px;
}


/* INFO CARDS */

.privacy-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 25px;
}

.privacy-info-card {
    padding: 25px 20px;
    background: var(--light-bg);
    border: 1px solid var(--border);
    transition: .3s;
}

.privacy-info-card:hover {
    border-color: var(--primary-red);
    transform: translateY(-4px);
}

.privacy-info-card > i {
    margin-bottom: 15px;
    color: var(--primary-red);
    font-size: 22px;
}

.privacy-info-card h4 {
    margin-bottom: 8px;
    color: var(--blue);
    font-size: 15px;
}

.privacy-info-card p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
}


/* SECURITY NOTICE */

.security-notice {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px;
    margin-top: 25px;
    background: #fff5f5;
    border-left: 3px solid var(--primary-red);
}

.security-notice > i {
    color: var(--primary-red);
    font-size: 24px;
}

.security-notice h4 {
    margin-bottom: 5px;
    color: var(--blue);
    font-size: 15px;
}

.security-notice p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}


/* CONTACT */

.privacy-contact-block {
    padding: 30px;
    background: #fafafa;
    border: 1px solid var(--border);
}

.privacy-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 25px;
}

.privacy-contact-grid > div {
    padding: 20px;
    background: var(--white);
    border: 1px solid var(--border);
}

.privacy-contact-grid i {
    display: block;
    margin-bottom: 10px;
    color: var(--primary-red);
    font-size: 20px;
}

.privacy-contact-grid span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.privacy-contact-grid strong {
    color: var(--blue);
    font-size: 13px;
}


/* LAST UPDATED */

.privacy-last-updated {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 25px;
    color: var(--muted);
    font-size: 12px;
}

.privacy-last-updated i {
    color: var(--primary-red);
}


/* =====================================================
   TERMS & CONDITIONS
===================================================== */

.terms-section {
    padding: 90px 0;
    background: var(--light-bg);
}


.terms-sidebar {
    position: sticky;
    top: 110px;
    padding: 25px;
    background: var(--white);
    border: 1px solid var(--border);
}

.terms-sidebar .sidebar-title {
    display: block;
    margin-bottom: 18px;
    color: var(--primary-red);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.terms-sidebar a {
    display: block;
    padding: 10px 12px;
    margin-bottom: 3px;
    border-left: 2px solid transparent;
    color: var(--muted);
    font-size: 13px;
    text-decoration: none;
    transition: .3s;
}

.terms-sidebar a:hover,
.terms-sidebar a.active {
    color: var(--primary-red);
    background: #fafafa;
    border-left-color: var(--primary-red);
}


/* MAIN CONTENT */

.terms-content {
    padding: 45px;
    background: var(--white);
    border: 1px solid var(--border);
}

.terms-block {
    padding-bottom: 45px;
    margin-bottom: 45px;
    border-bottom: 1px solid var(--border);
    scroll-margin-top: 100px;
}

.terms-heading {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}

.terms-heading > span {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: var(--primary-red);
    font-size: 13px;
    font-weight: 700;
}

.terms-heading h2 {
    margin: 0 0 3px;
    color: var(--blue);
    font-size: 25px;
    font-weight: 750;
}

.terms-heading small {
    color: var(--muted);
    font-size: 11px;
}

.terms-block > p {
    margin-bottom: 15px;
    color: #666;
    font-size: 14px;
    line-height: 1.9;
}


/* LIST */

.terms-list {
    padding: 0;
    margin: 20px 0 0;
    list-style: none;
}

.terms-list li {
    display: flex;
    gap: 12px;
    padding: 11px 0;
    color: #555;
    font-size: 14px;
    border-bottom: 1px solid #f1f1f1;
}

.terms-list li i {
    margin-top: 4px;
    color: var(--primary-red);
    font-size: 11px;
}


/* SERVICE CARDS */

.terms-service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 25px;
}

.terms-service-card {
    padding: 25px 20px;
    background: var(--light-bg);
    border: 1px solid var(--border);
    transition: .3s;
}

.terms-service-card:hover {
    border-color: var(--primary-red);
    transform: translateY(-4px);
}

.terms-service-card > i {
    margin-bottom: 15px;
    color: var(--primary-red);
    font-size: 22px;
}

.terms-service-card h4 {
    margin-bottom: 8px;
    color: var(--blue);
    font-size: 15px;
}

.terms-service-card p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
}


/* HIGHLIGHT */

.terms-highlight {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 22px;
    margin-top: 25px;
    background: #fff5f5;
    border-left: 3px solid var(--primary-red);
}

.terms-highlight > i {
    color: var(--primary-red);
    font-size: 24px;
}

.terms-highlight h4 {
    margin-bottom: 5px;
    color: var(--blue);
    font-size: 15px;
}

.terms-highlight p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}


/* CONTACT */

.terms-contact-block {
    padding: 30px;
    background: #fafafa;
    border: 1px solid var(--border);
}

.terms-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 25px;
}

.terms-contact-grid > div {
    padding: 20px;
    background: var(--white);
    border: 1px solid var(--border);
}

.terms-contact-grid i {
    display: block;
    margin-bottom: 10px;
    color: var(--primary-red);
    font-size: 20px;
}

.terms-contact-grid span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.terms-contact-grid strong {
    color: var(--blue);
    font-size: 13px;
}


/* LAST UPDATED */

.terms-last-updated {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 25px;
    color: var(--muted);
    font-size: 12px;
}

.terms-last-updated i {
    color: var(--primary-red);
}