/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
HTML content. To learn how to do something, just try searching Google for questions like
"how to change link color." */

/* Base Styles */
:root {
	    --pink: #9a7575;            /* Darker, muted rose */
    --light-pink: #b08e8e;      /* Muted mauve */
    --blue: #6a8d99;            /* Muted slate blue */
    --green: #7a917f;           /* Muted sage */
    --brown: #8f7d68;           /* Darker taupe */
    --gold: #a39770;            /* Muted antique gold */
    --cream: #e8e1d4;           /* Softer cream/eggshell */
    --dark-text: #2a2424;       /* Darker charcoal */
    --light-text: #bcbccc;      /* Muted lavender-gray */
    --glaucous: #4d8585;        /* Darker teal */
    --highlight: rgba(154, 117, 117, 0.25); /* Muted highlight */
    --bg-dark: rgba(42, 41, 50, 0.65);      /* Darker, more opaque background */
    --bg-light: rgba(232, 225, 212, 0.8);   /* Cream-based, less transparent */
    --border-radius: 0.25rem;   /* Keeping the same */
    --width: 46rem;             /* Keeping the same */
    --padding-horizontal: 2rem; /* Keeping the same */
    --padding-vertical: 2rem;   /* Keeping the same */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Lexend Giga', sans-serif;
    background-image: url('https://mokiverse.neocities.org/faebane/ui_images/faebane_bg.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    min-height: 100vh;
    color: var(--dark-text);
    line-height: 1.6;
    overflow-x: hidden;
}

#main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    position: relative;
    z-index: 1;
    padding: 0.5rem 1rem;
}

#main > .inner {
    max-width: 100%;
    position: relative;
    width: var(--width);
    z-index: 1;
    padding: 0.5rem var(--padding-horizontal);
}

/* Regular Link Styles */
a {
    color: var(--glaucous);
    text-decoration: none;
    transition: color 0.25s ease, border-bottom 0.25s ease;
    border-bottom: 1px solid transparent;
}

a:hover {
    color: var(--pink);
    border-bottom: 1px solid var(--pink);
}

/* Style for visited links (optional) */
a:visited {
    color: var(--blue);
}

/* Style for active/clicked links (optional) */
a:active {
    color: var(--gold);
}

/* Style for focused links (for accessibility) */
a:focus {
    outline: 2px solid var(--highlight);
    border-radius: 2px;
}

/* Navigation Styles */
#navbut {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

#navbut li {
    list-style: none;
}

#navbut li a {
    display: inline-block;
    width: 9.625rem;
    height: 1.625rem;
    line-height: 1.625rem;
    padding: 0 0.40625rem;
    vertical-align: middle;
    text-transform: lowercase;
    font-family: 'Lexend Giga', sans-serif;
    letter-spacing: 0.075rem;
    padding-left: calc(0.075rem + 0.40625rem);
    font-size: 0.625em;
    font-weight: 400;
    border-radius: var(--border-radius);
    box-shadow: 0rem 0rem 0.125rem 0rem rgba(255, 255, 255, 0.102);
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
    border: 1px solid rgba(255, 255, 255, 0.259);
    background-color: var(--bg-dark);
    color: var(--cream);
    backdrop-filter: blur(0.175rem);
}

#navbut li a:hover {
    background-color: var(--glaucous);
    color: white;
}

#navbut .n01 {
    background-color: var(--brown);
}

/* Container Styles */
.container {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-dark);
    backdrop-filter: blur(0.175rem);
    margin-bottom: 1.5rem;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.container > .wrapper {
    width: 100%;
}

.container > .wrapper > .inner {
    vertical-align: top;
    position: relative;
    max-width: 100%;
    border-radius: inherit;
    text-align: center;
    padding: 0.125rem;
}

/* Header Container */
#header-container {
    background-color: transparent;
    padding: 0;
    overflow: hidden;
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
}

#header-container .wrapper {
    padding: 0;
}

#header-container .inner {
    padding: 0;
}

.header-image {
    width: 100%;
    height: 300px;
    background-image: url('https://mokiverse.neocities.org/faebane/ui_images/header1.png');
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.header-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.5));
}

.site-title {
    position: absolute;
    bottom: 1.5rem;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 2;
    font-family: 'Eagle Lake', serif;
    font-size: 3.5rem;
    color: var(--cream);
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

.site-subtitle {
    position: absolute;
    bottom: 1rem;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 2;
    font-size: 1.2rem;
    font-style: italic;
    color: var(--cream);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* Content Container */
.content-container {
    background-color: var(--bg-light);
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--pink);
}

.content-wrapper {
    padding: 2rem;
}

/* Text Styles */
.style1 {
    text-align: center;
    color: var(--dark-text);
    font-family: 'Lexend Giga', sans-serif;
    letter-spacing: 0.125rem;
    width: calc(100% + 0.125rem);
    font-size: 0.75em;
    line-height: 1.5;
    font-weight: 400;
    padding-left: 1rem;
    padding-right: 1rem;
}

.style1 .p {
    display: block;
    position: relative;
    margin-bottom: 1rem;
}

.style1 .p:nth-child(n + 2) {
    margin-top: 0.625rem;
}

.style1 strong {
    font-weight: 600;
    color: var(--glaucous);
}

.style1 em {
    font-style: italic;
    color: var(--dark-text);
}

.style1 mark {
    background-color: var(--highlight);
    padding: 0.125rem 0.25rem;
    border-radius: 0.125rem;
}

.section-title {
    font-family: 'Eagle Lake', serif;
    font-size: 2rem;
    color: var(--dark-text);
    margin-bottom: 1.5rem;
    text-align: center;
    position: relative;
    padding-bottom: 1rem;
}

.section-title::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--pink), transparent);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* Divider */
.divider {
    display: block;
    width: 100%;
    height: 20px;
    margin: 2rem 0;
    background-image: url('https://mokiverse.neocities.org/faebane/ui_images/divider.png'); /* This would be your ornate divider image */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


/* Footer Styles */
footer {
    text-align: center;
    padding: 2rem 0;
    font-size: 0.9rem;
    color: var(--dark-text);
    opacity: 0.7;
}

.back-to-top {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.back-to-top a {
    display: inline-block;
    width: 9.625rem;
    height: 1.625rem;
    line-height: 1.625rem;
    padding: 0 0.40625rem;
    vertical-align: middle;
    text-transform: lowercase;
    font-family: 'Lexend Giga', sans-serif;
    letter-spacing: 0.075rem;
    padding-left: calc(0.075rem + 0.40625rem);
    font-size: 0.625em;
    font-weight: 400;
    border-radius: var(--border-radius);
    box-shadow: 0rem 0rem 0.125rem 0rem rgba(255, 255, 255, 0.102);
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
    border: 1px solid rgba(255, 255, 255, 0.259);
    background-color: var(--blue);
    color: var(--cream);
}

.back-to-top a:hover {
    background-color: var(--glaucous);
}

/* Decorative Elements */
.glaucous-glow {
    position: fixed;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(106, 181, 181, 0.2) 0%, rgba(106, 181, 181, 0) 70%);
    pointer-events: none;
    z-index: -1;
}

.glow1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.glow2 {
    bottom: 30%;
    right: 15%;
    width: 300px;
    height: 300px;
    animation-delay: 2s;
}


/* Character Roster Styles - Compact Version */
.character-roster-container {
    background-color: var(--bg-light);
    border-radius: var(--border-radius);
    border: 1px solid var(--pink);
    padding: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.roster-category {
    margin-bottom: 0.8rem;
    border-bottom: 1px dotted rgba(154, 117, 117, 0.3);
    padding-bottom: 0.8rem;
}

.roster-category:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.category-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.category-header h3 {
    font-family: 'Eagle Lake', serif;
    font-size: 0.9rem;
    margin: 0;
    color: var(--dark-text);
}

.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.7rem;
    position: relative;
}

.status-indicator::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    animation: pulse 2s infinite;
    opacity: 0;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.7; }
    70% { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1.5); opacity: 0; }
}

.roster-category.complete .status-indicator {
    background-color: var(--glaucous);
    box-shadow: 0 0 5px var(--glaucous);
}

.roster-category.complete .status-indicator::after {
    border: 1px solid var(--glaucous);
}

.roster-category.in-progress .status-indicator {
    background-color: var(--gold);
    box-shadow: 0 0 5px var(--gold);
}

.roster-category.in-progress .status-indicator::after {
    border: 1px solid var(--gold);
}

.roster-category.upcoming .status-indicator {
    background-color: var(--pink);
    box-shadow: 0 0 5px var(--pink);
}

.roster-category.upcoming .status-indicator::after {
    border: 1px solid var(--pink);
}

.roster-category.potential .status-indicator {
    background-color: var(--brown);
    box-shadow: 0 0 5px var(--brown);
}

.roster-category.potential .status-indicator::after {
    border: 1px solid var(--brown);
}

.character-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-left: 1.5rem;
}

.character-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: default;
}

.character-tag:hover {
    transform: translateY(-2px);
}

.roster-category.complete .character-tag {
    background-color: rgba(77, 133, 133, 0.1);
    border: 1px solid var(--glaucous);
    color: var(--glaucous);
}

.roster-category.complete .character-tag:hover {
    box-shadow: 0 2px 5px rgba(77, 133, 133, 0.3);
    background-color: rgba(77, 133, 133, 0.2);
}

.roster-category.in-progress .character-tag {
    background-color: rgba(163, 151, 112, 0.1);
    border: 1px solid var(--gold);
    color: var(--gold);
}

.roster-category.in-progress .character-tag:hover {
    box-shadow: 0 2px 5px rgba(163, 151, 112, 0.3);
    background-color: rgba(163, 151, 112, 0.2);
}

.roster-category.upcoming .character-tag {
    background-color: rgba(154, 117, 117, 0.1);
    border: 1px solid var(--pink);
    color: var(--dark-text);
}

.roster-category.upcoming .character-tag:hover {
    box-shadow: 0 2px 5px rgba(154, 117, 117, 0.3);
    background-color: rgba(154, 117, 117, 0.2);
}

.roster-category.potential .character-tag {
    background-color: rgba(143, 125, 104, 0.1);
    border: 1px solid var(--brown);
    color: var(--dark-text);
}

.roster-category.potential .character-tag:hover {
    box-shadow: 0 2px 5px rgba(143, 125, 104, 0.3);
    background-color: rgba(143, 125, 104, 0.2);
}

/* Footer links styling */
.footer-links {
    margin-top: 2rem;
    text-align: center;
}

/* Enhanced responsive styling */
@media (max-width: 768px) {
    .character-list {
        padding-left: 1rem;
    }
    
    .character-tag {
        font-size: 0.7rem;
        padding: 0.2rem 0.6rem;
    }
    
    .category-header h3 {
        font-size: 0.8rem;
    }
}

/* Enhanced responsive styling */
@media (max-width: 768px) {
    .character-list {
        padding-left: 1rem;
    }
    
    .character-tag {
        font-size: 0.7rem;
        padding: 0.2rem 0.6rem;
    }
    
    .category-header h3 {
        font-size: 0.8rem;
    }
}

/* Ornate Frame Style */
    .ornate-frame {
        position: relative;
        margin: 0.5rem auto 1.5rem; /* Reduced top margin from 1.5rem to 0.5rem */
        text-align: center;
        max-width: 80%;
    }
    
.ornate-frame .title-text {
    display: inline-block;
    font-family: 'Eagle Lake', serif;
    font-size: 1.2em;
    color: var(--dark-text);
    background-color: var(--bg-light);
    padding: 0.4rem 1.5rem; /* Slightly reduced vertical padding */
    position: relative;
    z-index: 2;
    letter-spacing: 0.125rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border: 1px solid var(--pink);
    border-radius: var(--border-radius);
}

.ornate-frame::before,
.ornate-frame::after {
    content: "✦"; /* You can replace this with any ornamental character */
    font-size: 1rem;
    color: var(--gold);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}

.ornate-frame::before {
    left: 10%;
}

.ornate-frame::after {
    right: 10%;
}

@keyframes float {
    0% { transform: translate(0, 0); }
    50% { transform: translate(10px, 15px); }
    100% { transform: translate(0, 0); }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    :root {
        --padding-horizontal: 1rem;
        --padding-vertical: 1.5rem;
    }
    #main > .inner {
        padding: 1rem;
    }
    .site-title {
        font-size: 2.5rem;
    }
    
    .site-subtitle {
        font-size: 1rem;
    }
    
    .header-image {
        height: 200px;
    }
    
    .content-wrapper {
        padding: 1.5rem 1rem;
    }
    
    #navbut li a {
        width: 8rem;
    }
    
    .style1 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .character-gallery ul {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .frame {
        width: 100px;
        height: 100px;
    }
}

/* Character Navigation */
.character-nav {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
}

.character-nav li a {
    display: inline-block;
    width: 8rem;
    height: 1.625rem;
    line-height: 1.625rem;
    vertical-align: middle;
    text-transform: lowercase;
    font-family: 'Lexend Giga', serif;
    letter-spacing: 0.075rem;
    font-size: 0.625em;
    font-weight: 400;
    border-radius: var(--border-radius);
    box-shadow: 0rem 0rem 0.125rem 0rem rgba(255, 255, 255, 0.102);
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
    border: 1px solid rgba(255, 255, 255, 0.259);
    color: var(--cream);
    backdrop-filter: blur(0.175rem);
}

.character-nav li a:hover {
    background-color: var(--glaucous);
}

.character-nav .c01 {
    background-color: var(--blue);
}

.character-nav .c02 {
    background-color: var(--brown);
}

.character-nav .c03 {
    background-color: var(--pink);
}

.character-nav .c04 {
    background-color: var(--green);
}

.character-nav .c05 {
    background-color: var(--gold);
}

/* Character Sections */        
.section-container {
    margin-bottom: 2rem;
    border-radius: var(--border-radius);
    background-color: var(--bg-light);
    backdrop-filter: blur(0.175rem);
    border: 1px solid var(--pink);
    padding: 1rem 1rem 1.5rem; /* Reduced top padding from 1.5rem to 1rem */
}

.category-title {
    text-align: center;
    color: var(--dark-text);
    font-family: 'Eagle Lake', serif;
    letter-spacing: 0.125rem;
    font-size: 1em;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

/* Character Gallery */
.character-gallery {
    margin-bottom: 1rem;
}

.character-gallery ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.character-gallery li {
    text-align: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.character-gallery li:hover {
    transform: translateY(-5px);
}

.thumbnail {
    display: block;
    text-decoration: none;
    outline: 0;
    cursor: pointer;
}

.frame {
    display: inline-block;
    position: relative;
    width: 120px;
    height: 120px;
    border: 0;
    overflow: hidden;
    border-radius: var(--border-radius);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius);
    transition: transform 0.5s ease;
}

.thumbnail:hover .frame img {
    transform: scale(1.05);
}

.caption {
    margin-top: 0.5rem;
    font-family: 'Garamond', serif;
    font-size: 0.75rem;
    letter-spacing: 0.05rem;
    color: var(--dark-text);
}

.caption p {
    margin: 0;
    padding: 0;
}

.caption strong {
    color: var(--glaucous);
    font-weight: 600;
}

.caption em {
    font-style: italic;
}


/* Title Banner Styles */
.title-banner {
    position: relative;
    width: 100%;
    height: 100px;
    margin-bottom: 1.5rem;
    margin-top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.title-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, 
        rgba(42, 41, 50, 0.5), 
        rgba(77, 133, 133, 0.6), 
        rgba(42, 41, 50, 0.5));
    border-radius: var(--border-radius);
    border: 1px solid rgba(106, 181, 181, 0.3);
    box-shadow: 0 0 15px rgba(106, 181, 181, 0.2);
    overflow: hidden;
}

.title-backdrop::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('https://mokiverse.neocities.org/faebane/ui_images/header1.png');
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    filter: blur(1px);
}

.main-title {
    position: relative;
    font-family: 'Eagle Lake', serif;
    font-size: 3.5rem;
    color: var(--cream);
    text-shadow: 
        0 0 5px var(--glaucous),
        0 0 10px rgba(106, 181, 181, 0.7),
        0 0 15px rgba(106, 181, 181, 0.5),
        2px 2px 2px rgba(0, 0, 0, 0.5);
    margin: 0;
    z-index: 2;
    letter-spacing: 0.15rem;
    transform: translateY(-2px);
}

.title-accent {
    position: absolute;
    height: 2px;
    width: 120px;
    background: linear-gradient(to right, transparent, var(--glaucous), transparent);
    z-index: 2;
}

.title-accent.left {
    left: 50px;
    top: 50%;
    transform: translateY(-10px);
}

.title-accent.right {
    right: 50px;
    top: 50%;
    transform: translateY(10px);
}

/* Enhancement for existing glaucous glows */
.glaucous-glow {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(106, 181, 181, 0.3) 0%, rgba(106, 181, 181, 0) 70%);
    filter: blur(10px);
}

/* Media queries for title banner */
@media (max-width: 768px) {
    .title-banner {
        height: 80px;
    }
    
    .main-title {
        font-size: 2.5rem;
    }
    
    .title-accent {
        width: 80px;
    }
    
    .title-accent.left {
        left: 30px;
    }
    
    .title-accent.right {
        right: 30px;
    }
}

/* Modal Styles */
#modal-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}

#modal-container.active {
    display: block;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.7);
    backdrop-filter: blur(3px);
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    background-color: var(--bg-light);
    border-radius: var(--border-radius);
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    border: 1px solid var(--pink);
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.5rem;
    color: var(--dark-text);
    cursor: pointer;
    z-index: 10;
}

.modal-close:hover {
    color: var(--glaucous);
}

.modal-header {
    padding: 1rem;
    border-bottom: 1px solid var(--pink);
    position: relative;
}

.modal-header h2 {
    margin: 0;
    text-align: center;
    font-family: 'Eagle Lake', serif;
    color: var(--glaucous);
    font-size: 1.5rem;
}

.modal-body {
    padding: 1.5rem;
}

.modal-image {
    float: right;
    width: 200px;
    height: 200px;
    margin: 0 0 1rem 1rem;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 2px solid var(--pink);
}

.modal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-info h3 {
    margin: 1rem 0 0.5rem;
    font-family: 'Eagle Lake', serif;
    color: var(--glaucous);
    font-size: 1.1rem;
}

.modal-info p {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .modal-image {
        float: none;
        width: 100%;
        height: 150px;
        margin: 0 0 1rem 0;
    }
}

/* Feature Layout Styles */
.feature-layout {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    align-items: flex-start;
}

.feature-image-wrapper {
    flex: 0 0 auto;
    width: 200px;
    height: auto;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--pink);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.feature-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius);
    transition: transform 0.5s ease;
}

.feature-image-wrapper:hover .feature-image {
    transform: scale(1.03);
}

.feature-text {
    flex: 1 1 auto;
}

.feature-text .style1 {
    text-align: left;
    padding-left: 0;
    padding-right: 0;
}

.full-width-text {
    margin-bottom: 1.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .feature-layout {
        flex-direction: column;
        align-items: center;
    }
    
    .feature-image-wrapper {
        width: 100%;
        max-width: 300px;
        margin-bottom: 1rem;
    }
    
    .feature-text .style1 {
        text-align: center;
    }
}