:root{
    --gradient_primary:#22c0c3;
    --gradient_secontary:#fdbb2d;
}
.list-dot{
    list-style-type: disc;
}
.card-shadow{
    position: relative;
    z-index: 1;
    background-color: #fff;
    border-radius: 20px;
}
.title-shadow
{
    position: relative;
    background: #fff;
    width: fit-content;
    transform: skew(-20deg);
    border-radius: 0 0 20px 0; 
}

.title-shadow:before {
    content: "";
    z-index: -1;
    position: absolute;
    top: -30px;
    right: 0;
    bottom: 0;
    left: 25px;
    background: linear-gradient(142deg,var(--gradient_primary)0%, var(--gradient_secontary) 100%);    
     transform: translate3d(0px, 20px, 0) scaleX(0.95) scaleY(0.40);
    filter: blur(20px);
    opacity: var(0.7);
    border-radius: inherit;
}


.title-shadow::after {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: inherit;
    border-radius: inherit;
}
.card-shadow:before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 100px;
    right: 0;
    bottom: 0;
    left: 45px;
    background: linear-gradient(142deg,var(--gradient_primary)0%, var(--gradient_secontary) 100%);    
     transform: translate3d(0px, 20px, 0) scaleY(0.8) scaleX(0.95) ; 
    filter: blur(20px);
    opacity: var(0.7);
    border-radius: inherit;
}


.card-shadow::after {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: inherit;
    border-radius: inherit;
}
        
.text-clear
{
    transform: skew(20deg);
}
.content-gradient{
    background-color: #fff;
    position: relative;
    z-index: 1;
    border-radius: 0 0 20px 20px; 

}
.content-gradient::before{
    content: "";
    z-index: -1;
    position: absolute;
    top: 10px;
    right: 0;
    bottom: 0;
    left: 0px;
    background: linear-gradient(142deg,var(--gradient_primary)0%, var(--gradient_secontary) 100%);    
     transform: translate3d(0px, 20px, 0) scaleY(0.55) ;
    filter: blur(20px);
    opacity: var(0.7);
    border-radius: inherit;
}
.content-gradient::after{
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: inherit;
    border-radius: inherit;
}
.gradient-dot{
    position: relative;
    z-index: 1;
    background-color: #000;
    border-radius: 50%;
    transform:scaleX(25%) scaleY(50%)
}
.gradient-dot::before{
    content: "";
    z-index: -1;
    position: absolute;
    top: -20px;
    right: 0;
    bottom: 0;
    left: 0px;
    background: linear-gradient(142deg,var(--gradient_primary)0%, var(--gradient_secontary) 100%);    
    transform: translate3d(0px, 20px, 0) scaleY(0.55) ;
    filter: blur(20px);
    opacity: var(0.7);
    border-radius: inherit;
}

.gradient-dot::after{
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: inherit;
    border-radius: inherit;
}
.btn-gradient{
    padding: 20px 30px;
    border-radius: 20px;
    background-color: #fff;
    color: #000;
    position: relative;
    z-index: 1;
}
.btn-gradient:hover{
    color: #000;
    text-decoration: none;
    transform: scale(1.03);
    transition: transform ease-in-out .3s;

}

.btn-gradient:hover::before{
    top: 0;
    left: 0;
    transform: scaleY(0.8) scaleX(0.8);
    transition: transform ease .3s;

}

.btn-gradient::before
{
    content: "";
    z-index: -1;
    position: absolute;
    top: -10px;
    right: 0;
    bottom: 0;
    left: 15px;
    background: linear-gradient(142deg,var(--gradient_primary)0%, var(--gradient_secontary) 100%);    
    transform: translate3d(0px, 20px, 0) scaleY(0.35)  scaleX(0.80);
    filter: blur(20px);
    opacity: var(0.7);
    border-radius: inherit;
}
.btn-gradient::after
{
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: inherit;
    border-radius: inherit;
}
.dot-height{
   transform: scale(0.30) scaleX(.9);
}
@media(max-width:1200px){
    .dot-height_ul{
      height: 3em;
    }
}
@media(max-width:992px){
    .dot-height_ul{
      height: 2em;
    }
}


@media(max-width:576px){
    .dot-height_ul{
        padding: 50px 0;
        transform: scaleY(0.25) scaleX(.5);
    }
    .dot-height_scale{
        /* padding: 50px 0; */
        transform: scaleY(0.25) scaleX(.5);
    }
    .gradient-dot::before{
        top: 10px;
        transform: scaleY(0.95);
    }
    .dot-mobile{
        transform: scale(0.30) scaleX(.9);
        top: -1em;

    }
    .ul-mobile{
        height: 4em;
    }
    .title-shadow:before {
        top: 20%;
    }
    .card-shadow:before{
        top: 50%;
    }

}@media (orientation:landscape) and (max-height:400px) {
    .dot-mobile{
        height: 2em;
        transform: scale(1.1);
        top: 30px;
    }
    .ul-mobile{
        margin: 0 4em;
    }
}