/* Style For New UI 16-3-2024 */
@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');

:root {
    --primary-color: #00A0E6;
    --primary-color-25: #2B4EA040;
    --primary-color-8: #00A0E614;
    --Secondary-color: #2B4EA0;
    --third-color: #D3EAFF;
    --muted-color: #8E8E93;
    --muted-color-5: #E5E5EA;
    --light-muted: #F2F2F799;
    --red-color: #FF3B30;
    --yellow-color: #FFCC00;
    --green-color: #34C759;
    --tx-dark-color: #36343B;
    --tx-dark-color-2: #3C3C4399;

}

.not-pointer {
    pointer-events: none;
    user-select: none;
    cursor: none;
}

/* تنسيقات خاصة بالفيديوهات التي يتم تضمينها */
iframe {
    max-width: 100%;
    aspect-ratio: 16 / 9;
}

/* Start Ready CLasess */
.selected {
    background-color: #f0f0f0;
    font-weight: bold;
}

/* Fixed Header */

.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    -webkit-animation: sticky 1s;
    animation: sticky 1s;
    -webkit-box-shadow: 2px 4px 8px rgba(33, 40, 50, 0.15);
    box-shadow: 2px 4px 8px rgba(33, 40, 50, 0.15);
    background-color: #fff;
    padding: 10px;
}

#goToTop {
    position: fixed;
    bottom: 120px;
    left: 40px;
    width: 55px;
    height: 55px;
    background-color: #f3f5f9cc;
    backdrop-filter: blur(12px);
    box-shadow: 0px 4px 12px #2B4EA033;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
    transform: scale(1);
    z-index: 99;
}

#goToTop::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(296.57deg, #CDCED1 52.76%, #2B4EA0 69.87%);
    -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
    mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

#goToTop:hover {
    transform: scale(1.1);
    opacity: 1;
}

/* Fixed Header */

/* Start Spacing */


.section-padding {
    padding-top: 80px;
    padding-bottom: 80px;
}

@media only screen and (max-width: 767px) {
    .section-padding {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

.section-padding-02 {
    padding-top: 40px;
}

@media only screen and (max-width: 767px) {
    .section-padding-02 {
        padding-top: 20px;
    }
}


/* End Spacing */

.object-cover {
    object-fit: cover !important;
}

/* Sign Button */

.primary-btn {
    background-color: var(--primary-color);
    color: #ffffff;
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    transition: all .3s linear;
}

.secondary-btn {
    color: #ffffff;
    background-color: var(--Secondary-color);
    padding: 7px 14px !important;
    border-radius: 6px;
    transition: all .3s linear;
    border: 1px solid var(--Secondary-color);
}

.third-btn {
    color: #ffffff;
    background-color: var(--third-color);
    padding: 14px 20px !important;
    border-radius: 6px;
    transition: all .3s linear;
    border: 1px solid var(--third-color);
}

.primary-btn:hover {
    background-color: var(--Secondary-color) !important;
    color: var(--primary-color) !important;
}

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

.third-btn:hover {
    background-color: transparent;
    color: var(--third-color);
}


/* text colot  */

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

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

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

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

.text-color-muted-5 {
    color: var(--muted-color-5) !important;
}

.text-dark-muted {
    color: var(--tx-dark-color) !important;
}

.text-color-yellow {
    color: var(--yellow-color);
}

/* Background */
.bg-color-primary {
    background-color: var(--primary-color);
}

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

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

.bg-light-muted {
    background-color: var(--light-muted);
}

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

.bg-light-muted-2 {
    background-color: #f5f5f9;
}

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

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

/* Border */

.prim-border {
    border: 1px solid rgba(5, 18, 66, 0.12);
}

.secon-border {
    border: 1px solid #F2F2F7;
}


/* Shadow */

.third-shadow-hover:hover {
    box-shadow: 6px 8px 2px rgba(44, 126, 179, 0.5);
    transition: all .3s linear;
}

/* End Ready CLasess */


/* Start Breadcrumb */
.breadcrumb .breadcrumb-item a {
    color: var(--muted-color);
}

.breadcrumb-item.active {
    color: var(--tx-dark-color);
}


/* End Breadcrumb */

.auto-scroll-y {
    max-height: 400px;
    overflow-y: auto;
}

.max-height-70 {
    height: 70px;
    overflow: hidden;
}

.max-height-90 {
    height: 90px;
    overflow: hidden;
}

.max-height-120 {
    height: 120px;
    overflow: hidden;
}

/* Start Flex Layout Screen Large */

.main-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

main#main-content {
    flex: 1 1 0%;
}


/* End Flex Layout Screen Large */


/* Start Header---------- */

@media (min-width: 991px) {
    .main-header.sticky {
        background-color: rgb(255 255 255 / 95%);
        padding: 0;
    }

    .main-header .bottom-header {
        background-color: var(--Secondary-color);
        padding: 10px 0;
    }

    .main-header .bottom-header .menu-container ul.main-menu {
        display: flex;
        align-items: center;
        /* gap: 15px; */
        justify-content: space-around;
    }
}

.main-header .top-header .container {
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.main-menu .menu_item .menu_link {
    color: #ffffff;
    font-size: clamp(14px, 16px, 4vw) !important;
}

@media (min-width: 991px) {
    .main-menu .menu_item .menu_link.active {
        border-bottom: 3px solid var(--third-color);
    }
}

.main-menu .menu_item .sign-btn {
    background-color: var(--Secondary-color);
    color: #ffffff;
}

.main-menu .menu_item .join-btn {
    color: var(--Secondary-color);
}

.main-menu .menu_item .join-btn,
.main-menu .menu_item .sign-btn {
    border: 1px solid var(--Secondary-color);
    padding: 12px 14px;
    border-radius: 6px;
    transition: all .3s linear;
}

@media (max-width: 768px) {

    .main-menu .menu_item .join-btn,
    .main-menu .menu_item .sign-btn {
        padding: 7px 5px;
        font-size: 10px;
    }

}

.main-menu .menu_item .join-btn:hover {
    background-color: var(--Secondary-color);
    color: #ffffff;
}

.main-menu .menu_item .sign-btn:hover {
    color: var(--Secondary-color);
    background-color: #ffffff;
}


/* End Header---------- */


/* Start Hero section --------- */

.hero {
    max-height: 80dvh !important;
}

.hero-section {
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 65dvh;
    padding: 4rem 0;
}

.swiper-homePage .swiper-slide {
    position: relative;
}

/* .swiper-homePage .img-back-cube::after,
.swiper-homePage .img-back-cube::before {
    background-image: url('../images/newimages/Elements-geometric-pattern-chess-white.svg');
} */

/* .swiper-homePage .img-back-cube::before {
    bottom: -9% !important;
} */

.swiper-homePage .hero-content {
    position: relative;
    padding: 3.5rem 4rem;
    overflow: hidden;
    /* background-color: var(--Secondary-color); */
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
    /* height: 580px; */
}


.swiper-homePage .hero-content .home-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.swiper-homePage .hero-content .hero-image {
    position: relative;
    z-index: 2;
}

.swiper-homePage .hero-content .hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.swiper-homePage .home-title {
    color: #ffffff;
    font-size: clamp(1.3rem, 1.6rem, 4vw);
    padding-bottom: 22px;
    font-weight: 700;
}


.swiper-homePage .hero-content .home-content p {
    color: #ffffff;
    margin: 5px 0;
    line-height: 32px;
    font-size: clamp(17px, 20px, 4vw);
    font-weight: 300;
}

.swiper-homePage .hero-content .banerRegisterBTN {
    color: #fff;
    background-color: var(--Secondary-color);
    padding: 14px 20px !important;
    border-radius: 6px;
    transition: all .3s linear;
    border: 1px solid var(--Secondary-color);
    font-size: clamp(.8rem, 1.1rem, 4vw);
}

.swiper-homePage .hero-content .banerRegisterBTN:hover {
    background-color: transparent;
}

@media (max-width: 991px) {
    .swiper-homePage .hero-content {
        flex-direction: column;
    }

    .swiper-homePage .hero-content .home-content p {
        margin: 5px 0;
    }

    .swiper-homePage .home-content .banerRegisterBTN {
        padding: 8px 12px !important;
    }

    .swiper-homePage .bg-hero-image {
        min-height: 85dvh;
    }

}

@media (max-width: 768px) {
    .swiper-homePage .hero-content {
        padding: 1.5rem;
    }

    .swiper-homePage .img-back-cube {
        height: auto;
    }
}
/* 
@media (max-width: 430px) {

    .swiper-homePage .img-back-cube::after,
    .swiper-homePage .img-back-cube::before {
        content: none;
    }

} */

.swiper-homePage .swiper-button-next:after,
.swiper-homePage .swiper-button-prev:after {
    font-size: 20px;
    color: white;
}


/* End Hero section --------- */


/* Start Social Media Fixed */

.fixed-social {
    position: fixed;
    background-color: #f3f5f9cc;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    border: 1px solid #06060614;
    backdrop-filter: blur(5px);
    width: 35px;
    padding: 5px;
    left: 0;
    top: 270px;
    z-index: 555;
}

.fixed-social ul {
    text-align: center;
    color: #000;
    gap: 5px;
    font-size: 10px;
}

.fixed-social ul li a i {
    width: 20px;
    height: 20px;
    margin-bottom: 5px;
}


/* End Social Media Fixed */

/* Start About Section */
.about-college {
    position: relative;
}

.about-college .content {
    background-color: #CCECFA;
    border-radius: 32px;
    border: 1px solid #D5DCEC;
    box-shadow: 0px 1px 4px #0C0C0D0D;
    overflow: hidden;
}

.about-college .text {
    padding: 10px 50px;
    margin: 0px 50px;
}

.about-college .text p {
    text-align: justify;
    margin: 15px 0px;
    line-height: 1.8;
    color: #ffffff;
    font-size: 17px;
}

.about-college .image {
    max-width: 575px;
    height: 100%;
    display: flex;
    align-items: end;
    justify-content: center;
}

html[dir="ltr"] .about-college .image {
    transform: rotateY(180deg);
}

.about-college .image img {
    width: 100%;
    height: 500px;
    object-fit: contain;
    object-position: bottom;
    position: relative;
    z-index: 6;
}

.about-college .about-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 35px;
    background-color: #ffffff;
    border-radius: 24px;
    border: 1px solid #CDCED1;
    box-shadow: 0px 1px 4px #0C0C0D0D;
    height: 180px;
    position: relative;

}

.about-college .about-item .icon {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 60px;
    height: 60px;
    background-color: var(--primary-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-college .about-item .icon::after {
    content: "";
    position: absolute;
    height: 100%;
    border-width: 30px;
    border-style: solid;
    border-color: transparent var(--primary-color) transparent transparent;
    left: -55px;
    top: 0;
}

.about-college .about-item .icon img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

.about-college .about-item .statistic {
    color: #82858C;
    font-weight: 500;
    font-size: clamp(21px, 25px, 4vw);
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: center;
}

.about-college .about-item .statistic span {
    font-weight: 800;
    font-size: clamp(28px, 35px, 4vw);
    margin: 0px 3px;
    color: var(--Secondary-color);
}

@media (max-width: 804px) {
    .about-college .image {
        max-width: 350px;
    }

    .about-college .image img {
        height: 350px;
    }
}

@media (max-width: 620px) {
    .about-college .image {
        max-width: 250px;
    }

    .about-college .image img {
        height: 250px;
    }
}

@media (max-width: 575px) {
    .about-college .about-item {
        justify-content: center;
    }

    .about-college .text {
        padding: 10px;
        margin: 0px;
    }
}

/* ENd About Section */

/* Start Statistics */

#statistics .box {
    border: 1px solid var(--primary-color);
    transition: all .4s linear;
    background-color: #ffffff;
    border-radius: 16px;
    padding: 18px;
    /* min-height: 200px;*/
}

#statistics .box:hover {
    -webkit-box-shadow: 6px 7px 1px var(--Secondary-color);
    -ms-box-shadow: 6px 7px 1px var(--Secondary-color);
    box-shadow: 6px 7px 1px var(--Secondary-color);
}

#statistics .box .image {
    width: 100px;
    height: 100px;
    margin: auto;
}

#statistics .box .image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#statistics .box .info p {
    color: var(--primary-color);
    text-align: center;
    font-weight: 500;
    font-size: clamp(14px, 18px, 5vw);
    padding-top: 25px;
}

#statistics .box .info p span {
    font-weight: 700;
    color: var(--third-color);
}


/* End Statistics */


/* Start services */

#services .services-content .services-info .image {
    width: 90px;
    height: 90px;
}

#services .services-content .services-left-image img,
#services .services-content .services-info .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html[dir="ltr"] #services .services-content .services-left-image img {
    transform: rotateY(180deg);
}

#services .services-content .services-left-image {
    width: 400px;
    height: 500px;
    position: relative;
}


/* End services */


/* Start Latest Courses Section */

#latest-courses {
    background-color: #f9f9f9;
}

.courses-content .single-courses .item-courses {
    padding: 16px;
    border-radius: 16px;
    transition: all .3s linear;
    background-color: #ffffff;
}

.courses-content .single-courses .item-courses:hover {
    box-shadow: 6px 8px 2px rgba(44, 126, 179, 0.5);
}

.single-courses .courses-images {
    height: 150px !important;
    position: relative;
}

.single-courses .courses-images .favorite-btn {
    position: absolute;
    background-color: #ffffff;
    border-radius: 40px;
    padding: 4px;
    right: 5%;
    top: 5%;
    width: 36px;
    height: 36px;
}

.single-courses .courses-images .favorite-btn.added svg {
    fill: #FF3B30;
    stroke: #FF3B30;
}

.single-courses .courses-images a img {
    height: 100% !important;
    border-radius: 12px !important;
    object-fit: cover;
    width: 100%;
}

.courses-content .single-courses {
    margin-top: 15px;
    border: none !important;
}

.categories .item-categ {
    color: var(--primary-color);
    background-color: transparent;
    border: none;
    border-radius: 0px;
    border-bottom: 2px solid transparent;
    transition: all .3s linear;
}

.categories .item-categ.active {
    color: var(--primary-color);
    font-weight: bold;
    border-bottom: 2px solid var(--Secondary-color);
    border-radius: 0px;
    text-align: center;
}

.lecturer-image {
    width: 30px;
    height: 30px;
}

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

#latest-courses .swiper-action-filter .swiper-prev.swiper-button-disabled,
#latest-courses .swiper-action-filter .swiper-next.swiper-button-disabled {
    color: #D1D1D6;
    border: 2px solid #D1D1D6;
    border-radius: 50%;
    margin-right: -10px;
    margin-left: -10px;
}

#latest-courses .swiper-action-filter .swiper-prev,
#latest-courses .swiper-action-filter .swiper-next {
    color: var(--Secondary-color);
    border: 2px solid var(--Secondary-color);
    border-radius: 50%;
    margin-right: -10px;
    margin-left: -10px;
    width: 32px;
    height: 32px;
}

#latest-courses #progress-bar-container {
    position: relative;
    background-color: var(--muted-color-5);
    width: 100%;
    height: 8px;
    border-radius: 12px;
}

#latest-courses #progress-bar-container .progress-bar {
    position: absolute;
    background-color: var(--Secondary-color);
    border-radius: 8px;
    height: 100%;
}

/* End Latest Courses Section */


/* Start Teachers Section */

.teacher-box .teachers-image {
    max-width: 250px;
    height: 300px;
    margin: auto;
    position: relative;
    z-index: 5;
    background-color: var(--Secondary-color);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
    overflow: hidden;
    box-shadow: 0px 1px 4px 0px #0C0C0D0D;
    border-radius: 12px;
}

.teacher-box .teachers-image>img {
    width: 200px;
    height: 270px;
    object-fit: cover;
}


.teacher-box .teacher-info {
    border-radius: 16px;
    box-shadow: 0px 2px 12px#05124214;
    padding: 35px 15px 10px;
    min-height: 150px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-direction: column;
}

.teacher-box .teacher-info .top-info a {
    color: var(--primary-color);
    font-weight: 600;
}

.homepageLecturer .teacher-box .teacher-info {
    min-height: 180px;
}

.custome-pagination {
    position: relative;
    gap: 15px;
    margin-top: 35px;
}

.custome-pagination .swiper-pagination-bullet {
    width: 45px;
    height: 6px;
    border-radius: 8px;
    background-color: #4E6CB0;
}

@media (max-width: 768px) {
    .teacher-box {
        text-align: center;
        padding: 20px;
    }

    .teacher-box .bottom-info {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
}

.teachers-active .swiper-grid-column>.swiper-wrapper {
    flex-direction: row !important;
}

/* End Teachers Section */


/* Start How We Work */

#how-work {
    background-color: var(--primary-color);
    border-radius: 16px;
    padding: 10px;
    /* max-width: 1075px; */
    margin: auto;
    position: relative;
}

#how-work .content {
    /* border: 2px dashed var(--Secondary-color); */
    border-radius: 16px;
    padding: 25px;
}

#how-work .content .image {
    position: absolute;
    right: -50px;
    width: 300px;
    height: 300px;
}

html[dir="ltr"] #how-work .content .image {
    right: unset;
    left: -50px;
}

@media (max-width: 991px) {
    #how-work .content {
        padding: 10px;
    }

    #how-work .content .image {
        width: 150px;
        height: 150px;
        position: unset;
        margin: 20px auto 10px;
    }

    #how-work .content {
        padding: 3px;
    }

    .widget_item-works .widget_item-title p,
    .widget_item-works .widget_item-title span {
        font-size: 13px;
    }
}

#how-work .content .image .right-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border: 2px dashed var(--Secondary-color);
    border-radius: 16px;
}

#how-work .content .image .exper-image {
    position: absolute;
    bottom: -50px;
    left: -70px;
    background-color: rgba(254, 254, 254, 0.48);
    backdrop-filter: blur(10px);
    padding: 30px 10px;
    border-radius: 16px;
    height: 202px;
    width: 202px;
    text-align: center;
}

html[dir="ltr"] #how-work .content .image .exper-image {
    left: unset;
    right: -70px;
}

#how-work .content .image .exper-image p {
    width: 140px;
    margin: auto;
    color: var(--primary-color);
    font-size: 24px;
}

#how-work .content .info {
    /* max-width: 590px; */
    max-width: 96%;
    height: 400px;
    overflow: hidden;
    padding: 10px;
    padding-right: 6%;
    padding-left: 3%;
}

#how-work .content .info::-webkit-scrollbar {
    display: none;
}

#how-work .content .info .widget_item-works {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 6px;
    margin: 10px;
}

@media (max-width: 768px) {
    #how-work .content .info .widget_item-works {
        text-align: center;
        flex-direction: column;
        padding: 15px;
        margin: 5px;
        gap: 10px;
    }
}

#how-work .content .info .widget_item-works .widget_item-icon {
    border-radius: 6px;
    background-color: var(--Secondary-color);
    color: var(--primary-color);
    font-size: clamp(18px, 24px, 4vw);
}

#how-work .content #scroll-down,
#how-work .content #scroll-up {
    position: absolute;
    z-index: 55;
    left: 0;
}

html[dir="ltr"] #how-work .content #scroll-down,
html[dir="ltr"] #how-work .content #scroll-up {
    right: unset;
    left: -15px;
}

#how-work .content #scroll-down {
    bottom: 0;
}

#how-work .content #scroll-up {
    top: 0;
}

@media (max-width: 768px) {

    #how-work .content #scroll-down,
    #how-work .content #scroll-up {
        left: -9px;
    }

    #how-work .content #scroll-up {
        top: 9px;
    }
}


/* End How We Work */


/* Start Testimonials Section */

.testimonial-wrapper .testimonial-author {
    padding: 15px;
}

.testimonial-wrapper .testimonial-author img {
    margin-bottom: -55px;
    width: 75px;
    height: 75px;
    border-radius: 50%;
}

.testimonial-wrapper .testimonial-slide .testimonial-author {
    display: flex;
    flex-direction: column;
    min-height: 325px;
}

.testimonial-wrapper .testimonial-box {
    border-radius: 16px;
    box-shadow: 0px 2px 12px rgba(5, 18, 66, 0.08);
    padding: 20px 25px 35px 25px;
    flex-grow: 1;
}

.testimonial-wrapper .testimonial-box .testimonial-content {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonial-active .swiper-pagination {
    height: 22px !important;
    position: relative;
    margin-top: 30px;
}

.testimonial-wrapper .swiper-pagination-bullet-active {
    outline: 1px solid #4E6CB0;
    outline-offset: 2px;
}


/* End Testimonials Section */


/* Strat Partners Section */
.our-partners {
    background-color: var(--Secondary-color);
}

.brand-logo .brand-item {
    background-color: #F9F9F9;
    padding: 10px;
    outline: 12px solid #FFFFFF66;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 25px;
    aspect-ratio: 1/1;
    /* width: 256px; */
}

.brand-logo .brand-item .image {
    margin: auto;
    width: 75%;
    height: 75%;
}

.brand-logo .brand-item .image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (min-width: 991px) {

    .brand-logo .swiper-next,
    .brand-logo .swiper-prev {
        margin: 0px -20px;
    }
}


/* End Partners Section */

/* Start Latest Articles Section */
.latest-articles {
    background-color: #f9f9f9;
}

.latest-articles .article-item {
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0px 2px 12px 0px #FEFEFE1F;
    transition: all .3s linear;
    border: 1px solid transparent;
    overflow: hidden;
}

.latest-articles .article-item .image {
    padding: 15px;
}

.latest-articles .article-item .content {
    padding: 15px;
}

.latest-articles .article-item .image img {
    width: 100%;
    height: 200px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.latest-articles .article-item .date {
    padding: 15px;
}

html[dir="rtl"] .latest-articles .article-item .date {
    border-right: 1px solid #3C3C4399;
}

html[dir="ltr"] .latest-articles .article-item .date {
    border-left: 1px solid #3C3C4399;
}

.latest-articles .article-item:hover {
    border: 1px solid var(--Secondary-color);
}

.latest-articles .article-item .read-more {
    display: flex;
    visibility: hidden;
    background-color: var(--Secondary-color);
}

.latest-articles .article-item .read-more a {
    border-radius: 8px;
}

.latest-articles .article-item .read-more a {
    margin: -20px 25px 0px;
}

.latest-articles .article-item:hover .read-more {
    visibility: visible;
}

.latest-articles .swiper-pagination-bullet {
    width: 48px;
    height: 6px;
    background-color: var(--muted-color);
    border-radius: 8px;
}

.latest-articles .swiper-pagination-bullet-active {
    background-color: var(--Secondary-color);
}

/* End Latest Articles Section */


/* Start Latest news Section */
.latest-news {
    background-color: #f9f9f9;
}

.latest-news .article-item {
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0px 2px 12px 0px #FEFEFE1F;
    transition: all .3s linear;
    border: 1px solid transparent;
    overflow: hidden;
}

.latest-news .article-item .image {
    padding: 15px;
}

.latest-news .article-item .content {
    padding: 15px;
}

.latest-news .article-item .image img {
    width: 100%;
    height: 200px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.latest-news .article-item .date {
    padding: 15px;
}

html[dir="rtl"] .latest-news .article-item .date {
    border-right: 1px solid #3C3C4399;
}

html[dir="ltr"] .latest-news .article-item .date {
    border-left: 1px solid #3C3C4399;
}

.latest-news .article-item:hover {
    border: 1px solid var(--Secondary-color);
}

.latest-news .article-item .read-more {
    display: flex;
    visibility: hidden;
    background-color: var(--Secondary-color);
}

.latest-news .article-item .read-more a {
    border-radius: 8px;
}

.latest-news .article-item .read-more a {
    margin: -20px 25px 0px;
}

.latest-news .article-item:hover .read-more {
    visibility: visible;
}

.latest-news .swiper-pagination-bullet {
    width: 48px;
    height: 6px;
    background-color: var(--muted-color);
    border-radius: 8px;
}

.latest-news .swiper-pagination-bullet-active {
    background-color: #ffffffc8;
}

/* End Latest news Section */


/* Start our-partners Section swiper-pagination */
.our-partners .swiper-pagination-bullet {
    width: 48px;
    height: 6px;
    background-color: var(--muted-color);
    border-radius: 8px;
}

.our-partners .swiper-pagination-bullet-active {
    background-color: #ffffffc8;
}

/* End our-partners Section */

/* Start Lecturers Page---------------------- */

.form-check-input:checked {
    background-color: var(--third-color) !important;
    border-color: var(--third-color) !important;
}

.form-search-by-name .search-box,
.form-search-by-title .search-box {
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 8px;
    background-color: #ffffff;
}

.form-search-by-name .search-box:first-child>*,
.form-search-by-title .search-box:first-child>* {
    padding: 10px;
}

.form-search-by-name .search-box .search-btn,
.form-search-by-title .search-box .search-btn {
    background-color: var(--primary-color);
    color: #ffffff;
    font-size: clamp(16px, 20px, 5vw);
    padding-left: 14px;
    padding-right: 14px;
}

@media (max-width: 369px) {

    .form-search-by-name .search-box,
    .form-search-by-title .search-box {
        flex-direction: column;
    }

    .form-search-by-title .search-box .icon {
        display: none;
    }

    .form-search-by-title .search-box input {
        width: 100%;
    }

    .form-search-by-name .search-box .search-btn,
    .form-search-by-title .search-box .search-btn {
        width: 100%;
    }
}

.filter-body .select-item {
    border-radius: 8px;
    color: var(--muted-color);
    padding: 12px;
    font-size: 15px;
}

.filter-body .tab-filter li {
    width: 100%;
}

.filter-body .tab-filter label,
.filter-body label.dropdown-item {
    padding: 5px !important;
    height: 35px !important;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}


/* End Lecturers Page------------------------ */


/* Start Single Course Page------------------------ */

.courseFrontPage {
    background-color: #f5f5f9;
}

/* start hero section */

.single-page-hero-section {
    padding: 2rem 0;
}

.content .course-info .text-desc {
    max-width: 550px;
}

.single-page-hero-section .image {
    width: 250px;
    height: 250px;
}

.single-page-hero-section .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}


/* end hero section */
.courseFrontPage .card-course .status .circle-progress {
    background-color: #78788014;
    padding: 5px;
}

.courseFrontPage .card-course .status .circle-progress .circle-progress-text {
    font-size: 25px;
}

.widget__item-faq:not(:last-child) {
    border-bottom: 1px solid var(--tx-dark-color);
}

.widget__item-faq:not(.collapsed) {
    background-color: #ffffff;
}

#course-information .video {
    text-align: center;
    margin: auto;
}

#course-information .video .img-video {
    width: 480px;
    height: 210px;
    object-fit: fill;
}

@media (max-width: 768px) {

    .single-page-hero-section .image,
    #course-information .video .img-video {
        width: 250px;
        height: 190px;
    }
}

.card-course .tools-list {
    list-style: disc;
}

.card-course .ctf-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#privet-lesson .card-course .teachers-image,
#course-curriculum .card-course .teachers-image {
    width: 80px;
    height: 80px;
    position: relative;
}

#privet-lesson .card-course .teachers-image img,
#course-curriculum .card-course .teachers-image img {
    width: 100%;
    border-radius: 8px;
    height: 100%;
    object-fit: cover;
}

#privet-lesson .card-course .teachers-image::after,
#course-curriculum .card-course .teachers-image::after {
    content: "";
    position: absolute;
    top: -10px;
    right: -10px;
    background-image: url(../images/verified.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 25px;
    height: 25px;
}


/* End Single Course Page------------------------ */


/* Start Blog Page --------------------------------*/

.header-blog {
    background-color: var(--Secondary-color);
    padding: 30px 0;
}

.header-blog .menu-blog li a {
    color: #ffffff;
    font-size: clamp(17px, 20px, 5vw);
}

.header-blog .menu-blog li a.active {
    position: relative;
}

.header-blog .menu-blog li a.active::before,
.header-blog .menu-blog li a.active::after {
    content: '';
    position: absolute;
    background-color: var(--primary-color);
}

.header-blog .menu-blog li a.active::after {
    transform: translateY(-50%);
    top: 50%;
    right: -20px;
    height: 10px;
    width: 10px;
    border-radius: 50%;
}

.header-blog .menu-blog li a.active::before {
    width: calc(100% + 20px);
    height: 2px;
    bottom: -25%;
    left: 0;
}

.swiper-blog .blog-image {
    width: 100%;
    height: 100%;
}

.swiper-blog .blog-image>img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}


section.section {
    position: relative;
    background-color: #ffffff;
}

section.top-section {
    max-height: 80dvh;
    overflow: hidden;
}

section.top-section::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(360deg, rgba(43, 78, 160, 0.12) 89.14%, #2B4EA0 101.67%);

}

.blog-page .categories {
    border: 1px solid #F2F2F7;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0px 4px 4px #0C0C0D0D, 0px 4px 4px #0C0C0D1A;
    padding: 32px;
}

.blog-page .categories .border-bottom {
    border-bottom: 1px solid #CDCED1;
}

.blog-page .categories .item-categ,
.blog-page .categories .years-filter .year {
    display: block;
    border: 1px solid #F2F2F7;
    box-shadow: 0px 1px 4px #0C0C0D0D;
    padding: 12px 16px;
    text-align: center;
    border-radius: 8px;
}

.blog-page .categories .item-categ.active,
.blog-page .categories .years-filter .year.active {
    background-color: #ECF2FF;
    border: 1px solid var(--Secondary-color);
}

section.top-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.latestBlog .img-back-cube {
    width: 100%;
}

/* html[dir="rtl"] .latestBlog .img-back-cube::before {
    bottom: -6%;
} */

.latestBlog .img-back-cube .blog-hero-section {
    /* height: 80%; */
}

.latestBlog .img-back-cube .blog-hero-section img {
    object-fit: cover;
    object-position: top;
    max-height: 395px;
    width: 100%;
}

.blog-page .categories .item-categ {
    text-align: start;
    position: relative;
    color: #30353F;
    margin-bottom: 15px;
}

.blog-page .categories .item-categ.active::after {
    content: url(../images/svg/check2-circle.svg);
    position: absolute;
    bottom: 50%;
    transform: translateY(50%);
    width: 24px;
    height: 24px;
}

html[dir="rtl"] .blog-page .categories .item-categ.active::after {
    left: 5%;
}

html[dir="ltr"] .blog-page .categories .item-categ.active::after {
    right: 5%;
}

.latestBlog .blog-item>.info-blog {
    position: relative;
    z-index: 2;
    background-color: #ffffff;
}

.latestBlog .blog-item .img-blog {
    width: 100%;
    height: 200px;
    margin: 0px auto 15px;
}

.latestBlog .blog-item .img-blog img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 6px;
}

.latestBlog .blog-item>.info-blog .widget_item-content .widget_item-title {
    min-height: 50px;
}

.latestBlog .blog-item>.info-blog .widget_item-content .widget_item-text {
    min-height: 80px;
}

.latestBlog .blog-item .type-blog {
    padding: 5px 10px;
    background-color: #2C7EB314;
    color: var(--primary-color);
    font-size: clamp(10px, 14px, 5vw);
}

.latestBlog .blog-item .btn-blog {
    transition: all .4s linear;
}

.latestBlog .blog-item .btn-blog a {
    width: calc(100% - 10px);
    margin: auto;
}

.blog-single-image {
    text-align: center;
    overflow: hidden;
    border-radius: 28px;
    background-color: var(--Secondary-color);
}

.blog-single-image .blog-single-image img {
    width: 100%;
    height: 320px;
    object-fit: cover;
}

.blog-single-image .blog-single-info {
    padding: 20px;

}

.blog-single-image .blog-single-info .title {
    font-weight: 700;
    font-size: clamp(19px, 25px, 4vw);
    color: #ffffff;
}

.blog-single-image .blog-single-info .date {
    color: var(--muted-color-5);
    padding: 10px 0px;
    font-size: clamp(14px, 18px, 4vw);
    font-weight: 400;

}

.blog-single-image .blog-single-info .author {
    color: #ffffff;
    font-size: clamp(16px, 20px, 4vw);
    border-top: 1px solid #ffffff;
    padding-top: 15px;

}

/* @media (min-width: 768px) {
    .latestBlog .img-back-cube {
        height: 500px;
    }

} */

/* End Blog Page -----------------------------------*/


/* Start News Page -----------------------------------*/

.news-hero-text {
    backdrop-filter: blur(3px);
    background-color: rgb(255 255 255 / 45%);
    border-radius: 16px 16px 0px 0px;
    position: absolute;
    width: 100%;
    padding: 20px;
    bottom: 0;
    left: 0;
}


/* End News Page -----------------------------------*/


/* Start About Page */

#about-us .founders .founder-item {
    min-height: 250px;
}

#about-us .founders .founder-item .img-founder {
    width: 200px;
    height: 150px;
}

#about-us .founders .founder-item .img-founder img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
}

.mission-vision-page .hero-section .text .title {
    font-weight: 700;
    font-size: clamp(30px, 39px, 4vw);
    display: inline-block;
    position: relative;
}

.mission-vision-page .hero-section .text .title::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0;
    bottom: -10%;
    background-color: var(--primary-color);
}

.mission-vision-page .hero-section .text p {
    font-weight: 400;
    font-size: clamp(30px, 39px, 4vw);
    margin-top: 15px;
    color: #ffffff;
}

.mission-vision-page .hero-section .image {
    width: 100%;
    height: 450px;
    text-align: center;
    margin: 0px auto;
}

.mission-vision-page .hero-section .image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

.mission-vision-page .title-section {
    border-radius: 40px;
    color: #ffffff;
    font-size: clamp(30px, 35px, 4vw);
    text-align: center;
    padding: 10px 28px;
    background-color: var(--Secondary-color);
    display: inline-block;
}

/* End About Page */


/* Start Login Page */

.signup-tab {
    border-radius: 4px;
}

.signup-tab button {
    color: #060606;
    font-weight: 600;
    background-color: transparent;
    border-radius: 4px;
    transition: all .2s linear;
}

.signup-tab button.active {
    background-color: var(--third-color);
    color: #ffffff;
}

.login-img {
    height: 650px;
    position: relative;
    overflow: hidden;
}

.login-img::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images//newimages/x-icon-layer.png");
    background-repeat: repeat;
    opacity: 12%;
    z-index: 1;
}

@media (max-width: 991px) {
    .login-img {
        height: 450px;
    }

}

@media (max-width: 450px) {
    .login-img {
        height: 250px;
    }

}

.login-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.text-img-login {
    position: absolute;
    background-color: rgba(254, 254, 254, 0.20);
    backdrop-filter: blur(4px);
    padding: 15px 10px;
    bottom: 0;
    width: 100%;
}

.text-img-login>* {
    color: #ffffff;
}

.blog-swiper-slide {
    height: 350px;
}

#submit_free_reg_btn {
    width: 260px;
    font-size: 17px;
    font-weight: 600;
}

.loginRegisterForm {
    margin: 0 auto;
}

.user-review-image {
    width: 120px !important;
    height: 120px;
}


/* End Login Page */


/* Start Privet Lesson Courses */

.private-lesson-item {
    box-shadow: 0 2px 12px rgba(5, 18, 66, 0.04);
}


/*@media (max-width: 475px) {
    .mobile-table {
        display: flex;
    }

    .mobile-table thead tr,
    .mobile-table tbody tr {
        display: flex;
        flex-direction: column;
    }

    .mobile-table> :not(caption)>*>* {
        padding: 1rem 1.5rem;
        border-bottom: 1px solid #ccc;
        height: 75px;
    }
}*/

.mobile-table thead>*>*,
.mobile-table tbody>*>* {
    font-size: clamp(10px, 17px, 4vw);
}


/* End Privet Lesson Courses */

@media (max-width: 768px) {
    .widget_item-notification {
        flex-direction: column;
    }

    #course_row_21 {
        display: flex;
        flex-wrap: wrap;
    }

    #course_row_21>td {
        width: calc(100% / 2);
    }

    .table.table-cart tr td,
    .table.table-cart tr th {
        padding: 10px 5px;
        font-size: 11px;
    }
}

.fixed-social ul li a {
    font-size: 20px;
    color: #2c7eb3;
}


/* Start All Animation Keyframes */

@-webkit-keyframes sticky {
    from {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    to {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }
}

@keyframes sticky {
    from {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    to {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }
}


/* End All Animation Keyfream */


/* Start Privacy Main Menu List */

.privacy-menu {
    padding: 10px;
}

.privacy-menu ul {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.privacy-menu ul .privacy-item {
    border-radius: 4px;
    padding: 4px 8px;
    font-size: clamp(14px, 20px, 5vw);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all .3s linear;
}

.privacy-menu ul .privacy-item .privacy-icon img,
.privacy-menu ul .privacy-item .privacy-icon svg {
    width: 24px;
    height: 24px;
}

.privacy-menu ul .privacy-item.active,
.privacy-menu ul .privacy-item:hover {
    background: rgba(44, 126, 179, 0.12);
    font-weight: 700;
}

.privacy-menu ul .privacy-item:hover a {
    color: var(--primary-color);
}

@media (min-width: 992px) {
    .privacy-menu {
        min-height: 100dvh;
        border-inline-end: 1px solid rgba(5, 18, 66, 0.12);
    }
}

@media (max-width: 991px) {
    .privacy-menu {
        border-block-end: 1px solid rgba(5, 18, 66, 0.12);
        margin-bottom: 15px;
    }

    .privacy-menu ul {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}


/* End Privacy Main Menu List */

/* Start Footer */
.main-footer {
    background-color: var(--Secondary-color);
}
.footer-logo{
    width: 100px;
    height: 100px;
    border-radius: 12px;
}
/* End Footer */

/* Start FAQs Page */
.faq-hero-section .title {
    color: #30353F;
    font-weight: 700;
}

.faq-hero-section .text {
    max-width: 1030px;
    margin: 10px auto;
    color: #595D66;
    font-weight: 400;
    font-size: clamp(20px, 24px, 4vw);
    padding-bottom: 25px;
}

.faq-hero-section .filter-head {
    position: absolute;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    bottom: -95px;
    z-index: 5;
    padding: 0px 20px;
}

.faq-hero-section .filter-head .search-box {
    box-shadow: 0px 1px 4px #0C0C0D0D;
}

.section-faq .faq-image,
.contact-image {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.section-faq .faq-image img,
.contact-image img {
    width: 100%;
    height: 315px;
    object-fit: cover;
}

.section-faq .faq-image .text,
.contact-image .text {
    position: absolute;
    background-color: rgba(254, 254, 254, 0.20);
    backdrop-filter: blur(10px);
    padding: 15px 10px;
    bottom: 0;
    width: 100%;
}

.section-faq .widget__item-faq {
    border: 1px solid #F2F2F7;
    border-radius: 16px;
}

.section-faq .widget__item-faq .icon {
    transition: all .3s linear;
}

.section-faq .widget__item-faq:not(.collapsed) .icon {
    transform: rotateY(180deg) rotateX(180deg);
}

.section-faq .widget__item-faq .faq-text>* {
    color: var(--muted-color);
}


/* End FAQs Page */


/* Start Contact Page */

.contact-form {
    border: 0;
    border-bottom: 1px solid #d5d5d5;
    padding: 6px 8px;
    transition: all .3s linear;
    width: 100%;
}

.contact-form:focus {
    border-bottom: 1px solid var(--primary-color);
}


/* ENd Contact Page */

.myCourses {
    border-radius: 12px;
    border: 1px solid var(--Secondary-color);
    padding: 0px 10px;
    background-color: var(--Secondary-color);
    color: #fff !important;
    font-size: clamp(12px, 18px, 4vw);
}

.myCourses:hover {
    border: 1px solid var(--primary-color);
    background-color: transparent !important;
    color: var(--primary-color) !important;
}


/* Start Calendar */

@media (max-width: 420px) {
    #calendar .event-data>* {
        font-size: 10px;
    }

    #calendar .fc-view-harness {
        height: 180px !important;
    }

    .message-body {
        padding: 10px !important;
    }

    .fc .fc-col-header-cell-cushion {
        padding: 2px !important;
    }

    .fc .fc-toolbar {
        flex-direction: column !important;
    }

    .day-number {
        text-align: center !important;
        margin: auto;
    }

    .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {
        min-height: 1.2rem !important;
    }
}


/* End Calendar */

.deletedCourse {
    background-color: #e9e9e9;
}

.deletedCourse .primary-btn {
    background-color: #54555b;
}

/* Start User Home Pages */
.home-user-section {
    background-color: #f5f5f9;
}

.user-info {
    border: 1px solid var(--Secondary-color);
    max-height: 200px;
    border-radius: 12px;
    overflow: hidden;
}

.user-info .image {
    height: 100%;
    flex-shrink: 0;
}

@media (max-width: 575px) {
    .user-info .image {
        display: none;
    }
}

.user-info .image img {
    object-position: center;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.user-info .info {
    background-color: var(--Secondary-color);
    flex-basis: 53%;
    flex-shrink: 0;
    flex-grow: 1;
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-direction: column;
}

.widget_item-student .widget_item-content .widget_item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    background-color: #7878801F;
    width: 60px;
    height: 60px;
    font-size: 18px;
    border: 1px solid var(--tx-dark-color);
}

.widget_item-student.widget-0 .widget_item-content {
    background-color: #E2E1E3;
}

.widget_item-student.widget-1 .widget_item-content {
    background-color: #D3EAFF;
}

.widget_item-student.widget-2 .widget_item-content {
    background-color: #2B4EA040;
}

.navbar-user {
    padding: 20px 10px 20px 20px;
    background-color: #ffffff;
    width: 270px;
    z-index: 55;
    min-height: 60dvh;
    position: sticky;
}

@media (min-width: 992px) {
    .navbar-btn {
        display: none;
    }

}

@media (max-width: 991px) {
    .navbar-user {
        position: fixed;
        height: 100%;
        top: 0;
    }

    html[dir="rtl"] .navbar-user {
        transform: translateX(200%);
        transition: all .2s ease-out;
    }

    html[dir="ltr"] .navbar-user {
        transform: translateX(-200%);
        transition: all .2s ease-out;
    }

    html[dir="rtl"] .navbar-user.show {
        transform: translateX(0%);
        right: 0;
    }

    html[dir="ltr"] .navbar-user.show {
        transform: translateX(0%);
        left: 0;
    }

    .navbar-btn {
        margin: 20px 10px;
        font-size: 19px;
        color: var(--third-color);
        background-color: var(--primary-color);
        padding: 5px 15px;
        border-radius: 8px;
    }

}

.navbar-user ul {
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 35px;
}

.panel-sidebar ul.main-menu__nav li a,
.navbar-user ul li a {
    color: var(--tx-dark-color);
    font-weight: 500;
    text-align: start;
    font-size: clamp(16px, 18px, 4vw);
    border-radius: 8px;
    padding: 5px 12px;
}

html[dir="rtl"] .panel-sidebar ul.main-menu__nav li a,
html[dir="rtl"] .navbar-user ul li a {
    padding-left: 45px;
}

html[dir="ltr"] .panel-sidebar ul.main-menu__nav li a,
html[dir="ltr"] .navbar-user ul li a {
    padding-right: 45px;
}

.panel-sidebar ul.main-menu__nav li a span svg>*,
.navbar-user ul li a span svg>* {
    stroke: var(--tx-dark-color);
}

.panel-sidebar ul.main-menu__nav li a.active,
.navbar-user ul li a.active {
    color: #ffffff;
    background-color: var(--Secondary-color);
    display: block;
}

.panel-sidebar ul.main-menu__nav li a.active span svg>*,
.navbar-user ul li a.active span svg>* {
    stroke: #ffffff;
}

/* End Navbar User */
.home-user-section .Upcoming-courses {
    background-color: #ffffff;
}

.home-user-section .Upcoming-courses .title {
    font-weight: 700;
    color: var(--tx-dark-color);
    padding: 5px;
    border-bottom: 1px solid var(--muted-color-5);
}

.home-user-section .Upcoming-courses .widget-course {
    padding: 10px;
    border-bottom: 1px solid var(--muted-color-5);
    display: flex;
    align-items: center;
    gap: 15px;
}

.home-user-section .Upcoming-courses .widget-course .status {
    background-color: #00A0E614;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 12px;
    font-weight: 600;
    position: relative;
}

.courseFrontPage .status .circle-progress,
.home-user-section .Upcoming-courses .widget-course .status .circle-progress {
    width: 60px;
    height: auto;
    box-shadow: none;
}

.courseFrontPage .status .circle-progress-value,
.home-user-section .Upcoming-courses .widget-course .status .circle-progress-value {
    stroke: var(--Secondary-color);
}

.courseFrontPage .status .circle-progress-circle,
.home-user-section .Upcoming-courses .widget-course .status .circle-progress-circle {
    stroke-width: 6px;
    box-shadow: none;
    stroke: #2B4EA014;
}

.home-user-section .Upcoming-courses .widget-info .title-course {
    font-weight: 700;
    color: var(--tx-dark-color);
}

.home-user-section .Upcoming-courses .widget-info .course-name {
    color: var(--muted-color);
    font-weight: 500;
}

.home-user-section .Upcoming-courses .widget-info .date {
    font-weight: 500;
    color: var(--tx-dark-color);
}

.home-user-section .weekly-calendar h3 {
    border-bottom-color: var(--muted-color-5);
}

.home-user-section .weekly-calendar .lecture-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    border-radius: 12px;

}

.home-user-section .weekly-calendar .lecture-item .border-start {
    border-color: #30353f33 !important;
    padding: 0px 10px;
}

.home-user-section .weekly-calendar .lecture-item .lecture-day {
    font-weight: 700;
    color: #30353F;
}

.home-user-section .weekly-calendar .lecture-item .day-of-month {
    color: #30353F;
}

.home-user-section .weekly-calendar .lecture-item .lecture-title {
    color: #30353F;
    font-weight: 700;
}

.home-user-section .weekly-calendar .lecture-item .lecture-time,
.home-user-section .weekly-calendar .lecture-item .course-name {
    color: #82858C;
}

.home-user-section .weekly-calendar .lecture-item-0 {
    background-color: #FFF7EF;
}

.home-user-section .weekly-calendar .lecture-item-1 {
    background-color: #F6FFEF;
}

.home-user-section .weekly-calendar .lecture-item-2 {
    background-color: #EFF4FF;
}

/* Start FullCalender Style */
.home-user-section .fc .fc-toolbar-title {
    font-size: clamp(15px, 20px, 4vw);
}

@media (max-width: 420px) {
    .home-user-section .fc .fc-toolbar {
        flex-direction: row !important;
    }
}

.home-user-section .fc-theme-standard td,
.home-user-section .fc-theme-standard th {
    border: none;
}

.home-user-section .fc .fc-scrollgrid-liquid {
    border: none;
}

.home-user-section .fc .fc-col-header-cell-cushion {
    font-size: clamp(12px, 15px, 4vw);
    color: var(--muted-color);
    font-weight: 500;
}

.home-user-section .fc .fc-daygrid-day.fc-day-today {
    border-radius: 50%;
}

.fc .fc-daygrid-day.fc-day-today {
    background-color: transparent !important;
}

.fc .fc-daygrid-day.fc-day-today>div {
    background-color: var(--muted-color);
}

.home-user-section .fc-daygrid-day-frame {
    margin-top: 5px;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    width: 45px;
    height: 45px;
}

.home-user-section .fc .fc-daygrid-day-frame .fc-event {}

.home-user-section .fc .fc-button:not(:disabled),
.home-user-section .fc a[data-navlink],
.home-user-section .fc-event.fc-event-draggable,
.home-user-section .fc-event[href] {
    border-radius: 50%;
    border: 1px solid var(--third-color);
    background-color: white;
    color: var(--tx-dark-color);
    width: 40px;
    height: 40px;
}

.home-user-section .event-info-text {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 15px;
    padding: 15px;
}

.home-user-section .event-info-text h6 {
    position: relative;
}

.home-user-section .event-info-text h6.live::after,
.home-user-section .event-info-text h6.quiz::after,
.home-user-section .event-info-text h6.next-course::after {
    content: "";
    position: absolute;
    right: -17px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.home-user-section .event-info-text h6.live::after {
    background-color: RGB(220, 110, 110);
}

.home-user-section .event-info-text h6.quiz::after {
    background-color: RGB(170, 170, 255);
}

.home-user-section .event-info-text h6.next-course::after {
    background-color: var(--primary-color);
}

/* End User Home Pages */
/* Start User Courses Pages */
.courses-user-section {
    background-color: #f5f5f9;
}

.courses-user-section .chapters {
    background-color: #ffffff;
    padding: 0px 20px;
    min-height: 150px;
    border-radius: 8px;
}

.courses-user-section .chapters ul {
    display: flex;
    align-items: center;
    gap: 35px;
    position: relative;
}

.courses-user-section .chapters ul::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 1px;
    width: 85%;
    background-color: #D1D1D6;
}

.courses-user-section .chapters ul li {
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-top: 15px;
}

.courses-user-section .chapters ul li .box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    position: relative;
    z-index: 5;
    font-weight: 600;
    font-size: 19px;
}

.courses-user-section .chapters ul li:not(.current-chapter) .box {
    background-color: #F2F2F7;
    color: var(--muted-color);
    margin-top: 5px;
}

.courses-user-section .chapters ul li .box.done {
    background-color: var(--primary-color);
}

.courses-user-section .chapters li.current-chapter {
    background-color: var(--Secondary-color);
    padding: 0px 10px;
    height: 100%;
}

.courses-user-section .chapters li.current-chapter::after {
    content: "";
    position: absolute;
    left: 0;
    clip-path: polygon(100% 0, 100% 50%, 100% 100%, 50% 72%, 0 100%, 0% 0%);
    background-color: var(--Secondary-color);
    width: 100%;
    height: calc(100% + 60px);
    z-index: 1;
    top: -15px;
}

.courses-user-section .chapters ul li .chapter-title {
    text-align: center;
    font-weight: 500;
    padding-top: 10px;
}

.courses-user-section .chapters .current-chapter .box,
.courses-user-section .chapters .current-chapter .chapter-title {
    color: #ffffff;
    position: relative;
    z-index: 5;
    padding-top: 0px;
}

@media (max-width: 767px) {
    .courses-user-section .chapters ul {
        flex-direction: column;
        gap: 13px;
    }

    .courses-user-section .chapters ul::before {
        width: 1px;
        height: 85%;
    }

    .courses-user-section .chapters ul li .box {
        width: 30px;
        height: 30px;
    }

    .courses-user-section .chapters ul li .box svg {
        width: 20px;
        height: 20px;
    }
}

/* End User Courses Pages */
/* Start User Certificates Courses Pages */
.lesson-user-section,
.certificates-courses-section {
    background-color: #f5f5f9;
}

.certificates-courses-section .widget-certificate {
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 25px;
}

.certificates-courses-section .widget-certificate.widget-0 {
    background-color: #D3EAFF;
}

.certificates-courses-section .widget-certificate.widget-1 {
    background-color: #D3FFEA;
}

.certificates-courses-section .widget-certificate .icon {
    border: 1px solid var(--tx-dark-color);
    background-color: #7878801F;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.certificates-courses-section .widget-certificate .info p {
    color: #3C3C4399;
    font-weight: 600;
}

.certificates-courses-section .certificate-item {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 16px;
}

.certificates-courses-section .certificate-item .image img {
    width: 260px;
    height: 160px;
    border-radius: 12px;
}

.certificates-courses-section .certificate-item .info p {
    color: #3C3C4399;
    font-weight: 600;
    margin: 15px 0px;
}

.certificates-courses-section .certificate-item .icon {
    background-color: transparent;
}

.certificates-courses-section .certificate-item .icon h6 {
    color: var(--Secondary-color);
    font-weight: 700;
}
.certificates-courses-section  .form-check {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}
.certificates-courses-section  .form-control[type=file]{
    height: 40px;
}
/* End User Certificates Courses Pages */
/* Start User Lesson Courses Pages */
.lesson-user-section .course-comment-input .form-control {
    background-color: #F2F2F7;
}

/* End User Lesson Courses Pages */
/* Start User Exams Courses Pages */
.exams-courses-section {
    background-color: #f5f5f9;
}

.exams-courses-section .upcoming-exam,
.exams-courses-section .prev-exam {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 20px;
}

.exams-courses-section .upcoming-exam .upcoming-exam-item,
.exams-courses-section .prev-exam .exam-result-item {
    margin: 10px 0px;
    padding: 14px 0px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.exams-courses-section .upcoming-exam .upcoming-exam-item:not(:last-child),
.exams-courses-section .prev-exam .exam-result-item:not(:last-child) {
    border-bottom: 1px solid var(--muted-color-5);
}

.exams-courses-section .prev-exam .exam-result-item .box-result {
    background-color: #00A0E61F;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    border-radius: 12px;
    position: relative;
}

.exams-courses-section .prev-exam .exam-result-item .box-result::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 1px;
    width: 75%;
    background-color: var(--muted-color);
}

.exams-courses-section .prev-exam .exam-result-item .box-result span {
    font-weight: 600;
    font-size: 18px;
    color: #3C3C4399;
}

.exams-courses-section .prev-exam .exam-result-item .box-result.above-half span:first-child {
    color: var(--Secondary-color);
}

.exams-courses-section .prev-exam .exam-result-item .box-result:not(.above-half) span:first-child {
    color: var(--red-color);
}

.exams-courses-section .upcoming-exam .upcoming-exam-item .date-exam {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    gap: 5px;
    border-radius: 12px;
    position: relative;
}

.exams-courses-section .upcoming-exam .upcoming-exam-item .date-exam.now {
    background-color: var(--red-color);
}

.exams-courses-section .upcoming-exam .upcoming-exam-item .date-exam:not(.now) {
    background-color: #AEAEB2;
}

.exams-courses-section .upcoming-exam .upcoming-exam-item .date-exam span {
    color: #ffffff;
    font-weight: 400;
    display: block;
}

.exams-courses-section .upcoming-exam .upcoming-exam-item .date-exam span:first-child {
    font-weight: 700;
    font-size: 20px;
}

.exams-courses-section .upcoming-exam .upcoming-exam-item .date-exam:not(.now) span:last-child {
    border-top: 1px solid rgb(255 255 255 / 20%);
}

@media (max-width: 365px) {

    .exams-courses-section .upcoming-exam .upcoming-exam-item,
    .exams-courses-section .prev-exam .exam-result-item {
        flex-direction: column;
        text-align: center;
    }
}

/* End User Exams Courses Pages */
/* Start User Setting Section Pages */
.user-setting-section {
    background-color: #f5f5f9;
}

.user-setting-section .bg-user {
    height: 260px;
    width: 100%;
    clip-path: ellipse(100% 65% at 50% 9%);
    margin-bottom: -100px;
}

.user-setting-section .bg-user img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-setting-section .user-img {}

/* End User Setting Section Pages */
/* Start User My-Chat Section Pages */
.my-chat-section {
    background-color: #f5f5f9;
}

.single-chat-section .message-footer,
.single-chat-section .message-header {
    background-color: #ffffff;
    padding: 20px 0px;
}

.single-chat-section .message-body {
    min-height: 400px;
    background-color: #F2F2F7;
}

.single-chat-section .message-footer .form-control {
    background-color: #F2F2F7;
}

.single-chat-section .message-list .message-item.sender .message-content {
    background-color: #AEAEB2;
    color: #ffffff;
    font-size: 15px;
}

html[dir="ltr"] .single-chat-section .message-list .message-item.receiver .message-content,
html[dir="rtl"] .single-chat-section .message-list .message-item.sender .message-content {
    border-radius: 40px 28px 0px 40px;
}

html[dir="rtl"] .single-chat-section .message-list .message-item.receiver .message-content,
html[dir="ltr"] .single-chat-section .message-list .message-item.sender .message-content {
    border-radius: 28px 40px 40px 0px;
}

.single-chat-section .message-list .message-item.receiver .message-content {
    border-radius: 28px 40px 40px 0px;
    background-color: #00A0E61F;
    color: var(--primary-color);
    font-size: 15px;
}

/* End User My-Chat Section Pages */
/* Start Lecturer My-Courses Pages */
.lecturer-mycourses-page {}

.lecturer-mycourses-page .table>:not(caption)>*>* {
    padding: 1rem;
    color: var(--tx-dark-color);
}

.lecturer-mycourses-page .unaccepted,
.lecturer-mycourses-page .other,
.lecturer-mycourses-page .accepted {
    color: var(--tx-dark-color);
    border-radius: 8px;
    padding: 10px 14px;
}

.lecturer-mycourses-page .accepted {
    background-color: #CFF7D3;
}

.lecturer-mycourses-page .unaccepted {
    background-color: #FDD3D0;
}

.lecturer-mycourses-page .other {
    background-color: #FFF1C2;
}

.lecturer-mycourses-page table .live,
.lecturer-mycourses-page table .recorded {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 0px 5px;
}

.lecturer-mycourses-page table .live {
    background-color: var(--red-color);
}

.lecturer-mycourses-page table .recorded {
    background-color: var(--green-color);
}

.student-tested details,
.exams-courese-report details,
.student-list-page details,
.lecturer-mycourses-page details {
    position: static;
    margin-top: 0;
    bottom: 0;
    box-shadow: none;
    background-color: transparent;
    color: var(--muted-color);
    z-index: 1;
}

.student-tested .modal-content,
.student-list-page .modal-content,
.lecturer-mycourses-page details .modal-content {
    top: calc(100% + 1rem);
    bottom: unset;
    transform-origin: 0% 0%;
    height: 550px;
    overflow-y: auto;
}

@media (max-width: 440px) {

    .student-tested .modal-content,
    .exams-courese-report .modal-content,
    .student-list-page .modal-content,
    .lecturer-mycourses-page details .modal-content {
        max-width: 250px;
    }
}

/* End Lecturer My-Courses Pages */
/* Start Lecturer Exams Courese Report Pages */
.exams-courese-report table tbody {
    width: 100%;
}

.exams-courese-report table thead tr td {
    text-align: center;
}

.exams-courese-report table tbody tr td {
    min-width: 100px;
    text-align: center;
}

.student-tested .status,
.student-list-page table tbody .status,
.exams-courese-report table tbody .status {
    padding: 5px 15px;
    border-radius: 8px;
    text-align: center;
    display: block;
    width: 70px;
}

.student-tested .status.failed,
.student-list-page table tbody .status.failed,
.exams-courese-report table tbody .status.failed {
    background-color: #FDD3D0;
}

.student-tested .status.success,
.student-list-page table tbody .status.success,
.exams-courese-report table tbody .status.success {
    background-color: #CFF7D3;
}

.student-tested .status.warning,
.student-list-page table tbody .status.warning,
.exams-courese-report table tbody .status.warning {
    background-color: #FFF1C2;
}

.student-tested .status.muted,
.student-list-page table tbody .status.muted,
.exams-courese-report table tbody .status.muted {
    background-color: var(--muted-color-5);
}

/* End Lecturer Exams Courese Report Pages */

/* Teachers Sections ***/
.teacher-box1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* padding: 10px; */
}

.teachers-image1 {
    position: relative;
    border-radius: 50%;
    width: 260px;
    height: 260px;
    overflow: hidden;
    background: linear-gradient(180deg, #AADFF7 0%, #00A0E6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.teachers-image1 .styled-circle-image {
    transition: transform 0.3s ease-in-out;
    border-radius: 50%;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    object-fit: contain;
    background-color: #ffffff;
}

.teachers-image1:hover .styled-circle-image {
    transform: scale(1.05);
}

h4 a {
    text-decoration: none;
    color: #343a40;
    margin-top: 10px;
}

h4 a:hover {
    color: #007bff;
}

/* Teachers Sections ***/
/* Start Check Certificate Page */
.check-certificate-page {
    background-color: #F5F5F5;
}

.check-certificate-page #result p {
    margin-bottom: 15px;
    font-size: clamp(19px, 25px, 4vw);
    color: var(--Secondary-color);
    font-weight: 700;
}

.check-certificate-page #result p span {
    color: #322F35;
    font-size: clamp(16px, 23px, 4vw);
    font-weight: 400;
}

.check-certificate-page #scanQRCodeButton,
.check-certificate-page #checkCertificateButton {
    border-radius: 8px;
    color: #ffffff;
}

.check-certificate-page #reader {
    width: 100%;
    max-width: 100%;
    border-color: var(--Secondary-color) !important;
}

/* End Check Certificate Page */

#specialization-details .hero-img {
    max-height: 70dvh;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
}

/* Start Specialization Page */
#specialization .hero-section {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 75dvh;
}

#specialization .hero-section .container {
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

#specialization .hero-section .container .content {
    padding: clamp(20px, 30px, 4vw);
    background-color: #2B4EA0E0;
    mask-image: url(../images/mask-image.png);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: cover;
    width: 100%;
    height: min-content;
    aspect-ratio: 12 / 3;
}

#specialization .hero-section .container .content .title {
    text-align: center;
    font-weight: 700;
    font-size: clamp(30px, 39px, 4vw);
    color: #ffffff;
}

#specialization .hero-section .container .content p {
    max-width: 800px;
    color: #E5E5EA;
    line-height: 32px;
    text-align: center;
    margin: 25px auto;
    font-size: clamp(18px, 20px, 4vw);
}

#specialization .hero-section .container .content .search-box {
    max-width: 800px;
    margin: 5px auto 0px;
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #FFFFFF1F;
    border: 1px solid #F2F2F7;
    border-radius: 8px;
    padding: 16px;
}

#specialization .hero-section .container .content .search-box button {
    background-color: transparent;
    border: none;
    outline: none;
}

#specialization .hero-section .container .content .search-box input {
    background-color: transparent;
    color: #FFFFFF;
    border: none;
    outline: none;
}

#specialization .hero-section .container .content .search-box input::placeholder {
    color: #FFFFFF;
}

.special-content .widget {
    height: 100%;
    box-shadow: 0px 1px 4px 0px #0C0C0D0D, 0px 1px 4px 0px #0C0C0D1A;
    background-color: #FFFFFF;
    border-radius: 16px;
    padding: 20px;
}

.special-content .widget .image {
    width: 100%;
    margin: auto;
    text-align: center;
    height: 200px;
}

.special-content .widget .image img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
}

.special-content .widget .info {
    padding: 10px 0px;
}

.special-content .widget .info .title {
    color: #36343B;
    font-weight: 700;
    font-size: clamp(18px, 20px, 4vw);
}

.special-content .widget .info .info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #3C3C4399;
    text-align: start;
    margin: 15px 0px;
}

.special-content .widget .info a {
    display: block;
    text-align: center;
}

#specialization-details .co-image {
    border-radius: 28px;
    overflow: hidden;
}

#specialization-details .co-image img {
    width: 100%;
    height: 420px;
    object-fit: cover;
}

#specialization-details .co-image .info {
    background-color: var(--Secondary-color);
    text-align: center;
    padding: 20px;
}

#specialization-details .co-image .info .title {
    font-weight: 700;
    font-size: clamp(20px, 25px, 4vw);
    color: #ffffff;
}

#specialization-details .co-image .info .co-name {
    font-size: clamp(18px, 23px, 4vw);
    color: #ffffff;
    font-weight: 400;
}

#specialization .hero-section .container {
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

#specialization .hero-section .container .content {
    padding: clamp(20px, 30px, 4vw);
    background-color: #2B4EA0E0;
    mask-image: url(../images/mask-image.png);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: cover;
    width: 100%;
    height: min-content;
    aspect-ratio: 12 / 3;
}

#specialization .hero-section .container .content .title {
    text-align: center;
    font-weight: 700;
    font-size: clamp(30px, 39px, 4vw);
    color: #ffffff;
}

#specialization .hero-section .container .content p {
    max-width: 800px;
    color: var(--muted-color-5);
    line-height: 32px;
    text-align: center;
    margin: 25px auto;
    font-size: clamp(18px, 20px, 4vw);
}

#specialization .hero-section .container .content .search-box {
    max-width: 800px;
    margin: 5px auto 0px;
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #FFFFFF1F;
    border: 1px solid #F2F2F7;
    border-radius: 8px;
    padding: 16px;
}

#specialization .hero-section .container .content .search-box button {
    background-color: transparent;
    border: none;
    outline: none;
}

#specialization .hero-section .container .content .search-box input {
    background-color: transparent;
    color: #FFFFFF;
    border: none;
    outline: none;
}

#specialization .hero-section .container .content .search-box input::placeholder {
    color: #FFFFFF;
}

.special-content .widget {
    height: 100%;
    box-shadow: 0px 1px 4px 0px #0C0C0D0D, 0px 1px 4px 0px #0C0C0D1A;
    background-color: #FFFFFF;
    border-radius: 16px;
    padding: 20px;
}

.special-content .widget .image {
    width: 100%;
    margin: auto;
    text-align: center;
    height: 200px;
}

.special-content .widget .image img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
}

.special-content .widget .info {
    padding: 10px 0px;
}

.special-content .widget .info .title {
    color: #36343B;
    font-weight: 700;
    font-size: clamp(18px, 20px, 4vw);
}

.special-content .widget .info .info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #3C3C4399;
    text-align: start;
    margin: 15px 0px;
}

.special-content .widget .info a {
    display: block;
    text-align: center;
}

/* End Specialization Page */
/* Start certification Page */
.hero-section.graphy-bg {
    min-height: unset !important;
    position: relative;
}

.graphy-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    /* height: 90%; */
    background-image: url('../images/newimages/graphy.png');
    background-position: center;
    opacity: 30%;
    rotate: 180deg;
    z-index: -1;
    mix-blend-mode: luminosity;
}

.certification-hero .title {
    color: var(--Secondary-color);
    font-weight: 700;
    font-size: clamp(30px, 39px, 4vw);
    margin-bottom: 20px;
}

.certification-hero .description {
    color: #595D66;
    font-size: clamp(18px, 23px, 4vw);
    line-height: 36px;
    font-weight: 400;
}

.certification-hero img {
    width: 100%;
    height: 100%;
    max-height: 600px;
    object-fit: contain;
}

.academic-accreditations .title {
    color: #30353F;
    font-weight: 700;
    font-size: clamp(22px, 31px, 4vw);
    margin-bottom: 10px;
}

.academic-accreditations .description {
    color: #3C3C4399;
    font-size: clamp(16px, 20px, 4vw);
    line-height: 32px;
    font-weight: 300;
}

.img-back-cube {
    margin: 0px auto;
    text-align: center;
    position: relative;
}

.img-back-cube>div {
    position: relative;
    z-index: 2;
    object-fit: cover;
    overflow: hidden;
    border-radius: 6px 50px 6px 50px;
    border: 1px solid var(--Secondary-color);

}

/* .img-back-cube::after,
.img-back-cube::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    background-image: url('../images/newimages/Elements-geometric-pattern-chess.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

html[dir="rtl"] .img-back-cube::before {
    bottom: 0%;
    right: -4%;
}

html[dir="ltr"] .img-back-cube::before {
    bottom: 0%;
    left: -4%;
}

html[dir="rtl"] .img-back-cube::after {
    top: -2%;
    left: -3%;
}

html[dir="ltr"] .img-back-cube::after {
    top: -2%;
    right: -3%;
} */
/* 
@media (max-width: 1199px) {
    .img-back-cube::before {
        bottom: 5% !important;
    }

}

@media (max-width: 991px) {
    .img-back-cube::before {
        bottom: 0% !important;
    }

}

@media (max-width: 530px) {
    .img-back-cube {
        max-width: 350px;
    }

    .img-back-cube::before {
        bottom: 28% !important;
    }

}

@media (max-width: 340px) {

    .img-back-cube::after,
    .img-back-cube::before {
        display: none;
    }
} */

.certification-card-item {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0px 1px 4px #0C0C0D0D, 0px 1px 4px #0C0C0D1A;
}

.certification-card-item .image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 12px;
}

.certification-card-item .title {
    color: var(--tx-dark-color);
    font-weight: 700;
    font-size: clamp(20px, 25px, 4vw);
    margin-bottom: 10px;
}

.certification-card-item .description {
    color: #3C3C4399;
    font-size: clamp(14px, 16px, 4vw);
    line-height: 28px;
    font-weight: 300;
}

/* End certification Page */
/* Start Mail Style */
.inbox-list .nav-tabs {
    background-color: var(--light-muted);
    padding: 10px;
    border-radius: 8px;
    justify-content: space-around;
    box-shadow: none;
    border: none;
}

.inbox-list .nav-tabs .nav-item .nav-link {
    color: #82858C;
    background-color: transparent;
    border: none;
    border-radius: 6px;
    text-align: center;
    font-size: 16px;
}

.inbox-list .nav-tabs .nav-item .nav-link.active {
    color: #30353F;
    background-color: #ffffff;
    font-weight: 700;
    box-shadow: 0px 1px 4px #0C0C0D0D;
}

.inbox-list .search-box {
    margin: 20px 0px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid var(--light-muted);
    padding: 10px;
    border-radius: 8px;
    overflow: hidden;
}

.scroll-content-div {
    overflow-y: auto;
    height: 550px;
}

@media (max-width: 767px) {
    .scroll-content-div {
        height: 300px;
    }

}

.inbox-list .tab-content::-webkit-scrollbar {
    width: 8px;
}

.inbox-list .secondary-btn:hover svg path {
    stroke: var(--Secondary-color);
}

.mail-item:not(:first-child) {
    border-top: 1px solid #CDCED1;
    padding-top: 15px;
    margin-top: 10px;
}

.mail-user-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;

}

.mail-user-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mail-item.unread .mail-user-img {
    border: 3px solid var(--primary-color);
}

.mail-item.read .mail-user-img {
    border: 3px solid #ACAEB2;
}

.mail-item .user-name {
    color: #30353F;
    font-weight: 700;
    font-size: 13px;
}

.mail-title {
    color: #30353F;
    font-weight: 700;
    font-size: 16px;
}

.mail-text {
    color: #82858C;
    line-height: 20px;
    font-weight: 300;
    font-size: 13px;
    margin-top: 15px;
    margin-bottom: 10px;
}

.actions {
    border-bottom: 1px solid #F2F2F7;
}

.actions button {
    background-color: transparent;
    border: none;
    outline: none;
}

.actions button.border-end,
.actions button.border-start {
    border-color: #F2F2F7;
}

.mail-content-view-item {
    box-shadow: 0px 1px 4px #0C0C0D0D, 0px 1px 4px #0C0C0D1A;
    border: 1px solid #F2F2F7;
    margin-bottom: 15px;
}

.mail-content-view-item .mail-text {
    padding-top: 15px;
    border-top: 1px solid #CDCED1;
}

.mail-editor {
    background-color: #ECF2FF;
    border-top: 1px solid #D5DCEC;
}

.mail-editor .tox {
    border-radius: 0px;
}

.mail-editor .tox-editor-header {
    order: 2;
}

.mail-editor .tox .tox-statusbar,
.mail-editor .tox .tox-toolbar-overlord,
.mail-editor .tox .tox-toolbar__primary,
.mail-editor .tox:not(.tox-tinymce-inline) .tox-editor-header {
    background-color: transparent;
    box-shadow: none;
    border: none;
}

.mail-editor:not(.new-mail-editor) .tox-edit-area {
    margin: 10px 16px;
    border-radius: 8px;
}

.mail-editor.new-mail-editor .tox-tinymce {
    border: none;
}

/* End Mail Style */
/* Start Chat Bot Style */
.fixed-btn-chatbot,
.chatbot-app {
    position: fixed;
    right: 30px;
    bottom: 3%;
    z-index: 9999;
}

.fixed-btn-chatbot {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    align-items: center;
    background-color: #2B4EA099;
    border: 1px solid #ffffff;
    backdrop-filter: blur(12px);
    box-shadow: 0px 4px 12px 0px #2B4EA03D;
}



.fixed-btn-chatbot img {
    width: 63px;
    height: 45px;
    object-fit: contain;
}

.chatbot-app {
    background-color: #ffffff;
    border-radius: 24px;
    width: 420px;
    overflow: hidden;
    box-shadow: 0px 1px 4px #0C0C0D0D, 0px 1px 4px #0C0C0D1A;
}

.chatbot-app .chatbot-head {
    background-color: var(--Secondary-color);
    padding: 10px 30px;
    display: flex;
    align-items: center;

}

.chatbot-app .chatbot-head img {
    width: 55px;
    height: 35px;
    object-fit: contain;
}

.chatbot-app .chatbot-body {
    height: 320px;
    overflow-y: auto;
}

.chatbot-app .chatbot-body .chat-container {
    margin: 20px 25px;
}

.chatbot-app .chatbot-body .message {
    max-width: 80%;
    padding: 12px 20px;
    border-radius: 20px;
    display: inline-block;
    position: relative;
}

.chatbot-app .chatbot-body .bot-message {
    background-color: #D5DCEC;
    color: #30353F;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.chatbot-app .chatbot-body .user-message {
    background-color: #4E6CB0;
    color: #F3F3F3;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.chatbot-app .chatbot-body .user-message::after,
.chatbot-app .chatbot-body .bot-message::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    bottom: 3px;
}

.chatbot-app .chatbot-body .bot-message::after {
    background-color: #D5DCEC;
    border-bottom-right-radius: 50%;

}

html[dir="rtl"] .chatbot-app .chatbot-body .bot-message::after {
    left: -3px;
    rotate: -63deg;
}

html[dir="ltr"] .chatbot-app .chatbot-body .bot-message::after {
    right: -3px;
    rotate: 63deg;
}

.chatbot-app .chatbot-body .user-message::after {
    background-color: #4E6CB0;
    border-bottom-left-radius: 50%;
}

html[dir="rtl"] .chatbot-app .chatbot-body .user-message::after {
    right: -3px;
    rotate: 63deg;
}

html[dir="ltr"] .chatbot-app .chatbot-body .user-message::after {
    left: -3px;
    rotate: -63deg;
}

.chatbot-app .chatbot-footer {
    box-shadow: 0px 16px 32px -8px #0C0C0D66;
    padding: 10px 20px;
}

.chatbot-app .chatbot-footer .keywords {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.chatbot-app .chatbot-footer .keyword-item {
    background-color: #F5F5F5;
    border-radius: 8px;
    padding: 3px 5px;
    font-size: 14px;
    font-weight: 400;
}

.chatbot-footer form {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #F5F5F5;
    box-shadow: 0px 1px 4px #0C0C0D0D;
    margin-top: 15px;
    padding: 12px 16px;
    border-radius: 16px;
    height: 50px;
}

@media (max-width: 490px) {
    .fixed-btn-chatbot {
        width: 70px;
        height: 70px;
    }

    .fixed-btn-chatbot img {
        width: 35px;
        height: 35px;
    }

    .fixed-btn-chatbot h6 {
        font-size: 10px;
    }

    .chatbot-app {
        width: 90%;
        right: 50%;
        transform: translateX(50%);
    }
}

/* End Chat Bot Style */

/* Start News Bar Style */
.news-bar {
    background-image: url('../images/newimages/news-bar-bg.webp');
    background-color: #383F51;
    color: #CDCED1;
    overflow: hidden;
    position: relative;
    display: flex;
    width: 100%;
    height: 45px;
}

.news-bar .news-content span {
    padding: 0 20px;
}

.news-bar .news-content {
    display: inline-block;
    position: absolute;
    top: 0;
    padding: 9px 0;
    white-space: nowrap;
    animation: scroll-right 45s linear infinite;
}

html[dir="rtl"] .news-bar .news-content {
    animation: scroll-left 45s linear infinite;
}

@keyframes scroll-right {
    0% {
        right: 0;
        transform: translateX(100%);
    }
    100% {
        right: 100%;
        transform: translateX(0);
    }
}

@keyframes scroll-left {
    0% {
        left: 0;
        transform: translateX(-100%);
    }
    100% {
        left: 100%;
        transform: translateX(0);
    }
}
/* End News Bar Style */
/* Start Part Detail Page */
#part-details .hero-section {
    height: 75dvh;
    position: relative;
    background-image: url('../images/image.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#part-details .hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(263.37deg, rgba(43, 78, 160, 0.92) 0%, rgba(0, 160, 230, 0.92) 102.23%);
    width: 100%;
    height: 100%;
}

#part-details .hero-section .container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#part-details .hero-section .content {
    position: relative;
    z-index: 5;
    text-align: center;
    max-width: 1000px;
}

#part-details .hero-section .content .title {
    font-size: clamp(25px, 39px, 4vw);
    font-weight: 700;
    color: #FFFFFF;
}

#part-details .hero-section .content p {
    color: #E5E5EA;
    line-height: 32px;
    margin: 45px 0px;
    font-size: clamp(18px, 20px, 4vw);
}

#part-details .part-detail .muqarar-details {
    box-shadow: 0px 1px 4px 0px #0C0C0D0D, 0px 1px 4px 0px #0C0C0D1A;
    background-color: #FFFFFF;
    border-radius: 16px;
    padding: 20px;
}

#part-details .part-detail .muqarar-details .image {
    position: relative;
    width: 100%;
    height: 150px;
}

#part-details .part-detail .muqarar-details .image .icon {
    position: absolute;
    right: 5%;
    top: 5%;
    background-color: #FEFEFE;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#part-details .part-detail .muqarar-details .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

#part-details .part-detail .muqarar-details .info {
    padding: 10px 0px;
}

#part-details .part-detail .muqarar-details .info .title {
    color: #36343B;
    font-weight: 700;
    font-size: clamp(18px, 20px, 4vw);
}

#part-details .part-detail .muqarar-details .info .info-item {
    color: #3C3C4399;
}

#part-details .part-detail .muqarar-details .info .lecturer {
    display: flex;
    align-items: center;
    gap: 10px;
}

#part-details .part-detail .muqarar-details .info .lecturer img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

#part-details .part-detail .muqarar-details .info .lecturer h6 {
    color: #36343B;
}

#part-details .part-detail .muqarar-details .info .start-date {
    color: #3C3C4399;
}

#part-details .part-detail .muqarar-details .info a {
    display: block;
    text-align: center;
}

/* End Part Detail Page */
/* Start Specialization Details Page */
#specialization-details .hero-section {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 65dvh;
}

#specialization-details .hero-section .hero-img {
    height: 100%;
}

#specialization-details .hero-section .content {
    max-width: 600px;
}

#specialization-details .hero-section .content .title {
    font-weight: 700;
    color: #FFFFFF;
    font-size: clamp(30px, 39px, 4vw);
}

#specialization-details .hero-section .content p {
    color: #E5E5EA;
    line-height: 32px;
    font-size: clamp(18px, 20px, 4vw);
    margin: 35px 0px;
}

#specialization-details .hero-section .content .sign-now,
#part-details .hero-section .content .sign-now {
    background-color: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #FFFFFF;
    color: #2B4EA0;
    padding: 15px 20px;
    font-weight: 700;
    transition: all .3s ease-out;
}

#specialization-details .hero-section .content .sign-now:hover,
#part-details .hero-section .content .sign-now:hover {
    background-color: #2B4EA0;
    color: #FFFFFF;
}

.special-detail .text,
.part-detail .text {
    text-align: center;
    max-width: 930px;
    margin: 35px auto;
}

.special-detail .text .title,
.part-detail .text .title {
    font-weight: 700;
    color: #2B4EA0;
    font-size: clamp(18px, 20px, 4vw);
    margin-bottom: 15px;
}

.special-detail .text p,
.part-detail .text p {
    color: #8E8E93;
    line-height: 32px;
}

.special-detail .widget-details {
    box-shadow: 0px 1px 4px 0px #0C0C0D0D, 0px 1px 4px 0px #0C0C0D1A;
    background-color: #FFFFFF;
    padding: 20px;
    border-radius: 16px;
    height: 100%;
}

.special-detail .widget-details .icon {
    color: #FFFFFF;
    font-size: clamp(25px, 32px, 4vw);
    font-weight: 700;
    background-color: #00A0E6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px auto;
    width: 85px;
    height: 85px;
    mask-image: url('../images/star.svg');
    mask-size: contain;

}

.special-detail .widget-details .info {
    border-top: 1px solid #E5E5EA;
    padding: 20px 0px;
}

.special-detail .widget-details .info .title {
    color: #36343B;
    font-weight: 700;
    font-size: clamp(18px, 20px, 4vw);
}

.special-detail .widget-details .info .info-item {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #3C3C4399;
}

.special-detail .widget-details .info a {
    text-align: center;
    display: block;
}

@media (max-width: 1199px) {
    .departments-details .hero-section .hero-img {
        clip-path: polygon(0 0, 100% 0, 100% 70%, 75% 100%, 25% 100%, 0 70%);
    }

    #specialization-details .hero-section {
        flex-direction: column;
    }

    #specialization-details .hero-section .content {
        padding: 20px 10px;
        text-align: center;
        margin: 0px auto;
    }
}

/* End Specialization Details Page */
/* Start Lecturer Profile */
#appoinments-div .gc-calendar .gc-event {
    padding: 6px;
    margin-right: 10px;
}

#appoinments-div .gc-calendar .gc-event.selected {
    background-color: #37b284 !important;
}

#appoinments-div .bg-primary {
    background-color: #3882a6 !important
}

#appoinments-div .disabledappoinments {
    background-color: #9dafb8 !important;
}

#appoinments-div input.checkbox {
    width: 20px;
    height: 20px;
    position: absolute;
}

/* End Lecturer Profile */
/* Start Packge Style */
.badge-parent {
    position: relative;
}

.badge-overlay {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.badge2 {
    color: white;
    /* padding: 7.5px 7.5px; */
    padding: 2px;
    font-size: 15px;
    font-family: "Poppins";
    text-align: center;
    /* background: #ed1b24; */
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-30%) translateY(0%) rotate(-45deg);
    transform-origin: top right;
}

.badge2::before,
.badge2::after {
    content: '';
    position: absolute;
    top: 0;
    margin: 0 -1px;
    width: 100%;
    height: 100%;
    background: inherit;
    min-width: 55px;
}

.badge2::before {
    right: 100%
}

.badge2::after {
    left: 100%
}

/* End Packge Style */
button[type="submit"].is-submitting {
    cursor: not-allowed;
    opacity: 0.7;
  }
  
  .spinner-border {
    margin-right: 5px;
    vertical-align: text-top;
  }