/* CSS HEX */
:root {
    --dark-purple: #2e0219ff;
    --tyrian-purple: #4a001fff;
    --tyrian-purple-2: #6a0f49ff;
    --ash-gray: #a7c4c2ff;
    --ice-blue: #97efe9ff;
}

/* CSS HSL */
:root {
    --dark-purple: hsla(329, 92%, 9%, 1);
    --tyrian-purple: hsla(335, 100%, 15%, 1);
    --tyrian-purple-2: hsla(322, 75%, 24%, 1);
    --ash-gray: hsla(176, 20%, 71%, 1);
    --ice-blue: hsla(176, 73%, 76%, 1);
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--ash-gray);
}
header {
    background-color: var(--dark-purple);
    color: #fff;
    padding: 20px 0;
    text-align: center;
}
header h1 {
    margin: 0;
}
header p {
    margin: 5px 0 0;
}
.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}
.services {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 20px 0;
}
.service {
    background: #fff;
    padding: 20px;
    flex: 1;
    margin: 10px;
    text-align: center;
    border: 1px solid var(--tyrian-purple);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}
.service:hover {
    transform: scale(1.05);
}
.service img {
    width: 123px;
    height: 123px;
    display: block;
    margin: auto;
}
.about-us {
    text-align: center;
    margin: 20px 0;
}
.about-button {
    background-color: var(--tyrian-purple);
    color: #fff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
}
.about-button:hover {
    background-color: var(--tyrian-purple-2);
}
.about-content {
    display: none;
    background: #fff;
    padding: 20px;
    border: 1px solid var(--tyrian-purple);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
}
.about-content h2 {
    margin-top: 0;
}
footer {
    background-color: var(--dark-purple);
    color: #fff;
    text-align: center;
    padding: 20px 0;
    position: relative;
    width: 100%;
}
footer a {
    color: var(--ice-blue);
    text-decoration: none;
}
footer a:hover {
    text-decoration: underline;
}