.elementor-7638 .elementor-element.elementor-element-4451eff{--display:flex;--min-height:100vh;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:50px 50px;--row-gap:50px;--column-gap:50px;--padding-top:100px;--padding-bottom:100px;--padding-left:20px;--padding-right:20px;}.elementor-7638 .elementor-element.elementor-element-4451eff:not(.elementor-motion-effects-element-type-background), .elementor-7638 .elementor-element.elementor-element-4451eff > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#333333;}.elementor-7638 .elementor-element.elementor-element-c871f40{--display:flex;--min-height:180px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7638 .elementor-element.elementor-element-0d5ccd2{--display:flex;}.elementor-7638 .elementor-element.elementor-element-47a2f4a{--display:flex;}.elementor-7638 .elementor-element.elementor-element-dd2689d{--display:flex;--justify-content:center;}.elementor-7638 .elementor-element.elementor-element-6ddb8ce{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:5px 5px;--row-gap:5px;--column-gap:5px;}.elementor-7638 .elementor-element.elementor-element-bc649c4 .elementor-heading-title{font-size:1.6em;line-height:1.2em;color:#5DFF71;}.elementor-7638 .elementor-element.elementor-element-e9432a4 > .elementor-widget-container{margin:0px 0px -10px 0px;}.elementor-7638 .elementor-element.elementor-element-e9432a4{color:#FFFFFF;}.elementor-7638 .elementor-element.elementor-element-594f968 .elementor-button{background-color:#5DFF71;fill:#000000;color:#000000;}.elementor-7638 .elementor-element.elementor-element-88e3bab{--display:flex;--min-height:180px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7638 .elementor-element.elementor-element-4a9d0c9{--display:flex;}.elementor-7638 .elementor-element.elementor-element-a1eb06c{--display:flex;}.elementor-7638 .elementor-element.elementor-element-d4efdc7{--display:flex;--justify-content:center;}.elementor-7638 .elementor-element.elementor-element-6d61b1e{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:5px 5px;--row-gap:5px;--column-gap:5px;}.elementor-7638 .elementor-element.elementor-element-6d99dba .elementor-heading-title{font-size:1.6em;line-height:1.2em;color:#5DFF71;}.elementor-7638 .elementor-element.elementor-element-186c543 > .elementor-widget-container{margin:0px 0px -10px 0px;}.elementor-7638 .elementor-element.elementor-element-186c543{color:#FFFFFF;}.elementor-7638 .elementor-element.elementor-element-4654f26 .elementor-button{background-color:#5DFF71;fill:#000000;color:#000000;}.elementor-7638 .elementor-element.elementor-element-0d0374c{--display:flex;--min-height:180px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7638 .elementor-element.elementor-element-6666108{--display:flex;}.elementor-7638 .elementor-element.elementor-element-5a23ee6{--display:flex;}.elementor-7638 .elementor-element.elementor-element-374e3a1{--display:flex;--justify-content:center;}.elementor-7638 .elementor-element.elementor-element-6526a46{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:5px 5px;--row-gap:5px;--column-gap:5px;}.elementor-7638 .elementor-element.elementor-element-8a048bb .elementor-heading-title{font-size:1.6em;line-height:1.2em;color:#5DFF71;}.elementor-7638 .elementor-element.elementor-element-54b0017 > .elementor-widget-container{margin:0px 0px -10px 0px;}.elementor-7638 .elementor-element.elementor-element-54b0017{color:#FFFFFF;}.elementor-7638 .elementor-element.elementor-element-e67b627 .elementor-button{background-color:#5DFF71;fill:#000000;color:#000000;}@media(min-width:768px){.elementor-7638 .elementor-element.elementor-element-c871f40{--width:320px;}.elementor-7638 .elementor-element.elementor-element-88e3bab{--width:320px;}.elementor-7638 .elementor-element.elementor-element-0d0374c{--width:320px;}}@media(max-width:1024px){.elementor-7638 .elementor-element.elementor-element-4451eff{--gap:100px 60px;--row-gap:100px;--column-gap:60px;--flex-wrap:wrap;}}/* Start custom CSS for container, class: .elementor-element-4451eff */.card{
    width: 320px;
    height: 180px;
    background: #333;
    transition: .5s;
}

.card:hover{
    height: 450px;
}

.card .lines{
    position: absolute;
    inset: 0;
    background: #000;
    overflow: hidden;
}

.card .lines::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600;
    height: 70%;
    background: linear-gradient(transparent, #5dff71, #5dff71, #5dff71, transparent) ;
    animation: animate 4s linear infinite;
    animation-play-state: paused;
}

.card:hover .lines::before{
    animation-play-state: running;
}

@keyframes animate {
    0%{
        transform: translate(-50%,-50%) rotate(0deg);
    }
    100%{
        transform: translate(-50%,-50%) rotate(360deg);
    }
}

.card .lines::after{
    content: '';
    position: absolute;
    inset: 4px;
    background: #292929;
}

.card .imagebox{
    position: absolute;
    top: -60px;
    left: 50%;
    width: 150px;
    height: 150px;
    transform: translateX(-50%);
    background: #000;
    transition: 0.5s;
    z-index: 10;
    overflow: hidden;
    justify-content: center;
    align-items: center;
}

.card:hover .imagebox{
    top: 25px;
    width: 200px;
    height: 200px;

}

.card .imagebox::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 150px;
    transform: translate(-50%, -50%);
    background: linear-gradient(transparent, #ff3c7b, #ff3c7b,#ff3c7b,transparent);
    animation: animate2 6s linear infinite;
    animation-play-state: paused;
}

.card:hover .imagebox::before{
    animation-play-state: running;
}

@keyframes animate2 {
    0%{
        transform: translate(-50%,-50%) rotate(360deg);
    }
    100%{
        transform: translate(-50%,-50%) rotate(0deg);
    }
}

.card .imagebox::after{
    content: '';
    position: absolute;
    inset: 3px;
    background: #292929;
}

.card .imagebox .imgg{
    position: absolute;
    width: 120px;
    z-index: 1;
    opacity: 0.5;
    transition: 0.5s;

}

.card:hover .imagebox .imgg{
    opacity: 1;
}

.card .content{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.card .content .details{
    margin-top: 220px;
    padding: 50px 20px;
    text-align: center;
    width: 100%;
    transition: 0.5s;
    transform: translate(5px);
}

.card:hover .content .details{
    transform: translate(0px);
}


.card .content .details p{
    color: #fff;
    opacity: 0;
    transition: 0.5s;

}

.card:hover .content .details p{
    opacity: 1;
}

.card .content .details a{
    display: inline-block;
    padding: 8px 15px;
    background: #45f3ff;
    color: #292929;
    margin-top: 10px;
    font-weight: 500;
    text-decoration: none;
    opacity: 0;
    transition: 0.5s;
}
.card:hover .content .details a,
.card:hover .content .details p{
    opacity: 1;
}/* End custom CSS */