/* FONT FAMILY */
@font-face {
  font-family: "etna-font";
  src: url("/font/etna-free-font.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* @font-face {
  font-family: "orbitron", sans-serif;
  src: url("/font/Orbitron-VariableFont_wght.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
} */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

body {
    background-color: #1e1e1e;
    /* background-image: url(/images/background\ line.png); */
    background-size: contain;  
}

header {
  background-image: url("/images/HEADER.png");
  background-size: cover;         
  background-repeat: no-repeat;
  background-position: center top; 
  

  margin-bottom: 0;
  max-height: 30vh; 
  max-height: 60vh;
  padding: 10px;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}


header img {
  height: auto;
  display: block;
  height: auto;
}

@media (max-width: 768px) {
  header img {
    width: 90%;
  }
}

@media (max-width: 480px) {
  header img {
    width: 100%;
  }
}


.inertzia-studio-txt {
  font-family: "orbitron";
  font-size: 40px;
  font-weight: bolder;
  padding-bottom: 20px;
}
/* -------------------------------- PARALLASSE */
.parallax {
    position: fixed;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 1%;
    /* overflow: hidden; */
}
/* -------------------BACKGROUND */
.bg {
  position: fixed;
  /* top: 0; */
  /* left: 0; */
  width: 110%;
  height: 110%;
  transform: translate(-5%, -5%) scale(1.2);
  background-size: cover;
  background-position: center;
  will-change: transform;
  pointer-events: none;
}

#bg1 { background-image: url("/images/Backgroun-line/Background\ line\ lv.1.png"); z-index: 1; }
#bg2 { background-image: url("/images/Backgroun-line/Background\ line\ lv.2.png"); z-index: 2; }
#bg3 { background-image: url("/images/Backgroun-line/Background\ line\ lv.3.png"); z-index: 3; }

/* #bg4 { background-image: url("/images/Backgroun-line/LINEE-BG/Background\ line\ lvL4.png"); z-index: 4; }
#bg5 { background-image: url("/images/Backgroun-line/LINEE-BG/Background\ line\ lvL5.png"); z-index: 5; }
#bg6 { background-image: url("/images/Backgroun-line/LINEE-BG/Background\ line\ lvL6.png"); z-index: 6; }
#bg7 { background-image: url("/images/Backgroun-line/LINEE-BG/Background\ line\ lvL7.png"); z-index: 7; }
#bg8 { background-image: url("/images/Backgroun-line/LINEE-BG/Background\ line\ lvL8.png"); z-index: 8; }
#bg9 { background-image: url("/images/Backgroun-line/LINEE-BG/Background\ line\ lvL9.png"); z-index: 9; }
#bg10 { background-image: url("/images/Backgroun-line/LINEE-BG/Background\ line\ lvL10.png"); z-index: 10; }
#bg11 { background-image: url("/images/Backgroun-line/LINEE-BG/Background\ line\ lvL11.png"); z-index: 11; }
#bg12 { background-image: url("/images/Backgroun-line/LINEE-BG/Background\ line\ lvL12.png"); z-index: 12; }
#bg13 { background-image: url("/images/Backgroun-line/LINEE-BG/Background\ line\ lvL13.png"); z-index: 13; }
#bg14 { background-image: url("/images/Backgroun-line/LINEE-BG/Background\ line\ lvL14.png"); z-index: 14; }
#bg15 { background-image: url("/images/Backgroun-line/LINEE-BG/Background\ line\ lvL15.png"); z-index: 15; }
#bg16 { background-image: url("/images/Backgroun-line/LINEE-BG/Background\ line\ lvL16.png"); z-index: 16; }
#bg17 { background-image: url("/images/Backgroun-line/LINEE-BG/Background\ line\ lvL17.png"); z-index: 17; }
#bg18 { background-image: url("/images/Backgroun-line/LINEE-BG/Background\ line\ lvL18.png"); z-index: 18; } */

#bg1 { transform: translateZ(-200px) scale(1.3); }
#bg2 { transform: translateZ(-100px) scale(1.15); }
#bg3 { transform: translateZ(0px); }

/* #bg1  { transform: translateZ(-200px) scale(1.30); }
#bg2  { transform: translateZ(-188px) scale(1.29); }
#bg3  { transform: translateZ(-176px) scale(1.28); }
#bg4  { transform: translateZ(-164px) scale(1.27); }
#bg5  { transform: translateZ(-152px) scale(1.26); }
#bg6  { transform: translateZ(-140px) scale(1.25); }
#bg7  { transform: translateZ(-128px) scale(1.24); }
#bg8  { transform: translateZ(-116px) scale(1.23); }
#bg9  { transform: translateZ(-104px) scale(1.22); }
#bg10 { transform: translateZ(-92px)  scale(1.21); }
#bg11 { transform: translateZ(-80px)  scale(1.20); }
#bg12 { transform: translateZ(-68px)  scale(1.19); }
#bg13 { transform: translateZ(-56px)  scale(1.18); }
#bg14 { transform: translateZ(-44px)  scale(1.17); }
#bg15 { transform: translateZ(-32px)  scale(1.16); }
#bg16 { transform: translateZ(-20px)  scale(1.15); }
#bg17 { transform: translateZ(-10px)  scale(1.08); }
#bg18 { transform: translateZ(0px)    scale(1.00); } */

/* --------------------------- MAIN CONTAINER */

.main-container {
  position: relative;
  background-color: #1e1e1e;
  /* background-image: url(/images/background\ line.png); */
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  padding: 10px;
  z-index: 1;
}

/* ------- VIDEO HOMEPAGE */
.hero-video {
  position: relative;
  width: 100vw;
  height: 90vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.hero-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  font-family: "Orbitron", sans-serif;
  text-align: center;
  background: rgba(0, 0, 0, 0.2); /* leggero filtro */
}

.scroll-down {
  position: absolute;
  bottom: 120px;
  font-size: 2rem;
  cursor: pointer;
  animation: bounce 1.5s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

                    /*--------------- CONTATTAMI BOTTONE */
.contact-me {
  display: flex;
  justify-content: center; 
  align-items: center;  
  font-size: 24px;

  border: 3px solid crimson;
  border-radius: 20px;
  /* background-color: #b3ff00; */

  width: 50%;
  height: 40px;

  margin: 50px;
  margin-left: auto;
  margin-right: auto;
  transition: all 0.5s ease-in-out;
}

.contact-me a {
  display: flex;
  justify-content: center;
  align-items: center;
  
  width: 100%;
  height: 100%;

  font-size: 25px;
  font-weight: bolder;
  font-family: "orbitron";

  text-align: center; 
  color: #b3ff00 ;
  text-decoration: none;
  transition: all 0.5s ease-in-out;
  
}

.contact-me:hover {
  background-color: crimson;
  border-radius: 30px;
  border:3px solid #b3ff00;
    width: 45%;

}

/* .contact-me:hover a {
  color: #000000;
} */

/* -------------------------- COMING SOON */

.coming-soon {
  font-family: "orbitron";
  font-size: 20px;
  margin-bottom: -100px;

  color: #b3ff00;
}


                 /*---------------------ICONE LINK SOCIAL*/

.link-social {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 10px;
  margin: 20px auto;
}

.link-social img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  cursor: pointer;
  opacity: 75%;
  transition: 0.5s;
}

.link-social img:hover {
  width: 85px;
  height: auto;
  opacity: 100%;
}

/* --------------------------------         DIV PRODOTTI */

.link-corsi {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.box-corsi {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(/images/Mantide_front.png);
    background-size: cover;
    background-position: center;
    margin: 60px auto;
    height: 300px;
    width: 70%;
    border-radius: 20px;
    overflow: none;
}

.overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 85%;
    height: 70%;
    background-color: rgba(58, 58, 58, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 3px solid crimson;
    color: #fff;
    padding: 20px;
    transition: all 1s ease;
    overflow: hidden;
}

.overlay:hover {
  transform: translate(-50%, -50%) scale(1.15, 1.3);
  backdrop-filter: blur(0px);
  border: 6px solid #b3ff00;
  border-radius: 25px;
}

.overlay img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  width: 30%;
  height: auto;
  transform-origin: center center;
  transform-style: preserve-3d;
  transition: all 1s ease;
}

.overlay:hover img {
  width: 20%;
  left: 20px;
  transform: translateY(-50%) rotate(90deg) ;
  object-fit: contain;

}


/*                                                PRODOTTI */

.link-prodotti {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}


.box-prodotti {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(/images/Mantide_Human.png);
    background-size: cover;
    background-position: center;
    margin: 60px auto;
    height: 300px;
    width: 70%;
    border-radius: 20px;
    overflow: none;
}

.overlay-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 85%;
    height: 70%;
    background-color: rgba(58, 58, 58, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 3px solid rgb(14, 105, 209);
    padding: 20px;
    transition: all 1s ease;
    overflow: hidden;
}

.overlay-2:hover {
  transform: translate(-50%, -50%) scale(1.15, 1.3);
  backdrop-filter: blur(0px);
  border: 6px solid rgb(179, 255, 0);
  border-radius: 25px;
}

.overlay-2 img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  width: 50%;
  height: auto;
  /* transform-origin: center center; */
  transform-style: preserve-3d;
  transition: all 1s ease;
}

.overlay-2:hover img {
  width: 20%;
  left: 10px;
  transform: translateY(-50%) rotate(-90deg) ;
  object-fit: contain;
}


/*--------------------------PORTFOLIO*/
.link-portfolio {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}


.box-portfolio {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(/images/Portfolio-pianta.png);
    background-size: cover;
    background-position: center;
    margin: 60px auto;
    height: 300px;
    width: 70%;
    border-radius: 20px;
    overflow: none;
}

.overlay-portfolio {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 85%;
    height: 70%;
    background-color: rgba(58, 58, 58, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 3px solid rgb(14, 105, 209);
    padding: 20px;
    transition: all 1s ease;
    overflow: hidden;
}

.overlay-portfolio:hover {
  transform: translate(-50%, -50%) scale(1.15, 1.3);
  backdrop-filter: blur(0px);
  border-radius: 25px;
  border: 6px solid #b3ff00;
}

.overlay-portfolio img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  width: 50%;
  height: auto;
  transform-origin: center center;
  transform-style: preserve-3d;
  transition: all 1s ease;
}

.overlay-portfolio:hover img {
  width: 20%;
  left: 10px;
  transform: translateY(-50%) rotate(90deg) ;
  object-fit: contain;
}

                  /*---------------------ICONE LINK SOCIAL*/

.link-social {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  /* padding: 10px; */
  margin: 20px auto;
}

.link-social img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  cursor: pointer;
  margin-top: 30px;
  opacity: 75%;
  transition: all 0.5s ease-in-out;
}

.link-social img:hover {
  width: 60px;
  height: 60px;
  gap: 30px;
  opacity: 100%;
}

/* --------------------------- FOOTER */

.site-footer {
  background-image: url("/images/FOOTER.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center; 

  text-align: center;
  font-family: "etna-font";
  font-size: 17px;
  color: rgb(0, 0, 0);

  margin-top: 2em;
  min-height: 30vh; /* si adatta allo schermo */
  max-height: 40vh;
  
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.copy-footer {
  display: flexbox;
  text-align: center;
  align-items: center;
  justify-content: center;
}


                           /*---------CONTATTO MAIL */
                           
.contact-mail {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  background-color: none;
  border: 3px solid #1e1e1e;
  border-radius: 20px;
  
  width: 50%;
  height: 60px;
  margin: 10px auto;

  text-align: center;
  transition: all 0.5s ease-in-out;

}

.contact-mail a {
  font-size: 20px;
  font-family:"orbitron";
  text-decoration: underline;
  font-weight: bold;

  color: #1e1e1e;
  width: 100%;
  height: 100%;

  display: flex;              
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
}

.contact-mail:hover {
  background-color: crimson;
  border-radius: 30px;
  width: 45%;

}

.contact-mail a:hover {
  font-size: 25px;
  font-weight: bolder;
  color: #000000;
  text-decoration: none;


}







/*            MENU LATERALE */

/* .menu-icon {
  width: 35px;
  height: 25px;
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.menu-icon span {
  display: block;
  height: 4px;
  width: 100%;
  background: #333;
  border-radius: 2px;
  transition: all 0.3s ease;
}
.menu-icon.active span:nth-child(1) {
  transform: rotate(-45deg) translate(0px,11px);
  width: 65%;
}

.menu-icon.active span:nth-child(2) {
  transform: translate(10px, 5px);
  opacity: 1;
}

.menu-icon.active span:nth-child(3) {
  transform: rotate(45deg) translate(2px, -5px);
  width: 65%;
}
 */