@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@200&display=swap');
   .titlesite{
    letter-spacing:20px;
    font-size:30px;
  }
  
  #profess{
    letter-spacing:10px;
    font-size:15px;
    
  }
  
  #contactme a:hover {
    background: white;
    color: black;
  }
  
  #contactme{
    position:relative;
    padding:10px;
    left:50%;
    transform: translateX(-50%); 
    text-align:center;
    display:inline-block;  }
  #contactme a {
    background: transparent;
    border: 2px solid white;
    
    color:white;
    display:inline-block;
    font-size: 24px;
    padding:10px;
    padding-right: 20px;
    padding-left: 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 400;
    cursor: pointer;
    font-family: 'Montserrat','cursive';
  }
  
    
  #container{
    color:white;
    position:relative;
    display:inline-block;
    
    padding:10px;
    left:50%;
    transform: translateX(-50%); 
    padding-right: 20px;
    padding-left: 20px;
    background:#00000090;
    bottom:45%;
    text-align:center;
     font-size:30px;
     font-family: 'Montserrat','cursive';
    
  }
  #switch{
    height:50px;
    overflow:hidden;
    
  }
  #switch > div > div {
    color:#fff;
    padding:4px 12px;
    height:50px;
    margin-bottom:45px;
    display:inline-block;
  }
  #switch div:first-child{
   animation: show 5s linear infinite;
  }
  
  #switch div div{
     background:#42c58a;
  }
  #switch div:first-child div {
    background:#4ec7f3;
  }
  #switch div:last-child div {
    background:#DC143C;
    
  }
  
  @keyframes show{
     0% {margin-top:-270px;}
    5% {margin-top:-180px;}
    33% {margin-top:-180px;}
    38% {margin-top:-90px;}
    66% {margin-top:-90px;}
    71% {margin-top:0px;}
    99.99% {margin-top:0px;}
    100% {margin-top:-270px;}
  }

  .column {
    float: left;
    width: 100%;
    padding: 0 10px;
  }
  /* Style the counter cards and transition backgroundsize */
  .card { 
    font-family: 'Montserrat','cursive';
    color:white;
    border-radius:20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    padding: 80px;
    
    height:400px;
    background-size: auto 120%;
   
    text-align: center;
    background-color: rgba(255, 0, 0, .5);
     background-position: center;
    transition: background-size 0.3s ease-in;
    
    
  }
  
  /* On hover increase size*/
  .card:hover{
    
  background-size:auto  125%;
    font-family: 'Montserrat','cursive';
   
  }
  
.card a,p {
  opacity: 1;
}

  .card a{
    opacity: 1;
    background: transparent;
    border: 2px solid white;
    
    color:white;
    display:inline-block;
    font-size: 24px;
    padding:10px;
    padding-right: 20px;
    padding-left: 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 400;
    cursor: pointer;
    font-family: 'Montserrat','cursive';
  }

  .card a:hover{
    background: white;
    color: black;
    
  }
  
  @media screen and (max-width: 600px) {
    .column {
      
      width: 100%;
      display: block;
      margin-bottom: 20px;
    }

    .wp-block-a{
      font-size: 14px; /* Change this value to adjust the font size for smaller screens */
      padding: 10px; /* Change this value to adjust the padding for smaller screens */
    }
    #switch{
      visibility: collapse;
    }
  }
  
  /* Servizio 1*/
  .service1 {
    background-image:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,1)), url("https://geomdanna.it/wp-content/uploads/2023/03/imginterno-scaled.jpg");
  }

  .service1:hover{
    background-image:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("https://geomdanna.it/wp-content/uploads/2023/03/imginterno-scaled.jpg");
  }


  /* Servizio 2*/
  .service2{
    background-image:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,1)), url("https://geomdanna.it/wp-content/uploads/2023/03/imgpubblico-scaled.jpg");
  }
  .service2:hover{
    background-image:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("https://geomdanna.it/wp-content/uploads/2023/03/imgpubblico-scaled.jpg");
  }

  /*Servizio 3*/

  .service3{
    background-image:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,1)), url("https://geomdanna.it/wp-content/uploads/2023/03/salotto-scaled.jpg");
  }

  .service3:hover{
    background-image:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("https://geomdanna.it/wp-content/uploads/2023/03/salotto-scaled.jpg");
  }

  /* Servizio 4*/
  .service4{
    background-image:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,1)), url("https://geomdanna.it/wp-content/uploads/2023/03/esterno-scaled.jpg");
  }
  .service4:hover{
    background-image:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("https://geomdanna.it/wp-content/uploads/2023/03/esterno-scaled.jpg");
  }

  /*Servizio 5*/
  .service5{
    background-image:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,1)), url("https://geomdanna.it/wp-content/uploads/2023/03/interno2.jpeg");
  }

  .service5:hover{
    background-image:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("https://geomdanna.it/wp-content/uploads/2023/03/interno2.jpeg");
  }

 
 
  .wp-block-a{
    background: transparent;
    border: 2px solid white;
    display:inline-block;
    color:white;
    font-size: 1.0vw;
    padding:10px;
    font-size: 24px;
    padding-right: 20px;
    padding-left: 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 400;
    cursor: pointer;
    font-family: 'Montserrat','cursive';
  
  }
  .wp-block-a:hover{
    background: white;
    color: black;
  }
  .wp.block-a{
  
    font-family: 'Bebas Neue','cursive';
    color:white;
  }

  .icon {
    animation: shake 0.5s infinite;
  }
  
  @keyframes shake {
    10%, 90% {
      transform: translate3d(-1px, 0, 0);
    }
    20%, 80% {
      transform: translate3d(2px, 0, 0);
    }
    30%, 50%, 70% {
      transform: translate3d(-4px, 0, 0);
    }
    40%, 60% {
      transform: translate3d(4px, 0, 0);
    }
  }