@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:420px;
	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: hidden;
  background-color: white;
  text-align: center;
}

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

.dropdown {
  display: inline-block;
}

.dropdown .dropbtn {  
  border: none;
  outline: none;
  color: #4e281e; /*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: #a0663a; /* claret */
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #bc996f; /* quasi-blanc */
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

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

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

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




/* CSS pel text de les seccions*/

.PortadaTitle{
	font-family: 'Dancing Script';
	font-size:60px;
	color:#96191d; /* vermell semi-fosc */
	text-align:center;	
}

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

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

/* crec que no s'utilitza*/
.TitolCapcalera{
	font-size:24px;
	color:#4e281e; /* 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:#96191d; /* vermell 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: #784320; /* semi-fosc */
	font-weight: 500;
	font-size: 18px;
}
.TitolSeccioText{
	font-size:24px;
	font-weight: 400; 
	color:#a0663a;	/* 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:#96191d; /* vermell 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%;
	}
}

/* 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: 400px; /* 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: #a0663a; /* 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: #a0663a; /* claret */
  transform: translate(50%, -50%);
  background-color: transparent; /* Set background color to transparent */
}


/* END SECCIÓ FOTOS PORTADA */






/*********** BLOG *************/

/* És  que és un element imprescindible per al WYSIWYG */
.div_textarea{
	/*color: #CBC4C4;*/
	/*font-style: italic;*/
	font-size: 15px;
	height: 80px;
}

/* Vigila que és un element imprescindible per al WYSIWYG */
.hidden_textarea{
	width:100%;
	display: none;
	/* required cols="120" rows="12" */
}


.BlogImage {
  /* to center the images of the blog */
  display: block;
  margin-left: auto;
  margin-right: auto;
  /************/
  width: 400px;
}




/* END SECCIÓ BLOG */



/* PALETA ANTIGA - COLORS VERMELLOSOS LOGO COR AMB GENT DONANT-SE MANS
#641e20; /*fosc*/
#96191d; /* semi-fosc */
#cf141b; /* claret */
#f9f9f9; /* quasi-blanc */