@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Poppins:wght@300;400;500;600&display=swap");

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
 

/* Preloader wrapper */
#preloader {
  position: fixed ;
  inset: 0 ;
  background: linear-gradient(135deg, #f8fafc, #eef2ff) ;
  display: flex ;
  align-items: center ;
  justify-content: center ;
  z-index: 9999 ;
  transition: opacity .4s ease, visibility .4s ease ;
}

/* Glass card */
.loader-card {
  backdrop-filter: blur(12px) ;
  border-radius: 20px ;
  padding: 35px 45px ;
  text-align: center ;
}

/* Logo */
.loader-logo {
  width: 270px !important;
  margin-bottom: 14px ;
  animation: pulse 1.8s infinite ;
}

/* Animations */
@keyframes bounce {
  0%,80%,100% { transform: scale(0) ; }
  40% { transform: scale(1) ; }
}
@keyframes pulse {
  0% { transform: scale(1) ; }
  50% { transform: scale(1.05) ; }
  100% { transform: scale(1) ; }
}

/* Hide animation */
#preloader.hide {
  opacity: 0 ;
  visibility: hidden ;
}

.mega-dropdown::after{
    display: none;
}



h1, h2, h3, h4, h5, .breadcrumb-sections span{
  /* font-family: 'DM Serif Display', serif !important; */
  font-weight: 400 !important;
}
.breadcrumb-sections span{
  font-family: 'DM Serif Display', serif !important;
}

#animSpinner4{
    z-index: 99999 !important;
}

.main-login-btn{
    background: linear-gradient(0, #5e90ff, #264a7b) !important;
}


/* login-btn */


        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
        
        * {
            font-family: 'Inter', sans-serif;
        }

        /* Split Button Container */
        .split-btn-container {
            position: relative;
        }

        /* Main Button */
        .main-login-btn {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .split-btn-container.expanded .main-login-btn {
            opacity: 0;
            transform: scale(0.8);
            pointer-events: none;
        }

        /* Split Buttons Wrapper */
        .split-buttons {
            position: absolute;
            top: 50%;
            width: 35vw;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            gap: 0;
            opacity: 0;
            pointer-events: none;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .tooltip:hover::after{
          display: none;
        }

        .split-btn-container.expanded .split-buttons {
            opacity: 1;
            pointer-events: auto;
            gap: 8px;
        }

        /* Individual Split Buttons */
        .split-btn {
            transform: scale(0.5);
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .split-btn-container.expanded .split-btn {
            transform: scale(1);
            opacity: 1;
        }

        .split-btn-container.expanded .split-btn:first-child {
            transition-delay: 0.05s;
        }

        .split-btn-container.expanded .split-btn:last-child {
            transition-delay: 0.1s;
        }

        /* Hover effects */
        .split-btn:hover {
            transform: scale(1.05) !important;
        }

        .split-btn:hover .btn-icon {
            transform: rotate(10deg) scale(1.1);
        }

        .btn-icon {
            transition: transform 0.3s ease;
        }

        /* Close button */
        .close-split-btn {
            position: absolute;
            top: -40px;
            left: 50%;
            transform: translateX(-50%) scale(0);
            opacity: 0;
            transition: all 0.3s ease;
        }

        .split-btn-container.expanded .close-split-btn {
            transform: translateX(-50%) scale(1);
            opacity: 1;
            transition-delay: 0.2s;
        }

        /* Tooltip */
        .split-btn .tooltip {
            position: absolute;
            bottom: -125%;
            left: 50%;
            transform: translateX(-50%);
            background: #1f2937;
            color: white;
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 500;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.2s ease;
            margin-bottom: 8px;
        }

        .split-btn .tooltip::after {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 50%;
            border: 6px solid transparent;
            border-top-color: #1f2937;
            transform: rotate(180deg);
        }

        .split-btn:hover .tooltip {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(-4px);
        }

        /* Ripple effect */
        @keyframes ripple {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }

        .ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(255,255,255,0.4);
            transform: scale(0);
            animation: ripple 0.6s linear;
            pointer-events: none;
        }

        /* Alternative Inline Version */
        .inline-split-container {
            display: flex;
            align-items: center;
            gap: 4px;
            background: #f6f5f3;
            padding: 4px;
            border-radius: 12px;
        }

        .inline-split-btn {
            transition: all 0.3s ease;
        }

        .inline-split-btn.active {
            background: linear-gradient(135deg, #4f46e5, #7c3aed);
            color: white;
            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
        }

        /* Sliding indicator for inline version */
        .inline-indicator {
            position: absolute;
            top: 4px;
            left: 4px;
            height: calc(100% - 8px);
            width: calc(50% - 6px);
            background: linear-gradient(135deg, #4f46e5, #7c3aed);
            border-radius: 8px;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 0;
        }

        .inline-indicator.right {
            transform: translateX(calc(100% + 4px));
        }

        #dockTrigger{
          display: none;
        }

          .wish-and-cart{
            width: 38px !important;
            height: 38px !important;
          }

        @media (max-width:768px) {
              .mob-login-btn{
                display: none !important;
            }

            .backface-hidden{
                width: 210px;
                height: auto;
            }
            #heroBannerCarousel {
                top: 50px !important;
            }
            #dockTrigger{
              display: flex ;
            }
            #wishBtn{
              margin-right: -10px !important;
            }
            


            .split-btn-mobile{
              display: none;
                width: 100% !important;
                position: fixed !important;
                bottom: 0 !important;
                background: rgb(255 255 255) !important;
                left: 0% !important;
                padding: 9px !important;
            }
        }


        
.product-title{
  font-family: 'Nunito', sans-serif;
  letter-spacing: 0px;
  color: #464646;
  font-size: 18px;
  font-weight: 700 !important;
}
.benifits h3, .benifits p{
  font-family: 'Space Grotesk', serif !important;

}
a.text-link {
    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
}
/* breadcrumb section */
.breadcrumb-section {
  position: relative;
  overflow: hidden;
  padding: 100px 0; 
}

.breadcrumb-section .breadcrumb-img{
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* overlay */
.breadcrumb-section::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgb(0 0 0 / 45%);
}

/* keep text above */
.breadcrumb-section .banner-content{
  position: relative;
  z-index:2;
  text-align: center;
}

.ps-ab {
    position: absolute;
    top: 25%;
}
.breadcrumb-section.three {
    padding: 0px 0;
    top: 100px;
}
/* breadcrumb section */

/* blog page */
.blog-card.three .card-content {
    padding: 20px;
}
.blog-card .card-content h4 {
    height: 56px;
}
.blog-card.three .card-content h4 a {
    font-size: 20px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        line-height: 1.4em;
        max-height: calc(1.4em * 2);
}
.blog-card.three .card-content .view-button2 {
    margin-top: 10px;
}
.view-button2 .arrow {
    width: 30px;
    height: 30px;
}
/* blog page */

/* blog details */
.blog-details-page .inquiry-form {
    margin-top: 10px;
    padding: 20px 20px;
}
.blog-details-page .comment-area .comment > li {
    margin-bottom: 10px;
}
.blog-details-page .comment-area .comment .single-comment-area .comment-content p {
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 0px;
}
.blog-details-page .comment-area .comment .single-comment-area .comment-content .author-name-deg {
    margin-bottom: 0px;
}
.sidebar-area .single-widget .recent-post-widget .recent-post-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.recent-post-img {
    width: 100px !important;
    height: 100px !important;
    object-fit: contain;
}
.sidebar-area .single-widget .recent-post-widget .recent-post-content {
    flex: 1;
}
.sidebar-area .widget-title {
    margin-bottom: 6px;
}
.sidebar-area .single-widget .recent-post-widget .recent-post-content h6 a {
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    line-height: 15px;
    max-height: calc(1.4em * 2);
}
.sidebar-area .single-widget .recent-post-widget .recent-post-content > a {
    margin-bottom: 3px;
}
.sidebar-area .single-widget {
    padding: 20px 20px;
}

/* blog details */
    
/* login page */
.login-wrapper{
  min-height:100vh;
  display:flex;
  align-items:center;
  background: linear-gradient(115deg, #ffffff, #ffffff);
  position: relative;
  padding: 50px 0;
}

/* master card */
.login-box{
  display:flex;
  background:rgba(255,255,255,0.3);
  backdrop-filter: blur(15px);
  border-radius:25px;
  padding:25px;
  max-width:900px;
  margin:auto;
  gap:35px;
  box-shadow:0 15px 40px rgba(0,0,0,0.15);
}

.login-left{
  flex:1;
}
.login-right{
  flex:1;
}

/* inputs */
.modern-input{
  border-radius:12px;
  padding:12px 15px;
  border:1px solid #bfbfbf;
  background:#fff;
}

.modern-input:focus{
  border-color:#ff7979;
  box-shadow:none;
}

/* submit button */
.login-btn{
  background:#ff6b6b;
  color:#fff;
  border-radius:12px;
  padding:12px;
  font-size:1rem;
  border:none;
}
.login-btn:hover{
  background:#ff4f4f;
}

/* Eye icon */
.eye-toggle{
  position:absolute;
  top:50%;
  right:12px;
  transform:translateY(-50%);
  cursor:pointer;
  color:#777;
}

/* Social */
.social-list img{
  border-radius:10px;
  background:#fff;
  padding:6px;
  box-shadow:0 0 10px rgba(0,0,0,0.08);
}

.login-animate {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
.register-animate {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

input#rememberMe {
    border: 1px solid #bfbfbf;
}

/* Responsive */
@media(max-width:768px){
  .login-box{
    flex-direction: column;
    padding:20px;
  }
  .floating-sidebar.open {
    transform: translateY(-54%) translateX(0) !important;
  }
}


#particleCanvas{
  position:absolute;
  inset:0;
  display: none;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
}

.particle{
  position:absolute;
  border-radius:50%;
  background:#dc3545;
  animation: floatDots linear infinite;
}

@keyframes floatDots{
  0%{
    transform:translateY(0) scale(1);
    opacity:.5;
  }
  50%{
    transform:translateY(-120px) scale(1.4);
    opacity:1;
  }
  100%{
    transform:translateY(0) scale(1);
    opacity:.3;
  }
}

/* login page */






















* {
    /* overflow-x: hidden !important; */
}
#heroBannerCarousel {
    top: 0px;
}
/* Animated Background */
/* background: 
radial-gradient(circle at 20% 20%, rgba(251, 146, 60, 0.15) 0%, transparent 40%),
radial-gradient(circle at 80% 80%, rgba(34, 186, 197, 0.15) 0%, transparent 40%),
radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 50%); */

@keyframes bgPulse {
    0%,
    100% {
        opacity: 1;transform: scale(1);
    }
    50% {opacity: 0.8;transform: scale(1.1);
    }
}
.wow {overflow: hidden !important;}

.cards-parent {place-items: center;background: radial-gradient(circle at 80% 80%, rgb(17, 95, 109) 0%, rgb(9, 45, 51) 40%);padding: 54px 0;}
.cards-wrapper {display: flex;gap: 30px;max-width: 1400px;width: 100%;position: relative;z-index: 1;}
.glass-card {flex: 1;min-height: 650px;position: relative;background: rgba(255, 255, 255, 0.03);backdrop-filter: blur(20px);border-radius: 40px;border: 1px solid rgba(255, 255, 255, 0.08);overflow: hidden;cursor: pointer;transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);}
.glass-card:hover {transform: translateY(-20px) scale(1.02);border-color: rgba(255, 255, 255, 0.15);
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.4),inset 0 1px 0 rgba(255, 255, 255, 0.1);}
/* Background Image */
.card-image {position: absolute;inset: 0;opacity: 0.3;transition: all 0.7s ease;}
.card-image img {width: 100%;height: 100%;object-fit: cover;filter: grayscale(50%);}
.glass-card:hover .card-image {opacity: 0.5;}
.glass-card:hover .card-image img {transform: scale(1.1);filter: grayscale(0%);}
/* Gradient Accent */
.gradient-accent {position: absolute;inset: 0;opacity: 0.6;transition: opacity 0.5s ease;}
.sell-card .gradient-accent {background: linear-gradient(180deg, rgba(251, 146, 60, 0.1) 0%, rgba(234, 88, 12, 0.4) 100%);}
.buy-card .gradient-accent {background: linear-gradient(180deg, rgba(34, 197, 135, 0.1) 0%, rgba(22, 147, 163, 0.4) 100%);}
.glass-card:hover .gradient-accent {opacity: 0.8;}
/* Floating Elements */
.floating-element {position: absolute;z-index: 2;opacity: 0;transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);}
.float-circle-1 {width: 120px;height: 120px;border-radius: 50%;top: -40px;right: -40px;}
.sell-card .float-circle-1 {background: linear-gradient(135deg, rgba(251, 146, 60, 0.4), rgba(234, 88, 12, 0.2));}
.buy-card .float-circle-1 {background: linear-gradient(135deg, rgba(34, 173, 197, 0.4), rgba(22, 163, 74, 0.2));}
.float-circle-2 {width: 80px;height: 80px;border-radius: 50%;bottom: 100px;left: -30px;}
.sell-card .float-circle-2 {border: 3px solid rgba(251, 146, 60, 0.3);}
.buy-card .float-circle-2 {border: 3px solid rgba(34, 186, 197, 0.3);}
.float-square {width: 60px;height: 60px;border-radius: 15px;transform: rotate(45deg);top: 40%;right: 15%;}
.sell-card .float-square {background: rgba(251, 146, 60, 0.2);}
.buy-card .float-square {background: rgba(34, 186, 197, 0.2);}
.float-line {width: 100px;height: 3px;border-radius: 3px;bottom: 35%;left: 10%;transform: rotate(-30deg);}
.sell-card .float-line {background: linear-gradient(90deg, rgba(251, 146, 60, 0.5), transparent);}
.buy-card .float-line {background: linear-gradient(90deg, rgba(34, 186, 197, 0.5), transparent);}
.glass-card:hover .floating-element {opacity: 1;}
.glass-card:hover .float-circle-1 {top: 20px;right: 20px;animation: float 4s ease-in-out infinite;}
.glass-card:hover .float-circle-2 {left: 30px;animation: float 4s ease-in-out infinite 0.5s;}
.glass-card:hover .float-square {animation: rotate 8s linear infinite;}
.glass-card:hover .float-line {animation: pulse 2s ease-in-out infinite;}
@keyframes float {
    0%,
    100% {transform: translateY(0);
    }
    50% {transform: translateY(-20px);
    }
}

@keyframes rotate {
    from {transform: rotate(45deg);
    }
    to {transform: rotate(405deg);
    }
}

@keyframes pulse {
    0%,
    100% {opacity: 1;width: 100px;
    }
    50% {opacity: 0.5;width: 120px;
    }
}

/* Card Number */
.card-number {position: absolute;top: 30px;left: 40px;font-size: 8rem;font-weight: 800;line-height: 1;z-index: 3;transition: all 0.5s ease;}
.sell-card .card-number {color: rgba(251, 146, 60, 0.1);}
.buy-card .card-number {color: rgba(34, 186, 197, 0.1);}
.glass-card:hover .card-number {transform: translateY(-10px);}
.sell-card:hover .card-number {color: rgba(251, 146, 60, 0.2);}
.buy-card:hover .card-number {color: rgba(34, 186, 197, 0.2);}
/* Content */
.card-content {position: absolute;inset: 0;display: flex;flex-direction: column;justify-content: flex-end;padding: 50px;z-index: 10;}
.icon-wrapper {width: 80px;height: 80px;background: rgba(255, 255, 255, 0.05);backdrop-filter: blur(10px);border-radius: 24px;display: flex;align-items: center;justify-content: center;margin-bottom: 30px;border: 1px solid rgba(255, 255, 255, 0.1);transition: all 0.5s ease;}
.glass-card:hover .icon-wrapper {transform: scale(1.1);}
.sell-card .icon-wrapper {box-shadow: 0 0 30px rgba(251, 146, 60, 0.2);}
.buy-card .icon-wrapper {box-shadow: 0 0 30px rgba(34, 186, 197, 0.2);}
.sell-card:hover .icon-wrapper {background: rgba(251, 146, 60, 0.2);border-color: rgba(251, 146, 60, 0.3);}
.buy-card:hover .icon-wrapper {background: rgba(34, 186, 197, 0.2);border-color: rgba(34, 186, 197, 0.3);}
.icon-wrapper i {font-size: 2rem;color: white;}
.card-label {font-size: 0.8rem;font-weight: 600;text-transform: uppercase;letter-spacing: 4px;margin-bottom: 12px;opacity: 0;transform: translateY(20px);transition: all 0.5s ease 0.1s;}
.sell-card .card-label {color: #fb923c;}
.buy-card .card-label {color: #4aa8de;}
.glass-card:hover .card-label {opacity: 1;transform: translateY(0);}
.card-title {font-size: 3rem;font-weight: 800;color: white;margin-bottom: 15px;transition: all 0.5s ease;}
.glass-card:hover .card-title {transform: translateY(-5px);}
.card-desc {font-size: 1rem;color: rgba(255, 255, 255, 1);line-height: 1.8;max-width: 380px;margin-bottom: 35px;opacity: 0;transform: translateY(20px);transition: all 0.5s ease 0.15s;}
.glass-card:hover .card-desc {opacity: 1;transform: translateY(0);}
/* Steps */
.steps-row {display: flex;gap: 20px;margin-bottom: 30px;opacity: 0;transform: translateY(20px);transition: all 0.5s ease 0.2s;}
.glass-card:hover .steps-row {opacity: 1;transform: translateY(0);}
.step-item {display: flex;align-items: center;gap: 10px;}
.step-num {width: 35px;height: 35px;background: rgba(255, 255, 255, 0.1);border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: 600;font-size: 0.85rem;color: white;transition: all 0.3s ease;}
.sell-card .step-num:hover {background: rgba(251, 146, 60, 0.4);}
.buy-card .step-num:hover {background: rgba(34, 186, 197, 0.4);}
.step-text {font-size: 0.85rem;color: rgba(255, 255, 255, 0.6);}
/* CTA Button */
.cta-btn {display: inline-flex;align-items: center;gap: 12px;padding: 18px 35px;border-radius: 60px;font-weight: 600;font-size: 0.95rem;cursor: pointer;transition: all 0.4s ease;border: none;width: fit-content;opacity: 0;transform: translateY(20px);}
.sell-card .cta-btn {background: linear-gradient(135deg, #fb923c, #ea580c);color: white;}
.buy-card .cta-btn {background: linear-gradient(135deg, #4ad4de, #1676a3);color: white;}
.glass-card:hover .cta-btn {opacity: 1;transform: translateY(0);}
.cta-btn:hover {transform: translateY(-5px) scale(1.05) !important;box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);}
.cta-btn i {transition: transform 0.3s ease;}
.cta-btn:hover i {transform: translateX(5px);}
/* VS Badge */
.vs-badge {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 70px;height: 70px;background: rgba(139, 92, 246, 0.2);backdrop-filter: blur(20px);border-radius: 50%;display: flex;align-items: center;justify-content: center;border: 2px solid rgba(139, 92, 246, 0.3);z-index: 30;font-weight: 800;color: white;font-size: 1.2rem;}
/* Responsive */
@media (max-width: 1024px) {
    .cards-wrapper {flex-direction: column;
    }
    .glass-card {min-height: 550px;
    }
    .vs-badge {display: none;
    }
    .card-number {font-size: 5rem;
    }
    .card-title {font-size: 2.5rem;
    }
}

.split-container {display: flex;min-height: 80vh;}
.split-card {flex: 1;position: relative;overflow: hidden;transition: flex 0.6s cubic-bezier(0.23, 1, 0.32, 1);}
.split-card:hover {flex: 1.3;}
.split-card:not(:hover) {flex: 0.85;}
.card-background {position: absolute;inset: 0;background-size: cover;background-position: center;transition: all 0.6s ease;filter: brightness(0.7);}
.split-card:hover .card-background {filter: brightness(0.9);transform: scale(1.05);}
.greeting .card-background {background-image: url("https://images.unsplash.com/photo-1607344645866-009c320b63e0?w=800");}
.giftcard .card-background {background-image: url("https://images.unsplash.com/photo-1513885535751-8b9238bd345a?w=800");}
/* Gradient Overlay */
.gradient-overlay {position: absolute;inset: 0;transition: opacity 0.5s ease;}
.greeting .gradient-overlay {background: linear-gradient(180deg, rgba(244, 63, 94, 0.4) 0%, rgba(244, 63, 94, 0.8) 100%);}
.giftcard .gradient-overlay {background: linear-gradient(180deg, rgba(59, 130, 246, 0.4) 0%, rgba(59, 130, 246, 0.8) 100%);}
/* Animated Shapes */
.deco-shape {position: absolute;opacity: 0.3;transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);}
.triangle {width: 0;height: 0;border-left: 60px solid transparent;border-right: 60px solid transparent;border-bottom: 100px solid rgba(255, 255, 255, 0.2);}
.greeting .triangle {top: 10%;left: 15%;transform: rotate(-15deg);}
.giftcard .triangle {top: 15%;right: 20%;transform: rotate(25deg);}
.circle-ring {width: 120px;height: 120px;border: 4px solid rgba(255, 255, 255, 0.3);border-radius: 50%;}
.greeting .circle-ring {top: 30%;right: 10%;}
.giftcard .circle-ring {bottom: 35%;left: 10%;}
.cross {width: 60px;height: 60px;position: relative;}
.cross::before,
.cross::after {content: "";position: absolute;background: rgba(255, 255, 255, 0.3);}
.cross::before {width: 100%;height: 8px;top: 50%;transform: translateY(-50%);}
.cross::after {width: 8px;height: 100%;left: 50%;transform: translateX(-50%);}
.greeting .cross {bottom: 30%;left: 20%;transform: rotate(20deg);}
.giftcard .cross {top: 25%;left: 25%;transform: rotate(-15deg);}
/* Zigzag */
.zigzag {width: 100px;height: 30px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%) -25px 0,
        linear-gradient(225deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%) -25px 0,
        linear-gradient(315deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%),linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%);background-size: 25px 50px;}
.greeting .zigzag {bottom: 45%;right: 25%;}
.giftcard .zigzag {bottom: 50%;right: 15%;transform: rotate(10deg);}
.split-card:hover .deco-shape {opacity: 0.5;transform: scale(1.2) rotate(10deg);}
/* Content */
.card-inner {position: absolute;inset: 0;display: flex;flex-direction: column;justify-content: flex-end;padding: 60px;z-index: 10;}
.card-number {font-size: 8rem;font-weight: 800;color: rgba(255, 255, 255, 0.1);position: absolute;top: 40px;left: 40px;line-height: 1;}
.split-card:hover .card-number {color: rgba(255, 255, 255, 0.2);}
.card-label {font-size: 0.85rem;font-weight: 600;text-transform: uppercase;letter-spacing: 4px;color: rgba(255, 255, 255, 0.7);margin-bottom: 15px;transform: translateY(20px);opacity: 0;transition: all 0.5s ease 0.1s;}
.split-card:hover .card-label {transform: translateY(0);opacity: 1;}
.card-title {font-size: 3.5rem;font-weight: 800;color: white;line-height: 1.1;margin-bottom: 20px;transform: translateY(30px);transition: transform 0.5s ease;}
.split-card:hover .card-title {transform: translateY(0);}
.card-desc {font-size: 1rem;color: rgba(255, 255, 255, 0.8);line-height: 1.8;max-width: 400px;margin-bottom: 30px;transform: translateY(30px);opacity: 0;transition: all 0.5s ease 0.15s;}
.split-card:hover .card-desc {transform: translateY(0);opacity: 1;}
.card-cta {display: inline-flex;align-items: center;gap: 15px;padding: 18px 35px;background: white;border: none;border-radius: 4px;font-weight: 700;font-size: 0.9rem;text-transform: uppercase;letter-spacing: 2px;cursor: pointer;transition: all 0.4s ease;width: fit-content;transform: translateY(30px);opacity: 0;}
.greeting .card-cta {color: #f43f5e;}
.giftcard .card-cta {color: #3b82f6;}
.split-card:hover .card-cta {transform: translateY(0);opacity: 1;}
.card-cta:hover {transform: translateX(10px) !important;box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);}
.card-cta svg {width: 20px;height: 20px;transition: transform 0.3s ease;}
.card-cta:hover svg {transform: translateX(8px);}
/* Center Divider */
@media (max-width: 900px) {
    header.style-1 .main-menu > ul > li i{
        display: none;
    }
    .split-container {flex-direction: column;
    }
    .split-card {min-height: 80vh;
    }
    .split-card:hover {flex: 1.2;
    }
    .card-title {font-size: 2.5rem;
    }
    .card-number {font-size: 5rem;
    }
}
.fa-chevron-down:before{font-size: 12px;}

.card-container {display: flex;width: 100%;justify-content: center;max-width: 1400px;gap: 0;}
.card {width: 50%;height: 600px;position: relative;overflow: hidden;cursor: pointer;}
.card-image {width: 100%;height: 100%;object-fit: cover;transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.card:hover .card-image {transform: scale(1.1);}
/* Overlay */
.card-overlay {position: absolute;inset: 0;transition: all 0.5s ease;}
.greeting-card .card-overlay {
    background: linear-gradient(
        135deg,
        rgba(236, 72, 153, 0.85) 0%,
        rgba(239, 68, 68, 0.75) 50%,
        rgba(251, 146, 60, 0.65) 100%);}
.gift-card .card-overlay {
    background: linear-gradient(
        135deg,
        rgba(99, 102, 241, 0.85) 0%,
        rgba(139, 92, 246, 0.75) 50%,
        rgba(236, 72, 153, 0.65) 100%);}
.card:hover .card-overlay {opacity: 0.95;}
/* Decorative Shapes */
.shape {position: absolute;border-radius: 50%;opacity: 0.2;transition: all 0.6s ease;}
.greeting-card .shape-1 {width: 300px;height: 300px;background: rgba(255, 255, 255, 0.3);top: -100px;right: -100px;}
.greeting-card .shape-2 {width: 200px;height: 200px;background: rgba(255, 255, 255, 0.2);bottom: -50px;left: -50px;}
.greeting-card .shape-3 {width: 100px;height: 100px;background: rgba(255, 255, 255, 0.25);top: 50%;left: 20%;border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;}
.gift-card .shape-1 {width: 250px;height: 250px;background: rgba(255, 255, 255, 0.3);bottom: -80px;right: -80px;}
.gift-card .shape-2 {width: 180px;height: 180px;background: rgba(255, 255, 255, 0.2);top: -60px;left: -60px;}
.gift-card .shape-3 {width: 80px;height: 80px;background: rgba(255, 255, 255, 0.25);top: 40%;right: 25%;border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;}
.card:hover .shape-1 {transform: scale(1.2) rotate(10deg);opacity: 0.3;}
.card:hover .shape-2 {transform: scale(1.3) rotate(-15deg);opacity: 0.35;}
.card:hover .shape-3 {transform: scale(1.5) translateY(-20px);opacity: 0.4;}
/* Content */
.card-content {position: absolute;inset: 0;display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 40px;text-align: center;z-index: 10;}
.card-icon {width: 80px;height: 80px;background: rgba(255, 255, 255, 0.2);backdrop-filter: blur(10px);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin-bottom: 25px;border: 2px solid rgba(255, 255, 255, 0.3);transition: all 0.4s ease;}
.card:hover .card-icon {transform: scale(1.1) rotate(10deg);background: rgba(255, 255, 255, 0.3);border-color: rgba(255, 255, 255, 0.5);}
.card-icon svg {width: 40px;height: 40px;fill: white;}
.card-title {font-family: "Playfair Display", serif;font-size: 3rem;font-weight: 700;color: white;margin-bottom: 15px;text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);transition: transform 0.4s ease;}
/* .card:hover .card-title {transform: translateY(-5px);} */
.card-subtitle {font-size: 1.1rem;color: rgba(255, 255, 255, 0.9);margin-bottom: 30px;max-width: 300px;line-height: 1.6;transition: all 0.4s ease;}
.card:hover .card-subtitle {transform: translateY(-3px);}
.card-btn {padding: 15px 40px;background: rgba(255, 255, 255, 0.2);backdrop-filter: blur(10px);border: 2px solid rgba(255, 255, 255, 0.4);border-radius: 50px;color: white;font-weight: 500;font-size: 1rem;cursor: pointer;transition: all 0.4s ease;text-transform: uppercase;letter-spacing: 2px;}
.card-btn:hover {background: white;color: #1a1a2e;transform: translateY(-3px);box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);}
/* Divider Line */
.divider {position: absolute;left: 50%;top: 0;bottom: 0;width: 2px;background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent);z-index: 20;transform: translateX(-50%);}
/* Responsive */
@media (max-width: 900px) {
    .card-container {flex-direction: column;
    }
    .card {width: 100%;height: 500px;
    }
    .divider {display: none;
    }
    .card-title {font-size: 2.5rem;
    }
}

.banner-img img {height: 36vh;object-fit: contain;max-width: 411px;width: 400px !important;}
.banner-img .row.g-3.align-items-center {gap: 0rem;width: 67%;}
/* Auction Image Container - Hover Image Swap */
.auction-img-container {position: relative;display: block;/* overflow: hidden; */
}

.auction-img-container .primary-img {width: 100%;height: auto;padding: 15%;display: block;transition: opacity 0.3s ease;}
.auction-slider {overflow: visible !important;}

.auction-img-container .hover-img {position: absolute;object-fit: contain;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;transition: opacity 0.3s ease;}

.auction-card:hover .hover-img {opacity: 1;}

.auction-card:hover .primary-img {opacity: 0;}

img.ribbon-bottom {position: absolute;bottom: 29%;width: 55%;opacity: 0.9;right: 0;z-index: 1;display: none;}

/* Ribbon Ball Styles */
img.ribbon-ball {position: absolute;width: 13%;z-index: 9999999999;top: 1px;left: 5px;opacity: 0.9;transform-origin: 50% 0%;transform: rotate(0deg);}


#sheet{z-index: 1000;}
@keyframes pendulum-damping {
    0% {transform: rotate(0deg);
    }
    5% {transform: rotate(35deg);
    }
    15% {transform: rotate(-28deg);
    }
    25% {transform: rotate(22deg);
    }
    35% {transform: rotate(-16deg);
    }
    45% {transform: rotate(12deg);
    }
    55% {transform: rotate(-8deg);
    }
    65% {transform: rotate(5deg);
    }
    75% {transform: rotate(-3deg);
    }
    85% {transform: rotate(1.5deg);
    }
    92% {transform: rotate(-0.5deg);
    }
    100% {transform: rotate(0deg);
    }
}

.auction-card.style-3:hover img.ribbon-ball {animation: pendulum-damping 2s ease-out forwards;}
#bg-canvas {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;pointer-events: none;}

.cards-container {display: grid;grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));gap: 60px;max-width: 1200px;width: 100%;}
/* SMOOTH FOLD & UNFOLD */
.card-fold {perspective: 1500px;height: 300px;position: relative;width: 100%;}
.fold-wrapper {position: relative;width: 100%;height: 100%;transform-style: preserve-3d;}
.fold-top,
.fold-bottom {position: absolute;width: 100%;height: 75%;border-radius: 8px;display: flex;align-items: center;justify-content: center;overflow: hidden;transform-style: preserve-3d;backface-visibility: hidden;}
.fold-top {top: -75px;transform-origin: center bottom;animation: smoothFoldTop 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;}
.fold-bottom {bottom: -75px;transform-origin: center top;animation: smoothFoldBottom 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;}
.fold-top img,
.fold-bottom img {width: 100%;height: 100%;object-fit: cover;display: block;}
.fold-content {position: absolute;width: 100%;height: 100%;top: 0;left: 0;border-radius: 8px;display: flex;align-items: center;justify-content: center;overflow: hidden;animation: smoothContentReveal 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;z-index: 10;}
.fold-content img {width: 100%;height: 100%;object-fit: cover;}
/* SMOOTH KEYFRAME ANIMATIONS */
@keyframes smoothFoldTop {
    0% {transform: rotateX(0deg);
    }
    20% {transform: rotateX(0deg);
    }
    50% {transform: rotateX(-95deg);
    }
    80% {transform: rotateX(0deg);
    }
    100% {transform: rotateX(0deg);
    }
}

@keyframes smoothFoldBottom {
    0% {transform: rotateX(0deg);
    }
    20% {transform: rotateX(0deg);
    }
    50% {transform: rotateX(95deg);
    }
    80% {transform: rotateX(0deg);
    }
    100% {transform: rotateX(0deg);
    }
}

@keyframes smoothContentReveal {
    0% {opacity: 0;transform: scale(0.95);filter: blur(5px);
    }
    15% {opacity: 0;transform: scale(0.95);filter: blur(5px);
    }
    40% {opacity: 1;transform: scale(1);filter: blur(0px);
    }
    60% {opacity: 1;transform: scale(1);filter: blur(0px);
    }
    85% {opacity: 0;transform: scale(0.95);filter: blur(5px);
    }
    100% {opacity: 0;transform: scale(0.95);filter: blur(5px);
    }
}

.label {position: absolute;bottom: 15px;left: 50%;transform: translateX(-50%);background: rgba(255, 255, 255, 0.25);color: white;padding: 6px 14px;border-radius: 20px;font-size: 10px;font-weight: 700;letter-spacing: 1.5px;backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.2);text-transform: uppercase;}



::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #305fdf, #58b4ff, #58b4ff, #2752c9) !important;
    border-radius: 3px;
}

.mob-login-btn{
    display: none;
}

footer ol, ul{
  padding-left: 0 !important;
}

* {font-family: 'Nunito', sans-serif;}

  /* h1, h2, h3, h4, .display-font {font-family: 'Cormorant Garamond', serif;} */
  /* Scrollbar */::-webkit-scrollbar { width: 6px; height: 6px; }::-webkit-scrollbar-track { background: #f1f5f9; }::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

  /* Floating Sidebar */
  .floating-sidebar {position: fixed;top: 59%;left: 0;transform: translateY(-50%) translateX(-100%);z-index: 50;transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);}
  .floating-sidebar.open {transform: translateY(-53%) translateX(0)}
  /* Toggle Button */
  .sidebar-toggle {position: fixed;left: 0;top: 50%;transform: translateY(-50%);z-index: 51;transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);}
  .sidebar-toggle.shifted {left: 260px;}
  @media (min-width: 640px) {
      .sidebar-toggle.shifted {left: 280px;
      }
  }

  /* Card Animations */
  .product-card {transition: all 0.3s ease;}
  .product-card:hover {transform: translateY(-4px);box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.12);}
  .product-card:hover .card-img {transform: scale(1.05);}
  .product-card:hover .quick-btns {opacity: 1;transform: translateY(0);}
  .card-img {transition: transform 0.4s ease;}
  .quick-btns { place-content: flex-end; opacity: 0;transform: translateY(8px);transition: all 0.3s ease;}
  /* Checkbox */
  .filter-checkbox {appearance: none;width: 16px;height: 16px;border: 1.5px solid #d1d5db;border-radius: 4px;cursor: pointer;transition: all 0.2s ease;flex-shrink: 0;}
  .filter-checkbox:checked {background: linear-gradient(135deg, #3b82f6, #2563eb);border-color: #2563eb;}
  .filter-checkbox:checked::after {content: '✓';display: flex;align-items: center;justify-content: center;color: white;font-size: 10px;font-weight: bold;}
  .filter-checkbox:hover {border-color: #3b82f6;}
  /* Range Slider */
  .range-slider {-webkit-appearance: none;width: 100%;height: 4px;border-radius: 4px;background: linear-gradient(90deg, #3b82f6, #f97316);outline: none;}
  .range-slider::-webkit-slider-thumb {-webkit-appearance: none;width: 16px;height: 16px;border-radius: 50%;background: white;border: 2px solid #3b82f6;cursor: pointer;box-shadow: 0 2px 6px rgba(0,0,0,0.15);transition: all 0.2s ease;}
  .range-slider::-webkit-slider-thumb:hover {transform: scale(1.2);box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);}
  /* Accordion */
  .accordion-content {max-height: 0;overflow: hidden;transition: max-height 0.3s ease;}
  .accordion-content.open {max-height: 500px;}
  .accordion-icon {transition: transform 0.3s ease;}
  .accordion-icon.rotated {transform: rotate(180deg);}
  /* Badge Shine */
  @keyframes shine {0% { background-position: -100% center; }100% { background-position: 200% center; }
  }

  .badge-shine {background: linear-gradient(90deg, #f97316, #fbbf24, #f97316);background-size: 200% auto;animation: shine 3s linear infinite;}
  /* Heart Animation */
  @keyframes heartPop {0%, 100% { transform: scale(1); }50% { transform: scale(1.2); }
  }

  .heart-pop {animation: heartPop 0.3s ease;}
  /* Overlay */
  .sidebar-overlay {opacity: 0;visibility: hidden;transition: all 0.3s ease;}
  .sidebar-overlay.visible {opacity: 1;visibility: visible;}
  /* Toast */
  .toast {transform: translateX(120%);transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);}
  .toast.show {transform: translateX(0);}
  /* Subtle float animation */
  @keyframes subtleFloat {0%, 100% { transform: translateY(0); }50% { transform: translateY(-3px); }
  }

  .subtle-float {animation: subtleFloat 3s ease-in-out infinite;}
  /* Loading skeleton */
  @keyframes shimmer {0% { background-position: -200% 0; }100% { background-position: 200% 0; }
  }

  .skeleton {background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);background-size: 200% 100%;animation: shimmer 1.5s infinite;}


  /* Custom scrollbar */
  ::-webkit-scrollbar {width: 8px;}
  ::-webkit-scrollbar-track {background: #f1f1f1;}
  ::-webkit-scrollbar-thumb {background: linear-gradient(180deg, #4A90D9, #B8A9C9);border-radius: 4px;}
  /* Fade in animation */
  .fade-in-up {opacity: 0;transform: translateY(40px);transition: opacity 0.8s ease-out, transform 0.8s ease-out;}
  .fade-in-up.visible {opacity: 1;transform: translateY(0);}
  /* Stagger children */
  .stagger-children > * {opacity: 0;transform: translateY(30px);transition: opacity 0.6s ease-out, transform 0.6s ease-out;}.stagger-children.visible > *:nth-child(1) { transition-delay: 0.1s; }.stagger-children.visible > *:nth-child(2) { transition-delay: 0.2s; }.stagger-children.visible > *:nth-child(3) { transition-delay: 0.3s; }.stagger-children.visible > *:nth-child(4) { transition-delay: 0.4s; }.stagger-children.visible > *:nth-child(5) { transition-delay: 0.5s; }.stagger-children.visible > *:nth-child(6) { transition-delay: 0.6s; }

  .stagger-children.visible > * {opacity: 1;transform: translateY(0);}
  /* Gradient text */
  .gradient-text {background: linear-gradient(135deg, #4A90D9, #5e5e5e, #4A90D9);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}
  /* Animated gradient background */
  .animated-gradient {background: linear-gradient(-45deg, #E8F0FE, #F3E5F5, #E8DFF0, #E8F0FE);background-size: 400% 400%;animation: gradient-shift 8s ease infinite;}
  /* Glow effect */
  .glow-effect {transition: all 0.4s ease;}
  .glow-effect:hover {box-shadow: 0 0 30px rgba(90, 90, 90, 0.178), 0 0 60px rgba(104, 104, 104, 0.075);}
  /* Card hover lift */
  .card-hover {transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
  .card-hover:hover {transform: translateY(-12px) scale(1.02);}
  /* Morphing border */
  .morph-border {animation: morph 8s ease-in-out infinite;}
  /* Floating shapes */
  .floating-shape {position: absolute;pointer-events: none;opacity: 0.6;}
  /* Parallax effect */
  .parallax {transition: transform 0.1s ease-out;}
  /* Pricing toggle */
  .pricing-content {display: none;opacity: 0;transform: translateY(20px);transition: opacity 0.4s ease, transform 0.4s ease;}
  .pricing-content.active {display: block;opacity: 1;transform: translateY(0);}
  /* Toggle button active state */
  .toggle-btn {transition: all 0.3s ease;}
  .toggle-btn.active {background: linear-gradient(135deg, #4A90D9, #5C7A99);color: white;box-shadow: 0 4px 15px rgba(74, 144, 217, 0.4);}
  /* Best choice badge */
  .best-choice {position: relative;border: 2px solid #4A90D9;}
  .best-choice::before {content: 'Best Choice';position: absolute;top: -12px;left: 50%;transform: translateX(-50%);background: linear-gradient(135deg, #4A90D9, #5C7A99);color: white;padding: 4px 16px;border-radius: 20px;font-size: 12px;font-weight: 600;}
  /* Particle effect */
  .particle {position: absolute;width: 6px;height: 6px;background: rgba(74, 144, 217, 0.5);border-radius: 50%;animation: sparkle 2s ease-in-out infinite;}
  /* Category card gradient overlay */
  .category-gradient {
      background: linear-gradient(135deg, 
          rgba(74, 144, 217, 0.1), 
          rgba(184, 169, 201, 0.1), 
          rgba(92, 122, 153, 0.1));}
  /* Icon container */
  .icon-container {background: linear-gradient(135deg, #4A90D9, #B8A9C9);transition: all 0.3s ease;}
  .icon-container:hover {transform: rotate(10deg) scale(1.1);}

  .gift-card-container {perspective: 1200px;}
  .floating-card {animation: floatCard 4s ease-in-out infinite;}
  @keyframes floatCard {0%, 100% { transform: translateY(0px) rotateX(0deg) rotateY(0deg); }50% { transform: translateY(-30px) rotateX(5deg) rotateY(5deg); }
  }


  .magic-border {position: relative;border: 2px solid transparent;
      background: linear-gradient(white, white) padding-box,linear-gradient(135deg, #f97316, #ec4899, #f59e0b) border-box;}
  .shimmer {position: relative;overflow: hidden;}
  .shimmer::after {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);animation: shimmerEffect 3s infinite;}
  @keyframes shimmerEffect {0% { left: -100%; }100% { left: 100%; }
  }

  .floating-emoji {animation: emojiFloat 3s ease-in-out infinite;}
  .floating-emoji:nth-child(2) {animation-delay: 0.5s;}
  .floating-emoji:nth-child(3) {animation-delay: 1s;}
  @keyframes emojiFloat {0%, 100% { transform: translateY(0) scale(1); }50% { transform: translateY(-20px) scale(1.1); }
  }

  .pulse-glow {animation: pulseGlow 2s ease-in-out infinite;}
  @keyframes pulseGlow {0%, 100% { box-shadow: 0 0 20px rgba(233, 30, 99, 0.5); }50% { box-shadow: 0 0 40px rgba(233, 30, 99, 0.8); }
  }
  
  /* ============================================
  MARQUEE STYLES - OPTION 3: Static Sides + Center Marquee
  ============================================ */
  .topbar-area {background: var(--dark);position: relative;}
  .topbar-area::after {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 3px;background: var(--gradient);background-size: 200% 100%;animation: gradientFlow 3s linear infinite;}
  @keyframes gradientFlow {0% { background-position: 0% 50%; }100% { background-position: 200% 50%; }
  }

  .topbar-flex {display: flex;align-items: center;justify-content: space-between;gap: 20px;padding: 0;}
  /* Static Sides */
  .topbar-static {flex-shrink: 0;z-index: 5;}
  .topbar-static.left {background: linear-gradient(to right, var(--dark) 80%, transparent);padding-right: 30px;}
  .topbar-static.right {background: linear-gradient(to left, var(--dark) 80%, transparent);padding-left: 30px;}
  .static-link {display: flex;align-items: center;gap: 8px;color: rgba(255,255,255,0.8);font-size: 13px;font-weight: 500;transition: all 0.3s ease;}
  .static-link:hover {color: var(--accent);}
  .static-link i {color: var(--accent);}
  /* Center Marquee */
  .topbar-marquee {flex: 1;overflow: hidden;position: relative;mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);}
  .marquee-scroll {display: flex;width: max-content;animation: scrollMarquee 20s linear infinite;}
  .marquee-scroll:hover {animation-play-state: paused;}
  @keyframes scrollMarquee {0% { transform: translateX(0); }100% { transform: translateX(-50%); }
  }

  .scroll-content {display: flex;align-items: center;gap: 0;}
  .scroll-content span {display: flex;align-items: center;gap: 8px;padding: 0 20px;color: rgba(255, 255, 255, 0.85);font-size: 13px;font-weight: 500;white-space: nowrap;}
  .scroll-content span i {color: #ff6b6b !important;}
  .scroll-content .divider {color: var(--primary);font-size: 10px;padding: 0 10px;animation: starSpin 3s linear infinite;}
  @keyframes starSpin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }
  }

  /* Language Dropdown */
  .language-area {position: relative;}
  .language-btn {display: flex;align-items: center;gap: 6px;color: rgba(255,255,255,0.8);font-size: 13px;font-weight: 500;cursor: pointer;padding: 6px 12px;border-radius: 20px;background: rgba(255,255,255,0.1);transition: all 0.3s ease;}
  .language-btn:hover {background: var(--primary);color: white;}
  .language-btn i:first-child {color: #ff6b6b;}
  .language-btn:hover i:first-child {color: white;}
  .language-list {position: absolute;top: calc(100% + 10px);right: 0;background: white;border-radius: 12px;padding: 8px;min-width: 150px;opacity: 0;visibility: hidden;transform: translateY(10px);transition: all 0.3s ease;box-shadow: 0 10px 40px rgba(0,0,0,0.2);z-index: 100;}
  .language-area:hover .language-list {opacity: 1;visibility: visible;transform: translateY(0);}
  .language-list li a {display: block;padding: 10px 14px;color: var(--dark);font-size: 13px;border-radius: 8px;transition: all 0.3s ease;}
  .language-list li a:hover {background: var(--light);color: var(--primary);}
  /* Responsive */
  @media (max-width: 991px) {
      .topbar-static.left,
      .topbar-static.right {display: none;
      }
      
      .topbar-marquee {mask-image: none;-webkit-mask-image: none;
      }
  }

  @media (max-width: 576px) {
      .scroll-content span {font-size: 12px;padding: 0 15px;
      }
  }