/*!
README - STYLEGUIDE BRIEFLY

Find the style by media query screen width, using Find or CTRL + F
min-width 601px, min-width: 901px, min-width: 1300px, min-width: 1600px,
max-width: 1599px, max-width: 1299px, max-width: 900px, max-width: 600px

Make this stylesheet still readable and after using this file, dont forget to use beautify after development
Thankyou Whello Developer
*/

/* > MOBILE */
@media all and (min-width: 601px) {
  .testimoni-item,
  #team-members .team-item,
  .whello-card-carousel .card-carousel-item {
    margin: 0 16px !important;
  }

  .listing-popular-trainingen .slick-track {
    margin-bottom: 60px;
  }

  .whello-slide-animation .slick-list:before {
    content: "";
    display: inline-block;
    width: 100px;
    height: 100%;
    background-color: white;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
  }

  .show-sm {
    display: none;
  }

  .list-column .gfield_radio {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
  }

  .content-notfound h1 {
    font-size: 54px;
    letter-spacing: -1.28px;
    line-height: 55px;
  }

  .banner-post {
    padding-bottom: 80px;
  }

  .post-wrapper {
    margin-bottom: 120px;
  }

  .testi-dotsbar,
  .whello-slide-bottom {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    column-gap: 30px;
  }

  .heading-related-post {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    column-gap: 16px;
  }

  .whello-post-results .pattern-content {
    min-height: 360px;
  }

  .site-footer .footer-bottom ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-column-gap: 24px;
    -moz-column-gap: 24px;
    column-gap: 24px;
  }

  body .whello-filter-buttons button {
    padding: 16px 24px;
  }

  .post-meta-details {
    min-height: 203px;
  }

  .whello-filter-buttons {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 16px;
    margin-bottom: 48px;
  }

  .testi-dotsbar,
  .whello-slide-bottom {
    margin-top: 50px;
  }
}
@media all and (min-width: 1300px) {
  .how-it-works__panel,
  .heading-popular-trainingen {
    padding-right: calc((100% - 1280px) / 2) !important;
  }
}

/* > TABLET */
@media all and (min-width: 901px) {
  .how-it-works__panel .how-it-works__item {
    position: sticky;
  }

  .elementor .contact-profile img {
    border-top-left-radius: 24px;
  }

  .elementor .contact-card-details {
    border-bottom-left-radius: 24px;
  }

  .elementor-element.form-detail {
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
  }

  .single-post .container-post {
    padding-top: 120px;
    padding-bottom: 64px;
  }

  .banner-post h1 {
    font-size: 54px;
  }

  .related-post {
    padding-bottom: 120px;
  }

  .whello-post-results .whello-post-card {
    width: 33.33%;
  }

  .admin-bar .how-it-works__panel .how-it-works__item:first-child {
    top: 250px;
  }

  .admin-bar .how-it-works__panel .how-it-works__item:nth-child(2) {
    top: 273px;
  }

  .admin-bar .how-it-works__panel .how-it-works__item:nth-child(3) {
    top: 293px;
  }

  .admin-bar .how-it-works__panel .how-it-works__item:nth-child(4) {
    top: 316px;
  }

  .how-it-works__panel .how-it-works__item:first-child {
    top: 200px;
  }

  .how-it-works__panel .how-it-works__item:nth-child(2) {
    top: 223px;
  }

  .how-it-works__panel .how-it-works__item:nth-child(3) {
    top: 243px;
  }

  .how-it-works__panel .how-it-works__item:nth-child(4) {
    top: 263px;
  }

  .col-left-sticky {
    position: sticky !important;
    top: 40%;
    margin-bottom: 100px !important;
  }

  .how-it-works {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -webkit-flex-flow: row !important;
    -moz-box-orient: horizontal !important;
    -moz-box-direction: normal !important;
    -ms-flex-flow: row !important;
    flex-flow: row !important;
  }
}

@media all and (max-width: 1024px) {
  .how-it-works__heading {
    min-height: auto !important;
  }
}

/* >= DESKTOP & LAPTOP */
@media all and (min-width: 1300px) {
  #slider-testimoni .slick-list {
    margin: 0 -16px !important;
  }
}

@media all and (min-width: 901px) and (max-width: 1299px) {
  .elementor .contact-profile img {
    height: 610px;
  }
}

/* > MOBILE && <= LARGE TABLET */
@media all and (min-width: 601px) and (max-width: 1299px) {
  .site-article > .elementor > .elementor-element:not(.how-it-works) {
    padding-left: 20px;
    padding-right: 20px;
  }

  .how-it-works__heading {
    padding-left: 20px !important;
  }
}

@media all and (min-width: 601px) and (max-width: 1199px) {
  .elementor .type-begeleiding {
    flex-flow: row wrap;
  }
  .elementor .type-begeleiding .type-begeleiding-item {
    width: calc(50% - 8px);
  }
}

@media all and (min-width: 601px) and (max-width: 1199px) {
  .form-wizard-left > div,
  .form-wizard-right {
    padding: 64px 20px !important;
  }
}

@media all and (max-width: 600px) {
  .elementor .different-wrapper > .e-con-inner {
    flex-flow: row wrap !important;
    justify-content: center !important;
  }

  .elementor .whello-slide-card.slick-slide.slick-center {
    transform: rotate(0deg) scale(0.89) translateX(-6%);
  }

  .elementor
    .whello-slide-card.slick-slide.slick-center
    + .whello-slide-card.slick-slide {
    transform: scale(0.75) rotate(6deg) translateX(-60%);
  }
  .page-id-564 .whello-popular-trainingen .slick-list.draggable {
    padding-bottom: 64px;
  }
  .btn-center-mb .elementor-button.elementor-button-link {
    display: flex !important;
    justify-self: center !important;
  }
  .elementor .whello-slide-card.slick-slide {
    transform: scale(0.75) rotate(-6deg) translateX(60%);
  }

  .elementor .elementor-element.no-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .whello-dots-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 24px;
  }

  .testi-dotsbar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    row-gap: 20px;
  }

  .testi-dotsbar > div {
    width: 100%;
  }

  .testi-slider-nav,
  .whello-nav-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .testimoni-item,
  #team-members .team-item,
  .whello-card-carousel .card-carousel-item {
    margin: 0 16px !important;
  }

  .heading-related-post {
    display: flex;
    flex-flow: row wrap;
    row-gap: 16px;
  }

  .related-post .whello-post-results {
    margin-top: 25px;
  }

  .post-wrapper {
    margin-bottom: 40px;
  }

  .elementor-564 .elementor-element.elementor-element-d8596b6 {
    position: relative !important;
  }

  .form-wizard-left > div,
  .form-wizard-right {
    padding: 32px 20px !important;
  }

  .step-wizard-form .gform-page-footer.gform_page_footer {
    flex-flow: row wrap;
    row-gap: 16px;
  }

  .step-wizard-form .gform-page-footer.gform_page_footer button {
    width: 100%;
  }
}
@media all and (max-width: 1440px) and (min-width: 901px) {
  .content-notfound {
    padding-top: 67px;
  }
}

@media all and (max-width: 1199px) {
  .elementor .elementor-element .form-wizard {
    flex-flow: row wrap;
  }

  .elementor .elementor-element .form-wizard > div {
    width: 100%;
  }

  .pink-pallete.elementor-element > .e-con-inner > div,
  .blue-pallete.elementor-element > .e-con-inner > div {
    width: 100%;
  }
  .elementor .pink-pallete.elementor-element > .e-con-inner,
  .elementor .blue-pallete.elementor-element > .e-con-inner {
    flex-flow: row wrap;
  }
}

@media all and (min-width: 601px) and (max-width: 1199px) {
  .price-card .price-card-item {
    flex: 0 0 calc(50% - 16px) !important;
  }

  .examentraining-single-price .price-card .price-card-item {
    flex: unset !important;
  }

  .price-card .e-con-inner {
    flex-flow: row wrap !important;
  }
}
@media all and (min-width: 601px) and (max-width: 900px) {
  .how-it-works__heading {
    padding-right: 20px !important;
  }

  .elementor .contact-form-wrapper {
    flex-flow: row wrap;
  }

  .elementor .contact-form-wrapper > div {
    width: 100%;
  }

  .error404 main#site-main {
    padding: 140px 0 140px;
  }

  .banner-post h1 {
    font-size: 45px;
  }

  .related-post {
    padding-bottom: 60px;
  }

  .how-it-works {
    gap: 48px !important;
  }

  .how-it-works__panel {
    gap: 128px !important;
  }

  .how-it-works__panel .how-it-works__item {
    position: sticky;
    top: 100px;
  }

  .admin-bar .how-it-works__panel .how-it-works__item {
    top: 150px;
  }
}

@media all and (max-width: 900px) {
  .no-br br {
    display: none;
  }
  .how-it-works__item,
  .how-it-works__heading {
    height: auto !important;
    min-height: auto !important;
  }

  .elementor .contact-profile img {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
  }

  .elementor-element.form-detail {
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
  }
  .site-footer .footer-bottom ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    row-gap: 16px;
    flex-flow: column;
  }
  .single-post .container-post {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .how-it-work,
  .solution_card {
    flex-flow: row wrap !important;
  }

  .footer-top > .e-con-inner {
    display: inline-block !important;
  }

  .footer-bottom > .e-con-inner {
    -webkit-box-align: start !important;
    -webkit-align-items: flex-start !important;
    -moz-box-align: start !important;
    -ms-flex-align: start !important;
    align-items: flex-start !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
    -webkit-flex-direction: column-reverse !important;
    -moz-box-orient: vertical !important;
    -moz-box-direction: reverse !important;
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }

  .how-it-works > div,
  .solution_card > div {
    width: 100% !important;
  }

  .elementor-element.elementor-element-0bada1e.e-con-full.logo-footer.e-flex.e-con.e-child {
    margin-bottom: 60px;
  }

  .content-footer-top {
    width: 100% !important;
  }

  .solution_card .solution_card_medium {
    order: 2;
  }
}

/* <= MOBILE */
@media all and (max-width: 767px) {
  .price-tabs .e-n-tabs-heading {
    display: flex !important;
    align-items: center;
    flex-flow: row !important;
  }

  .elementor .learn-smarter-item img {
    height: 700px;
  }

  .elementor-widget-whello_reviews .review-item {
    top: 120px;
  }

  .whello-post-results .whello-post-card {
    width: 100%;
  }

  .price-tabs .e-n-tabs-heading button {
    margin-bottom: 0 !important;
  }

  .price-tabs .e-n-tabs-heading .e-n-tab-title-text {
    font-size: 14px;
  }

  .price-tabs .e-n-tab-title {
    padding: 10px 12px !important;
  }

  .testi-slider-wrap,
  #slider-testimoni {
    min-width: 0;
    max-width: 100%;
  }
  #pain-point .slick-dots {
    margin-top: 70px;
    justify-content: center;
  }

  .slick-track .whiteblue-card:not(:last-child) {
    margin-right: 16px;
  }

  #pain-point .slick-dots .slick-active button {
    background-color: #2e74d2;
    border-color: #2e74d2;
  }

  #pain-point .slick-slider .slick-dots button {
    background-color: rgba(46, 116, 210, 0.1);
  }
}
@media all and (max-width: 1199px) and (min-width: 768px) {
  .elementor .different-wrapper > .e-con-inner {
    flex-flow: row wrap !important;
    justify-content: center !important;
  }

  .elementor .different-wrapper .learn-smarter-item {
    width: calc(50% - 16px);
  }

  .elementor .elementor-element.tarieven-wrapper .tarieven-item {
    width: 50% !important;
  }
}
@media all and (max-width: 1299px) and (min-width: 768px) {
  .elementor-widget-whello_reviews .review-item:first-child {
    padding-bottom: 46px;
  }
}
@media all and (max-width: 900px) and (min-width: 768px) {
  .elementor-element.whiteblue-card {
    width: calc(50% - 16px) !important;
  }

  .whello-post-results .whello-post-card {
    width: 50%;
  }

  .elementor .examentraining-card {
    flex-flow: row wrap;
    justify-content: center;
  }

  .elementor .examentraining-card .examentraining-card-item {
    width: 50%;
  }

  #pain-point {
    flex-flow: row wrap;
    justify-content: center;
  }

  .whello-right {
    width: 60%;
    position: relative;
  }
}
@media all and (min-width: 768px) {
  .whello-tab-location {
    display: flex;
    align-items: center;
    gap: 80px;
  }

  .whello-left {
    gap: 12px;
  }

  .whello-left,
  .whello-right {
    flex: 1;
  }

  .whello-tab-item {
    padding: 20px;
  }

  .whello-left {
    width: 40%;
  }

  .whello-right {
    width: 60%;
  }

  .elementor-widget-whello_reviews .review-item {
    top: 190px;
  }

  .elementor .elementor-element.img-radius-right img {
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
  }
}

@media all and (max-width: 767px) {
  .whello-tab-location {
    display: flex;
    gap: 15px;
    flex-flow: row wrap;
  }
  .whello-left,
  .elementor .elementor-element.tarieven-wrapper .tarieven-item {
    width: 100%;
  }

  .elementor .elementor-element.img-radius-right img {
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
  }

  .whello-tab-item {
    padding: 32px;
  }

  .whello-tab-location h4 {
    --text-xl: 20px;
    letter-spacing: -0.4px;
  }
}

@media all and (max-width: 600px) {
  .site-article > .elementor > .elementor-element:not(.how-it-works) {
    padding-left: 16px;
    padding-right: 16px;
  }

  .elementor .banner-page-lg {
    background-image: none !important;
    padding: 0px !important;
  }

  .elementor .elementor-element.conten-banner-lg {
    padding: 122px 16px 64px !important;
    background-color: #ecfbff;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
  }

  .elementor .banner-page-lg .show-sm {
    display: block;
  }

  .elementor .banner-page-lg h1 {
    color: #2e74d2 !important;
  }

  .elementor .elementor-element.img-banner-lg {
    margin-top: -70px;
    position: relative;
    z-index: -1;
  }

  .elementor-564 .elementor-element.elementor-element-d2f19ee::before {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 88%,
      rgba(255, 255, 255, 1) 100%
    ) !important;
  }

  .cta-banner-lg .btn-animate-outline .elementor-button.elementor-button-link {
    width: auto;
    justify-content: center;
  }

  .btn-icon .elementor-button-content-wrapper {
    justify-content: left;
  }

  .content-notfound h1 {
    font-size: 40px;
    letter-spacing: -1.28px;
    line-height: 35px;
  }

  .error404 main#site-main {
    padding: 116px 0 60px;
  }

  .banner-post,
  .related-post {
    padding-bottom: 40px;
  }

  /* wrapper dua card bawah */
  .pink-card-right .elementor-element-348d93a {
    flex-direction: column !important;
  }

  /* card bawah full width */
  .full-rounded-card {
    width: 100% !important;
    flex: none !important;
  }
  .banner-post h1 {
    font-size: 40px;
  }

  body .whello-filter-buttons button {
    width: 100%;
  }

  body .whello-filter-buttons {
    display: flex;
    flex-flow: row wrap;
    row-gap: 6px;
    margin-bottom: 16px;
  }

  .testi-dotsbar,
  .whello-slide-bottom {
    margin-top: 20px;
  }

  .how-it-works__panel .how-it-works__item {
    position: sticky;
    top: 80px;
  }

  .admin-bar .how-it-works__panel .how-it-works__item {
    top: 150px;
  }

  .how-it-works__heading {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .elementor-widget-button,
  .elementor-widget-button .elementor-button.elementor-button-link {
    width: 100%;
  }

  .elementor .btn-banner-page.elementor-widget-button .elementor-button {
    width: auto;
  }

  .how-it-works__panel {
    gap: 128px !important;
  }

  .how-it-works {
    gap: 48px !important;
  }

  .row,
  .col,
  .container,
  .elementor-column,
  .elementor-widget-wrap {
    min-width: 0;
  }

  .site-header .navbar-header > .container {
    width: calc(100% - 32px);
  }

  .site-header .main-navigation .main-navbar {
    padding: 20px 16px;
  }

  .site-header {
    background-color: #ecfbff;
    padding-bottom: 10px;
  }
}