html,body {
    overflow-x: hidden;
}

/** mobile view spacing **/
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{}
/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Portrait and Landscape */
@media only screen and (min-width: 600px) {}


/** desktop view spacing **/
@media screen
and (min-width: 992px)
{}

/** laptop **/
@media only screen
and (min-width: 1030px)
and (max-width: 1366px)
{}


section {
    min-height: 100vh; /* minus the height of the footer */
}
:root {
    --purple:#4B0AD1;
    --dark-grey: #303030;
    --blue: #3c5fff;
    --dark-grey-1:#1F1F1F;
}


.announcement {
    display: inline-block;
    height: 100px;
    text-align: center;
    width: 100%;
    position: fixed;
    background: purple;
    color: white;
    font-family: Arial, sans;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    font-size: 0.8em;
}

/** nav **/
.nav-logo{
    width: 318px;
    height: 90px;}
@media only screen
and (min-width: 1030px)
and (max-width: 1366px)
{
    .nav-logo{
        width: 198px;
        height: 74px;
    }}

.nav-link{
    text-align: center;
    color: #504a4b!important;
}

.nav-item{
    padding-left: 6px;
    padding-right: 6px;
}
.nav-link.active{
    font-weight: bold;
    color: red!important;

}
.navbar-nav, .dropdown-item{
    font-size: 21px;}
@media only screen
and (min-width: 1030px)
and (max-width: 1366px) {
    .navbar-nav, .dropdown-item{
        font-size: 15px;
    }  }

.navbar.dropdown-item:hover{
    background-color: transparent!important;
    color: lightyellow!important;
}
.nav-link:hover{
    color: grey!important;
}

/* landing */
.carousel-item.community{
    height: 100%;
    background-color: #1F1F1F;
}

.top-selling-subheader,.community-subheader{
    font-size: 16px;
    color: white;
}

.top-selling-header,.community-header{
    font-size:60px;
    color: white;
    font-weight: bold;
}

/** mobile view spacing **/
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{
    .top-selling-header,.community-header{
        text-align: center;
        font-size:30px;
        color: white;
        font-weight: bold;
    }
    .top-selling-subheader,.community-subheader{
        font-size: 16px;
        text-align: center;
        color: white;
    }

}
/* ----------- iPad 1, 2, Mini and Air ----------- */
/* Portrait and Landscape */
@media only screen and (min-width: 600px) {
    .top-selling-header,.community-header{
        font-size:30px;
        color: white;
        font-weight: bold;
    }
    .top-selling-subheader,.community-subheader{
        font-size: 16px;
        color: white;
    }

}
/** desktop view spacing **/
@media screen
and (min-width: 992px)
{
    .top-selling-header, .community-header{
        font-size:60px;
        color: white;
        font-weight: bold;
    }
    .top-selling-subheader, .community-subheader{
        font-size: 16px;
        color: white;
    }

}
/** laptop **/
@media only screen
and (min-width: 1030px)
and (max-width: 1366px)
{
    .top-selling-header,.community-header{
        font-size:60px;
        color: white;
        font-weight: bold;
    }
    .top-selling-subheader,.community-subheader{
        font-size: 16px;
        color: white;
    }

}

.content-section{
    padding-top: 121.4px;
}

.top-selling-product{
    height: 250px!important;
    background-color: #1F1F1F!important;
}

.card.purchase-step{
    background-color: #2C2D2D;
    border-radius:15px;
    height: 350px;
    width: 310px;
}

.purchase-step > .step-icon{
    height: 200px;
    width: 180px;
    margin-left: 21%;
}

.card.product{
    background-color: #1F1F1F;
    border-radius:10px;
    min-height: 600px;
    max-height: 600px;
}

.card.product:hover ,.card.contact-us:hover{
    transition: all 300ms ease;
    background-color: var(--purple);
    transform: scale(1.05);
    -webkit-animation-duration: 3s;
    animation-duration: 3s;}

.card.tutoriol{
    background-color: #1F1F1F;
    border-radius:10px;
    overflow:auto;
    width:100%;
    height: 250px;
}

.card.tutoriol:hover{
    transition: all 300ms ease;
    transform: scale(1.05);
    -webkit-animation-duration: 3s;
    animation-duration: 3s;}

.card.contact-us{
    background-color: #1F1F1F;
    border-radius:10px;
    height: 330px;
}

.landing-header-title{
    font-size: 50px;
    word-break: break-all;
    font-weight: bold;
}
.landing-subheader-title{
    font-size: 12px;
    padding-left: 6px;
}

.carousel-item-container{
    margin-left:auto;
    margin-right:auto;
    max-width: 1600px;
    background-color: #1F1F1F;
}


/** mobile view spacing **/
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{
    .content-section{
        padding-top: 115px;
    }

    .card.product{
        background-color: #1F1F1F;
        min-height: 300px;
        max-height: 700px;
    }

    .top-selling-product{
        height: 220px!important;
    }

    .landing-header-title{
        font-size: 40px;
        word-break: break-all;
        font-weight: bold;
    }
    .landing-subheader-title{
        font-size: 12px;
        padding-left: 6px;
    }

    img.landing-carousel-deskt{
        display: none!important;
        width: 1600px;
        height: 640px;
    }
    img.landing-carousel-mobile{
        width: 390px;
        height: 560px;
        display: block!important;
    }
    img.landing-carousel-ipad{
        display: none!important;
    }

}
/* ----------- iPad 1, 2, Mini and Air ----------- */
/* Portrait and Landscape */
@media only screen and (min-width: 600px) {

    .card.product{
        min-height: 550px;
        max-height: 700px;
    }

    .content-section{
        padding-top: 50px;
    }

    .landing-header-title{
        font-size: 80px;
        font-weight: bold;
    }
    .landing-subheader-title{
        font-size: 15px;
        padding-left: 8px;
    }
    img.landing-carousel-deskt{
        display: none!important;
    }
    img.landing-carousel-ipad{
        width: 990px;
        height: 640px;
        display: block!important;
    }
    img.landing-carousel-mobile{
        display: none!important;
    }

}
/** desktop view spacing **/
@media screen
and (min-width: 992px)
{
    .card.product{
        min-height: 500px;
        max-height: 700px;
    }

    .landing-header-title{
        font-size: 112px;
        font-weight: bold;
    }
    .landing-subheader-title{
        font-size: 20px;
    }
    img.landing-carousel-deskt{
        display: block!important;
    }
    img.landing-carousel-ipad{
        display: none!important;
    }
    img.landing-carousel-mobile{
        display: none!important;
    }


}
/** laptop **/
@media only screen
and (min-width: 1024px)
and (max-width: 1366px)
{
    .card.product{
        min-height: 570px;
        max-height: 600px;
    }

    .card.purchase-step{
        width: 300px;
    }

    .landing-header-title{
        font-size: 110px;
        font-weight: bold;
    }
    .landing-subheader-title{
        font-size: 16px;
    }
    img.landing-carousel-deskt{
        display: block!important;
    }
    img.landing-carousel-ipad{
        display: none!important;
    }
    img.landing-carousel-mobile{
        display: none!important;
    }

}

.service-container{
    padding-top: 100px;
    margin-left:auto;
    margin-right:auto;
    max-width: 1600px;
}

.social-media-circle{
    height: 60px;
    width: 60px;
    background-color: #303030;
    align-items: center;
    justify-content: center;
    display: flex;
    cursor: pointer;
    border-radius: 50%;
}

.product-icon-container{
    align-items: center;
    justify-content: center;
    display: flex;
}


.product-card-info{
    margin-top: 50px;
    padding-left: 60px;
    padding-right: 40px;
}

.product-card-info > .title{
    padding-top: 12px;
    font-size: 30px;
    padding-bottom: 12px;
    font-weight: bold;
}

.product-card-info > .sub-title{
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 20px;

}

.product-icon{
    height: 130px;
    width: 130px;
    background-color: #303030;
    align-items: center;
    justify-content: center;
    display: flex;
    cursor: pointer;
    border-radius: 50%;
}


/** mobile view spacing **/
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{

    .product-icon{
        height: 90px;
        width: 90px;
    }
    .product-card-info{
        margin-top:8px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .page-section-container{
        padding-top: 80px;
        margin-left:auto;
        margin-right:auto;
        max-width: 700px;
    }

    .product-card-info > .title{
        padding-top: 12px;
        font-size: 23px;
        padding-bottom: 8px;
        font-weight: bold;
    }

    .product-card-info > .sub-title{
        padding-top: 7px;
        padding-bottom: 15px;
        font-size: 15px;

    }
}

/* ----------- iPad 1, 2, Mini and Air ----------- */
/* Portrait and Landscape */
@media only screen and (min-width: 600px) {

    .page-section-container{
        padding-top: 100px;
        margin-left:auto;
        margin-right:auto;
        max-width: 700px;
    }

    .product-card-info{
        margin-top: 50px;
        padding-left: 60px;
        padding-right: 40px;
    }

    .product-card-info > .title{
        padding-top: 12px;
        font-size: 30px;
        padding-bottom: 12px;
        font-weight: bold;
    }

    .product-card-info > .sub-title{
        padding-top: 15px;
        padding-bottom: 15px;
        font-size: 16px;

    }
}
/** desktop view spacing **/
@media screen
and (min-width: 992px)
{
    .page-section-container{
        padding-top: 100px;
        margin-left:auto;
        margin-right:auto;
        max-width: 1300px;
    }

    .product-card-info{
        margin-top: 50px;
        padding-left: 60px;
        padding-right: 40px;
    }

    .product-card-info > .title{
        padding-top: 12px;
        font-size: 30px;
        padding-bottom: 12px;
        font-weight: bold;
    }

    .product-card-info > .sub-title{
        padding-top: 15px;
        padding-bottom: 15px;
        font-size: 16px;

    }
}
/** laptop **/
@media only screen
and (min-width: 1024px)
and (max-width: 1366px)
{

    .page-section-container{
        padding-top: 100px;
        margin-left:auto;
        margin-right:auto;
        max-width: 960px;
    }

    .product-card-info{
        margin-top: 50px;
        padding-left: 30px;
        padding-right: 10px;
    }

    .product-card-info > .title{
        padding-top: 12px;
        font-size: 30px;
        padding-bottom: 12px;
        font-weight: bold;
    }

    .product-card-info > .sub-title{
        padding-top: 15px;
        padding-bottom: 15px;
        font-size: 18px;

    }

    .product-icon{
        height: 90px;
        width: 90px;
    }
}


.social-media-circle:hover{
    background-color: var(--purple);
}

/** bg-colour **/
.bg-light-grey{
    background-color: #f8f9fc;
}

.account-menu-item:hover{
    background-color: var(--purple);
    color: white!important;
}

.landing{
    height: 700px;
    border:2px solid black;
}
.landing.logo{
    width:100%;
    height:400px;
}

.landing.know-more{
    height: 60px;
}

.modal.top-30{
    top:30%;
}


.search-container,.filter-course-status{
    border-radius: 23px;
    border: 3px solid grey;
    background-color: white;
}

.search-bar:focus{
    outline: none;
}


.profile-container{
    margin-left:auto;
    margin-right:auto;
    max-width: 1000px;
}

.user-profile > tbody > tr > td:first-child{
    font-weight: bold;
    width: 240px;
    min-width: 150px;
    color: #5f6368;
}

.user-profile > tbody > tr > td{
    padding: 18px;
    padding-left: 30px;
}

.user-profile > tbody > tr.clickable-row:hover{
    background-color: #FAFAFA;
    cursor: pointer;
}

.plan-block{
    height:auto;
}
.plan-block > .block-content{
    background-color: #1F1F1F;
    padding-top: 50px;
    padding-bottom: 50px;
}
.block-content.landing-box-height-size{
    min-height: 980px;
}
.block-content.item-box-height-size{
    min-height: 830px;
}
.block-item{
    color: white;
    text-align: center;
}
.block-item > .amount{
    font-size: 50px;
    font-weight: bold;
}

.block-item.top-box{
    min-height: 80px;
}

.block-item >.item-details > ul{
    list-style-type: none;
    padding-left: 0;
}

.block-item >.item-details > ul > li > .fa-check{
    color: #4B0AD1;
    font-size: 20px;
}
.block-item >.item-details > ul > li{
    font-weight: bold;
    padding: 10px;
    font-size: 16px;
}

.block-item >.item-details.plan-diff > ul > li{
    font-weight: bold;
    padding: 10px;
    font-size: 18px;
}

.block-item >.spotify-item-details > ul{
    list-style-type: none;
    padding-left: 0;
    text-align: start!important;
}

.block-item >.spotify-item-details > ul > li > .fa-check{
    color: #4B0AD1;
    font-size: 25px;
}
.block-item >.spotify-item-details > ul > li{
    font-weight: bold;
    padding: 10px;
    font-size: 16px;
}

.block-content > .button-container{
    text-align: center;
}

.block-content > .button-container > .button-buy-now{
    background-color: var(--purple);
    text-decoration: none;
    color: white;
    border-radius: 7px;
    font-weight: bold;
    font-size: 18px;
    border: none;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 55px;
    padding-right: 55px;
}

.button-buy-now:hover{
    background-color: var(--blue)!important;
    color: black!important;
}
.cart-header{
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 110px;
}

#voucher-apply-btn:hover{
    background-color: var(--blue);
}

/** mobile view spacing **/
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{
    .cart-item-header{
        display: none!important;
    }
}
.checkout-header{
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 70px;
}

.cart-detail-container, .checkout-detail-container{
    margin-left:auto;
    margin-right:auto;
    max-width: 1600px;
}
.cart-table>thead>tr>th{
    padding-top:20px;
    padding-bottom: 20px;
}

.cart-table thead th, .cart-table tbody td{
    border-bottom: 2px solid #303030;
}

.opacity-blur{
    pointer-events: none;
    background-color: rgba(255,255,255, 0.1);
    opacity: 0.5;
}

label.checkout-form{
    color: white;
}
input.checkout-form ,textarea.checkout-form{
    background-color: transparent;
    border-color: dimgrey;
    color: white;
}

input.checkout-form:focus, textarea.checkout-form:focus{
    background-color: transparent;
    border-color: var(--purple);
    color: white;
}
.dark-grey-border{
    border: 1px solid var(--dark-grey);
}

.bg-dark-grey{
    background-color: var(--dark-grey)!important;
}

bg-dark-grey-1{
    background-color: var(--dark-grey-1)!important;
}

.accordion-button.collapsed::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

.purple-border{
    border: 2px solid var(--purple);

}
.bg-purple, .btn.btn-purple{
    background-color: var(--purple);
}

/**scroll menu**/
div.scrollmenu {
    background-color: #333;
    overflow: auto;
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
}

div.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 60px;
    text-decoration: none;
}


.checkout-compute .item-list{
    border-bottom: 1px solid var(--dark-grey);
}
.content-container{
    margin-left:auto;
    margin-right:auto;
    max-width: 1300px;}
@media only screen
and (min-width: 1030px)
and (max-width: 1366px) {
    .content-container{
        padding-left: 7rem;
        padding-right: 7rem;
    }  }

.text--overflow{
    overflow:hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.word-break{
    word-wrap: break-word;
}

.btn-community:hover{
    background-color: var(--blue);
    color: black!important;
}

.btn-netflix-diff:hover{
    background-color: var(--blue) !important;
    color: black!important;
}


.footer-container{
    background-color: black;
    margin-top: 100px;
    min-height: 460px;
    padding-top: 80px;
    margin-left:auto;
    margin-right:auto;
    max-width: 1300px;
}


.footer-app-header{
    font-size: 40px;
    color: white;
    font-weight: bold;
}

.footer-information-link{
    list-style-type: none;
    padding: 0;
}

.footer-information-link > li{
    padding-top: 10px;
}

.footer-information-contactus{
    list-style-type: none;
    padding: 0;
}

.social-link:hover{
    color: var(--purple) !important;
}

.my-account:hover{
    text-decoration: none;
    background: var(--blue)!important;
}