/* Call to action become reseller */ 
.matias-call-to-action-reseller{
  margin-top: 30vh;
  margin-left:10vw;
  background-color:rgba(255, 255, 255, 0.63);
  border-radius: 20px;
  max-width:500px;
  padding:20px;
  text-align:center;
  display:none;

}
@media only screen and (min-width: 1024px) {
.matias-call-to-action-reseller {
    margin-top:50vh;
  	display:block;
  }
}
.matias-call-to-action-mobile{
  display:none;
}

@media only screen and (max-width: 800px) {
  .matias-call-to-action-mobile {
  height:10vh;
   display:grid;
  place-items:center;
  border-bottom: solid #608bbc;
  }
}

.matias-call-to-action-reseller .matias-call-to-action-mobile, .btn {
  background-color:#608bbc!important;
  border-radius:10px!important;
}


/* Home Page Hero */
#matias-hero{
  background-image: url(/images/mattias/heros/matias-mobile/home-page-header-mobile.jpg);
  background-size: cover;
  height: 60vh;
  background-repeat:no-repeat;
  background-position: center;
}

@media only screen and (min-width: 1024px) {
  #matias-hero  {
    background-image: url(/images/mattias/heros/home-header.jpg);
    height:80vh;
  }
}

/* Product Page Categories Hero */
#matias-hero-product{
  background-image: url(/images/mattias/heros/matias-mobile/products-header-mobile.jpg);
  background-size: cover;
  height: 60vh;
  background-repeat:no-repeat;
  background-position: center left;
}

@media only screen and (min-width: 1024px) {
  #matias-hero-product  {
    background-image: url(/images/mattias/heros/products-header-2.png);
    height:80vh;
  }
}

/* Regular Keyboard Hero */
#matias-hero-regular-keyboard {
  background-image: url(/images/mattias/heros/matias-mobile/Regular-header.jpg); /* Default background image */
  background-size: cover;  /* Cover the entire hero section */
  height: 60vh;  /* 60% of the viewport height */
  background-repeat: no-repeat;  /* Do not repeat the background image */
  background-position: right;  /* Position the background image at the top */
}

@media only screen and (min-width: 1024px) {
  #matias-hero-regular-keyboard  {
    background-image: url(/images/mattias/heros/Regular-header.jpg); /* New background image for larger screens */
    background-size: cover;  /* Cover the entire hero section */
    height: 80vh;  /* Height adjusts based on content */
  }
}


/* Rgb Keyboard Hero */
#matias-hero-rgb-keyboard{
  background-image: url(/images/mattias/heros/matias-mobile/RGB-header-mobile.jpg);
  background-size: cover;
  height: 60vh;
  background-repeat:no-repeat;
  background-position: center;
}

@media only screen and (min-width: 1024px) {
  #matias-hero-rgb-keyboard  {
    background-image: url(/images/mattias/matias-products/roberto-nickson-fl2myUOVYzA-unsplash-Hersteld.jpg);
    height:80vh;
  }
}

/* Ergonomic Keyboard Hero */
#matias-hero-ergonomic-keyboard{
  background-image: url(/images/mattias/heros/matias-mobile/ergo-header-mobile.jpg);/* placeholder for now */
  background-size: cover;
  height: 60vh;
  background-repeat:no-repeat;
  background-position: center;
}

@media only screen and (min-width: 1024px) {
  #matias-hero-ergonomic-keyboard  {
    background-image: url(/images/mattias/matias-products/ergonomic-header.jpg);
    height:80vh;
  }
}

/* Ergonomic Mice Hero */
#matias-hero-ergonomic-mice{
  background-image: url(/images/mattias/heros/matias-mobile/mice-header-mobile.jpg);
  background-size: cover;
  height: 60vh;
  background-repeat:no-repeat;
  background-position: center;
}

@media only screen and (min-width: 1024px) {
  #matias-hero-ergonomic-mice  {
    background-image: url(/images/mattias/matias-products/mice-products.jpg);
    height:80vh;
  }
}

/* Become Reseller Hero */
#matias-hero-reseller{
  background-image: url(/images/mattias/heros/matias-mobile/reseller-header-mobile.jpg);
  background-size: cover;
  height: 60vh;
  background-repeat:no-repeat;
  background-position: center;
}

@media only screen and (min-width: 1024px) {
  #matias-hero-reseller  {
    background-image: url(/images/mattias/heros/reseller-header.jpg);
    height:80vh;
  }
}

/* Become Contact Hero */
#matias-hero-contact{
  background-image: url(/images/mattias/heros/matias-mobile/contact-page-header-mobile.jpg);
  background-size: cover;
  height: 60vh;
  background-repeat:no-repeat;
  background-position: center;
}

@media only screen and (min-width: 1024px) {
  #matias-hero-contact  {
    background-image: url(https://www.idcp.eu/images/mattias/heros/contact-page.jpg);
    height:80vh;
  }
}

/* Where to Buy Hero */
#matias-where-to-buy{
  background-image: url(/images/mattias/heros/WTB-page.jpg);
  background-size: cover;
  height: 60vh;
  background-repeat:no-repeat;
  background-position: right;
}

@media only screen and (min-width: 1024px) {
  #matias-where-to-buy  {
  background-image: url(/images/mattias/heros/WTB-page.jpg);
    height:80vh;
  }
}