@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@300;400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Roboto&family=Stylish&display=swap");

:root {
  --title-color: #333;
  --body-color: #696969;
  --background-color: #eee;
  --foreground-color: #fff;
  --blend-mode: normal;
}

.dark {
  --title-color: #fff;
  --body-color: #afafaf;
  --background-color: #181621;
  --foreground-color: #211f2a;
  --blend-mode: lighten;
}


/* PRE-LOADER */

.loader_bg {
  position: fixed;
  z-index: 999999;
  background: #090909;
  /* background: #fff; */
  width: 100%;
  height: 100%;
}

.loader {
  border: 0 soild transparent;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  position: absolute;
  top: calc(50vh - 75px);
  left: calc(50vw - 75px);
}

.loader:before,
.loader:after {
  content: '';
  border: 1em solid #a09f9f;
  border-radius: 50%;
  width: inherit;
  height: inherit;
  position: absolute;
  top: 0;
  left: 0;
  animation: loader 2s linear infinite;
  opacity: 0;
}

.loader:before {
  animation-delay: .5s;
}

@keyframes loader {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}



/* ======================= */

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

html {
  font-size: 62.5%;
}

body {
  max-width: 100%;
  height: 100%;
  font-family: "Poppins", sans-serif;
  font-size: 1.6rem;
  color: var(--body-color);
  background-color: var(--background-color);
  transition: color 0.25s, background-color 0.25s;
  overflow-x: hidden;
}

/* THEME DARK / LIGHT CSS START HERE  */
a {
  text-decoration: none;
  color: #fff;
}

#checkbox {
  display: none;
}

.switch {
  border: 3px solid var(--body-color);
  position: relative;
  display: flex;
  justify-content: center;
  width: 5.50rem;
  height: 25px;
  border: 1.2px solid #fff;
  border-radius: 30px;
  cursor: pointer;
  background-color: transparent;
  color: white;
  /* color: var(--title-color); */
}

.switch>* {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.switch__ball {
  left: 1px;
  z-index: 10;
  display: inline-block;
  width: 2.2rem;
  height: 2rem;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.5s cubic-bezier(0.52, -0.4, 0.27, 1.55);
  /* color: var(--title-color); */
}

.switch__sun {
  font-size: 16px;
  left: 5px;
}

.switch__moon {
  font-size: 16px;
  right: 5px;
}

#checkbox:checked+.switch__ball {
  transform: translate(29px, -50%);
}

/* NAVIGATION CSS START HERE */
.primary-header {
  position: fixed;
  top: 0%;
  left: 0;
  z-index: 999;
  width: 100%;
  transition: background-color 0.5s;
  color: #fff;
}

.register {
  max-width: 120rem;
  margin-inline: auto;
  padding-inline: 3.5rem;
}

.navbar {
  height: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid rgba(255, 255, 255, 0.05);
  transition: height 0.25s;
}

@media (max-width:990px) {
  #navbarSupportedContent {
    margin-top: 30px;
    width: 100%;
    height: 450px;
    /* background-color:#ffffffa3 ; */
    background: rgba(0 0 0 /10%);
    backdrop-filter: blur(15px);
    border-radius: 10px;
    /* text-shadow: 1px 1px grey; */
  }

  .switch {
    /* margin-left: 20px; */
  }
}

.navbar a {
  color: #fff;
  font-size: 24px;
  text-align: center;
}

.navbar ul li a {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
}

.navbar .button {
  color: #151515;
  font-size: 16px;
  text-decoration: none;
  font-weight: bold;
}

.logo {
  font-size: 2.7rem;
  font-weight: 900;
}

.logo:hover {
  color: white;
}

.nav-list {
  list-style: none;
  display: flex;
  gap: 2.5rem;
  margin-left: 5rem;
  margin-right: auto;
}

.nav-link {
  transition: color 0.25s;
}

.nav-list.nav-link a {
  color: #fff;
}

.nav-link:hover {
  color: #d3d3d3;
}

.navbar-toggler {
  background-color: #fffffffe;
  height: 3rem;
  width: 4rem;
}

header.active {
  background-color: #fffffffe;
  box-shadow: 0 3px 1rem rgba(0, 0, 0, 0.1);
}
header.active .switch{
  color: #2c2c2c;
  border: 1.2px solid #2c2c2c; 
}

header.active .switch .switch__ball{
  background-color: #2c2c2c;
}

header.active .navbar {
  height: 6rem;
}

header.active .logo,
header.active .nav-link {
  /* color: #313131; */
  color: #2c2c2c;
  font-weight: 900;

}

header.active .nav-link:hover {
  color: #808080;
}

header.active .button {
  background-color: #313131;
  color: #fff;
}

header.active .button:hover {
  background-color: #151515;
}

/* NAVIGATION CSS ENDS HERE */
/* ======== */
.dropdown-menu {
  height: 350px;
}

.dropdown-menu a {
  color: #000000;

}

.dropdown {
  color: #fff;
}

.dropdown:hover {
  color: #fff;
}

.dropdown ul li a {
  text-decoration: none;
  color: #151515;
  font-weight: 600;
}

.dropdown ul li a:hover {
  color: #fff;
}

.dropdown-item {
  padding: 20px;
  font-size: 1.3em;
}

.dropdown-item:hover {
  background-color: #262234;
}

/* ======== */
/* PARALLAL x WORK START HERE */
.parallax {
  margin: 0;
  padding: 0;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("./images/bugatti_chiron_pur_sport_2020_4k_6-HD.jpg");
  --blend-mode: normal;
  width: 100%;
  min-height: 100vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax h1 {
  margin-left: 10%;
  font-weight: bold;
  font-family: "Poppins", sans-serif;
  color: #cfcfcf;
  font-size: 2.1em;

}

.parallax p {
  margin-left: 10%;
  font-family: "Poppins", sans-serif;
  color: #cfcfcf;
}

.parallax button {
  margin-left: 10%;
  height: 50px;
  width: 200px;
  font-family: "Poppins", sans-serif;
  color: white;
  border: 1px solid #fff;
  background-color: transparent;
}

.parallax button:hover {
  background-color: rgba(255, 255, 255, 0.699);
  color: rgb(43, 43, 43);
  transition-duration: 0.8s;
}

.paraContent {
  text-align: center;
  font-weight: bold;
}

.paraContent h1 {
  font-weight: bold;
  font-family: "Poppins", sans-serif;
}

.paraContent p {
  font-family: "Poppins", sans-serif;
}

/* PARALLAL X CSS ENDS HERE */

/* PARALLAL S START HERE */
.parallas {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("./images/take-a-360-degree-video-tour-of-the-bugatti-chirons-opulent-interior.jpg");
  min-height: 110vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}

.parallas h1 {
  /* text-shadow: 4px 4px rgb(54, 53, 53); */
  /* margin-bottom: 10px; */
  text-align: center;
  font-weight: bold;
  font-family: "Poppins", sans-serif;
  color: #bbb2b259;
  font-size: 6vw;
}

.parallas button {
  border-radius: 60px;
  margin: 40px;
  padding: 10px;
  height: 70px;
  width: 300px;
  font-family: "Poppins", sans-serif;
  color: #bbb2b27b;
  font-weight: bolder;
  border: 1px solid #ffffff29;
  background-color: transparent;
}

.parallas button:hover {
  background-color: rgba(255, 255, 255, 0.281);
  color: rgb(10, 10, 10);
  transition-duration: 0.8s;
}

/* .parallas p {
  text-align: center;
  font-family: "Poppins", sans-serif;
  color: #e9e1e1;
  font-size: 1.5rem;
  font-weight: 200;
} */
/* PARALLAL S ENDS HERE */

.background p {
  text-align: center;
  font-size: 3.5vw;
  font-weight: 775;
  font-family: "Playfair Display";
}

/* =============== */
/* ======================== */
.official h1 {
  text-align: center;
  font-size: 2.6em;
  font-weight: bold;
}

.official p {
  text-align: center;
  font-weight: bold;
}

.video video {
  display: block;
  margin: 1em auto;
  width: 100%;
  height: calc(0.5625 * 100vw);
}

/* =============== */
.main {
  display: flex;
  flex-wrap: wrap;
}

.img {
  width: 50%;
}

.img img {
  width: 100%;
}

.tex {
  width: 50%;
  border: 1px solid black;

}

.tex h1 {
  margin-left: 20px;
  font-family: "Playfair Display";
  font-size: 1.5em;
  font-weight: bolder;
  text-align: center;
}

.tex p {
  margin-left: 20px;
  font-size: 1em;
  text-align: center;
  flex-wrap: wrap;
}

@media screen and (max-width:1480px) {
  .main {
    flex-direction: column;
    justify-content: center;
  }

  .img {
    width: 100%;
  }

  .tex {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .tex p {
    overflow: hidden;
  }
}

/* Last card CSS */
.last {
  display: flex;
  position: relative;
  height: 800px;
  width: 100%;
  background-color: #211f2a;
}

/* Last card CSS */
.last {
  display: flex;
  position: relative;
  height: 800px;
  width: 100%;
  background-color: #211f2a;
}

.semi {
  height: 100%;
  width: 50%;
  background-color: #6c777e;
}

.semi-2 {
  height: 100%;
  width: 50%;
  background-color: #0a0b0b;
}

/* Last card CSS */
/* Card 1 CSS START  */
.article-card {
  display: flex;
  justify-content: end;
}

.blog-post {
  --background-color: #181621;

  display: flex;
  /* align-items: center; */
  max-width: 90rem;
  background-color: #fff;
  padding: 2.5rem;
  box-shadow: 0 1.4rem 8rem rgba(0, 0, 0, 0.2);
  border-radius: 0.8rem;
}

.blog-post__img {
  position: relative;
  min-width: 35rem;
  max-width: 35rem;
  height: 30rem;
  transform: translateX(-8rem);
}

.blog-post__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.8rem;
}

.blog-post__img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #868282 0%, #000000 100%);
  box-shadow: 0.5rem 0.5rem 3rem 1px rgba(0, 0, 0, 0.05);
  border-radius: 0.8rem;
  opacity: 0.5;
}

.blog-post__date span {
  display: block;
  color: #8e8c8c;
  font-weight: 600;
  margin: 0.5rem 0;
}

.blog-post__title {
  --title-color: #fff;

  font-size: 2.5rem;
  margin: 1.5rem 0 2rem;
  text-transform: uppercase;
  color: #6c777e;
}

.blog-post__info p {
  --title-color: #fff;

  margin-bottom: 3rem;
  color: rgba(0, 0, 0, 0.7);
}

.blog-post__cta {
  display: inline-block;
  background-image: linear-gradient(to right, #727a82 0%, #a8aeae 100%);
  padding: 1.5rem 3rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  border-radius: 0.8rem;
}

.blog-post__cta:hover {
  background-image: linear-gradient(to right, #a8aeae 0%, #727a82 100%);
}

@media (max-width: 1068px) {
  .blog-post {
    max-width: 80rem;
  }

  .blog-post__img {
    min-width: 30rem;
    max-width: 30rem;
  }
}

@media (max-width: 868px) {
  .blog-post {
    max-width: 70rem;
  }
}

@media (max-width: 768px) {
  .blog-post {
    padding: 2.5rem;
    flex-direction: column;
  }

  .blog-post__img {
    min-width: 100%;
    transform: translate(0, -8rem);
  }
}

/* Card 1 CSS END */

.footer {
  padding-block: 5rem;
  background-color: #151823;
  color: #666873;
}

.footer__container {
  max-width: 116rem;
  margin: auto;
  padding: 0 1.5rem;
}

.footer__top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  row-gap: 2rem;
}

.footer__title {
  font-size: 1.8rem;
  color: #fff;
  font-weight: 500;
  margin-bottom: 2rem;
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.footer__list-item {
  list-style: none;
}

.footer__list-link {
  text-decoration: none;
  color: inherit;
  transition: color 0.25s;
}

.footer__list-link:hover {
  color: #fff;
}

.company__info {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-right: 5rem;
}

.company__logo {
  color: #fff;
}

.company__info ul {
  flex-direction: row;
}

.copyright {
  margin-top: auto;
}

@media screen and (min-width: 40em) {
  .company__info {
    grid-column: span 2;
  }
}

/* Accordance */
.title {
  font-size: clamp(26px, 5vw, 40px);
  /* color: #313131; */
  margin-bottom: 30px;
  color: var(--title-color);

}

.accordion p {
  /* color: var(--title-color); */
  color: #8b8888;

}

.fon {
  color: var(--title-color);
  color: #6b6b6b;

}

.fon-3 {
  /* color: var(--title-color); */
  color: #333;

}

.fon-4 {
  color: #333;
}

.accordion-panel {
  padding: 7px 21px;
  margin-bottom: 24px;
  border: 1px solid #777e91;
  border-radius: 8px;
  background-color: var(--foreground-color);

}

.accordion-question .accordion-question .fon {
  color: #313131;
  /* --title-color: #fff; */
}

.accordion input {
  display: none;
  --title-color: #fff;
}

.accordion label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 15px;
  padding-block: 7px;
  /* color: #f4f5f6; */
  cursor: pointer;
  transition: color 0.25s;
  --title-color: #fff;
}

.accordion label:hover,
.accordion input:checked+label {
  color: #797474;
}

.accordion i {
  color: #6a6c71;
}

.accordion .close {
  display: none;
}

.accordion input:checked+label .close {
  display: block;
}

.accordion input:checked+label .open {
  display: none;
}

.accordion-body {
  height: 0;
  overflow: hidden;
  transition: height 0.25s ease-in-out;
}

.accordion-answer {
  --title-color: #fff;
  font-family: "poppins", sans-serif;
  font-size: 15px;
  color: #777e91;
  padding-top: 5px;
  padding-bottom: 7px;
  opacity: 0;
  transform: scale(0);
  transform-origin: top left;
  transition: opacity 0.75s, transform 0.15s;
}

.accordion input:checked~.accordion-body {
  height: max-content;
}

.accordion input:checked~.accordion-body .accordion-answer {
  opacity: 1;
  transform: scale(1);
}

/* ============= */

/* Video Parallal X */

/* ============= */