#hero { background: url('/modules/nxtt-utility/images/background.jpg?v=3') no-repeat; background-size: 68%; background-position: center 90%; xbackground-attachment: fixed; text-align: left; padding: 140px 0 0px; overflow: hidden; }
#hero h1 { font-size: 58px; font-weight: bold; margin-bottom: 100px; }
#hero .title { text-align: center; }
#hero p { padding: 30px 0; max-width: 700px; margin: auto; text-align: center; }
#hero .nxtt-wrapper { display: flex; align-items: center; justify-content: center; text-align: left; padding: 60px 0; }
#hero .nxtt-wrapper > div:nth-child(1) { padding-right: 60px; }
#hero .nxtt-wrapper p { text-align: left; }
#main .card-wrapper { display: flex; align-items: center; justify-content: flex-start; padding: 100px 40px 0px; }
#main .card { width: 35%; padding: 24px; border-radius: 12px; background: var(--background-card-01, rgba(169, 158, 189, 0.11)); box-shadow: 0px 10px 24px 0px rgba(0, 0, 0, 0.10); backdrop-filter: blur(30px); text-align: left; }
#main .card:nth-child(2) { margin: 0 0 0 auto; }
#main h2 { text-align: center; }
#main h5 { color: #897f8d; text-align: center; margin: 40px 0;  }
#main h5 span { color: #46d6ae; }
#business { text-align: center; }
#business .card-wrapper { padding: 40px 0; display: flex; flex-flow: column wrap; align-content: space-between; height: 1900px; margin: auto; background: url('/modules/nxtt-utility/images/background_business.jpg') no-repeat; background-size: contain; background-position: center center; }
#business .card-wrapper::before, #business .card-wrapper::after { content: ""; flex-basis: 100%; width: 0; order: 2; }
#business .card:nth-child(3n+1) { order: 1; } 
#business .card:nth-child(3n+2) { order: 2; } 
#business .card:nth-child(3n) { order: 3; }
#business .card { width: 32%; padding: 24px; border-radius: 12px; background: var(--background-card-01, rgba(169, 158, 189, 0.11)); box-shadow: 0px 10px 24px 0px rgba(0, 0, 0, 0.10); backdrop-filter: blur(30px); text-align: left; margin-bottom: 20px; }
#business .card .foot { display: flex; align-items: center; justify-content: flex-start; padding-top: 30px; }
#business .card .foot img { margin-right: 10px; }
#business .card .head { color: #534e5c; }

@media (max-width: 1440px) {
#hero { padding: 130px 0 40px; background-position: center -28%; background-size: 75%; }
#hero h1 { font-size: 36px; margin-bottom: 80px; }
#hero .nxtt-wrapper { padding: 40px 0; }
#main .card-wrapper { display: flex; align-items: center; justify-content: flex-start; padding: 50px 20px 0px; }
#business .card-wrapper { height: 2260px; }
#business .card:nth-child(3n+1) { order: initial; } 
#business .card:nth-child(3n+2) { order: initial; } 
#business .card:nth-child(3n) { order: initial; }
#business .card:nth-child(2n+1) { order: 1; } 
#business .card:nth-child(2n+2) { order: 2; } 
}

@media (max-width: 1280px) {
#business .card { width: 48%; }
#business .card-wrapper { height: 2860px; }
}

@media (max-width: 1024px) {
#hero { padding: 40px 0 20px; background-position: center -30px; background-size: 120%; }
#hero h1 { margin-bottom: 40px; }
#hero p { padding: 20px 0; }
#hero .contents { padding: 20px 0; max-width: 100%; margin: auto; }
#hero .nxtt-wrapper { padding: 20px 0 0; }
#hero .nxtt-wrapper > div:nth-child(1) { padding: 0; }
#main .card-wrapper { display: block; padding: 20px 0 0; }
#main .card { width: 100%; margin: auto; padding: 10px 0; }
#hero .nxtt-wrapper { flex-wrap: wrap; }
#business .card { width: 100%; padding: 10px 0; }
#business .card .foot { padding-top: 20px; font-size: 14px; }
#business .card .foot img { width: 14px; }
#business .card:nth-child(2n+1) { order: initial; } 
#business .card:nth-child(2n+2) { order: initial; } 
#business .card-wrapper { flex-wrap: wrap; height: initial; }
#business .card-wrapper::before, #business .card-wrapper::after { all: initial; }
}