/* CORE PAGE CSS */
/* FONTS +S CROLL BAR */
/* Regular */
@font-face {
  font-family: "Aeonik";
  src: url("fonts/Aeonik-Regular.woff2") format("woff2"),
    url("fonts/Aeonik-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

/* Black */
@font-face {
  font-family: "Aeonik";
  src: url("fonts/Aeonik-Black.woff2") format("woff2"),
    url("fonts/Aeonik-Black.woff") format("woff");
  font-weight: 800;
  font-style: normal;
}

/*Black Italic */
@font-face {
  font-family: "Aeonik";
  src: url("fonts/Aeonik-BlackItalic.woff2") format("woff2"),
    url("fonts/Aeonik-BlackItalic.woff") format("woff");
  font-weight: 800;
  font-style: italic;
}

/* light */
@font-face {
  font-family: "Aeonik";
  src: url("fonts/Aeonik-Light.woff2") format("woff2"),
    url("fonts/Aeonik-Light.woff") format("woff");
  font-weight: 200;
  font-style: normal;
}

::-webkit-scrollbar {
  width: 3px;
}

::-webkit-scrollbar-track {
  background-color: antiquewhite;
  transition: background-color 2s ease-in-out;
}

::-webkit-scrollbar-thumb {
  background: rgb(102, 101, 99);
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.homepage {
  opacity: 1;
  transition: opacity 2s ease-in-out,;
  width: 100%;
  height: 100%;
  background-color: antiquewhite; /* Semi-transparent background */
  display: flex;
  flex-direction: column;
  cursor: crosshair;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  padding: 2%;
  box-sizing: border-box;
 
}

/* DARK-MODE CORE PAGE CSS */

.dark-mode {
  background-color: black;
  color: antiquewhite;
  animation: darkmodefade1 2s ease-in-out;
}
@keyframes darkmodefade1 {
  0% { background-color: antiquewhite; }
  10% { background-color: #f0b7ad; }
  20% { background-color: #e18490; }
  30% { background-color: #d25172; }
  40% { background-color: #c31e55; }
  50% { background-color: #CC0033; }
  60% { background-color: #a3002b; }
  70% { background-color: #7a0023; }
  80% { background-color: #52001b; }
  90% { background-color: #290013; }
  100% { background-color: black; }
}




.dark-mode a {
  color: antiquewhite;
}

.homepage.dark-mode .homepage-content .grid-menu .grid-item {
  box-shadow: rgba(250, 235, 215, 0.274) 0px 0px 10px;


}


.homepage.dark-mode ::-webkit-scrollbar-track {
  background-color: black;
}

.homepage.dark-mode .col-md-4 {
  box-shadow: 0px 0px 15px rgba(250, 235, 215, 0.3);

}



/* BODY */
body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: antiquewhite;
  font-family: Aeonik;
  overflow: hidden;
  align-items: center;
  align-content: center;
  justify-content: center;
  font-family: Aeonik;
}
/* WELCOME MAT */
.welcome-mat {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  text-align: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #c03;
  opacity: 1;
  transition: transform 1s ease-in-out;
}



.welcome-mat.hidden {
  display: none;
}

.slide-up {
  transform: translateY(-100%);
}


.title {
  font-family: Aeonik;
  font-size: 2em;
  font-weight: 900;
  border: none;
  background: none;
  
  color: #000000;
  text-decoration: none;
  z-index: 3;
  text-decoration-thickness: 0.5em;
  animation: fadeInTitle 8s ease forwards;
}

body > div.welcome-mat > a.dark-mode {
  background: none;
}

.title:hover {
  background: none;
  color: #faebd7;
  cursor: crosshair;
  text-decoration: none;
}

.title:active {
  background: none;
  color: #faebd7;
  cursor: crosshair;
  text-decoration: none;
  transition: opactity 2s ease-in-out, position;
  animation-name: heartbeat;
}

.sidebar {
  position: relative;

  justify-content: center;
  align-content: center;
  display: flex;
  text-decoration-thickness: 0.6em;
  font-weight: 500;
  font-size: 1.3em;
}

.sidebar ul li:hover,
.sidebar ul li:active,
.sidebar ul li:focus {
  color: #cc0033;
}

/* HOMEPAGE CORE */
.homepage.hidden {
  opacity: 0;
  pointer-events: none;
}


.homepage-content {
  
  flex-direction: column;
  position: relative;
  overflow-y: scroll;
  overflow-x: hidden;
  width: inherit;
  height: 100%;
 
  align-items: center;
}

.homepage-header {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  flex-direction: column;
  width: 100%;
  height: 10vh;
  position: static;
}






.home-title {
  display: flex;
  width: 100%;
  height: fit-content;
  position: relative;
  color: #cc0033;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.home-title button {
  font-size: 3em;
  font-weight: 800;
  text-align: center;
  background: none; /* Remove default button background */
  border: none; /* Remove default button border */
  cursor: pointer; /* Change cursor to pointer */
  color: inherit; /* Inherit color from parent */
  padding: 0; /* Re   move default padding */
}

.page-content {
  position: relative;
  width: 100%;
  height: 90vh;
  top: 10vh;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  box-sizing: border-box;
}

.grid-menu {
  display: grid;
  position: relative;
  perspective: 2000px;
  transform-style: preserve-3d;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
  padding: 5%;
  padding-bottom: 2vh;
  width: 100%;
  max-width: 1920px;
  height: 89%;
  box-sizing: border-box;
  margin-top:0%;
  filter: blur(0px);
  opacity: 1;
  transform: translateY(0%);
  transition: transform 1s ease, opacity 2s ease-in-out, filter 2s ease-in-out;
  overflow: hidden;
  background: none;
}

.grid-menu.hidden {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(-100%);
  background: none;
}

.grid-menu.visible {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0%);
  background: none;
}



.grid-menu.hidden .grid-item {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(-100%);
  background: none;

}

.grid-menu.visible .grid-item{
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0%);
  background: none;
}


.grid-item {
  position: relative;
  perspective: 2000px;
  transform-style: preserve-3d;
  background: none;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  align-content: center;
  border-radius: 10px;
  overflow: hidden;
  object-fit: contain;
  transition: opacity 2s ease-in-out, filter 2s ease-in-out, transform 2s ease-in-out;

  box-shadow: 0 0 10px rgba(250, 235, 215, 0.26);
  transform: translateY(0%);
}

.grid-item a {
  justify-content: center;
  align-items: center;
  align-content: center;
  text-align: center;
  text-decoration: none;
  color: antiquewhite;
  height: 100%;
}

.grid-item img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
 display: flex;
  transform-style: preserve-3d;
  perspective-origin: 50% 50%;
  object-fit: cover;
  object-position: center;


  
}

.grid-item:hover, .grid-item:focus {
 
  transform-style: preserve-3d;
  z-index: 1000;
  filter: blur(0px);
  box-shadow: 0 0 10px rgba(250, 235, 215, 0.27);
  border-radius: 10px;
  overflow: hidden;
  object-fit: contain;
  animation: wigglenGrow 0.5s ease-in-out;
 
}

.grid-item:active {
  transition: transform 2s ease-in-out;

}


@keyframes wigglenGrow {

    0% {
        transform: rotateY(-10deg)  translateY(0px);
        
      }
      25% {
        transform: rotateY(10deg) translateY(-10px);

        
      }
      50% {
        transform: rotateY(-10deg)  translateY(00px);
        
      }

      75% {
        transform: rotateY(10deg) translateY(-10px);

      }
      100% {
        transform: rotateY(0deg) translateY(0px);
      
}
}



.grid-item .caption {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: antiquewhite;
  text-align: center;
  justify-content: center;
  align-items: center;
  align-content: center;
  padding: 10px;
  font-size: 1.2em;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.grid-item:hover .caption {
  opacity: 1;
}

.dark-mode {
  background-color: black;
  color: antiquewhite;
}

.dark-mode a {
  color: antiquewhite;
}





.page-title {
  position: static;
  background: none;
  border: none;
  font-size: calc(1.6rem + 0.9vw);
  font-weight: 600;
  cursor: pointer;
  transition: color 2s ease, text-decoration 0.3s ease;
  width: inherit;
  color: inherit;
  margin-bottom: 3%;
  padding: 0;
}



.page-title:hover,
.page-title:active,
.page-title:focus {
  transition: color 2s ease, text-decoration 2s ease;
}

.container-full {
  position: relative;
  width: inherit;
  height: 100%;
  margin-top: 0%;

}





/* AD CONTENT & PRODUCER CONTENT*/
#AD.hidden  {
  display: none;
  opacity: 0;
  transform:translateX(-100%) ;
  filter: blur(10px) ;
}

#producer.hidden  {
  display: none;
  opacity: 0;
  transform:translateY(-100%) ;
  filter: blur(10px) ;
}

.col-md-4 {
  display: flex ;
  perspective: 2000px;
  transform-style: preserve-3d;

  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
  align-content: center;
  margin-top: 2%;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
  --bs-gutter-x:0;
  --bs-gutter-y:0;  
  
}



.col-md-4:hover, .col-md-4:focus, .col-md-4:active {

  animation: wigglenGrow 2s ease-in-out 2;
  transform: rotateY('0deg');

}




#photo.hidden  {
  display: none;
  opacity: 0;
  transform:translateX(100%) ;
  filter: blur(10px) ;
}

#photo{
  transition: opactiy 2s ease-in,transform 2s ease-in, filter 2s ease-in;
 
}
#AD {
  display: flex;
  position: relative;
  width: inherit;
  
 
  transition: opactiy 2s ease-in-out,transform 1.5s ease-in-out, filter 2s ease-in-out;



}

#producer {
  display: flex;
  position: relative;
  width: inherit;
  
  
  transition: opactiy 2s ease-in-out,transform 1.5s ease-in-out, filter 2s ease-in-out;

}

#amal{
  transition: opactiy 2s ease-in-out,transform 1.5s ease-in-out, filter 2s ease-in-out;
  height: 100%;
 
}

#amal.hidden  {
  display: none;
  opacity: 0;
  transform:translateY(100%) ;
  filter: blur(10px) ;
}

.project-title {
  color: antiquewhite;
  text-align: center;
  font-weight: 900;
}

.section h2 {
  font-weight: 900;
  font-size: calc(1.325rem + 0.9vw);
  margin-bottom: 32px;
}

#projects.hidden  {
  display: none;
  opacity: 0;
  transform:translateX(-100%) ;
  filter: blur(10px) ;
}


.row {
  margin-left: -5px; /* Adjusting margin for smaller gap between thumbnails */
  margin-right: -5px; /* Adjusting margin for smaller gap between thumbnails */
  height: inherit;
  justify-content: center;
 
}

.mt-4{
  margin-top: 0em !important;
  padding: 0%;
}




.thumbnail {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  position: relative;
  transform-style: preserve-3d;
  perspective: 2000px;
  width: 100%;
  object-fit: fill;
  margin-bottom: 2px;
  overflow: hidden;
  background-color:antiquewhite;
  min-width: 100%;
  min-height: 100%;


}

.thumbnail img {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.thumbnail .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: antiquewhite;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
 

}

#projects .row .col-md-4 .thumbnail {
  display: block;
  position: relative;
  width: 100%;
 
  object-fit: scale-down;
}

.thumbnail:hover img {
  transform: scale(1.05);
  animation: thumbnailHover 2s ease-in-out 2;
}

.thumbnail:hover .overlay {
  opacity: 1;
}



.thumbnail p {
  color: antiquewhite;
  text-align: center;
  margin-top: 10px;
}

.project-links {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  align-content: center;
  background-color: #cc0033;
  padding: 2%;
}

.project-desc {
  align-items: center;
  text-align: center;
  margin-top: 3%;
}

.prod-text {
  font-size: 1.2rem;
  background-color: antiquewhite;
  color: black;
  padding: 8%;
  margin-bottom: 10%;
  border-radius: 25px;
  font-weight: 400;
  box-shadow: 0 0 10px rgba(99, 5, 5, 0.2);
  z-index: 100;
}



.prod-text p {
  font-weight: 400;
}

/* MODAL */
.modal-lg {
  --bs-modal-width: 300px;
  
}
.modal-body{
  height: fit-content;


}

.modal-body,
.modal-header {
  background-color: antiquewhite;
}

.modal-body video {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.modal-body img {
  width: 100%;
  margin-bottom: 10px;
  height: auto;
}

.images-container {
  display: grid;
  position: relative;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  align-items: center;
  padding-left: 10%;
  padding-right: 10%;
  gap:0% 3%;


  margin-bottom: 3%;
}

/* PHOTO */


.col-6 {
  padding-left: 5px; /* Adjusting padding for smaller gap between thumbnails */
  padding-right: 5px; /* Adjusting padding for smaller gap between thumbnails */
}

#galleryList {
  display: flex;
  padding-inline-start: 0px;
  padding-left: 0%;
  gap: 50px;
  list-style-type: none;
}

@keyframes fadeInTitle {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#gallery {
  display: grid;
  position: relative;
  grid-template-columns: repeat(1, 1fr);
  width: auto;
  margin-left: 3%;
  grid-gap: 10px;
  overflow: hidden;
  top: 0;
}
#galleryDescription {
  margin-bottom: 3%;
 
  padding: 6%;
 
}

#galleryDescription h2 {
  font-weight: 900;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.overlay img {
  max-width: 80%;
  max-height: 80%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.page-head {
  width: inherit;
  height: fit-content;
  position: relative;
  display: block;
}

/* ABOUT ME PAGE  */

#amal > div > div.col-md-6.content{
  position: relative;
  height: 90%;

}

.content-wrapper {
  background-color: #faebd7; /* Adjust the color and opacity as needed */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Add shadow for better visual separation */
  margin-bottom: 3vh; /* Optional */
}

.content-wrapper p,
.content-wrapper h2,
.content-wrapper h3 {
  color: #000;
}
.contact-wrapper a {
  color: #000;
}

.contact-wrapper {
  display: flex;
  background-color: #faebd7;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 5%;
}

.logos {
  display: inline-block;
  position: relative;
  object-fit: contain;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.logos img {
  max-height: 100%;
}

.contact-wrapper > div > a > img {
  max-width: 6%;
  height: fit-content;
  margin-right: 10%;
  margin-bottom: 2%;
}

/* TEXT & LINKS FORMATTING */

p {
  font-weight: 400;
  font-size: calc(0.6rem + 0.9vw);
}

p1 {
  text-decoration: underline;
  font-weight: 900;
}

a {
  text-decoration: none;
  color: black;
  font-weight: 900;
}

a:hover {
  color: antiquewhite;
}

h5 {
  font-weight: 900;
}

h6 {
  font-weight: 900;
}



@media (max-width: 540px) {
  #film-tv .row .col-md-4 .thumbnail {
    position: relative;
    width: 100%;
   
    object-fit: cover;
    align-items: center;
    justify-content: center;
    margin-bottom: 0px;
    --bs-gutter-x:0;
    --bs-gutter-y:0;  

  }

  .logos{
    justify-content: center;
    align-items: center;
    align-content: center;
    padding: 1%;
    width: 100%;
    height: 100%;

  }

  .modal-body iframe {
    width: 360px;
    height: 200px;
  }

  .prod-text {
    font-size: 1em;
    padding: 6%;
  }

  .modal-body {
    height: inherit;
    width: 100%;
  }

  .images-container {
    height: fit-content;
  }

  .modal-body iframe {
    width: 100%;
    height: 160px;
  }

  .col-md-4 {
    margin-bottom: 10%;
    overflow: hidden;
    padding:6%;  
    width: 90%;

  }

  .modal-body iframe {
    width: 100%;
    height: 160px;
  }

  p {
    font-size: calc(0.6rem + 0.9vw);
  }

  .title {
    font-size: calc(7rem + 0.9vw);
  }

  .title-touch-active{
    color: antiquewhite;
  }
  


  .title:active,
  .title:hover,
  .title:focus {
    font-size: 6em;
    color: antiquewhite;
  }

  #gallery img {
    max-width: 93%;
    max-height: auto;
    margin-bottom: 15%;
  }

  .contact-wrapper > div.logos > a.imdb {
    font-size: 1.3rem;
    font-weight: 900;
  }
}

@media (min-width: 541px) and (max-width: 1024px) {
  .grid-item .caption {
    font-size: 2em;
  }
  .title {
    font-size: 15em;
  }
  .title:active,
  .title:hover {
    font-size: 8cm;
  }

 .section .row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 5%;
  gap: 0% 7%;

}

.logos{
  justify-content: center;
  align-items: center;
  align-content: center;
  padding: 2%;
  width: 100%;
  height: 100%;

}

  .col-md-4 {
  margin-bottom: 10%;
  margin-top: 4%;
  padding: 3%;
  justify-content: center;
  column-gap: 10%;
  
  }

  #gallery {
    grid-gap: 80px;
    padding-left: 15%;
    padding-right: 15%;
    
    justify-content: center;
    align-items: center;

  }



  .modal-lg {
    --bs-modal-width:900px;
    }
  .modal-body iframe {
    width: 100%;
    height: 500px;

  }

  .prod-text {
    padding: 6%;
  }

  .section h2 {
    margin-bottom: 0px;
  }


  p{
    font-size: calc(0.4rem + 1vw);
  }

  


}
@media (min-width: 1025px)  {
.homepage-content{
  
  display: flex;
}
  .homepage{
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
    padding-bottom: 2%;



  }
  /* MENU */

  .home-title{
   opacity: 0;
   
  }

  .home-title:hover{
    opacity: 1;
    transition: opacity 1s ease-in-out;

  }

  .home-title button {
    font-size: 2em;
  }


  .grid-menu {
    display: grid;
    position: relative;
    grid-template-columns: repeat(5, 1fr);
    gap: 40px;
    padding: 0%;
    background: none;
    width: 75%;
    height: 100%;
    bottom: 0%;
    margin-top:0%;
    align-items: center;
    
  }


.grid-item{
  height: 75%;
  justify-content: center;
  align-items: center;
  align-content: center;

}


  .grid-item .caption {
    font-size: 2cqw;
    font-weight: 900;
  }

  .title {
    font-size:calc(10rem + 0.9vw);
  }
  
  .title:active,
  .title:hover {
    font-size: 24em;
  }
/* PAGES GENERAL */
.container-full {
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 0%;
  padding-bottom: 5%;



}

.prod-text {
  padding: 4%;
  margin-bottom: 5%;
}

.col-md-4 {
  margin-bottom: 10%;
  margin-top: 4%;
  padding: 4.3%;
  justify-content: center;
  column-gap: 10%;
}



.section .row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0% 6%;
  
}


.modal-lg {
  --bs-modal-width: 900px;
}

.modal-body iframe {
  width: 100%;
  height: 500px;
}

.images-container {
  grid-template-columns: repeat(2,1fr);
  object-fit: cover;
  padding: 4%;

  
}
.modal-body img {
  margin: 0;
  margin-top: 0% !important;
  padding: 4%;
}



/* PRODUCER */



/* PHOTO */

#gallery  {
grid-template-columns: repeat(3, 1fr);
margin-left: 0%;
align-items: center;
grid-row-gap:30px ;
grid-column-gap:0px ;

}



#galleryDescription {
  margin-bottom: 2%;
  padding: 3%;
}

/* ABOUT PAGE */

.contact-wrapper {
  padding:15px;
}

#amal .row {
  position: relative;
  padding: 40px;
  bottom: 40px;
}


/* TEXT */
p{
  font-size: calc(0.5rem + 0.5vw);
  
}

h2{
  font-size: calc(1.125rem + 0.9vw);

}
h3{
  font-size: calc(0.925rem + 0.9vw);

}



}

@media (min-width: 1920px) {

  .prod-text {
    padding:2%;
  }


  .page-title{
    margin-bottom: 3%;
  }
  .container-full{
   
    max-width: 1920px;
  }

  .grid-menu {
    display: grid;
    position: relative;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 0%;
    padding-bottom: 0%;
    width: 90%;
    height: inherit;
    bottom: 0%;
    margin-top:0%;
   background: none;
  }

  .grid-item .caption {
    font-size: 2em;
  }

  .title {
    font-size: 18em;
  }


  .home-title button{
    font-size: 4.5em;
  }

  .page-content {
    padding: 0 15% 0 15%;
  }
 
  .col-md-6 {
    width: 40%;
  }

.logos{
    justify-content: center;
    align-items: center;
    align-content: center;
    padding: 2%;
    width: 100%;
    height: 100%;

  }

  
.contact-wrapper{
  height: 85px;
}

.contact-wrapper > div > a > img {
  max-width: 60%;
  height: fit-content;
  margin-right: 10%;
 
}


  p{
    font-size: calc(0.6em + 0.2vw);
    
  }

  h2{
    font-size: calc(1.025rem + 0.5vw);
  
  }
  h3{
    font-size: calc(0.925rem + 0.5vw);
  
  }
  
a{
  font-size: calc(0.8rem + 0.5vw);

}

}