html,body {position: relative;height: 100%;}
body {background: #eee;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color: #000;margin: 0;padding: 0;}
a{text-decoration: none}
ul{margin:0; padding:0; list-style:none;}
figure{margin:0; padding:0}

.inside-flex{display:flex; width:100%}
.inside-flex-column{display:flex; flex-direction: column}


#header{position:fixed; top:0; left:0; right:0; height:48px; background:rgba(0,0,0,0.5); backdrop-filter:blur(5px); z-index:999}
#header .container{width: 1200px; margin:0 auto}
#header .row{width:100%; position:relative; display:flex}
#header .col-start{margin-right:auto}
#header .col-end{margin-left:auto; display:flex; flex-direction:column; direction:ltr; text-align:right; margin-top:5px;}
#header #besmellah{margin-top:5px}
#header .today{margin-top:8px; color:#fff; white-space:nowrap}
#header .top-bar{margin-top:3px;}
#header .top-bar .languages{position:relative; margin-left:8px;}
#header .top-bar .languages button{background:transparent; border:none; height:40px; display:flex; align-items: center; cursor:pointer; color:#fff;}
#header .top-bar .languages button.open{text-shadow:1px 1px 1px #000}
#header .top-bar .languages button img{width:16px; height:16px; margin-right:4px;}
#header .top-bar .languages button.open img{backdrop-filter:drop-shadow(1px 1px 1px #000)}
#header .top-bar .languages ul{position:absolute; display:none; flex-direction:column; width:150px; text-align:center; background:rgba(0,0,0,0.5); backdrop-filter:blur(10px); margin:0; padding:0; border-radius:8px; border:1px solid rgba(255,255,255,0.3); box-shadow:3px 3px 3px rgba(0,0,0,0.5)}
#header .top-bar .languages button.open ~ ul{display:flex;}
#header .top-bar .languages ul li{width:100%; height:40px; line-height:40px; border-bottom:1px solid rgba(255,255,255,0.3);}
#header .top-bar .languages ul li:last-child{border-bottom:none;}
#header .top-bar .languages ul li a{color:#fff; display:block;}
#header .top-bar .languages ul li a:hover{background:rgba(255,255,255,0.1)}
#header .top-bar .icon-wrapper{width:fit-content; height:40px; margin-left:8px;}
#header .top-bar .icon-wrapper a{display:flex; width:100%; height:100%; text-align:center; align-items:center; justify-content:center;}
#header .top-bar .icon-wrapper img{width:18px; height:18px;}
#header .bottom-bar{}
#header .bottom-bar .toggle-menu{width:32px; height:24px; margin-top:-4px; margin-left:5px; background:rgba(0,0,0,0.5); border:none; border-radius:4px; cursor:pointer; display:none; flex-direction:column; justify-content: center}
#header .bottom-bar .toggle-menu span{width:24px; height:1px; background:rgba(255,255,255,0.7); margin:2px auto}
#header .bottom-bar .main-menu{margin-right:8px;}
#header .bottom-bar .main-menu ul{display:flex}
#header .bottom-bar .main-menu ul li{border-right:1px solid #fff;}
#header .bottom-bar .main-menu ul li:last-child{border-right:none}
#header .bottom-bar .main-menu ul li .menu-item{font-weight:normal; color:#fff; white-space:nowrap; margin:0; padding: 0; font-size:14px;}
#header .bottom-bar .main-menu ul li .menu-item a{display:block; padding:0 8px; color:inherit}
#header .bottom-bar .main-menu ul li .menu-item a:hover{background:rgba(255,255,255,0.1)}
#header .bottom-bar .search-wrapper{position:relative; border-radius:4px; overflow:hidden}
#header .bottom-bar .search-wrapper input{height:18px; border:transparent; border-bottom:1px solid rgba(255,255,255,0.3); color:#fff; backdrop-filter:blur(5px); background:rgba(0,0,0,0.3); outline:none !important; padding:0 20px 0 2px}
#header .bottom-bar .search-wrapper button{height:18px; background:none; border:none; backdrop-filter:blur(5px); background:transparent; margin:0; padding:0; position:absolute; right:0; top:0; cursor:pointer}
#header .bottom-bar .search-wrapper button img{width:16px; height:16px;}

#main-slide{width:100%; height:100%;}
#main-slide>.swiper-wrapper{}
#main-slide>.swiper-wrapper>.swiper-slide{font-size:18px; display:flex; justify-content:center; align-items:center;}
#main-slide>.swiper-wrapper>.swiper-slide img{display:block; width:100%; height:100%; object-fit:cover;}


#main-slide>.swiper-pagination{z-index:9999;}
#main-slide>.swiper-pagination-vertical.swiper-pagination-bullets,
#main-slide>.swiper-pagination-bullets{right:24px;}
#main-slide>.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
#main-slid>.swiper-pagination-bullets .swiper-pagination-bullet{position:relative; height:30px; width:30px; border-radius:4px; background:#f0c14f; opacity:1; transition:transform ease-out 0.1s; box-shadow:1px 1px 2px rgba(0,0,0,0.8)}
#main-slide>.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active,
#main-slide>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active{transform:scale(1.08); filter: brightness(1.1)}
#main-slide>.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet img,
#main-slide>.swiper-pagination-bullets .swiper-pagination-bullet img{width:24px; height:24px; margin:3px;}


.section{width:1200px; height:100vh; margin:0 auto; position:relative; display:flex; flex-direction:column; justify-content: center; overflow: visible}
.section-header{display:flex; align-items: center; margin-bottom:16px;}
.section-header:before{content:""; background: url("../images/allah-akbar.png") no-repeat center center; width:58px ;height:77px; position:relative; z-index:1}
.section-header .header-title{width:fit-content; background:#f0c14f; display:flex; align-items: center; padding:0 16px 0 24px; margin:16px 0 0 -8px; position:relative; z-index:0; border-radius:0 8px 8px 0; font-size:14px; line-height:24px; height:24px;}
.section-header .header-title img{width:19px; height:19px; margin-right:4px}
.content-item{width:100%}
/*
.swiper{}
.swiper-slide{}
.swiper-slide img{}
.normal-slide.swiper-grid-column{margin-bottom:-32px;}



*/
#main{position:fixed; top:0; left:0; right:0; bottom:0;}
#main-slide>.swiper-wrapper>.swiper-slide{overflow:hidden; height:calc(100vh - 48px); padding-top:48px}
#main-slide>.swiper-wrapper>.swiper-slide:first-child{height:100vh; padding-top: 0}


[data-theme="feature"] .main-article{display:flex; flex-direction:column; justify-content: center; height:100vh;}
[data-theme="feature"] .text-wrapper{width:calc(100vw - 128px); text-align:left; position:absolute; bottom:0; left:50%; transform: translateX(-50%); padding:16px 16px 16px 200px; border-radius:16px 16px 0 0; background:rgba(255,255,255,0.4); backdrop-filter: blur(10px) brightness(1); z-index: 99; box-sizing: border-box; box-shadow:0 0 10px rgba(0,0,0,0.3)}
[data-theme="feature"] .text-wrapper:before{content:""; position:absolute; top:-64px; left:0; width:185px; height:185px; background: url("../images/quote.svg") no-repeat center center; background-size: contain}
[data-theme="feature"] .text-wrapper .title{font-size:28px; line-height:32px; margin:0 0 16px; padding:0; position:relative; z-index:1}
[data-theme="feature"] .text-wrapper .title a{color:#2e2e2e}
[data-theme="feature"] .text-wrapper .lead{text-align: justify; position:relative; z-index:1; line-height:24px; margin:0}
[data-theme="feature"]{width:100%; position:relative}
[data-theme="feature"] .kaaba{width:100vw; height:100vh;position:absolute; left:50%; transform: translateX(-50%); bottom:0}
[data-theme="feature"] .kaaba img{width:100%; height:100%; object-fit:cover; object-position: top}
/**/

[data-theme="notes"]{background:#2e2e2e}
[data-theme="notes"] .section-header .header-title{background:#f0c14f;}
[data-section="notes"] .normal-slide{padding-bottom:32px;}
[data-section="notes"] .normal-slide .swiper-slide{color:#fff; font-size:14px; line-height:22px; position:relative; align-items:start; width:268px}
[data-section="notes"] .normal-slide .swiper-slide:first-child{width:calc(268px * 2) !important}
[data-section="notes"] .normal-slide .swiper-slide .thumbnail{aspect-ratio:16 / 9; overflow:hidden; border-radius:8px; border:2px solid #f0c14f; position: relative}
[data-section="notes"] .normal-slide .swiper-slide .thumbnail img{width:100%; height:100%; object-fit: cover}
[data-section="notes"] .normal-slide .swiper-slide .thumbnail a .shadow{display:block; position:absolute; top:0; left:0; right:0; bottom:0; box-shadow:-10px -10px 30px rgba(0,0,0,0.5) inset}
[data-section="notes"] .normal-slide .swiper-slide .title{font-size:18px; line-height:22px; color:#f0c14f; margin:0; padding:8px 0; color:#f0c14f}
[data-section="notes"] .normal-slide .swiper-slide .title a {color:inherit}
[data-section="notes"] .normal-slide .swiper-slide .lead {
    text-align: justify; margin:0; padding:0;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
[data-section="notes"] .normal-slide .swiper-pagination-bullet{background:#f0c14f}
/**/

[data-theme="videos"]{background:#e7e7e7; padding-top:10vh}
[data-section="videos"] .normal-slide{height:calc(100vh - 48px - 120px); overflow:hidden}
[data-section="videos"] .normal-slide .swiper-slide{position:relative; height: calc(50% - 32px) !important; overflow:hidden; align-items: start}
[data-section="videos"] .normal-slide .swiper-slide .thumbnail{aspect-ratio:16 / 9; overflow:hidden; border-radius:8px; border:2px solid #f0c14f; position:relative;}
[data-section="videos"] .normal-slide .swiper-slide .thumbnail a{position:absolute; top:0; left:0; right:0; bottom:0; z-index:2;}
[data-section="videos"] .normal-slide .swiper-slide .thumbnail a:before{content:""; position:absolute; bottom:0px; right:0px; width:50px; height:50px; z-index:2; border-radius:8px 0 0 0; background: #f0c14f}
[data-section="videos"] .normal-slide .swiper-slide .thumbnail a:after{content:""; position:absolute; bottom:0px; right:0px; margin-right:-5px; margin-bottom:10px; z-index:2; width:0; height:0; border:14px solid transparent; border-left:24px solid #fff; }
[data-section="videos"] .normal-slide .swiper-slide .thumbnail a .shadow{display:block; position:absolute; top:0; left:0; right:0; bottom:0; z-index: 0; box-shadow:-10px -10px 30px rgba(0,0,0,0.5) inset}
[data-section="videos"] .normal-slide .swiper-slide .thumbnail img{width:100%; height:100%; object-fit: cover}
[data-section="videos"] .normal-slide .swiper-slide .title{font-size:18px; line-height:22px; color:#2e2e2e; margin:0; padding:8px 0}
[data-section="videos"] .normal-slide .swiper-slide .title a {
    color:inherit;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
[data-section="videos"] .normal-slide .swiper-pagination-bullet{background:#2e2e2e}
/**/

[data-theme="quotes"]{background:#f0c14f; padding-top:10vh}
[data-theme="quotes"] .section-header .header-title{background:#2e2e2e; color:#fff}
[data-section="quotes"] .normal-slide{height:calc(100vh - 48px - 120px); overflow:hidden}
[data-section="quotes"] .normal-slide .swiper-slide{position:relative; height: calc(50% - 32px) !important; overflow:hidden; align-items: start}
[data-section="quotes"] .normal-slide .swiper-slide .thumbnail{aspect-ratio:16 / 9; overflow:hidden; border-radius:8px; border:2px solid #f0c14f; position:relative;}
[data-section="quotes"] .normal-slide .swiper-slide .thumbnail a{position:absolute; top:0; left:0; right:0; bottom:0; z-index:2;}
[data-section="quotes"] .normal-slide .swiper-slide .thumbnail a .shadow{display:block; position:absolute; top:0; left:0; right:0; bottom:0; z-index: 0; box-shadow:-10px -10px 30px rgba(0,0,0,0.5) inset}
[data-section="quotes"] .normal-slide .swiper-slide .thumbnail img{width:100%; height:100%; object-fit: cover}
[data-section="quotes"] .normal-slide .swiper-slide .title{font-size:18px; line-height:22px; color:#2e2e2e; margin:0; padding:8px 0}
[data-section="quotes"] .normal-slide .swiper-slide .title a {
    color:inherit;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
[data-section="quotes"] .normal-slide .swiper-pagination-bullet{background:#2e2e2e}
/**/

[data-theme="posters"]{background:#fff}
[data-theme="posters"] .section-header .header-title{background:#2e2e2e; color:#fff}
[data-section="posters"] .normal-slide .swiper-slide{color:#2e2e2e; font-size:14px; line-height:22px; position:relative; align-items:start; width:268px}
[data-section="posters"] .normal-slide .swiper-slide:first-child{width:calc(268px * 2) !important}
[data-section="posters"] .normal-slide .swiper-slide .thumbnail{aspect-ratio:16 / 9; overflow:hidden; border-radius:8px; border:2px solid #f0c14f; position: relative}
[data-section="posters"] .normal-slide .swiper-slide .thumbnail img{width:100%; height:100%; object-fit: cover}
[data-section="posters"] .normal-slide .swiper-slide .thumbnail a .shadow{display:block; position:absolute; top:0; left:0; right:0; bottom:0; box-shadow:-10px -10px 30px rgba(0,0,0,0.5) inset}
[data-section="posters"] .normal-slide .swiper-slide .title{font-size:18px; line-height:22px; color:#2e2e2e; margin:0; padding:8px 0}
[data-section="posters"] .normal-slide .swiper-slide .title a {color:inherit}
[data-section="posters"] .normal-slide .swiper-slide .lead {text-align: justify; margin:0; padding:0}
[data-section="posters"] .normal-slide .swiper-pagination-bullet{background:#2e2e2e}
/**/

[data-theme="infographics"]{background:#2e2e2e}
[data-theme="infographics"] .section-header .header-title{background:#f0c14f;}
[data-section="infographics"] .normal-slide{padding-bottom:32px;}
[data-section="infographics"] .normal-slide .swiper-slide{color:#fff; font-size:14px; line-height:22px; position:relative; align-items:start; width:268px}
[data-section="infographics"] .normal-slide .swiper-slide:first-child{width:calc(268px * 2) !important}
[data-section="infographics"] .normal-slide .swiper-slide .thumbnail{aspect-ratio:16 / 9; overflow:hidden; border-radius:8px; border:2px solid #f0c14f; position: relative}
[data-section="infographics"] .normal-slide .swiper-slide .thumbnail img{width:100%; height:100%; object-fit: cover}
[data-section="infographics"] .normal-slide .swiper-slide .thumbnail a .shadow{display:block; position:absolute; top:0; left:0; right:0; bottom:0; box-shadow:-10px -10px 30px rgba(0,0,0,0.5) inset}
[data-section="infographics"] .normal-slide .swiper-slide .title{font-size:18px; line-height:22px; color:#f0c14f; margin:0; padding:8px 0}
[data-section="infographics"] .normal-slide .swiper-slide .title a {color:inherit}
[data-section="infographics"] .normal-slide .swiper-slide .lead {
    text-align: justify; margin:0; padding:0;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
[data-section="infographics"] .normal-slide .swiper-pagination-bullet{background:#f0c14f}
/**/

[data-section="notes"] .normal-slide:after,
[data-section="infographics"] .normal-slid:after{
    content:""; position:absolute; right:0; top:0; bottom:0; width:16px; z-index:99;
    background: -moz-linear-gradient(left,  rgba(46,46,46,0) 0%, rgba(46,46,46,1) 100%);
    background: -webkit-linear-gradient(left,  rgba(46,46,46,0) 0%,rgba(46,46,46,1) 100%);
    background: linear-gradient(to right,  rgba(46,46,46,0) 0%,rgba(46,46,46,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002e2e2e', endColorstr='#2e2e2e',GradientType=1 );
}


[data-theme="videos"]{margin-top:-48px;}
[data-theme="quotes"]{margin-top:-48px;}
[data-theme="infographics"]{margin-top:-48px;}

/**/
@media only screen and (max-width:1250px){
    #header .container,
    .section{width:1000px;}
}
@media only screen and (max-width:1080px){
    #header .container,
    .section{width:880px;}
}
@media only screen and (max-width:960px){
    #header .container,
    .section{width:calc(100vw - 64px);}
    #header .bottom-bar .toggle-menu{display:flex; margin-right:16px;}
    body.show-menu #header .bottom-bar .toggle-menu span{display:none;}
    body.show-menu #header .bottom-bar .toggle-menu span:nth-child(1){display:block;}
    #header .bottom-bar .search-wrapper input{width:215px;}
    #header .bottom-bar .main-menu{display:none; position:fixed; overflow:auto; top:70px; left:0; width:100vw; height:calc(100vh - 70px); backdrop-filter:blur(5px); background:rgba(0,0,0,0.8)}
    body.show-menu #header .bottom-bar .main-menu{display:block}
    #header .bottom-bar .main-menu ul{flex-direction:column; padding:32px;}
    #header .bottom-bar .main-menu ul li{height:60px; border:none}
    #header .bottom-bar .main-menu ul li .menu-item{height:100%; width:100%}
    #header .bottom-bar .main-menu ul li .menu-item a{display:block; height:100%; text-align:center; line-height:60px; border-radius:8px;}
    #header .bottom-bar .main-menu ul li .menu-item a:hover{backdrop-filter: blur(10px)}
    #main-slide>.swiper-wrapper>.swiper-slide>.section{height:calc(100% - 98px)}

    #main-slide>.swiper-pagination-vertical.swiper-pagination-bullets,
    #main-slide>.swiper-pagination.swiper-pagination-bullets{bottom:0; right:0; left:0; top:auto; transform:none;  display:flex; height:50px; background:#f0c14f; box-shadow:0 0 3px rgba(0,0,0,0.3);}
    #main-slide>.swiper-pagination-vertical.swiper-pagination-bullets>span,
    #main-slide>.swiper-pagination-bullets>span{display:block;width:100% !important; height:100% !important; transform:scale(1) !important; box-shadow:none !important; border:none !important; margin:1px 0 0 !important; padding:0 !important}
    #main-slide>.swiper-pagination-bullets img,
    #main-slide>.swiper-pagination-bullets img{margin-top:12px !important;}

    [data-section="videos"] .normal-slide,
    [data-section="quotes"] .normal-slide{height:calc(100vh - 48px - 250px) !important;}
    [data-section="videos"] .section-header,
    [data-section="quotes"] .section-header{margin-top:-70px;}

    [data-theme="videos"]{margin-top:-48px; max-height: calc(100vh - 50px)}
    [data-theme="quotes"]{margin-top:-48px;}
    [data-theme="infographics"]{margin-top:-48px;}

    [data-theme="feature"] .text-wrapper{width:100%; border-radius:0}
    [data-theme="feature"] .text-wrapper .title{font-size:20px; line-height: 24px}
    [data-theme="feature"] .text-wrapper .lead{font-size:14px; line-height: 20px}


    [data-section="notes"] .section-header,
    [data-section="infographics"] .section-header{margin-top:-75px;}
    [data-section="videos"] .normal-slide .swiper-slide .thumbnail,
    [data-section="quotes"] .normal-slide .swiper-slide .thumbnail{aspect-ratio:unset; height:160px}
    [data-section="videos"] .normal-slide .swiper-slide,
    [data-section="quotes"] .normal-slide .swiper-slide{height: unset !important}
}
@media only screen and (max-width:720px){
    [data-section="notes"] .normal-slide .swiper-slide:first-child,
    [data-section="infographics"] .normal-slide .swiper-slide:first-child{width:calc(200px * 2) !important}
    /*
    */
}
@media only screen and (max-width:640px){
    #header .top-bar .languages button span{display:none}
    #header .bottom-bar .search-wrapper input{width:155px;}

    [data-theme="feature"] .text-wrapper{padding:16px}
    [data-theme="feature"] .text-wrapper:before{width:85px; height:85px; top:-32px;}
}
@media only screen and (max-width:500px){

}
@media only screen and (max-width:480px){
    #header .top-bar .icon-wrapper{display:none}
    #header .bottom-bar .search-wrapper input{width:123px}

    [data-section="notes"] .normal-slide .swiper-slide,
    [data-section="notes"] .normal-slide .swiper-slide:first-child,
    [data-section="infographics"] .normal-slide .swiper-slide,
    [data-section="infographics"] .normal-slide .swiper-slide:first-child{width:calc(100vw - 32px) !important}
    [data-section="notes"] .normal-slide:after,
    [data-section="infographics"] .normal-slid:after{width:1px; display:none;}
}
@media only screen and (max-width:430px){
    #header .container,
    .section{width:calc(100vw - 32px);}
    #header .bottom-bar .search-wrapper{display:none;}
}
@media only screen and (max-width:360px){}

@media only screen and (max-height:800px){
    /*[data-section="quotes"] .normal-slide{height:calc(100vh - 48px - 120px - 85px)}
    [data-section="quotes"] .normal-slide .swiper-slide .title{font-size:14px; line-height:18px;}
    [data-section="quotes"] .normal-slide .swiper-slide:nth-child(2n){margin-top:8px !important;}

    [data-section="videos"] .normal-slide{height:calc(100vh - 48px - 120px - 85px)}
    [data-section="videos"] .normal-slide .swiper-slide .title{font-size:14px; line-height:18px;}
    [data-section="videos"] .normal-slide .swiper-slide:nth-child(2n){margin-top:8px !important;}*/
}