.choose-pack{background:#324349;text-align:center}
.choose-pack h2{padding-bottom:25px;color:#fff}
.choose-pack p{padding-bottom:35px;color:#fff;opacity:.7}
.choose-pack ul{padding-top:5px}
.choose-pack ul li{list-style:none}
.choose-pack ul li .inner{display:block;background:#fff;border-radius:5px}
.choose-pack ul li .head-block{display:block;padding:20px 10px 0 10px;background:#fff;border-radius:5px 5px 0 0}
.choose-pack ul li.active .head-block{background:#eaf7f7}
.choose-pack .head-block .plan-title{padding:8px 0 8px 0}
.choose-pack .head-block .plan-title span{width:320px;position:absolute;top:-15px;margin:0 auto;left:0;right:0;display:block;padding:3px 10px;border-radius:5px;background:#42d79e;font-size:14px;font-weight:700;color:#fff;text-transform:uppercase}
.choose-pack ul li.active .plan-title span{background:#ff9a44}
.choose-pack a.btn.get-started{display:inline-block;padding:8px 27px}
.btn{font-size:12px}
.aktif{color:#fff!important}

ul.iconlist{
    li{
        cursor:pointer;font-size:1rem;font-weight:500;color:rgb(0 0 0 / .6);text-align:left;display:flex;align-items:center;
        i.fa-check-circle{width:1.1rem;height:1.1rem;margin-right:.8rem;border-radius:1rem;color:rgb(255 255 255 / .8);text-align:center;align-items:center;justify-content:center;display:inline-flex;padding-right:.1rem}
        &:not(.active){
            i.fa-check-circle{background:rgb(255 255 255);border:1px solid rgb(0 0 0 / .2)}
        }
        &.active i.fa-check-circle{
            /* background:rgb(61 128 228); */
            background: #6cb3e9;
            &::before{content:'✔';font-size:.6rem;font-weight:600}
        }
    }
}

ul.iconlist-2{
    padding-left: 0px;
    li{
        cursor:pointer;font-size:1rem;font-weight:500;color:rgb(0 0 0 / .6);text-align:left;display:flex;align-items:center;position:relative;background:rgb(185 185 185 / .2);padding:.25rem 1rem;margin-bottom:.4rem;border-radius:1rem;
        i.fa-check-circle{width:1.1rem;height:1.1rem;border-radius:1rem;color:rgb(255 255 255 / .8);text-align:center;align-items:center;justify-content:center;display:inline-flex;padding-right:.1rem;margin-left:1rem;position:absolute;right:1rem;top:calc(50% - .55rem)}
        &:not(.active){
            i.fa-check-circle{background:rgb(255 255 255);border:1px solid rgb(0 0 0 / .2)}
        }
        &.active{
            /* background:rgb(61 128 228 / .7); */
            background: #ff9a44;color:#fff;
            i.fa-check-circle{
                background:#ff9a44;border:1px solid rgb(255 255 255 / .4);
                &::before{content:'✔';font-size:.6rem;font-weight:600;color:white !important;font-family: 'Poppins'; }
            }
        }
    }
}

.pricing-table{
    @media screen and (max-width:767px){
        &{flex-direction:column-reverse}
        .col-12{justify-content:center;display:flex;margin-bottom:1rem}
        .card{max-width:500px!important}
    }
    .card{
        border-radius:20px;background-color:#fff;background-repeat:no-repeat;border-color:rgb(255 255 255 / .3);width:100%;padding:20px 25px 25px 25px;/*max-width:380px;*/max-width:430px;
        a.btn.bg-color{
            background:#ff9a44;font-size:1rem;transition:all .1s;
            &:hover{margin-left:-.2rem;transition:all .3s}
        }
        h2 small{font-weight:inherit}
        h2.text-deco{
            position:relative;width:fit-content;
            &::before{content:'';border-bottom:4px solid;position:absolute;bottom:calc(50% - 0px);left:-5px;border-color:rgb(255 255 255 / .8);rotate:0deg;width:calc(100% + 10px)}
        }
        small.kdv-text{position:absolute;top:145px;left:30px;font-size:80%;font-weight:500;color:rgba(136, 136, 136, 1)}
        &.tablo-dijital-donusum{
            small.kdv-text{color: rgba(255, 255, 255, .85);}
        }
    }
}
button:focus {
    outline: none;
}
.card.shadow{
    position:relative;border:2px solid #6db4ec;
    .pricing-card{
        .card-header{
            width:100%;height:60px;padding:10px;border:1px solid #ededed;border-radius:10px;
            .card-btn-parent{
                width:100%;height:100%;display:flex;position:relative;
                button{
                    width:calc(100%);height:100%;border:none;border-radius:7px;background-color:#fff0;cursor:pointer;z-index:1;font-weight:500;transition:color .5s ease;color:#fff;
                    &:nth-of-type(1).active,&:nth-of-type(1).active~div{left:0;color:#ff9a44;border: none;}
                    &:nth-of-type(2).active,&:nth-of-type(2).active~div{left:calc(100%);color:#ff9a44;border: none;}
                    &:nth-of-type(3).active,&:nth-of-type(3).active~div{left:calc(calc(100%)*1);color:#ff9a44;border: none;}
                }
                div{position:absolute;top:0;left:0;width:calc(100%);height:100%;background:#fff;border-radius:7px;transition:left .5s ease;border: none;}

            }
        }


    }
    
    .card__border{
        border-radius:20px;position:absolute;left:-5px;top:-5px;width:calc(100% + 10px);height:calc(100% + 10px);overflow:hidden;z-index:-1;
        &::before{content:'';position:absolute;height:150%;width:0;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center center;z-index:-1;border:10px;animation:rotate 5s linear infinite forwards}
    }
    &:hover .card__border::before{box-shadow:0 0 200px 100px #ffffff,0 0 100px 200px #f5f5f5}
}

section.choose-pack{
    @media screen and (max-width:1199px){
        &{
            padding-top:0!important;
            /* .container.custom_container{ */
            .container{
                /* background:linear-gradient(0deg,#fff0 0%,rgb(0 0 0 / .72) 90%); */
                @media screen and (min-width:992px){
                    .row{width:100%}
                }
            }
        }
    }
    /* .container.custom_container{ */
    .container{
        position:relative;z-index:999;opacity:1;
        .row{
            .col-12.col-xl-6{
                &:first-child{
                    display:flex;align-items:center;
                    @media screen and (max-width:1199px){
                        display: none !important;
                    }
                    .yeni-icon-list{
                        margin-bottom:6rem;height:fit-content;display:flex;align-items:center;justify-content:center;
                        @media screen and (max-width:1199px){
                            .yeni-icon{display:none!important}
                        }
                        .yeni-icon{
                            font-size:1.25rem;line-height:1.1;font-weight:600;color:#fff;max-width:380px;border:1px solid rgb(255 255 255 / .8);padding:1rem;margin-bottom:1rem;border-radius:1rem;min-height:3.5rem;display:flex;align-items:center;
                            &:hover{margin-left:.4rem;transition:all .2s}
                            div{
                                width:100%;
                                span{display:block;width:100%;text-align:center;min-width:310px;padding:0 1.5rem;user-select:none}
                            }
                            svg{width:2.4rem;height:2.4rem;fill:white!important}
                        }
                    }
                }
                &:last-child{
                    @media screen and (max-width:1199px){
                        margin-top: 1.5rem;
                    }
                    .card.shadow{
                        &.tablo-aylik{
                            background-position:0 100%;background-size:100% 85%;float:right;
                            h2{text-align:left;font-weight:600;font-size:2.7rem;color:rgb(0 0 0 / .81)!important;padding-bottom:0;margin-bottom:0!important;display:flex;align-items:center;justify-content:space-around;margin-bottom:73.7px!important;margin-top:1.7rem}
                            p{height:56px}
                        }
                        &.tablo-dijital-donusum{
                            background-position:-1px -1px;background-size:102% 220px;
                            h5{text-align:left;font-weight:600;color:rgb(255 255 255);margin-top:0rem;font-size:1.25rem}
                            h2{
                                &.text-deco{text-align:left;font-weight:600;margin-top:1rem;font-size:1.6rem;margin-bottom:0!important;padding-bottom:0;opacity:.8;margin-left:.6rem}
                                &:not(.text-deco){text-align:left;font-weight:600;margin-top:0;font-size:2.7rem;padding-bottom:50px;display:flex;align-items:center;justify-content:space-around;margin-bottom:1.5rem}
                            }
                        }
                        p{
                            color:rgb(0 0 0 / .5);font-size:15px;font-weight:500;opacity:1;padding-bottom:1rem;
                            @media screen and (max-width: 767px) {
                                margin-top: 3rem !important;                                
                            }
                        }
                        h2{
                            div{
                                float:right;font-weight:400;font-size:1rem;line-height:1.1;display:block;width:50%;
                                span{font-size:.75rem}
                            }
                        }
                        button.detay-btn{
                            background:none;border:none;width:100%!important;cursor:pointer;
                            .s_icon_3{min-width:200px;margin:0;box-shadow:0 10px 10px 0 0 #ff9a44}
                        }
                    }
                }
            }
        }
    }
}

#kampanya-20 {
    /* animation: arkacevir .6s linear 0s infinite; */
    position: absolute;
    top: 68px;
    left: 130px;
    font-weight: 600;
    background-color: #fff;
    color: black !important;
    line-height: 1.1rem;
    width: fit-content;
    padding: .25rem .5rem !important;
    user-select: none;
    border-radius: 3px;
    @media screen and (max-width: 767px) {
        &{
            top: 62px;
        }                    
    }
}

@-webkit-keyframes arkacevir{
    0%{background-color:#fff;color:black!important}
    50%{background-color:#42d79e;color:white!important}
    100%{background-color:#fff;color:black!important}
}
@keyframes arkacevir{
    0%{background-color:#fff;color:black!important}
    50%{background-color:#42d79e;color:white!important}
    100%{background-color:#fff;color:black!important}
}

@keyframes rotate{
    50%{box-shadow:0 0 40px 60px #fff}
    100%{transform:translate(-50%,-50%) rotate(360deg)}
}