body {
     background-color: #202020;
 }

 main {
     width: 100%;
     margin: 0 auto;
     /* padding: 20px 0 100px;  */
 }

 .contact-capa {
     background-color: #202020;
     height: 100vh;
 }

 .contact-capa>h1 {
     font-size: 120px;
     text-align: center;
     font-weight: 900;
     text-transform: uppercase;
     color: var(--bege);
     font-variation-settings:
         "wdth" 62;
     position: sticky;
     top: 20%;
 }

 .contact {
     color: var(--bege);
     margin: 0px auto;
     padding: 150px 50px;
     width: 70%;
 }

 section>p {
     margin: 20px auto;
     text-align: center;
     font-size: 21px;
 }

 .contact-destaq {
     font-weight: 500;
     font-variation-settings:
         "wdth" 62;
     font-size: 30px;
     /* text-decoration: underline 1px solid black; */
     color: var(--lilas);
 }

 .contact-parallax {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 /*  */
 .lp-service {
     /* background-color: #202020; */
     background-color: black;
     width: 100%;
     color: var(--bege);
 }

 .container-service {
     display: flex;
     height: 350px;
 }

 .titles {
     width: 45%;
     padding: 0px 50px 0 20px;
     font-size: 30px;
     height: 350px;
     font-variation-settings:
         "wdth" 62;
     line-height: 1;
     text-align: end;
     overflow-y: auto;
     align-content: center;
 }

 .titles h3 {
     cursor: pointer;
     margin: 15px 0;
     color: var(--bege)
 }

 .titles h3.active-service {
     color: var(--verde3);
     text-decoration: underline 2px solid var(--verde3);
 }

 .contents-service {
     color: var(--bege);
     width: 55%;
     padding: 15px;
     text-align: center;
     font-size: 21px;
     align-content: center;
     font-weight: 100;
     text-align: start;
 }

 .content-service {
     display: none;
     align-content: center;
 }

 .content-service>p {
     margin: 0 55px 25px 5px;
 }

 .desktop {
     display: block;
 }

 /* form */
 #contact-page {
     background-image: url(../assets/img/background/background-form-verde2.png);
     height: 110vh;
 }

 .form>h3 {
     font-size: 50px;
     font-variation-settings:
         "wdth" 62;
     font-weight: 800;
     color: var(--bege);
 }

 .form {
     align-items: center;
     padding: 50px;
     display: flex;
     flex-direction: column;
     width: 600px;
     background-color: rgba(2, 2, 2, 0.279);
     border: none;
     border-radius: 8px;
 }

 .form>input,
 .form>select,
 .form>textarea {
     line-height: 1.3;
     height: 30px;
     border-radius: 5px;
     width: 500px;
     margin: 8px 0;
     padding: 0 15px;
     border: none;
     background-color: var(--gray-main-color2);
     font-family: "Archivo", sans-serif;
     font-size: 14px;
 }

 .form>textarea {
     height: 150px;
     padding: 10px 15px;
 }

 .form>button {
     width: 120px;
     padding: 5px;
     margin: 10px 0;
     border: none;
     font-size: 18px;
     border-radius: 4px;
     font-family: "Archivo", sans-serif;
     font-variation-settings:
         "wdth" 62;
     background-color: var(--gray-main-color2);
 }

 .form>button:hover {
     background-color: var(--verde2);
     color: var(--bege);
     font-style: italic;
     font-weight: 500;
 }

 /* color */
 #menu a:hover {
     text-decoration-color: var(--verde3);
 }

 .copyright {
     background-color: var(--verde3);
 }

 .footer a:hover {
     text-decoration: underline 2px var(--verde3);
     font-style: italic;
 }

 @media (max-width: 480px) {

     .contact-capa {
         height: 90vh;
     }

     .contact-capa>h1 {
         font-size: 90px;
     }

     .contact {
         padding: 100px 20px;
         width: 95%;
     }

     section>p {
         font-size: 18px;
     }

     .contact-destaq {
         font-size: 28px;
     }
     
     .container-service {
        height: 450px;
    }

    .titles {
        padding: 0px 5px 0 10px;
        font-size: 19px;
        height: 450px;
    }

    .titles h3 {
        margin: 20px 0;
    }

    .contents-service {
        padding: 15px 5px;
        font-size: 18px;
    }

    .content-service>p {
        margin: 20px 5px;
    }

     /* form */
     #form-section {
         height: 90vh;
     }

     .form {
         width: 350px;
         padding: 50px 10px;
         text-align: center;
     }

     .form>input,
     .form>select,
     .form>textarea {
         width: 320px;
     }

     .form>button {
         margin: 10px auto;
     }
    }


     /* tela-grande */
     @media screen and (min-width: 1601px) {
         .contact-capa>h1 {
             font-size: 120px;
         }

         .form {
             width: 900px;
         }

         .form>input,
         .form>select,
         .form>textarea {
             height: 40px;
             width: 600px;
             font-size: 15px;
         }

         .form>textarea {
             height: 250px;
             padding: 20px 15px;
         }

         .form>button {
             width: 250px;
         }
        }