.weblabs-about-service{
  --was-gap:48px;

  --was-label:#0f2b33;
  --was-title:#0f2b33;
  --was-body:#4b5563;
  --wbv-gold: #c8a85a;
  --wbv-header: #0b2f39;

  --was-media-radius:0px;
  --was-video-overlay:rgba(0,0,0,.20);

  --was-btn1-bg:#f3ebd7;
  --was-btn1-color:#7a5a2b;
  --was-btn1-diamond:#c8a85a;
  --was-btn1-hover-bg:#e4d3af;
  --was-btn1-hover-color:#5a3d1a;

  --was-btn2-bg:#f5f5f5;
  --was-btn2-color:#4b5563;
  --was-btn2-diamond:#d1d5db;
  --was-btn2-hover-bg:#e5e5e5;
  --was-btn2-hover-color:#111827;

  position:relative;
  width:100%;
  box-sizing:border-box;
}



/* ========== Header ========== */

.weblabs-about-service__header{
  display:flex;
  flex-direction:row-reverse;
  align-items:center;
  gap:18px;
  margin-bottom:28px;
}

.weblabs-about-service__bar{
 width: 100px;
    height: 16px;
  background:var(--wbv-gold);
  flex:0 0 auto;
}

.weblabs-about-service__header-inner{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1 1 auto;
}

.weblabs-about-service__header-title{
  margin:0;
  font-size:18px;
  font-weight:800;
  color:var(--wbv-header);
  text-align:right;
}

.weblabs-about-service__header-subtitle{
  margin:0;
  font-size:13px;
  color:var(--wbv-header-sub);
  text-align:right;
}

.weblabs-about-service__header-underline{
width: 46px;
    height: 2px;
  background:var(--wbv-header);
}

/* GRID */

.weblabs-about-service__grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:var(--was-gap);
  align-items:center;
}

/* MEDIA (VIDEO) */

.weblabs-about-service__media{
  position:relative;
  border-radius:var(--was-media-radius);
  overflow:hidden;
  background:#111827;
}

.weblabs-about-service__video,
.weblabs-about-service__video-placeholder{
  width:100%;
  display:block;
  aspect-ratio:16/9;
}

.weblabs-about-service__video{
  height:auto;
  object-fit:cover;
}

.weblabs-about-service__video-placeholder{
  background:#111827;
  color:#e5e7eb;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
}

.weblabs-about-service__overlay{
  position:absolute;
  inset:0;
  background:var(--was-video-overlay);
  pointer-events:none;
}

.weblabs-about-service__play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.weblabs-about-service__play-circle{
  width:110px;
  height:110px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:center;
}

.weblabs-about-service__play-icon{
  width:30px;
  height:30px;
  color:#ffffff;
}

/* CONTENT */

.weblabs-about-service__content{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:right;
}


.weblabs-about-service__title{
  margin:0 0 14px;
  font-size:28px;
  font-weight:800;
  color:var(--was-title);
}

.weblabs-about-service__lead{
  font-size:14px;
  line-height:2;
  color:var(--was-body);
}

/* BUTTONS */

.weblabs-about-service__buttons{
  margin-top:26px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:flex-start;
}

.weblabs-about-service__btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:11px 24px;
  border-radius:0;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
  cursor:pointer;
}

.weblabs-about-service__btn.is-disabled{
  cursor:default;

}

.weblabs-about-service__btn:focus-visible{
  outline:2px solid rgba(15,23,42,.6);
  outline-offset:2px;
}

/* Diamond */

.weblabs-about-service__btn-diamond{
  width:32px;
  height:32px;
  border-radius:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transform:rotate(45deg);
  flex-shrink:0;
}

.weblabs-about-service__btn-diamond svg{
  transform:rotate(-45deg);
}

/* Primary button (right) */

.weblabs-about-service__btn--primary{
  background:var(--was-btn1-bg);
  color:var(--was-btn1-color);
}

.weblabs-about-service__btn--primary .weblabs-about-service__btn-diamond{
  background:var(--was-btn1-diamond);
  color:#ffffff;
}

.weblabs-about-service__btn--primary:hover:not(.is-disabled){
  background:var(--was-btn1-hover-bg);
  color:var(--was-btn1-hover-color);
}

/* Ghost / secondary button */

.weblabs-about-service__btn--ghost{
  background:var(--was-btn2-bg);
  color:var(--was-btn2-color);
}

.weblabs-about-service__btn--ghost .weblabs-about-service__btn-diamond{
  background:var(--was-btn2-diamond);
  color:#4b5563;
}

.weblabs-about-service__btn--ghost:hover:not(.is-disabled){
  background:var(--was-btn2-hover-bg);
  color:var(--was-btn2-hover-color);
}

/* RESPONSIVE */

@media (max-width:1024px){
  .weblabs-about-service__grid{
    grid-template-columns:1.1fr 1fr;
    gap:32px;
  }
}

@media (max-width:767px){
  .weblabs-about-service__grid{
    grid-template-columns:1fr;
    gap:26px;
  }

  .weblabs-about-service__content{
    order:1;
    align-items:flex-start;
    text-align:right;
  }

  .weblabs-about-service__media{
    order:2;
  }

  .weblabs-about-service__buttons{
    justify-content:flex-start;
  }

  .weblabs-about-service__title{
    font-size:22px;
  }
}

/* reduced motion */

@media (prefers-reduced-motion: reduce){
  .weblabs-about-service__btn,
  .weblabs-about-service__play-circle{
    transition:none;
  }
}