/*-----------------------------------------------------------------------------------*/
/* FONTS
/*-----------------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@200;400;500;600&display=swap');


/*-----------------------------------------------------------------------------------*/
/* VARIABLES
/*-----------------------------------------------------------------------------------*/
:root {
    --primary: #A82454;
    --secondary: #AD4068;
    --accent: #1F5A86;
    --default: #363636;
}

/*-----------------------------------------------------------------------------------*/
/* RESET CSS 
/*-----------------------------------------------------------------------------------*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
.menu,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
input,
input[type=button],
button {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-family: 'Readex Pro', sans-serif;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    font-weight: 400;
}

body {
    position: relative;
    font-weight: 400;
    color: var(--default);
    background: #F0F4F7;
    font-size: 16px;
    direction: rtl;
}

:dir(ltr) body {
    direction: ltr;
}

html {
    height: 100%;
    width: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

a {
    outline: none;
    text-decoration: none;
    display: inline-block;
    color: var(--default);
    transition: all 0.3s ease;
    font-family: inherit;
}

select,
button,
input {
    outline: none;
}


img {
    max-width: 100%;
    height: auto;
}

h1 {
    font-size: 26px;
    font-weight: 500;
}

h2 {
    font-size: 24px;
    font-weight: 500;
}

h3 {
    font-size: 20px;
    font-weight: 500;
}

h4 {
    font-size: 18px;
    font-weight: 500;
}

p {
    line-height: 1.6;
    font-size: 16px;
}

b {
    font-weight: 600;
}

mark:not(:empty) {
    background: var(--primary);
    color: #fff;
    padding: 0 5px;
}

::selection {
    background-color: var(--default);
    color: #fff;
}

/*-----------------------------------------------------------------------------------*/
/* BASIC STRUCTURE
/*-----------------------------------------------------------------------------------*/
.container {
    position: relative;
    max-width: 1200px;
    width: calc(100% - 50px);
    box-sizing: border-box;
    margin: 0 auto;
}

section {
    padding: 60px 0;
    position: relative;
}

.btn {
    display: block;
    background-color: var(--accent);
    color: #fff;
    border-radius: 10px;
    font-size: 20px;
    text-align: center;
    text-transform: capitalize;
    padding: 10px 20px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    border: 3px solid transparent;
    transition: all 0.3s ease;
}

:dir(ltr) .btn {
    font-size: 18px;
}

.btn i {
    transition: all 0.2s ease;
}

.btn:hover i {
    transform: scale(1.5) rotate(-5deg);
}

.btn:hover {
    background-color: var(--primary);
    border-color: #fff;
}

.title {
    font-size: 25px;
    font-weight: 500;
    display: block;
    margin-bottom: 30px;
    text-transform: capitalize;
}

.title a {
    color: inherit;
    font: inherit;
}

section .title a {
    max-width: calc(100% - 50px);
    vertical-align: middle;
}

.title::before,
.sub-title::before {
    content: "";
    display: block;
    border-radius: 50%;
    background-color: var(--accent);
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-left: 25px;
}

:dir(ltr) .title::before {
    margin-left: 0;
    margin-right: 25px;
}

.sub-title {
    margin-bottom: 20px;
    font-size: 20px;
    text-transform: capitalize;
}

.sub-title::before {
    margin-left: 15px;
    width: 12px;
    height: 12px;
}

:dir(ltr) .sub-title::before {
    margin-left: 0;
    margin-right: 15px;
}

.flex-cols {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}


/*-----------------------------------------------------------------------------------*/
/* HEADER
/*-----------------------------------------------------------------------------------*/

.header-items {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.header-text {
    display: none;
    text-align: center;
    padding: 12px 0;
    box-sizing: border-box;
    background: rgb(217, 164, 82);
    background: linear-gradient(200deg, rgba(217, 164, 82, 1) 0%, rgba(246, 238, 165, 1) 50%, rgba(217, 164, 82, 1) 100%);
    color: #000;
    font-size: 14px;
}

.header-text:empty {
    display: none;
}

.toggle-menu {
    display: none;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px 30px;
    flex-shrink: 0;
}

.logo img {
    width: auto;
    height: auto;
    max-width: 130px;
}

.logo h1 {
    font-size: 20px;
    font-weight: 500;
    color: var(--primary);
    display: block;
    margin-bottom: 5px;
}

.logo p {
    color: #282828;
    font-weight: 500;
}

nav {
    position: relative;
    top: 10px;
}

.menu {
    list-style: none;
    display: flex;
    align-items: center;
}

.menu:hover a {
    opacity: 0.5;
    color: var(--default) !important;
}

.menu a {
    color: var(--default);
    font-size: 18px;
    font-weight: 500;
    padding: 0 15px;
    text-transform: capitalize;
}

:dir(ltr) .menu a {
    font-size: 16px;
}

.menu a:hover {
    opacity: 1;
    color: var(--primary) !important;
}

.menu .current a {
    color: var(--primary);
}

.top-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 20px;
}

.social-links {
    display: flex;
    gap: 10px;
    align-items: self-end;
    list-style: none;
}

.top-bar .social-links::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 22px;
    background: rgba(0, 0, 0, 0.40);
    margin-right: 10px;
    margin-bottom: 4px;
}

:dir(ltr) .top-bar .social-links::after {
    margin-right: 0;
    margin-left: 10px;
}

.social-links a {
    font-size: 28px;
    width: 30px;
    height: 30px;
    color: #838383;
}

.social-links a:hover {
    color: var(--accent);
}

.search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-icon {
    color: #fff;
    background-color: var(--secondary);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    font-size: 15px;
}

.search-bar input {
    opacity: 0;
    height: 40px;
    font-size: 14px;
    box-sizing: border-box;
    opacity: 0;
    width: 0;
    transition: all 0.3s ease;
    padding: 0;
    border-radius: 28px;
}

.search-bar:hover input {
    opacity: 1;
    width: 215px;
    padding: 5px 20px;
}

.lang {
    background-color: #375A8C;
    color: #fff;
    border-radius: 28px;
    height: 34px;
    min-width: 90px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    padding: 5px;
    box-sizing: border-box;
    text-transform: uppercase;
    border: 3px solid #375A8C;
    transition: all 0.4s linear;
}

.lang:hover {
    background-color: #fff;
    color: #375A8C;
}

/*-----------------------------------------------------------------------------------*/
/* MAIN NEWS
/*-----------------------------------------------------------------------------------*/
.item {
    box-sizing: border-box;
    display: block;
    height: 100%;
    transition: all 0.5s ease;
    position: relative;
}

.item-image {
    background-position: center;
    background-size: cover;
    display: block;
    position: relative;
    border-radius: 15px;
    height: 100%;
    background-color: #f0f4f7;
}

.item-date {
    color: #FFF;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    border-radius: 5px;
    background: var(--accent);
    padding: 3px 5px;
    height: 30px;
    line-height: 25px;
    min-width: 64px;
    box-sizing: border-box;
    width: fit-content;
    margin-bottom: 15px;
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

.item-date:empty {
    display: none !important;
}

.item:hover .item-date {
    background-color: var(--primary);

}

.item-title {
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
}

.accordion {
    padding-top: 30px;
}

.accordion .container {
    display: flex;
    gap: 15px;
}

.accordion .item {
    width: 15.5%;
    height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px 20px 30px 20px;
    color: #fff;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.5s ease;
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(20px);
}

:dir(ltr) .accordion .item {
    transform: translateX(-20px);
}

.accordion .item:last-child {
    margin-right: auto;
}

:dir(ltr) .accordion .item:last-child {
    margin-right: unset;
    margin-left: auto;
}

.accordion .item.animate {
    opacity: 1;
    transform: translateY(0);
}

.accordion .item-title {
    opacity: 0;
    font-size: 30px;
    line-height: normal;
    transform: translateY(50px);
    -webkit-line-clamp: 3;
    line-clamp: 3;
    min-height: 115px;
}

.accordion .item.active .item-title {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s 0.3s ease;
}

.accordion .item-subtitle {
    font-size: 14px;
    color: #fff;
    position: absolute;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
}

.accordion .item.active .item-subtitle {
    display: none;
}

.accordion .item.active {
    width: 50%;
}

.accordion .item.active .item-date {
    margin-right: 0;
}

.accordion .item-date {
    background: var(--primary);
}

.accordion .item-image::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: linear-gradient(0deg, var(--accent) 0%, rgba(196, 196, 196, 0.00) 98.21%);
    border-radius: inherit;
}

.accordion .item-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: inherit;
    background-position: left center;
    transition: all 0.5s ease;
}

.accordion .item.active .item-image {
    background-position: center;
}

/*-----------------------------------------------------------------------------------*/
/* STATISTICS
/*-----------------------------------------------------------------------------------*/
.statistics .container {
    display: flex;
    justify-content: space-between;
    column-gap: 20px;
    flex-wrap: wrap;
}

.statistics .container>p {
    font-size: 14px;
    position: relative;
    top: 15px;
    text-align: center;
    display: block;
    margin: 0 auto;
}

.statistics .btn {
    height: 63px;
    box-sizing: border-box;
    font-size: 16px;
}

.statistics .fa-whatsapp {
    font-size: 22px;
}

.gradient-bg {
    background: linear-gradient(270deg, var(--accent) 6.11%, var(--secondary) 94.14%);
    color: #fff;
    padding: 50px 0;
}

:dir(ltr) .gradient-bg {
    background: linear-gradient(270deg, var(--secondary) 6.11%, var(--accent) 94.14%);
}

.info-list {
    list-style: none;
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.info-list li,
.info-list li a {
    display: flex;
    gap: 10px;
    align-items: center;
}

.info-list li a {
    border-radius: 10px;
    box-sizing: border-box;
    padding: 10px;
    color: #fff;
    transition: all 0.5s ease;
}

.info-list li a.N {
    background-color: var(--accent);
}

.info-list li a:hover {
    background: rgba(255, 255, 255, 0.15);
}

.info-list .number {
    font-size: 50px;
    font-weight: 200;
    min-width: 110px;
    text-align: center;
}

.info-list p {
    font-weight: 500;
    max-width: 150px;
    color: #fff;
    text-transform: capitalize;
}

.info-list img {
    max-width: 68px;
    max-height: 68px;
    display: block;
    width: auto;
    height: auto;
}

.statistics .info-list p {
    max-width: 90px;
}

.statistics .info-list li a {
    gap: 0;
    text-align: unset;
}

/*-----------------------------------------------------------------------------------*/
/* NEWS
/*-----------------------------------------------------------------------------------*/
.news .item {
    background-color: #fff;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    padding-bottom: 15px;

}

.news .item:hover .item-image {
    transform: scale(0.9) translateY(5px);
}

.news .item-image {
    height: 180px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
    border-radius: inherit;
    transition: all 0.3s ease;
}

.news .item-title {
    padding: 15px 15px 0 15px;
    box-sizing: border-box;
}

.news .item-date {
    position: absolute;
    bottom: 20px;
    z-index: 10;
    right: 15px;
    margin-bottom: 0;
}

:dir(ltr) .news .item-date {
    right: unset;
    left: 15px;
}

.owl-stage-outer {
    padding-bottom: 20px;
}

.owl-dots {
    position: absolute;
    top: -65px;
    left: 0;
}

:dir(ltr) .owl-dots {
    left: unset;
    right: 0;
}

.owl-dot {
    width: 24px;
    height: 10px;
    border-radius: 10px;
    background-color: #9BBBD2;
    margin: 0 5px;
    transition: all 0.3s ease;
}

.owl-dot.active {
    width: 60px;
    background-color: var(--primary) !important;
}

.owl-dot:hover {
    background-color: var(--primary) !important;
    opacity: 0.5;
}

/*-----------------------------------------------------------------------------------*/
/* MEDIA
/*-----------------------------------------------------------------------------------*/
section.media {
    color: #fff;
    padding: 40px 0;
}

section.media::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 70%;
    background-color: var(--accent);
}

.media .title {
    color: inherit;
}

.media .title::before {
    background-color: rgba(255, 255, 255, 0.60);
}

section.media .item {
    width: 28%;
    opacity: 0;
    transform: translateY(30px);
}

.media .item iframe {
    display: none;
}

.media .item.animate {
    opacity: 1;
    transform: translateY(0);
}

.media .item-title {
    font-size: 18px;
    margin-top: 15px;
}

.media .item-image {
    height: 220px;
}

.media .item-date,
.media .item-views {
    display: none;
}

.media-icon {
    position: absolute;
}

.media-icon.no-count {
    display: none;
}

.media-icon.video {
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    box-sizing: border-box;
}

.media-icon i {
    border: 4px solid var(--primary);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.media-icon.video i {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    margin: 0 auto;
    font-size: 32px;
}

.media-icon.video span {
    display: none;
}

.media-icon span {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.media-icon.video i:before {
    content: "\f105";
    position: relative;
    right: 2px;
}

:dir(ltr) .media-icon.video i:before {
    content: "\f105";
    right: unset;
    left: 2px;
}

.media-icon.images {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    color: #fff;
    gap: 10px;
    font-size: 18px;
    align-items: center;
}

:dir(ltr) .media-icon.images {
    right: unset;
    left: 20px;
}

.media-icon.images i {
    border-radius: 8px;
    width: 48px;
    height: 48px;
    font-size: 26px;
    border-width: 3px;
}

.media-icon i {
    background-color: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media .item:hover i {
    background-color: rgba(0, 0, 0, 0.50);
    transform: scale(1.1);
}

/*-----------------------------------------------------------------------------------*/
/* Syndicate Statement
/*-----------------------------------------------------------------------------------*/
.statement .container {
    display: flex;
    gap: 30px 120px;
    align-items: center;
}

.statement .quote {
    width: 50%;
    background-position: top left;
    background-size: contain;
    background-repeat: no-repeat;
    transition: all 1s ease;
}

:dir(ltr) .statement .quote {
    background-position: top right;
}

blockquote {
    padding: 40px 0;
    width: 85%;
}

blockquote .text {
    position: relative;
    padding: 0 40px;
}

blockquote p {
    opacity: 0;
    transition: all 0.5s 0.8s ease;
}

blockquote .text::before,
blockquote .text::after {
    position: absolute;
    font-size: 70px;
    color: var(--primary);
    height: 60px;
    top: 50%;
    left: 50%;
    transition: left 0.5s 0.3s ease, top 0.4s 0.8s ease, transform 0.4s 0.8s ease;
}

blockquote .text::after {
    content: "\201c";
    bottom: -80px;
    left: 0;
    left: 50%;
    transform: translateY(-50%) translateX(-30px);
}

blockquote .text::before {
    content: "\201d";
    transform: translateY(-50%) translateX(30px);
}

.quote.animate blockquote .text::after {
    left: 0;
    transform: translateY(30px) translateX(-30px);
}

.quote.animate blockquote .text::before {
    left: 90%;
    top: 0;
}

:dir(ltr) .quote.animate blockquote .text::after {
    bottom: unset;
    top: 0;
    transform: translateY(-50%) translateX(-30px);
}

:dir(ltr) .quote.animate blockquote .text::before {
    bottom: 0;
    top: unset;
    transform: translateY(30px) translateX(30px);
}

.quote.animate p,
.quote.animate .speaker {
    opacity: 1;
    transform: none;
}

.speaker {
    color: var(--accent);
    font-size: 20px;
    font-weight: 500;
    display: block;
    margin-top: 20px;
    margin-right: 40px;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.5s 1.2s ease;
}

:dir(ltr) .speaker {
    margin-right: 0;
    margin-left: 40px;
    transform: translateX(-10px);
}

.block-links {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 40px;
    list-style: none;
    width: 35%;
}

.block-links li {
    width: 43%;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease;
}

.block-links li.animate {
    opacity: 1;
    transform: translateY(0);
}

.block-links a {
    border-radius: 15px;
    background: linear-gradient(180deg, var(--secondary) 0%, var(--accent) 100%);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-transform: capitalize;
    min-height: 119px;
    width: 160px;
    max-width: 100%;
    margin: 0 auto;
    transition: all 0.8s ease;
    background-size: 100% 100%;
    padding: 10px;
    box-sizing: border-box;
}

.block-links a:hover {
    background-size: 300% 300%;
}


/*-----------------------------------------------------------------------------------*/
/* Partners
/*-----------------------------------------------------------------------------------*/
.partners {
    margin-bottom: 50px;
}

.partners .container {
    display: flex;
    gap: 40px;
}

.partners-logos {
    width: calc(100% - 450px);
}

.partners-logos .list {
    justify-content: flex-start;
}

.partners .featured {
    flex-grow: 0 !important;
    width: 450px;
    box-sizing: border-box;
}

.border {
    position: relative;
    padding-left: 50px;
}

:dir(ltr) .border {
    padding-left: 0;
    padding-right: 50px;
}

.border::after {
    content: "";
    display: block;
    width: 5px;
    height: 60%;
    background-color: rgba(31, 90, 134, 0.25);
    margin-right: 40px;
    position: absolute;
    left: 0;
    top: calc(50% + 30px);
    transform: translateY(-50%);
}

:dir(ltr) .border::after {
    margin-right: 0;
    margin-left: 40px;
    left: unset;
    right: 0;
}

.list {
    display: flex;
    gap: 30px;
    margin-top: 40px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.partners .item {
    display: block;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(138, 138, 138, 0.51);
    transition: all 0.8s ease;

}

.partners .item-date {
    display: none;
}

section.partners .item {
    opacity: 0;
    transform: scale(0.7);
}

.partners .item.animate {
    transform: none;
    opacity: 1;
}

.partners .item:hover {
    border-color: rgba(31, 90, 134, 0.55);
}

.featured .item {
    width: 160px;
    height: 160px;
    border-radius: 10px;
    border: 4px solid rgba(173, 173, 173, 0.70);
}

.featured .list {
    height: calc(100% - 90px);
    align-items: center;
}

/*-----------------------------------------------------------------------------------*/
/* JOURNALISTS
/*-----------------------------------------------------------------------------------*/
section.journalists {
    padding: 40px 0;
}

.journalists .owl-carousel {
    margin-top: 40px;
}

.owl-carousel .owl-stage {
    display: flex;
}

.journalists .title::before {
    background-color: var(--primary);
}

.journalists .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 65%;
    background-size: auto 100%;
    background-position: top left;
    background-repeat: no-repeat;
    background-color: rgba(55, 90, 140, 0.30);
}

.journalists .item {
    height: 290px;
    border-radius: 15px;
    color: #fff;
    border: 4px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.journalists .group-anim .item {
    filter: grayscale(1);
}

.item.greyout {
    filter: grayscale(1) !important;
}

.journalists .item.animate {
    filter: grayscale(0);
}

.journalists .item:hover {
    border-color: var(--primary);
}

.journalists .item-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 0;
}

.journalists .item-title {
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 10px;
}

.journalists .item::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(180deg, rgba(31, 90, 134, 0.00) 0%, var(--accent) 100%);
    z-index: -1;
}

.journalists .item-date {
    background-color: transparent !important;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    display: block;
}

.journalists .owl-dot {
    background-color: var(--accent);
}

/*-----------------------------------------------------------------------------------*/
/* UPDATES
/*-----------------------------------------------------------------------------------*/
.updates .container {
    display: flex;
    gap: 50px;
}

.events {
    width: 55%;
    flex-shrink: 0;
}

section .events .item {
    width: calc(50% - 15px);
}

section .events .list .item:nth-child(n+3) {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 5px 10px;
    box-sizing: border-box;
    border-radius: 10px;
}

section .events .list .item:nth-child(n+3):hover {
    background-color: #fff;
}

section .events .list .item:nth-child(n+3) .item-image {
    width: 80px;
    height: 80px;
    margin-bottom: 0;
}

section .events .list .item:nth-child(n+3) .item-title {
    font-size: 14px;
}

section .events .list .item:nth-child(n+3) .item-image>.item-date,
section .events .list .item:nth-child(n+3) .item-image .item-info,
section .events .list .item:nth-child(n+3) .item-image::before {
    display: none;
}


.events .item-image {
    height: 200px;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 20px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    transition: all 0.3s ease;
}

section .events .item-image::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(5px);
    position: absolute;
    left: 0;
    top: 0;
    border-radius: inherit;
    opacity: 0;
    transition: all 0.5s ease;
}

.events .item-image>.item-date {
    position: absolute;
    bottom: 10px;
    right: 20px;
}

:dir(ltr) .events .item-image>.item-date {
    right: unset;
    left: 20px;
}

section .events .item:hover .item-image>.item-date {
    opacity: 0;
}

.events .item:hover .item-image::before {
    opacity: 1;
}

.events .item-info {
    position: absolute;
    bottom: 10px;
    right: 20px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    opacity: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease;
}

.events .item-info span {
    border-radius: 5px;
    background: var(--primary);
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    box-sizing: border-box;
    min-width: 100px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    width: fit-content;
    flex-direction: column;
    margin: 0;
    height: unset;
    line-height: normal;
    gap: 10px;
    opacity: 1;
    transition: all 0.5s ease;
}

.events .item-views {
    transform: translateX(10px);
}

.events .item-info .item-date {
    transform: translateX(-10px);
}

.events .item:hover .item-info {
    opacity: 1;
}

.events .item:hover .item-info span {
    transform: none;
}

.events .item:hover .item-info small {
    display: block;
}

.events .item-info small {
    font-size: 12px;
    display: none;
}

/*-----------------------------------------------------------------------------------*/
/* RESEARCH
/*-----------------------------------------------------------------------------------*/
.research {
    flex-grow: 1;
}

.research .list {
    gap: 20px;
}

.research .item {
    display: flex;
    gap: 25px;
    align-items: center;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.16);
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
}

.research .group-anim .item {
    opacity: 0;
    transform: translateX(-30px);
}

:dir(ltr) .research .group-anim .item {
    transform: translateX(30px);
}

.research .item.animate {
    opacity: 1;
    transform: translateX(0) !important;
}

.research .item-image {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.research .item-image::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    top: 0;
    left: 0;
    background: rgba(31, 90, 134, 0.60);
    opacity: 0;
    position: absolute;
    transition: all 0.5s ease;
}

.research .item-date {
    opacity: 0;
    background-color: transparent !important;
    z-index: 1;
    margin: 0;
}

.research .item:hover .item-date {
    opacity: 1;
}

.research .item:hover .item-image::after {
    opacity: 1;
}

/*-----------------------------------------------------------------------------------*/
/* ARTICLES
/*-----------------------------------------------------------------------------------*/
.articles .item {
    border-radius: 10px;
    border: 3px solid transparent;
    background: #FFF;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    gap: 10px 15px;
    flex-wrap: wrap;
    align-items: center;
}

.articles .group-anim .item {
    opacity: 0;
    transform: translateY(30px);
}

.articles .item.animate {
    opacity: 1;
    transform: none;
}

.articles .item:hover,
.files a:hover {
    border-color: rgba(31, 90, 134, 0.55);
}

.articles .item-image {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
    border-radius: 50%;
}

.articles .item-date {
    background-color: transparent !important;
    margin: 0;
    padding: 0;
    color: #929292;
}

.articles .item-author {
    color: var(--accent);
    font-size: 16px;
    font-weight: 500;
}

.articles .item-info {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
}

.articles .item-title {
    width: 100%;
    padding: 0 5px;
}

/*-----------------------------------------------------------------------------------*/
/* FOOTER
/*-----------------------------------------------------------------------------------*/
footer {
    background-color: var(--accent);
    padding: 60px 0 20px 0;
}

footer .container {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
    padding-left: 150px;
    box-sizing: border-box;
}

.copyrights {
    display: block;
    margin-top: 60px;
    text-align: center;
    color: #fff;
    font-size: 12px;
}

:dir(ltr) footer .container {
    padding-left: 0;
    padding-right: 150px;
}

footer .logo * {
    color: #fff;
}

footer .social-links a {
    color: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
}

footer .social-links a:hover {
    background-color: #fff;
}

footer .social-links {
    width: calc(100% - 130px);
    justify-content: center;
    margin-right: auto;
}

:dir(ltr) footer .social-links {
    margin-right: unset;
    margin-left: auto;
}

.contact li {
    list-style: none;
    margin-bottom: 20px;
}

.contact i {
    font-size: 22px;
}

.contact a {
    color: #fff;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.contact a:hover i {
    font-weight: 800;
}

.links ul:hover a {
    opacity: 0.5;
}

.links a:hover {
    opacity: 1 !important;
}

.links span {
    color: #fff;
    font-size: 18px;
    display: block;
    margin-bottom: 15px;

}

.links li {
    list-style: none;
}

.links a {
    color: #fff;
    padding-bottom: 15px;
    text-transform: capitalize;
}

.links a:before {
    content: "\f104";
    font-family: "Font Awesome 5 Pro";
    display: inline-block;
    font-size: 15px;
    margin-left: 10px;
    opacity: 0.8;
}

:dir(ltr) .links a:before {
    content: "\f105";
    margin-left: 0;
    margin-right: 10px;

}

.to-top {
    cursor: pointer;
    position: absolute;
    left: 0;
    top: -85px;
    background-color: var(--primary);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

:dir(ltr) .to-top {
    left: unset;
    right: 0;
}

.to-top:hover {
    background-color: #fff;
    transition: background-color 0.1s 0.2s ease;

}

.to-top::before {
    content: "\f062";
    font-family: "Font Awesome 5 Pro";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 100%;
    transition: all 0.3s ease;
    background-color: #fff;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 900;
}

.to-top:hover::before {
    top: 0;
}

.to-top i {
    transition: all 0.3s ease;
}

.to-top:hover i {
    transform: translateY(-100%) scale(0.8);
    opacity: 0;
}


/*-----------------------------------------------------------------------------------*/
/* INNER PAGE
/*-----------------------------------------------------------------------------------*/
main {
    padding: 20px 0 50px 0;
    min-height: calc(100vh - 670px);
    overflow: hidden;
}

.art-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.art-header>div {
    flex-grow: 1;
}

.art-header .title {
    line-height: 1.6;
}

.art-header .title::before {
    display: none;
}

.art-header .date {
    display: block;
    color: var(--secondary);
    font-size: 16px;
    font-weight: 600;
}

.author i {
    color: var(--primary);
    margin: 0 5px;
}

.tools-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
    margin-bottom: 30px;
}

.main-img {
    position: relative;
    flex-shrink: 0;
    max-width: 60%;
}

.main-img.youtube {
    display: none;
}

.main-img img {
    border-radius: 15px;
    max-height: 400px;
    box-shadow: 0 6px 10px rgb(0 0 0 / 5%);
}

.page-content {
    margin-top: 50px;
}

.page-content table {
    width: 100%;
    border-collapse: collapse;
}

.page-content table th,
.page-content table td {
    padding: 8px;
    border: 1px solid #ddd;
    text-align: left;
}

.page-content table tr:nth-child(even) {
    background-color: #f2f2f2;
}

.page-content img,
.page-content table {
    display: block;
    margin: 20px 0;
}

.page-content ol,
.page-content ul {
    list-style-position: inside;
}

.page-content.img .youtube,
.page-content .youtube .main-img {
    display: none;
}

.page-content iframe {
    width: 100%;
    aspect-ratio: 16/9;
    margin: 20px 0;
    border-radius: 15px;
}

.page-content p,
.page-content {
    line-height: 32px;
}

.page-content p a:hover {
    text-decoration: underline;
    color: var(--secondary);
}

.page-content ul {
    list-style-position: inside;
    margin: 10px 30px;
}

.page-content ul li::marker {
    color: var(--main);
}

/*-----------------------------------------------------------------------------------*/
/* SHARE ICONS
/*-----------------------------------------------------------------------------------*/
.share-icon {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 60px;
    flex-wrap: wrap;
}

.share-icon a {
    padding: 10px 18px;
    background: var(--default);
    border-radius: 5px;
    color: #fff;
    flex-shrink: 0;
    display: block;
    height: 36px;
    box-sizing: border-box;
    text-align: center;
    font-size: 12px;
    text-transform: capitalize;
}

.share-icon a i {
    margin-left: 10px;
}

:dir(ltr) .share-icon a i {
    margin-left: 0;
    margin-right: 10px;
}

.hide {
    display: none;
}

.tools a {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background-color: #606060;
    text-align: center;
    line-height: 30px;
    color: #fff;
}

.tools a:hover {
    background-color: var(--accent);
}

.share-icon a:hover {
    background-color: var(--accent);
}

.share-icon a.facebook {
    background-color: #4867aa;
    color: #fff;
}

.share-icon a.facebook:hover {
    background-color: #2e4b89;
}

.fab.fa-twitter::before {
    content: "";
    background-image: url(../images/x-white.svg);
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center;
}

header .fab::before {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    background: #838383;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    transition: all 0.3s ease;
}

header .fab:hover::before {
    background-color: var(--accent);
}

.top-bar .fa-facebook:before {
    content: "\f082";
}

.top-bar .fa-twitter:hover::before {
    background-color: var(--accent);
}

footer .social-links .fa-twitter::before {
    width: 100%;
    height: 100%;
    font-size: 21px;
}

footer .social-links .fa-twitter:hover::before {
    background-image: url(../images/x-color.svg);

}

.share-icon a.twitter {
    background-color: #1d1b1b;
}

.share-icon .fa-twitter::before {
    width: 15px;
}

.share-icon a.twitter:hover {
    background-color: #000;
}

.items-list {
    display: grid;
    width: 100%;
    margin: 40px 0;
    gap: 30px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.items-list.journalists {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.items-list.research {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

.items-list.partners {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

.items-list .item-info,
.items-list.journalists .item-image .item-date,
.items-list.articles .item-image .item-date {
    display: none;
}

.items-list.journalists .item-info {
    display: block;
    order: 2;
}

.items-list.events .item-date,
.search-result .item-date {
    position: absolute;
    bottom: 10px;
    right: 20px;
}

:dir(ltr) .items-list.events .item-date,
:dir(ltr) .search-result .item-date {
    right: unset;
    left: 20px;
}

.search-result .item-image,
.items-list.n .item-image {
    height: 200px;
    margin-bottom: 15px;
}

.items-list.n .item-date {
    right: 10px;
    position: absolute;
    top: 10px;
}

.search-result .item-title {
    text-align: justify;
    text-align-last: center;
}

.item.noimg {
    background: #fff;
    height: 200px;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.item.noimg:hover {
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
    background-color: #f0f4f7;
}

.item.noimg .item-image {
    display: none;
}

/*-----------------------------------------------------------------------------------*/
/* BREADCRUMBS
/*-----------------------------------------------------------------------------------*/

.breadcrumbs {
    list-style: none;
    margin-bottom: 15px;
    background-color: rgba(224, 227, 232, 0.53);
    border-radius: 7px;
    padding: 0 15px;
    display: flex;
    width: fit-content;
    line-height: 30px;
}

.breadcrumbs a {
    font-size: 14px;
    text-transform: capitalize;
    color: inherit;
}

.breadcrumbs .active {
    color: var(--primary);
}

.breadcrumbs li:not(:first-child)::before {
    content: "\f104";
    font-family: 'Font Awesome 5 Pro';
    margin: 0px 8px;
    font-size: 13px;
    vertical-align: middle;
}

:dir(ltr) .breadcrumbs li:not(:first-child)::before {
    content: "\f105";
}

.breadcrumbs li:last-child {
    display: none;
}

/* Mable Render */
/* [data-parent],
[data-rows] {
    visibility: hidden;
} */
img[src="null"],
.noimg .image {
    display: none;
}

#url {
    opacity: 0;
    position: absolute;
    z-index: -1;
    right: -10000px;
}

:dir(ltr) #url {
    right: unset;
    left: -10000px;
}

.art-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    list-style: none;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.art-actions a {
    font-size: 20px;
    background-color: var(--default);
    color: #fff;
    width: 35px;
    height: 35px;
    border-radius: 15%;
    text-align: center;
    line-height: 37px;
}

.art-actions a:hover {
    background-color: var(--primary);
}

/*-----------------------------------------------------------------------------------*/
/* ATTACHEMNETS
/*-----------------------------------------------------------------------------------*/

.component {
    margin-top: 30px;
}

.media-files {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    list-style: none;
    gap: 10px;
    margin: 20px 0 !important;
}

.media-files a {
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px;
    width: 130px;
    height: 130px;
    box-sizing: border-box;
    transition: all 0.5s ease;
    position: relative;
}

.media-files a[data-mablebox="video"]:before {
    content: "\f04b";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-family: "Font Awesome 5 Pro";
    z-index: 1;
    display: block;
    background: var(--primary);
    width: 30px;
    height: 30px;
    margin: 0 auto;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    font-weight: 800;
    border: 2px solid #fff;
    font-size: 12px;
}

.media-files a:hover {
    transform: scale(1.05);
}

.files {
    list-style: none;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    margin: 0 !important;
}

.files a {
    display: block;
    background-color: #fff;
    box-shadow: 0px 3px 2px 0px rgb(0 0 0 / 6%);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    padding: 20px 10px;
    padding-left: 50px;
    box-sizing: border-box;
    position: relative;
    border: 3px solid transparent;
}

:dir(ltr) .files a {
    padding-left: 10px;
    padding-right: 50px;
}

.files a::after {
    font-family: 'Font Awesome 5 Pro';
    color: var(--primary);
    font-size: 28px;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

:dir(ltr) .files a::after {
    left: unset;
    right: 20px;
}

.files a:after {
    content: '\f56d';
}


.files a:hover:after {
    color: var(--accent);
    font-weight: 900;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
    text-align: center;
    width: fit-content;
    margin: 60px auto 0 auto;
}

.pagination li:first-child {
    margin-left: auto;
}

.pagination li:last-child {
    margin-right: auto;
}

.pagination li:first-child,
.pagination li:last-child {
    font-size: 23px;
    line-height: 29px;
}

.pagination li {
    display: inline-block;
    margin: 0 2px;
    border-radius: 5px;
    background: #fff;
    width: 40px;
    height: 35px;
    line-height: 34px;
    transition: all 0.3s ease;
    font-size: 15px;
    border: 2px solid var(--accent);
    color: var(--accent);
}

.pagination a {
    display: block;
    text-align: center;
    font-size: inherit;
    color: inherit;
    transition: none;
}

.pagination li.current {
    background-color: var(--accent);
    color: #fff;
}

.pagination li.disabled {
    display: none;
}

.pagination li:not(.current):hover {
    background-color: var(--accent);
    color: #fff;
}

.statics {
    display: block;
    text-align: center;
    font-size: 14px;
    margin-top: 20px;
}


.search-form {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 20px 30px;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 3px 2px 0px rgb(0 0 0 / 6%);
    box-sizing: border-box;
}

.search-form input:not([type="submit"]),
.search-form select {
    background-color: #fff;
    border-radius: 10px;
    padding: 5px 20px;
    height: 40px;
    box-sizing: border-box;
    line-height: 40px;
    font-size: 15px;
    color: var(--default);
    border: 1px solid #e5e5e5;
    font-family: inherit;
    outline: none;
}

.search-form input {
    width: 250px;
    display: inline-block;
}

input[type="submit"] {
    cursor: pointer;
}

.search-form input[type="submit"] {
    min-width: 100px;
    width: fit-content !important;
    font-size: 16px;
    border: none;
}

.search-form label {
    margin-left: 10px;
}

:dir(ltr) .search-form label {
    margin-right: 10px;
    margin-left: 0
}

.search-form label,
.search-form select {
    display: inline-block;
    width: auto;
    margin-bottom: 0;
}

/*-----------------------------------------------------------------------------------*/
/*  MONGID | SOFTWARE HOUSE
/*-----------------------------------------------------------------------------------*/
.mongiddesigns {
    position: absolute;
    bottom: 15px;
    left: 15px;
    direction: ltr;
}

.mongiddesigns span {
    display: block;
    position: relative;
    width: 36px;
    height: 36px;
    background-image: url(https://mongid.com/designs/mongid/iconxl2.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    border: 2px solid transparent;
    border-radius: 50%;
    z-index: 10;
    transform: scale(0.85);
    transition: all 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.mongiddesigns:hover span {
    transform: scale(1) rotate(360deg);
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3);
    border-color: var(--main);
}

.mongiddesigns p {
    display: block;
    text-align: left;
    position: absolute;
    left: 0;
    bottom: 5px;
    height: 30px;
    padding: 0 10px 0 30px;
    border-radius: 0 15px 15px 0px;
    z-index: 1;
    opacity: 0;
    transition: left 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    transition-delay: 0.1s;
}

.mongiddesigns p i {
    color: #ffffffcf;
    display: block;
    text-transform: capitalize;
    font-size: 10px;
    height: 10px;
    line-height: 16px;
    font-style: normal;
}

.mongiddesigns p b {
    color: #fff;
    display: block;
    font-size: 12px;
    line-height: 20px;
    height: 12px;
    white-space: nowrap;
    font-weight: normal;
}

.mongiddesigns:hover p {
    left: 20px;
    opacity: 1;
}

/*-----------------------------------------------------------------------------------*/
/* FONT AWSOME
/*-----------------------------------------------------------------------------------*/

.fa,
.fab,
.fal,
.far,
.fas {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

.fa-facebook:before {
    content: "\f39e";
}

.fa-facebook-f:before {
    content: "\f39e";
}

.fa-flickr:before {
    content: "\f16e";
}

.fa-youtube:before {
    content: "\f167";
}

.fa-instagram:before {
    content: "\f16d";
}

.fa-tiktok:before {
    content: "\e07b";
}

.fa-linkedin:before {
    content: "\f08c";
}

.fa-search:before {
    content: "\f002";
}

.fa-envelope-open:before {
    content: "\f2b6";
}

.fa-phone:before {
    content: "\f095";
}

.fa-map-marker-alt:before {
    content: "\f3c5";
}

.fa-images:before {
    content: "\f302";
}

.fa-whatsapp:before {
    content: "\f232";
}

.fa-exclamation-triangle:before {
    content: "\f071";
}

.fa-user-edit:before {
    content: "\f4ff";
}

.fa-link:before {
    content: "\f0c1";
}

.fa-print:before {
    content: "\f02f";
}

.fa-play:before {
    content: "\f04b";
}

.fa-pause:before {
    content: "\f04c";
}

.fa-search-plus:before {
    content: "\f00e";
}

.fa-search-minus:before {
    content: "\f010";
}

.fa-angle-left:before {
    content: "\f104";
}

.fa-arrow-up:before {
    content: "\f062";
}

@font-face {
    font-family: "Font Awesome 5 Brands";
    font-display: swap;
    font-style: normal;
    font-weight: normal;
    font-display: auto;
    src: url(../fonts/webfonts/fa-brands-400.eot);
    src: url(../fonts/webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"), url(../fonts/webfonts/fa-brands-400.woff2) format("woff2"), url(../fonts/webfonts/fa-brands-400.woff) format("woff"), url(../fonts/webfonts/fa-brands-400.ttf) format("truetype"), url(../fonts/webfonts/fa-brands-400.svg#fontawesome) format("svg");
}

.fab {
    font-family: "Font Awesome 5 Brands";
}

@font-face {
    font-family: "Font Awesome 5 Pro";
    font-display: swap;
    font-style: normal;
    font-weight: 300;
    font-display: auto;
    src: url(../fonts/webfonts/fa-light-300.eot);
    src: url(../fonts/webfonts/fa-light-300.eot?#iefix) format("embedded-opentype"), url(../fonts/webfonts/fa-light-300.woff2) format("woff2"), url(../fonts/webfonts/fa-light-300.woff) format("woff"), url(../fonts/webfonts/fa-light-300.ttf) format("truetype"), url(../fonts/webfonts/fa-light-300.svg#fontawesome) format("svg");
}

.fal {
    font-weight: 300;
}

@font-face {
    font-family: "Font Awesome 5 Pro";
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    font-display: auto;
    src: url(../fonts/webfonts/fa-regular-400.eot);
    src: url(../fonts/webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"), url(../fonts/webfonts/fa-regular-400.woff2) format("woff2"), url(../fonts/webfonts/fa-regular-400.woff) format("woff"), url(../fonts/webfonts/fa-regular-400.ttf) format("truetype"), url(../fonts/webfonts/fa-regular-400.svg#fontawesome) format("svg");
}

.fal,
.far {
    font-family: "Font Awesome 5 Pro";
}

.far {
    font-weight: 400;
}

@font-face {
    font-family: "Font Awesome 5 Pro";
    font-display: swap;
    font-style: normal;
    font-weight: 900;
    font-display: auto;
    src: url(../fonts/webfonts/fa-solid-900.eot);
    src: url(../fonts/webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"), url(../fonts/webfonts/fa-solid-900.woff2) format("woff2"), url(../fonts/webfonts/fa-solid-900.woff) format("woff"), url(../fonts/webfonts/fa-solid-900.ttf) format("truetype"), url(../fonts/webfonts/fa-solid-900.svg#fontawesome) format("svg");
}

.fa,
.fas {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-display: swap;
}

/*-----------------------------------------------------------------------------------*/
/* TIPSY
/*-----------------------------------------------------------------------------------*/
.tipsy {
    font-size: 10px;
    position: absolute;
    padding: 5px;
    text-transform: capitalize;
    z-index: 100000
}

.tipsy-inner {
    background-color: #000;
    color: #fff;
    max-width: 200px;
    padding: 5px 8px 4px;
    text-align: center;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px
}

.tipsy-arrow {
    position: absolute;
    width: 0;
    height: 0;
    line-height: 0;
    border: 5px dashed #000
}

.tipsy-n .tipsy-arrow,
.tipsy-nw .tipsy-arrow {
    border-left-color: transparent;
    border-right-color: transparent
}

.tipsy-arrow-n {
    border-bottom-color: #000
}

.tipsy-arrow-s {
    border-top-color: #000
}

.tipsy-n .tipsy-arrow,
.tipsy-ne .tipsy-arrow,
.tipsy-nw .tipsy-arrow {
    top: 0;
    border-bottom-style: solid;
    border-top: none
}

.tipsy-arrow-e {
    border-left-color: #000
}

.tipsy-arrow-w {
    border-right-color: #000
}

.tipsy-n .tipsy-arrow {
    left: 50%;
    margin-left: -5px
}

.tipsy-nw .tipsy-arrow {
    left: 10px
}

.tipsy-ne .tipsy-arrow {
    right: 10px;
    border-left-color: transparent;
    border-right-color: transparent
}

.tipsy-s .tipsy-arrow,
.tipsy-se .tipsy-arrow,
.tipsy-sw .tipsy-arrow {
    bottom: 0;
    border-top-style: solid;
    border-bottom: none;
    border-left-color: transparent;
    border-right-color: transparent
}

.tipsy-s .tipsy-arrow {
    left: 50%;
    margin-left: -5px
}

.tipsy-sw .tipsy-arrow {
    left: 10px
}

.tipsy-se .tipsy-arrow {
    right: 10px
}

.tipsy-e .tipsy-arrow,
.tipsy-w .tipsy-arrow {
    top: 50%;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: transparent
}

.tipsy-e .tipsy-arrow {
    right: 0;
    border-left-style: solid;
    border-right: none
}

.tipsy-w .tipsy-arrow {
    left: 0;
    border-right-style: solid;
    border-left: none
}

/*--------------------------------------------*/
/*  MABLE BOX 
/*--------------------------------------------*/

#mablebox-wrap,
div#mablebox {
    box-sizing: border-box;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0
}

#mablebox-tabs a,
div#mablebox {
    backdrop-filter: blur(5px);
    transition: .3s
}

#mablebox-tabs .close,
#mablebox-tabs .icon {
    font-family: 'Material Icons';
    font-style: normal;
    font-size: 18px
}

#mablebox-wrap {
    display: none;
    position: fixed;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    /* background-image: url(../images/loader1.svg); */
    background-color: rgba(0, 0, 0, .2);
    transition: backdrop-filter .3s, padding .3s;
    z-index: 6000
}

#mablebox-wrap h2 {
    background-color: #88a3df;
    font-size: 16px;
    margin: auto;
    padding: 0 20px 5px;
    width: fit-content;
    color: #fff;
    border-radius: 6px
}
#mablebox-wrap .nav-btns {
    display: flex;
	font-family: 'Material icons';
    font-size: 24px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    height: 44px;
    width: 88px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    border-radius: 10px;
    overflow: hidden;
	background-color: var(--default);
	user-select: none;
	z-index: 1001;
}
#mablebox-wrap .nav-btns a {
	display: block;
	height: 56px;
	width: 56px;
	color: #fff;
}
#mablebox-wrap .nav-btns a:hover {
	background-color: var(--primary);
}

#mablebox-m,
#mablebox-wrap h2:empty {
    display: none
}

div#mablebox {
    display: block;
    overflow: auto;
    text-align: center;
    margin: 20px auto;
    max-width: calc(100% - 40px);
    color: #fff;
    direction: ltr;
    background-color: #fff;
    background-size: contain;
    border-radius: 10px;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .5);
    transform: scale(.5) translateY(-50%) translateX(-50%);
    position: absolute;
    top: 50%;
    left: 50%;
}

div#mablebox.fullheight,
div#mablebox.fullheight #mablebox-frame {
    max-height: calc(100vh - 80px)
}

div#mablebox.fullscreen {
    margin: auto;
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100vh;
    border-radius: 0
}

div#mablebox.mfullscreen {
    margin: 10px auto;
    max-width: 100% !important;
    width: calc(100% - 20px) !important;
    height: calc(100% - 20px) !important;
    max-height: 100vh;
    border-radius: 10px
}

#mablebox.show {
    transform: scale(1) translateY(-50%) translateX(-50%) !important;
    opacity: 1
}

#mablebox.api {
    background-color: #ffffffd9;
    color: #333;
    padding: 0 20px;
    text-align: right;
    max-height: 300px
}

[data-theme=dark] #mablebox.api {
    background-color: #202427ba;
    color: #fff
}

#mablebox.api section {
    max-height: 200px;
    overflow-y: auto;
    margin: 10px 0;
    direction: rtl
}

#mablebox.api section s {
    font-family: 'Material icons';
    text-decoration: none;
    vertical-align: middle;
    color: #68cce0
}

#mablebox.api img {
    max-width: 70%;
    margin: auto;
    display: block;
    border-radius: 5px
}

#mablebox.api footer {
    height: 20px
}

#mablebox>img {
    max-width: 100%;
    max-height: 100%
}

#mablebox-frame {
    height: 100%;
    width: 100%;
    transition: .3s;
    margin-bottom: -4px
}

div#mablebox.fullscreen #mablebox-frame,
div#mablebox.mfullscreen #mablebox-frame {
    height: 100% !important;
    max-height: 100vh !important
}

#mablebox-tabs {
    display: none;
    align-items: end;
    gap: 5px;
    position: fixed;
    right: 320px;
    bottom: -4px;
    z-index: 1000;
    list-style: none;
    transition: bottom .5s
}

#mablebox-tabs.show {
    display: flex
}

#mablebox-tabs.hide {
    bottom: -80px
}

#mablebox-tabs li {
    position: relative
}

#mablebox-tabs a {
    color: #fff;
    white-space: nowrap;
    background-color: #44474a;
    border-radius: 4px 4px 0 0;
    min-width: 100px;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    height: 26px;
    padding: 3px 15px 3px 35px
}

#mablebox-tabs li a.current,
#mablebox-tabs li:hover a {
    background-color: #88a3df;
    padding-bottom: 10px
}

#mablebox-tabs .icon {
    color: #fff;
    padding-top: 5px;
    margin-right: -7px;
    margin-left: 5px;
    float: right
}

#mablebox-tabs .close {
    color: #fff;
    background-color: rgba(0, 0, 0, .3);
    position: absolute;
    left: 8px;
    top: 8px;
    cursor: pointer;
    border-radius: 3px
}

#mablebox-tabs .close:hover {
    background-color: rgba(0, 0, 0, .4)
}

/*-----------------------------------------------------------------------------------*/
/* RESPONSIVE DESIGN
/*-----------------------------------------------------------------------------------*/

@media only screen and (min-width: 901px) {

    section.media .item:first-child {
        width: 100%;
        color: inherit;
        margin-bottom: 40px;
        display: flex;
        gap: 50px;
        align-items: center;
        opacity: 1;
        transform: none;
    }

    section.media .item:first-child:has(iframe) .item-image {
        display: none;
    }

    section.media .item:first-child:has(iframe) iframe {
        display: block;
        height: 400px;
        width: calc(60% - 50px);
        flex-shrink: 0;
        border-radius: 15px;
    }

    section.media .item:first-child .item-image {
        height: 400px;
        width: calc(60% - 50px);
        flex-shrink: 0;
        background-position: center;
        background-size: 100%;
        transition: all 1s ease;
    }

    .media .item:first-child .media-icon {
        display: none;
    }

    section.media .item:first-child .item-title {
        font-size: 28px;
        line-height: 46px;
    }

    section.media .item:first-child span {
        background: rgba(0, 0, 0, 0.20);
        border-radius: 5px;
        font-weight: 400;
        text-align: center;
        height: 38px;
        width: fit-content;
        padding: 3px 10px;
        line-height: 33px;
        box-sizing: border-box;
        font-size: 16px;
        display: inline-block;
        margin: 70px 0 0 5px;
    }
}


@media only screen and (max-width: 1180px) {
    .header-items {
        gap: 10px;
    }

    .logo {
        gap: 10px;
    }

    .menu a {
        font-size: 15px !important;
        padding: 0 10px;
    }

    .logo img {
        max-height: 80px;
    }

    .logo h1 {
        font-size: 16px;
    }

    .logo p {
        font-size: 12px;
    }

    nav {
        top: 0;
    }

    .partners .item {
        width: 130px !important;
        height: 130px !important;
    }

    .partners .list {
        gap: 20px;
        justify-content: center;
    }

    .updates .border::after {
        display: none;
    }

    .updates .border {
        padding: 0;
    }

    .updates .container {
        flex-wrap: wrap;
    }

    .events {
        width: 100%;
    }

    .research .item {
        width: 48%;
        min-width: 300px;
        flex-grow: 1;
    }

}

@media only screen and (max-width: 900px) {
    .toggle-menu {
        flex-shrink: 0;
        width: 40px;
        height: 38px;
        cursor: pointer;
        border: none;
        border-radius: 10px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary);
        z-index: 100;
    }

    .toggle-menu svg {
        width: 22px;
        height: 10px;
    }

    header {
        background: #fff;
        padding-bottom: 5px;
    }

    .top-bar {
        opacity: 0;
        position: absolute;
        bottom: -40px;
        left: 0;
        right: 0;
        margin: 0 auto;
        justify-content: center;
        transition: all 0.3s ease;
        transform: translateY(10px);
    }

    .top-bar.show {
        opacity: 1;
        transform: none;
        z-index: 10000;
    }

    .search-bar input {
        display: none;
    }

    .header-items {
        justify-content: space-between;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .accordion {
        padding-top: 30px;
    }

    nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 1000;
        background-color: #fff;
        border-radius: 0 0 15px 15px;
        padding-top: 40px;
        box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.16);
    }


    header .container {
        width: 100%;
    }

    .menu {
        flex-direction: column;
        padding: 15px 0;
    }

    .menu li {
        display: block;
        width: 100%;
    }

    .menu a {
        display: block;
        font-size: 16px !important;
        padding: 15px 20px;
    }

    .info-list li:has(.btn) {
        width: 100%;
        justify-content: center;
    }

    .info-list:has(.btn) {
        justify-content: center;

    }

    .articles .item {
        gap: 10px;
    }

    .articles .item-info {
        gap: 5px;
    }

    .articles .item-author {
        font-size: 18px;
    }

    .border::after {
        display: none;
    }

    .border {
        padding: 0;
    }

    .partners .container>div:not(.featured) {
        width: 100%;
    }

    .statement .container,
    .partners .container {
        flex-wrap: wrap;
    }

    .partners .featured,
    .partners-logos {
        width: 100%;
    }

    .statement .quote,
    .block-links,
    .events,
    blockquote {
        width: 100%;
    }

    .speaker {
        margin-left: 0;
        margin-right: 0;
    }

    .quote.animate blockquote .text::after {
        transform: translateY(40px) translateX(0);
    }

    :dir(ltr) .quote.animate blockquote .text::after {
        transform: translateY(-70%) translateX(-10px);
    }

    .quote.animate blockquote .text::before {
        top: -20px;
    }

    .block-links li {
        width: auto;
    }

    .block-links {
        justify-content: center;
        gap: 20px;
    }

    section.media::before {
        height: 100%;
    }

    section.media .item {
        width: 46%;
        color: #fff;
    }

    .media .item-image {
        height: 280px;
    }

    .list {
        justify-content: flex-start;
    }

    footer .container {
        padding: 0 !important;
        flex-wrap: wrap;
    }


    .accordion .item {
        width: 47% !important;
        min-width: 300px;
        height: 260px;
        flex-grow: 1;
    }

    .accordion .item-subtitle {
        display: none !important;
    }

    .accordion .item-title {
        opacity: 1;
        transform: none;
        font-size: 16px !important;
        line-height: 26px;
        min-height: unset;
    }

    .accordion .container {
        flex-wrap: wrap;
    }

    .accordion .item-date {
        left: 0 !important;
    }

    .art-header {
        flex-wrap: wrap;
    }

    .main-img {
        max-width: 100%;
        margin: 0 auto;
    }

    .search-form {
        justify-content: flex-start;
    }
}


@media only screen and (max-width: 600px) {

    .search-form input:not([type="submit"]),
    .search-form select,
    .search-form label,
    .search-form div {
        width: 100%;
        display: block;
    }

    .search-form label {
        margin-bottom: 10px;
    }

    .news .item-image {
        height: 250px;
    }

    .owl-dots {
        position: relative;
        top: unset;
        text-align: center;
    }

    .info-list {
        gap: 30px 10px;
        justify-content: space-between !important;

    }

    .info-list li {
        display: block;
        width: 45%;
        text-align: center;
    }

    .info-list .number{
        min-width: unset;
        font-size: 40px;
    }
    .statistics .info-list li a{
        gap: 10px;
    }
    .info-list[data-rows="icons"] li:last-child {
        width: 100%;
        text-align: inherit;
    }

    .info-list[data-rows="icons"] li:last-child a {
        justify-content: center;
        gap: 20px;
    }

    .info-list[data-rows="icons"] li:last-child img {
        margin: 0;
    }

    .info-list p {
        max-width: 100%;
    }

    .statistics .btn {
        margin: 0 auto;
        margin-top: 15px;
    }

    .gradient-bg {
        background: linear-gradient(150deg, var(--accent) 6.11%, var(--secondary) 94.14%);
    }

    .info-list img,
    .info-list svg {
        margin: 0 auto 10px auto;
    }

    .owl-carousel .owl-stage-outer {
        overflow: visible;
    }

    section:has(.owl-carousel) {
        overflow: hidden;
    }

    .events .item {
        width: 100% !important;
    }

    .events .list .item:nth-child(n+2) {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .events .list .item:nth-child(n+2) .item-image {
        width: 80px;
        height: 80px;
        margin-bottom: 0;
    }

    .events .list .item:nth-child(n+2) .item-image>.item-date {
        display: none;
    }

    .events .list .item:nth-child(n+2) .item-info {
        display: none;
    }

    .events .item-image {
        height: 250px;
    }

    .events .list .item:nth-child(n+2) .item-image::before {
        display: none;
    }

    section {
        padding: 40px 0;
    }

    .block-links li {
        width: 45%;
    }

    .block-links a {
        padding: 5px;
        font-size: 16px;
        box-sizing: border-box;
        text-align: center;
    }

    blockquote .text {
        padding: 0;
    }

    .title::before {
        margin-left: 15px;
    }

    section.media .item {
        width: 100%;
    }

    .partners .list {
        margin-top: 0;
    }

    .partners .item {
        width: 100px !important;
        height: 100px !important;
    }

    .partners-logos .item {
        width: 90px !important;
        height: 90px !important;
    }

    .partners-logos .list {
        gap: 5px;
    }

    .list {
        justify-content: center;
        gap: 15px;
    }

    .contact,
    .links {
        width: 46% !important;

    }


    footer {
        padding: 20px 0;
    }

    footer .logo {
        justify-content: center;
    }

    footer .social-links {
        width: 100%;
        margin-top: 20px;
    }

    .to-top {
        top: -45px;
    }

    .links ul {
        width: fit-content;
        margin-right: auto;
    }

    :dir(ltr) .links ul {
        margin-right: unset;
        margin-left: auto;
    }

    .links span {
        display: none;
    }

    .mongiddesigns {
        bottom: 50px;
    }
}

@media only screen and (max-width: 490px) {

    .contact,
    .links {
        width: 100% !important;
    }

    .links ul {
        margin: 0 !important
    }

    blockquote .text::before {
        transform: translateY(-50%) translateX(0)
    }

    :dir(ltr) .quote.animate blockquote .text::before {
        transform: translateY(30px) translateX(0)
    }

    .quote.animate blockquote .text::after {
        transform: translateY(80px) translateX(0);
    }

    .logo img {
        max-width: 65px;
    }

    :dir(ltr) .quote.animate blockquote .text::after {
        transform: translateY(-90%) translateX(0);
    }
}