@charset "utf-8";
/* CSS Document */


body {
  font-family: 'Roboto', sans-serif;
  font-size: 19px;
  font-weight: 300;
}

/* CSS pel menu xupi-guai */

a:link, a:visited, a:hover {
    text-decoration: none;
}

#MenuLine{
   vertical-align:top;
	text-align:center;
	width:450px;
	size:3;
}

#MenuTitleActive{
   /*font:Verdana, Geneva, sans-serif;
   vertical-align:super;*/
	/*color:#C08D38;*/
	font-weight: 500;	
	/*font-size:16px;*/
	padding: 3px 12px;
}

/* all the menu items (links) are nested within this class */
.navbar {
  overflow: visible;   /* ✅ allow dropdown to show fully -- it was HIDDEN originally!! */
  background-color: white;
  text-align: center;
}

.navbar a {
  display: inline-block;
  color: #245a82; /*fosc*/
  text-align: center;
  padding: 3px 12px;
  text-decoration: none;
}

.dropdown {
  display: inline-block;
  position: relative;     /* 👈 add this */
}

.dropdown .dropbtn {  
  border: none;
  outline: none;
  color: #245a82; /*fosc*/
  padding: 3px 12px;
  background-color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}


.navbar a:hover, .dropdown:hover .dropbtn {
  /*background-color: red;*/
  color: #70b3d5; /* claret */
}


.dropdown-content {
  display: none;
  position: absolute;
  /*background-color: #70b3d5; claret, per a que es pugui llegir*/
  background-color: rgba(255,255,255,0.95); /* whitish */
  min-width: 100%;        /* EDITED!! 👈 instead of 160px */
  width: max-content;     /* NEW COMPLETELY 👈 grow only if needed */
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  font-style: italic;
  color:#245a82; /*fosc*/
  text-align: left;
  display: block;
  padding: 12px 16px;
}

.dropdown-content a:hover {
  /* background-color: #f1f1f1; */
  background-color: #245a82; /* fosc, quan s'hi posa el ratoli a sobre */
}

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



/* MOBILE HAMBURGER MENU */
.nav-toggle{
  display:none;
  background: transparent;
  border: 1px solid #bc996f;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 18px;
  line-height: 1;
  color: #4e281e;
  cursor: pointer;
}

.nav-links{
  display: inline-block;
}

.nav-controls{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}


/* Allow dropdown to open on tap (mobile) */
.dropdown.open .dropdown-content{
  display:block;
}







/* CSS pel text de les seccions*/

.PortadaTitle{
	font-family: 'Dancing Script';
	font-size:62px;
	color:#4588b3; /* semi-fosc */
	text-align:center;	
}

.PortadaSubtitle_1{
	font-size:33px;
	color:#4588b3; /* semi-fosc */
	font-style:italic;
	text-align:center;
	padding-top:10px;
}

.PortadaSubtitle_2{
	font-size:25px;
	color:#70b3d5; /* claret */
	font-style:italic;
	text-align:center;
	padding-top:10px;
}

/* crec que no s'utilitza*/
.TitolCapcalera{
	font-size:24px;
	color:#245a82; /* fosc */
}

.SeedsOfGrowthCapcalera{
	font-family: 'Dancing Script';
	font-size:18px;
	color:#6d8212; /* verdós */
	text-align:center;	
}

.TitolApartatMenu{
	font-family: 'Dancing Script';
	font-size:60px;
	color:#4588b3; /* semi-fosc */
	text-align:center;
	display: inline-block;
   vertical-align: middle;
}

.Imatge_Logo_SoG{
	height: 70px;
	/*width: 70px;*/
	vertical-align: bottom;
}

/* your images should resize based on the width of their container */
img {
  max-width: 90%; /*ensures the image is never wider than its container */
  height: auto; /* ensures that the image retains its aspect ratio (so it doesn't get stretched or squished) */
}

.DivGeneral{
	width:50%;
	font-size: inherit;
	text-align: justify;
	}

.BoldColoredText {
	color: #4588b3; /* semi-fosc */
	font-weight: 500;
	font-size: 18px;
}
.TitolSeccioText{
	font-size:24px;
	font-weight: 400; 
	color:#70b3d5;	/* claret */
}

.BotoSubscripcioCurs{
       display:inline-block;
       padding:0.9rem 2.2rem;
       font:600 1rem/1 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
       color:#fff;
       background:#4588b3; /* semi-fosc */
       border-radius:8px;
       text-decoration:none;
       box-shadow:0 2px 6px rgba(0,0,0,0.15);
       transition:background 160ms ease, transform 160ms ease;
}







/* CSS for screens less than 600px wide */

@media screen and (max-width: 600px) {
  .navbar a, .dropdown .dropbtn {
    font-size: 12px;
  }
  .PortadaTitle{
	font-size:45px;
	}

  .PortadaSubtitle{
	font-size:18px;
	padding-top: 16px;
	}
	
  .DivGeneral{
	width:92%;
	}
	
	/* HAMBURGER MENU layout on small screens */
  .navbar{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    padding: 6px 10px;
    position: relative; /* anchor the overlay panel */
  }

  .nav-toggle{
    display: inline-block;
  }

  .nav-links{
    display: none;    
    width: 80vw;
  	 max-width: 175px;
  	 text-align: left;
  	 padding-top: 0;

  	 position: absolute;
  	 top: calc(100% + 6px);
  	 left: 10px;

 	 background: #fff;
 	 border: 1px solid #bc996f;
 	 border-radius: 12px;
 	 padding: 8px 6px;
 	 box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
	 z-index: 9999;

	 max-height: 80vh;
	 overflow-y: auto;
	 overflow-x: hidden;
  }

  .navbar.nav-open .nav-links{
    display: block;
  }

  .nav-links a,
  .nav-links .dropdown{
    display: block;
    font-size: 16px; /* pick what you like: 16 / 17 / 18... */

  }

  .nav-links a{
	 width: 100%;
 	 text-align: left;
 	 padding: 10px 12px;
  }
  
  	/* Dropdown panels inside the mobile hamburger panel should NOT be absolute-positioned */
	.nav-links .dropdown-content{
  		position: static;
  		min-width: 0;
  		width: 100%;
  		box-shadow: none;
	}
  
  .nav-links a#MenuTitleActive{
    padding: 10px 12px; /* match the rest, és per un problema d'assimetria d'espaiat dins del menú*/
  }

  .dropdown .dropbtn{
    width: 100%;
    font-size: 16px; /* pick what you like: 16 / 17 / 18... */
    text-align: left;
    padding: 10px 12px;
  }

  
  /* On touch screens, avoid "sticky hover" opening the language menu */
	.dropdown:hover .dropdown-content{ display:none; }
	.dropdown.open .dropdown-content{ display:block; }
  
  #MenuLine { display: none; } /*we remove the <hr> when the screen is narrow */
  
} /* @media screen and (max-width: 600px) */

/* CSS for screens more than 2000px wide */

@media screen and (min-width: 2000px) {
  .navbar a, .dropdown .dropbtn {
    font-size: 24px; /* You can adjust these values according to your needs */
  }
  .navbar {
  font-size: 24px;
  }

  .PortadaTitle {
    font-size: 90px;
  }

  .PortadaSubtitle {
    font-size: 36px;
    padding-top: 32px;
  }
  
  .DivGeneral {
    width: 40%; /* You can adjust this value according to your needs */
    font-size: 21px;
  }
}





/***** PORTADA SECCIÓ DE FOTOS *******/

.image-banner {
  position: relative;
  overflow: hidden;
}

.image-banner-container {
  position: relative;
  /*width: 330px;*/
  height: 350px; /* You might want to set a fixed height here, e.g., 500px */
  display: flex;
  justify-content: center; 
  align-items: center; 
}


.image-banner-container img {
  position: absolute;
  height: 100%;
  width: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 3s ease;
  object-fit: contain;
}


.image-banner-container img.active {
  opacity: 1;
  visibility: visible;
}

.prev-arrow,
.next-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: #000;
  background-color: #fff;
  padding: 10px;
  cursor: pointer;
}

.prev-arrow {
  /*left: calc(50% - 200px);*/
  left: 10px; /* Adjust this value as needed */
  color: #70b3d5; /* claret */
  transform: translate(-50%, -50%);
  background-color: transparent; /* Set background color to transparent */
}

.next-arrow {
  /*right: calc(50% - 200px);*/
  right: 10px; /* Adjust this value as needed */
  color: #70b3d5; /* claret */
  transform: translate(50%, -50%);
  background-color: transparent; /* Set background color to transparent */
}


/* END SECCIÓ FOTOS PORTADA */






/* PALETA NOU LOGO ASSOCIACIÓ CUIDANDONOS
/* #245a82;  blau fosc */
/* #4588b3;  blau semi-fosc */
/* #70b3d5;  blau claret */
/* #c3e8fa;  blau quasi-blanc */