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

:root {
    --yellow: #FFC907;
    --light: #C7C7C7;
    --black-content: #292D32;
    --navitem-color: #5F5F5F;
    --footer-background: #292D32;
    --surface: #FFFFFF;
    --ink: #111214;
    --muted: #5B5F66;
    --accent: #0C8F6A;
    --accent-soft: #E7F7F1;
    --sunset: #FFE7B3;
}

/* ============================================ */
/* GLOBAL STYLES & RESET */
/* ============================================ */

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.jaipur-theme {
    font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    color: var(--ink);
    background: #FFF8EA;
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2 {
    font-family: 'DM Serif Display', Georgia, serif;
    letter-spacing: 0.2px;
    line-height: 1.2;
}

h1 {
    font-size: clamp(2.2rem, 3vw, 3.4rem);
}

h2 {
    font-size: clamp(1.7rem, 2.4vw, 2.5rem);
}

h3 {
    font-size: clamp(1.4rem, 2vw, 2rem);
}

h4 {
    font-size: clamp(1.2rem, 1.8vw, 1.6rem);
}

.lead {
    color: var(--muted);
}

li {
    list-style: none;
}

/* Selection color */
::selection {
    background-color: var(--yellow);
    color: var(--black-content);
}

::-moz-selection {
    background-color: var(--yellow);
    color: var(--black-content);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--yellow);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #e6b800;
}

/* Focus states for accessibility */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
}

/* ============================================ */
/* HEADER & NAVIGATION */
/* ============================================ */


.nav-toggle{
    font-size: 2rem;
}
.nav-horizon {
  position: absolute;
    background-color: var(--footer-background);
    color: white;
    /* width: 250px;  */
   transition: .7s;
   right: 0%;
    z-index: 1050;
}

@media (max-width: 355px) {
    .header .get-app-btn {
        border-radius: 5px !important;
        padding: .3rem .5rem !important;
    }
    
}

.nav-horizon .nav-link {
    color: white !important;
    margin-bottom: 1rem;
}
@media (min-width: 991px) {
    .header>div>div {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
.header .navbar .nav-link {
    color: var(--navitem-color);
    text-transform: capitalize;
    position: relative;
    font-weight: 500;
    padding: 0 .5rem;
    display: inline-block;
}

.header .navbar .nav-link::after {
    content: "";
    position: absolute;
    height: 2px;
    width: 0%;
    bottom: 0;
    left: 10px;
    background-color: var(--yellow);
    transition: width 0.3s ease;

}

.header .navbar .nav-link:hover::after {
    width: 40%;
}

.header .navbar .nav-link:hover {
    color: black;
}

.header .navbar .nav-link.active {
    color: black;
}

.header .navbar .nav-link.active::after {
    width: 40%;
}

.header .get-app-btn {
    background-color: var(--yellow);
    border: none;
    border-radius: 20px;
    padding: .3rem 2.5rem;
    font-weight: 500;
}

.title p {
    color: var(--black-content);
}

.title h5 {
    position: relative;
    display: inline-block;
    padding-left: 3rem;
}
.title .know-more {
   text-transform: capitalize;
   border-radius: .5rem;
   padding: .3rem 1rem;
   background: transparent;
   transition: .3s;
}
.title .know-more:hover {
 color: black;
   background: var(--yellow);
   border-color: var(--yellow);
   outline: none;
}

.title h5>span {
    color: var(--yellow);
}

.title h5::before {
    content: "";
    position: absolute;
    height: 60%;
    width: 2.5rem;
    top: 20%;
    left: 0;
    background-color: var(--yellow);
}

/* Simple page animations */
.fade-up {
    opacity: 0;
    transform: translateY(16px);
    animation: fadeUp 700ms ease forwards;
}

.stagger > * {
    opacity: 0;
    transform: translateY(16px);
    animation: fadeUp 700ms ease forwards;
}

.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.12s; }
.stagger > *:nth-child(3) { animation-delay: 0.18s; }
.stagger > *:nth-child(4) { animation-delay: 0.24s; }
.stagger > *:nth-child(5) { animation-delay: 0.3s; }
.stagger > *:nth-child(6) { animation-delay: 0.36s; }
.stagger > *:nth-child(7) { animation-delay: 0.42s; }
.stagger > *:nth-child(8) { animation-delay: 0.48s; }

.float-slow {
    animation: floatSlow 4s ease-in-out infinite;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes floatSlow {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* Hover lift effect for cards */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

/* Icon bounce animation */
.icon-bounce {
    display: inline-block;
    transition: transform 0.3s ease;
}

.hover-lift:hover .icon-bounce {
    animation: iconBounce 0.6s ease;
}

@keyframes iconBounce {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-10px);
    }
    50% {
        transform: translateY(-5px);
    }
    75% {
        transform: translateY(-8px);
    }
}

/* Icon pulse animation */
.icon-pulse {
    display: inline-block;
    transition: transform 0.3s ease;
}

.hover-lift:hover .icon-pulse {
    animation: iconPulse 1s ease infinite;
}

@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}

/* Button pulse animation */
.btn-pulse {
    animation: btnPulse 2s ease-in-out infinite;
}

@keyframes btnPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 201, 7, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(255, 201, 7, 0);
    }
}

.btn-pulse:hover {
    animation: none;
    transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
    .fade-up,
    .float-slow,
    .icon-bounce,
    .icon-pulse,
    .btn-pulse,
    .hover-lift {
        animation: none !important;
        transform: none;
        opacity: 1;
    }
}

.banner {
    background: radial-gradient(1200px 400px at 10% 0%, #FFFFFF 0%, #FFF4D4 55%, #FFE2B0 100%);
    border-radius: 2.5rem;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner::before,
.banner::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    filter: blur(0.5px);
    opacity: 0.6;
}

.banner::before {
    width: 220px;
    height: 220px;
    background: var(--accent-soft);
    right: 8%;
    top: -60px;
}

.banner::after {
    width: 140px;
    height: 140px;
    background: var(--sunset);
    left: 6%;
    bottom: -40px;
}

.hero-actions .btn {
    border-radius: 999px;
    padding: 0.7rem 1.6rem;
    box-shadow: 0 10px 25px rgba(17, 18, 20, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-actions .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(17, 18, 20, 0.15);
}

.background-light{
    background: linear-gradient(135deg, #FFF2D6 0%, #FFF9EE 55%, #F6F7FB 100%);
    border-radius: 2.5rem;
}



.our-impact {
    background: linear-gradient(135deg, #1E1F23 0%, #2C3037 60%, #131417 100%);
    color: white;
}

.our-impact .title span {
    color: var(--yellow);
}

.our-impact .info {
    text-align: center;
}

.our-impact .info p {
    margin: 0;
}

.our-impact .info>div>div {
    position: relative;
}

.our-impact .info>div>div:not(:last-child)::after {
    content: "";
    position: absolute;
    height: 50%;
    width: 1px;
    top: 20%;
    right: 20%;
    background-color: var(--light);
}

@media (max-width: 991px) {
    .our-impact .info>div>div:not(:last-child)::after {
        content: none;
    }
}

.img-part {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.first-div {
    max-width: 70%;
    overflow: hidden;
}

.first-img {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.second-div {
    position: absolute;
    top: 35%;
    left: 35%;
    width: 70%;
    /* overflow: hidden;
    z-index: 10; */
}
.about-dual-img::after {
    content: '';
    display: block;
    padding-top: 20%; /* Adjust based on the img height to width ratio */
    height: 0; /* Prevent collapsing */
}

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


.safety .img-part .first-div {
    border-radius: 50%;
}

.safety .img-part img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.benefits {
    background: linear-gradient(135deg, #1E1F23 0%, #2C3037 65%, #131417 100%);
    color: white;
    text-align: center;
}

.benefits .content span {
    display: inline-block;
    padding: 1rem 1.5rem;
    background: var(--navitem-color);
    border-radius: 50%;
    font-size: 2rem;
    color: var(--yellow);
    margin-top: 1.5rem;
}

.benefits .content h6 {
    margin-top: .6rem;
}

.benefits .content p {
    color: var(--light);
}


.Testimonials {
    background: linear-gradient(180deg, rgba(255, 246, 221, 0.7) 0%, rgba(255, 255, 255, 0.95) 100%);

}

.Testimonials .testimonial-slider {
    margin: 1.5rem;
}

.Testimonials .testimonial-slider>div {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    border-radius: 1rem;
}


.testimonilslider {
    position: relative;
}


.slick-prev:before,
.slick-next:before {
    font-family: 'slick';
    font-size: 24px;
    line-height: 1;
    opacity: 0.75;
    color: black;
}

.blog-news {
    border-radius: none;
}

.slider .blog-slider {
    padding: 1rem;

}

.slider .blog-slider>div {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    border-radius: 1rem;
}

.card {
    border: 1px solid rgba(17, 18, 20, 0.08);
    border-radius: 1.25rem;
    box-shadow: 0 10px 30px rgba(17, 18, 20, 0.08);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    background: var(--surface);
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(17, 18, 20, 0.16);
}

.btn-warning {
    background: var(--yellow);
    border: none;
    color: #1B1C1F;
}

.btn-outline-warning {
    border-color: var(--yellow);
    color: #1B1C1F;
}

.btn-success {
    background: var(--accent);
    border: none;
}

.slider .blog-slider .book-ride {
    padding: 0rem 2rem;
    background: var(--yellow);
    border-radius: 5rem;
    text-transform: capitalize;
    margin-bottom: 1rem;
}

.blog-slider .admin {
    color: var(--yellow);
}

.blog-slider .admin i {
    margin-right: .5rem;
}

.blog-slider .admin a {
    color: var(--yellow);
    text-decoration: none;
    margin-right: 2rem;
}

.footer {
    margin-top: 12rem;
    background-color: var(--footer-background);
    color: white;
}

.footer .download-section {
    background: var(--yellow);
    text-align: center;
    color: black;
    border-radius: 10px;
    transform: translateY(-8rem);
}


@media (max-width: 768px) {
    .footer .download-section {
        
        transform: translateY(-3rem);
    }
    .footer {
        margin-top: 5rem;
      
    }
}


.footer .download-section h3 {
    font-weight: 700;
    font-size: 2.5rem;
}

.footer .download-section p {
    margin-bottom: 0px;
    font-weight: 500;
    color: var(--black-content);
}

.footer .upper-part .social-links a {
    color: white;
    margin-left: .5rem;
}

.footer .upper-part p {
    color: #bcbcbc;
    text-align: justify;
}

.footer .upper-part .footer-links .links{
    padding-left:0rem!important;
}

.footer .upper-part .footer-links .links a {
    text-decoration: none;
    display: inline-block;
    color: #bcbcbc;
    text-transform: capitalize;
    margin-top: .2rem;
    position: relative;
}

.footer .upper-part .footer-links .links a::after {
    content: "";
    position: absolute;
    height: 2px;
    width: 0%;
    bottom: 0;
    left: 0px;
    background-color: white;
    transition: width 0.3s ease;

}

.footer .upper-part .footer-links .links a:hover::after {
    width: 100%;
}

.footer .upper-part .footer-links .links a:hover {
    color: white;

}

.footer-links h5 {
    margin-top: 1rem;
    margin-bottom: 2rem;
    text-transform: capitalize;
}

.break-line {
    width: 100%;
    position: relative;
    height: 2px;
    background-color: transparent;
}

.break-line::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, rgb(142, 135, 34) 0%, rgb(89, 85, 42) 59%, rgba(29, 28, 32, 1) 83%);
}

.copyright-text span {
    color: var(--yellow);
}

.bottom-part .social-links a {
    color: var(--yellow);
    margin-left: 1rem;
    font-size: 1.3rem;
}


.contact-us {
    background: #F5F5F5;
    border-radius: 3rem;
}

.title span {
    color: var(--yellow);
    font-weight: 500;
}

.contact-us .book-call {
    padding: .5rem 2rem;
    background: none;
    border-radius: 2rem;
    transition: .5s;
    text-decoration: none;
    display: inline-block;
    color: inherit;
    border: 2px solid currentColor;
}

.contact-us .book-call:hover {
    background: var(--yellow);
    color: black;
    border-color: var(--yellow);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 201, 7, 0.4);
}


.info-part .row>div {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: left;
}

.info-part .row {
    justify-content: flex-start;
}

.form-part form {
    background: var(--footer-background);
    border-radius: 2rem;
}

.form-part form label {
    color: white;
}

.form-part form input,
.form-part form textarea,
.form-part form select {
    background: var(--navitem-color);
    border: none;
    outline: none;
    color: white;
}

.form-part form input:focus,
.form-part form textarea:focus,
.form-part form select:focus {
    background: var(--navitem-color);
    border: none;
    outline: none;
    color: white;
    box-shadow: none;
}

.form-part form input::placeholder,
.form-part form textarea::placeholder,
.form-part form select::placeholder {
    color: #C7C7C7;
    opacity: 1;
}

.form-part form select option {
    background: var(--navitem-color);
    color: white;
}

form .submit-btn {
    background: var(--navitem-color);
    border: none;
    outline: none;
    color: var(--yellow);
    width: 100%;
}

form .submit-btn:hover {
    background: var(--yellow);
    border: none;
    outline: none;
    color: black;

}


.form-section .info-part .heading {
    margin-top: 2rem;
    margin-bottom: .5rem;
    color: var(--yellow);
    display: inline-block !important;

}

.form-section .info-part .row p {
    color: #6a6161;
    display: inline-block !important;
}

.form-section .info-part .row p>i {
    margin-right: .5rem;
    color: #6a6161;
}

/* About page polish */
.page-about .about-hero {
    background: linear-gradient(135deg, #FFE083 0%, #FFD600 55%, #FFC933 100%);
    color: #1C1C1C;
}

.page-about .about-hero img {
    box-shadow: 0 18px 45px rgba(17, 18, 20, 0.18);
}

.page-about .values-band {
    background: linear-gradient(135deg, #15171B 0%, #1F2228 60%, #0F1114 100%);
    color: #F7F7F7;
}

.page-about .why-choose-band {
    background: linear-gradient(135deg, #FFF1B8 0%, #FFD600 55%, #FFC933 100%);
}

.page-about .journey-section h4 {
    color: var(--ink);
}

.page-about .cta-band {
    background: linear-gradient(135deg, #15171B 0%, #21242B 60%, #0F1114 100%);
    color: #FFFFFF;
}

/* Pricing page polish */
.page-pricing .pricing-hero {
    background: linear-gradient(135deg, #FFF1B8 0%, #FFD600 55%, #FFC933 100%);
}

.page-pricing .price-card {
    border: 1px solid rgba(17, 18, 20, 0.08);
    border-radius: 1.25rem;
    box-shadow: 0 12px 30px rgba(17, 18, 20, 0.08);
}

.page-pricing .price-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 42px rgba(17, 18, 20, 0.16);
}

.page-pricing .faq-section {
    background: linear-gradient(135deg, #FFF9E8 0%, #FFF4D4 50%, #F6F7FB 100%);
}

.page-pricing .cta-section {
    background: linear-gradient(135deg, #15171B 0%, #21242B 60%, #0F1114 100%);
}

/* Contact page polish */
.page-contact .contact-hero {
    background: linear-gradient(135deg, #FFF1B8 0%, #FFD600 55%, #FFC933 100%);
}

.page-contact .contact-panel {
    border-radius: 1.5rem;
}

.page-contact .form-part form {
    box-shadow: 0 18px 45px rgba(17, 18, 20, 0.2);
}

.page-contact .info-part {
    padding: 2rem 1rem;
}

/* Global site animations */
.jaipur-theme section {
    opacity: 0;
    transform: translateY(18px);
    animation: fadeUp 700ms ease forwards;
}

.jaipur-theme section:nth-of-type(1) { animation-delay: 0.05s; }
.jaipur-theme section:nth-of-type(2) { animation-delay: 0.12s; }
.jaipur-theme section:nth-of-type(3) { animation-delay: 0.18s; }
.jaipur-theme section:nth-of-type(4) { animation-delay: 0.24s; }
.jaipur-theme section:nth-of-type(5) { animation-delay: 0.3s; }
.jaipur-theme section:nth-of-type(6) { animation-delay: 0.36s; }
.jaipur-theme section:nth-of-type(7) { animation-delay: 0.42s; }
.jaipur-theme section:nth-of-type(8) { animation-delay: 0.48s; }

.jaipur-theme .card,
.jaipur-theme .btn,
.jaipur-theme img {
    animation: fadeUp 700ms ease forwards;
}

.jaipur-theme img {
    transform: translateY(10px);
}

@media (prefers-reduced-motion: reduce) {
    .jaipur-theme section,
    .jaipur-theme .card,
    .jaipur-theme .btn,
    .jaipur-theme img {
        animation: none;
        transform: none;
        opacity: 1;
    }
}

/* ============================================ */
/* UTILITY CLASSES */
/* ============================================ */

/* Live Location Transition Effect */
#liveLocation {
    transition: opacity 0.5s ease-in-out, transform 0.3s ease;
    display: inline-block;
}

#liveLocation:hover {
    transform: scale(1.05);
}

/* Live Activity Stats Transition Effects */
#surgeAreas,
#captainCount,
#ridesCount {
    transition: opacity 0.5s ease-in-out, transform 0.3s ease;
    display: inline-block;
}

#surgeAreas {
    font-weight: 500;
}

#captainCount,
#ridesCount {
    font-weight: 700;
}

/* Google Maps Styling */
#jaipurMap {
    height: 400px !important;
    width: 100% !important;
    border: 2px solid var(--yellow);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1;
    background-color: #f0f0f0;
    background-image: 
        linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%, #f0f0f0),
        linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%, #f0f0f0);
    background-size: 40px 40px;
    background-position: 0 0, 20px 20px;
}

/* Leaflet Map Styling */
.leaflet-container {
    font-family: 'Space Grotesk', sans-serif;
    height: 100%;
    width: 100%;
    background-color: #e8e8e8;
}

.leaflet-popup-content-wrapper {
    border-radius: 10px;
}

.leaflet-popup-content {
    margin: 0;
}

.custom-marker {
    animation: markerBounce 0.5s ease-out;
}

@keyframes markerBounce {
    0% { transform: translateY(-20px); opacity: 0; }
    50% { transform: translateY(5px); }
    100% { transform: translateY(0); opacity: 1; }
}

.gm-style .gm-style-iw-c {
    border-radius: 10px !important;
}

.gm-style .gm-style-iw-d {
    overflow: hidden !important;
}

.gm-style-iw button {
    top: 8px !important;
    right: 8px !important;
}
/* ============================================ */

.transition-smooth {
    transition: all 0.3s ease;
}

.shadow-soft {
    box-shadow: 0 4px 12px rgba(17, 18, 20, 0.08);
}

.shadow-medium {
    box-shadow: 0 8px 20px rgba(17, 18, 20, 0.12);
}

.shadow-strong {
    box-shadow: 0 12px 30px rgba(17, 18, 20, 0.16);
}

.text-gradient {
    background: linear-gradient(135deg, var(--yellow) 0%, #FFB800 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================ */
/* LOADING SPINNER (for future use) */
/* ============================================ */

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--light);
    border-top-color: var(--yellow);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================ */
/* ACCESSIBILITY IMPROVEMENTS */
/* ============================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Skip to main content link */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--yellow);
    color: var(--black-content);
    padding: 8px;
    text-decoration: none;
    z-index: 9999;
}

.skip-to-content:focus {
    top: 0;
}

/* ============================================ */
/* PRINT STYLES */
/* ============================================ */

@media print {
    .header,
    .footer,
    .nav-toggle,
    button,
    .social-links {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    a {
        text-decoration: underline;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* ============================================ */
/* RESPONSIVE TYPOGRAPHY */
/* ============================================ */

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.6rem;
    }
    
    h3 {
        font-size: 1.3rem;
    }
}

/* ============================================ */
/* ERROR PAGES (404, 500, etc.) */
/* ============================================ */

.error-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.error-page h1 {
    font-size: 6rem;
    color: var(--yellow);
}

.error-page p {
    font-size: 1.5rem;
    color: var(--muted);
}

/* ============================================ */
/* BUTTON ENHANCEMENTS */
/* ============================================ */

button,
.btn {
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

button:disabled,
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Ripple effect on buttons */
.btn-ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-ripple:active::after {
    width: 300px;
    height: 300px;
}

/* END OF ENHANCED STYLES */