* {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  box-sizing: border-box;
}

.url-icon {
  border-radius: 50%;
}

@font-face {
  font-family: "myfont";
  src: url("Poppins/Poppins-Light.ttf"),
    url("Poppins/") format("tff");
  /* font-weight: lighter; */
  font-style: normal;
}

body {
  background-color: var(--background);
  color: var(--text);
  transition: 1000ms;
  font-family: var(--ff);
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  position: relative;
}

img, video, svg {
  max-width: 100%;
  height: auto;
}

:root {
  /* Midnight Pro Palette */
  --text: #f3f4f6;            /* Crisp White */
  --text-muted: #9ca3af;      /* Muted Gray */
  --background: #020617;      /* Deep Midnight */
  --primary: #3b82f6;         /* Electric Blue */
  --secondary: #1e293b;       /* Dark Slate - used for borders/cards */
  --accent: #8b5cf6;          /* Violet Accent */
  
  /* Glassmorphism */
  --glass-bg: rgba(30, 41, 59, 0.4);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-blur: 12px;

  --tran-bg: var(--glass-bg); /* Keeping for compatibility */

  --ff-heading: "Outfit", sans-serif;
  --ff-body: "Inter", sans-serif;
  --ff: var(--ff-body);
}

.darkmode {
  background-color: white;
  color: black;
  transition: 1000ms;
}

/* loader */
.loading-ctn {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100vh;
  width: 100%;
  backdrop-filter: blur(45px);
  background-color: var(--background);
  color: var(--primary);
  z-index: 1000;
  font-size: 50px;
  text-align: center;
  align-content: center;
  scrollbar-width: none;
  font-style: italic;
  font-weight: light;
  transition: 500ms;
  font-family: var(--ff);
}

.load-text::after {
  animation: loader 3000ms linear infinite;
  content: " |";
}

@keyframes loader {
  0% { content: "O |"; }
  10% { content: "Ol |"; }
  20% { content: "Oli |"; }
  30% { content: "Oliv |"; }
  40% { content: "Olive |"; }
  50% { content: "Oliver |"; }
  60% { content: "Olivera |"; }
  70% { content: "Oliverat |"; }
  80% { content: "Oliverate |"; }
  90% { content: "Oliverated |"; }
  100% { content: "Oliverated|"; }
}

.loading-ctn.clear {
  scale: 0;
  border-radius: 40%;
  height: 0vh;
  width: 0%;
}


body {
  background-color: var(--background);
  color: var(--text);
  font-family: var(--ff);
  background-image: 
    radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.15) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.15) 0px, transparent 50%);
  background-attachment: fixed;
}

.special{
  color: var(--primary);
  font-style: normal;
  font-weight: bold;
}


li,
a {
  list-style: none;
  text-decoration: none;
}
button {
  cursor: pointer;
}

/* nav bar */
.cover-bg {
  background-color: transparent;
  position: fixed;
  display: none;
}

header {
  margin: auto;
  justify-content: center;
  width: 90%;
}

header nav.match {
  /* box-shadow: 0 0 10px 0 var(--primary); */
  background-color: var(--secondary);
  align-items: center;
}

header .harm {
  display: none;
}

.cancel {
  display: none;
}

nav {
  background-color: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  position: fixed;
  top: 3vh;
  width: 90%;
  height: 10vh;
  align-content: center;
  z-index: 100;
  border-radius: 50px; /* More rounded for modern look */
  margin: auto;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

nav .logo a {
  font-size: 24px;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.5px;
  font-family: var(--ff);
  text-transform: uppercase;
}

nav .logo span {
  font-size: 14px;
  font-style: normal;
  color: var(--text-muted);
  text-transform: lowercase;
}

nav .menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  margin: auto;
}

.nav-list {
  display: flex;
  gap: 40px;
}

.nav-list a {
  color: var(--text-muted);
  font-size: 16px;
  transition: 300ms;
  position: relative;
  font-style: normal;
  font-weight: 500;
}

.nav-list a:hover {
  color: var(--primary);
}

.nav-list a::before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: var(--primary);
  transition: 300ms;
  border-radius: 2px;
}

.nav-list a:hover::before {
  width: 100%;
}

.locate {
  color: var(--primary);
  font-weight: 600;
}
.locate::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  margin-top: 4px;
}

header nav.match {
  background-color: rgba(2, 6, 23, 0.85); /* Darker on scroll */
  border-color: rgba(59, 130, 246, 0.3);
}

/* nav ends */

@media (max-width: 768px) {
  /* nav bar */
  header {
    padding-bottom: 0;
  }
  header .harm {
    display: block;
    position: fixed;
    right: 15px;
    cursor: pointer;
    font-weight: bolder;
    font-size: 30px;
    z-index: 50;
    color: var(--accent);
  }

  .harm.active {
    display: none;
  }

  .cover-bg {
    backdrop-filter: blur(20px);
    background-color: #c9efffa1;
    position: fixed;
    width: 100%;
    height: 100dvh;
    display: block;
    left: 180vw;
    transition: 500ms;
    top: 0;
    z-index: 4;
  }
  .cover-bg.active {
    left: 0vw;
  }

  nav {
    background-color: var(--secondary);
    top: 0;
    height: 100vh;
    width: 60%;
    align-content: start;
    border-radius: 0 10px 0px 0;

    transition: 1000ms;
    left: -100vw;
    box-shadow: 0 0 20px 0 var(--primary);
  }
  header nav.active {
    left: 0vw;
  }

  nav .logo a {
    font-size: 20px;
  }

  nav .logo span {
    font-size: 15px;
  }

  header .menu {
    display: block;
    margin: 3% 5%;
  }

  .nav-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 50px;
  }

  .nav-list li {
    margin-top: 5%;
    width: 100%;
    text-align: center;
  }

  .nav-list a {
    font-size: 1.2rem;
    display: block;
    width: 100%;
  }
}

/* nav ends */

@media (max-width: 600px) {
  /* nav bar */
  nav .logo a {
    font-size: 18px;
  }

  nav .logo span {
    font-size: 13px;
  }

  .nav-list li {
    margin-top: 15%;
  }

  .nav-list a {
    font-size: 15px;
  }
}