*,
*::before,
*::after {
	box-sizing: border-box;
}



/*custom properties*/
:root {

  --portefoliotitle-bottom: -2.4vw;

	--ff-primary: "Poppins", sans-serif;
	--ff-secondary:  "Comfortaa", sans-serif;
	
	--fw-reg: 200;
	--fw-bold: 600;
	/*
	--clr-light: #FAFAFA;
	--clr-semiLight: #DFDFDF;
	--clr-md: #9C9C9C;
	--clr-semiDark: #272727;
	--clr-dark: #0F0F0F;
	--clr-blue: #169DF7;
	--clr-yellow: #D9CB04;
	--clr-green: #298F3D;
	--clr-purple: #7F2CDE;
	--clr-red: #D6252F;

--clr-captimagem: #8EC498;
--clr-edimagem: var(--clr-green);
--clr-fotomontagem: #0E3215;
--clr-filmagem: #83CBFB;
--clr-edvideo: var(--clr-blue);
--clr-storyboard: #083756;
--clr-storytelling: var(--clr-md);
--clr-mode3d: var(--clr-red);
--clr-anim3d: #4B0D10;
--clr-anim2d: #E98B91;
--clr-webdesign: #E68403;
--clr-designgr: var(--clr-yellow);
--clr-logo: #EBE37A;
--clr-idenmarca: #4C4701;
--clr-designsom: #AC1D90;
--clr-trilhasom: var(--clr-purple);
--clr-edsom: #2C0F4E;
--clr-foley: #BB8FEE;*/

--clr-light: rgba(250, 250, 250, 1); /* #FAFAFA */
--clr-semiLight: rgba(223, 223, 223, 1); /* #DFDFDF */
--clr-md: rgba(156, 156, 156, 1); /* #9C9C9C */
--clr-semiDark: rgba(39, 39, 39, 1); /* #272727 */
--clr-dark: rgba(15, 15, 15, 1); /* #0F0F0F */
--clr-blue: rgba(22, 157, 247, 1); /* #169DF7 */
--clr-yellow: rgba(217, 203, 4, 1); /* #D9CB04 */
--clr-green: rgba(41, 143, 61, 1); /* #298F3D */
--clr-purple: rgba(127, 44, 222, 1); /* #7F2CDE */
--clr-red: rgba(214, 37, 47, 1); /* #D6252F */

--clr-captimagem: rgba(142, 196, 152, 1); /* #8EC498 */
--clr-edimagem: rgba(41, 143, 61, 1); /* var(--clr-green) => #298F3D */
--clr-fotomontagem: rgba(14, 50, 21, 1); /* #0E3215 */
--clr-filmagem: rgba(131, 203, 251, 1); /* #83CBFB */
--clr-edvideo: rgba(22, 157, 247, 1); /* var(--clr-blue) => #169DF7 */
--clr-storyboard: rgba(8, 55, 86, 1); /* #083756 */
--clr-storytelling: rgba(156, 156, 156, 1); /* var(--clr-md) => #9C9C9C */
--clr-mode3d: rgba(214, 37, 47, 1); /* var(--clr-red) => #D6252F */
--clr-anim3d: rgba(75, 13, 16, 1); /* #4B0D10 */
--clr-anim2d: rgba(233, 139, 145, 1); /* #E98B91 */
--clr-webdesign: rgba(230, 132, 3, 1); /* #E68403 */
--clr-designgr: rgba(217, 203, 4, 1); /* var(--clr-yellow) => #D9CB04 */
--clr-logo: rgba(235, 227, 122, 1); /* #EBE37A */
--clr-idenmarca: rgba(76, 71, 1, 1); /* #4C4701 */
--clr-designsom: rgba(172, 29, 144, 1); /* #AC1D90 */
--clr-trilhasom: rgba(127, 44, 222, 1); /* var(--clr-purple) => #7F2CDE */
--clr-edsom: rgba(44, 15, 78, 1); /* #2C0F4E */
--clr-foley: rgba(187, 143, 238, 1); /* #BB8FEE */


	
	--fs-h1: clamp(3.5rem, 1.071vw + 3.286rem, 4.2rem);
	--fs-h2: clamp(2.1rem, 0.765vw + 1.947rem, 2.6rem);
	--fs-h3:clamp(1.4rem, 0.306vw + 1.339rem, 1.6rem);
	--fs-body: 1rem;

--lh-h1: clamp(5.663rem, 1.071vw + 5.315rem, 6.796rem);
--lh-h2: clamp(3.398rem, 0.765vw + 3.165rem, 4.207rem);
--lh-h3: clamp(2.265rem, 0.306vw + 2.104rem, 2.589rem);
--lh-body: 1.618rem;


}

/*General properties*/
html {
  scroll-behavior: smooth;
}

body {
  
    background: var(--clr-light);
    color: var(--clr-dark);
    margin: 0 auto;
    font-family: var(--ff-primary);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

/*start loading*/

#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeOut 4s forwards;
}

/* Animação de fade out */
@keyframes fadeOut {
  0% {
      opacity: 1;
  }
  100% {
      opacity: 0;
      display: none;
  }
}

/* Conteúdo da página */
#content {
  display: block;
  visibility: hidden;
  animation: fadeIn 4s forwards;
}

@keyframes fadeIn {
  0% {
      visibility: hidden;
      opacity: 0;
  }
  100% {
      visibility: visible;
      opacity: 1;
  }
}

/*end loading*/

figure {
  margin: 0;
}


img, video {
  display: block;
  max-width: 100%;
  height: auto;
}


/*h2, h3, .banner, figure {
    scroll-snap-align: start;
}*/

/*scroll top button*/

/* #scrollToTopBtn {
  position: fixed;
  display: none;
  bottom: .25rem;
  right: .25rem;
  background: linear-gradient(-45deg, rgba(100, 100, 100, 0.5), rgba(48, 48, 48, 0.5),rgba(0, 0, 0, 0.5));
  color: white;
  border: none;
  padding: .5rem .5rem;
  text-decoration: none; 
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s, opacity 0.3s;
  font-size: 1.25rem;
  
}*/
/* Scroll to top button */
#scrollToTopBtn {
  position: fixed;
  display: none;
  bottom: .75rem;  /* Ajusta a posição do botão */
  right: .75rem;   /* Ajusta a posição do botão */
  opacity: 0.5;  /* Define a transparência inicial */
  z-index: 1500;
  background: none;  /* Remove o fundo */
  border: none;  /* Remove a borda */
  color: var(--clr-red);  /* Define a cor do texto como vermelha */
  font-size: 3.25rem;  /* Aumenta o tamanho da seta */
  cursor: pointer;  /* Muda o cursor para pointer ao passar sobre o botão */
  transition: opacity 0.3s ease-in-out;  /* Adiciona uma transição suave para a opacidade */
}

#scrollToTopBtn::before {
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
  border-left: 0.4rem solid #D6252F;
  border-bottom: 0.4rem solid #D6252F;
  transform: rotate(135deg);
  margin: auto;
}

#scrollToTopBtn:hover {
  opacity: 1;
}

#scrollToTopBtn:active {
  opacity: 0.3;
}

#scrollToTopBtn.visible {
  display: block; 
}

#scrollToTopBtn:not(.visible) {
  opacity: 0;
}

/*header*/
/*new*/
.header-container {
  position: relative;
  width: 100%;
}
/*new*/



/*palavras que caem animation*/



.word {
  position: relative;
  top: -10%;
  font-size: clamp(1rem, 1.53vw + 0.511rem, 2.6rem);
  font-weight: 400;
  color: #333;
  text-align: center;
  flex: 1;
  z-index: 70;
  cursor: pointer;
}





/* Estilos para palavras que caem na orientação horizontal */
.word.fall {
  animation: fall 3s forwards; /* Aplica o keyframe 'fall' */
}

/* Estilos para palavras que caem na orientação vertical */
.word.fall-vertical {
  animation: fall-vertical 3s forwards; /* Aplica o keyframe 'fall-vertical' */
}

@keyframes fall {
  to {
    padding-top: 70.8vh; 
  }
}

@keyframes fall-vertical {
  to {
    padding-top: 70.8vh;
  }
}

.contrast {
  color: var(--clr-blue); /* Cor do texto quando sobreposta pelo fundo */
  mix-blend-mode: exclusion;
}

#wordfotografia:hover {
background-color: var(--clr-purple);
color: var(--clr-light);
}



#wordaudiovisual:hover {
  background-color: var(--clr-green);
  color: var(--clr-light);
}

#worddesign:hover {
  background-color: var(--clr-yellow);
  color: var(--clr-light);
}

/*Imagens e Videos tamanho*/

img {
    display: block;
    max-width: 100%;
}

video {
  display: block;
  max-width: 100%;
}

/*Typography*/

h1, h2, h3 {
	margin: 1.6rem 0 1rem 0;
}

h1 { 
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
}

h2 { 
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}

h3 { 
  font-size: var(--fs-h3); 
  line-height: var(--lh-h3);
}

/*head styling*/
/*new*/
#headerimage {
  width: 100%;
  height: 61.8vh; /* Full viewport height */
  background-image: url(../images/p2.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  position: relative;
  overflow: hidden;
}



.wordcontainer {
    position: absolute;
    top: -10%; /* Ajuste essa posição conforme necessário */
    width: 100vw; /* Faz com que o container ocupe toda a largura da tela */
    display: flex; /* Flexbox para distribuir as palavras horizontalmente */
    justify-content: space-evenly; /* Distribui as palavras igualmente ao longo da largura */
    align-items: center;
    line-height: clamp(5rem, 2.868vw + 4.082rem, 8rem);
}


@media (max-width: 768px) {
  #headerimage {
    height: 38.2vh; /* Full viewport height */
  }
  
  .wordcontainer {
    top: -85%;
}
}
/*new*/

/*instead
.portefolioheader {
position: relative;
background-color: var(--clr-light);
background-image: url(../images/p2.jpg);
background-size: cover;
overflow: hidden;
padding-top: 50%;
background-position: center;
background-repeat: no-repeat;
width: 100%;
}
*/


.menu-button {
  background: none;
  border: none;
  cursor: pointer;
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 100;
}

.menu-bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 6px 0;
  background-color: var(--clr-blue);
  transition: transform 0.3s ease;
}


.menu-button.active .first {
  transform: rotate(45deg) translate(6px, 6px);
}

.menu-button.active .middle {
  opacity: 0;
}

.menu-button.active .last {
  transform: rotate(-45deg) translate(6px, -6px);
}

/*Animate letters from menu*/
/*display: flex;
flex-direction: row;*/
ul.menu {
  display: none;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 15% 1fr 1fr;
  grid-template-areas:
  'li-home li-home'
  "li-portefolio li-contactos"
  "submenu submenu";
  color: var(--clr-light);
  position: fixed;
  top: 1rem;
  right: 1rem;
  background: linear-gradient(-45deg, #000000, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3));
  padding: 2rem;
  margin: 0.25rem;
  list-style: none;
  border-radius: 2.7em 0 2.7em 2.7em;
  border: var(--clr-blue) 1px solid;
  z-index: 90;
}

.menu.open {
  display: grid;
}

.menu-button .menu-bar {
  background-color: var(--clr-blue); /* Cor padrão para as barras */
}

.menu-button.portefolio-menu.button-cor .menu-bar {
  background-color: var(--clr-blue); /* Cor correspondente ao Portefólio */
}

.menu-button.fotografia-menu.button-cor .menu-bar {
  background-color: var(--clr-purple); /* Cor correspondente à Fotografia */
}

.menu-button.audiovisual-menu.button-cor .menu-bar {
  background-color: var(--clr-green); /* Cor correspondente ao Audiovisual */
}

.menu-button.design-menu.button-cor .menu-bar {
  background-color: var(--clr-yellow); /* Cor correspondente ao Design */
}

.menu.portefolio-menu {
  border-color: var(--clr-blue); /* Cor correspondente ao Portefólio */
}

.menu.fotografia-menu {
  border-color: var(--clr-purple); /* Cor correspondente à Fotografia */
}

.menu.audiovisual-menu {
  border-color: var(--clr-green); /* Cor correspondente ao Audiovisual */
}

.menu.design-menu {
  border-color: var(--clr-yellow); /* Cor correspondente ao Design */
}


ul.submenu {
  display:grid;
grid-area: submenu;
justify-self: center;
align-self: center;
padding: 1rem;

}

.menu li {
  list-style: none;
  cursor: pointer;
}

.li-home {

  margin: 0 auto;
  grid-area: li-home;
}

li.vertical-text.li-portefolio {
grid-area: li-portefolio;
justify-self: start;
align-self: center;
}

li.vertical-text.li-contactos {
grid-area: li-contactos;
justify-self: end;
align-self: center;
text-decoration: none;
}

.vertical-text.li-portefolio {

    writing-mode: vertical-lr; /* Rotação vertical da esquerda para a direita */
    transform: rotate(180deg); /* Gira o texto verticalmente */
    
}

.vertical-text.li-contactos {

  writing-mode: vertical-lr; /* Rotação vertical da esquerda para a direita */
  transform: rotate(0deg); /* Gira o texto verticalmente */
  
}

/*style links "home" menu*/
.menu a:link {
  text-decoration: none;
  color: var(--clr-light);
}

.menu a:visited {
  text-decoration: none;
  color: var(--clr-light);
}

.menu a:hover {
  text-decoration: none;
  color: var(--clr-light);
}

.menu a:active {
  text-decoration: none;
  color: var(--clr-light);
}

/*style link "home" menu*/

.animate-title {
  animation-name: animateLetters;
  animation-duration: .4s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}



@keyframes animateLetters {
  0% { opacity: 0; transform: translateY(-20px); }
  5% { opacity: 1; }
  20% { opacity: 1; }
  25% { opacity: 0; transform: translateY(20px); }
  45% { opacity: 1; transform: translateY(0); }
  50% { opacity: 1; }
  70% { opacity: 1; }
  75% { opacity: 0; transform: translateY(-20px); }
  95% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; }
}

/*default portefolio title without animation*/
/*new*/

.portefoliotitle {
  white-space: nowrap;
  margin: 0 auto;
  font-size: 10vw;
  letter-spacing: clamp(4.6vw, 4.7vw, 5vw);
  position: absolute;
  bottom: var(--portefoliotitle-bottom);
  left: -1.5vw;
  line-height: 1;
  
}



.portefoliotitle::first-letter {
  color: #169DF7;
}

.title-word {
  display: none;
}

.title-word--active {

  font-size: clamp(1.62rem, 7.924vw + 0.035rem, 6.8rem);
  letter-spacing: 3vw;
  position: absolute;
  bottom: 4vw;
  left: 0;
  right: 0;
  text-align: center;

}

/*Cores diferentes para palavras diferentes*/

.title-word--active[data-title="Design"]::first-letter {
  color: var(--clr-yellow);
}

.title-word--active[data-title="Fotografia"]::first-letter {
  color: var(--clr-purple);
}

.title-word--active[data-title="Audiovisual"]::first-letter {
  color: var(--clr-green);
}

.hidden {
  display: none;
}

.etiqueta {
  display: inline-block;
  padding: 4px 8px;
  margin-right: 8px;
  margin-bottom: 8px;
  border-radius: 4px;
  font-size: clamp(0.62rem, 0.581vw + 0.504rem, 1rem);
  font-weight: 500;
}

.etiqueta.storytelling {
  border: var(--clr-md) 1px solid;
  color: var(--clr-dark); /* Define a cor do texto para cada categoria */
}

.etiqueta.captacao-de-imagem {
  border: var(--clr-captimagem) 1px solid;
  color: var(--clr-dark); /* Define a cor do texto para cada categoria */
}

.etiqueta.filmagem {
  border: var(--clr-filmagem) 1px solid;
  color: var(--clr-dark); /* Define a cor do texto para cada categoria */
}

.etiqueta.edicao-de-imagem {
  content: "Edição de Imagem";
  border: var(--clr-edimagem) 1px solid;
  color: var(--clr-dark); /* Define a cor do texto para cada categoria */
}

.etiqueta.edicao-de-video {
  content: "Edição de Video";
  border: var(--clr-edvideo) 1px solid;
  color: var(--clr-dark); /* Define a cor do texto para cada categoria */
}

.etiqueta.edicao-som {
  border: var(--clr-edsom) 1px solid;
  color: var(--clr-dark); /* Define a cor do texto para cada categoria */
}

.etiqueta.modelacao3d {
  border: var(--clr-mode3d) 1px solid;
  color: var(--clr-dark); /* Define a cor do texto para cada categoria */
}

.etiqueta.animacao3d {
  border: var(--clr-anim3d) 1px solid;
  color: var(--clr-dark); /* Define a cor do texto para cada categoria */
}

.etiqueta.animacao2d {
  border: var(--clr-anim2d) 1px solid;
  color: var(--clr-dark); /* Define a cor do texto para cada categoria */
}

.etiqueta.webdesign {
  border: var(--clr-webdesign) 1px solid;
  color: var(--clr-dark); /* Define a cor do texto para cada categoria */
}

.etiqueta.fotomontagem {
  border: var(--clr-fotomontagem) 1px solid;
  color: var(--clr-dark); /* Define a cor do texto para cada categoria */
}

.etiqueta.identidade-de-marca {
  border: var(--clr-idenmarca) 1px solid;
  color: var(--clr-dark);/* Define a cor do texto para cada categoria */
}

.etiqueta.design-grafico {
  border: var(--clr-designgr) 1px solid;
  color: var(--clr-dark); /* Define a cor do texto para cada categoria */
}

.etiqueta.design-sonoro {
  border: var(--clr-designsom) 1px solid;
  color: var(--clr-dark); /* Define a cor do texto para cada categoria */
}

.etiqueta.storyboard {
  border: var(--clr-storyboard) 1px solid;
  color: var(--clr-dark); /* Define a cor do texto para cada categoria */
}

.etiqueta.foley {
  border: var(--clr-foley) 1px solid;
  color: var(--clr-dark); /* Define a cor do texto para cada categoria */
}

.etiqueta.trilha-sonora {
  content: "Trilha Sonora";
  border: var(--clr-trilhasom) 1px solid;
  color: var(--clr-dark); /* Define a cor do texto para cada categoria */
}

.etiqueta.logos {
  border: var(--clr-logo) 1px solid;
  color: var(--clr-dark); /* Define a cor do texto para cada categoria */
}



/*Todas as secções*/



.portfolio-section {
  display: static;
  padding-top: clamp(14rem, 2.868vw + 13.082rem, 17rem);
  padding-bottom: clamp(1rem, 4vw + 1rem, 7rem);
  padding-left: clamp(1.8rem, 5.545vw + 0.026rem, 7.6rem);
  padding-right: clamp(1.8rem, 5.545vw + 0.026rem, 7.6rem);
}

.article-project {
  margin-bottom: clamp(7rem, 4.111vw + 5.685rem, 11.3rem);
}


.article-project > *:last-child {
  margin-bottom: 0;
}


.banner {
  width: 100vw; 
  margin: clamp(1rem, 4vw + 1rem, 7rem) 0 clamp(1rem, 4vw + 1rem, 7rem) 0;
  padding: 0; 
  position: relative; 
  left: 50%;
  transform: translateX(-50%);
}

figcaption {
  margin-top: clamp(0.5rem, 0.115vw + 0.463rem, 0.62rem);
  font-size: clamp(0.62rem, 0.199vw + 0.58rem, 0.75rem);
  line-height: clamp(0.75rem, 0.239vw + 0.674rem, 1rem);
}


.banner-figcaption {
  font-size: clamp(0.62rem, 0.199vw + 0.58rem, 0.75rem);
  padding-left: clamp(1.8rem, 5.545vw + 0.026rem, 7.6rem);
}


.text-container {
  column-count: 2; 
  column-gap: 2rem;
  padding: 2rem 0 2rem 0;
}

@media (max-width: 1080px) { 
  .text-container {
    column-count: 1; 
  }
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two columns for larger screens */
  gap: 1rem; /* Adjust gap between images */
}

@media (max-width: 768px) { /* Adjust the max-width for your breakpoint */
  .image-grid {
    grid-template-columns: 1fr; /* Single column for smaller screens */
  }
}

/*workload*/
.parallax-effect-img1 {
  background-image: url(../images/throughskin/throughskin02.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  /*padding: 38.2vh;*/
  color: white;
  margin: 0;
}
.parallax-effect-img2 {
  background-image: url(../images/throughskin/throughskin29.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  /*padding: 38.2vh;*/
  color: white;
  margin: 0;
}
.parallax-effect-img3 {
  background-image: url(../images/projFragmento/FRAG_MENTO18.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  /*padding: 61.8vh;*/
  color: white;
  margin: 0;
}

/*new*/
.parallax-effect-img1,
.parallax-effect-img2,
.parallax-effect-img3 {
    max-width: 100vw; /* Restrict to the width of their container */
    height: 80vh;   /* Maintain desired height */
    overflow: hidden; /* Ensure no overflow */
    background-size: contain;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    margin: 0 auto;
}
@media (max-width: 768px) {
  .parallax-effect-img1,
  .parallax-effect-img2,
  .parallax-effect-img3 {
      height: 60vh;
      background-size: contain;
  }
}
/*new*/

.before-parallax {
  margin: 0 0 clamp(7rem, 4.111vw + 5.685rem, 11.3rem) 0;
}

.after-parallax {
  margin: clamp(7rem, 4.111vw + 5.685rem, 11.3rem) 0 0 0;
}


/*newAudiovisual*/

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.8rem, 5.545vw + 0.026rem, 7.6rem);
  margin: 2rem 0 2rem 0;
}

/* old-video Container for the video card 
.video {
  flex: 1 1 calc(50% - clamp(1.8rem, 5.545vw + 0.026rem, 7.6rem)); 
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}*/

.card {
  flex: 1 1 calc(50% - clamp(1.8rem, 5.545vw + 0.026rem, 7.6rem)); 
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.image-wrapper {
  position: relative;
  width: 100%;
  padding-top: calc(100% / 1.618);
  overflow: hidden;
}

.image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.title-wrapper h5 {
  margin-top: -1.25rem;
  margin-bottom: 0;
  font-weight: 500;
  letter-spacing: 0.03rem;
}


/* Place the video in the first column */
.video figure {
  margin: 0;
}

.etiqueta-wrapper {
  display: flex;
  flex-wrap: wrap;
}
/*new video*/
.video {
  flex: 1 1 calc(50% - clamp(1.8rem, 5.545vw + 0.026rem, 7.6rem));
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 4px;
}

/*new*/

/* old video
.video video {
  width: 100%;
  border-radius: 4px; 
}
  */


.video .text-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 2rem 0 0;
  margin: 0;
}

.video .text-container > p {
  margin: 0;
  padding: 0;
}





/* Responsive styling */
@media (max-width: 1080px) {
  .video {
    flex: 1 1 100%; /* Make each card take the full width of the container */
    margin-top: 0; /* Remove the top margin for even cards */
  }

  .card {
    flex: 1 1 100%; /* Make each card take the full width of the container */
    margin-top: 0; /* Remove the top margin for even cards */
  }
}





/*neAudiovisualend*/

/*section#fotografia h2, section#audiovisual h2, section#design h2 {
  
  padding-bottom: 2rem;
  padding-top: 2rem;

}

section#fotografia h3, p:not(p.footer-text1, p.footer-text2, p.footer-text3, p.rights), section#audiovisual h3, p:not(p.footer-text1, p.footer-text2, p.footer-text3, p.rights), section#design h3, p:not(p.footer-text1, p.footer-text2, p.footer-text3, p.rights) {
  
  padding-right: 5rem;
  padding-bottom: 1.25rem;
  padding-top: 1.25rem;

}



section#audiovisual figure, section#design figure {
  margin-bottom: 1.75rem;
  margin-left: 0;
}*/

/*Fotografia section*/

/*section#fotografia figure:not(.banner) {
  margin-bottom: 1.75rem;
  margin-left: 0;
}*/

/* old15112024
img {
  width: 100%;
  height: auto;
}*/
/*new 15112024*/
img {
  width: 100%;
  height: auto;
  max-height: 100vh; /* Limit to viewport height */
  object-fit: contain; /* Ensures the image covers the area while maintaining aspect ratio */
}




@media (min-width: 1200px) {
  figure .alternate-image {
      max-width: 61.8vw; /* Adjust as needed for large screens */
      object-fit: contain; /* Adjust fitting behavior */
  }

  .centered-figure {
    display: flex;
    flex-direction: column;  /* Stack children vertically */
    margin: 0 auto;
}

img {
    max-width: 100%;   /* Ensure image scales with container */
    height: auto;      /* Maintain aspect ratio */
}

figcaption {
    margin-top: 10px;  /* Space between image and caption */
}


  .banner img {
    width: 100vw; 
    margin: clamp(1rem, 4vw + 1rem, 7rem) 0 clamp(1rem, 4vw + 1rem, 7rem) 0;
    padding: 0; 
    position: relative; 
    left: 50%;
    transform: translateX(-50%);
    max-height: max-content;
  }
}

/*new 15112024*/

.container-img-ts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(40%, 50%), 1fr));
  gap: 2rem;
  margin: 2rem 0 2rem 0;
}

.links-ts {
  list-style: none;

}

/* Recursos Through Skin*/
.links-ts a:link {

  text-decoration: none;
  color: var(--clr-dark);
}

.links-ts a:visited {
  text-decoration: none;
  color: var(--clr-blue);
}

.links-ts a:hover {
  text-decoration: none;
  color: var(--clr-blue);
}

.links-ts a:active {
  text-decoration: none;
  color: var(--clr-semiDark);
}

.emptyspace1:empty {
  grid-area: 1 / 1;
}
.img-soltos01 {
  grid-area: 1 / 2;

}

.emptyspace2:empty {
  grid-area: 2 / 2;
}

.img-soltos02 img:hover{
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1)
}

.img-soltos03 {
  grid-area: 3 / span 2;
  

}

.img-soltos12 {
  grid-area: 4 / span 2;
}

.img-soltos06 {
  grid-area: 5 / 1;

}
.img-soltos06 {
  grid-area: 5 / 2;
}

.img-soltos04 {
  grid-area: 6 / span 2;
}
.img-soltos04 img:hover{
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1)
}

.img-soltos07 {
  grid-area: 7 / span 2;
}

.img-soltos09 {
  grid-area: 8 / span 2;
}

.img-soltos11 {
  grid-area: 9 / span 2;
}

.img-soltos11 img:hover{
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1)
}

.img-soltos10 {
  grid-area: 10 / span 2;
}

.img-soltos08 {
  grid-area: span 2 / span 2;
}

/*design section ()()()()()()()()()()()()()()()()()()()()()()()()()()()()*/

section#design img {
  width:100%;
  height: auto;
}



.box-shadow-hover {
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s, opacity 0.3s; 


}
.box-shadow-hover:hover {
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
  opacity: 0.7;
}


.box-shadow-hover:active {
  box-shadow: none;
  opacity: 1;
}









/*888888888888888888888888888888888888888888888888888888888888*/

.logosize {
  width: 25%;
  height: auto;
  display: block;
  margin: 0 auto;
  position: relative;
  padding: 2rem 0;
}

/* Carrossel de imagens design catálogo Through Skin */


.carousel {
  position: relative;
 margin-bottom: 1rem;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}

.slide-container {
  display: flex;
  transition: transform 0.5s ease;
}

.slide {
  flex: 0 0 50%; /* Mostra apenas duas imagens por vez */
  display: flex;
  justify-content: center; /* Centraliza as imagens na tela */
  position: relative;
}

.slide img {
  width: 80%;
  height: auto;
  cursor: pointer; /* Indica que a imagem é clicável */
}

.carousel .clickable-area {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  cursor: pointer;
}

.carousel .left-area {
  left: 0;
}

.carousel .right-area {
  right: 0;
}


.download-button:hover {
  background: rgba(48, 48, 48, 0.6);
  color:var(--clr-light);
}

.download-button:active {
  background: linear-gradient(-45deg, rgba(100, 100, 100, 0.5), rgba(48, 48, 48, 0.5),rgba(0, 0, 0, 0.5));
  color: white;
  
}

/* FIM carrossel de imagens design catálogo Through Skin */

.grid-container {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 1fr;
  margin-bottom: clamp(1.8rem, 5.545vw + 0.026rem, 7.6rem);
}



.grid-container-3 {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 2fr 1fr;
}

.cor1 {
  grid-column: 1;
}

.cor2 {
  grid-column: 2;
}

.ilus03 {
  grid-column: 1 / span 2;
  grid-row: 1;
}

.ilus01, .ilus02 {

  max-width: 30rem;
}

.ilus01 {
  grid-column: 1;
  grid-row: 2;
}

.ilus02 {
  grid-column: 2;
  grid-row: 3;
}

.ilus04, .ilus05 {

  max-width: 30rem;
}

.ilus04 {
  grid-column: 1;
  grid-row: 1;
}

.ilus05 {
  grid-column: 2;
  grid-row: 2; 
}

.ilus06 {
  grid-column: 1 / span 2;
  grid-row: 1;
}

.flex-container {
  display: flex;
  flex-direction: row;
  justify-items: center; /* Horizontally center the content */
  gap: 2rem;
}

.text-container.col-1 {
  column-count: 1; 
  column-gap: 2rem;
  padding: 2rem 0 2rem 0;
}

div .text-container-col-1 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 0 0 clamp(0rem, 28.681vw + -9.178rem, 30rem);
  margin: 0;
  justify-content: center;
}

div .text-container-col-1 > p {
  margin: 0;
  padding: 0;
}


.panfleto-egipto img {
  max-width: 30rem;
  min-width: 15rem;
  height: auto;
}

@media screen and (max-width: 768px) {
  .flex-container {
    flex-direction: column; /* Stack items vertically on mobile */
    
  }
  div .text-container-col-1 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0;
    margin: 0;
  }
}

/* Footer */
/* General Footer Styling */
.footer {
  background-color: var(--clr-dark); /* Light background color */
  color: var(--clr-light); /* Dark text color for readability */
  padding: 13rem 2rem 1rem 2rem;
  border-top: 1px solid #ddd; /* Subtle border to separate from main content */
}

.grid-container-footer {
  display: grid;
  grid-template-columns: 38.2% 23.6% 38.2%;
  align-items: end; /* Align items at the top */
  padding-bottom: clamp(1rem, 4vw + 1rem, 7rem);
}

/* Contact Text Styling */
.contact-text {
  text-align: left; /* Align text to the left */
  font-size: 1rem;
  line-height: 1.6;
}

.contact-text p {
  margin-bottom: 1.2rem;
}

/* Contact Area and Icons */
.contact-area {
  display: flex; /* Enable flexbox to vertically center content */
  flex-direction: row; /* Align items in a column */
  justify-content: flex-end; /* Vertically center the content */
  align-items: center; /* Horizontally center the content */
  height: 100%; /* Ensure the contact area takes up full height of the grid cell */
  align-self: center; /* Align the contact area to the center of its grid cell */
  text-align: center; /* Align the text to the center */
  grid-column: 3;
  max-width: 100%;
}

.contact-title {
  font-size: 1.1rem; /* Adjusted to be smaller */
  font-weight: 400;
  padding: 0.5rem;
  margin-left: 0.5rem;
  letter-spacing: 0.3rem;
  color: var(--clr-semiLight); /* Slightly darker color for emphasis */
  writing-mode: vertical-lr; /* Make the text vertical (left-to-right) */
  transform: rotate(360);
  order: 2;
}

.contact-icones {
  display: flex;
  flex-direction: column; /* Arrange items vertically */
  justify-content: center; /* Center items vertically */
  align-items: center; /* Center items horizontally */
  gap: 2rem;
  order: 1;
  margin-left: clamp(1.5rem, 1.434vw + 1.041rem, 3rem);
}


.icone img {
  width: 35px;
  height: 35px;
  transition: transform 0.3s, opacity 0.5s;
}

.icone img:hover {
  transform: scale(1.15); /* Increase size on hover */
  opacity: 0.5;
}

.rights {
  display: flex;
  justify-content: space-between; /* Space between the logo and text */
  align-items: end; /* Vertically center */
  bottom: 0; /* Align it to the bottom of the page */
  width: 100%;
  padding-bottom: 1rem;
  gap: 1rem;
}

/* Styling for the rights text */
.rights {
  margin: 0;
  font-size: 0.875rem;
  color: #666; /* Subtle color for copyright text */
}

.rights p {
  order: -1; /* Move the copyright text to the first position */
}

.rights > p {
  margin: 0;
  font-size: 0.875rem;
  color: #666;
}

/* Logo styling */
.logo-rights {
  width: 5rem;
  margin-bottom: 0;
  filter: invert(1);
}


/* Responsive Design Adjustments */
@media (max-width: 1080px) { /* Ajuste o breakpoint conforme necessário */
  .grid-container-footer {
    grid-template-columns: 61.8% 19.1% 19.1%; /* Largura da primeira coluna em telas pequenas */
  }
}

@media (max-width: 768px) {
  .grid-container-footer {
    grid-template-columns: 1fr; /* Single column layout for smaller screens */
    text-align: left; /* Center text on small screens */
  }
}




  
  
  /*section#fotografia h2, section#audiovisual h2, section#design h2 {
    
    padding-bottom: 2rem;
    padding-top: 2rem;
  
  }
  
  section#fotografia h3, p:not(p.footer-text1, p.footer-text2, p.footer-text3, p.rights), section#audiovisual h3, p:not(p.footer-text1, p.footer-text2, p.footer-text3, p.rights), section#design h3, p:not(p.footer-text1, p.footer-text2, p.footer-text3, p.rights) {
    
    padding-right: 1rem;
    padding-bottom: 1.25rem;
    padding-top: 1.25rem;
  
  }
  
  section#audiovisual figure, section#design figure {
    margin-bottom: 1.75rem;
    margin-left: 0;
  }*/