/* Import CSS reset and base styles */
@import "global.css";
@import "header.css";
@import "intersection-anim.css";
@import "home.css";
@import "dynamic-testimonial.css";
@import "competencies-anim.css";
@import "service-card.css";
@import "product-card.css";
@import "pipeline-icons.css";
@import "case-study-card.css";
@import "footer.css";
@import "post.css";
@import "review-card.css";
@import "page.css";
@import "faq.css";
@import "hire-us.css";

:root {
  --bg-primary: #E1F7F7;
  --bg-secondary: #ffffff;
  --bg-button: #d44d3b;
  --bg-head-foot: #1B1E2D;

  --ff-note: "Roboto", sans-serif;
  --ff-body: "Open Sans", sans-serif;
  --ff-heading: "Montserrat", sans-serif;
  --ff-quote: 'Nunito', sans-serif;

  --fc-black: #000;
  --fc-white: #fff;
  --fc-gray: #2d2d2d;

  --fs-title-page: 2.5rem;
  --fs-title-post: 2rem;
  --fs-title-section: 1.875rem;
  --fs-note-section: 1.125rem;

  --ls-title-page: 3.03rem;
  --lh-title-post: 2.6875rem;
  --lh-title-section: 2.4375rem;
  --lh-note-section: 1.625rem;

  --easing-authentic-motion: cubic-bezier(0.4, 0, 0.2, 1);
}

/* :::::: button :::::: */
.btn-primary {
  background-color: var(--bg-button);
  border-radius: 10px;
  color: var(--fc-white);
  font-weight: 600;
  font-family: var(--ff-body);
  line-height: 1.5;
}

/* :::::: title :::::: */
.title {
  font-weight: 700;
  font-family: var(--ff-heading);
}

.title-section {
  font-size: var(--fs-title-section);
  line-height: var(--lh-title-section);
}

.title-page {
  font-size: var(--fs-title-page);
  line-height: var(--ls-title-page);
}

.title-post {
  font-size: var(--fs-title-post);
  line-height: var(--lh-title-post);
}

.note {
  font-weight: 400;
  font-family: var(--ff-body);
}

.note-roboto {
  font-family: var(--ff-note);
}

.note-section{
  font-size: var(--fs-note-section);
  line-height: var(--lh-note-section);
}

@media screen and (min-width: 744px) {
  :root {
    --fs-title-page: 3.4375rem;
    --fs-title-post: 2.25rem;
    --fs-title-section: 2.5rem;
    --fs-note-section: 1.125rem;

    --ls-title-page: 4.1875rem;
    --lh-title-post:3.0625rem;
    --lh-title-section: 3.0475rem;
    --lh-note-section: 1.83875rem;
  }
  
  /* .title-section {
    font-size: 2.5rem;
    line-height: 3.0475rem;
  } */

  /* .note-section{
    font-size: 1.125rem;
    line-height: 1.83875rem;
  } */
  /* .title-page {
    font-size: 3.4375rem;
    line-height: 4.1875rem;
  } */
}

@media screen and (min-width: 1200px) {
  /* .title-section {
    font-size: 2.5rem;
    line-height: 3.0475rem;
  } */

  /* .note-section{
    font-size: 1.125rem;
    line-height: 1.83875rem;
  } */

  /* .title-page {
    font-size: 3.4375rem;
    line-height: 4.1875rem;
  } */
}

/* :::::: utility classes :::::: */
.btn-primary, .hover-up {
  transform: translate(0, 0);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover, .hover-up:hover {
  transform: translate(0, -4px);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.hover-up-slow {
  transform: translate(0, 0);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-up-slow:hover {
  transform: translate(0, -4px);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.hover-zoom, .hover-zoom-lite {
  transform: scale(1);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-zoom:hover {
  transform: scale(1.2);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-zoom-lite:hover {
  transform: scale(1.04);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-inset {
  clip-path: inset(10px);
  /* clip-path: inset(0px); */
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-inset:hover {
  clip-path: inset(0px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.text-center {
  text-align: center;
}

.is-hidden {
  display: none;
}

.cta-button {
  cursor: pointer;
}

.flex-box {
  display: flex;
}

.prevent-scroll {
  height: 100vh;
  overflow: hidden;
}

.width-min {
  width: min-content;
}

.width-full {
  width: 100%;
}

.z-bottom {
  z-index: -1;
}
.z-level {
  z-index: 0;
}

/* :::::: test classes :::::: */