style.css

* {
    margin:0 ;
    padding:0 ;
    box-sizing:border-box ;
}

header {
    background-color:white ;
    width:100vw;
    padding:15px ;
    position: fixed;
    height:13vh ;
  z-index:10 ;
 
    
}

 nav {
    display:flex ;
    justify-content:space-between ;
    align-items:center ;
      
 }

 
 nav ul {
    display: flex ;
    align-items:center ;
    list-style:none ;
   position: relative;
   width:100vh ;
    
 }


 nav li a {
    text-decoration: none ;
    color:rgba(207, 199, 199, 0.671) ;
    font-size:30px ;
    padding:8px 15px ;
    font-weight:bold ;
 
   
   
 }
 
 .boldText{
  color: black;
  font-size:25px ;
  font-weight: bold;
  cursor: pointer;
 }


 .r-nav li:hover {
    position: relative;
    transition: 2s;
    transform: scale(1.2);
   border: none;
     

 }

 .r-nav li a:hover {
  color:black ;
  


 }
  
 .logo {
    position: relative;
   left:5vh ;
 }

 .banner{
 height:100vh;
 background-image: url("./laranja\ azul\ recorte.png");
 background-repeat: no-repeat;
 display: flex;
 justify-content: center;
 flex-direction: column;
}

.text{
    position: relative;
      margin-bottom:8vw ;
     margin-left:7.5rem ;
    font-size:4rem ;
    color:white ;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    
}

.sloganFrase {
        position: absolute;
        font-family: 'Montserrat' , sans-serif;
        font-size:2rem ;
        color:white ;     
        text-transform: uppercase;     
        font-weight: bold;  
        left: 8rem;
}

h2:hover{
  cursor: pointer;
  
transition:2s ;
 transform: scale(1.1) ;  
 text-decoration: underline;
   
}

a {
    text-decoration:none ;
}

  main {
   display: flex;
    width:100% ;
    
    flex-wrap: wrap;
    justify-content:center ;

    

  }

  .alinhamentoDeImagem:hover{
      
    padding: 10px;
    transform: scale(1.1);

     
  }

.alinhamentoDeImagem {
     
        width:40vh ;
        padding: 4.5px;
        transition: .3s linear;
        cursor: pointer;
      
}

footer {
 
  width:100% ;
    display:flex ;
    justify-content: flex-start;
}

  h1 {
    top:7vh ;
    position:relative ;
    font-size:bold ;
    font-size:1.5rem ;
    left:8rem ;
  }

  h3{
    font-size:15px ;
    position: relative;
    left:10rem ;
    top:7.2vh ;
  }

  .redeSocial{
    position: relative;
    display:flex ;
    gap:15px ;
    margin:60px;
  }

  .redeSocial .iconMove{
    position: relative;
    list-style:none ;
    width: 100px ;
    height:100px ;
    display:flex ;
    justify-content:center ;
    align-items:center ;
    background: #fff;
    box-shadow: 0 15px 35px  rgba(0, 0,0,0.1);
    
  }

  .redeSocial .iconMove .fa{
    font-size:6em ;
    -webkit-text-stroke:2px var(--clr) ;
    color:transparent ;
  }

  .redeSocial .iconMove::before{
    content: '';
    position:absolute ;
    top:0 ;
    left:0 ;
    width:100% ;
    height:0 ;
    border-bottom:4px solid var(--clr) ;
    transition:0.5s ease-in-out ;
    font-family:fontAwesome ;
    text-align:center ;
    line-height:100px ;
    font-size:6em ;
    color: var(--clr);

  }
  .redeSocial .iconMove:hover:before{

    height:100% ;

  }
  .redeSocial .iconMove:nth-child(1)::before
  {
    content: '\f09a ';
  }
  
  .redeSocial .iconMove:nth-child(2)::before
  {
    content: '\f099';
  }
  .redeSocial .iconMove:nth-child(3)::before
  {
    content: '\f16d  ';
  }
  .redeSocial .iconMove:nth-child(4)::before
  {
    content: '\f2c6  ';
  }
  .redeSocial .iconMove:nth-child(5)::before
  {
    content: '\f232 ';
  }
  .redeSocial .iconMove:nth-child(6)::before
  {
    content: '\f16a ';
  }



  .button{
    position:relative ;
    display:inline-block ;
    margin:35px ;
    top:5rem ;
}




.button a {
    color:white ;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight:bold ;
    font-size:36px ;
    text-align:center ;
    text-decoration:none ;
    background-color:aqua ;
    display:block ;
    position: relative;
    padding:20px 40px ;

        -webkit-tap-highlight-color:rgba(0, 0, 0, 0) ;
        text-shadow:0px 1px 0px #000  ;
        filter:drop-shadow(color=#000, offx=0px,offy=1px) ;


    -webkit-box-shadow: inset 0 1px 0 #FFE5c4, 0 10px 0 #493010;

    -moz-box-shadow: inset 0 1px 0 #FFE5c4, 0 10px 0 #472d0a;
     
    box-shadow:inset 0 1px #FFE5C4, 0 10px 0 #2b1b06 ;


    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius:5px ;

}



.button a:active{
    top:10px ;
    background-color:tomato ;

    -webkit-box-shadow:inset 0 1px 0 #FFE5c4, inset 0 -3px 0 #915100;

    -moz-box-shadow:inset  0 1px 0 #FFE5c4 , inset 0 -3px 0 #915100;

    box-shadow: inset 0 1px #FFE5C4, inset 0 -3px 0 #915100 ;    
}


.button:after {
    content:"" ;
    height:100% ;
    width:100% ;
    padding:4px ;
    position:absolute ;
    bottom:-15px ;
    left:-4px ;
    z-index:-1 ;
 
    
}


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

    .logo {
      position: absolute;
      right:50rem ;
      top:20px ;
    }
    .r-nav{
     width: 100%;
     position: absolute;
      left: 15rem;
     height:5vw ;
      top:3.2vh;
      display: flex;
    
      align-items: center;
    }
    ul li a {
      font-size: bold;
      font-size: 1.3rem ;
    }
    .banner{
      background-image: url(./laranja\ azul\ recorte.png);
      background-repeat: no-repeat;
      display: flex;
      justify-content: center;
      flex-direction: column;
     background-position: -50rem;
     width:100% ;
    }
    .text{
      position: relative;
      right:65px ;
      font-size:45px ;
      margin-bottom:35px ;
    }
    .sloganFrase{
      position: relative;
      right:65px ;
      font-size:35px ;
      margin-bottom:75px ;    
    }
    main {
      display:flex ;
      flex-wrap: wrap;
      width:100% ;
      animation: none;
      align-items: center;
      flex-direction: column;
    }
    figure{
      width:100% ;
      display:flex;
      justify-content: center;
    }
    
    .redeSocial {
      position: relative;
      display:flex ;
      gap:30px ;
    }

      footer{
        display:flex ;
      }

      .button{
        position:relative ;
        display:inline-block ;
        margin:35px ;
        right:8rem ;
        top:42rem ;
    }
    

.button a {
  color:white ;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight:bold ;
  font-size:36px ;
  text-align:center ;
  text-decoration:none ;
  background-color:tomato ;
  display:block ;
  position: relative;
  padding:20px 20px ;

      -webkit-tap-highlight-color:rgba(0, 0, 0, 0) ;
      text-shadow:0px 1px 0px #000  ;
      filter:drop-shadow(color=#000, offx=0px,offy=1px) ;


  -webkit-box-shadow: inset 0 1px 0 #FFE5c4, 0 10px 0 #915100;

  -moz-box-shadow: inset 0 1px 0 #FFE5c4, 0 10px 0 #915100;
   
  box-shadow:inset 0 1px #FFE5C4, 0 10px 0 #915100 ;


  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius:5px ;

}



.button a:active{
  top:10px ;
  background-color:tomato ;

  -webkit-box-shadow:inset 0 1px 0 #FFE5c4, inset 0 -3px 0 #915100;

  -moz-box-shadow:inset  0 1px 0 #FFE5c4 , inset 0 -3px 0 #915100;

  box-shadow: inset 0 1px #FFE5C4, inset 0 -3px 0 #915100 ;    
}


.button:after {
  content:"" ;
  height:100% ;
  width:100% ;
  padding:4px ;
  position:absolute ;
  bottom:-15px ;
  left:-4px ;
  z-index:-1 ;

}

  }


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

    .logo{
      position: relative;
      left:1rem ;
    }
    .r-nav{
      position: absolute;
      width:100% ;
      top:0 ;
      display: flex;
      flex-direction:column ;
      align-items: center;
      right:45rem ;
    } 
    .boldText{
      position: relative;
      font-size:15px ;
      right:10rem ;
      font-size: bold;
    }
    ul li a  {
      margin-top:5px ;
        position: relative;
      font-size:15px ;
      right:10rem ;
      font-size: bold;
    
    }
    .banner{
      background-image: url(./laranja\ azul\ recorte.png);
      background-repeat: no-repeat;
      display: flex;
      justify-content: center;
      flex-direction: column;
     background-position: -70rem;
    }
    .text{
      position: relative;
      right:60px ;
      font-size:25px ; 
    }

    .sloganFrase{
      position: relative;
      right:58px ;
      font-size:20px ;
      
    }
    main {
      display:flex ;
      flex-wrap: wrap; 
      width:100% ;
    }

    figure{
      width:100% ;
      display:flex;
      justify-content: center;
    }

    .redeSocial {
      position: relative;
      display:flex ;
      gap:10px ;
      left:1rem ;
   flex-wrap: wrap;
    }
      footer{
        display:flex ;
        height:5vh ;
        width:5vh ;
      }
      h1 {
        position:relative ;
        display:flex ;
        right:25rem ;
        left:0 ; 
        
      }
      h3{
        position:relative ;
        display:flex ;
        right:22rem ;
        left:0 ; 
      }

      .button{
        position:relative ;
        display:inline-block ;
        margin:35px ;
        right:8rem ;
        top:42rem ;
    }
    

.button a {
  color:white ;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight:bold ;
  font-size:36px ;
  text-align:center ;
  text-decoration:none ;
  background-color:tomato ;
  display:block ;
  position: relative;
  padding:20px 20px ;

      -webkit-tap-highlight-color:rgba(0, 0, 0, 0) ;
      text-shadow:0px 1px 0px #000  ;
      filter:drop-shadow(color=#000, offx=0px,offy=1px) ;


  -webkit-box-shadow: inset 0 1px 0 #FFE5c4, 0 10px 0 #915100;

  -moz-box-shadow: inset 0 1px 0 #FFE5c4, 0 10px 0 #915100;
   
  box-shadow:inset 0 1px #FFE5C4, 0 10px 0 #915100 ;


  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius:5px ;

}



.button a:active{
  top:10px ;
  background-color:tomato ;

  -webkit-box-shadow:inset 0 1px 0 #FFE5c4, inset 0 -3px 0 #915100;

  -moz-box-shadow:inset  0 1px 0 #FFE5c4 , inset 0 -3px 0 #915100;

  box-shadow: inset 0 1px #FFE5C4, inset 0 -3px 0 #915100 ;    
}


.button:after {
  content:"" ;
  height:100% ;
  width:100% ;
  padding:4px ;
  position:absolute ;
  bottom:-15px ;
  left:-4px ;
  z-index:-1 ;

}
  }