/* ================================
   GLOBAL THEME VARIABLES
================================ */
:root {
  /* Font */
  --font: "Roboto", sans-serif;
  /* LIGHT THEME COLORS */
  --color-primary: #004AAD;
  --color-dark: #000000;
  --color-gray: #959595;
  --color-light: #FFFFFF;

  /* textcolor  */
  --color-white: black;
  /* Global UI tokens */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 22px;

  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;

  --shadow-soft: 0px 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-hard: 0px 6px 35px rgba(0, 0, 0, 0.15);

  /* Animation Tokens */
  --animate-slow: 1.5s;
  --animate-medium: 1s;
  --animate-fast: 0.5s;
}

/* ================================
   DARK MODE THEME VARIABLES
================================ */
.dark {
  --color-primary: #004AAD;
  --color-dark: #FFFFFF;
  --color-light: #111827;
  --color-gray: #3A3A3A;
  --color-white: white;

}

/* ================================
   GLOBAL FONT APPLY
================================ */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li {
  font-family: var(--font);
}


.mobile-dd-item {
  @apply text-base text-dark dark:text-white hover:text-primary py-1;
}

/* Desktop Scrollbar - Light Mode */
body::-webkit-scrollbar {
  width: 6px;
}

body::-webkit-scrollbar-track {
  background: #f0f0f0;
}

body::-webkit-scrollbar-thumb {
  background-color: #a0a0a0;
  border-radius: 0px;
  border: 1px solid #f0f0f0;
  /* padding effect */
}

/* Desktop Scrollbar - Dark Mode */
body.dark::-webkit-scrollbar-track {
  background: #1f1f1f;
}

body.dark::-webkit-scrollbar-thumb {
  background-color: #555555;
  border: 3px solid #1f1f1f;
}

/* Optional: Hover effect */
body::-webkit-scrollbar-thumb:hover {
  background-color: #888;
}

body.dark::-webkit-scrollbar-thumb:hover {
  background-color: #777;
}

input,
textarea {
  outline: none !important;
  /* border: none !important; */
}


.challenge-card {
  @apply bg-white/10 p-8 rounded-2xl border border-white/20 text-center text-lg font-semibold backdrop-blur transition-all hover:bg-white/20 hover:shadow-xl;
}

.form-input {
  @apply px-6 py-5 rounded-xl bg-white/20 border border-white/30 text-white focus:border-white focus:outline-none placeholder-gray-300;
}



/* From Uiverse.io by alexruix */
.card {
  /* width: 190px; */
  /* height: 254px; */
  border-radius: 20px;
  background: #f5f5f5;
  position: relative;
  padding: 1.8rem;
  border: 2px solid #c3c6ce;
  transition: 0.5s ease-out;
  overflow: visible;
}

.card-details {
  color: black;
  height: 100%;
  gap: .5em;
  display: grid;
  place-content: center;
}

.card-button {
  transform: translate(-50%, 125%);
  width: 60%;
  border-radius: 1rem;
  border: none;
  background-color: #004AAD;
  color: #fff;
  font-size: 1rem;
  padding: .5rem 1rem;
  position: absolute;
  left: 50%;
  bottom: 0;
  opacity: 0;
  transition: 0.3s ease-out;
}

.text-body {
  color: rgb(134, 134, 134);
}

/*Text*/
.text-title {
  font-size: 1.5em;
  font-weight: bold;
}

/*Hover*/
.card:hover {
  border-color: #004AAD;
  box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
}

.card:hover .card-button {
  transform: translate(-50%, 50%);
  opacity: 1;
}



.animated-fill {
  background: linear-gradient(90deg, white 0%, white 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  color: transparent;
  animation: fillMove 3.5s linear infinite;
}

@keyframes fillMove {
  0% {
    background-position: 100% 0;
  }

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

/* Dark mode white fill also visible */
.dark .animated-fill {
  color: white;
  background: linear-gradient(90deg, #000B18 0%, #000B18 50%, transparent 50%);
  background-size: 200% 100%;
}



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

  100% {
    transform: translateX(300%);
  }
}





/* form  contact */


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

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

.animate-fade-in {
  animation: fade-in 0.6s ease-out;
}


.perspective-1000 {
  perspective: 1000px;
}

/* Fix AOS overflow on mobile & desktop */
.overflow-fix {
  overflow-x: hidden !important;
}



/* About section hero  */
@keyframes spin-slow {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}






/* From Uiverse.io by Nawsome */
.pl {
  width: 6em;
  height: 6em;
}

.pl__ring {
  animation: ringA 2s linear infinite;
}

.pl__ring--a {
  stroke: #f42f25;
}

.pl__ring--b {
  animation-name: ringB;
  stroke: #f49725;
}

.pl__ring--c {
  animation-name: ringC;
  stroke: #255ff4;
}

.pl__ring--d {
  animation-name: ringD;
  stroke: #f42582;
}

/* Animations */
@keyframes ringA {

  from,
  4% {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -330;
  }

  12% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -335;
  }

  32% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -595;
  }

  40%,
  54% {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -660;
  }

  62% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -665;
  }

  82% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -925;
  }

  90%,
  to {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -990;
  }
}

@keyframes ringB {

  from,
  12% {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -110;
  }

  20% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -115;
  }

  40% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -195;
  }

  48%,
  62% {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }

  70% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }

  90% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -305;
  }

  98%,
  to {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -330;
  }
}

@keyframes ringC {
  from {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: 0;
  }

  8% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -5;
  }

  28% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -175;
  }

  36%,
  58% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }

  66% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }

  86% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -395;
  }

  94%,
  to {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -440;
  }
}

@keyframes ringD {

  from,
  8% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: 0;
  }

  16% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -5;
  }

  36% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -175;
  }

  44%,
  50% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }

  58% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }

  78% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -395;
  }

  86%,
  to {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -440;
  }
}


@keyframes light-sweep {
  0% {
    background-position: 0% 50%;
  }

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

.animate-light-sweep {
  animation: light-sweep 8s linear infinite;
}



/* 1. Input field ko proper Full Width karne ke liye */
.iti {
  width: 100% !important;
  display: block !important;
}

/* 2. Dropdown List - Z-INDEX AUR SCROLL FIX */
.iti__dropdown-content {
  z-index: 999999 !important;
  /* Dropdown ko sabse upar laane ke liye */
}

.iti__country-list {
  background-color: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0.75rem !important;
  max-height: 250px !important;
  /* 250px ke baad scroll shuru ho jayega */
  overflow-y: auto !important;
  /* Scrollbar on kar diya */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9) !important;
}

/* 3. Items Alignment */
.iti__country {
  display: flex !important;
  align-items: center !important;
  padding: 10px 15px !important;
  font-size: 14px !important;
}

/* Flag aur text ke beech space */
.iti__flag-box {
  margin-right: 12px !important;
}

/* Country Name - Clear White me dikhane ke liye (Search easy ho jayega) */
.iti__country-name {
  color: #ffffff !important;
  flex-grow: 1 !important;
  text-align: left !important;
  display: block !important;
  /* Isko wapas show kar diya */
}

/* Dial Code - Right side align */
.iti__dial-code {
  color: #94a3b8 !important;
  margin-left: auto !important;
  font-weight: 600 !important;
}

/* Selected code (Form input box ke andar ka text) */
.iti__selected-dial-code {
  color: white !important;
  font-weight: 600 !important;
  margin-left: 6px !important;
}

/* Hover effect */
.iti__country-list .iti__country:hover,
.iti__country-list .iti__country.iti__highlight {
  background-color: #004aad !important;
  /* Aapka blue theme */
}

/* Search Box Fix */
.iti__search-input {
  /* background-color: #334155 !important; */
  /* Dark Slate background */
  color: #334155 !important;
  /* Text white */
  padding: 10px !important;
  margin: 10px !important;
  width: calc(100% - 20px) !important;
}

/* Placeholder ka color thoda light rakhein taaki dikhe */
.iti__search-input::placeholder {
  color: #94a3b8 !important;
}

/* Jab search box par click karein to border highlight ho */
.iti__search-input:focus {
  border-color: #004aad !important;
  /* Aapka primary blue color */
  outline: none !important;
}


/* 100% Seamless Wave Animation using Background Position */
.footer-wave-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  /* Thodi height adjust ki hai better look ke liye */
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.footer-wave {
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 100%;
  height: 100%;
  /* Perfect Mathematical Sine Wave 1 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100'%3E%3Cpath fill='%23004aad' fill-opacity='0.25' d='M0,50 Q250,100 500,50 T1000,50 L1000,100 L0,100 Z'/%3E%3C/svg%3E");
  background-size: 1000px 100%;
  /* Fixed width for perfect looping */
  animation: wave-animation 15s linear infinite;
}

.footer-wave-2 {
  /* Perfect Mathematical Sine Wave 2 (Opposite direction curve) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100'%3E%3Cpath fill='%23004aad' fill-opacity='0.4' d='M0,50 Q250,0 500,50 T1000,50 L1000,100 L0,100 Z'/%3E%3C/svg%3E");
  animation: wave-animation 10s linear infinite;
}

/* Sliding background position instead of moving the whole div */
@keyframes wave-animation {
  0% {
    background-position-x: 0;
  }

  100% {
    background-position-x: -1000px;
  }
}