@import '../fonts'

$title-color: #732B3C
$text-color: #5A5A5A
$btn-color: #00C981

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

body
  font-family: 'Montserrat'

.graduation-btn
  padding: 35px 65px
  background: $btn-color
  outline: none
  border: none
  font-family: 'Shadow Regular'
  color: #fff
  font-size: 18px

main
  background: center url('../../img/graduation/main_bg.png')
  background-size: contain
  // 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