:root { --primary-color: #ea8825; --white: #fff; --black: #323232; --grey: #727272; --light-grey: #f7f8fa; --primary-font: 'Inter', sans-serif; --secondary-font: 'Syne', sans-serif; --custom-ease: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); --shadow: 0 0 16px rgba(0, 0, 0, 0.16); }
/* =================reset css starts here=================  */
* { margin: 0; padding: 0; }
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
body,
html,
form,
fieldset { margin: 0; padding: 0; outline: none; border: 0; }
a { text-decoration: none; border: 0; outline: 0; }
ul { list-style: none; }
a:focus,
input:focus,
textarea:focus,
*:focus { outline: 0 !important; }
/* =================reset css ends here================= */
/* =================animate css starts here================= */
.animated { -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
@-webkit-keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; }
@-webkit-keyframes fadeInUp {
  from { opacity: 0; -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); }
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@keyframes fadeInUp {
  from { opacity: 0; -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); }
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }
/* =================animate css ends here================= */
/* =================core css starts here================= */
html { font-size: 16px; line-height: 1.5; }
body { font-size: 1rem; line-height: 1.5; font-weight: 400; font-family: var(--primary-font); color: var(--grey); background: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body.nav-open { overflow: hidden; }
.container { width: calc(100% - 16px); max-width: 1164px; }
a,
input,
button { display: inline-block; text-decoration: none; color: inherit; outline: none; transition: all 0.2s ease-in; -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); }
a img { border: 0px none; }
a:hover { outline: none; color: var(--primary-color); text-decoration: none; }
a:active { outline: none; text-decoration: none; }
a:focus { outline: none; outline-offset: 0px; text-decoration: none; color: inherit; }
.os-animation { opacity: 0; }
.os-animation.animated { opacity: 1; }
img { max-width: 100%; border: 0; height: auto; }
.parallax-img img { width: 100%; height: 120% !important; object-fit: cover; }
h1, h2, h3, h4, h5, h6 { margin: 0px; padding: 0px; margin-bottom: 1rem; line-height: 1.2; font-weight: 700; color: inherit; font-family: var(--secondary-font); color: var(--black); }
h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.75rem; }
h6 { font-size: 0.5rem; }
p { margin: 0px; padding: 0px; margin-bottom: 1.5rem; }
strong { font-weight: 700; }
b { font-weight: 400; }
p:last-child { margin-bottom: 0; }
.btn { border-radius: 30px; font-weight: 1000; padding: 14px 50px; min-width: 140px; font-size: 1rem; line-height: 20px; z-index: 1; border: 0; border-radius: 3px; box-shadow: none; transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); position: relative; flex-shrink: 0; border: 2px solid transparent; }
.btn-default { background: var(--primary-color); color: #fff; }
.btn-default:hover { color: var(--primary-color); border-color: var(--primary-color); }
.btn-bordered { border-color: #fff; color: #fff; }
.btn-bordered:hover { background-color: #fff; color: var(--black); }
.btn-block { width: 100%; }
.btn.btn-xs { padding: 14px 20px; }
.btn+.btn { margin-left: 10px; }
hr { border-top-color: var(--black); margin: 80px 0; opacity: 0.15; }
.text-white { color: var(--white); }
.text-black { color: var(--black); }
ul:not([class]) { list-style: none; margin-bottom: 24px; text-align: left; }
ul:not([class])>li { padding-left: 22px; position: relative; margin-bottom: 18px; }
ul:not([class])>li:last-child { margin-bottom: 0; }
ul:not([class])>li:before { content: ""; position: absolute; left: 0px; top: 9px; background: var(--black); height: 8px; width: 8px; border-radius: 50%; }
ol:not([class]) { margin-bottom: 24px; text-align: left; list-style-position: outside; margin-left: 18px; padding: 0; }
ol:not([class])>li { position: relative; margin-bottom: 18px; }
ol:not([class])>li:last-child { margin-bottom: 0; }
#smooth-wrapper { overflow-x: hidden !important; }
.view-all-cta { margin-top: 100px; position: relative; z-index: 9; }
/* =================core css ends here================= */
/* ================= Header Start ================= */
#header { color: var(--white); background: transparent; position: fixed; left: 0; top: 0; right: 0; padding: 0; z-index: 9999; transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); display: flex; align-items: center; }
.fixed #header { background: var(--white); box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1); color: var(--black); }
.navbar { padding: 0; width: 100%; height: 160px; transition: var(--custom-ease); }
.navbar-brand { width: 120px; padding: 0; margin: 0; position: relative; z-index: 999; filter: brightness(0) invert(1); }
.navbar-brand img { width: 100%; }
.navbar-expand-xl .navbar-nav .nav-item { margin: 0 0 0 20px; }
.navbar-expand-xl .navbar-nav .nav-link { font-size: 0.875rem; line-height: 100px; font-weight: 600; color: inherit; padding: 0; margin: 0; position: relative; text-transform: uppercase; transition: none; }
.navbar-expand-xl .navbar-nav .nav-item:hover .nav-link,
.navbar-expand-xl .navbar-nav .nav-item .nav-link.active { color: var(--primary-color); }
.dropdown-toggle::after { display: none; }
.navbar-nav:not(.sm-collapsible) .nav-link .sub-arrow { display: none; }
.nav-inside { width: 100%; padding: 0; position: relative; }
.nav-inside-content { padding: 30px 0; }
.fixed .navbar-brand { width: 70px; filter: none; }
.fixed .navbar { height: 100px; }
.nav-open .navbar-brand { filter: brightness(0); }
@media only screen and (min-width:1200px) {
  .navbar-nav>li>.dropdown-menu { display: block !important; top: 100% !important; left: -15px; margin-top: 10px !important; opacity: 0; visibility: hidden; background: var(--white); color: var(--black); min-width: 200px; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.16); border: 0; border-radius: 5px; transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; }
  .fixed .navbar-nav>li>.dropdown-menu { border-radius: 0 0 5px 5px; }
  .dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; margin-top: 0px !important; transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); -moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); }
  .dropdown-item { color: var(--black); padding: 10px 15px; font-weight: 800; font-size: 0.875rem; }
  .dropdown-item:focus,
  .dropdown-item:hover { color: var(--primary-color); background: transparent; }
  .navbar-expand-xl .navbar-nav .nav-link:after { content: ""; position: absolute; left: 50%; right: 0; top: 50%; margin-top: 15px; width: 0; height: 2px; background: var(--primary-color); border-radius: 30px; transform: translateX(-50%); transition: 0.3s; }
  .navbar-expand-xl .navbar-nav .nav-item:hover .nav-link:after,
  .navbar-expand-xl .navbar-nav .nav-item .nav-link.active:after { width: 100%; }
  .dropdown-toggle { display: none; }
  .dropdown-item:focus,
  .dropdown-item:hover,
  .dropdown-item.active { color: var(--primary-color); background: transparent; }
}
.nav-item .dropdown-toggle {width: 30px;height: 30px;position: absolute;top: 0;right: 26px;font-style: normal;font-size: 1.6rem;line-height: 1;text-align: center;color: var(--black);}
.nav-item .dropdown-toggle:before { content: "\2b"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.nav-item .dropdown-toggle.show:before { content: "\f068"; }
.header-review{position: absolute;right: 0;top: 0px;padding: 5px 10px;background: #fff;color: #000 !important;border-radius: 4px;font-size: 12px;line-height: 20px;white-space:nowrap;}
.hero-review{padding: 5px 10px;background: #27c7093b;color: #fff !important;border-radius: 29px;font-size: 12px;line-height: 20px;white-space:nowrap;border: solid 2px #26c709a3;width: fit-content;margin: 0 auto;}
.hero-review:hover{transform: scale(1.05);}
span.hr-star img {width: 14px;height: 14px;}
span.hr-star {margin-right: 5px;}
/* ================= Header End ================= */
.content-container { padding: 100px 0 50px 0; }
.text-orange { color: var(--primary-color); }
.bg-grey { background-color: var(--light-grey); }
.heading h4 { padding-bottom: 10px; position: relative; margin-bottom: 10px; }
.heading h4:after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 70px; background: var(--primary-color); }
.heading.text-center h4:after { left: 50%; transform: translateX(-50%); }
.swiper-button { position: static; margin: 0; width: 30px; height: 30px; margin: 0 5px; }
.swiper-button-main { display: flex; justify-content: end; margin-top: 20px; }
.swiper-button::after { font-size: .875rem; background: transparent; color: var(--primary-color); width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-weight: 600; border-radius: 50%; border: 2px solid var(--primary-color); transition: all 0.2s; }
.swiper-button:not(.swiper-button-disabled):hover:after { background: var(--primary-color); color: #fff; }
/* ==================== hero container css Start ==================== */
.hero-container-bg>img { width: 100%; height: 100%; object-fit: cover; }
.hero-container { min-height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; color: #fff; padding: 180px 0 100px; }
.hero-container-bg { position: absolute; left: 0; right: 0; bottom: 0; top: 0; width: 100%; height: 100%; z-index: -1; }
.hero-container-bg::after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background-color: rgb(0 0 0 / 50%); }
.hero-content h1 { font-size: 3rem; color: #fff; font-weight: 600; }
/* ==================== hero container css End ==================== */
/* ==================== inner-hero container css Start ==================== */
.inner-hero-container-bg>img { width: 100%; height: 100%; object-fit: cover; }
.inner-hero-container { min-height: 500px; position: relative; display: flex; justify-content: center; align-items: center; color: #fff; padding: 180px 0 70px; }
.inner-hero-container-bg { position: absolute; left: 0; right: 0; bottom: 0; top: 0; width: 100%; height: 100%; z-index: -1; }
.inner-hero-container-bg::after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background-color: rgb(0 0 0 / 50%); }
.inner-hero-content h1 { font-size: 3rem; color: #fff; font-weight: 600; margin-bottom: 0; }
/* ==================== inner-hero container css End ==================== */
/* ==================== Text Image Container CSS Start ================== */
.tic-text .heading { margin-bottom: 30px; }
.tic-image { width: 100%; height: 100%; position: relative; }
.tic-image>img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; right: 0; left: 0; bottom: 0; }
.itc-box-icon { width: 32px; height: 32px; background-color: var(--primary-color); border-radius: 3px; color: #ffffff; line-height: 32px; text-align: center; position: absolute; left: 0; top: 3px; }
.itc-box { padding-left: 50px; }
.itc-item+.itc-item { margin-top: 30px; }
.itc-box-text h6 { font-size: 1.25rem; margin-bottom: 0; }
.tic-text { padding: 15px 0; }
.wb-frame {width: 100%;height: 100%;z-index: 1;position: relative;}
.wb-panel {position: absolute;height: 85%;top: 8%;z-index: 0;width: 41%;}
.wb-panel img { width: 100%; height: 100%; }
.wb-panel-right { right: 9%; }
.wb-panel.wb-panel-left { left: 9%; }
.wb-panel-left img { transform: translateX(-100%); }
.wb-panel-right img { transform: translateX(100%); }
.floating { animation-name: floating; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
@keyframes floating {
  0% { transform: translate(0, 0px); }
  50% { transform: translate(0, 15px); }
  100% { transform: translate(0, -0px); }
}
.windowBug { width: 20px; position: absolute; z-index: -2; }
.windowBug img { width: 100%; }
.windowBug1 { left: 34%; top: 20%; animation-delay: 0.1s; }
.windowBug2 { left: 60%; top: 35%; animation-delay: 0.2s; }
.windowBug3 { left: 39%; top: 57%; animation-delay: 0.3s; }
.windowBug4 { left: 57%; top: 75%; animation-delay: 0.1s; }
/* ==================== Text Image Container CSS End ==================== */
/* ==================== Service List Container CSS Start ================== */
.service-item { padding: 0 12px; margin-bottom: 24px; width: 33.33%; }
.service-list { margin-bottom: -24px; margin-left: -12px; width: calc(100% + 24px); }
*+.service-list { margin-top: 50px; }
.service-box { padding: 30px; height: 100%; background-color: var(--light-grey); border-radius: 10px; }
.service-box-icon { -webkit-text-stroke: 1px var(--primary-color); color: transparent; font-size: 50px; width: 50px; height: 50px; display: flex; margin: 0 auto 21px; flex-shrink: 0; }
.service-box-text h6 { word-break: break-word; }
/* ==================== Service List Container CSS End ==================== */
.form-box-main .nav-pills { margin-bottom: 30px; }
.form-box-main .nav-link { min-width: 140px; border-radius: 0; background-color: var(--white); font-weight: 600; color: var(--black); padding: 10px; }
.form-box-main .nav-link.active { background-color: var(--primary-color); }
/* ==================== Video Container CSS Start ================== */
.video-box { margin-top: 50px; }
.video-box-holder { min-height: 300px; }
.video-box { border: 5px solid #fff; border-radius: 5px; box-shadow: 2px 2px 15px 0 rgb(0 0 0 / 30%); }
.video-gallery-box-holder video { width: 100%; }
.video-gallery-box { border: 5px solid #fff; border-radius: 5px; box-shadow: 2px 2px 15px 0 rgb(0 0 0 / 30%); }
.video-gallery-item.swiper-slide { width: 555px; padding: 15px; }
.portrait-video-holder{width: 300px; margin: 0 auto;}
.portrait-video-box{width: 100%;position: relative;display: flex;justify-content: center;margin: 0 auto;width: 100%;padding-bottom: 178%;background: #222;border-radius: 20px;}
.portrait-video-box video, .portrait-video-box iframe{position:absolute;height: 100%;object-fit: contain; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);border-radius: 20px;overflow: hidden;width: 100%;}
.portrait-video-item.swiper-slide { width:364px; }
/* ==================== Video Container CSS End ==================== */
/* ==================== Testimonial Container CSS Start ================== */
.testimonial-item { width: 364px; }
.testimonial-item { margin: 0 0 0; height: auto; }
.testimonial-box { background: var(--light-grey); padding: 32px; text-align: center; font-size: .875rem; position: relative; height: 100%; display: flex; flex-flow: column; }
.testimonial-name h6 { margin-bottom: 0; font-size: 1rem; }
.testimonial-name { padding-top: 24px; margin-top: auto; }
.testimonial-profile { width: 80px; height: 80px; margin: 0 auto; border-radius: 50%; margin-top: -60px; position: absolute; left: 50%; transform: translate(-50%, -50%); overflow: hidden; box-shadow: 2px 2px 20px 0 rgb(0 0 0 / 30%); }
.testimonial-list { margin-top: 50px; }
.testimonial-profile>img { width: 100%; height: 100%; object-fit: cover; }
/* ==================== Testimonial Container CSS End ==================== */
/* ==================== CTA Container CSS Start ================== */
.cta-container-bg { position: absolute; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0; background-attachment: fixed; }
.cta-container-bg>img { width: 100%; height: 100%; object-fit: cover; }
.cta-container { padding: 100px 0; }
.cta-content h4 { color: #fff; margin-bottom: 0; margin-top: 20px; }
.cta-content p { margin-bottom: 0; }
.cta-content .btn-default { margin-top: 40px; }
.cta-container-bg::after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background-color: rgb(0 0 0 / 50%); }
/* ==================== CTA Container CSS End ==================== */
/* ========================================
   Footer Partners
   ======================================== */
.footer-partners {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
  margin-top: 22px;
  margin-bottom: 26px;
}
.footer-partner-item {
  width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer-partner-label {
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 1.2;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}
.footer-partner-link {
  display: block;
  line-height: 0;
  transition: opacity 0.2s ease;
}
.footer-partner-link:hover {
  opacity: 0.8;
}
/* Einheitliche Fläche für beide Logos */
.footer-partner-logo-box {
  width: 120px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-partner-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 120px;
  max-height: 64px;
  object-fit: contain;
}
/* Smartphone */
@media (max-width: 767px) {
  .footer-partners {
    gap: 20px;
    margin-top: 18px;
    margin-bottom: 22px;
  }
  .footer-partner-item {
    width: 115px;
  }
  .footer-partner-logo-box {
    width: 105px;
    height: 56px;
  }
  .footer-partner-logo {
    max-width: 105px;
    max-height: 56px;
  }
  .footer-partner-label {
    font-size: 10px;
    letter-spacing: 0.8px;
  }
}
/* Aktions-Flyer Button */
.footer-flyer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: #5c8b32;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 4px;
  text-decoration: none;
  letter-spacing: 0.3px;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}
.footer-flyer-button:hover,
.footer-flyer-button:focus {
  color: #5c8b32;
  background: #fff;
  border-color: #5c8b32;
  text-decoration: none;
}
/* Smartphone */
@media (max-width: 767px) {
  .footer-flyer-button {
    margin-top: 10px;
    padding: 6px 11px;
    font-size: 10px;
  }
}
/* ========================================
   Charity / Tierheim Slideout
   ======================================== */
.charity-slideout {
     position: fixed;
     top: 305px;
     right: -280px;
     width: 280px;
     z-index: 9998;
     transition: right 0.3s ease;
   }
   .charity-slideout.is-open {
     right: 0;
   }
@media (max-width: 767px) {
     .charity-slideout {
       position: fixed !important;
       top: 225px !important;
       right: -240px;
       width: 240px;
       z-index: 9998;
     }
     .charity-slideout.is-open {
       right: 0;
     }
   }
/* Tierheim-Icon rechts am Bildschirmrand */
.charity-slideout-toggle {
  position: absolute;
  right: 100%;
  top: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}
.charity-slideout-toggle:hover {
  background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.20);
}
/* Logo innerhalb des Icons */
.charity-slideout-toggle img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Ausklappbarer Bereich */
.charity-slideout-panel {
  width: 280px;
  padding: 22px;
  background: #fff;
  border-radius: 0;
  box-shadow: 0 5px 22px rgba(0, 0, 0, 0.16);
  text-align: center;
}
/* kleine Headline */
.charity-slideout-label {
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 600;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 1px;
}
/* Logo im geöffneten Panel */
.charity-slideout-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 120px;
  max-height: 85px;
  margin: 0 auto 15px;
  object-fit: contain;
}
/* Beschreibung */
.charity-slideout-text {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  color: #555;
}
/* Buttons */
.charity-slideout-button {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px 14px;
  color: #fff;
  background-color: #5c8b32;
  border: 1px solid #5c8b32;
  border-radius: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}
.charity-slideout-button:hover,
.charity-slideout-button:focus {
  color: #5c8b32;
  background-color: #fff;
  border-color: #5c8b32;
  text-decoration: none;
}
/* ========================================
   Mobile
   ======================================== */
@media (max-width: 767px) {
  .charity-slideout {
    top: calc(50% + 95px);
    right: -240px;
    width: 240px;
  }
  .charity-slideout.is-open {
    right: 0;
  }
  .charity-slideout-toggle {
    width: 54px;
    height: 54px;
    padding: 6px;
  }
  .charity-slideout-panel {
    width: 240px;
    padding: 18px;
  }
  .charity-slideout-logo {
    max-width: 105px;
    max-height: 70px;
  }
}
/* ========================================
   Partnerlogo unter Leistungen
   ======================================== */
.leistungen-partner {
  width: 100%;
  background: #fff;
  text-align: center;
  padding: 10px 0 60px;
}
.leistungen-partner-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.leistungen-partner-label {
  font-size: 11px;
  line-height: 1.2;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 7px;
}
.leistungen-partner a {
  display: inline-block;
  line-height: 0;
}
.leistungen-partner-logo {
  display: block;
  width: 200px;
  height: auto;
  transition: opacity 0.2s ease;
}
.leistungen-partner a:hover .leistungen-partner-logo {
  opacity: 0.8;
}
/* Mobile */
@media (max-width: 767px) {
  .leistungen-partner {
    padding: 8px 0 20px;
  }
  .leistungen-partner-logo {
    width: 68px;
  }
  .leistungen-partner-label {
    font-size: 10px;
  }
}
/* ==================== Form Container CSS Start ================== */
.link-btn { font-weight: 600; width: fit-content; position: relative; padding-bottom: 5px; }
.link-btn i {height: 16px;margin-right: 10px;width: 16px;display: flex;justify-content: center;align-items: center;}
.link-btn i>img {width: 100%;height: 100%;object-fit: cover;}
.link-btn:after { content: ""; position: absolute; left: 50%; right: 0; width: 0; height: 2px; background: var(--primary-color); border-radius: 30px; transform: translateX(-50%); transition: 0.3s; bottom: 0; }
.link-btn:hover:after { width: 100%; }
.link-btn:focus { color: var(--primary-color); }
.form-container-head .link-btn { margin: 0 auto; }
/* ==================== Form Container CSS End ==================== */
/* ==================== Footer Container CSS Start ================== */
.footer-content { width: 280px; margin: 0 auto; }
.footer-logo { display: block; width: 140px; margin: 0 auto; }
#footer { padding: 100px 0px; background-color: var(--light-grey); }
.credit-text { margin-top: 20px; }
.footer-menu-item { margin: 0 5px; }
.footer-menu-list { margin-top: 10px; line-height: 1; }
.social-link-list { font-size: 30px; margin-top: 15px; }
.social-link-item { margin: 0 5px; }
.social-link-box {width: 30px;height: 30px;display: flex;justify-content: center;align-items: center;filter: brightness(0) invert(.4);}
.social-link-box:hover {
    filter: none;
}
.social-link-box>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* ==================== Footer Container CSS End ==================== */
/* ==================== Footer Container CSS Start ================== */
*+.gallery-slider { margin-top: 50px; }
.gallery-img-box { border-radius: 5px; border: 5px solid #fff; box-shadow: 2px 2px 20px 0 rgb(0 0 0 / 30%); padding-bottom: 80%; position: relative; }
.gallery-img-box img { width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0; }
.gallery-box:before { content: "\2b"; font-family: "Font Awesome 6 Free"; font-weight: 900; opacity: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 24px; line-height: 1; color: #fff; transition: all 0.2s ease-in; }
.gallery-box:hover:before { opacity: 1; }
.coustom-effect, .coustom-effect2 { overflow: visible; }
.gallery-item.swiper-slide { width: 364px; }
.mfp-bg { z-index: 99998 !important; }
.mfp-wrap { z-index: 99999 !important; }
@media all and (min-width:1200px) {
  .coustom-effect .swiper-slide { opacity: 0; transition: .3s; }
  .coustom-effect .swiper-slide.swiper-slide-active { opacity: 1; }
  .coustom-effect .swiper-slide.swiper-slide-next { opacity: 1; }
  .coustom-effect .swiper-slide.swiper-slide-next+.swiper-slide { opacity: 1; }
  .coustom-effect2 .swiper-slide { opacity: 0; transition: .3s; }
  .coustom-effect2 .swiper-slide.swiper-slide-active { opacity: 1; }
  .coustom-effect2 .swiper-slide.swiper-slide-next { opacity: 1; }
}
/* ==================== Footer Container CSS End ==================== */
/* ==================== Form Container CSS Start ==================== */
.form-control::placeholder { color: rgb(0 0 0 / 50%); font-weight: 500; }
.form-control { color: #000; border-color: rgb(0 0 0 / 10%); border-radius: 3px; padding: 12px; margin-bottom: 0; }
.form-input-outer { margin-bottom: 30px; }
.form-control:focus { box-shadow: none !important; border-color: rgb(115 115 115 / 50%); border-left: 3px solid var(--primary-color); }
textarea.form-control { height: 200px; resize: none; }
.form-box-main { margin-top: 50px; }
.form-control[type=file] { padding: 10px; }
.form-control[type=file]:focus { border-left: 1px solid rgb(115 115 115 / 50%); }
.custom-checkbox { font-size: 1rem; color: #323232; line-height: 30px; padding: 0; margin-bottom: 0; }
.custom-checkbox .form-check-label a { font-weight: 600; text-decoration: underline; min-height: 30px; }
.custom-checkbox input { opacity: 0; position: relative; }
.custom-checkbox .form-check-label:after { content: ''; width: 24px; height: 24px; border: 2px solid #323232; position: absolute; left: 0; top: 3px; border-radius: 4px; }
.custom-checkbox .form-check-label { position: relative; padding-left: 30px; cursor: pointer; }
.custom-checkbox .form-check-label:before { content: ''; width: 12px; height: 6px; position: absolute; left: 6px; top: 11px; border: 2px solid #323232; border-top: 0; border-right: 0; transform: rotate(-45deg) scale(0); transition: all 0.3s; }
.custom-checkbox input:checked~.form-check-label:before { transform: rotate(-45deg) scale(1); }
div#responseDiv { display: block; width: 100%; font-size: 18px; line-height: 1.4; color: #f00; }
#responseDiv.success { color: #129306; }
form .btn:after { content: ''; position: absolute; top: 15px; right: 5px; width: 20px; height: 20px; border-radius: 50%; background: #fff url(../images/ajax-loader.gif) no-repeat center/18px 18px; opacity: 0; }
form.loading .btn:after { opacity: 1; }
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
input[type=number]{-moz-appearance: textfield;}
/* ==================== Form Container CSS End ====================== */
/*======= WHATSAPP ==========*/
.float {position: fixed;width: 60px;height: 60px;bottom: 40px;right: 40px;color: #ea8825;border-radius: 50px;font-size: 60px;z-index: 100;display: flex;}
.float:hover svg path {fill: #25d366;}
.product-price-item { width: 33.33%; padding-right: 20px; }
.product-price-list { width: 100%; flex-wrap: wrap; }
.product-color { font-size: 1.5rem; color: var(--black); font-weight: 700; font-family: var(--secondary-font); }
.product-price { font-size: 2rem; font-weight: 800; color: var(--primary-color); line-height: 1; }
.calculator-result-box h4 { margin-bottom: 0; font-size: 1.5rem; line-height: 1.4; }
.product-detail-item { margin-top: 30px; }
.product-detail-box h4+h4 { margin-left: 20px; }
.crb-right { width: 100%; margin-top: 20px; }
.product-box-detail { width: 100%; }
#doorResultBox,
#windowResultBox { display: none; }
label.error { font-size: 14px; font-weight: 500; color: #f00; position: relative; top: auto; left: auto; opacity: 1; display: block; }
.custom-error label.error{position: absolute; left: 0; top: 100%;}
/* ================= contact-info Start ================= */
.contact-info-container { max-width: 450px; padding:  0; position: fixed; top: 0; right: 0px; bottom: 0; transform: translateX(100%); z-index: 99999; transition: all .3s cubic-bezier(.77, .2, .05, 1); }
.contact-info-btn { background: var(--white); position: absolute; top: 150px; left: -66px; padding: 15px; border-radius: 0; cursor: pointer; width: 66px; height: 66px; box-shadow: -10px 0 25px  rgba(0, 0, 0, 0.1) }
.contact-info-btn img { width: 100%; height: 100%; object-fit: contain; }
.contact-info-content { width: 100%; height: 100%; padding: 80px 40px 40px; overflow: auto; font-size: 18px; line-height: 26px; background: var(--white); box-shadow: 0 0 25px  rgba(0, 0, 0, 0.1); position: relative; }
.close-btn { position: absolute; top: 30px; left: 35px; opacity: 1; background: var(--white); }
.ci-header h3 { font-size: 28px; font-weight: 400; }
.ci-header strong { color: var(--black); }
.ci-item img { position: absolute; width: 40px; top: 50%; left: 0px; transform: translateY(-50%); object-fit: contain; }
.ci-item { position: relative; padding-left: 60px; }
.ci-content h4 { font-size: 22px; margin-bottom: 0; }
.contact-info-list { margin-top: 50px; gap: 40px; display: flex; flex-flow: column; }
.ci-content a { font-size: 18px; color: var(--primary-color); font-weight: 700; }
.toggled-tab .contact-info-container { transform: translateX(0px); }
/* ================= contact-info End ================= */
/* ============================ Magnific Popup start ============================= */
.mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; }
.mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; }
.mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; box-sizing: border-box; }
.mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; }
.mfp-align-top .mfp-container:before { display: none; }
.mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; }
.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; }
.mfp-ajax-cur { cursor: progress; }
.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; }
.mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; }
.mfp-auto-cursor .mfp-content { cursor: auto; }
.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.mfp-loading.mfp-figure { display: none; }
.mfp-hide { display: none !important; }
.mfp-preloader { color: #CCC; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; }
.mfp-preloader a { color: #CCC; }
.mfp-preloader a:hover { color: #FFF; }
.mfp-s-ready .mfp-preloader { display: none; }
.mfp-s-error .mfp-content { display: none; }
button.mfp-close,
button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; box-shadow: none; touch-action: manipulation; }
button::-moz-focus-inner { padding: 0; border: 0; }
.mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; padding: 0 0 18px 10px; color: #FFF; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace; }
.mfp-close:hover,
.mfp-close:focus { opacity: 1; }
.mfp-close:active { top: 1px; }
.mfp-close-btn-in .mfp-close { color: #333; }
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close { color: #FFF; right: -6px; text-align: right; padding-right: 6px; width: 100%; }
.mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 18px; white-space: nowrap; }
.mfp-arrow { position: absolute; opacity: 0.65; margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent; }
.mfp-arrow:active { margin-top: -54px; }
.mfp-arrow:hover,
.mfp-arrow:focus { opacity: 1; }
.mfp-arrow:before,
.mfp-arrow:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; }
.mfp-arrow:after { border-top-width: 13px; border-bottom-width: 13px; top: 8px; }
.mfp-arrow:before { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; }
.mfp-arrow-left { left: 0; }
.mfp-arrow-left:after { border-right: 17px solid #FFF; margin-left: 31px; }
.mfp-arrow-left:before { margin-left: 25px; border-right: 27px solid #3F3F3F; }
.mfp-arrow-right { right: 0; }
.mfp-arrow-right:after { border-left: 17px solid #FFF; margin-left: 39px; }
.mfp-arrow-right:before { border-left: 27px solid #3F3F3F; }
.mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; }
.mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; }
.mfp-iframe-holder .mfp-close { top: -40px; }
.mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; }
.mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; }
/* Main image in popup */
img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; }
/* The shadow behind the image */
.mfp-figure { line-height: 0; }
.mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444; }
.mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 14px; }
.mfp-figure figure { margin: 0; }
.mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; }
.mfp-title { text-align: left; line-height: 18px; color: #F3F3F3; word-wrap: break-word; padding-right: 36px; }
.mfp-image-holder .mfp-content { max-width: 100%; }
.mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; }
@media screen and (max-width:800px) and (orientation:landscape), screen and (max-height:300px) {
  /**
  * Remove all paddings around the image on small screen
  */
  .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; }
  .mfp-img-mobile img.mfp-img { padding: 0; }
  .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; }
  .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; }
  .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; box-sizing: border-box; }
  .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; }
  .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; }
  .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; }
}
@media all and (max-width:900px) {
  .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); }
  .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; }
  .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; }
  .mfp-container { padding-left: 6px; padding-right: 6px; }
}
/* ========================= Magnific Popup end ==============================*/
/* ==========================================
! Large devices (desktops, less than 1400px)
=========================================== */
@media (max-width:1399.98px) { }
/* ==========================================
! Large devices (desktops, less than 1200px)
=========================================== */
@media (max-width:1199.98px) {
  h1 { font-size: 2.5rem; }
h2 { font-size: 2.0rem; }
h3 { font-size: 1.35rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.75rem; }
h6 { font-size: 0.5rem; }
  .navbar { height: 100px; }
  .navbar-brand { width: 70px; }
  .navbar-toggler { width: 94px; height: 40px; height: 60px; border-radius: 0; cursor: pointer; text-decoration: none; padding: 0; border: 0; background: transparent; margin: 0; position: absolute; right: 0; top: 50%; z-index: 999; transform: translateY(-50%); }
  .navbar-default .navbar-toggler:hover,
  .navbar-default .navbar-toggler:focus { background: transparent; }
  .navbar-toggler:not([class="collapsed"]),
  .navbar-toggler:not([class="collapsed"]):focus,
  .navbar-toggler:not([class="collapsed"]):hover { background: transparent; box-shadow: none; }
  .navbar-toggler.collapsed,
  .navbar-toggler.collapsed:focus,
  .navbar-toggler.collapsed:hover { background: transparent; }
  .home .navbar-toggler.collapsed,
  .home .navbar-toggler.collapsed:focus,
  .home .navbar-toggler.collapsed:hover { background: transparent; }
  .navbar-toggler .navbar-toggler-icon { position: relative; display: inline-block; width: 30px; height: 3px; color: var(--primary-color) !important; text-indent: -55px; margin-top: 0; background: transparent !important; transition: var(--custom-ease); -webkit-transition: var(--custom-ease); vertical-align: middle; }
  .navbar-toggler .navbar-toggler-icon:before,
  .navbar-toggler .navbar-toggler-icon:after { content: ""; width: 30px; height: 3px; background: var(--primary-color); position: absolute; left: 0; transition: var(--custom-ease); }
  .navbar-toggler.collapsed .navbar-toggler-icon { background: var(--primary-color) !important; }
  .navbar-toggler.collapsed .navbar-toggler-icon:before,
  .navbar-toggler.collapsed .navbar-toggler-icon:after { background: var(--primary-color); }
  .navbar-toggler.collapsed .navbar-toggler-icon:before { top: -10px; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); }
  .navbar-toggler .navbar-toggler-icon:before { top: 0; -webkit-transform: rotateZ(45deg); -moz-transform: rotateZ(45deg); -ms-transform: rotateZ(45deg); -o-transform: rotateZ(45deg); transform: rotateZ(45deg); }
  .navbar-toggler.collapsed .navbar-toggler-icon:after { bottom: -10px; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); }
  .navbar-toggler .navbar-toggler-icon:after { bottom: 0; -webkit-transform: rotateZ(-45deg); -moz-transform: rotateZ(-45deg); -ms-transform: rotateZ(-45deg); -o-transform: rotateZ(-45deg); transform: rotateZ(-45deg); }
  .navbar-collapse,
  .navbar-collapse.collapsing { width: 100%; height: 100%; position: fixed; top: 0; left: 100%; background: var(--white); padding: 0; z-index: 99; margin: 0; border: 0; overflow-y: auto; display: block !important; transition: var(--custom-ease); padding-top: 140px; }
  .navbar .collapse.show { left: 0; }
  .navbar-inside { height: 100%; padding: 0; overflow: hidden; overflow-y: auto; display: flex; flex-flow: column; padding-bottom: 40px; }
  .navbar-expand-xl .navbar-nav .nav-item { padding: 0 30px; margin: 10px 0 20px 0; transform: translateX(10px); opacity: 0; transition: var(--custom-ease); text-align: center; }
  .navbar-expand-xl .navbar-nav .nav-link { font-size: 20px; line-height: 1.3; padding: 0; position: relative; color: var(--black); font-weight: 1000; }
  .navbar-expand-xl .show .navbar-nav .nav-item { transform: translateX(0px); opacity: 1; }
  .navbar-expand-xl .show .navbar-nav .nav-item:nth-child(1) { transition-delay: 0.3s; }
  .navbar-expand-xl .show .navbar-nav .nav-item:nth-child(2) { transition-delay: 0.4s; }
  .navbar-expand-xl .show .navbar-nav .nav-item:nth-child(3) { transition-delay: 0.5s; }
  .navbar-expand-xl .show .navbar-nav .nav-item:nth-child(4) { transition-delay: 0.6s; }
  .navbar-expand-xl .show .navbar-nav .nav-item:nth-child(5) { transition-delay: 0.7s; }
  .navbar-expand-xl .show .navbar-nav .nav-item:nth-child(6) { transition-delay: 0.8s; }
  .navbar-expand-xl .show .navbar-nav .nav-item:nth-child(7) { transition-delay: 0.9s; }
  .navbar-expand-xl .show .navbar-nav .nav-item:nth-child(8) { transition-delay: 1s; }
  .navbar-inside .social-link-list { opacity: 0; transition: all 0.2s ease-in; }
  .navbar-expand-xl .show .navbar-inside .social-link-list { opacity: 1; transition-delay: 1.2s; }
  .dropdown-menu {background: transparent;border: 0;padding: 20px 0 0;margin: 0 !important;text-align: center;}
  .dropdown-item {padding: 10px 0;font-size: 16px;line-height: 1.2;font-weight: 700;text-transform: uppercase;}
  .dropdown-item:focus,
  .dropdown-item:hover,
  .dropdown-item.active { color: var(--primary-color); background: transparent; }
  .navbar-bottom { padding: 40px 30px; }
  .navbar-bottom { opacity: 0; visibility: hidden; position: relative; top: -5px; }
  .navbar-expand-xl .show .navbar-bottom { opacity: 1; visibility: visible; top: 0; transition: var(--custom-ease); transition-delay: 1s; }
  .header-right { position: relative; z-index: 999; margin-right: 50px; }
  .content-container { padding: 70px 0; }
}
/*==========================================
! Medium devices (tablets, less than 992px)
========================================== */
@media (max-width:991.98px) {
  .content-container { padding: 50px 0; }
  .hero-content h1 { font-size: 2.5rem; }
  .hero-btn-group .btn { width: 100%; flex-shrink: 1; padding: 10px 10px; }
  .hero-btn-group { display: flex; }
  .heading h4 { font-size: 1.5rem; }
  .service-item { width: 50%; }
  .tic-image>img { position: relative; }
  .tic-text { padding: 50px 0 0 0; }
  .ci-content h4 { font-size: 18px; }
}
/* =================================================
! Small devices (landscape phones, less than 768px)
================================================= */
@media (max-width:767.98px) {
h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.75rem; }
h6 { font-size: 0.5rem; }
  .hero-content h1 { font-size: 2rem; }
  .inner-hero-container{min-height: 300px; padding: 100px 0 40px;}
  .inner-hero-content h1{font-size: 1.5rem}
  .service-box-text h6 { font-size: 1rem; }
  .service-box { font-size: .875rem; }
  .gallery-item.swiper-slide,
  .video-gallery-item.swiper-slide,
  .testimonial-item { max-width: 400px; width: calc(100vw - 80px); }
  .testimonial-box{padding: 30px 15px;}
  .form-container-head h4,
  .cta-content h4 { font-size: 1.5rem; }
  .cta-container { padding: 60px 0; }
  .hero-container { min-height: auto; }
  .product-price-item { width: 100%; padding-right: 0; }
  .product-price-item+.product-price-item { margin-top: 30px; }
  .service-item { width: 100%; }
  .default-content a{word-break: break-all;}
  .service-box-icon{width: 40px; height: 40px;}
  .service-box-icon img{width: 100%; height: 100%; object-fit: contain;}
  .service-box{padding: 25px 15px;}
  .service-box-text{padding-top: 20px;}
  .service-head-link{padding-right: 40px; position:relative;}
  .service-head-link:after{content:'';width: 15px;height: 15px;background: transparent;position: absolute;right: 10px;top: 10px;border: solid 4px #ea8825;border-top: 0;border-right: 0;transform: rotate(-45deg);}
  .service-head-link[aria-expanded="true"]:after{transform: rotate(135deg); top:17px;}
  .service-item{margin-bottom: 12px;}
  .heading br{display: none;}
  .contact-info-btn { width: 50px; height: 50px; padding: 10px; left: -50px; }
  .contact-info-content { padding: 50px 25px; }
  .contact-info-list { gap: 30px;}
  .close-btn { top: 15px; left: auto; right: 20px; }
  .ci-item { padding-left: 50px; }
  .ci-item img { width: 30px; }
}
/* ======================================================
! Extra small devices (portrait phones, less than 576px)
====================================================== */
@media (max-width:479.98px) {
  .hero-btn-group { flex-flow: column; }
  .hero-btn-group .btn+.btn { margin: 20px 0 0 0; }
  .service-item { width: 100%; }
  .hero-container { padding: 150px 0 100px; }
}