/* Project CSS */

.projects_options_wrapper{
margin:30px 0px 40px 0px;
}

.projects_option_col{
width:50%;
position: relative;
padding:0px 0px 30px 0px;
}

.projects_option_col:nth-child(odd){
padding:0px 15px 30px 0px;
}

.projects_option_col:nth-child(even){
padding:0px 0px 30px 15px;
}

.project_hero{
  height:285px;
  width: 100%;
  background-image:
    linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.0)),
    var(--hero-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 110%;
  transition: background-size .5s ease;
}

.project_hero:hover{
background-size: 120%;
}

.project_option_content {
display: flex;
flex-direction: column;
align-items: left;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
transition: background-color 0.3s ease;
transition: padding 0.6s ease;
padding:50px 15px 50px 50px;
}

.project_option_content:hover {
padding:50px 0px 50px 65px;
}

.project_option_content h2{
font-family: Montserrat;
font-size: 24px;
font-weight: normal;
color: white;
text-transform: uppercase;
margin:0;
}

.project_option_content button{
margin:20px 0px 0px 0px;
}

/* END PROJECT CSS */

/* project choice */

.project_choice{
margin-top:30px;
margin-bottom: 30px;
}

.project_choice_col{
background-color: black;
padding:15px 20px;
text-align: center;
transition: background-color 0.3s ease;
}

.project_choice_col:hover{
background-color: #28a9e1;
cursor: pointer;
}

.project_choice_col.active {
  background-color: #28a9e1;
}

.project_choice p{
color: white;
font-size: 15px;
}

/* end gallery choice */

/* Gallery Detail CSS */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Responsive gallery container */
.gallery-container {
  margin: 0px auto 30px auto;
  width: 100%;
}

@media (min-width: 1200px) { .gallery-container { max-width: 1140px; } }
@media (min-width: 992px)  { .gallery-container { max-width: 960px;  } }
@media (min-width: 768px)  { .gallery-container { max-width: 720px;  } }
@media (min-width: 576px)  { .gallery-container { max-width: 540px;} }
@media (max-width: 575px)  { .gallery-container { max-width: 100%;  } }

/* Main slideshow */
.slideshow-container {
  position: relative;
  width: 100%;
  margin-bottom: 15px;
}

.mySlide {
  display: none; /* hidden by default, JS will show first slide */
  text-align: center;
}

.mySlide img {
  width: 100%;
  max-height: 600px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Main arrows */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  border: none;
  color: white;
  font-size: 24px;
  padding: 10px 14px;
  cursor: pointer;
  z-index: 10;
}
.prev { left: 0; }
.next { right: 0; }

/* Thumbnail container */
.thumb-wrapper-container {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 10px;
}

.thumb-prev, .thumb-next {
  background: rgba(0,0,0,0.5);
  border: none;
  color: white;
  font-size: 20px;
  padding: 8px 12px;
  cursor: pointer;
  z-index: 10;
}

/* Scrollable thumbnail wrapper */
.thumb-wrapper {
  flex: 1;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* Grid for thumbnails */
.thumb-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 20%; /* 5 visible thumbnails */
  gap: 10px;
}

/* Thumbnails */
.thumb {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.6;
  scroll-snap-align: center;
}

.thumb.active {
  opacity: 1;
  border: 2px solid #333;
}


/* END NEW GALLERY CSS */

@media only screen and (max-width: 1400px) {
}

@media only screen and (max-width: 1200px) {

}

@media only screen and (max-width: 992px) {
.projects_option_col{
width:100%;
position: relative;
padding:0px 0px 30px 0px;
}

.projects_option_col:nth-child(odd){
padding:0px 0px 30px 0px;
}

.projects_option_col:nth-child(even){
padding:0px 0px 30px 0px;
}
.project_hero{
height:225px;
}
}

@media only screen and (max-width: 768px) {
.project_option_content {
padding:50px 15px 30px 40px;
}
}

@media only screen and (max-width: 576px) {
.project_choice .row{
  margin-left: 0;
  margin-right: 0;
  }
.project_choice{
  padding-left: 15px;
  padding-right: 15px;
}
.projects_options_wrapper{
  padding-left: 15px;
  padding-right: 15px;
}
.project_hero{
height:220px;
}
.project_option_content {
padding:50px 15px 30px 25px;
}
.gallery-container { 
padding:0px 15px;
}
}