@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;
}

.home_sectiontext ul {
  list-style: none;
  padding-right: 26px;
}

.home_sectiontext ul li {
  position: relative;
  padding-right: 32px;
  /* فاصله‌ی متن از marker */
  line-height: 1.8;
}

.home_sectiontext ul li::before {
  content: "";
  position: absolute;
  right: -12px;
  top: 0px;
  width: 25px;
  height: 25px;
  background-image: url(https://royalcode.ir/wp-content/themes/royalcode/Images/ticks.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.home_sectiontext ul li p {
  font-size: 14px;
}

#page {
  background: #F5F5F5;
  height: auto;
  padding: 10px 0px 60px;
}

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

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

.home_sectiontext h2 {
  font-size: 30px;
  font-weight: 700;
}

.home_sectiontext p {
  color: #717182;
  font-size: 16px;
  font-weight: 500;
}

.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-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: right;
  color: #31293D;
}

.home_sectionbusinessdes {
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  text-align: right;
  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;
}

/* sect */
#sect {
  padding: 64px 0px;
}

#sect h2 {
  color: #030213;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 16px;
}

#sect span {
  margin-bottom: 48px;
  display: block;
  color: #717182;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
}

.boxsect {
  box-shadow: 0px 0px 2px #2020206e;
  border-radius: 10px;
  padding: 24px 24px 1px 24px;
}

.boxsect h3 {
  font-size: 24px;
  font-weight: 600;
}

.boxsect span {
  text-align: right !important;
  margin-bottom: 23px !important;
}

.boxsect img {
  width: 40px;
  height: auto;
  margin-bottom: 8px;
}

.centeremt {
  background: #5108C1;
  border-radius: 10px;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: #FFFFFF;
  padding: 24px;
  text-decoration: none;
  cursor: pointer;
  align-content: center;
  align-items: center;
  height: -webkit-fill-available;
}

.centeremt p {
  font-size: 20px !important;
  font-weight: 700 !important;
}

.centeremt span {
  margin-bottom: 16px !important;
  color: #cccccc !important;
}

.ctanew {
  color: #030213;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  display: block;
  background: #fff;
  width: fit-content;
  margin: 48px auto 0px;
  padding: 10px 15px;
  border-radius: 5px;
  transition-duration: 0.5s;
}

.ctanew:hover {
  color: #fff;
  background: #5108C1;

}

/* end sect */
.title_three_box h2 {
  margin-bottom: 16px;
}

.title_three_box span {
  color: #717182;
  font-size: 16px;
  font-weight: 500;
}

.title_three_box {
  margin-bottom: 32px;
}

.threesecr .box-three-sec {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 2px #31313187;
  margin-bottom: 30px;
}

.threesecr .box-three-sec h3 {
  font-size: 18px;
  font-weight: 700;
}

.threesecr .box-three-sec img {
  width: 32px;
  height: auto;
  margin-bottom: 16px;
}

.threesecr .box-three-sec p {
  color: #717182;
  font-size: 14px;
  margin: 0;
}

.box-number {
  background-color: #e4e4e4;
  width: 85px;
  height: 85px;
  border-radius: 50%;
  border: 5px solid #fff;
  box-shadow: 0px 0px 3px #ccc;
  display: block;
  margin: 0px auto 24px;
}

.foursecr .box-number span {
  color: #030213 !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  line-height: 80px;
}

.foursecr h3 {
  font-size: 20px;
  font-weight: 700;
  color: #030213 !important;
  text-align: center;
  margin-bottom: 12px;
}

.foursecr p {
  font-size: 14px;
  color: #717182;
  font-weight: 500;
  text-align: center;
}

.foursecr .col-12 {
  margin-bottom: 30px;
}

.accordion-item {
  margin: 15px 0px;
  border: none;
  box-shadow: 0px 0px 3px #ccc;
  border-radius: 10px;
}

.accordion-button {
  text-align: right;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  display: block;
}

.accordion-button::after {
  display: block;
  float: left;
}

.accordion-button:not(.collapsed) {
  color: #030213;
  background-color: #ffffff;
  box-shadow: inset 0 0px 0 rgba(0, 0, 0, .125);
}

.accordion-button:not(.collapsed)::after {
  color: #030213;
  filter: brightness(0.5);
}

.accordion-item:first-of-type .accordion-button,
.accordion-item:first-of-type {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.accordion-item:last-of-type,
.accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.fivesecr {
  padding: 60px 0px 60px !important;
}

.fivesecr h2.title {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 40px;
  text-align: center;
}

.profile_btnbox {
  background: linear-gradient(211deg,
      #e5d5fd 10.09%,
      rgba(229, 213, 253, 0) 77.4%);
  border-radius: 5px;
  padding: 37px;
}

.profile_btnbox p {
  font-weight: 700;
  font-size: 16px;
  line-height: 30px;
  text-align: center;
  color: #31293d;
  margin-bottom: 19px;
}

.pad-60 {
  padding-top: 50px;
}