@media (min-width:789px)
{


.industries
{

	top: 0;
	left: 0;
	width: 100%;
	transition: 0.2s;
	display: flex;

}

.industries .indarea
{
	position: relative;
	width: 50%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
    cursor: auto;
}
.image-dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-image {
  width: 200px;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.dropdown-image:hover {
  transform: scale(1.05);
}

.description {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1;
}
.industries .indarea ul li 
{
	list-style: none;
    margin: 20px;
}
.industries .indarea ul li:before 
{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	
	z-index: -1;
	opacity: 0;
	transition: 0.5s;
}


.industries .indarea ul li:hover::before 
{
	opacity: 1;
}

.industries .indarea ul li a 
{
	font-size: 2em;
	font-weight:200;
	text-decoration: none;
	color: rgba(0, 0, 0, 0.5);

}
.industries .indarea ul li:hover a 
{
	color: #055572;
}

.imgarea
{
	position: relative;
	width: 50%;
	bottom: 100px;
  display: flex;
  flex-direction: column-reverse;

}
.imgarea img
{
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 object-fit: contain;
}
.industry-solution 
{
    text-align: center;
}
}
@media(max-width:768px)
{
  .industries 
  {
      display: flex;
      flex-direction: column;
      height: 120vh;
  }
 .industries .indarea
  {
    width: 100%;
    height: 100%;
    position: relative;
    top: 300px;

      cursor: auto;

}
.imgarea p 
{
  font-size: 12px;
}
.indarea ul 
{
  list-style-type: none;
  margin-left: -45px;
}
.arrow::after {
    content: '\2192'; /* Unicode for right arrow */
    font-size: 34px;  /* Adjust size as needed */
    margin-left: 5px;
}

.industries .indarea ul li
{
     color: black;
     margin: 0px 10px;
     font-size: 14px;
     padding: 0px 10px;
     background-color: white;
}

.industries .indarea li li:hover
{
   background:#ff355a;
}

 .imgarea 
 {
   position: relative;
   width: 100%;
   height: 100%;
  bottom: 500px;
   z-index: -1;
 }
 .imgarea img
 {
  width: 100%;
  height: 300px;
  object-fit: contain;
  object-position: -10%;
 }
 .industries .indarea ul li:hover::before 
 {
    opacity:0; 	
 }
 .industry-solution
 {
   text-align: center;
   position: relative;
   top:-30px;
 }

}