#hero-container, #about-container, .card-container {
    max-width: 100%;
    min-height: 450px;
    color: white;
    /*background-color: #ff8b94;*/
    
    /*background-image: url("{{ url_for('static', filename='img/pict.webp') }}");*/
    /*background-image: url("/static/img/pict.webp");*/
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    /*position: relative;*/
    
}

#hero-container-content {
    /*position: absolute;*/
    top: 20px;
    left: 50%;
    float: left;
    /*transform: translateX(-50%);*/
    /*font-size: 2.5rem;*/
    z-index: 1;
}


/* Gallery style */

.img-thumbnail {
    cursor: pointer;
}

#lightbox {
    position : fixed;
    top : 0px;
    width : 100%;
    height : 100%;
    background-color : rgba(0,0,0,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}


#lightboxImg {
    max-width: 90%;
    max-height: 90%;
}

#closeBtn {
    color : #fff;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 20px;
}

#nextBtn {
    color : #fff;
    cursor: pointer;
    position: absolute;
    /*top: 100px;*/
    right: 20px; 
}

#prevBtn {
    color : #fff;
    cursor: pointer;
    position: absolute;
    /*top: 100px;*/
    left: 20px; 
}

#gallery-separation {
    height: 200px;
}



/* image file dropzone */

.upload-zone {
  border: 2px dashed #aaa;
  padding: 20px;
  text-align: center;
  cursor: pointer;
}

.upload-zone.dragover {
  border-color: #000;
  background: #f5f5f5;
}

.preview-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}

.preview-item {
  position: relative;
  width: 100px;
  height: 100px;
}

.preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.preview-item button {
  position: absolute;
  top: -5px;
  right: -5px;
  background: red;
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

/* Loading image spinner */

.spinner {
  display: none;
  width: 30px;
  height: 30px;
  border: 3px solid #ccc;
  border-top: 3px solid #000;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 10px auto;
}

/* HoneyPot */
.hp-flag {
  position: absolute;
  left: -9999px;
}



/*.upload-zone*/.loading .spinner {
  display: block;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/*custom class display*/
/* Mobile */
@media (max-width: 576px) {
  .custom-w {
    width: 80% !important;
  }
}

/* Tablet */
@media (min-width: 577px) and (max-width: 991px) {
  .custom-w {
    width: 80% !important;
  }
}

/* Large screens */
@media (min-width: 992px) {
  .custom-w {
    width: 65% !important;
  }
}

/* Gallery responsive */
/* Mobile */
@media (max-width: 576px) {
  .gallery-resp {
    width: 130px !important;
  }
}

/* Tablet */
@media (min-width: 577px) and (max-width: 991px) {
  .gallery-resp {
    width: 175px !important;
  }
}

/* Large screens */
@media (min-width: 992px) {
  .gallery-resp {
    width: 350px !important;
  }
}