:root {
  --primary-color: #29166f;
  --secondary-color: #FF0000; /* Using hex for consistency */
  --dark-grey: #1A1A1A; /* Slightly lighter dark grey */
  --nav-padding: 10px 15px;
  --section-padding: 20px;
  --border-radius-large: 50px;
  --border-radius-small: 8px;
  --transition-duration: 0.3s;
}

.dark-grey {
  color: var(--dark-grey);
}

.red {
  color: var(--secondary-color);
}

.red-hr,
.hr-short {
  margin: auto;
  border: solid 5px var(--primary-color);
  background-color: var(--primary-color);
}

.navbar-nav .nav-link {
  color: white;
  padding: var(--nav-padding);
  transition: background-color var(--transition-duration) ease;
}

.navbar-nav .nav-link:hover {
  background-color: var(--secondary-color);
  color: white;
}

.navbar-nav .nav-link.active {
    background-color: darkred; /* a slightly darker red for active state */
    color: white;
}

.navbar-toggler {
  border: none;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.zoom-effect {
  transition: transform 0.5s ease-in-out;
}

.carousel-item.active .zoom-effect {
  transform: scale(1.05);
}

.carousel-item {
  height: 750px;
  background-size: cover;
  background-position: center;
}

.carousel-caption-left {
  position: absolute;
  top: 50%;
  left: 15%;
  transform: translateY(-50%);
  text-align: left;
  color: white;
  width: 40%;
}

.form-container {
  position: absolute;
  top: 50%;
  right: 15%;
  color: #fff;
  transform: translateY(-50%);
  background-color: rgba(41, 22, 111, 0.7);
  padding: var(--section-padding);
  border-radius: var(--border-radius-small);
  width: 30%;
}

.circle {
  width: 80px;
  height: 80px;
  background-color: lightgray;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: black;
  margin: var(--section-padding) auto;
}

.center-content {
  text-align: center;
}

.trans-box {
  background-color: rgba(0, 0, 0, 0.7);
}

.gallery-item {
  margin-bottom: var(--section-padding);
}

.gallery-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.modal-content img {
  max-width: 100%;
  height: auto;
}

.gallery-container {
  padding: var(--section-padding);
}
.gallery-modal-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.gallery-header-content{
    flex:1;
}
.custom-image-div {
  background-size: cover;
  background-position: center;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.rounded-radius {
  border-radius: var(--border-radius-large);
}

.caption {
  position: absolute;
  bottom: 30px;
  left: 30px;
  color: white;
  font-size: 32px;
  font-weight: 700;
  padding: 5px 10px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: var(--border-radius-large);
}

.gallery-header {
  text-align: center;
}

@media (max-width: 700px) {
  .carousel-caption-left {
    position: absolute;
    top: 50%;
    text-align: center;
    color: white;
    width: 70%;
    left: 15%; /*re added, since removing it made it look strange on small screens*/
  }

  .carousel-item {
    height: 350px;
  }

  .form-container{
    width: 80%;
    right: 10%;
  }

}