@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* Importing fonts */
@font-face {
  font-display: swap;
  font-family: Sharp Sans;
  src: url(../fonts/SharpSans-regular.otf);
  font-weight: 400;
}

@font-face {
  font-display: swap;
  font-family: Sharp Sans;
  src: url(../fonts/SharpSans-med.otf);
  font-weight: 500;
}

@font-face {
  font-display: swap;
  font-family: Sharp Sans;
  src: url(../fonts/SharpSans-semibold.otf);
  font-weight: 600;
}

@font-face {
  font-display: swap;
  font-family: Sharp Sans;
  src: url(../fonts/SharpSans-Bold.otf);
  font-weight: 700;
}

/* Root Variables */
:root {
  /* Color */
  --primary: #6e6fff;
  --primary-dark: #6050dc;
  --secondary: #07c082;
  --gray: #4c516d;
  --gray-light: #fafbfc;
  --dark: #121948;
  /* Font Size */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
}

/* Creating Classes */
/* Background */
.bg-primary {
  background-color: var(--primary);
}
.bg-primary-dark {
  background-color: var(--primary-dark);
}
.bg-secondary {
  background-color: var(--secondary);
}
.bg-gray {
  background-color: var(--gray);
}
.bg-gray-light {
  background-color: var(--gray-light);
}
.bg-dark {
  background-color: var(--dark);
}
/* Color */
.text-primary {
  color: var(--primary);
}
.text-primary-dark {
  color: var(--primary-dark);
}
.text-secondary {
  color: var(--secondary);
}
.text-gray {
  color: var(--gray);
}
.text-gray-light {
  color: var(--gray-light);
}
.text-dark {
  color: var(--dark);
}
/* Min Width */
.min-w-64 {
  min-width: 16rem;
}
.min-w-72 {
  min-width: 18rem;
}
.min-w-80 {
  min-width: 20rem;
}
.min-w-96 {
  min-width: 24rem;
}

/* ******************* */
/* Custom CSS */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  background: var(--gray-light);
  color: var(--gray);
  font-family: "Poppins", sans-serif;
}

/* Container */
.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media screen and (min-width: 640px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media screen and (min-width: 1024px) {
  .container {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
@media screen and (min-width: 1280px) {
  .container {
    padding-left: 7rem;
    padding-right: 7rem;
  }
}
@media screen and (min-width: 1536px) {
  .container {
    padding-left: 10rem;
    padding-right: 10rem;
  }
}

/* Typography */
h1,
.dispaly-1 {
  font-size: var(--text-5xl);
  line-height: 1.15;
  font-weight: bold;
  color: var(--dark);
  font-family: "Sharp Sans", sans-serif;
}
h2,
.display-2 {
  font-size: var(--text-4xl);
  line-height: 1.15;
  font-weight: bold;
  color: var(--dark);
  font-family: "Sharp Sans", sans-serif;
}
h3,
.display-3 {
  font-size: var(--text-3xl);
  line-height: 1.5;
  font-weight: bold;
  color: var(--dark);
  font-family: "Poppins", sans-serif;
}
h4,
.display-4 {
  font-size: var(--text-2xl);
  line-height: 1.5;
  font-weight: bold;
  color: var(--dark);
  font-family: "Poppins", sans-serif;
}
h5,
.display-5 {
  font-size: var(--text-base);
  line-height: 1.5;
  font-weight: bold;
  color: var(--dark);
  font-family: "Poppins", sans-serif;
}
h6,
.display-6 {
  font-size: var(--text-sm);
  line-height: 1.5;
  font-weight: 600;
  color: var(--dark);
  font-family: "Poppins", sans-serif;
}
.caption {
  font-size: var(--text-base);
  line-height: 1.25;
  font-weight: normal;
  opacity: 0.8;
  font-family: "Poppins", sans-serif;
}
.caption-bold {
  font-size: var(--text-lg);
  line-height: 1.375;
  font-weight: bold;
  opacity: 0.8;
  font-family: "Poppins", sans-serif;
}
.link {
  font-size: var(--text-sm);
  line-height: 1.375;
  font-weight: 600;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
}
p,
.paragraph {
  font-size: var(--text-sm);
  line-height: 1.5;
  font-weight: normal;
  margin: 0;
  font-family: "Poppins", sans-serif;
}
@media screen and (min-width: 768px) {
  h1,
  .dispaly-1 {
    font-size: var(--text-6xl);
  }
  h2,
  .display-2 {
    font-size: var(--text-5xl);
  }
  h3,
  .display-3 {
    font-size: var(--text-4xl);
  }
  h4,
  .display-4,
  .caption-bold,
  .link {
    font-size: var(--text-3xl);
  }
  h5,
  .display-5,
  .caption {
    font-size: var(--text-lg);
  }
  h6,
  .display-6,
  .paragraph {
    font-size: var(--text-base);
  }
}

/* Navbar */
.nav-link {
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1rem;
  cursor: pointer;
  color: var(--gray);
  transition: all 0.3s;
  font-family: "Poppins", sans-serif;
}
.nav-link:hover,
.nav-link:focus {
  color: var(--secondary);
}
.nav-link a:focus {
  color: var(--secondary);
  outline: none;
}
.active-nav-link {
  color: var(--secondary);
}

/* Buttons */
.btn-primary {
  background-color: var(--primary);
  font-size: var(--text-base);
  font-weight: 600;
  color: white;
  border-radius: 6px;
  padding: 12px 24px;
  min-width: max-content;
  transition: all 0.5s;
  font-family: "Poppins", sans-serif;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--primary-dark);
  transform: translateY(-6px);
}
.btn-secondary {
  background-color: white;
  font-size: var(--text-base);
  font-weight: 600;
  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  border-radius: 6px;
  padding: 12px 24px;
  min-width: max-content;
  transition: all 0.5s;
  font-family: "Poppins", sans-serif;
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--gray-light);
  transform: translateY(-6px);
}

.btn-primary-link {
  position: relative;
  color: var(--primary);
  background: transparent;
  display: flex;
  align-items: center;
  min-width: max-content;
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: 600;
  transition: all 0.5s;
  font-family: "Poppins", sans-serif;
}
.btn-primary-link:hover,
.btn-primary-link:focus {
  color: var(--secondary);
}
.btn-primary-link:hover svg,
.btn-primary-link:focus svg {
  color: var(--secondary);
  transform: translate(4px, -4px);
}
.btn-dark-link {
  color: black;
  background: transparent;
  min-width: max-content;
  transition: all 0.5s;
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
}
.btn-primary:focus,
.btn-secondary:focus,
.btn-primary-link:focus,
.btn-dark-link:focus,
a:focus {
  outline: none;
}

/* Styling */
.subheading {
  position: relative;
  width: fit-content;
  margin: auto;
}
/* .subheading::after {
  content: "";
  position: absolute;
  bottom: -25%;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 4px;
  background: red;
} */

.active-tab {
  border-left: 4px var(--primary) solid;
  transform: translateY(-10px);
}
.active-tab-text {
  color: var(--primary);
}

.associated-client-heading::before,
.associated-client-heading::after {
  content: "";
  height: 0.5px;
  display: block;
  position: absolute;
  background: var(--gray);
  top: 50%;
  width: 50%;
  opacity: 0.1;
}
.associated-client-heading::before {
  left: 0;
  transform: translateX(-25%);
}
.associated-client-heading::after {
  right: 0;
  transform: translateX(25%);
}
.associated-client-footer::before,
.associated-client-footer::after {
  content: "";
  height: 0.5px;
  display: block;
  position: absolute;
  background: var(--gray);
  top: 50%;
  width: 33.33%;
  opacity: 0.1;
}
.associated-client-footer::before {
  right: 53%;
  transform: translateX(-16%);
}
.associated-client-footer::after {
  left: 53%;
  transform: translateX(16%);
}
/* Subtitle */
.subtitle-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  color: var(--secondary);
  font-size: var(--text-base);
  line-height: 1.25;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.subtitle-line {
  min-height: 2px;
  width: 40px;
  margin-right: 16px;
  background: var(--secondary);
}
/* Subheader */
.subheader-bar {
  width: 33.33%;
  height: 4px;
  background: var(--secondary);
  border-radius: 9999px;
  position: relative;
}
.subheader-bar::before {
  content: "";
  position: absolute;
  height: 4px;
  background: var(--primary);
  top: 0;
  right: -32px;
  border-radius: 9999px;
}
.subheader-bar::after {
  content: "";
  position: absolute;
  height: 4px;
  background: var(--primary);
  top: 0;
  right: -56px;
  border-radius: 9999px;
}
/* Pug and Play */
.pug-play-link {
  transition: all 0.3s;
}
.pug-play-link .display-3,
.pug-play-link .pug-title {
  color: rgba(107, 114, 128, 1);
}
.pug-play-link:hover .display-3,
.pug-play-link:hover .pug-title {
  color: rgba(31, 41, 55, 1);
}
:is(.pug-play-link, .active-pug-play-link) .pug-title {
  font-size: var(--text-xl);
  font-weight: 600;
}
.active-pug-play-link :is(.pug-index, .pug-title) {
  color: var(--dark);
  transition: all 0.3s;
}
.active-pug-play-link:hover :is(.pug-index, .pug-title) {
  color: var(--dark);
}
.active-pug-play-link::before {
  content: "";
  width: 4.5px;
  height: 100%;
  border-radius: 15px;
  background: var(--primary);
}
/* Footer */
.footer-link:hover,
.footer-icon:hover {
  color: var(--secondary);
}
/* Features */
.features:hover .features-hidden {
  display: block;
}
.features:hover .features-shown {
  display: none;
}