#hero-section {background-color: hsla(120, 3%, 6%, 70%);}

#pricing {
    background-color: var(--primary-color-2);
    color: #000;
}

#pricing .grid-layout {align-items: flex-start;}

#pricing article {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 60px 5%;
    border-radius: 5px;
}

#pricing article h3,
#pricing article .price-par {
    font-size: 30px;
    line-height: 40px;
    text-align: center;
}

#pricing article p {
    font-weight: 600;
}

#pricing article ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#pricing article li {
    display: flex;
    gap: 5px;
}

#pricing article li::before {
    content: "\2713";
    font-weight: bold;
    margin-bottom: -10px;
}

#basic-features {border: 1px solid var(--primary-color-1);}

#basic-features .btn-1.teal-bdr:hover {
    color: var(--primary-color-1);
    border-color: var(--primary-color-1);
}

#basic-features .btn-1.teal-bckg:hover {background-color: var(--primary-color-1);}

#additional-features {
    background-color: var(--primary-color-1);
    color: #fff;
}

#additional-features .btn-1.teal-bdr:hover,
#portfolio .btn-container .btn-1.teal-bdr:hover {
    color: var(--primary-color-2);
    border-color: var(--primary-color-2);
}

#additional-features .btn-1.teal-bckg:hover,
#portfolio .btn-container .btn-1.teal-bckg:hover {
    background-color: var(--primary-color-2);
    color: var(--primary-color-1);
}

#portfolio {background-color: hsla(120, 3%, 6%, 90%);}

#testimonials {background-color: hsla(120, 3%, 6%, 70%);}

#website-features {background-color: var(--primary-color-3);}

#website-features article img {
    max-height: 200px;
}

#website-features article {
    background-color: var(--primary-color-2);
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #000;
    padding: 30px 4%;
    border-radius: 5px;
}

#services {background-color: var(--primary-color-1);}

#contacts {
    background-color: var(--primary-color-2);
    color: #000;
}

#contacts .contacts-list a:hover {color: var(--primary-color-3);}

#contacts input, #contacts textarea {border-bottom: 2px solid #000;}

#contacts input::placeholder {color: #000;}

#contacts .btn-1.black-bckg:hover {background-color: var(--primary-color-3);}