@import url(../CSS/header.css);
@import url(../CSS/footer.css);

/* Login page styles */

#login-f {
    padding: 0 1.8rem;
}

#logo-login h6 {
    font-size: 1.5rem;
    padding-left: 1.2rem;
    font-weight: 800;
    margin: 0;
}

.login-section {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    background: url(../images/loginpage.png);
    background-size: cover;
    background-position: top;
}

.login-section label {
    font-size: .85rem;
}

.login-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25%;
    background: var(--light-white);
    padding: 0;
    border-radius: .2rem;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .7);
}

.login-box img {
    width: 110px;
    display: block;
    text-align: center;
    margin: 1.8rem auto 1.2rem auto;
    border-radius: 1rem;
}

.login-box h6 {
    margin: .5rem 0 1rem 0;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.for-pwd {
    display: block;
    margin: 1rem 0;
    font-size: .8rem;
    text-align: center;
}

.for-pwd span a {
    text-decoration: none;
    color: var(--primary-color);
    font-weight: bold;
}

#user-name,
#pwd {
    font-size: .8rem;
}

.btn-login {
    width: 100%;
    margin: 1.2rem auto 0 auto;
    display: block;
    border: none;
    border-radius: .2rem;
    padding: .3rem;
    background-color: #282778;
    color: var(--white);
    font-size: .95rem;
    font-weight: 900;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .7);
}

.btn-login:focus {
    outline: none;
}

#home-l {
    text-decoration: none;
}

.go-home-login {
    background: var(--light-dark);
    width: 100%;
    padding: .4rem;
    margin: 0;
    text-align: center;
    border-radius: 0 0 .2rem .2rem;
    font-size: .8rem;
    color: var(--white);
    letter-spacing: 1.5px;
}

.go-home-login i {
    padding-right: .4rem;
}

.sign-up {
    font-size: .8rem;
    margin: 1.2rem 0 0 0;
    display: block;
    text-align: center;
    background: #e1e1e1;
    font-weight: 800;
    padding: 1.2rem 1.8rem;
}

#reg-btn {
    display: block;
    text-decoration: none;
    padding: .4rem 0;
    margin: .9rem 0 0 0;
    background: var(--red);
    color: var(--white);
    font-weight: bold;
    letter-spacing: 1px;
    border-radius: .2rem;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .7);
}

.swal-overlay {
    background: rgba(1, 1, 1, .75);
}

/* Forgot Password Page Styles */

.forgot-password {
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(53, 0, 122, 0.7), rgba(9, 0, 51, 0.9)), url(../images/for_pwd.jpg);
    background-size: cover;
    background-position: center;
}

.forgot-password-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgb(238, 238, 238, .95);
    box-shadow: 0 7px 7px rgba(0, 0, 0, .6);
    border-radius: .2rem;
    width: 25%;
}

.forgot-password-box h2 {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    background: var(--secondary-color);
    color: var(--white);
    padding: 1rem;
}

#forgot-password-form {
    font-size: .85rem;
    padding: 2rem 1.8rem;
}

#forgot-password-form input {
    font-size: .8rem;
}

.for-login-btn {
    width: 100%;
    margin: .5rem 0 0 0;
    padding: .3rem 0;
    border: none;
    background-color: var(--secondary-color);
    color: var(--white);
    font-size: .85rem;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 1px;
    border-radius: .2rem;
    transition: .2s ease-in;
    box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
}

.for-login-btn:focus {
    outline: none;
}

::placeholder {
    font-size: .8rem;
}

/* Error Messages in Forgot Password */

.msg {
    width: 100%;
    padding: .5rem .6rem;
    margin: 0;
    background: #dc3545;
    color: var(--white);
    text-align: center;
    font-weight: 900;
    font-size: .8rem;
    letter-spacing: .5px;
}

.email-box {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--white);
    box-shadow: 0 5px 5px rgba(0, 0, 0, .4);
    border-radius: .2rem;
    width: 40%;
    padding: 1.5rem 1.25rem;
    font-size: 1rem;
    text-align: center;
}

.email-box img {
    width: 110px;
    display: block;
    margin: 0 auto .7rem auto;
}

.email-box p {
    margin: .8rem 0 0 0;
    font-size: .85rem;
}

.email-box span {
    font-size: .8rem;
}

/* New Password Page styles */

.new-password {
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(53, 0, 122, 0.7), rgba(9, 0, 51, 0.9)), url(../images/for_pwd.jpg);
    background-size: cover;
    background-position: center;
}

.new-password h2 {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    background: var(--secondary-color);
    color: var(--white);
    padding: 1rem;
}

.new-password-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgb(238, 238, 238, .95);
    box-shadow: 0 7px 7px rgba(0, 0, 0, .6);
    border-radius: .2rem;
    width: 25%;
}

#new-pass-form {
    padding: 1.8rem;
}

.new-pass-login-btn {
    width: 100%;
    margin: .5rem 0 0 0;
    padding: .3rem 0;
    border: none;
    background-color: var(--secondary-color);
    color: var(--white);
    font-size: .85rem;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 1px;
    border-radius: .2rem;
    transition: .2s ease-in;
    box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
}

/* Logged in profile */

.profile {
    position: relative;
    background-color: var(--white);
    padding: .3rem 1rem;
    margin: 0 0 0 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .4);
    transition: .2s ease;
}

.profile p {
    color: var(--black);
    font-size: .7rem;
    margin: 0 .3rem 0 .5rem;
    font-weight: 800;
}

#profile-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: var(--light-white);
    box-shadow: 0 3px 5px rgba(0, 0, 0, .4);
}

#profile-dropdown li {
    display: block;
    list-style: none;
    padding: .2rem 0;
    color: var(--light-dark);
    font-size: .68rem;
    font-weight: 600;
    margin: 0;
    padding: .45rem 1rem;
}

#profile-dropdown li:hover {
    background-color: var(--light-white-3);
}

#profile-dropdown li:hover::before {
    width: 0;
}

.login-msg {
    color: var(--light-dark);
    background-color: #fff;
    padding: .45rem .8rem;
    border-radius: .1rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-200%);
    font-size: .8rem;
    transition: .4s ease;
}

.login-msg-up {
    color: var(--light-dark);
    background-color: #fff;
    padding: .45rem .8rem;
    border-radius: .1rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    font-size: .8rem;
    transition: .4s ease;
}

.login-msg i {
    color: var(--green);
    padding-right: .4rem;
}

/* Profile page styles */

.profile-sec {
    padding: 2.5rem 4rem;
    width: 80%;
    margin: 0 auto;
}

.profile-header {
    width: 60%;
    margin: 0 auto;
    padding: 1.5rem 0;
    border-radius: .2rem;
    text-align: center;
}

.prof-img {
    width: 150px;
    background-color: var(--highlight);
    padding: 1.8rem;
    border-radius: 50%;
    margin: 0 auto;
}

.prof-img img {
    width: 100%;
}

.profile-header h4 {
    margin: .9rem 0 0 .3rem;
    font-size: 1.9rem;
    text-transform: uppercase;
    color: var(--primary-color);
    font-family: 'HomepageBaukasten-Bold', sans-serif;
}

.profile-header p {
    font-size: .85rem;
    margin: .3rem 0 0 0;
    color: #666;
}

.table-profile {
    font-size: .8rem;
    color: #444;
    padding: .3rem;
    margin: 0;
}

.table-profile tr td {
    padding: .4rem 0;
}

.mycourses {
    width: 100%;
    margin: 1rem 0;
}

.mycourse-box {
    box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
    transition: .2s linear;
}

.mycourse-box:hover {
    box-shadow: 0 3px 8px rgba(0, 0, 0, .7);
}

.mycourses h6 {
    margin: 1.3rem 0 1rem 0;
    font-weight: 800;
    letter-spacing: 2px;
}

.mycourses a {
    text-decoration: none !important;
    color: var(--black);
}

.mycourses img {
    width: 60%;
    margin: 0 auto;
    display:block;
    padding:1.25rem;
}

.mycourses span {
    font-size: .8rem;
    display: block;
    padding: .7rem;
    color: #444;
    background-color: var(--white);
    font-weight: 700;
}

/* Experience section */

.exp-wrap {
    margin: 2rem 0;
}

.exp-wrap h6 {
    margin: 1.3rem 0 1rem 0;
    font-weight: 800;
    letter-spacing: 2px;
}

.exp-sec {
    text-align: center;
    padding: 1.5rem 0;
}

.exp-sec h3 {
    font-size: 2rem;
    color: var(--primary-color);
}

.exp-sec p {
    font-size: .9rem;
}

.exp-btn {
    display: block;
    border: none;
    outline: none;
    margin: 1.2rem auto;
    padding: .3rem 1.2rem;
    border-radius: .3rem;
    box-shadow: 0 3px 4px rgba(0, 0, 0, .4);
    font-size: .9rem;
    letter-spacing: 1.2px;
    background-color: var(--primary-color);
    color: var(--white);
    font-weight: 900;
}

.exp-btn:active,
.exp-btn:focus {
    outline: none;
}

/* Experience Updation Page */

.exp-section {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    background: url(../images/exp.jpg);
    background-size: cover;
    background-position: center;
}

/* Registeration page */

.al-lg {
    padding: .4rem 0;
    margin: 0;
    font-size: .8rem;
}

#register-f {
    padding: 1rem 0;
}

#register-f input,
#register-f select,
#register-f label {
    font-size: .72rem;
    color: var(--light-dark);
}

.register-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35%;
    height: 90%;
    overflow: auto;
    background: var(--light-white);
    padding: 1.3rem 2rem;
    border-radius: .2rem;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .7);
}

.reg-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    width: 100%;
    margin: 0 auto;
}

.register-box img {
    width: 110px;
    text-align: center;
    margin: 0;
    border-radius: 1rem;
}

.register-box h6 {
    margin: .2rem 0 .3rem 0;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.instr {
    margin-top: .9rem;
    display: flex;
    justify-content: space-between;
}

.star {
    font-size: .65rem;
    padding-left: .1rem;
    color: var(--light-dark);
}

.btn-reg {
    width: 45%;
    margin: 1.2rem auto 0 auto;
    display: block;
    border: none;
    border-radius: .2rem;
    padding: .3rem;
    background-color: #282778;
    color: var(--white);
    font-size: .95rem;
    font-weight: 900;
}

.btn-reg:hover {
    color: var(--white);
}

#company-others {
    display: none;
}

#designation-others {
    display: none;
}

/* Password show/hide styles */

.pwd-view {
    position: absolute;
    top: .1rem;
    right: 1rem;
    font-size: .8rem;
    color: var(--light-dark);
    cursor: pointer;
}

.pwd-view i {
    position: absolute;
    right: 0;
}

.pwd-view-lgn {
    position: absolute;
    top: .2rem;
    right: .6rem;
    font-size: .8rem;
    color: var(--light-dark);
    cursor: pointer;
}

.pwd-view-lgn i {
    position: absolute;
    right: 0;
}

#pwd-r {
    position: relative;
}

#pwd-l {
    position: relative;
}

#conf-pwd-r {
    position: relative;
}

#pwd-check {
    display: none;
}

#conf-pwd-check {
    display: none;
}

#pwd-check-l {
    display: none;
}

#p-s {
    color: #888;
    cursor: pointer;
}

#pl-v {
    color: #888;
    cursor: pointer;
}

.eye-p {
    display: none;
    color: #888;
    cursor: pointer;
}

#cp-s {
    color: #888;
    cursor: pointer;
}

.eye-cp {
    display: none;
    color: #888;
    cursor: pointer;
}

.eye-lgn {
    display: none;
    color: #888;
    cursor: pointer;
}

/* username validation class */

.length-error {
    font-size: .7rem;
    color: #dc3545;
}

/* Password validation classes */

#password-r {
    position: relative;
}

.password-meter {
    display: none;
    width: 100%;
    border-radius: .3rem;
    padding: .7rem 1rem;
    z-index: 10;
    margin: .3rem 0 0 0;
}

.password-meter p {
    font-weight: 600;
    margin: 0;
    padding: .3rem 0;
    font-size: .7rem;
}

.password-meter i {
    padding-right: .35rem;
}

.conf-password-feedback {
    font-size: .8rem;
    color: #dc3545;
}

.capital-error {
    display: block;
    color: #dc3545;
    font-size: .8rem;
    margin-top: .3rem;
}

.username-error {
    display: block;
    color: #dc3545;
    font-size: .8rem;
    margin-top: .3rem;
}

.spl-err {
    display: block;
    font-size: .8rem;
    color: #dc3545;
    margin-top: .3rem
}

/* Add a green text color and a checkmark when the requirements are right */
.valid {
    color: teal;
}

.valid:before {
    position: relative;
    left: -10px;
    content: "✔";
}

/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
    color: #dc3545;
}

.invalid:before {
    position: relative;
    left: -10px;
    content: "✖";
}

#success {
    display: none;
    position: absolute;
    top: -14%;
    left: 0;
    width: 100%;
    padding: 1rem;
    border-radius: .3rem .3rem 0 0;
    color: var(--white);
    text-align: center;
    background: var(--teal);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: .88rem;
}

#success i {
    padding-right: .3rem;
}



/********** Home page *************/

/* quick contact links */

.quick-contact {
    position: fixed;
    right: 0;
    top: 15%;
    z-index: 9999999;
    transform: translateX(85%);
}

.quick-contact ul {
    padding: .6rem 0;
    list-style: none;
    transform: translateX(0);
}

.quick-contact ul a {
    color: var(--primary-color);
    text-decoration: none;
}

.quick-contact ul a li {
    padding: .3rem 1rem .3rem .5rem;
    background-color: var(--white);
    margin: .6rem 0;
    border-radius: .3rem 0 0 .3rem;
    transform: translateX(0);
    transition: .15s linear transform;
    display: flex;
    align-items: center;
    font-weight: 600;
}

.quick-contact ul a li:hover {
    transform: translateX(-80%);
}

.quick-contact ul a li i {
    font-size: .6rem;
}

.quick-contact ul a li span {
    padding-left: .65rem;
    font-size: .65rem;
}


/* Landing page styles */

.landing {
    width: 100%;
    height: 100vh;
    background-image: url("../images/Artboard 5.jpg");    
    background-size: cover;
    background-position: top;
}



.content {
    margin: 0 auto;
    width: 50%;
    height: 100vh;
    padding: 3.5rem 0 0 0;
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.title {
    margin: 0;
    padding: 0 0 0 3rem;
    font-size: 2.60rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
    color:var(--primary-color);
    text-shadow: 5px 5px 5px rgba(0, 0, 0, .6);

}

.sub-title {
    margin: 0;
    padding: .6rem 0 0 3rem;
    font-size: .88rem;
    letter-spacing: 1px;
    line-height: 1.8;
}

.start {
    padding: .45rem 1.3rem;
    margin: 1.6rem 0 0 3rem;
    border-radius: .3rem;
    border: none;
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.6);
    background: var(--red);
    color: var(--white);
    transition: .2s ease;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .3);
}

.start:focus {
    outline: none;
}

.start i{
    padding-right: .45rem;
}

.st {
    font-size: .65rem;
    transition: .3s ease;
}

.start:hover .st {
    transform: translateX(5px);
}

.intro-vid-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(8, 0, 24, 0.9);
    width: 100%;
    height: 100vh;
    z-index: 999999999999;
}

.intro-vid-modal video {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 960px;
}

.intro-vid-modal video:focus {
    outline: none;
}

.kp{
    margin-left:1.5rem;
    background-color:var(--white);
    color:#000;
    text-shadow: none;
}

.kp-vid-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(8, 0, 24, 0.9);
    width: 100%;
    height: 100vh;
    z-index: 999999999999;
}

.kp-vid-modal iframe {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.close-vid {
    position: absolute;
    top: 7%;
    left: 50%;
    transform: translate(-50%);
    letter-spacing: 1.5px;
    background: #fff;
    padding: .3rem .8rem;
    color: var(--black);
    font-weight: 800;
    font-size: .88rem;
    border-radius: .2rem;
    cursor: pointer;
}

.close-vid i {
    font-size: .92rem;
}

.close-vid-kp {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%);
    letter-spacing: 1.5px;
    background: #fff;
    padding: .3rem .8rem;
    color: var(--black);
    font-weight: 800;
    font-size: .88rem;
    border-radius: .2rem;
    cursor: pointer;
}

.close-vid-kp i {
    font-size: .92rem;
}


.next {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    color: var(--white);
    transform: translateX(-50%);
    cursor: pointer;
    text-align: center;
    
}

.next span {
    display: block;
    font-size: .7rem;
    letter-spacing: 2px;
    margin-bottom: .3rem;
    color: #000;
}

.down {
    animation: down 2.5s ease-in infinite;
    font-size: 1.2rem;
}

@keyframes down {
    0% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(.8rem);
    }

    50% {
        transform: translateY(0);
    }

    70% {
        transform: translateY(.8rem);
    }

    100% {
        transform: translateY(0);
    }

}

/* Search Window */

.search-block{
    width:85%;
    margin:2.5rem auto 1.2rem auto;
    display: block;
}

.search-box{
    width:85%;
    margin: 0 auto;
    display:block;
    font-size:.97rem;
    padding: .4rem 0;
    border: none;
    border-bottom: 2px solid var(--primary-color);
}

.search-box:focus,.search-box:focus-within{
    outline: none;
}
/*
.search-box::placeholder{
    font-size:.9rem;
    letter-spacing: normal;
}


*/
/* Top category Section */

.top-category {
    margin: 1.6rem auto 0 auto;
    padding: 2.5rem;
    width: 100%;
}

.cc-title {
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 2.4rem;
    text-align: center;
    letter-spacing: 2px;
}

.category-list {
    width: 95%;
    margin: 3rem auto;
}

.category-list a {
    text-decoration: none;
}

.tcard {
    width: 100%;
    border-radius: .2rem;
    transition: .3s ease;
    position: relative;
    padding: 1.2rem 1.5rem;
    transition: .2s all ease;
    border: 1px solid #ddd;
}

.tcard:hover {
    background-color: var(--light-white);
    color: var(--primary-color);
}

.tcard:hover .t-title {
    color: var(--primary-color);
}

.tcard img {
    width: 100px;
    padding: 0 0 .7rem 0;
    display: block;
    margin: 0 auto;
    border-radius: .3rem;
    text-align: left;
}

.tcard::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, .2);
}

.t-title {
    font-family: 'HomepageBaukasten-Bold', sans-serif;
    color: var(--light-dark);
    font-size: .9rem;
    padding: 0;
    margin: 0;
    text-align: center;
    transition: .3s ease-in-out;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
    width: 100%;
}

.crs-avl {
    display: flex;
    margin: .7rem auto 0 auto;
}

.crs-avl span {
    display: block;
    margin: 0 auto;
    font-size: .8rem;
    font-weight: 600;
    color: var(--white);
    background: var(--secondary-color);
    padding: .2rem .9rem;
    border-radius: .3rem;
    text-align: center;
    text-transform: uppercase;
}


/* Key Points */

.key-points {
    margin: 0 auto;
    padding: 3.5rem 2rem;
    text-align: center;
    background: linear-gradient(to right bottom, rgba(38, 3, 104, 0.79), rgba(38, 3, 104, 0.89)), url(../images/key.jpg);
    background-size: cover;
    background-attachment: fixed;
}

.key img {
    width: 4.7rem;
    text-align: center;
    display: block;
    margin: 1.25rem auto;
}

.key-head {
    font-size: 2.4rem;
    padding: 0 0 1.9rem 0;
    font-weight: 800;
    letter-spacing: 4px;
    color: var(--white);
}

.key-item {
    background-color: rgba(255, 255, 255, .88);
    padding: 1rem .8rem;
    border-radius: .1rem;
    overflow: hidden;
    max-height: 330px;
    height: 100%;
}

.key-item p {
    font-family: 'HomepageBaukasten-Bold', sans-serif;
    margin: 0 0 .7rem 0;
    font-size: 80%;
    color: var(--light-dark);
}

.key-item span {
    text-align: center;
    line-height: 1.85;
    font-size: 75%;
    display: block;
    color: #444;
}

/* Testimonial Section */

.testimonials {
    width: 100%;
    height: 100%;
    padding: 3.5rem 0 1rem 0;
}

.test-head {
    font-size: 2.4rem;
    text-align: center;
    font-weight: 800;
    letter-spacing: 4px;
    padding: 1.2rem 0 .8rem 0;
    margin: 0;
}

.test-sec {
    width: 100%;
    margin: 0 auto;
    color: var(--light-white);
    padding: 1.2rem;
}

.test-block {
    color: var(--white);
    width: 78%;
    margin: 0 auto;
    background: rgb(255, 255, 255, .94);
    border-radius: .3rem;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.5);
    position: relative;
}

.test-content {
    padding: 1.5rem;
    background-color: var(--highlight);
    border-radius: .3rem .3rem 0 0;
}

.test-block::before {
    content: "";
    background: url(../images/testimonials/testquote.svg);
    background-size: 100%;
    width: 150px;
    height: 150px;
    position: absolute;
    top: .3rem;
    right: .7rem;
    z-index: 1;
    fill: #444;
    opacity: .13;
}

.test-content p {
    font-size: .8rem;
    text-align: center;
    font-style: italic;
    color: var(--light-dark);
    margin-top: .9rem;
    line-height: 1.8;
    font-weight: 500;
    margin: 0;
}

.person {
    display: flex;
    align-items: center;
    padding: .55rem 1rem;
    background-color: var(--light-white);
    border-radius: 0 0 .3rem .3rem;
}

.test-img {
    width: 60px;
    height: 60px;
    text-align: left;
    display: block;
    margin: 0 .7rem 0 0;
}

.t-name {
    text-align: left;
    font-size: .85rem;
    margin: 0;
    font-weight: 600;
    color: #222;
}

.test-block span {
    text-align: left;
    display: block;
    font-size: .7rem;
    color: var(--secondary-color);
}

.test-img img {
    display: block;
    width: 50%;
    border-radius: 50%;
}

/* Clients */

.clients {
    margin: 0 auto;
    padding: 0;
    width: 80%;
}

.logos {
    margin: 1.2rem 0;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* End of main page */

/************ Other Page styles *************/

/* Course section */

.cat {
    margin: 1.5rem 0;
}

.rcat {
    margin: 3rem 0 2rem 0;
}

.cat-tag {
    background-color: rgb(255, 0, 102);
    color: var(--white);
    font-size: .85rem;
    padding: .3rem .8rem;
    margin-left: .4rem;
    border-radius: .3rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.course-content {
    margin: 3rem 0;
}

.course-content a {
    text-decoration: none !important;
}

.courses {
    padding: 2.5rem 1.2rem 0 1.2rem;
    margin: 1.2rem .7rem;
    height: 700px;
    overflow-x: auto;
}

.course-t {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    margin: 0 0 1.5rem 0;
}

.course {
    margin: 0;
    padding: 1.2rem;
    border-radius: .2rem;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
    transition: .3s linear;
    background-color: var(--light-white);
}

.course-heading {
    margin: 0;
}

.course-heading h4 {
    text-transform: uppercase;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 1rem 0 .2rem 0;
    text-align: center;
    width: 100%;
    color: #555;
}

#t-i {
    font-size: .75rem;
    display: inline;
}

.features {
    margin: 0;
    list-style: none;
    padding: 0 1rem 1rem 1rem;
    border-radius: .4rem;
}

.features i {
    padding-right: .2rem;
    color: #666;
}

.feat {
    font-size: .8rem;
    color: #222;
    padding-left: .5rem;
}

.enrol {
    width: 70%;
    margin: .5rem auto;
    padding: .6rem;
    border-radius: .2rem;
    letter-spacing: 2px;
    font-weight: 700;
    text-align: center;
    background-color: rgb(255, 0, 102);
    color: var(--white);
}

/* Course buy modal styles */

.course-buy {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999999999999;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: var(--light-white);
}

.buy-content {
    display: block;
    width: 100%;
    margin: 2rem auto;
    background: var(--light-white);
    padding: 1.5rem 3rem;
    border-radius: .3rem;
}

.cb-head {
    font-size: 1.7rem;
    color: var(--primary-color);
    font-weight: 900;
    letter-spacing: 2px;
}

.cb-desc {
    margin: .6rem 0;
    line-height: 1.8;
    font-size: .84rem;
    color: #777;
    width: 90%;
}

.cb-tag {
    color: var(--white);
    font-size: .85rem;
    background-color: var(--red);
    border-radius: .3rem;
    padding: .2rem .8rem;
    text-transform: uppercase;
    font-weight: 700;
    margin: .7rem 0;
    display: inline-block;
}

.cb-det {
    margin: .5rem 0;
    list-style: none;
    font-size: .9rem;
    display: flex;
    padding: 0;
}

.cb-det li {
    padding: 0 .5rem 0 0;
}

.cb-det i {
    color: var(--red);
    font-size: .75rem;
}

.cb-det li span {
    padding-left: .3rem;
    font-size: .8rem;
    color: #333;
}

.btn-modal {
    background-color: rgb(255, 0, 102);
    padding: .5rem 1.4rem;
    margin: .9rem 0;
    border-radius: .3rem;
    border: none;
    box-shadow: 1px 5px 5px rgba(0, 0, 0, 0.5);
    font-size: 1.1rem;
    color: var(--white);
    letter-spacing: 2px;
}

.m-head {
    font-size: 1.2rem;
    margin: 1rem 0 0 0;
    font-weight: 800;
    letter-spacing: 3px;
}

#insurance,
#legal,
#gst {
    display: none;
}

.ins-i,
.ins-l,
.ins-g,
.ins-v {
    opacity: 0;
    transition: .2s linear;
    color: var(--white);
}


.ins,
.legal,
.gst,
.inv {
    width: 100%;
    padding: .75rem 0 .75rem 1rem;
    background-color: var(--white);
    cursor: pointer;
    border-radius: .3rem;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: .2s linear;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
    font-size: .76rem;
}

.pr {
    display: block;
    padding: .4rem 0;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 1px;
}

.back {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    margin: 2rem 0;
    cursor: pointer;
}

.rbcat {
    margin: 1.3rem 0;
    font-size: .85rem;
}

.catb-tag {
    background-color: rgb(255, 0, 102);
    color: var(--white);
    font-size: .65rem;
    padding: .3rem .8rem;
    margin-left: .4rem;
    border-radius: .3rem;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Confirm buy course modal */

.confirm-cr {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 99999999999;
    text-align: center;
    background-color: var(--modal-dim);
}

.con-win {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--white);
    padding: 1.2rem 0 0 0;
    width: 50%;
    border-radius: .3rem;
}

.con-win p {
    color: #333;
    display: block;
    padding: 1.2rem 2rem .5rem 0;
    margin: 0;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 900;
    text-align: right;
}

.c-note {
    display: block;
    padding: .2rem 2.1rem 2rem 0;
    text-align: right;
}

.ans {
    text-align: right;
    width: 100%;
    background-color: #ddd;
    padding: .6rem .8rem .6rem 0;
    border-radius: 0 0 .3rem .3rem;
}

.ans span {
    display: inline-block;
    padding: .3rem .9rem;
    border-radius: .2rem;
    font-weight: 900;
    margin-right: 1.25rem;
    letter-spacing: 2px;
    font-size: .75rem;
    cursor: pointer;
}

.ans span:nth-child(1) {
    color: var(--white);
    background-color: #fa2b2b;
}

.ans span:nth-child(2) {
    color: var(--white);
    background-color: teal;
}

/* End of confirm buy course modal styles */


/* Single Course Main Page */

.hide {
    display: none;
    transition: .1s linear;
}

.course-main-box {
    position: relative;
    top: 0;
    z-index: 2;
    width: 100%;
    padding: 1.5rem 3rem;
    background: linear-gradient(to bottom left, rgba(59, 69, 252, .65), rgba(1, 10, 190, .65)), url(../images/courses/course-box.jpg);
    background-size: cover;
    background-position: bottom;
}

.course-small {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    padding: 1rem 2.8rem;
    display: none;
    /* background-image: linear-gradient(to right bottom, #6a11cb 0%, #2575fc 100%); */
    background: var(--blue);
}

.buy-wrap {
    /* position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%); */
    cursor: pointer;
    margin: 1.2rem 0;
    display: inline-block;
}

.buy {
    display: inline-block;
    margin: 0;
    padding: .5rem 1.1rem;
    font-size: .85rem;
    font-weight: bold;
    letter-spacing: 2px;
    color: var(--white);
    background-color: var(--red);
    border-radius: .3rem;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
    user-select: none;
}

.buy i {
    font-size: .8rem;
}

#buy-send {
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
}

.enrolled-text {
    display: inline-block;
    letter-spacing: 1px;
    font-weight: 800;
    background: var(--white);
    padding: 0;
    margin: .85rem 0;
    border-radius: .3rem;
}

.enrolled-text span {
    display: inline-block;
    padding: 0 .5rem;
    font-size: .7rem;
}

.enrolled-text i {
    padding: .6rem;
    border-right: 1px solid var(--teal);
    background-color: var(--teal);
    color: var(--white);
    border-radius: .3rem 0 0 .3rem;
    font-size: .78rem;
}

#enrolled-text-list {
    font-size: .8rem;
    background: var(--teal);
    padding: .3rem .6rem;
    color: var(--white);
    border-radius: .3rem;
}

#enrolled-text-list i {
    padding-right: .3rem;
}

.login-cont {
    display: inline-block;
    margin: 0 0 .9rem 0;
    padding: .5rem 1.1rem;
    font-size: .85rem;
    font-weight: bold;
    letter-spacing: 2px;
    color: var(--white);
    background-color: var(--red);
    border-radius: .3rem;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
}

.login-cont i {
    font-size: .75rem;
}

.price-n {
    display: block;
    color: var(--white);
    font-size: 2.2rem;
    padding: .7rem 0;
    letter-spacing: 1px;
}

.c-tag {
    color: var(--primary-color);
    font-size: .75rem;
    background-color: var(--white);
    border-radius: .3rem;
    padding: .2rem .8rem;
    text-transform: uppercase;
    font-weight: 700;
    margin: .7rem 0;
    letter-spacing: 1.5px;
    display: inline-block;
}

.c-head {
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--white);
    letter-spacing: 1.5px;
    width: 70%;
    margin: 0 0 .4rem 0;
    text-transform: uppercase;
}

.c-head-s {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--light-white-2);
    letter-spacing: 2px;
    margin: 0;
}

.c-desc {
    color: var(--light-white-2);
    font-size: .74rem;
    width: 60%;
    line-height: 1.8;
    margin: 0;
}

.created {
    margin: 0;
    padding: 0;
    font-size: .63rem;
    color: var(--light-white-2);
    list-style: none;
    position: absolute;
    bottom: .8rem;
    right: 1rem;
}

.created li {
    display: inline;
    padding-right: .4rem;
}

.created li i {
    padding-right: .3rem;
}

.det {
    padding: 0;
    margin: .65rem 0 0 0;
    list-style: none;
    display: inline-block;
}

.det li {
    display: inline;
    font-size: .7rem;
    padding: 0;
    margin: 0;
    color: var(--white);
}

.det li span {
    padding-right: .3rem;
    color: var(--black);
}

.det li i {
    padding-right: .3rem;
    font-size: .7rem;
    color: var(--light-white-2);
}

/* Modules Preview */

.modules-preview {
    position: absolute;
    top: 2.5rem;
    right: 3rem;
    width: 30%;
}

#mod-prev li {
    list-style: none;
    padding: .4rem .7rem;
    margin: 0 0 .8rem 0;
    font-size: .72rem;
    font-weight: 800;
    background: var(--white);
    box-shadow: 0 3px 4px rgba(0, 0, 0, .5);
    border-radius: .3rem;
    color: var(--light-dark);
    width: 100%;
    display: flex;
    align-items: center;
    letter-spacing: .5px;
}

#mod-prev li i {
    padding-right: .5rem;
    font-size: .85rem;
    color: var(--teal);
}

.mod-prev li {
    list-style: none;
    padding: .4rem 1rem .4rem .6rem;
    margin: 0 0 .8rem 0;
    font-size: .72rem;
    font-weight: 800;
    background: var(--highlight);
    box-shadow: 0 3px 4px rgba(0, 0, 0, .5);
    border-radius: .3rem;
    color: var(--light-dark);
    display: inline-flex;
    align-items: center;
    letter-spacing: .5px;
}

.mod-prev li i {
    padding-right: .5rem;
    font-size: .85rem;
    color: var(--teal);
}

/* launch course button */

#launch-crs {
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
    border: none;
}

#launch-crs:hover,
#launch-crs:focus {
    outline: none;
}

/* launch course button */

.course-box {
    padding: 2.5rem;
}

.course-nav {
    width: 100%;
    height: 100%;
    background: var(--light-white);
    box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
    position: sticky;
    top: 0;
    z-index: 99;
}

.course-nav ul {
    margin: 0 auto;
    padding: 0;
    width: 90%;
    display: block;
    transition: .2s ease;
}

.course-nav ul li {
    /* font-family: 'HomepageBaukasten-Bold',sans-serif; */
    display: inline-block;
    font-size: .78rem;
    font-weight: 900;
    margin: 0 2rem 0 0;
    cursor: pointer;
    letter-spacing: .5px;
}

.course-nav ul li span {
    display: block;
    padding: .4rem .2rem;
    color: var(--light-dark);
    text-transform: unset;
}

.course-nav ul li span i {
    padding-right: .2rem;
}

[data-tab-content] {
    display: none;
}

.active[data-tab-content] {
    display: block;
}

.tab.active span {
    color: var(--blue);
    border-bottom: 2px solid var(--blue);
    font-weight: bold;
}

.tab:hover span {
    color: var(--blue);
}

.career-path {
    padding: 2.8rem 4rem;
}

#career {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 500px;
}

.o-head {
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 1px;
}

.overview {
    padding: 2.8rem 4rem;
}

.overview-list {
    font-size: .8rem;
    line-height: 2;
    text-align: justify;
    padding: 0 1.1rem;
}

.overview-list li {
    padding: .3rem 0;
    list-style-image: url(../images/checkmark-outline.svg);
}

.inst-name {
    padding: .8rem .8rem .8rem 0;
    display: inline-block;
}

.inst-n {
    font-size: .8rem;
    font-weight: 800;
    color: var(--red);
}

.inst-name i {
    text-align: center;
    display: block;
    padding: .65rem;
    font-size: 3.2rem;
}

.syllabus-list {
    font-size: .8rem;
    line-height: 2;
    text-align: justify;
    list-style: none;
}

.syllabus-list li {
    padding: .2rem 0;
}

.side-f {
    border: 1px solid #bbb;
    border-radius: .3rem;
    padding: 1.35rem;
    height: 100%;
}

.modal-body {
    width: 100% !important;
    height: 100% !important;
}

#accordion {
    width: 100% !important;
    display: block !important;
    margin: 1.2rem 0 0 0;
}

.card-header {
    padding: 0;
    border-radius: 0 !important;
}

.card-header h5 button {
    color: var(--black);
    width: 100%;
    min-width: calc(94vw - 4rem);
    text-align: left;
    padding: .6rem 1rem;
}

.btn-link {
    font-size: .85rem;
    text-decoration: none !important;
}

.card-body {
    font-size: .8rem;
}

.certificate {
    padding: 2.5rem 4rem;
}

.certificate p {
    font-size: .8rem;
    margin: .8rem 0 0 0;
}

.certificate img {
    width: 50%;
    margin: 1.2rem 0;
}

.tip {
    display: block;
    font-size: .75rem;
}

.ccard {
    width: 100%;
    border-radius: .3rem;
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    transition: .2s linear;
    position: relative;
    cursor: pointer;
}

.ccard:hover {
    transform: scale(1.03);
}

.ccard img {
    width: 100%;
    padding: 0;
    margin: 0 auto;
    display: block;
    border-radius: .3rem .3rem 0 0;
}

.r-ccont {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    padding: 0;
    margin: 0;
}

.c-icon {
    text-align: center;
    display: block;
    font-size: 3rem;
    color: #999;
    margin: 1rem 0;
    padding: 1.8rem 0 0 0;
}


.c-title {
    color: var(--primary-color);
    font-size: .8rem;
    padding: .85rem;
    margin: 0;
    text-align: left;
    transition: .3s ease-in-out;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
    width: 100%;
    letter-spacing: 1px;
    background-color: rgba(255, 255, 255, .98);
}

.ca {
    text-decoration: none;
    color: var(--primary-color);
    display: block;
    background-color: var(--red);
    font-size: .7rem;
    font-weight: 800;
    padding: .9rem 0;
    text-transform: uppercase;
}

.ca span {
    display: block;
    font-size: .75rem;
    color: var(--white);
}

.ca span i {
    padding: .2rem 0 0 0;
}

/* Related courses section */

.rel {
    margin: 0;
    padding: 3.2rem 4rem;
}

.rel-t {
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: 2px;
    margin: 0 0 .8rem 0;
}

.rel p {
    font-size: .8rem;
}

#r-tag {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: .25rem .7rem;
    margin-bottom: .3rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: var(--red);
    color: var(--white);
    border-radius: 0 .3rem .3rem 0;
    font-size: .75rem;
}

.rel-crs {
    width: 75%;
    display: block;
    margin: 1.5rem auto;
}

.rel-crs-item {
    position: relative;
    display: flex;
    padding: 1.25rem;
    margin: 3rem 0;
    background: var(--light-white);
    background-size: cover;
    border-radius: .3rem;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
    transition: .2s ease-in-out;
}

.rel-crs-item img {
    width: 220px;
    height: 200px;
    border-radius: 0 50% 50% 0;
}

.crs-label {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: .3rem 0;
    text-align: center;
    background-color: var(--red);
    border-radius: .3rem;
    cursor: pointer;
}

.label-change {
    transform: scale(1.03);
    border: 1px solid #aaa;
    background: var(--highlight);
    transition: .2s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .5);

}

.rel-crs-content {
    display: flex;
    flex-direction: column;
    padding: 0 1.3rem;
    width: 100%;
}

.rel-crs-content h5 {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 1px;
    border-bottom: 1px solid #ccc;
    padding-bottom: .7rem;
}

.rel-crs-content span {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--teal);
}

.rel-crs-content ul {
    padding: .3rem 0 0 1.4rem;
}

.rel-crs-content ul li {
    list-style-image: url(../images/checkmark-outline.svg);
    padding: .2rem 0;
    font-size: .73rem;
    color: var(--light-dark);
}

.rel-price {
    position: absolute;
    top: 50%;
    right: 5rem;
    font-size: 1.45rem;
    letter-spacing: .5px;
}

.rel-choose {
    position: absolute;
    bottom: -.85rem;
    right: 1.5rem;
    font-size: .8rem;
    text-transform: uppercase;
    font-weight: 600;
    background-color: var(--teal);
    color: var(--light-white);
    letter-spacing: 1px;
    padding: .3rem .75rem;
    border-radius: .3rem;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
    cursor: pointer;
    user-select: none;
}

.enrol-conf {
    display: none;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .96);
    z-index: 999999999999999;
}

#confirmation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#confirmation a {
    font-size: .8rem;
    font-weight: 900;
}



/* End of single course main page */



/* About page styles */

.about {
    margin: 3rem;
    height: 70vh;
}

.about-head {
    font-size: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.about-desc {
    font-size: .85rem;
    line-height: 1.9;
    color: #666;
}

#about-img img {
    width: 100%;
}

.btn-contact {
    background-color: var(--primary-color);
    color: var(--white);
    margin: 1.2rem auto;
    width: 40%;
    display: block;
    font-weight: 800;
    text-transform: uppercase;
    font-size: .85rem;
    letter-spacing: 2px;
}

.btn-write {
    background-color: var(--primary-color);
    color: var(--white);
    margin: .3rem 0;
    font-size: .88rem;
    font-weight: 700;
}

.btn-contact:hover {
    color: var(--white);
}

.btn-write:hover {
    color: var(--white);
}

.c-form {
    padding: 1.25rem;
    border-radius: .3rem;
    width: 100%;
}

#contact-form label {
    color: var(--light-dark);
    font-weight: 400;
    font-size: .8rem;
}

#contact-form input,
#contact-form textarea {
    font-size: .8rem;
}

#contact-d {
    background-color: var(--light);
}


/* Subsectors page styles */

.subsectors {
    padding: .5rem 2.25rem 3rem 2.25rem;
}

.sub-head {
    padding: .8rem 0;
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 1.8rem;
    letter-spacing: 3px;
    font-weight: 900;
    background-color: var(--teal);
    color: var(--white);
    text-shadow: 0 4px 3px rgba(0, 0, 0, .6);
}

.sub-link {
    text-decoration: none !important;
    color: var(--black);
    transition: .1s linear color;
}

.sub-card {
    width: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    transition: .2s linear;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.3);
}

.sub-card:hover {
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3);

}

.sub-card img {
    width: 100%;
}

.sub-t {
    padding: 1rem 0 0 0;
    margin: 0;
    text-align: center;
    font-size: .86rem;
    font-weight: 900;
    letter-spacing: 1px;
    width: 100%;
    background-color: var(--light-white);
}

.sub-d {
    display: block;
    padding: .5rem;
    font-size: .6rem;
    font-weight: 200;
    letter-spacing: normal;
    line-height: 1.7;
    color: #555;
    transition: .3s ease;
}


/******* Course list page when a subsector is clicked/Selected **********/

.cl-head {
    position: relative;
    padding: 1rem 0;
    text-align: center;
    background: var(--primary-color);
    /*background-image: linear-gradient(to bottom left, #AC32E4 0%, #7918F2 48%, #4801FF 100%);*/
    background-size: cover;
    background-position: bottom;
    box-shadow: 0 3px 0 0 rgba(0,0,0,0.2);
}

.cl-head h3 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--white);
    letter-spacing: 4px;
    text-shadow: 0 4px 3px rgba(0, 0, 0, 0.7);
}

#cat-back {
    position: absolute;
    left: 3rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 200;
    color: var(--white);
    cursor: pointer;
}

#cat-next {
    position: absolute;
    right: 3rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 200;
    color: var(--white);
    cursor: pointer;
}

.course-list {
    padding: 1rem 5.5rem 3rem 5.5rem;
}

.course-card {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 85%;
    background: var(--white);
    margin: 0 auto 1.75rem auto;
    padding: 0;
    /*box-shadow: 0 5px 4px rgba(0, 0, 0, .2); */
    border: 2px solid #aaa;
    border-radius: .2rem;
    transition: .2s ease-in all;
}

.course-card:hover {
    border: 2px solid var(--secondary-color);
}

.crs-link {
    text-decoration: none !important;
    color: var(--black);
}

.crs-link:hover {
    color: var(--black);
}

.crs-img {
    width: 100px;
    height: 130px;
    margin: 0 1.5rem 0 2.5rem;
    border-radius: 50%;
}

.crs-img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.crs-content {
    width: 60%;
}

.crs-content h5 {
    width: 100%;
    margin: 1rem 0 0 1rem;
    text-transform: uppercase;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--black);
}

.crs-det {
    margin: .6rem 0 0 1rem;
    font-size: .71rem;
}

.crs-det i {
    color: var(--blue);
    margin-right: .2rem;
}

.crs-det span {
    margin-right: .4rem;
}

.crs-content p {
    margin: .6rem 0 .18rem 1rem;
    font-size: .8rem;
}

.crs-content ul li {
    margin: 0 0 0 2.2rem;
    padding: .1rem 0;
    font-size: .7rem;
    color: #666;
    line-height: 1.65;
    list-style-image: url(../images/checkmark-outline.svg);
}

.crs-price {
    width: 20%;
    display: block;
    margin: 0 auto;
}

#act-price {
    font-size: 1rem;
    color: #777;
    text-decoration: line-through;
    padding: 0 1.2rem;
}

.crs-price span {
    display: block;
    width: 100%;
    padding: .4rem 1.8rem;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    color: var(--primary-color);
}

.crs-error-msg {
    width: 60%;
    margin: 0 auto 1.5rem auto;
}

.crs-error-msg img {
    width: 40%;
    display: block;
    margin: 0 auto;
}

.crs-error-msg span {
    display: block;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* End of Course list page for a subsector */

/* Payment Confirmation Page */

.confirmation {
    padding: 4.5rem 2.5rem;
}

.cn-sub {
    padding: 1rem;
}

.course-item {
    display: inline-flex;
    align-items: center;
    margin: 0 0 1.25rem 0;
    background-color: var(--light-white);
    border-radius: .5rem;
    padding: 1.2rem;
    width: 100%;
}

.c-item-text h6 {
    padding: 1.1rem .8rem 0 .9rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 1.5px;
}

.c-item-text p {
    padding: .6rem 0 0 .9rem;
    font-size: .8rem;
}

.c-item-img img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    padding: .8rem;
}

.summary {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    border-radius: .3rem;
    margin-top: 1.2rem 0;
    padding: 1.2rem;
    background: var(--white);
}

.sum-head {
    font-size: 1.5rem;
    font-weight: 800;
    padding: 0 0 .45rem 0;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

.table-sum {
    font-size: .85rem;
    margin: 0;
    padding: 0;
}

.table-sum td {
    padding: .6rem 0;
    text-align: right;
}

.checkout img {
    width: 55px;
    padding-left: .6rem;
}


.checkout-form {
    padding: 0 1rem;
    margin: 0 0 1.2rem 0;
    width: 88%;
}

.card-type {
    margin: 0;
    padding: .6rem 1rem;
    font-weight: 600;
    color: var(--primary-color);
}

.ac {
    color: var(--red);
    margin-right: .56rem;
    margin-left: .4rem;
}

.check-btn {
    background-color: var(--primary-color);
    font-size: .8rem;
}

.check-btn:hover {
    background-color: var(--secondary-color);
}

.mod-plus {
    list-style: none;
    font-size: .8rem;
    padding: .5rem 1rem;
}

.mod-plus li {
    padding: .2rem 0;
}

.payment-conf {
    display: none;
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999999999999999;
    background-color: var(--white);
}

.payment-conf img {
    width: 6rem;
    display: block;
    text-align: center;
    margin: 0 auto;
}

.pay-conf {
    width: 40%;
    display: block;
    margin: 8% auto;
    padding: 1.2rem;
    color: #333;
    border: 1px solid #777;
}

.p-img {
    display: flex;
}

.pay-conf p {
    margin: 1.2rem 0;
    color: #333;
}

.pay-conf input {
    padding: 0 .5rem;
}

.pay-conf button {
    margin: 1rem 0;
}

.success-page {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 5rem 2.5rem;
}

.succ-img {
    width: 100%;
    margin: 0 auto;
}

.succ-img img {
    width: 50%;
    display: block;
    margin: 0 auto;
}

.cn-head {
    font-size: 1rem;
    color: #000;
    letter-spacing: 1.5px;
    font-weight: 800;
    margin: .9rem 0;
}

.success-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: left;
    padding: 0;
    height: 100%;
    background: url(../images/success-bg.png) no-repeat;
    background-size: cover;
    background-position: 20% 60%;
    border-radius: .3rem;
}

.success-item-c {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, .5);
    width: 100%;
    margin: 0 auto;
    padding: 1.2rem 0;
}

.success-course {
    font-size: 1.4rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    width: 90%;
    text-align: center;
    line-height: 1.4;
    color: var(--white);
    text-shadow: 0 4px 4px rgba(0, 0, 0, .4);
}

.success-item .mod-plus {
    text-align: left;
}

.success-item img {
    width: 170px;
    height: 170px;
}

.btn-launch {
    font-family: 'HomepageBaukasten-Bold', sans-serif;
    font-size: .8rem;
    font-weight: bold;
    color: var(--light-dark);
    background: var(--white);
    padding: .5rem 1.3rem;
    border-radius: .3rem;
    cursor: pointer;
    border: none;
    letter-spacing: 1px;
    text-decoration: none !important;
    margin: .8rem 0;
    text-align: center;
    transition: .2s ease;
    box-shadow: 0 5px 4px rgba(0, 0, 0, 0.2);
}

.btn-launch:hover {
    color: var(--light-dark);
    border: none;
    outline: none;
}

.btn-launch:focus {
    outline: none;
}

.btn-launch:active {
    transform: scale(0.95);
    border: none;
    outline: none;
}

.btn-launch i {
    font-size: .75rem;
}

.order-head {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 1.5rem 0;
}

.checkout-btn {
    margin: 1rem 0;
    text-align: center;
    padding: .6rem 2rem;
    background: var(--primary-color);
    color: var(--white);
    font-weight: 800;
    letter-spacing: 2px;
    border-radius: .3rem;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
    width: 100%;
    cursor: pointer;
}

.checkout-btn span i {
    font-size: .9rem;
}

/* Loading payment styles */

.loading-pay {
    display: none;
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999999999999999;
    background-color: var(--white);
    transition: .3s ease;
}

.l-pay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.l-pay h6 {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 2px;
}

.loading-pay img {
    width: 30%;
    margin: 0 auto;
    display: block;
}

.succ-msg {
    display: none;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.succ-msg img {
    width: 15%;
    transition: .4s linear all;
}

.succ-msg h6 {
    font-size: 1.85rem;
    font-weight: 600;
    letter-spacing: 2px;
    margin: 1.2rem 0;
    transition: .4s linear all;
    color: var(--white);
}


/* Payment Successful Modal */

.payment-success {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;
    background: rgba(0, 0, 0, .8);
}

.pay-cont {
    width: 45%;
    margin: 0 auto;
    padding: 1.5rem;
    background-color: #fff;
    border-radius: .2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.pay-cont img {
    width: 200px;
    padding: 1.2rem;
}

#close-success-payment {
    margin: 1rem 0;
    border: 0;
    outline: 0;
    padding: .2rem 1rem;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .4);
    font-size: .9rem;
    font-weight: 900;
}


/* Terms and Conditions */

.terms {
    margin: 0;
}

.terms-header {
    width: 100%;
    position: fixed;
    top: 0;
    border: none;
    background-color: var(--light-white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .8rem 2rem;
}

.terms-header h6 {
    margin: 0;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.logo-terms img {
    width: 90px;
}

.terms img {
    width: 55%;
    margin: 0 auto;
    display: block;
    opacity: .5;
    transform: translateY(-20%);
}

.terms-head {
    text-align: center;
    position: absolute;
    top: 53%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.3rem;
    font-weight: 800;
    width: 100%;
    background-color: rgba(255, 255, 255, .9);
    padding: .6rem;
    letter-spacing: 2px;
    color: #666;
}

.sidebar {
    border-right: 1px solid #eee;
    height: 100%;
    width: 16%;
    position: fixed;
    top: 3.9rem;
}

.terms-sidebar-content {
    list-style-type: none;
    padding: 2rem 0 2rem 0;
    font-size: .75rem;
    font-weight: 800;
}

.terms-sidebar-content li {
    color: var(--light-dark);
    text-decoration: none;
    padding: .5rem 2rem .5rem 1.5rem;
    line-height: 1.8;
    cursor: pointer;
}

.terms-sidebar-content li i {
    padding-right: .4rem;
}

.terms-sidebar-content li:hover {
    background: var(--light-white);
}

.content-side {
    display: block;
    width: 65%;
    padding: 2.8rem 2.5rem;
    line-height: 1.9;
    margin-left: 17%;
    padding-top: 8.1%;
    text-align: justify;
}

.content-side h5 {
    font-weight: 800;
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.content-side h6 {
    font-weight: 800;
    font-size: .78rem;
}

.content-side p {
    font-size: .72rem;
}

.term-secs {
    padding: 1.5rem 0 0 0;
}

/* Feedback List */

.feedback-list {
    font-family: inherit;
    width: 100%;
    margin: 0;
}

.feed-search {
    padding: 3rem 0 1rem 0;
    width: 70%;
    margin: 0 auto;
}

#f-search {
    width: 100%;
    padding: .3rem .1rem;
    border: none;
    border-bottom: 2px solid var(--primary);
    background: inherit;
    outline: none;
    font-size: .85rem;
}

.feedback-list h2 {
    font-size: 1.7rem;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    padding: 3rem;
    margin: 0;
    letter-spacing: 2px;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../images//feedback.jpg);
    background-size: cover;
    background-position: center;
    color: var(--white);
    text-shadow: 0 5px 5px rgba(0, 0, 0, .7);
}

.list-feed {
    padding: 0 0 3rem 0;
    background: #fcfcfc;
}

.f-list {
    margin: 1rem auto;
    width: 70%;
}

.f-list p {
    margin: .6rem 0;
    font-size: .78rem;
    line-height: 1.8;
}

.f-list h3 {
    font-size: 1.35rem;
    margin: 0 0 .7rem 0;
    font-weight: 700;
}

.f-list h3 span {
    font-size: .7rem;
    margin: .3rem 0 0 0;
}

.f-list i {
    padding: 0 .25rem 0 0;
    font-size: .65rem;
    color: var(--primary);
}

.feed-det {
    display: flex;
    align-items: center;
}

.f-list span {
    font-size: .7rem;
    padding-right: .6rem;
}

.time-f {
    font-size: .65rem;
    position: absolute;
    top: 1.2rem;
    right: 1rem;
}

.no-result {
    display: none;
    padding: 1.5rem 0 0 0;
    color: var(--danger);
    font-size: 1.2rem;
}

.close-feed {
    display: none;
}

/******** Dynamics classes used by JavaScript ********/

.selected {
    transform: scale(1.02);
    background: teal;
    color: var(--white);
}

.tick {
    opacity: 1;
}

.mods label {
    margin: .35rem 0;
}

.help-block {
    font-size: .75rem;
}

.active-sidetab {
    background-color: #ddd;
}


@media only screen and (max-width: 1200px) {
    .title{
        font-size:1.75rem;
    }
    .sub-title{
        font-size: .7rem;
    }
    
    .start{
        font-size:.65rem;
    }
}


/*Overlay style
.overlayhome{
    width:100%;
    height:100vh;
    opacity: 0.7;
    position: absolute;
    left:0;
    top:0;
    background-color: black;
}
*/