#hero { background: url('/modules/platform/images/background_hero.jpg') no-repeat; background-size: cover; background-attachment: fixed; text-align: left; padding: 80px 0; }
#hero .container { background: url('/modules/join/images/Group185.png') no-repeat; background-position: center 20%; }
#hero .contents { display: flex; align-items: stretch; justify-content: flex-start; padding: 80px 0; }
#hero .contents .right { margin: 0 0 0 auto; }
#hero .box { border-radius: 25px; border: 0px solid rgba(255, 255, 255, 0.29); background: rgba(73, 50, 118, 0.05); box-shadow: 0px 2px 20px 0px rgba(162, 212, 196, 0.30) inset; padding: 30px; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; backdrop-filter: blur(20px); }
#hero .socials { width: 100%; }
#hero .box .btn { margin: 40px auto 0; }
#hero .contents > .box { max-width: 520px; }
#hero .contents .right > .box { max-width: 520px; }
#hero .contents .right > .box:nth-child(1) { margin-bottom: 40px; }
#hero .contents h2 { font-size: 36px; }
#tier { text-align: center; padding: 80px 0; }
#tier p { max-width: 80%; margin: 40px auto 0; }
#units { background: url('/modules/join/images/background_units.jpg') no-repeat; background-size: cover; padding: 0px 0 140px; text-align: center; background-position: center top; }
#units .tier-carousel { margin: 20px 0 100px; }
#units .tier-carousel .card { padding: 32px; border-radius: 16px; border: 1px solid #2A006F; background: rgba(36, 0, 81, 0.30); box-shadow: 0px 4px 24px 0px #140034; backdrop-filter: blur(40px); margin-bottom: 40px; }
#units .tier-carousel .card h4 { font-size: 36px; font-weight: 700; border-bottom: 1px solid #2A006F; margin-bottom: 40px; }
#units .tier-carousel .card div { font-size: 36px; line-height: 70px; font-weight: 700; }
#units .tier-carousel .card span { font-size: 23px; line-height: 26px; display: block; }
#units .tier-carousel .card b { font-size: 26px; line-height: 26px; display: block; font-weight: 500; }
#units p { max-width: 80%; margin: 40px auto 0; }

@media (max-width: 1440px) {
#hero { padding: 60px 0; }
#hero .contents { padding: 60px 0; }
#units { padding: 0px 0 100px; }
#units .tier-carousel { margin: 20px 0 80px; }
#units .tier-carousel .card h4 { font-size: 33px; }
#units .tier-carousel .card span { font-size: 21px; }
#units .tier-carousel .card b { font-size: 24px; }
}

@media (max-width: 1024px) {
#hero { padding: 20px 0; }
#hero .contents { padding: 20px 0 0; flex-wrap: wrap; }
#hero .contents > .box, #hero .contents .right > .box { width: 100%; margin: 20px auto; }
#hero .contents .right { margin: auto; }
#units { padding: 0px 0 40px; }
#units .tier-carousel { margin: 20px 0 0px; }
#units p { max-width: 80%; margin: 20px auto 0; }
}