.col_pro img{width:100%; height:auto; max-width:500px; } .col_pro{display:block; float:left; margin:0px; padding:0px; box-shadow:none; border:0; } 
.center-flex {
  display: flex;
  justify-content: center;  /* Centra orizzontalmente */
  align-items: center;      /* Centra verticalmente */
  height: auto;             /* L'altezza si adatta al contenuto */
}

@media (orientation: portrait) {
    .center-flex {

  flex-wrap:wrap;
}
    .p20{padding:20px;}
       .ctrl_col{width:100%; max-width:600px; paddding:30px;}
    h3{display:block; font-weight:bold; background: linear-gradient(45deg, #4cffff, #0b86ea,   #470f86);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-size:11vw;
        line-height:1;
    }
       h4{display:block; font-weight:bold; background: linear-gradient(45deg, #4cffff, #0b86ea,   #470f86);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-size:7vw;
        line-height:1;
    }
    
    
    h1{font-size:4vw; font-weight:bold; line-height:1; margin-top:100px;}
    h2{ font-size:12vw; font-weight:bold; line-height:1; text-align:center; margin:30px 0px; padding:0;   
        background: linear-gradient(45deg, #4cffff, #0b86ea,   #470f86);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    background-clip: text;}
    .sub{font-size:14px; text-align:centert;  padding:5px;
        background: linear-gradient(45deg, #0b86ea, #470f86);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    .call_to{ clear:both; background: linear-gradient(45deg, #4cffff, #470f86); font-size:20px; display:block; color:#fff; padding:12px; width:100%; max-width:300px;  margin:20px auto; cursor:pointer;  transition:  0.5s; font-weight:bold;
    }
    .call_to:hover{ opacity:.8;}
    .pic_conf{max-width:250px; margin-top:-80px;}
}
@media (orientation: landscape) {
    .ctrl_col{width:100%; max-width:35vw; padding:80px 0px; }
    h3{display:block; font-weight:bold; background: linear-gradient(45deg, #4cffff, #0b86ea,   #470f86);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-size:3vw;
        line-height:1;
    }
       h4{display:block; font-weight:bold; background: linear-gradient(45deg, #4cffff, #0b86ea,   #470f86);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-size:2vw;
        line-height:1;
    }
    h1{font-size:1vw; font-weight:bold; line-height:1;  margin:0; padding:0;
    }
    h2{ font-size:4vw; font-weight:bold; line-height:1;  margin:30px 0px; padding:0;   
        background: linear-gradient(45deg, #4cffff, #0b86ea,   #470f86);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    background-clip: text;}
    .sub{font-size:16px;  max-width:500px;  font-weight:600;
        background: linear-gradient(45deg, #0b86ea, #470f86);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    .call_to{ clear:both; background: linear-gradient(45deg, #4cffff, #470f86); font-size:20px; display:block; color:#fff; padding:12px; width:100%; max-width:300px;  margin:20px 0px; cursor:pointer;  transition:  0.5s; font-weight:bold;
    }
    .call_to:hover{ opacity:.8;}
}
:root {
    --size: 100px;
}         
.perspective {
    position: relative;
    perspective: 800px;
    perspective-origin: 50% -200px;
    transform:scale(1.2);
}
.box {  
    width: var(--size);
    aspect-ratio: 1;  
    position: relative;
    transform-style: preserve-3d;
    transform-origin: 50px bottom -50px;
    animation: rotate 4s linear infinite;
}
.face {
    position: absolute;
    width: var(--size);
    aspect-ratio: 1;
    background: linear-gradient(45deg, #4cffff, #0b86ea,   #470f86);
    transform-style: preserve-3d;
}
.face.front {
    --lightness: 66%;
}
.face.bottom {
    --lightness: 74%;
    top: 100%;
    transform-origin: top;
    transform: rotateX(-90deg);
}
.face.top {
    --lightness: 74%;
    bottom: 100%;
    transform-origin: bottom;
    transform: rotateX(90deg);
}
.face.back {
    --lightness: 50%;
    bottom: 200%;
    transform-origin: center 150px -50px;
    transform: rotateX(180deg);
}
.face.right {
    --lightness: 60%;
    left: 100%;
    transform-origin: left;
    transform: rotateY(90deg);
}
.face.left {
    --lightness: 60%;
    right: 100%;
    transform-origin: right;
    transform: rotateY(-90deg);
}
@keyframes rotate {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotateY(360deg);
    }
}
.quadratino{ width:100px; height:100px; margin-top:-160px;; display:block; margin:auto;   background: linear-gradient(45deg, #4cffff, #0b86ea,   #470f86);  transform:scale(1.2);}
.bordo{ border:.5px solid gray; padding:5px; margin:40px 0px;}
.glass{
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(7.1px);
    -webkit-backdrop-filter: blur(7.1px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.flexi{  gap: 80px;}