/*

 Theme Name:   Romea WP Child

 Theme URI:    https://demo.cocobasic.com/romea-wp/

 Description:  Romea WP Child Theme

 Author:       CocoBasic

 Author URI:   https://cocobasic.com/

 Tags: grid-layout, four-columns, custom-colors, featured-images, threaded-comments, translation-ready, theme-options

 Template:     romea-wp

 Text Domain:  romea-wp-child

*/



/********************************* jreig *************************************/


/************** estils generals ************************/

.border-xplore__img {
  padding: 0.25rem;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  max-width: 100%;
  height: auto;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
}


.border-xplore__img-dark {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem; /* Marc més prim */
  background-color: #212529;
  border: 1px solid #343a40;
  border-radius: 0.375rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  height: 570px; /* Alçada fixa que et queda bé */
  width: 100%;
  overflow: hidden;
}

.border-xplore__img-dark img {
  max-height: 100%;
  max-width: 100%;
  height: auto;
  width: auto;
  object-fit: contain;
}

.border-xplore-auto__img img {
    padding: 0.25rem;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6 !important;
    border-radius: 0.375rem;
    max-width: 100%;
    height: auto;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
}

.cita__container {
  font-weight: 500;
}

.cita__autor {
  font-weight: 700;
}

.formacio__icona {
  list-style: none;
}

.formacio__icona li::before {
  content: "🎓 ";
  margin-right: 0.5em;
}

.formacio__document li::before {
  content: "📄 ";
  margin-right: 0.5em;
}


.xplore-apartat__h4 {
  color: #fff;
  line-height: 1.7rem;
  margin-top: 2rem;
}

.sub-mesServices {
    color: #000 !important;
}

a.no-border__link::after {
    background-color: #fff;
}

.custom-SavoirPlus__container {
  margin: 3rem 0rem;
}


.custom-SavoirPlus__link {
  position: relative;
  color: #fff !important;
  border: 1px solid #fff;
  border-radius: 8px;
  padding: 20px 32px;
  text-decoration: none;
  background: transparent;
  overflow: hidden;
  display: inline-block;
  transition: color 0.4s ease-in-out, transform 0.3s ease-in-out;
  z-index: 1;
}

/* Eliminar estils after per defecte */
.custom-SavoirPlus__link::after {
  content: none !important;
  display: none !important;
}

/* Efecte de "top fill" */
.custom-SavoirPlus__link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: #fff;
  z-index: -1;
  transition: height 0.4s ease-in-out;
  border-radius: 2rem;
}

/* Hover: el fons omple cap avall */
.custom-SavoirPlus__link:hover::before {
  height: 100%;
}

/* Hover: canviem color del text quan el fons puja */
.custom-SavoirPlus__link:hover {
  color: #000 !important;
}

/* Opcional: efecte al fer clic */
.custom-SavoirPlus__link:active {
  transform: scale(0.96);
}




.mt-1{margin-top:1rem}
.mt-2{margin-top:2rem}
.mt-3{margin-top:3rem}
.mt-4{margin-top:4rem}

.mb-1{margin-bottom:1rem}
.mb-2{margin-bottom:2rem}
.mb-3{margin-bottom:3rem}
.mb-4{margin-bottom:4rem}

/****************************** capçalera *****************************/

.xplore-banner__slogan p {
  text-shadow: 0.125rem 0.125rem #0000004d;
}

/* amagar la F del logo */

.header-logo {
    display: none;
}

/****************************** menu hamburguer ************************/

/* posar fons negre a hamburguer */
.toggle-holder {
    background: #000;
    padding: 1rem 1rem 0.70rem 1rem;
}

/* sobre escriure estils defecte */
#toggle div {
  background-color: #fff !important;
  box-shadow: 1px 1px 1px #000;
}


/*********************************** Home ************************************/


/* image home escala grisos */
.xplore-home__img img {
    filter: grayscale(1);
}

.home__firma {
  filter: grayscale(100%);
}

h1.home-services__h1 {
    padding: 0rem;
    margin: 1rem 0rem;
}

ul.mes-services__domaines {
    margin: -2rem 0rem 2rem 0rem;
}


@media (max-width:768px){
  ul.mes-services-list__dreta {
    margin-top: -3rem;
    margin-left: -0.45rem;
  }
}


/************************************ cards Home ***********************************/

.card__container {
    border: 1px solid #eee;
    padding: 1rem;
    border-radius: 0.3rem;
    transition: background 0.3s ease, transform 0.6s ease;
  transform-origin: center center;
}

h4.card__capcalera {
    border-bottom: 1px solid #eee;
    margin-bottom: 2rem;
    font-weight: 700;
}

.card__img {
  padding: 0.25rem;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  max-width: 100%;
  height: auto;
  transition: transform 0.6s ease;
}

/* 1. Desactiva l'efecte ::after només per als links amb .card__link */
.card__link::after {
    content: none !important;
}

/* 2. Afegeix un underline amb el color personalitzat */
.card__link {
  text-decoration: underline !important;
  text-decoration-color: currentcolor;
  text-decoration-thickness: auto;
  text-decoration-color: #96dfff !important;
  text-underline-offset: 4px;
  text-decoration-thickness: 4px !important;
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: center;
  text-underline-offset: 6px;
}



.card__container:hover{
    background-color: #f5f5f5;
}

.card__container:hover .card__img {
  transform: scale(1.02); /* Zoom més suau a la imatge */
}


/* mes services home */

.savoir__plus-container{display:none}

@media (max-width:768px){

  .savoir__plus-container {
    display: flex;
    justify-content: center;
    margin: -1rem 0rem;
  }


  p.growth__paragraf {
    margin-bottom: 0rem;
  }


  ul.compe-list2 {
    margin-top: -1rem;
  }

  
  
}


/************************* qui je suis? **********************/

ul.competences-home__list {
    color: #000;
}

ul.competences-home__list li {
    margin-left: 1rem;
    margin-bottom: 0.6rem;
}

.quiJeSuis__btn {
    margin-top: 3rem;
    margin-bottom: 3rem;
}



/********************************************* Mes Services ****************************************/


/* tabs Mes services */

.tabs-services__container {
  width: 100%;
/*  padding: 20px;*/
  box-sizing: border-box;
}

.tabs-services__row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.tabs-services__col6 {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.apartats-services__h3 {
  padding: 10px;
}

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

/* img tabs */

.strategie__img {
  width: 50%;
  margin: 0 auto;
}

.entrepeneur__img {
  width: 50%;
  margin: 0 auto;
}

.developer__img {
  width: 50%;
  margin: 0 auto;
}

.affaires__img {
  width: 50%;
  margin: 0 auto;
}

.text-cta__h3 h3 {
  font-size: 2.3rem !important;
  line-height: 2.5rem;
}

/* lletra petita h3 mobile */
@media (max-width: 768px) {

    .text-cta__h3 h3 {
    font-size: 1.5rem !important;
    line-height: 1.8rem;
  }

}


/* Pantalles grans: dues columnes */
@media (min-width: 768px) {
  .tabs-services__col6 {
    width: 50%;
  }

}





/* Estils opcionals addicionals */
.tabs-services__paragraf {
  font-size: 1rem;
  line-height: 1.6;
}

.tabs-services__img {
  max-width: 100%;
  height: auto;
  display: block;
}

/*** Fi Tabs Mes services */ 


/************************ Blog *********************************/

.blog-intro__recuadre {
  background: #e1dfdf;
  padding: 1rem;
  margin: 1rem 0rem 2rem 0rem;
  border-radius: 0.5rem;
}

.blog-intro__llista {
  list-style: none;
}

a.blog-intro__url {
    color: #69727d;
}

a.blog-intro__url:hover {
    text-decoration: underline;
}

.blog-intro__paragraf {
  line-height: 1.2rem;
}

.blog-intro__url::after {
  content: none !important;
}

/************************* form *****************************/





/************************ footer ******************************/


ul#footer-sidebar-1 {
    display: flex;
    justify-content: center;
}

ul#footer-sidebar-2 {
    display: flex;
    justify-content: center;
}


.logo-kd-footer {
    display: flex;
    justify-content: center !important;
}

.logo-kd-footer img {
    filter: grayscale(1);
}



/************************** accesibilitat ***************************/

span.footer-menu__h4.footer-menu__span {
    font-size: 1.4rem;
    font-weight: 600;
}

span.footer-legal__h4.footer-menu__span {
    font-size: 1.4rem;
    font-weight: 600;
}


/*.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
*/