/*
Theme Name: Wasp Custom
Theme URI: http://www.waspstudio.it/
Author: Wasp Studio
Author URI: http://www.waspstudio.it/
Description: Our simple theme, from here we develop all custom solutions for our customers
Version: 0.1
Text Domain: Wasp Custom

*/

 /*--------FONTS------*/

 @import url('https://fonts.googleapis.com/css2?family=Bevan:ital@0;1&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
 @font-face {
    font-family: 'Aachen';
    src: url('https://www.dndogtraining.it/wp-content/themes/wasp_custom/fonts/AachenMediumPlain.woff2') format('woff2'),
        url('https://www.dndogtraining.it/wp-content/themes/wasp_custom/fonts/AachenMediumPlain.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

 /*--------CSS RESET------*/

 html,
 body,
 div,
 span,
 applet,
 object,
 iframe,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p,
 blockquote,
 pre,
 a,
 abbr,
 acronym,
 address,
 big,
 cite,
 code,
 del,
 dfn,
 em,
 img,
 ins,
 kbd,
 q,
 s,
 samp,
 small,
 strike,
 strong,
 sub,
 sup,
 tt,
 var,
 b,
 u,
 i,
 center,
 dl,
 dt,
 dd,
 ol,
 ul,
 li,
 fieldset,
 form,
 label,
 legend,
 table,
 caption,
 tbody,
 tfoot,
 thead,
 tr,
 th,
 td,
 article,
 aside,
 canvas,
 details,
 embed,
 figure,
 figcaption,
 footer,
 header,
 hgroup,
 menu,
 nav,
 output,
 ruby,
 section,
 summary,
 time,
 mark,
 audio,
 video {
 	margin: 0;
 	padding: 0;
 	border: 0;
 	font-size: 100%;
 	font: inherit;
 	vertical-align: baseline;
 	box-sizing: border-box;
 }

 /* HTML5 display-role reset for older browsers */
 article,
 aside,
 details,
 figcaption,
 figure,
 footer,
 header,
 hgroup,
 menu,
 nav,
 section {
 	display: block;
 }

 ol,
 ul {
 	list-style: none;
 }

 blockquote,
 q {
 	quotes: none;
 }

 blockquote:before,
 blockquote:after,
 q:before,
 q:after {
 	content: '';
 	content: none;
 }

 table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }

 b {
 	font-weight: 800 !important;
 }

 a {
 	text-decoration: none !important;
	 transition: 0.2s;
 }

 a:hover {
	transition: 0.2s;
 }

 strong {
	font-weight: 800 !important;
 }


 body {
 	font-style: var(--ff);
	background-color: #42513e;
 }

 .body-overflow {
 	overflow: hidden;
 }



 /*--------VARS------*/

 :root {
 	--main-color: #dfd4b9;
 	--accent-color: #75804a;
 	--ff: "Bevan", serif;
	--ff2: "Roboto", sans-serif;
 }


 /*--------WP-SETTINGS------*/

 .wp-block-group {
 	opacity: 1;
 }

 .wp-block-button-custom {
	position: relative;
 }

 .wp-block-button-custom:hover::after{
	height: 0;
	transform-origin: top;
 }

 .wp-block-button-custom:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-color: #D30A4D;
	transition: all 400ms cubic-bezier(.47,1.64,.41,.8);
	transform-origin: top;
 }

 .wp-block-button-custom::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
	background-color: var(--accent-color);
	transition: all 400ms cubic-bezier(.47,1.64,.41,.8);
	transform-origin: bottom;
 }


 .unclickable {
	cursor: pointer;
 }
 .unclickable>a {
 	pointer-events: none;
 }

 .no-pointer a {
	cursor: default !important;
 }




 /*--------PRELOADER------*/

 #preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #42513e;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
  }
  
  .preloader-content {
	text-align: center;
	width: 80%;
	max-width: 400px;
  }
  
  .preloader-text {
	color: #dfd4b9;
	font-family: var(--ff);
	font-size: 1.2rem;
	margin-bottom: 20px;
  }
  
  .progress-bar {
	width: 100%;
	height: 8px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 4px;
	overflow: hidden;
  }
  
  .progress-fill {
	height: 100%;
	width: 0%;
	background: #dfd4b9;
	border-radius: 4px;
  }
  


 /*--------HEADER------*/
 .navbar-container,
 .sub-navbar-container {
 	width: 100%;
 	position: fixed;
 	z-index: 1000;
	background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
 }


 .navbar{
 	width: 100%;
 	max-width: 1600px;
 	margin: 0 auto;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
	padding: 40px 2.5rem;
	transition: 0.2s ease;
 }


 .logo {
 	width: 110px;
 	height: auto;
	transition: width 0.3s ease;
 }

 @media (max-width: 768px) {
	.logo.shrink {
	  width: 60px;
	}
  }


 /*MAIN MENU------*/
 .main-menu {
 	display: none;
 }


 .main-menu>.menu-main-container>ul {
 	display: flex;
 	width: 100%;
 	justify-content: space-between;
 	align-items: center;
 }

 .main-menu>.menu-main-container>ul {
 	justify-content: space-between;
 }

 .main-menu>.menu-main-container>ul>li {
 	margin-left: 2rem;
 }

 .main-menu>.menu-main-container>ul>li>a {
 	text-decoration: none;
 	font-weight: 700;
 	color: var(--main-color);
 	font-size: 1.3rem;
 	text-transform: uppercase;
 }


 .main-menu>.menu-main-container>ul>.current-menu-item>a {
 	color: var(--accent-color);
 }



 /*BURGER MENU------*/


 .burger1,
 .burger2,
 .burger3 {
 	height: 4px;
 	border-radius: 10px;
 	background-color: var(--main-color);
 	margin-bottom: 4px;
 	transform-origin: 0 0;
 	width: 30px;
 	transition: transform 0.3s;
 }

 .burger-menu.open .burger1 {
 	transform: rotate(45deg);
 }

 .burger-menu.open .burger2 {
 	opacity: 0;
 }

 .burger-menu.open .burger3 {
 	transform: rotate(-45deg) translateX(-6px) translateY(1px);
 }


 .open-menu-container {
 	position: fixed;
 	top: 0;
 	left: 0;
 	height: 100vh;
 	width: 0;
 	overflow: hidden;
 	background-color: #d7d7d7;
 	z-index: 90;
 	box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.2);
 }

 .open-menu {
 	height: 100vh;
 	display: flex;
 	color: var(--main-color);
	background-color: #42513e;
 	padding: 0 15px 0 15px;
 	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
 	text-align: left;
 	line-height: 1;
 }

 .menu-mobile_menu-container {
	width: 100vw;
 }

 .open-menu>.menu-mobile_menu-container>ul {
	width: 100%;
 	display: flex;
 	justify-content: center;
 	flex-direction: column;
 	align-items: center;
 }

 .open-menu>.menu-mobile_menu-container>ul>li {
 	margin-bottom: 2rem;
 	text-align: center;
 	position: relative;
 }

 .open-menu>.menu-mobile_menu-container>ul>li>a,
 .menu-item-has-children>ul>li>a {
 	text-decoration: none;
 	font-weight: 700;
 	color: var(--main-color);
 	font-size: 1.3rem;
 	text-transform: uppercase;
 }


 a {
 	transition: 0.5s;
 }





 /*BURGER END------*/



 @media (min-width: 1280px) {

 	.burger-menu {
 		display: none;
 	}

 	.main-menu {
 		display: block;
 	}

 	.logo {
 		width: 130px;
 		height: auto;
 	}

 }

 @media (max-width: 720px) {
	.text-align-center {
		text-align: center;
	}
 }


 /*--------HERO------*/

 .hero-container {
 	width: 100%;
 	margin: 0 auto;
 }





 /*-------------------------------------- FOOTER ----------------------------*/

 .footer-container {
 	width: 100%;
 	padding: 6rem 2rem 0 2rem;
 	background-color: #1e1e1e;
 }
 
 .footer-container a {
	color: white;
 }


 .footer-container>.container {
 	max-width: 1600px;
 	margin: 0 auto;
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
 	justify-content: flex-start;
 	padding-top: 2rem;
 	padding-bottom: 2rem;
 	font-weight: 600;
 	color: White;
 	font-size: 2rem;
 }

 .footer-title {
 	padding-bottom: 1rem;
 	margin-bottom: 1rem;
 	border-bottom: 1px solid #ffffff;
 }

 .social-icons {
	display: flex;
	gap: 1rem;
 }
 .ig-icon, .fb-icon {
	height: 50px;
	width: 50px;
 }

 .footer-address {
 	width: 100%;
 	padding-bottom: 1rem;
 	margin-bottom: 1rem;
 	border-bottom: 1px solid #ffffff;
 }

 .footer-address p {
 	color: White;
 }

 .footer-map {
 	width: 100%;
 }

 .footer-end {
 	text-align: center;
 	color: var(--main-color);
 	padding: 3rem 1rem;
	background-color: #1e1e1e;
 }

 .footer-end a {
 	color: #5b6f55;
 }

 @media screen and (min-width: 1200px) {
 	.footer-container>.container {
 		flex-direction: row;
 		justify-content: space-between;
 		align-items: center;
 	}

 	.footer-title,
 	.footer-address,
 	.footer-map {
 		width: 33.3%;
 		border-bottom: 0;
 		height: 100%;
 	}

 	.footer-title,
 	.footer-address {
 		margin-right: 2rem;
 		border-right: 1px solid #ffffff;
 		padding-right: 2rem;
		min-height: 10rem;
 	}
 }



/* HOME SLIDER OPTIONS ----------------------------*/


.slick-slide {
	height: auto !important;
 }

 .slick-prev:before, .slick-next:before {
	font-size: clamp(2.5rem, 3.5vw, 3.5rem) !important;
 }


.slick-dots li button::before {
	font-size: 16px !important;
}
.slick-next, .slick-prev {
	z-index: 100;
}

.sc-home-slider .slick-slide {
	padding-left: 0 !important;
    padding-right: 0 !important;
}
.sc-home-slider .slick-next {
	right: 40px !important;
	z-index: 100;
}

.sc-home-slider .slick-prev {
	left: 4px !important;
	z-index: 100;
}

.sc-home-slider .slick-next:before, .sc-home-slider [dir=rtl] .slick-prev:before {
    color: white !important;
}
.sc-home-slider .slick-prev:before {
	color: white !important;
}

.slick-next {
	right: 10px !important;
}


@media screen and (max-width: 768px) {
	.sc-home-slider .slick-next {
		right: 25px !important;
	}

	.slick-prev {
		left: -14px !important;
	}
}


/* GALLERY OPTIONS ----------------------------*/

/* Container della gallery */
.wp-block-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Spazio tra le immagini */
}

/* Stile per le immagini della gallery */
.wp-block-gallery .blocks-gallery-image,
.wp-block-gallery .blocks-gallery-item {
    flex: 1 1 calc(33.333% - 10px); /* 3 colonne con gap di 10px */
    box-sizing: border-box;
    overflow: hidden;
}

.wp-block-gallery img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease; /* Animazione al passaggio del mouse */
}

/* Effetto zoom al passaggio del mouse */
.wp-block-gallery img:hover {
    transform: scale(1.1);
}

/* Evitare problemi di scroll up con gsap */

html, body {
    scroll-behavior: auto !important;
}

/* CLASSI AGGIUNTIVE GUT */

@media (max-width: 768px) {
    .responsive-50 {
        max-width: 100% !important;
    }
	.button-100 {
		width: 100% !important
	}
	.column-reverse {
		flex-direction: column-reverse !important;
	}

	.wpforms-submit {
		width: 100% !important; /*PULSANTE WP FORM */
	}
}