.delivery-page{
  padding:20px 0 70px;
  color:var(--navy);
  background:#fff;
}
.delivery-hero,
.delivery-section{
  width:min(1600px,calc(100% - 48px));
  margin-left:auto;
  margin-right:auto;
}
.delivery-hero{
  min-height:430px;
  position:relative;
  overflow:hidden;
  border-radius:32px;
  background:#f6faff url(../images/hero-butterfly-v2.png) center 63%/cover no-repeat;
}
.delivery-hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.91) 35%,rgba(255,255,255,.08) 67%);
}
.delivery-breadcrumbs{
  position:absolute;
  z-index:2;
  top:27px;
  left:5.5%;
  display:flex;
  align-items:center;
  gap:8px;
  color:#77879c;
  font-size:12px;
  font-weight:600;
}
.delivery-breadcrumbs a:hover{color:var(--blue)}
.delivery-breadcrumbs .ti{width:13px;height:13px}
.delivery-hero-copy{
  width:620px;
  position:relative;
  z-index:2;
  padding:92px 0 56px 6.5%;
}
.delivery-kicker{
  width:max-content;
  padding:8px 13px;
  display:flex;
  align-items:center;
  gap:7px;
  border-radius:18px;
  background:#edf4ff;
  color:#2f70c5;
  font-size:11px;
  font-weight:700;
}
.delivery-kicker .ti{width:17px;height:17px}
.delivery-hero h1{
  margin:18px 0 16px;
  font-size:64px;
  line-height:1;
  letter-spacing:-2.7px;
}
.delivery-hero-copy>p{
  max-width:550px;
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.65;
}
.delivery-section{margin-top:50px}
.delivery-heading{
  margin:0 0 25px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  text-align:left;
}
.delivery-heading>span{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#edf8eb;
  color:#4fa842;
}
.delivery-heading>span .ti{width:24px;height:24px}
.delivery-heading h2{margin:0;font-size:30px;line-height:1.15;letter-spacing:-.8px}
.delivery-heading p{margin:4px 0 0;color:var(--muted);font-size:12px}
.delivery-methods{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.delivery-method{
  min-height:226px;
  padding:26px 28px;
  display:grid;
  grid-template-columns:104px minmax(0,1fr);
  gap:22px;
  align-items:center;
  border:1px solid #f0dfe2;
  border-radius:24px;
  background:linear-gradient(135deg,#fff,#fff5f6);
  transition:transform .2s ease,box-shadow .2s ease;
}
.delivery-method:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(23,43,73,.1)}
.delivery-method.pickup{border-color:#dcead8;background:linear-gradient(135deg,#fff,#f4faf2)}
.delivery-method.taxi{border-color:#f0dfc7;background:linear-gradient(135deg,#fff,#fff8ee)}
.delivery-method-icon{
  width:96px;
  height:96px;
  display:grid;
  place-items:center;
  border:1px solid #f0cfd4;
  border-radius:50%;
  background:#fff;
  color:#e72d3a;
  box-shadow:0 0 0 8px rgba(255,255,255,.65),0 8px 22px rgba(23,43,73,.07);
}
.delivery-method.pickup .delivery-method-icon{border-color:#cfe2c9;color:#55ad42}
.delivery-method.taxi .delivery-method-icon{border-color:#efd7b6;color:#e99a1d}
.delivery-method-icon .ti{width:45px;height:45px;stroke-width:1.6}
.delivery-method-icon img{
  width:78px;
  height:auto;
  display:block;
  object-fit:contain;
}
.delivery-method.taxi .delivery-method-icon{position:relative;overflow:hidden}
.delivery-method.taxi .delivery-method-icon:after{
  content:"";
  width:42px;
  height:7px;
  position:absolute;
  left:27px;
  bottom:18px;
  background:repeating-conic-gradient(#172b49 0 25%,#fff 0 50%) 0 0/10px 10px;
  border:1px solid rgba(23,43,73,.15);
  border-radius:2px;
}
.delivery-method h3{margin:0 0 10px;font-size:18px;line-height:1.3}
.delivery-method p{margin:0;color:#5c6d82;font-size:13px;line-height:1.65}
.delivery-benefits{
  margin-top:20px;
  padding:20px 24px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  border:1px solid #e2e9f2;
  border-radius:22px;
  background:#fff;
  box-shadow:0 8px 26px rgba(23,43,73,.05);
}
.delivery-benefit{
  min-height:92px;
  padding:9px 28px;
  display:grid;
  grid-template-columns:58px 1fr;
  gap:16px;
  align-items:center;
}
.delivery-benefit+ .delivery-benefit{border-left:1px solid #e6ebf2}
.delivery-benefit>span{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#eaf3ff;
  color:var(--blue);
}
.delivery-benefit.packing>span{background:#edf8e9;color:#55ad42}
.delivery-benefit.support>span{background:#f3eaff;color:#9156de}
.delivery-benefit>span .ti{width:29px;height:29px}
.delivery-benefit h3{margin:0 0 6px;font-size:15px}
.delivery-benefit p{margin:0;color:#617187;font-size:12px;line-height:1.5}
.delivery-help{
  min-height:132px;
  margin-top:22px;
  padding:24px 36px;
  display:grid;
  grid-template-columns:62px minmax(260px,1fr) auto;
  gap:20px;
  align-items:center;
  border:1px solid #dbe8f6;
  border-radius:24px;
  background:linear-gradient(100deg,#eef6ff,#fbfdff);
}
.delivery-help-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  color:var(--blue);
}
.delivery-help-icon .ti{width:28px;height:28px}
.delivery-help h2{margin:0 0 7px;font-size:21px}
.delivery-help p{margin:0;color:var(--muted);font-size:13px}
.delivery-help-actions{display:flex;gap:14px}
.delivery-help-actions a{
  min-height:54px;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:1px solid var(--blue);
  border-radius:15px;
  color:var(--blue);
  font-size:13px;
  font-weight:700;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}
.delivery-help-actions a:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(41,120,242,.16)}
.delivery-help-actions .delivery-contact{background:var(--blue);color:#fff}
.delivery-help-actions .delivery-contact:hover{background:#1769e8}
.delivery-help-actions .ti{width:19px;height:19px}

@media(max-width:1180px){
  .delivery-method{grid-template-columns:82px 1fr;padding:22px 20px;gap:17px}
  .delivery-method-icon{width:76px;height:76px}
  .delivery-method-icon .ti{width:35px;height:35px}
  .delivery-help{grid-template-columns:58px 1fr}
  .delivery-help-actions{grid-column:1/-1;justify-content:flex-end}
}

@media(max-width:900px){
  .delivery-hero-copy{width:58%}
  .delivery-hero h1{font-size:54px}
  .delivery-methods{grid-template-columns:1fr}
  .delivery-method{min-height:170px;grid-template-columns:96px 1fr}
  .delivery-method-icon{width:88px;height:88px}
  .delivery-benefits{grid-template-columns:1fr;padding:12px 20px}
  .delivery-benefit{padding:16px 8px}
  .delivery-benefit+ .delivery-benefit{border-left:0;border-top:1px solid #e6ebf2}
}

@media(max-width:700px){
  .delivery-page{padding-top:10px;padding-bottom:38px}
  .delivery-hero,.delivery-section{width:calc(100% - 16px)}
  .delivery-hero{min-height:590px;border-radius:24px;background-position:63% bottom;background-size:auto 58%}
  .delivery-hero:after{background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.92) 53%,rgba(255,255,255,.08) 78%)}
  .delivery-breadcrumbs{top:22px;left:20px}
  .delivery-hero-copy{width:100%;padding:72px 22px 0}
  .delivery-hero h1{font-size:48px}
  .delivery-hero-copy>p{font-size:15px;line-height:1.55}
  .delivery-section{margin-top:34px}
  .delivery-heading{justify-content:flex-start;padding:0 8px}
  .delivery-heading>span{width:44px;height:44px;flex:0 0 auto}
  .delivery-heading h2{font-size:25px}
  .delivery-method{min-height:0;padding:20px 17px;grid-template-columns:72px 1fr;gap:14px;border-radius:20px}
  .delivery-method-icon{width:66px;height:66px;box-shadow:0 0 0 6px rgba(255,255,255,.65)}
  .delivery-method-icon .ti{width:30px;height:30px}
  .delivery-method-icon img{width:56px}
  .delivery-method.taxi .delivery-method-icon:after{width:31px;height:6px;left:18px;bottom:11px;background-size:8px 8px}
  .delivery-method h3{font-size:17px}
  .delivery-method p{font-size:13px;line-height:1.55}
  .delivery-benefits{padding:8px 14px}
  .delivery-benefit{grid-template-columns:52px 1fr;gap:13px}
  .delivery-benefit>span{width:50px;height:50px}
  .delivery-help{padding:20px 17px;grid-template-columns:50px 1fr;gap:14px}
  .delivery-help-icon{width:48px;height:48px}
  .delivery-help h2{font-size:18px}
  .delivery-help p{line-height:1.5}
  .delivery-help-actions{justify-content:stretch;display:grid;grid-template-columns:1fr}
  .delivery-help-actions a{width:100%}
}

@media(max-width:380px){
  .delivery-hero-copy{padding-left:18px;padding-right:18px}
  .delivery-hero h1{font-size:44px}
  .delivery-method{grid-template-columns:62px 1fr;padding:18px 14px;gap:12px}
  .delivery-method-icon{width:58px;height:58px}
  .delivery-method-icon .ti{width:27px;height:27px}
  .delivery-method-icon img{width:49px}
  .delivery-method.taxi .delivery-method-icon:after{left:14px;bottom:9px}
  .delivery-method p{font-size:12.5px}
}