:root {
    --color-primary:rgb(255, 255, 255); 
    --color-secondary: #2ecc71; 
    --font-family: 'Arial', sans-serif; 
    --main-color: #ff4fa9;
}

.bg_main_color{
  background-color:var(--main-color);
}
.main_color{
  color:var(--main-color);
}
.border_main_color{
  border-color:var(--main-color);
  border-bottom: 5px solid var(--main-color);; 
  border-top: 5px solid var(--main-color);;
}


        .roboto_text {
          font-family: "Roboto", sans-serif;
          font-optical-sizing: auto;
          font-weight: 400;
          font-style: normal;
          font-variation-settings:"wdth" 100;
        }

        .inter_text {
          font-family: "Inter", sans-serif;
          font-optical-sizing: auto;
          font-size:20px;
          font-weight: 500;
          font-style: normal;
        }

        .m_menu{
          float:left;
          padding-left:15px;
          padding-right:10px;
          border-right:1px solid #fff;
          cursor: pointer;
          color:#fff;
        }

        .modal { max-height: 100%; overflow: visible; max-width:500px}

        .lil-gui.autoPlace {
            max-height: 100%;
            position: fixed;
            right: 15px;
            top: 0;
            z-index: 1001;
            display:none;
        }

        .input-field>label:not(.label-icon).active {
            -webkit-transform: translateY(-14px) scale(0.8);
            transform: translateY(-20px) scale(0.8);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
        }       

        .container-text {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
        }

        .responsive-text {
          width: 50%;
          max-width: 600px;
          min-width: 400px;
          max-height: 600px;       /* altezza massima */
          padding: 20px;
          text-align: left;
          overflow: auto;     
          font-size: 1.6rem;
          line-height: 1.8rem;
          color: #fff;
        }

        .red_background{
          position: relative;
          background: var(--main-color);
          background: linear-gradient(150deg, rgb(201 79 138) 0%, rgb(231 135 181) 27%, rgb(183 70 125) 100%);
          overflow: hidden;
        }

        .grey_background{
          position: relative;
          background:#fff;
          overflow: hidden;
        }

        .lang_selected{
          color:#fff !important;
          font-weight: 900 !important;
          background-color: #e2418fff !important;
        }

        .lang{
          color:#fff;
          font-weight: 100;
          cursor: pointer;
          padding:5px;
          padding-left: 10px;
          padding-right:10px;
          font-weight: 900 !important;
          background-color: #ff81c2ff;
          border-radius: 10px;
        }

        .video_section {
          position: relative;
          width: 100%;
          aspect-ratio: 1 / 1;
          overflow: hidden;
          border-radius:30px;
        }

       
        .bg_video_section {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;     
          object-position: center;
          z-index: 0;
          pointer-events: none;  
        }

        .title_video_overlay {
          position: relative;
          z-index: 1;
          /* width: 100%; */
          height: 100%;
          display: flex;
          /* align-items: center; */
          justify-content: center; 
          top:85%;
          color: white;
          font-family: "Inter", sans-serif;
          font-size: 12px;
          text-align: center;
          text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
          background-color: rgba(0,0,0,0.2);
          padding-top:6px;
        }

        .youtube-container {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 ratio */
        height: 0;
        overflow: hidden;
        border-radius: 20px;
      }

      .youtube-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 20px;
      }


      .inserimento {
          background-color: #e5e5e5 !important;
          border: 1px solid #cbcbcb;   
          color:#000;     
      }

      .video-wrapper video{
        border-radius: 50px !important;
      }

      .titolo_sezione{
          font-family: "Inter", sans-serif;
          font-optical-sizing: auto;
          font-size:20px;
          font-weight: 500;
          font-style: normal;
          color:#fa5d91;
          margin-bottom:10px;
      }

      .subtitolo{
          font-family: "Inter", sans-serif;
          font-optical-sizing: auto;
          font-weight: bold;
          font-size: 20px;
          /* font-weight: 500; */
          font-style: normal;
          color: #232323;
          font-size: 14px;
          background: #ffffff;
          border-radius: 10px;
          padding: 5px;
          -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
            box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
            -webkit-transition: all 350ms cubic-bezier(.37,0,.63,1);
            transition: all 350ms cubic-bezier(.37,0,.63,1);
      }

      .testo_sezione{
          font-family: "Inter", sans-serif;
          font-optical-sizing: auto;
          font-size:20px;
          font-weight: 500;
          font-style: normal;
          color:#333;
          font-size: 14px;
      }
      .box-shadow{
            -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
            box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
            -webkit-transition: all 350ms cubic-bezier(.37,0,.63,1);
            transition: all 350ms cubic-bezier(.37,0,.63,1);
        }
      .puntatore:hover{
        background-color: #fff !important;
        color:var(--main-color) !important;
      }  

      #send_request:hover{
        background-color: #232323 !important;
      }
      .container{
        max-width: 1480px !important;
      }
      @media only screen and (min-width: 993px) {
          .container {
              width: 90%;
          }
      }

      /* Personalizza la scrollbar solo all'interno di .scroll-box */
      .scroll-box::-webkit-scrollbar {
        width: 10px;
      }
      .scroll-box::-webkit-scrollbar-thumb {
        background-color: var(--main-color);
        border-radius: 5px;
      }
      /* Colore del thumb quando passi sopra con il mouse */
      .scroll-box::-webkit-scrollbar-thumb:hover {
        background: #555;
      }

      .bg_white{
        background-color: #fff;
      }

      .bg_img{
        /* background-image: url('img-tecnometal/bg2.webp'); */
        background-repeat: repeat-y;
        background-position: right top;
        background-size: auto;
      }

      .bg_white2{
        background-color: #eee;
      }
      .border_bottom1{
        border-bottom: 1px solid #e3e3e3;
      }
      .border_top1{
        border-top: 1px solid #e3e3e3;
      }
      .txt{
        color:#141414;
      }
      .borderleft{
        border-left: 1px solid #cbcbcb;
      }
      .switch label .lever {
        content: "";
        display: inline-block;
        position: relative;
        width: 36px;
        height: 14px;
        background-color: var(--main-color);
        border-radius: 15px;
        margin-right: 10px;
        -webkit-transition: background 0.3s ease;
        transition: background 0.3s ease;
        vertical-align: middle;
        margin: 0 5px;
    }
    .switch label input[type=checkbox]:checked+.lever {
        background-color: rgb(67 67 67) !important;
    }

    .border_bottom_dn{
      border-bottom: 3px solid #d7d7d7;
    }

    .background_color_dn{
          background-color: #ffffff;
    }



html,
body {
  position: relative;
  height: 100%;
}

body {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
}

.video-wrapper {
  height: 100vh;
  padding: 50px;
  box-sizing: border-box; /* Padding incluso nei 100vh */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* Necessario per .overlay_video */
   overflow: hidden; /* Importante per il border-radius */
}

.video-wrapper video {
   width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50px;
  display: block;
}

.swiper-horizontal>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    bottom: 0;
    top: 100vh;
    margin-top:-3px
}

.swiper-button-next, .swiper-button-prev {
    color: #ffffff;
    border-radius: 15px 0px 15px 10px;
    padding: 15px 20px;
    font-size: 16px;
    transition: background-color 0.3s;
    z-index: 20;
    position:absolute;
    background-color: #ff4fa9;
}

.swiper-button-next:hover, .swiper-button-prev:hover {
        background-color: rgba(0, 0, 0, 0.9); /* Darken on hover */
    }
.swiper-button-next {
        right: 15px; 
        bottom: 30px;           
}
.swiper-button-prev {
        right: 90px !important; /* Position from the left */
        bottom: 30px; 
        left: 15px;           
}

.swiper-button-prev, .swiper-rtl .swiper-button-next{
        right: 90px !important; /* Position from the left */
} 

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
        content: '';
    }
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
        content: '';
    }
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
        background-color:#d88edf;
  }       

    #claim{
      user-select: none;
      position: absolute;
      bottom: 35px;
      left: 35px;
      z-index: 999;
      background-color: var(--main-color);
      border-radius: 20px;
      padding: 20px;
      max-width: 400px;
    }
    #claim_title {
        margin-top: 0px;
        color:#ffffff;
        font-family: "Inter", sans-serif;
        font-weight: 900;
        line-height: 1.1;
        text-transform: uppercase;
        margin-bottom: 15px;
        margin-left:10px;
    }
   
    #claim_testo{
        font-size: 14px;
        line-height: 18px;
        width: 100%;
        font-family: sans-serif;
        font-weight: 100;   
        color:#ffffff;
        margin-top:-10px;
        margin-left: 10px;      
        max-width: 400px;   
    }

    .testo{
        font-size: 18px;
        width: 100%;
        margin-top: 0px;
        font-weight: 400;
        line-height: 24px;
    }

    .testo_section{
        font-size: 20px;
        width: 100%;
        margin-top: 0px;
        font-weight: 400;
        line-height: 35px;
    }

    settore span{
        font-family: "Inter", sans-serif;
        font-weight: 900;
        font-size:16px;
        color:#fff;
        margin-left:10px;
    }

    #claim_overt_title{
        font-family: "Inter", sans-serif;
        color: #fff;
        font-weight: 500;
        font-size: 12px;      
        margin-left: 10px;   
        padding-bottom:10px;   

    }

    .patreon-ad {
        position: fixed;
        left: 40px;
        bottom: 32px;
        font-size: 10px;
        color:rgb(255, 255, 255);
        width: 109px;
        z-index: 1000;
    }

    .overlay_video{
        position: fixed;
        width:100%;
        height:100vh;
        z-index: 4;
        background-color: rgba(0, 0, 0, 0);
    }
    .menu{
        position: fixed;
        right:35px;
        top: 0px;
        z-index: 99;
        color: #fff;
        margin: auto;
        width: 100%;
    }

    .btn_menu_login{            
        float:right;
        margin-right:15px;
        background-color: rgb(0, 0, 0);
        padding: 5px 10px 5px 10px;
        border-radius: 15px 0px 15px 10px;
        color:#fff;
        font-family: "Inter", sans-serif;
        font-weight:bold;
        cursor: pointer;
    }
    .btn_menu_login:hover{            
        float:right;
        margin-right:15px;
        background-color: rgba(255, 255, 255, 1);
        padding: 5px 10px 5px 10px;
        border-radius: 15px 0px 15px 10px;
        color:#333;
        font-family: "Inter", sans-serif;
        font-weight:bold;
        cursor: pointer;
    }

    
    .btn_menu{     
            margin-right: 15px;
            background-color: #ff447f;
            padding: 5px 10px 5px 10px;
            border-radius: 15px 0px 15px 0px;
            color: #fff;
            font-family: "Inter", sans-serif;
            font-weight: bold;
            cursor: pointer;
            margin-bottom:10px;
            font-size: clamp(10px, 5vw, 30px);
    }
    .btn_menu:hover{     
        margin-right:15px;
        background-color: rgba(255, 255, 255, 1);
        padding: 5px 10px 5px 10px;
        border-radius: 0px 15px 0px 15px;
        color:#333;
        font-family: "Inter", sans-serif;
        font-weight:bold;
        cursor: pointer;
    }

    .btn_menu_catalogo{  
        font-size:22px;
        width:100%;
        background-color: rgba(215, 163, 37, 1);
        color:#222;
        padding: 5px 10px 5px 10px;
        border-radius: 15px 0px 15px 10px;            
        font-family: "Inter", sans-serif;
        font-weight:bold;
        cursor: pointer;
        margin-bottom:12px;
    }
    .btn_menu_catalogo:hover{              
        background-color: #8ba03f;
        color:#fff;
        padding: 5px 10px 5px 10px;
        border-radius: 15px 0px 15px 10px;            
        font-family: "Inter", sans-serif;
        font-weight:bold;
        cursor: pointer;
    }

    .btn_contact{  
      font-size: 13px;
      width: 100%;
      background-color: rgba(215, 163, 37, 1);
      color: #222;
      padding: 2px 4px 2px 4px;
      border-radius: 5px 0px 5px 3px;
      font-family: "Inter", sans-serif;
      font-weight: bold;
      cursor: pointer;
    }
    .btn_contact:hover{                  
        background-color: #000;
        color:#fff !important;
        /* padding: 5px 10px 5px 10px;
        border-radius: 15px 0px 15px 10px;            
        font-family: "Inter", sans-serif;
        font-weight:bold;
        cursor: pointer; */
    }

    .select_video{
      text-decoration:underline dotted #00ffff;
      color: #00ffff !important;
    }

    .select_video span{
      text-decoration:underline dotted #00ffff;
      color: #00ffff !important;
    }

    .small_photo:hover{
      width: 100%;
      transition: transform 0.3s ease-in-out;
      transform: scale(2); 
      z-index: 1;
    }
    .small_photo{
      transform: scale(1.1); 
      z-index: -1;
    }

    .soft_intro {
    animation: image_blur 0.3s;
    visibility: visible;
    }
    @keyframes image_blur {
      0% {
      -webkit-filter: blur(30px);
      }
      50% {
      -webkit-filter: blur(5px);
      }
      100% {
      -webkit-filter: blur(2px);
      }
    }

    .cella.fade-in {
    opacity: 1; /* Make the background fully visible */
    }

    .cella.fade-out {
    opacity: 0.5; /* Make the background fully transparent */
    }

    /* light text */

    .neon{      
        /* text-shadow: 0 0 0px #b9b9b9,0 0 0px #b9b9b9,0 0 0px #b9b9b9,0 0 0px #b9b9b9,0 0 0px #b9b9b9,0 0 0px #b9b9b9; */
        animation: flicker 0.3s linear;
        animation-delay: 0.4s;
        /* filter:brightness(1); */
      }


    @keyframes flicker{
        9%{
        text-shadow: 0 0 1px #fff,0 0 1px #b9b9b9,0 0 1px #fff,0 0 1px #ffffff,0 0 1px #ffffff,0 0 5px #ffffff;
        filter:brightness(1)
        }
        10%{
          text-shadow:none;
         filter:brightness(.4);
        }       
        12%{
            text-shadow:none;
         filter:brightness(.4);
        }
        13%{
            text-shadow: 0 0 1px #fff,0 0 1px #fff,0 0 1px #fff,0 0 3px #ffffff,0 0 20px #ffffff,0 0 33px #ff3b3b;
        filter:brightness(1)
        }
        66%{
            text-shadow: 0 0 0px #fff,0 0 0px #fff,0 0 0px #fff,0 0 0px #ffffff,0 0 0px #ffffff,0 0 0px #ffffff;
        filter:brightness(1)
        }
        67%{
          text-shadow:none;
         filter:brightness(.4);
        }
        75%{
          text-shadow:none;
         filter:brightness(.4);
        }
        100%{
        color:#b9b9b9;
        text-shadow: none;
        filter:brightness(.1);
        }
      }