.main-banner-wrapper {
  background-color: #003366  ;
  min-height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.description-banner-wrapper {
	background-color:#eeeeee;
	min-height: 450px;
	padding: 30px; 
}

.service-title{
   font-size: 1.5vw;
    color: #ffff;
    font-weight: 400;
}

.service-section-title{
   font-size: 2vw;
    color: #ffff;
    font-weight: 400;
	text-align: center;
	  background-color: rgba(50,50,50,0.8);
  padding: 30px;
   margin: 30px auto;
    display: inline-block;
}

.service-slogan-1 {
    font-size: 3vw;
    color: #ffff;
	font-weight: 7	00;
}

.service-slogan-2 {
    font-size: 2vw;
    color: #ffff;
	font-weight: 500;
}

.service-slogan-3 {
    font-size: 1vw;
    color: #ffff;
	font-weight: 700;
}

/* Add specific CSS rules for the serviced office page here */
.centered-content {
    display: flex; /* Enable flexbox */
    flex-direction: column; /* Arrange items vertically */
    align-items: center; /* Center items horizontally */
     text-align: center; /* Center all text content */
}
.centered-content ul li{
  margin-bottom: 5px; /* adds space to the bottom of the elements*/
}

.service-small-block-1{
	color: #fff;
    text-align: center;
    display: flex;    
	height: 225px;

	background-image: url('../img/Lifestyle-corridor.jpg');
    background-size: cover;
    background-position: center;
    }

.service-small-block-2{
	color: #fff;
    text-align: center;
    display: flex;    
	height: 225px;
	background-image: url('../img/Lifestyle-corridor2.jpg');
    background-size: cover;
    background-position: center;
    }

.service-small-block-3{
	color: #fff;
	margin:5px;
    text-align: center;
    display: flex;    
	height: 265px;
	background-image: url('../img/cafe-sg-1.jpg');
    background-size: cover;
    background-position: center;
    }

.service-small-block-4{
	color: #fff;
	margin:5px;
    text-align: center;
    display: flex;    
	height: 265px;
	background-image: url('../img/cafe-sg-2.jpg');
    background-size: cover;
    background-position: center;
    }

/* Minimal Service Slider Styles */
.service-slider {
  overflow: hidden;
  position: relative;
  height: 550px;
}
.service-slider .slides {
    width: 100%;
    height: 100%;
	padding: 5px;
}

.service-slider .slides input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.service-slider .slide-container {
    display: flex;
    width: 300%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
 }

.service-slider .slide {
    width: 33.34%;
    flex-shrink: 0;
     height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
  }

.service-slider .navigation {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 10px;
        z-index: 2;
    }


.service-slider .navigation label {
       width: 12px;
        height: 12px;
        background-color: #ddd;
        border-radius: 50%;
        cursor: pointer;
        display: block;
    }

    .service-slider .navigation label:hover {
        background-color: #bbb;
    }
/* Using the general sibling combinator (~) instead of (+) */

#service-slide1:checked ~  .slide-container {
  transform: translate(0%) ;
}

#service-slide2:checked ~  .slide-container {
  transform: translate(-33.3333%) ;
}

#service-slide3:checked ~ .slide-container {
  transform: translate(-66.6666%) ;
}


#service-slide4:checked ~ .slide-container {
  transform: translate(-100%) ;
}


/* Responsive Adjustments */
@media (max-width: 767.98px) {
	
	
    .main-banner-wrapper {
    min-height: 350px;
  }
  .description-banner-wrapper {

	min-height: 550px;

	

}
  
  .navbar-brand img {
  margin-left:0;
}

.service-section-title{
   font-size: 8vw;
}

   .col-md-4{
    max-width: 100%;
  }
    .workstore-block{
      height: 400px;
       background-size: cover;
      background-position: center;
      background-blend-mode: luminosity;
    }
	
	.office-block{
    height: 400px;
    background-size: cover;
    background-position: center;
    }
	
	.lifestyle-block{
      height: 600px;
    background-size: cover;
    background-position: center;
    }
	
.service-small-block-1{
	color: #fff;
    text-align: center;
    display: flex;    
	height: 400px;
    background-size: cover;
    background-position: center;
    }

.service-small-block-2{
	color: #fff;
    text-align: center;
    display: flex;    
	height: 400px;
    background-size: cover;
    background-position: center;
    }
	
.service-small-block-3{
	color: #fff;
    text-align: center;
    display: flex;    
	height: 400px;
    background-size: cover;
    background-position: center;
    }

.service-small-block-4{
	color: #fff;
    text-align: center;
    display: flex;    
	height: 400px;
    background-size: cover;
    background-position: center;
    }


	
	.service-block{
    height: 400pxp
	background-image: url('../img/powered-1.jpg');
    background-size: cover;
    background-position: center;
    }
    .powered-by-block{
       height: 350px;
    }
    .powered-by-block:first-of-type{
     height: 350px;
    }
   .powered-by-block:last-of-type{
     height: 350px;
    }
    .service-title{
        font-size: 6vw;
    }
     .service-slogan-1 {
        font-size: 8vw;
    }
	
	     .service-slogan-2 {
        font-size: 8vw;
    }
	
	     .service-slogan-3 {
        font-size: 3vw;
    }
      .navbar-nav .nav-link {
        font-size: 3vw;
    }
}


@media (max-width: 1720px) {
 
  .navbar-brand img {
  margin-left:0;
}

.navbar-nav{
    margin-right:0px;
}
}

.main-banner-link:hover .main-banner-wrapper,
.workstore-link:hover .workstore-block,
.office-link:hover .office-block,
.coldstore-link:hover .coldstore-block,
.lifestyle-link:hover .lifestyle-block,
.powered-by-link:hover .powered-by-block{
    opacity: 0.8;
    cursor: pointer;
}
.main-banner-link,
.workstore-link,
.office-link,
.coldstore-link,
.lifestyle-link,
.powered-by-link {
    text-decoration: none;
}

/*index-slider*/
#poweredBySlider {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.image-slide {
    position: absolute;
    top: 0;
    left: 0; /* Start at 0 instead of 100 */
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: left 0.5s ease-in-out; /* Add transition to left */
}

#mainBannerSlider {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 100%;
}

#mainBannerSlider .image-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}