@import url("https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Montserrat:wght@100..900&family=Oxygen:wght@300;400;700&display=swap");
:root {
  --background-color: #101010;
  --tangerine: #eb3d00;
  --arancione: #FF6B2C;
  --white: #ffffff;
  --font-title: "Dela Gothic One", sans-serif;
  --font-p: "Montserrat", sans-serif;
  --tangerine-opacity-50: rgba(206, 97, 57, 0.315);

}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/*@note reset ---------*/
ol,
ul,
li,
a {
  list-style: none;
  text-decoration: none;
  font-family: var(--font-p);
  font-size: 18px;
}
p{ font-size: 18px; margin: 0px !important ;}
li a {
  font-weight: 200;
}

i {
  color: var(--white);
  font-size: 22px; /* leggermente ridotto per mobile ---- */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-title);
  color: var(--white);
}
h6{
  color: var(--tangerine);
}
 /*Font sizes base (mobile-first)------ */
h1,h1,h3,h4,h5,h6{margin: 0;}
h1 { font-size: 36px; } 
h2 { font-size: 30px; }
h4{ font-size: 24px;}
p  { font-size: 16px; }
a  { font-size: 16px; font-family: "Montserrat", sans-serif; }

h2{
  color: var(--tangerine);
  font-weight: 300;
  text-transform: uppercase;
}
h4{
  font-weight: 200;
}
h5{
  font-weight: 200;
  text-transform: uppercase;
  font-size: 20px;
}
p,
a,
span,
li {
  font-family: var(--font-p);
  color: var(--white);
}
body {
  background-color: var(--background-color);
  
    
  
}
.logo img{
  width: 50px;
  margin-bottom: 10px;
}
#titleLanding{
  margin-bottom: 170px;
}
#landing {
  background-image: url(../img/immagineLandingPage.png);
  height: 100vh;
  width: 100%;
  object-fit: contain;
  background-size: cover;
  background-position: center;
  align-items: flex-end; /* testo in basso */
  padding: 0px 16px 48px 16px; /* margini interni */
}
#titleLanding{
  font-size: 36px;
}
#fraseHome{
    font-family: var(--font-title);
    font-weight: 300;
    font-size: 30px;
}
#fixedButton{
  position: fixed;
  width: 200px;
  height: 50px;
  background-color: var(--tangerine);
  text-transform: uppercase;
  bottom: 100px;
  right: 0;
  z-index: 8888;
  text-align: center;
  padding: 0px 20px 0px 20px;
  align-content: center;
  border-radius: 15px 0px 0px 15px ;
  font-family: var(--font-title);
  cursor: pointer;
  font-weight: 500;
  animation: bounceRight 7s ease-in-out infinite;
  display: none;
}
/* Keyframes: piccolo rimbalzo verso sinistra e ritorno */
@keyframes bounceRight {
  0%, 10%, 100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-15px);
  }
  20% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-5px);
  }
  60% {
    transform: translateX(0px);
  }
  /* Da 50% a 100% → rimane fermo (pausa di ~6s) */
}

/*contact mobile */
.contactMobileLink{
  font-family: var(--font-title);
  font-size: 20px;
}
/*header desktop*/
#headerDesk {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999; /* così resta sopra a tutto */
  background-color: var(--background-color); /* importante per non vedere il contenuto sotto */
 
}




/* @note menu mobile*/
#hamIcon{
    width: 30px;
    height: 30px;
    position: absolute;
    overflow: hidden;
    top: 30px;
    right: 10px;
    
}
#hamIcon span{
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--tangerine);
    left: 0;
    transition: transform .3s ease-in-out, opacity .5s ease-in-out, left .3s ease-in-out;
    transform-origin: left;
}
#hamIcon span:nth-of-type(2){
    top:10px;
    opacity: 1;
}
#hamIcon span:nth-of-type(3){
    top:20px;
}
#hamIcon.open span:nth-of-type(1){
    transform: rotate(45deg);
    top: -1px;
    z-index: 9999;
}
#hamIcon.open span:nth-of-type(3){
    transform: rotate(-45deg);
    z-index: 9999;
}
#hamIcon.open span:nth-of-type(2){
    left: -100%;
    opacity: 0;
    z-index: 9999;
}
#menuMobile{
    position: fixed;
    top:0;
    left:-100%;
    z-index: 9;
    width: 100%;
    height: 100vh;
    background-color: var(--background-color);
    transition: all 1s ease-in-out;
    
}
#wrapperMenuMobile{
    display: flex;
    padding:30px;
    flex-direction: column;
    justify-content: center;
    ;
    align-items: center;
    height: 100%;
}
#wrapperMenuMobile nav ul {
    list-style-type: none;
    
}
#wrapperMenuMobile nav ul li a{
    display: block;
    font-size: 28px;
    padding:8px 0;
    font-weight: 200;
    font-family: var(--font-title);
    color:var(--tangerine);
    text-decoration: none;
    text-transform: uppercase;
}
#socialMobile a i{
  color: var(--tangerine);
  margin: 30px 25px;
  font-size: 30px;

}
#contactMobile
{
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  height: 60px;
  z-index: 10;
  align-items: center;
  justify-content: center;
  background-color: var(--tangerine);
  color: var(--white);
 
  text-transform: uppercase;
  
  

}
#contactMobile a {
  animation: pulse 4s infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

  
  



/*@note preloader*/
/* Preloader full screen */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--background-color); /* colore di sfondo */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* Spinner animato */
.pulse {
  
  animation: pulse 1.5s infinite ease-in-out;
}


/* Animazione rotazione */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Stato nascosto */
#preloader.hidden {
  opacity: 0;
  visibility: hidden;
}









.titleTag{
  display: flex;
  align-items: center;
  justify-content: center;
  
  margin-bottom: 30px;
  
  
  
}
.titleTag p{
  margin-bottom: 0px;
  margin-left: 50px;
  
}

li a:hover{
  color: var(--tangerine);
  transition: ease-in-out 0.3s ;
}

.imgMe{
  width: 350px;

}
.testoBonsai{
  color: var(--white);
  text-transform: capitalize;
  
}
.testoInkroots{
  color: var(--white);
  text-transform: capitalize;

}
.buttonView {
    width: 220px;
  height: 50px;
  text-align: center;
  align-items: center;
  font-family: var(--font-p);
  background-color: var(--tangerine);
  border: 1px solid var(--tangerine);
  margin-top: 20px;
  
  border-radius: 15px;
  transition: ease-in-out .4s;  /* Animation */
  }
.buttonView:hover{
  background-color: var(--tangerine);
  color: var(--white);
  transform: scale(0.8);
  cursor: pointer;
} 

.buttonForm i{
  color: var(--tangerine);
  border: none;
  font-size: 50px;
}
.buttonForm {
  color: var(--tangerine);
  border: none;
  background-color: var(--background-color);
}
/*@note ACCORDION*/
.accordion {
  background-color: var(--background-color);
  color:  var(--arancione);
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;

  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: var(--arancione); 
  color: var(--white);
}
.accordion{
  font-family: var(--font-title);
  font-size: 20px;
  padding: 20px;
  border: 1px solid var(--tangerine-opacity-50);
  border-radius: 15px;
}
.panel {
  padding: 0 18px;
  display: none;
  background-color: var(--background-color);
  color: var(--white);
    overflow: hidden;
    
    padding-bottom: 20px;
  
}
.panel p{
  line-height: 150%;
}
.whatCan{
  text-transform: uppercase;
  color: var(--tangerine);
}

.aboutMeText{
text-align: center;
line-height: 150%;

}





/*inizio swiper css*/
.mySwiper1 {
  width: 100%;
  overflow: hidden;
}
.mySwiper1 {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.swiper-wrapper1 {
  display: flex;
  width: max-content;
  animation: scroll 18s linear infinite;
}

.swiper-slide1 {
  width: auto;
  margin-right: 50px;
}






.softSkill {
  height: 50px;
  background-color: var(--arancione);
  color: var(--white);
  padding: 0 20px;
  border-radius: 15px;
  border: none;
  white-space: nowrap;
}

/* Animazione continua */
@keyframes scroll {
  from {
    transform: translateX(100vh);
  }
  to {
    transform: translateX(-100%);
  }
}

.softSkill h5{
  font-family: var(--font-p);
  font-size: 20px;
  text-transform: uppercase;
  
}
.containerSkillBox{
  width: 100%;
  height: auto;
  background-color: var(--tangerine);
  border-radius: 15px;
  padding: 8px;
  background-color: #0d0d0d;
  border: 1px solid var(--tangerine-opacity-50);
}
.skillBox{
  width: 100%;
  height: auto;
  background-color: #101010;
  align-items: center;
  justify-content: center;
  
}
.favoriteStackHead{
  background-color: #101010;
  border: 1px solid var(--tangerine-opacity-50);
   align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  border-radius: 15px;
  margin-bottom: 15px;
  height: auto ;
}
.favoriteStackHead i{
  font-size: 32px;
  color: var(--arancione);
}
.favoriteStackBody{
  background-color: #101010;
  border: 1px solid var(--tangerine-opacity-50);
  padding: 20px 20px;
  border-radius: 15px;
  height: 100%;
  overflow: hidden;
  line-height: 150%;
  text-align: center;
}
.favoriteStackBody h5{
  text-align: center;
  padding: 10px 5px;
  color: var(--arancione);
}













/*@note Contact FormSection !!!!!!!!!!*/




.socialBar i{
  color: var(--tangerine);
  padding-right: 30px;
  padding-top: 20px;
}
.socialBar i:hover{
  color: var(--white);
  padding-right: 30px;
  transition: ease-in-out 0.3s ;
  cursor: pointer;
}
.buttonContact{
  background-color: var(--background-color);
  border: none;

  
}



.buttonContact  a i{
  color: var(--tangerine);
  font-size: 50px;
  background-color: var(--background-color);
  
 
  
  
}

.buttonContact i:hover{
  color: var(--white);
  transition: ease-in-out 0.33s;
}




.containerContact{
  text-transform: uppercase;
  font-weight: 400;
  color: var(--tangerine);
}
.containerContact h1{
  text-transform: uppercase;
  font-weight: 400;
  color: var(--tangerine);
  font-size: 58px;
}

.fullName input{
  background-color: var(--background-color);
  border: none;
  
  letter-spacing: 1px;

}
.fullName {
  width: 80%;
  border-bottom: 1px solid var(--tangerine) !important;
}
.fullName input:focus{
  outline: none;
  background-color: var(--tangerine-opacity-50);
  width: 80%;
  color: var(--white);
}

.fullName input:focus::placeholder{
  color: transparent;
}

.contactFormBox input:focus{
  color: var(--white);
}

.contactFormBox input{
  color: var(--white);
}
.messageForm textarea{
  color: var(--white);
  caret-color: #fff
}
.messageForm textarea{
  width: 80%;
}






.emailForm input{
  background-color: var(--background-color);
  border: none;
  
  letter-spacing: 1px;
}
.emailForm input:focus{
  outline: none;
  background-color: var(--tangerine-opacity-50);
  text-transform: lowercase;
}
.emailForm input:focus::placeholder{
  color: transparent;
}

.emailForm{
  border-bottom: 1px solid var(--tangerine) !important;
  width: 80%;
}



















.phoneForm input{
  background-color: var(--background-color);
  border: none;
  
  letter-spacing: 1px;
}
.phoneForm{
  border-bottom: 1px solid var(--tangerine) !important;
  width: 80%;
}
.phoneForm input:focus{
  outline: none;
  background-color: var(--tangerine-opacity-50);
  text-transform: lowercase;
  
}
.phoneForm input:focus::placeholder{
  color: transparent;
}

.checkBox{
  font-family: var(--font-p);
  color: var(--white);
  text-transform: none;
  font-size: 13px;
  letter-spacing: 1px;
  
  
}



.checkBox a{
  color: var(--tangerine);
  font-size: 13px;
}
.checkBox a:hover{
  color: var(--white);
  font-size: 13px;
  cursor: pointer;
  transition: ease-in-out 0.3s;
}



/*@note footer css-----------------------------------------*/
#footer{
  background-color: var(--arancione);
  
}
.titleFooter{
  text-transform: none;
  color: var(--white);
  font-size: 28px;
}
.linkFooter{
  font-size: 32px;
  font-family: var(--font-title);
}
.socialFooter:hover,.socialFooter i:hover{
  color: var(--tangerine); 
  transition: color 0.3s ease;
  cursor: pointer;
}
.iconFooter:hover .linkFooter,
.iconFooter:hover i {
  color: var(--tangerine); /* colore che vuoi al passaggio */
  transition: color 0.3s ease;
}



/*@note mediaquery*/
@media (min-width: 576px) {
  h1 { font-size: 42px; }
  h2 { font-size: 32px; }
  h3{ font-size: 28px;}
  h4{ font-size: 24px;}
  h5{ font-size: 20px;}
}

@media (min-width: 768px) {
  h1 { font-size: 52px; }
  h2 { font-size: 42px; }
  h3{ font-size: 38px;}
  h4{ font-size: 32px;}
  h5{font-size: 28px;}
  #titleLanding{ font-size: 52px;}
  
  .testoBonsai{
    font-size: 32px;
    color: var(--white) !important;
  }
  .testoInkroots{
    font-size: 32px;
    color: var(--white) !important;
  }
  #fraseHome{
    font-family: var(--font-title);
    font-weight: 300;
    font-size: 42px;
}
a{
  font-size: 18px;
}
#hamIcon{
  display: none;
}
.favoriteStackHead i{
  font-size: 32px;
}
.fullName {
  width: 100%;
  border-bottom: 1px solid var(--tangerine) !important;
}
.emailPhone{
  overflow: hidden;
}

.iconFooter i{
  font-size: 26px;
}
.messageForm textarea{
  width: 100%;
}

}


@media (min-width: 992px) {
  h1 { font-size: 62px; }
  h2 { font-size: 52px; }
  h3{ font-size: 42px;}
  h4{ font-size: 38px;} 
  p{ font-size: 18px;}
  #fixedButton{display: block;}
  #titleLanding{ font-size: 62px;}
  .testoBonsai{
    font-size: 52px;
    color: var(--white);
  }
  .testoInkroots{
    font-size: 52px;
    color: var(--white);
  }
  a{
    font-size: 20px;
  }
  #fraseHome{
    font-family: var(--font-title);
    font-weight: 300;
    font-size: 48px;
}
#fixedButton{
  display: none;
}

/* #inkrootsImg{
  background-image: url(../img/Group\ 43.png);
  
   height: 700px;
  background-repeat: no-repeat;
  object-fit: cover;
  background-position: start;
}

#bonsaibreezeImg{
  background-image: url(../img/Group\ 42.png );
  
 
  background-position: start;
  
  height: 700px;
 
  background-repeat: no-repeat;
  object-fit: cover;
} */



.imgMe{
  width: 500px;
}
.aboutMeText{
text-align: start;
line-height: 150%;
}


.testoCardDesk{
  text-align: start;
  line-height: 150%;
}
.logo img{
      width: 60px;
      margin-bottom: 15px;
}
#titleLanding{
  margin-bottom: 40px;
}
.favoriteStackHead i{
  font-size: 38px;
}
.favoriteStackBody h5{
  font-size: 26px;
 
}
.favoriteStackBody{
  text-align: start;
  line-height: 150%;
}
.linkFooter{
  font-size: 48px;
}
.iconFooter i{
  font-size: 32px;
}
}


@media (min-width: 1200px){
  h1 { font-size: 62px; }
  h2 { font-size: 52px; }
  h3{ font-size: 46px;}
  h4{ font-size: 42px;}
  h5{ font-size: 22px;}
  .testoBonsai{
    font-size: 52px;
    color: var(--white);
  }
  .testoInkroots{
    font-size: 52px;
    color: var(--white);
  }
p{ font-size: 20px;}
#fixedButton{
  display: block;
}
#fraseHome{
    font-family: var(--font-title);
    font-weight: 300;
    font-size: 52px;
}
#contactMobile{
  display: none;
}
#fixedButton{
  width: 250px;
  height: 60px;
  
}
#fixedButton a{
  
  font-size: 18px;
}
.buttonEmpty{
  width: 250px;
  height: 60px;
  
}
body{
  padding: 0 !important;
}
.imgMe{
  width: 680px;
}
.favoriteStackHead i{
  font-size: 48px;

}
.linkFooter{
  font-size: 54px;
}
}


@media (min-width: 1400px){
p{ font-size: 20px;}
.testoBonsai{
    font-size: 52px;
    color: var(--white);
  }
  .testoInkroots{
    font-size: 52px;
    color: var(--white);
  }
  #fraseHome{
    font-family: var(--font-title);
    font-weight: 300;
    font-size: 52px;
}
#fixedButton a{
  
  font-size: 20px;
}
nav ul li a{
  font-size: 20px;
}
.linkFooter{
  font-size: 62px;
}
}