html {
  scroll-behavior: smooth;
}

body {
  background-color: #131313;
}

#scrollSizeVideo {
  z-index: 2;
  color: white;
  object-fit: cover;
  border-radius: 0.45rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  /* border: 1px solid rgba(255, 255, 255, 0.15); */
  background-color: #1C1C1C;
}
@media (max-width: 799px) {
  #scrollSizeVideo {
    /* width: 93.83rem;
    height: 53.33rem; */
    width: 95%;
    height: 130vw;
    max-height: 57.5vh; /* 70 */
  }
}
@media (min-width: 800px) {
  #scrollSizeVideo {
    width: 93.83rem;
    height: 53.33rem;
    max-width: 95%;
  }
}

/* .testResizeVid{
    width: 100%;
    height: 1200px;

    background-color: #1C1C1C;

} */
section#firstCTA {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: white;
  text-align: center;
}
@media (max-width: 959px) {
  section#firstCTA {
    padding: 40px 20px;
  }
}
@media (min-width: 960px) and (max-width: 1359px) {
  section#firstCTA {
    padding: 40px 100px;
  }
}
@media (min-width: 1440px) {
  section#firstCTA {
    padding: 40px 240px;
  }
}
section#firstCTA .col10gap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 60px 0 30px 0;
}
section#firstCTA #ctaNebeasLogo, section#firstCTA #ctaNebeasLogo img {
  height: 150px;
  width: 150px;
}

section {
  width: 100%;
  background-color: #131313;
}
section h2 {
  text-align: center;
}

/* === New CSS === */
/* === LiquidGradient === */
section#liquidGradient {
  width: 100%;
  overflow: hidden;
  /* background-color: red; */
  /* background-image: url("../../images/index/liquid_gradient.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; */
}
@media (max-width: 1920px) {
  section#liquidGradient {
    min-height: 460px;
  }
}
@media (min-width: 1921px) {
  section#liquidGradient {
    height: 23.95833vw; /* has to be specifically this */
  }
}
section#liquidGradient #liquidGradientImage {
  height: 100%;
  width: max-content;
  overflow: hidden;
  align-self: center;
}
@media (max-width: 720px) {
  section#liquidGradient #liquidGradientImage {
    transform: translateX(-42.5%);
  }
}
@media (min-width: 721px) and (max-width: 1359px) {
  section#liquidGradient #liquidGradientImage {
    transform: translateX(-25%);
  }
}

section {
  background-color: #131313;
}
section .midSectionStart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  /* @media (max-width: 749px){ 
         width: 100%;
         .switchbar{
             margin-right: 2.5%;
             margin-left: auto;
         }
     } */
}
section .midSectionStart .description {
  text-align: center;
  color: #9A9A9A;
}
section .midSectionStart .description span {
  color: #CDCDCD;
}
@media (max-width: 749px) {
  section .midSectionStart .description {
    padding: 0 7.5%;
  }
}
@media (min-width: 750px) {
  section .midSectionStart .description {
    width: 60rem;
  }
}
section.pictureOnlySection {
  padding: 3rem 0;
}
section .illustrationPicture {
  margin: 0 auto;
}
@media (max-width: 749px) {
  section .illustrationPicture {
    width: 100%;
    aspect-ratio: 11/9;
  }
  section .illustrationPicture#programming img {
    object-position: 50% 50%;
  }
  section .illustrationPicture#business img {
    object-position: 81.5% 50%;
  }
  section .illustrationPicture img {
    border-radius: 0rem !important;
  }
}
@media (min-width: 750px) and (max-width: 959px) {
  section .illustrationPicture {
    width: 85%;
    aspect-ratio: 14/9;
  }
}
@media (min-width: 960px) and (max-width: 1359px) {
  section .illustrationPicture {
    width: 75%;
    aspect-ratio: 15/9;
  }
}
@media (min-width: 1360px) {
  section .illustrationPicture {
    width: 65%;
    aspect-ratio: 16/9;
  }
}
section .illustrationPicture img {
  object-fit: cover;
  border-radius: 0.45rem;
}

section#webDevelopment {
  width: 100%;
  /* height: 1000px; */
  color: white;
  padding: 0 0 8.33rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

section#marketing {
  width: 100%;
  /* height: 1000px; */
  color: white;
  padding: 5.83rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

section#businessServices {
  width: 100%;
  /* height: 1000px; */
  color: white;
  padding: 5.83rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

section#partners {
  width: 100%;
  height: min-content;
  color: white;
  padding: 5.83rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
section#partners h2 {
  margin-bottom: 3.25rem;
}
section#partners div#partnersLogos {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  grid-template-rows: repeat(2, 1fr); /* 2 equal rows */
  border-bottom: 1px solid #363636;
  border-right: 1px solid #363636;
}
@media (max-width: 559px) {
  section#partners div#partnersLogos {
    height: 47.5vh;
  }
}
@media (min-width: 560px) {
  section#partners div#partnersLogos {
    height: 480px;
  }
}
section#partners div#partnersLogos .gridItem {
  height: 100%;
  /* background-color: red; */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #363636;
  border-left: 1px solid #363636;
}
@media (max-width: 959px) {
  section#partners div#partnersLogos .gridItem:first-child picture {
    max-width: 80% !important;
    width: 80% !important;
    height: 22.5%;
  }
  section#partners div#partnersLogos .gridItem:last-child picture {
    height: 35%;
  }
  section#partners div#partnersLogos .gridItem:nth-child(2) picture {
    max-width: 80% !important;
    width: 80% !important;
  }
  section#partners div#partnersLogos .gridItem:nth-child(3) picture {
    max-width: 45% !important;
    width: 45% !important;
  }
  section#partners div#partnersLogos .gridItem:nth-child(5) picture {
    max-width: 45% !important;
    width: 45% !important;
  }
  section#partners div#partnersLogos .gridItem picture {
    max-width: 60%;
    height: 32.5%;
  }
}
@media (min-width: 960px) {
  section#partners div#partnersLogos .gridItem:first-child picture {
    height: 22.5%;
  }
  section#partners div#partnersLogos .gridItem:last-child picture {
    height: 35%;
  }
  section#partners div#partnersLogos .gridItem picture {
    max-width: 80%;
    height: 32.5%;
  }
}

section#testimonials {
  width: 100%;
  /* height: 1000px; */
  color: white;
  padding: 5.83rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
section#testimonials h2 {
  margin-bottom: 3.25rem;
}
section#testimonials div.cardsWrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
section#testimonials div.cardsWrapper div.testimonialCard {
  width: 40rem;
  padding: 3.33rem 3.66rem;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #1C1C1C;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
}
section#testimonials div.cardsWrapper div.testimonialCard .cardAuthor {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
section#testimonials div.cardsWrapper div.testimonialCard .cardAuthor picture {
  width: 5rem;
  height: 5rem;
  border-radius: 100rem;
  overflow: hidden;
}
section#testimonials div.cardsWrapper div.testimonialCard .cardAuthor picture img {
  object-fit: cover;
}
section#contactForm {
  width: 100%;
  /* height: 1000px; */
  color: white;
  padding: 5.83rem 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
section#contactForm form {
  padding: 2rem 0;
  width: 35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}
section#contactForm form .textfield {
  width: 35rem;
}
section#contactForm form .textarea {
  width: 35rem;
}
section#contactForm form .textarea textarea {
  height: 10rem;
}

section#formSubmittedDisplay {
  width: 100%;
  /* height: 1000px; */
  color: white;
  padding: 5.83rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 2.5rem;
  background-image: url("/images/index/formSubmissionBackgroundPic.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  /* width: min-content; */
}
section#formSubmittedDisplay #formSubmittedMessage {
  width: 20rem;
}
@media (max-width: 799px) {
  section#formSubmittedDisplay #formSubmissionTopPic {
    max-width: 90%;
    width: 40rem;
  }
}
@media (min-width: 800px) {
  section#formSubmittedDisplay #formSubmissionTopPic {
    width: 40rem;
  }
}
@media (max-width: 799px) {
  section#formSubmittedDisplay #formSubmissionBottomPic {
    width: 8rem;
  }
}
@media (min-width: 800px) {
  section#formSubmittedDisplay #formSubmissionBottomPic {
    width: 8rem;
  }
}

#wiseFavourite {
  padding: 0 0 8.33rem 0;
}
#wiseFavourite > div {
  transition: all 0.2s ease;
  background-color: #242424;
}
#wiseFavourite > div:hover {
  background-color: #163300;
}
#wiseFavourite > div:hover h2 {
  transition: all 0.2s ease;
  filter: none;
}
#wiseFavourite > div:hover .greenVersion {
  transition: all 0.2s ease;
  filter: none;
}
#wiseFavourite > div .greenVersion {
  transition: all 0.2s ease;
  filter: grayscale(100%) brightness(65%) contrast(90%);
}
#wiseFavourite > div h2 {
  transition: all 0.2s ease;
  filter: grayscale(100%) brightness(65%) contrast(90%);
  color: #9FE870;
}
@media (max-width: 799px) {
  #wiseFavourite > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 30px;
    padding: 70px 20px;
  }
  #wiseFavourite > div #desktopBreak {
    display: none;
  }
  #wiseFavourite > div picture {
    max-width: 357px;
    width: 75%;
  }
  #wiseFavourite > div picture img {
    width: 100%;
  }
}
@media (min-width: 800px) {
  #wiseFavourite > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2.5%;
    padding: 40px 0;
  }
  #wiseFavourite > div h2 {
    text-align: left;
  }
  #wiseFavourite > div picture {
    max-width: 357px;
    width: 25%;
  }
  #wiseFavourite > div picture img {
    width: 100%;
  }
}

.bigCardsHolder {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 2rem 0 0 0;
  width: 100%;
}

.bigCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  border-radius: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-color: #1C1C1C;
}
.bigCard picture, .bigCard img {
  /* max-height: 100%;
  max-width: 100%; */
  width: 100%;
  object-fit: cover;
}
@media (max-width: 799px) {
  .bigCard {
    /* width: 93.83rem;
    height: 53.33rem; */
    width: 95%;
    height: 130vw;
    max-height: 57.5vh; /* 70 */
  }
}
@media (min-width: 800px) {
  .bigCard {
    width: 93.83rem;
    height: 53.33rem;
    max-width: 95%;
  }
}
.bigCard .mobileView {
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (min-width: 800px) {
  .bigCard .mobileView {
    display: none;
  }
}
.bigCard .mobileView picture {
  min-height: 100% !important;
  min-width: 100%;
}
.bigCard .mobileView #branding_example {
  width: 100%;
}
.bigCard .mobileView #ui_ux_example {
  width: 100%;
}
.bigCard .mobileView #seo_example {
  width: 100%;
}
.bigCard .mobileView #automation_example {
  width: 100%;
}
.bigCard .mobileView #fortal_example img {
  object-position: 0% 0%;
}
.bigCard .mobileView #stalla_example img {
  object-position: 0% 0%;
}
.bigCard .mobileView #suitup_example img {
  object-position: 0% 0%;
}
.bigCard .desktopView {
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (max-width: 799px) {
  .bigCard .desktopView {
    display: none;
  }
}
.bigCard .desktopView picture {
  min-height: 100% !important;
  min-width: 100%;
}
.bigCard .desktopView #branding_example {
  width: 100%;
}
.bigCard .desktopView #ui_ux_example {
  width: 140%;
}
.bigCard .desktopView #seo_example {
  width: 100%;
}
.bigCard .desktopView #automation_example {
  width: 100%;
}
.bigCard .desktopView #fortal_example img {
  object-position: 0% 0%;
}
.bigCard .desktopView #stalla_example img {
  object-position: 0% 0%;
}
.bigCard .desktopView #suitup_example img {
  object-position: 0% 0%;
}

#faqSection {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.25rem;
}
#faqSection h2.sectionTitle {
  padding: 0 2rem;
  color: white;
}

@media (max-width: 534px) {
  #faq {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: min-content;
    padding: 0rem 20px 10rem 20px;
    gap: 15px;
  }
  #faq #answerBox {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    /* padding: 30px 40px;

    background-color: #000;
    color: white; */
    padding: 3.33rem 3.66rem;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #1C1C1C;
    color: white;
    min-height: 510px;
    height: min-content;
    max-width: 700px;
    width: 100%;
    border-radius: 30px;
  }
  #faq #answerBox strong {
    color: white;
  }
  #faq #answerBox p {
    color: #CDCDCD;
  }
  #faq #answerBox #smallQuestion {
    color: rgba(255, 255, 255, 0.5);
    /* font-family: "Inter Light"; */
  }
  #faq #answerBox #answerTitle {
    font-family: "Inter Semibold";
    margin-bottom: 20px;
    text-align: left;
  }
  #faq #answerBox #mainAnswer {
    white-space: pre-line;
  }
  #faq input {
    display: none;
  }
  #faq #questions {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    height: min-content;
    gap: 10px;
    max-width: 700px;
    width: 100%;
  }
  #faq .questionBar {
    width: 100%;
    text-align: center;
  }
  #faq .questionBar label {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* outline: 1.5px #000000 solid; */
    width: 100%;
    background-color: #1C1C1C;
    color: white;
    padding: 10px 10px;
    border-radius: 10px;
    font-family: "Inter";
    font-size: 1.833rem;
    gap: 0;
    /* background-color: red; */
  }
  #faq .questionBar label img {
    height: 0;
    width: 0;
  }
  #faq .questionBar label:hover {
    background-color: #1f1f1f;
  }
  #faq .questionBar:has(input:checked) label {
    /* color: blue; */
    outline: 1.5px solid rgba(255, 255, 255, 0.2);
  }
  #faq #languageSpecial {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 7.5px;
  }
  #faq #languageSpecial div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
  }
  #faq #languageSpecial div img {
    height: 25px;
    width: 25px;
  }
  #faq #contactSpecial {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}
@media (min-width: 535px) and (max-width: 959px) {
  #faq {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    /* background-color: red; */
    width: 100%;
    height: min-content;
    padding: 0rem 20px 10rem 20px;
    gap: 15px;
  }
  #faq #answerBox {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    /* padding: 30px 40px;

    background-color: #000; */
    padding: 3.33rem 3.66rem;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #1C1C1C;
    color: white;
    height: 505px;
    /* height:min-content; */
    max-width: 700px;
    width: 100%;
    border-radius: 30px;
  }
  #faq #answerBox strong {
    color: white;
  }
  #faq #answerBox p {
    color: #CDCDCD;
  }
  #faq #answerBox #smallQuestion {
    color: rgba(255, 255, 255, 0.5);
    /* font-family: "Inter Light"; */
  }
  #faq #answerBox #answerTitle {
    font-family: "Inter Semibold";
    margin-bottom: 20px;
    text-align: left;
  }
  #faq #answerBox #mainAnswer {
    white-space: pre-line;
  }
  #faq input {
    display: none;
  }
  #faq #questions {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    height: min-content;
    gap: 10px;
    max-width: 700px;
    width: 100%;
  }
  #faq .questionBar {
    width: 100%;
    text-align: center;
  }
  #faq .questionBar label {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: #1C1C1C;
    color: white;
    padding: 8px 17.5px;
    border-radius: 10px;
    font-family: "Inter";
    font-size: 1.833rem;
    gap: 10px;
    /* background-color: red; */
  }
  #faq .questionBar label img {
    height: 25px;
    width: 25px;
  }
  #faq .questionBar label:hover {
    background-color: #1f1f1f;
  }
  #faq .questionBar:has(input:checked) label {
    /* color: blue; */
    outline: 1.5px solid rgba(255, 255, 255, 0.2);
  }
  #faq #languageSpecial {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 7.5px;
  }
  #faq #languageSpecial div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
  }
  #faq #languageSpecial div img {
    height: 25px;
    width: 25px;
  }
  #faq #contactSpecial {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}
@media (min-width: 960px) and (max-width: 1176px) {
  #faq {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    /* background-color: red; */
    width: 100%;
    height: min-content;
    padding: 0rem 20px 10rem 20px;
    gap: 15px;
  }
  #faq #answerBox {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    /* padding: 30px 40px;
    background-color: #000; */
    padding: 3.33rem 3.66rem;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #1C1C1C;
    color: white;
    height: 455px;
    width: 700px;
    border-radius: 30px;
  }
  #faq #answerBox strong {
    color: white;
  }
  #faq #answerBox p {
    color: #CDCDCD;
  }
  #faq #answerBox #smallQuestion {
    color: rgba(255, 255, 255, 0.5);
    /* font-family: "Inter Light"; */
  }
  #faq #answerBox #answerTitle {
    font-family: "Inter Semibold";
    margin-bottom: 20px;
    text-align: left;
  }
  #faq #answerBox #mainAnswer {
    white-space: pre-line;
  }
  #faq input {
    display: none;
  }
  #faq #questions {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    height: min-content;
    gap: 10px;
    width: 700px;
  }
  #faq .questionBar {
    width: 100%;
  }
  #faq .questionBar label {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: #1C1C1C;
    padding: 8px 17.5px;
    border-radius: 10px;
    color: white;
    font-family: "Inter";
    font-size: 1.833rem;
    gap: 10px;
    /* background-color: red; */
  }
  #faq .questionBar label img {
    height: 25px;
    width: 25px;
  }
  #faq .questionBar label:hover {
    background-color: #1f1f1f;
  }
  #faq .questionBar:has(input:checked) label {
    /* color: blue; */
    outline: 1.5px solid rgba(255, 255, 255, 0.2);
  }
  #faq #languageSpecial {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
  }
  #faq #languageSpecial div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 7.5px;
  }
  #faq #languageSpecial div img {
    height: 30px;
    width: 30px;
  }
  #faq #contactSpecial {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}
@media (min-width: 1177px) and (max-width: 1359px) {
  #faq {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    /* background-color: red; */
    width: 100%;
    height: min-content;
    padding: 0rem 40px 10rem 40px;
    gap: 30px;
  }
  #faq #answerBox {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    /* padding: 30px 40px;
    background-color: #000; */
    padding: 3.33rem 3.66rem;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #1C1C1C;
    color: white;
    min-height: 500px;
    height: min-content;
    width: 700px;
    border-radius: 30px;
  }
  #faq #answerBox strong {
    color: white;
  }
  #faq #answerBox p {
    color: #CDCDCD;
  }
  #faq #answerBox #smallQuestion {
    color: rgba(255, 255, 255, 0.5);
    /* font-family: "Inter Light"; */
  }
  #faq #answerBox #answerTitle {
    font-family: "Inter Semibold";
    margin-bottom: 20px;
    text-align: left;
  }
  #faq #answerBox #mainAnswer {
    white-space: pre-line;
  }
  #faq input {
    display: none;
  }
  #faq #questions {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    height: min-content;
    gap: 15px;
  }
  #faq .questionBar label {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: 500px;
    background-color: #1C1C1C;
    padding: 8px 17.5px;
    border-radius: 10px;
    color: white;
    text-align: right;
    font-family: "Inter";
    font-size: 1.833rem;
    gap: 10px;
    /* background-color: red; */
  }
  #faq .questionBar label img {
    height: 32px;
    width: 32px;
  }
  #faq .questionBar label:hover {
    background-color: #1f1f1f;
  }
  #faq .questionBar:has(input:checked) label {
    /* color: blue; */
    outline: 1.5px solid rgba(255, 255, 255, 0.2);
  }
  #faq #languageSpecial {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
  }
  #faq #languageSpecial div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 7.5px;
  }
  #faq #languageSpecial div img {
    height: 30px;
    width: 30px;
  }
  #faq #contactSpecial {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}
@media (min-width: 1360px) and (max-width: 1760px) {
  #faq {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    /* background-color: red; */
    width: 100%;
    height: min-content;
    padding: 0rem 40px 10rem 40px;
    gap: 30px;
  }
  #faq #answerBox {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    /* padding: 30px 40px;
    background-color: #000; */
    padding: 3.33rem 3.66rem;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #1C1C1C;
    color: white;
    height: 500px;
    width: 700px;
    border-radius: 30px;
  }
  #faq #answerBox strong {
    color: white;
  }
  #faq #answerBox p {
    color: #CDCDCD;
  }
  #faq #answerBox #smallQuestion {
    color: rgba(255, 255, 255, 0.5);
    /* font-family: "Inter Light"; */
  }
  #faq #answerBox #answerTitle {
    font-family: "Inter Semibold";
    margin-bottom: 20px;
    text-align: left;
  }
  #faq #answerBox #mainAnswer {
    white-space: pre-line;
  }
  #faq input {
    display: none;
  }
  #faq #questions {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    height: min-content;
    gap: 15px;
  }
  #faq .questionBar label {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: 595px;
    background-color: #1C1C1C;
    padding: 10px 20px;
    border-radius: 10px;
    color: white;
    font-family: "Inter";
    font-size: 1.833rem;
    gap: 10px;
    /* background-color: red; */
  }
  #faq .questionBar label img {
    height: 32px;
    width: 32px;
  }
  #faq .questionBar label:hover {
    background-color: #1f1f1f;
  }
  #faq .questionBar:has(input:checked) label {
    /* color: blue; */
    outline: 1.5px solid rgba(255, 255, 255, 0.2);
  }
  #faq #languageSpecial {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
  }
  #faq #languageSpecial div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 7.5px;
  }
  #faq #languageSpecial div img {
    height: 30px;
    width: 30px;
  }
  #faq #contactSpecial {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}
@media (min-width: 1761px) {
  #faq {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: min-content;
    padding: 0rem 20px 10rem 20px;
    gap: 30px;
  }
  #faq #answerBox {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    /* padding: 30px 40px;
    background-color: #000; */
    padding: 3.33rem 3.66rem;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #1C1C1C;
    color: white;
    height: 500px;
    width: 700px;
    border-radius: 30px;
  }
  #faq #answerBox strong {
    color: white;
  }
  #faq #answerBox p {
    color: #CDCDCD;
  }
  #faq #answerBox #smallQuestion {
    color: rgba(255, 255, 255, 0.5);
    /* font-family: "Inter Light"; */
  }
  #faq #answerBox #answerTitle {
    font-family: "Inter Semibold";
    margin-bottom: 20px;
    text-align: left;
  }
  #faq #answerBox #mainAnswer {
    white-space: pre-line;
  }
  #faq input {
    display: none;
  }
  #faq #questions {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    height: min-content;
    gap: 15px;
  }
  #faq .questionBar label {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: 595px;
    background-color: #1C1C1C;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    font-family: "Inter";
    font-size: 1.833rem;
    gap: 10px;
  }
  #faq .questionBar label img {
    height: 32px;
    width: 32px;
  }
  #faq .questionBar label:hover {
    background-color: #1f1f1f;
  }
  #faq .questionBar:has(input:checked) label {
    /* color: blue; */
    outline: 1.5px solid rgba(255, 255, 255, 0.2);
  }
  #faq #languageSpecial {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
  }
  #faq #languageSpecial div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 7.5px;
  }
  #faq #languageSpecial div img {
    height: 30px;
    width: 30px;
  }
  #faq #contactSpecial {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}
/* old index css: */
section#intersectionImage {
  background-image: url("../../images/intersection.svg");
  background-repeat: no-repeat;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
@media (max-width: 599px) {
  section#intersectionImage h2 {
    font-size: 6vw !important; /* exception */
  }
}
@media (min-width: 600px) and (max-width: 959px) {
  section#intersectionImage h2 {
    font-size: 3rem !important; /* exception */
  }
}
@media (max-width: 959px) {
  section#intersectionImage {
    width: 100%;
    height: 532px;
    background-position: center center;
    background-size: auto 100%;
    gap: 175px;
    padding: 40px 10px;
    text-align: center;
  }
  section#intersectionImage #intersectionNebeasLogo {
    position: absolute;
    height: 90px;
    width: 90px;
  }
}
@media (min-width: 960px) and (max-width: 1535px) {
  section#intersectionImage {
    width: 100%;
    height: 732px;
    background-position: center top;
    background-size: auto 100%;
    gap: 300px;
    padding: 40px 75px;
    text-align: center;
  }
  section#intersectionImage #intersectionNebeasLogo {
    position: absolute;
    height: 150px;
    width: 150px;
  }
}
@media (min-width: 1536px) {
  section#intersectionImage {
    width: 100%;
    height: 732px;
    background-position: center top;
    background-size: auto 100%;
    gap: 400px;
    padding: 40px 240px;
  }
  section#intersectionImage #intersectionNebeasLogo {
    position: absolute;
    height: 150px;
    width: 150px;
  }
}

section#secondCTA {
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  background-image: url("/images/index/gridBG.svg"), url("/images/index/creativeVector.svg");
  background-repeat: no-repeat;
  background-position: left 10%;
  background-size: auto 100%, auto 50%;
}
@media (max-width: 1407px) {
  section#secondCTA {
    padding: 80px 5% 300px 5%;
  }
}
@media (min-width: 1408px) and (max-width: 1865px) {
  section#secondCTA {
    padding: 80px 240px 300px 240px;
  }
}
@media (min-width: 1866px) {
  section#secondCTA {
    padding: 80px 240px 300px 240px;
  }
}
@supports (background-image: url("/images/index/gridBG.webp"), url("/images/index/creativeVector.svg")) {
  section#secondCTA {
    background-image: url("/images/index/gridBG.webp"), url("/images/index/creativeVector.svg");
  }
}
section#secondCTA #offerings {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  /* gap: 10px; */
}
@media (max-width: 1030px) {
  section#secondCTA #offerings #card1 {
    position: relative;
    background-image: url("/images/index/mobileTopCardBG.svg");
    background-position: left center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  section#secondCTA #offerings #card1 .blackStars {
    position: absolute;
    top: -100px;
    left: -100px;
    transform: rotate(180deg);
  }
  section#secondCTA #offerings #card2 {
    background-image: url("/images/index/mobileCenterCardBG.svg");
    background-position: left center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  section#secondCTA #offerings #card3 {
    position: relative;
    background-image: url("/images/index/mobileBottomCardBG.svg");
    background-position: left center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  section#secondCTA #offerings #card3 .blackStars {
    position: absolute;
    right: -100px;
    bottom: -100px;
  }
}
@media (min-width: 1031px) and (max-width: 1865px) {
  section#secondCTA #offerings #card1 {
    position: relative;
    background-image: url("/images/index/tabletFirstCardBG.svg");
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
  }
  section#secondCTA #offerings #card1 .blackStars {
    position: absolute;
    top: -100px;
    left: -100px;
    transform: rotate(180deg);
  }
  section#secondCTA #offerings #card2 {
    background-image: url("/images/index/tabletMiddleCardBG.svg");
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
  }
  section#secondCTA #offerings #card3 {
    position: relative;
    background-image: url("/images/index/tabletLastCardBG.svg");
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
  }
  section#secondCTA #offerings #card3 .blackStars {
    position: absolute;
    right: -100px;
    bottom: -100px;
  }
}
@media (min-width: 1866px) {
  section#secondCTA #offerings #card1 {
    position: relative;
    background-image: url("/images/index/leftCardBG.svg");
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
  }
  section#secondCTA #offerings #card1 .blackStars {
    position: absolute;
    top: -100px;
    left: -100px;
    transform: rotate(180deg);
  }
  section#secondCTA #offerings #card2 {
    background-image: url("/images/index/centerCardBG.svg");
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
  }
  section#secondCTA #offerings #card3 {
    position: relative;
    background-image: url("/images/index/rightCardBG.svg");
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
  }
  section#secondCTA #offerings #card3 .blackStars {
    position: absolute;
    right: -100px;
    bottom: -100px;
  }
}
section#secondCTA #offerings .offering {
  margin: 10px auto;
  background-color: black;
  color: white;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
@media (max-width: 1407px) {
  section#secondCTA #offerings .offering {
    width: 456px;
    height: 356px;
    padding: 20px 10px;
  }
}
@media (min-width: 1408px) and (max-width: 1865px) {
  section#secondCTA #offerings .offering {
    width: 456px;
    height: 356px;
    padding: 20px 0;
  }
}
@media (min-width: 1866px) {
  section#secondCTA #offerings .offering {
    width: 456px;
    height: 356px;
    padding: 20px 0;
  }
}
section#secondCTA #offerings .offering img {
  margin-bottom: 5px;
}
@media (max-width: 1407px) {
  section#secondCTA #offerings .offering .button {
    margin: auto 0 5px 0;
  }
}
@media (min-width: 1408px) and (max-width: 1865px) {
  section#secondCTA #offerings .offering .button {
    margin: auto 0 5px 0;
  }
}
@media (min-width: 1866px) {
  section#secondCTA #offerings .offering .button {
    margin: auto 0 5px 0;
  }
}
section#secondCTA #offerings .offering h2 {
  font-family: "Inter Bold";
}
section#secondCTA #offerings .offering .texts {
  gap: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
section#secondCTA #offerings .offering .tags {
  width: 95%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
section#secondCTA #offerings .offering .smallTag {
  border-radius: 52px;
  border: 1px solid #FFF;
  background-color: black;
  letter-spacing: -1px;
  display: inline-flex;
  padding: 5px 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 1.333rem;
}

section#previousProjects {
  display: flex;
  flex-direction: column;
  align-items: center;
}
section#previousProjects h1 {
  margin-bottom: 90px;
}
section#previousProjects .projectPictures {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
section#previousProjects .projectPictures .pictureRow {
  display: flex;
  overflow: hidden;
  justify-content: center;
  max-height: 383px;
  gap: 20px;
}
section#previousProjects .projectPictures .pictureRow .customer {
  padding: 34px 41px 0 41px;
  border-radius: 24px;
  max-width: 803px;
  background-color: #EBB740;
}
section#previousProjects .projectPictures .pictureRow .createCustomer {
  border-radius: 24px;
  max-width: 803px;
  background-color: #EC9F68;
}
section#previousProjects .projectPictures .pictureRow .vahetused {
  padding: 0 41px;
  border-radius: 24px;
  max-width: 803px;
  background-color: #5A9055;
}
section#previousProjects .projectPictures .rectangle {
  width: 803px;
  background-color: #E78E3D;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  position: relative;
}
section#previousProjects .projectPictures .rectangle #SuitUpPic1 {
  position: absolute;
  top: 190px;
  left: -54px;
  overflow: hidden;
}
section#previousProjects .projectPictures .rectangle #SuitUpPic2 {
  position: absolute;
  top: 15px;
  left: 15px;
  max-width: 325px;
}
section#previousProjects .projectPictures .rectangle #SuitUpPic3 {
  position: absolute;
  top: 148px;
  left: 293px;
  max-width: 335px;
}
section#previousProjects .projectPictures .rectangle #SuitUpPic4 {
  position: absolute;
  top: 15px;
  right: 15px;
}

#Sirtsucamp {
  margin-top: 250px;
}
#Sirtsucamp .SirtsucampPhone {
  padding: 16px 16px 0 16px;
  background-color: #137528;
  border-radius: 24px;
}
#Sirtsucamp .teineVahetus {
  padding: 30px 28px 0 28px;
  background-color: #A4EC83;
  border-radius: 24px;
}
#Sirtsucamp .SirtsuCampInfo {
  padding: 0 48px 35px 48px;
  background-color: #AFFF89;
  border-radius: 24px;
}

#textPiece1 {
  margin: 60px 0 30px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.columnBlocks_mobile {
  display: none;
}

.columnBlocks_desktop {
  display: flex;
  flex-direction: column;
  gap: 150px;
}

@media (min-width: 995px) {
  .imageCard {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }
  .imageCard .imgShadow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 25%, #000 100%);
  }
  .imageCard .sophisticatedText, .imageCard .hereForYouText {
    position: absolute;
    padding-right: 240px;
    padding-left: 240px;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
  }
  .imageCard .sophisticatedText h1 {
    font-family: "Inter Bold";
    word-break: break-all;
  }
  .imageCard h1 span {
    font-size: 7rem;
    font-family: "Inter Medium";
  }
  .imageCard .hereForYouText h1 span {
    font-family: "Inter Bold";
  }
  .imageCard h1 {
    font-size: 7rem;
    color: white;
    width: 652px;
    max-width: 100%;
    overflow: auto;
  }
  .imageCard h3 {
    max-width: 652px;
    color: white;
  }
}
@media (max-width: 995px) {
  .imageCard {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }
  .imageCard .imgShadow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 15%, #000 110%) !important;
  }
  .imageCard .sophisticatedText, .imageCard .hereForYouText {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
  }
  .imageCard .sophisticatedText h1 {
    font-family: "Inter Bold";
    word-break: break-all;
  }
  .imageCard .hereForYouText h1 span {
    font-family: "Inter Bold";
  }
  .imageCard h1 {
    font-size: 5rem;
    color: white;
    width: 596px;
    max-width: 100%;
    overflow: auto;
  }
  .imageCard h1 span {
    font-size: 5rem;
    font-family: "Inter Medium";
  }
  .imageCard h3 {
    max-width: 596px;
    color: white;
  }
}

@media (min-width: 601px) {
  .sophisticated {
    background-image: url("/images/index/programming/downscaled_PNG/programming_15col.png");
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 1072px;
  }
  @supports (background-image: url("/images/index/programming/downscaled_q50/programming.webp")) {
    .sophisticated {
      background-image: url("/images/index/programming/downscaled_q50/programming.webp");
    }
  }
  .sophisticated .imgShadow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 25%, #000 100%);
  }
  .hereForYou {
    background-image: url("/images/index/customer_pic/downscaled_PNG/downscaled_customer_pic_100col.png");
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 1072px;
  }
  @supports (background-image: url("/images/index/customer_pic/downscaled_q50/customer_pic_256col.webp")) {
    .hereForYou {
      background-image: url("/images/index/customer_pic/downscaled_q50/customer_pic_256col.webp");
    }
  }
}
@media (max-width: 600px) {
  .columnBlocks_desktop {
    display: none;
  }
  .columnBlocks_mobile {
    display: flex;
    flex-direction: column;
    gap: 110px;
  }
  .columnBlocks_mobile h1 {
    font-size: 5rem;
  }
  .columnBlocks_mobile h1 span {
    font-size: 5rem;
    font-family: "Inter Medium";
  }
  .columnBlocks_mobile .sophisticated {
    display: flex;
    flex-direction: column;
  }
  .columnBlocks_mobile .sophisticated img {
    display: flex;
    max-height: 670px;
    min-height: 670px;
    object-fit: cover;
    object-position: 17% 100%;
    position: relative;
  }
  .columnBlocks_mobile .sophisticated .imgShadow {
    position: absolute;
    width: 100%;
    max-height: 670px;
    min-height: 670px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 5%, #000 140%);
  }
  .columnBlocks_mobile .sophisticated .sophisticatedText {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
  }
  .columnBlocks_mobile .sophisticated .sophisticatedText h1 {
    font-family: "Inter Bold";
    word-break: break-all;
  }
  .columnBlocks_mobile .sophisticated .sophisticatedText h1 span {
    font-family: "Inter Bold";
  }
  .columnBlocks_mobile .sophisticated .sophisticatedText h3 {
    margin: 10px 35px 0 35px;
    text-align: center;
  }
  .columnBlocks_mobile .hereForYou {
    display: flex;
    flex-direction: column;
  }
  .columnBlocks_mobile .hereForYou img {
    display: flex;
    max-height: 670px;
    min-height: 670px;
    object-fit: cover;
    object-position: 17% 100%;
    position: relative;
  }
  .columnBlocks_mobile .hereForYou .imgShadow {
    position: absolute;
    width: 100%;
    max-height: 670px;
    min-height: 670px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 5%, #000 140%);
  }
  .columnBlocks_mobile .hereForYou .hereForYouText {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 60px;
  }
  .columnBlocks_mobile .hereForYou .hereForYouText h1 {
    font-family: "Inter Bold";
    word-break: break-all;
  }
  .columnBlocks_mobile .hereForYou .hereForYouText h1 span {
    font-family: "Inter Bold";
  }
  .columnBlocks_mobile .hereForYou .hereForYouText h3 {
    margin: 10px 35px 0 35px;
    text-align: center;
  }
}
.boldText {
  font-family: "Inter Bold";
}

/*# sourceMappingURL=indexv2.css.map */
