.elementor-7487 .elementor-element.elementor-element-1bd4e17{--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;}.elementor-7487 .elementor-element.elementor-element-1bd4e17:not(.elementor-motion-effects-element-type-background), .elementor-7487 .elementor-element.elementor-element-1bd4e17 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#333333;}.elementor-7487 .elementor-element.elementor-element-90f6fcf{--display:flex;--min-height:180px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:20px 20px 20px 20px;}.elementor-7487 .elementor-element.elementor-element-f40e066{--display:flex;--border-radius:20px 20px 20px 20px;}.elementor-7487 .elementor-element.elementor-element-b50bd3f{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7487 .elementor-element.elementor-element-6562a23{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7487 .elementor-element.elementor-element-f536933{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7487 .elementor-element.elementor-element-602bba4 .elementor-heading-title{font-size:1.6em;line-height:1.2em;color:#45F3FF;}.elementor-7487 .elementor-element.elementor-element-d634797{--display:flex;--min-height:180px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:20px 20px 20px 20px;}.elementor-7487 .elementor-element.elementor-element-1cafe34{--display:flex;--border-radius:20px 20px 20px 20px;}.elementor-7487 .elementor-element.elementor-element-f396667{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7487 .elementor-element.elementor-element-c129d45{z-index:100;}.elementor-7487 .elementor-element.elementor-element-02f33e6{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7487 .elementor-element.elementor-element-126ceba{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7487 .elementor-element.elementor-element-d763178 .elementor-heading-title{font-size:1.6em;line-height:1.2em;color:#45F3FF;}.elementor-7487 .elementor-element.elementor-element-deb0f41{--display:flex;--min-height:180px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7487 .elementor-element.elementor-element-0fa2279{--display:flex;}.elementor-7487 .elementor-element.elementor-element-e98c987{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7487 .elementor-element.elementor-element-c1595a4{z-index:100;}.elementor-7487 .elementor-element.elementor-element-94f771c{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7487 .elementor-element.elementor-element-15e2b00{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7487 .elementor-element.elementor-element-83915e0 .elementor-heading-title{font-size:1.6em;line-height:1.2em;color:#45F3FF;}.elementor-7487 .elementor-element.elementor-element-f9b3a98{--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;}.elementor-7487 .elementor-element.elementor-element-f9b3a98:not(.elementor-motion-effects-element-type-background), .elementor-7487 .elementor-element.elementor-element-f9b3a98 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#333333;}.elementor-7487 .elementor-element.elementor-element-e84bfc6{--display:flex;--min-height:300px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;--border-radius:40px 40px 40px 40px;}.elementor-7487 .elementor-element.elementor-element-e84bfc6:not(.elementor-motion-effects-element-type-background), .elementor-7487 .elementor-element.elementor-element-e84bfc6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-7487 .elementor-element.elementor-element-5282931{--display:flex;--min-height:260px;}.elementor-7487 .elementor-element.elementor-element-5282931:not(.elementor-motion-effects-element-type-background), .elementor-7487 .elementor-element.elementor-element-5282931 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://tuts.thecreativarena.com/wp-content/uploads/2024/09/cookie-3203884_640.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-7487 .elementor-element.elementor-element-4568cab{--display:flex;--gap:5px 5px;--row-gap:5px;--column-gap:5px;--padding-top:0px;--padding-bottom:0px;--padding-left:30px;--padding-right:30px;--z-index:10;}.elementor-7487 .elementor-element.elementor-element-5726fa7 .elementor-heading-title{color:#000000;}.elementor-7487 .elementor-element.elementor-element-90c7c6b .elementor-heading-title{font-size:1.1em;color:#000000;}@media(min-width:768px){.elementor-7487 .elementor-element.elementor-element-90f6fcf{--width:350px;}.elementor-7487 .elementor-element.elementor-element-d634797{--width:350px;}.elementor-7487 .elementor-element.elementor-element-deb0f41{--width:350px;}.elementor-7487 .elementor-element.elementor-element-e84bfc6{--width:300px;}.elementor-7487 .elementor-element.elementor-element-5282931{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-1bd4e17 */.card{
    width: 320px;
    height: 160px;
    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, #45f3ff, #45f3ff, #45f3ff, 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: 210px;
    padding: 50px 20px;
    text-align: center;
    width: 100%;
    transition: 0.5s;
    transform: translate(5px);
}

.card:hover .content .details{
    transform: translate(0px);
}

/*.card .content .details h2{*/
   
/*    color: #45f3ff;*/
/*    line-height: 1.2em;*/
/*}*/

.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 */
/* Start custom CSS for container, class: .elementor-element-f9b3a98 *//*.card{*/
/*    box-shadow: 0 20px 25px rgba(0,0,0,0.25);*/
/*    transition: 0.5s;*/
/*}*/

/*.card:hover{*/
/*    height: 420px;*/
/*}*/

/*.container .card .imgbox{*/
/*    position: relative;*/
/*    width: 100%;*/
/*    height: 260px;*/
/*    background-position: center;*/
/*    transition: 0.5s;*/
/*    filter: blur(25px);*/
/*}*/

/*.container .card:hover .imgbox{*/
/*    background-size: 110%;*/
/*    filter: blur(0px);*/

/*}*/

/* .card .imgbox:before{*/
/*    content: '';*/
/*    position: absolute;*/
/*    bottom: -40px;*/
/*    width: 100%;*/
/*    height: 80px;*/
/*    border-radius: 40px;*/
/*    background: transparent;*/
/*}*/

/*.card .imgbox:after{*/
/*    content: '';*/
/*    position: absolute;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    width: 80px;*/
/*    height: 80px;*/
/*    background: transparent;*/
/*    border-radius: 50%;*/
/*    box-shadow: 75px 70px 0 40px #fff; */
/*}*/

/*.card .content{*/
/*    position: relative;*/
/*    top: -40px;*/
/*    transition: 0.5s;*/
/*}*/


/*.card .content .titles h3{*/
/*    position: absolute;*/
/*    bottom: -50px;*/
/*    font-weight: 400;*/
/*    font-size: 0.65em;*/
/*    opacity: 0.75;*/

/*}*/

/*.container .card .content p{*/
/*    position: relative;*/
/*    opacity: 0;*/
/*    transition: 0.5s;*/
/*    color: #333;*/
/*}*/

/*.container .card:hover .content p{*/
/*    opacity: 1;*/
/*}*//* End custom CSS */