body{
  color: white;
  background-color: #1E1E1E;
}

.heading{
  display: flex;
  align-items: center;
  justify-content: center;
  /* margin-top: -7%; */
  height: 10vw;
  /* width: 100vw; */
  background-image: url("../assets/workshop/heading_bg.png");
  background-size: cover;
  /* background-position: 50%; */
}

.heading h1{
font-family: 'Kompot Sans';
font-style: normal;
/* margin-top: 5%; */
font-weight: 400;
/* font-size: 180px; */
font-size: 6vw;
/* line-height: 154px; */
line-height: 5vw;

color: #FFFFFF;
}
.form_navigator{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 10px;
}
.carousel {
  width: 90%; 
  padding-left: 10%;
}
.carousel-control-next{
  right: -50px;
}
.carousel-control-prev{
  left: -10px;
}
@media only screen and (max-width: 320px) {
  .carousel-control-next{
    right: -30px;
  }
}
@media only screen and (min-width: 987px) {
  .carousel-control-next{
    right: -65px;
  }
}
/* .video{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
} */

section{
  padding:2rem 9%;
}

.home{
  /* display: flex;
  align-items: center;
  justify-content: center;
  background-position: center;
  background-size:  cover; */
  padding: 0%;
  margin: 5px;
}
.home .content video{
  height: 50vh;
  width: 100%;
}

.clkHereButt{
  background: linear-gradient(45deg, #0094b2, #002587);
  color: #fff;
  width: 200px;
  border: none;
  border-radius: 25px;
  padding: 10px;
  -webkit-box-shadow: 0px 10px 41px -11px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 10px 41px -11px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 10px 41px -11px rgba(0, 0, 0, 0.7);
}

.clkHereButt:hover {
  background: linear-gradient(45deg, #c85bff, #b726ff);
}
.clkHereButt:focus {
  outline: none;
} 


/* form */

.containerWork {
  /* position: absolute; */
  max-width: 800px;
  /* height: 500px; */
  margin: auto;
  /* top: 50%; */
  /* left: 50%; */
  /* transform: translate(-50%, -50%); */
} 
.myRightCtn {
  position: relative;
  background-image: url("../assets/workshop/banner.jpeg");
  background-position: center;
  background-size: cover;
  /* background-size: 100% 100%; */
  /* background-repeat: no-repeat; */
  border-radius: 0 5% 5% 0;
  position: relative;
  /* border-radius: 25px; */
  /* height: 100%; */
  padding: 25px;
  color: rgb(192, 192, 192);
  font-size: 12px; 
  display: flex;
  justify-content: center;
  align-items: center;
}
.myLeftCtn {
  color: black;
  position: relative;
  /* background: #fff; */
  background-image: linear-gradient(to bottom, rgba(63, 243, 177, 1), rgba(138, 76, 244, 1));
  border-radius: 25px;
  height: 100%;
  padding: 25px;
}
.myLeftCtn header {
  /* color: blueviolet; */
  color: black;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
}
.row{
height: 100%;
margin-top: 10px;
} 
.myCard {
  position: relative;
  height: 100%;
  border-radius: 25px;
  -webkit-box-shadow: 0px 10px 40px -10px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 10px 40px -10px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 10px 40px -10px rgba(0, 0, 0, 0.7);
} 
.myRightCtn header {
  color: #fff;
  font-size: 44px;
}

.col{
  margin-bottom: 5px;
}
.box {
  /* display: none; */
  visibility: hidden;
  position: relative;
  margin: 20px;
  margin-bottom: 100px;
} 
.myLeftCtn .myInput {
  width: 300px;
  height: fit-content;
  border-radius: 25px;
  padding: 10px;
  padding-left: 50px;
  border: none;
  -webkit-box-shadow: 0px 10px 49px -14px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 10px 49px -14px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 10px 49px -14px rgba(0, 0, 0, 0.7);
}



/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 490px) {
  .myLeftCtn .myInput{
    width: 100%;
  }
  .myLeftCtn{
    padding: 5px;
  }
}

@media only screen and (min-width: 760px) {
  .myLeftCtn .myInput{
    width: 200px;
  }
}

@media only screen and (min-width: 995px) {
  .myLeftCtn .myInput{
    width: 260px;
  }
}


.myLeftCtn .myInput:focus {
  outline: none;
} 
.myForm {
  position: relative;
  margin-top: 50px;
} 

/* Thumbnail style */
.qr {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}


/* Enlarged image style */
.enlarged-image {
  display: flex;
  width: 280px;
  justify-content: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001; /* Ensures the image is on top of the overlay */
  transition: width 0.3s ease;
}

.image-wrapper{
  cursor: pointer;
}

/* carousel image enlarging */
.carousel_enlarged-image {
  display: flex;
  width: 90vw;
  justify-content: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001; 
  transition: width 0.3s ease;
}

@media only screen and (min-width: 375px) {
  .carousel_enlarged-image{
    width: 80vw;
  }
}
@media only screen and (min-width: 768px) {
  .carousel_enlarged-image{
    width: 50vw;
  }
}

/* Overlay style */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
  z-index: 1000; /* Ensure the overlay is below the enlarged image */
  display: none; /* Initially hidden */
}

.myLeftCtn .butt {
  background: linear-gradient(45deg, #0094b2, #002587);
  color: #fff;
  width: 230px;
  border: none;
  border-radius: 25px;
  padding: 10px;
  -webkit-box-shadow: 0px 10px 41px -11px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 10px 41px -11px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 10px 41px -11px rgba(0, 0, 0, 0.7);
} 
.myLeftCtn .butt:hover {
  background: linear-gradient(45deg, #c85bff, #b726ff);
}
.myLeftCtn .butt:focus {
  outline: none;
} 
.myLeftCtn .fas {
  position: relative;
  padding-top: 13px;
  color: #0084c9;
  left: 36px;
} 
.butt_out {
  background: transparent;
  color: #fff;
  width: 120px;
  border: 2px solid#fff;
  border-radius: 25px;
  padding: 10px;
  -webkit-box-shadow: 0px 10px 49px -14px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 10px 49px -14px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 10px 49px -14px rgba(0, 0, 0, 0.7);
} 
.butt_out:hover {
  border: 2px solid#eecbff;
} 
.butt_out:focus {
  outline: none;
}

.form-group{
  margin: 20px;
  display: flex;
  
  flex-direction: row;
  background-color: white;
  border-radius: 25px;
}



@media screen and (min-width: 567px){
.card-wrapper {
  display: flex;
}

.card-wrapper .card {
  margin: 0 .5em;
  width: 30%;
}

.image-wrapper {
  height: 100%;
  margin: 0 auto  ;
  /* align-items: center;
  justify-content: center; */
}
}

@media screen and (max-width: 567px) {
.card-wrapper .card:not(:first-child) {
  display: none;
}
}

.image-wrapper img {
max-width: 100%;
max-height: 100%;
}

.helpline h3, h4{
  display: flex;
  justify-content: center;
  text-align: center;
}
