.card-header {
    text-align: center;
    color: rgb(206, 108, 108);
}
.custom-background-color {
    background-color: rgb(250, 221, 221);
}
.card-header-reverse {
    text-align: center;
    color: white;
    background-color: rgb(240,0,0);
}

.dropdown-menu > li > a, .dropdown-divider > li {
    background-color:rgb(34, 34, 34);
    color: rgb(148, 148, 148);
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    background-color:rgb(34, 34, 34);
    color: rgb(255, 255, 255);
}

.bold-on-hover {
    font-weight: 900;
}

.img-card {
    padding: 0px 0px 0px 0px;
    display:inline-block; 
    width:100%;
    height:100%;
}

.wordcard {
    padding: 10px 10px 10px 20px;
}
.wordcard-reverse {
    padding: 10px 10px 10px 10px;
}

.rowcard-reverse {
    color: white;
    background-color: rgb(240,0,0);
    flex: 1;
}

.wrap,
.wrap-reverse {
    display: flex;
}
  
.map-left {
    width: 50%;
    float: left;
    padding: 10px 10px 10px 10px;
}
.map-right {
    width: 50%;
    float: right;
    padding: 10px 10px 10px 10px;
    display: flex;
    align-items: center;
}
.map-iframe {
    float: right;
    border:0;
}
  
.card-left {
    width: 50%;
    float: left;
}
.card-right {
    width: 50%;
    float: right;
}

.container-login {
    width: 50%;
}
  
@media (max-width: 640px) {
    .wrap {
        flex-direction: column;
        padding: 0px 0px 0px 0px;
    }
    .wrap-reverse {
        flex-direction: column-reverse;
        padding: 0px 0px 0px 0px;
    }
    .card-left,
    .card-right {
        width: auto;
    }
    .map-left {
        width: auto;
        text-align:center;
        padding: 10px 10px 10px 10px;
    }
    .map-right {
        width: auto;
        text-align:center;
        padding: 10px 10px 10px 10px;
        display: flex;
        justify-content: center; 
        align-items: center;
    }
    .map-iframe {
        width: 100%;
        border:0;
    }
    .container-login {
        width: 100%;
    }
}

table {
    margin:auto;
}

.picture-panel {
    height: 100%; /* Set the height of all panels to 100% */
}
  
.Columns {
    display: flex; /* Use flexbox layout for the Columns container */
    flex-wrap: wrap; /* Wrap the columns to a new row when there's no more space */
}

.carousel-inner img {
    /* max-height: 50vh; /* Set maximum height to 2/3 of the viewport height */
    /* object-fit: contain; /* Optional: set object-fit property for image scaling */
    /* height: 50vh; /* Set height to 50% of viewport height */
    object-fit: contain;
}

.carousel-inner .item img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Custom CSS to set carousel height to 50% screen height */
#shopCarousel.carousel {
    height: 50vh; /* Set height to 50% of viewport height */
    max-height: none; /* Reset max-height property */
}

/* Styles for desktop browsers with a minimum width of 768px */
@media screen and (min-width: 768px) {
    .carousel-innerx img {
      max-height: 50vh; /* Set maximum height to 2/3 of the viewport height */
      object-fit: contain; /* Optional: set object-fit property for image scaling */
      /* Add any other styles specific to desktop browsers here */
    }
  }

  @media (max-width: 767px) {
    .carousel-control {
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }
  }

  .item img {
    max-height: 50vh; /* set maximum height to 50% of viewport height */
    margin: 0 auto; /* center the image horizontally */
  }