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

    --btn-color-hover: #2b2b2b;
    --btn-color-shadow: #1a1a1a;
    --btn-color: #1a1a1a;
    --btn-color-hover-shadow: #0f0f0f;

}

.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); 
    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;
}

main {
    margin: 0;
    padding: 0;
}

html {
    padding: 0;
    margin: 0;
}

/* Header Styling Below */

.header {
    background-color: var(--background-color);
    color: var(--text-color);
   
    /* border-bottom: 0.1em solid var(--text-color); */
    box-shadow: 0 0.001em 1em var(--btn-color-shadow);

    width: 100%;
    height: auto;
}

.logo {
    display: flex;
    flex-direction: row;
    padding-left: 2em;

    width: auto;
    height: auto; 
    
}

.header > nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;

    width: 100%;
    height: auto;
}

.nav-links {

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: right;

    width: auto;
    height: auto;

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

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

    list-style: none;
    margin: 0 15px;
}

.nav-links > a:hover {
    font-size: 1.2em;
    color: var(--btn-color-hover);
}


/* Footer Styling Below */

footer {
    background-color: var(--background-color);
    color: var(--text-color);

    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    gap: 6em;

    box-shadow: 0 0.001em 1em var(--btn-color-shadow);
    
    width: 100%;
    height: auto;
}

/* Hero Section */

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

    width: 100%;
    height: 95vh;

    padding: 4em 0;
    
    background-image: url('./assets/images/serveroom.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;

}


.hero-content {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 2em;
    border-radius: 10px;
    text-align: center;
}

.hero-content h1 {
    font-size: 3em;
    margin-bottom: 0.5em;
}

.hero-content p {
    font-size: 1.5em;
    margin-bottom: 1em;
}

.hero-content > a {
    display: inline-block;
    padding: 0.75em 1.5em;
    background-color: var(--btn-color);
    color: var(--background-color);
    border-radius: 5px;
    box-shadow: 0 0.1em 0.2em var(--btn-color-shadow);
    transition: all 0.3s ease;
}

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

/* Services section */

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

    width: 100%;
    height: auto;

    padding: 4em 0;
}

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

.service-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    gap: 2em;

    width: 80%;
    height: auto;
}

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

    width: 300px;
    height: auto;

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



/* Contact Us 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: 10%;
}

.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);
}

.indexCardWrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));

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

    gap: 3.5em;
    margin-left: 2.5em;

    width: 95%;
    height: auto;
}

.indexCard {
    width: 100%;
    min-height: 16em;
    max-height: 16em;
    margin: 1em;
    padding: 1.5em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.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 */

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

    width: 100%;
    height: auto;

    padding: 4em 0;
}

.servicesIntro h2 {
    font-size: 2.1em;
    margin-bottom: 1em;
}

.servicesIntro p {
    font-size: 1.2em;
    margin-bottom: 2em;
    width: 60%;
    text-align: center;
}

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

    width: 100%;
    height: auto;
}

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

.serviceOfferingsIntro p {
    font-size: 1.2em;
    margin-bottom: 2em;
    width: 60%;
    text-align: center;
}

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

    width: 100%;
    height: 100%;

}

.serviceCards h2 {
    font-size: 2.1em;
    margin-bottom: 1em;
}

.serviceCards p {
    font-size: 1.2em;
    margin-bottom: 2em;
    width: 60%;
    text-align: center;
}

.essentialsCard, .foundationCard, .growthCard {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 2em;
    border-radius: 10px;
    text-align: center;

    width: 20%;
    height: auto;

    margin: 2em;

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

.essentialsCard:hover, .foundationCard:hover, .growthCard:hover {
    box-shadow: 0 0.1em 0.5em var(--btn-color-hover-shadow);
    transform: translateY(-5px);
    
}

.essentialsCard h2, .foundationCard h2, .growthCard h2 {
    font-size: 1.5em;
    margin-bottom: 1em;
}

.essentialsCard ul, .foundationCard ul, .growthCard ul {
    text-align: left;
    padding-left: 1em;
}

.essentialsCard ul li, .foundationCard ul li, .growthCard ul li {
    font-size: 1.1em;
    margin-bottom: 0.5em;
}

.essentialsCard ul li::before, .foundationCard ul li::before, .growthCard ul li::before {
    content: "✓";
    color: var(--btn-color);
    margin-right: 0.5em;
}

.essentialsCard ul li:hover, .foundationCard ul li:hover, .growthCard ul li:hover {
    color: var(--btn-color-hover);
}

.essentialsCard a, .foundationCard a, .growthCard a {
    display: inline-block;
    margin-top: 1em;
    padding: 0.75em 1.5em;
    background-color: var(--btn-color);
    color: var(--background-color);
    border-radius: 5px;
    box-shadow: 0 0.1em 0.2em var(--btn-color-shadow);
    transition: all 0.3s ease;
}


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


.serviceCardWrapper {
    width: 100%;
    height: auto;

    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    
}

.serviceCard {
    width: 100%;
    min-height: 16em;
    max-height: 16em;
    padding: 1.5em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.customServices{
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    text-align: center;
    padding: 2em;

    width: 50%;
    height: auto;

    margin: 1em;

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

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

    width: 50%;
    height: auto;

    margin: 1em;

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

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

    width: 50%;
    height: auto;

    margin: 1em;

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