/* styles.css */

@font-face {
  font-family: Delio; /* set name */
  src: url(fonts/Delio.otf); /* url of the font */
}

@font-face {
  font-family: Cringe; /* set name */
  src: url(fonts/BNCringeSans-Light.otf); /* url of the font */
}


html {
	scroll-behavior: smooth;
}

/* Start code  */
	body {
		display:block;	
		margin: 0px;
		padding: 0px;
		background: #1c1c1c;
		color: white;
		text-align: center;
		justify-content: center;
		font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}

	a:link {
		color: #ffffff; /* default state */
		text-decoration: none;
		font-weight: bold;
}

	a:visited {
		color:#d558b9 ;
		text-decoration: none;
		font-weight: bold;
}


/* Header code  */
	.fixed-header {
		position: fixed;
		top: 0;
		left: 0;
		margin: 0;
		padding: 0;
		width: 100%;
		height: 80px; 
		z-index: 1000; 
		background-color: rgba(0, 0, 0, 0);
		pointer-events: auto;
		overflow: hidden;
		box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
	}

/* main containers code  */


	/* add id="header" to div to make text a header */
	#header {
		font-size: 30px; 
		font-weight: bold;
		text-align: center;
		color: rgb(0, 0, 0);
		margin-top: 90px;
	}
	
	.hero {
		margin: 0px;
		width: 100%;
		padding-top: 0; 
		padding-bottom: 0; 
		padding-left: 0; 
		padding-right: 0; 
		height: auto;
		background-image: linear-gradient( to bottom, rgba(255, 255, 255, 0.151), rgba(44, 44, 44, 0.747)), url("images/Owners/SandV2.png");		
		background-color: rgb(17, 8, 49);
		background-repeat: no-repeat;
		background-size: contain;
		background-clip: border-box;
		background-position: center top;
		background-attachment: fixed;
	}	

	#topPadding{
		padding-top: 30%;
	}

	#topMidPadding{
		padding-top: 20%;
	}
	.linear-text-gradient {
		background: linear-gradient(to  right, #00e1d6, #ff55a0);
		-webkit-background-clip: text;
		margin: auto 20px;
		padding: 0 px 50px;
		font-size: clamp(1em, 30vw, 2em);
		
		font-family: Delio;
		background-clip: text;
		color: transparent;

	}

	.transparent {
		display: flex;  
		flex-direction: column; 
		width: 100%;
		height: auto;
		margin: 0px;
		padding: 0px;
		justify-content: center; 
		align-items: top;
		background-color: transparent;
	}
	
	.transparentText {
		display: flex;
		flex-flow: column wrap;
		width: 90%;
		height: min-content;
		margin: 0px auto 0px auto;
		padding: 0;
		justify-content: center;
		align-items: center;
		font-size: clamp(1rem, 2vw, 2rem);
		text-align: center;
		color: rgb(255, 255, 255); /* font color */
		background-color: #32323100;
	}


	.containerBase {
		display: flex;  
		flex-direction: column; 
		flex-wrap: nowrap;
		flex: 10 10 100px;
		width: 90%;
		margin: 5px auto;
		justify-content: center;
		align-items: center;
		background-color: transparent;
	}


	.containerBaseServices {
		display: flex;  
		flex-direction: row; 
		flex-wrap: wrap;
		flex: 10 10 100px;
		width: 100%;
		margin: 5px auto;
		justify-content: center;
		align-items: center;
		background-color: transparent;
	}
	
	.drawer {
		display: flex;  
		flex-direction: row; 
		flex-wrap: nowrap;
		width: 100%;
		height: auto;
		margin: 5px 2px;
		padding: 0px;
		justify-content: space-evenly;
		align-items: stretch;
		background-color: transparent;
	}
	
	.button{
		width: 90%;
		height: auto;
		margin: 5px auto 20px auto;
		padding: 3px 10px;
		color: white;
		text-align:center;
		font-size: clamp(0.7rem, 3vw, 1.2rem);
		align-items: center;
		border-radius: 40px;
		border: 3px solid #ffffff;
	}

		#grey {
			font-size: calc(100% * 1.2vw);
			background-color: inherit;
		}
		
		#color {
			font-size: calc(100% * 3vw);
			background-image: linear-gradient(to bottom right, #febd62, #d558b9);
			font-weight: bold;
		}


	.containerDark {
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row; 
		flex: 10 10 100px;
		width: 85%;
		height: min-content;
		margin: 3%;
		border-radius: 20px;
		padding: 0px;
		justify-content:space-evenly;
		align-items: center;
		background-color: #323231;
	}

	.containerShop {
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row; 
		flex: 10 10 100px;
		width: 85%;
		height: min-content;
		margin: 0% 3% 0% 3%;
		padding: 0px;
		justify-content:space-evenly;
		align-items: center;
		background-color: #323231;
	}

	.pdf-viewer {
		width: 100%;
		height: 600px;
		border: none;
	}

	.containerServices {
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row; 
		flex: 10 10 500px;
		width: 65%;
		min-height: 600px;
		height: auto;
		margin: 10px;
		border-radius: 20px;
		padding: 2%;
		justify-content: space-between;
		align-items: center;
		background-color: #323231;
	}

	.containerCard {
		display: flex;
		flex-wrap: nowrap;
		height: auto;
		width: auto;
		flex-direction: column; 
		flex: 10 10 100px;
		margin: 6px;
		border-radius: 25px;
		padding: 0px;
		justify-content:space-evenly;
		align-items: center;
		background-color: #323231;
	}

	.containerInfo {  
		width: 85%;
		height: auto;
		margin: 0 auto;
		padding: 1.5vw;
		border-radius: 25px;
		font-size: clamp(1rem, 2vw, 2rem);
		color: rgb(240, 240, 240); /* font color */
		line-height: 1.5;
		background-color: rgba(0, 0, 0, 0);
	}
	.blogFrame{	
		border-radius: 20px; 
		border: 5px outset #ddb635; 
		margin-bottom: 30px; 
		font-size: clamp(1rem, 2vw, 2rem);
		max-width: 800px; 
		min-width: 300px
	}
	#smaller {
		font-size: clamp(0.7rem, 2vw, 2rem);
	}

	#vertical {
		margin: 1vw;
		padding: 0;
		flex-direction: column; 

	}

	#contact {  
		display: flex;
		flex-direction: column;
		width: 80%;
		padding: 10px;
		margin: 10px;
		font-size: calc(60% + 0.7vw);
		align-items: center;
		justify-content: center;
		line-height: 1.5;
	}

	#servicesText {  
		font-size: clamp(1rem, 1vw, 2rem);
		padding: 10px 20px 10px 0px ;
		flex-grow: 4;
		margin: 10px 20;
		width: 80%;
		align-items: center;
		height: auto;
		justify-content: center;
		text-align: left;
		color: rgb(240, 240, 240); /* font color */
	}

	.containerAbout {  
		display: flex;
		flex-direction: column;
		flex-grow: 4;
		background-color: #323231;
		width: 80%;
		padding: 10px 30px;
		margin: 10px;
		font-size: clamp(1rem, 1.5vw, 2rem);
		align-items: center;
		justify-content: center;
		color: rgb(240, 240, 240); /* font color */
		line-height: 1.8;
	}

	.containerTitle {  
		width: 70%;
		height: auto;  
		border-left: 5px solid #ffb326;
		border-right: 5px solid #ffb326;
		border-radius: 25px;
		margin: 10px auto;
		padding: 10px;
		text-align: center;
		font-size: 1.3rem; 
		line-height: 1.5;
		overflow: hidden; 
		color: black;
		background-color: rgba(255,255,255,0.5);
	}

	.grid-wrapper {
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;
		flex-wrap:nowrap;
		flex-direction: row;
	}

	#wrapAbout {
		width: 80%;
		height: auto;
		display: flex;
		align-items: center;
		flex-wrap:nowrap;
		flex-direction: column;
	}

	#left {
		align-items: left;
		text-align:left;
		padding: 5px;
	}
	.containerFoot {      
		width: 100%;
		height: 65px;  
		padding: 0px;
		margin-top: 20px;
		margin-left: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		overflow: hidden;
		text-align: center;
	}

	/* image frame for general use*/
	.imageFrame {
		height: 500px;
		margin: 20px 20px;
		overflow: hidden;
		border: 3px solid #000;
		border-radius: 20px;
	}

	.imageFrame img {
		height: auto;
		width: auto;
		object-position: center;
	}

	.imageFrameAbout {
		width: 25vw;
		height: auto;
		margin: 1vw 0;
		padding: 0;
		overflow: hidden;
		border: 2px solid #ffffff;
		border-radius: 10px;
	}

	.imageFrameAbout img {
		display: block;
		height: 100%;
		width: 100%;
		position:relative;
	}
	/* image frame without borders for general use*/
	.imageNoFrame {
		aspect-ratio: auto;
		height: auto;
		width: 70%;
		max-width: 800px;
		padding: 20px 0 0 0;
		margin: 0;
		overflow: hidden;
	}
	
	.imageShop {
		width: 300px;
		height: 200px;
		overflow: hidden;
		position: relative;
		margin: 3%;
		border-radius: 30px;
	}

	.imageShop img {
		width: 100%;           /* zoom in slightly */
		height: auto;
		object-fit: cover;     /* ensures nice cropping */
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

	}

	#Layer_1 {
		height: auto;
		width: 15vw;
		fill: white;
	}

	#servicesImage {
		width: 70vw;
		height: auto;
		margin: auto;
		padding: 0;
	}

	/* for contact page*/
	.LogoimageFrame {
		width: auto;
		height: auto;
		margin: auto;
		padding: 0;
		overflow: hidden;
	}

	.LogoimageFrame img {
		width: 90px;
		height: 100%;
	}	


/* specific for slider images */
	.slider-container {
		aspect-ratio: 1 / 1;
		position: relative;	
		width: 40vw;
		height: auto;
		border-radius: 20px;
		min-width: 150px;
		overflow: hidden;
		user-select: none; /* prevents accidental selection and highlighting inside this container */
		-webkit-user-select: none; /* specific to Safari */
		-ms-user-select: none;     /* specific to IE/Edge */
	}

	/* Before and after images */
	.slider-container img {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		cursor: ew-resize;
		object-fit: cover;
	}

	.slider-container .after-image {
		clip-path: inset(0 0 0 50%); /* Initially show half of the after image */
	}

	/* Slider handle */
	.slider-handle {
		position: absolute;
		top: 0;
		left: 50%; /* end up at 100% */
		width: 1px;
		height: 100%;
		background-color: #000;
		z-index: 2;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	}

	.slider-handle::before {
		content: '';
		position: absolute;
		top: 50%;
		left: -18px;
		width: 40px;
		height: 40px;
		background-color: RGB(27, 217, 157);
		border-radius: 50%;
		transform: translateY(-50%);
	}

	.slider-container.animate .slider-handle {
		animation: sliderHandleHint 2s ease-in-out;

	}

	.slider-container.animate .after-image {
		animation: sliderClipHint 2s ease-in-out;
	}

/* Slider animation code */
	@keyframes sliderHandleHint {
		0%   { left: 90%; }
		50%  { left: 10%; }
		100% { left: 50%; }
	}

	@keyframes sliderClipHint {
		0%   { clip-path: inset(0 0 0 90%); }
		50%  { clip-path: inset(0 0 0 10%); }
		100% { clip-path: inset(0 0 0 50%); }
	}

/* Media query for screens narrower than 1000px  */
	@media (max-width: 1000px) {


		.containerDark {
			flex-direction: column; 
			width: calc(15px + 80vw);
			height: auto;
			margin: 2%;
		}

		.containerCard {
			flex-direction: column; 
		}

		.containerInfo {  
			text-align: center;
			padding: 5px 2px;
			margin: 2px;
			max-width: 95%;
		}

		.slider-container {
			width: calc(15px + 80vw);
			height: auto;
			}

		.hero {
			background-position-y: 80px;
		}

		.imageFrameAbout {
			width: 45%;
		}

		#vertical{
			flex-direction: row; 
		}

		#servicesText {  
			padding: 5px;
		}


		#services {  
			padding: 2%;
			width: 98%;
		}	
		
		
		#topPadding{
			padding-top: 50%;
		}
		
		.containerServices {
			min-height: 200px;
		}
	}