/* general styles */

* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
	  background-color:#222;
}
/* Properties */
.center-block {
  /* margini automatici centrano orizzontalmente */
  display:block;
  margin-right:auto;
  margin-left:auto;
}

.center_text {
  text-align: center;
}

.has-green-color
{
    color: #579A18;
}

.has-white-color
{
    color: #EEE;
}

.has-black-color
{
    color: #222;
}

.has_Oswald_font
{
	font: 40px Oswald, normal; /* google font */
}

.has_alegreya_font
{
	font: 24px Alegreya, normal;
}

.has_roboto_20_font
{
	font: 20px Roboto, normal;
}

.has_roboto_24_font
{
	font: 24px Roboto, normal;
}

/* SECTIONS */

.section-style-one {
	width: 100%;
    padding: 0px;
	gap: 0px;
	/*background-color:#fff;*/
}

.section-style-one div {
width: 100%;

  /*background-color:#f48;*/
}

.section-style-one p {
width: 80%;
/*background-color:#bbb;*/
}

.section-style-one h1 {
width: 80%;
/*background-color:#aaa;*/
}

.section-two {
    padding: 20px;
    /*background-color:#f44;*/
    color: white;
}

.section-two img {
    padding: 10px;
}

.section-two p {
	text-align: justify;
}

.section-two table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}

.section-two td {
    border: 1px solid #333;
    padding: 20px;
    text-align: center;
}

.section_carousel
{
    display: flex;
    justify-content: center;    /* ? centra verticalmente */
    align-items: center;      /* centra l'immagine verticalmente */
    padding: 20px;
    /*background-color: #222;*/
	gap: 20px;
    /*height: 300px;*/
}

/* Sezione parallax */
.image_one
{
    background-image: url(../images/firstpage.jpg);
}
.image_two
{
    background-image: url(../images/groundnoise/Emergenza.jpg);
}
.image_three
{
    background-image: url(../images/groundnoise/Photo_Gn_Paddockafe3.jpg);
}


/* ===== PARALLAX ===== */
.parallax {
    height: 80vh;

    background-size: cover;
    background-position: center 0px;
    background-repeat: no-repeat;

    /* ANIMAZIONE LEGATA ALLO SCROLL */
    animation: slowScroll linear;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
}

/* Qui controlli la "velocità" */
@keyframes slowScroll {
    0% {
        background-position: center 0px;
    }
    100% {
        background-position: center -400px; /* movimento più lento */
    }
}

@media (max-width: 768px) {
	.section-style-one {
		width: 100%;
		padding: 0px;
		gap: 0px;
	}
	.image_one
	{
		background-image: url(../images/firstpage2.jpg);
	}
	.image_two
	{
		background-image: url(../images/groundnoise/image_two.jpg);
	}
	.image_three
	{
		background-image: url(../images/groundnoise/image_three.jpg);
	}


    .parallax {
        animation: none;                 /* disattiva animazione desktop */
		height: 60vh;
        
        background-attachment: fixed;    /* ✅ chiave del parallax mobile */
        background-position: center;
    }


}


/* ===== MENU ===== */
.menu-bar {
    background-color: #222;
    padding: 12px 20px;
	/* --- blocca il menu in alto --- */
	position: sticky;
	z-index: 1000;
	top: 0;
	/* -------------------------------*/
	
    display: flex;
    justify-content: flex-end;   /* ✅ tutto a destra */
    align-items: center;
}

.icon-menu {
    display: flex;
    /*justify-content: flex-end; /* posiziona il menu a destra */
    gap: 20px; /* aggiunge spazio tra le voci di menu */
	font: 20px Oswald, bold; /* google font */
}

.icon-menu a {
    color: white;
    text-decoration: none;
 	padding: 0px 10px;
}

.icon-menu a:hover {
	background-color: red;
    text-decoration: none;
}




/* ===== HAMBURGER ===== */
.menu-toggle {
    display: none;
    font-size: 26px;
    color: white;
    cursor: pointer;
}

/* ========================= */
/* ===== MOBILE MODE ===== */
/* ========================= */
@media (max-width: 768px) {

    .menu-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Mostra hamburger */
    .menu-toggle {
        display: block;
        font-size: 26px;
        color: white;
        cursor: pointer

    }

    /* Menu nascosto inizialmente */
    .icon-menu {
        display: none;
        position: absolute;
        top: 60px;
        left: 20px;
        flex-direction: column;
        background-color: #222;
        /*align-items: flex-start;
        gap: 10px;
        padding: 15px;*/
        border-radius: 10px;
        width: 200px;
    }

    /* MENU APERTO */
    .icon-menu.active {
        display: flex;
    }

    /* Link più leggibili */
    .icon-menu a {
        width: 100%;
        padding: 10px;
    }
}







/* IMG GALLERY*/
/* CONTENITORE */
.photo_container {
    max-width: 100%;
    margin: auto;
    padding: 20px 20px;
	/*background-color:#44F;*/
}

/* TITOLO
h1 {
    font-size: 42px;
    font-weight: 600;
    margin-bottom: 40px;
} */

/* GRID */
.gallery {
    display: grid;
    grid-template-columns: 1fr;
	/*background-color:#4F4;*/
    gap: 30px;
}

@media(min-width: 768px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
	/*background-color:#F44;*/
    }
	.photo_container {
    max-width: 90%;
    margin: auto;
    padding: 20px 20px;
	/*background-color:#4FF;*/
}
}

/* CARD */
.card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    cursor: pointer;
}

/* IMMAGINE */
.card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* OVERLAY */
.overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    display: flex;
    align-items: flex-end;
    padding: 20px;
    opacity: 0;
    transition: 0.4s;
}

/* TESTO */
.overlay h2 {
    color: white;
    font-size: 22px;
}

/* HOVER */
.card:hover img {
    transform: scale(1.08);
}

.card:hover .overlay {
    opacity: 1;
}

/* VIEWER */
.viewer {
    position: fixed;
    inset: 0;
    background: black;
    display: none;
    justify-content: center;
    align-items: center;
}

.viewer img {
    max-width: 90%;
    max-height: 90%;

    transition: transform 0.3s ease;
    touch-action: none; /* fondamentale per gesture */
}

.viewer.active {
    display: flex;
}

/*  Other */
.social_media 
{
	width:50%;
	background-color:#F44;
}

.background{
	
	background-image: url("../images/stars.jpg");

	
    /*background-image: url("https://picsum.photos/1600/900");*/

    background-size: contain;      /* riempie tutta la sezione */
    background-position: center; /* centrata */
    background-repeat: repeat;

    /*display: flex;*/
    justify-content: center;
    align-items: center;

}

.timeline-area {
    width: 100%;
    overflow: hidden;
	/*border-radius: 10px;
    background-color: #ddd;*/
}
.timeline-area img {
    width: 100%;
    object-fit: contain;
}

/* Carousel */
.right-area {
    width: 50%;
    overflow: hidden;
	/*border-radius: 10px;*/
    background-color: #22F;
}

.right-area img {
    object-fit: contain;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Logo */
.left-area {
    width: 25%;
}

.logo {
    width: 100%;
    height: 100%;
    object-fit: contain; /* oppure cover */
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////*/


/* ogni riga */
.row {
    display: flex;
    align-items: stretch;
    padding: 40px 10%;
    /*background-color: #242;/*--------------------------*/
}

/* alternanza */
.row.reverse {
    flex-direction: row-reverse;
}

/* testo */
.text {
    flex: 1;
	/*font: 40px Arial, normal;
    background-color: #224;/*--------------------------*/
	
    display: flex;              /* ? diventa flex */
    flex-direction: column;     /* verticale */

    justify-content: center;    /* ? centra verticalmente */

}

@media(max-width: 768px) {
	.row {
		flex-direction: column;
		padding: 10px 0%;
    }
	.row.reverse {
		flex-direction: column; /* annulla alternanza */
	}
}

.text h1 {
    font-size: 32px;
    margin-bottom: 10px;
}
.text h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.text p {
    font-size: 20px;
    line-height: 1.6;
}

/* immagine */
.image {
    flex: 1;
    /*background-color: #662;/*--------------------------*/
	display: flex;
	
    align-items: center;      /* centra l'immagine verticalmente */
    justify-content: center;  /* centra orizzontalmente */

}

.image img {
    width: 100%;
    height: 100%;     		/* usa sempre height, NON max-height */
    object-fit: contain;  	/* ✅ fit intero (nessun taglio) */
    border-radius: 15px;
}


.title_box {
	flex: 1;
    display: flex;
    align-items: center;   /* allinea verticalmente */
    gap: 20px;             /* spazio tra titolo e immagine */
}














.main_page{
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #000;
	color: white;
}

/* Header */
.fullscreen-title {
  position: relative;
  width: 100%;
  height: 160px;
  padding: 10px;
  text-align: center;

}

.fullscreen-title img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Griglia */
.grid {
  display: flex;
  height: 500px;  
  gap: 10px;
  padding: 10px;
  /*background-color: #800;*/
}

.grid a {
  position: relative;
  display: block;
  height: 350px;
  color: white;
  /*background-color: #008;*/
}

.grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grid div {
	display: flex;
	align-items: center;
	/*background-color: #800;*/
}	

.grid_style_end {
	flex-grow: 1; 
	align-self: flex-end;
}

.grid_style_start {
	flex-grow: 1; 
	align-self: flex-start;
}

/* tile */
.tile {
  position: relative;
  height: 250px;
  overflow: hidden;
  text-decoration: none;
  color: white;
  border-radius: 18px;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: contain ;
  transition: transform 0.4s ease;
}

/* Overlay */
.overlay_main {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  padding: 20px;
  /*background-color: #080;*/
}

.overlay_main h2 {
  margin: 0;
  font-size: 1.6rem;
}

.overlay_main p {
  margin-top: 10px;
  font-size: 1rem;
  max-width: 90%;
}

/* Hover effects */
.tile:hover img {
  transform: scale(1.05);
}

.tile:hover .overlay_main {
  opacity: 1;
}

/* Fade-in all'apertura */
.page {
  opacity: 0;
  animation: fadeIn 1.4s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Mobile: overlay sempre visibile */
@media (hover: none) {
  .overlay_main {
	opacity: 1;
  }
}

/* Responsive */
@media (max-width: 768px) {
	.grid {
		display: block;             
		flex-direction: column;    
	}
}