@use "../utils" as *; /*============================= 08. Choose ===============================*/ .choose { &-area { background: #171a7c; padding: 120px 0; position: relative; z-index: 1; overflow: hidden; @media #{$xs} { padding: 100px 0; } } &__area { &-two { position: relative; overflow: hidden; margin: 30px 0 0; padding: 60px 0 0; z-index: 1; @media #{$xs} { padding: 0; margin: 0; } } &-three { position: relative; overflow: hidden; padding: 120px 0; z-index: 1; @media #{$xs} { padding: 100px 0; } } &-four { background: #171a7c; padding: 120px 0; position: relative; z-index: 1; @media #{$xs} { padding: 100px 0; } } &-five { padding: 0 0 120px; position: relative; z-index: 1; @media #{$xs} { padding: 0 0 100px; } } } &__bg { background-size: cover; background-position: center; position: absolute; left: 0; top: 0; width: 46%; height: 90%; z-index: -2; @media #{$lg} { width: 55%; } } &-content { & > p { margin-bottom: 30px; color: var(--tg-color-gray-3); width: 85%; @media #{$lg} { width: 100%; } } } &__content { &-two { position: relative; padding: 100px 100px 120px 80px; @media #{$lg} { padding: 60px 0 80px 40px; } @media #{$xs} { padding: 50px 0; } &::before { content: ""; position: absolute; left: -24px; top: 0; width: 200%; height: 100%; background: var(--tg-color-gray-3); z-index: -2; @media #{$lg} { left: 0; } @media #{$xs} { left: -50%; } } & > p { margin-bottom: 35px; } } &-three { & > p { margin-bottom: 30px; } } &-four { width: 90%; @media #{$lg} { width: 100%; } @media #{$md} { margin-bottom: 50px; } & > p { margin-bottom: 0; color: var(--tg-color-gray-3); } } &-five { position: relative; padding-right: 50px; @media #{$lg} { padding-right: 0; } & > p { margin-bottom: 35px; } & .shape { & img { position: absolute; z-index: -1; right: -20px; top: 0; } } } } &-list { & .list-wrap { & li { @include flexbox(); align-items: center; gap: 18px; margin-bottom: 35px; &:last-child { margin-bottom: 0; } & .icon { font-size: 60px; line-height: 0; color: var(--tg-theme-primary); @include transition(0.3s); } & .content { & .title { color: var(--tg-color-white-default); margin-bottom: 5px; font-weight: 600; font-size: 22px; } & p { color: var(--tg-color-gray-3); margin-bottom: 0; width: 65%; @media #{$xs} { width: 100%; } } } &:hover { & .icon { @include transform(rotateY(180deg)); } } } } } &__list { & .list-wrap { & li { margin-bottom: 30px; &:last-child { margin-bottom: 0; } } } &-box { @include flexbox(); align-items: flex-start; gap: 20px; &:hover { & .choose__list-icon { & i { @include transform(rotateY(180deg)); } } } &-two { @include flexbox(); align-items: flex-start; gap: 20px; @media #{$lg} { flex-wrap: wrap; } @media #{$md} { flex-wrap: nowrap; } &:hover { & .choose__list-icon-two { @include transform(translateY(5px) rotateY(180deg)); } } } } &-icon { width: 80px; height: 80px; @include flexbox(); align-items: center; justify-content: center; background: var(--tg-color-yellow-light); @include border-radius(10px); font-size: 50px; color: var(--tg-theme-primary); flex: 0 0 auto; line-height: 0; &-two { font-size: 60px; line-height: 0; color: var(--tg-theme-primary); @include transform(translateY(5px) rotateY(0deg)); @include transition(0.4s); } & i { @include transform(rotateY(0deg)); @include transition(0.4s); } } &-content { & .title { margin-bottom: 8px; font-size: 24px; font-weight: 600; } & p { margin-bottom: 0; & br { @media #{$xs} { display: none; } } } &-two { & .title { color: var(--tg-color-white-default); margin-bottom: 5px; font-size: 22px; } & p { margin-bottom: 0; color: var(--tg-color-gray-3); } } } &-two { & .list-wrap { @include flexbox(); align-items: center; flex-wrap: wrap; margin: 0 -10px; gap: 40px 0; & li { width: 50%; padding: 0 10px; @media #{$xs} { width: 100%; } } } } } &-img-wrap { position: relative; padding-bottom: 45px; @media #{$md} { text-align: center; margin-bottom: 50px; } @media #{$xs} { margin: 0; } & img { &:nth-child(1) { @include border-radius(10px); @media #{$xs} { width: 100%; } } &:nth-child(2) { @include border-radius(10px); box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1); position: absolute; left: -16%; bottom: 0; @media #{$lg} { left: -9%; } @media #{$md} { left: -2%; } @media #{$xs} { display: none; } } &:nth-child(3) { position: absolute; left: 10%; bottom: -45px; z-index: -1; @media #{$lg} { left: 30%; } @media #{$xs} { left: 8%; bottom: -25px; } } } } &__img { &-wrap { &-three { position: relative; text-align: right; @media #{$md} { margin-bottom: 50px; } & .main-img { position: relative; @include border-radius(50%); overflow: hidden; display: inline-block; border: 18px solid var(--tg-color-white-default); @include box-shadow(0px 56px 80px 0px rgba(0, 0, 0, 0.15)); @media #{$lg} { width: 400px; border-width: 10px; } @media #{$xs} { width: 100%; border-width: 5px; } @media #{$sm} { width: 500px; margin: 0 auto; } & img { width: 100%; } & .play-btn { width: 70px; height: 70px; align-items: center; justify-content: center; position: absolute; left: 50%; top: 50%; @include transform(translate(-50%, -50%)); background: var(--tg-theme-secondary); @include flexbox(); @include border-radius(50%); color: var(--tg-color-white-default); font-size: 25px; &:hover { background: var(--tg-theme-primary); } } } & > img { @include border-radius(15px); @include box-shadow(0px 0px 30px 0px rgba(0, 0, 0, 0.1)); border: 1px solid #dadada; position: absolute; left: 9%; top: 30%; @media #{$lg} { left: 0; } @media #{$xs} { display: none; } } & .shape { & img { position: absolute; left: 3%; bottom: 18%; z-index: -1; @media #{$lg} { display: none; } } } } &-five { position: relative; padding-bottom: 55px; @media #{$md} { margin-bottom: 50px; } @media #{$xs} { text-align: center; } & img { &:nth-child(1) { @include border-radius(10px); } &:nth-child(2) { @include border-radius(20px); border: 6px solid var(--tg-color-white-default); position: absolute; right: 10%; bottom: 0; @media #{$lg} { right: 0; } @media #{$xs} { display: none; } @media #{$sm} { display: block; } } &:nth-child(3) { @include border-radius(10px); @include box-shadow(0px 0px 30px 0px rgba(0, 0, 0, 0.1)); position: absolute; left: 17%; bottom: 8%; } &:nth-child(4) { position: absolute; left: 13%; bottom: -4%; z-index: -1; } } } } } &__tab { & .nav-tabs { border-bottom: 1px solid #cee2ea; gap: 30px; margin-bottom: 30px; & .nav-item { & .nav-link { padding: 0 0 13px; background: transparent; color: #9597c8; border: none; font-size: 22px; font-weight: 600; line-height: 1; font-family: var(--tg-heading-font-family); text-transform: capitalize; position: relative; @media #{$xs} { font-size: 18px; } &::before { content: ""; position: absolute; left: 50%; @include transform(translateX(-50%)); bottom: -1px; width: 50%; height: 3px; background: var(--tg-theme-primary); opacity: 0; @include transition(0.3s); } &.active { color: var(--tg-heading-color); &::before { opacity: 1; } } } } } &-content { & p { margin-bottom: 30px; } & .list-wrap { @include flexbox(); align-items: center; flex-wrap: wrap; gap: 20px 0; & li { @include flexbox(); align-items: flex-start; font-weight: 600; text-transform: capitalize; gap: 10px; width: 50%; @media #{$xs} { width: 100%; } & i { width: 26px; height: 26px; @include flexbox(); align-items: center; justify-content: center; background: var(--tg-heading-color); border-radius: 50%; color: var(--tg-color-white-default); flex: 0 0 auto; font-size: 14px; } } } } } &__box { position: relative; @media #{$xs} { margin-bottom: 30px; } @media #{$sm} { margin-bottom: 0; } & .icon { width: 80px; height: 80px; @include flexbox(); align-items: center; justify-content: center; background: var(--tg-color-yellow-light); @include border-radius(10px); font-size: 40px; color: var(--tg-theme-primary); line-height: 0; margin-bottom: 15px; & i { @include transform(rotate(0)); @include transition(0.4s); } } & .content { & .title { font-size: 22px; margin-bottom: 12px; } & p { margin-bottom: 0; } } &::before { content: ""; position: absolute; right: 0; top: 50%; @include transform(translateY(-50%)); width: 1px; height: 100%; background: var(--tg-border-4); @media #{$lg} { right: -15px; } @media #{$md} { right: 0; } @media #{$xs} { display: none; } } &:hover { & .icon { & i { @include transform(rotateY(180deg)); } } } &-wrap { & .row { & [class*="col-"] { &:last-child { & .choose__box { margin-bottom: 0; &::before { display: none; } } } } } } } &-shape-wrap { & img { position: absolute; z-index: -1; &:nth-child(1) { left: 0; bottom: 0; @media #{$lg} { width: 300px; } @media #{$xs} { width: 230px; } } &:nth-child(2) { right: 0; top: 0; @media #{$lg} { width: 400px; } } } } &__shape-wrap { &-two { & img { position: absolute; z-index: -1; &:nth-child(1) { right: 13%; bottom: 30%; @media #{$md} { display: none; } } &:nth-child(2) { right: 0; bottom: 0; z-index: -2; } } } &-three { & img { position: absolute; z-index: -1; &:nth-child(1) { right: 14%; top: 25%; @media #{$xs} { right: 26%; top: 13%; } } &:nth-child(2) { right: 0; top: 16%; z-index: -2; @media #{$lg} { display: none; } } } } &-four { & img { position: absolute; z-index: -1; &:nth-child(1) { left: 0; bottom: 0; } &:nth-child(2) { right: 0; top: 0; } } } } } .operating { &__box { @include flexbox(); align-items: center; background: var(--tg-theme-secondary); width: 370px; padding: 35px 35px; gap: 14px; position: absolute; left: -394px; bottom: 0; @media #{$lg} { left: -330px; width: 330px; padding: 35px 18px; } @media #{$md} { display: none; } & .icon { font-size: 53px; line-height: 0; color: var(--tg-color-white-default); } & .content { & p { margin-bottom: 0; color: var(--tg-color-white-default); font-size: 24px; font-weight: 600; text-transform: capitalize; font-family: var(--tg-heading-font-family); line-height: 1.2; } } } } .choose__box:hover { .icon { svg { @include transform(rotateY(180deg)); @include transition(0.3s); } } }