/*
Theme Name: Tsedar Theme
Theme URI: http://localhost/tsedar
Author: Your Name
Author URI: http://yourwebsite.com
Description: Custom HTML to WordPress Theme based on Tsedar project
Version: 1.0
*/
html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}



[dir="rtl"] #tsedar-logo {
    transform: scaleX(-1) !important;
}

#tsedar-logo {
    transform: scaleX(1);
}

[dir="rtl"] .product-image-style {
    left: 0;
    right: unset;
    top: 50%;
    transform: translateY(-50%) scaleX(-1);
    position: absolute;
}

.swiper {
    /* Explicitly set direction to LTR */
    direction: ltr !important;
}

/* Fix RTL issues with pagination and navigation */
.swiper-wrapper {
    flex-direction: row !important;
}

/* Ensure slides maintain correct orientation */
.swiper-slide {
    float: left !important;
}

/* Fix for Firefox/Safari RTL specific issues */
[dir="rtl"] .swiper {
    direction: ltr !important;
    margin-right: unset !important;
    margin-left: auto !important;
}

[dir="rtl"] .swiper-slide {
    direction: rtl !important;
}

/* Ensure pagination appears in correct order */
[dir="rtl"] .swiper-pagination {
    direction: ltr;
    margin: 0 0 10px 0;
}


[dir="rtl"] .medicine-img-style {
    right: unset;
    left: -5px
}


[dir="rtl"] .nuts-img-style {
    right: unset;
    left: 20px
}

article .cover-img-style {
    transition: transform 0.3s ease;
    /* smooth transition */
}

article:hover .cover-img-style {
    transform: scale(1.12);
    /* zoom in slightly */
}

.swiper .swiper-pagination .swiper-pagination-bullet-active {
    background: #999999 !important;
    width: 10px !important;
    height: 10px !important;
}

.swiper-pagination-bullet {
    width: 10px !important;
    height: 10px !important;
}

@keyframes rotateTo30Medicine {
    0% {
        transform: translateY(-50%) rotate(-10deg);
    }

    100% {
        transform: translateY(-50%) rotate(-30deg);
    }
}

.medicine-img-style {
    position: absolute;
    top: 50%;
    right: -5px;
    transform: translateY(-50%) rotate(-10deg);
}

/* Apply animation on hover */
.medicine-card-one:hover .medicine-img-style {
    animation: rotateTo30Medicine 0.4s forwards ease-in-out;
}

@keyframes rotateBackTo10Medicine {
    0% {
        transform: translateY(-50%) rotate(-30deg);
    }

    100% {
        transform: translateY(-50%) rotate(-10deg);
    }
}

.medicine-card-one:not(:hover) .medicine-img-style {
    animation: rotateBackTo10Medicine 0.4s forwards ease-in-out;
}

@keyframes rotateTo30Nuts {
    0% {
        transform: translateY(-50%) rotate(-15deg);
    }

    100% {
        transform: translateY(-50%) rotate(50deg);
    }
}

.nuts-img-style {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%) rotate(-15deg);
}

/* Apply animation on hover */
.medicine-card-two:hover .nuts-img-style {
    animation: rotateTo30Nuts 0.4s forwards ease-in-out;
}

@keyframes rotateBackTo10Nuts {
    0% {
        transform: translateY(-50%) rotate(50deg);
    }

    100% {
        transform: translateY(-50%) rotate(-15deg);
    }
}

.medicine-card-two:not(:hover) .nuts-img-style {
    animation: rotateBackTo10Nuts 0.4s forwards ease-in-out;
}

.age-button {
    max-width: 332px;
    position: relative;
    border-radius: 42px;
    overflow: hidden;
    background: linear-gradient(180deg, var(--token-f7fc081e-abbb-4eb2-8fd1-f4fbb9d57124, #56aef3) 0%, var(--token-b08a4a3b-d7fa-4d7b-b52f-4a9bcb96bc00, rgb(74, 205, 206)) 100%);

}

.age-button button {
    position: relative;
    width: fit-content;
    font-weight: 500;
    color: #FFFFFF;
    white-space: nowrap;
}

.medicine-card {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.medicine-card-one {
    position: relative;
    overflow: hidden;
    background: url('img/medicine-bg.webp'), radial-gradient(42.4% 42.4% at 50% 50%, #82CEDF 0%, #1E93C1 100%);
    transition: background 0.3s ease-in-out;
}

/* Create a ::before pseudo-element for hover effect */
.medicine-card-one::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('img/medicine-bg.webp'), radial-gradient(112.74% 362.26% at 50% 50%, #82CEDF 0%, #1E93C1 100%);
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    z-index: 0;
}

/* Ensure content is above the pseudo-element */
.medicine-card-one>* {
    position: relative;
    z-index: 1;
}

/* On hover, fade in the new background */
.medicine-card-one:hover::before {
    opacity: 1;
}

.medicine-card-two {
    position: relative;
    overflow: hidden;
    background: url('img/nuts-bg.webp'), radial-gradient(76.81% 76.81% at 50% 50%, #1E93C1 0%, #5BA3CF 100%);
    transition: background 0.3s ease-in-out;
}

/* Create a ::before pseudo-element for hover effect */
.medicine-card-two::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('img/nuts-bg.webp'), radial-gradient(68.77% 420.06% at 50% 50%, #1E93C1 0%, #1E93C1 100%);
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    z-index: 0;
}

/* Ensure content is above the pseudo-element */
.medicine-card-two>* {
    position: relative;
    z-index: 1;
}

/* On hover, fade in the new background */
.medicine-card-two:hover::before {
    opacity: 1;
}