/** * Template Name: PhotoFolio - v1.2.0 * Template URL: https://bootstrapmade.com/photofolio-bootstrap-photography-website-template/ * Author: BootstrapMade.com * License: https://bootstrapmade.com/license/ */
/*-------------------------------------------------------------- # Set main reusable colors and fonts using CSS variables # Learn more about CSS variables at https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties --------------------------------------------------------------*/
/* Fonts */
 :root {
     --font-default: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-primary: "Inter", sans-serif;
     --font-secondary: "Cardo", sans-serif;
}
/* Colors */
 :root {
     --color-default: #FFFF;
     --color-primary: #836C6F;
     --color-secondary: #813054;
}
/*-------------------------------------------------------------- # General --------------------------------------------------------------*/
 body {
     font-family: var(--font-default);
     color: var(--color-default);
     background-color: #FFF;
}
 a {
     color: var(--color-primary);
     text-decoration: none;
}
 a:hover {
     color: #32cf93;
     text-decoration: none;
}
 h1, h2, h3, h4, h5, h6 {
     font-family: var(--font-primary);
}
 @media (prefers-reduced-motion: no-preference){
     :root {
         scroll-behavior: auto !important;
    }
}

.display-block {
    display: block;
}

.letter-spacing{
    letter-spacing: 0.2px;
}

.right-side-header-box{
    display: flex;
    align-items: center;
}

.logo-text-box {
    color: #fff;
    display: block;
    margin: 0;
    padding: 5px 10px;
    font-size: 16px;
    line-height: 18px;
    transition: 0.8s;
    background-color: #836C6F;
    margin-left: 10px;
}


.logo-text-box:hover {
    background-color: #fff;
    color: #836C6F;
}

.container-fluid.no-padding{
    padding: 0;
    overflow-x: hidden;
}

.go-back-btn{
margin: 0 5px;
}

.yael-instagram-desktop{
display:block;
margin-right: 5px;
}

.yael-instagram-mobile{
display:none;
}

i.bi.bi-arrow-left-square-fill {
    font-style: normal;
}


.bi-arrow-left-square-fill::before {
    margin-right: 5px;
}

       input::-webkit-input-placeholder {

	color: #836C6F !important;

	}

	input:-moz-placeholder { /* Firefox 18- */

	color: #836C6F !important;  

	} 

	input::-moz-placeholder {  /* Firefox 19+ */

	color: #836C6F !important;  

        }

	input:-ms-input-placeholder {  

	color: #836C6F !important;  

	}


       textarea::-webkit-input-placeholder {

	color: #836C6F !important;

	}

	textarea:-moz-placeholder { /* Firefox 18- */

	color: #836C6F !important;  

	}

	textarea::-moz-placeholder {  /* Firefox 19+ */

	color: #836C6F !important;  

	}

	textarea:-ms-input-placeholder {  

	color: #836C6F !important;  

	}

.submit-btn-box{
    text-align: center;
}

.submit-btn{
    background-color: #836C6F;
    border: none;
    padding: 10px 35px;
    color: #fff;
    border-radius: 0;
    transition: 0.9s;
}

.submit-btn:hover{
    background-color: #fff;
    border: none;
    padding: 10px 35px;
    color: #836C6F;
}


.form-group {
    margin-bottom: 25px;
}

.form-control {
    display: block;
    color: #836C6F;
    width: 100%;
    padding: 11px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    background-color: transparent;
    background-clip: padding-box;
    border: 2px solid #836C6F;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    font-weight: bold;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.spbtn {
  display: inline-block;
  color: #ffffff;
  padding: 8px;
  position: relative;
  letter-spacing: 1px;
}
.spbtn__circle, .spbtn__text, .spbtn__white-circle {
  position: absolute;
}
.spbtn__circle {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  box-shadow: 0 0 0px 2px #fff;
  transition: 0.3s linear;
}

.spbtn__circle.fcircle {
  opacity: 0.5;
}


.spbtn__white-circle {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 56px;
  height: 56px;
  border-radius: 100%;
  background: #ffffff;
  display: flex;
  transition: 0.3s ease-in-out;
  display: flex;
}
.spbtn__white-circle svg {
  width: 24px;
  height: 24px;
  margin: auto;
  color: #fff;
  position: relative;
}
.spbtn__white-circle.back svg {
  transform: rotate(180deg);
}

.spbtn__white-circle.next svg {
  transform: rotate(0deg);
}

.spbtn__white-circle.prev svg {
  transform: rotate(180deg);
}



.spbtn__text.next {
    left: 0px;
}
.spbtn__text.prev {
}



.spbtn__text {
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  z-index: 2;
  padding: 0px;
  transition: 0.3s linear;
  color: #fff;
  left: 100%;
  margin-left: 10px;
}
.spbtn:hover .spbtn__circle {
  transform: scale(0);
}
.spbtn:hover .spbtn__white-circle {
  transform: translate(-50%, -50%) scale(1);
}
.spbtn:hover .spbtn__text {
  transform: translate(15px, -50%);
}

.spbtn:hover .spbtn__text.next {
  transform: translate(-30px, -50%);
}

.spbtn:hover .spbtn__text.prev {
  transform: translate(30px, -50%);
}



.spcontent.fpage  {
    padding: 0px;
}

.spcontent {
    padding-left:25px;
    margin: 25px 0;
}


.spbtn__white-circle svg path {
  fill: #836C6F;
}


 .backdrop,.backdrop2 {
     margin: 0;
     width: 100%;
     height: calc(100vh - 126px);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     background-color: #836C6F;
     justify-content: center;
}

 .backdrop2 {
     background: url(https://pistachios.co.il/yaels-cakes/back-img-3.jpg) center;
     background-repeat: no-repeat;
     background-size: cover;
}


 .backdrop-text {
     text-transform: uppercase;
     font: 900 7vw "Inter";
     line-height: 7vw;
     margin: 0;
     padding: 10px;
}

.yf-text-info{
    font: 900 3.8vw "Inter";
    text-transform: uppercase;
    line-height: 4vw;
}

 .multiply {
     color: white;
     mix-blend-mode: multiply;
     background-color: rgba(59, 2, 6, 1);
}
 .screen {
}
 .screen2 {
    color: #fff;
    mix-blend-mode: multiply;
    background-color: rgba(129, 48, 84, 1);
    padding: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


 .screen2.color2 {
background-color: rgba(218, 131, 107, 1);
}



 .darken {
     color: white;
     mix-blend-mode: darken;
     background-color: rgba(59, 2, 6, 1);
}
 .lighten {
     color: black;
     mix-blend-mode: lighten;
     background-color: rgba(244, 220, 211, 1);
}
 .yf-about svg {
     width: 0;
     height: 0;
     position: absolute;
}
 .yf-video-container {
     margin:0;
}
 .yf-video-container video {
     width: 100%;
     display: block;
     clip-path: url(#clip-00);
}
 .yf-video-container {
     width: 100%;
}

.ab-bot-image{
    background-image: url(https://pistachios.co.il/yaels-cakes/home-page-0.jpg);
    background-size: cover;
    height: 300px;
    background-position: bottom;
}

 .abtext {
     width: 100%;
     margin: 0 auto;
     position: relative;
}
 .abtext video {
     width: 100%;
}
 .abtext svg {
     width: 100%;
     position:absolute;
     top: 0;
     left: 0;
     // needed for FF, Safari, Edge height: 100%;
}
 .abtext svg text {
     font-family: Biko, sans-serif;
     font-weight: 900;
     text-transform: uppercase;
     font-size: 20.1px;
}
 .abtext svg rect {
     fill: #F7F0E6;
}
 .abtext svg > rect {
     -webkit-mask: url(#mask);
     mask: url(#mask);
}
 .about, .contact{
     display: table;
     height: 100%;
     width: 100%;
}
 .contact-image-box, .about-image-box{
     height: calc(100vh - 126px);
}
 .contact-form-box{
}

 .contact-form-box-inner{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #F7F0E6;
    width: 100%;
    height: 100%;
}




 .form-details{
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 45px;
}
 .about-image-box{
     background-image: url(https://pistachios.co.il/yaels-cakes/YF.jpg);
     background-size: cover;
     background-repeat: no-repeat;
}
 .contact-image-box{
     background-image: url(https://pistachios.co.il/yaels-cakes/home-page-0.jpg);
     background-size: cover;
     background-repeat: no-repeat;
}
 .about-text-box {
     width: 100%;
     margin: 0 auto;
     position: relative;
     max-width: 1200px;
}
 .about-text-box video {
     width: 99%;
}
 .about-small-text{
     font-size: 20px;
}
 svg {
     width: 100%;
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
}
 svg text {
     font-family: Biko, sans-serif;
     font-weight: 700;
     text-transform: uppercase;
     font-size: 35px;
}
 svg rect {
     fill: white;
}
 svg > rect {
     -webkit-mask: url(#mask);
     mask: url(#mask);
}
 .sv-swiper-container {
     height: calc(100vh - 141px);
     width: 100%;
}

.swiper-container {
  height: 400px;
  width: 100%;
  padding-bottom: 85px;
}


.swiper-slide {
  width: 100%;
  background-color: white;
  overflow: hidden;
}
.swiper-slide.swiper-slide-active .slide-image, .swiper-slide.swiper-slide-duplicate-active .slide-image {
  transform: scale3d(1, 1, 1);
}
@media (min-width: ) {
  .swiper-slide {
    width: 33.333333%;
  }
  .swiper-slide.swiper-slide-next .slide-image, .swiper-slide.swiper-slide-prev .slide-image, .swiper-slide.swiper-slide-duplicate-next .slide-image, .swiper-slide.swiper-slide-duplicate-prev .slide-image {
    transform: scale3d(1, 1, 1);
  }
}
@media (min-width: ) {
  .swiper-slide {
    width: 25%;
  }
}

.swiper-pagination {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 85px;
}
.swiper-pagination.swiper-pagination {
  bottom: 0;
}

.swiper-pagination-bullet {
  background: tomato;
  width: 22px;
  height: 4px;
  border-radius: 0;
  transition: opacity 1s ease;
}
.swiper-pagination-bullet.swiper-pagination-bullet.swiper-pagination-bullet {
  margin: 0;
}
@media (min-width: ) {
  .swiper-pagination-bullet {
    width: 40px;
  }
}

.slide-image {
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transform: scale3d(1.3, 1.3, 1);
  backface-visibility: hidden;
  will-change: transform;
  transition: transform 1400ms ease;
}

 .slide-content {
     padding: 0 2.2rem;
     display: flex;
     flex-direction: column;
     height: 100%;
     background-color: #836C6F;
    justify-content: space-around;
}

.text-name{
    font-size: 8vw;
}
.text-type-cakes{
    font-size: 10vw;   
}
.text-type-desserts{
    font-size: 6.6vw;
}
.text-type-patisserie{
    font-size: 6.1vw;
}
.text-type-sweets {
    font-size: 8.1vw;
}
.text-type-cociks {
    font-size: 8.8vw;
}


.text-type-cakes,
.text-type-desserts,
.text-type-patisserie,
.text-type-cociks,
.text-type-sweets
{
 font-weight: bold;
}


 .slide-content h4 {
     font-size: 5.35vw;
     font-weight: 400;
     margin: 0;
     padding: 0;
     flex-grow: 0;
}
 .slide-content p {
     display: flex;
     line-height: 1.8;
     margin-top: 0;
     font-size: 14px;
     flex-grow: 1;
}
 .slide-content footer {
     display: flex;
     justify-content: space-between;
     width: 100%;
     font-size: 14px;
     color: #c2c0e0;
}
 .slide-content a {
     color: #FFF;
     font-size: 12px;
     font-weight: 700;
     text-decoration: none;
     border-bottom: 3px solid currentColor;
     padding-bottom: 3px;
}
 .services-box{
     margin:0;
}
 .content-open {
     height: 100vh;
     overflow: hidden;
}
 .homepage-section{
     position: relative;
     overflow: hidden;
}
/* swiper */
 .homepage-section .swiper-container {
     padding: 0;
     height: calc(100vh - 137px);
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease;
}
 .homepage-section .swiper-slide {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: left;
     transition: all 0.3s ease;
     background-position: fixed;
}
 .homepage-section .swiper-item {
     width: 50%;
     height: 100%;
     background-size: cover;
     background-position: center;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease;
     position: absolute;
}
 .homepage-section .swiper-slide .number {
     width: auto;
     height: auto;
     position: absolute;
     right: 10px;
     bottom: -40px;
     font-size: 285px;
     -webkit-text-stroke: 1px white;
     color: transparent;
     font-weight: 600;
     font-family: 'IBM Plex Sans', sans-serif;
     opacity: 0.6;
}
 .homepage-section .swiper-item:after {
     content: '';
     background-color: black;
     position: absolute;
     width: 100%;
     height: inherit;
     bottom: 0;
     z-index: 1;
     opacity: 0.1;
}
 .homepage-section .swiper-item:before {
     content: '';
     position: absolute;
     width: 100%;
     height: 30%;
     top: 0;
     z-index: 1;
     opacity: 0.2;
}
/* swiper arrows */
 .homepage-section .swiper-arrows {
     width: 400px;
     height: 80px;
     position: absolute;
     display: flex;
     justify-content: center;
     align-items: center;
     bottom: 0px;
     right: 50%;
}
 .homepage-section .swiper-button-prev,.homepage-section .swiper-button-next {
     width: 80px;
     height: 80px;
     background-image: none;
     display: flex;
     align-items: center;
     justify-content: center;
     top: 0;
     bottom: 0;
     margin: 0;
     transition: all 0.3s ease;
}
 .homepage-section .swiper-button-prev {
     right: 80px;
     left: auto;
     background-color: rgba(255, 255, 255, 0.7);
}
 .homepage-section .swiper-button-next {
     right: 0px;
     background-color: rgba(255, 255, 255, 0.8);
}
 .homepage-section .swiper-button-prev span,.homepage-section .swiper-button-next span {
     width: 10px;
     height: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: transparent;
     position: absolute;
     border: solid 2px #666;
     border-left: 0;
     border-bottom: 0;
     transition: all 0.1s ease;
}
 .homepage-section .swiper-button-prev span {
     transform: rotate(-135deg);
     left: 49%;
}
 .homepage-section .swiper-button-next span {
     transform: rotate(45deg);
     right: 49%;
}
 .homepage-section .swiper-button-prev:hover span,.homepage-section .swiper-button-next:hover span {
     width: 5px;
     height: 5px;
}
 .homepage-section .swiper-button-prev:after,.homepage-section .swiper-button-next:after {
     width: 0px;
     height: inherit;
     content: '';
     position: absolute;
     background-color: white;
     transition: all 0.4s ease-in-out;
     z-index: -1;
     opacity: 0.8;
}
 .homepage-section .swiper-button-prev:after {
     right: 0;
}
 .homepage-section .swiper-button-next:after {
     left: 0;
}
 .homepage-section .swiper-button-prev:hover:after, .swiper-button-next:hover:after {
     width: inherit;
}
 .homepage-section .swiper-button-disabled {
     opacity: 1 !important;
}
 .homepage-section .swiper-button-disabled.swiper-button-prev span, .swiper-button-disabled.swiper-button-next span {
     opacity: 0.2;
}
/* swiper pagination */
 .homepage-section .swiper-pagination {
     height: 3px;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     height: 100%;
     width: 60px !important;
     right: 14%;
     top: 20px;
     gap: 5px;
     float: right;
     position: absolute;
     left: auto !important;
}
 .homepage-section .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
     margin: 10px 0px;
}
 .homepage-section .swiper-pagination-bullet {
     background-color: white;
     opacity: 1;
     transition: all 0.3s ease-in-out;
     width: 30px;
     height: 5px;
     border-radius: 0px;
     opacity: 0.5;
}
 .homepage-section .swiper-pagination-bullet:hover {
     width: 50px;
}
 .homepage-section .swiper-pagination-bullet-active, .swiper-pagination-bullet-active:hover {
     width: 60px;
     transition: all 0.3s ease-in-out;
     left: 0;
     background-color: white;
     opacity: 1;
}
/* text content */
 .homepage-section .slide-text {
     text-align: left;
     color: white;
     opacity: 1;
     z-index: 2;
     font-family: 'IBM Plex Sans', sans-serif;
     width: 40%;
     max-width: 250px;
     padding: 30px;
     position: absolute;
     right: 5%;
}
 .homepage-section .slide-text.playText {
     animation: transitionText 2s ease;
}
 @keyframes transitionText {
     0% {
         right: -100%;
    }
     100% {
         right: 5%;
    }
}
 .homepage-section .slide-text h1 {
     font-family: 'IBM Plex Sans', sans-serif;
     font-size: 25px;
     letter-spacing: 0.03em;
     margin: 0;
     padding: 0;
     font-weight: 400;
}
 .homepage-section .slide-text p {
     margin: 10px 0 0 0;
     font-size: 16px;
     font-weight: 200;
}
/* text content mobile */
/* button */
 .homepage-section .slide-text .btn {
     font-family: 'IBM Plex Mono', monospace;
     background-color: transparent;
     font-size: 14px;
     letter-spacing: 2px;
     color: white;
     position: relative;
     transition: all 0.3s ease-in-out;
     cursor: pointer;
     margin-top: 20px;
     border: 0;
     padding: 0 15px;
     left: 0;
}
 .homepage-section .slide-text .btn:before {
     content: '';
     background-color: white;
     width: 2px;
     height: 20px;
     position: absolute;
     z-index: 2;
     left: -1px;
     top: -1px;
     border-radius: inherit;
     transition: all 0.3s ease-in-out;
}
 .homepage-section .slide-text .btn:after {
     content: '';
     width: 0px;
     height: 0px;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: transparent;
     position: absolute;
     border: solid 2px transparent;
     border-left: 0;
     border-bottom: 0;
     transform: rotate(45deg);
     top: 4px;
     left: -10px;
     transition: all 0.3s ease-in-out;
}
 .homepage-section .slide-text .btn:hover::before {
     left: 11px;
     transform: rotate(90deg);
}
 .homepage-section .slide-text .btn:hover::after {
     border: solid 2px white;
     border-left: 0;
     border-bottom: 0;
     left: 10px;
     width: 10px;
     height: 10px;
     opacity: 1;
}
 .homepage-section .slide-text .btn:hover {
     padding-left: 35px;
}
 button:focus {
     outline: 0;
}
/*-------------------------------------------------------------- # Sections & Section Header --------------------------------------------------------------*/
 .section-header {
     padding: 1.5rem 1rem;
}
 .section-header h2 {
     font-size: 35px;
     font-weight: 500;
     padding: 0;
     line-height: 1px;
     margin: 0 0 5px 0;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: #836C6F;
     font-family: var(--font-primary);
}
 .section-header h2::after {
     content: "";
     width: 120px;
     height: 26px;
     display: inline-block;
     background: #813054;
     margin: 0px 10px;
}
 .section-header p {
     margin: 0;
     margin: 0;
     font-size: 36px;
     font-weight: 700;
     font-family: var(--font-secondary);
     color: #fff;
}
/*-------------------------------------------------------------- # Page Header --------------------------------------------------------------*/
 .page-header {
     padding: 120px 0 60px 0;
     min-height: 30vh;
     position: relative;
}
 .page-header h2 {
     font-size: 56px;
     font-weight: 500;
     color: #fff;
     font-family: var(--font-secondary);
}
 @media (max-width: 768px) {
     .page-header h2 {
         font-size: 36px;
    }
}
 .page-header p {
     color: rgba(255, 255, 255, 0.8);
}
 .page-header .cta-btn {
     font-family: var(--font-primary);
     font-weight: 400;
     font-size: 14px;
     display: inline-block;
     padding: 12px 40px;
     border-radius: 4px;
     letter-spacing: 1px;
     text-transform: uppercase;
     transition: 0.3s;
     color: #fff;
     background: var(--color-primary);
}
 .page-header .cta-btn:hover {
     background: #2cbc85;
}
/*-------------------------------------------------------------- # Scroll top button --------------------------------------------------------------*/
 .scroll-top {
     position: fixed;
     visibility: hidden;
     opacity: 0;
     right: 15px;
     bottom: -15px;
     z-index: 99999;
     background: var(--color-primary);
     width: 44px;
     height: 44px;
     border-radius: 50px;
     transition: all 0.4s;
}
 .scroll-top i {
     font-size: 24px;
     color: #fff;
     line-height: 0;
}
 .scroll-top:hover {
     background: #813054;
     color: #fff;
}
 .scroll-top.active {
     visibility: visible;
     opacity: 1;
     bottom: 15px;
}
/*-------------------------------------------------------------- # Preloader --------------------------------------------------------------*/
 #preloader {
     display: flex;
     position: fixed;
     inset: 0;
     width: 100%;
     height: 100vh;
     z-index: 99999;
}
 #preloader:before, #preloader:after {
     content: "";
     background-color: var(--color-secondary);
     position: absolute;
     inset: 0;
     width: 50%;
     height: 100%;
     transition: all 0.3s ease 0s;
     z-index: -1;
    justify-content: center;
    flex-direction: column;
    color:#fff;
}


#preloader:before {
    display: flex;
    content: 'Y';
    align-items: end;
    padding-right: 10px;
    font-size: 150px;
}

#preloader:after {
    display: flex;
    content: 'F';
    align-items: start;
    padding-left: 10px;
    font-size: 150px;
}

 #preloader:after {
     left: auto;
     right: 0;
}
 #preloader .line {
     position: relative;
     overflow: hidden;
     margin: auto;
     width: 1px;
     height: 280px;
     transition: all 0.8s ease 0s;
}
 #preloader .line:before {
     content: "";
     position: absolute;
     background-color: #fff;
     left: 0;
     top: 50%;
     width: 1px;
     height: 0%;
     transform: translateY(-50%);
     -webkit-animation: lineincrease 1000ms ease-in-out 0s forwards;
     animation: lineincrease 1000ms ease-in-out 0s forwards;
}
 #preloader .line:after {
     content: "";
     position: absolute;
     background-color: #999;
     left: 0;
     top: 0;
     width: 1px;
     height: 100%;
     transform: translateY(-100%);
     -webkit-animation: linemove 1200ms linear 0s infinite;
     animation: linemove 1200ms linear 0s infinite;
     -webkit-animation-delay: 2000ms;
     animation-delay: 2000ms;
}
 #preloader.loaded .line {
     opacity: 0;
     height: 100% !important;
}
 #preloader.loaded .line:after {
     opacity: 0;
}
 #preloader.loaded:before, #preloader.loaded:after {
     -webkit-animation: preloaderfinish 300ms ease-in-out 500ms forwards;
     animation: preloaderfinish 300ms ease-in-out 500ms forwards;
}
 @-webkit-keyframes lineincrease {
     0% {
         height: 0%;
    }
     100% {
         height: 100%;
    }
}
 @keyframes lineincrease {
     0% {
         height: 0%;
    }
     100% {
         height: 100%;
    }
}
 @-webkit-keyframes linemove {
     0% {
         transform: translateY(200%);
    }
     100% {
         transform: translateY(-100%);
    }
}
 @keyframes linemove {
     0% {
         transform: translateY(200%);
    }
     100% {
         transform: translateY(-100%);
    }
}
 @-webkit-keyframes preloaderfinish {
     0% {
         width: 5 0%;
    }
     100% {
         width: 0%;
    }
}
 @keyframes preloaderfinish {
     0% {
         width: 5 0%;
    }
     100% {
         width: 0%;
    }
}
/*-------------------------------------------------------------- # Header --------------------------------------------------------------*/
 .header {
     position: relative;
     transition: all 0.5s;
     z-index: 997;
     padding: 5px 0;
     background-color: #FFF;
}
 .header .logo {
     transition: 0.3s;
}
 .header .logo img {
     max-height: 40px;
     margin-right: 8px;
}
 .header .logo h1 {
     font-size: 45px;
     margin: 0;
     font-weight: 900;
     color: #836C6F;
     font-family: var(--font-primary);
}
 .header .logo i {
     font-size: 32px;
     margin-right: 8px;
     line-height: 0;
}
 .header .header-social-links {
    display: flex;
    justify-content: center;
    align-items: center;
}
 .header .header-social-links a {
    line-height: 0px;
    transition: 0.8s;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #836C6F;
    color: #fff;
    padding: 15px;
}
 .header .header-social-links a:hover {
    color: #836C6F;
    background-color: #fff;
}
/*-------------------------------------------------------------- # Desktop Navigation --------------------------------------------------------------*/
 @media (min-width: 1280px) {
     .navbar {
         padding: 0;
         margin-right: -280px;
    }
     .navbar ul {
         margin: 0;
         padding: 0;
         display: flex;
         list-style: none;
         align-items: center;
    }
     .navbar li {
         position: relative;
    }
     .navbar a, .navbar a:focus {
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding:0 12px;
         font-family: var(--font-primary);
         text-transform: uppercase;
         letter-spacing: 1px;
         font-size: 13px;
         font-weight: 900;
         color: #836C6F;
         white-space: nowrap;
         transition: 0.3s;
    }
     .navbar a i, .navbar a:focus i {
         font-size: 12px;
         line-height: 0;
         margin-left: 5px;
    }
     .navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover>a {
         color: #813054;
    }
     .navbar .dropdown ul {
         display: block;
         position: absolute;
         left: 14px;
         top: calc(100% + 30px);
         margin: 0;
         padding: 10px 0;
         z-index: 99;
         opacity: 0;
         visibility: hidden;
         background: #813054;
         transition: 0.3s;
         border-radius: 4px;
    }
     .navbar .dropdown ul li {
         min-width: 200px;
    }
     .navbar .dropdown ul a {
         padding: 10px 20px;
         font-size: 15px;
         text-transform: none;
         font-weight: 400;
    }
     .navbar .dropdown ul a i {
         font-size: 12px;
    }
     .navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover>a {
         color: var(--color-default);
    }
     .navbar .dropdown:hover>ul {
         opacity: 1;
         top: 100%;
         visibility: visible;
    }
     .navbar .dropdown .dropdown ul {
         top: 0;
         left: calc(100% - 30px);
         visibility: hidden;
    }
     .navbar .dropdown .dropdown:hover>ul {
         opacity: 1;
         top: 0;
         left: 100%;
         visibility: visible;
    }
}
 @media (min-width: 1280px) and (max-width: 1366px) {
     .navbar .dropdown .dropdown ul {
         left: -90%;
    }
     .navbar .dropdown .dropdown:hover>ul {
         left: -100%;
    }
}
 @media (min-width: 1280px) {
     .mobile-nav-show, .mobile-nav-hide {
         display: none;
    }
}
/*-------------------------------------------------------------- # Mobile Navigation --------------------------------------------------------------*/
 @media (max-width: 1279px) {
     .navbar {
         position: fixed;
         top: 0;
         right: -100%;
         width: 100%;
         bottom: 0;
         transition: 0.3s;
         z-index: 9997;
    }
     .navbar ul {
         position: absolute;
         inset: 0;
         padding: 50px 0 10px 0;
         margin: 0;
         background: #813054;
         overflow-y: auto;
         transition: 0.3s;
         z-index: 9998;
         list-style: none;
    }
     .navbar a, .navbar a:focus {
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 10px 20px;
         font-family: var(--font-primary);
         font-size: 13px;
         text-transform: uppercase;
         font-weight: 400;
         color: rgba(255, 255, 255, 0.5);
         letter-spacing: 1px;
         white-space: nowrap;
         transition: 0.3s;
    }
     .navbar a i, .navbar a:focus i {
         font-size: 12px;
         line-height: 0;
         margin-left: 5px;
    }
     .navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover>a {
         color: #fff;
    }
     .navbar .dropdown ul, .navbar .dropdown .dropdown ul {
         position: static;
         display: none;
         padding: 10px 0;
         margin: 10px 20px;
         transition: all 0.5s ease-in-out;
         border: 1px solid black;
    }
     .navbar .dropdown>.dropdown-active, .navbar .dropdown .dropdown>.dropdown-active {
         display: block;
    }
     .mobile-nav-show {
         color: #813054;
         font-size: 37px;
         cursor: pointer;
         line-height: 0;
         transition: 0.5s;
         z-index: 9999;
         margin: 0 10px 0 10px;
    }
     .mobile-nav-hide {
         color: #fff;
         font-size: 32px;
         cursor: pointer;
         line-height: 0;
         transition: 0.5s;
         position: fixed;
         right: 20px;
         top: 20px;
         z-index: 9999;
    }
     .mobile-nav-active {
         overflow: hidden;
    }
     .mobile-nav-active .navbar {
         right: 0;
    }
     .mobile-nav-active .navbar:before {
         content: "";
         position: fixed;
         inset: 0;
         background: rgba(22, 23, 24, 0.8);
         z-index: 9996;
    }
}
/*-------------------------------------------------------------- # About Section --------------------------------------------------------------*/
 .about .content h2 {
     font-weight: 700;
     font-size: 24px;
     color: var(--color-primary);
}
 .about .content ul {
     list-style: none;
     padding: 0;
}
 .about .content ul li {
     margin-bottom: 20px;
     display: flex;
     align-items: center;
}
 .about .content ul strong {
     margin-right: 10px;
}
 .about .content ul i {
     font-size: 16px;
     margin-right: 5px;
     color: var(--color-primary);
     line-height: 0;
}
/*-------------------------------------------------------------- # Testimonials Section --------------------------------------------------------------*/
 .testimonials {
     margin-top: 55px;
     padding: 0 1.5rem;
}
 .testimonials .testimonial-item {
     box-sizing: content-box;
     padding: 0;
     margin: 25px 20px;
     background: var(--color-secondary);
     min-height: 320px;
     display: flex;
     flex-direction: column;
     text-align: center;
     transition: 0.3s;
}
 .testimonials .testimonial-item .stars {
     margin-bottom: 15px;
}
 .testimonials .testimonial-item .stars i {
     color: #ffc107;
     margin: 0 1px;
}
 .testimonials .testimonial-item .testimonial-img {
     width: 100%;
     margin: 0 auto;
}
 .testimonials .testimonial-item h3 {
     font-size: 18px;
     font-weight: bold;
     margin: 10px 0 5px 0;
     color: #fff;
}
 .testimonials .testimonial-item h4 {
     font-size: 14px;
     color: rgba(255, 255, 255, 0.5);
     margin: 0;
}
 .testimonials .testimonial-item p {
     font-style: italic;
     margin: 0 auto 15px auto;
}
 .testimonials .swiper-pagination {
     margin-top: 35px;
     position: relative;
}
 .testimonials .swiper-pagination .swiper-pagination-bullet {
     width: 12px;
     height: 12px;
     background-color: #836C6F;
     opacity: 1;
}
 .testimonials .swiper-pagination .swiper-pagination-bullet-active {
     background-color: #813054;
}
 .testimonials .swiper-slide {
     opacity: 0.3;
}
/*-------------------------------------------------------------- # Pricing Section --------------------------------------------------------------*/
 .gallery {
     margin:0px;
     overflow: hidden;
}
 .gallery .gallery-item {
     position: relative;
     overflow: hidden;
     transition: all ease-in-out 0.3s;
     background: rgba(247,240,230);

}

 .gallery .gallery-item:hover img {
     opacity: 1;
}


 .gallery .gallery-item img {
     transition: 1s;
     opacity: 0.6;
     height: 100%;
     object-fit: cover;
}
 .gallery .gallery-links {
    position: absolute;
    left:-200px !important;
    inset: 0;
    z-index: 3;
    opacity: 0;
    width: 100px;
    height: 100px;
    background: #836C6F;
    transition: all ease-in-out 0.8s;
}
 .gallery .gallery-links .preview-link, .gallery .gallery-links .details-link {
     font-size: 20px;
     color: rgba(255, 255, 255, 0.5);
     transition: 0.3s;
     line-height: 1.2;
     margin: 30px 8px 0 8px;
}
 .gallery .gallery-links .preview-link:hover, .gallery .gallery-links .details-link:hover {
     color: #fff;
}
 .gallery .gallery-links .details-link {
     font-size: 30px;
     line-height: 0;
}
 .gallery .gallery-item:hover .gallery-links {
     opacity: 1;
     left: 0 !important;
}
 .gallery .gallery-item:hover .preview-link, .gallery .gallery-item:hover .details-link {
     margin-top: 0;
}
 .gallery .gallery-item:hover img {
     transform: scale(1.1);
}

.glightbox-clean .gclose, .glightbox-clean .gnext, .glightbox-clean .gprev {
    background-color: #836C6F;
    border-radius: 4px;
}
.glightbox-mobile .goverlay {
    background: rgba(247,240,230,1);
}

.glightbox-mobile .glightbox-container .gslide-description {
    padding:0;
    background: #836C6F;
}


 .glightbox-clean .gslide-description {
     background: #836C6F;
}
 .glightbox-clean .gslide-title {
     color: rgba(255, 255, 255, 0.8);
     margin: 0;
}

.goverlay {
    background: rgba(247,240,230,.8);
}

.gclose svg, .gnext svg, .gprev svg {
    position: relative;
}


/*-------------------------------------------------------------- # Gallery Single Section --------------------------------------------------------------*/
 .gallery-single .portfolio-details-slider img {
     width: 100%;
}
 .gallery-single .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
     width: 12px;
     height: 12px;
     background-color: rgba(255, 255, 255, 0.7);
     opacity: 1;
}
 .gallery-single .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
     background-color: var(--color-primary);
}
 .gallery-single .swiper-button-prev, .gallery-single .swiper-button-next {
     width: 48px;
     height: 48px;
}
 .gallery-single .swiper-button-prev:after, .gallery-single .swiper-button-next:after {
     color: rgba(255, 255, 255, 0.8);
     background-color: rgba(0, 0, 0, 0.2);
     font-size: 24px;
     border-radius: 50%;
     width: 48px;
     height: 48px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: 0.3s;
}
 .gallery-single .swiper-button-prev:hover:after, .gallery-single .swiper-button-next:hover:after {
     background-color: rgba(0, 0, 0, 0.6);
}
 .gallery-single .portfolio-info h3 {
     font-size: 22px;
     font-weight: 700;
     margin-bottom: 20px;
     padding-bottom: 20px;
     position: relative;
     font-family: var(--font-secondary);
}
 .gallery-single .portfolio-info h3:after {
     content: "";
     position: absolute;
     display: block;
     width: 50px;
     height: 3px;
     background: var(--color-primary);
     left: 0;
     bottom: 0;
}
 .gallery-single .portfolio-info ul {
     list-style: none;
     padding: 0;
     font-size: 15px;
}
 .gallery-single .portfolio-info ul li {
     display: flex;
     flex-direction: column;
     padding-bottom: 15px;
}
 .gallery-single .portfolio-info ul strong {
     text-transform: uppercase;
     font-weight: 400;
     color: #6b7075;
     font-size: 14px;
}
 .gallery-single .portfolio-info .btn-visit {
     padding: 8px 40px;
     background: var(--color-primary);
     color: #fff;
     border-radius: 50px;
     transition: 0.3s;
}
 .gallery-single .portfolio-info .btn-visit:hover {
     background: #2cbc85;
}
 .gallery-single .portfolio-description h2 {
     font-size: 26px;
     font-weight: 700;
     margin-bottom: 20px;
     color: #fff;
     font-family: var(--font-secondary);
}
 .gallery-single .portfolio-description p {
     padding: 0;
}
 .gallery-single .portfolio-description .testimonial-item {
     padding: 30px 30px 0 30px;
     position: relative;
     background: var(--color-secondary);
     height: 100%;
     margin-bottom: 50px;
}
 .gallery-single .portfolio-description .testimonial-item .testimonial-img {
     width: 90px;
     border-radius: 50px;
     border: 6px solid #2e3133;
     float: left;
     margin: 0 10px 0 0;
}
 .gallery-single .portfolio-description .testimonial-item h3 {
     font-size: 18px;
     font-weight: bold;
     margin: 15px 0 5px 0;
     padding-top: 20px;
}
 .gallery-single .portfolio-description .testimonial-item h4 {
     font-size: 14px;
     color: rgba(255, 255, 255, 0.6);
     margin: 0;
}
 .gallery-single .portfolio-description .testimonial-item .quote-icon-left, .gallery-single .portfolio-description .testimonial-item .quote-icon-right {
     color: #5bd9a9;
     font-size: 26px;
     line-height: 0;
}
 .gallery-single .portfolio-description .testimonial-item .quote-icon-left {
     display: inline-block;
     left: -5px;
     position: relative;
}
 .gallery-single .portfolio-description .testimonial-item .quote-icon-right {
     display: inline-block;
     right: -5px;
     position: relative;
     top: 10px;
     transform: scale(-1, -1);
}
 .gallery-single .portfolio-description .testimonial-item p {
     font-style: italic;
     margin: 0 0 15px 0 0 0;
     padding: 0;
}
/*-------------------------------------------------------------- # Services Section --------------------------------------------------------------*/
 .services .service-item {
     padding: 50px 30px;
     transition: all ease-in-out 0.4s;
     background: var(--color-secondary);
     height: 100%;
     overflow: hidden;
     z-index: 1;
}
 .services .service-item:before {
     content: "";
     position: absolute;
     background: #1d1f20;
     top: -200px;
     transition: all 0.3s;
     z-index: -1;
}
 .services .service-item i {
     background: var(--color-primary);
     color: #fff;
     font-size: 24px;
     transition: 0.3s;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 56px;
     height: 56px;
     border-radius: 50%;
}
 .services .service-item h4 {
     font-weight: 600;
     margin: 15px 0 0 0;
     transition: 0.3s;
     font-size: 20px;
}
 .services .service-item h4 a {
     color: #fff;
}
 .services .service-item p {
     line-height: 24px;
     font-size: 14px;
     margin: 15px 0 0 0;
}
 .services .service-item:hover:before {
     background: var(--color-primary);
     right: 0;
     top: 0;
     width: 100%;
     height: 100%;
     border-radius: 0px;
}
 .services .service-item:hover h4 a, .services .service-item:hover p {
     color: #fff;
}
 .services .service-item:hover i {
     background: #fff;
     color: var(--color-primary);
}
/*-------------------------------------------------------------- # Pricing Section --------------------------------------------------------------*/
 .pricing {
     margin-top: 80px;
}
 .pricing .pricing-item {
     border-bottom: 1px dashed #474a4d;
     width: 100%;
     height: 100%;
     padding: 0 0 15px 0;
}
 .pricing .pricing-item h3 {
     margin: 0;
     font-size: 18px;
     font-weight: 500;
     color: rgba(255, 255, 255, 0.6);
}
 .pricing .pricing-item h4 {
     margin: 0;
     font-size: 16px;
}
/*-------------------------------------------------------------- # Contact Section --------------------------------------------------------------*/
 .contact .info-item i {
     font-size: 20px;
     color: var(--color-primary);
     float: left;
     width: 44px;
     height: 44px;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 50px;
     transition: all 0.3s ease-in-out;
     margin-right: 15px;
}
 .contact .info-item h4 {
     padding: 0;
     font-size: 20px;
     font-weight: 600;
     margin-bottom: 5px;
}
 .contact .info-item p {
     padding: 0;
     margin-bottom: 0;
     font-size: 14px;
}
 .contact .info-item h4, .contact .info-item p {
     color: #836C6F;
}
 .contact .info-item:hover i {
     background: var(--color-primary);
     color: #fff;
}
 .contact .php-email-form {
     width: 100%;
}
 .contact .php-email-form .form-group {
     padding-bottom: 8px;
}
 .contact .php-email-form .error-message {
     display: none;
     color: #fff;
     background: #df1529;
     text-align: left;
     padding: 15px;
     font-weight: 600;
}
 .contact .php-email-form .error-message br+br {
     margin-top: 25px;
}
 .contact .php-email-form .sent-message {
     display: none;
     color: #fff;
     background: var(--color-primary);
     text-align: center;
     padding: 15px;
     font-weight: 600;
}
 .contact .php-email-form .loading {
     display: none;
     background: var(--color-secondary);
     text-align: center;
     padding: 15px;
     color: rgba(255, 255, 255, 0.6);
}
 .contact .php-email-form .loading:before {
     content: "";
     display: inline-block;
     border-radius: 50%;
     width: 24px;
     height: 24px;
     margin: 0 10px -6px 0;
     border: 3px solid var(--color-primary);
     border-top-color: var(--color-secondary);
     -webkit-animation: animate-loading 1s linear infinite;
     animation: animate-loading 1s linear infinite;
}
 .contact .php-email-form input, .contact .php-email-form textarea {
    box-shadow: none;
    font-size: 14px;
    font-weight: 900;
    background-color: transparent;
    border: 2px solid #836C6F;
    color: #836C6F;
    border-radius: 0;
}
 .contact .php-email-form input {
     height: 44px;
}
 .contact .php-email-form textarea {
     padding: 10px 12px;
}

.form-control:focus {
    background-color: #fff !important;
    color: #836C6F !important;
    font-weight: 900;
}
 .contact .php-email-form button[type=submit] {
     background: var(--color-primary);
     border: 0;
     padding: 10px 35px;
     color: #fff;
     transition: 0.4s;
     border-radius: 4px;
}
 .contact .php-email-form button[type=submit]:hover {
     background: #fff;
     color: var(--color-primary);
}
 @-webkit-keyframes animate-loading {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 @keyframes animate-loading {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
/*-------------------------------------------------------------- # Hero Section --------------------------------------------------------------*/
 .hero {
     width: 100%;
     min-height: 30vh;
     background: #000;
     background-size: cover;
     position: relative;
     padding: 140px 0 60px 0;
}
 .hero h2 {
     margin: 0 0 10px 0;
     font-size: 38px;
     font-weight: 700;
     color: #fff;
     font-family: var(--font-secondary);
}
 .hero h2 span {
     position: relative;
     z-index: 1;
     padding: 0 5px;
     display: inline-block;
}
 .hero h2 span:before {
     content: "";
     position: absolute;
     height: 50%;
     bottom: 0;
     left: 0;
     right: 0;
     background: var(--color-primary);
     z-index: -1;
}
 .hero p {
     color: rgba(255, 255, 255, 0.6);
     margin-bottom: 30px;
     font-size: 18px;
}
 .hero .btn-get-started {
     font-family: var(--font-primary);
     font-weight: 400;
     font-size: 14px;
     display: inline-block;
     padding: 12px 40px;
     border-radius: 4px;
     letter-spacing: 1px;
     text-transform: uppercase;
     transition: 0.3s;
     color: #fff;
     background: var(--color-primary);
}
 .hero .btn-get-started:hover {
     background: #2cbc85;
}
/*-------------------------------------------------------------- # Footer --------------------------------------------------------------*/
 .footer {
     padding: 10px 0;
     font-size: 14px;
}
 .footer .copyright {
     text-align: center;
     color: var(--color-primary);
}

 .footer .copyright span:hover  {
     color: var(--color-secondary);
}


 .footer .credits {
     text-align: center;
     color: var(--color-primary);
}
 .footer .credits a {
     color: var(--color-primary);
}

 .footer .credits a:hover {
     color: var(--color-secondary);
 }


@media (any-pointer: fine) {
	.cursor {
		display: block;
	}
	.cursor__inner {
		z-index: 9999;
		pointer-events: none;
		position: absolute;
		top: 0;
		left: 0;
		mix-blend-mode: difference;
		border-radius: 50%;
	}
	.cursor__inner--circle {
		width: 25px;
		height: 25px;
		border: 1px solid #fff;
	}
}





 @media (max-width: 1350px) {
     .form-details {
         flex-direction: column;
         align-items: flex-start;
    }

}



 @media (max-width: 1199px) {
     .testimonials .swiper-slide-active {
         opacity: 1;
    }
     .testimonials .swiper-pagination {
         margin-top: 0;
    }
     .testimonials .testimonial-item {
         margin: 40px 20px;
    }
}


 @media (min-width: 992px) {

  .swiper-slide {
    width: 50%;
  }

.col-lg-4 {
    width: 49.333333%;
}

 }



 @media (min-width: 1200px) {
     .testimonials .swiper-slide-next {
         opacity: 1;
         transform: scale(1.12);
    }

.col-lg-4 {
    width: 33.33333333%;
}

}





 @media (max-width: 992px) {

     .contact-form-box {
         padding-bottom: 15px;
    }


.spbtn__white-circle {
    width: 30px;
    height: 30px;
}

.spcontent {
    padding-left: 10px;
}

.spbtn:hover .spbtn__text {
    transform: translate(5px, -50%);
}

.spbtn__white-circle svg {
    width: 18px;
    height: 18px;
}

.col-lg-4 {
    width: 49.333333%;
}


.text-name {
    font-size: 16.8vw;
}

.text-type-patisserie {
    font-size: 11.1vw;
}
.text-type-cakes {
    font-size: 18.2vw;
}
.text-type-desserts {
    font-size: 12vw;
}
.text-type-sweets {
    font-size: 14.8vw;
}

.text-type-cociks {
    font-size: 16.1vw;
}

.slide-content h4 {
    font-size: 9.8vw;
}


     .form-details,.form-fbox {
         flex-direction: column;
         align-items: flex-start;
         margin: 25px 0;
         width: 100%;
         padding: 0 15px;
    }
     .backdrop-text {
    font: 900 14vw "Inter";
    line-height: 15vw;
    height: auto;    
    border-bottom: none;
}

     .yf-text-info{
    font: 900 7vw "Inter";
    line-height: 8vw;   
}

     .about-image-box {
         width: calc(100% - 1.5rem);
         margin: 10px auto auto auto;
    }


}





 @media (max-width: 768px) {

.col-lg-4 {
    width: 100%;
}


.yael-instagram-desktop{
display:none;
}
.yael-instagram-mobile{
display:block;
margin-right: 5px;
}


.spbtn.fspbtn {
  padding: 25px;
}

.side-nav--left {
    left: 15px !important;
}

.side-nav--right {
    right: 15px !important;
}

.spbtn__text.next,
.spbtn__text.prev {
    font-size: 13px;
}

.spbtn__circle.fcircle {
    box-shadow: 0 0 0px 3px #fff;
}

.spbtn__white-circle.next,
.spbtn__white-circle.prev{
    width: 35px;
    height: 35px;
}

.spbtn:hover .spbtn__text.prev {
    transform: translate(20px, -50%);
}
.spbtn:hover .spbtn__text.next {
    transform: translate(-20px, -50%);
}



.text-name {
    font-size: 22.2vw;
}
.text-type-patisserie {
    font-size: 14.6vw;
}
.text-type-desserts {
    font-size: 15.8vw;
}
.slide-content h4 {
    font-size: 13vw;
}
.text-type-cakes {
    font-size: 24vw;
}
.text-type-sweets {
    font-size: 19.8vw;
}
.text-type-cociks {
    font-size: 21.5vw;
}


.swiper-wrapper {
    width: 100%;
}

.slide-content {
    padding: 0 1rem;
}


     .footer {
         position: absolute;
         width: 100%;
    }
     .hero h2 {
         font-size: 32px;
    }

     .section-header h2::after {
         width: 55px;
         height: 20px;
    }
     .homepage-section .slide-text {
         width: 100%;
         max-width: 100%;
         right: 0;
         left: 0;
         height: 35vh;
         bottom: 0;
    }
     .homepage-section .slide-text h1 {
         font-size: 15px;
         letter-spacing: 0.02em;
    }
     .homepage-section .slide-text p {
         font-size: 14px;
    }
     .section-header h2 {
         font-size: 25px;
    }
     .homepage-section .swiper-button-prev, .swiper-button-next {
         width: 60px;
         height: 60px;
         bottom: 0;
    }
     .homepage-section .swiper-arrows {
         height: 60px;
    }
     .homepage-section .swiper-button-prev {
         right: 60px;
    }
     .homepage-section .swiper-button-prev span {
         left: 45%;
    }
     .homepage-section .swiper-button-next span {
         right: 45%;
    }
     .homepage-section .swiper-button-prev, .homepage-section .swiper-button-next {
         width: 60px;
         height: 60px;
    }
     .info-item.d-flex {
         margin: 10px 0;
    }
     .homepage-section .swiper-slide .number {
         display: none;
    }
     .homepage-section .swiper-item {
         width: 100%;
    }
     .homepage-section .swiper-pagination {
         right: 5px;
         width: 65px !important;
    }
     .homepage-section .swiper-pagination-bullet {
         height: 5px;
    }
     .homepage-section .swiper-pagination-bullet, .swiper-pagination-bullet:hover {
         width: 25px;
    }
     .homepage-section .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
         margin: 8px 0px;
    }
     .homepage-section .swiper-pagination-bullet-active, .swiper-pagination-bullet-active:hover {
         width: 35px;
    }
     .homepage-section .swiper-arrows {
         right: 15px;
         bottom: 15px;
    }
}



 @media (max-width: 480px) {

.logo-text-box {
    display: none;
}

 .footer {
     font-size: 12px;
}


.backdrop {
        height: 100%;
        padding: 35px 0;
    }

.contact-image-box, .about-image-box {
        height: 480px;
    }


     .gallery-single .swiper-button-prev, .gallery-single .swiper-button-next {
         display: none;
    }

.header .header-social-links {
    padding-right: 0;
}


.yael-instagram-desktop,
.yael-instagram-mobile{
display:none;
}



     .header .logo h1 {
         font-size: 37px;
    }


.spcontent {
    margin: 15px 0;
}


.screen2 {
    justify-content: center;
}


.spbtn:hover .spbtn__text.next {
    transform: translate(-25px, -50%);
}

.spbtn:hover .spbtn__text.prev {
    transform: translate(17px, -50%);
}

.glightbox-clean .gprev {
    position: absolute;
    top: 15px;
    right: 100px;
    left: auto;
    width: 35px;
    height: 35px;}

.glightbox-clean .gnext {
    position: absolute;
    top: 15px;
    right: 55px;
    width: 35px;
    height: 35px;
}


}


@media (max-width: 380px) {

.yael-instagram-mobile {
    display: none;
}

.header .header-social-links a {
    padding: 10px;
}

.spbtn:hover .spbtn__text.next {
    transform: translate(-20px, -50%);
}

.spbtn:hover .spbtn__text.prev {
    transform: translate(12px, -50%);
}


}