@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
  transition: all 0.2s ease;
}

html,
body {
  scroll-behavior: smooth;
  transition: background-color 0.8s ease;
}

body {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--bs-color-bg);
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
}


.hover-transform-cus {
  transition: var(--bs-transition);
}

.hover-transform-cus:hover {
  transform: translateY(-5px) scale(1.05);
}

.hover-shadow-cus {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.hover-shadow-cus:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.border-bottom-cus {
  border-bottom: 2px solid var(--color-border-card-blue);
}

.flash-btn {
  position: relative;
  transition: 0.3s ease;
  overflow: hidden;
}


.flash-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -200%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.5) 50%,
      transparent 100%);
  transform: skewX(-30deg);
  transition: all 0.8s ease;
  z-index: 1;
}

.flash-btn:hover::after {
  left: 200%;
}

.text-shadow-cus {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.base-title {
  font-weight: 700;
  color: var(--color-section-title);
}

.base-text-card {
  color: var(--color-text-card);
}

.dark-dot-bg {
  background-color: var(--dark-primary) !important;
  background-image:
    radial-gradient(circle, var(--primary) 1px, transparent 1px),
    radial-gradient(circle, var(--secondary) 1px, transparent 1px),
    radial-gradient(circle, var(--white) 1px, transparent 1px) !important;
  background-size: 20px 20px, 40px 40px, 60px 60px !important;
  background-position: 0 0, 10px 10px, 30px 30px !important;
}

.grid-gradient-bg {
  background: var(--bs-geometric-bg);
  background-size: var(--bs-geometric-bg-size);
}

.hightlight-input {
  animation: blinking-border 1.5s ease infinite;
}

:root {
  --primary: #1f5ca9;
  --secondary: #00afef;
  --white: #fff;
  --gray: #c4c4c4;

  /* BACKGROUND */
  --bs-gradient-bg: linear-gradient(to right, var(--primary), var(--secondary));
  --bs-color-bg: #f5f5f9;
  --color-bg: var(--primary);
  --color-bg-light: var(--secondary);
  --bs-color-card: var(--white);
  --bs-color-input-bg: var(--white);
  --bs-result-bg: #2a80ff;
  --bs-result-bg-light: #00b8db;
  --bs-result-gradient: linear-gradient(to right, var(--bs-result-bg-light), var(--bs-result-bg));
  --bs-section-hero-bg: #e6f7fb;
  --bs-section-hiw-bg: #caf0f8;
  --bs-section-faq-bg: #F0F4F8;
  --bs-section-cta-bg: radial-gradient(125% 125% at 50% 10%, #fff 40%, var(--secondary) 100%);
  --primary-color-bg: var(--primary);
  --bg-card-after: var(--gray);
  --bs-geometric-bg: linear-gradient(to right, rgba(229, 231, 235, 0.8) 1px, transparent 1px), linear-gradient(to bottom, rgba(229, 231, 235, 0.8) 1px, transparent 1px), radial-gradient(circle 500px at 20% 80%, #1f5da970, transparent), radial-gradient(circle 500px at 80% 20%, #00afef78, transparent);
  --bs-geometric-bg-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%;
  --bg-hightlight-alpha: #00035112;
  --bs-person-avt-bg: #caf0f8;
  --bs-tr-hover-bg: #cccccc4b;

  /* FONT COLOR */
  --color-text: var(--white);
  --color-text-card: #333;
  --color-text-hover: #00b8db;
  --color-section-title: var(--primary);
  --color-success-msg: #8ac926;
  --color-error-msg: #ff595e;
  --color-invalid-msg: #ffca3a;

  /* BORDER */
  --color-border: #3d3d3d38;
  --color-border-section-card: var(--primary);
  --color-border-hover: var(--primary);
  --bs-bor-ras: 8px;
  --color-border-section-card-light: var(--secondary);
  --color-border-card-blue: #3b82f64d;

  /* OTHER */
  --bs-transition: all 0.3s ease;
  --bs-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}

.dark {
  --primary: #1f5ca9;
  --secondary: #00afef;
  --white: #fff;

  --dark-primary: #1E293B;
  --dark-secondary: #334155;
  --dark-tertiary: #475569;

  /* BACKGROUND */
  --bs-gradient-bg: linear-gradient(to right, var(--dark-primary), var(--dark-secondary));
  --bs-color-bg: var(--dark-primary);
  --color-bg: var(--primary);
  --color-bg-light: var(--secondary);
  --bs-color-card: var(--dark-secondary);
  --bs-color-input-bg: var(--dark-tertiary);
  --bs-result-bg: #2a80ff;
  --bs-result-bg-light: #00b8db;
  --bs-section-hero-bg: var(--dark-secondary);
  --bs-result-gradient: linear-gradient(to right, var(--bs-result-bg-light), var(--bs-result-bg));
  --bs-section-hiw-bg: var(--dark-secondary);
  --bs-section-faq-bg: #263245;
  --primary-color-bg: var(--dark-tertiary);
  --bg-card-after: var(--dark-tertiary);
  --bs-geometric-bg: linear-gradient(to right, rgba(71, 85, 105, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(71, 85, 105, 0.3) 1px, transparent 1px), radial-gradient(circle at 50% 50%, #00afef4b 0%, transparent 70%);
  --bs-geometric-bg-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%;
  --bg-hightlight-alpha: #00035112;
  --bs-person-avt-bg: var(--dark-tertiary);
  --bs-tr-hover-bg: #cccccc1f;

  /* FONT COLOR */
  --color-text: #f6f6f6;
  --color-text-card: var(--white);
  --color-text-hover: #00b8db;
  --color-section-title: var(--secondary);
  --color-success-msg: #8ac926;
  --color-error-msg: #ff595e;
  --color-invalid-msg: #ffca3a;

  /* BORDER */
  --color-border: #64748B;
  --color-border-section-card: var(--dark-tertiary);
  --color-border-hover: #60A5FA;
  --bs-bor-ras: 8px;
  --color-border-section-card-light: var(--dark-tertiary);
  --color-border-card-blue: #3b82f64d;

  /* OTHER */
  --bs-transition: all 0.3s ease;
  --bs-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}


/* ==== ANIMATION ==== */
.fadeIn {
  animation: fade-in 1s ease forwards;
}

.fade {
  animation: fade 1.5s ease forwards;
}

.pulse {
  animation: pulse 1.5s both infinite alternate;
}

.floating {
  animation: floating 2.5s ease-in-out infinite alternate;
}

@keyframes floating {
  from {
    transform: translateY(-10px);
  }

  to {
    transform: translateY(10px);
  }
}

@keyframes pulse {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.05);
  }

}

@keyframes fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes moveleft {
  100% {
    transform: translateX(0);
  }
}

@keyframes anim {
  100% {
    width: 0;
  }
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }

}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-200px) scale(0);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes blinking-border {
  0% {
    border-color: var(--color-border);
  }

  50% {
    border-color: var(--color-invalid-msg);
  }

  100% {
    border-color: var(--color-border);
  }
}