/*
 Theme Name:   Astra Child
 Theme URI:    https://wpastra.com/
 Description:  Astra Child Theme
 Author:       Brainstorm Force
 Author URI:   https://wpastra.com/
 Template:     astra
 Version:      1.0.2
 Text Domain:  astra-child
*/

/* =========================================================
   GLOBAL
   ========================================================= */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--s4e-header-h, 88px);
}

html,
body {
  margin: 0;
  padding: 0;
}

.wt-cta .wp-block-uagb-advanced-heading div {
  word-break: normal !important;
  white-space: nowrap;
}

/* .fp-wrapper {
  display: block !important;
  position: relative !important;

  width: 100% !important;
  height: 100vh !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;
}

.fp-wrapper > .fp-section {
  position: relative !important;

  width: 100% !important;
  min-width: 100% !important;

  min-height: 100vh !important;
  height: auto !important;

  flex: none !important;

  transform: none !important;
} */

/* Section không cần full viewport (footer, copyright...) */
/* .fp-wrapper > .fp-section.fp-section--auto {
  min-height: auto !important;
} */
/* =========================================================
   CORE VALUE SWIPER
   ========================================================= */

.swiper.core-value-swiper .swiper-wrapper {
  flex-direction: row !important;
}

@media (max-width: 1024px) {
  .swiper.core-value-swiper p {
    display: none;
  }
}

/* =========================================================
   SERVICE LIST
   Desktop / Tablet: 2 columns
   Mobile: horizontal slider
   ========================================================= */

.service-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px !important;
  width: 100%;
}

.service-list > .service-item {
  width: 100%;
  min-width: 0;
}

.service-list .service-item > div {
  height: 100% !important;
}

.service-list .service-item figure,
.service-list .service-item img {
  width: 100% !important;
}

/* =========================================================
   SERVICE ITEM CONTENT
   ========================================================= */

.service-list .service-item .wt-content-swiper,
.service-list .service-item .wt-border {
  position: relative;
}

/* =========================================================
   SERVICE ITEM COLOR BAR
   ========================================================= */

.service-list .service-item .wt-content-swiper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: linear-gradient(
    to right,
    #22c55e 0%,
    #22c55e 33.33%,
    #9ca3af 33.33%,
    #9ca3af 66.66%,
    #3b82f6 66.66%,
    #3b82f6 100%
  );
}

/* =========================================================
   SERVICE ITEM IMAGE - DESKTOP
   ========================================================= */

@media (min-width: 1025px) {
  .wt-btn-hero.wp-block-uagb-buttons .uagb-button__link {
    text-transform: none !important;
  }

  .service-list .service-item figure,
  .service-list .service-item img {
    min-height: 260px;
    width: 100%;
    object-fit: cover;
  }
}

/* =========================================================
   SERVICE ITEM COLOR BAR - DESKTOP
   ========================================================= */

@media (min-width: 1025px) {
  .service-list .service-item .wt-border::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    max-width: 300px;
    background: linear-gradient(
      to right,
      #22c55e 0%,
      #22c55e 33.33%,
      #9ca3af 33.33%,
      #9ca3af 66.66%,
      #3b82f6 66.66%,
      #3b82f6 100%
    );
  }
}

/* =========================================================
   SERVICE LIST 
   ========================================================= */
.service-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch !important;
  gap: 30px !important;
  width: 100%;
}

.service-list > .service-item {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  align-self: stretch !important;
}

.service-list > .service-item > div {
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 1024px) and (min-width: 769px) {
  .service-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 1fr !important;
  }

  .service-list > .service-item {
    height: 100% !important;
  }
}

@media (max-width: 768px) {
  .service-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;

    width: 100% !important;
    max-width: 100% !important;

    gap: 30px !important;

    padding: 0 24px;

    box-sizing: border-box;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
    -ms-overflow-style: none;

    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-auto-rows: unset !important;
    grid-auto-flow: unset !important;
  }

  .service-list::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .service-list > .service-item {
    display: flex !important;

    flex: 0 0 82% !important;
    width: 82% !important;
    min-width: 82% !important;
    max-width: 82% !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;

    align-self: stretch !important;

    box-sizing: border-box;

    grid-column: auto !important;
    grid-row: auto !important;

    scroll-snap-align: start;
  }

  .service-list > .service-item > div {
    width: 100% !important;
    height: 100% !important;
  }
  .service-list > .service-item h3 {
    color: #1a4332 !important;
  }
}

/* =========================================================
   PEEK SLIDER
   Desktop / Tablet
   ========================================================= */

@media (min-width: 769px) {
  .peek-slider-wrap {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 24px;
    overflow: visible;
  }

  .peek-slider {
    display: grid !important;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto;

    column-gap: 30px !important;
    row-gap: 24px;

    width: 100%;
    padding: 0;

    overflow: visible;
  }

  .peek-slider .slide-we-are {
    grid-column: 1;
    grid-row: 1;
  }

  .peek-slider .slide-white {
    grid-column: 1;
    grid-row: 2;
  }

  .peek-slider .slide-we-create {
    grid-column: 2;
    grid-row: 1 / 3;
  }
}

/* =========================================================
   PEEK SLIDER - MOBILE
   ========================================================= */

@media (max-width: 768px) {
  .peek-slider-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .peek-slider {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: stretch !important;
    justify-content: flex-start !important;

    width: 100% !important;
    max-width: none !important;

    gap: 12px !important;

    padding: 0 24px;

    box-sizing: border-box;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .peek-slider::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .peek-slider .slide {
    display: block !important;

    flex: 0 0 85% !important;

    width: 85% !important;
    min-width: 85% !important;
    max-width: 85% !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    grid-column: auto !important;
    grid-row: auto !important;

    scroll-snap-align: start;
  }

  .peek-slider .slide-we-are,
  .peek-slider .slide-white,
  .peek-slider .slide-we-create {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* =========================================================
   FEATURE LIST
   ========================================================= */

.wt-list-feature {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wt-list-feature::before {
  content: "";
  display: inline-block;

  width: 5px;
  min-width: 5px;
  height: 5px;

  border-radius: 50%;
  background-color: #0b1230;
}