/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

* {

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


html {
    scroll-behavior: smooth;
}


body {
    font-family: "Poppins", sans-serif;
    background: #050505;
    color: white;
}


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

.navbar {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    height: 100px;

    display: flex;

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

    padding: 0 1%;

    z-index: 8;

    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* LOGO */
.logo {
    font-size: 10px;
 
    font-weight: 800;

    letter-spacing: 1px;
}


.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    
}

.logo img {
    width: 100px;
    height: 100px;
    object-fit: contain;
  
   
}

.logo > span {
    font-size: 24px;
    font-weight: 700;
    color: white;
    white-space: nowrap;
}

.logo > span span {
    color: #e63946;
}

.logo span {
    color: #00bfff;
}


nav {
    display: flex;
 margin-right: 12%;
    gap: 35px;
}


nav a {
    color: #fa0606;

    text-decoration: none;

    font-size: 20px;

    transition: 0.3s;
}


nav a:hover {
    color: #00bfff;
}
.navbar nav a.active {
    color: #00bfff;
    position: relative;
}
/* ==============================
   WHATSAPP - RIGHT CENTER
================================ */

.whatsapp-float {
    position: fixed !important;

    left: 20px;
    top: 50%;

    transform: translateY(-50%);

    width: 55px;
    height: 55px;

    background: #25D366;
    color: #ffffff;

    border-radius: 50%;

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

    text-decoration: none;

    font-size: 30px;

    z-index: 99999;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);

    transition: 0.3s ease;
}

.whatsapp-float:hover {
    transform: translateY(-50%) scale(1.1);
}


/* Mobile */
@media (max-width: 768px) {

    .whatsapp-float {
        right: 12px;

        width: 48px;
        height: 48px;

        font-size: 26px;
    }
}

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

.hero {

    position: relative;

    width: 100%;

    height: 100vh;

    min-height: 650px;


    /* Mechanical Image */

    background-image:
        url("images/Mecima.png");


    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;


    display: flex;

    align-items: center;

    padding: 0 8%;

}


/* DARK OVERLAY */

.overlay {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;


    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0.95) 0%,
            rgba(0,0,0,0.75) 40%,
            rgba(0,0,0,0.25) 100%
        );

}


/* HERO CONTENT */

.hero-content {

    position: relative;

    z-index: 2;

    max-width: 750px;

}


.tag {

    color: #ee2d06;

    font-size: 13px;

    letter-spacing: 3px;

    margin-bottom: 20px;

}


.hero h1 {

    font-size: clamp(50px, 6vw, 90px);

    line-height: 1.05;
color: #ee2d06;
    font-weight: 800;

    margin-bottom: 25px;

}


.hero h1 span {

    color: #ffffff;

}


.description {

    max-width: 600px;

    color: #d0d0d0;

    font-size: 17px;

    line-height: 1.8;

}


/* BUTTONS */

.buttons {

    display: flex;

    gap: 15px;

    margin-top: 35px;

}


.btn {

    padding: 15px 30px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition: 0.3s;

}


.primary {

    background: #00bfff;

    color: #000;

}


.primary:hover {

    background: white;

    transform: translateY(-4px);

}


.secondary {

    border: 1px solid white;

    color: white;

}


.secondary:hover {

    background: white;

    color: black;

}


/* SCROLL DOWN */

.scroll {

    position: absolute;

    bottom: 35px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 2;

    font-size: 12px;

    letter-spacing: 2px;

    color: #ccc;

}


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

@media (max-width: 768px) {

    .navbar {

        padding: 0 5%;

    }


    nav {

        gap: 15px;

    }


    nav a {

        font-size: 12px;

    }


    .hero {

        padding: 0 7%;

        background-position: 65% center;

    }


    .overlay {

        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,0.90),
                rgba(0,0,0,0.55)
            );

    }


    .hero h1 {

        font-size: 48px;

    }


    .description {

        font-size: 14px;

    }


    .buttons {

        flex-direction: column;

        align-items: flex-start;

    }

}
/* =====================================================
   DESIGN & PRECISION SECTION
===================================================== */

.design-section {

    width: 100%;

    padding: 50px 5%;

    background: #ffffff;

    position: relative;

    overflow: hidden;

}


/* =====================================================
   BACKGROUND DECORATION
===================================================== */

.design-section::before {

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    border: 1px solid rgba(0, 102, 204, 0.07);

    border-radius: 50%;

    left: -180px;
    top: 150px;

}

.design-section::after {

    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

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

    border-radius: 50%;

    right: -120px;
    bottom: 100px;

}


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

.design-heading {

    text-align: center;

    max-width: 800px;

    margin: 0 auto 60px;

    position: relative;

    z-index: 2;

}


.design-small-title {

    display: inline-block;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 3px;

    color: #0066cc;

    margin-bottom: 10px;

}


.design-heading h2 {

    margin: 0;

    font-size: 46px;

    font-weight: 800;

    color: #003366;

    letter-spacing: 1px;

}


.design-heading h2 span {

    color: #e63946;

}


.design-heading-line {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    margin: 16px 0;

}


.design-heading-line i {

    width: 9px;

    height: 9px;

    background: #ffcc00;

    border-radius: 50%;

}


.design-heading-line b {

    width: 70px;

    height: 3px;

    background: #0066cc;

    border-radius: 20px;

}


.design-heading p {

    margin: 0;

    color: #667085;

    font-size: 15px;

    line-height: 1.7;

}



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

.design-container {

    width: 100%;

    max-width: 1500px;

    margin: auto;

    display: grid;

    grid-template-columns: 0.85fr 1.15fr;

    gap: 50px;

    align-items: center;

    position: relative;

    z-index: 2;

}



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

.design-info {

    display: flex;

    gap: 20px;

}


.design-number {

    font-size: 50px;

    font-weight: 900;

    line-height: 1;

    color: #eaf2fa;

    writing-mode: vertical-rl;

    transform: rotate(180deg);

}


.design-content {

    flex: 1;

}


.design-label {

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

    color: #0066cc;

}


.design-content h3 {

    margin: 10px 0 12px;

    font-size: 34px;

    line-height: 1.2;

    color: #003366;

}


.design-content h3 strong {

    color: #0066cc;

}


.design-line {

    width: 60px;

    height: 4px;

    background: #e63946;

    border-radius: 10px;

    margin-bottom: 20px;

}


.design-content > p {

    font-size: 14px;

    color: #667085;

    line-height: 1.75;

    margin: 0 0 13px;

}



/* =====================================================
   6 DESIGN FEATURES
===================================================== */

.design-features {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-top: 25px;

}


.design-feature {

    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 67px;

    padding: 9px 10px;

    background: #f8fafc;

    border-left: 3px solid #0066cc;

    transition: all 0.3s ease;

}


.design-feature:hover {

    transform: translateY(-4px);

    background: #ffffff;

    box-shadow:
        0 8px 22px rgba(0, 51, 102, 0.10);

}


.design-feature:nth-child(2),
.design-feature:nth-child(5) {

    border-left-color: #e63946;

}


.design-feature:nth-child(3),
.design-feature:nth-child(6) {

    border-left-color: #f0b400;

}



/* =====================================================
   FEATURE ICON
===================================================== */

.feature-icon {

    width: 38px;

    height: 28px;

    min-width: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 7px;

    background: #0066cc;

    color: #ffffff;

    font-size: 10px;

    font-weight: 500;

}


.feature-icon.red {

    background: #e63946;

}


.feature-icon.yellow {

    background: #f0b400;

    color: #111111;

}



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

.design-feature h4 {

    margin: 0 0 3px;

    color: #003366;

    font-size: 13px;

    line-height: 1.3;

}


.design-feature p {

    margin: 0;

    color: #7b8492;

    font-size: 10px;

    line-height: 1.4;

}



/* =====================================================
   BOTTOM TAG
===================================================== */

.design-tag {

    margin-top: 22px;

    padding-top: 15px;

    border-top: 1px solid #e4e9ef;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

    color: #667085;

}


.design-tag span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #0066cc;

}


.design-tag b {

    color: #e63946;

}



/* =====================================================
   GD&T WRAPPER
===================================================== */

.gdt-wrapper {

    background: #ffffff;

    border: 1px solid #dce3eb;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 20px 50px rgba(0, 51, 102, 0.10);

}



/* =====================================================
   GD&T HEADER
===================================================== */

.gdt-header {

    min-height: 78px;

    padding: 16px 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: #003366;

}


.gdt-header span {

    display: block;

    color: #8ec5ff;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 4px;

}


.gdt-header h3 {

    margin: 0;

    color: #ffffff;

    font-size: 24px;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.gdt-mark {

    width: 65px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #ffcc00;

    color: #ffcc00;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1px;

}



/* =====================================================
   GD&T TABLE
===================================================== */

.gdt-table-container {

    width: 100%;

    overflow-x: auto;

}


.gdt-table {

    width: 100%;

    border-collapse: collapse;

    background: #ffffff;

}


.gdt-table thead th {

    background: #3498db;

    color: #111111;

    font-size: 12px;

    font-weight: 900;

    padding: 11px 8px;

    border: 1px solid #222222;

    text-align: center;

}


.gdt-table td {

    padding: 7px 9px;

    border: 1px solid #222222;

    color: #222222;

    background: #ffffff;

    font-size: 12px;

}


.gdt-table td:first-child {

    width: 18%;

    text-align: center;

    font-size: 21px;

    font-weight: 500;

}


.gdt-table td:nth-child(2) {

    width: 52%;

    font-weight: 500;

}


.gdt-table td:nth-child(3) {

    width: 30%;

    text-align: center;

    font-weight: 700;

    font-size: 11px;

}



/* =====================================================
   CATEGORY COLORS
===================================================== */

.category {

    vertical-align: middle;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}


.category.form {

    background: #f1f8ff;

    color: #0066cc;

}


.category.profile {

    background: #fff7f7;

    color: #e63946;

}


.category.orientation {

    background: #fffbea;

    color: #a87500;

}


.category.location {

    background: #f4faff;

    color: #005ca8;

}


.category.runout {

    background: #fff7f7;

    color: #c92f3d;

}



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

.gdt-table tbody tr {

    transition: 0.2s ease;

}


.gdt-table tbody tr:hover td {

    background: #f4f9fe;

}


.gdt-table tbody tr:hover td:first-child {

    color: #0066cc;

}



/* =====================================================
   GD&T FOOTER
===================================================== */

.gdt-footer {

    min-height: 35px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 30px;

    background: #f7f9fc;

    border-top: 1px solid #dce3eb;

}


.gdt-footer span {

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

    color: #667085;

}


.gdt-footer span:nth-child(2) {

    color: #0066cc;

}


.gdt-footer span:nth-child(3) {

    color: #e63946;

}



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

@media (max-width: 1100px) {

    .design-container {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .design-info {

        max-width: 900px;

        margin: auto;

    }


    .gdt-wrapper {

        max-width: 900px;

        width: 100%;

        margin: auto;

    }

}



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

@media (max-width: 650px) {

    .design-section {

        padding: 70px 18px;

    }


    .design-heading {

        margin-bottom: 40px;

    }


    .design-heading h2 {

        font-size: 34px;

    }


    .design-heading p {

        font-size: 13px;

    }


    .design-info {

        gap: 10px;

    }


    .design-number {

        font-size: 32px;

    }


    .design-content h3 {

        font-size: 28px;

    }


    .design-content > p {

        font-size: 13px;

    }


    /* 6 points become 1 column */

    .design-features {

        grid-template-columns: 1fr;

    }


    .design-tag {

        font-size: 8px;

    }


    .gdt-header {

        padding: 15px;

    }


    .gdt-header h3 {

        font-size: 19px;

    }


    .gdt-mark {

        width: 55px;

        height: 36px;

        font-size: 10px;

    }


    .gdt-table {

        min-width: 600px;

    }


    .gdt-footer {

        gap: 12px;

    }

}
/* =====================================================
   PROJECTION SECTION
===================================================== */

.projection-section {

    width: 100%;

    padding: 30px 5%;

    background: #ffffff;

    position: relative;

    overflow: hidden;

}


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

.projection-heading {

    text-align: center;

    max-width: 850px;

    margin: 0 auto 55px;

}


.projection-heading > span {

    display: inline-block;

    color: #0066cc;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

    margin-bottom: 10px;

}


.projection-heading h2 {

    margin: 0;

    color: #003366;

    font-size: 40px;

    font-weight: 800;

}


.projection-heading h2 b {

    color: #e63946;

    font-weight: 800;

}


.projection-line {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    margin: 15px 0;

}


.projection-line i {

    width: 9px;

    height: 9px;

    background: #ffcc00;

    border-radius: 50%;

}


.projection-line strong {

    width: 70px;

    height: 3px;

    background: #0066cc;

    border-radius: 10px;

}


.projection-heading p {

    margin: 0;

    color: #667085;

    font-size: 14px;

    line-height: 1.7;

}



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

.projection-container {

    width: 100%;

    max-width: 1250px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    background: #ffffff;

    border: 1px solid #d7dfe8;

    box-shadow:
        0 20px 50px rgba(0, 51, 102, 0.10);

}



/* =====================================================
   COLUMNS
===================================================== */

.projection-column {

    background: #ffffff;

    overflow: hidden;

}


.first-angle {

    border-right: 1px solid #222222;

}



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

.projection-title {

    padding: 14px 18px;

    background: #3498db;

    color: #111111;

    font-size: 17px;

    font-weight: 800;

    border-bottom: 1px solid #222222;

}



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

.projection-text {

    min-height: 68px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px 14px;

    background: #ffffff;

    border-bottom: 1px solid #222222;

}


.projection-text span {

    width: 28px;

    height: 28px;

    min-width: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #0066cc;

    color: #ffffff;

    border-radius: 5px;

    font-size: 9px;

    font-weight: 800;

}


.third-angle .projection-text span {

    background: #e63946;

}


.projection-text p {

    margin: 0;

    color: #222222;

    font-size: 13px;

    line-height: 1.45;

}



/* =====================================================
   IMAGE AREA
===================================================== */

.projection-image {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    border-bottom: 1px solid #222222;

    overflow: hidden;

}


.projection-image img {

    display: block;

    max-width: 100%;

    height: auto;

    object-fit: contain;

}



/* =====================================================
   SYMBOL IMAGE
===================================================== */

.symbol-image {

    height: 135px;

    padding: 15px 25px;

}


.symbol-image img {

    max-height: 110px;

}



/* =====================================================
   3D IMAGE
===================================================== */

.large-image {

    height: 190px;

    padding: 12px 20px;

}


.large-image img {

    max-height: 175px;

}



/* =====================================================
   DRAWING IMAGE
===================================================== */

.drawing-image {

    height: 220px;

    padding: 15px 20px;

    border-bottom: none;

}


.drawing-image img {

    max-height: 205px;

}



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

.projection-image img {

    transition: transform 0.4s ease;

}


.projection-image:hover img {

    transform: scale(1.04);

}


.projection-text {

    transition: background 0.3s ease;

}


.projection-text:hover {

    background: #f5f9fd;

}



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

.projection-footer {

    width: 100%;

    max-width: 1250px;

    min-height: 45px;

    margin: auto;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 20px;

    background: #003366;

    color: #ffffff;

}


.projection-footer span {

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.projection-footer b {

    color: #ffcc00;

}



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

@media (max-width: 900px) {

    .projection-section {

        padding: 75px 3%;

    }


    .projection-heading h2 {

        font-size: 34px;

    }


    .projection-text p {

        font-size: 12px;

    }


    .symbol-image {

        height: 120px;

    }


    .large-image {

        height: 170px;

    }


    .drawing-image {

        height: 190px;

    }

}



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

@media (max-width: 650px) {

    .projection-section {

        padding: 65px 15px;

    }


    .projection-heading {

        margin-bottom: 35px;

    }


    .projection-heading h2 {

        font-size: 28px;

        line-height: 1.25;

    }


    .projection-heading p {

        font-size: 12px;

    }


    .projection-container {

        grid-template-columns: 1fr;

    }


    .first-angle {

        border-right: none;

        border-bottom: 4px solid #003366;

    }


    .projection-title {

        font-size: 15px;

    }


    .projection-text {

        min-height: auto;

        padding: 12px;

    }


    .projection-text p {

        font-size: 12px;

    }


    .symbol-image {

        height: 130px;

    }


    .large-image {

        height: 180px;

    }


    .drawing-image {

        height: 200px;

    }


    .projection-footer {

        flex-wrap: wrap;

        padding: 12px;

        gap: 10px;

    }

}
/* ==============================
   SERVICES SHOWCASE
================================ */

.service-showcase {

    padding: 90px 5%;

    background: #f7f9fc;
}


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

.showcase-heading {

    max-width: 850px;

    margin: 0 auto 55px;

    text-align: center;
}


.showcase-heading span {

    display: block;

    color: #0066cc;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;

    margin-bottom: 15px;
}


.showcase-heading h2 {

    font-size: 42px;

    line-height: 1.25;

    color: #003366;

    margin: 0 0 18px;

    font-weight: 800;
}


.showcase-heading p {

    max-width: 650px;

    margin: auto;

    color: #666;

    font-size: 15px;

    line-height: 1.7;
}


/* ==============================
   4 × 4 GRID
================================ */

.service-grid {

    max-width: 1450px;

    margin: 0 auto;

    display: grid;

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

    gap: 22px;
}


/* ==============================
   SERVICE BOX
================================ */

.service-box {

    display: block;

    text-decoration: none;

    background: #ffffff;

    border-radius: 12px;

    overflow: hidden;

    border: 1px solid #e0e5eb;

    box-shadow: 0 5px 18px rgba(0,0,0,0.06);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

    cursor: pointer;
}


.service-box:hover {

    transform: translateY(-7px);

    box-shadow:
        0 18px 35px rgba(0, 51, 102, 0.15);
}


/* ==============================
   SERVICE IMAGE
================================ */

.cad-service-image {

    width: 100%;

    height: 210px;

    overflow: hidden;

    background: #ffffff;
}


.cad-service-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition: none;

    transform: none;
}


/* NO IMAGE HOVER EFFECT */

.service-box:hover .cad-service-image img {

    transform: none;

    filter: none;

    opacity: 1;
}


/* ==============================
   SERVICE NAME
================================ */

.service-box h3 {

    min-height: 65px;

    margin: 0;

    padding: 18px 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    font-size: 16px;

    line-height: 1.3;

    font-weight: 700;

    color: #090909;

    background: #ffff;

    transition: 0.3s ease;
}


/* TITLE HOVER */

.service-box:hover h3 {

    color: oklch(69.102% 0.31301 330.321);
}


/* ==============================
   SEE ALL BUTTON
================================ */

.see-all {

    margin-top: 55px;

    text-align: center;
}


.see-all a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 28px;

    background: #003366;

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1px;

    border-radius: 5px;

    transition: 0.3s ease;
}


.see-all a:hover {

    background: #0066cc;

    transform: translateY(-3px);

}
/* ==============================
   8 DIFFERENT SERVICE NAME COLORS
================================ */

/* 1 - BLUE */
.service-box:nth-child(8n + 1) h3 {
    color: #141515;
    background: #0066cc91;
}

/* 2 - RED */
.service-box:nth-child(8n + 2) h3 {
    background: #e6394796;
}

/* 3- ORANGE */
.service-box:nth-child(8n + 3) h3 {
    background: #f78000a5;
}

/* 4 - GREEN */
.service-box:nth-child(8n + 4) h3 {
    background: #16a084a0;
}

/* 5 - PURPLE */
.service-box:nth-child(8n + 5) h3 {
    background: #7a2cbfbd;
}

/* 6 - PINK */
.service-box:nth-child(8n + 6) h3 {
    background: #e83e8daa;
}

/* 7 - GOLD */
.service-box:nth-child(8n + 7) h3 {
    background: #d99c00a5;
}

/* 8- DARK CYAN */
.service-box:nth-child(8n) h3 {
    background: #008b95c5;
}

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

@media (max-width: 1200px) {

    .service-grid {

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

    }

}


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

@media (max-width: 850px) {

    .service-grid {

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

    }


    .showcase-heading h2 {

        font-size: 34px;

    }

}


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

@media (max-width: 550px) {

    .service-showcase {

        padding: 70px 20px;

    }


    .service-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }


    .showcase-heading h2 {

        font-size: 28px;

    }


    .cad-service-image {

        height: 230px;

    }

}
/* ================================
   WHAT WE DO - 5 × 1 STYLE
================================ */

.services {
    padding: 30px 5%;
    background: #f5f8fc;
    position: relative;
    overflow: hidden;
}

/* Heading */
.services-heading {
    text-align: center;
    margin-bottom: 55px;
}

.services-heading h2 {
    font-size: 42px;
    font-weight: 800;
    color: #003366;
    margin: 0;
    letter-spacing: 1px;
}

.heading-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}

.heading-line span {
    width: 55px;
    height: 3px;
    background: #0066cc;
    border-radius: 10px;
}

.heading-line i {
    width: 12px;
    height: 12px;
    background: #ffcc00;
    border-radius: 50%;
    display: block;
}

/* ================================
   5 CARDS IN ONE ROW
================================ */

.services-container {
    width: 100%;
    max-width: 1500px;
    margin: auto;

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

    gap: 20px;
}

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

.service-card {
    position: relative;

    background: #ffffff;

    min-height: 390px;

    padding: 18px 18px 25px;

    border-radius: 18px;

    border: 1px solid #e2e8f0;

    text-align: center;

    overflow: hidden;

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

/* Top colored line */

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

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background: linear-gradient(
        90deg,
        #0066cc,
        #00aaff,
        #ffcc00
    );

    transform: scaleX(0);

    transform-origin: left;

    transition: 0.4s ease;
}

/* Number */

.service-card::after {
    content: "01";

    position: absolute;

    top: 14px;
    right: 16px;

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

    color: #0066cc;

    opacity: 0.7;
}

/* Different card numbers */

.service-card:nth-child(2)::after {
    content: "02";
    color: #e63946;
}

.service-card:nth-child(3)::after {
    content: "03";
    color: #0066cc;
}

.service-card:nth-child(4)::after {
    content: "04";
    color: #f0a500;
}

.service-card:nth-child(5)::after {
    content: "05";
    color: #003366;
}


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

.service-image {
    width: 100%;
    height: 175px;

    margin-bottom: 22px;

    border-radius: 13px;

    overflow: hidden;

    background: #eef4fa;

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

    position: relative;
}

.service-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
        135deg,
        transparent 50%,
        rgba(0, 102, 204, 0.12)
    );

    pointer-events: none;
}

.service-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;
}


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

.service-card h3 {
    font-size: 19px;

    line-height: 1.35;

    color: #003366;

    margin: 0 0 12px;

    min-height: 52px;

    font-weight: 750;
}


/* Small Line */

.small-line {
    width: 35px;
    height: 3px;

    background: #0066cc;

    margin: 0 auto 15px;

    border-radius: 10px;

    transition: 0.4s ease;
}


/* Description */

.service-card p {
    font-size: 14px;

    line-height: 1.7;

    color: #667085;

    margin: 0;
}


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

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

    border-color: #0066cc;

    box-shadow:
        0 20px 45px rgba(0, 51, 102, 0.15);
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-card:hover .service-image img {
    transform: scale(1.08);
}

.service-card:hover .small-line {
    width: 65px;
}


/* ================================
   DIFFERENT HOVER ACCENTS
================================ */

.service-card:nth-child(2):hover {
    border-color: #e63946;
}

.service-card:nth-child(2) .small-line {
    background: #e63946;
}

.service-card:nth-child(4):hover {
    border-color: #f0a500;
}

.service-card:nth-child(4) .small-line {
    background: #f0a500;
}


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

@media (max-width: 1100px) {

    .services-container {
        grid-template-columns: repeat(3, 1fr);
    }

}


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

@media (max-width: 700px) {

    .services {
        padding: 60px 20px;
    }

    .services-heading h2 {
        font-size: 32px;
    }

    .services-container {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .service-card {
        min-height: auto;
    }

}

/* WHY CHOOSE US */

.why-choose {
    background: #454747;
    color: white;
    padding: 10px 10%;
}

.why-heading {
    text-align: center;
    margin-bottom: 20px;
       font-size: 55px;
    font-family: Georgia, serif;
}



.why-heading p {
    color: #f9f7f7;
    font-size: 55px;
    letter-spacing: 3px;
    margin-bottom: 15px;
}

.why-heading h2 {
    font-size: 42px;
    font-family: Georgia, serif;
}

/* DOUBLE LINE */

.why-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.why-heading span {
    width: 35%;
    max-width: 500px;
    height: 2px;
    background: #777;
}

.why-heading i {
    width: 45px;
    height: 5px;
    background: #d99d00;
    border-radius: 10px;
}
.why-box {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: #0a0d12;
    border: 1px solid #d99d00;
    border-radius: 15px;
    overflow: hidden;
}

.why-item {
    text-align: center;
    padding: 35px 20px;
    border-right: 1px solid #d99d00;
}

.why-item:last-child {
    border-right: none;
}

.why-item span {
    font-size: 32px;
    display: block;
    margin-bottom: 15px;
}

.why-item h3 {
    font-size: 16px;
    margin-bottom: 10px;
}

.why-item p {
    color: #aaa;
    font-size: 13px;
    line-height: 1.5;
    
}
/* WHY CHOOSE US SCROLL ANIMATION */

.why-item {
    opacity: 0;
    transform: translateY(40px);
    transition: 
        opacity 0.6s ease,
        transform 0.6s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.why-item.show {
    opacity: 1;
    transform: translateY(0);
}

/* Hover Effect */

.why-item:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: #e63946;
    box-shadow: 0 10px 25px rgba(230, 57, 70, 0.2);
}

.why-item:hover span {
    transform: scale(1.2) rotate(10deg);
}

.why-item span {
    transition: 0.4s ease;
}

/* MOBILE */

@media (max-width: 768px) {
    .why-box {
        grid-template-columns: repeat(2, 1fr);
    }

    .why-item {
        border: 1px solid #222;
    }

    .why-heading h2 {
        font-size: 30px;
    }
}

@media (max-width: 480px) {
    .why-box {
        grid-template-columns: 1fr;
    }
}
/* ==============================
   PROJECTS / PORTFOLIO
================================ */

.projects {
    background: #f7fafa;
    padding: 10px 10%;
    color: rgb(241, 75, 28);
}

/* HEADING */

.projects-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
}

.projects-heading::before,
.projects-heading::after {
    content: "";
    width: 80px;
    height: 2px;
    background: #fbde07;
}

.projects-heading p {
    color: rgb(9, 73, 85);
    font-size: 55px;
    font-weight: bold;
    font-family: Georgia, serif;
    letter-spacing: 3px;
    margin: 0;
}

/* PROJECT GRID */

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

/* PROJECT CARD */

.project-card {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #bea9a969;
}

.project-card img {
    width: 100%;
    height: 300px;
    object-fit: contain;
    display: block;
    transition: 0.5s;
}

/* TEXT */

.project-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 20px;
}

.project-info h3 {
    color: #094955;
    font-size: 22px;
    margin: 0 0 8px;
}

.project-info p {
    color: #666;
    font-size: 14px;
    margin: 0;
}

/* HOVER EFFECT */


.read-more-btn {
    flex-shrink: 0;

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

    padding: 8px 15px;

    background: #1E40AF;
    color: #fff;

    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;

    border-radius: 5px;
    transition: all 0.3s ease;
}

.read-more-btn span {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.read-more-btn:hover {
    background: #F9822E;
}

.read-more-btn:hover span {
    transform: translateX(5px);
}

@media (max-width: 768px) {

    .projects {
        padding: 70px 5%;
    }

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

    .project-card img {
        height: 250px;
    }

    .project-info {
        gap: 10px;
        padding: 15px;
    }

    .project-info h3 {
        font-size: 18px;
    }

    .project-info p {
        font-size: 13px;
    }

    .read-more-btn {
        padding: 8px 12px;
        font-size: 11px;
    }
}
/* ==============================
   OUR ACHIEVEMENTS
================================ */

.achievements {
    background: #3c3c3d;
    color: white;
    padding: 10px 10%;
}

.achievements-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
}

.achievements-heading::before,
.achievements-heading::after {
    content: "";
    width: 80px;
    height: 2px;
    background: #fbef04;
}

.achievements-heading p {
    font-size: 40px;
    font-weight: bold;
    font-family: Georgia, serif;
    letter-spacing: 3px;
    margin: 0;
}

.achievements-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.achievement-box {
    background: #0a0d12;
    border: 1px solid #222;
    border-radius: 12px;
    padding: 50px 25px;
    text-align: center;
    transition: 0.4s ease;
}

.achievement-box h2 {
    display: inline-block;
    font-size: 55px;
    color: #e63946;
    margin: 0;
}

.achievement-box span {
    font-size: 35px;
    color: #e63946;
    font-weight: bold;
}

.achievement-box p {
    margin-top: 15px;
    color: #aaa;
    font-size: 16px;
}

/* HOVER */

.achievement-box:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #e63946;
    box-shadow: 0 10px 30px rgba(230, 57, 70, 0.2);
}

/* MOBILE */

@media (max-width: 768px) {
    .achievements-container {
        grid-template-columns: 1fr;
    }
}
/* ==============================
   OUR EXPERTISE
================================ */

.expertise {
    background: #030507;
    color: white;
    padding: 100px 8%;
}

/* HEADING */

.expertise-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 60px;
}

.expertise-heading::before,
.expertise-heading::after {
    content: "";
    width: 80px;
    height: 2px;
    background: #e63946;
}

.expertise-heading p {
    color: white;
    font-size: 35px;
    font-weight: bold;
    letter-spacing: 3px;
    margin: 0;
}

/* 3 COLUMNS */

.expertise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    max-width: 1100px;
    margin: auto;
}

/* COLUMN */

.expertise-column {
    display: flex;
    flex-direction: column;
}

/* ITEM */

.expertise-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 0;
    border-bottom: 1px solid #222;
    transition: 0.3s ease;
}

.expertise-item span {
    color: #e63946;
    font-size: 20px;
    transition: 0.3s ease;
}

.expertise-item h3 {
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    transition: 0.3s ease;
}

/* HOVER */

.expertise-item:hover {
    padding-left: 10px;
}

.expertise-item:hover span {
    transform: translateX(5px);
}

.expertise-item:hover h3 {
    color: #e63946;
}

/* MOBILE */

@media (max-width: 768px) {

    .expertise {
        padding: 70px 5%;
    }

    .expertise-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .expertise-heading p {
        font-size: 16px;
    }

}
.expertise-item {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
/* ==============================
   FOOTER
================================ */
/* ==============================
   FOOTER
================================ */

.footer {
    width: 100%;
    background: #020304;
    color: #ffffff;
    padding: 60px 5% 25px;
    border-top: 1px solid #1f2529;
    box-sizing: border-box;
}


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

.footer-main {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.4fr auto;

    gap: 45px;

    align-items: start;
}


/* ==============================
   FOOTER BRAND / LOGO
================================ */

.footer-brand {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.footer-logo {
    width: 300px;
    height: 260px;

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

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


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

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-column h3 {
    margin: 0 0 24px;

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

    color: #ffffff;
}


/* ==============================
   QUICK LINKS / SERVICE LINKS
================================ */

.footer-column a {
    display: block;

    color: #e5e5e5;
    text-decoration: none;

    font-size: 18px;

    margin-bottom: 13px;

    transition: 0.3s ease;
}

.footer-column a:hover {
    color: #38b6ff;
    transform: translateX(4px);
}


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

.footer-contact p {
    display: flex;
    align-items: center;

    margin: 0 0 18px;

    font-size: 17px;
    color: #d7d7d7;

    line-height: 1.5;
}

.footer-contact p span {
    width: 25px;
    min-width: 25px;

    margin-right: 0;

    font-size: 17px;
}

.footer-contact p a {
    margin: 0;

    color: #d7d7d7;
    font-size: 17px;

    white-space: nowrap;
}

.footer-contact p a:hover {
    color: #38b6ff;
}


/* ==============================
   SOCIAL LINKS
================================ */

.footer-social {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

    gap: 12px;

    padding-top: 20px;
}

.footer-social a {
    width: 40px;
    height: 40px;

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

    background: #1e40af;

    border-radius: 6px;

    text-decoration: none;

    transition: all 0.3s ease;
}

.footer-social a:hover {
    background: #38b6ff;
    transform: translateY(-3px);
}

.footer-social svg {
    width: 21px;
    height: 21px;

    fill: #ffffff;

    display: block;
}


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

.footer-bottom {
    width: 100%;

    max-width: 1400px;

    margin: 35px auto 0;

    padding-top: 22px;

    border-top: 1px solid #1f2529;

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

    text-align: center;

    box-sizing: border-box;
}

.footer-bottom p {
    width: 100%;

    margin: 0;

    padding: 0;

    text-align: center;

    color: #777777;

    font-size: 14px;
    line-height: 1.5;
}


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

@media (max-width: 1100px) {

    .footer-main {
        grid-template-columns: 1.2fr 1fr 1fr;
        gap: 35px;
    }

    .footer-social {
        grid-column: 1 / -1;

        padding-top: 0;

        justify-content: center;
    }

    .footer-logo {
        width: 250px;
    }

    .footer-logo img {
        width: 220px;
    }
}


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

@media (max-width: 768px) {

    .footer {
        padding: 45px 6% 20px;
    }

    .footer-main {
        grid-template-columns: 1fr;

        gap: 35px;

        text-align: center;
    }


    /* Logo */
    .footer-brand {
        justify-content: center;
    }

    .footer-logo {
        width: 100%;
        height: auto;

        justify-content: center;
    }

    .footer-logo img {
        width: 220px;
    }


    /* Columns */
    .footer-column {
        align-items: center;
    }

    .footer-column h3 {
        margin-bottom: 18px;
    }

    .footer-column a {
        font-size: 16px;
    }


    /* Contact */
    .footer-contact p {
        justify-content: center;

        font-size: 16px;
    }

    .footer-contact p a {
        font-size: 16px;
        white-space: normal;
    }


    /* Social */
    .footer-social {
        grid-column: auto;

        justify-content: center;

        padding-top: 0;
    }


    /* Copyright */
    .footer-bottom {
        margin-top: 30px;
        padding-top: 18px;
    }

    .footer-bottom p {
        font-size: 13px;
        text-align: center;
    }
}


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

@media (max-width: 480px) {

    .footer {
        padding: 40px 5% 18px;
    }

    .footer-logo img {
        width: 190px;
    }

    .footer-column h3 {
        font-size: 18px;
    }

    .footer-column a {
        font-size: 15px;
    }

    .footer-contact p,
    .footer-contact p a {
        font-size: 14px;
    }

    .footer-social a {
        width: 38px;
        height: 38px;
    }

    .footer-bottom p {
        font-size: 12px;
    }
}
/* about pages */
/* ==============================
   ABOUT HERO SECTION
================================ */

.about-hero {
    min-height: 85vh;
    background: url("images/about-hero.png") center/cover no-repeat;

    position: relative;

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

    text-align: center;
    color: white;
}


/* DARK OVERLAY */

.about-overlay {
    position: absolute;
    inset: 0;

    background: rgba(3, 5, 7, 0.72);
}


/* CONTENT */

.about-hero-content {
    position: relative;
    z-index: 1;

    max-width: 900px;
    padding: 20px;
}

.about-hero-content p {
    color: #00bfff;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 4px;

    margin-bottom: 25px;
}

.about-hero-content h1 {
    font-family: Georgia, serif;
    font-size: 65px;
    line-height: 1.15;

    margin: 0 0 25px;
}

.about-hero-content span {
    display: block;

    max-width: 650px;
    margin: auto;

    color: #ddd;
    font-size: 17px;
    line-height: 1.7;
}


/* MOBILE */

@media (max-width: 768px) {

    .about-hero {
        min-height: 75vh;
    }

    .about-hero-content h1 {
        font-size: 42px;
    }

    .about-hero-content span {
        font-size: 15px;
    }

}
/* ==============================
   ENGINEERING WITH PURPOSE
================================ */

.engineering-purpose {
    background: #030507;
    color: white;
    padding: 80px 8%;
}

.purpose-content {
    max-width: 1200px;
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;

    align-items: center;
}


/* LEFT SIDE */

.section-tag {
    color: #e63946;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 4px;

    margin-bottom: 20px;
}

.purpose-text h2 {
    font-family: Georgia, serif;
    font-size: 52px;
    line-height: 1.2;

    margin: 0 0 30px;
}

.purpose-text p:not(.section-tag) {
    color: #aaa;
    font-size: 16px;
    line-height: 1.8;

    margin-bottom: 18px;
}


/* RIGHT SIDE IMAGE */

.purpose-image {
    height: 500px;
    overflow: hidden;
}

.purpose-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: 0.5s ease;
}

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


/* MOBILE */

@media (max-width: 768px) {

    .engineering-purpose {
        padding: 80px 5%;
    }

    .purpose-content {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .purpose-text h2 {
        font-size: 40px;
    }

    .purpose-image {
        height: 350px;
    }

}
/* ==============================
   MEET THE FOUNDER
================================= */

.founder-section {
    min-height: 700px;

    background: #030507;
    color: #fff;

    display: flex;
    align-items: center;

    gap: 90px;

    padding: 10px 8%;
}


/* ==============================
   FOUNDER IMAGE
================================= */

.founder-image {
    width: 45%;
    height: 540px;

    overflow: hidden;

    border: 1px solid #f9f2f2;
    background: #080a0d;
}

.founder-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter: brightness(0.8);

    transition: transform 0.5s ease,
                filter 0.5s ease;
}

.founder-image:hover img {
    transform: scale(1.04);
    filter: brightness(0.95);
}


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

.founder-content {
    width: 55%;
    max-width: 650px;
}


/* SMALL TITLE */

.founder-label {
    display: inline-block;

    color: #00bfff;

    font-size: 18px;
    font-weight: 600;

    letter-spacing: 3px;

    margin-bottom: 18px;
}


/* NAME */

.founder-content h2 {
    font-family: Georgia, serif;

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

    margin: 0 0 10px;

    color: #fff;
}


/* POSITION */

.founder-content h3 {
    font-size: 20px;

    font-weight: 500;

    color: #00bfff;

    margin-bottom: 30px;
}


/* DESCRIPTION */

.founder-content p {
    color: #aeb3b8;

    font-size: 15px;

    line-height: 1.8;

    margin-bottom: 17px;
}

.founder-content strong {
    color: #ddd;
    font-weight: 500;
}


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

.founder-btn {
    display: inline-block;

    margin-top: 15px;

    padding: 13px 28px;

    border: 1px solid #d99d00;

    color: #fff;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    transition: all 0.3s ease;
}

.founder-btn:hover {
    background: #d99d00;
    color: #000;
}


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

@media (max-width: 900px) {

    .founder-section {
        flex-direction: column;

        gap: 50px;

        padding: 80px 6%;
    }

    .founder-image,
    .founder-content {
        width: 100%;
    }

    .founder-image {
        height: 450px;
    }

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


@media (max-width: 600px) {

    .founder-section {
        padding: 60px 5%;
    }

    .founder-image {
        height: 380px;
    }

    .founder-content h2 {
        font-size: 38px;
    }

    .founder-content p {
        font-size: 14px;
    }
}
/* ==============================
   VISION & MISSION
================================= */

.vision-mission {
    background: #050709;
    color: #fff;

    padding: 110px 8%;
}
/* 3D Vision Image */

.vm-image {
    width: 100%;
    height: 300px;
    margin-bottom: 20px;
    border-radius: 15px;
    overflow: hidden;
}

.vm-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: 0.4s ease;
}

.vm-box:hover .vm-image img {
    transform: scale(1.05);
}


/* HEADING */

.vm-heading {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 65px;
}

.vm-heading span {
    color: #d99d00;

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

    letter-spacing: 3px;
}

.vm-heading h2 {
    font-family: Georgia, serif;

    font-size: 52px;

    margin: 15px 0 18px;
}

.vm-heading p {
    color: #9da3a8;

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


/* CONTAINER */

.vm-container {
    display: grid;

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

    gap: 30px;

    max-width: 1100px;

    margin: auto;
}


/* BOX */

.vm-box {
    position: relative;

    min-height: 330px;

    padding: 45px;

    background: #090c0f;

    border: 1px solid #20252a;

    overflow: hidden;

    transition: all 0.4s ease;
}

.vm-box:hover {
    border-color: #d99d00;

    transform: translateY(-8px);
}


/* NUMBER */

.vm-number {
    position: absolute;

    top: 20px;
    right: 25px;

    font-size: 55px;

    font-family: Georgia, serif;

    color: rgba(255,255,255,0.04);
}


/* ICON */

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

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

    border: 1px solid #d99d00;

    color: #d99d00;

    font-size: 24px;

    margin-bottom: 28px;
}


/* TITLE */

.vm-box h3 {
    font-family: Georgia, serif;

    font-size: 30px;

    margin-bottom: 18px;
}


/* TEXT */

.vm-box p {
    color: #aeb3b8;

    font-size: 15px;

    line-height: 1.8;

    max-width: 500px;
}


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

@media (max-width: 800px) {

    .vision-mission {
        padding: 80px 6%;
    }

    .vm-container {
        grid-template-columns: 1fr;
    }

    .vm-heading h2 {
        font-size: 42px;
    }
}


@media (max-width: 500px) {

    .vision-mission {
        padding: 65px 5%;
    }

    .vm-box {
        padding: 30px;
    }

    .vm-box h3 {
        font-size: 26px;
    }

    .vm-heading h2 {
        font-size: 36px;
    }
}/* ==============================
   VISION & MISSION
================================= */

.vision-mission {
    background: #050709;
    color: #fff;

    padding: 10px 10%;
}


/* HEADING */

.vm-heading {
    text-align: center;

    max-width: 750px;

    margin: 0 auto 65px;
}

.vm-heading span {
    color: #d99d00;

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

    letter-spacing: 3px;
}

.vm-heading h2 {
    font-family: Georgia, serif;

    font-size: 52px;

    margin: 15px 0 18px;
}

.vm-heading p {
    color: #9da3a8;

    font-size: 15px;

    line-height: 1.8;
}


/* ==============================
   TWO BOXES
================================= */

.vm-container {
    display: grid;

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

    gap: 30px;

    max-width: 1100px;

    margin: auto;
}


/* BOX */

.vm-box {
    position: relative;

    padding: 45px;

    min-height: 350px;

    background: #090c0f;

    border: 1px solid #20252a;

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}


/* HOVER MOVEMENT */

.vm-box:hover {
    transform: translateY(-10px);

    border-color: #d99d00;

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


/* ICON */

.vm-icon {
    width: 65px;
    height: 65px;

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

    border: 1px solid #d99d00;

    color: #d99d00;

    font-size: 25px;

    margin: 0 auto 28px;

    transition: all 0.3s ease;
}

/* ICON HOVER */

.vm-box:hover .vm-icon {
    background: #d99d00;

    color: #050709;

    transform: rotate(5deg);
}


/* LABEL */

.vm-label {
    display: block;

    color: #777d82;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 2px;

    margin-bottom: 12px;
}


/* TITLE */

.vm-box h3 {
    font-family: Georgia, serif;

    font-size: 32px;

    margin: 0 0 18px;
}


/* TEXT */

.vm-box p {
    color: #aeb3b8;

    font-size: 15px;

    line-height: 1.8;

    max-width: 500px;
}


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

@media (max-width: 800px) {

    .vision-mission {
        padding: 80px 6%;
    }

    .vm-container {
        grid-template-columns: 1fr;
    }

    .vm-heading h2 {
        font-size: 42px;
    }
}


@media (max-width: 500px) {

    .vision-mission {
        padding: 65px 5%;
    }

    .vm-box {
        padding: 30px;
    }

    .vm-box h3 {
        font-size: 27px;
    }

    .vm-heading h2 {
        font-size: 36px;
    }
}
/* ==============================
   WHAT I DO
================================= */

.what-i-do {
    background: #020304;
    color: #fff;

    padding: 110px 8%;
}


/* HEADING */

.what-heading {
    text-align: center;

    margin-bottom: 65px;
}

.what-heading span {
    color: #00bfff;

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

    letter-spacing: 3px;
}

.what-heading h2 {
    font-family: Georgia, serif;

    font-size: 52px;

    margin-top: 15px;
}


/* 3 COLUMNS */

.service-columns {
    max-width: 1100px;

    margin: auto;

    display: grid;

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

    gap: 70px;
}


/* COLUMN */

.service-column {
    display: flex;

    flex-direction: column;

    gap: 28px;
}


/* SERVICE NAME */

.service-column a {
    color: #fff;

    text-decoration: none;

    font-family: Georgia, serif;

    font-size: 21px;

    padding-bottom: 15px;

    border-bottom: 1px solid #292d31;

    transition: all 0.3s ease;
}


/* HOVER */

.service-column a:hover {
    color: #d99d00;

    padding-left: 8px;

    border-color: #d99d00;
}


/* RESPONSIVE */

@media (max-width: 800px) {

    .service-columns {
        grid-template-columns: 1fr 1fr;

        gap: 45px;
    }

    .what-heading h2 {
        font-size: 42px;
    }
}


@media (max-width: 550px) {

    .service-columns {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .what-i-do {
        padding: 75px 6%;
    }

    .what-heading h2 {
        font-size: 36px;
    }
}
/* ==============================
   SKILLS & SOFTWARE
================================= */

.skills-section {
    background: #030507;
    color: #fff;

    padding: 10px 8%;
}


/* HEADING */

.skills-heading {
    text-align: center;

    max-width: 750px;

    margin: 0 auto 65px;
}

.skills-heading span {
    color: #00bfff;

    font-size: 20px;
    font-weight: 600;

    letter-spacing: 3px;
}

.skills-heading h2 {
    font-family: Georgia, serif;

    font-size: 52px;

    margin: 15px 0 18px;
}

.skills-heading p {
    color: #9da3a8;

    font-size: 15px;

    line-height: 1.8;
}


/* ==============================
   3 COLUMNS
================================= */

.skills-columns {
    max-width: 1100px;

    margin: auto;

    display: grid;

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

    gap: 70px;
}


/* COLUMN */

.skills-column {
    border-top: 1px solid #333;

    padding-top: 25px;
}


/* COLUMN TITLE */

.skills-column h3 {
    font-family: Georgia, serif;

    font-size: 25px;

    margin-bottom: 25px;

    color: #fff;
}


/* LIST */

.skills-column ul {
    list-style: none;

    padding: 0;
    margin: 0;
}


/* ITEMS */

.skills-column li {
    color: #aeb3b8;

    font-size: 15px;

    padding: 13px 0;

    border-bottom: 1px solid #1c2024;

    transition: all 0.3s ease;
}


/* HOVER */

.skills-column li:hover {
    color: #e63946;

    padding-left: 8px;
}


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

@media (max-width: 800px) {

    .skills-section {
        padding: 80px 6%;
    }

    .skills-columns {
        grid-template-columns: 1fr 1fr;

        gap: 45px;
    }

    .skills-heading h2 {
        font-size: 42px;
    }
}


@media (max-width: 550px) {

    .skills-columns {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .skills-heading h2 {
        font-size: 36px;
    }
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f5f9ff;
    color: #172033;
}


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

.design-process {
    width: 100%;
    padding: 10px 7%;
    background: linear-gradient(180deg, #ffffff, #f3f8ff);
}


/* HEADING */

.process-heading {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 60px;
}

.process-heading span {
    display: inline-block;
    color: #0066cc;
    font-size: px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.process-heading h2 {
    font-size: 42px;
    color: #102a43;
    margin-bottom: 15px;
}

.process-heading p {
    color: #667085;
    font-size: 17px;
    line-height: 1.7;
}


/* PROCESS WRAPPER */

.process-wrapper {
    max-width: 1250px;
    margin: auto;

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

    gap: 25px;
}


/* EACH ITEM */

.process-item {
    position: relative;
}


/* BOX */

.process-box {
    position: relative;

    background: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    border: 1px solid #dce8f5;

    box-shadow:
        0 12px 35px rgba(0, 70, 140, 0.10);

    transition: 0.35s ease;
}

.process-box:hover {
    transform: translateY(-10px);

    box-shadow:
        0 20px 45px rgba(0, 70, 140, 0.18);
}


/* STEP NUMBER */

.step-number {
    position: absolute;

    top: 15px;
    left: 15px;

    width: 48px;
    height: 48px;

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

    background: #0066cc;

    color: white;

    border-radius: 50%;

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

    z-index: 2;

    box-shadow: 0 5px 15px rgba(0, 102, 204, 0.3);
}


/* IMAGE */

.process-image {
    width: 100%;
    height: 220px;

    overflow: hidden;

    background: #eaf3fc;
}

.process-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: 0.5s ease;
}

.process-box:hover .process-image img {
    transform: scale(1.08);
}


/* CONTENT */

.process-content {
    padding: 25px 22px 28px;
}

.process-content h3 {
    font-size: 22px;
    text-align: center;
    color: #003b73;

    margin-bottom: 10px;
}

.process-content p {
    font-size: 14px;

    line-height: 1.7;

    color: #667085;
}


/* ARROW */

.process-arrow {
    position: absolute;

    right: -30px;

    top: 50%;

    transform: translateY(-50%);

    width: 55px;
    height: 55px;

    border-radius: 50%;

    background: #0066cc;

    color: rgb(250, 242, 242);

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

    font-size: 55px;
    font-weight: bold;

    z-index: 8;

    box-shadow:
        0 8px 20px rgba(0, 102, 204, 0.3);
}
/* Step Colors */

.process-item:nth-child(1) .process-box {
    border-top: 4px solid #0066FF;
}

.process-item:nth-child(1) .step-number,
.process-item:nth-child(1) .process-arrow {
    background: #0066FF;
}


.process-item:nth-child(2) .process-box {
    border-top: 4px solid #16A34A;
}

.process-item:nth-child(2) .step-number,
.process-item:nth-child(2) .process-arrow {
    background: #16A34A;
}


.process-item:nth-child(3) .process-box {
    border-top: 4px solid #F97316;
}

.process-item:nth-child(3) .step-number,
.process-item:nth-child(3) .process-arrow {
    background: #F97316;
}

.process-item:nth-child(4) .process-box {
    border-top: 4px solid #7C3AED;
}

.process-item:nth-child(4) .step-number {
    background: #7C3AED;
}

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

@media (max-width: 1000px) {

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

    .process-arrow {
        display: none;
    }

    .process-heading h2 {
        font-size: 34px;
    }
}


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

@media (max-width: 600px) {

    .design-process {
        padding: 60px 20px;
    }

    .process-heading {
        margin-bottom: 40px;
    }

    .process-heading h2 {
        font-size: 30px;
    }

    .process-heading p {
        font-size: 15px;
    }

    .process-wrapper {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .process-image {
        height: 230px;
    }

    .process-box {
        border-radius: 16px;
    }
}
/* ==============================
   WHY WORK WITH ME - NEW CSS
================================ */




/* HEADING */

.why-work {
    background: #5d95cc;
    color: white;
    padding: 80px 8%;
}

.why-heading {
    width: 100%;
    display: block;
    text-align: center;
    margin-bottom: 80px;
}

.why-heading p {
    color: #fbde07;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 4px;
    margin: 0 0 18px;
}

.why-heading h2 {
    color: white;
    font-family: Georgia, serif;
    font-size: 52px;
    line-height: 1.2;
    margin: 0;
}


/* ==============================
   ROW
================================ */

.why-row {
    max-width: 100x;
    margin: 0 auto 80px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;

    align-items: center;
}


/* REVERSE ROW */

.why-row.reverse .why-photo {
    order: 2;
}

.why-row.reverse .why-content {
    order: 1;
}


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

.why-photo {
    width: 100%;
    height: 380px;

    overflow: hidden;
    border-radius: 15px;

    border: 1px solid #222;
}

.why-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    display: block;

    transition: transform 0.5s ease;
}

.why-row:hover .why-photo img {
    transform: scale(1.04);
}


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

.why-content span {
    color: #e63946;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
}

.why-content h3 {
    font-family: Georgia, serif;
    font-size: 38px;
    line-height: 1.2;

    margin: 15px 0 20px;
}

.why-content p {
    color: #aaa;
    font-size: 16px;
    line-height: 1.8;

    margin: 0;
    max-width: 500px;
}
/* MAIN BOX */

.why-row {
    max-width: 1100px;
    margin: 0 auto 50px;
    padding: 35px;

    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 60px;
    align-items: center;

    background: #080c10;
    border: 1px solid #222;
    border-radius: 18px;

    transition: 0.4s ease;
}


/* REVERSE BOX */

.why-row.reverse {
    grid-template-columns: 1.2fr 0.8fr;
}


/* HOVER */

.why-row:hover {
    transform: translateY(-5px);
    background: #0b1015;
}
/* ==============================
   WHY WORK WITH ME - BOX STYLE
================================ */

.why-row {
    max-width: 1100px;
    margin: 0 auto 50px;
    padding: 35px;

    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 60px;
    align-items: center;

    background: #080c10;

    /*  border */
    border-top: 4px solid #222;

    border-radius: 18px;

    transition: 0.4s ease;
}


/* REVERSE LAYOUT */

.why-row.reverse {
    grid-template-columns: 1.2fr 0.8fr;
}

.why-row.reverse .why-photo {
    order: 2;
}

.why-row.reverse .why-content {
    order: 1;
}


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

.why-content span {
    width: 48px;
    height: 48px;

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

    border-radius: 50%;

    color: white;
    font-size: 15px;
    font-weight: 700;

    margin-bottom: 15px;
}


/* ==============================
   01 - BLUE
================================ */

.why-row:nth-of-type(2) {
    border-top-color: #0066FF;
}

.why-row:nth-of-type(2) .why-content span {
    background: #0066FF;
}


/* ==============================
   02 - GREEN
================================ */

.why-row:nth-of-type(3) {
    border-top-color: #16A34A;
}

.why-row:nth-of-type(3) .why-content span {
    background: #16A34A;
}


/* ==============================
   03 - ORANGE
================================ */

.why-row:nth-of-type(4) {
    border-top-color: #F97316;
}

.why-row:nth-of-type(4) .why-content span {
    background: #F97316;
}


/* ==============================
   04 - PURPLE
================================ */

.why-row:nth-of-type(5) {
    border-top-color: #7C3AED;
}

.why-row:nth-of-type(5) .why-content span {
    background: #7C3AED;
}


/* ==============================
   05 - RED
================================ */

.why-row:nth-of-type(6) {
    border-top-color: #E63946;
}

.why-row:nth-of-type(6) .why-content span {
    background: #E63946;
}


/* ==============================
   PHOTO
================================ */

.why-photo {
    width: 100%;
    height: 280px;

    overflow: hidden;
    border-radius: 12px;
}

.why-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    display: block;
}


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

.why-content h3 {
    font-family: Georgia, serif;
    font-size: 34px;
    margin: 0 0 18px;
}

.why-content p {
    color: #aaa;
    font-size: 16px;
    line-height: 1.8;
    margin: 0;
}


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

@media (max-width: 768px) {

    .why-row,
    .why-row.reverse {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 25px;
    }

    .why-row.reverse .why-photo {
        order: 1;
    }

    .why-row.reverse .why-content {
        order: 2;
    }

    .why-photo {
        height: 230px;
    }

    .why-content h3 {
        font-size: 28px;
    }
}
/* ==============================
   MOBILE
================================ */

@media (max-width: 768px) {

    .why-work {
        padding: 80px 5%;
    }

    .why-heading {
        margin-bottom: 60px;
    }

    .why-heading h2 {
        font-size: 38px;
    }

    .why-row {
        grid-template-columns: 1fr;
        gap: 35px;

        margin-bottom: 70px;
    }

    /* Mobile image  */
    .why-row.reverse .why-photo {
        order: 1;
    }

    .why-row.reverse .why-content {
        order: 2;
    }

    .why-photo {
        height: 280px;
    }

    .why-content h3 {
        font-size: 30px;
    }

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

.cta-section {
    background: #171717;
    color: #fff;

    padding: 10px 8%;

    text-align: center;

    border-top: 1px solid #1b1f22;
}


/* CONTENT */

.cta-content {
    max-width: 850px;

    margin: auto;
}


/* SMALL TITLE */

.cta-content span {
    color: #edab06;

    font-size: 20px;
    font-weight: 600;

    letter-spacing: 3px;
}


/* MAIN TITLE */

.cta-content h2 {
    font-family: Georgia, serif;

    font-size: 58px;

    margin: 18px 0 22px;

    line-height: 1.1;
}


/* TEXT */

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

    margin: 0 auto 35px;

    color: #9da3a8;

    font-size: 16px;

    line-height: 1.8;
}


/* BUTTON */

.cta-button {
    display: inline-flex;

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

    gap: 14px;

    padding: 16px 32px;

    border: 5px solid #16A34A;

    border-radius: 50px;

    color: #fff;
    background: #2c95eb;
    text-decoration: none;

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

    letter-spacing: 1px;

    transition: all 0.35s ease;
}


/* BUTTON HOVER */

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

    color: #050709;

    transform: translateY(-5px);

    box-shadow: 0 10px 30px rgba(217, 157, 0, 0.15);
}


/* ARROW */

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

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


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

@media (max-width: 700px) {

    .cta-section {
        padding: 85px 6%;
    }

    .cta-content h2 {
        font-size: 42px;
    }

    .cta-content p {
        font-size: 14px;
    }

    .cta-button {
        padding: 14px 25px;
    }
}
/* Services  Pages */
/* ==============================
   SERVICES HERO
================================= */
/* =====================================================
   SERVICES HERO
===================================================== */

.services-hero {
    position: relative;

    min-height: 650px;

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

    padding: 100px 7%;

    overflow: hidden;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 78% 50%,
            rgba(56, 182, 255, 0.13),
            transparent 30%
        ),
        radial-gradient(
            circle at 95% 10%,
            rgba(255, 87, 87, 0.08),
            transparent 25%
        ),
        #05080d;
}


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

.hero-grid {
    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(56, 182, 255, 0.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(56, 182, 255, 0.055) 1px,
            transparent 1px
        );

    background-size: 50px 50px;

    mask-image: linear-gradient(
        to right,
        black 20%,
        transparent 100%
    );

    pointer-events: none;
}


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

.services-hero-content {
    position: relative;

    z-index: 10;

    width: 48%;
    max-width: 650px;
}


/* TAG */

.hero-tag {
    display: inline-flex;
    align-items: center;

    padding: 8px 14px;

    margin-bottom: 22px;

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

    letter-spacing: 2px;

    color: #38b6ff;

    border-left: 3px solid #38b6ff;

    background: rgba(56, 182, 255, 0.06);
}


/* HEADING */

.services-hero-content h1 {
    margin: 0;

    font-family: Georgia, serif;

    font-size: clamp(48px, 5.5vw, 76px);

    line-height: 1.04;

    letter-spacing: -2px;

    color: #ffffff;
}

.services-hero-content h1 span {
    display: block;

    color: #38b6ff;

    text-shadow:
        0 0 30px rgba(56, 182, 255, 0.15);
}


/* SMALL RED LINE */

.services-hero-content h1::after {
    content: "";

    display: block;

    width: 75px;
    height: 4px;

    margin-top: 22px;

    border-radius: 10px;

    background: linear-gradient(
        90deg,
        #38b6ff,
        #ff5757
    );
}


/* DESCRIPTION */

.services-hero-content p {
    max-width: 580px;

    margin: 28px 0 35px;

    color: #aeb7c1;

    font-size: 17px;

    line-height: 1.8;
}


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

.hero-buttons {
    display: flex;

    align-items: center;

    gap: 15px;
}


/* PRIMARY */

.hero-service-btn {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 14px 25px;

    color: #ffffff;

    background: #38b6ff;

    border: 1px solid #38b6ff;

    border-radius: 5px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .5px;

    transition: .3s ease;
}

.hero-service-btn span {
    font-size: 18px;

    transition: .3s ease;
}

.hero-service-btn:hover {
    background: #ff5757;

    border-color: #ff5757;

    transform: translateY(-3px);

    box-shadow:
        0 10px 30px rgba(255, 87, 87, .2);
}

.hero-service-btn:hover span {
    transform: translateX(5px);
}


/* SECOND BUTTON */

.hero-outline-btn {
    display: inline-flex;

    padding: 14px 23px;

    color: #c5ccd3;

    border: 1px solid #29343e;

    border-radius: 5px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    transition: .3s ease;
}

.hero-outline-btn:hover {
    color: #38b6ff;

    border-color: #38b6ff;

    background: rgba(56, 182, 255, .05);
}


/* =====================================================
   RIGHT 3D VISUAL
===================================================== */

.services-hero-visual {
    position: relative;

    z-index: 5;

    width: 48%;

    max-width: 650px;

    height: 520px;

    perspective: 1000px;

    border: 1px solid rgba(56, 182, 255, .16);

    border-radius: 18px;

    background:
        linear-gradient(
            rgba(56, 182, 255, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(56, 182, 255, .035) 1px,
            transparent 1px
        ),
        rgba(4, 8, 13, .55);

    background-size: 35px 35px;

    box-shadow:
        inset 0 0 80px rgba(56, 182, 255, .03),
        0 25px 80px rgba(0, 0, 0, .45);

    overflow: hidden;
}


/* =====================================================
   VISUAL GLOW
===================================================== */

.visual-glow {
    position: absolute;

    width: 300px;
    height: 300px;

    top: 100px;
    left: 50%;

    transform: translateX(-50%);

    background: #38b6ff;

    opacity: .08;

    filter: blur(90px);

    border-radius: 50%;
}


/* =====================================================
   CAD INFO
===================================================== */

.cad-info {
    position: absolute;

    top: 20px;
    left: 22px;

    z-index: 20;

    padding: 8px 13px;

    color: #38b6ff;

    background: rgba(5, 10, 15, .85);

    border: 1px solid rgba(56, 182, 255, .25);

    border-radius: 4px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;
}

.live-dot {
    display: inline-block;

    width: 6px;
    height: 6px;

    margin-right: 7px;

    background: #38b6ff;

    border-radius: 50%;

    box-shadow:
        0 0 12px #38b6ff;
}


/* =====================================================
   3D MACHINE
===================================================== */

.cad-machine {
    position: absolute;

    width: 330px;
    height: 300px;

    top: 115px;
    left: 50%;

    transform:
        translateX(-50%)
        rotateX(8deg)
        rotateY(-15deg);

    transform-style: preserve-3d;
}


/* =====================================================
   MACHINE BASE
===================================================== */

.machine-base {
    position: absolute;

    width: 310px;
    height: 48px;

    left: 10px;
    bottom: 20px;

    background:
        linear-gradient(
            145deg,
            #777,
            #292929 45%,
            #555
        );

    border: 2px solid #38b6ff;

    border-radius: 6px;

    transform: skewX(-10deg);

    box-shadow:
        0 18px 25px rgba(0,0,0,.6),
        0 0 18px rgba(56,182,255,.12);
}


/* =====================================================
   MACHINE FRAME
===================================================== */

.machine-frame {
    position: absolute;

    width: 155px;
    height: 190px;

    left: 70px;
    bottom: 65px;

    border: 14px solid #4a4a4a;

    border-bottom: 0;

    transform: skewX(-7deg);

    box-shadow:
        inset 0 0 15px #111;
}


/* =====================================================
   TOP PLATE
===================================================== */

.machine-top {
    position: absolute;

    width: 210px;
    height: 28px;

    left: 45px;
    top: 50px;

    background:
        linear-gradient(
            90deg,
            #333,
            #999,
            #444
        );

    border: 2px solid #38b6ff;

    transform: skewX(-12deg);

    border-radius: 4px;
}


/* =====================================================
   HYDRAULIC CYLINDER
===================================================== */

.hydraulic-cylinder {
    position: absolute;

    width: 190px;
    height: 50px;

    left: 60px;
    top: 75px;

    transform: rotate(-7deg);

    transform-style: preserve-3d;
}


/* BODY */

.cylinder-body {
    position: absolute;

    width: 115px;
    height: 44px;

    left: 0;
    top: 0;

    background:
        linear-gradient(
            90deg,
            #444,
            #aaa,
            #333
        );

    border: 2px solid #38b6ff;

    border-radius: 7px;
}


/* ROD */

.cylinder-rod {
    position: absolute;

    width: 75px;
    height: 15px;

    right: 0;
    top: 14px;

    background:
        linear-gradient(
            90deg,
            #aaa,
            #eee,
            #666
        );

    border-radius: 4px;
}


/* END */

.cylinder-end {
    position: absolute;

    width: 18px;
    height: 47px;

    left: 105px;
    top: -1px;

    background: #333;

    border: 2px solid #ff5757;

    border-radius: 4px;
}


/* =====================================================
   GEAR
===================================================== */

.machine-gear {
    position: absolute;

    right: 15px;
    bottom: 62px;

    font-size: 90px;

    color: #777;

    text-shadow:
        0 0 5px #38b6ff,
        0 0 20px rgba(56,182,255,.25);

    animation:
        gear-spin 12s linear infinite;
}

@keyframes gear-spin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =====================================================
   SUPPORT
===================================================== */

.machine-support {
    position: absolute;

    width: 55px;
    height: 90px;

    left: 25px;
    bottom: 55px;

    background:
        linear-gradient(
            90deg,
            #333,
            #777,
            #333
        );

    border: 2px solid #555;

    transform: skewY(-10deg);
}


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

.cad-card {
    position: absolute;

    z-index: 30;

    display: flex;

    flex-direction: column;

    gap: 4px;

    padding: 10px 13px;

    min-width: 125px;

    background: rgba(4, 8, 13, .9);

    border: 1px solid rgba(56, 182, 255, .28);

    border-radius: 5px;

    backdrop-filter: blur(8px);

    box-shadow:
        0 10px 30px rgba(0,0,0,.4);
}

.cad-card small {
    color: #ff5757;

    font-size: 9px;

    letter-spacing: 2px;
}

.cad-card strong {
    color: #ffffff;

    font-size: 9px;

    letter-spacing: 1px;
}


/* POSITIONS */

.card-top {
    top: 80px;
    right: 20px;
}

.card-left {
    left: 18px;
    bottom: 100px;
}

.card-right {
    right: 20px;
    bottom: 55px;
}


/* =====================================================
   DIMENSION
===================================================== */

.dimension-horizontal {
    position: absolute;

    left: 50%;

    bottom: 25px;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    gap: 8px;

    color: #68747f;

    font-size: 9px;

    letter-spacing: 1px;
}

.dimension-horizontal span {
    display: block;

    width: 55px;

    height: 1px;

    background: #38b6ff;

    opacity: .5;
}

.dimension-horizontal b {
    color: #38b6ff;

    font-weight: 500;
}


/* =====================================================
   XYZ AXIS
===================================================== */

.xyz-axis {
    position: absolute;

    left: 20px;
    top: 20px;

    width: 45px;
    height: 45px;

    font-size: 9px;

    font-weight: bold;
}

.axis-x {
    position: absolute;

    right: 0;
    top: 20px;

    color: #ff5757;
}

.axis-y {
    position: absolute;

    left: 18px;
    top: 0;

    color: #38b6ff;
}

.axis-z {
    position: absolute;

    left: 2px;
    bottom: 0;

    color: #ffffff;
}


/* =====================================================
   STATUS
===================================================== */

.cad-status {
    position: absolute;

    right: 20px;
    top: 20px;

    color: #68747f;

    font-size: 8px;

    letter-spacing: 1.5px;
}

.cad-status span {
    display: inline-block;

    width: 6px;
    height: 6px;

    margin-right: 6px;

    background: #38b6ff;

    border-radius: 50%;

    box-shadow:
        0 0 10px #38b6ff;
}


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

@media (max-width: 1000px) {

    .services-hero {
        padding: 90px 5%;
    }

    .services-hero-content {
        width: 45%;
    }

    .services-hero-visual {
        width: 52%;

        height: 470px;
    }

    .cad-machine {
        transform:
            translateX(-50%)
            scale(.82)
            rotateX(8deg)
            rotateY(-15deg);
    }

}


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

@media (max-width: 768px) {

    .services-hero {
        min-height: auto;

        flex-direction: column;

        gap: 55px;

        padding: 100px 6% 70px;
    }

    .services-hero-content {
        width: 100%;

        text-align: left;
    }

    .services-hero-content h1 {
        font-size: 48px;
    }

    .services-hero-content p {
        font-size: 15px;
    }

    .hero-buttons {
        flex-wrap: wrap;
    }

    .services-hero-visual {
        width: 100%;

        height: 420px;
    }

    .cad-machine {
        transform:
            translateX(-50%)
            scale(.68)
            rotateX(8deg)
            rotateY(-15deg);
    }

    .card-right {
        display: none;
    }

}


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

@media (max-width: 480px) {

    .services-hero-content h1 {
        font-size: 42px;
    }

    .services-hero-visual {
        height: 380px;
    }

    .cad-machine {
        transform:
            translateX(-50%)
            scale(.58)
            rotateX(8deg)
            rotateY(-15deg);
    }

    .card-top {
        right: 10px;
    }

    .card-left {
        left: 10px;
    }

    .hero-outline-btn {
        display: none;
    }

}
/* ==============================
   SERVICE INTRODUCTION
================================= */

.service-intro {
    background: #ecba05;
    color: #0b0c0c;

    padding: 80px 8%;

    display: flex;
    align-items: center;

    gap: 80px;
}


/* CONTENT */

.service-intro-content {
    width: 55%;
    max-width: 650px;
}


/* HEADING */

.service-intro-content h2 {
    font-family: Georgia, serif;

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

    margin: 18px 0 25px;
}


/* TEXT */

.service-intro-content p {
    color: #111010;

    font-size: 15px;

    line-height: 1.8;

    margin-bottom: 18px;
}


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

.intro-highlights {
    display: flex;

    gap: 35px;

    margin-top: 35px;

    padding-top: 25px;

    border-top: 1px solid #292d31;
}

.intro-highlights div {
    display: flex;

    flex-direction: column;

    gap: 6px;
}

.intro-highlights strong {
    color: #fff;

    font-size: 17px;
}

.intro-highlights span {
    color: #1b12c8;

    font-size: 15px;
}


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

.service-intro-image {
    width: 45%;
    height: 480px;

    overflow: hidden;

    border: 1px solid #24292d;
}

.service-intro-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter: brightness(0.75);

    transition: transform 0.5s ease,
                filter 0.5s ease;
}

.service-intro-image:hover img {
    transform: scale(1.04);

    filter: brightness(0.9);
}


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

@media (max-width: 900px) {

    .service-intro {
        flex-direction: column;

        gap: 50px;

        padding: 80px 6%;
    }

    .service-intro-content,
    .service-intro-image {
        width: 100%;
    }

    .service-intro-image {
        height: 400px;
    }

    .service-intro-content h2 {
        font-size: 42px;
    }
}


@media (max-width: 600px) {

    .service-intro {
        padding: 65px 5%;
    }

    .service-intro-content h2 {
        font-size: 36px;
    }

    .intro-highlights {
        flex-direction: column;

        gap: 18px;
    }

    .service-intro-image {
        height: 320px;
    }
}

/* ============================== 
   SERVICES SECTION 
================================ */ 
 
.all-mohan-services { 
    padding: 60px 5%; 
    background: #f7f9fc; 
} 
 
 
/* TITLE */ 
 
.mohan-services-title { 
    text-align: center; 
    margin-bottom: 45px; 
} 
 
.mohan-ervices-title span { 
    color: #0066cc; 
    font-size: 14px; 
    font-weight: 800; 
    letter-spacing: 2px; 
} 
 
.mohan-services-title h2 { 
    margin: 10px 0; 
 
    font-size: 38px; 
    font-weight: 800; 
 
    color: #003366; 
} 
 
.mohan-services-title p { 
    margin: 0; 
 
    font-size: 16px; 
    color: #666; 
} 
 
 
/* ============================== 
   4 × 4 GRID 
================================ */ 
 
.mohan-services-grid { 
    display: grid; 
 
    grid-template-columns: 
        repeat(4, 1fr); 
 
    gap: 22px; 
 
    max-width: 1500px; 
    margin: auto; 
} 
 
 
/* ============================== 
   SERVICE BOX 
================================ */ 
 
.mohan-service-card { 
    position: relative; 
 
    background: #ffffff; 
 
    border-radius: 16px; 
 
    overflow: hidden; 
 
    border: 1px solid #dce3eb; 
 
    box-shadow: 
        0 5px 18px rgba(9, 130, 251, 0.1); 
 
    transition: 
        transform 0.3s ease, 
        box-shadow 0.3s ease; 
} 
 
.mohan-service-card:hover { 
    transform: translateY(-7px); 
 
    box-shadow: 
        0 15px 35px rgba(0, 51, 102, 0.18); 
} 
 
 
/* ============================== 
   HEADER 
================================ */ 
 
.mohan-service-heading { 
    position: relative; 
 
    height: 62px; 
 
    display: flex; 
    align-items: center; 
 
    padding-left: 82px; 
    padding-right: 12px; 
 
    color: white; 
 
    background: linear-gradient( 
        90deg, 
        #0066cc, 
        #003366 
    ); 
     /* CURVE */ 
    border-radius: 21px 21px 21px 21px; 
 
    overflow: hidden; 
 
    background: linear-gradient( 
        90deg, 
        #0066cc, 
        #003366 
    ); 
 
} 
 
 
/* NUMBER */ 
 
.mohan-service-heading span { 
    position: absolute; 
 
    left: 0; 
    top: 0; 
 
    width: 70px; 
    height: 62px; 
 
    display: flex; 
    align-items: center; 
    justify-content: center; 
 
    font-size: 27px; 
    font-weight: 900; 
 
    font-style: italic; 
 
    background: #0066cc; 
 
    color: #ffffff; 
 
    border-radius: 
        0 0 15px 0; 
 
    border-right: 
        2px solid rgba(255,255,255,0.8); 
         /* CURVE */ 
    border-radius: 0 0 18px 0; 
 
    border-right: 3px solid #fff; 
    border-bottom: 3px solid #fff; 
 
    z-index: 2; 
 
} 
 
 
/* SERVICE NAME */ 
 
.mohan-service-heading h3 { 
    margin: 0; 
 
    font-size: 16px; 
 
    line-height: 1.15; 
 
    font-weight: 800; 
 
    color: #ffffff; 
} 
 
 
/* ============================== 
   CENTER IMAGE 
================================ */ 
 
.mohan-service-image { 
    width: 100%; 
 
    height: 200px; 
object-fit: cover; 
    background: #f3080800; 
 
    display: block; 
    align-items: center; 
    justify-content: center; 
 
    overflow: hidden; 
} 
 
.mohan-service-image img { 
    width: 100%; 
    height: 100%; 
 
   object-fit: contain; 
background: transparent;
    padding: 6px; 
   margin: 0;
    transition: none;
    transition: none; 
} 
/* IMAGE NO ZOOM */ 
 
.mohan-service-card:hover > img { 
 
    transform: none;
} 
 
 
/* ============================== 
   BOTTOM CONTENT 
================================ */ 
 
.mohan-service-content { 
    min-height: 92px; 
 
    padding: 14px 15px 16px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: center; 
 
    text-align: center; 
 
    background: #ffffff; 
} 
 
 
/* DESCRIPTION */ 
 
.mohan-service-content p { 
    margin: 0 0 12px; 
 
    font-size: 13px; 
 
    line-height: 1.35; 
 
    font-weight: 600; 
 
    color: #222; 
} 
 
 
/* ============================== 
   BUTTON 
================================ */ 
 
.mohan-service-content a { 
    display: inline-flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    gap: 7px; 
 
    padding: 7px 14px; 
 
    border-radius: 5px; 
 
    background: #ffffff; 
 
    border: 1.5px solid #0066cc; 
 
    color: #0066cc; 
 
    text-decoration: none; 
 
    font-size: 11px; 
 
    font-weight: 800; 
 
    transition: 0.3s ease; 
} 
 
.mohan-service-content a b { 
    font-size: 16px; 
 
    line-height: 10px; 
} 
 
.mohan-service-content a:hover { 
    background: #63cc0063; 
 
    color: #ffffff; 
 
    transform: translateX(2px); 
} 
 
 
/* ============================== 
   BLUE / RED / YELLOW 
================================ */ 
 
/* 01, 04, 07, 10, 13, 16 */ 
 
.mohan-service-card:nth-child(3n + 1) 
.mohan-service-heading { 
    background: 
        linear-gradient( 
            90deg, 
            #0066cc, 
            #003366 
        ); 
} 
 
.mohan-service-card:nth-child(3n + 1) 
.mohan-service-heading span { 
    background: #0066cc; 
} 
 
.mohan-service-card:nth-child(3n + 1) 
.mohan-service-content a { 
    border-color: #0066cc; 
    color: #0066cc; 
} 
 
 
/* RED */ 
 
/* 02, 05, 08, 11, 14 */ 
 
.mohan-service-card:nth-child(3n + 2) 
.mohan-service-heading { 
    background: 
        linear-gradient( 
            90deg, 
            #ed1c24, 
            #b40009 
        ); 
} 
 
.mohan-service-card:nth-child(3n + 2) 
.mohan-service-heading span { 
    background: #ed1c24; 
} 
 
.mohan-service-card:nth-child(3n + 2) 
.mohan-service-content a { 
    border-color: #ed1c24; 
    color: #ed1c24; 
} 
 
 
/* YELLOW */ 
 
/* 03, 06, 09, 12, 15 */ 
 
.mohan-service-card:nth-child(3n + 3) 
.mohan-service-heading { 
    background: 
        linear-gradient( 
            90deg, 
            #ffc400, 
            #efa900 
        ); 
} 
 
.mohan-service-card:nth-child(3n + 3) 
.mohan-service-heading span { 
    background: #ffc400; 
    color: #003366; 
} 
 
.mohan-service-card:nth-child(3n + 3) 
.mohan-service-content a { 
    border-color: #efa900; 
    color: #d18f00; 
} 
 
 
/* ============================== 
   RESPONSIVE 
================================ */ 
 
@media (max-width: 1200px) { 
 
    .mohan-services-grid { 
        grid-template-columns: 
            repeat(3, 1fr); 
    } 
 
} 
 
 
@media (max-width: 850px) { 
 
    .mohan-services-grid { 
        grid-template-columns: 
            repeat(2, 1fr); 
    } 
 
} 
 
 
@media (max-width: 550px) { 
 
    .all-mohan-services { 
        padding: 55px 20px; 
    } 
 
    .mohan-services-grid { 
        grid-template-columns: 1fr; 
    } 
 
    .mohan-services-title h2 { 
        font-size: 28px; 
    } 
 
    .mohan-service-image { 
        height: 190px; 
    } 
 
}
/* ==============================
   WHY CHOOSE MECHCAD
================================= */

.choose-section {
    background: #080b0e;
    color: #ffffff;
    padding: 110px 8%;
}


/* HEADING */

.choose-title {
    max-width: 750px;
    margin: 0 auto 75px;
    text-align: center;
}

.choose-title span {
    display: block;
    color: #d99d00;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    margin-bottom: 18px;
}

.choose-title h2 {
    margin: 0 0 20px;
    font-family: Georgia, serif;
    font-size: 52px;
    line-height: 1.15;
}

.choose-title p {
    max-width: 650px;
    margin: auto;
    color: #9da3a8;
    font-size: 15px;
    line-height: 1.8;
}


/* ==============================
   4 POINTS
================================= */

.choose-list {
    max-width: 1200px;
    margin: auto;

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


/* ITEM */

.choose-item {
    position: relative;
    padding: 32px 20px 20px 0;

    border-top: 1px solid #30353a;

    transition: 0.35s ease;
}


/* GOLD TOP LINE */

.choose-item::before {
    content: "";
    position: absolute;

    top: -1px;
    left: 0;

    width: 0;
    height: 2px;

    background: #0bd1f9;

    transition: width 0.4s ease;
}

.choose-item:hover::before {
    width: 100%;
}


/* NUMBER */

.choose-number {
    color: #d99d00;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 22px;
}


/* TITLE */

.choose-item h3 {
    margin: 0 0 15px;

    color: #ffffff;

    font-family: Georgia, serif;
    font-size: 22px;
    line-height: 1.3;
}


/* DESCRIPTION */

.choose-item p {
    margin: 0;

    color: #92989d;

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


/* HOVER */

.choose-item:hover {
    transform: translateY(-6px);
}


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

@media (max-width: 900px) {

    .choose-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 45px 30px;
    }

    .choose-title h2 {
        font-size: 42px;
    }
}


@media (max-width: 600px) {

    .choose-section {
        padding: 75px 6%;
    }

    .choose-list {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .choose-title {
        margin-bottom: 55px;
    }

    .choose-title h2 {
        font-size: 35px;
    }
}
/* ==============================
   DESIGN PROCESS
================================= */

.design-processs {
    background: #f4f5f7;
    color: #060560;
    padding: 60px 8%;
}


/* HEADING */

.processs-heading {
    max-width: 750px;
    margin: 0 auto 75px;
    text-align: center;
}

.processs-heading span {
    display: block;
    color: #f9b50a;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 3px;
    margin-bottom: 18px;
}

.processs-heading h2 {
    font-family: Georgia, serif;
    font-size: 52px;
    margin: 0 0 20px;
}

.processs-heading p {
    color: #0c0d0d;
    font-size: 16px;
    line-height: 1;
}


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

.processs-steps {
    max-width: 1250px;
    margin: auto;

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


/* STEP */

.processs-step {
    width: 200px;
    flex: 0 0 150px;

    text-align: center;
}


/* NUMBER CIRCLE */
/* ==============================
   3D PROCESS IMAGE
================================= */

.processs-images {
    width: 130px;
    height: 130px;

    margin: 0 auto 25px;

    border-radius: 50%;

   

    

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

    overflow: hidden;

    transition: 0.4s ease;
}

.processs-images img {
    width: 85%;
    height: 85%;

    object-fit: contain;

    transition: transform 0.4s ease;
}


/* HOVER */

.processs-step:hover .processs-images {
    border-color: #ffffff;

    transform: translateY(-7px);

    box-shadow: 0 10px 25px rgba(217, 157, 0, 0.15);
}

.processs-step:hover .processs-images img {
    transform: scale(1.08);
}


/* TITLE */

.processs-step h3 {
    font-family: Georgia, serif;
    font-size: 20px;

    margin-bottom: 14px;
}


/* TEXT */

.processs-step p {
    color: #0d1216;
    font-size: 14px;
    line-height: 1.7;
}


/* ARROW */

.processs-arrows {
    
    color: #0cbfe2;

    font-size: 30px;

    margin-top: 50px;
}


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

@media (max-width: 1050px) {

    .processs-steps {
        flex-wrap: wrap;
        gap: 45px;
    }

    .processs-arrow {
        display: none;
    }
}


@media (max-width: 600px) {

    .design-processs {
        padding: 75px 6%;
    }

    .processs-heading h2 {
        font-size: 36px;
    }

    .processs-steps {
        flex-direction: column;
        align-items: center;
    }

    .processs-step {
        width: 100%;
        max-width: 320px;
    }
}
/* ==============================
   SERVICES CTA
================================= */

.services-cta {
    background: #171716c6;
    padding: 100px 8%;
    text-align: center;
}

.cta-content {
    max-width: 750px;
    margin: auto;
}

.cta-content > span {
    display: block;
    color: #1a1a1a;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 18px;
}

.cta-content h2 {
    color: #030507;
    font-family: Georgia, serif;
    font-size: 55px;
    margin: 0 0 20px;
}

.cta-content p {
    max-width: 600px;
    margin: 0 auto 35px;
    color: #29230f;
    font-size: 16px;
    line-height: 1.8;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    background: #030507;
    color: hwb(199 1% 56%);

    padding: 16px 30px;

    text-decoration: none;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;

    transition: 0.3s ease;
}

.cta-button span {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.cta-button:hover {
    background: #ffffff;
    color: #030507;
    transform: translateY(-4px);
}

.cta-button:hover span {
    transform: translateX(5px);
}


/* MOBILE */

@media (max-width: 600px) {

    .services-cta {
        padding: 75px 6%;
    }

    .cta-content h2 {
        font-size: 38px;
    }

    .cta-content p {
        font-size: 14px;
    }
}

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

.p-navbar {
    width: 100%;
    height: 75px;

    background: #05080b;

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

    padding: 0 6%;

    border-bottom: 1px solid #222;
}

.p-logo {
    font-size: 22px;
    font-weight: bold;
}

.p-logo span {
    color: #d99d00;
}

.p-nav {
    display: flex;
    gap: 30px;
}

.p-nav a {
    color: #e01515;
    text-decoration: none;
    font-size: 14px;
}

.p-nav a:hover,
.p-nav .p-active {
    color: #d99d00;
}
/* =========================================
   PROJECT HERO
========================================= */

.project-hero {
    position: relative;

    min-height: 650px;

    padding: 110px 6%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 60px;

    overflow: hidden;

    background: #f7f9fc;
}


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

.project-hero-content {
    position: relative;

    z-index: 5;

    max-width: 620px;
}


/* SMALL TITLE */

.project-small-title {
    margin: 0 0 15px;

    color: #F9822E;

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

    letter-spacing: 3px;
}


/* MAIN TITLE */

.project-hero h1 {
    margin: 0;

    color: #111827;

    font-size: clamp(65px, 8vw, 110px);

    font-weight: 900;

    line-height: .9;

    letter-spacing: -4px;
}


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

.project-line {
    display: flex;

    align-items: center;

    gap: 8px;

    margin: 28px 0 30px;
}

.project-line span {
    display: block;

    width: 70px;
    height: 4px;

    background: #1E40AF;
}

.project-line i {
    display: block;

    width: 15px;
    height: 4px;

    background: #F9822E;
}


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

.project-description {
    max-width: 580px;
}

.project-description p {
    margin: 0;

    color: #667085;

    font-size: 15px;

    line-height: 1.8;
}


/* TAGLINE */

.project-description .project-tagline {
    margin-bottom: 12px;

    color: #1E40AF;

    font-size: 17px;

    font-weight: 700;
}


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

.project-hero-info {
    display: flex;

    gap: 35px;

    margin-top: 38px;
}

.project-hero-info div {
    display: flex;

    flex-direction: column;

    gap: 5px;
}

.project-hero-info strong {
    color: #1E40AF;

    font-size: 18px;

    font-weight: 800;
}

.project-hero-info span {
    color: #667085;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.2px;
}


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

.project-hero-visual {
    position: relative;

    width: 100%;
    height: 470px;

    display: flex;

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


/* =========================================
   WORKSTATION
========================================= */

.cad-workstation {
    position: relative;

    width: 520px;
    height: 400px;

    transform: perspective(900px) rotateY(-5deg);

    filter:
        drop-shadow(0 30px 30px rgba(15,23,42,.12));
}


/* =========================================
   TABLE
========================================= */

.cad-table {
    position: absolute;

    left: 40px;
    right: 40px;

    bottom: 30px;

    height: 105px;
}


/* TABLE TOP */

.table-top {
    position: absolute;

    left: 0;
    right: 0;

    top: 0;

    height: 25px;

    background: #26364f;

    border-radius: 5px;

    transform:
        perspective(300px)
        rotateX(8deg);
}


/* TABLE LEGS */

.table-leg {
    position: absolute;

    top: 20px;

    width: 14px;
    height: 90px;

    background: #34445d;

    border-radius: 3px;
}

.table-leg.left {
    left: 35px;
}

.table-leg.right {
    right: 35px;
}


/* =========================================
   MONITOR
========================================= */

.cad-monitor {
    position: absolute;

    left: 100px;

    top: 15px;

    width: 320px;

    height: 290px;
}


/* MONITOR FRAME */

.monitor-frame {
    position: relative;

    width: 320px;
    height: 215px;

    padding: 10px;

    background: #172033;

    border-radius: 8px;

    box-shadow:
        0 15px 30px rgba(0,0,0,.18);
}


/* MONITOR TOP */

.monitor-top {
    height: 20px;

    display: flex;

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

    padding: 0 5px;
}

.monitor-top span {
    color: #94a3b8;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1px;
}


/* DOTS */

.monitor-dots {
    display: flex;

    gap: 4px;
}

.monitor-dots i {
    width: 5px;
    height: 5px;

    display: block;

    background: #475569;

    border-radius: 50%;
}


/* =========================================
   CAD SCREEN
========================================= */

.cad-screen {
    position: relative;

    width: 100%;
    height: 175px;

    overflow: hidden;

    background: #eef4f8;

    border-radius: 3px;
}


/* GRID */

.cad-grid {
    position: absolute;

    inset: 0;

    opacity: .55;

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

    background-size: 18px 18px;
}


/* =========================================
   CAD PART
========================================= */

.cad-part {
    position: absolute;

    left: 105px;
    top: 45px;

    width: 125px;
    height: 85px;
}


/* MAIN PART */

.cad-part-main {
    position: absolute;

    inset: 0;

    background: #1E40AF;

    border: 3px solid #0f2d83;

    border-radius: 8px;

    transform:
        perspective(300px)
        rotateX(12deg)
        rotateZ(-5deg);

    box-shadow:
        7px 8px 0 #c3ccd8;
}


/* CAD HOLES */

.cad-hole {
    position: absolute;

    width: 15px;
    height: 15px;

    background: #eef4f8;

    border: 3px solid #0f2d83;

    border-radius: 50%;

    z-index: 5;
}

.hole-1 {
    left: 15px;
    top: 15px;
}

.hole-2 {
    right: 15px;
    top: 15px;
}

.hole-3 {
    left: 53px;
    bottom: 10px;
}


/* CAD CUT */

.cad-cut {
    position: absolute;

    width: 50px;
    height: 20px;

    left: 38px;
    top: 30px;

    background: #eef4f8;

    border-radius: 3px;

    z-index: 5;
}


/* =========================================
   DIMENSIONS
========================================= */

.dimension {
    position: absolute;

    border-color: #F9822E;

    border-style: dashed;

    z-index: 10;
}

.dimension.horizontal {
    width: 135px;

    left: 100px;
    bottom: 25px;

    border-top-width: 1px;
}

.dimension.vertical {
    height: 85px;

    left: 75px;
    top: 45px;

    border-left-width: 1px;
}

.dimension span {
    position: absolute;

    padding: 2px 4px;

    color: #F9822E;

    background: #eef4f8;

    font-size: 7px;

    font-weight: 800;
}

.dimension.horizontal span {
    left: 55px;
    top: 3px;
}

.dimension.vertical span {
    left: -18px;
    top: 35px;
}


/* =========================================
   CAD AXIS
========================================= */

.cad-axis {
    position: absolute;

    font-size: 8px;

    font-weight: 800;
}

.x-axis {
    right: 18px;
    bottom: 12px;

    color: #F9822E;
}

.y-axis {
    right: 10px;
    bottom: 25px;

    color: #1E40AF;
}


/* =========================================
   MONITOR STAND
========================================= */

.monitor-stand {
    position: absolute;

    left: 145px;

    top: 215px;

    width: 30px;
    height: 48px;

    background: #26364f;
}


/* MONITOR BASE */

.monitor-base {
    position: absolute;

    left: 115px;

    top: 255px;

    width: 90px;
    height: 12px;

    background: #26364f;

    border-radius: 50%;
}


/* =========================================
   KEYBOARD
========================================= */

.cad-keyboard {
    position: absolute;

    left: 155px;

    bottom: 75px;

    width: 215px;
    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    padding: 7px;

    background: #d7dee7;

    border: 1px solid #aeb9c7;

    border-radius: 5px;

    transform:
        perspective(300px)
        rotateX(45deg);
}

.cad-keyboard span {
    width: 12px;
    height: 8px;

    background: #8b98aa;

    border-radius: 2px;
}


/* =========================================
   MOUSE
========================================= */

.cad-mouse {
    position: absolute;

    right: 70px;

    bottom: 70px;

    width: 32px;
    height: 48px;

    background: #d7dee7;

    border: 1px solid #aeb9c7;

    border-radius: 50% 50% 45% 45%;

    transform: rotate(-10deg);
}


/* =========================================
   FLOATING LABEL
========================================= */

.floating-cad-label {
    position: absolute;

    right: 15px;
    top: 30px;

    padding: 12px 15px;

    display: flex;

    flex-direction: column;

    gap: 4px;

    background: #ffffff;

    border-left: 3px solid #F9822E;

    box-shadow:
        0 12px 25px rgba(15,23,42,.10);
}

.floating-cad-label small {
    color: #98a2b3;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1px;
}

.floating-cad-label strong {
    color: #1E40AF;

    font-size: 12px;

    letter-spacing: 1px;
}


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

@media (max-width: 1000px) {

    .project-hero {
        grid-template-columns: 1fr;

        padding: 90px 6%;

        text-align: center;
    }

    .project-hero-content {
        margin: auto;
    }

    .project-line {
        justify-content: center;
    }

    .project-description {
        margin: auto;
    }

    .project-hero-info {
        justify-content: center;
    }

    .project-hero-visual {
        margin-top: 20px;
    }
}


@media (max-width: 600px) {

    .project-hero {
        padding: 70px 20px;
    }

    .project-hero h1 {
        font-size: 58px;

        letter-spacing: -2px;
    }

    .project-description p {
        font-size: 13px;
    }

    .project-hero-info {
        gap: 18px;
    }

    .project-hero-visual {
        height: 350px;
    }

    .cad-workstation {
        transform: scale(.68);
        transform-origin: center;
    }
}
/* =========================================
   PROJECT CAPABILITY STRIP
========================================= */

.project-capability {
    display: grid;

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

    padding: 0 8%;

    background: #ffffff;

    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}


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

.capability-item {
    position: relative;

    display: flex;

    align-items: center;

    gap: 18px;

    min-height: 115px;

    padding: 25px 25px;

    border-right: 1px solid #e5e7eb;

    transition: .3s ease;
}


/* REMOVE LAST BORDER */

.capability-item:last-child {
    border-right: none;
}


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

.capability-number {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;

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

    color: #ffffff;

    background: #1E40AF;

    border-radius: 4px;

    font-size: 10px;

    font-weight: 800;

    transition: .3s ease;
}


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

.capability-item small {
    display: block;

    margin-bottom: 5px;

    color: #F9822E;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.capability-item h3 {
    margin: 0;

    color: #1f2937;

    font-size: 14px;

    font-weight: 700;
}


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

.capability-item:hover {
    background: #f7f9fc;
}

.capability-item:hover .capability-number {
    background: #F9822E;
}


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

@media (max-width: 950px) {

    .project-capability {
        grid-template-columns: repeat(2, 1fr);

        padding: 0 6%;
    }

    .capability-item:nth-child(2) {
        border-right: none;
    }

    .capability-item:nth-child(-n+2) {
        border-bottom: 1px solid #e5e7eb;
    }
}


@media (max-width: 600px) {

    .project-capability {
        grid-template-columns: 1fr;

        padding: 0 20px;
    }

    .capability-item {
        min-height: 90px;

        border-right: none;

        border-bottom: 1px solid #e5e7eb;
    }

    .capability-item:last-child {
        border-bottom: none;
    }
}


/* =================================
   PROJECT SECTION
================================= */

.p-projects {
    padding: 90px 6%;
    background: #030507;
}


/* HEADING */

.p-heading {
    text-align: center;
    margin-bottom: 55px;
}

.p-heading > div:first-child {
    color: #d99d00;
    font-size: 13px;
    letter-spacing: 3px;
}

.p-heading h2 {
    font-family: Georgia, serif;
    font-size: 48px;
    margin: 12px 0 20px;
}


/* HEADING LINE */

.p-heading-line {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 10px;
}

.p-heading-line span {
    width: 170px;
    height: 2px;
    background: #777;
}

.p-heading-line b {
    width: 45px;
    height: 5px;
    background: #d99d00;
    border-radius: 10px;
}


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

.p-grid {
    max-width: 1250px;
    margin: auto;

    display: grid;

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

    gap: 22px;
}


/* CARD */

.p-card {

    background: #f3f5f7;

    border: 1px solid #222;

    overflow: hidden;

    transition: 0.35s ease;
}


/* IMAGE */

.p-card img {

    width: 100%;
    height: 230px;

    display: block;

    object-fit: contain;

    transition: 0.5s ease;
}


/* CONTENT */

.p-card-content {
    padding: 18px;
}

.p-card-content small {
    color: #d99d00;
    font-weight: bold;
}

.p-card-content h3 {
    font-size: 18px;
    margin: 8px 0;
}

.p-card-content p {
    color: #131212;
    font-size: 13px;
    line-height: 1.6;
}


/* HOVER */

.p-card:hover {

    border-color: #d99d00;

    transform: translateY(-5px);
}

.p-card:hover img {
    transform: scale(1.06);
}


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

@media (max-width: 1000px) {

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

    .p-nav {
        gap: 15px;
    }
}


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

@media (max-width: 600px) {

    .p-navbar {
        height: auto;
        padding: 20px;

        flex-direction: column;
        gap: 18px;
    }

    .p-nav {
        flex-wrap: wrap;
        justify-content: center;
    }

    .p-hero {
        height: 450px;
    }

    .p-hero h1 {
        font-size: 45px;
    }

    .p-heading h2 {
        font-size: 36px;
    }

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


/* =========================
   PROJECT HERO1
/* =========================================
   PROJECT DER SECTION
========================================= */

.project-der {
    width: 100%;
    min-height: 100px;

    background: #fafdff;

    color: rgb(21, 20, 20);

    padding: 80px 1%;

    display: flex;
    flex-direction: column;
    align-items: center;
}


/* =========================================
   PROJECT DER CONTENT
========================================= */

.project-der-content {
    width: 100%;
    max-width: 900px;

    text-align: center;

    margin-bottom: 70px;
}


/* SMALL TITLE */

.project-der-content > p:first-child {
    color: #0c0c0c;

    font-size: 17px;
    font-weight: 600;

    letter-spacing: 4px;

    margin-bottom: 15px;
}


/* MAIN TITLE */

.project-der-content h1 {
    margin: 0;

    color: #02567c;

    font-family: Georgia, serif;

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

    letter-spacing: 3px;
}


/* =========================================
   PROJECT DER LINE
========================================= */

.project-der-line {
    width: 100%;

    display: flex;

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

    gap: 10px;

    margin: 25px 0;
}


/* LEFT LINE */

.project-der-line span {
    display: block;

    width: 180px;
    height: 2px;

    background: #121111;
}


/* CENTER GOLD MARK */

.project-der-line i {
    display: block;

    width: 45px;
    height: 5px;

    background: #f62105;

    border-radius: 10px;

    flex-shrink: 0;
}


/* RIGHT LINE */

.project-der-line samp {
    display: block;

    width: 180px;
    height: 2px;

    background: #151515;

    font-size: 0;
}


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

.project-der-content .der-text {
    color: #121212;

    font-size: 15px;

    line-height: 1.7;

    margin: 0;
}


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

.project-list {
    width: 100%;

    max-width: 1150px;

    display: grid;

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

    column-gap: 80px;

    row-gap: 15px;
}
.project-list a h3 {
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

.project-list a h3 {
    display: inline-block;
    border-bottom: 2px solid #57d900;
    padding-bottom: 8px;
}
/* =========================================
   PROJECT LINK
========================================= */

.project-list a {

    display: block;

    color: #024270;

    text-decoration: none;

    padding: 1px 0;

    transition: 0.3s ease;
}


/* PROJECT NAME */

.project-list a h3 {

    margin: 0;

    font-family: Georgia, serif;

    font-size: 19px;

    font-weight: 500;

    line-height: 1.4;

    transition: 0.3s ease;
}


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

.project-list a:hover {

    transform: translateX(8px);
}

.project-list a:hover h3 {

    color: #791d05;
}

/* =========================================
   SEE ALL PROJECTS BUTTON
========================================= */

.see-all-projects {
    width: 100%;
    margin-top: 50px;

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

.see-all-projects a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #0aa7ea;
    padding: 10px 28px;

    border: 1px solid #d99d00;

    color: #0c0c0c;

    text-decoration: none;

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

    letter-spacing: 1.5px;

    transition: 0.3s ease;
}

.see-all-projects a span {
    font-size: 20px;

    transition: 0.3s ease;
}

.see-all-projects a:hover {
    background: #f21105;
    color: #141312;
}

.see-all-projects a:hover span {
    transform: translateX(6px);
}


/* MOBILE */

@media (max-width: 600px) {

    .see-all-projects {
        margin-top: 50px;
    }

    .see-all-projects a {
        padding: 12px 22px;
        font-size: 12px;
    }
}
/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .project-der {
        padding: 90px 5%;
    }

    .project-list {

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

        column-gap: 50px;

        row-gap: 45px;
    }

    .project-der-content h1 {
        font-size: 52px;
    }

    .project-der-line span,
    .project-der-line samp {
        width: 120px;
    }
}


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

@media (max-width: 600px) {

    .project-der {

        min-height: auto;

        padding: 70px 7% 80px;
    }


    .project-der-content {

        margin-bottom: 50px;
    }


    .project-der-content h1 {

        font-size: 40px;

        letter-spacing: 2px;
    }


    .project-der-line {

        gap: 7px;

        margin: 20px 0;
    }


    .project-der-line span,
    .project-der-line samp {

        width: 55px;
    }


    .project-der-line i {

        width: 35px;
        height: 4px;
    }


    .project-der-content .der-text {

        font-size: 14px;
    }


    .project-list {

        grid-template-columns: 1fr;

        row-gap: 30px;
    }


    .project-list a h3 {

        font-size: 18px;
    }
}
/* ==============================
   PROJECT CTA
================================= */

.project-cta {
    width: 100%;

    background: #d99d00;

    padding: 20px 6%;

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

    text-align: center;

    border-top: 3px solid #0881fa;
}

.project-cta-content {
    max-width: 850px;
}


/* SMALL TITLE */

.project-cta-content > p:first-child {
    color: #160202;

    font-size: 20px;

    letter-spacing: 4px;

    margin-bottom: 15px;
}


/* TITLE */

.project-cta h2 {
    color: white;

    font-family: Georgia, serif;

    font-size: 48px;

    font-weight: 500;

    margin: 0;
}


/* LINE */

.cta-line {
    display: flex;

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

    gap: 10px;

    margin: 25px 0;
}

.cta-line span,
.cta-line samp {
    display: block;

    width: 130px;
    height: 2px;

    background: #141313;
}

.cta-line i {
    display: block;

    width: 45px;
    height: 5px;

    background: #f13d06;

    border-radius: 10px;
}


/* TEXT */

.project-cta .cta-text {
    color: #0a0a0a;

    font-size: 17px;

    line-height: 1.7;

    margin-bottom: 30px;
}


/* BUTTON */

.cta-button {
    display: inline-flex;

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

    gap: 12px;

    padding: 14px 28px;

    border: 1px solid #d99d00;

    color: #d99d00;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 1.5px;

    transition: 0.3s ease;
}

.cta-button span {
    font-size: 20px;

    transition: 0.3s ease;
}


/* HOVER */

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

    color: #000;
}

.cta-button:hover span {
    transform: translateX(6px);
}


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

@media (max-width: 600px) {

    .project-cta {
        padding: 75px 6%;
    }

    .project-cta h2 {
        font-size: 34px;
    }

    .cta-line span,
    .cta-line samp {
        width: 55px;
    }

    .project-cta .cta-text {
        font-size: 14px;
    }
}
  /* contact pages */
/* =========================
   CONTACT HERO
========================= */

.contact-hero {
    width: 100%;

    min-height: 520px;

    background: #030507;

    color: white;

    display: flex;

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

    text-align: center;

    padding: 80px 6%;
}


.contact-hero-content {
    width: 100%;
    max-width: 850px;
}


/* SMALL TITLE */

.contact-hero-content > p:first-child {
    color: #d99d00;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 4px;

    margin-bottom: 15px;
}


/* MAIN TITLE */

.contact-hero-content h1 {
    margin: 0;

    font-family: Georgia, serif;

    font-size: 60px;

    font-weight: 500;

    letter-spacing: 3px;
}


/* LINE */

.contact-hero-line {
    display: flex;

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

    gap: 10px;

    margin: 25px 0;
}


/* LEFT LINE */

.contact-hero-line span {
    display: block;

    width: 170px;
    height: 2px;

    background: #777;
}


/* CENTER GOLD */

.contact-hero-line i {
    display: block;

    width: 45px;
    height: 5px;

    background: #d99d00;

    border-radius: 10px;
}


/* RIGHT LINE */

.contact-hero-line samp {
    display: block;

    width: 170px;
    height: 2px;

    background: #777;

    font-size: 0;
}


/* DESCRIPTION */

.contact-hero-text {
    color: #f9efef;

    font-size: 26px;

    line-height: 1.8;

    margin: 0 auto;

    max-width: 1000px;
}


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

@media (max-width: 600px) {

    .contact-hero {
        min-height: 450px;

        padding: 70px 6%;
    }

    .contact-hero-content h1 {
        font-size: 42px;
    }

    .contact-hero-line span,
    .contact-hero-line samp {
        width: 60px;
    }

    .contact-hero-text {
        font-size: 14px;
    }
}
/* ==============================
   CONTACT SECTION
================================ */

.contact-section {
    background: #030507;
    padding: 90px 3%;
    color: #fff;
}

.contact-container {
    max-width: 1180px;
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 55px;
}


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

.contact-left {
    width: 100%;
}

.contact-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 35px;
    margin-bottom: 28px;
}

.contact-info {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.contact-info > span {
    width: 38px;
    height: 38px;

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

    border: 1px solid #d99d00;
    border-radius: 50%;

    color: #d99d00;
    font-size: 18px;
}

.contact-info h4 {
    margin: 0 0 6px;
    font-size: 14px;
    text-transform: uppercase;
}

.contact-info p {
    margin: 0;
    color: #aaa;
    font-size: 11px;
}


/* ==============================
   MAP
================================ */

.contact-map {
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    border: 0;

    filter: grayscale(100%);
}


/* ==============================
   RIGHT FORM
================================ */

.contact-form-box {
    padding-top: 6px;
}

.contact-small-title {
    display: block;

    color: #d99d00;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;

    margin-bottom: 12px;
}

.contact-form-box h2 {
    font-family: Georgia, serif;

    font-size: 28px;
    font-weight: 600;

    margin: 0 0 20px;
}


/* INPUTS */

.contact-form-box input,
.contact-form-box textarea {
    width: 100%;
    box-sizing: border-box;

    background: transparent;

    border: 1px solid #666;

    color: #fff;

    padding: 12px 14px;

    margin-bottom: 10px;

    outline: none;

    font-size: 12px;
}

.contact-form-box input {
    height: 40px;
}

.contact-form-box textarea {
    height: 105px;
    resize: none;
}

.contact-form-box input:focus,
.contact-form-box textarea:focus {
    border-color: #d99d00;
}


/* BUTTON */

.contact-form-box button {
    width: 100%;
    height: 40px;

    border: none;

    background: #00527a;

    color: #fff;

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

    letter-spacing: 1px;

    cursor: pointer;

    transition: 0.3s;
}

.contact-form-box button:hover {
    background: #d99d00;
    color: #000;
}


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

@media (max-width: 768px) {

    .contact-section {
        padding: 60px 5%;
    }

    .contact-container {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .contact-info-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .contact-map {
        height: 260px;
    }

    .contact-form-box h2 {
        font-size: 25px;
    }
}
/* jug & fixture  page */
/* =========================================================
   JIG & FIXTURE - HERO SECTION
========================================================= */

.jig-hero {
    width: 100%;
    min-height: 600px;

    padding: 80px 7%;

    display: flex;
    align-items: center;

    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.94) 0%,
            rgba(0, 0, 0, 0.82) 38%,
            rgba(0, 0, 0, 0.58) 70%,
            rgba(0, 0, 0, 0.35) 100%
        ),
        url("images/project1.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* =========================================================
   BACKGROUND EFFECT
========================================================= */

.jig-hero::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 75% 50%,
            rgba(8, 123, 209, 0.15),
            transparent 35%
        );

    pointer-events: none;
}


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

.jig-hero-content {
    position: relative;

    z-index: 2;

    max-width: 650px;
}


/* SMALL TITLE */

.jig-hero-content span {
    display: inline-block;

    margin-bottom: 18px;

    color: #087bd1;

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

    letter-spacing: 3px;

    text-transform: uppercase;
}


/* MAIN HEADING */

.jig-hero-content h1 {
    margin: 0 0 22px;

    color: #ffffff;

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

    line-height: 1.05;

    letter-spacing: -1px;
}


/* GOLD DESIGN */

.jig-hero-content h1 strong {
    color: #f7c706;

    font-weight: 800;
}


/* DESCRIPTION */

.jig-hero-content p {
    max-width: 560px;

    margin: 0 0 30px;

    color: #d5dbe1;

    font-size: 17px;

    line-height: 1.7;
}


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

.jig-btn {
    display: inline-flex;

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

    gap: 10px;

    padding: 14px 26px;

    background: #087bd1;

    color: #ffffff;

    border-radius: 30px;

    text-decoration: none;

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

    transition: all 0.3s ease;

    box-shadow:
        0 8px 25px rgba(8, 123, 209, 0.30);
}


/* BUTTON HOVER */

.jig-btn:hover {
    background: #f7c706;

    color: #111111;

    transform: translateY(-4px);

    box-shadow:
        0 12px 30px rgba(247, 199, 6, 0.30);
}


/* ARROW */

.jig-btn i {
    font-size: 14px;

    transition: transform 0.3s ease;
}

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


/* =========================================================
   RIGHT SIDE LIGHT EFFECT
========================================================= */

.jig-hero::before {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    right: 5%;
    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    border: 1px solid rgba(8, 123, 209, 0.20);

    box-shadow:
        0 0 80px rgba(8, 123, 209, 0.08);

    pointer-events: none;
}


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

@media (max-width: 1000px) {

    .jig-hero {
        min-height: 550px;

        padding: 70px 6%;

        background-position: center;
    }

    .jig-hero-content {
        max-width: 600px;
    }

    .jig-hero-content h1 {
        font-size: 50px;
    }

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


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

@media (max-width: 700px) {

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

        padding: 70px 25px;

        background:
            linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.90),
                rgba(0, 0, 0, 0.70)
            ),
            url("images/project1.png");

        background-size: cover;

        background-position: center;
    }

    .jig-hero::before {
        display: none;
    }

    .jig-hero-content {
        max-width: 100%;
    }

    .jig-hero-content span {
        font-size: 12px;

        letter-spacing: 2px;
    }

    .jig-hero-content h1 {
        font-size: 42px;

        line-height: 1.08;
    }

    .jig-hero-content p {
        font-size: 15px;

        line-height: 1.6;
    }

    .jig-btn {
        padding: 13px 22px;

        font-size: 14px;
    }
}


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

@media (max-width: 450px) {

    .jig-hero {
        min-height: 500px;

        padding: 60px 20px;
    }

    .jig-hero-content h1 {
        font-size: 36px;
    }

    .jig-hero-content p {
        font-size: 14px;
    }

    .jig-btn {
        padding: 12px 20px;
    }
}
/* jig about */
.jig-about {
    padding: 100px 7%;

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

    background: #f5f5f5;
}

.jig-about-image {
    width: 48%;
    min-height: 400px;

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

    background: #f5f8fc;
    border-radius: 20px;
}

.jig-about-image img {
    width: 90%;
    height: 380px;

    object-fit: contain;
}

.jig-about-content {
    width: 52%;
}

.section-tag {
    color: #087bd1;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
}

.jig-about-content h2 {
    margin: 15px 0 20px;

    font-size: 42px;
    line-height: 1.15;

    color: #123b56;
}

.jig-about-content h2 strong {
    color: #b0b5ba;
}

.jig-about-content p {
    font-size: 16px;
    line-height: 1.7;

    color: #555;

    margin-bottom: 15px;
}


/* POINTS */

.jig-about-points {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 15px;

    margin-top: 30px;
}

.jig-about-points div {
    display: flex;
    align-items: center;
    gap: 12px;

    font-weight: 600;
    color: #123b56;
}

.jig-about-points i {
    width: 38px;
    height: 38px;

    border-radius: 50%;

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

    background: #eaf5ff;
    color: #087bd1;
}
---------------------------------
/* ourcapabilities */
-------------------------------------
.jig-design-section {
    padding: 10px 8%;
    background:  #e63946;
}


/* HEADING */

.jig-section-heading {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;

}

.jig-section-heading h2 {
    margin: 12px 0;

    font-size: 42px;
    color: #f7c706;
}

.jig-section-heading h2 strong {
    color: #c92f3d;
}

.jig-section-heading p {
    color: #0066FF;
    font-size: 16px;
    line-height: 1.6;
}


/* GRID */

.jig-design-grid {
    max-width: 1250px;
    margin: auto;

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

    gap: 25px;
}


/* CARD */

.jig-design-card {
    background: #ffffff;

    border: 1px solid #e2e8ef;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.08);

    transition: 0.35s ease;
}

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

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.14);
}


/* IMAGE */

.jig-card-image {
    height: 190px;

    background: #f5f8fc;

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

    overflow: hidden;
}

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

    object-fit: cover;

    transition: 0.4s ease;
}

.jig-design-card:hover .jig-card-image img {
    transform: scale(1.08);
}


/* CONTENT */

.jig-card-content {
    padding: 22px;
}

.jig-card-content > span {
    color: #087bd1;

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

.jig-card-content h3 {
    margin: 8px 0 10px;

    font-size: 21px;

    color: #123b56;
}

.jig-card-content p {
    margin: 0;

    color: #666;

    font-size: 14px;
    line-height: 1.6;
}


/* TABLET */

@media (max-width: 1000px) {

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

}


/* MOBILE */

@media (max-width: 600px) {

    .jig-design-section {
        padding: 70px 20px;
    }

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

    .jig-design-grid {
        grid-template-columns: 1fr;
    }

}
.jig-process {
    padding: 100px 7%;
    background: #f5f8fc;
}

.process-heading {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 70px;
}

.process-heading span {
    color: #087bd1;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
}

.process-heading h2 {
    margin: 12px 0;

    color: #123b56;
    font-size: 42px;
}

.process-heading h2 strong {
    color: #087bd1;
}

.process-heading p {
    color: #666;
    line-height: 1.6;
}


/* PROCESS GRID */

.process-grid {
    max-width: 1200px;
    margin: auto;

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

    gap: 25px;

    position: relative;
}


/* CONNECTING LINE */

.process-line {
    position: absolute;

    left: 15%;
    right: 15%;

    height: 2px;

    background: #087bd1;
}


/* STEP */

.process-step {
    text-align: center;

    position: relative;

    z-index: 2;

    background: #ffffff;

    padding: 30px 20px;

    border-radius: 18px;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.08);

    transition: 0.35s ease;
}

.process-step:hover {
    transform: translateY(-8px);
}


/* ICON */

.process-icon {
    width: 70px;
    height: 70px;

    margin: 0 auto 15px;

    border-radius: 50%;

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

    background: #087bd1;

    color: #ffffff;

    font-size: 25px;

    border: 6px solid #f5f8fc;
}


/* NUMBER */

.process-number {
    color: #f7c706;

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

    letter-spacing: 2px;
}


/* TITLE */

.process-step h3 {
    margin: 8px 0 10px;

    color: #123b56;

    font-size: 20px;
}


/* TEXT */

.process-step p {
    margin: 0;

    color: #666;

    font-size: 14px;

    line-height: 1.6;
}


/* TABLET */

@media (max-width: 1000px) {

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

    .process-line {
        display: none;
    }
}


/* MOBILE */

@media (max-width: 600px) {

    .jig-process {
        padding: 70px 20px;
    }

    .process-heading h2 {
        font-size: 32px;
    }

    .process-grid {
        grid-template-columns: 1fr;
    }
}
/* =====================================================
   JIG & FIXTURE APPLICATIONS
===================================================== */

.jig-applications {
    width: 100%;

    padding: 60px 6%;

    background: #ffffff;
}


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

.applications-heading {
    max-width: 750px;

    margin: 0 auto 65px;

    text-align: center;
}

.applications-heading span {
    color: #087bd1;

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

    letter-spacing: 3px;
}

.applications-heading h2 {
    margin: 12px 0;

    color: #123b56;

    font-size: 42px;

    line-height: 1.2;
}

.applications-heading h2 strong {
    color: #087bd1;
}

.applications-heading p {
    margin: 0;

    color: #666;

    font-size: 16px;

    line-height: 1.6;
}


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

.applications-grid {
    max-width: 1250px;

    margin: auto;

    display: grid;

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

    gap: 25px;
}


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

.application-card {
    background: #ffffff;

    border: 1px solid #e1e8ef;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.08);

    transition: all 0.35s ease;
}

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

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


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

.application-image {
    width: 100%;

    height: 210px;

    background: #0a0d12;

    overflow: hidden;

    position: relative;
}

.application-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.5s ease;
}

.application-card:hover .application-image img {
    transform: scale(1.08);
}


/* IMAGE OVERLAY */

.application-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(0, 0, 0, 0.35)
        );

    pointer-events: none;
}


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

.application-content {
    padding: 22px;
}

.application-content > span {
    color: #f7c706;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;
}

.application-content h3 {
    margin: 8px 0 10px;

    color: #123b56;

    font-size: 21px;
}

.application-content p {
    margin: 0;

    color: #666;

    font-size: 14px;

    line-height: 1.6;
}


/* =====================================================
   HOVER TOP LINE
===================================================== */

.application-card {
    position: relative;
}

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

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 4px;

    background: #087bd1;

    transition: width 0.35s ease;

    z-index: 5;
}

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


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

@media (max-width: 1000px) {

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

}


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

@media (max-width: 600px) {

    .jig-applications {
        padding: 70px 20px;
    }

    .applications-heading h2 {
        font-size: 32px;
    }

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

    .application-image {
        height: 220px;
    }

}
/* =====================================================
   WHY CHOOSE MECHCAD
===================================================== */

.jig-why {
    width: 100%;
    padding: 60px 7%;
    background: #f5f8fc;
}


/* HEADING */

.jig-why-heading {
    max-width: 700px;
    margin: 0 auto 60px;
    text-align: center;
}

.jig-why-heading span {
    color: #087bd1;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
}

.jig-why-heading h2 {
    margin: 12px 0;

    color: #f7c706;
    font-size: 42px;
}

.jig-why-heading h2 strong {
    color: #087bd1;
}

.jig-why-heading p {
    color: #666;
    font-size: 16px;
    line-height: 1.6;
}


/* GRID */

.jig-why-grid {
    max-width: 1200px;
    margin: auto;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}


/* CARD */

.jig-why-card {
    padding: 35px 25px;

    background: #ffffff;

    border-radius: 18px;

    text-align: center;

    border: 1px solid #e2e8ef;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.07);

    transition: 0.35s ease;
}

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

    box-shadow:
        0 18px 40px rgba(0,0,0,0.13);
}


/* ICON */

.jig-why-icon {
    width: 75px;
    height: 75px;

    margin: 0 auto 18px;

    border-radius: 50%;

    background: #087bd1;

    color: #ffffff;

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

    font-size: 28px;

    box-shadow:
        0 8px 20px rgba(8,123,209,0.25);

    transition: 0.35s ease;
}

.jig-why-card:hover .jig-why-icon {
    background: #f7c706;

    color: #123b56;

    transform: rotate(8deg) scale(1.08);
}


/* NUMBER */

.jig-why-card > span {
    color: #f7c706;

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

    letter-spacing: 2px;
}


/* TITLE */

.jig-why-card h3 {
    margin: 8px 0 12px;

    color: #123b56;

    font-size: 20px;
}


/* TEXT */

.jig-why-card p {
    margin: 0;

    color: #666;

    font-size: 14px;

    line-height: 1.6;
}


/* TABLET */

@media (max-width: 1000px) {

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

}


/* MOBILE */

@media (max-width: 600px) {

    .jig-why {
        padding: 70px 20px;
    }

    .jig-why-heading h2 {
        font-size: 32px;
    }

    .jig-why-grid {
        grid-template-columns: 1fr;
    }

}

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

.jig-cta {
    width: 100%;

    min-height: 360px;

    padding: 70px 6%;

    background:
        linear-gradient(
            135deg,
            #07131f,
            #0b2b45
        );

    position: relative;

    overflow: hidden;

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

    text-align: center;
}


/* CONTENT */

.jig-cta-content {
    max-width: 750px;

    position: relative;

    z-index: 3;
}

.jig-cta-content > span {
    color: #f7c706;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 3px;
}

.jig-cta-content h2 {
    margin: 12px 0 15px;

    color: #ffffff;

    font-size: 42px;

    line-height: 1.2;
}

.jig-cta-content h2 strong {
    color: #087bd1;
}

.jig-cta-content p {
    margin: 0 auto 28px;

    max-width: 620px;

    color: #d9e5ee;

    font-size: 15px;

    line-height: 1.7;
}


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

.jig-cta-btn {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 14px 28px;

    background: #087bd1;

    color: #ffffff;

    text-decoration: none;

    border-radius: 30px;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1px;

    transition: 0.3s ease;

    box-shadow:
        0 8px 25px rgba(8,123,209,0.35);
}

.jig-cta-btn:hover {
    background: #f7c706;

    color: #07131f;

    transform: translateY(-4px);
}


/* =====================================================
   GEAR
===================================================== */

.jig-cta-gear {
    position: absolute;

    right: 8%;

    bottom: -80px;

    font-size: 300px;

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

    animation: gearRotate 18s linear infinite;
}

@keyframes gearRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


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

@media (max-width: 600px) {

    .jig-cta {
        min-height: 330px;

        padding: 60px 20px;
    }

    .jig-cta-content h2 {
        font-size: 30px;
    }

    .jig-cta-content p {
        font-size: 14px;
    }

    .jig-cta-btn {
        padding: 13px 23px;
    }

    .jig-cta-gear {
        right: -50px;

        bottom: -50px;

        font-size: 200px;
    }

}
/* =====================================================
   FINAL CTA
===================================================== */

.jig-cta {
    width: 100%;

    min-height: 360px;

    padding: 70px 6%;

    background:
        linear-gradient(
            135deg,
            #07131f,
            #0b2b45
        );

    position: relative;

    overflow: hidden;

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

    text-align: center;
}


/* CONTENT */

.jig-cta-content {
    max-width: 750px;

    position: relative;

    z-index: 3;
}

.jig-cta-content > span {
    color: #f7c706;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 3px;
}

.jig-cta-content h2 {
    margin: 12px 0 15px;

    color: #ffffff;

    font-size: 42px;

    line-height: 1.2;
}

.jig-cta-content h2 strong {
    color: #087bd1;
}

.jig-cta-content p {
    margin: 0 auto 28px;

    max-width: 620px;

    color: #d9e5ee;

    font-size: 15px;

    line-height: 1.7;
}


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

.jig-cta-btn {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 14px 28px;

    background: #087bd1;

    color: #ffffff;

    text-decoration: none;

    border-radius: 30px;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1px;

    transition: 0.3s ease;

    box-shadow:
        0 8px 25px rgba(8,123,209,0.35);
}

.jig-cta-btn:hover {
    background: #f7c706;

    color: #07131f;

    transform: translateY(-4px);
}


/* =====================================================
   GEAR
===================================================== */

.jig-cta-gear {
    position: absolute;

    right: 8%;

    bottom: -80px;

    font-size: 300px;

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

    animation: gearRotate 18s linear infinite;
}

@keyframes gearRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


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

@media (max-width: 600px) {

    .jig-cta {
        min-height: 330px;

        padding: 60px 20px;
    }

    .jig-cta-content h2 {
        font-size: 30px;
    }

    .jig-cta-content p {
        font-size: 14px;
    }

    .jig-cta-btn {
        padding: 13px 23px;
    }

    .jig-cta-gear {
        right: -50px;

        bottom: -50px;

        font-size: 200px;
    }

} /*3d cad page*/
/* =====================================
   3D CAD MODELING HERO SECTION
===================================== */

.cad-hero {
    position: relative;

    min-height: 100vh;

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

    text-align: center;

    background-image: url("images/3d-cad-bg.jpg");
    background-size: cover;
    background-position: center;

    color: white;
}


/* DARK OVERLAY */

.cad-overlay {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.65);
}


/* CONTENT */

.cad-hero-content {
    position: relative;

    z-index: 2;

    max-width: 900px;

    padding: 20px;
}


/* SMALL TEXT */

.cad-subtitle {
    color: #00bfff;

    font-size: 14px;

    letter-spacing: 4px;

    margin-bottom: 20px;
}


/* MAIN HEADING */

.cad-hero h1 {
    font-size: 70px;

    line-height: 1.1;

    margin-bottom: 25px;

    font-weight: 800;

    letter-spacing: 2px;
}


/* DESCRIPTION */

.cad-description {
    max-width: 1000px;
    width: 100%;
     margin: 0 auto 30px;
    letter-spacing: 1px;
    font-size: 19px;

    line-height: 1.8;

    color: #d0d0d0;

    margin-bottom: 35px;
}


/* BUTTON */

.cad-btn {
    display: inline-block;

    padding: 15px 35px;

    background: #00bfff;

    color: white;

    text-decoration: none;

    font-weight: 600;

    letter-spacing: 1px;

    border-radius: 4px;

    transition: 0.3s;
}


.cad-btn:hover {
    background: white;

    color: #00bfff;

    transform: translateY(-3px);
}
/* ==============================
   CAD GALLERY
================================ */

.cad-gallery {
    background: hwb(60 96% 3%);
    color: rgb(4, 65, 77);
    padding: 60px 5%;
}

/* HEADING */

.gallery-heading {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 55px;
}

.gallery-heading span {
    color: hsl(13, 94%, 46%);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 3px;
}

.gallery-heading h2 {
    font-family: Georgia, serif;
    font-size: 45px;
    margin: 12px 0 18px;
}

.gallery-heading p {
    color: #131111;
    line-height: 1.7;
}

/* 4 × 2 GRID */

.cad-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

/* IMAGE BOX */

.cad-gallery-box {
    height: 230px;
    overflow: hidden;
    border: 2px solid #fa0707;
    background: #080b0e;
}

.cad-gallery-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: 0.4s ease;
}

.cad-gallery-box:hover img {
    transform: scale(1.06);
}

/* MOBILE */

@media (max-width: 900px) {
    .cad-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 550px) {
    .cad-gallery-grid {
        grid-template-columns: 1fr;
    }
}
/* ========================================
   3D MODELING SERVICES
======================================== */

.modeling-services {
    background: lab(3.32% 0 0);
    padding: 100px 8%;
    color: rgb(240, 20, 20);
}


/* HEADING */

.modeling-services .services-heading {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 70px;
}

.modeling-services .services-heading > p:first-child {
    color: hsl(196, 27%, 92%);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 4px;
    margin-bottom: 12px;
}

.modeling-services h2 {
    font-size: 52px;
    margin: 0;
    font-weight: 800;
    color: white;
}

.title-line {
    width: 80px;
    height: 3px;
    background: hsl(200, 17%, 93%);
    margin: 22px auto;
}

.services-description {
    color: #a7b0bb;
    font-size: 17px;
    line-height: 1.7;
}


/* ========================================
   3 COLUMN GRID
======================================== */

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


/* SERVICE BOX */

.model-service {
    min-height: 85px;

    display: flex;
    align-items: center;

    gap: 18px;

    padding: 20px 22px;

    border-radius: 12px;

    border: 1px solid;

    transition: 0.3s ease;

    cursor: pointer;
}

.model-service:hover {
    transform: translateY(-6px);
}


/* NUMBER */

.model-service span {
    min-width: 42px;
    height: 42px;

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

    border-radius: 50%;

    font-weight: 800;
    color: white;

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

.model-service h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: white;
}


/* ========================================
   DIFFERENT BACKGROUND COLORS
======================================== */

/* BLUE */

.color-1 {
    background: rgba(37, 99, 235, 0.15);
    border-color: #2563eb;
}

.color-1:hover {
    background: rgba(37, 99, 235, 0.28);
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.2);
}


/* GREEN */

.color-2 {
    background: rgba(16, 185, 129, 0.15);
    border-color: #10b981;
}

.color-2:hover {
    background: rgba(16, 185, 129, 0.28);
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.2);
}


/* PURPLE */

.color-3 {
    background: rgba(139, 92, 246, 0.15);
    border-color: #8b5cf6;
}

.color-3:hover {
    background: rgba(139, 92, 246, 0.28);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.2);
}


/* ORANGE */

.color-4 {
    background: rgba(245, 158, 11, 0.15);
    border-color: #f59e0b;
}

.color-4:hover {
    background: rgba(245, 158, 11, 0.28);
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.2);
}


/* RED */

.color-5 {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
}

.color-5:hover {
    background: rgba(239, 68, 68, 0.28);
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.2);
}


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

@media (max-width: 1000px) {

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

}


@media (max-width: 650px) {

    .modeling-services {
        padding: 70px 20px;
    }

    .modeling-services h2 {
        font-size: 36px;
    }

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

}
/* ==============================
   WHAT I PROVIDE
================================ */

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

.services-section {
    width: 100%;
    padding: 50px 20px 80px;
    background: #f7f8fa;
    overflow: hidden;
    font-family: "Poppins", Arial, sans-serif;
}


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

.services-heading {
    text-align: center;
    margin-bottom: 70px;
}

.services-heading > span {
    display: inline-block;
    color: #1e40af;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 6px;
    margin-bottom: 12px;
}

.services-heading h2 {
    margin: 0;
    color: #17233c;
    font-size: clamp(38px, 5vw, 68px);
    line-height: 1.1;
    font-weight: 700;
}

.heading-line {
    margin: 28px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.heading-line i {
    width: 100px;
    height: 2px;
    background: #2d80ed;
    display: block;
}

.gear {
    color: #2d80ed;
    font-size: 31px;
    line-height: 1;
}


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

.services-flow {
    max-width: 1510px;
    margin: 0 auto;

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

    gap: 0;
}


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

.service-card {
    position: relative;

    flex: 1 1 0;
    min-width: 0;

    height: 340px;
    min-height: 340px;
    max-height: 340px;

    box-sizing: border-box;

    background: #ffffff;

    padding: 10px 15px;

    text-align: center;

    border-radius: 10px 0 0 10px;

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

    z-index: 1;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


/* ==============================
   CHEVRON ARROW
================================= */

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

    position: absolute;

    top: 0;
    right: -43px;

    width: 62px;
    height: 100%;

    background: var(--accent);

    clip-path: polygon(
        0 0,
        55% 0,
        100% 50%,
        55% 100%,
        0 100%,
        43% 50%
    );

    z-index: -1;

    filter: drop-shadow(5px 6px 5px rgba(0, 0, 0, 0.20));
}


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

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

    box-shadow:
        0 25px 40px rgba(0, 0, 0, 0.15);

    z-index: 10;
}


/* ==============================
   STEP
================================= */

.step {
    color: #777;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 3px;
}

.number {
    color: var(--accent);
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
}


/* ==============================
   SMALL LINE
================================= */

.line {
    position: relative;

    width: 70px;
    height: 2px;

    background: var(--accent);

    margin: 28px auto 35px;
}

.line::after {
    content: "";

    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--accent);

    top: 50%;
    left: 50%;

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


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

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

    margin: 0 auto 25px;

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

    color: var(--accent);

    font-size: 38px;

    font-weight: 300;

    line-height: 1;
}


/* ==============================
   FILE ICON
================================= */

.file-icon {
    flex-direction: column;

    border: 2px solid var(--accent);

    border-radius: 4px;

    width: 50px;
    height: 60px;

    font-size: 11px;

    gap: 2px;
}

.file-icon small {
    font-size: 9px;
}

.file-icon b {
    font-size: 13px;
}


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

.service-card h3 {
    margin: 0;

    color: #171717;

    font-size: 17px;

    line-height: 1.4;

    font-weight: 600;
}


/* ==============================
   COLORS
================================= */

.blue {
    --accent: #1e40af;
}

.orange {
    --accent: #f9822e;
}

.green {
    --accent: #4caf28;
}

.cyan {
    --accent: #14a6b5;
}

.blue2 {
    --accent: #2166d1;
}

.purple {
    --accent: #7635a8;
}

.navy {
    --accent: #173d78;
}


/* ==============================
   FIRST / LAST CARD
================================= */

.service-card:first-child {
    border-radius: 12px 0 0 12px;
}

.service-card:last-child {
    border-radius: 0 12px 12px 0;
}


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

@media (max-width: 1200px) {

    .services-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    .service-card {
        height: 260px;
        padding: 40px 20px 30px;
    }

    .service-card::after {
        right: -34px;
        width: 58px;
    }

    .number {
        font-size: 40px;
    }

    .service-icon {
        font-size: 48px;
        margin-bottom: 18px;
    }

    .service-card h3 {
        font-size: 14px;
    }
}


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

@media (max-width: 768px) {

    .services-section {
        padding: 65px 20px;
    }

    .services-heading {
        margin-bottom: 45px;
    }

    .services-heading > span {
        font-size: 12px;
        letter-spacing: 4px;
    }

    .services-heading h2 {
        font-size: 38px;
    }

    .heading-line i {
        width: 55px;
    }

    .services-flow {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .service-card {
        height: auto;
        min-height: 280px;

        border-radius: 12px !important;

        padding: 35px 25px;
    }

    .service-card::after {
        display: none;
    }

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

    .service-card h3 {
        font-size: 17px;
    }

    .number {
        font-size: 42px;
    }

}
.process-section {
  width: 100%;
  max-width: 1550px;
  margin: auto;
  padding: 10px 50px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;

  background: #ffffff;
}


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

.process-left {
  position: relative;
  min-height: 550px;

  display: flex;
  align-items: center;
  gap: 50px;
}


/* Half Circle */

.left-circle {
  width: 260px;
  height: 520px;
  transform: translateX(-50px);

  border-radius: 0 260px 260px 0;

  background: linear-gradient(
    135deg,
    #1e40af,
    #2563eb
  );

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

  box-shadow: 0 20px 50px rgba(30, 64, 175, 0.25);
}


.circle-content {
  width: 150px;
  height: 150px;

  border-radius: 50%;

  background: #ffffff;

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

  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.circle-content span {
  font-size: 16px;
  color: #1e40af;
  font-weight: 600;
}

.circle-content strong {
  font-size: 25px;
  color: #111827;
}


/* Left Points */

.left-points {
  display: flex;
  flex-direction: column;
  gap: 30px;
  flex: 1;
}

.left-point {
  position: relative;

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

  padding: 18px;

  border-radius: 15px;

  background: #f8fafc;

  border: 1px solid #e5e7eb;

  transition: 0.3s ease;
}


/* Arrow */

.left-point::before {
  content: "→";

  position: absolute;
  left: -42px;

  font-size: 28px;
  font-weight: bold;

  color: #f9822e;
}


.left-point:hover {
  transform: translateX(8px);

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


.point-icon {
  min-width: 50px;
  height: 50px;

  border-radius: 50%;

  background: #1e40af;

  color: white;

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

  font-size: 23px;
}


.left-point h3 {
  margin: 0 0 5px;

  font-size: 18px;

  color: #111827;
}

.left-point p {
  margin: 0;

  font-size: 14px;

  line-height: 1.5;

  color: #64748b;
}

/* ================================
   WHY CHOOSE MECHCAD
================================ */

.why-mechcad {
    background: rgb(249, 252, 254);
    color: #044b55;
    padding: 15px 10%;
    text-align: center;
}

.why-header p {
    color: #f7be04;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 4px;
    margin-bottom: 10px;
}

.why-header h2 {
    font-size: 55px;
    margin: 0;
    font-weight: 800;
    letter-spacing: 2px;
}

.why-line {
    width: 300px;
    height: 2px;
    background: #ff3700;
    margin: 15px auto 0;
}
/* =========================
   RIGHT SIDE
========================= */

.process-right {
  position: relative;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 35px;

  align-items: center;
}


/* 3D Image */

.right-image {
  height: 520px;

  display: flex;

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

  background: #f8fafc;

  border-radius: 25px;

  overflow: hidden;

  border: 1px solid #e5e7eb;
}

.right-image img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  transition: 0.5s ease;
}

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


/* Right Steps */

.right-steps {
  display: flex;

  flex-direction: column;

  gap: 18px;
}


.right-step {
  display: flex;

  align-items: center;

  gap: 15px;

  padding: 17px;

  background: #ffffff;

  border-radius: 14px;

  border: 1px solid #e5e7eb;

  box-shadow: 0 5px 20px rgba(0,0,0,0.05);

  transition: 0.3s ease;
}


.right-step:hover {
  transform: translateX(7px);

  border-color: #1e40af;
}


.step-number {
  min-width: 45px;
  height: 45px;

  border-radius: 50%;

  background: #1e40af;

  color: #ffffff;

  display: flex;

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

  font-size: 14px;

  font-weight: 700;
}


.right-step h3 {
  margin: 0 0 4px;

  font-size: 16px;

  color: #111827;
}


.right-step p {
  margin: 0;

  font-size: 13px;

  color: #64748b;

  line-height: 1.4;
}
/* 5 STEP BOX DIFFERENT COLORS */

/* 1. REQUIREMENT - BLUE */
.right-step:nth-child(1) {
    background: rgba(30, 64, 175, 0.35);
    border-color: #2563eb;
}

/* 2. PLANNING - GREEN */
.right-step:nth-child(2) {
    background: rgba(16, 185, 129, 0.20);
    border-color: #10b981;
}

/* 3. DESIGN - PURPLE */
.right-step:nth-child(3) {
    background: rgba(139, 92, 246, 0.20);
    border-color: #8b5cf6;
}

/* 4. VALIDATION - ORANGE */
.right-step:nth-child(4) {
    background: rgba(245, 158, 11, 0.20);
    border-color: #f59e0b;
}

/* 5. FINAL OUTPUT - RED */
.right-step:nth-child(5) {
    background: rgba(239, 68, 68, 0.20);
    border-color: #ef4444;
}
/* RIGHT STEPS TIMELINE */

.right-steps {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;

    padding-left: 30px;
}

/* VERTICAL LINE */

.right-steps::before {
    content: "";
    position: absolute;

    left: 8px;
    top: 25px;
    bottom: 25px;

    width: 2px;

    background: rgba(0, 191, 255, 0.35);
}


/* DOT */

.right-step {
    position: relative;
}

.step-dot {
    position: absolute;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: #00bfff;

    left: -28px;

    top: 50%;

    transform: translateY(-50%);

    box-shadow: 0 0 12px rgba(0, 191, 255, 0.8);
}
/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1100px) {

  .process-section {
    grid-template-columns: 1fr;

    gap: 70px;
  }

  .process-left {
    justify-content: center;
  }

}


@media (max-width: 700px) {

  .process-section {
    padding: 50px 20px;
  }

  .process-left {
    flex-direction: column;
  }

  .left-circle {
    width: 100%;
    height: 180px;

    border-radius: 180px 180px 0 0;
  }

  .left-points {
    width: 100%;
  }

  .left-point::before {
    display: none;
  }

  .process-right {
    grid-template-columns: 1fr;
  }

  .right-image {
    height: 350px;
  }

}
/* =========================================
   MACHINE DESIGN & DEVELOPMENT HERO
========================================= */

.machine-hero {
    position: relative;
    min-height: 80vh;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.92),
            rgba(0, 0, 0, 0.65),
            rgba(0, 0, 0, 0.82)
        ),
        url("images/machine-design-bg.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}


/* DARK OVERLAY */

.machine-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 75% 50%,
            rgba(0, 191, 255, 0.12),
            transparent 35%
        );

    pointer-events: none;
}


/* HERO CONTENT */

.machine-hero-content {
    position: relative;
    z-index: 2;

    max-width: 850px;

    margin-left: 10%;
    padding-top: 80px;
}


/* SMALL TITLE */

.machine-small-title {
    display: inline-block;

    font-size: 15px;
    font-weight: 600;
    letter-spacing: 4px;

    color: #00bfff;

    margin-bottom: 22px;
}


/* MAIN HEADING */

.machine-hero-content h1 {
    margin: 0;

    font-family: Georgia, serif;

    font-size: clamp(38px, 5vw, 52px);
    line-height: 1.05;

    font-weight: 700;

    color: #ffffff;

    letter-spacing: 2px;
}

.machine-hero-content h1 span {
    color: #00bfff;
}


/* DESCRIPTION */

.machine-hero-content p {
    max-width: 650px;

    margin: 30px 0 38px;

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

    color: #d5d5d5;
}


/* BUTTON */

.machine-hero-btn {
    display: inline-flex;

    align-items: center;
    gap: 12px;

    padding: 16px 30px;

    color: #ffffff;
    background: #00bfff;

    text-decoration: none;

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

    letter-spacing: 1px;

    border: 1px solid #00bfff;

    transition: 0.3s ease;
}


.machine-hero-btn i {
    transition: 0.3s ease;
}


.machine-hero-btn:hover {
    background: transparent;
    color: #00bfff;
}


.machine-hero-btn:hover i {
    transform: translateX(6px);
}


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

@media (max-width: 768px) {

    .machine-hero-content {
        margin-left: 6%;
        margin-right: 6%;
        padding-top: 100px;
    }

    .machine-small-title {
        font-size: 12px;
        letter-spacing: 2px;
    }

    .machine-hero-content h1 {
        font-size: 46px;
    }

    .machine-hero-content p {
        font-size: 17px;
    }

    .machine-hero-btn {
        padding: 14px 22px;
    }
}
/* =========================================
   MACHINE DESIGN OVERVIEW
========================================= */

.machine-overview {
    position: relative;

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;

    gap: 70px;

    padding: 120px 10%;

    background: #030507;
    color: #ffffff;

    overflow: hidden;
}


/* BACKGROUND GRAPHIC */

.machine-overview::before {
    content: "";
    position: absolute;

    width: 500px;
    height: 500px;

    right: -200px;
    top: 50%;

    transform: translateY(-50%);

    border: 1px solid rgba(115, 245, 8, 0.653);
    border-radius: 50%;

    box-shadow:
        0 0 0 60px rgba(255, 42, 0, 0.533),
        0 0 0 120px rgba(242, 247, 249, 0.4);
}


/* IMAGE */

.overview-image {
    position: relative;
    z-index: 1;
}

.overview-image img {
    width: 100%;
    height: 520px;

    object-fit: cover;

    border-radius: 4px;

    border-left: 4px solid #00bfff;

    display: block;

    filter: brightness(0.75);

    transition: 0.4s ease;
}

.overview-image:hover img {
    filter: brightness(1);
    transform: scale(1.02);
}


/* CONTENT */

.overview-content {
    position: relative;
    z-index: 1;
}


/* SMALL LABEL */

.section-label {
    display: block;

    color: #00bfff;

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

    letter-spacing: 3px;

    margin-bottom: 18px;
}


/* HEADING */

.overview-content h2 {
    margin: 0 0 25px;

    font-family: Georgia, serif;

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

    color: #ffffff;
}

.overview-content h2 span {
    color: #00bfff;
}


/* PARAGRAPH */

.overview-content p {
    color: #bfc5ca;

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

    margin-bottom: 20px;
}


/* POINTS */

.overview-points {
    display: flex;
    flex-direction: column;

    gap: 15px;

    margin-top: 30px;
}

.overview-points div {
    display: flex;
    align-items: center;

    gap: 15px;

    padding: 14px 18px;

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

    border-left: 2px solid #00bfff;

    transition: 0.3s ease;
}

.overview-points div:hover {
    background: rgba(0,191,255,0.08);

    transform: translateX(8px);
}

.overview-points i {
    color: #00bfff;

    font-size: 20px;

    width: 25px;
}

.overview-points span {
    color: #ffffff;

    font-size: 16px;
    font-weight: 600;
}


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

@media (max-width: 768px) {

    .machine-overview {
        grid-template-columns: 1fr;

        padding: 80px 6%;

        gap: 45px;
    }

    .overview-image img {
        height: 350px;
    }

    .overview-content h2 {
        font-size: 38px;
    }

    .overview-content p {
        font-size: 16px;
    }
}
/* ==========================================
   WHAT I OFFER - HEXAGON INFOGRAPHIC
========================================== */

.what-offer {
    width: 100%;
    padding: 60px 2%;
    background: #ffffff;
    overflow: hidden;
}

.offer-wrapper {
    max-width: 1250px;
    min-height: 650px;
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 330px 1fr;
    align-items: center;

    gap: 30px;
}


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

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

    position: relative;
}

.center-circle {
    width: 260px;
    height: 260px;

    border-radius: 50%;

    background: #ffffff;

    border: 8px solid #e7f4fa;

    box-shadow:
        0 0 0 4px #159bc1,
        0 15px 40px rgba(0, 90, 130, 0.15);

    display: flex;
    flex-direction: column;

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

    text-align: center;

    position: relative;
}
.center-icon {
    width: 120px;
    height: 1200px;

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

    margin: 0 auto 15px;
}

.center-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.center-icon {
    width: 100px;
    height: 100px;

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

    border-radius: 50%;

    background: hsl(195, 20%, 96%);
    color: white;

    font-size: 25px;

    margin-bottom: 15px;
}

.center-circle h2 {
    margin: 0;

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

    color: #123b56;
    letter-spacing: 1px;
}

.center-circle span {
    margin-top: 12px;

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

    letter-spacing: 3px;

    color: #159bc1;
}


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

.offer-side {
    display: flex;
    flex-direction: column;

    gap: 22px;
}

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

    position: relative;

    min-height: 125px;
}


/* ==========================================
   HEXAGON
========================================== */

.hex-icon {
    width: 105px;
    height: 115px;

    flex-shrink: 0;

    background: #ffffff;

    border: 3px solid #159bc1;

    clip-path: polygon(
        25% 3%,
        75% 3%,
        100% 50%,
        75% 97%,
        25% 97%,
        0% 50%
    );

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

    font-size: 30px;
    color: #159bc1;

    box-shadow: 0 10px 20px rgba(0, 80, 120, 0.1);
}


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

.offer-text {
    max-width: 210px;
}

.offer-text h3 {
    margin: 0 0 7px;

    font-size: 20px;
    line-height: 1.3;

    color: #173f59;
}

.offer-text p {
    margin: 0;

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

    color: #111111;
}


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

.left-side .offer-item {
    justify-content: flex-end;
}

.left-side .offer-text {
    order: 1;
    text-align: right;
    margin-right: 18px;
}

.left-side .hex-icon {
    order: 2;
}


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

.right-side .offer-item {
    justify-content: flex-start;
}

.right-side .hex-icon {
    margin-right: 18px;
}


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

.left-side .offer-item::after {
    content: "";

    position: absolute;

    right: -45px;
    top: 50%;

    width: 50px;
    height: 2px;

    background: #159bc1;
}

.right-side .offer-item::before {
    content: "";

    position: absolute;

    left: -45px;
    top: 50%;

    width: 50px;
    height: 2px;

    background: #159bc1;
}


/* ==========================================
   DOTS
========================================== */

.left-side .offer-item::before {
    content: "";

    position: absolute;

    right: -48px;
    top: calc(50% - 4px);

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #159bc1;

    z-index: 5;
}

.right-side .offer-item::after {
    content: "";

    position: absolute;

    left: -48px;
    top: calc(50% - 4px);

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #159bc1;

    z-index: 5;
}


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

.offer-item {
    transition: 0.3s ease;
}

.offer-item:hover {
    transform: translateY(-5px);
}

.offer-item:hover .hex-icon {
    background: #159bc1;
    color: #ffffff;
}


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

@media (max-width: 950px) {

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

    .offer-center {
        order: 1;
    }

    .left-side {
        order: 2;
    }

    .right-side {
        order: 3;
    }

    .left-side .offer-item,
    .right-side .offer-item {
        justify-content: center;
    }

    .left-side .offer-text {
        order: 2;
        text-align: left;
        margin-right: 0;
        margin-left: 18px;
    }

    .left-side .hex-icon {
        order: 1;
    }

    .left-side .offer-item::after,
    .left-side .offer-item::before,
    .right-side .offer-item::before,
    .right-side .offer-item::after {
        display: none;
    }

}


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

@media (max-width: 500px) {

    .what-offer {
        padding: 70px 20px;
    }

    .center-circle {
        width: 220px;
        height: 220px;
    }

    .center-circle h2 {
        font-size: 23px;
    }

    .hex-icon {
        width: 85px;
        height: 95px;
        font-size: 24px;
    }

    .offer-text {
        max-width: 180px;
    }

    .offer-text h3 {
        font-size: 14px;
    }

}
/* ================================
   OUR DESIGN PROCESS
================================ */

.design-processs {
    width: 100%;
    padding: 80px 5%;
    background: #f4f7fb;
    overflow: hidden;
}

/* ---------- HEADER ---------- */

.processs-header {
    width: 520px;
    max-width: 90%;
    margin: 0 auto 90px;
    padding: 28px 35px;
    text-align: center;
    background: #ffffff;

    border: 3px solid #1595b5;
    border-radius: 12px;

    box-shadow: 8px 8px 0 #155d80;
    position: relative;
}

.processs-header h2 {
    margin: 0 0 10px;
    font-size: 30px;
    color: #12344d;
}

.processs-header p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #666;
}

/* Header gear */

.header-icon {
    position: absolute;
    left: 50%;
    bottom: -52px;

    transform: translateX(-50%);

    width: 48px;
    height: 48px;

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

    background: #fff;
    border: 3px solid #1595b5;
    border-radius: 50%;

    font-size: 23px;

    box-shadow: 4px 4px 0 #155d80;
}

/* ---------- MAIN LINE ---------- */

.processs-line {
    position: relative;

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

    gap: 18px;

    max-width: 1200px;
    margin: 0 auto;
}

/* horizontal line */

.processs-line::before {
    content: "";

    position: absolute;

    top: 0;
    left: 3%;
    right: 3%;

    height: 4px;

    background: linear-gradient(
        90deg,
        #f5b900,
        #d52d87,
        #6c268d,
        #168ac7,
        #65ad31
    );

    z-index: 0;
}

/* ---------- STEP ---------- */

.processs-step {
    position: relative;
    text-align: center;

    padding-top: 28px;
}

/* small line point */

.processs-step::before {
    content: "";

    position: absolute;

    top: -5px;
    left: 50%;

    width: 12px;
    height: 12px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: currentColor;

    z-index: 2;
}

/* vertical connector */

.processs-step::after {
    content: "";

    position: absolute;

    top: 7px;
    left: 50%;

    width: 3px;
    height: 30px;

    transform: translateX(-50%);

    background: currentColor;

    z-index: 0;
}

/* ---------- ICON ---------- */

.step-icon {
    position: relative;

    width: 52px;
    height: 52px;

    margin: 0 auto 12px;

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

    background: #fff;

    border: 3px solid currentColor;

    border-radius: 50%;

    font-size: 21px;

    z-index: 3;

    box-shadow: 3px 3px 0 currentColor;
}

/* ---------- CARD ---------- */

.step-card {
    min-height: 210px;

    padding: 25px 18px 20px;

    background: #fff;

    border: 4px solid currentColor;

    border-radius: 12px;

    box-shadow: 5px 6px 0 currentColor;

    transition: 0.3s ease;
}

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

/* number */


/* title */

.step-card h3 {
    margin: 0 0 12px;

    font-size: 16px;

    color: #243b53;
}

/* paragraph */

.step-card p {
    margin: 0;

    font-size: 12px;

    line-height: 1.8;

    color: #777;
}


/* ================================
   STEP COLORS
================================ */

.step-1 {
    color: #f0b400;
}

.step-2 {
    color: #d52d87;
}

.step-3 {
    color: #6c268d;
}

.step-4 {
    color: #168ac7;
}

.step-5 {
    color: #65ad31;
}


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

@media (max-width: 900px) {

    .processs-line {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .processs-line::before {
        top: 0;
        bottom: 0;
        left: 25px;
        right: auto;

        width: 4px;
        height: auto;

        background: linear-gradient(
            180deg,
            #f5b900,
            #d52d87,
            #6c268d,
            #168ac7,
            #65ad31
        );
    }

    .processs-step {
        padding-top: 0;
        padding-left: 75px;

        text-align: left;
    }

    .processs-step::before {
        top: 22px;
        left: 25px;
    }

    .processs-step::after {
        display: none;
    }

    .step-icon {
        position: absolute;

        left: 0;
        top: 0;

        margin: 0;
    }

    .step-card {
        min-height: auto;
    }
}


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

@media (max-width: 500px) {

    .design-processs {
        padding: 60px 20px;
    }

    .processs-header {
        padding: 22px 18px;
    }

    .processs-header h2 {
        font-size: 24px;
    }

    .processs-step {
        padding-left: 65px;
    }

    .step-card {
        padding: 20px 15px;
    }
}
/* =====================================================
   WHY CHOOSE MECHCAD
===================================================== */

.why-mechcad {
    width: 100%;
    padding: 40px 30px;
    background:#f4f7fb;
    overflow: hidden;
}

.why-wrapper {
    max-width: 1500px;
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 430px 1fr;
    align-items: center;

    gap: 40px;
}


/* =====================================================
   LEFT FEATURE CARDS
===================================================== */

.why-left {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.feature-card {
    min-height: 155px;

    display: flex;
    align-items: center;

    background: #ffffff;

    border-radius: 0 80px 80px 0;

    position: relative;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.10);

    overflow: visible;
}


/* NUMBER */

.feature-number {
    width: 100px;
    height: 155px;

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

    color: #ffffff;

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

    border-radius: 40px 0 0 40px;
}


/* DIFFERENT COLORS */

.feature-1 .feature-number {
    background: linear-gradient(180deg, #078bd2, #0751a0);
}

.feature-2 .feature-number {
    background: linear-gradient(180deg, #078bd2, #0751a0);
}

.feature-3 .feature-number {
    background: linear-gradient(180deg, #6955c7, #3d2b9d);
}

.feature-4 .feature-number {
    background: linear-gradient(180deg, #2bb6b7, #008a9c);
}


/* TEXT */

.feature-content {
    padding: 20px 25px;
    flex: 1;
}

.feature-content h3 {
    margin: 0 0 12px;

    font-size: 20px;
    line-height: 1.2;

    color: #064a91;
}

.feature-3 .feature-content h3 {
    color: #403198;
}

.feature-4 .feature-content h3 {
    color: #087e8b;
}

.feature-content p {
    margin: 0;

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

    color: #333;
}


/* ICON */

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

    border-radius: 50%;

    background: #ffffff;

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

    margin-right: 18px;

    border: 1px solid #d8e1ec;

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

    font-size: 32px;

    color: #075db4;
}

.feature-3 .feature-icon {
    color: #4935a8;
}

.feature-4 .feature-icon {
    color: #008e99;
}


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

.why-center {
    position: relative;

    width: 430px;
    height: 430px;

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


/* OUTER CIRCLE */

.why-center::before {
    content: "";

    position: absolute;

    width: 390px;
    height: 390px;

    border-radius: 50%;

    border: 2px dashed #8ba2b8;
}


/* BLUE ARC */

.why-center::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    border-radius: 50%;

    border: 12px solid transparent;

    border-left-color: #087bd1;

    transform: rotate(-35deg);
}


/* CENTER WHITE CIRCLE */

.center-circle {
    width: 325px;
    height: 325px;

    border-radius: 50%;

    background: #ffffff;

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

    position: relative;
    z-index: 3;

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


/* INNER */

.circle-inner {
    text-align: center;
}

.circle-inner h4 {
    margin: 0;

    font-size: 24px;
    letter-spacing: 1px;

    color: #17334f;
}

.circle-inner h1 {
    margin: 5px 0 18px;

    font-size: 48px;

    color: #17334f;
}

.circle-inner h1 span {
    color: #087bd1;
}

.circle-inner p {
    margin: 0;

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

    color: #333;
}


/* CONNECTING DOTS */

.connect-dot {
    position: absolute;

    width: 22px;
    height: 22px;

    border-radius: 50%;

    background: #087bd1;

    border: 5px solid #ffffff;

    box-shadow: 0 3px 10px rgba(0,0,0,.2);

    z-index: 5;
}

.dot-1 {
    top: 80px;
    left: 45px;
}

.dot-2 {
    top: 170px;
    left: 15px;
}

.dot-3 {
    bottom: 120px;
    left: 30px;
}

.dot-4 {
    bottom: 50px;
    left: 90px;
}


/* =====================================================
   SOFTWARE SIDE
===================================================== */

.software-side {
    display: flex;
    flex-direction: column;

    gap: 35px;
}


/* SOFTWARE CARD */

.software-card {
    min-height: 170px;

    background: #ffffff;

    display: flex;
    align-items: center;

    position: relative;

    border-radius: 85px 0 0 85px;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.10);

    padding-left: 25px;

    overflow: visible;
}


/* SOFTWARE LOGO */

.software-logo {
    width: 145px;
    height: 145px;

    border-radius: 50%;

    background: #ffffff;

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

    flex-shrink: 0;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.14);

    position: relative;
    z-index: 3;
}

.software-logo img {
    width: 100px;
    height: 100px;

    object-fit: contain;
}


/* INFO */

.software-info {
    padding: 20px 20px 20px 25px;

    flex: 1;
}

.software-number {
    font-size: 22px;
    font-weight: 700;

    color: #d71920;
}

.software-number span {
    color: #4a4f58;
    margin-left: 5px;
}

.software-3 .software-number {
    color: #154a9c;
}


/* LINES */

.red-line {
    width: 45px;
    height: 3px;

    background: #d71920;

    margin: 8px 0 10px;
}

.blue-line {
    width: 45px;
    height: 3px;

    background: #154a9c;

    margin: 8px 0 10px;
}


/* DESCRIPTION */

.software-info p {
    margin: 0;

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

    color: #333;
}


/* =====================================================
   RIGHT END SHAPE
===================================================== */

.software-end {
    width: 100px;
    height: 170px;

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

    color: #ffffff;

    font-size: 35px;

    border-radius: 0 55px 55px 0;
}

.software-end.red {
    background: linear-gradient(
        180deg,
        #ed252c,
        #b5090e
    );
}

.software-end.blue {
    background: linear-gradient(
        180deg,
        #376ac4,
        #164595
    );
}
.software-end.pink {
    background: #e91e63;
    color: #ffffff;

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

.feature-card,
.software-card {
    transition: all 0.35s ease;
}

.feature-card:hover {
    transform: translateX(8px);
}

.software-card:hover {
    transform: translateX(-8px);
}

.software-logo img {
    transition: transform 0.3s ease;
}

.software-card:hover .software-logo img {
    transform: scale(1.08);
}

/* ==========================================
   CENTER CONNECTION LINES + ARROWS
========================================== */

/* LEFT FEATURE CARDS */
.feature-card {
    position: relative;
}

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

    right: -40px;
    top: 50%;

    width: 40px;
    height: 2px;

    background: #159bc1;

    transform: translateY(-50%);

    z-index: 1;
}


/* RIGHT SOFTWARE CARDS */
.software-card {
    position: relative;
}

.software-card::before {
    content: "";
    position: absolute;

    left: -40px;
    top: 50%;

    width: 40px;
    height: 2px;

    background: #159bc1;

    transform: translateY(-50%);

    z-index: 1;
}




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

@keyframes connectionMove {

    0% {
        opacity: .4;
        transform: translateY(-50%) scale(.8);
    }

    50% {
        opacity: 1;
        transform: translateY(-50%) scale(1.15);
    }

    100% {
        opacity: .4;
        transform: translateY(-50%) scale(.8);
    }

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

@media (max-width: 1200px) {

    .why-wrapper {
        grid-template-columns: 1fr;
    }

    .why-center {
        margin: 40px auto;
        order: 2;
    }

    .why-left {
        order: 1;
    }

    .software-side {
        order: 3;
    }

}


@media (max-width: 600px) {

    .why-mechcad {
        padding: 60px 15px;
    }

    .why-center {
        width: 320px;
        height: 320px;
    }

    .why-center::before {
        width: 290px;
        height: 290px;
    }

    .why-center::after {
        width: 260px;
        height: 260px;
    }

    .center-circle {
        width: 235px;
        height: 235px;
    }

    .circle-inner h4 {
        font-size: 17px;
    }

    .circle-inner h1 {
        font-size: 35px;
    }

    .feature-number {
        width: 70px;
        height: 135px;
        font-size: 35px;
    }

    .feature-card {
        min-height: 135px;
    }

    .feature-content {
        padding: 15px;
    }

    .feature-content h3 {
        font-size: 16px;
    }

    .feature-content p {
        font-size: 12px;
    }

    .feature-icon {
        width: 60px;
        height: 60px;
        font-size: 22px;
        margin-right: 10px;
    }

    .software-card {
        min-height: 140px;
        padding-left: 10px;
    }

    .software-logo {
        width: 90px;
        height: 90px;
    }

    .software-logo img {
        width: 65px;
        height: 65px;
    }

    .software-end {
        width: 65px;
        height: 140px;
    }

    .software-number {
        font-size: 16px;
    }

    .software-info p {
        font-size: 11px;
    }

}
/* =========================
   COMPACT BOX SIZE
========================= */

/* LEFT BOX */
.feature-card {
    min-height: 115px;
    border-radius: 0 60px 60px 0;
}

.feature-number {
    width: 75px;
    height: 115px;
    font-size: 38px;
}

.feature-content {
    padding: 15px 18px;
}

.feature-content h3 {
    font-size: 17px;
    margin-bottom: 7px;
}

.feature-content p {
    font-size: 12px;
    line-height: 1.4;
}

.feature-icon {
    width: 65px;
    height: 65px;
    font-size: 24px;
    margin-right: 15px;
}


/* RIGHT SOFTWARE BOX */
.software-card {
    min-height: 120px;
    border-radius: 60px 0 0 60px;
    padding-left: 15px;
}

.software-logo {
    width: 100px;
    height: 100px;
}

.software-logo img {
    width: 68px;
    height: 68px;
}

.software-info {
    padding: 12px 15px;
}

.software-number {
    font-size: 17px;
}

.software-info p {
    font-size: 12px;
    line-height: 1.4;
}

.software-end {
    width: 70px;
    height: 120px;
    font-size: 27px;
    border-radius: 0 40px 40px 0;
}


/* GAP  */
.why-left {
    gap: 18px;
}

.software-side {
    gap: 18px;
}
 /*sell services */
.see-all-services {
    text-align: center;
    margin-top: 35px;
}

.see-all-services a {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 13px 25px;

    background: #0066cc;
    color: #ffffff;

    text-decoration: none;
    font-size: 15px;
    font-weight: 600;

    border-radius: 30px;

    transition: 0.3s ease;
}

.see-all-services a i {
    font-size: 14px;
    transition: 0.3s ease;
}

.see-all-services a:hover {
    background: #003366;
    transform: translateY(-3px);
}

.see-all-services a:hover i {
    transform: translateX(5px);
}


/* -----------------------------------------------
shsst  metal 
--------------------------------------------------*/
/* =====================================================
   SHEET METAL HERO
===================================================== */

.sheet-hero {
    width: 100%;

    min-height: 620px;

    padding: 80px 7%;

    background:
        linear-gradient(
            110deg,
            #05080c,
            #0a1825,
            #07111b
        );

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;
}


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

.sheet-hero-content {
    max-width: 600px;

    position: relative;

    z-index: 3;
}

.sheet-hero-content > span {
    color: #f7c706;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 3px;
}

.sheet-hero-content h1 {
    margin: 15px 0 20px;

    color: #ffffff;

    font-size: 56px;

    line-height: 1.1;
}

.sheet-hero-content h1 strong {
    display: block;

    color: #087bd1;

    font-weight: 800;
}

.sheet-hero-content p {
    max-width: 520px;

    margin: 0 0 30px;

    color: #d5e0e8;

    font-size: 16px;

    line-height: 1.7;
}


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

.sheet-hero-btn {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 14px 28px;

    background: #087bd1;

    color: #ffffff;

    text-decoration: none;

    border-radius: 30px;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1px;

    transition: 0.3s ease;
}

.sheet-hero-btn:hover {
    background: #f7c706;

    color: #07111b;

    transform: translateY(-4px);
}


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

.sheet-hero-image {
    width: 48%;

    max-width: 600px;

    position: relative;

    z-index: 2;
}

.sheet-hero-image img {
    width: 100%;

    display: block;

    object-fit: contain;

    filter:
        drop-shadow(
            0 20px 35px rgba(0,0,0,0.55)
        );

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


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

@keyframes sheetFloat {

    0% {
        transform: translateY(0);
    }

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

    100% {
        transform: translateY(0);
    }

}


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

.sheet-hero::after {
    content: "";

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(8,123,209,0.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(8,123,209,0.06) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    pointer-events: none;
}


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

@media (max-width: 850px) {

    .sheet-hero {
        min-height: auto;

        padding: 80px 25px;

        flex-direction: column;

        text-align: center;
    }

    .sheet-hero-content {
        max-width: 700px;
    }

    .sheet-hero-content h1 {
        font-size: 40px;
    }

    .sheet-hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .sheet-hero-image {
        width: 85%;
        max-width: 500px;
    }

}
/* =====================================================
   WHAT WE DESIGN
===================================================== */

.sheet-design {
    width: 100%;
    padding: 80px 5%;
    background: #f5f8fc;
}


/* HEADING */

.sheet-design-heading {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 45px;
}

.sheet-design-heading span {
    color: #087bd1;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
}

.sheet-design-heading h2 {
    margin: 10px 0;
    font-size: 36px;
    color: #123b56;
}

.sheet-design-heading h2 strong {
    color: #087bd1;
}

.sheet-design-heading p {
    margin: 0;
    color: #666;
    font-size: 14px;
}


/* =====================================================
   4 CARDS ONE LINE
===================================================== */

.sheet-design-grid {
    max-width: 1250px;
    margin: auto;

    display: grid;

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

    gap: 20px;
}


/* CARD */

.sheet-design-card {
    background: #ffffff;

    border-radius: 16px;

    overflow: hidden;

    border: 1px solid #e1e8ef;

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

    transition: 0.35s ease;
}

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

    border-color: #087bd1;

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


/* IMAGE */

.sheet-design-image {
    width: 100%;
    height: 170px;

    background: #080d13;

    overflow: hidden;
}

.sheet-design-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: 0.4s ease;
}

.sheet-design-card:hover img {
    transform: scale(1.07);
}


/* INFO */

.sheet-design-info {
    padding: 18px;
}

.sheet-design-info span {
    color: #f7c706;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;
}

.sheet-design-info h3 {
    margin: 7px 0 8px;

    color: #123b56;

    font-size: 18px;

    line-height: 1.25;
}

.sheet-design-info p {
    margin: 0;

    color: #666;

    font-size: 13px;

    line-height: 1.5;
}


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

@media (max-width: 1000px) {

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

}


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

@media (max-width: 600px) {

    .sheet-design {
        padding: 65px 20px;
    }

    .sheet-design-heading h2 {
        font-size: 30px;
    }

    .sheet-design-grid {
        grid-template-columns: 1fr;
    }

}
/* =====================================================
   DESIGN PROCESS
===================================================== */

.sheet-process {
    width: 100%;
    padding: 90px 5%;
    background: #ffffff;
}


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

.sheet-process-heading {
    text-align: center;
    margin-bottom: 50px;
}

.sheet-process-heading span {
    color: #e5a900;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 3px;
}

.sheet-process-heading h2 {
    margin: 10px 0;

    font-size: 38px;

    color: #172b4d;
}

.sheet-process-heading h2 strong {
    color: #087bd1;
}

.sheet-process-heading p {
    margin: 0;

    color: #777;

    font-size: 14px;
}


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

.sheet-process-grid {
    max-width: 1250px;

    margin: auto;

    display: grid;

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

    gap: 25px;

    position: relative;
}


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

.process-card {
    background: #f8fafc;

    border: 1px solid #e1e8ef;

    border-radius: 18px;

    padding: 15px;

    text-align: center;

    position: relative;

    overflow: hidden;

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;

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


/* DIFFERENT DELAY */

.process-card:nth-child(2) {
    animation-delay: .4s;
}

.process-card:nth-child(3) {
    animation-delay: .8s;
}

.process-card:nth-child(4) {
    animation-delay: 1.2s;
}


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

.process-card:hover {
    transform: translateY(-12px) scale(1.02);

    border-color: #087bd1;

    box-shadow:
        0 18px 40px rgba(8,123,209,0.18);
}


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

.process-image {
    width: 100%;
    height: 165px;

    border-radius: 13px;

    overflow: hidden;

    background: #080d13;
}

.process-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.process-card:hover .process-image img {
    transform: scale(1.08);
}


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

.process-number {
    width: 45px;
    height: 45px;

    margin: -22px auto 12px;

    position: relative;
    z-index: 2;

    border-radius: 50%;

    background: #087bd1;

    border: 4px solid #ffffff;

    color: #ffffff;

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

    font-size: 13px;

    font-weight: 800;
}


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

.process-card h3 {
    margin: 5px 0 8px;

    color: #17334f;

    font-size: 18px;
}

.process-card p {
    margin: 0;

    color: #666;

    font-size: 13px;

    line-height: 1.55;
}


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

@keyframes processFloat {

    0% {
        transform: translateY(0);
    }

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

    100% {
        transform: translateY(0);
    }

}


/* =====================================================
   CONNECTING ARROWS
===================================================== */

.process-card:not(:last-child)::after {
    content: "→";

    position: absolute;

    right: -25px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 28px;

    font-weight: 700;

    color: #087bd1;

    z-index: 5;

    animation: arrowMove 1.5s infinite;
}


@keyframes arrowMove {

    0% {
        transform: translateY(-50%) translateX(0);
    }

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

    100% {
        transform: translateY(-50%) translateX(0);
    }

}


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

@media (max-width: 1000px) {

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

    .process-card::after {
        display: none;
    }

}


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

@media (max-width: 600px) {

    .sheet-process {
        padding: 65px 20px;
    }

    .sheet-process-heading h2 {
        font-size: 30px;
    }

    .sheet-process-grid {
        grid-template-columns: 1fr;
    }

    .process-card:not(:last-child)::after {
        content: "↓";

        right: 50%;

        top: auto;

        bottom: -35px;

        transform: translateX(50%);
    }

}/* =====================================================
   SHEET METAL APPLICATIONS
===================================================== */

.sheet-applications {
    width: 100%;

    padding: 90px 5%;

    background: #f5f8fc;

    overflow: hidden;
}


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

.sheet-app-heading {
    max-width: 700px;

    margin: 0 auto 50px;

    text-align: center;
}

.sheet-app-heading span {
    color: #f7c706;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;
}

.sheet-app-heading h2 {
    margin: 10px 0 12px;

    color: #172b4d;

    font-size: 38px;

    line-height: 1.2;
}

.sheet-app-heading h2 strong {
    color: #087bd1;
}

.sheet-app-heading p {
    margin: 0;

    color: #666;

    font-size: 14px;

    line-height: 1.6;
}


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

.sheet-app-grid {
    max-width: 1250px;

    margin: auto;

    display: grid;

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

    gap: 22px;
}


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

.sheet-app-card {
    background: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    position: relative;

    border: 1px solid #e0e7ef;

    box-shadow:
        0 10px 28px rgba(0,0,0,0.08);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;

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


/* DIFFERENT ANIMATION DELAY */

.sheet-app-card:nth-child(2) {
    animation-delay: .4s;
}

.sheet-app-card:nth-child(3) {
    animation-delay: .8s;
}

.sheet-app-card:nth-child(4) {
    animation-delay: 1.2s;
}


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

.sheet-app-card:hover {
    transform: translateY(-10px);

    border-color: #087bd1;

    box-shadow:
        0 20px 40px rgba(8,123,209,0.18);
}


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

.sheet-app-image {
    width: 100%;

    height: 180px;

    overflow: hidden;

    background: #080d13;
}

.sheet-app-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 0.6s ease;
}

.sheet-app-card:hover
.sheet-app-image img {
    transform: scale(1.1);
}


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

.sheet-app-number {
    position: absolute;

    top: 155px;

    left: 18px;

    width: 48px;

    height: 48px;

    border-radius: 50%;

    background: #087bd1;

    border: 4px solid #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    font-size: 13px;

    font-weight: 800;

    box-shadow:
        0 5px 15px rgba(0,0,0,0.15);
}


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

.sheet-app-content {
    padding: 30px 18px 22px;
}

.sheet-app-content h3 {
    margin: 0 0 9px;

    color: #17334f;

    font-size: 18px;

    line-height: 1.3;
}

.sheet-app-content p {
    margin: 0;

    color: #666;

    font-size: 13px;

    line-height: 1.55;
}


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

@keyframes appFloat {

    0% {
        transform: translateY(0);
    }

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

    100% {
        transform: translateY(0);
    }

}


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

@media (max-width: 1000px) {

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

}


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

@media (max-width: 600px) {

    .sheet-applications {
        padding: 65px 20px;
    }

    .sheet-app-heading h2 {
        font-size: 30px;
    }

    .sheet-app-grid {
        grid-template-columns: 1fr;
    }

}/* =====================================================
   WHY + DELIVERABLES
===================================================== */

.sheet-final {
    width: 100%;

    padding: 60px 5%;

    background: #f5f8fc;

    overflow: hidden;
}


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

.sheet-final-heading {
    max-width: 750px;

    margin: 0 auto 60px;

    text-align: center;
}

.sheet-final-heading > span {
    color: #f7c706;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;
}

.sheet-final-heading h2 {
    margin: 10px 0;

    color: #172b4d;

    font-size: 38px;
}

.sheet-final-heading h2 strong {
    color: #087bd1;
}

.sheet-final-heading p {
    margin: 0;

    color: #666;

    font-size: 14px;

    line-height: 1.6;
}


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

.sheet-final-wrapper {
    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 55px;

    align-items: stretch;
}


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

.why-sheet {
    background: #ffffff;

    padding: 35px;

    border-radius: 25px;

    box-shadow:
        0 12px 35px rgba(0,0,0,0.08);

    position: relative;
}


/* LEFT BLUE LINE */

.why-sheet::before {
    content: "";

    position: absolute;

    left: 0;

    top: 35px;
    bottom: 35px;

    width: 4px;

    background: #087bd1;

    border-radius: 0 5px 5px 0;
}


/* TITLE */

.why-sheet-title span {
    color: #087bd1;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;
}

.why-sheet-title h3 {
    margin: 7px 0 30px;

    color: #17334f;

    font-size: 25px;
}

.why-sheet-title h3 strong {
    color: #087bd1;
}


/* =====================================================
   WHY POINT
===================================================== */

.why-point {
    display: flex;

    align-items: flex-start;

    gap: 18px;

    padding: 17px 0;

    border-bottom: 1px solid #edf1f5;

    transition: 0.35s ease;
}

.why-point:last-child {
    border-bottom: none;
}


/* ICON */

.why-point-icon {
    width: 52px;
    height: 52px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #eaf5fc;

    color: #087bd1;

    display: flex;

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

    font-size: 20px;

    transition: 0.35s ease;
}


/* NUMBER */

.why-point div:last-child > span {
    color: #f7c706;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;
}


/* TEXT */

.why-point h4 {
    margin: 3px 0 5px;

    color: #17334f;

    font-size: 17px;
}

.why-point p {
    margin: 0;

    color: #666;

    font-size: 13px;

    line-height: 1.5;
}


/* HOVER */

.why-point:hover {
    transform: translateX(8px);
}

.why-point:hover .why-point-icon {
    background: #087bd1;

    color: #ffffff;

    transform: rotate(8deg) scale(1.08);
}


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

.sheet-deliverables {
    background: #07131f;

    padding: 35px;

    border-radius: 25px;

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

    position: relative;

    overflow: hidden;
}


/* BACKGROUND GRID */

.sheet-deliverables::before {
    content: "";

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(8,123,209,0.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(8,123,209,0.07) 1px,
            transparent 1px
        );

    background-size: 35px 35px;

    pointer-events: none;
}


/* TITLE */

.deliverables-title {
    position: relative;

    z-index: 2;
}

.deliverables-title span {
    color: #f7c706;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;
}

.deliverables-title h3 {
    margin: 7px 0 28px;

    color: #ffffff;

    font-size: 25px;
}

.deliverables-title h3 strong {
    color: #087bd1;
}


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

.deliverable-list {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 12px;
}


/* CARD */

.sheet-deliverable {
    min-height: 80px;

    padding: 12px 15px;

    display: flex;

    align-items: center;

    gap: 15px;

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

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

    border-radius: 14px;

    transition: 0.4s ease;

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

.sheet-deliverable:nth-child(2) {
    animation-delay: .3s;
}

.sheet-deliverable:nth-child(3) {
    animation-delay: .6s;
}

.sheet-deliverable:nth-child(4) {
    animation-delay: .9s;
}


/* HOVER */

.sheet-deliverable:hover {
    transform: translateX(-7px);

    background: rgba(8,123,209,0.15);

    border-color: #087bd1;
}


/* ICON */

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

    flex-shrink: 0;

    border-radius: 12px;

    background: #087bd1;

    color: #ffffff;

    display: flex;

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

    font-size: 19px;
}


/* TEXT */

.deliverable-text {
    flex: 1;
}

.deliverable-text span {
    color: #f7c706;

    font-size: 10px;

    font-weight: 800;
}

.deliverable-text h4 {
    margin: 2px 0 3px;

    color: #ffffff;

    font-size: 16px;
}

.deliverable-text p {
    margin: 0;

    color: #aebdca;

    font-size: 12px;
}


/* ARROW */

.deliverable-arrow {
    width: 35px;
    height: 35px;

    border-radius: 50%;

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

    color: #087bd1;

    display: flex;

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

    transition: 0.3s ease;
}

.sheet-deliverable:hover .deliverable-arrow {
    background: #f7c706;

    color: #07131f;

    transform: translateX(4px);
}


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

@keyframes deliverableFloat {

    0% {
        transform: translateY(0);
    }

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

    100% {
        transform: translateY(0);
    }

}


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

@media (max-width: 900px) {

    .sheet-final-wrapper {
        grid-template-columns: 1fr;

        gap: 30px;
    }

}


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

@media (max-width: 600px) {

    .sheet-final {
        padding: 65px 20px;
    }

    .sheet-final-heading h2 {
        font-size: 30px;
    }

    .why-sheet,
    .sheet-deliverables {
        padding: 25px;
    }

    .why-sheet-title h3,
    .deliverables-title h3 {
        font-size: 22px;
    }

    .why-point {
        gap: 12px;
    }

    .why-point-icon {
        width: 45px;
        height: 45px;

        font-size: 17px;
    }

}/* =====================================================
   FINAL CTA
===================================================== */

.sheet-cta {
    width: 100%;

    min-height: 400px;

    padding: 80px 20px;

    background: #05090e;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;
}


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

.sheet-cta-grid {
    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(8,123,209,0.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(8,123,209,0.08) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    opacity: 0.7;
}


/* =====================================================
   BLUE GLOW
===================================================== */

.sheet-cta::before {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    background: #087bd1;

    filter: blur(150px);

    opacity: 0.12;

    left: -180px;

    top: 50%;

    transform: translateY(-50%);
}


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

    position: absolute;

    width: 350px;
    height: 350px;

    border-radius: 50%;

    background: #f7c706;

    filter: blur(150px);

    opacity: 0.07;

    right: -120px;

    top: 50%;

    transform: translateY(-50%);
}


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

.sheet-cta-content {
    position: relative;

    z-index: 2;

    max-width: 750px;
}


/* LABEL */

.sheet-cta-label {
    color: #f7c706;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 4px;
}


/* HEADING */

.sheet-cta h2 {
    margin: 14px 0 18px;

    color: #ffffff;

    font-size: 42px;

    line-height: 1.15;
}

.sheet-cta h2 strong {
    color: #087bd1;

    display: block;
}


/* TEXT */

.sheet-cta p {
    max-width: 650px;

    margin: 0 auto 30px;

    color: #aeb8c3;

    font-size: 15px;

    line-height: 1.7;
}


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

.sheet-cta-buttons {
    display: flex;

    justify-content: center;

    gap: 15px;

    flex-wrap: wrap;
}


.cta-btn {
    min-width: 190px;

    padding: 14px 22px;

    border-radius: 7px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    transition: 0.35s ease;
}


/* PRIMARY */

.cta-btn.primary {
    background: #f7c706;

    color: #05090e;

    box-shadow:
        0 8px 25px rgba(247,199,6,0.20);
}


.cta-btn.primary:hover {
    transform: translateY(-4px);

    box-shadow:
        0 12px 30px rgba(247,199,6,0.35);
}


/* SECONDARY */

.cta-btn.secondary {
    border: 1px solid #087bd1;

    color: #ffffff;

    background: rgba(8,123,209,0.08);
}


.cta-btn.secondary:hover {
    background: #087bd1;

    transform: translateY(-4px);
}


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

@media (max-width: 600px) {

    .sheet-cta {
        min-height: 450px;

        padding: 70px 20px;
    }

    .sheet-cta h2 {
        font-size: 31px;
    }

    .sheet-cta p {
        font-size: 13px;
    }

    .cta-btn {
        width: 100%;

        max-width: 280px;
    }

}
/* manufaurinh  deawing page
---------------------------------------------*/
/* =====================================================
   DESIGN & MANUFACTURING HERO
===================================================== */

.dm-hero {
    width: 100%;
    min-height: 680px;

    background: #05090e;

    position: relative;

    overflow: hidden;

    display: flex;
    align-items: center;

    padding: 90px 7%;
}


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

.dm-hero::before {
    content: "";

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(8,123,209,0.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(8,123,209,0.07) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    opacity: .6;
}


/* =====================================================
   BLUE GLOW
===================================================== */

.dm-hero::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    background: #087bd1;

    border-radius: 50%;

    filter: blur(160px);

    opacity: .12;

    right: 0;

    top: 50%;

    transform: translateY(-50%);
}


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

.dm-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5,9,14,.98) 0%,
            rgba(5,9,14,.90) 45%,
            rgba(5,9,14,.25) 100%
        );

    z-index: 1;
}


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

.dm-hero-content {
    max-width: 650px;

    position: relative;

    z-index: 5;
}


/* LABEL */

.dm-hero-label {
    color: #f7c706;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 3px;
}


/* HEADING */

.dm-hero h1 {
    margin: 18px 0;

    color: #ffffff;

    font-size: 56px;

    line-height: 1.08;

    letter-spacing: -1px;
}

.dm-hero h1 strong {
    display: block;

    color: #087bd1;

    font-weight: 800;
}


/* DESCRIPTION */

.dm-hero-content p {
    max-width: 580px;

    margin: 0 0 32px;

    color: #b7c1cb;

    font-size: 16px;

    line-height: 1.7;
}


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

.dm-hero-buttons {
    display: flex;

    gap: 14px;

    flex-wrap: wrap;
}

.dm-btn {
    padding: 14px 22px;

    min-width: 185px;

    border-radius: 6px;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    font-size: 13px;

    font-weight: 700;

    transition: .35s ease;
}


/* PRIMARY */

.dm-primary {
    background: #f7c706;

    color: #05090e;

    box-shadow:
        0 8px 25px rgba(247,199,6,.18);
}

.dm-primary:hover {
    transform: translateY(-5px);

    box-shadow:
        0 14px 35px rgba(247,199,6,.30);
}


/* SECONDARY */

.dm-secondary {
    border: 1px solid #087bd1;

    color: #ffffff;

    background: rgba(8,123,209,.08);
}

.dm-secondary:hover {
    background: #087bd1;

    transform: translateY(-5px);
}


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

.dm-hero-image {
    position: absolute;

    z-index: 3;

    right: 3%;

    top: 50%;

    transform: translateY(-50%);

    width: 48%;

    max-width: 700px;
}

.dm-hero-image img {
    width: 100%;

    display: block;

    object-fit: contain;

    filter:
        drop-shadow(0 25px 40px rgba(0,0,0,.55));

    animation: machineFloat 5s ease-in-out infinite;
}


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

@keyframes machineFloat {

    0% {
        transform: translateY(0);
    }

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

    100% {
        transform: translateY(0);
    }

}


/* =====================================================
   DECORATIVE LINES
===================================================== */

.dm-hero-line {
    position: absolute;

    height: 1px;

    background: #087bd1;

    opacity: .6;

    z-index: 2;
}

.line-1 {
    width: 230px;

    right: 8%;

    top: 22%;

    transform: rotate(-25deg);
}

.line-2 {
    width: 180px;

    right: 12%;

    bottom: 20%;

    transform: rotate(25deg);
}


/* =====================================================
   DOTS
===================================================== */

.dm-hero-dot {
    position: absolute;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #f7c706;

    z-index: 4;

    box-shadow:
        0 0 15px rgba(247,199,6,.6);

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

.dot-a {
    right: 22%;

    top: 27%;
}

.dot-b {
    right: 15%;

    bottom: 25%;

    animation-delay: .7s;
}

@keyframes dotPulse {

    0% {
        transform: scale(1);
        opacity: .7;
    }

    50% {
        transform: scale(1.5);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: .7;
    }

}


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

@media (max-width: 900px) {

    .dm-hero {
        min-height: 700px;

        padding: 80px 25px;

        align-items: flex-start;
    }

    .dm-hero-content {
        margin-top: 40px;
    }

    .dm-hero h1 {
        font-size: 42px;
    }

    .dm-hero-image {
        width: 70%;

        right: 50%;

        top: auto;

        bottom: -20px;

        transform: translateX(50%);
    }

    .dm-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(5,9,14,.98),
                rgba(5,9,14,.65)
            );
    }

}


@media (max-width: 600px) {

    .dm-hero {
        min-height: 720px;

        padding: 70px 20px;
    }

    .dm-hero h1 {
        font-size: 34px;
    }

    .dm-hero-content p {
        font-size: 14px;
    }

    .dm-hero-label {
        font-size: 10px;

        letter-spacing: 2px;
    }

    .dm-btn {
        width: 100%;

        max-width: 280px;
    }

    .dm-hero-image {
        width: 90%;

        bottom: 0;
    }

}/* =====================================================
   WHAT WE OFFER
===================================================== */

.dm-offer {
    padding: 100px 5%;

    background: #f5f8fc;

    overflow: hidden;
}


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

.dm-offer-heading {
    max-width: 700px;

    margin: 0 auto 70px;

    text-align: center;
}

.dm-offer-heading span {
    color: #087bd1;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;
}

.dm-offer-heading h2 {
    margin: 10px 0;

    color: #172b4d;

    font-size: 42px;
}

.dm-offer-heading h2 strong {
    color: #087bd1;
}

.dm-offer-heading p {
    margin: 0;

    color: #687482;

    font-size: 14px;

    line-height: 1.7;
}


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

.dm-timeline {
    max-width: 1250px;

    margin: auto;

    display: grid;

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

    position: relative;
}


/* CONNECTING LINE */

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

    position: absolute;

    top: 22px;

    left: 8%;

    right: 8%;

    height: 2px;

    background: #087bd1;

    opacity: .25;
}


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

.dm-offer-item {
    position: relative;

    padding: 0 15px;

    text-align: center;

    z-index: 2;
}


/* NUMBER */

.dm-offer-number {
    width: 45px;
    height: 45px;

    margin: 0 auto 25px;

    border-radius: 50%;

    background: #07131f;

    border: 3px solid #f7c706;

    color: #f7c706;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    font-weight: 800;

    position: relative;

    z-index: 3;

    transition: .4s ease;
}


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

.dm-offer-image {
    height: 190px;

    border-radius: 16px;

    overflow: hidden;

    position: relative;

    background: #07131f;

    box-shadow:
        0 12px 30px rgba(0,0,0,.12);

    transition: .45s ease;
}


.dm-offer-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: .5s ease;
}


/* IMAGE OVERLAY */

.dm-image-overlay {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(5,9,14,.35);

    color: #ffffff;

    font-size: 30px;

    opacity: 0;

    transition: .4s ease;
}


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

.dm-offer-content {
    padding: 22px 5px 0;
}

.dm-offer-content > span {
    color: #087bd1;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}

.dm-offer-content h3 {
    margin: 7px 0 8px;

    color: #172b4d;

    font-size: 18px;
}

.dm-offer-content p {
    margin: 0;

    color: #687482;

    font-size: 12px;

    line-height: 1.6;
}


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

.dm-offer-item:hover .dm-offer-number {
    background: #087bd1;

    border-color: #087bd1;

    color: #ffffff;

    transform: scale(1.12);

    box-shadow:
        0 0 20px rgba(8,123,209,.35);
}


.dm-offer-item:hover .dm-offer-image {
    transform: translateY(-8px);

    box-shadow:
        0 20px 40px rgba(8,123,209,.18);
}


.dm-offer-item:hover .dm-offer-image img {
    transform: scale(1.08);
}


.dm-offer-item:hover .dm-image-overlay {
    opacity: 1;
}


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

@media (max-width: 950px) {

    .dm-timeline {
        grid-template-columns: repeat(2, 1fr);

        gap: 50px 15px;
    }

    .dm-timeline::before {
        display: none;
    }

}


@media (max-width: 600px) {

    .dm-offer {
        padding: 70px 20px;
    }

    .dm-offer-heading h2 {
        font-size: 32px;
    }

    .dm-timeline {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .dm-offer-image {
        height: 210px;
    }

}/* =====================================================
   DESIGN & MANUFACTURING PROCESS
===================================================== */

.dm-process {
    width: 100%;

    padding: 60px 5%;

    background: #ffffff;

    overflow: hidden;
}


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

.dm-process-heading {
    max-width: 750px;

    margin: 0 auto 45px;

    text-align: center;
}

.dm-process-heading > span {
    color: #087bd1;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;
}

.dm-process-heading h2 {
    margin: 10px 0;

    color: #172b4d;

    font-size: 38px;
}

.dm-process-heading h2 strong {
    color: #087bd1;
}

.dm-process-heading p {
    margin: 0;

    color: #687482;

    font-size: 14px;

    line-height: 1.6;
}


/* =====================================================
   FLOW
===================================================== */

.dm-process-flow {
    max-width: 1250px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;
}


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

.dm-process-card {
    width: 270px;

    background: #f7f9fc;

    border: 1px solid #e2e8ef;

    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 8px 25px rgba(0,0,0,.06);

    transition: .4s ease;

    flex-shrink: 0;
}


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

.dm-process-image {
    height: 150px;

    position: relative;

    overflow: hidden;

    background: #07131f;
}

.dm-process-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: .5s ease;
}


/* DARK OVERLAY */

.dm-process-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 40%,
            rgba(0,0,0,.65)
        );
}


/* NUMBER */

.dm-process-number {
    position: absolute;

    left: 15px;
    bottom: 12px;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: #f7c706;

    color: #07131f;

    display: flex;

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

    font-size: 11px;

    font-weight: 800;

    z-index: 2;
}


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

.dm-process-content {
    padding: 18px;
}

.dm-process-content > span {
    color: #087bd1;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;
}

.dm-process-content h3 {
    margin: 7px 0 8px;

    color: #172b4d;

    font-size: 16px;
}

.dm-process-content p {
    margin: 0;

    color: #687482;

    font-size: 12px;

    line-height: 1.55;
}


/* =====================================================
   ARROW
===================================================== */

.dm-process-arrow {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #087bd1;

    color: #ffffff;

    display: flex;

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

    font-size: 13px;

    box-shadow:
        0 5px 15px rgba(8,123,209,.25);

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

@keyframes processArrow {

    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(5px);
    }

    100% {
        transform: translateX(0);
    }

}


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

.dm-process-card:hover {
    transform: translateY(-9px);

    border-color: #087bd1;

    box-shadow:
        0 18px 35px rgba(8,123,209,.15);
}

.dm-process-card:hover
.dm-process-image img {
    transform: scale(1.08);
}


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

@media (max-width: 1100px) {

    .dm-process-flow {
        flex-wrap: wrap;
    }

    .dm-process-arrow {
        display: none;
    }

}


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

@media (max-width: 600px) {

    .dm-process {
        padding: 60px 20px;
    }

    .dm-process-heading h2 {
        font-size: 30px;
    }

    .dm-process-card {
        width: 100%;

        max-width: 360px;
    }

    .dm-process-flow {
        flex-direction: column;
    }

}/* =====================================================
   MANUFACTURING CAPABILITIES
===================================================== */

.dm-capabilities {
    width: 100%;

    padding: 60px 5%;

    background: #05090e;

    overflow: hidden;
}


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

.dm-cap-wrapper {
    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;
}


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

.dm-cap-image {
    height: 520px;

    position: relative;

    border-radius: 22px;

    overflow: hidden;

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

    background: #07131f;

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


.dm-cap-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: .6s ease;
}


/* IMAGE OVERLAY */

.dm-cap-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(5,9,14,.85)
        );
}


/* IMAGE LABEL */

.dm-cap-image-label {
    position: absolute;

    left: 25px;

    bottom: 25px;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 4px;
}

.dm-cap-image-label span {
    color: #f7c706;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;
}

.dm-cap-image-label strong {
    color: #ffffff;

    font-size: 24px;

    letter-spacing: 1px;
}


/* IMAGE HOVER */

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


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

.dm-cap-content {
    color: #ffffff;
}


/* LABEL */

.dm-cap-label {
    color: #f7c706;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;
}


/* HEADING */

.dm-cap-content h2 {
    margin: 12px 0 15px;

    color: #ffffff;

    font-size: 40px;

    line-height: 1.15;
}

.dm-cap-content h2 strong {
    color: #087bd1;
}


/* INTRO */

.dm-cap-intro {
    margin: 0 0 28px;

    color: #aeb8c3;

    font-size: 14px;

    line-height: 1.7;

    max-width: 520px;
}


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

.dm-cap-item {
    display: grid;

    grid-template-columns:
        35px 48px 1fr;

    align-items: center;

    gap: 14px;

    padding: 15px 0;

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

    transition: .35s ease;
}

.dm-cap-item:last-child {
    border-bottom: none;
}


/* NUMBER */

.dm-cap-number {
    color: #f7c706;

    font-size: 11px;

    font-weight: 800;
}


/* ICON */

.dm-cap-icon {
    width: 48px;
    height: 48px;

    border-radius: 12px;

    background: rgba(8,123,209,.12);

    border: 1px solid rgba(8,123,209,.25);

    color: #087bd1;

    display: flex;

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

    font-size: 18px;

    transition: .35s ease;
}


/* TEXT */

.dm-cap-text h3 {
    margin: 0 0 4px;

    color: #ffffff;

    font-size: 16px;
}

.dm-cap-text p {
    margin: 0;

    color: #8795a3;

    font-size: 12px;

    line-height: 1.5;
}


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

.dm-cap-item:hover {
    transform: translateX(7px);
}

.dm-cap-item:hover .dm-cap-icon {
    background: #087bd1;

    color: #ffffff;

    transform: scale(1.08);

    box-shadow:
        0 0 20px rgba(8,123,209,.25);
}


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

@media (max-width: 900px) {

    .dm-cap-wrapper {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .dm-cap-image {
        height: 400px;
    }

}


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

@media (max-width: 600px) {

    .dm-capabilities {
        padding: 60px 20px;
    }

    .dm-cap-image {
        height: 320px;

        border-radius: 16px;
    }

    .dm-cap-content h2 {
        font-size: 31px;
    }

    .dm-cap-item {
        grid-template-columns:
            28px 45px 1fr;

        gap: 10px;
    }

    .dm-cap-icon {
        width: 45px;
        height: 45px;
    }

}/* =====================================================
   ENGINEERING + MANUFACTURING
===================================================== */

.eng-manufacturing {
    width: 100%;

    padding: 60px 5%;

    background: #05090e;

    position: relative;

    overflow: hidden;
}


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

.eng-manufacturing::before {
    content: "";

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(8,123,209,0.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(8,123,209,0.06) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    pointer-events: none;
}


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

.eng-heading {
    max-width: 750px;

    margin: 0 auto 50px;

    text-align: center;

    position: relative;

    z-index: 2;
}

.eng-heading > span {
    color: #f7c706;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;
}

.eng-heading h2 {
    margin: 10px 0 14px;

    color: #ffffff;

    font-size: 40px;
}

.eng-heading h2 strong {
    color: #087bd1;
}

.eng-heading p {
    margin: 0;

    color: #9eabb7;

    font-size: 14px;

    line-height: 1.7;
}


/* =====================================================
   MAIN STAGE
===================================================== */

.eng-stage {
    max-width: 1100px;

    min-height: 600px;

    margin: auto;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =====================================================
   CENTER IMAGE
===================================================== */

.eng-main-image {
    width: 500px;

    height: 400px;

    position: relative;

    border-radius: 24px;

    overflow: hidden;

    border: 1px solid rgba(8,123,209,.45);

    background: #07131f;

    box-shadow:
        0 0 60px rgba(8,123,209,.12),
        0 25px 60px rgba(0,0,0,.45);

    z-index: 2;
}

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

    object-fit: cover;

    display: block;

    transition: .6s ease;
}

.eng-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(5,9,14,.05),
            rgba(5,9,14,.65)
        );
}


/* =====================================================
   CENTER BADGE
===================================================== */

.eng-center-badge {
    position: absolute;

    left: 50%;

    bottom: 25px;

    transform: translateX(-50%);

    padding: 12px 25px;

    background: rgba(5,9,14,.88);

    border: 1px solid #087bd1;

    border-radius: 8px;

    text-align: center;

    backdrop-filter: blur(8px);
}

.eng-center-badge span {
    display: block;

    color: #f7c706;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;
}

.eng-center-badge strong {
    display: block;

    margin-top: 4px;

    color: #ffffff;

    font-size: 14px;

    letter-spacing: 1px;
}


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

.eng-card {
    width: 285px;

    min-height: 115px;

    padding: 18px;

    position: absolute;

    display: grid;

    grid-template-columns: 32px 48px 1fr;

    align-items: center;

    gap: 12px;

    background: rgba(10,18,27,.94);

    border: 1px solid rgba(8,123,209,.35);

    border-radius: 14px;

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

    z-index: 3;

    transition: .4s ease;
}


/* CARD POSITIONS */

.eng-card-1 {
    left: 0;

    top: 65px;
}

.eng-card-2 {
    right: 0;

    top: 65px;
}

.eng-card-3 {
    left: 0;

    bottom: 65px;
}

.eng-card-4 {
    right: 0;

    bottom: 65px;
}


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

.eng-card-number {
    color: #f7c706;

    font-size: 11px;

    font-weight: 800;
}


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

.eng-card-icon {
    width: 48px;
    height: 48px;

    border-radius: 12px;

    background: rgba(8,123,209,.12);

    border: 1px solid rgba(8,123,209,.3);

    color: #087bd1;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    transition: .35s ease;
}


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

.eng-card h3 {
    margin: 0 0 5px;

    color: #ffffff;

    font-size: 15px;
}

.eng-card p {
    margin: 0;

    color: #8997a4;

    font-size: 11px;

    line-height: 1.5;
}


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

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

    border-color: #087bd1;

    box-shadow:
        0 20px 40px rgba(8,123,209,.16);
}

.eng-card:hover .eng-card-icon {
    background: #087bd1;

    color: #ffffff;

    transform: scale(1.08);
}

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


/* =====================================================
   DECORATIVE CONNECTION LINES
===================================================== */

.eng-stage::before,
.eng-stage::after {
    content: "";

    position: absolute;

    width: 180px;

    height: 1px;

    background: #087bd1;

    opacity: .35;

    z-index: 1;
}

.eng-stage::before {
    transform: rotate(25deg);

    left: 220px;

    top: 160px;
}

.eng-stage::after {
    transform: rotate(-25deg);

    right: 220px;

    top: 160px;
}


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

@media (max-width: 1050px) {

    .eng-stage {
        min-height: auto;

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 20px;
    }

    .eng-main-image {
        grid-column: 1 / -1;

        width: 100%;

        max-width: 600px;

        margin: auto;
    }

    .eng-card {
        position: relative;

        left: auto;
        right: auto;
        top: auto;
        bottom: auto;

        width: 100%;
    }

    .eng-stage::before,
    .eng-stage::after {
        display: none;
    }

}


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

@media (max-width: 600px) {

    .eng-manufacturing {
        padding: 60px 20px;
    }

    .eng-heading h2 {
        font-size: 30px;
    }

    .eng-stage {
        display: flex;

        flex-direction: column;

        gap: 15px;
    }

    .eng-main-image {
        width: 100%;

        height: 300px;

        order: 1;
    }

    .eng-card {
        width: 100%;

        order: 2;
    }

    .eng-card-1,
    .eng-card-2,
    .eng-card-3,
    .eng-card-4 {
        position: relative;
    }

}/* =====================================================
   OUR DELIVERABLES
===================================================== */

.dm-deliverables {
    width: 100%;
    padding: 60px 5%;
    background: #05090e;
    overflow: hidden;
}


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

.dm-deliverables-heading {
    max-width: 700px;
    margin: 0 auto 40px;
    text-align: center;
}

.dm-deliverables-heading > span {
    color: #f7c706;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 3px;
}

.dm-deliverables-heading h2 {
    margin: 8px 0 12px;
    color: #ffffff;
    font-size: 38px;
}

.dm-deliverables-heading h2 strong {
    color: #087bd1;
}

.dm-deliverables-heading p {
    margin: 0;
    color: #929eaa;
    font-size: 13px;
    line-height: 1.6;
}


/* =====================================================
   GRID — 4 BOX IN ONE LINE
===================================================== */

.dm-deliverables-grid {
    max-width: 1200px;
    margin: auto;

    display: grid;

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

    gap: 18px;
}


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

.dm-deliverable-card {
    position: relative;

    background: #0a1119;

    border: 1px solid #1b2a38;

    border-radius: 14px;

    overflow: hidden;

    transition: .4s ease;

    box-shadow:
        0 10px 30px rgba(0,0,0,.25);
}


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

.dm-deliverable-top {
    height: 42px;

    padding: 0 15px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom: 1px solid rgba(255,255,255,.06);
}

.dm-deliverable-top span {
    color: #f7c706;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;
}

.dm-deliverable-top i {
    color: #087bd1;

    font-size: 11px;

    transition: .3s ease;
}


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

.dm-deliverable-image {
    width: 100%;

    height: 145px;

    overflow: hidden;

    background: #07131f;
}

.dm-deliverable-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: .5s ease;
}


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

.dm-deliverable-content {
    padding: 17px;
}

.dm-deliverable-content > span {
    color: #087bd1;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;
}

.dm-deliverable-content h3 {
    margin: 6px 0 7px;

    color: #ffffff;

    font-size: 16px;

    line-height: 1.3;
}

.dm-deliverable-content p {
    margin: 0;

    color: #8996a2;

    font-size: 11px;

    line-height: 1.55;
}


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

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

    border-color: #087bd1;

    box-shadow:
        0 20px 45px rgba(8,123,209,.16);
}

.dm-deliverable-card:hover
.dm-deliverable-image img {
    transform: scale(1.08);
}

.dm-deliverable-card:hover
.dm-deliverable-top i {
    color: #f7c706;

    transform: translate(3px, -3px);
}


/* =====================================================
   TOP BLUE LINE
===================================================== */

.dm-deliverable-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 2px;

    background: #087bd1;

    transition: .4s ease;

    z-index: 5;
}

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


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

@media (max-width: 1000px) {

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

}


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

@media (max-width: 600px) {

    .dm-deliverables {
        padding: 60px 20px;
    }

    .dm-deliverables-heading h2 {
        font-size: 30px;
    }

    .dm-deliverables-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .dm-deliverable-image {
        height: 180px;
    }

}/* =====================================================
   WHY CHOOSE + PROJECT CTA
===================================================== */

.dm-final-section {
    width: 100%;

    padding: 60px 5%;

    background: #05090e;

    position: relative;

    overflow: hidden;
}


/* BACKGROUND GLOW */

.dm-final-section::before {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    right: -180px;
    bottom: -200px;

    background: #087bd1;

    border-radius: 50%;

    filter: blur(150px);

    opacity: .10;
}


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

.dm-final-wrapper {
    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;

    position: relative;

    z-index: 2;
}


/* =====================================================
   LEFT — WHY
===================================================== */

.dm-final-label {
    color: #f7c706;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;
}


.dm-why h2 {
    margin: 10px 0 12px;

    color: #ffffff;

    font-size: 40px;

    line-height: 1.15;
}

.dm-why h2 strong {
    color: #087bd1;
}


.dm-why-intro {
    max-width: 500px;

    margin: 0 0 30px;

    color: #8997a4;

    font-size: 13px;

    line-height: 1.7;
}


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

.dm-why-list {
    display: flex;

    flex-direction: column;
}


.dm-why-item {
    min-height: 82px;

    display: grid;

    grid-template-columns: 45px 2px 1fr;

    gap: 15px;

    align-items: center;

    transition: .35s ease;
}


/* NUMBER */

.dm-why-number {
    color: #f7c706;

    font-size: 12px;

    font-weight: 800;
}


/* VERTICAL LINE */

.dm-why-line {
    width: 2px;

    height: 55px;

    background: #1d3548;

    transition: .35s ease;
}


/* TEXT */

.dm-why-text h3 {
    margin: 0 0 4px;

    color: #ffffff;

    font-size: 15px;
}


.dm-why-text p {
    margin: 0;

    color: #7f8d99;

    font-size: 11px;

    line-height: 1.5;
}


/* HOVER */

.dm-why-item:hover {
    transform: translateX(8px);
}

.dm-why-item:hover .dm-why-line {
    background: #087bd1;

    box-shadow:
        0 0 12px rgba(8,123,209,.5);
}


/* =====================================================
   RIGHT — CTA
===================================================== */

.dm-project-cta {
    min-height: 440px;

    padding: 38px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #0b1722,
            #071019
        );

    border: 1px solid #1b3448;

    box-shadow:
        0 25px 60px rgba(0,0,0,.35);

    position: relative;

    overflow: hidden;
}


/* BLUE TOP LINE */

.dm-project-cta::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #087bd1,
            #f7c706
        );
}


/* CTA TOP */

.dm-cta-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 30px;
}


.dm-cta-top > span {
    color: #087bd1;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;
}


.dm-cta-icon {
    width: 42px;
    height: 42px;

    border-radius: 50%;

    border: 1px solid #24516d;

    color: #f7c706;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 14px;
}


/* CTA HEADING */

.dm-project-cta h2 {
    margin: 0 0 18px;

    color: #ffffff;

    font-size: 38px;

    line-height: 1.15;
}


.dm-project-cta h2 strong {
    display: block;

    color: #087bd1;
}


/* CTA DESCRIPTION */

.dm-project-cta > p {
    margin: 0 0 25px;

    color: #929eaa;

    font-size: 13px;

    line-height: 1.7;
}


/* =====================================================
   HIGHLIGHT
===================================================== */

.dm-cta-highlight {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 25px;

    color: #d3dbe2;

    font-size: 12px;
}


.dm-cta-highlight i {
    color: #f7c706;

    font-size: 12px;
}


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

.dm-cta-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 14px 24px;

    background: #f7c706;

    color: #05090e;

    border-radius: 6px;

    text-decoration: none;

    font-size: 12px;

    font-weight: 800;

    transition: .35s ease;

    box-shadow:
        0 10px 25px rgba(247,199,6,.15);
}


.dm-cta-button:hover {
    transform: translateY(-5px);

    background: #ffffff;

    box-shadow:
        0 15px 30px rgba(247,199,6,.25);
}


.dm-cta-button i {
    transition: .3s ease;
}


.dm-cta-button:hover i {
    transform: translateX(5px);
}


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

.dm-cta-footer {
    position: absolute;

    right: 30px;

    bottom: 25px;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 3px;
}


.dm-cta-footer span {
    color: #ffffff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;
}


.dm-cta-footer small {
    color: #536472;

    font-size: 7px;

    letter-spacing: 1.5px;
}


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

@media (max-width: 900px) {

    .dm-final-wrapper {
        grid-template-columns: 1fr;

        gap: 45px;
    }

}


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

@media (max-width: 600px) {

    .dm-final-section {
        padding: 60px 20px;
    }

    .dm-why h2 {
        font-size: 31px;
    }

    .dm-project-cta {
        min-height: 420px;

        padding: 28px 22px;
    }

    .dm-project-cta h2 {
        font-size: 30px;
    }

    .dm-cta-footer {
        right: 22px;
        bottom: 20px;
    }

}
/* product design page 
----------------------------------------------*/
/* =====================================================
   PRODUCT DESIGN — HERO
===================================================== */

.product-hero {
    width: 100%;

    min-height: 650px;

    padding: 60px 5%;

    background:
        radial-gradient(
            circle at 75% 50%,
            rgba(8,123,209,.12),
            transparent 35%
        ),
        #05090e;

    position: relative;

    overflow: hidden;
}


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

.product-hero-wrapper {
    max-width: 1200px;

    min-height: 530px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;
}


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

.product-hero-content {
    position: relative;

    z-index: 2;
}


.product-hero-label {
    color: #f7c706;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;
}


.product-hero-content h1 {
    margin: 15px 0 20px;

    color: #ffffff;

    font-size: 64px;

    line-height: 1.05;

    letter-spacing: -2px;
}


.product-hero-content h1 span {
    display: block;

    color: #087bd1;
}


.product-hero-content p {
    max-width: 520px;

    margin: 0 0 30px;

    color: #9aa7b3;

    font-size: 15px;

    line-height: 1.8;
}


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

.product-hero-buttons {
    display: flex;

    align-items: center;

    gap: 15px;
}


.product-btn-primary,
.product-btn-secondary {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 22px;

    border-radius: 6px;

    text-decoration: none;

    font-size: 12px;

    font-weight: 800;

    transition: .35s ease;
}


.product-btn-primary {
    background: #f7c706;

    color: #05090e;
}


.product-btn-primary:hover {
    transform: translateY(-4px);

    background: #ffffff;
}


.product-btn-secondary {
    color: #ffffff;

    border: 1px solid #294255;

    background: transparent;
}


.product-btn-secondary:hover {
    border-color: #087bd1;

    color: #087bd1;
}


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

.product-hero-visual {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;
}


.product-image-frame {
    width: 500px;

    height: 440px;

    position: relative;

    border-radius: 25px;

    overflow: hidden;

    border: 1px solid rgba(8,123,209,.45);

    background: #07131f;

    box-shadow:
        0 0 70px rgba(8,123,209,.12),
        0 30px 70px rgba(0,0,0,.45);

    transform: perspective(1000px) rotateY(-4deg);

    transition: .5s ease;
}


.product-image-frame img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: .6s ease;
}


.product-image-frame:hover {
    transform:
        perspective(1000px)
        rotateY(0deg)
        translateY(-5px);
}


.product-image-frame:hover img {
    transform: scale(1.05);
}


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

.product-floating-card {
    position: absolute;

    right: -10px;

    bottom: 30px;

    padding: 14px 20px;

    background: rgba(5,9,14,.92);

    border: 1px solid #087bd1;

    border-radius: 8px;

    backdrop-filter: blur(10px);

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

    animation: productFloat 3s ease-in-out infinite;
}


.product-floating-card span {
    display: block;

    color: #f7c706;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 3px;
}


.product-floating-card strong {
    display: block;

    margin-top: 4px;

    color: #ffffff;

    font-size: 12px;

    letter-spacing: 1px;
}


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

@keyframes productFloat {

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

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

}


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

@media (max-width: 900px) {

    .product-hero-wrapper {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .product-hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .product-hero-buttons {
        justify-content: center;
    }

    .product-hero-visual {
        margin-top: 20px;
    }

}


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

@media (max-width: 600px) {

    .product-hero {
        padding: 60px 20px;
    }

    .product-hero-content h1 {
        font-size: 43px;

        letter-spacing: -1px;
    }

    .product-hero-content p {
        font-size: 13px;
    }

    .product-hero-buttons {
        flex-direction: column;

        width: 100%;
    }

    .product-btn-primary,
    .product-btn-secondary {
        width: 100%;

        justify-content: center;
    }

    .product-image-frame {
        width: 100%;

        height: 320px;

        transform: none;
    }

    .product-floating-card {
        right: 10px;

        bottom: 15px;
    }

}/* =====================================================
   WHAT WE DESIGN — PRODUCT DESIGN FLOW
===================================================== */

.product-flow {
    width: 100%;

    padding: 60px 5%;

    background: #05090e;

    position: relative;

    overflow: hidden;
}


/* =====================================================
   ANIMATED TECHNICAL BACKGROUND
===================================================== */

.product-flow::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(8,123,209,.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(8,123,209,.06) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    animation: engineeringGrid 12s linear infinite;

    pointer-events: none;

    z-index: 0;
}


/* BLUE GLOW */

.product-flow::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: -180px;
    left: -120px;

    border-radius: 50%;

    background: rgba(8,123,209,.13);

    filter: blur(90px);

    animation: blueGlowMove 8s ease-in-out infinite alternate;

    pointer-events: none;

    z-index: 0;
}


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

@keyframes engineeringGrid {

    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 45px 45px;
    }

}


/* =====================================================
   BLUE GLOW ANIMATION
===================================================== */

@keyframes blueGlowMove {

    0% {
        transform: translate(0, 0);
        opacity: .5;
    }

    50% {
        transform: translate(280px, 100px);
        opacity: .8;
    }

    100% {
        transform: translate(650px, 300px);
        opacity: .45;
    }

}


/* =====================================================
   CONTENT ABOVE BACKGROUND
===================================================== */

.product-flow > * {
    position: relative;

    z-index: 2;
}


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

.product-flow-heading {
    max-width: 700px;

    margin: 0 auto 55px;

    text-align: center;

    position: relative;

    z-index: 2;
}

.product-flow-heading > span {
    color: #f7c706;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;
}

.product-flow-heading h2 {
    margin: 9px 0 12px;

    color: #ffffff;

    font-size: 40px;

    line-height: 1.1;
}

.product-flow-heading h2 strong {
    color: #087bd1;
}

.product-flow-heading p {
    margin: 0;

    color: #8997a4;

    font-size: 13px;

    line-height: 1.7;
}


/* =====================================================
   FLOW DIAGRAM
===================================================== */

.product-flow-diagram {

    width: 950px;

    height: 570px;

    margin: auto;

    position: relative;
}


/* =====================================================
   COMMON CIRCLE
===================================================== */

.flow-circle {

    width: 155px;

    height: 155px;

    position: absolute;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #0d1b28,
            #071019
        );

    border: 1px solid #214258;

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

    transition: .4s ease;

    z-index: 4;
}


/* CIRCLE HOVER */

.flow-circle:hover {

    transform: scale(1.08);

    border-color: #087bd1;

    box-shadow:
        0 0 35px rgba(8,123,209,.25),
        0 15px 40px rgba(0,0,0,.45);
}


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

.flow-number {

    position: absolute;

    top: 17px;

    color: #f7c706;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}


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

.flow-icon {

    width: 40px;

    height: 40px;

    margin-bottom: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #087bd1;

    border: 1px solid rgba(8,123,209,.35);

    background: rgba(8,123,209,.08);

    font-size: 16px;

    transition: .35s ease;
}


.flow-circle:hover .flow-icon {

    color: #ffffff;

    background: #087bd1;

    transform: rotate(8deg);
}


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

.flow-circle h3 {

    margin: 0;

    max-width: 120px;

    color: #ffffff;

    font-size: 12px;

    line-height: 1.4;

    text-transform: uppercase;

    letter-spacing: .5px;
}


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


/* 01 */

.flow-01 {

    top: 0;

    left: 397px;
}


/* 02 */

.flow-02 {

    top: 250px;

    left: 30px;
}


/* 03 */

.flow-03 {

    top: 250px;

    right: 30px;
}


/* 04 */

.flow-04 {

    bottom: 0;

    left: 397px;
}


/* =====================================================
   CENTER MECHCAD
===================================================== */

.flow-center {

    position: absolute;

    top: 238px;

    left: 50%;

    transform: translateX(-50%);

    width: 180px;

    height: 180px;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 5;
}


.flow-center-ring {

    width: 150px;

    height: 150px;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:
        radial-gradient(
            circle,
            #0c2537,
            #06111b
        );

    border: 2px solid #087bd1;

    box-shadow:
        0 0 0 10px rgba(8,123,209,.05),
        0 0 45px rgba(8,123,209,.20);

    animation: centerPulse 3s ease-in-out infinite;
}


.flow-center-ring span {

    color: #f7c706;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 3px;
}


.flow-center-ring strong {

    margin-top: 6px;

    color: #ffffff;

    font-size: 13px;

    line-height: 1.3;

    letter-spacing: 1px;
}


@keyframes centerPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 10px rgba(8,123,209,.05),
            0 0 45px rgba(8,123,209,.20);
    }

    50% {
        box-shadow:
            0 0 0 16px rgba(8,123,209,.03),
            0 0 65px rgba(8,123,209,.30);
    }

}


/* =====================================================
   ARROWS
===================================================== */

.flow-arrow {

    position: absolute;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #087bd1;

    font-size: 17px;

    z-index: 3;

    filter:
        drop-shadow(
            0 0 6px rgba(8,123,209,.5)
        );

    animation: arrowPulse 1.8s ease-in-out infinite;
}


/* 01 ↓ */

.flow-arrow-top {

    top: 168px;

    left: 466px;
}


/* 02 → CENTER */

.flow-arrow-left-right {

    top: 315px;

    left: 195px;
}


/* CENTER → 03 */

.flow-arrow-right {

    top: 315px;

    right: 195px;
}


/* 03 ↓ 04 */

.flow-arrow-bottom {

    bottom: 168px;

    left: 466px;
}


@keyframes arrowPulse {

    0%,
    100% {
        opacity: .55;

        transform: translateY(0);
    }

    50% {
        opacity: 1;

        transform: translateY(4px);
    }

}


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

.product-flow-diagram::before {

    content: "";

    position: absolute;

    top: 155px;

    left: 50%;

    width: 1px;

    height: 300px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            #087bd1,
            transparent
        );

    opacity: .35;

    transform: translateX(-50%);
}


.product-flow-diagram::after {

    content: "";

    position: absolute;

    top: 325px;

    left: 160px;

    width: 630px;

    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            #087bd1,
            transparent
        );

    opacity: .35;
}


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

@media (max-width: 1050px) {

    .product-flow-diagram {

        width: 850px;

        transform: scale(.9);

        transform-origin: top center;

        margin-bottom: -55px;
    }

}


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

@media (max-width: 700px) {

    .product-flow {

        padding: 60px 20px;
    }


    .product-flow-heading h2 {

        font-size: 30px;
    }


    .product-flow-diagram {

        width: 100%;

        height: auto;

        min-height: 850px;

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 0;

        transform: none;
    }


    /* Remove desktop lines */

    .product-flow-diagram::before,
    .product-flow-diagram::after {

        display: none;
    }


    /* Reset positions */

    .flow-01,
    .flow-02,
    .flow-03,
    .flow-04 {

        position: relative;

        top: auto;

        left: auto;

        right: auto;

        bottom: auto;
    }


    .flow-01 {

        order: 1;
    }


    .flow-02 {

        order: 3;
    }


    .flow-center {

        position: relative;

        top: auto;

        left: auto;

        transform: none;

        width: 180px;

        height: 180px;

        order: 2;
    }


    .flow-03 {

        order: 4;
    }


    .flow-04 {

        order: 6;
    }


    .flow-arrow {

        position: relative;

        top: auto;

        left: auto;

        right: auto;

        bottom: auto;

        width: 50px;

        height: 50px;
    }


    .flow-arrow-top {

        order: 2;

        transform: none;
    }


    .flow-arrow-left-right {

        order: 3;

        transform: rotate(90deg);
    }


    .flow-arrow-right {

        order: 5;

        transform: rotate(90deg);
    }


    .flow-arrow-bottom {

        order: 7;

        transform: none;
    }


    .flow-circle {

        width: 145px;

        height: 145px;
    }

}/* =====================================================
   PRODUCT ENGINEERING OUTPUT
===================================================== */

.product-output {

    width: 100%;

    padding: 60px 5%;

    background: #05090e;

    position: relative;

    overflow: hidden;
}


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

.product-output-heading {

    max-width: 720px;

    margin: 0 auto 45px;

    text-align: center;
}


.product-output-heading span {

    color: #f7c706;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;
}


.product-output-heading h2 {

    margin: 9px 0 12px;

    color: #ffffff;

    font-size: 38px;

    line-height: 1.2;
}


.product-output-heading h2 strong {

    color: #087bd1;
}


.product-output-heading p {

    margin: 0;

    color: #8997a4;

    font-size: 13px;

    line-height: 1.7;
}


/* =====================================================
   MAIN DASHBOARD
===================================================== */

.product-output-dashboard {

    max-width: 1200px;

    min-height: 460px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    background: #071019;

    border: 1px solid #1b3040;

    border-radius: 20px;

    overflow: hidden;

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


/* =====================================================
   LEFT — CAD VISUAL
===================================================== */

.cad-visual {

    padding: 30px;

    border-right: 1px solid #1b3040;

    position: relative;

    background:
        radial-gradient(
            circle at center,
            rgba(8,123,209,.10),
            transparent 60%
        );
}


.cad-visual-header,
.engineering-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 20px;
}


.cad-visual-header span,
.engineering-header span {

    color: #087bd1;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;
}


.cad-visual-header i,
.engineering-header i {

    color: #f7c706;

    font-size: 14px;
}


/* =====================================================
   CAD MODEL FRAME
===================================================== */

.cad-model-frame {

    width: 100%;

    height: 300px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border: 1px solid #183348;

    background:
        linear-gradient(
            90deg,
            rgba(8,123,209,.03) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(8,123,209,.03) 1px,
            transparent 1px
        );

    background-size: 30px 30px;
}


.cad-model-frame img {

    width: 72%;

    height: 72%;

    object-fit: contain;

    position: relative;

    z-index: 3;

    filter:
        drop-shadow(
            0 15px 25px rgba(0,0,0,.6)
        );

    transition: .5s ease;
}


.cad-model-frame:hover img {

    transform: scale(1.07);

}


/* =====================================================
   TECHNICAL RINGS
===================================================== */

.cad-ring {

    position: absolute;

    border: 1px solid rgba(8,123,209,.22);

    border-radius: 50%;

    z-index: 1;
}


.ring-one {

    width: 250px;

    height: 250px;

    animation: cadRotate 12s linear infinite;
}


.ring-two {

    width: 190px;

    height: 190px;

    border-style: dashed;

    animation:
        cadRotateReverse 9s linear infinite;
}


@keyframes cadRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes cadRotateReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}


/* =====================================================
   CORNER MARKS
===================================================== */

.cad-corner {

    position: absolute;

    width: 18px;

    height: 18px;

    border-color: #087bd1;

    z-index: 4;
}


.top-left {

    top: 12px;
    left: 12px;

    border-top: 2px solid;
    border-left: 2px solid;
}


.top-right {

    top: 12px;
    right: 12px;

    border-top: 2px solid;
    border-right: 2px solid;
}


.bottom-left {

    bottom: 12px;
    left: 12px;

    border-bottom: 2px solid;
    border-left: 2px solid;
}


.bottom-right {

    bottom: 12px;
    right: 12px;

    border-bottom: 2px solid;
    border-right: 2px solid;
}


/* =====================================================
   CAD INFO
===================================================== */

.cad-visual-info {

    display: grid;

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

    gap: 10px;

    margin-top: 15px;
}


.cad-visual-info div {

    padding: 9px;

    border-left: 2px solid #087bd1;

    background: rgba(255,255,255,.02);
}


.cad-visual-info strong {

    display: block;

    color: #ffffff;

    font-size: 9px;

    letter-spacing: 1px;
}


.cad-visual-info span {

    display: block;

    margin-top: 3px;

    color: #647582;

    font-size: 8px;
}


/* =====================================================
   RIGHT — ENGINEERING OUTPUT
===================================================== */

.engineering-output {

    padding: 30px;
}


.engineering-list {

    display: flex;

    flex-direction: column;
}


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

.engineering-item {

    min-height: 82px;

    padding: 14px 0;

    display: grid;

    grid-template-columns:
        35px 1fr 25px;

    gap: 12px;

    align-items: center;

    border-bottom: 1px solid #172934;

    transition: .35s ease;
}


.engineering-item:last-child {

    border-bottom: none;
}


.engineering-item:hover {

    padding-left: 8px;

    background: rgba(8,123,209,.04);
}


/* NUMBER */

.engineering-number {

    color: #f7c706;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;
}


/* TEXT */

.engineering-item-text h3 {

    margin: 0 0 5px;

    color: #ffffff;

    font-size: 13px;
}


.engineering-item-text p {

    margin: 0;

    color: #72818d;

    font-size: 10px;

    line-height: 1.5;
}


/* CHECK */

.engineering-item > i {

    color: #087bd1;

    font-size: 11px;

    transition: .3s ease;
}


.engineering-item:hover > i {

    color: #f7c706;

    transform: scale(1.2);
}


/* =====================================================
   BOTTOM FLOW
===================================================== */

.product-output-flow {

    max-width: 1000px;

    margin: 30px auto 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 22px;
}


.output-flow-item {

    display: flex;

    align-items: center;

    gap: 8px;
}


.output-flow-item span {

    color: #f7c706;

    font-size: 9px;

    font-weight: 800;
}


.output-flow-item strong {

    color: #ffffff;

    font-size: 10px;

    letter-spacing: 1.5px;
}


.output-flow-arrow {

    color: #087bd1;

    font-size: 12px;

    animation: flowArrow 1.5s ease-in-out infinite;
}


@keyframes flowArrow {

    0%,
    100% {

        transform: translateX(0);

        opacity: .5;
    }

    50% {

        transform: translateX(5px);

        opacity: 1;
    }

}


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

@media (max-width: 850px) {

    .product-output-dashboard {

        grid-template-columns: 1fr;
    }


    .cad-visual {

        border-right: none;

        border-bottom: 1px solid #1b3040;
    }

}


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

@media (max-width: 600px) {

    .product-output {

        padding: 60px 20px;
    }


    .product-output-heading h2 {

        font-size: 30px;
    }


    .cad-visual,
    .engineering-output {

        padding: 22px;
    }


    .cad-model-frame {

        height: 250px;
    }


    .cad-visual-info {

        grid-template-columns: 1fr;
    }


    .product-output-flow {

        flex-wrap: wrap;

        gap: 12px;
    }


    .output-flow-arrow {

        display: none;
    }

}/* =====================================================
   FROM IDEA TO PRODUCT
===================================================== */

.idea-product-section {

    width: 100%;

    padding: 60px 5%;

    background: #05090e;

    position: relative;

    overflow: hidden;
}


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

.idea-product-section::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(8,123,209,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(8,123,209,.025) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    pointer-events: none;
}


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

.idea-product-heading {

    max-width: 700px;

    margin: 0 auto 60px;

    text-align: center;

    position: relative;

    z-index: 2;
}


.idea-product-heading > span {

    color: #f7c706;

    font-size: 15px;

    font-weight: 800;

    letter-spacing: 3px;
}


.idea-product-heading h2 {

    margin: 10px 0 12px;

    color: #ffffff;

    font-size: 42px;

    line-height: 1.1;
}


.idea-product-heading h2 strong {

    color: #087bd1;
}


.idea-product-heading p {

    margin: 0;

    color: #8997a4;

    font-size: 13px;

    line-height: 1.7;
}


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

.idea-timeline {

    max-width: 1150px;

    margin: auto;

    display: grid;

    grid-template-columns:
        1fr
        80px
        1fr
        80px
        1fr
        80px
        1fr;

    align-items: start;

    position: relative;

    z-index: 2;
}


/* =====================================================
   STEP
===================================================== */

.idea-step {

    text-align: center;

    position: relative;
}


.idea-node {

    width: 90px;

    height: 90px;

    margin: 0 auto 22px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        radial-gradient(
            circle,
            #0d2333,
            #071019
        );

    border: 1px solid #087bd1;

    box-shadow:
        0 0 0 8px rgba(8,123,209,.04),
        0 0 30px rgba(8,123,209,.15);

    transition: .4s ease;

    position: relative;
}


.idea-node::after {

    content: "";

    position: absolute;

    inset: 6px;

    border-radius: 50%;

    border: 1px dashed rgba(247,199,6,.3);
}


.idea-node span {

    position: relative;

    z-index: 2;

    color: #f7c706;

    font-size: 17px;

    font-weight: 900;

    letter-spacing: 1px;
}


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

.idea-step:hover .idea-node {

    transform: scale(1.12);

    background: #087bd1;

    box-shadow:
        0 0 0 12px rgba(8,123,209,.04),
        0 0 45px rgba(8,123,209,.35);
}


.idea-step:hover .idea-node span {

    color: #ffffff;
}


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

.idea-step-content small {

    color: #087bd1;

    font-size: 15px;

    font-weight: 800;

    letter-spacing: 2px;
}


.idea-step-content h3 {

    margin: 7px 0 8px;

    color: #ffffff;

    font-size: 30px;
}


.idea-step-content p {

    max-width: 260px;

    margin: auto;

    color: #758490;

    font-size: 13px;

    line-height: 1.6;
}


/* =====================================================
   CONNECTING LINE
===================================================== */

.idea-line {

    height: 75px;

    display: flex;

    align-items: center;

    position: relative;
}


.idea-line::before {

    content: "";

    width: 100%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #087bd1,
            transparent
        );

    opacity: .45;
}


.idea-line span {

    position: absolute;

    left: 50%;

    width: 7px;

    height: 7px;

    border-top: 1px solid #f7c706;

    border-right: 1px solid #f7c706;

    transform:
        translate(-50%, 0)
        rotate(45deg);
}


/* =====================================================
   ANIMATED FLOW
===================================================== */

.idea-line::after {

    content: "";

    position: absolute;

    left: 0;

    top: 50%;

    width: 25px;

    height: 2px;

    background: #f7c706;

    box-shadow:
        0 0 8px rgba(247,199,6,.5);

    animation:
        ideaFlow 2.2s linear infinite;
}


@keyframes ideaFlow {

    0% {
        left: 0;

        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        left: calc(100% - 25px);

        opacity: 0;
    }

}


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

.idea-cta {

    max-width: 1050px;

    margin: 65px auto 0;

    padding: 28px 32px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    background:
        linear-gradient(
            100deg,
            #091621,
            #071019
        );

    border: 1px solid #1d3548;

    border-radius: 12px;

    position: relative;

    z-index: 2;

    overflow: hidden;
}


.idea-cta::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 3px;

    height: 100%;

    background:
        linear-gradient(
            to bottom,
            #087bd1,
            #f7c706
        );
}


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

.idea-cta-content > span {

    color: #f7c706;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;
}


.idea-cta-content h2 {

    margin: 7px 0 7px;

    color: #ffffff;

    font-size: 25px;

    line-height: 1.2;
}


.idea-cta-content h2 strong {

    color: #087bd1;
}


.idea-cta-content p {

    margin: 0;

    color: #71808c;

    font-size: 11px;
}


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

.idea-cta-button {

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 14px 22px;

    color: #05090e;

    background: #f7c706;

    border-radius: 6px;

    text-decoration: none;

    font-size: 11px;

    font-weight: 800;

    transition: .35s ease;
}


.idea-cta-button:hover {

    background: #ffffff;

    transform: translateY(-4px);

    box-shadow:
        0 12px 25px rgba(247,199,6,.2);
}


.idea-cta-button i {

    transition: .3s ease;
}


.idea-cta-button:hover i {

    transform: translateX(5px);
}


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

@media (max-width: 950px) {

    .idea-timeline {

        grid-template-columns:
            1fr 50px
            1fr 50px
            1fr 50px
            1fr;
    }

    .idea-step-content h3 {

        font-size: 17px;
    }

}


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

@media (max-width: 700px) {

    .idea-product-section {

        padding: 60px 20px;
    }


    .idea-product-heading {

        margin-bottom: 45px;
    }


    .idea-product-heading h2 {

        font-size: 31px;
    }


    .idea-timeline {

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 0;
    }


    .idea-step {

        width: 100%;

        max-width: 300px;
    }


    .idea-node {

        margin-bottom: 15px;
    }


    .idea-step-content p {

        margin-bottom: 5px;
    }


    .idea-line {

        width: 2px;

        height: 55px;
    }


    .idea-line::before {

        width: 1px;

        height: 100%;

        background:
            linear-gradient(
                to bottom,
                transparent,
                #087bd1,
                transparent
            );
    }


    .idea-line::after {

        left: 0;

        top: 0;

        width: 2px;

        height: 18px;

        animation:
            ideaFlowVertical 2s linear infinite;
    }


    .idea-line span {

        display: none;
    }


    @keyframes ideaFlowVertical {

        0% {
            top: 0;

            opacity: 0;
        }

        20% {
            opacity: 1;
        }

        80% {
            opacity: 1;
        }

        100% {
            top: calc(100% - 18px);

            opacity: 0;
        }

    }


    .idea-cta {

        margin-top: 50px;

        padding: 25px 20px;

        flex-direction: column;

        align-items: flex-start;
    }


    .idea-cta-button {

        width: 100%;

        justify-content: center;
    }

}.idea-cta-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.idea-project-btn,
.idea-service-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 13px 18px;

    border-radius: 6px;

    text-decoration: none;

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

    transition: .35s ease;
}

.idea-project-btn {
    color: #05090e;
    background: #f7c706;
}

.idea-service-btn {
    color: #ffffff;
    border: 1px solid #294255;
    background: transparent;
}

.idea-project-btn:hover {
    background: #ffffff;
    transform: translateY(-3px);
}

.idea-service-btn:hover {
    color: #087bd1;
    border-color: #087bd1;
    transform: translateY(-3px);
}


/* MOBILE */

@media (max-width: 700px) {

    .idea-cta-buttons {
        width: 100%;
        flex-direction: column;
    }

    .idea-project-btn,
    .idea-service-btn {
        width: 100%;
    }

}
/*-----------------------------------------
enginnering draeing
--------------------------------------------
--------------------------------------------*/
/* =====================================================
   ENGINEERING DRAWING HERO
===================================================== */

.drawing-hero {

    width: 100%;

    min-height: 680px;

    padding: 60px 5%;

    background: #05090e;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;
}


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

.drawing-grid {

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(8,123,209,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(8,123,209,.035) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    animation:
        drawingGridMove 15s linear infinite;

    pointer-events: none;
}


@keyframes drawingGridMove {

    from {
        background-position:
            0 0;
    }

    to {
        background-position:
            45px 45px;
    }

}


/* =====================================================
   BACKGROUND GLOW
===================================================== */

.drawing-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;
}


.drawing-glow-one {

    width: 350px;

    height: 350px;

    top: -150px;

    right: 15%;

    background: rgba(8,123,209,.10);

    animation:
        drawingGlowOne 8s ease-in-out infinite alternate;
}


.drawing-glow-two {

    width: 250px;

    height: 250px;

    bottom: -100px;

    left: 25%;

    background: rgba(247,199,6,.05);

    animation:
        drawingGlowTwo 9s ease-in-out infinite alternate;
}


@keyframes drawingGlowOne {

    from {
        transform:
            translate(0,0);
    }

    to {
        transform:
            translate(-120px,180px);
    }

}


@keyframes drawingGlowTwo {

    from {
        transform:
            translate(0,0);
    }

    to {
        transform:
            translate(180px,-120px);
    }

}


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

.drawing-hero-container {

    width: 100%;

    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 60px;

    align-items: center;

    position: relative;

    z-index: 2;
}


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

.drawing-hero-content {

    max-width: 570px;
}


.drawing-eyebrow {

    display: inline-block;

    margin-bottom: 15px;

    color: #f7c706;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;

    position: relative;

    padding-left: 28px;
}


.drawing-eyebrow::before {

    content: "";

    position: absolute;

    left: 0;

    top: 50%;

    width: 18px;

    height: 1px;

    background: #087bd1;
}


.drawing-hero-content h1 {

    margin: 0;

    color: #ffffff;

    font-size: clamp(42px, 5vw, 64px);

    line-height: 1.02;

    font-weight: 800;

    letter-spacing: -2px;
}


.drawing-hero-content h1 span {

    color: #087bd1;
}


.drawing-hero-content p {

    max-width: 500px;

    margin: 24px 0 28px;

    color: #82919d;

    font-size: 14px;

    line-height: 1.8;
}


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

.drawing-hero-buttons {

    display: flex;

    align-items: center;

    gap: 12px;
}


.drawing-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 14px 22px;

    border-radius: 5px;

    text-decoration: none;

    font-size: 11px;

    font-weight: 800;

    transition: .35s ease;
}


.drawing-btn-primary {

    color: #05090e;

    background: #f7c706;
}


.drawing-btn-primary:hover {

    background: #ffffff;

    transform:
        translateY(-4px);

    box-shadow:
        0 12px 25px rgba(247,199,6,.18);
}


.drawing-btn-secondary {

    color: #ffffff;

    border: 1px solid #294255;

    background: rgba(255,255,255,.02);
}


.drawing-btn-secondary:hover {

    color: #087bd1;

    border-color: #087bd1;

    transform:
        translateY(-4px);
}


.drawing-btn i {

    transition: .3s ease;
}


.drawing-btn:hover i {

    transform:
        translateX(4px);
}


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

.drawing-hero-info {

    display: flex;

    gap: 30px;

    margin-top: 18px;

    padding-top: 10px;

    border-top: 1px solid #172833;
}


.drawing-hero-info div {

    display: flex;

    flex-direction: column;

    gap: 5px;
}


.drawing-hero-info strong {

    color: #ffffff;

    font-size: 14px;
}


.drawing-hero-info span {

    color: #5f707c;

    font-size: 8px;

    letter-spacing: 1px;
}


/* =====================================================
   RIGHT BLUEPRINT
===================================================== */

.drawing-visual {

    width: 100%;

    display: flex;

    justify-content: center;
}


.drawing-blueprint {

    width: 500px;

    height: 430px;

    padding: 18px;

    position: relative;

    background:
        rgba(4,15,24,.85);

    border: 1px solid #1d4158;

    box-shadow:
        0 25px 60px rgba(0,0,0,.45),
        0 0 40px rgba(8,123,209,.07);

    transform:
        perspective(900px)
        rotateY(-4deg);

    transition: .5s ease;
}


.drawing-blueprint:hover {

    transform:
        perspective(900px)
        rotateY(0deg)
        translateY(-5px);

    box-shadow:
        0 30px 70px rgba(0,0,0,.5),
        0 0 50px rgba(8,123,209,.12);
}


/* =====================================================
   BLUEPRINT LABEL
===================================================== */

.blueprint-label {

    height: 25px;

    display: flex;

    align-items: center;

    color: #087bd1;

    font-size: 8px;

    letter-spacing: 2px;

    border-bottom: 1px solid #173344;
}


/* =====================================================
   BLUEPRINT FRAME
===================================================== */

.blueprint-frame {

    height: 315px;

    margin-top: 10px;

    position: relative;

    border: 1px solid #173344;

    background-image:
        linear-gradient(
            rgba(8,123,209,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(8,123,209,.025) 1px,
            transparent 1px
        );

    background-size: 25px 25px;
}


/* =====================================================
   TECHNICAL PART
===================================================== */

.technical-part {

    width: 210px;

    height: 135px;

    position: absolute;

    top: 85px;

    left: 50%;

    transform:
        translateX(-50%);

    border: 2px solid #087bd1;

    background:
        rgba(8,123,209,.04);

    box-shadow:
        0 0 20px rgba(8,123,209,.08);
}


.part-body {

    position: absolute;

    width: 130px;

    height: 70px;

    top: 30px;

    left: 38px;

    border: 1px solid #4fa9dc;

}


.part-hole {

    width: 28px;

    height: 28px;

    position: absolute;

    border-radius: 50%;

    border: 1px solid #087bd1;

}


.hole-one {

    left: 20px;

    top: 52px;
}


.hole-two {

    right: 20px;

    top: 52px;
}


.part-slot {

    position: absolute;

    width: 75px;

    height: 25px;

    top: 52px;

    left: 67px;

    border: 1px dashed #087bd1;
}


/* =====================================================
   CENTER LINES
===================================================== */

.center-line {

    position: absolute;

    opacity: .4;
}


.center-line.horizontal {

    width: 100%;

    height: 1px;

    top: 152px;

    left: 0;

    border-top: 1px dashed #087bd1;
}


.center-line.vertical {

    width: 1px;

    height: 100%;

    left: 50%;

    top: 0;

    border-left: 1px dashed #087bd1;
}


/* =====================================================
   DIMENSIONS
===================================================== */

.dimension {

    position: absolute;

    color: #f7c706;

    font-size: 8px;

    letter-spacing: 1px;
}


.dimension-top {

    top: 50px;

    left: 145px;

    width: 210px;

    text-align: center;
}


.dimension-top .dimension-line {

    display: block;

    width: 210px;

    height: 1px;

    margin-bottom: 5px;

    background: #f7c706;
}


.dimension-left {

    top: 120px;

    left: 45px;

    transform: rotate(-90deg);
}


.dimension-left .dimension-line {

    display: block;

    width: 80px;

    height: 1px;

    margin-bottom: 5px;

    background: #f7c706;
}


.dimension-bottom {

    bottom: 48px;

    left: 50%;

    transform:
        translateX(-50%);
}


/* =====================================================
   SECTION MARK
===================================================== */

.section-mark {

    position: absolute;

    bottom: 18px;

    left: 30px;

    display: flex;

    align-items: center;

    gap: 8px;

    color: #f7c706;

    font-size: 8px;
}


.section-mark i {

    width: 70px;

    height: 1px;

    display: block;

    background: #f7c706;
}


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

.drawing-title-block {

    height: 50px;

    margin-top: 10px;

    display: grid;

    grid-template-columns:
        2fr 1fr 1fr;

    border: 1px solid #173344;
}


.drawing-title-block div {

    padding: 7px 9px;

    border-right: 1px solid #173344;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 4px;
}


.drawing-title-block div:last-child {

    border-right: none;
}


.drawing-title-block span {

    color: #5d7584;

    font-size: 7px;

    letter-spacing: 1px;
}


.drawing-title-block strong {

    color: #ffffff;

    font-size: 8px;
}


/* =====================================================
   CORNER MARKS
===================================================== */

.blueprint-corner {

    width: 18px;

    height: 18px;

    position: absolute;

    border-color: #087bd1;
}


.corner-tl {

    top: 8px;

    left: 8px;

    border-top: 2px solid;

    border-left: 2px solid;
}


.corner-tr {

    top: 8px;

    right: 8px;

    border-top: 2px solid;

    border-right: 2px solid;
}


.corner-bl {

    bottom: 8px;

    left: 8px;

    border-bottom: 2px solid;

    border-left: 2px solid;
}


.corner-br {

    bottom: 8px;

    right: 8px;

    border-bottom: 2px solid;

    border-right: 2px solid;
}


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

@media (max-width: 950px) {

    .drawing-hero-container {

        grid-template-columns: 1fr;

        gap: 50px;
    }


    .drawing-hero-content {

        max-width: 700px;

        margin: auto;

        text-align: center;
    }


    .drawing-eyebrow {

        padding-left: 0;
    }


    .drawing-eyebrow::before {

        display: none;
    }


    .drawing-hero-content p {

        margin-left: auto;

        margin-right: auto;
    }


    .drawing-hero-buttons {

        justify-content: center;
    }


    .drawing-hero-info {

        justify-content: center;
    }

}


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

@media (max-width: 600px) {

    .drawing-hero {

        padding: 60px 20px;

        min-height: auto;
    }


    .drawing-hero-content h1 {

        font-size: 39px;

        letter-spacing: -1px;
    }


    .drawing-hero-content p {

        font-size: 12px;
    }


    .drawing-hero-buttons {

        flex-direction: column;

        width: 100%;
    }


    .drawing-btn {

        width: 100%;
    }


    .drawing-hero-info {

        gap: 15px;

        flex-wrap: wrap;
    }


    .drawing-blueprint {

        width: 100%;

        height: 360px;

        transform: none;
    }


    .blueprint-frame {

        height: 245px;
    }


    .technical-part {

        width: 150px;

        height: 100px;

        top: 65px;
    }


    .part-body {

        width: 90px;

        height: 50px;

        top: 24px;

        left: 29px;
    }


    .part-hole {

        width: 20px;

        height: 20px;
    }


    .hole-one {

        left: 12px;

        top: 39px;
    }


    .hole-two {

        right: 12px;

        top: 39px;
    }


    .part-slot {

        width: 50px;

        height: 18px;

        top: 39px;

        left: 48px;
    }


    .dimension-top {

        top: 35px;

        left: 50%;

        transform:
            translateX(-50%);
    }


    .dimension-top .dimension-line {

        width: 150px;
    }


    .dimension-left {

        left: 15px;
    }


    .drawing-title-block {

        height: 42px;
    }

    
}/* =========================================
   WHAT IS ENGINEERING DRAWING
========================================= */

.engineering-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;

    padding: 120px 10%;

    background: #030507;
    color: #ffffff;
}


/* IMAGE */

.engineering-image {
    position: relative;
    overflow: hidden;

    border-left: 4px solid #00bfff;
}


.engineering-image img {
    width: 100%;
    height: 500px;

    object-fit: cover;
    display: block;

    filter: brightness(0.8);

    transition: 0.5s ease;
}


.engineering-image:hover img {
    transform: scale(1.05);
    filter: brightness(1);
}


/* CONTENT */

.engineering-content {
    max-width: 650px;
}


/* LABEL */

.engineering-label {
    display: inline-block;

    color: #00bfff;

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

    letter-spacing: 3px;

    margin-bottom: 18px;
}


/* HEADING */

.engineering-content h2 {
    font-family: Georgia, serif;

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

    margin: 0 0 25px;

    color: #ffffff;
}


.engineering-content h2 span {
    color: #00bfff;
}


/* DESCRIPTION */

.engineering-content p {
    font-size: 17px;
    line-height: 1.8;

    color: #b8c0c5;

    margin-bottom: 18px;
}


/* POINTS */

.engineering-points {
    margin-top: 30px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 14px;
}


.engineering-point {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 13px 15px;

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

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

    transition: 0.3s ease;
}


.engineering-point:hover {
    border-color: #00bfff;

    background: rgba(0,191,255,0.07);

    transform: translateX(5px);
}


/* CHECK ICON */

.check-icon {
    display: flex;

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

    min-width: 23px;
    height: 23px;

    border-radius: 50%;

    background: #00bfff;
    color: #030507;

    font-size: 13px;
    font-weight: bold;
}


/* POINT TEXT */

.engineering-point span:last-child {
    font-size: 14px;
    color: #e5e5e5;
}


/* MOBILE */

@media (max-width: 768px) {

    .engineering-intro {
        grid-template-columns: 1fr;

        padding: 80px 6%;

        gap: 50px;
    }


    .engineering-image img {
        height: 350px;
    }


    .engineering-content h2 {
        font-size: 38px;
    }


    .engineering-points {
        grid-template-columns: 1fr;
    }

}
 /* =====================================================
    02 — ENGINEERING DRAWING TYPES
 ===================================================== */

.drawing-types {
    width: 100%;
    padding: 45px 5% 70px;

    background: #05090e;

    position: relative;
    overflow: hidden;
}


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

.drawing-types::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(8,123,209,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(8,123,209,.035) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    animation: drawingTypesGrid 14s linear infinite;

    pointer-events: none;
}


@keyframes drawingTypesGrid {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 45px 45px;
    }

}


/* =====================================================
   HEADER
===================================================== */

.drawing-types-header {
    max-width: 650px;

    margin: 0 auto 45px;

    text-align: center;

    position: relative;
    z-index: 2;
}


.drawing-types-header h2 {
    margin: 10px 0 12px;

    color: #ffffff;

    font-size: 38px;

    line-height: 1.15;
}


.drawing-types-header h2 strong {
    color: #087bd1;
}


.drawing-types-header p {
    margin: 0;

    color: #788792;

    font-size: 13px;

    line-height: 1.7;
}


/* =====================================================
   2 × 2 GRID
===================================================== */

.drawing-type-row {

    max-width: 1000px;

    margin: auto;

    display: grid;

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

    gap: 28px;

    position: relative;

    z-index: 2;
}


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

.drawing-type-card {

    position: relative;

    background: #0a141d;

    border: 1px solid #17445f;

    border-radius: 12px;

    overflow: hidden;

    transition: .4s ease;

    box-shadow:
        0 10px 30px rgba(0,0,0,.25);
}


.drawing-type-card:hover {

    transform: translateY(-6px);

    border-color: #00bfff;

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


/* =====================================================
   LARGE IMAGE SECTION
===================================================== */

.drawing-image-section {

    width: 100%;

    height: 230px;

    position: relative;

    overflow: hidden;

    background: #071019;
}


/* =====================================================
   IMAGE — FULL FIT
===================================================== */

.drawing-image-section img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: contain;

    object-position: center;

    padding: 0;

    margin: 0;

    border: none;

    transition: .5s ease;
}


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

.drawing-type-card:hover
.drawing-image-section img {

    transform: scale(1.04);
}


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

.drawing-number {

    position: absolute;

    right: 14px;

    bottom: 14px;

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #f7c706;

    color: #05090e;

    font-size: 10px;

    font-weight: 900;

    z-index: 5;

    box-shadow:
        0 0 15px rgba(247,199,6,.3);
}


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

.drawing-content {

    padding: 16px 20px 20px;

    text-align: center;
}


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

.drawing-content h3 {

    margin: 0 0 7px;

    color: #ffffff;

    font-size: 20px;

    font-weight: 700;

    line-height: 1.25;
}


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

.drawing-content p {

    max-width: 420px;

    margin: auto;

    color: #788792;

    font-size: 14px;

    line-height: 1.5;
}


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

@media (max-width: 800px) {

    .drawing-type-row {

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

        gap: 20px;
    }

    .drawing-image-section {

        height: 200px;
    }

}


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

@media (max-width: 600px) {

    .drawing-types {

        padding: 50px 20px 60px;
    }


    .drawing-types-header h2 {

        font-size: 30px;
    }


    .drawing-type-row {

        grid-template-columns: 1fr;

        gap: 25px;
    }


    .drawing-image-section {

        height: 230px;
    }

}
/* =====================================================
   03 + 04 DRAWING SYSTEM
===================================================== */

.drawing-system {

    width: 100%;

    padding: 40px 5%;

    background: #05090e;

    position: relative;

    overflow: hidden;
}


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

.drawing-system::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(8,123,209,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(8,123,209,.035) 1px,
            transparent 1px
        );

    background-size: 40px 40px;

    animation:
        systemGrid 15s linear infinite;

    pointer-events: none;
}


@keyframes systemGrid {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 40px 40px;
    }

}


/* =====================================================
   HEADER
===================================================== */

.drawing-system-header {

    max-width: 700px;

    margin: 0 auto 55px;

    text-align: center;

    position: relative;

    z-index: 2;
}


.drawing-system-header > span {

    color: #f7c706;

    font-size: 16px;

    font-weight: 800;

    letter-spacing: 3px;
}


.drawing-system-header h2 {

    margin: 10px 0;

    color: #ffffff;

    font-size: 48px;
}


.drawing-system-header h2 strong {

    color: #087bd1;
}


.drawing-system-header p {

    color: #748490;

    font-size: 15px;

    line-height: 1.7;
}


/* =====================================================
   MAIN TWO COLUMN
===================================================== */

.drawing-system-wrapper {

    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 70px;

    position: relative;

    z-index: 2;
}


/* =====================================================
   PANEL LABEL
===================================================== */

.panel-label {

    margin-bottom: 25px;

    padding-bottom: 12px;

    border-bottom: 1px solid #1b3445;

    color: #087bd1;

    font-size: 15px;

    font-weight: 800;

    letter-spacing: 2px;
}


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

.workflow-list {

    position: relative;
}


.workflow-list::before {

    content: "";

    position: absolute;

    left: 19px;

    top: 10px;

    bottom: 10px;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            #087bd1,
            rgba(8,123,209,.05)
        );
}


.workflow-item {

    min-height: 57px;

    display: grid;

    grid-template-columns:
        40px 25px 1fr;

    align-items: center;

    margin-bottom: 5px;

    position: relative;

    transition: .35s ease;
}


.workflow-no {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #f7c706;

    background: #071019;

    border: 1px solid #1c506e;

    font-size: 9px;

    font-weight: 800;

    position: relative;

    z-index: 2;

    transition: .35s ease;
}


.workflow-line {

    width: 25px;

    height: 1px;

    background: #214052;

}


.workflow-item h3 {

    margin: 0 0 3px;

    color: #ffffff;

    font-size: 15px;
}


.workflow-item p {

    margin: 0;

    color: #627481;

    font-size: 12px;
}


.workflow-item:hover {

    transform: translateX(7px);
}


.workflow-item:hover .workflow-no {

    color: #05090e;

    background: #f7c706;

    border-color: #f7c706;

    box-shadow:
        0 0 18px rgba(247,199,6,.25);
}


.workflow-item:hover .workflow-line {

    background: #087bd1;
}


/* =====================================================
   RIGHT ORBIT AREA
===================================================== */

.details-panel {

    min-height: 570px;

    position: relative;
}


.detail-orbit {

    width: 100%;

    height: 520px;

    position: relative;
}


/* =====================================================
   SEMI CIRCLE
===================================================== */

.detail-semicircle {

    width: 310px;

    height: 310px;

    position: absolute;

    top: 105px;

    left: 50%;

    transform: translateX(-50%);

    border-radius:
        310px 310px 0 0;

    border:
        1px solid #087bd1;

    border-bottom: 0;

    background:
        radial-gradient(
            circle at 50% 100%,
            rgba(8,123,209,.12),
            transparent 65%
        );

    box-shadow:
        0 0 40px rgba(8,123,209,.08);

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


@keyframes semiPulse {

    0%,
    100% {
        box-shadow:
            0 0 30px rgba(8,123,209,.06);
    }

    50% {
        box-shadow:
            0 0 55px rgba(8,123,209,.18);
    }

}


.semi-inner {

    position: absolute;

    inset: 18px;

    border-radius:
        290px 290px 0 0;

    border:
        1px dashed rgba(247,199,6,.35);

    border-bottom: 0;

    animation:
        semiRotate 12s linear infinite;
}


@keyframes semiRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


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

.semi-center {

    position: absolute;

    bottom: 35px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    line-height: 1;
}


.semi-center span {

    color: #ffffff;

    font-size: 15px;

    letter-spacing: 2px;
}


.semi-center strong {

    color: #087bd1;

    font-size: 35px;

    letter-spacing: -2px;
}


.semi-center small {

    margin-top: 7px;

    color: #f7c706;

    font-size: 7px;

    letter-spacing: 2px;
}


/* =====================================================
   DETAIL POINTS
===================================================== */

.detail-point {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 8px;

    color: #ffffff;

    font-size: 9px;

    white-space: nowrap;
}


.detail-point span {

    width: 25px;

    height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #f7c706;

    background: #071019;

    border: 1px solid #087bd1;

    font-size: 12px;

    font-weight: 800;

    transition: .3s ease;
}


.detail-point i {

    width: 15px;

    height: 1px;

    background: #087bd1;

    position: relative;
}


.detail-point i::after {

    content: "";

    position: absolute;

    right: 0;

    top: -2px;

    width: 5px;

    height: 5px;

    border-top: 1px solid #f7c706;

    border-right: 1px solid #f7c706;

    transform: rotate(45deg);
}


.detail-point b {

    color: #8b9aa5;

    font-size: 15px;

    font-weight: 600;
}


.detail-point:hover span {

    color: #05090e;

    background: #f7c706;

    border-color: #f7c706;

    transform: scale(1.15);

}


.detail-point:hover b {

    color: #ffffff;
}


/* =====================================================
   POINT POSITIONS
===================================================== */

.point-01 {
    top: 55px;
    left: 50%;
    transform: translateX(-50%);
}


.point-02 {
    top: 95px;
    right: 5px;
}


.point-03 {
    top: 170px;
    right: -1px;
}


.point-04 {
    top: 245px;
    right: -60px;
}


.point-05 {
    top: 320px;
    right: -35px;
   
}


.point-06 {
    top: 390px;
    right: -10px;
}


.point-07 {
    top: 390px;
    left: -45px;
    flex-direction: row-reverse;
}


.point-08 {
    top: 320px;
    left: -40px;
    flex-direction: row-reverse;
}


.point-09 {
    top: 245px;
    left: -30px;
    flex-direction: row-reverse;
}


.point-10 {
    top: 170px;
    left: 0;
    flex-direction: row-reverse;
}


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

@media (max-width: 950px) {

    .drawing-system-wrapper {

        grid-template-columns: 1fr;

        gap: 50px;
    }


    .details-panel {

        min-height: 560px;
    }

}


@media (max-width: 600px) {

    .drawing-system {

        padding: 60px 20px;
    }


    .drawing-system-header h2 {

        font-size: 30px;
    }


    .drawing-system-wrapper {

        gap: 45px;
    }


    .workflow-item {

        grid-template-columns:
            38px 15px 1fr;
    }


    .workflow-line {

        width: 15px;
    }


    .workflow-item h3 {

        font-size: 11px;
    }


    .detail-orbit {

        height: 520px;

        transform:
            scale(.78);

        transform-origin:
            top center;

        margin-bottom: -100px;
    }

}.semi-center {

    position: absolute;

    bottom: 28px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    z-index: 5;
}


/* LOGO UP-DOWN ANIMATION */

.semi-center img {

    width: 90px;

    height: auto;

    object-fit: contain;

    margin-bottom: 8px;

    animation: logoUpDown 3.5s ease-in-out infinite;

    filter:
        drop-shadow(
            0 0 10px rgba(8,123,209,.35)
        );
}


@keyframes logoUpDown {

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

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

}


/* TEXT SAME STYLE */

.semi-center span {

    color: #ffffff;

    font-size: 15px;

    letter-spacing: 2px;

    line-height: 1;
}


.semi-center strong {

    color: #087bd1;

    font-size: 35px;

    letter-spacing: -2px;

    line-height: 1;
}


.semi-center small {

    margin-top: 7px;

    color: #f7c706;

    font-size: 7px;

    letter-spacing: 2px;
}/* =====================================================
   05 / DRAWING DELIVERABLES
===================================================== */

.drawing-deliverables {

    width: 100%;

    padding: 70px 5%;

    background: #05090e;

    position: relative;

    overflow: hidden;
}


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

.drawing-deliverables::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(8,123,209,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(8,123,209,.035) 1px,
            transparent 1px
        );

    background-size: 40px 40px;

    animation:
        deliverGrid 18s linear infinite;

    pointer-events: none;
}


@keyframes deliverGrid {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 40px 40px;
    }

}


/* =============================================
   HEADER
============================================= */

.deliverable-header {

    max-width: 700px;

    margin: 0 auto 55px;

    text-align: center;

    position: relative;

    z-index: 2;
}


.deliverable-header span {

    color: #f7c706;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 3px;
}


.deliverable-header h2 {

    margin: 10px 0;

    color: #ffffff;

    font-size: 38px;
}


.deliverable-header h2 strong {

    color: #087bd1;
}


.deliverable-header p {

    color: #71818c;

    font-size: 12px;

    line-height: 1.7;
}


/* =============================================
   TWO COLUMN
============================================= */

.deliverable-wrapper {

    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 80px;

    align-items: center;

    position: relative;

    z-index: 2;
}


/* =============================================
   DRAWING SHEET AREA
============================================= */

.drawing-sheet-area {

    position: relative;

    min-height: 520px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =============================================
   DRAWING SHEET
============================================= */

.drawing-sheet {

    width: 430px;

    height: 500px;

    padding: 18px;

    background: #e9edf0;

    color: #15212a;

    position: relative;

    box-shadow:

        0 25px 70px rgba(0,0,0,.55),

        0 0 40px rgba(8,123,209,.08);

    transform:
        perspective(1000px)
        rotateY(5deg)
        rotateX(2deg);

    transition: .5s ease;
}


.drawing-sheet:hover {

    transform:
        perspective(1000px)
        rotateY(0deg)
        rotateX(0deg)
        translateY(-8px);

    box-shadow:
        0 30px 80px rgba(0,0,0,.6),
        0 0 50px rgba(8,123,209,.15);
}


/* =============================================
   SHEET TOP
============================================= */

.sheet-top {

    height: 42px;

    display: grid;

    grid-template-columns:
        1fr 1fr 1fr;

    align-items: center;

    border-bottom: 2px solid #15212a;

    font-size: 9px;

    font-weight: 800;
}


.sheet-top span {

    color: #087bd1;

    font-size: 13px;

    letter-spacing: 1px;
}


.sheet-top small {

    text-align: center;

    font-size: 7px;

    letter-spacing: 1px;
}


.sheet-top b {

    text-align: right;

    font-size: 8px;
}


/* =============================================
   SHEET BODY
============================================= */

.sheet-body {

    height: 400px;

    position: relative;

    border:
        1px solid #88949c;

    margin-top: 12px;
}


.sheet-title {

    position: absolute;

    top: 12px;

    left: 15px;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;
}


/* =============================================
   TECHNICAL OBJECT
============================================= */

.technical-object {

    position: absolute;

    width: 220px;

    height: 220px;

    left: 50%;

    top: 90px;

    transform:
        translateX(-50%);
}


.object-circle {

    position: absolute;

    width: 130px;

    height: 130px;

    border:
        2px solid #15212a;

    border-radius: 50%;

    left: 45px;

    top: 35px;
}


.object-circle::before {

    content: "";

    position: absolute;

    inset: 25px;

    border:
        1px solid #15212a;

    border-radius: 50%;
}


.object-line {

    position: absolute;

    background: #15212a;
}


.line-a {

    width: 190px;

    height: 1px;

    top: 100px;

    left: 15px;
}


.line-b {

    width: 1px;

    height: 190px;

    top: 5px;

    left: 110px;
}


/* =============================================
   DIMENSIONS
============================================= */

.dimension {

    position: absolute;

    font-size: 7px;

    font-weight: 700;
}


.dimension-top {

    top: 10px;

    left: 82px;

    color: #087bd1;
}


.dimension-side {

    right: -5px;

    top: 95px;

    color: #087bd1;
}


/* =============================================
   SECTION MARK
============================================= */

.section-mark {

    position: absolute;

    bottom: 0;

    left: 55px;

    font-size: 7px;

    color: #15212a;

    letter-spacing: 2px;
}


/* =============================================
   GD&T
============================================= */

.gdt-box {

    position: absolute;

    left: 15px;

    bottom: 45px;

    display: flex;
}


.gdt-box span {

    width: 30px;

    height: 20px;

    border: 1px solid #15212a;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 7px;

    font-weight: 700;
}


/* =============================================
   MINI BOM
============================================= */

.mini-bom {

    position: absolute;

    right: 15px;

    bottom: 35px;

    width: 100px;

    border: 1px solid #15212a;

    font-size: 6px;
}


.mini-bom div {

    display: grid;

    grid-template-columns: 1fr 1fr;

    border-bottom: 1px solid #15212a;
}


.mini-bom div:last-child {

    border-bottom: none;
}


.mini-bom span {

    padding: 4px;

    border-right: 1px solid #15212a;
}


.mini-bom span:last-child {

    border-right: none;
}


/* =============================================
   REVISION
============================================= */

.revision-box {

    position: absolute;

    top: 10px;

    right: 10px;

    padding: 6px 9px;

    border: 1px solid #15212a;

    font-size: 7px;

    font-weight: 800;
}


/* =============================================
   SHEET BOTTOM
============================================= */

.sheet-bottom {

    position: absolute;

    bottom: 10px;

    left: 18px;

    right: 18px;

    display: flex;

    justify-content: space-between;

    font-size: 6px;

    font-weight: 700;
}


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

.drawing-scan {

    position: absolute;

    width: 430px;

    height: 2px;

    background: #087bd1;

    left: 50%;

    transform: translateX(-50%);

    top: 30px;

    opacity: .65;

    filter:
        drop-shadow(
            0 0 8px #087bd1
        );

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


@keyframes drawingScan {

    0% {
        top: 40px;
        opacity: 0;
    }

    20% {
        opacity: .8;
    }

    80% {
        opacity: .8;
    }

    100% {
        top: 500px;
        opacity: 0;
    }

}


/* =============================================
   OUTPUT
============================================= */

.output-label {

    margin-bottom: 20px;

    color: #087bd1;

    font-size: 17px;

    font-weight: 800;

    letter-spacing: 2px;
}


.output-list {

    display: flex;

    flex-direction: column;

    gap: 8px;
}


.output-item {

    min-height: 48px;

    display: grid;

    grid-template-columns:
        35px 1fr 25px;

    align-items: center;

    padding: 5px 12px;

    border-bottom:
        1px solid #17303f;

    transition: .35s ease;
}


.output-item > span {

    width: 27px;

    height: 27px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #071019;

    border: 1px solid #087bd1;

    color: #f7c706;

    font-size: 14px;

    font-weight: 800;
}


.output-item strong {

    display: block;

    color: #ffffff;

    font-size: 25px;
}


.output-item small {

    display: block;

    margin-top: 3px;

    color: #647580;

    font-size: 12px;
}


.output-item i {

    color: #087bd1;

    font-size: 26px;

    font-style: normal;
}


.output-item:hover {

    padding-left: 20px;

    background:
        linear-gradient(
            90deg,
            rgba(8,123,209,.08),
            transparent
        );

    border-color: #087bd1;
}


.output-item:hover > span {

    background: #f7c706;

    color: #05090e;

    border-color: #f7c706;
}


.output-item:hover i {

    color: #f7c706;

    transform: translateX(4px);
}


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

@media (max-width: 950px) {

    .deliverable-wrapper {

        grid-template-columns: 1fr;

        gap: 60px;
    }

}


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

@media (max-width: 600px) {

    .drawing-deliverables {

        padding: 60px 20px;
    }


    .deliverable-header h2 {

        font-size: 30px;
    }


    .drawing-sheet {

        width: 330px;

        height: 430px;
    }


    .drawing-scan {

        width: 330px;
    }


    .sheet-body {

        height: 335px;
    }


    .technical-object {

        transform:
            translateX(-50%)
            scale(.78);
    }


    .drawing-sheet-area {

        min-height: 450px;
    }

}/* =====================================================
   06 / DRAWING APPLICATIONS
===================================================== */

.drawing-applications {

    width: 100%;

    padding: 50px 5%;

    background: #05090e;

    position: relative;

    overflow: hidden;
}


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

.drawing-applications::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(8,123,209,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(8,123,209,.035) 1px,
            transparent 1px
        );

    background-size: 40px 40px;

    animation:
        appGridMove 15s linear infinite;

    pointer-events: none;
}


@keyframes appGridMove {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 40px 40px;
    }

}


/* =====================================================
   HEADER
===================================================== */

.drawing-app-header {

    max-width: 700px;

    margin: 0 auto 45px;

    text-align: center;

    position: relative;

    z-index: 2;
}


.drawing-app-header span {

    color: #f7c706;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 3px;
}


.drawing-app-header h2 {

    margin: 9px 0 12px;

    color: #ffffff;

    font-size: 38px;

    line-height: 1.15;
}


.drawing-app-header h2 strong {

    color: #087bd1;
}


.drawing-app-header p {

    margin: 0;

    color: #72828e;

    font-size: 12px;

    line-height: 1.7;
}


/* =====================================================
   DIAGRAM
===================================================== */

.drawing-app-diagram {

    width: 850px;

    height: 620px;

    margin: auto;

    position: relative;

    z-index: 2;
}


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

.app-center {

    position: absolute;

    width: 230px;

    height: 230px;

    left: 50%;

    top: 195px;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 5;
}


.app-center-ring {

    width: 190px;

    height: 190px;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:
        radial-gradient(
            circle,
            #0d2333,
            #061019
        );

    border: 2px solid #087bd1;

    box-shadow:

        0 0 0 12px rgba(8,123,209,.035),

        0 0 55px rgba(8,123,209,.18);

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


@keyframes centerAppPulse {

    0%,
    100% {

        box-shadow:

            0 0 0 12px rgba(8,123,209,.035),

            0 0 45px rgba(8,123,209,.15);
    }

    50% {

        box-shadow:

            0 0 0 18px rgba(8,123,209,.02),

            0 0 70px rgba(8,123,209,.25);
    }

}


.app-center-ring img {

    width: 55px;

    height: auto;

    margin-bottom: 7px;

    animation:
        appLogoFloat 2.5s ease-in-out infinite;

    filter:
        drop-shadow(
            0 0 10px rgba(8,123,209,.4)
        );
}


@keyframes appLogoFloat {

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

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

}


.app-center-ring span {

    color: #ffffff;

    font-size: 16px;

    font-weight: 800;

    letter-spacing: 2px;
}


.app-center-ring small {

    margin-top: 6px;

    color: #f7c706;

    font-size: 7px;

    letter-spacing: 1.5px;
}


/* =====================================================
   APPLICATION CIRCLE
===================================================== */

.app-circle {

    width: 180px;

    height: 180px;

    position: absolute;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        radial-gradient(
            circle,
            #0c1a25,
            #071019
        );

    border: 1px solid #1c4a64;

    box-shadow:
        0 15px 30px rgba(0,0,0,.3);

    z-index: 4;

    transition: .4s ease;
}


.app-circle-inner {

    width: 150px;

    height: 150px;

    border-radius: 50%;

    border: 1px dashed rgba(8,123,209,.35);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    transition: .4s ease;
}


/* NUMBER */

.app-circle-inner > span {

    position: absolute;

    top: 18px;

    color: #f7c706;

    font-size: 16px;

    font-weight: 800;

    letter-spacing: 1px;
}


/* ICON */

.app-circle-inner > i {

    color: #087bd1;

    font-size: 30px;

    margin-bottom: 9px;

    transition: .35s ease;
}


/* TITLE */

.app-circle-inner strong {

    color: #ffffff;

    font-size: 16px;

    line-height: 1.25;
}


.app-circle-inner strong small {

    display: block;

    margin-top: 2px;

    color: #7b8994;

    font-size: 10px;

    font-weight: 500;
}


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

.app-01 {

    top: 20px;

    left: 350px;
}


.app-02 {

    top: 130px;

    right: 80px;
}


.app-03 {

    top: 315px;

    right: 20px;
}


.app-04 {

    bottom: 25px;

    right: 190px;
}


.app-05 {

    bottom: 10px;

    left: 190px;
}


.app-06 {

    top: 315px;

    left: 35px;
}


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

.app-circle:hover {

    transform: scale(1.1);

    border-color: #087bd1;

    box-shadow:
        0 0 35px rgba(8,123,209,.22);
}


.app-circle:hover .app-circle-inner {

    border-color: #f7c706;
}


.app-circle:hover .app-circle-inner i {

    color: #f7c706;

    transform:
        scale(1.15)
        rotate(8deg);
}


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

.app-line {

    position: absolute;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #087bd1,
            transparent
        );

    opacity: .45;

    transform-origin: left center;

    z-index: 1;
}


/* 01 → CENTER */

.app-line-01 {

    width: 120px;

    top: 165px;

    left: 450px;

    transform:
        rotate(90deg);
}


/* 02 → CENTER */

.app-line-02 {

    width: 180px;

    top: 170px;

    right: 205px;

    transform:
        rotate(150deg);
}


/* 03 → CENTER */

.app-line-03 {

    width: 180px;

    top: 380px;

    right: 145px;

    transform:
        rotate(205deg);
}


/* 04 → CENTER */

.app-line-04 {

    width: 140px;

    bottom: 150px;

    right: 300px;

    transform:
        rotate(250deg);
}


/* 05 → CENTER */

.app-line-05 {

    width: 140px;

    bottom: 150px;

    left: 300px;

    transform:
        rotate(290deg);
}


/* 06 → CENTER */

.app-line-06 {

    width: 180px;

    top: 380px;

    left: 145px;

    transform:
        rotate(335deg);
}


/* =====================================================
   MOVING DOTS
===================================================== */

.app-line::after {

    content: "";

    position: absolute;

    width: 6px;

    height: 6px;

    top: -3px;

    left: 0;

    border-radius: 50%;

    background: #f7c706;

    box-shadow:
        0 0 10px rgba(247,199,6,.6);

    animation:
        appLineMove 2.5s linear infinite;
}


@keyframes appLineMove {

    0% {
        left: 0;

        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        left: calc(100% - 6px);

        opacity: 0;
    }

}


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

@media (max-width: 950px) {

    .drawing-app-diagram {

        width: 700px;

        transform: scale(.85);

        transform-origin: top center;

        margin-bottom: -90px;
    }

}


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

@media (max-width: 600px) {

    .drawing-applications {

        padding: 60px 20px;
    }


    .drawing-app-header h2 {

        font-size: 30px;
    }


    .drawing-app-diagram {

        width: 100%;

        height: auto;

        min-height: 850px;

        transform: none;

        display: flex;

        flex-direction: column;

        align-items: center;
    }


    .app-center {

        position: relative;

        left: auto;

        top: auto;

        transform: none;

        order: 1;

        margin-bottom: 35px;
    }


    .app-circle {

        position: relative;

        top: auto !important;

        right: auto !important;

        bottom: auto !important;

        left: auto !important;

        margin-bottom: 20px;
    }


    .app-01 { order: 2; }
    .app-02 { order: 3; }
    .app-03 { order: 4; }
    .app-04 { order: 5; }
    .app-05 { order: 6; }
    .app-06 { order: 7; }


    .app-line {

        display: none;
    }

}/* ========================================
   EXPLORE SERVICES & PROJECTS SECTION
======================================== */

.explore-section {
    background: #030507;
    padding: 110px 10%;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}


/* BACKGROUND ENGINEERING LINES */

.explore-section::before {
    content: "";
    position: absolute;

    width: 500px;
    height: 500px;

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

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

    box-shadow:
        0 0 0 70px rgba(0, 191, 255, 0.02),
        0 0 0 140px rgba(0, 191, 255, 0.015);
}


.explore-content {
    max-width: 850px;
    margin: auto;
    text-align: center;
    position: relative;
    z-index: 1;
}


/* LABEL */

.explore-label {
    color: #f5b900;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
}


/* HEADING */

.explore-content h2 {
    font-family: Georgia, serif;
    font-size: 52px;
    margin: 18px 0 20px;
}

.explore-content h2 span {
    color: #00bfff;
}


/* DESCRIPTION */

.explore-content p {
    max-width: 650px;
    margin: auto;
    color: #aeb5ba;
    font-size: 17px;
    line-height: 1.8;
}


/* BUTTON AREA */

.explore-actions {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 50px;
    flex-wrap: wrap;
}


/* MAIN BUTTON */

.explore-btn {
    position: relative;

    width: 310px;
    min-height: 90px;

    display: flex;
    align-items: center;

    gap: 18px;

    padding: 0 25px;

    color: white;
    text-decoration: none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.05),
            rgba(255,255,255,0.015)
        );

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

    overflow: hidden;

    transition: 0.4s ease;
}


/* TOP ENGINEERING LINE */

.explore-btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 3px;

    background: #00bfff;

    transition: 0.4s ease;
}


/* HOVER BACKGROUND */

.explore-btn::after {
    content: "";

    position: absolute;

    width: 100%;
    height: 100%;

    left: -100%;
    top: 0;

    background: rgba(0, 191, 255, 0.08);

    transition: 0.4s ease;

    z-index: 0;
}


/* KEEP CONTENT ABOVE */

.explore-btn > * {
    position: relative;
    z-index: 1;
}


/* NUMBER */

.btn-number {
    width: 46px;
    height: 46px;

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

    border: 1px solid #00bfff;

    color: #00bfff;

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

    border-radius: 50%;
}


/* TEXT */

.btn-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}


.btn-text small {
    color: #8d969c;
    font-size: 10px;
    letter-spacing: 2px;
    margin-bottom: 5px;
}


.btn-text strong {
    font-size: 16px;
    letter-spacing: 1px;
}


/* ARROW */

.btn-arrow {
    margin-left: auto;

    font-size: 28px;
    color: #00bfff;

    transition: 0.4s ease;
}


/* HOVER EFFECT */

.explore-btn:hover {
    transform: translateY(-8px);

    border-color: #00bfff;

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


.explore-btn:hover::before {
    width: 100%;
}


.explore-btn:hover::after {
    left: 0;
}


.explore-btn:hover .btn-arrow {
    transform: translateX(8px);
}


.explore-btn:hover .btn-number {
    background: #00bfff;
    color: #f13d06;
}


/* MOBILE */

@media (max-width: 768px) {

    .explore-section {
        padding: 80px 6%;
    }

    .explore-content h2 {
        font-size: 38px;
    }

    .explore-actions {
        flex-direction: column;
        align-items: center;
    }

    .explore-btn {
        width: 100%;
        max-width: 350px;
    }

}
/* =================================
   REVERSE ENGINEERING HERO
================================= */

.reverse-hero {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(2, 5, 8, 0.96) 0%,
            rgba(2, 5, 8, 0.82) 50%,
            rgba(2, 5, 8, 0.60) 100%
        ),
        url("images/reverse-engineering-bg.jpg");

    background-size: cover;
    background-position: center;
    color: white;
}


/* CONTENT */

.reverse-hero-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 150px 6% 100px;
}


/* SMALL LABEL */

.reverse-label {
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 3px;
    color: #00bfff;
    margin-bottom: 25px;
}


/* MAIN HEADING */

.reverse-hero h1 {
    max-width: 850px;
    font-size: 68px;
    line-height: 1.08;
    font-family: Georgia, serif;
    margin: 0 0 30px;
    font-weight: 700;
}

.reverse-hero h1 span {
    display: block;
    color: #00bfff;
}


/* DESCRIPTION */

.reverse-hero p {
    max-width: 720px;
    font-size: 19px;
    line-height: 1.8;
    color: #d4d9dd;
    margin-bottom: 40px;
}


/* BUTTON AREA */

.reverse-buttons {
    display: flex;
    gap: 18px;
    align-items: center;
}


/* BUTTON */

.reverse-btn {
    display: inline-block;
    padding: 15px 30px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    transition: 0.3s ease;
}


/* PRIMARY */

.reverse-btn.primary {
    background: #00bfff;
    color: #030507;
    border: 2px solid #00bfff;
}

.reverse-btn.primary:hover {
    background: transparent;
    color: #00bfff;
}


/* SECONDARY */

.reverse-btn.secondary {
    color: white;
    border: 2px solid rgba(255,255,255,0.5);
}

.reverse-btn.secondary:hover {
    border-color: #00bfff;
    color: #00bfff;
}


/* RESPONSIVE */

@media (max-width: 768px) {

    .reverse-hero-content {
        padding: 130px 7% 80px;
    }

    .reverse-hero h1 {
        font-size: 45px;
    }

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

    .reverse-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .reverse-btn {
        width: auto;
    }
}
/* =================================
   WHAT IS REVERSE ENGINEERING
================================= */

.what-reverse {
    background: #ffffff;
    padding: 120px 8%;
    color: #1c1c1c;
}

.reverse-container {
    max-width: 1250px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
}


/* LEFT CONTENT */

.section-tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #008cc7;
    margin-bottom: 18px;
}

.reverse-text h2 {
    font-size: 52px;
    line-height: 1.2;
    font-family: Georgia, serif;
    margin-bottom: 28px;
    color: #111;
}

.reverse-text h2 span {
    color: #008cc7;
}

.reverse-text p {
    font-size: 17px;
    line-height: 1.9;
    color: #555;
    margin-bottom: 20px;
}


/* RIGHT INFORMATION */

.reverse-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.reverse-info-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 22px;
    background: #f7f9fa;
    border-left: 4px solid #00bfff;
    transition: 0.3s ease;
}

.reverse-info-card:hover {
    transform: translateX(8px);
    background: #eef9fd;
}

.reverse-number {
    min-width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #00bfff;
    color: #fff;

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

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

.reverse-info-card h3 {
    font-size: 19px;
    margin-bottom: 8px;
    color: #151515;
}

.reverse-info-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin: 0;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .reverse-container {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .reverse-text h2 {
        font-size: 42px;
    }

}


@media (max-width: 600px) {

    .what-reverse {
        padding: 80px 6%;
    }

    .reverse-text h2 {
        font-size: 35px;
    }

    .reverse-info-card {
        padding: 18px;
    }

}
/* =================================
   WHAT WE CAN REVERSE ENGINEER
================================= */

.reverse-capabilities {
    background: #ffffff;
    padding: 20px 8%;
    color: #1c1c1c;
}

.capabilities-container {
    max-width: 1250px;
    margin: auto;
}


/* HEADING */

.capabilities-heading {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 70px;
}

.capabilities-heading h2 {
    font-size: 52px;
    font-family: Georgia, serif;
    margin: 15px 0 20px;
    color: #111;
}

.capabilities-heading h2 span {
    color: #008cc7;
}

.capabilities-heading p {
    font-size: 17px;
    line-height: 1.8;
    color: #666;
}


/* GRID */

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


/* CARD */

.capability-card {
    background: #f7f9fa;
    padding: 45px 30px;
    border: 1px solid #e5e5e5;
    transition: 0.35s ease;
    position: relative;
}

.capability-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: #00bfff;

    transform: scaleX(0);
    transform-origin: left;
    transition: 0.35s ease;
}

.capability-card:hover::before {
    transform: scaleX(1);
}

.capability-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    background: #ffffff;
}


/* ICON */

.capability-icon {
    width: 65px;
    height: 65px;

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

    background: #e8f8ff;
    border-radius: 50%;

    font-size: 30px;
    margin-bottom: 25px;
}


/* TEXT */

.capability-card h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: #111;
}

.capability-card p {
    font-size: 15px;
    line-height: 1.7;
    color: #666;
}


/* RESPONSIVE */

@media (max-width: 900px) {

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

}


@media (max-width: 600px) {

    .reverse-capabilities {
        padding: 80px 6%;
    }

    .capabilities-heading h2 {
        font-size: 38px;
    }

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

}
/* =================================
   REVERSE ENGINEERING PROCESS
================================= */

.reverse-process {
    background: #f7f9fa;
    padding: 20px 8%;
}

.process-container {
    max-width: 1300px;
    margin: auto;
}


/* HEADING */

.process-heading {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 80px;
}

.process-heading h2 {
    font-family: Georgia, serif;
    font-size: 52px;
    color: #111;
    margin: 15px 0 20px;
}

.process-heading h2 span {
    color: #008cc7;
}

.process-heading p {
    font-size: 17px;
    line-height: 1.8;
    color: #666;
}


/* PROCESS GRID */

.process-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    position: relative;
}


/* STEP */

.process-step {
    text-align: center;
    position: relative;
    padding: 35px 20px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    transition: 0.3s ease;
}


/* TOP NUMBER */

.process-number {
    font-size: 14px;
    font-weight: 700;
    color: #00bfff;
    letter-spacing: 2px;
    margin: 15px 0;
}


/* ICON */

.process-icon {
    width: 75px;
    height: 75px;

    margin: auto;

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

    border-radius: 50%;

    background: #e8f8ff;

    font-size: 32px;
}


/* TITLE */

.process-step h3 {
    font-size: 20px;
    color: #111;
    margin-bottom: 15px;
}


/* DESCRIPTION */

.process-step p {
    font-size: 14px;
    line-height: 1.7;
    color: #666;
}


/* HOVER */

.process-step:hover {
    transform: translateY(-10px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}


/* RESPONSIVE */

@media (max-width: 1100px) {

    .process-steps {
        grid-template-columns: repeat(3, 1fr);
    }

}


@media (max-width: 700px) {

    .process-steps {
        grid-template-columns: 1fr;
    }

    .reverse-process {
        padding: 80px 6%;
    }

    .process-heading h2 {
        font-size: 38px;
    }

}
/* =================================
   WHY CHOOSE MOHANCAD
================================= */

.why-reverse {
    background: #ffffff;
    padding: 40px 8%;
}

.why-reverse-container {
    max-width: 1250px;
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;

    align-items: center;
}


/* LEFT CONTENT */

.why-reverse-content h2 {
    font-family: Georgia, serif;
    font-size: 52px;
    line-height: 1.2;
    color: #111;

    margin: 15px 0 28px;
}

.why-reverse-content h2 span {
    display: block;
    color: #008cc7;
}

.why-reverse-content p {
    font-size: 17px;
    line-height: 1.9;
    color: #666;

    margin-bottom: 20px;
}


/* BUTTON */

.why-reverse-btn {
    display: inline-block;

    margin-top: 20px;
    padding: 16px 30px;

    background: #00bfff;
    color: #ffffff;

    text-decoration: none;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;

    transition: 0.3s ease;
}

.why-reverse-btn:hover {
    background: #111;
    transform: translateY(-3px);
}


/* RIGHT SIDE */

.why-reverse-points {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}


/* CARD */

.why-reverse-card {
    display: flex;
    align-items: center;

    gap: 20px;

    padding: 25px;

    border: 1px solid #e6e6e6;

    background: #ffffff;

    transition: 0.3s ease;
}

.why-reverse-card:hover {
    transform: translateX(10px);

    box-shadow: 0 12px 35px rgba(0,0,0,0.08);

    border-color: #00bfff;
}


/* ICON */

.why-icon {
    min-width: 65px;
    height: 65px;

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

    border-radius: 50%;

    background: #e8f8ff;

    font-size: 30px;
}


/* TEXT */

.why-reverse-card h3 {
    font-size: 20px;
    color: #111;

    margin-bottom: 8px;
}

.why-reverse-card p {
    font-size: 14px;
    line-height: 1.7;

    color: #666;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .why-reverse-container {
        grid-template-columns: 1fr;
        gap: 60px;
    }

}


@media (max-width: 600px) {

    .why-reverse {
        padding: 80px 6%;
    }

    .why-reverse-content h2 {
        font-size: 38px;
    }

    .why-reverse-card {
        align-items: flex-start;
    }

}
/* =================================
   REVERSE ENGINEERING DELIVERABLES
================================= */

.reverse-deliverables {
    background: #f7f9fa;
    padding: 40px 8%;
}

.deliverables-container {
    max-width: 1200px;
    margin: auto;
}


/* HEADING */

.deliverables-heading {
    max-width: 720px;
    margin: 0 auto 70px;
    text-align: center;
}

.deliverables-heading h2 {
    font-family: Georgia, serif;
    font-size: 52px;
    color: #111;

    margin: 15px 0 20px;
}

.deliverables-heading h2 span {
    color: #008cc7;
}

.deliverables-heading p {
    font-size: 17px;
    line-height: 1.8;
    color: #666;
}


/* GRID */

.deliverables-grid {
      width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    box-sizing: border-box;
}


/* CARD */

.deliverable-card {
    width: auto;
    min-width: 0;
    padding: 35px 25px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    position: relative;
    box-sizing: border-box;

}


/* NUMBER */

.deliverable-number {
    position: absolute;

    top: 20px;
    right: 22px;

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

    color: #00bfff;

    letter-spacing: 1px;
}


/* ICON */

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

    display: flex;

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

    border-radius: 50%;

    background: #e8f8ff;

    font-size: 30px;

    margin-bottom: 25px;
}


/* TITLE */

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

    color: #111;

    margin-bottom: 15px;
}


/* DESCRIPTION */

.deliverable-card p {
    font-size: 15px;

    line-height: 1.7;

    color: #666;
}


/* HOVER */

.deliverable-card:hover {

    transform: translateY(-8px);

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

    border-color: #00bfff;

}


/* RESPONSIVE */

@media (max-width: 900px) {

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

}


@media (max-width: 600px) {

    .reverse-deliverables {
        padding: 80px 6%;
    }

    .deliverables-heading h2 {
        font-size: 38px;
    }

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

}
/* =================================
   REVERSE ENGINEERING FAQ
================================= */

.reverse-faq {
    background: #ffffff;
    padding: 40px 30px;
}

.faq-container {
    max-width: 950px;
    margin: 0 auto;
}


/* HEADING */

.faq-heading {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.faq-heading h2 {
    font-family: Georgia, serif;
    font-size: 52px;
    color: #111;
    margin: 15px 0 20px;
}

.faq-heading h2 span {
    color: #008cc7;
}

.faq-heading p {
    font-size: 17px;
    line-height: 1.8;
    color: #666;
}


/* FAQ LIST */

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}


/* FAQ ITEM */

.faq-item {
    border: 1px solid #e5e5e5;
    background: #fff;
}


/* QUESTION */

.faq-question {
    width: 100%;
    background: transparent;
    border: none;

    padding: 22px 25px;

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

    text-align: left;

    font-size: 18px;
    font-weight: 600;

    color: #111;

    cursor: pointer;
}

.faq-question span {
    font-size: 28px;
    color: #00bfff;
    transition: 0.3s ease;
}


/* ANSWER */

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.faq-answer p {
    padding: 0 25px 22px;

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

    color: #666;
}


/* ACTIVE */

.faq-item.active .faq-answer {
    max-height: 300px;
}

.faq-item.active .faq-question span {
    transform: rotate(45deg);
}


/* MOBILE */

@media (max-width: 600px) {

    .reverse-faq {
        padding: 80px 20px;
    }

    .faq-heading h2 {
        font-size: 38px;
    }

    .faq-question {
        font-size: 16px;
        padding: 20px;
    }

}
/* =================================
   REVERSE ENGINEERING CTA
================================= */

.reverse-cta {
    width: 100%;
    padding: 110px 30px;
    background:
        linear-gradient(
            rgba(3, 5, 7, 0.92),
            rgba(3, 5, 7, 0.92)
        ),
        url("images/roject1.png");

    background-size: cover;
    background-position: center;
    text-align: center;
    color: #ffffff;
}

.reverse-cta-content {
    max-width: 850px;
    margin: auto;
}

.reverse-cta-content > span {
    display: inline-block;
    color: #00bfff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 20px;
}

.reverse-cta h2 {
    font-family: Georgia, serif;
    font-size: 52px;
    line-height: 1.2;
    margin-bottom: 25px;
}

.reverse-cta h2 strong {
    color: #00bfff;
}

.reverse-cta p {
    max-width: 700px;
    margin: 0 auto 35px;

    color: #d0d5d8;
    font-size: 17px;
    line-height: 1.8;
}

.reverse-cta-btn {
    display: inline-block;

    padding: 16px 32px;

    background: #00bfff;
    color: #030507;

    text-decoration: none;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;

    border: 2px solid #00bfff;

    transition: 0.3s ease;
}

.reverse-cta-btn:hover {
    background: transparent;
    color: #00bfff;
}


/* MOBILE */

@media (max-width: 600px) {

    .reverse-cta {
        padding: 80px 20px;
    }

    .reverse-cta h2 {
        font-size: 38px;
    }

    .reverse-cta p {
        font-size: 15px;
    }

}
/*---------------------------------------
2d drafting page
-------------------------------------------*/
/* =================================
   2D DRAFTING HERO
================================= */

.drafting-hero {
    width: 100%;
    min-height: 100vh;

    display: flex;
    align-items: center;

    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(2, 5, 8, 0.96) 0%,
            rgba(2, 5, 8, 0.82) 50%,
            rgba(2, 5, 8, 0.60) 100%
        ),
        url("images/service/P");

    background-size: cover;
    background-position: center;

    color: #ffffff;
}


/* CONTENT */

.drafting-hero-content {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    padding: 150px 6% 100px;
}


/* LABEL */

.drafting-label {
    display: inline-block;

    color: #00bfff;

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

    letter-spacing: 3px;

    margin-bottom: 25px;
}


/* HEADING */

.drafting-hero h1 {
    max-width: 900px;

    font-family: Georgia, serif;

    font-size: 68px;
    line-height: 1.08;

    margin: 0 0 30px;
}

.drafting-hero h1 span {
    display: block;
    color: #00bfff;
}


/* DESCRIPTION */

.drafting-hero p {
    max-width: 750px;

    color: #d4d9dd;

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

    margin-bottom: 40px;
}


/* BUTTONS */

.drafting-buttons {
    display: flex;
    gap: 18px;
    align-items: center;
}


/* BUTTON */

.drafting-btn {
    display: inline-block;

    padding: 15px 30px;

    text-decoration: none;

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

    letter-spacing: 1.5px;

    transition: 0.3s ease;
}


/* PRIMARY */

.drafting-btn.primary {
    background: #00bfff;
    color: #030507;

    border: 2px solid #00bfff;
}

.drafting-btn.primary:hover {
    background: transparent;
    color: #00bfff;
}


/* SECONDARY */

.drafting-btn.secondary {
    color: #ffffff;

    border: 2px solid rgba(255,255,255,0.5);
}

.drafting-btn.secondary:hover {
    border-color: #00bfff;
    color: #00bfff;
}


/* MOBILE */

@media (max-width: 768px) {

    .drafting-hero-content {
        padding: 130px 7% 80px;
    }

    .drafting-hero h1 {
        font-size: 45px;
    }

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

    .drafting-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

}
/* =================================
   WHAT IS 2D DRAFTING
================================= */

.what-drafting {
    width: 100%;
    background: #ffffff;
    padding: 50px 30px;
    overflow: hidden;
}

.drafting-about-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;

    align-items: center;
}


/* LEFT TEXT */

.drafting-about-text h2 {
    font-family: Georgia, serif;
    font-size: 52px;
    line-height: 1.2;

    color: #111;

    margin: 15px 0 28px;
}

.drafting-about-text h2 span {
    color: #008cc7;
}

.drafting-about-text p {
    font-size: 17px;
    line-height: 1.9;

    color: #666;

    margin-bottom: 20px;
}


/* RIGHT POINTS */

.drafting-about-points {
    display: flex;
    flex-direction: column;
    gap: 18px;
}


/* POINT */

.drafting-point {
    display: flex;
    align-items: flex-start;

    gap: 20px;

    padding: 23px;

    background: #f7f9fa;

    border-left: 4px solid #00bfff;

    transition: 0.3s ease;
}

.drafting-point:hover {
    transform: translateX(8px);

    background: #eef9fd;

    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}


/* NUMBER */

.drafting-point > span {
    min-width: 48px;
    height: 48px;

    border-radius: 50%;

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

    background: #00bfff;

    color: #ffffff;

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


/* TITLE */

.drafting-point h3 {
    font-size: 19px;

    color: #111;

    margin-bottom: 7px;
}


/* DESCRIPTION */

.drafting-point p {
    font-size: 14px;

    line-height: 1.6;

    color: #666;

    margin: 0;
}


/* MOBILE */

@media (max-width: 900px) {

    .drafting-about-container {
        grid-template-columns: 1fr;
        gap: 55px;
    }

}


@media (max-width: 600px) {

    .what-drafting {
        padding: 80px 20px;
    }

    .drafting-about-text h2 {
        font-size: 38px;
    }

}
/* =================================
   WHAT I CAN CREATE
================================= */

.drafting-services {
    width: 100%;
    background: #f7f9fa;
    padding: 40px 30px;
    overflow: hidden;
    box-sizing: border-box;
}

.drafting-services-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}


/* HEADING */

.drafting-services-heading {
    width: 100%;
    max-width: 720px;
    margin: 0 auto 65px;
    text-align: center;
}

.drafting-services-heading h2 {
    font-family: Georgia, serif;
    font-size: 52px;
    color: #111;
    margin: 15px 0 20px;
}

.drafting-services-heading h2 span {
    color: #008cc7;
}

.drafting-services-heading p {
    font-size: 17px;
    line-height: 1.8;
    color: #666;
}


/* GRID */

.drafting-services-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    box-sizing: border-box;
}


/* CARD */

.drafting-service-card {
    width: 100%;
    min-width: 0;
    padding: 35px 25px;

    background: #ffffff;
    border: 1px solid #e5e5e5;

    position: relative;
    overflow: hidden;

    box-sizing: border-box;

    transition: 0.35s ease;
}


/* TOP LINE */

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

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: #00bfff;

    transform: scaleX(0);
    transform-origin: left;

    transition: 0.35s ease;
}

.drafting-service-card:hover::before {
    transform: scaleX(1);
}


/* HOVER */

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

    border-color: #00bfff;

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


/* ICON */

.drafting-service-icon {
    width: 60px;
    height: 60px;

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

    border-radius: 50%;

    background: #e8f8ff;

    font-size: 28px;

    margin-bottom: 22px;
}


/* TITLE */

.drafting-service-card h3 {
    font-size: 19px;
    color: #111;
    margin-bottom: 12px;
}


/* DESCRIPTION */

.drafting-service-card p {
    font-size: 14px;
    line-height: 1.7;
    color: #666;
}


/* TABLET */

@media (max-width: 1000px) {

    .drafting-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .drafting-services {
        padding: 80px 20px;
    }

    .drafting-services-heading h2 {
        font-size: 38px;
    }

    .drafting-services-grid {
        grid-template-columns: 1fr;
    }

}
/* =================================
   PROCESS + WHY MOHANCAD
================================= */

.drafting-process-section {
    width: 100%;
    background: #ffffff;
    padding: 40px 30px;
    overflow: hidden;
    box-sizing: border-box;
}

.drafting-process-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;

    box-sizing: border-box;
}


/* =================================
   LEFT - PROCESS
================================= */

.drafting-process h2,
.why-drafting h2 {
    font-family: Georgia, serif;
    font-size: 48px;
    line-height: 1.2;

    color: #111;

    margin: 15px 0 20px;
}

.drafting-process h2 span,
.why-drafting h2 span {
    color: #008cc7;
}

.process-intro,
.why-intro {
    font-size: 16px;
    line-height: 1.8;
    color: #666;

    margin-bottom: 35px;
}


/* PROCESS LIST */

.process-list {
    display: flex;
    flex-direction: column;
}


/* PROCESS ITEM */

.draft-process-item {
    display: flex;
    gap: 20px;

    padding: 18px 0;

    border-bottom: 1px solid #e8e8e8;
}

.draft-process-item:last-child {
    border-bottom: none;
}


/* NUMBER */

.draft-process-number {
    min-width: 48px;
    height: 48px;

    border-radius: 50%;

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

    background: #e8f8ff;
    color: #008cc7;

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


/* PROCESS TEXT */

.draft-process-item h3 {
    font-size: 18px;
    color: #111;

    margin-bottom: 7px;
}

.draft-process-item p {
    font-size: 14px;
    line-height: 1.6;

    color: #666;

    margin: 0;
}


/* =================================
   RIGHT - WHY MOHANCAD
================================= */

.why-drafting-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}


/* WHY ITEM */

.why-drafting-item {
    display: flex;
    align-items: flex-start;

    gap: 18px;

    padding: 20px;

    background: #f7f9fa;

    border-left: 4px solid #00bfff;

    transition: 0.3s ease;
}

.why-drafting-item:hover {
    transform: translateX(8px);

    background: #eef9fd;

    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}


/* ICON */

.why-drafting-icon {
    min-width: 48px;
    height: 48px;

    border-radius: 50%;

    background: #ffffff;

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

    color: #008cc7;

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


/* WHY TEXT */

.why-drafting-item h3 {
    font-size: 18px;
    color: #111;

    margin-bottom: 7px;
}

.why-drafting-item p {
    font-size: 14px;
    line-height: 1.6;

    color: #666;

    margin: 0;
}


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

@media (max-width: 900px) {

    .drafting-process-container {
        grid-template-columns: 1fr;
        gap: 70px;
    }

}


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

@media (max-width: 600px) {

    .drafting-process-section {
        padding: 80px 20px;
    }

    .drafting-process h2,
    .why-drafting h2 {
        font-size: 38px;
    }

}
/* =================================
   2D DRAFTING - DELIVERABLES
================================= */

.drafting-deliverables {
    width: 100%;
    max-width: 100%;
    background: #f7f9fa;
    padding: 30px 30px;
    overflow: hidden;
    box-sizing: border-box;
}

.drafting-deliverables-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}


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

.drafting-deliverables-heading {
    width: 100%;
    max-width: 720px;
    margin: 0 auto 65px;
    text-align: center;
}

.drafting-deliverables-heading h2 {
    font-family: Georgia, serif;
    font-size: 52px;
    line-height: 1.2;
    color: #111;
    margin: 15px 0 20px;
}

.drafting-deliverables-heading h2 span {
    color: #008cc7;
}

.drafting-deliverables-heading p {
    font-size: 17px;
    line-height: 1.8;
    color: #666;
}


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

.drafting-deliverables-grid {
    width: 100%;

    display: grid;

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

    gap: 24px;

    box-sizing: border-box;
}


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

.drafting-deliverable-card {
    width: 100%;
    min-width: 0;

    position: relative;

    padding: 35px 28px;

    background: #ffffff;

    border: 1px solid #e5e5e5;

    box-sizing: border-box;

    transition: 0.35s ease;
}


/* TOP LINE */

.drafting-deliverable-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: #00bfff;

    transform: scaleX(0);

    transform-origin: left;

    transition: 0.35s ease;
}

.drafting-deliverable-card:hover::before {
    transform: scaleX(1);
}


/* HOVER */

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

    border-color: #00bfff;

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


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

.drafting-deliverable-icon {
    width: 62px;
    height: 62px;

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

    border-radius: 50%;

    background: #e8f8ff;

    font-size: 28px;

    margin-bottom: 22px;
}


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

.drafting-deliverable-number {
    position: absolute;

    top: 20px;
    right: 22px;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;

    color: #00bfff;
}


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

.drafting-deliverable-card h3 {
    font-size: 20px;

    color: #111;

    margin-bottom: 12px;
}


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

.drafting-deliverable-card p {
    font-size: 14px;

    line-height: 1.7;

    color: #666;

    margin: 0;
}


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

@media (max-width: 900px) {

    .drafting-deliverables-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


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

@media (max-width: 600px) {

    .drafting-deliverables {
        padding: 80px 20px;
    }

    .drafting-deliverables-heading h2 {
        font-size: 38px;
    }

    .drafting-deliverables-grid {
        grid-template-columns: 1fr;
    }

}
/* =================================
   2D DRAFTING FAQ
================================= */

.drafting-faq {
    width: 100%;
    background: #ffffff;
    padding: 30px 30px;
    overflow: hidden;
    box-sizing: border-box;
}

.drafting-faq-container {
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
    box-sizing: border-box;
}


/* HEADING */

.drafting-faq-heading {
    max-width: 700px;
    margin: 0 auto 55px;
    text-align: center;
}

.drafting-faq-heading h2 {
    font-family: Georgia, serif;
    font-size: 52px;
    color: #111;
    margin: 15px 0 20px;
}

.drafting-faq-heading h2 span {
    color: #008cc7;
}

.drafting-faq-heading p {
    font-size: 17px;
    line-height: 1.8;
    color: #666;
}


/* FAQ LIST */

.drafting-faq-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}


/* FAQ ITEM */

.drafting-faq-item {
    width: 100%;
    background: #f7f9fa;
    border: 1px solid #e4e8ea;
    box-sizing: border-box;
}


/* QUESTION */

.drafting-faq-question {
    width: 100%;

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

    padding: 22px 25px;

    border: none;
    background: transparent;

    text-align: left;

    color: #111;

    font-size: 17px;
    font-weight: 600;

    cursor: pointer;
}

.drafting-faq-question span {
    min-width: 30px;

    font-size: 27px;
    font-weight: 400;

    color: #00bfff;

    transition: 0.3s ease;
}


/* ANSWER */

.drafting-faq-answer {
    max-height: 0;
    overflow: hidden;

    transition: max-height 0.4s ease;
}

.drafting-faq-answer p {
    margin: 0;

    padding: 0 25px 24px;

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

    color: #666;
}


/* ACTIVE */

.drafting-faq-item.active
.drafting-faq-question span {
    transform: rotate(45deg);
}


/* MOBILE */

@media (max-width: 600px) {

    .drafting-faq {
        padding: 80px 20px;
    }

    .drafting-faq-heading h2 {
        font-size: 38px;
    }

    .drafting-faq-question {
        padding: 20px;
        font-size: 15px;
    }

}
/* =================================
   2D DRAFTING FINAL CTA
================================= */

.drafting-final-cta {
    width: 100%;
    min-height: 430px;

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

    padding: 90px 30px;

    background:
        linear-gradient(
            rgba(3, 5, 7, 0.93),
            rgba(3, 5, 7, 0.93)
        ),
        url("images/2d-drafting-cta.jpg");

    background-size: cover;
    background-position: center;

    text-align: center;

    box-sizing: border-box;
    overflow: hidden;
}


/* CONTENT */

.drafting-cta-content {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
}


/* LABEL */

.drafting-cta-label {
    display: inline-block;

    color: #00bfff;

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

    letter-spacing: 3px;

    margin-bottom: 20px;
}


/* HEADING */

.drafting-cta-content h2 {
    font-family: Georgia, serif;

    font-size: 52px;
    line-height: 1.2;

    color: #ffffff;

    margin: 0 0 22px;
}

.drafting-cta-content h2 span {
    color: #00bfff;
}


/* DESCRIPTION */

.drafting-cta-content p {
    max-width: 680px;

    margin: 0 auto 35px;

    color: #d2d7da;

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


/* BUTTON */

.drafting-cta-button {
    display: inline-block;

    padding: 16px 34px;

    background: #00bfff;
    color: #030507;

    border: 2px solid #00bfff;

    text-decoration: none;

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

    letter-spacing: 1.5px;

    transition: 0.3s ease;
}

.drafting-cta-button:hover {
    background: transparent;
    color: #00bfff;
}


/* MOBILE */

@media (max-width: 600px) {

    .drafting-final-cta {
        padding: 75px 20px;
    }

    .drafting-cta-content h2 {
        font-size: 38px;
    }

    .drafting-cta-content p {
        font-size: 15px;
    }

} 
/*---------------------------------------------
componet page
--------------------------------------------------*/

/* =================================
   MECHANICAL COMPONENT DESIGN HERO
================================= */

.component-hero {
    width: 100%;
    min-height: 100vh;

    display: flex;
    align-items: center;

    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(0, 191, 255, 0.12),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #020507 0%,
            #061017 50%,
            #020507 100%
        );

    color: #ffffff;

    box-sizing: border-box;
}


/* TECHNICAL GRID */

.component-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    pointer-events: none;
}


/* BLUE GLOW */

.component-hero::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -180px;
    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

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

    box-shadow:
        0 0 80px rgba(0,191,255,0.08),
        inset 0 0 80px rgba(0,191,255,0.04);

    pointer-events: none;
}


/* CONTENT */

.component-hero-content {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    padding: 160px 6% 100px;

    position: relative;
    z-index: 2;

    box-sizing: border-box;
}


/* LABEL */

.component-label {
    display: inline-block;

    color: #00bfff;

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

    letter-spacing: 3px;

    margin-bottom: 25px;
}


/* HEADING */

.component-hero h1 {
    max-width: 900px;

    font-family: Georgia, serif;

    font-size: 68px;
    line-height: 1.08;

    margin: 0 0 30px;
}

.component-hero h1 span {
    display: block;
    color: #00bfff;
}


/* DESCRIPTION */

.component-hero p {
    max-width: 760px;

    color: #cbd3d8;

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

    margin: 0 0 40px;
}


/* BUTTON AREA */

.component-hero-buttons {
    display: flex;
    gap: 18px;

    align-items: center;
}


/* BUTTON */

.component-btn {
    display: inline-block;

    padding: 15px 30px;

    text-decoration: none;

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

    letter-spacing: 1.5px;

    transition: 0.3s ease;
}


/* PRIMARY */

.component-btn.primary {
    background: #00bfff;
    color: #030507;

    border: 2px solid #00bfff;
}

.component-btn.primary:hover {
    background: transparent;
    color: #00bfff;
}


/* SECONDARY */

.component-btn.secondary {
    color: #ffffff;

    border: 2px solid rgba(255,255,255,0.45);
}

.component-btn.secondary:hover {
    border-color: #00bfff;
    color: #00bfff;
}


/* TABLET */

@media (max-width: 900px) {

    .component-hero h1 {
        font-size: 54px;
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .component-hero-content {
        padding: 130px 7% 80px;
    }

    .component-hero h1 {
        font-size: 42px;
    }

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

    .component-hero-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .component-hero::after {
        width: 300px;
        height: 300px;

        right: -180px;
    }

}
/* =================================
   COMPONENT DESIGN - ABOUT
================================= */

.component-about {
    width: 100%;
    background: #ffffff;
    padding: 60px 30px;

    overflow: hidden;
    box-sizing: border-box;
}

.component-about-container {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;

    box-sizing: border-box;
}


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

.component-about-text h2 {
    font-family: Georgia, serif;

    font-size: 50px;
    line-height: 1.2;

    color: #111;

    margin: 15px 0 28px;
}

.component-about-text h2 span {
    color: #008cc7;
}

.component-about-text p {
    font-size: 17px;
    line-height: 1.9;

    color: #666;

    margin-bottom: 20px;
}


/* =================================
   RIGHT FEATURES
================================= */

.component-about-features {
    display: flex;
    flex-direction: column;

    gap: 16px;
}


/* FEATURE */

.component-feature {
    display: flex;
    align-items: flex-start;

    gap: 18px;

    padding: 22px;

    background: #f7f9fa;

    border-left: 4px solid #00bfff;

    transition: 0.3s ease;
}

.component-feature:hover {
    transform: translateX(8px);

    background: #eef9fd;

    box-shadow:
        0 10px 25px rgba(0,0,0,0.06);
}


/* ICON */

.component-feature-icon {
    min-width: 50px;
    height: 50px;

    border-radius: 50%;

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

    background: #ffffff;

    color: #008cc7;

    font-size: 22px;
}


/* TITLE */

.component-feature h3 {
    font-size: 19px;

    color: #111;

    margin-bottom: 7px;
}


/* TEXT */

.component-feature p {
    font-size: 14px;
    line-height: 1.6;

    color: #666;

    margin: 0;
}


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

@media (max-width: 900px) {

    .component-about-container {
        grid-template-columns: 1fr;

        gap: 60px;
    }

}


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

@media (max-width: 600px) {

    .component-about {
        padding: 80px 20px;
    }

    .component-about-text h2 {
        font-size: 38px;
    }

}
/* =================================
   WHAT I CAN DESIGN
================================= */

.component-services {
    width: 100%;
    background: #f5f6f7;

    padding: 120px 30px;

    overflow: hidden;
    box-sizing: border-box;
}

.component-services-container {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    box-sizing: border-box;
}


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

.component-services-heading {
    max-width: 750px;

    margin: 0 auto 65px;

    text-align: center;
}

.component-services-heading h2 {
    font-family: Georgia, serif;

    font-size: 52px;
    line-height: 1.2;

    color: #111;

    margin: 15px 0 20px;
}


/* RED HEADING */

.component-services-heading h2 span {
    color: #e00000;
}

.component-services-heading p {
    font-size: 17px;
    line-height: 1.8;

    color: #666;
}


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

.component-services-grid {
    width: 100%;

    display: grid;

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

    gap: 22px;

    box-sizing: border-box;
}


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

.component-service-card {
    width: 100%;
    min-width: 0;

    position: relative;

    padding: 35px 25px;

    background: #ffffff;

    border: 1px solid #e3e3e3;

    box-sizing: border-box;

    transition: 0.35s ease;
}


/* RED TOP LINE */

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

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: #e00000;

    transform: scaleX(0);

    transform-origin: left;

    transition: 0.35s ease;
}

.component-service-card:hover::before {
    transform: scaleX(1);
}


/* HOVER */

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

    border-color: #e00000;

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


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

.component-service-icon {
    width: 62px;
    height: 62px;

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

    border-radius: 50%;

    background: #fff1f1;

    color: #e00000;

    font-size: 27px;

    margin-bottom: 22px;
}


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

.component-service-number {
    position: absolute;

    top: 20px;
    right: 22px;

    font-size: 13px;

    font-weight: 700;

    color: #e00000;

    letter-spacing: 1px;
}


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

.component-service-card h3 {
    font-size: 19px;

    color: #111;

    margin-bottom: 12px;
}


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

.component-service-card p {
    font-size: 14px;

    line-height: 1.7;

    color: #666;

    margin: 0;
}


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

@media (max-width: 1000px) {

    .component-services-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


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

@media (max-width: 600px) {

    .component-services {
        padding: 80px 20px;
    }

    .component-services-heading h2 {
        font-size: 38px;
    }

    .component-services-grid {
        grid-template-columns: 1fr;
    }

}
/* =================================
   COMPONENT PROCESS + WHY
================================= */

.component-process-section {
    width: 100%;

    background: #ffffff;

    padding: 40px 10px;

    overflow: hidden;

    box-sizing: border-box;
}


.component-process-container {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    box-sizing: border-box;
}


/* =================================
   HEADINGS
================================= */

.component-process h2,
.component-why h2 {

    font-family: Georgia, serif;

    font-size: 48px;

    line-height: 1.2;

    color: #111;

    margin: 15px 0 20px;
}


/* RED ACCENT */

.component-process h2 span,
.component-why h2 span {

    color: #e00000;
}


/* INTRO */

.component-process-intro,
.component-why-intro {

    font-size: 16px;

    line-height: 1.8;

    color: #666;

    margin-bottom: 35px;
}


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

.component-process-list {

    display: flex;

    flex-direction: column;
}


.component-process-item {

    display: flex;

    gap: 20px;

    padding: 18px 0;

    border-bottom: 1px solid #e8e8e8;
}


.component-process-item:last-child {

    border-bottom: none;
}


/* NUMBER */

.component-process-number {

    min-width: 50px;

    height: 50px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #fff1f1;

    color: #e00000;

    font-size: 14px;

    font-weight: 700;
}


/* PROCESS TITLE */

.component-process-item h3 {

    font-size: 18px;

    color: #111;

    margin-bottom: 7px;
}


/* PROCESS TEXT */

.component-process-item p {

    font-size: 14px;

    line-height: 1.6;

    color: #666;

    margin: 0;
}


/* =================================
   WHY MOHANCAD
================================= */

.component-why-list {

    display: flex;

    flex-direction: column;

    gap: 15px;
}


.component-why-item {

    display: flex;

    align-items: flex-start;

    gap: 18px;

    padding: 21px;

    background: #f7f7f7;

    border-left: 4px solid #e00000;

    transition: 0.3s ease;
}


.component-why-item:hover {

    transform: translateX(8px);

    background: #fff3f3;

    box-shadow:
        0 10px 25px rgba(0,0,0,0.06);
}


/* ICON */

.component-why-icon {

    min-width: 48px;

    height: 48px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    color: #e00000;

    font-size: 21px;

    font-weight: 700;
}


/* WHY TITLE */

.component-why-item h3 {

    font-size: 18px;

    color: #111;

    margin-bottom: 7px;
}


/* WHY TEXT */

.component-why-item p {

    font-size: 14px;

    line-height: 1.6;

    color: #666;

    margin: 0;
}


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

@media (max-width: 900px) {

    .component-process-container {

        grid-template-columns: 1fr;

        gap: 70px;
    }

}


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

@media (max-width: 600px) {

    .component-process-section {

        padding: 80px 20px;
    }

    .component-process h2,
    .component-why h2 {

        font-size: 38px;
    }

}
/* =================================
   COMPONENT DESIGN - DELIVERABLES
================================= */

.component-deliverabless {

    width: 100%;

    background: #f0b400;

    padding: 40px 30px;

    overflow: hidden;

    box-sizing: border-box;
}


.component-deliverabless-container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    box-sizing: border-box;
}


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

.component-deliverabless-heading {

    width: 100%;

    max-width: 720px;

    margin: 0 auto 65px;

    text-align: center;
}


.component-deliverabless-heading h2 {

    font-family: Georgia, serif;

    font-size: 52px;

    line-height: 1.2;

    color: #111;

    margin: 15px 0 20px;
}


/* RED ACCENT */

.component-deliverabless-heading h2 span {

    color: #e00000;
}


.component-deliverabless-heading p {

    font-size: 17px;

    line-height: 1.8;

    color: #666;
}


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

.component-deliverabless-grid {

    width: 100%;

    display: grid;

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

    gap: 24px;

    box-sizing: border-box;
}


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

.component-deliverables-card {

    width: 100%;

    min-width: 0;

    position: relative;

    padding: 35px 28px;

    background: #ffffff;

    border: 1px solid #e3e3e3;

    box-sizing: border-box;

    transition: 0.35s ease;
}


/* TOP RED LINE */

.component-deliverables-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background: #e00000;

    transform: scaleX(0);

    transform-origin: left;

    transition: 0.35s ease;
}


.component-deliverables-card:hover::before {

    transform: scaleX(1);
}


/* HOVER */

.component-deliverables-card:hover {

    transform: translateY(-8px);

    border-color: #e00000;

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


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

.component-deliverables-icon {

    width: 62px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #fff1f1;

    color: #e00000;

    font-size: 27px;

    margin-bottom: 22px;
}


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

.component-deliverables-number {

    position: absolute;

    top: 20px;

    right: 22px;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;

    color: #e00000;
}


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

.component-deliverables-card h3 {

    font-size: 20px;

    color: #111;

    margin-bottom: 12px;
}


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

.component-deliverables-card p {

    font-size: 14px;

    line-height: 1.7;

    color: #666;

    margin: 0;
}


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

@media (max-width: 900px) {

    .component-deliverabless-grid {

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

}


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

@media (max-width: 600px) {

    .component-deliverabless {

        padding: 80px 20px;
    }


    .component-deliverabless-heading h2 {

        font-size: 38px;
    }


    .component-deliverabless-grid {

        grid-template-columns: 1fr;
    }

}
/* =================================
   COMPONENT DESIGN WORK SAMPLES
================================= */

.component-work {

    width: 100%;

    background: #ffffff;

    padding: 30px 10px;

    overflow: hidden;

    box-sizing: border-box;
}


.component-work-container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    box-sizing: border-box;
}


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

.component-work-heading {

    max-width: 760px;

    margin: 0 auto 60px;

    text-align: center;
}


.component-work-heading h2 {

    font-family: Georgia, serif;

    font-size: 50px;

    line-height: 1.2;

    color: #111;

    margin: 15px 0 20px;
}


/* RED */

.component-work-heading h2 span {

    color: #e00000;
}


.component-work-heading p {

    font-size: 17px;

    line-height: 1.8;

    color: #666;
}


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

.component-work-grid {

    width: 100%;

    display: grid;

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

    gap: 22px;

    box-sizing: border-box;
}


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

.component-work-card {

    width: 100%;

    height: 310px;

    position: relative;

    overflow: hidden;

    background: #eeeeee;

    box-sizing: border-box;
}


.component-work-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: 0.5s ease;
}


/* IMAGE HOVER */

.component-work-card:hover img {

    transform: scale(1.08);
}


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

.component-work-overlay {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 30px 25px;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,0.92)
        );

    color: #ffffff;

    transform: translateY(10px);

    transition: 0.35s ease;
}


.component-work-card:hover
.component-work-overlay {

    transform: translateY(0);
}


/* NUMBER */

.component-work-overlay span {

    color: #e00000;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;
}


/* TITLE */

.component-work-overlay h3 {

    font-size: 21px;

    margin: 7px 0;

    color: #ffffff;
}


/* TEXT */

.component-work-overlay p {

    font-size: 13px;

    color: #dddddd;

    margin: 0;
}


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

@media (max-width: 900px) {

    .component-work-grid {

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

}


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

@media (max-width: 600px) {

    .component-work {

        padding: 80px 20px;
    }


    .component-work-heading h2 {

        font-size: 38px;
    }


    .component-work-grid {

        grid-template-columns: 1fr;
    }


    .component-work-card {

        height: 280px;
    }

}
/* =================================
   MECHANICAL COMPONENT DESIGN FAQ
================================= */

.component-faq {

    width: 100%;

    background: #f5f6f7;

    padding: 30px 10px;

    overflow: hidden;

    box-sizing: border-box;
}


.component-faq-container {

    width: 100%;

    max-width: 950px;

    margin: 0 auto;

    box-sizing: border-box;
}


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

.component-faq-heading {

    max-width: 720px;

    margin: 0 auto 55px;

    text-align: center;
}


.component-faq-heading h2 {

    font-family: Georgia, serif;

    font-size: 50px;

    line-height: 1.2;

    color: #111;

    margin: 15px 0 20px;
}


/* RED */

.component-faq-heading h2 span {

    color: #e00000;
}


.component-faq-heading p {

    font-size: 17px;

    line-height: 1.8;

    color: #666;
}


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

.component-faq-list {

    display: flex;

    flex-direction: column;

    gap: 14px;
}


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

.component-faq-item {

    width: 100%;

    background: #ffffff;

    border: 1px solid #e2e2e2;

    box-sizing: border-box;

    transition: 0.3s ease;
}


/* =================================
   QUESTION
================================= */

.component-faq-question {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 22px 25px;

    border: none;

    background: transparent;

    text-align: left;

    color: #111;

    font-size: 17px;

    font-weight: 600;

    cursor: pointer;

    box-sizing: border-box;
}


/* PLUS */

.component-faq-question span {

    min-width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #fff1f1;

    color: #e00000;

    font-size: 23px;

    font-weight: 400;

    transition: 0.3s ease;
}


/* =================================
   ANSWER
================================= */

.component-faq-answer {

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.4s ease;
}


.component-faq-answer p {

    margin: 0;

    padding: 0 25px 25px;

    font-size: 15px;

    line-height: 1.8;

    color: #666;
}


/* =================================
   ACTIVE
================================= */

.component-faq-item.active {

    border-color: #e00000;
}


.component-faq-item.active
.component-faq-question span {

    transform: rotate(45deg);

    background: #e00000;

    color: #ffffff;
}


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

@media (max-width: 600px) {

    .component-faq {

        padding: 80px 20px;
    }


    .component-faq-heading h2 {

        font-size: 38px;
    }


    .component-faq-question {

        padding: 19px 18px;

        font-size: 15px;
    }


    .component-faq-answer p {

        padding-left: 18px;

        padding-right: 18px;
    }

}
/* =================================
   FINAL CTA
================================= */

.component-final-cta {

    width: 100%;

    min-height: 430px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 90px 30px;

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 20% 50%,
            rgba(224, 0, 0, 0.14),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #050505,
            #151515,
            #050505
        );

    text-align: center;

    box-sizing: border-box;
}


/* TECHNICAL GRID */

.component-final-cta::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    pointer-events: none;
}


/* CONTENT */

.component-final-cta-content {

    width: 100%;

    max-width: 850px;

    position: relative;

    z-index: 2;
}


/* LABEL */

.component-cta-label {

    display: inline-block;

    color: #e00000;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 20px;
}


/* HEADING */

.component-final-cta h2 {

    font-family: Georgia, serif;

    font-size: 54px;

    line-height: 1.2;

    color: #ffffff;

    margin: 0 0 22px;
}


.component-final-cta h2 span {

    color: #e00000;
}


/* TEXT */

.component-final-cta p {

    max-width: 700px;

    margin: 0 auto 35px;

    color: #d0d0d0;

    font-size: 17px;

    line-height: 1.8;
}


/* BUTTON */

.component-cta-button {

    display: inline-block;

    padding: 16px 34px;

    background: #e00000;

    border: 2px solid #e00000;

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1.5px;

    transition: 0.3s ease;
}


.component-cta-button:hover {

    background: transparent;

    color: #e00000;
}


/* MOBILE */

@media (max-width: 600px) {

    .component-final-cta {

        padding: 75px 20px;
    }


    .component-final-cta h2 {

        font-size: 39px;
    }


    .component-final-cta p {

        font-size: 15px;
    }

}
/* ==============================
   DESIGN OPTIMIZATION HERO
================================= */

.optimization-hero {
    width: 100%;
    min-height: 100vh;

    display: flex;
    align-items: center;

    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(249, 181, 10, 0.15),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #050505 0%,
            #15110a 50%,
            #050505 100%
        );

    color: #ffffff;
}


/* TECHNICAL GRID */

.optimization-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    pointer-events: none;
}


/* ORANGE CIRCLE */

.optimization-hero::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -180px;
    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    border: 1px solid rgba(249,181,10,0.18);

    box-shadow:
        0 0 80px rgba(249,181,10,0.08),
        inset 0 0 80px rgba(249,181,10,0.05);

    pointer-events: none;
}


/* CONTENT */

.optimization-hero-content {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    padding: 160px 6% 100px;

    position: relative;
    z-index: 2;
}


/* LABEL */

.optimization-label {
    display: inline-block;

    color: #f9b50a;

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

    letter-spacing: 3px;

    margin-bottom: 25px;
}


/* HEADING */

.optimization-hero h1 {
    max-width: 900px;

    font-family: Georgia, serif;

    font-size: 68px;
    line-height: 1.08;

    margin: 0 0 30px;
}

.optimization-hero h1 span {
    display: block;
    color: #f9b50a;
}


/* DESCRIPTION */

.optimization-hero p {
    max-width: 760px;

    color: #cfcfcf;

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

    margin: 0 0 40px;
}


/* BUTTON AREA */

.optimization-hero-buttons {
    display: flex;
    gap: 18px;

    align-items: center;
}


/* BUTTON */

.optimization-btn {
    display: inline-block;

    padding: 15px 30px;

    text-decoration: none;

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

    letter-spacing: 1.5px;

    transition: 0.3s ease;
}


/* PRIMARY */

.optimization-btn.primary {
    background: #f9b50a;
    color: #111;

    border: 2px solid #f9b50a;
}

.optimization-btn.primary:hover {
    background: transparent;
    color: #f9b50a;
}


/* SECONDARY */

.optimization-btn.secondary {
    color: #ffffff;

    border: 2px solid rgba(255,255,255,0.45);
}

.optimization-btn.secondary:hover {
    border-color: #f9b50a;
    color: #f9b50a;
}


/* MOBILE */

@media (max-width: 600px) {

    .optimization-hero-content {
        padding: 130px 7% 80px;
    }

    .optimization-hero h1 {
        font-size: 42px;
    }

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

    .optimization-hero-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .optimization-hero::after {
        width: 300px;
        height: 300px;

        right: -180px;
    }

}
/* ==============================
   WHAT IS DESIGN OPTIMIZATION
================================= */

.what-optimization {
    width: 100%;

    background: #ffffff;

    padding: 120px 6%;

    box-sizing: border-box;
}


.what-optimization-container {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, 0.9fr);

    gap: 80px;

    align-items: center;
}


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

.optimization-about-content {
    min-width: 0;
}


.optimization-section-tag {
    display: inline-block;

    color: #f9b50a;

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

    letter-spacing: 2.5px;

    margin-bottom: 20px;
}


.optimization-about-content h2 {
    font-family: Georgia, serif;

    font-size: 50px;

    line-height: 1.2;

    color: #111;

    margin: 0 0 28px;
}


.optimization-about-content h2 span {
    display: block;

    color: #f9b50a;
}


.optimization-about-content p {
    color: #5f5f5f;

    font-size: 16px;

    line-height: 1.9;

    margin-bottom: 18px;
}


/* ==============================
   RIGHT FEATURE GRID
================================= */

.optimization-feature-grid {
    width: 100%;

    display: grid;

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

    gap: 18px;
}


/* FEATURE BOX */

.optimization-feature {
    min-width: 0;

    padding: 28px 22px;

    background: #f7f7f7;

    border: 1px solid #ececec;

    transition: 0.35s ease;
}


/* HOVER */

.optimization-feature:hover {
    background: #ffffff;

    border-color: #f9b50a;

    transform: translateY(-6px);

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


/* ICON */

.optimization-feature-icon {
    width: 52px;
    height: 52px;

    display: flex;

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

    background: #fff4d6;

    border-radius: 50%;

    font-size: 24px;

    margin-bottom: 18px;
}


/* TITLE */

.optimization-feature h3 {
    color: #111;

    font-size: 18px;

    margin: 0 0 10px;
}


/* TEXT */

.optimization-feature p {
    color: #666;

    font-size: 13px;

    line-height: 1.7;

    margin: 0;
}


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

@media (max-width: 900px) {

    .what-optimization-container {
        grid-template-columns: 1fr;

        gap: 55px;
    }

}


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

@media (max-width: 600px) {

    .what-optimization {
        padding: 80px 20px;
    }

    .optimization-about-content h2 {
        font-size: 38px;
    }

    .optimization-feature-grid {
        grid-template-columns: 1fr;
    }

}
/* ==============================
   WHAT I CAN OPTIMIZE
================================= */

.can-optimize {

    width: 100%;

    background: #f6f7f8;

    padding: 40px 6%;

    box-sizing: border-box;
}


.can-optimize-container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;
}


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

.can-optimize-heading {

    max-width: 750px;

    margin: 0 auto 65px;

    text-align: center;
}


.can-optimize-heading span {

    display: inline-block;

    color: #0057ff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 18px;
}


.can-optimize-heading h2 {

    font-family: Georgia, serif;

    font-size: 52px;

    line-height: 1.2;

    color: #111;

    margin: 0 0 18px;
}


/* RED + YELLOW ACCENT */

.can-optimize-heading h2 strong {

    color: #e00000;
}


.can-optimize-heading p {

    color: #666;

    font-size: 16px;

    line-height: 1.8;

    margin: 0;
}


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

.optimize-grid {

    display: grid;

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

    gap: 20px;
}


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

.optimize-card {

    position: relative;

    min-height: 270px;

    padding: 30px 24px;

    background: #ffffff;

    border: 1px solid #e7e7e7;

    overflow: hidden;

    transition: 0.35s ease;
}


/* TOP COLOR LINE */

.optimize-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 5px;

    transition: 0.35s ease;
}


/* RED */

.optimize-red::before {

    background: #e00000;
}


/* BLUE */

.optimize-blue::before {

    background: #0057ff;
}


/* YELLOW */

.optimize-yellow::before {

    background: #f9b50a;
}


/* HOVER */

.optimize-card:hover {

    transform: translateY(-8px);

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


/* NUMBER */

.optimize-number {

    position: absolute;

    top: 22px;

    right: 22px;

    font-size: 13px;

    font-weight: 700;

    color: #999;
}


/* ICON */

.optimize-icon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-size: 26px;

    margin-bottom: 22px;

    background: #f4f4f4;
}


/* RED ICON */

.optimize-red .optimize-icon {

    background: #fff0f0;
}


/* BLUE ICON */

.optimize-blue .optimize-icon {

    background: #eef3ff;
}


/* YELLOW ICON */

.optimize-yellow .optimize-icon {

    background: #fff8df;
}


/* TITLE */

.optimize-card h3 {

    color: #111;

    font-size: 18px;

    line-height: 1.4;

    margin: 0 0 12px;
}


/* TEXT */

.optimize-card p {

    color: #666;

    font-size: 13px;

    line-height: 1.7;

    margin: 0;
}


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

@media (max-width: 1000px) {

    .optimize-grid {

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

}


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

@media (max-width: 600px) {

    .can-optimize {

        padding: 80px 20px;
    }

    .can-optimize-heading h2 {

        font-size: 38px;
    }

    .optimize-grid {

        grid-template-columns: 1fr;
    }

}
/* ==============================
   OPTIMIZATION PROCESS
================================= */

.optimization-process {

    width: 100%;

    background: #ffffff;

    padding: 115px 30px;

    overflow: hidden;

    box-sizing: border-box;
}


.optimization-process-container {

    width: 100%;

    max-width: 1250px;

    margin: 0 auto;
}


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

.optimization-process-heading {

    max-width: 780px;

    margin: 0 auto 70px;

    text-align: center;
}


.optimization-process-heading span {

    display: inline-block;

    color: #0057ff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 18px;
}


.optimization-process-heading h2 {

    font-family: Georgia, serif;

    font-size: 50px;

    line-height: 1.2;

    color: #111;

    margin: 0 0 20px;
}


.optimization-process-heading h2 strong {

    display: block;

    color: #e00000;
}


.optimization-process-heading p {

    color: #666;

    font-size: 16px;

    line-height: 1.8;

    margin: 0;
}


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

.optimization-process-steps {

    width: 100%;

    display: flex;

    align-items: flex-start;

    justify-content: center;

    gap: 10px;

    box-sizing: border-box;
}


/* STEP */

.optimization-process-step {

    width: 155px;

    flex: 0 0 155px;

    position: relative;

    text-align: center;
}


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

.optimization-process-image {

    width: 105px;

    height: 105px;

    margin: 0 auto 15px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    transition: 0.35s ease;
}


.optimization-process-image img {

    width: 82%;

    height: 82%;

    object-fit: contain;

    transition: 0.35s ease;
}


/* HOVER */

.optimization-process-step:hover
.optimization-process-image {

    transform: translateY(-7px);

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


.optimization-process-step:hover
.optimization-process-image img {

    transform: scale(1.08);
}


/* ==============================
   STEP COLORS
================================= */

/* RED */

.process-red .optimization-process-image {

    background: #fff0f0;

    border: 2px solid #e00000;
}


.process-red > span {

    color: #e00000;
}


/* BLUE */

.process-blue .optimization-process-image {

    background: #eef3ff;

    border: 2px solid #0057ff;
}


.process-blue > span {

    color: #0057ff;
}


/* YELLOW */

.process-yellow .optimization-process-image {

    background: #fff8df;

    border: 2px solid #f9b50a;
}


.process-yellow > span {

    color: #d89600;
}


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

.optimization-process-step > span {

    display: block;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 8px;
}


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

.optimization-process-step h3 {

    font-size: 17px;

    color: #111;

    margin: 0 0 10px;
}


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

.optimization-process-step p {

    color: #666;

    font-size: 12px;

    line-height: 1.6;

    margin: 0;
}


/* ==============================
   ARROW
================================= */

.optimization-process-arrow {

    flex: 0 0 22px;

    font-size: 24px;

    margin-top: 38px;

    text-align: center;
}


.arrow-red {

    color: #e00000;
}


.arrow-blue {

    color: #0057ff;
}


.arrow-yellow {

    color: #f9b50a;
}


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

@media (max-width: 1100px) {

    .optimization-process-steps {

        flex-wrap: wrap;

        gap: 30px 15px;
    }


    .optimization-process-arrow {

        display: none;
    }

}


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

@media (max-width: 600px) {

    .optimization-process {

        padding: 80px 20px;
    }


    .optimization-process-heading h2 {

        font-size: 38px;
    }


    .optimization-process-steps {

        flex-direction: column;

        align-items: center;

        gap: 35px;
    }


    .optimization-process-step {

        width: 250px;

        flex: none;
    }

}
/* ==============================
   WHY CHOOSE MOHANCAD
================================= */

.optimization-why {

    width: 100%;

    background: #101010;

    padding: 40px 6%;

    box-sizing: border-box;

    color: #ffffff;
}


.optimization-why-container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 80px;

    align-items: center;
}


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

.optimization-why-tag {

    display: inline-block;

    color: #f9b50a;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 20px;
}


.optimization-why-content h2 {

    font-family: Georgia, serif;

    font-size: 50px;

    line-height: 1.2;

    margin: 0 0 25px;
}


.optimization-why-content h2 strong {

    display: block;

    color: #e00000;
}


.optimization-why-content p {

    color: #bdbdbd;

    font-size: 16px;

    line-height: 1.9;

    margin-bottom: 32px;
}


/* BUTTON */

.optimization-why-btn {

    display: inline-block;

    padding: 15px 28px;

    background: #0057ff;

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    transition: 0.3s ease;
}


.optimization-why-btn:hover {

    background: #f9b50a;

    color: #111;
}


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

.optimization-why-grid {

    display: grid;

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

    gap: 18px;
}


/* CARD */

.optimization-why-card {

    padding: 30px 25px;

    background: #181818;

    border: 1px solid #2c2c2c;

    transition: 0.35s ease;

    position: relative;

    overflow: hidden;
}


/* COLOR TOP BORDER */

.optimization-why-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;
}


.why-red::before {

    background: #e00000;
}


.why-blue::before {

    background: #0057ff;
}


.why-yellow::before {

    background: #f9b50a;
}


/* HOVER */

.optimization-why-card:hover {

    transform: translateY(-7px);

    border-color: #555;

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


/* ICON */

.why-icon {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-size: 25px;

    background: #222;

    margin-bottom: 20px;
}


/* RED ICON */

.why-red .why-icon {

    background: rgba(224,0,0,0.15);
}


/* BLUE ICON */

.why-blue .why-icon {

    background: rgba(0,87,255,0.15);
}


/* YELLOW ICON */

.why-yellow .why-icon {

    background: rgba(249,181,10,0.15);
}


/* TITLE */

.optimization-why-card h3 {

    font-size: 19px;

    margin: 0 0 12px;

    color: #ffffff;
}


/* TEXT */

.optimization-why-card p {

    font-size: 13px;

    line-height: 1.7;

    color: #a8a8a8;

    margin: 0;
}


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

@media (max-width: 900px) {

    .optimization-why-container {

        grid-template-columns: 1fr;

        gap: 55px;
    }

}


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

@media (max-width: 600px) {

    .optimization-why {

        padding: 80px 20px;
    }


    .optimization-why-content h2 {

        font-size: 38px;
    }


    .optimization-why-grid {

        grid-template-columns: 1fr;
    }

}
/* ==============================
   BEFORE & AFTER SECTION
================================= */

.before-after {
    width: 100%;
    padding: 90px 6%;
    background:
        linear-gradient(rgba(0, 191, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 191, 255, 0.025) 1px, transparent 1px),
        #05090e;

    background-size: 45px 45px;
    position: relative;
    overflow: hidden;
}


/* TOP GLOW */

.before-after::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background: rgba(0, 191, 255, 0.05);
    filter: blur(120px);
    border-radius: 50%;
    top: -200px;
    left: -150px;
    pointer-events: none;
}


/* CONTAINER */

.before-after-container {
    max-width: 1200px;
    margin: auto;
    position: relative;
    z-index: 2;
}


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

.before-after-heading {
    max-width: 750px;
    margin: 0 auto 55px;
    text-align: center;
}

.before-after-heading > span {
    display: inline-block;
    margin-bottom: 12px;
    color: #f7c706;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
}

.before-after-heading h2 {
    margin: 0;
    color: #ffffff;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
}

.before-after-heading h2 strong {
    color: #00bfff;
    display: block;
}

.before-after-heading p {
    max-width: 680px;
    margin: 18px auto 0;
    color: #83909a;
    font-size: 14px;
    line-height: 1.8;
}


/* ==============================
   COMPARISON WRAPPER
================================= */

.comparison-wrapper {
    display: grid;
    grid-template-columns: 1fr 100px 1fr;
    align-items: center;
    gap: 25px;
}


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

.comparison-card {
    position: relative;
    background: #09131c;
    border: 1px solid #18394d;
    border-radius: 14px;
    overflow: hidden;
    transition: 0.4s ease;
}

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


/* BEFORE HOVER */

.comparison-before:hover {
    border-color: #ff3b30;
    box-shadow: 0 18px 45px rgba(255, 59, 48, 0.12);
}


/* AFTER HOVER */

.comparison-after:hover {
    border-color: #00bfff;
    box-shadow: 0 18px 45px rgba(0, 191, 255, 0.14);
}


/* ==============================
   LABEL
================================= */

.comparison-label {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 5;

    padding: 7px 15px;

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;

    border-radius: 4px;
    color: #ffffff;
}


/* BEFORE LABEL */

.comparison-before .comparison-label {
    background: #e53935;
}


/* AFTER LABEL */

.comparison-after .comparison-label {
    background: #00a8df;
}


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

.comparison-image {
    width: 100%;
    height: 330px;

    background: #ffffff;

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

    overflow: hidden;
}


/* IMAGE FULL FIT */

.comparison-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    display: block;

    transition: 0.5s ease;
}


/* IMAGE HOVER */

.comparison-card:hover .comparison-image img {
    transform: scale(1.03);
}


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

.comparison-content {
    padding: 22px 25px 25px;
    text-align: center;
}

.comparison-content h3 {
    margin: 0 0 10px;

    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
}

.comparison-content p {
    margin: 0;

    color: #7e8c96;
    font-size: 13px;
    line-height: 1.7;
}


/* ==============================
   CENTER OPTIMIZE
================================= */

.comparison-middle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 10px;

    text-align: center;
}


/* GEAR */

.optimization-symbol {
    width: 58px;
    height: 58px;

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

    border-radius: 50%;

    background: #101b24;
    border: 2px solid #f7c706;

    color: #f7c706;
    font-size: 27px;

    box-shadow:
        0 0 20px rgba(247, 199, 6, 0.18);
}


/* TEXT */

.comparison-middle > span {
    color: #f7c706;

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

    letter-spacing: 2px;
}


/* LINE */

.optimization-line {
    width: 2px;
    height: 55px;

    background: linear-gradient(
        to bottom,
        #f7c706,
        #00bfff
    );
}


/* ARROW */

.optimization-arrow {
    color: #00bfff;
    font-size: 28px;
    font-weight: 700;
}


/* ==============================
   IMPROVEMENT POINTS
================================= */

.improvement-points {
    margin-top: 45px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}


.improvement-item {
    min-height: 75px;

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

    gap: 15px;

    padding: 15px 20px;

    background: #09131c;

    border: 1px solid #17384c;
    border-radius: 8px;

    transition: 0.35s ease;
}


.improvement-item:hover {
    transform: translateY(-5px);
}


/* NUMBER */

.improvement-item strong {
    width: 38px;
    height: 38px;

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

    border-radius: 50%;

    font-size: 12px;
    font-weight: 900;
}


/* TEXT */

.improvement-item span {
    color: #d8e0e5;
    font-size: 13px;
    font-weight: 600;
}


/* RED */

.improvement-red {
    border-top: 3px solid #e53935;
}

.improvement-red strong {
    background: rgba(229, 57, 53, 0.12);
    color: #ff4d48;
}


/* BLUE */

.improvement-blue {
    border-top: 3px solid #00bfff;
}

.improvement-blue strong {
    background: rgba(0, 191, 255, 0.12);
    color: #00bfff;
}


/* YELLOW */

.improvement-yellow {
    border-top: 3px solid #f7c706;
}

.improvement-yellow strong {
    background: rgba(247, 199, 6, 0.12);
    color: #f7c706;
}


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

@media (max-width: 900px) {

    .comparison-wrapper {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .comparison-middle {
        flex-direction: row;
        gap: 15px;
    }

    .optimization-line {
        width: 55px;
        height: 2px;

        background: linear-gradient(
            to right,
            #f7c706,
            #00bfff
        );
    }

    .optimization-arrow {
        transform: rotate(0deg);
    }

    .improvement-points {
        grid-template-columns: 1fr;
    }

}


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

@media (max-width: 600px) {

    .before-after {
        padding: 65px 20px;
    }

    .before-after-heading h2 {
        font-size: 31px;
    }

    .before-after-heading p {
        font-size: 13px;
    }

    .comparison-image {
        height: 250px;
    }

    .comparison-content {
        padding: 20px;
    }

    .comparison-content h3 {
        font-size: 20px;
    }

    .comparison-middle {
        gap: 10px;
    }

    .optimization-symbol {
        width: 50px;
        height: 50px;
        font-size: 23px;
    }

    .improvement-item {
        justify-content: flex-start;
    }

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

.optimization-faq {

    width: 100%;

    background: #ffffff;

    padding: 40px 6%;

    box-sizing: border-box;
}


.optimization-faq-container {

    width: 100%;

    max-width: 900px;

    margin: 0 auto;
}


/* HEADING */

.optimization-faq-heading {

    max-width: 720px;

    margin: 0 auto 60px;

    text-align: center;
}


.optimization-faq-heading span {

    display: block;

    color: #0057ff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 18px;
}


.optimization-faq-heading h2 {

    font-family: Georgia, serif;

    font-size: 50px;

    line-height: 1.2;

    color: #111;

    margin: 0 0 20px;
}


.optimization-faq-heading h2 strong {

    display: block;

    color: #e00000;
}


.optimization-faq-heading p {

    color: #666;

    font-size: 16px;

    line-height: 1.8;

    margin: 0;
}


/* FAQ ITEM */

.faq-item {

    background: #f7f8fa;

    border: 1px solid #e4e5e7;

    margin-bottom: 14px;

    overflow: hidden;

    transition: 0.3s ease;
}


.faq-item:hover {

    border-color: #0057ff;
}


/* QUESTION */

.faq-question {

    width: 100%;

    min-height: 70px;

    padding: 20px 25px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    background: transparent;

    border: none;

    cursor: pointer;
transform: none !important;
    rotate: none !important;
    text-align: left;
}


.faq-question span {

    color: #111;

    font-size: 16px;

    font-weight: 600;
    transform: none !important;
    rotate: none !important;
}


/* PLUS */

.faq-question b {

    width: 34px;

    height: 34px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #ffffff;

    border: 1px solid #ddd;

    color: #0057ff;

    font-size: 22px;

    font-weight: 400;
transform: none !important;
    rotate: none !important;
    transition: 0.3s ease;
}


/* ACTIVE */

.faq-item.active {

    background: #ffffff;

    border-color: #f9b50a;

    box-shadow:
        0 10px 25px rgba(0,0,0,0.06);
}


.faq-item.active .faq-question b {

    background: #f9b50a;

    border-color: #f9b50a;

    color: #111;

}


/* ANSWER */

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.faq-item.active .faq-answer {
    max-height: 300px;
}

.faq-question {
    position: relative;
    z-index: 2;
}

.faq-answer p {

    color: #666;

    font-size: 14px;

    line-height: 1.8;

    padding: 0 70px 25px 25px;

    margin: 0;
}


/* MOBILE */

@media (max-width: 600px) {

    .optimization-faq {

        padding: 80px 20px;
    }


    .optimization-faq-heading h2 {

        font-size: 38px;
    }


    .faq-question {

        padding: 18px;
    }


    .faq-question span {

        font-size: 14px;
    }


    .faq-answer p {

        padding: 0 18px 22px;
    }

}
/* ==============================
   FINAL CTA SECTION
================================= */

.optimization-cta {

    width: 100%;

    padding: 30px 6%;

    background:
        linear-gradient(
            135deg,
            #0b0b0b,
            #161616
        );

    color: #ffffff;

    text-align: center;

    box-sizing: border-box;

    position: relative;

    overflow: hidden;
}


/* TOP COLOR LINE */

.optimization-cta::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            #e00000,
            #0057ff,
            #f9b50a
        );
}


/* CONTENT */

.optimization-cta-content {

    max-width: 800px;

    margin: 0 auto;

    position: relative;

    z-index: 2;
}


/* SMALL TITLE */

.optimization-cta-content > span {

    display: block;

    color: #f9b50a;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 20px;
}


/* HEADING */

.optimization-cta h2 {

    font-family: Georgia, serif;

    font-size: 55px;

    line-height: 1.15;

    margin: 0 0 25px;

    color: #ffffff;
}


.optimization-cta h2 strong {

    display: block;

    color: #e00000;
}


/* TEXT */

.optimization-cta p {

    max-width: 650px;

    margin: 0 auto 35px;

    color: #bdbdbd;

    font-size: 16px;

    line-height: 1.8;
}


/* BUTTON AREA */

.optimization-cta-buttons {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 18px;

    flex-wrap: wrap;
}


/* BUTTON */

.optimization-cta-btn {

    display: inline-block;

    padding: 16px 28px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;

    transition: 0.3s ease;
}


/* PRIMARY */

.primary-btn {

    background: #0057ff;

    color: #ffffff;
}


.primary-btn:hover {

    background: #f9b50a;

    color: #111;

    transform: translateY(-3px);
}


/* SECONDARY */

.secondary-btn {

    border: 1px solid #555;

    color: #ffffff;
}


.secondary-btn:hover {

    border-color: #e00000;

    color: #ffffff;

    transform: translateY(-3px);
}


/* MOBILE */

@media (max-width: 600px) {

    .optimization-cta {

        padding: 85px 20px;
    }


    .optimization-cta h2 {

        font-size: 38px;
    }


    .optimization-cta-buttons {

        flex-direction: column;
    }


    .optimization-cta-btn {

        width: 100%;

        max-width: 280px;

        box-sizing: border-box;
    }

}/*--------------------------------------------
---------------------------------------------
concept & prototype page 
==============================================*/
/* ==============================
   CONCEPT & PROTOTYPE HERO
================================= */

.concept-hero {

    width: 100%;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #070707,
            #151515
        );

    color: #ffffff;

    padding: 120px 6% 80px;

    box-sizing: border-box;
}


/* ==============================
   BACKGROUND GRAPHICS
================================= */

.concept-hero::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

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

    top: -180px;

    left: -180px;

}


.concept-hero::after {

    content: "";

    position: absolute;

    width: 600px;

    height: 600px;

    border-radius: 50%;

    border: 1px solid rgba(224,0,0,0.18);

    bottom: -250px;

    right: -200px;

}


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

.concept-hero-content {

    max-width: 950px;

    position: relative;

    z-index: 2;
}


/* TAG */

.concept-tag {

    display: inline-block;

    color: #f9b50a;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 4px;

    margin-bottom: 25px;
}


/* HEADING */

.concept-hero h1 {

    font-family: Georgia, serif;

    font-size: 68px;

    line-height: 1.1;

    margin: 0 0 25px;

    font-weight: 600;
}


.concept-hero h1 strong {

    display: block;

    color: #e00000;
}


/* TEXT */

.concept-hero p {

    max-width: 720px;

    margin: 0 auto 35px;

    color: #c5c5c5;

    font-size: 17px;

    line-height: 1.8;
}


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

.concept-hero-process {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 15px;

    margin-bottom: 40px;
}


.concept-hero-process span {

    color: #ffffff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;

    padding: 10px 16px;

    border: 1px solid #333;

    background: rgba(255,255,255,0.04);
}


.concept-hero-process b {

    color: #0057ff;

    font-size: 22px;
}


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

.concept-hero-buttons {

    display: flex;

    justify-content: center;

    gap: 18px;

    flex-wrap: wrap;
}


.concept-btn {

    display: inline-block;

    padding: 16px 30px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.2px;

    transition: 0.3s ease;
}


/* PRIMARY */

.primary-concept-btn {

    background: #0057ff;

    color: #ffffff;
}


.primary-concept-btn:hover {

    background: #f9b50a;

    color: #111;

    transform: translateY(-3px);
}


/* SECONDARY */

.secondary-concept-btn {

    border: 1px solid #555;

    color: #ffffff;
}


.secondary-concept-btn:hover {

    border-color: #e00000;
background: #f9b50a;
    color: #ffffff;

    transform: translateY(-3px);
}


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

@media (max-width: 700px) {

    .concept-hero {
        min-height: auto;
        padding: 150px 20px 100px;
    }

    .concept-hero h1 {
        font-size: 45px;
    }

    .concept-hero p {
        font-size: 15px;
    }

    .concept-hero-process {
        gap: 8px;
    }

    .concept-hero-process span {
        font-size: 11px;
        padding: 8px 10px;
    }

}
/* ==============================
   CONCEPT & PROTOTYPE INFO
================================= */

.concept-prototype-info {

    width: 100%;

    padding: 30px 6%;

    background: #ffffff;

    box-sizing: border-box;
}


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

.concept-prototype-heading {

    max-width: 750px;

    margin: 0 auto 70px;

    text-align: center;
}


.concept-prototype-heading > span {

    display: block;

    color: #0057ff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 18px;
}


.concept-prototype-heading h2 {

    font-family: Georgia, serif;

    font-size: 52px;

    line-height: 1.2;

    color: #111;

    margin: 0 0 20px;
}


.concept-prototype-heading h2 strong {

    display: block;

    color: #e00000;
}


.concept-prototype-heading p {

    color: #666;

    font-size: 16px;

    line-height: 1.8;

    margin: 0;
}


/* ==============================
   TWO COLUMN GRID
================================= */

.concept-prototype-grid {

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

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

    gap: 30px;
}


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

.concept-info-card {

    padding: 50px;

    position: relative;

    border: 1px solid #e5e5e5;

    transition: 0.3s ease;
}


.concept-info-card:hover {

    transform: translateY(-8px);

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


/* CONCEPT CARD */

.concept-card {

    border-top: 5px solid #0057ff;
}


/* PROTOTYPE CARD */

.prototype-card {

    border-top: 5px solid #e00000;
}


/* NUMBER */

.info-card-number {

    position: absolute;

    top: 20px;

    right: 25px;

    font-size: 55px;

    font-weight: 700;

    color: #f1f1f1;
}


/* TAG */

.info-tag {

    display: inline-block;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 15px;
}


.concept-card .info-tag {

    color: #0057ff;
}


.prototype-card .info-tag {

    color: #e00000;
}


/* TITLE */

.concept-info-card h3 {

    font-family: Georgia, serif;

    font-size: 32px;

    color: #111;

    margin: 0 0 20px;
}


/* TEXT */

.concept-info-card > p {

    color: #666;

    font-size: 15px;

    line-height: 1.8;

    margin-bottom: 15px;
}


/* ==============================
   POINTS
================================= */

.info-points {

    margin-top: 30px;

    border-top: 1px solid #eee;
}


.info-points div {

    padding: 14px 0;

    border-bottom: 1px solid #eee;

    color: #333;

    font-size: 14px;

    display: flex;

    align-items: center;

    gap: 12px;
}


.info-points b {

    width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-size: 11px;
}


.concept-card .info-points b {

    background: #eef3ff;

    color: #0057ff;
}


.prototype-card .info-points b {

    background: #fff0f0;

    color: #e00000;
}


/* ==============================
   DEVELOPMENT FLOW
================================= */

.concept-development-flow {

    max-width: 900px;

    margin: 70px auto 0;

    padding: 25px;

    background: #f6f7f9;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 18px;
}


.concept-development-flow span {

    font-size: 13px;

    font-weight: 700;

    color: #222;

    letter-spacing: 1px;
}


.concept-development-flow b {

    color: #f9b50a;

    font-size: 24px;
}


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

@media (max-width: 800px) {

    .concept-prototype-grid {

        grid-template-columns: 1fr;
    }


    .concept-info-card {

        padding: 40px 30px;
    }

}


@media (max-width: 600px) {

    .concept-prototype-info {

        padding: 80px 20px;
    }


    .concept-prototype-heading h2 {

        font-size: 40px;
    }


    .concept-info-card h3 {

        font-size: 27px;
    }

}
/* ==============================
   SERVICES + DESIGN PROCESS
================================= */

.concept-services-process {

    width: 100%;

    background: #f5f6f8;

    padding: 30px 6%;

    box-sizing: border-box;
}


.concept-services-process-container {

    max-width: 1250px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 90px;

    align-items: start;
}


/* ==============================
   LEFT / RIGHT HEADING
================================= */

.concept-small-title,
.process-small-title {

    display: inline-block;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 18px;
}


.concept-small-title {

    color: #0057ff;
}


.process-small-title {

    color: #e00000;
}


.concept-services-side h2,
.concept-process-side h2 {

    font-family: Georgia, serif;

    font-size: 46px;

    line-height: 1.2;

    color: #111;

    margin: 0 0 20px;
}


.concept-services-side h2 strong {

    color: #0057ff;
}


.concept-process-side h2 strong {

    color: #e00000;
}


/* DESCRIPTION */

.concept-side-description,
.process-side-description {

    color: #666;

    font-size: 15px;

    line-height: 1.8;

    margin-bottom: 40px;
}


/* ==============================
   LEFT SERVICE LIST
================================= */

.concept-service-list {

    display: flex;

    flex-direction: column;

    gap: 15px;
}


.concept-service-item {

    display: flex;

    align-items: flex-start;

    gap: 18px;

    background: #ffffff;

    padding: 20px;

    border-left: 3px solid #0057ff;

    transition: 0.3s ease;
}


.concept-service-item:hover {

    transform: translateX(8px);

    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}


.concept-service-item > span {

    width: 38px;

    height: 38px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #eef3ff;

    color: #0057ff;

    font-size: 12px;

    font-weight: 700;
}


.concept-service-item h3 {

    color: #111;

    font-size: 17px;

    margin: 0 0 6px;
}


.concept-service-item p {

    color: #777;

    font-size: 13px;

    line-height: 1.7;

    margin: 0;
}


/* ==============================
   RIGHT PROCESS TIMELINE
================================= */

.concept-process-timeline {

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 0;
}


.concept-process-step {

    display: flex;

    align-items: flex-start;

    gap: 20px;

    position: relative;

    padding-bottom: 28px;
}


/* TIMELINE LINE */

.concept-process-step::before {

    content: "";

    position: absolute;

    width: 2px;

    background: #ddd;

    top: 48px;

    bottom: 0;

    left: 23px;
}


.concept-process-step:last-child::before {

    display: none;
}


/* PROCESS NUMBER */

.process-number {

    width: 48px;

    height: 48px;

    flex-shrink: 0;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    font-weight: 700;

    position: relative;

    z-index: 2;
}


.blue-process {

    background: #eef3ff;

    color: #0057ff;

    border: 2px solid #0057ff;
}


.yellow-process {

    background: #fff8df;

    color: #d89600;

    border: 2px solid #f9b50a;
}


.red-process {

    background: #fff0f0;

    color: #e00000;

    border: 2px solid #e00000;
}


/* PROCESS CONTENT */

.process-content {

    background: #ffffff;

    padding: 14px 18px;

    width: 100%;
}


.process-content h3 {

    color: #111;

    font-size: 17px;

    margin: 0 0 6px;
}


.process-content p {

    color: #777;

    font-size: 13px;

    line-height: 1.7;

    margin: 0;
}


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

@media (max-width: 900px) {

    .concept-services-process-container {

        grid-template-columns: 1fr;

        gap: 70px;
    }

}


@media (max-width: 600px) {

    .concept-services-process {

        padding: 80px 20px;
    }


    .concept-services-side h2,
    .concept-process-side h2 {

        font-size: 38px;
    }


    .concept-service-item {

        padding: 16px;
    }

}
/* ==============================
   WHY CHOOSE MOHANCAD
================================= */

.why-mohancad {

    width: 100%;

    background: #ffffff;

    padding: 30px 6%;

    box-sizing: border-box;
}


.why-mohancad-container {

    max-width: 1200px;

    margin: 0 auto;
}


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

.why-mohancad-heading {

    max-width: 750px;

    margin: 0 auto 65px;

    text-align: center;
}


.why-mohancad-heading span {

    display: block;

    color: #0057ff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 18px;
}


.why-mohancad-heading h2 {

    font-family: Georgia, serif;

    font-size: 52px;

    line-height: 1.2;

    color: #111;

    margin: 0 0 20px;
}


.why-mohancad-heading h2 strong {

    display: block;

    color: #e00000;
}


.why-mohancad-heading p {

    color: #666;

    font-size: 16px;

    line-height: 1.8;

    margin: 0;
}


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

.why-mohancad-grid {

    display: grid;

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

    gap: 25px;
}


/* FEATURE */

.why-feature {

    padding: 35px 25px;

    border: 1px solid #e5e5e5;

    background: #ffffff;

    transition: 0.3s ease;
}


.why-feature:hover {

    transform: translateY(-8px);

    box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}


/* NUMBER */

.why-feature-number {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-size: 13px;

    font-weight: 700;

    margin-bottom: 25px;
}


/* BLUE */

.blue-feature {

    background: #eef3ff;

    color: #0057ff;
}


/* RED */

.red-feature {

    background: #fff0f0;

    color: #e00000;
}


/* YELLOW */

.yellow-feature {

    background: #fff8df;

    color: #d89600;
}


/* TITLE */

.why-feature h3 {

    color: #111;

    font-size: 19px;

    line-height: 1.4;

    margin: 0 0 14px;
}


/* TEXT */

.why-feature p {

    color: #777;

    font-size: 14px;

    line-height: 1.8;

    margin: 0;
}


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

@media (max-width: 1000px) {

    .why-mohancad-grid {

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

}


@media (max-width: 600px) {

    .why-mohancad {

        padding: 80px 20px;
    }


    .why-mohancad-heading h2 {

        font-size: 40px;
    }


    .why-mohancad-grid {

        grid-template-columns: 1fr;
    }

}
/* ==============================
   CONCEPT & PROTOTYPE FAQ
================================= */

.concept-faq {

    width: 100%;

    background: #ffffff;

    padding: 30px 6%;

    box-sizing: border-box;
}


.concept-faq-container {

    width: 100%;

    max-width: 900px;

    margin: 0 auto;
}


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

.concept-faq-heading {

    max-width: 720px;

    margin: 0 auto 60px;

    text-align: center;
}


.concept-faq-heading span {

    display: block;

    color: #0057ff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 18px;
}


.concept-faq-heading h2 {

    font-family: Georgia, serif;

    font-size: 50px;

    line-height: 1.2;

    color: #111;

    margin: 0 0 20px;
}


.concept-faq-heading h2 strong {

    display: block;

    color: #e00000;
}


.concept-faq-heading p {

    color: #666;

    font-size: 16px;

    line-height: 1.8;

    margin: 0;
}


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

.concept-faq-item {

    background: #f7f8fa;

    border: 1px solid #e4e5e7;

    margin-bottom: 14px;

    overflow: hidden;

    transition: 0.3s ease;
}


.concept-faq-item:hover {

    border-color: #0057ff;
}


/* QUESTION */

.concept-faq-question {

    width: 100%;

    min-height: 70px;

    padding: 20px 25px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    background: transparent;

    border: none;

    cursor: pointer;

    text-align: left;
}


.concept-faq-question span {

    color: #111;

    font-size: 16px;

    font-weight: 600;
}


/* PLUS ICON */

.concept-faq-question b {

    width: 34px;

    height: 34px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #ffffff;

    border: 1px solid #ddd;

    color: #0057ff;

    font-size: 22px;

    font-weight: 400;

    transition: 0.3s ease;
}


/* ACTIVE */

.concept-faq-item.active {

    background: #ffffff;

    border-color: #f9b50a;

    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}


.concept-faq-item.active .concept-faq-question b {

    background: #f9b50a;

    border-color: #f9b50a;

    color: #111;
}


/* ANSWER */

.concept-faq-answer {

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.35s ease;
}


.concept-faq-answer p {

    color: #666;

    font-size: 14px;

    line-height: 1.8;

    padding: 0 70px 25px 25px;

    margin: 0;
}


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

@media (max-width: 600px) {

    .concept-faq {

        padding: 80px 20px;
    }


    .concept-faq-heading h2 {

        font-size: 38px;
    }


    .concept-faq-question {

        padding: 18px;
    }


    .concept-faq-question span {

        font-size: 14px;
    }


    .concept-faq-answer p {

        padding: 0 20px 20px 18px;
    }

}
/* ==============================
   FINAL CTA SECTION
================================= */

.concept-final-cta {

    width: 100%;

    padding: 10px 5%;

    background:
        linear-gradient(
            135deg,
            #070707,
            #171717
        );

    color: #ffffff;

    text-align: center;

    position: relative;

    overflow: hidden;

    box-sizing: border-box;
}


/* COLOR LINE */

.concept-final-cta::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            #0057ff,
            #e00000,
            #f9b50a
        );
}


/* BACKGROUND CIRCLES */

.concept-final-cta::after {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

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

    border-radius: 50%;

    right: -250px;

    bottom: -250px;
}


/* CONTENT */

.concept-final-cta-content {

    max-width: 800px;

    margin: 0 auto;

    position: relative;

    z-index: 2;
}


/* SMALL TEXT */

.concept-final-cta-content > span {

    display: block;

    color: #f9b50a;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 20px;
}


/* HEADING */

.concept-final-cta h2 {

    font-family: Georgia, serif;

    font-size: 56px;

    line-height: 1.15;

    margin: 0 0 25px;

    color: #ffffff;
}


.concept-final-cta h2 strong {

    display: block;

    color: #e00000;
}


/* DESCRIPTION */

.concept-final-cta p {

    max-width: 650px;

    margin: 0 auto 38px;

    color: #bdbdbd;

    font-size: 16px;

    line-height: 1.8;
}


/* BUTTONS */

.concept-cta-buttons {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 18px;

    flex-wrap: wrap;
}


.concept-cta-primary,
.concept-cta-secondary {

    display: inline-block;

    padding: 16px 30px;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;

    text-decoration: none;

    transition: 0.3s ease;
}


/* PRIMARY BUTTON */

.concept-cta-primary {

    background: #0057ff;

    color: #ffffff;
}


.concept-cta-primary:hover {

    background: #f9b50a;

    color: #111;

    transform: translateY(-3px);
}


/* SECONDARY BUTTON */

.concept-cta-secondary {

    border: 1px solid #555;

    color: #ffffff;
}


.concept-cta-secondary:hover {

    border-color: #e00000;

    transform: translateY(-3px);
}


/* MOBILE */

@media (max-width: 600px) {

    .concept-final-cta {

        padding: 85px 20px;
    }


    .concept-final-cta h2 {

        font-size: 38px;
    }


    .concept-cta-buttons {

        flex-direction: column;
    }


    .concept-cta-primary,
    .concept-cta-secondary {

        width: 100%;

        max-width: 280px;

        box-sizing: border-box;
    }

}
/*======================================================================================================
cnc & manufaturing  page 
================================================================================*/
/* ==============================
   CNC DESIGN HERO SECTION
================================= */

.cnc-hero {

    width: 100%;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #080808,
            #171717
        );

    color: #ffffff;

    padding: 130px 6% 90px;

    box-sizing: border-box;
}


/* ==============================
   BACKGROUND GRAPHICS
================================= */

.cnc-hero::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

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

    top: -220px;

    left: -180px;
}


.cnc-hero::after {

    content: "";

    position: absolute;

    width: 650px;

    height: 650px;

    border-radius: 50%;

    border: 1px solid rgba(224,0,0,0.20);

    bottom: -300px;

    right: -250px;
}


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

.cnc-hero-content {

    max-width: 950px;

    position: relative;

    z-index: 2;
}


/* TAG */

.cnc-tag {

    display: inline-block;

    color: #f9b50a;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 4px;

    margin-bottom: 25px;
}


/* HEADING */

.cnc-hero h1 {

    font-family: Georgia, serif;

    font-size: 68px;

    line-height: 1.1;

    margin: 0 0 25px;

    font-weight: 600;
}


.cnc-hero h1 strong {

    display: block;

    color: #e00000;
}


/* DESCRIPTION */

.cnc-hero p {

    max-width: 720px;

    margin: 0 auto 35px;

    color: #c7c7c7;

    font-size: 17px;

    line-height: 1.8;
}


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

.cnc-hero-process {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 15px;

    margin-bottom: 40px;
}


.cnc-hero-process span {

    padding: 10px 16px;

    border: 1px solid #333;

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

    color: #ffffff;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;
}


.cnc-hero-process b {

    color: #0057ff;

    font-size: 22px;
}


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

.cnc-hero-buttons {

    display: flex;

    justify-content: center;

    gap: 18px;

    flex-wrap: wrap;
}


.cnc-btn {

    display: inline-block;

    padding: 16px 30px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;

    transition: 0.3s ease;
}


/* PRIMARY */

.cnc-primary-btn {

    background: #0057ff;

    color: #ffffff;
}


.cnc-primary-btn:hover {

    background: #f9b50a;

    color: #111;

    transform: translateY(-3px);
}


/* SECONDARY */

.cnc-secondary-btn {

    border: 1px solid #555;

    color: #ffffff;
}


.cnc-secondary-btn:hover {

    border-color: #e00000;

    transform: translateY(-3px);
}


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

@media (max-width: 700px) {

    .cnc-hero {

        min-height: auto;

        padding: 150px 20px 100px;
    }


    .cnc-hero h1 {

        font-size: 44px;
    }


    .cnc-hero p {

        font-size: 15px;
    }


    .cnc-hero-process {

        gap: 8px;
    }


    .cnc-hero-process span {

        font-size: 10px;

        padding: 8px 10px;
    }

}
/* ==============================
   CNC INFO SECTION
================================= */

.cnc-info {

    width: 100%;

    padding: 80px 6%;

    background: #f5f6f8;

    box-sizing: border-box;
}


.cnc-info-container {

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

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

    gap: 30px;
}


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

.cnc-info-card {

    background: #ffffff;

    padding: 50px;

    border: 1px solid #e4e5e7;

    transition: 0.3s ease;

    position: relative;
}


.cnc-info-card:hover {

    transform: translateY(-7px);

    box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}


/* BLUE CARD */

.cnc-design-card {

    border-top: 5px solid #0057ff;
}


/* RED CARD */

.cnc-manufacturing-card {

    border-top: 5px solid #e00000;
}


/* ==============================
   TAG
================================= */

.cnc-info-tag {

    display: inline-block;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 18px;
}


.cnc-design-card .cnc-info-tag {

    color: #0057ff;
}


.cnc-manufacturing-card .cnc-info-tag {

    color: #e00000;
}


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

.cnc-info-card h2 {

    font-family: Georgia, serif;

    font-size: 40px;

    line-height: 1.2;

    color: #111;

    margin: 0 0 22px;
}


.cnc-design-card h2 strong {

    color: #0057ff;
}


.cnc-manufacturing-card h2 strong {

    color: #e00000;
}


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

.cnc-info-card > p {

    color: #666;

    font-size: 15px;

    line-height: 1.8;

    margin-bottom: 15px;
}


/* ==============================
   POINTS
================================= */

.cnc-info-points {

    margin-top: 30px;

    border-top: 1px solid #eeeeee;
}


.cnc-info-points div {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 14px 0;

    border-bottom: 1px solid #eeeeee;
}


.cnc-info-points span {

    width: 34px;

    height: 34px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-size: 11px;

    font-weight: 700;
}


.cnc-design-card .cnc-info-points span {

    background: #eef3ff;

    color: #0057ff;
}


.cnc-manufacturing-card .cnc-info-points span {

    background: #fff0f0;

    color: #e00000;
}


.cnc-info-points p {

    margin: 0;

    color: #333;

    font-size: 14px;
}


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

@media (max-width: 800px) {

    .cnc-info-container {

        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .cnc-info {

        padding: 80px 20px;
    }


    .cnc-info-card {

        padding: 35px 25px;
    }


    .cnc-info-card h2 {

        font-size: 34px;
    }

}
/* ==============================
   CNC SERVICES SECTION
================================= */

.cnc-services {

    width: 100%;

    background: #ffffff;

    padding: 30px 6%;

    box-sizing: border-box;
}


.cnc-services-container {

    max-width: 1200px;

    margin: 0 auto;
}


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

.cnc-services-heading {

    max-width: 750px;

    margin: 0 auto 65px;

    text-align: center;
}


.cnc-services-heading span {

    display: block;

    color: #0057ff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 18px;
}


.cnc-services-heading h2 {

    font-family: Georgia, serif;

    font-size: 52px;

    line-height: 1.2;

    color: #111;

    margin: 0 0 20px;
}


.cnc-services-heading h2 strong {

    display: block;

    color: #e00000;
}


.cnc-services-heading p {

    color: #666;

    font-size: 16px;

    line-height: 1.8;

    margin: 0;
}


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

.cnc-services-grid {

    display: grid;

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

    gap: 22px;
}


/* ==============================
   SERVICE BOX
================================= */

.cnc-service-box {

    min-height: 245px;

    padding: 30px 25px;

    background: #f7f8fa;

    border: 1px solid #e4e5e7;

    position: relative;

    transition: 0.3s ease;

    box-sizing: border-box;
}


.cnc-service-box:hover {

    transform: translateY(-8px);

    background: #ffffff;

    box-shadow: 0 18px 35px rgba(0,0,0,0.08);
}


/* NUMBER */

.cnc-service-number {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    font-weight: 700;

    margin-bottom: 25px;
}


/* BLUE */

.blue-cnc {

    background: #eef3ff;

    color: #0057ff;
}


/* RED */

.red-cnc {

    background: #fff0f0;

    color: #e00000;
}


/* YELLOW */

.yellow-cnc {

    background: #fff8df;

    color: #d89600;
}


/* TITLE */

.cnc-service-box h3 {

    color: #111;

    font-size: 18px;

    line-height: 1.4;

    margin: 0 0 12px;
}


/* DESCRIPTION */

.cnc-service-box p {

    color: #707070;

    font-size: 13px;

    line-height: 1.7;

    margin: 0;
}


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

@media (max-width: 1050px) {

    .cnc-services-grid {

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

}


@media (max-width: 600px) {

    .cnc-services {

        padding: 80px 20px;
    }


    .cnc-services-heading h2 {

        font-size: 40px;
    }


    .cnc-services-grid {

        grid-template-columns: 1fr;
    }


    .cnc-service-box {

        min-height: auto;

        padding: 25px;
    }

}
/* ==============================
   DESIGN FOR MANUFACTURABILITY
================================= */

* {
    box-sizing: border-box;
}


body {

    margin: 0;

    font-family: Arial, sans-serif;

    background: #ffffff;
}


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

.cnc-dfm {

    width: 100%;

    padding: 30px 6%;

    background: #ffffff;
}


/* CONTAINER */

.cnc-dfm-container {

    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 70px;

    align-items: center;
}


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

.cnc-dfm-left {

    max-width: 500px;
}


.dfm-label {

    display: block;

    color: #0057ff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 20px;
}


.cnc-dfm-left h1 {

    font-family: Georgia, serif;

    font-size: 48px;

    line-height: 1.2;

    color: #111;

    margin: 0 0 25px;
}


.cnc-dfm-left h1 strong {

    display: block;

    color: #e00000;
}


.cnc-dfm-left p {

    color: #666;

    font-size: 15px;

    line-height: 1.8;

    margin: 0 0 16px;
}


/* BUTTON */

.dfm-button {

    display: inline-block;

    margin-top: 18px;

    padding: 15px 25px;

    background: #0057ff;

    color: #ffffff;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

    transition: 0.3s ease;
}


.dfm-button:hover {

    background: #f9b50a;

    color: #111;

    transform: translateY(-3px);
}


/* ==============================
   RIGHT POINTS
================================= */

.cnc-dfm-right {

    display: grid;

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

    gap: 18px;
}


/* POINT */

.dfm-point {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 25px 20px;

    background: #f7f8fa;

    border: 1px solid #e5e5e5;

    border-left: 4px solid #0057ff;

    transition: 0.3s ease;
}


.dfm-point:hover {

    transform: translateY(-6px);

    background: #ffffff;

    box-shadow:
        0 15px 30px rgba(0,0,0,0.07);
}


/* COLORS */

.blue-dfm {

    border-left-color: #0057ff;
}


.red-dfm {

    border-left-color: #e00000;
}


.yellow-dfm {

    border-left-color: #f9b50a;
}


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

.dfm-number {

    width: 40px;

    height: 40px;

    flex-shrink: 0;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 11px;

    font-weight: 700;
}


.blue-dfm .dfm-number {

    background: #eaf0ff;

    color: #0057ff;
}


.red-dfm .dfm-number {

    background: #ffecec;

    color: #e00000;
}


.yellow-dfm .dfm-number {

    background: #fff5d5;

    color: #d89600;
}


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

.dfm-point h2 {

    color: #111;

    font-family: Georgia, serif;

    font-size: 17px;

    line-height: 1.3;

    margin: 0 0 8px;
}


/* TEXT */

.dfm-point p {

    color: #777;

    font-size: 12px;

    line-height: 1.6;

    margin: 0;
}


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

@media (max-width: 900px) {

    .cnc-dfm-container {

        grid-template-columns: 1fr;

        gap: 55px;
    }


    .cnc-dfm-left {

        max-width: 750px;
    }

}


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

@media (max-width: 600px) {

    .cnc-dfm {

        padding: 80px 20px;
    }


    .cnc-dfm-left h1 {

        font-size: 38px;
    }


    .cnc-dfm-right {

        grid-template-columns: 1fr;
    }


    .dfm-point {

        padding: 22px 18px;
    }

}
/* ==============================
   CNC FAQ SECTION
================================= */

.cnc-faq {

    width: 100%;

    background: #f4f5f7;

    padding: 30px 6%;

    box-sizing: border-box;
}


.cnc-faq-container {

    max-width: 900px;

    margin: 0 auto;
}


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

.cnc-faq-heading {

    max-width: 750px;

    margin: 0 auto 55px;

    text-align: center;
}


.cnc-faq-heading span {

    display: block;

    color: #0057ff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 18px;
}


.cnc-faq-heading h1 {

    font-family: Georgia, serif;

    font-size: 50px;

    line-height: 1.2;

    color: #111;

    margin: 0 0 20px;
}


.cnc-faq-heading h1 strong {

    display: block;

    color: #e00000;
}


.cnc-faq-heading p {

    color: #666;

    font-size: 15px;

    line-height: 1.8;

    margin: 0;
}


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

.cnc-faq-item {

    background: #ffffff;

    border: 1px solid #e3e4e6;

    margin-bottom: 13px;

    overflow: hidden;

    transition: 0.3s ease;
}


.cnc-faq-item:hover {

    border-color: #0057ff;
}


.cnc-faq-item.active {

    border-color: #f9b50a;

    box-shadow:
        0 10px 25px rgba(0,0,0,0.06);
}


/* ==============================
   QUESTION
================================= */

.cnc-faq-question {

    width: 100%;

    min-height: 70px;

    padding: 18px 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    background: transparent;

    border: none;

    cursor: pointer;

    text-align: left;
}


.cnc-faq-question span {

    color: #111;

    font-size: 15px;

    font-weight: 600;
}


/* ==============================
   PLUS
================================= */

.cnc-faq-question b {

    width: 34px;

    height: 34px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #f4f5f7;

    border: 1px solid #ddd;

    color: #0057ff;

    font-size: 21px;

    font-weight: 400;

    transition: 0.3s ease;
}


.cnc-faq-item.active
.cnc-faq-question b {

    background: #f9b50a;

    border-color: #f9b50a;

    color: #111;
}


/* ==============================
   ANSWER
================================= */

.cnc-faq-answer {

    max-height: 0;

    overflow: hidden;

    transition:
        max-height 0.35s ease;
}


.cnc-faq-answer p {

    color: #666;

    font-size: 14px;

    line-height: 1.8;

    padding: 0 70px 24px 22px;

    margin: 0;
}


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

@media (max-width: 600px) {

    .cnc-faq {

        padding: 75px 20px;
    }


    .cnc-faq-heading h1 {

        font-size: 38px;
    }


    .cnc-faq-question {

        padding: 16px;
    }


    .cnc-faq-question span {

        font-size: 14px;
    }


    .cnc-faq-answer p {

        padding:
            0 20px 22px 16px;
    }

}
/* ==============================
   CNC CTA
================================= */

.cnc-cta {

    width: 100%;

    padding: 35px 20px;

    background: #07090d;

    text-align: center;

    box-sizing: border-box;

    position: relative;

    overflow: hidden;
}


/* DECORATIVE CIRCLES */

.cnc-cta::before {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

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

    border-radius: 50%;

    left: -80px;

    top: -80px;
}


.cnc-cta::after {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    border: 1px solid
        rgba(249, 181, 10, 0.35);

    border-radius: 50%;

    right: -60px;

    bottom: -70px;
}


/* CONTENT */

.cnc-cta-content {

    max-width: 700px;

    margin: auto;

    position: relative;

    z-index: 2;
}


/* SMALL LABEL */

.cnc-cta-content span {

    display: block;

    color: #f9b50a;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 15px;
}


/* HEADING */

.cnc-cta-content h2 {

    font-family: Georgia, serif;

    color: #ffffff;

    font-size: 44px;

    line-height: 1.2;

    margin: 0 0 15px;
}


.cnc-cta-content h2 strong {

    color: #e00000;
}


/* TEXT */

.cnc-cta-content p {

    color: #bfc3ca;

    font-size: 15px;

    line-height: 1.7;

    margin: 0 0 28px;
}


/* BUTTON */

.cnc-cta-btn {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding: 14px 22px;

    background: #0057ff;

    color: #ffffff;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

    transition: 0.3s ease;
}


.cnc-cta-btn span {

    margin: 0;

    color: #ffffff;

    font-size: 20px;

    line-height: 1;
}


.cnc-cta-btn:hover {

    background: #f9b50a;

    color: #111;

    transform: translateY(-4px);
}


.cnc-cta-btn:hover span {

    color: #111;

    transform: translateX(4px);
}


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

@media (max-width: 600px) {

    .cnc-cta {

        padding: 65px 20px;
    }


    .cnc-cta-content h2 {

        font-size: 34px;
    }


    .cnc-cta-content p {

        font-size: 14px;
    }

}
/* ==============================
   SIMULATION HERO SECTION
================================ */

.simulation-hero {

    position: relative;

    min-height: 650px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 140px 20px 90px;

    background:
        linear-gradient(
            135deg,
            #030507,
            #071b2d,
            #030507
        );

    overflow: hidden;
}


/* BACKGROUND EFFECT */

.simulation-hero::before {

    content: "";

    position: absolute;

    width: 550px;

    height: 550px;

    border-radius: 50%;

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

    top: -250px;

    left: -180px;

}


.simulation-hero::after {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    border-radius: 50%;

    border: 1px solid rgba(217, 157, 0, 0.18);

    bottom: -220px;

    right: -120px;

}


/* CONTENT */

.simulation-hero-content {

    position: relative;

    z-index: 2;

    max-width: 900px;

}


/* SMALL TITLE */

.simulation-hero-content > span {

    display: inline-block;

    color: #00bfff;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;

    margin-bottom: 20px;

}


/* MAIN HEADING */

.simulation-hero h1 {

    margin: 0;

    color: #ffffff;

    font-size: 68px;

    line-height: 1.1;

    font-weight: 800;

}


.simulation-hero h1 strong {

    color: #d99d00;

}


/* DESCRIPTION */

.simulation-hero p {

    max-width: 700px;

    margin: 25px auto 35px;

    color: #c9d2db;

    font-size: 18px;

    line-height: 1.8;

}


/* BUTTONS */

.simulation-hero-buttons {

    display: flex;

    justify-content: center;

    gap: 15px;

    flex-wrap: wrap;

}


.simulation-btn {

    padding: 14px 25px;

    text-decoration: none;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

    transition: 0.3s ease;

}


/* PRIMARY */

.primary-btn {

    background: #00bfff;

    color: #030507;

}


.primary-btn:hover {

    background: #d99d00;

    transform: translateY(-3px);

}


/* SECONDARY */

.secondary-btn {

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

    color: #ffffff;

}


.secondary-btn:hover {

    border-color: #00bfff;

    color: #00bfff;

    transform: translateY(-3px);

}


/* PROCESS */

.simulation-hero-process {

    margin-top: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    flex-wrap: wrap;

}


.simulation-hero-process span {

    padding: 9px 15px;

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

    color: #ffffff;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

}


.simulation-hero-process b {

    color: #00bfff;

    font-size: 20px;

}


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

@media (max-width: 700px) {

    .simulation-hero {

        min-height: auto;

        padding: 150px 20px 100px;

    }


    .simulation-hero h1 {

        font-size: 45px;

    }


    .simulation-hero p {

        font-size: 15px;

    }


    .simulation-hero-process {

        gap: 8px;

    }


    .simulation-hero-process span {

        font-size: 10px;

        padding: 8px 10px;

    }


    .simulation-hero-process b {

        font-size: 15px;

    }

}/* ==============================
   WHAT IS SIMULATION
================================ */

.what-simulation {

    padding: 40px 8%;

    background: #ffffff;
}


.what-simulation-container {

    max-width: 1250px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;
}


/* LEFT CONTENT */

.simulation-info > span {

    display: block;

    color: #00bfff;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;

    margin-bottom: 18px;
}


.simulation-info h2 {

    margin: 0 0 25px;

    font-size: 46px;

    line-height: 1.2;

    color: #111;
}


.simulation-info h2 strong {

    color: #d99d00;
}


.simulation-info p {

    margin: 0 0 18px;

    color: #666;

    font-size: 16px;

    line-height: 1.8;
}


/* BENEFITS */

.simulation-benefits {

    margin-top: 35px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;
}


.simulation-benefit {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px;

    background: #f7f9fc;

    border-left: 3px solid #00bfff;
}


.simulation-benefit b {

    color: #d99d00;

    font-size: 18px;
}


.simulation-benefit span {

    color: #222;

    font-size: 13px;

    font-weight: 700;
}


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

.simulation-visual {

    position: relative;

    padding: 30px;
}


.simulation-visual-box {

    padding: 30px;

    background: #071b2d;

    border-radius: 15px;

    box-shadow: 0 25px 50px rgba(0,0,0,0.18);
}


/* TOP */

.visual-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-bottom: 20px;

    border-bottom: 1px solid rgba(255,255,255,0.12);
}


.visual-top span {

    color: #ffffff;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;
}


.visual-top b {

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #00bfff;

    color: #071b2d;

    font-size: 12px;
}


/* CHART */

.simulation-chart {

    height: 220px;

    margin: 30px 0;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 12px;

    padding: 20px;

    border-bottom: 2px solid rgba(255,255,255,0.2);
}


.chart-bar {

    width: 100%;

    background: linear-gradient(
        to top,
        #00bfff,
        #d99d00
    );

    border-radius: 5px 5px 0 0;
}


.bar-1 { height: 40%; }
.bar-2 { height: 65%; }
.bar-3 { height: 90%; }
.bar-4 { height: 55%; }
.bar-5 { height: 75%; }


/* BOTTOM RESULT */

.visual-bottom {

    display: grid;

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

    gap: 10px;

    text-align: center;
}


.visual-bottom small {

    display: block;

    color: #9ca8b3;

    font-size: 10px;

    letter-spacing: 1px;
}


.visual-bottom strong {

    display: block;

    margin-top: 7px;

    color: #ffffff;

    font-size: 17px;
}


/* FLOATING TAG */

.simulation-tag {

    position: absolute;

    right: 0;

    top: 0;

    padding: 10px 18px;

    background: #d99d00;

    color: #111;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

    border-radius: 4px;
}


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

@media (max-width: 900px) {

    .what-simulation-container {

        grid-template-columns: 1fr;

        gap: 50px;
    }


    .simulation-info h2 {

        font-size: 38px;
    }

}


@media (max-width: 600px) {

    .what-simulation {

        padding: 70px 20px;
    }


    .simulation-info h2 {

        font-size: 30px;
    }


    .simulation-benefits {

        grid-template-columns: 1fr;
    }


    .simulation-visual {

        padding: 10px;
    }


    .simulation-visual-box {

        padding: 20px;
    }

}/* ==============================
   WHAT I CAN ANALYZE
================================ */

.simulation-services {

    padding: 40px 8%;

    background: #f7f9fc;
}


/* HEADING */

.simulation-services-heading {

    max-width: 750px;

    margin: 0 auto 60px;

    text-align: center;
}


.simulation-services-heading span {

    display: block;

    color: #00bfff;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;

    margin-bottom: 18px;
}


.simulation-services-heading h2 {

    margin: 0 0 20px;

    color: #111;

    font-size: 46px;

    line-height: 1.2;
}


.simulation-services-heading h2 strong {

    color: #d99d00;
}


.simulation-services-heading p {

    margin: 0;

    color: #666;

    font-size: 16px;

    line-height: 1.8;
}


/* ==============================
   4 × 2 GRID
================================ */

.simulation-services-grid {

    max-width: 1250px;

    margin: auto;

    display: grid;

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

    gap: 22px;
}


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

.analysis-card {

    position: relative;

    padding: 35px 25px;

    background: #ffffff;

    border: 1px solid #e2e7ec;

    border-radius: 10px;

    overflow: hidden;

    transition: 0.3s ease;
}


.analysis-card:hover {

    transform: translateY(-8px);

    border-color: #00bfff;

    box-shadow: 0 18px 35px rgba(0,0,0,0.08);
}


/* NUMBER */

.analysis-number {

    position: absolute;

    top: 15px;

    right: 18px;

    color: #e6edf3;

    font-size: 28px;

    font-weight: 900;
}


/* ICON */

.analysis-icon {

    width: 55px;

    height: 55px;

    margin-bottom: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #eaf8ff;

    color: #00a6e6;

    font-size: 27px;
}


/* TITLE */

.analysis-card h3 {

    margin: 0 0 12px;

    color: #111;

    font-size: 18px;

    line-height: 1.3;
}


/* DESCRIPTION */

.analysis-card p {

    margin: 0;

    color: #666;

    font-size: 14px;

    line-height: 1.7;
}


/* DIFFERENT ACCENT COLORS */

.analysis-card:nth-child(2) .analysis-icon,
.analysis-card:nth-child(6) .analysis-icon {

    background: #fff1f1;

    color: #e00000;
}


.analysis-card:nth-child(3) .analysis-icon,
.analysis-card:nth-child(7) .analysis-icon {

    background: #fff7dc;

    color: #d99d00;
}


.analysis-card:nth-child(4) .analysis-icon,
.analysis-card:nth-child(8) .analysis-icon {

    background: #f0edff;

    color: #6d42c7;
}


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

@media (max-width: 1100px) {

    .simulation-services-grid {

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

}


@media (max-width: 600px) {

    .simulation-services {

        padding: 70px 20px;
    }


    .simulation-services-heading h2 {

        font-size: 32px;
    }


    .simulation-services-grid {

        grid-template-columns: 1fr;
    }

}
/* ==============================
   MY SIMULATION PROCESS
================================ */

.simulation-process {

    padding: 40px 6%;

    background: #ffffff;
}


/* HEADING */

.simulation-process-heading {

    max-width: 750px;

    margin: 0 auto 70px;

    text-align: center;
}


.simulation-process-heading span {

    display: block;

    color: #00bfff;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;

    margin-bottom: 18px;
}


.simulation-process-heading h2 {

    margin: 0 0 20px;

    color: #111;

    font-size: 46px;

    line-height: 1.2;
}


.simulation-process-heading h2 strong {

    color: #d99d00;
}


.simulation-process-heading p {

    margin: 0;

    color: #666;

    font-size: 16px;

    line-height: 1.8;
}


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

.simulation-process-container {

    max-width: 1400px;

    margin: auto;

    display: flex;

    align-items: stretch;

    justify-content: center;

    gap: 12px;
}


/* STEP */

.simulation-step {

    flex: 1;

    position: relative;

    min-height: 220px;

    padding: 25px 18px;

    background: #f7f9fc;

    border: 1px solid #e3e8ee;

    border-radius: 10px;

    text-align: center;

    transition: 0.3s ease;
}


.simulation-step:hover {

    transform: translateY(-8px);

    border-color: #00bfff;

    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}


/* NUMBER */

.simulation-step-number {

    width: 48px;

    height: 48px;

    margin: -48px auto 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #003366;

    color: #ffffff;

    font-size: 14px;

    font-weight: 800;

    border: 4px solid #ffffff;
}


/* CONTENT */

.simulation-step-content h3 {

    margin: 12px 0;

    color: #111;

    font-size: 16px;

    line-height: 1.35;
}


.simulation-step-content p {

    margin: 0;

    color: #666;

    font-size: 13px;

    line-height: 1.7;
}


/* ARROW */

.simulation-arrow {

    display: flex;

    align-items: center;

    justify-content: center;

    color: #00bfff;

    font-size: 28px;

    font-weight: 800;
}


/* DIFFERENT COLORS */

.simulation-step:nth-of-type(5) .simulation-step-number,
.simulation-step:nth-of-type(9) .simulation-step-number {

    background: #d99d00;
}


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

@media (max-width: 1100px) {

    .simulation-process-container {

        display: grid;

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

        gap: 45px 25px;
    }


    .simulation-arrow {

        display: none;
    }

}


@media (max-width: 600px) {

    .simulation-process {

        padding: 80px 20px;
    }


    .simulation-process-heading h2 {

        font-size: 32px;
    }


    .simulation-process-container {

        grid-template-columns: 1fr;

        gap: 50px;
    }

}
/* ==============================
   WHY SIMULATION IS IMPORTANT
================================ */

.why-simulation {

    padding: 40px 8%;

    background: #071b2d;

}


/* MAIN CONTAINER */

.why-simulation-container {

    max-width: 1300px;

    margin: auto;

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 70px;

    align-items: center;

}


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

.why-simulation-content > span {

    display: block;

    margin-bottom: 18px;

    color: #00bfff;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;

}


.why-simulation-content h2 {

    margin: 0 0 25px;

    color: #ffffff;

    font-size: 46px;

    line-height: 1.2;

}


.why-simulation-content h2 strong {

    color: #d99d00;

}


.why-simulation-content p {

    margin: 0 0 18px;

    color: #b8c5d0;

    font-size: 16px;

    line-height: 1.8;

}


/* BUTTON */

.why-simulation-btn {

    display: inline-block;

    margin-top: 15px;

    padding: 14px 25px;

    background: #00bfff;

    color: #071b2d;

    text-decoration: none;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

    transition: 0.3s ease;

}


.why-simulation-btn:hover {

    background: #d99d00;

    transform: translateY(-3px);

}


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

.simulation-benefit-grid {

    display: grid;

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

    gap: 18px;

}


/* CARD */

.simulation-benefit-card {

    padding: 25px;

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

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

    border-radius: 10px;

    transition: 0.3s ease;

}


.simulation-benefit-card:hover {

    transform: translateY(-6px);

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

    border-color: #00bfff;

}


/* ICON */

.benefit-icon {

    width: 48px;

    height: 48px;

    margin-bottom: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

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

    font-size: 22px;

}


/* TITLE */

.simulation-benefit-card h3 {

    margin: 0 0 10px;

    color: #ffffff;

    font-size: 17px;

}


/* DESCRIPTION */

.simulation-benefit-card p {

    margin: 0;

    color: #aebbc6;

    font-size: 13px;

    line-height: 1.7;

}


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

@media (max-width: 950px) {

    .why-simulation-container {

        grid-template-columns: 1fr;

        gap: 50px;

    }

}


@media (max-width: 600px) {

    .why-simulation {

        padding: 75px 20px;

    }


    .why-simulation-content h2 {

        font-size: 32px;

    }


    .simulation-benefit-grid {

        grid-template-columns: 1fr;

    }

}/* ==============================
   SOFTWARE CHART SECTION
================================ */

.software-chart {

    padding: 35px 5%;

    background:
        linear-gradient(
            135deg,
            #f4f8fb,
            #ffffff
        );

    overflow: hidden;
}


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

.software-chart-heading {

    max-width: 750px;

    margin: 0 auto 80px;

    text-align: center;
}


.software-chart-heading span {

    display: block;

    color: #00a8cc;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;

    margin-bottom: 15px;
}


.software-chart-heading h2 {

    margin: 0 0 18px;

    font-size: 46px;

    color: #222;
}


.software-chart-heading h2 strong {

    color: #d99d00;
}


.software-chart-heading p {

    margin: 0;

    color: #666;

    font-size: 16px;

    line-height: 1.8;
}


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

.chart-container {

    position: relative;

    width: 100%;

    max-width: 1100px;

    height: 400px;

    margin: auto;
}


/* ==============================
   MAIN CIRCLE
================================ */

.chart-main {

    position: absolute;

    top: -40px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 5;
}


.main-circle {

    width: 190px;

    height: 190px;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:
        radial-gradient(
            circle at 30% 25%,
            #ffffff,
            #e8f4f8
        );

    border: 8px solid #ffffff;

    outline: 3px solid #4ba6c8;

    box-shadow:
        0 15px 30px rgba(0,0,0,0.18);
}


.main-circle span {

    color: #003366;

    font-size: 20px;

    font-weight: 900;
}


.main-circle strong {

    margin-top: 5px;

    color: #d99d00;

    font-size: 18px;
}


.main-circle small {

    margin-top: 8px;

    color: #777;

    font-size: 11px;
}


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

.vertical-line {

    position: absolute;

    top: 100px;

    left: 50%;

    width: 3px;

    height: 75px;

    transform: translateX(-50%);

    background: #4ba6c8;
}


.horizontal-line {

    position: absolute;

    top: 180px;

    left: 12.5%;

    width: 75%;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            #4ba6c8,
            #d99d00
        );
}


/* ==============================
   SOFTWARE NODE
================================ */

.software-node {

    position: absolute;

    top: 180px;

    width: 200px;

    text-align: center;

    z-index: 5;
}


/* NODE POSITIONS */

.node-one {

    left: 3%;
}


.node-two {

    left: 20%;
}


.node-three {

    right: 41%;
}


.node-four {

    right: 3%;
}

.node-five {

    right: 20%;



}

/* NODE LINE */

.node-line {

    width: 3px;

    height: 45px;

    margin: auto;

    background: #4ba6c8;
}


/* ==============================
   SOFTWARE CIRCLE
================================ */

.software-circle {

    width: 125px;

    height: 125px;

    margin: 0 auto 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 30% 25%,
            #ffffff,
            #eef3f6
        );

    border: 5px solid #ffffff;

    outline: 2px solid #d7e1e7;

    box-shadow:
        0 12px 25px rgba(0,0,0,0.15);

    transition: 0.3s ease;
}


.software-circle:hover {

    transform: translateY(-8px) scale(1.05);

    outline-color: #00bfff;

    box-shadow:
        0 18px 35px rgba(0,102,204,0.22);
}


/* LOGO IMAGE */

.software-circle img {

    width: 130px;

    max-height: 130px;

    object-fit: contain;
}


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

.software-node h3 {

    margin: 0 0 5px;

    color: #222;

    font-size: 16px;

    font-weight: 800;
}


.software-node p {

    margin: 0;

    color: #777;

    font-size: 12px;
}


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

@media (max-width: 850px) {

    .chart-container {

        height: auto;

        display: grid;

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

        gap: 50px 20px;
    }


    .chart-main {

        position: relative;

        grid-column: span 2;

        left: auto;

        top: auto;

        transform: none;

        margin: auto;
    }


    .vertical-line,
    .horizontal-line,
    .node-line {

        display: none;
    }


    .software-node {

        position: relative;

        top: auto;

        left: auto;

        right: auto;

        width: 100%;
    }

}


@media (max-width: 550px) {

    .software-chart {

        padding: 80px 20px;
    }


    .software-chart-heading h2 {

        font-size: 32px;
    }


    .chart-container {

        grid-template-columns: 1fr;
    }


    .chart-main {

        grid-column: span 1;
    }

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

.simulation-faq {
    width: 100%;
    padding: 50px 8%;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

/* Background Glow */

.simulation-faq::before {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    background: rgba(0, 191, 255, 0.08);
    border-radius: 50%;
    filter: blur(100px);
    top: 50px;
    left: -180px;
}

.simulation-faq::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    background: rgba(217, 157, 0, 0.07);
    border-radius: 50%;
    filter: blur(100px);
    bottom: 0;
    right: -150px;
}


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

.faq-heading {
    max-width: 850px;
    margin: 0 auto 60px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.faq-heading span {
    display: inline-block;
    color: #00bfff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 4px;
    margin-bottom: 12px;
}

.faq-heading h2 {
    color: #003366;
    font-size: 38px;
    line-height: 1.3;
    margin-bottom: 18px;
    font-family: Georgia, serif;
}

.faq-heading h2::after {
    content: "";
    display: block;
    width: 90px;
    height: 3px;
    background: #d99d00;
    margin: 18px auto 0;
}

.faq-heading p {
    color: #00527a;
    font-size: 16px;
    line-height: 1.8;
    margin-top: 20px;
}


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

.faq-container {
    max-width: 1000px;
    margin: auto;
    position: relative;
    z-index: 2;
}


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

.faq-item {
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.035);
    border-radius: 12px;
    overflow: hidden;
    transition: 0.3s ease;
}

.faq-item:hover {
    border-color: rgba(0, 191, 255, 0.45);
    transform: translateY(-2px);
}


/* ================= QUESTION ================= */

.faq-question {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: #ffffff;
    padding: 22px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    transition: 0.3s ease;
}

.faq-question:hover {
    color: #00bfff;
}


/* ================= PLUS ICON ================= */

.faq-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border: 1px solid #00bfff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00bfff;
    font-size: 23px;
    font-weight: 400;
    margin-left: 20px;
    transition: 0.4s ease;
}


/* ================= ANSWER ================= */

.faq-answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.45s ease, opacity 0.35s ease;
}

.faq-answer p {
    color: #aeb7c2;
    font-size: 15px;
    line-height: 1.8;
    padding: 0 25px 24px;
    margin: 0;
}


/* ================= ACTIVE ================= */

.faq-item.active {
    border-color: #00bfff;
    box-shadow: 0 0 25px rgba(0, 191, 255, 0.08);
}

.faq-item.active .faq-answer {
    max-height: 300px;
    opacity: 1;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
    background: #00bfff;
    color: #030507;
}


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

@media (max-width: 768px) {

    .simulation-faq {
        padding: 75px 5%;
    }

    .faq-heading h2 {
        font-size: 28px;
    }

    .faq-heading p {
        font-size: 14px;
    }

    .faq-question {
        padding: 18px;
        font-size: 15px;
    }

    .faq-question span:first-child {
        padding-right: 10px;
    }

    .faq-icon {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 20px;
        margin-left: 10px;
    }

    .faq-answer p {
        padding: 0 18px 20px;
        font-size: 14px;
    }
}


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

@media (max-width: 480px) {

    .simulation-faq {
        padding: 60px 4%;
    }

    .faq-heading h2 {
        font-size: 24px;
    }

    .faq-heading span {
        font-size: 12px;
        letter-spacing: 3px;
    }

    .faq-question {
        font-size: 14px;
    }

}/* ================= SIMULATION CTA ================= */

.simulation-cta {
    width: 100%;
    min-height: 430px;
    padding: 8px 8%;
    background:
        linear-gradient(
            135deg,
            rgba(0, 191, 255, 0.08),
            rgba(3, 5, 7, 0.98) 45%,
            rgba(217, 157, 0, 0.08)
        ),
        #030507;

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

    position: relative;
    overflow: hidden;

    border-top: 1px solid rgba(255, 255, 255, 0.08);
}


/* Background Circle */

.simulation-cta::before {
    content: "";
    position: absolute;

    width: 350px;
    height: 350px;

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

    left: -120px;
    top: 40px;
}

.simulation-cta::after {
    content: "";
    position: absolute;

    width: 300px;
    height: 300px;

    border: 1px solid rgba(217, 157, 0, 0.15);
    border-radius: 50%;

    right: -100px;
    bottom: -100px;
}


/* Content */

.cta-content {
    max-width: 850px;
    position: relative;
    z-index: 2;
}


/* Small Heading */

.cta-tag span{
    display: inline-block;

    color: #b40009;

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

    letter-spacing: 3px;

    margin-bottom: 18px;
}


/* Main Heading */

.cta-content h2 {
    color: #ffffff;

    font-size: 45px;

    font-family: Georgia, serif;

    margin: 0 0 20px;

    line-height: 1.25;
}

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


/* Description */

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

    margin: 0 auto 35px;

    color: #aeb7c2;

    font-size: 16px;

    line-height: 1.8;
}


/* Buttons */

.cta-buttons {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 18px;

    flex-wrap: wrap;
}


/* Common Button */

.cta-btn {
    min-width: 170px;

    padding: 14px 24px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    border-radius: 5px;

    transition: 0.3s ease;
}


/* Primary Button */

.primary-btn {
    background: #00bfff;

    color: #030507;

    border: 1px solid #00bfff;
}

.primary-btn:hover {
    background: transparent;

    color: #00bfff;

    box-shadow: 0 0 20px rgba(0, 191, 255, 0.25);

    transform: translateY(-3px);
}


/* Secondary Button */

.secondary-btn {
    background: transparent;

    color: #ffffff;

    border: 1px solid #d99d00;
}

.secondary-btn:hover {
    background: #d99d00;

    color: #030507;

    box-shadow: 0 0 20px rgba(217, 157, 0, 0.25);

    transform: translateY(-3px);
}


/* Arrow */

.cta-btn span {
    font-size: 18px;

    transition: 0.3s ease;
}

.cta-btn:hover span {
    transform: translateX(4px);
}


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

@media (max-width: 768px) {

    .simulation-cta {
        padding: 75px 6%;
    }

    .cta-content h2 {
        font-size: 34px;
    }

    .cta-content p {
        font-size: 15px;
    }

}


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

@media (max-width: 480px) {

    .simulation-cta {
        min-height: 400px;

        padding: 65px 5%;
    }

    .cta-tag {
        font-size: 11px;

        letter-spacing: 2px;
    }

    .cta-content h2 {
        font-size: 27px;
    }

    .cta-content p {
        font-size: 14px;

        line-height: 1.7;
    }

    .cta-buttons {
        flex-direction: column;

        width: 100%;
    }

    .cta-btn {
        width: 100%;

        max-width: 250px;
    }

} /*============================================================================================================
page 
===========================================================================================================================*/

/* ================= INDUSTRIAL EQUIPMENT HERO ================= */

.industrial-hero {
    width: 100%;
    min-height: 600px;

    position: relative;

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

    text-align: center;

    background-image:
        url("images/122.jpg");

    background-size: cover;
    background-position: center;

    overflow: hidden;
}


/* Dark Overlay */

.industrial-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3, 5, 7, 0.92),
            rgba(3, 5, 7, 0.65),
            rgba(3, 5, 7, 0.88)
        );
}


/* Hero Content */

.industrial-hero-content {
    max-width: 950px;

    position: relative;
    z-index: 2;

    padding: 120px 25px 60px;
}


/* Small Tag */

.hero-tag {
    display: inline-block;

    color: #00bfff;

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

    letter-spacing: 4px;

    margin-bottom: 20px;
}


/* Heading */

.industrial-hero h1 {
    margin: 0;

    color: #ffffff;

    font-size: 58px;

    line-height: 1.15;

    font-family: Georgia, serif;

    font-weight: 700;
}

.industrial-hero h1 span {
    color: #d99d00;
}


/* Description */

.industrial-hero p {
    max-width: 760px;

    margin: 25px auto 35px;

    color: #d0d5da;

    font-size: 17px;

    line-height: 1.8;
}


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

.hero-buttons {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 18px;

    flex-wrap: wrap;
}

.hero-btn {
    min-width: 185px;

    padding: 15px 25px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1px;

    display: inline-flex;

    justify-content: center;

    align-items: center;

    gap: 12px;

    border-radius: 5px;

    transition: 0.3s ease;
}


/* Primary */

.hero-btn.primary {
    background: #00bfff;

    color: #030507;

    border: 1px solid #00bfff;
}

.hero-btn.primary:hover {
    background: transparent;

    color: #00bfff;

    transform: translateY(-3px);
}


/* Secondary */

.hero-btn.secondary {
    background: transparent;

    color: #ffffff;

    border: 1px solid #d99d00;
}

.hero-btn.secondary:hover {
    background: #d99d00;

    color: #030507;

    transform: translateY(-3px);
}


/* Arrow */

.hero-btn span {
    font-size: 18px;

    transition: 0.3s ease;
}

.hero-btn:hover span {
    transform: translateX(5px);
}


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

@media (max-width: 768px) {

    .industrial-hero {
        min-height: 650px;
    }

    .industrial-hero-content {
        padding: 110px 20px 50px;
    }

    .industrial-hero h1 {
        font-size: 42px;
    }

    .industrial-hero p {
        font-size: 15px;
    }

}


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

@media (max-width: 480px) {

    .industrial-hero {
        min-height: 620px;

        background-position: center;
    }

    .industrial-hero-content {
        padding: 100px 18px 40px;
    }

    .hero-tag {
        font-size: 10px;

        letter-spacing: 2px;
    }

    .industrial-hero h1 {
        font-size: 31px;
    }

    .industrial-hero p {
        font-size: 14px;

        line-height: 1.7;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-btn {
        width: 220px;
    }

}/* ================= ENGINEERING SOLUTIONS ================= */
/* =========================================================
   BARMAN SERVICES
========================================================= */

.barman-services {
    position: relative;

    width: 100%;

    padding: 20px 6%;

    background: #f7f9fc;

    overflow: hidden;

    box-sizing: border-box;
}


/* =========================================================
   BACKGROUND DETAIL
========================================================= */

.barman-services::before {
    content: "";

    position: absolute;

    top: -180px;
    right: -180px;

    width: 420px;
    height: 420px;

    border: 1px solid rgba(30, 64, 175, 0.08);

    border-radius: 50%;

    pointer-events: none;
}


.barman-services::after {
    content: "";

    position: absolute;

    bottom: -220px;
    left: -180px;

    width: 450px;
    height: 450px;

    border: 1px solid rgba(30, 64, 175, 0.06);

    border-radius: 50%;

    pointer-events: none;
}


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

.barman-services-intro {
    position: relative;

    z-index: 2;

    max-width: 820px;

    margin: 0 auto 60px;

    text-align: center;
}


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

.barman-services-intro span {
    display: inline-flex;

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

    gap: 10px;

    margin-bottom: 14px;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2.5px;

    color: #1e40af;
}


/* =========================================================
   LABEL LINES
========================================================= */

.barman-services-intro span::before,
.barman-services-intro span::after {
    content: "";

    width: 28px;
    height: 2px;

    background: #f9822e;
}


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

.barman-services-intro h2 {
    margin: 0 0 17px;

    font-size: clamp(30px, 4vw, 42px);

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -0.8px;

    color: #101828;
}


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

.barman-services-intro p {
    max-width: 720px;

    margin: 0 auto;

    font-size: 16px;

    line-height: 1.75;

    color: #667085;
}


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

.barman-services-grid {
    position: relative;

    z-index: 2;

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

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

    gap: 24px;
}


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

.barman-service-card {
    position: relative;

    display: flex;

    align-items: flex-start;

    min-height: 190px;

    padding: 30px 32px;

    background: #ffffff;

    border: 1px solid #e6eaf0;

    border-radius: 14px;

    box-sizing: border-box;

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


/* =========================================================
   TOP ORANGE LINE
========================================================= */

.barman-service-card::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 3px;

    background: #f9822e;

    transition: width 0.35s ease;
}


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


/* =========================================================
   LEFT BLUE ACCENT
========================================================= */

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

    position: absolute;

    left: 0;
    top: 24px;

    width: 3px;
    height: 0;

    background: #1e40af;

    border-radius: 0 3px 3px 0;

    transition: height 0.35s ease;
}


.barman-service-card:hover::before {
    height: calc(100% - 48px);
}


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

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

    border-color: rgba(30, 64, 175, 0.25);

    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.10);
}


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

.barman-service-number {
    position: relative;

    flex-shrink: 0;

    width: 54px;
    height: 54px;

    display: flex;

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

    margin-right: 23px;

    border-radius: 10px;

    background: #1e40af;

    color: #ffffff;

    font-size: 16px;

    font-weight: 800;

    box-shadow:
        0 8px 20px rgba(30, 64, 175, 0.20);

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


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

.barman-service-card:hover .barman-service-number {
    background: #f9822e;

    transform: translateY(-2px);
}


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

.barman-service-content {
    flex: 1;

    min-width: 0;
}


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

.barman-service-content h3 {
    margin: 2px 0 11px;

    font-size: 20px;

    line-height: 1.35;

    font-weight: 750;

    letter-spacing: -0.2px;

    color: #101828;

    transition: color 0.3s ease;
}


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

.barman-service-card:hover .barman-service-content h3 {
    color: #1e40af;
}


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

.barman-service-content p {
    margin: 0;

    font-size: 14px;

    line-height: 1.75;

    color: #667085;
}


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

@media (max-width: 900px) {

    .barman-services {
        padding: 75px 5%;
    }


    .barman-services-intro {
        margin-bottom: 45px;
    }


    .barman-services-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

}


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

@media (max-width: 600px) {

    .barman-services {
        padding: 65px 20px;
    }


    .barman-services-intro {
        margin-bottom: 38px;
    }


    /* LABEL */

    .barman-services-intro span {
        font-size: 11px;

        letter-spacing: 2px;
    }


    .barman-services-intro span::before,
    .barman-services-intro span::after {
        width: 20px;
    }


    /* HEADING */

    .barman-services-intro h2 {
        font-size: 28px;

        line-height: 1.2;
    }


    /* DESCRIPTION */

    .barman-services-intro p {
        font-size: 14px;

        line-height: 1.65;
    }


    /* GRID */

    .barman-services-grid {
        gap: 16px;
    }


    /* CARD */

    .barman-service-card {
        min-height: auto;

        padding: 24px 20px;

        border-radius: 12px;
    }


    /* NUMBER */

    .barman-service-number {
        width: 46px;
        height: 46px;

        margin-right: 15px;

        font-size: 14px;

        border-radius: 9px;
    }


    /* TITLE */

    .barman-service-content h3 {
        margin-top: 1px;

        margin-bottom: 8px;

        font-size: 17px;

        line-height: 1.4;
    }


    /* DESCRIPTION */

    .barman-service-content p {
        font-size: 13px;

        line-height: 1.65;
    }

}


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

@media (max-width: 400px) {

    .barman-services {
        padding-left: 15px;

        padding-right: 15px;
    }


    .barman-service-card {
        padding: 22px 17px;
    }


    .barman-service-number {
        width: 42px;
        height: 42px;

        margin-right: 12px;
    }


    .barman-service-content h3 {
        font-size: 16px;
    }


    .barman-service-content p {
        font-size: 12.5px;
    }

}
/* ================= WHY MOHANCAD ================= */

/* =====================================================
   MOHANCAD ADVANTAGE
===================================================== */

.mohancad-advantage {
    width: 100%;

    padding: 70px 7%;

    background: #070a0e;

    position: relative;

    overflow: hidden;
}


/* =====================================================
   BACKGROUND GLOW
===================================================== */

.mohancad-advantage::before {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    background: rgba(0, 191, 255, 0.06);

    filter: blur(100px);

    top: 80px;
    right: -150px;

    pointer-events: none;
}


/* =====================================================
   HEADING
===================================================== */

.advantage-heading {
    max-width: 850px;

    margin: 0 auto 55px;

    text-align: center;

    position: relative;

    z-index: 2;
}


/* Small Label */

.advantage-heading span {
    display: inline-block;

    color: #00bfff;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 4px;

    margin-bottom: 12px;
}


/* Main Heading */

.advantage-heading h2 {
    color: #ffffff;

    font-family: Georgia, serif;

    font-size: 40px;

    line-height: 1.3;

    margin: 0 0 18px;
}


/* Gold Line */

.advantage-heading h2::after {
    content: "";

    display: block;

    width: 80px;

    height: 3px;

    background: #d99d00;

    margin: 18px auto 0;
}


/* Description */

.advantage-heading p {
    color: #aeb7c2;

    font-size: 16px;

    line-height: 1.8;

    max-width: 700px;

    margin: 20px auto 0;
}


/* =====================================================
   GRID
===================================================== */

.advantage-grid {
    max-width: 1150px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

    position: relative;

    z-index: 2;
}


/* =====================================================
   CARD
===================================================== */

.advantage-card {
    background: #030507;

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 12px;

    padding: 32px 28px 30px;

    min-height: 245px;

    position: relative;

    overflow: hidden;

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}


/* Top Animated Line */

.advantage-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    height: 3px;

    background: #00bfff;

    transform: scaleX(0);

    transform-origin: left;

    transition: 0.4s ease;
}


/* Hover */

.advantage-card:hover::before {
    transform: scaleX(1);
}

.advantage-card:hover {
    transform: translateY(-7px);

    border-color: rgba(0, 191, 255, 0.4);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.45),
        0 0 20px rgba(0, 191, 255, 0.06);
}


/* =====================================================
   NUMBER
===================================================== */

.advantage-number {
    position: absolute;

    top: 17px;

    right: 20px;

    color: rgba(255, 255, 255, 0.10);

    font-size: 28px;

    font-weight: 800;

    line-height: 1;
}


/* =====================================================
   ICON
===================================================== */

.advantage-icon {
    width: 58px;

    height: 58px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(0, 191, 255, 0.08);

    border: 1px solid rgba(0, 191, 255, 0.35);

    color: #00bfff;

    font-size: 27px;

    margin-bottom: 20px;

    transition:
        background 0.4s ease,
        color 0.4s ease,
        transform 0.4s ease;
}


/* Icon Hover */

.advantage-card:hover .advantage-icon {
    background: #00bfff;

    color: #030507;

    transform: rotate(8deg);
}


/* =====================================================
   CARD TITLE
===================================================== */

.advantage-card h3 {
    color: #ffffff;

    font-size: 20px;

    line-height: 1.35;

    margin: 0 0 12px;
}


/* =====================================================
   CARD TEXT
===================================================== */

.advantage-card p {
    color: #9fa9b3;

    font-size: 14px;

    line-height: 1.75;

    margin: 0;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

    .mohancad-advantage {
        padding: 65px 6%;
    }

    .advantage-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 20px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .mohancad-advantage {
        padding: 60px 5%;
    }


    .advantage-heading {
        margin-bottom: 40px;
    }


    .advantage-heading span {
        font-size: 11px;

        letter-spacing: 2.5px;
    }


    .advantage-heading h2 {
        font-size: 30px;
    }


    .advantage-heading p {
        font-size: 14px;

        line-height: 1.7;
    }


    .advantage-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .advantage-card {
        min-height: auto;

        padding: 28px 22px 25px;
    }


    .advantage-card h3 {
        font-size: 18px;
    }


    .advantage-card p {
        font-size: 14px;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 400px) {

    .advantage-heading h2 {
        font-size: 26px;
    }


    .advantage-icon {
        width: 52px;

        height: 52px;

        font-size: 24px;
    }

}/* =====================================================
   INDUSTRIAL EQUIPMENT APPLICATIONS
===================================================== */

.equipment-applications {
    width: 100%;

    padding: 40px 7%;

    background: #ffffff;

    position: relative;

    overflow: hidden;
}


/* =====================================================
   BACKGROUND EFFECT
===================================================== */

.equipment-applications::before {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    background: rgba(217, 157, 0, 0.05);

    filter: blur(100px);

    left: -180px;
    bottom: 50px;

    pointer-events: none;
}


/* =====================================================
   HEADING
===================================================== */

.applications-heading {
    max-width: 850px;

    margin: 0 auto 55px;

    text-align: center;

    position: relative;

    z-index: 2;
}


.applications-heading span {
    display: inline-block;

    color: #00bfff;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 4px;

    margin-bottom: 12px;
}


.applications-heading h2 {
    color: #ffffff;

    font-family: Georgia, serif;

    font-size: 40px;

    line-height: 1.3;

    margin: 0 0 18px;
}


.applications-heading h2::after {
    content: "";

    display: block;

    width: 80px;

    height: 3px;

    background: #d99d00;

    margin: 18px auto 0;
}


.applications-heading p {
    color: #aeb7c2;

    font-size: 16px;

    line-height: 1.8;

    max-width: 720px;

    margin: 20px auto 0;
}


/* =====================================================
   GRID
===================================================== */

.applications-grid {
    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 22px;

    position: relative;

    z-index: 2;
}


/* =====================================================
   CARD
===================================================== */

.application-card {
    background: #080c10;

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 12px;

    overflow: hidden;

    position: relative;

    transition: 0.4s ease;
}


.application-card:hover {
    transform: translateY(-7px);

    border-color: rgba(0, 191, 255, 0.45);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.45),
        0 0 20px rgba(0, 191, 255, 0.06);
}


/* =====================================================
   IMAGE
===================================================== */

.application-image {
    width: 100%;

    height: 180px;

    overflow: hidden;

    position: relative;
}


.application-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
        to bottom,
        transparent 40%,
        rgba(3, 5, 7, 0.85)
    );
}


.application-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: 0.5s ease;
}


.application-card:hover .application-image img {
    transform: scale(1.08);
}


/* =====================================================
   NUMBER
===================================================== */

.application-number {
    position: absolute;

    top: 155px;

    left: 18px;

    width: 42px;

    height: 42px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #00bfff;

    color: #030507;

    font-size: 13px;

    font-weight: 800;

    z-index: 3;

    box-shadow: 0 0 15px rgba(0, 191, 255, 0.25);
}


/* =====================================================
   CONTENT
===================================================== */

.application-content {
    padding: 28px 20px 23px;
}


.application-content h3 {
    color: #ffffff;

    font-size: 18px;

    line-height: 1.4;

    margin: 0 0 12px;
}


.application-content p {
    color: #9fa9b3;

    font-size: 14px;

    line-height: 1.7;

    margin: 0;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1050px) {

    .applications-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 22px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .equipment-applications {
        padding: 65px 5%;
    }


    .applications-heading {
        margin-bottom: 40px;
    }


    .applications-heading span {
        font-size: 11px;

        letter-spacing: 2.5px;
    }


    .applications-heading h2 {
        font-size: 30px;
    }


    .applications-heading p {
        font-size: 14px;

        line-height: 1.7;
    }


    .applications-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .application-image {
        height: 210px;
    }


    .application-number {
        top: 185px;
    }

}/* =====================================================
   INDUSTRIES WE SUPPORT
===================================================== */

.industries-support {
    width: 100%;

    padding: 40px 7%;

    background: #070a0e;

    position: relative;

    overflow: hidden;
}


/* =====================================================
   BACKGROUND GLOW
===================================================== */

.industries-support::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background: rgba(0, 191, 255, 0.05);

    filter: blur(110px);

    right: -180px;
    top: 100px;

    pointer-events: none;
}


/* =====================================================
   HEADING
===================================================== */

.industries-heading {
    max-width: 850px;

    margin: 0 auto 55px;

    text-align: center;

    position: relative;

    z-index: 2;
}


.industries-heading span {
    display: inline-block;

    color: #00bfff;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 4px;

    margin-bottom: 12px;
}


.industries-heading h2 {
    color: #ffffff;

    font-family: Georgia, serif;

    font-size: 40px;

    line-height: 1.3;

    margin: 0 0 18px;
}


.industries-heading h2::after {
    content: "";

    display: block;

    width: 80px;

    height: 3px;

    background: #d99d00;

    margin: 18px auto 0;
}


.industries-heading p {
    color: #aeb7c2;

    font-size: 16px;

    line-height: 1.8;

    max-width: 720px;

    margin: 20px auto 0;
}


/* =====================================================
   GRID
===================================================== */

.industries-grid {
    max-width: 1150px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 22px;

    position: relative;

    z-index: 2;
}


/* =====================================================
   CARD
===================================================== */

.industry-card {
    background: #030507;

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 12px;

    padding: 30px 22px 25px;

    min-height: 245px;

    position: relative;

    overflow: hidden;

    transition: 0.4s ease;
}


/* Top Line */

.industry-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    height: 3px;

    background: #00bfff;

    transform: scaleX(0);

    transform-origin: left;

    transition: 0.4s ease;
}


.industry-card:hover::before {
    transform: scaleX(1);
}


/* Hover */

.industry-card:hover {
    transform: translateY(-7px);

    border-color: rgba(0, 191, 255, 0.4);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.45),
        0 0 20px rgba(0, 191, 255, 0.05);
}


/* =====================================================
   NUMBER
===================================================== */

.industry-number {
    position: absolute;

    top: 16px;
    right: 18px;

    color: rgba(255, 255, 255, 0.10);

    font-size: 26px;

    font-weight: 800;
}


/* =====================================================
   ICON
===================================================== */

.industry-icon {
    width: 55px;

    height: 55px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(0, 191, 255, 0.08);

    border: 1px solid rgba(0, 191, 255, 0.35);

    color: #00bfff;

    font-size: 25px;

    margin-bottom: 20px;

    transition: 0.4s ease;
}


.industry-card:hover .industry-icon {
    background: #00bfff;

    color: #030507;

    transform: rotate(8deg);
}


/* =====================================================
   TITLE
===================================================== */

.industry-card h3 {
    color: #ffffff;

    font-size: 18px;

    line-height: 1.4;

    margin: 0 0 12px;
}


/* =====================================================
   DESCRIPTION
===================================================== */

.industry-card p {
    color: #9fa9b3;

    font-size: 14px;

    line-height: 1.7;

    margin: 0;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1050px) {

    .industries-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 20px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .industries-support {
        padding: 65px 5%;
    }


    .industries-heading {
        margin-bottom: 40px;
    }


    .industries-heading span {
        font-size: 11px;

        letter-spacing: 2.5px;
    }


    .industries-heading h2 {
        font-size: 30px;
    }


    .industries-heading p {
        font-size: 14px;

        line-height: 1.7;
    }


    .industries-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .industry-card {
        min-height: auto;

        padding: 28px 22px 25px;
    }

}/* =====================================================
   INDUSTRIAL EQUIPMENT FAQ
===================================================== */

.equipment-faq {
    width: 100%;

    padding: 40px 7%;

    background: #ffffff;

    position: relative;

    overflow: hidden;
}


/* =====================================================
   BACKGROUND GLOW
===================================================== */

.equipment-faq::before {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    background: rgba(217, 157, 0, 0.05);

    filter: blur(110px);

    left: -180px;
    top: 150px;

    pointer-events: none;
}


/* =====================================================
   FAQ HEADING
===================================================== */

.faq-heading {
    max-width: 850px;

    margin: 0 auto 50px;

    text-align: center;

    position: relative;

    z-index: 2;
}


.faq-heading span {
    display: inline-block;

    color: #00bfff;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 4px;

    margin-bottom: 12px;
}


.faq-heading h2 {
    color: #003366;

    font-family: Georgia, serif;

    font-size: 40px;

    line-height: 1.3;

    margin: 0 0 18px;
}


.faq-heading h2::after {
    content: "";

    display: block;

    width: 80px;

    height: 3px;

    background: #d99d00;

    margin: 18px auto 0;
}


.faq-heading p {
    color: #00527a;

    font-size: 16px;

    line-height: 1.8;

    max-width: 720px;

    margin: 20px auto 0;
}


/* =====================================================
   FAQ CONTAINER
===================================================== */

.faq-container {
    max-width: 950px;

    margin: auto;

    position: relative;

    z-index: 2;
}


/* =====================================================
   FAQ ITEM
===================================================== */

.faq-item {
    background: #0066cc91;

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 10px;

    margin-bottom: 14px;

    overflow: hidden;

    transition: 0.3s ease;
}


.faq-item:hover {
    border-color: rgba(0, 191, 255, 0.35);
}


.faq-item.active {
    border-color: rgba(0, 191, 255, 0.5);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}


/* =====================================================
   QUESTION
===================================================== */

.faq-question {
    width: 100%;

    border: none;

    outline: none;

    background: transparent;

    color: #ffffff;

    padding: 22px 25px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    text-align: left;

    cursor: pointer;

    font-size: 16px;

    font-weight: 600;
}


.faq-question:hover {
    color: #00bfff;
}


/* =====================================================
   FAQ ICON
===================================================== */

.faq-icon {
    min-width: 32px;

    width: 32px;

    height: 32px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(0, 191, 255, 0.4);

    color: #00bfff;

    font-size: 22px;

    line-height: 1;

    transition: 0.3s ease;
}


/* Active Icon */

.faq-item.active .faq-icon {
    background: #00bfff;

    color: #030507;

    transform: rotate(45deg);
}


/* =====================================================
   ANSWER
===================================================== */

.faq-answer {
    max-height: 0;

    overflow: hidden;

    transition: max-height 0.4s ease;
}


.faq-answer p {
    color: #9fa9b3;

    font-size: 14px;

    line-height: 1.8;

    padding: 0 25px 22px;

    margin: 0;
}


/* Open Answer */

.faq-item.active .faq-answer {
    max-height: 300px;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

    .equipment-faq {
        padding: 70px 6%;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .equipment-faq {
        padding: 60px 5%;
    }


    .faq-heading {
        margin-bottom: 40px;
    }


    .faq-heading span {
        font-size: 11px;

        letter-spacing: 2.5px;
    }


    .faq-heading h2 {
        font-size: 29px;
    }


    .faq-heading p {
        font-size: 14px;

        line-height: 1.7;
    }


    .faq-question {
        padding: 18px 17px;

        font-size: 14px;

        gap: 12px;
    }


    .faq-icon {
        min-width: 29px;

        width: 29px;

        height: 29px;

        font-size: 19px;
    }


    .faq-answer p {
        font-size: 13px;

        padding: 0 17px 18px;

        line-height: 1.7;
    }

}/* =====================================================
   INDUSTRIAL PROJECT CTA
===================================================== */

.industrial-cta {
    width: 100%;

    padding: 20px 7%;

    background: #070a0e;

    position: relative;

    overflow: hidden;

    border-top: 1px solid rgba(255, 255, 255, 0.06);
}


/* =====================================================
   BACKGROUND EFFECTS
===================================================== */

.industrial-cta::before {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    background: rgba(0, 191, 255, 0.06);

    filter: blur(120px);

    left: -180px;

    top: 20px;

    pointer-events: none;
}


.industrial-cta::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    border-radius: 50%;

    background: rgba(217, 157, 0, 0.05);

    filter: blur(100px);

    right: -120px;

    bottom: -100px;

    pointer-events: none;
}


/* =====================================================
   CONTENT
===================================================== */

.cta-content {
    max-width: 850px;

    margin: auto;

    text-align: center;

    position: relative;

    z-index: 2;
}


/* Small Heading */

.cta-content span {
    display: inline-block;

    color: #00bfff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 4px;

    margin-bottom: 15px;
}


/* Main Heading */

.cta-content h2 {
    color: #ffffff;

    font-family: Georgia, serif;

    font-size: 40px;

    line-height: 1.3;

    margin: 0 0 12px;
}


/* Gold Line */

.cta-content h2::after {
    content: "";

    display: block;

    width: 80px;

    height: 3px;

    background: #d99d00;

    margin: 18px auto 20px;
}


/* Sub Heading */

.cta-content h3 {
    color: #00bfff;

    font-size: 24px;

    font-weight: 600;

    margin: 0 0 18px;
}


/* Description */

.cta-content p {
    max-width: 720px;

    margin: 0 auto 30px;

    color: #aeb7c2;

    font-size: 16px;

    line-height: 1.8;
}


/* =====================================================
   CTA BUTTON
===================================================== */

.cta-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 14px 28px;

    background: #00bfff;

    color: #030507;

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 1px;

    border-radius: 5px;

    border: 1px solid #00bfff;

    transition: 0.35s ease;
}


.cta-button span {
    color: #030507;

    font-size: 20px;

    line-height: 1;

    margin: 0;

    letter-spacing: 0;
}


.cta-button:hover {
    background: transparent;

    color: #00bfff;

    transform: translateY(-4px);

    box-shadow:
        0 10px 25px rgba(0, 191, 255, 0.15);
}


.cta-button:hover span {
    color: #00bfff;

    transform: translateX(4px);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

    .industrial-cta {
        padding: 75px 6%;
    }

    .cta-content h2 {
        font-size: 35px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .industrial-cta {
        padding: 65px 5%;
    }


    .cta-content span {
        font-size: 10px;

        letter-spacing: 2.5px;
    }


    .cta-content h2 {
        font-size: 29px;
    }


    .cta-content h3 {
        font-size: 20px;
    }


    .cta-content p {
        font-size: 14px;

        line-height: 1.7;

        margin-bottom: 25px;
    }


    .cta-button {
        padding: 13px 22px;

        font-size: 13px;
    }

}
/*================================================================================================
automation page 
======================================================================================================*/
/* =====================================================
   AUTOMATION SYSTEM DESIGN HERO
===================================================== */

.automation-hero {
    width: 100%;

    min-height: 550px;

    background-image:
        url("images/123.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;
}


/* =====================================================
   DARK OVERLAY
===================================================== */

.automation-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3, 5, 7, 0.92),
            rgba(3, 5, 7, 0.65),
            rgba(3, 5, 7, 0.35)
        );

    z-index: 1;
}


/* =====================================================
   HERO CONTENT
===================================================== */

.automation-hero-content {
    width: 90%;

    max-width: 1000px;

    text-align: center;

    position: relative;

    z-index: 2;

    padding-top: 80px;
}


/* Small Label */

.automation-hero-content span {
    display: inline-block;

    color: #00bfff;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 4px;

    margin-bottom: 18px;
}


/* Main Heading */

.automation-hero-content h1 {
    color: #ffffff;

    font-family: Georgia, serif;

    font-size: 58px;

    line-height: 1.15;

    margin: 0 0 22px;

    text-transform: uppercase;

    text-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}


/* Description */

.automation-hero-content p {
    max-width: 760px;

    margin: 0 auto 32px;

    color: #d2d8de;

    font-size: 17px;

    line-height: 1.8;
}


/* =====================================================
   HERO BUTTON
===================================================== */

.automation-hero-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 14px 28px;

    background: #00bfff;

    border: 1px solid #00bfff;

    border-radius: 5px;

    color: #030507;

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 1px;

    transition: 0.35s ease;
}


.automation-hero-btn b {
    font-size: 20px;

    line-height: 1;

    transition: 0.3s ease;
}


.automation-hero-btn:hover {
    background: transparent;

    color: #00bfff;

    transform: translateY(-4px);

    box-shadow:
        0 10px 30px rgba(0, 191, 255, 0.15);
}


.automation-hero-btn:hover b {
    transform: translateX(5px);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

    .automation-hero {
        min-height: 580px;
    }

    .automation-hero-content h1 {
        font-size: 45px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .automation-hero {
        min-height: 560px;

        background-position: center;
    }


    .automation-hero-content {
        width: 92%;

        padding-top: 60px;
    }


    .automation-hero-content span {
        font-size: 10px;

        letter-spacing: 2.5px;
    }


    .automation-hero-content h1 {
        font-size: 32px;

        line-height: 1.2;
    }


    .automation-hero-content p {
        font-size: 14px;

        line-height: 1.7;
    }


    .automation-hero-btn {
        padding: 13px 22px;

        font-size: 13px;
    }

}/* =====================================================
   MECHANICAL SOLUTIONS SECTION
===================================================== */

.mech-solutions {
    width: 100%;
    padding: 90px 7%;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}


/* =====================================================
   BACKGROUND DECORATION
===================================================== */

.mech-solutions::before {
    content: "";
    position: absolute;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    background: rgba(0, 191, 255, 0.05);

    filter: blur(110px);

    top: -180px;
    right: -160px;

    pointer-events: none;
}


.mech-solutions::after {
    content: "";
    position: absolute;

    width: 350px;
    height: 350px;

    border-radius: 50%;

    background: rgba(217, 157, 0, 0.04);

    filter: blur(100px);

    bottom: -170px;
    left: -150px;

    pointer-events: none;
}


/* =====================================================
   SECTION HEADING
===================================================== */

.solutions-intro {
    max-width: 850px;
    margin: 0 auto 55px;
    text-align: center;

    position: relative;
    z-index: 2;
}


.solutions-intro span {
    display: inline-block;

    color: #00a8df;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 4px;

    margin-bottom: 12px;
}


.solutions-intro h2 {
    color: #111827;

    font-family: Georgia, serif;

    font-size: 40px;
    line-height: 1.3;

    margin: 0 0 18px;
}


.solutions-intro h2::after {
    content: "";

    display: block;

    width: 80px;
    height: 3px;

    background: #d99d00;

    margin: 18px auto 0;
}


.solutions-intro p {
    max-width: 720px;

    margin: auto;

    color: #68727d;

    font-size: 15px;

    line-height: 1.8;
}


/* =====================================================
   SOLUTIONS GRID - 4 × 1
===================================================== */

.solutions-track {
    max-width: 1250px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 18px;

    position: relative;

    z-index: 2;
}


/* =====================================================
   SOLUTION TILE
===================================================== */

.solution-tile {
    min-height: 390px;

    position: relative;

    display: flex;

    align-items: flex-end;

    overflow: hidden;

    border-radius: 15px;

    background-size: cover;
    background-position: center;

    border: 1px solid rgba(0, 0, 0, 0.10);

    text-decoration: none;

    color: inherit;

    cursor: pointer;

    transition: 0.5s ease;
}


/* =====================================================
   IMAGE ZOOM LAYER
===================================================== */

.solution-tile::before {
    content: "";

    position: absolute;

    inset: 0;

    background-image: inherit;

    background-size: cover;
    background-position: center;

    transition: transform 0.7s ease;

    z-index: 0;
}


.solution-tile:hover::before {
    transform: scale(1.10);
}


/* =====================================================
   IMAGE OVERLAY
===================================================== */

.tile-shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(3, 5, 7, 0.97) 0%,
            rgba(3, 5, 7, 0.76) 40%,
            rgba(3, 5, 7, 0.30) 72%,
            rgba(3, 5, 7, 0.08) 100%
        );

    z-index: 1;

    transition: 0.5s ease;
}


.solution-tile:hover .tile-shade {
    background:
        linear-gradient(
            to top,
            rgba(3, 5, 7, 0.98),
            rgba(0, 35, 48, 0.78),
            rgba(3, 5, 7, 0.22)
        );
}


/* =====================================================
   TOP BLUE LINE
===================================================== */

.solution-tile::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: #00bfff;

    transform: scaleX(0);

    transform-origin: left;

    transition: transform 0.5s ease;

    z-index: 4;
}


.solution-tile:hover::after {
    transform: scaleX(1);
}


/* =====================================================
   NUMBER CIRCLE
===================================================== */

.tile-index {
    position: absolute;

    top: 18px;
    right: 18px;

    width: 46px;
    height: 46px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    background: rgba(3, 5, 7, 0.55);

    border: 1px solid rgba(0, 191, 255, 0.65);

    backdrop-filter: blur(6px);

    color: #ffffff;

    font-size: 12px;
    font-weight: 800;

    z-index: 5;

    transition: 0.4s ease;
}


.solution-tile:hover .tile-index {
    background: #00bfff;

    color: #030507;

    border-color: #00bfff;

    transform: rotate(10deg) scale(1.08);
}


/* =====================================================
   TILE DETAILS
===================================================== */

.tile-details {
    width: 100%;

    padding: 25px 22px;

    position: relative;

    z-index: 5;

    transform: translateY(6px);

    transition: 0.4s ease;
}


.solution-tile:hover .tile-details {
    transform: translateY(0);
}


/* =====================================================
   TILE TITLE
===================================================== */

.tile-details h3 {
    color: #ffffff;

    font-size: 20px;

    line-height: 1.35;

    margin: 0 0 11px;

    transition: 0.3s ease;
}


.solution-tile:hover .tile-details h3 {
    color: #00bfff;
}


/* =====================================================
   TILE DESCRIPTION
===================================================== */

.tile-details p {
    color: #c3ccd4;

    font-size: 13px;

    line-height: 1.65;

    margin: 0;

    max-width: 285px;
}


/* =====================================================
   GOLD DETAIL LINE
===================================================== */

.tile-details::before {
    content: "";

    position: absolute;

    left: 22px;

    bottom: -5px;

    width: 35px;
    height: 2px;

    background: #d99d00;

    transition: 0.4s ease;
}


.solution-tile:hover .tile-details::before {
    width: 70px;

    background: #00bfff;
}


/* =====================================================
   TILE HOVER EFFECT
===================================================== */

.solution-tile:hover {
    transform: translateY(-9px);

    border-color: rgba(0, 191, 255, 0.45);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.20),
        0 0 25px rgba(0, 191, 255, 0.08);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1050px) {

    .solutions-track {
        grid-template-columns: repeat(2, 1fr);

        gap: 22px;
    }


    .solution-tile {
        min-height: 380px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .mech-solutions {
        padding: 65px 5%;
    }


    .solutions-intro {
        margin-bottom: 45px;
    }


    .solutions-intro span {
        font-size: 10px;

        letter-spacing: 2.5px;
    }


    .solutions-intro h2 {
        font-size: 30px;
    }


    .solutions-intro p {
        font-size: 14px;

        line-height: 1.7;
    }


    .solutions-track {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .solution-tile {
        min-height: 360px;

        border-radius: 13px;
    }


    .tile-details {
        padding: 23px 20px;
    }


    .tile-details h3 {
        font-size: 19px;
    }


    .tile-details p {
        font-size: 13px;
    }

}
/* =====================================================
   AUTOMATION DESIGN SOLUTIONS
===================================================== */

.automation-solutions {
    width: 100%;

    padding: 40px 7%;

    background: #030507;

    position: relative;

    overflow: hidden;
}


/* =====================================================
   BACKGROUND GLOW
===================================================== */

.automation-solutions::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background: rgba(0, 191, 255, 0.05);

    filter: blur(110px);

    right: -180px;
    top: 100px;

    pointer-events: none;
}


/* =====================================================
   HEADING
===================================================== */

.solutions-heading {
    max-width: 850px;

    margin: 0 auto 55px;

    text-align: center;

    position: relative;

    z-index: 2;
}


.solutions-heading span {
    display: inline-block;

    color: #00bfff;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 4px;

    margin-bottom: 12px;
}


.solutions-heading h2 {
    color: #ffffff;

    font-family: Georgia, serif;

    font-size: 40px;

    line-height: 1.3;

    margin: 0 0 18px;
}


.solutions-heading h2::after {
    content: "";

    display: block;

    width: 80px;

    height: 3px;

    background: #d99d00;

    margin: 18px auto 0;
}


.solutions-heading p {
    color: #aeb7c2;

    font-size: 16px;

    line-height: 1.8;

    max-width: 720px;

    margin: 20px auto 0;
}


/* =====================================================
   GRID
===================================================== */

.solutions-grid {
    max-width: 1150px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 22px;

    position: relative;

    z-index: 2;
}


/* =====================================================
   CARD
===================================================== */

.solution-card {
    background: #080c10;

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 12px;

    padding: 32px 23px 28px;

    min-height: 260px;

    position: relative;

    overflow: hidden;

    transition: 0.4s ease;
}


/* Top Line */

.solution-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    height: 3px;

    background: #00bfff;

    transform: scaleX(0);

    transform-origin: left;

    transition: 0.4s ease;
}


.solution-card:hover::before {
    transform: scaleX(1);
}


/* Hover */

.solution-card:hover {
    transform: translateY(-7px);

    border-color: rgba(0, 191, 255, 0.4);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.45),
        0 0 20px rgba(0, 191, 255, 0.05);
}


/* =====================================================
   NUMBER
===================================================== */

.solution-number {
    position: absolute;

    top: 17px;
    right: 18px;

    color: rgba(255, 255, 255, 0.10);

    font-size: 27px;

    font-weight: 800;
}


/* =====================================================
   ICON
===================================================== */

.solution-icon {
    width: 58px;

    height: 58px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(0, 191, 255, 0.08);

    border: 1px solid rgba(0, 191, 255, 0.35);

    color: #00bfff;

    font-size: 26px;

    margin-bottom: 20px;

    transition: 0.4s ease;
}


.solution-card:hover .solution-icon {
    background: #00bfff;

    color: #030507;

    transform: rotate(8deg);
}


/* =====================================================
   TITLE
===================================================== */

.solution-card h3 {
    color: #ffffff;

    font-size: 18px;

    line-height: 1.4;

    margin: 0 0 12px;
}


/* =====================================================
   DESCRIPTION
===================================================== */

.solution-card p {
    color: #9fa9b3;

    font-size: 14px;

    line-height: 1.7;

    margin: 0;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1050px) {

    .solutions-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 20px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .automation-solutions {
        padding: 65px 5%;
    }


    .solutions-heading {
        margin-bottom: 40px;
    }


    .solutions-heading span {
        font-size: 11px;

        letter-spacing: 2.5px;
    }


    .solutions-heading h2 {
        font-size: 30px;
    }


    .solutions-heading p {
        font-size: 14px;

        line-height: 1.7;
    }


    .solutions-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .solution-card {
        min-height: auto;

        padding: 28px 22px 25px;
    }


    .solution-card h3 {
        font-size: 18px;
    }

}/* =====================================================
   AUTOMATION WORKFLOW — LAYERED STYLE
===================================================== */

.automation-workflow {
    width: 100%;

    padding: 40px 7%;

    background: #ffffff;

    position: relative;

    overflow: hidden;
}


/* =====================================================
   BACKGROUND LAYERS
===================================================== */

.workflow-bg-layer {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.layer-one {
    width: 500px;
    height: 500px;

    background: rgba(0, 191, 255, 0.045);

    filter: blur(80px);

    top: -180px;
    right: -150px;
}


.layer-two {
    width: 400px;
    height: 400px;

    background: rgba(217, 157, 0, 0.04);

    filter: blur(90px);

    bottom: -150px;
    left: -150px;
}


/* =====================================================
   HEADING
===================================================== */

.workflow-heading {
    max-width: 850px;

    margin: 0 auto 70px;

    text-align: center;

    position: relative;

    z-index: 3;
}


.workflow-heading span {
    display: inline-block;

    color: #00a8df;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 4px;

    margin-bottom: 13px;
}


.workflow-heading h2 {
    color: #101820;

    font-family: Georgia, serif;

    font-size: 42px;

    line-height: 1.25;

    margin: 0;
}


.workflow-heading h2::after {
    content: "";

    display: block;

    width: 90px;

    height: 3px;

    background: #d99d00;

    margin: 20px auto 20px;
}


.workflow-heading p {
    max-width: 730px;

    margin: auto;

    color: #68727d;

    font-size: 16px;

    line-height: 1.8;
}


/* =====================================================
   TIMELINE
===================================================== */

.workflow-timeline {
    max-width: 1180px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 70px 25px;

    position: relative;

    z-index: 2;
}


/* =====================================================
   CONNECTING LINE
===================================================== */

.workflow-timeline::before {
    content: "";

    position: absolute;

    top: 38px;

    left: 7%;

    right: 7%;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #cfd8df,
        #00bfff,
        #cfd8df,
        transparent
    );

    z-index: -1;
}


/* =====================================================
   CARD
===================================================== */

.workflow-card {
    min-height: 255px;

    background: rgba(255, 255, 255, 0.92);

    border: 1px solid #e2e7eb;

    border-radius: 16px;

    padding: 62px 24px 25px;

    position: relative;

    box-shadow:
        0 10px 30px rgba(20, 30, 40, 0.07);

    transition: 0.4s ease;
}


/* Layer behind card */

.workflow-card::before {
    content: "";

    position: absolute;

    inset: 7px;

    border-radius: 12px;

    border: 1px solid rgba(0, 191, 255, 0.07);

    pointer-events: none;
}


/* Top Accent */

.workflow-card::after {
    content: "";

    position: absolute;

    top: 0;
    left: 25px;
    right: 25px;

    height: 3px;

    background: #00bfff;

    border-radius: 0 0 10px 10px;

    transform: scaleX(0);

    transform-origin: center;

    transition: 0.4s ease;
}


.workflow-card:hover::after {
    transform: scaleX(1);
}


/* =====================================================
   HOVER
===================================================== */

.workflow-card:hover {
    transform: translateY(-10px);

    border-color: rgba(0, 191, 255, 0.35);

    box-shadow:
        0 20px 45px rgba(20, 30, 40, 0.12),
        0 0 25px rgba(0, 191, 255, 0.05);
}


/* =====================================================
   NUMBER
===================================================== */

.workflow-number {
    position: absolute;

    top: -22px;
    left: 50%;

    transform: translateX(-50%);

    width: 68px;
    height: 68px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #00bfff;

    border: 6px solid #ffffff;

    outline: 2px solid rgba(0, 191, 255, 0.35);

    color: #071016;

    font-size: 15px;

    font-weight: 900;

    z-index: 5;

    transition: 0.4s ease;
}


.workflow-card:hover .workflow-number {
    background: #d99d00;

    outline-color: rgba(217, 157, 0, 0.45);

    transform:
        translateX(-50%)
        scale(1.1)
        rotate(8deg);
}


/* =====================================================
   ICON
===================================================== */

.workflow-icon {
    width: 48px;
    height: 48px;

    border-radius: 12px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #f1f8fb;

    border: 1px solid #d9edf4;

    color: #00a8df;

    font-size: 22px;

    margin-bottom: 18px;

    transition: 0.4s ease;
}


.workflow-card:hover .workflow-icon {
    background: #00bfff;

    color: #ffffff;

    transform: rotate(-5deg);
}


/* =====================================================
   STEP LABEL
===================================================== */

.workflow-info small {
    color: #d99d00;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}


/* =====================================================
   TITLE
===================================================== */

.workflow-info h3 {
    color: #17202a;

    font-size: 18px;

    line-height: 1.4;

    margin: 7px 0 12px;
}


/* =====================================================
   DESCRIPTION
===================================================== */

.workflow-info p {
    color: #68727d;

    font-size: 14px;

    line-height: 1.7;

    margin: 0;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1050px) {

    .workflow-timeline {
        grid-template-columns: repeat(2, 1fr);

        gap: 65px 25px;
    }


    .workflow-timeline::before {
        display: none;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .automation-workflow {
        padding: 65px 5%;
    }


    .workflow-heading {
        margin-bottom: 55px;
    }


    .workflow-heading span {
        font-size: 10px;

        letter-spacing: 2.5px;
    }


    .workflow-heading h2 {
        font-size: 30px;
    }


    .workflow-heading p {
        font-size: 14px;

        line-height: 1.7;
    }


    .workflow-timeline {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .workflow-card {
        min-height: auto;

        padding: 60px 22px 25px;
    }


    .workflow-number {
        width: 60px;
        height: 60px;
    }


    .workflow-info h3 {
        font-size: 17px;
    }


    .workflow-info p {
        font-size: 13px;
    }

}
/* =====================================================
   WHY MOHANCAD FOR AUTOMATION
===================================================== */

.automation-edge {
    width: 100%;

    padding: 90px 7%;

    background: #05080c;

    position: relative;

    overflow: hidden;
}


/* =====================================================
   BACKGROUND GLOW
===================================================== */

.automation-edge::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background: rgba(0, 191, 255, 0.055);

    filter: blur(120px);

    top: -180px;
    left: -180px;
}


.automation-edge::after {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    background: rgba(217, 157, 0, 0.045);

    filter: blur(100px);

    right: -150px;
    bottom: -150px;
}


/* =====================================================
   HEADING
===================================================== */

.edge-heading {
    max-width: 850px;

    margin: 0 auto 70px;

    text-align: center;

    position: relative;

    z-index: 2;
}


.edge-heading span {
    color: #00bfff;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 4px;
}


.edge-heading h2 {
    color: #ffffff;

    font-family: Georgia, serif;

    font-size: 40px;

    margin: 15px 0 18px;
}


.edge-heading h2::after {
    content: "";

    display: block;

    width: 85px;

    height: 3px;

    background: #d99d00;

    margin: 18px auto 0;
}


.edge-heading p {
    color: #9fa9b3;

    max-width: 720px;

    margin: auto;

    font-size: 16px;

    line-height: 1.8;
}


/* =====================================================
   GRID
===================================================== */

.edge-layout {
    max-width: 1100px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 60px 35px;

    position: relative;

    z-index: 2;
}


/* =====================================================
   CARD
===================================================== */

.edge-card {
    text-align: center;

    padding: 15px 15px 10px;

    position: relative;

    transition: 0.4s ease;
}


.edge-card:hover {
    transform: translateY(-8px);
}


/* =====================================================
   CIRCLE AREA
===================================================== */

.edge-orbit {
    width: 145px;

    height: 145px;

    margin: 0 auto 28px;

    border-radius: 50%;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        radial-gradient(
            circle,
            #0b141b 55%,
            #071017 56%,
            #071017 70%,
            transparent 71%
        );

    border: 1px solid rgba(0, 191, 255, 0.25);

    box-shadow:
        0 0 0 8px rgba(0, 191, 255, 0.025),
        0 0 35px rgba(0, 191, 255, 0.08);

    transition: 0.5s ease;
}


/* Orbit Ring */

.edge-orbit::before {
    content: "";

    position: absolute;

    inset: -8px;

    border-radius: 50%;

    border: 1px dashed rgba(0, 191, 255, 0.3);

    transition: 0.6s ease;
}


/* Small Gold Dot */

.edge-orbit::after {
    content: "";

    position: absolute;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #d99d00;

    top: 4px;
    right: 25px;

    box-shadow:
        0 0 12px rgba(217, 157, 0, 0.6);

    transition: 0.5s ease;
}


/* Hover Orbit */

.edge-card:hover .edge-orbit {
    border-color: #00bfff;

    box-shadow:
        0 0 0 10px rgba(0, 191, 255, 0.035),
        0 0 45px rgba(0, 191, 255, 0.16);

    transform: scale(1.05);
}


.edge-card:hover .edge-orbit::before {
    transform: rotate(180deg);

    border-color: rgba(217, 157, 0, 0.5);
}


.edge-card:hover .edge-orbit::after {
    background: #00bfff;

    transform: scale(1.3);
}


/* =====================================================
   NUMBER
===================================================== */

.edge-number {
    position: absolute;

    top: 16px;
    left: 20px;

    color: rgba(255, 255, 255, 0.25);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1px;
}


/* =====================================================
   ICON
===================================================== */

.edge-icon {
    width: 62px;

    height: 62px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(0, 191, 255, 0.08);

    border: 1px solid rgba(0, 191, 255, 0.35);

    color: #00bfff;

    font-size: 27px;

    transition: 0.4s ease;
}


.edge-card:hover .edge-icon {
    background: #00bfff;

    color: #030507;

    transform: rotate(10deg);
}


/* =====================================================
   TEXT
===================================================== */

.edge-text {
    max-width: 300px;

    margin: auto;
}


.edge-text h3 {
    color: #ffffff;

    font-size: 19px;

    line-height: 1.4;

    margin: 0 0 12px;

    transition: 0.3s ease;
}


.edge-card:hover .edge-text h3 {
    color: #00bfff;
}


.edge-text p {
    color: #8f9aa5;

    font-size: 14px;

    line-height: 1.75;

    margin: 0;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 950px) {

    .edge-layout {
        grid-template-columns: repeat(2, 1fr);

        gap: 55px 25px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .automation-edge {
        padding: 65px 5%;
    }


    .edge-heading {
        margin-bottom: 55px;
    }


    .edge-heading span {
        font-size: 10px;

        letter-spacing: 2.5px;
    }


    .edge-heading h2 {
        font-size: 30px;
    }


    .edge-heading p {
        font-size: 14px;

        line-height: 1.7;
    }


    .edge-layout {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .edge-orbit {
        width: 135px;

        height: 135px;
    }


    .edge-text h3 {
        font-size: 18px;
    }


    .edge-text p {
        font-size: 13px;
    }

}
/* =====================================================
   AUTOMATION CTA
===================================================== */

.automation-cta {
    width: 100%;

    padding: 90px 7%;

    background: #05080c;

    position: relative;

    overflow: hidden;
}


/* =====================================================
   GLOW
===================================================== */

.cta-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(100px);
}


.cta-glow-left {
    width: 400px;
    height: 400px;

    background: rgba(0, 191, 255, 0.07);

    left: -180px;
    top: 20px;
}


.cta-glow-right {
    width: 350px;
    height: 350px;

    background: rgba(217, 157, 0, 0.055);

    right: -140px;
    bottom: -100px;
}


/* =====================================================
   FRAME
===================================================== */

.cta-frame {
    max-width: 1050px;

    margin: auto;

    padding: 70px 50px;

    text-align: center;

    position: relative;

    border: 1px solid rgba(0, 191, 255, 0.22);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.035),
            rgba(255,255,255,0.01)
        );

    border-radius: 22px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.35);
}


/* Inner Layer */

.cta-frame::before {
    content: "";

    position: absolute;

    inset: 8px;

    border: 1px solid rgba(255, 255, 255, 0.05);

    border-radius: 16px;

    pointer-events: none;
}


/* Top Accent */

.cta-frame::after {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 120px;
    height: 3px;

    background: #00bfff;

    border-radius: 0 0 10px 10px;
}


/* =====================================================
   LABEL
===================================================== */

.cta-label {
    color: #00bfff;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 4px;

    margin-bottom: 15px;
}


/* =====================================================
   HEADING
===================================================== */

.cta-frame h2 {
    color: #ffffff;

    font-family: Georgia, serif;

    font-size: 42px;

    line-height: 1.3;

    margin: 0 0 20px;
}


.cta-frame h2::after {
    content: "";

    display: block;

    width: 70px;

    height: 3px;

    background: #d99d00;

    margin: 18px auto 0;
}


/* =====================================================
   DESCRIPTION
===================================================== */

.cta-frame p {
    max-width: 760px;

    margin: 0 auto 32px;

    color: #aeb7c2;

    font-size: 16px;

    line-height: 1.8;
}


/* =====================================================
   BUTTONS
===================================================== */

.cta-actions {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 15px;

    position: relative;

    z-index: 2;
}


/* Main Button */

.cta-main-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 14px 27px;

    background: #00bfff;

    color: #030507;

    border: 1px solid #00bfff;

    border-radius: 5px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1px;

    transition: 0.35s ease;
}


.cta-main-btn span {
    font-size: 20px;

    line-height: 1;

    transition: 0.3s ease;
}


.cta-main-btn:hover {
    background: transparent;

    color: #00bfff;

    transform: translateY(-4px);

    box-shadow:
        0 10px 30px rgba(0, 191, 255, 0.15);
}


.cta-main-btn:hover span {
    transform: translateX(5px);
}


/* Outline Button */

.cta-outline-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 27px;

    background: transparent;

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.25);

    border-radius: 5px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;

    transition: 0.35s ease;
}


.cta-outline-btn:hover {
    color: #d99d00;

    border-color: #d99d00;

    transform: translateY(-4px);
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .automation-cta {
        padding: 65px 5%;
    }


    .cta-frame {
        padding: 55px 22px;

        border-radius: 17px;
    }


    .cta-label {
        font-size: 10px;

        letter-spacing: 2.5px;
    }


    .cta-frame h2 {
        font-size: 30px;
    }


    .cta-frame p {
        font-size: 14px;

        line-height: 1.7;
    }


    .cta-actions {
        flex-direction: column;

        width: 100%;
    }


    .cta-main-btn,
    .cta-outline-btn {
        width: 100%;

        max-width: 260px;
    }

}