/* ================================================== */
/* Global Variables and Reset Rules */
/* ================================================== */

:root {
    --background-color: #f8f5f5;
    --slider-background-color: #4a494b ;
    --text-color: #0e0e0e;

    --btn-color-hover: #2b2b2b;
    --btn-color-shadow: #1a1a1a;
    --btn-color: #1a1a1a;
    --btn-color-hover-shadow: #201b1b;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* Shared button styles used across all pages */
.btn {
    display: inline-block;
    padding: 0.75em 1.5em;
    background-color: var(--btn-color);
    color: var(--background-color);
    border-radius: 1em;
    box-shadow: 0 0.1em 0.2em var(--btn-color-shadow);
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn:hover {
    background-color: var(--background-color);
    color: var(--btn-color);
    box-shadow: 0 0.1em 0.3em var(--btn-color-hover-shadow);
    transform: translateY(-2px);
}

a, li {
    list-style: none;
    text-decoration: none;
    color: var(--text-color);
}

a:hover, li:hover {
    color: var(--btn-color-hover);
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    padding-top: 4.5em; 
    
    opacity: 1;
    transition: opacity 0.25s ease;
}

body.fade-out {
    opacity: 0;
}
main {
    margin: 0;
    padding: 0;
}

html {
    padding: 0;
    margin: 0;
}



/* ================================================== */
/* Header / Navigation */
/* ================================================== */

.header {
    background-color: var(--btn-color-hover-shadow);
    color: var(--text-color);
    box-shadow: 0 0.001em 1em var(--btn-color-shadow);
    width: 100%;
    height: auto;
    
    position: fixed;
    top: 0;
    left: 0;
    Z-index: 9999;
}

.logo {

    display: flex;
    flex-direction: row;
    padding-left: 5em;

    width: auto;
    height: auto; 
}

.logo > a > img {

    margin: 0.3em;
    width: 19%;
    height: auto;

    border-radius: 10em;
    box-shadow: 0 0.001em 0.1em var(--btn-color-shadow);
}

.header > nav {
    position: sticky;
    top: 0;
    z-index: 9999;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: space-evenly;
    align-items: center;

    width: 100%;
    height: auto;

}

.nav-links {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: auto;
    gap: 2.5em;

    text-decoration: none;
    color: var(--text-color);

    background-color: var(--btn-color-hover);
    padding: 0.5em 1.5em;
    border-radius: 2em;

    position: relative;
    

    box-shadow: inset 0 0 0.4em rgba(134, 84, 84, 0.6);
}

.nav-slider {
    position: absolute;
    top: 0.15em;
    left: 0;
    border-radius: 1em;
    opacity: 0;
    pointer-events: none;
    
    height: calc(100% - 0.1em);
    width: auto;
    background-color: var(--slider-background-color);
    z-index: 1;
    transition: all 0.3s ease;

    
    box-shadow: inset 0 0 0.4em rgba(0,0,0,0.6);

    transform: translateY(-20%) scale(1.2);
    transform-origin: center;
}

.nav-links > li {
    display: flex;
    flex-direction: row;
    width: auto;
    height: auto;
    padding: 0.5em;

    position: relative;
    z-index: 2;
}

.nav-links > li >  a {
    text-decoration: none;
    color: var(--background-color);

    list-style: none;
   
}

.nav-links > li > a:hover {
    transform: translateY(-2px);
    color: var(--background-color);
}

.nav-links a.active {
    transform: translateY(2px);
    color: var(--background-color);
    font-weight: 700;

}

.nav-links a {
    transition: all 0.2s ease;
}

.auth-links {
    display: flex;
    gap: 1.5em;
    justify-content: center;
    align-items: center;

    width: auto;
    height: auto;
    padding: 0.5em 1.5em;
    border-radius: 2em;
}

.auth-links > li > a {
    text-decoration: none;
    color: var(--background-color);
    background-color: var(--btn-color-hover);
    padding: 0.5em 1.5em;
    border-radius: 2em;
    box-shadow: inset 0 0 0.4em rgba(134, 84, 84, 0.6);
}

.auth-links > li > a:hover {
    transform: translateY(-2px);
    color: var(--background-color);
}
/* ================================================== */
/* Footer */
/* ================================================== */

footer {
    background-color: var(--background-color);
    color: var(--text-color);
    width: 100%;
    padding: 2rem 1.25rem;

    /* Layout: mobile-first, allow items to wrap and flow vertically */
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
}

/* Footer content blocks (links, social, contact, legal) */
footer > p {
    margin: 0;
    width: 100%;
    text-align: center;
    font-size: 0.95rem;
    color: rgba(0,0,0,0.7);
}

footer nav {
    /* Let each nav take an adaptable column width */
    flex: 1 1 180px;
    min-width: 140px;
}

footer nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

footer nav ul li a {
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.95rem;
}

footer nav ul li a:hover {
    color: var(--btn-color-hover);
}

/* ================================================== */
/* Home Page: Hero Section */
/* ================================================== */

.hero {
    display: grid;
    grid-template-columns: minmax(20rem, 1fr) minmax(22rem, 28rem);
    align-items: center;
    gap: 2.5rem;
    width: 100%;
    min-height: 85vh;
    padding: 4em 2em;
    background-image: url('./frontEnd/assets/images/serveroom.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.hero-copy,
.hero-features {
    background-color: rgba(255, 255, 255, 0.92);
    padding: 2.5em;
    border-radius: 1em;
    box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.12);
}

.hero-copy {
    max-width: 45rem;
}

.eyebrow {
    display: inline-block;
    margin-bottom: 1em;
    color: rgba(0, 0, 0, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.9rem;
}

.hero-copy h1 {
    font-size: clamp(2.5rem, 4vw, 4rem);
    line-height: 1.05;
    margin-bottom: 1rem;
}

.hero-copy p {
    font-size: 1.1rem;
    line-height: 1.75;
    margin-bottom: 1.8rem;
    max-width: 35rem;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.btn-secondary {
    background: transparent;
    color: var(--text-color);
    border: 1px solid var(--text-color);
}

.btn-secondary:hover {
    background-color: var(--text-color);
    color: var(--background-color);
}

.hero-features {
    display: grid;
    gap: 1rem;
}

.feature-card {
    background-color: rgba(248, 245, 245, 0.95);
    padding: 1.5em;
    border-radius: 1em;
    box-shadow: 0 0.08em 0.25em rgba(0, 0, 0, 0.08);
}

.feature-card h3 {
    margin-bottom: 0.75em;
}

.feature-card p {
    line-height: 1.75;
}

/* ================================================== */
/* Home Page: Services Preview Section */
/* ================================================== */

.services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.75rem;
    padding: 2.5em 2em 4em;
    max-width: 85rem;
    margin: 0 auto;
}

.services h2 {
    grid-column: 1 / -1;
    font-size: 2.5em;
    margin-bottom: 0.5em;
    text-align: center;
}

.service-card,
.card {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 2em;
    border-radius: 1em;
    text-align: left;
    min-height: 20rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 0.1em 0.3em var(--btn-color-shadow);
}

.service-card h3,
.card h3 {
    margin-bottom: 1rem;
}

.service-card p,
.card p {
    line-height: 1.75;
    margin-bottom: 1.5rem;
}

.service-card a,
.card a {
    align-self: flex-start;
}



/* ================================================== */
/* Home Page: Contact section */
/* ================================================== */

.contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: auto;

    padding: 4em 0;

    background-color: rgba(255, 255, 255, 0.8);
}

.contact h2 {
    font-size: 2.5em;
    margin-bottom: 1em;
}

.contact > form {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 2em;

    width: 100%;
    max-width: 50rem;
}

.contact > form > input, .contact > form > textarea {
    padding: 1em;
    border-radius: 5px;
    
    border: 1px solid var(--text-color);
    font-size: 1em;
    width: 100%;
}

.contact > form > button {
    padding: 0.75em 1.5em;
    background-color: var(--btn-color);
    color: var(--background-color);
    border-radius: 1em;

    box-shadow: 0 0.1em 0.2em var(--btn-color-shadow);

    transition: all 0.3s ease;
    border: none;
    font-size: 1em;
}

.contact > form > button:hover {
    background-color: var(--btn-color-hover);
    box-shadow: 0 0.1em 0.3em var(--btn-color-hover-shadow);
    transform: translateY(-2px);
}

/* ================================================== */
/* Home Page: Card grid section */
/* ================================================== */
.indexCardWrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    align-items: stretch;
    justify-items: center;
    gap: 2rem;
    margin: 0 auto;
    width: min(95%, 90rem);
    padding: 2em 1em 4em;
}

.indexCard {
    width: 100%;
    min-height: 16em;
    margin: 1em;
    padding: 1.75em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.88);
    border-radius: 1em;
    box-shadow: 0 0.1em 0.3em var(--btn-color-shadow);
}

/* ================================================== */
/* Home Page: Section intro block */
/* ================================================== */
.section-intro {
    max-width: 65rem;
    margin: 0 auto;
    padding: 4em 2em 2em;
    text-align: center;
}

.section-intro h2 {
    font-size: 2.5em;
    margin-bottom: 0.75em;
}

.section-intro p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(0, 0, 0, 0.8);
}

/* ================================================== */
/* Home Page: Contact promo section */
/* ================================================== */
.home-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 85rem;
    margin: 0 auto;
    padding: 4em 2em;
}

.contact-promo,
.home-contact-form {
    background-color: rgba(255, 255, 255, 0.94);
    border-radius: 1em;
    padding: 2.5em;
    box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.12);
}

.contact-promo h2 {
    margin-bottom: 1rem;
}

.contact-promo p {
    line-height: 1.8;
    margin-bottom: 1.5em;
}

.home-contact-form {
    display: grid;
    gap: 1rem;
}

.home-contact-form input,
.home-contact-form textarea {
    width: 100%;
    padding: 1em;
    border-radius: 0.85em;
    border: 1px solid rgba(0, 0, 0, 0.14);
    background: #ffffff;
    font-size: 1rem;
}

.home-contact-form textarea {
    min-height: 12rem;
    resize: vertical;
}

.testimonials {
    max-width: 85rem;
    margin: 0 auto 4em;
    padding: 0 2em;
}

.testimonial-card {
    background-color: rgba(255, 255, 255, 0.94);
    border-radius: 1em;
    padding: 2em;
    box-shadow: 0 0.1em 0.35em rgba(0, 0, 0, 0.12);
    text-align: left;
}

.testimonial-card p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.25em;
}

.testimonial-card span {
    display: inline-block;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.7);
}

/* ================================================== */
/* Responsive breakpoints */
/* ================================================== */

/* ------------------------------ */
/* 900px — Tablet adjustments     */
/* ------------------------------ */
@media (max-width: 900px) {

    /* NAV */
    .nav-links {
        gap: 2em;
        padding: 0.4em 1em;
    }
    .nav-links li a {
        font-size: 0.9em;
    }
    .nav-slider {
        top: 0.2em;
        height: calc(100% - 0.4em);
        box-shadow: inset 0 0 0.35em rgba(0,0,0,0.45);
    }
    .logo {
        padding-left: 1em;
    }

    /* HERO + HOME CONTACT */
    .hero {
        grid-template-columns: 1fr;
        padding: 3em 1.5em;
    }
    .home-contact {
        grid-template-columns: 1fr;
    }
}


/* ------------------------------ */
/* 680px — Mobile layout begins   */
/* ------------------------------ */
@media (max-width: 680px) {

    /* NAV */
    .header > nav {
        grid-template-columns: 1fr;
        gap: 0.5em;
    }
    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75em;
        padding: 0.4em 1em;
    }
    .nav-links li a {
        font-size: 0.85em;
        padding: 0.3em 0.8em;
    }
    .nav-slider {
        top: 0.2em;
        height: 2.2em;

    }
    .logo {
        padding-left: 0;
        justify-content: center;
    }
    .logo img {
        width: 28%;
    }

    /* PAGE CONTENT */
    .indexCardWrapper {
        margin-left: 1em;
        width: calc(100% - 2em);
    }
    .hero-copy,
    .hero-features,
    .contact-promo,
    .home-contact-form,
    .testimonial-card,
    .service-card,
    .offerCard,
    .serviceCard {
        padding: 1.5em;
    }
    .servicesHero {
        padding: 2.5em 1em;
        background-attachment: scroll;
    }
    .servicesHeroContent {
        padding: 2rem 1.5rem;
    }
    .serviceCards {
        gap: 1.25rem;
    }
    .offerCard,
    .serviceCard {
        width: 100%;
    }
    .servicesIntro {
        grid-template-columns: 1fr;
        padding: 2.5rem 1rem 0;
    }
    .serviceOfferingsIntro,
    .testimonials {
        padding: 2rem 1rem;
    }
    .serviceCardWrapper {
        gap: 1rem;
        padding: 0 1rem 1.5rem;
    }
    .serviceCardWrapper article,
    .offerCard {
        box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.12);
    }
}


/* ------------------------------ */
/* 600px — Smaller mobile tweaks  */
/* ------------------------------ */
@media (max-width: 600px) {

    /* NAV */
    .nav-links {
        gap: 1em;
        padding: 0.3em 0.6em;
    }
    .nav-links li a {
        font-size: 0.85em;
    }
    .nav-slider {
        top: 0.15em;
        height: calc(100% - 0.3em);
        box-shadow: inset 0 0 0.18em rgba(0,0,0,0.4);
    }

    /* LOGO */
    .logo img {
        width: 30%;
    }
}

@media (max-width: 500px) {
    .nav-slider {
        height:1.8em;
        
        box-shadow: inset 0 0 0.15em rgba(0,0,0,0.35);

    }
}

/* ------------------------------ */
/* 400px — Very small screens     */
/* ------------------------------ */
@media (max-width: 400px) {

    /* NAV */
    .nav-links {
        gap: 0.5em;
        padding: 0.3em 0.6em;
        width: 96.5%;
        align-self: center;
    }
    .nav-links li a {
        font-size: 0.75em;
        padding: 0.25em 0.6em;
    }
    .nav-slider {
        border-radius: 1.5em;
        box-shadow: inset 0 0 0.25em rgba(0,0,0,0.35);
    }
}

@media (max-width:325px) {
    .logo img {
        width: 40%;
    }
}


/* ================================================== */
/* Contact Page Hero Layout */
/* ================================================== */
.contact-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 55vh;
    padding: 4em 2em;
    background-image: url('./frontEnd/assets/images/serveroom.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.contact-hero .page-intro {
    width: min(100%, 55rem);
    background-color: rgba(255, 255, 255, 0.9);
    padding: 2.5em;
    border-radius: 1em;
    box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.15);
    text-align: center;
}

.contact-hero .page-intro h1 {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    margin-bottom: 0.75em;
}

.contact-hero .page-intro p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5em;
}

.about-section {
    max-width: 85rem;
    margin: 0 auto;
    padding: 4em 2em;
}

.about-section h2,
.contact-details h2,
.contact-form-panel h2 {
    font-size: 2.4em;
    margin-bottom: 0.75em;
}

.about-section p {
    line-height: 1.8;
    margin-bottom: 1.25em;
}

.content-grid {
    display: grid;
    grid-template-columns: minmax(20rem, 1fr) minmax(18rem, 1fr);
    gap: 2rem;
    align-items: flex-start;
}

.about-highlights {
    display: grid;
    gap: 1.25rem;
}

.highlight-card {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 1em;
    padding: 1.75em;
    box-shadow: 0 0.1em 0.3em var(--btn-color-shadow);
}

.highlight-card h3 {
    margin-bottom: 0.75em;
}

.about-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5em;
    margin-top: 2em;
}

.about-card {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 1em;
    padding: 2rem;
    box-shadow: 0 0.11em 0.28em rgba(0, 0, 0, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.about-card:hover {
    transform: translateY(-0.2rem);
    box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.14);
}

.about-card h3 {
    margin-bottom: 0.85em;
}

.values-grid {
    display: grid;
    gap: 1.5rem;
    max-width: 70rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.about-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 65vh;
    padding: 4em 2em;
    background-image: url('./frontEnd/assets/images/serveroom.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(14, 14, 14, 0.35);
}

.about-hero .page-intro {
    position: relative;
    width: min(100%, 55rem);
    background-color: rgba(255, 255, 255, 0.96);
    padding: 3rem;
    border-radius: 1.25em;
    box-shadow: 0 0.15em 0.5em rgba(0, 0, 0, 0.16);
    text-align: center;
}

.about-hero .page-intro .eyebrow {
    display: inline-block;
    margin-bottom: 1.25rem;
    color: rgba(0, 0, 0, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.95rem;
}

.about-hero .page-intro h1 {
    font-size: clamp(2.6rem, 4vw, 3.75rem);
    line-height: 1.05;
    margin-bottom: 1rem;
}

.about-hero .page-intro p {
    font-size: 1.1rem;
    line-height: 1.85;
    color: rgba(0, 0, 0, 0.75);
}

@media (max-width: 900px) {
    .content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .about-section {
        padding: 3rem 1.25rem;
    }

    .about-hero {
        padding: 3rem 1.5rem;
        background-attachment: scroll;
    }

    .about-hero .page-intro {
        padding: 2.25rem;
    }

    .hero-actions {
        flex-direction: column;
    }
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2em;
    max-width: 85rem;
    margin: 0 auto 4em;
    margin-top: 2em;
    padding: 0 2em;
}

.contact-details,
.contact-form-panel {
    background-color: rgba(255, 255, 255, 0.92);
    border-radius: 1em;
    padding: 2em;
    box-shadow: 0 0.1em 0.3em var(--btn-color-shadow);
}

.contact-details p {
    margin-bottom: 1.5em;
    line-height: 1.8;
}

.contact-card {
    background-color: var(--background-color);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.85em;
    padding: 1.25em;
    margin-bottom: 1em;
}

.contact-card h3 {
    margin-bottom: 0.5em;
}

.contact-page-form {
    display: grid;
    gap: 1.5em;
}

.form-group {
    display: grid;
    gap: 0.75em;
}

.form-group label {
    font-weight: 600;
}

.contact-page-form input,
.contact-page-form textarea {
    width: 100%;
    padding: 1em;
    border-radius: 0.85em;
    border: 1px solid rgba(0, 0, 0, 0.12);
    font-size: 1rem;
    background: #ffffff;
}

.contact-page-form textarea {
    resize: vertical;
}

.contact-page-form button {
    width: fit-content;
    align-self: flex-start;
}


.addOn {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    text-align: center;

    box-shadow: 0 0.1em 0.3em var(--btn-color-shadow);
}
.aboutUs {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    text-align: center;

    box-shadow: 0 0.1em 0.3em var(--btn-color-shadow);
}

.securityBlogIndex {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    text-align: center;

    box-shadow: 0 0.1em 0.3em var(--btn-color-shadow);
}

/* ================================================== */
/* Services Page */
/* ================================================== */
.servicesHero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 4em 1.5em;
    background-image: url('./frontEnd/assets/images/serveroom.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.servicesHero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(14, 14, 14, 0.35);
}

.servicesHeroContent {
    position: relative;
    max-width: 65rem;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 3rem 2.5rem;
    border-radius: 1.25em;
    text-align: center;
    box-shadow: 0 0.2em 0.7em rgba(0, 0, 0, 0.18);
}

.servicesHeroContent .eyebrow,
.servicesHeroContent h1,
.servicesHeroContent p {
    position: relative;
}

.servicesHeroContent .eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    color: rgba(0, 0, 0, 0.7);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.95rem;
}

.servicesHeroContent h1 {
    font-size: clamp(2.4rem, 4vw, 3.8rem);
    line-height: 1.05;
    margin-bottom: 1rem;
}

.servicesHeroContent p {
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 2rem;
    max-width: 45rem;
    margin-left: auto;
    margin-right: auto;
}

.servicesHeroContent > .btn {
    margin-top: 1rem;
}

.servicesIntro {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    max-width: 90rem;
    margin: 0 auto;
    padding: 4rem 2rem 0;
}

.servicesIntro .serviceBlock {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 1.1em;
    padding: 2rem;
    box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.12);
    text-align: center;
}

.servicesIntro .serviceBlock h2 {
    font-size: 1.9em;
    margin-bottom: 1rem;
}

.servicesIntro .serviceBlock p {
    line-height: 1.8;
    font-size: 1.05rem;
    color: rgba(0, 0, 0, 0.8);
}

.serviceOfferingsIntro {
    max-width: 70rem;
    margin: 0 auto;
    padding: 3rem 2rem 2rem;
    text-align: center;
}

.serviceOfferingsIntro h2 {
    font-size: 2.6em;
    margin-bottom: 1rem;
}

.serviceOfferingsIntro p {
    font-size: 1.1rem;
    line-height: 1.75;
    color: rgba(0, 0, 0, 0.7);
}

.serviceCards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.75rem;
    max-width: 90rem;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.offerCard {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 1.1em;
    box-shadow: 0 0.12em 0.35em rgba(0, 0, 0, 0.12);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.offerCard h3 {
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

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

.offerCard ul li {
    position: relative;
    padding-left: 1.85em;
    margin-bottom: 0.85em;
    line-height: 1.75;
}

.offerCard ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.1em;
    color: var(--btn-color);
}

.offerCard a {
    margin-top: 1.5rem;
    width: fit-content;
}

.offerCard:hover {
    transform: translateY(-0.35rem);
    box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.16);
}

.serviceCardWrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.75rem;
    max-width: 90rem;
    margin: 0 auto 4rem;
    padding: 0 1.5rem 2rem;
}

.serviceCard {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 1em;
    box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.14);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 18rem;
}

.serviceCard h2 {
    margin-bottom: 1rem;
    font-size: 1.8em;
}

.price {
    margin-top: -0.3em;
}

.serviceCard p {
    line-height: 1.75;
    color: rgba(0, 0, 0, 0.8);
}

.serviceCard:hover,
.offerCard:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 0.22em 0.52em rgba(0, 0, 0, 0.16);
}

/* .serviceAddOnsIntro {
    max-width: 70rem;
    margin: 0 auto;
    padding: 3rem 2rem 2rem;
    text-align: center;
}

.serviceAddOnsWrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: row;
    align-items: center;

    gap: 1.5rem;
} */


.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 8rem);
    padding: 4rem 1.5rem;
}

.auth-form {
    width: min(100%, 42rem);
    background-color: rgba(255, 255, 255, 0.95);
    padding: 2.5rem;
    border-radius: 1.2em;
    box-shadow: 0 0.14em 0.4em rgba(0, 0, 0, 0.12);
}

.auth-form h1 {
    font-size: 2.4rem;
    margin-bottom: 1rem;
}

.auth-form p {
    line-height: 1.8;
    margin-bottom: 1.75rem;
    color: rgba(0, 0, 0, 0.75);
}

.form-group {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.auth-form input,
.auth-form textarea {
    width: 100%;
    padding: 1rem;
    border-radius: 0.85em;
    border: 1px solid rgba(0, 0, 0, 0.14);
    font-size: 1rem;
    background: #ffffff;
}

.dashboard-page {
    max-width: 90rem;
    margin: 0 auto;
    padding: 4rem 1.5rem;
}

.dashboard-hero h1 {
    font-size: clamp(2.4rem, 4vw, 3rem);
    margin-bottom: 0.75rem;
}

.dashboard-hero p {
    line-height: 1.8;
    color: rgba(0, 0, 0, 0.75);
    margin-bottom: 2rem;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
}

.dashboard-panel {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 1em;
    box-shadow: 0 0.12em 0.35em rgba(0, 0, 0, 0.12);
    padding: 2rem;
}

.dashboard-panel h2 {
    margin-bottom: 1rem;
}

.metric-card {
    background-color: rgba(248, 245, 245, 0.95);
    border-radius: 0.95em;
    padding: 1.25rem;
    margin-top: 1rem;
    box-shadow: 0 0.08em 0.2em rgba(0, 0, 0, 0.08);
}

.dashboard-form textarea {
    min-height: 10rem;
    resize: vertical;
}

.testimonials {
    max-width: 90rem;
    margin: 0 auto 4rem;
    padding: 0 2rem;
}

.testimonial-card {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 1.1em;
    padding: 2.5rem;
    box-shadow: 0 0.14em 0.4em rgba(0, 0, 0, 0.12);
}

.testimonial-card p {
    line-height: 1.8;
    font-size: 1.05rem;
    margin-bottom: 1rem;
}

.testimonial-card span {
    font-weight: 700;
    color: rgba(0, 0, 0, 0.75);
}

@media (max-width: 900px) {
    .servicesHero {
        padding: 3em 1.5em;
    }

    .servicesHeroContent {
        width: 100%;
    }

    .serviceCards {
        padding: 2rem 1rem;
    }

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

    .serviceCardWrapper {
        padding: 0 1rem 2rem;
    }
}