/* ============ Color & Type System (3-5 colors) ============ */
 :root {
     --services-bg: #000000;
     /* neutral */
     --services-foreground: #ffffff;
     /* neutral */
     --services-muted: rgba(0, 0, 0, 0.55);
     /* overlay neutral */
     /* --services-accent: #ff2b6a; */
     --services-accent: #bf14cf;
     /* accent (pink/red) */
     --services-secondary: #e5e7eb;
     /* light gray for paragraph */
 }


 .left .services-copy .services-line-1 {
     color: #000;
 }

 .left .services-copy .services-subtitle {
     color: #000;
     text-align: left;
 }

 /* ============ Hero Section ============ */
 .services-hero {
     position: relative;
     min-height: 100dvh;
     isolation: isolate;
     display: grid;
     align-items: center;
     /* Fallback poster image if video can't play */
     background: center / cover no-repeat url("https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Slide%2016_9%20-%2033-9E1AV1vzUbLpdWUus1aVSbLZisiTfR.png");
 }

 .services-hero.workBanner {
     min-height: 50dvh;
     background: linear-gradient(180deg, rgba(138, 56, 245, 0.9), rgba(204, 0, 203, 0.9)) !important;
     margin-top: 50px;

 }

 .services-hero.CreatorBanner {
     min-height: 100vh;
     background: #fff;

 }

 .services-hero.CreatorBanner .services-container.creator {
     justify-content: space-between;
 }

 .services-video {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: -2;
 }

 .services-overlay {
     position: absolute;
     inset: 0;
     background: var(--services-muted);
     z-index: -1;
 }

 .services-container {
     width: 100%;
     max-width: 90%;
     margin-inline: auto;
     display: flex;
     align-items: center;
     min-height: inherit;
 }

 .services-container.creator {
     width: 100%;
     max-width: 90%;
     margin-inline: auto;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     align-items: center;
     justify-content: center;
     gap: 2rem;
     /* spacing between grid items */
     min-height: inherit;
 }

 .rightBannerImage img {
     max-width: 100%;
 }


 /* Optional: fine-tune for very small screens */
 @media (max-width: 480px) {
     .services-container.creator {
         grid-template-columns: 1fr;
         /* single column on very small screens */
     }

     .services-container.creator .services-copy {
         order: 2;
     }

     .services-container.creator .rightBannerImage {
         order: 1;
     }

     .services-hero.CreatorBanner {
         min-height: auto;
         margin-top: 70px;
         margin-bottom: 60px;
     }
 }


 .services-copy {
     max-width: 48rem;
 }

 .services-title {
     margin: 0 0 clamp(16px, 3vw, 28px);
     letter-spacing: 0.3px;
     font-family: Poppins, sans-serif;
     color: #fff;
     line-height: 1.2;
 }

 .services-line-1 {
     display: block;
     font-weight: 800;
     font-size: clamp(36px, 7vw, 64px);
 }

 .services-line-2 {
     display: block;
     font-weight: 800;
     font-size: clamp(36px, 7vw, 64px);
 }

 .services-accent {
     color: var(--services-accent);
 }

 .services-subtitle {
     margin: 0;
     color: var(--services-secondary);
     font-size: clamp(14px, 2.2vw, 22px);
     max-width: 45ch;
 }

 /* ============ Layout tweaks for larger screens ============ */


 /* Respect reduced motion preference */
 @media (prefers-reduced-motion: reduce) {
     .services-video {
         animation: none;
     }
 }


 .wrapperTabSec {
     max-width: 90%;
     margin: 0 auto;
 }

 .service-2-container {
     padding: 100px 40px;
     transition: background 0.3s ease, color 0.3s ease;
     position: relative;
 }

 /* Tabs */
 .service-2-tabs {
     display: flex;
     justify-content: center;
     gap: clamp(16px, 5vw, 40px);
     margin-bottom: clamp(40px, 8vw, 70px);
     font-weight: 600;
     font-size: clamp(22px, 4vw, 48px);
     flex-wrap: wrap;
     text-align: center;
 }

 .service-2-tab {
     cursor: pointer;
     position: relative;
     color: #7a7a7a;
     transition: color 0.3s ease;
 }

 .service-2-tab.active {
     color: #f62681;
 }

 .service-2-container.brands-active .service-2-tab.active[data-tab="brands"] {
     color: #fff;
 }

 .service-2-container.brands-active .service-2-tab[data-tab="creators"] {
     color: rgba(255, 255, 255, 0.5);
 }

 .service-2-tab.active::after {
     content: "";
     position: absolute;
     bottom: -10px;
     left: 0;
     width: 100%;
     height: 3px;
     background: currentColor;
 }

 /* Sections */
 .service-2-sections {
     display: none;
     flex-direction: column;
     gap: 20px;
 }

 .service-2-sections.active {
     display: flex;
 }

 /* Items */
 .service-2-item {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 60px;
     padding: 60px 0;
     position: relative;
     overflow: visible;
     /* ✅ allow hover image to flow outside */
     min-height: 380px;
     align-items: center;
 }

 .service-2-item:hover {
     border-bottom: 1px solid lightgrey;
     border-top: 1px solid lightgrey;
 }

 .service-2-title {
     font-size: clamp(30px, 5vw, 52px);
     font-weight: 600;
     color: #000000;
     opacity: 0.3;
     transition: opacity 0.3s ease, color 0.3s ease;
 }

 .service-2-desc {
     font-size: 22px;
     line-height: 1.8;
     color: #000000;
     opacity: 0.5;
     transition: opacity 0.3s ease, color 0.3s ease;
 }

 .service-2-item:hover .service-2-title,
 .service-2-item:hover .service-2-desc {
     opacity: 1;

 }

 /* Hover-follow image */
 .service-2-hover-img {
     position: absolute;
     top: 0;
     left: 0;
     width: 380px;
     height: 220px;
     background-size: cover;
     background-position: center;
     opacity: 0;
     pointer-events: none;
     border-radius: 16px;
     transform: translate(-50%, -50%) scale(0.95);
     transition: opacity 0.15s ease, transform 0.2s ease;
     /* ✅ faster */
     z-index: 9999;
     /* ✅ always on top */
 }

 .service-2-item:hover .service-2-hover-img {
     opacity: 1;
 }

 /* Brand mode */
 .service-2-container.brands-active {
     background: #f62681;
     color: #fff;
 }

 .service-2-container.brands-active .service-2-title,
 .service-2-container.brands-active .service-2-desc {
     color: #fff;
 }

 /* Responsive */
 @media(max-width:900px) {
     .service-2-item {
         grid-template-columns: 1fr;
         text-align: left;
         gap: 25px;
         min-height: 300px;
     }

     .service-2-hover-img {
         width: 200px;
         height: 200px;
     }

     .service-2-title {
         font-size: 26px;
     }

     .service-2-desc {
         font-size: 16px;
     }

 }

 @media (max-width:500px) {
     .service-2-container {
         padding: 50px 10px;
     }
 }



 /*  scroll sec ======= */

 .scroll-sec-fake-section {
     height: 100vh;
     background: #222;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 28px;
     color: #aaa;
 }

 .scroll-sec-sticky-wrapper {
     position: relative;
     background-color: #2B2B2B;
 }

 .scroll-sec-main-container {
     position: sticky;
     top: 0;
     display: flex;
     width: 90%;
     height: 100vh;
     overflow: hidden;
     /* background-color: #2B2B2B; */
     margin: 0 auto;
 }

 /* Left timeline */
 .scroll-sec-left-section {
     flex: 1;
     padding: 40px 20px;
     margin: 0 auto;
     overflow: hidden;
     position: relative;
 }

 .scroll-sec-timeline-inner {
     position: relative;
     will-change: transform;
 }

 .scroll-sec-workflow-title {
     font-size: 28px;
     font-weight: bold;
     margin-bottom: 40px;
 }

 /* Timeline line */
 .scroll-sec-timeline {
     position: relative;
     margin-left: 20px;
     padding-left: 30px;
     border-left: 2px solid rgba(255, 255, 255, 0.2);
 }

 /* Step block */
 .scroll-sec-step {
     margin-bottom: 70px;
     position: relative;
 }

 /* Dots on the timeline */
 .scroll-sec-circle {
     width: 14px;
     height: 14px;
     background: #000;
     border-radius: 50%;
     border: 2px solid #fff;
     position: absolute;
     left: -39px;
     top: 5px;
 }

 .scroll-sec-step h3 {
     margin: 0;
     font-size: clamp(20px, 4vw, 32px);
     /* min 20px, fluid, max 32px */
     font-weight: bold;
     color: #fff;
 }

 .scroll-sec-step h4 {
     margin: 6px 0 10px;
     font-size: clamp(16px, 3vw, 28px);
     /* min 16px, fluid, max 28px */
     color: #ff2674;
     font-weight: bold;
 }


 .scroll-sec-step p {
     font-size: 14px;
     color: #bbb;
     line-height: 1.6;
     margin: 0;
 }

 /* Right sticky image */
 .scroll-sec-right-section {
     flex: 1;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .scroll-sec-right-section img {
     max-width: 90%;
     max-height: 100%;
     object-fit: contain;
 }

 /* Responsive styles */
 @media screen and (max-width: 1024px) {
     .scroll-sec-left-section {
         padding: 30px 15px;
     }

     .scroll-sec-workflow-title {
         font-size: 24px;
         margin-bottom: 30px;
     }

     .scroll-sec-step {
         margin-bottom: 50px;
     }
 }

 @media screen and (max-width: 850px) {
     .scroll-sec-main-container {
         flex-direction: column;
         height: auto;
         position: relative;
     }

     .scroll-sec-left-section {
         padding: 30px 20px;
         order: 2;
     }

     .scroll-sec-right-section {
         order: 1;
         border-left: none;
         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         height: 40vh;
         min-height: 300px;
     }

     .scroll-sec-sticky-wrapper {
         height: auto !important;
     }

     .scroll-sec-timeline-inner {
         transform: none !important;
     }

     .scroll-sec-workflow-title {
         text-align: center;
         font-size: 22px;
     }

     .scroll-sec-timeline {
         margin-left: 10px;
         padding-left: 20px;
     }

     .scroll-sec-circle {
         left: -32px;
     }
 }

 @media screen and (max-width: 480px) {
     .scroll-sec-left-section {
         padding: 20px 15px;
     }

     .scroll-sec-workflow-title {
         font-size: 20px;
         margin-bottom: 25px;
     }

     .scroll-sec-step {
         margin-bottom: 40px;
     }

     .scroll-sec-step h3,
     .scroll-sec-step h4 {
         font-size: 15px;
     }

     .scroll-sec-step p {
         font-size: 13px;
     }

     .scroll-sec-right-section {
         height: 35vh;
         min-height: 250px;
     }



 }

 @media (max-width:600px) {
     .service-2-title {
         opacity: 1 !important;
     }

     .service-2-desc {
         opacity: 1 !important;
     }

     .service-2-item:hover .service-2-title,
     .service-2-item:hover .service-2-desc {
         opacity: 1 !important;

     }

     /* Hover-follow image */
     .service-2-hover-img {
         opacity: 0 !important;
     }

     .service-2-item:hover .service-2-hover-img {
         opacity: 0 !important;
     }

     .service-2-item {
         border-bottom: 1px solid lightgrey;
         border-top: 1px solid lightgrey;
     }

 }



 /* Our Work css start here  */



 /* Container */
 .work-bnr-container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 15px;
     flex-wrap: wrap;
     width: 90%;
     max-width: 90%;
     margin: 0 auto;
     margin-bottom: 50px;

 }

 /* Left Section (dropdowns) */
 .work-bnr-left {
     display: flex;
     gap: 15px;
     flex-wrap: wrap;
 }

 /* Dropdown wrapper */
 .work-bnr-select-wrapper {
     position: relative;
     display: inline-block;
 }

 .work-bnr-select {
     padding: 15px 35px 15px 15px;
     border-radius: 8px;
     border: none;
     outline: none;
     font-size: 14px;
     appearance: none;
     background: #fff;
     min-width: 180px;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
     cursor: pointer;
     font-family: 'Inter', sans-serif;
 }

 /* Dropdown icon */
 .work-bnr-select-icon {
     position: absolute;
     right: 12px;
     top: 50%;
     transform: translateY(-50%);
     width: 14px;
     height: 14px;
     pointer-events: none;
 }

 /* Search wrapper */
 .work-bnr-search-wrapper {
     position: relative;
     flex: 1;
     max-width: 320px;
 }

.work-bnr-search-wrapper {
    position: relative;
    max-width: 400px; /* adjust as needed */
}

.work-bnr-search-form {
    position: relative;
    display: flex;
    align-items: center;
}

.work-bnr-input {
    width: 100%;
    padding: 15px 80px 15px 15px; /* extra space for both buttons */
    border-radius: 8px;
    border: none;
    outline: none;
    font-size: 14px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    font-family: 'Inter', sans-serif;
}

/* Common button styling */
.work-bnr-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Search button - right side */
.work-bnr-search-btn {
    right: 40px; /* space before reset button */
    width: 20px;
    height: 20px;
}

/* Reset button - far right */
.work-bnr-reset-btn {
    right: 12px;
    width: 18px;
    height: 18px;
}

.work-bnr-btn svg {
    pointer-events: none;
}


 /* Responsive for 800px - 850px */
 @media (max-width: 850px) and (min-width: 800px) {
     .work-bnr-container {
         flex-direction: column;
         align-items: stretch;
     }

     .work-bnr-left {
         justify-content: space-between;
         width: 100%;
     }

     .work-bnr-select {
         flex: 1;
         min-width: auto;
     }

     .work-bnr-search-wrapper {
         margin-top: 10px;
         width: 100%;
         max-width: 100%;
     }
 }


 .work-comp-container {
     max-width: 96%;
     margin-left: auto;
     /* push it to the right */
     margin-right: 0;
     /* no gap on right side */
     padding: 20px;
     position: relative;
     margin-bottom: 60px;
 }


 .work-comp-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
 }

 .work-comp-left h3 {
     margin: 0;
     font-size: clamp(1.5rem, 4vw, 2.5rem);
     color: #222;
     font-weight: 400;
 }

 .work-comp-left p {
     margin: 0;
     font-size: clamp(0.75rem, 2vw, 0.875rem);
     color: #555;
 }

 .work-comp-right {
     font-size: clamp(0.875rem, 2.5vw, 1rem);
     font-weight: 600;
     color: #222;
     cursor: pointer;
 }

 /* Slider */
 .work-comp-slider .work-comp-card,
 .work-comp-slider2 .work-comp-card,
 .work-comp-slider3 .work-comp-card,
 .work-comp-slider4 .work-comp-card {
     border-radius: 12px;
     padding: 0 0 15px;
     margin: 0 10px;
     overflow: hidden;
     transition: transform 0.3s ease;
 }

 .work-comp-slider .slick-slide,
 .work-comp-slider2 .slick-slide,
 .work-comp-slider3 .slick-slide,
 .work-comp-slider4 .slick-slide {
     padding: 10px 0;
 }

 .work-comp-image {
     height: clamp(180px, 40vw, 260px);
     border-radius: 12px;
     margin-bottom: 12px;
     overflow: hidden;
 }

 .work-comp-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 12px;
     display: block;
 }

 .work-comp-text {
     padding: 0 10px;
 }

 .work-comp-text h4 {
     font-size: clamp(0.875rem, 2.5vw, 1.125rem);
     margin: 0 0 8px;
     color: #000000;
     margin-bottom: 15px;
     line-height: 1.3;
     font-weight: 400;
 }

 .work-comp-text p {
     font-size: clamp(0.7rem, 2vw, 0.75rem);
     margin: 0;
     color: #555;
 }

 .slick-list {
     margin: 0 -10px;
 }

 /* Custom Arrows */
 .work-comp-prev,
 .work-comp-prev2,
 .work-comp-prev3,
 .work-comp-prev4,
 .work-comp-next,
 .work-comp-next2,
 .work-comp-next3,
 .work-comp-next4 {
     position: absolute;
     top: 50%;
     background: rgba(0, 0, 0, 0.6);
     color: #fff;
     border: none;
     width: clamp(30px, 8vw, 35px);
     height: clamp(30px, 8vw, 35px);
     border-radius: 50%;
     cursor: pointer;
     z-index: 10;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: clamp(14px, 4vw, 18px);
     transition: background 0.3s;
 }

 .work-comp-prev:hover,
 .work-comp-next:hover {
     background: rgba(0, 0, 0, 0.8);
 }

 .work-comp-prev,
 .work-comp-prev2,
 .work-comp-prev3,
 .work-comp-prev4 {
     left: clamp(-1px, -3vw, -15px);
 }

 .work-comp-next,
 .work-comp-next2,
 .work-comp-next3,
 .work-comp-next4 {
     right: clamp(28px, -3vw, -15px);
 }

 .philosophy-section.creatorPage {
     background: #ef2487 url("https://zestyy.in/wp-content/uploads/2025/09/creatorPgaeThird.png") no-repeat top right;
     background-size: contain;
     /* or 'cover' depending on effect */
     display: flex;
     align-items: center;
     padding: 100px 20px;
     position: relative;
     overflow: hidden;
     height: 100vh;
 }


 @media (max-width:860px) {
     .philosophy-section.creatorPage {
         grid-template-columns: 1fr;
         gap: 2rem;
         text-align: center;
         padding-top: 60px;
         justify-content: center;
         margin: auto;
         height: auto;
     }

     .philosophy-section.creatorPage .content-right {
         min-height: 0;
     }


 }

 @media (max-width:768px) {
     .services-container.creator .services-title {
         text-align: center;
     }

     .services-container.creator .zesty-cta-buttons {
         justify-content: center;
     }
 }

 @media (max-width: 480px) {
     .work-comp-container {
         max-width: 95%;
         padding: 15px 10px;
     }

     .work-comp-header {
         flex-direction: row;
         align-items: flex-start;
         gap: 8px;
         margin-bottom: 15px;
     }

     .work-comp-right {
         align-self: center;
     }

     .work-comp-slider,
     .work-comp-slider2,
     .work-comp-slider3,
     .work-comp-slider4 .slick-slide {
         padding: 8px 0;
     }
 }

 .ourWorkMain {
     margin-top: 80px;
     margin-bottom: 80px;
 }

 .scroll-sec-step.active .scroll-sec-circle {
     background-color: #ff2674;
     transform: scale(1.2);
     animation: pulseOut 1.5s ease-out infinite;
 }

 @keyframes pulseOut {
     0% {
         transform: scale(1);
         box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.6);
     }

     50% {
         transform: scale(1.3);
         box-shadow: 0 0 0 10px rgba(255, 107, 107, 0.3);
     }

     100% {
         transform: scale(1.2);
         box-shadow: 0 0 0 0 rgba(255, 107, 107, 0);
     }
 }


 .scroll-sec-step.active p {
     color: #fff;
     /* Fix applied */
 }


 /* Smooth transition for image changes ------------Creator age css  */
 .scroll-sec-right-section.creatorPage img {
     transition: opacity 0.5s ease-in-out;
 }

 .scroll-sec-step.creatorPage h3 {
     margin-bottom: 20px;
     font-size: clamp(20px, 4vw, 52px);

 }

 .scroll-sec-step.creatorPage p {
     font-size: 22px;
 }

 .scroll-sec-step.creatorPage .SmallFont {
     font-size: 26px;
     color: #ff2674;
     margin-bottom: 25px;
 }

 .mobWraaperFlip {
     display: grid;
     grid-template-columns: 1fr;
     /* default for <500px */
     gap: 20px;
     /* optional spacing */
 }

 @media (min-width: 500px) and (max-width: 860px) {
     .mobWraaperFlip {
         grid-template-columns: 1fr 1fr;
     }
 }

 .philosophy-section.creatorPage .content-left h1 {
     text-align: left;
 }

 .philosophy-section.creatorPage .content-left p {
     text-align: left;
     padding-right: 28px;
 }



 @media (max-width:860px) {
     .philosophy-section.creatorPage .content-left p {
         text-align: left;
         padding-right: 0px;
     }
 }

 .creaTorProfileSection .get-in-submit-btn {
     position: absolute;
     bottom: 50px;
     right: 50px;
 }

 /* Creator Listing Css start here  */

 .relativeBanner{
    position: relative;
 }

 .CreatorLisingMain {
     background: #2B2B2B;
     padding-bottom: 130px;
 }
 .creaTorProfileSection1{
    text-align: center;
 }
 .creatorListing .work-bnr-container{
    padding-bottom: 100px;
 }

 .creatorListingGrid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
     max-width: 90%;
     margin: 0 auto;
     padding-bottom: 100px;
 }

 .innerGrid-card {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
 }

 .innerGrid-card img {
     width: 100%;
 }

 .innerGrid-card h3 {
     font-size: clamp(20px, 4vw, 42px) !important;
     margin-bottom: 5px !important;
 }

.innerGrid-card .SmallFont {
  font-size: clamp(15px, 2vw, 20px) !important;
}

.innerGrid-card p {
  font-size: clamp(13px, 1.5vw, 16px) !important;
  color: #ffffff;
}

.services-hero.workBanner.creatorListing{
    /* margin-top: 0px; */
    padding-bottom: 100px;
}
.CreatorLisingMain .about-first-heading{
    text-align: left !important;
    width: 90%;
        margin: auto !important;
        color: #fff;
}

.CreatorNotFound {
  color: #fff;
  font-size: clamp(1rem, 2vw + 0.5rem, 2.5rem);
  /* text-align: center; */
}

.services-hero.workBanner.creatorListing{
    height: 50vh !important;
}


.services-container.listingBanner{
    justify-content: space-between;
    gap: 30px;
    min-height: auto !important;
}


 @media (max-width: 1024px) {
     .creatorListingGrid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 850px) {
     .creatorListingGrid {
         grid-template-columns: 1fr 1fr;
     }
     .services-container.listingBanner {
    gap: 30px;
    min-height: auto !important;
    flex-direction: column;
    align-items: revert;
}
 }

 @media (max-width: 500px) {
     .creatorListingGrid {
         grid-template-columns: 1fr;
     }
     .work-bnr-container.srch{
        flex-direction: column;
            align-items: self-start;
            width: 100%;
     }
 }

 /* Scroll to top css */

   /* ========== Scroll-to-top button ========== */
  .rg-scrolltop {
    position: fixed;
    right: 20px;              /* distance from right edge */
    bottom: 20px;             /* distance from bottom edge */
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: transparent;
    border:none;
    /* background: rgba(255,255,255,0.95); */
    display: grid;
    place-items: center;
    z-index: 9999;
    /* box-shadow: 0 6px 18px rgba(16,24,40,0.12); */
    cursor: pointer;
    transform: translateY(10px) scale(0.98);
    opacity: 0;
    pointer-events: none; /* disabled when hidden */
    transition: opacity .28s ease, transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .15s ease, border-color .15s ease;
  }

  /* Visible state (add .rg-is-visible) */
  .rg-scrolltop.rg-is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

  /* Hover & focus */
  .rg-scrolltop:focus,
  .rg-scrolltop:hover {
    outline: none;
    /* box-shadow: 0 10px 24px rgba(16,24,40,0.18); */
    /* border-color: rgba(0,0,0,0.18); */
    transform: translateY(-2px) scale(1.02);
  }

  /* Accessible focus ring */
  .rg-scrolltop:focus-visible {
    /* box-shadow: 0 0 0 4px rgba(59,130,246,0.18), 0 10px 24px rgba(16,24,40,0.18); */
  }

  /* The arrow (SVG) sizing */
  .rg-scrolltop__icon {
    width: 18px;
    height: 18px;
    display: block;
  }

  /* Optional: make smaller on very small screens */
  @media (max-width: 420px) {
    .rg-scrolltop {
      width: 44px;
      height: 44px;
      right: 14px;
      bottom: 14px;
    }
    .rg-scrolltop__icon {
      width: 16px;
      height: 16px;
    }
  }