@font-face{
    font-family: font1;
    src: url(fonts/Gilroy-Light.otf)
}
@font-face{
    font-family: font2;
    src: url(fonts/Gilroy-Black.ttf)
}
@font-face{
    font-family: font3;
    src: url(fonts/Gilroy-Bold.ttf)
}
@font-face{
    font-family: font4;
    src: url(fonts/RadomirTinkov.otf)
}
body{
    font-family: font1;
}
.logo{
    position: relative;
    height: 54px;
}
.logo img{
    position: absolute;
    top: 0;
    left:0;
    max-width: 100%;
    max-height: 100%;
}
.header{
    padding: 13px 0px;
    border-bottom: 1px solid #dddddd7a;
    position: relative;
    z-index: 999;
}
.butn-style{
    background:#008ef0;
    color: #fff;
    padding: 10px 17px;
    border-radius: 25px;
    text-decoration: none;
    font-family: font3;
    margin-top: 13px;
    display: inline-block;
}
.butn-style:hover{
    color: #fff;
    text-decoration: none;
}
.key-sheet{
	background: none !important;
    color: #000000c2 !important;
    padding: 0px !important;
    border-radius: 3px !important;
    text-decoration: none !important;
    font-family: 'font3' !important;
    margin-top: 0px !important;
    display: block !important;
    text-align: left !important;
    font-size: 19px !important;
    margin: 0px !important;
    font-weight: 400 !important;
	font-size:17px !important;
}
#nbn-availabe h4{color: #0a63d7 !important;
    font-size: 15px !important;
    margin-top: 20px !important;
    font-weight: 600 !important;}
.banner-section{
    position: relative;
    padding: 5rem 0px;
}
.banner-section::before{
    content: "";
    position: absolute;
    top: 0;
    left: -49px;
    background: url(images/beforepic.png) no-repeat;
    width: 175px;
    height: 100%;
    background-size: contain;
}
.banner-section::after{
    content: "";
    position: absolute;
    top: -87px;
    right: 0;
    background: url(images/Top-right3@3x.png) no-repeat;
    width: 400px;
    height: 100%;
    background-size: contain;
}
.banner-section .right .top-img-two{
    width:100%;
}
.banner-section .right{
    position: relative;
    z-index: 1;
}
.banner-section .right::before{
    position: absolute;
    top: -165px;
    left: 7rem;
    background: url(images/3lines.png) no-repeat;
    content: "";
    width: 200px;
    height: 100%;
    background-size: contain;
    z-index: -1;
}
.top-img{width: 230px;
    float: right;
    margin-right: 12%;}
.banner-section{padding-top:80px;}
/* .banner-section .right::after {
    position: absolute;
    top: -32px;
    right: 3rem;
    background: url(images/nbn_logo.png) no-repeat;
    content: "";
    width: 240px;
    max-height: 100%;
    background-size: contain;
    z-index: -1;
    height: 120px;
}*/
.banner-section .right .overlayer{
    position: absolute;
}
.banner-section .left h2{
    font-size: 22px;
    font-family: 'font4';
}
.banner-section .left h1{
    font-size: 26px;
    line-height: 32px;
    font-family: 'font3';
    margin-top: 15px;
}
.banner-section span{
    font-size: 22px;
    font-family: 'font4';
    display: block;
}
.banner-section .special{
    background: #0a63d7;
    color: #fff;
    margin: 10px 0px;
    padding: 5px 30px;
    border-radius: 5px;
    display: inline-block;
    font-family: 'font3';
    font-size: 34px;
    position: relative;
    overflow: hidden;
    z-index: 6;
}
.banner-section .special::before {
    position: absolute;
    top: 0;
    left: 45%;
    background: #008ef0;
    width: 120px;
    height: 100%;
    transform: skewX(-34deg);
    content: "";
    z-index: -1;
}
.rating{
    width: 120px;
    display: block;
}
.banner-section .right .overlayer {
    position: absolute;
    top: 42px;
    color: #fff;
    width: 69%;
    left: 14%;
}
.banner-section .right .overlayer h2{
    font-size: 24px;
    font-family: 'font3';
}
.banner-section .right .overlayer p{
    font-size: 20px;
    margin-bottom: 0px;
}
.banner-section .line{
    font-size: 20px;
    /* text-decoration: underline; */
    border-bottom: 1px solid #fff;
    display: inline-block;
    padding: 0px 30px;
}
.container{
    max-width: 1088px;
}
.avail{
    padding-top: 1.5rem;
    padding-bottom: 30px;
    color: #fff;
    text-align: center;
}
.avail .inner{
   /* background: #0a63d7; */
    border-radius: 10px;
    padding: 20px 15px;
    background: url(images/bg67.png);
    background-size: cover;
    background-position: bottom;
}
.avail  h2{
    text-align: center;
    font-family: 'font3';
    font-size: 25px;
    position: relative;
}
.avail .left p{
    text-align: center;
    padding: 22px 24px;
    position: relative;
}
.avail .right p{
    text-align: center;
    padding: 0px 20px;
    margin-bottom: 0px;position: relative;
}
.avail .left input{
    width: 75%;
    height: 50px;
    border: none;
    border-radius: 5px;
    padding-left: 39px;
    position: relative;
}
.new-sub {
    background: #fff;
    padding: 12px 12px 12px 12px;
    border-radius: 06px;
    border: 1px solid #fff;
    color: #107bc6;
    font-weight: 700;
}
.avail .left input:hover,.avail .left input:focus{
    outline: none;
    box-shadow: none;
    border:none;
}
.avail form i{
    position: absolute;
    left: 16px;
    top: 6px;
    content: "";
    color: #555;
    font-size: 34px;
    z-index: 1;
}
.avail form input::-webkit-input-placeholder{
    color: #bbb;
}
.avail .right span{
    text-align: center;
    font-family: 'font3';
    font-size: 21px;position: relative;
}
.stars{
    list-style: none;
    padding-left: 0px;
    margin-top: 5px;
    margin-bottom: 10px;position: relative;
}
.stars li{
    list-style: none;
    display: inline-block;
}
.stars i{
    font-size: 20px;
}
.avail .left{
    position: relative;
}
.avail .left::before{
    position: absolute;
    top: 0;
    left: 33%;
   /* background: #008ef0;*/
    width: 185px;
    height: 100%;
    transform: skewX(-22deg);
    content: "";
    z-index: 0;
}
.avail .right{
    position: relative;
}
.avail .right .inner {
    /* background: #008ef0; */
    background: url(images/bg68.png);
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
}
.avail .right::before{
    position: absolute;
    top: 0;
    left: 33%;
    /* background: #0a63d7; */
    width: 185px;
    height: 99%;
    transform: skewX(-22deg);
    content: "";
    z-index: 0;108
}
.price{
    background: #ebecee;
    padding: 3rem 0px;
}
.price .inner{
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 14px 28px rgb(0 0 0 / 12%), 0 10px 10px rgb(0 0 0 / 10%);
    padding-bottom: 1px;
}
.price .head ul{
    margin-bottom: 10px;
    border: 2px solid #0a63d7;
    /* border-top-left-radius: 5px; */
    /* border-top-right-radius: 5px; */
    color: #fff;
    border-radius: 5px;
}
.price .head ul .le{
    background: #0a63d7;
    color: #fff;
    float: left;

}
.price .head ul li{
    display: inline-block;
    color: #333;
    font-family: 'font3';
    padding: 06px 11px;
    font-size: 18px;
    width: 50%;
    text-align: center;
}
.right-con{

padding: 18px 0px 18px 0px !important;

}

.le sup{
    font-size: 15px;
}
.price .features{
    padding: 20px;
    margin-bottom: 0px;
    padding-bottom: 10px;
}
.price .features li{
    padding: 8px 0px;
    font-size: 18px;
}
.price .features li b{
    font-family: 'font3';
}
.price a{
    background: #008ef0;
    color: #fff;
    padding: 10px 17px;
    border-radius: 3px;
    text-decoration: none;
    font-family: 'font3';
    margin-top: 0px;
    display: block;
    text-align: center;
    font-size: 19px;
    margin: 0px 20px 20px 20px;
}
.guide{
    padding: 3rem 0px;text-align: center;
}
.price .features img{
    width: 26px;
    margin-right: 7px;
    vertical-align: inherit;
}
.guide h2{
    color: #333;
    font-family: 'font3';
    text-align: center;
}
.guide img{
    vertical-align: top;
    width: 60px;
    margin-bottom: 15px;
}
.guide li{
    display: inline-flex;
    width: 18%;
    margin: 32px 0px 0px 0px;

}
.guide h3{
    font-family: 'font3';
    font-size: 20px;
}
.guide p{
    font-size: 14px;
    padding: 0px 10px;
}
.guide .image{
    height: 100px;
    margin-bottom: 30px;
    position: relative;
}
.guide .image::before{
    position: absolute;
    content: "";
    width: 13px;
    height: 13px;
    border-radius: 100px;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(51, 51, 51);
    bottom: -7px;
    left: 50%;
    z-index: 1;
}
.guide li{
    position: relative;
}
.guide li::after{
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    background: rgb(51, 51, 51);
    top: 101px;
    left: 52%;
}
.guide li:last-child:after{
    display: none;
}
.plans5 .subscribe{width: 80% !important;text-align: center !important;display: block !important;margin-left: 0px !important;position:relative !important;margin-top:20px !important;}
.buton1 a{
    background: rgb(0, 142, 240);
    color: rgb(255, 255, 255);
    padding: 10px 50px;
    border-radius: 3px;
    text-decoration: none;
    font-family: font3;
    display: inline-block;
    text-align: center;
    font-size: 19px;
    margin: 0px 20px 20px;
}
.speed_opt{
    background: #1268d9;
    padding: 3rem 0px;
    color: #fff;
}
.speed_opt .icon{
    text-align: right;
}
.speed_opt img {
    width: 75px;
}
.speed_opt h4{
    text-transform: uppercase;
    font-family: 'font3';
    font-size: 20px;
    border-bottom: 1px solid #fff;
    padding-bottom: 3px;
    display: inline-block;
    padding: 0px 30px 4px 0px;
}
.speed_opt p{
    font-size: 14px;
}
.service{
    background: #ebecee;
    padding: 3rem 0px;
}
.service h2{
    color: #333;
    font-family: 'font3';
    text-align: center;
}
.service .col-md-3{
    text-align: center;
    margin: 30px 0px 0px 0px;
}
.service .col-md-3 img{
    width: 85px;
    margin-bottom: 20px;
}
.service .col-md-3 h3{
    font-family: 'font3';
    font-size: 20px;
}
.service .col-md-3 p{
    font-size: 14px;
}
.footerlogo{
    height: unset;
}
.footer p{
    margin-top: 10px;
    /* font-family: 'font3'; */
    font-weight: 600;
}
.footer{
    padding: 15px 0px;
}
.social li{
    display: inline-block;
    margin-right: 6px;
}
.social img{
    width:42px;
}
.social{
    margin: 0px;
    text-align: center;
}
.guide .container{
    max-width: 90%;
}
.threedot .image::after{
    width:103%;
}
.subscribe{z-index:999 !important;}
@media screen and (min-width: 768px) and (max-width: 979px) {
	.price .head ul li{width:100% !important;}
	#plan123 h2{font-size:20px !important;}
	.banner-section .left h1{
		font-size:18px !important;
	}
	.banner-section .special
	{
		font-size:18px !important;
	}
	.banner-section span{font-size:20px;}
	.testimonial4 p{font-size:13px;}

	}
@media (min-width: 768px)
{
	.banner-section .left{padding:20px !important;}
}
/* RESPONSIVE */
@media(max-width: 767px){
    .banner-section::before,.banner-section .right::before{display: none;}
    .price .head ul li{font-size: 20px;}
    .price .features li{position: relative;padding-left: 30px;}
    .price .features img{position: absolute;  left: 0; top: 14px;}
    .logo{width: 50%;float: left;}
    .subscribe{width: 50%; padding: 0px;}
    .banner-section{padding: 2rem 10px;text-align: center;}
    .banner-section .special{padding: 5px 30px;font-size: 19px;}
    .rating{margin: auto;}
    .banner-section .butn-style{margin-bottom: 30px;}
    .banner-section .right .overlayer{top: 60px;width:72%;}
    .avail .left, .avail .right{overflow: hidden;  padding: 0px;border-radius: 10px;margin-bottom: 30px;}
    .price .inner{margin-bottom: 15px;}
    .guide h2{font-size: 25px;}
    .guide li{display:block;}
    .guide img{background: #fff;
        z-index: 1;
        position: relative;}
        .guide li::after{left: 49%;
            transform: none;width: 1px;
            height: 100%;bottom: 0px;top:0px;}
        .guide .text{background: #fff;
            position: relative;
            z-index: 1;}
        .guide li{width: 100%;}
        .guide .image::before{bottom: -30px;  left: 48%;}
        .guide li:last-child .image:after{display: block;}
        .speed_opt,.speed_opt .icon{text-align: center;}
        .footer p{text-align: center;}
        .footerlogo{height: 53px;
            text-align: center;
            width: 100% !important;
            margin: 20px auto;}
            .footerlogo img{right: 0px;
                margin: auto;}
                .logo img{left: 6px;}
        .subscribe{padding-right: 5px;}
        .banner-section::after{display: none;}
		.price .head ul li{padding:06px 11px !important;}
		.plansection2 h5{margin-top:20px !important;}
		.guide h3 {
    font-family: 'font3';
		font-size: 16px !important;}
	#plan123 h2{font-size:20px !important;}
}

@media screen and (max-width: 450px) {
	.price .head ul li{width:100%;}
    .banner-section::before,.banner-section .right::before{display: none;}
    .price .head ul li{font-size: 20px;}
    .price .features li{position: relative;padding-left: 30px;}
    .price .features img{position: absolute;  left: 0; top: 14px;}
    .logo{width: 50%;float: left;}
.subscribe {
    width: 50% !important;
    text-align: center !important;
    display: block !important;
    margin-left: 0px !important;
    position: relative !important;
    margin-top: 0px !important;
}    .banner-section{padding: 2rem 10px;text-align: center;}
    .banner-section .special{padding: 5px 30px;font-size: 19px;}
    .rating{margin: auto;}
    .banner-section .butn-style{margin-bottom: 30px;}
    .banner-section .right .overlayer{top: 19px;width:72%;}
    .banner-section .right .overlayer h2{font-size: 18px;margin-bottom: 0px;}
    .banner-section .right .overlayer p,.banner-section .line{font-size: 15px;}
    .avail .left, .avail .right{overflow: hidden;  padding: 0px;border-radius: 10px;margin-bottom: 30px;}
    .price .inner{margin-bottom: 15px;}
    .guide h2{font-size: 25px;}
    .guide li{display:block;}
    .guide img{background: #fff;
        z-index: 1;
        position: relative;}
        .guide .text{background: #fff;
            position: relative;
            z-index: 1;}
        .guide li{width: 100%;}
        .guide .image::before{bottom: -30px;left: 46%;}
        .guide li:last-child:after{display: block;}
        .speed_opt,.speed_opt .icon{text-align: center;}
        .footer p{text-align: center;}
        .footerlogo{height: 53px;
            text-align: center;
            width: 100% !important;
            margin: 20px auto;}
            .footerlogo img{right: 0px;
                margin: auto;}
                .logo img{left: 6px;}
        .banner-section .right{margin-top: 43px;}
		.mb-txt {
    font-size: 17px !important;
    line-height: 32px;
    font-family: 'font3';
    margin-top: 15px;
}
.avail .left p{padding:0px;}
.banner-section span {
    font-size: 18px;
    font-family: 'font4';
    display: block;
}
.avail h2 {
    text-align: center;
    font-family: 'font3';
    font-size: 21px;
    position: relative;
}
.avail h2 {
    text-align: center;
    font-family: 'font3';
    font-size: 21px;
    position: relative;
}
.avail .left input {
    width: 70%;
    height: 50px;
    border: none;
    border-radius: 5px;
    padding-left: 39px;
    position: relative;
}
.avail .right p{padding:0px;}
#plan123 h2{font-size:18px;}
.plans5 .subscribe{width:85% !important;margin-top:20px !important;}
.key-sheet{font-size:16px !important;}
.price .features li{font-size:16px !important;}
.plansection2 h3{font-size:18px !important;}
.plansection2 h5{padding-top:20px;}
.guide h3{font-size:15px !important;}
.service h2 {
    color: #333;
    font-family: 'font3';
    text-align: center;
    font-size: 20px;
}
.buton1 a {
    background: rgb(0, 142, 240);
    color: rgb(255, 255, 255);
    padding: 10px 30px;
    border-radius: 3px;
    text-decoration: none;
    font-family: font3;
    display: inline-block;
    text-align: center;
    font-size: 19px;
margin:0px !important;
}
}