@charset "UTF-8";

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

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

.header-container {
    background-color: #0a0d36;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: calc(100vw - 10%);
    min-height: 15vh;
    padding: 0 5% 0 5%;
    font: bold 16px/1.5 'Galano Grotesque', sans-serif;
}

#logo {
    max-width: 15vw;
}

.header-button {
    color: #fff;
}

#services-button,
#testimonials-button {
    margin: 0 3vw 0 0;
}

#icon-02 {
    max-width: 430px;
}

#icon-01 {
    max-width: 30vw;
    margin-top: 15vh;
    position: relative;
    z-index: 0;
}

.home-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10px;
    place-items: center;
    height: calc(100vh - 15vh);
}

#promisse {
    max-width: 45vw;
    font: bold 55px/1.3 'Galano Grotesque', sans-serif;
    color: #0d6c20;
    margin: 0 0 9vh 0;
}

#about-content p {
    color: #0a0d36;
    max-width: 45vw;
    font: normal 24px/1.3 'Galano Grotesque', sans-serif;
    margin: 0 0 7vh 0;
}

.action-button {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font: normal 16px/1.5 'Galano Grotesque', sans-serif;
    max-width: 100vw;
}

.button-01 {
    display: flex;
    justify-content: center;
    border-radius: 50px;
    background-color: #0d6c20;
    min-width: 180px;
    min-height: 40px;
    text-align: center;
    align-items: center;
}

.button-01 p {
    color: #ffffff;
}

.icon-02 {
    grid-column: 2;
}

#our-services {
    height: 100vh;
}


.our-services {
    display: grid;
    grid-row-start: 3;
    grid-row-end: 3;
    grid-template-columns: 1fr 1fr 1fr;
    place-items: center;
    width: 99vw;
    max-height: 80vh;
    text-align: center;
    position: absolute;
    z-index: 1;
}

.services-title {
    background-color: #0a0d36;
    display: flex;
    align-items: center;
    justify-content: center;
    font: normal 40px/1.5 'Galano Grotesque', sans-serif;
    color: #ffffff;
    width: 100vw;
    height: 20vh;
    text-align: center;
    position: relative;
    z-index: 1;
}

.service-card {
    background-color: #e5e9ed;
    width: 32vw;
    height: 78vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    margin-top: 1vh;
}

#card-01 {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#card-02 {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#card-03 {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#icon-04,
#icon-05 {
    margin-top: 10vh;
    width: 15vw;
}

#icon-06 {
    margin-top: 11vh;
    width: 14vw;
}

.service-title {
    font: normal 26px/1.5 'Galano Grotesque', sans-serif;
    color: #0a0d36;
    max-width: 25vw;
    margin-bottom: 2vh;
}

.service-description {
    font: normal 20px/1.5 'Galano Grotesque', sans-serif;
    color: #0a0d36;
    margin-bottom: 10vh;
    max-width: 30vw;
}

.testimonials {
    height: 100vh;
}

#testimonials {
    display: grid;
    grid-row-start: 4;
    grid-row-end: 4;
    height: 80vh;
    grid-template-columns: 1fr 1fr 1fr;
    place-items: center;
}

.testimonials-title {
    background-color: #0a0d36;
    display: flex;
    align-items: center;
    justify-content: center;
    font: normal 40px/1.5 'Galano Grotesque', sans-serif;
    color: #ffffff;
    width: 100vw;
    height: 20vh;
}

.testimonial-card {
    display: flex;
    flex-direction: column;
    box-shadow: -2px 4px 8px 1px rgba(40, 40, 40, 0.292);
    text-align: center;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 5px;
    margin-bottom: 2vh;

}

#card-04 {
    grid-column: 1;
    width: 21vw;
    height: 36vh;
}

#card-05 {
    grid-column: 2;
    width: 26vw;
    height: 43vh;
}

#card-06 {
    grid-column: 3;
    width: 21vw;
    height: 36vh;
}

#card-05 .testimonial-description {
    width: 21vw;

    font: normal 18px/1.5 'Galano Grotesque', sans-serif;
}

#card-05 .client-name {
    font: normal 15px/1.5 'Galano Grotesque', sans-serif;
}

#card-05 .client-picture {
    width: 85px;
    height: 85px;
    background-color: #5fc57f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#card-05 .star {
    font-size: 26px;
}

.star {
    color: #ffcc00;
}

.client-picture {
    display: flex;
    width: 70px;
    height: 70px;
    background-color: #5fc57f;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.client-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-description {

    width: 16vw;
    font: normal 16px/1.5 'Galano Grotesque', sans-serif;
}

.client-name {
    font: normal 13px/1.5 'Galano Grotesque', sans-serif;
}

.contacts {
    height: 100vh;
}

#contacts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-start: 5;
    grid-row-end: 5;
    height: 80vh;
    justify-content: center;
    align-items: center;
}

.contact-title {
    background-color: #0a0d36;
    display: flex;
    align-items: center;
    justify-content: center;
    font: normal 40px/1.5 'Galano Grotesque', sans-serif;
    color: #ffffff;
    width: 100vw;
    height: 20vh;
    text-align: center;
}

.contact-card {
    max-width: 30vw;
    font: normal 20px/1.5 'Galano Grotesque', sans-serif;
    color: #0a0d36;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.social-media {
    grid-column: 2;
}

.contact-icon {
    grid-column: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.social-icon {
    max-width: 35px;
    padding: 0 1vw 0 0;
    margin-top: 4vh;
}

#icon-07 {
    max-width: 57vw;
    position: relative;
    margin-top: 11vh;
    z-index: 0;
}

footer {
    background-color: #0a0d36;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100vw;
    height: 15vh;
    text-align: center;
    font: normal 10px/1.5 'Galano Grotesque', sans-serif;
    color: #68676e;
    position: relative;
    z-index: 1;
}

@media screen and (min-width: 760px) and (max-width: 912px) {

    .logo {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100vw;
        min-height: 15vh;
    }

    #logo {
        max-width: 60vw;
    }

    .header-buttons {
        display: none;
    }

    #icon-02 {
        display: none;
    }

    #icon-01 {
        display: none;
    }

    .home-container {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        height: calc(100vh - 15vh);
        text-align: center;
    }

    #promisse {
        max-width: 85vw;
        font: bold 60px/1.3 'Galano Grotesque', sans-serif;
        margin: 0 0 7vh 0;
    }

    #about-content p {
        max-width: 85vw;
        font: normal 28px/1.3 'Galano Grotesque', sans-serif;
        margin: 0 0 8vh 0;
    }

    .button-01 {
        width: 45vw;
        height: 7vh;
        margin: 1vh 0 0 0;
    }

    .action-button {
        font: normal 25px/1.5 'Galano Grotesque', sans-serif;
    }

    .our-services {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100vw;
        max-height: 80vh;
        text-align: center;
    }

    .service-card {
        width: 95vw;
        height: 25vh;
    }

    #card-01,
    #card-02,
    #card-03 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #icon-04,
    #icon-05,
    #icon-06 {
        display: none;
    }

    .service-title {
        font: normal 35px/1.5 'Galano Grotesque', sans-serif;
        max-width: 85vw;
    }

    .service-description {
        font: normal 24px/1.5 'Galano Grotesque', sans-serif;
        margin-bottom: 0vh;
        max-width: 90vw;
    }

    #testimonials {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        height: 100vh;
        overflow-y: scroll;
    }

    .testimonials-title {
        background-color: #0a0d36;
        display: flex;
        align-items: center;
        justify-content: center;
        font: normal 40px/1.5 'Galano Grotesque', sans-serif;
        color: #ffffff;
        width: 100vw;
        height: 20vh;
    }

    .testimonial-card {
        display: flex;
        flex-direction: column;
        box-shadow: -2px 4px 8px 1px rgba(40, 40, 40, 0.292);
        text-align: center;
        justify-content: space-evenly;
        align-items: center;
        border-radius: 5px;
        margin-bottom: 2vh;
        overflow-y: scroll;
    }

    #card-04,
    #card-05,
    #card-06 {
        width: 95vw;
        height: 30vh;
    }

    #card-05 .testimonial-description {
        width: 80vw;
        font: normal 24px/1.5 'Galano Grotesque', sans-serif;
    }

    #card-05 .client-name {
        font: normal 20px/1.5 'Galano Grotesque', sans-serif;
    }

    #card-05 .client-picture {
        display: flex;
        width: 90px;
        height: 90px;
        background-color: #5fc57f;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    #card-05 .star {
        font-size: 28px;
    }

    .star {
        color: #ffcc00;
        font-size: 28px;
    }

    .client-picture {
        display: flex;
        width: 90px;
        height: 90px;
        background-color: #5fc57f;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .client-picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .testimonial-description {
        width: 85vw;
        font: normal 24px/1.5 'Galano Grotesque', sans-serif;
    }

    .client-name {
        font: normal 20px/1.5 'Galano Grotesque', sans-serif;
    }

    .contacts {
        height: 85vh;
        margin: 18vh 0 0 0;
    }

    #contacts {
        height: 65vh;
        display: flex;
        flex-direction: column;
    }

    .contact-card {
        max-width: 85vw;
        font: normal 26px/1.5 'Galano Grotesque', sans-serif;
    }

    .social-media {
        display: flex;
        justify-content: center;
    }

    .social-icon {
        max-width: 7vw;
        padding: 0 8vw 0 0;
        margin-top: 8vh;
    }

    #icon-07 {
        display: none;
    }

    footer img{
        width: 40vw;
    }

}

@media screen and (max-width: 760px) {

    .logo {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100vw;
        min-height: 15vh;
    }

    #logo {
        max-width: 60vw;
    }

    .header-buttons {
        display: none;
    }

    #icon-02 {
        display: none;
    }

    #icon-01 {
        display: none;
    }

    .home-container {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        height: calc(100vh - 15vh);
        text-align: center;
    }

    #promisse {
        max-width: 85vw;
        font: bold 36px/1.3 'Galano Grotesque', sans-serif;
        margin: 0 0 7vh 0;
    }

    #about-content p {
        max-width: 85vw;
        font: normal 21px/1.3 'Galano Grotesque', sans-serif;
        margin: 0 0 8vh 0;
    }

    .button-01 {
        width: 50vw;
        height: 7vh;
        margin: 1vh 0 0 0;
    }

    .our-services {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100vw;
        max-height: 80vh;
        text-align: center;
    }

    .service-card {
        width: 95vw;
        height: 25vh;
    }

    #card-01,
    #card-02,
    #card-03 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #icon-04,
    #icon-05,
    #icon-06 {
        display: none;
    }

    .service-title {
        font: normal 20px/1.5 'Galano Grotesque', sans-serif;
        max-width: 85vw;
    }

    .service-description {
        font: normal 16px/1.5 'Galano Grotesque', sans-serif;
        margin-bottom: 0vh;
        max-width: 90vw;
    }

    #testimonials {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        height: 100vh;
        overflow-y: scroll;
    }

    .testimonials-title {
        background-color: #0a0d36;
        display: flex;
        align-items: center;
        justify-content: center;
        font: normal 40px/1.5 'Galano Grotesque', sans-serif;
        color: #ffffff;
        width: 100vw;
        height: 20vh;
    }

    .testimonial-card {
        display: flex;
        flex-direction: column;
        box-shadow: -2px 4px 8px 1px rgba(40, 40, 40, 0.292);
        text-align: center;
        justify-content: space-evenly;
        align-items: center;
        border-radius: 5px;
        margin-bottom: 2vh;
        overflow-y: scroll;
    }

    #card-04,
    #card-05,
    #card-06 {
        width: 95vw;
        height: 30vh;
    }

    #card-05 .testimonial-description {
        width: 80vw;
        font: normal 16px/1.5 'Galano Grotesque', sans-serif;
    }

    #card-05 .client-name {
        font: normal 13px/1.5 'Galano Grotesque', sans-serif;
    }

    #card-05 .client-picture {
        display: flex;
        width: 70px;
        height: 70px;
        background-color: #5fc57f;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    #card-05 .star {
        font-size: 16px;
    }

    .star {
        color: #ffcc00;
    }
    
    .testimonial-card .rating{
        min-width:80vw;
    }

    .client-picture {
        display: flex;
        width: 70px;
        height: 70px;
        background-color: #5fc57f;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .client-picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .testimonial-description {
        width: 85vw;
        font: normal 16px/1.5 'Galano Grotesque', sans-serif;
    }

    .client-name {
        font: normal 13px/1.5 'Galano Grotesque', sans-serif;
    }

    .contacts {
        height: 85vh;
        margin: 18vh 0 0 0;
    }

    #contacts {
        height: 65vh;
        display: flex;
        flex-direction: column;
    }

    .contact-card {
        max-width: 85vw;
        font: normal 18px/1.5 'Galano Grotesque', sans-serif;
    }

    .social-media {
        display: flex;
        justify-content: center;
    }

    .social-icon {
        max-width: 7vw;
        padding: 0 8vw 0 0;
        margin-top: 4vh;
    }

    #icon-07 {
        display: none;
    }

    footer img{
        width: 40vw;
    }

    footer{
        flex-direction: column;
    }
}