@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

@font-face {
    font-family: 'ArabicFont';
    src: url('../fonts/arabic.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

.number {
    font-family: 'Montserrat', sans-serif !important;
}

:root {
    --DarkColor: #22404d;
    --MainColor: #285f74;
    --ForthColor: #008b9c;
    --SubColor: #00a0af;
    --ThirdColor: #00c0ca;
    --AssetsColor: #28708B;
    --YallowColor: #e3e24f;
}

* {
    box-sizing: border-box !important;


}

.ar_class {
    box-sizing: border-box !important;
    font-family: ArabicFont;
}

.en_class {
    box-sizing: border-box !important;
    font-family: Montserrat;
}

.fr_class {
    box-sizing: border-box !important;
    font-family: Montserrat;
}

a {
    text-decoration: none;
}

/* Scroll bar */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--SubColor);
    border-radius: 6px;
    border: 3px solid #fff;
}

::-webkit-scrollbar-track {
    background: #ecf0f1;
    border-radius: 6px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
}

.mt-1 {
    margin-top: 1rem;
}

.mt-2 {
    margin-top: 2rem;
}

.mt-3 {
    margin-top: 3rem;
}

.mt-4 {
    margin-top: 4rem;
}

.mt-5 {
    margin-top: 5rem;
}

.mb-1 {
    margin-bottom: 1rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

.mb-3 {
    margin-bottom: 3rem;
}

.mb-4 {
    margin-bottom: 4rem;
}

.mb-5 {
    margin-bottom: 5rem;
}

.m-inline-1 {
    margin-inline: 1rem;
}

.m-inline-2 {
    margin-inline: 2rem;
}

.m-inline-3 {
    margin-inline: 3rem;
}

.m-inline-4 {
    margin-inline: 4rem;
}

.p-1 {
    padding: 1rem;
}

.p-2 {
    padding: 2rem;
}

.p-3 {
    padding: 3rem;
}

.p-4 {
    padding: 4rem;
}

.p-5 {
    padding: 5rem;
}


.w-100 {
    width: 100%;
}

.w-85 {
    width: 85%;
}

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

.w-25 {
    width: 25%;
}

.w-49 {
    width: 49%;
}

.w-50 {
    width: 50%;
}


.bg-w {
    background-color: white;
}

.bg-dark {
    background-color: var(--SubColor);
}

.bg-sub {
    background-color: var(--SubColor);
}

.bg-Forth {
    background-color: var(--ForthColor);
}

.bg-main {
    background-color: var(--MainColor);
}


.bg-assets {
    background-color: var(--AssetsColor);
}

.h-100 {
    height: 100%;
}

.min-h-100 {
    min-height: 100px;
}

.min-h-200 {
    min-height: 200px;
}

.min-h-400 {
    min-height: 400px;
}

.darkborder {
    border: 3px solid var(--DarkColor);
    padding: 1rem;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

.border-right {
    border-right: 5px solid var(--SubColor);
}



.d-block {
    display: block;
}

.flex-1 {
    flex: 1;
}


.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-between {
    display: flex;
    justify-content: space-between;
}

.flex-around {
    display: flex;
    justify-content: space-around;
}

.fw-b {
    font-weight: 600;
}

.fw-xb {
    font-weight: 700;
}

.fw-400 {
    font-weight: 400;
}

.f-sm {
    font-size: 18px;
}

.f-md {
    font-size: 22px;
}

.f-lg {
    font-size: 28px;
}

.f-xlg {
    font-size: 32px;
}

.f-xxlg {
    font-size: 40px;
}

.text-dark {
    color: var(--DarkColor);
}

.text-sub {
    color: var(--SubColor);
}

.text-white {
    color: white;
}

.text_yellow {
    color: var(--YallowColor);
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.hr-sub {
    border-color: var(--SubColor);
}


/* Defult Start */

body,
html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden !important;
}

#resizable {
    width: 1920px;
    height: 1080px;
    text-align: center;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    overflow: hidden !important;
}

.centerpage {
    width: 1920px;
    height: 1080px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    overflow: hidden !important;
}

/* Shapes */
.upshape {
    position: absolute;
    top: 0;
    left: 0;
}

.upshape img {
    width: 519px;
}

.downshape {
    position: absolute;
    bottom: -10px;
    right: 0;
}

.downshape img {
    width: 319px;
}



.bodyupshape {
    position: absolute;
    top: 0;
    left: 0;
}

.bodyupshape img {
    width: 17vw;
}


.bodydownshape {
    position: absolute;
    bottom: -10px;
    right: 0;
}

.bodydownshape img {
    width: 15vw;
}

/* Defult End */

/*Sign in page*/

.sign_in .logo {
    position: absolute;
    top: 5%;
}

.sign_in .logo img {
    width: 370px;
}

.sign_in .heading {
    position: absolute;
    top: 18%;
    font-size: 60px;
    font-weight: 700;
    color: var(--DarkColor);
}

.sign_in .main {
    width: 98%;
    height: 72%;
    position: absolute;
    top: 27%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.sign_in .main .leftside,
.sign_in .main .rightside {
    width: 27%;
    height: 55%;
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
}

.sign_in .main .centerside {
    height: 90%;
    width: 40%;
    border: 1px solid #c2c4c4;
    border-radius: 35px;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    -ms-border-radius: 35px;
    -o-border-radius: 35px;
}

.sign_in .main .leftside .card,
.sign_in .main .rightside .card {
    width: 49%;
    height: 49%;
    border: 1px solid #c2c4c4;
    border-radius: 35px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-evenly;
    padding-left: 25px;
}

.sign_in .main .leftside .card img,
.sign_in .main .rightside .card img {
    width: 70px;
    height: 60px;
    object-fit: contain;
}

.sign_in .main .leftside .card .cardname,
.sign_in .main .rightside .card .cardname {
    color: var(--DarkColor);
    font-weight: 500;
    font-size: 25px;
    text-align: left;
}

.sign_in .main .leftside .card .button button,
.sign_in .main .rightside .card .button button {
    background-color: var(--DarkColor);
    color: var(--YallowColor);
    font-size: 16px;
    font-weight: 600;
    padding: 10px 20px;
    border: none;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    cursor: pointer;
}

.sign_in .main .leftside .card.social_media {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    padding-left: 0;
    align-items: center;
    justify-content: center;
    gap: 13%;
    align-content: center;
}

.sign_in .main .leftside .card.social_media img {
    width: 50px;
    cursor: pointer;
}

.sign_in .main .rightside .card.CAMPUS {
    padding-left: 0;
    align-items: center;
}

.sign_in .main .rightside .card.CAMPUS .icon {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
}

.sign_in .main .rightside .card.CAMPUS img {
    width: 60px;
    cursor: pointer;
}

.sign_in .main .centerside .singin_heading {
    position: relative;
    text-align: center;
    font-size: 45px;
    color: var(--DarkColor);
    font-weight: 500;
    line-height: 1.5;
    padding: 55px 0px;
}

.sign_in .main .centerside .singin_heading span:nth-child(2) {
    font-size: 20px;
    color: var(--MainColor);
    font-weight: 400;
}

.sign_in .main .centerside .form form .inputs {
    padding: 30px 0px;
}

.sign_in .main .centerside .form form .inputs div {
    position: relative;
}

.sign_in .main .centerside .form form .inputs input {
    width: 50%;
    height: 60px;
    outline: none;
    border: none;
    background: #dce0e2;
    margin: 10px 0px;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    padding-left: 50px;
    font-size: 18px;
}

.sign_in .main .centerside .form form input::placeholder {
    color: #9a9a9b;
    font-size: 18px;
}

.sign_in .main .centerside .form .inputs img {
    width: 60px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    left: 22%;
}

.sign_in .main .centerside .form .formaction {
    display: flex;
    justify-content: space-around;
    margin: 25px 0px;
    color: var(--DarkColor);
    font-size: 18px;
}

.sign_in .main .centerside .form .formaction .remember {
    display: flex;
    align-items: center;
}

.sign_in .main .centerside .form .formaction .remember input[type="checkbox"] {
    width: 1.5em;
    height: 1.5rem;
    margin-right: 5px;
    accent-color: var(--ForthColor);
    cursor: pointer;
}

.sign_in .main .centerside .form .submit {
    margin: 75px 0px;
}

.sign_in .main .centerside .form .submit input {
    background-color: var(--DarkColor);
    color: white;
    font-weight: 800;
    width: 50%;
    font-size: 25px;
    padding: 10px 0px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    cursor: pointer;
    border: none;
}

.sign_in .main .centerside .form .forgot a {
    color: var(--DarkColor);
    font-style: italic;
}

.sign_in .translation_button {
    position: absolute;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--DarkColor);
    color: white;
    border: none;
    padding: 0px;
    border-radius: 10px;
    cursor: pointer;
    width: 70px;
    height: 70px;
    text-align: center;
    font-size: 24px;
    right: 10%;
    top: 60px;
}

.sign_in .translation_button:focus {
    outline: none;

}


.sign_in .translation_button::after {
    content: '▼';
    position: absolute;
    right: 10px;
    width: 20px;
    pointer-events: none;
}

option {
    background-color: #fff;
    color: var(--DarkColor);
    font-size: 16px;
    width: 150px;
}

.sign_in .alert {
    padding: .65rem 1.25rem;
    font-size: 20px;
    width: 70%;
    margin: auto;
    border-radius: 0.2rem;
    -webkit-border-radius: 0.2rem;
    -moz-border-radius: 0.2rem;
    -ms-border-radius: 0.2rem;
    -o-border-radius: 0.2rem;
}


.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 3px solid #f5c6cb;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 3px solid #c3e6cb;
}



/* Sign in End */

/* Learn More Start */

.learnmore {
    background-color: var(--DarkColor);
}

.learnmore .main {
    height: 100%;
    width: 95%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.learnmore .video {
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.learnmore .video iframe {
    width: 80%;
    height: 50%;
}

.learnmore .video button {
    background-color: var(--ThirdColor);
    color: var(--DarkColor);
    font-size: 30px;
    font-weight: 600;
    border: none;
    padding: 10px 60px;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    cursor: pointer;
}

.learnmore .icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    width: 200px;
    height: 200px;
    background-color: white;
    border: 5px solid var(--SubColor);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    align-items: center;
    justify-content: center;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.learnmore .icon img {
    width: 50%;
}

.learnmore .desc {
    position: relative;
    width: 25%;
    background-color: var(--SubColor);
    color: white;
    font-size: 24px;
    padding: 25px;
    border-radius: 35px;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    -ms-border-radius: 35px;
    -o-border-radius: 35px;
}

.learnmore .desc .info {
    margin-top: 90px;
    max-height: 600px;
    overflow: auto;
}

.learnmore .desc .heading {
    font-size: 35px;
    color: var(--DarkColor);
    font-weight: 600;
}

.learnmore .desc .about {
    margin: 25px 0px;
    padding: 25px;
}

.learnmore .desc .learnbutton {
    margin: 25px 0px;
}

.learnmore .desc .learnbutton button {
    background-color: white;
    color: var(--SubColor);
    font-size: 30px;
    font-weight: 600;
    border: none;
    padding: 10px 25px;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    cursor: pointer;
}

/* Learn More End */

/*Introduction*/
/* Welcome Page Start */

.welcome .main {
    width: 72%;
    position: absolute;
    top: 5%;
    height: 90%;
}

.welcome .headingandstart {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.welcome .headingandstart span {
    font-size: 92px;
    font-weight: 800;
    color: var(--SubColor);
}

.welcome .headingandstart button {
    border: none;
    cursor: pointer;
    border-radius: 25px;
    font-size: 35px;
    font-weight: 600;
    background-color: var(--SubColor);
    color: white;
    padding: 10px 85px;
    -webkit-border-radius: 35px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

.welcome .des {
    font-size: 30px;
    color: var(--DarkColor);
    text-align: left;
    margin: 25px 0px;
}

.welcome .cards {
    position: relative;
    height: 77%;
}

.welcome .cards .card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--DarkColor);
    text-align: left;
    padding: 25px;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    position: absolute;
}

.welcome .cards .card .heading {
    color: var(--YallowColor);
    font-weight: 600;
    font-size: 25px;
}

.welcome .cards .card .info {
    color: white;
    font-size: 21px;
    margin-top: 15px;
}

.welcome .cards .card:nth-child(1) {
    width: 38%;
    height: 20%;
}

.welcome .cards .card:nth-child(2) {
    width: 38%;
    top: 22%;
    height: 50%;
}

.welcome .cards .card:nth-child(3) {
    width: 58%;
    left: 41%;
    height: 47%;
}

.welcome .cards .card:nth-child(4) {
    width: 58%;
    top: 49%;
    left: 41%;
}

.welcome .cards .card:nth-child(5) {
    bottom: 5%;
    left: 0;
    right: 0;
    text-align: center;
    background-color: var(--SubColor);
    color: white;
    font-weight: 500;
    font-size: 27px;
}

.welcome .cards .card .h_white {
    color: white !important;
}

.welcome .alert {
    position: relative;
    z-index: 2;
    padding: 20px;
    background-color: #f44336;
    color: white;
    width: 50%;
}

.welcome .closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 30px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.welcome .closebtn:hover {
    color: black;
}

/* Welcome Page End */

/* Student Part Start */

/* levels Page Start */

.levels_page .downshape img {
    width: auto;
}

.levels_page .logo {
    position: absolute;
    top: 5%;
    left: 5%;
}

.levels_page .logo img {
    width: 700px;
}

.levels_page .homeandcommunity {
    position: absolute;
    top: 5%;
    right: 2%;
}

.levels_page .homeandcommunity button {
    width: 300px;
    border: none;
    cursor: pointer;
    border-radius: 25px;
    font-size: 30px;
    font-weight: 600;
    background-color: var(--SubColor);
    color: white;
    padding: 10px 0px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

.levels_page .Progress {
    font-size: 19px;
    text-align: left;
    position: absolute;
    right: 2%;
    top: 13%;
    font-weight: 800;
    color: var(--DarkColor);
    width: 18%;
}

.levels_page .Progress .container {
    background-color: #d5d7d8;
    border-radius: 15px;
    margin-top: 15px;
    outline: 4px solid #c2c3c4;
}

.levels_page .Progress .container div {
    height: 20px;
    background-color: var(--ThirdColor);
    color: white;
    font-size: 20px;
    border-radius: 15px;
    width: 10%;
}

.levels_page .cards {
    position: absolute;
    top: 32%;
    left: 5%;
    width: 90%;
    overflow-x: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.levels_page .card {
    position: relative;
    background-color: var(--DarkColor);
    width: 670px;
    min-width: 670px;
    height: 530px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    padding: 35px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 0px 10px;
    margin-bottom: 15px;
}

.levels_page .card .lock {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}

.levels_page .card .lock img {
    width: 100%;
    height: 100%;
}

.levels_page .card:last-child {
    margin-right: 16%;
}

.levels_page .card .cardname {
    font-size: 45px;
    font-weight: 500;
    color: var(--SubColor);
}

.levels_page .card .cardname span:nth-child(1) {
    color: var(--YallowColor);
}

.levels_page .card .des {
    color: white;
    font-size: 28px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.levels_page .card .des img {
    width: 100px;
}

.levels_page .card .des .info {
    margin-left: 20px;
}

.levels_page .card .click button {
    background-color: var(--SubColor);
    color: white;
    font-size: 25px;
    font-weight: 600;
    border: none;
    padding: 10px 60px;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    cursor: pointer;
}

/*completed*/
.levels_page .card.completed {
    background-color: var(--ThirdColor);
}

.levels_page .card.completed * {
    color: white !important;
}

.levels_page .card.completed button {
    background-color: white;
    color: var(--ThirdColor) !important;
}

.levels_page .card.completed img {
    filter: brightness(0) invert(1);
}

/* levels Page End */

/* Sections Page Start*/

.sections_page .homeandcommunity {
    position: absolute;
    top: 5%;
    right: 2%;
}

.sections_page .homeandcommunity button {
    width: 300px;
    border: none;
    cursor: pointer;
    border-radius: 25px;
    font-size: 30px;
    font-weight: 600;
    background-color: var(--DarkColor);
    color: var(--ForthColor);
    padding: 10px 0px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

.sections_page .heading {
    position: absolute;
    top: 17%;
    text-align: left;
    color: var(--DarkColor);
    line-height: 1.5;
}

.sections_page .heading span:nth-child(1) {
    font-size: 90px;
    font-weight: 600;
}

.sections_page .heading span:nth-child(2) {
    font-size: 35px;
}

.sections_page .level {
    transform: rotate(90deg);
    transform-origin: left center;
    position: absolute;
    top: 25%;
    left: 4%;
    font-size: 66px;
    color: var(--ThirdColor);
    font-weight: 500;
    font-style: italic;
}

.sections_page .level span:nth-child(1) {
    color: var(--DarkColor);
}

.sections_page .cards {
    position: absolute;
    top: 43%;
    width: 85%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

.sections_page .card {
    background-color: var(--DarkColor);
    width: 410px;
    height: 240px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    color: white;
    font-size: 35px;
    font-weight: 600;
    border-radius: 35px;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    -ms-border-radius: 35px;
    -o-border-radius: 35px;
    text-align: left;
    cursor: pointer;
}

.sections_page .card .icon img {
    width: 90px;
    height: 80px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(97%) sepia(39%) saturate(4294%) hue-rotate(325deg) brightness(123%) contrast(78%);
    -webkit-filter: brightness(0) saturate(100%) invert(97%) sepia(39%) saturate(4294%) hue-rotate(325deg) brightness(123%) contrast(78%);
}

.sections_page .name {
    width: 50%;
}

/*Locked and completed*/
.sections_page .locked {
    background-color: #bcbfc1;
    cursor: default;
}

.sections_page .locked * {
    opacity: 0.5;
}

.sections_page .locked img {
    filter: none !important;
    -webkit-filter: none !important;
}

.sections_page .completed {
    background-color: var(--ForthColor);
}

.sections_page .completed img {
    filter: none !important;
    -webkit-filter: none !important;
}

/* well done */

.sections_page .well_done {
    width: 70%;
    height: 75%;
    background-color: #22404de1;
    border: 4px solid var(--YallowColor);
    border-radius: 50px;
    position: absolute;
    z-index: 2;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* display: none; */
}

.sections_page .well_done img {
    width: 180px;
    margin: 10px 0px;
}

.sections_page .well_done span {
    margin: 10px 0px;
    color: var(--ThirdColor);
    font-size: 60px;
    font-weight: 600;
}

.sections_page .well_done button {
    margin: 10px 0px;
    border: none;
    cursor: pointer;
    border-radius: 25px;
    font-size: 30px;
    font-weight: 600;
    background-color: white;
    color: var(--DarkColor);
    padding: 10px 50px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

.sections_page .well_done .exit {
    position: absolute;
    width: 50px;
    right: 20px;
    top: 20px;
    cursor: pointer;
}

/* Sections Page End*/

/* Video Page Start */

.video_page {
    background-color: var(--DarkColor);
}

.video_page .heading {
    position: absolute;
    top: 5%;
    left: 5%;
    color: white;
    font-size: 50px;
    font-weight: 600;
}

.video_page .main {
    position: absolute;
    top: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: 75%;
    height: 70%;
}

.video_page .video {
    height: 90%;
    width: 90%;
}

.video_page .video iframe {
    width: 100%;
    height: 100%;
}

.video_page button {
    margin-top: 25px;
    background-color: var(--ThirdColor);
    color: white;
    font-size: 30px;
    font-weight: 600;
    border: none;
    padding: 10px 50px;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    cursor: pointer;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.video_page .disabled {
    background-color: #cccccc !important;
    color: #666666 !important;
    cursor: not-allowed !important;
}

/* Video Page End */

/* pre_requisite_page Start */
.pre_requisite_page {
    background-color: var(--DarkColor);
}

.pre_requisite_page .heading {
    position: absolute;
    top: 3%;
    left: 3%;
    font-size: 90px;
    font-weight: 600;
    color: var(--SubColor);
    text-align: left;
}

.pre_requisite_page .card {
    padding: 25px;
    position: absolute;
    background-color: var(--SubColor);
    bottom: 2%;
    left: 3%;
    width: 21%;
    height: 65%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}

.pre_requisite_page .card .name {
    color: var(--DarkColor);
    font-size: 23px;
    font-weight: 600;
    text-align: left;
}

.pre_requisite_page .card .icons {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.pre_requisite_page .card .icons img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.pre_requisite_page .card .Learning_objectives {
    font-size: 20px;
    color: var(--DarkColor);
    text-align: left;
    font-weight: 600;
}

.pre_requisite_page .objectives .obj {
    position: relative;
    margin: 10px 0px;
}

.pre_requisite_page .objectives .obj .info {
    text-align: left;
    background-color: white;
    border: 2px solid var(--DarkColor);
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    font-size: 14px;
    padding: 10px 0px;
    padding-left: 70px;
    padding-right: 10px;
}

.pre_requisite_page .objectives .obj .obj_icon {
    position: absolute;
    top: 50%;
    left: 0;
    height: 90px;
    width: 90px;
    transform: translate(-27%, -50%);
    -webkit-transform: translate(-27%, -50%);
    -moz-transform: translate(-27%, -50%);
    -ms-transform: translate(-27%, -50%);
    -o-transform: translate(-27%, -50%);
    background-color: white;
    border: 2px solid var(--DarkColor);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.pre_requisite_page .objectives .obj .obj_icon img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

.pre_requisite_page .playvideo button {
    margin-top: 25px;
    background-color: var(--DarkColor);
    color: var(--YallowColor);
    font-size: 20px;
    font-weight: 600;
    border: none;
    padding: 10px 60px;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    cursor: pointer;
}

.pre_requisite_page .pm {
    left: 25%;
    background-color: var(--ForthColor);
    height: auto;
    bottom: 22%;
}

.pre_requisite_page .pm .name {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pre_requisite_page .pm .objectives .obj .obj_icon {
    width: 60px;
    height: 60px;
}

.pre_requisite_page .pm .name img {
    width: 70px;
}

.pre_requisite_page .pm .objectives .obj .info {
    font-size: 15px !important;
}

.pre_requisite_page .leadership {
    left: 48%;
    top: 1%;
    height: 77%;
}

.pre_requisite_page .leadership .objectives .obj .obj_icon {
    width: 70px;
    height: 70px;
}

.pre_requisite_page .card.leadership .icons img {
    width: 110px;
    height: auto;
}

.pre_requisite_page .Financial {
    left: 71%;
    width: 27%;
    height: 80%;
}

.pre_requisite_page .Financial .objectives .obj {
    position: relative;
    margin: 30px 0px;
}

.pre_requisite_page .Financial .objectives .obj .info {
    font-size: 17px !important;
    min-height: 60px;
    display: flex;
    align-items: center;
}

.pre_requisite_page .Financial .objectives .obj .obj_icon {
    width: 70px;
    height: 70px;
}

.pre_requisite_page .rate {
    font-size: 75px;
    font-weight: 600;
    color: var(--YallowColor);
    bottom: 10%;
    position: absolute;
}

.pre_requisite_page .submition_done {
    bottom: 3%;
    position: absolute;
}

.pre_requisite_page .submition_done button {
    margin-top: 25px;
    background-color: var(--ThirdColor);
    color: white;
    font-size: 30px;
    font-weight: 600;
    border: none;
    padding: 10px 60px;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    cursor: pointer;
}

/* pre_requisite_page End */

/* Video Page Start */

.resources {
    background-color: var(--DarkColor);
}

.resources .heading {
    position: absolute;
    top: 5%;
    left: 5%;
    color: white;
    font-size: 50px;
    font-weight: 600;
}

.resources .main {
    position: absolute;
    top: 20%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 60%;
}

.resources .card {
    width: 30%;
    height: 62%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.resources .video {
    height: 69%;
    width: 95%;
}

.resources .video iframe {
    width: 100%;
    height: 100%;
}

.resources button {
    margin-top: 10px;
    margin-bottom: 20px;
    background-color: white;
    color: var(--ForthColor);
    font-size: 29px;
    font-weight: 600;
    border: none;
    padding: 10px 50px;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    cursor: pointer;
}

.resources button div {
    display: flex;
    width: 400px;
    align-items: center;
    justify-content: space-around;
}

.resources button img {
    width: 35px;
}

.resources .done {
    position: absolute;
    bottom: 3%;
}

.resources .done button {
    margin: 0 !important;
    font-size: 35px;
    padding: 10px 70px;
}

/* Video Page End */

/* masterclasses Page Start */

.masterclasses_page .heading {
    position: absolute;
    top: 5%;
    left: 18%;
    font-size: 80px;
    text-align: left;
    color: var(--DarkColor);
    font-weight: 700;
}

.masterclasses_page .heading span:nth-child(2) {
    color: var(--SubColor);
}

.masterclasses_page .homeandcommunity {
    position: absolute;
    top: 5%;
    right: 2%;
}

.masterclasses_page .homeandcommunity button {
    width: 300px;
    border: none;
    cursor: pointer;
    border-radius: 25px;
    font-size: 30px;
    font-weight: 600;
    background-color: var(--DarkColor);
    color: var(--ForthColor);
    padding: 10px 0px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

.masterclasses_page .main {
    position: absolute;
    top: 28%;
    width: 82%;
}

.masterclasses_page .info {
    font-size: 38px;
    color: var(--DarkColor);
    text-align: left;
}

.masterclasses_page .cards {
    width: 100%;
    height: 350px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.masterclasses_page .card {
    margin-top: 25px;
    width: 45%;
    height: 90px;
    color: white;
    background-color: var(--SubColor);
    font-size: 24px;
    display: flex;
    padding: 0px 30px;
    align-items: center;
    justify-content: space-between;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    cursor: pointer;
}

.masterclasses_page .card img {
    width: 40px;
}

.masterclasses_page .footer {
    margin-top: 50px;
    font-size: 22px;
    text-align: left;
    background-color: var(--DarkColor);
    color: white;
    padding: 10px 50px;
    border-radius: 80px;
    -webkit-border-radius: 80px;
    -moz-border-radius: 80px;
    -ms-border-radius: 80px;
    -o-border-radius: 80px;
}

.masterclasses_page.vol_master .homeandcommunity button {
    color: var(--YallowColor);
}

.masterclasses_page.vol_master .card {
    background-color: var(--DarkColor);
    color: var(--YallowColor);
}

/* masterclasses Page End */

/* masterclass Page Start */

.masterclass_page {
    background: url(../images/master_bg.png) var(--DarkColor) center;
    background-repeat: repeat-x;
    background-size: contain;
}


.masterclass_page .back {
    position: absolute;
    top: 5%;
    right: 1%;
}

.masterclass_page .back button {
    padding: 10px 60px;
    border: none;
    cursor: pointer;
    border-radius: 25px;
    font-size: 38px;
    font-weight: 600;
    background-color: var(--ThirdColor);
    color: var(--DarkColor);
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

.masterclass_page .homeandcommunity {
    position: absolute;
    top: 5%;
    right: 2%;
}

.masterclass_page .homeandcommunity button {
    width: 300px;
    border: none;
    cursor: pointer;
    border-radius: 25px;
    font-size: 30px;
    font-weight: 600;
    background-color: var(--ThirdColor);
    color: var(--DarkColor);
    padding: 10px 0px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

.masterclass_page .main {
    width: 85%;
    padding-top: 2.5%;
}


.masterclass_page .heading {
    color: var(--SubColor);
    font-weight: 700;
    font-size: 65px;
    text-align: left;
    line-height: 2.7;
    width: 66%;
}

.masterclass_page .heading span:nth-child(1) {
    line-height: 1;
}

.masterclass_page .heading span:nth-child(2) {
    font-size: 30px;
    color: white;
    font-weight: 400;
}

.masterclass_page .learning_objectives {
    margin-top: 3%;
}

.masterclass_page .learning_objectives .info {
    text-align: left;
    color: white;
    font-size: 33px;
    margin-bottom: 3%;
}

.masterclass_page .learning_objectives .cards {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-around;
}

.masterclass_page .learning_objectives .cards .card {
    position: relative;
    background: white;
    padding: 35px 25px;
    padding-left: 100px;
    width: 40%;
    max-height: 150px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    font-size: 19px;
    color: var(--DarkColor);
    text-align: left;
}

.masterclass_page .learning_objectives .cards .card .carddes {
    display: block;
    overflow: auto;
    max-height: 100px;
}

.masterclass_page .learning_objectives .cards .card .cardimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 25px;
    border: 5px solid var(--DarkColor);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.masterclass_page .learning_objectives .cards .card .cardimg img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.masterclass_page .Sessions .info {
    text-align: left;
    color: white;
    font-size: 37px;
    margin: 2% 0;
    font-weight: 600;
}

.masterclass_page .Sessions .Session {
    width: 18%;
    text-align: left;
}

.masterclass_page .Sessions .Session {
    padding: 15px;
    border: 5px solid var(--SubColor);
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    display: flex;
    flex-direction: column;
    height: 450px;
    justify-content: space-between;
}

.masterclass_page .Sessions .Session .SessionId {
    color: var(--YallowColor);
    font-weight: 600;
}

.masterclass_page .Sessions .Session hr {
    border-color: #008b9c;
    width: 100%;
}

.masterclass_page .Sessions .Session .SessionName {
    color: white;
    font-weight: 600;
    font-size: 18px;
    margin: 5% 0%;
}

.masterclass_page .Sessions .Session .SessionInfo {
    color: white;
    margin: 20% 0%;
    font-size: 15px;
    height: 180px;
    overflow: auto;
}

.masterclass_page .playvideo {
    text-align: center;
}

.masterclass_page .playvideo button {
    background-color: white;
    color: var(--DarkColor);
    font-size: 20px;
    font-weight: 600;
    border: none;
    padding: 7px 30px;
    font-weight: 800;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    cursor: pointer;
}

.masterclass_page .locked .playvideo button {
    background-color: #ccccc8 !important;
    color: #b5b5b4 !important;
    cursor: default;
}

.masterclass_page .Sessions .cards {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* well done */

.masterclass_page .well_done {
    width: 70%;
    height: 75%;
    background-color: #22404de1;
    border: 4px solid var(--YallowColor);
    border-radius: 50px;
    position: absolute;
    z-index: 2;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.masterclass_page .well_done img {
    width: 180px;
    margin: 10px 0px;
}

.masterclass_page .well_done span {
    margin: 10px 0px;
    color: var(--ThirdColor);
    font-size: 60px;
    font-weight: 600;
}

.masterclass_page .well_done button {
    margin: 10px 0px;
    width: 450px;
    border: none;
    cursor: pointer;
    border-radius: 25px;
    font-size: 30px;
    font-weight: 600;
    background-color: white;
    color: var(--DarkColor);
    padding: 10px 50px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

.masterclass_page .well_done .exit {
    position: absolute;
    width: 50px;
    right: 20px;
    top: 20px;
    cursor: pointer;
}

/* masterclass Page End */

/* mastervideo_page Page Start */

.mastervideo_page {
    background: url(../images/master_bg.png) var(--DarkColor);
    background-size: contain;
    background-repeat: repeat-x;
    background-position: center;
}

.mastervideo_page .heading {
    position: absolute;
    top: 10%;
    left: 5%;
    color: white;
    font-size: 50px;
    font-weight: 600;
}

.mastervideo_page .main {
    position: absolute;
    top: 24%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: 75%;
    height: 70%;
}

.mastervideo_page .video {
    height: 90%;
    width: 90%;
}

.mastervideo_page .video iframe {
    width: 100%;
    height: 100%;
}

.mastervideo_page button {
    width: 300px;
    border: none;
    cursor: pointer;
    border-radius: 25px;
    font-size: 30px;
    font-weight: 600;
    background-color: var(--ThirdColor);
    color: var(--DarkColor);
    padding: 10px 0px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    margin-inline: 0.2rem;
    margin-top: 2rem;

    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;

}

.mastervideo_page .disabled {
    background-color: #cccccc !important;
    color: #666666 !important;
    cursor: not-allowed !important;
}

.mastervideo_page .homeandcommunity {
    position: absolute;
    top: 5%;
    right: 2%;
    z-index: 2;
}

.mastervideo_page .homeandcommunity button {
    background-color: var(--DarkColor) !important;
    color: var(--SubColor) !important;
    border: 3px solid var(--SubColor);
}

/* Video Page End */

/* create company Page Start */

/* Sections Page Start*/

.sections_page .homeandcommunity {
    position: absolute;
    top: 5%;
    right: 2%;
}

.sections_page .homeandcommunity button {
    width: 300px;
    border: none;
    cursor: pointer;
    border-radius: 25px;
    font-size: 30px;
    font-weight: 600;
    background-color: var(--DarkColor);
    color: var(--ForthColor);
    padding: 10px 0px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

.sections_page .downshape {
    text-align: right;
}

.sections_page .downshape img {
    width: 40vw;
}

.sections_page .form {
    position: absolute;
    left: 8%;
    top: 10%;
    height: 78%;
    width: 40%;
}

.sections_page .form form {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
    text-align: left;
}

.sections_page .form div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sections_page .form .alert {
    font-size: 20px;
    padding: 12px;
    margin-top: 18px;
    border-radius: 8px;
}

.sections_page .form label {
    font-size: 44px;
    color: var(--DarkColor);
    font-weight: 500;
    margin-bottom: 20px;
}

.sections_page .form .in_border {
    color: var(--DarkColor);
    font-size: 35px;
    font-family: Montserrat !important;
    font-weight: 500;
    padding: 10px 20px;
    width: 80%;
    border: 2px solid var(--DarkColor);
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}


.sections_page .file-upload {
    position: relative;
    display: inline-block;
}

.sections_page .file-upload input[type="file"] {
    display: none;
}

.sections_page .file-upload label {
    display: flex;
    align-items: center;
    color: var(--DarkColor);
    cursor: pointer;
    font-size: 30px;
}

.sections_page .file-upload label img {
    width: 180px;
    height: 180px;
    margin-right: 20px;
    object-fit: contain;
}

.sections_page .submit {
    background: #f6f6f6;
    color: #d4d5d6;
    padding: 15px 25px;
    font-size: 30px;
    border: none;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    cursor: pointer;
}

.sections_page .form select {
    font-size: 25px !important;
}

.sections_page .form option {
    font-size: 22px !important;
}

.sections_page .requiered {
    color: #ee4052;
}

.sections_page .error-message {
    color: #ee4052;
    font-size: 16px;
    font-weight: 600;
    margin-top: 5px;
}

/* create company Page End */



/* sessions_page Start */


.sessions_page .homeandcommunity {
    position: absolute;
    top: 5%;
    right: 2%;
}

.sessions_page .homeandcommunity button {
    width: 300px;
    border: none;
    cursor: pointer;
    border-radius: 25px;
    font-size: 30px;
    font-weight: 600;
    background-color: var(--DarkColor);
    color: var(--ForthColor);
    padding: 10px 0px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

.sessions_page .heading {
    position: absolute;
    top: 5%;
    left: 5%;
    font-size: 96px;
    font-weight: 700;
    color: var(--DarkColor);
}

.sessions_page .cards {
    position: absolute;
    top: 20%;
    width: 90%;
    height: 75%;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    gap: 44px;
    justify-content: flex-start;
    padding: 1rem;
}

.sessions_page .card {
    background-color: var(--DarkColor);
    color: white;
    width: 23%;
    height: 230px;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    text-align: left;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 26px;
    font-weight: 600;
    font-style: italic;

}

.sessions_page .card.locked {
    background-color: #dae0e0;
    color: #cacdce;
}

.sessions_page .card.locked button {
    background-color: #b9b9ba;
    color: #cccccc;
}

.sessions_page .card.completed {
    background-color: var(--ThirdColor);
}

.sessions_page .card.completed button {
    color: var(--ThirdColor);
}

.sessions_page .button button {
    background-color: white;
    color: var(--DarkColor);
    font-size: 20px;
    border: none;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    padding: 5px 30px;
    font-weight: 600;
    font-style: italic;
    cursor: pointer;
}



/* sessions_page End */

.each_session_page {
    background-color: var(--DarkColor);
}

.each_session_page .homeandcommunity {
    position: absolute;
    top: 5%;
    right: 2%;
    z-index: 2;
}

.each_session_page .homeandcommunity button {
    width: 300px;
    border: none;
    cursor: pointer;
    border-radius: 25px;
    font-size: 30px;
    font-weight: 600;
    background-color: var(--DarkColor);
    outline: 3px solid var(--ForthColor);
    color: var(--ForthColor);
    padding: 10px 0px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    margin-inline: 0.2rem;
}




.each_session_page .mian {
    position: absolute;
    top: 7%;
    width: 90%;
    height: 91%;
    text-align: left;
}

.each_session_page .SessionOrderAndName {
    color: var(--YallowColor);
    font-size: 40px;
    font-weight: 500;
}

.each_session_page .SessionOrderAndName span:nth-child(2) {
    color: var(--SubColor);
    font-weight: 700;
}

.each_session_page .description {
    font-size: 27px;
    color: white;
    margin-top: 2rem;
}

.each_session_page .cards {
    margin-top: 6rem;
    display: flex;
    justify-content: space-between;
}

.each_session_page .card {
    position: relative;
    border: 5px solid white;
    padding: 20px;
    width: 30%;
    max-height: 25rem;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    padding-top: 5.5rem;
}

.each_session_page .card .img {
    position: absolute;
    left: 50%;
    top: 0%;
    transform: translate(-50%, -50%);
    background-color: var(--DarkColor);
    border: 5px solid white;
    border-radius: 50%;
    width: 9rem;
    height: 9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

/* .each_session_page .session_skills {
    background-color: #28708b;

}

.each_session_page .session_skills .img {
    background-color: #28708b;

} */

.each_session_page .card .img img {
    width: 4rem;
}

.each_session_page .heading {
    text-align: center;
    font-size: 29px;
    color: var(--YallowColor);
    font-weight: 500;
}

/* .each_session_page .card.Concepts,
.each_session_page .card.Concepts .img {
    background-color: var(--MainColor);
} */


.each_session_page .cards .points {
    margin-top: 0.5rem;
    color: white;
    font-size: 20px;
    max-height: 14rem;
    overflow: auto;
    padding: 12px;
}



.each_session_page .vidoes {
    width: 100%;
    height: 11rem;
    margin-top: 3rem;
    display: flex;
    justify-content: space-between;
    position: relative;
}

.each_session_page .video {
    width: 50%;
    height: 100%;
    background-color: var(--ForthColor);
    border-radius: 35px;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    -ms-border-radius: 35px;
    -o-border-radius: 35px;
}

.each_session_page .playicon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 5px solid white;
    width: 12rem;
    height: 12rem;
    background: linear-gradient(to right, var(--ForthColor), var(--SubColor));
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.each_session_page .playicon img {
    width: 5rem;
    margin-left: 1rem;
}

.each_session_page .video .content {
    width: 85%;
    height: 100%;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 20px;
}

.each_session_page .video.completed {
    background-color: var(--ThirdColor);
}

.each_session_page .video.lokced {
    background-color: var(--SubColor);

}

.each_session_page .video.lokced .content .watch button {
    background-color: #ccccc8 !important;
    color: #b5b5b4 !important;
    cursor: default;
}


.each_session_page .vidoes .video:nth-child(3) .content {
    float: right;
}

.each_session_page .watch {
    height: 80%;
    color: var(--YallowColor);
    font-size: 30px;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    white-space: nowrap;

}

.each_session_page .watch button {
    background-color: white;
    color: var(--ForthColor);
    font-size: 20px;
    border: none;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    padding: 5px 25px;
    font-weight: 700;
    cursor: pointer;

}

.each_session_page .video_points {
    color: white;
    font-size: 18px;
    max-height: 90%;
    overflow: auto;
    max-width: 70%;
    padding: 5px;
}

.each_session_page .well_done {
    width: 70%;
    height: 75%;
    background-color: #22404de1;
    border: 4px solid var(--YallowColor);
    border-radius: 50px;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* display: none; */
}

.each_session_page .well_done img {
    width: 180px;
    margin: 10px 0px;
}

.each_session_page .well_done span {
    margin: 10px 0px;
    color: var(--ThirdColor);
    font-size: 70px;
    font-weight: 800;
}

.each_session_page .well_done button {
    margin: 10px 0px;
    border: none;
    cursor: pointer;
    border-radius: 25px;
    font-size: 30px;
    font-weight: 600;
    background-color: white;
    color: var(--DarkColor);
    padding: 10px 50px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

.each_session_page .well_done .exit {
    position: absolute;
    width: 50px;
    right: 20px;
    top: 20px;
    cursor: pointer;
    z-index: 1;
}


/*vol*/

.each_session_page.vol_each_session_page .video {
    width: 47%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}


.each_session_page.vol_each_session_page .video:first-child {
    width: 26%;
    justify-content: flex-start;
    padding: 1rem;

}

.each_session_page.vol_each_session_page .playicon {
    position: absolute;
    width: 145px;
    height: 150px;
}

.each_session_page.vol_each_session_page .playicon img {
    width: 70px;
    height: 70px;
}

.each_session_page.vol_each_session_page .playicon {
    left: 26% !important;
}

.each_session_page.vol_each_session_page .playicon:nth-child(2) {
    left: 67% !important;
}

.each_session_page.vol_each_session_page .content {
    width: 75%;
}

.each_session_page.vol_each_session_page .vidoes {
    border-radius: 15px !important;
    -webkit-border-radius: 15px !important;
    -moz-border-radius: 15px !important;
    -ms-border-radius: 15px !important;
    -o-border-radius: 15px !important;
    overflow: hidden;
    background-color: var(--SubColor);
}



/* session page Start */



/* session page End */

/* Student Part End */

/* VOLANTER START */

/* levels Page Start */

.vol_levels_page .logo {
    position: absolute;
    top: 3%;
    left: 5%;
}

.vol_levels_page .logo img {
    width: 700px;
}

.vol_levels_page .homeandcommunity {
    position: absolute;
    top: 5%;
    right: 2%;
}

.vol_levels_page .homeandcommunity button {
    width: 300px;
    border: none;
    cursor: pointer;
    border-radius: 25px;
    font-size: 30px;
    font-weight: 600;
    background-color: var(--DarkColor);
    color: var(--ForthColor);
    padding: 10px 0px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

.vol_levels_page .cards {
    position: absolute;
    top: 26%;
    width: 100%;
    height: 67%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.vol_levels_page .cards .card {
    position: relative;
    width: 1225px;
    height: 191px;
    background: var(--DarkColor);
    color: white;
    font-size: 65px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    align-items: center;
}

.vol_levels_page .cards .card:nth-child(2) {
    align-self: flex-end;
    background-color: var(--MainColor);
}

.vol_levels_page .cards .card:nth-child(3) {
    background-color: #28708b;
}

.vol_levels_page .cards .card .cardname {
    width: 40%;
}

.vol_levels_page .cards .card .btn {
    margin-left: 10%;
}

.vol_levels_page .cards .card .btn button {
    background-color: white;
    color: var(--DarkColor);
    border: none;
    border-radius: 15px;
    padding: 7px 20px;
    font-size: 30px;
    font-weight: 600;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    font-style: italic;
    cursor: pointer;
}

.vol_levels_page .cards .card .cardimg {
    position: absolute;
    background-color: var(--DarkColor);
    right: -8%;
    border: 5px solid white;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 230px;
    width: 230px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.vol_levels_page .cards .card:nth-child(2) .cardimg {
    background-color: var(--MainColor);
    left: -8%;
}

.vol_levels_page .cards .card:nth-child(3) .cardimg {
    background-color: #28708b;
}

.vol_levels_page .cards .card .cardimg img {
    width: 50%;
}

/* levels Page End */

/* Sections Page Start*/

.vol_sections_page .homeandcommunity {
    position: absolute;
    top: 5%;
    right: 2%;
}

.vol_sections_page .homeandcommunity button {
    width: 300px;
    border: none;
    cursor: pointer;
    border-radius: 25px;
    font-size: 30px;
    font-weight: 600;
    background-color: var(--DarkColor);
    color: var(--YallowColor);
    padding: 10px 0px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

.vol_sections_page .heading {
    position: absolute;
    top: 10%;
    width: 66%;
    text-align: left;
    color: var(--DarkColor);
    line-height: 1.5;
}

.vol_sections_page .heading span:nth-child(1) {
    font-size: 90px;
    font-weight: 800;
}

.vol_sections_page .heading span:nth-child(2) {
    font-size: 38px;
}

.vol_sections_page .level span:nth-child(1) {
    color: var(--DarkColor);
}

.vol_sections_page .cards {
    position: absolute;
    top: 38%;
    width: 85%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

.vol_sections_page .card {
    background-color: var(--DarkColor);
    width: 410px;
    height: 240px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    color: white;
    font-size: 35px;
    font-weight: 600;
    border-radius: 35px;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    -ms-border-radius: 35px;
    -o-border-radius: 35px;
    text-align: left;
    cursor: pointer;
}

.vol_sections_page .card .icon img {
    width: 90px;
    height: 80px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(97%) sepia(39%) saturate(4294%) hue-rotate(325deg) brightness(123%) contrast(78%);
    -webkit-filter: brightness(0) saturate(100%) invert(97%) sepia(39%) saturate(4294%) hue-rotate(325deg) brightness(123%) contrast(78%);
}

.vol_sections_page .name {
    width: 50%;
}

.vol_sections_page .buttons {
    width: 68%;
    position: absolute;
    top: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vol_sections_page .buttons button {
    background-color: var(--YallowColor);
    color: var(--DarkColor);
    font-size: 34px;
    width: 46%;
    border: none;
    padding: 13px 0px;
    font-style: italic;
    font-weight: 600;
    border-radius: 35px;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    -ms-border-radius: 35px;
    -o-border-radius: 35px;
    cursor: pointer;
}

/* Sections Page End*/
/* Learn More Start */

.vol_video {
    background-color: var(--DarkColor);
}

.vol_video .back {
    position: absolute;
    top: 2%;
    right: 2%;
}


.vol_video .back button {
    width: 300px;
    border: none;
    cursor: pointer;
    border-radius: 25px;
    font-size: 30px;
    font-weight: 600;
    background-color: var(--ThirdColor);
    color: var(--DarkColor);
    padding: 10px 0px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    margin-inline: 0.2rem;
}

.vol_video .upheading {
    position: absolute;
    top: 4%;
    left: 4%;
    width: 75%;
    text-align: left;
    font-size: 51px;
    color: var(--SubColor);
    font-weight: 700;
    line-height: 1;
}

.vol_video .upheading span:nth-child(2) {
    font-size: 20px;
    font-weight: 500;
    color: var(--YallowColor);
}

.vol_video .main {
    position: absolute;
    height: 80%;
    top: 19%;
    width: 95%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-around;
}

.vol_video .video {
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.vol_video .video iframe {
    width: 80%;
    height: 70%;
}

.vol_video .video button {
    background-color: var(--ThirdColor);
    color: var(--DarkColor);
    font-size: 30px;
    font-weight: 600;
    border: none;
    padding: 10px 60px;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    cursor: pointer;
}

.vol_video .icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    width: 150px;
    height: 150px;
    background-color: white;
    border: 3px solid var(--MainColor);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    align-items: center;
    justify-content: center;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.vol_video .icon img {
    width: 50%;
}

.vol_video .desc {
    position: relative;
    width: 35%;
    background-color: white;
    color: var(--DarkColor);
    font-size: 17px;
    padding: 25px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.vol_video .desc .info {
    margin-top: 90px;
    max-height: 500px;
    overflow: auto;
    text-align: left;
}

.vol_video .desc .about {
    margin: 25px 0px;
    padding: 25px;
}

/* Learn More End */
/* pre_requisite_page Start */

.val_pre.pre_requisite_page .back {
    position: absolute;
    top: 5%;
    right: 2%;
}

.val_pre.pre_requisite_page .back button {
    width: 300px;
    border: none;
    cursor: pointer;
    border-radius: 25px;
    font-size: 30px;
    font-weight: 600;
    background-color: var(--SubColor);
    color: var(--DarkColor);
    padding: 10px 0px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    margin-top: 0;
}

/* pre_requisite_page End */
/* Extra Resources Start */

.vol_res.resources .back {
    position: absolute;
    top: 5%;
    right: 2%;
}

.vol_res.resources .back button {
    width: 300px;
    border: none;
    cursor: pointer;
    border-radius: 25px;
    font-size: 30px;
    font-weight: 600;
    background-color: var(--SubColor);
    color: var(--DarkColor);
    padding: 10px 0px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    margin-top: 0;
}

.vol_res.resources .main {
    top: 20%;
}

/* Extra Resources End */

/*Vol Master Video Start */
.master.vol_video {
    background-color: var(--SubColor);
}

.master.vol_video .back button {
    background-color: white;
    color: var(--SubColor);
}

.master.vol_video .upheading {
    color: var(--DarkColor);
}

.master.vol_video .upheading span:nth-child(2) {
    color: white;
    font-weight: 600;
    font-size: 21px;
}

/*Vol Master Video End */

.vol_video_page .back {
    position: absolute;
    top: 5%;
    right: 2%;
}

.vol_video_page .heading {
    color: var(--DarkColor) !important;
    font-weight: 800 !important;
    text-align: left;
}

.vol_video_page .heading .white {
    color: white;
    font-weight: 500;
    font-size: 30px;
    width: 85%;
    display: block;
}

.vol_video_page .back button {
    background-color: white !important;
    color: var(--SubColor) !important;
}








/* Missions Pages */

/* Defult */

.missions_page .download-link {
    background-color: var(--DarkColor);
    color: var(--SubColor);
    padding: 8px 10px;
    font-size: 24px;
    font-weight: 600;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.missions_page input {
    outline: none;
    border: none;
}

.missions_page textarea {
    resize: none;
    border: none;
}

.missions_page textarea:active,
.missions_page textarea:focus-visible {
    resize: none;
    border: none;
    outline: none;
}

.missions_page {
    background: url('../images/bgmissionts.png');
    background-position: center;
    background-size: cover;
}

.missions_page .centerpage {
    /* border: 2px solid var(--DarkColor); */
}

.missions_page .mian {
    width: 100%;
    text-align: left;
    position: absolute;
    top: 7%;
    height: 85%;
    overflow: auto;
    padding: 4rem;
}

.missions_page .homeandcommunity {
    position: absolute;
    top: 2%;
    right: 2%;
    z-index: 1;
}

.missions_page .homeandcommunity button {
    width: 300px;
    border: none;
    cursor: pointer;
    border-radius: 25px;
    font-size: 30px;
    font-weight: 600;
    background-color: var(--DarkColor);
    color: var(--ForthColor);
    padding: 10px 0px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}




.missions_page .heading {
    font-size: 35px;
    color: var(--SubColor);
    font-weight: 700;
    font-style: italic;
}

.missions_page .heading span:nth-child(2) {
    font-size: 40px;
    color: var(--DarkColor);
    font-weight: 700;
    font-style: normal;
}

.missions_page .MRM {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-end;
    margin-top: 3rem;
}

.missions_page .MRM .button {
    background-color: #b9b9ba;
    color: #cccccc;
    font-size: 30px;
    padding: 20px 60px;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    font-weight: 600;
}

.missions_page .MRM .button:nth-child(1) {
    background-color: var(--DarkColor);
    color: white;
}

.missions_page .next {
    text-align: center;
}

.missions_page .next input {
    outline: none;
    border: none;
    padding: 0.7rem 6rem;
    font-size: 35px;
    font-weight: 600;
    border-radius: 25px;
    background: var(--DarkColor);
    color: white;
    font-style: italic;
    cursor: pointer;
}

.missions_page .upload.relative {
    position: relative;
}

.missions_page .alert {
    position: relative;
    z-index: 2;
    padding: 20px;
    background-color: #f44336;
    color: white;
    width: 50%;
}

.missions_page .alert-success {
    position: relative;
    z-index: 2;
    padding: 20px;
    background-color: #d4edda;
    color: #155724;
    width: 50%;

    .missions_page .closebtn {
        color: #155724;
    }
}

.missions_page .closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 30px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.missions_page .closebtn:hover {
    color: black;
}

.missions_page #scriptalert {
    display: none;
}

.missions_page .form_disable {
    background-color: #cccccc !important;
    color: #666666 !important;
    cursor: not-allowed !important;
}

/* Defult */


/* session1_page Start */

.session1_page .Missions {
    margin-top: 7rem;
}

.session1_page .M1P1 .MName {
    font-size: 35px;
    color: var(--DarkColor);
}

.session1_page .M1P1 .MName span:nth-child(1) {
    font-weight: 700;
}

.session1_page .M1P1 .upload {
    text-align: right;

}

.session1_page .M1P1 .nameandfile {
    position: relative;
}

.session1_page .M1P1 .upload input {
    font-size: 18px;
    width: 10rem;
    position: absolute;
    right: 0;
    bottom: 0;
}

.session1_page .M1P1 .upload input::before {
    width: fit-content;
    display: block;
    content: "Upload";
    color: #008b9c;
    background-color: var(--DarkColor);
    color: white;
    color: var(--ForthColor);
    font-weight: 600;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}


.session1_page .M1P1 .upload input[type="file"]::file-selector-button {
    display: none;

}

.session1_page .M1P1 .Identify {
    margin-top: 3rem;
}

.session1_page .M1P1 .Identify .Question {
    font-size: 28px;
    font-weight: 700;
    color: var(--DarkColor);
}

.session1_page .M1P1 .Identify .boxes {
    margin-top: 4rem;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.session1_page .M1P1 .Identify .boxes div {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 16%;
    height: auto;
    font-size: 16px;
    font-weight: 700;
    color: var(--DarkColor);
    border: 3px solid var(--DarkColor);
    padding: 1rem;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    background: white;
}

.session1_page .M1P1 .Identify .boxes div textarea {
    width: 100%;
    height: 150px;
    font-size: 18px;
}

.session1_page .M1P1 .Identify .boxes div hr {
    width: 100%;
    height: 3px;
    background-color: #00a0af;
    border: none;
    margin-block: 3rem;
}

.session1_page .M1P1 .Empathy .inputs {
    flex-wrap: wrap;
}

.session1_page .M1P1 .Empathy .inputs div {
    width: 50%;
    padding: 1rem;
}

.session1_page .M1P1 .Empathy .inputs div:nth-child(1),
.session1_page .M1P1 .Empathy .inputs div:nth-child(2) {
    border-bottom: 3px solid var(--SubColor);
}

.session1_page .M1P1 .Empathy .inputs div:nth-child(1),
.session1_page .M1P1 .Empathy .inputs div:nth-child(3) {
    border-right: 3px solid var(--SubColor);
}

.session1_page .M1P1 .Similar .inputs {
    flex-wrap: wrap;
}

.session1_page .M1P1 .Similar .inputs div {
    width: 50%;
    padding: 1rem;
}

.session1_page .MName {
    font-size: 35px;
    color: var(--DarkColor);
}

.session1_page .MName span:nth-child(1) {
    font-weight: 700;
}


/* .session1_page .M1P2 {
    margin-top: 4rem;
    position: relative;
}

.session1_page .M1P2 textarea {
    font-size: 22px;
    width: 90%;

}

.session1_page .M1P2 .boxes {
    margin-top: 4rem;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.session1_page .M1P2 .boxes div {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 16%;
    height: auto;
    font-size: 16px;
    font-weight: 700;
    color: var(--DarkColor);
    border: 3px solid var(--DarkColor);
    padding: 1rem;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    background: white;
}

.session1_page .M1P2 .boxes div hr {
    width: 100%;
    height: 3px;
    background-color: #00a0af;
    border: none;
    margin-block: 3rem;
}

.session1_page .M1P2 .boxes div:nth-child(3) {
    width: 65%;
    min-height: 350px;
}

.session1_page .M2 .boxes {
    margin-top: 4rem;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.session1_page .M2 textarea {
    font-size: 22px;
    width: 90%;

}

.session1_page .M2 .boxes div {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 16%;
    height: auto;
    font-size: 16px;
    font-weight: 700;
    color: var(--DarkColor);
    border: 3px solid var(--DarkColor);
    padding: 1rem;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    background: white;
}

.session1_page .M2 .boxes div hr {
    width: 100%;
    height: 3px;
    background-color: #00a0af;
    border: none;
    margin-block: 3rem;
}

.session1_page .M2 .boxes div:nth-child(3) {
    width: 60%;
    min-height: 350px;
} */

/* session1_page End */




/* session2_page Start*/

.session2_page .mission {
    margin-top: 4rem;
}

.session2_page .MName {
    position: relative;
    color: var(--DarkColor);
    font-weight: 700;
    font-size: 40px;

}

.session2_page .upload {
    position: absolute;
    right: 0;
    top: 0;
}

.session2_page .upload input {
    font-size: 18px;
    width: 10rem;

}

.session2_page .upload input::before {
    width: fit-content;
    display: block;
    content: "Upload";
    color: #008b9c;
    background-color: var(--DarkColor);
    color: white;
    color: var(--ForthColor);
    font-weight: 600;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

.session2_page .upload input[type="file"]::file-selector-button {
    display: none;

}


.session2_page .M1P1 .Mdescriptions {
    color: var(--DarkColor);
    font-size: 34px;
    margin-top: 3rem;

}

.session2_page .M1P1 .matrix {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1rem;
    margin-top: 3rem;
    background-color: white;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

.session2_page .tableanswer {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 20px auto;
}

.session2_page .tableanswer div {
    width: 50%;
    height: 300px;
    background-color: var(--SubColor);
    border: 3px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.session2_page .tableanswer textarea {
    width: 100%;
    height: 100%;
    background-color: transparent;
    color: white;
    font-size: 30px;
}

.session2_page .tableanswer textarea::placeholder {
    color: white;
    margin: auto;
}

.session2_page .M1P1 .matrix .line {
    width: 0.3rem;
    background-color: var(--ForthColor);
}

.session2_page .M1P1 .matrix .img,
.session2_page .M1P1 .matrix .info {
    width: 45%;
}

.session2_page .M1P1 .matrix .img img {
    width: 100%;
}

.session2_page .M1P1 .matrix .info {
    font-size: 22px;
    color: var(--DarkColor);
}



.session2_page .box5Sentece {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1rem;
    margin-top: 3rem;
    background-color: white;
    border: 5px solid var(--DarkColor);
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

.session2_page .box5Sentece .line {
    width: 4px;
    background-color: var(--ForthColor);
}

.session2_page .box5Sentece>.info,
.session2_page .box5Sentece>.inputs {
    width: 45%;
    font-size: 25px;

    color: var(--DarkColor);
}

.session2_page .box5Sentece>.inputs {
    display: flex;
    flex-direction: column;
}

.session2_page .box5Sentece>.inputs input {
    font-size: 22px;
    margin-top: 0.5rem;
}

.session2_page .box5Sentece .info {
    align-self: center;
}

.session2_page .M1P2 .Mdescriptions {
    font-size: 32px;
    color: var(--DarkColor);
    margin-top: 4rem;
}

.session2_page .M1P2 .Mdescriptions span:nth-child(2) {
    color: var(--SubColor);
}

.session2_page .M1P2 .BoxCompetitor {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    border: 5px solid var(--DarkColor);
    border-radius: 25px;
    margin-top: 4rem;
    background-color: white;
}

.session2_page .M1P2 .BoxCompetitor .questions {
    display: flex;
    flex-direction: row;
}

.session2_page .M1P2 .BoxCompetitor label {
    color: var(--SubColor);
    font-weight: 700;
    font-size: 30px;
}

.session2_page .M1P2 .BoxCompetitor input {
    font-size: 22px;
    font-weight: 500;
    width:280px
}

.session2_page .M1P2 .BoxCompetitor .questions {
    margin-top: 2rem;
    font-size: 28px;
    color: var(--DarkColor);
}

.session2_page .M1P2 .BoxCompetitor .questions textarea {
    display: block;
    font-size: 22px;
    margin-top: 2rem;
    width: 100%;
    min-height: 160px;
}

.session2_page .M1P2 .gaps {
    display: flex;
    margin-top: 4rem;
    justify-content: space-between;
    height: 100%;
    background-color: white;
}

.session2_page .M1P2 .gaps .box {
    width: 48%;
    font-size: 28px;
    color: var(--DarkColor);
    border: 5px solid var(--DarkColor);
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    padding: 2rem;
}

.session2_page .M1P2 .gaps .box:nth-child(2) {
    display: flex;
    flex-direction: column-reverse;
}

.session2_page .M1P2 .gaps .box:nth-child(2) .inputs {
    flex: 1;
    height: 50%;
}

.session2_page .M1P2 .gaps .box:nth-child(2) .inputs textarea {
    font-size: 25px;
    width: 100%;
    height: 100%;
}

.session2_page .M1P2 .gaps .box .line {
    width: 100%;
    height: 3px;
    background-color: var(--SubColor);
    margin-block: 25px;
}

.session2_page .M1P2 .gaps .gapname span:nth-child(1) {
    color: var(--SubColor);
    font-weight: 600;
    font-size: 30px;

}

.session2_page .M1P2 .gaps .gap {
    margin-top: 1rem;
}

.session2_page .M1P2 .gaps .gap input {
    font-size: 25px;
}

.M1P2 .gaps .gap label {
    font-size: 27px;
    font-weight: 700;
}



.session2_page .mission.M2 {
    margin-top: 7rem;
}

.session2_page .mission.M2 .MName {
    font-size: 40px;

}

.session2_page .mission.M2 .MName span:nth-child(2) {
    font-size: 30px;
    font-weight: 400;
    width: 80%;
    display: inline-block;
    margin-top: 0.5rem;

}

.session2_page .mission.M2 .upload {
    top: -3rem;
}

.session2_page .mission.M2 .box {
    padding: 1rem;
    border: 5px solid var(--DarkColor);
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    background-color: white;
}

.session2_page .mission.M2 .box .name {
    color: var(--SubColor);
    font-weight: 700;
    font-size: 35px;
}

.session2_page .mission.M2 .info {
    font-size: 25px;
    color: var(--DarkColor);
}

.session2_page .mission.M2 .line {
    height: 3px;
    background-color: var(--SubColor);
    margin-block: 1rem;
}

.session2_page .mission.M2 .box textarea {
    min-height: 150px;
    width: 100%;
    font-size: 20px;
}

.session2_page .mission.M2 .devlop {
    font-size: 28px;
    color: var(--DarkColor);
    line-height: 1.7;
}

.session2_page .mission.M2 .devlop span:nth-child(2) {
    color: var(--SubColor);
    font-weight: 600;
}

.session2_page .mission.M2 .MVV {
    background-color: white;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.session2_page .mission.M2 .MVV div {
    border: 5px solid var(--DarkColor);
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    width: 30%;
}

.session2_page .mission.M2 .MVV div label {
    font-size: 36px;
    font-weight: 700;
    color: var(--SubColor);
}

.session2_page .mission.M2 .MVV div textarea {
    min-height: 150px;
    width: 100%;
    font-size: 20px;
}

.session2_page .mission.M2 .devloptextaera {
    border: 5px solid var(--DarkColor);
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    padding: 1rem;
    background-color: white;
}

.session2_page .mission.M2 .devloptextaera textarea {
    width: 100%;
    min-height: 150px;
    font-size: 20px;
}

.session2_page .mission.M2 .evaluate {
    display: flex;
    justify-content: space-between;
}

.session2_page .mission.M2 .evaluate span {
    width: 46%;
    color: var(--DarkColor);
    font-size: 32px;
    font-weight: 400;
}

.session2_page .mission.M2 .evaluate textarea {
    min-height: 200px;
    width: 46%;
    padding: 1rem;
    border: 5px solid var(--DarkColor);
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    font-size: 22px;
}

.session2_page .mission.M3 .structre {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.session2_page .mission.M3 .structre .info {
    width: 40%;
}

.session2_page .mission.M3 .structre .img {
    width: 50%;
}

.session2_page .mission.M3 .structre .img img {
    width: 100%;
}

.session2_page .mission.M3 .structre .info {
    font-size: 30px;
    color: var(--DarkColor);
}

.session2_page .mission.M3 .structre .info span:nth-child(1),
.session2_page .mission.M3 .structre .info span:nth-child(3) {
    color: var(--SubColor);
    font-weight: 600;
}


.session2_page .mission.M3 .structure_entry {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}


.session2_page .mission.M3 .structure_entry .left {
    width: 70%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.session2_page .mission.M3 .structure_entry .left .card {
    width: 30%;
    margin: 1rem;
}

.session2_page .mission.M3 .structure_entry .right {
    width: 28%;
}

.session2_page .mission.M3 .structure_entry .right .card {
    height: 100%;
}


.session2_page .mission.M3 .structure_entry .card {
    background-color: white;
    border: 3px solid var(--DarkColor);
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    font-size: 18px;
    padding: 1rem;
    min-height: 23rem;
}

.session2_page .mission.M3 .structure_entry .card .name {
    color: var(--SubColor);
    font-size: 20px;
    font-weight: 600;
    margin-top: 0.5rem;
}

.session2_page .mission.M3 .structure_entry .forms div {
    margin-top: 1.5rem;
}

.session2_page .mission.M3 .structure_entry .forms input {
    font-size: 20px;
    font-weight: 600;
}

.session2_page .mission.M3 .structure_entry .task {
    margin-top: 0.5rem;
}

.session2_page .mission.M3 .structure_entry .task span:nth-child(1) {
    font-weight: 700;
}

.session2_page .mission.M3 .structure_entry .card .line {
    width: 100%;
    height: 3px;
    background-color: var(--SubColor);
    margin-block: 1rem;
}


/* session2_page End*/


/* session3_page Start*/



.session3_page .Missions {
    .upload {
        text-align: right;

    }

    .nameandfile {
        position: relative;
    }

    .upload input {
        font-size: 18px;
        width: 10rem;
        position: absolute;
        right: 0;
        top: 0;

    }

    .upload input::before {
        width: fit-content;
        display: block;
        content: "Upload";
        color: #008b9c;
        background-color: var(--DarkColor);
        color: white;
        color: var(--ForthColor);
        font-weight: 600;
        padding: 10px 20px;
        border: none;
        border-radius: 25px;
        cursor: pointer;
        font-size: 25px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        -ms-border-radius: 25px;
        -o-border-radius: 25px;
    }

    .MNAME {
        font-size: 40px;
        font-weight: 600;
        color: var(--DarkColor);
    }

    .MDescription {
        font-size: 35px;
        color: var(--DarkColor);
    }

    .upload input[type="file"]::file-selector-button {
        display: none;

    }

    .M1 .boxes {
        display: flex;
        justify-content: space-between;
    }

    .M1 .boxes .box {
        padding: 1rem;
        border: 3px solid var(--DarkColor);
        width: calc(16% - 0.5rem);
        background-color: white;
        border-radius: 25px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        -ms-border-radius: 25px;
        -o-border-radius: 25px;
    }

    .M1 .boxes .box:nth-child(4) {
        width: calc(50% - 0.5rem);
    }

    .M1 .box .name {
        font-size: 22px;
        font-weight: 700;
        color: var(--DarkColor);
        margin-bottom: 1rem;
    }

    .M1 .box .info {
        font-size: 18px;
        font-weight: 700;
        color: var(--DarkColor);
    }

    .M1 .line {
        height: 3px;
        background-color: var(--SubColor);
        margin-block: 1rem;
    }

    .M1 textarea {
        min-height: 180px;
        font-size: 20px;
    }

    .M1 .points {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        font-size: 16px;
        font-weight: 500;
        align-items: center;
        margin-top: 2rem;
    }

    .M1 .points .small {
        font-size: 12px;
    }

    .M1 .after {
        color: var(--SubColor);
        font-weight: 600;
        font-size: 28px;
        font-style: italic;
    }

    .M2P1 .info {
        color: var(--DarkColor);
        font-size: 35px;
        font-weight: 400;

    }

    .M2P1 .boxes {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .M2P1 .boxes .box {
        width: calc(25% - 0.5rem);
        border: 3px solid var(--DarkColor);
        padding: 1rem;
        border-radius: 25px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        -ms-border-radius: 25px;
        -o-border-radius: 25px;
        font-size: 20px;
        margin-block: 1rem;
        background-color: white;
    }

    .M2P1 .boxes .box .name {
        font-weight: 700;
        color: var(--SubColor);
    }

    .M2P1 .boxes .box .inputs {
        margin-block: 1rem;
    }

    .M2P1 .boxes .box .inputs label {
        font-weight: 600;
        font-size: 18px;
    }

    .M2P1 .boxes .box .inputs input {
        font-size: 18px;
    }


    .M2P1 .boxes .box:nth-child(5) {
        width: calc(50% - 0.5rem);
    }

    .M2P1 .boxes .box:nth-child(5) {
        width: calc(50% - 0.5rem);
    }


    .M2P2 .info {
        font-size: 28px;
        font-weight: 500;
    }

    .M2P2 .box {
        border: 3px solid var(--DarkColor);
        background-color: white;
        border-radius: 25px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        -ms-border-radius: 25px;
        -o-border-radius: 25px;
        -webkit-border-radius: 25px;
        padding: 2rem;
    }

    .M2P2 .box textarea {
        width: 100%;
        height: 250px;
        font-size: 20px;

    }


    .M3 .MNAME {
        font-size: 32px;
    }

    .M3 .MNAME span:nth-child(2) {
        display: block;
        margin-top: 1rem;
        color: var(--SubColor);
    }

    .M3 .info {
        font-size: 25px;
        font-weight: 500;
    }

    .M3 .CompanyTypes .Name {
        font-size: 32px;
        color: var(--SubColor);
        font-weight: 600;
    }


    .M3 .boxes {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .M3 .boxes .box {
        background-color: white;
        border: 3px solid var(--DarkColor);
        padding: 1rem;
        border-radius: 25px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        -ms-border-radius: 25px;
        -o-border-radius: 25px;
        min-height: 350px;
    }

    .M3 .boxes .box:nth-child(1) {
        width: 25%;
    }

    .M3 .boxes .box:nth-child(2) {
        width: 73%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }

    .M3 .boxes .box .evaluate {
        font-size: 28px;
        width: 30%;
        color: var(--DarkColor);
    }

    .M3 .boxes .box .line {
        height: 100%;
        width: 3px;
        background: var(--SubColor);
    }

    .M3 .boxes .box label {
        font-size: 25px;
        color: var(--DarkColor);
        margin-left: 10px;
    }

    .M3 .boxes .box .checkbox {
        border: none;
    }

    .M3 .boxes .box .checkbox div {
        display: flex;
        align-items: center;
    }

    .M3 .boxes .box input[type="checkbox"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        background-color: #f0f0f0;
        border: 2px solid var(--SubColor);
        border-radius: 4px;
        cursor: pointer;
        position: relative;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
    }

    .M3 .boxes .box input[type="checkbox"]:checked::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: var(--SubColor);
    }



    .M3 .createlogo .nameandfile .MNAME {
        color: var(--SubColor);
    }

    .M3 .createlogo .info {
        color: var(--DarkColor);
        font-size: 30px;
        font-weight: 400;
    }

    .M3 .designing .Name {
        color: var(--DarkColor);
        font-weight: 400;
        font-size: 31px;
    }


    .M3 .designing .upload input {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
    }

    .M3 .designing .upload input::before {
        width: 99%;
        content: "Upload Logo";
        background-color: white;
        color: var(--SubColor);
        border: 3px solid var(--DarkColor);
        font-size: 30px;
        font-weight: 600;
        padding: 1rem 0px;
        border-radius: 25px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        -ms-border-radius: 25px;
        -o-border-radius: 25px;
        text-align: center;
    }

}

.session4_page {
    .MNAME {
        font-size: 40px;
        font-weight: 600;
        color: var(--DarkColor);
    }

    .MDescription {
        font-size: 35px;
        color: var(--DarkColor);
    }

    .nameandfile {
        position: relative;
        color: var(--DarkColor);
    }


    .upload {
        position: absolute;
        right: 0;
        top: 0;
    }

    .upload input {
        font-size: 18px;
        width: 10rem;

    }

    .upload input::before {
        width: fit-content;
        display: block;
        content: "Upload";
        color: #008b9c;
        background-color: var(--DarkColor);
        color: white;
        color: var(--ForthColor);
        font-weight: 600;
        padding: 10px 20px;
        border: none;
        border-radius: 25px;
        cursor: pointer;
        font-size: 25px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        -ms-border-radius: 25px;
        -o-border-radius: 25px;
    }

    .upload input[type="file"]::file-selector-button {
        display: none;

    }

    .Missionone {
        display: flex;
        justify-content: space-between;
    }

    .Missionone .left,
    .Missionone .right {
        width: 48%;
    }

    .Missionone .right {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .Missionone .right .name {
        font-size: 24px;
        color: var(--DarkColor);
    }

    .Missionone .right .name span:nth-child(1) {
        font-weight: 700;
    }

    .Missionone .right .name span:nth-child(3) {
        color: var(--SubColor);
        font-size: 20px;
    }

    .Missionone .right .line {
        width: 100%;
        height: 5px;
        background-color: var(--DarkColor);
        margin-block: 1rem;
    }

    .Missionone .right textarea {
        font-size: 22px;
    }

    .M2 .input {
        height: 400px;
    }

    .M2 .imgandquestion div {
        width: 48%;
    }

}

/* session4_page End*/

.session5_page {
    .MNAME {
        font-size: 35px;
        font-weight: 700;
        color: var(--DarkColor);
    }

    .MDescription {
        font-size: 28px;
        color: var(--DarkColor);
    }

    .nameandfile {
        position: relative;
        color: var(--DarkColor);
    }


    .upload {
        position: absolute;
        right: 0;
        top: 0;
    }

    .upload input {
        font-size: 18px;
        width: 10rem;

    }

    .upload input::before {
        width: fit-content;
        display: block;
        content: "Upload";
        color: #008b9c;
        background-color: var(--DarkColor);
        color: white;
        color: var(--ForthColor);
        font-weight: 600;
        padding: 10px 20px;
        border: none;
        border-radius: 25px;
        cursor: pointer;
        font-size: 25px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        -ms-border-radius: 25px;
        -o-border-radius: 25px;
    }

    .upload input[type="file"]::file-selector-button {
        display: none;

    }



    .form div {
        margin-bottom: 4rem;
    }

    .form label {
        font-size: 25px;
        font-weight: 700;
        color: var(--DarkColor);
    }

    .form textarea {
        font-size: 25px;
        width: 100%;
        min-height: 150px;
    }

    .M3 .boxes .left,
    .M3 .boxes .right {
        width: 45%;
    }

    .M3 .boxes .line {
        background-color: var(--SubColor);
        width: 3px;
    }


}





.session6_page {
    .MNAME {
        font-size: 35px;
        font-weight: 700;
        color: var(--DarkColor);
    }

    .MDescription {
        font-size: 28px;
        color: var(--DarkColor);
    }

    .nameandfile {
        position: relative;
        color: var(--DarkColor);
    }


    .upload {
        position: absolute;
        right: 0;
        top: 0;
    }

    .upload input {
        font-size: 18px;
        width: 10rem;

    }

    .upload input::before {
        width: fit-content;
        display: block;
        content: "Upload";
        color: #008b9c;
        background-color: var(--DarkColor);
        color: white;
        color: var(--ForthColor);
        font-weight: 600;
        padding: 10px 20px;
        border: none;
        border-radius: 25px;
        cursor: pointer;
        font-size: 25px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        -ms-border-radius: 25px;
        -o-border-radius: 25px;
    }

    .upload input[type="file"]::file-selector-button {
        display: none;

    }



    .form div {
        margin-bottom: 4rem;
    }

    .form label {
        font-size: 25px;
        font-weight: 700;
        color: var(--DarkColor);
    }

    .form textarea {
        font-size: 25px;
        width: 100%;
        min-height: 150px;
    }

    .M1P2 .monthes .right {
        margin-right: 20rem;
    }

    .M2P1 .boxes .box {
        width: 30%;
    }

    .M2P2 .boxes .box {
        width: 30%;
    }


}

.session7_page {
    .MNAME {
        font-size: 35px;
        font-weight: 700;
        color: var(--DarkColor);
    }

    .MDescription {
        font-size: 28px;
        color: var(--DarkColor);
    }

    .nameandfile {
        position: relative;
        color: var(--DarkColor);
    }


    .upload {
        position: absolute;
        right: 0;
        top: 0;
    }

    .upload input {
        font-size: 18px;
        width: 10rem;

    }

    .upload input::before {
        width: fit-content;
        display: block;
        content: "Upload";
        color: #008b9c;
        background-color: var(--DarkColor);
        color: white;
        color: var(--ForthColor);
        font-weight: 600;
        padding: 10px 20px;
        border: none;
        border-radius: 25px;
        cursor: pointer;
        font-size: 25px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        -ms-border-radius: 25px;
        -o-border-radius: 25px;
    }

    .upload input[type="file"]::file-selector-button {
        display: none;

    }

    .M2P2 .boxes div {
        width: 48%;
    }
}


.session8_page {
    .MNAME {
        font-size: 35px;
        font-weight: 700;
        color: var(--DarkColor);
    }

    .MDescription {
        font-size: 28px;
        color: var(--DarkColor);
    }

    .nameandfile {
        position: relative;
        color: var(--DarkColor);
    }


    .upload {
        position: absolute;
        right: 0;
        top: 0;
    }

    .upload input {
        font-size: 18px;
        width: 10rem;

    }

    .upload input::before {
        width: fit-content;
        display: block;
        content: "Upload";
        color: #008b9c;
        background-color: var(--DarkColor);
        color: white;
        color: var(--ForthColor);
        font-weight: 600;
        padding: 10px 20px;
        border: none;
        border-radius: 25px;
        cursor: pointer;
        font-size: 25px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        -ms-border-radius: 25px;
        -o-border-radius: 25px;
    }

    .upload input[type="file"]::file-selector-button {
        display: none;

    }


}

.session9_page {
    .MNAME {
        font-size: 35px;
        font-weight: 700;
        color: var(--DarkColor);
    }

    .MDescription {
        font-size: 28px;
        color: var(--DarkColor);
    }

    .nameandfile {
        position: relative;
        color: var(--DarkColor);
    }


    .upload {
        position: absolute;
        right: 0;
        top: 0;
    }

    .upload input {
        font-size: 18px;
        width: 10rem;

    }

    .upload input::before {
        width: fit-content;
        display: block;
        content: "Upload";
        color: #008b9c;
        background-color: var(--DarkColor);
        color: white;
        color: var(--ForthColor);
        font-weight: 600;
        padding: 10px 20px;
        border: none;
        border-radius: 25px;
        cursor: pointer;
        font-size: 25px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        -ms-border-radius: 25px;
        -o-border-radius: 25px;
    }

    .upload input[type="file"]::file-selector-button {
        display: none;

    }

    .M1P1 .boxes div {
        width: 48%;
    }
}

.session10_page {
    .MNAME {
        font-size: 35px;
        font-weight: 700;
        color: var(--DarkColor);
    }

    .MDescription {
        font-size: 28px;
        color: var(--DarkColor);
    }

    .nameandfile {
        position: relative;
        color: var(--DarkColor);
    }


    .upload {
        position: absolute;
        right: 0;
        top: 0;
    }

    .upload input {
        font-size: 18px;
        width: 10rem;

    }

    .upload input::before {
        width: fit-content;
        display: block;
        content: "Upload";
        color: #008b9c;
        background-color: var(--DarkColor);
        color: white;
        color: var(--ForthColor);
        font-weight: 600;
        padding: 10px 20px;
        border: none;
        border-radius: 25px;
        cursor: pointer;
        font-size: 25px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        -ms-border-radius: 25px;
        -o-border-radius: 25px;
    }

    .upload input[type="file"]::file-selector-button {
        display: none;

    }

    .M1P1 .box2 .secttions .section {
        width: 31%;
    }

    .M1P1 .box4 .secttions .column {
        width: 48%;
    }

    .M1P1 .boxes .halfbox {
        width: 48%;
    }
}

.session11_page {
    .MNAME {
        font-size: 35px;
        font-weight: 700;
        color: var(--DarkColor);
    }

    .MDescription {
        font-size: 28px;
        color: var(--DarkColor);
    }

    .nameandfile {
        position: relative;
        color: var(--DarkColor);
    }


    .upload {
        position: absolute;
        right: 0;
        top: 0;
    }

    .upload input {
        font-size: 18px;
        width: 10rem;

    }

    .upload input::before {
        width: fit-content;
        display: block;
        content: "Upload";
        color: #008b9c;
        background-color: var(--DarkColor);
        color: white;
        color: var(--ForthColor);
        font-weight: 600;
        padding: 10px 20px;
        border: none;
        border-radius: 25px;
        cursor: pointer;
        font-size: 25px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        -ms-border-radius: 25px;
        -o-border-radius: 25px;
    }

    .upload input[type="file"]::file-selector-button {
        display: none;

    }
}

.session12_page {
    .MNAME {
        font-size: 35px;
        font-weight: 700;
        color: var(--DarkColor);
    }

    .MDescription {
        font-size: 28px;
        color: var(--DarkColor);
    }

    .nameandfile {
        position: relative;
        color: var(--DarkColor);
    }


    .upload {
        position: absolute;
        right: 0;
        top: 0;
    }

    .upload input {
        font-size: 18px;
        width: 10rem;

    }

    .upload input::before {
        width: fit-content;
        display: block;
        content: "Upload";
        color: #008b9c;
        background-color: var(--DarkColor);
        color: white;
        color: var(--ForthColor);
        font-weight: 600;
        padding: 10px 20px;
        border: none;
        border-radius: 25px;
        cursor: pointer;
        font-size: 25px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        -ms-border-radius: 25px;
        -o-border-radius: 25px;
    }

    .upload input[type="file"]::file-selector-button {
        display: none;

    }
}

/* Rubric and Minutes of meet */

.rubics .missionname {
    font-size: 45px;
    font-weight: 700;
    color: var(--DarkColor);
}

.selectrubric {
    font-size: 28px;
    font-style: italic;
    margin-top: 1rem;
}

.rubics .rate {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.rubics .rateheading {
    font-size: 45px;
    font-weight: 700;
    color: var(--DarkColor);
}

.rubics .number {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.rubics .number div {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e8e9ea;
    color: #dedfe0;
    width: 120px;
    height: 120px;
    margin-inline: 50px;
    font-size: 80px;
    font-weight: 800;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    cursor: pointer;
}

.rubics .detailes {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background-color: white;
    border: 8px solid var(--DarkColor);
    border-radius: 35px;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    -ms-border-radius: 35px;
    -o-border-radius: 35px;
}

.rubics .container {
    padding: 2rem;
    width: 25%;
}

.rubics .ratename {
    color: var(--MainColor);
    font-size: 40px;
    font-weight: 700;
    word-break: keep-all;
}

.rubics .section {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    color: var(--DarkColor);
}

.rubics .section span:nth-child(1) {
    color: var(--ThirdColor);
    font-size: 22px;
    font-weight: 800;
}

.rubics .section span:nth-child(2) {
    font-size: 17px;
    font-weight: 500;
    margin-top: 1rem;
}

.rubics .missiorubics {
    margin-top: 8rem;
}

.rubics .next {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rubics .next div {
    outline: none;
    border: none;
    padding: 0.7rem 6rem;
    font-size: 35px;
    font-weight: 600;
    border-radius: 25px;
    background: var(--DarkColor);
    color: white;
    font-style: italic;
    cursor: pointer;
    width: max-content;
}

.rubics .MRM .button:nth-child(1) {
    background-color: var(--ThirdColor);
}

.rubics .rate-option.selected {
    background-color: var(--YallowColor);
    color: white;
}

.missions_page.rubics .MRM .button:nth-child(3) {
    background-color: var(--DarkColor) !important;
    color: white;
}



.minuts_of_meet .feildes {
    margin-top: 4rem;
    display: flex;
    justify-content: space-between;
    min-height: 60%;
}

.missions_page.minuts_of_meet .MRM .button:nth-child(1),
.missions_page.minuts_of_meet .MRM .button:nth-child(3) {
    background-color: var(--ThirdColor);
    color: white;
}

.missions_page.minuts_of_meet .MRM .button:nth-child(5) {
    background-color: var(--DarkColor) !important;
    color: white;
}

.minuts_of_meet .feildes div {
    display: flex;
    flex-direction: column;
}

.minuts_of_meet .feildes div label {
    font-size: 28px;
    font-weight: 700;
    color: var(--DarkColor);
}

.minuts_of_meet .feildes div textarea {
    flex: 1;
}

.minuts_of_meet textarea,
.minuts_of_meet input {
    font-size: 20px;
    margin-top: 1rem;
}

.minuts_of_meet .feildes .inputdiv {
    padding: 2rem;
    border: 3px solid var(--DarkColor);
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    background-color: white;
}

.minuts_of_meet .feildes .section1 {
    justify-content: space-between;
}

.missions_page.minuts_of_meet .next input {
    background-color: var(--YallowColor);
    color: var(--DarkColor);
    padding: 1.5rem 6rem;
    font-size: 40px;
    font-weight: 700;
}

/*National Competition*/

.NationalCompetition {
    background-color: var(--DarkColor);
}

.NationalCompetition .main {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 6rem;
    text-align: left;
}

.NationalCompetition .ExecutiveTeam {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border: 3px solid white;
}

.NationalCompetition .ExecutiveTeam li {
    margin-top: 10px;
}

.NationalCompetition .button {
    text-align: center;
}

.NationalCompetition .button button {
    margin-top: 2rem;
    background-color: white;
    border: none;
    font-size: 25px;
    color: var(--DarkColor);
    font-style: italic;
    font-weight: 700;
    padding: 10px 30px;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    cursor: pointer;
}



/* Report Page */

.report_page {
    background: url(../images/bg_report.png);
    background-size: contain;
    background-position: center;
}

.report_page {

    .file-upload-container {
        display: flex;
        align-items: center;
        color: white;
    }

    .file-upload {
        position: relative;
        overflow: hidden;
        display: inline-block;
    }

    .file-upload .button {
        background-color: transparent;
        color: white;
        font-size: 30px;
        padding: 0.5rem 1.5rem;
        border: 3px solid white;
        cursor: pointer;
        border-radius: 20px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        -ms-border-radius: 20px;
        -o-border-radius: 20px;
    }

    .file-upload img {
        border-radius: 50%;
        width: 120px;
        height: 120px;
    }

    .file-upload input[type="file"] {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
    }


    /* team */

    .team-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
        margin-top: 5rem;
    }

    .team-member {
        display: flex;
        align-items: center;
        border: 2px solid white;
        border-radius: 50px;
        padding: 10px;
        background-color: var(--DarkColor);
        color: white;
        text-align: left;
        width: 400px;
        height: 100px;
    }

    .photo-upload {
        position: relative;
        overflow: hidden;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        margin-right: 20px;
        border: 2px solid white;
    }

    .photo-upload img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }

    .photo-upload input[type="file"] {
        font-size: 100px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
    }

    .member-info {
        flex-grow: 1;
    }

    .member-info .title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .member-info .name {
        font-size: 18px;
        background-color: transparent;
        border: none;
        outline: none;
        color: white;
    }

    .member-info .name option {
        font-size: 16px;
        color: var(--DarkColor);
    }

    .member-info .name::placeholder {
        color: white;
    }
}

.report_page .main,
.report_page form {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 95%;
}


.report_page .left {
    width: 55%;
}

.report_page .right {
    width: 35%;
}




.report_page .right {

    .next {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 90%;
        background-color: var(--YallowColor);
        color: var(--DarkColor);
        font-weight: 700;
        font-style: 35px;
        cursor: pointer;
        font-size: 40px;
        margin-left: 1rem;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }

    textarea,
    input,
    select {
        border: none;
        color: var(--DarkColor);
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        font-size: 30px !important;
        font-weight: 500;
    }

    select {
        font-size: 25px;
        padding: 0.5rem 1rem;
    }

    option {
        font-size: 20px !important;
    }

    label {
        color: white;
        font-size: 35px;
        text-align: left;
        margin-bottom: 0.5rem;
    }

    input[type="text"] {
        padding-block: 1rem;
    }




    input[type="submit"] {
        height: 100%;
        width: 90%;
        background-color: var(--YallowColor);
        color: var(--DarkColor);
        font-weight: 700;
        font-style: 40px;
        cursor: pointer;
    }

    .file-upload {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 75%;
    }

    .upload-btn {
        display: inline-block;
        background-color: var(--DarkColor);
        color: white;
        padding: 10px 20px;
        border-radius: 20px;
        text-align: center;
        cursor: pointer;
        border: 2px solid white;
        transition: background-color 0.3s ease;
    }

    .upload-btn.selected {
        background-color: var(--ThirdColor);
    }

    .upload-btn.selected::before {
        color: white;
    }

    .upload-btn::before {
        content: '';
        display: inline-block;
        width: 30px;
        height: 30px;
        background-image: url(../images/uploadimg.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 1px;
        margin-right: 30px;
        vertical-align: middle;
        color: var(--SubColor);
    }

    input[type="file"] {
        display: none;
    }

    .file-upload label {
        font-size: 25px !important;
    }
}

.report_page .linkedin {
    margin-top: 2rem;
    background-color: var(--DarkColor);
    padding: 1rem;
    border: 3px solid white;
    color: white;
    font-size: 35px;
    font-weight: 500;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

.report_page .alert {
    font-size: 30px;
}

.report_page .company-name input {
    background: transparent !important;
    font-size: 40px;
    color: white;
    border: none;
    width: 100%;
}

.company-name {

    width: 50%;
}



.report_page .company-name input:focus {
    outline: none;
}

.report_page .company-name input::placeholder {
    background: transparent !important;
    font-size: 40px;
    color: white;
}


.finalpage {
    background: url(../images/finalinjaz.png);
    background-size: cover;
    background-position: center;
}

.finalpage .shape {
    position: absolute;
    top: 25%;
}

.finalpage .shape img {
    width: 600px;
}

.finalpage .button {
    position: absolute;
    top: 60%;
}

.finalpage .button button {
    margin-inline: 1rem;
    background-color: white;
    padding: 10px 40px;
    font-size: 30px;
    color: var(--ThirdColor);
    font-weight: 600;
    border: none;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    cursor: pointer;
}



/* arabic */
/*-----------------------------------------------------*/
/* Shapes */


.downshape.ar_class {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    left: 0;
    right: auto;
}

.bodyupshape.ar_class {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    left: auto;
    right: 0;
}

.bodydownshape.ar_class {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    right: auto;
    left: 0;
}

/* Defult End */
/*-----------------------------------------------------*/
/*Sign in page*/
.sign_in .main.ar_class {
    direction: rtl;
}

.sign_in .main.ar_class .leftside .card,
.sign_in .main .rightside .card {

    padding-right: 25px;
}

.sign_in .main.ar_class .leftside .card.social_media {

    padding-left: 19px;


}

.sign_in .main.ar_class .rightside .card.CAMPUS {
    padding-right: 0;

}

.sign_in .main.ar_class .rightside .card .cardname {

    text-align: right;
}

.sign_in .main.ar_class .centerside .form .inputs img {
    left: auto;
    right: 22%;
}

.sign_in .main.ar_class .centerside .form form .inputs input {

    padding-left: 0;
    padding-right: 50px;
}




.sign_in .translation_button.ar_class {

    left: 10%;
}

/* Sign in End */
/*-----------------------------------------------------*/

/* Learn More Start */
/* Learn More End */
/*-----------------------------------------------------*/
/*Introduction*/

/* Welcome Page Start */


.welcome .main.ar_class {
    direction: rtl;
}


.welcome .des.ar_class {

    text-align: right;
    height: 60px;
}

.welcome .cards .card.ar_class {

    text-align: right;
}

.welcome .cards .card.ar_class:nth-child(3) {
    left: 0%;
    right: auto;
}

.welcome .cards .card.ar_class:nth-child(4) {
    left: 0%;
    right: auto;
}

.welcome .cards .card.ar_class:nth-child(5) {

    text-align: center;

}


/* Welcome Page End */
/*-----------------------------------------------------*/
/* Student Part Start */

/* levels Page Start */


.levels_page .logo.ar_class {
    right: 5%;
    left: auto;

}

.levels_page .logo img {
    width: 700px;
}



.levels_page .homeandcommunity.ar_class {

    left: 2%;
    right: auto;

}


.levels_page .cards.ar_class {
    left: 5%;
    right: auto;
    flex-direction: row-reverse;
}

.levels_page .card.ar_class {
    text-align: right;

}

.levels_page .card.ar_class .lock {
    right: 0;
    left: auto;
}

.levels_page .card.ar_class:last-child {
    margin-right: 1%;
    margin-left: 20%;
}

.levels_page .Progress.ar_class {
    right: auto;
    left: 3%;
    text-align: right;
    direction: rtl;
    font-size: 26px;
}

/* levels Page End */
/*-------------------------------------------------------*/
/* Sections Page Start*/

.sections_page .homeandcommunity.ar_class {
    right: auto;
    left: 2%;
}



.sections_page .heading.ar_class {
    right: 10%;
    text-align: right;

}

.sections_page .level.ar_class {
    transform-origin: right center;
    top: 90%;
    right: 4%;
    left: auto;

}

.sections_page .cards.ar_class {

    direction: rtl;
}

.sections_page .card.ar_class {
    flex-direction: row-reverse;
    text-align: right;
}

.sections_page .card .icon.ar_class img {

    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.sections_page .card .name.ar_class {
    text-align: right;
    direction: rtl;
}


/* well done */

.sections_page .well_done.ar_class .exit {
    left: 20px;
}

/* Sections Page End*/

/*-------------------------------------------------------*/
/* Video Page Start */
.video_page .heading.ar_class {
    right: 5%;
    left: auto;
}


/* pre_requisite_page Start */

.pre_requisite_page .heading.ar_class {
    right: 3%;
    left: auto;
    text-align: right;
}

.pre_requisite_page .card.ar_class {
    left: auto;
    right: 3%;

}

.pre_requisite_page .card.ar_class .name {
    text-align: right;
}

.pre_requisite_page .card.ar_class .icons {
    flex-direction: row-reverse;

}

.pre_requisite_page .card.ar_class .Learning_objectives.ar_class {
    text-align: right;
}

.pre_requisite_page .objectives.ar_class .obj .info.ar_class {
    text-align: right;
    padding: 10px 0px;
    padding-right: 70px;
    padding-left: 10px;
}

.pre_requisite_page .objectives .obj.ar_class .obj_icon {
    right: 0;
    left: auto;
    transform: translate(-27%, -50%);
    -webkit-transform: translate(325%, -50%);
}

.pre_requisite_page .pm.ar_class {
    right: 25%;
    left: auto;
}

.pre_requisite_page .pm.ar_class .name {
    flex-direction: row-reverse;
}

.pre_requisite_page .pm .objectives .obj.ar_class .obj_icon {
    right: 0;
    left: auto;
    transform: translate(-27%, -50%);
    -webkit-transform: translate(27%, -50%);
}

.pre_requisite_page .leadership.ar_class {
    right: 48%;
    left: auto;
}


.pre_requisite_page .leadership.ar_class .objectives .obj.ar_class .obj_icon {
    right: 0;
    left: auto;
    transform: translate(-27%, -50%);
    -webkit-transform: translate(27%, -50%);
}

.pre_requisite_page .Financial.ar_class {
    right: 71%;
    left: auto;

}

.pre_requisite_page .Financial .objectives .obj.ar_class .obj_icon {
    right: 0;
    left: auto;
    transform: translate(-27%, -50%);
    -webkit-transform: translate(27%, -50%);
}

.pre_requisite_page .Financial .objectives .obj {
    position: relative;
    margin: 30px 0px;
}

.pre_requisite_page .Financial .objectives.ar_class .obj .info {
    flex-direction: row-reverse;
}


/* pre_requisite_page End */

.resources .main.ar_class {
    flex-direction: row-reverse;
}

.vol_res.resources .back.ar_class {
    right: auto;
    left: 2%;
}

.resources .heading.ar_class {
    right: 5%;
    left: auto;
}


/* Video Page End */


/* masterclasses Page Start */

.masterclasses_page .heading.ar_class {
    left: 41%;
    right: auto;
    text-align: right;
    width: 48%;
}


.masterclasses_page .homeandcommunity.ar_class {
    left: 2%;
    right: auto;
}

.masterclasses_page .main.ar_class {
    direction: rtl;
}

.masterclasses_page .info.ar_class {
    text-align: right;
    right: auto;
}

.masterclasses_page .card.ar_class img {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.masterclasses_page .footer.ar_class {
    text-align: right;

}

/* masterclasses Page End */
/*---------------------------------------------------------*/
/* masterclass Page Start */


.masterclass_page .homeandcommunity.ar_class {
    right: 65%;
    left: auto;
}


.masterclass_page .main.ar_class {
    direction: rtl;
}

.masterclass_page .heading.ar_class {
    text-align: right;
}

.masterclass_page .learning_objectives .info.ar_class {
    text-align: right;

}

.masterclass_page .learning_objectives .cards.ar_class {
    flex-direction: row-reverse;

}

.masterclass_page .learning_objectives .cards.ar_class .card {
    padding-right: 100px;
    padding-left: 0;
    text-align: right;
}

.masterclass_page .learning_objectives .cards.ar_class .card .cardimg {

    flex-direction: row-reverse;
    right: 0%;
    left: auto;
    transform: translate(50%, -50%);
}



.masterclass_page .Sessions .info.ar_class {
    text-align: right;
}

.masterclass_page .Sessions.ar_class .Session {
    text-align: right;
}


/* well done */



.masterclass_page .well_done .exit.ar_class {
    left: 20px;
    right: auto;
}

/* masterclass Page End */

/*---------------------------------------------------------*/
/* mastervideo_page Page Start */



.mastervideo_page .heading.ar_class {
    right: 5%;
    left: auto;
    text-align: right;
}

.mastervideo_page .homeandcommunity.ar_class {
    right: auto;
    left: 2%;

}

/* Video Page End */

/*----------------------------------------------------------*/
/* create company Page Start */

/* Sections Page Start*/

.sections_page .homeandcommunity.ar_class {
    left: 2%;
    right: auto;
}

.sections_page .downshape.ar_class {
    text-align: left;
}


.sections_page .form.ar_class {
    left: auto;
    right: 8%;

}

.sections_page .form.ar_class form {
    text-align: right;
}

.sections_page .form.ar_class div {
    align-items: flex-end;
}


.sections_page .form.ar_class label {
    text-align: right;
}



.sections_page .file-upload label {
    flex-direction: row-reverse;

}

.sections_page .file-upload label img {
    margin-right: 0px;
    margin-left: 20px;

}

.sections_page .form.ar_class select {
    direction: rtl;
}

.sections_page .form.ar_class input {
    direction: rtl;
}

/* create company Page End */


/*----------------------------------------------------------*/


/* sessions_page Start */


.sessions_page .homeandcommunity.ar_class {

    left: 2%;
    right: auto;
}


.sessions_page .heading.ar_class {
    right: 5%;
    left: auto;

}

.sessions_page .cards.ar_class {

    direction: rtl;
}

.sessions_page .card.ar_class {
    text-align: right;
}


/* sessions_page End */
/*-----------------------------------------------------------*/
/*vol*/

/* session page Start */
.each_session_page .homeandcommunity.ar_class {
    direction: rtl;
    left: 2%;
    right: auto;

}

.each_session_page .mian.ar_class {
    direction: rtl;
    text-align: right;
}



.each_session_page .description.ar_class {
    text-align: right;
}


.each_session_page .well_done .exit.ar_class {

    left: 20px;
    right: auto;
}

.each_session_page .playicon.ar_class {

    left: auto;
    right: 50%;

    transform: rotateY(180deg);
    transform: translate(50%, -50%);
}

.each_session_page .vidoes.ar_class .video:nth-child(3) .content {
    float: left;
}

.each_session_page.vol_each_session_page .video.ar_class:first-child {

    justify-content: flex-start;

}

.each_session_page.vol_each_session_page .playicon.ar_class:nth-child(2) {
    right: 67% !important;
}

.each_session_page.vol_each_session_page .playicon.ar_class {
    right: 26% !important;
}

/*
.each_session_page .vidoes.ar_class {

    flex-direction: row-reverse;
}

.each_session_page .playicon.ar_class {

    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}



.each_session_page.vol_each_session_page .video.ar_class {
    justify-content: flex-start;


}
*/
/* session page End */

/*------------------------------------------------------------*/
/* Student Part End */

/* VOLANTER START */

/* levels Page Start */

.vol_levels_page .logo.ar_class {
    left: auto;
    right: 5%;
}

.vol_levels_page .logo img {
    width: 700px;
}

.vol_levels_page .homeandcommunity.ar_class {
    right: auto;
    left: 2%;
}



.vol_levels_page .cards.ar_class {
    direction: rtl;
}

.vol_levels_page .cards.ar_class .card {

    font-size: 44px;
}

.vol_levels_page .cards .card:nth-child(2) {
    align-self: flex-end;
    background-color: var(--MainColor);
}

.vol_levels_page .cards .card:nth-child(3) {
    background-color: #28708b;
}

.vol_levels_page .cards.ar_class .card .btn {
    margin-right: 0%;
    margin-left: 10%;
}

.vol_levels_page .cards.ar_class .card .cardimg {
    right: auto;
    left: -8%;

}

.vol_levels_page .cards.ar_class .card:nth-child(2) .cardimg {
    left: auto;
    right: -8%;
}


/* levels Page End */
/*------------------------------------------------------------*/
/* Sections Page Start*/

.vol_sections_page .homeandcommunity.ar_class {
    right: auto;
    left: 2%;
}

.vol_sections_page .heading.ar_class {
    text-align: right;
}

.vol_sections_page .cards.ar_class {
    flex-direction: row-reverse;
}

.vol_sections_page .card.ar_class {
    flex-direction: row-reverse;
    text-align: right;
}

.vol_sections_page .card.ar_class .icon img {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.vol_sections_page .name.ar_class {
    margin-right: 20px;
}

.vol_sections_page .buttons.ar_class {
    flex-direction: row-reverse;
}



/* Sections Page End*/
/*------------------------------------------------------------*/
/* Learn More Start */

.vol_video .back.ar_class {
    right: auto;
    left: 2%;
}


.vol_video .upheading.ar_class {
    right: 4%;
    left: auto;
    text-align: right;

}

.vol_video .main.ar_class {
    flex-direction: row;
}

.vol_video .desc.ar_class .info {
    text-align: right;
    direction: rtl;
}


.vol_video_page .heading.ar_class {
    text-align: right;
}

/* Learn More End */
/*------------------------------------------------------------*/
/* pre_requisite_page Start */

.val_pre.pre_requisite_page .back.ar_class {
    right: auto;
    left: 2%;
}


.text-right {
    text-align: right;
}

/* pre_requisite_page End */
/*------------------------------------------------------------*/
/* Extra Resources Start */
/* Extra Resources End */
/*------------------------------------------------------------*/

/*Vol Master Video Start */

/*Vol Master Video End */

/*------------------------------------------------------------*/

/* Missions Pages */

/* Defult */

.missions_page .mian.ar_class {
    direction: rtl;
    text-align: right;


}

.missions_page .homeandcommunity.ar_class {
    right: auto;
    left: 2%;

}

.missions_page .MRM .arrow.ar_class img {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}



/* Defult */


/* session1_page Start */



.session1_page .M1P1 .Empathy .inputs.ar_class div:nth-child(1),
.session1_page .M1P1 .Empathy .inputs.ar_class div:nth-child(3) {
    border-left: 3px solid var(--SubColor);
    border-right: none;
}

.M1P2.ar_class .monthes .right {
    margin-left: 20rem;
}

.border-left {
    border-left: 5px solid var(--SubColor);
}

/* session1_page End */




/*------------------------------------------------------------*/
/* session2_page Start*/

/* session2_page End*/
/*------------------------------------------------------------*/

/* session3_page Start*/
/* session4_page End*/
/*------------------------------------------------------------*/

/* Rubric and Minutes of meet */


.rubics .rate.ar_class {

    flex-direction: row-reverse;

}

.rubics .number.ar_class {

    flex-direction: row-reverse;

}


.rubics .detailes.ar_class {

    flex-direction: row-reverse;

}



/*National Competition*/
/*------------------------------------------------------------*/

/* Report Page */

.report_page {
    background: url(../images/bg_report.png);
    background-size: contain;
    background-position: center;
}

.report_page {

    .file-upload-container {
        display: flex;
        align-items: center;
        color: white;
    }


    /* team */


    .photo-upload.ar_class {
        margin-right: 0px;
        margin-left: 20px;
    }



    .member-info .title.ar_class {
        text-align: right;
    }


}


.report_page .main.ar_class {
    direction: rtl;
}

.report_page .left {
    width: 55%;
}

.report_page .right {
    width: 35%;
}




.report_page .right.ar_class {

    label {

        text-align: right;

    }


}


/* add sessions*/

.upload.ar_class {
    right: auto;
    left: 0;
}

.each_session_page .description.en_class {
    overflow-y: auto;
    height: 100px;
}

/*minutes of meeting*/

.minuts_of_meet .feildes .inputdiv.ar_class {
   
    width: 400px;
}


.upload input.ar_class::before {
    width: fit-content;
    display: block;
    content: "تحميل";
    color: #008b9c;
    background-color: var(--DarkColor);
    color: white;
    color: var(--ForthColor);
    font-weight: 600;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}
/*french*/
/* vol welcome page */
.welcome .main.fr_class {

    top: 3%;
    height: 86%;
}

.welcome .headingandstart.fr_class {

    flex-wrap: wrap;
}

/*section page  */
.sections_page .card.fr_class {

    font-size: 30px;

}

/*------------------------------*/
/* vol section page  */

.vol_sections_page .card.fr_class {

    font-size: 30px;

}

.sessions_page .card.en_class .cardname {
    overflow-y: auto;
    height: 250px;
}

/* masterclass.php */
.masterclass_page .heading.fr_class {

    font-size: 58px;

}
.masterclass_page .heading.en_class {

    font-size: 54px;

}

.mastervideo_page .heading.fr_class {
    position: absolute;
    top: 10%;
    left: 5%;
    color: white;
    font-size: 50px;
    font-weight: 600;
}

.vol_video .main.fr_class {
    position: absolute;
    height: 80%;
    top: 25%;
    width: 95%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-around;
}

.upload input.fr_class::before {
    width: fit-content;
    display: block;
    content: "Télécharger";
    color: #008b9c;
    background-color: var(--DarkColor);
    color: white;
    color: var(--ForthColor);
    font-weight: 600;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}
.session5_page {
    .upload.fr_class {
        position: absolute;
        right: 0;
        top: 0;
        width: 172px;
    }
}
.session5_page {
    .upload.fr_class input {
        font-size: 18px;
        width: 14rem;
    }
}

.session6_page {
    .upload.fr_class {
        position: absolute;
        right: 0;
        top: 0;
        width: 172px;
    }
}
.session6_page {
    .upload.fr_class input {
        font-size: 18px;
        width: 14rem;
    }
}

.session7_page {
    .upload.fr_class {
        position: absolute;
        right: 0;
        top: 0;
        width: 172px;
    }
}
.session7_page {
    .upload.fr_class input {
        font-size: 18px;
        width: 14rem;
    }
}

.session8_page {
    .upload.fr_class {
        position: absolute;
        right: 0;
        top: 0;
        width: 172px;
    }
}
.session8_page {
    .upload.fr_class input {
        font-size: 18px;
        width: 14rem;
    }
}
.session9_page {
    .upload.fr_class {
        position: absolute;
        right: 0;
        top: 0;
        width: 172px;
    }
}
.session9_page {
    .upload.fr_class input {
        font-size: 18px;
        width: 14rem;
    }
}
.session10_page {
    .upload.fr_class {
        position: absolute;
        right: 0;
        top: 0;
        width: 172px;
    }
}
.session10_page {
    .upload.fr_class input {
        font-size: 18px;
        width: 14rem;
    }
}

.session11_page {
    .upload.fr_class {
        position: absolute;
        right: 0;
        top: 0;
        width: 172px;
    }
}
.session11_page {
    .upload.fr_class input {
        font-size: 18px;
        width: 14rem;
    }
}
.session12_page {
    .upload.fr_class {
        position: absolute;
        right: 0;
        top: 0;
        width: 172px;
    }
}
.session12_page {
    .upload.fr_class input {
        font-size: 18px;
        width: 14rem;
    }
}

.session3_page .Missions {
    .M3 .designing .upload.fr_class input::before {
        width: 99%;
        content: "Télécharger le logo";
        background-color: white;
        color: var(--SubColor);
        border: 3px solid var(--DarkColor);
        font-size: 30px;
        font-weight: 600;
        padding: 1rem 0px;
        border-radius: 25px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        -ms-border-radius: 25px;
        -o-border-radius: 25px;
        text-align: center;
    }
}