/* VIDEO Modal styles  */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:2rem;z-index:1000}
.modal[aria-hidden="false"]{display:flex}
.overlay{position:absolute;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(3px)}
.dialog{position:relative;z-index:1;max-width:1260px;width:100%;border-radius:12px;box-shadow:0 20px 60px rgba(2,6,23,0.6);background:transparent}

/* Keep video responsive with 16:9 aspect ratio */
.video-wrapper{position:relative;padding-top:56.25%;background:#000;border-radius:8px;overflow:hidden}
.video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

.controls{display:flex;justify-content:flex-end;margin-top:0.75rem}
.close{appearance:none;border:0;background:#111827;color:white;padding:0.5rem 0.9rem;border-radius:8px;cursor:pointer}
.close:focus{outline:3px solid rgba(17,24,39,0.25)}

@media (max-width:520px){body{padding:1rem}.dialog{max-width:100%}}


/* VIDEO BOX HOME */


#popup .box-layout-2 {
  width: 100%;
  max-width: 800px;
  z-index: 999;
  overflow: visible;
  border: 1px solid #697c8d;
}
#popup_pr .box-layout-2{
  width:100%;
  max-width: 400px;
  z-index: 999;
  overflow: visible;
  border: 1px solid #697c8d;
}

#popup .box-layout-2 > img,
#popup .shadow::after,
#popup_pr .box-layout-2 > img,
#popup_pr .shadow::after {
  border-radius: 6px;
}

#popup .box-layout-2 .layout-testo {
  max-width: 480px;
  box-sizing: border-box;
}
#popup_pr .box-layout-2 .layout-testo{
  max-width: 100%;
  box-sizing: border-box;
}

@media only screen and (max-width: 768px) {
  #popup .shadow::after,
  #popup_pr .shadow::after {
    background-image: linear-gradient(to right, #040b1e, rgba(0,0,0,0.2));
  }
  #popup_pr .box-layout-2{
    flex-direction: column;
  }
  #popup_pr .box-layout-2 .layout-testo{
    max-width: 100%;
    padding-left:20px;
    padding-right:20px;
  }
  #popup_pr .box-layout-2 .layout-testo p{
    margin-top:0px;
  }
  #popup_pr .layout-testo:nth-child(even){
    padding-bottom:0px;
  }
  #popup_pr .layout-testo:nth-child(odd){
    padding-top: 20px;
    padding-bottom:20px;
  }
  #popup_pr .popup-close{
    top: -25px;
      left: 0;
  }
}

.container-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.box-layout-2 {
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 20px 10px rgba(0,0,0,0.1);
}

.box-layout-2 > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.box-layout-2 .layout-testo {
  padding: 50px 60px;
  color: #ddd;
  max-width: 330px;
  box-sizing: content-box;
  position: relative;
  z-index: 2;
}

.box-layout-2 .layout-testo.large {
  max-width: 350px;
}

.box-layout-2 .layout-testo h1,
.box-layout-2 .layout-testo h2 {
  margin-top: 0;
  color: #fff;
}

.box-layout-2 .layout-testo h3 {
  font-size: 26px;
  font-weight: 300;
  color: #fff;
  margin-top: 0
}

.box-layout-2 .layout-testo ul li {
  font-size: 14px;
  font-weight: 300;
  padding-left: 15px;
  position: relative;
  margin-bottom: 8px;
}

.box-layout-2 .layout-testo ul li::before {
  content: "";
  border: solid #0db6cc;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 2px;
  transform: rotate(-45deg);
  position: absolute;
  top: 8px;
  left: 0;
}

@media only screen and (max-width: 768px) {
  .bl-g .box-layout {
    width: 100%;
    margin: 8px 0;
  }
  .box-layout-2 .layout-testo,
  .box-layout-2 .layout-testo.large {
    max-width: none;
  }
  .bl-f-3 .box_container {
    flex-direction: column;
  }
  .bl-f-3 .box_container .box-layout {
    width: 100%;
    margin: 8px 0;
  }
  .text-layout p {
    font-size: 16px;
  }
  .box-layout-2 .layout-testo h3 {
    font-size: 20px;
  }
}

@media only screen and (max-width: 480px) {
  .box-layout-2 .layout-testo {
    padding: 30px;
  }
}

#video-box .video-player-close::before,
#video-box .video-player-close::after,


#video-box .video-container {
 background-color: #333;
 box-shadow: 0 5px 20px 5px rgba(53, 122, 151,0.15);
}

/* #video-box:not(.about) .video-container::after {
  content: "";
  background-image: url("img/logo.png");
  position: absolute;
  top: 60px;
  right: 60px;
  width: 80px;
  height: 42px;
} */

#video-box .video-container::before {
  content: "";
  background-image: linear-gradient(to right, #333 , transparent);
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 60px;
}

#video-box .video-testo {
  color: #fff;
  padding: 60px;
}

#video-box .video-testo h3 {
  font-size: 16px;
  color: #32bcda;
  font-weight: 500;
  margin: 0 0 5px;
}

#page.colore_privati #video-box .video-testo h3 {
  color: #df219a;
}

#video-box .video-testo h2 {
  line-height: 1.3;
  margin: 0 0 15px;
}

#video-box .video-testo p {
  margin: 0;
  line-height: 1.6;
}

#video-box .video-testo .button {
  margin-top: 30px;
}

#video-box .play-video {
  width: 100px;
  height: 100px;
  background-color: rgba(4, 34, 67, 0.5);
  position: absolute;
  border-radius: 50%;
  z-index: 9;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
  cursor: pointer;
  transition: transform 0.5s;
}

#video-box .play-video::before {
  content: "";
  display: block;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 4px solid #fff;
  left: calc(50% - 27px);
  top: calc(50% - 27px);
  position: relative;
}

#video-box .play-video svg {
  width: 26px;
  height: 26px;
  top: calc(50% - 12px);
  left: calc(50% - 11px);
  position: absolute;
}

#video-box .play-video:hover  {
  transform:scale(1.1);
}

#video-box .video-player {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999;
  left: 0;
  top: 0;
  display: none;
}

#video-box .video-player::before {
  content: "";
  background-color: rgba(0,0,0,0.7);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#video-box .video-player-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
}

#video-box .video-player iframe {
  width: 1200px;
  max-height: 680px;
  z-index: 999;
  position: relative;
  height: 100%;
}

#video-box .video-player.open {
  display: block;
}

#video-box .video-player-close {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    right: 20px;
    top: 20px;
    cursor: pointer;
    transition: opacity 0.5s;
    z-index: 9999;
}

#video-box .video-player-close::before,
#video-box .video-player-close::after {
    background-color: #000;
}

@media screen and (max-width: 992px) {
  #video-box .play-video {
    right: 25%;
    left: auto;
  }
}

@media screen and (max-width: 768px) {
  #video-box:not(.about) .video-container::after {
    display: none;
  }
  #video-box .video-testo h3 {
    font-size: 12px;
  }
  #video-box .play-video {
    display: none;
  }
  #video-box .video-testo .button {
    position: relative;
    width: calc(100% - 40px);
  }
  #video-box .video-container::before {
    background-color: rgb(71, 38, 156,0.7)
  }
}

@media screen and (max-width: 480px) {
  #video-box.video-aziende {
    top: 0;
  }
  #video-box .video-testo {
    padding: 30px;
  }
}