*{
    margin: 0px;
    padding: 0px;
}
:root{
    --principal: blue
}
body{

    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,25,74,1) 100%);

}

.container{
    position: relative;
    display: inline-block;
    text-align: top;
    width: 100%;
}

.logo{
    position: absolute;
    top: 0.5%;
    left: 1%;
}

.logo img{
    width: 70px; /*cambiem la mida del logo*/
    height: 70px;

}

.menu h1{
    color: white;
    font-size: 40px;
    position: absolute;
    top: 1%;
    left: 7%;
}


.opcions{
    position: absolute;
    top: 2%;
    left: 55%;
}

.opcions li{
    list-style: none; /* treiem les boletes del menu*/
    float: right; /* posem la llista de costat*/
    font-size: 20px;
    
}

.opcions li a{
    color: rgb(255, 255, 255); 
    padding: 25px;
    text-decoration: none;
}


.opcions li a:hover{
    color: blue;
    font-size: 21px; /*aixo serveix perque quan passis per sobre de les pagines del menu cambiin de : color, mida etc*/
}

.intro p{
    color: white;
    text-align: center;
    margin-top: 2%;
    margin-left: 2%;
    margin-right: 2%;
    margin-bottom: 2%;
}

/*-------------------footer------------------------------------------------------------------------------------------------------------------------------------------------*/
.footer-content {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background-color: rgb(25, 74, 138); 
    color: #ffffff; 
    
  }
  
  .footer-section {
    flex: 1;
    margin: 0 10px;
    
  }

  .footer-section li{
    list-style: none;
  }

  .footer-section li a{
    color: white;
    text-decoration: none;

  }

  
  .footer-section h2 {
    color: #ffffff; 
    margin-bottom: 10px;
  }
  
  .footer-section p, .footer-section ul, .footer-section li {
    color: #f0f8ff;
  }
  
  .footer-bottom {
    background-color: rgba(26, 26, 234, 0.538); 
    color: #ffffff;
    text-align: center;
    padding: 10px 0;
    
  }
  
  .footer-bottom a {
    color: #f0f8ff; 
    text-decoration: none;
    
  }
  
  .footer-bottom a:hover {
    text-decoration: underline;

  }
/*-----------POLITICA-------------------------------------------------------------------------------------------------------------------------------------------------------------*/

  
  .headerpolitica {
    background-color: blue; 
    color: #ffffff; 
    text-align: center;
    padding: 20px 0;
  }
  
  .mainpolitica {
    padding: 20px;
  }
   .mainpolitica h2,p{
    color: white;
  }

  .sectionpolitica {
    margin-bottom: 20px;
  }


  
  .footerpolitica {
    background-color: blue; 
    color: #ffffff; 
    text-align: center;
    padding: 10px 0;
    position: fixed;
    width: 100%;
    bottom: 0;
  }
  
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/


/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.cos{
    overflow: hidden;
    color: rgb(255, 255, 255);
    margin-top: 85px;
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,25,74,1) 100%);
}


.yamaha{
    color: rgb(255, 255, 255);
    font-size: 30px;
    text-align: center;
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,25,74,1) 100%);
    margin-bottom: 20px;
}

.caixa{   
    margin: 3px; /*possem que entre caixa i caixa hi hagi un espai de 1px*/
    text-align: center; /*amb aixo posem el text centrar a dins la caixa*/

}

.columns{
    display: flex;
}

.caixa h2{
    margin-top: 10px;
}

.caixa p{
    color: red;
}

.caixa p:hover{
    color:blue;

}



/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/


.honda{
    color: white;
    font-size: 48px;
    text-align: center;
    margin-bottom: 20px;
}




.grid{
    display: grid; /* es la tecnologia per poder fer columnes*/
    grid-template-columns: 50% 50%; /* fem dos columnes a la caixa grid*/
    clear: both; /*serveix perque no imanti la caixa amb la de dalt si queda lloc*/

}

.grid div{
    color: white;
}



#dreta{
    text-align: center;
    padding: 100px 70px 0px 70px;
}

#dreta h2{
    font-size: 30px;
    margin-bottom: 40px;

}

#dreta a{
    display: inline-block; /*fem que l'etiqueta en linea es comporti com a una etiqueta de block*/
    text-decoration: none; /* treiem la linea lletja de l'enllaç*/
    border: 2px solid white; /* hem possat la bora de la caixa del boto que sigui de 2px, el solid vol dir que sigui una linea continua*/
    padding: 10px 20px; /*hem fet que hi hagi espai intern de la caixeta de l'enllaç*/
    text-align: center; /* centrem el text dins el boto*/
    margin-top: 20px; /*possem un marging de 20px*/
    width: 100px; /*fem el boto mes gran*/
    color: white;

}


#dreta a:visited{
    color: white;
}

#dreta a:hover{
    background-color: rgba(23, 23, 204, 0.74);
}

.grid2{
    display: grid; /* es la tecnologia per poder fer columnes*/
    grid-template-columns: 33% 34% 33%; /* fem dos columnes a la caixa grid*/
    clear: both; /*serveix perque no imanti la caixa amb la de dalt si queda lloc*/


}

#esquerra2{
    text-align: center;
    padding: 100px 70px 0px 70px;
    background-color: brown;
}

#dreta2{
    text-align: center;
    padding: 100px 70px 0px 70px;
    background-color: blue;
}

#mig2{
    width: 100%;
}




#esquerra2 a{
    display: inline-block; /*fem que l'etiqueta en linea es comporti com a una etiqueta de block*/
    text-decoration: none; /* treiem la linea lletja de l'enllaç*/
    border: 2px solid yellow; /* hem possat la bora de la caixa del boto que sigui de 2px, el solid vol dir que sigui una linea continua*/
    padding: 10px 20px; /*hem fet que hi hagi espai intern de la caixeta de l'enllaç*/
    text-align: center; /* centrem el text dins el boto*/
    margin-top: 20px; /*possem un marging de 20px*/
    width: 100px; /*fem el boto mes gran*/
}

#esquerra2 a:hover{
    background-color: blue;

}

#esquerra2 a:visited{
    color: white;

}


.footer{
    display: grid; /* es la tecnologia per poder fer columnes*/
    grid-template-columns: 33% 34% 33%; /* fem dos columnes a la caixa grid*/
    clear: both; /*serveix perque no imanti la caixa amb la de dalt si queda lloc*/
    padding-bottom: 20px;
    background-color: black;
}

.esquerra_f h1{
    color: white;
    font-size: 25px;
    padding-bottom: 5px;
    padding-top: 20px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.esquerra_f li{
    list-style: none;
    background-color: black;
    color: white;
    padding-left: 200px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.esquerra_f li :hover{
    font-size: 17px;
}


.mig_f h1{
    color: white;
    font-size: 25px;
    padding-bottom: 5px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.mig_f li{
    list-style: none;
    background-color: black;
    color: white;
    padding-left: 200px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.dreta_f li{
    list-style: none;
    background-color: black;
    color: white;
    padding-left: 200px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.dreta_f h1{
    color: white;
    font-size: 25px;
    padding-bottom: 5px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}


/*-----MOTARD-----MOTARD-----MOTARD-----MOTARD-----MOTARD-----MOTARD-----MOTARD-----MOTARD-----MOTARD-----MOTARD-----MOTARD-----MOTARD-----*/
/*-----MOTARD-----MOTARD-----MOTARD-----MOTARD-----MOTARD-----MOTARD-----MOTARD-----MOTARD-----MOTARD-----MOTARD-----MOTARD-----MOTARD-----*/
/*-----MOTARD-----MOTARD-----MOTARD-----MOTARD-----MOTARD-----MOTARD-----MOTARD-----MOTARD-----MOTARD-----MOTARD-----MOTARD-----MOTARD-----*/

.paredimg{
    width: 100%;
    position: relative;
}
.paredimg .motard{
    width: 100%;
}

.paredimg .motard img{
   display: block;
   width: calc(100%/4);
   float: left;
}



/*-----CROSS-----CROSS-----CROSS-----CROSS-----CROSS-----CROSS-----CROSS-----CROSS-----CROSS-----CROSS-----CROSS-----CROSS-----*/
/*-----CROSS-----CROSS-----CROSS-----CROSS-----CROSS-----CROSS-----CROSS-----CROSS-----CROSS-----CROSS-----CROSS-----CROSS-----*/
/*-----CROSS-----CROSS-----CROSS-----CROSS-----CROSS-----CROSS-----CROSS-----CROSS-----CROSS-----CROSS-----CROSS-----CROSS-----*/

.center{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.motocross {
    color: rgb(255, 255, 255);
    font-size: 30px;
    text-align: center;
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,25,74,1) 100%); 
}

.styled-table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 18px;
    text-align: center;
    border: 0px solid white;
}

.styled-table thead tr {
    background-color: rgba(23, 23, 204, 0.74);
    color: #ffffff;
    text-align: center;
    font-weight: bold;
    
}

.styled-table th,
.styled-table td {
    padding: 20px 60px;
}


.styled-table tbody tr:nth-of-type(even) {
    background-color: black;
}


.styled-table tbody tr.active-row {
    font-weight: bold;
    color: white;
}








/*-----CONTACTE-----CONTACTE-----CONTACTE-----CONGTACTE-----CONTACTE-----CONTACTE-----CONTACTE-----CONTACTE-----CONTACTE-----CONTACTE-----CONTACTE-----CONTACTE-----*/
/*-----CONTACTE-----CONTACTE-----CONTACTE-----CONGTACTE-----CONTACTE-----CONTACTE-----CONTACTE-----CONTACTE-----CONTACTE-----CONTACTE-----CONTACTE-----CONTACTE-----*/
/*-----CONTACTE-----CONTACTE-----CONTACTE-----CONGTACTE-----CONTACTE-----CONTACTE-----CONTACTE-----CONTACTE-----CONTACTE-----CONTACTE-----CONTACTE-----CONTACTE-----*/



form {
    background-color: #000000; /* Negre */
    padding: 20px;
    margin: 50px auto;
    border-radius: 10px;
    width: 50%;
    max-width: 500px;
    color: #ffffff;
    margin-top: 5%;
}

label {
    display: line;
    margin-bottom: 5px;
    color: #ffffff;
}

input[type="text"], input[type="email"], input[type="date"], textarea, select {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: none;
    border-radius: 5px;
    box-sizing: border-box;
}

input[type="submit"], input[type="reset"] {
    width: 48%;
    padding: 10px;
    margin-top: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #2a5298; 
    color: #ffffff;
}

input[type="submit"]:hover, input[type="reset"]:hover {
    background-color: #1e3c72; 
}
input[type="email"]:valid {
	border: 1px solid green;
}