@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
/* - - - browser resets - - - */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    color: rgba(0, 0, 0, 0.815);
    scroll-behavior: smooth;
}

/* - - - global properties - - - */
p,li {
    font-size: 1vw;
    line-height: 1.7vw;
}
@media screen and (max-width: 500px) {
    p, li {
        font-size: 3.5vw;
        line-height: 6vw;
    }
}


h3 {
    font-size: 2vw;
}
@media screen and (max-width: 500px) {
    h3 {
        font-size: 6vw;
    }
}

h4 {
    font-size: 1.2vw;
    text-decoration: underline;
}
@media screen and (max-width: 500px) {
    h4 {
        font-size: 4vw;
    }
}



h3.menu {
    font-size: 1.5vw;
    padding: 2% 0 1% 0 ;
} 
@media screen and (max-width: 500px) {
    h3.menu {
        font-size: 6vw;
        padding: 2% 0 1% 0 ;
    } 
}



hr {
    height: 0.2vw;
    background-color: #ca0808;
    outline: none;
    border: none;
    width: 5vw;
    margin-top: 0.5%;
}
@media screen and (max-width: 500px) {
    hr {
        height: 1vw;
        background-color: #ca0808;
        outline: none;
        border: none;
        width: 20vw;
        margin-top: 0.5%;
    }
}


main {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* - - - about section - - - */

#about{
    width: 100%;
    padding: 5% 10%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f3f3f3;
}
@media screen and (max-width: 500px) {
    #about{
        width: 100%;
        padding: 15% 5%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #f3f3f3;
    }
}

#about .information {
    display: flex;
    padding-top: 4%;
    justify-content: space-between;
}

@media screen and (max-width: 500px) {
    #about .information {
        display: flex;
        flex-direction: column-reverse;
        padding-top: 10%;
        justify-content: space-between;
    }
}

#about .information div {
    display: flex;
    justify-content: center;
    width: 48%;
}

@media screen and (max-width: 500px) {
    #about .information div {
        display: flex;
        justify-content: center;
        width: 100%;
    }
}

#about .information .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 500px) {
    #about .information .info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 10%;
    }
}

#about .information .info li {
    padding-bottom: 3%;
    text-align:start;
}

#about .information .info a {
    width: 100%;
}
@media screen and (max-width: 500px) {
    #about .information .info a {
        width: 100%;
    }
}



#about .information .info a button {
    background-color: #ca0808;
    color: #fff;
    padding: 1.5% 3%;
    outline: none;
    border: 0.2vw solid #ca0808;
    margin-top: 2%;
    border-radius: 0.7vw;
    cursor: pointer;
    font-size: 0.9vw;
}
@media screen and (max-width: 500px) {
    #about .information .info a button {
        background-color: #ca0808;
        color: #fff;
        padding: 5% 10%;
        outline: none;
        border: 0.2vw solid #ca0808;
        margin-top: 10%;
        border-radius: 3vw;
        cursor: pointer;
        font-size: 4vw;
    }
}

#about .information .images {
    justify-content: flex-end;
}

#about .information .images img {
    width: 90%;
    border-radius: 1vw;
}
@media screen and (max-width: 500px) {
    #about .information .images img {
        width: 100%;
        border-radius: 3vw;
    }
}

#about .information .images img.active {
    display: block;
}


 /* - - - feedback-modal section - - - */
@keyframes appear {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.modal-feedback {
    width: 90%;
    height: 80vh;
    padding: 5%;
    background-color: #ffff;
    position: fixed;
    margin-top: 5%;
    border-radius: 1.5vw;
    box-shadow: 0 0 1vw rgba(0, 0, 0, 0.3);
    animation: appear 0.5s;
    transition: 0.5s ease-out;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
   display: none;
}
@media screen and (max-width: 500px) {
    .modal-feedback {
        width: 90%;
        height: 95vh;
        padding: 10%;
        background-color: #ffff;
        position: fixed;
        margin-top: 5%;
        border-radius: 3vw;
        box-shadow: 0 0 3vw rgba(0, 0, 0, 0.3);
        animation: appear 0.5s;
        transition: 0.5s ease-out;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-around;
        display: none;
    }
}


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

    .modal-feedback.show{
    display: flex;
}
}

#feedback-modal svg{
    position: absolute;
    width: 2vw;
    left: 96%;
    top: 3%;
    cursor: pointer;
    color: #ca0808;
}
@media screen and (max-width: 500px) {
    #feedback-modal svg{
        position: absolute;
        width: 10vw;
        left: 85%;
        top: 1.5%;
        cursor: pointer;
        color: #ca0808;
    }
}

#feedback-modal h3 {
    color: #ca0808;
    font-size: 1.5vw;
    margin-bottom: 2%;
}
@media screen and (max-width: 500px) {
    #feedback-modal h3 {
        color: #ca0808;
        font-size: 5vw;
        margin-bottom: 2%;
    }
}

#feedback-modal .selection {
    width: 50%;
}
@media screen and (max-width: 500px) {
    #feedback-modal .selection {
        width: 100%;
    }
}

#feedback-modal .selection form {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
@media screen and (max-width: 500px) {
    #feedback-modal .selection form {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
}


#feedback-modal .selection form div {
    display: flex;
    margin: 3% 0;
}


#feedback-modal .selection form .feedback-message input {
    padding: 2% 3%;
    font-size: 1vw;
    width: 300px;
    height: 100px;
    border-radius: 5%;
    outline: none;
    border: 0.1vw solid rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 500px) {
    #feedback-modal .selection form .feedback-message input {
        padding: 3% 5%;
        font-size: 3.5vw;
        margin: 2% 0;
        width: 100%;
        outline: none;
        border-radius: 2vw;
        border: 0.1vw solid rgba(0, 0, 0, 0.5);
    }
}



#feedback-modal .selection form .identity select {
    padding: 2% 3%;
    font-size: 1vw;
    background-color: #f3f3f3;
    width: 300px;
    outline: none;
    border: 0.1vw solid rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 500px) {
    #feeback-modal .selection form .identity select {
        padding: 3% 5%;
        font-size: 3.5vw;
        background-color: #f3f3f3;
        width: 300px;
        outline: none;
        border-radius: 2vw;
        border: 0.1vw solid rgba(0, 0, 0, 0.5);
    }
}

#feedback-modal .selection form .fullname {
    width: 100%;
    justify-content: space-between;
}
@media screen and (max-width: 500px) {
    #feedback-modal .selection form .fullname {
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

#feedback-modal .selection form .fullname input {
    padding: 2% 3%;
    font-size: 0.7vw;
    width: 48%;
    outline: none;
    border-radius: 0.5vw;
    border: 0.1vw solid rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 500px) {
    #feedback-modal .selection form .fullname input {
        padding: 3% 5%;
        font-size: 3.5vw;
        margin: 2% 0;
        width: 100%;
        outline: none;
        border-radius: 2vw;
        border: 0.1vw solid rgba(0, 0, 0, 0.5);
    }
}


#feedback-modal .selection form .phone {
    width: 100%;
    justify-content: space-between;
}
@media screen and (max-width: 500px) {
    #feedback-modal .selection form .phone {
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

#feedback-modal .selection form .phone input {
    padding: 2% 3%;
    font-size: 0.7vw;
    width: 48%;
    outline: none;
    border-radius: 0.5vw;
    border: 0.1vw solid rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 500px) {
    #feedback-modal .selection form .phone input {
        padding: 3% 5%;
        font-size: 3.5vw;
        margin: 2% 0;
        width: 100%;
        outline: none;
        border-radius: 2vw;
        border: 0.1vw solid rgba(0, 0, 0, 0.5);
    }
}

#feedback-modal .selection form .category-type select {
    padding: 2% 3%;
    font-size: 1vw;
    background-color: #f3f3f3;
    width: 300px;
    outline: none;
    border: 0.1vw solid rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 500px) {
    #feeback-modal .selection form .category-type select {
        padding: 3% 5%;
        font-size: 5vw;
        background-color: #f3f3f3;
        width: 200px;
        outline: none;
        border-radius: 2vw;
        border: 0.1vw solid rgba(0, 0, 0, 0.5);
    }
}



#feedback-modal .selection form .submit input[type=submit]{
    background-color: #ca0808;
    color: #fff;
    padding: 10% 20%;
    outline: none;
    border: 0.2vw solid #ca0808;
    margin-top: 2%;
    border-radius: 0.5vw;
    cursor: pointer;
    font-size: 0.7vw;
}
@media screen and (max-width: 500px) {
    #feedback-modal .selection form .submit input[type=submit]{
        background-color: #ca0808;
        color: #fff;
        padding: 10% 20%;
        outline: none;
        border: 0.2vw solid #ca0808;
        margin-top: 0;
        border-radius: 1.5vw;
        cursor: pointer;
        font-size: 3vw;
    }
}


/* Confirmation section */

.popupConfirmation {
    width: 50%;
    height: auto;
    margin-left: 5%;
    padding: 5%;
    background-color: #ffff;
    position: fixed;
    margin-top: 5%;
    border-radius: 1.5vw;
    box-shadow: 0 0 1vw rgba(0, 0, 0, 0.3);
    animation: appear 0.5s;
    transition: 0.5s ease-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    display: none; 
}
@media screen and (max-width: 500px) {
    .popupConfirmation {
        width: 70%;
        height: auto;
        padding: 7%;
        background-color: #ffff;
        position: fixed;
        margin-top: 60%;
        border-radius: 3vw;
        box-shadow: 0 0 3vw rgba(0, 0, 0, 0.3);
        animation: appear 0.5s;
        transition: 0.5s ease-out;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        display: none; 
    }

    
    #confirmation h3 {
        margin-top: 2%;
        text-align: center;
    }
    
}

#confirmation p {
    margin-top: 2%;
    text-align: center;
}

#confirmation button {
    display: flex;
    justify-content: center;
    margin-top: 6%;
    background-color: #ca0808;
    color: #fff;
    padding: 1% 5%;
    outline: none;
    border: 0.2vw solid #ca0808;
    margin-top: 2%;
    border-radius: 0.5vw;
    cursor: pointer;
    font-size: 0.7vw;
}
@media screen and (max-width: 500px) {
    #confirmation button {
        background-color: #ca0808;
        color: #fff;
        padding: 3% 20%;
        outline: none;
        border: 0.2vw solid #ca0808;
        margin-top: 5%;
        border-radius: 1.5vw;
        cursor: pointer;
        font-size: 3vw;
    }
    
}


/* - - - footer section - - - */
footer{
    width: 100%;
    padding: 3% 10% 2% 10%;
    background-color:aliceblue;
}
@media screen and (max-width: 500px) {
    footer{
        width: 100%;
        padding: 7% 10% 5% 10%;
        background-color: #f3f3f3;
    }
}

footer .social {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 500px) {
    footer .social {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
}


footer .social svg {
   width: 2vw;
   margin: 0 1%;
   color: #ca0808;
}
@media screen and (max-width: 500px) {
    footer .social svg {
        width: 6vw;
        margin: 0 3%;
        color: #ca0808;
     }
}

footer .footer-text {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-top: 2%;
}
@media screen and (max-width: 500px) {
    footer .footer-text {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding-top: 2%;
    }
}

footer .footer-text p {
    font-size: 0.85vw;
}
@media screen and (max-width: 500px) {
    footer .footer-text p {
        font-size: 3vw;
    }
}