/* ==========================================================
   ISFAHANWEB DESIGN #1
   SELECTED WORK / PORTFOLIO
   ========================================================== */

.iw1-work{
  position:relative;
  padding:115px 0 105px;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 18%,
      rgba(46,179,240,.10),transparent 24%),
    linear-gradient(180deg,#fff 0%,#f5fbfe 100%);
}

.iw1-work::before{
  content:"WORK";
  position:absolute;
  top:45px;
  inset-inline-start:-25px;
  color:rgba(13,113,162,.035);
  font-size:clamp(120px,18vw,290px);
  line-height:1;
  font-weight:950;
  letter-spacing:-.08em;
  pointer-events:none;
}


/* Heading */

.iw1-work-head{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:end;
  gap:70px;
  margin-bottom:55px;
}

.iw1-work-kicker{
  display:block;
  margin-bottom:14px;
  color:#ef7d00;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
}

.iw1-work-head h2{
  max-width:680px;
  margin:0;
  color:#123044;
  font-size:clamp(40px,4vw,61px);
  line-height:1.13;
  letter-spacing:-.045em;
}

.iw1-work-head h2 strong{
  display:block;
  color:#078fce;
  font-weight:900;
}

.iw1-work-intro{
  max-width:480px;
  padding-bottom:5px;
}

.iw1-work-intro p{
  margin:0 0 22px;
  color:#607784;
  font-size:14px;
  line-height:2;
}

.iw1-work-intro a{
  display:inline-flex;
  align-items:center;
  gap:17px;
  color:#143b51;
  font-size:13px;
  font-weight:900;
  text-decoration:none;
}

.iw1-work-intro a span{
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:#078fce;
}


/* Browser */

.iw1-browser{
  overflow:hidden;
  border:1px solid rgba(21,67,91,.10);
  border-radius:18px;
  background:#fff;
  box-shadow:0 30px 70px rgba(19,75,102,.15);
}

.iw1-browser-bar{
  height:39px;
  padding:0 15px;
  display:flex;
  align-items:center;
  gap:6px;
  background:#f6f8f9;
  border-bottom:1px solid #e8eef1;
}

.iw1-browser-bar span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#cbd6dc;
}

.iw1-browser-bar span:nth-child(1){
  background:#ff8a00;
}

.iw1-browser-bar span:nth-child(2){
  background:#8cc63f;
}

.iw1-browser-bar span:nth-child(3){
  background:#2eb3f0;
}

.iw1-browser-bar i{
  width:38%;
  height:8px;
  margin-inline-start:auto;
  border-radius:10px;
  background:#e5ebee;
}

.iw1-browser-screen{
  position:relative;
  height:500px;
  overflow:hidden;
  background:#eaf1f4;
}

.iw1-browser-screen img{
  display:block;
  width:100%;
  height:auto;
  min-height:100%;
  object-fit:cover;
  object-position:top center;
  transition:transform 1s cubic-bezier(.2,.7,.2,1);
}


/* Featured */

.iw1-work-featured{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(330px,.75fr);
  min-height:580px;
  overflow:hidden;
  border-radius:30px;
  background:
    linear-gradient(135deg,#e8f8ff 0%,#f8fcfe 60%,#fff 100%);
  border:1px solid rgba(7,143,206,.12);
  box-shadow:0 28px 75px rgba(20,78,106,.10);
}

.iw1-work-featured-media{
  padding:45px 0 45px 45px;
  display:flex;
  align-items:center;
}

.iw1-work-featured-info{
  position:relative;
  padding:60px 46px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.iw1-work-number{
  position:absolute;
  top:27px;
  inset-inline-end:28px;
  color:rgba(7,143,206,.10);
  font-size:92px;
  line-height:1;
  font-weight:950;
}

.iw1-work-category{
  position:relative;
  color:#078fce;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
}

.iw1-work-featured-info h3{
  position:relative;
  margin:13px 0 18px;
  color:#123246;
  font-size:clamp(31px,3vw,47px);
  line-height:1.3;
}

.iw1-work-featured-info p{
  position:relative;
  margin:0;
  color:#5e7582;
  font-size:14px;
  line-height:2;
}

.iw1-work-tags{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:25px;
}

.iw1-work-tags span{
  padding:7px 11px;
  border:1px solid rgba(17,79,108,.10);
  border-radius:30px;
  color:#46616f;
  background:rgba(255,255,255,.72);
  font-size:10px;
  font-weight:800;
}

.iw1-work-feature-line{
  width:78px;
  height:4px;
  margin-top:31px;
  border-radius:5px;
  background:
    linear-gradient(90deg,#2eb3f0 0 33%,#ff8a00 33% 66%,#8cc63f 66%);
}

.iw1-work-featured:hover .iw1-browser-screen img{
  transform:translateY(-2%) scale(1.015);
}


/* Secondary grid */

.iw1-work-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-top:22px;
}

.iw1-work-card{
  min-width:0;
  overflow:hidden;
  border-radius:27px;
  border:1px solid rgba(18,69,94,.10);
  box-shadow:0 20px 55px rgba(19,75,102,.08);
}

.iw1-work-card-blue{
  background:
    linear-gradient(155deg,#edf9ff 0%,#fff 66%);
}

.iw1-work-card-orange{
  background:
    linear-gradient(155deg,#fff5e9 0%,#fff 66%);
}

.iw1-work-card-media{
  padding:25px 25px 0;
}

.iw1-work-card-orange .iw1-work-card-media{
  padding:0 25px 25px;
}

.iw1-browser-small{
  border-radius:14px;
  box-shadow:0 20px 45px rgba(19,75,102,.12);
}

.iw1-browser-small .iw1-browser-bar{
  height:31px;
}

.iw1-browser-small .iw1-browser-screen{
  height:310px;
}

.iw1-work-card-info{
  position:relative;
  padding:31px 32px 35px;
}

.iw1-work-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.iw1-work-card-top span{
  color:#078fce;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
}

.iw1-work-card-orange .iw1-work-card-top span{
  color:#ef7d00;
}

.iw1-work-card-top b{
  color:rgba(18,68,93,.09);
  font-size:46px;
  line-height:1;
}

.iw1-work-card h3{
  margin:0;
  color:#153447;
  font-size:30px;
  line-height:1.35;
}

.iw1-work-card p{
  margin:14px 0 0;
  color:#637985;
  font-size:13px;
  line-height:1.9;
}

.iw1-work-card:hover .iw1-browser-screen img{
  transform:translateY(-2%) scale(1.02);
}


/* Footer */

.iw1-work-footer{
  margin-top:35px;
  padding-top:25px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid rgba(19,71,96,.11);
}

.iw1-work-footer > span{
  color:#82939d;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
}

.iw1-work-footer a{
  display:flex;
  align-items:center;
  gap:15px;
  color:#173b4e;
  font-size:13px;
  font-weight:900;
  text-decoration:none;
}

.iw1-work-footer b{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:#073d63;
}


/* Tablet */

@media (max-width:1050px){

  .iw1-work-featured{
    grid-template-columns:1.35fr .8fr;
  }

  .iw1-work-featured-media{
    padding:30px 0 30px 30px;
  }

  .iw1-browser-screen{
    height:430px;
  }

  .iw1-work-featured-info{
    padding:45px 30px;
  }

}


/* Mobile */

@media (max-width:760px){

  .iw1-work{
    padding:80px 0;
  }

  .iw1-work-head{
    display:block;
    margin-bottom:32px;
  }

  .iw1-work-head h2{
    font-size:38px;
  }

  .iw1-work-intro{
    margin-top:22px;
  }

  .iw1-work-featured{
    display:flex;
    flex-direction:column;
    min-height:0;
    border-radius:22px;
  }

  .iw1-work-featured-media{
    padding:18px 18px 0;
  }

  .iw1-browser-screen{
    height:300px;
  }

  .iw1-work-featured-info{
    padding:34px 24px 32px;
  }

  .iw1-work-number{
    font-size:65px;
  }

  .iw1-work-featured-info h3{
    font-size:30px;
  }

  .iw1-work-grid{
    display:block;
  }

  .iw1-work-card{
    margin-top:18px;
    border-radius:22px;
  }

  .iw1-work-card-orange{
    display:flex;
    flex-direction:column;
  }

  .iw1-work-card-orange .iw1-work-card-info{
    order:2;
  }

  .iw1-work-card-orange .iw1-work-card-media{
    order:1;
    padding:18px 18px 0;
  }

  .iw1-work-card-media{
    padding:18px 18px 0;
  }

  .iw1-browser-small .iw1-browser-screen{
    height:270px;
  }

  .iw1-work-card-info{
    padding:27px 23px 30px;
  }

  .iw1-work-card h3{
    font-size:27px;
  }

  .iw1-work-footer > span{
    display:none;
  }

  .iw1-work-footer{
    justify-content:flex-end;
  }

}