@import url('https://fonts.googleapis.com/css2?family=Diphylleia&family=Fleur+De+Leah&family=Kurale&display=swap');


.logo_font {
    font-family: "Fleur De Leah", sans-serif;
}
.kurale_font {
    font-family: "Kurale", serif;
}

.hero {

    background-image: url('../img/hero_1.webp');
    background-size: cover;
    background-position: center;
}

@media (max-width: 991px) {
    #hero.section {
        background-image: url('../img/hero_vert_v1.webp');
        min-height: 100svh;
        height: auto;
    }

    .hero .hero-waves {
        position: absolute;
        bottom: 0 ;
        left: 0;
        width: 100%;
        height: 35px;

    }
    .hero .my_decor{
        max-width: 100px;
        padding-bottom: 15px;
    }
    .hero .carousel-container .btn-get-started {
        margin-bottom: 30px !important;
    }

}

.hero-waves {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    z-index: 2;
}

.hero-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.sparkle-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    --sparkle-size: 8px;
    --sparkle-lifespan: 3s;
    --move-distance: 20px;
}
.sparkle-move-fade-up {
    position: absolute;
    width: var(--sparkle-size);
    height: var(--sparkle-size);
    border-radius: 50%;
    will-change: transform, opacity;

    animation-name: sparkle-move-fade-up;
    animation-duration: var(--sparkle-lifespan);
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;



    box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.5);
}


@keyframes sparkle-move-fade-up {
    0% {
        transform: translateY(var(--move-distance)) translateX(0px) rotate(0deg);
        opacity: 0;
        filter: blur(2px) brightness(0.4);
    }
    10% {
        opacity: 1;
        filter: blur(1px) brightness(1);
    }
    25% {
        transform: translateY(calc(var(--move-distance) * 0.5)) translateX(-3px);
        filter: blur(0px) brightness(1.2);
    }
    50% {
        transform: translateY(0px) translateX(3px) rotate(0deg);
        filter: blur(0.5px) brightness(1);
    }
    75% {
        transform: translateY(calc(-1 * var(--move-distance) * 0.5)) translateX(-3px);
        filter: blur(1px) brightness(0.8);
    }
    100% {
        transform: translateY(calc(-1 * var(--move-distance))) translateX(0px) rotate(0deg);
        opacity: 0;
        filter: blur(2px) brightness(0.4);
    }
}






.hero .container {
    position: relative;
    z-index: 5;

}


.btn.btn-silver {
    background: linear-gradient(180deg, #ffffff 0%, #e6e6e6 15%, #b0b0b0 30%, #8c8c8c 50%, #b0b0b0 70%, #e6e6e6 85%, #ffffff 100%);
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.3);
    border-color: silver;
    color: black;
}

@media screen and (max-width: 768px) {

    .nav_underline{
        display: none;
    }


}

.my_decor {
    fill: #F2E9E4;
    max-width: 160px;
    height: auto;
    padding-bottom: 25px;

}


.navmenu a {
    position: relative;
    color: #F2E9E4;
    text-decoration: none;
    padding-bottom: 20px;
    font-size: 18px;
    font-family: "Kurale", serif;

}

.nav_underline {
    min-width: 70px;
    opacity: 0;
    display: inline-block;
    width: auto;
    height: 15px;
}

.navmenu a.active .nav_underline,
.navmenu a:hover .nav_underline {
    opacity: 1;

}

.menu_decor {
    fill: #F2E9E4; /* цвет заливки */

}
.navmenu li {
    top: 8px;
}
.navmenu li.dropdown {
    top: 0;
}



/* diamond spinner styles */
.preloader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(37, 43, 45, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.3s ease;
}
.preloader-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}
.diamond-spinner-svg-container {
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.diamond-icon {
    display: block;
    width: 100%;
    height: 100%;
    color: #DEDBD2;
    stroke-dasharray: 4000;
    stroke-dashoffset: 4000;
    animation: draw-and-sweep 3s linear infinite;
}
@keyframes draw-and-sweep {
    0% { stroke-dashoffset: 4000; }
    50% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -4000; }
}
/* end of diamond spinner styles */

.slogan{
    font-size: 20px;
}


.carousel-inner .carousel-item {
    height: 400px;
}
#aboutCarousel .carousel-indicators button {
    background-color: #182525;

}
.flower_background {

    position: relative;
    z-index: 0;
    overflow: hidden;
    }

.flower_background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-image: url('../img/pat.png');
    background-repeat: repeat;
    background-position: center;
    background-size: 400px 400px;
    opacity: 0.03;
    z-index: 1;
    pointer-events: none;
}
@media (max-width: 767px) {
    #desktopOnlyVisible {
        display: none;
    }
}

.aboutSwiper .swiper-pagination-bullet  {
    width: 14px;
    height: 14px;
    background-color: transparent;
    border: 2px solid #394856;
    clip-path: polygon(
            50% 0%,
            85% 15%,
            100% 50%,
            85% 85%,
            50% 100%,
            15% 85%,
            0% 50%,
            15% 15%
    );
    opacity: 1;
    margin: 0 4px;
    transition: background-color 0.3s, transform 0.3s;
}

/* Цвет активной точки */
.aboutSwiper .swiper-pagination-bullet-active {
    background-color: #333;
    transform: scale(1.2);
}
.myBlogSwiper .swiper-pagination-bullet {
    width: 14px;
    height: 14px;
    background-color: transparent;
    border: 2px solid #394856;
    clip-path: polygon(
            50% 0%,
            85% 15%,
            100% 50%,
            85% 85%,
            50% 100%,
            15% 85%,
            0% 50%,
            15% 15%
    );
    opacity: 1;
    margin: 0 4px;
    transition: background-color 0.3s, transform 0.3s;
}
.myBlogSwiper .swiper-pagination-bullet-active {
    background-color: #333;
}
/* Blog Card Consistency */
.swiper-slide article {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    overflow: hidden;

}

.swiper-slide .post-img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.swiper-slide .d-flex.align-items-center {
    margin-top: auto;
    border-top: 1px solid darkslategrey;
    width: 100%;
    padding: 10px 15px 15px 15px;
}


.swiper-pagination-bullet-active {
    background-color: #bfae9c; /* Заполнение активного элемента */
    transform: scale(1.2);
}

.white_text {
    color: #f2e9e4 !important;
}
.green_text{
    color: #101919 !important;
}