/*

Phola Water (PTY) Ltd

https://afterwavetechs.co.za/

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. impact badge
06. banner
07. features
08. testimonials
09. contact
10. footer
11. preloader
12. search
13. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");

/* ---------------------------------------------
reset
--------------------------------------------- 
*/
html {
  scroll-behavior: smooth;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

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

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 25px;
  color: #333333;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Montserrat', sans-serif;
}

::selection {
  background: #87CEEB;
  color: #fff;
}

::-moz-selection {
  background: #87CEEB;
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

/* --- Refreshing Button with Depth --- */
.main-white-button a {
    background-color: #87CEEB !important; /* Sky Blue */
    color: #FFFFFF !important;
    padding: 14px 30px;
    border-radius: 10px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    display: inline-block;
    transition: all 0.3s ease;
    border: none;
    
    /* The Shadow: A mix of the blue glow and a dark base */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), 
                0 0 20px rgba(135, 206, 235, 0.4); 
}

/* Hover Effect: The button "lifts" and the shadow grows */
.main-white-button a:hover {
    transform: translateY(-3px);
    background-color: #333333 !important; /* Charcoal on hover */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 
                0 0 30px rgba(135, 206, 235, 0.2);
    color: #87CEEB !important; /* Blue text on charcoal */
}

/* Active State: When clicked, it "pushes" down */
.main-white-button a:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.main-text-button a {
  font-size: 13px;
  color: #fff;
  font-weight: 600;
  transition: all .3s;
}

.main-text-button a:hover {
  opacity: 0.9;
}

.section-heading h6 {
  position: relative;
  font-size: 15px;
  color: #333333;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding-left: 0;
}

.section-heading h2 {
  line-height: 40px;
  margin-top: 20px;
  margin-bottom: 25px; 
  font-size: 30px;
  font-weight: 900;
  color: #333333;
}


/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.background-header {
  background-color: #D1D5DB;
  height: 80px!important;
  position: fixed!important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #333333!important;
}

.background-header .main-nav .nav li:hover a {
  color: #87CEEB!important;
}

.background-header .nav li a.active {
  color: #87CEEB!important;
}

.header-area {
  background-color: #fff;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 100px;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height: 100px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.background-header .main-nav .logo {
  line-height: 75px;
}

.background-header .nav {
  margin-top: 20px !important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 15px;
  padding-right: 15px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 600;
  font-size: 15px;
  color: #333333;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li a {
  color: #333333;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #87CEEB!important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #87CEEB!important;
  opacity: 1;
}

.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 30px;
}

.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #333333;
  position: absolute;
  right: 18px;
  top: 12px;
}

.background-header .main-nav .nav li.submenu:after {
  color: #333333;
}

.header-area .main-nav .nav li.submenu ul {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 50px;
  opacity: 0;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.header-area .main-nav .nav li.submenu ul li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.submenu ul li a {
  opacity: 1;
  display: block;
  background: #D1D5DB;
  color: #333333!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.submenu ul li a:hover {
  background: #fff;
  color: #87CEEB!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.submenu ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.submenu:hover ul {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #333333;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #333333;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #333333;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #333333;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #333333;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #333333;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #333333;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #87CEEB;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo {
    color: #333333;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #87CEEB!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #fff;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  @media (max-width: 767px) {
  /* Find this specific block and update it */
  .header-area .logo {
    margin-left: 0px !important; /* Change from 30px to 0px */
    text-align: left; /* Ensures text stays left-aligned */
    padding-left: 0px; /* Gives it a tiny bit of breathing room from the edge */
  }

  /* Ensure the container isn't adding extra padding */
  .header-area .container {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #ffffff !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #87CEEB!important;
  }
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  .header-area .main-nav .nav li.submenu:after {
    color: #87CEEB;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}


/* 
---------------------------------------------
impact badge
--------------------------------------------- 
*/
.impact-badge {
    background-color: #87CEEB; /* Sky Blue */
    color: #333333; /* Charcoal */
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 700;
    display: inline-block;
    border: 2px solid #D1D5DB; /* Metallic Grey */
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 15px;
}


/* 
---------------------------------------------
whatsapp
--------------------------------------------- 
*/
/* --- WhatsApp Floating Button --- */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #87CEEB; /* Sky Blue */
    color: #333333; /* Charcoal icon */
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    animation: ripple 2s infinite;
}

.whatsapp-float:hover {
    background-color: #333333; /* Charcoal on hover */
    color: #87CEEB; /* Sky Blue icon on hover */
    transform: scale(1.1);
}

/* Ripple/Pulse Effect */
@keyframes ripple {
    0% {
        box-shadow: 0 0 0 0 rgba(135, 206, 235, 0.7);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(135, 206, 235, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(135, 206, 235, 0);
    }
}

/* Optional Tooltip */
.whatsapp-float .tooltip-text {
    visibility: hidden;
    width: 160px;
    background-color: #333333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    right: 125%; 
    bottom: 20%;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
}

.whatsapp-float:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Mobile Adjustment */
@media (max-width: 991px) {
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 25px;
    }
}


/* 
---------------------------------------------
banner
--------------------------------------------- 
*/

#top {
  padding-top: 100px;
}

#top .col-lg-5,
#top .col-lg-7 {
  padding: 0px;
}

#top .left-content {
  background-image: url(../images/top-left-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  width: 100%;
  height: 100%;
}

#top .left-content .inner-content {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
}

#top .left-content h4 {
    font-family: 'Montserrat', sans-serif; /* Clean & Professional */
    font-size: 48px;
    color: #333333;
	font-weight: 700;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.2);
}

#top .left-content h6 {
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 400;
  color: #fff;
  letter-spacing: 3px;
  margin-top: 5px;
}

#top .left-content .main-white-button  {
  margin-top: 25px;
  margin-bottom: 10px;
}

#top .left-content .main-white-button a {
  display: inline-block;
}

/* ==== Main CSS === */
.img-fill {
    width: 100%;
    height: 100%; /* Important for the slider height */
    display: block;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.img-fill img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Use 'contain' if you want to see the whole image without cropping */
    object-position: center; /* Keeps the center of the image visible */
    display: block;
}

/* Updated Slider Style for better height control */
.Modern-Slider .item .img-fill {
    height: 700px; /* Force height for desktop */
    background: #000;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.Grid1k {
  padding: 0 15px;
  max-width: 1200px;
  margin: auto;
}

.blocks-box,
.slick-slider {
  margin: 0;
  padding: 0!important;
}

.slick-slide {
  float: left /* If RTL Make This Right */ ;
  padding: 0;
}

/* ==== Slider Style === */
.Modern-Slider .item .img-fill{
  height:80%;
  max-height: 700px;
  background:#000;
}

.Modern-Slider .item .info > div{
  display:inline-block!important;
  vertical-align:middle;
}

.Modern-Slider .NextArrow {
  position:absolute;
  top:50%;
  transform: translateY(-25px);
  right:30px;
  width: 50px;
  height: 50px;
  background-color: transparent;
  border:0 none;
  line-height: 44px;
  border-radius: 50%;
  text-align:center;
  font-size: 36px;
  font-family: 'FontAwesome';
  color:transparent;
  z-index:5;
  outline: none;
  opacity: 0.3;
  transition: all .3s;
}

.Modern-Slider .NextArrow:hover {
  opacity: 1;
}

.Modern-Slider .NextArrow:before{
  content:'\f105';
}

.Modern-Slider .PrevArrow {
  position:absolute;
  top:50%;
  transform: translateY(-25px);
  left:30px;
  width: 50px;
  height: 50px;
  background-color: transparent;
  border:0 none;
  line-height: 44px;
  border-radius: 50%;
  text-align:center;
  font-size: 36px;
  font-family: 'FontAwesome';
  color:transparent;
  z-index:5;
  outline: none;
  opacity: 0.3;
  transition: all .3s;
}

.Modern-Slider .PrevArrow:hover {
  opacity: 1;
}

.Modern-Slider .PrevArrow:before{
  content:'\f104';
}

ul.slick-dots {
  display: none!important;
}

.Modern-Slider .item.slick-active{
  animation:Slick-FastSwipeIn 1s both;
}

.Modern-Slider .buttons {
  position: relative;
}

.Modern-Slider {background:#000;}


/* ==== Slick Slider Css Ruls === */
.slick-slider{position:relative;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:none}.slick-list.dragging{cursor:hand}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{position:relative;top:0;left:0;display:block}
.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left /* If RTL Make This Right */ ;height:100%;min-height:1px}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}

/* Custom Branding Colors */
.Modern-Slider .NextArrow, 
.Modern-Slider .PrevArrow {
    background-color: transparent; /* Sky Blue */
}

#top .left-content h6 {
    color: #333333; /* Charcoal */
}

/* Mobile Swap & Responsiveness */
@media (max-width: 991px) {
    #top {
        padding-top: 80px; /* Adjusted for mobile headers */
    }

    #top .left-content {
        height: 350px; /* Gives the background image height on mobile */
        background-color: #D1D5DB; /* Metallic Grey fallback */
    }

    #top .left-content .inner-content {
        width: 100%;
        text-align: center;
    }

    #top .left-content h4 {
        font-size: 36px;
    }

    /* Ensures the slider doesn't get too tall on small screens */
    .Modern-Slider .item .img-fill {
        max-height: 400px;
    }
}

/* ---------------------------------------------
Fixed Landing Shake (No Disappearing)
--------------------------------------------- */

@keyframes landingShake {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }
    30% {
        transform: translateY(0);
        opacity: 1; /* Fully visible here */
    }
    40% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    70% { transform: translateX(3px); }
    100% {
        transform: translate(0, 0);
        opacity: 1; /* Locks it to visible */
    }
}

/* Apply this to the slider container */
.main-banner.header-text {
    animation: landingShake 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    /* 'both' is stronger than 'forwards'—it maintains 0% before start and 100% after end */
}

/* Ensure the slider items themselves are visible */
.Modern-Slider .item.slick-active {
    opacity: 1 !important;
}



/* ---------------------------------------------
04. Story Section & Impact Banner
--------------------------------------------- */

#story {
    margin-top: 80px; 
    padding: 80px 0px; /* Balanced padding */
    background: #FFFFFF;
}

#story .left-text-content p strong {
    background-color: #d0f0fd;
    color: #333;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}

/* Video Holder - Moved Up */
#story .video-thumb-container {
    position: relative;
    width: 100%;
    max-width: 350px; 
    margin: 0 auto; /* Centers it in the right column */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.video-poster-img {
    width: 100%;
    display: block;
    transition: transform 0.5s ease;
}

/* Play Button Overlay */
.video-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.play-btn {
    width: 70px; /* Slightly smaller for better fit */
    height: 70px;
    background: rgba(135,206,235,0.3);
    color: rgba(250,250,250,0.5) !important;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    animation: pulse-blue 2s infinite;
}

/* 3 Images Gallery Below Video */
.story-gallery {
    max-width: 350px; /* Matches the video holder width */
    margin: 20px auto 0 auto; /* Centers gallery under video */
}

.gallery-item {
    padding: 0 5px; /* Small gap between images */
}

.gallery-item img {
    width: 100%;
    height: 100px; /* Square/Uniform look */
    object-fit: cover;
    border-radius: 10px;
    transition: all 0.3s;
}

.gallery-item img:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Pulsing Animation */
@keyframes pulse-blue {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(135, 206, 235, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 15px rgba(135, 206, 235, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(135, 206, 235, 0); }
}

@media (max-width: 991px) {
    #story .right-content {
        margin-top: 50px;
    }
}

/*
---------------------------------------------
menu
---------------------------------------------
*/

/* --- Menu Section Responsive & Zoom --- */
#menu {
    margin-top: 0px;
    background-color: #D1D5DB; 
    padding: 120px 0px;
}

.card {
    margin: 0 auto;
    width: 100%;
    height: 400px;
    overflow: hidden;
    border: 3px solid #333333;
    border-radius: 20px;
    background-color: #f7f7f7; /* Matches the photo background better than pure white */
    position: relative;
}

.card1, .card2, .card3, .card4, .card5 {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important; /* Changed from contain to cover */
    transition: transform 0.5s ease;
}

/* 3. The Zoom Trigger */
.card:hover .card1, 
.card:hover .card2, 
.card:hover .card3, 
.card:hover .card4, 
.card:hover .card5 {
    transform: scale(1.1); /* Slight zoom in on hover */
}

/* 4. Image Paths */
.card1 { background-image: url(../images/product-01.jpg); }
.card2 { background-image: url(../images/product-02.jpg); }
.card3 { background-image: url(../images/product-03.jpg); }
.card4 { background-image: url(../images/product-04.jpg); }
.card5 { background-image: url(../images/product-05.jpg); }

/* --- Carousel Arrows Styling --- */
#menu .owl-nav {
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: -80px;
}

#menu .owl-nav .owl-prev:before,
#menu .owl-nav .owl-next:before {
    font-family: 'FontAwesome';
    color: #87CEEB;
    font-size: 25px;
    font-weight: 700;
}

#menu .owl-nav .owl-prev:before { content: '\f104'; }
#menu .owl-nav .owl-next:before { content: '\f105'; }


/* ---------------------------------------------
Counters with Faded Background
--------------------------------------------- */

#counters {
    position: relative;
    padding: 100px 0;
    /* This creates the transparent/faded look over the image */
    background: linear-gradient(rgba(51, 51, 51, 0.8), rgba(51, 51, 51, 0.8)), 
                url('../images/water-background.jpg'); 
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed; /* Optional: adds a nice parallax feel */
    color: #fff;
    text-align: center;
}

#counters .count-item h2 {
    font-size: 52px;
    font-weight: 800;
    color: #87CEEB; /* Sky Blue for the numbers to pop */
    margin-bottom: 10px;
}

#counters .count-item p {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 2px;
    color: #fff;
}

/* Mobile Tweak */
@media (max-width: 767px) {
    #counters .count-item {
        margin-bottom: 40px;
    }
}

/* Adds spacing between cards when they stack on mobile */
@media (max-width: 767px) {
    #occasions .occasion-item,
    #menu .item {
        margin-bottom: 30px !important; /* Adjust 30px to your preferred gap */
    }
    
    #occasions .col-sm-6, 
    #menu .col-lg-4 {
        padding-bottom: 15px;
    }
}


/* ---------------------------------------------
Occasions / We Supply Section
--------------------------------------------- */

#occasions {
    background-color: #fbfbfb; /* Very subtle off-white back to define the cards */
    padding: 50px 0;
    text-align: center;
}

#occasions .section-heading h6 {
    color: #87CEEB; /* Sky Blue */
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}

#occasions .section-heading h2 {
    color: #333333; /* Charcoal */
    font-weight: 800;
}

#occasions .section-heading p {
    color: #666;
    max-width: 600px;
    margin: 20px auto 70px;
}

/* The White Card Style from the image */
.occasion-item {
    background: #D1D5DB;
    padding: 35px 15px;
    border-radius: 10px;
    margin-bottom: 30px;
    height: 100%; /* Keeps cards uniform in height */
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); /* Soft, premium shadow */
    transition: all 0.3s ease;
}

.occasion-item:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transform: translateY(-5px); /* Premium lift effect */
}

/* The Icon Box (was gold/beige, now sky blue) */
.occasion-item .icon-box {
    width: 65px;
    height: 65px;
    background-color: #f4fafd; /* Very faint blue background */
    color: #87CEEB; /* Sky Blue for the icon */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 20px;
}

.occasion-item h4 {
    color: #333333;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

/* Button position helper */
.margin-top-60 {
    margin-top: 60px;
}

/* Delivery Message Styling */
.delivery-message h3 {
    color: #333; /* Charcoal */
    font-weight: 800;
    margin-bottom: 10px;
    font-size: 28px;
}

.delivery-message p {
    color: #666;
    font-size: 16px;
    line-height: 1.6;
}

/* --- Phola Modern Button (matches the screenshot) --- */
.phola-modern-btn {
    display: inline-block;
    background-color: #87CEEB; /* Sky Blue - base color from image */
    color: #fff !important; /* White text for clarity */
    padding: 15px 35px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 5px; /* Clean, minimal radius from image */
    border: none;
    transition: all 0.3s ease-in-out;
    text-decoration: none !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Subtle premium shadow */
}

/* Hover effect: Turns Charcoal */
.phola-modern-btn:hover {
    background-color: #333333; /* Charcoal */
    transform: translateY(-2px); /* Slight modern lift on hover */
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

/* Clicked (Active) effect */
.phola-modern-btn:active {
    background-color: #333333; /* Charcoal */
    transform: translateY(1px); /* Pressed effect */
}

/* --- Phone Link with Charcoal Border & Hover Effect --- */
.phone-text-link {
    display: inline-block;
    padding: 13px 25px; /* Matches height of the main button */
    color: #333333; /* Charcoal text */
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none !important;
    border: 2px solid #333333; /* Charcoal Border */
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
    background-color: transparent;
}

/* Hover State: Blue background, white text */
.phone-text-link:hover {
    background-color: #87CEEB; /* Sky Blue */
    border-color: #87CEEB;     /* Border changes with background */
    color: #ffffff !important; /* White text */
    transform: translateY(-2px);
}

/* Clicked (Active) effect */
.phone-text-link:active {
    transform: translateY(1px);
}

/* Ensure spacing between buttons on desktop */
.ml-lg-4 {
    margin-left: 1.5rem;
}

/* Mobile Fix: Stack them properly */
@media (max-width: 991px) {
    .phone-text-link {
        display: block;
        max-width: 250px;
        margin: 10px auto 0 !important; /* Centers and adds top gap */
    }
}


/*
---------------------------------------------
Team
---------------------------------------------
*/

#our-team {
  /* Removed bottom padding to eliminate space */
  padding: 40px 0px 0px 0px !important; 
  background-color: #f8f8f8;
  margin-bottom: 0px !important;
}

#our-team .section-heading {
  margin-bottom: 70px;
}

#our-team .section-heading h6 {
  padding-left: 0px;
  color: #87CEEB; /* Sky Blue */
}

#our-team .section-heading h6:before {
  display: none;
}

/* Added margin-bottom to col-lg-4 instead of the card */
#our-team .col-lg-4 {
  margin-bottom: 30px;
}

#our-team .chef-item {
  text-align: center;
  border: 1px solid #D1D5DB; 
  padding: 15px; 
  transition: all .5s;
  border-radius: 12px; 
  background-color: #fff;
  /* Set to 0 so the section bottom is flush */
  margin-bottom: 0px; 
}

#our-team .chef-item:hover {
  border-color: #87CEEB; 
  transform: translateY(-5px); 
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

#our-team .chef-item:hover .down-content h4 {
  color: #87CEEB; 
}

#our-team .chef-item .thumb {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

#our-team .chef-item .thumb img {
  width: 100%;
  display: block;
}

#our-team .chef-item .thumb .overlay {
  position: absolute;
  background-color: rgba(51, 51, 51, 0.8); 
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
}

#our-team .chef-item .thumb ul.social-icons {
  position: absolute;
  z-index: 11;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  transition: all .5s;
  opacity: 0;
  visibility: hidden;
  padding: 0;
  list-style: none;
}

#our-team .chef-item .thumb ul.social-icons li {
  display: inline-block;
  margin: 0px 5px;
}

#our-team .chef-item .thumb ul.social-icons li a {
  width: 40px;
  height: 40px;
  background-color: #fff;
  color: #333333;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  display: inline-block;
  transition: all .5s;
}

#our-team .chef-item .thumb ul.social-icons li a:hover {
  background-color: #87CEEB;
  color: #fff;
}

#our-team .chef-item:hover .overlay {
  opacity: 1;
  visibility: visible;
}

#our-team .chef-item:hover ul.social-icons {
  opacity: 1;
  visibility: visible;
}

#our-team .chef-item .down-content {
  padding: 20px 0px 10px 0px;
}

#our-team .chef-item .down-content h4 {
  transition: all .3s;
  font-size: 20px;
  font-weight: 700;
  color: #333333;
  margin-bottom: 5px;
}

#our-team .chef-item .down-content span {
  font-size: 13px;
  color: #87CEEB; 
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Mobile Fixes */
@media (max-width: 991px) {
    #our-team {
        /* Adjusted for flush bottom on mobile */
        padding: 80px 15px 0px 15px !important; 
    }
}

/* ---------------------------------------------
NEW: GBV Social Impact Banner (The "Pop" Section)
--------------------------------------------- 
/* Full-Width Impact Section */
#impact {
    /* Set padding to 0 to remove top/bottom white space */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    width: 100%;
    overflow-x: hidden;
    /* Ensure no margin gaps */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.gbv-impact-banner {
    position: relative;
    margin: 0;
    padding: 80px 20px; 
    width: 100%;
    border-radius: 0; /* Touches sides perfectly */
    text-align: center;
    color: #ffffff;
    
    background: linear-gradient(135deg, rgba(209, 213, 219, 0.85), rgba(51, 51, 51, 0.9)), 
                url('../images/women-empowerment-bg.jpg'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.impact-content i {
    font-size: 50px;
    margin-bottom: 15px;
    color: #ffffff;
    display: block;
}

.impact-content h3 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
}

.impact-content p {
    font-size: 18px;
    max-width: 850px;
    margin: 0 auto; 
    line-height: 1.8;
    color: #f8f8f8;
}


/* ---------------------------------------------
Gallery
--------------------------------------------- 
*/
#gallery {
    padding: 60px 0px; /* Vertical padding only */
}

#gallery .container {
    padding-left: 15px;  /* Standard Bootstrap gutter */
    padding-right: 15px;
    margin-right: auto;
    margin-left: auto;
}

#gallery .gallery-item {
    position: relative;
    border-radius: 15px; /* Ensures the container is rounded */
    overflow: hidden;    /* This clips the overlay so it can't leak out */
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    z-index: 1; /* Keeps everything contained in its own layer */
}

#gallery .gallery-item img {
    width: 100%;
    height: 350px; 
    object-fit: cover;
    display: block;
    border-radius: 15px; /* Matches the container */
}

#gallery .gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(51, 51, 51, 0.85); /* Charcoal Overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    transition: all 0.4s ease;
    
    /* FIX: Add the radius here too just to be safe */
    border-radius: 15px; 
}

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

#gallery .gallery-item:hover img {
    transform: scale(1.1); /* Subtle zoom */
}

.overlay-content span {
    color: #87CEEB; /* Sky Blue */
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 5px;
}

.overlay-content h4 {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}

/* Mobile Tweaks */
@media (max-width: 767px) {
    #gallery .gallery-item img {
        height: 250px;
    }
}



/* ---------------------------------------------
reservation
--------------------------------------------- 
*/

#reservation .section-heading {
  margin-bottom: 30px;
}

#reservation .section-heading h6 {
  color: #87CEEB; /* Changed to Sky Blue */
}

#reservation .section-heading h2 {
  color: #fff;
  font-weight: 700;
}

#reservation .section-heading h6:before {
  background-color: #87CEEB; /* Changed to Sky Blue */
}

#reservation p {
  color: #fff;
  margin-bottom: 65px;
}

#reservation {
  margin-top: 80px;
  margin-bottom: -60px;
  padding: 120px 0px;
  background-image: url(../images/reservation-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

#reservation .phone,
#reservation .message {
  background-color: #fff;
  border-radius: 5px;
  text-align: center;
  padding: 0px 0px 20px 0px;
}

#reservation .phone i,
#reservation .message i {
  width: 70px;
  height: 70px;
  display: inline-block;
  text-align: center;
  line-height: 70px;
  color: #333333; /* Changed to Charcoal for contrast */
  background-color: #87CEEB; /* Changed to Sky Blue */
  border-radius: 50%;
  font-size: 24px;
  margin-top: -35px;
  margin-left: auto;
  margin-right: auto;
}

#reservation .phone h4,
#reservation .message h4 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 15px;
  margin-bottom: 10px;
}

#reservation .phone span a,
#reservation .message span a {
  font-size: 14px;
  color: #2a2a2a;
  transition: all .3s;
}

#reservation .phone span a:hover,
#reservation .message span a:hover {
  color: #87CEEB; /* Changed to Sky Blue */
}

#contact {
  margin-left: 30px;
  padding: 45px 30px;
  background-color: #fff;
  border-radius: 5px;
}

#contact h4 {
  text-align: center;
  font-weight: 700;
  font-size: 30px;
  color: #333333; /* Changed to Charcoal */
  margin-bottom: 30px;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: #87CEEB; /* Changed to Sky Blue */
}

.contact-form button {
  margin-top: -10px;
  font-size: 13px;
  color: #333333; /* Changed to Charcoal for better readability on blue */
  background-color: #87CEEB; /* Changed to Sky Blue */
  padding: 12px 25px;
  width: 100%;
  box-shadow: none;
  border: none;
  display: inline-block;
  border-radius: 3px;
  font-weight: 700;
  transition: all .3s;
}

.contact-form button:hover {
  background-color: #333333; /* Hover to Charcoal */
  color: #87CEEB; /* Text turns Sky Blue on hover */
  opacity: 1;
}

/* Rest of the form styling stays the same as your request */
.contact-form input,
.contact-form textarea,
.contact-form select {
  color: #2a2a2a;
  font-size: 14px;
  border: 1px solid #ddd;
  background-color: #fff;
  width: 100%;
  height: 46px;
  border-radius: 5px;
  outline: none;
  padding-top: 3px;
  padding-left: 20px;
  padding-right: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-bottom: 15px;
}

.contact-form textarea {
  height: 150px;
  resize: none;
  padding: 20px;
}

.contact-form ::placeholder {
  color: #2a2a2a;
}

/* --- Highlight Required Symbols --- */
.required {
    color: #FF0000; /* Bright Red */
    font-weight: bold;
    margin-left: 2px;
}


/*
---------------------------------------------
Products
---------------------------------------------
*/
#our-products {
    padding-top: 140px !important; /* Adjusted for Fixed Nav */
    padding-bottom: 80px !important;
}

/* Make card overall more compact */
.product-card {
    background: #fff;
    border-radius: 12px;
    height: 100%;
    border: 1px solid #eee;
    transition: 0.3s;
}

/* Reduced height of the top colored area */
.product-icon {
    padding: 35px 0 !important; 
    font-size: 30px !important;
}

.price-tag {
    bottom: 10px !important;
    right: 10px !important;
    font-size: 12px !important;
    padding: 3px 10px !important;
}

/* Delivery Notice Alignment */
.delivery-notice {
    position: absolute;
    bottom: 15px;
    left: 15px; /* Aligns to the left side */
    font-size: 10px; /* Small letters */
    font-weight: 500;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Ensure price tag stays on the right */
.price-tag {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: #333;
    color: #fff;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700;
}

/* Maintain compactness for the smaller row-of-3 look */
.product-icon {
    position: relative;
    padding: 50px 0 !important;
    font-size: 35px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-info {
    padding: 15px !important; /* Tighter internal space */
}

.product-info h4 {
    font-size: 18px !important; /* Smaller text */
    margin-bottom: 5px;
}

.product-info p {
    font-size: 13px !important;
    line-height: 1.4;
}

.product-category-title {
    font-size: 24px;
    margin-bottom: 30px;
}

.category-subtitle {
    margin-bottom: 50px;
    color: #7a7a7a;
    font-style: italic;
}

.product-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.product-icon {
    position: relative;
    padding: 60px 0;
    font-size: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Price Tag Styling */
.price-tag {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: #333;
    color: #fff;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700;
}

/* Updated Colors to match your branding */
.still-bg { background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); color: #1976d2; }
.sparkling-bg { background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%); color: #7b1fa2; }
.refill-bg { background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 100%); color: #00796b; }

.product-info {
    padding: 25px 20px;
}

.product-info h4 {
    font-weight: 800;
    font-size: 20px;
    color: #333;
    margin-bottom: 8px;
}

.product-info p {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

.main-button-icon {
    display: inline-block;
    padding: 15px 40px;
    background-color: #87CEEB;
    color: #fff;
    border-radius: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(135, 206, 235, 0.4);
}

.main-button-icon:hover {
    background-color: #333;
    transform: scale(1.05);
    color: #fff;
}

/* 
---------------------------------------------
footer
--------------------------------------------- 
*/

footer {
  margin-top: 0;
  padding: 50px 0px;
  background-color: #fff;
  border-top: 2px solid #87CEEB;
}

footer .left-text-content p {
  margin-top: 5px;
  color: #333333;
  font-size: 14px;
  text-align: right;
}

footer .right-text-content p {
  color: #333333;
  font-size: 14px;
  margin-right: 15px;
  text-transform: uppercase;
}


footer .right-text-content {
  text-align: left;
  margin-top: 10px;
}

footer .logo {
  text-align: center;
}

footer .right-text-content ul li {
  display: inline-block;
  margin-left: 15px;
}
footer .right-text-content ul li:first-child {
  margin-left: 0px;
}


footer .right-text-content ul li a {
  width: 44px;
  height: 44px;
  display: inline-block;
  text-align: center;
  line-height: 44px;
  font-size: 20px;
  background-color: #87CEEB;
  border-radius: 50%;
  color: #fff;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

footer .right-text-content ul li a:hover {
  background-color: #333333;
  color: #87CEEB;
}

/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/

@media (max-width: 992px) {
  #top {
    padding-top: 100px;
    height: auto;
  }
  .header-area .main-nav .nav li.submenu:after {
    right: 3px;
  }
  .header-area .main-nav .nav li.submenu {
    padding-right: 15px;
  }
  .header-area .main-nav .nav li {
    padding-right: 5px;
    padding-left: 5px;
  }
  .header-area .main-nav .nav li a {
    font-size: 14px;
    letter-spacing: 0px;
  }
  #top .left-content {
    text-align: center;
    padding: 25% 0px;
  }
  #about .right-content {
    margin-left: 0px;
    margin-top: 30px;
  }
  #chefs .chef-item {
    margin-bottom: 30px;
  }
  #reservation .phone {
    margin-bottom: 60px;
  }
  #contact {
    margin-left: 0px;
    margin-top: 30px;
  }
  #offers .tabs-content .left-list {
    margin-right: 0px;
  }

  #offers .tabs-content .right-list {
    margin-left: 0px;
  }
  footer .right-text-content {
    text-align: center;
    margin-bottom: 30px;
  }
  footer .left-text-content p {
    text-align: center;
    margin-top: 30px;
  }
}





#preloader {
  overflow: hidden;
  background-color: #D1D5DB;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  z-index: 99999;
  color: #fff;
}

#preloader .jumper {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  position: absolute;
  margin: auto;
  width: 50px;
  height: 50px;
}

#preloader .jumper > div {
  background-color: #fff;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  opacity: 0;
  width: 50px;
  height: 50px;
  -webkit-animation: jumper 1s 0s linear infinite;
  animation: jumper 1s 0s linear infinite;
}

#preloader .jumper > div:nth-child(2) {
  -webkit-animation-delay: 0.33333s;
  animation-delay: 0.33333s;
}

#preloader .jumper > div:nth-child(3) {
  -webkit-animation-delay: 0.66666s;
  animation-delay: 0.66666s;
}

@-webkit-keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  5% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}