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;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 50%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

.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: 'Poppins';
  font-weight: 500;
  background-color: #fff;
  -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;
  color: #a6dd3e;
}

ul {
  margin-bottom: 0px;
  color: #df1371;
}

p {
  font-size: 15px;
  line-height: 30px;
  font-weight: 300;
}

img {
  width: 100%;
  overflow: hidden;
}

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

::selection {
  background: #4b8ef1;
  color: #fff !important;
}

::-moz-selection {
  background: #4b8ef1;
  color: #fff !important;
}

@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;
  }
}

.section-heading {
  position: relative;
  z-index: 2;
}

.section-heading h4 {
  color: #2a2a2a;
  font-size: 30px;
  font-weight: 700;
  text-transform: capitalize;
  margin-bottom: 10px;
}

.section-heading h4 em {
  font-style: normal;
  color: #a6dd3e;
}

.section-heading img {
  width: 45px;
  height: 2px;
}

.section-heading p {
  margin-top: 10px;
}

.show-up {
  position: relative;
  z-index: 2;
}

.white-button a {
  display: inline-block !important;
  padding: 15px 35px !important;
  text-transform: capitalize;
  font-size: 20px;
  background-color: #fff;
  border-radius: 23px;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  transition: all .5s;
}

.white-button a i {
  margin-left: 5px;
  font-size: 18px;
}

.white-button a:hover {
  background-color: #4b8ef1;
  color: #fff !important;
}

.text-button a {
  font-size: 15px;
}

.text-button a i {
  margin-left: 5px;
  font-size: 14px;
  transition: all .3s;
}

.text-button a:hover i {
  margin-left: 8px;
}

.gradient-button a {
  display: inline-block !important;
  padding: 10px 20px !important;
  color: #fff !important;
  text-transform: capitalize;
  font-size: 15px;
  background: #a6dd3e;
  border-radius: 23px;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  transition: all .5s;
}

.gradient-button a:hover {
  color: #fff !important;
  background: rgb(19, 175, 240);
  background: linear-gradient(105deg, #a6dd3e 0%, #4b8b13 100%);
}

.border-button a {
  display: inline-block !important;
  padding: 10px 20px !important;
  color: #4b8ef1 !important;
  border: 1px solid #4b8ef1;
  text-transform: capitalize;
  font-size: 15px;
  display: inline-block;
  background-color: #fff;
  border-radius: 23px;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  transition: all .5s;
}

.border-button a:hover {
  background-color: #4b8ef1;
  color: #fff !important;
}


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

.background-header {
  background-color: #fff !important;
  border-bottom: none !important;
  position: fixed !important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 5px 8px rgb(0 0 0 / 7%);
}

.unsere-page .background-header {
  background-color: #fff !important;
  height: 80px !important;
  border-bottom: none !important;
  position: fixed !important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.03);
}

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

.background-header .logo,
.background-header .unsere-page .main-nav .nav li a {
  color: #fff;
}

.background-header .main-nav .nav li:hover a {
  color: #4b8ef1;
}


.background-header .unsere-page .main-nav .nav li:hover a {
  color: #4b8ef1;
}

.background-header .nav li a.active {
  position: relative;
  color: #fff;
}

.background-header .nav li a.active:after {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #4b8ef1;
  content: '';
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
}

.background-header .nav li:last-child a.active:after {
  background-color: transparent;
}

.header-area {
  background-color: transparent;
  position: absolute;
  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;
}

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



.header-area .main-nav .logo {
  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;
}



.header-area .main-nav .logo {
  line-height: 100px;
  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: 80px;
}

.background-header .main-nav .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;
}



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

.header-area .main-nav .nav li:nth-child(6) {
  padding-right: 0px;
  padding-left: 40px;
}

.header-area .main-nav .nav li:last-child a,
.background-header .main-nav .nav li:last-child a,
.header-area .main-nav .nav li:nth-child(6) a,
.background-header .main-nav .nav li:nth-child(6) a {
  padding: 0px 15px !important;
  font-weight: 400;
}

.header-area .main-nav .nav li:last-child a:hover,
.background-header .main-nav .nav li:last-child a:hover,
.header-area .main-nav .nav li:nth-child(6) a:hover,
.background-header .main-nav .nav li:nth-child(6) a:hover {
  color: #fff !important;
}


.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  color: #2a2a2a;
  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:hover a,
.header-area .main-nav .nav li a.active {
  color: #a6dd3e !important;
}

.header-area .main-nav .nav li:last-child a.active {
  color: #fff !important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #a6dd3e !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: #2a2a2a;
  position: absolute;
  right: 18px;
  top: 12px;
}

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

.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: #f7f7f7;
  color: #2a2a2a !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: #4b8ef1 !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: #2a2a2a;
  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: #2a2a2a;
}

.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: #2a2a2a;
  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: #2a2a2a;
}

.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: #2a2a2a;
}

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

.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: #2a2a2a;
}

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

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

}

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

.header-area.header-sticky .nav li a.active {
  color: #4b8ef1;
}

@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: 992px) {

  .header-area .main-nav .nav li:last-child,
  .background-header .main-nav .nav li:last-child {
    color: #069;
  }

  .header-area .main-nav .nav li:nth-child(6),
  .background-header .main-nav .nav li:nth-child(6) {
    padding-right: 0px;
  }

  .background-header .nav li a.active:after {
    display: none;
  }
}

@media (max-width: 767px) {

  .pre-header ul.info li:last-child,
  .pre-header ul.info li:nth-child(6) {
    display: none !important;
  }

  .background-header .main-nav .nav .search-input {
    margin-top: 80px !important;
  }

  .header-area .main-nav .logo {
    color: #1e1e1e;
  }

  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    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;
    box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.03);
  }

  .header-area .container {
    padding: 0px;
  }

  .header-area .logo {
    margin-left: 30px;
  }

  .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.show {
    display: block;
    opacity: 1;
  }

  .background-header .nav {
    margin-top: 80px;
  }

  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }

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

  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .header-area .main-nav .nav li a .search-input {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }

  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #4b8ef1 !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: #3B566E;
    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;
  }
}

/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/

.js-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.js-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@-webkit-keyframes dot {
  50% {
    -webkit-transform: translateX(96px);
    transform: translateX(96px);
  }
}

@keyframes dot {
  50% {
    -webkit-transform: translateX(96px);
    transform: translateX(96px);
  }
}

@-webkit-keyframes dots {
  50% {
    -webkit-transform: translateX(-31px);
    transform: translateX(-31px);
  }
}

@keyframes dots {
  50% {
    -webkit-transform: translateX(-31px);
    transform: translateX(-31px);
  }
}

.preloader-inner {
  position: relative;
  width: 142px;
  height: 40px;
  background: #fff;
}

.preloader-inner .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  left: 15px;
  background: #4b8ef1;
  border-radius: 50%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: dot 2.8s infinite;
  animation: dot 2.8s infinite;
}

.preloader-inner .dots {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  margin-top: 12px;
  margin-left: 31px;
  -webkit-animation: dots 2.8s infinite;
  animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background: #4b8ef1;
  border-radius: 50%;
}



/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 150px 0px 85px 0px;
  position: relative;
  overflow: hidden;
}

.unsere-page .main-banner {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 50px;
  position: relative;
  overflow: hidden;

}


.main-banner:after {
  content: '';
  background-image: url(/assets/images/Backgroundherbs5.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-size: cover;

}



.unsere-page .main-banner:after {
  content: '';
  background-image: none !important;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
}


.main-banner .left-content h2 {
  z-index: 2;
  position: relative;
  font-weight: 700;
  line-height: 70px;
  font-size: 50px;
  margin-bottom: 20px;

}

.main-banner .left-content p {
  margin-bottom: 45px;
  font-weight: 300;
}

.main-banner .left-content .first-button {
  margin-right: 15px;
}

.main-banner .left-content .white-button {
  display: inline-block;
}

.main-banner .right-image {
  text-align: center;
  position: relative;
  z-index: 20;
}

.main-banner .right-image img {
  max-width: 710px;
}

.main-banner .right-image video {
  max-width: 610px;
}

@media screen and (max-width: 700px) {
  .main-banner .right-image video {
    max-width: 350px;
    /* Adjust max-width for smaller screens */
  }
}

.main-banner .left-content .white-button a {
  background-color: #a6dd3e;
  color: #fff !important;
}

/* 
---------------------------------------------
Services Style
--------------------------------------------- 
*/

.services {
  padding-top: 130px;
  position: relative;
}

.services .section-heading p {
  margin-top: 10px;
  margin-left: 18%;
  margin-right: 18%;
}

.services .container-fluid {
  padding-left: 65px;
  padding-right: 65px;
}

.services:after {
  content: '';
  background-image: url(../images/services-left-dec1.png);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  bottom: -300px;
  width: 261px;
  height: 368px;
  z-index: 0;
}

.services:before {
  content: '';
  /*background-image: url(../images/services-right-dec3.png);*/
  background-repeat: no-repeat;
  position: absolute;
  right: 21px;
  top: 91px;
  width: 1136px;
  height: 244px;
  z-index: 0;
}

.services .section-heading {
  text-align: center;
  margin-bottom: 80px;
}

.services .section-heading .line-dec {
  margin: 0 auto;
}

.service-item {
  position: relative;
  z-index: 1;
  padding: 30px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  border-radius: 10px;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 50px;
  border-top-left-radius: 50px;
  border-bottom-right-radius: 50px;
  transition: all .3s;
  height: 250px;
}

.service-item .icon {
  margin-left: 0px;
  margin-bottom: 30px;
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
  transition: all .3s;
}

.service-item h4 {
  transition: all .3s;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
}

.service-item p {
  transition: all .3s;
  font-size: 15px;
  margin-bottom: 20px;
}

.service-item:hover h2,
.service-item:hover p,
.service-item:hover .text-button a {
  color: #fff;
}

.first-service .icon {
  background-image: url(../images/service-icon-011.png);
}

.first-service:hover .icon {
  background-image: url(../images/service-icon-hover-011.png);
}

.second-service .icon {
  background-image: url(/assets/images/service-icon-021.png);
}

.second-service:hover .icon {
  background-image: url(/assets/images/service-icon-hover-021.png);
}


.third-service .icon {
  background-image: url(/assets/images/Icon_Truck-cold_green.png);
}

.third-service:hover .icon {
  background-image: url(/assets/images/Icon_Truck-cold.png);
}

.fourth-service .icon {
  background-image: url(../images/service-icon-041.png);
}

.fourth-service:hover .icon {
  background-image: url(../images/service-icon-hover-041.png);
}

.service-item:hover {
  background-image: url(../images/service-bg1.png);
  background-position: right top;
  background-repeat: no-repeat;
  background-size: cover;
}



/* 
---------------------------------------------
Services2 Style
--------------------------------------------- 
*/

.services2 {
  padding-top: 130px;
  position: relative;
}

.services2 .section-heading p {
  margin-top: 10px;
  margin-left: 18%;
  margin-right: 18%;
}

.services2 .container-fluid {
  padding-left: 65px;
  padding-right: 65px;
}

/*
.services2:after {
  content: '';
  background-image: url(../images/services-left-dec2.png);
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  bottom: -390px;
  width: 261px;
  height: 368px;
  z-index: 0;
}

*/



.services2 .section-heading {
  text-align: center;
  margin-bottom: 30px;
}

.services2 .section-heading .line-dec {
  margin: 0 auto;
}






/*
---------------------------------------------
About Us
---------------------------------------------
*/

.about-us {
  padding-top: 130px;
  position: relative;
}

.about-us .section-heading {
  margin-bottom: 45px;
}

.about-us .section-heading,
.about-us .box-item,
.about-us p,
.about-us .box-item .gradient-button,
.about-us .box-item span {
  position: relative;
  z-index: 1;
}

.about-us .box-item {
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.07);
  padding: 10px 30px;
  background-color: #fff;
  border-radius: 40px;
  margin-bottom: 30px;
}

.about-us .box-item h4 p {
  font-size: 20px;
  font-weight: 700;
  margin-top: 8px;
  color: #2a2a2a;
  transition: all .3s;
}

.about-us .box-item p {
  margin-bottom: 0px;
}

.about-us .box-item:hover h4 a {
  color: #4b8ef1;
}

.about-us .gradient-button {
  margin-top: 30px;
  margin-bottom: 10px;
}

.about-us span {
  font-size: 14px;
  color: #7a7a7a;
}

.about-us .right-image {
  position: relative;
  z-index: 1;
}

.about-us:after {
  background-image: url(../images/about-bg2.png);
  width: 777px;
  height: 1132px;
  content: '';
  position: absolute;
  background-repeat: no-repeat;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
}



/* 
---------------------------------------------
The Clients
---------------------------------------------
*/

.the-clients {
  margin-top: 130px;
}

.the-clients .section-heading {
  text-align: center;
  margin-bottom: 80px;
}

.the-clients .section-heading p {
  margin-top: 10px;
  margin-left: 18%;
  margin-right: 18%;
}

.the-clients .naccs {
  position: relative;
}

.menu .thumb h4 {
  margin-bottom: 0px;
  font-size: 20px;
  color: #2a2a2a;
}

.menu .thumb span.date {
  display: inline-block;
  margin-top: 0px;
  color: #afafaf;
}

.menu .thumb span.category,
.menu .thumb span.rating {
  font-weight: 700;
  color: #afafaf;
}

.menu .thumb i {
  color: #afafaf;
}

.the-clients .naccs .menu div {
  color: #fff;
  font-size: 15px;
  margin-bottom: 15px;
  margin-top: 15px;
  text-align: left;
  padding: 0px 15px;
  cursor: pointer;
  position: relative;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.the-clients .naccs .menu div.active h4,
.the-clients .naccs .menu div.active i,
.the-clients .naccs .menu div.active span.rating,
.the-clients .naccs .menu div.active .thumb {
  color: #8AAB24;
}

.the-clients ul.nacc {
  position: relative;
  min-height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.the-clients ul.nacc li {
  opacity: 0;
  transform: translateX(-50px);
  position: absolute;
  list-style: none;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.the-clients ul.nacc li.active {
  transition-delay: 0.3s;
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: translateX(0px);
}

.the-clients ul.nacc li {
  width: 100%;
}

.the-clients .nacc .thumb .client-content img {
  width: 76px;
  height: 62px;
}

.the-clients .nacc .thumb .client-content {
  padding: 60px 30px;
  background-image: url(../images/client-bg.png);
  background-size: cover;
  border-radius: 50px;
  width: 100%;
  height: auto;
  background-repeat: no-repeat;
}

.the-clients .nacc .thumb .client-content p {
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  font-style: italic;
  margin-top: 30px;
}

.the-clients .nacc .thumb .down-content {
  margin-top: 30px;
}

.the-clients .nacc .thumb .down-content img {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  display: inline;
}

.the-clients .nacc .thumb .down-content .right-content {
  display: inline-block;
  margin-left: 20px;
}

.the-clients .nacc .thumb .down-content .right-content h4 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
}

.the-clients .nacc .thumb .down-content .right-content span {
  color: #2a2a2a;
}


/* 
---------------------------------------------
The Clients
---------------------------------------------
*/



.pricing-tables .section-heading {
  text-align: center;
}

.pricing-tables .section-heading p {
  margin-top: 10px;
  margin-left: 18%;
  margin-right: 18%;
}

.pricing-item-regular {
  margin-top: 30px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.07);
  border-radius: 50px;
  padding: 90px 0px;
  text-align: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.pricing-item-regular:before {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../images/regular-table-top.png);
  z-index: 0;
  content: '';
  width: 274px;
  height: 221px;
}

.pricing-item-regular:after {
  position: absolute;
  bottom: 0;
  right: 0;
  background-image: url(../images/regular-table-bottom.png);
  z-index: 0;
  content: '';
  width: 370px;
  height: 171px;
}

.pricing-item-regular span.price {
  color: #fff;
  position: absolute;
  font-weight: 700;
  z-index: 1;
  left: 30px;
  top: 30px;
}

.pricing-item-regular h4 {
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 30px;
}

.pricing-item-regular .icon img {
  width: 400px;
  height: auto;
  margin-bottom: 30px;
}

.pricing-item-regular ul li {
  color: #4b8ef1;
  font-size: 15px;
  margin-bottom: 15px;
}

.pricing-item-regular ul li:last-child {
  margin-bottom: 0px;
}

.pricing-item-regular ul li.non-function {
  color: #afafaf;
  text-decoration: line-through;
}

.pricing-item-regular .border-button {
  position: relative;
  z-index: 1;
  margin-top: 40px;
}

.pricing-item-pro {
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.07);
  border-radius: 50px;
  padding: 120px 0px;
  text-align: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.pricing-item-pro:before {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../images/pro-table-top.png);
  z-index: -1;
  content: '';
  width: 281px;
  height: 251px;
}

@media (max-width: 768px) {
  .services:before {
    display: none;
  }
}

@media (max-width: 768px) {
  #about-right-image {
    display: none;
  }
}


.pricing-item-pro:after {
  position: absolute;
  bottom: 0;
  right: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../images/pro-table-bottom.png);
  z-index: 0;
  content: '';
  width: 100%;
  height: 201px;
}

.pricing-item-pro span.price {
  color: #fff;
  position: absolute;
  font-weight: 700;
  z-index: 1;
  left: 30px;
  top: 30px;
}

.pricing-item-pro h4 {
  font-size: 34px;
  font-weight: 800;
  margin-bottom: 30px;
}

.pricing-item-pro .icon img {
  width: 400px;
  height: auto;
  margin-bottom: 30px;
}

.pricing-item-pro ul li {
  color: #4b8ef1;
  font-size: 15px;
  margin-bottom: 15px;
}

.pricing-item-pro ul li:last-child {
  margin-bottom: 0px;
}

.pricing-item-pro ul li.non-function {
  color: #afafaf;
  text-decoration: line-through;
}

.pricing-item-pro .border-button {
  position: relative;
  z-index: 1;
  margin-top: 40px;
}




/* 
---------------------------------------------
Free Quote
--------------------------------------------- 
*/

.free-quote {
  background-image: url(../images/quote-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 120px 0px;
  text-align: center;
  position: relative;
  z-index: 2;
  margin-top: 130px;
}

.free-quote .section-heading {
  margin-bottom: 60px;
}

.free-quote .section-heading h6,
.free-quote .section-heading h4 {
  color: #fff;
}

.free-quote .section-heading .line-dec {
  margin: 0 auto;
  background-color: #fff;
}

.free-quote form {
  background-color: #fff;
  display: inline-block;
  width: 100%;
  min-height: 80px;
  border-radius: 40px;
  position: relative;
  z-index: 1;
}

.free-quote form input {
  width: 100%;
  margin-top: 20px;
  margin-left: 30px;
  color: #afafaf;
  font-weight: 400;
  font-size: 15px;
  height: 40px;
  background-color: transparent;
  border-bottom: 1px solid #eee;
  border-top: none;
  border-left: none;
  border-right: none;
  position: relative;
  z-index: 2;
  outline: none;
}

.free-quote form button {
  width: 100%;
  height: 80px;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  outline: none;
  border: none;
  margin-left: 30px;
  background-color: #726ae3;
  font-size: 15px;
  color: #fff;
}


/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

footer {
  background-image: url(../images/footer-bg1.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 130px;
  padding-top: 300px;
  padding-bottom: 60px;
}

footer .section-heading {
  margin-bottom: 45px;
}

footer .section-heading h4 {
  line-height: 45px;
  color: #fff;
  margin-left: 13%;
  margin-right: 13%;
  text-align: center;
}

footer #search {
  margin-bottom: 80px;
}

footer #search input::placeholder {
  color: #fff;
}

footer #search input {
  font-size: 15px;
  color: #fff;
  outline: none;
  height: 46px;
  border: none;
  background-color: transparent;
  border-bottom: 1px solid #fff;
  width: 100%;
}

footer #search button {
  height: 46px;
  border-radius: 23px;
  border: 1px solid #fff;
  background-color: transparent;
  color: #fff;
  width: 100%;
  transition: all .5s;
}

footer #search button:hover {
  background-color: #fff;
  color: #4b8ef1;
}

.footer-widget .logo img {
  max-width: 96px;
  margin-bottom: 30px;
}

.footer-widget h4 {
  font-size: 20px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 30px;
}

.footer-widget p {
  margin-bottom: 15px;
}

.footer-widget p,
.footer-widget p a {
  color: #fff;
}

.footer-widget ul {
  display: inline;
  max-width: 40%;
  float: left;
  margin-right: 10%;
}

.footer-widget ul li {
  margin-bottom: 10px;
}

.footer-widget ul li:last-child {
  margin-bottom: 0px;
}

.footer-widget ul li a {
  font-size: 15px;
  color: #fff;
  transition: all .3s;
  ;
}

.footer-widget a:hover {
  opacity: 0.75;
}

footer .copyright-text p {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 0px;
  color: #fff;
}

footer p a {
  color: #fff;
  transition: all .5s;
}

footer p a:hover {
  opacity: 0.75;
  color: #fff;
}


/*
---------------------------------------------
PopUp
---------------------------------------------
*/

#lean_overlay {
  position: fixed;
  z-index: 100;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 50%;
  background: #000;
  display: none;
  opacity: 0.8;
}






.btn {
  padding: 10px 20px;
  background: #df1371;
  color: #fff;
  transition: all .3s;
  border-color: #df1371 !important;
}

.btn_red {
  background: #4b8ef1;
  color: #FFF;
}

.btn:hover {
  background: #df1371;
}

.btn_red:hover {
  color: #df1371;
  background: #df1371;
}

a.btn {
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: #df1371;
}

a.btn_red {
  color: #FFF;
}

.one_half {
  width: 50%;
  display: block;
  float: left;
}

.one_half.last {
  width: 45%;
  margin-left: 5%;
}

/* Popup Styles*/

.popupHeader {
  font-size: 16px;
  text-transform: uppercase;
}

.popupHeader {
  background: #F4F4F2;
  position: relative;
  padding: 10px 20px;
  border-bottom: 1px solid #DDD;
  font-weight: bold;
}

.popupHeader .modal_close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px 15px;
  background: #4b8ef1;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
}

.popupBody {
  padding: 20px;
}

.social_login .social_box {
  display: block;
  clear: both;
  padding: 10px;
  margin-bottom: 10px;
  background: #F4F4F2;
  overflow: hidden;
}

.social_login .icon {
  display: inline-block;

  padding: 5px 10px;
  margin-right: 10px;
  float: left;
  color: #FFF;
  font-size: 16px;
  text-align: center;
}

.social_login .fb .icon {
  background: #3B5998;
}

.social_login .google .icon {
  background: #DD4B39;
}

.social_login .icon_title {
  display: block;
  padding: 5px 0;
  float: left;
  font-weight: bold;
  font-size: 16px;
  color: #777;
}

.social_login .social_box:hover {
  background: #E4E4E2;
}

.centeredText {
  color: #afafaf;
  text-align: center;
  margin: 20px 0;
  clear: both;
  overflow: hidden;
  text-transform: capitalize;
}

.user_login label {
  color: #afafaf;
}

.action_btns {
  clear: both;
  overflow: hidden;
}

.action_btns a {
  display: block;
}

/* User Login Form */

.user_login {
  display: none;
}

.user_login label {
  display: block;
  margin-bottom: 5px;
}

.user_login input[type="text"],
.user_login input[type="email"],
.user_login input[type="password"] {
  display: block;
  width: 90%;
  padding: 10px;
  border: 1px solid #DDD;
  color: #666;
}

.user_login input[type="checkbox"] {
  float: left;
  margin-right: 10px;
  width: 22px;
  height: 22px;
}

.user_login input[type="checkbox"]+label {
  float: left;
}

.user_login .checkbox {
  margin-bottom: 10px;
  clear: both;
  overflow: hidden;
}

.forgot_password {
  display: block;
  margin: 20px 0 10px;
  clear: both;
  overflow: hidden;
  text-decoration: none;
  color: #4b8ef1;
  transition: all .3s;
}

/* User Register Form */

.user_register {
  display: none;
}

.user_register label {
  color: #afafaf;
  display: block;
  margin-bottom: 5px;
}

.user_register input[type="text"],
.user_register input[type="email"],
.user_register input[type="password"] {
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid #DDD;
  color: #666;
}

.user_register input[type="checkbox"] {
  width: 22px;
  height: 22px;
  float: left;
  margin-right: 8px;
}

.user_register input[type="checkbox"]+label {
  float: left;
  color: #afafaf;
}

.user_register .checkbox {
  margin-bottom: 10px;
  clear: both;
  overflow: hidden;
}



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




@media (max-width: 1200px) {
  .header-area .main-nav .logo h4 {
    font-size: 24px;
  }

  .header-area .main-nav .logo h4 img {
    max-width: 25px;
    margin-left: 0px;
  }

  .header-area .main-nav .nav li:last-child {
    padding-left: 20px;
  }

  .main-banner:after {
    display: none;
  }

  .main-banner .left-content h2 {
    z-index: 2;
    position: relative;
    font-weight: 700;
    line-height: 70px;
    font-size: 30px;
    margin-bottom: 20px;
  }

  .main-banner .left-content p {
    margin-bottom: 45px;
    text-align: center;
  }

  .col-lg-6 {
    flex: 0 0 auto;
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 992px) {
  .header-area {
    background-color: #fff;
  }

  .main-banner:after {
    display: none;
  }

  .main-banner .left-content h2 {
    color: #a6dd3e;
    margin-right: 0;
    line-height: normal;
  }

  .main-banner .left-content p {
    color: #afafaf;
    margin-right: 0;
  }

  .main-banner .left-content .white-button a {
    background-color: #a6dd3e;
    color: #fff !important;
  }

  form#contact {
    overflow: hidden;
  }

  .header-area .main-nav .logo h4 {
    font-size: 20px;
  }

  .main-banner .left-content {
    margin-right: 0px;
  }

  .main-banner {
    text-align: center;
    padding: 106px 0px 30px 0px;
  }

  .main-banner:before {
    display: none;
  }

  .main-banner .right-image {
    margin: 30px auto 0px auto;
    text-align: center;
  }

  .features-item {
    margin-bottom: 45px;
  }

  .last-features-item,
  .last-skill-item {
    margin-bottom: 0px !important;
  }

  .skill-item {
    margin-bottom: 30px;
  }

  .about-left-image img {
    margin-right: 0px;
    margin-bottom: 45px;
    ;
  }

  .services .naccs .menu div {
    font-size: 15px;
    font-weight: 500;
  }

  .service-item {
    text-align: center;
    margin-bottom: 30px;
  }

  .about-us .box-item {
    text-align: center;
  }

  .about-us:after {
    display: none;
  }

  .about-us .gradient-button,
  .about-us span {
    text-align: center;
    display: block;
  }

  .about-us .right-image {
    margin-top: 30px;
  }

  .service-item .icon {
    margin: 0 auto 30px auto;
  }

  .about-us .section-heading {
    text-align: center;
  }

  .about-us .left-image {
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 45px;
  }

  .blog-posts {
    margin-left: 0px;
    margin-top: 30px;
  }

  .post-item {
    margin-bottom: 70px;
  }

  .pricing-item-regular {
    margin-bottom: 30px;
  }

  .our-portfolio .owl-nav {
    display: none !important;
  }

  .contact-info {
    margin-top: 60px;
  }

  form#contact {
    padding: 45px;
  }
}

@media (max-width: 767px) {
  .the-clients .naccs .menu div {
    text-align: center;
  }

  footer .section-heading h4 {
    color: #fff;
  }

  footer #search {
    margin-bottom: 45px;
  }

  footer {
    padding-top: 200px;
    text-align: center;
  }

  .footer-widget ul {
    display: block;
    width: 100%;
    float: none;
    text-align: center;
    margin: 0 auto;
  }

  .footer-widget h4 {
    margin-top: 45px;
    margin-bottom: 20px;
  }

  footer #search input {
    border: 1px solid #eee;
    color: #fff;
    background-color: transparent;
    border-radius: 23px;
    margin-bottom: 15px;
    padding: 0px 30px;
  }

  footer #search button {
    background-color: #fff;
    color: #4b8ef1;
  }

  footer #search input::placeholder {
    color: #fff;
  }

  .header-area .main-nav .logo h4 {
    font-size: 30px;
  }

  .header-area .main-nav .logo h4 img {
    max-width: 30px;
    margin-left: 5px;
  }

  .main-banner .info-stat {
    margin-bottom: 15px;
  }

  .menu .thumb span.date {
    margin-bottom: -20px;
    display: block;
  }

  .service-item {
    text-align: center;
    padding: 30px;
  }

  .menu .thumb span.category {
    display: none;
  }

  .about-us .right-image {
    margin-top: 30px;
  }

  .service-item .icon {
    float: none;
    margin-right: 0px;
    margin-bottom: 15px;
  }

  .service-item .right-content {
    display: inline-block;
  }

  .services .naccs .menu div .thumb {
    padding: 5px;
  }

  .services .icon img {
    margin: 0px;
  }

  .the-clients .nacc .thumb .down-content .right-content {
    margin-left: 0px;
    margin-top: 15px;
  }

  .services ul.nacc li.active {
    padding: 45px;
  }

  .services .naccs .menu div {
    font-size: 0px;
  }

  .the-clients .nacc .thumb .down-content {
    text-align: center;
  }

  .services ul.nacc li .right-image img {
    float: none;
  }

  .our-portfolio .section-heading,
  .about-us .section-heading,
  .about-us .about-item,
  .about-us p,
  .about-us .main-green-button {
    text-align: center;
  }

  .our-portfolio .section-heading .line-dec {
    margin: 0 auto;
  }

  .our-services .section-heading {
    margin-left: 15px;
    margin-right: 15px;
  }

  .free-quote form input {
    margin-left: 0px;
    padding: 0px 30px;
  }

  .free-quote form button {
    margin-left: 0px;
    border-bottom-left-radius: 40px;
    border-top-right-radius: 0px;
  }

  .blog-posts {
    margin-left: 0px;
    margin-top: 30px;
  }

  .post-item {
    margin-bottom: 30px;
  }

  .post-item .thumb img {
    max-width: 140px;
  }

  .post-item .right-content p {
    display: none;
  }

  .about-us .about-item {
    margin-top: 15px;
  }

  form#contact {
    padding: 30px;
  }
}



.squares-container {
  margin-top: 10px;
  /* Adjust spacing between stars and squares */
}


.square {
  display: inline-block;
  width: 70px;
  height: 70px;
  background-color: #df1371;
  border-radius: 50%;
  margin-right: 5px;
  color: white;
  text-align: center;
  padding-top: 5px;
  font-weight: bold;
  position: relative;
}

.number {
  padding-top: 15px;
  display: block;
  font-size: 18px;
  line-height: 10px;
}

.label {
  display: block;
  font-size: 12px;
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -10px;
}


.btn-order-now {
  display: inline-block;
  padding: 10px 20px;
  background-color: #a6dd3e;
  /* Button background color */
  color: white;
  /* Button text color */
  text-decoration: none;
  /* Remove underline */
  font-weight: bold;
  /* Bold text */
  border-radius: 50px;
  /* Rounded corners */
  margin-top: 15px;
  /* Space between the heading and the button */
  transition: background-color 0.3s ease;
  /* Smooth hover effect */
}

.btn-order-now2 {
  display: inline-block;
  padding: 10px 20px;
  background-color: #df1371;
  /* Button background color */
  color: white;
  /* Button text color */
  text-decoration: none;
  /* Remove underline */
  font-weight: bold;
  /* Bold text */
  border-radius: 50px;
  /* Rounded corners */
  margin-top: 15px;
  /* Space between the heading and the button */
  transition: background-color 0.3s ease;
  /* Smooth hover effect */
}

.btn-order-now:hover {
  background-color: #91c335;
  /* Change background on hover */
  color: white;
  /* Keep text color white */
}

.btn-order-now2:hover {
  background-color: #df1371;
  /* Change background on hover */
  color: white;
  /* Keep text color white */
}


.btn-order-now1 {
  display: inline-block;
  padding: 10px 20px;
  background-color: #a6dd3e;
  color: white;
  text-decoration: none;
  font-weight: bold;
  border-radius: 50px;
  margin-top: 15px;
  transition: background-color 0.3s ease;
}

.btn-order-now1:hover {
  background-color: #95c739;
  color: white;
}



.our-team {
  text-align: center;
  position: relative;
}

.our-team:before,
.our-team:after {
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: all 0.3s linear 0s;
}

.our-team:before {
  background: #0ac0de;
  transform: scale(0);
  z-index: 1;
}

.our-team:hover:before {
  transform: scale(1);
}

.our-team:after {
  background: #d4d4d4;
}

.our-team .pic {
  overflow: hidden;
  position: relative;
}

.our-team .pic:before {
  content: "";
  width: 50%;
  height: 100%;
  background: rgba(53, 53, 53, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: scale(1.2);
  transition: all 0.3s linear 0s;
}

.our-team:hover .pic:before {
  transform: scale(0.97);
}

.our-team img {
  width: 100%;
  height: auto;
}

.our-team .social {
  width: 100%;
  position: absolute;
  top: 45%;
  left: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  opacity: 0;
  transform: scale(1.2);
  transition: all 0.3s linear 0s;
}

.our-team:hover .social {
  opacity: 1;
  transform: scale(1);
}

.our-team .social li {
  display: inline-block;
}

.our-team .social li a i {
  line-height: inherit;
}

.our-team .team-content {
  padding-bottom: 35px;
}

.our-team .title {
  font-size: 22px;
  font-weight: bold;
  color: #2a2b2f;
  text-transform: capitalize;
  margin: 15px 0 10px 0;
}

.our-team .post {
  font-size: 18px;
  color: #696969;
  text-transform: capitalize;
}

@media only screen and (max-width: 990px) {
  .our-team {
    margin-bottom: 30px;
  }
}

.search-input {
  border-radius: 50px;
  /* Slightly rounded for the input */
  border: 1px solid #a6dd3e;
  /* Green border */
  padding: 8px 15px;
  font-size: 14px;
  width: 200px;
  padding-right: 40px;
  /* Space for the button */
}

@media (max-width: 767.98px) {

  /* Adjust the breakpoint as needed */
  .search-input {
    width: 100%;
    /* Full width on mobile */
  }
}

.search-button {
  position: absolute;
  right: 0px;
  /* Position it inside the input field */
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  /* Fully rounded */
  border: none;
  background-color: #a6dd3e;
  color: white;
  padding: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 40px;
}

.search-button:hover {
  background-color: #a6dd3e;
  /* Darker green on hover */
}

.search-button i {
  margin: 0;
}



.navbar {
  background-color: white;
  padding: 40px 20px;
  display: flex;
  justify-content: center;

}

.navbar ul {
  display: inline-flex;
  /* Keep list items in a single row */
  padding: 0;
  margin: 0;
  list-style: none;
}

.navbar ul li {
  flex: none;
  /* Prevent items from stretching */
  padding: 10px 15px;
  cursor: pointer;
}



.menu1 {
  list-style: none;
  /* Remove bullet points */
  display: flex;
  /* Display items in a row */
  justify-content: center;
  /* Evenly space items */
  padding: 0;
  /* Remove default padding */
  margin: 0;
  /* Remove default margin */
  overflow-x: auto;
  white-space: nowrap;
}

.menu1 li {
  color: black;
  /* Default text color */
  padding: 10px 15px;
  /* Space around each item */
  transition: background-color 0.3s, color 0.3s;
  /* Smooth transition */
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  cursor: pointer;
  /* Change cursor to pointer on hover */
  font-size: 0.8rem;
}

.menu1 li:hover {
  background-color: #df1371;
  /* Change background on hover */
  color: white;
  /* Change text color on hover */
}


h1 {
  padding: 0 0 0px;
}

a:hover {
  text-decoration: none;
}

.product-grid {
  font-family: 'Nunito', sans-serif;
  text-align: center;
  border-radius: 50px;
  border: 1px solid #e0e0e0;
}

.product-grid .product-image {
  overflow: hidden;
  position: relative;
}

.product-grid .product-image a.image {
  display: block;
}

.product-grid .product-image img {
  width: 100%;
  height: auto;
  transition: all 0.5s ease 0s;
  border-top-left-radius: 50px;
  /* Adjust the radius value */
  border-top-right-radius: 50px;
  /* Adjust the radius value */
  border-bottom-left-radius: 0;
  /* Ensures no rounding on the bottom */
  border-bottom-right-radius: 0;
  /* Ensures no rounding on the bottom */
}

.product-grid:hover .product-image img {
  opacity: 0.3;
}

.product-grid .product-sale-label {
  color: #fff;
  background: #df1371;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 5px 10px 3px;
  border-radius: 10px;
  position: absolute;
  top: 17px;
  left: 20px;
  z-index: 1;
}

.product-grid .product-like-icon {
  color: #ff3e58;
  font-size: 18px;
  line-height: 18px;
  opacity: 0;
  position: absolute;
  top: 10px;
  right: 20px;
  z-index: 1;
  transition: all 0.3s ease 0s;
}

.product-grid:hover .product-like-icon {
  opacity: 1;
}

.product-grid:hover .product-like-icon:hover {
  color: #009850;
}

.product-grid .add-to-cart {
  color: #fff;
  background: #df1371;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 10px;
  width: 190px;
  border-radius: 20px;
  opacity: 0;
  transform: translateX(-50%) translateY(-50%);
  position: absolute;
  top: 50%;
  left: 50%;
  transition: all 0.3s ease 0s;
}

.product-grid:hover .add-to-cart {
  opacity: 1;
  transform: translateX(-50%) translateY(5%);
}

.product-grid .add-to-cart:hover {
  background: #aa0d56;
  box-shadow: 0 15px 40px rgba(250, 108, 71, .24);
}

.product-grid .product-content {
  padding: 14px 10px 12px;
}

.product-grid .title {
  font-size: 18px;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  margin: 0 0 5px;
}

.product-grid .title a {
  color: #2d3131;
  transition: all 0.3s ease 0s;
}

.product-grid .title a:hover {
  color: #009850;
}

.product-grid .price {
  color: #a6dd3e;
  font-size: 16px;
  font-weight: 600;
}

.product-grid .price span {
  color: #aaa;
  text-decoration: line-through;
  margin: 0 5px 0 0;
}

@media screen and (max-width: 990px) {
  .product-grid {
    margin-bottom: 30px;
  }
}

.menu1 li.active {
  background-color: #df1371;
  color: white;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}




/* Container for the orange squares */
.orange-squares-container {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  border-style: solid;

}

/* Individual orange square */
.orange-square {
  border-color: orange;
  /* Square background color */
  color: white;
  /* Text color */
  width: 50px;
  /* Width of the square */
  height: 50px;
  /* Height of the square */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 50px;
  /* Rounded corners */
  box-shadow: 1px 1px 1px 1px rgba(220, 220, 220, 0.8);
  /* Optional box shadow */
  transition: transform 0.3s ease;
  /* Animation on hover */
}

.orange-square:hover {
  transform: translateY(-10px);
  /* Lift up when hovered */
}

/* Square titles */
.orange-square h3 {
  margin-top: 9px;
  font-size: 16px;
  color: #df1371;
  font-weight: 900;
}

/* Square details */
.orange-square p {
  font-size: 12px;
  color: #df1371;
  margin: -7px 0 0 0;
}




.quantity-selector {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
}

.quantity-btn {

  border: none;
  cursor: pointer;
  border-radius: 70px;
  color: black;
  font-size: 20px;
}

#quantity {
  width: 50px;
  text-align: center;
  font-size: 18px;
  border: none;
  border-radius: 50px;
}

.quantity-btn:active {
  background-color: #ddd;
}


.filter-container {
  position: sticky;
  /* Stick the filter to the left */
  top: 20px;
  /* Add some space from the top */
  left: 0;
  width: 280px;
  /* Adjust width for the filter container */
  padding: 28px;
  background-color: #f9f9f9;
  /* Background for the filter container */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
}

.filter-dropdown {
  display: block;
  /* Always visible */
  min-width: unset;
  /* Remove fixed width to fit the container */
  width: 100%;
  /* Full width inside the container */
  padding: 0;
  /* Remove padding, manage it with inner elements */
}

.filter-dropdown h4 {
  margin-bottom: 10px;
  /* Space below headings */
}

.filter-dropdown label {
  display: block;
  margin-bottom: 8px;
  /* Space between checkboxes */
  cursor: pointer;
}

.border-bottom {
  border-bottom: 1px solid #ccc;
  margin: 10px 0;
}

.done-button {
  display: none;
  /* Remove the 'Done' button */
}

.filter-container input[type="checkbox"] {
  margin-right: 10px;
}

.food-type-section,
.other-options-section {
  margin-bottom: 20px;
  /* Add spacing between sections */
}



/*--------------------------------------------------------------
# Stats Counter Section
--------------------------------------------------------------*/
.stats-counter {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/Background_Kleos_Website.jpg") center center;
  background-size: cover;
  padding: 100px 0;
}

@media (min-width: 1365px) {
  .stats-counter {
    background-attachment: fixed;
  }
}

.stats-counter .stats-item {
  padding: 30px;
  width: 100%;
}

.stats-counter .stats-item span {
  font-size: 48px;
  display: block;
  color: #fff;
  font-weight: 700;
}

.stats-counter .stats-item p {
  padding: 0;
  margin: 0;
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
}

.full-width-image {
  width: 100%;
  height: auto;
  object-fit: cover;

}


/* Carousel container */
.carousel-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Next and previous buttons */
.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
  padding: 10px;
  cursor: pointer;
  z-index: 1;
}

.carousel-prev {
  left: 10px;
}

.carousel-next {
  right: 10px;
}

/* Button hover effect */
.carousel-prev:hover,
.carousel-next:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.carousel-prev:disabled,
.carousel-next:disabled {
  background-color: rgba(0, 0, 0, 0.3);
  cursor: not-allowed;
}


/* Default state for filter dropdown */
.filter-dropdown {
  display: none;
  /* Hide by default */
}

/* Show dropdown when visible */
.filter-dropdown.active {
  display: block;
  /* Show dropdown */
}

/* Desktop styles: show filter normally */
@media (min-width: 993px) {
  .filter-dropdown {
    display: block;
    /* Show dropdown normally on desktop */
  }

  .dropdown-toggle {
    display: none;
    /* Hide dropdown button on desktop */
  }
}

/* Mobile and Tablet-specific styles */
@media (max-width: 992px) {
  .filter-container {
    position: relative;
    /* Ensure proper positioning */
  }

  .dropdown-toggle {
    background-color: #007bff;
    /* Bootstrap primary color */
    color: white;
    border-radius: 50px;
    padding: 10px;
    cursor: pointer;
    width: 100%;
    /* Full width */
    text-align: left;
    /* Align text to the left */
  }
}




#content {
  flex: 4;
  /* Allows content to grow */
}

.product-grid {
  text-align: center;
  margin-top: 20px;
}

.product-detail-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Centering the image and description */
}

.product-detail-container {
  display: flex;
  justify-content: center;
  /* Center the container horizontally */
  align-items: flex-start;
  /* Center content vertically */
  height: auto;
  max-width: 1200px;
  /* Set a max width for containment */
  margin: 0 auto;
  /* Center container on the page */
}

.product-detail-left,
.product-detail-right {
  flex: 1;
  padding: 20px;
}

.product-detail-left img {
  width: 100%;
  height: auto;
  border-radius: 30px;
}

.product-detail-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Arrange items in a column */
  justify-content: flex-start;
  /* Align content at the top */
  padding-left: 40px;
  padding-top: 20px;
  /* Optional: Add space at the top if needed */
}

.product-detail-right p,
.product-detail-right h2,
.product-detail-right h3 {
  color: black;
  /* Set text color to black */
}

.product-description {
  margin-top: 20px;
  /* Add margin top to the description */
  color: black;
  /* Set text color to black */
}

.back-button {
  margin-top: 20px;
  padding: 5px 10px;
  /* Smaller padding */
  font-size: 0.9rem;
  /* Smaller font size */
  background-color: #007bff;
  /* Blue color */
  color: white;
  border: none;
  border-radius: 20px;
  /* Round button */
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 80px;
  /* Fixed width for smaller button */
  text-align: center;
  /* Center text within the button */
}

.back-button:hover {
  background-color: #0056b3;
  /* Darker blue on hover */
}

.hidden {
  display: none !important;
}

.full-width {
  width: 100%;
  /* Make col-md-9 take the full width */
  flex: 0 0 100%;
  /* Ensure it doesn't shrink or grow */
}


.product-box {
  background-color: #a6dd3e;
  /* Set background color to green */
  border-radius: 50px;
  /* Rounded corners */
  margin-top: 20px;
  /* Margin above the box */
  width: 73px;
  margin-bottom: 20px;
  /* Margin below the box */
  padding: 10px;
  /* Optional: Add padding inside the box for better spacing */
  color: white;
  /* Set text color to white for better contrast */
}



#new-cart-button {
  background-color: #a6dd3e;
  /* Green background */
  color: #fff;
  /* White icon color */
  border: none;
  border-radius: 50%;
  /* Makes the button round */
  padding: 10px;
  /* Adjust padding for size */
  margin-left: 15px;
  /* Adds left margin */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  /* Adjust icon size */
}

#new-cart-button:hover {
  background-color: #2aa745;
  /* Darker green on hover */
}


.cart-detail-container {
  padding: 20px;
}

.back-button {
  background-color: #df1371;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}




/* New right panel styling */
#new-cart-panel {
  position: fixed;
  top: 20%;
  right: -50%;
  /* Hidden off-screen initially */
  width: 40%;
  height: 100vh;
  background-color: #f8f9fa;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
  transition: right 0.3s ease;
  /* Smooth slide effect */
  overflow-y: auto;
  z-index: 999999;
}

/* Right panel when active */
#new-cart-panel.active-new {
  right: 0;
  /* Slide in from the right */
}


/* Close button styling */
.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #333;
  cursor: pointer;
}

.close-button:hover {
  color: #ff0000;
  /* Red color on hover */
}


/* Style for the shopping cart button */

.cart-button-active {
  background-color: red;
  /* Change to your desired red color */
  color: white;
  /* Change text color if needed */
}



.pic {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.pic img {
  width: 100%;
  height: auto;
  transition: opacity 0.3s ease-in-out;
  border-radius: 40px;
  position: relative;
  /* Ensures image is above the shadow */
}

.pic .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #df1371;
  /* Button background color */
  color: white;
  /* Button text color */
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  z-index: 2;
  /* Ensures button is above the image */
}

.pic:hover img {
  background: RGBA(255, 255, 255, 0.7);
}

.scroll-to-section12 {
  background-color: #df1371;
  width: 100px;
  height: 50px;
  border-radius: 30px;
  color: white;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
  margin-bottom: 30px;

}


/*CARD CSS*/

.cart-button-highlight {
  background-color: #df1371 !important;
  /* Desired color */
  color: white !important;
  /* Adjust text/icon color */
  transition: background-color 0.3s ease-in-out;
  /* Smooth transition */
}


.info-icon {
  color: #a7a7a7 !important;
  margin-left: 8px;
  cursor: pointer;
  position: relative;
}

.tooltip-text {
  display: none;
  position: absolute;
  background-color: #c0c0c0;
  color: #fff;
  padding: 8px;
  top: 25px;
  left: 0;
  font-size: 0.875rem;
  max-width: 200px;
  z-index: 10;
  box-shadow: 0 4px 8px rgb(193, 182, 182);
  border-radius: 40%;
}

.info-icon:hover+.tooltip-text {
  display: block;
}

.tooltip-inner {
  color: #fff;
  text-align: center;
  border-radius: .35rem;
  background-color: #FA9C06;
  max-width: 400px;
  padding: 10px;
}


.month {
  padding: 20px 25px;
  background: #FA9C06;
  text-align: center;
  color: white !important;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

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

.month ul li {
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #fff;
}

.month .prev,
.month .next {
  float: left;
  padding-top: 5px;
  cursor: pointer;
  font-size: 18px;
}

.month .next {
  float: right;
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #ddd;
  text-align: center;
  padding: 10px 0;
  margin: 0;
  list-style: none;
}

.weekdays li {
  color: #666;
}

.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  padding: 10px 0;
  background: #eee;
  margin: 0;
  list-style: none;
}

.days li {
  width: 40px;
  /* Fixed size for consistent circles */
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: auto;
  font-size: 14px;
  color: #777;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.days li:hover:not(.disabled) {
  background-color: #ddd;
}

.days li.active {
  background: #FA9C06;
  color: white;
}

.days li.disabled {
  color: #ccc;
  cursor: not-allowed;
}

.days li.disabled:hover {
  background: none;
}

/* Responsive Adjustments */
@media screen and (max-width: 720px) {
  .days li {
    width: 35px;
    height: 35px;
    font-size: 12px;
  }
}

@media screen and (max-width: 420px) {
  .days li {
    width: 30px;
    height: 30px;
    font-size: 10px;
  }
}

#carouselExampleCaptions {
  width: 80vw;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.carousel-inner {
  width: 100%;
}

.new {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline;
}

/* Controls */
i.fa-arrow-right,
i.fa-arrow-left {
  background: none;
  border: 2px solid #df1371;
  color: black;
  padding: 10px;
  border-radius: 100%;
  transition: background .6s ease;
}

.control-btn {
  position: absolute;
  top: -1em;
  right: 5em;
}

.carousel-item .card {
  height: 20em;
  height: fit-content;
}

.control-btn i.fa-arrow-left {
  position: absolute;
  right: 6em;
}

i.fa-arrow-right:hover,
i.fa-arrow-left:hover {
  background: #df1371;
  color: rgb(255, 255, 255);
}

.carousel-control-next {
  margin: 0 3em;
}

/* Indicators */

.carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  border: 2px solid #df1371;
}

.carousel-indicators .active {
  opacity: 1;
  background-color: #df1371;
}

@media screen and (max-width: 900px) {
  #carouselExampleCaptions {
    width: 70vw;
    height: 70vw;
  }

  .card img {
    width: 100%;
  }

  .card .name {
    margin-top: 1em;
    font-size: 1em;
    font-weight: 700;
  }

  .card .role {
    font-size: 0.8em;
  }

  .card .work-at {
    font-size: 0.6em;
  }
}

@media screen and (max-width: 576px) {
  #carouselExampleCaptions {
    width: 70vw;
    height: 70vh;
  }

  .carousel-item .card .card-body {
    position: absolute;
    bottom: 20px;
    left: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
  }

}

.btn.btn-secondary {
  background: #a6dd3e;
  border-color: #a6dd3e !important;
}

.btn.btn-secondary:hover {
  background: #95c739;
  border-color: #95c739 !important;
}

/* 
---------------------------------------------
Features Section Styles
--------------------------------------------- 
*/

.features-section {
  padding: 3rem 0;
  background-color: #f8f9fa;
}

.feature-box {
  text-align: center;
  padding: 2rem;
  height: 100%;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.feature-icon {
  margin-bottom: 1.5rem;
}

.feature-icon i {
  color: #df1371;
  font-size: 3rem;
}

.feature-title {
  color: #df1371;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.feature-description {
  color: #6c757d;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0;
}

/* Responsive adjustments for features */
@media (max-width: 768px) {
  .features-section {
    padding: 2rem 0;
  }

  .feature-box {
    padding: 1.5rem;
    margin-bottom: 2rem;
  }

  .feature-icon i {
    font-size: 2.5rem;
  }

  .feature-title {
    font-size: 1.1rem;
  }

  .feature-description {
    font-size: 0.9rem;
  }
}