/*
	Theme Name: ما هو اسم القالب؟
	Theme URI: https://www.elnooronline.com/
	Author: تم تصميم وتطوير بواسطة شركة النور أون لاين
	Author URI: https://www.elnooronline.com/
*/
/* start part basic */
@import url(assets/css/helper\ v0.2.css);
@import url(assets/css/all.min.css);
@import url(assets/css/bootstrap-rtl-4.5.3.min.css);
@import url(assets/css/aos.css);
@import url(assets/css/slick-theme.css);
@import url(assets/css/slick.css);
@import url(assets/css/animate.min.css);
@import url(assets/css/splide.min.css);
@import url(assets/css/magnific-popup.css);

@font-face {
  font-family: arabic;
  src: url(assets/FONT/Montserrat-Arabic\ Regular.ttf);
}

.zain-extralight {
  font-family: "Zain", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.zain-light {
  font-family: "Zain", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.zain-regular {
  font-family: "Zain", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.zain-bold {
  font-family: "Zain", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.zain-extrabold {
  font-family: "Zain", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.zain-black {
  font-family: "Zain", sans-serif;
  font-weight: 900;
  font-style: normal;

}

.zain-light-italic {
  font-family: "Zain", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.zain-regular-italic {
  font-family: "Zain", sans-serif;
  font-weight: 400;
  font-style: italic;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  /* color: var(--text) !important; */
  text-decoration: none !important;
}

body {
  font-family: "Alexandria", sans-serif;
  overflow-x: hidden !important;
  -webkit-box-sizing: 0;
  box-sizing: 0;
  padding: 0;
  margin: 0;

  direction: rtl;
}

:root {
  --title: rgb(172, 172, 172);
  --prime: rgba(34, 117, 88, 1);
  --second: rgb(66, 161, 128);
  --third: rgba(221, 167, 62, 1);
  --four: rgb(161, 121, 39);
  --sodark: rgba(67, 72, 103, 1);
  --border: transparent;
  --bg: rgb(20, 20, 20);
  --text: white;
  --shadow: 0px 0px 5px 2px rgba(88, 88, 88, 0.144);
}

.backgroun {
  background-color: var(--bg);
  color: var(--text);
}

p::selection,
h1::selection,
h2::selection,
h4::selection,
h5::selection,
h6::selection {
  background-color: var(--prime);
  color: white;
}

p,
h1,
h2,
h4,
h5,
h6 {
  margin: 0px;
}

p {
  font-weight: normal;
  line-height: 30px;
}

ul {
  list-style: none;
}

ul li,
a,
button {
  font-weight: normal !important;
}

input:focus {
  outline: none;
}

.load {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--prime);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
}

.load img {
  width: 20%;
  height: 20%;
}

.loaderlodging {
  height: 100vh;
  z-index: 10000;
  transition: 0.8s;
  /* background-color: var(--third) !important; */
}

.loaderlodging__body {
  overflow: hidden;
}

.loaderlodging__body.afterloading {
  overflow: inherit;
}

.loaderlodging.remove {
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}

.loader {
  width: 48px;
  height: 48px;
  border: 5px solid #cecece;
  border-bottom-color: var(--third);
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

.loaderlodging img {
  width: 250px;
  height: 250px;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

button:focus,
a:focus-visible {
  outline: none;
}

.bg {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  z-index: -1;
}

.bg img {
  width: 100%;
  height: 100%;
}

.dropdown-toggle::after {
  display: none;
}

.dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dropdown-toggle i {
  margin-right: 10px;
}

.p-desc {
  color: rgba(123, 123, 123, 1);
  line-height: 1.8rem;
  word-spacing: 1px;
  font-size: 15px;
}
.title {
  display: flex;
  align-items: center;
  justify-self: center;
  flex-direction: column;
}
.title * {
  margin: 10px 0px;
  color: black;
}
.title .text-secondary * {
  color: var(--second);
}
.title .text-primary * {
  color: var(--prime) !important;
}
.row {
  margin: 0px;
}
.slick-arrow {
  display: none !important;
}

/* start slick  */
.slick-track {
  display: flex !important;
}

.slick-slide {
  height: inherit !important;
}
/* end basic */
/* start header  */
header {
  width: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
}
header.header-2 .head .container {
  border-bottom: solid 1px white;
}
header.header-2 .head {
  background-color: var(--prime);
}
header.header-2 .head * {
  color: white;
}
header.header-2 .head .btn {
  border: white solid 1px;
}
header .head {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100px;
  background-color: white;
}
header .head .container {
}
header .dropdown-item {
  text-align: center;
  border-radius: 3px;
  transition: 1s;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

header .dropdown-item > * {
  color: white !important;
  margin: 0px 5px;
}

header .dropdown-item:hover {
  padding: 15px;
  color: var(--prime) !important;
  background-color: white;
}

header .dropdown-item:hover > * {
  color: var(--prime) !important;
}

header .dropdown-menu {
  transform: translate3d(65px, 55px, 0px) !important;
  background-color: var(--prime);
  padding: 0px;
}

header ul .dropdown-toggle::after {
  display: none;
}

header ul .dropdown-toggle::before {
  content: "\f107";
  position: absolute;
  left: -17px;
  top: 50%;
  transform: translateY(-40%);
  font-family: "Font Awesome 6 Free";
  font-size: 13px;
  font-weight: 800;
}

header .head .logo a {
  display: flex;
  align-items: center;
  justify-content: center;
}

header .head .logo .ico-logo {
  width: 50px;
  height: 85px;
  object-fit: contain;
  animation: movlogo 2s linear infinite;
  position: relative;
  top: 0px;
}

header .head .logo img:last-of-type {
  width: 150px;
  height: 80px;
  object-fit: contain;
  /* margin-right: 15px; */
}

@keyframes movlogo {
  0% {
    top: 0px;
  }

  25% {
    top: -5px;
  }

  75% {
    top: 5px;
  }

  100% {
    top: 0px;
  }
}

header .head .col {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  bottom: 5px;
}

header .head .logo {
  justify-content: flex-start !important;
}

header .head .phone-slide {
  width: 100%;
}
header .head .list-links {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: auto;
}

header .head .list-links > * {
  margin: 0px 20px;
}

header .head ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: auto 20px;
}

header .head li {
  margin: auto 12px !important;
  text-wrap: nowrap;
  position: relative;
}

header .head ul > li > a {
  transition: 1s;
  font-weight: bold;
  color: black;
  font-size: 15px;
}

header .head li:hover > a {
  color: var(--prime);
}

header .head li::after {
  content: "";
  position: absolute;
  left: 0%;
  bottom: -10px;
  width: 0%;
  height: 2px;
  background-color: var(--second);
  transition: 1s;
  z-index: 1;
}

header .head li:hover:after {
  width: 50%;
}

header .head li::before {
  content: "";
  position: absolute;
  right: 0%;
  bottom: -10px;
  width: 0%;
  height: 2px;
  background-color: var(--third);
  transition: 1s;
  z-index: 2;
}

header .head li:hover:before {
  width: 50%;
}

/* header .head .lang-btn button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
} */

header .head .lang-btn .dropdown-toggle::after {
  display: none;
}

header .dropdown2 .dropdown-menu {
  background-color: var(--prime);
  margin: 10px -50px 0px 0px;
  min-width: 200px;
  border-radius: 15px;
  padding: 0px;
}

header .dropdown2 .dropdown-menu:hover a {
  color: white;
}

header .dropdown2 .dropdown-menu .dropdown-item:first-of-type {
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
}

header .dropdown2 .dropdown-menu .dropdown-item:last-of-type {
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
}

header .dropdown2 .dropdown-menu a:hover {
  color: var(--prime);
}

header .dropdown2 .dropdown-menu a {
  padding: 15px;
  color: white;
}

header .acoutn-btn button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--prime);
  margin-left: 15px;
  transition: 1s;
}
header .acoutn-btn:hover button {
  color: var(--prime);
}
header .acoutn-btn button:hover {
  color: white !important;
  background-color: var(--prime) !important;
}
header .acoutn-btn button img {
  margin-left: 10px;
}

header .acoutn-btn button .dropdown-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

header .acoutn-btn button i {
  margin-right: 8px;
}

/*header .buttons-header {*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: space-between;*/
/*}*/

header .buttons-header a {
    margin: 0px 10px;
}

header .buttons-header div {
   margin-left: 10px;

}

header .btns-header {
  display: flex;
  align-items: center;
  justify-content: center;
}

header .btns-header button {
  margin: 0px 5px;
}

/* end header   */
/* ////////////////////////////////////////////// */

/* start landing  */
/* start landing  */
.landing {
  position: relative;
  background-size: cover;
  height: 85vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  overflow: hidden;
}
.landing .autoplay ,
.landing .autoplay * {
  height: 100% !important;
}
.landing .slick-arrow,
.landing .slick-dots{
    display:none !important;
}
.landing .bg {
  width: 100%;
  height: 100%;
}
.landing .bg img {
  width: 100%;
  height: 100%;
}
.landing .float {
  position: absolute;
  top: 40%;
  left: 0;
}
.landing .float .person {
  animation: float 3s linear infinite;
}
.landing .person-ico {
  position: absolute;
  top: 0%;
  left: 70%;
  animation: floatright 3s linear infinite;
}
@keyframes floatright {
  0% {
    top: -2.5%;
    left: 65%;

    /* transform: translatey(0px); */
  }
  50% {
    top: -7.5%;
    left: 70%;

    /* transform: translateX(-30px); */
  }
  100% {
    transform: translateZ(0px);
    top: -2.5%;
    left: 65%;
    /* transform: translatex(0px); */
  }
}

.landing .text-landing {
  width: 50%;
}
.landing .text-landing > * {
  margin: 15px 0px;
}
@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}
/* end landing */
/* start download  */

.donwload {
  width: 100%;
  /*height: 100%;*/
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
}
.donwload .col {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}
.donwload .app {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 20px 0px;
}
.donwload .app span > img {
  width: 80px;
  height: 80px;
  animation: move 2s linear infinite;
}
@keyframes move {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}
.donwload .app span {
  margin: 0px 15px;
}
.donwload .app > span > * {
  margin: 15px 0px;
}

.donwload .about-app * {
  margin-bottom: 10px;
}
.donwload .about-app img {
  width: 50%;
}

/* start message  */

.message {
  position: relative;
}
.message .slick-dots {
  display: none !important;
}
.message .bg {
  width: 100%;
  height: 100%;
}
.message .bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.message .img-circ {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 550px;
  height: 550px;
  object-fit: contain;
  z-index: -1;
}
.message .card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  border-radius: 15px;
  border: solid 1px var(--second);
  margin: 30px 10px;
  padding: 20px;
  z-index: 1;
  overflow: hidden;
}
.message .card h5 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.message .card * {
  transition: 1s;
}
.message .card:hover * {
  /* transform: scale(1.05); */
  /* box-shadow: 0px 0px 20px -5px var(--second); */
  color: white !important;
}
.message .card:hover .btn {
  background-color: white !important;
  color: var(--prime) !important;
}
.message .card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 0%;
  background-color: var(--second);
  border-radius: 15px;
  z-index: -1;
  transition: 1s;
  border-radius: 1px;
}
.message .card:hover:after {
  width: 100%;
  height: 100%;
}
.message .card > * {
  margin: 10px 0px;
}
.message .card img {
  width: 75px;
  height: 75px;
}
.message .card:hover > img {
  background-color: white;
  border-radius: 60%;
  padding: 5px;
}
.message .card h5 img {
  width: 25px;
  height: 25px;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--second) !important;
}

/* start coments  */

.coments {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
}
.coments .card {
  position: relative;
  padding: 20px;
  border: solid 2px var(--prime);
  border-radius: 10px;
  margin: 20px 10px;
  z-index: 1;
  overflow: hidden;
}
.coments .card::after {
  content: "";
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 0%;
  height: 0%;
  background-color: var(--prime);
  z-index: -1;
  transition: 1s;
  border-radius: 5px;
}
.coments .card:hover:after {
  width: 100%;
  height: 100%;
}
.coments .card > * {
  margin-bottom: 10px;
  transition: 1s;
}
.coments .card:hover > * {
  color: white !important;
}
.coments .swiper-slide {
  filter: blur(1px);
  opacity: 0.5;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.coments .swiper-slide-active {
  opacity: 1;
  filter: blur(0px);
}

/* start providers  */

.providers .row {
  margin: 40px 0px;
}
.providers .col {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  margin: 10px 0.5%;
}
.providers .col > * {
  margin-bottom: 20px;
}

.providers .col img {
  height: 200px;
  object-fit: contain;
}

/* start packages  */
.packages .col ul {
  list-style: disc;
}
.packages .col {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 20px;
  border-radius: 10px;
  margin: 10px 0.5%;
  color: white;

  background: linear-gradient(15deg, var(--prime) 50%, var(--second) 100%);
  transition: 1s;
  position: relative;
  bottom: 0px;
}
.packages .col li {
  margin-bottom: 10px;
}
.packages .col > * {
  margin-bottom: 20px;
}
.packages .col:hover {
  background: linear-gradient(15deg, var(--prime) 50%, rgb(47, 172, 128) 100%);
  background-size: 200% 200%;
  background-position: 0% 80%;
  animation: bgMove 3s linear infinite;
  scale: 1.04;
  position: relative;
  bottom: 10px;
}

@keyframes bgMove {
  0% {
    background-position: 0% 80%;
  }
  50% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 80%;
  }
}

/* @keyframes bg {
  0% {
    background: linear-gradient(135deg, var(--prime) 0%, var(--prime-hover) 100%);
  }
  50% {
    background: linear-gradient(0deg, var(--prime)  0%,  var(--prime-hover) 100%);
  }
  100% {
    background: linear-gradient(135deg, var(--prime) 0%, var(--prime-hover) 100%);
  }
} */
/* start clients  */
/* //////////////////////////////////////////////////// */
/* start clients  */
.clients {
  position: relative;
}
.clients .bg {
  width: 100%;
  height: 100%;
}
.clients .bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.clients .coment {
  background-color: white;
  padding: 15px;
  border-radius: 10px;
  margin: 0px 20px;
}
.clients .coment > * {
  margin: 15px 0px;
}
.clients .coment .person-client {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.clients .coment p {
  font-weight: bold;
}
.clients .coment .person-client > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
.clients .coment .person-client > div h5 {
  color: var(--prime);
  margin-bottom: 10px;
}
.clients .coment .person-client > div img {
  margin-left: 15px;
  width: 50px;
  height: 50px;
  object-fit: contain;
}
.stars {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.stars li {
  color: rgb(255, 197, 6);
  margin: 0px 5px;
  font-size: 18px;
}
.clients .slick-dots {
  display: none !important;
}
.clients .slick-prev,
.slick-next {
  top: 105%;
}
.clients .slick-next {
  right: 55%;
}
.clients .slick-prev {
  /* left: 45% !important; */
  right: 40% !important;
}
.clients .bg-title-client {
  position: relative;
  margin-bottom: 30px;
}

.clients .bg-title-client h3 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
}

.slick-next:before {
  content: "\f061";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  font-size: 30px;
  background-color: var(--third);
  border-radius: 50%;
  padding: 10px;
  transition: 1s;
  opacity: 0.5;
}
.slick-prev:before {
  content: "\f060";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  font-size: 30px;
  opacity: 0.5;
  background-color: var(--third);
  border-radius: 50%;
  padding: 10px;
  transition: 1s;
}
.slick-next:hover:before,
.slick-prev:hover:before {
  background-color: var(--third);
}

/* end clients  */
/* //////////////////////////////////////////////////// */
/* start .company  */
.company .splide__track {
  padding: 60px 0px;
}
.company .splide__track img {
  height: 80px;
  width: 100%;
  object-fit: contain;
}
.company .splide__arrow {
  display: none !important;
}
.company .splide__pagination {
  display: none;
}
/* end .company  */

/* start inter pages  */
/* start landing2  */

.landing-2 {
  background-color: var(--prime);
  height: 20vh;
  text-align: center;
}
.landing-2 * {
  color: white;
}

/* start login page  */
.login .box-login {
  box-shadow: var(--shadow);
  border-radius: 10px;
  z-index: -1;
}

.login .col {
  padding: 0px;
}
.login .welcome-conetnt {
  position: relative;
  top: 60px;
}
.login .welcome {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.login .welcome .welcome-conetnt * {
  color: white;
  margin-bottom: 15px;
}
.login form {
  width: 50%;
  margin: auto;
}
.login .col:last-of-type {
  padding: 50px 20px;
}
.login .img-login {
  position: absolute;
  right: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.login .img-login img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}
.login .box-login h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0px;
  color: var(--prime);
}
form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.login .welcome .btn-outline-light:hover{
    color:var(--prime);
}
.form-group {
  width: 100%;
}
.form-group option{
    color:var(--prime) !important;
}
label {
  color: var(--prime);
}
input,
textarea,
select {
  border: solid 1px var(--prime);
  border-radius: 10px;
  padding: 15px;
  width: 100%;
  margin-bottom: 20px;
}
input[type="radio"],
input[type="checkbox"] {
  width: 25px;
  margin-bottom: 0px !important;
}
.form-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.form-center span {
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-center span * {
  color: black;
  margin-bottom: 10px;
}
.form-center span input {
  width: 30px;
  margin: 0px;
  margin-bottom: 10px !important;
}
.form-center span p {
  width: 100%;
}
.btn-login a {
  margin: 10px 5px;
}
.btn-login a img {
  width: 100%;
  height: 50px;
}

form .row {
  width: 100%;
}
.form-group {
  padding: 0px !important;
  margin-left: 1%;
}

/* start contact us  */

.contact-us .card-info-contact .col {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 10px 0.5%;
  background-color: var(--prime);
  background: linear-gradient(var(--prime), var(--second));
  border-radius: 10px;
  padding: 60px;
  color: white;
  filter: grayscale(0.5);
  cursor: pointer;
  transition:1s;
}
.contact-us .card-info-contact .col:hover {
  scale: 1.03;
  filter: grayscale(0);
}
.contact-us .card-info-contact .col img {
  margin-bottom: 10px;
  width: 65px;
  height: 65px;
  object-fit: contain;
}
.contact-us a {
  color: var(--prime);
}
.contact-us a i {
  font-size: 20px;
}

/* start page code  */

.page-code .content-code {
  width: 50%;
  box-shadow: var(--shadow);
  padding: 50px;
  /* border: solid 1px var(--prime); */
  border-radius: 5px;
  margin: auto;
}
.page-code .content-code img {
  width: 50px;
}
.page-code .content-code .code {
  margin: 25px 0px;
}
.page-code .content-code .code input {
  width: 50px;
  height: 50px;
  border-radius: 3px;
  background-color: rgba(232, 249, 239, 1);
  text-align: center;
  font-size: 25px;
  margin: 0px 5px;
}

/* start profile page  */
.profile-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.profile-content .image-profile img {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  border: solid var(--third) 2px;
  object-fit: cover;
}
.profile-content span {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.profile-content span i {
  color: var(--third);
  margin-left: 10px;
}
.profile-content span {
  margin: auto;
  margin-bottom: 25px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-content > * {
  margin-bottom: 20px;
}

/* start page quetions  */

.collap button {
  width: 100%;
  padding:  20px;
  margin: 20px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: 1s;
  background-color: white;
  border-radius: 10px;
  color: var(--prime);
  transition: 1s;
  border: solid 1px rgba(228, 237, 224, 1);
}
.collap button:hover {
  background-color: var(--prime);
  color: white;
}
.collap button i {
  transition: 1s;
  /* display: none; */
}
.collap .collapse {
  padding: 15px;
  margin: 20px 0px;
  border: solid 1px var(--second);
  border-radius: 15px;
  transition: 1s;
}
/* start pagination  */
.pagination {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  margin: 30px 0px;
}
.pagination ul {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pagination ul li a {
  margin: 0px 5px;
  box-shadow: 0px 0px 5px 5px rgba(241, 241, 241, 0.74);
  border-radius: 5px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 1s;
  background-color: white;
}
.pagination ul li a {
  color: black;
  transition: 0.5s;
}
.pagination ul li .active {
  background-color: var(--third);
  color: white;
}
.pagination ul li:hover a {
  background-color: var(--third);
}
.pagination ul li:hover a {
  color: white;
}
.pagination ul .arrow-page:hover a {
  background-color: var(--prime);
  color: white;
}
/* start provider  */
.provider .info-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-shadow: var(--shadow);
  padding: 20px;
  border-radius: 10px;
}
.provider .info-provider img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: solid 2px var(--third);
}
.provider .info-provider {
  margin: 30px 0px;
}
.provider .info-provider * {
  margin: 15px 0px;
}
.coment-provide .coment-provide-content {
  border: solid 1px rgba(228, 237, 224, 1);
  border-radius: 5px;
  padding: 30px;
  margin-bottom: 20px;
}
.coment-provide .coment-info {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.coment-provide span {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;
}
.coment-provide span > * {
  margin-bottom: 10px;
}

/* start profile  */

.profile .profile-edit {
  width: 50%;
  margin: auto;
  box-shadow: var(--shadow);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.profile .profile-edit > * {
  margin-bottom: 15px;
}
.profile .profile-edit .image-profile {
  position: relative;
}
.profile .profile-edit .image-profile img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border: solid 2px var(--third);
  border-radius: 50%;
}
.profile .profile-edit .image-profile label {
  position: absolute;
  right: -10px;
  bottom: 0px;
  background-color: white;
  width: 40px;
  height: 40px;
}
.profile .profile-edit .image-profile label:hover {
  background-color: var(--prime);
}

/* start messages  */


.message-page .nav {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}
.message-page .nav li a {
  margin: 10px;
  background-color: rgba(225, 243, 237, 1);
  /* border:solid 2px var(--prime) ; */
  color: var(--prime);
  padding: 15px;
  border-radius: 5px;
  transition: 1s;
   width: 130px;       /* العرض اللي انت عايزه */
  text-align: center; /* عشان النص يكون في النص */
  display: inline-block; /* يخلّي width يشتغل */
}
.message-page .tab-edit li {
margin: 0px 0px !important;
}

.message-page .nav .active {
  background-color: var(--prime);
  color: white;
}
.message-page .message {
  background-color: rgba(249, 249, 249, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 5px;
  margin-bottom: 20px;
}
.message-page .message > span {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 20px;
}
.message-page .message > span * {
  margin-bottom: 10px;
}
.message-page .message span img {
  margin-left: 20px;
}
.message-page .message span .info-message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.message-page .message span i {
  margin-right: 30px;
}
.message-page .message span .bg-primary,
.message-page .message span .bg-secondary,
.message-page .message span .bg-danger {
  color: white;
  padding: 10px !important;
  border-radius: 5px;
}
/* .message-page .nav li a{
color: var(--prime) !important;
} */

/* start chat  */
.chat-list {
  width: 100%;
}
.chat .box-chat div {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px 0px;
}
.chat .box-chat div button {
  margin: 0px 3px;
}
.chat .box-chat div input {
  border: solid 1px rgba(187, 187, 187, 0.411);
  border-radius: 5px;
  margin: 20px 0px;
  background-color: rgba(230, 230, 230, 0.411);
  width: 100%;
  padding: 5px 25px;
}

.chat .box-chat .search {
  position: relative;
}
.chat .box-chat .search::after {
  content: "";
  background-image: url(assets/img/search.png);
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  background-size: cover;
}
.chat .nav-tabs {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  border: none;
}
.chat .nav-tabs .nav-item {
  width: 100%;
  padding: 1px 5px;
}
.chat .nav-tabs .nav-link {
  border: none;
  border-bottom: solid 1px rgba(124, 124, 124, 0.39);
  padding: 8px 5px;
  width: 100%;
}

.chat .nav-tabs .row {
  width: 100%;
}
.chat .nav-tabs .row > span {
  padding: 0px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.chat .nav-tabs .row span:nth-last-of-type(2) {
  align-items: flex-start;
}
.chat .nav-tabs .row span h6 {
  font-size: 14px;
}
.chat .nav-tabs .row span p {
  font-size: 11px;
}
.chat .box-chat-content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 5px 5px #66666618;
  border-radius: 20px;
  width: 98%;
  background-color: white;
}
.chat .box-chat-content > div {
  height: 100%;
  width: 100%;
}
.chat .head-chat {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(199, 199, 199, 0.445);
}
.chat .head-chat span {
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat .head-chat span img {
  margin-left: 10px;
  width: 35px;
  object-fit: cover;
}
.chat .chating {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
}
.chat .chating img {
  width: 100%;
}
.chat .nav-tabs .nav-link {
  background-color: transparent;
  position: relative;
}
.chat .nav-tabs .nav-link p {
  transition: 1s;
}
.chat .nav-tabs .row span h6 {
  color: var(--second);
  transition: 1s;
}
.chat .nav-tabs .nav-link:hover .row span h6 {
  color: white;
}
.chat .nav-tabs .nav-link:hover p {
  color: white;
}
.chat .nav-tabs .nav-link::after {
  content: "";
  position: absolute;
  right: 0px;
  top: 0px;
  width: 0%;
  height: 100%;
  transition: 1s;
  z-index: -1;
  border-radius: 10px;
}
.chat .nav-tabs .nav-link:hover:after {
  width: 100%;
  background-color: var(--second);
}
.chat .nav-item .active {
  color: var(--prime);
}
.chat .body-chat {
  height: 700px;
  overflow-y: scroll;
}
.chat .fa-info-circle {
  font-size: 20px;
  color: var(--second);
  margin-left: 10px;
}
.chat .fa-info-circle:hover {
  color: var(--prime);
  transition: 1s all;
}
.chat .fa-plus {
  font-size: 20px;
  color: var(--second);
  margin-left: 10px;
}
.chat .fa-plus:hover {
  color: var(--prime);
  cursor: pointer;
  transition: 1s all;
}
.chat .body-chat::-webkit-scrollbar {
  display: none;
}
.chat .body-chat .message {
  display: flex;
  justify-content: flex-start;
  align-items: start;
  margin: 20px;
}
.chat .body-chat .image {
  width: 50%;
}
.chat .body-chat .image .text-message {
  padding: 0 !important;
}
.chat .body-chat .image img {
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 15px;
}
.chat .body-chat img {
  width: 35px;
  object-fit: cover;
}
.chat .body-chat .message .text-message {
  color: white;
  padding: 20px;

  margin-top: 10px !important;
}
.chat .body-chat .message-left {
  display: flex;
  flex-direction: row;
}
.chat .body-chat .message-left .text-message {
  background-color: var(--prime);
  border-radius: 15px;
  border-top-left-radius: 5px;
}
.chat .body-chat .message-right .text-message {
  background-color: rgba(245, 245, 245, 1);
  position: relative;
  right: -20px;
  border-radius: 15px;
  border-top-right-radius: 5px;
  max-width: 75%;
}
.chat .body-chat .message-right .text-message * {
  color: black !important;
}
.chat .body-chat .message-left {
  display: flex;
  flex-direction: row-reverse;
}
.chat .body-chat .message .text-message p {
  color: white;
}
.chat .body-chat .message > * {
  margin: 0px 4px;
}
.chat .footer-chat {
  height: 100%;
  width: 100%;
  border-top: 1px solid rgba(199, 199, 199, 0.445);
  display: flex;
  align-items: center;
}
.chat .footer-chat label {
  margin-top: 10px;
}
.chat .footer-chat div {
  width: 100%;
  display: flex;
  align-items: center;
}
.chat .footer-chat div a {
  color: var(--prime) !important;
  font-weight: bold;
}
.chat .footer-chat div input {
  width: 100%;
  border: solid 1px rgba(219, 219, 219, 0.411);
  border-radius: 15px;
  margin-bottom: 5px;
  background-color: rgba(236, 236, 236, 0.342);
  width: 100%;
  padding: 5px 10px;
}

.chat .end-chat {
  position: relative;
}
.chat .end-chat::after {
  content: "";
  position: absolute;
  left: -45%;
  top: 50%;
  background-color: var(--prime);
  width: 45%;
  height: 2px;
}
.chat .end-chat::before {
  content: "";
  position: absolute;
  right: -45%;
  top: 50%;
  background-color: var(--prime);
  width: 45%;
  height: 2px;
}

/* start order  */
.order-mesaage .status-order ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 40px 0px;
}
.order-mesaage .status-order ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  margin-bottom: 25px;
}
.order-mesaage .status-order ul li::after {
  content: "";
  position: absolute;
  left: 0px;
  bottom: 25%;
  background-color: var(--prime);
  height: 50%;
  width: 2px;
}
.order-mesaage .status-order ul li:last-of-type:after {
  display: none;
}
.order-mesaage .status-order ul li p:first-of-type {
  font-size: 16px;
  width: 25px;
  height: 25px;
  background-color: gray;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  border-radius: 50%;
  border: solid 1px var(--prime);
}
.order-mesaage .status-order ul .active p:first-of-type {
  background-color: var(--prime);
}
.order-mesaage .status-order ul li > * {
  margin-bottom: 20px;
}
.order-mesaage .card-info-contact .col {
  text-align: center;
}
.order-mesaage .card-info-contact .col h3 {
  font-size: 25px;
  margin-top: 10px;
}
.order-mesaage .collap ul li {
  margin-bottom: 15px;
}
.order-mesaage .collap ul li span:last-of-type {
  color: var(--prime);
}
.order-mesaage .collap ul li span {
  margin: 0px 10px;
}
.order-mesaage .collap .content-collapse {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.order-mesaage .collap .content-collapse div > * {
  margin-bottom: 10px;
}
.order-mesaage .collap .content-collapse div .buttons-share {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.order-mesaage .collap .content-collapse div .buttons-share button {
  width: 100%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 15px;
  background-color: var(--prime);
  color: white;
}
.order-mesaage .collap .content-collapse div .buttons-share button:hover {
  background-color: white;
  color: var(--prime);
  border: solid 1px var(--prime);
}

.order-mesaage .button-type {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 35px 0px;
}
.order-mesaage .button-type span input {
  padding: 0px;
  margin: 0px;
  margin-left: 15px;
}
.order-mesaage .button-type span {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px 15px;
}
.order-mesaage .button-type button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  background-color: white;
  border: solid 1px var(--prime);
  border-radius: 5px;
  color: var(--prime);
  min-width: 145px;
  text-align: center;
}
.order-mesaage .button-type button i {
  color: var(--third);
  margin-left: 10px;
}
.order-mesaage .textarea {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
.order-mesaage .textarea button {
  margin-right: 20px;
  font-size: 25px;
}
.order-mesaage textarea {
  background-color: rgba(248, 248, 248, 1);
}
.order-mesaage .time {
  display: flex;
  align-items: center;
  justify-content: center;
}
.order-mesaage .time span {
  margin: 0px 30px;
}
.order-mesaage .time span h2 {
  color: var(--third);
}

.creat-message .details-order {
  box-shadow: var(--shadow);
  padding: 20px;
  border-radius: 15px;
}
/* creat message 3 */
.creat-message .box-shadow {
  box-shadow: var(--shadow);
  margin-bottom: 25px;
  padding: 20px;
  border-radius: 5px;
}
.creat-message .box-shadow h5 {
  margin-bottom: 15px;
}
.creat-message .visa ul li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.creat-message .visa ul li {
  margin: 20px 0.5%;
}
.creat-message .visa ul li p {
  border: solid 1px var(--prime);
  padding: 10px;
  border-radius: 5px;
  min-height: 65px;
  min-width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 1s;
}
.creat-message .visa ul li p:hover {
  background-color: var(--prime);
  color: white !important;
}
.creat-message .visa ul li p * {
  transition: 1s;
}
.creat-message .visa ul li p:hover * {
  color: white !important;
}
.creat-message .visa ul li p span {
  margin: 0px 10px;
}
.creat-message .visa ul li input {
  margin-left: 15px;
}
.creat-message .visa ul li p img {
  width: 50px;
  height: 50px;
  margin-left: 10px;
}
.creat-message .order li {
  margin-bottom: 15px;
}

.creat-message .offer input:first-of-type {
  width: 300px;
}
.creat-message .offer input{
  width: 150px;
  padding: 15px;
  margin-right: 20px;
}

/* start page messag  */
.message-2 .col{
  margin: 10px 0.5%;
  background-color: rgba(245, 245, 245, 1);
  border-radius: 10px;
}
.message-2 .col h3{
  color: var(--third);
}

.provider-2 .coment-info{
  margin-top: 20px !important;
}


/* start thanks  */
.thanks .container{
  display: flex;
  align-items: center;
  justify-content: center;
}
.thanks .thanks-content{
    display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-shadow: var(--shadow);
  padding: 50px 120px;
  border-radius: 10px;
  text-align: center;
}
.thanks .thanks-content img{
  width: 130px;
  height: 130px;
}
.thanks .thanks-content > *{
  margin-bottom: 20px;
}
/* start page money  */
.money .money-content{
  background-color: var(--prime);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60px 30px;
  border-radius: 10px;
  color: white;
}
.money .money-content {
  margin: 25px 0px;
}


/* start modal  */

.modal-dialog{
  width: 45%;
  margin: auto;
  padding: 0px;
}
.modal-dialog .input-budget{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: solid 1px var(--prime);
  padding: 10px;
}
.modal-dialog .input-budget > *{
  margin: 0px 20px;
}
.modal-dialog  form{
  width: 75%;
  margin: auto;
}

 
.rate {
  float: left;
  height: 46px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  
}
.rate:not(:checked) > input {
  position:absolute;
  top:-9999px;
}
.rate:not(:checked) > label {
  border-radius: 5px;
  padding: 10px 0px;
  font-weight: 500;
  color: var(--third);
  background-color: transparent;
  width: 100%;
  margin: 0px 5px;
  filter: grayscale(1);
  transition: .5s;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 35px;
}
.rate:not(:checked) > label:before {
/* content: '★ '; */
width: 100%;
height: 100%;
}
.rate:not(:checked) > label:nth-of-type(1):before {
content: url("assets/image/star.svg") ;
}
.rate:not(:checked) > label:nth-of-type(2):before {
content: url("assets/image/star.svg") ;
}
.rate:not(:checked) > label:nth-of-type(3):before {
content: url("assets/image/star.svg") ;
}
.rate:not(:checked) > label:nth-of-type(4):before {
content: url("assets/image/star.svg") ;
}
.rate:not(:checked) > label:nth-of-type(5):before {
content: url("assets/image/star.svg") ;
}
.rate > input:checked ~ label {
  filter: grayscale(0); 
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
filter: grayscale(0); 
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
  color: #c59b08;
}

/* start footer */
/* start footer */
footer {
  position: relative;
  /* margin-top: 50px; */

  border-top: solid 2px var(--prime);
}

.footer-2::after {
  height: 100%;
}

footer .container-90 {
  border-radius: 20px;
}

footer .container-90 {
  padding-bottom: 0px !important;
  padding-top: 0px !important;
}

footer .col {
  margin: 20px 0%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  color: black;
}

footer .col h2 {
  margin-bottom: 30px;
  color: black;
  position: relative;
  font-size: 25px;
}

/* footer .col h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -20px;
  width: 100%;
  height: 1px;
  background-color: var(--prime);
} */

footer .col ul {
  padding: 0;
  margin-right: 10px;
}

footer .col li {
  margin-bottom: 30px;
  text-align: right;
  color: white;
}

footer .col li a {
  color: black !important;
}

footer .col:last-of-type li a {
  display: flex;
  flex-direction: row;
  align-items: center;
}

footer .logo {
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
}

footer .logo img {
  width: 100%;
  height: 100px;
  object-fit: contain;
}

footer .logo div {
  margin: 0px 10px;
}

footer .social {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0;
  width: 100% !important;
}

footer .social li {
  margin: 0px 5px;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

footer .social li i {
  color: black;
  border-radius: 10px;
  border: solid 1px black;
  padding: 10px;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin: 0px 10px;
  transition: 1s;
}

footer .social li:hover i {
  background-color: var(--third);
  color: white;
  border: solid 1px var(--third);
}

footer .col a {
  color: var(--prime);
}

 .search {
  margin-top: 20px;
}

 .search-content {
  position: relative;
  width: 100%;
}

 .search input {
  width: 100%;
  border-radius: 30px;
  margin-top: 20px;
  padding: 15px;
  border: none;
  font-size: 15px;
  padding-right: 20px;
  box-shadow: 0px 0px 5px 5px rgba(92, 92, 92, 0.199);
}

 .search button {
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
}

footer .footer-new ul {
  margin: 0px;
}

footer .footer-new ul li {
  margin: 20px 0px;
  padding: 0px;
  color: black;
}

footer .footer-new ul li a {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0px;
  color: white;
}

footer .footer-new ul li img {
  width: 75px;
  height: 70px;
  padding-left: 5px;
}

footer .footer-new ul li a span {
  margin-left: 0px;
}

footer .footer-new ul li a span p {
  font-size: 15px;
  margin-top: 5px;
}

footer .end-footer {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  padding: 15px;
  color: black;
  margin-top: 0px;
  border-top: solid 1px white;
  position: relative;
  text-align: center;
}

footer .end-footer p {
  margin-bottom: 10px;
}

footer .end-footer::after {
  content: "";
  position: absolute;
  top: 0px;
  width: 100%;
  height: 1px;
  background-color: var(--prime);
}

footer .elnoor {
  width: 100px;
  height: 30px;
}

footer .col .row {
  margin-top: 30px;
}

footer .col .row {
  width: 50%;
}

footer .col .col {
  padding: 0px;
  margin: 2px 0.5%;
  padding: 5px;
}

footer .col .col img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.end-footer a {
  display: flex !important;
  align-items: center;
  width: 250px;
  color: black !important;
}

.end-footer p {
  color: black;
}

.end {
  display: none;
  position: fixed;
  left: 30px;
  bottom: 30px;
  z-index: 60;
  background-color: var(--third);
  border-radius: 10px;
  height: 40px;
  width: 40px;
}

/* end footer  */

/* end footer  */

/*--------- Responsive ----- */

@media (max-width: 1200px) {
}

@media (min-width: 992px) {
  header .head-phone {
    display: none !important;
  }

  .phone {
    display: flex;
    align-items: center;
  }
}

@media (max-width: 992px) {
  /* start header  */
  .bars {
    font-size: 30px;
    color: var(--third);
  }

  header .phone {
    display: none;
    position: absolute !important;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    align-items: flex-start !important;
    overflow-x: hidden;
  }

  header .head .col {
    align-items: flex-start !important;
  }

  header .container-90 > .row {
    margin-top: 10px;
  }

  header .head .list-links {
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    margin: 0px;
  }

  header .head .list-links > * {
    margin: 20px 10px;
    width: calc(100% - 20px);
    text-align: center;
  }

  header .acoutn-btn button {
    color: var(--prime);
  }

  header .phone-slide {
    position: absolute;
    left: -100%;
    top: 0px;
    height: 100vh;
    width: 50%;
    margin: 0px;

    background-color: var(--prime);
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    transition: 1s;
    z-index: 100;
  }
  header .phone-slide button {
    background-color: white;
    color: var(--prime);
  }
  header .head-phone {
    margin: 30px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  header .head-phone .closes i {
    color: white !important;
    font-size: 35px;
  }

  header .phone-slide ul {
    flex-direction: column;
    align-items: flex-start;
    margin: 0px;
    padding: 0px;
    width: 100% !important;
  }

  header .phone-slide ul li {
    margin: 15px 0px !important;
    padding: 0px;
    width: 95%;
  }

  header .phone-slide ul li a,
  header .phone-slide button * {
    color: white !important;
  }

  header .head .logo {
    justify-content: flex-start !important;
  }

  header .head-phone .logo img {
    width: 150px !important;
  }

  header .head .col-bars {
    display: flex !important;
    justify-content: flex-end !important;
    position: relative;
    left: 15px;
  }

  header .dropdown-menu {
    transform: translate3d(0px, 55px, 0px) !important;
  }
  .landing {
    height: 90vh;
    padding: 20px;
  }
  .landing .bg img {
    object-fit: cover;
  }
  .landing .text-landing {
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .landing .text-landing > * {
    margin: 10px 0px;
  }
  .landing .text-landing h3 {
    font-size: 15px !important;
  }
  .landing .text-landing h1 {
    font-size: 35px;
  }
  .landing .text-landing p {
    font-size: 12px;
  }
  .landing .float {
    /* display: none; */
    z-index: -1;
    opacity: 0.3;
  }
  .landing-2 {
    height: 20vh !important;
    padding: 20px;
  }
  .donwload .app {
    flex-direction: column;
  }
  .login form {
    width: 75%;
  }
  .modal-dialog{
  width: 75%;
  margin: auto;
}
}

@media (max-width: 768px) {
  .slick-arrow {
    display: none !important;
  }

  .title p {
    width: 100%;
  }

  .w-sm-100 {
    width: 100% !important;
  }

header .btns-header i {
    color: white !important;
}
/*.buttons-header,*/
/*.btns-header{*/
/* flex-direction:column;   */
/*}*/

  header .head {
    width: 100%;
    padding: 10px;
  }

  .title h2 {
    font-size: 20px;
  }
  .landing .col h3 {
    font-size: 23px;
  }
  /* start book  */
  .book .info-book {
    width: 100%;
  }
  .book .tab-content .info-book {
    justify-content: center;
  }
  .book .tab-content .card-book {
    height: 100%;
  }
  .book .tab-content .card-body {
    height: 100%;
  }
  .book .card-book .text-book * {
    margin: 10px 0px !important;
  }

  .subjects .card {
    height: 100%;
  }
  .subjects .card img {
    width: 100%;
  }
  .subjects .part-card > div {
    width: 100%;
  }
  .book .tab-content .card-body .btn {
    /* width: 150px; */
    font-size: 10px;
  }
  .book .tab-content .card-body .book-ch {
    justify-content: flex-start;
  }
  .book-ch img {
    width: 60px;
  }
  .landing-2 .container .title-landing-2 h1 {
    font-size: 35px;
  }
  .landing-2 .container .title-landing-2 h4 {
    font-size: 17px;
  }
  /* start footer */
  /* start footer */
  footer .col {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  footer .col:last-of-type li i {
    margin: 25px 10px;
    font-size: 25px;
  }

  footer::after {
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
  }
  .why-us .row .images {
    align-items: center;
  }
  section {
    overflow: hidden;
  }
  .map iframe {
    height: 450px !important;
  }
  section {
    overflow-x: hidden;
  }
  .services-2 .image-services img {
    height: 300px;
  }
  .activity-title * {
    margin: 10px 5px !important;
  }
  .activity-title h2 {
    font-size: 25px;
    line-height: 35px !important;
  }
  .activity-title ul {
    flex-wrap: wrap;
  }
  .activity-title ul li {
    margin: 5px 0px !important;
  }
  /* start inter pages */
  .login form {
    width: 100%;
  }
  .login h2 {
    font-size: 25px;
  }
  .login .welcome-conetnt {
    top: 0px;
  }
  /* start code  */
  .page-code .content-code {
    width: 100%;
    padding: 30px;
  }
  .message-page .phone-message .message {
    flex-direction: column;
  }
  .message-page .phone-message .message span {
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }
  .message-page .phone-message .message span:last-of-type div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
  }
  .message-page .phone-message .message span:last-of-type div p {
    margin: 0px 10px;
  }
  .order-mesaage .collap .content-collapse {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
  }
  .order-mesaage .collap .content-collapse div .buttons-share {
    display: flex;
    justify-content: flex-start;
  }
  .content-collapse > div {
    width: 100%;
  }
  .order-mesaage .status-order ul li:last-of-type:after {
    display: block;
  }
  .btns-header button {
    color: var(--prime) !important;
  }
  .order-mesaage .button-type {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .order-mesaage .button-type button {
    margin-bottom: 15px;
  }
  .creat-message .textarea {
    width: 100% !important;
  }
  .creat-message .offer input{
    margin: 15px 0px;
  }
  .modal-dialog{
  width: 95%;
  margin: auto;
}
.modal-dialog  form{
  width: 95%;
}
.money .money-content{
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
}
.money .money-content > *{
  margin-bottom: 20px;
}
.profile .profile-edit{
  width: 95%;
}
.thanks .thanks-content{
  padding: 30px ;
}
.form-center{
    display:flex;
    flex-direction:column;
}
.form-center button{
    margin:5px 0px;
}
header .buttons-header a,
header .buttons-header button{
    border:solid 1px white;
    border-radius: 5px !important;
}
header .buttons-header a i {
    color:white !important;
}
header .buttons-header div {
   margin-left: 25px;
   margin-bottom:15px;
}
}

@media (max-width: 500px) {
}

@media (max-width: 380px) {
  .landing {
    height: 135vh;
  }
  footer .logo ul li {
    margin: 0px 10px;
    padding: 0;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* start basic js  */
.left-0 {
  left: 0% !important;
}

.flex {
  display: flex !important;
}

.block {
  display: block !important;
}

.noen {
  display: none !important;
}
.rotate180 {
  transform: rotate(180deg) !important;
}
.header-fixed {
  position: fixed !important;
  top: 0%;
  left: 0;
  width: 100%;
  height: 100px;
  transition: 1s;
  z-index: 50;
  transition: 1s all;
  animation-name: down;
  animation-duration: 0.7s;
  transition-delay: 0s;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color:var(--prime) !important;
}

.header-fixed .container {
  border-bottom: none !important;
}
.header-fixed .list-links ul li a,
.header-fixed .list-links i,
.header-fixed .dropdown .dropdown-toggle {
  color: white !important;
}

.header-fixed .dropdown .dropdown-toggle {
  color: white !important;
}
.header-fixed .dropdown .dropdown-toggle:hover {
  color: white !important;
}
 .header-fixed .btn {
     border: white solid 1px ;
} 

@keyframes down {
  from {
    position: fixed;
    top: -100%;
  }

  to {
    position: fixed;
    top: 0%;
  }
}

.auto-hover {
  animation-name: hover;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes hover {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Hide spin buttons in Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}
.phone-country{
    position:relative;
}
.phone-country button{
  position: absolute;
  left: 20px;
    top: calc(50% - 10px);
  transform: translateY(-50%);
}
button#start-record i {
    margin-right: 15px;
}
footer .footer-new ul li a p{
    word-break:break-all;
}