@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@700&display=swap');
.lead{
    margin-top: -15%;
    margin-bottom: -220px;
    margin-right: -200%;
}
.mercury{
    margin-top: 0;
    margin-bottom: -0.5%;
}
.zinc{
    margin-top: 38%;
    margin-left: 30%;
    margin-bottom: -100%;
}
.cadmium{
    margin-left: 43%;
    margin-bottom: -7%;
}
.content{
    margin-top: 5%;
}

.content h1{
    font-size: 80px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color:transparent;
    -webkit-text-stroke: 1px rgb(41, 39, 39);
    position: relative;
}
.content h1::before{
    content: "Metalytic";
    position: absolute;
    width: 0;
    height: 130%;
    overflow: hidden;
    color: #7092BE;
    border-right: 5px solid #7092BE;
    transition: 1s ease-in-out;
}
.content h1:hover::before{
    width: 370px;
    filter: drop-shadow(0 0 25px #7092BE);
}

.btn{
    cursor: pointer;
    font-size: 2rem;
    font-weight: 700;
    padding: 0.5em 1em;
    color: #2d1e85;
    background-color: #7092BE;
    opacity: 0.8;
    border: 5px solid #2d1e85;
    border-radius: 5px;
    transition: transform 0.3s, background-color 0.3s, color 0.3s;
    margin-bottom: 30%;
    margin-left: -10%;
}
.btn:hover{
    transform: translateY(-10px);
    background-color: #2d1e85;
    color: #fff;
}

.homebg p{
    font-size: 24px;
    line-height: 40px;
}
/*h2, p {
    animation: scrolling ease-in-out both;
    animation-timeline: view();
    animation-range: 0% cover 50%;

}
@keyframes scrolling{
    from{
        opacity: 0;
        transfrom: translateY(100px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}*/
.content{
    margin-left: -10%;
    margin-bottom: 10%;
    max-width: 750px;
}
.content h1{
    font-size: 80px;
    line-height: 65px;
}
.homepagelogo{
    margin-top: -10%;
    margin-right: 10%;
}
.homepagelogo:hover{
    transition: 0.9s;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);

}
.Discription{
    margin-bottom: 10%;
}
.ourSolutions{
    margin-bottom: 10%;
}
.hidden{
    animation-name: scrolling2;
    animation-duration:0.3s;
    animation-timing-function: ease-in-out;
    animation-timeline: view();
}

@keyframes scrolling2{
    0%{
        opacity: 0;
        transform: translateX(-300px);
        transition: all 1s;
    }
    70%{
        opacity: 1;
        filter: blur(0);
        transform: translateX(0);
    }
}

/* spinning circle */
.square{
    position: relative;
    width: 400px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.square span:nth-child(1)
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
    transition: 0.5s;
    animation: animate 6s linear infinite;
}
.square:hover span:nth-child(1){
    border: none;
    background: #2b5a79;
}
.square span:nth-child(2)
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
    transition: 0.5s;
    animation: animate 6s linear infinite;
}
.square:hover span:nth-child(2){
    border: none;
    background: #2b5a79;
}

.square span:nth-child(2)
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
    transition: 0.5s;
    animation: animate 4s linear infinite;
}
.square:hover span:nth-child(2){
    border: none;
    background: #2b5a79;
}

.square span:nth-child(3)
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
    transition: 0.5s;
    animation: animate2 10s linear infinite;
}
.square:hover span:nth-child(3){
    border: none;
    background: #2b5a79;
}
@keyframes animate
{
    0%
    {
        transform: rotate(0deg);
    }
    100%
    {
        transform: rotate(360deg);
    }
}
@keyframes animate2
{
    0%
    {
        transform: rotate(360deg);
    }
    100%
    {
        transform: rotate(0deg);
    }
}
.content2
{
    position: relative;
    padding: 40px 60px;
    text-align: center;
    transition: 0.5s;
    z-index: 1000;
}
.content2 a
{
    position: relative;
    display: inline-block;
    margin-top: 10px;
    border: 2px solid #fff;
    padding: 6px 18px;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    border-radius: 73% 27% 44% 56% / 49% 44% 56% 51%;
}
.content a:hover
{
    background: #fff;
    color: #333
}

/* CARDS */
.cards-section{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 5rem;
  }
  
  .cards-section .my-card{
    position: relative;
    max-width: 23rem;
    height: 27rem;
    box-shadow: inset 5px 5px 5px rgba(0,0,0,0.05), inset -5px -5px 5px rgba(255, 255, 255, 0.5), 5px 5px 5px rgba(0,0,0,0.05), -5px -5px 5px rgba(255, 255, 255, 0.5);
    -webkit-box-shadow: inset 5px 5px 5px rgba(0,0,0,0.05), inset -5px -5px 5px rgba(255, 255, 255, 0.5), 5px 5px 5px rgba(0,0,0,0.05), -5px -5px 5px rgba(255, 255, 255, 0.5);
    -moz-box-shadow: inset 5px 5px 5px rgba(0,0,0,0.05), inset -5px -5px 5px rgba(255, 255, 255, 0.5), 5px 5px 5px rgba(0,0,0,0.05), -5px -5px 5px rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    margin: 3rem;            
  }
  
  .cards-section .my-card .box{
    margin: 1.5rem;
    height: 24rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s ease-in-out;
  }
  
  .cards-section .my-card:hover .box{
    transform: translateY(-50px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    background-color: white;
  }
  
  .cards-section .my-card .box .content{
    padding: 2rem;
    text-align: center;
  }
  
  .cards-section .my-card .box .content h3{
    font-size: 1.5em;
    font-weight: 500;
    color: black;
    z-index: 1;
    transition: 0.3s ease-in-out;
    transform: translateX(15px);
  
  }
  
  .cards-section .my-card:hover .box .content h3, .cards-section .my-card:hover .box .content p{
    color: black;
    transition: 0s;
  }
  
  .cards-section .my-card .box .content p{
    transform: translateX(15px);
    font-size: 1em;
    font-weight: 300;
    z-index: 1;
    transition: 0.3s ease-in-out;
  }
  
  .cards-section .my-card .box .content a{
    position: relative;
    display: inline-block;
    background: #03a9f4;
    padding: 0.3rem 1.2rem;
    text-decoration: none!important;
    border-radius: 120px;
    color: white;
    font-weight: 400;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  }
  
  .cards-section .my-card .box .card-image{
    max-height: 9rem;
    z-index: -1;
  }
  
  .cards-section .my-card .box .card-text{
    padding-block: 1rem;
  }
  
  .game{
    display: flex;
    justify-content: center;
    margin-bottom: 70px;
  }