/* General Styling */
html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}
/* h2 {
  color: #9b90ff;
} */
nav a {
  color: #d2d2d2;
  font-weight: 600;
}

nav a :hover {
  color: #ffffff;
  font-weight: 600;
}

/* Back to Top Button */
#backToTop {
  display: none;
}

#backToTop.block {
  display: block;
}

.animated-background {
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #000337, #3815ff, #2819a9, #000451);
}

/* Primary Colors and Backgrounds */
.navPrimaryColor {
  background: linear-gradient(45deg, #000337, #3815ff, #2819a9, #000451);
  transition: background 0.5s ease; /* Add transition for smooth effect */
}

.navPrimaryColorAlt {
  background: linear-gradient(45deg, #040128, #050126, #29004b, #0b001a);
}
.primaryColor {
  background: linear-gradient(45deg, #000337, #3815ff, #2819a9, #000451);
}

.primaryColorAlt {
  background: linear-gradient(45deg, #000337, #2819a9, #4802c0, #000451);
}

.primaryColorButton {
  background: linear-gradient(45deg, #000337, #3815ff, #2819a9, #000451);
}

.primaryColorButton:hover {
  background: linear-gradient(45deg, #000337, #2819a9, #4802c0, #000451);
  color: #cef0fc;
}
.secondaryColorButton {
  background: linear-gradient(45deg, #95d1f9, #d79aef, #7c51ff, #9b59b6);
  animation: glowing 3s infinite alternate;
  color: rgb(25, 1, 71);
  transition: box-shadow 0.3s ease-in-out, transform 0.2s ease-in-out;
  font-weight: bold;
}
.secondaryColorButton:hover {
  box-shadow: 0 0 15px rgba(52, 152, 219, 0.8), 0 0 15px rgba(155, 89, 182, 0.8),
    0 0 15px rgba(40, 0, 134, 0.8);
  transform: scale(1.05);
}

.purpleColorButton {
  background: linear-gradient(45deg, #0f0549, #14076d, #2e157a, #2c0150);
  animation: glowing 3s infinite alternate;
  color: rgb(255, 255, 255);
  transition: box-shadow 0.3s ease-in-out, transform 0.2s ease-in-out;
  font-weight: bold;
}
.purpleColorButton:hover {
  box-shadow: 0 0 15px rgba(52, 152, 219, 0.8), 0 0 15px rgba(155, 89, 182, 0.8),
    0 0 15px rgba(40, 0, 134, 0.8);
  transform: scale(1.05);
}
/* .glowing-button {
  background: linear-gradient(45deg, #3498db, #9b59b6, #7c51ff, #9b59b6);
  background-size: 300% 300%;
  animation: glowing 3s infinite alternate;
  padding: 8px 16px;
  border-radius: 8px;
  color: rgb(25, 1, 71);
  font-weight: bold;
  transition: box-shadow 0.3s ease-in-out, transform 0.2s ease-in-out;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
} */
.primaryBG {
  background: linear-gradient(
    180deg,
    #040211,
    #0f0050,
    #320250,
    #04002b,
    #000000
  );
}

.primaryBgAlt {
  background: linear-gradient(180deg, #040211, #0f0050, #04002b, #000000);
}

.darkBG {
  background: url("./img/heroBG_transparent3.png") center/cover no-repeat,
    linear-gradient(
      180deg,
      #060017,
      #000000,
      #000000,
      #000000,
      #000000,
      #000000,
      #060017,
      #0b0022
    );
}

.primaryCardBG {
  background-color: #000000;
}
.gradientCardBG {
  background: linear-gradient(
    180deg,
    #0f054987,
    #06002d87,
    #0b002b8c,
    #1d013581
  );
}

.gradient-icon {
  background: linear-gradient(to right, #221fea, #9427ee); /* purple → pink */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.contactCardBG {
  background-color: #000000a4;
}
.contactCard {
  align-items: center; /* Horizontally center all items */
  justify-content: center; /* Vertically center all items */
  text-align: center;
}

.primaryCardBgAlt {
  background: linear-gradient(45deg, #040128, #050126, #29004b, #0b001a);
}

.contactBG {
  background: linear-gradient(
    180deg,
    #060017,
    #0b0022,
    #000222,
    #07001d,
    #06001a
  );
}

/* Services Section */
.services-img {
  width: 100%;
  height: 250px;
}

/* Pricing Section */
.pricing-card-container {
  height: 500px;
}

.pricing-card-container h3 {
  font-size: 40px;
  padding-bottom: 10px;
  padding-top: 10px;
}

.pricing-card-container li {
  margin-left: 20%;
}

/* Hero Section */
.large-header {
  position: relative;
  width: 100%;
  background: #333;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  z-index: 1;
}

#large-header {
  background-color: black;
  /* background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('./img/acctechAIHeroImage3.gif'); */
  background-size: cover;
  background-image: url("./img/heroBG.png");
}

.heroArea-container {
  position: absolute;
  margin: 0;
  padding: 0;
  color: #f9f1e9;
  text-align: center;
  width: 100%;
  /* background-color: #047060; */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; /* Ensure wrapping on smaller screens */
  padding-right: 10%;
  padding-left: 20%;
  /* background-color: #047060; */
  top: 17%; /* Move the container up by setting top to 40% */
  transform: translateY(-10%); /* Adjust for precise positioning */
}

.heroArea-leftColumn {
  flex: 1;
  max-width: 40%;
  /* background-color: #047060; */
  /* padding-right: 20px; */
}

.heroArea-image {
  float: right; /* Float the image to the right */
}
.heroArea-rightColumn {
  flex: 1;
  max-width: 60%;
  text-align: left;
}

/* Styles for tablets and phones */
@media (max-width: 1024px) {
  .heroArea-container {
    flex-direction: column; /* Stack the columns vertically */
    padding-right: 5%;
    padding-left: 5%;
    top: 10%;
  }

  .heroArea-leftColumn {
    max-width: 100%; /* Full width for the image */
    order: 1; /* Ensure image comes first */
    text-align: center; /* Center the image */
    float: none; /* Remove the float */
  }

  .heroArea-rightColumn {
    max-width: 100%; /* Full width for the text */
    order: 2; /* Ensure text comes after the image */
    text-align: center; /* Center the text */
    padding-top: 20px; /* Add some spacing between the image and text */
  }

  .heroArea-image {
    margin: 0 auto; /* Center the image within the container */
  }
}

.main-title {
  position: absolute;
  margin: 0;
  padding: 0;
  color: #f9f1e9;
  text-align: center;
  top: 45%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}

.demo-1 .main-title {
  text-transform: uppercase;
  font-size: 4.2em;
  letter-spacing: 0.1em;
}

.main-title .thin {
  font-weight: 200;
}

@media only screen and (max-width: 768px) {
  .demo-1 .main-title {
    font-size: 3em;
  }
}

.logo {
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
  animation: glow 10s infinite;
}

@keyframes glow {
  0%,
  100% {
    text-shadow: 0 0 0px rgba(255, 255, 255, 0.7);
    color: #fff;
  }
  50% {
    text-shadow: 0 0 25px rgb(156, 216, 249), 0 0 10px rgb(57, 9, 250);
    color: rgb(255, 255, 255);
  }
}

/* Header */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem; /* Equivalent to "text-xl" */
  font-weight: bold;
  position: relative; /* Allows the glowing circle to be positioned behind */
}

.glowing-circle {
  width: 40px; /* Initial size */
  height: 40px;
  border-radius: 50%;
  background: none;
  border: 2px solid;
  border-image-slice: 1;
  border-width: 2px;
  background-clip: padding-box;
  border: 2px solid transparent;
  box-shadow: 0 0 10px rgba(52, 152, 219, 1), 0 0 10px rgba(46, 204, 113, 1),
    0 0 10px rgba(155, 89, 182, 1);
  animation: glow-circle 1.5s infinite alternate;
  position: absolute; /* Position it absolutely */
  top: 50%; /* Center it vertically */
  left: 10px; /* Adjust to align with the logo */
  transform: translate(-10%, -50%); /* Fine-tune positioning */
  z-index: 0; /* Ensure it stays behind the logo */
}

.logo-image {
  position: relative;
  z-index: 1; /* Ensure the logo stays in front of the glowing circle */
  width: 50px; /* Initial size */
  height: 50px;
}

.small-logo .logo-image {
  width: 30px; /* Shrink size */
  height: 30px;
}

.small-logo .glowing-circle {
  width: 20px; /* Shrink size */
  height: 20px;
  left: 5px; /* Adjust positioning */
  transform: translate(-5%, -50%);
}

@keyframes glow-circle {
  0% {
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3), 0 0 5px rgba(46, 204, 113, 0.3),
      0 0 5px rgba(155, 89, 182, 0.3);
  }
  100% {
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.8),
      0 0 10px rgba(46, 204, 113, 0.8), 0 0 10px rgba(155, 89, 182, 0.8);
  }
}

/* Menu */
.menu-hidden {
  transform: translateX(-100%);
}

/* Services Content Padding */
.services-content {
  padding: 32px; /* More padding */
}

.aboutBG {
  background-color: #000000;
  /* background: linear-gradient(90deg, #000000,#040008); */
}
.about-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px;
  min-height: 100vh;
  /* background-color: #f9f9f9; */
}

.about-content {
  display: flex;
  max-width: 1200px;
  width: 100%;
  flex-direction: row; /* Default layout for larger screens */
}

.left-column {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.left-column img {
  width: auto;
  height: 100%;
  object-fit: cover;
}

.right-column {
  flex: 1;
  padding: 20px;
}

@media (max-width: 1068px) {
  /* h2 {
    color: #2819a9;
  } */
  .about-content {
    flex-direction: column; /* Stacks the columns on top of each other */
  }

  .left-column,
  .right-column {
    width: 100%; /* Full width for both columns */
    height: auto;
    padding: 10px;
  }

  .left-column img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

.grid {
  max-width: 100%;
  width: 100%;
}
#services {
  overflow-x: hidden;
}

#contact .container {
  max-width: 1200px;
  width: 100%;
  padding: 0 15px;
}

#contact .flex {
  flex-wrap: wrap;
}

#contact .flex-1 {
  flex: 1 1 100%;
}

@media (min-width: 768px) {
  #contact .flex-1 {
    flex: 1 1 48%;
  }

  #contact .md\:space-x-10 {
    margin-left: 5%;
  }
}
.snackbar {
  visibility: hidden;
  min-width: 300px;
  margin-left: -150px;
  background-color: #ff0000;
  color: #fff;
  text-align: left;
  border-radius: 5px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
  font-size: 17px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
  opacity: 0;
}

.snackbar.show {
  visibility: visible;
  bottom: 50px;
  opacity: 1;
}

.snackbar-icon {
  font-size: 24px;
  display: flex;
  align-items: center;
}

.snackbar.success {
  background-color: #047060;
}

.snackbar.warning {
  background-color: #ff9800;
}

.snackbar.error {
  background-color: #5f0000;
}

/* The entire scrollbar */
::-webkit-scrollbar {
  width: 12px; /* width of the scrollbar */
}

/* The scrollbar track (background) */
::-webkit-scrollbar-track {
  background: linear-gradient(45deg, #150037, #00010e);
  border-radius: 6px; /* round corners of the track */
}

/* The scrollbar thumb (the part you can drag) */
::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #6715ff, #0b2bff);
  border-radius: 6px; /* round corners of the thumb */
  border: 3px solid #00010e; /* gives some padding around the thumb */
}

/* The scrollbar thumb on hover */
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, #000337, #3815ff, #2819a9, #000451);
}

.carousel-item {
  transition: transform 0.3s ease-in-out;
}

.carousel-item.active {
  transform: scale(1.2);
}

.carousel-prev,
.carousel-next {
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
  color: white;
  font-size: 18px;
  z-index: 99999;
}

.carousel-prev:hover,
.carousel-next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
/* Dropdown Menu Styles */
.dropdown-menu {
  display: none;
  min-width: 160px;
  z-index: 1000;
  text-align: center;
  position: absolute; /* Position the dropdown absolutely */
  top: 100%; /* Position it below the button */
  left: 50%; /* Center it horizontally */
  transform: translateX(-50%); /* Adjust for exact centering */
  background-color: black; /* Match your design */
  border-radius: 0.5rem; /* Match your design */
}
.demoNavMenu:hover {
  background: linear-gradient(45deg, #3498db, #9b59b6, #7c51ff, #9b59b6);
  color: rgb(25, 1, 71);
}
/* Show dropdown menu when active */
.dropdown-menu.active {
  display: block;
}

/* Rotate dropdown icon when active */
.rotate-180 {
  transform: rotate(180deg);
}

/* Mobile Menu Styles */
#navMenu {
  transition: transform 0.3s ease-in-out;
}

/* Hide mobile menu by default */
#navMenu:not(.active) {
  transform: translateX(-100%);
}

/* Show mobile menu when active */
#navMenu.active {
  transform: translateX(0);
}
.glowing-button {
  background: linear-gradient(45deg, #3498db, #9b59b6, #7c51ff, #9b59b6);
  background-size: 300% 300%;
  animation: glowing 3s infinite alternate;
  padding: 8px 16px;
  border-radius: 8px;
  color: rgb(25, 1, 71);
  font-weight: bold;
  transition: box-shadow 0.3s ease-in-out, transform 0.2s ease-in-out;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.glowing-button:hover {
  box-shadow: 0 0 15px rgba(52, 152, 219, 0.8), 0 0 15px rgba(155, 89, 182, 0.8),
    0 0 15px rgba(40, 0, 134, 0.8);
  transform: scale(1.05);
}

.solution-cards {
  background: linear-gradient(135deg, #1b141a, #0a0b1e);
}

@keyframes glowing {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.comparison-table th,
.comparison-table td {
  border-left: 1px solid rgba(255, 255, 255, 0.08); /* faint vertical lines */
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.comparison-table th:first-child,
.comparison-table td:first-child {
  border-left: none; /* no border on first column */
}

.comparison-table th:last-child,
.comparison-table td:last-child {
  border-right: none; /* no border on last column */
}

/* Disable all animations and transitions on mobile devices for performance */
@media (max-width: 1024px) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  /* Also disable smooth scrolling on mobile */
  html {
    scroll-behavior: auto !important;
  }
}