:root {
  --text-color: #333333;
  --app-bg-color: #fff;
  --section-bg-color: #fff;
  --primary-color: #0abead;
}

:root.dark-theme{
  --text-color: #95a5c6;
  --app-bg-color: #161d26;
  --section-bg-color: #1f2935;
  --primary-color: #0abead;
}

:root.dark-theme .header,
:root.dark-theme .about,
:root.dark-theme .resume,
:root.dark-theme .pricing,
:root.dark-theme .package,
:root.dark-theme .resume-list{
  box-shadow: none;
}

:root.dark-theme .home{
  background-image: url("/assets/images/shapes/header-shape-dark.svg");

}

:root.dark-theme .resume-content__title{
  color: #FF6F3C;
}



@font-face {
  font-family: yekan;
  src: url("/assets/fonts/yekan-regular.eot"),
    url("/assets/fonts/Yekan.woff") format("woff"),
    url("/assets/fonts/yekan-regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: shabnam;
  src: url("/assets/fonts/Shabnam-FD.eot"),
    url("/assets/fonts/Shabnam-FD.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: tanha;
  src: url("/assets/fonts/Tanha-FD.eot"),
    url("/assets/fonts/Tanha-FD.woff") format("woff"),
    url("/assets/fonts/Tanha-FD.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* 

- Reset Styles

*/

/*

-- Reset Styles

*/
a {
  text-decoration: none;
}

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

/*

-- App

*/
html {
  font-size: 10px;
}

body {
  font-family: yekan;
  font-size: 1.6rem;
  line-height: 1.5;
  direction: rtl;
  color: var(--text-color);
  background-color: var(--app-bg-color);
  padding-top: 12rem;
}

/*

- Helpers Classes -

*/

.align-items-center {
  align-items: center;
}

.skew-reset {
  transform: skewY(+5deg);
  -webkit-transform: skewY(+5deg);
  -moz-transform: skewY(+5deg);
  -ms-transform: skewY(+5deg);
  -o-transform: skewY(+5deg);
}

.h-100 {
  height: 100%;
}

/*

- Components -

*/

.app-btn {
  width: 16rem;
  height: 5rem;
  border-radius: 4rem;
  -webkit-border-radius: 4rem;
  -moz-border-radius: 4rem;
  -ms-border-radius: 4rem;
  -o-border-radius: 4rem;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--primary-color);
  box-shadow: 0 1.5rem 4rem rgba(11, 190, 173, 40%);
}

.app-btn--orange {
  background-color: #f57f17;
  box-shadow: 0 1.5rem 4rem rgba(245, 127, 23, 24%);
}

.section-head {
  text-align: center;
  margin-bottom: 5rem;
}
.section-head__title {
  font-size: 4.3rem;
  font-weight: bold;
  color: var(--primary-color);
  margin: 0;
}
.section-head__caption {
  color: var(--text-color);
  margin: 0.5rem 0 2rem 0rem;
  letter-spacing: 0.2rem;
}
.section-head__line {
  display: block;
  width: 19rem;
  height: 0.2rem;
  background-color: var(--primary-color);
  margin: 0 auto;
  position: relative;
}

.section-head__line::after {
  position: absolute;
  content: "";
  width: 3rem;
  height: 0.8rem;
  background-color: var(--primary-color);
  border-radius: 2rem;
  -webkit-border-radius: 2rem;
  -moz-border-radius: 2rem;
  -ms-border-radius: 2rem;
  -o-border-radius: 2rem;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}

/*

- Header -

*/

.header {
  background-color: var(--section-bg-color);
  box-shadow: 0 0.5rem 4rem rgba(4, 195, 255, 16%);
  z-index: 100;
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
}

/*

- Navbar Menu -

*/

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  direction: ltr;
}

.nav__logo {
  color: var(--primary-color);
  /* font-family: yekan; */
  font-size: 6rem;
  margin: 0;
}

.menu {
  display: flex;
  direction: rtl;
  z-index: 100;
  /*align-items: center;*/
}

.menu__item {
  margin-right: 4rem;
}

.menu__link {
  display: inline-block;
  color: var(--text-color);
  font-family: yekan;
  transition: all 220ms ease-in-out;
  -webkit-transition: all 220ms ease-in-out;
  -moz-transition: all 220ms ease-in-out;
  -ms-transition: all 220ms ease-in-out;
  -o-transition: all 220ms ease-in-out;
}

.menu__link:hover {
  color: var(--primary-color);
  transition: all 220ms ease-in-out;
  -webkit-transition: all 220ms ease-in-out;
  -moz-transition: all 220ms ease-in-out;
  -ms-transition: all 220ms ease-in-out;
  -o-transition: all 220ms ease-in-out;
}

.menu__link--active {
  color: var(--primary-color);
}

.nav__toggle-icon {
  display: none;
  width: 5rem;
  height: 5rem;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.nav__toggle-line {
  position: relative;
}

.nav__toggle-line,
.nav__toggle-line::before,
.nav__toggle-line::after {
  content: " ";
  width: 4.5rem;
  height: 0.4rem;
  background-color: var(--primary-color);
  border-radius: 2rem;
  transition: all 200ms ease-in;
  -webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  -ms-transition: all 200ms ease-in;
  -o-transition: all 200ms ease-in;
}

.nav__toggle-line::before {
  position: absolute;
  top: 1.2rem;
}

.nav__toggle-line::after {
  position: absolute;
  bottom: 1.2rem;
}

.nav__toggle-icon--open .nav__toggle-line {
  background-color: transparent;
}

.nav__toggle-icon--open .nav__toggle-line::before {
  transform: translateY(-1.2rem) rotate(-45deg);
  -webkit-transform: translateY(-1.2rem) rotate(-45deg);
  -moz-transform: translateY(-1.2rem) rotate(-45deg);
  -ms-transform: translateY(-1.2rem) rotate(-45deg);
  -o-transform: translateY(-1.2rem) rotate(-45deg);
}

.nav__toggle-icon--open .nav__toggle-line::after {
  transform: translateY(1.2rem) rotate(45deg);
  -webkit-transform: translateY(1rem) rotate(45deg);
  -moz-transform: translateY(1rem) rotate(45deg);
  -ms-transform: translateY(1rem) rotate(45deg);
  -o-transform: translateY(1rem) rotate(45deg);
}

/*

- Main -

*/

/* .main {
} */

/*

- Home Section

*/

.home {
  margin-top: 8rem;
  background-image: url("/assets/images/shapes/header-shape.svg");
  background-repeat: no-repeat;
  background-position: bottom;
  height: 80rem;
}
/* .home__content {
} */
.home__name {
  color: var(--primary-color);
  font-size: 2.5rem;
  margin: 0;
}
.home__name span {
  color: #f57f17;
}
.home__title {
  color: var(--primary-color);
  font-size: 5rem;
  margin: 0;
}
.home__caption {
  margin-top: 1rem;
  margin-bottom: 2rem;
  opacity: 0.7;
}
.home__links-wrapper {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
}
/* .home__link {
} */

.home__photo img {
  width: 50rem;
  height: 50rem;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  background-repeat: no-repeat;
  background-position: center top;
  box-shadow: 0 0 4rem rgba(96, 233, 255, 27%);
  object-fit: cover;
  padding: 1.7rem;
}

/*

- About Us Section

*/

.about-us {
  margin-top: 10rem;
}

.about {
  display: flex;
  margin-top: 6rem;
  direction: ltr;
  background-color: var(--section-bg-color);
  box-shadow: 0 0 4rem rgba(96, 233, 255, 27%);
}

.about__image {
  flex-basis: 48%;
  flex-shrink: 0;
}
.about__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about__content {
  flex-basis: 52%;
  flex-shrink: 0;
  padding: 4rem;
  direction: rtl;
}
.about__title {
  font-weight: bold;
  font-size: 2.4rem;
  margin-top: 0;
  margin-bottom: 1rem;
}
.about__description {
  font-size: 20px;
  margin-top: 0;
  margin-bottom: 4rem;
}
.about__list-title {
  color: var(--primary-color);
  font-weight: bold;
  font-size: 1.8rem;
  margin-top: 0;
  margin-bottom: 1rem;
}
.about-list {
  margin-bottom: 3rem;
}
.about-list__item {
  margin-top: 1rem;
  position: relative;
  /* padding-right: -2rem; */
}

/* .about-list__item:last-child {
  margin-top: 0rem;
} */

.about-list__item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -3rem;
  margin: auto;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #f57f17;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
}
.about__links-wrapper {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  width: 100%;
}

/*

- Services Section -

*/

.services {
  margin-top: 10rem;
}
.service {
  color: #fff;
  text-align: center;
  padding: 7rem 4rem;
  position: relative;
  z-index: 5;
  height: 100%;
}
.service__icon {
}
.service__title {
  font-size: 2.4rem;
  font-weight: bold;
  margin: 0;
  margin-top: 1.6rem;
}
.service__caption {
  margin-bottom: 0;
}

.service__wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

.service--blue {
  background-color: #13b6ff;
}
.service--green {
  background-color: #49af46;
}
.service--orange {
  background-color: #ff6331;
}
.service--pink {
  background-color: #ec407a;
}
.service--purple {
  background-color: #8540ff;
}
.service--yellow {
  background-color: #ffc50c;
}

/*

- Resume Section -

*/

.resume {
  margin-top: 20rem;
  box-shadow: 0 0 5rem rgba(19, 182, 255, 24%);
  margin-bottom: 10rem;
  padding: 8rem 0;
  transform: skewY(-5deg);
  -webkit-transform: skewY(-5deg);
  -moz-transform: skewY(-5deg);
  -ms-transform: skewY(-5deg);
  -o-transform: skewY(-5deg);
  background-color: var(--section-bg-color);
}

.resume-list {
  background-color: var(--app-bg-color);
  box-shadow: 0 0 4rem rgba(96, 233, 255, 27%);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 40rem;
  margin-left: 3rem;
}

.resume-list::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: var(--primary-color);
  width: 4rem;
  z-index: -1;
}
.resume-list__item {
  margin-right: -3.2rem;
  margin-bottom: 2.2rem;
  display: flex;
  align-items: center;
  position: relative;
  padding: 0.7rem 0;
  cursor: pointer;
}

.resume-list__item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 4.3rem;
  background-color: var(--primary-color);
  z-index: -1;
  border-radius: 2rem;
  -webkit-border-radius: 2rem;
  -moz-border-radius: 2rem;
  -ms-border-radius: 2rem;
  -o-border-radius: 2rem;
  transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  max-width: 27rem;
}

.resume-list__item--active::before {
  width: 100%;
}

.resume-list__item--active {
  color: #fff;
}
.resume-list__text {
  margin-right: 2.8rem;
  font-weight: bold;
  font-size: 1.8rem;
  transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
}

.resume-list__icon {
  width: 2.2rem;
  height: 2.2rem;
  margin: 0 0;
}

.resume-content {
  border-right: 0.2rem solid var(--primary-color);
  padding-right: 3rem;
  /*padding-top: 1rem;
  */ /*display: none;
  */
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.4s ease-in;
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -ms-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
}
.resume-content--show {
  height: auto;
  overflow: visible;
  opacity: 1;
}
.resume-content__item {
  margin-bottom: 3rem;
}
.resume-content__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.resume-content__title {
  color: #ff5823;
  font-size: 1.8rem;
  font-weight: bold;
  margin: 0;
  position: relative;
}
.resume-content__title::before {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  right: -4rem;
  width: 1.8rem;
  height: 1.8rem;
  background-color: var(--primary-color);
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  margin: auto;
}

.resume-content__date {
  background-color: #f57f17;
  box-shadow: 0 0 4rem rgba(245, 127, 23, 24%);
  color: #fff;
  font-weight: bold;
  font-family: cursive;
  border-radius: 2rem;
  -webkit-border-radius: 2rem;
  -moz-border-radius: 2rem;
  -ms-border-radius: 2rem;
  -o-border-radius: 2rem;
  padding: 0.1rem 1.5rem;
}

.resume-content__subtitle {
  font-weight: bold;
  font-size: 1.6rem;
  margin: 1rem 0;
}
.resume-content__description {
  margin: 0;
}

/*

- Portfolio Section -

*/

.portfolio {
  margin-top: 20rem;
}
.portfolio-list {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 4rem;
  flex-wrap: wrap;
}

.portfolio-list__item {
  padding: 1rem 3rem;
  border-radius: 4rem;
  -webkit-border-radius: 4rem;
  -moz-border-radius: 4rem;
  -ms-border-radius: 4rem;
  -o-border-radius: 4rem;
  cursor: pointer;
  transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
}

.portfolio-list__item--active {
  color: #fff;
  background-color: var(--primary-color);
}
.portfolio-content {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s ease-in;
  -webkit-transition: opacity 0.2s ease-in;
  -moz-transition: opacity 0.2s ease-in;
  -ms-transition: opacity 0.2s ease-in;
  -o-transition: opacity 0.2s ease-in;
}

.portfolio-content--show {
  height: auto;
  /* overflow: visible; */
  opacity: 1;
}
.portfolio-content__img {
}

.swiper-pagination-bullet {
  width: 1.6rem !important;
  height: 1.6rem !important;
  border: 4px solid #bfbebe !important;
  background: #fff !important;
}
.swiper-pagination-bullet-active {
  border-color: var(--primary-color) !important;
}

.swiper-pagination {
  position: static !important;
  margin-top: 1rem;
}

/*

- Priceing Section -

*/

.pricing {
  margin-top: 20rem;
  box-shadow: 0 0 5rem rgba(19, 182, 255, 24%);
  margin-bottom: 10rem;
  padding: 8rem 0 14rem 0;
  transform: skewY(-5deg);
  -webkit-transform: skewY(-5deg);
  -moz-transform: skewY(-5deg);
  -ms-transform: skewY(-5deg);
  -o-transform: skewY(-5deg);
  background-color: var(--section-bg-color);
}
.package {
  box-shadow: 0 0 4rem rgba(96, 233, 255, 27%);
}
.package__head {
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 3rem 0;
}

.package__type {
  margin: 0;
  font-size: 3.2rem;
  font-family: tanha;
}

.package__price {
  font-size: 2.6rem;
  display: flex;
  margin-bottom: 0.5rem;
  font-family: tanha;
  justify-content: center;
  align-items: center;
}

.package__price svg {
  width: 1.5rem;
  height: 1.7rem;
  margin-right: 0.5rem;
}

.package__filter {
  font-family: tanha;
}
.package__body {
  padding: 3rem 0;
  background-color: var(--app-bg-color);
}
.package-options {
  width: 30rem;
  margin: 0 auto;
}
.package-options__item {
  margin-bottom: 2.2rem;
}
.package-options__icon {
  margin-left: 1.2rem;
}
.package__link {
  margin: 2.5rem auto 0 auto;
}

.package__head--orange {
  background-color: #ff6331;
}

.package__head--purple {
  background-color: #803afb;
}

.package__head--pink {
  background-color: #f5276c;
}

.app-btn--purple {
  background-color: #803afb;
  box-shadow: 0 1.5rem 4rem rgb(128 58 251 / 24%);
}

.app-btn--pink {
  background-color: #f5276c;
  box-shadow: 0 1.5rem 4rem rgb(245 39 108 / 24%);
}

/*

- Contact Us Section -

*/

.contactus {
  margin-top: 20rem;
}
.contactus__wrapper {
  background-image: url("/assets/images/map.jpg");
  background-size: cover;
  height: 70rem;
}
.contactus__map {
  direction: ltr;
}
.contactus__icon {
}
.contact {
  background-color: var(--app-bg-color);
  box-shadow: 0 0 4rem rgba(19, 182, 255, 24%);
  max-width: 50rem;
  padding: 4.5rem;
  height: 90%;
}
.contact__title {
  font-size: 3.2rem;
  font-weight: bold;
  color: var(--primary-color);
  margin: 0;
}
.contact__form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2.5rem;
}
.contact__input {
  border: none;
  outline: none;
  padding: 1.5rem 2.5rem;
  box-shadow: 0 0 5rem rgba(96, 233, 255, 27%);
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
  color: var(--text-color);
  background-color: var(--app-bg-color);
}

.contact__input::placeholder {
  color: var(--text-color);
}
.contact__input--textarea {
  resize: vertical;
  max-height: 13rem;
  min-height: 7rem;
}
.contact__submit {
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  outline: none;
  padding: 1.5rem;
  border-radius: 50rem;
  -webkit-border-radius: 50rem;
  -moz-border-radius: 50rem;
  -ms-border-radius: 50rem;
  -o-border-radius: 50rem;
  font-weight: bold;
  font-size: 1.8rem;
  cursor: pointer;
}

/*

- Footer Section -

*/

.footer {
  padding: 2rem 0;
  background-color: var(--app-bg-color);
}

.footer__copy-right {
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 0.15rem;
}
.footer__socials {
  display: flex;
  gap: 1rem;
}
.footer__social{
  width: 5rem;
  height: 5rem;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  background-color: #1f2935;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer__wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer__social svg {
  height: 3rem;
  fill: var(--app-bg-color);
}

.change-theme {
  position: fixed;
  top: 90%;
  bottom: 0;
  right: 1%;
  left: 0;
  z-index: 1000;
  width: 5rem;
  height: 5rem;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  background-color: var(--text-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

.change-theme svg{
  fill: white;
  width: 4rem;
  height: 4rem;
  cursor: pointer;
}