/*installation*/
#installation {
    background-image: url(../images/homepage/background_image.png);
    background-size: contain;
    height: 100%px;
    padding-top: 65px;
}

#installation .servicess-bottomss {
	display:grid;
    grid-template-columns: ;
    grid-row-gap: 10%
	align-items: center;
	justify-content: center;
}
#installation .servicess-itemss {
	flex-basis: 80%;
	display: flex;
	justify-content:flex-start;
	flex-direction: column;
	padding: 20px;
	border-radius: 20px;
	background-image: url(../images/homepage/background_image.png);
	background-size: cover;
    margin-top: 0px;
	margin-left: 4%;
    margin-right: 5%;
	position: relative;
	z-index: 1;
	overflow: hidden;
    max-height: 2900px;
    min-height: 100px;
}
#installation .servicess-itemss::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
	opacity: .2;
	z-index: -1;
}
#installation .icon {
	height: 80px;
	width: 80px;
	margin-bottom: 20px;
}
#installation  h2 {
	font-size: 2.5rem;
	color: darkgoldenrod;
	margin-bottom: 10px;
	text-transform: uppercase;
}
#installation p {
	color: black;
	text-align: justify;
    font-size: 18px;
}

#installation li{
	color: white;
	text-align: left;
}

/*showroom*/
body  {
    background-image: url(../images/homepage/background_image.png);
    background-size: cover;
    position: absolute;
    z-index: -1;
}

.footer {
    margin-left: 250px;
}

h1 {
    font-size: 3rem;
    color: darkgoldenrod;
    font-family:cursive;
    text-align: center;
    margin-left: -25px;
}
.slidershow{
  width: 900px;
  height: 580px;
    margin-top: -130px;
    margin-left: 10px;
  overflow: hidden;
    position: relative;
}
.middle{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.navigation{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.bar{
  width: 8px;
    border-radius: 18px;
  height: 10px;
  border: 2.5px solid yellow;
  margin: 4.5px;
  cursor: pointer;
  transition: 0.6s;
}
.bar:hover{
  background: lightyellow;
}

input[name="r"]{
    position: absolute;
    visibility: hidden;
}

.slides{
  width: 4000%;
  height: 500px;
  display: flex;
}

.slide{
  width: 2.5%;
  transition: 0.6s;
}
.slide img{
  width: 100%;
  height: 100%;
}

#r1:checked ~ .s1{
  margin-left: 0;
}
#r2:checked ~ .s1{
  margin-left: -2.5%;
}
#r3:checked ~ .s1{
  margin-left: -5%;
}
#r4:checked ~ .s1{
  margin-left: -7.5%;
}
#r5:checked ~ .s1{
  margin-left: -10%;
}

#r6:checked ~ .s1{
  margin-left: -12.5%;
}
#r7:checked ~ .s1{
  margin-left: -15%;
}
#r8:checked ~ .s1{
  margin-left: -17.5%;
}

#r9:checked ~ .s1{
  margin-left: -20%;
}
#r10:checked ~ .s1{
  margin-left: -22.5%;
}

#r11:checked ~ .s1{
  margin-left: -25%;
}
#r12:checked ~ .s1{
  margin-left: -27.5%;
}
#r13:checked ~ .s1{
  margin-left: -30%;
}
#r14:checked ~ .s1{
  margin-left: -32.5%;
}
#r15:checked ~ .s1{
  margin-left: -35%;
}

#r16:checked ~ .s1{
  margin-left: -37.5%;
}
#r17:checked ~ .s1{
  margin-left: -40%;
}
#r18:checked ~ .s1{
  margin-left: -42.5%;
}

#r19:checked ~ .s1{
  margin-left: -45%;
}
#r20:checked ~ .s1{
  margin-left: -47.5%;
}

#r21:checked ~ .s1{
  margin-left: -50%;
}
#r22:checked ~ .s1{
  margin-left: -52.5%;
}
#r23:checked ~ .s1{
  margin-left: -55%;
}
#r24:checked ~ .s1{
  margin-left: -57.5%;
}
#r25:checked ~ .s1{
  margin-left: -60%;
}

#r26:checked ~ .s1{
  margin-left: -62.5%;
}
#r27:checked ~ .s1{
  margin-left: -65%;
}
#r28:checked ~ .s1{
  margin-left: -67.5%;
}

#r29:checked ~ .s1{
  margin-left: -70%;
}
#r30:checked ~ .s1{
  margin-left: -72.5%;
}

#r31:checked ~ .s1{
  margin-left: -75%;
}

#r32:checked ~ .s1{
  margin-left: -77.5%;
}

#r33:checked ~ .s1{
  margin-left: -80%;
}

#r34:checked ~ .s1{
  margin-left: -82.5%;
}
#r35:checked ~ .s1{
  margin-left: -85%;
}
#r36:checked ~ .s1{
  margin-left: -87.5%;
}
#r37:checked ~ .s1{
  margin-left: -90%;
}
#r38:checked ~ .s1{
  margin-left: -92.5%;
}
#r39:checked ~ .s1{
  margin-left: -95%;
}
#r40:checked ~ .s1{
  margin-left: -97.5%;
}


.slideshow2 {
    margin-top: 850px;
}
/*for standard*/
.slidershow1{
    margin-top: 430px;
    margin-left: 15px;
  width: 600px;
  height: 500px;
  overflow: hidden;
    position: absolute;
}
.slidershow1 .middle{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.slidershow1 .navigation{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.bar1{
  width: 8px;
    border-radius: 18px;
  height: 8px;
  border: 2px solid yellow;
  margin: 3.8px;
  cursor: pointer;
  transition: 0.4s;
}
.bar1:hover{
  background: yellow;
}

input[name="rr"]{
    position: absolute;
    visibility: hidden;
}

.slides1{
  width: 3000%;
  height: 100%;
  display: flex;
}

.slide1{
  width: 3.333333333333333%;
  transition: 0.6s;
}
.slide1 img{
  width: 100%;
  height: 100%;
}

#rr1:checked ~ .s1{
  margin-left: 0;
}
#rr2:checked ~ .s1{
  margin-left: -3.333%;
}
#rr3:checked ~ .s1{
  margin-left: -6.666%;
}
#rr4:checked ~ .s1{
  margin-left: -9.999%;
}
#rr5:checked ~ .s1{
  margin-left: -13.332%;
}

#rr6:checked ~ .s1{
  margin-left: -16.665%;
}
#rr7:checked ~ .s1{
  margin-left: -19.998%;
}
#rr8:checked ~ .s1{
  margin-left: -23.331%;
}

#rr9:checked ~ .s1{
  margin-left: -26.664%;
}

#rr10:checked ~ .s1{
  margin-left: -29.997%;
}


#rr11:checked ~ .s1{
  margin-left: -33.33%;
}
#rr12:checked ~ .s1{
  margin-left: -36.663%;
}
#rr13:checked ~ .s1{
  margin-left: -39.996%;
}
#rr14:checked ~ .s1{
  margin-left: -43.329%;
}
#rr15:checked ~ .s1{
  margin-left: -46.662%;
}

#rr16:checked ~ .s1{
  margin-left: -49.995%;
}
#rr17:checked ~ .s1{
  margin-left: -53.328%;
}
#rr18:checked ~ .s1{
  margin-left: -56.661%;
}

#rr19:checked ~ .s1{
  margin-left: -59.994%;
}

#rr20:checked ~ .s1{
  margin-left: -63.327%;
}

#rr21:checked ~ .s1{
  margin-left: -66.66%;
}
#rr22:checked ~ .s1{
  margin-left: -69.993%;
}
#rr23:checked ~ .s1{
  margin-left: -73.326%;
}
#rr24:checked ~ .s1{
  margin-left: -76.659%;
}
#rr25:checked ~ .s1{
  margin-left: -79.992%;
}

#rr26:checked ~ .s1{
  margin-left: -83.325%;
}
#rr27:checked ~ .s1{
  margin-left: -86.658%;
}
#rr28:checked ~ .s1{
  margin-left: -89.991%;
}

#rr29:checked ~ .s1{
  margin-left: -93.324%;
}

#rr30:checked ~ .s1{
  margin-left: -96.657%;
}