@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

body {
  font-family: "Poppins", serif !important;
  font-weight: 400;
  background-color: rgba(255, 255, 255, 1) !important;
  font-style: normal;
  overflow-x: hidden !important;
  --text-color: rgba(23, 23, 23, 1);
}
.inter-hero {
  padding: 150px 0px;
}
.head {
  background-color: rgba(255, 255, 255, 1);
  height: 100px;
}
.light-head {
  background-color: rgba(255, 255, 255, 1);
  height: 100px;
  border-bottom: 1px solid rgba(205, 205, 205, 1);
}
.sticky-top {
  position: fixed !important; /* Makes the header sticky */
  top: 0; /* Keeps it at the top */
  z-index: 99 !important; /* Ensures it stays above other content */
  width: 100%; /* Ensures the header spans the full width */
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0px;
}

.header img {
  width: 250px;
}

.header ul {
  padding: 0px !important;
  margin: 0px !important;
}

.header ul li {
  display: inline-flex;
  padding: 10px 20px;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  text-align: left;
  color: white;
}
.light-head ul li {
  color: rgba(23, 23, 23, 1);
}
.header ul li a {
  color: white !important;
}
.header-light ul li a {
  color: rgba(23, 23, 23, 1) !important;
}
.btn-bg:hover {
  border: 1px solid rgba(114, 28, 152, 1);
  color: white;
  background-color: transparent;
}
.about-btn:hover {
  border: 1px solid rgba(114, 28, 152, 1);
  color: white;
  background-color: rgba(114, 28, 152, 1);
}
.hero {
  background-image: url(../images/main-banner.png);
  background-repeat: no-repeat;
  background-size: cover;
  /* height: calc(100vh - 100px); */
  margin-top: 100px;
}
.light-hero {
  background-image: none !important;
}
.light-inner-hero {
  background-image: none !important;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  display: block !important;
  text-align: center !important;
  color: black;
}
.hero h1 {
  font-size: 55px;
  font-weight: 400;
  line-height: 55px;
  text-align: left;
  color: rgba(255, 255, 255, 1);
}
.light-hero h1 {
  text-align: center !important;
  color: var(--text-color);
  font-weight: 500;
}

.hero p {
  color: rgba(255, 255, 255, 1);
  font-size: 22px;
  font-weight: 400;
  line-height: 33px;
}
.light-hero p {
  text-align: center !important;
  color: var(--text-color);
}
.inner-hero {
  /* background-image: url(../images/hero-2.png); */
  background-repeat: no-repeat;
  /* height: 100%; */
  background-size: cover;
  position: relative;
  display: flex;
  align-items: center;
}

.btn-bg {
  background-color: rgba(114, 28, 152, 1);
  padding: 5px 50px;
  border-radius: 30px;
  border: 1px solid rgba(114, 28, 152, 1);
  color: white;
  font-size: 18px;
  font-weight: 500;
  transition: 0.3s all ease-in-out;
  line-height: 27px;
}
.light-btn-bg {
  background-color: rgba(114, 28, 152, 1);
  padding: 5px 50px;
  border-radius: 30px;
  border: 1px solid rgba(114, 28, 152, 1);
  color: white;
  font-size: 18px;
  font-weight: 500;
  transition: 0.3s all ease-in-out;
  line-height: 27px;
}
.light-btn-bg:hover {
  background-color: rgb(75, 6, 102);
  padding: 5px 50px;
  border-radius: 30px;
  border: 1px solid rgb(75, 6, 102);
  color: white;
  font-size: 18px;
  font-weight: 500;
  transition: 0.3s all ease-in-out;
  line-height: 27px;
}
.btn-otuline {
  background-color: transparent;
  padding: 5px 50px;
  border-radius: 30px;
  border: 1px solid white;
  color: white;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  transition: 0.3s all ease-in-out;
}
.btn-otulines {
  /* background-color: transparent; */
  padding: 5px 50px;
  border-radius: 30px;
  border: 1px solid rgba(55, 55, 55, 1);
  color: rgba(132, 24, 179, 1) !important;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  transition: 0.3s all ease-in-out;
}
.btn-otulines:hover {
  background-color: rgba(114, 28, 152, 1) !important;
  border: 1px solid rgba(114, 28, 152, 1) !important;
  color: white !important;
}
.bottom-light {
  position: absolute;
  bottom: 30px;
  left: -70px;
}
.bottom-light img {
  width: 112%;
}
.about-light h1 {
  color: var(--text-color);
}
.btn-otuline:hover {
  background-color: rgba(114, 28, 152, 1) !important;
  border: 1px solid rgba(114, 28, 152, 1) !important;
}
.banner-man {
  position: absolute;
  bottom: 0;
  right: 100px;
  display: flex;
  align-items: center;
  justify-content: end;
}
/* .banner-man img {
  width: 80%;
} */
.side-ellipse {
  font-size: 19px;
  font-weight: 400;
  line-height: 28.5px;
  color: rgba(255, 255, 255, 1);
  rotate: 270deg;
  width: 80%;
}
.about h2 {
  font-size: 40px;
  font-weight: 400;
  line-height: 60px;
  text-align: left;
  color: rgba(255, 255, 255, 1);
}
.about-light h2 {
  color: var(--text-color);
  font-weight: 600;
}
.about p {
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  text-align: left;
  color: rgba(255, 255, 255, 1);
}
.about-light p {
  color: var(--text-color);
}
.about-btn {
  background-color: transparent;
  padding: 10px 20px;
  border-radius: 30px;
  border: 1px solid rgba(44, 48, 53, 1);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: rgba(255, 255, 255, 1);
  transition: 0.3s all ease-in-out;
}
.slick-slide {
  display: flex !important;
  width: fit-content;
  align-items: center !important; /* Center vertically */
  text-align: center !important;
  color: white;
  height: 300px !important; /* Set a fixed height for the slides */
}
.slick-slide img {
}
.card-cus {
  background-color: rgba(8, 18, 29, 1);
  padding: 40px;
  border-radius: 15px;
  height: 100%;
}
.card-cus h3 {
  font-size: 29px !important;
  font-weight: 400;
  line-height: 37px;
  color: rgba(255, 255, 255, 1);
}
.sell {
  position: relative;
  padding: 0px 0px 30px;
}
.sell-light {
  background-color: #ededed;
  border-radius: 24px;
  padding: 40px 50px;
}
.sell-light .card-cus {
  background-color: white;
  color: var(--text-color);
}
.sell-light .card-cus h3 {
  color: var(--text-color);
}
.sell-light h2 {
  color: rgba(61, 64, 68, 1) !important;
  font-weight: 600 !important;
}
.sell-light .card-cus p {
  color: var(--text-color);
}
.sell h2 {
  font-size: 40px;
  font-weight: 400;
  line-height: 67.5px;
  color: rgba(255, 255, 255, 1);
}
.sell p {
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: rgba(255, 255, 255, 1);
}
.sell img {
  width: 367px;
  position: absolute;
  top: 100px;
  z-index: -1;
}
.inner-card {
  padding: 30px 50px;
  border-radius: 10px;
  cursor: pointer;
}
.light-wedo .inner-card:hover {
  background-color: rgba(33, 12, 45, 1) !important;
}
.inner-card h3 {
  font-size: 29px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 43.5px;
}
.inner-card p {
  color: rgba(255, 255, 255, 1);

  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
}
.inner-card:hover {
  background-color: rgba(5, 14, 24, 1);
}

.image-sector img {
  height: 80px;
  object-fit: contain;
  margin: 20px 0px;
}
.faq h2 {
  font-size: 40px;
  font-weight: 300;
  color: rgba(255, 255, 255, 1);
  line-height: 52.5px;
}
.light-faq h2 {
  font-weight: 600;
  color: var(--text-color);
}
.faq p {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;

  color: rgba(255, 255, 255, 1);
}
.light-faq p {
  font-weight: 400;
  color: var(--text-color);
}

.accordion {
  --bs-accordion-bg: #030a12 !important;
  border: none !important;
  --bs-accordion-border-color: none !important;
  box-shadow: none !important;
}
.light-faq .accordion {
  --bs-accordion-bg: white !important;
}
.accordion-button:not(.collapsed) {
  background-color: #030a12 !important;
  color: rgba(255, 255, 255, 1) !important;
}
.light-faq .accordion-button:not(.collapsed) {
  background-color: white !important;
  color: var(--text-color) !important;
}
.accordion-button {
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 42px !important;
  color: rgba(255, 255, 255, 1) !important;
  padding: 10px !important;
  box-shadow: none !important;
}
.light-faq .accordion-button {
  color: var(--text-color) !important;
  font-weight: 600 !important;
}
.accordion-body {
  font-size: 20px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 1) !important;
  line-height: 30px !important;
}
.light-faq .accordion-body {
  color: rgb(0, 0, 0) !important;
}
.accordion-item {
  margin: 10px 0px;
  border-bottom: 1px solid rgba(162, 162, 162, 1) !important;
}
.accordion-button::after {
  display: none;
}
.slick-slide img {
  width: 150px !important;
}
.contact .form-control {
  border: 0.5px solid rgba(129, 148, 164, 1) !important;
  padding: 15px !important;
  color: rgba(129, 148, 164, 1) !important;
  background-color: transparent !important;
}
.light-contact .form-control {
  border: 0.5px solid rgba(255, 255, 255, 1) !important;
  color: white !important;
}
.contact .form-control::placeholder {
  color: rgba(129, 148, 164, 1) !important;
}
.light-contact .form-control::placeholder {
  color: white !important;
}
.light-contact .card-cus {
  background-image: url(../images/contact-bg.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: none !important;
  border-radius: 28px !important
}
.contact h2 {
  font-size: 40px;
  font-weight: 300;
  line-height: 48px;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 1) !important;
}
.contact p {
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: rgba(206, 216, 223, 1) !important;
}
.light-contact p {
  color: white !important;
}
.right-p {
  display: flex;
  align-items: start;
  gap: 10px;
}
.right-p p {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}
.wedo h2 {
  font-size: 40px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1) !important;
  line-height: 67.5px;
}
.active {
  color: white !important;
  font-weight: 700 !important;
}
.about {
  position: relative;
}
.about-e {
  position: absolute;
  right: 0;
  width: 367px;
  bottom: 0;
  z-index: -1;
}
.footer p {
  font-size: 16px;
  font-weight: 400;
  line-height: 26.45px;
  color: rgba(146, 146, 146, 1);
}
.footer-light p a {
  color: rgba(146, 146, 146, 1) !important;
  font-weight: 400 !important;
}
.footer-light p a:hover {
  color: var(--text-color) !important;
}
.offcanvas {
  --bs-offcanvas-zindex: 10000000 !important;
  background-color: #030a12 !important;
}
.offcanvas-light {
  background-color: white !important;
}
.footer ul {
  padding: 0px;
  margin: 0px;
  display: inline-flex;
}
.footer ul li {
  list-style-type: none;
  color: rgba(255, 255, 255, 0.49);
  padding: 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 16.45px;
  cursor: pointer;
}

.footer ul li a {
  color: rgba(255, 255, 255, 0.49) !important;
}
.footer-light ul li a {
  color: rgba(0, 0, 0, 0.49) !important;
}
.footer ul li a:hover {
  color: white !important;
}
.footer-light ul li a:hover {
  color: var(--text-color) !important;
}
.footer-light ul li a.active {
  color: var(--text-color) !important;
}
a {
  text-decoration: none !important;
  color: rgba(255, 255, 255, 0.49) !important;
}
.footer svg {
  cursor: pointer;
}
.footer svg:hover path {
  fill: white !important;
}
.footer-light svg:hover path {
  fill: rgba(36, 36, 36, 0.699) !important;
}
.offcanvas-body ul {
  padding: 0px;
  margin: 0px;
}
.offcanvas-body ul li {
  color: black;
  list-style-type: none;
  padding: 7px !important;
}
.offcanvas-body ul li a {
  padding: 7px !important;
  color: black !important;
}
.lig .content-list {
  display: none !important;
  transition: 0.3s all ease-in-out;
}
.sell-light .card-cus:hover {
  /* background-color: rgb(33, 12, 45); */
  cursor: pointer;
  /* color: white !important; */
}
.content-list.show {
  display: block !important;
}
.inner-modal {
  border-radius: 0px !important;
  background-image: url(../images/Modal-bg.svg);
  background-repeat: no-repeat;
  background-size: 13%;
}
.modal-header {
  border-bottom: none !important;
}
.modal-footer {
  border-top: none !important;
}

.inner-modal h4 {
  font-family: Poppins;
  font-size: 30.09px;
  font-weight: 700;
  line-height: 37.13px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
.inner-modal img {
  height: 170px;
  width: 170px;
  object-fit: contain;
}
.inner-modal p {
  font-family: Poppins;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
.about-page {
  margin-top: 100px;
  background-color: #efefef;
}
.about-page h1 {
  font-family: Poppins;
  font-size: 45px !important;
  font-weight: 700 !important;
  line-height: 67.5px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
.teams h3 {
  font-family: Poppins;
  font-size: 27.05px;
  font-weight: 700;
  line-height: 30.58px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
.teams p {
  font-family: Poppins;
  font-size: 20px;
  font-weight: 400;
  line-height: 36px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
.teams {
  cursor: pointer;
}
.teams img {
  transition: filter 0.3s ease;
  filter: saturate(0);
  width: 100%;
}
.teams img:hover {
  filter: saturate(1);
}
.journey {
  padding: 50px 0px;
  background-color: rgba(22, 22, 22, 1);
}
.journey h2 {
  font-family: Poppins;
  font-size: 45px;
  font-weight: 600;
  line-height: 67.5px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: white;
}
.journey h3 {
  font-family: Poppins;
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;

  color: white;
}
.hero-why {
  margin-top: 100px;
  background-image: url(../images/why-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 150px 0px;
}
.hero-why h2 {
  font-family: Poppins;
  font-size: 50px;
  font-weight: 400;
  line-height: 65px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: white;
}
.whyweare {
  background-color: rgb(243 243 243);
  padding: 60px;
  border-radius: 24px;
}
.whyweare h2 {
  font-family: Poppins;
  font-size: 40px;
  font-weight: 600;
  line-height: 50px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
.whyweare p {
  font-family: Poppins;
  font-size: 20px;
  font-weight: 400;
  line-height: 33px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
.why-card {
  padding: 70px;
  background-color: white;
  height: 100%;
  border-radius: 15px;
}
.why-card h4 {
  font-family: Poppins;
  font-size: 29px;
  font-weight: 500;
  line-height: 37px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
.why-card p {
  font-family: Poppins;
  font-size: 20px;
  font-weight: 400;
  line-height: 33px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
.services-page {
  margin-top: 100px;

  padding: 50px 0px;
}
.services-page h2 {
  font-family: Poppins;
  font-size: 45px !important;
  font-weight: 700 !important;
  line-height: 67.5px;
  
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
.services-page p {
  font-family: Poppins;
  font-size: 20px;
  font-weight: 400;
  line-height: 33px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
.inner-services {
  background-color: rgb(243 243 243);
  padding: 60px;
  border-radius: 24px;
}
.internal-sec {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 24px;
  padding: 40px;
}
.internal-sec h4 {
  font-family: Poppins;
  font-size: 29px;
  font-weight: 500;
  line-height: 37px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
.internal-sec p {
  font-family: Poppins;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
.internal-sec h5 {
  font-size: 15px;
  font-weight: 700;
  line-height: 18.15px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
.internal-sec .sss p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24.15px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
.additional {
  background-color: black;
  border-radius: 24px;
  padding: 40px;
}
.modal {
  --bs-modal-width: 1000px !important;
}
.additional h2 {
  font-family: Poppins;
  font-size: 29px;
  font-weight: 500;
  line-height: 37px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: white;
}
.additional p {
  font-size: 16px;
  font-weight: 400;
  line-height: 25.15px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: white;
}
.inner-modal {
  background-color: white;
  padding: 50px;
  border-radius: 2px;
}
.privacy h3{
  font-size: 23px !important;
  font-weight: 500 !important;
  line-height: 37px;

}
.privacy ul li{
  font-family: Poppins;
    font-size: 20px;
    font-weight: 400;
    line-height: 33px;
}
#responseMessage {
  margin-top: 20px;
  color: rgb(9, 221, 9);
  font-size: 16px;
}
#responseMessage.error {
  color: red;
}
.services-page  .form-control {
  border: none !important;
  background-color: white !important;
  padding: 18px !important;
}
.services-page  label {
  margin-bottom: 10px !important;
  color: #030a12;
}
@media only screen and (max-width: 1300px) {
  /* .banner-man img {
    width: 47%;
  } */
  .side-ellipse {
    width: 32%;
  }
}
@media only screen and (max-width: 992px) {
  .privacy h3 {
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 31px;
}
.privacy ul li {
  font-size: 15px !important;
  line-height: 28px !important;

}
  .additional{
    padding: 30px
  }
  .footer ul {
    padding: 0px;
    margin: 0px;
    display: flex;
    flex-direction: column;
  }
  .card-cus {
    padding: 20px;
  }
  .sell-light {
    padding: 20px;
  }
  .container {
    padding: 0px 20px !important;
  }
  .inter-hero {
    padding: 50px 0px 0px;
  }
  .hero-why{
    padding: 50px 0px;

  }
  .inner-modal h4 {
    font-size: 22px;
  }
  .inner-modal {
    background-size: 25%;
  }
  .teams h3 {
    font-size: 20px !important;
  }
  .teams p {
    font-size: 15px !important;
  }
  .slick-slide {
    text-align: center;
    justify-content: center;
    text-align: center;
  }
  br {
    display: none !important;
  }
  .banner-man {
    position: static !important;
    bottom: 0;
    right: 100px;
    flex-direction: column !important;
  }
  .banner-man img {
    width: 100%;
  }
  .side-ellipse {
    width: 100%;
    rotate: 0deg !important;
    text-align: center;
    margin-top: 30px;
  }
  .hero {
    height: 100% !important;
  }
  .inner-card {
    padding: 10px;
  }
  .contact .card-cus {
    padding: 30px !important;
  }
  .about h2 {
    font-size: 22px;
    line-height: 37px;
  }
  .about-page h1 {
    font-size: 24px !important;
    line-height: 37px;
  }
  p{
    line-height: 28px !important;
  }
  .journey h3 {
    font-size: 11px;
    line-height: 15px;
  }
  .internal-sec{
    padding: 15px;
  }
  .internal-sec h4 {
    font-size: 20px !important;
  }
  .services-page{
    padding: 20px 0px;
  }
  .services-page h2 {
    font-size: 22px !important;
    line-height: 40px;
  }
  .services-page p {
    font-size: 15px !important;
  }
  .inner-modal {
    padding: 20px !important;
  }
  .journey h2 {
    font-size: 22px;
    line-height: 35px;
  }
  .whyweare h2 {
    font-size: 22px;
    line-height: 50px;
    line-height: 40px;

  }
  .wedo h2 {
    font-size: 22px;
  }
  .contact h2 {
    font-size: 22px;
    line-height: 35px;

  }
  .inner-services {
    padding: 20px;
  }
  .whyweare {
    padding: 20px;
  }
  .hero-why h2 {
    font-size: 25px;
    line-height: 35px;
  }
  .whyweare p {
    font-size: 15px;
  }
  .why-card {
    padding: 15px;
  }
  .why-card h4 {
    font-size: 20px;
  }
  .about p {
    font-size: 15px;
  }
  .additional p{
    font-size: 15px;
    
  }
  .sell h2 {
    font-size: 22px;
    line-height: 37px;

    font-weight: 400;
  }
  .sell-light .card-cus {
    padding: 20px;
  }
  .inner-modal p {
    font-size: 16px;
  }
  .card-cus h3 {
    font-size: 20px !important;
    font-weight: 400;
  }
  .sell p {
    font-size: 15px;
    font-weight: 400;
  }
  .inner-card h3 {
    font-size: 20px;
    font-weight: 400;
  }
  .inner-card p {
    font-size: 15px;
  }
  .faq h2 {
    font-size: 25px;
    
  }
  .faq p {
    font-size: 15px;
   
  }
  .accordion-button {
    font-size: 22px !important;
    font-weight: 400 !important;
  }
  .accordion-body {
    font-size: 15px !important;
    font-weight: 400 !important;
  }
  .hero h1 {
    font-size: 35px;
    
    line-height: 40px;

  }
  .slick-slide {
 
    height: 70px !important;
}
  .hero p {
    font-size: 20px;
  }
  .right-p p {
    font-size: 15px;
    font-weight: 400;
  }
}
@media only screen and (max-width: 430px) {
  .additional img{
    width: 80%;
  }
  .internal-sec img{
    width: 70%;

  }
}