body {
    background-color: #fff !important;
    margin: 0 auto;
    max-width: 1920px;
    overflow-x: hidden;
}

main {
    min-height: auto;
    /*width: 100%;*/
}
.v5-parent {
}
.sign_in a {
    color: #4040c7;
}

.grid-parent {
    display: grid;
    grid-template-columns: 1fr 1fr
}

.new_header {
    padding: 2rem;
}

@media all and (max-width:330px) {
    .white-logo img {
        width: 100%;
        height: auto;
    }
}

@media all and (max-width:750px) {
    .new_header .header-register-button {
        display: none;
    }
    .new_header {
        padding: 3rem;;
    }
}

.new_header .new_header-registration-links {
    float: right;
    margin-left: auto;
}

.new_header .header-register-button {
    width: 209px;
    height: 48px;
    padding: 11px 0 12px;
    border-radius: 14px;
    box-shadow: 0 5px 0 0 rgba(87, 80, 225, 0.15);
    border: solid 3px #5555d9;
    background-color: #fff;
}

.new_header .header-register-button .register-button-text {
    width: 209px;
    height: 25px;
    font-family: Nunito;
    font-size: 16px;
    font-weight: 900;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.29px;
    text-align: center;
    color: #5555d9;
}

.new_header a#sign_in {
    width: 59px;
    height: 24px;
    margin: 15px 31px 0 20px;
    font-size: 18px;
    font-weight: 800;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.17px;
    text-align: center;
    color: #5555d9;}

/* Section 1 */
.section1  {
    margin: 2rem;
    text-align: center;
}

.section1-title {
    width: 60%;
    margin: 1rem auto 2rem;
    height: auto;
    font-family: Nunito, sans-serifito;
    font-size: calc(30px + (54 - 30) * ((100vw - 300px) / (1600 - 300)));

    font-weight: 900;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.11;
    letter-spacing: 0.98px;
    color: #5555d9;
}


@media all and (max-width:550px) {
    .section1-title {
        width: 100%;
    }
}


.Join-today-to-get-ac {
    max-width: 617px;
    height: auto;
    margin: auto;
    font-family: Nunito;
    font-size: calc(18px + (26 - 18) * ((100vw - 300px) / (1600 - 300)));

    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.47px;
    color: #484848;
}

.register-button {
    width: 270px;
    height: 54px;
    margin: 20px auto;
    padding: 15px 19px 14px 20px;
    border-radius: 14px;
    border: none;
    box-shadow: 0 5px 0 0 #d56e2a;
    background-color: #fa8334;
}

.register-button .register-button-text {
    width: 231px;
    height: 25px;
    font-family: Nunito;
    font-size: 16px;
    font-weight: 900;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.29px;
    text-align: center;
    color: #fff;
}

/* Section 2 */
.section2 {
    /*padding: 0 5rem;*/
    padding-bottom: 50px;
}

.section2 .starting-now {
    height: 48px;
    margin: auto;
    font-family: Nunito;
    font-size: 16px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.29px;
    text-align: center;
    color: #484848;
    padding-left: 5px;
    padding-right: 5px;
}


.section2 .title {
    margin: auto;
    font-family: Nunito;
    font-size: calc(30px + (49 - 30) * ((100vw - 300px) / (1600 - 300)));

    font-weight: 900;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.12;
    letter-spacing: 0.89px;
    color: #fff;
}

@media all and (min-width: 770px) and (max-width: 1400px){
    /*Re adjusting the font size of title according to width*/
    /*source: https://css-tricks.com/snippets/css/fluid-typography/*/
    .section2 .title {
        font-size: calc(28px + (49 - 28) * ((100vw - 770px) / (1400 - 300)));
    }
}

.section2 .your-children-will {
    font-family: Nunito;
    font-size: calc(16px + (22 - 16) * ((100vw - 770px) / (1600 - 300)));
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.29px;
    color: #fff;
    margin: auto auto 20px;
}

.your-children-will .text-style-1, .your-children-will .text-style-2 {
    font-weight: 800;
}

.section2 .explore-now-button {
    width: 209px;
    height: 48px;
    margin: auto;
    padding: 11px 0 12px;
    border-radius: 14px;
    box-shadow: 0 5px 0 0 #d56e2a;
    background-color: #fa8334;
    border: none;

    font-size: 16px;
    font-weight: 900;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.29px;
    text-align: center;
    color: #fff;
}

@media all and (min-width: 770px) and (max-width: 1400px){
    /*Re adjusting the font size of title according to width*/
    /*source: https://css-tricks.com/snippets/css/fluid-typography/*/
    .section2 .your-children-will {
        font-size: calc(13px + (22 - 13) * ((100vw - 770px) / (1400 - 300)));
    }
}

.section2 .contents {
    margin-top: -4vh;
    padding-bottom: 8vh;
}

/*section 3*/

.section3 .contents {
    margin-top: 2vh;
    padding-bottom: 8vh;
    margin-left: 2rem;
    margin-right: 2rem;
}

.section3 .becoming-member {
    margin-top: 4vh;
    font-family: Nunito;
    font-size: calc(34px + (49 - 34) * ((100vw - 300px) / (1600 - 300)));
    font-weight: 900;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.12;
    letter-spacing: 0.89px;
    color: #5555d9;
}

.section3 .approved-by-teachers {
    /*width: 678px;*/
    height: 36px;
    font-family: Nunito;
    font-size: 20px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.29px;
    color: #484848;
}

.becoming-member-img img{
    max-width: 100%;
    height: auto;
}

@media all and (max-width:1200px) {
    .becoming-member-img {
        max-width: 604px;
        margin: auto;
    }
    .section3 .becoming-member, .section3 .approved-by-teachers {
        text-align: center;
    }
}

.section3 .becoming-member-benefits-list {
    list-style-type: none;
    padding-left: 0;
}

.section3 .becoming-member-benefits-list .list-item{
    display: table;
}

.section3 .becoming-member-benefits-list .custom-icon{
    /*display: table-cell;*/
    width: 78px;
    height: 74px;
    margin: 34px 29px 42px 0;
    object-fit: contain;
}

.section3 .becoming-member-benefits-list .custom-text {
    display: table-cell;
    width: 562px;
    height: 96px;
    /*margin: 22px 32px 32px 0;*/
    font-family: Nunito;
    font-size: 22px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.4px;
    color: #484848;
}

@media all and (max-width:750px) {
    .section3 .becoming-member-benefits-list .custom-icon {
        width: 50px;
        margin-left: 0;
        margin-top: 60px;
    }
    .section3 .becoming-member-benefits-list .custom-text {
        font-size: 20px;
    }
}

@media all and (max-width:500px) {
    .section3 .becoming-member-benefits-list .custom-icon {
        margin-bottom: 0;
        margin-top: 34px;
    }
}

/*section 4*/

.section4 {
    padding: 2rem;
}
.section4 .form-inline{
    margin: auto;
    max-width: 750px;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

.section4 .form-inline .email-input{
    width: 388px;
    height: 54px;
    padding: 15px 5px 14px 17px;
    margin: 18px 8px 8px 8px;
    border-radius: 14px;
    box-shadow: 0 5px 0 0 rgba(87, 80, 225, 0.15);
    border: solid 3px #5555d9;
    background-color: #fff;
    position: relative;
    z-index: 9991;
}

.section4 .form-inline .email-input::placeholder{
    width: 209px;
    height: 25px;
    font-size: 16px;
    font-weight: 900;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.29px;
    color: #5555d9;
}

.section4 .form-inline .email-input-before-span {
    font-family: Nunito;
    font-size: 20px;
    font-weight: 800;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.4px;
    color: #5555d9;
}

.section4 .form-inline .v5-register-button {
    width: 270px;
    padding: 15px 19px 14px 20px;
    margin: 18px 8px 8px 8px;
    border-radius: 14px;
    box-shadow: 0 5px 0 0 #d56e2a;
    background-color: #fa8334;
    border: none;
}
.section4 .register-button-text {
    font-family: Nunito;
    font-size: 16px;
    font-weight: 900;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.29px;
    text-align: center;
    color: #fff;
}

@media all and (max-width:1200px) {

    .section4 .form-inline {
        flex-direction: column;
        align-items: stretch;
    }

    .section4 .form-inline .email-input {
        max-width: 100%;
        margin: 18px auto 8px auto;
    }
    .section4 .form-inline .v5-register-button {
        margin: 18px auto 8px auto;
    }

    .section4 .form-inline .section1-form-input {
        margin: auto;
        max-width: 95%;
    }
}

@media all and (max-width:340px) {
    .section4 .form-inline .v5-register-button {
        width: auto;

    }
}



.starting-at-999 {
    margin: 18px auto 18px auto;
    font-size: 16px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.29px;
    text-align: center;
    color: #484848;
}

/*section5*/

.section5 {
    background-color: #5555d9;
    width: 100%;
}

/*remove backgroind image on small screen*/
@media all and (max-width:1200px) {
    .section5 {
        background-image: none !important;
    }
}
.section5-header {
    position: relative;
    margin-top: 150px;
}
.section5-top-curve {
    background: linear-gradient(to bottom, #7272e0 20%, #5555d9 91%);
    width: 100%;
    height: auto;
    padding-bottom: 100px;
}
.section5-family-photo {
    max-width: 600px;
    height: auto;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
}

.section5-bottom-curve {
    height: auto;
    width: 100%;
    background-color: #f4cd6f;
    background-image: linear-gradient(to bottom, #5555d9 91%, #5555d9 9%);
}

@media all and (max-width:550px) {
    .section5-top-curve, .section5-bottom-curve  {
        height: 65px;
    }
}


.section5 .section5-content{
    max-width: 680px;
    margin: 0 auto 6rem;
}

.section5 .section5-title {
    padding-top: 4rem;
    /*height: 67px;*/
    font-family: Nunito;
    font-size: calc(30px + (49 - 30) * ((100vw - 300px) / (1600 - 300)));
    font-weight: 900;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.12;
    letter-spacing: 0.89px;
    text-align: center;
    color: #fff;
}

.section5-description {
    /*height: 54px;*/
    margin: auto;
    font-family: Nunito;
    font-size: calc(15px + (18 - 15) * ((100vw - 300px) / (1600 - 300)));
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.33px;
    text-align: center;
    color: #fff;
}


.section5-icons {
    display: table;
    margin: 3rem auto auto;
}

.section5-icons .section5-app-store-icon, .section5-icons .section5-google-play-icon{
    display: table-cell;
}

.section5-icons .section5-app-store-icon img, .section5-icons .section5-google-play-icon img{
    margin: 10px;
}

@media all and (max-width:390px) {
    .section5-icons .section5-app-store-icon img, .section5-icons .section5-google-play-icon img{
        width: 85%;
    }
}

.section5-content .streaming-logos {
    max-width: 428px;
    height: 93px;
    margin-left: auto;
    margin-right:auto;
    padding-top:15px
}

.section5-content .streaming-logos img{
    width: 100%;
}

/*section6*/
.section6 {
    background-color: #f4cd6f;
}

.section6 .testimonial-contents {
    padding: 4rem 4rem 0rem;
}

.section6 .testimonial-contents .testimonial-contents-remark {
    margin: 0 auto 20px auto;
    max-width: 911px;
    font-family: Nunito;
    font-size: calc(30px + (48 - 30) * ((100vw - 300px) / (1600 - 300)));
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.46px;
    text-align: center;
    color: #5a5ada;
}

.section6 .testimonial-contents .testimonial-contents-author-parent {
    max-width: 300px;
    margin: auto;
}

.section6 .testimonial-contents .testimonial-contents-author-parent img {
    width:70px;
    border-radius: 50%;
    border: 4px solid #5a5ada;
}
.section6 .testimonial-contents .testimonial-contents-author-parent .img-holder{
    width:70px;
    height: 70px;
    border-radius:100%;
    border: 4px solid #5a5ada;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.section6 .testimonial-contents .testimonial-contents-author::before {
    content: "-";
}

.section6 .testimonial-contents .testimonial-contents-author {
    padding-top: 20px;
    font-family: Nunito;
    font-size: 19px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.15px;
    text-align: center;
    color: #5a5ada;
}
.section6 .custom-swiper-carousel {
    margin-bottom: 25px;

}

.section6 .swiper-button-next{
    right: 4rem;
}
.section6 .swiper-button-prev{
    left: 4rem;
}

.section6 .swiper-button-next::after{
    content: url('../../img/v5/icons/r-arrow_2022-07-29/r-arrow.png'); !important;
}

.section6 .swiper-button-prev::after {
    content: url('../../img/v5/icons/l-arrow_2022-07-29/l-arrow.png'); !important;
}

.section6 .swiper-button-pagination-parent {
    margin-top: 50px;
}

.section6 .swiper-pagination {
    bottom: 25px !important;
}

/*change position of left and right arrow of swiper */
@media all and (max-width:1200px) {
    .section6 .swiper-button-prev {
        position: relative !important;
        margin: auto !important;
        padding-right: 25rem !important;
        top: 31px !important;
        left: 0;
    }
    .section6 .swiper-button-next {
        position: relative !important;
        margin: auto !important;
        padding-left: 25rem !important;
        right: 0;
        bottom: 1rem;
    }
}
@media all and (max-width:400px) {
    .section6 .swiper-button-next{
        padding-left: 14rem !important;
    }
    .section6 .swiper-button-next::after{
        transform: scale(.5);
    }
    .section6 .swiper-button-prev{
        padding-right: 14rem !important;
    }

    .section6 .swiper-button-prev::after {
        transform: scale(.5);
    }
}

/*section 7*/
.section7 .faqs {
    max-width:   680px;
    margin: 6rem auto 4rem;
}


.section7 .faqs .faqs-title {
    min-height: 67px;
    background-color: white;
    font-family: Nunito;
    font-size: calc(30px + (49 - 30) * ((100vw - 300px) / (1600 - 300)));

    font-weight: 900;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.12;
    letter-spacing: 0.89px;
    text-align: center;
    color: #5555d9;
}
@media all and (max-width:1200px) {
    .section7 .faqs .faqs-title {
        height: auto;
    }
}
.section7 .faqs .panel-default{
    border: 0;
    cursor: pointer;
}


.section7 .faqs .panel-heading{
    background-color: white;
    display: table;
    width: 100%;
}

.section7 .faqs .faqs-question {
    display: table-cell;
    font-family: Nunito;
    font-size: calc(17px + (22 - 17) * ((100vw - 300px) / (1600 - 300)));

    font-weight: 800;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.4px;
    color: #5555d9;
}
.section7 .faqs .faqs-question-icon {
    display: table-cell;
    font-family: Nunito;
    font-size: 31px;
    font-weight: 800;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.76px;
    text-align: right;
    color: #5555d9;
    border: none;
}


.section7 .faqs .faqs-answer {
    font-family: Nunito;
    font-size: calc(13px + (16 - 13) * ((100vw - 300px) / (1600 - 300)));

    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.29px;
    color: #484848;
}


.section7 .faqs-footer {
    background-color: #f0f0ff;
    padding-top: 54px;
    padding-bottom: 54px;
    margin: auto;
}

.section7 .faqs-footer .faqs-footer-contents {
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.section7 .faqs-footer .join-muslim-kids-tv {
    font-family: Nunito;
    font-size: 22px;
    font-weight: 800;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.4px;
    color: #5555d9;
    margin-top: 10px;
    text-align: right;
    padding-bottom: 20px;
}

.section7 .faqs-footer .v5-register-button-white {
    width: 270px;
    height: 54px;
    padding: 15px 19px 14px 20px;
    border-radius: 14px;
    box-shadow: 0 5px 0 0 rgba(87, 80, 225, 0.15);
    border: solid 3px #5555d9;
    background-color: #fff;
    text-align: center;

    font-size: 16px;
    font-weight: 900;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.29px;
    color: #5555d9;
}

@media all and (max-width:1200px) {
    .section7 .faqs-footer .join-muslim-kids-tv {
        text-align: center;
    }

    .section7 .faqs-footer .faqs-footer-contents {
        text-align: center;
    }
}

/*footer css*/

.new_footer {
    background-color: #5555d9;
    padding: 41px;
}

.new_footer ul.footer-links-v5 {
    list-style: none;
    min-height: 24px;
    font-family: Nunito;
    font-size: 18px;
    font-weight: 800;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.33px;
    text-align: center;
    color: #fff;
}
.new_footer ul.footer-links-v5 li {
    display: inline;
    padding-left: 20px;
}
.new_footer ul.footer-links-v5 li a {
    color: white;
}

.new_footer .ps-share-buttons {
    font-size: 25px !important;
}

@media all and (max-width:1200px) {
    .new_footer .white-logo {
        margin-left: auto;
        margin-right: auto;
        width: 12em
    }
    .new_footer .ps-share-buttons {
        margin-left: auto;
        margin-right: auto;
        width: 13em
    }
}
@media all and (max-width:375px) {
    .new_footer .ps-share-buttons {
        font-size: 20px !important;
    }
}
.new_footer .kids-safe-logo {
    margin-left: auto;
    margin-right: auto;
    width: 8em;
    padding-top: 2rem;
}

.new_footer .all-rights-reserved {
    height: 16px;
    margin: auto ;
    font-family: Nunito;
    font-size: 12px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.22px;
    text-align: center;
    color: #fff;
    padding-top: 2rem;
}

/* Required for loading animation */
.ps-animated-loading {
    width: 300px;
    height: 100px;
    padding: 20px;
    z-index: 1000;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -70px 0 0 -170px;
    display: none;
}
.ps-animated-loading svg {
    max-width: 300px;
    max-height: 100px;
    position: fixed;
}

/* Required for correct displaying of social icons in footer */
.ps-share-buttons {
    display: flex;
    flex-direction: row;
    font-size: 28px;
    margin: 8px 0;



@include minWidth("md") {
    font-size: 40px;
}
}

.ps-share-buttons .ps-share-buttons-item {
    margin-left: auto;
    margin-right: auto;
    list-style: none;
    list-style-image: none;
&:not(:last-child) {
     margin-right: 0.25em;
 }
}
.ps-share-buttons .ps-share-buttons-item   a {
    width: 1.55em;
    height: 1.55em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4040c7;
    background-color: #fff;
    border-radius: 100%;
    box-shadow: 0 0.15em #d1d1ff;
    transition: box-shadow 0.1s ease-out, transform 0.1s ease-out;
    text-decoration: none;
}
.ps-share-buttons .ps-share-buttons-item   a:hover {
    transform: translateY(0.15em);
    box-shadow: 0 0 #d1d1ff;
}