/* 
  GENERAL STYLE
  -------------------------------------
*/
@font-face {
  font-family: uniqueLight;
  src: url(../Fonts/GE-SS-Unique-Light.otf);
}

@font-face {
  font-family: uniqueBold;
  src: url(../Fonts/GE-SS-Unique-Bold.otf);
}

@font-face {
  font-family: HelveticaNeue;
  src: url(../Fonts/HelveticaNeue_2.ttf);
}

@font-face {
  font-family: DroidArabicKufi;
  src: url(../Fonts/Droid.Arabic.Kuff.ttf);
}

:root {
  --white: #fff;
  --light-grey: #F0F0F0;
  --light-grey-v2: #C4C4C4;
  --medium-grey: #d9d5d5;
  --shadow-grey: #aaa;
  --box-grey: #F2F2F2;
  --text-grey: #828282;
  --light-box-grey: rgba(148, 140, 92, 0.1);
  --border-grey: #BDBDBD;
  --pipe-grey: rgba(148, 140, 92, 0.25);
  --white-green: #E8F0ED;
  --light-green: #74BBA1;
  --primary-green: #0C8C63;
  --medium-green: #0B8C5F;
  --custom-green: #01784A;
  --medium-gold: #9E8D59;
  --custom-brown: rgb(158, 141, 89);
  --custom-blue: #009ACE;
  --light-blue: #64CCC9;
  --custom-brown: #DC582A;
  --custom-purple: #753BBD;
  --red-purple: #960051;
  --custom-yellow: #F0B323;
  /* Fonts */
  --font-family-inter: "Inter", "sans-serif";
  --font-size-sm-10: 1rem;
  --font-size-sm-12: 1.2rem;
  --font-size-md-14: 1.4rem;
  --font-size-md-16: 1.6rem;
  --font-size-lg-18: 1.8rem;
  --font-size-lg-20: 2rem;
  --font-size-xl-24: 2.4rem;
  --font-size-xl-32: 3.2rem;
  --font-size-xl-48: 4.8rem;
  --font-size-xl-64: 6.4rem; 
  /* Scaling fonts based on screen width from 375px to 1300px */
  --responsive-font-size-sm-8: clamp(0.6rem, 0.718925rem + 0.2162vw, 0.8rem);
  --responsive-font-size-sm-9: clamp(0.7rem, 0.718925rem + 0.2162vw, 0.9rem);
  --responsive-font-size-sm-10: clamp(0.8rem, 0.718925rem + 0.2162vw, 1rem);
  --responsive-font-size-sm-12: clamp(0.9rem, 0.7783875rem + 0.3243vw, 1.2rem);
  --responsive-font-size-md-14: clamp(1rem, 0.83785rem + 0.4324vw, 1.4rem);
  --responsive-font-size-md-16: clamp(1.1rem, 0.8973125rem + 0.5405vw , 1.6rem);
  --responsive-font-size-lg-18: clamp(1.2rem, 0.956775rem + 0.6486vw, 1.8rem);
  --responsive-font-size-lg-20: clamp(1.4rem, 1.156775rem + 0.6486vw, 2rem);
  --responsive-font-size-xl-24: clamp(1.6rem, 1.2757rem + 0.8648vw, 2.4rem);
  --responsive-font-size-xl-28: clamp(1.7rem, 1.2757rem + 0.8648vw, 2.8rem);
  --responsive-font-size-xl-29: clamp(1.7rem, 1.2757rem + 1.0vw, 2.9rem);
  --responsive-font-size-xl-30: clamp(1.8rem, 1.2324375rem + 1.5135vw, 3rem);
  --responsive-font-size-xl-32: clamp(1.8rem, 1.2324375rem + 1.5135vw, 3.2rem);
  --responsive-font-size-xl-38: clamp(1.9rem, 2.71vw + 0.54rem, 3.8rem);
  --responsive-font-size-xl-40: clamp(2rem, 2.86vw + 0.57rem, 4rem);
  --responsive-font-size-xl-48: clamp(2.4rem, 3.43vw + 0.69rem, 4.8rem);
  --responsive-font-size-xl-50: clamp(2.5rem, 3.57vw + 0.71rem, 5rem);
  --responsive-font-size-xl-52: clamp(2.6rem, 3.71vw + 0.74rem, 5.2rem);
  --responsive-font-size-xl-64: clamp(3.2rem, 1.9028rem + 3.459vw, 6.4rem);
}

html { font-size: 62.5%; }

body {
  font-family: uniqueLight;
  /* background: url(../images/dots.svg) center center no-repeat; */
  /* background-size: cover; */ 
}

.number {
  font-family: system-ui;
  font-weight: 600;
}

.responsive {
  width: 100%;
  height: 100%;
}

.cursor-pointer {
  cursor: pointer;
}

.font-small-10 {
  font-size: var(--font-size-sm-10);
}

.font-small-12 {
  font-size: var(--font-size-sm-12);
}

.font-medium-14 {
  font-size: var(--font-size-md-14);
}

.font-medium-16 {
  font-size: var(--font-size-md-16);
}

.font-large-18 {
  font-size: var(--font-size-lg-18);
}

.font-large-20 {
  font-size: var(--font-size-lg-20);
}

.font-larger-24 {
  font-size: var(--font-size-xl-24);
}

.font-larger-32 {
  font-size: var(--font-size-xl-32);
}

.font-larger-48 {
  font-size: var(--font-size-xl-48);
}

.font-larger-64 {
  font-size: var(--font-size-xl-64);
}

.font-small-10-responsive {
  font-size: var(--responsive-font-size-sm-10);
}

.font-small-12-responsive {
  font-size: var(--responsive-font-size-sm-12);
}

.font-medium-14-responsive {
  font-size: var(--responsive-font-size-md-14);
}

.font-medium-16-responsive {
  font-size: var(--responsive-font-size-md-16);
}

.font-large-18-responsive {
  font-size: var(--responsive-font-size-lg-18) !important;
}

.font-large-20-responsive {
  font-size: var(--responsive-font-size-lg-20) !important;
}

.font-larger-24-responsive {
  font-size: var(--responsive-font-size-xl-24);
}

.font-larger-28-responsive {
  font-size: var(--responsive-font-size-xl-28);
}

.font-larger-29-responsive {
  font-size: var(--responsive-font-size-xl-29);
}

.font-larger-30-responsive {
  font-size: var(--responsive-font-size-xl-30);
}

.font-larger-32-responsive {
  font-size: var(--responsive-font-size-xl-32);
}

.font-larger-38-responsive { 
  font-size: var(--responsive-font-size-xl-38);
}

.font-larger-40-responsive {
  font-size: var(--responsive-font-size-xl-40);
}

.font-larger-48-responsive {
  font-size: var(--responsive-font-size-xl-48);
}

.font-larger-50-responsive {
  font-size: var(--responsive-font-size-xl-50);
}

.font-larger-52-responsive {
  font-size: var(--responsive-font-size-xl-52);
}

.font-larger-64-responsive {
  font-size: var(--responsive-font-size-xl-64);
}

.light-grey-v2 {
  color: var(--light-grey-v2);
}

.light-green {
  color: var(--light-green);
}

.white-green {
  color: var(--white-green);
}

.text-green {
  color: var(--medium-green);
}

.text-primary-green {
  color: var(--primary-green);
}

.text-grey {
  color: var(--text-grey);
}

.text-brown {
  color: var(--custom-brown);
}

.bg-light-box-grey {
  background-color: var(--light-box-grey);
}

.custom-btn {
  padding: 0.7rem 4rem;
  font-size: var(--responsive-font-size-xl-24);
  border-radius: 13px;
}

.custom-btn:hover {
  background-color: var(--custom-green);
}

.custom-btn:active {
  background-color: var(--custom-green);
  transform: scale(0.98);
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .custom-btn {
    padding: 0.6rem 4rem;
  }
}

@media (max-width: 575.98px) {
  .custom-btn {
    padding: 0.6rem 2rem;
  }
}

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

.btn-grey {
  background-color: var(--light-grey);
  color: var(--medium-green);
}

.btn-grey:hover, .btn-grey.active {
  background-color: var(--primary-green);
  color: #fff;
}


.icon {
  position: absolute;
  top: -50px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  left: calc(50% - 50px);
  background: linear-gradient(150deg, var(--medium-grey), var(--light-grey)) padding-box, 
              linear-gradient(150deg, var(--light-grey), var(--medium-grey)) border-box;
  border: 4px solid transparent;
  color: var(--text-grey);
  filter: blur(0.4px) drop-shadow(0px 5px 12px var(--shadow-grey));
  box-shadow: inset 7px 7px 20px var(--shadow-grey);
  line-height: 2;
  z-index: 3;
}

.overlay {
  position: absolute;
  inset: 0;
  top: 0;
  z-index: 0;
  filter: drop-shadow(0 -54px 50px black);
  background-color: #11774f3d;
  opacity: .5;
}

.text-decoration-underline {
  text-decoration: underline;
}

.px-6 {
  padding-inline: 4rem;
}

@media (max-width: 575.98px) {
  .px-6 {
    padding-inline: 1rem;
  }
}

.gap-1 {
   gap: 0.5em;
}

.gap-2 {
  gap: 1em;
}

.gap-3 {
  gap: 2em;
}

.gap-4 {
  gap: 3em;
}

.gap-5 {
  gap: 4em;
}

.gap-6 {
  gap: 5em;
}

.gap-10 {
  gap: 10em;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .gap-10 {
    gap: 6em;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .gap-10 {
    gap: 3em;
  }
}

@media (max-width: 575.98px) {
  .gap-10 {
    gap: 1em;
  }
}

.rounded-1 {
  border-radius: 1em;
}

.rounded-2 {
  border-radius: 2em;
}

.rounded-3 {
  border-radius: 3em;
}

.rounded-4 {
  border-radius: 4em;
}

.rounded-top-right-8 {
  border-top-right-radius: 8px !important;
}

.rounded-bottom-right-8 {
  border-bottom-right-radius: 8px !important;
}

.rounded-top-left-8 {
  border-top-left-radius: 8px !important;
}

.rounded-bottom-left-8 {
  border-bottom-left-radius: 8px !important;
}

.rounded-top-right-0 {
  border-top-right-radius: 0px !important;
}

.rounded-bottom-right-0 {
  border-bottom-right-radius: 0px !important;
}

.rounded-top-left-0 {
  border-top-left-radius: 0px !important;
}

.rounded-bottom-left-0 {
  border-bottom-left-radius: 13px !important;
}

.form-control:focus {
  border-color: none;
  outline: 0;
  box-shadow: none;
}

/* select { */
  /* background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right transparent; */
  /* background: url('/images/down-arrow.svg') no-repeat right transparent;
  -webkit-appearance: none;
  background-position-x: 20px;
  color: var(--medium-green);
} */

/* 
  Event Details Section
  -------------------------------------
*/
.body-section {
  border-radius: 2em 2em 0 0;
  padding-bottom: 10em;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #body_section p.date svg,
  #body_section p.city svg {
    width: 21px;
    height: 21px;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  #body_section p.date svg,
  #body_section p.city svg {
    width: 21px;
    height: 19px;
  }
}

@media (max-width: 575.98px) {
  #body_section p.date svg,
  #body_section p.city svg {
    width: 21px;
    height: 15px;
  }
}

.body-section.month-events {
  padding-bottom: 10em !important;
}

.share-icon {
  background: var(--white-green);
  position: absolute;
  display: flex;
  width: 59px;
  height: 59px;
  top: 13px;
  left: 13px;
  border-radius: 13px;
  justify-content: center;
  align-items: center;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .share-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
  }

  .share-icon svg {
    width: 34px;
    height: 34px;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .share-icon {
    width: 45px;
    height: 45px;
    border-radius: 11px;
  }

  .share-icon svg {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 575.98px) {
  .share-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .share-icon svg {
    width: 25px;
    height: 25px;
  }
}

.share-icon:hover svg path {
  fill: var(--custom-green);
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

.title-and-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3em;
  padding-block: 7rem;
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .title-and-buttons {
    gap: 2em;
    padding-block: 5rem;
  }
  
}

@media (max-width: 575.98px) {
  .title-and-buttons {
    gap: 1em;
    padding-block: 4rem;
  }  
}

.title-and-buttons p {
  font-weight: 900;
}

#go_back {
  text-decoration: none;
  color: var(--text-grey);
}

#go_back:hover span {
  color: var(--medium-green);
}

.slick-initialized .slick-slide {
  border-radius: 13px;
}

.slick-dots li {
  width: unset;
  height: unset;
}

.slick-dots li.slick-active button {
  width: 78px;
  background-color: var(--custom-green);
}

.slick-dots li button {
  width: 39px;
  height: 9px;
  background-color: #D9D9D9;
  border-radius: 6px;
}

@media (max-width: 575.98px) {
  .slick-dots li.slick-active button {
    width: 60px;
  }

  .slick-dots li button {
    width: 30px;
    height: 6px;
    padding: 3px;
  }  
}

/*
  Style Calander (Month View)
  ------------------------------
*/
.fc .fc-scrollgrid {
  border-left-width: 0;
  border-top-width:   1px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  /* box-shadow: 0px -2px 5px rgb(0 0 0 / 12%); */
}

.fc .fc-col-header-cell-cushion {
  font-size: var(--responsive-font-size-lg-18);
  color: var(--border-grey);
  font-weight: 100;
  padding-block: 6px;
  color: #252525;
  text-decoration: none;
}

@media (max-width: 575.98px) {
  .fc .fc-col-header-cell-cushion {
    font-size: var(--responsive-font-size-md-14);
  }  
}

.fc .fc-daygrid-day-top {
  justify-content: center;
}

.fc .fc-daygrid-day-number {
  color: #000;
  font-weight: bold;
  font-size: var(--responsive-font-size-lg-18);
  padding: 0;
  margin-top: .5em;
}

.fc-theme-standard td, .fc-theme-standard th {
  border: none;
}

.fc .fc-scrollgrid table tbody tr {
  background-color: #F7F7F7;
  border-bottom: 4px solid #fff;
}

.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: var(--custom-green);
    border-radius: 50%;
}



/* 
  Style Filter
-----------------------------------
*/
.conferences {
  background-color: var(--custom-blue);
}

.conferences:hover {
  color: var(--custom-blue);
}

.forum {
  background-color: var(--custom-brown);
}

.forum:hover {
  color: var(--custom-brown);
}

.campaign {
  background-color: var(--custom-purple);
}

.campaign:hover {
  color: var(--custom-purple);
}

.gathering {
  background-color: var(--light-blue);
}

.gathering:hover {
  color: var(--light-blue);
}

.award {
  background-color: var(--red-purple);
}

.award:hover {
  color: var(--red-purple);
}

.world-day {
  background-color: var(--custom-yellow);
}

.world-day:hover {
  color: var(--custom-yellow);
}

a.fc-event {
  color: #fff;
  padding: .5em;
  cursor: pointer;
}

.fc-event-time, .fc-daygrid-event-dot {
  display: none;
}

.fc-event-title {
  font-size: var(--responsive-font-size-sm-12);
  text-align: right;
  white-space: normal;
  font-weight: 100 !important;
}

.filters {
  display: flex;
}

.filters .input-group .input-group-text {
  background-color: transparent;
}

.fc .fc-toolbar-title {
  text-align: center;
  font-size: var(--responsive-font-size-xl-32);
  font-family: system-ui;
  font-weight: 600;
}

.fc-toolbar-chunk {
  text-align: center;
}

.fc .fc-button-group {
  gap: 30em;
  top: -4em;
}

.fc .fc-button-group > .fc-button {
  border-radius: 50% !important;
  background-color: var(--white-green);
  border: none;
  width: 57px;
  aspect-ratio: 1;
}

@media (min-width: 650px) and (max-width: 767.98px) {
  .fc .fc-button-group {
    gap: 20em;
    top: -3.5em;
    margin-left: 0 !important;
  }

  .fc .fc-button-group > .fc-button {
    width: 48px;
  }
}

@media (min-width: 576px) and (max-width: 649.98px) {
  .fc .fc-button-group {
    top: -3em;
    gap: 17em;
    margin-left: 0 !important;
  }
  
  .fc .fc-button-group > .fc-button {
    width: 45px;
  }
}

@media (max-width: 575.98px) {
  .fc .fc-button-group {
    gap: 9em;
    top: -2.6em;
    margin-left: 0 !important;
  }
    
  .fc .fc-button-group > .fc-button {
    width: 35px;
  }
}

.fc .fc-button-primary:not(:disabled).fc-button-active, 
.fc .fc-button-primary:not(:disabled):active {
  background-color: var(--medium-green);
  border-color: var(--medium-green);
  color: #fff;
}

.fc .fc-button-primary:not(:disabled).fc-button-active span, 
.fc .fc-button-primary:not(:disabled):active span {
  color: #fff;
}

.fc .fc-button .fc-icon {
  font-size: 2.5em;
  color: var(--medium-green);
}

.city .filter-option-inner-inner::before {
  content: '';
  display: inline-block;
  background: url('/images/location-marker.svg') center no-repeat;
  width: 30px;
  height: 30px;
}

.event-type .filter-option-inner-inner::before {
  content: '';
  display: inline-block;
  background: url('/images/list.svg') center no-repeat;
  width: 30px;
  height: 30px;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .event-type .filter-option-inner-inner::before,
  .city .filter-option-inner-inner::before {
    height: 26px;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .event-type .filter-option-inner-inner::before,
  .city .filter-option-inner-inner::before {
    height: 24px;
  }
}

@media (max-width: 575.98px) {
  .event-type .filter-option-inner-inner::before,
  .city .filter-option-inner-inner::before {
    height: 22px;
  }
}

.bootstrap-select .dropdown-menu {
  border-radius: 13px;
  padding-inline: 5px;
  top: 4px;
  box-shadow: 0px 0px 5px #ddd;
  border: none;
}

.bootstrap-select .dropdown-menu li {
  text-align: start;
}

.dropdown-item.active, .dropdown-item:active, .special:hover {
  background-color: var(--white-green);
  color: var(--light-green);
  border-radius: 8px;
}

.special {
  padding-block: 0.7em;
  margin-block: 0.4em;
  background-color: #fff;
  color: #000;
  font-size: var(--responsive-font-size-lg-18);
}

.events-list {
  gap: 4em;
  direction: rtl;
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .events-list {
    gap: 1em;
  } 
}

@media (max-width: 575.98px) {
  .events-list {
    width: 30em;
    margin-left: 0 !important;
    gap: 1em;
    flex-wrap: wrap;
    justify-content: center;
  }   
}

.events-list .item {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-size: var(--responsive-font-size-lg-18);
}

.events-list .item::before {
  content: '';
  width: 10px;
  background-color: red;
  aspect-ratio: 1;
  border-radius: 50%;
}

.events-list .item.blue::before {  background-color: var(--custom-blue); }
.events-list .item.blue { color: var(--custom-blue); }

.events-list .item.brown::before {  background-color: var(--custom-brown); }
.events-list .item.brown { color: var(--custom-brown); }

.events-list .item.light-blue::before {  background-color: var(--light-blue); }
.events-list .item.light-blue { color: var(--light-blue); }

.events-list .item.purple::before {  background-color: var(--custom-purple); }
.events-list .item.purple { color: var(--custom-purple); }

.events-list .item.red-purple::before {  background-color: var(--red-purple); }
.events-list .item.red-purple { color: var(--red-purple); }

.events-list .item.custom-yellow::before {  background-color: var(--custom-yellow); }
.events-list .item.custom-yellow { color: var(--custom-yellow); }

.bootstrap-select>.dropdown-toggle {
  background: transparent;
  border: 1px solid #ced4da;
  border-radius: 8px;
  font-size: var(--responsive-font-size-lg-20);
}

.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
  text-align: start;
  color: var(--medium-green);
  display: flex;
  align-items: center;
  gap: 8px;
}


/* 
  Style Calander (Year View)
-----------------------------------
*/

.fc .fc-multimonth {
  border: none;
  gap: 5em;
  justify-content: space-between;
  padding-block: 10px;
}

.fc .fc-multimonth .fc-multimonth-month {
  border-radius: 18px;
  background-color: #F7F7F7;
  padding: 3.2em;
  margin-inline: auto;
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.2);
}

.fc .fc-multimonth-singlecol .fc-multimonth-header {
  background-color: #F7F7F7;
}

.fc .fc-multimonth-title {
  background: var(--medium-green);
  color: #fff;
  padding: .5em 0;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000;
}

.fc .fc-multimonth-title:hover {
  background: var(--custom-green);
}

.fc .fc-multimonth-title:active {
  box-shadow: -1px -1px 1px #000;
}

.year-events .fc .fc-col-header-cell-cushion {
  font-size: var(--responsive-font-size-sm-8);
  color: #333333;
}

.fc-multimonth-header-table {
  margin-block: 2em;
}

.fc .fc-multimonth-daygrid {
  background: transparent;
  display: inline-flex;
}

.year-events .fc .fc-daygrid-day-number {
  font-size: var(--responsive-font-size-sm-12);
}