@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Roboto:wght@300;400;700&family=Roboto+Mono:wght@300;400;600&family=Playfair+Display:wght@700&family=Pacifico&family=Great+Vibes&display=swap");

/* Master Styles */
/* width */
::-webkit-scrollbar {
  width: 3px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px transparent;
  border-radius: 0px;

  background: var(--var-color-beige4);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--var-color-beige3);
  border-radius: 30px;
}

/* Scroll Styles*/
:root {
  --var-color-one: rgb(255, 252, 233);
  --var-color-two: rgb(197, 182, 131);

  --var-color-three: rgb(228, 35, 157);
  --var-color-four: rgb(239, 75, 129);
  --var-color-five: rgb(202, 5, 51);
  --var-color-six: rgb(187, 41, 187);

  --var-color-seven: rgb(35, 54, 149);
  --var-color-eight: rgb(153, 213, 234);
  --var-color-nine: rgb(59, 219, 192);
  --var-color-ten: rgb(52, 167, 152);

  --var-color-eleven: rgb(255, 130, 0);
  --var-color-twelve: rgb(242, 204, 0);

  --var-color-pink: rgb(235, 196, 195);
  --var-color-red: rgb(237, 64, 48);
  --var-color-electricblue: rgb(51, 43, 183);
  --var-color-mediumblue: rgb(52, 149, 197);

  --var-color-blue: rgb(191, 220, 231);
  --var-color-blue1: rgb(181, 220, 230);
  --var-color-blue2: rgb(47, 82, 131);

  --var-color-yellow: rgb(228, 188, 53);
  --var-color-yellow1: rgb(230, 182, 60);
  --var-color-yellow2: rgb(205, 175, 137);

  --var-color-green: rgb(152, 161, 138);
  --var-color-green1: rgb(216, 232, 188);
  --var-color-green2: rgb(177, 182, 162);
  --var-color-green3: rgb(240, 248, 236);
  --var-color-green4: rgb(178, 194, 175);
  --var-color-green5: rgb(209, 191, 174);

  --var-color-orange: rgb(146, 59, 10);
  --var-color-orange1: rgb(252, 155, 89);
  --var-color-orange2: rgb(206, 198, 189);

  --var-color-burgundy1: rgb(214, 97, 52);
  --var-color-burgundy2: rgb(88, 52, 51);

  --var-color-beige: rgb(206, 219, 219);
  --var-color-beige2: rgb(202, 179, 125);
  --var-color-: rgb(224, 184, 144);
  --var-color-: rgb(64, 54, 23);
  --var-color-: rgb(116, 99, 50);
  --var-color-beige3before: rgb(150, 127, 59);
  --var-color-: rgb(44, 32, 5);
  --var-color-beige3: rgb(242, 219, 173);
  --var-color-: rgb(36, 25, 13);
  --var-color-beige4: rgb(116, 125, 88);
  --var-color-beige5: rgb(49, 21, 7);
  --var-color-: rgb(147, 134, 94);
  --var-color-: rgb(143, 125, 103);
  --var-color-: rgb(89, 75, 33);
  --var-color-: rgb(74, 64, 35);

  --var-color-: rgb(104, 58, 32);

  --var-color-: rgb(124, 118, 56);
  --var-color-: rgb(156, 143, 108);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

/* Global Styling */
body {
  background-color: var(--var-color-beige4); /* Cream background */
  font-family: "Roboto", sans-serif; /* Roboto for body text */
  color: var(--var-color-beige3); /* Magenta text color */
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden; /* Prevent horizontal scroll */
  width: 100%;
  max-width: 2000px;
  top: 0;
  left: 0;
  background-size: cover;
}

/* Navbar Styling */
.nav {
  position: fixed;
  display: flex;
  background-color: transparent;
  z-index: 9999999999999999999;
  max-width: 100%;
  width: 10%;
  justify-content: center;
  align-items: center;
  min-height: 8vh;
  border-radius: 10px;
  padding-left: 1rem;
  padding-right: 1rem;
  transition: 0.1s ease-in-out;
}

@media (max-width: 900px) {
  .nav {
    width: 25%;
  }
}

.nav-active {
  width: 100%;
  opacity: 1;
  background-color: transparent;
  /*background: radial-gradient(ellipse at top, transparent),
    radial-gradient(ellipse at bottom, transparent, var(--var-color-one));
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);*/
  align-items: center;
  justify-content: center;
  min-height: 8vh;
  border-radius: 10px;
}

/* Logo */
.logo {
  display: flex;
  justify-content: left;
  font-family: "dorsa", serif;
  font-weight: 900;
  font-style: normal;
  font-size: 2.5rem;
  color: var(--var-color-beige3); /* Magenta */
  margin: 0;
  padding-top: 1rem;
}

/* Tagline */
.tagline {
  display: flex;
  justify-content: left;
  font-family: "bebas neue", sans-serif;
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.05rem;
  color: var(--var-color-beige3);

  padding-bottom: 1rem;
}

/* Form Container */
.form-container {
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  box-sizing: border-box;
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 3rem;
  padding-right: 0;
}

@media (max-width: 600px) {
  .form-container {
    display: flex;
    padding-left: 1rem;
  }
}

form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3rem;
  margin: 3rem;
  border-radius: 30px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 1);
  width: 100%;
  /*max-width: 800px;*/
  background-color: transparent;
  background: radial-gradient(ellipse at top, transparent),
    radial-gradient(ellipse at bottom, transparent, var(--var-color-one));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px); /* Frosted glass effect */
  border: 3px solid var(--var-color-beige3);
  overflow: hidden;
  color: var(--var-color-beige3);
}

@media (max-width: 900px) {
  form {
    display: grid;
    grid-template-columns: 1fr;
    background-color: transparent; /* Transparent cream background */
    padding: 3rem;
    margin: 1rem;
  }
}

.form-container h1 {
  font-family: "bebas neue", sans-serif;
  text-transform: uppercase;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0.05rem;
  color: var(--var-color-beige3);
}

@media (max-width: 900px) {
  .form-container h1 {
    font-size: 2rem;
    letter-spacing: 0.01rem;
  }
}

/* Form Labels */
label {
  font-family: "bebas neue", sans-serif;
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.05rem;
  margin-top: 12px;
  display: block;
  color: var(--var-color-beige3);
}

/* Input Fields - Sleek Lines */
input,
select,
textarea {
  background-color: rgb(49, 21, 7, 0);
  border: 2px solid var(--var-color-beige3);
  border-radius: 30px;
  padding: 12px 18px;
  margin: 12px 0;
  width: 100%;
  font-size: 1rem;
  color: var(--var-color-beige3);
  outline: none;
  font-family: "open sans", sans-serif;
}

/* Hover Effects on Inputs */
input:hover,
select:hover,
textarea:hover {
  border: 2px solid var(--var-color-beige3);
  border-radius: 30px;
}

/* Focus Effect on Inputs */
input:focus,
select:focus,
textarea:focus {
  border: 2px solid transparent;
  border-radius: 30px;

  background-color: rgb(49, 21, 7, 0.6);
  color: var(--var-color-beige3);
  transform: scale(0.9);
}

/* Placeholder text color */
input::placeholder {
  color: var(--var-color-beige3);
}

textarea::placeholder {
  color: var(--var-color-beige3);
}

/* Submit Button Styling */
button {
  align-items: center;
  background-color: var(--var-color-beige3);
  color: var(--var-color-beige5);
  padding: 16px 35px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s ease;
  font-family: "bebas neue", sans-serif;
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: 500;
}

button:hover {
  background-color: rgb(49, 21, 7, 0.6);
  /*border: 3px solid var(--var-color-beige3);*/
  color: var(--var-color-beige3);
  transform: scale(0.9);
}

/* Footer Styling */
.footer-container {
  bottom: 0;
  width: 100%;
  position: fixed;
  z-index: 999;
}
footer {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  text-align: left;
  color: var(--var-color-beige3);
  opacity: 1;
  background-color: transparent;
  /*background: radial-gradient(ellipse at top, transparent),
    radial-gradient(ellipse at bottom, transparent, var(--var-color-one));
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);*/
}

footer h1 {
  font-family: "bebas neue", sans-serif;
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
}

@media (max-width: 600px) {
  footer h1 {
    padding-left: 1rem;
  }
}

footer p {
  font-family: "bebas neue", sans-serif;
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
}

footer a {
  color: var(--var-color-beige3); /* Magenta link color */
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* Cookie Banner Styling */
.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(
    --var-color-beige3
  ); /* rgba(255, 252, 233, 0.95) Cream with slight transparency */
  border: 2px solid var(--var-color-beige3); /* Magenta outline */
  padding: 15px 25px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 1em;
  color: var(--var-color-beige5); /* Magenta text */
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

/* Show the cookie banner */
.cookie-banner.show {
  opacity: 1;
  visibility: visible;
}

/* Cookie Buttons */
.btn {
  font-size: 1em;
  padding: 10px 18px;
  border-radius: 12px;
  letter-spacing: 0.05rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  font-family: "Bebas neue", sans-serif;
  font-weight: 500;
}

/* Accept Button - Solid Magenta */
.btn.accept {
  background-color: rgb(49, 21, 7, 1);
  color: var(--var-color-beige3);
  border: 2px solid var(--var-color-beige5);
}

.btn.accept:hover {
  background-color: rgb(49, 21, 7, 1);
}

/* Decline Button - Magenta Outline */
.btn.decline {
  background: none;
  color: var(--var-color-beige5);
  border: 2px solid var(--var-color-beige5);
}

.btn.decline:hover {
  background-color: rgb(49, 21, 7, 1);
  color: var(--var-color-beige3);
}

.portfolio-img-background-top0 {
  position: absolute;
  height: 120vh;
  width: 100%;
  z-index: 9;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.2s ease-in-out; /* Animation */
  background-color: transparent;
  filter: blur(0) brightness(60%);
  animation: appearImage 1s ease-in-out 1 alternate;
}

@media (max-width: 900px) {
  .portfolio-img-background-top0 {
    height: 160vh;
  }
}