@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Regular.ttf'); }

body { background-color: #000; font-family: 'Montserrat'; font-size: 16px; }

#header {
  display: flex;
  flex-direction: column;        /* Stack the lines vertically */
  justify-content: center;       /* Vertically center the content */
  align-items: center;           /* Horizontally center the content */
  height: 6vh;                 /* Full viewport height */
  text-align: center;  }            /* Center text inside <p> */

#header p {
  margin: 0 0 7px 0;            /* Space between paragraphs */
  line-height: .7; }            /* Line spacing within each <p> */

#header p:last-child { margin-bottom: 0; } /* Remove space after the last <p> */

.name {
  font-weight: 200;
  font-size: 2.3rem;
  line-height: .80;
  color: #fff;
  text-decoration: none;
  /* -webkit-text-stroke: 1px #000; */
  /* text-shadow: 2px 2px 8px #000;  */ }
 
.subtitle {
  font-size: 1.1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .5rem;
  color: #fff;
  margin-left: .60rem; }

.wrapper {
	display: flex;
	justify-content: center; }

#container {
  display: flex;
  gap: 1rem;
  width: 88%;
  margin-top: 1rem;
  height: 84vh;
  justify-content: center; }  

.column, column25 {
  width: 50%;
  height: auto;
  display: block;
  text-align: center;
  justify-content: center; }

/*.column img, .column25 img { border-radius: .5rem; }*/

.column25 { width: 23%; margin-top: 1rem; /*background-color: gray;*/ }

.column25 img { width: 100%; margin-bottom: 1rem; }

/*.column25 div { width: 100%; margin-bottom: 1rem; }*/

.image-row {
	display: flex;
	flex-direction: row;
	text-align: center;
	padding: 1rem;
	gap: 1rem; }

.image-row img {
  flex: 1 1 0;         /* Each image shares available space equally */
  width: 40%;         /* Fill its half of the row */
  height: 50%;        /* Maintain aspect ratio */
  object-fit: contain;   /* Optional: use 'contain' to avoid cropping */
  display: block; }

.row-logos {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around; }

.row-logos img { 
  width: 10%;
  align-items: center; }

.txt, .txtMail {
  font-size: .8rem;
  text-align: left;
  margin-left: 1rem;
  margin-right: 1rem;
  color: #c0af97; }

.txt a { color: darkseagreen; }

.txtMail { text-align: center; color: darkseagreen; }
.txtMail a { color: darkseagreen; }


/* --------------------------------------- GLightbox ---------------------------------------- */

.thumb { cursor: pointer; }

.gdesc {
  background: lightblue;
  color: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  border: 2px solid #fff;
  max-width: 80%;
  margin: 0 auto;
  text-align: center;
  font-size: 2rem;
  font-family: Arial, sans-serif;
}

.gslide-desc {
  font-size: 3rem;
  opacity: 0.85;
}

/* to avoid flashes */
.glightbox-container {
  transition: opacity 0.3s ease;
}

.glightbox-container .gdesc,
.glightbox-container .glightbox-description {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  color: white !important;
}

.glightbox-container .gslide-description {
  background: none !important; }



/*   
.gslide-inline {
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.gslide-inline #print-request-content {
  display: block !important;
  max-width: 600px;
  width: 100%;
}

.gslide-content {
  background: white !important;
  color: black !important;
}
 */

/* --------------------------------------- media ---------------------------------------- */

/* iPhone 8 */
@media only screen and (width : 375px) and (height : 667px) { 
  body { background-color: violet;}

} 

@media (max-width: 768px) {
  .container { flex-direction: column; width: 100%; height: 100%; gap: 0; justify-content: center;  }
  .column { width: 95%; text-align: center; }
  .column25 { width: 95%; margin-top: 0; /*background-color: tomato;*/  }
  .image-row {
    flex-direction: column;
    padding: 0;
    margin-bottom: 1rem;
    width: 100%; }
  .image-row img { width: 100%; object-fit: cover; }
  
  .column25 .image-row:nth-child(2) { 
    flex-direction: row;
    gap: 3rem; 
    background-color: lavender; }

  .column25 .image-row:nth-child(2) img {
    width: 42px;
    height: auto;
    object-fit: contain;
    background-color: gray; }

  #lightbox img {
    max-width: 95vw;
    max-height: 80vh; }
}