@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;600;700;900&display=swap');
@import url('./Gap.css');
@import url('./Altinn-DIN.css');
@import url('./SweiAxLegCJKtc.css');

:root {
  --light-yellow: #EBDD7E;
  --yellow: #F8B62D;
  --black: #070707;
  --dark: #262626;
  --grey: #DAD9D7;
  --white: #F8F9FA;
  --brown: #8D785A;
  --deep-brown: #3E3528;
}


/* BS5修改預設 */
html,
body {
  overflow-x: hidden;
  margin: 0%;
}


html {
  height: 100%;
}


html,
body {
  font-family: 'Altinn-DIN', 'SweiAxLegCJKtc', 'Arial', 'Noto Sans TC', '黑體-繁', '微軟正黑體', sans-serif;
  line-height: 1.75;
  letter-spacing: 1.5px;
  background-color: var(--dark);
  /* background-blend-mode: multiply; */
  color: var(--white);
  background-repeat: repeat;
  background-image: url(../../img/pattern.png?v=1);
  font-weight: 500;
}


h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  font-family: 'Altinn-DIN', 'SweiAxLegCJKtc', 'Arial', 'Noto Sans TC', '黑體-繁', '微軟正黑體', sans-serif;
  letter-spacing: 2px;
  margin-bottom: 0;
  line-height: 1 !important;
}

.bg-yellow {
  background-color: var(--yellow);
  color: var(--black);
}


.Gap {
  font-family: 'Gap', 'SweiAxLegCJKtc', 'Arial', 'Noto Sans TC', '黑體-繁', '微軟正黑體', sans-serif !important;
  opacity: .7;
}

.uppercase {
  text-transform: uppercase !important;
}

.hideme {
  opacity: 0;
}

/* 文字反白的狀況 */
::-moz-selection {
  /* Code for Firefox */
  color: var(--white);
  background: var(--dark);
}

::selection {
  color: var(--white);
  background: var(--dark);
}

/* 網頁捲軸【寬度】 */
::-webkit-scrollbar {
  width: 10px;
}

/* 網頁捲軸【背景】顏色 */
::-webkit-scrollbar-track {
  background: var(--dark);
}

/* 網頁捲軸【把手】顏色 */
::-webkit-scrollbar-thumb {
  background: var(--brown);
}

/* 網頁捲軸【滑過時】把手的顏色 */
::-webkit-scrollbar-thumb:hover {
  background: var(--brown);
}

/* video iframe start */

.video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
/*百分比為寬高比例之計算
寬/高 
9/16=56.25%
3/4=75%*/
}

.video iframe, .video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* video iframe end */



/* navbar start */
.navbar-nav a.nav-link.active span {
  border-bottom: 3.5px var(--yellow) solid;
}

.navbar-nav .nav-link {
  color: var(--white)
}

.navbar-nav a.nav-link:hover span {
  color: var(--yellow);
}

.navbar-brand,
.navbar-brand:hover {
  font-family: 'Altinn-DIN', 'SweiAxLegCJKtc', 'Arial', 'Noto Sans TC', '黑體-繁', '微軟正黑體', sans-serif;
  color: var(--white);
}

li.nav-item a {
  font-family: 'Altinn-DIN', 'SweiAxLegCJKtc', 'Arial', 'Noto Sans TC', '黑體-繁', '微軟正黑體', sans-serif;
  min-width: 12vw;
  font-weight: 700;
}

/* navbar end */


/* 漢堡選單 start */
.mobile-but .lines,
.mobile-but .lines::after,
.mobile-but .lines::before {
  height: 2px;
  width: 25px;
}

.mobile-but .lines::after,
.mobile-but .lines::before {
  content: ' ';
  display: block;
}

.mobile-but .lines::after,
.mobile-but .lines::before {
  background: var(--yellow);
}

.mobile-but .lines::after {
  transform: translate(0px, 4px) rotate(0deg);
  -webkit-transform: translate(0px, 4px) rotate(0deg);
  -ms-transform: translate(0px, 4px) rotate(0deg);
  -moz-transform: translate(0px, 4px) rotate(0deg);
}

.mobile-but .lines::before {
  transform: translate(0px, -4px) rotate(0deg);
  -webkit-transform: translate(0px, -4px) rotate(0deg);
  -ms-transform: translate(0px, -4px) rotate(0deg);
  -moz-transform: translate(0px, -4px) rotate(0deg);
}

.active .mobile-but .lines::after {
  transform: translate(0px, -1px) rotate(45deg);
  -webkit-transform: translate(0px, -1px) rotate(45deg);
  -ms-transform: translate(0px, -1px) rotate(45deg);
  -moz-transform: translate(0px, -1px) rotate(45deg);
}

.active .mobile-but .lines::before {
  transform: translate(0px, 1px) rotate(-45deg);
  -webkit-transform: translate(0px, 1px) rotate(-45deg);
  -ms-transform: translate(0px, 1px) rotate(-45deg);
  -moz-transform: translate(0px, 1px) rotate(-45deg);
}

/* 漢堡選單 end */


/* header start */
.header-banner {
  position: relative;
}

.header-box {
  position: relative;
}

.header-mask {
  /* height: 100%; */
  width: 100%;
  max-height: 100vh;
  object-fit: cover;
  object-position: center center;
  -webkit-mask: -webkit-image-set(url("../../img/header-mask.svg") 1x, url("../../img/header-mask.svg") 2x) no-repeat center bottom;
  mask: image-set(url("../../img/header-mask.svg") 1x, url("../../img/header-mask.svg") 2x) no-repeat center bottom;
  -webkit-mask-size: cover;
  mask-size: cover;
}

.header-mask2 {
  height: 100%;
  width: 100%;
  max-height: 85vh;
  object-fit: cover;
  object-position: center center;
  -webkit-mask: -webkit-image-set(url("../../img/header-mask2.svg?v=1") 1x, url("../../img/header-mask2.svg?v=1") 2x) no-repeat right bottom;
  mask: image-set(url("../../img/header-mask2.svg?v=1") 1x, url("../../img/header-mask2.svg?v=1") 2x) no-repeat right bottom;
  -webkit-mask-size: cover;
  mask-size: cover;
}

.header-content {
  position: absolute;
  z-index: 10;
  color: var(--white);
  width: 100vw;
  text-align: center;
  height: calc(50% + 5vw);
  left: 0;
  top: calc(50% - 5vw);
}

.header-content2 {
  position: relative;
  z-index: 10;
  text-align: left;
  margin-left: 8vw;
  margin-top: -15%;
}

.header-effect {
  position: absolute;
  z-index: 9;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.header-effect .list {
  height: 100%;
  display: inline-block;
  border-left: 1px solid hsla(0, 0%, 100%, .1);
}

.header-effect .list:nth-child(2),
.header-effect .list:nth-child(3),
.header-effect .list:nth-child(4),
.header-effect .list:nth-child(5) {
  width: 23%;
}

.header-effect .list:nth-child(1) {
  border-left: 0;
  width: 4%;
}

.header-effect .list:nth-child(6) {
  width: 4%;
}

.header-effect .list div {
  width: 100%;
  height: 100%;
  background-color: var(--dark);
  /* background-repeat: repeat;
  background-image: url(../../img/pattern.png); */
  -webkit-animation: list-fade-in 0.8s;
  animation: list-fade-in 0.8s;
  animation-fill-mode: forwards;
}

.header-effect .list:nth-child(2) div {
  animation-delay: 50ms;
}

.header-effect .list:nth-child(3) div {
  animation-delay: 100ms;
}

.header-effect .list:nth-child(4) div {
  animation-delay: 150ms;
}

.header-effect .list:nth-child(5) div {
  animation-delay: 200ms;
}

.header-effect .list:nth-child(6) div {
  animation-delay: 250ms;
}

@-webkit-keyframes list-fade-in {
  0% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }

  100% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}

.header-mask .header-content .next {
  font-family: 'Altinn-DIN', sans-serif;
  color: var(--yellow);
  position: absolute;
  /* width: 100vw; */
  left: 0;
  right: 0;
  bottom: 1vh;
  font-size: 1.5rem;
  -webkit-animation: finger 1.2s infinite;
  animation: finger 1.2s infinite;
  transition-duration: 2s;
}

.next2 {
  font-family: 'Altinn-DIN', sans-serif;
  color: var(--white);
  position: absolute;
  right: 2vw;
  bottom: 1vh;
  font-size: 1.5vw;
  -webkit-animation: finger 1.2s infinite;
  animation: finger 1.2s infinite;
  transition-duration: 2s;
}

.header-content .next:hover span {
  border-bottom: 3.5px var(--yellow) solid;
  cursor: pointer;
}

.next2:hover span {
  border-bottom: 3.5px var(--white) solid;
  cursor: pointer;
}

@-webkit-keyframes finger {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}


.header-title {
  font-family: 'Altinn-DIN', sans-serif;
  margin-bottom: 0px;
  font-size: 5vw;
  line-height: 1;
  letter-spacing: 2.5px;
  color: var(--yellow);
}


.header-subtitle {
  font-family: 'Altinn-DIN', sans-serif;
  margin-bottom: 0px;
  font-size: 5vw;
  line-height: 1;
  letter-spacing: 2.5px;
  color: var(--grey);
}

@media all and (max-width: 1160px) {
  .header-title {
    font-size: 3em;
  }
}

@media all and (max-width: 990px) {
  .header-title {
    font-size: 2.8125em;
  }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .header-title {
    font-size: 1.8125em;
  }

  .header-subtitle {
    font-size: 0.6125em;
  }
}

@media only screen and (max-width: 479px) {
  .header-title {
    font-size: 1.4125em;
  }

  .header-subtitle {
    font-size: 0.6125em;
  }
}

/* header end */


/* footer start */
.footer-mask {
  /* margin-top: -17rem; */
  padding-top: 7rem;
  width: 100%;
  max-height: 100vh;
  background-color: var(--black);
  -webkit-mask-image: url("../../img/footer-mask.svg");
  mask-image: url("../../img/footer-mask.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
}

.footer-mask2 {
  /* margin-top: -17rem; */
  padding-top: 7rem;
  width: 100%;
  max-height: 100vh;
  background-color: var(--yellow);
  -webkit-mask-image: url("../../img/footer-mask2.svg");
  mask-image: url("../../img/footer-mask2.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
}

/* footer end */


/* top buttom start */
#topBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 1vw;
  z-index: 999;
  font-size: 18px;
  border: none;
  outline: none;
  color: var(--yellow);
  background-color: transparent;
  cursor: pointer;
  padding: 3px;
  border-radius: 0px;
  font-weight: 900;
}

#topBtn span {
  writing-mode: vertical-rl;
  text-orientation: sideways;
  transform: rotate(-180deg);

}

#topBtn:hover {
  color: var(--yellow);
  background-color: transparent;
  font-weight: 900;
}

/* top buttom end */



/* section 標題 副標 start */
.section-title {
  letter-spacing: 1rem;
  margin-top: 1.2rem;
}


.section-b-title {
  font-size: 15vw;
  text-align: end;
  letter-spacing: 2px !important;
  margin-bottom: -4vw !important;
  padding-right: 4vw;
  text-transform: uppercase !important;
}

@media (max-width:1400px) {
  .section-b-title {
    font-size: 18vw;
    margin-bottom: -5vw !important;
  }
}

@media (max-width:1200px) {
  .section-b-title {
    font-size: 19vw;
  }
}

@media (max-width: 650px) {
  .section-b-title {
    font-size: 22vw;
    margin-bottom: -6.5vw !important;
  }
}

.section-subtitle {
  letter-spacing: 1.8px;
  font-size: 2rem;
  padding-right: 1rem;
}


.section-b-pic {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 4px solid var(--yellow);
  /* margin: auto; */
}

.section-b-pic img {
  position: relative;
  z-index: 2;
  transform: scale(1, 1);
  transition: all 1s ease-out;
  object-fit: cover;
  object-position: center center;
  width: 100%;
}


.section-pic {
  width: 100%;
  max-width: 500px;
  max-height: 350px;
  overflow: hidden;
  /* margin: auto; */
}

.section-pic img {
  position: relative;
  z-index: 2;
  transform: scale(1, 1);
  transition: all 1s ease-out;
  object-fit: cover;
  object-position: center center;
  width: 100%;
}

.section-pic.left::after {
  width: 100%;
  max-width: 500px;
  height: 50%;
  position: absolute;
  bottom: -8px;
  left: 5px;
  content: '';
  background-color: var(--grey);
  z-index: 1;
}

.section-pic.right::after {
  width: 100%;
  max-width: 500px;
  height: 50%;
  position: absolute;
  bottom: -8px;
  left: -5px;
  content: '';
  background-color: var(--grey);
  z-index: 1;
}

.section-pic img:hover {
  transform: scale(1.2, 1.2);
  object-fit: cover;
  object-position: center center;
}

.section-pic-text {
  position: relative;
  z-index: 3;
  background-color: var(--yellow);
  color: var(--black);
  padding: 0.8rem 1rem;
  margin-top: -10px;
  display: inline-block;
}

.section-pic-text p {
  line-height: 1;
  margin-bottom: 0;
}

/* section 標題 副標 end */


/* home about start */
.home-about {
  /* background-color: var(--brown); */
  padding-top: 5rem;
  padding-bottom: 8rem;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 7rem));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 7rem));
}

.home-about .container-fluid {
  max-width: 610px;
}

.home-about .section-title {
  color: var(--yellow);
  font-size: 3.5rem !important;
  line-height: 1;
  letter-spacing: 5px;
  font-weight: 900;
}

.home-about .section-subtitle {
  color: var(--white);
  font-size: 1rem;
  font-weight: 500;
}

hr {
  color: var(--white) !important;
  height: 2px !important;
}

.animate__line-width {
  -webkit-animation: line-width 0.8s;
  animation: line-width 0.8s;
  animation-fill-mode: forwards;
}

@keyframes line-width {
  0% {
    opacity: 0;
    width: 0;
  }

  to {
    opacity: 1;
    width: 100%;
  }
}

.animate__fadeInRight-title {
  -webkit-animation-name: fadeInRight-title;
  animation-name: fadeInRight-title;
}

@keyframes fadeInRight-title {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(30%, 0, 0);
    transform: translate3d(30%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.animate__fadeInLeft-title {
  -webkit-animation-name: fadeInLeft-title;
  animation-name: fadeInLeft-title;
}

@keyframes fadeInLeft-title {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-20%, 0, 0);
    transform: translate3d(-20%, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

/* home about end */


/* home consulting start */
.home-consulting {
  position: absolute;
  top: -1.8rem;
  right: -2rem;
  z-index: 1;
}

.home-consulting img {
  width: 60vw;
  max-width: 300px;
  object-fit: cover;
  object-position: center center;
}

.home-consulting .box {
  background-color: rgba(39, 38, 38, .3);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: var(--white);
}

.animate__fadeInTopLeft-flutterY {
  animation: fadeInTopLeft 1.5s, flutterY 15s infinite;
  -webkit-animation: fadeInTopLeft 1.5s, flutterY 15s infinite;
  animation-fill-mode: backwards, forwards;
  animation-delay: 0s, 1.5s;
}

@keyframes fadeInTopLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -3rem, 0);
    transform: translate3d(-100%, -3rem, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes flutterY {

  0%,
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0)
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0)
  }
}

/* home consulting end */


/* home strength start */
.home-strength {
  background-image: url('../../img/strength.jpg');
  background-color: rgba(38, 38, 38, .7);
  background-blend-mode: multiply;
  background-position: center center;
  /* background-attachment: fixed !important; */
  background-repeat: no-repeat;
  background-size: cover !important;
  height: 600px;
  position: relative;
  margin-top: -7rem;
  padding-top: 8rem;
  padding-bottom: 8rem;
  -webkit-clip-path: polygon(0 0, 100% 7rem, 100% 95%, 80% 100%, 0 70%);
  clip-path: polygon(0 0, 100% 7rem, 100% 95%, 80% 100%, 0 70%);
}

@media(max-width: 540px) {
  .home-strength {
    background-attachment: unset;
    height: 500px;
  }
}

/* home strength end */


/* home strength more start */
.home-strength-more {
  position: relative;
  z-index: 2;
  padding-bottom: 7rem;
}

.home-strength-more .row {
  margin-top: -10rem;
}

.home-strength-more .animate__fadeInRight {
  margin-top: 11rem;
}

.home-strength-more .animate__fadeInUp {
  margin-top: -5rem;
}

@media(max-width: 1199px) {
  .home-strength-more .animate__fadeInRight {
    margin-top: 4rem;
  }

  .home-strength-more .animate__fadeInUp {
    margin-top: 4rem;
  }
}

@media(max-width: 768px) {
  .home-strength-more .row {
    margin-top: 3rem;
  }
}

/* home strength more end */


/* home-free-weight start */
.home-free-weight {
  background-image: url('../../img/free-weight.jpg');
  background-color: rgba(38, 38, 38, .7);
  background-blend-mode: multiply;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  height: 600px;
  position: relative;
  margin-top: -7rem;
  padding-top: 8rem;
  padding-bottom: 8rem;
  -webkit-clip-path: polygon(0 7rem, 100% 0, 100% 70%, 20% 100%, 0 95%);
  clip-path: polygon(0 7rem, 100% 0, 100% 70%, 20% 100%, 0 95%);
}

@media(max-width: 540px) {
  .home-free-weight {
    background-attachment: unset;
    height: 500px;
  }
}

.home-room-a {
  position: absolute;
  bottom: 2rem;
  right: -1rem;
  z-index: 1;
}

@media(max-width: 820px) {
  .home-room-a {
    bottom: -2rem;
  }
}

@media(max-width: 540px) {
  .home-room-a {
    bottom: -7rem;
  }
}


.home-room-a .box {
  background-color: rgba(39, 38, 38, .3);
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  color: var(--white);
}

.animate__fadeInDown-flutterY {
  animation: fadeInDown 1.5s, flutterY 15s infinite;
  -webkit-animation: fadeInDown 1.5s, flutterY 15s infinite;
  animation-fill-mode: backwards, forwards;
  animation-delay: 0s, 1.5s;
}

/* home-free-weight end */


/* home-zone-end start */
.home-zone-end {
  margin-top: 2rem;
  position: relative;
}


.home-cardio .container-fluid {
  max-width: 1800px;
}

.home-room-b {
  position: relative;
  top: 0rem;
  left: 0rem;
  z-index: 3;
  max-width: 320px;
  max-height: 320px
}

.home-shower {
  position: relative;
  top: -1vw;
  left: 20vw;
  z-index: 4;
  max-width: 450px;
  max-height: 450px
}

.home-room-b .box,
.home-shower .box {
  background-color: rgba(39, 38, 38, .5);
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  color: var(--white);
}

.home-cardio {
  max-width: 700px;
  margin-top: 6rem;
}

.home-cardio-text {
  top: 0;
  z-index: 2;
  background-color: rgba(38, 38, 38, .5);
  background-blend-mode: multiply;
  border: 4px solid var(--yellow);
}

@media (max-width: 1200px) {
  .home-cardio {
    max-width: 550px;
  }

  .home-shower {
    top: -5rem;
    left: -7rem;
  }
}

@media (max-width: 991.9px) {
  .home-cardio {
    margin-top: 4rem;
  }

  .home-shower {
    top: -9rem;
    left: 5vw;
  }
}

@media (max-width: 860px) {
  .home-shower {
    left: -8vw;
  }
}

@media (max-width: 735px) {
  .home-shower {
    left: -22vw;
  }
}

@media (max-width: 650px) {
  .home-shower {
    top: -5rem;
  }
}


@media (max-width:540px) {
  .home-zone-end {
    margin-top: 8rem;
  }

  .home-room-b {
    left: -3rem;
  }

  .home-cardio {
    margin-top: 3.5rem;
  }

  .home-shower {
    top: 0rem;
  }
}

.deco-line-top {
  position: absolute;
  top: -2vw;
  left: -6vw;
  z-index: 2;
  width: 110%;
}

.deco-line-bottom {
  position: absolute;
  bottom: -8vw;
  left: -5vw;
  z-index: 0;
  width: 110%;
}


/* home-zone-end end */

/* home-news start */
.home-news {
  margin-top: -5rem;
}

@media (max-width:1400px) {
  .home-news {
    margin-top: -4rem;
  }
}

@media (max-width:1200px) {
  .home-news {
    margin-top: -8rem;
  }
}

@media (max-width: 991.9px) {
  .home-news {
    margin-top: -7rem;
  }
}

@media (max-width: 768px) {
  .home-news {
    margin-top: -5rem;
  }
}

@media (max-width: 650px) {
  .home-news {
    margin-top: 3rem;
  }
}

.news-box {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.news-box img {
  position: relative;
  z-index: 2;
  object-fit: cover;
  object-position: center center;
  width: 100%;
  aspect-ratio: 3/4;
}

.news-box .box {
  background-color: rgba(39, 38, 38, .5);
  position: absolute;
  text-align: center;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  color: var(--white);
  z-index: 3;
}

.news-box .box:hover {
  transform: scale(1.5, 1.5);
  transition: all 1s ease-out;
}
/* home-news end */

/* home-free-trial start */
.home-free-trial {
  padding: 5vw;
  /* text-align: center; */
}

.home-free-trial h2 {
  /* font-size: 20vw; */
  font-size: 3.5rem !important;
  letter-spacing: 1px;
  color: var(--yellow);
}

.home-free-trial h3 {
  letter-spacing: 1.8px;
  font-size: 2rem;
}

.home-free-trial a:hover {
  transform: scale(1.5, 1.5);
  transition: all 1s ease-out;
}

/* home-free-trial end */


/* about start */
.about-img {
  position: relative;
  z-index: 2;
}

.about-bg {
  position: absolute;
  width: 160%;
  height: 135%;
  right: -8%;
  top: 2.5rem;
  background-color: var(--deep-brown);
  opacity: .7;
  z-index: 1;
}

.about-content {
  position: relative;
}

.about-text {
  position: relative;
  z-index: 2;
}

@media (max-width: 1399.9px) {
  .about-bg {
    height: 120%;
  }
}

@media (max-width: 1199.9px) {
  .about-bg {
    height: 105%;
  }
}

@media (max-width: 991.9px) {
  .about-bg {
    width: 100%;
    height: 100%;
  }

  .about-img {
    max-width: 400px;
    margin-right: -5vw;
  }

}

/* about end */

/* professional start */
.professional {
  position: relative;
  margin: 6rem 0;
}

.professional-img {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.professional-title {
  font-size: calc(1.625rem + 4.5vw);
  text-transform: uppercase !important;
  position: relative;
  margin-bottom: calc( -0.8125rem - 2vw) !important;
  margin-left: 4vw;
  z-index: 3;
}

.professional-content {
  position: relative;
  z-index: 3;
  width: 100%;
  background-color: var(--white);
  color: var(--black);
  padding: 1.5rem;
  margin-left: -4rem;
}

.professional-container {
  max-width: auto;
}

@media (max-width: 991.9px) {
  .professional-content {
    margin-left: -2rem;
    margin-top: -5rem;
  }
  .professional-container {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  .professional-container {
    max-width: 540px;
  }
}

@media (max-width: 678px) {
  .professional-content {
    background-color: transparent !important;
    color: var(--white) !important;
    margin-left: 0;
    margin-top: 0;
  }
}

.professional-img img {
  position: relative;
  z-index: 2;
  object-fit: cover;
  object-position: center 40%;
  width: 100%;
  max-height: 600px;
  /* aspect-ratio: 3/1.3; */
}

/* professional end */

/* benefits start */
.benefits {
  margin-top: 3.5rem;
}

.benefits-content {
  width: 100%;
  /* background-color: var(--white);
  color: var(--dark); */
  background-color: var(--yellow);
  color: var(--white);
  padding: 1.5rem;
  margin-left: -4rem;
}

@media (max-width: 767.9px) {
  .benefits-content {
    margin-left: 0rem;
    background-color: transparent;
  }
}

.benefits-content h2 {
  color: var(--white) !important;
}
/* benefits end */

/* classes start */
.classes h4 {
  color: var(--yellow) !important;
}

.classes .card {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  text-align: justify;
}

.classes .card-img-top {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 95%, 80% 100%, 0 70%);
  clip-path: polygon(0 0, 100% 0, 100% 95%, 80% 100%, 0 70%);
}

.classes .card-body {
  margin-top: -30%;
  /* padding-top: 40%; */
}

.card-box {
  border: 1px solid var(--white);
  border-top: 0;
  padding: 30% 1rem 1rem 1rem;
}
/* classes end */

/* privileges start */
.privileges h3 {
  color: var(--yellow) !important;
  text-align: center;
  line-height: 0.5 !important;
}

.privileges ul {
  list-style-type: none;
  padding-inline-start: 0px;
  margin-bottom: 0;
}

.privileges .privileges-list {
  max-width: 500px !important;
  margin:  1rem auto;
}

/* 
.privileges h3 span {
  display: block;
  position: relative;
}

.privileges h3 span:before,
.privileges h3 span:after {
  content: "";
  position: absolute;
  top: 50%;
  background: var(--white);
  height: 1px;
  -webkit-animation: line-before-after 0.8s;
  animation: line-before-after 0.8s;
  animation-fill-mode: forwards;
  animation-delay: 0.85s;
}

.privileges h3 span:before {
  left: 10%; 
}

.privileges h3 span:after {
  right: 10%;
}

@keyframes line-before-after {
  0% {
    opacity: 0;
    width: 0;
  }

  to {
    opacity: 1;
    width: 13%;
  }
} */

/* privileges end */