/* =========================================================
   MATSOGO TAU PROJECTS
   MAIN WEBSITE STYLESHEET
   ========================================================= */


/* ================= ROOT VARIABLES ================= */

:root {

    --gold: #d4af37;
    --gold-light: #f3d675;
    --gold-dark: #a88920;

    --black: #050505;
    --black-2: #080808;
    --black-3: #0d0d0d;

    --dark: #111111;
    --dark-2: #161616;
    --dark-3: #1c1c1c;

    --border: #292929;
    --border-light: #353535;

    --white: #ffffff;

    --text: #dddddd;
    --text-light: #aaaaaa;
    --text-muted: #777777;

    --success: #36c275;
    --danger: #e05252;

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

    --container: 1200px;

    --transition: all 0.3s ease;
}


/* ================= RESET ================= */

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


html {
    scroll-behavior: smooth;
}


body {
    font-family: "Poppins", sans-serif;
    background: var(--black);
    color: var(--text);
    line-height: 1.7;
    overflow-x: hidden;
}


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


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


button,
input,
textarea,
select {
    font-family: inherit;
}


button {
    cursor: pointer;
}


.container {
    width: min(90%, var(--container));
    margin: 0 auto;
}


/* ================= HEADER ================= */

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

    background: rgba(5, 5, 5, 0.88);

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

    border-bottom: 1px solid transparent;

    transition: var(--transition);
}


.header.scrolled {
    background: rgba(5, 5, 5, 0.97);
    border-bottom-color: var(--border);
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.35);
}


.nav-container {
    min-height: 82px;

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


/* ================= LOGO ================= */

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


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


.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}


.logo-text strong {
    color: var(--gold);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 1px;
}


.logo-text span {
    color: var(--white);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
}


/* ================= NAVIGATION ================= */

.nav-links {
    display: flex;
    align-items: center;
    gap: 5px;
}


.nav-links a {
    position: relative;

    padding: 10px 13px;

    color: var(--text-light);

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

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

    transition: var(--transition);
}


.nav-links a i {
    font-size: 12px;
}


.nav-links a::after {
    content: "";

    position: absolute;

    left: 13px;
    right: 13px;
    bottom: 3px;

    height: 2px;

    background: var(--gold);

    transform: scaleX(0);
    transform-origin: center;

    transition: var(--transition);
}


.nav-links a:hover,
.nav-links a.active {
    color: var(--gold-light);
}


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


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

.menu-btn {
    display: none;

    border: none;
    background: transparent;

    color: var(--white);

    font-size: 25px;
}


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

.hero {
    position: relative;

    min-height: 100vh;

    display: flex;
    align-items: center;

    background:
        radial-gradient(circle at 85% 30%, rgba(212, 175, 55, 0.13), transparent 25%),
        radial-gradient(circle at 15% 75%, rgba(212, 175, 55, 0.08), transparent 30%),
        linear-gradient(135deg, #050505, #111111 50%, #050505);

    overflow: hidden;
}


/* ================= TECHNOLOGY PARTNERS ================= */

.partners-section {
    padding: 28px 0 32px;
    overflow: hidden;
    background: linear-gradient(90deg, #0d0d0d, #171717 50%, #0d0d0d);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}


.partners-heading {
    margin-bottom: 18px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-align: center;
}


.partners-marquee {
    width: 100%;
    overflow: hidden;
}


.partners-track,
.partners-group {
    display: flex;
    align-items: center;
}


.partners-track {
    width: max-content;
    animation: partners-slide-right 28s linear infinite;
}


.partners-group {
    flex: 0 0 auto;
    justify-content: space-around;
    gap: clamp(48px, 9vw, 140px);
    min-width: 100vw;
    padding: 0 clamp(28px, 7vw, 100px);
}


.partner-logo {
    flex: 0 0 auto;
    width: 150px;
    height: 42px;
    object-fit: contain;
}


.partner-hp {
    width: 48px;
    height: 48px;
}


.partner-hpe {
    width: 120px;
    filter: brightness(0) invert(1);
}


.partner-hikvision {
    width: 170px;
}


.partner-tplink {
    width: 48px;
}


@keyframes partners-slide-right {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}


.partners-marquee:hover .partners-track {
    animation-play-state: paused;
}


@media (prefers-reduced-motion: reduce) {
    .partners-track {
        animation: none;
        transform: none;
    }
}


.hero::before {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    border: 1px solid rgba(212, 175, 55, 0.1);

    border-radius: 50%;

    right: -150px;
    top: 15%;

    pointer-events: none;
}


.hero::after {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    border: 1px solid rgba(212, 175, 55, 0.07);

    border-radius: 50%;

    left: -100px;
    bottom: 5%;

    pointer-events: none;
}


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

    background:
        linear-gradient(
            90deg,
            rgba(5, 5, 5, 0.95),
            rgba(5, 5, 5, 0.72),
            rgba(5, 5, 5, 0.42)
        );

    z-index: 1;
}


.hero-content {
    position: relative;
    z-index: 2;

    padding-top: 100px;
    padding-bottom: 70px;
}


.section-tag {
    color: var(--gold);

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

    letter-spacing: 2px;

    text-transform: uppercase;

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

    margin-bottom: 18px;
}


.hero h1 {
    max-width: 850px;

    color: var(--white);

    font-size: clamp(42px, 6vw, 72px);

    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -2px;

    margin-bottom: 25px;
}


.hero h1 span {
    color: var(--gold);
}


.hero p {
    max-width: 700px;

    color: var(--text-light);

    font-size: 16px;

    line-height: 1.9;

    margin-bottom: 32px;
}


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

.page-hero {
    min-height: 65vh;
}


.page-hero .hero-content {
    padding-top: 150px;
    padding-bottom: 80px;
}


.page-hero h1 {
    font-size: clamp(40px, 5vw, 62px);
}


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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 52px;

    padding: 13px 24px;

    border-radius: 4px;

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

    transition: var(--transition);
}


.btn-primary {
    background: var(--gold);
    color: #050505;

    border: 1px solid var(--gold);
}


.btn-primary:hover {
    background: var(--gold-light);
    border-color: var(--gold-light);

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.2);
}


.btn-outline {
    color: var(--white);

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

    background: rgba(255, 255, 255, 0.02);
}


.btn-outline:hover {
    border-color: var(--gold);
    color: var(--gold);

    transform: translateY(-2px);
}


.hero-buttons,
.cta-buttons {
    display: flex;
    align-items: center;
    gap: 12px;

    flex-wrap: wrap;
}


/* ================= SCROLL DOWN ================= */

.scroll-down {
    position: absolute;

    bottom: 25px;
    left: 50%;

    transform: translateX(-50%);

    width: 42px;
    height: 42px;

    border: 1px solid var(--border-light);
    border-radius: 50%;

    color: var(--gold);

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

    z-index: 3;

    animation: bounce 2s infinite;
}


@keyframes bounce {

    0%,
    100% {
        transform: translate(-50%, 0);
    }

    50% {
        transform: translate(-50%, 8px);
    }
}


/* =========================================================
   ABOUT HERO IMAGE SECTION
   ========================================================= */

.about-preview {
    padding: 0;
    background: var(--black);
}


/* Main image container */

.about-hero {
    position: relative;

    width: 100%;

    min-height: 600px;

    display: flex;
    align-items: center;

    overflow: hidden;

    border: none;
    border-radius: 0;
}


/* Background image */

.about-hero-bg {
    position: absolute;

    inset: 0;

    z-index: 0;

    background-image: url("../images/about-company.jpeg");

    background-size: cover;
    background-position: center;

    background-repeat: no-repeat;

    transform: scale(1);

    transition: transform 8s ease;
}


/* Slight image movement */

.about-hero:hover .about-hero-bg {
    transform: scale(1.04);
}


/* About Us uses its own image */

.about-us-company .about-hero-bg {
    background-image: url("../images/company.jpeg");
}


/* Dark overlay */

.about-hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(5, 5, 5, 0.96) 0%,
            rgba(5, 5, 5, 0.88) 28%,
            rgba(5, 5, 5, 0.68) 55%,
            rgba(5, 5, 5, 0.35) 100%
        );
}


/* Text above image */

.about-hero-content {
    position: relative;

    z-index: 2;

    width: min(90%, var(--container));

    margin: 0 auto;

    padding: 100px 0;

    text-align: left;

    color: var(--white);
}


/* Decorative gold line */

.about-hero-content::before {
    content: "";

    display: block;

    width: 70px;
    height: 3px;

    background: var(--gold);

    margin-bottom: 25px;
}


.about-hero-content .section-tag {
    margin-bottom: 15px;
}


.about-hero-content h2 {
    max-width: 720px;

    font-size: clamp(38px, 5vw, 62px);

    line-height: 1.12;

    font-weight: 800;

    letter-spacing: -1.5px;

    margin-bottom: 25px;
}


.about-hero-content h2 span {
    color: var(--gold);
}


.about-hero-content p {
    max-width: 680px;

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

    font-size: 15px;

    line-height: 1.9;

    margin-bottom: 15px;
}


.about-hero-content .btn {
    margin-top: 10px;
}


/* Gold bottom edge */

.about-hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    background: var(--gold);

    z-index: 3;
}


/* ================= SECTION HEADINGS ================= */

.services-section,
.why-us {
    padding: 100px 0;

    background: var(--black-2);
}


.why-us {
    background: var(--dark);
}


.section-heading {
    max-width: 750px;

    margin: 0 auto 55px;

    text-align: center;
}


.section-heading .section-tag {
    margin-bottom: 10px;
}


.section-heading h2 {
    color: var(--white);

    font-size: clamp(34px, 4vw, 48px);

    line-height: 1.2;

    font-weight: 800;

    margin-bottom: 15px;
}


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


.section-heading p {
    color: var(--text-light);

    font-size: 15px;

    line-height: 1.8;
}


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

.services-grid {
    display: grid;

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

    gap: 22px;
}


.service-card {
    background: var(--dark);

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

    padding: 32px 28px;

    transition: var(--transition);
}


.service-card:hover {
    border-color: var(--gold);

    transform: translateY(-6px);

    box-shadow: var(--shadow);
}


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

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

    background: rgba(212, 175, 55, 0.08);

    border: 1px solid rgba(212, 175, 55, 0.25);

    color: var(--gold);

    font-size: 23px;

    margin-bottom: 22px;
}


.service-card h3 {
    color: var(--white);

    font-size: 19px;

    margin-bottom: 10px;
}


.service-card p {
    color: var(--text-light);

    font-size: 13px;

    line-height: 1.8;

    margin-bottom: 18px;
}


.service-card > a {
    color: var(--gold);

    font-size: 12px;

    font-weight: 700;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    transition: var(--transition);
}


.service-card > a:hover {
    color: var(--gold-light);

    gap: 10px;
}


/* ================= FEATURES ================= */

.features-grid {
    display: grid;

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

    gap: 20px;
}


.feature {
    display: flex;

    align-items: flex-start;

    gap: 18px;

    padding: 25px;

    background: var(--dark-2);

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

    transition: var(--transition);
}


.feature:hover {
    border-color: var(--gold);

    transform: translateY(-3px);
}


.feature-icon {
    flex-shrink: 0;

    width: 52px;
    height: 52px;

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

    background: rgba(212, 175, 55, 0.08);

    border: 1px solid rgba(212, 175, 55, 0.2);

    color: var(--gold);

    font-size: 19px;
}


.feature h3 {
    color: var(--white);

    font-size: 17px;

    margin-bottom: 5px;
}


.feature p {
    color: var(--text-light);

    font-size: 13px;

    line-height: 1.75;
}


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

.stats {
    padding: 65px 0;

    background:
        linear-gradient(
            90deg,
            rgba(212, 175, 55, 0.08),
            rgba(212, 175, 55, 0.02)
        );

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


.stats-grid {
    display: grid;

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

    gap: 20px;
}


.stat {
    text-align: center;

    padding: 15px;
}


.stat strong {
    display: block;

    color: var(--gold);

    font-size: 42px;

    line-height: 1.1;

    font-weight: 800;
}


.stat span {
    color: var(--text-light);

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 1px;
}


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

.cta {
    position: relative;

    padding: 100px 0;

    background:
        radial-gradient(
            circle at center,
            rgba(212, 175, 55, 0.1),
            transparent 45%
        ),
        var(--black-3);

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


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

    margin: 0 auto;

    text-align: center;
}


.cta-content .section-tag {
    justify-content: center;
}


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

    font-size: clamp(34px, 5vw, 52px);

    line-height: 1.2;

    font-weight: 800;

    margin-bottom: 18px;
}


.cta-content h2 span {
    color: var(--gold);
}


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

    margin: 0 auto 30px;

    color: var(--text-light);

    font-size: 15px;
}


.cta-buttons {
    justify-content: center;
}


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

.footer {
    background: #030303;

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


.footer-grid {
    display: grid;

    grid-template-columns: 1.5fr 1fr 1fr 1.3fr;

    gap: 45px;

    padding: 70px 0;
}


.footer-column {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.footer-logo {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 18px;
}


.footer-logo img {
    width: 45px;
    height: 45px;

    object-fit: contain;
}


.footer-logo div {
    display: flex;

    flex-direction: column;

    line-height: 1.05;
}


.footer-logo strong {
    color: var(--gold);

    font-size: 16px;

    letter-spacing: 1px;
}


.footer-logo span {
    color: var(--white);

    font-size: 10px;

    letter-spacing: 1.3px;
}


.footer-column > p {
    color: var(--text-muted);

    font-size: 13px;

    margin-bottom: 20px;
}


.footer-column h3 {
    color: var(--white);

    font-size: 16px;

    margin-bottom: 20px;
}


.footer-column > a {
    color: var(--text-muted);

    font-size: 13px;

    margin-bottom: 8px;

    transition: var(--transition);
}


.footer-column > a:hover {
    color: var(--gold);

    padding-left: 4px;
}


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

.social-links {
    display: flex;

    gap: 8px;
}


.social-links a {
    width: 36px;
    height: 36px;

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

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

    color: var(--text-light);

    font-size: 13px;

    transition: var(--transition);
}


.social-links a:hover {
    border-color: var(--gold);

    color: var(--gold);

    transform: translateY(-3px);
}


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

.footer .contact-item {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 14px;

    color: var(--text-muted);

    font-size: 13px;
}


.footer .contact-item i {
    color: var(--gold);

    margin-top: 4px;

    width: 15px;
}


.footer .contact-item a {
    transition: var(--transition);
}


.footer .contact-item a:hover {
    color: var(--gold);
}


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

.footer-bottom {
    padding: 20px 0;

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

    text-align: center;
}


.footer-bottom p {
    color: var(--text-muted);

    font-size: 11px;
}


/* ================= WHATSAPP ================= */

.whatsapp-float {
    position: fixed;

    right: 25px;
    bottom: 25px;

    width: 58px;
    height: 58px;

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

    background: #25d366;

    color: white;

    border-radius: 50%;

    font-size: 28px;

    z-index: 999;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);

    transition: var(--transition);
}


.whatsapp-float:hover {
    transform: translateY(-5px) scale(1.04);
}


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

.back-to-top {
    position: fixed;

    right: 25px;
    bottom: 95px;

    width: 42px;
    height: 42px;

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

    background: var(--black-3);

    color: var(--gold);

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

    border-radius: 4px;

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

    transition: var(--transition);

    z-index: 998;
}


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

    transform: translateY(0);
}


.back-to-top:hover {
    background: var(--gold);

    color: var(--black);
}


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

.reveal {
    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}


.reveal-visible {
    opacity: 1;

    transform: translateY(0);
}


/* ================= FORMS ================= */

.form-group {
    margin-bottom: 20px;
}


.form-group label {
    display: block;

    color: var(--white);

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 7px;
}


.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;

    padding: 13px 15px;

    background: var(--dark);

    color: var(--white);

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

    outline: none;

    border-radius: 3px;

    font-size: 13px;

    transition: var(--transition);
}


.form-group textarea {
    min-height: 150px;

    resize: vertical;
}


.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--gold);

    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.08);
}


.input-error {
    border-color: var(--danger) !important;
}


/* ================= SUCCESS MESSAGE ================= */

.form-success {
    display: none;

    padding: 15px;

    margin-top: 15px;

    background: rgba(54, 194, 117, 0.08);

    border: 1px solid rgba(54, 194, 117, 0.25);

    color: var(--success);

    font-size: 13px;
}


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


/* ---------- 1100px ---------- */

@media (max-width: 1100px) {

    .nav-links {
        gap: 0;
    }


    .nav-links a {
        padding: 10px 9px;

        font-size: 12px;
    }


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


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

}


/* ---------- 992px ---------- */

@media (max-width: 992px) {

    .nav-links {
        position: absolute;

        top: 82px;
        left: 0;

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        background: rgba(5, 5, 5, 0.98);

        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);

        padding: 10px 5%;

        opacity: 0;
        visibility: hidden;

        transform: translateY(-10px);

        transition: var(--transition);
    }


    .nav-links.active {
        opacity: 1;
        visibility: visible;

        transform: translateY(0);
    }


    .nav-links a {
        width: 100%;

        padding: 13px 10px;

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


    .nav-links a::after {
        display: none;
    }


    .menu-btn {
        display: block;
    }


    .about-hero {
        min-height: 540px;
    }


    .about-hero-content {
        width: 90%;

        padding: 80px 0;
    }


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


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

}


/* ---------- 768px ---------- */

@media (max-width: 768px) {

    .hero {
        min-height: 90vh;
    }


    .hero h1 {
        font-size: 40px;

        letter-spacing: -1px;
    }


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


    .page-hero {
        min-height: 58vh;
    }


    .page-hero .hero-content {
        padding-top: 130px;
    }


    .about-hero {
        min-height: 540px;
    }


    .about-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(5, 5, 5, 0.96),
                rgba(5, 5, 5, 0.78)
            );
    }


    .about-hero-content {
        padding: 70px 0;
    }


    .about-hero-content h2 {
        font-size: 36px;
    }


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


    .services-section,
    .why-us,
    .cta {
        padding: 75px 0;
    }


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


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


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

        gap: 35px;
    }

}


/* ---------- 600px ---------- */

@media (max-width: 600px) {

    .container {
        width: 92%;
    }


    .nav-container {
        min-height: 72px;
    }


    .logo img {
        width: 42px;
        height: 42px;
    }


    .logo-text strong {
        font-size: 14px;
    }


    .logo-text span {
        font-size: 9px;
    }


    .nav-links {
        top: 72px;
    }


    .hero {
        min-height: 90vh;
    }


    .hero-content {
        padding-top: 110px;
        padding-bottom: 60px;
    }


    .hero h1 {
        font-size: 32px;

        line-height: 1.15;
    }


    .hero p {
        font-size: 13px;

        line-height: 1.8;
    }


    .section-tag {
        font-size: 10px;

        letter-spacing: 1.5px;
    }


    .btn {
        width: 100%;
    }


    .hero-buttons,
    .cta-buttons {
        width: 100%;
    }


    .about-hero {
        min-height: 600px;
    }


    .about-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(5, 5, 5, 0.82),
                rgba(5, 5, 5, 0.96)
            );
    }


    .about-hero-content {
        width: 92%;

        padding: 65px 0;
    }


    .about-hero-content::before {
        width: 55px;

        margin-bottom: 18px;
    }


    .about-hero-content h2 {
        font-size: 30px;

        letter-spacing: -0.7px;
    }


    .about-hero-content p {
        font-size: 13px;

        line-height: 1.8;
    }


    .section-heading h2 {
        font-size: 31px;
    }


    .service-card {
        padding: 27px 23px;
    }


    .feature {
        padding: 20px;
    }


    .stat strong {
        font-size: 34px;
    }


    .whatsapp-float {
        width: 52px;
        height: 52px;

        right: 18px;
        bottom: 18px;

        font-size: 25px;
    }


    .back-to-top {
        right: 18px;
        bottom: 82px;
    }

}


/* ---------- 400px ---------- */

@media (max-width: 400px) {

    .hero h1 {
        font-size: 28px;
    }


    .about-hero {
        min-height: 630px;
    }


    .about-hero-content {
        padding: 55px 0;
    }


    .about-hero-content h2 {
        font-size: 27px;
    }


    .about-hero-content p {
        font-size: 12px;
    }


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

}


/* ================= ACCESSIBILITY ================= */

:focus-visible {
    outline: 2px solid var(--gold);

    outline-offset: 3px;
}


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

::selection {
    background: var(--gold);

    color: var(--black);
}


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

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


::-webkit-scrollbar-track {
    background: var(--black);
}


::-webkit-scrollbar-thumb {
    background: var(--border-light);

    border-radius: 10px;
}


::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}

/* =========================================================
   MTP SERVICE.HTML — PAGE-SPECIFIC COMPONENT STYLES
   Centralized here so every HTML page uses one stylesheet.
   ========================================================= */

/* =====================================================
           SERVICES PAGE
        ====================================================== */

        .services-page {
            background: var(--black);
            color: var(--white);
        }


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

        .services-page .page-hero {
            min-height: 560px;
            position: relative;
            overflow: hidden;
        }

        .services-page .page-hero::before {
            content: "";
            position: absolute;
            inset: 0;

            background:
                linear-gradient(
                    90deg,
                    rgba(5, 5, 5, 0.97) 0%,
                    rgba(5, 5, 5, 0.88) 40%,
                    rgba(5, 5, 5, 0.60) 70%,
                    rgba(5, 5, 5, 0.80) 100%
                );

            z-index: 1;
        }

        .services-page .page-hero::after {
            content: "";
            position: absolute;
            width: 500px;
            height: 500px;

            right: -180px;
            bottom: -220px;

            border-radius: 50%;

            border: 1px solid rgba(212, 175, 55, 0.18);

            box-shadow:
                0 0 80px rgba(212, 175, 55, 0.05);

            z-index: 1;
        }

        .services-page .page-hero .hero-content {
            position: relative;
            z-index: 2;
            max-width: 850px;
        }

        .services-page .hero-tag {
            display: inline-flex;
            align-items: center;
            gap: 10px;

            color: var(--gold);

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

            letter-spacing: 3px;
            text-transform: uppercase;

            margin-bottom: 20px;
        }

        .services-page .hero-tag i {
            font-size: 14px;
        }

        .services-page .page-hero h1 {
            font-size: clamp(42px, 6vw, 72px);
            line-height: 1.08;
            margin-bottom: 25px;
            letter-spacing: -1.5px;
        }

        .services-page .page-hero h1 span {
            display: block;
            color: var(--gold);
        }

        .services-page .page-hero p {
            max-width: 700px;

            color: #b8b8b8;

            font-size: 17px;
            line-height: 1.9;
        }


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

        .services-page .services-intro {
            position: relative;
            padding: 110px 0 120px;
            background: var(--black);
        }

        .services-page .section-heading {
            margin-bottom: 65px;
        }

        .services-page .section-heading h2 {
            font-size: clamp(36px, 5vw, 58px);
            line-height: 1.1;
        }

        .services-page .section-heading h2 span {
            color: var(--gold);
        }

        .services-page .section-heading p {
            max-width: 680px;
            margin: 20px auto 0;
            color: var(--text-light);
            line-height: 1.8;
        }


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

        .services-page .services-grid {
            display: grid;

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

            gap: 28px;
        }


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

        .services-page .service-card {
            position: relative;

            min-height: 470px;

            padding: 38px 32px 32px;

            background:
                linear-gradient(
                    145deg,
                    #121212,
                    #090909
                );

            border: 1px solid #242424;

            border-radius: 4px;

            overflow: hidden;

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

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

            position: absolute;

            top: 0;
            left: 0;

            width: 100%;
            height: 3px;

            background:
                linear-gradient(
                    90deg,
                    transparent,
                    var(--gold),
                    transparent
                );

            transform: scaleX(0);

            transform-origin: center;

            transition: transform 0.4s ease;
        }

        .services-page .service-card::after {
            content: "";

            position: absolute;

            width: 160px;
            height: 160px;

            right: -80px;
            bottom: -80px;

            border-radius: 50%;

            background: rgba(212, 175, 55, 0.035);

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

        .services-page .service-card:hover {
            transform: translateY(-10px);

            border-color: rgba(212, 175, 55, 0.55);

            box-shadow:
                0 25px 60px rgba(0, 0, 0, 0.45),
                0 0 30px rgba(212, 175, 55, 0.06);
        }

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

        .services-page .service-card:hover::after {
            transform: scale(2);

            background: rgba(212, 175, 55, 0.055);
        }


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

        .services-page .service-number {
            position: absolute;

            top: 25px;
            right: 28px;

            font-size: 12px;

            font-weight: 700;

            letter-spacing: 2px;

            color: #555;

            transition: color 0.3s ease;
        }

        .services-page .service-card:hover .service-number {
            color: var(--gold);
        }


        /* =====================================================
           SERVICE ICON
        ====================================================== */

        .services-page .service-icon {
            width: 68px;
            height: 68px;

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

            margin-bottom: 28px;

            background:
                linear-gradient(
                    145deg,
                    #1b1b1b,
                    #0b0b0b
                );

            border: 1px solid rgba(212, 175, 55, 0.4);

            color: var(--gold);

            font-size: 25px;

            border-radius: 3px;

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

        .services-page .service-card:hover .service-icon {
            transform: translateY(-4px);

            background: var(--gold);

            color: var(--black);

            box-shadow:
                0 10px 30px rgba(212, 175, 55, 0.20);
        }


        /* =====================================================
           SERVICE CONTENT
        ====================================================== */

        .services-page .service-card h3 {
            position: relative;
            z-index: 2;

            font-size: 21px;

            line-height: 1.4;

            margin-bottom: 15px;

            color: var(--white);
        }

        .services-page .service-card p {
            position: relative;
            z-index: 2;

            color: #999;

            font-size: 14px;

            line-height: 1.8;

            margin-bottom: 22px;
        }


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

        .services-page .service-list {
            position: relative;
            z-index: 2;

            list-style: none;

            padding: 0;
            margin: 0 0 25px;
        }

        .services-page .service-list li {
            display: flex;
            align-items: center;

            gap: 10px;

            color: #b7b7b7;

            font-size: 13px;

            padding: 6px 0;
        }

        .services-page .service-list li i {
            color: var(--gold);

            font-size: 10px;
        }


        /* =====================================================
           SERVICE LINK
        ====================================================== */

        .services-page .service-card > a {
            position: relative;
            z-index: 3;

            display: inline-flex;

            align-items: center;

            gap: 10px;

            color: var(--gold);

            font-size: 13px;

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 0.8px;

            text-decoration: none;

            margin-top: auto;

            transition:
                gap 0.3s ease,
                color 0.3s ease;
        }

        .services-page .service-card > a:hover {
            gap: 15px;

            color: var(--gold-light);
        }

        .services-page .service-card > a i {
            font-size: 11px;
        }


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

        .services-page .process-section {
            position: relative;

            padding: 110px 0;

            background:
                linear-gradient(
                    180deg,
                    #0b0b0b 0%,
                    #080808 100%
                );

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

        .services-page .process-grid {
            display: grid;

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

            gap: 20px;

            margin-top: 60px;
        }


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

        .services-page .process-card {
            position: relative;

            padding: 35px 25px;

            background: #101010;

            border: 1px solid #242424;

            min-height: 220px;

            transition:
                transform 0.35s ease,
                border-color 0.35s ease;
        }

        .services-page .process-card:hover {
            transform: translateY(-7px);

            border-color: rgba(212, 175, 55, 0.45);
        }

        .services-page .process-number {
            color: var(--gold);

            font-size: 13px;

            font-weight: 700;

            letter-spacing: 2px;

            margin-bottom: 22px;
        }

        .services-page .process-icon {
            color: var(--gold);

            font-size: 25px;

            margin-bottom: 18px;
        }

        .services-page .process-card h3 {
            font-size: 18px;

            margin-bottom: 10px;

            color: var(--white);
        }

        .services-page .process-card p {
            color: #888;

            font-size: 13px;

            line-height: 1.75;
        }


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

        .services-page .cta {
            position: relative;

            overflow: hidden;
        }

        .services-page .cta::before {
            content: "";

            position: absolute;

            width: 450px;
            height: 450px;

            border-radius: 50%;

            border: 1px solid rgba(212, 175, 55, 0.10);

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


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

        .services-page .footer-logo {
            color: var(--gold);
        }


        /* =====================================================
           WHATSAPP
        ====================================================== */

        .services-page .whatsapp-float {
            width: 58px;
            height: 58px;

            display: flex;

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

            background: #25D366;

            color: #fff;

            border-radius: 50%;

            box-shadow:
                0 10px 30px rgba(0, 0, 0, 0.4);

            font-size: 27px;

            z-index: 999;

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

        .services-page .whatsapp-float:hover {
            transform: translateY(-5px) scale(1.05);

            box-shadow:
                0 15px 35px rgba(37, 211, 102, 0.25);
        }


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

        @media (max-width: 1000px) {

            .services-page .services-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .services-page .process-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }


        @media (max-width: 700px) {

            .services-page .page-hero {
                min-height: 500px;
            }

            .services-page .services-intro,
            .services-page .process-section {
                padding: 80px 0;
            }

            .services-page .services-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .services-page .process-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .services-page .service-card {
                min-height: auto;
                padding: 32px 25px;
            }

            .services-page .section-heading {
                margin-bottom: 45px;
            }

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


        @media (max-width: 480px) {

            .services-page .page-hero h1 {
                font-size: 36px;
            }

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

            .services-page .service-card {
                padding: 28px 22px;
            }

            .services-page .service-icon {
                width: 60px;
                height: 60px;
            }
        }

    
        /* =====================================================
           SHARED PAGE HERO - MATCH HOME / ABOUT US
        ====================================================== */

        .services-page .page-hero {
            min-height: 65vh !important;
            position: relative;
            overflow: hidden;
        }

        .services-page .page-hero::before {
            content: "";
            position: absolute;
            width: 450px;
            height: 450px;
            border: 1px solid rgba(212, 175, 55, 0.1);
            border-radius: 50%;
            right: -150px;
            top: 15%;
            pointer-events: none;
            background: transparent;
            box-shadow: none;
            z-index: 0;
        }

        .services-page .page-hero::after {
            content: "";
            position: absolute;
            width: 250px;
            height: 250px;
            border: 1px solid rgba(212, 175, 55, 0.07);
            border-radius: 50%;
            left: -100px;
            bottom: 5%;
            pointer-events: none;
            background: transparent;
            box-shadow: none;
            z-index: 0;
        }

        .services-page .page-hero .hero-content {
            position: relative;
            z-index: 2;
            width: min(90%, 1200px);
            max-width: none !important;
            margin: 0 auto;
            padding-top: 150px !important;
            padding-bottom: 80px !important;
        }

        .services-page .page-hero .section-tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--gold);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 18px;
        }

        .services-page .page-hero h1 {
            max-width: 850px;
            color: var(--white);
            font-size: clamp(40px, 5vw, 62px) !important;
            line-height: 1.1 !important;
            font-weight: 800;
            letter-spacing: -2px !important;
            margin-bottom: 25px;
        }

        .services-page .page-hero h1 span {
            display: inline !important;
            color: var(--gold) !important;
        }

        .services-page .page-hero p {
            max-width: 700px !important;
            color: var(--text-light) !important;
            font-size: 16px !important;
            line-height: 1.9 !important;
            margin-bottom: 0;
        }


/* =========================================================
   MTP PROJECTS.HTML — PAGE-SPECIFIC COMPONENT STYLES
   Centralized here so every HTML page uses one stylesheet.
   ========================================================= */

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

        .projects-page {
            background: var(--black);
            color: var(--white);
        }


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

        .projects-page .page-hero {
            min-height: 560px;
            position: relative;
            overflow: hidden;
        }

        .projects-page .page-hero::before {
            content: "";

            position: absolute;
            inset: 0;

            background:
                linear-gradient(
                    90deg,
                    rgba(5, 5, 5, 0.97) 0%,
                    rgba(5, 5, 5, 0.88) 38%,
                    rgba(5, 5, 5, 0.62) 70%,
                    rgba(5, 5, 5, 0.82) 100%
                );

            z-index: 1;
        }

        .projects-page .page-hero::after {
            content: "";

            position: absolute;

            width: 600px;
            height: 600px;

            right: -250px;
            top: -150px;

            border: 1px solid rgba(212, 175, 55, 0.13);

            border-radius: 50%;

            box-shadow:
                0 0 100px rgba(212, 175, 55, 0.04);

            z-index: 1;
        }

        .projects-page .page-hero .hero-content {
            position: relative;
            z-index: 2;

            max-width: 850px;
        }

        .projects-page .hero-tag {
            display: inline-flex;

            align-items: center;

            gap: 10px;

            color: var(--gold);

            font-size: 13px;

            font-weight: 700;

            letter-spacing: 3px;

            text-transform: uppercase;

            margin-bottom: 20px;
        }

        .projects-page .hero-tag i {
            font-size: 14px;
        }

        .projects-page .page-hero h1 {
            font-size: clamp(42px, 6vw, 72px);

            line-height: 1.08;

            letter-spacing: -1.5px;

            margin-bottom: 25px;
        }

        .projects-page .page-hero h1 span {
            display: block;

            color: var(--gold);
        }

        .projects-page .page-hero p {
            max-width: 680px;

            color: #b8b8b8;

            font-size: 17px;

            line-height: 1.9;
        }


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

        .projects-page .projects-section {
            padding: 110px 0 120px;

            background: var(--black);
        }

        .projects-page .section-heading {
            margin-bottom: 55px;
        }

        .projects-page .section-heading h2 {
            font-size: clamp(36px, 5vw, 58px);

            line-height: 1.1;
        }

        .projects-page .section-heading h2 span {
            color: var(--gold);
        }

        .projects-page .section-heading p {
            max-width: 700px;

            margin: 20px auto 0;

            color: var(--text-light);

            line-height: 1.8;
        }


        /* =====================================================
           PROJECT FILTERS
        ====================================================== */

        .projects-page .project-filters {
            display: flex;

            justify-content: center;

            align-items: center;

            flex-wrap: wrap;

            gap: 10px;

            margin-bottom: 55px;
        }

        .projects-page .filter-btn {
            position: relative;

            border: 1px solid #2d2d2d;

            background: #101010;

            color: #999;

            padding: 11px 20px;

            font-family: inherit;

            font-size: 12px;

            font-weight: 600;

            letter-spacing: 0.8px;

            text-transform: uppercase;

            cursor: pointer;

            transition:
                color 0.3s ease,
                border-color 0.3s ease,
                background 0.3s ease,
                transform 0.3s ease;
        }

        .projects-page .filter-btn:hover {
            color: var(--white);

            border-color: rgba(212, 175, 55, 0.45);

            transform: translateY(-2px);
        }

        .projects-page .filter-btn.active {
            background: var(--gold);

            color: var(--black);

            border-color: var(--gold);

            font-weight: 700;
        }


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

        .projects-page .projects-grid {
            display: grid;

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

            gap: 30px;
        }


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

        .projects-page .project-card {
            position: relative;

            background:
                linear-gradient(
                    145deg,
                    #121212,
                    #090909
                );

            border: 1px solid #242424;

            overflow: hidden;

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

        .projects-page .project-card::before {
            content: "";

            position: absolute;

            top: 0;
            left: 0;

            width: 100%;
            height: 3px;

            background:
                linear-gradient(
                    90deg,
                    transparent,
                    var(--gold),
                    transparent
                );

            transform: scaleX(0);

            transition: transform 0.4s ease;

            z-index: 5;
        }

        .projects-page .project-card:hover {
            transform: translateY(-10px);

            border-color: rgba(212, 175, 55, 0.50);

            box-shadow:
                0 25px 60px rgba(0, 0, 0, 0.45),
                0 0 30px rgba(212, 175, 55, 0.06);
        }

        .projects-page .project-card:hover::before {
            transform: scaleX(1);
        }


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

        .projects-page .project-image {
            position: relative;

            height: 260px;

            overflow: hidden;

            background: #111;
        }

        .projects-page .project-image img {
            width: 100%;
            height: 100%;

            object-fit: cover;

            display: block;

            filter: brightness(0.75);

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

        .projects-page .project-card:hover .project-image img {
            transform: scale(1.08);

            filter: brightness(0.95);
        }


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

        .projects-page .project-image::after {
            content: "";

            position: absolute;

            inset: 0;

            background:
                linear-gradient(
                    180deg,
                    rgba(0, 0, 0, 0.05),
                    rgba(0, 0, 0, 0.80)
                );

            pointer-events: none;
        }

        .projects-page .project-overlay {
            position: absolute;

            left: 22px;
            bottom: 20px;

            z-index: 2;
        }

        .projects-page .project-overlay span {
            display: inline-block;

            padding: 8px 13px;

            background: rgba(5, 5, 5, 0.85);

            border-left: 2px solid var(--gold);

            color: var(--gold);

            font-size: 10px;

            font-weight: 700;

            letter-spacing: 1.5px;
        }


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

        .projects-page .project-content {
            padding: 30px 30px 32px;
        }

        .projects-page .project-category {
            display: block;

            color: var(--gold);

            font-size: 10px;

            font-weight: 700;

            letter-spacing: 2px;

            margin-bottom: 12px;
        }

        .projects-page .project-content h3 {
            font-size: 20px;

            line-height: 1.4;

            color: var(--white);

            margin-bottom: 13px;
        }

        .projects-page .project-content p {
            color: #909090;

            font-size: 13px;

            line-height: 1.8;

            margin-bottom: 23px;
        }


        /* =====================================================
           PROJECT LINK
        ====================================================== */

        .projects-page .project-content a {
            display: inline-flex;

            align-items: center;

            gap: 9px;

            color: var(--gold);

            font-size: 12px;

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 0.7px;

            text-decoration: none;

            transition:
                gap 0.3s ease,
                color 0.3s ease;
        }

        .projects-page .project-content a:hover {
            gap: 14px;

            color: var(--gold-light);
        }

        .projects-page .project-content a i {
            font-size: 10px;
        }


        /* =====================================================
           PROJECT APPROACH
        ====================================================== */

        .projects-page .approach-section {
            padding: 110px 0;

            background:
                linear-gradient(
                    180deg,
                    #0b0b0b,
                    #080808
                );

            border-top: 1px solid #181818;

            border-bottom: 1px solid #181818;
        }

        .projects-page .approach-grid {
            display: grid;

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

            gap: 20px;

            margin-top: 55px;
        }


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

        .projects-page .approach-card {
            position: relative;

            padding: 35px 25px;

            min-height: 230px;

            background: #101010;

            border: 1px solid #242424;

            transition:
                transform 0.35s ease,
                border-color 0.35s ease;
        }

        .projects-page .approach-card:hover {
            transform: translateY(-7px);

            border-color: rgba(212, 175, 55, 0.45);
        }

        .projects-page .approach-number {
            color: #4d4d4d;

            font-size: 11px;

            font-weight: 700;

            letter-spacing: 2px;

            margin-bottom: 25px;

            transition: color 0.3s ease;
        }

        .projects-page .approach-card:hover .approach-number {
            color: var(--gold);
        }

        .projects-page .approach-icon {
            color: var(--gold);

            font-size: 25px;

            margin-bottom: 18px;
        }

        .projects-page .approach-card h3 {
            color: var(--white);

            font-size: 18px;

            margin-bottom: 10px;
        }

        .projects-page .approach-card p {
            color: #888;

            font-size: 13px;

            line-height: 1.75;
        }


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

        .projects-page .cta {
            position: relative;

            overflow: hidden;
        }

        .projects-page .cta::before {
            content: "";

            position: absolute;

            width: 450px;
            height: 450px;

            right: -180px;
            top: -230px;

            border-radius: 50%;

            border: 1px solid rgba(212, 175, 55, 0.10);
        }


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

        .projects-page .footer-logo {
            color: var(--gold);
        }


        /* =====================================================
           WHATSAPP
        ====================================================== */

        .projects-page .whatsapp-float {
            width: 58px;
            height: 58px;

            display: flex;

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

            background: #25D366;

            color: #fff;

            border-radius: 50%;

            font-size: 27px;

            box-shadow:
                0 10px 30px rgba(0, 0, 0, 0.4);

            z-index: 999;

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

        .projects-page .whatsapp-float:hover {
            transform: translateY(-5px) scale(1.05);

            box-shadow:
                0 15px 35px rgba(37, 211, 102, 0.25);
        }


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

        @media (max-width: 1050px) {

            .projects-page .projects-grid {
                grid-template-columns:
                    repeat(2, minmax(0, 1fr));
            }

            .projects-page .approach-grid {
                grid-template-columns:
                    repeat(2, minmax(0, 1fr));
            }
        }


        @media (max-width: 700px) {

            .projects-page .page-hero {
                min-height: 500px;
            }

            .projects-page .projects-section,
            .projects-page .approach-section {
                padding: 80px 0;
            }

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

                gap: 22px;
            }

            .projects-page .approach-grid {
                grid-template-columns: 1fr;

                gap: 15px;
            }

            .projects-page .project-image {
                height: 240px;
            }

            .projects-page .project-content {
                padding: 27px 24px 30px;
            }

            .projects-page .page-hero h1 {
                font-size: 42px;
            }

            .projects-page .project-filters {
                gap: 8px;
            }

            .projects-page .filter-btn {
                padding: 10px 15px;

                font-size: 11px;
            }
        }


        @media (max-width: 480px) {

            .projects-page .page-hero h1 {
                font-size: 36px;
            }

            .projects-page .page-hero p {
                font-size: 15px;
            }

            .projects-page .project-image {
                height: 220px;
            }

            .projects-page .project-content {
                padding: 25px 21px 28px;
            }
        }

    
        /* =====================================================
           SHARED PAGE HERO - MATCH HOME / ABOUT US
        ====================================================== */

        .projects-page .page-hero {
            min-height: 65vh !important;
            position: relative;
            overflow: hidden;
        }

        .projects-page .page-hero::before {
            content: "";
            position: absolute;
            width: 450px;
            height: 450px;
            border: 1px solid rgba(212, 175, 55, 0.1);
            border-radius: 50%;
            right: -150px;
            top: 15%;
            pointer-events: none;
            background: transparent;
            box-shadow: none;
            z-index: 0;
        }

        .projects-page .page-hero::after {
            content: "";
            position: absolute;
            width: 250px;
            height: 250px;
            border: 1px solid rgba(212, 175, 55, 0.07);
            border-radius: 50%;
            left: -100px;
            bottom: 5%;
            pointer-events: none;
            background: transparent;
            box-shadow: none;
            z-index: 0;
        }

        .projects-page .page-hero .hero-content {
            position: relative;
            z-index: 2;
            width: min(90%, 1200px);
            max-width: none !important;
            margin: 0 auto;
            padding-top: 150px !important;
            padding-bottom: 80px !important;
        }

        .projects-page .page-hero .section-tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--gold);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 18px;
        }

        .projects-page .page-hero h1 {
            max-width: 850px;
            color: var(--white);
            font-size: clamp(40px, 5vw, 62px) !important;
            line-height: 1.1 !important;
            font-weight: 800;
            letter-spacing: -2px !important;
            margin-bottom: 25px;
        }

        .projects-page .page-hero h1 span {
            display: inline !important;
            color: var(--gold) !important;
        }

        .projects-page .page-hero p {
            max-width: 700px !important;
            color: var(--text-light) !important;
            font-size: 16px !important;
            line-height: 1.9 !important;
            margin-bottom: 0;
        }


/* =========================================================
   MTP REQUEST A QUOTE.HTML — PAGE-SPECIFIC COMPONENT STYLES
   Centralized here so every HTML page uses one stylesheet.
   ========================================================= */

/* =====================================================
           PAGE BASE
        ====================================================== */

        .quote-page {
            background: #050505;
        }


        /* =====================================================
           PREMIUM PAGE HERO
        ====================================================== */

        .quote-page .page-hero {
            min-height: 480px;
            position: relative;
            overflow: hidden;
        }

        .quote-page .page-hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(
                    circle at 75% 50%,
                    rgba(212, 175, 55, 0.10),
                    transparent 35%
                );
            pointer-events: none;
        }

        .quote-page .hero-content {
            position: relative;
            z-index: 2;
        }

        .quote-page .hero-tag {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            color: #d4af37;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 2px;
            margin-bottom: 18px;
        }

        .quote-page .hero-tag i {
            font-size: 14px;
        }

        .quote-page .page-hero h1 {
            max-width: 850px;
        }


        /* =====================================================
           QUOTE SECTION
        ====================================================== */

        .quote-page .quote-section {
            position: relative;
            padding: 110px 0;
            background:
                linear-gradient(
                    180deg,
                    #050505 0%,
                    #080808 100%
                );
        }

        .quote-page .quote-section::before {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            width: 1px;
            height: 100px;
            background: linear-gradient(
                to bottom,
                transparent,
                rgba(212,175,55,.6),
                transparent
            );
        }

        .quote-page .quote-wrapper {
            display: grid;
            grid-template-columns: minmax(280px, .78fr) minmax(500px, 1.5fr);
            gap: 45px;
            align-items: start;
        }


        /* =====================================================
           LEFT INFORMATION PANEL
        ====================================================== */

        .quote-page .quote-info {
            position: sticky;
            top: 110px;

            padding: 42px 38px;

            background:
                radial-gradient(
                    circle at top right,
                    rgba(212,175,55,.08),
                    transparent 35%
                ),
                #101010;

            border: 1px solid #292929;
            border-radius: 12px;

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

            overflow: hidden;
        }

        .quote-page .quote-info::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(
                90deg,
                transparent,
                #d4af37,
                transparent
            );
        }

        .quote-page .quote-info .section-tag {
            display: inline-block;
            margin-bottom: 15px;
            color: #d4af37;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 2px;
        }

        .quote-page .quote-info h2 {
            margin-bottom: 14px;
            color: #fff;
            font-size: clamp(28px, 3vw, 36px);
            line-height: 1.2;
        }

        .quote-page .quote-info h2 span {
            color: #d4af37;
        }

        .quote-page .quote-info > p {
            margin-bottom: 35px;
            color: #999;
            font-size: 13px;
            line-height: 1.8;
        }


        /* =====================================================
           QUOTE BENEFITS
        ====================================================== */

        .quote-page .quote-benefit {
            position: relative;

            display: flex;
            gap: 16px;

            padding: 20px 0;

            border-bottom: 1px solid #252525;
        }

        .quote-page .quote-benefit:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .quote-page .quote-benefit-icon {
            flex: 0 0 46px;

            width: 46px;
            height: 46px;

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

            border: 1px solid rgba(212,175,55,.35);
            border-radius: 8px;

            background: #181818;
            color: #d4af37;

            transition: .3s ease;
        }

        .quote-page .quote-benefit:hover .quote-benefit-icon {
            background: #d4af37;
            color: #050505;
            transform: translateY(-2px);
        }

        .quote-page .quote-benefit h3 {
            margin-bottom: 4px;
            color: #fff;
            font-size: 14px;
            font-weight: 600;
        }

        .quote-page .quote-benefit p {
            color: #777;
            font-size: 11px;
            line-height: 1.7;
        }


        /* =====================================================
           FORM CONTAINER
        ====================================================== */

        .quote-page .quote-form-container {
            position: relative;

            padding: 48px;

            background:
                linear-gradient(
                    145deg,
                    rgba(255,255,255,.025),
                    transparent 30%
                ),
                #101010;

            border: 1px solid #292929;
            border-radius: 12px;

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

        .quote-page .quote-form-container::before {
            content: "";
            position: absolute;
            top: 0;
            left: 35px;
            right: 35px;
            height: 2px;

            background: linear-gradient(
                90deg,
                transparent,
                #d4af37,
                transparent
            );
        }


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

        .quote-page .form-heading {
            margin-bottom: 35px;
            padding-bottom: 25px;
            border-bottom: 1px solid #292929;
        }

        .quote-page .form-heading h2 {
            margin-bottom: 8px;
            color: #fff;
            font-size: 27px;
            font-weight: 700;
        }

        .quote-page .form-heading h2::after {
            content: "";
            display: block;
            width: 45px;
            height: 2px;
            margin-top: 12px;
            background: #d4af37;
        }

        .quote-page .form-heading p {
            color: #777;
            font-size: 12px;
        }

        .quote-page .form-heading strong {
            color: #d4af37;
        }


        /* =====================================================
           FORM
        ====================================================== */

        .quote-page .quote-form {
            display: flex;
            flex-direction: column;
            gap: 23px;
        }

        .quote-page .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .quote-page .form-group {
            display: flex;
            flex-direction: column;
        }

        .quote-page .form-group label {
            margin-bottom: 8px;

            color: #ddd;
            font-size: 12px;
            font-weight: 600;
        }

        .quote-page .form-group label span {
            color: #d4af37;
        }


        /* =====================================================
           FORM INPUTS
        ====================================================== */

        .quote-page .form-group input,
        .quote-page .form-group select,
        .quote-page .form-group textarea {

            width: 100%;

            padding: 14px 16px;

            border: 1px solid #303030;
            border-radius: 6px;

            background: #080808;
            color: #fff;

            font-family: inherit;
            font-size: 12px;

            outline: none;

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

        .quote-page .form-group input:hover,
        .quote-page .form-group select:hover,
        .quote-page .form-group textarea:hover {
            border-color: #454545;
        }

        .quote-page .form-group input:focus,
        .quote-page .form-group select:focus,
        .quote-page .form-group textarea:focus {
            border-color: #d4af37;

            background: #0b0b0b;

            box-shadow:
                0 0 0 3px rgba(212,175,55,.07);
        }

        .quote-page .form-group input::placeholder,
        .quote-page .form-group textarea::placeholder {
            color: #555;
        }

        .quote-page .form-group select {
            appearance: none;
            cursor: pointer;
            padding-right: 45px;
        }

        .quote-page .form-group select option {
            background: #111;
            color: #fff;
        }

        .quote-page .form-group textarea {
            min-height: 165px;
            resize: vertical;
            line-height: 1.7;
        }


        /* =====================================================
           SERVICE SELECT
        ====================================================== */

        .quote-page .service-select-wrapper {
            position: relative;
        }

        .quote-page .service-select-wrapper i {
            position: absolute;

            top: 50%;
            right: 16px;

            transform: translateY(-50%);

            color: #d4af37;
            font-size: 11px;

            pointer-events: none;
        }


        /* =====================================================
           CHECKBOX
        ====================================================== */

        .quote-page .form-check {
            display: flex;
            align-items: flex-start;
            gap: 10px;

            padding: 5px 0;
        }

        .quote-page .form-check input {
            width: 15px;
            height: 15px;

            margin-top: 3px;

            accent-color: #d4af37;
            cursor: pointer;
        }

        .quote-page .form-check label {
            color: #777;
            font-size: 11px;
            line-height: 1.7;
            cursor: pointer;
        }


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

        .quote-page .quote-submit {
            position: relative;

            width: 100%;

            padding: 17px 20px;

            border: 1px solid #d4af37;
            border-radius: 6px;

            background: #d4af37;
            color: #050505;

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

            cursor: pointer;

            overflow: hidden;

            transition:
                transform .3s ease,
                box-shadow .3s ease,
                background .3s ease;
        }

        .quote-page .quote-submit::before {
            content: "";

            position: absolute;
            top: 0;
            left: -100%;

            width: 100%;
            height: 100%;

            background: linear-gradient(
                90deg,
                transparent,
                rgba(255,255,255,.25),
                transparent
            );

            transition: left .5s ease;
        }

        .quote-page .quote-submit:hover::before {
            left: 100%;
        }

        .quote-page .quote-submit:hover {
            transform: translateY(-2px);

            background: #f3d675;

            box-shadow:
                0 12px 30px rgba(212,175,55,.18);
        }

        .quote-page .quote-submit i {
            margin-right: 8px;
        }


        /* =====================================================
           SUCCESS MESSAGE
        ====================================================== */

        .quote-page .form-message {
            display: none;

            padding: 15px 17px;

            border: 1px solid rgba(212,175,55,.5);
            border-radius: 6px;

            background: rgba(212,175,55,.07);

            color: #d4af37;

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

        .quote-page .form-message.show {
            display: block;
        }

        .quote-page .form-message i {
            margin-right: 7px;
        }


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

        .quote-page .cta {
            position: relative;
            overflow: hidden;
        }

        .quote-page .cta::before {
            content: "";

            position: absolute;

            width: 350px;
            height: 350px;

            right: -120px;
            top: -160px;

            border-radius: 50%;

            border: 1px solid rgba(212,175,55,.08);
            box-shadow:
                0 0 0 60px rgba(212,175,55,.025),
                0 0 0 120px rgba(212,175,55,.015);
        }


        /* =====================================================
           WHATSAPP
        ====================================================== */

        .quote-page .whatsapp-float {
            z-index: 1000;
        }


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

        @media (max-width: 1000px) {

            .quote-page .quote-wrapper {
                grid-template-columns: 1fr;
            }

            .quote-page .quote-info {
                position: relative;
                top: auto;
            }

        }


        @media (max-width: 700px) {

            .quote-page .quote-section {
                padding: 80px 0;
            }

            .quote-page .quote-form-container {
                padding: 32px 25px;
            }

            .quote-page .quote-info {
                padding: 32px 25px;
            }

            .quote-page .form-row {
                grid-template-columns: 1fr;
                gap: 23px;
            }

        }


        @media (max-width: 480px) {

            .quote-page .quote-section {
                padding: 65px 0;
            }

            .quote-page .quote-form-container,
            .quote-page .quote-info {
                border-radius: 8px;
            }

            .quote-page .form-heading h2 {
                font-size: 23px;
            }

        }

    
        /* =====================================================
           SHARED PAGE HERO - MATCH HOME / ABOUT US
        ====================================================== */

        .quote-page .page-hero {
            min-height: 65vh !important;
            position: relative;
            overflow: hidden;
        }

        .quote-page .page-hero::before {
            content: "";
            position: absolute;
            width: 450px;
            height: 450px;
            border: 1px solid rgba(212, 175, 55, 0.1);
            border-radius: 50%;
            right: -150px;
            top: 15%;
            pointer-events: none;
            background: transparent;
            box-shadow: none;
            z-index: 0;
        }

        .quote-page .page-hero::after {
            content: "";
            position: absolute;
            width: 250px;
            height: 250px;
            border: 1px solid rgba(212, 175, 55, 0.07);
            border-radius: 50%;
            left: -100px;
            bottom: 5%;
            pointer-events: none;
            background: transparent;
            box-shadow: none;
            z-index: 0;
        }

        .quote-page .page-hero .hero-content {
            position: relative;
            z-index: 2;
            width: min(90%, 1200px);
            max-width: none !important;
            margin: 0 auto;
            padding-top: 150px !important;
            padding-bottom: 80px !important;
        }

        .quote-page .page-hero .section-tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--gold);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 18px;
        }

        .quote-page .page-hero h1 {
            max-width: 850px;
            color: var(--white);
            font-size: clamp(40px, 5vw, 62px) !important;
            line-height: 1.1 !important;
            font-weight: 800;
            letter-spacing: -2px !important;
            margin-bottom: 25px;
        }

        .quote-page .page-hero h1 span {
            display: inline !important;
            color: var(--gold) !important;
        }

        .quote-page .page-hero p {
            max-width: 700px !important;
            color: var(--text-light) !important;
            font-size: 16px !important;
            line-height: 1.9 !important;
            margin-bottom: 0;
        }


/* =========================================================
   MTP CONTACT US.HTML — PAGE-SPECIFIC COMPONENT STYLES
   Centralized here so every HTML page uses one stylesheet.
   ========================================================= */

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

        .contact-page {
            background: #050505;
        }


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

        .contact-page .page-hero {
            min-height: 480px;
            position: relative;
            overflow: hidden;
        }

        .contact-page .page-hero::before {
            content: "";
            position: absolute;
            inset: 0;

            background:
                radial-gradient(
                    circle at 75% 50%,
                    rgba(212, 175, 55, 0.10),
                    transparent 35%
                );

            pointer-events: none;
        }

        .contact-page .hero-content {
            position: relative;
            z-index: 2;
        }

        .contact-page .hero-tag {
            display: inline-flex;
            align-items: center;
            gap: 9px;

            color: #d4af37;

            font-size: 12px;
            font-weight: 700;
            letter-spacing: 2px;

            margin-bottom: 18px;
        }

        .contact-page .hero-tag i {
            font-size: 14px;
        }


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

        .contact-page .contact-section {
            position: relative;

            padding: 110px 0;

            background:
                linear-gradient(
                    180deg,
                    #050505 0%,
                    #080808 100%
                );
        }

        .contact-page .contact-section::before {
            content: "";

            position: absolute;

            top: 0;
            left: 50%;

            width: 1px;
            height: 100px;

            background:
                linear-gradient(
                    to bottom,
                    transparent,
                    rgba(212,175,55,.6),
                    transparent
                );
        }

        .contact-page .contact-grid {
            display: grid;

            grid-template-columns:
                minmax(280px, .85fr)
                minmax(500px, 1.15fr);

            gap: 45px;

            align-items: stretch;
        }


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

        .contact-page .contact-info {
            position: relative;

            padding: 42px 38px;

            background:
                radial-gradient(
                    circle at top right,
                    rgba(212,175,55,.08),
                    transparent 35%
                ),
                #101010;

            border: 1px solid #292929;
            border-radius: 12px;

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

            overflow: hidden;
        }

        .contact-page .contact-info::before {
            content: "";

            position: absolute;

            top: 0;
            left: 0;

            width: 100%;
            height: 2px;

            background:
                linear-gradient(
                    90deg,
                    transparent,
                    #d4af37,
                    transparent
                );
        }

        .contact-page .contact-info .section-tag {
            display: inline-block;

            margin-bottom: 15px;

            color: #d4af37;

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

            letter-spacing: 2px;
        }

        .contact-page .contact-info h2 {
            margin-bottom: 14px;

            color: #fff;

            font-size: clamp(28px, 3vw, 36px);
            line-height: 1.2;
        }

        .contact-page .contact-info h2 span {
            color: #d4af37;
        }

        .contact-page .contact-info > p {
            margin-bottom: 30px;

            color: #999;

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


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

        .contact-page .contact-item {
            display: flex;

            gap: 16px;

            padding: 19px 0;

            border-bottom: 1px solid #252525;
        }

        .contact-page .contact-item:last-of-type {
            border-bottom: none;
        }

        .contact-page .contact-icon {
            flex: 0 0 46px;

            width: 46px;
            height: 46px;

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

            background: #181818;

            border: 1px solid rgba(212,175,55,.35);

            border-radius: 8px;

            color: #d4af37;

            transition: .3s ease;
        }

        .contact-page .contact-item:hover .contact-icon {
            background: #d4af37;
            color: #050505;

            transform: translateY(-2px);
        }

        .contact-page .contact-item h3 {
            margin-bottom: 4px;

            color: #fff;

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

        .contact-page .contact-item p,
        .contact-page .contact-item a {
            color: #777;

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

            text-decoration: none;

            transition: .3s ease;
        }

        .contact-page .contact-item a:hover {
            color: #d4af37;
        }


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

        .contact-page .contact-social {
            margin-top: 28px;
        }

        .contact-page .contact-social h3 {
            margin-bottom: 13px;

            color: #fff;

            font-size: 13px;
        }

        .contact-page .contact-social .social-links {
            display: flex;
            gap: 10px;
        }

        .contact-page .contact-social .social-links a {
            width: 38px;
            height: 38px;

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

            background: #181818;

            border: 1px solid #303030;
            border-radius: 6px;

            color: #aaa;

            transition: .3s ease;
        }

        .contact-page .contact-social .social-links a:hover {
            background: #d4af37;
            border-color: #d4af37;
            color: #050505;

            transform: translateY(-3px);
        }


        /* =====================================================
           FORM CONTAINER
        ====================================================== */

        .contact-page .contact-form-container {
            position: relative;

            padding: 48px;

            background:
                linear-gradient(
                    145deg,
                    rgba(255,255,255,.025),
                    transparent 30%
                ),
                #101010;

            border: 1px solid #292929;
            border-radius: 12px;

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

        .contact-page .contact-form-container::before {
            content: "";

            position: absolute;

            top: 0;
            left: 35px;
            right: 35px;

            height: 2px;

            background:
                linear-gradient(
                    90deg,
                    transparent,
                    #d4af37,
                    transparent
                );
        }


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

        .contact-page .form-heading {
            margin-bottom: 32px;

            padding-bottom: 24px;

            border-bottom: 1px solid #292929;
        }

        .contact-page .form-heading h2 {
            margin-bottom: 8px;

            color: #fff;

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

        .contact-page .form-heading h2 span {
            color: #d4af37;
        }

        .contact-page .form-heading h2::after {
            content: "";

            display: block;

            width: 45px;
            height: 2px;

            margin-top: 12px;

            background: #d4af37;
        }

        .contact-page .form-heading p {
            color: #777;

            font-size: 12px;
        }


        /* =====================================================
           FORM
        ====================================================== */

        .contact-page .contact-form {
            display: flex;
            flex-direction: column;

            gap: 22px;
        }

        .contact-page .form-row {
            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 20px;
        }

        .contact-page .form-group {
            display: flex;
            flex-direction: column;
        }

        .contact-page .form-group label {
            margin-bottom: 8px;

            color: #ddd;

            font-size: 12px;
            font-weight: 600;
        }

        .contact-page .form-group label span {
            color: #d4af37;
        }


        /* =====================================================
           INPUTS
        ====================================================== */

        .contact-page .form-group input,
        .contact-page .form-group select,
        .contact-page .form-group textarea {

            width: 100%;

            padding: 14px 16px;

            background: #080808;

            border: 1px solid #303030;
            border-radius: 6px;

            color: #fff;

            font-family: inherit;
            font-size: 12px;

            outline: none;

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

        .contact-page .form-group input:hover,
        .contact-page .form-group select:hover,
        .contact-page .form-group textarea:hover {
            border-color: #454545;
        }

        .contact-page .form-group input:focus,
        .contact-page .form-group select:focus,
        .contact-page .form-group textarea:focus {

            border-color: #d4af37;

            background: #0b0b0b;

            box-shadow:
                0 0 0 3px rgba(212,175,55,.07);
        }

        .contact-page .form-group input::placeholder,
        .contact-page .form-group textarea::placeholder {
            color: #555;
        }

        .contact-page .form-group select {
            appearance: none;
            cursor: pointer;
        }

        .contact-page .form-group select option {
            background: #111;
            color: #fff;
        }

        .contact-page .form-group textarea {
            min-height: 165px;

            resize: vertical;

            line-height: 1.7;
        }


        /* =====================================================
           SELECT WRAPPER
        ====================================================== */

        .contact-page .select-wrapper {
            position: relative;
        }

        .contact-page .select-wrapper i {
            position: absolute;

            right: 16px;
            top: 50%;

            transform: translateY(-50%);

            color: #d4af37;

            font-size: 11px;

            pointer-events: none;
        }


        /* =====================================================
           SUBMIT
        ====================================================== */

        .contact-page .contact-submit {
            position: relative;

            width: 100%;

            padding: 17px 20px;

            background: #d4af37;

            border: 1px solid #d4af37;
            border-radius: 6px;

            color: #050505;

            font-family: inherit;

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

            cursor: pointer;

            overflow: hidden;

            transition:
                transform .3s ease,
                background .3s ease,
                box-shadow .3s ease;
        }

        .contact-page .contact-submit::before {
            content: "";

            position: absolute;

            top: 0;
            left: -100%;

            width: 100%;
            height: 100%;

            background:
                linear-gradient(
                    90deg,
                    transparent,
                    rgba(255,255,255,.25),
                    transparent
                );

            transition: left .5s ease;
        }

        .contact-page .contact-submit:hover::before {
            left: 100%;
        }

        .contact-page .contact-submit:hover {
            background: #f3d675;

            transform: translateY(-2px);

            box-shadow:
                0 12px 30px rgba(212,175,55,.18);
        }

        .contact-page .contact-submit i {
            margin-right: 8px;
        }


        /* =====================================================
           SUCCESS MESSAGE
        ====================================================== */

        .contact-page .form-success {
            display: none;

            margin-top: 10px;

            padding: 15px 17px;

            background: rgba(54,194,117,.07);

            border: 1px solid rgba(54,194,117,.35);

            border-radius: 6px;

            color: #36c275;

            font-size: 12px;

            line-height: 1.6;
        }

        .contact-page .form-success.show {
            display: block;
        }


        /* =====================================================
           MAP
        ====================================================== */

        .contact-page .map-section {
            position: relative;

            padding: 0 0 110px;

            background: #080808;
        }

        .contact-page .map-heading {
            margin-bottom: 30px;

            text-align: center;
        }

        .contact-page .map-heading .section-tag {
            display: inline-block;

            margin-bottom: 12px;

            color: #d4af37;

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

            letter-spacing: 2px;
        }

        .contact-page .map-heading h2 {
            color: #fff;

            font-size: clamp(28px, 4vw, 40px);

            line-height: 1.2;
        }

        .contact-page .map-heading h2 span {
            color: #d4af37;
        }

        .contact-page .map-heading p {
            max-width: 600px;

            margin: 12px auto 0;

            color: #777;

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

        .contact-page .map-wrapper {
            position: relative;

            height: 430px;

            border: 1px solid #292929;
            border-radius: 12px;

            overflow: hidden;

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

        .contact-page .map-wrapper::after {
            content: "";

            position: absolute;
            inset: 0;

            pointer-events: none;

            border: 1px solid rgba(212,175,55,.12);
        }

        .contact-page .map-wrapper iframe {
            width: 100%;
            height: 100%;

            border: 0;

            filter:
                grayscale(100%)
                contrast(1.1)
                brightness(.65);
        }


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

        .contact-page .cta {
            position: relative;
            overflow: hidden;
        }

        .contact-page .cta::before {
            content: "";

            position: absolute;

            width: 350px;
            height: 350px;

            right: -120px;
            top: -160px;

            border-radius: 50%;

            border: 1px solid rgba(212,175,55,.08);

            box-shadow:
                0 0 0 60px rgba(212,175,55,.025),
                0 0 0 120px rgba(212,175,55,.015);
        }


        /* =====================================================
           WHATSAPP
        ====================================================== */

        .contact-page .whatsapp-float {
            z-index: 1000;
        }


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

        @media (max-width: 1000px) {

            .contact-page .contact-grid {
                grid-template-columns: 1fr;
            }

        }


        @media (max-width: 700px) {

            .contact-page .contact-section {
                padding: 80px 0;
            }

            .contact-page .contact-info,
            .contact-page .contact-form-container {
                padding: 32px 25px;
            }

            .contact-page .form-row {
                grid-template-columns: 1fr;
                gap: 22px;
            }

            .contact-page .map-section {
                padding-bottom: 80px;
            }

            .contact-page .map-wrapper {
                height: 330px;
            }

        }


        @media (max-width: 480px) {

            .contact-page .contact-section {
                padding: 65px 0;
            }

            .contact-page .contact-info,
            .contact-page .contact-form-container {
                border-radius: 8px;
            }

            .contact-page .form-heading h2 {
                font-size: 23px;
            }

            .contact-page .map-wrapper {
                height: 280px;
            }

        }

    
        /* =====================================================
           SHARED PAGE HERO - MATCH HOME / ABOUT US
        ====================================================== */

        .contact-page .page-hero {
            min-height: 65vh !important;
            position: relative;
            overflow: hidden;
        }

        .contact-page .page-hero::before {
            content: "";
            position: absolute;
            width: 450px;
            height: 450px;
            border: 1px solid rgba(212, 175, 55, 0.1);
            border-radius: 50%;
            right: -150px;
            top: 15%;
            pointer-events: none;
            background: transparent;
            box-shadow: none;
            z-index: 0;
        }

        .contact-page .page-hero::after {
            content: "";
            position: absolute;
            width: 250px;
            height: 250px;
            border: 1px solid rgba(212, 175, 55, 0.07);
            border-radius: 50%;
            left: -100px;
            bottom: 5%;
            pointer-events: none;
            background: transparent;
            box-shadow: none;
            z-index: 0;
        }

        .contact-page .page-hero .hero-content {
            position: relative;
            z-index: 2;
            width: min(90%, 1200px);
            max-width: none !important;
            margin: 0 auto;
            padding-top: 150px !important;
            padding-bottom: 80px !important;
        }

        .contact-page .page-hero .section-tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--gold);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 18px;
        }

        .contact-page .page-hero h1 {
            max-width: 850px;
            color: var(--white);
            font-size: clamp(40px, 5vw, 62px) !important;
            line-height: 1.1 !important;
            font-weight: 800;
            letter-spacing: -2px !important;
            margin-bottom: 25px;
        }

        .contact-page .page-hero h1 span {
            display: inline !important;
            color: var(--gold) !important;
        }

        .contact-page .page-hero p {
            max-width: 700px !important;
            color: var(--text-light) !important;
            font-size: 16px !important;
            line-height: 1.9 !important;
            margin-bottom: 0;
        }


/* =========================================================
   GLOBAL PAGE CONSISTENCY OVERRIDES
   Home and About Us define the primary visual language.
   Inner pages use the same header, container and page-hero system.
   ========================================================= */

.header .navbar,
.header .nav-container {
    width: min(90%, var(--container));
    min-height: 82px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page-hero {
    min-height: 65vh !important;
    position: relative;
    overflow: hidden;
}

.page-hero::before {
    background:
        radial-gradient(circle at 85% 30%, rgba(212, 175, 55, 0.13), transparent 25%),
        radial-gradient(circle at 15% 75%, rgba(212, 175, 55, 0.08), transparent 30%),
        linear-gradient(135deg, #050505, #111111 50%, #050505) !important;
    z-index: 0 !important;
}

.page-hero::after {
    width: 450px !important;
    height: 450px !important;
    right: -150px !important;
    top: 15% !important;
    bottom: auto !important;
    left: auto !important;
    border: 1px solid rgba(212, 175, 55, 0.10) !important;
    box-shadow: none !important;
    z-index: 0 !important;
}

.page-hero .hero-overlay {
    z-index: 1;
}

.page-hero .hero-content,
.page-hero .hero-content.container {
    width: min(90%, var(--container)) !important;
    max-width: var(--container) !important;
    margin: 0 auto !important;
    padding-top: 150px !important;
    padding-bottom: 80px !important;
    position: relative;
    z-index: 2;
}

.page-hero .section-tag {
    color: var(--gold) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    margin-bottom: 18px !important;
}

.page-hero h1 {
    max-width: 850px !important;
    color: var(--white) !important;
    font-size: clamp(40px, 5vw, 62px) !important;
    line-height: 1.1 !important;
    letter-spacing: -2px !important;
    font-weight: 800 !important;
    margin-bottom: 25px !important;
}

.page-hero h1 span {
    display: inline !important;
    color: var(--gold) !important;
}

.page-hero p {
    max-width: 700px !important;
    color: var(--text-light) !important;
    font-size: 16px !important;
    line-height: 1.9 !important;
    margin-bottom: 32px !important;
}

/* Keep each page's content unique, but make section spacing and headings consistent. */
.services-intro,
.projects-section,
.quote-section,
.contact-section {
    background: var(--black);
}

.services-intro .container,
.projects-section .container,
.quote-section .container,
.contact-section .container {
    width: min(90%, var(--container));
    margin: 0 auto;
}

@media (max-width: 992px) {
    .header .navbar,
    .header .nav-container {
        width: min(92%, var(--container));
    }

    .page-hero .hero-content,
    .page-hero .hero-content.container {
        width: min(92%, var(--container)) !important;
    }
}

@media (max-width: 768px) {
    .page-hero {
        min-height: 62vh !important;
    }

    .page-hero .hero-content,
    .page-hero .hero-content.container {
        padding-top: 125px !important;
        padding-bottom: 65px !important;
    }

    .page-hero h1 {
        font-size: clamp(36px, 9vw, 48px) !important;
        letter-spacing: -1.2px !important;
    }
}