/* Nasconde il pulsante scroll to top */
.scroll-to-top {
  display: none !important;
}		

/* Footer attaccato al bottom */
html, body {
  height: 100%;
}

.body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.main {
  flex: 1;
}

/* Custom Page Header Chi Siamo */
.custom-page-header-chi-siamo {
    background-color: #ff7738f8;
    position: relative;
    overflow: hidden;
    min-height: 350px;

    @media (min-width: 1000px) {
        margin: 0 50px 50px !important
    }
}

@media (min-width: 1000px){
    .contacts-page-body-margin {
        margin: 0 50px 50px !important
    }
}

.custom-page-header-chi-siamo-container {
  position: relative;
  z-index: 2;
  padding-top: 80px;
  padding-bottom: 80px;
}

.custom-page-header-bg-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100%;
  z-index: 1;
}

.custom-page-header-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,1) 90%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,1) 90%);
}

@media (max-width: 1000px) {
  .custom-page-header-bg-wrapper {
    width: 100%;
  }
  .custom-page-header-bg-img {
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.2) 100%, rgba(0,0,0,1) 50%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.2) 100%, rgba(0,0,0,1) 50%);
  }
}

@media (max-width: 767px) {
  .custom-page-header-bg-wrapper {
    width: 100%;
  }
  .custom-page-header-bg-img {
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.2) 100%, rgba(0,0,0,1) 50%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.2) 100%, rgba(0,0,0,1) 50%);
  }
}

@media (max-width: 575px) {
  .custom-page-header-bg-wrapper {
    width: 100%;
  }
  .custom-page-header-bg-img {
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.2) 100%, rgba(0,0,0,1) 50%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.2) 100%, rgba(0,0,0,1) 50%);
  }
}

/* Custom Footer */
.custom-footer-orange {
  background-color: #fc702f !important;
}

.custom-header-orange {
  background-color: #fc702f !important;
}

/* Custom Mobile Menu Button */
.header-btn-collapse-nav {
  background-color: #ff7738f8 !important;
  border-color: #ff7738f8 !important;
  color: #ffffff !important;
}

.header-btn-collapse-nav:hover,
.header-btn-collapse-nav:focus {
  background-color: #fc702f !important;
  border-color: #fc702f !important;
  color: #ffffff !important;
}

.header-btn-collapse-nav i {
  color: #ffffff !important;
}

.active {
  background-color: #fc7b3fee !important;
}


.custom-color-primary {
  color: #ff7738f8 !important;
}


.custom-footer-logo {
  background-color: #181818 !important;
}

/* Footer text no wrap */
.custom-footer-orange h4 {
  white-space: nowrap;
}
/* Bottone outline senza riempimento hover */
.btn-outline:hover,
.btn-outline:focus {
  background-color: transparent !important;
  border-color: #7a7a7a !important;
  color: #7a7a7a !important;
}

/* Custom SVG color primary arancione */
.custom-svg-fill-color-primary svg *,
.custom-svg-fill-color-primary svg {
  fill: #ff7738f8 !important;
}

/* Custom fix process-step-circle background */
.process.custom-process-style-1 .process-step-circle {
  background-color: transparent !important;
}

/* Custom Chi Siamo title mobile */
@media (max-width: 999px) {
  .custom-page-header-chi-siamo .col-md-8 {
    text-align: center !important;
  }
  
  .custom-page-header-chi-siamo h1.text-14 {
    text-align: center !important;
    font-size: 3rem !important;
  }
}

/* Titolo sezione arancione Index - più grande specialmente su mobile */
.custom-hero-title {
  font-size: 2rem !important; /* Più grande su mobile rispetto al text-6 standard */
}

@media (min-width: 580px) {
  .custom-hero-title {
    font-size: 2.5rem !important;
  }
}

@media (min-width: 750px) {
  .custom-hero-title {
    font-size: 2.5rem !important;
  }
}

@media (min-width: 1000px) {
  .custom-hero-title {
    font-size: 2.25rem !important;
  }
}

@media (min-width: 1400px) {
  .custom-hero-title {
    font-size: 3.4rem !important;
  }
}