/*
  Template Name: Testo - Pizza and Fast Food Landing Page Template
  Theme URL: https://themeforest.net/user/jthemes
  Description: Testo - Pizza and Fast Food Landing Page Template
  Author: Jthemes
  Author URL: https://themeforest.net/user/jthemes
  Version: 1.0.0
  Website: www.jthemes.net
  Tags: Jthemes, Food, Fast Food, Restaurant, Pizzeria, Restaurant Menu, Pizza, Burger, Sushi, Steak, Grill, Snack
*/




/* ==========================================================================
  01. GENERAL & BASIC STYLES
  =========================================================================== */

html {
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
} 
 
body {
  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #283034;
  font-weight: 300;
}

/*------------------------------------------------------------------*/
/*  IE10 in Windows 8 and Windows Phone 8 Bug fix
/*-----------------------------------------------------------------*/

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

/*------------------------------------------*/
/*  PAGE CONTENT
/*------------------------------------------*/

#page { overflow: hidden; }

/*------------------------------------------*/
/*  SPACING & INDENTS
/*------------------------------------------*/

.wide-100 { padding-top: 100px; padding-bottom: 100px; }
.wide-90 { padding-top: 100px; padding-bottom: 90px; }
.wide-80 { padding-top: 100px; padding-bottom: 80px; }
.wide-70 { padding-top: 100px; padding-bottom: 70px; }
.wide-60 { padding-top: 100px; padding-bottom: 60px; }
.wide-50 { padding-top: 100px; padding-bottom: 50px; }
.wide-40 { padding-top: 100px; padding-bottom: 40px; }
.wide-30 { padding-top: 100px; padding-bottom: 30px; }
.wide-20 { padding-top: 100px; padding-bottom: 20px; }

/*------------------------------------------*/
/*  Margin Top
/*------------------------------------------*/

.mt-100 { margin-top: 100px; }
.mt-95 { margin-top: 95px; }
.mt-90 { margin-top: 90px; }
.mt-85 { margin-top: 85px; }
.mt-80 { margin-top: 80px; }
.mt-75 { margin-top: 75px; }
.mt-70 { margin-top: 70px; }
.mt-65 { margin-top: 65px; }
.mt-60 { margin-top: 60px; }
.mt-55 { margin-top: 55px; }
.mt-50 { margin-top: 50px; }
.mt-45 { margin-top: 45px; }
.mt-40 { margin-top: 40px; }
.mt-35 { margin-top: 35px; }
.mt-30 { margin-top: 30px; }
.mt-25 { margin-top: 25px; }
.mt-20 { margin-top: 20px; }
.mt-15 { margin-top: 15px; }
.mt-10 { margin-top: 10px; }
.mt-5 { margin-top: 5px!important; }
.mt-0 { margin-top: 0; }

/*------------------------------------------*/
/*  Margin Bottom
/*------------------------------------------*/

.mb-100 { margin-bottom: 100px; }
.mb-95 { margin-bottom: 95px; }
.mb-90 { margin-bottom: 90px; }
.mb-85 { margin-bottom: 85px; }
.mb-80 { margin-bottom: 80px; }
.mb-75 { margin-bottom: 75px; }
.mb-70 { margin-bottom: 70px; }
.mb-65 { margin-bottom: 65px; }
.mb-60 { margin-bottom: 60px; }
.mb-55 { margin-bottom: 55px; }
.mb-50 { margin-bottom: 50px; }
.mb-45 { margin-bottom: 45px; }
.mb-40 { margin-bottom: 40px; }
.mb-35 { margin-bottom: 35px; }
.mb-30 { margin-bottom: 30px; }
.mb-25 { margin-bottom: 25px; }
.mb-20 { margin-bottom: 20px; }
.mb-15 { margin-bottom: 15px; }
.mb-10 { margin-bottom: 10px; }
.mb-5 { margin-bottom: 5px!important; }
.mb-0 { margin-bottom: 0; }

/*------------------------------------------*/
/*  Margin Left
/*------------------------------------------*/

.ml-100 { margin-left: 100px; }
.ml-95 { margin-left: 95px; }
.ml-90 { margin-left: 90px; }
.ml-85 { margin-left: 85px; }
.ml-80 { margin-left: 80px; }
.ml-75 { margin-left: 75px; }
.ml-70 { margin-left: 70px; }
.ml-60 { margin-left: 60px; }
.ml-55 { margin-left: 55px; }
.ml-50 { margin-left: 50px; }
.ml-45 { margin-left: 45px; }
.ml-40 { margin-left: 40px; }
.ml-35 { margin-left: 35px; }
.ml-30 { margin-left: 30px; }
.ml-25 { margin-left: 25px; }
.ml-20 { margin-left: 20px; }
.ml-15 { margin-left: 15px; }
.ml-10 { margin-left: 10px; }
.ml-5 { margin-left: 5px!important; }

/*------------------------------------------*/
/*  Margin Right
/*------------------------------------------*/

.mr-100 { margin-right: 100px; }
.mr-95 { margin-right: 95px; }
.mr-90 { margin-right: 90px; }
.mr-85 { margin-right: 85px; }
.mr-80 { margin-right: 80px; }
.mr-75 { margin-right: 75px; }
.mr-70 { margin-right: 70px; }
.mr-65 { margin-right: 65px; }
.mr-60 { margin-right: 60px; }
.mr-55 { margin-right: 55px; }
.mr-50 { margin-right: 50px; }
.mr-45 { margin-right: 45px; }
.mr-40 { margin-right: 40px; }
.mr-35 { margin-right: 35px; }
.mr-30 { margin-right: 30px; }
.mr-25 { margin-right: 25px; }
.mr-20 { margin-right: 20px; }
.mr-15 { margin-right: 15px; }
.mr-10 { margin-right: 10px; }
.mr-5 { margin-right: 5px!important; }

/*------------------------------------------*/
/*  Padding Top
/*------------------------------------------*/

.pt-100 { padding-top: 100px; }
.pt-95 { padding-top: 95px; }
.pt-90 { padding-top: 90px; }
.pt-85 { padding-top: 85px; }
.pt-80 { padding-top: 80px; }
.pt-75 { padding-top: 75px; }
.pt-70 { padding-top: 70px; }
.pt-65 { padding-top: 65px; }
.pt-60 { padding-top: 60px; }
.pt-55 { padding-top: 55px; }
.pt-50 { padding-top: 50px; }
.pt-45 { padding-top: 45px; }
.pt-40 { padding-top: 40px; }
.pt-35 { padding-top: 35px; }
.pt-30 { padding-top: 30px; }
.pt-25 { padding-top: 25px; }
.pt-20 { padding-top: 20px; }
.pt-15 { padding-top: 15px; }
.pt-10 { padding-top: 10px; }
.pt-5 { padding-top: 5px!important; }

/*------------------------------------------*/
/*  Padding Bottom
/*------------------------------------------*/

.pb-100 { padding-bottom: 100px; }
.pb-95 { padding-bottom: 95px; }
.pb-90 { padding-bottom: 90px; }
.pb-85 { padding-bottom: 85px; }
.pb-80 { padding-bottom: 80px; }
.pb-75 { padding-bottom: 75px; }
.pb-70 { padding-bottom: 70px; }
.pb-65 { padding-bottom: 65px; }
.pb-60 { padding-bottom: 60px; }
.pb-55 { padding-bottom: 55px; }
.pb-50 { padding-bottom: 50px; }
.pb-45 { padding-bottom: 45px; }
.pb-40 { padding-bottom: 40px; }
.pb-35 { padding-bottom: 35px; }
.pb-30 { padding-bottom: 30px; }
.pb-25 { padding-bottom: 25px; }
.pb-20 { padding-bottom: 20px; }
.pb-15 { padding-bottom: 15px; }
.pb-10 { padding-bottom: 10px; }
.pb-5 { padding-bottom: 5px!important; }

/*------------------------------------------*/
/*  Padding Left
/*------------------------------------------*/

.pl-100 { padding-left: 100px; }
.pl-95 { padding-left: 95px; }
.pl-90 { padding-left: 90px; }
.pl-85 { padding-left: 85px; }
.pl-80 { padding-left: 80px; }
.pl-75 { padding-left: 75px; }
.pl-70 { padding-left: 70px; }
.pl-65 { padding-left: 65px; }
.pl-60 { padding-left: 60px; }
.pl-55 { padding-left: 55px; }
.pl-50 { padding-left: 50px; }
.pl-45 { padding-left: 45px; }
.pl-40 { padding-left: 40px; }
.pl-35 { padding-left: 35px; }
.pl-30 { padding-left: 30px; }
.pl-25 { padding-left: 25px; }
.pl-20 { padding-left: 20px; }
.pl-15 { padding-left: 15px; }
.pl-10 { padding-left: 10px; }
.pl-5 { padding-left: 5px!important; }

/*------------------------------------------*/
/*  Padding Right
/*------------------------------------------*/

.pr-100 { padding-right: 100px; }
.pr-95 { padding-right: 95px; }
.pr-90 { padding-right: 90px; }
.pr-85 { padding-right: 85px; }
.pr-80 { padding-right: 80px; }
.pr-75 { padding-right: 75px; }
.pr-70 { padding-right: 70px; }
.pr-65 { padding-right: 65px; }
.pr-60 { padding-right: 60px; }
.pr-55 { padding-right: 55px; }
.pr-50 { padding-right: 50px; }
.pr-45 { padding-right: 45px; }
.pr-40 { padding-right: 40px; }
.pr-35 { padding-right: 35px; }
.pr-30 { padding-right: 30px; }
.pr-25 { padding-right: 25px; }
.pr-20 { padding-right: 20px; }
.pr-15 { padding-right: 15px; }
.pr-10 { padding-right: 10px; }
.pr-5 { padding-right: 5px!important; }

/*------------------------------------------*/
/*  BACKGROUND SETTINGS
/*------------------------------------------*/

.bg-fixed,
.bg-scroll {
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;   
  background-size: cover;
}

.bg-scroll {
  background-attachment: fixed!important;
}

.rel { 
  position: relative!important; 
}

/*------------------------------------------*/
/*  Background Colors
/*------------------------------------------*/

.bg-white { background-color: #fff!important; }
.bg-dark { background-color: #1b1b1b!important; }
.bg-lightdark { background-color: #363636!important; }
.bg-tra-dark { background-color: rgba(10, 10, 10, .4); }
.bg-lightgrey { background-color: #f6f9fa; }
.bg-grey { background-color: #eaeaea; }
.bg-brown { background-color: #6f5e4d; }
.bg-coffee { background-color: #642f21; }
.bg-meat { background-color: #d2322b; }
.bg-orange { background-color: #ef7f01; }
.bg-red { background-color: #e3000e; }
.bg-salmon { background-color: #e84e1d; }
.bg-silk { background-color: #fbf7e8; }
.bg-wine { background-color: #831619; }
.bg-yellow { background-color: #f7be27; }

/*------------------------------------------*/
/*  Background Images for Sections
/*------------------------------------------*/

.bg-01,
.bg-02,
.bg-03,
.bg-04,
.bg-05,
.bg-06 {
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;   
  background-size: cover;
  background-attachment: scroll!important;
}

.bg-01 { background-image: url(../images/bg-01.jpg); background-attachment: fixed!important; }
.bg-02 { background-image: url(../images/bg-02.jpg); background-attachment: fixed!important; }
.bg-03 { background-image: url(../images/bg-03.jpg); }
.bg-04 { background-image: url(../images/bg-04.jpg); }
.bg-05 { background-image: url(../images/bg-05.jpg); background-attachment: fixed!important; }
.bg-06 { background-image: url(../images/bg-06.jpg); background-attachment: fixed!important; }

/*------------------------------------------*/
/*. BORDER SETTINGS FOR DEMOS
/*------------------------------------------*/

.b-top { border-top: 1px solid #eee; }
.b-bottom { border-bottom: 1px solid #eee; }
.b-left { border-left: 1px solid #eee; }
.b-right { border-right: 1px solid #eee; }




/* ==========================================================================
  02. TYPOGRAPHY
  =========================================================================== */

/*------------------------------------------*/
/*  HEADERS
/*------------------------------------------*/

h1, h2, h3, h4, h5, h6 {  
  font-family: 'Oswald', sans-serif;
  line-height: 1.3;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0; 
}

/* Header H6 */
h6.h6-xs { font-size: 1.0625rem; }   /* 17px */
h6.h6-sm { font-size: 1.125rem; }    /* 18px */
h6.h6-md { font-size: 1.15625rem; }  /* 18.5px */
h6.h6-lg { font-size: 1.1875rem; }   /* 19px */
h6.h6-xl { font-size: 1.21875rem; }  /* 19.5px */

/* Header H5 */
h5.h5-xs { font-size: 1.25rem; }    /* 20px */
h5.h5-sm { font-size: 1.375rem; }   /* 22px */
h5.h5-md { font-size: 1.5rem; }     /* 24px */
h5.h5-lg { font-size: 1.625rem; }   /* 26px */
h5.h5-xl { font-size: 1.75rem; }    /* 28px */

/* Header H4 */
h4.h4-xs { font-size: 1.875rem; }   /* 30px */
h4.h4-sm { font-size: 2rem; }       /* 32px */
h4.h4-md { font-size: 2.125rem; }   /* 34px */
h4.h4-lg { font-size: 2.25rem; }    /* 36px */
h4.h4-xl { font-size: 2.375rem; }   /* 38px */

h3.h3-xs { font-size: 2.5rem; }     /* 40px */
h3.h3-sm { font-size: 2.625rem; }   /* 42px */
h3.h3-md { font-size: 2.75rem; }    /* 44px */
h3.h3-lg { font-size: 2.875rem; }   /* 46px */
h3.h3-xl { font-size: 3rem; }       /* 48px */

/* Header H2 */
h2.h2-xs { font-size: 3.125rem; }   /* 50px */
h2.h2-sm { font-size: 3.25rem; }    /* 52px */
h2.h2-md { font-size: 3.375rem; }   /* 54px */
h2.h2-lg { font-size: 3.5rem; }     /* 56px */ 
h2.h2-xl { font-size: 3.75rem; }    /* 60px */

/*------------------------------------------*/
/*  PARAGRAPHS
/*------------------------------------------*/

p.p-sm { font-size: 1rem; }        /* 16px */
p { font-size: 1.0625rem; }        /* 17px */
p.p-md { font-size: 1.125rem; }    /* 18px */
p.p-lg { font-size: 1.1875rem; }   /* 19px */
p.p-xl { font-size: 1.25rem; }     /* 20px */

/*------------------------------------------*/
/*  LINK SETTINGS
/*------------------------------------------*/

a {
  color: #333;
  text-decoration: none;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out; 
}

a:hover {
  color: #333;
  text-decoration: none;
}

a:focus {
  outline: none;
  text-decoration: none;
}

/*------------------------------------------*/
/*  LISTS
/*------------------------------------------*/

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

ul.txt-list {
  list-style: disc;
  margin-left: 15px;
} 

/*------------------------------------------*/
/*  TEXT LIST
/*------------------------------------------*/

.txt-list li i {
  position: relative;
  font-size: 1.05rem;
  line-height: 1.5rem;
  float: left;
  margin-right: 10px;
  top: 2px;
}

.txt-list li p {
  overflow: hidden;
  margin-bottom: 10px;
}

/*------------------------------------------*/
/*  BUTTON SETTINGS
/*------------------------------------------*/

.btn {
  background-color: transparent;
  font-family: 'Oswald', sans-serif;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 13px 32px;
  border: 1px solid transparent;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;  
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out; 
}

/*------------------------------------------*/
/*  Button Size
/*------------------------------------------*/

.btn.btn-sm {
  font-size: 15px;
  padding: 13px 26px;
}

.btn.btn-md {
  font-size: 17px;
  padding: 15px 38px;
}

.btn.btn-lg {
  font-size: 20px;
  padding: 15px 42px;
}

/*------------------------------------------*/
/*  Button Color
/*------------------------------------------*/

.btn-white, 
.white-color .btn-white {
  color: #333;
  background-color: #fff;
  border-color: #fff!important;
}

.btn-tra-grey, 
.white-color .btn-tra-grey {
  color: #333;
  background-color: transparent;
  border-color: #ddd!important;
}

.btn-brown, 
.scroll .btn-brown, 
.white-color .btn-brown,
.brown-hover:hover, 
.scroll .brown-hover:hover, 
.white-color .brown-hover:hover {
  color: #fff!important;
  background-color: #6f5e4d;
  border-color: #6f5e4d!important;
}

.btn-red, 
.scroll .btn-red, 
.white-color .btn-red,
.red-hover:hover, 
.scroll .red-hover:hover, 
.white-color .red-hover:hover {
  color: #fff!important;
  background-color: #e3000e;
  border-color: #e3000e!important;
}

.btn-tra-red, 
.scroll .btn-tra-red, 
.white-color .btn-tra-red,
.tra-red-hover:hover, 
.scroll .tra-red-hover:hover, 
.white-color .tra-redhover:hover {
  color: #e3000e!important;
  background-color: transparent;
  border-color: #e3000e!important;
}

.btn-meat, 
.scroll .btn-meat, 
.white-color .btn-meat,
.meat-hover:hover, 
.scroll .meat-hover:hover, 
.white-color .meat-hover:hover {
  color: #fff!important;
  background-color: #d2322b;
  border-color: #d2322b!important;
}

.btn-tra-meat, 
.scroll .btn-tra-meat, 
.white-color .btn-tra-meat,
.tra-meat-hover:hover, 
.scroll .tra-meat-hover:hover, 
.white-color .tra-meathover:hover {
  color: #d2322b!important;
  background-color: transparent;
  border-color: #d2322b!important;
}

.btn-salmon, 
.scroll .btn-salmon, 
.white-color .btn-salmon,
.salmon-hover:hover, 
.scroll .salmon-hover:hover, 
.white-color .salmon-hover:hover {
  color: #fff!important;
  background-color: #e84e1d;
  border-color: #e84e1d!important;
}

.btn-tra-salmon, 
.scroll .btn-tra-salmon, 
.white-color .btn-tra-salmon,
.tra-salmon-hover:hover, 
.scroll .tra-salmon-hover:hover, 
.white-color .tra-salmonhover:hover {
  color: #e84e1d!important;
  background-color: transparent;
  border-color: #e84e1d!important;
}

.btn-yellow, 
.scroll .btn-yellow, 
.white-color .btn-yellow,
.yellow-hover:hover, 
.scroll .yellow-hover:hover, 
.white-color .yellow-hover:hover {
  color: #333435!important;
  background-color: #f7be27;
  border-color: #f7be27!important;
}

/*------------------------------------------*/
/*  Button Hover
/*------------------------------------------*/

.white-hover:hover, 
.white-color .white-hover:hover {
  color: #333!important;
  background-color: #fff;
  border-color: #fff!important;
}

.tra-white-hover:hover, 
.white-color .tra-white-hover:hover {
  color: #fff!important;
  background-color: transparent;
  border-color: #fff!important;
}

.scroll .tra-white-hover:hover {
  color: #333!important;
  background-color: transparent;
  border-color: #333!important;
}

/*------------------------------------------*/
/*  Button Focus
/*------------------------------------------*/

.btn:focus {
  color: #fff; 
  -webkit-box-shadow: none;
  box-shadow: none; 
}

.btn.btn-black:focus {
  color: #fff; 
  -webkit-box-shadow: none;
  box-shadow: none; 
}

.btn-tra-black:focus, 
.btn.btn-tra-grey:focus {
  color: #333; 
  -webkit-box-shadow: none;
  box-shadow: none; 
}

/*------------------------------------------*/
/*  VIDEO POPUP ICON
/*------------------------------------------*/

.video-preview {
  position: relative; 
  text-align: center;
}

.video-block {
  width: 100px;
  height: 100px;
  position: relative;
  display: inline-block;
}

/*------------------------------------------*/
/*  Video Button Icon
/*------------------------------------------*/

.video-btn {
  width: 100px;
  height: 100px;
  position: absolute!important;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px; 
  display: inline-block;
  text-align: center;
  color: #fff;
  line-height: 100px!important;   
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%; 
}

.video-btn i {
  font-size: 3rem;
  line-height: 100px!important;   
  margin-left: 11px;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
}

.video-btn:hover i {
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -webkit-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
}

/*------------------------------------------*/
/*  VECTOR ICONS
/*------------------------------------------*/

.ico-20 [class*="flaticon-"]:before, .ico-20 [class*="flaticon-"]:after { font-size: 1.25rem; }    /* 20px */
.ico-25 [class*="flaticon-"]:before, .ico-25 [class*="flaticon-"]:after { font-size: 1.5625rem; }  /* 25px */
.ico-30 [class*="flaticon-"]:before, .ico-30 [class*="flaticon-"]:after { font-size: 1.875rem; }   /* 30px */
.ico-35 [class*="flaticon-"]:before, .ico-35 [class*="flaticon-"]:after { font-size: 2.1875rem; }  /* 35px */
.ico-40 [class*="flaticon-"]:before, .ico-40 [class*="flaticon-"]:after { font-size: 2.5rem; }     /* 40px */
.ico-45 [class*="flaticon-"]:before, .ico-45 [class*="flaticon-"]:after { font-size: 2.8125rem; }  /* 45px */
.ico-50 [class*="flaticon-"]:before, .ico-50 [class*="flaticon-"]:after { font-size: 3.125rem; }   /* 50px */
.ico-55 [class*="flaticon-"]:before, .ico-55 [class*="flaticon-"]:after { font-size: 3.4375rem; }  /* 55px */
.ico-60 [class*="flaticon-"]:before, .ico-60 [class*="flaticon-"]:after { font-size: 3.75rem; }    /* 60px */
.ico-65 [class*="flaticon-"]:before, .ico-65 [class*="flaticon-"]:after { font-size: 4.0625rem; }  /* 65px */
.ico-70 [class*="flaticon-"]:before, .ico-70 [class*="flaticon-"]:after { font-size: 4.375rem; }   /* 70px */
.ico-75 [class*="flaticon-"]:before, .ico-75 [class*="flaticon-"]:after { font-size: 4.6875rem; }  /* 75px */
.ico-80 [class*="flaticon-"]:before, .ico-80 [class*="flaticon-"]:after { font-size: 5rem; }       /* 80px */
.ico-85 [class*="flaticon-"]:before, .ico-85 [class*="flaticon-"]:after { font-size: 5.3125rem; }  /* 85px */
.ico-90 [class*="flaticon-"]:before, .ico-90 [class*="flaticon-"]:after { font-size: 5.625rem; }   /* 90px */
.ico-95 [class*="flaticon-"]:before, .ico-95 [class*="flaticon-"]:after { font-size: 5.9375rem; }  /* 95px */
.ico-100 [class*="flaticon-"]:before, .ico-100 [class*="flaticon-"]:after { font-size: 6.25rem; }  /* 100px */

/*------------------------------------------*/
/*  SECTION TITLE
/*------------------------------------------*/

.section-title {
  position: relative;
}

.section-title h2.h2-title {
  font-size: 4.5rem;
}

.section-title p {
  color: #888;
  padding: 0 18%;
  margin: 12px 0 0;
}

#contacts-4 .section-title p {
  padding: 0 10% 0 0;
}

/*------------------------------------------*/
/*  FONT SETTINGS
/*------------------------------------------*/

.txt-300 { font-weight: 300; }
.txt-400 { font-weight: 400; }
.txt-500 { font-weight: 500; }
.txt-700 { font-weight: 700; }
.txt-900 { font-weight: 900; }

/*------------------------------------------*/
/*  TEXT SETTINGS FOR DEMOS
/*------------------------------------------*/

.white-color,
.white-color h2, 
.white-color h3, 
.white-color h4, 
.white-color h5, 
.white-color h6, 
.white-color p, 
.white-color a, 
.white-color li,
.white-color i, 
.white-color span { color: #fff; }

.grey-color,
.grey-color h2, 
.grey-color h3, 
.grey-color h4, 
.grey-color h5, 
.grey-color h6, 
.grey-color p, 
.grey-color a,
.grey-color li, 
.grey-color i, 
.white-color .grey-color,
.lightgrey-color .grey-color, 
.grey-color span { color: #757575; }

.lightgrey-color,
.lightgrey-color h2, 
.lightgrey-color h3, 
.lightgrey-color h4, 
.lightgrey-color h5, 
.lightgrey-color h6, 
.lightgrey-color p, 
.lightgrey-color a,
.lightgrey-color li, 
.lightgrey-color i, 
.white-color .lightgrey-color,
.lightgrey-color span { color: #ccc; }

.brown-color,
.brown-color h2, 
.brown-color h3, 
.brown-color h4, 
.brown-color h5, 
.brown-color h6, 
.brown-color p, 
.brown-color a, 
.brown-color li,
.brown-color i, 
.white-color .brown-color,
.brown-color span { color: #6f5e4d; }

.coffee-color,
.coffee-color h2, 
.coffee-color h3, 
.coffee-color h4, 
.coffee-color h5, 
.coffee-color h6, 
.coffee-color p, 
.coffee-color a, 
.coffee-color li,
.coffee-color i, 
.white-color .coffee-color,
.coffee-color span { color: #642f21; }

.green-color,
.green-color h2, 
.green-color h3, 
.green-color h4, 
.green-color h5, 
.green-color h6, 
.green-color p, 
.green-color a, 
.green-color li,
.green-color i, 
.white-color .green-color,
.green-color span { color: #94ad10; }

.meat-color,
.meat-color h2, 
.meat-color h3, 
.meat-color h4, 
.meat-color h5, 
.meat-color h6, 
.meat-color p, 
.meat-color a, 
.meat-color li,
.meat-color i, 
.white-color .meat-color,
.meat-color span { color: #d2322b; }

.orange-color,
.orange-color h2, 
.orange-color h3, 
.orange-color h4, 
.orange-color h5, 
.orange-color h6, 
.orange-color p, 
.orange-color a, 
.orange-color li,
.orange-color i, 
.white-color .orange-color,
.orange-color span { color: #ef7f01; }

.salmon-color,
.salmon-color h2, 
.salmon-color h3, 
.salmon-color h4, 
.salmon-color h5, 
.salmon-color h6, 
.salmon-color p, 
.salmon-color a, 
.salmon-color li,
.salmon-color i, 
.white-color .salmon-color,
.salmon-color span { color: #e84e1d; }

.red-color,
.red-color h2, 
.red-color h3, 
.red-color h4, 
.red-color h5, 
.red-color h6, 
.red-color p, 
.red-color a, 
.red-color li,
.red-color i, 
.white-color .red-color,
.brown-color .red-color,
.red-color span { color: #e3000e; }

.wine-color,
.wine-color h2, 
.wine-color h3, 
.wine-color h4, 
.wine-color h5, 
.wine-color h6, 
.wine-color p, 
.wine-color a, 
.wine-color li,
.wine-color i, 
.white-color .wine-color,
.wine-color span { color: #831619; }

.yellow-color,
.yellow-color h2, 
.yellow-color h3, 
.yellow-color h4, 
.yellow-color h5, 
.yellow-color h6, 
.yellow-color p, 
.yellow-color a, 
.yellow-color li,
.yellow-color i, 
.white-color .yellow-color,
.brown-color .yellow-color,
.coffee-color .yellow-color,
.yellow-color span { color: #f7be27; }

/*------------------------------------------*/
/*  TEXT SHADOW
/*------------------------------------------*/ 

.shadow-txt-white {
  text-shadow: #fff 3px 3px 0, #fff -3px -3px 0, 
               #fff -3px 3px 0, #fff 3px -3px 0;
}

.shadow-txt-black {
  text-shadow: #000 3px 3px 0, #000 -3px -3px 0, 
               #000 -3px 3px 0, #000 3px -3px 0;
}

.shadow-txt-yellow {
   text-shadow: #e1a100 4px 4px 0, #e1a100 -4px -4px 0, 
                #e1a100 -4px 4px 0, #e1a100 4px -4px 0;
}

/*------------------------------------------*/
/*  ITEM RATING
/*------------------------------------------*/ 

.item-rating span {
  position: relative;
  font-size: 0.95rem;
  line-height: 1;
  font-weight: 400;
  margin: 0 4px;
  top: 1px;
}

.stars-rating i {
  color: #f7be27;
  font-size: 0.85rem;
  line-height: 1;
}

.stars-rating.stars-lg i {
  font-size: 0.925rem;
}

.menu-7-img .item-rating,
.pbox-14-img .item-rating {
  position: absolute;
  bottom: 30px;
  right: 15px;
}

.menu-7-img .item-rating span,
.pbox-14-img .item-rating span {
  font-size: 0.9rem;
  top: 0;
}

/*------------------------------------------*/
/*  ITEM CODE
/*------------------------------------------*/

span.item-code {
  display: block;
  font-size: 1.05rem;
  line-height: 1;
  font-weight: 400;
  margin-top: 10px;
  margin-bottom: 0;
}

#promo-6 .item-code,
#promo-7 .item-code,
#promo-8 .item-code,
#menu-5 .item-code,
#menu-6 .item-code {
  position: absolute;
  top: 15px;
  left: 15px;
  padding: 7px 8px;
  color: #fff;
  font-size: 0.915rem;
  font-weight: 500;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

#promo-8 .item-code {
  top: 10px;
}

/*------------------------------------------*/
/*  ITEM LIKE ICON
/*------------------------------------------*/

.like-ico {
  display: block;
  position: absolute;
  width: 28px;
  height: 28px;
  text-align: center;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
}

.pbox-7 .like-ico {
  top: 30px;
  right: 15px;
}

.menu-6-item .like-ico {
  top: 28px;
  right: 15px;
}

.menu-7-img .like-ico,
.pbox-14-img .like-ico {
  top: 14px;
  right: 16px;
}

.like-ico.ico-25 [class*="flaticon-"]:before, 
.like-ico.ico-25 [class*="flaticon-"]:after { font-size: 1.375rem; }

.like-ico span {
  color: #aaa;
  font-weight: 700;
  -webkit-transition: all 350ms ease-in-out;
  -moz-transition: all 350ms ease-in-out;
  -o-transition: all 350ms ease-in-out;
  -ms-transition: all 350ms ease-in-out;
  transition: all 350ms ease-in-out; 
}

/*------------------------------------------*/
/*  Icon Hover
/*------------------------------------------*/

.like-ico:hover > a span {
   color: #e84e1d!important;
}

/*------------------------------------------*/
/*  ZOOM ICON
/*------------------------------------------*/

.menu-img-zoom {
  display: block;
  position: absolute;
  width: 34px;
  height: 34px;
  text-align: center;
  background-color: rgba(20, 20, 20, .45);
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
}

.menu-img-zoom a {
  position: relative;
  line-height: 36px;
  top: 2px;
}

.pbox-7-img .menu-img-zoom,
.menu-6-img .menu-img-zoom {
  bottom: 15px;
  left: 15px;
}

.menu-img-zoom.ico-25 [class*="flaticon-"]:before, 
.menu-img-zoom.ico-25 [class*="flaticon-"]:after { font-size: 1.215rem; }

.menu-img-zoom span {
  color: rgba(255, 255, 255, .95);
  -webkit-transition: all 350ms ease-in-out;
  -moz-transition: all 350ms ease-in-out;
  -o-transition: all 350ms ease-in-out;
  -ms-transition: all 350ms ease-in-out;
  transition: all 350ms ease-in-out; 
}

/*------------------------------------------*/
/*  ADD TO CART
/*------------------------------------------*/

.add-to-cart {
  opacity: 0;
  position: absolute;
  display: inline-block;
  font-size: 0.9rem;
  line-height: 1;
  font-weight: 700;
  padding: 8px 14px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;  
}

.add-to-cart.bg-red a, 
.add-to-cart.bg-meat a, 
.add-to-cart.bg-salmon a { color: #fff; }

.pbox-7-txt .add-to-cart {
  right: 20px;
  bottom: 0px;
}

.menu-6-txt .add-to-cart {
  position: static;
  opacity: 1;
  display: inline-flex;
  align-items: center;
}

.pbox-7:hover .add-to-cart {
  bottom: 8px;
  opacity: 1; 
  -moz-opacity: 1; 
}

.pbox-7:hover #pb-7-2 .add-to-cart {
  bottom: 27px;
}

.menu-6-item:hover .add-to-cart {
  bottom: 28px;
  opacity: 1; 
  -moz-opacity: 1; 
}

/*------------------------------------------*/
/*  Add To Cart Icon
/*------------------------------------------*/

.add-to-cart.ico-10 [class*="flaticon-"]:before, 
.add-to-cart.ico-10 [class*="flaticon-"]:after { font-size: 0.85rem; }

.add-to-cart span {
  position: relative;
  top: -0.5px;
}

/*------------------------------------------*/
/*  Add To Cart Hover
/*------------------------------------------*/

.add-to-cart.bg-yellow:hover {
   background-color: #f5b200!important;
}

.add-to-cart.bg-salmon:hover {
   background-color: #d43a09!important;
}

.add-to-cart.bg-meat:hover {
   background-color: #bf1810!important;
}

.add-to-cart.bg-red:hover {
   background-color: #c6020e!important;
}

/*------------------------------------------*/
/*  PRICE BADGE
/*------------------------------------------*/

.price-badge-sm,
.price-badge-md,
.price-badge-lg {
  background-image: url(../images/price-badge-yellow.png);
  position: absolute;
  top: -20px; 
  right: 5px;
}

.red-badge.price-badge-sm,
.red-badge.price-badge-md,
.red-badge.price-badge-lg {
  background-image: url(../images/price-badge-red.png);
}

.orange-badge.price-badge-sm,
.orange-badge.price-badge-md,
.orange-badge.price-badge-lg {
  background-image: url(../images/price-badge-orange.png);
}


#promo-3.promo-section .price-badge-sm {
  top: -10px; 
  right: -15px;
}

#promo-10.promo-section .price-badge-md {
  top: 120px; 
  left: 50px;
  right: 0;
}

#promo-11.promo-section .price-badge-lg {
  top: 20px; 
}

.price-badge-sm {
  width: 150px;
  height: 146px;
}

.price-badge-md {
  width: 180px;
  height: 176px;
}

.price-badge-lg {
  width: 200px;
  height: 195px;
}

.badge-txt {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.badge-txt h5,
.badge-txt h4 {
  line-height: 1;
  font-weight: 700;
  letter-spacing: -1px;
  margin-bottom: 5px;
}

.badge-txt h3 {
  line-height: 1;
  letter-spacing: -1px;
  margin-bottom: 0;
}

/*------------------------------------------*/
/*  OLD PRICE
/*------------------------------------------*/

.old-price {
  color: #babbbc!important;
  text-decoration: line-through;
  margin-right: 6px;
}

/*------------------------------------------*/
/*  DISCOUNT BADGE
/*------------------------------------------*/

.discount-badge {
  position: absolute;
  left: -50px;
  top: 100px;
}

.discount-badge img {
  width: auto;
  max-width: inherit;
  max-height: 210px;
}




/* ==========================================================================
  03. PRELOAD SPINNER
  =========================================================================== */

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999;
  background-color: #f5f5f5;
}

#loader {
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.cssload-spinner {
  height: 50px;
  width: 50px;
  margin: 0 auto;
  position: relative;
  animation: cssload-invert 1.7s infinite steps(2, end);
  -o-animation: cssload-invert 1.7s infinite steps(2, end);
  -ms-animation: cssload-invert 1.7s infinite steps(2, end);
  -webkit-animation: cssload-invert 1.7s infinite steps(2, end);
  -moz-animation: cssload-invert 1.7s infinite steps(2, end);
}

.cssload-ball {
  height: 100%;
  width: 100%;
  position: absolute;
  border-radius: 50%;
  top: 0;
  left: 0;
  background: #e84e1d;
}

.cssload-ball-1 {
  animation: cssload-ball1 1.15s infinite alternate linear;
    -o-animation: cssload-ball1 1.15s infinite alternate linear;
    -ms-animation: cssload-ball1 1.15s infinite alternate linear;
    -webkit-animation: cssload-ball1 1.15s infinite alternate linear;
    -moz-animation: cssload-ball1 1.15s infinite alternate linear;
}

.cssload-ball-2 {
  animation: cssload-ball2 1.15s infinite alternate linear;
    -o-animation: cssload-ball2 1.15s infinite alternate linear;
    -ms-animation: cssload-ball2 1.15s infinite alternate linear;
    -webkit-animation: cssload-ball2 1.15s infinite alternate linear;
    -moz-animation: cssload-ball2 1.15s infinite alternate linear;
}

.cssload-ball-3 {
  animation: cssload-ball3 1.15s infinite alternate linear;
    -o-animation: cssload-ball3 1.15s infinite alternate linear;
    -ms-animation: cssload-ball3 1.15s infinite alternate linear;
    -webkit-animation: cssload-ball3 1.15s infinite alternate linear;
    -moz-animation: cssload-ball3 1.15s infinite alternate linear;
}

.cssload-ball-4 {
  animation: cssload-ball4 1.15s infinite alternate linear;
    -o-animation: cssload-ball4 1.15s infinite alternate linear;
    -ms-animation: cssload-ball4 1.15s infinite alternate linear;
    -webkit-animation: cssload-ball4 1.15s infinite alternate linear;
    -moz-animation: cssload-ball4 1.15s infinite alternate linear;
}

@keyframes cssload-invert {
  100% {
    transform: rotate(180deg);
  }
}

@-o-keyframes cssload-invert {
  100% {
    -o-transform: rotate(180deg);
  }
}

@-ms-keyframes cssload-invert {
  100% {
    -ms-transform: rotate(180deg);
  }
}

@-webkit-keyframes cssload-invert {
  100% {
    -webkit-transform: rotate(180deg);
  }
}

@-moz-keyframes cssload-invert {
  100% {
    -moz-transform: rotate(180deg);
  }
}

@keyframes cssload-ball1 {
  12% {
    transform: none;
  }
  26% {
    transform: translateX(25%) scale(1, 0.8);
  }
  40% {
    transform: translateX(50%) scale(0.8, 0.8);
  }
  60% {
    transform: translateX(50%) scale(0.8, 0.8);
  }
  74% {
    transform: translate(50%, 25%) scale(0.6, 0.8);
  }
  88% {
    transform: translate(50%, 50%) scale(0.6, 0.6);
  }
  100% {
    transform: translate(50%, 50%) scale(0.6, 0.6);
  }
}

@-o-keyframes cssload-ball1 {
  12% {
    -o-transform: none;
  }
  26% {
    -o-transform: translateX(25%) scale(1, 0.8);
  }
  40% {
    -o-transform: translateX(50%) scale(0.8, 0.8);
  }
  60% {
    -o-transform: translateX(50%) scale(0.8, 0.8);
  }
  74% {
    -o-transform: translate(50%, 25%) scale(0.6, 0.8);
  }
  88% {
    -o-transform: translate(50%, 50%) scale(0.6, 0.6);
  }
  100% {
    -o-transform: translate(50%, 50%) scale(0.6, 0.6);
  }
}

@-ms-keyframes cssload-ball1 {
  12% {
    -ms-transform: none;
  }
  26% {
    -ms-transform: translateX(25%) scale(1, 0.8);
  }
  40% {
    -ms-transform: translateX(50%) scale(0.8, 0.8);
  }
  60% {
    -ms-transform: translateX(50%) scale(0.8, 0.8);
  }
  74% {
    -ms-transform: translate(50%, 25%) scale(0.6, 0.8);
  }
  88% {
    -ms-transform: translate(50%, 50%) scale(0.6, 0.6);
  }
  100% {
    -ms-transform: translate(50%, 50%) scale(0.6, 0.6);
  }
}

@-webkit-keyframes cssload-ball1 {
  12% {
    -webkit-transform: none;
  }
  26% {
    -webkit-transform: translateX(25%) scale(1, 0.8);
  }
  40% {
    -webkit-transform: translateX(50%) scale(0.8, 0.8);
  }
  60% {
    -webkit-transform: translateX(50%) scale(0.8, 0.8);
  }
  74% {
    -webkit-transform: translate(50%, 25%) scale(0.6, 0.8);
  }
  88% {
    -webkit-transform: translate(50%, 50%) scale(0.6, 0.6);
  }
  100% {
    -webkit-transform: translate(50%, 50%) scale(0.6, 0.6);
  }
}

@-moz-keyframes cssload-ball1 {
  12% {
    -moz-transform: none;
  }
  26% {
    -moz-transform: translateX(25%) scale(1, 0.8);
  }
  40% {
    -moz-transform: translateX(50%) scale(0.8, 0.8);
  }
  60% {
    -moz-transform: translateX(50%) scale(0.8, 0.8);
  }
  74% {
    -moz-transform: translate(50%, 25%) scale(0.6, 0.8);
  }
  88% {
    -moz-transform: translate(50%, 50%) scale(0.6, 0.6);
  }
  100% {
    -moz-transform: translate(50%, 50%) scale(0.6, 0.6);
  }
}

@keyframes cssload-ball2 {
  12% {
    transform: none;
  }
  26% {
    transform: translateX(25%) scale(1, 0.8);
  }
  40% {
    transform: translateX(50%) scale(0.8, 0.8);
  }
  60% {
    transform: translateX(50%) scale(0.8, 0.8);
  }
  74% {
    transform: translate(50%, -25%) scale(0.6, 0.8);
  }
  88% {
    transform: translate(50%, -50%) scale(0.6, 0.6);
  }
  100% {
    transform: translate(50%, -50%) scale(0.6, 0.6);
  }
}

@-o-keyframes cssload-ball2 {
  12% {
    -o-transform: none;
  }
  26% {
    -o-transform: translateX(25%) scale(1, 0.8);
  }
  40% {
    -o-transform: translateX(50%) scale(0.8, 0.8);
  }
  60% {
    -o-transform: translateX(50%) scale(0.8, 0.8);
  }
  74% {
    -o-transform: translate(50%, -25%) scale(0.6, 0.8);
  }
  88% {
    -o-transform: translate(50%, -50%) scale(0.6, 0.6);
  }
  100% {
    -o-transform: translate(50%, -50%) scale(0.6, 0.6);
  }
}

@-ms-keyframes cssload-ball2 {
  12% {
    -ms-transform: none;
  }
  26% {
    -ms-transform: translateX(25%) scale(1, 0.8);
  }
  40% {
    -ms-transform: translateX(50%) scale(0.8, 0.8);
  }
  60% {
    -ms-transform: translateX(50%) scale(0.8, 0.8);
  }
  74% {
    -ms-transform: translate(50%, -25%) scale(0.6, 0.8);
  }
  88% {
    -ms-transform: translate(50%, -50%) scale(0.6, 0.6);
  }
  100% {
    -ms-transform: translate(50%, -50%) scale(0.6, 0.6);
  }
}

@-webkit-keyframes cssload-ball2 {
  12% {
    -webkit-transform: none;
  }
  26% {
    -webkit-transform: translateX(25%) scale(1, 0.8);
  }
  40% {
    -webkit-transform: translateX(50%) scale(0.8, 0.8);
  }
  60% {
    -webkit-transform: translateX(50%) scale(0.8, 0.8);
  }
  74% {
    -webkit-transform: translate(50%, -25%) scale(0.6, 0.8);
  }
  88% {
    -webkit-transform: translate(50%, -50%) scale(0.6, 0.6);
  }
  100% {
    -webkit-transform: translate(50%, -50%) scale(0.6, 0.6);
  }
}

@-moz-keyframes cssload-ball2 {
  12% {
    -moz-transform: none;
  }
  26% {
    -moz-transform: translateX(25%) scale(1, 0.8);
  }
  40% {
    -moz-transform: translateX(50%) scale(0.8, 0.8);
  }
  60% {
    -moz-transform: translateX(50%) scale(0.8, 0.8);
  }
  74% {
    -moz-transform: translate(50%, -25%) scale(0.6, 0.8);
  }
  88% {
    -moz-transform: translate(50%, -50%) scale(0.6, 0.6);
  }
  100% {
    -moz-transform: translate(50%, -50%) scale(0.6, 0.6);
  }
}

@keyframes cssload-ball3 {
  12% {
    transform: none;
  }
  26% {
    transform: translateX(-25%) scale(1, 0.8);
  }
  40% {
    transform: translateX(-50%) scale(0.8, 0.8);
  }
  60% {
    transform: translateX(-50%) scale(0.8, 0.8);
  }
  74% {
    transform: translate(-50%, 25%) scale(0.6, 0.8);
  }
  88% {
    transform: translate(-50%, 50%) scale(0.6, 0.6);
  }
  100% {
    transform: translate(-50%, 50%) scale(0.6, 0.6);
  }
}

@-o-keyframes cssload-ball3 {
  12% {
    -o-transform: none;
  }
  26% {
    -o-transform: translateX(-25%) scale(1, 0.8);
  }
  40% {
    -o-transform: translateX(-50%) scale(0.8, 0.8);
  }
  60% {
    -o-transform: translateX(-50%) scale(0.8, 0.8);
  }
  74% {
    -o-transform: translate(-50%, 25%) scale(0.6, 0.8);
  }
  88% {
    -o-transform: translate(-50%, 50%) scale(0.6, 0.6);
  }
  100% {
    -o-transform: translate(-50%, 50%) scale(0.6, 0.6);
  }
}

@-ms-keyframes cssload-ball3 {
  12% {
    -ms-transform: none;
  }
  26% {
    -ms-transform: translateX(-25%) scale(1, 0.8);
  }
  40% {
    -ms-transform: translateX(-50%) scale(0.8, 0.8);
  }
  60% {
    -ms-transform: translateX(-50%) scale(0.8, 0.8);
  }
  74% {
    -ms-transform: translate(-50%, 25%) scale(0.6, 0.8);
  }
  88% {
    -ms-transform: translate(-50%, 50%) scale(0.6, 0.6);
  }
  100% {
    -ms-transform: translate(-50%, 50%) scale(0.6, 0.6);
  }
}

@-webkit-keyframes cssload-ball3 {
  12% {
    -webkit-transform: none;
  }
  26% {
    -webkit-transform: translateX(-25%) scale(1, 0.8);
  }
  40% {
    -webkit-transform: translateX(-50%) scale(0.8, 0.8);
  }
  60% {
    -webkit-transform: translateX(-50%) scale(0.8, 0.8);
  }
  74% {
    -webkit-transform: translate(-50%, 25%) scale(0.6, 0.8);
  }
  88% {
    -webkit-transform: translate(-50%, 50%) scale(0.6, 0.6);
  }
  100% {
    -webkit-transform: translate(-50%, 50%) scale(0.6, 0.6);
  }
}

@-moz-keyframes cssload-ball3 {
  12% {
    -moz-transform: none;
  }
  26% {
    -moz-transform: translateX(-25%) scale(1, 0.8);
  }
  40% {
    -moz-transform: translateX(-50%) scale(0.8, 0.8);
  }
  60% {
    -moz-transform: translateX(-50%) scale(0.8, 0.8);
  }
  74% {
    -moz-transform: translate(-50%, 25%) scale(0.6, 0.8);
  }
  88% {
    -moz-transform: translate(-50%, 50%) scale(0.6, 0.6);
  }
  100% {
    -moz-transform: translate(-50%, 50%) scale(0.6, 0.6);
  }
}

@keyframes cssload-ball4 {
  12% {
    transform: none;
  }
  26% {
    transform: translateX(-25%) scale(1, 0.8);
  }
  40% {
    transform: translateX(-50%) scale(0.8, 0.8);
  }
  60% {
    transform: translateX(-50%) scale(0.8, 0.8);
  }
  74% {
    transform: translate(-50%, -25%) scale(0.6, 0.8);
  }
  88% {
    transform: translate(-50%, -50%) scale(0.6, 0.6);
  }
  100% {
    transform: translate(-50%, -50%) scale(0.6, 0.6);
  }
}

@-o-keyframes cssload-ball4 {
  12% {
    -o-transform: none;
  }
  26% {
    -o-transform: translateX(-25%) scale(1, 0.8);
  }
  40% {
    -o-transform: translateX(-50%) scale(0.8, 0.8);
  }
  60% {
    -o-transform: translateX(-50%) scale(0.8, 0.8);
  }
  74% {
    -o-transform: translate(-50%, -25%) scale(0.6, 0.8);
  }
  88% {
    -o-transform: translate(-50%, -50%) scale(0.6, 0.6);
  }
  100% {
    -o-transform: translate(-50%, -50%) scale(0.6, 0.6);
  }
}

@-ms-keyframes cssload-ball4 {
  12% {
    -ms-transform: none;
  }
  26% {
    -ms-transform: translateX(-25%) scale(1, 0.8);
  }
  40% {
    -ms-transform: translateX(-50%) scale(0.8, 0.8);
  }
  60% {
    -ms-transform: translateX(-50%) scale(0.8, 0.8);
  }
  74% {
    -ms-transform: translate(-50%, -25%) scale(0.6, 0.8);
  }
  88% {
    -ms-transform: translate(-50%, -50%) scale(0.6, 0.6);
  }
  100% {
    -ms-transform: translate(-50%, -50%) scale(0.6, 0.6);
  }
}

@-webkit-keyframes cssload-ball4 {
  12% {
    -webkit-transform: none;
  }
  26% {
    -webkit-transform: translateX(-25%) scale(1, 0.8);
  }
  40% {
    -webkit-transform: translateX(-50%) scale(0.8, 0.8);
  }
  60% {
    -webkit-transform: translateX(-50%) scale(0.8, 0.8);
  }
  74% {
    -webkit-transform: translate(-50%, -25%) scale(0.6, 0.8);
  }
  88% {
    -webkit-transform: translate(-50%, -50%) scale(0.6, 0.6);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(0.6, 0.6);
  }
}

@-moz-keyframes cssload-ball4 {
  12% {
    -moz-transform: none;
  }
  26% {
    -moz-transform: translateX(-25%) scale(1, 0.8);
  }
  40% {
    -moz-transform: translateX(-50%) scale(0.8, 0.8);
  }
  60% {
    -moz-transform: translateX(-50%) scale(0.8, 0.8);
  }
  74% {
    -moz-transform: translate(-50%, -25%) scale(0.6, 0.8);
  }
  88% {
    -moz-transform: translate(-50%, -50%) scale(0.6, 0.6);
  }
  100% {
    -moz-transform: translate(-50%, -50%) scale(0.6, 0.6);
  }
}




/* ==========================================================================
  04. HEADER & NAVIGATION
  =========================================================================== */

#header-1.navik-header {
  padding-top: 40px;
}

#header-3.navik-header {
  padding-top: 20px;
}

/*------------------------------------------*/
/*  MAIN MENU LINK
/*------------------------------------------*/

.navik-menu ul li > a {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 1.095rem;
  font-weight: 500;
  text-transform: uppercase;
  -webkit-transition: all 150ms ease-in-out;
  -moz-transition: all 150ms ease-in-out;
  -o-transition: all 150ms ease-in-out;
  -ms-transition: all 150ms ease-in-out;
  transition: all 150ms ease-in-out; 
}

#header-3 .navik-menu ul li > a {
  font-size: 18px;
  padding-left: 16px;
  padding-right: 16px;
}

.navbar-dark .navik-menu ul li > a {
  color: #212121;
}

.navbar-dark .navik-menu > ul > li.dropdown_menu > a > span::before {
  border-color: #212121;
}

.navik-menu ul li.dropdown_menu > a > span::before {
  top: -6px;
}

/*------------------------------------------*/
/*  Main Menu Link Hover 
/*------------------------------------------*/

.navik-menu.navik-yellow ul li:hover > a,
.navik-menu.navik-yellow .mega-menu-heading a:hover {
  color: #f7be27;
}

.navik-menu.navik-meat ul li:hover > a,
.navik-menu.navik-meat .mega-menu-heading a:hover {
  color: #d2322b;
}

.navik-menu.navik-red ul li:hover > a,
.navik-menu.navik-red .mega-menu-heading a:hover {
  color: #e3000e;
}

.navik-menu.navik-salmon ul li:hover > a,
.navik-menu.navik-salmon .mega-menu-heading a:hover {
  color: #e84e1d;
}

/*------------------------------------------*/
/*  HEADER BUTTON
/*------------------------------------------*/

#header-3 .navik-menu ul li.nav-btn a {
  position: relative;
  top: 1.5px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.5px;
  padding-left: 5px;
  padding-right: 5px;
}

#header-3 .navik-menu ul li.nav-btn.yellow-color > a {
  color: #f7be27;
}

#header-3 .navik-menu ul li.nav-btn.red-color > a {
  color: #e3000e;
}

#header-3 .navik-menu ul li.nav-btn.salmon-color > a {
  color: #e84e1d;
}

/*------------------------------------------*/
/*  SHOPPING BASKET
/*------------------------------------------*/

span.ico-holder {
  position: relative;
}

.basket-ico em.roundpoint {
  width: 20px;
  height: 20px;
  background-color: #e3000e;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  color: #fff;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  font-style: normal;
  position: absolute;
  top: -10px;
  right: -5px;
}

/*------------------------------------------*/
/*  HEADER CALL BUTTON
/*------------------------------------------*/

.callusbtn {
  display: none;
  position: absolute;
  top: 33px;
  left: 14px;
}

.callusbtn a {
  font-size: 22px;
  line-height: 1;
  padding: 0;
  margin: 0;  
}

/*------------------------------------------*/
/*  HEADER SUBMENU
/*------------------------------------------*/

.navik-menu li > ul {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -o-border-radius: 2px;
}

.navik-menu ul ul li > a {
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  font-weight: 500;
  font-style: normal;
  text-transform: inherit;
  padding: 14px 8px;
}

#header-3 .navik-menu ul ul li > a {
  font-size: 15px;
}

/*------------------------------------------*/
/*  NAVBAR STICKY
/*------------------------------------------*/

#header-1.navik-header.sticky,
#header-3.navik-header.sticky {
  padding-top: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1030;
  background: #fff;
  animation: navikHeaderSlideDown .25s ease-out;
}

@keyframes navikHeaderSlideDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

body.t-p-auth #header-1.navik-header.sticky,
body.t-p-auth #header-3.navik-header.sticky {
  padding-top: 0;
  background: #fff;
  box-shadow: 0 2px 14px rgba(74, 44, 32, .08);
}




/* ==========================================================================
  05. HERO
  =========================================================================== */

.hero-section .container {
  position: relative;
  z-index: 3;
}

#hero-2 .bg-inner {
  position: relative;
  background-image: url(../images/hero-2.jpg);
  padding-top: 180px;
}

.white-overlay-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-image: url(../images/white-overlay-wave.png);
  height: 155px;
}

#hero-4 {
  position: relative;
  background-image: url(../images/hero-4.jpg);
  padding-top: 170px;
  padding-bottom: 90px;
}

#hero-5 .bg-inner {
  position: relative;
  background-image: url(../images/hero-5.jpg);
  padding-top: 150px;
  margin-bottom: 60px;
}

#hero-9 .bg-inner {
  position: relative;
  background-image: url(../images/hero-9.jpg);
  padding-top: 210px;
  padding-bottom: 140px;
}

#hero-10 {
  position: relative;
  background-image: url(../images/hero-10.jpg);
  padding-top: 140px;
  padding-bottom: 70px;
}

#hero-11 {
  position: relative;
  background-image: url(../images/hero-11.jpg);
  padding-top: 180px;
  padding-bottom: 80px;
}

#hero-12 {
  position: relative;
  padding-top: 200px;
  padding-bottom: 80px;
}

/*------------------------------------------*/
/*  HERO SLIDER
/*------------------------------------------*/

.slider {
  position: relative;
  max-width: 100%;
  height: 660px;
}

#hero-3 .slider {
  height: 700px;
}

#hero-8 .slider {
  height: 560px;
}

.slider.mt-100 {
  height: 550px;
  margin-top: 95px;
}

.slider .slides {
  margin: 0;
  height: 660px;
}

#hero-3 .slider .slides {
  height: 700px;
}

#hero-8 .slider .slides {
  height: 560px;
}

.slider.mt-100 .slides {
  margin: 0;
  height: 550px;
}

.slider .slides li {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: inherit;
  overflow: hidden;
}

.slider .slides li img {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center;
}

.slider .slides li .caption {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.slider .slides li.active {
  z-index: 2;
}

/*------------------------------------------*/
/*  Slider Animation
/*------------------------------------------*/

.center-align {
  text-align: center;
}

/*------------------------------------------*/
/*  Slider Indicators
/*------------------------------------------*/

.slider .indicators {
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
  bottom: 30px;
  margin: 0; 
  z-index: 98;
}

.slider .indicators .indicator-item {
  display: inline-block;
  position: relative;
  cursor: pointer;
  background-color: transparent;
  height: 10px;
  width: 10px;
  border: 2px solid #fff;
  margin: 0 7px;
  opacity: .5;
  -webkit-transition: background-color .3s;
  transition: background-color .3s;
  border-radius: 50%;
}

.slider .indicators .indicator-item.active {
  background-color: #fff;
  opacity: .65;
}

/*------------------------------------------*/
/*  HERO TEXT
/*------------------------------------------*/

#hero-1 .caption-txt {
  padding: 0 6%;
  margin-top: 70px;
}

#hero-2 .hero-txt {
  padding: 0 5%;
}

#hero-3 .caption-txt {
  padding-left: 10px;
  margin-top: 50px;
}

#hero-6 .caption-txt {
  margin-top: 50px;
}

.hero-11-txt {
  margin-left: -20px;
  padding-right: 20px;
}

/*------------------------------------------*/
/*  Hero Headers
/*------------------------------------------*/ 

#hero-1 h2,
#hero-2 h2,
#hero-3 h2,
.hero-4-txt h2,
#hero-6 h2,
#hero-9 h2 {
  font-family: 'Lilita One', cursive;
  font-size: 7.25rem;
  line-height: 1.1;
  letter-spacing: 3px;
  margin-bottom: 30px;
}

#hero-2 h2 {
  margin-bottom: 40px;
}

#hero-3 h2,
#hero-6 h2 {
  font-size: 6.5rem;
  margin-bottom: 20px;
}

#hero-3 h3,
#hero-6 h3 {
  font-size: 3.5rem;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 0;
  margin-bottom: 0;
}

#hero-3 h3 span,
#hero-6 h3 span {
  font-size: 4.25rem;
  font-weight: 400;
  letter-spacing: -1px;
  position: relative;
  top: 3px;
  left: 5px;
}

.hero-4-txt h2 {
  font-size: 7rem;
  line-height: 1;
  margin-bottom: 15px;
}

.hero-4-txt h3 {
  font-family: 'Lilita One', cursive;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: 3px;
  margin-bottom: 20px;
}

#hero-5 h2 {
  font-family: 'Lilita One', cursive;
  font-size: 17rem;
  line-height: 1;
  letter-spacing: 0;
  position: relative;
  opacity: .25;
  z-index: 8;
  margin-bottom: 0;
}

#hero-9 h2 {
  font-size: 7rem;
  opacity: .95;
  padding: 0 5%;
  margin-bottom: 25px;
}

#hero-10 h2 {
  display: inline-block;
  font-family: 'Lilita One', cursive;
  font-size: 18rem;
  line-height: 1;
  letter-spacing: 3px;
  opacity: .85;
  border-bottom: 10px solid #fff;
  padding-bottom: 25px;
  margin-bottom: 35px;
 } 

#hero-10 h3 {
  font-size: 4.75rem;
  line-height: 1;
  font-weight: 300;
  opacity: .85;
  letter-spacing: 2px;
  margin-bottom: 70px;
}

#hero-11 h2 {
  font-size: 10.5rem;
  line-height: 1;
  letter-spacing: -1px;
  margin-bottom: 20px;
}

#hero-11 h3 {
  font-size: 5.5rem;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

#hero-11 h4 {
  font-size: 3.5rem;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 1px;
  margin-bottom: 25px;
}

#hero-12 h3 {
  font-size: 4.25rem;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 1px;
  margin-bottom: 25px;
}

#hero-12 h2 {
  font-family: 'Lilita One', cursive;
  font-size: 8.5rem;
  line-height: 1;
  letter-spacing: 3px;
  margin-bottom: 30px;
}

/*------------------------------------------*/
/*  Hero Paragraph
/*------------------------------------------*/ 

#hero-1 p {
  font-size: 1.75rem;
  font-weight: 400;
  margin-bottom: 0;
}

#hero-1 p span {
 font-family: 'Oswald', sans-serif;
 font-size: 2.35rem;
 line-height: 1;
 font-weight: 700;
 letter-spacing: -0.5px;
 position: relative;
 top: 3px;
 left: 10px;
}

.hero-4-txt p {
  padding: 0 5%;
  margin-bottom: 20px;
}

.hero-9-txt p {
  font-size: 1.35rem;
  padding: 0 15%;
  margin-bottom: 40px;
}

.hero-11-txt p {
  padding-right: 5%;
  margin-bottom: 30px;
}

.hero-12-txt p {
  padding: 0 15%;
  margin-bottom: 65px;
}

/*------------------------------------------*/
/*  HERO BOX
/*------------------------------------------*/

.hbox-1-wrapper,
.hbox-2-wrapper {
  padding: 0 8%;
}

.hbox-1 h5,
.hbox-2 h5 {
  line-height: 1;
  margin-top: 25px;
  letter-spacing: 0;
  margin-bottom: 0;
}

.hbox-2 h5,
.hbox-2-ico {
  opacity: .8;
}

/*------------------------------------------*/
/*  HERO IMAGE
/*------------------------------------------*/

.hero-2-img {
  position: relative;
  margin-bottom: -50px;
}

.hero-4-img {
  position: relative;
}

.hero-5-img {
  margin-top: -90px;
  margin-bottom: -40px;
  position: relative;
  z-index: 9;
}

.hero-9-img {
  margin-top: -30px;
  margin-bottom: -60px;
  position: relative;
  z-index: 9;
}

.hero-11-img {
  margin-left: -50%;
}

.hero-11-img img {
  position: relative;
  max-width: none;
  display: inline-block;
}




/* ==========================================================================
  06. ABOUT
  ========================================================================== */  

#about-1 {
  background-image: url(../images/about-1.jpg);
}

#about-2 {
  /*background-image: url(../images/bg-05.jpg);*/
  padding-top: 100px;
  padding-bottom: 50px;
}

#about-5,
#about-6 {
  position: relative;
  z-index: 1;
  padding-top: 120px;
  padding-bottom: 80px;
}

#about-7 {
  padding-top: 70px;
  padding-bottom: 30px;
}

/*------------------------------------------*/
/*  ABOUT TEXT
/*------------------------------------------*/

.about-2-txt {
  padding: 0 30px;
}

.about-3-txt {
  padding: 0 25px;
}

.about-4-txt {
  padding: 50px 30px 0;
}

.about-5-txt {
  padding: 0 60px 0 15px;
}

.about-6-txt {
  padding: 0 15px 0 60px;
}

/*------------------------------------------*/
/*  ABOUT TYPOGRAPHY
/*------------------------------------------*/

.about-1-txt h2 {
  font-size: 4.25rem; 
  line-height: 1.2;
  margin-bottom: 25px;
}

.about-2-txt h2 {
  margin-bottom: 20px;
}

.about-3-txt h2,
.about-4-txt h2,
.about-5-txt h2,
.about-6-txt h2 {
  margin-bottom: 25px;
}

.about-1-txt p,
.about-2-txt p {
  padding: 0 5%;
  margin-bottom: 45px;
}

.about-2-txt p {
  margin-bottom: 30px;
}

.about-4-txt p {
  margin-bottom: 40px;
}

.about-4-img p {
  padding-left: 20px;
  padding-right: 30%;
  margin-top: 30px;
  margin-bottom: 0;
}

/*------------------------------------------*/
/*  ABOUT BOX
/*------------------------------------------*/

.abox-1-wrapper {
  padding: 0 5%;
  margin-bottom: 10px;
}

.abox-2-wrapper {
  margin-top: 40px;
}

.abox-3-wrapper {
  margin-top: 50px;
}

/*------------------------------------------*/
/*  ABOUT BOX TYPOGRAPHY
/*------------------------------------------*/

.abox-1 h6,
.abox-2 h6,
.abox-3 h6 {
  line-height: 1;
  margin-top: 20px;
  margin-bottom: 0;
}

.abox-3 h6 {
  line-height: 1.25;
}

.abox-4 h5 {
  line-height: 1;
  letter-spacing: 0.5px;
  margin-top: 30px;
  margin-bottom: 20px;
}

.abox-4 p { 
  margin-bottom: 0;
}

/*------------------------------------------*/
/*  ABOUT IMAGE
/*------------------------------------------*/

.about-5-img { 
  background-image: url(../images/location-1.jpg);
  background-repeat: no-repeat;
  background-position: center center;   
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  left: 50%;
}

.about-6-img { 
  background-image: url(../images/location-3.jpg);
  background-repeat: no-repeat;
  background-position: center center;   
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  left: 0;
}




/* ==========================================================================
  07. DIVIDERS
  ========================================================================== */  

#div-01,
#div-02,
#div-03,
#div-04,
#div-05 {
  width: 100%;
  height: 600px;
}

#div-01 { background-image: url(../images/bg-03.jpg); }
#div-02 { background-image: url(../images/divider-02.jpg); }
#div-03 { background-image: url(../images/divider-03.jpg); }
#div-04 { background-image: url(../images/divider-04.jpg); }
#div-05 { background-image: url(../images/divider-05.jpg); }




/* ==========================================================================
  08. PROMO
  ========================================================================== */  

#pb-1-1 { background-image: url(../images/bg-05.jpg); }
#pb-1-2 { background-image: url(../images/location-1.jpg); }
#pb-1-3 { background-image: url(../images/bg-05e.jpg); }
#pb-2-1 { background-image: url(../images/menu-3-2-img.jpg); }
#pb-2-2 { background-image: url(../images/menu-3-1-img.jpg); }

#promo-1 .row {
  margin-left: -10px;
  margin-right: -10px;
}

#promo-1 .col-lg-3,
#promo-1 .col-lg-6 {
  padding-left: 5px;
  padding-right: 5px;
}

#promo-4 .col-lg-5,
#promo-4 .col-lg-7,
#promo-5 .col-lg-3,
#promo-5 .col-lg-6 {
  padding-left: 8px;
  padding-right: 8px;
}

#promo-10 {
  margin-top: 30px;
}

#promo-11 {
  background-image: url(../images/promo-11.jpg);
  padding-top: 100px;
  padding-bottom: 60px;
}

#promo-12 {
  padding-top: 50px;
}

#promo-12 .bg-inner {
  position: relative;
  z-index: 1;
}

/*------------------------------------------*/
/*  PROMO BOX
/*------------------------------------------*/

.pbox-1 {
  text-align: center;
  padding-top: 100px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

.pbox-1-txt {
  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, .02));
  background-image: linear-gradient(bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, .02));
  padding: 70px 0 50px;
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
}

.pbox-2 {
  text-align: right;
  padding: 80px 35px 50px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

.pbox-5 {
  text-align: center;
  padding: 50px 20px 60px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;  
}

.pbox-5:hover {
  box-shadow: 0px 8px 17px 0px rgba(0, 0, 0, .1);
}

#pb-5-1.pbox-5 {
  padding: 40px 80px 50px;
}

.pbox-6-txt {
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
  min-height: 317px;
}

.pb6-content {
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
}

.pb6-txt {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

#pb-7-1, #pb-7-3 { padding: 25px 12px 10px; }
#pb-7-2 { padding: 10px 12px 30px; }

#pb-8-1, #pb-8-2, #pb-8-3 { padding-right: 5px; }
.pbox-8-txt { padding-left: 3px; }
.pbox-8 .col-lg-6.rel { padding-right: 0; }

.pbox-9-txt {
  text-align: center;
  padding: 0 30px;
}

.pbox-10-txt {
  position: relative;
  margin-right: -140px;
}

.pbox-11-link {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, .5);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 20px;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out; 
}

.pbox-11-link:hover {
  background-color: rgba(255, 255, 255, .2);
}

.pbox-11-link p {
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 500;
  margin-top: 10px;
  margin-bottom: 0;
}

.promo-12-txt {
  padding-left: 10px;
}

.pbox-13-item {
  text-align: center;
  padding: 60px 30px;
  margin-bottom: 40px;
}

#pb-13-2 .pbox-13-item {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

.pbox-14-item {
  margin: 0 10px;
}

#pb-14-1.pbox-14-item {
  padding: 60px 50px 45px;
  margin: 0;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

.pbox-14-txt {
  text-align: center;
  padding: 20px 10px 5px;
}

#pb-14-1 .pbox-14-txt {
  padding: 0;
}

/*------------------------------------------*/
/*  PROMO BOX TYPOGRAPHY
/*------------------------------------------*/

.pbox-1 h3,
.pbox-2 h4 {
  line-height: 1;
  margin-bottom: 10px;
}

.pbox-5 h4.h4-sm {
  line-height: 1.25;
  margin-bottom: 5px;
}

.pbox-6-txt h4 {
  line-height: 1.25;
  margin-bottom: 0;
}

.pbox-7 h4 {
  line-height: 1;
  margin-top: 10px;
  margin-bottom: 12px;
}

.pbox-8 h5 {
  line-height: 1;
  margin-bottom: 8px;
}

.pbox-9 h2 {
  margin-bottom: 30px;
}

.pbox-10-txt h2 {
  font-size: 6rem;
  line-height: 1.2;
  letter-spacing: -1px;
  opacity: .8;
  margin-bottom: 20px;
}

.pbox-10-txt h4 {
  font-size: 1.85rem;
  line-height: 1;
  font-weight: 300;
  margin-bottom: 0;
}

.pbox-10-txt h4 span {
  font-size: 3.25rem;
  font-weight: 700;
  position: relative;
  top: 8px;
  left: 10px;
}

.pbox-11-txt h3 {
  line-height: 1;
  letter-spacing: -1px;
  margin-bottom: 5px;
}

.pbox-11-txt h2 {
  font-size: 5.5rem;
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 20px;
}

.promo-12-txt h2 {
  font-size: 5.5rem;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin-bottom: 25px;
}

.promo-12-txt h3 {
  font-size: 3.25rem;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 0;
  margin-bottom: 0;
}

.promo-12-txt span {
  font-size: 3.75rem;
  font-weight: 400;
  letter-spacing: -1px;
  position: relative;
  top: 3px;
  left: 5px;
}

.pbox-14-txt h6 {
  margin-bottom: 10px;
}

.pbox-1-txt p {
  font-weight: 400;
}

.pbox-6-txt p {
  padding: 0 10%;
  margin-bottom: 20px;
}

.pbox-7-txt p {
  margin-bottom: 0;
}

.pbox-8-txt p {
  font-size: 0.925rem;
  margin-bottom: 30px;
}

.pbox-9-txt p {
  font-weight: 400;
  margin-bottom: 0;
}

.pbox-10-txt p {
  padding-right: 10%;
}

.pbox-11-txt p {
  font-weight: 400;
  margin-bottom: 25px;
}

.pbox-2 .btn {
  margin-top: 15px;
}

.pbox-13-txt p {
  margin-bottom: 0;
}

.pbox-14-txt p {
  font-size: 1rem;
  margin-bottom: 15px;
}

#pb-14-1 .pbox-14-txt p {
  font-size: 1rem;
  padding: 0 8%;
  margin-bottom: 0;
}

.pbox-14-txt .btn.btn-sm {
  padding: 12px 44px;
}

/*------------------------------------------*/
/*  PROMO BOX PRICE
/*------------------------------------------*/

.pbox-5-price {
  margin-top: 35px;
}

.pbox-6-price {
  margin-top: 6px;
}

.pbox-7-price {
  margin-top: 15px;
}

.pbox-9-price {
  margin-top: 20px;
}

.pbox-6-price h5 {
  line-height: 1;
  margin-bottom: 20px;
}

.pbox-7-price h5 {
  line-height: 1;
  letter-spacing: -0.5px;
  margin-bottom: 0;
}

.pbox-5-price p,
.pbox-9-price p {
  font-size: 1.15rem;
  letter-spacing: -0.5px;
  margin-bottom: 5px;
}

.pbox-9-price p {
  font-size: 1.45rem;
  font-weight: 300;
}

.pbox-5-price p span,
.pbox-9-price p span {
 font-family: 'Oswald', sans-serif;
 font-size: 1.75rem;
 line-height: 1;
 font-weight: 500;
 letter-spacing: -0.5px;
 position: relative;
 top: 3px;
 left: 10px;
}

.pbox-9-price p span {
 font-size: 2.25rem;
 top: 3px;
 left: 10px;
}

.pbox-14-price {
  display: inline-block;
  padding: 7px 12px 10px;
  margin-top: 20px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.pbox-14-price h5 {
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-top: 0;
  margin-bottom: 1px;
}

/*------------------------------------------*/
/*  PROMO CAROUSEL NAVIGATION
/*------------------------------------------*/

.owl-theme .owl-dots, 
.owl-theme .owl-nav {
  text-align: center;
  margin-top: 35px;
}

.owl-carousel.owl-theme .owl-nav [class*='owl-'] { 
  background: transparent;
  margin: 0 10px;
  padding: 0;
}

.owl-theme .owl-nav img { 
  width: 35px;
  height: 18px;
}

.owl-theme .owl-nav button {
  background-color: transparent;
  border: none;
  padding: 0 5px;
}

.owl-theme .owl-nav button:focus {
  outline: 0px none;
  box-shadow: none;
}

/*------------------------------------------*/
/*  PROMO IMAGES
/*------------------------------------------*/

.pbox-3,
.pbox-4,
.pbox-7-img,
.pbox-3 img,
.pbox-4 img,
.pbox-7-img img {   
  overflow: hidden;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

.pbox-6-img,
.pbox-6-img img {   
  overflow: hidden;
}

.pbox-8-img,
.pbox-8-img img { 
  overflow: hidden;  
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

.pbox-10-img {
  position: relative;
  text-align: center;
  margin: -60px -60px -60px 60px;
}

.pbox-10-img img {
  max-width: none;
  display: inline-block;
}

.pbox-11-img {
  position: relative;
  text-align: center;
}

.promo-12-img {
  margin-top: -50px;
  position: relative;
}

.promo-12-img img.img-fluid {
  max-width: none;
  display: inline-block;
}

.pbox-13-img {   
  padding: 0 10px;
}

.pbox-14-img {   
  border: 1px solid #e5e5e5;
  padding: 25px 20px 20px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

#pb-14-1 .pbox-14-img {   
  border: none;
  padding: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

/*------------------------------------------*/
/*  PROMO IMAGES HOVER
/*------------------------------------------*/

.pbox-3:hover img,
.pbox-4:hover img {
  transform: scale(1.06);
  -ms-transform: scale(1.06);
  -webkit-transform: scale(1.06);
  -o-transform: scale(1.06);
  -moz-transform: scale(1.06);
}

.pbox-6:hover img,
.pbox-7:hover img, 
.pbox-8:hover img {
  transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  -moz-transform: scale(1.1);
}




/* ==========================================================================
  09. MENU
  ========================================================================== */  

#menu-2 {
  background-image: url(../images/banner-2.jpg);
}

#menu-6 .col-lg-3 {
  padding-left: 8px;
  padding-right: 8px;
}

/*------------------------------------------*/
/*  MENU TEXT
/*------------------------------------------*/ 

.menu-1-txt {
  padding: 0 10px;
}

.menu-2-txt {
  padding-left: 10px;
}

.menu-3-wrapper {
  padding: 0 3%;
}

.menu-3-txt {
  padding: 0 15px;
}

.menu-5-txt {
  padding: 25px;
}

.menu-6-txt {
  overflow: hidden;
  padding: 25px 20px;
}

.menu-7-txt {
  text-align: center;
  padding-top: 25px;
}

/*------------------------------------------*/
/*  Menu Item
/*------------------------------------------*/ 

.menu-1-list li,
.menu-2-list li,
.menu-4-list li {
  margin-bottom: 40px;
}

.menu-3-list li {
  margin-bottom: 30px;
}

.menu-4-list.common-dishes li {
  margin-bottom: 35px;
}

.menu-1-list li:last-child,
.menu-2-list li:last-child,
.menu-3-list li:last-child,
.menu-4-list li:last-child {
  margin-bottom: 0;
}

.menu-5-item,
.menu-6-item {
  border: 1px solid #e5e5e5;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  margin-bottom: 30px;
}

.menu-7-item {
  margin-bottom: 50px;
}

.bg-01 .menu-5-item,
.bg-01 .menu-6-item,
.bg-02 .menu-5-item,
.bg-02 .menu-6-item,  
.bg-04 .menu-5-item,
.bg-04 .menu-6-item {
  border: 1px solid #171717;
}

.menu-3-item-data {
  position: absolute;
  padding: 5px 10px;
  top: 35px;
  right: 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out; 
}

.menu-3-item-data h6 {
  font-size: 0.95rem;
  line-height: 1;
  margin-bottom: 0;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out; 
}

.menu-3-list li:hover .menu-3-item-data {
  background-color: #f7be27;
}

.item-data-meat-hover .menu-3-list li:hover .menu-3-item-data {
  background-color: #d2322b;
}

.item-data-red-hover .menu-3-list li:hover .menu-3-item-data {
  background-color: #e3000e;
}

.item-data-salmon-hover .menu-3-list li:hover .menu-3-item-data {
  background-color: #e84e1d;
}

.menu-3-list li:hover .menu-3-item-data h6 {
  color: #151515;
}

.item-data-red-hover .menu-3-list li:hover .menu-3-item-data h6,
.item-data-meat-hover .menu-3-list li:hover .menu-3-item-data h6,
.item-data-salmon-hover .menu-3-list li:hover .menu-3-item-data h6 {
  color: #fff;
}

/*------------------------------------------*/
/*  Menu Item Title & Price
/*------------------------------------------*/ 

.menu-title-wrapper {
  margin: 0 0 3px;
  display: table;
}

.menu-item-title {
  position: relative;
  display: table-cell;
  width: 1%;
  white-space: nowrap;
  padding: 0 10px 0 0;
}

.menu-item-dots {
  position: relative;
  display: table-cell;
  height: 3px;
  width: 98%;
  z-index: 1;
  background-image: radial-gradient(circle closest-side,#878889 99%,transparent 100%);
  background-position: 50% 100%;
  background-size: 5px 2px;
  background-repeat: repeat-x;
}

.menu-item-price {
  display: table-cell;
  width: 1%;
  padding: 0 0 0 10px;
  white-space: nowrap;
}

.menu-item-title h6,
.menu-item-title h5,
.menu-item-price h6,
.menu-item-price h5 {
  line-height: 1;
  letter-spacing: 0;
  margin-bottom: 0;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;  
}

.menu-3-title {
  text-align: center;
  margin-bottom: 60px;
}

/*------------------------------------------*/
/*  Menu Item Description
/*------------------------------------------*/ 

.menu-item-desc {
  margin-top: 12px;
}

.menu-item-desc p {
  font-size: 0.975rem;
  font-weight: 400;
  margin-bottom: 3px;
}

#menu-3 .menu-item-desc p {
  font-size: 1.05rem;
  font-weight: 300;
  padding-right: 15%;
  margin-bottom: 3px;
}

.menu-item-desc span {
  font-size: 0.915rem;
  margin-bottom: 0;
  padding-right: 3px;
}

.common-dishes .menu-item-desc span {
  padding-right: 0;
}

.menu-item-desc span:after { 
  content: "/"; 
  padding-left: 7px; 
  position: relative;
}

.menu-item-desc span:last-child:after,
.common-dishes .menu-item-desc span:after { 
  content: " "; 
  padding-left: 0; 
}

.menu-5-txt h5,
.menu-6-txt h5 {
  margin-top: 5px;
  margin-bottom: 10px;
}

.menu-7-txt h6 {
  margin-bottom: 10px;
}

.menu-5-txt p {
  font-size: 1rem;
  padding-right: 20%;
  margin-bottom: 10px;
}

.menu-6-txt p {
  font-size: 0.95rem;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.85em;
}

.menu-7-txt p {
  font-size: 1rem;
  margin-bottom: 15px;
}

.menu-5-txt span.item-data {
  display: block;
  color: #888;
  font-size: 0.95rem;
  line-height: 1;
  font-weight: 300;
  margin-bottom: 0;
}

.menu-7-txt .btn.btn-sm {
  padding: 12px 44px;
}

.menu-5-price {
  position: absolute;
  top: 40px;
  right: 25px;
  display: inline-block;
  padding: 7px 12px 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.menu-6-price {
  display: inline-block;
  align-self: flex-start;
  padding: 7px 12px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  margin-bottom: 15px;
  width: auto;
  max-width: 100%;
}

.menu-6-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 5px;
}

.menu-6-actions .menu-6-price {
  margin-bottom: 0;
}

.menu-6-actions .add-to-cart {
  margin-bottom: 0;
  margin-left: auto;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 350ms ease-in-out;
}

.menu-6-actions .add-to-cart.bg-yellow,
.add-to-cart.bg-yellow.menu-6-actions {
  background-color: #f7be27 !important;
  border-radius: 4px;
  padding: 7px 14px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  color: #222 !important;
  font-weight: 600;
  line-height: 1.2;
}
.menu-6-actions .add-to-cart.bg-yellow:hover,
.add-to-cart.bg-yellow.menu-6-actions:hover {
  background-color: #f5b200 !important;
}

/* Equalize price-badge + add-to-cart height in the menu-6 actions row */
.menu-6-actions .menu-6-price,
.menu-6-actions .add-to-cart.bg-yellow {
  height: 38px;
  display: inline-flex;
  align-items: center;
}
.menu-6-actions .menu-6-price {
  padding: 0 14px;
}
.menu-6-actions .menu-6-price h5 {
  margin: 0;
  font-size: 14px;
  line-height: 1;
}

.menu-6-item:hover .menu-6-actions .add-to-cart {
  opacity: 1;
  pointer-events: auto;
}

.menu-6-list-price {
  text-decoration: line-through;
  margin-bottom: 4px;
  font-weight: 600;
}

.menu-6-fav {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
}

.menu-6-fav .menu-6-fav-btn {
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

.menu-6-fav .menu-6-fav-btn .flaticon-heart {
  color: #ffffff;
  font-size: 22px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.menu-6-fav.is-fav .menu-6-fav-btn .flaticon-heart {
  color: #E1251B;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.menu-6-txt .add-to-cart form {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.menu-7-price {
  display: inline-block;
  padding: 7px 12px 10px;
  margin-top: 20px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.menu-5-price h5,
.menu-6-price h5,
.menu-7-price h5 {
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-top: 0;
  margin-bottom: 1px;
}

.menu-5-txt .add-to-basket {
  right: 25px;
  bottom: 20px;
}

.menu-6-txt .add-to-basket {
  right: 16px;
  bottom: 18px;
}

/*------------------------------------------*/
/*  MENU TABS
/*------------------------------------------*/ 

#tabs-nav {
  margin: 0 -15px 70px;
}

.tab-content.current,
.tab-content.displayed {
  display: inherit;
}

.tabs-1 {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
}
.tabs-1.tabs-1-carousel {
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* The rail fills the row it sits in (the row already bleeds to the edge of
     the screen) and scrolls INSIDE itself. A negative margin here would push
     the rail past the screen edge, and the page clips that overflow - which
     cut a strip off every block on the page. */
  padding: 4px 15px;
  margin: 0;
  scroll-padding-inline: 25%;
}
.tabs-1.tabs-1-carousel::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.tabs-1 li {
  display: inline-block;
  cursor: pointer;
  background-color: transparent;
  color: #9f9f9f;
  padding: 0 28px;
  border-bottom: none;
  margin: 0;
  -webkit-transition: all 450ms ease-in-out;
  -moz-transition: all 450ms ease-in-out;
  -o-transition: all 450ms ease-in-out;
  -ms-transition: all 450ms ease-in-out;
  transition: all 450ms ease-in-out;
  position: relative;
  z-index: 997;
  white-space: nowrap;
  flex: 0 0 auto;
}
.tabs-1.tabs-1-carousel li {
  flex: 0 0 calc((100% - 24px) / 4.5);
  min-width: 0;
  max-width: calc((100% - 24px) / 4.5);
  /* The theme pads a tab with 28px (50px on the phones), which does not
     fit in a quarter of a phone screen. The rail is a scroll strip, so the
     tabs keep a slim padding and the label wraps inside its own slot. */
  padding: 0 10px;
  scroll-snap-align: center;
  text-align: center;
}

/* The round category photo the rail shows - the theme only sizes that
   image inside the menu-6 section. */
.tabs-1.tabs-1-carousel li .cuisine-tab-icon {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 50%;
  display: inline-block;
}

/* Menu-6 cuisine tabs: a category rail is ONE line that scrolls sideways on
   every screen. The theme used to wrap it onto a second row and let the
   items shrink until they overlapped each other. */
#menu-6 ul.tabs-1 {
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 8px;
  margin: 0 -8px;
  width: 100%;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-padding-inline: 25%;
}
#menu-6 ul.tabs-1::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
#menu-6 ul.tabs-1.menu-6-tabs li {
  flex: 0 0 auto;
  min-width: 96px;
  max-width: 140px;
  padding: 0 10px;
  text-align: center;
  background-color: transparent;
  margin-bottom: 0;
  scroll-snap-align: center;
}
#menu-6 ul.tabs-1 li .cuisine-tab-icon {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
  display: inline-block;
}
#menu-6 ul.tabs-1 li h5.h5-sm {
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 8px;
  white-space: normal;
  word-break: break-word;
  letter-spacing: 0.3px;
}
#menu-6 ul.tabs-1 li.current h5.h5-sm {
  color: #ce1212;
  font-weight: 700;
}
.tabs-1.tabs-1-carousel li h5 {
  white-space: normal;
  word-break: break-word;
}

/* On a phone the theme turns every tab into a grey block and stacks the
   rail vertically (responsive.css, <=479px). A category rail has to stay a
   SINGLE line that scrolls sideways on every screen, so the carousel rail
   opts out of that treatment. */
@media (max-width: 767.98px) {
  .tabs-1.tabs-1-carousel li {
    display: inline-block;
    background-color: transparent;
    padding: 0 8px;
    margin-bottom: 0;
  }
  .tabs-1.tabs-1-carousel li span {
    position: static;
    right: auto;
  }
  .tabs-1.tabs-1-carousel li h5 {
    display: block;
    font-size: 0.9rem;
    line-height: 1.3;
    position: static;
    top: 0;
    margin-top: 8px;
  }
  .tabs-1.tabs-1-carousel.ico-45 [class*="flaticon-"]:before {
    font-size: 32px;
  }
  .tabs-1.tabs-1-carousel li .cuisine-tab-icon {
    width: 40px;
    height: 40px;
  }
}

.tabs-1 li h5 {
  line-height: 1;
  font-weight: 500;
  margin-top: 15px;
  margin-bottom: 0;
}

.tabs-1 li.current h5 {
  color: #1b1b1b;
  font-weight: 500;
}

.tabs-1.red-tabs li.current span { 
  color: #e3000e;
}

.tabs-1.brown-tabs li.current span { 
  color: #6f5e4d;
}

.tabs-1.yellow-tabs li.current span { 
  color: #fac122;
}

/*------------------------------------------*/
/*  TABS CONTENT
/*------------------------------------------*/ 

.tab-content {
  display: none;
}

/*------------------------------------------*/
/*  MENU IMAGE
/*------------------------------------------*/ 

.menu-3-img {
  margin-top: 65px;
  padding: 0 3%;
}

.menu-4-img {
  text-align: center;
  padding-right: 30px;
  margin-bottom: 40px;
}

#m4-bottom .menu-4-img {
  padding-right: 0;
  padding-left: 30px;
}

.menu-5-img,
.menu-6-img,
.menu-5-img img,
.menu-6-img img {   
  overflow: hidden;
  -webkit-border-radius: 6px 6px 0 0;
  -moz-border-radius: 6px 6px 0 0;
  border-radius: 6px 6px 0 0;
}

.menu-7-img {   
  border: 1px solid #e5e5e5;
  padding: 25px 20px 20px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

.menu-5-item:hover img,
.menu-6-item:hover img {
  transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  -moz-transform: scale(1.1);
}




/* ==========================================================================
  10. GALLERY
  ========================================================================== */  

#gallery-2 {
  padding-top: 100px;
  padding-bottom: 84px;
}

/*------------------------------------------*/
/*  GALLERY GRID
/*------------------------------------------*/ 

#gallery-1 .gallery-grid {
  margin-left: 5px;
  margin-right: 5px;
}

#gallery-1 .col-lg-3 {
  padding: 0 5px;
  margin-bottom: 10px;
}

#gallery-2 .col-lg-3 {
  padding: 0 8px;
  margin-bottom: 16px;
}

/*------------------------------------------*/
/*  Image Hover Overlay
/*------------------------------------------*/

.hover-overlay {
  width: 100%;
  height: auto;
  overflow: hidden;
  position: relative; 
}

.hover-overlay img {
  transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -moz-transform: scale(1);
  overflow: hidden;
  -webkit-transition: transform 400ms;
  -moz-transition: transform 400ms;
  -o-transition: transform 400ms;
  transition: transform 400ms;
}

/*------------------------------------------*/
/*  Image Meta
/*------------------------------------------*/

.img-meta {
  width: 100%;
  padding: 30px 25px 40px;
  position: absolute;
  left: 0;
  bottom: -50px;
  overflow: hidden;
  opacity: 0; 
  -moz-opacity: 0;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

.img-meta h5 {
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 5px;
}

.img-meta1 p {
  margin-bottom: 5px;
}

/*------------------------------------------*/
/*  Overlay Background 
/*------------------------------------------*/ 

.item-overlay {
  opacity: 0;
  -moz-opacity: 0; 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 10, .45);
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
}

/*------------------------------------------*/
/*  Image Hover Effect 
/*------------------------------------------*/ 

.gallery-img:hover img {
  transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  -moz-transform: scale(1.1);
}

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

.gallery-img:hover .img-meta {
  bottom: 0;
  opacity: 1; 
  -moz-opacity: 1; 
}

/*------------------------------------------*/
/*  GALLERY CAROUSEL NAVIGATION
/*------------------------------------------*/

#gallery-3 .owl-dots {
  display: none;
}




/* ==========================================================================
  11. REVIEWS
  ========================================================================== */  

#reviews-1 {
  padding-top: 85px;
  padding-bottom: 70px;
}

#reviews-1.bg-image {
  background-image: url(../images/location-2.jpg);
}

/*------------------------------------------*/
/*  REVIEWS
/*------------------------------------------*/ 

.review-1 {
  text-align: center;
  margin-bottom: 40px;
} 

.review-2.b-bottom {
  padding-bottom: 15px;
  margin-bottom: 30px;
} 

.review-2-txt {
  overflow: hidden;
  padding-left: 20px;
}

/*------------------------------------------*/
/*  Testimonial Message Avatar 
/*------------------------------------------*/ 

#reviews-1 img {
  width: 120px;
  height: 120px;
  display: inline-block;
  margin: 0 auto 20px;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
}

.review-2-avatar {
  display: inline-block;
  float: left;
}

.review-2 img {
  width: 80px;
  height: 80px;
  display: inline-block;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
}

/*------------------------------------------*/
/*  REVIEWS TYPOGRAPHY
/*------------------------------------------*/ 

.review-1-txt p {
  font-size: 1.7rem;
  line-height: 1.45;
  font-weight: 400;
  padding: 0 12%;
  margin-bottom: 25px;
}

.review-1-txt p.testimonial-autor {
  font-family: 'Oswald', sans-serif;
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 35px;
}

.review-info {
  margin-top: 5px;
  margin-bottom: 5px;
}

.review-info h5 {
  display: inline-block;
  float: left;
  margin-right: 10px;
}

.review-info span {
  position: relative;
  color: #999;
  font-size: 1.05rem;
  font-weight: 500;
  top: 2px;
}

/*------------------------------------------*/
/*  Review Rating
/*------------------------------------------*/

.review-rating {
  margin-bottom: 15px;
}

.review-rating i {
  color: #f7be27;
  font-size: 1.1rem;
  line-height: 1;
  margin: 0 1px;
}

/*------------------------------------------*/
/*  Reviews FlexSlider Navigation
/*------------------------------------------*/

.flex-control-paging li a {
  background: rgba(90, 90, 90, .25);
  width: 10px;
  height: 10px;  
  border: 2px solid rgba(90, 90, 90, .02);
}

.bg-image .flex-control-paging li a {
  background: transparent;
  border: 2px solid rgba(240, 240, 240, .4);
}

.flex-control-paging li a:hover,
.flex-control-paging li a.flex-active { 
  background: rgba(111, 94, 77, .65); 
  border: 2px solid rgba(111, 94, 77, .2); 
}

.bg-image .flex-control-paging li a:hover,
.bg-image .flex-control-paging li a.flex-active {
  background: rgba(255, 255, 255, .5);
  border: 2px solid rgba(255, 255, 255, .02);
}




/* ==========================================================================
  12. BRANDS
  ========================================================================== */ 

#brands-1 {
  padding-top: 30px;
  padding-bottom: 30px;
}

/*------------------------------------------*/
/*  BRANDS LOGO HOLDER
/*------------------------------------------*/ 

#brands-1 .brand-logo {
  padding: 10px 20px;
} 

.brand-logo img {
  opacity: .7;
} 

#brands-1 .owl-dots {
  display: none;
}




/* ==========================================================================
  13. BANNER
  ========================================================================== */ 

#banner-1 {
  background-image: url(../images/banner-1.jpg);
  padding-top: 80px;
  padding-bottom: 70px;
}

#banner-2 {
  background-image: url(../images/banner-2.jpg);
  padding-top: 80px;
  padding-bottom: 80px;
}

#banner-3 {
  margin-top: 40px;
}

#banner-4 {
  background-image: url(../images/banner-4.jpg);
  background-position: top center;
}

/*------------------------------------------*/
/*  BANNER TEXT
/*------------------------------------------*/

.banner-1-txt {
  padding: 0 5%;
}

/*------------------------------------------*/
/*  BANNER TYPOGRAPHY
/*------------------------------------------*/

.banner-1-txt h2 {
  text-align: center;
  line-height: 1;
  margin-bottom: 30px; 
}

.banner-2-txt h2 {
  font-size: 6rem;
  line-height: 1.2;
  padding: 0 10%;
  margin-bottom: 40px; 
}

.banner-3-txt h4 {
  font-weight: 400;
  letter-spacing: 0;
  margin-bottom: 0; 
}

.banner-3-txt h2 {
  font-size: 4.5rem;
  font-weight: 700;
  letter-spacing: -1px;
  margin-bottom: 10px; 
}

.banner-4-txt h4 {
  line-height: 1;
  font-weight: 400;
  margin-bottom: 25px; 
}

.banner-4-txt h2 {
  font-size: 4.5rem;
  line-height: 1;
  letter-spacing: 0;
  margin-bottom: 25px; 
}

.banner-2-txt p {
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 25px; 
}

.banner-3-txt p {
  padding-right: 10%;
  margin-bottom: 25px; 
}

.banner-4-txt p {
  padding: 0 5%;
  margin-bottom: 30px; 
}

.banner-4-txt .btn {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  padding: 17px 40px;
}

/*------------------------------------------*/
/*  STORE BADGE ICONS
/*------------------------------------------*/

.stores-badge {
  display: inline-block;
}

.store {
  display: inline-block;
  text-align: center;
  float: left;
  margin-right: 15px;
}

.store:last-child {
  margin-right: 0;
} 

img.googleplay-original { display: block; width: 163px; height: 50px; }
img.appstore-original { display: block; width: 163px; height: 50px; } 

/*------------------------------------------*/
/*  BANNER IMAGE
/*------------------------------------------*/

.banner-3-img {
  text-align: center;
  margin-top: -40px;
  margin-left: -30px;
}




/* ==========================================================================
  14. FAQs
  ========================================================================== */  

.faqs-1-questions {
  padding: 0 3%;
}

.questions-wrapper {
  padding: 0 15px;
}

.question {
  margin-bottom: 30px;
}

/*------------------------------------------*/
/*  FAQs TYPOGRAPHY
/*------------------------------------------*/

.question h5 {
  margin-bottom: 10px;
}

/*------------------------------------------*/
/*  More Questions Button
/*------------------------------------------*/

.more-questions-btn {
  margin-top: 35px;
}




/* ==========================================================================
  15. NEWSLETTER
  ========================================================================== */ 

#newsletter-1 .inner-bg {
  padding: 50px 0 40px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

/*------------------------------------------*/
/*  NEWSLETTER TYPOGRAPHY
/*------------------------------------------*/ 

.newsletter-txt h3 { 
  margin-bottom: 8px;
}

.newsletter-txt p { 
  font-weight: 400;
  margin-bottom: 25px;
}

/*------------------------------------------*/
/*  NEWSLETTER FORM
/*------------------------------------------*/ 

.newsletter-section .newsletter-form {
  padding: 0 4%;
}

/*------------------------------------------*/
/*   Newsletter Form Input
/*------------------------------------------*/

.newsletter-section .form-control {
  height: 58px;
  background-color: #fff;
  border: 1px solid #ddd;
  color: #222;
  font-size: 1.125rem;
  font-weight: 300;
  padding: 0 20px;  
  box-shadow: none;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
}

.newsletter-section .input-group > .custom-select:not(:last-child), 
.newsletter-section .input-group > .form-control:not(:last-child) {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

/*------------------------------------------*/
/*  Newsletter Form Input Focus
/*------------------------------------------*/

.newsletter-section .form-control:focus {
  border: 1px solid #999;
  outline: 0;
  box-shadow: none;
}

/*------------------------------------------*/
/*  Newsletter Form Input Placeholder
/*------------------------------------------*/

.newsletter-section .form-control::-moz-placeholder { color: #999; } 
.newsletter-section .form-control:-ms-input-placeholder { color: #999; } 
.newsletter-section .form-control::-webkit-input-placeholder { color: #999; } 

/*------------------------------------------*/
/*  Newsletter Form Button
/*------------------------------------------*/

.newsletter-section .btn {
  height: 58px;
  font-size: 1.15rem;
  padding: 15px 60px;
  margin-left: 8px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
}

/*------------------------------------------*/
/*  Newsletter Form Notification
/*------------------------------------------*/

.newsletter-section .form-notification {
  color: #2dcb21;
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 400;
  margin-top: 20px;
}

.newsletter-section .newsletter-form label.valid,
.newsletter-section .newsletter-form label.error {
  color: #f6412d;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
  margin-top: 20px;
  margin-bottom: 0;
}

.newsletter-section .newsletter-form label.valid {
  color: #48af4b;
}




/* ==========================================================================
  16. BLOG
  ========================================================================== */ 

.blog-post {
  text-align: center;
  margin-bottom: 40px;
}

.blog-post-txt {
  padding: 0 8%;
}

/*------------------------------------------*/
/*   BLOG POST TYPOGRAPHY
/*------------------------------------------*/

.blog-post-txt h5 {
  margin-top: 25px;
  margin-bottom: 15px;
}

.bg-dark .blog-post-txt a:hover {
  color: #fff;
}

.blog-post-txt p {
  font-size: 0.975rem;
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: 0;
}

.blog-post:hover img {
  transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  -moz-transform: scale(1.1);
}

/*------------------------------------------*/
/*  BLOG LISTING PAGE
/*------------------------------------------*/

#blog-listing .blog-post {
  text-align: left;
  margin-bottom: 40px;
}

#blog-listing .col-lg-4 .blog-post {
  margin-bottom: 0;
}

#blog-listing .blog-post.b-bottom {
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 40px;
}

#blog-listing .blog-post-txt {
  padding: 0 15px;
}

#blog-listing .col-lg-4 {
  padding-left: 10px;
  padding-right: 10px;
}

#blog-listing .col-lg-4 .blog-post-txt {
  padding: 0;
}

#blog-listing .blog-post-txt h4.h4-xs {
  margin-top: 30px;
  margin-bottom: 20px;
}

#blog-listing .blog-post-txt h5.h5-lg {
  margin-top: 25px;
  margin-bottom: 15px;
}

#blog-listing h5.posts-category {
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 25px;
  margin-top: 70px;
  margin-bottom: 40px;
}

.blog-post-meta {
  margin-top: 15px;
}

.blog-post-meta span {
  color: #999;
  font-size: 1.15rem;
  font-weight: 500;
  margin-right: 14px;
}

.blog-post-meta span i {
  color: #bbb;
  font-weight: 600;
}

/*------------------------------------------*/
/*  SINGLE POST
/*------------------------------------------*/ 

.single-post-title {
  padding: 0 4%;
  margin-bottom: 35px;
}

.single-post-txt {
  padding: 0 4%;
}

.single-post-txt h5 {
  margin-top: 30px;
  margin-bottom: 30px;
}

/*------------------------------------------*/
/*  BLOG POST INNER IMAGE
/*------------------------------------------*/ 

.post-inner-img {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 50px;  
}

.post-inner-img img {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px; 
}

.post-inner-img p {
  margin-top: 25px;
  margin-bottom: 0;  
}

/*------------------------------------------*/
/*  POST TAGS 
/*------------------------------------------*/ 

.post-share-links {
  padding: 0 4%;
  margin-top: 60px;
}

.post-tags-list span a {
  color: #757575;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.42857;
  background-color: #f2f2f2;
  padding: 10px 20px;
  margin-right: 4px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-transition: all 450ms ease-in-out;
  -moz-transition: all 450ms ease-in-out;
  -o-transition: all 450ms ease-in-out;
  -ms-transition: all 450ms ease-in-out;
  transition: all 450ms ease-in-out;
}

.post-tags-list span a:hover {
  color: #666;
  background-color: #e7e7e7;
}

/*------------------------------------------*/
/*  POST SHARE ICONS
/*-----------------------------------------*/

.post-share-links .share-social-icons {
  display: inline-block; 
  padding-left: 0;
}

.post-share-links .share-social-icons li {
  width: auto !important;
  display: inline-block !important;
  vertical-align: top;
  clear: none !important;
  padding: 0;
}

.post-share-links .share-social-icons a.share-ico i {
  color: #555;
  width: 33px;
  height: 33px;
  font-size: 26px;
  display: block;
  margin-right: 5px;
}

/*------------------------------------------*/
/*  OTHER POSTS TYPOGRAPHY
/*------------------------------------------*/ 

#other-posts {
  padding-top: 60px;
  padding-bottom: 30px;
}

#op-row {
  padding: 0 4%;
}

.other-posts h6 {
  margin-bottom: 12px;
}

.prev-post a, 
.next-post a {
  font-size: 1.0625rem;
  line-height: 1.2;
}

.all-posts a { 
  font-size: 2.15rem;
  line-height: 1;
}

.prev-post a:hover, 
.next-post a:hover {
  color: #000;
  text-decoration: underline;
}

.all-posts a:hover { 
  color: #333;
}

/*------------------------------------------*/
/*  POST COMMENTS
/*------------------------------------------*/

.comments-wrapper {
  padding: 0 4%;
}

.post-comments h5 {
  padding-bottom: 30px;
  margin-bottom: 80px;
  border-bottom: 1px solid #ddd;
}

.post-comments img {
  width: 75px;
  height: 75px;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
}

.media-body p {
  color:  #757575;
}

.comment-meta {
  margin-bottom: 10px;
}

.comment-meta h6 {
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 2px;
}

.comment-date {
  color: #888;
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 5px;
}

.btn-reply {
  margin-left: 3px;
}

.btn-reply a {
  color:  #888;
  font-size: 15px;
  font-weight: 400; 
}

.btn-reply a i {
  font-size: 13px;  
  margin-right: 1px;  
}

.btn-reply a:hover {
  color: #222;
}

.post-comments hr {
  margin-top: 24px; 
  margin-bottom: 40px; 
}

/*------------------------------------------*/
/*    SINGLE POST COMMENT FORM
/*------------------------------------------*/

.post-comments #leave-comment h5 {
  padding-bottom: 0;
  margin-top: 80px;
  margin-bottom: 3px;
  border: none;
}

.comment-form {
  position: relative;
  margin-top: 50px;
}

.comment-form p {
  color: #333;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  margin-bottom: 10px;
  padding-left: 5px;
  display: block;
}

.comment-form .form-control {
  height: 54px;
  background-color: #fff;
  border: 1px solid #ccc;
  color: #333;
  font-size: 18px;
  font-weight: 300;
  padding: 0 15px;
  margin-bottom: 22px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
}

.comment-form .form-control:focus {
  border-color: #00b2e4;
  outline: 0px none;
  box-shadow: none;
}

.comment-form textarea { min-height: 200px; }
.comment-form textarea.form-control { 
  padding: 20px;
}

/*------------------------------------------*/
/*  Comment Form Button
/*------------------------------------------*/

.comment-form .btn {
  margin-top: 10px;
}

.comment-form .btn:focus {
  outline: 0px none;
  box-shadow: none;
}

/*------------------------------------------*/
/*  Comment Form Message
/*------------------------------------------*/

.comment-form-msg {
  width: 100%!important;
  display: block;
  margin-top: 10px;
  padding-left: 0;
}

.comment-form .loading {
  color: #2dcb21;
  font-size: 18px;
  font-weight: 400;
}

.comment-form .error {
  color: #e74c3c;
  font-size: 14.5px;
  font-weight: 300;
  margin-bottom: 20px;
}

.comment-form .form-control.error {
  font-size: 17px!important;
}




/* ==========================================================================
  17. CONTACTS
  ========================================================================== */  

#contacts-1,
#contacts-2 {
  background-image: url(../images/menu-3-2-img.jpg);
  padding-top: 80px;
  padding-bottom: 50px;
}

#contacts-2 {
  background-image: url(../images/contacts-2.jpg);
}

#contacts-4 {
  position: relative;
  padding-top: 90px;
  padding-bottom: 40px;
}

#contacts-4 .section-title {
  padding-left: 40px;
}

#contacts-5 .section-title {
  margin-top: 60px;
}

/*------------------------------------------*/
/*  CONTACT BOX
/*------------------------------------------*/

.cbox-1 {
  margin-bottom: 30px;
}

.cbox-2 {
  margin-bottom: 27px;
}

.cbox-3 {
  margin-bottom: 37px;
}

.cbox-2-txt {
  overflow: hidden;
  padding-left: 30px;
}

.cbox-2 span {     
  float: left;
  text-align: center;
  margin-top: 5px;
}

.cbox-3-txt {
  margin-top: 35px;
  padding: 0 20px;
}

.contacts-info {
  padding-left: 40px;
}

.cbox-5 {
  text-align: center;
  margin-bottom: 40px;
}

/*------------------------------------------*/
/*  CONTACTS TYPOGRAPHY
/*------------------------------------------*/

.cbox-1 h5,
.cbox-4 h5,
.cbox-5 h5 {
  line-height: 1;
  margin-bottom: 20px;
}

.cbox-2-txt h5 {
  line-height: 1;
  margin-bottom: 15px;
}

.cbox-3-txt h5 {
  line-height: 1;
  margin-bottom: 10px;
}

.cbox-3-txt h6 {
  line-height: 1;
  margin-bottom: 10px;
}

.cbox-3-txt h6 span {
  font-weight: 500;
}

.cbox-1 p.p-xl {
  font-size: 1.35rem;
  line-height: 1;
  margin-bottom: 10px;
}

.cbox-1 p.p-md {
 line-height: 1;
 margin-bottom: 0;
}

.cbox-1 p a,
.cbox-1 p.yellow-color {
 font-family: 'Oswald', sans-serif;
 font-size: 1.85rem;
 line-height: 1;
 font-weight: 700;
 letter-spacing: -0.5px;
 text-transform: uppercase;
}

.cbox-1 p span {
 position: relative;
 top: -5px;
 margin-right: 5px;
}

.cbox-2-txt p {
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: 3px;
}

.cbox-3-txt p {
  font-size: 1.15rem;
  line-height: 1.3;
  font-weight: 400;
  margin-bottom: 3px;
}

.cbox-4 p {
  line-height: 1;
  margin-bottom: 10px;
}

.cbox-5 p {
 margin-bottom: 3px;
}

.cbox-5 p a {
 font-weight: 700;
 text-decoration: underline;
}

/*------------------------------------------*/
/*  CONTACT FORM
/*------------------------------------------*/

.contact-form .form-control {
  height: 54px;
  background-color: #fff;
  border: 1px solid #e0d9c5;
  box-shadow: 0 0 0 0;
  color: #5f5842;
  font-size: 17px;
  line-height: 1;
  font-weight: 300;
  padding: 0 15px;
  margin-bottom: 22px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

/*------------------------------------------*/
/*  Contact Form Textarea
/*------------------------------------------*/

.contact-form textarea { min-height: 160px; }
.contact-form textarea.form-control { 
  padding: 20px 15px;
}

/*------------------------------------------*/
/*  Contact Form Placeholder
/*------------------------------------------*/

.contact-form .form-control::-moz-placeholder { color: #5f5842; } 
.contact-form .form-control:-ms-input-placeholder { color: #5f5842; }
.contact-form .form-control::-webkit-input-placeholder { color: #5f5842; }

/*------------------------------------------*/
/*  Contact Form Input Focus
/*------------------------------------------*/

.contact-form .form-control:focus {
  outline: 0px none;
  box-shadow: none;
  border-color: #afa074;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: #555;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
  transition: background-color 5000s ease-in-out 0s;
}

/*------------------------------------------*/
/*  Contact Form Message
/*------------------------------------------*/

.contact-form-msg {
  width: 100%!important;
  display: block;
  margin-top: 10px;
  padding-left: 0;
}

.contact-form .loading {
  color: #2dcb21;
  font-size: 18px;
  font-weight: 400;
}

.contact-form .error {
  color: #e74c3c;
  font-size: 14.5px;
  font-weight: 300;
  margin-bottom: 20px;
}

.contact-form .form-control.error {
  font-size: 17px!important;
}

/*------------------------------------------*/
/*  CONTACTS IMAGE
/*------------------------------------------*/

.cbox-3:hover img {
  transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  -moz-transform: scale(1.1);
}

.contacts-4-img { 
  background-image: url(../images/location-1.jpg);
  background-repeat: no-repeat;
  background-position: center center;   
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34%;
  left: 0;
}




/* ==========================================================================
  18. BOOKING FORM
  =========================================================================== */ 

#booking-1 {
  background-image: url(../images/banner-2.jpg);
  margin-top: 40px;
  margin-bottom: 40px;
}

#booking-1 .form-holder {
  padding: 50px 40px 45px;
  margin: -30px 30px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .05);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .05);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .05);
}

.booking-form {
  margin-top: 20px;
}

.booking-form .col-md-12,
.booking-form .col-lg-6 { 
  padding: 0 8px; 
}

#booking-1 .form-holder a,
#booking-2 .form-holder a {
  font-weight: 700;
  letter-spacing: -0.5px;
}

#booking-2 .form-holder p {
  margin-bottom: 40px;
}

/*------------------------------------------*/
/*  BOOKING FORM
/*------------------------------------------*/

.booking-form .form-control,
.booking-form .custom-select {
  height: 52px;
  background-color: #fff;
  border: 1px solid #e0d9c5;
  box-shadow: 0 0 0 0;
  color: #5f5842;
  font-size: 17px;
  line-height: 1;
  font-weight: 300;
  padding: 0 15px;
  margin-bottom: 22px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

.booking-form .custom-select {
  display: inline-block;
  width: 100%;
  color: #5f5842;
  margin-bottom: 22px;
}

.bg-color-01 .booking-form .form-control,
.bg-color-01 .booking-form .custom-select {
  background-color: #fff;
  border: 1px solid #e0d9c5;
  color: #5f5842;
}

/*------------------------------------------*/
/*  Booking Form Textarea
/*------------------------------------------*/

.booking-form textarea { min-height: 120px; }
.booking-form textarea.form-control { 
  padding: 20px 15px;
}

/*------------------------------------------*/
/*  Booking Form Placeholder
/*------------------------------------------*/

.booking-form .form-control::-moz-placeholder { color: #5f5842; } 
.booking-form .form-control:-ms-input-placeholder { color: #5f5842; }
.booking-form .form-control::-webkit-input-placeholder { color: #5f5842; }

/*------------------------------------------*/
/*  Booking Form Input Focus
/*------------------------------------------*/

.booking-form .form-control:focus {
  outline: 0px none;
  box-shadow: none;
  border-color: #afa074;
}

/*------------------------------------------*/
/*  Booking Form Message
/*------------------------------------------*/

.booking-form-msg {
  width: 100%!important;
  display: block;
  margin-top: 10px;
  padding-left: 0;
}

.booking-form .loading {
  color: #2dcb21;
  font-size: 18px;
  font-weight: 400;
}

.booking-form .error {
  color: #e74c3c;
  font-size: 14.5px;
  font-weight: 300;
  margin-bottom: 20px;
}

.booking-form .form-control.error {
  font-size: 17px!important;
}




/* ==========================================================================
  19. GOOGLE MAP
  ========================================================================== */  

.google-map {
  position: relative;
  padding: 0px 0px 40%;
  height: 0px;
  overflow: hidden;
}

.google-map iframe, 
.google-map object, 
.google-map embed {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border:0;
}

#contacts-5 #gmap {
  margin-top: 30px;
}




/* ==========================================================================
  20. FOOTER
  ========================================================================== */ 

.footer {
  padding-top: 80px;
  padding-bottom: 40px;
}

#footer-3.footer {
  padding-bottom: 80px;
}

.footer.bg-red,
.footer.bg-dark {
  background-image: url(../images/footer-red.jpg);
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;   
  background-size: cover;
  background-attachment: scroll!important;
} 

.footer.bg-dark {
  background-image: url(../images/footer-dark.jpg);
} 

#footer-1 .footer-contacts {
  padding-left: 30px;
}

#footer-4 .footer-contacts {
  padding-left: 40px;
}

#footer-4 .footer-info {
  padding-left: 10px;
}

/*------------------------------------------*/
/*  FOOTER LOGO
/*------------------------------------------*/

.footer-logo {
  margin-bottom: 30px;
}

#footer-4 .footer-logo {
  margin-bottom: 15px;
}

.footer-logo img {
  width: auto;
  max-width: inherit;
  max-height: 95px;
}

#footer-3 .footer-logo img {
  max-height: 120px;
}

/*------------------------------------------*/
/*   FOOTER TYPOGRAPHY
/*------------------------------------------*/

.footer h5 {
  color: #283034;
  line-height: 1;
  margin-bottom: 25px;
}

.bg-red.footer h5,
.bg-dark.footer h5 {
  color: #fff;
}

.footer-info p,
.footer-contacts p {
  margin-bottom: 3px;
}

#footer-1 .footer-info p {
  line-height: 1;
  font-weight: 500;
  margin-bottom: 0;
}

#footer-1 .footer-contacts p.p-xl {
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.5px;
  margin-bottom: 0;
}

#footer-1 .footer-contacts p.p-lg {
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 500;
  margin-bottom: 0;
}

#footer-1 .footer-contacts p.foo-email {
  margin-top: 15px;
  margin-bottom: 2px;
}

.footer-contacts p span {
 font-family: 'Oswald', sans-serif;
 font-size: 1.85rem;
 line-height: 1;
 font-weight: 700;
 letter-spacing: -0.5px;
 position: relative;
 top: 4px;
 left: 6px;
}

#footer-2 .footer-contacts p span,
#footer-4 .footer-contacts p span {
 left: 0;
}

.footer-info p span {
  padding-left: 8px;
}

/*------------------------------------------*/
/*   FOOTER LINKS
/*------------------------------------------*/

.footer-links li {
  width: auto !important;
  display: block !important;
  vertical-align: top;
  clear: none !important;
  margin: 0;
  padding: 0;
}

.footer-links li p {
  margin-bottom: 10px;
}

/*------------------------------------------*/
/*   FOOTER SOCIAL LINKS
/*------------------------------------------*/

#footer-3 .footer-socials-links {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 12px;
}

.foo-socials {
  display: inline-block; 
  padding-left: 0;
  margin: 0 auto 0;
}

.foo-socials li {
  width: auto !important;
  display: inline-block !important;
  vertical-align: top;
  clear: none !important;
  margin: 0 0 8px 0;
  padding: 0;
}

.foo-socials a {
  display: block;
  width: 40px;
  height: 40px;
  font-size: 23px;
  line-height: 1;
  margin: 0 2px;
}

/*------------------------------------------*/
/*  FOOTER INSTAGRAM IMAGES
/*------------------------------------------*/

.footer-img img.insta-img {
  float: left;
  width: 75px;
  height: 75px;
  margin: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

/*------------------------------------------*/
/*  BOTTOM FOOTER
/*------------------------------------------*/

.bottom-footer {
  border-top: 1px solid #ddd;
  margin-top: 30px;
  padding-top: 40px;
}

#footer-2 .bottom-footer {
  margin-top: 15px;
}

#footer-2.bg-red .bottom-footer {
  border-top: 1px solid rgba(255, 255, 255, .25);
}

#footer-2.bg-dark .bottom-footer {
  border-top: 1px solid rgba(100, 100, 100, .25);
}

/*------------------------------------------*/
/*  FOOTER COPYRIGHT
/*------------------------------------------*/

.footer-copyright p {
  line-height: 1;
  margin-bottom: 0;
}

#footer-3 .footer-copyright p {
  margin-top: 10px;
}

/*------------------------------------------*/
/*  BOOTOM FOOTER LINKS
/*------------------------------------------*/

.bottom-footer-list li {
  display: inline-block !important;
  margin-bottom: 0;
}

.bottom-footer-list li i {
  position: relative;
  font-size: 0.875rem;
  line-height: 1;
  top: -1px;
  right: 3px;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out; 
}

.bottom-footer-list li p {
  font-size: 1rem;
  line-height: 1; 
  font-weight: 300;
  margin-left: 10px;
  margin-bottom: 0;
}

#footer-3 .bottom-footer-list li p {
  font-size: 0.915rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.bottom-footer-list p:after { 
  content: "|"; 
  padding-left: 11px; 
  position: relative;
  top: -1px;
}

.bottom-footer-list p.last-li:after { 
  content: " "; 
  padding-left: 0; 
}




/* ==========================================================================
  21 INNER PAGE HERO
  =========================================================================== */  

.page-hero-section {
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;   
  background-size: cover;
  background-attachment: scroll!important;
  padding-top: 170px;
  padding-bottom: 120px;
}

#about-page {
  background-image: url(../images/banner-2.jpg);
}

#blog-page {
  background-image: url(../images/banner-2.jpg);
}

#booking-page {
  background-image: url(../images/banner-2.jpg);
}

#cart-page {
  background-image: url(../images/banner-2.jpg);
}

#contacts-page {
  background-image: url(../images/banner-2.jpg);
}

#gallery-page {
  background-image: url(../images/banner-2.jpg);
}

#gift-page {
  background-image: url(../images/banner-2.jpg);
}

#faqs-page {
  background-image: url(../images/banner-2.jpg);
}

#locations-page {
  background-image: url(../images/banner-2.jpg);
}

#menu-page {
  background-image: url(../images/banner-2.jpg);
}

#product-page {
  background-image: url(../images/banner-2.jpg);
}

#team-page {
  background-image: url(../images/banner-2.jpg);
}

#terms-page {
  background-image: url(../images/terms-page.jpg);
}

/*------------------------------------------*/
/*  INNER PAGE HERO TYPOGRAPHY
/*------------------------------------------*/

.page-hero-section h2 {
  font-size: 4rem;
  margin-bottom: 0;
}




/* ==========================================================================
  22. BREADCRUMB
  =========================================================================== */

#breadcrumb {
  margin-bottom: 14px;
  text-align: center;
}

.breadcrumb-nav {
  display: inline-block;
  margin: 0 auto;
}

.breadcrumb {
  padding: 0;
  margin-bottom: 0;
  background-color: transparent;
  border-radius: 0;
  width: 100%;
}

/*------------------------------------------*/
/*  DECORATIVE CUT-OUTS
    The theme markup positions these corner photos with a handful of
    utility classes that were never defined in this stylesheet, so the
    photos rendered at full size straight over the page content.
------------------------------------------*/

.bread-shape-start {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 170px;
  pointer-events: none;
}

.bread-shape-end {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  width: 140px;
  pointer-events: none;
}

/* Corner cut-outs: keep them behind the content and out of the way. */
img[src$="/images/menu/sewt.png"] {
  width: 190px;
  opacity: .8;
  pointer-events: none;
}

.top-40 { top: 40%; }
.top-50 { top: 50%; }
.z-n1 { z-index: -1; }

@keyframes floatBobY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.float-bob-y {
  animation: floatBobY 3s ease-in-out infinite;
}

/*------------------------------------------*/
/*  BREADCRUMB TYPOGRAPHY
/*------------------------------------------*/ 

.breadcrumb-item a {
  color: #fff;
  font-size: 0.925rem;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: underline;
}

.breadcrumb-item a:hover {
  color: #fff;
}

.breadcrumb-item.active {
  color: #fff;
  font-size: 0.925rem;
  font-weight: 700;
  text-transform: uppercase;
}

.breadcrumb-item + .breadcrumb-item::before {
  font-size: 0.925rem;
  display: inline-block;
  padding-right: 10px;
  color: #fff;
  content: "/";
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: 12px;
}




/* ==========================================================================
  23. PAGE PAGINATION
  =========================================================================== */

.page-pagination {
  padding-bottom: 100px;
}

.blog-page-pagination {
  margin-top: 80px;
  padding-top: 80px;
}

.page-link {
  color: #999;
  font-weight: 600;
  padding: 9px 16px;
  margin: 0 3px;
  background-color: transparent;
  border-color: transparent;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

.page-item:first-child .page-link {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.page-item:last-child .page-link {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.page-item.disabled .page-link {
  color: #aaa;
  background-color: transparent;
  border-color: transparent;
}

.page-link:hover,
.page-item.active .page-link {
  background-color: #f7be27;
  color: #151515;
  border-color: #f7be27;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .05);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .05);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .05);
}

.page-link:focus {
  background-color: transparent;
  color: #666;
  border-color: transparent;
  box-shadow: 0 0;
}




/* ==========================================================================
  24. GIFT CARDS PAGE
  =========================================================================== */

.card-box {
  text-align: center;
  margin-bottom: 40px;
}

/*------------------------------------------*/
/*  CARDS PAGE TYPOGRAPHY
/*------------------------------------------*/

.card-box h5 {
  margin-top: 25px;
  margin-bottom: 10px;
}

.card-box p {
  padding: 0 5%;
}




/* ==========================================================================
  25. SINGLE PRODUCT
  =========================================================================== */

.project-title {
  margin-bottom: 15px;
}

.project-title h2,
.project-title .stars-rating  {
  margin-bottom: 8px;
}

.project-title .stars-rating span {
  font-size: 1.05rem;
  margin: 0 4px;
  top: 1px;
}

.project-title .stars-rating i {
  font-size: 1.05rem;
}

.product-txt ul.txt-list li p {
  margin-bottom: 3px;
}

/*------------------------------------------*/
/*  PRODUCT INFO
/*------------------------------------------*/ 

.product-info h5 { 
  margin-bottom: 20px;
}

.product-info p {
  color: #555; 
  font-weight: 700;  
  position: relative;
  margin-bottom: 0;
  padding: 11px 0;
  border-bottom: 1px dotted #ccc;
}

.product-info p:last-child {   
  border-bottom: none;
}

.product-info p span {
  position: absolute;
  right: 15px;
  bottom: 11px;
  color: #333;
}

.product-info-row {
  padding: 14px 0;
  border-bottom: 1px dotted #ccc;
}

.product-info-row:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

/*------------------------------------------*/
/*  ADD TO CART BUTTON
/*------------------------------------------*/ 

.add-to-cart-btn {
  display: inline-block;
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 700;
  padding: 13px 32px;
  margin-top: 25px;
  margin-bottom: 25px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;  
}

/*------------------------------------------*/
/*  Add To Cart Hover
/*------------------------------------------*/

.add-to-cart-btn.bg-yellow:hover {
   background-color: #f5b200!important;
}

/*------------------------------------------*/
/*  PRODUCT INFO TABS
/*------------------------------------------*/ 

#product-1-data .tab-content {
  padding: 0 4%;
}

#product-1-data .tabs-nav {
  margin-bottom: 50px;
}

.product-preview .tabs-nav {
  margin-top: 50px;
  margin-bottom: 0;
}

#product-1-data .tabs-1 li {
  display: inline-block; 
  cursor: pointer;
  background-color: transparent;
  color: #9f9f9f;
  padding: 15px 50px;
  border-bottom: none;
  margin: 0;
  -webkit-transition: all 450ms ease-in-out;
  -moz-transition: all 450ms ease-in-out;
  -o-transition: all 450ms ease-in-out;
  -ms-transition: all 450ms ease-in-out;
  transition: all 450ms ease-in-out;
  position: relative;
  z-index: 912;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

#product-1-data .tabs-1 li h5 {
  line-height: 1;
  font-weight: 500;
  margin: 0;
}

#product-1-data .tabs-1 li.current { 
  background-color:  #f7be27;
}

.tabs-2 li {
  opacity: .5;
  display: inline-block; 
  cursor: pointer;
  background-color: transparent;
  padding: 15px;
  border: 1px solid #e5e5e5;
  margin: 0 4px;
  -webkit-transition: all 450ms ease-in-out;
  -moz-transition: all 450ms ease-in-out;
  -o-transition: all 450ms ease-in-out;
  -ms-transition: all 450ms ease-in-out;
  transition: all 450ms ease-in-out;
  position: relative;
  z-index: 912;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

.tabs-2 li img {
 width: auto;
  max-width: inherit;
  max-height: 78px;
}

.tabs-2 li.displayed { 
  opacity: 1;
}




/* ==========================================================================
  26. CART PAGE
  =========================================================================== */

table {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
}

table tr {
  border-bottom: 1px solid #ccc;
}

table tr.last-tr {
  border-bottom: none;
}

table th,
table td {
  padding: 16px 10px;
}

table td.product-name {
  padding: 16px 10px 16px 0;  
}
 
table th {
  font-size: 1.15em;
  line-height: 1;
  margin-bottom: 0;
}

.td-trash i {
  position: relative;
  cursor: pointer;
  color: #999;
  font-size: 1.5rem;
  top: -2px;
  padding-left: 25px;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out; 
}

.td-trash:hover i {
  color: #151515;
}

.cart-product-img {
  display: inline-block;
  float: left;
}

.cart-product-img img {
  width: auto;
  max-width: inherit;
  max-height: 60px;
}

.cart-product-desc {
  overflow: hidden;
  padding-left: 20px;
}

.cart-product-desc h5 {
  position: relative;
  padding-top: 6px;
  margin-bottom: 2px;
}

.cart-product-desc p {
  margin-bottom: 0;
}

.cart-product-price h5, 
.cart-product-total h5 {
  margin-top: 12px;
}

.cart-table .qty {
  margin-top: 6px;
}

.qty {
  height: 43px;
  font-size: 1.3rem;
  padding: 0 3px 0 6px;
  margin-right: 6px;
  border: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.16);
  border-radius: 4px;
}

.qty:focus {
  outline: 0;
}

input[type=number]::-webkit-inner-spin-button {
  opacity: 1;
}

/*------------------------------------------*/
/*  Responsive Table
/*------------------------------------------*/ 

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

  .cart-table table {
    border: 0;
  }

  .cart-table table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  .cart-table table tr {
    border: 1px solid #ddd;
    border-bottom: none;
    display: block;
    margin-bottom: 25px;
  }
  
  .cart-table table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: 1.25rem;
    text-align: right;
  }

  .cart-table table th,
  .cart-table table td,
  .cart-table table td.product-name {
    padding: 16px 30px;
  }

  .cart-product-price h5, 
  .cart-product-total h5 {
    margin-top: 0;
  }

  .td-trash i {
    top: 0;
  }
  
  .cart-table table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }

  .cart-table table td.product-name::before {
    position: relative;
    top: 15px;
  }

}

/*------------------------------------------*/
/*  Checkout Table
/*------------------------------------------*/ 

.cart-checkout {
  padding: 50px 45px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

.cart-checkout h5 {
  margin-bottom: 20px;
}

.cart-checkout .btn {
  display: block;
  width: 100%;
  margin-top: 20px;
}

/*------------------------------------------*/
/*  Checkout Table
/*------------------------------------------*/ 

.cart-checkout table td, .cart-checkout table th {
  padding: 20px 0;
  border-bottom: 1px solid #dee2e6;
}

.cart-checkout table .last-tr td, .cart-checkout table .last-tr th {
  border-bottom: none;
}

.cart-checkout table {
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 700;
} 

/*------------------------------------------*/
/*  DISCOUNT COUPON
/*------------------------------------------*/ 

/*------------------------------------------*/
/*  Discount Form Input
/*------------------------------------------*/

.discount-form .form-control {
  height: 50px;
  background-color: #fff;
  border: 1px solid #ddd;
  color: #222;
  font-size: 1.05rem;
  font-weight: 300;
  padding: 0 14px;  
  box-shadow: none;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
}

.discount-form .input-group > .custom-select:not(:last-child), 
.discount-form .input-group > .form-control:not(:last-child) {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

/*------------------------------------------*/
/*  Discount Form Input Focus
/*------------------------------------------*/

.discount-form .form-control:focus {
  border: 1px solid #999;
  outline: 0;
  box-shadow: none;
}

/*------------------------------------------*/
/*  Discount Form Input Placeholder
/*------------------------------------------*/

.discount-form .form-control::-moz-placeholder { color: #999; } 
.discount-form .form-control:-ms-input-placeholder { color: #999; } 
.discount-form .form-control::-webkit-input-placeholder { color: #999; } 

/*------------------------------------------*/
/*  Discount Form Button
/*------------------------------------------*/

.discount-form .btn {
  height: 50px;
  font-size: 1.05rem;
  padding: 15px 30px;
  margin-left: 8px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
}




/* ==========================================================================
  27. TEAM
  =========================================================================== */

.team-member {
  text-align: center;
  position: relative;
  z-index: 10; 
  margin-bottom: 40px;
}

.tm-meta {
  padding: 25px 10px 0;
}

.tm-meta h5 {
  line-height: 1;
  margin-bottom: 5px;
}

.tm-meta span {
  font-size: 1.175rem;
  font-weight: 500;
  display: block;
}

/*------------------------------------------*/
/*  Team Member Photo
/*------------------------------------------*/ 

.team-member-photo {
  position: relative;
}

.team-member-photo img {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

/*------------------------------------------*/
/*  Team Member Social Links
/*------------------------------------------*/

.tm-social ul {
  width: 100%;
  display: inline-block; 
  padding-left: 0;
  margin-top: 14px;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 20;
  zoom: 1;
  opacity: 0;
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  -ms-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}

.tm-social ul li {
  width: auto !important;
  display: inline-block !important;
  vertical-align: top;
  clear: none !important;
  padding: 0;
}

.tm-social a {
  width: 40px;
  height: 40px;
  color: #fff;
  background-color: rgba(10, 10, 10, .35);
  font-size: 1.15rem;
  line-height: 40px!important;
  margin-right: 1px;
  display: block;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
}

.tm-social a.ico-facebook:hover { background-color: #3b5998; }
.tm-social a.ico-twitter:hover { background-color: #00a9ed; }
.tm-social a.ico-instagram:hover { background-color: #e44772 }
.tm-social a.ico-dribbble:hover { background-color: #d92d84; }
.tm-social a.ico-behance:hover { background-color: #2473f6; }
.tm-social a.ico-pinterest:hover { background-color: #ac281a; }
.tm-social a.ico-linkedin:hover { background-color: #015886; }
.tm-social a.ico-google-plus:hover { background-color: #cd1111; }
.tm-social a.ico-youtube:hover { background-color: #cd1b20; }
.tm-social a.ico-tumblr:hover { background-color: #3a5976; }
.tm-social a.ico-vk:hover { background-color: #3b5998; }


.team-member:hover .tm-social ul {
  bottom: 6%;
  opacity: 1; 
  -moz-opacity: 1; 
}




/* ==========================================================================
  28. TERMS PAGE
  =========================================================================== */

/*------------------------------------------*/
/*  TERMS PAGE TYPOGRAPHY
/*------------------------------------------*/

.terms-box { 
  margin-bottom: 30px;
}

.terms-box h5 {
  margin-bottom: 25px;
}

.terms-box a {
  font-weight: 500;
}




/* ==========================================================================
  29. SCROLL TO TOP
  ========================================================================== */  
 
#scrollUp {
  display: none;
  width: 45px;
  height: 45px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background-image: url(../images/back-to-top.png);
  background-repeat: no-repeat;
  background-position: 50% 48%;
  background-color: rgba(227, 0, 14, .95);
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out; 
}

#scrollUp:hover {
  background-color: rgba(10, 10, 10, .65);
}

nav a#pull {  
  display: none;  
}

/* ==========================================================================
   Testo — Combo Deals & Drinks & Juices 4-column grids
   --------------------------------------------------------------------------
   These are now 4-column grids (NOT horizontal scroll rails) so the cards
   match the MENU-6 "True Italian Flavor" section exactly:
     - same card width (col-lg-3 = 25% of container)
     - same card height (image 4/3 + body fills rest, flexbox)
     - same internal layout (image, title, price tag, add-to-cart pill)
     - same look on hover (lift, shadow)
   ========================================================================== */

.testo-rail {
    padding-top: 60px;
    padding-bottom: 60px;
    background: #ffffff;
}

.testo-rail .section-title h2 {
    margin-bottom: 10px;
    color: #dc3545; /* red-color */
    font-weight: 700;
}
.testo-rail .section-title p {
    color: #777;
    margin-bottom: 0;
}

/* The .row.testo-rail__grid is a normal Bootstrap row (not a horizontal
   scroll track) — cards wrap to multiple lines if there are more than 4. */
.testo-rail__grid {
    display: flex;
    flex-wrap: wrap;
}
.testo-rail__grid > [class*="col-"] {
    display: flex;
}

/* Card itself — same flexbox layout as .menu-6-item. The .menu-6-item rule
   above already provides position: relative, display: flex, flex-direction
   column, width: 100%, overflow: hidden. We just override the border (the
   rail uses a card-style shadow) and add the rail-specific hover lift. */
.testo-rail__card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border: none;
    margin-bottom: 30px;       /* match MENU-6 card bottom spacing */
}
.testo-rail__card:hover,
.testo-rail__card:focus {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.10);
    color: inherit;
    text-decoration: none;
}

/* Round the top corners of the inner image so it follows the card. */
.testo-rail__card .menu-6-img,
.testo-rail__card .menu-6-img .hover-overlay {
    border-radius: 8px 8px 0 0;
}

/* The image fill behaviour is inherited from the MENU-6 .menu-6-img
   rules (aspect-ratio 4/3, object-fit cover, etc.) — no need to
   duplicate them here. */

@media (max-width: 575.98px) {
    .testo-rail { padding-top: 40px; padding-bottom: 40px; }
}

/* Dark overlay variant — used when the rail sits on a dark background
   (e.g. the 3-features section above is on a dark bg). Auto-applied by
   body class or container. Keeps cards readable. */
.bg-04 .testo-rail,
.bg-05 .testo-rail {
    background: transparent;
}
.bg-04 .testo-rail__card,
.bg-05 .testo-rail__card {
    background: #ffffff;
}

/* ==========================================================================
   Testo — Auth pages (Login / Signup / Forgot Password)
   --------------------------------------------------------------------------
   2-column split (brand panel + form) by default, single-column variant
   via .testo-auth--solo. Reuses Testo red/yellow/coffee palette.
   ========================================================================== */

.testo-auth {
    min-height: calc(100vh - 90px);
    background: #faf7f3;
    display: flex;
    align-items: stretch;
    padding: 0;
}

.testo-auth__inner {
    display: flex;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    min-height: calc(100vh - 90px);
}
.testo-auth__inner--solo {
    max-width: 720px;
    align-items: center;
    justify-content: center;
}
.testo-auth--solo {
    background: transparent;
}

.testo-auth__brand {
    flex: 1 1 50%;
    background: linear-gradient(155deg, #ce1212 0%, #4a2c20 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 50px;
    position: relative;
    overflow: hidden;
}
.testo-auth__brand::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 193, 7, 0.18) 0%, transparent 35%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.06) 0%, transparent 40%);
    pointer-events: none;
}
.testo-auth__brand-inner {
    position: relative;
    z-index: 1;
    max-width: 460px;
}
.testo-auth__logo {
    display: inline-block;
    margin-bottom: 36px;
}
.testo-auth__logo img {
    height: 56px;
    width: auto;
    filter: brightness(0) invert(1);
}
.testo-auth__headline {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 18px 0;
    color: #fff;
}
.testo-auth__sub {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 32px 0;
}
.testo-auth__bullets {
    list-style: none;
    padding: 0;
    margin: 0;
}
.testo-auth__bullets li {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.95);
    padding: 8px 0 8px 30px;
    position: relative;
}
.testo-auth__bullets li i {
    position: absolute;
    left: 0;
    top: 8px;
    color: #ffc107;
    font-size: 18px;
}

.testo-auth__form-wrap {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 40px;
    background: #ffffff;
}
.testo-auth__form-wrap--solo {
    flex: 0 0 auto;
    width: 100%;
    padding: 50px 24px;
}

.testo-auth__form-card {
    width: 100%;
    max-width: 460px;
}
.testo-auth__form-card--solo {
    text-align: center;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
    padding: 44px 36px 36px 36px;
}

.testo-auth__logo--solo {
    display: inline-block;
    margin-bottom: 22px;
}
.testo-auth__logo--solo img {
    height: 48px;
    width: auto;
}

.testo-auth__title {
    font-size: 30px;
    font-weight: 800;
    color: #4a2c20;            /* coffee-color */
    margin: 0 0 8px 0;
    line-height: 1.2;
}
.testo-auth__title--solo {
    font-size: 26px;
    margin-bottom: 12px;
}
.testo-auth__lead {
    font-size: 15px;
    color: #777;
    margin: 0 0 28px 0;
}
.testo-auth__lead--solo {
    margin-bottom: 28px;
}

.testo-auth__alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    color: #664d03;
    font-size: 14px;
    margin-bottom: 18px;
    text-align: left;
}
.testo-auth__alert i {
    color: #b58800;
    font-size: 18px;
    flex: 0 0 auto;
    line-height: 1;
    margin-top: 1px;
}
.testo-auth__alert--success { background: #d4edda; border-color: #28a745; color: #155724; }
.testo-auth__alert--success i { color: #1e7e34; }
.testo-auth__alert--error   { background: #f8d7da; border-color: #dc3545; color: #721c24; }
.testo-auth__alert--error   i { color: #b21f2d; }
.testo-auth__alert--info    { background: #d1ecf1; border-color: #17a2b8; color: #0c5460; }
.testo-auth__alert--info    i { color: #117a8b; }

.testo-auth__form { margin-top: 4px; }

.testo-auth__row {
    margin-bottom: 16px;
}
.testo-auth__row--two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 575.98px) {
    .testo-auth__row--two { grid-template-columns: 1fr; gap: 0; }
}

.testo-auth__field {
    margin-bottom: 16px;
}
.testo-auth__field label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    font-weight: 600;
    color: #4a2c20;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.testo-auth__forgot {
    font-size: 12px;
    font-weight: 500;
    color: #ce1212;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none;
}
.testo-auth__forgot:hover { color: #a00d0d; text-decoration: underline; }
.testo-auth__field input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    background: #faf7f3;
    border: 1px solid #e7dfd3;
    border-radius: 8px;
    font-size: 15px;
    color: #333;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    font-family: inherit;
}
.testo-auth__field input:focus {
    background: #fff;
    border-color: #ce1212;
    box-shadow: 0 0 0 3px rgba(206, 18, 18, 0.12);
    outline: none;
}
.testo-auth__field input::placeholder {
    color: #b0a8a0;
}

.testo-auth__check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #555;
    margin: 6px 0 20px 0;
    cursor: pointer;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
.testo-auth__check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 2px 0 0 0;
    accent-color: #ce1212;
    flex: 0 0 auto;
}
.testo-auth__check a { color: #ce1212; }
.testo-auth__check a:hover { color: #a00d0d; text-decoration: underline; }

.testo-auth__submit {
    width: 100%;
    height: 48px;
    margin: 8px 0 22px 0;
    background: #ce1212;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
    text-decoration: none;
}
.testo-auth__submit:hover {
    background: #a00d0d;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 14px rgba(206, 18, 18, 0.25);
}
.testo-auth__submit:active { transform: translateY(1px); }
.testo-auth__submit i { font-size: 16px; }

.testo-auth__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: #999;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.testo-auth__divider::before,
.testo-auth__divider::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: #ececec;
}
.testo-auth__divider span { white-space: nowrap; }

.testo-auth__social {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 22px;
}
.testo-auth__social-btn {
    height: 44px;
    border: 1px solid #e0d9cf;
    border-radius: 8px;
    background: #fff;
    color: #4a2c20;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.testo-auth__social-btn i { font-size: 16px; }
.testo-auth__social-btn:hover {
    background: #faf7f3;
    border-color: #4a2c20;
    color: #4a2c20;
    text-decoration: none;
}

.testo-auth__alt {
    font-size: 14px;
    color: #777;
    text-align: center;
    margin: 16px 0 0 0;
}
.testo-auth__alt--center { text-align: center; }
.testo-auth__alt--tight  { margin-top: 18px; padding-top: 18px; border-top: 1px solid #ececec; }
.testo-auth__alt a {
    color: #ce1212;
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
}
.testo-auth__alt a:hover { color: #a00d0d; text-decoration: underline; }

.testo-auth__check-bubble {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: rgba(206, 18, 18, 0.08);
    color: #ce1212;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px auto;
    font-size: 48px;
}
.testo-auth__check-bubble--success { background: rgba(40, 167, 69, 0.10); color: #1e7e34; }
.testo-auth__check-bubble--error   { background: rgba(220, 53, 69, 0.10);  color: #b21f2d; }

/* Responsive: stack brand panel above form on tablets/mobile */
@media (max-width: 991.98px) {
    .testo-auth__inner { flex-direction: column; }
    .testo-auth__brand {
        flex: 0 0 auto;
        padding: 40px 30px;
    }
    .testo-auth__brand-inner { max-width: 100%; text-align: center; }
    .testo-auth__bullets { display: inline-block; text-align: left; }
    .testo-auth__form-wrap { padding: 40px 24px; }
    .testo-auth__headline { font-size: 28px; }
}
@media (max-width: 575.98px) {
    .testo-auth { min-height: auto; }
    .testo-auth__inner, .testo-auth__inner--solo { min-height: auto; }
    .testo-auth__brand { padding: 30px 20px; }
    .testo-auth__headline { font-size: 24px; }
    .testo-auth__title { font-size: 24px; }
    .testo-auth__form-card--solo { padding: 30px 22px 26px 22px; }
}

/* Dark variant — only used on dark-bg pages if we ever need it */
.testo-auth--dark {
    background: #1a1410;
}
.testo-auth--dark .testo-auth__form-wrap { background: #1a1410; }
.testo-auth--dark .testo-auth__form-card { color: #fff; }
.testo-auth--dark .testo-auth__title { color: #fff; }
.testo-auth--dark .testo-auth__field label { color: #c8b9a5; }
.testo-auth--dark .testo-auth__field input { background: #2a1f17; border-color: #3a2c1f; color: #fff; }
.testo-auth--dark .testo-auth__field input:focus { background: #2a1f17; border-color: #ce1212; }

/* ==========================================================================
   Header user icon (added in the top-list <ul> next to the basket icon)
   ========================================================================== */
.testo-header-user .ico-holder { background: rgba(255, 255, 255, 0.05); }

/* ==========================================================================
   Testo — MENU-6 ("True Italian Flavor") cards
   Three changes vs. the original Testo theme:
     1. CONSTANT IMAGE HEIGHT — every card image is forced to the same
        aspect ratio (4/3) and cropped with object-fit: cover, so cards in
        a row line up regardless of the source image dimensions.
     2. CONSTANT CARD HEIGHT — the whole card row uses flexbox so every
        card has the same total height, and the .menu-6-txt body fills
        whatever's left after the image, with "Add to Cart" pinned to
        the bottom of the card.
     3. WHOLE CARD CLICKABLE — the title is a "stretched link" whose
        ::after pseudo-element covers the entire .menu-6-item, so clicking
        anywhere on the card (except the inner zoom/like/add-to-cart links,
        which are lifted above with z-index) navigates to the product
        detail page. Clicking the image goes to the detail page too.
   ========================================================================== */

/* Row + col must be flex containers so children can stretch to equal
   height. The original Testo row is just .row (no flex behaviour added). */
#menu-6 > .container > .row {
    display: flex;
    flex-wrap: wrap;
}
#menu-6 > .container > .row > [class*="col-"] {
    display: flex;
}

/* (1) Card = flex column so image height is fixed, body fills the rest. */
.menu-6-item {
    position: relative;           /* anchor for the stretched-link ::after */
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;             /* keep the zoom hover effect contained */
}

/* Constant image height. The wrapper .hover-overlay normally has
   `height: auto` which lets the image grow to its natural size. We
   override that here so the .menu-6-img keeps its 4/3 aspect ratio and
   crops the image with object-fit: cover. */
.menu-6-item .menu-6-img {
    aspect-ratio: 4 / 3;          /* locked shape — every card same height */
    width: 100%;
    flex-shrink: 0;               /* don't let flex squish the image */
    overflow: hidden;
    position: relative;
}
.menu-6-item .menu-6-img .hover-overlay {
    width: 100%;
    height: 100%;                 /* fill the 4/3 box, not the image's natural size */
    overflow: hidden;
}
.menu-6-item .menu-6-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;            /* crop instead of stretch */
    object-position: center;
    display: block;
}
/* The image is wrapped in an <a> for direct clickability. Make the link a
   block that fills the hover-overlay so the whole image area is the hit
   target. The zoom icon is z-index: 2 below, so it stays individually
   clickable. */
.menu-6-item .menu-6-img .menu-6-img-link {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
    position: relative;
    z-index: 1;                   /* below the zoom icon (z-index: 2) */
}

/* (2) Body fills the rest of the card. Add-to-cart pinned to the bottom
   so cards with shorter descriptions still align the button. */
.menu-6-item .menu-6-txt {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.menu-6-item .menu-6-txt .add-to-cart {
    margin-top: auto;
    flex-shrink: 0;
}

/* (3) Whole card is clickable via stretched-link on the title. */
.menu-6-item h5 a.stretched-link,
.menu-6-item h5 a.testo-rail__link {
    color: inherit;
    text-decoration: none;
}
.menu-6-item h5 a.stretched-link::after,
.menu-6-item h5 a.testo-rail__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;                   /* sits above the card body */
}
/* Lift the inner interactive elements above the stretched-link overlay so
   they stay individually clickable. */
.menu-6-item .menu-img-zoom a,
.menu-6-item .like-ico a,
.menu-6-item .add-to-cart a,
.testo-rail__card .add-to-cart a {
    position: relative;
    z-index: 2;
}
/* Hover affordance on the title */
.menu-6-item h5 a.stretched-link:hover,
.menu-6-item h5 a.testo-rail__link:hover {
    color: #ce1212;               /* testo red */
}

/* (3b) IMAGE LINK — the combo/drinks rails wrap the image in its own
   <a class="testo-rail__img-link"> so the photo itself is clickable
   independent of the title's stretched-link. Make the anchor fill the
   full image area. */
.testo-rail__img-link {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.testo-rail__img-link .hover-overlay {
    /* keep the hover overlay scaling effect on the image link */
    pointer-events: auto;
}

/* (4) TITLE CLAMP — every card title is one line with "…" if too long,
   so all cards in a row have the same height. Applies to BOTH the
   main MENU-6 section and the combo/drinks rails. */
.menu-6-item h5 a,
.testo-rail__title-clamp a {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.testo-rail__title-clamp {
    /* Tighten the rail title since it sits next to the price tag */
    margin: 0 0 8px 0;
    font-size: 15px;
    font-weight: 600;
    color: #4a2c20;            /* coffee-color */
}


/* ===========================================================================
   MENU-7 (menu page) — same constant-height pattern as MENU-6.
   The home page MENU-6 cards are perfectly aligned. The menu page MENU-7
   cards have a similar shape but were leaving the title/description to grow
   freely, so a 2-line description would push the box taller than a 1-line
   one. The 4 rules below mirror the MENU-6 layout:
     1. Card is a flex column so the body fills the space the image leaves.
     2. Image is locked to 4/3 aspect ratio + object-fit: cover.
     3. Title is one line with "…" if too long.
     4. Description is a 2-line clamp so a 1-line copy still occupies the
        same vertical space as a 2-line one (empty space at the bottom, not
        a shorter box). Add-to-Cart form is pinned to the bottom with
        margin-top: auto so the button is always at the same row across
        the whole grid.
   =========================================================================== */
.menu-7-item {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

/* Lock image to 4/3 like MENU-6. .menu-7-img already has padding+border; we
   add the aspect-ratio so the box height is constant regardless of source
   image. The price tag (.menu-7-price) is absolute, so it floats over the
   image regardless of the wrapper height. */
.menu-7-item .menu-7-img {
    position: relative;
    aspect-ratio: 4 / 3;
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
}
.menu-7-item .menu-7-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu-7-item .menu-7-price {
    position: absolute;
    left: 0;
    bottom: 0;
    min-width: 78px;
    padding: 8px 14px;
    background: linear-gradient(180deg, rgba(54, 27, 12, 0.92), rgba(54, 27, 12, 1));
    border-top-right-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    z-index: 2;
}
.menu-7-item .menu-7-price h5 {
    margin: 0;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.2px;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.menu-7-item .menu-7-price .price-final {
    color: #FFD23F;
    font-size: 18px;
}
.menu-7-item .menu-7-price .price-strike {
    color: #fff;
    opacity: 0.7;
    font-size: 12px;
    text-decoration: line-through;
    font-weight: 500;
}
.menu-7-item .menu-7-price .price-currency {
    color: #FFD23F;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.menu-7-item .pill--discount-pct {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #16A34A;
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Body fills the rest of the card. */
.menu-7-item .menu-7-txt {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Title is one line with ellipsis (same as MENU-6). The MENU-7 card title
   is wrapped in an <a>, so we clamp the <a> instead of the <h5>. */
.menu-7-item h5 a {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Description is a 2-line clamp. The CSS line-clamp keeps the rendered
   height constant whether the copy is 1 or 2 lines, so the Add-to-Cart
   button below sits on the same row for every card. */
.menu-7-item .menu-7-txt p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Fixed line-height so the clamp always reserves 2 rows even when the
       actual content is 1 line. 1.4em * 2 = 2.8em of vertical space. */
    min-height: 2.8em;
    line-height: 1.4em;
    margin-bottom: 15px;
}

/* Pin Add-to-Cart form to the bottom of the card. */
.menu-7-item .menu-7-cart-form {
    margin-top: auto;
}


/* ===========================================================================
   AUTH PAGES — header nav color override
   ===========================================================================
   The Testo theme's nav links default to `color: #f7f7f7` (almost white)
   because they're designed to sit on the dark slider hero on the home page.
   On the auth pages (login, register, password reset) the page background is
   a light cream (#f5f0e8 ish), and the .testo-auth section has a 2-column
   split (dark brand panel on the left, light form panel on the right). The
   header is transparent and sits over the boundary, so the white nav text
   becomes invisible on the light right half.

   Fix: when the body has a .testo-auth section, force the nav link color
   to the Testo coffee color (#4a2c20) and the cart icon to a dark color.
   The active/hover state (.navik-yellow) stays yellow so the user still
   sees where they are. Uses :has() which is supported in Chrome 105+,
   Firefox 121+, Safari 15.4+ — covers the same modern browsers the SPA
   add-to-cart flow already requires.

   We also override the cart icon color since the .flaticon-shopping-bag
   inherits the white color from the nav and would otherwise be invisible.
   =========================================================================== */

/* (1) When the body contains a .testo-auth section (login/register/reset) */
body:has(.testo-auth) .navik-menu > ul > li > a,
body:has(.testo-auth) .navik-menu > ul > li > a:hover,
body:has(.testo-auth) .navik-menu > ul > li > a:focus,
body:has(.testo-auth) .navik-menu > ul > li > a:active {
    color: #4a2c20;             /* Testo coffee color */
}

/* (2) Active / current page link keeps the brand red for contrast */
body:has(.testo-auth) .navik-menu > ul > li.current-menu > a,
body:has(.testo-auth) .navik-menu > ul > li.current_page_item > a,
body:has(.testo-auth) .navik-menu > ul > li:hover > a {
    color: #ce1212;             /* Testo red — same as the active slider dot */
}

/* (3) Cart icon and login icon — also dark on auth pages */
body:has(.testo-auth) .flaticon-shopping-bag,
body:has(.testo-auth) .flaticon-user,
body:has(.testo-auth) .basket-ico .ico-holder,
body:has(.testo-auth) .testo-header-user .ico-holder {
    color: #4a2c20;
}

/* (4) Cart badge — keep the brand red so it still pops */
body:has(.testo-auth) [data-cart-count] {
    background: #ce1212;        /* Testo red dot */
    color: #fff;
}

/* (5) Fallback for older browsers without :has() support — the
   testo-auth wrapper itself sets the color via the cascade below.
   The .testo-auth section comes AFTER the header in the DOM, so
   it can't directly style the header. We work around it by adding
   a body class from the auth view (TODO: optional future improvement
   via context variable). For now, :has() covers the modern browsers
   the SPA flow already needs. */
/* ===========================================================================
   Testo — Auth pages, browser-agnostic body class override
   ---------------------------------------------------------------------------
   The rules above use `body:has(.testo-auth)` which requires Chrome 105+,
   Firefox 121+, or Safari 15.4+. To cover older browsers (and any case where
   the user's StatReloader picked up the .html change but cached an older
   style.css), auth pages now also set `class="t-p-auth"` on the <body> via
   `{% block body_attrs %}` in templates/frontend/testo/homebase.html. These
   rules match that class directly. Specificity (0,2,0) on `body.t-p-auth .x`
   beats the default `.navik-menu ul li > a` (0,1,1) so the dark coffee color
   always wins, regardless of which selector the original Testo CSS uses.
   ========================================================================== */

/* (1) Main nav links — dark coffee color on the light cream auth background. */
body.t-p-auth .navik-menu > ul > li > a,
body.t-p-auth .navik-menu > ul > li > a:hover,
body.t-p-auth .navik-menu > ul > li > a:focus,
body.t-p-auth .navik-menu > ul > li > a:active {
    color: #4a2c20;
}

/* (2) Active / current page link keeps the brand red for contrast. */
body.t-p-auth .navik-menu > ul > li.current-menu > a,
body.t-p-auth .navik-menu > ul > li.current_page_item > a,
body.t-p-auth .navik-menu > ul > li:hover > a {
    color: #ce1212;
}

/* (3) Cart icon and login icon — also dark on auth pages. */
body.t-p-auth .flaticon-shopping-bag,
body.t-p-auth .flaticon-user,
body.t-p-auth .basket-ico .ico-holder,
body.t-p-auth .testo-header-user .ico-holder {
    color: #4a2c20;
}

/* (4) Cart badge — keep the brand red so it still pops. */
body.t-p-auth [data-cart-count] {
    background: #ce1212;
    color: #fff;
}

/* (5) Belt-and-suspenders: if the body ALSO has .testo-auth as a descendant
   (which it does on every auth page), the `:has()` rules above apply too.
   The `body.t-p-auth` rules win on specificity, so they override. */

/* ===========================================================================
   Testo — Global messages banner (homebase.html)
   ---------------------------------------------------------------------------
   The new `{% if messages %}` block in homebase.html renders generic (non
   cart-tagged) Django messages right under the header. This class is the
   container; the per-message styling is reused from the cart-page banner
   via `.testo-cart-flash`. Margin / z-index / responsive sizing so the banner
   doesn't push the page hero down on a fresh load.
   ========================================================================== */
.testo-global-messages {
    margin-top: 130px;          /* clear the fixed-transparent header (was 110) */
    margin-bottom: 0;
    z-index: 1040;              /* above the header (z-index: 1030) so the banner isn't covered */
    position: relative;
}
.testo-global-messages .testo-cart-flash {
    margin-top: 0;
    margin-bottom: 12px;
}
@media (max-width: 767.98px) {
    .testo-global-messages { margin-top: 96px; }
}
/* ===========================================================================
   Testo — Role-based header (customer dropdown, vendor/admin pill buttons)
   ---------------------------------------------------------------------------
   Added 2026-07-28 alongside the user_role_processor context processor.
   Each role gets a different control:
     - Guest              -> simple login icon (unchanged)
     - Customer           -> "Welcome [name]" + dropdown with My Orders /
                             Track Order / Profile / Logout
     - Vendor             -> "My Store" pill (links to /en/vendor/dashboard/
                             or the vendor's specific store URL)
     - Admin/SuperAdmin/  -> "Dashboard" pill (links to /en/dashboard/)
       Staff/Cashier
   All Testo brand colours (coffee #4a2c20, red #ce1212, yellow #ffc107,
   cream #f5f0e8). Matches the existing navik-menu visual language so the
   auth header doesn't look bolted on.
   ========================================================================== */

/* (1) Customer dropdown container — sits in the nav, expands a panel below. */
.testo-header-user-dropdown {
    position: relative;
    display: inline-block;
}
.testo-header-user__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    height: 56px;             /* match .navik-menu li > a height */
    color: #f7f7f7;           /* default — overridden on .t-p-auth pages */
    font-family: 'Oswald', sans-serif;
    font-size: 1.095rem;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    text-decoration: none;
}
.testo-header-user__toggle:hover,
.testo-header-user__toggle:focus,
.testo-header-user__toggle:active {
    color: #ce1212;           /* hover matches navik-yellow hover state */
    text-decoration: none;
}
.testo-header-user__greeting {
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;     /* "Welcome" is sentence-case, not UPPER */
}
.testo-header-user__greeting strong {
    font-weight: 700;
    margin-left: 2px;
    color: inherit;
}
.testo-header-user__caret {
    font-size: 0.75rem;
    transition: transform .15s ease-in-out;
    color: inherit;
}
.testo-header-user-dropdown.is-open .testo-header-user__caret {
    transform: rotate(180deg);
}
.testo-header-user__toggle .ico-holder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: inherit;
}
.testo-header-user__toggle .flaticon-user {
    font-size: 1.05rem;
}

/* (2) Dropdown panel — slides in below the toggle, anchored to the right of
   the header (so it doesn't overflow on tablet). On auth pages with
   `body.t-p-auth` the text color overrides the default white. */
.testo-header-user__menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 240px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
    border: 1px solid rgba(0, 0, 0, .06);
    padding: 8px 0;
    z-index: 10000;
    font-family: 'Roboto', sans-serif;
    text-align: left;
}
.testo-header-user-dropdown.is-open .testo-header-user__menu {
    display: block;
    animation: testo-user-menu-in .18s ease-out;
}
@keyframes testo-user-menu-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.testo-header-user__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    color: #4a2c20;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}
.testo-header-user__item i {
    width: 18px;
    flex: 0 0 18px;
    font-size: 16px;
    color: #4a2c20;
    opacity: .7;
    transition: opacity .12s ease, color .12s ease;
}
.testo-header-user__item:hover,
.testo-header-user__item:focus {
    background: #faf7f3;
    color: #ce1212;
    text-decoration: none;
}
.testo-header-user__item:hover i,
.testo-header-user__item:focus i {
    color: #ce1212;
    opacity: 1;
}
.testo-header-user__item--danger {
    color: #b21f2d;
}
.testo-header-user__item--danger i {
    color: #b21f2d;
    opacity: 1;
}
.testo-header-user__item--danger:hover,
.testo-header-user__item--danger:focus {
    background: #fff5f5;
    color: #a00d0d;
}
.testo-header-user__item--danger:hover i,
.testo-header-user__item--danger:focus i {
    color: #a00d0d;
}
.testo-header-user__divider {
    height: 1px;
    margin: 6px 0;
    background: #ececec;
}

/* (3) Vendor / Admin / Staff pill — visible "I have a dashboard" button.
   The pill sits inline in the nav. A small logout icon hangs off the right
   edge so vendor/admin doesn't need to open a dropdown to sign out. */
.testo-header-vendor,
.testo-header-admin {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    line-height: 1;                /* override the parent <ul>'s line-height so the flex container is exactly the button height (no extra leading) */
    /* vertical-align: baseline (default) — the <li> sits on the same baseline
       as the HOME/MENU <a> items, so the visible button (38px) lands on the
       same horizontal line as the cart icon and the nav text. The previous
       `vertical-align: middle` was centering the 38px pill inside the 80px
       line-box, which pushed it ABOVE the nav text (the user's screenshot). */
}

/* (2b) The default `.navik-menu > ul` in menu.css has `font-size: 0` (no
   inherent line-height); the line-box is driven by the tallest <a> inside
   (`.navik-menu > ul > li > a` has `height: 80px; line-height: 80px;` from
   menu.css:1905). The pill is 38px tall and uses the default
   `vertical-align: baseline` — it sits at the BOTTOM of that 80px line-box,
   which is exactly where the nav text and the cart icon sit. No additional
   override is needed; the baseline alignment naturally lines everything up
   because the cart icon's <a> and the nav text's <a> are also baseline-
   aligned. */
.testo-header-vendor__btn,
.testo-header-admin__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    background: #ce1212;       /* Testo red — high-visibility action */
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .15s ease, transform .05s ease;
    box-shadow: 0 2px 6px rgba(206, 18, 18, .25);
}
.testo-header-vendor__btn:hover,
.testo-header-admin__btn:hover {
    background: #a00d0d;
    color: #fff;
    text-decoration: none;
}
.testo-header-vendor__btn:active,
.testo-header-admin__btn:active {
    transform: translateY(1px);
}
.testo-header-vendor__btn i,
.testo-header-admin__btn i {
    font-size: 1.05rem;
}

/* (3a) Specificity fix — the navik rules above target
   `#header-3 .navik-menu ul li > a` at (1,1,3), which is MORE specific
   than our plain `.testo-header-admin__btn` (0,1,0). That gives us:
     - display: block           (button stretches full row width)
     - font-size: 18px          (text is huge)
     - padding: 16px 16px       (button is super tall)
   To win the cascade we mirror the navik selector with the
   `.testo-header-admin__btn` class added — that pushes us to (1,2,3)
   and re-asserts our intended SIZE. Colors (red vs coffee on auth
   page) are left to the existing `.testo-header-admin__btn` rule +
   the `body.t-p-auth` variant further down. */
#header-3 .navik-menu ul li > a.testo-header-vendor__btn,
#header-3 .navik-menu ul li > a.testo-header-admin__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    font-family: 'Oswald', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
}

/* (3b) Same specificity battle for the LOGOUT icon — without this
   override, the navik `display: block` rule wins and the logout
   `<a>` wraps to a NEW LINE below the button. That makes the <li>
   70px tall (38 + 32) and `vertical-align: middle` would push the
   whole 70px box to the middle of the 80px line-box, leaving the
   VISIBLE button near the top of the <li> and the logout half-
   hidden behind the dark image below. Pushing to (1,2,3) makes the
   logout sit on the SAME line as the button. */
#header-3 .navik-menu ul li > a.testo-header-vendor__logout,
#header-3 .navik-menu ul li > a.testo-header-admin__logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: inherit;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.testo-header-vendor__logout,
.testo-header-admin__logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: inherit;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.testo-header-vendor__logout:hover,
.testo-header-admin__logout:hover {
    background: rgba(255, 255, 255, .28);
    color: #fff;
    text-decoration: none;
}
.testo-header-vendor__logout i,
.testo-header-admin__logout i {
    font-size: 0.95rem;
    line-height: 1;
}

/* (4) Auth pages (`body.t-p-auth`) — the toggle / pill colors flip so the
   same controls are visible on the light cream background. */
body.t-p-auth .testo-header-user__toggle,
body.t-p-auth .testo-header-user__caret {
    color: #4a2c20;
}
body.t-p-auth .testo-header-user__toggle:hover,
body.t-p-auth .testo-header-user__toggle:focus,
body.t-p-auth .testo-header-user__toggle:active {
    color: #ce1212;
}
body.t-p-auth .testo-header-vendor__btn,
body.t-p-auth .testo-header-admin__btn {
    background: #4a2c20;        /* coffee on light bg — high contrast */
    color: #fff;
    box-shadow: 0 2px 6px rgba(74, 44, 32, .25);
}
body.t-p-auth .testo-header-vendor__btn:hover,
body.t-p-auth .testo-header-admin__btn:hover {
    background: #2c1a12;
}
body.t-p-auth .testo-header-vendor__logout,
body.t-p-auth .testo-header-admin__logout {
    background: rgba(74, 44, 32, .12);
    color: #4a2c20;
}
body.t-p-auth .testo-header-vendor__logout:hover,
body.t-p-auth .testo-header-admin__logout:hover {
    background: rgba(74, 44, 32, .22);
    color: #4a2c20;
}

/* (5) Responsive — on small screens, the greeting + label collapse to just
   the icon so the nav doesn't overflow. The dropdown panel still opens. */
@media (max-width: 991.98px) {
    .testo-header-user__greeting,
    .testo-header-vendor__btn span,
    .testo-header-admin__btn span {
        display: none;
    }
    .testo-header-user__toggle {
        padding: 0 6px;
    }
    .testo-header-user__menu {
        right: -8px;
    }
}
@media (max-width: 575.98px) {
    .testo-header-vendor__logout,
    .testo-header-admin__logout {
        display: none;            /* on phones, the dropdown's Logout item is enough */
    }
}
/* ===========================================================================
   Testo — Customer mini-dashboard (Phase 17)
   ---------------------------------------------------------------------------
   The 2-column sidebar layout used by /customer/dashboard/, /customer/orders/,
   /customer/track/, /customer/change-password/, /customer/addresses/,
   /customer/wishlist/, /customer/wallet/, /customer/refunds/. All
   components share the .testo-cdash- prefix (BEM-ish naming for the
   customer dashboard) and live inside the .testo-customer-dashboard section
   wrapper from `_dashboard_base.html`.
   =========================================================================== */

.testo-customer-dashboard {
    background: #faf7f3;
    min-height: 70vh;
    padding-top: 110px;
}

.project-keywords {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}
.project-keywords__label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8a7a6e;
    margin-right: 4px;
}
.project-keywords__chip {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: #faf7f3;
    border: 1px solid #ececec;
    color: #4a2c20;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}
.project-keywords__chip--focus {
    background: #ce1212;
    border-color: #ce1212;
    color: #fff;
}
.project-keywords__chip--alt {
    background: #fff;
    border-color: #ddd;
    color: #6b5b50;
}
.project-description {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f0e8df;
    color: #4a2c20;
    font-size: 15px;
    line-height: 1.6;
    max-width: 560px;
}
.project-description p {
    margin: 0 0 10px;
}
.project-description p:last-child {
    margin-bottom: 0;
}
.t-p-auth .testo-cdash-sidebar {
    margin-top: 0;
    padding-top: 8px;
}

body.t-p-auth .breadcrumb-section .page-title h2 {
    font-size: 18px;
    font-weight: 600;
    color: #4a2c20;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

body.t-p-auth .breadcrumb-section {
    padding: 14px 0;
    background: #faf7f3;
}

/* (1) Sidebar — left column */
.testo-cdash-sidebar {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 18px rgba(74, 44, 32, .06);
    border: 1px solid #ececec;
    padding: 26px 18px;
    position: sticky;
    top: 100px;                     /* below the fixed header */
}

.testo-cdash-user {
    text-align: center;
    padding: 0 0 22px;
    border-bottom: 1px solid #f0eae0;
    margin-bottom: 16px;
}
.testo-cdash-avatar {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    margin: 0 auto 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #4a2c20, #ce1212);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(74, 44, 32, .18);
}
.testo-cdash-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.testo-cdash-avatar__initial {
    font-size: 36px;
    font-weight: 800;
    font-family: 'Oswald', sans-serif;
}
.testo-cdash-user__name {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: #4a2c20;
}
.testo-cdash-user__email {
    margin: 0;
    font-size: 12px;
    color: #8a7a6e;
    word-break: break-all;
}

/* (2) Sidebar nav */
.testo-cdash-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.testo-cdash-nav__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    color: #4a2c20;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
    border-left: 3px solid transparent;
}
.testo-cdash-nav__item i {
    font-size: 18px;
    width: 22px;
    flex: 0 0 22px;
    text-align: center;
    color: #8a7a6e;
    transition: color .12s ease;
}
.testo-cdash-nav__item:hover,
.testo-cdash-nav__item:focus {
    background: #faf7f3;
    color: #ce1212;
    text-decoration: none;
}
.testo-cdash-nav__item:hover i,
.testo-cdash-nav__item:focus i {
    color: #ce1212;
}
.testo-cdash-nav__item.is-active {
    background: rgba(206, 18, 18, .08);
    color: #ce1212;
    border-left-color: #ce1212;
    font-weight: 600;
}
.testo-cdash-nav__item.is-active i {
    color: #ce1212;
}
.testo-cdash-nav__item--danger {
    color: #b21f2d;
    margin-top: 8px;
}
.testo-cdash-nav__item--danger i {
    color: #b21f2d;
}
.testo-cdash-nav__item--danger:hover,
.testo-cdash-nav__item--danger:focus {
    background: #fff5f5;
    color: #a00d0d;
}
.testo-cdash-nav__divider {
    height: 1px;
    background: #f0eae0;
    margin: 14px 0 8px;
}
.testo-cdash-nav__group-label {
    font-size: 11px;
    font-weight: 700;
    color: #8a7a6e;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0 14px 8px;
}

/* (3) Main content — right column */
.testo-cdash-main {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 18px rgba(74, 44, 32, .06);
    border: 1px solid #ececec;
    padding: 30px 28px;
    min-height: 500px;
}
.testo-cdash-page-header {
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid #f0eae0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.testo-cdash-page-actions .testo-btn {
    margin-bottom: 4px;
}
.testo-cdash-page-title {
    margin: 0 0 4px;
    font-family: 'Oswald', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #4a2c20;
    letter-spacing: 0.01em;
    line-height: 1.2;
}
.testo-cdash-page-subtitle {
    margin: 0;
    font-size: 14px;
    color: #8a7a6e;
}
.testo-cdash-page-body {
    color: #4a2c20;
}

/* (4) Stat cards row (dashboard) */
.testo-cdash-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
@media (max-width: 991.98px) {
    .testo-cdash-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .testo-cdash-stats { grid-template-columns: 1fr; }
}
.testo-cdash-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff 0%, #faf7f3 100%);
    border: 1px solid #f0eae0;
    text-decoration: none;
    color: #4a2c20;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.testo-cdash-stat-card:hover,
.testo-cdash-stat-card:focus {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(74, 44, 32, .10);
    border-color: #ce1212;
    text-decoration: none;
}
.testo-cdash-stat-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4a2c20;
    font-size: 22px;
    flex: 0 0 48px;
    background: transparent;
}
.testo-cdash-stat-card__icon--orders,
.testo-cdash-stat-card__icon--pending,
.testo-cdash-stat-card__icon--completed,
.testo-cdash-stat-card__icon--wallet {
    color: #4a2c20;
    background: transparent;
}
.testo-cdash-stat-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.testo-cdash-stat-card__label {
    font-size: 12px;
    color: #8a7a6e;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.testo-cdash-stat-card__value {
    font-size: 24px;
    font-weight: 800;
    color: #4a2c20;
    line-height: 1.1;
}

/* (5) Quicklinks row (dashboard) */
.testo-cdash-quicklinks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 28px;
}
@media (max-width: 575.98px) {
    .testo-cdash-quicklinks { grid-template-columns: 1fr; }
}
.testo-cdash-quicklink {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #faf7f3;
    color: #4a2c20;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}
.testo-cdash-quicklink i:first-child {
    color: #ce1212;
    font-size: 16px;
}
.testo-cdash-quicklink__arrow {
    margin-left: auto;
    color: #8a7a6e;
    font-size: 12px;
}
.testo-cdash-quicklink:hover,
.testo-cdash-quicklink:focus {
    background: #fff;
    color: #ce1212;
    text-decoration: none;
}
.testo-cdash-quicklink--danger {
    color: #b21f2d;
}
.testo-cdash-quicklink--danger i:first-child {
    color: #b21f2d;
}
.testo-cdash-quicklink--danger:hover,
.testo-cdash-quicklink--danger:focus {
    background: #fff5f5;
    color: #a00d0d;
}

/* (6) Section container */
.testo-cdash-section {
    background: #faf7f3;
    border-radius: 12px;
    border: 1px solid #f0eae0;
    margin-bottom: 22px;
    overflow: hidden;
}
.testo-cdash-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f0eae0;
    background: #fff;
}
.testo-cdash-section__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #4a2c20;
}
.testo-cdash-section__link {
    color: #ce1212;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.testo-cdash-section__link:hover {
    color: #a00d0d;
    text-decoration: none;
}
.testo-cdash-section__body {
    padding: 18px 20px;
}

/* (7) Table */
.testo-cdash-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.testo-cdash-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.testo-cdash-table th {
    background: #fff;
    color: #8a7a6e;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 2px solid #f0eae0;
    white-space: nowrap;
}
.testo-cdash-table td {
    padding: 12px;
    border-bottom: 1px solid #f0eae0;
    color: #4a2c20;
    vertical-align: middle;
}
.testo-cdash-table tbody tr:hover {
    background: #fff;
}
.testo-cdash-table tbody tr:last-child td {
    border-bottom: none;
}

/* (8) Status badges */
.testo-cdash-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #e0e0e0;
    color: #555;
}
.testo-cdash-badge--pending,
.testo-cdash-badge--processing,
.testo-cdash-badge--accepted  { background: #fff3cd; color: #b58800; }
.testo-cdash-badge--delivering,
.testo-cdash-badge--shipping  { background: #cfe2ff; color: #084298; }
.testo-cdash-badge--delivered,
.testo-cdash-badge--completed { background: #d4edda; color: #155724; }
.testo-cdash-badge--canceled,
.testo-cdash-badge--cancelled { background: #f8d7da; color: #721c24; }
.testo-cdash-badge--refunded  { background: #d1ecf1; color: #0c5460; }
.testo-cdash-badge--paid      { background: #d4edda; color: #155724; }
.testo-cdash-badge--unpaid,
.testo-cdash-badge--pending_payment { background: #f8d7da; color: #721c24; }

/* (9) Payment status */
.testo-cdash-payment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #8a7a6e;
}
.testo-cdash-payment--paid { color: #155724; }
.testo-cdash-payment--paid i { color: #28a745; }
.testo-cdash-payment--unpaid { color: #721c24; }

/* (10) Status filter chips (orders page) */
.testo-cdash-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid #f0eae0;
}
.testo-cdash-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #faf7f3;
    color: #4a2c20;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.testo-cdash-filter:hover {
    background: #fff;
    color: #ce1212;
    text-decoration: none;
}
.testo-cdash-filter.is-active {
    background: #ce1212;
    color: #fff;
    border-color: #ce1212;
}
.testo-cdash-filter__count {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .08);
    font-size: 11px;
    font-weight: 700;
}
.testo-cdash-filter.is-active .testo-cdash-filter__count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* (11) Search bar (track page) */
.testo-cdash-search {
    margin-bottom: 22px;
}
.testo-cdash-search__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #4a2c20;
    margin-bottom: 8px;
}
.testo-cdash-search__row {
    display: flex;
    gap: 8px;
}
.testo-cdash-search__input {
    flex: 1 1 auto;
    height: 46px;
    padding: 0 16px;
    border: 1px solid #e0d9cf;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    color: #4a2c20;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.testo-cdash-search__input:focus {
    border-color: #ce1212;
    box-shadow: 0 0 0 3px rgba(206, 18, 18, .12);
    outline: none;
}

/* (12) Vertical timeline (track page) */
.testo-cdash-timeline {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    position: relative;
}
.testo-cdash-timeline::before {
    content: '';
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 15px;
    width: 2px;
    background: #f0eae0;
}
.testo-cdash-timeline li {
    position: relative;
    padding: 0 0 22px 50px;
    min-height: 40px;
}
.testo-cdash-timeline li:last-child { padding-bottom: 0; }
.testo-cdash-timeline__dot {
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #faf7f3;
    border: 2px solid #e0d9cf;
    color: #8a7a6e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 1;
}
.testo-cdash-timeline li.is-active .testo-cdash-timeline__dot {
    background: #ffc107;
    color: #4a2c20;
    border-color: #ffc107;
    animation: testo-cdash-pulse 1.6s ease-in-out infinite;
}
.testo-cdash-timeline li.is-done .testo-cdash-timeline__dot {
    background: #28a745;
    color: #fff;
    border-color: #28a745;
}
.testo-cdash-timeline__body h5 {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 600;
    color: #4a2c20;
}
.testo-cdash-timeline li.is-active .testo-cdash-timeline__body h5 { color: #b58800; }
.testo-cdash-timeline li.is-done .testo-cdash-timeline__body h5 { color: #155724; }
.testo-cdash-timeline__body p {
    margin: 0;
    font-size: 13px;
}
@keyframes testo-cdash-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, .4); }
    50%      { box-shadow: 0 0 0 8px rgba(255, 193, 7, 0); }
}

/* (13) Track summary strip */
.testo-cdash-track-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 16px;
    background: #fff;
    border: 1px solid #f0eae0;
    border-radius: 10px;
    margin-bottom: 18px;
}
@media (max-width: 767.98px) {
    .testo-cdash-track-summary { grid-template-columns: repeat(2, 1fr); }
}
.testo-cdash-track-summary > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.testo-cdash-muted {
    font-size: 12px;
    color: #8a7a6e;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.testo-cdash-muted-sm {
    font-size: 12px;
    color: #8a7a6e;
}

/* (14) 2-column layout (order detail) */
.testo-cdash-2col {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 22px;
}
@media (max-width: 991.98px) {
    .testo-cdash-2col { grid-template-columns: 1fr; }
}
.testo-cdash-2col__main { min-width: 0; }
.testo-cdash-2col__side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* (15) Right-side card (summary, payment, address) */
.testo-cdash-card {
    background: #faf7f3;
    border: 1px solid #f0eae0;
    border-radius: 10px;
    padding: 16px 18px;
}
.testo-cdash-card__title {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #4a2c20;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0eae0;
}
.testo-cdash-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
    color: #4a2c20;
    gap: 8px;
}
.testo-cdash-card__row--total {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid #f0eae0;
    font-size: 16px;
    font-weight: 700;
}
.testo-cdash-card__address {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #4a2c20;
}
.testo-cdash-card--featured {
    background: linear-gradient(135deg, #4a2c20, #2c1a12);
    color: #fff;
    border: none;
}
.testo-cdash-card--featured .testo-cdash-card__title,
.testo-cdash-card--featured .testo-cdash-card__label,
.testo-cdash-card--featured .testo-cdash-card__hint {
    color: #fff;
    border-color: rgba(255, 255, 255, .18);
}
.testo-cdash-card--featured .testo-cdash-card__title { color: #ffc107; }
.testo-cdash-card__label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: .7;
}
.testo-cdash-card__big-number {
    font-family: 'Oswald', sans-serif;
    font-size: 36px;
    font-weight: 800;
    margin: 6px 0 10px;
}
.testo-cdash-card__big-number span {
    font-size: 16px;
    opacity: .7;
}
.testo-cdash-card__hint {
    font-size: 12px;
    margin: 0;
    opacity: .7;
}
.testo-cdash-pos { color: #1e7e34; }
.testo-cdash-neg { color: #b21f2d; }

/* (16) Order item row */
.testo-cdash-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.testo-cdash-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    background: #fff;
    border: 1px solid #f0eae0;
    border-radius: 8px;
}
.testo-cdash-item__img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background: #faf7f3;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 60px;
    color: #8a7a6e;
}
.testo-cdash-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.testo-cdash-item__body {
    flex: 1 1 auto;
    min-width: 0;
}
.testo-cdash-item__title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #4a2c20;
    text-decoration: none;
    margin-bottom: 2px;
}
.testo-cdash-item__title:hover { color: #ce1212; }
.testo-cdash-item__price {
    text-align: right;
    font-size: 14px;
    color: #4a2c20;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

/* (17) Generic list (refunds, shipping log) */
.testo-cdash-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.testo-cdash-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #f0eae0;
    border-radius: 8px;
    font-size: 13px;
    color: #4a2c20;
}
.testo-cdash-list__label {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.testo-cdash-list__date {
    color: #8a7a6e;
    font-size: 12px;
    flex: 0 0 auto;
}
.testo-cdash-list--clickable li { padding: 0; }
.testo-cdash-list__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    width: 100%;
    color: #4a2c20;
    text-decoration: none;
}
.testo-cdash-list__link:hover {
    background: #faf7f3;
    color: #ce1212;
    text-decoration: none;
}
.testo-cdash-list__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #faf7f3;
    color: #ce1212;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
}
.testo-cdash-list__arrow {
    margin-left: auto;
    color: #8a7a6e;
}
.testo-cdash-list__link:hover .testo-cdash-list__arrow { color: #ce1212; }

/* (18) Address book card */
.testo-cdash-address-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (max-width: 767.98px) {
    .testo-cdash-address-grid { grid-template-columns: 1fr; }
}
.testo-cdash-address-card {
    position: relative;
    background: #fff;
    border: 1px solid #f0eae0;
    border-radius: 10px;
    padding: 18px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.testo-cdash-address-card.is-default {
    border-color: #28a745;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, .12);
}
.testo-cdash-address-card__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #28a745;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.testo-cdash-address-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.testo-cdash-address-card__head i {
    color: #ce1212;
    font-size: 22px;
}
.testo-cdash-address-card__head h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #4a2c20;
}
.testo-cdash-address-card__contact {
    margin: 0 0 8px;
    font-size: 14px;
    color: #4a2c20;
}
.testo-cdash-address-card__line {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.5;
    color: #8a7a6e;
}
.testo-cdash-address-card__phone {
    margin: 0 0 12px;
    font-size: 13px;
    color: #4a2c20;
}
.testo-cdash-address-card__phone i {
    color: #ce1212;
    margin-right: 6px;
}
.testo-cdash-address-card__actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0eae0;
}

/* (19) Wishlist card */
.testo-cdash-wishlist-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 991.98px) { .testo-cdash-wishlist-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .testo-cdash-wishlist-grid { grid-template-columns: 1fr; } }
.testo-cdash-wishlist-card {
    background: #fff;
    border: 1px solid #f0eae0;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.testo-cdash-wishlist-card__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #faf7f3;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a7a6e;
}
.testo-cdash-wishlist-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.testo-cdash-wishlist-card__body {
    padding: 12px 14px;
}
.testo-cdash-wishlist-card__title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #4a2c20;
    text-decoration: none;
    margin-bottom: 4px;
}
.testo-cdash-wishlist-card__title:hover { color: #ce1212; }
.testo-cdash-wishlist-card__price {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #ce1212;
}
.testo-cdash-wishlist-card__actions {
    padding: 0 14px 14px;
}

/* (20) Forms (change password) */
.testo-cdash-form__row {
    margin-bottom: 18px;
}
.testo-cdash-form__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #4a2c20;
    margin-bottom: 6px;
}
.testo-cdash-form__input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid #e0d9cf;
    border-radius: 8px;
    font-size: 14px;
    color: #4a2c20;
    background: #fff;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.testo-cdash-form__input:focus {
    border-color: #ce1212;
    box-shadow: 0 0 0 3px rgba(206, 18, 18, .12);
    outline: none;
}
.testo-cdash-form__hint {
    display: block;
    font-size: 12px;
    color: #8a7a6e;
    margin-top: 4px;
}
.testo-cdash-form__actions {
    display: flex;
    gap: 8px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #f0eae0;
}

/* (21) Buttons (Testo style) */
.testo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
    background: transparent;
    color: #4a2c20;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease, transform .05s ease;
    font-family: inherit;
}
.testo-btn:hover, .testo-btn:focus { text-decoration: none; }
.testo-btn:active { transform: translateY(1px); }
.testo-btn--primary {
    background: #ce1212;
    color: #fff;
    border-color: #ce1212;
}
.testo-btn--primary:hover, .testo-btn--primary:focus {
    background: #a00d0d;
    color: #fff;
    border-color: #a00d0d;
}
.testo-btn--outline {
    background: transparent;
    color: #4a2c20;
    border-color: #d8cfc1;
}
.testo-btn--outline:hover, .testo-btn--outline:focus {
    background: #faf7f3;
    color: #ce1212;
    border-color: #ce1212;
}
.testo-btn--danger {
    background: #b21f2d;
    color: #fff;
    border-color: #b21f2d;
}
.testo-btn--danger:hover, .testo-btn--danger:focus {
    background: #a00d0d;
}
.testo-btn--sm { padding: 6px 14px; font-size: 12px; }

/* (22) Action bar (row of buttons above a section) */
.testo-cdash-actions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0eae0;
}

/* (23) Empty state */
.testo-cdash-empty {
    text-align: center;
    padding: 60px 20px;
    color: #8a7a6e;
}
.testo-cdash-empty--lg { padding: 80px 20px; }
.testo-cdash-empty--sm { padding: 30px 20px; }
.testo-cdash-empty i {
    display: block;
    font-size: 48px;
    color: #d8cfc1;
    margin-bottom: 12px;
}
.testo-cdash-empty h3 {
    margin: 0 0 6px;
    font-size: 18px;
    color: #4a2c20;
}
.testo-cdash-empty p {
    margin: 0 0 18px;
    font-size: 14px;
}

/* (24) Profile page */
.t-p-auth .testo-cdash-profile {
    max-width: 720px;
}
.t-p-auth .testo-cdash-profile .testo-cdash-h2 {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #4a2c20;
}
.t-p-auth .testo-cdash-profile .testo-cdash-lede {
    margin: 0 0 24px;
    color: #6b5b50;
    font-size: 14px;
}
.t-p-auth .testo-cdash-flash {
    margin-bottom: 18px;
    border-radius: 8px;
    border: 1px solid #ececec;
    background: #fff;
}
.t-p-auth .testo-cdash-profile__form {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    box-shadow: 0 2px 18px rgba(74, 44, 32, .06);
    padding: 26px;
}
.t-p-auth .testo-cdash-profile__avatar-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid #f0e8df;
}
.t-p-auth .testo-cdash-profile__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: #faf7f3;
    border: 1px solid #ececec;
    flex: 0 0 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.t-p-auth .testo-cdash-profile__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.t-p-auth .testo-cdash-profile__avatar-placeholder {
    font-size: 26px;
    font-weight: 800;
    color: #4a2c20;
    letter-spacing: 0.04em;
}
.t-p-auth .testo-cdash-profile__avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    min-width: 0;
}
.t-p-auth .testo-cdash-profile__avatar-hint {
    font-size: 12px;
    color: #8a7a6e;
}
.t-p-auth .testo-cdash-profile__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 22px;
}
@media (max-width: 599.98px) {
    .t-p-auth .testo-cdash-profile__grid { grid-template-columns: 1fr; }
}
.t-p-auth .testo-cdash-profile__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.t-p-auth .testo-cdash-profile__field label {
    font-size: 13px;
    font-weight: 600;
    color: #4a2c20;
}
.t-p-auth .testo-cdash-profile__field .form-control {
    height: 44px;
    border-radius: 8px;
    border: 1px solid #e3dcd2;
    background: #fff;
    padding: 0 14px;
    font-size: 14px;
    color: #2b211b;
}
.t-p-auth .testo-cdash-profile__field .form-control:focus {
    border-color: #ce1212;
    box-shadow: 0 0 0 3px rgba(206, 18, 18, .12);
    outline: 0;
}
.t-p-auth .testo-cdash-profile__actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid #f0e8df;
    flex-wrap: wrap;
}

/* (24a) Address-add — map + locate button (reuses .testo-cdash-profile chrome) */
.t-p-auth .testo-cdash-profile__field--full {
    grid-column: 1 / -1;
}
.t-p-auth .testo-cdash-profile__hint {
    margin: 0 0 10px;
    color: #6b5b50;
    font-size: 13px;
}
.t-p-auth .parity-locate-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin: 6px 0 12px;
}
.t-p-auth .parity-locate-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid #ce1212;
    background: #ce1212;
    color: #fff;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, opacity .15s ease, transform .05s ease;
}
.t-p-auth .parity-locate-btn:hover { background: #b30f0f; }
.t-p-auth .parity-locate-btn:active { transform: translateY(1px); }
.t-p-auth .parity-locate-btn.is-busy { opacity: .7; cursor: progress; }
.t-p-auth .parity-locate-btn i { font-size: 13px; }
.t-p-auth .parity-locate-status {
    font-size: 12px;
    color: #6b5b50;
}
.t-p-auth .parity-locate-status[data-tone="good"] { color: #166534; }
.t-p-auth .parity-locate-status[data-tone="bad"] { color: #b91c1c; }
.t-p-auth .parity-address-map {
    width: 100%;
    height: 360px;
    border-radius: 8px;
    background: #e5e5e5;
    overflow: hidden;
    position: relative;
    cursor: crosshair;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    touch-action: none;
    border: 1px solid #ececec;
}
.t-p-auth .parity-map-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    text-align: center;
    color: #888;
    background: rgba(245, 245, 245, .92);
    pointer-events: none;
    z-index: 2;
}

/* (24b) Header safe-area on customer-area pages (extends .testo-cdash already at 110px) */
body.t-p-auth .testo-customer-dashboard.section-b-space {
    padding-top: 110px;
}

/* (24) Pagination */
.testo-cdash-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #f0eae0;
}
.testo-cdash-pagination__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: #fff;
    color: #4a2c20;
    border: 1px solid #d8cfc1;
    border-radius: 6px;
    font-size: 13px;
    text-decoration: none;
}
.testo-cdash-pagination__link:hover {
    background: #faf7f3;
    color: #ce1212;
    border-color: #ce1212;
    text-decoration: none;
}
.testo-cdash-pagination__info {
    font-size: 13px;
    color: #8a7a6e;
}

/* (25) Alerts (form messages) */
.testo-cdash-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 12px;
}
.testo-cdash-alert--success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.testo-cdash-alert--error,
.testo-cdash-alert--danger  { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.testo-cdash-alert--warning { background: #fff3cd; color: #b58800; border: 1px solid #ffeeba; }
.testo-cdash-alert--info    { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }

/* (26) Tips list (change password page) */
.testo-cdash-tips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.testo-cdash-tips li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #4a2c20;
}
.testo-cdash-tips li i { color: #28a745; }
.testo-cdash-tips li i.bi-x-lg { color: #b21f2d; }

/* (27) Mobile-only order card (orders page on phone) */
.testo-cdash-mobile-orders {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.testo-cdash-order-card {
    background: #fff;
    border: 1px solid #f0eae0;
    border-radius: 10px;
    padding: 14px;
}
.testo-cdash-order-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0eae0;
}
.testo-cdash-order-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: #4a2c20;
    margin-bottom: 10px;
}
.testo-cdash-order-card__body > div {
    display: flex;
    justify-content: space-between;
}
.testo-cdash-order-card__body > div span { color: #8a7a6e; }
.testo-cdash-order-card__actions {
    display: flex;
    gap: 6px;
}
.testo-cdash-order-card__actions .testo-btn { flex: 1; }

/* (28) Tag (pre-order marker on orders) */
.testo-cdash-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    background: #fff3cd;
    color: #b58800;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

/* (29) H4 inside dashboard */
.testo-cdash-h4 {
    margin: 22px 0 12px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #8a7a6e;
    letter-spacing: 0.04em;
}

/* (30) Row actions (icon buttons) */
.testo-cdash-row-actions {
    display: inline-flex;
    gap: 4px;
    justify-content: flex-end;
}
.testo-cdash-link {
    color: #4a2c20;
    text-decoration: none;
    font-size: 14px;
    padding: 4px 6px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}
.testo-cdash-link:hover {
    background: #faf7f3;
    color: #ce1212;
    text-decoration: none;
}

/* (31) Responsive — on phones the sidebar becomes a horizontal scroll nav */
@media (max-width: 767.98px) {
    .testo-cdash-sidebar {
        position: static;
        padding: 18px 14px;
    }
    .testo-cdash-user { display: flex; align-items: center; gap: 14px; padding: 0 0 14px; text-align: left; }
    .testo-cdash-avatar { width: 56px; height: 56px; margin: 0; flex: 0 0 56px; }
    .testo-cdash-user__info { flex: 1; }
    .testo-cdash-nav {
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }
    .testo-cdash-nav__item {
        flex: 0 0 auto;
        border-left: none;
        border-bottom: 3px solid transparent;
        padding: 8px 12px;
    }
    .testo-cdash-nav__item.is-active {
        border-left: none;
        border-bottom-color: #ce1212;
    }
    .testo-cdash-nav__divider,
    .testo-cdash-nav__group-label { display: none; }
    .testo-cdash-nav__item--danger { margin-top: 0; }
    .testo-cdash-main { padding: 22px 18px; }
    .testo-cdash-page-title { font-size: 22px; }
    .testo-cdash-actions-bar .testo-btn { flex: 1; }
}