@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

/*
	Theme Name: Mx Sicurezza 2024
	Description: Mx Sicurezza 2024 Theme
	Version: 1.4.3
	Author: Digitalia
	Author URI: https://www.digitalia.srl
	Tags: HTML5, CSS3

	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/

/*------------------------------------*\
	MAIN
\*------------------------------------*/

/* GENERAL */
html,body {  
	margin:0;
	padding:0;
	font-family: "Hanken Grotesk", sans-serif !important;
	font-size: 16px !important;
	line-height: 1.4;
	font-weight:400;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	-moz-font-smoothing:antialiased;
	-o-font-smoothing:antialiased;
	background-color:#fff;
	color:#333;
}

@media (min-width: 1600px){  
	html,body {
		font-size: 18px !important;
	}
}

html {
  scroll-behavior: smooth;
}

img,a img {
	border:none!important;
	width:100%;
	height: 100%;
	object-fit: cover;
}


::-moz-selection {
	background:none repeat scroll 0 0 #FFF;
	color:#000;
}

* {
	outline:0!important;
}

b,strong,.bold {  
	font-weight:700;
}

a,a:visited {  
	outline-style:none;
	text-decoration:none;
	color:#fff;
}

a:hover {  
	cursor:pointer !important;
	text-decoration:none;
}


@media (min-width: 1200px){  
	.container-fluid {
		padding-left: 50px;
		padding-right: 50px;
	}
}

@media (min-width: 1600px){  
	.container-fluid {
		padding-left: 100px;
		padding-right: 100px;
	}
}


/* TYPO */

.big{
	font-size: 1.25rem;   
}
.small{
	font-size: 0.9rem;	 
}

h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{  
	padding:0;
	margin:0;
}

h1,.h1{
	font-family: "Rubik", sans-serif;
	font-size: 3.8rem;
	font-weight: 500;
	color: #333;
	text-transform: uppercase;
}


h2{
	font-family: "Rubik", sans-serif;
	font-size: 2.5rem;
	font-weight: 500;
	color: #333;
	text-transform: uppercase;
}


h3{
	font-family: "Rubik", sans-serif;
	font-size: 1.7rem;
	font-weight: 500;
	color: #333;
	text-transform: uppercase;
}

@media(max-width:991px){
	h1,.h1{
		font-size: 2rem;	
	}
	h2{
		font-size: 1.7rem;		
	}
	h3{
		font-size: 1.3rem;
	}
}

h1 strong{
	color: #74C636;
}

.grey_back{
	background-color: #F0F0F0;
}

/* LOADER */
#loading {
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:998;
	background-color:#fff;  
}

.loader {
	color:#000;  
	font-size:50px;
	text-indent:-9999em;
	overflow:hidden;
	width:1em;
	height:1em;
	border-radius:50%;
	margin:50px auto;
	position:relative;
	top:40%;
	-webkit-transform:translateZ(0);
	-ms-transform:translateZ(0);
	transform:translateZ(0);
	-webkit-animation:loadnk 1.7s infinite ease,round 1.7s infinite ease;
	animation:loadnk 1.7s infinite ease,round 1.7s infinite ease;
}

@-webkit-keyframes loadnk{0%,100%,5%,95%{box-shadow:0 -.83em 0 -.4em,0 -.83em 0 -.42em,0 -.83em 0 -.44em,0 -.83em 0 -.46em,0 -.83em 0 -.477em}10%,59%{box-shadow:0 -.83em 0 -.4em,-.087em -.825em 0 -.42em,-.173em -.812em 0 -.44em,-.256em -.789em 0 -.46em,-.297em -.775em 0 -.477em}20%{box-shadow:0 -.83em 0 -.4em,-.338em -.758em 0 -.42em,-.555em -.617em 0 -.44em,-.671em -.488em 0 -.46em,-.749em -.34em 0 -.477em}38%{box-shadow:0 -.83em 0 -.4em,-.377em -.74em 0 -.42em,-.645em -.522em 0 -.44em,-.775em -.297em 0 -.46em,-.82em -.09em 0 -.477em}}@keyframes loadnk{0%,100%,5%,95%{box-shadow:0 -.83em 0 -.4em,0 -.83em 0 -.42em,0 -.83em 0 -.44em,0 -.83em 0 -.46em,0 -.83em 0 -.477em}10%,59%{box-shadow:0 -.83em 0 -.4em,-.087em -.825em 0 -.42em,-.173em -.812em 0 -.44em,-.256em -.789em 0 -.46em,-.297em -.775em 0 -.477em}20%{box-shadow:0 -.83em 0 -.4em,-.338em -.758em 0 -.42em,-.555em -.617em 0 -.44em,-.671em -.488em 0 -.46em,-.749em -.34em 0 -.477em}38%{box-shadow:0 -.83em 0 -.4em,-.377em -.74em 0 -.42em,-.645em -.522em 0 -.44em,-.775em -.297em 0 -.46em,-.82em -.09em 0 -.477em}}@-webkit-keyframes round{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes round{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}

/* HEADER */

header{
	position: fixed;
	z-index: 25;
	width: 100%;
	top:0;
	left: 0;
	opacity:0;
	transition:0.2s;
}

header.show{
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.4) 75%);
	opacity:1;
	transition:0.2s;
}

header .logo{
	width: 250px;
	display: block;
}

@media(max-width:991px){
	header .logo{
		width: 180px;
	}
	
	
}

.openclose{
	width: 30px;
	height: 30px;
	position: relative;
	z-index: 20;
	margin-left: auto;
}

.openmenu{
	display: none;
	width: 100%;
	height: 100vh;
	position: fixed; 
	top: 0;
	left: 0;
	z-index: 20;
	background: rgb(116,198,54);
	background: linear-gradient(90deg, rgba(116,198,54,1) 31%, rgba(48,96,10,1) 100%);
	opacity:0;
	transition: 0.3s;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
}

.navmenu_open .openmenu{
	display: flex;
	opacity:1;
	transition: 0.3s;
}

.openmenu ul{
	list-style: none;
	padding-left:0;
}

.openmenu ul li{
	padding-top: 7px;
	padding-bottom: 7px;
}

.openmenu ul li a{
	font-size: 1.25rem;
}
.openmenu ul li a:hover{
	color: #fff;
}

#cmplz-document, .editor-styles-wrapper .cmplz-unlinked-mode{
width:100% !important;
max-width:100% !important;
}

/* FOOTER */

.footer{
	background: rgb(116,198,54);
	background: linear-gradient(90deg, rgba(116,198,54,1) 31%, rgba(48,96,10,1) 100%);
}

#footer a:hover{
color: #fff;
}
.footer .privacy_footer{
	background-color: #333;
}

.grecaptcha-badge {
	display: none;
}

/* PAGINE */

.white{
	color: #fff;
}

.button{
	display: inline-block;
	color: #fff !important;
	background-color: #74C636;
	border-radius: 25px;
	padding: 10px 30px;
	text-transform: uppercase;
	text-decoration: none;
	transition: 0.3s;
	border: 1px solid #74C636;
}

#plus_aziedali{
	background: rgb(80,193,164);
	background: linear-gradient(90deg, rgba(116,198,54,1) 31%, rgba(48,96,10,1) 100%);
}


.button:hover{
	background-color: transparent;
	color: #74C636 !important;
	transition: 0.3s;
	text-decoration: none;
}


/* form di contatto */

.form-half p{
	display: flex;
	justify-content: space-between;
}

.form-half p .wpcf7-form-control-wrap{
	width: 49%;
}

::placeholder{
	color: #fff;
}

input{
	width:100%;
	background-color: transparent;
	color: #333;
	border-radius: 25px;
	padding: 8px 15px;
	border:none;
	border: 1px solid #fff;
	height: 45px;
}

textarea{
	width:100%;
	background-color: transparent;
	color: #333;
	border-radius: 25px;
	padding: 8px 15px;
	border:none;
	border: 1px solid #fff;
	
}

input[type=checkbox]{
	width: 15px;
	height: 15px;
	display:inline;
	margin-right: 10px;
}

.wpcf7-list-item{
	margin-left: 0 !important;
}
.wpcf7-list-item-label{
	color:#fff;
}
input[type=submit]{
	text-transform: uppercase;
	background-color: #fff;
	color: #74C636;
	border-radius: 25px;
	border: 1px solid #fff;
	padding: 8px 10px;
	height: 45px;
	width: 220px;
	transition: 0.3s;
}

input[type=submit]:hover{
	background-color: transparent;
	color: #fff;
	transition: 0.3s;
}

.plus_circle{
	margin: 0 auto;
	background-color: #fff;
	border-radius: 50%;
	width: 220px;
	height: 220px;
	padding: 40px;
}

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

.z-index{
	position: relative;
	z-index: 2;
}

.green{
	color: #74C636;
}

#presentazione::after{
	content: "";
	width: 67%;
	height: 60%;
	background-color: #F0F0F0;
	top: 0;
	left: 0;
	position: absolute;
}

#hero_mx{
	height: 100vh;
}


#hero_mx a{
	color:#fff;
	text-transform: uppercase;
	position: relative;
	padding-left: 40px;
	display: flex;
	position: relative;
	transition: 0.2s;
}

#hero_mx a:hover{
	text-decoration: none;
}

#hero_mx a::after{
	content: "";
	left: 0;
	bottom: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 5px solid #74C636;
	position: absolute;
	transition: 0.2s;
}

#hero_mx a:hover::after{
	transform: scale(1.15);
	transition: 0.2s;
	background-color: #74C636;
}

#hero_mx a.primo{
	position: absolute;
	bottom: 34px;
	right: 55px;
}

#hero_mx a.secondo{
	position: absolute;
	bottom: 50px;
	right: 50%;
}

#hero_mx a.terzo{
	position: absolute;
	bottom: 230px;
	left: 60%;
}

#hero_mx a.quarto{
	position: absolute;
	top: 60%;
	left: 14%;
}

#hero_mx a.quinto{
	position: absolute;
	top: 40%;
	left: 50%;
}

#hero_mx a.sesto{
	position: absolute;
	top: 38%;
	left: 13%;
}

#hero_mx a.settimo{
	position: absolute;
	top: 80%;
	left: 20%;
}

#hero_mx a.ottavo{
	position: absolute;
	top: 30%;
	left: 25%;
}

.half-overlay{
	width: 100%;
	height: 100%;
	bottom:0;
	left:0;
	position: absolute;
	background: rgb(255,255,255);
	background: linear-gradient(180deg, rgba(255,255,255,0) 30%, rgba(0,0,0,0.55) 86%);
}


.overlay{
	width: 100%;
	height: 100%;
	max-height:100%;
	bottom:0;
	left:0;
	position: absolute;
	background: rgba(0,0,0,0.5);
}

@media(max-width: 991px){
	#hero_mx{
		height: 60vh;
	}
	.half-overlay{
		display: none;
	}
	
	#hero_mx a{
		display: none;
	}
}

.cella_prodotti{
	overflow:hidden;
	border: 1px solid #74C636;
	border-radius: 20px;
	background-color:#fff;
	transition: 0.3s;
	display: inline-block;
	position: relative;
	width:100%;
	height:300px;
}

.cella_prodotti::after{
	content:"";
	top: 0;
	left:0;
	width:100%;
	height:80px;
	position: absolute;
	background-color: rgba(0,0,0,0.3);
}

.cella_prodotti p{
text-align:left;
padding-left: 40px;
}

.cella_prodotti.primo{
	height:550px;
}

.cella_prodotti img{
	position: absolute;
	top: 0;
	left:0;
	width:100%;
	height: 100%;
}

.cella_offerta{
	overflow:hidden;
	border: 1px solid #74C636;
	border-radius: 20px;
	transition: 0.3s;
	width: 100%;
	height: 300px;
	position: relative;
	display: inline-block;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: end;
	justify-content: center;
}

.cella_offerta::after{
	content: "";
	top: 0;
	left: 0;
	position: absolute;
	background-color: rgba(0,0,0,0.37);
	width: 100%;
	height: 100%;
	transition: 0.3s;
}

.cella_offerta:hover::after{
	background-color: rgba(0,0,0,0.2);
	transition: 0.3s;
}



.cella_offerta p{
	font-size: 1.5rem;
}

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

.cella_prodotti:hover{
	background-color: rgba(56, 165, 137, 0.558);
	transition: 0.3s;
	cursor:pointer;	
}


.cella_prodotti svg{
	width: 40px;
	height: 40px;
	position: absolute;
	bottom: 30px;
	right: 30px;
}

#pacchetto_mx::after{
	content: "";
	top: 0;
	right:0;
	width:80%;
	height: 100%;
	position: absolute;
	background-color: #F0F0F0;
}

.hero-tipologia{
	height: 75vh;
	width:100%;
}

.hero-tipologia h1{
	position: absolute;
	bottom: 50px;
	left:50%;
	transform: translateX(-50%);
	
}

.thumbnail-container{
	width: 60% !important;
	height: auto;
}

#mxpro ul{
	padding:0;
	margin:0;
	list-style-position: inside;
}

/*--------------GDPR------------------*/
.page-template-template-gdpr h2 {
	padding-bottom: 20px;
	padding-top: 60px;
}
.page-template-template-gdpr p {
	max-width: 800px;
}
#cmplz-document, 
.editor-styles-wrapper .cmplz-unlinked-mode {
	max-width: 100% !important;
}
#cmplz-cookies-overview .cmplz-dropdown summary div, 
#cmplz-document .cmplz-dropdown summary div,
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header {
	display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}
#cmplz-cookies-overview .cmplz-dropdown summary div input[data-category="functional"], #cmplz-document .cmplz-dropdown summary div input[data-category="functional"], .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary div input[data-category="functional"] {
	width: 5% !important;
}
.page-template-template-gdpr input[type=checkbox], .page-template-template-gdpr input[type=radio] {
	height: auto;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 1px solid #000;
	background-color: transparent;
	padding: 6px;
	margin: 0;
	max-width: 6px;
	margin-right: 10px;
}
.page-template-template-gdpr input[type=checkbox]:checked, .page-template-template-gdpr input[type=radio]:checked {
	background-color: #000;
}
.page-template-template-gdpr label {
	padding: 0;
	width: 25%;
	text-align: left;
}
#cmplz-cookies-overview .cmplz-dropdown summary div h3, #cmplz-document .cmplz-dropdown summary div h3, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary div h3 {
	width: 50%;
}
#cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div p, #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div p, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div p {
	width: 15%;
	text-align: left;
}
.cmplz-category-title{
	width: 80%;
}


/*CSS PROVA MODIFICHE*/
		.container{
					margin-top: 120px;
					margin-bottom: 120px;
		}
  .work-gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Colonne adattive */
            gap: 25px; /* Spazio tra le card */
        }
.container .section-title{
	padding: 30px 0;
}
        .work-card {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            overflow: hidden; 
            text-decoration: none; 
            color: #74C636; 
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex; 
            flex-direction: column; 
        }

        .work-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); 
        }

        .work-card-image {
            width: 100%;
            height: 200px; /* Altezza fissa per le immagini */
            object-fit: cover; /* Assicura che l'immagine copra l'area senza distorsioni */
            border-bottom: 1px solid #eee;
        }

        .work-card-title {
            padding: 15px 20px;
            margin: 0;
            font-size: 1.3em;
            color: #74C636;
            text-align: center;
            font-weight: bold;
        }

        /* Media queries per la responsività */
        @media (max-width: 768px) {
            .container {
                width: 95%;
                margin: 20px auto;
                padding: 0 15px;
            }
            .section-title {
                font-size: 2em;
                margin-bottom: 30px;
            }
            .work-gallery-grid {
                grid-template-columns: 1fr; /* Una colonna su schermi piccoli */
            }
            .work-card-title {
                font-size: 1.2em;
                padding: 12px 15px;
            }
}
			
			/*MODIFICHE PAGINA PORTFOLIO*/
			
			 .portfolio-section {
    max-width: 1200px; /* Larghezza massima per centrare il contenuto */
    margin: 40px auto; /* Centra la sezione e aggiunge spazio verticale */
    padding: 20px;
    background-color: #fff; /* Sfondo bianco per le sezioni */
    border-radius: 8px; /* Bordi leggermente arrotondati */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombra leggera per profondità */
}

.portfolio-section h2 {
    text-align: center;
    color: #0056b3; /* Colore blu simile al sito mxsicurezza.it */
    margin-bottom: 30px;
    font-size: 2.2em; /* Dimensione del titolo più grande */
    border-bottom: 2px solid #eee; /* Linea sottile sotto il titolo */
    padding-bottom: 15px;
}

/* Stile per ogni singolo progetto */
.project-item {
    display: flex; /* Layout flessibile per affiancare immagine e dettagli */
    flex-direction: column; /* Impilare gli elementi su schermi piccoli */
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px dashed #ddd; /* Separatore tra i progetti */
}

.project-item:last-child {
    border-bottom: none; /* Rimuove il bordo per l'ultimo elemento */
}

/* Stile per la galleria di immagini del progetto */
.project-gallery {
    display: grid; /* Griglia per le immagini */
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Colonne adattive */
    gap: 10px; /* Spazio tra le immagini */
    margin-bottom: 20px; /* Spazio sotto la galleria */
}

.project-gallery img {
    width: 100%;
    height: 120px; /* Altezza fissa per coerenza */
    object-fit: cover; /* Assicura che l'immagine copra l'area mantenendo le proporzioni */
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease-in-out; /* Effetto al passaggio del mouse */
}

.project-gallery img:hover {
    transform: scale(1.03); /* Zoom leggero al passaggio del mouse */
}

/* Stile per i dettagli del progetto */
.project-details {
    flex: 1; /* Permette ai dettagli di occupare lo spazio rimanente */
    padding-left: 0; /* Rimuove padding extra su schermi piccoli */
}

.project-details h3 {
    color: #333;
    font-size: 1.8em;
    margin-top: 0;
    margin-bottom: 15px;
}

.project-details ul {
    list-style: none; /* Rimuove i pallini predefiniti */
    padding: 0;
    margin: 0;
}

.project-details li {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

.project-details li::before {
    content: '•'; /* Punto elenco personalizzato */
    color: #007bff; /* Colore blu per il punto elenco */
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    position: absolute;
    left: 0;
}

.project-details li strong {
    color: #555; /* Colore leggermente più scuro per i titoli delle caratteristiche */
}

/* Media Queries per il Responsive Design */
@media (min-width: 768px) {
    .project-item {
        flex-direction: row; /* Torna al layout affiancato su schermi più grandi */
        align-items: flex-start; /* Allinea gli elementi in alto */
    }

    .project-gallery {
        flex: 0 0 40%; /* La galleria occupa il 40% dello spazio */
        margin-right: 30px; /* Spazio tra galleria e dettagli */
        margin-bottom: 0;
    }

    .project-details {
        padding-left: 20px; /* Aggiunge padding a sinistra per i dettagli */
    }
}

@media (min-width: 1024px) {
    .project-gallery {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Più immagini per riga su schermi grandi */
    }
}