.mobile-version {
    display: none;
  }


.sitehtml{
  background-color: #EAE6E0;
}

  .sitehtml img {
    width: 100%;
  }

  .flex-column {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }

  .flex-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0 auto;
    gap: 0;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  
.flex-row img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
}

.flex-space-between{
  display: flex;
  justify-content: space-between;
}

  .flex-row>a {
    flex: 0 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
  }


  .category-box{
    max-width: 1280px;
    margin: 0 auto;
    margin-top: 100px;
    padding: 0 70px 0 70px;

  }

 .swiper {
  width: 100%;
  max-width: 1250px; 
  margin: 0 auto;
}
.swiper-wrapper {
  margin: 0 !important;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  margin: 0 !important;
  padding: 0 !important;
}


/* First carousel border (#A98D79) */
.swiper-business .swiper-slide img {
  width: auto;
  height: 520px; 
  object-fit: contain; 
  display: block;
  border-left: 3px solid #A98D79;
}
.swiper-business .swiper-slide:first-child img {
  border-left: none;
}


/* Second carousel border (#5A1E00) */
.swiper-lifestyle .swiper-slide img {
  height: 500px;
  width: auto;
  object-fit: contain;
   display: block;
  border-left: 3px solid #5A1E00;
}
.swiper-brown .swiper-slide:first-child img {
  border-left: none;
}

.swiper-lifestyle .swiper-wrapper {
  height: auto !important;
}

.my-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: #A98D79;
  cursor: pointer;
  z-index: 10; /* make sure they’re above slides */
}
.my-arrow2 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: #5A1E00;
  cursor: pointer;
  z-index: 10; /* make sure they’re above slides */
}

.my-arrow-prev {
  left: 0px;
}

.my-arrow2-next {
  right: 0px;
}

.my-arrow2-prev {
  left: 0px;
}

.my-arrow-next {
  right: 0px;
}

.swiper-button-disabled {
  display: none;
}
.swiper-button-disabled::after {
  background: none; /* removes gray circle */
  opacity: 0.5;     /* optional, keep faded look */
}

.cp-brand-size{
  padding: 10px;
}







.toggle-buttons {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 70px;
  margin-bottom: 70px;
}

.toggle-buttons button {
  width: 251px;
  height: 62px;
  border-radius: 60px;
  font-size: 22px;
  padding: 10px 20px;
  border: 1px solid #3A476B;
  background: #F8F1EC;
  color: #3A476B;
  cursor: pointer;
  transition: 0.3s;
}


.toggle-buttons button.active {
  background: #3A476B;
  color: #F8F1EC;
}

.toggle-buttonlink{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 70px;
  margin-bottom: 70px;
}

.toggle-buttonlink button {
  width: 400px;
  height: 62px;
  border-radius: 60px;
  font-size: 23px;
  padding: 10px 20px;
  border: 1px solid #3A476B;
  background: #F8F1EC;
  color: #3A476B;
  cursor: pointer;
  transition: 0.3s;
}

.toggle-buttonlink button:hover{
  background:  #3A476B; 
  color: #F8F1EC;
  
}




.toggle-buttons-brown {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 70px;
  margin-bottom: 70px;
}

.toggle-buttons-brown button {
  width: 251px;
  height: 62px;
  border-radius: 60px;
  font-size: 23px;
  padding: 10px 20px;
  border: 1px solid #55423E; /* brown border */
  background: #F8F1EC;        /* same beige background */
  color: #55423E;             /* brown text */
  cursor: pointer;
  transition: 0.3s;
}

.toggle-buttonlink-brown{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 70px;
  margin-bottom: 70px;
}

.toggle-buttonlink-brown button {
  width: 400px;
  height: 62px;
  border-radius: 60px;
  font-size: 23px;
  padding: 10px 20px;
  border: 1px solid #55423E; /* brown border */
  background: #F8F1EC;        /* same beige background */
  color: #55423E;             /* brown text */
  cursor: pointer;
  transition: 0.3s;
}
.toggle-buttonlink-brown button:hover{
  background:  #55423E;    
  color: #F8F1EC;
  
}

.toggle-buttons-brown button.active {
  background: #55423E;  /* brown active background */
  color: #F8F1EC;       /* beige text */
}

.toggle-buttonlink-cyan{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 70px;
  margin-bottom: 70px;
}

.toggle-buttonlink-cyan button {
  width: 341px;
  height: 63px;
  border-radius: 60px;
  font-size: 22px;
  padding: 10px 20px;
  border: 1px solid #988977; /* brown border */
  background: #F8F1EC;        /* same beige background */
  color: #988977;             /* brown text */
  cursor: pointer;
  transition: 0.3s;
}
.toggle-buttonlink-cyan button:hover{
  background:  #988977;    
  color: #F8F1EC;
  
}

.toggle-buttonlink-black{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 70px;
  margin-bottom: 70px;
}

.toggle-buttonlink-black button {
  width: 341px;
  height: 62px;
  border-radius: 60px;
  font-size: 22px;
  padding: 10px 20px;
  border: 1px solid #000000; /* brown border */
  background: #000000;        /* same beige background */
  color: #F8F1EC;            /* brown text */
  cursor: pointer;
  transition: 0.3s;
}



.toggle-buttons-new-black {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.toggle-buttons-new-black button {
  width: 280px;
  height: 62px;
  border-radius: 60px;
  font-size: 23px;
  padding: 10px 20px;
  border: 1px solid #5D5650; /* brown border */
  background: #F8F1EC;        /* same beige background */
  color: #5D5650;             /* brown text */
  cursor: pointer;
  transition: 0.3s;
}

.toggle-buttonlink-new-black{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.toggle-buttonlink-new-black button {
  width: 400px;
  height: 62px;
  border-radius: 60px;
  font-size: 23px;
  padding: 10px 20px;
  border: 1px solid #5D5650; /* brown border */
  background: #F8F1EC;        /* same beige background */
  color: #5D5650;             /* brown text */
  cursor: pointer;
  transition: 0.3s;
}
.toggle-buttonlink-new-black button:hover{
  background:  #5D5650;    
  color: #F8F1EC;
  
}

.toggle-buttons-new-black button.active {
  background: #5D5650;  /* brown active background */
  color: #F8F1EC;       /* beige text */
}


/* Κεντρικό container */
.moleskine-layout {
  background-color: #F8F4F0;
    display: flex;
    align-items: stretch;
    width: 100%;
    gap: 0;
}

/* Αριστερή πλευρά - GIF */
.moleskine-gif {
    flex: 0 0 40%;
    position: relative;
    overflow: hidden;
    min-width: 0;
}

/* GIF */
.moleskine-gif img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center;
    display: block;
}

/* Δεξιά πλευρά - Προϊόντα */
.moleskine-products {
    flex: 1 1 0;
    min-width: 0;
}

.landing-footer{
  margin-top: 50px;
}










/* Views */
.view {
  display: none;
  flex-direction: column; /* stack content vertically */
  align-items: center;
  margin-bottom: 30px;
}

.view.active {
  display: flex;
}

.footer-images {
    display: flex;
    width: 100%;
    gap: 0;
    align-items: flex-start;
}

.footer-images > div {
    min-width: 0;
}

.footer-images > div:nth-child(1) {
    flex: 137 1 0;
}

.footer-images > div:nth-child(2) {
    flex: 130 1 0;
}

.footer-images > div:nth-child(3) {
    flex: 137 1 0;
}

.footer-images a {
    display: block;
}

.footer-images img {
    display: block;
    width: 100%;
    height: auto;
}

.fpa{
  padding: 20px;
  display: flex;
  justify-content: center;
  font-size: 14px;
}




@media (max-width: 1600px) {

  .swiper{
  max-width: 1100px;
 }

 .swiper-business .swiper-slide img {
    width: auto;
    height: 439px;
   
}
 .swiper-lifestyle .swiper-slide img {
    width: auto;
    height: 439px;
   
}
.flexbox-size{
  max-width: 1100px;
}
}

/* Between 1200px and 768px (tablet) */
@media (max-width: 1200px) {

 .swiper{
  max-width: 930px;
 }

 .swiper-business .swiper-slide img {
    width: auto;
    height: 339px;
   
}

 .swiper-lifestyle .swiper-slide img {
    width: auto;
    height: 339px;
   
}
.flexbox-size{
  max-width: 900px;
}

}



 @media (max-width: 1280px) {
    .desktop-version {
      display: none;
    }

    .mobile-version {
      display: block;
    }
    
.toggle-buttons {
 flex-direction: column;
 align-items: center;
}

.toggle-buttons-brown {
  flex-direction: column;
  align-items: center;
}
.toggle-buttons-new-black{
   flex-direction: column;
  align-items: center;
}

.swiper-business .swiper-slide img {
    
    border: none;
}
.swiper-lifestyle .swiper-slide img {
    
    border: none;
}

.fpa{
  font-size: 12px;
}





  } 

  @media (max-width: 1000px) {

    .swiper-business .swiper-slide img,
    .swiper-lifestyle .swiper-slide img {
        width: 100%;
        height: auto;
        max-width: 100%;
        object-fit: contain;
    }

}