/*This line sets the margin of all elements on the webpage to 0 pixels. The asterisk (*) is a wildcard selector that targets all elements.*/
*{
  margin: 0px;
  font-family: 'Courgette';
}

/**** carousel 
This block of code applies styles to elements with the class "carousel-item". 
It centers the content horizontally and vertically within these elements and adds 10 pixels of padding at the top.
***/
.aligneCar1 {
  justify-content: center;
  text-align: center;
  padding-top: 10px;
}

.btn{
  background-color: #ffc3f3;
  color: black;
}

/**** font awsom no line under the trolley
This code targets elements with the class "fa-regular," which likely represents Font Awesome icons in a regular style. 
It removes text decoration (typically underlines) from these icons.
****/
.fa-regular{
  text-decoration: none;
}

/**** counting numbers ***/

/* .fontA class defines the font style for text elements with this class. */
.fontA {
  font-family: 'Pinyon Script'; /* It sets the font family to 'Pinyon Script'. */
  font-size: 35px; /* It sets the font size to 35 pixels. */
}

/* .value class defines the font style for text elements with this class. */
.value {
  font-size: 40px; /* It sets the font size to 40 pixels. */
  color: black; /* It sets the text color to a shade of pink (#fc56d8). */
}

/*** background image line vernis ***/
/* .backimg class defines the background style for elements with this class. */
.backimg {
  background-image: url(../image/verniLINE.jpg); /* It sets the background image. */
  background-repeat: no-repeat; /* It prevents the background image from repeating. */
  background-size: cover; /* It scales the background image to cover the entire element. */
  background-position: center; /* It centers the background image. */
  width: 100%; /* It sets the width to 100% of the element. */
  height: auto; /* It automatically adjusts the height to maintain the aspect ratio. */
  -webkit-mask-image: linear-gradient(to bottom, blue, rgba(0, 0, 255, 0.9), transparent);
  mask-image: linear-gradient(to bottom, blue, rgba(0, 0, 255, 0.9), transparent);
  /* These lines apply a gradient mask to the background image. */
}

/* .content class defines the style for elements with this class. */
.content {
  width: 350px; /* It sets the width to 350 pixels. */
  height: 320px; /* It sets the height to 320 pixels. */
}

/*   carousel size image */
.sizeimg{
  width: 500px;
  height: 400px;
}



/*** rainbow header with splash pic ***/
/* .rainbow class defines the style for elements with this class. */
.rainbow h4 {
  font-family: 'Pinyon Script'; /* It sets the font family to 'Pinyon Script'. */
  text-align: center; /* It centers the text horizontally. */
  font-size: 70px; /* It sets the font size to 80 pixels. */
  color: rgba(255, 255, 255, .1); /* It sets the text color with transparency. */
  background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
  /* It creates a rainbow-colored gradient background. */
  background-repeat: repeat-x; /* It repeats the background horizontally. */
  -webkit-background-clip: text; /* It clips the text to the background. */
  animation-name: colorchange; /* It specifies the animation name. */
  animation-duration: 5s; /* It sets the duration of the animation. */
  animation-iteration-count: infinite; /* It makes the animation repeat infinitely. */
  animation-timing-function: linear; /* It specifies the timing function for the animation. */
  padding-bottom: 15px; /* It adds some space below the text. */
}

/* Keyframes animation called 'colorchange' for the .rainbow class. */
@keyframes colorchange {
  0% {
    background-position: right 0px bottom 0px;
  }
  100% {
    background-position: right 10em bottom 0px;
  }
}

/* .content1 class defines the style for elements with this class. */
.content5 {
  justify-content: center; /* It centers the content horizontally. */
  width: 100%; /* It sets the width to 100% of the element. */
}

/****** image 3 description UV GEL RESINE TATOO**********/

/* .imggel class defines the style for elements with this class. */
.imggel {
  display: flex; /* It uses the Flexbox layout model. */
  width: 100%; /* It sets the width to 100% of the element. */
  height: 350px; /* It sets the height to 350 pixels. */
  margin-bottom: 20px; /* It adds margin space at the bottom. */
  margin-top: 15px; /* It adds margin space at the top. */
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

/* Zoom In imggel ********/
.imggel:hover{
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}

/****** image 3 description UV GEL RESINE TATOO**********/
.imggel1 {
  display: flex; /* It uses the Flexbox layout model. */
  width: 100%; /* It sets the width to 100% of the element. */
  height: 350px; /* It sets the height to 350 pixels. */
  margin-bottom: 20px; /* It adds margin space at the bottom. */
  margin-top: 15px; /* It adds margin space at the top. */
	-webkit-transform: rotate(0) scale(1);
	transform: rotate(0) scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

/* Zoom In imggel ********/
.imggel1:hover{
	-webkit-transform: rotate(15deg) scale(0.8);
	transform: rotate(15deg) scale(0.8);
}


/* .sp1 class defines the style for elements with this class. */
.sp1 {
  float: left; /* It makes the element float to the left. */
  width: 40px; /* It sets the width to 40 pixels. */
  height: 45px; /* It sets the height to 45 pixels. */
  font-size: 45px; /* It sets the font size to 45 pixels. */
  font-family: 'Pinyon Script'; /* It sets the font family to 'Pinyon Script'. */
}

/* .parag class defines the style for elements with this class. */
.parag {
  text-align: justify; /* It justifies the text within elements. */
  font-size: 20px; /* It sets the font size to 20 pixels. */
}

/* Style for h1 elements. */
h1 {
  font-family: 'Pinyon Script'; /* It sets the font family to 'Pinyon Script'. */
}