/**
        --------------------
        __Them settings __
        --------------------
**/
:root {
  /* colors */
  --primary-color: rgba(0, 88, 81, 0.945);
  /* default color*/
  /* --primary-color: rgba(0, 1, 88, 0.945); */
  /* --primary-color: rgba(88, 0, 15, 0.945); */
  /* --primary-color: rgba(25, 0, 42, 0.945); */
  --primary-color-50: rgba(219, 219, 219, 0.966);
  --accent-color: rgba(124, 5, 94, 0.884);
  /* text colors */
  --primarty-text-color: rgba(222, 222, 222, 0.7);
  /* border-radius */
  --border-radius: 7px;
}



/* ==========
  Animations
  ==========*/
@keyframes animateHeart {
  0% {
    transform: scale(1);
  }

  5% {
    transform: scale(0.9);
  }

  10% {
    transform: scale(0.9);
  }

  15% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1.1);
  }
}


/* ==========
  Utilities
  ==========*/

/* Margin */
.u-m-0 {
  margin: 0px !important;
}

/* Language */
.u-ltr {
  text-align: left;
  direction: ltr !important;
}

/* layout utilities */
.u-mb-100 {
  margin-bottom: 100px !important;
}

.u-mb-75 {
  margin-bottom: 75px !important;
}

.u-layout {
  background-color: lightblue;
  border: 2px dashed lightcoral;
  margin: 10px 0;
}

.u-layout * {
  display: none;
}

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

.u-text-line-height-2 {
  line-height: 2 !important;
}

.u-text-bold {
  font-weight: bold !important;
}

/* UIs */
.u-ui-pointer {
  cursor: pointer;
}

.u-z-index-1100 {
  z-index: 1100;
}

.u-z-index-1110 {
  z-index: 1110;
}

.u-z-index-1120 {
  z-index: 1120;
}

.u-no-select {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

/**
  Glass-Morphism
  generator : https://css.glass/
**/
.u-glass-morphism {
  background: rgba(255, 255, 255, 0.48);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.26);
}

/*--------- -
->background
-------------*/
.u-bg-primary {
  background: var(--primary-color) !important;
}

/*-------------
->Text color
---------------*/
.u-text-color-primary {
  color: var(--primary-color) !important;
}

.u-text-linebreak-no {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

}

/*---------
->Border
-----------*/

.u-border-all {
  border: 2px solid var(--primary-color);
}

.u-border-top {
  border-top: 2px solid var(--primary-color);
}

.u-border-bottom {
  border-bottom: 2px solid var(--primary-color) !important;
}

/*-------------
->Border-Radius
---------------*/
.u-rounded-all {
  border-radius: var(--border-radius) !important;
}

.u-line-height-2 {
  line-height: 2 !important;
}

/**
        #########################
        #####   Scrollbar   #####
        #########################
**/

/* width */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;

}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;

}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  background: var(--primary-color);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.616);

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}


body {
  position: relative;
  /* font-family: 'Baloo Bhaijaan 2', sans-serif; */

  font-family: 'Cairo', sans-serif;
  /* font-family: 'Vazirmatn', sans-serif; */
  /* background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='40' height='40' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(135)'%3E%3Crect width='100%25' height='100%25' fill='rgba(247, 250, 252,1)'/%3E%3Ccircle cx='40' cy='20' r='1' fill='rgba(237, 242, 247,1)'/%3E%3Ccircle cx='0' cy='20' r='1' fill='rgba(237, 242, 247,1)'/%3E%3Ccircle cx='20' cy='40' r='1' fill='rgba(237, 242, 247,1)'/%3E%3Ccircle cx='20' cy='0' r='1' fill='rgba(237, 242, 247,1)'/%3E%3Ccircle cx='38' cy='2' r='1' fill='rgba(237, 242, 247,1)'/%3E%3Ccircle cx='2' cy='38' r='1' fill='rgba(237, 242, 247,1)'/%3E%3Ccircle cx='38' cy='38' r='1' fill='rgba(237, 242, 247,1)'/%3E%3Ccircle cx='2' cy='2' r='1' fill='rgba(237, 242, 247,1)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E "); */
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {}

/*  Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  body {
    /* font-family: "Tajawal"; */
    /* font-family: 'Noto Naskh Arabic', serif; */
    font-family: 'Noto Sans Arabic', sans-serif;
  }
}

/*  Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/*  Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

p {
  /* text-align: justify; */
}

/**
        #########################
        ##### Normalization #####
        #########################
**/



/**
        @@@@@@@@@@@@@@@@@@@@@@@
        @@@@ Form Controls @@@@
        @@@@@@@@@@@@@@@@@@@@@@@
**/
select {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.c-form-control {}

.c-form-control-field,
.c-form-control-btn {
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  transition: all 0.3s ease-in-out;
  border-color: var(--primary-color);
}

.c-form-control-btn:hover {
  color: #fff;
}

.c-form-control:focus {
  background-color: transparent;
  color: #fff;
}

/*
------------------------
---- button outline ----
------------------------
*/
.c-btn-outline {
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
}

.c-btn-outline:focus {
  background: var(--primary-color);
  color: #fff;
}

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

/*
-------------------
---custom button---
-------------------
 */

.c-btn {
  background: var(--primary-color);
  color: #fff;
  border: 1px solid var(--primary-color);
}

.c-btn.active {
  background: var(--primary-color);
  color: #fff;
}

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

.c-btn-outline-primary {
  background: transparent;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

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

/**
=========================
======= DropDown  =======
=========================
**/
.c-dropdown {
  background: #fff;
}

.c-dropdown:active {
  background: var(--primary-color);
}

.c-dropdown-item:active {
  background: var(--primary-color);
}

.c-dropdown-item {
  padding: 5px 10px;
}

/*
====================================
======  list-group / item   ========
====================================
*/
.c-list-group-item {
  color: #333;
  padding: 7px !important;
  text-decoration: none;
}

.c-list-group-item.active,
.c-list-group-item:hover {
  /* background: var(--primary-color); */
  /* border-color: var(--primary-color); */
  text-decoration: none;
  color: #fff;
}

.c-list-group-item__link {
  display: block;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}

.c-list-group-item__link:hover {
  text-decoration: none;

}

/**
  =========================
  === Side List Components ===
  =========================
**/
.c-side-list {
  padding: 0px;
  border: 0;
  border-radius: 0;
}

.c-side-list__item {
  color: #333;
}

.c-side-list__item:hover {
  border-radius: 0;
  cursor: pointer;
  font-size: 16px;
  font-weight: normal;
  text-decoration: none;
  font-weight: bold;
  color: var(--primary-color);
}

.c-side-list__item.active {
  border-radius: 0;
  cursor: pointer;
  font-size: 16px;
  font-weight: normal;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  font-weight: bold;

  text-decoration: none;
}

/**
  =========================
  === Common Components ===
  =========================
**/
/**
        >>>> site-nav component
**/
.c-site-nav {
  background: var(--primary-color);
}

[data-language-dir=rtl] .c-site-nav {
  background: linear-gradient(90deg, rgba(46, 46, 46, 0.916) 5%, var(--primary-color));
}

[data-language-dir=ltr] .c-site-nav {
  background: linear-gradient(-90deg, rgba(46, 46, 46, 0.916) 5%, var(--primary-color));
}

nav.c-site-nav.navbar.navbar-expand-xl.navbar-light.shadow.mb-0.sticky-top {}

/**
    >>>> site-footer component
**/
.c-site-footer {
  background-color: var(--primary-color);
}

/*===================
    card-project
=====================*/
.c-card-project {
  position: relative;
  width: 100%;
  max-width: 320px;
  border-radius: 7px;
  background: #fdfdfd;
  background-position: center;
  background-size: cover;
  /* border:2px solid var(--primary-color); */
  -webkit-box-shadow: -3px 20px 46px -20px rgba(0, 0, 0, 0.22);
  -moz-box-shadow: -3px 20px 46px -20px rgba(0, 0, 0, 0.22);
  box-shadow: -3px 20px 46px -20px rgba(0, 0, 0, 0.22);
  border-radius: 7px;
}

.c-card-project__title {
  font-size: 14px;
  text-align: justify;
  text-justify: inter-word !important;
  color: var(--primary-color);
  height: 48px;
}

.c-card-project__image {
  width: 100% !important;
  height: 240px;
  background-size: cover;
  background-position: center;
  border-radius: 7px 7px 0 0;
  /* clip-path: ellipse(201% 100% at 31.88% 0%); */
}

.c-card-project__inner-container {
  display: block;
  text-decoration: none;
  color: inherit;
}

.c-card-project__inner-container:hover {
  text-decoration: none;
  cursor: pointer;
  color: inherit;
}

.c-card-project__status {
  display: inline-block;
  color: #fff;
  background: var(--primary-color);
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 7px;
}

.c-card-project__status--complete {}

.c-card-project__status--incomplete {}

.c-card-project__metadata {
  padding: 10px;
  border-radius: 0 0 7px 7px;
  border-top: 1px dashed #777;
}

/*=================
      card-news
===================*/
.c-card-news {
  position: relative;
  background-color: #fff;
  /* max-width: 300px; */
  width: 320px;
  border-radius: 7px;

  box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
    rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}

.c-card-news__title {
  font-size: 14px;
  text-align: justify;
  text-justify: inter-word !important;
  color: var(--primary-color);
  height: 48px;
}

.c-card-news__image {
  width: 100% !important;
  height: 240px;
  border-radius: 7px 7px 0 0;
  background-position: center;
  background-size: cover;
  /* clip-path: ellipse(150% 100% at 93% 0%); */
}

.c-card-news__image::after {
  display: block;
  box-sizing: border-box;
  position: absolute;
  content: '';
  width: 20px;
  margin: 10px 10px 0 0;
  height: 20px;
  border-top: 3px solid #fff;
  border-right: 3px solid var(--primary-color);
  /* border-radius:   0 7px 0 0; */
}

.c-card-news__image::before {
  display: block;
  box-sizing: border-box;
  position: absolute;
  content: '';
  width: 20px;
  margin: 0 0 10px 10px;
  height: 20px;
  top: 200px;
  left: 0;
  border-bottom: 3px solid #fff;
  border-left: 3px solid var(--primary-color);
  /* border-radius:   0 0 0 7px; */
}

.c-card-news__inner-container {
  display: block;
  text-decoration: none;
  color: inherit;
}

.c-card-news__inner-container:hover {
  text-decoration: none;
  cursor: pointer;
  color: inherit;
}

.c-card-news__metadata {
  padding: 10px;
  border-radius: 0 0 7px 7px;
  border-top: 1px dashed #777;
}

/*====================
    card-article
=======================*/
.c-card-article {
  position: relative;
  width: 340px;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
    rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}

.c-card-article__title {
  font-size: 14px;
  text-justify: inter-word !important;
  min-height: 40px;
  color: var(--primary-color);
}

.c-card-article__image {
  position: relative;
  width: 100% !important;
  background-size: cover;
  background-position: center;
  height: 240px;
  border-radius: 7px 7px 0 0;
  /* clip-path: ellipse(201% 100% at 31.88% 0%); */
}

.c-card-article__image::after {
  display: block;
  box-sizing: border-box;
  position: absolute;
  content: '';
  width: 20px;
  margin: 10px 10px 0 0;
  height: 20px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  border-radius: 0 7px 0 0;
}

.c-card-article__inner-container {
  display: block;
  text-decoration: none;
  color: inherit;
}

.c-card-article__inner-container:hover {
  text-decoration: none;
  cursor: pointer;
  color: inherit;
}

.c-card-article__author {
  display: inline-block;
  font-size: 0.8rem;
  background: var(--primary-color);
  color: #fff;
  padding: 2px 4px;
  border-radius: 5px;
}

.c-card-article__metadata {
  padding: 10px;
  border-radius: 0 0 7px 7px;
  border-top: 1px dashed #777;
}

/*===================
  CARD - card-flag
  ===================*/
.c-card-flag {
  position: relative;
  max-width: 240px;
  width: 100%;
  margin: 0 10حئ;
  transition: all 0.3s ease-in;
  filter: grayscale(100);
  /* border:2px solid var(--primary-color); */
  border-radius: 7px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
    rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}

/* hover state */
.c-card-flag:hover {
  box-shadow: 3px 4px 15px rgba(2, 2, 2, 0.3);
}

.c-card-flag:hover {
  filter: none;
}

.c-card-flag__inner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.c-card-flag__title {
  clip-path: ellipse(168% 100% at 84.22% 100%);
  position: absolute;
  display: block;
  margin: 0px;
  width: 100%;
  bottom: 0px;
  right: 0px;
  padding: 10px;
  color: #fff;
  font-size: 12px;
  min-height: 60px;
  line-height: 1.4;
  background-color: var(--primary-color);
  /* background-color: rgba(44, 44, 44, 0.145); */
  border-radius: 0px 0px 4px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-card-flag__image {
  border-radius: 7px;
  display: block;
  max-height: 320px;
  width: 100%;
  transition: all 0.2s ease-in-out;
}

/*==============
  CARD - Sound-Album
================*/
.c-card-music-album {
  max-width: 320px;
  width: 100%;
  height: 250px;
  max-height: 300px;
  border-radius: 7px;
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #ccc;
}

.c-card-music-album__cover {
  position: absolute;
  width: 100% !important;
  top: 0;
  left: 0;
}

.c-card-music-album__info-container {
  position: absolute;
  padding: 10px;
  bottom: 1px;
  background: rgba(55, 55, 55, 0.3);
  border-radius: 0 0 7px 7px;
  clip-path: ellipse(180% 100% at 70.8% 100%);
  width: 100%;
}

.c-card-music-album__title {
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-card-music-album__desc {
  font-size: 14px;
  padding: 0;
  margin: 0;
  line-height: 1.4;
}

.c-card-music-album__meta-container {
  font-size: 12px;
  padding-top: 7px;
  border-top: 1px dashed #ccc;
}

/* states */
.c-card-music-album:hover {
  color: #ccc;
}

.c-card-music-album:hover .c-card-music-album__info-container {
  cursor: pointer;
  color: #fff;
  background-color: rgba(55, 55, 55, 0.7);
}

/*==============
  CARD - Video-Album
================*/
.c-card-video-album {
  max-width: 320px;
  width: 100%;
  height: 250px;
  max-height: 300px;
  border-radius: 7px;
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #ccc;
}

.c-card-video-album__cover {
  position: absolute;
  width: 100% !important;
  top: 0;
  left: 0;
}

.c-card-video-album__info-container {
  position: absolute;
  padding: 10px;
  bottom: 1px;
  background: rgba(55, 55, 55, 0.3);
  border-radius: 0 0 7px 7px;
  clip-path: ellipse(180% 100% at 70.8% 100%);
  width: 100%;
}

.c-card-video-album__title {
  font-size: 16px;
}

.c-card-video-album__desc {
  font-size: 14px;
  padding: 0;
  margin: 0;
  line-height: 1.4;
}

.c-card-video-album__meta-container {
  font-size: 12px;
  padding-top: 7px;
  border-top: 1px dashed #ccc;
}

/* states */
.c-card-video-album:hover {
  color: #ccc;
}

.c-card-video-album:hover .c-card-video-album__info-container {
  cursor: pointer;
  color: #fff;
  background-color: rgba(55, 55, 55, 0.7);
}

/*==============
  CARD - Image-Album
================*/
.c-card-image-album {
  max-width: 320px;
  width: 100%;
  height: 250px;
  max-height: 300px;
  border-radius: 7px;
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #ccc;
}

.c-card-image-album__cover {
  position: absolute;
  width: 100% !important;
  top: 0;
  left: 0;
}

.c-card-image-album__info-container {
  position: absolute;
  padding: 10px;
  bottom: 0px;
  background: rgba(55, 55, 55, 0.3);
  border-radius: 0 0 7px 7px;
  clip-path: ellipse(180% 100% at 70.8% 100%);
  width: 100%;
}

.c-card-image-album__title {
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-card-image-album__desc {
  font-size: 12px;
  padding: 0;
  margin: 0;
  line-height: 1.4;
  height: 40px;
  overflow: hidden;
}

.c-card-image-album__meta-container {
  font-size: 12px;
  padding-top: 7px;
  border-top: 1px dashed #ccc;
}

/* states */
.c-card-image-album:hover {
  color: #ccc;
}

.c-card-image-album:hover .c-card-image-album__info-container {
  cursor: pointer;
  color: #fff;
  background-color: rgba(55, 55, 55, 0.7);
}






/*================
    card-aside
==================*/
.c-card-aside {
  transition: all 0.3s ease-in;
}

.c-card-aside:hover {
  box-shadow: 2px 3px 10px rgba(55, 55, 55, 0.3);
}

.c-card-aside__link {
  text-decoration: none;
  color: var(--primary-color);
}

.c-card-aside__link:hover {
  text-decoration: none;
}

.c-card-aside__link:active {
  text-decoration: none;
}

.c-card-aside__title {
  font-size: 1em;
}

/* ================
      card music
==================== */
.c-card-music {
  position: relative;
  background: #fff;
  overflow: hidden;
  position: relative;
  border-radius: 7px;
  max-width: 320px;
  width: 100%;
  -webkit-box-shadow: -3px 20px 46px -20px rgba(0, 0, 0, 0.22);
  -moz-box-shadow: -3px 20px 46px -20px rgba(0, 0, 0, 0.22);
  box-shadow: -3px 20px 46px -20px rgba(0, 0, 0, 0.22);

}

/* c-card-music states - playing */
.c-card-music--playing {
  /* box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.45); */
}

.c-card-music__image {
  background: url("") no-repeat 75%;
  background-size: cover;
  width: 100%;
}

.c-card-music__title {
  padding: 10px 10px 0 10px;
  font-size: 16px;
  color: var(--primary-color);
  margin: 0;
}

.c-card-music__title-icon {
  background-color: inherit;
}

.c-card-music__title-caption {
  white-space: nowrap;
  /*overflow: hidden;
    text-overflow: ellipsis; */
}

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

  100% {
    -moz-transform: translateX(-100%);
  }
}

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

  100% {
    -webkit-transform: translateX(-100%);
  }
}

@keyframes scroll-left {
  0% {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }

  100% {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

/* music info */
.c-card-music__music-info {}

.c-card-music__artist {
  text-align: center;
  display: inline-block;
  color: #fff;
  border-radius: 7px;
  margin-bottom: 7px;
  font-size: 14px;
  border: 1px dashed var(--primary-color);
  color: var(--primary-color);
}

.c-card-music__category {
  text-align: center;
  display: inline-block;
  font-size: 14px;

  color: #fff;
  border-radius: 7px;
  margin-bottom: 7px;
  border: 1px dashed var(--primary-color);
  color: var(--primary-color);
}

/* metadata */
.c-card-music__metadata {
  padding: 10px;
  text-align: center;
  background: var(--primary-color);
  color: #fff;
  font-size: 14px;
}

.c-card-music__metadata-download {}

.c-card-music__metadata-date {}

/* action-bar */
.c-card-music__action-bar {
  padding: 10px;
  font-size: 1em;
  text-align: center;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  justify-content: space-around;
  clip-path: ellipse(129% 100% at 61.85% 100%);
  background: var(--primary-color-50);
}

/* music buttons */
.c-card-music__btn-play,
.c-card-music__btn-stop,
.c-card-music__btn-pause,
.c-card-music__btn-download {
  /* display: inline-block; */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: teal;
  background: #fff;
  cursor: pointer;
  border-radius: 7px;
  border-radius: 40%;
  width: 40px;
  height: 40px;
  font-size: 20px;
  margin-bottom: 7px;
  /* border:1px solid var(--primary-color); */
}

.c-card-music__btn-play:hover,
.c-card-music__btn-stop:hover,
.c-card-music__btn-pause:hover,
.c-card-music__btn-download:hover {
  text-decoration: none;
  color: #fff;
  background: var(--primary-color);
}

.c-card-music__btn-play {}

.c-card-music__btn-pause {
  display: none;
}

.c-card-music__btn-stop {
  visibility: hidden;
  color: red;
}

.c-card-music__btn-download {}

/*=================
    card - singer
==================*/

.c-card-singer {
  padding: 20px 10px;
  background-color: #eeeeee;
  border-radius: 7px;
  max-width: 320px;
  width: 100%;
  color: #333;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.c-card-singer__profile-image {
  width: 50px;
  height: 50px;
  display: block;
  margin-bottom: 0 auto 20px auto;
  justify-self: center;
  align-self: center;
  border-radius: 50%;
}

.c-card-singer:hover {
  color: #333;
  text-decoration: none;
}

.c-card-singer__fullname {
  margin: 20px 0;
  font-size: 0.8em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-card-singer__info {
  font-size: 14px;
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
  .c-card-singer__profile-image {
    width: 100px;
    height: 100px;
  }

  .c-card-singer__fullname {
    font-size: 0.9em;
  }
}

/*  Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {}

/*  Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/*  Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .c-card-singer__profile-image {
    width: 170px;
    height: 170px;
  }

  .c-card-singer__fullname {
    font-size: 1em;
  }
}

/*======================
    card - photographer
=======================*/
.c-card-photographer {
  padding: 20px 10px;
  background-color: #eeeeee;
  border-radius: 7px;
  max-width: 320px;
  width: 100%;
  color: #333;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.c-card-photographer__profile-image {
  width: 50px;
  height: 50px;
  display: block;
  margin-bottom: 0 auto 20px auto;
  justify-self: center;
  align-self: center;
  border-radius: 50%;
}

.c-card-photographer:hover {
  color: #333;
  text-decoration: none;
}

.c-card-photographer__fullname {
  margin: 20px 0;
  font-size: 0.8em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-card-photographer__info {
  font-size: 14px;
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
  .c-card-photographer__profile-image {
    width: 100px;
    height: 100px;
  }

  .c-card-photographer__fullname {
    font-size: 0.9em;
  }
}

/*  Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {}

/*  Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/*  Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .c-card-photographer__profile-image {
    width: 170px;
    height: 170px;
  }

  .c-card-photographer__fullname {
    font-size: 1em;
  }
}

/*=================
    card - image
==================*/
.c-card-image {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 7px;
  width: 100%;
  max-width: 320px;
  height: 240px;
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  transition: all 0.2s ease-in-out;
  -webkit-box-shadow: -3px 20px 46px -20px rgba(0, 0, 0, 0.22);
  -moz-box-shadow: -3px 20px 46px -20px rgba(0, 0, 0, 0.22);
  box-shadow: -3px 20px 46px -20px rgba(0, 0, 0, 0.22);
  text-decoration: none;
  color: var(--primary-color);
}


.c-card-image__info {
  padding: 10px;
  color: rgb(36, 36, 36);
  background: #fff;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  border-radius: 0 0 7px 7px;
}

.c-card-image__image-title {
  font-size: 12px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
}

.c-card-image__photographer {
  background-color: #fff;
  display: flex;
  /* justify-content: space-around; */
  align-items: center;
  padding: 10px;
  /* position: absolute; */
  visibility: hidden;
  border-bottom: 1px dashed #777;
  transition: all 0.2s ease-in-out;
}

.c-card-image__photographer__info {
  padding: 10px;
  display: flex;
}

.c-card-image__photographer-fullname {
  font-weight: bold;
}

.c-card-image__photographer img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  object-position: center;
  object-fit: cover;
}

.c-card-image__photographer p {
  color: #a1b2bc;
  font-size: 10px;
  margin: 0px;
}

.c-card-image__photographer p b {
  font-style: italic;
}

.c-card-image:hover {
  cursor: pointer;
  text-decoration: none;
  color: var(--primary-color);
  transform: scale(1.01);
}

.c-card-image:hover .c-card-image__photographer,
.c-card-image:hover .c-card-image__info {
  visibility: visible;
  transition: all 100ms ease-in-out;
}

/*=================
    breadcurmb
==================*/
.c-breadcrumb {
  /* background-color: var(--primary-color-50); */
  border-radius: 7px;
}

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

.c-breadcrumb-item.active {
  color: gray;
  /* background-color: var(--primary-color) !important; */
}

/*==================
      pagination
====================*/
.c-pagination {}

.c-pagination__link {
  color: var(--primary-color);
}

.c-pagination__link:hover {
  color: #fff;
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.c-pagination__item.active .c-pagination__link {
  color: #fff;
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
}



/*================
    CARD Book
=================*/

.c-card-book {
  max-width: 300px;
  width: 100%;
  /* height: 330px; */
  /* max-height: 330px; */
  border-radius: 7px;
  position: relative;
  /* background-repeat: no-repeat;
  background-position: center;
  background-size: cover; */
}

.c-card-book__cover {
  display: block;
  margin: 10px auto;
  max-width: 233px;
  width: 100%;
  border-radius: 7px;
  box-shadow: -3px 20px 20px -20px rgba(0, 0, 0, 0.22);


}

.c-card-book__info-container {
  /* position: absolute; */
  padding: 10px;
  bottom: 0px;
  /* background-color: rgba(55, 55, 55, 0.432); */
  border-radius: 0 0 7px 7px;
  /* clip-path: ellipse(180% 100% at 70.8% 100%); */
  width: 100%;
  margin: 0 auto;
}

.c-card-book__title {
  margin-top: 10px;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--primary-color);

}

.c-card-book__desc {
  font-size: 14px;
  padding: 0;
  margin: 0;
  line-height: 1.4;
  color: #333;
}

.c-card-book__meta-container {
  font-size: 12px;
  margin-top: 10px;
  padding-top: 7px;
  border-top: 1px dashed #ccc;
}

/* states */
.c-card-book:hover {
  text-decoration: none;
}

.c-card-book:hover .c-card-book__info-container {
  opacity: 1;
  cursor: pointer;
  color: #333;

  /* background-color: rgba(55, 55, 55, 0.7); */
}

@media (min-width: 768px) {
  .c-card-book__cover {}
}



/*================
 CARD Encyclopedia
=================*/

.c-card-encyclopedia {
  max-width: 470px;
  width: 100%;
  height: 200px;
  max-height: 200px;
  border-radius: 7px;
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #ccc;
}

.c-card-encyclopedia__cover {
  position: absolute;
  width: 100% !important;
  top: 0;
  left: 0;
}

.c-card-encyclopedia__info-container {
  position: absolute;
  padding: 10px;
  bottom: 0px;
  opacity: 0.9;
  background-color: rgba(55, 55, 55, 0.7);
  border-radius: 0 0 7px 7px;
  clip-path: ellipse(180% 100% at 70.8% 100%);
  width: 100%;
}

.c-card-encyclopedia__title {
  margin-top: 10px;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-card-encyclopedia__desc {
  font-size: 14px;
  padding: 0;
  margin: 0;
  line-height: 1.4;
}

.c-card-encyclopedia__meta-container {
  font-size: 12px;
  margin-top: 10px;
  padding-top: 7px;
  border-top: 1px dashed #ccc;
}

/* states */
.c-card-encyclopedia:hover {
  color: #ccc;
}

.c-card-encyclopedia:hover .c-card-encyclopedia__info-container {
  opacity: 1;
  cursor: pointer;
  color: #fff;
  background-color: rgba(55, 55, 55, 0.7);
}


/*================
 CARD Magazine
=================*/

.c-card-magazine {
  max-width: 300px;
  width: 100%;
  border-radius: 7px;
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

}

.c-card-magazine__cover {
  display: block;
  margin: 10px auto;
  max-width: 233px;
  width: 100%;
  border-radius: 7px;
  box-shadow: -3px 20px 20px -20px rgba(0, 0, 0, 0.22);

}

.c-card-magazine__info-container {
  padding: 10px;
  bottom: 0px;
  /* background-color: rgba(55, 55, 55, 0.883); */
  border-radius: 0 0 7px 7px;
  /* clip-path: ellipse(180% 100% at 70.8% 100%); */
  width: 100%;
  margin: 0 auto;
  color: #333;
}

.c-card-magazine__title {
  margin-top: 10px;
  font-size: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--primary-color);
}

.c-card-magazine__desc {
  font-size: 14px;
  padding: 0;
  margin: 0;
  line-height: 1.4;
  color: #333;
}

.c-card-magazine__meta-container {
  font-size: 12px;
  margin-top: 10px;
  padding-top: 7px;
  border-top: 1px dashed #ccc;
}

/* states */
.c-card-magazine:hover {
  color: #333;
  text-decoration: none;
}

.c-card-magazine:hover .c-card-magazine__info-container {
  cursor: pointer;
}



/*==================
  CARD RESEARCH
====================*/

.c-card-research {
  width: 100%;
  max-width: 300px;
  width: 100%;
  border-radius: 7px;
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-decoration: none;
}

.c-card-research__inner-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.c-card-research__cover {
  display: block;
  margin: 10px auto;
  max-width: 233px;
  width: 100%;
  border-radius: 7px;
  box-shadow: -3px 20px 20px -20px rgba(0, 0, 0, 0.22);

}


.c-card-research__info-container {
  /* background-color: rgba(55, 55, 55, 0.883); */
  /* background-color: var(--primary-color); */
  border-radius: 0 0 7px 7px;
  padding: 10px;
  /* clip-path: ellipse(180% 100% at 70.8% 100%); */
  width: 100%;
  color: #333;
}

.c-card-research__title {
  /* border-top: 1px dashed #ccc; */
  padding-top: 10px;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--primary-color);
}

.c-card-research__desc {
  font-size: 14px;
  padding: 0;
  margin: 0;
  line-height: 1.4;
}

.c-card-research__meta-container {
  font-size: 12px;
  margin-top: 10px;
  padding-top: 7px;
  border-top: 1px dashed #ccc;
  color: #6c757d !important;
}

/* states */
.c-card-research:hover {
  text-decoration: none;
}

.c-card-research:hover .c-card-research__info-container {
  opacity: 1;
  cursor: pointer;
}

/* Responsive */
@media (min-width: 768px) {
  .c-card-research-cover {
    min-height: 333px;
  }
}

/*==================
  CARD AD
====================*/

.c-card-ad {
  max-width: 470px;
  width: 100%;
  /* height: 200px; */
  border-radius: 7px;
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #ccc;
  padding: 4px;
  -webkit-box-shadow: -3px 20px 46px -20px rgba(0, 0, 0, 0.22);
  -moz-box-shadow: -3px 20px 46px -20px rgba(0, 0, 0, 0.22);
  box-shadow: -3px 20px 46px -20px rgba(0, 0, 0, 0.22);
}


.c-card-ad__cover {
  height: 180px;
  width: 100%;
}

.c-card-ad__info-container {
  /* position: absolute; */
  padding: 10px;
  bottom: 0px;
  opacity: 0.9;
  background-color: rgba(255, 255, 255, 0.924);
  border-radius: 0 0 7px 7px;
  /* clip-path: ellipse(180% 100% at 70.8% 100%); */
  width: 100%;
}

.c-card-ad__title {
  margin-top: 10px;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--primary-color);
}

.c-card-ad__desc {
  font-size: 14px;
  padding: 0;
  margin: 0;
  line-height: 1.4;
}

.c-card-ad__meta-container {
  font-size: 12px;
  margin-top: 10px;
  padding-top: 7px;
  border-top: 1px dashed #ccc;
}

/* states */
.c-card-ad:hover {
  color: #ccc;
  text-decoration: none;
}

.c-card-ad:hover .c-card-ad__info-container {
  opacity: 1;
  cursor: pointer;
  color: #fff;
  /* background-color: rgba(55, 55, 55, 0.7); */
}


/*=================
  CARD Missing
===================*/
.c-card-missing {
  padding: 10px;
  border-radius: 7px;
  width: 100%;
  max-width: 320px;
  border: 1px solid #777;
  background-color: #fefefe;
}

.c-card-missing__inner-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.c-card-missing__action-container {
  display: flex;
  justify-content: center;
  /* align-items: center; */
}

.c-card-missing__action-call {
  font-size: 28px;
  color: darkslategray;

}

.c-card-missing__action-call:hover {
  color: darkgreen;

}

.c-card-missing__missing-type {
  color: var(--primary-color);
  font-size: 14px;
  font-weight: bold;
}

.c-card-missing__missing-name {
  padding: 0 10px;
}

.c-card-missing__issuer-title {
  color: var(--primary-color);
  font-size: 14px;
  font-weight: bold;

}

.c-card-missing__founding-date {
  color: var(--primary-color);
  font-size: 14px;
  font-weight: bold;

}

.c-card-missing__issuer {
  padding: 0 10px;
  font-size: 14px;

}

.c-card-missing__meta-container {
  font-size: 12px;
  color: #777;
  display: flex;
  margin-top: 20px;
  flex-direction: row;
  justify-content: space-between;
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  .c-card-missing__issuer {
    font-size: 14px;
  }
}


/*================
  CARD Trip
=================*/

.c-card-trip {
  position: relative;
  width: 100%;
  /* max-width:300px; */
  min-height: 300px;
  /* border-radius: 7px; */
  user-select: none !important;
  background-color: #fefefe;
  background-size: cover;
  background-position: center;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
    rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
  border-radius: 7px;
}

.c-card-trip__inner-wrapper {

  transition: opacity 500ms;
  opacity: 1;
}

.c-card-trip__title {
  font-size: 1em;
  padding: 14px;

  color: var(--primary-color);
  border-bottom: 1px dashed var(--primary-color);
  margin-bottom: 10px;
  background: #fefefe;

  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.c-card-trip__content-container {
  padding: 10px;
  border-bottom: 1px dashed var(--primary-color);
}

.c-card-trip__destination-title {
  font-size: 14px;
  font-weight: bold;
  color: var(--primary-color);
}

.c-card-trip__destination-title__icon {
  padding: 0 5px;
}

.c-card-trip__destination,
.c-card-trip__price {
  font-size: 14px;
  margin-bottom: 10px;
  padding: 0 24px;
}

.c-card-trip__action-container {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
  background: #fefefe;
}

.c-card-trip__action-call {
  font-size: 20px;
  color: green;
  cursor: pointer;

}

.c-card-trip__action-call:hover {
  color: darkgreen;
}

.c-card-trip__action-show-info {
  font-size: 18px;
  color: var(--primary-color);
  cursor: pointer;

}

.c-card-trip__action-show-info:hover {
  color: var(--primary-color);
}

.c-card-trip__back-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(214, 214, 214);
  visibility: hidden;
  transition: opacity 500ms ease-in-out;
  opacity: 0;
  background-color: var(--primary-color);
}

.c-card-trip.show .c-card-trip__inner-wrapper {
  opacity: 0;
}

.c-card-trip.show .c-card-trip__back-face {
  visibility: visible;
  opacity: 1;

}

/*================
      Stores
==================*/
.c-card-engraving-product {
  max-width: 300px;
  width: 100%;
  text-decoration: none;
  color: #777;
  position: relative;
  border-radius: 7px;
  background-color: #fefefe;
  transition: all 200ms ease-in-out;
  box-shadow: -3px 20px 46px -20px rgba(0, 0, 0, 0.22);


}

.c-card-engraving-product__title {
  padding: 10px 10px;
  margin: 5px;
  font-size: 1em;
  color: var(--primary-color);
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

.c-card-engraving-product__image {

  width: 100%;
  display: block;
  margin: 0 auto;
}

.c-card-engraving-product__detials {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 10px;
  align-items: center;
  justify-content: flex-start;
}

.c-card-engraving-product__button {
  font-size: 14px;
  padding: 10px 20px;
  text-align: center;
}

.card-engraving-product__price,
.card-engraving-product__work-type,
.card-engraving-product__type {
  /* position:absolute;
  bottom:50px;
  right:0px; */
  font-size: 0.7em;
  padding: 2px 10px;
  color: var(--primary-color);
  border-radius: 4px;
  border: 1px solid var(--primary-color);
  margin: 2px;
}

.card-engraving-product__price__number {}

.card-engraving-product__price__currency {}

.c-card-engraving-product:hover {
  text-decoration: none;
  color: var(--primary-color);
}

.c-card-engraving-product:hover {
  box-shadow: -3px 10px 26px -10px rgba(0, 0, 0, 0.562);

}

.c-card-engraving-product__meta-container {
  font-size: 12px;
  color: #777;
  display: flex;
  margin-top: 20px;
  flex-direction: row;
  justify-content: space-between;
  padding: 10px;
  border-top: 1px dashed #777;
}


/*================
      panel
==================*/
.c-panel {}

.c-panel__title {
  font-size: 20px;
  /* padding: 40px 20px; */
  /* background-color: var(--primary-color); */
  color: var(--primary-color);
  border-bottom: 5px solid var(--primary-color);
  /* border-radius: 20px 0 10px 0 ; */
}

.c-panel__body {
  /* padding: 15px; */
}

@media (min-width: 768px) {
  .c-panel__title {
    padding: 25px 20px;
  }
}

/* === carousels === */

.c-carousel-image {
  width: 100%;
  max-width: 680px;
}

@media (min-width: 768px) {
  .c-carousel-image {
    height: auto;
  }
}

/*========================
    post project
==========================*/
.c-post-project {}

.c-post-project__title {
  color: var(--primary-color);
}

.c-post-project__image {}

.c-post-project__content {
  line-height: 2;
  text-align: justify;
}

.c-post-project__metadata-views {
  color: var(--primary-color);
}

.c-post-project__metadata-date {
  color: var(--primary-color);
}

.c-post-project__metadata-status {
  color: var(--primary-color);
}

/*=====================
      post news
=======================*/
.c-post-news {}

.c-post-news__title {
  color: var(--primary-color);
}

.c-post-news__content {
  line-height: 2;
  text-align: justify;
}

.c-post-news__metadata-views {
  color: var(--primary-color);
}

.c-post-news__metadata-date {
  color: var(--primary-color);
}

.c-post-news__metadata-status {
  color: var(--primary-color);
}

/*==== post article ====*/
.c-post-article {}

.c-post-article__title {
  background: #fff;
  color: var(--primary-color);
}

.c-post-article__content {
  line-height: 2;
}

.c-post-article__metadata-views {
  color: var(--primary-color);
}

.c-post-article__metadata-date {
  color: var(--primary-color);
}

.c-post-article__metadata-status {
  color: var(--primary-color);
}

.c-post-article__metadata-author {
  color: var(--primary-color);
}

/*==== post flag ====*/
.c-post-flag {}

.c-post-flag__title {
  background: #fff;
  color: var(--primary-color);
}

.c-post-flag__image {}

.c-post-flag__content {
  line-height: 2;
  text-align: justify;
}

.c-post-flag__action-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.c-post-flag__metadata {}

.c-post-flag__metadata-views {
  color: var(--primary-color);
}

.c-post-flag__metadata-date {
  color: var(--primary-color);
}

@media (min-width: 768px) {
  .c-post-flag__action-bar {
    justify-content: start;
  }
}

.c-no-result {
  padding: 50px;
  font-size: 24px;
  display: block;
  width: 100%;
  background: var(--primary-color);
  color: #fff;
}

/**
        c-site-copyright
**/

.c-site-copyright {
  color: #fff;
}

/**
        c-social-media-menu
**/
.c-social-media-menu {}

.c-social-media-menu__item {
  color: #fff;
}

.c-social-media-menu__item:hover {
  color: lightgray;
}

/*=============================
==============================
    Swiper JS custom style
==============================
==============================*/
.swiper {
  width: 100%;
  height: 100%;
  padding: 10px;
}

.swiper-outer-wrapper {
  position: relative;
  PADDING: 10PX;
}

.swiper-slide {
  font-size: 18px;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  align-self: start;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-wrapper {
  padding-bottom: 50px;
}

.swiper-button-next::after {
  font-size: 25px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 50%;
  background-color: rgba(50, 50, 50, 0.2);
  color: #fff;
}

.swiper-button-prev::after {
  font-size: 25px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 50%;
  background-color: rgba(50, 50, 50, 0.2);
  color: #fff;
}

.swiper-button-next {
  margin-top: 0px;
  position: absolute;
  top: 50%;
  right: -10px;
  width: 45px;
  height: 45px;
  transform: translateY(-50%);
  color: var(--primary-color);
}

.swiper-button-prev {
  position: absolute;
  top: 50%;
  left: -10px;
  width: 45px;
  height: 45px;
  transform: translateY(-50%);
  color: var(--primary-color);
  margin-top: 0px;
}

/* swiper - pagination */
.swiper-pagination-bullet-active {
  background-color: var(--primary-color);
}

.swiper-slide.swiper-slide-active {
  transform: scale(1);
}

/*-----------------
Latest Images Home
------------------- */
#latest-images .swiper-wrapper.swiper-slide {
  transition: all 100ms linear;
  transform: scale(0.9);
}



/*=============================
==============================
    Swiper JS custom style
==============================
==============================*/

/*=============
  CARD - VIDEO
  ============*/

.c-card-video {
  background-color: #fefefe;
  border-radius: 7px;
  position: relative;
  width: 100%;
  max-width: 320px;
  -webkit-box-shadow: -3px 20px 46px -20px rgba(0, 0, 0, 0.22);
  -moz-box-shadow: -3px 20px 46px -20px rgba(0, 0, 0, 0.22);
  box-shadow: -3px 20px 46px -20px rgba(0, 0, 0, 0.22);
  text-decoration: none;
}

.c-card-video__video-container {
  color: #fff;
  border-radius: 7px;
}

.c-card-video__iframe {
  border-radius: 7px;
}

.c-card-video__info-container {
  padding: 12px;
}

.c-card-video__title {
  padding: 0 10px;
  margin: 0 0 10px 0;
  font-size: 0.9em;
  font-weight: bold;
  line-height: 1.5em;
  height: 3em;
  color: var(--primary-color);
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-card-video__desc {
  margin: 0 0 20px 0;
  font-size: 0.8em;
  padding: 10px;
  line-height: 1.2em;
  height: 3em;
  overflow: hidden;
  /* white-space: nowrap; */
  color: #333;
  text-overflow: ellipsis;
}

.c-card-video__meta-container {
  color: rgb(36, 36, 36);
  background: #fff;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  border-radius: 0 0 7px 7px;
}

.c-card-video:hover {
  text-decoration: none;
  cursor: pointer;
}

.c-card-video__card-icon {
  display: block;
  padding: 5px;
  position: absolute;
  border-radius: 7px;
  font-size: 12px;
  left: 0px;
  top: 0px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.801);
  opacity: 0.2;
}


/*================
    Site Sections
=================*/
#site-header {
  position: relative;
}

@media all and (min-width: 1200px) {
  #site-header {
    min-height: calc(100vh - 50px);
  }
}

#site-header:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 90%);
  width: 100%;
  height: 6em;
}


/*================

    Page Layouts
=================*/
.page-wrapper {}

/*=========================
    Custom Bootstrap Modal (fullscreen)
==========================*/
.modal.modal-fullscreen .modal-dialog {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  max-width: none;
}

.modal.modal-fullscreen .modal-content {
  height: auto;
  height: 100vh;
  border-radius: 0;
  border: none;
}

.modal.modal-fullscreen .modal-body {
  overflow-y: auto;
}

/* Remove right-padding */
.modal.fade.modal-fullscreen.show {
  padding-right: 0px !important;
}