@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

/* ========================================
   CSS Variables
======================================== */
:root {
    --blue: #000000;
    --orange: #ef8013;
    --black: #070707;
    --muted: #68737d;
    --soft: #f5f7f9;
    --line: #e5e9ed;
    --white: #fff;
    --shadow: 0 24px 70px rgba(7, 16, 28, 0.11);
}


/* ========================================
   Global Styles
======================================== */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: #101317;
    background: #fff;
    font-family: "DM Sans", sans-serif;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Manrope", sans-serif;
}

a {
    text-decoration: none;
    transition: 0.25s ease;
}

img {
    max-width: 100%;
    height: auto;
}


/* ========================================
   Navbar
======================================== */
.navbar {
    padding: 13px 0;
    background: rgba(5, 7, 9, 0.94);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}


/* ========================================
   Brand / Logo
======================================== */
.brand {
    width: 220px;
    display: block;
}


/* ========================================
   Navigation Links
======================================== */
.nav-link {
    color: #aeb6bd !important;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 14px !important;
}

.nav-link:hover,
.nav-link.active {
    color: #fff !important;
}


/* Active Navigation Indicator */
.nav-link.active::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--orange);
    margin: 5px auto -11px;
}


/* ========================================
   Navbar Toggler
======================================== */
.navbar-toggler {
    border: 1px solid #444;
    padding: 8px 10px;
}

.navbar-toggler-icon {
    filter: invert(1);
}


/* ========================================
   Orange Button
======================================== */
.btn-orange {
    background: var(--orange);
    color: #fff !important;
    border: 0;
    border-radius: 999px;
    padding: 14px 23px;
    font-weight: 800;
    box-shadow: 0 12px 30px rgba(251, 100, 53, 0.22);
}

.btn-orange:hover {
    background: #FD9B00;
    transform: translateY(-2px);
}


/* ========================================
   Kicker / Section Label
======================================== */
.kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 2.4px;
    font-size: 11px;
    font-weight: 800;
}

.kicker::before {
    content: "";
    width: 27px;
    height: 2px;
    background: var(--orange);
}


/* ========================================
   Hero Section
======================================== */
.hero {
    min-height: 92vh;
    padding: 155px 0 95px;
    background: var(--black);
    color: #fff;
    position: relative;
    overflow: hidden;
}


/* Hero Background Gradient */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        115deg,
        transparent 0 45%,
        rgba(0, 97, 176, 0.10) 45% 70%,
        rgba(251, 100, 53, 0.12) 70%
    );
}


/* ========================================
   Hero Grid Background
======================================== */
.grid {
    position: absolute;
    inset: 0;
    opacity: 0.14;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.12) 1px,
            transparent 1px
        );
    background-size: 70px 70px;
}


/* ========================================
   Hero Heading
======================================== */
.hero h1 {
    font-size: clamp(3.1rem, 6.5vw, 6.6rem);
    line-height: 0.96;
    letter-spacing: -4px;
    margin: 22px 0;
    font-weight: 800;
}

.hero h1 em {
    font-style: normal;
    color: var(--orange);
}


/* ========================================
   Hero Description
======================================== */
.hero p {
    max-width: 650px;
    color: #aeb7c0;
    font-size: 18px;
    line-height: 1.75;
}


/* ========================================
   Hero Artwork
======================================== */
.hero-art {
    height: 510px;
    position: relative;
}


/* ========================================
   Decorative Circles
======================================== */
.circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.c1 {
    width: 230px;
    height: 230px;
}

.c2 {
    width: 370px;
    height: 370px;
    border-color: rgba(251, 100, 53, 0.25);
}

.c3 {
    width: 500px;
    height: 500px;
    border-color: rgba(0, 97, 176, 0.28);
}


/* ========================================
   Hero Core
======================================== */
.core {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 175px;
    height: 175px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-align: center;
    background: linear-gradient(
        145deg,
        #161b20,
        #090909
    );
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 25px 80px #000;
}

.core b {
    display: block;
    color: var(--orange);
    font: 800 50px "Manrope";
    letter-spacing: -4px;
}

.core small {
    display: block;
    color: #929ba3;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
}


/* ========================================
   Floating Cards
======================================== */
.float {
    position: absolute;
    background: #fff;
    color: #111;
    border-radius: 14px;
    padding: 13px 17px;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 20px 50px #0008;
}


/* Floating Card Positions */
.f1 {
    top: 75px;
    left: 25px;
}

.f2 {
    top: 220px;
    right: -5px;
}

.f3 {
    bottom: 50px;
    left: 65px;
}


/* ========================================
   Statistics
======================================== */
.stat {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    padding-left: 18px;
}

.stat b {
    display: block;
    color: #fff;
    font: 800 34px "Manrope";
}

.stat small {
    color: #7f8992;
    font-size: 9px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}


/* ========================================
   General Section
======================================== */
.section {
    padding: 115px 0;
}


/* ========================================
   Section Header
======================================== */
.section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 45px;
    margin-bottom: 58px;
}

.section-head h2,
.page-title {
    font-size: clamp(2.5rem, 4.5vw, 4.7rem);
    line-height: 1;
    letter-spacing: -2.8px;
    margin: 13px 0;
}

.section-head h2 span,
.page-title span {
    color: var(--blue);
}

.section-head p {
    max-width: 450px;
    color: var(--muted);
    line-height: 1.75;
    margin: 0;
}


/* ========================================
   Cards Section
======================================== */
.cards {
    background: var(--soft);
}


/* ========================================
   Service Card
======================================== */
.service {
    height: 100%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 26px;
    padding: 38px;
    position: relative;
    overflow: hidden;
    transition: 0.35s;
}


/* Service Card Top Border */
.service::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    background: #dfe4e8;
}


/* Service Card Hover */
.service:hover {
    transform: translateY(-9px);
    box-shadow: var(--shadow);
}

.service:hover::before {
    background: var(--orange);
}


/* ========================================
   Service Icon
======================================== */
.icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #edf5fb;
    color: var(--blue);
    display: grid;
    place-items: center;
    font-size: 27px;
    margin: 27px 0;
}


/* ========================================
   Service Content
======================================== */
.service h3 {
    font-size: 27px;
    letter-spacing: -1px;
}

.service p,
.service li {
    color: var(--muted);
    line-height: 1.7;
}


/* Service List */
.service ul {
    list-style: none;
    padding: 0;
    margin: 24px 0 30px;
}

.service li {
    padding: 10px 0;
    border-bottom: 1px solid #edf0f2;
    font-size: 14px;
}

.service li::before {
    content: "✓";
    color: var(--orange);
    font-weight: 900;
    margin-right: 9px;
}


/* ========================================
   Dark Band Section
======================================== */
.dark-band {
    background: var(--black);
    color: #fff;
    padding: 105px 0;
}

.dark-band h2 {
    font-size: clamp(2.6rem, 5vw, 5.1rem);
    line-height: 1;
    letter-spacing: -3px;
}

.dark-band h2 span {
    color: var(--orange);
}

.dark-band p {
    color: #99a3ac;
    line-height: 1.8;
    max-width: 650px;
}


/* ========================================
   Process
======================================== */
.process {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}


/* Process Step */
.step {
    padding: 38px 28px;
    border-right: 1px solid var(--line);
}

.step:last-child {
    border-right: 0;
}


/* Step Number */
.step span {
    color: var(--orange);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
}


/* Step Icon */
.step i {
    display: block;
    color: var(--blue);
    font-size: 32px;
    margin: 27px 0 19px;
}


/* Step Description */
.step p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
}


/* ========================================
   Inner Hero
======================================== */
.inner-hero {
    padding: 170px 0 105px;
    color: #fff;
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        120deg,
        #070707 45%,
        #282e33
    );
}


/* Inner Hero Decorative Circle */
.inner-hero::before {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    right: -300px;
    top: -280px;
    background: radial-gradient(
        circle,
        rgba(251, 100, 53, 0.25),
        transparent 67%
    );
}


/* Inner Hero Container */
.inner-hero .container {
    position: relative;
    z-index: 2;
}


/* ========================================
   Breadcrumbs
======================================== */
.breadcrumbs {
    font-size: 12px;
    color: #858f98;
    margin-bottom: 20px;
}

.breadcrumbs a {
    color: #fff;
}


/* Inner Hero Description */
.inner-hero p {
    max-width: 690px;
    color: #b7c0c7;
    font-size: 18px;
    line-height: 1.75;
}


/* ========================================
   About Box
======================================== */
.about-box {
    background: var(--soft);
    border-radius: 30px;
    padding: 50px;
}

.about-box h3 {
    font-size: 30px;
    margin-bottom: 17px;
}

.about-box > p {
    color: var(--muted);
    line-height: 1.8;
}


/* ========================================
   Features
======================================== */
.feature {
    display: flex;
    gap: 18px;
    margin: 24px 0;
}

.feature i {
    color: var(--orange);
    font-size: 23px;
}

.feature b {
    font-size: 15px;
}

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


/* ========================================
   Call To Action
======================================== */
.cta {
    background: var(--blue);
    color: #fff;
    padding: 90px 0;
}

.cta h2 {
    font-size: clamp(2.6rem, 5vw, 5rem);
    line-height: 1;
    letter-spacing: -3px;
}

.cta h2 span {
    color: #bce1ff;
}

.cta p {
    color: #c6e2f6;
}


/* ========================================
   Form Controls
======================================== */
.form-control,
.form-select {
    border: 1px solid #dce1e5;
    border-radius: 12px;
    padding: 13px 15px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 0.2rem rgba(0, 97, 176, 0.12);
}


/* ========================================
   Footer
======================================== */
.footer {
    background: #070707;
    color: #fff;
    padding: 70px 0 23px;
}


/* Footer Logo */
.footer img {
    width: 220px;
}


/* Footer Text & Links */
.footer p,
.footer a {
    color: #78828b;
    font-size: 13px;
    line-height: 1.7;
}

.footer a {
    display: block;
    margin: 8px 0;
}

.footer a:hover {
    color: #fff;
}

/* Footer Headings */
.footer h6 {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 11px;
    margin-bottom: 18px;
}
/* ========================================
   Social Links
======================================== */
.social a {
    display: inline-grid !important;
    width: 39px;
    height: 39px;
    border: 1px solid #282e34;
    border-radius: 50%;
    place-items: center;
    margin: 5px 6px 0 0;
}

.social a:hover {
    background: var(--orange);
    border-color: var(--orange);
}

/* ========================================
   Footer Bottom
======================================== */
.bottom {
    border-top: 1px solid #20252a;
    margin-top: 50px;
    padding-top: 20px;
    color: #59636c;
    font-size: 11px;
    display: flex;
    justify-content: space-between;
}


/* Branding profile */

/* ========================================
   Branding Page - Inner Hero
======================================== */
.branding-page .inner-hero {
    min-height: 620px;
    display: flex;
    align-items: center;
    background: #070707;
}


/* Large Background "BRANDING" Text */
.branding-page .inner-hero::after {
    content: "BRANDING";
    position: absolute;
    right: -35px;
    bottom: -105px;
    font: 800 clamp(110px, 19vw, 270px) Manrope;
    color: rgba(255, 255, 255, 0.035);
    letter-spacing: -15px;
    line-height: 1;
}


/* ========================================
   Branding Hero Grid
======================================== */
.branding-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.08) 1px,
            transparent 1px
        );
    background-size: 55px 55px;
    opacity: 0.16;
}


/* ========================================
   Branding Hero Content
======================================== */
.branding-hero-content {
    position: relative;
    z-index: 3;
}

.branding-hero-content .page-title {
    font-size: clamp(3.3rem, 7vw, 7rem);
    letter-spacing: -4px;
}

.branding-hero-content .page-title span {
    color: var(--orange);
}


/* ========================================
   Hero Tag
======================================== */
.hero-tag {
    display: inline-flex;
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: #b9c1c8;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 20px;
}


/* ========================================
   Branding Introduction
======================================== */
.branding-intro {
    padding: 100px 0;
}


/* Intro Number */
.intro-number {
    font: 800 110px/1 Manrope;
    color: #f0f3f5;
    letter-spacing: -8px;
}


/* Intro Title */
.intro-title {
    font-size: clamp(2.2rem, 4vw, 4.2rem);
    line-height: 1.05;
    letter-spacing: -2.5px;
}

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


/* Intro Copy */
.intro-copy {
    font-size: 16px;
    color: var(--muted);
    line-height: 1.85;
}



/* ========================================
   Profile Statistics
======================================== */

/* ========================================
   Profile Statistics
   Desktop: 3 Columns
======================================== */
.profile-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 35px;
}


/* ========================================
   Mobile: 2 Columns
======================================== */
@media (max-width: 575px) {
    .profile-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


.profile-stat {
    background: #f5f7f9;
    border-radius: 18px;
    padding: 22px;
}

.profile-stat b {
    display: block;
    font: 800 28px Manrope;
    color: var(--blue);
}

.profile-stat small {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #78838d;
}


/* ========================================
   Mission Section
======================================== */
.mission-grid {
    background: #f5f7f9;
    padding: 100px 0;
}


/* Mission Card */
.mission-card {
    height: 100%;
    background: #fff;
    border-radius: 25px;
    padding: 42px;
    border: 1px solid #00000009;
}


/* Dark Mission Card */
.mission-card.dark {
    background: #070707;
    color: #fff;
}


/* Mission Icon */
.mission-card .big-icon {
    font-size: 35px;
    color: var(--orange);
    margin-bottom: 28px;
}


/* Mission Heading */
.mission-card h3 {
    font-size: 30px;
}


/* Mission Text */
.mission-card p {
    color: var(--muted);
    line-height: 1.8;
}


/* Dark Mission Text */
.mission-card.dark p {
    color: #929ba3;
}

.mission-card.dark h3 {
    color: #fff;
}


/* ========================================
   Branding Services
======================================== */
.branding-services {
    padding: 110px 0;
    background: #fff;
}


/* ========================================
   Service Matrix
======================================== */
.service-matrix {
    margin-top: 55px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #dfe4e8;
    border: 1px solid #dfe4e8;
}


/* Matrix Item */
.matrix-item {
    background: #fff;
    padding: 28px;
    min-height: 190px;
    transition: 0.3s;
}

.matrix-item:hover {
    background: #f7fafc;
}


/* Matrix Icon */
.matrix-icon {
    width: 45px;
    height: 45px;
    border-radius: 13px;
    background: #edf5fb;
    color: var(--blue);
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    font-size: 20px;
}


/* Matrix Heading */
.matrix-item h4 {
    font-size: 18px;
    margin-bottom: 8px;
}


/* Matrix Description */
.matrix-item p {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.65;
    margin: 0;
}


/* ========================================
   Profile Process Section
======================================== */
.process-profile {
    padding: 105px 0;
    background: #f5f7f9;
}


/* Process Grid */
.process-profile .process {
    background: #fff;
    border-radius: 25px;
    overflow: hidden;
    border: 1px solid #e1e5e8;
    grid-template-columns: repeat(3, 1fr);
}


/* Process Step */
.process-profile .step {
    min-height: 230px;
}


/* Remove Right Border From Third Step */
.process-profile .step:nth-child(3) {
    border-right: 0;
}


/* Bottom Border For First Three Steps */
.process-profile .step:nth-child(-n+3) {
    border-bottom: 1px solid var(--line);
}


/* ========================================
   DMAIC Section
======================================== */
.dmaic {
    margin-top: 45px;
    background: #070707;
    color: #fff;
    border-radius: 26px;
    padding: 40px;
}


/* DMAIC Heading */
.dmaic h3 {
    font-size: 28px;
}


/* DMAIC Description */
.dmaic p {
    color: #919aa2;
    line-height: 1.75;
}


/* DMAIC List */
.dmaic-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}


/* DMAIC List Items */
.dmaic-list span {
    padding: 10px 14px;
    border: 1px solid #ffffff18;
    border-radius: 999px;
    color: #c3cad0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* Active DMAIC Item */
.dmaic-list span:first-child {
    border-color: var(--orange);
    color: var(--orange);
}


/* ========================================
   Projects Profile Section
======================================== */
.projects-profile {
    padding: 110px 0;
}


/* Project Mosaic */
.project-mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-top: 50px;
}



/* ========================================
   Project Frame
======================================== */
.project-frame {
    border-radius: 24px;
    overflow: hidden;
    background: #f4f5f6;
    border: 1px solid #0000000d;
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.08);
}


/* Project Image */
.project-frame img {
    display: block;
    width: 100%;
    height: auto;
    transition: 0.5s;
}


/* Project Image Hover */
.project-frame:hover img {
    transform: scale(1.025);
}


/* ========================================
   Equipment Profile Section
======================================== */
.equipment-profile {
    padding: 100px 0;
    background: #f5f7f9;
}


/* Equipment Image */
.equipment-image {
    border-radius: 26px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2e6e9;
    box-shadow: var(--shadow);
}

.equipment-image img {
    width: 100%;
    display: block;
}


/* ========================================
   Equipment List
======================================== */
.equipment-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 28px;
}


/* Equipment Pill */
.equipment-pill {
    padding: 14px 16px;
    border-radius: 13px;
    background: #fff;
    border: 1px solid #e3e7ea;
    font-size: 12px;
    font-weight: 700;
}

.equipment-pill i {
    color: var(--orange);
    margin-right: 8px;
}


/* ========================================
   Branding Contact Section
======================================== */
.branding-contact {
    padding: 90px 0;
    background: var(--blue);
    color: #fff;
}


/* Contact Heading */
.branding-contact h2 {
    font-size: clamp(2.5rem, 5vw, 5rem);
    letter-spacing: -3px;
    line-height: 1;
}

.branding-contact h2 span {
    color: #bce1ff;
}


/* Contact Description */
.branding-contact p {
    color: #c5e2f6;
    max-width: 650px;
    line-height: 1.8;
}


/* ========================================
   Contact Details
======================================== */
.contact-details {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}

.contact-details a {
    color: #fff;
    font-weight: 700;
}

.contact-details i {
    color: var(--orange);
    margin-right: 8px;
}



/* ========================================
   Responsive Styles
   Max Width: 991px
======================================== */
@media (max-width: 991px) {

    /* ----------------------------------------
       Navbar
    ---------------------------------------- */
    .navbar-collapse {
        background: #090909;
        padding: 14px;
        border-radius: 0 0 18px 18px;
    }

    .nav-link.active::after {
        display: none;
    }


    /* ----------------------------------------
       Hero Section
    ---------------------------------------- */
    .hero {
        padding-top: 135px;
    }

    .hero-art {
        display: none;
    }


    /* ----------------------------------------
       General Sections
    ---------------------------------------- */
    .section {
        padding: 85px 0;
    }

    .section-head {
        display: block;
    }

    .section-head p {
        margin-top: 20px;
    }


    /* ----------------------------------------
       Process
    ---------------------------------------- */
    .process {
        grid-template-columns: 1fr 1fr;
    }

    .step:nth-child(2) {
        border-right: 0;
    }

    .step:nth-child(-n + 2) {
        border-bottom: 1px solid var(--line);
    }


    /* ----------------------------------------
       Branding Inner Hero
    ---------------------------------------- */
    .branding-page .inner-hero {
        min-height: 570px;
    }


    /* ----------------------------------------
       Service Matrix
    ---------------------------------------- */
    .service-matrix {
        grid-template-columns: repeat(2, 1fr);
    }


    /* ----------------------------------------
       Profile Process
    ---------------------------------------- */
    .process-profile .process {
        grid-template-columns: 1fr 1fr;
    }

    .process-profile .step:nth-child(2n) {
        border-right: 0;
    }

    .process-profile .step:nth-child(-n + 4) {
        border-bottom: 1px solid var(--line);
    }


    /* ----------------------------------------
       Project Mosaic
    ---------------------------------------- */
    .project-mosaic {
        grid-template-columns: 1fr;
    }


    /* ----------------------------------------
       Intro Number
    ---------------------------------------- */
    .intro-number {
        font-size: 80px;
    }
}


/* ========================================
   Mobile Responsive Styles
   Max Width: 575px
======================================== */
@media (max-width: 575px) {

    /* ----------------------------------------
       Navbar / Brand
    ---------------------------------------- */
    .brand {
        width: 175px;
    }


    /* ----------------------------------------
       Hero Section
    ---------------------------------------- */
    .hero h1 {
        letter-spacing: -2px;
    }

    .hero p {
        font-size: 16px;
    }


    /* ----------------------------------------
       Section Headings
    ---------------------------------------- */
    .section-head h2,
    .page-title {
        letter-spacing: -1.5px;
    }


    /* ----------------------------------------
       Service Cards
    ---------------------------------------- */
    .service {
        padding: 30px;
    }


    /* ----------------------------------------
       About Box
    ---------------------------------------- */
    .about-box {
        padding: 30px 24px;
    }


    /* ----------------------------------------
       Process
    ---------------------------------------- */
    .process {
        grid-template-columns: 1fr;
    }

    .step,
    .step:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .step:last-child {
        border-bottom: 0;
    }


    /* ----------------------------------------
       Footer Bottom
    ---------------------------------------- */
    .bottom {
        display: block;
    }

    .bottom span:last-child {
        display: block;
        margin-top: 8px;
    }


    /* ----------------------------------------
       CTA
    ---------------------------------------- */
    .cta h2 {
        letter-spacing: -1.5px;
    }


    /* ----------------------------------------
       Branding Inner Hero
    ---------------------------------------- */
    .branding-page .inner-hero {
        min-height: 560px;
    }

    .branding-hero-content .page-title {
        letter-spacing: -2px;
    }


    /* ----------------------------------------
       Service Matrix
    ---------------------------------------- */
    .service-matrix {
        grid-template-columns: 1fr;
    }

    .matrix-item {
        min-height: auto;
    }


    /* ----------------------------------------
       Profile / Branding Sections
    ---------------------------------------- */
    .mission-grid,
    .branding-services,
    .process-profile,
    .projects-profile,
    .equipment-profile {
        padding: 75px 0;
    }


    /* ----------------------------------------
       Profile Process
    ---------------------------------------- */
    .process-profile .process {
        grid-template-columns: 1fr;
    }

    .process-profile .step,
    .process-profile .step:nth-child(2n) {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .process-profile .step:last-child {
        border-bottom: 0;
    }


    /* ----------------------------------------
       Equipment List
    ---------------------------------------- */
    .equipment-list {
        grid-template-columns: 1fr;
    }


    /* ----------------------------------------
       DMAIC
    ---------------------------------------- */
    .dmaic {
        padding: 30px 24px;
    }


    /* ----------------------------------------
       Contact Details
    ---------------------------------------- */
    .contact-details {
        display: block;
    }

    .contact-details a {
        display: block;
        margin: 12px 0;
    }
}



/* Digital Marketing design code */

.dm-hero{padding:165px 0 105px;background:#070707;color:#fff;position:relative;overflow:hidden}
.dm-hero:before{content:"";position:absolute;width:760px;height:760px;right:-330px;top:-330px;border-radius:50%;background:radial-gradient(circle,rgba(0,97,176,.38),transparent 68%)}
.dm-hero:after{content:"";position:absolute;width:500px;height:500px;left:-300px;bottom:-330px;border-radius:50%;background:radial-gradient(circle,rgba(251,100,53,.23),transparent 68%)}
.dm-grid{position:absolute;inset:0;opacity:.13;background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px);background-size:64px 64px}
.dm-hero .container{position:relative;z-index:2}
.dm-hero h1{font-size:clamp(3rem,6vw,6.2rem);line-height:.94;letter-spacing:-4px;margin:20px 0}
.dm-hero h1 span{color:var(--orange)}
.dm-hero p{max-width:690px;color:#aeb8c0;font-size:18px;line-height:1.8}
.dm-dashboard{height:455px;position:relative}
.dm-board{position:absolute;left:50%;top:50%;width:min(470px,95%);transform:translate(-50%,-50%) rotate(1deg);background:#10151b;border:1px solid rgba(255,255,255,.12);border-radius:22px;box-shadow:0 35px 90px #000b;padding:20px}
.dm-board-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.dm-board-title{font-size:11px;font-weight:800;color:#e7ebee}
.dm-live{font-size:9px;color:#8fd0a8;border:1px solid #355342;border-radius:999px;padding:5px 9px}
.dm-chart{height:150px;border:1px solid #252d34;border-radius:14px;padding:17px;position:relative;background:linear-gradient(180deg,#121920,#0d1116)}
.dm-chart:after{content:"";position:absolute;inset:18px;background:linear-gradient(150deg,transparent 0 45%,rgba(0,97,176,.18) 45% 46%,transparent 46% 57%,rgba(251,100,53,.22) 57% 58%,transparent 58%);clip-path:polygon(0 78%,12% 66%,24% 70%,35% 42%,48% 55%,61% 31%,73% 42%,86% 17%,100% 25%,100% 100%,0 100%)}
.dm-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.dm-metric{background:#151b21;border:1px solid #242c33;border-radius:12px;padding:12px}
.dm-metric small{display:block;color:#6f7b84;font-size:8px;text-transform:uppercase;letter-spacing:1px}
.dm-metric b{display:block;color:#fff;font:800 21px "Manrope";margin-top:4px}
.dm-metric em{font-style:normal;color:#6ec58d;font-size:9px}
.dm-floating{position:absolute;background:#fff;color:#111;border-radius:14px;padding:13px 16px;box-shadow:0 18px 50px #0009;font-weight:800;font-size:11px}
.dm-floating i{color:var(--orange);margin-right:7px}.df1{top:38px;right:-3px}.df2{bottom:40px;left:-4px}.df3{bottom:5px;right:45px}

.dm-intro{background:#f5f7fa}
.dm-service-card{height:100%;background:#fff;border:1px solid #e5e9ed;border-radius:28px;padding:35px;position:relative;overflow:hidden;transition:.35s}
.dm-service-card:hover{transform:translateY(-8px);box-shadow:0 25px 70px rgba(7,16,28,.12)}
.dm-service-card:after{content:"";position:absolute;width:170px;height:170px;right:-90px;top:-90px;border-radius:50%;background:#0061b00a}
.dm-number{font-size:10px;font-weight:900;letter-spacing:2px;color:#9ca5ad}
.dm-icon{width:68px;height:68px;border-radius:20px;display:grid;place-items:center;background:#edf6fc;color:var(--blue);font-size:29px;margin:27px 0}
.dm-service-card:nth-child(even) .dm-icon{background:#fff0eb;color:var(--orange)}
.dm-service-card h3{font-size:25px;letter-spacing:-1px}
.dm-service-card p{color:var(--muted);line-height:1.75;font-size:14px}
.dm-list{list-style:none;padding:0;margin:22px 0 0}
.dm-list li{padding:9px 0;border-top:1px solid #edf0f2;font-size:12px;color:#4e5861}
.dm-list i{color:var(--orange);margin-right:7px}

.dm-detail{padding:110px 0}
.detail-block{padding:60px 0;border-top:1px solid #e7eaed}
.detail-block:last-child{border-bottom:1px solid #e7eaed}
.detail-icon{width:76px;height:76px;border-radius:22px;background:#edf6fc;color:var(--blue);display:grid;place-items:center;font-size:32px;margin:22px 0}
.detail-block:nth-child(odd) .detail-icon{background:#fff0eb;color:var(--orange)}
.detail-block h3{font-size:clamp(2.1rem,3.3vw,3.5rem);letter-spacing:-2px}
.detail-block h3 span{color:var(--blue)}
.detail-block p{color:var(--muted);line-height:1.85}
.detail-points{display:grid;grid-template-columns:1fr 1fr;gap:12px;list-style:none;padding:0}
.detail-points li{padding:14px;border:1px solid #e7ebee;border-radius:14px;font-size:12px;color:#46515a;background:#fff}
.detail-points i{color:var(--orange);margin-right:7px}
.strategy-visual{min-height:330px;border-radius:28px;background:#070707;position:relative;overflow:hidden;padding:28px}
.strategy-ring{width:245px;height:245px;border:1px solid #30404c;border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.strategy-ring:before,.strategy-ring:after{content:"";position:absolute;border:1px solid #22303a;border-radius:50%;inset:35px}.strategy-ring:after{inset:70px;border-color:#3b4e5d}
.strategy-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:90px;height:90px;border-radius:50%;display:grid;place-items:center;text-align:center;background:var(--blue);color:#fff;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:1px;box-shadow:0 0 50px #0061b066}
.strategy-label{position:absolute;padding:10px 13px;border:1px solid #29343d;background:#10161b;border-radius:12px;color:#b9c1c7;font-size:9px;font-weight:800}.sl1{top:30px;left:28px}.sl2{top:30px;right:28px}.sl3{bottom:30px;left:28px}.sl4{bottom:30px;right:28px}

.funnel-visual{min-height:330px;background:#f7f9fa;border:1px solid #e4e8eb;border-radius:28px;display:flex;align-items:center;justify-content:center;padding:30px}
.funnel{width:80%;max-width:390px}
.funnel-row{height:48px;margin:7px auto;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:#fff;letter-spacing:.5px;background:var(--blue)}
.funnel-row:nth-child(2){width:82%;background:#ef8013}.funnel-row:nth-child(3){width:64%;background:#000000}.funnel-row:nth-child(4){width:46%;background:var(--orange)}
.platforms{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.platform{padding:11px 15px;border:1px solid #e4e8eb;border-radius:999px;font-size:11px;font-weight:800;background:#fff}.platform i{color:var(--orange);margin-right:6px}

.ads-section{padding:105px 0;background:#070707;color:#fff}
.ads-section h2{font-size:clamp(2.6rem,4.8vw,4.8rem);line-height:1;letter-spacing:-2.5px}
.ads-section h2 span{color:var(--orange)}
.ads-section p{color:#929ca5;line-height:1.8}
.ads-card{height:100%;border:1px solid rgba(255,255,255,.11);background:#10151b;border-radius:25px;padding:30px}
.ads-card i{font-size:30px;color:var(--orange)}
.ads-card h4{margin:20px 0 10px;font-size:18px}.ads-card p{font-size:12px;margin:0}
.dm-process{display:grid;grid-template-columns:repeat(5,1fr);margin-top:55px;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.dm-step{padding:29px 20px;border-right:1px solid rgba(255,255,255,.12)}.dm-step:last-child{border-right:0}
.dm-step span{color:var(--orange);font-size:10px;font-weight:900;letter-spacing:2px}.dm-step i{display:block;color:#6fbef1;font-size:25px;margin:22px 0 14px}.dm-step h5{font-size:15px}.dm-step p{font-size:11px;margin:0}

@media(max-width:991px){.dm-hero{padding-top:135px}.dm-dashboard{display:none}.dm-process{grid-template-columns:1fr 1fr}.dm-step:nth-child(2),.dm-step:nth-child(4){border-right:0}.dm-step:nth-child(-n+3){border-bottom:1px solid rgba(255,255,255,.12)}}
@media(max-width:575px){.dm-hero h1{letter-spacing:-2px}.dm-hero p{font-size:16px}.dm-service-card{padding:29px}.detail-points{grid-template-columns:1fr}.dm-detail{padding:75px 0}.detail-block{padding:40px 0}.strategy-visual,.funnel-visual{min-height:270px}.dm-process{grid-template-columns:1fr}.dm-step,.dm-step:nth-child(2),.dm-step:nth-child(4){border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}.dm-step:last-child{border-bottom:0}}



/* Software Development page enhancements */
.dev-hero{padding:165px 0 105px;background:#070707;color:#fff;position:relative;overflow:hidden}
.dev-hero:before{content:"";position:absolute;width:700px;height:700px;right:-300px;top:-260px;border-radius:50%;background:radial-gradient(circle,rgba(0,97,176,.35),transparent 68%)}
.dev-hero:after{content:"";position:absolute;width:480px;height:480px;left:-260px;bottom:-300px;border-radius:50%;background:radial-gradient(circle,rgba(251,100,53,.22),transparent 68%)}
.dev-hero .container{position:relative;z-index:2}
.dev-grid{position:absolute;inset:0;opacity:.13;background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px);background-size:62px 62px}
.dev-hero h1{font-size:clamp(3rem,6vw,6rem);line-height:.96;letter-spacing:-4px;margin:20px 0}
.dev-hero h1 span{color:var(--orange)}
.dev-hero p{max-width:680px;color:#aeb8c0;font-size:18px;line-height:1.8}
.dev-hero-visual{min-height:480px;position:relative}
.code-window{position:absolute;left:50%;top:50%;width:min(470px,95%);transform:translate(-50%,-50%) rotate(-2deg);background:#10151b;border:1px solid rgba(255,255,255,.12);border-radius:20px;box-shadow:0 35px 90px rgba(0,0,0,.55);overflow:hidden}
.code-top{height:42px;background:#171d24;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;padding:0 15px;gap:7px}
.code-dot{width:9px;height:9px;border-radius:50%;background:#65707a}.code-title{margin-left:10px;color:#69747e;font-size:10px}
.code-body{padding:25px;font-family:monospace;font-size:12px;line-height:2;color:#9da8b1}
.code-body .orange{color:var(--orange)}.code-body .blue{color:#55aef0}.code-body .white{color:#fff}
.dev-floating{position:absolute;background:#fff;color:#111;border-radius:14px;padding:13px 17px;box-shadow:0 18px 50px #0009;font-weight:800;font-size:12px}
.dev-floating i{color:var(--orange);margin-right:7px}.df1{top:45px;right:0}.df2{bottom:48px;left:5px}.df3{bottom:5px;right:50px}

.dev-services{background:#f5f7fa}
.service-intro{max-width:730px;color:var(--muted);line-height:1.8;font-size:16px}
.dev-card{height:100%;position:relative;background:#fff;border:1px solid #e6eaee;border-radius:28px;padding:38px;overflow:hidden;transition:.35s}
.dev-card:hover{transform:translateY(-8px);box-shadow:0 25px 70px rgba(7,16,28,.12)}
.dev-card:after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-70px;top:-70px;background:#0061b00b}
.dev-card .number{font-size:11px;font-weight:900;color:#9aa4ad;letter-spacing:2px}
.dev-icon{width:68px;height:68px;border-radius:19px;background:#edf6fc;color:var(--blue);display:grid;place-items:center;font-size:29px;margin:28px 0}
.dev-card:nth-child(2) .dev-icon{background:#fff0eb;color:var(--orange)}
.dev-card h3{font-size:26px;letter-spacing:-1px;margin-bottom:14px}
.dev-card h3 span{color:var(--blue)}
.dev-card>p{color:var(--muted);line-height:1.7;min-height:86px}
.dev-points{list-style:none;padding:0;margin:25px 0 0}
.dev-points li{padding:11px 0;border-top:1px solid #edf0f2;color:#4f5962;font-size:13px}
.dev-points li i{color:var(--orange);margin-right:8px}

.solution-section{padding:110px 0;background:#fff}
.solution-row{padding:55px 0;border-top:1px solid #e7eaed}
.solution-row:last-child{border-bottom:1px solid #e7eaed}
.solution-row:nth-child(even){background:#fafbfc}
.solution-number{font:800 58px "Manrope";color:#e7edf2;line-height:1}
.solution-icon{width:72px;height:72px;border-radius:20px;background:#eef6fc;color:var(--blue);display:grid;place-items:center;font-size:30px;margin:22px 0}
.solution-row:nth-child(3) .solution-icon,.solution-row:nth-child(5) .solution-icon{background:#fff0eb;color:var(--orange)}
.solution-row h3{font-size:clamp(2rem,3vw,3rem);letter-spacing:-1.5px}
.solution-row h3 span{color:var(--blue)}
.solution-row p{color:var(--muted);line-height:1.8}
.solution-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0;list-style:none}
.solution-list li{background:#fff;border:1px solid #e8ecef;border-radius:13px;padding:13px;color:#3e4851;font-size:13px}
.solution-list li i{color:var(--orange);margin-right:7px}
.solution-visual{min-height:330px;border-radius:28px;background:#070707;position:relative;overflow:hidden;display:grid;place-items:center}
.solution-visual:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,97,176,.25),transparent 55%,rgba(251,100,53,.2))}
.mockup{position:relative;width:72%;height:220px;background:#f7f8fa;border-radius:15px;border:5px solid #252b31;box-shadow:0 25px 55px #0009;padding:18px}
.mockup .bar{height:10px;width:45%;background:#d8dee3;border-radius:10px;margin-bottom:18px}
.mockup .line{height:8px;background:#dfe4e8;border-radius:10px;margin:10px 0}
.mockup .line.short{width:60%}.mockup .boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}.mockup .box{height:70px;background:#eaf2f8;border-radius:8px}.mockup .box:nth-child(2){background:#fff0eb}

.tech-section{background:#070707;color:#fff;padding:105px 0}
.tech-section h2{font-size:clamp(2.5rem,4.5vw,4.5rem);line-height:1;letter-spacing:-2.5px}
.tech-section h2 span{color:var(--orange)}
.tech-section p{color:#929ca5;line-height:1.8}
.tech-pills{display:flex;flex-wrap:wrap;gap:12px;margin-top:35px}
.tech-pill{padding:12px 18px;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:#c1c8ce;font-size:12px;background:#fff6}
.tech-pill i{color:var(--orange);margin-right:7px}
.dev-process{display:grid;grid-template-columns:repeat(5,1fr);margin-top:55px;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.dev-step{padding:30px 22px;border-right:1px solid rgba(255,255,255,.12)}
.dev-step:last-child{border-right:0}
.dev-step span{color:var(--orange);font-size:10px;font-weight:900;letter-spacing:2px}
.dev-step i{display:block;font-size:25px;color:#73bff5;margin:25px 0 15px}
.dev-step h4{font-size:16px}.dev-step p{font-size:12px;margin:0}

@media(max-width:991px){
 .dev-hero{padding-top:135px}.dev-hero-visual{display:none}
 .solution-list{grid-template-columns:1fr}
 .dev-process{grid-template-columns:1fr 1fr}
 .dev-step:nth-child(2),.dev-step:nth-child(4){border-right:0}
 .dev-step:nth-child(-n+3){border-bottom:1px solid rgba(255,255,255,.12)}
}
@media(max-width:575px){
 .dev-hero h1{letter-spacing:-2px}.dev-hero p{font-size:16px}
 .dev-card{padding:29px}.dev-card>p{min-height:auto}
 .solution-section{padding:75px 0}.solution-row{padding:38px 0}
 .solution-visual{min-height:250px}.mockup{width:82%;height:165px}
 .mockup .boxes .box{height:48px}
 .dev-process{grid-template-columns:1fr}
 .dev-step,.dev-step:nth-child(2),.dev-step:nth-child(4){border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}
 .dev-step:last-child{border-bottom:0}
}