@import url(../pages/card.css);
@import url(../pages/modal.css);

a {
  text-decoration: none;
}

.home_sectionheaderimage {
  position: absolute;
  left: 0;
  top: 0;
}

.home_sectionheadertitel h1,
.home_sectionheadertitel p {
  font-style: normal;
  font-weight: 700;
  font-size: 28px;
  line-height: 42px;
  text-align: right;
  color: #31293D;
  margin-bottom: 24px;
}

.home_sectionheadertitel h1 span,
.home_sectionheadertitel p span {

  font-size: 32px;
  color: #5108C1;
}

.home_sectionheaderSlogan {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  text-align: right;
  color: #B080FA;
  margin-bottom: 32px;
}

.home_sectionheadertext {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  text-align: right;
  color: #696076;
  padding-left: 23%;
  margin-bottom: 24px;
}

.home_header-btn {
  display: flex;

}

html,
body {
  height: 100vh;
  padding: 0;
  margin: 0;

}

#header {

  background-size: cover;
  position: fixed;
  height: 90%;
  bottom: 10%;
  right: 0;
  left: 0;
  top: 0;
}

#header .center {
  background: white;
  text-align: center;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

#header .center .middle {
  position: absolute;
  margin-top: -8em;
  right: 0;
  left: 0;
  top: 10%;
  padding: 50px 0;
}


#page {
  background: #F5F5F5;
  height: auto;
}

.home_header {
  position: relative;
  margin-top: 120px;
}

.home_servicesbuss-card .col .card {
  background-color: #F5F5F5;
}



/* tablet */
@media (min-width: 767px) and (max-width: 992px) {
  #header {
    position: unset !important;
    height: initial;
  }

  #page {
    position: unset;
  }

  .middle {
    position: unset !important;
    padding-bottom: 0px !important;
  }

  #header .center {
    position: unset;
  }

  .home_sectionheadertitel h1,
  .home_sectionheadertitel p {

    text-align: center;

  }

  .home_sectionimage {
    width: 409px;
    height: 341px;
    margin: auto;

  }

  .c .col-lg-5 {
    order: -1;
  }

  .home_sectionheadertitel {
    margin-top: 90px;
    justify-content: center;
  }

  .home_sectionheaderimage {
    position: absolute;
    left: 0;
    top: 26%;
  }

  .home_sectionheaderSlogan {
    text-align: center;
    margin-top: 16px;
  }

  .home_sectionheadertext {
    text-align: center;
    padding: 0 115px;
    margin-bottom: 0;
  }

  .home_header-btn {
    display: flex;
    justify-content: center;
  }

  #header .center .middle {
    margin-top: -6em;
  }

  .home_header {
    margin-top: 0;
  }
}

/* mobile */
@media screen and (max-width: 767px) {
  .home_header {
    margin-top: 99px;
  }

  .home_sectionheadertitel h1,
  .home_sectionheadertitel h1 span,
  .home_sectionheadertitel p,
  .home_sectionheadertitel p span {
    font-size: 20px;
  }

  .home_sectionheadertext {
    font-size: 14px;
  }

  .home_sectionheadertitel h1 {
    margin-top: 60px;
    text-align: center;
  }

  .home_sectionheadertitel p {
    margin-top: 0px;
  }

  #header .center .middle {
    margin-top: -1em;
  }

  #header {
    position: unset !important;
    height: initial;
  }

  #page {
    position: unset;
  }

  .middle {
    position: unset !important;
    padding-bottom: 0px !important;
  }

  #header .center {
    position: unset;
  }

  .home_sectiontext-btnGetadvice {
    margin-right: 0px !important;
  }

  .c .col-lg-5 {
    order: -1;
  }

  nav {
    height: 70px;
  }

  .home_header-btn {
    display: flex;
    flex-direction: column !important;
  }

  .home_sectiontext-btnGetadvice {
    margin: 16px 0 !important;
  }

  .home_sectionheaderSlogan {
    text-align: center;
    margin-top: 16px;
    font-size: 14px;
  }

  .home_sectionheadertext {
    text-align: center;
    padding: 0px;
    margin-bottom: 16px;
  }

  .home_sectionheaderSlogan {
    text-align: center;
    margin-bottom: 16px;
  }

  .home_sectionimage {
    margin: auto;
    /* margin: 84px auto 0; */
  }

}

/* خط ها  */
@media screen and (max-width: 320px) {
  .home_sectionheaderimage {
    top: 28%;
  }
}

@media (min-width: 321px) and (max-width: 375px) {
  .home_sectionheaderimage {
    top: 26%;
  }
}

@media (min-width: 375px) and (max-width: 426px) {
  .home_sectionheaderimage {
    top: 28%;
  }
}

@media (min-width: 427px) and (max-width: 550px) {
  .home_sectionheaderimage {
    top: 33%;
  }
}

@media (min-width: 550px) and (max-width: 767px) {
  .home_sectionheaderimage {
    top: 35%;
  }
}

/* desktop */
@media screen and (min-width: 992px) {
  .home_sectionheaderimage {
    position: absolute;
    left: 0;
    height: auto;

  }

}

/* خط ها */
@media (min-width: 992px) and (max-width: 1100px) {
  .home_sectionimage {
    margin-left: 30px;
  }

  .home_sectionheaderimage {
    top: 19%;
    width: 100px;
  }
}

@media (min-width: 1440px) and (max-width: 1440px) {}

@media screen and (min-width: 1101px) {
  .home_sectionheaderimage {
    top: 40%;
    width: 130px;
  }

}

/*End Parallax Scrolling Effect */

/*  section text */
.home_sectiontext {
  background: linear-gradient(237.35deg, #E5D5FD -20.66%, rgba(229, 213, 253, 0.89075) -20.66%, rgba(229, 213, 253, 0) 79.91%);
  border-radius: 10px;
  position: relative;
  top: 70px;
}

.home_sectiontext-titel {
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 36px;
  text-align: center;
  color: #31293D;
  margin: 40px 0 32px 0 !important;
}

.home_sectiontext-text {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  text-align: right;
  color: #31293D;
}

.x {
  height: 140px;
  width: 140px !important;
  position: absolute;
  left: 46px;
  bottom: 50px;
}

mark {
  background-color: #FEF1D2;
  border-radius: 10px;

}

.highlight-container,
.highlight {
  position: relative;
}

.highlight-container {
  display: inline-block;
  text-align: center;
  margin-bottom: 32px;
}

.highlight-container:before {
  content: " ";
  display: block;
  height: 90%;
  width: 100%;
  margin-left: -3px;
  margin-right: -3px;
  position: absolute;
  background: #FEF1D2;
  transform: rotate(-2deg);
  top: -1px;
  left: 4px;
  border-radius: 18px;
  padding: 10px 3px 3px 10px;
}

.highlight {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  text-align: right;
  color: #31293D;

}

.home_sectiontext-btnViewservices {
  background: #FFFFFF;
  border: 1px solid #FBB71F;
  border-radius: 5px;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: #FBB71F;
  padding: 10px 0;
  text-decoration: none;
  margin-bottom: 48px;
  cursor: pointer
}

.home_sectiontext-btnGetadvice {
  background: #5108C1;
  border-radius: 5px;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: #FFFFFF;
  margin-right: 20px;
  padding: 10px 0;
  text-decoration: none;
  margin-bottom: 48px;
  cursor: pointer;
  justify-content: center;
}

.home_sectiontext-btnViewservices:hover {
  color: #FBB71F;
  background: linear-gradient(183.22deg, rgba(254, 241, 210, 0.54) -26.39%, rgba(254, 241, 210, 0.11) 97.33%);
  border: 1px solid #FBB71F;
  border-radius: 5px;
}

.home_sectiontext-btnGetadvice:hover {
  color: #FFFFFF;
  background: linear-gradient(180deg, #5108C1 0%, rgba(81, 8, 193, 0.61) 100%);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
}

/* mobile */
@media screen and (max-width: 767px) {
  .home_sectiontext-text {
    font-size: 14px;
  }

  .x {
    display: none;
  }

  .highlight-container {
    margin-bottom: 0px;
  }

  .home_header-btn .home_sectiontext-btnGetadvice {
    order: -1;
  }

  .home_header-btn .home_sectiontext-btnViewservices {
    order: 1;
  }

  .highlight-container {
    display: none;
  }
}

/* tablet */

@media (min-width: 767px) and (max-width: 992px) {
  .x {
    display: none;
  }
}



/* end section text */

/* Our services for your business growth  */

.home_sectionbusinesstitel {
  font-weight: 700;
  font-size: 20px;
  line-height: 36px;
  text-align: center;
  color: #31293D;
}

.home_sectionbusinessdes {
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  text-align: center;
  color: #696076;
}

.home_sectionbusinesstext p {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: #31293D;
  margin: auto;

}

.home_sectionbusinesstext {
  border: none !important;
  background-color: white;
}

.home_sectionbusiness {
  margin-top: 8.5rem;
}

.box {
  width: 250px;
  height: 250px;
  background: linear-gradient(211deg, #E5D5FD 10.09%, rgba(229, 213, 253, 0) 77.4%);
  border-radius: 50%;
  overflow: hidden;
  margin: auto;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  inset: 15px;
  z-index: 3;
}

.content img {
  top: 0;
  left: 0;
  width: 70%;
  height: auto;
  object-fit: contain;
  transition: 0.75s;
  pointer-events: none;
  z-index: 3;
  transform: translateY(18%);
}

.home_servicesbuss-des p {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: #31293D;

}

.home_servicesbuss-card .col .card {
  border: none
}

@media screen and (max-width: 767px) {
  .home_sectionbusinessdes {
    font-size: 14px;
  }

  .home_sectionbusinesstitel {
    margin-bottom: 8px;
  }
}

/*end Our services for your business growth  */

/* why royal */

.home_whyroyaltext {
  font-weight: 400;
  font-size: 16px;
  line-height: 36px;
  text-align: right;
  color: #31293D;
  margin-top: 16px;
}

.home_whyroyaltitel {
  font-weight: 700;
  font-size: 20px;
  line-height: 36px;
  text-align: right;
  color: #5108C1;

}

.home_Ray {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: #31293D;
}

@media screen and (max-width: 767px) {
  .home_whyroyaltext {
    font-size: 14px;
  }

  .home_Ray {
    font-size: 14px;
  }
}

.fullwith {
  width: 100%;
  height: auto;
  border-radius: 5px;
  margin-bottom: 16px;
  margin-top: 16px;
}

.home_sectionheaderimage {
  background: url(https://royalcode.ir/wp-content/themes/royalcode/Images/index/Pattern.png) 100% 100%;
  background-repeat: no-repeat;
  display: block;
  height: 300px;
  width: 110px;
  position: absolute;
}

.home_whyroyaltext a {
  color: #5108C1;
}

/*end why royal */
/*city service section*/
/* 1. اضافه کردن استایل به والد برای وسط‌چین کردن باکس لیست */
.city-link {
  display: flex;
  /* فعال کردن فلکس */
  justify-content: center;
  /* باکس ul را دقیقا وسط می‌آورد */
}

/* 2. تنظیمات لیست */
.city-link ul {
  list-style: none;
  padding: 0;
  /* حذف فاصله پیش‌فرض سمت راست */
  margin: 0;
  width: fit-content;
  /* عرض ul دقیقا به اندازه طولانی‌ترین متن می‌شود */
}

/* 3. تنظیمات آیتم‌ها */
.city-link ul li {
  line-height: 48px;
  text-align: right;
  /* متن داخل باکس سمت راست می‌چسبد */
  width: 100%;
}

/* 4. تنظیمات لینک */
.city-link ul li a {
  text-decoration: none;
  color: #2a2a2a;
  display: block;
  transition: color 0.4s ease-in-out;
  /* باعث می‌شود تمام عرض خط کلیک‌خور شود */
}

.city-link ul li a:hover {
  color: #5108C1;
  /* رنگ ثانویه (بنفش) */
}

.city {
  background: linear-gradient(237.35deg, #E5D5FD -20.66%, rgba(229, 213, 253, 0.89075) -20.66%, rgba(229, 213, 253, 0) 79.91%);
  padding: 31px 0px;
  border-radius: 10px;
}

.city .home_sectionbusinesstitel {
  margin-bottom: 15px;
}