/* portfolio bubbles as square boxes */
.portfolio-bubbles1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 350px));
  gap: 16px;
  justify-items: center;
  margin-top: 24px;
  justify-content: center;
}

.portfolio-bubble {
  background: var(--darkblue-color);
  border: 2px solid var(--violet-color);
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(113,128,172,0.08);
  padding: 32px 24px;
  min-width: 320px;
  min-height: 220px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.2s, transform 0.2s;
}

.portfolio-bubble:hover {
  box-shadow: 0 8px 32px rgba(113,128,172,0.18);
  transform: translateY(-6px) scale(1.04);
  cursor: pointer;
}

.portfolio-title {
  font-size: 1.3rem;
  color: var(--violet-color);
  margin-bottom: 12px;
  text-align: center;
}

.portfolio-description {
  font-size: 1rem;
  color: var(--thistle-color);
  text-align: center;
}

/* Service bubbles as square boxes */
.service-bubbles1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 350px));
  gap: 16px;
  justify-items: center;
  margin-top: 24px;
  justify-content: center;
}

.service-bubble {
  background: var(--darkblue-color);
  border: 2px solid var(--violet-color);
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(113,128,172,0.08);
  padding: 32px 24px;
  min-width: 320px;
  min-height: 220px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.2s, transform 0.2s;
}

.service-bubble:hover {
  box-shadow: 0 8px 32px rgba(113,128,172,0.18);
  transform: translateY(-6px) scale(1.04);
}

.service-title {
  font-size: 1.3rem;
  color: var(--violet-color);
  margin-bottom: 12px;
  text-align: center;
}

.service-description {
  font-size: 1rem;
  color: var(--thistle-color);
  text-align: center;
}
/* Particles background canvas - always behind content */
#particles-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0 !important;
}
/* Particles background canvas */
#particles-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}
/* Particles background canvas */
#particles-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}
.animated-title .title-letter {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(.77,0,.18,1);
}

.animated-title:hover .title-letter {
  transform: translateY(-12px) scale(1.2) rotate(-8deg);
}

.animated-title .title-letter {
  transition-delay: 0s;
}
.animated-title:hover .title-letter:nth-child(1) { transition-delay: 0.00s; }
.animated-title:hover .title-letter:nth-child(2) { transition-delay: 0.03s; }
.animated-title:hover .title-letter:nth-child(3) { transition-delay: 0.06s; }
.animated-title:hover .title-letter:nth-child(4) { transition-delay: 0.09s; }
.animated-title:hover .title-letter:nth-child(5) { transition-delay: 0.12s; }
.animated-title:hover .title-letter:nth-child(6) { transition-delay: 0.15s; }
.animated-title:hover .title-letter:nth-child(7) { transition-delay: 0.18s; }
.animated-title:hover .title-letter:nth-child(8) { transition-delay: 0.21s; }
.animated-title:hover .title-letter:nth-child(9) { transition-delay: 0.24s; }
.animated-title:hover .title-letter:nth-child(10) { transition-delay: 0.27s; }
.animated-title:hover .title-letter:nth-child(11) { transition-delay: 0.30s; }
.animated-title:hover .title-letter:nth-child(12) { transition-delay: 0.33s; }
.animated-title:hover .title-letter:nth-child(13) { transition-delay: 0.36s; }
.animated-title:hover .title-letter:nth-child(14) { transition-delay: 0.39s; }
.animated-title:hover .title-letter:nth-child(15) { transition-delay: 0.42s; }
.animated-title:hover .title-letter:nth-child(16) { transition-delay: 0.45s; }
.animated-title:hover .title-letter:nth-child(17) { transition-delay: 0.48s; }
.animated-title:hover .title-letter:nth-child(18) { transition-delay: 0.51s; }
.animated-title:hover .title-letter:nth-child(19) { transition-delay: 0.54s; }
.animated-title:hover .title-letter:nth-child(20) { transition-delay: 0.57s; }
.animated-title:hover .title-letter:nth-child(21) { transition-delay: 0.60s; }
.animated-title:hover .title-letter:nth-child(22) { transition-delay: 0.63s; }
.animated-title:hover .title-letter:nth-child(23) { transition-delay: 0.66s; }
.animated-title:hover .title-letter:nth-child(24) { transition-delay: 0.69s; }
.animated-title:hover .title-letter:nth-child(25) { transition-delay: 0.72s; }
.animated-title:hover .title-letter:nth-child(26) { transition-delay: 0.75s; }
.animated-title:hover .title-letter:nth-child(27) { transition-delay: 0.78s; }
.animated-title:hover .title-letter:nth-child(28) { transition-delay: 0.81s; }
.animated-title:hover .title-letter:nth-child(29) { transition-delay: 0.84s; }
.animated-title:hover .title-letter:nth-child(30) { transition-delay: 0.87s; }
/* Prevent white background during homepage fade-in */
body.fade-in {
  background: var(--darkblue-color);
}
/* Fade-in animation for homepage */
.fade-in {
  animation: fadeInPage 0.8s ease;
}

@keyframes fadeInPage {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Prevent white background during slide-up animation */
body.slide-bg {
  background: var(--darkblue-color);
}
/* Fade out animation for main content */
.fade-out {
  animation: fadeOutMain 0.7s forwards;
}

@keyframes fadeOutMain {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Miniver&family=Poppins:ital,wght@0,100;0,400;0,500;0,600;0,700;1,400&display=swap');

/* Root variables */
:root {
  --violet-color: #4c2bb9;
  --blue-color: #9ad4d6;
  --darkblue-color: #101935;
  --darkblue1-color: #1d253b;

  --secondary-color: #7180ac;
  --thistle-color: #dbcbd8;
  --medium-grey-color: #6b6e70;
  --font-size-s: 0.9rem;
  --font-size-n: 1rem;
  --font-size-m: 1.2rem;
  --font-size-l: 1.5rem;
  --font-size-xl: 2rem;
  --font-size-xxl: 3.5rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --border-radius-s: 8px;
  --border-radius-m: 30px;
  --border-radius-circle: 50%;
  --site-max-width: 1600px;
}

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

html {
  scroll-behavior: smooth;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

img {
  width: 100%;
}

.section-content {
  margin: 0 auto;
  padding: 0 20px;
  max-width: var(--site-max-width);
}

/* Section title */
.section-title {
  text-align: center;
  padding: 60px 0 100px;
  text-transform: uppercase;
  font-size: var(--font-size-xl);
}

.section-title::after {
  content: "";
  width: 80px;
  height: 5px;
  display: block;
  margin: 10px auto 0;
  border-radius: var(--border-radius-s);
  background: var(--secondary-color);
}

/* ==================== */
/* Navbar Styles        */
/* ==================== */

header {
  position: fixed;
  width: 100%;
  z-index: 5;
  background-color: var(--darkblue1-color);
  padding-left: 150px;
}

.navbar-section-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}

.nav-title h1 {
  max-width: 400px;
  padding-top: 10px;
  color: var(--violet-color);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 0;
  padding-right: 150px;
}

.nav-link {
  padding: 10px 18px;
  color: var(--thistle-color);
  border-radius: var(--border-radius-m);
  font-size: var(--font-size-m);
  transition: 0.3s ease;
}

.nav-link:hover {
  background: var(--violet-color);
  color: var(--darkblue-color);
}

/* Hide menu buttons on desktop */
#menu-close-button,
#menu-open-button {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Dropdown styles */
.nav-item.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--violet-color);
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border-radius: 0 0 8px 8px;
  z-index: 100;
  padding: 0;
}

.nav-item.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-link {
  display: block;
  padding: 12px 18px;
  color: var(--blue-color);
  transition: background 0.2s;
}

.dropdown-link:hover {
  background: var(--darkblue-color);
}

/* Navbar scrolled effect */
.navbar.scrolled .nav-link {
  background: var(--secondary-color);
  color: var(--primary-color);
  transition: background 0.3s, color 0.3s;
}

/* ==================== */
/* Hero Section         */
/* ==================== */

.hero-section {
  min-height: 100vh;
  background:var(--darkblue-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-color);
  text-align: center;
  padding: 10px;
}

.hero-section {
    background-size: cover;      /* Image covers the whole section */
    background-position: center; /* Image is centered */
    background-repeat: no-repeat;/* Image does not repeat */
    background-color: var(--darkblue-color); /* Fallback color */
    top: 0;
    z-index: 1;
}

.hero-section .title {
    font-size: 2.5rem;
    color: var(--violet-color);
}

.hero-section .title1 {
  font-size: var(--font-size-xxl);
  color: var(--violet-color);
}

.hero-section .title {
  font-size: 2.5rem;
  color: var(--thistle-color);
  display: inline-block;
  transition: transform 0.4s cubic-bezier(.77,0,.18,1);
  cursor: pointer;
}

.hero-section .title:hover {
  transform: translateX(20px) scale(1.08) rotate(-2deg);
}

.hero-section .nav-link {
  color: var(--violet-color);
}

.hero-section .nav-link:hover {
  color: #f3efe0;
}

.hero-section .subtitle {
    font-size: 1.25rem;
    color: var(--thistle-color);
}

/* ==================== */
/* About Section        */
/* ==================== */

.about-section {
  min-height: 50vh;
  background: var(--darkblue1-color);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
}

.about-section .title {
  color: var(--violet-color);
  font-size: var(--font-size-xxl);
}

.about-section .subtitle {
  color: var(--thistle-color);
  max-width: 1200px;
}



.about-section {
    background-size: cover;      /* Image covers the whole section */
    background-position: center; /* Image is centered */
    background-repeat: no-repeat;/* Image does not repeat */
    top: 0;
    z-index: 1;
}

#arrow-image {
    width: 40px;    /* Set to your desired size */
    height: auto;   /* Keeps the aspect ratio */
    display: block; /* Optional: removes extra space below image */
    margin: -250px auto 175px auto; /* top, right, bottom, left */
    color: var(--blue-color);
}

#arrow-image:hover {
    cursor: pointer;
    filter: brightness(1.3);
    transform: scale(1.2);
    transition: transform 0.2s, filter 0.2s;
}

#arrow-image {
    animation: flash-opacity 1s linear infinite; /* <-- updated line */

}

@keyframes flash-opacity {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

.bubble-image2 {
    width: 200px;    /* Adjust size as needed */
    height: auto;   /* Keep aspect ratio or set auto if you want */
    object-fit: contain;
    margin: 10px;
    margin-top: 40px;
}

.bubble-image2:hover {
    filter: brightness(1.3);
    transform: scale(1.5);
    transition: transform 0.3s, filter 0.3s;
}

.bubble-image-wrapper {
    display: flex;
    gap: 30px; /* Adjust the value for more or less space */
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}


/* ==================== */
/* Services Section     */
/* ==================== */

.services-section {
  min-height: 50vh;
  background: var(--darkblue-color);
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  color: var(--white-color);
  padding-bottom: 100px;
}

.services-section {
    background-size: cover;      /* Image covers the whole section */
    background-position: center; /* Image is centered */
    background-repeat: no-repeat;/* Image does not repeat */
    top: 0;
    z-index: 1;
    justify-content: center;
}


.services-section .title {
  font-size: var(--font-size-xxl);
  color: var(--violet-color);
}

.services-section .subtitle {
  color: var(--thistle-color);
}

/* ==================== */
/* Contact Section     */
/* ==================== */

.contact-section {
  min-height: 89vh;
  background: var(--darkblue-color);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  color: var(--white-color);
}

.contact-section {
    background-size: cover;      /* Image covers the whole section */
    background-position: center; /* Image is centered */
    background-repeat: no-repeat;/* Image does not repeat */
    top: 0;
    z-index: 1;
    justify-content: center;
}


.contact-section .title {
  font-size: var(--font-size-xxl);
  color: var(--violet-color);
  padding-top: 100px;
}

.contact-section .contact-info {
  color: var(--thistle-color);
}

.contact-section .contact-form {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 600px;
}

/* When the contact section is taller, center the form vertically and remove extra top margin */
.contact-section .contact-form.centered {
  margin-top: 0;
  width: 100%;
  max-width: 600px;
}

.contact-section .submit-button {
  padding: 10px 18px;
  color: var(--thistle-color);
  border-radius: var(--border-radius-m);
  font-size: var(--font-size-m);
  transition: 0.3s ease;
}

.contact-section .submit-button:hover {
  background: var(--violet-color);
  color: var(--darkblue-color);
}

/* ==================== */
/* Footer Section       */
/* ==================== */

.footer-section {
  padding: 10px 0;
  background: var(--darkblue1-color);
  color: var(--thistle-color);
  min-height: 5vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.footer-section {
    background-size: cover;      /* Image covers the whole section */
    background-position: center; /* Image is centered */
    background-repeat: no-repeat;/* Image does not repeat */
    top: 0;
    z-index: 1;
}

.footer-section .section-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-section .title {
  color: var(--violet-color);
  padding-top: 30px;
}

.footer-section .subtitle {
  color: var(--thistle-color);
  font-size: var(--font-size-s);
}

.social-link-list {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-bottom: 30px;
}

.social-link {
  font-size: var(--font-size-l);
  color: var(--thistle-color);
  transition: color 0.2s;
}

.social-link:hover {
  color: var(--violet-color);
}

/* ==================== */
/* Portfolio Section    */
/* ==================== */

.portfolio-section {
  padding: 100px 0;
  background: var(--darkblue-color);
  color: var(--white-color);
  text-align: center;
}

.portfolio-section .title {
  font-size: var(--font-size-xxl);
  color: var(--violet-color);
}

.portfolio-section .subtitle {
  color: var(--thistle-color);
}

.portfolio-section .portfolio-items {
  gap: 30px;
  margin-top: 50px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* Portfolio item sizing: make images smaller and consistent */
.portfolio-section .portfolio-item {
  width: 320px; /* fixed card width to control image size */
  max-width: 90%;
  box-sizing: border-box;
  padding: 12px;
  text-align: left;
}

.portfolio-section .portfolio-item img {
  width: 100%;
  height: 200px; /* smaller image height */
  object-fit: cover; /* crop to fill while preserving aspect ratio */
  border-radius: 10px;
  display: block;
}

/* Slightly smaller on medium screens */
@media (max-width: 900px) {
  .portfolio-section .portfolio-item {
    width: 280px;
  }
  .portfolio-section .portfolio-item img {
    height: 170px;
  }
}

/* On very small screens, allow images to scale down and use natural height */
@media (max-width: 480px) {
  .portfolio-section .portfolio-item {
    width: 100%;
    padding: 8px 0;
  }
  .portfolio-section .portfolio-item img {
    height: auto;
  }
}

/* ==================== */
/* Responsive Styles    */
/* ==================== */

@media (max-width: 1024px) {
  .services-section .service-list {
    gap: 60px;
  }
  .services-section .service-list .service-item {
    width: calc(100% / 3 - 60px);
  }
}

@media (max-width: 900px) {
  :root {
    --font-size-m: 1rem;
    --font-size-l: 1.3rem;
    --font-size-xl: 1.5rem;
    --font-size-xxl: 1.8rem;
  }

  body.show-mobile-menu header::before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, 0.3);
  }

  #menu-close-button,
  #menu-open-button {
    display: block;
    font-size: var(--font-size-l);
  }

  #menu-close-button {
    position: absolute;
    right: 30px;
    top: 30px;
  }

  .nav-menu {
    flex-direction: column;
    position: fixed;
    left: -300px;
    top: 0;
    width: 300px;
    height: 100%;
    align-items: center;
    padding-top: 100px;
    background: var(--white-color);
    transition: left 0.2s ease;
  }

  body.show-mobile-menu .nav-menu {
    left: 0;
  }

  .nav-link {
    color: var(--dark-color);
    display: block;
    margin-top: 17px;
    font-size: var(--font-size-l);
  }
}

@media (max-width: 630px) {
  .footer-section .section-content {
    flex-direction: column;
    gap: 20px;
  }
}