html {
  font-size: 1rem;
  scroll-behavior: smooth;
  /* 
  font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300))); 
  */
}

body {
  /*   font-family: "Roboto", sans-serif;
 */
  font-family: "Outfit", sans-serif;
  scroll-behavior: smooth;
  letter-spacing: 2px;
  line-height: 1.7;
}

:root {
  /*   --main__color: #ff9b51;
  --main__color: #25244d;
  --main__color: #c0c4d4; */
  --main__color: #8c4b9c;
  --hover__color: #a26aab;
  --secondary__color: #242449;
  --top__bottom: 6rem;
  /*   --backgroundDark: #252526;
  --backgroundDark: #111016; */
  --backgroundDark: #0e0d13;
  --background-secondary: #24232b;
  --backgroundLight: rgba(255, 255, 255, 0.1);
}

.custom__span {
  color: var(--main__color);
}

.padding-tb {
  padding: var(--top__bottom) 0;
}

.padding-b {
  padding-bottom: var(--top__bottom);
}

.custom__transition {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.custom__background {
  /*   background-color: #f5f5f5;
 */
}

.list__section .media i {
  color: var(--main__color);
  border: 2px solid var(--main__color);
}

.custom__border-radius {
  border-radius: 0.75rem;
}

.padding-top-bottom {
  padding-top: 5rem;
}

.display-4,
.display-3,
.display-2 {
  font-size: calc(1.425rem + 2.1vw);
}

/**
*
*********************************** navbar ***********************************
*
**/

.navbar {
  /* background-color: rgb(19 17 38);
  /  background-color: #25244d; 
  */
  transition: background-color 0.4s ease-in-out;
}
/* .navbar-light .navbar-brand {
  color: white;
} */

.changeBgColor {
  background-color: rgb(0, 0, 0, 0.685);
  background-color: #25244d;
  transition: all 0.4s ease-in-out;
}

.navbar-light .navbar-brand:focus,
.navbar-light .navbar-brand:hover {
  color: whitesmoke;
}

.navbar-brand {
  font-size: 1.7rem;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.7);
}

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 767px) {
  .navbar-collapse {
    margin-top: 20px;
  }
  .navbar-collapse > ul > li {
    padding: 10px;
  }
}

@media (min-width: 768px) {
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
  .navbar-collapse {
    margin-top: 0;
  }
}

.navbar-expand-md .navbar-nav .nav-link {
  color: #9090a5;
}

/* .navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
  color: whitesmoke;
} */

/**
*
*********************************** hero section ***********************************
*
**/

.hero {
  /*   color: var(--white);
 */ /* background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) , url("../videos/1.gif")); */
  /*   background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url("../images/test.png") center center no-repeat fixed;
  background-size: cover; */
}
.header__company {
  font-size: calc(2rem + 2.1vw);
}

.header__content {
  background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55));
}

.header_image {
  border-radius: 25%;
  background: rgb(37, 36, 77);
  background: linear-gradient(
    90deg,
    rgba(37, 36, 77, 1) 5%,
    rgba(140, 75, 156, 1) 35%,
    rgba(0, 0, 0, 1) 87%
  );
  background: var(--backgroundDark, #252526);
}

/* .header_image::before {
  content: "";
  position: absolute;
  max-width: 100%;
  width: 537px;
  bottom: -20%;
  background-size: cover;
  height: 350px;
  background-image: url(../images/vr_headset_2.png);
  background-position: center center;
} */

.custom__button {
  color: var(--white);
  padding: 1rem 3rem;
  background-color: var(--main__color);
  border: 1px solid var(--white);
  font-weight: 900;
}

.custom__button:hover {
  background-color: var(--main__color);
  border-color: var(--main__color);
}

@media (min-width: 992px) {
  .header .my-form {
    max-width: 350px;
  }
}

/**
*
*********************************** social ***********************************
*
**/

.social__text {
  font-weight: 300;
}

.social__holder a {
  color: #cdd3d9;
  opacity: 0.7;
  width: 48px;
  height: 48px;
  z-index: 1000;
}
.social__holder a > i {
  width: 48px;
  height: 48px;
  font-size: 38px;
  text-align: center;
  padding: 0;
  line-height: 1.3;
}

.social__holder a i.fa-facebook-f:hover {
  color: white;
  background-color: #1877f2;
}

.social__holder a i.fa-twitter:hover {
  color: white;
  background-color: #1da1f2;
}

.social__holder a i.fa-instagram:hover {
  color: white;
  background-color: #c32aa3;
}

.social__holder a i.fa-snapchat:hover {
  color: white;
  background-color: #fffc00;
}

.social__holder a i.fa-linkedin-in:hover {
  color: white;
  background-color: #006192;
}

.social__holder a i.fa-tiktok:hover {
  color: white;
  background-color: #ee1d52;
}

.social__holder a i.fa-youtube:hover {
  color: white;
  background-color: #ff0000;
}

.social__holder a i.fa-youtube::before {
  position: relative;
}

.curve {
  position: absolute;
  width: 100%;
  height: auto;
}

.curve.curve-top {
  top: 0;
  left: 0;
}

.curve.curve-bottom {
  bottom: 0;
  left: 0;
}

/**
*
*********************************** Tabbed ***********************************
*
**/

@media (min-width: 0px) and (max-width: 991px) {
  .tabbed .media {
    display: block;
  }
}

@media (max-width: 991px) and (min-width: 501px) {
  .tabbed .flex-column {
    justify-content: center;
  }
}

.tabbed .nav-pills .nav-link {
  border-radius: 0;
}

.custom__tab {
  height: 70px;
  width: 120px;
  display: flex;
  color: white;
  background-color: #333333;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid white;
}

@media (min-width: 0px) and (max-width: 500px) {
  .custom__tab {
    width: 100%;
  }
}

@media (min-width: 501px) and (max-width: 991px) {
  .tabbed .flex-column {
    flex-direction: row !important;
  }
}

.custom__tab:hover {
  /*   background-color: #ff8b38; */
  background-color: var(--main__color);
  color: white;
}

.tabbed .nav-pills .nav-link.active,
.tabbed .nav-pills .show > .nav-link {
  /* background-color: #ff8b38; */
  background-color: var(--main__color);
  background-color: var(--hover__color);
  border-bottom: none;
}

.tabbed .tab-content button {
  background-color: var(--main__color);
  color: white;
}

.tabbed .tab-content button:hover {
  background-color: #fd8224;
  background-color: var(--hover__color);
}

/**
*
***********************************  introduction section ***********************************
*
**/

.introduction,
.our__mission,
.goals__section,
.why_vr_section {
  background-color: var(--background-secondary);
  padding: 15% 0;
}

/**
*
*********************************** start our goals ***********************************
*
**/

.services__holder {
  display: grid;
  gap: 60px;
  grid-template-columns: repeat(1, minmax(250px, 450px));
  justify-content: center;
}

.goal__container {
  background: var(--secondary__color);
  min-height: 202px;
  z-index: 1;
}

@media (min-width: 767px) {
  .new__section .section__title::after {
    text-align: left;
    display: block;
    transform: translate(0, 50%);
    left: 0;
  }

  .services__holder {
    gap: 40px;
    grid-template-columns: repeat(2, minmax(250px, 1fr));
  }
}

@media (min-width: 992px) {
  .services__holder {
    grid-template-columns: repeat(3, minmax(250px, 1fr));
  }
}

.service-item,
.goal__container {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  position: relative;
}

.service-item::after,
.service-item::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  display: block;
  z-index: -1;
  opacity: 0.6;
  background-repeat: no-repeat;
  background-size: 20%;
}

.service-item::before {
  background-image: url("../../layout/images/back.png");
  top: -4%;
  left: 4%;
  opacity: 0.3;
  background-position: top right;
}

section.services__holder > article:nth-child(1) > .service-item {
  border-top: 12px solid #3a47d5;
}
section.services__holder > article:nth-child(2) > .service-item {
  border-top: 12px solid #f50057;
}
section.services__holder > article:nth-child(3) > .service-item {
  border-top: 12px solid #00b8d4;
}
section.services__holder > article:nth-child(4) > .service-item {
  /*   border-top: 12px solid #1a237e;
 */
  border-top: 12px solid #bfc5ff;
}
section.services__holder > article:nth-child(5) > .service-item {
  border-top: 12px solid #8c4b9c;
}
section.services__holder > article:nth-child(6) > .service-item {
  border-top: 12px solid #ff9b51;
}

/**
*
*********************************** start why_us ***********************************
*
**/

.why_us {
  padding: 15% 0;
  position: relative;
}

.list-group-item {
  background-color: initial;
  /*   border: 1px solid rgba(255, 255, 255, 0.377);
 */
}

.list-group-item i {
  color: #8c4b9c;
}

/**
*
*********************************** start why_vr ***********************************
*
**/

.why_vr_grid {
  display: grid;
  gap: 60px;
  grid-template-columns: repeat(1, minmax(250px, 450px));
  justify-content: center;
}

.why_vr {
  background: var(--backgroundDark);
}

.why_vr i {
  /*   color: var(--main__color);
 */
}

@media (min-width: 992px) {
  .why_vr_grid {
    grid-template-columns: repeat(3, minmax(250px, 1fr));
  }
}

/**
*
*********************************** start list__section ***********************************
*
**/

.list__section .media i {
  height: 48px;
  width: 48px;
  line-height: 40px;
}

@media (max-width: 500px) and (min-width: 0px) {
  .list__section .media {
    display: block;
    text-align: center;
  }
  .list__section .media i.fa-upload,
  .list__section .media i.fa-download {
    text-align: center;
    margin: 0 0 15px;
  }
}

.list__section .section__title::after {
  display: block;
  transform: translate(-50%, -50%);
  justify-content: center;
}

/**
*
*********************************** start awesome ***********************************
*
**/

/**
*
*********************************** pricing awesome ***********************************
*
**/

@media (min-width: 0px) and (max-width: 991px) {
  .my__card {
    margin-bottom: 0 !important;
  }
  .my__card:not(:last-of-type) {
    margin-bottom: 2rem !important;
  }
}

.pricing .card h3.h2 {
  margin-bottom: 0;
  color: white;
}

.pricing .card .card-header {
  background-color: #333333;
  border-bottom: 1px solid white;
}

.pricing .card .card-body {
  background-color: #333333;
  border-bottom: 4px solid var(--main__color);
  color: white;
}

.pricing .card .card-body.card__professional {
  border-bottom: none;
}

.price__span {
  font-size: 70px;
}

.dollar__span {
  font-size: 35px;
}

.card__text {
  color: #c3c3c3;
}

.card .card__list-color {
  color: #6b6b6b;
}

.class__popular {
  background-color: var(--main__color);
  color: white;
  margin-bottom: 0;
  font-weight: bolder;
  text-transform: uppercase;
}

/* ================================= pricing section  =================================  */

.pricing .box {
  position: relative;
  z-index: 1;
  background-color: var(--background-secondary);
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}

.pricing .box::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /*   background: linear-gradient(315deg, #007bff, #007bff);
  background: -webkit-linear-gradient(315deg, #007bff, #ff2ea8); */
  background: var(--main__color);
  z-index: -1;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}

.card-title {
  position: relative;
  font-weight: 900;
}

.power__number .card {
  background-color: var(--background-secondary);
  border-radius: 0;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}

/**
*
*********************************** testimonials section ***********************************
*
**/

.testimonial {
  padding-top: 15%;
  padding-bottom: 15%;
  background-color: var(--background-secondary);
}

.testimonial .text__holder {
  background-color: #f5f5f5;
  position: relative;
  z-index: 10;
  color: #6b6b6b;
}

.testimonial__job {
  color: #6b6b6b;
}

.testimonial .text__holder::after {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  bottom: 0;
  left: 33px;
  background-color: #f5f5f5;
  transform: translate(-50%, 50%) rotate(45deg);
}

/**
*
*********************************** download-section section ***********************************
*
**/

.download-section {
  color: rgba(255, 255, 255, 0.8);
  /* background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)); */
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url("../../layout/videos/2.gif") center center no-repeat;
  background-size: cover;
}

.download-section .h2__title {
  color: #f5f5f5;
}

.download-section .section__title::after {
  border-bottom: 2px solid #f5f5f5;
}

/**
*
*********************************** contact section ***********************************
*
**/

.contact__list li a {
  color: white;
}

/**
*
*********************************** footer section ***********************************
*
**/

.footer {
  /*   background-color: #222831;
 */
  color: #cdcdcd;
}
.footer_p-tb {
  padding: 6rem 0;
}

.footer__header {
  font-size: 800;
  color: white;
}

.footer__p {
  font-weight: 300;
}

.footer_social li {
  margin: 0.5rem 0.5rem 0.5rem 0;
  display: inline-block;
  padding-left: 0;
}

.footer_social a {
  color: #cdcdcd;
  text-decoration: none;
}

.footer_social li {
  position: relative;
  transition: bottom 0.3s ease-in-out;
  bottom: 0;
  display: inline-flex;
  border-radius: 0.25rem;
  overflow: hidden;
  z-index: 1000;
}

.footer_social .icons {
  display: flex;
  text-align: center;
  vertical-align: middle;
  justify-content: center;
  line-height: 1;
  width: 48px;
  height: 48px;
  border-radius: 0;
}

.footer_social li:hover {
  bottom: 6px;
  opacity: 0.7;
  transition: bottom 0.3s ease-in-out;
}

.footer .text__line {
  background-color: #ffffff8a;
}

.footer .section__title::after {
  display: none;
}
.text__line::before,
.text__line::after {
  content: "";
  position: absolute;
  border-top: 2px solid #545b628a;
  width: 60%;
  left: 50%;
}

.footer .text__line::before,
.footer .text__line::after {
  border-top: 2px solid #ffffff8a;
}

.text__line::before {
  bottom: 4px;
  transform: translate(-50%, -100%);
}

.text__line::after {
  top: 4px;
  transform: translate(-50%, 100%);
}

/**
*
*********************************** copyright section ***********************************
*
**/

.copyright {
  /*   background-color: #212124;
 */
  color: #cdcdcd;
}

.floating_social_2 {
  position: fixed;
  right: 15px;
  bottom: 15px;
  flex-direction: column;
  overflow: hidden;
  display: flex;
  z-index: 999;
}

.floating_plus_div {
  border-radius: 50%;
  height: 48px;
  width: 48px;
  background: var(--main__color);
  margin-top: 10px;
}
.floating_plus_div:hover {
  cursor: pointer;
}
.floating_plus_div > i {
  color: white;
  height: 48px;
  width: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.social_container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 48px;
  gap: 6px;
  top: 440px;
  position: relative;
}
.social_container_show {
  top: 0;
}

.social_container > a,
.social_container a i {
  width: 48px;
  height: 48px;
}
.social_container > a#float_1,
.social_container > a#float_2,
.social_container > a#float_3,
.social_container > a#float_4,
.social_container > a#float_5,
.social_container > a#float_6,
.social_container > a#float_7 {
  color: #cdcdcd;
}

@media (max-width: 576px) {
  .footer_social .icons {
    width: 35px;
    height: 35px;
    font-size: 1.3rem;
  }
}

.social_container > a#float_1,
.footer_social .facebook__icon {
  background-color: #1877f2;
}
.social_container > a#float_2,
.footer_social .twitter__icon {
  background-color: #1da1f2;
}

.social_container > a#float_3,
.footer_social .instagram__icon {
  background-color: #c32aa3;
}
.social_container > a#float_4,
.footer_social .snapchat__icon {
  background-color: #fffc00;
  color: white;
}

.social_container > a#float_5,
.footer_social .linkedin__icon {
  background-color: #006192;
}

.social_container > a#float_6,
.footer_social .tiktok__icon {
  background-color: #ee1d52;
}

.social_container > a#float_7,
.footer_social .youtube__icon {
  background-color: #ff0000;
}

/**
*
*
*
*
*
*
*
*********************************** registration Page ***********************************
*
*
*
*
*
*
*
**/

/**
*
*********************************** registration section ***********************************
*
**/
.registration_container {
  background-color: var(--background-secondary);
  border-radius: 25px;
}

.registration_section > .registration_form input[type="text"],
.registration_section > .registration_form input[type="email"],
.registration_section > .registration_form textarea {
  box-shadow: none;
  border-radius: 0;
}

.registration_section .registration_form .textarea__group,
.registration_section .registration_form textarea {
  height: auto;
}

.registration_section button {
  background-color: var(--main__color);
  color: white;
}

.registration_section button:hover {
  background-color: #fd8224;
  background-color: var(--hover__color);
  color: white;
}

.terms-page {
  background-color: var(--background-secondary);
  border-radius: 25px;
}