@media screen and (min-width:320px) {

        .foreign-users-content,
        .package-header-block {
            margin: 0 auto;
            width: 100%
        }

        .foreign-users-content p {
            font-size: 30px;
            margin: 30px 20px;
            text-align: justify.character-image
        }

        .package-header-block {
            display: inline-block
        }

        .package-header-block .main-title {
            text-align: left;
            font-size: 14px;
            letter-spacing: 0;
            color: #5a2380;
            padding: 10px 5px;
            float: left;
            width: 38%
        }

        [lang=ar] .package-header-block .main-title {
            float: right;
            text-align: right;
            width: 40%
        }

        .package-header-block .sub-title {
            text-align: center;
            font-size: 16px;
            letter-spacing: 0;
            color: #5a2380;
            padding: 10px 0;
            float: right;
            margin-right: 10px
        }

        [lang=ar] .package-header-block .sub-title {
            float: left;
            text-align: center;
            margin-right: 0;
            margin-left: 10px
        }

        .package-header-block .sub-title .bttn {
            color: #fff;
            background: no-repeat padding-box #5c2d94;
            border-radius: 5px;
            font-size: 14px;
            padding: 5px;
            cursor: pointer
        }

        .package-container .package-navigation {
            height: 100%;
            margin: 0 auto;
            position: relative
        }

        .price-subscribe-box .price,
        .price-subscribe-box-free .price {
            margin: 0 auto 20px;
            padding: 3px 5px;
            float: right;
            font-weight: 600;
            color: #c50909;
            font-size: 20px
        }

        .package-container .package-navigation ul.navigation {
            padding: 0;
            margin: 0;
            width: 100%;
            position: absolute;
            text-align: center
        }

        .package-container .package-navigation ul.navigation li {
            list-style: none;
            color: #000;
            padding: 2px;
            margin: 0 4px 0 0;
            background: no-repeat padding-box #fff;
            border: 2px solid #1b558f;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-right-radius: unset;
            border-bottom-left-radius: unset;
            border-bottom: none;
            font-size: 20px;
            cursor: pointer;
            display: list-item;
            width: 23.5%;
            float: left;
            z-index: 99;
            position: relative;
            height: 60px
        }

        [lang=ar] .package-container .package-navigation ul.navigation li {
            float: right;
            margin: 0 0 0 4px
        }

        .package-container .package-navigation ul.navigation li div {
            font-size: 12px;
            line-height: 12px
        }

        .package-container .package-navigation ul.navigation li.onclickheight {
            height: 62px
        }

        .package-container .package-navigation ul.navigation li:nth-child(2) {
            border: 2px solid #f37250;
            border-bottom: none
        }

        .package-container .package-navigation ul.navigation li:nth-child(3) {
            border: 2px solid #ffba11;
            border-bottom: none
        }

        .package-container .package-navigation ul.navigation li:nth-child(4) {
            border: 2px solid #07b3ef;
            border-bottom: none;
            margin: 0
        }

        .package-container .package-navigation .package-main-info {
            background: no-repeat padding-box #fff;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-top-right-radius: unset;
            border-top-left-radius: unset;
            z-index: 1;
            top: 60px;
            position: relative;
        }

        .package-container .package-navigation .package-main-info.one {
            border: 2px solid #1b558f
        }

        .package-container .package-navigation .package-main-info.two {
            border: 2px solid #f37250
        }

        .package-container .package-navigation .package-main-info.three {
            border: 2px solid #ffba11
        }

        .package-container .package-navigation .package-main-info.four {
            border: 2px solid #07b3ef
        }

        .package-main-desc {
            margin: 10px auto auto
        }

        .package-main-desc ul {
            padding: 0;
            margin: 0;
            width: 100%
        }

        .package-main-desc li {
            list-style: none;
            color: #4c2077;
            padding: 12px;
            height: 110px;
            width: 50%;
            border-right: 1px solid #5a2380;
            float: left;
            display: inline-table
        }

        [lang=ar] .package-main-desc li {
            float: right;
            border-left: 1px solid #5a2380;
            border-right: unset
        }

        .package-main-desc li:nth-child(2),
        .package-main-desc li:nth-child(4) {
            border-right: unset
        }

        [lang=ar] .package-main-desc li:nth-child(2),
        [lang=ar] .package-main-desc li:nth-child(4) {
            border-left: unset
        }

        .package-main-desc li .desc-number-price {
            background: no-repeat padding-box #5a2380;
            border-radius: 10px;
            padding: 4px;
            width: 50px;
            float: left;
            color: #fff;
            font-size: 20px;
            text-align: center;
            margin: 0 5px 0 0
        }

        [lang=ar] .package-main-desc li .desc-number-price {
            margin: 0 0 0 5px;
            float: right
        }

        .package-main-desc li .desc-text {
            font-size: 12px;
            line-height: 15px;
            color: #000
        }

        .package-main-desc li .desc-text img {
            margin: 0 5px 5px;
            height: 50px
        }

        .package-main-desc li .desc-text label {
            font-size: 14px;
            color: #5a2380
        }

        .package-main-desc li .desc-text label::after {
            content: "\a";
            white-space: pre
        }

        .price-subscribe-box {
            text-align: center;
            width: 60%;
            clear: both;
            margin: 0 auto;
            padding: 20px 0
        }

        .price-subscribe-box-free {
            text-align: center;
            width: 90%;
            clear: both;
            margin: 0 auto;
            padding: 20px 0
        }

        .price-subscribe-box .price {
            border: 2px solid #c50909;
            border-radius: 5px;
            width: 36%
        }

        .price-subscribe-box-free .price {
            border: 2px solid #c50909;
            border-radius: 5px;
            width: 34%
        }

        .connect-block,
        .kids-block,
        .movies-block,
        .series-block,
        .sports-block,
        [lang=ar] .factual-block,
        [lang=ar] .navigation-hightlight .text,
        [lang=ar] .price-subscribe-box .price {
            float: left
        }

        .price-subscribe-box .btn-actions {
            width: 50%;
            float: left
        }

        .connect-block,
        .factual-block,
        .movies-block,
        .series-block,
        .sports-block,
        [lang=ar] .channel-item,
        [lang=ar] .kids-block,
        [lang=ar] .navigation-hightlight .img,
        [lang=ar] .price-subscribe-box .btn-actions {
            float: right
        }

        .section-packages {
            margin: 0 auto;
            width: 100%;
            position: relative;
            text-align: center
        }

        .channels-filter ul {
            text-align: center;
            padding: 0;
            display: inline-block;
            background: #f2f2f2;
            border-radius: 22px;
            width: 85%;
            height: 48px;
        }

        .channels-filter li {
            display: inline;
            cursor: pointer;
            border-right: 1px solid;
            padding: 0 !important
        }

        .channels-filter li:last-child,
        [lang=ar] .channels-filter li:last-child {
            border: none
        }

        [lang=ar] .channels-filter li {
            border-left: 1px solid;
            border-right: unset
        }

        .channels-list {
            margin: 5px auto;
            text-align: center;
            width: 82%;
            overflow: auto;
            min-height: 192px
        }

        .channel-item {
            margin: 0 4px;
            width: 50px;
            float: left
        }

        .channels-list ul {
            display: inline-block;
            padding: 0
        }

        .channels-list ul li {
            padding: 0;
            display: none;
            opacity: 0;
            visibility: hidden
        }

        .channels-list ul li.show {
            display: block;
            visibility: visible;
            opacity: 1;
            animation: 1s fade
        }

        .section-packages .fa-angle-left,
        .section-packages .fa-angle-right {
            top: 120px;
            font-size: 22px;
            position: absolute;
            background: no-repeat padding-box #a42069;
            width: 33px;
            height: 33px;
            color: #fff;
            border-radius: 50px;
            cursor: pointer;
            padding: 4px
        }

        .section-packages .fa-angle-left {
            left: 1px
        }

        .section-packages .fa-angle-right {
            right: 1px
        }

        .channels-filter.filters li button {
            margin: 5px 0;
            outline: 0 !important
        }

        .channels-filter.filters .filter {
            text-transform: none;
            white-space: nowrap;
            font-family: "Source sans Pro";
            display: inline-block;
            color: #5a2380;
            font-size: 15px;
            font-weight: 600;
            border-radius: unset;
            padding: 0 3px;
            line-height: 16px;
            max-width: 140px;
            min-height: 28px;
        }

        .channels-filter.filters .filter.active,
        .channels-filter.filters .filter:hover {
            box-shadow: none;
            color: #c50909
        }

        [lang=ar] .channels-filter.filters ul {
            overflow: hidden
        }

        [lang=ar] .channels-filter.filters .filter {
            font-family: "Source Sans Pro", bein-arabic, sans-serif
        }

        .package-other-content {
            position: relative;
            top: 100px;
            text-align: center
        }

        [lang=ar] .package-other-content {
            direction: ltr
        }

        .package-other-content .block-inner {
            color: #fff;
            width: 100%;
            margin: 0 auto;
            padding: 0 5px;
            position: relative;
            display: inline-block;
            height: 100%;
            float: left
        }

        .package-other-content .block-inner h1 {
            color: #fff;
            font-size: 14px;
            margin: 5px 0 10px
        }

        .package-other-content .block-inner h2 {
            color: #fff;
            font-size: 16px
        }

        .package-other-content .block-inner p {
            font-size: 14px;
            color: #fff;
            line-height: 15px;
            font-weight: 200
        }

        [lang=ar] .package-other-content .block-inner h1,
        [lang=ar] .package-other-content .block-inner h2,
        [lang=ar] .package-other-content .block-inner p,
        [lang=ar] .package-other-content .survey-package-page {
            direction: rtl
        }

        .package-other-content .block-inner ul {
            padding: 0;
            margin: 0;
            list-style: none;
            width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            text-align: left
        }

        .package-other-content .block-inner .competition-logos ul {
            padding: 0;
            margin: 0;
            list-style: none;
            overflow: unset;
            white-space: unset;
            text-align: left
        }

        .package-other-content .block-inner .competition-logos ul li {
            width: 40px;
            padding: 2px;
            list-style: none;
            display: inline-block;
            margin: 2px;
            background: #fff;
            text-align: center
        }

        .package-other-content .block-inner .block-inner-middle {
            margin: 0 5px
        }

        .media-server-block .block-list .block-desc .block-right .find-more-button,
        .package-other-content .block-inner .block-inner-left,
        .package-other-content .block-inner .block-inner-right,
        .package-other-content .survey-package-page .QSI__EmbeddedFeedbackContainer {
            text-align: left
        }

        .package-other-content .block-inner .find-more-button {
            font-size: 12px;
            margin: 2px 0 6px
        }

        .package-other-content .block-inner .find-more-button a {
            color: #fff;
            text-decoration: none
        }

        .fa.fa-chevron-right {
            font-size: 11px;
            margin: 0 4px
        }

        .poster-block ul {
            display: inline-block;
            margin: 0;
            padding: 0;
            position: relative
        }

        .poster-block li {
            display: inline-grid
        }

        .poster-block .poster-items .poster-image {
            background-position: top center;
            background-size: contain;
            background-repeat: no-repeat;
            position: relative;
            float: left;
            text-align: left
        }

        .poster-block .poster-items .poster-image .poster-gradient {
            display: none;
            position: absolute;
            background: rgba(255, 255, 255, 0);
            background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 100%);
            background: -webkit-gradient(left top, left bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0, rgba(255, 255, 255, 0)), color-stop(0, rgba(255, 255, 255, 0)), color-stop(99%, rgba(0, 0, 0, .99)), color-stop(100%, #000));
            background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 100%);
            background: -o-linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 100%);
            background: -ms-linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 100%);
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 100%);
            height: 50px;
            width: 106%;
            bottom: -3px;
            left: -3px;
            right: -3px
        }

        .poster-block ul li .poster-image {
            height: 105px;
            width: 70px
        }

        .main-block .block-inner .character-image .image-desktop,
        .poster-block .poster-items .channel-img-text {
            display: none
        }

        .poster-block .poster-items .channel-img {
            margin: 5px 0;
            width: 60px
        }

        .media-server-block {
            background: no-repeat padding-box #f0f0f0
        }

        .connect-block,
        .factual-block,
        .kids-block,
        .movies-block,
        .series-block,
        .sports-block {
            background-position: top right;
            background-size: contain;
            background-repeat: repeat;
            height: 253px;
            width: 100%
        }

        [lang=ar] .media-server-block .block-inner ul {
            padding-right: 20px !important;
            text-align: right !important;
            direction: rtl
        }

        .media-server-block .block-inner ul {
            display: block !important;
            list-style-type: square !important;
            margin-top: 1em !important;
            margin-bottom: 1 em !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            padding-left: 20px !important;
            color: #5a2380 !important;
            text-align: left;
            overflow: hidden;
            font-size: 20px !important;
            white-space: normal
        }

        .media-server-block .block-inner li {
            list-style: square;
            color: #5a2380 !important;
            font-size: 14px
        }

        .media-server-block .block-list,
        .media-server-block .block-list .block-desc .block-right {
            width: 100%
        }

        .media-server-block .block-list .block-desc .block-left {
            width: 60%;
            text-align: center;
            margin: 0 auto
        }

        [lang=ar] .media-server-block .block-list .block-desc .block-right .find-more-button,
        [lang=ar] .media-server-block .block-list .block-desc .block-right h1,
        [lang=ar] .package-other-content .survey-package-page .QSI__EmbeddedFeedbackContainer {
            text-align: right
        }

        .media-server-block .block-list .block-desc .block-right .find-more-button a {
            color: #5a2380 !important;
            text-shadow: none
        }

        .media-server-block .block-list .block-desc .block-right h1 {
            text-shadow: none;
            margin: 10px auto;
            text-align: left
        }

        .media-server-block .block-list .block-desc h1 {
            color: #5a2380 !important
        }

        .media-server-block .block-list .block-desc p {
            color: #5a2380 !important;
            font-size: 20px;
            line-height: 25px
        }

        .factual-block {
            background-color: #548725;
            background-image: url("../images/packages-2023/548725_Partner.jpg")
        }

        .connect-block {
            background-color: #575757;
            background-image: url("../images/packages-2023/575757_Connect.jpg")
        }

        .kids-block {
            background-color: #961962;
            background-image: url("../images/packages-2023/961962_kids.jpg")
        }

        .series-block {
            background-color: #0065ae;
            background-image: url("../images/packages-2023/0065ae_Series.jpg")
        }

        .movies-block {
            background-color: #850d0d;
            background-image: url("../images/packages-2023/850d0d_Movie.jpg")
        }

        .sports-block {
            background-color: #480889;
            background-image: url("../images/packages-2023/480889_Sports.jpg")
        }

        .navigation-hightlight {
            position: relative;
            height: 40px;
            width: 100%;
            margin: 0 auto;
            color: #fff;
            font-size: 13px;
            font-weight: 400
        }

        .navigation-hightlight .gray,
        .navigation-hightlight .red {
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
            z-index: 1;
            float: left;
            height: 54px;
            width: 20%;
            position: absolute;
            padding: 2px
        }

        .navigation-hightlight .red {
            background: no-repeat padding-box #c50909;
            left: 24.7%
        }

        [lang=ar] .navigation-hightlight .red {
            right: 24.6%;
            left: 0
        }

        .navigation-hightlight .gray {
            background: no-repeat padding-box #a8a9aa
        }

        .navigation-hightlight .gray img,
        .navigation-hightlight .red img {
            padding: 0 2px
        }

        .navigation-hightlight .img {
            width: 24%;
            float: left
        }

        .navigation-hightlight .text {
            width: 76%;
            float: right
        }

        .terms-and-conditions {
            max-width: 990px;
            margin: 20px auto;
            padding: 20px
        }

        .terms-and-conditions p {
            font-size: 12px
        }

        .connect-block .block-inner-middle,
        .factual-block .block-inner-left,
        .kids-block .block-inner-middle,
        .movies-block .block-inner-left,
        .series-block .block-inner-middle,
        .sports-block .block-inner-middle {
            width: 50%;
            float: left;
            text-align: left
        }

        .connect-block .block-inner-middle {
            width: 61%
        }

        .connect-block .block-inner-left,
        .factual-block .block-inner-middle,
        .kids-block .block-inner-left,
        .movies-block .block-inner-middle,
        .series-block .block-inner-left,
        .sports-block .block-inner-right {
            width: 50%;
            float: right
        }

        .main-block .mobile-bg {
            width: 100%;
            height: 272px;
            background-position: top right;
            background-repeat: no-repeat;
            background-size: cover
        }

        .main-block .block-inner .character-image {
            max-height: 100%;
            height: 100%;
            position: relative;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: flex-end;
            justify-content: center
        }

        .main-block .block-inner .character-image .image-mobile {
            display: block
        }

        .connect-block .connect-channel-img,
        .exclusive-rights .channel-img {
            margin-top: 5px;
            width: 126px
        }

        .connect-block .block-desc .connect-screen-img {
            height: 78px
        }

        .poster-block ul::-webkit-scrollbar {
            height: 8px;
            scrollbar-height: 8px
        }

        .poster-block ul::-webkit-scrollbar-track {
            background: #fff
        }

        .poster-block ul::-webkit-scrollbar-thumb {
            background: #7c7c7c;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            border-top-left-radius: unset;
            border-bottom-left-radius: unset
        }

        .poster-block ul::-webkit-scrollbar-thumb:hover {
            background: #7c7c7c
        }

        .block-action,
        [lang=ar] .subscribe-btn-box {
            padding: 10px 0 !important
        }

        .package-other-content .survey-package-page {
            width: 100%;
            clear: both;
            margin: -20px auto 20px;
            background-color: #fff;
            padding: 4px 10px;
            border-radius: 12px
        }
    }

    .container-events-data,
    .container-events-data[lang=AR],
    .container-events-data[lang=ar],
    .events[lang=ar] .price,
    .events[lang=ar] .title {
        font-family: bein-arabic
    }

    @media screen and (min-width:600px) {
        .package-other-content .block-inner .competition-logos ul li {
            width: 70px
        }

        .media-server-block .block-list .block-desc .block-left {
            width: 30%
        }
    }

    @media screen and (min-width:768px) {
        .package-header-block .main-title {
            font-size: 18px;
            width: 40%
        }

        [lang=ar] .package-header-block .main-title {
            float: right;
            text-align: right;
            width: 40%
        }

        .package-header-block .sub-title {
            width: 27%;
            padding: 10px 0
        }

        [lang=ar] .package-header-block .sub-title {
            width: 27%
        }

        .package-header-block .sub-title .bttn,
        .package-other-content .block-inner h1 {
            font-size: 22px
        }

        .foreign-users-content {
            padding: 150px 0
        }

        .price-subscribe-box {
            width: 40%
        }

        .channels-filter ul {
            width: 58%;
            margin: 0 auto
        }

        .channels-list {
            width: 87%
        }

        .channel-item {
            width: 60px;
            margin: 0 5px
        }

        .channels-filter.filters .filter {
            max-width: 165px
        }

        .package-main-desc li {
            height: 100px
        }

        .package-main-desc li .desc-text {
            font-size: 17px;
            line-height: 17px
        }

        .package-main-desc li .desc-text img {
            margin: 0 10px 5px;
            height: 60px
        }

        .package-main-desc li .desc-text label {
            font-size: 19px
        }

        .package-container .package-navigation ul.navigation li {
            padding: 5px;
            margin: 0 10px 0 0;
            font-size: 20px;
            height: 66px;
            border-bottom: none
        }

        [lang=ar] .package-container .package-navigation ul.navigation li {
            margin: 0 0 0 10px
        }

        .package-container .package-navigation ul.navigation li div {
            font-size: 13px;
            line-height: 15px
        }

        .package-container .package-navigation ul.navigation li.onclickheight {
            height: 68px
        }

        .package-container .package-navigation ul.navigation li:nth-child(2),
        .package-container .package-navigation ul.navigation li:nth-child(3),
        .package-container .package-navigation ul.navigation li:nth-child(4) {
            border-bottom: none
        }

        [lang=ar] .package-container .package-navigation ul.navigation li:nth-child(4),
        [lang=ar] .poster-block ul li .poster-image {
            margin: 0
        }

        .package-container .package-navigation .package-main-info {
            top: 66px
        }

        .poster-block ul li .poster-image {
            height: 190px;
            width: 130px;
            margin: 0
        }

        .poster-block .poster-items .channel-img-text {
            margin-top: 8px;
            font-size: 10px
        }

        .poster-block .poster-items .channel-img {
            margin: 8px 0;
            width: 100px
        }

        .poster-block ul li .poster-image .poster-gradient {
            height: 130px
        }

        .navigation-hightlight {
            font-size: 16px;
            white-space: nowrap;
            height: 44px
        }

        .navigation-hightlight .gray,
        .navigation-hightlight .red {
            padding: 10px 0;
            width: 20%
        }

        .navigation-hightlight .red {
            left: 24.7%
        }

        [lang=ar] .navigation-hightlight .red {
            right: 24.3%
        }

        .navigation-hightlight .gray img,
        .navigation-hightlight .red img {
            padding: 0 5px
        }

        .navigation-hightlight .img {
            width: 16%
        }

        .navigation-hightlight .text {
            width: 84%
        }

        .connect-block .block-inner-middle,
        .factual-block .block-inner-left,
        .kids-block .block-inner-middle,
        .movies-block .block-inner-left,
        .series-block .block-inner-middle,
        .sports-block .block-inner-middle {
            width: 50%;
            float: left
        }

        .connect-block .block-inner-left,
        .factual-block .block-inner-middle,
        .kids-block .block-inner-left,
        .movies-block .block-inner-middle,
        .series-block .block-inner-left,
        .sports-block .block-inner-right {
            width: 50%;
            float: right
        }

        #back-to-top {
            position: fixed;
            z-index: 99;
            bottom: 40px;
            right: 20px;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            display: inline-block;
            background: #5c2d91;
            color: #fff;
            opacity: 0;
            -webkit-transition: .4s ease-in-out;
            -o-transition: .4s ease-in-out;
            transition: .4s ease-in-out;
            border-radius: 100%
        }

        #back-to-top .fa {
            float: none !important;
            font-size: 20px
        }

        [lang=ar] #back-to-top {
            left: 30px;
            right: auto
        }

        #back-to-top.active {
            opacity: 1
        }

        .main-block .mobile-bg {
            background: unset !important
        }

        .package-other-content .block-inner {
            padding: 0 10px
        }

        .package-other-content .block-inner p {
            font-size: 20px;
            line-height: 26px
        }

        .package-other-content .block-inner .competition-logos ul li {
            margin: 4px;
            width: 80px
        }

        .connect-block .block-desc .connect-screen-img {
            height: 150px
        }

        .media-server-block .block-list .block-desc .block-left {
            width: 40%;
            float: left
        }

        .media-server-block .block-list .block-desc .block-right {
            width: 60%;
            float: right
        }

        .main-block .block-inner .character-image {
            max-width: unset
        }

        .media-server-block .block-inner li {
            font-size: 16px
        }

        .connect-block,
        .factual-block,
        .kids-block,
        .movies-block,
        .series-block,
        .sports-block {
            height: 386px;
            padding: 5px 0 0
        }

        .package-other-content .block-inner .find-more-button {
            font-size: 16px;
            margin: 2px 0 10px
        }

        .fa.fa-chevron-right {
            font-size: 14px;
            margin: 0 8px
        }

        .terms-and-conditions p {
            font-size: 14px
        }

        .connect-block .connect-channel-img,
        .exclusive-rights .channel-img {
            width: 200px;
            margin-top: 10px
        }
    }

    @media screen and (min-width:990px) {
        .foreign-users-content {
            width: 50%
        }

        .package-header-block .main-title,
        [lang=ar] .package-header-block .main-title {
            width: 75%
        }

        .package-header-block .sub-title {
            margin: 10px 0;
            width: unset
        }

        [lang=ar] .package-header-block .sub-title {
            width: unset
        }

        .package-other-content .block-inner {
            width: 95%
        }

        .navigation-hightlight .red {
            left: 25%
        }

        [lang=ar] .navigation-hightlight .red {
            right: 25%
        }

        .poster-block ul li .poster-image {
            height: 260px;
            width: 180px
        }

        .poster-block .poster-items .channel-img {
            width: 100px;
            margin: 8px 0
        }

        .poster-block .poster-items .channel-img-text {
            font-size: 12px;
            margin-top: 10px
        }

        .poster-block ul li .poster-image .poster-gradient {
            height: 180px
        }

        .package-other-content .block-inner h1 {
            font-size: 29px
        }

        .package-other-content .block-inner p {
            font-size: 20px;
            line-height: 23px
        }

        .package-other-content .block-inner .competition-logos ul li {
            margin: 4px;
            width: 22%
        }

        .media-server-block .block-list .block-desc .block-left {
            width: 50%;
            float: left
        }

        .media-server-block .block-list .block-desc .block-right {
            width: 50%;
            float: right
        }

        .media-server-block .block-inner li {
            font-size: 18px
        }

        .connect-block,
        .factual-block,
        .kids-block,
        .movies-block,
        .series-block,
        .sports-block {
            height: 460px;
            padding: 5px 0 0
        }

        .connect-block .block-desc .connect-screen-img {
            height: 200px
        }

        .connect-block .connect-channel-img,
        .exclusive-rights .channel-img {
            margin-top: 15px
        }
    }

    @media screen and (min-width:1024px) {
        .navigation-hightlight .red {
            left: 24.5%
        }

        [lang=ar] .navigation-hightlight .red {
            right: 24.3%
        }
    }

    @media screen and (min-width:1367px) {

        .price-subscribe-box .price,
        .price-subscribe-box-free .price {
            font-weight: 600;
            white-space: nowrap;
            font-size: 26px;
            padding: 5px;
            float: unset
        }

        .package-header-block {
            display: flow-root;
            width: 85%
        }

        .package-header-block .main-title {
            font-size: 40px;
            line-height: 40px;
            padding: 10px 0;
            width: 57%
        }

        [lang=ar] .package-header-block .main-title {
            width: 60%
        }

        .package-header-block .sub-title {
            padding: 10px 0
        }

        [lang=ar] .package-header-block .sub-title {
            width: unset
        }

        .package-header-block .sub-title .bttn {
            width: 220px;
            padding: 10px 0;
            font-size: 22px
        }

        .navigation-hightlight {
            width: 85%;
            font-size: 20px;
            /* font-weight: 600; */
            height: 48px
        }

        .navigation-hightlight .gray,
        .navigation-hightlight .red {
            border-top-right-radius: 25px;
            border-top-left-radius: 25px;
            height: 72px;
            width: 20%;
            padding: 10px 15px
        }

        .navigation-hightlight .gray img,
        .navigation-hightlight .red img {
            padding: 0 5px
        }

        .navigation-hightlight .img {
            width: 13%
        }

        .navigation-hightlight .text {
            width: 87%
        }

        .navigation-hightlight .red {
            left: 25.5%
        }

        [lang=ar] .navigation-hightlight .red {
            right: 25.5%
        }

        .package-container .package-navigation,
        .package-other-content .survey-package-page,
        .price-subscribe-box-free .price {
            width: 85%
        }

        .package-container .package-navigation ul.navigation {
            width: 100%
        }

        .package-container .package-navigation ul.navigation li {
            padding: 10px;
            margin: 0;
            border-top-left-radius: 30px;
            border-top-right-radius: 30px;
            border-bottom-right-radius: unset;
            border-bottom-left-radius: unset;
            border-bottom: none;
            font-size: 34px;
            height: 100px
        }

        .package-container .package-navigation ul.navigation li div {
            font-size: 20px;
            line-height: 20px
        }

        .package-container .package-navigation ul.navigation li.onclickheight {
            height: 102px
        }

        .package-container .package-navigation ul.navigation li:nth-child(2),
        .package-container .package-navigation ul.navigation li:nth-child(3),
        .package-container .package-navigation ul.navigation li:nth-child(4) {
            border-bottom: none;
            margin-left: 2%
        }

        .package-other-content .block-inner .block-inner-middle,
        [lang=ar] .package-container .package-navigation ul.navigation li {
            margin: 0
        }

        [lang=ar] .package-container .package-navigation ul.navigation li:nth-child(2),
        [lang=ar] .package-container .package-navigation ul.navigation li:nth-child(3),
        [lang=ar] .package-container .package-navigation ul.navigation li:nth-child(4) {
            margin-right: 2%;
            margin-left: 0
        }

        .package-container .package-navigation .package-main-info {
            min-height: 500px;
            border-bottom-left-radius: 30px;
            border-bottom-right-radius: 30px;
            border-top-right-radius: unset;
            border-top-left-radius: unset;
            top: 100px
        }

        .package-main-desc,
        .section-packages,
        .terms-and-conditions {
            margin: 40px auto auto
        }

        .package-main-desc ul.two-items {
            margin: 0 auto;
            width: 50%
        }

        .package-main-desc ul.two-items li {
            margin: 0 auto;
            width: 40% !important
        }

        .package-main-desc ul.three-items {
            padding: 0;
            margin: 0 auto;
            width: 70%
        }

        .package-main-desc ul.three-items li {
            margin: 0 auto;
            width: 30% !important
        }

        .package-main-desc li {
            padding: 15px;
            height: 160px;
            width: 22%;
            border-right: 1px solid #5a2380 !important;
            float: left
        }

        .package-main-desc li .desc-number-price {
            border-radius: 17px;
            padding: 5px;
            width: 70px;
            float: left;
            font-size: 34px;
            margin-right: 10px
        }

        [lang=ar] .package-main-desc li {
            border-left: 1px solid #5a2380 !important;
            border-right: unset !important;
            float: right
        }

        [lang=ar] .package-main-desc li .desc-number-price {
            float: right;
            margin-left: 10px;
            margin-right: 0
        }

        .package-main-desc li .desc-text {
            font-size: 20px;
            line-height: 22px
        }

        .package-main-desc li .desc-text img {
            height: 66px
        }

        .package-main-desc li .desc-text label,
        .package-other-content .block-inner h2 {
            font-size: 24px
        }

        .package-main-desc li .desc-text label::after {
            content: "\a";
            white-space: pre
        }

        .price-subscribe-box {
            width: 12%;
            float: left;
            clear: unset;
            padding: 0 !important
        }

        .price-subscribe-box-free {
            width: 22%;
            float: left;
            clear: unset;
            padding: 0 !important
        }

        [lang=ar] .media-server-block .block-list .block-desc .block-left,
        [lang=ar] .price-subscribe-box {
            float: right
        }

        .price-subscribe-box .price {
            width: 72%
        }

        [lang=ar] .price-subscribe-box .price {
            float: unset
        }

        .price-subscribe-box .btn-actions {
            float: unset !important;
            width: 100%
        }

        .price-subscribe-box .btn.btn-purple {
            font-size: 24px !important;
            padding: 10px 12px
        }

        [lang=ar] .price-subscribe-box .btn.btn-purple {
            font-size: 26px !important;
            padding: 10px 38px
        }

        .channel-item {
            width: 70px;
            margin: 0 6px
        }

        .section-packages .fa-angle-left,
        .section-packages .fa-angle-right {
            font-size: 30px;
            width: 49px;
            height: 49px;
            padding: 7px;
            top: 0
        }

        .section-packages .fa-angle-left {
            left: 200px
        }

        .section-packages .fa-angle-right {
            right: 200px
        }

        .channels-filter.filters .filter {
            font-size: 23px;
            font-weight: 400;
            padding: 10px;
            line-height: 16px;
            max-width: 300px;
            min-height: 28px
        }

        .package-other-content {
            top: 170px
        }

        .package-other-content .block-inner {
            width: 85%;
            padding: 0;
            float: unset
        }

        .package-other-content .sports-block .block-inner {
            width: 85% !important
        }

        .package-other-content .block-inner h1 {
            font-size: 28px;
            margin: 15px 0 10px
        }

        .package-other-content .block-inner .competition-logos ul li {
            width: 120px;
            padding: 8px;
            margin: 0 8px 8px 0
        }

        .poster-block ul {
            display: inline-block;
            margin: 0;
            padding: 0
        }

        .poster-block .poster-items .poster-image {
            height: 300px;
            width: 200px;
            margin: 0 10px 0 0;
            padding: 0
        }

        .poster-block .poster-items .channel-img {
            width: 130px;
            margin: 10px 0
        }

        .poster-block .poster-items .channel-img-text {
            font-size: 14px;
            margin-top: 6px
        }

        .poster-block .poster-items .poster-image .poster-gradient {
            height: 110px;
            width: 106%;
            bottom: -5px;
            left: -5px;
            right: -5px
        }

        .media-server-block .block-list .block-desc .block-left {
            width: 50%;
            float: left;
            text-align: center
        }

        .media-server-block .block-list .block-desc .block-right {
            width: 50%;
            float: right
        }

        [lang=ar] .media-server-block .block-list .block-desc .block-right {
            float: left
        }

        .media-server-block .block-list .block-desc p {
            font-size: 20px;
            line-height: 26px
        }

        [lang=ar] .package-other-content .block-inner .block-inner-middle {
            padding: 0 30px 0 0
        }

        .connect-block,
        .factual-block,
        .kids-block,
        .movies-block,
        .series-block,
        .sports-block {
            height: auto;
            width: 100%;
            padding: 6px 7.5% 0
        }

        .factual-block,
        .kids-block,
        .movies-block,
        .series-block {
            height: auto;
        }

        .connect-block .block-inner-middle,
        .factual-block .block-inner-left,
        .kids-block .block-inner-middle,
        .movies-block .block-inner-left,
        .series-block .block-inner-middle,
        .sports-block .block-inner-middle {
            width: 44%;
            float: left
        }

        .connect-block .block-inner-left,
        .factual-block .block-inner-middle,
        .kids-block .block-inner-left,
        .movies-block .block-inner-middle,
        .series-block .block-inner-left,
        .sports-block .block-inner-right {
            width: 56%;
            float: right
        }

        .media-server-block .block-inner li {
            font-size: 20px
        }

        .connect-block .block-desc p img {
            max-width: 80%
        }

        .main-block .block-inner .character-image .image-mobile {
            display: none
        }

        .main-block .block-inner .character-image .image-desktop {
            display: block
        }

        .connect-block .block-desc .connect-screen-img {
            height: 220px
        }
    }

    .channel-item,
    .events-section {
        display: inline-block
    }

    .events-section .event-left,
    .events-section .event-right {
        float: left;
        vertical-align: top
    }

    .event-right img {
        margin-right: 10px
    }

    .event-package-header-row {
        min-height: 130px
    }

    .events-section {
        margin: 0 0 30px
    }

    .events-section .event-left {
        width: 70%
    }

    .events-section[lang=AR] .event-left .text1,
    .events-section[lang=AR] .event-left .text2 {
        text-align: right
    }

    .event-channels,
    .events-section[lang=en] .event-left .text1,
    .events-section[lang=en] .event-left .text2 {
        text-align: left
    }

    .events-section .event_title {
        font-size: 26px
    }

    .events-section .event_summary {
        font-size: 16px
    }

    .events-section .price_button {
        display: inline-block;
        text-align: center;
        margin-bottom: 10px;
        height: 57px;
        clear: both
    }

    .events-section[lang=AR] .price_button {
        float: right
    }

    .events-section[lang=en] .price_button {
        float: left
    }

    .events-section .price_button .left {
        border: 1px solid #a42069;
        border-radius: 8px 0 0 8px;
        height: 57px;
        line-height: 57px;
        vertical-align: middle;
        float: left;
        color: #5c2d94
    }

    .events-section .price_button .left .t1 {
        font-size: 24px;
        margin-top: -2px
    }

    .events-section .price_button .left .t2 {
        font-size: 28px;
        margin-top: -5px;
        font-weight: 700
    }

    .events-section .price_button .right {
        border-radius: 0 8px 8px 0;
        background: linear-gradient(0deg, #30067c 0, #5c2d91 61%, #5c2d91 100%) no-repeat padding-box;
        height: 57px;
        line-height: 57px;
        vertical-align: middle;
        float: left;
        font-size: 18px;
        color: #fff
    }

    .events-section .event_purple_button {
        width: 312px;
        border-radius: 8px;
        font-size: 22px;
        height: 57px;
        line-height: 57px;
        font-weight: 700;
        background: var(--unnamed-color-a42069) 0 0 no-repeat padding-box;
        background: no-repeat padding-box #a42069;
        color: #fff;
        display: block;
        text-align: center;
        clear: both
    }

    .events-section a,
    .events[lang=ar] .button a,
    .events[lang=en] .button a {
        color: #fff;
        text-decoration: none
    }

    .event-channels {
        width: 90%;
        max-height: 140px;
        overflow: hidden
    }

    .event-channels img {
        width: 66px
    }

    @media (min-width:320px) {

        .events-section,
        .price_button {
            width: 95%
        }

        .event-right img {
            width: 90px;
            height: 90px
        }

        .events-section .event-left .text1 {
            font-size: 24px;
            font-weight: 700;
            color: #5a2380
        }

        .events-section .event-left .text2 {
            font-size: 16px
        }

        .price_button .left,
        .price_button .right {
            width: 48%
        }

        .events-section .event_purple_button {
            width: 96%
        }
    }

    @media (min-width:768px) {
        .events-section {
            width: 400px
        }

        .events-section .event-left .text1 {
            font-size: 24px;
            font-weight: 700;
            color: #5a2380
        }

        .events-section .event-left .text2 {
            font-size: 16px
        }
    }

    @media (min-width:1200px) {
        .events-section {
            width: 400px;
            margin: 10px
        }

        .xx-events-section:first-child {
            border-right: .5px solid #e5e4e2
        }
    }

    @media (min-width:1600px) {
        .xx-events-section:nth-child(2) {
            border-right: .5px solid #e5e4e2
        }
    }

    #events_ajax_data .banner-spin,
    .event-packages-filter .banner-spin {
        position: absolute;
        width: 100%;
        height: 100%
    }

    #events_ajax_data .banner-spin .spinner,
    .event-packages-filter .banner-spin .spinner {
        border-top: .8em solid #dadbdf;
        border-right: .8em solid #dadbdf;
        border-bottom: .8em solid #dadbdf;
        border-left: .8em solid #5a237f;
        -webkit-animation: .8s linear infinite spin;
        animation: .8s linear infinite spin
    }

    #events_ajax_data .banner-spin .spinner,
    .event-packages-filter .banner-spin .spinner,
    .event-packages-filter .banner-spin .spinner::after {
        border-radius: 50%;
        width: 8em;
        height: 8em;
        position: absolute;
        top: 50%;
        margin-top: -4.05em;
        left: 46%
    }

    .container-events-data {
        padding-bottom: 10px;
        margin: 0 auto;
        text-align: center
    }

    .modal-backdrop {
        height: 100%;
        width: 100%
    }

    .btn_events[lang=ar] {
        margin-left: 5px
    }

    .btn_events[lang=en] {
        margin-right: 5px
    }

    .modalEvents .modal-backdrop {
        height: 200% !important
    }

    #modalEvents .modal-body {
        padding: 0
    }

    #modalEvents .modal-content {
        background-color: rgba(255, 255, 255, 0);
        border: none
    }

    #modalEvents .modal-header {
        border: none
    }

    #modalEvents.fade.in {
        backdrop-filter: blur(3px)
    }

    @media(min-width:320px) {
        .events-section {
            width: 95%
        }
    }

    @media(min-width:500px) {
        .events-section {
            width: 400px
        }
    }

    @media(min-width:1200px) {
        #modalEvents .modal-dialog {
            width: 1100px
        }
    }

    @media(min-width:1600px) {
        #modalEvents .modal-dialog {
            width: 1300px
        }
    }

    .events-section {
        padding: 0 15px 15px;
        vertical-align: top;
        border: 1px solid #a42069;
        border-radius: 5px;
        background-color: #fff;
        margin-bottom: 8px
    }

    .circlebutton[lang=ar],
    .circlebutton[lang=en] {
        font-weight: 700;
        border-radius: 50%;
        width: 30px;
        position: relative;
        cursor: pointer;
        clear: both;
        background-color: #fff;
        color: #000;
        text-align: center
    }

    .events[lang=ar] .title {
        font-size: 20px;
        font-weight: 700;
        margin: 10px
    }

    .events[lang=ar] .price {
        background-color: #e9e8f0;
        font-size: 16px;
        height: 30px;
        line-height: 30px;
        vertical-align: middle;
        width: 100px;
        margin: 10px auto;
        border-radius: 50px
    }

    .events[lang=ar] .description {
        height: 130px;
        font-family: bein-arabic;
        margin: 10px;
        font-size: 14px;
        color: #222;
        text-align: right;
        direction: rtl;
        max-height: 130px;
        overflow: hidden
    }

    .events[lang=ar] .button,
    .events[lang=en] .button {
        background-color: #a42069;
        font-size: 23px;
        height: 40px;
        line-height: 40px;
        vertical-align: middle;
        width: 170px;
        color: #fff;
        margin: 0 auto;
        border-radius: 5px;
        cursor: pointer
    }

    .events[lang=en] .title {
        font-size: 20px;
        font-weight: 700;
        margin: 10px
    }

    .circlebutton[lang=ar],
    .circlebutton[lang=en],
    .events[lang=en] .price {
        font-size: 16px;
        height: 30px;
        line-height: 30px;
        vertical-align: middle
    }

    .events[lang=en] .price {
        background-color: #e9e8f0;
        width: 100px;
        margin: 10px auto;
        border-radius: 50px
    }

    .events[lang=en] .description {
        height: 130px;
        margin: 10px;
        font-size: 14px;
        color: #222;
        text-align: left;
        direction: ltr;
        max-height: 130px;
        overflow: hidden
    }

    .circlebutton[lang=ar] {
        margin: 10px;
        float: right
    }

    .circlebutton[lang=en] {
        margin: 10px;
        float: left
    }

    .container-events-data[lang=en] {
        font-family: 'Source sans Pro'
    }

    .hides {
        display: none
    }

    .modal-dialog,
    .modal:before {
        display: inline-block;
        vertical-align: middle
    }

    #events_ajax_data {
        background-color: #fff;
        border-radius: 10px
    }

    .addon_title {
        font-size: 25px;
        color: #000;
        padding: 10px 10px 5px
    }

    .addon_note {
        font-size: 14px;
        color: #000
    }

    .modal {
        text-align: center;
        padding: 0 !important
    }

    .modal:before {
        content: '';
        height: 100%;
        margin-right: -4px
    }

    .modal-dialog {
        text-align: left
    }
    
.package-banners{
    top: 170px;
    position: relative;
}