footer.gradientfooter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  height: 200px;
  margin-top: auto;
  color: white;
  font-size: 25px;
  background-color: rgb(18, 53, 189);
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.gradient1class {
  background: linear-gradient(90deg, #60c4ff, #ff8a00, #e52e71);
  position: relative;
}
.gradient1class::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #1100ff, #f5340d, #227348);
  opacity: 0;
  animation: fade 10s infinite;
  animation-delay: 4s;
}
.gradient1class::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ff8a00, #e52e71, #60c4ff);
  opacity: 0;
  animation: fade 10s infinite;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
    transform: scale(1.2);
  }
  100% {
    background-position: 0% 50%;
  }
}
.gradient2class {
  position: relative;
  animation: gradientMove 6s linear infinite;
}
.gradient2class::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #60c4ff, #ff8a00, #e52e71, #5e9652, #ff60a0);
  opacity: 0;
  animation: fade 6s infinite;
}

@keyframes rotategradient {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.gradient3class {
  position: relative;
  overflow: hidden;
  background: conic-gradient(from 18deg, #938fc8, #e5a22e, #a20370);
}
.gradient3class::before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(from 18deg, #938fc8 0%, #e5a22e 30%, #e2190a 60%, #11c7fe 100%);
  animation: rotategradient 10s linear infinite;
  transform-origin: center;
  z-index: 0;
  border-radius: 30px;
}

.masked {
  position: relative;
  width: 400px;
  height: 400px;
  overflow: hidden;
  /* Apply the mask */
  -webkit-mask-image: url("images/defaultflying.png");
  mask-image: url("images/defaultflying.png");
  border: 3px solid red;
  background: url("images/defaultflying.png") center/cover no-repeat;
}

/* everything inside should respect the mask */
.masked * {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, red, blue);
  mix-blend-mode: multiply; /* or overlay, screen, color, etc. */
  opacity: 0.8; /* control how strong the paint effect looks */
  width: 400px;
  height: 400px;
  top: 0;
  left: 0;
}

:root {
  --nobgimage: ../../images/towernobg.png;
  --bgimage: ../../images/ut-tower.png;
}

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

body {
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  gap: 0px;
  background-color: #eee;
}
body .sitecontainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  gap: 40px;
  justify-content: flex-start;
  min-height: 100vh;
  width: 100%;
  flex: 1;
}
body .navbar {
  width: 100%;
  height: 120px;
  margin: 0;
  background-color: #449bff;
  color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0px 30px;
  justify-content: space-between;
}
body .navbar .logo {
  font-size: 35px;
}
@media (max-width: 400px) {
  body .navbar .logo {
    font-size: 25px;
  }
}
body .navbar .pages {
  margin-right: 20px;
}
body .navbar .pages a {
  color: white;
  font-weight: bold;
  font-size: 20px;
  text-decoration: none;
}
body .navbar .pages a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
body #textheading {
  margin: 50px 0px;
}

.gradientcontainer {
  width: 80%;
  border: 4px solid #ff0000;
  border-radius: 26px;
  border-style: dashed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  height: auto;
  padding: 30px;
}
.gradientcontainer div#editedimage {
  position: relative;
  top: 1px;
  display: inline-block;
  width: 100%;
  background: linear-gradient(345deg, #425d84 0%, red 10%, #ff9d60 49%, #076505 95%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  /* The gradient that will show through the visible parts */
  -webkit-mask-image: url("../../images/defaultflying.png");
  mask-image: url("../../images/defaultflying.png");
  mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  background: linear-gradient(345deg, #425d84 0%, red 10%, #ff9d60 49%, #076505 95%);
  background-size: 200% 100%; /* gradient is twice as wide as the element */
  background-position: left center; /* show only the left half */
}
.gradientcontainer .paint-layer {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(226, 54, 7), rgb(30, 151, 89), rgb(35, 135, 243));
  background-size: 200% 100%;
  background-position: 0% center;
  animation: paintMove 10s linear infinite;
}
@keyframes paintMove {
  from {
    background-position: 0% center;
  }
  to {
    background-position: 210% center;
  }
}

.buttonsdiv {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border: 5px solid blue;
  padding: 50px 0;
  border-radius: 26px;
  width: 80%;
  height: auto;
  z-index: 10;
}
.buttonsdiv button {
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 500;
  color: white;
  background-color: #007bff;
  border: none;
  border-radius: 20px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.buttonsdiv button:hover {
  cursor: pointer;
  background-color: #0056b3;
  transform: translateY(-2px);
}

.aboutdiv {
  height: auto;
  width: 70%;
  padding: 40px;
  border: 2px solid black;
  border-radius: 30px;
  margin-top: 30px;
}
.aboutdiv .links {
  margin-top: 30px;
  margin-bottom: 20px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  justify-content: flex-start;
  gap: 5px;
}
.aboutdiv .links i {
  font-size: 28px;
  color: rgb(53, 67, 195);
  margin: 0 5px;
  transition: transform 0.2s ease;
}
.aboutdiv .links i.fa-instagram {
  color: rgb(248, 78, 75);
}
.aboutdiv .links i.fa-instagram:hover {
  color: #c20a41; /* LinkedIn blue, or your theme */
}
.aboutdiv .links i:hover {
  transform: scale(1.2);
  color: #0a66c2; /* LinkedIn blue, or your theme */
}

#editedimage2 {
  position: relative;
  width: 400px;
  height: 400px;
  /* Mask = your cutout PNG */
  -webkit-mask-image: url("../../images/defaultflying.png"); /* use your $nobgimage variable here */
  mask-image: url("../../images/defaultflying.png");
  mask-mode: alpha;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  /* Transparent background (so only the circle shows through) */
  background: transparent;
  overflow: hidden; /* just in case */
}
#editedimage2 .gradient-circle {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff7b00 0%, #00ff66 50%, transparent 80%);
  pointer-events: none; /* so you can drag through it */
  transition: transform 0.05s linear;
  top: 0;
  right: 0;
}

#editedimage2 {
  position: relative;
  width: 1000px;
  height: 1000px;
  overflow: hidden;
  /* Apply mask so both the image and the overlay are clipped */
  -webkit-mask-image: url("../../images/defaultflying.png");
  mask-image: url("../../images/defaultflying.png");
  mask-mode: alpha;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  margin: -200px 0px;
  /* Optional: to see the bounding area */
}
#editedimage2 .plane {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  filter: brightness(113%) contrast(1.3) saturate(94%) hue-rotate(116deg);
}
@keyframes rotatehue {
  0% {
    filter: brightness(113%) contrast(1.3) saturate(94%) hue-rotate(0deg);
  }
  100% {
    filter: brightness(113%) contrast(1.3) saturate(94%) hue-rotate(360deg);
  }
}
#editedimage2 .hueshiftclass {
  animation: rotatehue 5s linear infinite;
}
@keyframes contrastshift {
  0% {
    filter: brightness(113%) contrast(1.3) saturate(94%) hue-rotate(0deg);
  }
  50% {
    filter: brightness(113%) contrast(101) saturate(94%) hue-rotate(360deg);
  }
  100% {
    filter: brightness(113%) contrast(1.3) saturate(94%) hue-rotate(0deg);
  }
}
#editedimage2 .contrastclass {
  animation: contrastshift 10s ease forwards;
}
@keyframes greyscaleshift {
  0% {
    filter: brightness(113%) contrast(1.3) saturate(94%) grayscale(0) hue-rotate(116deg);
  }
  50% {
    filter: brightness(113%) contrast(1.3) saturate(94%) grayscale(1) hue-rotate(116deg);
  }
  100% {
    filter: brightness(113%) contrast(1.3) saturate(94%) grayscale(0) hue-rotate(116deg);
  }
}
#editedimage2 .greyscaleclass {
  animation: greyscaleshift 10s ease forwards;
}
#editedimage2 .gradient-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, #08740e 0%, #6db8ff 100%); /* remove transparent stop */
  mix-blend-mode: overlay;
  opacity: 0.8; /* make it fully visible */
  pointer-events: none;
  transition: transform 0.05s linear;
  top: 50%;
  left: 48%;
}
#editedimage2 .bluecircle {
  border-radius: 50%;
  width: 200px;
  aspect-ratio: 1/1;
  background: linear-gradient(red, blue, purple);
  opacity: 0.2;
  position: absolute;
  top: 435px;
  left: 120px;
}
#editedimage2 .orange-circle {
  border-radius: 50%;
  width: 272px;
  height: 105px;
  background: linear-gradient(90deg, #425d84, #605bf7, #60c4ff);
  transform: rotate(192deg);
  opacity: 0.5;
  position: absolute;
  top: 360px;
  left: 280px;
}
#editedimage2 .circle3 {
  border-radius: 51%;
  width: 222px;
  height: 474px;
  background: linear-gradient(90deg, #99b1d3, #f75bc0, #60ffba);
  opacity: 0.5;
  position: absolute;
  top: 145px;
  left: 710px;
  transform: rotate(266deg);
}
#editedimage2 #heading {
  position: relative;
  z-index: 3;
  background: linear-gradient(90deg, #425d84, #605bf7, #60c4ff);
  top: -731px;
  right: -608px;
  transform: rotate(-11deg);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  font-size: 80px;
  /* standard gradient */
  -webkit-background-clip: text; /* show background only inside text */
  -webkit-text-fill-color: transparent; /* make text itself transparent */
  font-weight: bold;
}

.gradient-circle,
.bluecircle,
.orange-circle,
.circle3,
.plane {
  pointer-events: none; /* allows clicks to pass through */
}

.headingandplane {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 100px 0;
}
.headingandplane .heading2 {
  z-index: 3;
  background: linear-gradient(90deg, #425d84, #605bf7, #60c4ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  font-size: 200px;
  /* standard gradient */
  -webkit-background-clip: text; /* show background only inside text */
  -webkit-text-fill-color: transparent; /* make text itself transparent */
  font-weight: bold;
}
.headingandplane #plane2 {
  margin-top: -220px;
  width: 795px;
  height: auto;
  z-index: 3;
}/*# sourceMappingURL=main.css.map */