@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,400;0,500;1,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lateef&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Kufam:ital,wght@0,400..900;1,400..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Readex+Pro:wght@160..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");   html {
line-height: 1.15; -webkit-text-size-adjust: 100%; }  body {
margin: 0;
} main {
display: block;
} h1 {
font-size: 2em;
margin: 0;
}
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}  hr {
box-sizing: content-box; height: 0; overflow: visible; } pre {
font-family: monospace, monospace; font-size: 1em; }  a {
background-color: transparent;
} abbr[title] {
border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b,
strong {
font-weight: bolder;
} code,
kbd,
samp {
font-family: monospace, monospace; font-size: 1em; } small {
font-size: 80%;
} sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}  img {
border-style: none;
}  button,
input,
optgroup,
select,
textarea {
font-family: inherit;
} button,
input { overflow: visible;
} button,
select { text-transform: none;
} button,
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
} button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
} button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: 1px dotted ButtonText;
} fieldset {
padding: 0.35em 0.75em 0.625em;
} legend {
box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress {
vertical-align: baseline;
} textarea {
overflow: auto;
} [type=checkbox],
[type=radio] {
box-sizing: border-box; padding: 0; } [type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto;
} [type=search] {
-webkit-appearance: textfield; outline-offset: -2px; } [type=search]::-webkit-search-decoration {
-webkit-appearance: none;
} ::-webkit-file-upload-button {
-webkit-appearance: button; font: inherit; }  details {
display: block;
} summary {
display: list-item;
}  template {
display: none;
} [hidden] {
display: none;
}
main {
margin: 0 auto;
max-width: 1600px;
width: 92%;
padding-top: 58px;
}
h1 {
font-family: "Merriweather", sans-serif;
}
h1 {
font-size: 28px;
}
h1 {
line-height: 1.3em;
}
h1 {
font-weight: 600;
}
h1:dir(rtl) {
font-family: "Kufam", sans-serif;
line-height: 1.6em;
font-weight: 500;
}
@media screen and (min-width: 1025px) {
h1 {
font-family: "Merriweather", sans-serif;
font-size: 40px;
line-height: 1.1em;
font-weight: 600;
}
h1:dir(rtl) {
font-family: "Kufam", sans-serif;
font-weight: 500;
}
}
h2 {
font-family: "Merriweather", sans-serif;
}
h2 {
font-size: 22px;
}
h2 {
line-height: 1.2em;
}
h2 {
font-weight: 600;
}
h2:dir(rtl) {
font-family: "Kufam", sans-serif;
font-weight: 500;
}
@media screen and (min-width: 1025px) {
h2 {
font-family: "Merriweather", sans-serif;
font-size: 28px;
line-height: 1.2em;
font-weight: 600;
}
h2:dir(rtl) {
font-family: "Kufam", sans-serif;
font-weight: 500;
}
}
h3 {
font-family: "Merriweather", sans-serif;
}
h3 {
font-size: 20px;
}
h3 {
line-height: 1.2em;
}
h3 {
font-weight: 600;
}
h3:dir(rtl) {
font-family: "Readex Pro", serif;
font-weight: 500;
}
@media screen and (min-width: 1025px) {
h3 {
font-family: "Merriweather", sans-serif;
font-size: 22px;
line-height: 1.2em;
font-weight: 600;
}
h3:dir(rtl) {
font-family: "Readex Pro", serif;
font-weight: 500;
}
}
body, p {
font-family: "Merriweather", sans-serif;
}
body, p {
font-size: 16px;
}
body, p {
line-height: 1.8em;
}
body, p {
font-weight: 300;
}
body:dir(rtl), p:dir(rtl) {
font-family: "Readex Pro", serif;
line-height: 2em;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
body, p {
font-family: "Merriweather", sans-serif;
font-size: 17px;
line-height: 1.8em;
font-weight: 300;
}
body:dir(rtl), p:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 17px;
line-height: 2em;
font-weight: 300;
}
}
html {
background-color: #252525;
}
body {
background-color: #F8F8F8;
line-height: 1;
}
p {
margin: 8px 0;
}
p a {
color: #007bee;
}
small {
font-family: "DM Sans", sans-serif;
}
small {
font-size: 15px;
}
small {
line-height: 1.3em;
}
small {
font-weight: 400;
}
small:dir(rtl) {
font-family: "Readex Pro", serif;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
small {
font-family: "DM Sans", sans-serif;
font-size: 16px;
line-height: 1.3em;
font-weight: 400;
}
small:dir(rtl) {
font-family: "Readex Pro", serif;
font-weight: 500;
}
}
.clearList ul, .clearList li {
list-style: none;
padding: 0;
margin: 0;
}
a {
color: #252525;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.icon {
fill: #252525;
width: 24px;
height: 24px;
}
.icon.large {
width: 32px;
height: 32px;
}
.button {
display: inline-block;
background-color: #252525;
color: #F8F8F8;
line-height: 16px;
padding: 10px 20px;
border-radius: 4px;
position: relative;
}
.button {
font-family: "DM Sans", sans-serif;
}
.button {
font-size: 13px;
}
.button {
line-height: 1.3em;
}
.button {
font-weight: 300;
}
.button:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
.button {
font-family: "DM Sans", sans-serif;
font-size: 14px;
line-height: 1.3em;
font-weight: 300;
}
.button:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
}
.button.light {
background-color: #D1D1D1;
color: #000000;
}
.button.light:hover {
background-color: #8C8C8C;
color: #FFFFFF;
}
.button:hover {
text-decoration: none;
background-color: black;
}
.button.dir {
padding-left: 38px;
}
.button.dir svg {
display: block;
content: "";
width: 24px;
height: 24px;
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
}
.breadcrumb {
padding: 24px 0;
color: #8C8C8C;
}
.breadcrumb {
font-family: "DM Sans", sans-serif;
}
.breadcrumb {
font-size: 13px;
}
.breadcrumb {
line-height: 1.3em;
}
.breadcrumb {
font-weight: 300;
}
.breadcrumb:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
.breadcrumb {
font-family: "DM Sans", sans-serif;
font-size: 14px;
line-height: 1.3em;
font-weight: 300;
}
.breadcrumb:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
}
a.bookmark {
display: block;
}
.fadeout {
transition: opacity 0.455s ease;
opacity: 0;
}
#container {
min-height: 55vh;
}
header {
background-color: #FFFFFF;
border-bottom: 1px solid #D1D1D1;
padding: 0 min(50px, 3%);
box-sizing: border-box;
display: flex;
position: fixed;
width: 100%;
z-index: 10;
}
header #branding, header h1 {
font-size: 24px;
line-height: 58px;
vertical-align: baseline;
}
header #branding span, header h1 span {
display: none;
}
header #branding svg, header h1 svg {
width: 180px;
height: 18px;
}
header nav {
margin: 0 40px;
}
header nav ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
height: 58px;
align-items: center;
}
header nav ul li {
margin-inline-end: 20px;
}
header nav ul li {
font-family: "DM Sans", sans-serif;
}
header nav ul li {
font-size: 15px;
}
header nav ul li {
line-height: 1.3em;
}
header nav ul li {
font-weight: 400;
}
header nav ul li:dir(rtl) {
font-family: "Readex Pro", serif;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
header nav ul li {
font-family: "DM Sans", sans-serif;
font-size: 16px;
line-height: 1.3em;
font-weight: 400;
}
header nav ul li:dir(rtl) {
font-family: "Readex Pro", serif;
font-weight: 500;
}
}
header nav ul li:last-child {
margin-inline-end: 0;
}
header #tabs {
display: none;
}
header #search {
flex: 1;
display: flex;
margin-inline-end: 40px;
justify-content: center;
}
header #search input[type=search] {
line-height: 32px;
height: 44px;
padding: 0 16px 0 54px;
background-color: #F8F8F8;
border: none;
margin: 6px 8px 6px 0;
border-radius: 4px;
}
header #search input[type=search] {
font-family: "DM Sans", sans-serif;
}
header #search input[type=search] {
font-size: 15px;
}
header #search input[type=search] {
line-height: 1.3em;
}
header #search input[type=search] {
font-weight: 400;
}
header #search input[type=search]:dir(rtl) {
font-family: "Readex Pro", serif;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
header #search input[type=search] {
font-family: "DM Sans", sans-serif;
font-size: 16px;
line-height: 1.3em;
font-weight: 400;
}
header #search input[type=search]:dir(rtl) {
font-family: "Readex Pro", serif;
font-weight: 500;
}
}
header #search input[type=search]:hover, header #search input[type=search]:focus {
background-color: #eee;
}
header #search input[type=submit] {
position: absolute;
top: 50%;
left: 12px;
transform: translateY(-54%);
background: url(https://ramazandemir.com/wp-content/themes/rd/assets/icons/search.svg) no-repeat;
border: none;
width: 32px;
height: 32px;
overflow: hidden;
text-indent: 100px;
pointer-events: none;
}
header #search .search-form {
flex: 1;
max-width: 540px;
position: relative;
margin-inline-end: 8px;
}
header #search .search-form input[type=search] {
width: 100%;
}
header #search .aya-form {
flex: 1;
}
header #search .aya-form input[type=search] {
width: 200px;
padding: 0 16px;
}
header #language {
line-height: 54px;
margin-inline-end: 16px;
}
header #language a {
display: inline-block;
font-family: sans-serif;
}
header #language a {
font-family: "Merriweather", sans-serif;
}
header #language a {
font-size: 16px;
}
header #language a {
line-height: 1.8em;
}
header #language a {
font-weight: 300;
}
header #language a:dir(rtl) {
font-family: "Readex Pro", serif;
line-height: 2em;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
header #language a {
font-family: "Merriweather", sans-serif;
font-size: 17px;
line-height: 1.8em;
font-weight: 300;
}
header #language a:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 17px;
line-height: 2em;
font-weight: 300;
}
}
header #language a svg {
width: 24px;
height: 24px;
vertical-align: middle;
}
header #favorites {
text-align: right;
line-height: 54px;
}
header #favorites a {
display: inline-block;
}
header #favorites a, header #favorites span {
font-family: "DM Sans", sans-serif;
}
header #favorites a, header #favorites span {
font-size: 15px;
}
header #favorites a, header #favorites span {
line-height: 1.3em;
}
header #favorites a, header #favorites span {
font-weight: 400;
}
header #favorites a:dir(rtl), header #favorites span:dir(rtl) {
font-family: "Readex Pro", serif;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
header #favorites a, header #favorites span {
font-family: "DM Sans", sans-serif;
font-size: 16px;
line-height: 1.3em;
font-weight: 400;
}
header #favorites a:dir(rtl), header #favorites span:dir(rtl) {
font-family: "Readex Pro", serif;
font-weight: 500;
}
}
header #favorites svg {
vertical-align: middle;
}
header .menu-trigger {
display: none;
}
header .progress {
position: absolute;
width: 100%;
height: 4px;
background-color: #007bee;
bottom: -4px;
left: 0;
transform-origin: 0 0;
transition: opacity 0.5s ease;
}
header .progress.fade {
opacity: 0;
}
.sura-list {
display: none;
position: absolute;
left: 50%;
top: 70px;
width: 1020px;
min-height: 400px;
background-color: #FFFFFF;
padding: 20px 40px 50px;
transform: translateX(-50%);
border-radius: 4px;
}
.sura-list ul {
list-style: none;
margin: 30px 0 0 0;
padding: 0;
column-count: 6;
column-gap: 40px;
}
.sura-list ul li {
position: relative;
margin-bottom: 12px;
transition: opacity 0.3s ease;
opacity: 1;
}
.sura-list ul li span {
text-align: right;
display: block;
background-color: #FFFFFF;
width: 24px;
position: absolute;
pointer-events: none;
}
.sura-list ul li span {
font-family: "DM Sans", sans-serif;
}
.sura-list ul li span {
font-size: 13px;
}
.sura-list ul li span {
line-height: 1.3em;
}
.sura-list ul li span {
font-weight: 300;
}
.sura-list ul li span:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
.sura-list ul li span {
font-family: "DM Sans", sans-serif;
font-size: 14px;
line-height: 1.3em;
font-weight: 300;
}
.sura-list ul li span:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
}
.sura-list ul li a {
padding-inline-start: 32px;
pointer-events: none;
}
.sura-list ul li.off {
opacity: 0.3;
}
.sura-list ul li.on a {
pointer-events: all;
}
.sura-list ul li.on a::after {
display: inline-block;
content: "";
width: 5px;
height: 5px;
background-color: #252525;
border-radius: 3px;
vertical-align: middle;
margin-inline-start: 8px;
}
footer {
margin-top: 160px;
background-color: #252525;
color: #F8F8F8;
}
footer a {
color: #F8F8F8;
}
footer .inside {
margin: 0 auto;
max-width: 1600px;
width: 94%;
}
footer .inside .links {
display: flex;
padding: 80px 0;
}
footer .inside .links > div {
min-width: 200px;
}
footer .inside .links ul {
list-style: none;
padding: 0;
margin: 0;
}
footer .inside .links ul li {
margin: 8px 0;
}
footer .inside #copyright {
padding: 60px 0;
border-top: 1px solid #5D5D5D;
color: #8C8C8C;
text-align: left;
}
footer .inside #copyright {
font-family: "DM Sans", sans-serif;
}
footer .inside #copyright {
font-size: 15px;
}
footer .inside #copyright {
line-height: 1.3em;
}
footer .inside #copyright {
font-weight: 400;
}
footer .inside #copyright:dir(rtl) {
font-family: "Readex Pro", serif;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
footer .inside #copyright {
font-family: "DM Sans", sans-serif;
font-size: 16px;
line-height: 1.3em;
font-weight: 400;
}
footer .inside #copyright:dir(rtl) {
font-family: "Readex Pro", serif;
font-weight: 500;
}
}
footer .inside #copyright a {
float: right;
}
.section-head {
width: 100%;
border-top: 1px solid #D1D1D1;
padding: 20px 0 20px 0;
margin-top: 80px;
}
.section-foot {
padding: 40px 0 0 0;
text-align: right;
}
.section-foot.left {
text-align: left;
}
section.col-two {
display: flex;
flex-direction: row-reverse;
margin-top: 40px;
}
section.col-two section:first-child {
min-width: 380px;
margin-inline-start: min(8%, 100px);
padding-inline-start: min(4%, 50px);
max-width: 25%;
line-height: 1.6em;
border-inline-start: 1px solid #D1D1D1;
}
section.col-two section:nth-child(2) {
flex: 1;
}
section.col-two .section-head {
margin-top: 0px;
border-top: none;
}
section.col-two .keywords {
margin-top: 60px;
}
.promo {
margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
.promo {
padding-top: 20px;
}
html[dir=rtl] .promo {
padding-top: 35px;
}
}
.promo .splide__arrow {
border-radius: 4px;
}
.promo .splide__arrow--prev {
left: -38px;
}
.promo .splide__arrow--next {
right: -38px;
}
.promo .splide__arrow svg {
width: 12px;
height: 12px;
}
.promo .splide__pagination {
bottom: -24px;
}
.promo .splide__pagination li {
margin: 0 2px;
}
.promo .splide__pagination__page.is-active {
background: #252525;
transform: scale(1.2);
}
.promo .item-promo {
min-height: 500px;
position: relative;
}
@media screen and (max-width: 768px) {
.promo .item-promo {
min-height: 450px;
}
}
.promo .item-promo > span {
position: absolute;
right: 32px;
top: 32px;
background-color: #FFFFFF;
padding: 2px 8px;
border-radius: 2px;
color: #252525;
}
.promo .item-promo > span {
font-family: "DM Sans", sans-serif;
}
.promo .item-promo > span {
font-size: 13px;
}
.promo .item-promo > span {
line-height: 1.3em;
}
.promo .item-promo > span {
font-weight: 300;
}
.promo .item-promo > span:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
.promo .item-promo > span {
font-family: "DM Sans", sans-serif;
font-size: 14px;
line-height: 1.3em;
font-weight: 300;
}
.promo .item-promo > span:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
}
html[dir=rtl] .promo .item-promo > span {
left: 32px;
right: auto;
z-index: 2;
}
.promo .item-promo figure {
aspect-ratio: 16/9;
position: absolute;
height: 100%;
max-width: 100%;
background-position: right center;
background-size: cover;
background-repeat: no-repeat;
right: 0; }
html[dir=rtl] .promo .item-promo figure {
right: auto;
left: 0;
background-position: left center;
}
.promo .item-promo figure::after {
display: block;
content: "";
position: absolute;
left: -1px;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
html[dir=rtl] .promo .item-promo figure::after {
left: 1px;
}
.promo .item-promo figure img {
width: 100%;
height: 100%;
object-fit: cover;
}
.promo .item-promo figure img[data-splide-lazy-loaded] {
display: block; position: absolute;
top: 0;
left: 0;
}
.promo .item-promo.color-1 {
background-color: rgb(26, 70, 123);
}
.promo .item-promo.color-1 figure::after {
background: linear-gradient(to right, rgb(26, 70, 123) 5%, rgba(26, 70, 123, 0) 70%);
}
html[dir=rtl] .promo .item-promo.color-1 figure::after {
background: linear-gradient(to left, rgb(26, 70, 123) 5%, rgba(26, 70, 123, 0) 70%);
}
@media screen and (max-width: 768px) {
.promo .item-promo.color-1 figure::after {
background: linear-gradient(to right, rgb(26, 70, 123) 20%, rgba(26, 70, 123, 0) 100%);
}
html[dir=rtl] .promo .item-promo.color-1 figure::after {
background: linear-gradient(to left, rgb(26, 70, 123) 20%, rgba(26, 70, 123, 0) 100%);
}
}
.promo .item-promo.color-2 {
background-color: rgb(45, 26, 123);
}
.promo .item-promo.color-2 figure::after {
background: linear-gradient(to right, rgb(45, 26, 123) 5%, rgba(45, 26, 123, 0) 70%);
}
html[dir=rtl] .promo .item-promo.color-2 figure::after {
background: linear-gradient(to left, rgb(45, 26, 123) 5%, rgba(45, 26, 123, 0) 70%);
}
@media screen and (max-width: 768px) {
.promo .item-promo.color-2 figure::after {
background: linear-gradient(to right, rgb(45, 26, 123) 20%, rgba(45, 26, 123, 0) 100%);
}
html[dir=rtl] .promo .item-promo.color-2 figure::after {
background: linear-gradient(to left, rgb(45, 26, 123) 20%, rgba(45, 26, 123, 0) 100%);
}
}
.promo .item-promo.color-3 {
background-color: rgb(98, 22, 22);
}
.promo .item-promo.color-3 figure::after {
background: linear-gradient(to right, rgb(98, 22, 22) 5%, rgba(98, 22, 22, 0) 70%);
}
html[dir=rtl] .promo .item-promo.color-3 figure::after {
background: linear-gradient(to left, rgb(98, 22, 22) 5%, rgba(98, 22, 22, 0) 70%);
}
@media screen and (max-width: 768px) {
.promo .item-promo.color-3 figure::after {
background: linear-gradient(to right, rgb(98, 22, 22) 20%, rgba(98, 22, 22, 0) 100%);
}
html[dir=rtl] .promo .item-promo.color-3 figure::after {
background: linear-gradient(to left, rgb(98, 22, 22) 20%, rgba(98, 22, 22, 0) 100%);
}
}
.promo .item-promo.color-4 {
background-color: rgb(28, 102, 102);
}
.promo .item-promo.color-4 figure::after {
background: linear-gradient(to right, rgb(28, 102, 102) 5%, rgba(28, 102, 102, 0) 70%);
}
html[dir=rtl] .promo .item-promo.color-4 figure::after {
background: linear-gradient(to left, rgb(28, 102, 102) 5%, rgba(28, 102, 102, 0) 70%);
}
@media screen and (max-width: 768px) {
.promo .item-promo.color-4 figure::after {
background: linear-gradient(to right, rgb(28, 102, 102) 20%, rgba(28, 102, 102, 0) 100%);
}
html[dir=rtl] .promo .item-promo.color-4 figure::after {
background: linear-gradient(to left, rgb(28, 102, 102) 20%, rgba(28, 102, 102, 0) 100%);
}
}
.promo .item-promo.color-5 {
background-color: rgb(83, 54, 54);
}
.promo .item-promo.color-5 figure::after {
background: linear-gradient(to right, rgb(83, 54, 54) 5%, rgba(83, 54, 54, 0) 70%);
}
html[dir=rtl] .promo .item-promo.color-5 figure::after {
background: linear-gradient(to left, rgb(83, 54, 54) 5%, rgba(83, 54, 54, 0) 70%);
}
@media screen and (max-width: 768px) {
.promo .item-promo.color-5 figure::after {
background: linear-gradient(to right, rgb(83, 54, 54) 20%, rgba(83, 54, 54, 0) 100%);
}
html[dir=rtl] .promo .item-promo.color-5 figure::after {
background: linear-gradient(to left, rgb(83, 54, 54) 20%, rgba(83, 54, 54, 0) 100%);
}
}
.promo .item-promo.color-6 {
background-color: rgb(128, 53, 21);
}
.promo .item-promo.color-6 figure::after {
background: linear-gradient(to right, rgb(128, 53, 21) 5%, rgba(128, 53, 21, 0) 70%);
}
html[dir=rtl] .promo .item-promo.color-6 figure::after {
background: linear-gradient(to left, rgb(128, 53, 21) 5%, rgba(128, 53, 21, 0) 70%);
}
@media screen and (max-width: 768px) {
.promo .item-promo.color-6 figure::after {
background: linear-gradient(to right, rgb(128, 53, 21) 20%, rgba(128, 53, 21, 0) 100%);
}
html[dir=rtl] .promo .item-promo.color-6 figure::after {
background: linear-gradient(to left, rgb(128, 53, 21) 20%, rgba(128, 53, 21, 0) 100%);
}
}
.promo .item-promo.color-7 {
background-color: rgb(77, 78, 56);
}
.promo .item-promo.color-7 figure::after {
background: linear-gradient(to right, rgb(77, 78, 56) 5%, rgba(77, 78, 56, 0) 70%);
}
html[dir=rtl] .promo .item-promo.color-7 figure::after {
background: linear-gradient(to left, rgb(77, 78, 56) 5%, rgba(77, 78, 56, 0) 70%);
}
@media screen and (max-width: 768px) {
.promo .item-promo.color-7 figure::after {
background: linear-gradient(to right, rgb(77, 78, 56) 20%, rgba(77, 78, 56, 0) 100%);
}
html[dir=rtl] .promo .item-promo.color-7 figure::after {
background: linear-gradient(to left, rgb(77, 78, 56) 20%, rgba(77, 78, 56, 0) 100%);
}
}
.promo .item-promo.color-8 {
background-color: rgb(41, 49, 58);
}
.promo .item-promo.color-8 figure::after {
background: linear-gradient(to right, rgb(41, 49, 58) 5%, rgba(41, 49, 58, 0) 70%);
}
html[dir=rtl] .promo .item-promo.color-8 figure::after {
background: linear-gradient(to left, rgb(41, 49, 58) 5%, rgba(41, 49, 58, 0) 70%);
}
@media screen and (max-width: 768px) {
.promo .item-promo.color-8 figure::after {
background: linear-gradient(to right, rgb(41, 49, 58) 20%, rgba(41, 49, 58, 0) 100%);
}
html[dir=rtl] .promo .item-promo.color-8 figure::after {
background: linear-gradient(to left, rgb(41, 49, 58) 20%, rgba(41, 49, 58, 0) 100%);
}
}
.promo .item-promo .inner {
position: absolute;
z-index: 1;
color: #FFFFFF;
padding: 32px;
box-sizing: border-box;
max-width: 560px;
display: flex;
flex-direction: column;
height: 100%;
}
.promo .item-promo .inner a {
color: #FFFFFF;
}
.promo .item-promo .inner .item-body {
flex: 1;
}
.promo .item-promo .inner .item-body h3 {
font-family: "Merriweather", sans-serif;
}
.promo .item-promo .inner .item-body h3 {
font-size: 34px;
}
.promo .item-promo .inner .item-body h3 {
line-height: 1.1em;
}
.promo .item-promo .inner .item-body h3 {
font-weight: 600;
}
.promo .item-promo .inner .item-body h3:dir(rtl) {
font-family: "Kufam", sans-serif;
font-weight: 500;
}
@media screen and (min-width: 1025px) {
.promo .item-promo .inner .item-body h3 {
font-family: "Merriweather", sans-serif;
font-size: 40px;
line-height: 1.1em;
font-weight: 600;
}
.promo .item-promo .inner .item-body h3:dir(rtl) {
font-family: "Kufam", sans-serif;
font-weight: 500;
}
}
.promo .item-promo .inner .item-body p {
font-family: "Merriweather", sans-serif;
}
.promo .item-promo .inner .item-body p {
font-size: 16px;
}
.promo .item-promo .inner .item-body p {
line-height: 1.8em;
}
.promo .item-promo .inner .item-body p {
font-weight: 300;
}
.promo .item-promo .inner .item-body p:dir(rtl) {
font-family: "Readex Pro", serif;
line-height: 1.6em;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
.promo .item-promo .inner .item-body p {
font-family: "Merriweather", sans-serif;
font-size: 16px;
line-height: 1.8em;
font-weight: 300;
}
.promo .item-promo .inner .item-body p:dir(rtl) {
font-family: "Readex Pro", serif;
line-height: 2em;
font-weight: 300;
}
}
.promo .item-promo .inner .item-footer ul, .promo .item-promo .inner .item-footer li {
list-style: none;
padding: 0;
margin: 4px 0;
opacity: 0.9;
}
.promo .item-promo .inner .item-footer ul, .promo .item-promo .inner .item-footer li {
font-family: "DM Sans", sans-serif;
}
.promo .item-promo .inner .item-footer ul, .promo .item-promo .inner .item-footer li {
font-size: 13px;
}
.promo .item-promo .inner .item-footer ul, .promo .item-promo .inner .item-footer li {
line-height: 1.3em;
}
.promo .item-promo .inner .item-footer ul, .promo .item-promo .inner .item-footer li {
font-weight: 300;
}
.promo .item-promo .inner .item-footer ul:dir(rtl), .promo .item-promo .inner .item-footer li:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
.promo .item-promo .inner .item-footer ul, .promo .item-promo .inner .item-footer li {
font-family: "DM Sans", sans-serif;
font-size: 14px;
line-height: 1.3em;
font-weight: 300;
}
.promo .item-promo .inner .item-footer ul:dir(rtl), .promo .item-promo .inner .item-footer li:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
}
.promo .item-promo .bookmark-holder {
z-index: 1;
position: absolute;
inset-inline-end: 32px;
bottom: 32px;
}
.promo .item-promo .bookmark-holder svg {
fill: #FFFFFF;
}
.promo .promo-video-icon {
flex-direction: column;
position: relative;
}
.promo .promo-video-icon .left::before {
display: block;
z-index: 1;
content: "";
width: 54px;
height: 54px;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 27px;
position: absolute;
top: 50%;
left: 42%;
transform: translate(-50%, -50%);
}
.promo .promo-video-icon .left::after {
display: block;
z-index: 1;
content: "";
width: 0;
height: 0;
position: absolute;
top: 50%;
left: calc(42% + 6px);
transform: translate(-50%, -50%);
border: 10px solid transparent;
border-left: 16px solid rgba(255, 255, 255, 0.8);
}
@media screen and (max-width: 1400px) {
.splide__arrows.splide__arrows--ltr {
display: none;
} html[dir=rtl] .splide__arrows.splide__arrows--rtl {
display: none;
}
}
.item {
display: flex;
}
.item .left {
position: relative;
}
.item .left img {
max-width: 100%;
height: auto;
}
.item .left span {
position: absolute;
inset-inline-start: 8px;
top: 8px;
background-color: #FFFFFF;
padding: 2px 8px;
border-radius: 2px;
color: #252525;
}
.item .left span {
font-family: "DM Sans", sans-serif;
}
.item .left span {
font-size: 13px;
}
.item .left span {
line-height: 1.3em;
}
.item .left span {
font-weight: 300;
}
.item .left span:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
.item .left span {
font-family: "DM Sans", sans-serif;
font-size: 14px;
line-height: 1.3em;
font-weight: 300;
}
.item .left span:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
}
.item .right {
flex: 1;
display: flex;
flex-direction: column;
}
.item .right .item-body {
flex-grow: 1;
}
.item .right .item-body p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.item .right .item-footer ul {
list-style: none;
padding: 8px 0 12px 0;
margin: 0;
opacity: 0.6;
}
.item .right .item-footer ul {
font-family: "DM Sans", sans-serif;
}
.item .right .item-footer ul {
font-size: 13px;
}
.item .right .item-footer ul {
line-height: 1.3em;
}
.item .right .item-footer ul {
font-weight: 300;
}
.item .right .item-footer ul:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
.item .right .item-footer ul {
font-family: "DM Sans", sans-serif;
font-size: 14px;
line-height: 1.3em;
font-weight: 300;
}
.item .right .item-footer ul:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
}
.item .right .item-footer ul li {
list-style: none;
padding: 0;
margin: 0;
margin-inline-end: 16px;
display: inline-block;
vertical-align: middle;
}
.item .right .item-footer ul li.zero {
font-size: 0;
margin-inline-end: 4px;
opacity: 1;
}
.item .right .item-footer ul li, .item .right .item-footer ul a {
font-family: "DM Sans", sans-serif;
}
.item .right .item-footer ul li, .item .right .item-footer ul a {
font-size: 13px;
}
.item .right .item-footer ul li, .item .right .item-footer ul a {
line-height: 1.3em;
}
.item .right .item-footer ul li, .item .right .item-footer ul a {
font-weight: 300;
}
.item .right .item-footer ul li:dir(rtl), .item .right .item-footer ul a:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
.item .right .item-footer ul li, .item .right .item-footer ul a {
font-family: "DM Sans", sans-serif;
font-size: 14px;
line-height: 1.3em;
font-weight: 300;
}
.item .right .item-footer ul li:dir(rtl), .item .right .item-footer ul a:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
}
.item-article {
border-top: 1px solid #D1D1D1;
padding: 20px 0;
}
.item-article:first-of-type {
border-top: none;
}
.item-article .left {
width: 30%;
max-width: 260px;
margin-inline-end: 24px;
}
.item-article .right .item-body p {
-webkit-line-clamp: 2;
max-width: 740px;
}
.item-topic {
flex-direction: column;
}
.item-topic .right {
flex-direction: column-reverse;
}
.item-topic .right .item-body p {
-webkit-line-clamp: 5;
}
.item-topic .right .item-footer {
border-bottom: 1px solid #D1D1D1;
margin-bottom: 16px;
}
.item-topic .right .item-footer ul li:last-child {
margin-inline-end: 0;
flex-grow: 1;
text-align: right;
}
.item-book .left {
max-width: 100px;
margin-inline-end: 24px;
}
.item-video {
flex-direction: column;
position: relative;
}
.item-video .left::before {
display: block;
content: "";
width: 54px;
height: 54px;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 27px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.item-video .left::after {
display: block;
content: "";
width: 0;
height: 0;
position: absolute;
top: 50%;
left: calc(50% + 6px);
transform: translate(-50%, -50%);
border: 10px solid transparent;
border-left: 16px solid rgba(255, 255, 255, 0.8);
}
.item-video:hover .left::before {
background-color: rgba(0, 0, 0, 0.5);
}
.item-video:hover .left:after {
border-left: 16px solid rgba(255, 255, 255, 0.9);
}
.item-video .right {
flex-direction: column-reverse;
}
.item-video .right .item-footer {
border-bottom: 1px solid #D1D1D1;
}
.item-video .right .item-body {
margin-top: 15px;
}
.item-video .right .item-body h3 {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2;
height: 48px;
}
.item-video .right .item-body .excerpt {
display: none;
}
.item-video .right .item-body .terms {
margin-top: 20px;
padding-inline-end: 28px;
}
.item-video .right .item-body .terms {
font-family: "DM Sans", sans-serif;
}
.item-video .right .item-body .terms {
font-size: 13px;
}
.item-video .right .item-body .terms {
line-height: 1.3em;
}
.item-video .right .item-body .terms {
font-weight: 300;
}
.item-video .right .item-body .terms:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
.item-video .right .item-body .terms {
font-family: "DM Sans", sans-serif;
font-size: 14px;
line-height: 1.3em;
font-weight: 300;
}
.item-video .right .item-body .terms:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
}
.item-video .right .item-body .terms a {
color: #8C8C8C;
}
.item-video .right .item-body .terms div {
float: right;
}
.item-video .bookmark-holder {
position: absolute;
bottom: 0;
inset-inline-end: 0;
font-size: 0;
}
.post > .left {
margin: 0 auto;
}
.post > .left img {
width: 100%;
max-width: 100%;
height: auto;
}
.post > .right {
margin: 0 auto;
}
.post > .right .post-head {
display: flex;
flex-direction: column-reverse;
}
.post > .right .post-head h1 {
margin: 40px auto 10px;
max-width: 740px;
width: 100%;
}
.post > .right .post-head .post-meta {
border-bottom: 1px solid #D1D1D1;
padding: 16px 0;
}
.post > .right .post-head .post-meta ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
color: #5D5D5D;
min-height: 24px;
}
.post > .right .post-head .post-meta ul {
font-family: "DM Sans", sans-serif;
}
.post > .right .post-head .post-meta ul {
font-size: 13px;
}
.post > .right .post-head .post-meta ul {
line-height: 1.3em;
}
.post > .right .post-head .post-meta ul {
font-weight: 300;
}
.post > .right .post-head .post-meta ul:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
.post > .right .post-head .post-meta ul {
font-family: "DM Sans", sans-serif;
font-size: 14px;
line-height: 1.3em;
font-weight: 300;
}
.post > .right .post-head .post-meta ul:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
}
.post > .right .post-head .post-meta ul li {
margin-inline-end: 20px;
line-height: 24px;
}
.post > .right .post-head .post-meta ul li.extend {
flex: 1;
}
.post > .right .post-body {
margin: 0 auto;
max-width: 740px;
line-height: 1.8em;
}
.post > .right .post-body p {
padding: 10px 0;
}
.post > .right .post-body p {
font-family: "Merriweather", sans-serif;
}
.post > .right .post-body p {
font-size: 16px;
}
.post > .right .post-body p {
line-height: 1.8em;
}
.post > .right .post-body p {
font-weight: 300;
}
.post > .right .post-body p:dir(rtl) {
font-family: "Readex Pro", serif;
line-height: 2em;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
.post > .right .post-body p {
font-family: "Merriweather", sans-serif;
font-size: 17px;
line-height: 1.8em;
font-weight: 300;
}
.post > .right .post-body p:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 17px;
line-height: 2em;
font-weight: 300;
}
}
.post > .right .post-foot {
margin: 40px auto;
max-width: 740px;
}
.post > .right .post-foot {
font-family: "DM Sans", sans-serif;
}
.post > .right .post-foot {
font-size: 15px;
}
.post > .right .post-foot {
line-height: 1.3em;
}
.post > .right .post-foot {
font-weight: 400;
}
.post > .right .post-foot:dir(rtl) {
font-family: "Readex Pro", serif;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
.post > .right .post-foot {
font-family: "DM Sans", sans-serif;
font-size: 16px;
line-height: 1.3em;
font-weight: 400;
}
.post > .right .post-foot:dir(rtl) {
font-family: "Readex Pro", serif;
font-weight: 500;
}
}
.post-article .left {
max-width: 1000px;
}
.post-article .right {
max-width: 1000px;
display: flex; }
.post-article .right .post-body {
position: relative;
}
.post-article .right .post-body h2, .post-article .right .post-body h3 {
padding-top: 24px;
}
.post-article .right .inside {
flex: 1;
}
.post-article .right .wp-block-rank-math-toc-block { }
.post-article .right .wp-block-rank-math-toc-block nav {
position: sticky;
top: 130px;
}
.post-article .right .wp-block-rank-math-toc-block nav ul, .post-article .right .wp-block-rank-math-toc-block nav li {
list-style: none;
padding: 8px;
line-height: normal;
position: relative;   }
.post-article .right .wp-block-rank-math-toc-block nav ul li, .post-article .right .wp-block-rank-math-toc-block nav li li {   }
.post-article .right .wp-block-rank-math-toc-block nav ul li::before, .post-article .right .wp-block-rank-math-toc-block nav li li::before {
content: "";
position: absolute;
left: -10px; top: 0;
bottom: 0;
width: 1px; background-color: #D1D1D1; transition: background-color 0.3s ease; }
.post-article .right .wp-block-rank-math-toc-block nav ul li:hover::before, .post-article .right .wp-block-rank-math-toc-block nav ul li.active::before, .post-article .right .wp-block-rank-math-toc-block nav li li:hover::before, .post-article .right .wp-block-rank-math-toc-block nav li li.active::before {
background-color: #007bee; }
.post-article .right .wp-block-rank-math-toc-block nav ul li:hover a, .post-article .right .wp-block-rank-math-toc-block nav ul li.active a, .post-article .right .wp-block-rank-math-toc-block nav li li:hover a, .post-article .right .wp-block-rank-math-toc-block nav li li.active a {
color: #007bee; }
.post-article .right .wp-block-rank-math-toc-block nav ul a, .post-article .right .wp-block-rank-math-toc-block nav li a {
color: inherit;
text-decoration: none;
display: block;
transition: color 0.3s ease; }
@media screen and (max-width: 768px) {
.post-article .right .wp-block-rank-math-toc-block nav {
background-color: #FFFFFF;
}
}
.post-article .right .custom-toc-wrapper h2 {
margin: 0 15px 0 0;
}
.post-article .right .custom-toc-wrapper h2 {
font-family: "Merriweather", sans-serif;
}
.post-article .right .custom-toc-wrapper h2 {
font-size: 20px;
}
.post-article .right .custom-toc-wrapper h2 {
line-height: 1.2em;
}
.post-article .right .custom-toc-wrapper h2 {
font-weight: 600;
}
.post-article .right .custom-toc-wrapper h2:dir(rtl) {
font-family: "Readex Pro", serif;
font-weight: 500;
}
@media screen and (min-width: 1025px) {
.post-article .right .custom-toc-wrapper h2 {
font-family: "Merriweather", sans-serif;
font-size: 22px;
line-height: 1.2em;
font-weight: 600;
}
.post-article .right .custom-toc-wrapper h2:dir(rtl) {
font-family: "Readex Pro", serif;
font-weight: 500;
}
}
.post-article .right .custom-toc-wrapper nav {
position: sticky;
top: 130px;
}
.post-article .right .custom-toc-wrapper nav ul, .post-article .right .custom-toc-wrapper nav li {
list-style: none;
padding: 8px;
line-height: normal;
position: relative;  }
.post-article .right .custom-toc-wrapper nav ul li, .post-article .right .custom-toc-wrapper nav li li {
padding-left: 20px; position: relative;     }
.post-article .right .custom-toc-wrapper nav ul li::before, .post-article .right .custom-toc-wrapper nav li li::before {
content: "";
position: absolute;
left: -10px; top: 0;
bottom: 0;
width: 1px; background-color: #D1D1D1; transition: background-color 0.3s ease; }
.post-article .right .custom-toc-wrapper nav ul li:hover::before, .post-article .right .custom-toc-wrapper nav ul li.active::before, .post-article .right .custom-toc-wrapper nav li li:hover::before, .post-article .right .custom-toc-wrapper nav li li.active::before {
background-color: #007bee; }
.post-article .right .custom-toc-wrapper nav ul li:hover a, .post-article .right .custom-toc-wrapper nav ul li.active a, .post-article .right .custom-toc-wrapper nav li li:hover a, .post-article .right .custom-toc-wrapper nav li li.active a {
color: #007bee; }
.post-article .right .custom-toc-wrapper nav ul li a, .post-article .right .custom-toc-wrapper nav li li a {
color: inherit;
text-decoration: none;
display: block;
transition: color 0.3s ease; }
.post-article .right .custom-toc-wrapper nav ul ul a, .post-article .right .custom-toc-wrapper nav li ul a { }
.post-article .right .custom-toc-wrapper nav ul ul a, .post-article .right .custom-toc-wrapper nav li ul a {
font-family: "DM Sans", sans-serif;
}
.post-article .right .custom-toc-wrapper nav ul ul a, .post-article .right .custom-toc-wrapper nav li ul a {
font-size: 15px;
}
.post-article .right .custom-toc-wrapper nav ul ul a, .post-article .right .custom-toc-wrapper nav li ul a {
line-height: 1.3em;
}
.post-article .right .custom-toc-wrapper nav ul ul a, .post-article .right .custom-toc-wrapper nav li ul a {
font-weight: 400;
}
.post-article .right .custom-toc-wrapper nav ul ul a:dir(rtl), .post-article .right .custom-toc-wrapper nav li ul a:dir(rtl) {
font-family: "Readex Pro", serif;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
.post-article .right .custom-toc-wrapper nav ul ul a, .post-article .right .custom-toc-wrapper nav li ul a {
font-family: "DM Sans", sans-serif;
font-size: 16px;
line-height: 1.3em;
font-weight: 400;
}
.post-article .right .custom-toc-wrapper nav ul ul a:dir(rtl), .post-article .right .custom-toc-wrapper nav li ul a:dir(rtl) {
font-family: "Readex Pro", serif;
font-weight: 500;
}
}
.post-article .right .custom-toc-wrapper nav ul ul ul a, .post-article .right .custom-toc-wrapper nav li ul ul a { }
.post-article .right .custom-toc-wrapper nav ul ul ul a, .post-article .right .custom-toc-wrapper nav li ul ul a {
font-family: "DM Sans", sans-serif;
}
.post-article .right .custom-toc-wrapper nav ul ul ul a, .post-article .right .custom-toc-wrapper nav li ul ul a {
font-size: 13px;
}
.post-article .right .custom-toc-wrapper nav ul ul ul a, .post-article .right .custom-toc-wrapper nav li ul ul a {
line-height: 1.3em;
}
.post-article .right .custom-toc-wrapper nav ul ul ul a, .post-article .right .custom-toc-wrapper nav li ul ul a {
font-weight: 300;
}
.post-article .right .custom-toc-wrapper nav ul ul ul a:dir(rtl), .post-article .right .custom-toc-wrapper nav li ul ul a:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
.post-article .right .custom-toc-wrapper nav ul ul ul a, .post-article .right .custom-toc-wrapper nav li ul ul a {
font-family: "DM Sans", sans-serif;
font-size: 14px;
line-height: 1.3em;
font-weight: 300;
}
.post-article .right .custom-toc-wrapper nav ul ul ul a:dir(rtl), .post-article .right .custom-toc-wrapper nav li ul ul a:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
}
@media screen and (max-width: 768px) {
.post-article .right .custom-toc-wrapper nav {
background-color: #FFFFFF;
}
}
.post-article .right .custom-toc-wrapper p a {
color: LinkText;
}
.post-article .right .custom-toc-wrapper nav a {
color: inherit;
}
@media screen and (max-width: 768px) {
.post-article .right [dir=rtl] .custom-toc-wrapper nav {
border-left: none; border-right: 1px solid #D1D1D1; }
}
.post-article .right .sidebar {
width: 0px;
background-color: red;
position: relative;
}
@media screen and (max-width: 1400px) {
.post-article .right .sidebar {
display: none;
}
}
.post-article .right .sidebar ul {
position: sticky;
top: 90px;
list-style: none;
margin: 110px 0 0 0;
padding: 0;
display: block;
width: calc((100vw - 1100px) * 0.5);
max-width: 300px;
}
.post-article .right .sidebar ul h3 {
padding-bottom: 24px;
}
.post-article .right .sidebar ul li {
padding: 0 0 8px 8px;
border-inline-start: 1px solid #D1D1D1;
}
.post-article .right .sidebar ul li.aH3 {
padding-inline-start: 16px;
}
.post-article .right .sidebar ul li.aH4 {
padding-inline-start: 24px;
}
.post-article .right .sidebar ul li.aH4 a {
font-family: "DM Sans", sans-serif;
}
.post-article .right .sidebar ul li.aH4 a {
font-size: 13px;
}
.post-article .right .sidebar ul li.aH4 a {
line-height: 1.3em;
}
.post-article .right .sidebar ul li.aH4 a {
font-weight: 300;
}
.post-article .right .sidebar ul li.aH4 a:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
.post-article .right .sidebar ul li.aH4 a {
font-family: "DM Sans", sans-serif;
font-size: 14px;
line-height: 1.3em;
font-weight: 300;
}
.post-article .right .sidebar ul li.aH4 a:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
}
.post-article .right .sidebar ul li.aH5 {
padding-inline-start: 32px;
}
.post-article .right .sidebar ul li.aH5 a {
font-family: "DM Sans", sans-serif;
}
.post-article .right .sidebar ul li.aH5 a {
font-size: 13px;
}
.post-article .right .sidebar ul li.aH5 a {
line-height: 1.3em;
}
.post-article .right .sidebar ul li.aH5 a {
font-weight: 300;
}
.post-article .right .sidebar ul li.aH5 a:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
.post-article .right .sidebar ul li.aH5 a {
font-family: "DM Sans", sans-serif;
font-size: 14px;
line-height: 1.3em;
font-weight: 300;
}
.post-article .right .sidebar ul li.aH5 a:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
}
.post-article .right .sidebar ul li.aH6 {
padding-inline-start: 40px;
}
.post-article .right .sidebar ul li.aH6 a {
font-family: "DM Sans", sans-serif;
}
.post-article .right .sidebar ul li.aH6 a {
font-size: 13px;
}
.post-article .right .sidebar ul li.aH6 a {
line-height: 1.3em;
}
.post-article .right .sidebar ul li.aH6 a {
font-weight: 300;
}
.post-article .right .sidebar ul li.aH6 a:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
.post-article .right .sidebar ul li.aH6 a {
font-family: "DM Sans", sans-serif;
font-size: 14px;
line-height: 1.3em;
font-weight: 300;
}
.post-article .right .sidebar ul li.aH6 a:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
}
.post-article .right .sidebar ul li.aH2 a {
font-family: "Merriweather", sans-serif;
}
.post-article .right .sidebar ul li.aH2 a {
font-size: 16px;
}
.post-article .right .sidebar ul li.aH2 a {
line-height: 1.8em;
}
.post-article .right .sidebar ul li.aH2 a {
font-weight: 300;
}
.post-article .right .sidebar ul li.aH2 a:dir(rtl) {
font-family: "Readex Pro", serif;
line-height: 2em;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
.post-article .right .sidebar ul li.aH2 a {
font-family: "Merriweather", sans-serif;
font-size: 17px;
line-height: 1.8em;
font-weight: 300;
}
.post-article .right .sidebar ul li.aH2 a:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 17px;
line-height: 2em;
font-weight: 300;
}
}
.post-article .right .sidebar ul li a {
font-family: "DM Sans", sans-serif;
}
.post-article .right .sidebar ul li a {
font-size: 15px;
}
.post-article .right .sidebar ul li a {
line-height: 1.3em;
}
.post-article .right .sidebar ul li a {
font-weight: 400;
}
.post-article .right .sidebar ul li a:dir(rtl) {
font-family: "Readex Pro", serif;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
.post-article .right .sidebar ul li a {
font-family: "DM Sans", sans-serif;
font-size: 16px;
line-height: 1.3em;
font-weight: 400;
}
.post-article .right .sidebar ul li a:dir(rtl) {
font-family: "Readex Pro", serif;
font-weight: 500;
}
}
.post-book {
display: flex;
max-width: 1000px;
margin: 0 auto;
}
.post-book .left {
flex: 3;
box-sizing: border-box;
padding-inline-end: 5%;
}
.post-book .right .post-head {
flex-direction: column;
}
.post-book .right .post-head h1 {
max-width: none;
margin: 0 0 20px 0;
}
.post-book .right .post-head .post-meta {
border-top: 1px solid #D1D1D1;
margin-top: 20px;
}
.post-book .right .post-body {
margin-top: 40px;
}
.post-topic {
display: flex;
}
.post-topic > .left {
flex: 3;
box-sizing: border-box;
padding-inline-end: 5%;
position: relative;
}
.post-topic > .left img {
position: sticky;
top: 120px;
}
.post-topic > .right {
flex: 7;
max-width: 1000px;
}
.post-topic > .right .post-head {
flex-direction: column;
}
.post-topic > .right .post-head h1 {
max-width: none;
margin: 0 0 20px 0;
}
.post-topic > .right .post-head .post-meta {
border-top: 1px solid #D1D1D1;
margin-top: 40px;
}
.post-topic > .right .post-head p {
font-family: "Merriweather", sans-serif;
}
.post-topic > .right .post-head p {
font-size: 18px;
}
.post-topic > .right .post-head p {
line-height: 1.8em;
}
.post-topic > .right .post-head p {
font-weight: 400;
}
.post-topic > .right .post-head p:dir(rtl) {
font-family: "Readex Pro", serif;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
.post-topic > .right .post-head p {
font-family: "Merriweather", sans-serif;
font-size: 20px;
line-height: 1.8em;
font-weight: 400;
}
.post-topic > .right .post-head p:dir(rtl) {
font-family: "Kufam", sans-serif;
font-weight: 300;
}
}
.post-topic > .right .post-body {
max-width: none;
margin-top: 20px;
}
.post-topic > .right .post-body p {
padding: 0;
}
.post-topic > .right .post-body p {
font-family: "Merriweather", sans-serif;
}
.post-topic > .right .post-body p {
font-size: 16px;
}
.post-topic > .right .post-body p {
line-height: 1.8em;
}
.post-topic > .right .post-body p {
font-weight: 300;
}
.post-topic > .right .post-body p:dir(rtl) {
font-family: "Readex Pro", serif;
line-height: 2em;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
.post-topic > .right .post-body p {
font-family: "Merriweather", sans-serif;
font-size: 17px;
line-height: 1.8em;
font-weight: 300;
}
.post-topic > .right .post-body p:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 17px;
line-height: 2em;
font-weight: 300;
}
}
.post-topic > .right .post-body .collection {
padding: 20px 0;
padding-inline-start: 60px;
}
.post-topic > .right .post-body .collection > span {
position: absolute;
inset-inline-start: 0;
top: 50%;
transform: translateY(-50%);
display: block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #D1D1D1;
border-radius: 20px;
transition: all 0.4s ease;
}
.post-topic > .right .post-body .collection {
font-family: "DM Sans", sans-serif;
}
.post-topic > .right .post-body .collection {
font-size: 15px;
}
.post-topic > .right .post-body .collection {
line-height: 1.3em;
}
.post-topic > .right .post-body .collection {
font-weight: 400;
}
.post-topic > .right .post-body .collection:dir(rtl) {
font-family: "Readex Pro", serif;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
.post-topic > .right .post-body .collection {
font-family: "DM Sans", sans-serif;
font-size: 16px;
line-height: 1.3em;
font-weight: 400;
}
.post-topic > .right .post-body .collection:dir(rtl) {
font-family: "Readex Pro", serif;
font-weight: 500;
}
}
.post-topic > .right .post-body .collection:hover > span {
background-color: #5D5D5D;
color: #F8F8F8;
}
.collection {
position: relative;
padding: 20px 0 20px 0px;
border-bottom: 1px solid #D1D1D1;
}
.collection .item-body p {
max-width: 740px;
}
.collection .item-article {
padding: 0;
}
.collection .item-book {
max-width: none;
}
.collection .item-book .left {
width: 30%;
max-width: 260px;
margin-inline-end: 24px;
}
.collection .item-book .left a {
display: block;
max-width: 100px;
margin: 0 auto;
}
.collection .item-topic {
flex-direction: row;
}
.collection .item-topic .left {
width: 30%;
max-width: 260px;
margin-inline-end: 24px;
}
.collection .item-topic .right {
flex-direction: column;
}
.collection .item-topic .right .item-footer {
border: none;
margin: 0;
}
.collection .item-video {
max-width: none;
flex-direction: row;
}
.collection .item-video .left {
width: 30%;
max-width: 260px;
margin-inline-end: 24px;
}
.collection .item-video .right {
flex-direction: column;
}
.collection .item-video .right .item-body {
margin-top: 0;
}
.collection .item-video .right .item-footer {
border: none;
}
.post-video .left {
max-width: 1000px;
}
.post-video .left .embed-video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.post-video .left .embed-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.post-video .right {
max-width: 1000px;
}
.post-video .right .timestamps {
list-style: none;
padding: 0;
border-bottom: 1px solid #D1D1D1;
}
.post-video .right .timestamps li {
border-top: 1px solid #D1D1D1;
padding: 8px 0;
}
.post-video .right .timestamps li a {
display: grid;
grid-template-columns: 40px 80px 1fr;
align-items: top;
}
.post-video .right .timestamps li a * {
pointer-events: none;
}
.post-video .right .timestamps li a small {
line-height: 32px;
}
.post-video .right .timestamps li a p {
padding: 0;
margin: 0;
}
.page-head {
border-bottom: 1px solid #D1D1D1;
padding: 40px 0 40px 0;
}
.list-col2 {
display: grid;
grid-template-columns: 280px 1fr;
column-gap: 30px;
}
.list .list-left {
margin-top: 60px;
}
.list .list-left h3 {
margin-bottom: 20px;
}
.list .list-left .cloud {
display: flex;
flex-direction: column;
}
.list .list-left .cloud a {
margin-bottom: 4px;
}
.list .list-left .cloud a {
font-family: "Merriweather", sans-serif;
}
.list .list-left .cloud a {
font-size: 16px;
}
.list .list-left .cloud a {
line-height: 1.8em;
}
.list .list-left .cloud a {
font-weight: 300;
}
.list .list-left .cloud a:dir(rtl) {
font-family: "Readex Pro", serif;
line-height: 2em;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
.list .list-left .cloud a {
font-family: "Merriweather", sans-serif;
font-size: 17px;
line-height: 1.8em;
font-weight: 300;
}
.list .list-left .cloud a:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 17px;
line-height: 2em;
font-weight: 300;
}
}
.list .list-left .category {
margin-bottom: 40px;
}
.list .list-left .category ul {
list-style: none;
padding: 0;
margin: 0;
}
.list .list-left .category ul li {
margin-bottom: 4px;
}
.list .list-left .category ul li a {
line-height: 1.4em;
}
.list .list-left .category ul li a.active {
opacity: 0.5;
}
.list .list-right {
margin-top: 40px;
}
.list.topics .list-right {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(345px, 1fr));
grid-gap: 60px 2%;
}
.list.books .list-right {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
grid-gap: 40px 5%;
}
.list.books .list-right .box {
padding-bottom: 30px;
border-bottom: 1px solid #D1D1D1;
}
.list.videos .list-right {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(345px, 1fr));
grid-gap: 40px 2%;
}
.list.videos .list-right .box {
padding-bottom: 30px;
}
section.topic .section-body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(345px, 1fr));
grid-gap: 60px 2%;
}
section.book .section-body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
grid-gap: 40px 5%;
}
section.article .section-body .box {
border-bottom: 1px solid #D1D1D1;
}
section.article .section-body .box:last-child {
border-bottom: none;
}
section.video .section-body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
grid-gap: 40px 1%;
}
.page-content {
max-width: 1000px;
margin: 0 auto;
}
.page-content img {
margin: 20px 0;
max-width: 100%;
height: auto;
}
.page-content .page-body {
max-width: 740px;
}
.page-terms .page-body {
padding: 40px 0;
column-count: 4;
column-gap: 10%;
}
.page-terms .page-body a {
display: block;
padding: 4px 0;
}
.page-terms .page-body h3 {
margin-top: 20px;
}
.page-terms .page-body h3:first-child {
margin-top: 0;
}
.aya {
border-radius: 4px;
overflow: hidden;
position: relative;
}
.aya > a {
display: block;
width: 24px;
height: 24px;
position: absolute;
left: 8px;
top: 8px;
}
.aya div {
background-color: #D1D1D1;
padding: 16px;
text-align: right;
}
.aya div {
font-family: "Lateef", serif;
}
.aya div {
font-size: 20px;
}
.aya div {
line-height: 1.8em;
}
.aya div {
font-weight: 400;
}
.aya div:dir(rtl) {
font-family: "Lateef", serif;
}
@media screen and (min-width: 1025px) {
.aya div {
font-family: "Lateef", serif;
font-size: 22px;
line-height: 1.8em;
font-weight: 400;
}
.aya div:dir(rtl) {
font-family: "Lateef", serif;
}
}
.aya ul {
background-color: #8C8C8C;
list-style: none;
padding: 8px 0;
margin: 0;
display: flex;
}
.aya ul li {
margin: 0 8px;
color: #F8F8F8;
}
.aya ul li {
font-family: "DM Sans", sans-serif;
}
.aya ul li {
font-size: 13px;
}
.aya ul li {
line-height: 1.3em;
}
.aya ul li {
font-weight: 300;
}
.aya ul li:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
.aya ul li {
font-family: "DM Sans", sans-serif;
font-size: 14px;
line-height: 1.3em;
font-weight: 300;
}
.aya ul li:dir(rtl) {
font-family: "Readex Pro", serif;
font-size: 13px;
font-weight: 300;
}
}
.aya ul li:last-child {
flex: 1;
text-align: right;
}
.navigation {
grid-column: 1/-1;
}
.navigation .nav-links > span, .navigation .nav-links a {
display: inline-block;
padding: 4px 12px;
border-radius: 4px;
}
.navigation .nav-links > span, .navigation .nav-links a {
font-family: "DM Sans", sans-serif;
}
.navigation .nav-links > span, .navigation .nav-links a {
font-size: 15px;
}
.navigation .nav-links > span, .navigation .nav-links a {
line-height: 1.3em;
}
.navigation .nav-links > span, .navigation .nav-links a {
font-weight: 400;
}
.navigation .nav-links > span:dir(rtl), .navigation .nav-links a:dir(rtl) {
font-family: "Readex Pro", serif;
font-weight: 300;
}
@media screen and (min-width: 1025px) {
.navigation .nav-links > span, .navigation .nav-links a {
font-family: "DM Sans", sans-serif;
font-size: 16px;
line-height: 1.3em;
font-weight: 400;
}
.navigation .nav-links > span:dir(rtl), .navigation .nav-links a:dir(rtl) {
font-family: "Readex Pro", serif;
font-weight: 500;
}
}
.navigation .nav-links > span {
background-color: #252525;
color: #F8F8F8;
}
.navigation .nav-links a:hover {
background-color: #D1D1D1;
text-decoration: none;
}
.rank-math-breadcrumb {
font-family: "DM Sans", sans-serif;
font-size: 12px;
line-height: 1.3em;
font-weight: 400;
padding: 24px 0;
color: #8C8C8C;
}
.rank-math-breadcrumb a {
font-family: "DM Sans", sans-serif;
font-size: 12px;
line-height: 1.3em;
font-weight: 400;
color: #000000;
}
.rank-math-breadcrumb a:hover {
text-decoration: underline;
}
.rank-math-breadcrumb .last {
font-family: "DM Sans", sans-serif;
font-size: 12px;
line-height: 1.3em;
font-weight: 400;
color: #8C8C8C;
}
.breadcrumbs {
font-family: "DM Sans", sans-serif;
font-size: 14px;
line-height: 1.3em;
font-weight: 400;
padding: 34px 0;
color: #8C8C8C;
}
.breadcrumbs a {
font-family: "DM Sans", sans-serif;
font-size: 14px;
line-height: 1.3em;
font-weight: 400;
color: #000000;
}
.breadcrumbs a:hover {
text-decoration: underline;
}
.breadcrumbs .last {
font-family: "DM Sans", sans-serif;
font-size: 14px;
line-height: 1.3em;
font-weight: 400;
color: #8C8C8C;
}
.video-thumbnail {
position: relative;
cursor: pointer;
}
.play-button-overlay {
display: block;
width: 54px;
height: 54px;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 27px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.play-button-overlay::after {
content: "";
width: 0;
height: 0;
position: absolute;
top: 50%;
left: calc(50% + 6px);
transform: translate(-50%, -50%);
border: 10px solid transparent;
border-left: 16px solid rgba(255, 255, 255, 0.8);
}
html[dir=rtl] #algolia-powered-by {
position: absolute;
top: 60px;
right: 0;
font-size: 14px;
text-align: left;
left: 0;
}
html[dir=rtl] .ais-Stats {
position: absolute;
top: 60px;
font-size: 14px;
direction: ltr;
}
html[dir=rtl] input.search-field.aa-input {
direction: rtl;
}
handwriting {
padding: 15px;
}
:root {
--vh: 1vh;
}
html.ai-chat-page {
overscroll-behavior: none;
touch-action: none;
}
body.page-template-ai-chat main {
width: 100%;
}
body.ai-chat-page {
overflow: hidden;
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
position: fixed;
width: 100%;
}
.ai-chat-wrapper {
min-height: 100vh;
min-height: calc(var(--vh, 1vh) * 100);
display: flex;
flex-direction: column;
background-color: #F8F8F8;
font-family: "DM Sans", sans-serif;
position: relative;
width: 100%;
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
overflow: hidden;
overscroll-behavior: none;
}
.ai-chat-main {
position: relative;
height: calc(100vh - 250px);
height: calc(var(--vh, 1vh) * 100 - 250px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
padding: 0 4%;
overscroll-behavior: contain;
}
body.chat-active .ai-chat-main {
height: calc(100vh - 220px);
height: calc(var(--vh, 1vh) * 100 - 220px);
}
@media (max-width: 768px) {
.ai-chat-main {
height: calc(100vh - 180px);
height: calc(var(--vh, 1vh) * 100 - 160px);
}
body.chat-active .ai-chat-main {
height: calc(100vh - 135px);
height: calc(var(--vh, 1vh) * 100 - 130px);
}
}
.ai-chat-container {
max-width: 670px;
margin: 0 auto;
display: flex;
flex-direction: column;
width: 100%;
flex: 1;
padding: 0 2rem;
padding-bottom: 1rem;
}
@media (max-width: 768px) {
.ai-chat-container {
padding: 0;
width: 100%;
}
}
.profile-image-container {
display: flex;
justify-content: center;
margin-bottom: 1.5rem;
margin-top: 2rem;
}
.profile-image {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
}
.ai-chat-welcome {
text-align: center;
margin: auto 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: auto;
padding: 2rem 5rem;
}
@media (max-width: 768px) {
.ai-chat-welcome {
padding: 0;
}
}
.ai-chat-welcome h1 {
color: #252525;
margin-bottom: 0.5rem;
line-height: 1.3;
}
.ai-chat-welcome h1 {
font-family: "Merriweather", sans-serif;
}
.ai-chat-welcome h1 {
font-size: 22px;
}
.ai-chat-welcome h1 {
line-height: 1.2em;
}
.ai-chat-welcome h1 {
font-weight: 300;
}
.ai-chat-welcome h1:dir(rtl) {
font-family: "Kufam", sans-serif;
font-weight: 500;
}
@media screen and (min-width: 1025px) {
.ai-chat-welcome h1 {
font-family: "Merriweather", sans-serif;
font-size: 28px;
line-height: 1.2em;
font-weight: 300;
}
.ai-chat-welcome h1:dir(rtl) {
font-family: "Kufam", sans-serif;
font-weight: 500;
}
}
.ai-chat-welcome p {
color: #5D5D5D;
font-size: 1rem;
line-height: 1.5;
font-family: "DM Sans", sans-serif;
}
.ai-chat-welcome.conversation-active {
display: none;
}
.ai-chat-suggestions-fixed {
left: 0;
right: 0;
z-index: 99;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.3s, visibility 0.3s;
padding: 20px 0;
}
.ai-chat-suggestions-fixed .suggestion-grid {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 0.6rem;
width: 100%;
max-width: 670px;
justify-content: flex-start;
}
.ai-chat-suggestions-fixed .suggestion-grid .suggestion-item {
background: white;
border: 1px solid #D1D1D1;
border-radius: 0.5rem;
padding: 0.6rem 0.8rem;
text-align: left;
cursor: pointer;
transition: all 0.2s;
color: #5D5D5D;
font-size: 0.875rem;
line-height: 1.5;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
width: fit-content;
display: block;
}
@media (min-width: 769px) {
.ai-chat-suggestions-fixed .suggestion-grid .suggestion-item {
height: 100%;
display: flex;
align-items: center;
}
.ai-chat-suggestions-fixed .suggestion-grid .suggestion-item:nth-child(3n+1), .ai-chat-suggestions-fixed .suggestion-grid .suggestion-item:nth-child(3n+2), .ai-chat-suggestions-fixed .suggestion-grid .suggestion-item:nth-child(3n) {
height: 100%;
}
}
@media (max-width: 768px) {
.ai-chat-suggestions-fixed .suggestion-grid .suggestion-item {
height: auto;
min-height: 0;
}
}
.ai-chat-suggestions-fixed .suggestion-grid .suggestion-item:hover {
background-color: #EEEEEE;
border-color: #b8b8b8;
}
.ai-chat-input-wrapper {
width: 100%;
background: #F8F8F8;
z-index: 101;
margin-top: auto;
padding: 8px 4%;
box-sizing: border-box;
position: fixed;
bottom: 60px;
left: 0;
}
.ai-chat-input-wrapper .ai-chat-input-container {
max-width: 670px;
margin: 0 auto;
}
@media (max-width: 768px) {
.ai-chat-input-wrapper {
bottom: 0;
}
}
.ai-chat-input-container {
display: flex;
align-items: center;
background-color: #ffffff;
border: 1px solid #D1D1D1;
border-radius: 0.75rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
max-width: 768px;
margin: 0 auto;
}
.ai-chat-textarea {
flex: 1;
border: none;
background: transparent;
outline: none;
padding: 0.75rem;
resize: none;
font-family: "DM Sans", sans-serif;
font-size: 1rem;
line-height: 1.5;
min-height: 1.5rem;
max-height: 9rem;
overflow-y: auto;
display: block;
white-space: pre-wrap;
word-wrap: break-word;
}
.ai-chat-textarea::placeholder {
color: #8C8C8C;
}
@media (min-width: 769px) {
.ai-chat-textarea:focus-visible {
outline: none;
}
}
@media (max-width: 768px) {
.ai-chat-textarea:focus {
outline: none;
}
}
.ai-chat-button {
background: none;
border: none;
padding: 0.5rem;
cursor: pointer;
color: #8C8C8C;
transition: color 0.2s;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
}
.ai-chat-button:hover {
color: #252525;
}
@media (max-width: 768px) {
.ai-chat-button {
width: 55px;
height: 55px;
}
}
.ai-chat-svg {
width: 32px;
height: 32px;
fill: currentColor;
}
@media (max-width: 768px) {
.ai-chat-svg {
width: 40px;
height: 40px;
}
}
.message-container {
width: 100%;
display: flex;
flex-direction: column;
padding-top: 20px;
margin: 0 auto;
flex: 1;
padding-bottom: 20px;
}
.message {
display: flex;
width: 100%;
margin: 0 auto;
}
.message + .message {
margin-top: 2rem;
}
@media (max-width: 768px) {
.message + .message {
margin-top: 1rem;
}
}
.user-message {
justify-content: flex-end;
}
.ai-message {
justify-content: flex-start;
flex-direction: column;
align-items: flex-start;
}
.message-content {
padding: 1rem 1.25rem;
border-radius: 0.5rem;
font-size: 1rem;
line-height: 1.6;
word-wrap: break-word;
overflow-wrap: break-word;
font-family: "DM Sans", sans-serif;
}
.ai-message .message-content {
font-family: "DM Sans", sans-serif;
color: #374151;
}
.ai-message .message-content * {
font-family: "DM Sans", sans-serif !important;
}
.ai-message .message-content p {
margin: 0 0 1rem 0;
line-height: 1.6;
color: #374151;
font-family: "DM Sans", sans-serif;
}
.ai-message .message-content p:last-child {
margin-bottom: 0;
}
.ai-message .message-content p:first-child {
margin-top: 0;
}
.ai-message .message-content strong {
font-weight: 600;
color: #1f2937;
font-family: "DM Sans", sans-serif;
}
.ai-message .message-content em {
font-style: italic;
color: #4b5563;
font-family: "DM Sans", sans-serif;
}
.ai-message .message-content .list-title {
margin-bottom: 0.5rem;
font-family: "DM Sans", sans-serif;
display: block;
}
.ai-message .message-content .list-title strong {
font-weight: 600;
color: #1f2937;
font-family: "DM Sans", sans-serif;
display: block;
}
.ai-message .message-content .list-content {
margin-bottom: 0.75rem;
line-height: 1.6;
color: #374151;
font-family: "DM Sans", sans-serif;
display: block;
margin-top: 0;
}
.ai-message .message-content .list-content:last-child {
margin-bottom: 0;
}
.ai-message .message-content ol {
margin: 1.25rem 0;
padding-left: 2rem;
font-family: "DM Sans", sans-serif;
}
.ai-message .message-content ol > li {
margin-bottom: 1.25rem;
line-height: 1.6;
color: #374151;
font-family: "DM Sans", sans-serif;
padding-left: 0.5rem;
}
.ai-message .message-content ol > li:last-child {
margin-bottom: 0;
}
.ai-message .message-content ol > li::marker {
font-weight: 600;
color: #6b7280;
font-family: "DM Sans", sans-serif;
}
.ai-message .message-content ol > li p:not(.list-title):not(.list-content) {
margin: 0 0 0.75rem 0;
font-family: "DM Sans", sans-serif;
}
.ai-message .message-content ol > li p:not(.list-title):not(.list-content):last-child {
margin-bottom: 0;
}
.ai-message .message-content ol > li p:not(.list-title):not(.list-content) strong {
font-weight: 600;
color: #1f2937;
font-family: "DM Sans", sans-serif;
}
.ai-message .message-content ol > li ul, .ai-message .message-content ol > li ol {
margin: 0.75rem 0 0 0;
font-family: "DM Sans", sans-serif;
}
.ai-message .message-content ul {
margin: 1rem 0;
padding-left: 1.75rem;
font-family: "DM Sans", sans-serif;
}
.ai-message .message-content ul > li {
margin-bottom: 0.75rem;
line-height: 1.6;
color: #374151;
font-family: "DM Sans", sans-serif;
padding-left: 0.25rem;
}
.ai-message .message-content ul > li:last-child {
margin-bottom: 0;
}
.ai-message .message-content ul > li::marker {
font-weight: 600;
color: #6b7280;
font-family: "DM Sans", sans-serif;
}
.ai-message .message-content ul > li p:not(.list-title):not(.list-content) {
margin: 0 0 0.5rem 0;
font-family: "DM Sans", sans-serif;
}
.ai-message .message-content ul > li p:not(.list-title):not(.list-content):last-child {
margin-bottom: 0;
}
.ai-message .message-content ul > li p:not(.list-title):not(.list-content) strong {
font-weight: 600;
color: #1f2937;
font-family: "DM Sans", sans-serif;
}
.ai-message .message-content ul > li ul, .ai-message .message-content ul > li ol {
margin: 0.5rem 0 0 0;
font-family: "DM Sans", sans-serif;
}
.ai-message .message-content code {
background-color: #f3f4f6;
color: #1f2937;
padding: 0.125rem 0.375rem;
border-radius: 0.25rem;
font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
font-size: 0.875em;
font-weight: 500;
}
.ai-message .message-content pre {
background-color: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
padding: 1rem;
margin: 1rem 0;
overflow-x: auto;
}
.ai-message .message-content pre code {
background: none;
padding: 0;
border-radius: 0;
font-size: 0.875rem;
line-height: 1.5;
}
.ai-message .message-content a {
color: #2563eb;
text-decoration: underline;
text-decoration-color: #93c5fd;
text-underline-offset: 2px;
transition: all 0.2s ease;
font-family: "DM Sans", sans-serif;
}
.ai-message .message-content a:hover {
color: #1d4ed8;
text-decoration-color: #2563eb;
}
.ai-message .message-content blockquote {
border-left: 4px solid #e5e7eb;
padding-left: 1rem;
margin: 1rem 0;
color: #6b7280;
font-style: italic;
font-family: "DM Sans", sans-serif;
}
.ai-message .message-content blockquote p {
margin: 0.5rem 0;
font-family: "DM Sans", sans-serif;
}
.ai-message .message-content blockquote p:first-child {
margin-top: 0;
}
.ai-message .message-content blockquote p:last-child {
margin-bottom: 0;
}
.ai-message .message-content hr {
border: none;
border-top: 1px solid #e5e7eb;
margin: 1.5rem 0;
}
.ai-message .message-content h1, .ai-message .message-content h2, .ai-message .message-content h3, .ai-message .message-content h4, .ai-message .message-content h5, .ai-message .message-content h6 {
margin: 1.5rem 0 1rem 0;
font-weight: 600;
line-height: 1.3;
color: #1f2937;
font-family: "DM Sans", sans-serif;
}
.ai-message .message-content h1:first-child, .ai-message .message-content h2:first-child, .ai-message .message-content h3:first-child, .ai-message .message-content h4:first-child, .ai-message .message-content h5:first-child, .ai-message .message-content h6:first-child {
margin-top: 0;
}
.ai-message .message-content h1 {
font-size: 1.875rem;
}
.ai-message .message-content h2 {
font-size: 1.5rem;
}
.ai-message .message-content h3 {
font-size: 1.25rem;
}
.ai-message .message-content h4 {
font-size: 1.125rem;
}
.ai-message .message-content h5 {
font-size: 1rem;
}
.ai-message .message-content h6 {
font-size: 0.875rem;
}
.ai-message .message-content table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
font-family: "DM Sans", sans-serif;
}
.ai-message .message-content table th, .ai-message .message-content table td {
border: 1px solid #e5e7eb;
padding: 0.5rem 0.75rem;
text-align: left;
font-family: "DM Sans", sans-serif;
}
.ai-message .message-content table th {
background-color: #f9fafb;
font-weight: 600;
color: #1f2937;
}
.ai-message .message-content table td {
color: #374151;
}
.user-message .message-content {
background-color: #E2E2E2;
color: #252525;
text-align: left;
}
.ai-message .message-content {
color: #252525;
text-align: left;
}
.loader-container {
display: flex;
padding-top: 1rem;
max-width: 70%;
padding-left: 3rem;
padding-bottom: 2rem;
}
.loader, .loader:before, .loader:after {
border-radius: 100%;
width: 2.5em;
height: 2.5em;
animation-fill-mode: both;
animation: bblFadInOut 1.5s infinite ease-in-out;
}
.loader {
color: #252525;
font-size: 4px;
position: relative;
text-indent: -9999em;
transform: translateZ(0);
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
content: "";
position: absolute;
top: 0;
}
.loader:before {
left: -3.5em;
animation-delay: -0.32s;
}
.loader:after {
left: 3.5em;
}
@keyframes bblFadInOut {
0%, 80%, 100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
.ai-chat-footnote {
text-align: center;
margin-top: 0.5rem;
}
body.chat-active .ai-chat-footnote {
display: none;
}
.ai-chat-footnote p {
color: #8C8C8C;
font-size: 0.75rem;
line-height: 1.4;
font-family: "DM Sans", sans-serif;
}
.ai-chat-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #252525;
font-family: "DM Sans", sans-serif;
font-size: 16px;
padding: 1rem;
text-align: center;
z-index: 102;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 768px) {
.ai-chat-footer {
display: none;
}
}
.ai-chat-footer .inside {
max-width: 768px;
margin: 0 auto;
}
.ai-chat-footer .copyright {
color: #ffffff;
}
#welcome-section.conversation-active ~ .ai-chat-suggestions-fixed {
display: none;
}
@media (max-width: 768px) {
.ai-chat-welcome h1 {
font-size: 1.75rem;
}
.profile-image {
width: 100px;
height: 100px;
}
.ai-chat-suggestions-fixed {
bottom: 4rem;
}
}
body.keyboard-open .ai-chat-footer {
display: none;
}
body.keyboard-open .ai-chat-footnote {
display: none;
}
body.keyboard-open .ai-chat-input-wrapper {
bottom: 0;
}
* {
scrollbar-color: #ECECEC;
}
@media (min-width: 769px) {
.ai-chat-input-container[focus-within] {
border-color: #b8b8b8;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 0 0 2px rgba(0, 0, 0, 0.02);
}
.ai-chat-input-container:focus-within {
border-color: #b8b8b8;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 0 0 2px rgba(0, 0, 0, 0.02);
}
}
.sources-container {
margin-top: 1rem;
padding-top: 2rem;
width: 100%;
border-top: 1px solid #e2e2e2;
}
.source-item {
border: 1px solid #D1D1D1;
border-radius: 0.75rem;
margin-bottom: 0.5rem;
}
.source-item:last-child {
margin-bottom: 0.5rem;
}
.source-item:hover {
border-color: #b8b8b8;
}
.source-link {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.5rem 1rem;
text-decoration: none;
color: inherit;
}
.source-link:hover {
text-decoration: none;
color: inherit;
}
.source-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.source-icon svg {
width: 48px;
height: 48px;
}
.source-info {
flex: 1;
min-width: 0;
}
.source-title {
font-family: "DM Sans", sans-serif;
font-size: 0.95rem;
font-weight: 500;
color: #252525;
line-height: 1.3;
margin-bottom: 0.25rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.source-date {
font-size: 0.8rem;
color: #8C8C8C;
font-family: "DM Sans", sans-serif;
line-height: 1.2;
}
.feedback-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.feedback-container {
background: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 90%;
max-width: 500px;
margin: 1rem;
}
.feedback-container h3 {
margin-top: 0;
margin-bottom: 15px;
font-size: 18px;
color: #252525;
font-weight: 400;
font-family: "DM Sans", sans-serif;
}
.feedback-container p {
text-align: center;
margin-bottom: 20px;
}
.feedback-form {
display: flex;
flex-direction: column;
}
.feedback-textarea {
border: 1px solid #D1D1D1;
border-radius: 4px;
padding: 10px;
font-family: "DM Sans", sans-serif;
font-size: 14px;
resize: vertical;
margin-bottom: 15px;
}
.feedback-textarea:focus {
outline: none;
border-color: #ababab;
}
.feedback-buttons {
display: flex;
justify-content: flex-end;
gap: 10px;
}
@media (max-width: 768px) {
.feedback-buttons {
flex-direction: column-reverse;
gap: 8px;
}
}
.feedback-cancel {
background-color: #f1f1f1;
border: none;
border-radius: 4px;
color: #252525;
padding: 8px 16px;
cursor: pointer;
font-family: "DM Sans", sans-serif;
}
.feedback-cancel:hover {
background-color: #e5e5e5;
}
@media (max-width: 768px) {
.feedback-cancel {
width: 100%;
}
}
.feedback-submit {
background-color: #252525;
color: white;
border: none;
border-radius: 4px;
padding: 8px 16px;
cursor: pointer;
font-family: "DM Sans", sans-serif;
}
.feedback-submit:hover {
opacity: 0.9;
}
@media (max-width: 768px) {
.feedback-submit {
width: 100%;
}
}
.message-actions {
display: flex;
justify-content: flex-end;
margin-top: 8px;
opacity: 0.9;
transition: opacity 0.2s ease;
}
.message:hover .message-actions {
opacity: 1;
}
.report-button {
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 4px;
color: #252525;
cursor: pointer;
font-size: 12px;
padding: 5px 10px;
display: flex;
align-items: center;
gap: 4px;
transition: all 0.2s ease;
font-family: "DM Sans", sans-serif;
}
.report-button:hover {
background-color: #e0e0e0;
color: #252525;
}
.splide__container {
box-sizing: border-box;
position: relative;
}
.splide__list {
backface-visibility: hidden;
display: -ms-flexbox;
display: flex;
height: 100%;
margin: 0 !important;
padding: 0 !important;
}
.splide.is-initialized:not(.is-active) .splide__list {
display: block;
}
.splide__pagination {
-ms-flex-align: center;
align-items: center;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: center;
justify-content: center;
margin: 0;
pointer-events: none;
}
.splide__pagination li {
display: inline-block;
line-height: 1;
list-style-type: none;
margin: 0;
pointer-events: auto;
}
.splide:not(.is-overflow) .splide__pagination {
display: none;
}
.splide__progress__bar {
width: 0;
}
.splide {
position: relative;
visibility: hidden;
}
.splide.is-initialized, .splide.is-rendered {
visibility: visible;
}
.splide__slide {
backface-visibility: hidden;
box-sizing: border-box;
-ms-flex-negative: 0;
flex-shrink: 0;
list-style-type: none !important;
margin: 0;
position: relative;
}
.splide__slide img {
vertical-align: bottom;
}
.splide__spinner {
animation: splide-loading 1s linear infinite;
border: 2px solid #999;
border-left-color: transparent;
border-radius: 50%;
bottom: 0;
contain: strict;
display: inline-block;
height: 20px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 20px;
}
.splide__sr {
clip: rect(0 0 0 0);
border: 0;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.splide__toggle.is-active .splide__toggle__play, .splide__toggle__pause {
display: none;
}
.splide__toggle.is-active .splide__toggle__pause {
display: inline;
}
.splide__track {
overflow: hidden;
position: relative;
z-index: 0;
}
@keyframes splide-loading {
0% {
transform: rotate(0);
}
to {
transform: rotate(1turn);
}
}
.splide__track--draggable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.splide__track--fade > .splide__list > .splide__slide {
margin: 0 !important;
opacity: 0;
z-index: 0;
}
.splide__track--fade > .splide__list > .splide__slide.is-active {
opacity: 1;
z-index: 1;
}
.splide--rtl {
direction: rtl;
}
.splide__track--ttb > .splide__list {
display: block;
}
.splide__arrow {
-ms-flex-align: center;
align-items: center;
background: #ccc;
border: 0;
border-radius: 50%;
cursor: pointer;
display: -ms-flexbox;
display: flex;
height: 2em;
-ms-flex-pack: center;
justify-content: center;
opacity: 0.7;
padding: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 2em;
z-index: 1;
}
.splide__arrow svg {
fill: #000;
height: 1.2em;
width: 1.2em;
}
.splide__arrow:hover:not(:disabled) {
opacity: 0.9;
}
.splide__arrow:disabled {
opacity: 0.3;
}
.splide__arrow:focus-visible {
outline: 3px solid #0bf;
outline-offset: 3px;
}
.splide__arrow--prev {
left: 1em;
}
.splide__arrow--prev svg {
transform: scaleX(-1);
}
.splide__arrow--next {
right: 1em;
}
.splide.is-focus-in .splide__arrow:focus {
outline: 3px solid #0bf;
outline-offset: 3px;
}
.splide__pagination {
bottom: 0.5em;
left: 0;
padding: 0 1em;
position: absolute;
right: 0;
z-index: 1;
}
.splide__pagination__page {
background: #ccc;
border: 0;
border-radius: 50%;
display: inline-block;
height: 8px;
margin: 3px;
opacity: 0.7;
padding: 0;
position: relative;
transition: transform 0.2s linear;
width: 8px;
}
.splide__pagination__page.is-active {
background: #fff;
transform: scale(1.4);
z-index: 1;
}
.splide__pagination__page:hover {
cursor: pointer;
opacity: 0.9;
}
.splide__pagination__page:focus-visible {
outline: 3px solid #0bf;
outline-offset: 3px;
}
.splide.is-focus-in .splide__pagination__page:focus {
outline: 3px solid #0bf;
outline-offset: 3px;
}
.splide__progress__bar {
background: #ccc;
height: 3px;
}
.splide__slide {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.splide__slide:focus {
outline: 0;
}
@supports (outline-offset: -3px) {
.splide__slide:focus-visible {
outline: 3px solid #0bf;
outline-offset: -3px;
}
}
@media screen and (-ms-high-contrast: none) {
.splide__slide:focus-visible {
border: 3px solid #0bf;
}
}
@supports (outline-offset: -3px) {
.splide.is-focus-in .splide__slide:focus {
outline: 3px solid #0bf;
outline-offset: -3px;
}
}
@media screen and (-ms-high-contrast: none) {
.splide.is-focus-in .splide__slide:focus {
border: 3px solid #0bf;
}
.splide.is-focus-in .splide__track > .splide__list > .splide__slide:focus {
border-color: #0bf;
}
}
.splide__toggle {
cursor: pointer;
}
.splide__toggle:focus-visible {
outline: 3px solid #0bf;
outline-offset: 3px;
}
.splide.is-focus-in .splide__toggle:focus {
outline: 3px solid #0bf;
outline-offset: 3px;
}
.splide__track--nav > .splide__list > .splide__slide {
border: 3px solid transparent;
cursor: pointer;
}
.splide__track--nav > .splide__list > .splide__slide.is-active {
border: 3px solid #000;
}
.splide__arrows--rtl .splide__arrow--prev {
left: auto;
right: 1em;
}
.splide__arrows--rtl .splide__arrow--prev svg {
transform: scaleX(1);
}
.splide__arrows--rtl .splide__arrow--next {
left: 1em;
right: auto;
}
.splide__arrows--rtl .splide__arrow--next svg {
transform: scaleX(-1);
}
.splide__arrows--ttb .splide__arrow {
left: 50%;
transform: translate(-50%);
}
.splide__arrows--ttb .splide__arrow--prev {
top: 1em;
}
.splide__arrows--ttb .splide__arrow--prev svg {
transform: rotate(-90deg);
}
.splide__arrows--ttb .splide__arrow--next {
bottom: 1em;
top: auto;
}
.splide__arrows--ttb .splide__arrow--next svg {
transform: rotate(90deg);
}
.splide__pagination--ttb {
bottom: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
left: auto;
padding: 1em 0;
right: 0.5em;
top: 0;
}
@media (max-width: 1024px) {
header {
flex-direction: column;
}
header #branding {
text-align: center;
}
header #branding h1 {
line-height: 54px;
}
header #language {
display: none;
}
header #favorites {
position: absolute;
right: 16px;
top: 26px;
transform: translateY(-50%);
line-height: unset;
}
header #favorites small {
display: none;
}
header #search, header #menu {
display: none;
}
header #search input[type=search] {
margin: 0;
}
header #search .aya-form input[type=search] {
width: 100%;
}
header .menu-trigger {
display: block;
position: absolute;
left: 12px;
top: 26px;
border: none;
background: none;
padding: 8px;
font-size: 0;
transform: translateY(-50%);
}
header .menu-trigger svg {
width: 28px;
height: 28px;
}
header .menu-trigger svg.close {
display: none;
}
header #tabs {
display: block;
border-top: 1px solid #D1D1D1;
}
header #tabs ul {
list-style: none;
padding: 0;
margin: 0;
}
header #tabs ul li {
display: inline-block;
}
header #tabs ul li a {
display: block;
padding: 16px 10px;
}
header #tabs ul li.active a {
border-bottom: 4px solid #252525;
text-decoration: none;
}
header.active #tabs {
display: none;
}
header.active #branding {
border-bottom: 1px solid #D1D1D1;
}
header.active #menu {
margin: 30px 16px;
display: block;
}
header.active #menu ul {
display: block;
height: auto;
}
header.active #menu ul li {
margin-bottom: 10px;
}
header.active #menu ul li {
font-family: "Merriweather", sans-serif;
}
header.active #menu ul li {
font-size: 20px;
}
header.active #menu ul li {
line-height: 1.2em;
}
header.active #menu ul li {
font-weight: 600;
}
header.active #menu ul li:dir(rtl) {
font-family: "Readex Pro", serif;
font-weight: 500;
}  }
@media screen and (max-width: 1024px) and (min-width: 1025px) {
header.active #menu ul li {
font-family: "Merriweather", sans-serif;
font-size: 22px;
line-height: 1.2em;
font-weight: 600;
}
header.active #menu ul li:dir(rtl) {
font-family: "Readex Pro", serif;
font-weight: 500;
}
}
@media (max-width: 1024px) {
header.active #language {
display: block;
margin: 0 16px 20px;
}
header.active #search {
display: flex;
gap: 8px;
margin: 0 0 20px 0;
}
header.active #search .search-form {
margin-right: 0;
}
header.active #search .aya-form input, header.active #search .aya-form input:last-of-type {
width: 100%;
}
header.active .menu-trigger svg.close {
display: block;
}
header.active .menu-trigger svg.burger {
display: none;
}
header.searchisopen #menu {
display: none;
}
header.searchisopen #search .aya-form {
display: none;
}
header.searchisopen #branding {
border: none;
}
header.ayaisopen #menu {
display: none;
}
header.ayaisopen #search {
flex-direction: column;
}
header.ayaisopen #search .search-form {
display: none;
}
header.ayaisopen #branding {
border: none;
}
html {
margin-top: 0 !important;
}
#wpadminbar {
display: none;
}
.sura-list {
display: none;
position: static;
left: 0;
top: 0;
width: 100%;
min-height: 400px;
background-color: #FFFFFF;
padding: 0;
transform: none;
border-radius: 0;
}
.sura-list ul {
list-style: none;
margin: 30px 0 0 0;
padding: 0;
column-count: 2;
column-gap: 40px;
}
.sura-list ul {
font-family: "DM Sans", sans-serif;
}
.sura-list ul {
font-size: 15px;
}
.sura-list ul {
line-height: 1.3em;
}
.sura-list ul {
font-weight: 400;
}
.sura-list ul:dir(rtl) {
font-family: "Readex Pro", serif;
font-weight: 300;
}
}
@media screen and (max-width: 1024px) and (min-width: 1025px) {
.sura-list ul {
font-family: "DM Sans", sans-serif;
font-size: 16px;
line-height: 1.3em;
font-weight: 400;
}
.sura-list ul:dir(rtl) {
font-family: "Readex Pro", serif;
font-weight: 500;
}
}
@media (max-width: 1024px) {
.sura-list ul li.off {
display: none;
}
.sura-list:not(.filtered) ul li {
display: none;
}
.sura-list:not(.filtered) ul li.on {
display: block;
}
footer .inside {
width: 92%;
}
footer .inside .links {
padding: 40px 0;
flex-direction: column;
gap: 40px;
}
.item-article .right p {
display: none;
}
.item-book .left {
max-width: 80px;
}
section.col-two {
flex-direction: column-reverse;
}
section.col-two .section-body .box:first-child .left img {
max-width: 100%;
height: auto;
object-fit: cover;
}
section.col-two .section-body .box .left img {
max-width: 100%;
height: 90px;
object-fit: cover;
}
section.book .section-body {
grid-template-columns: 1fr;
}
section.book .section-body .right .item-footer {
display: none;
}
.item-book .right .item-footer {
display: none;
}
section.video .section-body {
display: flex;
overflow-x: scroll;
-ms-overflow-style: none; scrollbar-width: none;
position: relative;
transform-origin: 0 0;
transform: translate(-4%, 0);
width: 100vw;
padding: 0 4%;
box-sizing: border-box;
gap: 24px;
}
section.video .section-body::-webkit-scrollbar {
display: none;
}
section.video .section-body .box {
min-width: 260px;
}
html[dir=rtl] section.video .section-body {
transform: translate(4%, 0);
}
section section:first-child {
display: none;
}
section .article .section-body .box:first-child {
position: relative;
border-bottom: none;
}
section .article .section-body .box:first-child article {
flex-direction: column-reverse;
}
section .article .section-body .box:first-child article .left {
position: relative;
width: 100%;
max-width: none;
margin: 8px 0 20px;
}
section .article .section-body .box:first-child article .right h3 {
padding-inline-end: 30px;
}
section .article .section-body .box:first-child article .right h3 {
font-family: "Merriweather", sans-serif;
}
section .article .section-body .box:first-child article .right h3 {
font-size: 28px;
}
section .article .section-body .box:first-child article .right h3 {
line-height: 1.3em;
}
section .article .section-body .box:first-child article .right h3 {
font-weight: 600;
}
section .article .section-body .box:first-child article .right h3:dir(rtl) {
font-family: "Kufam", sans-serif;
line-height: 1.6em;
font-weight: 500;
}
}
@media screen and (max-width: 1024px) and (min-width: 1025px) {
section .article .section-body .box:first-child article .right h3 {
font-family: "Merriweather", sans-serif;
font-size: 40px;
line-height: 1.1em;
font-weight: 600;
}
section .article .section-body .box:first-child article .right h3:dir(rtl) {
font-family: "Kufam", sans-serif;
font-weight: 500;
}
}
@media (max-width: 1024px) {
section .article .section-body .box:first-child article .right p {
display: -webkit-box;
-webkit-line-clamp: 3;
}
section .article .section-body .box:first-child article .bookmark-holder {
position: absolute;
top: 20px;
inset-inline-end: 0;
}
section .article .section-body .box article .left {
width: 90px;
margin-right: 16px;
}
section .article .section-body .box article .right p {
display: none;
}
section .article .section-body .box article .right .item-footer .date {
display: none;
}
.post > .right .post-head h1 {
font-family: "Merriweather", sans-serif;
}
.post > .right .post-head h1 {
font-size: 28px;
}
.post > .right .post-head h1 {
line-height: 1.3em;
}
.post > .right .post-head h1 {
font-weight: 600;
}
.post > .right .post-head h1:dir(rtl) {
font-family: "Kufam", sans-serif;
line-height: 1.6em;
font-weight: 500;
}
}
@media screen and (max-width: 1024px) and (min-width: 1025px) {
.post > .right .post-head h1 {
font-family: "Merriweather", sans-serif;
font-size: 40px;
line-height: 1.1em;
font-weight: 600;
}
.post > .right .post-head h1:dir(rtl) {
font-family: "Kufam", sans-serif;
font-weight: 500;
}
}
@media (max-width: 1024px) {
.post > .right .post-head .post-meta {
position: relative;
}
.post > .right .post-head .post-meta ul {
display: block;
column-count: 1;
}
.post > .right .post-head .post-meta ul li:last-child {
position: absolute;
top: 14px;
inset-inline-end: 0;
}
.page-head {
padding: 30px 0 20px 0;
}
.section-head {
margin-top: 40px;
}
.section-foot {
padding: 30px 0 0 0;
text-align: center;
}
.list-col2 {
display: flex;
flex-direction: column-reverse;
}
.list .list-left .cloud {
display: block;
}
.list .list-left .cloud a {
display: inline-block;
margin-inline-end: 8px;
}
.list .list-right {
margin-top: 20px;
}
.list.books .list-right {
display: flex;
flex-direction: column;
grid-gap: 20px 5%;
}
.list.books .list-right .box {
padding-bottom: 20px;
}
.category .item-article {
flex-direction: column;
padding: 0 0 40px 0;
}
.category .item-article .left {
width: 100%;
max-width: none;
margin: 0;
}
.single .post-book {
flex-direction: column;
}
.single .post-book .left {
padding: 0 0 30px 0;
}
.single .post-book .left img {
max-width: 200px;
}
.single .post-topic {
flex-direction: column;
}
.single .post-topic .left {
padding: 0 0 30px 0;
}
.single .post-topic > .right .post-body .collection {
padding: 20px 0;
}
.single .post-topic > .right .post-body .collection > span {
display: none;
}
}
@media (min-width: 1025px) {
body.home main {
padding-top: 360px;
}
body.home header {
height: 360px;
padding: 292px min(50px, 3%) 11px;
box-sizing: border-box;
background: url(https://ramazandemir.com/wp-content/themes/rd/assets/images/header-bg.jpg);
background-position: center center;
background-size: cover;
border-bottom: none;
position: fixed;
}
body.home header::before, body.home header::after {
content: "";
display: block;
position: absolute;
z-index: -1;
}
body.home header::before {
background: url(https://ramazandemir.com/wp-content/themes/rd/assets/images/ramazan-demir.png);
background-size: cover;
background-position: 50% 20%;
width: 420px;
height: 360px;
margin-right: 30px;
position: absolute;
inset-inline-end: 0;
top: 0;
}
body.home header::after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 360px;
background: linear-gradient(to top, transparent 79px, rgba(255, 255, 255, 0.3) 79px, rgba(255, 255, 255, 0.3) 80px, transparent 80px), linear-gradient(to top, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
}
body.home header #branding {
position: absolute;
inset-inline-start: 40px;
top: 50%;
}
body.home header #branding svg {
width: 350px;
height: 50px;
}
body.home header #branding svg path {
fill: #F8F8F8;
}
body.home header #favorites a {
color: #FFFFFF;
}
body.home header #favorites svg {
fill: #F8F8F8;
}
body.home header #language a {
color: #FFFFFF;
}
body.home header nav {
margin-inline-start: 0;
}
body.home header nav a {
color: #FFFFFF;
}
.home section.video .section-body .box:first-of-type .item-video {
background-color: #252525;
padding: 20px;
box-sizing: border-box;
color: #F8F8F8;
height: 680px;
}
.home section.video .section-body .box:first-of-type .item-video .right .item-footer {
border-bottom-color: #5D5D5D;
}
.home section.video .section-body .box:first-of-type .item-video .right .item-footer li {
color: #8C8C8C;
}
.home section.video .section-body .box:first-of-type .item-video .right .item-footer svg {
fill: #F8F8F8;
}
.home section.video .section-body .box:first-of-type .item-video .right .item-body {
margin-top: 24px;
display: flex;
flex-direction: column;
}
.home section.video .section-body .box:first-of-type .item-video .right .item-body .excerpt {
display: block;
flex-grow: 1;
}
.home section.video .section-body .box:first-of-type .item-video .right .item-body a {
color: #F8F8F8;
}
.home section.video .section-body .box:first-of-type .item-video .right .item-body .terms div {
display: block;
}
.home section.video .section-body .box:first-of-type .item-video .bookmark-holder {
bottom: 16px;
inset-inline-end: 20px;
}
.home section.video .section-body .box:first-of-type .item-video .bookmark-holder svg {
fill: #F8F8F8;
}
.home section.video .section-body {
grid-template-columns: 36% repeat(auto-fill, minmax(16%, 1fr));
}
.home section.video .section-body .box:first-child {
grid-row: span 2;
margin-inline-end: 6%;
}
.post-article .right .wp-block-rank-math-toc-block {
position: absolute;
width: calc((100vw - 1100px) * 0.5);
height: 100%;
right: -130px;
top: 0;
transform: translateX(100%);
}
.post-article .right .custom-toc-wrapper {
position: absolute;
width: calc((100vw - 1100px) * 0.5);
height: 100%;
right: -130px;
top: 0;
transform: translateX(100%);
}
}
@media screen and (min-width: 1025px) and (max-width: 1480px) {
.post-article .right .post-head h1 {
margin: 40px 0 10px 0;
}
.post-article .right .post-body {
margin: 0;
}
.post-article .right .wp-block-rank-math-toc-block {
right: -40px;
width: 200px;
}
.post-article .right .custom-toc-wrapper {
right: -40px;
width: 200px;
}
}
@media (min-width: 1025px) {
.tags {
position: relative;
}
.tags > div {
position: sticky;
top: 80px;
left: 0;
}
}