/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/


.accordion__container::after {
  content: " ";
  display: table;
  clear: both;
}

/* 
.accordion__item-wrapper {
  width: 100%;
  display: inline-flex;
  flex-wrap: wrap;
  position: relative;

} */
.accordion__item-wrapper{
	display:inline-flex;
	width:100%;
}
.accordion__item {
  min-height: 650px;
  width: 25%;
  float: left;
}


div#accordion_1 {
  /* background-image: url('https://staging.alarifi.org.sa/wp-content/uploads/2023/02/1-leader.png'); */
  background-repeat: no-repeat;
  background-size: cover;
  transition: all 500ms ease;
  background-color: #576AA2 !important;

}

#accordion_1.accordion__item.js-accordion__item.state-active {
  background: #576AA2 !important;
}

div#accordion_2 {
  /* background-image: url('https://staging.alarifi.org.sa/wp-content/uploads/2023/02/2-community.png'); */
  background-repeat: no-repeat;
  background-size: cover;
  transition: all 500ms ease;
  background-color: #D6AF80 !important;

}

#accordion_2.accordion__item.js-accordion__item.state-active {
  background: #D6AF80 !important;
}

div#accordion_3 {
  /* background-image: url('https://staging.alarifi.org.sa/wp-content/uploads/2023/02/3-enter.png'); */
  background-repeat: no-repeat;
  background-size: cover;
  transition: all 500ms ease;
  background-color: #70B7AC !important;

}

#accordion_3.accordion__item.js-accordion__item.state-active {
  background: #70B7AC !important;
}

div#accordion_4 {
  /* background-image: url('https://staging.alarifi.org.sa/wp-content/uploads/2023/02/4-skills.png'); */
  background-repeat: no-repeat;
  background-size: cover;
  transition: all 500ms ease;
  background-color: #CACED6 !important;

}

div#accordion_4,
div#accordion_3,
div#accordion_2,
div#accordion_1 {
  position: relative;
}
/* 
div#accordion_1::after {
  background-image: url('https://staging.alarifi.org.sa/wp-content/uploads/2023/02/icon-right-arrow-small.svg');
  background-repeat: no-repeat;
  background-size: cover;
  transition: all 500ms ease;
  display: inline-block;
  content: '';
  position: absolute;
  height: 30px;
  width: 30px;
  top: 90%;
  right: 20px;
}

div#accordion_2::after {
  background-image: url('https://staging.alarifi.org.sa/wp-content/uploads/2023/02/icon-right-arrow-small.svg');
  background-repeat: no-repeat;
  background-size: cover;
  transition: all 500ms ease;
  display: inline-block;
  content: '';
  position: absolute;
  height: 30px;
  width: 30px;
  top: 90%;
  right: 20px;
}

div#accordion_3::after {
  background-image: url('https://staging.alarifi.org.sa/wp-content/uploads/2023/02/icon-right-arrow-small.svg');
  background-repeat: no-repeat;
  background-size: cover;
  transition: all 500ms ease;
  display: inline-block;
  content: '';
  position: absolute;
  height: 30px;
  width: 30px;
  top: 90%;
  right: 20px;
}

div#accordion_4::after {
  background-image: url('https://staging.alarifi.org.sa/wp-content/uploads/2023/02/icon-right-arrow-small.svg');
  background-repeat: no-repeat;
  background-size: cover;
  transition: all 500ms ease;
  display: inline-block;
  content: '';
  position: absolute;
  height: 30px;
  width: 30px;
  top: 90%;
  right: 20px;
} */

div#accordion_1::before {
  background-color: #576AA2;
  content: '';
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  top: 85%;
  right: 10px;
}

div#accordion_2::before {
  background-color: #D6AF80;
  content: '';
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  top: 85%;
  right: 10px;
}

div#accordion_3::before {
  background-color: #70B7AC;
  content: '';
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  top: 85%;
  right: 10px;
}

div#accordion_4::before {
  background-color: #70B7AC;
  content: '';
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  top: 85%;
  right: 10px;
}
/* 
#accordion_1.accordion__item.js-accordion__item.state-active::after {
  background-image: none !important;
}

#accordion_2.accordion__item.js-accordion__item.state-active::after {
  background-image: none !important;
}

#accordion_3.accordion__item.js-accordion__item.state-active::after {
  background-image: none !important;
}

#accordion_4.accordion__item.js-accordion__item.state-active::after {
  background-image: none !important;
} */

#accordion_4.accordion__item.js-accordion__item.state-active::before {
  display: none;
}

#accordion_3.accordion__item.js-accordion__item.state-active::before {
  display: none;
}

#accordion_2.accordion__item.js-accordion__item.state-active::before {
  display: none;
}

#accordion_1.accordion__item.js-accordion__item.state-active::before {
  display: none;
}

#accordion_4.accordion__item.js-accordion__item.state-active {
  background: #C40D3E !important;
}

/* .accordion__item.js-accordion__item.state-active {
  background: #0033A1;
} */

.accordion__item.state-collapsed {
  width: 25%;
}

.accordion__item.state-active {
  width: calc(100% - 450px);
  width: 50%;
  padding: 33px !important;
}



.accordion__item.js-accordion__item {
  padding: 33px !important;
}

.post__wrapper {
  display: none;
}

.accordion__item.js-accordion__item.state-active .post__wrapper {
  display: block;
}

.post__inner {
  display: flex;
  width: 100% !important;
  flex-wrap: wrap;
}

.post__detail {
  position: relative;
  padding: 16px 12px;
  width: 48%;
  margin: 1%;
  background-color: #ffffff20;
  text-align: left;
  border-radius: 4px;
  box-shadow: inset 0px 0px 2px rgb(255 255 255 / 20%);
  transition-delay: all .2s ease !important;
}
.post__detail.full__widthh{
	width:98%;
	
}
.post__title {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: 0.4px;
  color: #fff;
}

.post__content {
  margin-top: 12px;
  font-weight: 300;
  font-size: 13px;
  line-height: 15px;
  letter-spacing: 0.4px;
  color: #fff;
}

.post__detail:hover {
  background-color: #00000020;
  box-shadow: inset 0px 0px 2px rgb(0 0 0 / 20%);
  transition: 0.5s ease-in-out;
}

.category__excerpt {
  text-align: left;
  font-size: 17px;
  line-height: 21px;
  letter-spacing: 0.4px;
  color: #fff;
  margin-bottom: 28px;
}
.rtl .accordion__item .category__excerpt{
	text-align:right;
	direction:rtl;
}
.rtl .accordion__item .category__name{
	text-align:right;
	direction:rtl;
}
.rtl .accordion__item .post__content{
	text-align:right;
	direction:rtl;
}
/* .category__name {
  margin-bottom: 24px;
} */

.category__name {
  font-size: 32px;
  font-weight: 400;
  line-height: 35.94px;
  letter-spacing: 0.4px;
  width: 40%;
  text-align: left;
  color: #fff !important;
  margin-bottom: 24px;

}

.button__wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.button__category {
  display: none;
}

.accordion__item.js-accordion__item.state-active .button__category {
  display: block;
}

.title__img {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.button__category button {
  border: 1px solid #fff !important;
  padding: 18px 16px !important;
  display: flex !important;
  align-items: center !important;
  height: 35px !important;
  font-weight: bold !important;
  color: #fff;
  border-radius: 0px !important;
  font-weight: 600;

}

/* .button:hover {
  box-shadow: inset 0px 0px 2px rgb(0 0 0 / 20%);
  background: #fff;
  color: #00372a!important;
} */

.button__category button:hover {
  color: #00372a;
  background-color: #fff !important;
  text-decoration: none;
  border-radius: 0px !important;
}

.title__img img {
  width: 100%;
  max-width: 8% !important;
}

.button__category button:focus {
  outline: none !important;
  color: #00372a;
  background-color: #fff !important;
  text-decoration: none;
  border-radius: 0px !important;
}

.accordion__item.js-accordion__item.state-active {
  background: #0033A1 !important;
  width: 50%;
}
@media only screen and (max-width: 768px) {
  .accordion__item {
    height: 150px;
    width: 100%;
  }

  .accordion__item.state-active {
    width: 100%;
    height: 700px;
  }

  .accordion__item.state-collapsed {
    width: 100%;
  }

  div#accordion_4::after {
    top: 65%;
  }

  div#accordion_3::after {
    top: 65%;
  }

  div#accordion_2::after {
    top: 65%;
  }

  div#accordion_1::after {
    top: 65%;
  }

  div#accordion_4::before {
    top: 52%;
  }

  div#accordion_3::before {
    top: 52%;
  }

  div#accordion_2::before {
    top: 52%;
  }

  div#accordion_1::before {
    top: 52%;
  }
	.accordion__item.js-accordion__item.state-active {
		background: #0033A1 !important;
		width: 100%;
	}
	.accordion__item.js-accordion__item.state-active{
		width:100% !important;
	}
	.accordion__item {
		min-height: 100px;
	}
}

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

  .post__detail {
    width: 100%;

  }

  .accordion__item.state-active {
    width: 100%;
    height: auto;
  }

  .category__name {
    width: 100%;
    margin-bottom: 10px;
  }

  .button__category {
    margin-bottom: 10px;
  }
}

.rtl .title__img img {
  transform: rotateY(180deg);
}

.rtl {
  direction: rtl;
  text-align: right;
}

.rtl .accordion__item-wrapper {
  direction: rtl;
  text-align: right;
}

.rtl .accordion__item {
  min-height: 650px;
  width: 33.33%;
  float: right;
}


img.category__arrow {
  bottom: 50px;
  position: absolute;
  right: 25px;
  width: 36px;

}

.state-active
img.category__arrow {
  display: none;
} 


.rtl img.category__arrow{
  transform: rotateY(180deg);
}

.rtl img.category__arrow {
  bottom: 50px;
  position: absolute;
  left: 20px !important;
  width: 36px;
  right: auto;
}

.rtl
div#accordion_1::before {
  background-color: #00B5E2;
  left: 20px !important;
  right: auto;

}

.rtl
div#accordion_2::before {
  background-color: #21B592;
  left: 20px !important;
  right: auto;

}

.rtl
div#accordion_3::before {
  background-color: #FFB500;
  left: 20px !important;
  right: auto;

}

.rtl
div#accordion_4::before {
  background-color: #FF6B63;
  left: 20px !important;
  right: auto;

}
@media only screen and (max-width: 768px) {
	.accordion__item.js-accordion__item.state-active {
	  background: #0033A1 !important;
	  width: 100%;
	}

	.rtl .accordion__item {
	  min-height: 100px;
	  width: 100%;
	  float: right;
	}
	.accordion__item-wrapper{
		flex-wrap:wrap;
	}

}