css.css

@import url('https://fonts.googleapis.com/css2?family=Style+Script&display=swap');

.welcome-container {
    margin-top: 10rem;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.titles {
    margin-left: 20rem;
    display: flex;
    flex-direction: column;
}

.titles span:nth-child(1) {
    font-size: 6rem;
    color: #ffffff;
    font-family: 'Style Script', cursive;
}

.titles span:nth-child(2) {
    font-size: 1.5rem;
}

.services {
    margin-top: 15rem;
    width: 100%;
    height: 25rem;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.services-container {
    width: 70%;
    height: inherit;
    margin-top: -10rem;
    display: flex;
    flex-wrap: wrap;
}

.services-item {
    height: 50%;
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.services-container div:nth-child(2) img,
.services-container div:nth-child(4) img,
.services-container div:nth-child(5) img,
.services-container div:nth-child(7) img {
    width: 100%;
    height: 100%;
}

.services-container div:nth-child(1) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fcd2c0;
}

.services-container div:nth-child(1) div:nth-child(1) {
    width: 2rem;
    border-bottom: solid 2px black;
}

.services-container div:nth-child(1) span {
    margin-top: 1rem;
    font-size: 1.5rem;
}

.services-container div:nth-child(1) div:nth-child(3) {
    margin-top: 2.5rem;
    background-color: #fcd2c0;
    display: flex;
    justify-content: center;
    width: 60%;
    height: 3rem;
    cursor: pointer;
}

.services-container div:nth-child(1) div:nth-child(3):hover {
    background-color: #e59674;
    color: #ffffff;
}

.services-container div:nth-child(1) div:nth-child(3) span {
    font-size: .8rem;
}

.services-container div:nth-child(3) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    background-color: #000000;
}

.services-container div:nth-child(3) div:nth-child(3) {
    margin-top: 2.5rem;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    height: 2rem;
    cursor: pointer;
}

.services-container div:nth-child(3) div:nth-child(3):hover {
    color: #e59674;
}

.services-container div:nth-child(3) div:nth-child(3) span {
    font-size: .8rem;
}

.services-container div:nth-child(3) div:nth-child(1) {
    width: 2rem;
    border-bottom: solid 2px #ffffff;
}

.services-container div:nth-child(3) span {
    margin-top: 1rem;
    font-size: 1.5rem;
}


.services-container div:nth-child(6) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #000000;
    background-color: #ffffff;
}

.services-container div:nth-child(6) div:nth-child(3) {
    margin-top: 2.5rem;
    background-color: #ffffff;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    height: 2rem;
    cursor: pointer;
}

.services-container div:nth-child(6) div:nth-child(3):hover {
    color: #e59674;
}

.services-container div:nth-child(6) div:nth-child(3) span {
    font-size: .8rem;
}

.services-container div:nth-child(6) div:nth-child(1) {
    width: 2rem;
    border-bottom: solid 2px #000000;
}

.services-container div:nth-child(6) span {
    margin-top: 1rem;
    font-size: 1.5rem;
}


.services-container div:nth-child(8) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    background-color: #fcd2c0;
}

.services-container div:nth-child(8) div:nth-child(3) {
    margin-top: 2.5rem;
    background-color: #fcd2c0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    height: 2rem;
    cursor: pointer;
}

.services-container div:nth-child(8) div:nth-child(3):hover {
    color: #ffffff;
    background-color: #e59674;
}

.services-container div:nth-child(8) div:nth-child(3) span {
    font-size: .8rem;
}

.services-container div:nth-child(8) div:nth-child(1) {
    width: 2rem;
    border-bottom: solid 2px #ffffff;
}

.services-container div:nth-child(8) span {
    margin-top: 1rem;
    font-size: 1.5rem;
}