@font-face {
  font-family: gotham;
  src: url(/cdn/shop/files/GothamUltra.otf?v=1725535810);
  font-weight:900;
}
@font-face {
  font-family: gotham;
  src: url(/cdn/shop/files/Gotham-Bold.otf?v=1725535810);
  font-weight:700;
}
@font-face {
  font-family: gotham;
  src: url(/cdn/shop/files/Gotham-Medium.otf?v=1725535810);
  font-weight:500;
}
@font-face {
  font-family: gotham;
  src: url(/cdn/shop/files/Gotham-Bold.otf?v=1725535810);
  font-weight:400;
}
@font-face {
  font-family: gotham;
  src: url(/cdn/shop/files/Gotham-Light.otf?v=1725535810);
  font-weight:300;
}
@font-face {
  font-family: gotham;
  src: url(/cdn/shop/files/Gotham-Book.otf?v=1725535810);
  font-weight:300;
}

.best-taste-guarantee-banner{
  .hero__text-wrap{
    padding-top:5vw;
    @media (max-width:767px){
      padding-top:0;
    }
  }
  .hero__title{
    max-width:620px;
    color:#000;
    font-family: gotham;
    font-weight:900;
    @media (max-width:1400px){
      font-size:60px !important;
    }
    @media (max-width:767px){
      max-width:400px;
      font-size:32px !important;
    }
    .sticker{
      margin-top:30px;
      @media (max-width:1400px){
        width:200px !important;
      }
      @media (max-width:767px){
        width:110px !important;
        margin-top:15px;
      }
    }
  }
}

.custom-icon-list{
  .section-header{
    max-width:750px;
    margin: auto;
    @media (max-width:767px){
      max-width:380px;
    }
    p{
      margin-bottom: 40px;;
      font-size:20px;
      font-family: gotham;
      font-weight:300;
      line-height:1;
      @media (max-width:767px){
        font-size:17px;
        margin-bottom: 30px;
      }
    }
    h2.section-header__title {
      font-family: gotham;
      font-size: 26px;
      text-transform: none;
      font-weight: 700;
      margin-bottom: 50px;
      @media (max-width:767px){
        font-size:17px;
        margin-bottom: 30px;
      }
    }
  }
  .grid {
    max-width: 550px;
    @media (max-width:767px){
      max-width:380px;
    }
    margin:auto;
    .grid__item{
      width:100%;
      padding:0;
      display: flex;
      align-items: center;
      text-align: left;
      margin-bottom: 30px;
      @media (max-width:767px){
        margin-bottom: 10px;
      }
      &>div:first-child{
        width:100px;
        padding-right:50px;
        @media (max-width:767px){
          width:60px;
          padding-right:30px;
        }
      }
      &>div:last-child{
        width:calc(100% - 100px);
        @media (max-width:767px){
          width:calc(100% - 60px);
        }
        p{
          font-size:20px;
          font-family: gotham;
          font-weight:300;
          line-height:1;
          @media (max-width:767px){
            font-size:17px;
          }
        }
        a{
          text-decoration:underline;
        }
      }
      &:nth-child(2) > div:first-child .text-spacing{
        padding-bottom:160% !important;
        position:relative;
        img{
          height:100%;
          object-fit:contain;
          width: 100%;
          position: absolute;
          left: 0;
          top: 0;
        }
      }
    }
  }
  p.section-footer{
    font-size:20px;
    font-family: gotham;
    font-weight:700;
    line-height:1;
    max-width: 650px;
    text-align: center;
    margin: 30px auto 0;
    @media (max-width:767px){
      font-size:17px;
      max-width: 380px;
      margin: 10px auto 0;
    }
  }
}
.custom-html{
  background-color: #1ECAD3;
  padding-top:100px;
  padding-bottom:30px;
  text-align:center;
  @media (max-width:767px){
    padding-top:50px;
    padding-bottom:10px;
    
  }
  .terms-condition{
    font-size: 10px;
    font-family: gotham;
    font-weight: 300;
    line-height: 1;
    text-align: center;
    display: inline-block;
    position: relative;
    top: -60px;
    text-decoration: underline;
    color:#000;
    &:hover{
      color:#fff !important;
    }
    @media (max-width:540px){
      top: -30px;
    }
  }
  .terms-condition-popup{
    position:fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
    .terms-condition-bg{
      position:absolute;
      background-color: #000;
      opacity: .5;
      width: 100vw;
      height: 100vh;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: -1;
    }
    .terms-condition-content{
      background-color: #fff;
      border-radius: 20px;
      padding: 25px 35px;
      width: 90vw;
      max-width: 800px;
      text-align: left;
      max-height: 80vh;
      overflow-y: scroll;
      .terms-condition-close{
        position:absolute;
        right: 25px;
        top: 15px;
        cursor: pointer;
      }
      h2{
        font-size: 16px;
        font-family: gotham;
        font-weight: 700;
        margin-bottom: 15px;
      }
      p,li{
        font-size: 12px;
        font-family: gotham;
        font-weight: 300;
        margin-bottom: 0px;
      }
      ol{
        margin:0 0 0 16px;
      }
    }
  }
}