@import '../constansts'

h1, h2
  font-family: 'Shadow Regular'
  color: $title-color

body
  font-family: 'Montserrat'

.graduation-btn
  display: block
  padding: 35px 71px
  background: url('../../img/graduation/btn_bg.png') center no-repeat
  outline: none
  border: none
  font-family: 'Shadow Regular'
  color: #fff
  font-size: 18px
  &:active, &:focus
    outline: none

main
  background: center url('../../img/graduation/main_bg.png')
  background-size: cover
  height: 100vh
  // height: 1019px
  width: 100%
  position: relative

  .main-information
    left: 100px
    max-width: 550px
    position: absolute
    top: 300px

    h1
      margin-bottom: 24px

    p
      color: $text-color
      font-size: 18px
      font-weight: 600
      margin-bottom: 48px

  .main-more
    position: absolute
    bottom: 87px
    transform: translateY(100%)
    left: 50%
    cursor: pointer
    i
      font-size: 45px
      color: #fff

.description
  background: #FCF1DB
  padding-top: 120px
  padding-bottom: 120px
  .description_text
    h2
      color: #FFFFFF
      font-size: 20px
      text-align: center
      margin-bottom: 38px
    p
      color: #E2E2E2
      font-family: Montserrat
      font-size: 18px
      font-style: normal
      font-weight: 500
      line-height: 22px
      text-align: center

  .description_layout
    background: linear-gradient(81.38deg, #552732 32.56%, #C1635C 116.69%);
    border-radius: 4px
    border: 3px solid #F9E7C1
    box-shadow: 8px 8px 14px -2px #D6BBA7
    margin: 0 auto
    max-width: 1028px
    padding: 97px 90px 87px

.graduation__block
  padding: 120px 100px

  .content
    margin: 0 auto

    .headers
      margin: 0 auto
      max-width: 710px
      margin-bottom: 80px

      h2
        text-align: center
        font-size: 40px

      p
        padding: 0 50px
        font-family: Montserrat;
        font-style: normal
        font-weight: 500
        text-align: center

  &.offers
    // background: url('../../img/graduation/offers_bg.png') center no-repeat
    background: url('../../img/graduation/offers_2x.jpg') center no-repeat
    background-size: cover

    .packets
      margin: 0 auto

    .packet
      &:nth-child(2)
        margin-top: 70px
      &:nth-child(3)
        margin-top: 140px

    .graduation__packet
      padding: 40px 60px
      background: #fff
      max-width: 392px
      box-shadow: 8px 8px 14px #EBC8AE
      border-radius: 2px


      .graduation-btn
        padding: 26px 70px
        margin: 0 auto
        background: url('../../img/graduation/btn_bg_packet.png') center no-repeat

      .text
        width: 263.01px
        height: 248.68px
        background: url('../../img/graduation/offer-packet/text_bg.png') center no-repeat
        padding: 89px 0 80px 0

        h3
          text-align: center
          font-family: 'Shadow'
          font-size: 40px
          color: #444444

        p
          font-family: 'Roboto'
          font-weight: 500
          font-size: 24px
          color: #323232
          text-align: center

          span
            &:last-child
              font-size: 16px

      .packet_description
        margin-bottom: 40px

        ul
          list-style: none
          list-style-image: url('../../img/graduation/list_before.png')

          li
            padding-left: 30px
            font-family: Montserrat
            font-style: normal
            font-weight: 600
            font-size: 18px
            margin-bottom: 14px

  &.why

    .content

      h2
        color: #4A4A4A

      .icons

        .icon
          width: 259px
          
          .img-icon
            height: 164px
          img
            display: block
            margin: 0 auto
            height: 100%

          h4
            font-family: Shadow
            font-size: 16px
            text-align: center
            margin-top: 40px
            margin-bottom: 16px

          p
            font-family: Montserrat
            font-size: 14px
            text-align: center

  &.callback
    // background: url('../../img/graduation/callback_bg.png')
    background: url('../../img/graduation/callback_2x.jpg')
    background-size: 100%
    background-position: left bottom
    position: relative
    height: 100vh

    .content

      .graduation-btn
        min-width: 300px

      form

        label
          display: block
          width: 400px
          margin: 0 auto 20px auto
          padding: 14px
          background: #fff
          border-radius: 5px

          input
            width: 100%
            border: 0px transparent
            outline: none

        button
          margin: 40px auto 0 auto

      .copyright
        position: absolute
        bottom: 40px
        left: 50%
        transform: translateX(-50%)

        text-align: center
        font-family: Montserrat
        font-size: 14px

        color: #FFFFFF;

.top__menu
  position: fixed
  height: 96px
  top: 0
  left: 0
  right: 0
  z-index: 1

  .layer
    position: absolute
    top: 0
    left: 0
    bottom: 0
    right: 0
    background: rgba(0, 0, 0, 0.55)
    z-index: 1

  .content
    position: absolute
    top: 0
    left: 0
    bottom: 0
    right: 0
    z-index: 2
    color: #fff
    padding: 36px 105px
    display: flex
    justify-content: space-between
    align-self: center

    a
      font-family: Shadow
      font-size: 24px
      cursor: pointer
      color: #fff
      outline: none
      &:hover
        // text-decoration: none

    span
      &:last-child
        font-family: Montserrat
        font-weight: 600
        font-size: 14px
        margin-left: 10px