/* BACKGROUND VIDEO OF HOME PAGE */
.bg-video {position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}
 
/* HOME BANNER */
.home-banner { max-width: 1588px; height: 635px; padding-inline: 12px; margin-inline: auto; position: relative;}
.home-banner::after {width: 100%; height: 12px; background-color: #ffffff9c; position: absolute; inset: 0; margin-block: auto 20px; margin-inline: auto; content: ""; border-radius: 20px 0 20px 0;}
.home-banner .banner-logo {width: 100%; max-width: 570px; height: 266px; position: absolute; bottom: 0; right: 50%; transform: translateX(50%);}
.home-banner .banner-logo span {font-size: 40px; color: #fff; position: absolute; bottom: 24px; right: 88px;}
 
.management {position: relative;}
.management .carousel-item {position: relative; height: 579px;}
.management .carousel-item > img {width: 100%; height: 100%; object-fit: cover;}
.management .management-text {position: absolute; top: 50%; left: 50%; transform: translateX(-50%);}
.management .management-text > :first-child {font-size: 50px; text-align: center; color: #fff; margin-bottom: 36px;}
.management .management-text > :nth-child(2) {display: block; width: fit-content; text-align: center; font-size: 25px; font-weight: 600; color: var(--_c-management-txt);  background-color: var(--_c-management-bg); margin-inline: auto; margin-bottom: 34px;}
.management .management-text a {font-size: 15px; color: #fff; padding: 7px 26px; border: 2px solid #fff; margin-inline: auto; transition: var(--trans-4);}
.management .management-text a:hover {background-color: #ffffff62;}
.management .carousel-indicators button {width: 6px; height: 6px; border-radius: 50%; background-color: var(--_c-dots); opacity: 1;}
.management .carousel-indicators button.active {background-color: #ffffff4d;}
.management :where(.carousel-control-next, .carousel-control-prev) {opacity: 1;}
.management :where(.carousel-control-next, .carousel-control-prev):hover {opacity: 0.6;}
.management :where(.carousel-control-next-icon, .carousel-control-prev-icon) {width: 3rem; height: 3rem; filter: var(--_c-arrows-filter);}
 
.submit {height: 555px; display: flex; align-items: end; justify-content: center; padding-bottom: 70px;}
.submit .wrapper {gap: 180px;}
.submit .submit-box {width: 100%; max-width: 335px; flex: none; background-color: var(--_c-submit-bg); padding-block: 20px; border-radius: 300px;}
.submit .submit-box > :first-child {display: block; font-size: 24px; line-height: 24px; font-weight: 500; background-color: #fff; color: var(--c-text); margin-bottom: 25px;}
.submit .submit-content {width: 100%; max-width: 275px; padding-left: 31px;}
.submit .submit-box p {display: inline-block; font-size: 15px; line-height: 15px; color: #fff;}
.submit .submit-box a {display: flex; align-items: center; justify-content: center; height: 34px; color: #fff; background-color: var(--_c-submit-anchor); text-transform: uppercase; padding-inline: 12px; transition: var(--trans-4);}
.submit .submit-box a:hover {background-color: var(--_c-submit-a-hover);}
.submit .submit-box p a {display: inline-flex; float: right; margin-right: 10px; margin-top: 5px;}
.submit .wrapper > :nth-child(2) .submit-content {padding-left: 0; margin-inline: auto;}
.submit .wrapper > :nth-child(2) p {text-align: center;}
.submit .wrapper > :nth-child(2) .submit-content span {display: block; text-align: center; color: #fff; line-height: 1;}
.submit .wrapper > :nth-child(2) a {margin-inline: auto; margin-top: 10px;}
 
.process {background-color: var(--_c-process-bg); padding-block: 38px 60px;}
.process .container > :first-child {font-size: 33px; font-weight: 600; background-color: #fff; color: var(--_c-process-heading); text-transform: uppercase; text-align: center; padding-block: 30px; margin-bottom: 50px;}
.process .process-wrapper {max-width: 988px; display: grid; grid-template-columns: repeat(3, 1fr); margin-inline: auto;}
.process .process-wrapper > :first-child {margin-right: auto;}
.process .process-wrapper > :last-child {margin-left: auto;}
.process .process-box {display: flex; flex-direction: column; align-items: center; position: relative;}
.process .process-box::after {width: 180px; height: 1px; background-color: var(--c-secondary); position: absolute; top: 15%; right: -118px; content: "";}
.process .process-wrapper > :last-child::after {content: unset;}
.process .process-img img {position: relative; z-index: 1;}
.process .process-img::after {width: 216px; height: 163px; background-color: #fff; border: 5px solid var(--c-secondary); position: absolute; top: -23px; left: -29px; content: "";}
.process .row > :nth-child(2) .process-img::after {border-color: var(--_c-process-br);}
.process .row > :nth-child(3) .process-img::after {border-color: var(--c-footer-text);}
.process .process-box > :nth-child(2) {font-size: 18px; font-weight: 700; text-transform: uppercase; text-align: center; color: var(--c-text); margin-block: 42px 18px;}
.process .process-box p {width: 100%; max-width: 247px; font-size: 15px; font-weight: 600; text-align: center; line-height: 1.2; color: #000;}
 
.home-about { height: 630px; background: no-repeat center / cover url("../images/about-bg.webp");}
.home-about .container {height: 100%; display: flex; align-items: center; justify-content: center;}
.home-about .container > :first-child {font-size: 90px; color: var(--_c-home-about);}
.home-about .container a {font-size: 15px; color: #fff; padding: 7px 26px; border: 2px solid #fff; margin-inline: auto; transition: var(--trans-4); position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%);}
.home-about .container a:hover {background-color: #ffffff62;}
 
.success {position: relative;}
.success .carousel-item {height: 689px; position: relative;}
.success .carousel-item > img {width: 100%; height: 100%; object-fit: cover;}
.success .carousel-item > :nth-child(2) {font-size: 90px; text-align: center; color: #fff; margin-bottom: 36px; position: absolute; top: 113px; left: 50%; transform: translateX(-50%);}
.success .carousel-item a {font-size: 15px; color: #fff; padding: 7px 26px; border: 2px solid #fff; margin-inline: auto; transition: var(--trans-4); position: absolute; bottom: 137px; left: 50%; transform: translateX(-50%);}
.success .carousel-item a:hover {background-color: #ffffff62;}
.success .carousel-indicators button {width: 6px; height: 6px; border-radius: 50%; background-color: var(--_c-dots); opacity: 1;}
.success .carousel-indicators button.active {background-color: #ffffff4d;}
.success :where(.carousel-control-next, .carousel-control-prev) {opacity: 1;}
.success :where(.carousel-control-next, .carousel-control-prev):hover {opacity: 0.6;}
.success :where(.carousel-control-next-icon, .carousel-control-prev-icon) {width: 3rem; height: 3rem; filter: var(--_c-arrows-filter);}
 
.home-partnership {width: 100%; height: 594px; display: flex; align-items: center; justify-content: center; position: relative; overflow: clip;}
.home-partnership .image-overlay {width: 100%; height: 594px; position: absolute; top: 0; left: 0;}
.home-partnership .image-overlay img {width: 100%; height: 100%; object-fit: cover;}
.home-partnership .partnership-text {position: relative; z-index: 2;}
.home-partnership .partnership-text > :first-child {font-size: 90px; color: #fff;}
.home-partnership a {font-size: 15px; color: #fff; padding: 7px 26px; border: 2px solid #fff; margin-inline: auto; transition: var(--trans-4); margin-top: 120px;}
.home-partnership a:hover {background-color: #ffffff62;}
 
@media only screen and (max-width: 1200px) {
    .home-banner {height: 400px;}
    .management .management-text {top: 50%; transform: translate(-50%, -50%);}
    .management .management-text > :first-child {font-size: 40px; margin-bottom: 16px;}
    .management .management-text > :nth-child(2) {margin-bottom: 16px;}
    .management :where(.carousel-control-next-icon, .carousel-control-prev-icon) {height: 2rem; width: 2rem;}
    .success :where(.carousel-control-next-icon, .carousel-control-prev-icon) {height: 2rem; width: 2rem;}
    .management .carousel-item {height: 450px;}
    .submit {height: 500px;}
    .home-about {height: 500px;}
    .success .carousel-item {height: 550px;}
    .home-partnership {height: 450px;}
}
@media only screen and (max-width: 991px) {
    .home-banner {height: 300px;}
    .management .management-text > :first-child {font-size: 30px;}
    .management .management-text > :nth-child(2) {font-size: 18px;}
    .management .carousel-item {height: 400px;}
    .submit {height: 450px;}
    .submit .wrapper {gap: 60px;}
    .process .process-wrapper {grid-template-columns: repeat(2, 1fr); gap: 40px;}
    .process .process-box::after {content: unset;}
    .process .process-wrapper > :first-child {margin-right: unset;}
    .process .process-wrapper > :last-child {margin-left: unset;}
    .home-about {height: 400px;}
    .success .carousel-item {height: 500px;}
    .success .carousel-item > :nth-child(2) {font-size: 70px;}
    .success .carousel-item a {bottom: 100px;}
    .home-partnership .partnership-text > :first-child {font-size: 60px;}
}
@media only screen and (max-width: 786px) {
    .home-banner {height: 195px;}
    .management .management-text > :first-child {font-size: 24px;}
    .management .management-text > :nth-child(2) {font-size: 16px;}
    .submit {height: auto; padding-block: 50px;}
    .submit .wrapper {flex-direction: column; gap: 30px;}
    .process {padding-block: 35px;}
    .process .container > :first-child {font-size: 28px; padding-block: 20px;}
    .process .process-box > :nth-child(2) {margin-block: 18px 10px;}
    .home-about {height: 370px;}
    .success .carousel-item > :nth-child(2) {font-size: 50px;}
    .home-partnership .image-overlay {height: 450px;}
}
@media only screen and (max-width: 576px) {
    .home-banner .banner-logo {width: 100%; max-width: 420px; height: 220px;}
    .home-banner .banner-logo span {right: 10%;}
    .management .management-text {width: 95%;}
    .submit {padding-block: 30px;}
    .submit .submit-box > :first-child {font-size: 18px; margin-bottom: 10px;}
    .process .process-wrapper {grid-template-columns: 1fr;}
    .home-about .container > :first-child {font-size: 60px;}
    .success .carousel-item {height: 400px;}
    .home-partnership .image-overlay {height: 400px;}
}
@media only screen and (max-width: 475px) {
    
    .home-banner .banner-logo {max-width: 320px; height: 180px;}
    .home-about .container > :first-child {font-size: 50px;}
}