@import url('https://fonts.googleapis.com/css2?family=Diphylleia&family=Fleur+De+Leah&family=Kurale&display=swap');
.float-left {
     float: left !important;
}
.float-right {
     float: right !important;
}
.main {
     background: var(--background-color);
}
.btn {
     background: var(--accent-color);
     color: var(--contrast-color);
     font-family: var(--heading-font), sans-serif;
     font-weight: 500;
     font-size: 16px;
     letter-spacing: 1px;
     padding: 10px 28px;
     border-radius: 25px;
     transition: 0.3s;
     display: inline-flex;
     align-items: center;
     justify-content: center;
}
.btn:hover {
     background: color-mix(in srgb, var(--accent-color) 90%, white 15%);
}


.btn.silver {
     padding-top: 6px;
     padding-bottom: 6px;
     background: #c0c0c0;
     color: #262626;
     border: 2px solid transparent;
     background: linear-gradient(0deg, rgba(150, 150, 150, 1) 0%, rgba(191, 191, 191, 1) 59%, rgba(179, 179, 179, 1) 62%, rgba(192, 192, 192, 1) 100%);
     text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2);
     transition: .2s;
}
.btn.silver:hover {
     border-color: #497228;
}
.bg-mint-light {
     background-color: var(--mint-light) !important;
}
.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;
}
.hero.notfound{
     background-image: url('../img/notfound_1.webp');
}
.hero .hero_container{
     position: relative;
     min-height: 85vh;
     padding-top: 60px;
}

@media (max-width: 991px) {
     .header .logo h1{
          font-size: 42px;
     }
     .hero {
          background-image: url('../img/hero_vert_v1.webp');
          min-height: 100svh;
          height: auto;
     }
     .hero.notfound{
          height: 110vh;
          background-image: url('../img/notfound_v.webp');
     }

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

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

}
@media screen and (max-height: 735px){

     .hero.front{
          background-position: 100%;
     }
     
     .hero h2{
          font-size: 36px;
          margin-bottom: 15px;
     }
     .hero p{
          max-width: initial;
     }
}

.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;
}



.mobile-nav-toggle{
     color: var(--surface-color) !important;
}
.hero .container {
     position: relative;
     z-index: 5;

}


.btn.btn-silver {
     background: linear-gradient(180deg, #fff 0%, #e6e6e6 15%, #b0b0b0 30%, #8c8c8c 50%, #b0b0b0 70%, #e6e6e6 85%, #fff 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;

}
@media (max-width: 768px){
     .navmenu a{
          font-size: 26px;
          padding-bottom: 10px;
     }
     .portfolio .portfolio-filters li{
          font-size: 18px;
     }
}

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

.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);
     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_backgrounddd::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;

}
.post-img img {
     width: 100%;
}
.swiper-slide .post-img img {
     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;
}
.headerback {
     height: 33vh;
     background-size: contain;
     position: fixed;
     z-index: -1;
     width: 100vw;
     background-repeat: no-repeat;
     background-image: url('../img/hero_wide.webp');
}
.non_home_background {
     background-size: cover;
     background-repeat: no-repeat;
     background-image: url(../img/hero_wide.webp);
     background-position-x: 10%;
     background-color: black;
}
@media (max-width: 767px){
     .page-title h1{

          font-size: 30px;
     }

     .non_home_background{
          background-image: none;
     }
}
/** post list **/
.blog-posts .post-img {
     background-size: cover;
     background-position: top;
     height: 240px;
     max-height: initial;
}
/** post styles **/
@media (max-width: 767px){
     .blog-details .article{
          padding: 15px;
     }
     .blog-details .post-img{
          margin: -15px -15px 20px
     }
}

article.blog-post {
     background-color: #fcfcfc !important;
     border-radius: 5px;
}
article.blog-post .post-media {
     clear: both;
}
article.blog-post img {
     max-width: 100%;
     height: auto;
}
.blog-post .post-img {
     border-radius: 8px;
}
iframe.media-oembed-content{
     width: 100%;
     aspect-ratio: 16 / 9;
     height: auto;
     border-radius: 5px;
}
@media (min-width: 767px) {
     section.contact {
          padding-bottom: 80px;
          padding-top: 80px;
     }
     section.contact .section-title{
          padding-bottom: 80px;
     }
}