:root {
    --white-semitransparent: rgba(255,255,255,0.9);
  }
  
  .palette-1 {
    --background-color: rgba(248,238,222,1);
    --on-background-color: rgba(0,0,0,1);
    --main-color: rgba(32,50,66,1);
    --on-main-color: rgba(255,255,255,1);
    --on-main-color-semitransparent: rgba(255,255,255,0.8);
    --secondary-color: rgba(103,103,103,1);
    --highlight-color: rgba(119,140,170,1);
    --highlight-color-semitransparent: rgba(119,140,170,0.7);
  }
  
  .palette-2 {
    --background-color: rgba(248,238,222,1);
    --on-background-color: rgba(0,0,0,1);
    --main-color: rgba(128,93,100,1);
    --on-main-color: rgba(255,255,255,1);
    --on-main-color-semitransparent: rgba(255,255,255,0.8);
    --secondary-color: rgba(103,103,103,1);
    --highlight-color: rgba(230,206,219,1);
    --highlight-color-semitransparent: rgba(230,206,219,0.7);
  }
  
  .palette-3 {
    --background-color: rgba(238,226,210,1);
    --on-background-color: rgba(0,0,0,1);
    --main-color: rgba(203,150,105,1);
    --on-main-color: rgba(255,255,255,1);
    --on-main-color-semitransparent: rgba(255,255,255,0.8);
    --secondary-color: rgba(103,103,103,1);
    --highlight-color: rgba(193,192,164,1);
    --highlight-color-semitransparent: rgba(193,192,164,0.7);
  }
  
  html, body {
    width: 100%;
    height: 100%;
    font-size: 0.7rem;
    font-family: 'Montserrat';
    margin: 0!important;
    padding: 0!important;
    background-color: var(--background-color);
    color: var(--on-background-color);
    scroll-behavior: smooth;
  }
  
  @media (min-width: 576px) {
    html {
      font-size: 105%;
    }
  }
  
  @media (min-width: 768px) {
    html {
      font-size: 110%;
    }
  }
  
  @media (min-width: 992px) {
    html {
      font-size: 115%;
    }
  }
  
  @media (min-width: 1200px) {
    html {
      font-size: 120%;
    }
  }
  
  @media (min-width: 1400px) {
    html {
      font-size: 125%;
    }
  }
  
  #hero {
    background-image: url("../../assets/imgs/duplaigen-hero.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    position: relative;
    z-index: 3!important;
  }
  
  @media (max-width: 768px) {
      #hero {
    background-image: url("../../assets/imgs/duplaigen-hero.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 70svh;
    height: 70vh;
    position: relative;
    z-index: 3!important;
  }
  }
  
  #header {
    width: 100%;
    position: fixed;
    top: 0;
    background-color: var(--main-color)!important;
    transition: background-color 0.3s;
    color: var(--on-main-color);
    font-size: 1.2rem!important;
    color: var(--on-main-color)!important;
    font-family: 'Recursive';
    letter-spacing: -0.05rem;
    z-index: 1000;
  }
  
  #header a {
    color: var(--on-main-color)!important;
  }
  
  #header #navcol {
    justify-items: center;
  }
  
  #header #navcol a:hover {
    text-decoration: none;
    background-color: var(--highlight-color-semitransparent);
  }
  
  #header #navcol a .active {
    text-decoration: none;
    background-color: var(--highlight-color-semitransparent);
  }
  
  .scrolled {
    background-color: var(--main-color)!important;
  }
  
  h1 {
    font-family: 'Recursive';
    font-size: 5.0625rem!important;
  }
  
  h2 {
    font-family: 'Recursive';
    font-size: 3.375rem!important;
  }
  
  h3 {
    font-family: 'Recursive';
    font-size: 2.25rem;
  }
  
  h4 {
    font-family: 'Recursive';
    font-size: 1.5rem;
  }
  
  input {
    background-color: var(--white-semitransparent);
    outline: none!important;
    border-radius: 0.4rem;
    font-size: 1rem;
    box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 10%);
    border: none;
  }
  
  textarea {
    background-color: var(--white-semitransparent);
    outline: none!important;
    border-radius: 0.4rem;
    font-size: 1rem;
    box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 10%);
    border: none;
  }
  
  #heroCol {
    background-color: var(--main-color);
    color: var(--on-main-color);
  }
  
  #heroCol p {
    font-size: 1rem;
  }
  
  .sub-heading {
    color: var(--secondary-color);
    text-align: center;
    font-size: 1.5rem;
  }
  
  footer {
    background-color: var(--main-color);
    color: var(--on-main-color);
  }
  
  .contact-icon {
    height: 1.8rem;
    width: auto;
  }
  
  a {
    text-decoration: none;
    color: inherit;
  }
  
  a:hover {
    text-decoration: underline;
    color: inherit;
  }
  
  #logoHeader {
    height: 2.5rem;
    width: auto;
  }
  
  #logoFooter {
    height: 2rem;
    width: auto;
  }
  
  #logoFooter path {
    fill: var(--on-main-color);
  }
  
  #fabricorLogo {
    height: 0.8rem;
    width: auto;
  }
  
  #fabricorLogo path {
    fill: var(--on-main-color);
  }
  
  .btn-outline-main {
    border-width: 0.1rem;
    border-color: var(--main-color);
    color: var(--main-color);
  }
  
  .btn-outline-main:hover {
    color: var(--main-color);
    border-color: var(--main-color);
    background-color: var(--highlight-color-semitransparent)!important;
  }
  
  .btn-outline-on-main {
    border-width: 0.1rem;
    border-color: var(--on-main-color);
    color: var(--on-main-color);
  }
  
  .btn-outline-on-main:hover {
    border-color: var(--on-main-color);
    background-color: var(--highlight-color-semitransparent)!important;
  }
  
  .btn {
    font-family: 'Recursive';
    font-size: 1.5rem;
    border-radius: 0.8rem;
  }
  
  #header .btn {
    font-size: 1.2rem;
  }
  
  .btn:hover {
    text-decoration: none!important;
  }
  
  #contactFormMessage {
    overflow-y: auto;
  }
  
  .custom-card {
    box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 10%);
    border-radius: 0.8rem;
  }
  
  .custom-card-header {
    background-color: var(--main-color);
    border-radius: 0.8rem 0.8rem 0 0;
    color: var(--on-main-color);
    text-align: center;
    border-top: 0.2rem solid var(--highlight-color);
    border-right: 0.2rem solid var(--highlight-color);
    border-bottom: 0;
    border-left: 0.2rem solid var(--highlight-color);
  }
  
  .custom-card-content {
    border-radius: 0 0 0.8rem 0.8rem;
    color: var(--on-main-color);
    background-color: var(--white-semitransparent);
    font-size: 0.8rem;
    color: #000000;
    border-top: rgba(255,255,255,0.5);
    border-right: 0.2rem solid var(--highlight-color);
    border-bottom: 0.2rem solid var(--highlight-color);
    border-left: 0.2rem solid var(--highlight-color);
    border-radius: 0 0 0.5rem 0.5rem;
  }
  
  .custom-card-content ul {
      padding-left: 1rem !important;
  }
  
  @media (max-width: 576px) {
      .custom-card-content ul {
      padding-left: 2rem !important;
  }
  }
  
  #headerBackground {
    display: none;
    top: 0;
    left: 0;
    z-index: 0;
    background-color: var(--main-color);
    box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 10%);
    width: 100vw;
  }
  
  @media (min-width: 768px) {
    #headerBackground {
      display: block;
      z-index: 2!important;
    }
  }
  
  @media (min-width: 768px) {
    #header {
      background-color: initial!important;
    }
  }
  
  .section-background {
    top: 0;
    left: 0;
    z-index: -1;
  }
  
  .section-background svg {
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
  }
  
  .section-background svg path {
    fill: var(--main-color);
  }
  
  .text-align-center {
    text-align: center;
  }
  
  .navbar-brand:hover {
    text-decoration: none;
  }
  
  .swiper-button-prev {
    color: var(--main-color)!important;
  }
  
  .swiper-button-next {
    color: var(--main-color)!important;
  
  }
  
  .navbar-collapse.show {
    background-color: var(--main-color);
    box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 10%);
    z-index: 999;
  }
  
  .navbar-collapse.collapsing {
    background-color: var(--main-color);
    box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 10%);
  }
  
  .navbar-toggler-icon {
    color: var(--on-main-color)!important;
  }
  
  #menuButton svg {
    height: 1.2rem;
    width: auto;
  }
  
  #menuButton svg g {
    height: 1.2rem;
    width: auto;
  }
  
  #menuButton path {
    fill: var(--on-main-color);
  }
  
  .video-container iframe {
    width: 80vw;
    height: auto;
  }
  
  @media (min-width: 768px) {
    .video-container iframe {
      width: 75vw;
      height: auto;
    }
  }
  
  @media (min-width: 1200px) {
    .video-container iframe {
      width: 50vw;
      height: 40vh;
    }
  }
  
  .intro-slider-text {
      font-size: 1.3rem;
  }
  
  
  @media (min-width: 2200px) {
      .intro-slider-text {
      font-size: 2rem;
  }
  
  .intro-slider-title {
      font-size: 4rem;
  }
  
  .sub-heading {
      font-size: 2rem;
  }
  }
  
  footer div img {
      max-width: 100%;
      height: auto;
  }
  
  .tutorial-img {
      border-radius: 20px;
  }
  
  .form-check-label {
      font-size: 1.2rem;
      padding-top: 0.5rem;
      padding-left: 0.8rem;
  }
  
  .form-check-input {
      width: 1.8em;
      height: 1.8em;
  }
  
  .form-check-input:checked {
      background-color: var(--main-color);
      border-color: var(--main-color);
  }
  
  .form-check-input:focus {
      box-shadow: none !important;
  }
  
  .adatkezelesi-text {
      color: var(--main-color);
      font-weight: 600;
  }
  
  #homemail .form-check {
      display: flex;
      align-items: center;
  }