@font-face {
    font-family: "peyda";
    src: url("../assets/fonts/peyda-extralight.ttf");
    font-weight: 100;
}

@font-face {
    font-family: "peyda";
    src: url("../assets/fonts/Peyda-Regular.ttf");
    font-weight: 400;
}

@font-face {
    font-family: "peyda";
    src: url("../assets/fonts/Peyda-Medium.ttf");
    font-weight: 500;
}

@font-face {
    font-family: "peyda";
    src: url("../assets/fonts/Peyda-SemiBold.ttf");
    font-weight: 600;
}

@font-face {
    font-family: "peyda";
    src: url("../assets/fonts/Peyda-ExtraBold.ttf");
    font-weight: 900;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    outline: none;
    border: none;
    user-select: none;
}

:root {
    --background-color: #0b141b;
    --primary-color: #23bf65;
    --nav-color: #303445;
    --black-text: #282c3a;
}

html,
body {
    scroll-behavior: smooth;
    font-family: "peyda", sans-serif !important;
    background: var(--background-color) !important;
    overflow-x: hidden;
}

img {
    -webkit-user-drag: none;
}

a {
    text-decoration: none !important;
}

ul {
    list-style: none;
}

nav {
    background-color: var(--nav-color);
    border-radius: 40px;
}

/*loader*/
.loader {
    width: 130px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 3px solid #ffffff;
    border-right-color: #303445;
    animation: l2 1s infinite linear;
}

@keyframes l2 {
    to {
        transform: rotate(1turn);
    }
}

/* Utilities */
.text-primary {
    color: var(--primary-color) !important;
}

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

.text-secondary {
    color: var(--nav-color) !important;
}

.bg-secondary {
    background: linear-gradient(222deg, #20222f 9.49%, #303445 92.39%)!important;
}

.btn-innerShadow {
    box-shadow: 0px 3px 11px 0px rgba(0, 0, 0, 0.57) inset;
}

.main-btn {
    background-color: var(--primary-color);
    border-radius: 50px;
    cursor: pointer;
}

.main-btn:hover {
    background-color: #23bf64b6;
    transition: all ease-in-out;
    transition-duration: 400ms;
}

.logo {
    width: 112px;
    height: 28px;
}

.bg-cta {
    background: #e81c4d;
}

.color-cta {
    color: #e81c4d;
}

.bg-cta-1 {
    border: 1px solid #e81c4d;

}

.hr {
    width: 100%;
    margin: 5% 0;
}

.title-text {
    color: var(--primary-color);
    -webkit-text-stroke: 2px #244d4d;
    font-size: 35px;
    font-weight: 900;
}

body.notScroll {
    max-height: 100vh;
    overflow: hidden;
}

main {
    margin: 40px auto 90px;;
}

.modal {
    z-index: 100002;
}

.responsive-with-75 {
    width: 75%;
}

.border-top-primary {
    border-top: 4px solid #27975b;;
}

.border-bottom-primary {
    border-top: 4px solid #27975b;;
}

.chevron-rotate{
    transform: rotate(180deg);
    transition: transform 0.3s ease;
    color: var(--primary-color);
}
@media screen and (max-width: 768px) {
    .responsive-with-75 {
        width: 100%;
    }
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
    scrollbar-width: auto;
    scrollbar-color: var(--primary-color);
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 10px;
}

*::-webkit-scrollbar-track {
    background: var(--nav-color);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 10px;
}

/* Header  */
/*header {
    position: fixed;
    width: 100%;
    height: 40px;
    right: 0;
    top: 0;
    z-index: 100001;
    transition: all 0.1s ease-in;
}*/

header .header-basket {
    position: absolute;
    background: #e81c4d;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    color: #fff;
    left: 15px;
    top: -14px;
    z-index: -1;
    font-size: 13px;
}

.header {
    height: 85px;
    background-color: var(--nav-color);
    box-shadow: 0px 26px 42px -9px rgba(0, 0, 0, 0.64);
    -webkit-box-shadow: 0px 26px 42px -9px rgba(0, 0, 0, 0.64);
    -moz-box-shadow: 0px 26px 42px -9px rgba(0, 0, 0, 0.64);
}

.nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;

}

.nav-item > a {
    font-size: 25px;
    font-weight: 500;
    transition: all 0.4s;
}

.nav-item:hover > a {
    opacity: 0.4;
}

.nav-item:hover .nav-border {
    bottom: 0;
    height: 3px;
}

.nav-border {
    position: absolute;
    bottom: -10%;
    width: 100%;
    background-color: var(--primary-color);
    height: 0;
    transition: all 0.4s;
}

.mainMobileNav {
    position: absolute;
}

.mobileNav {
    width: 100%;
    height: 100%;
    position: relative;
}

.mobileNav .dropBox {
    display: none;
    width: 100vw;
    height: 100vh;
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
}

.mobileMenu {
    position: absolute;
    top: 0;
    right: -100%;
    width: 65%;
    height: 100vh;
    z-index: 9999;
    background-color: var(--nav-color);
    box-shadow: -10px 0px 20px rgba(0, 0, 0, 0.5);
    transition: all 0.3s;
}

.mobileMenu.active {
    right: 0;
}

.mobileMenu .nav-border {
    bottom: 0;
    height: 3px;
}

.mobileMenu ul li svg {
    width: 25px;
    height: 25px;
}

.mobileMenu #closeMenu svg {
    width: 30px;
    height: 30px;
    color: var(--primary-color);
}

/* profile */
.profile p {
    font-family: "peyda" !important;
    font-weight: 600;
}

.profile img {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    border: 3px solid var(--primary-color);
}

.profile .popover {
    display: none;
    min-width: 250px;
    left: 10px;
    top: 60px;
    overflow: hidden;
}

.profile .popover.active {
    display: block;
}

.profile .popover > div {
    border-bottom: 1px dashed var(--primary-color);
    margin: 0 20px;
}

.profile .popover h6,
.profile .popover h6 + p {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /*-webkit-box-orient: vertical;*/
    overflow: hidden;
    height: 23px;
    width: 140px;
}

.profile .popover > ul > li {
    width: 100%;
    transition: all 0.4s;
}

.profile .popover > ul > li:hover {
    background-color: #20222f;
}

#roadmapPopup {
    background-color: var(--nav-color);
    position: absolute;
    max-width: 250px;
    top: 60px;
    overflow: hidden;
    left: 40%;
    padding: 10px;
    border-radius: 10px;
    opacity: 0;
    height: 0;
    transition: all 0.1s ease-in;
}

#roadmapPopup.active {
    opacity: 1;
    z-index: 1;
    height: 140px;
    box-shadow: 0px 26px 42px -9px rgba(0, 0, 0, 0.64);
    -webkit-box-shadow: 0px 26px 42px -9px rgba(0, 0, 0, 0.64);
    -moz-box-shadow: 0px 26px 42px -9px rgba(0, 0, 0, 0.64);
}

#roadmapPopup .front {
    background-color: #bf232359;
    padding: 10px;
    border-radius: 5px;
}

#roadmapPopup .back {
    background-color: #235abf59;
    padding: 10px;
    border-radius: 5px;
}

#roadmapPopup .full {
    background-color: #23bf6459;
    padding: 10px;
    border-radius: 5px;
}

#roadmapPopup a {
    transition: all 0.1s ease-in;
}

#roadmapPopup a:hover {
    opacity: 0.6;
}

@media screen and (min-width: 425px) {
    .mobileMenu {
        width: 250px;
    }
}

/* Hero Section  */
#hero {
    height: 100vh;
}

.vertical-slider {
    height: 50px;
    overflow: hidden;
}

.vertical-slider .slider-text {
    margin: 0;
    padding: 10px 0;
    font-size: 24px;
    transform: translateY(0);
    transition: transform 0.5s ease;
}

.gra {
    position: absolute;
    left: 0;
}

.hero-img {
    width: 711px;
    height: 742px;
}

.student-num {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 900;
    width: 40px;
    height: 40px;
    padding: 2px;
    background: var(--primary-color);
    border: 2px solid #fff;
    border-radius: 50%;
    z-index: 1;
    margin-left: -15px;
}

.hero-review > img {
    width: 40px;
    height: 40px;
    margin-left: -15px;
}

@media screen and (max-width: 767px) {
    .hero-img {
        width: 502px;
        height: 517px;
    }

    .gra {
        width: 216px;
        top: -20%;
        right: 20%;
    }
}

@media screen and (max-width: 425px) {
    #hero {
        margin: 50px 0;
        height: inherit;
    }

    #hero h1 {
        font-size: 15px;
    }

    #hero .main-btn {
        font-size: 14px;
        transform: translate(20%, -50%);
    }

    .hero-img {
        width: 302px;
        height: 317px;
    }

    .gra {
        display: none;
    }
}

/* Intro Section  */
#intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.intro-title {
    background-color: var(--primary-color);
    margin: -20px 0;
    z-index: 2;
}

.intro-txt {
    z-index: 1;
    padding: 70px 96px;
    border-radius: 25px;
    background: #303445;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25),
    0px 6px 6px 0px rgba(0, 0, 0, 0.21),
    0px 15px 9px 0px rgba(0, 0, 0, 0.13),
    0px 26px 10px 0px rgba(0, 0, 0, 0.04),
    0px 40px 11px 0px rgba(0, 0, 0, 0);
}

.introBG {
    margin-top: 13%;
    position: absolute;
    width: 100%;
}

@media screen and (max-width: 425px) {
    .introBG > img {
        width: 90px;
    }

    .intro-txt {
        padding: 30px 15px;
        font-size: 12px;
    }
}

@media screen and (max-width: 768px) {
    #intro {
        margin-top: 15%;
    }
}

/* Target Section  */
#target {
    text-align: center;
}

.targetBox {
    width: 100%;
    margin: 0 auto;
    border-radius: 25px;
    background: #303445;
    margin-top: 10%;
    padding: 30px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25),
    0px 6px 6px 0px rgba(0, 0, 0, 0.21),
    0px 15px 9px 0px rgba(0, 0, 0, 0.13), 0px 26px 10px 0px #0000000a,
    0px 40px 11px 0px rgba(0, 0, 0, 0);
}

.targetBox .targetItem {
    position: relative;
    border-radius: 25px;
    margin-top: -5% !important;
    padding: 60px 18px;
    padding-bottom: 10px;
    background: var(--primary-color);
    box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.44),
    0px 17px 17px 0px rgba(0, 0, 0, 0.38),
    0px 39px 23px 0px rgba(0, 0, 0, 0.23),
    0px 69px 27px 0px rgba(0, 0, 0, 0.07),
    0px 107px 30px 0px rgba(0, 0, 0, 0.01);
}

.targetBox > div > img {
    position: absolute;
    top: -25%;
    left: 20%;
    width: 120px;
    height: 120px;
}

.targetBox > div > h6 {
    color: var(--black-text);
    font-size: 20px;
    margin: 20px 0;
}

.targetBox > div > p {
    font-size: 14px;
    text-align: right;
}

@media screen and (max-width: 425px) {
    #target .targetItem {
        width: 220px;
    }

    #target .targetBox > div {
        padding: 30px 18px;
    }

    #target .targetBox > div > img {
        width: 100px;
        height: 100px;
        margin: 0 20px;
    }
}

/* Roadmap Section  */
#roadmap {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

#roadmap .road {
    transform: translate(4%, -15%);
}

#roadmap .row {
    margin-top: -35px;
}

#roadmap .roadText {
    border: 2px dashed #fff;
    font-size: 13px;
}

#roadmap h5 {
    padding: 20px 84px;
    border-radius: 25px;
    z-index: 1;
    background: var(--nav-color);
    box-shadow: 0px 11px 25px 0px rgba(0, 0, 0, 0.44),
    0px 45px 45px 0px rgba(0, 0, 0, 0.38),
    0px 101px 60px 0px rgba(0, 0, 0, 0.23),
    0px 179px 72px 0px rgba(0, 0, 0, 0.07),
    0px 280px 78px 0px rgba(0, 0, 0, 0.01);
}

.swiper {
    width: 100%;
    height: 400px;
    max-height: 430px;
}

.swiper-wrapper {
    max-height: 360px;
}

.swiper-slide {
    background-color: var(--nav-color);
    border-radius: 30px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    padding: 20px;
    position: relative;
}

.swiper-slide h3 span {
    height: 110px;
    line-height: 1.7;
}

.swiper-slide .courseLike svg {
    transition: all 0.4ms ease-in-out;
}

.swiper-slide .courseLike svg:hover {
    fill: #950d0d;
}

.borderSlider {
    border-right: 2px solid var(--primary-color);
    border-left: 2px solid var(--primary-color);
}

.swiper-slide .roadIcon {
    position: absolute;
    top: -80px;
}

.swiper-slide .course-cover {
    display: contents;
}

.swiper-pagination-bullet-active {
    background-color: var(--primary-color) !important;
}

.lastRoad {
    margin-right: -300px;
}

@media screen and (max-width: 320px) {
    #roadmap h5 {
        font-size: 1rem;
    }
}

/* Project Section */
#projects {
    width: 100%;
    height: 100%;
}

#projects > img {
    position: absolute;
    height: 580px;
    top: -120px;
    right: -30px;
}

#projects .projectBrain {
    width: 80%;
}

#projects .swiper {
    height: 30rem;
}

#projects .swiper-wrapper {
    max-height: 23rem;
    padding-top: 52px;
}

#projects .swiper-slide .courseBanner {
    background-color: var(--nav-color);
    position: absolute;
    top: -50px;
    width: 90%;
    height: 140px;
    overflow: hidden;
}

#projects .swiper-slide h3 {
    margin-top: 80px;
}

#roadmap .swiper-slide h3 {
    margin-top: 40px;
}

@media screen and (max-width: 768px) {
    #projects .swiper-wrapper a h5 {
        font-size: 1.1rem;
    }

    #projects .swiper-wrapper a p {
        font-size: 0.9rem;
    }
}

/* Blog Section  */
#blog {
    position: relative;
    left: 0;
    width: 83.5vw;
    overflow-x: hidden;
}

.singleBlog {
    margin: 4.3% 0;
    rotate: 0deg;
    transform: translate(0%, 0%);
    transition: all 0.3s ease-in-out;
}

.singleBlog:hover {
    left: auto;
    rotate: 15deg;
    transform: translate(10%, -10%);
}

.blogCard {
    width: 283px;
    margin-left: -20px;
    border-radius: 25px;
    background: linear-gradient(222deg, #20222f 9.49%, #303445 92.39%);
    box-shadow: 0px 11px 25px 0px rgba(0, 0, 0, 0.5),
    0px 280px 78px 0px rgba(0, 0, 0, 0.01);
}

.blogCard > p {
    padding: 10px 0;
}

.blogCard > img {
    width: 156px;
}

.mobileCard {
    position: relative;
    margin: 20% 10%;
    border-radius: 25px;
    padding: 0px 15px;
    background: linear-gradient(222deg, #20222f 9.49%, #303445 92.39%);
    box-shadow: 0px 11px 25px 0px rgba(0, 0, 0, 0.5),
    0px 280px 78px 0px rgba(0, 0, 0, 0.01);
}

.mobileCard > div > p {
    margin-bottom: 10%;
    margin-top: 30%;
}

.mobileCard .img {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -30%;
    left: 5.4%;
    width: 90%;
    height: 60%;
    border-radius: 15px;
    background-color: var(--nav-color);
}


/* instagram banner */
.instagram {
    background: linear-gradient(
        123.75deg,
        #f3632e 0%,
        #d62c73 46.5%,
        #9132c0 100%
    );
    border-radius: 40px;
}

.instalink svg {
    transition: all 0.3s ease-in-out;
}

.instalink:hover > svg {
    transform: translateX(-10px);
}

@media screen and (max-width: 1024px) {
    #blog {
        width: 95.7vw;
    }
}

/* Faq Section */

/* text box container */

.exText {
    overflow: hidden;
    height: 300px;
    transition: height 0.5s ease;
    padding: 15px;
}

.show {
    cursor: pointer;
    margin-bottom: -35px;
    background: rgba(0, 0, 0, 0.8);
}

.exText.open {
    height: auto;
}

.more .show svg {
    margin-left: 5px;
    transition: transform 0.5s ease;
}

/* main faq */

.faqImg:nth-child(3) {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

#faq .contentBox {
    border-radius: 25px;
    margin: 30px 0;
    cursor: pointer;
    background: linear-gradient(222deg, #20222f 9.49%, #303445 92.39%);
    box-shadow: 0px 11px 25px 0px rgba(0, 0, 0, 0.44),
    0px 45px 45px 0px rgba(0, 0, 0, 0.38),
    0px 101px 60px 0px rgba(0, 0, 0, 0.23),
    0px 179px 72px 0px rgba(0, 0, 0, 0.07),
    0px 280px 78px 0px rgba(0, 0, 0, 0.01);
}

#faq .contentBox > div {
    gap: 3rem;
}

#faq .contentBox .accordion-content {
    display: none;
    transition: all 0.4s ease-in-out;
}
#faq .contentBox .question.active {
    color: var(--primary-color);
    transition: all 0.3s ease-in-out;
}

#faq .contentBox .acc_icon,
#faq .contentBox .question {
  color: #fff;
}


#faq .codes img {
    width: 300px;
    height: 150px;
    object-fit: cover;
    margin: 20px 0;
    border-radius: 15px;
}

#faq .codes .codeNav {
    background-color: var(--nav-color);
    border-radius: 20px;
    width: 80%;
}

@media screen and (max-width: 425px) {
    .faqImg {
        display: none;
    }

    #faq .contentBox {
        padding: 0;
        border-radius: 25px;
    }

    #faq .contentBox > div {
        gap: 0;
    }

    #faq .contentBox div > p {
        font-size: 14px !important;
        width: 100%;
    }

    #faq .contentBox .acc_icon {
        width: 25px;
        height: 25px;
    }
}

@media screen and (max-width: 768px) {
    .faqImg {
        display: block;
        width: 100px;
    }

    #faq .contentBox .content {
        padding: 0 20px;
    }

    .responsive_table {
        border: 0;
    }

    .responsive_table caption {
        font-size: 1.3em;
    }

    .responsive_table thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    .responsive_table tr {
        border-bottom: 3px solid #ddd;
        display: block;
        margin-bottom: 0.625em;
    }

    .responsive_table td {
        border-bottom: 1px solid #ddd;
        display: block;
        text-align: right;
    }

    .responsive_table td::before {
        /*
        * aria-label has no advantage, it won't be read inside a table
        content: attr(aria-label);
        */
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
    }

    .responsive_table td:last-child {
        border-bottom: 0;
    }
}

@media screen and (max-width: 1024px) {
    #faq .codes > img {
        width: 300px;
    }
}

/* Footer */
footer {
    padding: 50px 0;
    border-radius: 60px 60px 0px 0px;
    background: #2c2f3f;
}

footer .link {
    color: white;
    font-weight: 100;
    opacity: 1;
    transition: all 0.2s ease-in-out;
}

footer .link:hover {
    opacity: 0.5;
}

footer ul .link::before {
    content: "-";
    margin: 0 4px;
}

footer #scrollTopBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 35px;
    z-index: 99;
    font-size: 58px;
    border: none;
    outline: none;
    background-color: transparent;
    color: white;
    cursor: pointer;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}

.collapsible {
    height: 810px;
    overflow: hidden;
    transition: height 0.3s ease;
}

.collapsible:before {
    z-index: 1;
    position: absolute;
    content: "";
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--background-color) 100%);
    inset: 70% 0 0 0;
}

.collapsible.hide-before::before {
    display: none;
}

.showMore button {
    backdrop-filter: blur(4px);
    opacity: 1;
    background: #f0f8ff0f;
    transition: height 0.3s ease;
    z-index: 1;
}