body{font-family: 'SF UI Display';font-size: 16px; color: #000000; background: #f8fbfe !important; }
.body-color{ background: #f8fbfe;}
*{margin:0px; padding:0px;}
a:hover, a:focus{ text-decoration:none !important;}
button:hover, button:focus{ outline:0 !Important}

@font-face {
    font-family: 'SF UI Display';
    font-style: normal;
    font-weight: 400;
    src: local('SF UI Display Light'), url('../fonts/sf-ui-display-light-58646b33e0551.woff') format('woff');
}
@font-face {
    font-family: 'SF UI Display';
    font-style: normal;
    font-weight: 500;
    src: local('SF UI Display Medium'), url('../fonts/sf-ui-display-medium-58646be638f96.woff') format('woff');
}
@font-face {
    font-family: 'SF UI Display';
    font-style: normal;
    font-weight: 600;
    src: local('SF UI Display Semibold'), url('../fonts/sf-ui-display-semibold-58646eddcae92.woff') format('woff');
}
@font-face {
    font-family: 'SF UI Display';
    font-style: normal;
    font-weight: 700;
    src: local('SF UI Display Bold'), url('../fonts/sf-ui-display-bold-58646a511e3d9.woff') format('woff');
}
@font-face {
    font-family: 'SF UI Display';
    font-style: normal;
    font-weight: 800;
    src: local('SF UI Display Black'), url('../fonts/sf-ui-display-black-58646a6b80d5a.woff') format('woff');
}

.section-two, .section-three {  background-color: #f8fbfe!important;}
.container{max-width:1270px !important; margin:0px auto;}
.landingPage-header { background: #333;padding: 10px 0px; font-family: 'SF UI Display';}
.login-wrap ul { padding: 0px; margin: 0px;display: flex; justify-content: flex-end;align-items: center;}
.login-wrap ul li { display: inline-block; list-style: none; margin-left: 15px;}
.login-wrap ul li a {    color: #333;font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; background: #f2ce45;width: 110px; justify-content: center;border-radius: 30px; height: 28px; display: flex; align-items: center; cursor:pointer;}
.login-wrap ul li a:hover{ color:#333; text-decoration:none;}
.logo-wrapper { padding: 5px 0px; background:#ffffff;}
.group-image { display: flex;justify-content: flex-start;align-items: center;}
.group-image > .img-fluid {height: 120px;}
.section-one { position: relative;overflow: hidden; height: 690px;} 
.section-one::before { content: ''; background: url(/ccnylanding/images/bg-1.png) no-repeat top center; width: 765px;height: 684px;position: absolute; left: calc(50% - 675px);top: 0px; background-size: cover;}
.section-one::after { content: ''; background: url(/ccnylanding/images/bg-2.png) no-repeat top center;width: 680px;height: 700px; position: absolute;  right: calc(50% - 675px); top: -120px; background-size: cover;}
.banner-image { position: relative; z-index: 99; margin-top: 100px; width: 370px;}
.content-wrap { width: 500px;}
.image-wrapper > img { width: 100%;object-fit: cover; height: 350px;}
.content-wrap h1 { font-size: 70px; text-transform: uppercase; color: #fff;}
.content-wrap h1 { font-size: 50px; text-transform: uppercase; color: #fff; margin-bottom: 10px;}
.content-wrap h2 { font-size: 48px; color: #ffffff; margin: 0px;}
.content-wrap h2 span { display: block;}
.section-two{ padding:10px 0px 40px;}
.enroll-wrapper { padding-left: 20px;font-family: 'SF UI Display';}
.enroll-wrapper h2 {display: flex;justify-content: flex-end; align-items: center;  margin-bottom: 25px;}
.enroll-wrapper h2 del { font-size: 30px; color: #666666ad; font-weight: 600;}
.enroll-wrapper h2 span {font-size: 30px;color: #7d5cc6;font-weight: 600;}
.btn-enroll { background: #7d5cc6;  border: 1px solid #7d5cc6; color: #fff !important; font-weight: 600;font-size: 20px; width: 100%; height: 55px; border-radius: 4px; text-transform: uppercase; letter-spacing: 2px; transition:.3s;display: flex; justify-content: center; align-items: center; cursor:pointer;}
.btn-enroll:hover, .btn-enroll:focus{ box-shadow: 5px 5px 19px #66666673; transform: translateY(-2px); color:#fff; text-decoration:none;}
.enroll-wrapper ul { padding: 0px; margin-top: 30px;margin-bottom:0px}
.enroll-wrapper ul li {display: block; position: relative;font-family: 'SF UI Display'; font-size: 16px; font-weight: 400; color: #666; padding-left: 20px; letter-spacing: .3px;}
.enroll-wrapper ul li + li { margin-top: 15px;}
.enroll-wrapper ul li::before {content: '';background: #7d5cc6;width: 8px;height: 8px;border-radius: 50%; position: absolute; left: 0px; top: 7px;}
.fetaure-tabs {font-family: 'SF UI Display'; background: #fff;  margin-bottom: 60px; box-shadow: 0px 0px 20px #ccccccc9;border-radius: 0px 0px 10px 10px;}
.fetaure-tabs .nav-tabs { border-bottom: 1px solid #333333; background: #333333; border-top: 6px solid #7d5cc6;  padding: 15px 20px;}
.fetaure-tabs .nav-tabs .nav-link { border: 2px solid #f2ce45; border-radius: 30px !important; font-size: 16px !important; color: #fff !important; text-transform: uppercase;  font-weight: 500 !important; padding: 6px 20px; margin-right: 15px; width: auto !important;}
.fetaure-tabs .nav-tabs .nav-link:hover{background: #333333 !important; border-color:#f2ce45 !important;}
.fetaure-tabs .nav-tabs .nav-item.show .nav-link, .fetaure-tabs .nav-tabs .nav-link.active { color: #333 !important; background-color: #f2ce45 !important; border-color: #f2ce45 !important;}
.fetaure-tabs .tab-content { padding: 25px;}
.fetaure-tabs .tab-content p {font-size: 15px; color: #666; margin-bottom: 10px; line-height: 24px;letter-spacing: .3px;}
.fetaure-tabs .tab-content h2 {font-size: 18px; color: #333; margin-top: 25px; margin-bottom: 15px;}
.fetaure-tabs .tab-content ul li {display:block;list-style:none;font-size: 15px; color: #666; line-height: 24px;letter-spacing: .3px;position:relative; padding-left:20px;}
.fetaure-tabs .tab-content ul li::before { content: ''; background: #666; width: 6px; height: 6px;  border-radius: 50%; position: absolute;left: 0px;top: 7px;}
.fetaure-tabs .tab-content ul li + li { margin-top: 5px;}
.certificate-content { background: #7d5cc6; border-radius: 10px; margin: 25px 30px; padding: 20px; width:300px;}
.certificate-content p { font-size: 15px;letter-spacing: .3px; color: #fff; margin-bottom: 0px; line-height: 26px;}
.instructors-profile-01 {position: relative;padding-left: 170px;min-height: 150px;}
.instructors-profile-01 + .instructors-profile-01 {margin-top: 30px;}
.instructors-picture {position: absolute;  left: 0px; top: 0px; width: 150px; border-radius: 15px; overflow: hidden;}
.instructors-profile-01 h3 {font-size: 18px;color: #333; margin-bottom: 5px;}
footer {background: #2a2a2a; position:relative; overflow:hidden; padding:60px 0px; }
.footer-content p {font-size: 14px;color: #fff;line-height: 24px; margin-bottom: 0px;letter-spacing: .5px;}
.footer-content p a{ color: #fff;}
.footer-content p a:hover{ color:#ffffff;}
.footer-logo { margin-bottom: 40px;}
.titleHead-wrap { background: #ffffff; padding: 25px 0px 30px;}
.titleHead-wrap  .container{ padding:0px 60px;}
.titleHead-wrap h1 { font-size: 70px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 0px; color: #000000; line-height: 85px; font-weight: 500;}
.titleHead-wrap h2 { font-size: 68px; letter-spacing: 6px; margin-bottom: 0px; color: #000000; line-height: 85px; font-weight: 500;}
.titleHead-wrap p { font-size: 16px; letter-spacing: .5px; margin-bottom: 0px;color: #666; line-height: 26px;font-weight: 400; margin-top:10px;}
.alert-success { padding: 5px 10px !important; font-size: 13px !important; letter-spacing: .5px !important;  line-height: 20px !important;}
.admin-login .note-info p { color: #228B22;background: #C3FFC3; font-size: 13px; letter-spacing: .5px; line-height: 20px;}
.admin-login .note-error p {color: #b90d0d; background: #f3e2e2; padding: 5px 10px; font-size: 13px;letter-spacing: .5px; line-height: 20px;}	
.payment-table { margin-bottom: 30px;}
#assigned_course_error > b {font-size: 13px; font-weight: normal; letter-spacing: .5px; position: absolute; bottom: 55px; width: 100%; left: 0px; text-align: center;  color: #fa0404;}
.buttonTop { margin-top: 23px;}
.feature-wrapper { background: #79787e; padding: 10px 0px;}
.feature-list ul { margin-bottom: 0px; display: flex; justify-content: center; align-items: center;flex-wrap: wrap;}
.feature-list ul li { display: inline-flex; font-size: 24px; color: #fff; letter-spacing: 2px; font-weight: 600; padding: 0px 20px; position: relative; line-height: 24px; margin: 5px 0px;}
.feature-list ul li + li { border-left: 2px solid #fff;}
.courses-wrapper { padding: 15px 0px;}
.courses-items { margin: 15px 0px;}
.courseContent h2 { font-size: 35px; color: #000;margin-bottom: 10px; font-weight: 500; letter-spacing: 1px;}
.courseAmount { display: inline-flex; background: #7d5cc6; color: #fff; font-size: 16px; justify-content: center; align-items: center; padding-left: 30px; letter-spacing: 1px; text-transform: uppercase;  margin-bottom:15px;}
.courseAmount > span { background: #00bd00; font-size: 30px; font-weight: 600; padding: 5px 10px; height: 45px; display: inline-flex; justify-content: center; min-width: 120px; align-items: center; margin-left: 30px;}
.courseAmount:hover, .courseAmount:hover > span{ color:#fff;}
.courseContent ul { margin: 0px;}
.courseContent ul li { font-size: 16px; color: #333; line-height: 24px; letter-spacing: .5px; position: relative; display: block; padding: 3px 0px; padding-left: 16px;}
.courseContent ul li::before { content: '-'; position: absolute; left: 0px; font-size: 22px; color: #333;}
.courseImage > img {width: 100%;object-fit: cover;}

 
/* Login css */
.loginPage-wrapper{ height:100vh; display:flex; justify-content:center; align-items:center;}
.admin-wrapper { background: #7d5cc6;border-radius: 20px;box-shadow: 5px 20px 15px -15px #00000052;min-height: 580px; margin:30px 0px; overflow:hidden;}
.admin-left {padding: 0px 30px;}
.admin-left h1 { color: #fff; font-size: 35px; font-weight: 600; margin-bottom: 30px; text-transform: uppercase; text-shadow: 2px 2px 8px #00000026; line-height: 40px;}
.admin-left {display: flex; max-height: 100%; justify-content: center; align-items: flex-start;flex-direction: column;}
.admin-login { padding: 30px 70px; padding-top:90px; position:relative; background: #fff; max-height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.admin-logo { margin-bottom: 20px; text-align: center;}
.admin-login h2 { font-size: 22px;text-align: center; margin-bottom: 30px;font-weight: 600; color: #333; position: relative;}
.logo { position: absolute; top: 30px;}
.logo > img { height: 40px;}
.admin-login .input-group { width: 100%;}
.admin-login .input-group > span {position: absolute;left: 0px; top: 0px; z-index: 999;font-size: 15px; color: #ccc; height: 50px; width: 45px; display: flex; justify-content: center;align-items: center;}
.admin-login .input-group > span .fa-lock {  font-size: 18px;}
.admin-login .input-group > .form-control { padding-left: 45px;}
.admin-login .form-control {height: 50px; border-radius: 4px !important;font-size: 14px;letter-spacing: .5px;color: #000;}
.admin-login .form-group {margin-bottom: 20px;}
.admin-login span.invalid-feedback { position: absolute; color: red; font-weight: normal;font-size: 13px;}
.admin-login .form-control:focus,
.admin-login .form-control:focus-visible { border-color: #7d5cc6; box-shadow: none;text-shadow: none;}
.form-check .form-check-label { line-height: 20px; font-size: 14px; letter-spacing: .5px; color:#333;}
.login-btn {background: #7d5cc6;font-size: 18px;border: 1px solid #7d5cc6; padding: 8px 25px; color: #ffffff; width: 100%; display: inline-flex;justify-content: center; align-items: center; height: 50px; border-radius: 6px;transition: .3s;text-transform: uppercase;font-weight: 600;letter-spacing: .5px;}
.login-btn:hover, .login-btn:focus {color: #ffffff !important; background: #7d5cc6 !important; box-shadow: 3px 3px 15px #66666654; border-color: #7d5cc6 !important; transform: translateY(-2px); text-decoration: none !important; cursor: pointer;}
.btn-link{display: inline-flex;justify-content: flex-start;color: #333; font-size: 14px; align-items: center;letter-spacing: .5px;}
.btn-link i{ margin-right:10px;}
.btn-link:hover{color: #7d5cc6 !important;}
.alreadyAccount p { font-size: 14px; margin-bottom: 0px;margin-top: 15px; color: #333;letter-spacing: .5px;}
.alreadyAccount p a { color: #7d5cc6 !important;font-weight: 600; display: inline-block;cursor: pointer;}
.errorMsg {color: red;font-size: 12px;letter-spacing: .4px; position:absolute;}
.alert-error {color: #b90d0d;background: #f3e2e2;padding: 10px 12px !important;font-size: 13px !important;margin-top: 15px;border-radius: 2px;width: 100%;}
.instructors-picture .img-fluid {
  height: 165px;
  width: 100%;
  object-fit: cover;
}

.alert-success{color: #3c763d;background: #dff0d8;padding: 10px 12px !important;font-size: 13px !important;margin-top: 15px;border-radius: 2px;width: 100%;}