/* ==========================================================================
   Slider Section
   ========================================================================== */
   .main-slider{
       overflow: hidden;
       /*height: 660px;*/
   }
   /*.slider-content-wrap{ height: 660px; }*/
   .main-slider .overlay{
       background-color: rgba(0,0,0,0.3);
       width: 100%;
       height: 100%;
       position: absolute;
       left: 0;
       top: 0;
       z-index: -1;
   }
   .main-slider .element{
       animation-duration: 800ms;
   }
   .main-slider .bg-img{
       display: block;
       background-repeat: no-repeat;
       -webkit-background-size: cover;
       background-size: cover;
       background-position: center center;
       width: 100%;
       height: 100%;
       position: absolute;
       left: 0;
       top: 0;
       overflow: hidden;
       animation-duration: 10000ms;
       z-index: -1;
   }
   .main-slider .text-right{
       text-align: left!important;
   }
   .main-slider .text-right .container{
       display: flex;
       justify-content: flex-end;
   }
   .main-slider .text-right .slider-content{
       width: 50%;
   }
   .main-slider .text-center .slider-content{
       padding: 0;
   }
   .main-slider .slider-caption{
       color: #fff;
       font-family: "Rubik", sans-serif;
   }
   .main-slider .slider-caption .inner-layer{
       display: inline-block;
       overflow: hidden;
   }
   .main-slider .owl-item.active .slider-caption{
       visibility: visible;
   }
   .main-slider .slider-caption.medium{
       white-space: nowrap;
       font-size: 32px;
       font-family: "Shadows Into Light",sans-serif;
       letter-spacing: 0;
       line-height: 26px;
       min-height: 26px;
       font-weight: 500;
       color: #df0000;
       letter-spacing: 1px;
       visibility: inherit;
       transition: none 0s ease 0s;
       text-align: inherit;
       border-width: 0px;
       margin-bottom: 20px;
       padding: 0px;
       min-height: 0px;
       min-width: 0px;
       max-height: none;
       max-width: none;
       opacity: 1;
   }
   .main-slider .slider-caption.big{
       white-space: nowrap;
       font-size: 60px;
       line-height: 80px;
       font-weight: 600;
       color: #ffffff;
       letter-spacing: 0px;
       min-height: 70px;
       display: flex;
   }
   .main-slider .slider-content{
       position: relative;
       padding-left: 40px;
       margin-top: 80px;
       z-index: 1;
   }
   .main-slider .slider-caption.medium-large{
       font-size: 24px;
       line-height: 30px;
       color: #df0000;
   }
   .main-slider .slider-caption.small{
       font-family: "Roboto",sans-serif;
       font-size: 18px;
       font-weight: 400;
       letter-spacing: 0;
       line-height: 28px;
       color: #ffffff;
       margin-top: 15px;
   }
   .main-slider .slider-btn-group{
       margin-top: 25px;
       overflow: hidden;
       display: flex;
       align-items: center;
       column-gap: 20px;
   }
   .main-slider .slider-btn{
       background-color: #df0000;
       display: inline-block;
       color: #fff;
       font-size: 14px;
       line-height: 12;
       font-family: "Rubik", sans-serif;
       letter-spacing: 0;
       font-weight: 500;
       text-transform: capitalize;
       transition: all 0.2s ease-in-out;
       display: inline-block;
       padding: 0 30px;
       line-height: 45px;
   }
   .main-slider .slider-btn i{
       margin-left: 5px;
       line-height: 45px;
   }
   .main-slider .slider-btn:hover{
       background-color: #fff;
       color: #000;
       transition: all 0.2s ease-in-out;
   }

   /*Slider Shape*/
   .slider-shape{
       background-repeat: no-repeat;
       background-size: contain;
       background-position: right bottom;
       position: absolute;
       width: 100%;
       height: 100%;
       right: 0;
       bottom: 0;
   }
   .slider-shape.left{
       background-position: left bottom;
       left: 0;
   }
   /*Food Image*/
   .food-img{
       background-repeat: no-repeat;
       background-size: 45%;
       background-position: right bottom;
       position: absolute;
       width: 100%;
       height: 100%;
       right: 50px;
       bottom: -30px;
   }
   /*Food Design*/
   .food-design{
       background-repeat: no-repeat;
       background-size: 50%;
       background-position: right bottom;
       position: absolute;
       width: 100%;
       height: 100%;
       right: -50px;
       top: 50px;
       z-index: -1;
   }

   /*Center Slide*/
   .single-slide.center{}
   .single-slide.center .slider-content{ margin-top: -30px;}
   .main-slider .single-slide.center .slider-caption.small{margin-top: 0;}
   .main-slider .single-slide.center .slider-caption.big{
       justify-content: center;
   }
   .single-slide.center .food-img{
       background-position: bottom center;
       background-size: 60%;
       bottom: -50%;
       right: -5%;
   }

   .single-slide.center .food-design{
       background-position: center bottom;
       background-size: 65%;
       right: 0;
   }
   /*Right Slide*/
   .single-slide.right{}
   .single-slide.right .food-img{
       background-position: center left;
       background-size: 55%;
       top: 15%;
       right: 0;
   }
   .single-slide.right .food-design{
       background-position: left center;
       background-size: 55%;
       right: -2%;
       top: 2%;
   }

   /*=======================
       Character Animation
   =========================*/
   .main-slider .slick-active .char-top .char{
       -webkit-animation: fade-in-top 0.3s cubic-bezier(0.3, 0, 0.7, 1) both;
       animation: fade-in-top 0.3s cubic-bezier(0.3, 0, 0.7, 1) both;
       -webkit-animation-delay: calc(60ms * var(--char-index));
       animation-delay: calc(60ms * var(--char-index));
   }
   .main-slider .slick-active .char-right .char{
       -webkit-animation: fade-in-right 0.5s cubic-bezier(0.3, 0, 0.7, 1) both;
       animation: fade-in-right 0.5s cubic-bezier(0.3, 0, 0.7, 1) both;
       -webkit-animation-delay: calc(60ms * var(--char-index));
       animation-delay: calc(60ms * var(--char-index));
   }
   .main-slider .slick-active .char-expand .char{
       -webkit-animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.3, 0, 0.7, 1) both;
       animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.3, 0, 0.7, 1) both;
       -webkit-animation-delay: calc(60ms * var(--char-index));
       animation-delay: calc(60ms * var(--char-index));
   }
   .main-slider .slick-active .char-bottom .char{
       -webkit-animation: fade-in-bottom 0.8s cubic-bezier(0.3, 0, 0.7, 1) both;
       animation: fade-in-bottom 0.8s cubic-bezier(0.3, 0, 0.7, 1) both;
       -webkit-animation-delay: calc(60ms * var(--char-index));
       animation-delay: calc(60ms * var(--char-index));
   }


   /*=======================
       Reveal Animation
   =========================*/
   .reveal-text,
   .reveal-text span {
       -webkit-animation-iteration-count: 1;
               animation-iteration-count: 1;
       -webkit-animation-duration: 800ms;
               animation-duration: 800ms;
       -webkit-animation-fill-mode: both;
               animation-fill-mode: both;
       -webkit-animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
               animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
   }

   .reveal-text {
       position: relative;
       -webkit-animation-name: clip-text;
       animation-name: clip-text;

   }

   .reveal-text span {
       content: "";
       position: absolute;
       z-index: 999;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-color: #fff;
       -webkit-transform: scaleX(0);
               transform: scaleX(0);
       -webkit-transform-origin: 0 50%;
               transform-origin: 0 50%;
       pointer-events: none;
       -webkit-animation-name: text-revealer;
               animation-name: text-revealer;
   }




   /* Bullets */
   .main-slider .slick-dots{
       width: 100%;
       height: auto;
       text-align: center;
       position: absolute;
       left: 0;
       bottom: 20px;
       margin: 0;
       list-style: none;
   }
   .main-slider .slick-dots li{
       display: inline-block;
       margin: 0 6px;
   }
   .main-slider .slick-dots li button{
       background-color: rgba(255,255,255,0.7);
       width: 12px;
       height: 12px;
       border-radius: 50%;
       overflow: hidden;
       text-indent: -99999px;
       padding: 0;
       transition: all 0.3s ease-in-out;
       cursor: pointer;
   }
   .main-slider .slick-dots li button:focus,
   .main-slider .slick-dots li button:active{
       outline: none;
   }
   .main-slider .slick-dots li.slick-active button{
       background-color: #df0000;
       transition: all 0.3s ease-in-out;
   }
   /* Vertical Dots */
   .main-slider.vertical-dots .slick-dots{
       width: auto;
       height: auto;
       bottom: 50%;
       left: auto;
       right: 50px;
       transform: translateY(50%);
   }
   .main-slider.vertical-dots .slick-dots li{
       display: block;
       margin: 5px 0;
   }
   /* Slick */
   .main-slider .slick-arrow{
       background-color: #df0000;
       color: #fff;
       font-size: 50px;
       width: 40px;
       height: 70px;
       line-height: 70px;
       border-radius: 0 50px 50px 0;
       position: absolute;
       left: 0;
       top: 50%;
       transform: translateY(-50%);
       text-align: center;
       z-index: 1;
       cursor: pointer;
       visibility: hidden;
       opacity: 0;
       transition: all 0.3s ease-in-out;
   }
   .main-slider:hover.main-slider .slick-arrow{
       visibility: visible;
       opacity: 1;
   }
   .main-slider .slick-arrow.slick-prev i{margin-left: 5px;}
   .main-slider .slick-arrow.slick-next{
       border-radius: 50px 0 0 50px;
       left: auto;
       right: 0;
   }
   .main-slider .slick-arrow.slick-next i{
       margin-left: -20px;
   }
   .main-slider .slick-arrow:hover{
       background-color: #0e1318;
       color: #fff;
       transition: all 0.3s ease-in-out;
   }



   /*Slider Resposnsive CSS
   ==========================*/
   @media only screen and (max-width: 992px) {

       .main-slider .slider-content{margin-top: 123px;}
       .main-slider .slider-caption.medium{
           font-size: 18px;
       }
       .main-slider .single-slide.center .slider-caption.big,
       .main-slider .slider-caption.big{
           font-size: 42px;
           line-height: 50px;
           min-height: 50px;
           letter-spacing: -1px;
       }
       .main-slider .slider-caption.medium-large {
           font-size: 20px;
           line-height: 20px;
       }
       .main-slider .slider-caption.small{
           font-size: 14px;
           line-height: 24px;
       }
       .main-slider .slider-btn-group{
           margin-top: 10px;
           margin-top: 25px;
       }
       .main-slider .slider-btn{
           line-height: 45px;
           padding: 0 35px;
           font-size: 12px;
       }
       .main-slider.owl-carousel div.owl-nav button{
           width: 40px;
           height: 40px;
           line-height: 40px;
           font-size: 10px;
       }
       .food-design{display: none;}
       .food-img{
           background-size: 40% !important;
           bottom: 20px !important;
           right: -15px !important;
       }
   }
   @media only screen and (max-width: 767px){
       .slider-shape,
       .food-img{display: none;}
       .main-slider .slider-content{
           padding-left: 0;
           text-align: center;
       }
       .main-slider .slider-btn-group.justify-content-left{
           justify-content: center!important;
       }
       .main-slider .single-slide.center .slider-caption.big,
       .main-slider .slider-caption.big {
           font-size: 42px;
           line-height: 50px;
           min-height: 50px;
           letter-spacing: -1px;
       }
       .main-slider .text-right .slider-content{width: 100%;}
   }
   @media only screen and (max-width: 520px) {

       .main-slider .single-slide.center .slider-caption.big,
       .main-slider .slider-caption.big{
           font-size: 32px;
           letter-spacing: -0.5px;
       }
      .main-slider .slider-caption.small br{
           display: none;
       }
       .main-slider .slider-content{ padding: 0 40px!important;}
   }