/* Create three unequal columns that floats next to each other */
 .column {
  float: left;
  padding: 10px;
}

/* Left and right column */
.column.side {
  width: 25%;
  margin-top: 10%;
  height: 100%;
}

/* Middle column */
.column.middle {
  width: 50%;
  margin-top: 10%;
}

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

.column-header {
    color: black; /* Change the color to white */
}

.column iframe {
  border-radius: 10%;
  box-shadow: 0 10px 10px rgba(14, 13, 13, 0.8); /* Initial shadow effect */
  transition: box-shadow 0.3s ease; /* Smooth transition */
  margin-top: 20px;
}

.column iframe:hover {
  box-shadow: 0 4px 8px blue; /* Hover shadow effect */
}

.container {
  display: block;
  border-radius: 10px; /* Add border radius */
  overflow: hidden; /* Ensure the shadow is visible */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Shadow effect */
  float: left;
  margin-top: 110px;
}

.slideshow-container {
  position: relative;
  max-width: 500px;
  margin: auto;
  border: 2px solid #cccccc; /* Border style */
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.7); /* Shadow effect */
  margin-top: 25px;
  height: 100%;
}

.slides img {
  display: block;
  width: 100%;
  border-radius: 5px;
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  z-index: 1;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

/* Add a little animation */
.slides {
  animation: fade 1s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}