/*!
 custom CSS for Zextras
 */

 html, body {width: auto!important; overflow-x: hidden!important}

/* ===== FIX SOLO BOTTONI nel TFOOT (mobile) ===== */
@media (max-width: 768px){

  /* Trasforma SOLO la riga del footer in layout a colonna */
  .table-compare-wrapper tfoot tr{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding: 14px 12px;
  }

  /* Ogni cella footer prende tutta la larghezza */
  .table-compare-wrapper tfoot th{
    display:block;
    width:100% !important;
    padding:0 !important;
    text-align:center !important;
    background: transparent !important;
  }

  /* Bottoni: belli larghi e centrati */
  .table-compare-wrapper tfoot th a.btn{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:100% !important;
    max-width: 360px;     /* opzionale */
    margin:0 auto !important;
    white-space: normal;  /* evita tagli strani */
    line-height:1.15;
  }

  /* Riduci leggermente i btn-lg su mobile */
  .table-compare-wrapper tfoot th a.btn.btn-lg{
    font-size: 14px;
    padding: 12px 14px;
  }
}

.typewriter h1 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: 5px solid #182126; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: 0em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #00506d }
}

.hovertext:before {
  content: attr(data-hover);
  visibility: hidden;
  font-weight: normal;
  opacity: 0;
  width: 190px;
  background-color: var(--color-abyss);
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 3px 0;
  transition: opacity 1s ease-in-out;

  position: absolute;
  z-index: 1;
  left: 0;
  
}
.bg-black {
  background-color: #000 !important;
}

.bg-carbon [data-lucide] {
  stroke: white;
} 
.whycarbonio{
  background: linear-gradient(to bottom, #000 0%, #182126 100%);
  color: white;
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
}
.section-demanding {
  background: linear-gradient(to bottom, #00506d 0%, #182126 100%);
  color: white;
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
}

.hovertext:hover:before {
  opacity: 1;
  visibility: visible;
}
@media only screen and (max-width: 767px) {
.hovertext:before {
  width: 300px;
  height:190px;
  }  
}

.display-6 {
  font-size: 1.5em;
}

.new,
.new_blue,
.new_white {
  border: 0;
  height: 4px;
  width: 15%;
  margin-left: 0;
}
.new {
  background: linear-gradient(90deg, rgba(229,26,26,1) 0%, rgba(230,32,25,1) 26%, rgba(253,131,11,1) 64%, rgba(253,131,11,1) 100%);
}
.new_blue {
  background: linear-gradient(90deg, rgba(0,80,109,1) 0%, rgba(0,80,109,1) 37%, rgba(108,154,171,1) 78%, rgba(255,255,255,1) 100%);
}
.new_white {
  background: rgb(255, 255, 255);
}
.banner_carbonio {
  background-image: url("/images/banner_carbonio.png");
  background-repeat: no-repeat;
  height: 870px;
}
.carbon {
  background-color: var(--color-carbon);
  height: 950px;
}

body {
  font-size: 1rem;
}

@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

a,
input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}
/* start custom btn download Zextras */

/* end custom btn download Zextras */

/* start custom btn contact Zextras */
/* end custom btn contact Zextras */

/* start custom btn support Zextras */
.btn-zextras,
.btn-zextras.disabled,
.btn-zextras:disabled,
.btn-zextras:not(:disabled):not(.disabled):active,
.btn-zextras:not(:disabled):not(.disabled).active,
.show > .btn-zextras.dropdown-toggle {
  color: var(--color-snow);
  background-color: var(--color-magma);
  border-color: var(--color-magma);
  font-weight: 500;
}
.btn-zextras:hover {
  color: var(--color-magma);
  background-color: var(--color-snow);
  border-color: var(--color-magma);
}
.btn-zextras:focus,
.btn-zextras.focus {
  color: var(--color-magma);
  background-color: var(--color-snow);
  border-color: var(--color-magma);
}
.btn-zextras:not(:disabled):not(.disabled):active:focus,
.btn-zextras:not(:disabled):not(.disabled).active:focus,
.show > .btn-zextras.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(230, 48, 57, 0.5);
}
/* end custom btn support Zextras */

/* start custom btn Carbonio */
.btn-carbonio,
.btn-carbonio.disabled,
.btn-carbonio:disabled,
.btn-carbonio:not(:disabled):not(.disabled):active,
.btn-carbonio:not(:disabled):not(.disabled).active,
.show > .btn-carbonio {
  color: var(--color-snow);
  background: rgb(229, 26, 26);
  background: linear-gradient(
    90deg,
    rgba(229, 26, 26, 1) 0%,
    rgba(232, 39, 24, 1) 32%,
    rgba(253, 131, 11, 1) 87%,
    rgba(253, 131, 11, 1) 100%
  );
  padding: 15px 32px;
  text-align: center;
  border: 1px solid transparent;
  font-weight: 600;
}
.btn-carbonio:hover {
  color: var(--color-magma);
  background: var(--color-snow);
  border-color: var(--color-magma);
}
.btn-carbonio:focus,
.btn-carbonio.focus {
  color: var(--color-magma);
  background: var(--color-snow);
  border-color: var(--color-magma);
}
.btn-carbonio:not(:disabled):not(.disabled):active:focus,
.btn-carbonio:not(:disabled):not(.disabled).active:focus,
.show > .btn-carbonio.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(230, 48, 57, 0.5);
}
/* end custom btn Carbonio */

/* start custom btn theme Zextras */
/* end custom btn theme Zextras */

:where(h1, h2, h3, h4, h5, h6) {
  color: var(--color-abyss);
  margin-bottom: 1rem;
}

/*h2 {
  font-size: 1.5rem;
}*/
.h_small {
  font-size: 1.1em;
}
.lower-latin {
  list-style-type: lower-latin;
}

:where(a) {
  color: var(--color-magma);
  font-weight: 300;
}

:where(a):hover {
  color: var(--color-magma);
  text-decoration: underline;
}

code {
  background: rgba(0, 0, 0, 0.65);
  padding: 0.5rem;
  color: #efefef;
  border: 2px dashed #d22936;
  line-height: 3em;
}

/* start custom navbar Zextras */

.navbar-dark .navbar-nav .nav-link {
  color: rgb(255, 255, 255);
}
.dropdown-menu {
  border: 0;
  border-radius: 1rem;
}
.overlays-link-zextras {
  background: rgba(255, 255, 255, 0.8);
}
.overlays-link-zextras a {
  color: var(--color-carbon);
  padding: 1rem 1.5rem;
}
.overlays-link-zextras a:hover,
.overlays-link-zextras a:focus {
  background: none !important;
  color: var(--color-magma);
}
/* end custom navbar Zextras */

/* start custom nav button Zextras */
/* end custom nav button Zextras */

/* ===== HERO sections ===== */
.hero,
.hero-home,
.hero-carbonio,
.hero-carbonio-open,
.hero-become-partner,
.hero-find-partner,
.hero-thankyou-ce {
  width: 100%;
  height: 1000px;
  padding: 150px 0 0 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* Promote to GPU layer to avoid scroll jitter on Chrome with bg-cover repaints */
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}
.hero-thankyou-ce {
  height: 1080px;
  background-image: url("/images/thankyou_carbonioce.webp");
}
.hero-become-partner {
  background-image: url("/images/hero_become_a_partner.webp");
}
.hero-find-partner {
  background-image: url("/images/hero_find_a_partner.webp");
}

@media (min-width: 320px) {
  .display-3 {
    font-size: 4rem;
  }
  .hero-home {
    background-image: url("/images/homepage_zextras_800x1200.webp");
  }
  .hero-carbonio {
    background-image: url("/images/zextras_carbonio_hero_800x1200.webp");
  }
  .hero-carbonio-open {
    background-image: url("/images/carbonio_community_800x1200.webp");
  }
  .hero-jzp {
    background-image: url("/images/hero_about_us_800x1200.webp");
  }
  .btn-carbonio {
    margin-bottom: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .hero-home {
    background-image: url("/images/homepage_zextras_1920x1080.webp");
  }
  .hero-carbonio {
    background-image: url("/images/zextras_carbonio_hero_1920x1080.webp");
  }
  .hero-carbonio-open {
    background-image: url("/images/carbonio_community_1920x1080.webp");
  }
  .hero-jzp {
    background-image: url("/images/hero_about_us_1920x1080.webp");
  }
}

.hero-jzp {
  width: 100%;
  height: 900px;
  padding: 150px 0 0 0;
  background-color: var(--color-abyss);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero-abyss {
  width: 100%;
  padding: 150px 0 0 0;
  background-color: var(--color-abyss);
}

.bg-carbon-partner {
  background-color: var(--color-carbon);
  height: 300px;
  margin-top: 80px;
}

.negative_position {
  margin-top: -165px;
}

@media (min-width: 320px) {
    .negative_position {
    margin-top: -30px;
  }
  .bg-carbon-partner {
    background-color: var(--color-carbon);
    height: 90px;
    margin-top: -8px;
  }
}
@media (min-width: 480px) {
    .negative_position {
    margin-top: -10px;
  }
  .bg-carbon-partner {
    background-color: var(--color-carbon);
    height: 300px;
    margin-top: -10px;
  }
}
@media (min-width: 768px) {
    .negative_position {
    margin-top: -113px;
  }
  .bg-carbon-partner {
    background-color: var(--color-carbon);
    height: 287px;
    margin-top: 32px;
  }
}
@media (min-width: 1200px) {
    .negative_position {
    margin-top: -165px;
  }
  .bg-carbon-partner {
    background-color: var(--color-carbon);
    height: 300px;
    margin-top: 80px;
  }

}

.h_gradient_sunset {
  background: #E51A1A;
  background: linear-gradient(to top, #E51A1A 0%, #FD830B 69%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* end oval Zextras */

/* start img center */

.mt-5,
.my-5 {
  margin-top: 5rem !important;
}

/* start position relative */

.bg-white {
  background-color: var(--color-snow) !important;
}

@media (min-width: 576px) {
  }

/* end position relative */

/* start settings header text */

/* end settings header text */

/* start footer Zextras */
.site-footer,
.site-footer a {
  color: var(--color-snow);
  text-transform: none;
}
.site-footer {
  font-size: 0.8rem;
  background-color: var(--color-carbon);
}
.site-footer a {
  padding: 0;
}
.site-footer ul {
  padding: 0.8rem 0;
}
.tap {
  padding: 0.8rem 0 !important;
}

.btn-floating::before {
  border-radius: 0;
}

.btn-floating.btn-sm {
  width: 36.15385px;
  height: 36.15385px;
}

.btn-floating {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0;
  margin: 10px;
  margin-right: 10px;
  margin-left: 10px;
  overflow: hidden;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease-in-out;
  width: 47px;
  height: 47px;
}
.btn-floating.btn-sm i {
  font-size: 0.96154rem;
  line-height: 36.15385px;
}
.btn-floating i {
  display: inline-block;
  width: inherit;
  color: var(--color-snow);
  text-align: center;
  font-size: 1.25rem;
  line-height: 47px;
}

/* end footer Zextras */

a[data-toggle="collapse"] {
  position: relative;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
#content {
  width: 100%;
  min-height: 100vh;
  transition: all 0.3s;
  position: absolute;
  top: 0;
  right: 0;
}

/******* TABLE *********/

.table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 20px 0;
  text-align: left;
  background-color: var(--color-snow);
}
.table caption {
  caption-side: top;
  margin: 10px;
}
.table thead th {
  border-top: 0;
  border-bottom: 0;
}
.table thead tr th {
  background-color: #ddd;
  border-radius: 20px 20px 0 0;
}
.table tbody td {
  border: 1px dotted #ccc !important;
}

/******* FORM *********/
@media (min-width: 320px) and (max-width: 479.99px) {
  .height {
    min-height: 930px;
  }
  .height_02 {
    min-height: 1800px;
  }
  .carbon {
    min-height: 1600px;
  }
  .interfaccia-CE {
    height: 500px;
    width: 500px;
  }
  .form {
    margin-top: -600px;
  }
    }
@media (min-width: 480px) and (max-width: 779.99px) {
  .height {
    min-height: 850px;
  }
  .height_02 {
    min-height: 1800px;
  }
  .carbon {
    min-height: 1600px;
  }
  .interfaccia-CE {
    height: 500px;
  }
  .form {
    margin-top: -600px;
  }
    }
@media (min-width: 780px) and (max-width: 797.99px) {
  .height {
    min-height: 780px;
  }
  .height_02 {
    min-height: 800px;
  }
  .carbon {
    min-height: 1400px;
  }
  .interfaccia-CE {
    height: 500px;
  }
  .form {
    height: 680px;
    margin-top: 100px;
  }
    }

@media (min-width: 798px) and (max-width: 989.99px) {
  .height {
    min-height: 630px;
  }
  .height_02 {
    min-height: 800px;
  }
  .carbon {
    min-height: 1400px;
  }
  .interfaccia-CE {
    height: 500px;
  }
  .form {
    height: 600px;
    margin-top: 150px;
  }
    }
@media (min-width: 990px) and (max-width: 1199px) {
  .height {
    min-height: 600px;
  }
  .height_02 {
    min-height: 1250px;
  }
  .carbon {
    min-height: 1400px;
  }
  .interfaccia-CE {
    height: 500px;
  }
  .form {
    height: 600px;
    margin-top: 150px;
  }
    }
@media (min-width: 1200px) {
  .height {
    min-height: 850px;
  }
  .height_02 {
    min-height: 780px;
  }
  }

/* PARTNERS */

@media only screen and (max-width: 767px) {
    
  .solution.different {
    top: -59px;
    margin-left: -3px !important;
  }

  .ice .row {
    display: flex; 
    flex-direction: column-reverse;
  }

  .pebble .row {
    display: flex;
    flex-direction: column-reverse;
  }
  }

/******* FORM LOGIN *********/
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.solution {
  position: absolute;
  z-index: 10;
  top: -26px;
  left: 0;
}
.different {
  top: -30px;
}
.exagon {
  animation: pulse 2s ease-out forwards infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
  transform: scale(1);
  }

  40% {
    opacity: 0;
  transform: scale(1.3);
  }

  50% {
    opacity: 0;
  transform: scale(1);
  }

  100% {
    opacity: 1;
  transform: scale(1);
  }
}