@import url(../../Global/GlobalHeader.css);
@import url(../../Global/GlobalFooter.css);
@import url(../../Global/global.css);

a {
   color: var(--cor-primaria) ;
   transition: color 0.3s ease-in-out;
 }
 
 a:hover {
   color: white;
 }

#Home {
   border: 1px solid var(--cor-primaria);
 }


/* MAIN LINHA 1 */
main .linha1 {
   border: 10px solid var(--cor-secundaria);
   background: linear-gradient(to bottom, rgba(40, 27, 0, 0.674), var(--cor-secundaria)), 
               url("../../../img/index/Foto-da-equipe.webp") center center;
   background-size: cover;
   padding: 30px;
   height: 600px;
}

main .texto-principal {
   font-size: 30px;
   color: var(--cor-primaria);
   line-height: 1.5;
}

main .texto-principal #numeroequipe {
   font-size: 20px;
   font-weight: bold;
   color: #fff;
   text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

main .linha1 a.link {
   background-color: rgba(0, 0, 0, 0.7);
   display: flex;
   justify-content: center;
   align-items: center;
   width: 220px;
   padding: 15px 35px;
   margin: 80px auto;
   font-size: 22px;
   border: 2px solid var(--cor-primaria);
   border-radius: 5px;
   transition: background-color 0.3s ease, transform 0.2s;
}

main .linha1 a.link:hover {
   background-color: var(--cor-primaria);
   color: black;
   transform: scale(1.05);
}

/* MAIN LINHA 2 */
main .linha2 {
   display: flex;
   flex-wrap: wrap;
   padding: 100px 10px;
   justify-content: center;
   background-color: var(--cor-secundaria);
   gap: 30px ;
}

main .linha2 article {
   width: 300px;
   height: 500px;
   background-image: linear-gradient(to bottom left, black, rgb(14, 13, 0));
   border: 2px solid var(--cor-primaria);
   border-radius: 10px;
   margin: 20px;
   padding: 20px;
   transition: transform 0.5s ease-in-out;
}

main .linha2 article:hover {
   transform: scale(1.05);
}

main .linha2 article h3 {
   text-align: center;
   font-size: 25px;
}

main .linha2 article p {
   margin: 20px 1px;
}

main .linha2 article a{
   background-image: linear-gradient(to bottom left, black, rgb(14, 13, 0));
   color: var(--cor-primaria);
   padding: 5px 10px;
   border: 1px solid var(--cor-primaria);
   transition: background-color 0.5s, color 0.5s;
}

main .linha2 article a:hover {
   color: rgb(255, 255, 255);
   border: 1px solid white;
}

/* MAIN LINHA 3 */
main .linha3 {
   padding: 100px 20px;
   text-align: start;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
}

main .linha3  p {
   margin: 20px 1px;
   
}

.linha3-conainer {
  display: flex;
   flex-wrap: wrap; 
   justify-content: center;
}

main .linha3 .linha3-conainer div {
   width: 400px;
   padding: 0px;
   margin: 10px;
}

main .linha3 .linha3-conainer img {
   border-radius: 3px;
   border: 2px solid black;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
}

main .linha3 .linha3-conainer a {
   color: white;
   background-color: black;
   padding: 3px 10px;
   display: inline-block;
   transition: ease-in-out 0.2s;
}

main .linha3 .linha3-conainer a:hover {
   background-color: #ffd700;
   border: 1px solid black;
   color: black;
}

/* MAIN LINHA 4 */
main .linha4 {
   background: linear-gradient(to bottom, rgba(255, 170, 0, 0.797), var(--cor-primaria)), 
               url("../../../img/index/Foto-equipe-completa.jpg") center;
   color: black;
   padding: 30px 0px;
   text-align: center;
}

main .linha4 > a {
   margin-bottom: 20px;
   color: #000000 ;
   border: 2px solid black;
   padding: 5px;
   display: inline-block;
   margin: 20px;

   transition: ease-in-out .5px;
}

main .linha4 > a:hover {
   background-color: #000000;
   color: #ffffff;
}


.linha4 p a {
   font-weight: bold;
   text-decoration: none;
   transition: color 0.3s ease-in-out;
}

.linha4 p a img {
   border: 2px solid black;
}

main .linha4 h1 {
   font-size: 36px;
   font-weight: bold;
   text-transform: uppercase;
   letter-spacing: 2px;
   color: black;
}

main .linha4 .imgpatrocinadores {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   gap: 30px;
}

main .linha4 .imgpatrocinadores a {
   color: rgb(0, 0, 0);
   text-decoration: underline;
}

main .linha4 .imgpatrocinadores img {
   width: 150px;
   transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

main .linha4 .imgpatrocinadores img:hover {
   transform: scale(1.05);
   box-shadow: 0px 6px 20px rgba(255, 255, 255, 0.274);
   text-decoration: underline;
}

main .linha4 .imgpatrocinadores > div {

}

@media screen and (min-width: 750px) {
   main .texto-principal {
       font-size: 40px;
       color: var(--cor-primaria);
       align-items: center;
    }  


    main .texto-principal {
      text-align: center;
    }

    main .sub-texto > p {
      display: block;
      text-align: center;
      font-size: 20px;
    }

    .linha1 img {
      display: block;
      margin: auto;
    }


   .linha4 h1 {
      font-size: 60px !important;

    }

    .linha4 a {
      display: block;
    }
}


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

main .linha3 {
   border: 1px solid var(--cor-secundaria) !important; 
}

}