/* 
Theme Name: Withgrovv Child Theme
Theme URI: https://withgrovv.com/
Description: Withgrovv Child Theme is a custom child theme of Withgrovv
Author: Withgrovv Team
Author URI: https://withgrovv.com/
Template: withgrovv
Version: 2.0.0
Text Domain: withgrovv-childtheme
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* Reset CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  word-break: keep-all;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
  user-select: none;
  -webkit-user-select: none; /* iOS/Safari 대응 */
  -ms-user-select: none;     /* IE/Edge 레거시 대응 */
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.elementor-icon i, .elementor-icon svg {
  height: auto !important;
}

br.br_pc_ {
    display: block;
}
br.br_m_ {
    display: none;
}
::-webkit-scrollbar {
    height: 4px;
}
::-webkit-scrollbar {
    width: 4px;
}
::-webkit-scrollbar-thumb {
    background: #00FF14;
    border-radius: 5px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
/* Neon Badge Styles */
.neon_badge {
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.10);
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.10);
  backdrop-filter: blur(2px);
  visibility: hidden;
}
.neon_badge.gsap-ready {
  visibility: visible;
}
.neon_badge p {
  display: flex;
  align-items: center;
  gap: 4px;
}
.neon_badge p:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("/wp-content/uploads/2025/08/badge_symbol.svg") no-repeat center/contain;
}

/* Gradient Text */
.grad_txt {
  font-weight: bold;
  background: linear-gradient(90deg, #B500BE 0%, #047BCD 37.5%, #08919A 69.71%, #D3FF69 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* CTA Button */
.cta_btn {
  transition: all .3s;
}
.cta_btn:hover {
  transform: translateY(-4px);
}

.btn_company {
  backdrop-filter: blur(2px);
}

.prf_ico {
  aspect-ratio: 1/1;
}

/* Gradient Boxes Base Styles */
.grad_box_1,
.grad_box_2,
.grad_box_3 {
  position: relative;
  overflow: hidden;
  background: transparent;
  backdrop-filter: blur(4px);
  transition: box-shadow .3s ease;
}
.grad_box_3 {
  background: rgba(255,255,255,0.02)
}
/* Box shadows */
.grad_box_1 {
  box-shadow:
    -1px -1px 2px 0 rgba(17, 101, 1, 0.15) inset,
     1px  1px 2px 0 rgba(57, 255, 20, 0.15) inset;
}
.grad_box_3 {
  box-shadow: 
    -1px -1px 2px 0 rgba(255, 255, 255, 0.15) inset,
     1px 1px 2px 0 rgba(255, 255, 255, 0.15) inset;
}
.grad_box_2 {
  box-shadow:
    -1px -1px 2px 0 rgba(17, 101, 1, 0.15) inset,
     1px  1px 2px 0 rgba(57, 255, 20, 0.15) inset,
     4px  4px 8px 0 rgba(0, 0, 0, 0.2);
}

.grad_box_2.neutral_300 {
  box-shadow:
    -1px -1px 2px 0 rgba(17, 101, 1, 0.15) inset,
     1px  1px 2px 0 rgba(57, 255, 20, 0.15) inset,
     0    0 40px 0 rgba(211, 255, 105, 0.15);
}

/* hover shadow */
.grad_box_1:hover,
.grad_box_2:hover,
.grad_box_3:hover {
  box-shadow: 0px 0px 8px 4px rgba(57, 255, 20, 0.1);
}

/* Content z-index */
.grad_box_1 > *,
.grad_box_2 > *,
.grad_box_3 > * {
  position: relative;
  z-index: 1;
}

/* Gradient Layers - grad_box_1 and grad_box_3 share same gradients */
.grad_box_1::before {
background: linear-gradient(149deg,
    rgba(0, 255, 20, 0.00) 0.76%,
    rgba(33, 64, 36, 0.36) 34.99%,
    rgba(21, 21, 22, 0.70) 69.22%);
}
.grad_box_1::before,
.grad_box_3::before {
  content: "";
  position: absolute; 
  inset: 0;
  z-index: 0; 
  pointer-events: none;
  opacity: 1;
  transition: opacity .5s ease;
}

.grad_box_1::after,
.grad_box_3::after {
  content: "";
  position: absolute; 
  inset: 0;
  z-index: 0; 
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0, 255, 20, 0.00) 0%,
    rgba(33, 64, 36, 0.36) 50%,
    rgba(21, 21, 22, 0.70) 100%);
  opacity: 0;
  transition: opacity .5s ease;
}

.grad_box_1:hover::after,
.grad_box_3:hover::after { 
  opacity: 1; 
}
.grad_box_1:hover::before,
.grad_box_3:hover::before { 
  opacity: 0; 
}

/* grad_box_2 unique gradients */
.grad_box_2::before {
  content: "";
  position: absolute; 
  inset: 0;
  z-index: 0; 
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(25, 25, 25, 0.10) 0%,
    rgba(33, 64, 36, 0.36) 50%,
    rgba(25, 25, 25, 0.10) 100%);
  opacity: 1;
  transition: opacity .5s ease;
}

.grad_box_2::after {
  content: "";
  position: absolute; 
  inset: 0;
  z-index: 0; 
  pointer-events: none;
  background: linear-gradient(180deg, 
    rgba(25, 25, 25, 0.10) 0%, 
    rgba(0, 119, 10, 0.3) 50%, 
    rgba(25, 25, 25, 0.10) 100%);
  opacity: 0;
  transition: opacity .5s ease;
}

.grad_box_2:hover::after { 
  opacity: 1; 
}
.grad_box_2:hover::before { 
  opacity: 0; 
}

/* Box Heights */
.box_230 {
  min-height: 230px;
}
.box_250 {
  min-height: 250px;
}
.box_260 {
  min-height: 260px;
}

.title_nav {
  min-width: 272px !important;
}

/* Side Menu */
.side-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: color 0.3s ease;
}
.side-menu a {
  display: block;
  color: var(--e-global-color-daaf4aa);
  font-size: 28px;
  font-weight: 500;
  transition: .3s;
}
.side-menu a:hover, 
.side-menu a.active {
  color: #fff;
}

/* Pipeline List */
.pipe_line_li ul {
  display: flex;
  flex-wrap: wrap;
}
.pipe_line_li ul li {
  width: 50%;
}

/* Box Connection Lines */
.box_con > div:not(:first-child)::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, #00FF14 0%, #191919 100%);
  position: absolute;
  left: -32px;
  top: 50%;
}

.w_b_span {
  color: #fff;
}

/* Heading Flow Animation */
.heading-flow{
  position: relative;
  overflow: hidden;
}
.heading-flow .elementor-heading-title{
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  white-space: nowrap;
  will-change: transform;
  animation: flowX var(--speed, 60s) linear infinite;
}
.heading-flow .txt_flow_{
  display: flex;
  line-height: 1;
  align-items: center;
  filter: drop-shadow(0px 0px 6px rgba(57, 255, 20, 0.2));
}
@keyframes flowX{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.txt_flow_::before{
  content: "";
  display: inline-block;
  width: 200px;
  height: 200px;
  margin-right: 40px;
  background: url("/wp-content/uploads/2025/08/symbol.svg") no-repeat center / contain;
  vertical-align: middle;
}

/* Bubble Box */
.bubble_box {
  max-width: 400px;
  border-radius: 250px;
  backdrop-filter: blur(24px);
  aspect-ratio: 1/1;
  position: relative;
  overflow: visible;
}
.bubble_box::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  animation: rotate360 15s linear infinite;
  z-index: 1;
}
.bubble_box.vision:after {
  background-image: url(https://withgrovv.com/wp-content/uploads/2025/08/bubble_1.webp);
}
.bubble_box.growth:after {
  background-image: url(https://withgrovv.com/wp-content/uploads/2025/08/bubble_2.webp);
}
.bubble_box.value:after {
  background-image: url(https://withgrovv.com/wp-content/uploads/2025/08/bubble_3.webp);
}
@keyframes rotate360 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* FAQ */
.faq_h4 span {
  font-size: 20px;
  color: var(--e-global-color-62cc0e4);
}

/* Typed Effect */
#typed {
  display:inline;
  color: var(--e-global-color-62cc0e4);
  white-space: pre;
  font-family: 'Pretendard', Sans-Serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8em;
}
.typed-cursor{
  display: inline-block;
  margin-left: 2px;
  line-height: 1em;
  vertical-align: baseline;
  color: var(--e-global-color-62cc0e4);
  animation: blink .7s infinite;
}

/* GSAP SplitText Styles */
.split-word {
  display: inline-block;
  transform-origin: center bottom;
  margin-right: 0.3em;
}
.split-word:last-child {
  margin-right: 0;
}
.split-word-h1 {
  display: inline-block;
}
.grad_txt .split-word-h1 {
  background: inherit;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hero H1 Initial State */
.hero_h1 h1 {
  opacity: 0;
}
.hero_h1 h1.gsap-ready {
  opacity: 1;
}

/* Initial Hidden States for Animations */
.sub_text_h4 h4,
#Hero .cta_btn,
#cta .cta_btn,
#feature_con .grad_box_1,
#pipeline .code_writing,
#pipeline .sub_li,
#process .process_box_li,
#integrations .logo_grid_ .elementor-widget-icon,
#review_con .grad_box_1,
#price_con .grad_box_2,
#timeline_con .grad_box_3,
#dedicated_con .bubble_box,
#faq_con .grad_box_2,
.title_h2 h3 {
  opacity: 0;
}

/* Hero section exception */
#Hero .title_h2 h3 {
  opacity: 1;
}

/* Process box before animation */
#process .box_con > div:not(:first-child)::before {
  opacity: var(--before-opacity, 0);
}
.grovv_form_ {
    box-shadow: -1px -1px 1px 0 rgba(57, 255, 20, 0.15) inset, 1px 1px 1px 0 rgba(57, 255, 20, 0.25) inset;
    backdrop-filter: blur(6px);
}
.grovv_form_ .elementor-field-group .elementor-field-textual:focus {
    border-color: #39FF14 !important;
    background: rgba(57, 255, 20, 0.03);
    box-shadow: 0 0 0 3px rgba(57, 255, 20, 0.1), 0 0 30px rgba(57, 255, 20, 0.2);
}
.grovv_form_check {
    color: #39FF14 !important;
    font-size: 14px;
}
.grovv_form_ .elementor-field-group:is(.elementor-field-type-text, .elementor-field-type-tel, .elementor-field-type-email, .elementor-field-type-select){
  width: 50% !important;
}
input[type='checkbox'] {
  appearance: none;
  margin: 0;
}
input[type='checkbox']:after {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background: url('/wp-content/uploads/2025/08/check.svg')
    no-repeat center / contain;
  transition: 0.3s;
}
input[type='checkbox']:checked:after {
  background-image: url('/wp-content/uploads/2025/08/checked.svg');
}
.form_pop_ span.elementor-field-option {
    display: flex;
    align-items: center;
    gap: 8px;
}
.grovv_form_ button.elementor-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(57, 255, 20, 0.4);
}
.form_pop_ .elementor-mark-required .elementor-field-label:after {
  color: var(--e-global-color-a38609e);
}
/* Media Queries - Tablet */
@media screen and (max-width: 1024px) {
  br.br_pc_ {
    display: none !important;
  }
  br.br_m_ {
    display: block;
  }
  #typed {
    font-size: 2.7vw;
    font-weight: 400;
  }
  .faq_h4 span {
    font-size: 2.5vw;
  }
  .txt_flow_::before{
    width: 20vw;
    height: 20vw;
    margin-right: 5vw;
  }
  .heading-flow .elementor-heading-title{
    animation: flowX var(--speed, 30s) linear infinite;
  }
}

/* Media Queries - Mobile */
@media screen and (max-width: 767px) {
  .box_230 {
    min-height: 200px;
  }
  .box_250 {
    min-height: 240px;
  }
  .box_260 {
    min-height: 260px;
  }
  .pipe_line_li ul li {
    width: 100%;
  }
  #typed {
    font-size: 3.7vw;
    font-weight: 400;
  }
  .box_con > div:not(:first-child)::before{
    width: 2px;
    height: 32px;
    background: linear-gradient(180deg, #00FF14 0%, #191919 100%);
    left: 50%;
    top: -50px;
  }
  .faq_h4 span {
    font-size: 20px;
  }
  .cta_btn.h_btn:hover{
    transform: translateY(0) !important;
  }
  .cta_btn.h_btn .elementor-button:hover {
    background: transparent !important;
    color: var(--e-global-color-a38609e) !important;
    box-shadow: none !important;
  }
}