@import '../constansts'

.packages
  padding-top: 15px
  background: url('../../img/order-bg.jpg') center no-repeat
  background-size: cover
  color: #ffffff
  padding-bottom: 45px
  &-slider
    max-width: 1320px !important
    width: 1400px
  h2,p
    color: #ffffff
    max-width: 650px
    margin-right: auto
    margin-left: auto
  img
    width: 76px
    height: 76px
  &-item
    display: flex
    flex-direction: column
    align-items: center
    justify-content: space-between
    width: 300px
    height: 640px
    text-align: center
    border-radius: 20px
    box-shadow: 0 0 15px 0 rgba(41, 48, 55, 0.5)
    background-color: #ffffff
    padding: 25px
    div
      display: flex
      flex-direction: column
      justify-content: space-between
      height: 70%
      &:first-child
        height: 200px
    h3
      font-size: 32px
      font-weight: 600
      letter-spacing: 0.6px
    &__price
      color: #000000 !important
      font-size: 18px !important
      font-weight: 600
      letter-spacing: 0.5px
      font-family: 'PT Sans', sans-serif
      margin-bottom: 0 !important
      span
        font-size: 32px
        font-weight: 600
        letter-spacing: 0.5px
        color: $main-color !important
    &__descr
      color: $main-color !important
      font-size: 16px !important
      letter-spacing: 0.4px
      text-align: center
      margin-bottom: 0 !important
    ul
      padding-top: 20px
      text-align: left
      font-size: 18px
      letter-spacing: 0.5px
      color: #000000
      margin: 0
      font-weight: 600
      padding-inline-start: 0
      li
        list-style: none
        text-align: left
        margin-left: 25px
        font-size: 20px !important
        line-height: 1.4
        letter-spacing: 0.2px
        margin: 5px 0 0 0
        background: url('../../img/icons/check.svg') 0 8px no-repeat
        padding: 0 0 0 30px
        font-weight: normal
    a
      margin-top: 20px

@media screen and (max-width: 1200px)
  .packages-slider
    max-width: 100% !important


@media screen and (max-width: 768px)
  .packages-item
    width: 280px
    ul
      li
        font-size: 16px !important
    h3
      font-size: 26px
    &__price
      font-size: 16px !important
    &__descr
      font-size: 16px !important
    button
      font-size: 18px

@media screen and (max-width: 576px)
  .packages
    padding-bottom: 30px
  .packages-item
    height: 570px
    max-width: 100%
    &__price
      margin-bottom: 10px !important