html, body{
    font-family: 'calibri', sans-serif !important;
    font-size: 16px;
}

/*
 * Globals
 */

/* Links */
a,
a:focus,
a:hover {
    color: #3b66ad;
}

/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
    color: #333;
    text-shadow: none; /* Prevent inheritance from `body` */
    background-color: #fff;
    border: 1px solid #fff;
}


/*
 * Base structure
 */

html,
body {
    height: 100%;
}


/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
    display: table;
    width: 100%;
    height: 100%; /* For at least Firefox */
    min-height: 100%;
}
.site-wrapper-inner {
    display: table-cell;
    vertical-align: top;
}
.cover-container {
    margin-right: auto;
    margin-left: auto;
}

/* Padding for spacing */
.inner {
    padding: 30px;
}


/*
 * Cover
 */

.cover {
    padding: 0 20px;
}
.cover .btn-lg {
    padding: 10px 20px;
    font-weight: bold;
}


/*
 * Affix and center
 */

@media (min-width: 768px) {
    /* Pull out the header and footer */
    .masthead {
        position: fixed;
        top: 0;
    }
    .mastfoot {
        position: fixed;
        bottom: 0;
    }
    /* Start the vertical centering */
    .site-wrapper-inner {
        vertical-align: middle;
    }
    /* Handle the widths */
    .masthead,
    .mastfoot,
    .cover-container {
        width: 100%; /* Must be percentage or pixels for horizontal alignment */
    }
}



.navbar-brand{
    padding-top: 5px;
}

.navbar-default .navbar-nav>li>a {
     color: #483e3c;
    padding-bottom: 5px;
}

.navbar-default .navbar-nav>li>a:hover{
    border-bottom:2px solid #483e3c;
}

.navbar {
    margin-bottom: 0px;
}

.fons_cover{
    background: url(../images/origens3.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.white{
    color: #e9e0cd;
}

.site-wrapper-inner {
    vertical-align: middle;

}

.site-wrapper-personalitzat {
    display: table;
    width: 100%;
    height: 600px;
    min-height: 600px;
    -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
    box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}

.cover-container {
    margin-right: auto;
}

.vertical-align {
    display: flex;
    align-items: center;
}

@media (max-width: 768px) {
    .vertical-align {
        display: grid !important;
        align-items: inherit !important;
    }
}

.fons_parallax{
    background: url(../images/fons_escrit-min.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 450px;
}

.imatge2{
    background: url(../images/muntatge2.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
}

.container-fluid { 
    padding-right: 0px !important;
    padding-left: 0px !important;
}

/*cognoms*/

main {
            height: 100vh;
            background: url('../images/arbre_b.jpg') no-repeat center center/cover;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            text-align: center;
            padding: 20px;
        }

        main h1 {
            font-size: 48px;
            font-weight: bold;
            margin: 0;
        }

        main p {
            font-size: 18px;
            margin: 10px 0 30px;
        }

        .search-bar {
            display: flex;
            align-items: center;
            background-color: white;
            border-radius: 30px;
            padding: 10px 20px;
            max-width: 500px;
            width: 100%;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .search-bar input {
            border: none;
            outline: none;
            flex: 1;
            font-size: 16px;
            padding: 5px;
        }

        .search-bar button {
            background: none;
            border: none;
            font-size: 18px;
            cursor: pointer;
        }
        
        
        
        /*qui soc*/
        .qui-soc {
  background-color: #f9f9f9;
  color: #333;
  padding: 60px 20px;
  font-family: 'Calibri', sans-serif;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
}

.titol-seccio {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 40px;
  text-align: center;
  color: #1a1a1a;
}

.dos-columnes {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.columna-esquerra {
  flex: 1 1 300px;
  text-align: center;
}

.foto-meva {
  width: 100%;
  max-width: 320px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.columna-dreta {
  flex: 2 1 500px;
}

.columna-dreta p {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 16px;
}

.columna-dreta strong {
  color: #000;
}

.boto-contacte {
  margin-top: 30px;
}

.boto-contacte a {
  display: inline-block;
  background-color: #9FC0A7;
  color: #fff;
  padding: 12px 30px;
  text-decoration: none;
  font-size: 16px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.boto-contacte a:hover {
  background-color: #aba2a2;
}

/* Responsive per mòbils */
@media (max-width: 768px) {
  .dos-columnes {
    flex-direction: column;
    align-items: center;
  }

  .columna-esquerra, .columna-dreta {
    width: 100%;
  }

  .titol-seccio {
    font-size: 28px;
  }

  .columna-dreta p {
    font-size: 16px;
  }
}

/*servicios*/

.seccion-servicios {
  background-color: #c8987e;
  background-image: url('https://www.transparenttextures.com/patterns/tileable-wood.png'); /* Patró de fons */
  padding: 60px 20px;
  font-family: 'Calibri', Tahoma, Verdana, sans-serif;
  text-align: center;
}

.titulo-seccion {
  font-size: 40px;
  color: #483e3c;
  margin-bottom: 40px;
}

.servicios-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.servicio {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  width: 30%;
  text-align: center;
}

.servicio .icono {
  margin-bottom: 20px;
}

.icono-imagen {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.servicio h3 {
  font-size:40px;
  font-family: Calibri, sans-serif;
  color: #333;
  margin-bottom: 15px;
}

.servicio p {
  font-size: 16px;
  color: #555;
}

.boton-contacto {
  margin-top: 40px;
}

.btn-contacto {
  display: inline-block;
  background-color: #9FC0A7;
  color: #fff;
  padding: 12px 30px;
  text-decoration: none;
  font-size: 18px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.btn-contacto:hover {
  background-color: #6FC0A7;
}

@media (max-width: 768px) {
  .servicio {
    width: 100%;
    margin-bottom: 30px;
  }
}

/*treballs*/

.seccion-treballs {
  background-color: #f9f9f9;
  padding: 60px 20px;
  font-family: 'Calibri', Tahoma, Geneva, Verdana, sans-serif;
}

.titulo-seccion {
  font-size: 36px;
  font-weight: bold;
  color: #2a6592;
  text-align: center;
  margin-bottom: 40px;
}

.texto {
  font-size: 18px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 20px;
  text-align: justify;
}

/* Estils per al carrousel */
.carrousel {
  position: relative;
  max-width: 100%;
  width: 100%;
  height: 400px;
  margin-top: 40px;
  overflow: hidden;
}

.carrousel-container {
  display: flex;
  transition: transform 0.5s ease;
}

.carrousel-item {
  min-width: 100%;
  height: 100%;
}

.carrousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* Fletxes */
.carrousel-prev, .carrousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 30px;
  padding: 10px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 1;
}

.carrousel-prev {
  left: 20px;
}

.carrousel-next {
  right: 20px;
}

/* Estils per a la responsivitat */
@media (max-width: 768px) {
  .carrousel {
    height: 300px;
  }
}


.nav-item-dropdown {
  position: relative;
}

.nav-item-dropdown .dropdown-content {
  display: none;
  position: absolute;
  left: 0;
  margin-top: 0.5rem;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 0.5rem;
  width: 16rem;
  z-index: 50;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.05);
}

.nav-item-dropdown:hover .dropdown-content {
  display: block;
}

 html {
      scroll-behavior: smooth;
    }
    
    /* Fix for fixed header and section positioning */
    section[id] {
      scroll-margin-top: 80px; /* Adjust based on your header height */
    }
    
    /* Animation for fade in */
    .animate-fadeIn {
      animation: fadeIn 1s ease-in-out;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    /* Custom colors */
    .hover\:text-alea-blue:hover {
      color: #3b66ad;
    }
    .bg-alea-blue {
      background-color: #3b66ad;
    }
    .hover\:bg-alea-blue\/90:hover {
      background-color: rgba(59, 102, 173, 0.9);
    }
    .text-alea-blue {
      color: #3b66ad;
    }
    
    /* Mobile menu styles */
    .mobile-menu {
      transform: translateX(-100%);
      transition: transform 0.3s ease-in-out;
    }
    
    .mobile-menu.open {
      transform: translateX(0);
    }
    
    /* Dropdown styles */
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: white;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
      border-radius: 0.375rem;
    }
    
    .nav-item-dropdown:hover .dropdown-content {
      display: block;
    }
    
    /* Mobile dropdown */
    .mobile-dropdown-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }
    
    .mobile-dropdown-content.open {
      max-height: 500px;
    }
    
    /* Icon box hover effect */
    .icon-box {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .icon-box:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
    
    /* Process circle */
    .process-circle {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      position: relative;
    }
    
    .process-circle::after {
      content: "";
      position: absolute;
      top: 50%;
      right: -50%;
      width: 100%;
      height: 2px;
      background-color: #e5e7eb;
      z-index: -1;
    }
    
    .process-step:last-child .process-circle::after {
      display: none;
    }
    
    @media (max-width: 768px) {
      .process-circle::after {
        top: 100%;
        right: 50%;
        width: 2px;
        height: 50px;
      }
    }
    
    /* Training card */
    .training-card {
      transition: all 0.3s ease;
    }
    
    .training-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    .text-justify {
      text-align: justify;
    }

.text-alea-blue { color: #3f67ad; }
.text-alea-red { color: #e63946; }
.text-alea-green { color: #378c49; }
.text-alea-purple { color: #9b5de5; }
.text-alea-gray { color: #cccbc9; }
.text-alea-yellow { color: #e9c46a; }

.shadow {
    --tw-shadow: none !important;
    box-shadow: none !important;
}