/* SUBPAGE TITLE BANNERS */
.web-dev-title,
.system-dev-title,
.mobile-dev-title,
.support-title {
    background-size: cover;
    background-repeat: no-repeat;
    padding: 50px 0;
}

.web-dev-title {
    background-image: url(../img/Service-Subpage/Subheader/web-devBG.png);
}

.system-dev-title {
    background-image: url(../img/Service-Subpage/Subheader/system-devBG.png);
}

.mobile-dev-title {
    background-image: url(../img/Service-Subpage/Subheader/mobileBG.png);
}

.support-title {
    background-image: url(../img/Service-Subpage/Subheader/supportBG.png);
}

.subpage-title-text,
.service-text {
    color: white;
    text-align: center;
}

.subpage-title-text {
    font-size: 40px;
    margin: 0 0 20px 0;
    font-weight: 500;
}

.service-text {
    font-size: 20px;
    width: 65%;
    display: block;
    margin: 0 auto;
}

/* PROJECTS */
/* hide projects section temporarily */
.projects {
    display: none;
}

.projects-title {
    font-size: 35px;
    font-weight: 600;
    text-align: center;
    text-shadow: -2px 3px lightgrey;
}

.project-container {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.project-scroll-container {
    display: flex;
    overflow-x: auto;
    padding: 0 35px;
}

.project-scroll-container::-webkit-scrollbar {
    display: none;
}

.project-card-container {
    display: flex;
    justify-content: center;
    gap: 50px;
    padding-top: 30px;
    padding-bottom: 40px;
}

@keyframes slide-animation {

    0%,
    10% {
        transform: translateX(0);
    }

    20%,
    40% {
        transform: translateX(-300px);
    }

    50%,
    70% {
        transform: translateX(-600px);
    }

    80%,
    100% {
        transform: translateX(-900px);
    }
}

.project-card-container a {
    text-decoration: none;
}

.project-card {
    min-width: 250px;
    height: 350px;
    background-color: #50b848;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: -15px 15px lightgray;
    cursor: pointer;
}

.project-card:hover {
    transform: scale(1.05);
    transition: 0.2s;
}

.project-name {
    font-size: 25px;
    font-weight: 500;
    text-align: center;
    color: white;
}

/* OFFER */
.offer {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 45px;
}

.offer-container {
    padding: 20px;
}

.offer-title {
    font-size: 35px;
    font-weight: 600;
    text-align: center;
    margin: 5px 10px;
    text-shadow: -2px 3px lightgray;
}

.offer-text-container {
    max-width: 1000px;
    width: 100%;
    background-color: #50b848;
    box-shadow: -15px 15px lightgray;
    border-radius: 20px;
    padding: 2px 10px;
}

.offer-text {
    text-align: center;
    font-size: 20px;
    color: white;
}

/* CONTACT US */
.contact-us {
    margin-bottom: 70px;
    padding: 0 20px;
}

.contact-title-container {
    text-align: center;
}

/* contact title animation */
@keyframes shake {

    0%,
    50%,
    100% {
        transform: translateY(0);
    }

    25%,
    75% {
        transform: translateY(-10px);
    }
}

.contact-title {
    font-size: 35px;
    font-weight: 600;
    text-align: center;
    display: inline-block;
    animation: shake 3s ease-in-out infinite;
    text-shadow: -2px 3px lightgrey;
}

.contact-button-container {
    display: flex;
    justify-content: center;
}

.contact-button {
    background-color: #50b848;
    border: none;
    border-radius: 10px;
    color: white;
    padding: 10px 20px;
    font-size: 40px;
    font-weight: 500;
    transition: transform 0.2s;
}

.contact-button:hover {
    cursor: pointer;
    transform: scale(1.15);
}

.fa-phone {
    color: white;
    font-size: 40px;
}

/* MOBILE LAYOUT */
@media (max-width:580px) {
    .subpage-title-text {
        font-size: 30px;
        margin: 0;
    }

    .service-text {
        font-size: 15px;
    }

    .projects-title,
    .offer-title,
    .contact-title {
        font-size: 30px;
    }

    .offer-text {
        font-size: 17px;
    }
}