@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap');

/* CSS Document */

@media (max-width: 990px) {
    .thumbnail-h {
        width: 48%; /* Two per row when screen is smaller than 990px */
    }
}

@media (max-width: 600px) {
    .thumbnail-h {
        width: 100%; /* One per row when screen is smaller than 600px */
    }
}


@media (max-width: 600px) {
    #header {
        padding: 10px 0;
    }
}






.button {
    display: inline-block; /* Allows padding and dimensions */
    padding: 10px 20px; /* Adjust padding for desired button size */
    background-color: #CEDE21; /* Button background color */
    color: #333; /* Text color */
    text-align: center; /* Center the text */
    text-decoration: none; /* Remove underline */
    border-radius: 5px; /* Rounded corners */
    border: none; /* No border */
    font-size: 16px; /* Font size */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s; /* Smooth transition */
	margin-left: 10px;
	margin-right: 10px;
}

.button:hover {
    background-color:#778017 ; /* Darker shade on hover */
}



.thumbnail-link {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}



#image-container img:last-child {
    margin-bottom: 0;
}


video {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    display: block;
}

#header {
    position: relative;
    overflow: hidden;
    margin: 0;
    text-align: center; /* Ensures the image stays centered */
}


#header img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}


#about {
    text-align: center;
    color: #3F3D3D;
    font-family: 'Montserrat';
    font-size: 18pt;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 25px;
    padding-bottom: 15px;
    line-height: 1.3;
}

#resume {
    text-align: center;
    color: #d3d3d3;
    font-family: 'Montserrat','Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, 'sans-serif';
    font-size: 15pt;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 0px;
    padding-bottom: 10px;
}

#about-section {
    display: none; /* Hidden by default */
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s ease-in-out;
    background-color: #C9D331;
    padding: 50px;
    text-align: center;
    color: rgba(39,39,39,1.00);
}

.about-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.about-content img {
    width: 300px; /* Adjust size as needed */
    border-radius: 50%;
    margin-bottom: 15px;
    padding-top: 25px;
}

.about-content p {
    font-size: 16px;
    max-width: 1000px;
	
}

.light-text {
    font-weight: 300;
}

.extra-bold-text {
    font-weight: 700;
}

#contentlist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    padding-top: 30px;
    padding-left: 20px;
    padding-right: 20px;
}





/* ---------- GENERAL HORIZONTAL (DEFAULT) ---------- */
#propage {
  display: flex;
  flex-wrap: wrap;          /* allows items to wrap to next line */
  justify-content: center;  /* centers overall content */
  align-items: flex-start;
  gap: 30px;
  padding: 30px 20px;
}

#propage img {
  max-width: 800px;         /* control how large the image can grow */
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  border-radius: 8pt;
  flex-shrink: 0;           /* prevents squishing */
}

#propage .text-box {
  flex: 1 1 300px;          /* responsive flexible width */
  max-width: 400px;         /* optional max width */
  color: #333;
  font-size: 16px;
  line-height: 1.5;
}

#propage.text-left {
    flex-direction: row-reverse; /* switches the order of items */
}


/* ---------- VERTICAL IMAGE LAYOUT ---------- */
#vertical-propage {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: 30px;
  padding: 30px 20px;
}

/* Desktop: text left, image right */
#vertical-propage .text-box {
  flex: 1 1 250px;
  max-width: 500px;
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  order: 1;
}

#vertical-propage img {
  width: auto;
  max-width: 500px;
  height: 100%;
  flex-shrink: 0;
  border-radius: 8pt;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  object-fit: contain;
  display: block;
  order: 2;
}

/* ---------- RESPONSIVE ADJUSTMENTS ---------- */


@media (max-width: 1200px) {
  /* Stack vertically for both propage types */
  #propage,
  #vertical-propage {
    flex-direction: column;
    align-items: center;
  }

  /* Ensure image stays full width and proportional */
  #propage img,
  #vertical-propage img {
    width: 100%;
    max-width: 900px;
    height: auto;
  }

  /* Make text box span same width as image */
  #propage .text-box,
  #vertical-propage .text-box {
    width: 100%;
    max-width: 900px;
    box-sizing: border-box;
    padding: 0 20px;
    text-align: left;
	  padding-bottom: 0px;
  }

  /* Specifically fix vertical-propage stacking order */
  #vertical-propage img {
    order: 1; /* image first (top) */
  }

  #vertical-propage .text-box {
    order: 2; /* text below */
  }
}



/* ---------- VIDEO LAYOUT ---------- */
#video-propage {
  display: flex;
  flex-direction: column; /* stack video over text */
  align-items: center;    /* center everything horizontally */
  justify-content: center;
  padding: 30px 20px;
  gap: 20px;
}

/* Responsive video container */
#video-propage .video-wrapper {
  position: relative;
  width: 100%;
  max-width: 1280px; /* control max video size */
  aspect-ratio: 16 / 9; /* keeps perfect proportions */
}

#video-propage video {
  width: 100%;
  height: 100%;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  display: block;
  border-radius: 8px;
  object-fit: cover; /* ensures it fills without stretching */
}

/* Text below video */
#video-propage .text-box {
  text-align: center;
  max-width: 1280px;
  color: #333;
  font-size: 16px;
  line-height: 1.6;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  #video-propage {
    padding: 20px 15px;
  }

  #video-propage .text-box {
    font-size: 15px;
    line-height: 1.5;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
  }
}

#square-propage .image-group {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

#square-propage .image-group img {
  width: 300px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8pt;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#square-propage {
  display: flex;
  flex-direction: column; /* stack image group and text vertically */
  align-items: center;    /* centers both horizontally */
  text-align: center;     /* optional, centers text */
  gap: 20px;              /* space between images and text */
  padding: 30px 20px;
}

#square-propage .text-box {
  max-width: 800px;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  text-align: center;
}

/* ---------- IMAGE BREAK / SPACER LAYOUT ---------- */
#image-propage {
  display: flex;
  flex-direction: column;  /* stack image over text */
  align-items: center;     /* center horizontally */
  justify-content: center;
  padding: 40px 20px;
  gap: 20px;
}

/* Image styling — responsive and consistent with video layout */
#image-propage img {
  width: 100%;
  max-width: 1230px;       /* similar to your video max width */
  height: auto;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  display: block;
  object-fit: cover;
}

/* Optional text below image */
#image-propage .text-box {
  text-align: center;
  max-width: 1200px;
  color: #333;
  font-size: 16px;
  line-height: 1.6;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  #image-propage {
    padding: 25px 15px;
  }

  #image-propage .text-box {
    font-size: 15px;
    line-height: 1.5;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
  }
}

/* ---------- VERTICAL LAYOUT: IMAGE LEFT, TEXT RIGHT ---------- */
#vertical-propage-right {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: 30px;
  padding: 30px 20px;
}

/* Image on the left */
#vertical-propage-right img {
  width: auto;
  max-width: 500px;
  height: 100%;
  flex-shrink: 0;
  border-radius: 8pt;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  object-fit: contain;
  display: block;
  order: 1; /* image first on desktop */
}

/* Text on the right */
#vertical-propage-right .text-box {
  flex: 1 1 250px;
  max-width: 500px;
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  order: 2; /* text second */
}

/* ---------- RESPONSIVE ADJUSTMENTS ---------- */
@media (max-width: 1200px) {
  #vertical-propage-right {
    flex-direction: column;
    align-items: center;
  }

  #vertical-propage-right img {
    width: 100%;
    max-width: 900px;
    height: auto;
    order: 1; /* image on top */
  }

  #vertical-propage-right .text-box {
    width: 100%;
    max-width: 900px;
    box-sizing: border-box;
    padding: 0 20px;
    text-align: left;
    order: 2; /* text below image */
  }
}







.thumbnail-h {
    position: relative;
    overflow: hidden;
    cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    margin: 0;
    width: 350px;
    height: 350px;
}

.thumbnail-h img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.5s ease-in-out;
}

.thumbnail-h img.bottom {
    opacity: 0;
}

.thumbnail-h:hover img.bottom {
    opacity: 1;
}

/* Image Modal Navigation Arrows */
.image-modal-content {
    position: relative;
}




/* Prevent button from being too close to the image */
#prev-btn:focus, #next-btn:focus {
    outline: none;
}

#footer {
    text-align: center;
    color: #696969;
    margin-top: 20px;
    padding: 10px;
}

body, td, th {
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #333;
    font-size: 13px;
}

body {
    background-color: rgba(255,255,255,1.00);
    background-repeat: repeat;
}




@media (max-width: 1200px) {
  #propage,
  #vertical-propage,
  #video-propage {
    padding-top: 20px;
    padding-bottom: 20px;
    gap: 20px;
  }

  #propage h2,
  #vertical-propage h2 {
    margin-top: 0;
  }

  #propage .text-box p,
  #vertical-propage .text-box p {
    margin-bottom: 0;
  }
}