/* Custom Scroll Bar */
::-webkit-scrollbar {
    width: 10px;
}

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

::-webkit-scrollbar-thumb {
    background: #2d6dc7;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #2869c3;
}

/* Animation for Features and Testimonials */
.feature,
.testimonial {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.feature.animated,
.testimonial.animated {
    opacity: 1;
}

@keyframes slideInUp {
    0% {
        transform: translateY(100px);
    }

    100% {
        transform: translateY(0);
    }
}

.feature.animated,
.testimonial.animated {
    animation: slideInUp 0.5s ease forwards;
}

/* src/styles/editor.css */

.ql-editor {
    min-height: 200px;
    font-size: 16px; /* Default font size */
}

.ql-snow .ql-picker.ql-font span[data-value="serif"]::before {
    content: "Serif";
    font-family: Georgia, Times, "Times New Roman", serif;
}

.ql-snow .ql-picker.ql-font span[data-value="monospace"]::before {
    content: "Monospace";
    font-family: Monaco, Courier, monospace;
}

.ql-snow .ql-picker.ql-font span[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before {
    font-family: Georgia, Times, "Times New Roman", serif;
}

.ql-snow .ql-picker.ql-font span[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before {
    font-family: Monaco, Courier, monospace;
}

/* Customize color options */
.ql-snow .ql-picker.ql-color .ql-picker-item[data-value="#e60000"] {
    background-color: #e60000;
}

.ql-snow .ql-picker.ql-color .ql-picker-item[data-value="#ff9900"] {
    background-color: #ff9900;
}

/* Add more colors as needed */
/* src/styles/trix.css */

trix-toolbar [data-trix-button-group="file-tools"],
trix-toolbar [data-trix-button-group="history-tools"] {
    display: none;
}

trix-editor {
    min-height: 200px;
    font-size: 16px;
    border: 1px solid #d2d6dc; /* Tailwind border-gray-300 */
    border-radius: 0.375rem; /* Tailwind rounded-md */
    padding: 0.5rem; /* Tailwind p-2 */
    background-color: #fff; /* Tailwind bg-white */
    color: #4a5568; /* Tailwind text-gray-700 */
}

trix-editor:focus {
    outline: none;
    border-color: #4299e1; /* Tailwind border-blue-500 */
}

/* Custom buttons styling */
.trix-button--icon-text-color::before {
    content: "A";
    color: #b5d5f0; /* Tailwind text-blue-500 */
}

.trix-button--icon-font-size::before {
    content: "A";
    font-size: 20px;
}

.trix-button--icon-code::before {
    content: "</>";
}

.lazy {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.lazy-loaded {
    opacity: 1;
}

.carousel-container {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100%;
    scroll-snap-type: x mandatory;
}

.carousel-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

.swiper-button-prev,
.swiper-button-next {
    color: #fff;
    transition: color 0.3s;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
    color: #facc15;
}
/* Animation Classes */
.slide-enter {
    opacity: 0;
    transform: scale(0.9);
}
.slide-enter-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.3s, transform 0.3s;
}
.slide-enter-done {
    opacity: 1;
    transform: scale(1);
}
.slide-exit {
    opacity: 1;
}
.slide-exit-active {
    opacity: 0;
    transition: opacity 0.3s;
}
/* Overlay Styles */
.overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent black */
}
/* Modern Effects */
.swiper-slide {
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
    position: relative; /* Ensure proper positioning of overlay */
}
.swiper-slide:hover {
    transform: translateY(-5px);
}

/* whatsapp style */

@keyframes bounceIn {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

.whatsapp-button img {
    animation: bounceIn 1s;
}
.whatsapp-button-container {
    position: fixed;
    bottom: 100px;
    margin-top: 10px;
    right: 30px;
    z-index: 1000;
    background-color: #4ade80;
    padding: 2px;
    border: 1px solid #ffffff; /* Adjust the border color and width as needed */
    border-radius: 10px; /* Adjust the value for more or less rounded corners */
    box-shadow: 0 1px 2px rgb(241, 241, 241); /* Adjust the shadow as needed */
}

.whatsapp-button img {
    width: 60px;
    height: 60px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}

.whatsapp-button img:hover {
    transform: scale(1.1);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.tooltip {
    visibility: hidden;
    background-color: #25d366;
    color: white;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 70px;
    right: 10px;
    opacity: 0;
    transition: opacity 0.3s;
}

.whatsapp-button:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 768px) {
    .whatsapp-button-container {
        bottom: 20px;
        right: 15px;
    }

    .whatsapp-button img {
        width: 50px;
        height: 50px;
    }

    .tooltip {
        bottom: 70px;
        right: 5px;
    }
}

/* end whatsapp Style */

.dropdown-enter-active,
.dropdown-leave-active {
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.dropdown-enter-from,
.dropdown-leave-to {
    opacity: 0;
    transform: translateY(-10px);
}

/*  trix editor  */

trix-toolbar [data-trix-button-group="font-tools"] {
    display: flex;
}

/* Add your custom styles */

/* quill editor */


.ql-custom-color-picker,
.ql-custom-bg-color-picker {
    position: relative;
    display: inline-block;
}

.ql-custom-color-picker input,
.ql-custom-bg-color-picker input {
    display: none;
}

.ql-custom-color-picker label,
.ql-custom-bg-color-picker label {
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    padding: 2px;
}

.ql-custom-color-picker input[type="color"],
.ql-custom-bg-color-picker input[type="color"] {
    height: 24px;
    width: 24px;
}