:root {
    --mainColor: #6a961f;
    --secColor: #566ed3;
  }

*{
  -moz-box-sizing:border-box;
	box-sizing:border-box;
  margin: 0;
  direction: rtl;
  font-family: "Almarai", sans-serif;
  color: #000;
}
body {
  /* Fallback for browsers that don't support dvh */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.wrapper{
  width:100%;
	margin:0 auto;
	position:relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  
}
/* social media styles */
.mes-social-container{
  width: 100%;
  height: 40px;
  background: var(--mainColor);
  display: flex;
  justify-content: start;
  align-items: center;
}
.socialmedia-div{
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.socialmedia-link{
  text-decoration: none;
  margin: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.socialmedia-link .bi{
  font-size: 1.5em;
  color: #fff;
  transition: 0.3s ease-in-out;
}.socialmedia-link .bi:hover{
  color: #383838;
}
.header{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 40px;
  padding: 0 20px;
}
.logo a{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-size: 1.5em;
  padding: 10px;
  white-space: nowrap;
}
.logo a img{
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin-bottom: 10px;
}
.logo a strong{
  font-weight: 900;
  padding-bottom: 10px;
}  
.nav ul{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: start;
  flex-wrap: wrap;
  list-style-type: none;
}
.nav ul li a{
  text-decoration: none;
  list-style: none;
  padding: 10px 20px;
  color: var(--mainColor);
  margin: 0 10px;
  font-size: 1.2em;
  font-weight: 700;
  transition: 0.3s ease-in-out;
  border-radius: 10px;
}
.nav ul li a:hover{
  background: var(--mainColor);
  color: #fff;
}
/* mobile nav */
.mobile-nav{
  position: absolute;
  top: 0;
  right: 0;
  width: 250px;
  height: 100vh;
  background: #383838;
  z-index: 999;
  display: none;
  flex-direction: column;
  justify-content: start;
  align-items: end;
}
.mobile-nav .bi{
  font-size: 2em;
  color: #fff;
  margin: 20px;
}
.mobile-nav ul{
  width: 100%;
  list-style-type: none;
}
.mobile-nav ul li{
  width: 100%;
  margin: 20px 0;
}
.mobile-nav ul li a{
  display: block;
  width: 100%;
  padding: 10px;
  text-decoration: none;
  list-style: none;
  color: #fff;
  font-size: 1em;
  font-weight: 800;
}
.mobile-nav ul li a:hover{
  background: var(--mainColor);
  color: #fff;
}
#mobile-menu-open{
  position: fixed;
  top: 40px;
  left: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--secColor);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
#mobile-menu-open .bi{
  font-size: 2em;
  color: #fff;
}

/* footer styles */
footer{
  width: 100%;
  background: var(--mainColor);
  color: #fff;
  margin-top: auto;
  padding: 10px;
  display: flex!important;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  font-weight: 900;
}footer p{
   color: #fff;
}
/* slider sec */
.mes-slider{
  position: relative;
  width: 100%;
  height: 500px;
  background-image: url("../img/pxclimateaction.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
}
.mes-slider-shadow1{
  
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.5));
}
.mes-slider-shadow2{
  
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.5));
}
.mes-slider-text-container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  padding: 100px;
  font-size: 3em;
}
.mes-slider-text-container h3{
  position: absolute;
  color: #fff;
  z-index: 100;
  top: 50px;
  right: 100px;
  font-weight: 900;
}
.mes-slider-text-container span{
  position: absolute;
  color: #fff;
  z-index: 100;
  top: 150px;
  right: 120px;
  font-weight: 400;
}
/* goals sec */
.goals-title{
   width: 50%;
  margin: 40px auto;
  text-align: center;
  font-size: 3em;
  font-weight: 900;
  padding: 20px 0;
  border-bottom: 5px solid #383838;
}
.mes-goles-container{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px;
}
.mes-goal{
  width: 250px;
  height: 250px;
  margin: 20px;
  padding: 10px 20px;
  background: var(--secColor);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  border-radius: 10px;
}
.mes-goal:nth-child(even) {
  background: var(--mainColor);
}
.mes-goal .bi{
  font-size: 5em;
  color: #fff;
}
.mes-goal span{
  font-size: 1.4em;
  line-height: 1.4em;
  font-weight: 400;
  text-align: center;
  color: #fff;
}
/* news sec */
.mes-news-container{
  width: 80%;
  margin: 20px auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 60px;
}
.news-single{
  width: 30%;
  min-height: 500px;
  padding: 15px 10px;
  border: 5px solid #383838;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  text-decoration: none;
  transition: 0.3s ease-in-out;
}.news-single:hover, .news-single:hover>.news-title, .news-single:hover>.news-par{
  background: #383838;
  color: #fff;
}
.news-title{
  font-size: 1.5em;
  font-weight: 900;
  line-height: 1.5em;
  margin: 10px auto;
  text-align: center;
  transition: 0.3s ease-in-out;
}
.news-image{
  width: 80%;
  height: 250px;
  padding-bottom: 20px;
  border: 5px solid #fff;
  background-size: cover;
  margin: 20px auto;
}

.news-par{
  font-size: 1em;
  font-weight: 400;
  line-height: 1.2em;
  text-align: center;
  transition: 0.2s ease-in-out;
}
/* pages posts single main rol  */
.main-role-container{
  width: 80%; 
  margin: 20px auto;
}


/* category tempaltes styles */
.mes-cat-container{
  width: 100%;
  background: transparent;
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 20px;
  padding: 15px 20px;
  border: 3px solid var(--mainColor);
  border-radius: 20px 0 0 20px;
  margin: 15px auto;
  text-decoration: none;
  transition: .3s ease-in-out;
}.mes-cat-container:hover, .mes-cat-container:hover>.mes-cat-text-container h2, .mes-cat-container:hover>.mes-cat-text-container span, .mes-cat-container:hover>.mes-cat-text-container p{
  background: var(--mainColor);
  color: #fff;
}
.mes-cat-image{
  width: 250px;
  height: 150px;
  background-size: cover;
  border: 2px solid #fff;
}
.mes-cat-text-container{
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 10px;
}
.mes-cat-title{
  font-size: 1.4em;
  line-height: 1.4em;
  font-weight: 800;
  margin-bottom: 15px;
  transition: .3s ease-in-out;
}
.mes-cat-text-container p{
  font-size: 1.2em;
  font-weight: 200;
  line-height: 1.2em;
  transition: .3s ease-in-out;
}
/* single tempaltes styles */
.mes-single-container{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: 20px;
  padding: 15px 20px;
  margin: 15px auto;
}
.mes-single-container h1{
  text-align: center;
  font-size: 1.5em;
  line-height: 1.5em;
  font-weight: 800;
}

.mes-single-image{
  width: 60%;
  height: 300px;
  background-size: cover;
}
.mes-single-content-container{
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  align-self: start;
}
.mes-single-content-container p{
  font-size: 1em;
  line-height: 1.3em;
  font-weight: 300;
}
.mes-aftercontent-line{
  width: 100%;
  margin: 40px 0;
  border-bottom: 5px solid #383838;
}

/* pages template styles */
.pages-section-container{
  width: 80%;
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}

/* media query */



/* max-width: 768px */
@media screen and (max-width: 768px) {
  /* header sec */
  .header{gap: 10px;margin-bottom: 5px;}
  .logo a {font-size: 1.2em;padding: 5px;}
  .logo a img {width: 70px;height: 70px;margin-bottom: 5px;}
  .nav ul {gap: 10px;}
  /* slider sec */
  .mes-slider {width: 100%;height: 350px;}
  .mes-slider-text-container {font-size: 2em;}
  .mes-slider-text-container h3 {top: 40px;right: 50px;}
  .mes-slider-text-container span{    top: 100px;right: 50px;}
    /* news sec */
  .mes-news-container{width: 100%; flex-direction: column;margin-bottom: 30px;}
  .news-single{width: 90%;min-height: 250px;padding: 5px 10px;border: 2px solid #383838;margin-bottom: 20px;}
  .news-title {font-size: 1.3em;line-height: 1.2em;}
  .news-image{width:80%;height: 250px;border: 2px solid #fff;margin: 5px auto;}
  .news-par {font-size: 0.85em;line-height: 1em;}

  /* single styles */
  .mes-single-image {width: 80%;}




}

/* phone portrait  query */
@media screen and (max-width: 480px) {
  /* social media sec */
  .mes-social-container {height: 30px;}
  .socialmedia-link{margin: 0 15px;}
  .socialmedia-link .bi{font-size: 1.2em;}
  /* header sec */
  .header{justify-content: center;gap: 0;}
  .logo a{font-size: 1em;}
  .logo a img{width: 50px;height: 50px;margin-bottom: 0;}
  /* menu sec */
  .nav{display: none;}
  /* mobile menu sec */
  #mobile-menu-open{display: flex;}
  /* slider sec */
  .mes-slider{height: 220px;}
  .mes-slider-text-container{font-size: 1.1em;padding: 20px;}
  .mes-slider-text-container h3{top: 20px;right: 40px;}
  .mes-slider-text-container span{    top: 60px;right: 50px;}
  /* goals sec */
  .goals-title{font-size: 1.5em;margin: 10px auto;padding: 10px 0;    border-bottom: 2px solid #383838}
  .mes-goles-container{padding: 0px;}
  /* news sec */
  .mes-news-container{width: 100%; flex-direction: column;margin-bottom: 30px;}
  .news-single{width: 80%;min-height: 200px;padding: 5px 10px;border: 2px solid #383838;margin-bottom: 20px;}
  .news-title {font-size: 1.2em;line-height: 1.2em;}
  .news-image{height: 150px;border: 2px solid #fff;margin: 5px auto;}
  .news-par {font-size: 0.85em;line-height: 1em;}
  /* footer sec */
  footer {font-size: 0.65em;padding: 5px;}

  /* category styles */
  .main-role-container{width: 100%;}
  .mes-cat-container{width: 90%;padding: 15px 10px;flex-direction: column;align-items: center;gap: 10px;}
  .mes-cat-text-container{gap: 5px;}
  .mes-cat-title{text-align: center;font-size: 1.2em;line-height: 1.2em;align-self: center;}
  .mes-cat-text-container p{font-size:1em;line-height: 1em;}
  article h2{text-align: center;font-size: 1.2em;}

  /* single styles */
  .mes-single-container {gap: 5px;padding: 5px 10px;margin: 5px auto;}
  .mes-single-container h1{font-size: 1.2em;line-height: 1.2em;}
  .mes-single-image {width: 80%;height: 200px;}
  .mes-single-content-container{padding: 0 20px;}
  .mes-single-content-container p{font-size: 0.85em;line-height: 1.2em;}
  .mes-aftercontent-line {margin: 10px 0;border-bottom: 2px solid #383838;}
}