@font-face {

    font-family: "RaleWay-Medium";

    src: url("../font/Raleway-Medium.ttf");

}



@font-face {

    font-family: "RaleWay-Bold";

    src: url("../font/Raleway-Bold.ttf");

}



@font-face {

    font-family: "Sen-Num";

    src: url("../font/Sen-Regular.ttf");

}



body {

    font-family: "RaleWay-Medium";

}



a {

    color: rgba(0, 0, 0, 0.91);

    text-decoration: none;

    transition: 0.3s;

}



a:hover {

    color: #4B83FC;

    text-decoration: none;

}



.font-bold {

    font-family: "RaleWay-Bold";

}



.font-medium {

    font-family: "RaleWay-Medium";

}



.font-number {

    font-family: "Sen-Num";

}



.txt-blue {

    color: #4B83FC;

}



.txt-green {

    color: #2DFF38;

}



.txt-orange {

    color: #FFC153;

}



.txt-purple {

    color: #CD50FF;

}



.txt-white {

    color: #ffffff;

}



.bg-blue {

    background-color: #ffa74e;

}
.bg-blue-1 {
    background-color: #757575;

}
.bg-blue-2 {

    background-color: #514bfc;

}



.bg-purple {

    background-color: #ffff00;

}



.bg-orange {

    background-color: #bbbbbb;

}



.txt-description {

    color: #6B6B6B;

}





/* Navbar */



.header {

    background-image: url("../img/HeaderBG.png");

    background-position: center right;

    background-repeat: no-repeat;

    background-size: contain;

    height: 500px;

}



.txt-header {

    margin-top: 150px;

}



.nav-item {

    margin-left: 30px;

    margin-right: 30px;

}





/*Top Part*/



.top-part-container {

    padding-top: 18px;

    padding-bottom: 18px;

    border-bottom: 2px solid rgba(0, 0, 0, 0.11);

}





/*Buttons*/



.btn-orginal-border {

    border-radius: 10px;

    border: 2px solid #4b83fc;

    color: #4b83fc !important;

    padding-left: 25px;

    padding-right: 25px;

    transition: 0.3s;

}



.btn-orginal-border:hover {

    background-color: #4b83fc;

    color: white !important;

}



.btn-orginal {

    border-radius: 10px;

    border: 2px solid #4b83fc;

    color: white !important;

    background-color: #4b83fc;

    padding-left: 25px;

    padding-right: 25px;

    padding-top: 7px;

    padding-bottom: 7px;

    transition: 0.3s;

}



.btn-orginal:hover {

    background-color: white;

    color: #4b83fc !important;

}



.btn-orange {

    background-color: #FFB93A;

    border: 2px solid #FFB93A;

}



.btn-purple {

    background-color: #CE54FF;

    border: 2px solid #CE54FF;

}



.btn-orange:hover {

    background-color: white;

    color: #FFB93A !important;

}



.btn-purple:hover {

    background-color: white;

    color: #CE54FF !important;

}



/*Navbar*/

.content {

    padding: 16px;

}



.sticky {

    position: fixed;

    top: 0;

    width: 100%;

    background-color: white !important;

    z-index: 1;

}



.sticky + .content {

    padding-top: 130px;

}

/*Section One*/



.section-one {

    background: rgb(254, 254, 254);

    background: linear-gradient(180deg, rgba(254, 254, 254, 1) 0%, rgba(246, 254, 255, 1) 100%);

}





/*Section Two*/



.primary-step-container {

    background-color: #F8FAFF;

    padding: 31px;

    border-radius: 11px;

}



.step-container {

    padding: 31px;

}





/*Section Three*/



.section-three {

    background-color: #F9FAFF;

}



.service-card {

    background-color: white;

    border-radius: 15px;

    box-shadow: 0 0 24px rgba(0, 0, 0, 0.07);

    transition: 0.3s;

}



.service-card div:first-child {

    transform: scale(1, 1);

    transition: 0.3s;

    transition-timing-function: ease;

    ;

}



.service-card:hover div:first-child {

    transform: scale(1.2, 1.2);

}



.service-icon {

    background-color: #ff5b51;

    border-radius: 50%;

    height: 85px;

    width: 85px;

    margin: auto;

    margin-bottom: 20px;

    background-size: 40px;

}



.service-icon-catchup {

    background-color: #FFF4E0;

    background-image: url("../img/catchup.svg");

    background-position: center;

    background-repeat: no-repeat;

}



.service-icon-epg {

    background-color: #EAF0FE;

    background-image: url("../img/epg.svg");

    background-position: center;

    background-repeat: no-repeat;

    background-size: 48px;

}



.service-icon-channel {

    background-color: #ECFFED;

    background-image: url("../img/channel.svg");

    background-position: center;

    background-repeat: no-repeat;

}



.service-icon-vod {

    background-color: #E5FAF5;

    background-image: url("../img/vod.svg");

    background-position: center;

    background-repeat: no-repeat;

    background-size: 25px;

}



.service-icon-connection {

    background-color: #FAF5FC;

    background-image: url("../img/connection.svg");

    background-position: center;

    background-repeat: no-repeat;

}



.justify-content-evenly {

    justify-content: space-evenly !important;

}





/*Section four*/



.section-four {

    padding-top: 90px;

    background-image: url("../img/SectionFourBg.png");

    background-position: center left;

    background-size: 960px;

    padding-bottom: 90px;

    background-color: white;

    background-repeat: no-repeat;

}



.section-four-p {

    margin-top: 20px;

    line-height: 37px;

}





/* Section Five */



.section-five {

    background-color: #F9FAFF;

    background-image: url("../img/SectionFiveBg.png");

    background-size: 80%;

    background-position: center;

    background-repeat: no-repeat;

    min-height: 500px;

    background-attachment: fixed;

}



.section-five ul {

    border: none;

}



.section-five ul li:not(odd) {

    background-color: rgb(255, 255, 255);

    border: none;

    border-radius: 13px;

}



.section-five ul li:nth-child(odd) {

    background-color: rgb(250, 250, 250);

    border: none;

    border-radius: 13px;

}



.package-card {

    padding: 20px;

    background-color: white;

    border-radius: 15px;

    box-shadow: 0 0 24px rgba(0, 0, 0, 0.07);

    margin-bottom: 80px;

}



.package-btn {

    margin-bottom: -40px;

}



.package-price-container {

    border-radius: 15px;

    transform: scale(1);

    transition: 0.3s;

}



.package-price-container:hover {

    border-radius: 15px;

    transform: scale(1.1);

}



.package-price {

    border-radius: 15px;

    background-color: white;

    margin: auto;

    margin-top: -27px;

    width: 199px;

    margin-top: -45px;

    box-shadow: 0 0 20px #00000026;

}





/*Section six*/



.section-six {

    padding-top: 90px;

    padding-bottom: 90px;

    background-color: white;

}



.section-six-p {

    margin-top: 20px;

    line-height: 37px;

}





/*Footer*/



.footer {

    background-color: #263238;

    color: white;

    padding-top: 30px;

    padding-bottom: 30px;

}



.footer-top-border {

    padding-top: 20px;

    border-top: 2px solid #ffffffa6;

}

/*Responsive*/

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

    .header {

        background-image: url("../img/HeaderBgMobile.png");

    }

    .navbar-nav{

        background-color: #00000005;

        border-radius: 10px;

    }

    .section-four {

        background-image: url("../img/SectionFourBgMobile.png");

    }

    .service-card {

        margin-bottom:10px;

    }

}