/* Slideshow container */
.slideshow-container {
  background-color: var(--color-white-100);
  position: relative;
}

/* Hide the images by default */
.mySlides {
  display: none; /* Setel tinggi minimal untuk setiap slide */
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: var(--color-red-100);
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 5px 5px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 5px 0 0 5px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: var(--color-white-100);
}

/* Caption text
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
} */

/* Number text (1/3 etc)
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}*/

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 5px; /* Menjaga jarak antar dot */
  background-color: var(--color-dark-75);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: var(--color-red-100);
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 2s;
}

@keyframes fade {
  from {opacity: .7}
  to {opacity: 1}
}

.gridheadline{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.headline img{
	width: 100%;
}

/**
* ! style rules for sectionOne
*/

.sectionOne__right{
	justify-self: center;
	align-self: center;
}

.sectionOne__right video{
	width: 100%;
	height: auto;
}

.sectionOne__left--btn{
	align-self: start;
}

/**
* ! style rules for sectionTwo
*/

.sectionTwo{
	background-color: var(--color-m3ssroof-100);
	padding: 40px 0;
	display: grid;
	gap: 30px;
}

.sectionTwo__benefit{
	display: flex;
	gap: 20px;
}

[class ^='sectionTwo__benefit-1--']{
	padding: 10px 0;
	text-align: center;
}

.sectionTwo__benefit-2{
	display: grid;
	grid-template-columns: repeat(3, 1fr);	
	gap: 20px;
}

.sectionTwo__benefit-2 img{
	width: 20%;
	height: auto;
}

[class ^='sectionTwo__benefit-2-']{
	display: flex;
	gap: 10px;
}


[class ^='sectionTwo__benefit-text-2-']{
	display: flex;
	flex-direction: column;
}

/**
* ! style rules for sectionThree
*/

.sectionThree{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

[class ^='sectionThree__left--']{
	text-align: right;
}

.sectionThree__left,
.sectionThree__right{
	padding: 50px 20px;
}

.sectionThree__left{
	background-color: var(--color-dark-75);
}

.sectionThree__middle{
	padding: 50px 50px;
	background-color: var(--color-dark-25);
}
	
.sectionThree__middle-content{
	box-shadow: var(--shadow-1);
	border-radius: 5px;
	padding: 10px 10px;
	background-color: var(--color-white-100);
}
	
.sectionThree__right{
	background-color: var(--color-dark-25);
}

.sectionThree__left--label{
	font-family: var(--font-2);
	font-size: var(--label);
	letter-spacing: var(--ls);
	text-transform: uppercase;
	font-weight: 700;
}

.sectionThree__left--subtitle,
.sectionThree__right--subtitle{
	text-transform: capitalize;
	font-size: var(--h3);
	font-family: var(--font-2);
}

/**
* ! style rules for sectionFour
*/

.sectionFour{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background-color: var(--color-m3ssroof2-100);
	padding: 20px 20px;
	gap: 25px;
}

.sectionFour__nok,
.sectionFour__sekrup{
	padding: 30px 30px;
}

.sectionFour_nok--subtitle,
.sectionFour_sekrup--subtitle{
	font-family: var(--font-2);
	font-size: var(--label);
	color: var(--color-white-100);
}

.sectionFour_nok--image,
.sectionFour_sekrup--image{
	box-shadow: var(--shadow-1);
	border-radius: 5px;
	padding: 10px 10px;
	background-color: var(--color-white-100);
}

/**
* ! style rules for sectionFive
*/

.sectionFive{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	padding: 20px 20px;
	gap: 25px;
}

.sectionFive__left,
.sectionFive__middle,
.sectionFive__right{
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.sectionFive img{
	box-shadow: var(--shadow-1);
	border-radius: 5px;
	padding: 10px 10px;
	background-color: var(--color-white-100);
}

/**
* ! style rules for sectionSix
*/

.sectionSix{
	width: 100%;
	background-color: var(--color-m3ssroof-100);
	padding: 50px 125px;
}

.sectionSix,
.sectionSix__right--content{
	display: flex;
	gap: 30px;
	text-align: center;
}

.sectionSix__left--content{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 5px;
	padding: 25px 0;
}

/**
* ! media queries are here
*/

@media (max-width: 1200px){	
	.sectionTwo__benefit-2{
		grid-template-columns: repeat(2, 1fr);	
		gap: 20px;
	}

	.sectionThree__middle{
		padding: 40px 40px;
	}

	.sectionThree__left,
	.sectionThree__right{
		padding: 20px 20px;
	}

	.sectionFour__nok,
	.sectionFour__sekrup{
		padding: 20px 20px;
	}
	
	.sectionSix{
		padding: 25px 75px;
	}
}
	
@media (max-width: 1024px){
	.sectionThree__middle{
		padding: 30px 30px;
	}
	
	.sectionThree__left--subtitle,
	.sectionThree__right--subtitle{
		font-size: var(--h5);
	}
	
	.sectionThree__left--label{
		font-size: var(--h7);
		font-weight: 700;
	}
	
	.sectionFour__nok,
	.sectionFour__sekrup{
		padding: 10px 10px;
	}
}

@media (max-width: 768px){
	.gridheadline{
		grid-template-columns: repeat(1, 1fr);
	}

	.sectionTwo__benefit{
		flex-direction: column;
		gap: 20px;
	}
	
	[class ^='sectionTwo__benefit-1--']{
		padding: 0 0;
	}
	
	.sectionThree{
		grid-template-columns: repeat(2, 1fr);
	}
	
	.sectionThree__middle{
		padding: 20px 20px;
	}
	
	.sectionThree__left,
	.sectionThree__right{
		padding: 20px 20px;
	}

	.sectionOne__right,
	.sectionThree__middle,
	.headline1__right{
		order: 0;
	}
	
	.sectionOne__left,
	.sectionThree__right,
	.headline1__left{
		order: 1;
	}
	
	.sectionThree__left{
		order: 2;
		grid-column: 1 / span 2;
	}
	
	[class ^='sectionThree__left--']{
		text-align: left;
	}
	
	.sectionThree__left--label{
		font-size: var(--h7);
		font-weight: 700;
	}

	.sectionFour{
		grid-template-columns: repeat(2, 1fr);
	}
	
	.sectionFive{
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.sectionFive__left,
	.sectionFive__middle,
	.sectionFive__right{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}
	
	.sectionSix{
		padding: 15px 50px;
	}
	
	.sectionSix__right--content{
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
}

@media (max-width: 568px){
	.sectionTwo__benefit-2{
		grid-template-columns: repeat(1, 1fr);	
		gap: 20px;
	}
		
	.sectionThree__left--subtitle,
	.sectionThree__right--subtitle{
		font-size: var(--h6);
	}
	
	.sectionThree__left--label{
		font-size: var(--h8);
		font-weight: 700;
	}
	
	.sectionSix{
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
}