@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

html {
    scroll-behavior: smooth;
}

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

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


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

body {
    margin: 0;

    background-color: #0b0f19;

    color: #f8fafc;

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

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    font-family: 'Space Grotesk', sans-serif;

    margin-top: 0;
}


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

.site-header {
    position: sticky;

    top: 0;

    z-index: 1000;

    background: rgba(11, 15, 25, 0.88);

    backdrop-filter: blur(12px);

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

.navbar {
    max-width: 1200px;
    margin: 0 auto;

    padding: 20px 30px;

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

.brand {
    color: #ffffff;
    text-decoration: none;

    font-size: 1.25rem;
    font-weight: 700;
}

.nav-links {
    list-style: none;

    display: flex;
    gap: 30px;
}

.nav-links a {
    position: relative;

    color: #94a3b8;

    text-decoration: none;

    transition:
        color 0.2s ease;
}

.nav-links a:hover {
    color: #ffffff;
}


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

.menu-toggle {
    display: none;

    background: none;
    border: none;

    color: #ffffff;

    font-size: 1.5rem;

    cursor: pointer;
}


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

.hero {
    max-width: 1000px;

    margin: 0 auto;

    padding: 140px 30px 120px;

    text-align: center;
}

.hero-label {
    margin-bottom: 20px;

    color: #94a3b8;

    font-size: 0.85rem;
    font-weight: 600;

    letter-spacing: 3px;
}

.hero h1 {
    font-size: clamp(2.8rem, 7vw, 5.5rem);

    line-height: 1.05;

    margin-bottom: 30px;
}

.hero h1 span {
    display: block;
}

.hero-description {
    max-width: 700px;

    margin: 0 auto 40px;

    color: #94a3b8;

    font-size: 1.1rem;
}


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

.hero-buttons {
    display: flex;

    justify-content: center;

    gap: 15px;

    flex-wrap: wrap;
}

.btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 13px 20px;

    border-radius: 6px;

    font-weight: 600;

    font-size: 0.9rem;

    text-decoration: none;

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

.btn:hover {
    transform: translateY(-2px);
}

.primary-btn {
    background-color: #ffffff;

    color: #0b0f19;

    border: 1px solid #ffffff;
}

.primary-btn:hover {
    background-color: #e2e8f0;

    border-color: #e2e8f0;
}


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

.site-footer {
    border-top: 1px solid #1f2937;

    text-align: center;

    padding: 30px;

    color: #64748b;

    font-size: 0.85rem;
}


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

@media (max-width: 768px) {

    .nav-links {
        display: none;

        position: absolute;

        top: 70px;
        left: 20px;
        right: 20px;

        flex-direction: column;

        gap: 0;

        padding: 10px 0;

        background-color: #0f1420;

        border: 1px solid #1f2937;

        border-radius: 8px;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links a {
        display: block;

        padding: 15px 20px;
    }

    .menu-toggle {
        display: block;
    }

    .hero {
        padding: 100px 20px 80px;
    }

}
.navbar {
    position: relative;

    max-width: 1200px;
    margin: 0 auto;

    padding: 20px 30px;

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

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

::selection {
    background-color: #ffffff;

    color: #0b0f19;
}

.services-section {
    max-width: 1200px;

    margin: 0 auto;

    padding: 100px 30px;
}


/* Section heading */

.section-header {
    max-width: 700px;

    margin-bottom: 60px;
}

.section-label {
    margin-bottom: 15px;

    color: #94a3b8;

    font-size: 0.8rem;

    font-weight: 600;

    letter-spacing: 3px;
}

.section-header h2 {
    font-size: clamp(2rem, 5vw, 3.5rem);

    line-height: 1.1;

    margin-bottom: 20px;
}

.section-header h2 span {
    color: #94a3b8;
}

.section-description {
    color: #94a3b8;

    font-size: 1rem;

    max-width: 600px;
}


/* Services grid */

.services-grid {
    display: grid;

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

    gap: 20px;
}


/* Service cards */

.service-card {
    border: 1px solid #1f2937;

    padding: 35px;

    border-radius: 8px;

    background-color: #0f1420;

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

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

    border-color: #475569;
}


/* Number */

.service-number {
    color: #64748b;

    font-size: 0.8rem;

    font-weight: 600;

    margin-bottom: 25px;
}


/* Title */

.service-card h3 {
    font-size: 1.4rem;

    margin-bottom: 15px;
}


/* Description */

.service-card p {
    color: #94a3b8;

    margin-bottom: 25px;
}


/* Service list */

.service-card ul {
    list-style: none;

    display: grid;

    gap: 8px;
}

.service-card li {
    color: #cbd5e1;

    font-size: 0.9rem;
}

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

    color: #64748b;
}


/* Mobile */

@media (max-width: 768px) {

    .services-section {
        padding: 80px 20px;
    }

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

}
/* =========================
   PROJECTS SECTION
========================= */

.projects-section {
    max-width: 1200px;

    margin: 0 auto;

    padding: 100px 30px;
}


/* Projects grid */

.projects-grid {
    display: grid;

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

    gap: 20px;
}


/* Project card */

.project-card {
    display: flex;

    flex-direction: column;

    min-height: 520px;

    padding: 30px;

    border: 1px solid #1f2937;

    border-radius: 8px;

    background-color: #0f1420;

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

.project-card:hover {
    transform: translateY(-6px);

    border-color: #475569;
}

.project-card {
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background-color 0.25s ease;
}

.project-card:hover {
    transform: translateY(-5px);

    border-color: #475569;

    background-color: #111827;
}

/* Project top */

.project-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 50px;
}

.project-number {
    color: #64748b;

    font-size: 0.8rem;

    font-weight: 600;
}

.project-type {
    color: #64748b;

    font-size: 0.65rem;

    font-weight: 600;

    letter-spacing: 1px;
}


/* Project content */

.project-content {
    flex: 1;
}

.project-content h3 {
    font-size: 1.5rem;

    margin-bottom: 5px;
}

.project-content h4 {
    color: #94a3b8;

    font-size: 1rem;

    font-weight: 500;

    margin-bottom: 20px;
}

.project-content p {
    color: #94a3b8;

    font-size: 0.9rem;

    margin-bottom: 25px;
}


/* Project tags */

.project-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 25px;
}

.project-tags span {
    padding: 7px 11px;

    border: 1px solid #273449;

    border-radius: 4px;

    color: #94a3b8;

    background-color: #0f1420;

    font-size: 0.75rem;

    font-weight: 500;
}


/* Project link */

.project-link {
    display: inline-block;

    margin-top: 30px;

    color: #ffffff;

    text-decoration: none;

    font-size: 0.9rem;

    font-weight: 600;
}

.project-link:hover {
    text-decoration: underline;
}

.project-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #ffffff;

    text-decoration: none;

    font-weight: 600;

    transition: gap 0.2s ease;
}

.project-link:hover {
    gap: 13px;
}

/* Projects footer */

.projects-footer {
    display: flex;

    justify-content: center;

    margin-top: 50px;
}


/* Responsive */

@media (max-width: 1000px) {

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

}

@media (max-width: 700px) {

    .projects-section {
        padding: 80px 20px;
    }

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

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

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

.about-section {
    max-width: 1200px;

    margin: 0 auto;

    padding: 120px 30px;
}

.section-divider {
    width: 100%;

    height: 1px;

    margin: 80px 0;

    background: #1f2937;
}

/* About layout */

.about-content {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: start;
}


/* Heading */

.about-heading h2 {
    font-size: clamp(2rem, 5vw, 3.5rem);

    line-height: 1.1;
}

.about-heading h2 span {
    display: block;

    color: #94a3b8;
}


/* About text */

.about-text {
    max-width: 600px;
}

.about-text p {
    color: #94a3b8;

    margin-bottom: 20px;

    font-size: 1rem;
}


/* Text link */

.text-link {
    display: inline-block;

    margin-top: 15px;

    color: #ffffff;

    text-decoration: none;

    font-weight: 600;
}

.text-link:hover {
    text-decoration: underline;
}


/* Technology stack */

.tech-stack {
    margin-top: 100px;

    padding-top: 40px;

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

.tech-list {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 25px;
}

.tech-list span {
    padding: 10px 16px;

    border: 1px solid #273449;

    border-radius: 5px;

    color: #cbd5e1;

    font-size: 0.85rem;

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

.tech-list span:hover {
    border-color: #64748b;

    transform: translateY(-2px);
}


/* Responsive */

@media (max-width: 768px) {

    .about-section {
        padding: 80px 20px;
    }

    .about-content {
        grid-template-columns: 1fr;

        gap: 40px;
    }

}
/* =========================
   CALL TO ACTION
========================= */

.cta-section {
    max-width: 1200px;

    margin: 0 auto;

    padding: 120px 30px;
}

.cta-content {
    padding: 80px 40px;

    border: 1px solid #1f2937;

    border-radius: 10px;

    background-color: #0f1420;

    text-align: center;
}

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

    margin: 0 auto 25px;

    font-size: clamp(2.2rem, 5vw, 4rem);

    line-height: 1.1;
}

.cta-content h2 span {
    display: block;

    color: #94a3b8;
}

.cta-content p:not(.section-label) {
    max-width: 650px;

    margin: 0 auto 35px;

    color: #94a3b8;
}

@media (max-width: 768px) {

    .cta-section {
        padding: 80px 20px;
    }

    .cta-content {
        padding: 60px 25px;
    }

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

.contact-section {
    max-width: 1200px;

    margin: 0 auto;

    padding: 100px 30px 120px;
}


/* Header */

.contact-header {
    max-width: 750px;

    margin-bottom: 70px;
}

.contact-header h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);

    line-height: 1.05;

    margin-bottom: 25px;
}

.contact-header h1 span {
    display: block;

    color: #94a3b8;
}

.contact-header > p:last-child {
    max-width: 650px;

    color: #94a3b8;

    font-size: 1.05rem;
}


/* Layout */

.contact-layout {
    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    gap: 80px;

    align-items: start;
}


/* Contact information */

.contact-info h2 {
    font-size: 1.8rem;

    margin-bottom: 15px;
}

.contact-info > p {
    color: #94a3b8;

    margin-bottom: 40px;

    max-width: 400px;
}

.contact-details {
    display: grid;

    gap: 25px;
}

.contact-item {
    display: grid;

    gap: 5px;
}

.contact-item span {
    color: #64748b;

    font-size: 0.75rem;

    text-transform: uppercase;

    letter-spacing: 1px;
}

.contact-item a {
    color: #ffffff;

    text-decoration: none;

    word-break: break-word;
}

.contact-item a:hover {
    text-decoration: underline;
}


/* Form */

.contact-form {
    display: grid;

    gap: 25px;

    padding: 35px;

    border: 1px solid #1f2937;

    border-radius: 8px;

    background-color: #0f1420;
}

.form-group {
    display: grid;

    gap: 8px;
}

.form-group label {
    color: #cbd5e1;

    font-size: 0.85rem;

    font-weight: 600;
}

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

    padding: 13px 15px;

    border: 1px solid #273449;

    border-radius: 5px;

    background-color: #0b0f19;

    color: #ffffff;

    font-family: inherit;

    font-size: 0.9rem;

    outline: none;
}

.form-group textarea {
    resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #64748b;
}


/* Responsive */

@media (max-width: 768px) {

    .contact-section {
        padding: 80px 20px;
    }

    .contact-layout {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .contact-form {
        padding: 25px;
    }

}

/* =========================
   CASE STUDY PAGES
========================= */

.case-study-hero {
    max-width: 1000px;

    margin: 0 auto;

    padding: 120px 30px 80px;
}

.case-study-hero h1 {
    max-width: 900px;

    margin-bottom: 30px;

    font-size: clamp(2.8rem, 7vw, 5.5rem);

    line-height: 1.05;
}

.case-study-hero h1 span {
    display: block;

    color: #94a3b8;
}

.case-study-intro {
    max-width: 700px;

    margin-bottom: 30px;

    color: #94a3b8;

    font-size: 1.1rem;
}


/* Metrics */

.case-metrics {
    max-width: 1200px;

    margin: 0 auto;

    padding: 30px;

    display: grid;

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

    gap: 15px;
}

.metric-card {
    padding: 30px;

    border: 1px solid #1f2937;

    border-radius: 8px;

    background-color: #0f1420;
}

.metric-card strong {
    display: block;

    margin-bottom: 8px;

    font-size: 1.7rem;
}

.metric-card span {
    color: #64748b;

    font-size: 0.8rem;
}


/* Case sections */

.case-section {
    max-width: 1200px;

    margin: 0 auto;

    padding: 100px 30px;

    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    gap: 80px;

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

.case-section-heading h2 {
    font-size: clamp(2rem, 5vw, 3.2rem);

    line-height: 1.1;
}

.case-section-heading h2 span {
    display: block;

    color: #94a3b8;
}

.case-section-content {
    color: #94a3b8;

    font-size: 1rem;
}

.case-section-content p {
    margin-bottom: 20px;
}


/* Process */

.case-process {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px;
}

.case-process > div {
    padding: 25px;

    border: 1px solid #1f2937;

    border-radius: 8px;

    background-color: #0f1420;
}

.case-process span,
.insights-grid span {
    color: #64748b;

    font-size: 0.8rem;

    font-weight: 600;
}

.case-process h3 {
    margin: 15px 0 10px;

    font-size: 1.1rem;
}

.case-process p {
    color: #94a3b8;

    font-size: 0.9rem;
}


/* Insights */

.insights-grid {
    display: grid;

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

    gap: 20px;
}

.insights-grid article {
    padding: 30px;

    border: 1px solid #1f2937;

    border-radius: 8px;

    background-color: #0f1420;
}

.insights-grid h3 {
    margin: 15px 0;

    font-size: 1.2rem;
}

.insights-grid p {
    color: #94a3b8;

    font-size: 0.9rem;
}


/* Gallery */

.case-gallery {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;
}

.case-image-card {
    padding: 15px;

    border: 1px solid #1f2937;

    border-radius: 8px;

    background-color: #0f1420;
}

.case-image-card img {
    display: block;

    width: 100%;

    height: auto;

    border-radius: 5px;
}

.case-image-card p {
    padding: 15px 5px 5px;

    color: #94a3b8;

    font-size: 0.85rem;
}


/* Case CTA */

.case-cta {
    max-width: 1200px;

    margin: 0 auto;

    padding: 120px 30px;

    text-align: center;
}

.case-cta h2 {
    margin-bottom: 30px;

    font-size: clamp(2.3rem, 5vw, 4rem);

    line-height: 1.1;
}

.case-cta h2 span {
    display: block;

    color: #94a3b8;
}


/* Responsive */

@media (max-width: 900px) {

    .case-metrics {
        grid-template-columns: 1fr 1fr;
    }

    .case-section {
        grid-template-columns: 1fr;

        gap: 40px;
    }

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

}

@media (max-width: 650px) {

    .case-study-hero {
        padding: 90px 20px 60px;
    }

    .case-metrics {
        grid-template-columns: 1fr;

        padding: 20px;
    }

    .case-section {
        padding: 80px 20px;
    }

    .case-process {
        grid-template-columns: 1fr;
    }

    .case-gallery {
        grid-template-columns: 1fr;
    }

}

/* =========================
   ADMIN AREA
========================= */

.admin-page {
    min-height: 100vh;

    background-color: #080c14;
}


/* Login */

.login-container {
    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;
}

.login-card {
    width: 100%;

    max-width: 430px;

    padding: 40px;

    border: 1px solid #1f2937;

    border-radius: 10px;

    background-color: #0f1420;
}

.admin-brand {
    display: inline-block;

    margin-bottom: 50px;

    color: #ffffff;

    font-family: 'Space Grotesk', sans-serif;

    font-size: 1.2rem;

    font-weight: 700;

    text-decoration: none;
}

.login-card h1 {
    margin-bottom: 10px;

    font-size: 2.5rem;
}

.login-description {
    margin-bottom: 35px;

    color: #64748b;
}

.login-card form {
    display: grid;

    gap: 20px;
}

.login-error {
    min-height: 20px;

    margin: 0;

    color: #f87171;

    font-size: 0.85rem;
}

.back-home {
    display: block;

    margin-top: 30px;

    color: #64748b;

    font-size: 0.85rem;

    text-decoration: none;
}

.back-home:hover {
    color: #ffffff;
}


/* Admin header */

.admin-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 25px 40px;

    border-bottom: 1px solid #1f2937;
}

.logout-btn {
    padding: 9px 15px;

    border: 1px solid #273449;

    border-radius: 5px;

    background: transparent;

    color: #94a3b8;

    cursor: pointer;
}

.logout-btn:hover {
    color: #ffffff;

    border-color: #64748b;
}


/* Dashboard */

.admin-dashboard {
    max-width: 1200px;

    margin: 0 auto;

    padding: 80px 30px;
}

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

.dashboard-heading h1 {
    margin-bottom: 10px;

    font-size: clamp(2.5rem, 6vw, 4rem);
}

.dashboard-heading > p:last-child {
    color: #64748b;
}


/* Cards */

.admin-grid {
    display: grid;

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

    gap: 20px;

    margin-bottom: 50px;
}

.admin-card {
    padding: 30px;

    border: 1px solid #1f2937;

    border-radius: 8px;

    background-color: #0f1420;
}

.admin-card span {
    color: #64748b;

    font-size: 0.75rem;

    font-weight: 600;

    letter-spacing: 1px;
}

.admin-card strong {
    display: block;

    margin: 12px 0 3px;

    font-family: 'Space Grotesk', sans-serif;

    font-size: 2.5rem;
}

.admin-card p {
    margin: 0;

    color: #64748b;

    font-size: 0.85rem;
}


/* Management panel */

.admin-panel {
    padding: 35px;

    border: 1px solid #1f2937;

    border-radius: 8px;

    background-color: #0f1420;
}

.admin-panel h2 {
    margin-bottom: 30px;
}

.admin-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}

.admin-action {
    padding: 12px 16px;

    border: 1px solid #273449;

    border-radius: 5px;

    color: #cbd5e1;

    text-decoration: none;

    font-size: 0.85rem;
}

.admin-action:hover {
    border-color: #64748b;

    color: #ffffff;
}


/* Mobile */

@media (max-width: 700px) {

    .login-card {
        padding: 30px 25px;
    }

    .admin-header {
        padding: 20px;
    }

    .admin-dashboard {
        padding: 60px 20px;
    }

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

    .admin-panel {
        padding: 25px;
    }

}

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

.about-hero {
    max-width: 1000px;

    margin: 0 auto;

    padding: 120px 30px 90px;
}

.about-hero h1 {
    max-width: 900px;

    margin-bottom: 30px;

    font-size: clamp(3rem, 7vw, 5.5rem);

    line-height: 1.05;
}

.about-hero h1 span {
    display: block;

    color: #94a3b8;
}

.about-intro {
    max-width: 700px;

    color: #94a3b8;

    font-size: 1.1rem;
}


/* About sections */

.about-section {
    max-width: 1200px;

    margin: 0 auto;

    padding: 100px 30px;

    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    gap: 80px;

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

.about-heading h2 {
    font-size: clamp(2rem, 5vw, 3.2rem);

    line-height: 1.1;
}

.about-heading h2 span {
    display: block;

    color: #94a3b8;
}

.about-content {
    color: #94a3b8;

    font-size: 1rem;
}

.about-content p {
    margin-bottom: 22px;
}


/* Capabilities */

.capabilities-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;
}

.capability-card {
    padding: 30px;

    border: 1px solid #1f2937;

    border-radius: 8px;

    background-color: #0f1420;

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

.capability-card:hover {
    transform: translateY(-4px);

    border-color: #475569;
}

.capability-card > span {
    color: #64748b;

    font-size: 0.8rem;
}

.capability-card h3 {
    margin: 15px 0 10px;

    font-size: 1.2rem;
}

.capability-card p {
    margin: 0;

    color: #94a3b8;

    font-size: 0.9rem;
}


/* About responsive */

@media (max-width: 800px) {

    .about-hero {
        padding: 90px 20px 70px;
    }

    .about-section {
        grid-template-columns: 1fr;

        gap: 40px;

        padding: 80px 20px;
    }

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

}

/* =========================
   ADMIN DASHBOARD
========================= */

.dashboard-stats {

    display: grid;

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

    gap: 20px;

    margin-bottom: 60px;

}


.stat-card {

    padding: 28px;

    border: 1px solid #1f2937;

    border-radius: 8px;

    background: #0f1420;

}


.stat-label {

    display: block;

    color: #64748b;

    font-size: 0.75rem;

    letter-spacing: 0.08em;

    margin-bottom: 15px;

}


.stat-card strong {

    display: block;

    font-size: 2.5rem;

    line-height: 1;

    margin-bottom: 10px;

}


.stat-description {

    color: #94a3b8;

    font-size: 0.85rem;

}


/* =========================
   RECENT ENQUIRIES
========================= */

.recent-enquiries {

    margin-top: 40px;

}


.section-header {

    margin-bottom: 25px;

}


.section-header h2 {

    margin-top: 8px;

}


.enquiries-container {

    display: flex;

    flex-direction: column;

    gap: 12px;

}


.enquiry-card {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    padding: 22px 25px;

    border: 1px solid #1f2937;

    border-radius: 8px;

    background: #0f1420;

}


.enquiry-main h3 {

    margin: 0 0 6px;

    font-size: 1rem;

}


.enquiry-service {

    margin: 0 0 5px;

    color: #94a3b8;

}


.enquiry-date {

    margin: 0;

    color: #64748b;

    font-size: 0.8rem;

}


.status {

    display: inline-block;

    padding: 6px 10px;

    border-radius: 20px;

    font-size: 0.7rem;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}


.status-new {

    background: rgba(59, 130, 246, 0.15);

}


.status-read {

    background: rgba(234, 179, 8, 0.15);

}


.status-replied {

    background: rgba(34, 197, 94, 0.15);

}


.loading-message,
.empty-message {

    color: #94a3b8;

    padding: 30px 0;

}


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

@media (max-width: 900px) {

    .dashboard-stats {

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

    }

}


@media (max-width: 600px) {

    .dashboard-stats {

        grid-template-columns: 1fr;

    }


    .enquiry-card {

        align-items: flex-start;

        flex-direction: column;

    }

}

.whatsapp-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 13px 22px;

    border-radius: 6px;

    text-decoration: none;

    font-weight: 600;

    margin-left: 10px;

    border: 1px solid #25D366;

    color: #25D366;

    transition:
        transform 0.2s ease,
        background 0.2s ease;

}


.whatsapp-button:hover {

    background: rgba(
        37,
        211,
        102,
        0.12
    );

    transform:
        translateY(-2px);

}

/* =========================================
   ENQUIRY ACTION BUTTONS
========================================= */

#mark-read-button,
#mark-replied-button,
#delete-enquiry-button {
    color: #ffffff;
    background-color: #1f2937;
    border: 1px solid #1f2937;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}


/* Mark as Read */

#mark-read-button:hover {
    background-color: #374151;
}


/* Mark as Replied */

#mark-replied-button {
    background-color: #2563eb;
    border-color: #2563eb;
}

#mark-replied-button:hover {
    background-color: #1d4ed8;
}


/* Delete */

#delete-enquiry-button {
    background-color: #dc2626;
    border-color: #dc2626;
}

#delete-enquiry-button:hover {
    background-color: #b91c1c;
}


/* Make sure disabled buttons remain readable */

#mark-read-button:disabled,
#mark-replied-button:disabled,
#delete-enquiry-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* =========================================
   CONTACT FORM STATUS
========================================= */

.form-status {
    margin-top: 14px;
    font-size: 0.95rem;
    line-height: 1.5;
    min-height: 24px;
}


.form-status.success {
    color: #15803d;
    font-weight: 600;
}


.form-status.error {
    color: #dc2626;
    font-weight: 600;
}


#submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* =========================
   LOGO
========================= */
.brand img {
    height: 45px;
    width: auto;
    display: block;
}