.mobile-version {
    display: none;
  }

 

.sitehtml{
  background-color: #F8F1EC;
}

  .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-row>a {
    flex: 0 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
  }

 .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: 10px;
  margin-top: 70px;
  margin-bottom: 70px;
}

.toggle-buttons button {
  width: 396px;
  height: 79px;
  border-radius: 60px;
  font-size: 29px;
  padding: 10px 20px;
  border: 1px solid #A98D79;
  background: #F8F1EC;
  color: #A98D79;
  cursor: pointer;
  transition: 0.3s;
}


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

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

.toggle-buttonlink button {
  width: 396px;
  height: 79px;
  border-radius: 60px;
  font-size: 29px;
  padding: 10px 20px;
  border: 1px solid #A98D79;
  background: #F8F1EC;
  color: #A98D79;
  cursor: pointer;
  transition: 0.3s;
}

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




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

.toggle-buttons-brown button {
  width: 396px;
  height: 79px;
  border-radius: 60px;
  font-size: 29px;
  padding: 10px 20px;
  border: 1px solid #5A1E00; /* brown border */
  background: #F8F1EC;        /* same beige background */
  color: #5A1E00;             /* 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: 396px;
  height: 79px;
  border-radius: 60px;
  font-size: 29px;
  padding: 10px 20px;
  border: 1px solid #5A1E00; /* brown border */
  background: #F8F1EC;        /* same beige background */
  color: #5A1E00;             /* brown text */
  cursor: pointer;
  transition: 0.3s;
}
.toggle-buttonlink-brown button:hover{
  background:  #5A1E00;    
  color: #F8F1EC;
  
}

.toggle-buttons-brown button.active {
  background: #5A1E00;  /* 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: 396px;
  height: 79px;
  border-radius: 60px;
  font-size: 29px;
  padding: 10px 20px;
  border: 1px solid #468390; /* brown border */
  background: #F8F1EC;        /* same beige background */
  color: #468390;             /* brown text */
  cursor: pointer;
  transition: 0.3s;
}
.toggle-buttonlink-cyan button:hover{
  background:  #468390;    
  color: #F8F1EC;
  
}

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

.toggle-buttonlink-black button {
  width: 396px;
  height: 79px;
  border-radius: 60px;
  font-size: 29px;
  padding: 10px 20px;
  border: 1px solid #000000; /* brown border */
  background: #000000;        /* same beige background */
  color: #F8F1EC;            /* brown text */
  cursor: pointer;
  transition: 0.3s;
}
/* Views */
.view {
  display: none;
  flex-direction: column; /* stack content vertically */
  align-items: center;
  margin-bottom: 30px;
}

.view.active {
  display: flex;
}



.flexbox-size{
  max-width: 1250px;
}

@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: 768px) {
    .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;
}

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




  }