/* ================================ */
/*          How We Wear it          */
/* ================================ */
.how-we-wear-hero{padding: 80px 40px;}
.how-we-wear-hero__grid{display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;}
.how-we-wear-hero__media{position: relative;
  border-radius: 24px;
  overflow: hidden;
  height: 100%;}
.how-we-wear-hero__media img{width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;}
.how-we-wear-play-btn{position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:70px;
  height:70px;
  border-radius:50%;
  border:none;
  background:transparent !important;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:3;}
.how-we-wear-hero__content{background: #171717;
  color: white;
  padding: 60px;
  border-radius: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;}
.how-we-wear-eyebrow{text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 2px;
  color: #A3A3A3;}
.how-we-wear-title{margin: 12px 0;}
.how-we-wear-desc{/* opacity: .8; */
  margin-bottom: 25px;
  color: #fff;}
.how-we-wear-btn{background: white;
  color: black;
  padding: 12px 20px;
  border-radius: 25px;
  text-decoration: none;
  gap: 8px;}
.how-we-wear-play-btn{position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:70px;
  height:70px;
  border-radius:50%;
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:20px;}
.how-we-wear-video-modal{position:fixed;
  inset:0;
  background:rgba(0,0,0,.8);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:9999;}
.how-we-wear-video-wrapper{position:relative;
  /* max-width:420px; */
  /* width:90%; */}
.how-we-wear-video-wrapper video{width:100%;
  border-radius:16px;
      max-height: 90vh;
    border-radius: 16px;
    object-fit: cover;}
.how-we-wear-video-wrapper{position:relative;
  /* max-width:420px; */}
.how-we-wear-video-overlay{position:absolute;
  bottom:70px;
  left:20px;
  color:white;
  z-index:5;}
.how-we-wear-video-title{font-size:16px;
  font-weight:500;}
.how-we-wear-video-step{font-size:13px;
  opacity:.8;}
.how-we-wear-hero__media{position:relative;
  border-radius:20px;
  overflow:hidden;}
.how-we-wear-thumbnail-overlay{position:absolute;
  inset:0;
  background: rgba(23, 23, 23, 0.1);}
.how-we-wear-steps{padding:80px 40px;}
.how-we-wear-steps-heading{text-align:center;
  margin-bottom:40px;}
.how-we-wear-steps-grid{display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;}
.how-we-wear-step-card{text-align:center;
  display: flex;
  justify-content: start;
  flex-direction: column;}
.how-we-wear-step-image{justify-content: center;
  display: flex;
  border-radius: 12px;
  background: #F7F7F7;
  padding: 15px 24px 23px;}
.how-we-wear-step-image img{width: 100%;
  height:auto;
  max-width: 132px;}
.how-we-wear-step-title{margin-top: 16px;
  color: #171717;}
.how-we-wear-step-text{color: #171717;
  font-size: 12px;}
.how-we-wear-expect{padding:80px 40px;
  background:#F7F7F7;}
.how-we-wear-expect-heading{text-align:center;
  margin-bottom:40px;}
.how-we-wear-expect-grid{display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;}
.how-we-wear-expect-card{background:#FFFFFF;
  border: 1px solid  #EBEBEB;
  border-radius:16px;
  padding: 24px;
  box-shadow: 0px 1px 2px 0px #0A0D1408;
  min-height: 200px;
  display: flex;
  justify-content: end;
  /* align-items: end; */
  flex-direction: column;}
.how-we-wear-expect-icon img{width: 40px;
  height:auto;
  margin-bottom:15px;}
.how-we-wear-expect-title{margin-bottom: 2px;
  color: #171717;}
.how-we-wear-expect-text{font-size:14px;
  color: #5C5C5C;}
.how-we-wear-support{padding:80px 40px;}
.how-we-wear-support-wrapper{border: 1px solid #EBEBEB;
  border-radius:16px;
  padding:24px;
  box-shadow: 0px 3px 3px 0px #0A0D1408;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;}
.how-we-wear-support-title{margin-bottom:4px;}
.how-we-wear-support-desc{font-size:12px;
  color: #5C5C5C;}
.how-we-wear-support-btn{display:flex;
  align-items:center;
  gap:4px;
  background:#F7F7F7;
  padding:16px 12px;
  border-radius:8px;
  text-decoration:none;
  font-size:14px;}
@media(max-width:992px){
  .how-we-wear-steps-grid{grid-template-columns:repeat(3,1fr);}
  .how-we-wear-expect-grid{grid-template-columns:repeat(2,1fr);}
  .how-we-wear-hero{padding: 60px 20px;}
  .how-we-wear-steps,
.how-we-wear-expect,
.how-we-wear-support{padding: 60px 20px;}
  .how-we-wear-hero__content{padding: 24px;}
}
@media(max-width:768px){
  .how-we-wear-hero{padding: 44px 16px;}
  .how-we-wear-steps,
.how-we-wear-expect,
.how-we-wear-support{padding: 44px 16px;}
  .how-we-wear-expect{padding: 32px 16px;}
  .how-we-wear-steps-grid{grid-template-columns:1fr;
  gap: 32px;}
  .how-we-wear-hero__grid{grid-template-columns:1fr;}
  .how-we-wear-expect-grid{grid-template-columns:1fr;
  gap: 24px;}
  .how-we-wear-hero__media{order: 1 !important;}
  .how-we-wear-hero__content{background: white;
  color: #171717;
  padding: 10px;}
  .how-we-wear-desc{color:rgb(73, 43, 43);
  margin-bottom: 20px;}
  .how-we-wear-title{margin: 4px 0;}
  .how-we-wear-btn{display: none;}
  .how-we-wear-steps-heading,
.how-we-wear-expect-heading{margin-bottom: 32px;}
  .how-we-wear-support-wrapper{flex-wrap: wrap;}
  .how-we-wear-video-wrapper{padding: 24px 16px;}
  .how-we-wear-support-btn{width: 100%;
  justify-content: center;}
  .how-we-wear-title{text-align: center;}
  .how-we-wear-eyebrow{opacity: 1;
  color: #171717;}
  .how-we-wear-expect-card{justify-content: center;
  align-items: center;}
  .how-we-wear-expect-text,
.how-we-wear-expect-title{text-align: center;}
  .how-we-wear-close{color: #fff;
    right: 10px;
    font-size: 18px;
    position: absolute;
    top: 12px;
    opacity: .8;
  cursor:pointer;}
}