/* index2.css */
/* General Styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

*, *:before, *:after {
  box-sizing: border-box;
}

img {
  display: block; /* Removes extra space below the image */
}

/* Slideshow Styles */
.slideshow {
  position: relative;
  width: 100%;
  margin: auto;
}

.slide {
  display: none;
  text-align: center;
  height: 300px; /* Fixed height for slides */
  overflow: hidden; /* Hide parts of the image that overflow */
}

.ad-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image covers the slide area */
}

.slideshow-dots {
  text-align: center;
  padding: 10px 0;
}

.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #999898;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dot.active {
  background-color: #f7f4f4; /* Color for the active dot */
}

.slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
  padding: 10px;
  font-size: 18px;
}

#prevSlide {
  left: 0;
}

#nextSlide {
  right: 0;
}


.company-boxes-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 1px;
  }

/* General Styles for the boxes and images */
.company-box {
  flex: 0 1 28%; /* Increase from 30% to 33% to make the boxes slightly larger */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
  background-color: rgb(255, 255, 255);
  margin-top: 10px; /* Add margin to create space between boxes */
  margin-bottom: 10px;
  
}

.company-image {
  width: 80%; /* Ensures the image scales to fit the container */
  height: auto; /* Keeps the aspect ratio intact */
  transition: transform 0.3s ease-in-out;
  vertical-align: middle;
  margin: 10%;
}

/* Hover effects to slightly raise the box and enlarge the image */
.company-box:hover {
  transform: translateY(-8px); /* Increase the raise effect slightly */
}

.company-box:hover .company-image {
  transform: scale(1.08); /* Increase the scale to make the image bigger on hover */
}



/* Special styles for Apple-specific boxes (if needed) */
.apple-box .company-image {
  width: 57.5%; /* Slightly larger than before */
  margin: auto;
  display: block;
  margin-top: 10.09%;
}


.apple2-box .company-image {
  width: 71%; /* Slightly larger than before */
  margin: auto;
  display: block;
  margin-right: 10%;
  margin-bottom: 10%;
  margin-top: 10%;
  margin-left: 17.5%;
}


.black-box .company-image {
  margin-top: 9%; /* Reset margins for specific boxes */
  margin-left: 18%; /* Reset margins for specific boxes */
  margin-bottom: 0%;
  width: 65%; /* Increase image width for better visibility on smaller screens */
}


.editshare-box .company-image {
  margin-top: 14%; /* Reset margins for specific boxes */
 margin-bottom: 0% ;
}

.softron-box .company-image {
  margin-top: 14%; /* Reset margins for specific boxes */
  margin-bottom: 0% ;
}

.JL-box .company-image {
  margin-top: 14%; /* Reset margins for specific boxes */
 margin-bottom: 0% ;
}

.tangent-box .company-image {
  margin-top: 14%; /* Reset margins for specific boxes */
 margin-bottom: 0% ;
}



/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
  .company-box {
    flex: 0 1 48%; /* Change to 48% for 2 boxes per row on smaller screens */
  }

  .company-image {
    margin: 5%; /* Adjust margins to better fit smaller screens */
    width: 90%; /* Increase image width for better visibility on smaller screens */
  }

  /* Disable hover effects */
  .company-box:hover {
    transform: none;
  }

  .company-box:hover .company-image {
    transform: none;
  }

  .apple-box .company-image {
    margin-top: 10%; /* Adjust the top margin specifically for the editshare box */
    margin-bottom: 5%; /* Adjust the bottom margin if needed */
    margin-left: 19%; /* Adjust the left margin to center or position the image as desired */
    margin-right: 1%; /* Adjust the right margin to match the left */
    width: 58.5%; /* Increase image width for better visibility on smaller screens */
  }

  
  .editshare-box .company-image {
    margin-top: 10%; /* Adjust the top margin specifically for the editshare box */
    margin-bottom: 5%; /* Adjust the bottom margin if needed */
    margin-left: 6%; /* Adjust the left margin to center or position the image as desired */
    margin-right: 1%; /* Adjust the right margin to match the left */
  }
  .black-box .company-image {
    margin-top: 5%; /* Adjust the top margin specifically for the editshare box */
    margin-bottom: 5%; /* Adjust the bottom margin if needed */
    margin-left: 6%; /* Adjust the left margin to center or position the image as desired */
    margin-right: 1%; /* Adjust the right margin to match the left */
  }

  .black-box .company-image {
    margin-top: 7%; /* Adjust the top margin specifically for the editshare box */
    margin-bottom: 5%; /* Adjust the bottom margin if needed */
    margin-left: 20%; /* Adjust the left margin to center or position the image as desired */
    margin-right: 1%; /* Adjust the right margin to match the left */
    width: 60%; /* Increase image width for better visibility on smaller screens */
  }
  .disguise-box .company-image {
    margin-top: 10%; /* Adjust the top margin specifically for the editshare box */
    margin-bottom: 5%; /* Adjust the bottom margin if needed */
    margin-left: 23%; /* Adjust the left margin to center or position the image as desired */
    margin-right: 1%; /* Adjust the right margin to match the left */
    width: 55%; /* Increase image width for better visibility on smaller screens */
  }


  .editshare-box .company-image {
    margin-top: 11%; /* Adjust the top margin specifically for the editshare box */
    margin-bottom: 5%; /* Adjust the bottom margin if needed */
    margin-left: 16%; /* Adjust the left margin to center or position the image as desired */
    margin-right: 1%; /* Adjust the right margin to match the left */
    width: 70%; /* Increase image width for better visibility on smaller screens */
  }

  .adobe-box .company-image {
    margin-top: 6.5%; /* Adjust the top margin specifically for the adobe box */
    margin-bottom: 6.5%; /* Adjust the bottom margin if needed */
    margin-left: 17%; /* Adjust the left margin to center or position the image as desired */
    margin-right: 1%; /* Adjust the right margin to match the left */
    width: 65%; /* Increase image width for better visibility on smaller screens */
  }



  .JL-box .company-image {
    margin-top: 10.5%; /* Adjust the top margin specifically for the editshare box */
    margin-bottom: 5%; /* Adjust the bottom margin if needed */
    margin-left: 13%; /* Adjust the left margin to center or position the image as desired */
    margin-right: 1%; /* Adjust the right margin to match the left */
    width: 75%; /* Increase image width for better visibility on smaller screens */
  }
  .tangent-box .company-image {
    margin-top: 11%; /* Adjust the top margin specifically for the editshare box */
    margin-bottom: 9%; /* Adjust the bottom margin if needed */
    margin-left: 18%; /* Adjust the left margin to center or position the image as desired */
    margin-right: 1%; /* Adjust the right margin to match the left */
    width: 65%; /* Increase image width for better visibility on smaller screens */
  }
  .softron-box .company-image {
    margin-top: 7%; /* Adjust the top margin specifically for the editshare box */
    margin-bottom: 5%; /* Adjust the bottom margin if needed */
    margin-left: 21%; /* Adjust the left margin to center or position the image as desired */
    margin-right: 1%; /* Adjust the right margin to match the left */
    width: 60%; /* Increase image width for better visibility on smaller screens */
  }
  
  .cinedeck-box .company-image {
    margin-top: 5%; /* Adjust the top margin specifically for the editshare box */
    margin-bottom: 5%; /* Adjust the bottom margin if needed */
    margin-left: 19%; /* Adjust the left margin to center or position the image as desired */
    margin-right: 1%; /* Adjust the right margin to match the left */
    width: 60%; /* Increase image width for better visibility on smaller screens */
  }
}