html {
    scroll-behavior: smooth;
    /* Do NOT set overflow-x hidden on html, it breaks sticky positioning */
}

body {
    overflow-x: hidden;
    /* Only on body restricts horizontal scroll */
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Custom animations only - everything else uses Tailwind */
@keyframes sdb05 {
    0% {
        transform: translateY(0) rotate(-45deg);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(20px) rotate(-45deg);
        opacity: 0;
    }
}


/* New About Us Card Design */
.custom-card-title {
    color: #262626;
    font-size: 1.25rem;
    line-height: normal;
    font-weight: 700;
    margin-bottom: 0.5em;
}

.custom-small-desc {
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5em;
    color: #452c2c;
}

.custom-go-corner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 2em;
    height: 2em;
    overflow: hidden;
    top: 0;
    right: 0;
    background: linear-gradient(135deg, #6293c8, #384c6c);
    border-radius: 0 4px 0 32px;
}

.custom-go-arrow {
    margin-top: -4px;
    margin-right: -4px;
    color: white;
    font-family: courier, sans;
}

.custom-card {
    display: block;
    position: relative;
    max-width: 300px;
    height: 100%;
    background-color: #f2f8f9;
    border-radius: 10px;
    padding: 2em 1.2em;
    margin: 12px;
    text-decoration: none;
    z-index: 0;
    overflow: hidden;
    background: linear-gradient(to bottom, #c3e6ec, #a7d1d9);
    font-family: 'Poppins', sans-serif;
}

.custom-card:before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -16px;
    right: -16px;
    background: linear-gradient(135deg, #364a60, #384c6c);
    height: 32px;
    width: 32px;
    border-radius: 32px;
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: transform 0.35s ease-out;
}

.custom-card:hover:before {
    transform: scale(28);
}

.custom-card:hover .custom-small-desc {
    transition: all 0.5s ease-out;
    color: rgba(255, 255, 255, 0.8);
}

.custom-card:hover .custom-card-title {
    transition: all 0.5s ease-out;
    color: #ffffff;
}

@media (min-width: 768px) {
    .hide-on-desktop {
        display: none !important;
    }
}

/* Success Modal Animation */
@keyframes scaleIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-scaleIn {
    animation: scaleIn 0.3s ease-out forwards;
}

/* Checkmark Animation */
.success-checkmark {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

.check-icon {
    width: 80px;
    height: 80px;
    position: relative;
    border-radius: 50%;
    box-sizing: content-box;
    border: 4px solid #4CAF50;
    animation: circle-scale-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes circle-scale-in {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.icon-line {
    height: 5px;
    background-color: #4CAF50;
    display: block;
    border-radius: 2px;
    position: absolute;
    z-index: 10;
}

.icon-line.line-tip {
    top: 46px;
    left: 14px;
    width: 25px;
    transform: rotate(45deg);
    animation: icon-line-tip 0.75s;
}

.icon-line.line-long {
    top: 38px;
    right: 8px;
    width: 47px;
    transform: rotate(-45deg);
    animation: icon-line-long 0.75s;
}

@keyframes icon-line-tip {
    0% {
        width: 0;
        left: 1px;
        top: 19px;
    }

    54% {
        width: 0;
        left: 1px;
        top: 19px;
    }

    70% {
        width: 50px;
        left: -8px;
        top: 37px;
    }

    84% {
        width: 17px;
        left: 21px;
        top: 48px;
    }

    100% {
        width: 25px;
        left: 14px;
        top: 46px;
    }
}

@keyframes icon-line-long {
    0% {
        width: 0;
        right: 46px;
        top: 54px;
    }

    65% {
        width: 0;
        right: 46px;
        top: 54px;
    }

    84% {
        width: 55px;
        right: 0px;
        top: 35px;
    }

    100% {
        width: 47px;
        right: 8px;
        top: 38px;
    }
}

/* Preloader Styles - Enhanced for Full Coverage + Centering */
#preloader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300vw;
    height: 300vh;
    height: 300dvh;
    background-color: #ffffff;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-items: center;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
    touch-action: none;
    /* Prevent scroll/touch propagation */
}

@media (max-width: 768px) {
    #preloader {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transform: none;
        border-radius: 0;
    }
}

/* Pseudo-element removed as container is now massive */

#preloader.loaded {
    opacity: 0;
    visibility: hidden;
}

.preloader-logo {
    width: 150px;
    animation: logo-breathe 2s infinite ease-in-out;
}

@keyframes logo-breathe {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.loading-bar-container {
    width: 200px;
    height: 6px;
    background-color: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 1rem;
}

.loading-bar-progress {
    height: 100%;
    width: 0%;
    background-color: #0073e6;
    border-radius: 10px;
}

@keyframes loading-fill {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

.font-arial {
    font-family: Arial, sans-serif;
}

.clip-v-bottom {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
}

/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* Icon Rotation Animation (Spin 1.5s, Pause 4.5s = 6s Total) */
@keyframes spin-pause {
    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.animate-spin-pause {
    display: inline-block;
    animation: spin-pause 4s ease-in-out infinite;
    transform-origin: center;
}

/* Responsive Hero Gradient - Extra Smooth 12-Stop Blur for Tablet */
.hero-gradient-custom {
    background: linear-gradient(90deg,
            #FFFFFF 0%,
            #FFFFFF 25%,
            rgba(255, 255, 255, 0.99) 30%,
            rgba(255, 255, 255, 0.95) 35%,
            rgba(255, 255, 255, 0.88) 40%,
            rgba(255, 255, 255, 0.78) 45%,
            rgba(255, 255, 255, 0.65) 50%,
            rgba(255, 255, 255, 0.5) 55%,
            rgba(255, 255, 255, 0.35) 60%,
            rgba(255, 255, 255, 0.22) 65%,
            rgba(255, 255, 255, 0.12) 70%,
            rgba(255, 255, 255, 0.05) 75%,
            rgba(255, 255, 255, 0) 85%) !important;
}

@media (min-width: 1280px) {
    .hero-gradient-custom {
        background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 48%, rgba(255, 255, 255, 0) 75%) !important;
    }
}


/* Tablet Landscape Specific Overrides (768px - 1440px) */
@media (orientation: landscape) and (min-width: 768px) and (max-width: 1440px) {
    .hero-image-wrapper {
        width: 60% !important;
    }

    .hero-content-wrapper {
        width: 40% !important;
        padding-left: 0 !important;
        max-width: none !important;
    }
}

/* Hide scrollbar */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Hide Back To Top Button when Mobile Menu is open (body has no-scroll) */
body.no-scroll #backToTop {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Mobile Menu Show State */
/* Fan Card Stack Styles - Refined for "Alphonso" Match */
.perspective-1000 {
    perspective: 1000px;
}

.ease-out-back {
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wish-card {
    will-change: transform, opacity, z-index;
    transform-origin: bottom center;
}

/* Position States */
.wish-card.pos-front {
    z-index: 30;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.wish-card.pos-left {
    z-index: 20;
    transform: translate3d(-40px, -20px, -50px) rotate(-10deg) scale(0.92);
    opacity: 0.9;
    pointer-events: none;
}

.wish-card.pos-right {
    z-index: 10;
    transform: translate3d(40px, -20px, -50px) rotate(10deg) scale(0.92);
    opacity: 0.9;
    pointer-events: none;
}







.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wish-card.sliding-out-right {
    transform: translate3d(120%, -50px, 0) rotate(15deg) scale(0.9) !important;
    opacity: 0 !important;
    z-index: 100 !important;
}

.wish-card.sliding-out-left {
    transform: translate3d(-120%, -50px, 0) rotate(-15deg) scale(0.9) !important;
    opacity: 0 !important;
    z-index: 100 !important;
}

/* Side Swipe Hint Pulse */
@keyframes swipeHintPulseLeft {

    0%,
    100% {
        opacity: 0.6;
        transform: translate(0, -50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(-5px, -50%) scale(1.1);
    }
}

@keyframes swipeHintPulseRight {

    0%,
    100% {
        opacity: 0.6;
        transform: translate(0, -50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(5px, -50%) scale(1.1);
    }
}

.swipe-hint-left {
    animation: swipeHintPulseLeft 2s infinite ease-in-out;
}

.swipe-hint-right {
    animation: swipeHintPulseRight 2s infinite ease-in-out;
}

/* New Card UI Refinements */
.wish-card button {
    transition: all 0.3s ease;
}

.wish-card button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.2);
}

.wish-card button:active {
    transform: translateY(0);
}

.wish-card img {
    filter: saturate(1.1) brightness(0.95);
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}