/* General font styling */
 * {
    font-family: 'Red Hat Display', sans-serif;
  }

  /* Base card styling */
  .base-card {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
    padding: 1.5rem; /* Adjusted padding for consistent spacing */
  }

  /* Hover effect for cards */
  .hover-card:hover {
    background-color: rgba(9, 24, 70, 1);
    color: white;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
  }

  /* Text color transition for smoother hover effect */
  .text-transition {
    color: #4B5563;
    transition: color 0.3s ease-in-out;
  }

  /* Text color change on hover */
  .hover-card:hover .text-transition {
    color: white;
  }

  /* Contact container styling */
  .contact-container {
    margin: 2.5rem auto;
    padding: 2rem;
    background-color: rgba(9, 24, 70, 1);
    border-radius: 0.5rem;
    width: 100%;
    max-width: 900px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  /* Centering content within containers */
  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Responsive styling for mobile view */
  @media (max-width: 768px) {
    .base-card {
      width: 100%; /* Full width on mobile */
      height: auto; /* Dynamic height to fit content */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      margin: 0.5rem 0; /* Vertical margin for spacing */
      box-sizing: border-box; /* Ensures padding doesn't affect width */
    }

    /* Center-align text within cards for mobile */
    .base-card h3, .base-card p {
      text-align: center;
    }
  }

  /* Ensuring hover effects don't conflict across different screen sizes */
  @media (min-width: 768px) {
    .hover-card {
      cursor: pointer; /* Hand cursor on hover for larger screens */
    }
  }



#contactSection h2 {
animation: colorShift 3s infinite ease-in-out;
transition: color 0.5s ease;
}


/* Video Background Styles */
#banner video {
    /* Optimize video performance */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000;
}

/* Handle smaller screens */
@media (max-width: 768px) {
    #banner video {
        /* Optional: adjust video position for mobile */
        object-position: center;
    }
}

/* Fallback for browsers that don't support video */
.no-video #banner {
    background-image: url('images/dummy.jpg');
    background-size: cover;
    background-position: center;
}

/* Add this to your existing styles */
.animated-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.animated-lines {
  position: absolute;
  inset: 0;
}

.animated-lines::before,
.animated-lines::after {
  content: '';
  position: absolute;
  left: 50%;
  min-width: 300vw;
  min-height: 300vw;
  background-color: transparent;
  border-radius: 45%;
  animation: rotate 15s linear infinite;
}

.animated-lines::before {
  bottom: 15vh;
  border: 2px solid rgba(219, 171, 35, 0.1);
  animation-duration: 20s;
}

.animated-lines::after {
  bottom: 12vh;
  border: 2px solid rgba(219, 171, 35, 0.15);
  animation-duration: 25s;
}

/* Add diagonal lines */
.diagonal-lines {
  position: absolute;
  inset: 0;
  opacity: 0.1;
}

.diagonal-line {
  position: absolute;
  width: 1px;
  height: 200%;
  background: linear-gradient(to bottom, 
    transparent,
    rgba(219, 171, 35, 0.3),
    rgba(219, 171, 35, 0.5),
    rgba(219, 171, 35, 0.3),
    transparent
  );
  animation: moveDiagonal 15s linear infinite;
}

.diagonal-line:nth-child(1) { left: 20%; animation-delay: 0s; }
.diagonal-line:nth-child(2) { left: 40%; animation-delay: -3s; }
.diagonal-line:nth-child(3) { left: 60%; animation-delay: -6s; }
.diagonal-line:nth-child(4) { left: 80%; animation-delay: -9s; }

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

@keyframes moveDiagonal {
  0% {
    transform: translateY(-50%) rotate(45deg);
  }
  100% {
    transform: translateY(0%) rotate(45deg);
  }
}
body{
  background-color: black;
 }


 .nav-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #DBAB23;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.nav-btn:hover::after,
.nav-btn.active::after {
  transform: scaleX(1);
}

@media (max-width: 768px) {
  #navbar-sticky {
    animation: slideDown 0.3s ease-out;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  0% {
      transform: translateY(-50px);
      opacity: 0;
  }
  100% {
      transform: translateY(0);
      opacity: 1;
  }
}

@keyframes slideUp {
  0% {
      transform: translateY(50px);
      opacity: 0;
  }
  100% {
      transform: translateY(0);
      opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

.animate-slideDown {
  animation: slideDown 1s ease-out forwards;
}

.animate-slideUp {
  animation: slideUp 1s ease-out 0.5s forwards;
}

.animate-fadeIn {
  opacity: 0;
  animation: fadeIn 1s ease-out 1s forwards;
}

.hover\:scale-105:hover {
  transform: scale(1.05);
}
.services-lines-container {
  overflow: hidden;
  opacity: 0.1;
}

.services-lines-container::before,
.services-lines-container::after {
  content: '';
  position: absolute;
  left: 50%;
  min-width: 300vw;
  min-height: 300vw;
  background-color: transparent;
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.services-lines-container::before {
  bottom: 15vh;
  border-radius: 45%;
  border: 1px solid #DBAB23;
  animation-duration: 25s;
}

.services-lines-container::after {
  bottom: 12vh;
  border-radius: 47%;
  border: 1px solid #D68D1A;
  animation-duration: 30s;
}

/* Vertical lines animation */
.services-line {
  position: absolute;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, 
    transparent,
    #DBAB23,
    transparent
  );
  animation: lineMove 8s linear infinite;
}

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

@keyframes lineMove {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}


  /* Styles for floating cards in "Why Choose Devblock Studio" section */
  .floating-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  
  .floating-cards-right {
    animation: floatRight 20s linear infinite;
  }
  
  .floating-cards-left {
    animation: floatLeft 20s linear infinite;
  }
  
  /* Animation for floating cards */
  @keyframes floatRight {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
  }
  
  @keyframes floatLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }
  
  /* Styles for slider in "Our Values" section */
  .slider-container {
    overflow-x: auto;
    display: flex;
    gap: 1.5rem;
    scroll-snap-type: x mandatory;
    animation: none; /* Prevents floating animation on this section */
  }
  
  .base-card {
    flex-shrink: 0;
    min-width: 280px;
    transition: all 0.3s ease;
  }
  
  .base-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  }
  
  /* Mobile responsiveness */
  @media (max-width: 768px) {
    .floating-cards-right,
    .floating-cards-left {
      animation-duration: 15s;
    }
  
    .base-card {
      padding: 1rem;
    }
  
    .base-card h3 {
      font-size: 1.5rem;
    }
  
    .base-card p {
      font-size: 0.875rem;
    }
  }


  #contentCard {
    transition: opacity 0.3s ease-in-out;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  .fade-in {
    animation: fadeIn 0.3s ease-in-out;
  }