/* CSS for Top Page */

/* Hero Section */
#hero {
    position: relative;
    padding-top: 80px;
    padding-bottom: 50px;
    /* Reduced from 150px because we WANT overlap now */
    /* overflow: hidden; REMOVED to allow overlap */
    min-height: 85vh;
    background-color: #fff;
    margin-bottom: 0;
    z-index: 2;
    isolation: isolate;
}



.hero-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    margin: 0;
    position: relative;
    z-index: 2;
}

.hero-text {
    padding-left: 5%;
    /* Reduced slightly since centered */
    width: 45%;
    position: relative;
    z-index: 3;
    text-align: center;
    /* CENTER ALIGN TEXT */
}

.hero-text h1 {
    font-size: 40px;
    /* Slightly larger */
    font-weight: 900;
    margin-bottom: 24px;
    line-height: 1.5;
    letter-spacing: 0.1em;
    color: #333;
    /* User requested Drop Shadow/Backdrop Shadow */
    /* Using BOTH as requested, but much softer to hit the "sweet spot" */

    /* 1. The colored glow (Blue) - reduced opacity from 0.6 to 0.25, radius from 20px to 8px */
    filter: drop-shadow(0px 4px 8px rgba(18, 89, 232, 0.35));

    /* 2. The depth shadow (Black/Gray) - subtle for readability */
    text-shadow: 0px 2px 4px rgba(18, 89, 232, 0.1);
}

.hero-text p {
    font-size: 24px;
    color: #666;
    margin-bottom: 30px;
    line-height: 1.8;
    font-weight: 500;
    /* User requested Bluish Shadow similar to H1 but lower intensity */
    filter: drop-shadow(0px 2px 4px rgba(18, 89, 232, 0.25));
    text-shadow: 0px 1px 2px rgba(18, 89, 232, 0.1);
}

.hero-text-dark {
    color: #333 !important;
    font-weight: 700 !important;
}

/* Decorative Squares */
/* Decorative Squares */
.decorative-square {
    /* DEFAULT SIZE (Adjust individual classes to override if needed) */
    width: 24px;
    height: 24px;
    /* Layered background: semi-transparent color on top, white underneath to block content behind */
    background: linear-gradient(rgba(160, 196, 255, 0.8), rgba(160, 196, 255, 0.8)), linear-gradient(#fff, #fff);
    position: absolute;
}

.square-1 {
    /* --- ADJUST SIZE & POSITION HERE --- */
    width: 42px;
    height: 42px;
    top: 12px;
    left: 150px;
}

.square-2 {
    /* --- ADJUST SIZE & POSITION HERE --- */
    width: 18px;
    height: 18px;
    bottom: -235px;
    right: 55%;
}

.square-3 {
    /* --- ADJUST SIZE & POSITION HERE --- */
    width: 16px;
    /* Example size */
    height: 16px;
    /* Use top/bottom and left/right to position */
    top: -5%;
    left: 90%;
}

/* Hero Image & Mask */
/* Hero Image & Mask */
.hero-image {
    /* WIDTH: Change 42% to resize image */
    width: 50%;

    /* POSITIONING: Adjust these to move image */
    position: relative;
    z-index: 2;
    margin-right: 5%;

    /* UNCOMMENT & CHANGE TO MOVE: */
    /* top: -20px;  Move UP */
    /* top: 20px;   Move DOWN */
    /* right: 20px; Move LEFT */
    /* right: -20px; Move RIGHT */
    top: 100px;
    right: 0;
}

.image-mask {
    /* USER REQUEST: "Straight in left side, Curved at right" */
    border-top-left-radius: 0;
    border-top-right-radius: 300px;
    /* ADJUST CURVE HERE */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 5px;
    overflow: hidden;
    box-shadow: -10px 15px 30px rgba(2, 105, 248, 0.1);
}


/* Ensure the logo slide container itself is white and fills height */
.hero-carousel-track>.hero-carousel-slide:nth-child(3) {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* Also ensure the image has a white background and fills the container */
.hero-carousel-slide img[src*="top-carousel-2"] {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    background-color: #fff;
    /* Ensure solid white background to cover circles */
}

.image-mask img {
    width: 100%;
    /* ADJUST HEIGHT HERE: Increase min-height for taller image */
    min-height: 500px;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Big Blue Circle Decoration (Bottom Left) */
.hero-background-circle {
    position: absolute;
    /* Layered background: semi-transparent Figma color on top, white underneath to block dotted line */
    background: linear-gradient(#0070A5CC, #0070A5CC), linear-gradient(#fff, #fff);
    border-radius: 50%;
    z-index: 100 !important;
    /* Force GPU compositing layer - guarantees paint order */
    transform: translateZ(0);
    will-change: transform;

    /* --- ADJUST SIZE HERE --- */
    width: 270px;
    height: 270px;

    /* --- ADJUST POSITION HERE --- */
    bottom: -150px;
    left: 0px;
}

/* Top Circle Decoration (Top Center/Left) */
/* Top Circle Decoration (Top Center/Left) */
.hero-background-circle-top {
    position: absolute;
    background-color: #0070A5CC;
    border-radius: 50%;
    /* MAKES IT A CIRCLE */
    z-index: 1;

    /* --- ADJUST SIZE HERE --- */
    width: 100px;
    height: 100px;

    /* --- ADJUST POSITION HERE --- */
    /* Use 'top' to move up/down, 'left' to move left/right */
    top: 130px;
    left: 780px;

    /* CLIP/FADE REVERTED: User wanted solid opaque coverage */
    /* -webkit-mask-image: linear-gradient(to right, black 30%, transparent 95%); */
    /* mask-image: linear-gradient(to right, black 30%, transparent 95%); */
}

/* Bottom Right Circle Decoration (Third Circle) */
/* Bottom Right Circle Decoration (Third Circle) */
.hero-background-circle-right {
    position: absolute;
    background-color: #0070A5CC;
    border-radius: 50%;
    z-index: 1;
    /* Sits behind image */

    /* --- ADJUST SIZE HERE --- */
    width: 200px;
    height: 200px;

    /* --- ADJUST POSITION HERE --- */
    /* Use 'bottom' to move up/down, 'right' to move left/right */
    bottom: -18px;
    right: -25px;

    /* CLIP/FADE REVERTED: User wanted solid opaque coverage */
    /* -webkit-mask-image: linear-gradient(to top left, black 30%, transparent 95%); */
    /* mask-image: linear-gradient(to top left, black 30%, transparent 95%); */
}

/* Dotted Line */
.hero-dotted-line {
    /* 
       pointer-events: none; -> Allows clicks to pass through this element to buttons/links behind it.
       z-index: 0; -> Places this element BEHIND the image (z-index: 2) and circles (z-index: 1).
    */
    position: absolute;
    top: 150px;
    /* User set value */
    left: 70px;
    /* User set value */
    width: 100%;
    height: 80%;
    /* Reduced from 100% to prevent it from hanging below the section */
    z-index: 0;
    pointer-events: none;
    background-image: url('../images/hero-line.svg');
    background-repeat: no-repeat;
    background-position: top center;
    /* Aligns SVG to top to respect top: 85px */
    background-size: contain;

    /* CLIP THE LINE IN THE MIDDLE ("in between") */
    /* EXPLANATION: Black = Visible (Opaque), Transparent = Invisible (Hidden). 
       The Blue color comes from the SVG image itself, mask just hides/shows it. */

    /* CONTROL THE "SWEET SPOT" HERE: */
    /* 1. First % (e.g. 40%): Where line starts fading OUT (Left edge of gap) */
    /* 2. Second % (e.g. 45%): Where line is FULLY GONE */
    /* 3. Third % (e.g. 90%): Where line starts fading IN (Right edge of gap) */
    /* 4. Fourth % (e.g. 95%): Where line is FULLY BACK */

    /* INSTANT CUT (HARD STOPS): Same % for start/end of gap */
    -webkit-mask-image: linear-gradient(to right, black 41.3%, transparent 41.3%, transparent 91%, black 91%);
    mask-image: linear-gradient(to right, black 41.3%, transparent 41.3%, transparent 91%, black 91%);
}

/* Philosophy Section */
#philosophy {
    text-align: center;
    padding: 80px 0;
    position: relative;
}

.philosophy-text {
    font-size: 18px;
    font-weight: 500;
    max-width: 800px;
    margin: 0 auto;
}

/* Values Section (G.R.O.W.T.H) */
#values {
    padding: 60px 0;
    background-color: var(--white);
}

.values-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* --- ADJUST LEFT/RIGHT SPACING HERE --- */
    /* Increase to push bars further from the edge, decrease to bring them closer */
    padding: 0;
}

.value-item {
    display: flex;
    background-color: #004177;
    /* Dark Blue per Figma */
    color: white;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
    /* Ensure spacing if not handled by list gap */
}

.value-key {
    background-color: transparent;
    /* Transparent to show item bg */
    /* --- ADJUST INNER LEFT SPACE HERE --- */
    /* Increase left value for more empty blue space before the letter */
    /* Increase right value (2nd number) for more space before the separator | */
    padding: 15px 175px 15px 80px;
    width: 200px;
    font-weight: bold;
    display: flex;
    align-items: center;
    font-size: 18px;
    position: relative;
}

/* Floating vertical line separator - doesn't touch top/bottom edges */
.value-key::after {
    content: '';
    position: absolute;
    right: 0;
    /* --- ADJUST LINE GAP HERE --- */
    /* Increase top/bottom % to make line shorter, decrease to make it taller */
    top: 20%;
    bottom: 20%;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.4);
}

.key-letter {
    color: #ffd700;
    font-size: 20px;
    /* --- ADJUST SPACE BETWEEN LETTER AND KEYWORD HERE --- */
    /* e.g. space between "G" and "Goodness" */
    margin-right: 25px;
}

.value-desc {
    /* --- ADJUST GAP BETWEEN | AND JAPANESE TEXT HERE --- */
    /* Increase left value for more space after the separator | */
    padding: 15px 20px 15px 40px;
    display: flex;
    align-items: center;
    flex-grow: 1;
    background-color: transparent;
    /* Transparent */
    /* --- ADJUST VALUE TEXT SIZE HERE --- */
    /* Increase for bigger text, decrease for smaller */
    font-size: 22px;
}

/* Service Section */
#service {
    padding: 80px 0;
    background-color: #f5f8fa;
}

.service-container {
    display: flex;
    align-items: center;
    gap: 50px;
}

.service-image {
    flex: 1;
}

.service-image img {
    /* --- ADJUST IMAGE SIZE HERE --- */
    width: 100%;
    /* Increase for bigger image, decrease for smaller (max-width works well too) */
    /* width: 500px;  <-- Uncomment and set value for fixed width */
    /* height: auto; <-- Keeps aspect ratio */
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.service-content {
    flex: 1;
    /* --- CENTER TEXT CONTENT --- */
    text-align: center;
    /* Center lines relative to each other */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Center vertically if needed */
}

/* Restored for other sections (like Recruit) */
.section-title.text-left {
    text-align: left;
}

.section-title {
    margin-bottom: 20px;
    color: #0E73EB;
}

.service-content p {
    margin-bottom: 30px;
}

/* News Section */
#news {
    padding: 80px 0;
}

#news .section-title {
    text-align: left;
    /* Ensure it aligns with the list */
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.news-btn-wrapper {
    text-align: center;
    margin-top: 40px;
}

/* Company Section */
#company {
    background-image: url('../images/company-bg.jpg');
    background-size: cover;
    background-position: center;
    height: 400px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.company-overlay {
    /* --- ADJUST OVERLAY OPACITY HERE (0 = Clear/Bright, 1 = White/Invisible) --- */
    background-color: rgba(255, 255, 255, 0.15);
    /* Reduced from 0.5 to make image clearer */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.section-title.text-white {
    color: var(--primary-color);
}

.company-desc {
    margin: 20px 0 30px;
    color: #333;
    font-weight: 500;
}

/* Recruit Section */
#recruit {
    padding: 80px 0;
    padding-bottom: 20px;
}

.recruit-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.recruit-image {
    flex: 1;
}

.recruit-image img {
    width: 100%;
    border-radius: 20px;
}

.recruit-content {
    flex: 1;
    /* --- ADJUST TEXT ALIGNMENT HERE (left, center, right) --- */
    text-align: center;
    /* Center aligned as requested */

    /* --- ADJUST CONTENT OFFSET TO RIGHT HERE --- */
    padding-left: 80px;
    /* Shift content towards right */
}

/* Override the text-left class so Recruit heading also centers */
.recruit-content .section-title.text-left {
    text-align: center;
}

.recruit-content p {
    margin-bottom: 40px;
    font-size: 18px;
    /* --- ADJUST LINE ALIGNMENT HERE --- */
    /* display: inline-block; <--- Uncomment if you want specific behavior */
}

/* Recruit Button Specific Color */
#recruit .btn-primary {
    /* --- ADJUST BUTTON COLOR HERE --- */
    background-color: #004177;
    border-color: #004177;

    /* --- ADJUST BUTTON SIDE MARGINS HERE (To move further right, increase left margin) --- */
    /* margin-left: 20px; */
}




/* Mobile-only line break utility */
.sp-only {
    display: none;
}

/* ========================================
   MOBILE RESPONSIVE (SP)
   ======================================== */
@media (max-width: 900px) {

    /* Show mobile-only line breaks */
    .sp-only {
        display: inline;
    }

    /* Hero Section */
    #hero {
        padding-top: 70px;
        padding-bottom: 30px;
        min-height: auto;
        /* Create gap for the overflowing circle to not overlap Philosophy title */
        margin-bottom: 80px;
    }

    .hero-content {
        flex-direction: column-reverse;
        /* Text bottom, Image top */
    }

    .hero-text,
    .hero-image {
        width: 100%;
        padding: 0;
    }

    .hero-image {
        /* --- ADJUST MOBILE POSITION HERE --- */
        right: 0;
        top: 17px;
        margin-bottom: 60px;
        /* Increased from 30px for more gap to text */

        /* --- ADJUST MOBILE SIZE HERE --- */
        width: 100%;
        /* FIX: Reset desktop margin-right: 5% which was shifting the container */
        margin-right: 0;
    }

    .image-mask {
        border-radius: 0 150px 0 0;
        /* Changed to top-right curve as per user request */
        width: 90%;
        margin: 0 auto;
    }

    .hero-text {
        padding: 0 20px;
        text-align: center;
    }

    .hero-text h1 {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .hero-text p {
        font-size: 18px;
        line-height: 1.6;
    }

    /* Decorative Squares - Mobile Positions */
    /* Decorative Squares - Mobile Positions */
    .square-1 {
        /* --- ADJUST MOBILE SIZE & POSITION HERE --- */
        width: 20px;
        height: 20px;
        top: -50px;
        left: 60px;
        z-index: 1000;
    }

    .square-2 {
        /* --- ADJUST MOBILE SIZE & POSITION HERE --- */
        width: 15px;
        height: 15px;
        bottom: 20px;
        right: 30px;
    }

    .square-3 {
        /* --- ADJUST MOBILE SIZE & POSITION HERE --- */
        width: 15px;
        height: 15px;
        top: 250px;
        left: 150px;
    }

    /* Blue Circle (Bottom Left) */
    /* Blue Circle (Bottom Left) */
    .hero-background-circle {
        /* --- ADJUST MOBILE SIZE HERE --- */
        width: 100px;
        height: 100px;
        z-index: 100 !important;
        /* Force GPU compositing layer */
        transform: translateZ(0);
        will-change: transform;
        background: linear-gradient(#0070A5CC, #0070A5CC), linear-gradient(#fff, #fff);

        /* --- ADJUST MOBILE POSITION HERE --- */
        bottom: -110px;
        left: 10px;
    }

    /* Top Circle */
    .hero-background-circle-top {
        /* --- ADJUST MOBILE SIZE HERE --- */
        width: 60px;
        height: 60px;

        /* --- ADJUST MOBILE POSITION HERE --- */
        /* FIX: Use 'right' instead of 'left' to prevent horizontal overflow */
        /* right: -30px pushes it halfway off screen, but overflow-x: hidden will cut it */
        top: 45px;
        left: auto;
        right: 30px;
    }

    /* Right Circle */
    .hero-background-circle-right {
        /* --- ADJUST MOBILE SIZE HERE --- */
        width: 70px;
        height: 70px;

        /* --- ADJUST MOBILE POSITION HERE --- */
        /* FIX: Use % so it scales on all screen heights. ~38% from bottom keeps it inside the image area */
        /* z-index:1 keeps it behind the image (z-index:2) */
        bottom: 28%;
        right: 0px;
    }

    /* Dotted Line - Mobile */
    .hero-dotted-line {
        /* --- ADJUST MOBILE POSITION HERE --- */
        top: 88%;
        left: -12px;
        width: calc(100% + 24px);
        /* Extended width to reach both edges of the screen */
        height: 100%;
        /* Ensure it's visible */
        z-index: 0;
        /* Lower than circles */
        display: block;
        background-position: top center;
        background-size: contain;
        /* FIX: Clip so dotted line starts from the CENTER of the bottom-left circle.
           Math: circle left:10px + circle half-width:50px = 60px from viewport left.
           This div starts at left:-12px, so from div edge: 60px + 12px = 72px.
           Using 60px gives a small overlap so the line visually "touches" the circle. */
        clip-path: inset(0 0 0 60px);

        /* DISABLE DESKTOP MASK ON MOBILE */
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* News Section - Mobile Spacing */
    #news {
        /* --- MOBILE: ADJUST NEWS SECTION PADDING HERE --- */
        padding: 50px 0;
        /* Reduced from 80px 0 */
    }

    /* Philosophy */
    #philosophy {
        /* --- ADJUST MOBILE SPACING HERE --- */
        /* Change the first value (top padding) to control gap above "Philosophy" title */
        /* Change the second value (bottom padding) to control gap below the text */
        padding: 90px 0 0px;
    }

    .philosophy-text {
        font-size: 16px;
        padding: 0 10px;
    }

    /* Values */
    .values-list {
        /* --- MOBILE: ADJUST GAP BETWEEN BLUE BARS HERE --- */
        /* Decrease for less gap, increase for more gap */
        gap: 12px;
    }

    .value-item {
        /* --- MOBILE: EXTRA BOTTOM MARGIN FOR EACH BAR --- */
        /* Set to 0 if gap above is enough */
        margin-bottom: 0px;
    }

    .value-key {
        /* --- MOBILE: Fixed width so separator | is always aligned --- */
        width: 140px;
        min-width: 140px;
        /* --- MOBILE: ADJUST INNER SPACING HERE --- */
        padding: 10px 15px 10px 20px;
        /* --- MOBILE: ADJUST KEY FONT SIZE HERE --- */
        font-size: 12px;
    }

    .value-desc {
        /* --- MOBILE: ADJUST GAP AFTER | HERE --- */
        padding: 10px 10px 10px 15px;
        /* --- MOBILE: ADJUST VALUE TEXT SIZE HERE --- */
        font-size: 13px;
    }

    /* Service */
    #service {
        /* --- MOBILE: ADJUST SECTION TOP/BOTTOM PADDING HERE --- */
        /* First value = top padding (space before title) */
        /* Second value = bottom padding (space below button) */
        padding: 40px 0 30px;
    }

    .service-container {
        flex-direction: column;
        /* --- MOBILE: ADJUST GAP BETWEEN TITLE/IMAGE/TEXT HERE --- */
        gap: 20px;
    }

    .service-container .section-title {
        /* Reduce space below title (closer to image) */
        margin-bottom: 10px;
    }

    .pc-only {
        display: none;
    }

    .service-image img {
        /* --- MOBILE: ADJUST IMAGE WIDTH HERE --- */
        width: 90%;
        margin: 0 auto 20px;
        /* 20px bottom margin */
        display: block;
    }

    .service-content {
        text-align: center;
        /* --- MOBILE: ADJUST BUTTON GAP HERE --- */
    }

    .service-content .btn-primary {
        /* Pull button closer to text if needed */
        margin-top: 10px;
        /* Reduce space below button even more if needed */
        margin-bottom: 10px;
    }


    .section-title.text-left {
        text-align: center;
    }



    /* Company */
    #company {
        height: auto;
        min-height: 300px;
    }

    /* Recruit - Custom Mobile Layout */
    #recruit {
        /* --- ADJUST MOBILE TOP/BOTTOM SPACE HERE --- */
        padding-top: 50px;
        /* Reduced from 80px */
        padding-bottom: 0px;
        /* Reduced space below button */
    }

    .recruit-container {
        flex-direction: column;
        gap: 20px;
        /* Reduce overall gap */
    }

    /* Unwrap the content div so children participate in the grid/flex order */
    .recruit-content {
        display: contents;
    }

    /* 1. Heading on TOP */
    .recruit-content .section-title {
        order: 1;
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
        /* Space below heading */
    }

    /* 2. Image in MIDDLE */
    .recruit-image {
        order: 2;
        width: 100%;
        display: flex;
        /* Centering helper */
        justify-content: center;
    }

    .recruit-image img {
        /* Reduce width as requested */
        width: 90%;
        max-width: 350px;
        /* Cap width for larger phones */
        margin: 0 auto;
        display: block;
        /* --- ADJUST MOBILE BORDER RADIUS HERE --- */
        border-radius: 10px;
        /* Reduced from 20px (desktop default) */
    }

    /* 3. Text BELOW Image */
    .recruit-content p {
        order: 3;
        text-align: center;
        width: 100%;
        padding: 0 20px;
        /* Breathing room */
        margin-bottom: 30px;
    }

    /* 4. Button at BOTTOM */
    .recruit-content .btn-primary {
        order: 4;
        margin: 0 auto;
        /* Center button */
        display: inline-block;
        /* Ensure it respects text-align center if parent allows, or margin auto */
    }
}

/* ========================================
   HERO CAROUSEL
   ======================================== */

/* Container - Fits inside the .image-mask */
.hero-carousel-container {
    width: 100%;
    height: 100%;
    /* Fill the mask */
    overflow: hidden;
    position: relative;
    /* Ensure radius is respected if overflow hidden wasn't enough on parent */
    border-radius: inherit;
}

.hero-carousel-track {
    display: flex;
    width: 500%;
    /* 5 slides (Clone + 3 Real + Clone) * 100% width each */
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.hero-carousel-slide {
    width: 20%;
    /* 1/5 of the track */
    height: 100%;
    flex-shrink: 0;
    position: relative;
}

.hero-img-carousel {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Logo Slide: use 'contain' so logo is not cropped.
   Image is now JPG (no transparency), so white bg is baked in. */
.hero-carousel-slide:nth-child(3) .hero-img-carousel {
    object-fit: contain;
}

/* Navigation Buttons override for Hero */
.hero-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.3);
    /* Lighter/Glassy for hero */
    color: #333;
    border: none;
    font-size: 24px;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.3s;
    user-select: none;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.hero-carousel-btn:hover {
    background-color: rgba(255, 255, 255, 0.8);
    color: #000;
}

.hero-carousel-btn.prev {
    left: 20px;
}

.hero-carousel-btn.next {
    right: 20px;
}

/* Mobile Adjustments for Hero Carousel */
@media (max-width: 900px) {
    .image-mask {
        /* Ensure mask allows buttons to be clickable if they overflow (they shouldn't, but good check) */
        position: relative;
    }

    .hero-carousel-btn {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }

    .hero-carousel-btn.prev {
        left: 10px;
    }

    .hero-carousel-btn.next {
        right: 10px;
    }
}