:root {
  --primary-color: #000; 
  --secondary-color: #667eea;
  --accent1-color: #FEFDFE;
  --accent2-color: #cd7aee;
  --text-color: #fff;
  --heading-text: "Urbanist", sans-serif;
  --normal-text: "Quicksand", sans-serif;
  --surface-0: hsl(229, 41%, 5%);
  --surface-1: hsl(229, 25%, 12%);
  --surface-2: hsl(234, 26%, 16%);
  --text-1: hsl(229, 12%, 100%);
  --text-2: hsl(229, 12%, 66%);
  --required: hsl(321, 32%, 56%);
  --accent: hsl(262, 84%, 52%);
  --border: 1px solid hsl(229, 22%, 19%);
}

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

body {
  font-family: var(--normal-text);
  color: var(--text-color);
  line-height: 1.6;
  background-color: var(--primary-color);
  font-size: 1.125rem;

}

@keyframes move {
  100% {
    transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}

.background {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: var(--primary-color);
  overflow: hidden;
  z-index: -1;
}

.ball {
  position: absolute;
  width: 20vmin;
  height: 20vmin;
  border-radius: 50%;
  backface-visibility: hidden;
  animation: move linear infinite;
}

.ball:nth-child(odd) {
  color: #006D5B;
}

.ball:nth-child(even) {
  color: #0b70a6;
}

/* Using a custom attribute for variability */
.ball:nth-child(1) {
  top: 77%;
  left: 88%;
  animation-duration: 40s;
  animation-delay: -3s;
  transform-origin: 16vw -2vh;
  box-shadow: 40vmin 0 5.703076368487546vmin currentColor;
}
.ball:nth-child(2) {
  top: 42%;
  left: 2%;
  animation-duration: 53s;
  animation-delay: -29s;
  transform-origin: -19vw 21vh;
  box-shadow: -40vmin 0 5.17594621519026vmin currentColor;
}
.ball:nth-child(3) {
  top: 28%;
  left: 18%;
  animation-duration: 49s;
  animation-delay: -8s;
  transform-origin: -22vw 3vh;
  box-shadow: 40vmin 0 5.248179047256236vmin currentColor;
}
.ball:nth-child(4) {
  top: 50%;
  left: 79%;
  animation-duration: 26s;
  animation-delay: -21s;
  transform-origin: -17vw -6vh;
  box-shadow: 40vmin 0 5.279749632220298vmin currentColor;
}
.ball:nth-child(5) {
  top: 46%;
  left: 15%;
  animation-duration: 36s;
  animation-delay: -40s;
  transform-origin: 4vw 0vh;
  box-shadow: -40vmin 0 5.964309466052033vmin currentColor;
}
.ball:nth-child(6) {
  top: 77%;
  left: 16%;
  animation-duration: 31s;
  animation-delay: -10s;
  transform-origin: 18vw 4vh;
  box-shadow: 40vmin 0 5.178483653434181vmin currentColor;
}
.ball:nth-child(7) {
  top: 22%;
  left: 17%;
  animation-duration: 55s;
  animation-delay: -6s;
  transform-origin: 1vw -23vh;
  box-shadow: -40vmin 0 5.703026794398318vmin currentColor;
}
.ball:nth-child(8) {
  top: 41%;
  left: 47%;
  animation-duration: 43s;
  animation-delay: -28s;
  transform-origin: 25vw -3vh;
  box-shadow: 40vmin 0 5.196265905749415vmin currentColor;
}

.stars {
  width: 1px;
  height: 1px;
  position: absolute;
  background: white;
  box-shadow: 2vw 5vh 2px white, 10vw 8vh 2px white, 15vw 15vh 1px white,
    22vw 22vh 1px white, 28vw 12vh 2px white, 32vw 32vh 1px white,
    38vw 18vh 2px white, 42vw 35vh 1px white, 48vw 25vh 2px white,
    53vw 42vh 1px white, 58vw 15vh 2px white, 63vw 38vh 1px white,
    68vw 28vh 2px white, 73vw 45vh 1px white, 78vw 32vh 2px white,
    83vw 48vh 1px white, 88vw 20vh 2px white, 93vw 52vh 1px white,
    98vw 35vh 2px white, 5vw 60vh 1px white, 12vw 65vh 2px white,
    18vw 72vh 1px white, 25vw 78vh 2px white, 30vw 85vh 1px white,
    35vw 68vh 2px white, 40vw 82vh 1px white, 45vw 92vh 2px white,
    50vw 75vh 1px white, 55vw 88vh 2px white, 60vw 95vh 1px white,
    65vw 72vh 2px white, 70vw 85vh 1px white, 75vw 78vh 2px white,
    80vw 92vh 1px white, 85vw 82vh 2px white, 90vw 88vh 1px white,
    95vw 75vh 2px white;
  animation: twinkle 8s infinite linear;
}

.shooting-star {
  position: absolute;
  overflow: hidden;
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, antiquewhite, transparent);
  animation: shoot 5s infinite ease-in;
}

.shooting-star:nth-child(1) {
  top: 90%;
  left: -100px;
  animation-delay: 0s;
}

.shooting-star:nth-child(2) {
  top: 100%;
  left: -100px;
  animation-delay: 1s;
}

.shooting-star:nth-child(3) {
  top: 125%;
  left: -100px;
  animation-delay: 2s;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.4;
  }
}

@keyframes shoot {
  0% {
    transform: translateX(0) translateY(0) rotate(25deg);
    opacity: 1;
  }
  100% {
    transform: translateX(120vw) translateY(50vh) rotate(25deg);
    opacity: 0;
  }
}

.stars::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 1px;
  background: white;
  box-shadow: 8vw 12vh 2px white, 16vw 18vh 1px white, 24vw 25vh 2px white,
    33vw 15vh 1px white, 41vw 28vh 2px white, 49vw 35vh 1px white,
    57vw 22vh 2px white, 65vw 42vh 1px white, 73vw 28vh 2px white,
    81vw 48vh 1px white, 89vw 32vh 2px white, 97vw 45vh 1px white,
    3vw 68vh 2px white, 11vw 75vh 1px white, 19vw 82vh 2px white,
    27vw 88vh 1px white, 35vw 72vh 2px white, 43vw 85vh 1px white,
    51vw 92vh 1px white, 59vw 78vh 1px white;
  animation: twinkle 6s infinite linear reverse;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header Styles */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    transition: all 0.3s ease, transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

.header.hidden {
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
}

.header.scrolled {
    background: rgba(0, 0, 0, 0.95);
    height: 70px;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.logo-container:hover {
    transform: translateY(-2px);
}

.logo {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo img {
    width: 100%;
    height: 100%;
}

.logo-text {
    color: white;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.5px;
}

.main-menu {
    display: flex;
    align-items: center;
    gap: 40px;
}

.menu-item {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    padding: 8px 0;
}

.menu-item:hover {
    color: white;
    transform: translateY(-2px);
}

.menu-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    transition: width 0.3s ease;
}

.menu-item:hover::after {
    width: 100%;
}

.menu-item.active {
    color: white;
}

.menu-item.active::after {
    width: 100%;
}

.menu-item.external::before {
    content: '↗';
    margin-right: 5px;
    font-size: 12px;
    opacity: 0.7;
}

/* Mobile menu toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 4px;
}

.menu-toggle span {
    width: 25px;
    height: 3px;
    background: white;
    margin: 3px 0;
    transition: 0.3s;
    border-radius: 2px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .header {
        padding: 0 20px;
    }

    .main-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(10px);
        flex-direction: column;
        padding: 20px;
        gap: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .main-menu.active {
        display: flex;
    }

    .menu-toggle {
        display: flex;
    }

    .menu-toggle.active span:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }

    .logo-text {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .header {
        height: 70px;
        padding: 0 15px;
    }

    .header.scrolled {
        height: 60px;
    }

    .logo {
        width: 40px;
        height: 40px;
    }

    .logo-text {
        font-size: 18px;
    }
}
/* HERO SECTION OF HOME */

.hero {
  background-image: radial-gradient(at top left, #667eea 0%,  #764ba2 28%, transparent 55%);
  background-size: cover;
  background-position: center;
  height: 100vh;
  padding-top: 60px;
  color: var(--text-color);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
}

.hero .container {
  max-width: 600px;
  justify-self: start;
  margin-left: 200px;
  min-width: 400px;
}

.hero .img-container {
  max-width: 500px;
  justify-self: end;
  margin-right: 200px;
  margin-top: 120px;
}

.hero img {
  height: 600px;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 20px;
  text-align: left;
  font-family: var(--heading-text);

}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  text-align: left;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 30px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5);
}

.cta-button svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.cta-button:hover svg {
    transform: translateX(5px);
}

section {
  padding: 60px 0;
}

section h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2.5rem;
}

.about {
  background-image: radial-gradient(at top right, transparent 75%, #764ba2 95%);
  height: 100vh;
  padding-top: 60px;
  color: var(--text-color);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
}

.about .img-container {
  max-width: 600px;
  justify-self: start;
  margin-left: 50px;
}

.about .container {
  max-width: 700px;
  justify-self: end;
}

.about img {
  max-width: 600px;
}

.about p,
.about li {
  max-width: 800px;
  margin: 0 auto 20px;
  font-size: 1.25rem;
  list-style: none;
}


.services {
  background-image: radial-gradient(at top left, #764ba2 0%, transparent 45%);
  height: auto;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-flow: row;
  gap: 20px;
}

.service-card {
  background: #090109;
  padding: 20px;
  border-radius: 7px;
  text-align: center;
  box-shadow: var(--secondary-color) 0px 13px 27px -5px, var(--secondary-color) 0px 8px 16px -8px;
  height:510px;
  position: relative;
  line-height: normal;
}

.service-card:hover {
  box-shadow: var(--accent1-color) 0px 13px 27px -5px, var(--accent1-color) 0px 8px 16px -8px;
}

.service-card .card-img {
  width: 200px;
}

.service-card h3 {
  margin-top: 10px;
  margin-bottom: 10px;
  color: var(--text-color);
  font-size: 1.5rem;
  font-family: var(--heading-text);
}

.service-card p {
  margin-top: 10px;
  margin-bottom: 10px;
  color: var(--text-color);
  font-size: 1.05rem;
  font-family: var(--normal-text);
}

.services-cta {
  text-align: center;
  margin-top: 30px;
}

.view-more {
  position: absolute;
  width: 100%;
  bottom: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.view-more-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-color);
  font-family: var(--heading-text);
  font-size: 1rem;
}

.view-more-text {
  display: inline-block;
  transform: translateX(-100%);
  opacity: 0;
  transition: transform 0.9s ease, opacity 0.3s ease-out;
  white-space: nowrap;
  margin-right: 5px;
}

.arrow {
  display: inline-block;
  font-size: 1.2rem;
  transform: translateX(-65px);
  transition: transform 1s ease;
}

.service-card:hover .view-more-text {
  transform: translateX(0);
  opacity: 1;
}

.service-card:hover .arrow {
  transform: translateX(5px);
}

.testimonials {
  background: #f4f4f4;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.testimonial-card {
  background: white;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.testimonial-card p {
  font-style: italic;
  margin-bottom: 10px;
}

.testimonial-card h4 {
  color: #1a2a44;
  font-size: 1rem;
}

.contact {
  background: white;
  text-align: center;
}

.contact p {
  max-width: 600px;
  margin: 0 auto 20px;
}

input, button, select, textarea{
    font:inherit;
}


form {
    display: grid;
    gap: 1rem;
    @media (width > 720px) {
        grid-template-columns: 1fr 1fr 1fr;;
    } 
}

input, .contact-form textarea {
  background: var(--surface-2);
  color: var(--text-1);
  border: var(--border);
  border-radius: 16px;
  padding: 1ex 2ex;
  accent-color: var(--accent);
}

input:not([type="checkbox"]){
    width:100%
}

.form-group:has(.fine-print){
    grid-column: 1/-1;
    display: flex;
    gap: 1ch;
}
.form-group:has(#message){
    grid-column: 1/-1;
}

.contact-form button {
    grid-column: 1/-1;
    justify-self: start;
}


.contact-form textarea {
  min-height: 100px;
  width: 100%; 
  box-sizing: border-box; 
  resize: vertical;
  grid-column: 1 / -1;
 
}



.contact-form h1 {
  font-size: 4rem;
  font-weight: 300;
  line-height: 1;
}

.contact-form a {
  color: hsl(from var(--accent) h s 80%);
}

label {
  text-transform: uppercase;
  font-size: 1rem;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.fine-print {
  text-transform: revert;
  line-height: 1.4;
}

.contact-form {
  display: grid;
  gap: 1rem;

  background-color: var(--surface-1);
  padding: 3rem;
  border-radius: 24px;
  width: min(100% - 4rem, 1200px);
  margin-inline: auto;
  @media (width < 600px) {
    padding: 5px;
} 
}

.contact-form button {
  cursor: pointer;
  background-color: var(--accent);
  color: var(--text-1);
  padding: 1em 1.5em;
  border: 0;
  border-radius: 16px;

  &:hover,
  &:focus-visible {
    background-color: hsl(from var(--accent) h s 30%);
  }
}


.submit-btn {
  position: relative;
  background: var(--secondary-color);
  color: var(--text-color);
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-family: var(--normal-text);
  font-size: 1rem;
}

.submit-btn:hover:not(:disabled) {
  background: var(--accent2-color);
}

.submit-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.loader {
  display: none;
  border: 3px solid var(--accent1-color);
  border-top: 3px solid var(--accent2-color);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.submit-btn.loading .loader {
  display: block;
}

.submit-btn.loading span {
  visibility: hidden;
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.message {
  margin-top: 10px;
  text-align: center;
  color: var(--primary-color);
}

footer {
  text-align: center;
  padding: 20px 0;
  height: 103vh;
  width: 100%;
  background-image: radial-gradient(at bottom left, #667eea 0%, #764ba2 10%, transparent 45%);
}

#contact-footer {
  height: 25vh;
  background: linear-gradient(to bottom, #764ba2 0%, transparent 100%);
  display: flex;
  align-items: center;
  justify-content: space-around;
}

#contact-footer div {
  margin-left: 25%;
}

#contact-footer img {
  margin-right: 28%;
  height: 140px;
  @media (width < 400px) {
  height: 100px;
  margin-left: 10px;

}
}



#footer-info {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

#footer-card {
  max-width: 300px;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
  height: fit-content;
  margin-top: -40px;
  margin-bottom: 0;
}

#footer-card img {
  width: 400px;
  margin-left: -70px;
  margin-top: 80px;
}

#footer-card div {
  margin-top: 20px;
  text-align: left;
}

#footer-card a {
  text-decoration: none;
  color: var(--text-color);
}

#footer-card div img {
  margin: 0;
  margin-top: 10px;
  width: 30px;
}

/* Media Queries for responsiveness */

/* Tablets and smaller (max-width: 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero-grid, .about-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
    justify-items: center;
  }

  .hero .img-container {
    order: -1;
  }

  .hero .container, .about .container {
    margin: 0 auto;
    text-align: center;
    max-width: 80%;
  }

  .hero .img-container, .about .img-container {
    margin: 0 auto;
    max-width: 80%;
  }

  .hero img, .about img {
    max-width: 100%;
    height: auto;
  }

  .hero h1 {
    font-size: 2.5rem;
  }

  .hero p, .about p {
    font-size: 1rem;
  }

  .cta-button {
    width: 200px;
    font-size: 18px;
  }

  #about{
    height: auto;
  }
}

/* Mobile devices (max-width: 767px) */
@media (max-width: 767px) {

  header img {
    height: 40px;
  }

  .hero, .about {
    height: auto;
    padding: 40px 20px;
  }

  .hero-grid, .about-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 15px;
  }

  .hero .img-container {
    order: -1;
  }

  .hero .container, .about .container {
    max-width: 90%;
    margin: 0 auto;
    text-align: center;
  }

  .hero .img-container, .about .img-container {
    max-width: 90%;
    margin: 0 auto;
  }

  .hero img, .about img {
    max-width: 100%;
    height: auto;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero p, .about p {
    font-size: 0.9rem;
    margin-bottom: 20px;
  }

  .cta-button {
    width: 180px;
    font-size: 16px;
    padding: 8px 16px;
  }

  #footer-info {
    flex-direction: column;
    align-items: center;
  }


  #footer-card {
    max-width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  #footer-card img {
    width: 100%;
    max-width: 300px;
    margin-left: 0;
    margin-top: 0;
  }
  footer {
    height: 145vh;
  }
}



/* Small mobile devices (max-width: 480px) */
@media (max-width: 480px) {

  .hero .container {
    margin-left: 0;
    min-width: 0;
    max-width: 100%;
    padding: 0 15px;
  }

  .hero h1 {
    font-size: 1.8rem;
    margin: 0;
    padding: 0;
  }

  .hero .img-container {
    order: -1;
    margin-right: 0;
    margin-top: 20px;
    max-width: 100%;
  }

  .hero p, .about p {
    font-size: 0.85rem;
  }

  .hero img {
    max-width: 100%;
    height: auto;
    position: relative;
    left:-20px
    
  }

  .cta-button {
    width: 160px;
    font-size: 14px;
    padding: 6px 12px;
  }

  .hero .container, .about .container {
    max-width: 90%;
  }

  .hero .img-container, .about .img-container {
    max-width: 90%;
  }

  #footer-info {
    flex-direction: column;
    align-items: center;
  }

  #footer-card {
    max-width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  #footer-card img {
    width: 100%;
    max-width: 300px;
    margin-left: 0;
    margin-top: 0;
  }

  footer {
    height: 145vh;
  }
}

/***************************************** ABOUT PAGE ************************************************************************ */

#about-hero {
  background-image: radial-gradient(at top left, #fff 0%, #0F2E04 28%, transparent 65%);
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: var(--text-color);
  padding-top: 60px;
  overflow: hidden;
}

#about-hero h1 {
  font-size: 4rem;
}

#about-display {
  height: 200vh;
  overflow: hidden;
}

#about-display h2 {
  font-size: 4rem;
}

#about-display p {
  font-size: 1.2rem;
  width: 50%;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}

#multiple-image-layer {
  position: relative;
  z-index: 500;
  top: 0;
  left: 0;
  overflow: hidden;
}

.about-img {
  position: relative;
  transition: transform 0.6s ease-out;
}

#about-img-1 {
  z-index: 501;
  width: 200px;
  top: 350px;
  left: 650px;
}

#about-img-2 {
  z-index: 488;
  width: 250px;
  top: 270px;
  left: 350px;
}

#about-img-3 {
  z-index: 489;
  width: 200px;
  top: 270px;
  left: 20px;
}

#about-img-4 {
  z-index: 490;
  width: 200px;
  top: 270px;
  left: 90px;
}

#about-img-5 {
  z-index: 460;
  width: 180px;
  top: 270px;
  left: -50px;
}

#about-img-6 {
  z-index: 475;
  width: 200px;
  top: 270px;
  left: -130px;
}

#about-img-7 {
  z-index: 480;
  width: 300px;
  top: -200px;
  left: 610px;
}

#about-img-8 {
  z-index: 520;
  width: 100px;
  top: -160px;
  left: 610px;
}

#about-img-9 {
  z-index: 520;
  width: 100px;
  top: -10px;
  left: 100px;
}

#about-img-10 {
  z-index: 520;
  width: 100px;
  top: -230px;
  left: 120px;
  transform: scaleX(-1);
}

/* Contact page */

#contact-body {
  padding-block-start: 10vb
}

/* @media (max-width: 400px) {

.contact-form{
  width: 80%
}
} */

        /* Scroll to top button */
        .scroll-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            cursor: pointer;
            opacity: 0;
            transform: translateY(100px);
            transition: all 0.3s ease;
            z-index: 999;
        }

        .scroll-to-top.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .scroll-to-top:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5);
        }


/* Specific styling for the "My Account" menu item */
.menu-item[href="https://portal.sylphcode.co.za"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 20px;
    padding: 4px 16px; /* Matches existing .menu-item padding */
    font-size: 16px; /* Matches existing .menu-item font-size */
    font-weight: 500; /* Matches existing .menu-item font-weight */
    box-shadow: 0 6px 15px rgba(102, 126, 234, 0.4);
    transition: background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
    z-index: 2;
}

/* Hover effect for My Account */
.menu-item[href="https://portal.sylphcode.co.za"]:hover {
    background: linear-gradient(135deg, #7f9cf5 0%, #8b5cf6 100%); /* Slightly lighter gradient */
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.5); /* Slightly stronger shadow */
}

/* Active state */
.menu-item[href="https://portal.sylphcode.co.za"].active {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%); /* Reverse gradient for active */
}

/* Remove the underline effect for My Account */
.menu-item[href="https://portal.sylphcode.co.za"]::after {
    content: none; /* Disable the default underline effect */
}

/* Mobile menu adjustments */
@media (max-width: 768px) {
    .menu-item[href="https://portal.sylphcode.co.za"] {
        width: fit-content; /* Prevent stretching in mobile menu */
        margin: 0 auto; /* Center in mobile menu */
        padding: 10px 20px; /* Slightly larger for touch targets */
        font-size: 16px; /* Consistent font size */
    }
}