/*VARIABLES CSS*/
:root {
  --header-height: 3.5rem; /*56px*/

  /* Colors */

  --hue: 152;
  --first-color: hsl(var(--hue), 24%, 32%);
  --first-color-alt: hsl(var(--hue), 24%, 28%);
  --first-color-light: hsl(var(--hue), 24%, 66%);
  --first-color-lighten: hsl(var(--hue), 24%, 92%);
  --title-color: hsl(var(--hue), 4%, 15%);
  --text-color: hsl(var(--hue), 4%, 35%);
  --text-color-light: hsl(var(--hue), 4%, 55%);
  --body-color: hsl(var(--hue), 0%, 100%);
  --container-color: hsl(0, 0%, 100%);

  /* Font and typography */
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: 'Poppins', sans-serif;
  --big-font-size: 2rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;

  /* Font weight */
  --font-medium: 500;
  --font-semi-bold: 600;

  /* Margenes Bottom */
  /*.5rem = 8px | 1rem = 16px ...*/
  --mb-0-5: .5rem;
  --mb-0-75: .75rem;
  --mb-1: 1rem;
  --mb-1-5: 1.5rem;
  --mb-2: 2rem;
  --mb-2-5: 2.5rem;

  /* z index */
  --z-tooltip: 10;
  --z-fixed: 100;
}

/* Responsive typography */
@media screen and (min-width: 968px) {
  :root {
    --big-font-size: 3.5rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
  }
}

/*BASE*/
*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: Vazir, sans-serif;
  font-weight: bold;
}

html{
  scroll-behavior: smooth;
}

body,
button,
input,
textarea{
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
}

body{
  margin: var(--header-height) 0 0 0;
  background-color: var(--body-color);
  color: var(--text-color);
  transition: .4s; /*For animation dark mode*/

}
.banner-area {
  background: rgb(46,42,89);
background: linear-gradient(123deg, rgba(46,42,89,1) 0%, rgba(65,103,144,1) 100%); 
    background-size: auto;
  background-size: cover;
}
button{
  cursor: pointer;
  border: none;
  outline: none;
}

h1,h2,h3{
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
}

ul{
  list-style: none;
  padding-left: 0%;
}

a{
  text-decoration: none;
}

img{
  max-width: 100%;
  height: auto;
  padding-left: -6rem;
}

img{
  display: block;
  max-width: 100%;
  height: auto;
}





.nav__btns{
  display: inline-flex;
  align-items: center;
  column-gap: 1rem;
}



/*REUSABLE CSS CLASSES*/
.section{
  padding: 2.5rem 0 1rem;
}

.section__title,
.section__title-center{

  margin-bottom: var(--mb-2);
  line-height: 140%;
}

.section__title-center{
  text-align: center;
}

.container{
  max-width: 1100px;
  margin-left: var(--mb-1-5);
  margin-right: var(--mb-1-5);

}

.grid{
  display: grid;
}

.main{
  overflow: hidden; 
}




body,
button,
input,
textarea{
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
}

body{
  margin: var(--header-height) 0 0 0;
  background-color: var(--body-color);
  color: var(--text-color);
  
  
}

button{
  cursor: pointer;
  border: none;
  outline: none;
}

h1,h2,h3{
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
}

ul{
  list-style: none;
}

a{
  text-decoration: none;
}

img{
  max-width: 100%;
  height: auto;
}


.nav__btns{
  display: inline-flex;
  align-items: center;
  column-gap: 1rem;
}


.section{
  padding: 2rem 0 1rem;
}

.section__title,
.section__title-center{
  font-size: var(--h2-font-size);
  margin-bottom: var(--mb-2);
  line-height: 140%;
}

.section__title-center{
  text-align: center;
  font-size: 20px;
}

.container{
  max-width: 1100px;
  margin-left: var(--mb-1-5);
  margin-right: var(--mb-1-5);
 
}

.grid{
  display: grid;
}

.main{
  overflow: hidden; 
}


 .btn-acceptance{
  position: relative;
  height: 50px;
  padding: 0 30px;

  border: 3px solid #6c4afd;
  background: #ffffff;
  user-select: none;
  white-space: nowrap;
  transition: all .05s linear;
  font-family: inherit;
  color: #3265a6;
 }
 
 .btn-acceptance:before, .btn-acceptance:after {
  content: "";
  position: absolute;
  background: #ffffff;
  transition: all .2s linear;
 }
 
 .btn-acceptance:before {
  width: calc(100% + 6px);
  height: calc(100% - 16px);
  top: 8px;
  left: -3px;
 }
 
 .btn-acceptance:after {
  width: calc(100% - 16px);
  height: calc(100% + 6px);
  top: -3px;
  left: 8px;
 }
 
 .btn-acceptance:hover {
  cursor: crosshair;
 }
 
 .btn-acceptance:active {
  transform: scale(0.95);
 }
 
 .btn-acceptance:hover:before {
  height: calc(100% - 32px);
  top: 16px;
 }
 
 .btn-acceotance:hover:after {
  width: calc(100% - 32px);
  left: 16px;
 }
 
 .btn-acceptance span {
  font-size: 15px;
  z-index: 3;
  position: relative;
  font-weight: 600;
 }























/* HEADER */
.header{
  width: 100%;
  background-color: var(--body-color);
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-fixed);
 
}

/* NAV */
.nav{
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__logo,
.nav__toggle,
.nav__close{
  color: var(--title-color);
}
.btl{
  background-color: #03586b;
  color: #ebf0f5;

}
.btl:hover{
  background-color: #034251;
  color: #f1f8f8;
}
.nav__logo{
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: -1px;
  display: inline-flex;
  align-items: center;
  column-gap: .5rem;
  transition: .3s;
}

.nav__logo-icon{
  font-size: 1.15rem;
  color: var(--first-color);
}

.nav__logo:hover{
  color: var(--first-color);
}

.btp:hover{
  background-color: #c9f8f33e;
  
}


.nav__toggle{
  display: inline-flex;
  font-size: 1.25rem;
  cursor: pointer;
}

@media screen and (max-width: 767px){
  .nav__menu{
    position: fixed;
    background-color: #fcfafe;
    width: 60%;
    height: 90%;
    top: 0;
    right: -100%;
    box-shadow: -2px 0 4px hsla(var(--hue), 24%, 15%, .1);
    padding: 4rem 0 0 3rem;
    border-radius: 1rem 0 0 1rem;
    transition: .3s;
    z-index: var(--z-fixed);

  }
}

.nav__close{
  font-size: 1.5rem;
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  cursor: pointer;
}

.nav__list{
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
  padding-right: 1rem;
}

.nav__link{
  color: var(--title-color);
  font-weight: var(--font-medium);
  transition: .3s;
}

.nav__link:hover{
  color: blueviolet;
}

/* Show menu */
.show-menu{
  right: 0;
}

/* Change background header */
.scroll-header{
  box-shadow: 0 1px 4px hsla(var(--hue), 4%, 15%, .1);
}

/* Active link */
.active-link{
  position: relative;
  color: var(--first-color);
}



.btn-b{
  background-color: #5a7ca8;
  color: #ffffff;
  box-shadow: 0 2px 6px #1c1c1c6c;
}
.btn-b:hover{
  background-color: rgb(46, 74, 111);
  color: #f1f8f8;
}

/**
 * Article Container
 */
 .article-container {
	padding: .5rem;
}

/**
 * Article Block
 */
.article-block {
	text-align: center;
}

.article-block .entry-content > p {
	color: #666;
}

/**
 * Tabs Container
 */
.tabs-container {
	padding: 2rem;
}

/**
 * Tabs Block
 */
.tabs-block {
	display: flex;
	align-items: center;
	justify-content: center;
}

/**
 * Tabs
 */
.tabs {
	display: flex;
}

.tabs > ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 18%;
}

.tabs > ul li {
	display: block;
}

.tabs > ul li:not(:last-child) {
	border-bottom: 1px solid #262626;
}

.tabs > ul li a,
.tabs > ul li a:visited {
	display: flex;
	border-bottom: none;
	text-decoration: none;
	background-color: #1be2ce;
	color: #59039b;
	padding: 1rem 1.5rem;
	transition: all 0.2s ease-in-out;
	word-wrap: break-word;
}

.tabs > ul li a:hover,
.tabs > ul li a:focus,
.tabs > ul li a:active {
	border-bottom: none;
	outline: 0;
}

.tabs > ul li a.active {
	background-color: #ffffff;
	color: #6b49fa;
}

.tabs > ul li a:hover:not(.active) {
	color: #120643;
}

.tabs > ul li a > span {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.tabs > ul li a > span.tab-label {
	display: none;
}

.tabs section {
	width: 85%;
	background-color: #fff;
	padding: 1rem;
	display: none;
	word-wrap: break-word;
	border-bottom: 6px solid #6b49fa;
}

.tabs section > * {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.2s, transform 0.2s;
}

.tabs section > *:nth-child(1) {
	transition-delay: 0.2s;
}

.tabs section > *:nth-child(2) {
	transition-delay: 0.3s;
}

.tabs section > *:nth-child(3) {
	transition-delay: 0.4s;
}

.tabs section > *:nth-child(4) {
	transition-delay: 0.5s;
}

.tabs section > *:nth-child(5) {
	transition-delay: 0.6s;
}

.tabs section > *:nth-child(6) {
	transition-delay: 0.7s;
}

.tabs section > *:nth-child(7) {
	transition-delay: 0.8s;
}

.tabs section > *:nth-child(8) {
	transition-delay: 0.9s;
}

.tabs section > *:nth-child(9) {
	transition-delay: 1s;
}

.tabs section > *:nth-child(10) {
	transition-delay: 1.1s;
}

.tabs section > *:nth-child(11) {
	transition-delay: 1.2s;
}

.tabs section > *:nth-child(12) {
	transition-delay: 1.3s;
}

.tabs section > *:nth-child(13) {
	transition-delay: 1.4s;
}

.tabs section > *:nth-child(14) {
	transition-delay: 1.5s;
}

.tabs section > *:nth-child(15) {
	transition-delay: 1.6s;
}

.tabs section > *:nth-child(16) {
	transition-delay: 1.7s;
}

.tabs section > *:nth-child(17) {
	transition-delay: 1.8s;
}

.tabs section > *:nth-child(18) {
	transition-delay: 1.9s;
}

.tabs section > *:nth-child(19) {
	transition-delay: 2s;
}

.tabs section > *:nth-child(20) {
	transition-delay: 2.1s;
}

.tabs section.active {
	display: block;
}

.tabs section.active-content > * {
	opacity: 1;
	transform: translateY(0);
}

/* BUTTONS */
.button{
  display: inline-block;
  background-color: var(--first-color);
  color: #FFF;
  padding: 1rem 1.75rem;
  border-radius: .5rem;
  font-weight: var(--font-medium);
  transition: .3s;
}

.button:hover{
  background-color: var(--first-color-alt);
}

.button__icon{
  transition: .3s;
}

.button:hover .button__icon{
  transform: translateX(.25rem);
}

.button--flex{
  display: inline-flex;
  align-items: center;
  column-gap: .5rem;
}

.button--link{
  color: var(--first-color);
  font-weight: var(--font-medium);
}

.button--link:hover .button__icon{
  transform: translateX(.25rem);
}

/* ABOUT */
.about__container{
  row-gap: 2rem;
}

.about__img{

  justify-self: center;
  
}

.about__title{
  margin-bottom: var(--mb-1);
}

.about__description{
  margin-bottom: var(--mb-2);
}

.about__details{
  display: grid;
  row-gap: 1rem;
  margin-bottom: var(--mb-2-5);
}

.about__details-description{
  display: inline-flex;
  column-gap: .5rem;
  font-size: var(--small-font-size);
}

.about__details-icon{
  font-size: 1rem;
  color: var(--first-color);
  margin-top: .15rem;
}


/* STEPS */
.steps__bg{

  padding: 1rem 2rem 2rem;
  border-radius: 1rem;
  
}

.steps__container{
  gap: 1.5rem;
  padding-top: 1rem;
}

.steps__title{
  color: #5e01b0;
}

.steps__card{
  background-color: #FFF;
  padding: 1rem 1rem 2rem;
  box-shadow: 0 2px 6px #1c1c1c6c;
  border-radius: 1rem;
  border: 2px solid transparent;
  backdrop-filter: blur(15px);

}

.steps__card .m{
    width: 77px;
    height: 77px;
    background-color: #caf5f2;
    border-radius: 50%;
    margin: 0 auto 1rem;
    display: grid;
    place-items: center;
    font-size: 40px;

}



.steps__card-number{
  display: inline-block;
  background-color: var(--first-color-alt);
  color: #FFF;
  padding: .5rem .75rem;
  border-radius: .25rem;
  font-size: var(--h2-font-size);
  margin-bottom: var(--mb-1-5);
  transition: .3s;
}
.steps__btn {
  display: inline-block;
  background-image: linear-gradient( 109.6deg, rgb(131, 5, 248) 16.2% , rgb(141, 0, 242)92.5%);
  padding: .5rem 1rem;
  border-radius: .25rem;
  color: #ffffff;
  font-weight: 500;
  
}
.steps__card-title{
  font-size: var(--h3-font-size);
  margin-bottom: var(--mb-0-5);
}

.steps__card-description{
  font-size:14px;
}

.steps__card:hover .steps__card-number{
  transform: translateY(-.25rem);
}


/* FOOTER */


.footer__copy{
  text-align: center;
  font-size: v13px;
  color: var(--text-color-light);
  margin:2rem;
}

/* SCROLL UP */
.scrollup{
  position: fixed;
  background-color: #babebf;
  right: 1rem;
  bottom: -30%;
  display: inline-flex;
  padding: .5rem;
  border-radius: .25rem;
  z-index: var(--z-tooltip);
  opacity: .8;
  transition: .4s;
}

.scrollup__icon{
  font-size: 1rem;
  color: #FFF;
}

.scrollup:hover{
  background-color: #b1b1b1;
  opacity: 1;
}


/* Show Scroll Up*/
.show-scroll{
  bottom: 3rem;
}

/* SCROLL BAR */
::-webkit-scrollbar{
  width: .6rem;
  background: hsl(var(--hue), 4%, 53%);
}

::-webkit-scrollbar-thumb{
  background: hsl(var(--hue), 4%, 29%);
  border-radius: .5rem;
}












/*HEADER*/
.header{
  width: 100%;
  background-color: var(--body-color);
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-fixed);
  transition: .4s; 
}

.navbar ul .nav__item .nav__link{
  direction: rtl;
  display: flex;
  font-size: 16px;
  white-space: nowrap;
  -webkit-box-align: center;
  line-height: 25px;
  position: relative;
  margin: 0px 0px 4px;
  padding: 10px;
  gap: 15px;
  font-weight: 400;

}
.nav__link span{
  padding-right: 10px;
  
}


.nav__item:hover{
  color: rgb(108, 1, 169);
  
}
.nav__item .hide-menu:hover{
  color: #9e28d9;
}
/*NAV*/
.nav{
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__logo,
.nav__toggle,
.nav__close{
  color: var(--title-color);
}

.nav__logo{
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: -1px;
  display: inline-flex;
  align-items: center;
  column-gap: .5rem;
  transition: .3s;
}

.nav__logo-icon{
  font-size: 1.15rem;
  color: var(--first-color);
}

.nav__logo:hover{
  color: var(--first-color);
}

.nav__toggle{
  display: inline-flex;
  font-size: 1.25rem;
  cursor: pointer;

}

@media screen and (max-width: 767px){
  .nav__menu{
    position: fixed;
    background-color: #fcfafe;
    width: 60%;
    height: 90%;
    top: 0;
    right: -100%;
    box-shadow: -2px 0 4px hsla(var(--hue), 24%, 15%, .1);
    padding: 4rem 0 0 3rem;
    border-radius: 1rem 0 0 1rem;
    transition: .3s;
    z-index: var(--z-fixed);

  }
}
.nav__close{
  font-size: 1.5rem;
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  cursor: pointer;
}

.nav__list{
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  
}

.nav__link{
  color: var(--title-color);
  font-weight: var(--font-medium);
  transition: .3s;
}

.nav__link:hover{
  color:#6b49fa;
}

/* Show menu */
.show-menu{
  right: 0;
}

/* Change background header */
.scroll-header{
  box-shadow: 0 1px 4px hsla(var(--hue), 4%, 15%, .1);
}

/* Active link */
.active-link{
  position: relative;
  color: #5e01b0;
}

.active-link::after{
  content: '';
  position: absolute;
  bottom: -.5rem;
  right: 0;
  width: 50%;
  height: 2px;
  background-color: #6b49fa;
}

/*HOME*/
.home{
  padding: 0 0 4rem;
}

.home__container{
  position: relative;
 
}

.home__img{
  
  justify-self: center;
}

.home__title{
  font-size: var(--big-font-size);
  line-height: 140%;
  margin-bottom: var(--mb-1);
  padding-left: -3rem;
}

.home__description{
  margin-bottom: var(--mb-2-5);
  font-size: 15px;
}


.xl-text span{ position: relative;
  text-align: center;
  font-weight: 900;
  background-color: #1be2ce;
  background-clip: text;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  filter: brightness(1.85);
}
.home__container .decoration-star{

  opacity: 0.7;
}

/*BUTTONS*/
.button-intro{
  display: inline-block;
 color: #2f0332;
  padding: 1rem 1.75rem;
  border-radius: .5rem;
  font-weight: var(--font-medium);
  transition: .3s;
  position: relative;
  text-align: center;
  font-size:15px;
  background-color: #1be2ce;

box-shadow: 0 2px 6px #4e4755 ;}

.button-intro:hover{
  background-color: #6c4afd;
  color: #FFF;

}
.button__icon{
  transition: .3s;
}

.button:hover .button__icon{
  transform: translateX(.25rem);
}

.button--flex{
  display: inline-flex;
  align-items: center;
  column-gap: 1rem;
 
}


.button--link{
  color: var(--first-color);
  font-weight: var(--font-medium);
}

.button--link:hover .button__icon{
  transform: translateX(.25rem);
}

/*ABOUT*/


.about__container{
  row-gap: 2rem;
}

.about__img{

  justify-self: center;
}
.about__img1{

  justify-self: center;
}
.about__title{
  margin-bottom: var(--mb-1);
}

.about__description{
  margin-bottom: var(--mb-2);
  font-size: 14px;
  text-align: justify;
}

.about__details{
  display: grid;
  row-gap: 1rem;
  margin-bottom: var(--mb-2-5);
}

.about__details-description{
  display: inline-flex;
  column-gap: .5rem;
  font-size: var(--small-font-size);
}

.about__details-icon{
  font-size: 1rem;
  color: var(--first-color);
  margin-top: .15rem;
}

/*Tarh*/
.tarh__bg{
  background-color: #ddcaf5;
  padding: 3rem 2rem 2rem;
  border-radius: 1rem;
  
}

.tarh__container{
  gap: 1.5rem;
  padding-top: 1rem;
}

.tarh__title{
  color: #59039b;
}

.tarh__card{
  background-color:#fbffff;
  padding: 2.5rem 1rem 1.5rem;
  box-shadow: 0 2px 6px #bebebe;
  border-radius: 1rem;

}

.tarh__card i{
    width: 64px;
    height: 64px;
    background-color: #ddcaf5;
    border-radius: 50%;
    margin: 0 auto 1rem;
    display: grid;
    place-items: center;

}


.tarh__btn {
  display: inline-block;
  background-image: linear-gradient( 109.6deg, rgb(167, 39, 237) 16.2% , rgb(210, 24, 223) 92.5%);
  padding: .5rem 1rem;
  border-radius: .25rem;
  color: #ffffff;
  font-weight: 500;
  
}

.tarh__btn:hover{
  color: #e2b1fa;
}
.tarh__card-title{
  font-size: var(--h3-font-size);
  margin-bottom: var(--mb-0-5);
}

.tarh__card-description{
  font-size:14px;
}

.tarh__card:hover .tarh__card-number{
  transform: translateY(-.25rem);
}

/*QUESTIONS*/
.questions{
  background-color:#eaeff4;
}

.questions__container{
  gap: 1.5rem;
  padding: 1.5rem 0;
}

.questions__group{
  display: grid;
  row-gap: 1.5rem;
}

.questions__item{
  background-color: #e4caf5;
  border-radius: .25rem;
}

.questions__item-title{
  font-size: var(--small-font-size);
  font-weight: var(--font-medium);
}

.questions__icon{
  font-size: 1.25rem;
  color: var(--title-color);
}

.questions__description{
  font-size: var(--smaller-font-size);
  padding: 0 1.25rem 1.25rem 2.5rem;
text-align: justify;
}

.questions__header{
  display: flex;
  align-items: center;
  column-gap: .5rem;
  padding: .75rem .5rem;
  cursor: pointer;
}

.questions__content{
  overflow: hidden;
  height: 0;
}

.questions__item,
.questions__header,
.questions__item-title,
.questions__icon,
.questions__description,
.questions__content{
  transition: .3s;
}

.questions__item:hover{
  box-shadow: 0 2px 8px hsla(var(--hue), 4%, 15%, .15);
}


.questions__item{
  box-shadow: 0 2px 6px #615dff;
  background-color: #605dff32;
  border-radius: .25rem;
  position: relative;
  transition: all .25s ease;
}

.questions__item::after {
  content: '';
  background-color: #615dff;
  width: 5px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: .25rem 0 0 .25rem;
}

.questions__item:nth-child(1) {
  background-color: #fdfdfd;
}

.questions__item:nth-child(1)::after {
  background-color:#615dff;
}
.questions__item:nth-child(2) {
  background-color: #f4f3f6;
}

.questions__item:nth-child(2)::after {
  background-color: #615dff;
}

.questions__item:nth-child(3) {
  background-color: #f9f7fb;
}

.questions__item:nth-child(3)::after {
  background-color: #615dff;
}

.container_comments {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  
}

.card__container {
  padding-block: 5rem;
}

.card__content {
  margin-inline: 1.75rem;
  border-radius: 1.25rem;
  overflow: hidden;
}

.card__article {
  width: 300px; 
  border-radius: 1.25rem;
  overflow: hidden;
  margin-bottom: 2rem;
}

.card__image {
  position: relative;
  padding-top: 1.5rem;
  margin-bottom: -.75rem;
  background-image: linear-gradient( 109.6deg, rgb(152, 73, 250) 16.2% , rgb(64, 178, 235) 92.5%);
}

.card__data {
  background-color:#1e3248;
  padding: 1rem;
  border-radius: 1rem;
  text-align: center;
  position: relative;
  z-index: 10;
}

.card__img {
  width: 180px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

.card__shadow {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: absolute;
  top: 3.75rem;
  left: 0;
  right: 0;
  margin-inline: auto;
  filter: blur(45px);
}

.card__name {
  font-size: var(--h2-font-size);
  color: #ffffff;
  margin-bottom: .75rem;
}

.card__description {
  font-weight: 500;
  margin-bottom: 1.75rem;
  color: #ffffff;
  text-align:justify;
}

.card__button {
  display: inline-block;
  background-image: linear-gradient( 109.6deg, rgb(3, 118, 150) 16.2% , rgb(24, 180, 223) 92.5%);
  padding: .5rem 1.5rem;
  border-radius: .25rem;
  color: #ffffff;
  font-weight: 600;
}

.card__button:hover{
  color: #bfe7f0;
}
/* Swiper class */
.swiper-button-prev:after,
.swiper-button-next:after {
  content: "";
}

.swiper-button-prev,
.swiper-button-next {
  width: initial;
  height: initial;
  font-size: 3rem;
  color: var(--second-color);
  display: none;
}

.swiper-button-prev {
  left: 0;
}

.swiper-button-next {
  right: 0;
}

.swiper-pagination-bullet {
  background-color: hsl(212, 32%, 40%);
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background-color: var(--second-color);
}





#filterable-cards .card.hide {
  display: none;
}





/* card_rotbe */
.container_rotbe {
  display: grid;
  place-items: center;
  margin-inline: 1.5rem;
}

.card_rotbe__container, .card_rotbe__article {
  display: grid;
  gap: 2rem;
}

.card_rotbe__article {
  --hue-1: 210;
  --hue-2: 238;
  position: relative;
  justify-items: center;
  color: black;
  text-align: center;
  padding: 1rem 1rem 1rem;
  border: 4px solid transparent;
  box-shadow: 0 2px 6px #323131b8;
  background: linear-gradient(var(--container-color), var(--container-color)) padding-box, linear-gradient(135deg, hsl(var(--hue-1), 85%, 70%) 4%, var(--container-color), var(--container-color), hsl(var(--hue-2), 70%, 55%) 100%) border-box;
  border-radius: 1.25rem;
  overflow: hidden;
}
.card_rotbe__shape-1 {
  position: relative;
  width: 148px;
  height: 60px;
  
  border-radius: 2rem;
  z-index: 2;
}
.card_rotbe__shape-2 {
  width: 116px;
  height: 116px;
  background: linear-gradient(140deg, hsl(var(--hue-1), 70%, 50%) 3%, hsl(var(--hue-2), 95%, 45%) 90%);
  border-radius: 1.5rem;
}

.card_rotbe__shape-2, .card_rotbe__shape-3 {
  position: absolute;
  inset: 0;
  margin: auto;
}

.card_rotbe__data {
  z-index: 3;
}
.card_rotbe__title {
  font-size: var(--h2-font-size);

  font-weight: 600;
}
.card_rotbe__description {
  margin-bottom: 1.5rem;
}
.card_rotbe__img {
 
padding-top: -10rem;
  position: relative;
  z-index: 5;

}


.card_rotbe__orange {
  --hue-1: 320;
  --hue-2: 200;
}

.card_rotbe__scale-1 {
  width: 148px;
  height: 98px;
  background: linear-gradient(140deg, hsl(var(--hue-1), 70%, 50%) 3%, hsl(var(--hue-2), 95%, 45%) 90%);
  border-radius: 2rem;
  top: 4rem;
}
.card_rotbe__scale-2 {
  width: 116px;
  height: 116px;
  background: var(--container-color);
  border-radius: 1.5rem;
  top: 5rem;
}
.card_rotbe__scale-1, .card_rotbe__scale-2 {
  position: absolute;
  filter: blur(568px);
  transition: transform 0.2s ease-in;
}
.card_rotbe__article:hover .card_rotbe__scale-1 {
  transform: scale(6);
}
.card_rotbe__article:hover .card_rotbe__scale-2 {
  transform: scale(6);
  transition-delay: 0.1s;
}

/*Rotate icon, change color of titles and background*/
.accordion-open .questions__header,
.accordion-open .questions__content{
  background-color:#f1f8f8
}

.accordion-open .questions__item-title,
.accordion-open .questions__description,
.accordion-open .questions__icon{
  color: #2f0332;
}

.accordion-open .questions__icon{
  transform: rotate(45deg);
}

/*SCROLL UP*/
.scrollup{
  position: fixed;
  background-color: #4a2499;
  right: 1rem;
  bottom: -30%;
  display: inline-flex;
  padding: .5rem;
  border-radius: .25rem;
  z-index: var(--z-tooltip);
  opacity: .8;
  transition: .4s;
}

.scrollup__icon{
  font-size: 1rem;
  color: #FFF;
}

.scrollup:hover{
  background-color: #b1b1b1;
  opacity: 1;
}


/* Show Scroll Up*/
.show-scroll{
  bottom: 3rem;
}

/* FOOTER */


.footer__copy{
  text-align: center;
  font-size: v13px;
  color: var(--text-color-light);
  margin: 2rem;
}

/*SCROLL BAR*/
::-webkit-scrollbar{
  width: .6rem;
  background: hsl(var(--hue), 4%, 53%);
}

::-webkit-scrollbar-thumb{
  background: hsl(var(--hue), 4%, 29%);
  border-radius: .5rem;
}

/*BREAKPOINTS*/
/* For small devices */
@media screen and (max-width: 320px){
  .container{
    margin-left: var(--mb-1);
    margin-right: var(--mb-1);
  }
  .btn-lg{
    width:250px;
    }
 
  .home__img{
    width:350px;
    padding-top: 2rem;
  }
  .home__title{
  font-size: 30px;
    text-align: center;
  }

  .button--flex{
   
    font-size: 13px;
  }
  .home__description{
    font-size: 10px;
    justify-content: center;
    direction: rtl;
  }
  .home__title{
    font-size: 32px;
    text-align: center;
  }
  .about__description{
    font-size: 12px;
  }
  .about__details-description{
    font-size: 10px;
  }
  .section__title{
    font-weight: bold;
    text-align: center;
  }
  .home__container .decoration-star{
    left: -180px;
    width: 550px;
    top:20px;
  }
  .card__data {
    padding: 1rem;
  }
  .tarh__bg{
    padding: 2rem 1rem;
  }
  .tarh__card{
    padding: 1.5rem;
  }

  .steps__bg{
    padding: 2rem 1rem;
  }
  .steps__card{
    padding: 1.5rem;
  }

  .section__title{
    font-size: 30px;

 }
 .card_rotbe__article {
  padding: 2rem 1rem;
}
.card_rotbe__scale-1 {
  top: 2rem;
}
.card_rotbe__scale-2 {
  top: 3rem;
}


}

/* For medium devices */
@media screen and (min-width: 576px){

	.tabs > ul {
		width: 150px;
	}

	.tabs > ul li a {
		flex-wrap: wrap;
	}

	.tabs > ul li a > span {
		width: 100%;
	}

	.tabs > ul li a > span.tab-label {
		width: 100%;
		display: block;
		margin-top: 0.2rem;
	}

	.tabs section {
		width: calc(100% - 150px);
		padding: 2rem 2rem;
	}
  .tarh__container{
    grid-template-columns: repeat(2, 1fr);
  }
  .home__container .decoration-star{
    left: -300px;
    width: 550px;
  }
  .btn-lg{
    width:250px;
    }
  .card__content {
    margin-inline: 3rem;
  }

  .swiper-button-next,
  .swiper-button-prev {
    display: block;
  }
  .steps__container{
    grid-template-columns: repeat(3, 1fr);
  }
  .card_rotbe__container {
    grid-template-columns: 328px;
  }

   .card-title1{
    padding-bottom: 5rem;
  }
  .r1{
    flex-direction: row;
  }
  .r2{
    flex-direction: row-reverse;
  }
 
}

@media screen and (min-width: 767px){
  body{
    margin: 0;
  }
  
	.tabs-container {
		padding: 4rem 4rem;
	}
  .btn-lg{
    width:250px;
    }
  .nav{
    height: calc(var(--header-height) + 1.5rem);
    column-gap: 3rem;
  }
  .nav__toggle,
  .nav__close{
    display: none;
  }
  .nav__list{
    flex-direction: row;
    column-gap: 2.5rem;
  }
  .nav__menu{
    margin-left: auto;
 
  }

  .home__container,
  .about__container,
  .questions__container,
  .contact__container,
  .footer__container{
    grid-template-columns: repeat(2, 1fr);
  }
  
  .home{
    padding: 5rem 0 5rem;
  }
  .home__container{
    align-items: center;
    margin-top: 3rem;
  }
  .home__img{
    order: 1;
  }
  .home__social{
    top: 30%;
  }

  .questions__container{
    align-items: flex-start;
  }
  
  .home__container .decoration-star{
    width: 550px;
    top:20px;
  }
  
  .about__container{
    grid-template-columns: repeat(2, 1fr);
  }
  
  .section__title{
    font-size: 30px;
  }
  .card_rotbe__container {
    grid-template-columns: repeat(1, 328px);
  }
  .card-title{
    font-size: 26px;
    
   }
   .card-title1{
    padding-bottom: 5rem;
  }
  #filterable-cards {
    justify-content: center;
  }

  #filterable-cards .card {
    width: calc(100% / 2 - 10px);
  }
}

/* For large devices */
@media screen and (min-width: 992px){
  .container{
    margin-left: auto;
    margin-right: auto;
    
  }

  .r1{
    margin-top: 4rem;
  }

  .tabs {
		width: 10000px;
	}
  #filterable-cards {
    justify-content: center;
  }

  #filterable-cards .card {
    width: calc(100% / 2 - 10px);
  }
  .section{
    padding: 3rem 0 1rem;
  }
  .section__title,
  .section__title-center{
    font-size: var(--h1-font-size);
  }

  .home{
    padding: 2rem 0 5rem;
    
  }
  .home__img{
    width: 660px;
    padding-right: -7rem;
  }
  
  .about__img{
    width: 370px;
  }

  .about__title{
    text-align: center;
    font-size: 40px;
    margin-bottom: .25rem;
  }

  .questions__container{
    padding: 1rem 0 4rem;
  }
  .questions__title{
    text-align: initial;
  }
  .questions__group{
    row-gap: 2rem;
  }
  .questions__header{
    padding: 1rem;
  }
  .questions__description{
    padding: 0 3.5rem 2.25rem 2.75rem;
  }

  .about__container{
    font-size: 24px;
  }

  .about__description{
    font-size: 15px;
    
  }
  .about__details-description{
    font-size: 14px;
  }
  .about__img{
    width: 480px;
   
  }
  .about__img5{
    width: 460px;
    margin-left: 70px;
  }
  .home__container .decoration-star{
    left: -400px;
    width: 550px;
  }
 .section__title-center{
  text-align: center;
 }
 .card__container {
  max-width: 1120px;
}

.swiper-button-prev {
  left: -1rem;
}
.swiper-button-next {
  right: -1rem;
}
.tarh__container{
  grid-template-columns: repeat(4, 1fr);
}
.tarh__bg{
  padding: 3.5rem 2.5rem;
}
.tarh__card-title{
  font-size: var(--normal-font-size);
}


.section__title,
.section__title-center{
  font-size: var(--h1-font-size);
}
.home__description{
  padding-left: 4rem;
}
.about__img1{
 padding: 2rem;
  padding-top: 6rem;
}

.steps__container{
  grid-template-columns: repeat(3, 1fr);
}
.steps__bg{
  padding: 3.5rem 2.5rem;
}
.steps__card-title{
  font-size: var(--normal-font-size);
}


.footer__container{
  grid-template-columns: 1fr .5fr .5fr .5fr;
}
.about__description{
  font-size: 17px;
  text-align: justify;
  font-weight:500;
}
.about__details-description{
  
 font-size: 15px;
}



.card_rotbe__container {
  grid-template-columns: repeat(3, 345px);
}
.card_rotbe__article {
  padding: 1.5rem 2rem 1rem;
}

.card-title{
 font-size: 26px;
}
.r1{
  flex-direction: row;
}
.r2{
  flex-direction: row-reverse;
}
.lw2{
  margin-top: 4rem;
}
.card-title1{
  
  font-size: 32px;
 }
 .img-ghabouli{
  width: 300px;
   margin-right: 10rem;
}
}


@media screen and (min-width: 1200px){
  #filterable-cards {
    justify-content: center;
  }

  #filterable-cards .card {
    width: calc(100% / 2 - 10px);
  }
  .card_rotbe__container {
    grid-template-columns: repeat(3, 345px);
  }
  .card_rotbe__article {
    padding: 1.5rem 2rem 1rem;
  }
  .card-title{
    font-size: 26px;
   }
   
  .r1{
    flex-direction: row;
  }
  .r2{
    flex-direction: row-reverse;
  }
  .img-ghabouli{
    width: 300px;
     margin-right: 10rem;
  }
  .card-title1{
  
   font-size: 32px;
  }
}















.mt-n5 {
  margin-top: -3rem !important;
}

footer {
  padding-top: 5rem ;
}

.footer-07 {
  background: rgb(46, 42, 89);
  background: linear-gradient(123deg, rgba(46, 42, 89, 1) 0%, rgba(65, 103, 144, 1) 100%);
}

.footer-07 a {
  color: #3dd9eb;
}

.footer-07 p {
  color: rgba(255, 255, 255, 0.3);
}

.footer-07 .footer-heading {
  font-size: 30px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 30px;
}

.footer-07 .footer-heading .logo {
  color: #fff;
}

.footer-07 .menu {
  margin-bottom: 30px;
}

.footer-07 .menu a {
  color: rgba(255, 255, 255, 0.6);
  margin: 0 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer-07 .ftco-footer-social li a {
  background: transparent;
  border: 1px solid #a3de83;
}


.button {
  position: relative;
  border-radius: 6px;
  border: none;
  color: #fff;
  cursor: pointer;
  background-color: #5b7ca8;
  transition: all 0.2s ease;
}

.button:active {
  transform: scale(0.96);
}

.button:before,
.button:after {
  position: absolute;
  content: "";
  width: 150%;
  left: 50%;
  height: 100%;
  transform: translateX(-50%);
  z-index: -1000;
  background-repeat: no-repeat;
}

.button:hover:before {
  top: -70%;
  background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%),
      radial-gradient(circle, transparent 20%, #7d2ae8 20%, transparent 30%),
      radial-gradient(circle, #7d2ae8 20%, transparent 20%),
      radial-gradient(circle, #7d2ae8 20%, transparent 20%),
      radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%),
      radial-gradient(circle, #7d2ae8 20%, transparent 20%),
      radial-gradient(circle, #7d2ae8 20%, transparent 20%),
      radial-gradient(circle, #7d2ae8 20%, transparent 20%),
      radial-gradient(circle, #7d2ae8 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
      10% 10%, 18% 18%;
  background-position: 50% 120%;
  animation: greentopBubbles 0.6s ease;
}

@keyframes greentopBubbles {
  0% {
      background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
          40% 90%, 55% 90%, 70% 90%;
  }

  50% {
      background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
          50% 50%, 65% 20%, 90% 30%;
  }

  100% {
      background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
          50% 40%, 65% 10%, 90% 20%;
      background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}

.button:hover::after {
  bottom: -70%;
  background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%),
      radial-gradient(circle, #7d2ae8 20%, transparent 20%),
      radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%),
      radial-gradient(circle, #7d2ae8 20%, transparent 20%),
      radial-gradient(circle, #7d2ae8 20%, transparent 20%),
      radial-gradient(circle, #7d2ae8 20%, transparent 20%),
      radial-gradient(circle, #7d2ae8 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
  background-position: 50% 0%;
  animation: greenbottomBubbles 0.6s ease;
}

@keyframes greenbottomBubbles {
  0% {
      background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
          70% -10%, 70% 0%;
  }

  50% {
      background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
          105% 0%;
  }

  100% {
      background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
          110% 10%;
      background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}

/* -----------------------------------
** Start  End  Common style
-------------------------------------*/



.mr-blog-entry {
  box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.05);
}

.mr-blog-entry:hover {
  -webkit-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
}

.mr-entry-image {
  position: relative;
  -moz-transition: all .4s ease-in;
  -webkit-transition: all .4s ease-in;
  -o-transition: all .4s ease-in;
  transition: all .4s ease-in;
  overflow: hidden;
}

.mr-entry-image img,
.mr-entry-image .owl-carousel .owl-item img {
  width: 100%;
}

.mr-blog-entry img {
  position: relative;
  width: 100%;
  -moz-transition: all .8s ease;
  -o-transition: all .8s ease;
  -webkit-transition: all .8s ease;
  transition: all .8s ease;
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
  display: block;
}

.mr-blog-entry:hover img {
  -moz-transform: scale(1.15);
  -ms-transform: scale(1.15);
  -o-transform: scale(1.15);
  -webkit-transform: scale(1.15);
  transform: scale(1.15);

}

.mr-entry-image .tag {
  position: absolute;
  right: 0;
  bottom: -1px;
  padding: 5px 10px;
  color: #fff;
  z-index: 9;
}

.mr-entry-image .tag i {
  margin-left: 7px;
}

.mr-entry-image .date {
  position: absolute;
  right: 15px;
  top: 15px;
  border-radius: 90%;
  height: 60px;
  width: 60px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: normal;
  text-transform: uppercase;
  padding-top: 7px;
  z-index: 9;
}

.mr-entry-image .date small {
  display: block;
}

.mr-blog-detail {
  padding: 15px;
  border: 1px solid #fafafa;
}

.mr-entry-title a h5 {
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s;
  font-size: 19px;
  font-weight: bold;
  color: #444;
  margin-bottom: 20px;
}

.mr-entry-meta {
  display: inline-block;
  width: 100%;
  margin-top: 10px;
}

.mr-entry-meta li {
  float: right;
  margin-right: 20px;
}

.mr-entry-meta li a {
  color: #868686;
  font-size: 14px;
}

.mr-entry-meta li:last-child {
  margin-left: 0;
}


/*************************************
End Blog Area
*************************************/




.single-prallex {
  background: url("/assets/img/comment.jpg") no-repeat;
  color: #ffffff;
  position: relative;
  background-size: cover;
}

.single-prallex:before {
  position: absolute;
  content: '';
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.single-prallex .after-overlay:before {
  position: absolute;
  content: '';
  background: rgba(0, 0, 0, 0.29);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.single-prallex .left-side p {
  /*max-width: 405px;*/
  margin-bottom: 19px;
}

.section-heading.left-heading {
  text-align: left;
}

.section-heading.left-heading h2 {
  color: #ffffff;

  font-weight: 400;
  margin-bottom: 56px;
  line-height: 47px;
}

.section-heading.left-heading h2:before,
.section-heading.left-heading h2:after {
  margin-left: 0;
  background: #ffffff;
}

.section-heading.left-heading h2 span {

  color: #ffffff;
}


/* -----------------------------------
** End  Common style
-------------------------------------*/


/* -----------------------------------
** Start Reviews Area
-------------------------------------*/

.section-heading.prallex-heading h2 {
  color: #ffffff;
}

.section-heading.prallex-heading h2:before,
.section-heading.prallex-heading h2:after {
  background: #ffffff;
}

.all-reviews {
  padding-top: 50px;
}

.all-reviews .owl-pagination .owl-page span {
  height: 10px;
  width: 10px;
  border-radius: 500px;
  background: rgba(255, 255, 255, 0.3);
}

.all-reviews .owl-pagination .owl-page.active span {
  background: #FFF;
}

.single-reviews {
  padding-bottom: 35px;
  padding: 25px;
  direction: rtl;
  text-align: justify;
}

.single-reviews .content {
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
}

.single-reviews .content .image {
  position: absolute;
  height: 60px;
  width: 60px;
}

.single-reviews .content .reviewer-name {
  margin-right: 80px;
  text-align: right;
}

.single-reviews .content .reviewer-name h5 {
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 4px;
  font-weight: bold;
}

.single-reviews .content .reviewer-name span {
  font-style: italic;
}

.single-reviews .review-desc {
  position: relative;
  background: rgba(255, 255, 255, 1.0);
  padding: 20px;
  border-radius: 3px;
  -webkit-box-shadow: 0px 8px 30px -20px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 8px 30px -20px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 8px 30px -20px rgba(0, 0, 0, 0.5);
  color: #333;
  /* direction: rtl;
  text-align: justify; */
  font-size: 14px;
  line-height: 26px;
  font-weight: 400;

}

.single-reviews .review-desc:before {
  content: "";
  position: absolute;
  z-index: 9;
  bottom: -15px;
  right: 05%;
  height: 0;
  width: 0;
  border-top: 15px solid rgba(255, 255, 255, 1.0);
  border-right: 15px solid transparent;
}

.mr-star i {
  margin-right: 4px;
  font-size: 16px;
}


/* -----------------------------------
** End  Reviews Area
-------------------------------------*/