@import "~@fortawesome/fontawesome-free/css/all.min.css";

/**  SCROLLBAR **/
/* Estil per a la barra de desplaçament */
::-webkit-scrollbar {
  width: 10px; /* Amplada de la barra de desplaçament vertical */
  height: 12px; /* Altura de la barra de desplaçament horitzontal */
}

/* Estil per al fons de la barra de desplaçament */
::-webkit-scrollbar-track {
  background: #a3a3a3; /* Color de fons de la pista */
  border-radius: 10px;
}

/* Estil per al "thumb" o la part mòbil de la barra de desplaçament */
::-webkit-scrollbar-thumb {
  background: #2e5536; /* Color del thumb */
  border-radius: 10px;
}

/* Estil per quan l'usuari passa el ratolí sobre la barra */
::-webkit-scrollbar-thumb:hover {
  background: #2e5536; /* Color quan passa el ratolí sobre la barra */
}

.nav-link {
  color: #003854;
  transition: 0.5s ease;
}
.nav-link:hover {
  background-color: #f8f9fa;
  border: 1px solid #003854;
}
.navbar-brand {
  padding: 7px 25px 7px 25px;
  transition: 0.5s ease;
  color: #003854;
}
.navbar-brand:hover {
  background-color: #003854;
  color: #fff;
}

/* Estil inicial per a la navbar amb fons transparent */
.navbar.bg-transparent {
  background-color: transparent;
  transition: background-color 0.5s ease; 
}

/* Estil per a la navbar amb fons blanc */
.navbar.scrolled {
  background-color: #f8f9fa !important; 
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
  transition: background-color 0.5s ease, box-shadow 0.3s ease;
}

/* Contenidor de la imatge principal */
.image-container {
  position: relative;
  background: url('imatges_inici/academy.jpeg') no-repeat center center/cover;
  height: 70vh;
  display: flex; /* Activa Flexbox */
  flex-direction: column; /* Canvia la direcció dels elements per apilar-los verticalment */
  justify-content: center; /* Manté contingut cap a la part superior */
  align-items: center; /* Centra horitzontalment */
}

/* Estil del logo del nav inicialment invisible */
#logo {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-left: 30%;
  margin-bottom: 10px;
  opacity: 0;
  transition: opacity 0.5s ease; 
}
#logo.visible {
  opacity: 1;
  cursor: pointer;
}

/* Botó personalitzable */
.custom-btn {
  background-color: white;
  color: #003854;
  font-size: 1.2rem;
  font-weight: 500;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  border-radius: 0;
  padding: 0.75rem 2rem;
  transition: all 1s ease;
  margin-top: 20vh;
}

.custom-btn:hover {
  background: #003854;
  font-weight: 100;
  color: rgb(242, 242, 245);
}





/* Conatcte */

.bg-green {
  background-color: #003300; /* Verd fosc */
}

.text-white {
  color: #ffffff;
}

.divider {
  height: 2px;
  background-color: #ffffff;
  width: 50px;
  margin-bottom: 20px;
}

/* Formulari d'estil */
.form-control, .form-select {
  border-radius: 0;
}

/* Botó d'enviament */
.btn-primary {
  background-color: #003300;
  border: none;
  padding: 10px 20px;
}
.btn-primary:hover {
  background-color: #005500;
}

  


/* Estils generals per la pàgina */
body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f8f9fa;
}

/* Títols */
h2, h3, h4 {
  font-family: 'Roboto', sans-serif;
  color: #2c3e50;
}

/* Secció d'imatge d'inici */
#intro {
  background-color: #ffffff;
  padding: 60px 0;
  text-align: center;
}

#intro img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Taula de preus */
.table th, .table td {
  text-align: center;
  vertical-align: middle;
}

.table {
  margin-top: 20px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.table thead {
  background-color: #2c3e50;
  color: #fff;
}

.table th {
  padding: 12px;
  font-weight: bold;
}

.table td {
  padding: 10px;
}

.table tbody tr:nth-child(even) {
  background-color: #f4f4f4;
}

.table tbody tr:hover {
  background-color: #e2e2e2;
}

/* Secció de preus */
#classes {
  padding: 60px 0;
  background-color: #f1f1f1;
}

#classes h3 {
  font-size: 2rem;
  margin-bottom: 40px;
}

.img-fluid{
  width: 80%;
}
  
  
  /* FOOTER */
  footer {
    background-color: #013601; /* Verd fosc */
    color: white;
    padding: 40px 20px;
    font-family: Arial, sans-serif;
    margin-top: 20vh;
  }
  
  footer .left-section {
    text-align: left;
  }
  
  footer .right-section {
    text-align: center;
  }
  
  footer .newsletter {
    margin-top: 20px;
  }
  
  footer input[type="email"] {
    border-radius: 4px;
    border: none;
    padding: 10px;
    width: 200px;
    margin-right: 10px;
  }
  
  footer button {
    background-color: #ffffff;
    color: #013601;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
  }
  
  footer button:hover {
    background-color: #d9d9d9;
  }
  
  footer .social-icons a {
    color: white;
    margin: 0 10px;
    font-size: 18px;
    text-decoration: none;
  }
  
  footer .social-icons a:hover {
    color: #d9d9d9;
  }
  
  footer .checkbox-container {
    margin-top: 10px;
  }
  
  footer .checkbox-container label {
    font-size: 14px;
  }
  
  footer .copyright {
    text-align: center;
    margin-top: 20px;
    font-size: 12px;
  }




  /* Dispositius mòbils petits (≤ 576px) */
@media (max-width: 576px) {
    .image-container {
      height: 80vh;
    }
  
    .navbar-brand {
      padding: 5px 15px;
    }
  
    #logo {
      display: none;
    }
  
    .custom-btn{
        font-size: 0.8rem!important; /* Augmenta la mida del text */
        padding: 0.3rem 1.2rem!important; /* Augmenta el padding */
    }
  }
  
  
  /* Dispositius mòbils mitjans (≤ 768px) */
  @media (max-width: 768px) {
    .image-container {
      height: 90vh;
    }
  
    .navbar-brand {
      padding: 7px 20px;
    }
  
    .custom-btn{
        font-size: 0.8rem; /* Redueix la mida del text */
        padding: 0.4rem 1.3rem; /* Redueix el padding */
    }
  }
  
  /* Tauletes i dispositius grans (≤ 992px) */
  @media (max-width: 992px) {
    .image-container {
      height: 80vh;
    }
  
    .navbar-brand {
      padding: 10px 25px;
    }
  
    .custom-btn{
        font-size: 1.1rem; /* Lleugerament més gran que mòbils */
        padding: 0.65rem 1.75rem; /* Ajust moderat del padding */
    }
  }
  
  /* Pantalles grans i escriptoris (≤ 1200px) */
  @media (max-width: 1200px) {
    .image-container {
      height: 80vh;
    }
  
    .navbar-brand {
      padding: 15px 30px;
    }
  
    .custom-btn{
        margin-top: 30vh;
    }
  }
  
  /* Pantalles molt grans (> 1200px) */
  @media (min-width: 1201px) {
    .image-container {
      height: 80vh;
    }
  
    .navbar-brand {
      padding: 20px 40px;
    }
    .custom-btn{
        margin-top: 35vh;
    }

    .img-fluid{
      width: 70%;
    }
  
  }
  
  @media screen and (min-width: 375px) and (max-width: 425px){
    .custom-btn{
        font-size: 0.9rem!important; /* Augmenta la mida del text */
        padding: 0.5rem 1.4rem!important; /* Augmenta el padding */
    }
  
  }
  @media screen and (min-width: 768px) and (max-width: 1999px) {
    .newsletter input{
      margin-bottom: 15px;
    }
  }
  @media screen and (min-width: 577px) and (max-width: 768px) {

    /* Estil del logo del nav inicialment invisible */
    #logo {
    width: 50px; 
    }
  }
  
  @media screen and (max-width: 480px) {
    
    /* Estil del logo del nav inicialment invisible */
    #logo {
    display: none; 
    }
  }