@import "./reset.css";

@import "./reset-plugins-styles.css";

@import "./blog.css";



/* Styles intended only for the front.*/

html {

  scroll-behavior: smooth;

}



@media screen and (prefers-reduced-motion: reduce) {

  html {

    scroll-behavior: auto;

  }

}



/* ======================================================

ROOT VARIABLES (aliases for WordPress presets)

====================================================== */



:root {

  /* COLORS */

  --c-base: var(--wp--preset--color--base);

  --c-accent: var(--wp--preset--color--accent);

  --c-text: var(--wp--preset--color--text);

  --c-title: var(--wp--preset--color--title);

  --c-bg: var(--wp--preset--color--bg);

  --c-white: var(--wp--preset--color--white);

  --c-transparent: var(--wp--preset--color--transparent);



  /* HAP COLORS */

  --c-hap-text: var(--wp--preset--color--hap-text);

  --c-hap-base: var(--wp--preset--color--hap-base);

  --c-hap-title: var(--wp--preset--color--hap-title);



  /* GRADIENT */

  --g-hap: var(--wp--preset--gradient--hap-gradient);



  /* FONT */

  --font-main: var(--wp--preset--font-family--space-grotesk);



  /* FONT SIZES */

  --fs-sm: var(--wp--preset--font-size--small);

  --fs-md: var(--wp--preset--font-size--medium);

  --fs-lg: var(--wp--preset--font-size--large);

  --fs-xl: var(--wp--preset--font-size--x-large);

  --fs-xxl: var(--wp--preset--font-size--xx-large);



  /* SPACING */

  --sp-sm: var(--wp--preset--spacing--30);

  --sp-md: var(--wp--preset--spacing--40);

  --sp-lg: var(--wp--preset--spacing--50);

  --sp-xl: var(--wp--preset--spacing--60);

}



html:not(.fonts-loaded) .wv-gsap-animation-section {

  opacity: 0;

}



html.fonts-loaded .wv-gsap-animation-section {

  opacity: 1;

}



body {

  -moz-osx-font-smoothing: grayscale;

  -webkit-font-smoothing: antialiased;

  font-family: var(--font-main);

  font-style: normal;

  font-size: 18px;

  line-height: 1.5;

  overflow-x: hidden;

  color: var(--c-text);

  padding: 0;

  background-color: var(--c-white);

}

section {

  max-width: 100% !important;

  overflow: hidden;

  margin: 0 !important;

}



h1 {

  font-size: var(--fs-xxl);

  font-weight: 800;

  line-height: 1.3;

  text-transform: uppercase;

}

h2 {

  font-size: var(--fs-xl);

  font-weight: 700;

  line-height: 1.5;

}

h3 {

  font-size: var(--fs-lg);

  font-weight: 600;

  line-height: 1.5;

}

h4 {

  font-size: var(--fs-md);

  font-weight: 500;

  line-height: 1.5;

}



a {

  transition: all 0.3s ease-in-out;

}

a:hover {

  transition: all 0.3s ease-in-out;

  color: var(--c-accent);

}

.wrapper {

  width: 100%;

  max-width: 1400px;

  padding: 0 20px;

  margin: 0 auto;

}



.webvibe_primary-button {

  display: flex;

  align-items: center;

  gap: 10px;

  width: fit-content;

  text-transform: uppercase;

  cursor: pointer;

  color: var(--c-white);

  font-size: var(--fs-sm);

  font-weight: 500;

  padding: 18px 30px;

  border-radius: 40px;

  -webkit-transition: all 200ms linear 0ms;

  transition: all 200ms linear 0ms;

  background: -webkit-gradient(

    linear,

    left top,

    right top,

    from(#6256ed),

    color-stop(50%, #f350bc),

    to(#6256ed)

  );

  background: linear-gradient(90deg, #6256ed 0%, #f350bc 50%, #6256ed);

  background-size: 200%, 1px;

}

.webvibe_primary-button svg {

  transform: rotate(-45deg);

  transition: all 0.3s ease-in-out;

}

.webvibe_primary-button:hover {

  background-position: 120%;

  transition: all 0.3s ease-in-out;

  color: var(--c-white);

}

.webvibe_primary-button:hover svg {

  transform: rotate(0deg);

  transition: all 0.3s ease-in-out;

}



.wv-image-overlay {

  background-color: var(--c-bg);

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 1;

  opacity: 0;

}



.wv-gradient-text {

  background: var(--g-hap);

  background-clip: text;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}



.over-text-wrapper {

  display: flex;

  align-items: center;

  justify-content: center;

  width: fit-content;

  gap: 5px;

  background: var(--g-hap);

  background-clip: text;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  text-transform: uppercase;

  font-weight: 600;

}



/* Scroll bar custom */

/* Chrome / Edge / Safari */

html::-webkit-scrollbar,

body::-webkit-scrollbar {

  width: 10px;

}



html::-webkit-scrollbar-track,

body::-webkit-scrollbar-track {

  background: #0b0b0b;

}



html::-webkit-scrollbar-thumb,

body::-webkit-scrollbar-thumb {

  background: linear-gradient(180deg, #6a5cff 0%, #e34acb 100%);

  border-radius: 30px;

}



html::-webkit-scrollbar-thumb:hover,

body::-webkit-scrollbar-thumb:hover {

  background: linear-gradient(180deg, #5b4cff 0%, #d63dbf 100%);

}



/* Sticky header */

.sticky-on {

  top: 0;

  width: 100%;

  z-index: 10;

  padding: 0;

  position: fixed;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both;

  background-color: #fff;

  -webkit-animation-name: slideInDown;

  animation-name: slideInDown;

  -webkit-animation-timing-function: ease;

  animation-timing-function: ease;

  -webkit-transition: 0.3s all ease-in-out;

  transition: 0.3s all ease-in-out;

  -webkit-box-shadow: 0px 4px 4px 0px rgba(100, 109, 152, 0.0588235294);

  box-shadow: 0px 4px 4px 0px rgba(100, 109, 152, 0.0588235294);

}

.sticky-on .header-top {

  display: none;

}

.sticky-on .header-content {

  padding: 10px 20px !important;

}

.sticky-on .wp-block-blocks-webvibe-block-header {

  position: relative;

  top: 0;

}



.wv-back-top-btn {

  display: flex;

  align-items: center;

  justify-content: center;

  position: fixed;

  background: var(--g-hap);

  width: 50px;

  height: 50px;

  right: 30px;

  bottom: 30px;

  color: var(--c-white);

  border-radius: 50px;

  cursor: pointer;

  z-index: 11;

  opacity: 0;

  visibility: hidden;

  -webkit-transition: all 0.7s ease-out 0s;

  transition: all 0.7s ease-out 0s;

}

.wv-back-top-btn.active {

  -webkit-transform: translateY(-98%);

  transform: translateY(-98%);

  opacity: 1;

  visibility: visible;

}



@keyframes slideInDown {

  0% {

    opacity: 0;

    -webkit-transform: translateY(-400px);

    -ms-transform: translateY(-400px);

    transform: translateY(-400px);

  }



  100% {

    -webkit-transform: translateY(0);

    -ms-transform: translateY(0);

    transform: translateY(0);

  }

}



/* Contact form 7 checkbox */

.wv-contact-form__checkbox {

  color: var(--c-white);

}



.wv-contact-form__checkbox .wpcf7-form-control,

.wv-contact-form__checkbox .wpcf7-list-item {

  display: block;

}



.wv-contact-form__checkbox label {

  position: relative;

  display: inline-flex;

  align-items: flex-start;

  cursor: pointer;

  gap: 0;

}



.wv-contact-form__checkbox input[type="checkbox"] {

  position: absolute;

  opacity: 0;

  pointer-events: none;

}



.wv-contact-form__checkbox .wpcf7-list-item-label {

  position: relative;

  display: inline-block;

  padding-left: 34px;

  line-height: 1.5;

}



.wv-contact-form__checkbox .wpcf7-list-item-label::before {

  content: "";

  position: absolute;

  left: 0;

  top: 2px;

  width: 20px;

  height: 20px;

  border-radius: 6px;

  border: 1px solid rgba(255, 255, 255, 0.35);

  background: transparent;

  transition: all 0.25s ease;

}



.wv-contact-form__checkbox .wpcf7-list-item-label::after {

  content: "";

  position: absolute;

  left: 7px;

  top: 7px;

  width: 5px;

  height: 9px;

  border-right: 2px solid var(--c-white);

  border-bottom: 2px solid var(--c-white);

  transform: rotate(45deg) scale(0);

  transform-origin: center;

  transition: transform 0.2s ease;

}



.wv-contact-form__checkbox

  input[type="checkbox"]:checked

  + .wpcf7-list-item-label::before {

  background: var(--g-hap);

  border-color: transparent;

  box-shadow: 0 0 10px rgba(154, 92, 246, 0.35);

}



.wv-contact-form__checkbox

  input[type="checkbox"]:checked

  + .wpcf7-list-item-label::after {

  transform: rotate(45deg) scale(1);

}



.wv-contact-form__checkbox label:hover .wpcf7-list-item-label::before {

  border-color: rgba(255, 255, 255, 0.6);

}



.wv-portfolio-head {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 32px;

  margin-bottom: 50px;

}



.wv-portfolio-head-content {

  max-width: 760px;

}



.wv-portfolio-eyebrow {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 60px;

  padding: 14px 24px;

  margin: 0 0 28px;

  border: 1px solid var(--c-base);

  border-radius: 18px;

  color: var(--c-base);

  font-weight: 700;

  line-height: 1;

  text-transform: uppercase;

  letter-spacing: 0.02em;

}



.wv-portfolio-heading {

  margin: 0;

  color: var(--c-title);

  font-size: var(--fs-xxl);

  font-weight: 700;

  line-height: 0.95;

  letter-spacing: -0.03em;

}



/* ****************RESPONSIVE GLOBAL****************** */

@media screen and (max-width: 1024px) {

  body {

    font-size: 16px;

  }

  .webvibe_primary-button {

    font-size: 16px;

    padding: 10px 30px;

  }

   h1 {

    font-size: var(--fs-xl) !important;

  }

}

@media screen and (max-width: 768px) {

  h1 {

    font-size: var(--fs-lg) !important;

  }

  h2 {

    font-size: var(--fs-md) !important;

  }

  h3 {

    font-size: var(--fs-md) !important;

  }



  .wv-portfolio-eyebrow {

    min-height: auto;

   font-size: 12px;

   margin-bottom: 15px;

   border-radius: 10px;

  }

}

@media screen and (max-width: 640px) {

  .over-text-wrapper {

    font-size: 12px;

  }

  .over-text-wrapper > svg:last-of-type {

    width: 15px;

    height: 15px;

  }



  h3 {

    font-size: var(--fs-sm) !important;

  }

  h4 {

    font-size: var(--fs-sm) !important;

  }

}