@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&display=swap');
/* <uniquifier>: Use a unique and descriptive class name
<weight>: Use a value from 100 to 900
/ <width>: Use a value from 62 to 125 */

/* .archivo-<uniquifier> {
  font-family: "Archivo", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" <width>;
} */
:root {
   --black-main-color:#202020;
   --gray-main-color: #D3D3D3;
   --gray-main-color2:#F2F5F5; 
   --cinza2:#757575;
   --lilas: #CCB2F3;
   --salmao: #FF756B;
   --rosa:#EBCFCC;
   --verde: #2E3930;
   --verde2: #3F3F05;
   --verde3: #AFAA4E;    
   --amarelo:#F8D152;
   --bege:#EDEDE0;
   --azul:#1D1C3C;
   --rosa-azul:#FCD5E6;
} 

*{     
   margin: 0;
   padding:0;
   box-sizing: border-box;    
}
body{
   font-family: "Archivo", sans-serif;
   font-optical-sizing: auto;
   background-color: var(--gray-main-color);    
}

/*header*/
header .container{
   height: 60px;
   background-color: var(--black-main-color);
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: fixed; /*Fixa o elemento nas coordenadas seguintes*/
   width: 100%;
   z-index: 1000;
   transition: top 0.5s;
   border-bottom: 1px solid black;
}
#logo{
   width: 175px; 
   margin: 0 0 0 50px;  
}
#menu{
   display: flex;
   list-style: none;
   gap: .2rem;
   margin-right: 3rem;
}
#menu a{
   margin: 0 1rem;
   text-transform: uppercase;
   color: var(--bege);
   font-size: 18px;   
   font-weight: 600;
   text-decoration: underline 0.15em rgba(0, 0, 0, 0);
   text-underline-offset: 0.2em;
   transition: text-decoration-color 400ms, text-underline-offset 600ms;
   font-variation-settings:
   "wdth" 62;
}
#menu a:hover{
   text-decoration-color: var(--salmao);
   text-underline-offset: 6px;
   cursor: pointer; 
   font-style: italic; 
} 
#menu a.active-menu{
   text-decoration-color: var(--bege);
   text-underline-offset: 5px;
} 
#btn-mobile{
   display: none;/*para o botao ficar escondido*/
} 
/* submenu */
.submenu {
   display: none;
   position: absolute; /* Torna o submenu absoluto em relação ao pai */
   background-color: var(--black-main-color);
   list-style: none;
   padding: 15px 0 10px; 
   margin: 15px 0;
   border-radius: 2px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  
   z-index: 1000;
}
.submenu>li {
   margin: 6px 0;
}
#services-menu:hover .submenu,
#services-menu:focus-within .submenu {
    display: block;
}

/* parallax */
.img-parallax{    
   background-size: cover;
   background-attachment: fixed; 
   background-position: center;
   display: flex;
   justify-content: center;
   align-items: center;
}
/* profile-footer */
.profile{
   height: 100vh;
   width: 100%;
   background-color: var(--black-main-color); 
   color: var(--gray-main-color);
   display: flex;
   align-items: center;
   justify-content: center;
   -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.75);
   -moz-box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.75);
   box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.75);
}
.profile-text{
   width: 35%;
   font-size: 18px;
   text-align: center;
   font-weight: 100;
   line-height: 1.5;
   margin: 0 20px;
}
.profile-text>p{
   margin: 20px;
}
.profile-text>a{
   color: var(--gray-main-color);
   text-align: center;
   margin: 20px;
   text-decoration: underline;
   text-transform: uppercase; 
}
.profile-text>a:hover{
   background: var(--lilas);
   color: #000000;
   border-radius: 3px;
   text-decoration: none;
   padding: 5px;
   font-style: italic; 
   font-weight: 500;
}
.profile>img{
   width: 250px;   
   border-radius: 50%;
   filter: saturate(0%);
   -webkit-filter: saturate(0%);
   -moz-filter: saturate(0%);
}
.profile>img:hover{
   filter: none;
}

/* form-link-services*/
.form-link {
   padding: 30px 100px 30px 0;
   background-color: black;
   text-align: end;
   margin: 0 auto;
  
}

.form-link>a {
   color: var(--bege);
   /* text-decoration: none; */
   text-decoration: 1px underline solid var(--verde3);
   font-size: 30px;
   font-variation-settings:
       "wdth" 72;
   font-weight: 500;
   padding: 15px 0;
   margin: 0 auto;
   line-height: 1.1;
}

.form-link>a:hover {
   color: var(--verde3);
   
   text-decoration: 2px underline solid var(--verde3);
   font-style: italic;
}

/* fim-form-link */

/* footer */
.footer{
   display: flex;
   background-color: #000000;
   height: 350px;
   justify-content: space-around;
   align-items: center;
   text-decoration: none;
   font-variation-settings:
   "wdth" 62;
   color: var(--bege);
   font-weight: 100;
   font-size: 26px;
   padding: 15px 0;
}

.footer img{
   max-width: 250px;
   margin: 0 0 90px;
}
.footer-box{
   width: 55%;
   /* border: 1px solid red; */
   display: flex;
   justify-content: space-between;
}
.footer a, .footer h3{
   text-decoration: none;
   font-variation-settings:
   "wdth" 62;
   color: var(--bege);
   font-weight: 100;
   font-size: 26px;
   padding: 15px 0;
}
.footer h4{
   margin: 10px 0;
}
.footer-contact>h3{
   font-weight: 500;
}
.footer-contact{
   text-align: end;
   /* border: 1px solid blue; */
}
.copyright{
   padding: 4px 0;
   font-size: 11px;
   color: black;
   text-align: center;
   font-variation-settings:
   "wdth" 162;
   font-weight: 100;
   display: flex;
   justify-content: space-around;
}
.copyright a{
   text-decoration: none;
   color: black;
}
/* cores do footer na propria pag*/


@media (max-width: 480px) {
   #logo{
      width: 150px;
      margin: 0 15px ;
  }
  #menu{
      display: block;
      margin: 0 auto;
      visibility: hidden;
      position: absolute;
      width: 100%;
      top: 60px;
      right: 0px;
      background:#000000e8;
      height: 0;
      z-index: 1000;
      transition: .6s;
      overflow-y: hidden;
  }

  #menu li{
      padding: 1.5rem 0;
      /* margin: 0 1rem; */
      border-bottom: 2px solid var(--black-main-color);
      text-align: center;
   
  }
  .submenu {
   background-color: #181818;
   padding: 10px 0 ; 
   margin: 15px auto;
   width: 100%;  
}

#services-menu:hover .submenu,
#services-menu:focus-within .submenu {
    display: block;
}

  #nav.active #menu{
      height: calc(100vh - 110px);
      visibility: visible;
      overflow-y: auto; 
  }

  #btn-mobile{        
      display: flex;
      padding: .5rem 1rem;
      border: none;
      font-size: 16px;
      cursor: pointer;
      background: none;
      color: #ffffff;
  }

  #hamburger{
      width: 20px;
      border-top: 2px solid var(--bege);
  }
  #hamburger::after, #hamburger::before{
      content: '';
      display: block;
      width: 20px;
      height: 2px;
      background: currentColor;
      margin-top: 5px;
      transition: .3s;
      position: relative;   
  }
  #nav.active #hamburger{
      border-top-color: transparent;
  }

  #nav.active #hamburger::after{
      transform: rotate(135deg);
      top: -7px;
  } 

  #nav.active #hamburger::before{
      transform: rotate(-135deg);
  } 
  /* fim do header */
   .profile{
      flex-direction: column-reverse
   }
   .profile-text{
      margin: 20px auto;
      width: 90%;
   }
   /* form link-services */
   .form-link {
      padding: 50px 10px;
      text-align: center;
  }

  .form-link>a {
      font-size: 22px;
      padding: 15px 35px;
  }
  
   /* footer */
   .footer{
      flex-direction: column;
      font-size: 14px;
      align-items: end;
   }
   .footer-box{
      justify-content: space-around;
      align-items: last baseline;
      width: 100%;
   }
   .footer>img{
      max-width: 220px;
      margin: 0 40px 0 0;
   }
   .footer a, .footer h3{
      font-size: 21px;
      padding: 5px 0;
   }
   .copyright{
      padding: 4px 0;
      font-size: 9px;
   }
   .footer-navigate>h5{
      margin: 8px 0;
   }

}

/* tela-grande */
@media screen and (min-width: 1601px) {
   .profile{
      height: 80vh;
   }
   .profile-text{
      font-size: 21px;
      margin: 0 40px 0 0;
   }
   .profile>img{
      width: 350px;   
   }
   .copyright{
      padding: 4px 0;
      font-size: 15px;
   }
}