@import "../css/colors-size.css";
@import "../css/config.css";
@import "../css/bubble-animation.css";
@import "../css/amoeba-animation.css";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: all 0.3s ease-in-out;
  scroll-behavior: smooth;
}

body, button, input, select, textarea, table td > a {
	font-family: var(--sans-font) !important;
  font-weight: 500;
  color: var(--gray-900);
  background-color: var(--gray-100);
}

h1, h2, h3, h4, h5, h6, th {
  font-family: var(--fraunces-font) !important;
}

h1, h2 {
  font-weight: 500;
}

.button {
    text-decoration: none;
    color: #fff;
    padding: var(--size-2) var(--size-4);
    border-radius: var(--size-5);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    white-space: nowrap;
}

.button span {
  position: relative;
  z-index: 2;
}

.button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 1;
  opacity: 0.5;

  /* initial clipped state */
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.8s ease;
  mix-blend-mode: soft-light;
}

/* hover effect */
.button:hover::before {
  clip-path: circle(150% at 50% 50%);
}

.button:hover {
  color: #fff;
  opacity: 0.9;
  transform: scale(1.03);
}

.content-margin {
    margin-left: var(--size-3);
    margin-right: var(--size-3);
}

.box-shadow {
    box-shadow: 0px 2px 15px rgba(var(--black-rgb),0.05);
}

.gradient-text {
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}

.card {
    background-color: var(--gray-100);
    border: 1px solid rgba(var(--black-rgb),.125);
}

.card .card-body {
    padding: var(--size-6) var(--size-4);
}

/* Form */
.form-control {
    padding: var(--size-3) var(--size-3);
    color: var(--gray-800);
    background-color: var(--gray-200);
    border: 1px solid var(--gray-100);
    border-radius: var(--size-1);
}

.form-control:focus {
    color: var(--gray-900);
    background-color: var(--gray-100);
    border-color: var(--primary);
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(var(--primary-rgb), .25);
}

form .button {
    padding: calc(var(--size-2) + 2px) var(--size-6);
    border-radius: var(--size-1);
    border: none;
}

input:-internal-autofill-selected {
    background-color: var(--gray-100) !important;
    color: var(--gray-900) !important;
}

.number-input {
  letter-spacing: 0.3rem;
  font-size: 1.2rem;
  text-align: center;
}

/* Change autofill background to white */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover, 
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--gray-200) inset !important;
    box-shadow: 0 0 0 1000px var(--gray-200) inset !important;
    -webkit-text-fill-color: var(--gray-900) !important;
}


/* Sections */
header {
    padding-top: var(--size-4);
    padding-bottom: var(--size-4);
}

.section, section, footer {
    padding-top: var(--size-8);
    padding-bottom: var(--size-8);
}

/* Nav */

.navigation .desktop-menu {
  display: none;
}

.navigation .mobile-menu {
  display: flex;
}

.navigation {
    background-color: rgba(var(--white-rgb), 43%);
    padding: var(--size-2) var(--size-6) var(--size-2) var(--size-3);
    border-radius: var(--size-6);
    width: 100%;
}

.navigation .logo-container img {
    width: 45px;
}

.navigation .logo-container h2 span{
    font-size: 0.5em;
}

.navigation .circle {
    top: -271px;
    left: -347px;
}

.navigation .main-menu a:hover,
.mega-menu a:hover {
  font-weight: 600;
}

.navigation .main-menu {
    display: flex;
    gap: var(--size-3);
    margin: 0;
}

.navigation .main-menu li {
  display: block;
}

.navigation .main-menu li a {
  text-decoration: none;
  color: var(--gray-900);
}

.sticky-nav {
    position: fixed;
    top: 0;
    width: 100vw;
    left: 0;
    z-index: 1000;
    padding-left: var(--size-3);
    padding-right: var(--size-3);
    background-color: rgba(var(--white-rgb), 95%);
    padding-top: var(--size-2);
}

.sticky-nav .navigation {
    background-color: transparent;
    padding: var(--size-1) 0 var(--size-1) 0;
    border-radius: 0;
    border: none !important;
    box-shadow: none !important;
}

.sticky-nav .navigation .circle-1 {
  display: none;
}

.sticky-nav + div.spacer {
  height: calc(var(--size-3) + var(--size-3) + var(--size-4) + var(--size-5));
}

.sticky-nav .logo-container img {
    width: 35px;
}

.sticky-nav .logo-container h3 {
    font-size: 1em;
}

.sticky-nav .logo-container small {
    font-size: 0.8em !important;
}

.sticky-nav .navigation {
    padding-right: calc(1.5rem * .5);
    padding-left: calc(1.5rem * .5);
}

/* Mega menu */

.mega-menu {
    top: 82px;
}
.menu-seperator {
  width:100%;
  height: 40px;
}

.sticky-nav .mega-menu {
    top: 77px;
}

.sticky-nav .mega-menu {
    top: 32px;
}

.mega-menu .mega-menu-container {
  border-radius: var(--size-4);
  padding: var(--size-6);
}

.mega-menu .mega-menu-container .feature ul {
  margin: 0;
  padding: 0;
}

.mega-menu .mega-menu-container .feature ul li {
  display: block;
}

.mega-menu .mega-menu-container .feature ul li a {
  text-decoration: none;
  color: var(--gray-800);
}

/* Mobile Menu */
.mobile-menu .mobile-menu-btn {
    padding-top: 6px;
    cursor: pointer;
}

.mobile-menu .mobile-menu-btn span {
    display: block;
    background-color: var(--gray-900);
    height: 1.5px;
    margin-bottom: 6px;
    border-radius: 1px;
    position: relative;
}

.mobile-menu .mobile-menu-btn span:nth-child(1) {
    width: 13px;
    left: 10px;
}

.mobile-menu .mobile-menu-btn span:nth-child(2) {
  width: 24px;
}

.mobile-menu .mobile-menu-btn span:nth-child(3) {
    width: 12px;
    left: 5px;
}

.mobile-menu-panel .backdrop {
    left: 0;
    top: 0;
    opacity: 0.3;
}

.mobile-menu-panel .panel {
    right: 0;
    top: 0;
    width: 90vw;
    padding-top: var(--size-8);
    padding-left: var(--size-4);
    padding-right: var(--size-4);
    padding-bottom: var(--size-6);
}

.mobile-menu-panel .close-btn {
    cursor: pointer;
    top: var(--size-6);
    right: var(--size-6);
    border-bottom: 1px solid var(--gray-700);
}

.mobile-menu-panel .panel ul {
  padding-left: 0;
}

.mobile-menu-panel .panel ul.submenu, .mobile-menu-panel .panel ul.sub-submenu {
  padding-left: var(--size-4);
}

.mobile-menu-panel .panel li {
  display: block;
}

.mobile-menu-panel .panel li a {
  text-decoration: none;
  color: var(--gray-900);
  display: block;
  padding: var(--size-2) 0;
}

/* Hero */
.main-wrapper .hero {
  min-height: 98vh;
  width: 100%;
  background-image: url('images/snow-mountain.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-bottom: 0;
}

.main-wrapper .page-hero {
  height: 200px;
  width: 100%;
  background-image: url('images/snow-mountain.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-bottom: 0;
}

.hero-text {
    width: 85%;
    max-width: 746px;
    margin-top: var(--size-8);
}

.attention-grabber {
    display: flex;
    justify-content: center;
    height: calc(100vh - 114px);
}

.attention-grabber .bubble {
    background-color: rgba(var(--white-rgb), 70%);
    border-radius: var(--size-3);
    padding: var(--size-1) var(--size-3);
    white-space: nowrap;
    translate: 50% 0;
    opacity: 0;
    top: 306px;
    transform: scale(0);
    right: 50%;
}

/* Features */

.home-feature-tab {
  padding-top: var(--size-7);
}

.home-feature-tab img {
  width: 50px;
  margin-bottom: var(--size-3);
}

.home-feature-tab .item a {
  text-decoration: none;
  color: var(--gray-900);
  padding-top: var(--size-6);
  padding-bottom: var(--size-6);
}

.home-feature-tab div a:hover {
    background: var(--gray-300);
}

/* Why SaaS */
.why-saas-section .item {
  padding-top: var(--size-3);
  padding-bottom: var(--size-3);
}

.why-saas-section .item img {
    width: 71px;
}

/* Footer */

footer ul {
  padding: 0;
}

footer ul li {
  display: block;
  margin-bottom: var(--size-2);
}

footer ul li a {
  color: var(--gray-100);
  text-decoration: none;
}

footer ul li a:hover {
  color: var(--gold-400);
  font-weight: 600;
}

/* Contact */
.contact a {
    text-decoration: none;
    color: var(--gray-100);
    padding: var(--size-2) var(--size-4);
    display: flex;
    gap: 16px;
    align-items: center;
    transition: all 0.3s ease-in-out;
}

.mobile-menu-panel .contact a {
    color: var(--gray-900);
}

.contact a:hover span {
    transform: rotate(-10deg);
    background-color: var(--primary-500);
}

.contact a span {
    width: var(--size-6);
    height: var(--size-6);
    background-color: var(--gray-800);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-100);
}

/* Captcha */
.grecaptcha-badge { 
    visibility: hidden !important; 
}

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

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .content-margin {
      margin-left: var(--size-6);
      margin-right: var(--size-6);
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  :root {
    --size-1: 4px;
    --size-2: 8px;
    --size-3: 16px;
    --size-4: 24px;
    --size-5: 32px;
    --size-6: 48px;
    --size-7: 64px;
    --size-8: 128px;
    --size-9: 256px;
    --radius-1: 512px;
    --radius-2: 1024px;
    --radius-3: 1536px;
    --radius-4: 2048px;
    --radius-5: 2560px;
    --radius-6: 3072px;
  }
  .content-margin {
      margin-left: var(--size-7);
      margin-right: var(--size-7);
  }

  .navigation .desktop-menu {
    display: flex;
  }

  .navigation .mobile-menu {
    display: none;
  }

  .navigation .logo-container img {
      height: 51px;
  }

  .sticky-nav {
      padding-left: var(--size-7);
      padding-right: var(--size-7);
  }

  
  .navigation .logo-container img {
      width: 54px;
  }

  .navigation .circle {
      top: -328px;
      left: -300px;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .content-margin {
      margin-left: var(--size-8);
      margin-right: var(--size-8);
  }
  .sticky-nav {
      padding-left: var(--size-8);
      padding-right: var(--size-8);
  }
}

@media(prefers-color-scheme: dark) {
  .main-wrapper .hero,
  .main-wrapper .page-hero {
    background-image: url('images/snow-mountain-dark.jpg');
  }
}