@media only screen and (min-width: 967px){
    .pricing-plans-header-small{
        display: none;
    }
}

@media only screen and (max-width: 968px){

    .top-up-company {
        padding: 7px 20px;
    }

    .road-steps{
        gap: 5px
    }
    .road-steps .road-step-indicator{
        width: 35px;
        height: 35px;
        border-width: 4px;
    }
    .road-step-description{
        width: calc(100% / 6 - (10px * 5) / 6);
        overflow: visible;
        opacity: 0 !important;
        position: relative;
        white-space: nowrap;
    }
    .road-step-description.active{
        opacity: 1 !important;
    }
    .road-step-description:first-child > *{
        transform: none;
    }
    .road-step-description:last-child > *{
        transform: translateX(-100%);
    }
    .road-step-description .top-up{
        width: 100%;
    }
    .road-step-description .price{
        position: absolute;
        white-space: nowrap;
        opacity: 1 !important;
    }

    .pricing-plans-accordion{
        display: none;
    }
    .pricing-plan-container{
        overflow: visible;
    }
    .pricing-plans:nth-child(2){
        position: static;
    }
    .pricing-plans:nth-child(2) tr{
        display: flex;
        flex-direction: column;
    }
    .pricing-plans:nth-child(2) td{
        width: 100%;
        display: block;
        padding: 5px !important;
    }
    .plan-header{
        align-items: start;
        justify-content: start;
        text-align: start;
        background-color: var(--light-teal-1);
        padding: 15px 10px;
        border-radius: 20px;
    }
    .plan-title{
        text-align: start;
    }
    .pricing-plans-header-small{
        margin-top: 60px;
        position: sticky;
        background-color: #fff;
        top: 60px;
        display: flex;
    }
    .pricing-plans-header-small .col:first-child{
        font-size: 1.5rem;
        text-align: start;
    }
    .pricing-plans-header-small .col{
        width: 100%;
        font-weight: bold;
        text-align: center;
        place-content: center;
        align-content: center;
    }
    .pricing-plans-header-small .col div{
        color: #fff;
        border-radius: 10px;
        margin: 5px;
        padding: 10px 5px;
    }

    .pricing-plans:nth-child(2){
        width: 100%;
        top: 60px !important;
    }
    .pricing-plan-container td{
        padding: 5px !important;
    }
    .pricing-plans tr td:not(:first-child){
        font-size: .85rem;
        font-weight: 500 !important;
    }
    .invitation-anouncement{
        display: none !important;
    }
    .plan-header > :not(.button){
        margin: 0 !important;
    }
    .plan-header .button{
        margin-top: 10px;
    }
    .plan-header:has(.orange) > span{
        color: var(--orange);
    }
    .plan-header .price b{
        font-size: 1.5rem !important;
    }
    .plan-header > span:not(.plan-description){
        font-size: 1.1rem !important;
        white-space: nowrap;
        margin-top: 10px !important;
        opacity: .75;
    }
    .plan-title{
        font-size: 1.5rem !important;
    }
    td:has(.invitation-anouncement):after{
        content: "Paketler";
        margin-top: 0;
        font-size: 2rem;
        font-weight: bold;
        text-align: center;
    }
    .pricing-plans .features td:first-child{
        font-size: 1.1rem !important;
    }

}

@media only screen and (max-width: 768px){

    .top-up-comparison-item:has(.tag) .item-img{
        height: 90px;
    }
    .top-up-comparison-item .item-img .tag{
        white-space: unset;
    }

}

@media only screen and (max-width: 648px){

    .top-up-company-selector{
        gap: 5px;
    }
    .top-up-company{
        background-size: 35px;
        background-repeat: no-repeat;
        background-position: center;
    }
    .top-up-company.comp-edm{
        background-image: url('../../img/logos/edm-icon.png');
    }
    .top-up-company.comp-izibiz{
        background-image: url('../../img/logos/izibiz-icon.png');
    }
    .top-up-company.comp-qnb{
        background-image: url('../../img/logos/qnb-icon.png');
    }
    .top-up-company.comp-birfatura{
        background-image: url('../../img/logos/birfatura-icon.png');
    }
    .top-up-company.comp-digital-planet{
        background-image: url('../../img/logos/digital-planet-icon.png');
    }
    .top-up-company img{
        display: none;
    }
    .top-up-comparison-container{
        grid-template-columns: 1fr
    }
    .top-up-comparison-item{
        padding: 10px;
    }
    .top-up-comparison-item .item-img .tag{
        white-space: nowrap;
    }

}

@media only screen and (max-width: 425px){

    .top-up-company{
        background-size: 28px;
    }

    .road-steps{
        gap: 2px
    }
    .road-steps .road-step-indicator{
        width: 30px;
        height: 30px;
        border-width: 3px;
    }

}