/* Impostazioni generali */
		
	*{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html {
        scroll-behavior: smooth;
    }
	
    body {
    	color: white;
	}

	::-webkit-scrollbar {
		width: 0px; /* Larghezza della barra di scorrimento */
	}
		
	::-webkit-scrollbar-thumb {
		background: rgba(0, 0, 0, 0); /* Colore della barra di scorrimento */
		border-radius: 0px; /* Angoli arrotondati */
	}
		
	::-webkit-scrollbar-track {
		background: rgba(0, 0, 0, 0); /* Trasparente */
	}

/* Colori */

	:root {

		/** Base colors */
		--clr-dark-a0: #000000;
		--clr-light-a0: #ffffff;

		/** Theme primary colors */
		--clr-pa0: #15a02c;
		--clr-pa10: #42ab45;
		--clr-pa20: #5fb65d;
		--clr-pa30: #78c173;
		--clr-pa40: #90cb8a;
		--clr-pa50: #a6d6a1;

		/** Theme surface colors */
		--clr-sa0: #121212;
		--clr-sa10: #282828;
		--clr-sa20: #3f3f3f;
		--clr-sa30: #575757;
		--clr-sa40: #717171;
		--clr-sa50: #8b8b8b;

		/** Theme tonal surface colors */
		--clr-sta0: #232520;
		--clr-sta10: #383935;
		--clr-sta20: #4d4f4b;
		--clr-sta30: #646662;
		--clr-sta40: #7c7d7a;
		--clr-st50: #959693;
	}		
	
/* Fonts */

	/* Logo Bitscloud.it */
				
		.logo {
			font-family: "Montserrat", sans-serif;
			font-weight: 550;
			font-size: 30px;
			line-height: 34.4px;
			color: var(--clr-light-a0);
			text-decoration: none;
		}

	.font-01{
		font-family: DM Sans, Roboto, -apple-system, Segoe UI, sans-serif;
		font-size: 50px;
		color: var(--clr-light-a0);
		font-weight: 700;
		text-decoration: none;
	}
		
	.hs0 {
		font-family: "Poppins", sans-serif;
	    font-size: 80px;
        font-weight: 700;
        font-style: normal;
      	color: var(--clr-light-a0);
		margin-top: 0px;
		margin-bottom: 0px;
		text-align: center;
		line-height: 80px;
    }	
		
	.hs1 {
        font-family: "Poppins", sans-serif;
	    font-size: 45px;
        font-weight: 700;
        font-style: normal;
      	color: var(--clr-light-a0);
		text-align: center;
    }
		
	.hs15 {
		font-family: "Poppins", sans-serif;
	    font-size: 35px;
        font-weight: 700;
        font-style: normal;
       	color: var(--clr-light-a0);
		text-align: center;
		margin-top: 0px;
		line-height: 20px;
		transition: all .3s ease;
		text-decoration: none;
    }
		
	.hs2 {
		font-family: "Poppins", sans-serif;
	    font-size: 30px;
        font-weight: 700;
        font-style: normal;
       	color: var(--clr-light-a0);
		text-align: center;
		margin-top: 0px;
		line-height: 20px;
		transition: all .3s ease;
		text-decoration: none;
    }
		
	.heading-style-2-marginbottom5px {
		font-family: "Poppins", sans-serif;
	    font-size: 30px;
        font-weight: 700;
        font-style: normal;
	    color: #403d39;
		text-align: center;
		margin-top: 0px;
		line-height: 20px;
		transition: all .3s ease;
		text-decoration: none;
    }
		
	.hs25 {
		font-family: "Poppins", sans-serif;
	    font-size: 28px;
        font-weight: 700;
        font-style: normal;
	    color: #403d39;
		text-align: center;
		margin-top: 0px;
		line-height: 20px;
    }
		
	.hs3 {
		font-family: "Poppins", sans-serif;
	    font-size: 20px;
        font-weight: 700;
        font-style: normal;
      	color: var(--clr-light-a0);
		text-align: center;
		margin-top: 0px;
		line-height: 20px;
		text-decoration: none;
		transition: all .3s ease;
    }
		
	.heading-style-3-hide {
		font-family: "Poppins", sans-serif;
		font-size: 20px;
		font-weight: 700;
		font-style: normal;
		color: #403d39;
		text-align: center;
		margin-top: 0px;
		line-height: 20px;
		text-decoration: none;
		transition: all .3s ease;
	}
		
	.heading-style-3-decorated {
		font-family: "Poppins", sans-serif;
		font-size: 20px;
		font-weight: 700;
		font-style: normal;
		color: #403d39;
		text-align: center;
		margin-top: 0px;
		line-height: 20px;
		transition: all .3s ease;
		text-decoration: underline;
		text-decoration-color: #eb5e28;
	}
		
	.hs4 {
		font-family: "Poppins", sans-serif;
	    font-size: 15px;
        font-weight: 700;
        font-style: normal;
     	color: var(--clr-light-a0);
		text-align: center;
		margin-top: 0px;
		line-height: 20px;
		text-decoration: none;
		transition: all .3s ease;
    }     
		
	.heading-style-4-hide {
		font-family: "Poppins", sans-serif;
	    font-size: 15px;
        font-weight: 700;
        font-style: normal;
	    color: #403d39;
		text-align: center;
		margin-top: 10px;
		line-height: 20px;
		text-decoration: none;
    } 

	.heading-style-4-decorated {
		font-family: "Poppins", sans-serif;
	    font-size: 15px;
        font-weight: 700;
        font-style: normal;
	    color: #403d39;
		text-align: center;
		margin-top: 10px;
		line-height: 20px;
		text-decoration: underline;
		text-decoration-color: #403d39;
    } 

	.heading-style-4-decorated-in-arancio {
		font-family: "Poppins", sans-serif;
	    font-size: 15px;
        font-weight: 700;
        font-style: normal;
	    color: #403d39;
		text-align: center;
		margin-top: 10px;
		line-height: 20px;
		text-decoration: underline;
		text-decoration-color: #eb5e28;
	} 

	.heading-style-4-decorated-arancio {
		font-family: "Poppins", sans-serif;
	    font-size: 15px;
        font-weight: 700;
        font-style: normal;
		color: #eb5e28;
		text-align: center;
		margin-top: 10px;
		line-height: 20px;
		text-decoration: underline;
		text-decoration-color: #eb5e28;
    } 

	.hl{
		background-color: var(--clr-light-a0);
		padding-right: 2px;
		padding-left: 2px;
	}

	.r{
		font-family: "DM Sans", sans-serif;
		font-weight: 700;
	}	

	.bk {
		position: relative;
		display: inline-block; /* oppure block, a seconda del contenitore */
		z-index: 0;
	}

	.bk::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 150%;
		height: 150%;
		transform: translate(-50%, -50%);
		background: radial-gradient(circle, rgb(51, 48, 48), transparent);
		filter: blur(15px);
		opacity: 0.8;
		pointer-events: none;
		z-index: -1;
	}
	
    .arancio {
	    color: #eb5e28;
		text-decoration: none;
    }

	.verde {
		color: #008f39;
		text-decoration: none;
	}

	.arancio-hover {
		transition: all .3s ease;
	}

	.arancio-hover:hover {
		color: #eb5e28;
		color: var(--clr-pa30);
	}

	.decoration-color-arancio {
		text-decoration-color: #eb5e28;
	}
		
    .heading {
		height: 60px;
		margin-top: 182px;
	}

/* Flex rules */
	
	.flex-center{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.flex-sb{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flex-start{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.flex-end{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	
	.flex-sx {
		display: flex;
		justify-content: left;
		align-items: flex-start;
		flex-direction: column;
	}

	.flex-dx {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		flex-direction: column;
	}
	
/* Header */

	header {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 1000;
        display: flex;
		background-color: var(--clr-sa0);
     	/* background-color: #ccc5b9; */
        justify-content: space-between;
        align-items: center;
        padding: 10px 2%;
		border-bottom: solid 1px #403d39;
    }

	.links{			
		position: sticky;
		top: 81;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 30px;
		padding: 5px 5%;
		background-color: var(--clr-sa20);
	}

	.menu01{
		font-family: "Montserrat", sans-serif;
		font-weight: 550;
		font-size: 12px;
		color: var(--clr-light-a0);
		text-decoration: none;
		transition: all .3s ease;
		list-style: none;
		margin-left: 0.8%;
		margin-right: 0.8%;
	}

	.menu01:hover {
		color: var(--clr-pa30);
	}

	.menu li {
		display: inline-block;
		padding: 20 20px;
	}	

/* Menu centrale header */
				
	.menu a {
		font-family: "Montserrat", sans-serif;
		font-weight: 550;
		font-size: 18px;
		color: var(--clr-light-a0);
		text-decoration: none;
		transition: all .3s ease;
		list-style: none;
	}
				
	.menu li {
		display: inline-block;
		padding: 20 20px;
	}	
	
	.menu a:hover {
		color: var(--clr-pa30);
		padding: 20px 5px;
	}
		
/* Pulsante login */
		
	.div-login{
		display:flex;
		justify-content: center;	
		width: 160px;
		height: 100%;
	}

	.login-button-class {
		font-family: "Montserrat", sans-serif;	
		font-weight: 800;
		font-size: 18px;
		height: 50px;
		padding: 0px 35px;
		background-color: var(--clr-light-a0);
		border: none;
		border-radius: 50px;
		border-color: var(--clr-light-a0);
		cursor: pointer;
		transition: all .3s ease;
	}

	.text-button-class {
		font-family: "Montserrat", sans-serif;
		font-weight: 800;
		font-size: 18px;
		color: var(--clr-pa0);
		text-decoration: none;
	}	
	
	.login-button-class:hover {
		background: var(--clr-pa30);
		color: var(--clr-light-a0);
		padding: 0px 45px;
					
		.text-button-class {
			color: var(--clr-light-a0);
		}
					
		.plans-button-text-class {
			color: var(--clr-light-a0);		
		}					
	} 

/* INDEX */

	.text{
		padding: 3%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;	
	}

	.indexbanner{
		padding: 3%;
		height: 35vh;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 5%;
		padding-right: 5%;
		align-items: center;
		background-color: var(--clr-pa40);
	}

	.reviews{
		width: 100vw;
		padding: 5%;
	}						

	.review{
		padding: 1%;
		padding-top: 1.5%;
		width: 25%;
		display: flex;
		justify-content: left;
		align-items: flex-start;
		flex-direction: column;
		border: solid 5px var(--clr-pa30);
		z-index: 8;
	}
	
	.carosello {
		margin-top: 20px;
		display: flex;
		gap: 8px;
		overflow-x: auto;
		height: 20%;
		width: 100%;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth; /* per animazione fluida */
	}

	.carosello img {
		scroll-snap-align: start;
		height: 140px;		
		object-fit: cover;
	}

	.arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		background-color: rgba(0,0,0,0.5);
		color: white;
		border: none;
		padding: 10px;
		cursor: pointer;
		font-size: 18px;
	}

	.arrow.left {
		left: 10px;
		z-index: 2000;
	}

	.arrow.right {
		right: 10px;
		z-index: 2000;
	}

	#media {
		display: none;
	}

	#cmedia{
		display: none;
	}

	.cmedia{
		position: fixed;
		top: 20vh;
		left: 0;
		height: 60vh;
		width: 100vw;


		display: flex;
		align-items: center;
		justify-content: center;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth; /* per animazione fluida */
		scroll-snap-align: start;
		object-fit: cover;
		background-color: rgba(0,0,0,0.8);
		overflow-x: auto;		
		gap: 8px;
		z-index: 1000;

	}

	.media {
		display: flex;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth; /* per animazione fluida */
		scroll-snap-align: start;
		object-fit: cover;
		position: absolute;
		top: 0;
		left: 0px;
		height: 60vh;
		width: 100vw;
		align-items: center;
		overflow-x: auto;		
		gap: 25px;
		z-index: 1000;
		position: relative; /* Cambia da absolute */
		box-sizing: border-box;
		box-sizing: border-box;

	}

	.media img {
		scroll-snap-align: start;
		height: 55%;
		object-fit: cover;

			
		flex-shrink: 0;
	}

	.cmedia img {
		scroll-snap-align: start;
		object-fit: cover;
		height: 70%;
	}

	.closebtn-media{
		width: 5vh;
		background: none;
		border: none;
		height: 50px;
		transition: all .3s ease;

		
		position: absolute;
		top: 2.5vh;
		right: 1.5vw;
	}	

	.x{
		height: 1vh;
		transition: all .3s ease;
	}
	
	.closebtn-media:hover{
		.x{
			height: 3.5vh;
		}
	}


/* Footer */

	.footer {
		background-color: var(--clr-sa0);
		height: 180px;
		margin-top: 311px;
		border: border-box;
	}
			
	.text-style-footer {
		margin-top: 0px;
		font-family: inherit;
        color: var(--clr-light-a0);
        font-size: 20px;
		font-weight: 500;
        text-align: center;
        line-height: 20px;
		text-decoration: none;
    }	
		
	.copyright {
		margin-top: 15px;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 10px;
		font-style: inherit;
		font-size: 75%;
		text-align: center;
	}



















	/* FINE ROBA NUOVA - INIZIO SCARTOFFIE */

	/* Impostazioni Flexbox generali - - - - - - - - - - */
	
	/* Sidebar - - - - - - - - - - */
			
		.hamburger {
			display: none;
			font-size: 30px;
			cursor: pointer;
		}

		.sidebar {
			height: 100%;
			width: 0px;
			position: fixed;
			top: 0;
			left: 0;
			background-color: #111;
			overflow-x: hidden;
			transition: 0.5s;
		}	

		.sidebar-menu-class {
			margin-left: 90px;
			font-family: inherit;
			color: #fffcf2;
			font-size: 36px;
			font-weight: 500;
			text-align: left;
			text-decoration: none;
			display: block;
			transition: 0.3s;
			line-height: 56px;
		} 
	
		.closebtn {
			color: #fffcf2;
			position: absolute;
			top: 30px;
			right: 40px;
			font-size: 50px;
			text-decoration: none;
		}

	/* Cookie banner - - - - - - - - - - */
	
		#cookie-banner {
			position: fixed;
			padding-top: 15px;
			padding-left: 10px;
            bottom: 30px;
			right: 30px;
			border-radius: 35px;
            width: 800px;
			height: 170px;
            background-color: #fffcf2;
            border: 2px solid #403d39;
			display: none;
			box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.7); /* Ombra leggera */
		}

		.cookie-button {
			position: absolute;
			bottom: 10px;
			right: 10px;
			font-family: "Montserrat", sans-serif;	
			font-weight: 800;
			font-size: 18px;
			height: 40px;
			color: #eb5e28;
			padding: 0px 40px;
			background-color: #fffcf2;
			border-radius: 20px;
			border: solid 2px #eb5e28;
			cursor: pointer;
			transition: all .3s ease;
		}

		.cookie-button:hover {
			color: #fffcf2;
			background-color: #eb5e28;
			border: solid 2px #eb5e28;
		}