/* General Styles */
body {
 margin: 0;
 font-family: "Roboto", sans-serif;
 font-optical-sizing: auto;
 font-style: normal;
}


h3 {
	font-size: 46px;
    font-family: "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    line-height: 1.1em;
    font-weight: 400;
}

.bold {font-weight: 600;}




.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px;
	
}

/* Header Styles */
header {
  background-color: #FFFFFF;
  height: 80px;
}

.containerH {
 max-width: 1280px;
  margin: 0 auto;
  padding:20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
      max-width: 180px;
    padding-top: 10px;
}

.logo img {
   width: 100%; 
  }

.phone {
  background-color: #E74F00;
  color: #FFFFFF;
  border-radius: 20px;
  padding: 10px 20px;
 margin-left: 10px;
}

.language {
 color: #000;
  padding: 10px 20px;
display: flex;
 justify-content: center;
 align-items: center;

}

.flag {
	width: 24px;
}


/* Section 1 Styles */
.section1 {
  background: linear-gradient(#ffffff 50%, #E74F00 50%);
}

.hero {
  position: relative;
  overflow: hidden;
}



.hero img {
  display: block;
  width: 100%;
  border-radius: 20px;
}

/* Section 2 Styles */
.section2 {
  background-color: #E74F00;
  color: white;
}

.headline {
  padding: 20px;
}



/* CSS */
.headline h1 {
 font-size: 6em;
  text-transform: uppercase;
  font-weight: 300;
	line-height: 1em;
	font-family: "Roboto Condensed", sans-serif;
	margin-top: 50px;
}


.content-row {
  display: flex;
  justify-content: center;
  flex-direction: row; /* Layout in riga di default */
  padding: 0 40px;
 
}



.text {
  flex: 1;
  padding: 40px;
}

.text h2 {
  text-transform: uppercase;
	/*text-decoration: underline;*/
  font-size: 16px;
    letter-spacing: 5px;
    font-weight: 500;
}

.text p {
  font-size: 21px;
	text-align: left;
	line-height: 28px;
	font-weight:400;
}

.image {
  flex: 1;
  padding: 20px;
}

.image img {
  width: 100%;
	 border-radius: 20px;
}

.orange-bg {
  background-color: #E74F00;
}

/* Section 3 Styles */
.section3 {
  background-color: white;
	margin-bottom: 200px;
}




.second {margin-top:-120px;}
.margin100 {margin-top: 100px;}
.margin200 {margin-top: 200px;}
.margin300 {margin-top: 300px;}

/* Section 4 Styles */
.section4 {
 /* background-color: #E74F00;*/
  color: white;
	text-align: center;
}





.button {
  background-color: white;
    color: #E74F00;
    padding: 10px 40px;
    text-decoration: none;
    border-radius: 20px;
    font-weight: 500;
}

.fullwidth-block {padding:5% 0;}


/* Footer Styles */
footer {
  background-color: #161615;
  color: white;
}
/*footer .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 20px;
	display: flex;
}


.footer-column {
  flex: 1;
  width: 25%;
  padding: 20px;
  box-sizing: border-box; 
}
*/
footer .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 20px;
  display: flex;
  flex-wrap: wrap; /* Aggiunto per far andare le colonne su più righe quando lo spazio è insufficiente */
}

.footer-column {
  flex: 1;
  width: 25%;
  padding: 20px;
  box-sizing: border-box;
}



.footer-column p {
	font-size: 14px;
    line-height: 22px;
}

a {
	text-decoration: underline;
	color: #fff;
}


/* Responsive */

@media screen and (max-width: 890px) {
  .headline h1 {
    font-size: 60px;}
}

@media screen and (min-width: 769px)and (max-width: 1024px)  {
	.text {padding:10px;}
	.second {margin: 0;}
	.margin300 {margin-top: 100px;}
	.text p {font-size: 18px; line-height: 24px;}
	.margin100{margin-top: 50px; margin-bottom: 50px;}
	.content-row  {padding: 0;}
}


@media screen and (max-width: 768px) {
	.content-row {align-items: center;}
	#cosa.content-row { flex-direction: column-reverse; }
	#come.content-row { flex-direction: column; }
	.second {margin-top:0px;}
	.margin100 {margin-top: 0px;}
	.margin300 {margin-top: 50px;}
	.section3 {margin-bottom: 100px;}
	.text, .image { width: 100%; }
	.headline h1 { font-size: 40px; }
	footer .container {display: block; text-align: center;}
  .footer-column { width: 100%; }
	.bottom {margin: 0 auto !important;}
	.content-row  {padding:0 20px;}
	
	
}



@media screen and (max-width: 480px) {
  .headline h1 { font-size: 30px; }
	.phone {display: none;	}
}


