/* @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&display=swap');
html, body {
    overflow-x: hidden;
    overflow-x: clip;
}
body {
    font-family: 'Cairo', sans-serif;
    font-family: "Noto Kufi Arabic", sans-serif;
    background-color: #F7F6FB;
    background-color: var(--purple);
}
:root {
    --purple: #492E87;
    --purple-1: #B2A5FF;
    --purple-2: #493D9E;
    --yellow: #fff200;
    --sand: #FFF2AF;
    --white: #fff;
    --light-purple: #b7aec1;
    --lighter-purple: #fff3db9f;
    --light-white: #fff6e4;
    --dark-white: #fff3db;
    
    --dark-yellow: #ffe38d;
    --card-bg: #F3EDFF;
    --white-opacity-90: rgba(255, 255, 255, 0.9);
    --white-opacity-80: rgba(255, 255, 255, 0.8);
    --white-opacity-70: rgba(255, 255, 255, 0.7);
}
/* bg */
.bg-purple { background-color: var(--purple);}
.bg-purple-1 {background-color: var(--purple-1);}
.bg-purple-2 {background-color: var(--purple-2);}
.bg-yellow {background-color: var(--yellow) !important;}
.bg-sand {background-color: var(--sand);}
.bg-white {background-color: var(--white)!important;}
/*  */
.bg-light-purple {background-color: var(--light-purple);}
.bg-lighter-purple {background-color: var(--lighter-purple);}
.bg-light {background-color: var(--light-white) !important;}
.bg-dark {background-color: var(--dark-white) !important;}
.bg-dark-yellow {background-color: var(--dark-yellow);}
.bg-card-light {background-color: #fffdf0;}
/* text */
.text-purple {color: var(--purple);}
.text-purple-1 {color: var(--purple-1);}
.text-purple-2 {color: var(--purple-2);}
.text-yellow {color: var(--yellow) !important;}
.text-sand {color: var(--sand);}
.text-white {color: var(--white) !important;}
/*  */
.text-light-purple {color: var(--light-purple);}
.text-dark-yellow {color: var(--dark-yellow);}
.text-light {color: var(--light-white) !important;}
.text-dark {color: var(--dark-white) !important;}
/* ------------------------------------------------ */
.d-flex {
    display: -webkit-flex !important;
    display: flex !important;
}
.justify-items-center {
    -webkit-justify-items: center !important;
    justify-items: center !important;
}
.justify-content-center {
    -webkit-justify-content: center !important;
    justify-content: center !important;
}
.justify-content-between {
    -webkit-justify-content: space-between !important;
    justify-content: space-between !important;
}
.justify-content-end {
    -webkit-justify-content: flex-end !important;
    justify-content: flex-end !important;
    -webkit-align-items: flex-end !important;
    align-items: flex-end !important;
}
.align-content-center {
    -webkit-align-content: center !important;
    align-content: center !important;
}
.align-items-center {
    -webkit-align-items: center !important;
    align-items: center !important;
}
.align-items-start {
        -webkit-align-items: flex-start !important;
    align-items: flex-start !important;
}
/****************************************/

.loader-wrapper {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    display: -webkit-flex;
    -webkit-justify-content: center;
    justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    z-index: 100;
    background-color: #493e87;
    color: #fff200;
}
.loader {
  width: 20px;
  aspect-ratio: 1;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: #fff200;
  box-shadow: 0 0 0 0 #fff20040;
  animation: l1 1s infinite;
}
@keyframes l1 {
    100% {box-shadow: 0 0 0 30px #0000}
}
/****************************************/


.container {
    width: 100%;
    max-width: 1350px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }

    .footer .footer-list.store-links-items a {
        padding: 7px 0;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

/****************************************/

html {
    scroll-behavior: smooth;
}

body, html {
    margin: 0;
    padding: 0;
}
.section {
    padding: 60px 20px;
    z-index: 2;
    position: relative;
}

p {
    line-height: 1.66;
}

/* 1- HERO */

.hero-background {
    background-image: url("../images/4.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #492E87;
    /* hero */
    position: fixed;
    height: 100vh;
    width: 100%;
    flex-direction: column;
    -webkit-align-content: center;
    align-content: center;
    transition: transform 1s ease;
}
.hero-background::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff2af45;
    transition: background-color 0.5s;
    z-index: 1;
}
.hero-nav {
    position: fixed;
}
.hero-nav a {
    color: var(--purple);
}
.hero-content {
    position: relative;
    transition: opacity 0.3 ease;
}
.hero-content h1 {
    font-size: calc(1.475rem + 2.7vw);
    font-weight: normal;
}
.hero-content p {
    font-size: 1.1em;
}
#hero .btn, #about .btn {
    background-color: var(--sand) !important;
    color: #493d9e;
    font-weight: bold;
    box-shadow: inset 5px 5px 7px 0px #ffffff87;
    transition: background-color 0.3s;
}
#about .btn {
        box-shadow:  -1px -1px 6px 0px #ffffff79;
}
.btn:hover,  #about .btn:hover{
    background-color: var(--dark-white);
}


@media only screen and (min-width:768px) {
    .w-md-75 {
        width: 75%;
    }
}
@media only screen and (min-width:992px) {
    .w-lg-50 {
        width: 50%;
    }
}

.spacer {
    height: 90vh;
}
/* HEADER */
header {
    position: fixed;
    top: 1rem;
    width: 100%;
    transition: top 0.4s ease-in-out;
}
.navbar {
    width: 94%;
    /* -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 12px 0px #493e8742; */
    -webkit-box-shadow: 0px 2px 12px 0px rgb(255 255 255 / 0.15);
    box-shadow: 0px 2px 12px 0px rgb(255 255 255 / 0.15);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.navbar-toggler {
    border-color: var(--white);
}
.navbar-toggler-icon {  
    color: white;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.nav-link {
    color: var(--white);
}

/* 2- ABOUT */
#about {
    /* color: #f9f1b8; */
    color: #fff;
    box-shadow: 0px -2px 20px 6px #00000040;
}
#about a {
    background-color: #ffec80;
    background-color: var(--bs-highlight-bg);
    background-color: var(--dark-yellow);
    color: #492E87;
}

/* 3- PLATFORM-SECTIONS */
#platform-sections {
    background-color: #fefdec;
    color: #492E87;
    box-shadow: 0px -2px 20px 6px #00000040;
    background-color: #fff3dbc4 !important;
    backdrop-filter: blur(6px);
    background-color: #fff3db96 !important;
    backdrop-filter: blur(4px);
}
#platform-sections img[src="assets/gif/mic.gif"] {
    width: 187px;
}
.bg-section-card {
    background: linear-gradient(to bottom, #B2A5FF, #FFF2AF); /* تدرج بين البنفسجي الفاتح والأصفر الفاتح */
    border: 2px solid #492E87;
    transition: transform 0.3s ease;
}
.bg-section-card img {
    height: 10rem;
}
.bg-section-card:focus {
    transform: translateY(-10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);

}
.bg-section-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.edit-img {
    position: relative;
    left: 1rem;
}
/* 4- EPISODES + BLOGS */
.episode-card, .blog-card {
    background-color: #fffdf0;
    border-radius: 20px;
    color: #492e87;
    height: 93%;
    box-shadow: 2px 1px 10px 0px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}
.episode-card:hover {
    background-color: unset;
}
 .blog-card:hover {
    background-color: #fffdf07c;
        background-color: #fcf9e6;
 }
.episode-card img {
    width: 100%;
    height: 100%;
    border-radius: 20px 20px 0 0;
}
.episode-card .episode-text {
    height: 35%;
}
.episode-card p, .blog-card p  {
    font-size: 0.75rem;;
    color: #ab9abd;
}
.p-date {
    font-size: 0.7rem;
}
/*  */
.blog-card {
    border-radius: 15px;
    box-shadow: 2px 1px 10px 0px rgba(0, 0, 0, 0.1)
}
.blog-card .img-wrapper {
    width: 30%;
}
.blog-card img {
    height: 100%;
    width: 100%;
    border-radius: 0 15px 15px 0;
}
.blog-card .blog-text {
    width: 70%;
}
.blog-card p, .blog-card h6 {
    /* width: 67%; */
    line-clamp: 2; /* Adjust the number of lines to truncate */
    -webkit-line-clamp: 2; /* For WebKit browsers */
}
.text-truncate-multiline {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: 2; /* Adjust the number of lines to truncate */
    -webkit-line-clamp: 2; /* For WebKit browsers */
}
#blogs .text-truncate-multiline {
    line-clamp: 2; /* Adjust the number of lines to truncate */
    -webkit-line-clamp: 2; /* For WebKit browsers */
}

/* video modal (edit, add)*/
label[for="video-title"], label[for="video-about"] {
    font-size: 0.8rem;
}
.link-wrapper {
    position: relative;
}
label[for="video-link"] {
    position: absolute;
    padding: 0rem 0.5rem;
    font-size: x-large;
    border-left: 1px solid #dfe2e6;
    height: 100%;
    align-content: center;
    -webkit-align-content: center;
}
.bi-youtube::before {
    content: "\f62b";
    height: 1.2rem;
    display: flex;
    align-items: center;
}
input[name="link"] {
        padding-right: 3rem;
}
button.btn-danger:hover {
    background-color: #d13141;
}
/************************/

.splide__arrows {
    position: absolute;
    pointer-events: none;
    top: -79px;
    right: 22px;
    display: flex;
    width: 90px;
    margin: 0 -5px;
}

@media only screen and (max-width: 768px) {
    .splide__arrows {
        display: none;
    }
}

.splide__arrow {
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    width: 2em;
    height: 2em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 0;
    opacity: .7;
    background: #e8edf2;
    fill: #99a4ae;
}

.splide__arrow--prev {
    left: 1em;
}

.splide__arrow {
    background-color: #ffe7b6;
    background-color: #4d4d4d08;
    fill: #e8edf2;
    fill: var(--color-dark);
}

.splide__arrow svg {
    fill: var(--purple);
    /* fill: #967e58; */
}

.splide__arrows button {
    position: absolute;
    padding: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    margin: 0 3px;
    top: 0;
    transform: none;
    transform: initial;
    pointer-events: auto;
}

.splide__arrows .splide__arrow--prev,
.splide__track>.splide__arrows .splide__arrow--prev {
    right: 1em;
    left: auto;
}

.splide__arrows .splide__arrow--next,
.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next {
    left: 1em;
    right: auto;
}

.splide__arrows button:first-of-type {
    right: 0;
    left: auto;
}

.splide__arrows button:last-of-type {
    left: 0;
    right: auto;
}


/* FOOTER */
footer {
    position: relative;
    z-index: 2;
    height: fit-content;
}
footer .container {
    padding: 0 15px;
}
.footer_top {
    padding: 50px 0;
}
.footer_block {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    height: 100%;
    padding: 0 0 20px;
}

.footer_block>*:first-child {
    flex: auto;
}

.title {
    font-weight: 500;
}
.title--has-dash {
    position: relative;
    padding-right: 15px;
}
.title--has-dash:before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    border-radius: 4px;
    background-color: var(--white);
}



.footer-list {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.footer-list--row {
    flex-direction: row;
    flex-wrap: wrap;
}

.footer-list li {
    width: 100%;

}

.footer-list--row li {
    width: auto;
    margin-left: 10px;
}


a {
    text-decoration: none;
}

ul {
    list-style-type: none;
}

.store-about p, footer .footer-list li a, body ul.footer-list--social-links li a, footer .footer-list--store-links li a {
    color: #fff2af90;
    color: var(--white-opacity-70);
}
body ul.footer-list--social-links li a {
    display: flex !important;
    width: 40px !important;
    height: 40px !important;
    
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;

    padding: 10px 0;
    /* color: #fff2af90; */
    /* color: var(--white);
    color: var(--white-opacity-90); */
    border-radius: 50%;
    text-align: center;
    transition: color .5s cubic-bezier(.2, 1, .3, 1);

}

footer .footer-list li a {
    display: block;
    width: 100%;
    height: auto;
    padding: 10px 0;
    /* color: var(--white-opacity-90); */
    transition: color .5s cubic-bezier(.2, 1, .3, 1);
}

footer .footer-list li a i {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

footer .footer-list--row li a {
    width: auto;
}

footer .footer-list li a:hover {
    color: var(--light-white);
}

.footer_top .row>* {
    position: relative;
    padding-left: 20px;
    padding-right: 20px;
}

.footer_bottom {
    padding: 15px 0;
    border-top: 1px solid color(srgb 0.72 0.68 0.76 / 0.2);
}


/* ADMIN */

.bi-pencil-fill {
    background-color: var(--purple);
    color: var(--dark-yellow);
    font-size: 0.8em;
    border: 0px;
}

.bi-trash3-fill {
    background-color: #00000000 !important;
    font-size: 1rem;
    line-height: 1rem;
}
button.btn-danger:hover {
    background-color: #d13141;
}