/*=========================================================
                MAZETECH HUB
      Professional Security & Technology Theme
=========================================================*/

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


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

:root {

    --primary: #081C36;
    --primary-light: #103A67;

    --secondary: #00C8FF;

    --accent: #00D26A;

    --white: #FFFFFF;

    --light: #F5F8FC;

    --dark: #09121F;

    --text: #6D7C91;

    --border: #E5EDF5;

    --shadow:
        0 10px 35px rgba(0, 0, 0, .08);

    --shadow-hover:
        0 20px 45px rgba(0, 200, 255, .18);

    --gradient:
        linear-gradient(135deg,
            #081C36,
            #123C69,
            #0A5AA5);

}


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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    font-family: 'Poppins', sans-serif;

    background: var(--light);

    color: #222;

    overflow-x: hidden;

    line-height: 1.7;

}

img {

    max-width: 100%;

}

a {

    text-decoration: none;

    transition: .35s;

}


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

::-webkit-scrollbar {

    width: 10px;

}

::-webkit-scrollbar-track {

    background: #edf2f7;

}

::-webkit-scrollbar-thumb {

    background: var(--secondary);

    border-radius: 50px;

}

::-webkit-scrollbar-thumb:hover {

    background: #0099d6;

}


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

.custom-navbar {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 9999;

    padding: 14px 0;

    transition: .4s;

    background: rgba(8, 18, 31, .92);

    backdrop-filter: blur(18px);

    border-bottom: 1px solid rgba(255, 255, 255, .06);

}

.custom-navbar.scrolled {

    padding: 10px 0;

    background: #081C36;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .20);

}

.navbar-brand img {

    height: 90px;

}

.navbar-nav .nav-link,
.navbar-nav .nav-link.active,
.navbar-nav .show>.nav-link {

    color: #fff !important;

}

.navbar-nav .nav-link:hover {

    color: var(--secondary) !important;

}

.navbar-nav .nav-link.active {

    color: #fff !important;

}

.nav-link::after {

    content: "";

    position: absolute;

    bottom: -8px;

    left: 0;

    width: 0;

    height: 2px;

    background: var(--secondary);

    transition: .35s;

}

.nav-link:hover {

    color: var(--secondary) !important;

}

.nav-link:hover::after {

    width: 100%;

}


/*=========================================================
                  MAZETECH HUB BRAND
=========================================================*/

.navbar-brand {

    display: flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

}

.brand-text {

    display: flex;

    flex-direction: column;

    line-height: 1.1;

}

.brand-title {

    color: #FFFFFF;

    font-size: 1.6rem;

    font-weight: 800;

    letter-spacing: .5px;

}

.brand-subtitle {

    color: var(--secondary);

    font-size: .75rem;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.navbar-brand img {
    height: 80px;
    width: auto;
}

.navbar-brand:hover img {

    transform: scale(1.08) rotate(-5deg);

}


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

@media (max-width:768px) {

    .brand-title {

        font-size: 1.05rem;

    }

    .brand-subtitle {

        display: none;

    }

    .navbar-brand img {

        height: 50px;

    }

}

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

.hero {
    position: relative;
    overflow: hidden;
    min-height: 100vh;

    display: flex;
    align-items: center;

    background:
        linear-gradient(rgba(8, 26, 47, 0.75),
            rgba(8, 26, 47, 0.82)),
        url("../images/hero1.png");

    background-size: cover;
    background-position: center center;
    transition: background-image 0.8s ease-in-out;

}

.hero::before {
    content: "";
    position: absolute;
    z-index: 0;

    width: 700px;
    height: 700px;

    background: radial-gradient(circle,
            rgba(0, 200, 255, .20),
            transparent 70%);

    right: -250px;
    top: -200px;
}

.hero::after {
    content: "";
    position: absolute;
    z-index: 0;

    width: 450px;
    height: 450px;

    background: radial-gradient(circle,
            rgba(0, 210, 106, .12),
            transparent 70%);

    left: -150px;
    bottom: -120px;
}

.overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: 1;
    pointer-events: none;
}

.hero .container {

    position: relative;

    z-index: 5;

}

.hero-badge {

    display: inline-block;

    padding: 10px 22px;

    border-radius: 50px;

    background: rgba(0, 200, 255, .12);

    color: var(--secondary);

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

    margin-bottom: 30px;

    font-size: .9rem;

    font-weight: 600;

}

.hero h1 {

    font-size: 4.8rem;

    font-weight: 800;

    color: white;

    line-height: 1.1;

}

.hero p {

    color: #d7e4ef;

    max-width: 650px;

    margin: 30px 0;

    font-size: 1.15rem;

}

.hero-image {

    animation: float 5s ease-in-out infinite;

    filter:

        drop-shadow(0 30px 60px rgba(0, 200, 255, .20));

}

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

.btn {

    border-radius: 50px;

    padding: 15px 35px;

    font-weight: 700;

    transition: .35s;

}

.btn-success {

    background:

        linear-gradient(135deg,
            #00D26A,
            #00C8FF);

    border: none;

    color: white;

    box-shadow:

        0 12px 35px rgba(0, 200, 255, .30);

}

.btn-success:hover {

    transform: translateY(-5px);

    box-shadow:

        0 20px 45px rgba(0, 200, 255, .40);

}

.btn-outline-light {

    border: 2px solid white;

}

.btn-outline-light:hover {

    background: white;

    color: #081C36;

}

/*=========================================================
                    SECTION DEFAULT
=========================================================*/

section {

    position: relative;

    padding: 110px 0;

}

.section-title {

    text-align: center;

    margin-bottom: 70px;

}

.section-title span {

    display: inline-block;

    color: var(--secondary);

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-bottom: 15px;

}

.section-title h2 {

    font-size: 3rem;

    font-weight: 800;

    color: var(--primary);

    margin-bottom: 20px;

}

.section-title p {

    max-width: 700px;

    margin: auto;

    color: var(--text);

    font-size: 1.1rem;

    line-height: 1.8;

}

.section-title h2::after {

    content: "";

    display: block;

    width: 90px;

    height: 4px;

    margin: 25px auto 0;

    border-radius: 30px;

    background: linear-gradient(90deg,
            var(--accent),
            var(--secondary));

}


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

.about {

    background: var(--white);

}

.about-image {

    position: relative;

}

.about-image img {

    width: 100%;

    border-radius: 20px;

    box-shadow: var(--shadow);

}

.about-content {

    padding-left: 50px;

}

.about-content h3 {

    color: var(--primary);

    font-size: 2.6rem;

    font-weight: 800;

    margin-bottom: 25px;

}

.about-content p {

    color: var(--text);

    margin-bottom: 20px;

    line-height: 1.9;

}

.about-list {

    list-style: none;

    margin-top: 30px;

    padding: 0;

}

.about-list li {

    margin-bottom: 18px;

    color: var(--dark);

    font-weight: 500;

}

.about-list i {

    color: var(--accent);

    margin-right: 12px;

    font-size: 18px;

}


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

.stats {

    margin-top: 60px;

}

.stat-card {

    background: var(--white);

    border-radius: 18px;

    padding: 35px;

    text-align: center;

    box-shadow: var(--shadow);

    transition: .35s;

    height: 100%;

}

.stat-card:hover {

    transform: translateY(-10px);

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

}

.stat-card i {

    font-size: 48px;

    color: var(--secondary);

    margin-bottom: 20px;

}

.stat-card h2 {

    font-size: 2.8rem;

    font-weight: 800;

    color: var(--primary);

}

.stat-card p {

    color: var(--text);

    margin: 0;

}


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

.services {

    background: #F6FAFD;

}

.service-card {

    position: relative;

    background: white;

    border-radius: 20px;

    padding: 45px 35px;

    overflow: hidden;

    transition: .4s;

    box-shadow: var(--shadow);

    height: 100%;

}

.service-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 5px;

    background: linear-gradient(90deg,
            var(--accent),
            var(--secondary));

}

.service-card:hover {

    transform: translateY(-12px);

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

}

.service-card i {

    width: 90px;

    height: 90px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 40px;

    color: white;

    border-radius: 50%;

    background: var(--gradient);

    margin-bottom: 30px;

}

.service-card h3 {

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--primary);

    margin-bottom: 20px;

}

.service-card p {

    color: var(--text);

    margin-bottom: 25px;

}

.service-card a {

    color: var(--secondary);

    font-weight: 700;

}

.service-card a:hover {

    color: var(--accent);

}

/*=========================================================
                    INDUSTRIES
=========================================================*/

.industries {

    background: var(--white);

}

.industry-card {

    background: linear-gradient(180deg,
            #FFFFFF,
            #F8FBFD);

    border-radius: 20px;

    padding: 40px 30px;

    text-align: center;

    height: 100%;

    transition: .35s;

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

    box-shadow: var(--shadow);

}

.industry-card:hover {

    transform: translateY(-12px);

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

    border-color: var(--secondary);

}

.industry-card i {

    width: 85px;

    height: 85px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-size: 38px;

    color: white;

    background: var(--gradient);

    margin-bottom: 25px;

}

.industry-card h4 {

    font-size: 1.4rem;

    font-weight: 700;

    color: var(--primary);

    margin-bottom: 18px;

}

.industry-card p {

    color: var(--text);

}


/*=========================================================
                    WHY CHOOSE US
=========================================================*/

.why-us {

    background: #F7FAFD;

}

.why-image img {

    border-radius: 25px;

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

}

.why-box {

    display: flex;

    gap: 25px;

    margin-bottom: 30px;

    padding: 25px;

    border-radius: 18px;

    background: white;

    transition: .35s;

    box-shadow: var(--shadow);

}

.why-box:hover {

    transform: translateX(10px);

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

}

.why-box i {

    width: 70px;

    height: 70px;

    min-width: 70px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: var(--gradient);

    color: white;

    border-radius: 18px;

    font-size: 30px;

}

.why-box h4 {

    color: var(--primary);

    font-weight: 700;

    margin-bottom: 10px;

}

.why-box p {

    color: var(--text);

    margin: 0;

}


/*=========================================================
                    EXPERTISE
=========================================================*/

.expertise {

    background: var(--white);

}

.expertise-card {

    background: white;

    padding: 40px;

    border-radius: 20px;

    box-shadow: var(--shadow);

    transition: .35s;

    height: 100%;

    position: relative;

    overflow: hidden;

}

.expertise-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 5px;

    height: 100%;

    background: var(--gradient);

}

.expertise-card:hover {

    transform: translateY(-12px);

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

}

.expertise-card i {

    font-size: 50px;

    color: var(--secondary);

    margin-bottom: 25px;

}

.expertise-card h3 {

    color: var(--primary);

    font-weight: 700;

    margin-bottom: 20px;

}

.expertise-card ul {

    padding-left: 20px;

}

.expertise-card li {

    margin-bottom: 14px;

    color: var(--text);

}


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

.process {

    background: #F5F9FC;

}

.process-wrapper {

    max-width: 900px;

    margin: auto;

    position: relative;

}

.process-wrapper::before {

    content: "";

    position: absolute;

    left: 30px;

    top: 0;

    bottom: 0;

    width: 4px;

    background: linear-gradient(var(--secondary),

            var(--accent));

}

.process-step {

    position: relative;

    display: flex;

    gap: 30px;

    background: white;

    border-radius: 20px;

    padding: 35px;

    margin-bottom: 35px;

    box-shadow: var(--shadow);

    transition: .35s;

}

.process-step:hover {

    transform: translateX(12px);

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

}

.process-number {

    width: 65px;

    height: 65px;

    min-width: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--gradient);

    color: white;

    font-size: 24px;

    font-weight: 800;

}

.process-step h3 {

    color: var(--primary);

    font-weight: 700;

    margin-bottom: 12px;

}

.process-step p {

    color: var(--text);

}

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

.projects {

    background: var(--white);

}

.project-card {

    position: relative;

    overflow: hidden;

    border-radius: 22px;

    background: white;

    box-shadow: var(--shadow);

    transition: .4s;

    height: 100%;

}

.project-card img {

    width: 100%;

    height: 260px;

    object-fit: cover;

    transition: .6s;

}

.project-card:hover img {

    transform: scale(1.08);

}

.project-content {

    padding: 30px;

}

.project-content h3 {

    color: var(--primary);

    font-size: 1.4rem;

    font-weight: 700;

    margin-bottom: 15px;

}

.project-content p {

    color: var(--text);

    margin-bottom: 20px;

}

.project-card:hover {

    transform: translateY(-12px);

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

}


/*=========================================================
                    CLIENTS
=========================================================*/

.clients {

    background: #F5F8FC;

}

.client-card {

    background: white;

    border-radius: 18px;

    padding: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 150px;

    transition: .35s;

    box-shadow: var(--shadow);

}

.client-card img {

    max-width: 170px;

    opacity: .75;

    transition: .35s;

}

.client-card:hover {

    transform: translateY(-8px);

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

}

.client-card:hover img {

    opacity: 1;

}



/*=========================================================
                    TESTIMONIALS
=========================================================*/

.testimonials {

    background: var(--gradient);

    color: white;

}

.testimonial-card {

    background: rgba(255, 255, 255, .08);

    backdrop-filter: blur(15px);

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

    border-radius: 20px;

    padding: 40px;

    transition: .35s;

}

.testimonial-card:hover {

    transform: translateY(-10px);

}

.testimonial-card p {

    font-size: 1.05rem;

    line-height: 1.9;

}

.testimonial-card h4 {

    margin-top: 25px;

    font-weight: 700;

}

.testimonial-card small {

    color: #D9F6FF;

}


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

.faq {

    background: var(--white);

}

.accordion-item {

    border: none;

    border-radius: 18px;

    margin-bottom: 20px;

    overflow: hidden;

    box-shadow: var(--shadow);

}

.accordion-button {

    font-size: 1.05rem;

    font-weight: 600;

    padding: 22px;

    background: white;

}

.accordion-button:not(.collapsed) {

    background: var(--primary);

    color: white;

}

.accordion-button:focus {

    box-shadow: none;

}

.accordion-body {

    padding: 25px;

    color: var(--text);

    line-height: 1.9;

}


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

.quote {

    background: #F7FAFD;

}

.contact-info {

    padding-right: 50px;

}

.contact-info h3 {

    color: var(--primary);

    font-size: 2.3rem;

    font-weight: 800;

    margin-bottom: 25px;

}

.info-item {

    display: flex;

    align-items: flex-start;

    gap: 20px;

    margin-bottom: 30px;

}

.info-item i {

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: white;

    background: var(--gradient);

    font-size: 24px;

}

.info-item h5 {

    color: var(--primary);

    margin-bottom: 5px;

}

.info-item p {

    color: var(--text);

    margin: 0;

}


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

.quote-form {

    background: white;

    border-radius: 22px;

    padding: 45px;

    box-shadow: var(--shadow);

}

.form-control,

.form-select {

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

    border-radius: 12px;

    padding: 15px 18px;

    min-height: 55px;

    transition: .3s;

}

.form-control:focus,

.form-select:focus {

    border-color: var(--secondary);

    box-shadow: 0 0 0 .25rem rgba(0, 200, 255, .15);

}

textarea.form-control {

    min-height: 170px;

}

/* ===================================================
   PREMIUM FINISHING STYLES
   ===================================================*/

/* Smooth page animation */

body {
    animation: fadePage .8s ease;
}

@keyframes fadePage {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Smooth transitions */

a,
button,
.btn,
.card,
.service-card,
.client-card,
.industry-card,
.process-step,
.why-box,
.expertise-card {
    transition: all .35s ease;
}


/* Images */

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


/* Section spacing */

section {
    position: relative;
    overflow: hidden;
}


/* Decorative gradient line */

.section-title::after {
    content: "";
    display: block;
    width: 120px;
    height: 4px;
    margin: 18px auto 0;
    border-radius: 50px;
    background: linear-gradient(90deg,
            #00E676,
            #00C6FF,
            #0066FF);
}


/* Card hover glow */

.service-card:hover,
.client-card:hover,
.industry-card:hover,
.process-step:hover,
.expertise-card:hover,
.quote-form:hover {

    box-shadow:
        0 20px 50px rgba(0, 198, 255, .18);

}


/* Buttons */

.btn {

    border-radius: 50px;

    padding: 14px 34px;

    font-weight: 700;

    letter-spacing: .4px;

}


.btn-primary {

    background:
        linear-gradient(135deg,
            #00C6FF,
            #0084FF);

    border: none;

}


.btn-primary:hover {

    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(0, 198, 255, .4);

}


.btn-success {

    background:
        linear-gradient(135deg,
            #00E676,
            #00C6FF);

}


.btn-success:hover {

    transform: translateY(-4px);

}


/* Form styling */

.form-control,
.form-select {

    border-radius: 12px;

    border: 1px solid #d8e4ef;

    padding: 15px;

    transition: .3s;

}


.form-control:focus,
.form-select:focus {

    border-color: #00C6FF;

    box-shadow:
        0 0 0 .25rem rgba(0, 198, 255, .2);

}


/* Scrollbar */

::-webkit-scrollbar {

    width: 10px;

}

::-webkit-scrollbar-track {

    background: #081018;

}

::-webkit-scrollbar-thumb {

    background:
        linear-gradient(#00E676,
            #00C6FF);

    border-radius: 50px;

}


/* Text selection */

::selection {

    background: #00C6FF;

    color: white;

}


/* Floating animation */

@keyframes float {

    0% {
        transform: translateY(0);
    }

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

    100% {
        transform: translateY(0);
    }

}

.hero img,
.about img {

    animation: float 5s ease-in-out infinite;

}


/* Navbar active */

.navbar-nav .nav-link,
.navbar-nav .nav-link.active,
.navbar-nav .show>.nav-link {

    color: #fff !important;

}

.navbar-nav .nav-link:hover {

    color: var(--secondary) !important;

}

.navbar-nav .nav-link.active {

    color: #fff !important;

}


/* Footer */

.footer {

    width: 100%;

    background: linear-gradient(135deg,
            #081C36 0%,
            #123C69 60%,
            #0A5AA5 100%);

    color: #fff;

    border-top: 4px solid #00C8FF;

    padding: 45px 0 20px;

}

.footer h4,
.footer h5 {
    color: #fff;
}

.footer p,
.footer a,
.footer li {
    color: rgba(255, 255, 255, .8);
}

.footer a:hover {
    color: #00C8FF;
}


/* WhatsApp */

.whatsapp-float {

    transition: .3s;

}

.whatsapp-float:hover {

    transform: scale(1.15);

    box-shadow:
        0 15px 40px rgba(0, 230, 118, .45);

}


/* Hero text */

.hero h1 {

    text-shadow:
        0 10px 30px rgba(0, 0, 0, .5);

}

.hero p {

    color: #d8e4ef;

}


/* Quote Form */

.quote-form {

    border-top: 5px solid #00C6FF;

}


/* Glass cards */

.glass {

    background: rgba(255, 255, 255, .08);

    backdrop-filter: blur(15px);

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

}


/* Background decorations */

.hero::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    background:
        radial-gradient(circle,
            rgba(0, 198, 255, .15),
            transparent 70%);

    right: -250px;

    top: -250px;

}

.hero::after {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    background:
        radial-gradient(circle,
            rgba(0, 230, 118, .10),
            transparent 70%);

    left: -180px;

    bottom: -180px;

}


/* Responsive improvements */

@media(max-width:991px) {

    .hero {

        text-align: center;

    }

    .section-title h2 {

        font-size: 2.3rem;

    }

}

@media(max-width:768px) {

    .hero {

        min-height: 700px;

    }

    .hero h1 {

        font-size: 2.3rem;

    }

    .hero p {

        font-size: 1rem;

    }

    .btn {

        width: 100%;

        margin-bottom: 15px;

    }

    .quote-form {

        padding: 25px;

    }

    .service-card,
    .client-card,
    .industry-card,
    .process-step,
    .expertise-card {

        margin-bottom: 20px;

    }

}

@media(max-width:576px) {

    .section-title h2 {

        font-size: 2rem;

    }

    .hero h1 {

        font-size: 2rem;

    }

}

/*=========================================================
                    PROJECTS & CLIENTS
=========================================================*/

.client-card {

    background: #fff;

    border-radius: 18px;

    padding: 40px 25px;

    text-align: center;

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

    transition: .35s;

    height: 100%;

    border: 1px solid #eef2f7;

}

.client-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 45px rgba(0, 200, 255, .18);

}

.client-card i {

    font-size: 3rem;

    color: var(--secondary);

    margin-bottom: 20px;

    display: block;

}

.client-card h4 {

    font-size: 1.2rem;

    font-weight: 700;

    color: var(--primary);

    margin: 0;

}

/*=========================================================
                    CARD IMPROVEMENTS
=========================================================*/

.service-card,
.client-card,
.project-card,
.industry-card,
.expertise-card {

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

}

.footer .container-fluid {
    padding-left: 60px;
    padding-right: 60px;
}

@media (max-width:768px) {

    .footer .container-fluid {
        padding-left: 20px;
        padding-right: 20px;
    }

}

/* ==========================================================
   MAZETECH HUB PUBLIC WEBSITE — PREMIUM UPGRADE
   Added for the redesigned hero, navbar, footer and controls
========================================================== */

:root {
    --mz-navy: #061426;
    --mz-navy-2: #0a2747;
    --mz-blue: #00c8ff;
    --mz-blue-2: #168cff;
    --mz-green: #00d26a;
    --mz-white: #ffffff;
    --mz-muted: #d9e8f5;
    --mz-border: rgba(255, 255, 255, .14);
    --mz-glass: rgba(6, 20, 38, .62);
    --mz-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

/* ---------- GLOBAL ---------- */

body {
    background:
        radial-gradient(circle at 15% 10%, rgba(0, 200, 255, .08), transparent 28%),
        radial-gradient(circle at 85% 90%, rgba(0, 210, 106, .06), transparent 28%),
        #f4f8fc;
}

main {
    min-height: 60vh;
}

.flash-wrapper {
    padding-top: 105px;
    position: relative;
    z-index: 100;
}

/* ---------- NAVBAR ---------- */

.custom-navbar {
    padding: 10px 0;
    background: rgba(6, 20, 38, .72);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: none;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.custom-navbar.scrolled {
    padding: 8px 0;
    background: rgba(6, 20, 38, .96);
    box-shadow: 0 12px 35px rgba(0, 0, 0, .24);
}

.navbar-brand img {
    height: 62px;
    width: auto;
    object-fit: contain;
    transition: transform .3s ease, filter .3s ease;
}

.navbar-brand:hover img {
    transform: scale(1.04);
    filter: drop-shadow(0 0 14px rgba(0, 200, 255, .25));
}

.brand-title {
    font-size: 1.35rem;
    letter-spacing: .3px;
}

.brand-subtitle {
    max-width: 330px;
    font-size: .63rem;
    letter-spacing: 1.25px;
    color: var(--mz-blue);
    white-space: normal;
}

.navbar-nav {
    gap: 3px;
}

.navbar-nav .nav-link {
    position: relative;
    padding: .7rem .72rem !important;
    font-size: .92rem;
    font-weight: 600;
    border-radius: 10px;
}

.navbar-nav .nav-link:hover {
    color: var(--mz-blue) !important;
    background: rgba(255, 255, 255, .05);
}

.navbar-nav .nav-link::after {
    left: 14px;
    right: 14px;
    bottom: 4px;
    width: auto;
    transform: scaleX(0);
    transform-origin: center;
}

.navbar-nav .nav-link:hover::after {
    width: auto;
    transform: scaleX(1);
}

.navbar-quote-btn {
    white-space: nowrap;
    padding: 11px 22px;
    box-shadow: 0 12px 30px rgba(0, 140, 255, .22);
}

.custom-toggler {
    width: 48px;
    height: 44px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
    box-shadow: none !important;
}

.hamburger-line {
    display: block;
    width: 100%;
    height: 2px;
    margin: 5px 0;
    background: #fff;
    border-radius: 999px;
}

/* ---------- HERO ---------- */

.hero {
    min-height: 100svh;
    padding: 118px 0 105px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(90deg,
            rgba(4, 14, 27, .96) 0%,
            rgba(6, 22, 42, .92) 38%,
            rgba(5, 23, 46, .68) 62%,
            rgba(4, 15, 29, .78) 100%),
        url("../images/hero1.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    isolation: isolate;
}

.hero .overlay {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, .2)),
        radial-gradient(circle at 75% 30%, rgba(0, 200, 255, .16), transparent 30%);
}

.hero .row {
    width: 100%;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    margin-bottom: 24px;
    border: 1px solid rgba(0, 200, 255, .32);
    border-radius: 999px;
    background: rgba(0, 200, 255, .09);
    box-shadow: inset 0 0 24px rgba(0, 200, 255, .04);
    color: var(--mz-blue);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 1.15px;
}

.hero-title {
    max-width: 760px;
    margin: 0;
    color: #fff;
    font-size: clamp(3rem, 6vw, 5.4rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -2px;
    text-wrap: balance;
}

.hero-title span {
    color: var(--mz-blue);
    text-shadow: 0 0 30px rgba(0, 200, 255, .28);
}

.hero-description {
    max-width: 760px;
    margin: 27px 0 0;
    color: #d7e5f1;
    font-size: 1.03rem;
    line-height: 1.9;
}

.hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.hero-features span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    background: rgba(255, 255, 255, .055);
    color: #f5fbff;
    font-size: .86rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.hero-features i {
    color: var(--mz-green);
}

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

.hero-buttons .btn {
    min-width: 170px;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.hero-glass {
    width: min(100%, 410px);
    padding: 31px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 26px;
    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, .10),
            rgba(255, 255, 255, .035));
    box-shadow: var(--mz-shadow);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #fff;
}

.hero-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(0, 200, 255, .11), transparent 48%);
}

.hero-glass {
    position: relative;
    overflow: hidden;
}

.hero-icon {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    margin-bottom: 21px;
    border-radius: 20px;
    color: #fff;
    font-size: 2rem;
    background: linear-gradient(135deg, var(--mz-blue-2), var(--mz-blue));
    box-shadow: 0 16px 35px rgba(0, 140, 255, .28);
}

.hero-glass h3 {
    position: relative;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
}

.hero-glass ul {
    position: relative;
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    columns: 2;
    column-gap: 24px;
}

.hero-glass li {
    break-inside: avoid;
    position: relative;
    margin-bottom: 12px;
    padding-left: 18px;
    color: #d8e7f2;
    font-size: .86rem;
}

.hero-glass li::before {
    content: "";
    position: absolute;
    top: .62em;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mz-blue);
    box-shadow: 0 0 12px rgba(0, 200, 255, .65);
}

.hero-contact-strip {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 6;
    border-top: 1px solid rgba(255, 255, 255, .11);
    background: rgba(4, 15, 29, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.hero-contact-strip .row > div {
    padding: 15px 10px;
    color: #dbe9f4;
    font-size: .84rem;
    font-weight: 600;
    border-right: 1px solid rgba(255, 255, 255, .08);
}

.hero-contact-strip .row > div:last-child {
    border-right: 0;
}

.hero-contact-strip i {
    margin-right: 8px;
    color: var(--mz-blue);
}

/* ---------- BUTTONS ---------- */

.btn {
    min-height: 48px;
    border-radius: 999px;
}

.btn-primary {
    background: linear-gradient(135deg, #147fff, #00c8ff);
    border: 0;
    box-shadow: 0 12px 30px rgba(0, 140, 255, .25);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #00c8ff, #147fff);
}

.btn-success {
    background: linear-gradient(135deg, #00ba5d, #00d26a);
    border: 0;
    box-shadow: 0 12px 30px rgba(0, 210, 106, .22);
}

.btn-outline-light {
    background: rgba(255, 255, 255, .04);
    backdrop-filter: blur(8px);
}

/* ---------- FOOTER ---------- */

.footer {
    position: relative;
    overflow: hidden;
    padding: 70px 0 24px;
    border-top: 1px solid rgba(0, 200, 255, .25);
    background:
        radial-gradient(circle at 10% 0%, rgba(0, 200, 255, .12), transparent 30%),
        radial-gradient(circle at 90% 100%, rgba(0, 140, 255, .12), transparent 28%),
        linear-gradient(135deg, #061426 0%, #0a2747 60%, #0c3863 100%);
}

.footer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .24;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 38px 38px;
}

.footer .container-fluid {
    position: relative;
    z-index: 1;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.footer-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.footer h3 {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 800;
}

.footer h4 {
    position: relative;
    margin-bottom: 24px;
    color: #fff;
    font-size: 1.04rem;
    font-weight: 700;
}

.footer h4::after {
    content: "";
    display: block;
    width: 42px;
    height: 3px;
    margin-top: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--mz-blue), var(--mz-green));
}

.footer-tagline {
    color: var(--mz-blue) !important;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .8px;
}

.footer-availability {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
    color: #eaf7ff;
    font-size: .84rem;
}

.footer-availability i {
    color: var(--mz-green);
}

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

.footer li {
    margin-bottom: 9px;
}

.footer li a,
.footer li {
    font-size: .89rem;
}

.footer-services {
    columns: 1;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 14px;
    color: rgba(255, 255, 255, .82);
    font-size: .9rem;
}

.footer-contact-item i {
    width: 20px;
    flex: 0 0 20px;
    margin-top: 2px;
    color: var(--mz-blue);
}

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

.social-links a {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    background: rgba(255, 255, 255, .055);
    color: #fff;
}

.social-links a:hover {
    transform: translateY(-3px);
    color: #fff;
    border-color: var(--mz-blue);
    background: linear-gradient(135deg, var(--mz-blue-2), var(--mz-blue));
}

.footer hr {
    margin: 45px 0 22px;
    border-color: rgba(255, 255, 255, .12);
}

.footer-bottom {
    color: rgba(255, 255, 255, .7);
    font-size: .82rem;
}

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

.footer-bottom-links a {
    color: rgba(255, 255, 255, .75);
}

/* ---------- FLOATING CONTROLS ---------- */

.whatsapp-float,
.back-to-top {
    position: fixed;
    z-index: 9998;
    right: 22px;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    font-size: 1.35rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
}

.whatsapp-float {
    bottom: 22px;
    background: linear-gradient(135deg, #00ba5d, #00d26a);
}

.back-to-top {
    bottom: 88px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    background: linear-gradient(135deg, #147fff, #00c8ff);
    transition: .3s ease;
}

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

.whatsapp-float:hover,
.back-to-top:hover {
    transform: translateY(-4px) scale(1.04);
    color: #fff;
}

/* ---------- POLISH ---------- */

.service-card,
.industry-card,
.expertise-card,
.client-card,
.project-card,
.quote-form,
.why-box,
.process-step {
    border-color: rgba(8, 28, 54, .06);
}

.service-card:hover,
.industry-card:hover,
.expertise-card:hover,
.client-card:hover,
.project-card:hover {
    box-shadow: 0 22px 55px rgba(0, 120, 220, .16);
}

.section-title h2 {
    text-wrap: balance;
}

::selection {
    color: #fff;
    background: var(--mz-blue-2);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .hero {
        background-attachment: scroll;
    }
}

/* ==========================================================
   MAZETECH HUB — LIGHTWEIGHT FULL DARK-BLUE HOMEPAGE THEME
   Keeps the premium look without heavy moving backgrounds.
========================================================== */

:root {
    --site-bg-1: #061426;
    --site-bg-2: #081a2f;
    --site-bg-3: #0b2038;
    --site-bg-4: #102b4c;
    --site-card: rgba(10, 39, 71, .88);
    --site-card-soft: rgba(16, 43, 76, .74);
    --site-card-border: rgba(0, 200, 255, .18);
    --site-heading: #ffffff;
    --site-copy: #d8e5f0;
    --site-muted: #a9bfd1;
}

/* ---------- ENTIRE PUBLIC WEBSITE BACKGROUND ---------- */

html {
    background: var(--site-bg-1);
}

body {
    color: var(--site-copy);
    background:
        radial-gradient(
            circle at 12% 14%,
            rgba(0, 200, 255, .08),
            transparent 24%
        ),
        radial-gradient(
            circle at 88% 72%,
            rgba(0, 119, 255, .07),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            var(--site-bg-1) 0%,
            var(--site-bg-2) 28%,
            var(--site-bg-3) 62%,
            var(--site-bg-1) 100%
        );
    background-attachment: scroll;
}

main {
    background: transparent;
}

/* ---------- SECTION BACKGROUNDS ---------- */

.about,
.services,
.expertise,
.industries,
.why-us,
.process,
.projects,
.quote,
.faq,
.reviews,
.testimonials,
.clients {
    color: var(--site-copy);
    border-top: 1px solid rgba(255, 255, 255, .035);
    border-bottom: 1px solid rgba(0, 200, 255, .04);
}

/* Alternating tones provide separation without animation. */

.about,
.industries,
.process,
.faq,
.reviews {
    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(0, 200, 255, .055),
            transparent 23%
        ),
        linear-gradient(
            180deg,
            rgba(10, 39, 71, .90),
            rgba(6, 20, 38, .96)
        );
}

.services,
.expertise,
.why-us,
.projects,
.quote,
.clients {
    background:
        radial-gradient(
            circle at 18% 82%,
            rgba(0, 119, 255, .055),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            rgba(6, 20, 38, .98),
            rgba(8, 26, 47, .96)
        );
}

/* ---------- SECTION TITLES AND COPY ---------- */

.section-title h2,
.about-content h3,
.contact-info h3,
.process-step h3,
.project-content h3,
.client-card h4,
.why-box h4,
.service-card h3,
.industry-card h4,
.expertise-card h3 {
    color: var(--site-heading);
}

.section-title p,
.about-content p,
.contact-info > p,
.process-step p,
.project-content p,
.industry-card p,
.service-card p,
.expertise-card li,
.why-box p,
.client-card p,
.faq .accordion-body,
.reviews p {
    color: var(--site-copy);
}

.section-title span,
.section-subtitle {
    color: #00c8ff;
}

/* ---------- DARK GLASS CARDS ---------- */

.service-card,
.industry-card,
.expertise-card,
.client-card,
.project-card,
.stat-card,
.why-box,
.process-step,
.quote-form,
.testimonial-card,
.reviews .card,
.faq .accordion-item,
.contact-info {
    background:
        linear-gradient(
            145deg,
            rgba(16, 43, 76, .88),
            rgba(7, 25, 46, .94)
        );
    color: var(--site-copy);
    border: 1px solid var(--site-card-border);
    box-shadow:
        0 15px 38px rgba(0, 0, 0, .22);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.service-card:hover,
.industry-card:hover,
.expertise-card:hover,
.client-card:hover,
.project-card:hover,
.stat-card:hover,
.why-box:hover,
.process-step:hover,
.reviews .card:hover {
    border-color: rgba(0, 200, 255, .42);
    box-shadow:
        0 20px 45px rgba(0, 0, 0, .28),
        0 0 24px rgba(0, 200, 255, .09);
}

/* ---------- ABOUT SECTION ---------- */

.about-image img,
.why-image img {
    border: 1px solid rgba(0, 200, 255, .18);
    box-shadow:
        0 20px 48px rgba(0, 0, 0, .32);
}

.about-list li {
    color: var(--site-copy);
}

.about-list i {
    color: #00d26a;
}

/* ---------- STATISTICS ---------- */

.stat-card h2 {
    color: #00c8ff;
}

.stat-card p {
    color: var(--site-copy);
}

/* ---------- SERVICE / EXPERTISE LISTS ---------- */

.expertise-card ul,
.footer ul {
    color: var(--site-copy);
}

.expertise-card li::marker {
    color: #00c8ff;
}

/* ---------- PROCESS ---------- */

.process-wrapper::before {
    background:
        linear-gradient(
            180deg,
            #00c8ff,
            #0077ff
        );
}

.process-number {
    box-shadow:
        0 10px 26px rgba(0, 140, 255, .26);
}

/* ---------- PROJECTS ---------- */

.project-card {
    overflow: hidden;
}

.project-card img {
    border-bottom: 1px solid rgba(0, 200, 255, .14);
}

.project-content {
    background: transparent;
}

/* ---------- FAQ ---------- */

.accordion-button {
    color: var(--site-heading);
    background:
        linear-gradient(
            145deg,
            rgba(16, 43, 76, .92),
            rgba(7, 25, 46, .98)
        );
}

.accordion-button.collapsed {
    color: var(--site-heading);
    background:
        linear-gradient(
            145deg,
            rgba(16, 43, 76, .92),
            rgba(7, 25, 46, .98)
        );
}

.accordion-button:not(.collapsed) {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #0a5aa5,
            #0077ff
        );
}

.accordion-button::after {
    filter: brightness(0) invert(1);
}

.accordion-body {
    background: rgba(6, 20, 38, .92);
}

/* ---------- REVIEWS ---------- */

.reviews .card {
    overflow: hidden;
}

.reviews .card-body,
.reviews .card-footer {
    color: var(--site-copy);
    background: transparent !important;
}

.reviews .text-muted {
    color: var(--site-muted) !important;
}

.reviews .bg-light {
    color: var(--site-copy);
    background: rgba(0, 200, 255, .07) !important;
}

/* ---------- CONTACT DETAILS ---------- */

.contact-info {
    padding: 34px;
    border-radius: 22px;
}

.info-item span,
.info-item p,
.info-item h5 {
    color: var(--site-copy);
}

/* ---------- QUOTE FORM ---------- */

.quote-form {
    border-top: 4px solid #00c8ff;
}

.quote-form .form-control,
.quote-form .form-select,
.quote-form select,
.quote-form textarea,
.quote-form input {
    color: #eef8ff;
    background: rgba(3, 14, 28, .70);
    border: 1px solid rgba(0, 200, 255, .18);
}

.quote-form .form-control::placeholder,
.quote-form textarea::placeholder,
.quote-form input::placeholder {
    color: #9eb4c6;
    opacity: 1;
}

.quote-form .form-control:focus,
.quote-form .form-select:focus,
.quote-form select:focus,
.quote-form textarea:focus,
.quote-form input:focus {
    color: #ffffff;
    background: rgba(3, 14, 28, .90);
    border-color: #00c8ff;
    box-shadow:
        0 0 0 .22rem rgba(0, 200, 255, .13);
}

.quote-form select option {
    color: #ffffff;
    background: #081a2f;
}

/* Browser autofill correction for the dark form. */

.quote-form input:-webkit-autofill,
.quote-form input:-webkit-autofill:hover,
.quote-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow:
        0 0 0 1000px #061426 inset;
    transition:
        background-color 9999s ease-in-out 0s;
}

/* ---------- STANDARD BOOTSTRAP CARDS ON THE HOMEPAGE ---------- */

main .card {
    color: var(--site-copy);
    background:
        linear-gradient(
            145deg,
            rgba(16, 43, 76, .88),
            rgba(7, 25, 46, .94)
        );
    border-color: var(--site-card-border);
}

main .card h1,
main .card h2,
main .card h3,
main .card h4,
main .card h5,
main .card h6 {
    color: var(--site-heading);
}

main .card .text-muted {
    color: var(--site-muted) !important;
}

/* ---------- TABLES IF DISPLAYED ON A PUBLIC PAGE ---------- */

main .table {
    --bs-table-color: var(--site-copy);
    --bs-table-bg: rgba(7, 25, 46, .76);
    --bs-table-border-color: rgba(0, 200, 255, .13);
    --bs-table-striped-bg: rgba(16, 43, 76, .44);
    --bs-table-striped-color: #ffffff;
    --bs-table-hover-bg: rgba(0, 200, 255, .08);
    --bs-table-hover-color: #ffffff;
}

/* ---------- LINKS ---------- */

main a:not(.btn) {
    color: #54d8ff;
}

main a:not(.btn):hover {
    color: #00d26a;
}

/* ---------- PERFORMANCE-SAFE BACKGROUND ---------- */

/*
   No looping videos, particle canvases, fixed body background,
   or continuous background animations are used.
*/

.hero {
    background-attachment: scroll;
}

/* ---------- MOBILE DARK-THEME POLISH ---------- */

@media (max-width: 991.98px) {

    .about,
    .services,
    .expertise,
    .industries,
    .why-us,
    .process,
    .projects,
    .quote,
    .faq,
    .reviews {
        background-size: auto;
    }

}

@media (max-width: 767.98px) {

    .service-card,
    .industry-card,
    .expertise-card,
    .client-card,
    .project-card,
    .stat-card,
    .why-box,
    .process-step,
    .quote-form,
    .reviews .card,
    .faq .accordion-item,
    .contact-info {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .contact-info {
        padding: 25px 20px;
    }

    .section-title p {
        color: #c9d9e6;
    }

}

/* ==========================================================
   MAZETECH HUB — FINAL HOMEPAGE CONSOLIDATION
   Keeps all new homepage components inside the main stylesheet.
========================================================== */

/* Review cards */
.review-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 200, 255, .14) !important;
    background: linear-gradient(145deg, rgba(16, 43, 76, .90), rgba(7, 25, 46, .96)) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .18) !important;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.review-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--mz-green, #00d26a), var(--mz-blue, #00c8ff));
}

.review-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 200, 255, .34) !important;
    box-shadow: 0 24px 55px rgba(0, 140, 255, .18) !important;
}

.review-card .badge.text-bg-light {
    color: #dff6ff !important;
    background: rgba(0, 200, 255, .10) !important;
    border-color: rgba(0, 200, 255, .20) !important;
}

.review-card .bg-primary-subtle {
    color: #65dcff !important;
    background: rgba(0, 200, 255, .08) !important;
    border-color: rgba(0, 200, 255, .18) !important;
}

/* Final CTA */
.final-cta {
    background: transparent;
}

.final-cta > .container > div {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 200, 255, .18);
    background:
        radial-gradient(circle at 12% 0%, rgba(0, 200, 255, .17), transparent 34%),
        radial-gradient(circle at 90% 100%, rgba(0, 210, 106, .12), transparent 32%),
        linear-gradient(135deg, #061426, #0a2747 58%, #0a5aa5) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .24) !important;
}

.final-cta h2 {
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -.8px;
}

.final-cta p {
    color: #cfe0ec;
    line-height: 1.8;
}

.final-cta .btn {
    min-width: 180px;
}

/* Contact/quote area alignment */
.quote .contact-info,
.quote .quote-form {
    height: 100%;
}

.quote-form button[type="submit"] {
    min-width: 190px;
}

/* Expertise cards: keep card heights and lists visually balanced */
.expertise .row > [class*="col-"] {
    display: flex;
}

.expertise-card {
    width: 100%;
}

.expertise-card ul {
    margin-bottom: 0;
}

/* Keep the footer and floating controls clear on mobile */
@media (max-width: 767.98px) {
    .final-cta > .container > div {
        padding: 32px 20px !important;
    }

    .final-cta .btn {
        width: 100%;
        min-width: 0;
    }

    .whatsapp-float,
    .back-to-top {
        right: 16px;
        width: 50px;
        height: 50px;
    }

    .whatsapp-float {
        bottom: 16px;
    }

    .back-to-top {
        bottom: 76px;
    }
}

/* ==========================================================
   MAZETECH WEBSITE - COMPACT MOBILE MODE
========================================================== */

@media (max-width: 768px) {

    /* Overall page spacing */
    body {
        font-size: 14px;
    }

    section {
        padding-top: 34px !important;
        padding-bottom: 34px !important;
    }

    .container {
        width: 100%;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }


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

    h1 {
        font-size: 1.8rem !important;
        line-height: 1.15;
    }

    h2 {
        font-size: 1.45rem !important;
        line-height: 1.2;
    }

    h3 {
        font-size: 1.05rem !important;
    }

    p {
        font-size: 13px;
        line-height: 1.55;
    }


    /* =========================
       GENERIC CARDS
    ========================= */

    .card,
    .service-card,
    .feature-card,
    .review-card,
    .testimonial-card,
    .about-card,
    .contact-card,
    .info-card {
        padding: 14px !important;
        border-radius: 14px !important;

        min-height: auto !important;
        height: auto !important;

        margin-bottom: 12px !important;
    }


    /* Prevent fixed card heights */
    .service-card,
    .feature-card,
    .review-card,
    .testimonial-card {
        min-height: 0 !important;
    }


    /* =========================
       CARD ICONS
    ========================= */

    .card-icon,
    .service-icon,
    .feature-icon,
    .icon-box {
        width: 44px !important;
        height: 44px !important;

        font-size: 20px !important;

        margin-bottom: 10px !important;
    }


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

    .card h3,
    .service-card h3,
    .feature-card h3,
    .review-card h3 {
        margin-bottom: 7px !important;
        font-size: 1rem !important;
    }

    .card p,
    .service-card p,
    .feature-card p,
    .review-card p {
        margin-bottom: 8px !important;
        font-size: 12.5px !important;
    }


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

    .services-grid,
    .features-grid,
    .cards-grid,
    .reviews-grid,
    .testimonial-grid {
        gap: 12px !important;
    }


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

    .btn,
    .primary-btn,
    .secondary-btn,
    .cta-btn {
        min-height: 38px !important;

        padding: 8px 13px !important;

        border-radius: 9px !important;

        font-size: 12.5px !important;
    }


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

    .hero,
    .hero-section {
        min-height: auto !important;

        padding-top: 80px !important;
        padding-bottom: 42px !important;
    }

    .hero-content {
        max-width: 100% !important;
    }

    .hero-content h1 {
        font-size: 2rem !important;
        margin-bottom: 10px !important;
    }

    .hero-content p {
        font-size: 13px !important;
        margin-bottom: 15px !important;
    }


    /* =========================
       IMAGES
    ========================= */

    .card img,
    .service-card img,
    .feature-card img {
        max-height: 180px;
        object-fit: cover;
    }


    /* =========================
       REVIEWS
    ========================= */

    .review-card,
    .testimonial-card {
        padding: 13px !important;
    }

    .review-card .stars,
    .testimonial-card .stars {
        font-size: 12px !important;
    }


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

    input,
    select,
    textarea {
        min-height: 40px !important;

        padding: 8px 10px !important;

        font-size: 14px !important;
    }

    textarea {
        min-height: 90px !important;
    }


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

    footer {
        padding-top: 28px !important;
        padding-bottom: 20px !important;
    }

}

/* ==========================================================
   MAZETECH HUB
   COMPACT MOBILE SERVICE CARDS
========================================================== */

@media (max-width: 768px) {

    /* ------------------------------------------
       SERVICE GRID
    ------------------------------------------ */

    .services-grid,
    .service-grid {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;

        align-items: start !important;
    }


    /* ------------------------------------------
       SERVICE CARDS
    ------------------------------------------ */

    .service-card {
        width: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        height: auto !important;

        padding: 14px 12px !important;

        margin: 0 !important;

        border-radius: 14px !important;
    }


    /* ------------------------------------------
       ICON AREA
    ------------------------------------------ */

    .service-card .service-icon,
    .service-card .icon,
    .service-icon {
        width: 62px !important;
        height: 62px !important;

        min-width: 62px !important;
        min-height: 62px !important;

        margin-bottom: 14px !important;

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


    .service-card .service-icon i,
    .service-card .icon i,
    .service-icon i {
        font-size: 27px !important;
    }


    /* ------------------------------------------
       SERVICE TITLE
    ------------------------------------------ */

    .service-card h3,
    .service-card h2 {
        font-size: 16px !important;

        line-height: 1.22 !important;

        margin: 0 0 7px !important;
    }


    /* ------------------------------------------
       DESCRIPTION
    ------------------------------------------ */

    .service-card p {
        font-size: 12.5px !important;

        line-height: 1.42 !important;

        margin: 0 !important;
    }


    /* ------------------------------------------
       REMOVE DESKTOP FIXED HEIGHTS
    ------------------------------------------ */

    .service-card,
    .service-card-inner,
    .service-content {
        height: auto !important;
        min-height: 0 !important;
    }


    /* ------------------------------------------
       SECTION SPACING
    ------------------------------------------ */

    .services,
    .services-section {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }


    /* ------------------------------------------
       MOBILE HEADER
    ------------------------------------------ */

    header,
    .navbar {
        min-height: 68px !important;
    }

    .navbar,
    .nav-container {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }


    /* Logo */
    .logo img,
    .navbar-logo img {
        max-height: 42px !important;
        width: auto !important;
    }


    /* Business name */
    .logo h1,
    .logo-text,
    .brand-name {
        font-size: 20px !important;
    }


    /* Hamburger */
    .menu-toggle,
    .hamburger,
    .navbar-toggler {
        width: 46px !important;
        height: 46px !important;
    }


    /* ------------------------------------------
       FLOATING BUTTONS
    ------------------------------------------ */

    .whatsapp-float,
    .back-to-top,
    .scroll-top {
        width: 48px !important;
        height: 48px !important;
    }
}


/* ==========================================================
   VERY SMALL PHONES
========================================================== */

@media (max-width: 390px) {

    .services-grid,
    .service-grid {
        gap: 8px !important;
    }

    .service-card {
        padding: 12px 10px !important;
    }

    .service-card h3,
    .service-card h2 {
        font-size: 14px !important;
    }

    .service-card p {
        font-size: 11.5px !important;
    }

    .service-card .service-icon,
    .service-card .icon,
    .service-icon {
        width: 54px !important;
        height: 54px !important;

        min-width: 54px !important;
        min-height: 54px !important;
    }

}