@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
#kanal{
  margin:1px;
  }
#kanalAd{
  margin-top:3px;
  margin-bottom:-22px;
  }
  
.btn{
    font-family: 'Poppins',sans-serif;
}
.digi-purple{
    background-image: linear-gradient(to left, #a31d8d, #001e42) !important;
}



#digi-table{
background-color:#42145f;
color:#fff;
}
  .py-7{
    height:250px;
  }

    
.call-animation-outer {
    -moz-animation: circle-anim 2.4s infinite ease-in-out !important;
    -moz-border-radius: 100%;
    -moz-box-sizing: content-box;
    -moz-transition: all .5s;
    -ms-animation: circle-anim 2.4s infinite ease-in-out !important;
    -ms-border-radius: 100%;
    -ms-opacity: .5;
    -ms-transition: all .5s;
    -o-animation: circle-anim 2.4s infinite ease-in-out !important;
    -o-transition: all .5s;
    -webkit-animation: circle-anim 2.4s infinite ease-in-out !important;
    -webkit-border-radius: 100%;
    -webkit-box-sizing: content-box;
    -webkit-transition: all .5s;
    animation: circle-anim 2.4s infinite ease-in-out !important;
    border-radius: 100%;
    box-sizing: content-box;
    height: 150px;
    position: absolute;
    transition: all .5s;
    width: 150px;
    z-index: 2;
    transform-origin: center center 0px;
    border: 0.6px solid #fff;
    height: 55px;
    width: 55px;
    right: 0px;
    bottom: 0px;
    top: -10px;
    left: -10px;
}

.call-animation-outer-fill {
    -moz-animation: circle-anim-2 2.3s infinite ease-in-out;
    -moz-border-radius: 100%;
    -moz-box-sizing: content-box;
    -moz-transition: all .5s;
    -ms-animation: circle-anim-2 2.3s infinite ease-in-out;
    -ms-border-radius: 100%;
    -ms-transition: all .5s;
    -o-animation: circle-anim-2 2.3s infinite ease-in-out;
    -o-transition: all .5s;
    -webkit-animation: circle-anim-2 2.3s infinite ease-in-out;
    -webkit-border-radius: 100%;
    -webkit-box-sizing: content-box;
    -webkit-transition: all .5s;
    animation: circle-anim-2 2.0s infinite ease-in-out;
    border: 2px solid transparent;
    border-radius: 100%;
    box-sizing: content-box;
    height: 100px;
    position: absolute;
    transition: all .4s;
    width: 100px;
    z-index: 2;
    transform-origin: center center 0px;
    border: 0.6px solid #fff;
    height: 55px;
    width: 55px;
    bottom: 0px;
    right: 0px;
    top: -10px;
    left: -10px;
}

.call-animation {
    background: linear-gradient(0deg, #C21212 0%, #D60A29 100%);
    height: 42px;
    width: 42px;
    position: relative;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    border-radius: 100%;
    animation: play 2.3s infinite ease-in-out;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    display: inline-block;
    top: 0px;
    left: 0px;
    border: 2px solid #FFFFFF;
    z-index: 5;
}

    .call-animation .form-phone-ico {
        background: url("../img/phone.svg") no-repeat;
        background-position: center center;
        background-size: 20px;
        height: 39px;
        width: 39px;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        -ms-border-radius: 100%;
        border-radius: 100%;
        position: absolute;
    }


@-moz-keyframes circle-anim {
    0% {
        -moz-transform: rotate(0) scale(.5) skew(1deg)
    }

    100% {
        -moz-transform: rotate(0) scale(1.1) skew(1deg);
        opacity: 0
    }
}

@-webkit-keyframes circle-anim {
    0% {
        -webkit-transform: rotate(0) scale(.5) skew(1deg)
    }

    100% {
        -webkit-transform: rotate(0) scale(1.1) skew(1deg);
        opacity: 0
    }
}

@-webkit-keyframes circle-anim-2 {
    0% {
        -webkit-transform: rotate(0) scale(.5) skew(1deg)
    }

    100% {
        -webkit-transform: rotate(0) scale(1.1) skew(1deg);
        opacity: 0
    }
}

@-moz-keyframes circle-anim-2 {
    0% {
        -moz-transform: rotate(0) scale(.5) skew(1deg)
    }

    100% {
        -moz-transform: rotate(0) scale(1.1) skew(1deg);
        opacity: 0
    }
}




section.phone-link {
    width: 55%;
    position: fixed;
    bottom: 10px;
    height: 60px;
    z-index: 9999;
    left: 10px;
}

    section.phone-link a {
        background: url("../img/phone_bg-2.svg") no-repeat left center;
        height: 72px;
        background-size: 190px;
    }

    section.phone-link .call-animation {
        border: 0px;
        background: inherit;
    }

    section.phone-link .image-area {
        position: absolute;
        left: 11px;
        top: 10px;
    }

    section.phone-link .call-animation-outer {
        top: -19px;
        left: -19px;
        height: 72px;
        width: 72px;
        border: 2px solid #D60A29;
        z-index: -1;
    }

    section.phone-link .call-animation-outer-fill {
        top: -18px;
        left: -18px;
        height: 72px;
        width: 72px;
        border: 2px solid #D60A29;
        z-index: -1;
    }

    section.phone-link .text-area {
        position: absolute;
        left: 55px;
        top: 16px;
        z-index: 99;
    }

        section.phone-link .text-area span:last-child {
            margin-top: 3px;
        }

 .contactForm{
    background-image:url('img/digiturk-basvuru-background.png'); background-position: center; background-size: cover;
 }