/* Global Card Image Styles - Placed at root level */
.card-image {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: none;
    margin-bottom: 0;
}

.card-image img {
    /* Enforce 2.5 x 3.5 aspect ratio (5/7) */
    aspect-ratio: 5 / 7;
    width: 100%;
    height: auto;
    object-fit: contain;
    box-shadow: none;
    transform: rotateY(5deg) rotateX(5deg) translateZ(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    
    /* Perspective for 3D effect */
    perspective: 1000px;
}

/* === Nav dropdown === */

/* Scoped Navigation for Hub */
.hub-page .nav {
    display: flex;
    gap: 1rem; /* Space between links */
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md) 0;
}

.hub-page .nav-link {
    padding: var(--spacing-sm) var(--spacing-md); /* Compact padding */
    font-size: var(--font-size-md);
    color: var(--text-light);
    text-decoration: none;
    border-radius: var(--border-radius-md);
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.hub-page .nav-link:hover {
    background: rgba(255, 215, 0, 0.1); /* Subtle gold background */
    color: var(--secondary); /* Gold text */
}

.hub-page .nav-link.active {
    background: var(--secondary); /* Gold background for active link */
    color: var(--primary); /* Dark text */
    font-weight: bold;
}
/* Scoped Buttons for Hub */
.hub-page .btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius-md);
    font-weight: bold;
    text-decoration: none;
    transition: all var(--transition-normal);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.hub-page .btn-primary {
    background: var(--secondary);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.hub-page .btn-primary:hover {
    background: var(--secondary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
/* Scoped Cards for Hub */
.hub-page .card {
    background: var(--background-light);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.hub-page .card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.hub-page .card h3 {
    font-size: var(--font-size-lg);
    color: white(--primary);
    margin-bottom: var(--spacing-md);
}

.hub-page .card img {
    max-width: 100%;
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-md);
}

/* Button Styles */
.btn {
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border-radius: var(--border-radius-md);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Space between icon and text */
    font-weight: bold;
    background: var(--secondary); /* Gold */
    color: var(--primary); /* Black text */
    transition: all 0.3s ease;
}

.btn:hover {
    background: var(--secondary-light); /* Lighter gold */
    transform: translateY(-2px); /* Hover effect */
}

.btn:focus {
    outline: 2px solid var(--primary); /* Accessibility focus ring */
}




/* Apply combined rotation & lift only to the card image on hover */
.card-image:hover img {
    transform: rotateY(15deg) rotateX(5deg) translateY(-5px);
    box-shadow: none;
}

/* Disable hover effects for smaller devices */
@media (max-width: 768px) {
    .card-image:hover img {
        transform: none !important;
        box-shadow: none !important;
    }
}

/* ---------- Card Container (No Hover Rotation) ---------- */
/* Card Hover Enhancements */
.card {
    background: var(--background-light);
    border-radius: var(--border-radius-lg);
    padding: 20px;
    margin: var(--spacing-md);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Deeper shadow on hover */
}

/* Card Image Hover */
.card-image img {
    transform: scale(1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-image:hover img {
    transform: scale(1.05); /* Slight zoom */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* Glow effect */
}


.card-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Ensure card and details stack properly */
    padding: 0; /* Remove excess padding */
    margin: 0; /* Remove margin to avoid overlaps */
}

.card-content {
    display: flex;
    align-items: center; /* Ensures icons align vertically with text */
    gap: 10px; /* Space between icon and text */
}

.nft-categories {
    margin: 40px 0; /* Add space above and below */
}

.card-details {
    padding: 0 10px;
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}

.auction-price {
    font-size: 16px;
    font-weight: bold;
    color: #0f0f0f;
    margin-bottom: 8px;
    display: block;
}

    /* Make "2X Point Booster" More Prominent */
.card-header {
    font-size: 1.2rem; /* Larger font size */
    font-weight: bold;
    color: #333;
    margin-bottom: 6px;
    text-align: center;
}

/* Subdue "Auction Starting" Text */
.auction-badge {
    display: inline-block;
    background: linear-gradient(180deg, #ffc107, #e0a800);
    color: #333;
    margin: 10px auto;
    padding: 8px 12px;
    display: inline-block;
    font-size: 1rem;
    padding: 6px 10px;
    border-radius: 8px;
    font-weight: normal; /* Reduce emphasis */
    text-align: center;
    margin-bottom: 10px;
     
}
.auction-badge:hover {
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.6);
    transition: box-shadow 0.3s ease;
}

/* Card Benefits Styling */

.card-benefits::before {
    content: '';
    display: block;
    width: 90%;
    height: 1px;
    margin: 10px auto 0;
    margin-bottom: 10px;
    background: #ddd;
}
.card-benefits {
    margin-top: 15px;
    list-style: none;
    padding: 0;
    margin: 10px 0;
  
}
.card-benefits:after {
    content: '';
    display: block;
    width: 90%;
    height: 1px;
    margin: 10px auto 0;
    background: #ddd;
}

.card-benefits li {
    margin-bottom: 5px;
    font-size: 0.9rem; /* Slightly smaller to keep focus on the title */
  
          
}
.card-benefits li i:hover {
        transform: scale(1.2);
        transition: transform 0.3s ease;
        color: #ffbf00; /* Matches the auction badge for visual consistency */
        
    }



/* Rest of Hub Page Styles */
.store {
    padding: var(--spacing-2xl) 0;
}

.main-content {
    min-height: 100vh;
    background: var(--background);
}

.hero-section {
    background: var(--primary);
    padding: var(--spacing-2xl) 0;
    color: var(--text-light);
    text-align: center;
}

.hero-section h1 {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-lg);
}

.hero-section .subtitle {
    font-size: var(--font-size-xl);
    max-width: 800px;
    margin: 0 auto var(--spacing-xl);
    color: var(--text-light);
    opacity: 0.9;
}

.intro-section {
    padding: var(--spacing-2xl) 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom, var(--background-light), transparent);
}

.intro-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.intro-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.intro-line {
    height: 2px;
    width: 60px;
    background: var(--secondary);
}

.intro-section h2 {
    color: var(--primary);
    font-size: var(--font-size-3xl);
    font-weight: bold;
    margin: 0;
    padding: 0 var(--spacing-md);
    position: relative;
}

.intro-description {
    font-size: var(--font-size-xl);
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    padding: var(--spacing-lg);
}

.intro-description::before,
.intro-description::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    opacity: 0.1;
}

.intro-description::before {
    top: 0;
    left: 0;
    border-top: 2px solid var(--secondary);
    border-left: 2px solid var(--secondary);
}

.intro-description::after {
    bottom: 0;
    right: 0;
    border-bottom: 2px solid var(--secondary);
    border-right: 2px solid var(--secondary);
}

.intro-highlight {
    color: var(--primary);
    font-weight: 500;
}

/* Subtle background decoration */
.intro-bg-decoration {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: var(--secondary);
    opacity: 0.03;
    z-index: -1;
}

.intro-bg-decoration:nth-child(1) {
    top: -150px;
    left: -150px;
}

.intro-bg-decoration:nth-child(2) {
    bottom: -150px;
    right: -150px;
}


.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px; /* Adjust this value as needed */
    justify-content: center;
    align-items: stretch;
    margin: 20px 0; /* Add vertical spacing */
    padding: 0 var(--spacing-lg);
        }


.price {
    color: var(--secondary);
    font-weight: bold;
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-sm);
}

.description {
    color: var(--text-muted);
    margin-bottom: var(--spacing-lg);
}

.feature-list {
    list-style: none;
    padding: 0;
}

.feature-list li {
    display: flex;
    align-items: start;
    margin-bottom: var(--spacing-md);
    color: var(--text-muted);
}

.bullet {
    color: var(--secondary);
    margin-right: var(--spacing-sm);
}

/* Bid Now Button Enhancements */

/* Centering the button */
.button-container {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

/* Styling the button */
.bid-now-btn {
    background-color: #ffc107;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    border: 2px solid #ffb700;
    cursor: pointer;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
    background: linear-gradient(180deg, #ffc107, #e0a800);
}

.bid-now-btn:hover {
    background-color: #ffa800;
    transform: scale(1.05);
    transition: transform 0.2s ease;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(255, 193, 7, 0.8);
}

/* Ensures link styling doesn't interfere with button */
.bid-now-link {
    text-decoration: none;
    display: inline-block;
}


.bid-now-btn:focus {
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.8);
    outline: none;
}

.bid-now-btn:active {
    transform: scale(0.95);
}




/* Physical Cards Section */
.Physical-cards {
    padding: var(--spacing-2xl) 0;
    margin-bottom: var(--spacing-3xl);
}

.Physical-cards h2 {
    text-align: center;
    color: var(--primary);
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-md);
}

.Physical-cards h3 {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-size-lg);
    max-width: 800px;
    margin: 0 auto var(--spacing-xl);
    line-height: 1.6;
}

/* Features Box Styling */
.features-box {
    background: var(--background-light);
    padding: var(--spacing-2xl);
    border-radius: var(--border-radius-lg);
    margin: var(--spacing-2xl) 0;
    box-shadow: var(--shadow-lg);
}

.features-title {
    text-align: center;
    color: var(--primary);
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-xl);
    position: relative;
    padding-bottom: var(--spacing-md);
}

.features-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--secondary);
    border-radius: 2px;
}

.features-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-2xl);
}

/* Feature Group Styling */
.feature-group {
    background: rgba(255, 255, 255, 0.05);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    transition: transform var(--transition-normal);
}

.feature-group:hover {
    transform: translateY(-5px);
}

.feature-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.feature-header i {
    font-size: var(--font-size-2xl);
    color: var(--secondary);
}

.feature-header h4 {
    color: var(--primary);
    font-size: var(--font-size-xl);
    margin: 0;
}

/* Chase The Ace Powers Card Styles */
.powers-card {
    background: var(--background-light);
    border-radius: var(--border-radius-lg);
    padding: 0;
    transition: transform var(--transition-normal);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}







.powers-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.powers-header {
    background: var(--primary);
    padding: var(--spacing-lg);
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.powers-header h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin: 0;
}

.powers-header i {
    color: var(--secondary);
    font-size: var(--font-size-lg);
}

.powers-content {
    padding: var(--spacing-lg);
}

.powers-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.powers-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    transition: background-color var(--transition-normal);
}

.powers-item:hover {
    background-color: rgba(26, 26, 26, 0.05);
}

.powers-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
    transition: transform var(--transition-normal);
}

.powers-item:hover .powers-icon {
    transform: scale(1.1);
}

.powers-details {
    flex-grow: 1;
}

.powers-title {
    font-weight: 600;
    color: var(--primary);
    margin: 0 0 var(--spacing-xs) 0;
    font-size: var(--font-size-lg);
}

.powers-description {
    color: var(--text-muted);
    margin: 0;
    font-size: var(--font-size-md);
    line-height: 1.5;
}

.powers-learn-more {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-sm);
    transition: all var(--transition-normal);
}

.powers-learn-more:hover {
    color: var(--secondary);
}

.powers-learn-more i {
    font-size: var(--font-size-xs);
    transition: transform var(--transition-normal);
}

.powers-learn-more:hover i {
    transform: translateX(4px);
}


.learn-more-link {
    display: inline-block;
    color: #4a90e2;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}

.learn-more-link:hover {
    background-color: rgba(74, 144, 226, 0.1);
    color: #2171cd;
    text-decoration: underline;
}

.feature-list li {
    margin-bottom: 12px;
}

.feature-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.feature-text {
    flex: 1;
    margin-right: 8px;
}
.featured-header {
    text-align: center;
    position: relative;
    padding: var(--spacing-xl) 0;
    margin-bottom: var(--spacing-2xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.featured-title-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin: 0 auto;
}

.featured-line {
    height: 2px;
    width: 100px;
    background: var(--secondary);
}

.featured-star {
    color: var(--secondary);
    font-size: var(--font-size-xl);
}

.featured-header h2 {
    color: var(--primary);
    font-size: var(--font-size-3xl);
    font-weight: bold;
    margin: 0;
    padding: 0 var(--spacing-md);
}

.featured-subtitle {
    color: var(--text-muted);
    font-size: var(--font-size-lg);
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.bullet {
    color: #4a90e2;
    font-weight: bold;
    margin-right: 4px;
}


/* Tier Cards Styling */
.tier-cards {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.tier-card {
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    background: var(--background);
    position: relative;
    padding-left: calc(var(--spacing-lg) + 80px);
}

.tier-badge {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
    font-weight: bold;
    width: 80px;
    text-align: center;
}

.tier-card.common .tier-badge {
    background: #6c757d;
    color: white;
}

.tier-card.rare .tier-badge {
    background: #0dcaf0;
    color: white;
}

.tier-card.ultra-rare .tier-badge {
    background: var(--secondary);
    color: var(--primary);
}

/* Power List Styling */
.power-list {
    list-style: none;
    padding: 0;
}

.power-list li {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--background);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-md);
    transition: transform var(--transition-normal);
}

.power-list li:hover {
    transform: translateX(10px);
}

.power-list i {
    color: var(--secondary);
    font-size: var(--font-size-lg);
}

/* Integration Features Styling */
.integration-features {
    display: grid;
    gap: var(--spacing-md);
}

.integration-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--background);
    border-radius: var(--border-radius-md);
    transition: transform var(--transition-normal);
}

.integration-item:hover {
    transform: translateX(10px);
}

.integration-item i {
    color: var(--secondary);
    font-size: var(--font-size-xl);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .features-box {
        padding: var(--spacing-lg);
    }

    .features-content {
        grid-template-columns: 1fr;
    }

    .tier-card {
        padding-left: var(--spacing-md);
        padding-top: calc(var(--spacing-lg) + 30px);
    }

    .tier-badge {
        top: 0;
        left: var(--spacing-md);
        transform: none;
        border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
    }
}

/* Update FAQ spacing */
.faq-section {
    padding: var(--spacing-2xl) 0;
    max-width: var(--container-width);
    margin: 0 auto;
}

.faq-grid {
    display: grid;
    gap: var(--spacing-md);
    padding: 0 var(--spacing-lg);
}

.faq-question {
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    background: white;
    border: none;
    cursor: pointer;
}

.question-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex: 1;
}

.question-content {
    flex: 1;
    margin-right: var(--spacing-md);
}

.arrow {
    margin-left: auto;
    color: var(--text-muted);
    transition: transform 0.3s ease;
}

/* Ensure consistent padding for the answer */
.faq-answer p {
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg) calc(var(--spacing-lg) + 56px);
    margin: 0;
    line-height: 1.6;
}

.faq-icon {
        width: 24px;
        height: 24px;
        margin-right: 10px; /* Adds space between icon and text */
        flex-shrink: 0; /* Prevents icon resizing */
    }

.faq-item.expanded .faq-item-header {
    background-color: var(--secondary-light); /* Change to your theme color */
    border-radius: 8px;
}


.faq-item:hover {
    box-shadow: var(--shadow-md);
}

.faq-question {
    padding: var(--spacing-lg) var(--spacing-md); /* Reduced right padding */
    display: flex;
    align-items: center;
    gap: var(--spacing-sm); /* Reduced gap */
    cursor: pointer;
    position: relative;
    border: none;
    width: 100%;
    text-align: left;
    background: white;
    justify-content: space-between;
}

.question-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex: 1;
    max-width: calc(100% - 40px); /* Reserve space for arrow */
}

.question-content {
    flex: 1;
    margin-right: var(--spacing-sm); /* Reduced margin */
    overflow: hidden; /* Prevent text overflow */
}

.arrow {
    color: var(--text-muted);
    transition: transform var(--transition-normal);
    padding-left: var(--spacing-sm); /* Add small padding */
    flex-shrink: 0;
    width: 20px; /* Fixed width for consistency */
    text-align: center;
}

/* Remove any inherited margins that might affect spacing */
.question-text {
    margin: 0;
    padding-right: var(--spacing-sm);
}

.icon-wrapper {
    flex-shrink: 0;
    margin-right: var(--spacing-sm); /* Reduced margin */
}

/* Ensure the FAQ answer aligns properly */
.faq-answer p {
    padding: 0 var(--spacing-lg) var(--spacing-lg) calc(var(--spacing-lg) + 40px);
}

@media (max-width: 768px) {
    .faq-question {
        padding: var(--spacing-md) var(--spacing-sm);
    }
    
    .question-wrapper {
        gap: var(--spacing-sm);
    }
}

.faq-question:hover {
    background: var(--background-light);
}

.icon-wrapper {
    width: 40px;
    height: 40px;
    background: var(--secondary);
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-wrapper i {
    color: var(--primary);
    font-size: var(--font-size-xl);
}

.question-content {
    flex-grow: 1;
}

.category {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-bottom: var(--spacing-xs);
}

.question-text {
    font-size: var(--font-size-lg);
    color: var(--primary);
    font-weight: 600;
    margin: 0;
}

.arrow {
    color: var(--text-muted);
    transition: transform var(--transition-normal);
}

.faq-answer {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: all var(--transition-normal);
    background: var(--background-light);
}

.faq-answer p {
    padding: 0 var(--spacing-lg) var(--spacing-lg) calc(var(--spacing-lg) + 56px);
    margin: 0;
    color: var(--text-muted);
    line-height: 1.6;
}

.faq-item.active .arrow {
    transform: rotate(180deg);
}

.faq-item.active .faq-answer {
    max-height: 300px;
    padding-top: var(--spacing-md);
    margin-bottom: 20px; /* Adds space between FAQ items */
}

@media (max-width: 768px) {
    .faq-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .card-image:hover img {
        transform: none !important;
    }
}

@media (max-width: 768px) {
    .grid-container {
        margin: 10px 0; /* Adjusted for smaller screens */
        gap: 15px; /* Reduced gap */
    }
    .card {
        padding: 15px; /* Reduced padding */
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .nav {
        flex-direction: column; /* Stack navigation links */
    }

    .grid-container {
        gap: 15px; /* Reduced gap for smaller screens */
        padding: 0 10px; /* Add padding for spacing */
    }

    .card {
        padding: 15px; /* Reduce padding for smaller screens */
    }

    .btn {
        font-size: 0.9rem; /* Adjust button size */
        padding: 0.4rem 0.8rem;
    }
}