@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
@import url(https://fonts.googleapis.com/earlyaccess/droidarabickufi.css);

:root {
  --header-height: 3.5rem;
  --first-color: rgb(255, 68, 0);
  --second-color:rgb(0, 131, 179);
  --third-color:rgb(167, 201, 54);

  --first-color-lighten: hsl(220, 68%, 97%);
  --title-color:black;
  /* --text-color: hsl(220, 12%, 45%); */
  --text-color: black;
  --body-color: rgb(250, 252, 255);
  --body-font: "Poppins", sans-serif;
  --normal-font-size: .838rem;
  --small-font-size: .713rem;
  --smaller-font-size: .65rem;
  --font-medium: 500;
  --font-semi-bold: 600;
  --z-tooltip: 10;
  --z-fixed: 100;
}
@media screen and (min-width: 1024px) {
  :root {
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
  }
}
::selection {
  background: var(--first-color);
  color: white;
}
::-webkit-scrollbar{
  width: .3rem;
  background: rgb(247, 246, 246);
  position: absolute;
}
::-webkit-scrollbar-thumb{    
  background:var(--first-color);
  border-radius: .5rem;
}
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
}
/* @keyframes slideBackground {
  0% { background-position: 0% 0%; }
  60% { background-position: 60% 0%; }
} */

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--text-color);
  color: var(--text-color);
  /* background:
    linear-gradient(217deg, rgba(241, 30, 30, 0.8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(4, 73, 134,0.8), rgba(0,255,0,0) 70.71%);
  background-size: 100% 100%;
  animation: slideBackground 10s linear infinite alternate;  */
  background-color: #9e8fb2;
  background-image: linear-gradient(315deg, #9e8fb2 0%, #a7acd9 74%);
  background-attachment: fixed; 
}

ul {
  list-style: none;
}
a {
  text-decoration: none;
}

.header {
  position: fixed;
  top: 0;
  left: 50%;
  width: 100%;
  background: var(--body-color);
  z-index: var(--z-fixed);
  transform: translate(-50%);
  /* box-shadow: 0 -5px 5px -5px #999;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px; */
}
.nav {
  height: var(--header-height);
  display: block;
}
.nav_data {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav_logo {
  display: inline-flex;
  align-items: center;
  column-gap: 0.25rem;
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
  transition: color 0.3s;
}
.nav_logo i {
  font-size: 1.25rem;
}
.nav_logo:hover {
  color: var(--first-color);
}
.nav_toggle {
  position: relative;
  width: 32px;
  height: 32px;
}
.nav_toggle-menu, .nav_toggle-close {
  font-size: 1.25rem;
  color: var(--title-color);
  position: absolute;
  display: grid;
  place-items: center;
  inset: 0;
  cursor: pointer;
  transition: opacity 0.1s, transform 0.4s;
}
.nav_toggle-close {
  opacity: 0;
}
.content{
  position: relative;
  background-color: var(--body-color);
  top: 20px;
}

.shadow-box{
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
@media screen and (max-width: 1400px) {
  .nav_menu {
    background-color: var(--body-color);
    position: absolute;
    left: 0;
    top: 2.5rem;
    width: 100%;
    height: calc(100vh - 3.5rem);
    overflow: auto;
    padding-block: 1.5rem 4rem;
    pointer-events: none;
    opacity: 0;
    transition: top 0.4s, opacity 0.3s;
  
  }
  .nav_menu::-webkit-scrollbar {
    width: 0.5rem;
  }
  .nav_menu::-webkit-scrollbar-thumb {
    background-color: hsl(220, 12%, 70%);
  }
  .nav_link::after,.active_link::after{
    display: none;
  }
  .content{
    position: relative;
    top: 0rem;
  }
  footer{
    margin-top: 0rem;
  }
}
.nav_link {
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.3s;
}
.show-menu {
  opacity: 1;
  top: 3.5rem;
  pointer-events: initial;
}
.show-icon .nav_toggle-menu {
  opacity: 0;
  transform: rotate(90deg);
}

.show-icon .nav_toggle-close {
  opacity: 1;
  transform: rotate(90deg);
}

.dropdown_button {
  cursor: pointer;
}
.dropdown_arrow {
  font-size: 1.5rem;
  font-weight: initial;
  transition: transform 0.4s;
}
.dropdown_content, .dropdown_group, .dropdown_list {
  display: grid;
}
.dropdown_container {
  background-color: var(--first-color-lighten);
  height: 0;
  overflow: hidden;
  transition: height 0.4s;
}
.dropdown_content {
  row-gap: 1.75rem;
}
.dropdown_group {
  padding-left: 2rem;
  row-gap: 0.5rem;
  width: 250px;
}
.dropdown_group:first-child {
  margin-top: 1.25rem;
}
.dropdown_group:last-child {
  margin-bottom: 1.25rem;
}
.dropdown_icon i {
  font-size: 1.25rem;
  color: var(--first-color);
}
.dropdown_title {
  font-size: var(--smaller-font-size);
  font-weight: var(--font-semi-bold);
  color: var(--text-color);
  transition: ease-in 0.3s;
}

.dropdown_title:hover,.nav_link:hover {
  color: var(--first-color);
}
.dropdown_title:hover {
  padding-left: 2px;
}

.show-dropdown .dropdown_arrow {
  transform: rotate(180deg);
}

@media screen and (max-width: 300px) {
  .dropdown_group {
    padding-left: 1.5rem;
  }
}
@media screen and (min-width: 1400px) {
  .nav {
    height: calc(var(--header-height) + 2rem);
    display: flex;
    justify-content: space-between;
  }
  .nav_toggle {
    display: none;
  }
  .nav_list {
    display: flex;
    column-gap: 0.8rem;
    height: 100%;
  }
  .nav li {
    display: flex;
  }
  .nav_link {
    padding: 0;
  }
  .nav_link:hover {
    background-color: initial;
  }
  .dropdown_button {
    column-gap: 0.25rem;
    pointer-events: none;
  }
  .dropdown_container {
    height: max-content;
    position: absolute;
    top: 6.5rem;
    background-color: var(--body-color);
    box-shadow: 0 6px 8px hsla(220, 68%, 12%, 0.05);
    pointer-events: none;
    opacity: 0;
    transition: top 0.4s, opacity 0.3s;
  }
  .dropdown_content {
    grid-template-columns: repeat(4, max-content);
    max-width: 1120px;
    margin-inline: auto;
  }
  .dropdown_group {
    padding: 2rem 4rem 2rem 0rem;
    align-content: baseline;
    row-gap: 1.25rem;

  }
  .dropdown_group:first-child, .dropdown_group:last-child {
    margin: 0;
  }
  .dropdown_icon {
    width: 60px;
    height: 60px;
    background-color: var(--first-color-lighten);
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-bottom: 1rem;
  }
  .dropdown_icon i {
    font-size: 2rem;
  }
  .dropdown_title {
    font-size: var(--small-font-size);
  }
  .dropdown_link:hover {
    color: var(--first-color);
  }
  .dropdown_item {
    cursor: pointer;
  }
  .dropdown_item:hover .dropdown_arrow {
    transform: rotate(180deg);
  }
  .dropdown_item:hover > .dropdown_container {
    top: 5.5rem;
    opacity: 1;
    pointer-events: initial;
    cursor: initial;
  }
}
@media screen and (min-width: 1152px) {
  .container {
    margin-inline: auto;
  }
}
.devider50::before{
  width: 50%;
  height: 3px;
  content: "";
  display: block;
  background: var(--second-color);
  margin: 2px auto;
}
.devider100::before{
  width: 100%;
  height: 3px;
  content: "";
  display: block;
  background: var(--text-color);
  margin: 2px auto;
}
.devider2::before{
  width: 100px;
  height: 3px;
  content: "";
  display: block;
  background: #0047AB;
  margin: 2px auto;
}
.devider3::before{
  width: 80px;
  height: 3px;
  content: "";
  display: block;
  background: #FF4500;
  margin: 2px auto;
}
.bg-container{
  background-color: var(--body-color);
}
#particles-js{
  position: fixed;
  left: 0;
  z-index: -1!important;
  width: max-content;
  height: 100vh;
  background-size: cover;
}
.text_red{
  color: #FF4500;
}
.text_green{
  color: #A6C935;
}
.text_dark_blue{
  color: #0047AB;
}
.bg_red{
  background-color: #FF4500;
}
.bg_green{
  background-color: #A6C935;
}
.custom-bg{
  background-color: var(--body-color);
}
.bg_dark_blue{
  background-color: #0047AB;
}
.hovered{
  position: relative;
  text-decoration: none;
  transition: 0.5s;
}
.hovered:hover{
  color: var(--first-color)!important;
}
.hovered:after{
  content: "";
  position: absolute;
  background-color: var(--first-color);
  height: 3px;
  width: 0;
  left: 0;
  bottom: -10px;
  transition: 0.5s;
}
.hovered:hover:after{
  width: 100%;
}
.active_link::after,.nav_link::after{
  content: "";
  position: absolute;
  background-color: var(--first-color);
  height: 3px;
  width: 40px;
  top: 61px;
  transition: 0.5s;
}
.nav_link::after{
  width: 0;
}
.nav_link:hover:after{
  width: 40px;
}
.active_link::after{
  content: "";
  position: absolute;
  background-color: var(--first-color);
  height: 3px;
  width: 40px;
  top: 61px;
  transition: 0.5s;
}
.active_link,.active_link .dropdown_button{
  color: var(--first-color)!important;;
}
.link-red{
  text-decoration: underline var(--first-color);
  color: var(--first-color)!important;
}
.text-black{
  color: black !important;
}
.bg-c-red {
  background: linear-gradient(45deg, #FF4500, #f05720);
}
iframe {
  width: 100%;
  height: 400px; /* Default height for small screens */
}
.underline-red{
  text-decoration: underline var(--first-color);
}
/* Adjustments for medium-sized screens */
@media (min-width: 768px) and (max-width: 991.98px) {
  iframe {
    height: 900px;
  }
}
/* Adjustments for large screens */
@media (min-width: 992px) {
  iframe {
    height: 1130px;
    width: 65%;
  }
}
.box-shadow{
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}
.text-4lines{
  overflow-y: auto;
}
.btn-linkedin{
  background-color: #0a66c2;
  color: white;
  border: 2px #0a66c2 solid;
  transition: 0.4s ease-in-out;
}
.btn-linkedin:hover{
  color: #0a66c2;
  background-color: white;
  border: 2px #0a66c2 solid;
}
.btn-email{
  background-color: var(--third-color);
  color: white;
  border: 2px var(--third-color) solid;
  transition: 0.4s ease-in-out;
}
.btn-email:hover{
  color: var(--third-color);
  background-color: white;
  border: 2px var(--third-color) solid;
}
.arabic_text{
  font-family: 'Droid Arabic Kufi', serif;
}
.custom_bg,table{
  background: rgba(255, 255, 255, 0.2)!important;
}
table{
  --bs-table-bg: rgba(255, 255, 255, 0.2)!important;
  padding: 20px;
  --bs-table-border-color: 0px white;
}

.dates_table{
  --bs-table-border-color: 2px solid white !important;
}

.committee_icons {
  position: relative;
  width: 32px;
  height: 32px;
}
.committee_icons_plus, .committee_icons_minus {
  font-size: 1.25rem;
  color: var(--title-color);
  position: absolute;
  display: grid;
  place-items: center;
  inset: 0;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.5s;
}
.committee_icons_minus {
  opacity: 0;
}
.show_committee_icon .committee_icons_plus {
  opacity: 0;
  transform: rotate(90deg);
}

.show_committee_icon .committee_icons_minus {
  opacity: 1;
  transform: rotate(90deg);
}

.form-shadow{
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.pointer-event{
  cursor: pointer;
}

/* Start of background images in homepage */
.hero {
  position: relative; /* Establish a stacking context */
  height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden; /* Hide the overflow caused by absolute positioning */
}



#background-container {
  background-image: url('../media/Slide1.JPG'); /* Initial background image */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: background-image 1s ease-in-out, opacity 1s ease-in-out; /* Transition for background-image and opacity */
  opacity: 1; /* Start with the container transparent */
}

.hero-section {
  position: relative;
  z-index: 1; /* Ensure the text is above the background images */
}
/* End of background images in homepage */
.swiper-pagination-bullet{
  background-color: var(--first-color);
  opacity: 1;
}
.swiper-pagination-bullet-active{
  background-color: var(--first-color);
}

.text-justify{
  text-align: justify;
}

.custom-border{
  border: var(--second-color) 3px solid;
}
.custom-border th,.custom-border td,.custom-border tr{
  border: var(--second-color) 3px solid;
}
.search-bar{
  background: rgba(255, 255, 255, 0.2)!important;
  border: none;
  padding: 10px;
}
.search-bar:focus{
  outline: none;
  box-shadow: none;
  border: 0px;
}
.clickable-div1 {
  background-color: rgba(241, 30, 30,0.8); 
  transition: background-color 0.5s ease; 
}
.clickable-div2 {
  background-color: rgba(4, 73, 134,0.8); 
  transition: background-color 0.5s ease; 
}
.clickable-div1:hover {
  background-color: rgba(241, 30, 30, 1);
  cursor: pointer;
}
.clickable-div2:hover {
  background-color: rgba(4, 73, 134, 1); 
  cursor: pointer;
}
.clickable-div1-img{
  position: absolute; top: 0; left: 0; height: 100%; z-index:0; opacity: 0.5;
  transition: opacity 0.5s ease; 
}
.clickable-div2-img{
  position: absolute; top: 0; right: 0; height: 100%; z-index:0; opacity: 0.5;
  transition: opacity 0.5s ease; 
}
.clickable-div1:hover .clickable-div1-img,.clickable-div2:hover .clickable-div2-img {
  opacity: 0;
}
/* Define keyframes for rotation */
  @keyframes rotate {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

.ri-loop-left-line {
    display: inline-block; 
    animation: rotate 2s linear infinite; 
}

.journal_imgs{
  height: 300px!important;
  width: 250px!important;
  margin-bottom: 20px;
}

#myTable {
  width: 100%;
  overflow-x: auto;
}
#myTable td {
  word-wrap: break-word;
}