/* ----------------------------------------------------------
   WRAPPER (Left + Right)
----------------------------------------------------------- */
.weisro-project-item-wrapper {
  display: flex !important;
  align-items: center;
  flex-direction: row !important;
  justify-content: space-between !important;
  gap: 40px !important;
  background: linear-gradient(180deg, #071021 0%, #0b1626 100%) !important;
  padding: 25px !important;
  border-radius: 16px !important;
  color: #e6eef6 !important;
  box-shadow: 0 10px 30px rgba(2,8,23,.6) !important;
}

.weisro-left,
.weisro-right {
  width: 50% !important;
  min-width: 320px !important;
  display: block !important;
}

/* Mobile */
@media (max-width: 900px) {
  .weisro-project-item-wrapper {
    flex-direction: column !important;
  }
}


/* ----------------------------------------------------------
   LEFT SIDE — Device + Slider
----------------------------------------------------------- */
.weisro-main-title{
	color: white;
	text-align: center;
	padding: 20px !important;
	border: solid;
	border-radius: 15px;
	margin-bottom: 50px;
}

.weisro-device-wrap {
  position: relative !important;
  width: fit-content !important;
  margin: 0 auto !important;
}

/* ARROWS */
.weisro-nav-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: #fff !important;
  font-size: 20px !important;
  cursor: pointer !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  transition: .2s !important;
  z-index: 5 !important;
}

.weisro-prev { left: -50px !important; }
.weisro-next { right: -50px !important; }


/* DEVICE FRAME */
.weisro-device {
  width: 200px !important;
  height: 433px !important;
  background: #fff !important;
  border-radius: 26px !important;
  padding: 10px !important;
  position: relative !important;
}

.weisro-screen {
  width: 100% !important;
  height: 100% !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

.weisro-screen img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}


/* THUMBNAILS */
.weisro-thumbs {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 14px !important;
  flex-wrap: wrap !important;
}

.weisro-thumb {
  width: 52px !important;
  height: 76px !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  opacity: .6 !important;
  border: 2px solid transparent !important;
  cursor: pointer !important;
  transition: .2s !important;
}

.weisro-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.weisro-thumb.active {
  opacity: 1 !important;
  border-color: #d4a84a !important;
}


/* ----------------------------------------------------------
   RIGHT SIDE — Details
----------------------------------------------------------- */

.weisro-subtitle {
  font-size: 20px !important;
  margin-bottom: 30px !important;
  color: #cfe3ff !important;
}

.weisro-desc {
  color: #9fb0c8 !important;
  line-height: 1.7 !important;
  margin-bottom: 30px !important;
}

.weisro-techs {
  margin-bottom: 30px !important;
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.weisro-tech-item {
  background: rgba(255,255,255,.08) !important;
  padding: 7px 12px !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  color: #cfe3ff !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}

.weisro-open-link {
  background: #3477f4 !important;
  padding: 10px 90px !important;
  color: #fff !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: .2s !important;
}

.weisro-open-link:hover {
  background: #4a8cff !important;
}

@media (max-width: 460px) {
.weisro-left,
.weisro-right {
  min-width: 268px !important;
}
.weisro-open-link{
    padding: 10px 30px !important;
}
	.weisro-project-item-wrapper{
	margin: 10px !important
}
	.weisro-main-title{
	font-size: 22px;
		padding: 10px !important
}
}

@media (min-width: 461px) {
		.weisro-project-item-wrapper{
	margin: 50px !important
}
}