/*!
Theme Name: jaffa
Theme URI: http://s2d.com.ua/
Author: Kadnychanskyi A.
Author URI: http://s2d.com.ua/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: jaffa
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

jaffa is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
@font-face {
    font-family: 'yanone-kaffeesatz-200';
    src: url('../assets/css/fonts/yanone-kaffeesatz-v10-latin_cyrillic_latin-ext-200.eot');
    src: url('assets/css/fonts/yanone-kaffeesatz-v10-latin_cyrillic_latin-ext-200.eot?#iefix') format('embedded-opentype'),
         url('assets/css/fonts/yanone-kaffeesatz-v10-latin_cyrillic_latin-ext-200.woff2') format('woff2'),
         url('assets/css/fonts/yanone-kaffeesatz-v10-latin_cyrillic_latin-ext-200.woff') format('woff'),
         url('assets/css/fonts/yanone-kaffeesatz-v10-latin_cyrillic_latin-ext-200.ttf')  format('truetype'),
         url('assets/css/fonts/yanone-kaffeesatz-v10-latin_cyrillic_latin-ext-200.svg#yanone') format('svg');
}

@font-face {
    font-family: 'yanone-kaffeesatz-300';
    src: url('assets/css/fonts/yanone-kaffeesatz-v10-latin_cyrillic_latin-ext-300.eot');
    src: url('assets/css/fonts/yanone-kaffeesatz-v10-latin_cyrillic_latin-ext-300.eot?#iefix') format('embedded-opentype'),
         url('assets/css/fonts/yanone-kaffeesatz-v10-latin_cyrillic_latin-ext-300.woff2') format('woff2'),
         url('assets/css/fonts/yanone-kaffeesatz-v10-latin_cyrillic_latin-ext-300.woff') format('woff'),
         url('assets/css/fonts/yanone-kaffeesatz-v10-latin_cyrillic_latin-ext-300.ttf')  format('truetype'),
         url('assets/css/fonts/yanone-kaffeesatz-v10-latin_cyrillic_latin-ext-300.svg#yanone') format('svg');
}

@font-face {
    font-family: 'yanone-kaffeesatz-700';
    src: url('assets/css/fonts/yanone-kaffeesatz-v10-latin_cyrillic_latin-ext-700.eot');
    src: url('assets/css/fonts/yanone-kaffeesatz-v10-latin_cyrillic_latin-ext-700.eot?#iefix') format('embedded-opentype'),
         url('assets/css/fonts/yanone-kaffeesatz-v10-latin_cyrillic_latin-ext-700.woff2') format('woff2'),
         url('assets/css/fonts/yanone-kaffeesatz-v10-latin_cyrillic_latin-ext-700.woff') format('woff'),
         url('assets/css/fonts/yanone-kaffeesatz-v10-latin_cyrillic_latin-ext-700.ttf')  format('truetype'),
         url('assets/css/fonts/yanone-kaffeesatz-v10-latin_cyrillic_latin-ext-700.svg#yanone') format('svg');
}

@font-face {
    font-family: 'yanone-kaffeesatz-regular';
    src: url('assets/css/fonts/yanone-kaffeesatz-v10-latin_cyrillic_latin-ext-regular.eot');
    src: url('assets/css/fonts/yanone-kaffeesatz-v10-latin_cyrillic_latin-ext-regular.eot?#iefix') format('embedded-opentype'),
         url('assets/css/fonts/yanone-kaffeesatz-v10-latin_cyrillic_latin-ext-regular.woff2') format('woff2'),
         url('assets/css/fonts/yanone-kaffeesatz-v10-latin_cyrillic_latin-ext-regular.woff') format('woff'),
         url('assets/css/fonts/yanone-kaffeesatz-v10-latin_cyrillic_latin-ext-regular.ttf')  format('truetype'),
         url('assets/css/fonts/yanone-kaffeesatz-v10-latin_cyrillic_latin-ext-regular.svg#yanone') format('svg');
}



*,
*::after,
*::before{
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}
html{font-size: 20px;}

body:not(.single) {
    overflow-x: hidden;
}

body{
    font-family: "yanone-kaffeesatz-regular", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    font-size: 1rem;
}

h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5{
    font-family: 'yanone-kaffeesatz-700', sans-serif;
    color: #5e5e5e;
    word-break: break-word;
    hyphens: none;
    line-height: 1.2;
    margin:0;
}


/* Заголовки */
h1, .h1 {
  font-size: clamp(2.8rem, 4.2rem + 1.4vw, 9.1rem);
}

h2, .h2 {
  font-size: clamp(2.1rem, 3.5rem + 2vw, 7rem);
}

@media (max-width: 576px) {
  h1, .h1 {
    font-size: clamp(1.4rem, 2.1rem + 0.7vw, 4.55rem);
  }

  h2, .h2 {
    font-size: clamp(1.05rem, 1.75rem + 1vw, 3.5rem);
  }


}

h3, .h3 {
  font-size: clamp(2rem, 1.5rem + 1.5vw, 4rem); /* 40–80px */
}
h4, .h4 {
  font-size: clamp(1.75rem, 1.2rem + 1.2vw, 3rem); /* 35–60px */
}
h5, .h5 {
  font-size: clamp(1.3rem, 1rem + 1vw, 2.2rem); /* 30–50px */

}


p,span{
    word-break: break-word;
/*    hyphens: auto*/
}
.post-template-jaffa :is(em) {color: #fff}

address, dl, fieldset, figure, ol, p, pre, ul{margin: 0}
body.snap-scroll-page {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.snap-scroll-page .wrapper {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

.section {
    height: 100vh;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

#section1 { background: #1abc9c; }
#section2 { background: #3498db; }
#section3 { background: #9b59b6; }
#section4 { background: #e67e22; }
#section5 { background: #e74c3c; }



.dots-navigation {
    position: fixed;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: white;
    transform: scale(1.3);
}

@media (max-width: 768px) {
    .snap-scroll-page .wrapper {
        scroll-snap-type: none;
    }

    .section {
        height: auto;
        min-height: 100vh;
    }

    .dots-navigation {
        display: none;
    }
}



/******************************* header *****************************/




.header-jaffa{
    position: fixed;
    z-index: 101;
    top: 58px;
    left: 0;
    padding: 0 78px;
    width: 100%;
}


@media screen and (max-width: 1600px) {
    .header-jaffa{top: 10px; padding: 0 10px;}
}

.header__items{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	align-content: center;
}

.logo_jaffa{
	max-width: 150px;
	height: auto;
}
.logo_jaffa :is(svg){
	width: 120px;
	height: 55px;
}

.social-icons.fb-social :is(svg){width: 18px;height: 18px;margin: 0 15px}
.social-icons.yt-social :is(svg){width: 21px;height: 21px;margin: 0 15px}
.social-icons.ins-social :is(svg){width: 18px;height: 18px;margin: 0 30px 0 15px}
.social-icons a:hover{opacity: .8}

.arrowdown-line{
}
 a.arrowdown-link:hover{opacity: .8}


/******************************* footer *****************************/


.footer-section  {
	background: #00af43 url('/wp-content/uploads/2025/05/footerbg.webp') no-repeat 50% 50%;
	 z-index: 12;
	 position: relative;
	 width: 100%;
}


@-webkit-keyframes shake-top {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
  }
  10% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  80% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  90% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}
@keyframes shake-top {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
  }
  10% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  80% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  90% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}



@media (min-width: 1200px) {
    .footer-content{
        min-width: 900px;
    }

}


.footer-content :is(a,p){
	color: white;
	text-decoration: none;
	font-size: 28px;
	text-transform: uppercase;
	letter-spacing: 2px;
}



.footer-content a:hover{
    color: #d3f146;
}

.phoneline-block__footer{
    opacity: .6;
    letter-spacing: 2px;
    font-size: 20px;
}

.logoFooter{opacity: .6}
.social-footer__icon:hover{opacity: .8}
.logoFooter:hover{opacity: .4}


.copy-block{
    position: absolute;
    bottom:0;
    padding-bottom: 15px;
    left: 0;
}
.copy-block.page-footer{
    position: absolute;
    bottom:0;
    padding-bottom: 5px;
    left: 0;
    font-size: 12px;
    z-index: 100;
}

.copy-news{color: #fff}


.social-footer{height: 40px}
.social-footer__icon img{width: 24px;height: 24px}

/******************   mmenu  ******************/
/* Гамбургер іконка */
.hamburger-icon {
    display: flex;
    cursor: pointer;
    width: 30px; /* Зменшено ширину кнопки */
    height: 30px; /* Зменшено висоту кнопки */
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border-radius: 50%; /* Робимо кнопку круглою */
    background-color: rgb(255, 255, 255, 0); /* Колір фону кнопки (можна змінити) */
    padding: 0; /* Зменшено відступи всередині кнопки */
    transition: background-color 0.3s ease;
}
.hamburger-icon:hover {opacity: .8}

.hamburger-icon .bar {
    width: 100%;
    height: 3px; /* Зменшено висоту ліній */
    background-color: rgba(0, 175, 67, 0); /* Колір ліній гамбургера з прозорістю */
    border-radius: 5px;
    transition: all 0.3s ease;
}

/* Стилі для меню */
#nav-jaffa {
    display: none; /* Сховано по замовчуванню */
    position: fixed;
    top: 0;
    left: 0;
    background-color: #00af43; /* Зелене тло */
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    flex-direction: column;
    padding-top: 20px;
    bottom: 0;
    opacity: .95;
}

#nav-jaffa.menu-open {
    display: flex; /* Показуємо меню при класі .menu-open */
}

/* Кнопка закрити */
.close-menu-btn {
    background-color: transparent;
    border: none;
    color: white;
    font-size: 18px;
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    z-index: 10000;
}

/* Анімація гамбургера */
.hamburger-icon .bar {
    width: 100%;
    height: 3px; /* Зменшено висоту ліній */
    background-color: rgba(0, 175, 67, 0); /* Колір ліній гамбургера з прозорістю */
    border-radius: 5px;
    transition: all 0.3s ease;
}

/* Стилі для мобільних пристроїв і великих екранів */
@media screen and (max-width: 768px), screen and (min-width: 768px) {
    .hamburger-icon {
        display: flex;
    }
}


/**********************  списки мов - випадаючий список ****************/

.language-dropdown {
    position: relative;
    display: inline-block;
}

.language-toggle {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 10px;
    display: flex;
    align-items: center;
    color: #fff;
}

.language-toggle .arrow {
    margin-left: 5px;
    font-size: 12px;
    color: #fff;
}

.language-list {
    display: none;
    position: absolute;
    background-color: #00af43;
    top: 100%;
    left: 0;
    width: 75%;
    z-index: 10;
    border-radius: 10px;
}

.language-dropdown:hover .language-list {
    display: block;
}

.language-list ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.language-list li {
    padding: 8px;
    cursor: pointer;
}

.language-list li.current-language {
    opacity: .7;
}

.language-list li a {
    text-decoration: none;
    color: #fff;
}

.language-list li:hover {
    opacity: .5;
}


/* ******************* БЛОКИ ************************/
.slog-mp__name,.slog-mp__row2,.slog-mp__row3rotate  {
    font-family: 'yanone-kaffeesatz-700', sans-serif;
    text-transform: uppercase;
}

.slog-mp__name {
   font-size: clamp(5rem, 3rem + 3vw, 8rem); /* 60–120px */
   line-height: 5.5rem;
   content-visibility: auto;
}
.slog-mp__row2 {
   font-size: clamp(2rem, 1.5rem + 1.5vw, 4rem); /* 40–80px */
    line-height: 3rem;
    content-visibility: auto;
}
.slog-mp__row3rotate {
    font-size: clamp(2rem, 1.5rem + 1.5vw, 4rem); /* 40–80px */
    line-height: 3rem;
    transform: rotate(-3deg);
    content-visibility: auto;
}

.arrowdown-line{margin-top: 1rem}


.section .container-fluid, .section .container-fluid .row{padding: 0;;margin: 0;}
.section .container-fluid .row{padding: 0;;margin: 0;--bs-gutter-x:0}



.section-block{
	display: flex;
    flex-direction: column;
    height: 100vh; /* або інша бажана висота */
}

.section-block__item {
        height: 50vh; /* Фиксированная высота */
    overflow: hidden; /* Скрываем выходящие за границы элементы */
}

.sect-1__block-1-1 {
    flex: 0 0 52%; /* не зростає, не стискається, базовий розмір 60% */
    background-color: #74d2f3; 
    z-index: 7;
}

.sect-1__block-1-2 {
    flex: 0 0 48%; 
    background-color: #ffdd22; 
    z-index: 9;
}

.sect-1__block-2-1 {
    flex: 0 0 45%; /* не зростає, не стискається, базовий розмір 60% */
    background-color: #bee508; 
    z-index: 7;
}

.sect-1__block-2-2 {
    flex: 0 0 55%; 
/*    background: url('/wp-content/uploads/2025/05/404bg-scaled.webp') no-repeat 50% 50%;*/
    background: radial-gradient(circle, rgba(83, 188, 66, 1) 0%, rgba(23, 103, 62, 1) 100%);
    background-size: cover;
    z-index: 9;
    content-visibility: auto;
}
.sect-1__block-2-22 {
    flex: 0 0 100%; 
/*    background: url('/wp-content/uploads/2025/05/404bg-scaled.webp') no-repeat 50% 50%;*/
    background: radial-gradient(circle, rgba(83, 188, 66, 1) 0%, rgba(23, 103, 62, 1) 100%);
    background-size: cover;
    z-index: 9;
    content-visibility: auto;
}


.sect-1___text{
	display: flex;
    justify-content: center;
    align-self: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    width: 100%;    
}

.sect-1__block-3-1 {
    flex: 0 0 48%; /* не зростає, не стискається, базовий розмір 60% */
    background-color: #f67878; 
    z-index: 7;
}

.sect-1__block-3-2 {
    flex: 0 0 52%; 
    /*background-color: #ffaa39; */
    background-color: #c18d68;
    z-index: 9;
}

.sect-1__block-4-1 {
    flex: 0 0 55%; /* не зростає, не стискається, базовий розмір 60% */
    background-color: #74d2f3; 
    z-index: 10;
}

.sect-1__block-4-2 {
    flex: 0 0 45%; 
    background-color: #ffdd22; 
    z-index: 11;
}


.sect-1__block-5-1 {
    flex: 0 0 48%; /* не зростає, не стискається, базовий розмір 60% */
    background: radial-gradient(circle, rgba(83, 188, 66, 1) 0%, rgba(23, 103, 62, 1) 100%);
    background-size: cover; 
    z-index: 12;
}

.sect-1__block-5-2 {
    flex: 0 0 52%; 
    background-color: #bee508; 
    z-index:13;
}

.sect-1__block-6-1 {
    flex: 0 0 60%; /* не зростає, не стискається, базовий розмір 60% */
    background-color: #f67878; 
    z-index: 14;
}

.sect-1__block-6-2 {
    flex: 0 0 40%; 
    background-color: #ffaa39; 
    z-index:15;
}



/*sect-2*/

.sect-2__block-1-1 {
    flex: 0 0 100%; 
    background: url('/wp-content/uploads/2025/05/bigimg1_1566543021.webp') no-repeat 50% 50%;
    background-size: cover;
    z-index: 10;
}

.sect-2__block-2-1 {
    flex: 0 0 65%; 
    background-color: #74d2f3; 
    z-index: 10;
    height: 100%;
}
.sect-2__block-2-2 {
    flex: 0 0 35%; 
    background-color: #00af43; 
    z-index: 11;
}

.sect-2___text{
	font-family: yanone-kaffeesatz-700, sans-serif;
	font-size: 36px;
	transform: rotate(-5deg);
	letter-spacing: 2px;
	padding: 0px 15%;
	line-height: 1.5;
	display: flex;
    align-content: center;
    align-self: center;
    align-items: center;
    height: 100%;
    text-transform: uppercase;
}


/*sect-3*/

.sect-3__block-1-1 {
    flex: 0 0 100%; 
    background: url('/wp-content/uploads/2025/05/bigimg2_1566543212.webp') no-repeat 50% 50%;
    background-size: cover;
}

.sect-3__block-2-1 {
    flex: 0 0 65%; 
    background-color: #ffaa39; 
     z-index: 10;
}
.sect-3__block-2-2 {
    flex: 0 0 35%; 
    background-color: #00af43; 
     z-index: 11;
}

/*sect-4*/
.sect-4__block-1-1 {
    flex: 0 0 100%; 
    background: url('/wp-content/uploads/2025/05/bigimg3_1566543251.webp') no-repeat 50% 50%;
    background-size: cover;
}

.sect-4__block-2-1 {
    flex: 0 0 43%; 
    background-color: #00af43;
     z-index: 10; 
}
.sect-4__block-2-2 {
    flex: 0 0 57%; 
    background-color: #bee508;
     z-index: 11;
}

/*sect-5*/

.sect-5__block-1-1 {
    flex: 0 0 100%; 
    background: url('/wp-content/uploads/2025/05/bigimg4_1566543304.webp') no-repeat 50% 50%;
    background-size: cover;
     z-index: 11;
}

.sect-5__block-2-1 {
    flex: 0 0 60%; 
    background-color: #f67878; 
     z-index: 10;
}
.sect-5__block-2-2 {
    flex: 0 0 40%; 
    background-color: #00af43; 
     z-index: 11;
}
/*sect-6*/

.sect-6__block-1-1 {
    flex: 0 0 100%; 
    background: url('/wp-content/uploads/2025/05/bigimg5_1566543339.webp') no-repeat 50% 50%;
    background-size: cover;
}

.sect-6__block-2-1 {
    flex: 0 0 47%; 
    background-color: #00af43;
 
}
.sect-6__block-2-2 {
    flex: 0 0 53%; 
    background-color: #ffdd22; 
     z-index: 10;
}




.slide-in-bottom {
	-webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2025-4-4 14:40:48
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 768px) {
    .section-block__item .hover-box {
        transition: none; /* Отключаем анимацию */
    }

    .section-block__item:hover .rico.up-rico {
        transform: none; /* Отключаем эффект */
    }
}



/***************************   hover img HOME  ********************/


/* Базовые стили для родительского контейнера */
.img-section {
  position: relative; /* Для корректной работы абсолютного позиционирования */
  display: flex;
  justify-content: center;
  align-items: end;
  height: 100%; /* Высота блока */
  overflow: hidden; /* Скрываем выходящие за границы элементы */
}

/* Левое и правое изображения */
.section-block__item .hover-left-image,
.section-block__item .hover-right-image {
  position: absolute;
  top: 50%; /* Центрируем по вертикали */
  transform: translateY(-50%);
  width: auto; /* Сохраняем пропорции */
  height: 80%; /* Высота изображений равна 80% от высоты .img-section */
  opacity: 0; /* По умолчанию скрыты */
  z-index: 1; /* Чтобы изображения были поверх других элементов */
  transition: all 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940); /* Плавная анимация */
}

/* Левое изображение */
.section-block__item .hover-left-image {
  left: -20%; /* Сдвигаем за пределы блока */
  transform: translateX(-100%) translateY(-50%); /* Полностью выносим за левый край */
}

/* Правое изображение */
.section-block__item .hover-right-image {
  right: -20%; /* Сдвигаем за пределы блока */
  transform: translateX(100%) translateY(-50%); /* Полностью выносим за правый край */
}



/* Эффект при наведении */
.section-block__item .hover-box{
     transition: transform 0.4s ease;
}

.section-block__item .hover-box:hover .rico.up-rico {
    transform: translateY(-10%);
}

.section-block__item:hover .hover-left-image {
  left: 0; /* Перемещаем внутрь */
  transform: translateX(0) translateY(-50%); /* Возвращаем в исходное положение */
  opacity: 1; /* Делаем видимым */
}

.section-block__item:hover .hover-right-image {
  right: 0; /* Перемещаем внутрь */
  transform: translateX(0) translateY(-50%); /* Возвращаем в исходное положение */
  opacity: 1; /* Делаем видимым */
}



/*******************************************************************/




.img-section.f-sect .rico {
    width: 220px;
    height: auto;
    opacity: 0;    
    position: relative; 
   margin-bottom: -55%; 
}

.img-section.f-sect .rico .visible-rico {
    opacity: 1;
    margin-bottom: -45%;  
    transition: opacity 0.8s ease;
    -webkit-animation: slide-in-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.rico.up-rico {
  margin-bottom: -45%;
  transition: transform 0.4s ease;
}

.rico {
    width: 300px;
    height: auto;
    opacity: 0;    
    position: relative; 
   margin-bottom: -150px; 
    z-index: 2; /* Верхній шар */
}

/* Новые исправленные стили для SVG */
.svg-fon__section-product {
    position: absolute;
    width: 70%; /* Или фиксированная ширина 481px */
    height: auto;
    bottom: -50%; /* Опускаем на 50% вниз */
    left: 50%;
    opacity: 0;
    z-index: 1;
    transform: translateX(-50%) rotate(180deg);
    animation: svg-rise-up 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
    will-change: transform, opacity; /* Оптимизация анимации */
}

/* Ключевые кадры анимации */
@keyframes svg-rise-up {
    0% {
        transform: translate(-50%, 100px) rotate(180deg);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, 0) rotate(180deg);
        opacity: 1;
    }
}

/* Гарантируем, что анимация не будет сброшена при добавлении других классов */
.svg-fon__section-product.animated {
    animation: none !important;
}

.sect-2__svg-fon .st2 {fill: #42a7ca !important;stroke: #42a7ca !important;}
.sect-2__svg-fon .st3 {fill: #ea9019 !important;stroke: #ea9019 !important;}
.sect-2__svg-fon .st4 {fill: #a5c609 !important;stroke: #a5c609 !important;}
.sect-2__svg-fon .st5 {fill: #f74e4e !important;stroke: #f74e4e !important;}
.sect-2__svg-fon .st6 {fill: #e4c207 !important;stroke: #e4c207 !important;}




.visible-rico {
    opacity: 1;
    margin-bottom: -150px;  
    transition: opacity 0.8s ease;
    -webkit-animation: slide-in-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}


.sect-2___text.rico{
	width: 100%;
    height: 100%;
    transform: rotate(-5deg);
    opacity: 0;    
    position: relative; 
   margin-bottom: 0; 
}

.sect-2___text.rico.visible-rico {
    opacity: 1;  
    transition: opacity 0.8s ease;
    -webkit-animation: slide-in-bottom-text 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-bottom-text 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-bottom-text {
  0% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-bottom-text {
  0% {
    -webkit-transform: translateY(100px);
            transform: translateY(100px);


    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
            transform: rotate(-5deg);
    opacity: 1;
  }
}


.ksendo {
    width: 220px;
    height: auto;
    animation: fade-in-bottom 1.5s cubic-bezier(0.390, 0.575, 0.565, 1.000);
}

@keyframes fade-in-bottom {
    0% {
        transform: translateY(200px);
        opacity: 0;
    }
    99% {
        transform: translateY(20%);
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

.ksendo {
    transform: translateY(20%);
    transition: transform 0.4s ease;
}

.ksendo:hover {
    transform: translateY(6%) !important;
}

/************ @media ksendo   **************/

@media (max-width: 1600px) {
    .ksendo {
        width: 180px;
        height: auto;
        animation: fade-in-bottom 1.5s cubic-bezier(0.390, 0.575, 0.565, 1.000);
    }

    @keyframes fade-in-bottom {
        0% {
            transform: translateY(200px);
            opacity: 0;
        }
        99% {
            transform: translateY(15%);
            opacity: 1;
        }
        100% {
            opacity: 1;
        }
    }

    .ksendo {
        transform: translateY(15%);
        transition: transform 0.4s ease;
    }

    .ksendo:hover {
        transform: translateY(7%) !important;
    }

}






/******************* preloader ****************/

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
/*  background-color: #00af43;*/
background: radial-gradient(circle, rgba(0, 175, 67, 1) 50%, rgba(23, 103, 62, 1) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.5s ease;
}

#preloader img {
  width: 200px; /* або будь-який інший розмір */
  height: auto;
}

#preloader.hide {
  opacity: 0;
  pointer-events: none;
}







/**********************    ************************/


#breadcrumbs :is(a,p,span){
    color: #fff;
}

/********************* package-block  *******************************/



.package-block___fon-bottom{
    flex: 0 0 30%;
    background-color: #fff;
    z-index: 10;
}

.package-block__slider-items{

}
.package-block___types-image-product{

}
.name-of-trademark, .name-of-trademark__types{
    text-transform: uppercase;
    font-family: 'yanone-kaffeesatz-700', sans-serif;
}
.name-of-trademark{
    color: white!important;
    transform: rotate(-3deg);
    margin-left: 2rem;
}
.category-title.name-of-trademark__types{
    color: #1C394E; 
    max-width: 100%;
    line-height: .85;
    white-space: normal;
    padding-left: 20%;
    text-indent: -20%;
}



@media (min-width: 1600px) {
   .name-of-trademark__types{font-size: 8rem;}
}



.product-description, .name_product__with-composition,
.product-composition__text,.product-composition__table{color: #1C394E;}
.product-composition__text p.h5, .product-composition__table p.h5{padding: 20px 0 }

.product-description{
    display: flex;
    justify-content: center;
    font-size: 1.4rem;
}


a.btn-product-composition{
    font-size: 24px;
    background-color: #1C394E;
    color: #fff;
    padding: 10px 20px 8px;
    border-radius: 25px;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    z-index: 26;
    line-height: 1;
}


a.btn-product-composition:hover{
    opacity: .8;
    background-color: #1C394E;
    color: #fff;
}


/* Category slider styles */
  .package-block__slider {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding-top: 90px;
    padding-left: 10%;
    height: 170px;
  }
  
  .package-block__slider::-webkit-scrollbar {
    height: 5px;
  }
  
  .package-block__slider::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
  }


  .slider-category {
    display: inline-flex;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    flex-direction: column;
    align-items: center;
    padding: 5px;
  }
  
  .slider-category img {
    transition: transform 0.3s ease;
  }
  
  .slider-category:hover img {
    transform: scale(1.1);
  }
  
  .slider-category:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: white;
    transition: width 0.3s ease;
  }
  
  .slider-category.active:after {
    width: 100%;
  }
  
  .slider-category__topslider-items{object-fit: contain;}


  /* Product slider styles */
  .package-block__product-slider-items {
    overflow-x: auto;
    white-space: nowrap;
    z-index: 26;
  }
  
  .package-block__product-slider-items::-webkit-scrollbar {
    height: 5px;
  }
  
  .package-block__product-slider-items::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
  }
  
  .product-item {
    display: inline-flex;
    margin-right: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 5px;
    border-radius: 5px;
  }
  
  .product-item:hover {
    transform: translateY(-5px);
  }
  
.row-package-block___about-product{
    height: calc(70vh - 180px) !important;
}

.package-block___img-product{}

.package-block___img-product-main {
    width: 18vw;
    height: auto;
    object-fit: contain;
    position: absolute;
    bottom: 10vh;
    left: 75%;
    transform: translateX(-50%);
    z-index: 25;
}

.package-block___img-product-package-icon{
    width: 55px;
    height: auto;
    object-fit: contain;
    position: absolute;
    bottom: 35vh;
    left: 85%;
    transform: translateX(-50%);
   z-index: 25;
}

/* Адаптация для планшетов */

@media (min-width: 1800px) {

    .package-block__top,.package-block___fon-bottom{
        padding: 0 50px;
    }
      .package-block___img-product-package-icon {}
}



@media (min-width: 1700px) {
    .slider-category__topslider-items{width: 70px;height: 70px;}
}
@media (max-width: 1699px) {
    .slider-category__topslider-items{width: 50px;height: auto;}
    .package-block___img-product-package-icon{}    
}



@media (max-width: 1699px) {  
    .package-block___img-product-package-icon{}   
}



@media (min-width: 1400px) {  
    .kvendo-still{padding-right:40%}
    a.btn-product-composition{}


}


/* Адаптация для планшетов */
@media (min-width: 1200px) {
  .package-block__slidersitems{gap: 30px}
    a.btn-product-composition{}

}


@media (max-width: 1100px) {
  .package-block___img-product-package-icon {
  }
}

@media (min-width: 992px) {
        .package-block__top,.package-block___fon-bottom{
        padding: 0 40px;
    }
    .package-block___about-product-name{min-width: 55%}
    .package-block___about-product-composition{min-width: 45%}

}


@media (max-width: 991px) {
  .package-block___img-product-package-icon {
  }
  .package-block__slider {padding-bottom: 0;}

    .package-block__slider {
    padding-top:90px;
    padding-left: 5% ;
    height: auto;
    padding-bottom: 20px;
  }
    .product-description{font-size: 1rem;}
    .package-block___img-product-main {
        width: 150px;
        bottom: 23vh;
        left: 70%;
    }
    .package-block___img-product-package-icon {
        width: 35px;
        height: auto;
        object-fit: contain;
        position: absolute;
        bottom:32vh ;
        left: 93%;
        transform: translateX(-50%);
        z-index: 25;
    }

}

@media (min-width: 992px) and (max-width: 1199px) {
    a.btn-product-composition {}
    /* Category slider styles */

  
}


@media (min-width: 768px) and (max-width: 992px) {
    a.btn-product-composition {}
    .slider-category:after {bottom: 0px;}
    .package-block__product-slider-items img{max-height: 16vh;} 
   
}


/* Адаптация для планшетов */
@media (min-width: 768px) {
  .package-block__slidersitems{gap: 20px}
  .pc-noscreen{display: none}
        .package-block__product-slider-items img{max-height: 18vh} 
}



/* Адаптация для планшетов */
@media (max-width: 767px) {
  .package-block__slidersitems{gap: 0}

    .mob-noscreen{display: none}
    a.btn-product-composition {}
    .slider-category:after {bottom: 0px;}

    .tabletScreen {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(/wp-content/uploads/2025/05/tabletbg.webp) no-repeat 50% 50%;
        background-size: cover;
        z-index: 5;
    }
        .tabletScreen .svgTextHolder {
        width: 300px;
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        bottom: 13.3%;
    }
    .sect-2__block-1-1 {
    flex: 0 0 100%;
    background: url(/wp-content/uploads/2025/05/bigimg1_1566543021.webp) no-repeat 0% 50%;
    background-size: cover;
    z-index: 10;
    }
    .sect-4__block-1-1 {
    flex: 0 0 100%;
    background: url(/wp-content/uploads/2025/05/bigimg3_1566543251.webp) no-repeat 25% 50%;
    background-size: cover;
    }
    .svg-fon__section-product {
    position: absolute;
    width: 100%;
    height: auto;
    bottom: -30%;
    }
    .package-block__product-slider-items img{max-height: 20vh;padding-bottom: 5vh;}
    .product-item {margin-right:0}

    .package-block__top,.package-block___fon-bottom{padding: 0;}
    .footer-content :is(a,p) {font-size: 20px}
    .row-package-block___about-product{height: 80%;}
    a.btn-product-composition{
        font-size: 20px;
        padding: 7px 15px 5px;
        border-radius: 15px;
    }   

    #preloader img {
      width: 120px; /* або будь-який інший розмір */
      height: auto;
    }

}

/* Адаптация для мобильных устройств */
@media (max-width: 480px) {
  a.btn-product-composition {}
    .copy{font-size: 10px}
    .copy-block.page-footer{
        padding-bottom: 3px;
        font-size: 10px;
        z-index: 24;
    }
}





.modul-page-mainimg{
    height: auto;
    max-height: 100%;
    width: 100%;
}


.scale-up-hor-center {
    -webkit-animation: scale-up-hor-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
            animation: scale-up-hor-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2025-4-11 4:31:16
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-up-hor-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-up-hor-center {
  0% {
    -webkit-transform: scaleX(0.4);
            transform: scaleX(0.4);
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@keyframes scale-up-hor-center {
  0% {
    -webkit-transform: scaleX(0.4);
            transform: scaleX(0.4);
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}

.package-block__bottom{
    height: 30vh;
    background-color: white;
    position: relative;
    z-index: 2;
}


/********************   ****************/

.nutrition-jaffa div {
  display: flex;
  justify-content: space-between;
  font-family: sans-serif;
  font-size: 16px;
}

.label-jaffa {
  position: relative;
  padding-right: 10px;
}

.dots-jaffa {
  flex-grow: 1;
  border-bottom: 1px dotted #000;
  margin: 0 10px;
}

.value-jaffa {
  white-space: nowrap;
}


/******************************************/



/********************     post   ************************/
.post-template-jaffa{
    padding-top: 120px;
    background:#00AF43;
    min-height: 100vh;
}
.jaffa-post-title{
    font-size: clamp(2rem, 1.5rem + 1.5vw, 4rem); /* 40–80px */
    color: #fff;
    background: #F67878;
    padding: 15px;
    margin: 20px 0;
    position: relative;
    border-radius: 20px;
    z-index: 10;
}

.jaffa-post-text-style{
    color: #fff;
}
.jaffa-post-text-style :is(p){
    padding: 0 0 20px;
}

.footer-news{
    background-color: #00AF43;
    color:#fff ;
    height: auto;
    padding-top: 80px;

}



.shadow-inset-top {
    -webkit-animation: shadow-inset-top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: shadow-inset-top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


/* ----------------------------------------------
 * Generated by Animista on 2025-4-26 5:55:34
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shadow-inset-top
 * ----------------------------------------
 */
@-webkit-keyframes shadow-inset-top {
  0% {
    -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-box-shadow: inset 0 6px 14px -6px rgba(0, 0, 0, 0.3);
            box-shadow: inset 0 6px 14px -6px rgba(0, 0, 0, 0.3);
  }
}
@keyframes shadow-inset-top {
  0% {
    -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-box-shadow: inset 0 6px 14px -6px rgba(0, 0, 0, 0.3);
            box-shadow: inset 0 6px 14px -6px rgba(0, 0, 0, 0.3);
  }
}


@media (min-width: 768px) {
  .jaffa-post-title{margin: 30px 0 50px;}
  .jaffa-post-text-style{font-size: 1.2rem;padding: 0 50px;}
  .jaffa-post-linkpermalink{padding: 0 50px;}
}

@media (max-width: 767px) {
    .jaffa-post__yoast_breadcrumb{
        margin: 20px 0 10px ;
    }
    .footer-news{padding-top: 50px}
    .slog-mp__name {
       font-size: 5rem!important;
       line-height: 4rem;
       content-visibility: auto;
    }
    .slog-mp__row2 {
       font-size: 2rem;
        line-height: 2rem;
        content-visibility: auto;
    }
    .slog-mp__row3rotate {
        font-size:2rem;
        line-height: 2rem;
        transform: rotate(-3deg);
        content-visibility: auto;
    }
}


img.jaffa-post_thumbnail__item{
    border-radius: 20px;
}

.jaffa-post{
    overflow: visible!important;
}
.sticky-image-wrapper {
    position: sticky;
    top: 20px; /* Подкорректируй значение, чтобы определить, где будет приклеиваться */
    z-index: 10; /* Убедись, что изображение будет выше других элементов */
    padding-bottom: 25px;
}


/***********************    НОВИНИ    *****************************/

.news-slider-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
}
.swiper-slide {
  background: transparent;
  padding: 30px;
  border-radius: 10px;
 position: relative; /* чтобы фон позиционировался внутри */
}
.background-image-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 70vw;
  height: 80vh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.jaffa-post > .background-image-wrapper {
  width: 90vw;
  height:80vh; 
}

.background-image-img {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  object-fit: cover;
  opacity: 0.05;
}


/* Контент поверх фону */
.swiper-slide .container-fluid {
  position: relative;
  z-index: 2;
}



.image-hover-container {
        transition: background-image 0.3s ease;
    }

.swiper-button-next, .swiper-button-prev {color: #fff;}
.swiper-pagination-bullet-active{background: #fff;}

.news-container {
  position: relative;
  padding-top: 120px;
  background-color: #00AF43;
  overflow: hidden;
  min-height: 100vh;
}

.permalink-news-jaffa{
    font-size: 24px;
    background-color: #00AF43;
    color: #fff;
    border: 1px solid #fff;
    padding: 14px 30px 10px;
    border-radius: 25px;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    z-index: 26;
}
.permalink-news-jaffa:hover{
    color: #fff;opacity: .7;
    text-decoration: none;
}
.jaffa-post-linkpermalink{margin-top: 30px;}



.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal{
    display: none;
}

/***********************    НОВИНИ    *****************************/


a.download-img-jaffa{
    font-size: 24px;
    background-color: #fff;
    color: #1C394E;
    border: 1px solid #1C394E;
    padding: 10px 20px 8px;
    border-radius: 25px;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    z-index: 26;
    transition: all 0.3s ease;
    
}


a.download-img-jaffa:hover{
    background-color: #1C394E;
    color: #fff;
}

img[alt="Product 12"]{
    margin-top: 1px;
}

img[alt="Product 13"]{
    margin-top: 4px;
}

img[alt="Product 15"], img[alt="Product 16"] {
    margin-top: 16px;
}



.breadcrumb_last{display: none;}
.news-container-block{
    background-color: #00AF43;
        min-height: 100vh;
}
.card-body.card-body_news{
    background-color: #00AF43;
    border-radius: 0;
    padding: 0 0 0 20px;  
}

.card-news{
    border-radius: 0;    
    background-color: #00AF43;
    color: #fff;
    border: none;
}

.custom-divider {
}

.pagination :is(a){color: #fff}
.page-numbers.current{opacity: 1;color: #fff}
.page-numbers{
    padding: 10px ;
    opacity: .7;color: #fff
}


.news-others.card.card-news:not(:last-child) {
  margin-bottom: 30px;
}

.sticky-image-wrapper > .card-body_news > .card-title.card-title-jaffa{padding-top: 30px}

@media (max-width: 767px) {
    .card-body.card-body_news{padding: 0}
    .card-title.card-title-jaffa{padding-top: 20px!important}

}

/****************   page-404      ***************//

body.error404{
}
.fof-block-main__fon {
  width: 100%;
  height: 100vh;
  background: radial-gradient(circle, rgba(83, 188, 66, 1) 0%, rgba(23, 103, 62, 1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}



.fof-container {
    color: #fff;
}

.text-attention {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  text-transform: uppercase;
}

.text-attention-1 {
  transform: rotate(-5deg);
  font-size: 2.5rem;
  font-weight: bold;
}

.text-attention-2 {
  font-size: 10rem;
  font-weight: bold;
  line-height: 6rem;
}

.text-attention-3 {
  font-size: 1.5rem;
}

.text-attention-4 {
   font-family: 'yanone-kaffeesatz-700', sans-serif;
  transform: rotate(5deg);
  font-size: 2.5rem;
  margin-top: 1rem;
}



.img-fof {
  margin-top: 2rem;
  max-width: 618px;
  height: auto;
  pointer-events: none;
}

.text-404-wrapper {
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding:65px 110px; /* Регулируйте по необходимости */
    text-align: center;
}

.text-404-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    z-index: 0;
}

@media (max-width: 1600px) {

    .text-attention-1,.text-attention-4 {
      font-size: 1.8rem;
      line-height: 1.3;
    }

    .text-attention-2 {
      font-size: 8rem;
      font-weight: bold;
      line-height: 6rem;
    }

}

.post-template-jaffa :is(figure) {padding: 0 0 20px;border-radius: 20px}
.post-template-jaffa :is(img) {border-radius: 20px}
.post-template-jaffa :is(a) {color: #fff;text-decoration: underline;}
.post-template-jaffa :is(a:hover) {opacity: .8}



.block-text-colorful{}

.block-text-colorful-1{color: #7accee}
.block-text-colorful-2{color: #f7a83d}
.block-text-colorful-3{color: #bbcf1e}
.block-text-colorful-4{color: #ee7779}
.block-text-colorful-5{color: #ffdc20}

@media (min-width: 768px) {
    .block-text-colorful{font-size: 40px!important}
    .block-text-bigger{font-size: 46px}
}

@media (max-width: 767px) {
    .block-text-colorful-1,.block-text-colorful-2,
    .block-text-colorful-3,.block-text-colorful-4,
    .block-text-colorful-5{font-size: 1.5rem!important}
    .block-text-bigger{font-size: 1.7rem}
    .margintop-home-block-1{margin-top: -48px}
}

@media (max-width: 480px) {
    .margintop-home-block-1{margin-top: -57px}
}