:root {
  --app-font: "Roboto", sans-serif;
  --app-primary-color: #21A3D9;
  --app-primary-light-color : #BCE3F4;
  --app-secondary-color: #232323;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  transition: all 0.3s;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.7);
}

* {
  font-family: var(--app-font) !important;
}

body {
  font-family: var(--app-font);
}

.scrolled .header, .page-content .header{
  background-color: transparent !important;
}

.scrolled .header .container-fluid, .page-content .header .container-fluid{
  backdrop-filter: blur(10px);
  background-color: rgba(248, 253, 255, 0.75);
  box-shadow: rgba(35, 35, 35, 0.1) -0.25em 0.5625em 1.5625em -0.375em;
  border-width: 0.0625em;
  border-style: solid;
  border-color: rgb(255, 255, 255);
  border-image: initial;
  overflow: hidden;
  padding: 0.625em;
  border-radius: 80px;
  transition: 0.3s ease-in-out;
}

.mobile-nav-toggle{
  color: var(--app-secondary-color) !important;
}

.container{
  position: relative;
  z-index: 2;
}

.app-border-primary{
  border: 1px solid var(--app-primary-color) !important;
}

.app-bg-primary{
  background: var(--app-primary-color) !important;
}

.app-bg-primary-glasses{
  background: linear-gradient(178.38deg, #21A3D9 55.7%, rgba(255, 255, 255, 0) 136.85%) !important;
}

.app-text-primary{
  color: var(--app-primary-color) !important;
}

.app-text-primary-glasses{
  background: linear-gradient(186deg, #21a3d9 55.7%, rgb(255 255 255 / 0%) 136.85%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.app-bg-primary-light{
  background: var(--app-primary-light-color) !important;
}

.app-bg-primary-light-glasses{
  background: linear-gradient(178.38deg, #21A3D9 55.7%, rgba(255, 255, 255, 0) 136.85%) !important;
}

.app-text-primary-light{
  color: var(--app-primary-light-color) !important;
}

.app-text-primary-light-glasses{
  background: linear-gradient(186deg, #BCE3F4 55.7%, rgb(255 255 255 / 0%) 136.85%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.app-bg-secondary{
  background: var(--app-secondary-color) !important;
}

.app-text-secondary{
  color: var(--app-secondary-color) !important;
}

.app-text-secondary-glasses{
  background: linear-gradient(186deg, #232323 55.7%, rgb(255 255 255 / 0%) 136.85%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (min-width: 1200px) {
  .navmenu a, .navmenu a:focus {
    color: var(--app-secondary-color);
    font-weight: 500;
  }
}

@media (min-width: 1200px) {
  .navmenu li:hover>a, .navmenu .active, .navmenu .active:focus {
    color: var(--app-primary-color);
    text-shadow: 0 0 .428em #21a3d966;
  }
}

.header .logo img{
  max-height: 45px;
}

.scrolled .header .logo img{
  max-height: 45px;
}

.page-title{
  padding: 160px 0 144px 0 !important;
}

.page-title.has-bg{
  background: url('/assets/images/page_bg.png');
  background-size: 100% 100%;
  background-position: center center;
}

.page-title:before{
  background-color: unset !important;
}

.wwa-content{
  padding-top: 6rem !important;
}

.wwa-content-img{
  background: url('/assets/images/wwa_img.png');
  background-size: 100% 100%;
  background-position: center center;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
}

.wwa-content-info {
  position: absolute;
  bottom: 10%;
  right: 5%;
  background: rgb(255 255 255 / 21%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(30px);
}


.obs-content{
  padding-top: 6rem !important;
}

.obs-content-img{
  background: url(/assets/images/obs_img.png);
  background-size: 100% 100%;
  background-position: center center;
  position: absolute;
  height: 100%;
  width: 40%;
  top: 0;
  right: 10%;
}

.obs-content-info {
  position: absolute;
  bottom: 10%;
  left: 5%;
}

.content-grow{
  background: url(/assets/images/grow_bg.png);
  background-size: 100% 100%;
  background-position: center center;
}

.content-welcome{
  background: url(/assets/images/welcome_bg.png);
  background-size: 100% 100%;
  background-position: center center;
}

.rar-img{
  margin-top: -10%;
}

.portofolio-badge{
  background: #312F2F80;
  border: 1px solid #F5F7FC;
  position: absolute;
  top: 5%;
  left: 5%;
}

.portofolio-title-content{
  position: absolute;
  bottom: 0;
  left: 0;
}

.portofolio-title{
  background: #FFFFFFBF;
}

.portofolio-badge.right{
  right: 5%;
  left: auto;
}

.portofolio-title-content.right{
  position: absolute;
  right: 0;
  left: auto;
}

.team-item{
  background: url(/assets/images/team_bg_primary_light.png);
  background-size: 100% 100%;
  background-position: center center;
}

.team-item.primary{
  background: url(/assets/images/team_bg_primary.png);
  background-size: 100% 100%;
  background-position: center center;
}

.accordion-item{
  border: 1px solid var(--app-primary-color) !important;
}

.accordion-item:has(.accordion-collapse.show), .accordion-item:hover {
  background: var(--app-secondary-color) !important;
}

.accordion-item:has(.accordion-collapse.show) .accordion-button, .accordion-item:hover .accordion-button {
  color: #FFFFFF !important;
}

.accordion-item:has(.accordion-collapse.show) .accordion-body, .accordion-item:hover .accordion-body {
  color: #FFFFFF !important;
}

.accordion-button::after{
  background-image: url(/assets/images/accordion_down_icon.png) !important;
  width: 2rem !important;
  height: 2rem !important;
  background-size: 2rem !important;
  transform: none !important;
}

.accordion-button:not(.collapsed)::after{
  background-image: url(/assets/images/accordion_right_icon.png) !important;
}

.footer-logo img{
  max-height: 45px !important;
}

input.text-white::placeholder{
  color: #FFFBFB !important;
}

.card-item.bg-1{
  background: url(/assets/images/card-bg-1.png);
  background-size: 100% 100%;
  background-position: center center;
}
.card-item.bg-2{
  background: url(/assets/images/card-bg-2.png);
  background-size: 100% 100%;
  background-position: center center;
}

.ornament-left, .ornament-right{
  z-index: 1;
  opacity: .5;
}

#home-intro .ornament-left{
  position: absolute;
  top: 15%;
  left: -2%;
}

#home-intro .ornament-right{
  position: absolute;
  top: 15%;
  right: -2%;
}

#home-wwaobs-and-grow .ornament-left{
  position: absolute;
  top: 30%;
  left: -10%;
}

#home-wwaobs-and-grow .ornament-right{
  position: absolute;
  top: 40%;
  right: 0%;
}

#home-portofolio .ornament-left{
  position: absolute;
  top: 10%;
  left: -2%;
}

#home-portofolio .ornament-right{
  position: absolute;
  top: 10%;
  right: -2%;
}

#home-talent .ornament-left{
  position: absolute;
  top: 10%;
  left: -10%;
}

#home-talent .ornament-right{
  position: absolute;
  top: 5%;
  right: 0%;
}

#home-team .ornament-left{
  position: absolute;
  top: 10%;
  left: -2%;
}

#home-team .ornament-right{
  position: absolute;
  top: 10%;
  right: -2%;
}

#home-blog .ornament-left{
  position: absolute;
  top: 10%;
  left: -10%;
}

#home-blog .ornament-right{
  position: absolute;
  top: 5%;
  right: 0%;
}

#home-trial .ornament-left{
  position: absolute;
  top: 10%;
  left: -2%;
}

#home-trial .ornament-right{
  position: absolute;
  top: 10%;
  right: -2%;
}

#home-welcome .ornament-left{
  position: absolute;
  top: 10%;
  left: -2%;
}

#home-welcome .ornament-right{
  position: absolute;
  top: 10%;
  right: -2%;
}

#home-try .ornament-left{
  position: absolute;
  top: 0%;
  left: -10%;
}

#home-try .ornament-right{
  position: absolute;
  top: 0%;
  right: 0%;
}

.about-growup-img-desc{
  position: absolute;
  left: 0;
  bottom: 0;
}

.card-item-border.bg-light{
  background: url(/assets/images/card_bg_light_border.png);
  background-size: 100% 100%;
  background-position: center center;
}
.card-item-border.bg-white{
  background: url(/assets/images/card_bg_white_border.png);
  background-size: 100% 100%;
  background-position: center center;
}

#about-growup .ornament-left{
  position: absolute;
  top: 20%;
  left: -2%;
}

#about-growup .ornament-right{
  position: absolute;
  top: 10%;
  right: -2%;
}

#about-detail .ornament-left{
  position: absolute;
  top: 20%;
  left: -10%;
}

#about-detail .ornament-right{
  position: absolute;
  top: 30%;
  right: 0%;
}

.service-lets{
  background: url(/assets/images/service/lets-bg.png);
  background-size: 100% 100%;
  background-position: center center;
}

#service-list .ornament-left{
  position: absolute;
  top: 20%;
  left: -2%;
}

#service-list .ornament-right{
  position: absolute;
  top: 10%;
  right: -2%;
}

#service-lets .ornament-left{
  position: absolute;
  top: 0%;
  left: -10%;
}

#service-lets .ornament-right{
  position: absolute;
  top: 0%;
  right: 0%;
}

.card-action-bottom{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

#program-intro .ornament-left{
  position: absolute;
  top: 20%;
  left: -2%;
}

#program-intro .ornament-right{
  position: absolute;
  top: 10%;
  right: -2%;
}

#program-list .ornament-left{
  position: absolute;
  top: 0%;
  left: -10%;
}

#program-list .ornament-right{
  position: absolute;
  top: 0%;
  right: 0%;
}

#program-lets .ornament-left{
  position: absolute;
  top: 20%;
  left: -2%;
}

#program-lets .ornament-right{
  position: absolute;
  top: 10%;
  right: -2%;
}


#faq-list .ornament-left{
  position: absolute;
  top: 20%;
  left: -2%;
}

#faq-list .ornament-right{
  position: absolute;
  top: 10%;
  right: -2%;
}

#faq-lets .ornament-left{
  position: absolute;
  top: 0%;
  left: -10%;
}

#faq-lets .ornament-right{
  position: absolute;
  top: 0%;
  right: 0%;
}

#blog-intro .ornament-left{
  position: absolute;
  top: 20%;
  left: -2%;
}

#blog-intro .ornament-right{
  position: absolute;
  top: 10%;
  right: -2%;
}

#blog-list .ornament-left{
  position: absolute;
  top: 0%;
  left: -10%;
}

#blog-list .ornament-right{
  position: absolute;
  top: 0%;
  right: 0%;
}

#blog-lets .ornament-left{
  position: absolute;
  top: 20%;
  left: -2%;
}

#blog-lets .ornament-right{
  position: absolute;
  top: 10%;
  right: -2%;
}

#pricing-list .ornament-left{
  position: absolute;
  top: 20%;
  left: -2%;
}

#pricing-list .ornament-right{
  position: absolute;
  top: 10%;
  right: -2%;
}

#pricing-lets .ornament-left{
  position: absolute;
  top: 0%;
  left: -10%;
}

#pricing-lets .ornament-right{
  position: absolute;
  top: 0%;
  right: 0%;
}

#contact-list .ornament-left{
  position: absolute;
  top: 20%;
  left: -2%;
}

#contact-list .ornament-right{
  position: absolute;
  top: 10%;
  right: -2%;
}

#contact-detail .ornament-left{
  position: absolute;
  top: 0%;
  left: -10%;
}

#contact-detail .ornament-right{
  position: absolute;
  top: 0%;
  right: 0%;
}

#contact-lets .ornament-left{
  position: absolute;
  top: 20%;
  left: -2%;
}

#contact-lets .ornament-right{
  position: absolute;
  top: 10%;
  right: -2%;
}

#portofolio-content.one .ornament-left{
  position: absolute;
  top: 20%;
  left: -2%;
}

#portofolio-content.one .ornament-right{
  position: absolute;
  top: 20%;
  right: -2%;
}

#portofolio-content.two .ornament-left{
  position: absolute;
  top: 20%;
  left: -2%;
}

#portofolio-content.two .ornament-right{
  position: absolute;
  top: 20%;
  right: -2%;
}

#portofolio-lets .ornament-left{
  position: absolute;
  top: 0%;
  left: -10%;
}

#portofolio-lets .ornament-right{
  position: absolute;
  top: 0%;
  right: 0%;
}

.break-word{
  overflow-wrap: break-word;
}

#portofolio-content.two .swiper-item-portofolio{
  flex-direction: row-reverse;
}

#portofolio-content.two .swiper-item-portofolio .card-body{
  text-align: right;
}