/*.carousel {
      width: 1000px;
      display: block;
      height: 400px;
      margin: auto;
      position: relative;
      overflow: hidden;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    } */

.carousel {
      max-width: 1000px;
      min-width: 360px;
      display: block;
      min-height: 300px;
      max-height:400px;
      margin: auto;
      position: relative;
      overflow: hidden;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }

    .carousel img {
      width: 100%;
      max-height: 400px;
      min-height:400px;
      display: block;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transition: opacity 0.8s ease-in-out;
    }

    .carousel img.active {
      opacity: 1;
      z-index: 1;
    }

    .carousel .text-overlay {
      position: absolute;
      bottom: 20px;
      left: 20px;
      color: white;
      font-size: 2em;
      font-weight: bold;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
      z-index: 2;
      max-width: 80%;
      transition: opacity 0.8s ease-in-out;
      opacity: 0;
    }

    .carousel .text-overlay.active {
      opacity: 1;
    }

    .arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      border: none;
      font-size: 2em;
      padding: 0.2em 0.6em;
      cursor: pointer;
      z-index: 2;
      user-select: none;
    }

    .arrow:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }

    .arrow.left {
      left: 10px;
    }

    .arrow.right {
      right: 10px;
    }


    /* Ferðaskipuleggjandi */
    .ferd-carousel-logo {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 8;
      max-width: 150px;
      transition: opacity 0.8s ease-in-out;
    }

    /* Styles for links in carousel box */

    /* Link styling in carousel */
    a.csel_link:link {
        color: white;

        font-weight: bold;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    }
    a.csel_link:visited {
        color: white;

        font-weight: bold;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    }
    a.csel_link:hover {
        color: #ccc;

        font-weight: bold;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    }