:root {
    --mainColor: #366bab;
    --secondColor: #22abae;
    --hoverColor: ;
    --textColor: #585858;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
*,
::before,
::after {
    transition: 0.3s ease;
}
ol,
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
a {
    color: inherit;
    text-decoration: none;
}
a:hover,
a:focus {
    text-decoration: none;
    color: inherit;
}
html {
    scroll-behavior: smooth;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Gordita-Regular";
}
body {
    font-family: "Gordita-Regular";
    overflow-x: hidden;
}
/* input:focus,
input:focus-visible */
#search-modal .header .container form input:focus,
#search-modal .header .container form input:focus-visible {
    border: none !important;
    box-shadow: none !important;
}

@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
        width: 100%;
    }
}
.no-p,
.no-m {
    padding: 0;
    margin: 0;
}

.mainBtn {
    border-radius: 29px;
    background-color: rgb(50, 71, 96);
    font-size: 14.18px;
    display: block;
    width: max-content;
    color: #fff;
    padding: 8px 24px;
}
.mainBtn:hover {
    background-color: rgb(41, 63, 89);
    filter: brightness(100px);
    color: #fff;
}

/********************************************** header **************************************************/
.header {
    border-bottom: 1px solid #e2e2e2;
    position: relative;
    width: 100%;
}
.header ol#burgerMenu {
    position: absolute;
    background: #fff;
    width: calc(10% + -2px);
    right: -100%;
    top: 100%;
    z-index: 9;
    border-bottom: 1px solid #d5d8db;
    opacity: 0;
    visibility: hidden;
}
.header ol#burgerMenu li a {
    padding: 20px 15px;
}
.header ol#burgerMenu.active {
    right: 0;
    opacity: 1;
    visibility: visible;
}
.burgerBtn svg:nth-last-of-type(1) {
    display: block;
}
.burgerBtn svg:nth-last-of-type(2) {
    display: none;
}
.burgerBtn.active svg:nth-last-of-type(1) {
    display: none;
}
.burgerBtn.active svg:nth-last-of-type(2) {
    display: block;
    font-size: 20px;
}
.header ol#burgerMenu a {
    border-right: none;
    border-left: 1px solid #d5d8db;
}
.logo {
    padding: 25px 0;
}
.logo img {
    width: 209px;
}
ul.menuList {
    display: flex;
    height: 100%;
}

ul.menuList li a {
    display: block;
    padding: 25px 30px;
    border-right: 1px solid #e2e2e2;
    display: grid;
    place-items: center;
    font-size: 14.36px;
    color: var(--textColor);
    height: 100%;
}
ul.menuList li a:hover {
    color: var(--mainColor);
}
ul.menuList li a.burgerBtn {
    border-right: none;
}

#search-modal {
    top: 0;
    margin-top: 3em !important;
    width: 100% !important;
    right: 0;
}
#search-modal .actions {
    border: none;
}
#search-modal .actions .cancel.button {
    background: var(--mainColor);
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    width: auto;
    height: auto;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    z-index: 1;
    color: #fff;
}
#search-modal .actions .cancel.button div {
    margin-top: 0.35em;
}
#search-modal .header {
    padding: 2.5rem 2.25rem 0 2.25rem !important;
    border: none;
}
#search-modal .header .container {
    border-bottom: 1px solid rgba(34, 36, 38, 0.15);
    padding-bottom: 0.5em;
}
#search-modal .header .container form {
    position: relative;
    width: 100%;
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#search-modal .header .container form input {
    background: transparent;
    border: none;
    border-radius: 0;
    width: 80%;
    display: inline-block;
    font-size: 30px;
}
#search-modal .header .container form .search {
    width: 20%;
    float: right;
    width: max-content;
}
#search-modal .header .container form .search svg {
    font-size: 30px;
}
#search-modal .content .result .content {
    background: #eee;
    padding: 0.4em;
    margin: 0.3em;
}
#search-modal .content .result .content .description {
    color: #333;
}

.middle.grid {
    height: 100%;
}

/********************************************** header **************************************************/

/********************************************** hero **************************************************/
.hero {
    position: relative;
    height: 510px;
    display: flex;
    align-items: center;
    margin-top: -1px;
}
.hero .container {
    max-width: 100%;
    width: 100%;
}
.hero .bg {
    position: absolute;
    width: 60%;
    height: 100%;
    top: 0;
}
.hero .bg img {
    height: 100%;
}
.hero .leftBackground.bg {
    left: 0;
}
.hero .fullBg.bg {
    right: 0;
    left: 0;
    width: 100%;
    z-index: -1;
}
.hero .fullBg.bg img {
    width: 100%;
}
.heroImage.no-m.no-p {
    padding-left: 40px;
}
.heroImage.no-m.no-p .img-fluid {
    width: 100%;
}
.hero .row {
    align-items: center;
}
.hero .textBody {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: #fff;
    padding-left: 70px;
    padding-right: 100px;
    font-family: "Gordita-Regular";
}

.hero .textBody p {
    font-size: 17.07px;
    margin-bottom: 30px;
}
.hero .textBody h2 {
    color: #fff;
    font-size: 26.36px;
    margin-bottom: 10px;
}
.heroImage.no-m.no-p .img-fluid {
    width: 90%;
    height: 100%;
    margin-left: auto;
    display: block;
}
/********************************************** hero **************************************************/

/********************************************** services **************************************************/
.services {
    padding: 60px 0;
}
.servicesItem {
    display: grid;
    place-items: center;
    gap: 15px;
    font-size: 15.43px;
    color: #30455e;
    padding-bottom: 80px;
    overflow: hidden;
}
.servicesItem img {
    height: 70px;
}
.servicesItem a {
    height: 70px;
    overflow: hidden;
    position: absolute;
    bottom: -70px;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
}
.servicesItem a:hover {
    color: var(--mainColor);
}
.servicesItem:hover a {
    opacity: 1;
    visibility: visible;
    bottom: 0;
}
/********************************************** services **************************************************/

/********************************************** examOuter **************************************************/
.examOuter {
    background-color: #eff2f6;
    margin-top: 30px;
}
.examOuter .examOuterImage {
    position: relative;
}
.examOuter .examOuterImage img {
    position: absolute;
    top: -60px;
    bottom: 0;
    left: 0;
    height: auto;
    width: 47%;
}
.examOuterText {
    padding: 80px 0;
    color: #040b25;
    font-size: 14.29px;
    padding-right: 40px;
    line-height: 2.2;
}
.examOuterText h2 {
    font-size: 29.36px;
    color: #040b25;
    margin-bottom: 30px;
}
.examOuterText .mainBtn {
    margin-top: 30px;
}

/********************************************** examOuter **************************************************/

/********************************************** testemonial **************************************************/
.testemonial {
    padding: 70px 0;
}
.testemonial .testemonialHeader h2 {
    font-size: 23.36px;
    color: #040b25;
    margin-bottom: 20px;
}
.testemonial .testemonialHeader p {
    color: #324760;
    font-size: 12.21px;
    margin-bottom: 0;
    font-weight: bold;
}
.reviews {
    display: flex;
    align-items: end;
    justify-content: center;
    font-weight: bold;
}

.reviews img {
    margin: 0 10px;
}
.testemonialHeader {
    padding-bottom: 50px;
    border-bottom: 2px solid #d5d8db;
}
.testamonialContainer {
    padding: 50px 40px;
}
.testamonialText {
    min-height: 100px !important;
}
.testamonialText .lslide {
    margin-top: 25px;
}
.testamonialText p {
    width: 80%;
    margin: 0 auto;
}
.testamonialText .lSAction > a {
    transform: translateY(-50%);
}
.partnersItems li {
    display: grid;
    place-items: center;
}
.partnersItems {
    min-height: 100px !important;
}
.partners {
    background-color: #f9f9f9;
    padding: 30px 0;
}
/********************************************** testemonial **************************************************/

/********************************************** footer **************************************************/
footer.footer {
    background-color: #324760;
    padding: 88px 150px;
    padding-bottom: 30px;
    color: #fff;
}
footer a {
    color: #fff;
}
footer .footerMenu li a,
footer .copyRight ul li a {
    font-size: 12.28px;
    color: rgb(225 225 225);
    margin-bottom: 10px;
    display: block;
}
footer .footerMenu li a:hover,
footer .copyRight ul li a:hover {
    color: #fff;
    padding-left: 3px;
}
.getInTouch h2,
.getInTouch a {
    font-size: 12px;
    display: block;
    margin-bottom: 10px;
}
.getInTouch h2 {
    font-weight: bold;
}
footer .socialLink {
    margin-top: 20px;
}
footer .socialLink a {
    font-size: 20px;
    margin-right: 10px;
}
.copyRight {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
}
.copyRight ul {
    display: flex;
    flex-direction: row;
}
.copyRight ul li a {
    margin-right: 20px;
}
.copyRight p {
    font-size: 12px;
}
footer .mainBtn {
    background-color: #366bab;
}
footer .copyRight ul li a:hover {
    padding-left: 0;
}
/********************************************** footer **************************************************/

/********************************************** inners **************************************************/
.innerImage {
    height: 185px;
    overflow: hidden;
    position: relative;
    background-color: var(--mainColor);
}
.innerImage img {
    height: 185px;
}
.innerImage .pageTitle {
    position: absolute;
    left: 100px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 14.1px;
    z-index: 2;
}
.innerImage .pageTitle h2 {
    color: #fff;
    font-size: 22.05px;
    margin-bottom: 20px;
}
.innerImage .pageTitle span span {
    margin: 0 4px;
    font-size: 10px;
}
.aboutUs.innerImage::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../img/inners/overlay.png") center no-repeat;
    background-size: cover;
}
.innerImage::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: url("../img/inners/mainOverlay.png") center no-repeat;
    background-size: cover;
    z-index: 1;
}
.innerImage img {
    height: 185px;
    object-fit: fill;
    display: block;
    margin-left: auto;
}
/********************************************** inners **************************************************/

/********************************************** about us **************************************************/
.aboutArea .col-md-6 {
    display: flex;
    align-items: center;
}
.aboutArea {
    padding: 60px 0;
}
.missionVisision {
    background: url("../img/aboutUs/aboutBg1.png") right no-repeat;
    background-size: auto;
}
.ourPurpose {
    background: url("../img/aboutUs/aboutBg2.png") left top no-repeat;
    background-size: auto;
}
.aboutArea .imageArea {
    width: 100%;
    height: 100%;
}
.aboutArea .imageArea.right img {
    display: block;
    margin-left: auto;
}
.aboutArea .textArea h2 {
    font-size: 17.5px;
    color: var(--mainColor);
    margin-bottom: 20px;
    font-weight: 600;
}
.aboutArea .textArea p {
    font-size: 14px;
    color: #595959;
    line-height: 1.8;
}
/********************************************** about us **************************************************/

/********************************************** contact us **************************************************/
section.contactUs {
    padding: 60px 0;
}
.infoItem {
    display: grid;
    gap: 20px;
}
.infoItem li {
    display: flex;
    align-items: center;
}
.infoItem .infoImage {
    width: 70px;
    height: 71px;
    border-radius: 7px;
    background-color: rgb(240, 244, 251);
    display: grid;
    place-items: center;
    margin-right: 25px;
}
.infoItem .infoDetails span {
    font-size: 13.3px;
    color: #212121;
    display: block;
}
.infoItem .infoDetails a {
    font-size: 13.3px;
    color: #656565;
}
.contactHeading span {
    color: var(--mainColor);
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 30px;
    display: block;
}
.contactHeading h2 {
    color: #383838;
    font-size: 20px;
}
.contactHeading {
    margin-bottom: 40px;
}

.formArea {
    border-radius: 23px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 3.32px 0.68px rgba(86, 86, 86, 0.11);
    padding: 35px 50px;
}
.formContact {
    align-items: center;
    display: flex;
}
.formArea input::placeholder,
.formArea textarea::placeholder {
    font-size: 13.3px;
    color: #656565;
}
.formArea input,
.formArea textarea {
    border-radius: 20px;
    background-color: rgb(244, 244, 244);
    padding: 8px 30px;
}
.formArea input.mainBtn {
    background-color: var(--mainColor);
    color: #fff;
    padding: 10px 40px;
}
/********************************************** contact us **************************************************/

/********************************************** faqs **************************************************/
.faqs {
    padding: 60px 0;
}
.faqs .card-header {
    background: none;
    border-bottom: none;
}
.faqs .card .btn_link {
    font-size: 16.45px;
    color: #262626;
    outline: none;
    padding-left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-family: "Gordita-Medium";
}
.faqs .card .btn_link .icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgb(34, 171, 174);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 12px;
}

.faqs .card .btn_link[aria-expanded="true"] svg:nth-of-type(2) {
    display: block !important;
}
.faqs .card .btn_link[aria-expanded="true"] svg:nth-of-type(1) {
    display: none !important;
}
.faqs .card .btn_link:hover {
    text-decoration: none;
}
.faqs .card .btn_link:focus,
.faqs .card .btn_link:focus-visible {
    box-shadow: none;
    border: none;
}
.faqs .card {
    margin-bottom: 30px;
    padding: 35px 70px;
    border-radius: 29px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 3.32px 0.68px rgba(86, 86, 86, 0.11);
    border: none;
}
.faqs .card-body p {
    font-size: 14px;
    color: #484848;
}
/********************************************** faqs **************************************************/

/********************************************** regester **************************************************/
.regester {
    padding: 60px 0;
}

.regesterForm {
    width: 95%;
    margin: 0 auto;
    border-radius: 43px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 10.79px 2.21px rgba(86, 86, 86, 0.09);
}

.regesterForm .formHeaader {
    background-color: var(--mainColor);
    font-size: 18.54px;
    font-family: "Gordita-Medium";
    padding: 30px;
    border-top-left-radius: 43px;
    border-top-right-radius: 43px;
}
.regesterForm .formBody {
    padding: 40px;
    display: grid;
}
.formBody input.form-control,
.formBody .select select,
.formBody textarea {
    border-radius: 20px !important;
    background: #f6f6f6 !important;
    padding: 8px 30px;
    width: 100%;
    height: auto;
}
.formBody .select select {
    appearance: none;
    padding: 10px 30px;
    border: 1px solid #ced4da;
}
.formBody .select {
    appearance: none;
    position: relative;
}
.formBody .select::before {
    content: "";
    position: absolute;
    width: 30px;
    height: 100%;
    top: 0;
    right: 20px;
    background: url("../img/all/arrowDown.png") center no-repeat;
    background-size: auto;
}
.formBody input::placeholder,
.formBody textarea::placeholder {
    font-size: 13.3px;
    color: #656565;
}

.regesterForm input.mainBtn {
    background-color: var(--mainColor);
    color: #fff;
    padding: 10px 40px;
}
.regesterForm .radio-item input[type="radio"] {
    width: 6px;
}
.regesterForm .radio-item {
    display: flex;
    align-items: center;
}
.regesterForm .radio-item label {
    margin-bottom: 0;
    margin-left: 4px;
    cursor: pointer;
    color: #656565;
}
.regesterForm .radio-item label:hover {
    color: var(--mainColor);
}
.regesterForm .link {
    color: var(--mainColor);
    text-decoration: underline;
}
.regesterForm .signUp {
    background: var(--secondColor);
}
.regesterForm .formBody label {
    font-size: 14px;
    color: #3e3e3e;
    font-weight: 600;
}
.formBody .iti.iti--allow-dropdown.iti--separate-dial-code {
    width: 100%;
}
.formBody .iti--separate-dial-code .iti__selected-flag {
    background-color: transparent;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    font-size: 12px;
    border-right: 1px solid #ced4da;
}
.formBody .iti--allow-dropdown .iti__flag-container,
.iti--separate-dial-code .iti__flag-container {
    padding: 6px 0;
}
.formBody .select .price {
    display: inline-block;
    margin-left: auto;
    color: var(--mainColor);
}
.formBody .signup .radio-item input {
    margin-right: 6px;
}
.signup .regesterForm .radio-item label {
    margin-right: 20px;
    color: #7f7f7f;
    font-weight: normal;
    font-size: 14px;
}
.formBody label {
    color: #7f7f7f;
    font-weight: normal;
    font-size: 14px;
}
.signup .regesterForm .radio-item input[type="radio"] {
    width: 10px;
}
.signup .regesterForm .tab .radio-item input[type="radio"] {
    appearance: none;
    position: relative;
}
.signup .regesterForm .tab .radio-item input[type="radio"]::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -3px;
    width: 10px;
    height: 10px;
    border: 1px solid #eee;
    border-radius: 50%;
}
.signup .regesterForm .radio-item input.active[type="radio"]::before {
    background-color: var(--mainColor);
}
.regesterForm .subjectList {
    height: 233px;
    overflow: auto;
    scrollbar-width: thin;
}
.regesterForm .subjectList::-webkit-scrollbar {
    width: 5px;
}
.regesterForm .subjectList::-webkit-scrollbar-track {
    background-color: #f3f3f3;
}
.regesterForm .subjectList::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px #22abae;
}
.regesterForm .subjectList label {
    cursor: pointer;
}
.subjetContainer {
    padding: 25px 40px;
    padding-right: 0;
    border-width: 0.35px;
    border-color: rgb(136, 136, 136);
    border-style: solid;
    border-radius: 26px;
    background-color: rgb(251, 251, 251);
}
.subjectList .subjectList {
    padding-right: 40px;
}
/* .regesterForm .tabcontent {
    display: none;
} */
/********************************************** regester **************************************************/

/********************************************** search form **************************************************/
.search {
    padding: 60px 0;
}
.search .seacrhForm {
    border-radius: 23px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 3.32px 0.68px rgb(86 86 86 / 11%);
    padding: 35px 50px;
}
.seacrhForm input {
    border-radius: 20px;
    background-color: rgb(244, 244, 244);
    padding: 8px 30px;
}
.seacrhForm .label {
    font-size: 20px;
    color: #212121;
    font-family: "Gordita-Medium";
}
.seacrhForm input.mainBtn {
    background-color: var(--mainColor);
}
.search .noResult {
    font-size: 30px;
    color: #040b25;
    font-family: "Gordita-Medium";
}
/********************************************** search form **************************************************/

/********************************************** accountContainer **************************************************/
.accountContainer .container {
    width: 100%;
    max-width: 100%;
}
.accountContainer .accountList {
    padding: 30px 20px 30px 0px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 9.13px 1.87px rgba(86, 86, 86, 0.09);
}
.accountList ul {
    display: grid;
    gap: 20px;
}
.accountList ul li a {
    padding: 10px 20px 10px 80px;
    display: block;
    width: 100%;
    font-size: 12.6px;
    color: #3a3a3a;
    font-family: "Gordita-Medium";
    position: relative;
}
.accountList ul li a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--secondColor);
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    opacity: 0;
}
.accountList ul li a:hover,
.accountList ul li a.active,
.accountList ul li a.active::before,
.accountList ul li a:hover:before {
    opacity: 1;
    color: var(--secondColor);
}
.accountList ul li a svg {
    margin-right: 10px;
    font-size: 20px;
    width: 22px;
}
.accountContainer .accountHeader {
    padding: 0;
}
.accountContainer .applayedExam {
    display: flex;
    align-items: center;
}
.accountContainer .applayedExam img {
    margin-right: 12px;
}
.accountContainer .applayedExam .content {
    display: grid;
    font-size: 11.6px;
    font-weight: 600;
    color: #7c7c7c;
}
.accountContainer .applayedExam .examNumber {
    color: var(--secondColor);
}
.accountContainer .notification {
    display: flex;
    justify-content: end;
    align-items: center;
    width: 75%;
    float: left;
    background-color: #f3fafa;
    padding: 20px;
    height: 85px;
}
.accountContainer .notification a {
    font-size: 25px;
    display: block;
    margin-right: 30px;
    position: relative;
}
.accountContainer .notification a .notificationNumber {
    content: "";
    position: absolute;
    top: -10px;
    right: -15px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #e96447;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 10.5px;
}
.accountContainer .notification a:hover {
    color: var(--mainColor);
}
.accountContainer .userDetails {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: #f9f9f9;
    border-left: 1px solid #e4e7e7;
    height: 85px;
}
.accountContainer .userDetails svg {
    font-size: 30px;
    margin-right: 10px;
    color: var(--secondColor);
}
.accountContainer .userDetails .userName {
    display: grid;
}
.accountContainer .userDetails .userName {
    font-size: 12px;
    font-weight: 600;
}
.accountContainer .detailsContent {
    padding: 50px;
}
.accountContent .contentWrapper {
    border-radius: 18px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 9.13px 1.87px rgba(86, 86, 86, 0.09);
    padding: 30px 60px;
    width: 90%;
}
.accountContent .contentWrapper .notificationList h2 {
    font-size: 12.23px;
    color: var(--secondColor);
    margin-bottom: 20px;
    font-weight: 600;
}
.notificationList ul {
    display: grid;
    gap: 20px;
}
.notificationList ul li {
    display: flex;
    align-items: center;
    font-size: 11px;
    color: #494949;
}
.notificationList ul li span.mainTitle {
    color: 12px;
    color: #1d1d1d;
    font-weight: 600;
    display: block;
    margin-bottom: 12px;
}
.notificationList ul li {
    padding: 20px;
    border-radius: 17px;
}
.notificationList ul li.success {
    border-width: 0.7px;
    border-color: rgb(8, 108, 171);
    border-style: solid;
    background-color: rgb(241, 249, 244);
}
.notificationList ul li.info {
    border-width: 0.7px;
    border-color: rgb(8, 108, 171);
    border-style: solid;
    background-color: rgb(231, 239, 248);
}
.notificationList ul li.warning {
    border-width: 0.7px;
    border-color: rgb(254, 191, 33);
    border-style: solid;
    background-color: rgb(254, 247, 234);
}
.notificationList ul li.danger {
    border-width: 0.7px;
    border-color: rgb(251, 87, 87);
    border-style: solid;
    background-color: rgb(252, 239, 234);
}
.notificationList ul li img {
    width: 42px;
    height: 42px;
    margin-right: 20px;
}
.accountContainer .wrapperHeader {
    padding-bottom: 25px;
    position: relative;
}
.accountContainer .wrapperHeader::before {
    content: "";
    position: absolute;
    left: -60px;
    bottom: 0;
    width: calc(100% + 120px);
    height: 1px;
    background-color: #f5f5f5;
}
.accountContainer .wrapperHeader h2 {
    font-size: 14px;
    font-weight: 600;
    color: #3c3c3c;
}
.accountContainer .wrapperHeader .profileHeader {
    display: flex;
    justify-content: space-between;
}
.accountContainer .wrapperHeader a img {
    margin-right: 4px;
}
.accountContainer .wrapperHeader a {
    background-color: var(--secondColor);
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    padding: 5px 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}
.accountContent label {
    color: #545454;
    font-weight: 600;
}
.accountContent form.formBody {
    padding: 30px 0;
}
.accountContent .subjectList span {
    display: block;
    color: #545454;
    font-weight: normal;
    font-size: 14px;
    margin-bottom: 20px;
    font-weight: 600;
}
.formBody .button .mainBtn {
    float: left;
    margin-right: 20px;
    width: 234px;
    font-size: 11.35px;
    background-color: var(--secondColor);
}
.formBody .button .mainBtn.payment {
    background-color: var(--mainColor);
}
.wrapperHeader .tablinks {
    background: none;
    border: none;
    position: relative;
    font-size: 14px;
    color: #5c5c5c;
    margin-right: 20px;
}
.wrapperHeader .tablinks::before {
    content: "";
    position: absolute;
    bottom: -28px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--secondColor);
    opacity: 0;
}
button:focus,
button:focus-visible {
    outline: none;
    border: none;
}
.wrapperHeader .tablinks.active,
.wrapperHeader .tablinks.active::before {
    opacity: 1;
    color: var(--secondColor);
}
.PaymentInfo .radio-item {
    justify-content: center;
}
.PaymentInfo .radio-item .tablinks {
    border-radius: 20px;
    background-color: rgb(246, 246, 246);
    width: 162px;
    display: flex;
    justify-content: space-evenly;
    cursor: pointer;
    border: 1px solid transparent;
    padding: 5px;
    margin-right: 10px;
}
.PaymentInfo .radio-item .tablinks.active {
    border: 1px solid var(--secondColor);
}
.contentWrapper .profileDetails {
    padding: 30px 0;
}
.contentWrapper .profileDetails ul {
    display: grid;
    gap: 20px;
}
.contentWrapper .profileDetails ul li {
    display: inline-block;
    width: 100%;
}
.contentWrapper .profileDetails .detailsTitle {
    float: left;
    width: 40%;
    font-size: 12.25px;
    color: #3c3c3c;
    font-weight: 600;
}
.contentWrapper .profileDetails .detailsInfo {
    float: right;
    width: 60%;
    font-size: 12.25px;
    color: #9b9b9b;
}
/********************************************** accountContainer **************************************************/

/********************************************** studyMode **************************************************/
.studyMode .wrapperHeader::before,
.studyMode .wrapperHeader .tablinks::before {
    width: 0;
}
.studyMode .wrapperHeader .tablinks {
    border-radius: 29px;
    font-size: 12.23px;
    display: block;
    width: max-content;
    color: #3a3a3a;
    padding: 10px 24px;
    border: 1px solid #bdbdbd;
    margin-right: 22px;
    float: left;
}
.studyMode .wrapperHeader .tablinks.active {
    background-color: var(--mainColor);
    color: #fff;
    border: 1px solid transparent;
}
.studyMode .allSubject {
    border-radius: 11px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 1.66px 0.34px rgba(86, 86, 86, 0.31);
}
.studyMode .subjectHeader {
    background-color: #f6f6f6;
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
    padding: 20px;
}
.studyMode .subjectHeader span {
    margin-bottom: 0;
    color: #545454;
    font-size: 10.59px;
}
.studyMode .questionSubjectsContainer .custom-control.custom-checkbox {
    margin-bottom: 0 !important;
}
.studyMode .questionSubjectsContainer {
    height: 145px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 20px;
}
.studyMode .questionSubjectsContainer label {
    font-size: 11.2px;
    color: #3e3e3e;
    cursor: pointer;
}
.studyMode .subjectList.questionSubject span {
    font-size: 10.59px;
    color: #22abae;
    display: inline-block;
}
.studyMode .subjectList.questionSubject span span {
    margin-bottom: 0;
}
.studyMode .formBody .select select,
.studyMode .formBody label {
    font-size: 10.59px;
}
.studyMode .formBody .button .mainBtn {
    background-color: var(--mainColor);
}
/********************************************** studyMode **************************************************/

/********************************************** previews **************************************************/
.previews .searchInput {
    position: relative;
}
.previews .searchRow {
    padding: 0 60px;
    margin-bottom: 20px;
}
.previews .searchInput .icon {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 10%;
    display: grid;
    place-items: center;
}
.previews .searchInput .form-control {
    padding-left: 0;
    border: 0;
    border-bottom: 1px solid #7c7c7c;
    border-radius: 0;
    padding-right: 22px;
}
.previews .searchInput .form-control::placeholder {
    font-size: 10.59px;
    color: #545454;
}
.previews.accountContent .contentWrapper {
    padding: 30px 0;
}
.previews .table td:nth-child(1),
.previews .table th:nth-child(1) {
    padding-left: 60px;
    width: max-content;
}
.previews .table td,
.previews .table th {
    font-size: 10.15px;
    color: #7c7c7c;
}
.previews .table th {
    color: #1d1d1d;
    border: none;
}
.previews a.result {
    padding-left: 20px;
    color: var(--mainColor);
}
.previews .subjectName h2 {
    font-size: 10.15px;
    color: #7c7c7c;
    margin: 0;
}
.previews .row.tableRow {
    height: 222px;
    overflow: auto;
}
.previews .row.tableRow::-webkit-scrollbar {
    display: none;
}
.previews .table {
    height: max-content;
}
/********************************************** previews **************************************************/

/********************************************** performance **************************************************/

.skillContainer .skill {
    position: relative;
}

.skillContainer .skill .outer {
    height: 160px;
    width: 160px;
    border-radius: 50%;
    padding: 20px;
    /* box-shadow: 6px 6px 10px -1px rgba(0 0 0 /0.15),
        -6px -6px 10px -1px rgba(255 255 255 / 0.7); */
}

.skillContainer .skill .outer .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    width: 120px;
    border-radius: 50%;
    /* box-shadow: inset 4px 4px 6px -1px rgba(0 0 0/ 0.2),
        inset -4px -4px 6px -1px rgba(255 255 255 / 0.7),
        -0.5px -0.5px 0px rgba(255 255 255 / 1),
        0.5px 0.5px 0px rgba(0 0 0 /0.15),
        0px 12px 10px -10px rgba(0 0 0 / 0.05); */
}

.skillContainer .skill .outer .inner .skillNumber {
    font-weight: 800;
    text-align: center;
    color: #3a3a3a;
    font-size: 16.31px;
}
.skillContainer .skillNumber span {
    display: block;
    color: #7d7d7d;
    font-size: 13.11px;
}

.skillContainer circle {
    fill: none;
    stroke-width: 2px;
    stroke-dasharray: 472;
    stroke-dashoffset: 472;
    transition: 2s linear;
}

.skillContainer svg {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(90deg);
}

.skillContainer .skill:nth-child(1) circle {
    stroke: var(--secondColor);
}

.skillContainer .skill:nth-child(2) circle {
    stroke: var(--mainColor);
}

.skillContainer .skill:nth-child(3) circle {
    stroke: var(--secondColor);
}
.quizDetails h2 {
    font-size: 12.22px;
    color: #3a3a3a;
    font-weight: 600;
    margin-bottom: 20px;
}
.quizDetails ul {
    border-radius: 16px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 1px 1px rgba(86, 86, 86, 0.11);
}

.rank .quizDetails ul {
    box-shadow: none;
    border-radius: 0;
}
.quizDetails ul li {
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    font-weight: 600;
    color: #494949;
    padding: 10px 20px;
    border-bottom: 1px solid #f5f5f5;
    align-items: center;
}
.quizDetails ul li:last-of-type {
    border-bottom: none;
}
.quizDetails ul li .number {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: rgb(236, 236, 236);
    display: grid;
    place-items: center;
    font-size: 8.75px;
    color: #494949;
}
.rank .quizDetails ul .firstQuiz,
.rank .quizDetails ul .secondQuiz {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--secondColor);
    display: grid;
    place-items: center;
    font-size: 8.75px;
    color: #494949;
}
.rank .quizDetails ul li .number {
    width: 28px;
    height: 28px;
}
.rank .quizDetails ul li {
    padding-left: 0;
    padding-right: 0;
}
.rank .quizDetails h2 {
    margin-bottom: 5px;
}
.rank .quizDetails ul .secondQuiz {
    background-color: var(--mainColor);
}
.performance .allQuizDetails {
    display: grid;
    gap: 30px;
    margin-bottom: 50px;
}

/********************************************** performance **************************************************/

/********************************************** test **************************************************/
.test .wrapperHeader .tablinks {
    background-color: transparent;
}
.test .wrapperHeader {
    display: inline-block;
    width: 100%;
}
.test .searchRow {
    margin-top: 60px;
    padding: 0;
    width: 91%;
}
.test .searchRow .select {
    display: flex;
    align-items: center;
}
.test .searchRow .select label {
    margin-bottom: 0 !important;
    font-size: 12px;
    color: #3a3a3a;
}
.test .searchRow .select,
.test .searchRow select {
    width: 100%;
    background-color: transparent;
}
.test .searchRow select {
    border: none;
    border-bottom: 1px solid #dfdfdf;
    padding: 5px 10px;
    font-size: 10.5px;
    color: #838383;
}
.test .row.tableRow {
    width: 90%;
    height: auto;
}
.test .row.tableRow h2.legend {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #cfcfcf;
    font-size: 12.81px;
    color: #545454;
    display: block;
    width: 100%;
}
/********************************************** test **************************************************/

/********************************************** subject PopUp **************************************************/
.popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s;
}

.popup.is-active {
    opacity: 1;
    pointer-events: all;
}

.popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.popup-inner {
    position: relative;
    z-index: 1;
    max-width: 500px;
    padding: 20px 15px;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 10%);
    border-radius: 29px;
    background-color: rgb(255, 255, 255);
}

#report .popup-inner select {
    appearance: none;
    padding: 10px 30px;
    border: 1px solid #ced4da;
}
#report .popup-inner .select {
    position: relative;
}
#report .popup-inner .select::before {
    content: "";
    position: absolute;
    width: 30px;
    height: 100%;
    top: 0;
    right: 20px;
    background: url(../img/all/arrowDown.png) center no-repeat;
    background-size: auto;
}
#report .popup-inner input,
#report .popup-inner select {
    border-radius: 20px !important;
    background: #f6f6f6 !important;
    padding: 8px 30px;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}
#report .popup-inner label {
    font-size: 13.65px;
    color: #515151;
    font-weight: 600;
    text-align: center;
    display: block;
    margin-bottom: 10px;
}
#report .popup-inner {
    width: 400px;
}

.popup h2 {
    color: #313131;
    font-size: 28px;
    font-weight: 600;
}

.popup h3 {
    color: #888;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 30px;
}

.popup p {
    color: #666;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 15px;
}
.popup .close {
    float: right;
    background: url("../img/all/close.png") top no-repeat;
    background-size: auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.popup .bodyText p {
    font-size: 11.2px;
    color: #515151;
    font-weight: 500;
}
.popup .bodyText {
    height: 220px;
    overflow-y: auto;
    float: none;
    width: 100%;
    scrollbar-color: var(--secondColor) #ececec;
}
.popup .popup-inner h2 {
    font-size: 13.6px;
    color: #515151;
    margin-bottom: 30px;
    text-align: center;
    font-weight: 600;
}
/********************************************** subject PopUp **************************************************/

/********************************************** quiz **************************************************/
.quiz .questionNumber {
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
    font-size: 12px;
    color: #545454;
    display: flex;
    align-items: center;
}
.quiz .questionNumber img {
    margin-right: 10px;
}
.quizQuestion .badge {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: rgb(15, 132, 199);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 11.9px;
    margin-right: 20px;
}
.accountContent .quiz .contentWrapper {
    padding: 20px;
}
.quiz .quizHeader {
    display: flex;
    align-items: center;
}
.quiz .quizHeader > div {
    display: flex;
    align-items: center;
}
.quiz .quizReport {
    display: flex;
    align-items: center;
}
.quiz .questionText {
    font-size: 10.8px;
    color: #545454;
    font-weight: 600;
}
.quiz .quizQuestion {
    margin-right: 20px;
}
.quizReport .iconDiv {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: rgb(34, 171, 174);
    display: grid;
    place-items: center;
}
.quizReport .iconDiv.compline {
    background-color: #ea0b1b;
}
.quiz .quizReport .button {
    display: flex;
    align-items: center;
    margin-right: 10px;
    min-width: 75px;
    justify-content: space-between;
    cursor: pointer;
    margin-right: 15px;
}
.quiz .saveBtn .button {
    min-width: max-content;
    margin-right: 10px;
}
.quiz .underpreviewBtn {
    border-width: 0.35px;
    border-color: rgb(8, 108, 171);
    border-style: solid;
    border-radius: 14px;
    background-color: rgb(255, 255, 255);
    font-size: 10.59px;
    color: var(--mainColor);
    padding: 6px 25px 6px 30px;
    background: url("../img/all/search.png") 10px no-repeat;
    background-size: auto;
}
.quiz .quizBody {
    display: inline-block;
    width: 100%;
    margin: 20px 0;
}
.quiz .quizBody .answers {
    float: left;
    width: 70%;
    padding-left: 40px;
}
.quiz .quizBody .answers li .option {
    border-width: 0.35px;
    border-color: rgb(134, 134, 134);
    border-style: solid;
    border-radius: 14px;
    background-color: rgb(255, 255, 255);
    font-size: 10.15px;
    width: 100%;
    color: #545454;
    text-align: left;
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
/* .quiz .quizBody .answers li .option input {
    appearance: none;
} */
.quiz .quizBody .answers li .option label {
    width: 100%;
    cursor: pointer;
    padding: 8px 25px;
    font-size: 10.15px;
    color: #545454;
}
.quiz .quizBody .answers li .option:hover label {
    color: #fff;
}
.quiz .qustionTimer {
    float: right;
    width: 26%;
    border-width: 0.35px;
    border-color: rgb(134, 134, 134);
    border-style: solid;
    border-radius: 14px;
    background-color: rgb(255, 255, 255);
    padding: 15px 15px;
    font-size: 10.5px;
    color: #545454;
    font-weight: 600;
}
.quiz .qustionTimer span:first-of-type {
    padding-left: 15px;
    background: url("../img/all/stopwatch.png") left no-repeat;
    background-size: auto;
    display: block;
    margin-bottom: 5px;
}
.quiz .qustionTimer time {
    color: var(--secondColor);
}
.quiz .qustionTimer h2 {
    font-size: 10.5px;
    color: #545454;
    margin-bottom: 5px;
    font-weight: 600;
}
.quiz .questionBadge {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 7px 5px;
}

.quiz .questionBadge li {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background-color: #9f9f9f;
    display: grid;
    place-items: center;
    font-size: 9.1px;
    color: #545454;
}
.quiz .questionBadge li.checkd,
.quiz .questionBadge li:hover {
    background-color: rgb(225, 225, 225);
}

.quiz .quizBody .answers li .option:hover {
    background-color: var(--mainColor);
    color: #fff;
}
.quiz .quizBody .answers li .option.correct,
.quiz .questionBadge li.correct {
    background-color: #a5f1a9;
    border: 1px solid transparent;
}
.quiz .quizBody .answers li .option.wrong,
.quiz .questionBadge li.wrong {
    background-color: #ffb3a6;
    border: 1px solid transparent;
}
.quiz .quizFooter {
    padding-left: 40px;
}
.quiz .quizFooter .nextPrev {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 70%;
    margin-bottom: 25px;
}
.quiz .quizFooter .button {
    width: 162px;
    height: 33px;
    border-radius: 16px;
    background-color: rgb(8, 108, 171);
    font-size: 8.87px;
    font-weight: 600;
    border: none;
    color: #fff;
    display: grid;
    place-items: center;
}
.quiz .quizFooter .button:hover {
    background-color: rgb(8, 108, 171) !important;
    color: #fff !important;
}
.quiz .quizFooter #prevQuestion {
    background-color: #fff;
    border: 1px solid rgb(8, 108, 171);
    color: rgb(8, 108, 171);
}
.quiz .quizFooter #prevQuestion.hide,
.quiz #underpreviewBtn.hide,
.quiz #submit.hide {
    display: none;
}
.quiz .quizBody .answers li:last-of-type .option {
    margin-bottom: 0;
}

.quiz .explanationContainer {
    padding-left: 40px;
    margin-top: 40px;
    visibility: hidden;
    opacity: 0;
    height: 0;
}
.quiz .explanationContainer.active {
    visibility: visible;
    opacity: 1;
    height: auto;
}
.quiz .explanationContainer h2 {
    font-size: 11.55px;
    color: #545454;
    margin-bottom: 20px;
    font-weight: 600;
}
.quiz .explanation {
    padding: 35px 25px;
    border-width: 0.35px;
    border-color: rgb(134, 134, 134);
    border-style: solid;
    border-radius: 14px;
    background-color: rgb(255, 255, 255);
}
.quiz .explanation p {
    font-size: 10.5px;
    color: #676767;
}

.studyMode .questionSubject.subjectTree .topics,
.studyMode .questionSubject.subjectTree .lecture {
    display: none;
}
.studyMode .questionSubject.subjectTree .questionSubjectsContainer {
    grid-template-columns: 1fr;
}
.studyMode
    .questionSubject.subjectTree
    .questionSubjectsContainer
    span.subjectQuestionNumer {
    float: right;
    margin-bottom: 0;
    color: #858585;
    font-size: 11.2px;
}

/********************************************** quiz **************************************************/

/********************************************** gsap  **************************************************/
.overlay {
    display: none;
}
/* .overlay {
    position: absolute;
    width: 100%;
    height: 100vh;
    background: var(--mainColor);
    top: 0%;
    left: 0%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9;
}

.overlay h1 {
    font-size: 100px;
    letter-spacing: 20px;
    color: #fff;
}

.overlay span {
    font-size: 30px;
    letter-spacing: 3px;
    color: #fff;
    max-width: 70%;
    margin: 0 auto;
    text-align: center;
} */

/* .overlay {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    display: flex;
}

.layer {
    background-color: var(--mainColor);
}

.layer-1 {
    flex: 1;
}

.layer-2 {
    flex: 1;
}

.layer-3 {
    flex: 1;
} */
/********************************************** gsap  **************************************************/



.hero {
    position: relative;
    /* height: 100vh; */
    overflow: hidden;
}

.hero .bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* background: rgba(0, 0, 0, 0.5); */
    z-index: 0;
}
.hero::before {
    content: "";
    position: absolute;
    width: 780px;
    height: 750px;
    border-radius: 50%;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 9.13px 1.87px rgba(86, 86, 86, 0.09);
    background-image: linear-gradient(126deg, #049c4c 0%, #5abf8c 100%);
    background: linear-gradient(135deg, #049c4c 14%, #5abf8c  100%);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
    z-index: 2;
    top: -50%;
    left: -10%;
    box-shadow: rgb(38, 57, 77) 0px 10px 25px -10px;
}

.hero .text {
    position: relative;
    z-index: 3;
    color: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    min-height: 500px;
    padding: 0 4rem;

    padding-bottom: 6rem;

}

.hero .text h2 {
    color: #fff;
    font-size: 40px;
    font-weight: 600;
}
.hero .text p {
    color: #fff;
    max-width: 40%;
    text-align: justify;
    font-size: 14px;
    line-height: 1.6;
    max-height: 250px;
    overflow-y: hidden;
}

.hero .text a {
    display: block;
    width: max-content;
    padding: 10px 30px;
    border-radius: 12px;
    background-color:#ffff;
    color: #0f8f50;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
}

.hero .text a:hover {
    background-color: #1d1d1d;
    color:#fff;
}


.site_header{
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.site_header .navbar-light .navbar-nav .nav-link {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 0 20px;

}

.site_header .navbar-light .navbar-nav .nav-link:hover {
    color: var(--mainColor);
}

.site_header .social_icons {
    display: flex;
    align-items: center;
    gap: 10px;
}
.site_header .social_icons a {
    color: #fff;
    font-size: 18px;
}
.site_header .social_icons a:hover {
    color: var(--mainColor);
}
.col-md-8.footer_menu li a.active,
.site_header .navbar-light .navbar-nav a.active {
    color: var(--mainColor);
}
.site_header {
    padding: 10px 0 !important;
}