html {
     scroll-behavior: smooth;
 }

 #home,
 #portfolio,
 #pricing {
     scroll-margin-top: 40px;
 }

  #contact{
    scroll-margin-top: 90px;
  }

@media (max-width: 668px) {
    #home,
    #portfolio,
    #pricing,
    #contact {
        scroll-margin-top: 90px;
    }
}

 /* Hide scrollbar for the modal */
 .hide-scrollbar::-webkit-scrollbar {
     display: none;
 }

 .hide-scrollbar {
     -ms-overflow-style: none;
     scrollbar-width: none;
 }


 /* 1. IMAGE SCROLL OPTIMIZATIONS */
 .portfolio-card {
     height: 420px;
     overflow: hidden;
     position: relative;
     /* Forces GPU acceleration for the container */
     transform: translateZ(0);
 }

 .portfolio-img {
     width: 100%;
     height: auto;
     object-fit: cover;
     object-position: top;
     /* Changed to ease (or linear) for smoother visual flow */
     transition: transform 10s ease;
     transform: translateY(0);
     /* Tells browser to prep the GPU for this specific animation */
     will-change: transform;
 }

 .portfolio-card:hover .portfolio-img {
     transform: translateY(calc(-100% + 420px));
 }

 /* 2. TAB TRANSITION OPTIMIZATIONS */
 .tabs-wrapper {
     display: grid;
     /* Ensures both tabs occupy the exact same space without absolute positioning bugs */
     grid-template-columns: 1fr;
 }

 .tab-content {
     grid-area: 1 / 1;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     /* Smooth crossfade without layout jumping */
     transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
 }

 .tab-content.active {
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
     z-index: 2;
 }



 .swiper-pagination-bullet {
     background-color: #d8b4fe !important;
     /* purple-300 */
     opacity: 0.5;
     transition: all 0.3s ease;
 }

 .swiper-pagination-bullet-active {
     background-color: #a855f7 !important;
     /* purple-500 */
     opacity: 1;
     width: 24px !important;
     border-radius: 9999px !important;
 }



 @keyframes float-slow {

     0%,
     100% {
         transform: translateY(0px) rotate(-3deg);
     }

     50% {
         transform: translateY(-10px) rotate(-1deg);
     }
 }

 @keyframes float-fast {

     0%,
     100% {
         transform: translateY(0px) rotate(6deg);
     }

     50% {
         transform: translateY(-15px) rotate(10deg);
     }
 }

 .animate-float-slow {
     animation: float-slow 5s ease-in-out infinite;
 }

 .animate-float-fast {
     animation: float-fast 4s ease-in-out infinite;
 }