:root{
    --text-color:#000;
    --bg-color:#fff;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del,
dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
* {outline: 0;}
a {text-decoration: none;color: #333;}
a:hover {text-decoration:none;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
ol, ul, nav {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';}
table {border-collapse: collapse;border-spacing: 0;}
h1 {font-family: 'Sofia', sans-serif; font-size:18px;font-weight: bold}
h2 {font-family: 'Sofia', sans-serif;font-size:17px;font-weight: bold}
small {font-family: 'Sofia', sans-serif;font-size:11px;}p {color:var(--text-color);}strong, b {font-weight:bold;}
body{
    font-family: 'Sofia', sans-serif;
    background-color: var(--bg-color);
    font-size:16px;
    line-height:24px;
    color:var(--text-color);
    overflow-x:hidden;
}
.container{
    position:relative;
    width:1440px;
    max-width:92vw;
    margin:0 auto;
    display:flex;
}
header{
    position: relative;
    color:#fff;
    background-color: #86324C;
    background-image: linear-gradient(0deg, #86324C 0%, #1C3979 50%);

    background-image: -moz-linear-gradient( 0deg, #86324C 0%, #1C3979 50%);
    background-image: -webkit-linear-gradient( 0deg, #86324C 0%, #1C3979 50%);
    background-image: -ms-linear-gradient( 0deg, #86324C 0%, #1C3979 50%);
    
} 
header .pattern{
    position:absolute;
    background-image: url("../img/pattern.png");
    top:0;
    left:0;
    right:0;
    bottom:0;
}
header a{
    color:#fff;
}
header #topbar{
    background-color: rgba(0,0,0,0.05);
}
header #topbar .container{
    justify-content: space-between;
}
header #topbar .container .slogan{
    font-weight: 300;
    line-height: 65px;
    font-size:18px;
    padding: 0 10px;
}
header #topbar .container .slogan strong{
    font-weight: 500;
}
header #topbar .container .contact{
    display:flex;
    gap:48px;
}
header #topbar .container .contact a{
    display:flex;
    align-self: center;
    gap:8px;
    transition: color .3s;
}
header #topbar .container .contact a:hover{
    color:rgba(255,255,255,0.8);
}
header #topbar .container .contact a i{
    align-self: center;
    font-size:26px;
}
header #topbar .container .contact a span{
    display:flex;
    flex-direction: column;
    align-items: start;
}
header #logo{
    padding:20px 0;
}
header #logo .container{
    justify-content: space-between;
    gap:2px;
}
header #logo img{
    max-width:70vw;
    height:auto;
}
header #logo i{
    width:60px;
    height: 60px;
    line-height: 60px;;
    text-align: center;
    background-color: rgba(255,255,255,0.05);
    font-size:26px;
    display:none;
}
header #menu{
    background-color: rgba(255,255,255,0.05);
}
header #menu .container{
    height:102px;
    gap:8px;
}
header #menu a{
    display:flex;
    align-self: center;
    align-items: center;
    padding:12px 34px;
    gap:8px;
    transition: color .3s;
}
header #menu a:hover{
    color:#8c70ff;
}
header #menu a.active{
    background-color: #8c70ff;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    transition: border-radius .3s;
}
header #menu a.active:hover{
    color:#fff;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
}
header #menu a i{
    align-self: center;
    font-size:26px;
}
header #menu a span{
    display:flex;
    flex-direction: column;
    align-items: start;
}
header #menu a span strong{
    font-size:22px;
    font-weight: 500;
}
header #slider{
    padding-top:10px;
}
header #slider .container{
    justify-content: space-between;
}
header #slider .slidertext{
    display:flex;
    gap:30px;
    flex-direction: column;
    justify-content: center;
}
header #slider .slidertext small{
    display:flex;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
}
header #slider .slidertext small i{
    font-size:30px;
    margin-right:6px;
}
header #slider .slidertext > strong{	
	position: relative;
  	display: inline-block;
  	color: transparent;
    padding:10px 0;
	font-size:65px;
    line-height:65px;
    font-weight: 700;
	background: linear-gradient(32deg,#F65B80 10%,#AC74C2 90%);
  	background-size: 100% 100%;
	background-clip: text;
  	--webkit-background-clip: text;
  	--webkit-text-fill-color: transparent;
}
header #slider .slidertext span{
    font-weight: 300;
    font-size: 30px;
    margin-bottom:16px;
}
header #slider .slidertext a{
    border-radius: 6px;
    background-image: -moz-linear-gradient( 32deg, #F65B80 0%, #AC74C2 100%);
    background-image: -webkit-linear-gradient( 32deg, #F65B80 0%, #AC74C2 100%);
    background-image: -ms-linear-gradient( 32deg, #F65B80 0%, #AC74C2 100%);
    width: 200px;
    line-height: 60px;
    text-align:center;
    font-size:15px;
    font-weight:700;
    color:rgba(255,255,255,0.9);
    transition: background .3s;
}
header #slider .slidertext a:hover{
    background-position:-200px;
}
header #slider .slidertext a:after{
    content: "\f6ac";
    font-family: 'icomoon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
}
header #logos{
    position:absolute;
    bottom:-60px;
    left:0;
    right:0;
}
header #logos .container{
    justify-content: center;
    gap:50px;
}
header #logos .container img{
    background-color:#fff;
    border-radius:50%;
    box-shadow: 0 -1px 25px 0 rgba(0,0,0,0.1);
    transition: transform .3s;
}
header #logos .container img:hover{
    transform: scale(1.1);
}
#packages{
    margin:90px 0;
}
#packages .container{
    flex-direction: column;
}
#packages h2{
    font-weight: 500;
    font-size:55px;
    line-height:96px;
    text-align: center;
}
#packages h2 strong{
    font-weight: 700;
    color:transparent;
    background: linear-gradient(32deg,#1C3979 10%,#AC74C2 90%);
    background-size: auto;
    background-clip: border-box;
    background-size: 100% 100%;
    background-clip: text;
    --webkit-background-clip: text;
    --webkit-text-fill-color: transparent;
}
#packages span{
    font-weight: 200;
    font-size:24px;
    line-height: 36px;
    text-align: center;
}
#packages .selectperson{
    display:flex;
    width:510px;
    height:98px;
    background:#0e0f25;
    margin:48px auto;
    align-items: center;
    border-bottom-left-radius: 40px;
    border-top-right-radius: 40px;
}
#packages .selectperson label{
    color:#a1a1a1;
    flex:1;
    text-align: center;
    font-size:25px;
    margin:10px;
    line-height: 78px;
    cursor:pointer;
}
#packages .selectperson label:nth-child(1){
    border-bottom-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
}
#packages .selectperson label:nth-child(2){
    border-top-right-radius: 40px;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
}
#packages .selectperson label.active{
    background-image: -moz-linear-gradient( 0deg, rgb(255,64,62) 0%, rgb(255,129,27) 100%);
    background-image: -webkit-linear-gradient( 0deg, rgb(255,64,62) 0%, rgb(255,129,27) 100%);
    background-image: -ms-linear-gradient( 0deg, rgb(255,64,62) 0%, rgb(255,129,27) 100%);
    color:#fff;
}
/*#packages .selectperson label:hover{
    background-image: -moz-linear-gradient( 0deg, #212121 0%, #272727 100%);
    background-image: -webkit-linear-gradient( 0deg, #212121 0%, #272727 100%);
    background-image: -ms-linear-gradient( 0deg, #212121 0%, #272727 100%);
}*/
#packages .packages{
    display:flex;
    gap:20px;
}
#packages .packages .package{
    flex:1;
    border-radius: 10px;
    box-shadow: 0px 15px 20px 0 rgba(0,0,0,0.05);
    overflow: hidden;
}
#packages .packages .package-head{
    display:flex;
    flex-direction: column;
    background-color:#2f59f8;
    color:#fff;
    text-align: center;
    padding:30px 20px;
    gap:15px;
    transition: background-color .3s;
}
#packages .packages .package-head strong{
    font-size:66px;
    line-height: 66px;
    font-weight: 400;
}
#packages .packages .package-head strong mark{
    background:none;
    font-size: 44px;
    color:#fff;
}
#packages .packages .package-head span{
    font-size:18px;
    line-height: 24px;
    font-weight: 400;
}
#packages .packages .package-body{
    display:flex;
    flex-direction: column;
    padding:20px 30px;
    gap:15px;
    transition: background-color .3s, color .3s;
}
#packages .packages .package-body strong{
    font-size:36px;
    line-height:48px;
    font-weight: 400;
    padding-bottom:20px;
    border-bottom:1px rgba(0,0,0,0.1) solid;
    transition: border .3s;
}
#packages .packages .package-body ul li{
    display:flex;
    line-height:50px;
    color:#6a6a6a;
    font-size:19px;
    align-items: center;
    transition: color .3s;
}
#packages .packages .package-body ul li i{
    display:block;
    color:#4c5bd7;
    width:30px;
    transition: color .3s;
}
#packages .packages .package-body a{
    width:200px;
    height:52px;
    line-height: 52px;
    color:#fff;
    text-align: center;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    background-color:#0e0f25;
    transition: color .3s, background-color .3s;
}
#packages .packages .package:hover .package-head{
    background-color:#0e0f25;
}
#packages .packages .package:hover .package-body{
    background-color: #2f59f8;
    color:#fff;
}
#packages .packages .package:hover .package-body strong{
    border-bottom:1px rgba(255,255,255,0.1) solid;
}
#packages .packages .package:hover .package-body ul li,
#packages .packages .package:hover .package-body ul li i{
    color:#fff;
}
#packages .packages .package:hover .package-body a{
    color:#0e0f25;
    background-color:#fff;
}
#channels .container{
    min-height:840px;
}
#channels .container{
    background-image: url("../img/channels.png");
    background-position: right center;
    background-repeat: no-repeat;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap:25px;
}
#channels .container > strong,
#boxes .container > strong,
#content .container .content > strong{
    font-size:15px;
    line-height:38px;
    font-weight:500;
    padding:0 35px;
    color:#3149e7;
    background:rgba(49,73,231,0.16);
    border-radius: 5px;
}
#channels .container h3{
    font-size:45px;
    line-height: 60px;
    font-weight:600;
    color:#131414;
    margin-bottom:25px;
}
#channels .container > span{
    font-size:30px;
    line-height:36px;
    color:#818282;
    margin-bottom:25px;
}
#channels .setup{
    display:flex;
    gap:24px;
    margin-bottom:25px;
}
#channels .setup i{
    width:70px;
    height:70px;
    line-height: 70px;
    text-align: center;
    font-size:35px;
    color:#3149e7;
    box-shadow: 10px -1px 62px 0 rgba(196,206,213,0.68);
}
#channels .setup div{
    display:flex;
    flex-direction: column;
    gap:16px;
}
#channels .setup div strong{
    color:#131414;
    font-size:25px;
    font-weight:500;
}
#channels .setup div span{
    color:#818282;
    font-size:19px;
}
#channels a{
    position: relative;
    line-height:67px;
    font-size:20px;
    font-weight:600;
    border-radius:5px;
    padding:0 44px 0 32px;
    color:#fff;
    background-color: #3149e7;
}
#channels a:after{
    content: "\f6ac";
    position:absolute;
    right:15px;
    top:0;
    bottom:0;
    line-height: 67px;
    font-size:14px;
    font-family: 'icomoon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    transition: right .3s;
}
#channels a:hover:after{
    right:10px;
}
#boxes{
    background-color: #fafafa;
    padding:40px 0;
}
#boxes .container{
    flex-direction: column;
    align-items: center;
    gap:40px;
}
#boxes h3{
    font-size:40px;
    line-height: 60px;
    font-weight:600;
    color:#131414;
    margin-bottom:25px;
}
#boxes .boxes{
    display:flex;
    flex-wrap: wrap;
    gap:30px;
    justify-content: center;
}
#boxes .boxes .box{
    background-color:#3149e7;
    color:#fff;
    display:flex;
    gap:44px;
    padding:0 35px;
    height:133px;
    width:320px;
    margin:0 20px;
    border-radius: 5px;
    align-items: center;
    font-size: 25px;
    line-height:32px;
    box-shadow: 10px -1px 36px 0 rgba(196,206,213,0.68);
}
#boxes .boxes .box i{
    font-size:50px;
}
#boxes .boxes .box:nth-child(2n){
    background-color: #fff;
    color:#131414;
}
#boxes .boxes .box:nth-child(2n) i{
    color:#3149e7;
}
#dealer .container{
    flex-direction: column;
    padding:70px 0;
    gap:20px;
}
#dealer .container .dealer-packages{
    display:flex;
    gap:22px;
    justify-content: space-between;
}
#dealer h3{
    font-size:55px;
    line-height:60px;
    font-weight: 500;
    text-align:center;
}
#dealer h3 strong{
    font-weight: 600;
}
#dealer .container > span{
    font-size:24px;
    line-height: 30px;
    font-weight: 300;
    text-align: center;
}
#dealer .package{
    border-radius:5px;
    box-shadow: 0px 15px 20px 0 rgba(0,0,0,0.05);
    display:flex;
    flex-direction: column;
    overflow: hidden;
    width:346px;
    background-image: linear-gradient( 32deg, #6622C9 0%, #3271F6 100%);
    background-size:100% 134px;
    background-repeat: no-repeat;
    transition: background-size 0.3s;
}
#dealer .package > strong{
    font-size:60px;
    font-weight: 500;
    line-height:114px;
    padding-bottom:20px;
    text-align:center;
    position:relative;
    color:#fff;
}
#dealer .package:nth-child(2){
    background-image: linear-gradient( 32deg, #6A90C4 0%, #A1BBEA 100%);
}
#dealer .package:nth-child(3){
    background-image: linear-gradient( 32deg, #9D57C7 0%, #F686E5 100%);
}
#dealer .package:nth-child(4){
    background-image: linear-gradient( 32deg, #FD5354 0%, #F8CC3C 100%);
}
#dealer .package:hover{
    background-size:100% 100%;
}
#dealer .package > strong:after{
    content:'';
    width:100%;
    height:168px;
    position: absolute;
    bottom:-84px;
    left:0;
    right:0;
    background-image: url("../img/pack1.png");
    background-repeat: no-repeat;
    background-position: center center;
}
#dealer .package:nth-child(2) > strong:after{
    background-image: url("../img/pack2.png");
}
#dealer .package:nth-child(3) > strong:after{
    background-image: url("../img/pack3.png");
}
#dealer .package:nth-child(4) > strong:after{
    background-image: url("../img/pack4.png");
}
#dealer .package > span{
    font-size:30px;
    font-weight: 600;
    line-height:48px;
    padding-top:44px;
    text-align:center;
    color:#1d1d1b;
}
#dealer .package > small{
    font-size:20px;
    font-weight: 400;
    line-height:24px;
    margin-bottom:30px;
    text-align:center;
    color:#1d1d1b;
}
#dealer .package > small strong{
    font-weight: 600;
}
#dealer .package ul li{
    line-height: 44px;
    padding:0 30px;
    color:#1d1d1b;
    font-size:18px;
}
#dealer .package ul li:nth-child(2n-1){
    background-color: rgba(0,0,0,0.04);
}
#dealer .package ul li:before{
    content: "\ef85";
    font-family: 'icomoon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size:18px;
    margin-right:10px;
}
#dealer .package a{
    font-size:14px;
    font-weight: 500;
    border-radius: 5px;
    width:200px;
    height:52px;
    line-height: 52px;
    text-align: center;
    color:#fff;
    margin:30px;
    background-image: linear-gradient( 32deg, #6622C9 0%, #3271F6 100%);   
    transition: color .3s;
}
#dealer .package:nth-child(2) a{
    background-image: linear-gradient( 32deg, #6A90C4 0%, #A1BBEA 100%);
}
#dealer .package:nth-child(3) a{
    background-image: linear-gradient( 32deg, #9D57C7 0%, #F686E5 100%);
}
#dealer .package:nth-child(4) a{
    background-image: linear-gradient( 32deg, #FD5354 0%, #F8CC3C 100%);
}
#dealer .package:hover a{
    background-image:linear-gradient(32deg, #fff 0%, #fff 100%);
    color:#000;
}
#content{
    padding:50px 0;
}
#content .container{
    min-height:640px;
}
#content .container{
    background-image: url("../img/content.png");
    background-position: left center;
    background-repeat: no-repeat;
    flex-direction: column;
    align-items: end;
    justify-content: center;
    gap:25px;
}
#content .container .content{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap:25px;
    max-width:50%;
}
.content h3{
    font-size:45px;
    line-height: 50px;;
    font-weight: 600;
    color:#131414;
}
.content span{
    font-size:21px;
    line-height: 26px;;
    font-weight: 200;
    color:#818282;
}
.content ul{
    display:flex;
    flex-wrap: wrap;
    gap:44px;
}
.content ul li{
    position: relative;
    font-size:20px;
    font-weight: 500;
    color:#002691;
    width:196px;
    line-height: 77px;
    background-color:#f5faff;
    text-align:center;
    cursor:pointer;
    transition: color .3s, background-color .3s;
}
.content ul li:hover{
    background-color:#ff007a;
    color:#fff;
}
.content ul li:after{
    content:'';
    position: absolute;
    border-top:5px #ff007a solid;
    border-left:5px #ff007a solid;
    border-bottom:5px transparent solid;
    border-right:5px transparent solid;
    bottom:-10px;
    left:0;
    width:0;
    height:0;
    opacity:0;
    transition: opacity .3s;
}
.content ul li:hover:after{
    opacity:1;
}
#sss{
    padding:50px 0;
}
#sss .container{
    flex-direction: column;
    gap:20px;
}
#sss h3{
    font-size:55px;
    line-height: 60px;;
    font-weight: 500;
    color:#000;
    text-align: center;
}
#sss .container > span{
    font-size:24px;
    line-height: 32px;;
    font-weight: 200;
    color:#000;
    text-align:center;
}
#sss ul{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    justify-content: space-between;
}
#sss ul li{
    width:48%;
    display:flex;
    flex-direction: column;
}
#sss ul li strong{
    position:relative;
    font-size:17px;
    color:#05253a;
    font-weight: 500;
    line-height:63px;
    padding:0 65px 0 30px;
    background:#f1f2f1;
    cursor:pointer;
}
#sss ul li strong:after{
    content:'';
    position: absolute;
    width:27px;
    height:3px;
    top:30px;
    right:40px;
    background-color:#0F2A3C;
    transition: color .3s;
}
#sss ul li strong:before{
    content:'';
    position: absolute;
    width:3px;
    height:3px;
    top:30px;
    right:52px;
    background-color:#0F2A3C;
    transition: color .3s, height .3s, top .3s;
}
#sss ul li strong:hover:before{
    height:27px;
    top:18px;
}
#sss ul li span{
    font-size:17px;
    line-height: 24px;
    color :#777777;
    overflow:hidden;
    padding:26px;
    display:none;
}
#sss ul li.active strong{
    background:#3149e7;
    color:#fff;
}
#sss ul li.active strong:before,
#sss ul li.active strong:after{
    background-color:#fff;
}
#sss ul li.active strong:before{
    height:27px;
    top:18px;
}
#broadcast{
    padding:50px 0;
    background-color:#fafafa;
}
#broadcast .container{
    flex-direction: column;
    overflow: hidden;
}
#broadcast .title{
    display:flex;
    justify-content: space-between;
}
#broadcast h3{
    position:relative;
    font-size:36px;
    line-height: 40px;
    padding-bottom:30px;
    font-weight: 600;
    color:#0b0757;
}
#broadcast h3:after{
    content:'';
    height:3px;
    width:80px;
    position: absolute;
    left:0;
    bottom:0;
    background-color:#0099ff;
}
#broadcast .navigation{
    display:flex;
    gap:20px;
}
#broadcast .navigation i{
    width:46px;
    height:46px;
    line-height: 46px;
    text-align: center;
    border-radius:50%;
    font-size:20px;
    color:#292a2b;
    background-color: #fff;
    cursor:pointer;
    transition: color .3s, background-color .3s;
}
#broadcast .navigation i:hover{
    color:#fff;
    background-color:#3149e7;
}
#broadcast .swiper-wrapper{
    display:flex;
    gap: 17px;
    margin:40px 0;
}
#broadcast .broadcast-slider .swiper-slide{
    width:270px;
    height:auto;
    background:#fff;
}
#broadcast .broadcast-slider img{
    cursor:pointer;
    opacity:0.2;
    transition: opacity .3s;
    max-width: 100%;
    height:auto;
}
#broadcast .broadcast-slider .swiper-slide:hover img{
    opacity:1;
}
#test{
    padding:50px 0 0;
    position: relative;;
    z-index:0;
}
#test:after{
    content:'';
    position: absolute;
    height:200px;
    width:100vw;
    left:0;
    top:270px;
    background-color:#3149e7;
    z-index:0;
}
#test .container{
    flex-direction: column;
    gap:20px;
    z-index: 1;
}
#test h3{
    font-size:55px;
    line-height: 60px;;
    font-weight: 500;
    color:#000;
    text-align: center;
}
#test .container > span{
    font-size:24px;
    line-height: 32px;;
    font-weight: 200;
    color:#000;
    text-align:center;
}
#test .container > span strong{
    font-weight:400;
}
.test{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.test img{
    margin-left:-100px;
}
.test span{
    font-size:35px;
    line-height: 42px;
    color:#fff;
    margin-right:40px;
}
.test span strong{
    font-weight: 500;
}
.test a{
    width:254px;
    font-size: 20px;
    font-weight: 600;
    line-height: 67px;
    color:#3149e7;
    background:#fff;
    border-radius: 5px;
    text-align: center;
    position: relative;
    box-sizing: border-box;
    border:2px transparent solid;
    transition: color .3s, background-color .3s, border .3s;
}
.test a:after{
    content: "\f6ac";
    font-family: 'icomoon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size:14px;
    position: absolute;
    right:15px;
    top:0;
}
.test a:hover{
    color:#fff;
    background-color:#3149e7;
    border:2px #fff solid;
}
#comment{
    padding:50px 0;
    background-color: #fafafa;
}
#comment .container{
    overflow:hidden;
}
#comment .title{
    width:300px;
    display:flex;
    flex-direction: column;
    gap:32px;
    z-index:1;
    background:#fafafa;
}
#comment .title span{
    font-size:18px;
    color:#8480ae;
}
#comment .title h3{
    font-size:36px;
    line-height: 48px;
    font-weight: 600;
    color:#0b0757;
}
#comment .swiper-pagination{
    display:flex;
    justify-content: center;
    gap:10px;
}
#comment .swiper-pagination-bullet{
    width:30px;
    height:10px;
    border-radius: 5px;
    background-color: #f4f4ff;
    transition: background-color .3s;
}
#comment .swiper-pagination-bullet.swiper-pagination-bullet-active{
    background-color: #0811fb;
}
#comment .comment-slider{
    flex:1;
    z-index:0;
}
#comment .comment-slider .swiper-wrapper{
    display:flex;
    padding-left: 104px;
}
#comment .comment-slider .swiper-wrapper .swiper-slide{
    width:310px;
    height:310px;
    background-color:#f4f4ff;
    border-radius: 5px;
    display:flex;
    position: relative;
    gap:24px;
    flex-direction: column;
    padding:20px 30px;
    box-sizing: border-box;
}
#comment .swiper-slide i{
    font-size:35px;
    color:#0811fb;
}
#comment .swiper-slide > span{
    font-size:18px;
    line-height: 32px;
    color:#8480ae;
}
#comment .swiper-slide .user{
    display: flex;
    gap:20px;
}
#comment .swiper-slide .user img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
#comment .swiper-slide .user .detail{
    display:flex;
    flex-direction: column;
}
#comment .swiper-slide .user .detail span{
    font-size:18px;
    color:#0b0757;
}
#comment .swiper-slide .user .detail small{
    font-size:12px;
    color:#8480ae;
}
footer{
    position: relative;
    background-image: url("../img/footer.png");
    background-position: center center;
    background-repeat: repeat;
    max-height:526px;
    padding:120px 0;
    margin-top:30px;
    color:#6a727f;
}
footer .container{
    gap:60px;
}
footer a.top{
    position:absolute;
    top:-35px;
    left:calc(100vw / 2 - 35px);
    width:70px;
    height:70px;
    border-radius: 50%;
    background-color: #3149e7;
    line-height: 70px;
    text-align: center;
    color:#fff;
    font-size:26px;
    transition: color .3s, background-color .3s;
}
footer a.top:hover{
    color: #3149e7;
    background-color: #fff;
}
footer .column{
    display:flex;
    flex-direction: column;
    gap:18px;
    flex:2;
}
footer .column:nth-child(1){
    flex:3;
}
footer .column:nth-child(2){
    flex:1;
}
footer span{
    font-size:18px;
    line-height: 32px;
}
footer .column > strong{
    font-size:20px;
    line-height: 32px;
    color:#fff;
    margin-bottom:18px;
}
footer li a{
    color:#6a727f;
    font-size:20px;
    line-height: 40px;
    border-bottom:1px transparent solid;
    transition: color .3s, border .3s;
}
footer li a:hover{
    color:#fff;
    border-bottom:1px #fff solid;
}
.social{
    display:flex;
    gap:8px;
}
.social a{
    width:50px;
    height:50px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    background-color:#1f2734;
    color:#6a727f;
    transition: color .3s, background-color .3s;
}
.social a:hover{
    color:#fff;
}
.social a:nth-child(1):hover{
    background-color:#1877F2;
}
.social a:nth-child(2):hover{
    background-color:#0099ff;
}
.social a:nth-child(3):hover{
    background-color:#E4405F;
}
.social a:nth-child(4):hover{
    background-color:#CD201F;
}
footer .contact{
    display:flex;
    flex-direction: column;
    gap:2px;
}
footer .contact a{
    color:#6a727f;
    font-size:20px;
    line-height: 40px;
    transition: color .3s;
    display:flex;
    align-items: center;
    gap:10px;
}
footer .contact a i{
    color:#0099ff;
    font-size:22px;
}
footer .contact a:hover{
    color:#fff;
}
footer input{
    font-size:16px;
    box-sizing: border-box;
    line-height: 60px;
    height:60px;
    border:none;
    background-color: #242d3c;
    color:#6a727f;
    padding:0 20px;
    border-radius: 5px;
}
#whatsapp{
    position:fixed;
    right:10px;
    bottom:10px;
}
#whatsapp a{
    position: relative;
    display:block;
    z-index:999;
}
#whatsapp a i{
    display:block;
    width:72px;
    height:72px;
    line-height: 72px;
    font-size:36px;
    text-align: center;
    color:#fff;
    background-color:#25D366;
    border-radius: 50%;
    opacity: 0.8;
}
#whatsapp a:hover i{
    opacity:1;
}
#whatsapp a .chat{
    position:absolute;
    width:260px;
    bottom:90px;
    right:-400px;
    background:#f9f9f9;
    box-shadow: 6px -1px 16px 0 rgba(196,206,213,0.68);
    border:1px rgba(0,0,0,0.2) solid;
    border-radius: 7px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: right .4s;
}
#whatsapp a .chat.active{
    right:0;
}
#whatsapp a .chat .title{
    background-color:#25D366;
    padding:10px;
    display:flex;
    gap:10px;
    border-bottom:5px #f9f9f9 solid;
}
#whatsapp a .chat .title img{
    width:40px;
    height:40px;
    border-radius: 50%;
    border:3px #116831 solid;
    -moz-box-sizing: border-box;
}
#whatsapp a .chat .title > div{
    display:flex;
    flex-direction: column;
}
#whatsapp a .chat .title > div strong{
    font-size:16px;
    line-height: 18px;
    color:#fff;
}
#whatsapp a .chat .title > div small{
    font-size:11px;
    line-height: 18px;
    color:#116831;
}
#whatsapp a .chat .messages{
    padding:10px;
    background-color: #f9f9f9;
    height:auto;
    max-height:180px;
    overflow-y: scroll;
    display:flex;
    flex-direction: column;
    align-items: end;
    gap:6px;
}
#whatsapp a .chat .messages span{
    background:#fff;
    padding:10px;
    font-size:15px;
    line-height: 20px;
    max-width:80%;
    border-radius: 5px;
    border-bottom-right-radius: 0;
}
#whatsapp a .chat .send{
    padding:5px;
    display: flex;
    justify-content: space-between;
    background:#fff;
    border-top:15px #f9f9f9 solid;
}
#whatsapp a .chat .send input{
    height:30px;
    line-height: 30px;
    border:none;
    border-radius: 15px;
    width:76%;
    background-color: #e9e9e9;
    padding:0 10px;
}
#whatsapp a .chat .send span{
    height:30px;
    line-height: 30px;
    width:30px;
    text-align: center;
    background-color:#116831;
    color:#fff;
    border-radius: 50%;
}
#whatsapp .yaziyor{
    position:absolute;
    height:20px;
    
    width:50px;
    right:10px;
    bottom:40px;
    display:flex;
    justify-content: end;
    align-items: center;
    gap:2px;
}
#whatsapp .yaziyor span{
    display:block;
    width:7px;
    height:7px;
    background:#c9c9c9;
    border-radius: 50%;
    animation: scrolldown-anim 1.5s infinite;
}
#whatsapp .yaziyor span:nth-child(2){
    animation-delay: 0.5s;
}
#whatsapp .yaziyor span:nth-child(3){
    animation-delay: 1s;
}
@keyframes scrolldown-anim {
    0% {
        margin-top:0px;
    }
    40% {
        margin-top:-12px;
    }
    80% {
        margin-top:0;
    }
    100% {
        margin-top:0;
    }
}
@media only screen and (max-width: 1360px) {
    header .menu li a{
        white-space: nowrap;
    }
    header #slider img{
        max-width:50%;
        height:auto;
    }
    #channels .container{
        background-size:50%;
    }
    #content .container{
        background-size: 35%;
        background-position: left top;
    }
    .content ul li{
        width:160px;
    }
    #sss ul li{
        width:100%;
    }
    .test span{
        font-size:24px;
        line-height: 36px;
        padding:0 10px;
    }
}
@media only screen and (max-width: 1240px) {
    header #logo i{
        display:block;
    }
    #menu{
        display:none;
    }
    header #menu{
        position:absolute;
        width: 280px;
        right:0;
        top:160px;
        z-index:99;
        background:rgba(0,0,0,0.8)
    }
    header #menu .container{
        flex-direction: column;
        height: auto;
        width:100%;
    }
    header #menu a{
        align-self: start;
        width:100%;
        box-sizing: border-box;
    }
    header #menu a.active{
        border-radius: 0;
    }
    header #menu a.active:hover{
        border-radius: 0;
    }
    .test img {
        width:35%;
        height:auto;
    }
}
@media only screen and (max-width: 1110px){
    header #slider .container{
        flex-direction: column;
        align-items: center;
    }
    header #slider img{
        max-width:80vw;
    }
    #packages .packages{
        flex-wrap: wrap;
    }
    #packages .packages .package{
        flex:auto;
        width:48%;
    }
    #channels .container{
        min-height:auto;
        margin:20px auto;
        background-size:35%;
        background-position: right top;
    }
    #boxes .boxes {
        gap:10px;
    }
    #boxes .boxes .box {
        margin:0;
        width:40%;
    }
    #dealer .container .dealer-packages{
        flex-wrap: wrap;
    }
    #dealer .package {
        width:48%;
    }
    #content{
        padding:0;
    }
    #content .container{
        background:none;
    }
    #content .container .content{
        max-width:100%;
    }
    .test a{
        font-size:14px;
    }
    #test:after {
        top:230px;
    }
    footer .container{
        flex-direction: column;
        gap:20px;
    }
    footer .column:nth-child(2),
    footer .column:nth-child(4){
        display:none;
    }
}
@media only screen and (max-width: 860px){
    header #topbar .container .contact a:last-child{
        display: none;
    }
    header #logos{
        bottom:-30px;
    }
    header #logos .container{
        gap:10px;
    }
    header #logos .container img{
        width:60px;
        height:60px;
    }
    #packages{
        margin:40px 0;
    }
    #packages h2 {
        line-height: 65px;
        margin-bottom:14px;
    }
    #packages span{
        font-size:20px;
        line-height: 24px;
    }
    #packages .selectperson{
        width:92vw;
    }
    #boxes .boxes {
        flex-direction: column;
        width:100%;
    }
    #boxes .boxes .box{
        width:100%;
        box-sizing: border-box;
    }
}
@media only screen and (max-width: 760px){
    #packages .packages{
        flex-direction: column;
    }
    #packages .packages .package{
        width:100%;
    }
    #channels .container{
        background:none;
    }
    #broadcast .swiper-wrapper{
        flex-wrap: wrap;
        gap:0;
        margin:14px 0;
    }
    #broadcast .broadcast-slider .swiper-slide{
        width:100%;
        text-align: center;
    }
    .test{
        flex-direction: column;
        background-color: #3149e7;
        padding:10px 0;
        gap:10px;
        margin-top:150px;
    }
    #test:after{
        display:none;
    }
    .test img {
        width:60%;
        margin-left:0;
        margin-top:-150px;
    }
    .test span{
        margin-right:0;
        text-align: center;
    }
}
@media only screen and (max-width: 700px){
    #dealer .container .dealer-packages{
        flex-direction: column;
    }
    #dealer .package{
        width:100%;
    }
    #comment .title {
        width:140px;
    }
    #comment .title h3 {
        font-size: 18px;
        line-height: 24px;
    }
    #comment .comment-slider .swiper-wrapper .swiper-slide{
        width:160px;
        gap:6px;
    }
    #comment .swiper-slide > span{
        font-size:14px;
        line-height: 20px;
    }
    #comment .swiper-slide .user{
        gap:6px;
    }
    #comment .swiper-slide .user img{
        width:32px;
        height:32px;
    }
    #comment .swiper-slide .user .detail span{
        font-size:12px;
        line-height: 20px;
    }
    #comment .swiper-slide .user .detail small{
        font-size:11px;
        line-height: 16px;  
    }
    #comment .comment-slider .swiper-wrapper{
        padding-left:60px;
    }
}
@media only screen and (max-width: 500px){
    header #topbar .container .slogan{
        display:none;
    }
    header #topbar .container .contact{
        width:100vw;
        justify-content: center;
    }
    header #slider .slidertext{
        gap:10px;
    }
    header #slider .slidertext small{
        font-size:16px;
        line-height: 20px;
    }
    header #slider .slidertext small i{
        font-size:20px;
    }
    header #slider .slidertext > strong{
        font-size:45px;
        line-height: 50px;
    }
    header #slider .slidertext span {
        font-size:20px;
    }
    #packages .selectperson label{
        font-size:18px;
    }
    #channels .container h3,
    .content h3,
    #sss h3,
    #test h3{
        font-size:35px;
        line-height: 45px;
        margin-bottom:0;
    }
    #channels .container > span,
    .content span,
    #sss .container > span,
    #test .container > span{
        font-size:18px;
        line-height: 24px;
        margin-bottom:0;
    }
    .content ul{
        gap:10px;
    }
    .content ul li {
        width:30%;
    }
    .test{
        margin-top:80px;
    }
    .test img {
        margin-top:-80px;
    }
}
@media only screen and (max-width: 380px){
    header #logos{
        position: relative;
        background: #fff;
        bottom: 0;
        padding: 10px;
    }
    header #logos .container{
        flex-wrap: wrap;
    }
    #packages h2{
        font-size:36px;
        line-height: 48px;
    }
    #packages span{
        font-size:16px;
        line-height: 20px;;
    }
    #packages .packages .package-body ul li{
        font-size:16px;
        line-height: 30px;
    }
    #channels .setup div {
        gap:4px;
    }
    #channels .setup div strong{
        font-size:18px;
    }
    #channels .setup div span {
        font-size:16px;
    }
    #boxes .boxes .box{
        font-size:20px;
        line-height: 28px;
        gap:14px;
    }
    #boxes .boxes .box i {
        font-size:36px;
    }
    #broadcast h3{
        font-size:20px;
    }
    footer{
        padding: 60px 0 120px;
    }
}
@media only screen and (max-width: 330px){
    #packages .selectperson{
        flex-direction: column;
        height:auto;
    }
    #packages .selectperson label{
        width:92%;
    }
    #packages .packages .package-head span{
        font-size:16px;
    }
    #packages .packages .package-body ul li{
        font-size:14px;
    }
    #packages .packages .package-body strong{
        font-size: 24px;
        line-height: 36px;
    }
    #dealer .package ul li{
        font-size:14px;
    }
    footer .column > strong{
        margin-bottom:4px;
    }
}