* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: Arial, sans-serif;
}

body {
   background-color: #ffffff;
   display: flex;
   flex-direction: column;
}

.container-header {
   background-color: #e20614;
   height: 6rem;
   width: 100%;
   display: flex;
   gap: 0.33rem;
   align-items: center;
   justify-content: space-between;
   padding: 0 2rem;
}

.container-headerimg {
   height: 75%;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
   max-width: 100%;
   overflow: hidden;
}

.container-headerimg img {
   height: 3rem; 
   width: auto; 
   object-fit: contain;
}

.divisor {
   background-color: #ffffff;
   height: 5rem;
   width: 0.2rem;
   margin: 0 1rem;
}

.icon_menu {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   width: 35px;
   height: 24px;
   cursor: pointer;
   margin-right: 1rem;
}

.line1,
.line2,
.line3 {
   background-color: #ffffff;
   height: 4px;
   width: 100%;
   border-radius: 2px;
}

.menu-dropdown {
   display: none;
   background-color: #9a1915;
   position: absolute;
   top: 70px;
   right: 20px;
   width: 150px;
   border-radius: 8px;
   z-index: 10;
}

.menu-dropdown ul {
   list-style: none;
   padding: 20px;
   margin: 0;
   flex-direction: column;
}

.menu-dropdown ul li {
   margin: 0.1rem;
}

.menu-dropdown ul li a {
   text-decoration: none;
   color: #ffffff;
   font-size: 16px;
   display: block;
}

.menu-dropdown ul li a:hover {
   background-color: #ffffff5b;
   padding: 9px;
   border-radius: 3px;
   margin-right: 4px;
}

.nav {
   width: 62%;
   display: flex;
   flex-direction: row;
   align-content: center;
   justify-content: center;
   align-items: center;
   gap: 2rem;
}

nav ul {
   list-style: none;
   display: flex;
   gap: 2rem;
   margin: 0;
   padding: 0;
}

nav ul li {
   display: inline;
}

nav ul li a {
   text-decoration: none;
   color: #ffffff;
   font-size: 1.2rem;
}

.barra-icones {
   display: flex;
   background-color: #e30613;
   justify-content: center;
   width: 100%;
   height: 2rem;
   margin-top: 6rem;
}

.icones {
   display: flex;
   height: 100%;
   width: auto;
   gap: 1rem;
   justify-content: center;
   margin-left: 0.5rem;
}

.icones img {
   display: inline-block;
   height: 30px;
   width: 30px;
}

.divisor-footer {
   background-color: #ffffff;
   height: 6rem;
   width: 0.2rem;
   justify-content: center;
   margin-right: 0.6rem;
}

footer {
   display: flex;
   justify-content: space-around;
   align-items: center;
   gap: 1rem;
   width: 100%;
   height: 100%;
   background-color: #9a1915;
   color: #ffffff;
   flex-wrap: wrap;
   position: relative;
}

.divisor-footer {
   background-color: #ffffff;
   height: 6rem;
   width: 0.2rem;
   justify-content: center;
}


.info-senai,
.info-sesi {
   text-align: center;
}

@media (max-width: 1024px) {
   .container-header {
      padding: 0 1rem;
   }

   .nav {
      gap: 1rem;
   }

   nav ul {
      gap: 1rem;
   }
}

@media (max-width: 768px) {
   .container-header {
      flex-direction: column;
      height: auto;
      padding: 1rem;
   }

   .container-headerimg {
      width: 100%;
      justify-content: center;
      margin-bottom: 1rem;
   }

   .container-headerimg img {
      height: 2.5rem; 
      max-width: 100%;
   }

   .nav {
      width: 100%;
      justify-content: center;
   }

   .divisor {
      display: none;
   }

   .menu-dropdown {
      top: 60px;
      right: 10px;
   }

   .info-senai {
      justify-content: center;
      align-items: center;
      height: 50%;
   }

   .info-sesi {
      justify-content: center;

   }

   @media (max-width: 480px) {
      .container-header {
         padding: 0.5rem 1rem;
         flex-direction: row;
         align-self: center;
         justify-content: space-between;
         padding: 0.5rem 1rem;
         height: auto;
      }
      
      .container-headerimg {
         display: flex;
         justify-content: center;
         align-items: center;
         margin: 0;
      }

      .container-headerimg img {
         height: 2rem; 
         max-width: 100%;
      }

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

      nav ul {
         display:  flex;
         flex-direction: row;
         justify-content: center;
         align-items: center  ;
         gap: 1rem;
      }

      nav ul li a {
         font-size: 1rem;
      }
      .icon_menu {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         width: 30px;
         height: 20px;
      }
      
      .line1,
      .line2,
      .line3 {
         background-color: #ffffff;
         height: 3px;
         width: 100%;
         border-radius: 2px;
      }

      .info-senai, .info-sesi {
         text-align: center;
         padding: 0.5rem 1rem;
         width: 100%;
      }
      
      .divisor-footer {
         display: none;
      }

      .icones {
         display: flex;
         justify-content: center;
         gap: 0.5rem;
      }

      .icones img {
         width: 24px;
         height: 24px;
      }

      footer {
         display: flex;
         flex-direction: column;
         align-items: center;
         text-align: center;
         gap: 1rem;
         padding: 1rem;
         width: 100%;
      }
   }
}