.servpage {
		    display: flex;
			margin: 0;
            padding: 0;
           /* font-family: var(--heading-font);;*/
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
		}

        section {
            display: flex;
            align-items: center;
          /*  max-width: 800px;*/
            width: 100%;
            box-sizing: border-box;
            margin-bottom: 20px;
            text-align: center;
        }
        .first{
            display: flex;
            align-items: center;
            max-width: 60vw!important;
            width: 100%;
            box-sizing: border-box;
            margin-bottom: 20px;
            text-align: center;
        }
        .image-container {
min-width: 27vw;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  margin-right: 3vw;
  box-shadow: 0 0 1rem 0 rgba(174, 82, 181, 0.8);
        }

        .image-container img {
            max-width: 100%;
            height: auto;
        }

        .black-container {
            background-color: var(--back);
            width: 100%;
            /*height: 100px;*/
        }
		.fixed-background-section {
			position: relative;
			width: 100vw!important; /* Set width to 100% of the viewport width */
			/*!height: 500px;*/
			overflow: hidden;
			/*background: rgba(0, 0, 0, 0.4) url('../images/your-fixed-background-image.png') center/cover no-repeat fixed;*/
     
			background-size: cover; /* Ensures the background covers both width and height */
		}

    #section1 {
      background: rgba(0, 0, 0, 0.4) url('../images/basic.png') center/cover no-repeat fixed;
    }
        #section2 {
      background: rgba(0, 0, 0, 0.4) url('../images/basic.png') center/cover no-repeat fixed;
    }
        #section3 {
      background: rgba(0, 0, 0, 0.4) url('../images/basic.png') center/cover no-repeat fixed;
    }
        #section4 {
      background: rgba(0, 0, 0, 0.4) url('../images/basic.png') center/cover no-repeat fixed;
    }
        #section5 {
      background: rgba(0, 0, 0, 0.4) url('../images/basic.png') center/cover no-repeat fixed;
    }

		.fixed-background-content , .infosem-content {
			display: flex;
			align-items: center;
			justify-content: center;

			height: 100%;
			width: 100%;
			box-sizing: border-box;
			z-index: 1;
		/*	max-width: 800px;  Set a maximum width for content within the section */
			margin: 0 auto; /* Center the content horizontally within .fixed-background-content */
			font-size: 1.5vw;
  color: black;
  line-height: 1.2em;
		}

		.fixed-background-content > div {
			width: 100%; /* Make sure the inner div covers the full width of .fixed-background-content */
		}

		.overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4); /* Adjust the overlay opacity here */
            z-index: 0;
        }
		

        .box {
            width: 23vw;
         /*   height: 17vw;*/
position: relative;
  background: #fff;
  padding: 45px 30px;
  border-radius: 5px;
  overflow: hidden;
  z-index: 1;
  /*background: linear-gradient(to top, rgba(91, 59, 91, 0.8), rgba(219, 97, 171, 0.57));*/
  background: linear-gradient(to top, rgba(166, 129, 97, 0.28), rgba(173, 120, 111, 0.97));
  border:1px solid white;
        }
		
		
		
		.main-container{
		font-size: 1.5vw;
  color: #0c0c0c;
  line-height: 1.2em;}
  
  .leftcont{
  color:var(--font);
  }
		
		
		
.carousel {
  display: flex;
  overflow: hidden;
}

.carousel div {
  flex: 0 0 100%;
}

.item-content {
  overflow: hidden;
}

.first{
text-align:left;
}

ul
{
  list-style-type: none;
}

.ullist ul li
{
  position: relative;
  line-height: 1.5em;
  margin-bottom: 10px;
  padding-left: 25px;
  margin-left:-2rem;
}
.ullist ul li::before
{
  content:"\f111"; /* "\f1fc";*/
  font-family: "Font Awesome 5 Pro";
  position: absolute;
  left: 0;
  /*top: 2px;*/
   color: #c44953;
  font-size: 14px;
  font-weight: 600;
}










/* IMAGE GALLERY */
.gallery {

}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}

.modal-content-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.modal-content {
  max-width: 80%; /* Adjust the width as needed */
  max-height: 80vh; /* Adjust the height as needed */
  width: auto;
  height: auto;
  margin: 20px; /* Adjust the margin as needed */
}


.close {
  color: #fff;
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
}

        .gallery-slider img {
            width: 200px;
            height: auto; /* Maintain aspect ratio */
        }

        /* Style to set a maximum width for the carousel container */
        .gallery-slider {
            max-width: 600px; /* Set the maximum width as needed */
            margin: auto; /* Center the container */
        }
		
		
		
        #myModal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  /*background-color: rgba(0,0,0,0.9);*/
        }

        .modal-content {
            position: relative;
            max-width: 35%; /* Adjust the width as needed */
            max-height: 80vh; /* Adjust the height as needed */
            border: 8px solid white; /* Add a white border */
            margin: 20px auto; /* Add vertical margin and center horizontally */
            box-sizing: border-box; /* Include border in the total width and height */
            display: block;
			background:none;
        }

        .modal-nav {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
        }

		.modal-nav .arrow
			{
			  font-size: 64px;
			  cursor: pointer;
			  color: white;
			  margin: 1rem;
		}

        .modal-image {
            max-width: 100%; /* Ensure images don't exceed the width of the modal */
            max-height: 97%; /* Ensure images don't exceed the height of the modal */
            display: block;
            margin: 0 auto;
        }
		
		
		h2 {
		font-size:4vw;
    
      font-family: var(--heading-font);
    	}
		
.mainsem
{
  width: 200px;
  height: auto;
  background-color: #372335c4;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  width: 55%!important;
  border-radius: 10px;
  border: 3px solid white;
  padding: 1%;
  margin-top: 2vw;
  margin-bottom: 2vw;
}
		
.mainsem .ullist ul li {
	text-align:left;
}
		
		
		
.infosem {
			position: relative;
			width: 100vw!important; /* Set width to 100% of the viewport width */
			/*height: 500px;*/
			overflow: hidden;
			background-size: cover; /* Ensures the background covers both width and height */
			padding: 1vw;
		}
.infosem p {
	/*margin-right:10vw;*/
	font-size:1rem!important;
}
.infosem-content {
	text-align:center;
	color:var(--font);
}
.infosem-content .leftcont {
	margin-right:10vw;
}

@media (max-width:500px) {
	.mainsem{
	width:100%!important;
	}
	.fixed-background-content{
	font-size:3.5vw;
	}
    .cour {
      width: 100%;
 }
 .infosem-content{
   display: flex;
  flex-direction: column;
 }
 .box
{
  width: 42vw;
  height: 40vw;
  position: relative;
  background: #fff;
  padding: 45px 21px;
  border-radius: 5px;
  overflow: hidden;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(91, 59, 91, 0.8), rgba(219, 97, 171, 0.57));
  border: 1px solid white;
  margin-left: 26vw;
  font-size: 3vw;
  line-height: 1rem;
}
h2 {
font-size:6vw;
}
.infosem p {
	font-size:4vw!important;
}
.cour h3{
  font-size:6vw!important;
}
.first{
	flex-direction: column;
height: 500px;
}
.sec {
	height: 300px!important;
}
.image-container {
	max-width:400px!important;
  margin-right:0!important;
  margin-bottom: 1rem!important;
}
.infosem-content .leftcont
{
  margin-right: 0;
}
}
	
.gallery .slick-dotted.slick-slider
{
  margin-bottom: 0!important;
}


@media (max-width: 800px) {
.slick-initialized .slick-slide {
  display: block;
  height: 70vw;
}

section.first{
	flex-direction: column;
height: 150vw !important;
}
section.first.sec {
  height:70vw!important;
}
}