/*

TemplateMo 563 SEO Dream

https://templatemo.com/tm-563-seo-dream

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

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
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: 'Open Sans', sans-serif;
  font-weight: 400;
  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;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 30px;
  color: #2a2a2a;
}

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

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

::selection {
  background: #03a4ed;
  color: #fff;
}

::-moz-selection {
  background: #03a4ed;
  color: #fff;
}

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

.page-section {
  margin-top: 120px;
}

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

.section-heading h6 {
  font-size: 15px;
  font-weight: 700;
  color: #33ccc5;
  text-transform: uppercase;
  margin-bottom: 15px;

}

.section-heading h2 {
  font-size: 30px;
  text-transform: capitalize;
  color: #2a2a2a;
  font-weight: 800;
  position: relative;
  z-index: 2;
  line-height: 45px;
}

.section-heading h2 em {
  font-style: normal;
  color: #33ccc5;
}

.section-heading h2 span {
  color: #088ec3;
}

.main-blue-button a {
  display: inline-block;
  background-color: #4771cb;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border-bottom: 2px solid #fff!important;
  transition: all .3s;
}

.main-blue-button a:hover {
  background-color: #fff!important;
  color: #4771cb!important;
  border-bottom: 2px solid #4771cb!important;
}

.main-green-button a {
  display: inline-block;
  background-color: #33ccc5;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border-bottom: 2px solid #4771cb!important;
  transition: all .3s;
}

.main-green-button a:hover {
  background-color: #4771cb!important;
  color: #fff!important;
  border-bottom: 2px solid #33ccc5!important;
}

/*---------------------------------------
  SITE HEADER              
-----------------------------------------*/
.site-header {
  background-image: url('../images/empty-living-room-with-blue-sofa-plants-table-empty-white-wall-background-3d-rendering.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding-top: 250px;
  padding-bottom: 150px;
}

.section-bg {
  background: var(--section-bg-color);

border: 1px solid #d40c0c;}

.shop-detail-bar {
  padding: 20px;
  border-color: #000;
  
}
.shop-icon:last-child {
  margin-bottom: 0;
}

.shop-pricing-text {
  color: var(--secondary-color);
}

.shop-condition-text {
  color: var(--custom-btn-bg-color);
}

.shop-image {
  display: block;
  border-radius: var(--border-radius-medium);
}

.shop-body {
  padding: 20px;
  padding-bottom: 0;
}






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

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

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

.background-header .main-nav .nav li:hover a {
  color: #33ccc5;
}

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

.background-header .nav li a.active:after {
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #4771cb;
  content: '';
  left: 50%;
  bottom: 0px;
  transform: translateX(-10px);
}

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

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

.header-area .main-nav .logo {
  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 h4 {
    font-size: 30px;
    font-weight: 800;
    text-transform: capitalize;
    color: #fff;
    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;
}

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

.background-header .main-nav .logo h4 {
  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;
  z-index: 999;
}

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

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

.header-area .main-nav .nav li:last-child a ,
.background-header .main-nav .nav li:last-child a {
  padding: 0px 20px;
  font-weight: 400;
}

.header-area .main-nav .nav li:last-child a:hover ,
.background-header .main-nav .nav li:last-child a:hover {
  color: #4771cb !important;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 15px;
  color: #fff;
  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: #fff!important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #fff!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: #33ccc5!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: #fff;
  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: #fff;
}

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

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

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

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

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

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

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

.header-area.header-sticky .nav li a.active {
  color: #33ccc5;
}

@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 {
    display: none;
  }
  .header-area .main-nav .nav li:nth-child(6),
  .background-header .main-nav .nav li:nth-child(6) {
    padding-right: 0px;
  }
}

@media (max-width: 767px) {
  .background-header .main-nav .nav {
    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 {
    color: #33ccc5!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #33ccc5;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }
  .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;
  }
  .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;
    border-bottom: 1px solid #e7e7e7;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #33ccc5!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 !important;
  }
}

/* 
---------------------------------------------
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: #33ccc5;
    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: #33ccc5;
    border-radius: 50%;
}



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

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

.main-banner:after {
  content: '';
  background-image: url(../images/banner-dec-left.png);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 10px;
  width: 212px;
  height: 653px;
  z-index: -1;
}

.main-banner:before {
  content: '';
  background-image: url(../images/banner-dec-right.png);
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 0px;
  width: 1159px;
  height: 797px;
  z-index: -1;
}

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

.main-banner .left-content h6 {
  text-transform: capitalize;
  font-size: 15px;
  font-weight: 400;
  color: #2a2a2a;
  margin-bottom: 8px;
}

.main-banner .left-content h4 {
  z-index: 2;
  position: relative;
  font-weight: 700;
  font-size: 20px;
  color: #2a2a2a;
}

.main-banner .left-content h2 {
  border-top: 1px solid #eee;
  margin-top: 0px;
  padding-top: 5px;
  margin-bottom: 25px;
  font-size: 40px;
  font-weight: 800;
  color: #2a2a2a;
  line-height: 72px;
  background: #FA9D4D;
  background: -webkit-linear-gradient(to right, #FA9D4D 0%, #FF4F6B 100%);
  background: -moz-linear-gradient(to right, #FA9D4D 0%, #FF4F6B 100%);
  background: linear-gradient(to right, #FA9D4D 0%, #FF4F6B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.main-banner .left-content h3 {
  border-top: 1px solid #eee;
  margin-top: 10px;
  padding-top: 10px;
  margin-bottom: 5px;
  font-size: 30px;
  font-weight: 800;
  color: #2a2a2a;
  line-height: 72px;
  background: #e6ba94;
  background: -webkit-linear-gradient(to right, #ebc250 0%, #FF4F6B 100%);
  background: -moz-linear-gradient(to right, #FA9D4D 0%, #FF4F6B 100%);
  background: linear-gradient(to right, #FA9D4D 0%, #FF4F6B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


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

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



/* 
---------------------------------------------
Features Style
--------------------------------------------- 
*/

#features {
  padding-top: 130px;
}

.features .features-content {
  z-index: 2;
  position: relative;
  background-color: #fff;
  border-radius: 50px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
}

.features-item {
  text-align: center;
  padding: 30px;
  border-radius: 50px;
  background: rgb(255,255,255);
  background: linear-gradient(105deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%);
  transition: background-color .5s;
  -webkit-transition: background-color .5s;
  -o-transition: background-color .5s;
  -moz-transition: background-color .5s;
}

.features-item:hover {
  background: rgb(51,204,197);
  background: linear-gradient(105deg, rgba(51,204,197,1) 0%, rgba(8,141,195,1) 100%);
}

.features-item:hover h4 {
  color: #fff;
}

.features-item:hover p {
  color: #fff;
}

.features-item:hover .line-dec {
  background-color: rgba(255,255,255,0.3);
}

.first-feature:hover .icon {
  background-image: url(../images/features-icon-white-01.png);
}

.second-feature:hover .icon {
  background-image: url(../images/features-icon-white-02.png);
}

.features-item .number h6 {
  background-repeat: no-repeat;
  width: 110px;
  height: 69px;
  color: #fff;
  margin-left: auto;
  margin-right: auto;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  line-height: 69px;
  margin-top: -65px;
  margin-bottom: 30px;
}

.features-item .first-number h6 {
  background-image: url(../images/features-number-01.png);
}

.features-item .second-number h6 {
  background-image: url(../images/features-number-02.png);
}

.features-item .third-number h6 {
  background-image: url(../images/features-number-03.png);
}

.features-item .fourth-number h6 {
  background-image: url(../images/features-number-04.png);
}

.first-feature .icon {
  background-image: url(../images/features-icon-black-01.png);
}

.second-feature .icon {
  background-image: url(../images/features-icon-black-02.png);
}

.features-item .icon {
  width: 63px;
  height: 63px;
  margin: 0 auto;
  transition: all 0.5s;
}

.features-item h4 {
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 30px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  color: #2a2a2a;
  position: relative;
  transition: all 0.5s;
}

.features-item .line-dec {
  width: 100px;
  height: 2px;
  background-color: rgba(51,204,197,0.3);
  margin: 30px auto;
  transition: all 0.5s;
}

.features-item p {
  position: relative;
  margin-top: 0px;
  transition: all 0.5s;
}

.skills-content {
  position: relative;
  z-index: 1;
  margin-top: -50px;
  background-color: #f5f5f5;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
  padding: 110px 0px 50px 0px;
}

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

.progress {
  width: 150px;
  height: 150px;
  line-height: 150px;
  background: none;
  margin: 0 auto;
  box-shadow: none;
  position: relative;
}
.progress:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid #ddd;
  position: absolute;
  top: 0;
  left: 0;
}
.progress > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.progress .progress-left {
  left: 0;
}
.progress .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 5px;
  border-style: solid;
  position: absolute;
  top: 0;
  border-color: #fd6a54;
}
.progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.progress .progress-right {
  right: 0;
}
.progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}
.progress .progress-value {
  text-align: center;
  color: #2a2a2a;
  display: flex;
  width: 100%;
  border-radius: 50%;
  font-size: 32px;
  text-align: center;
  line-height: 20px;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-weight: 700;
}
.progress .progress-value div {
  margin-top: 10px;
}
.progress .progress-value span {
  font-size: 12px;
  text-transform: uppercase;
}

/* This for loop creates the  necessary css animation names 
Due to the split circle of progress-left and progress right, we must use the animations on each side. 
*/
.progress[data-percentage="10"] .progress-right .progress-bar {
  animation: loading-1 1.5s linear forwards;
}
.progress[data-percentage="10"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="20"] .progress-right .progress-bar {
  animation: loading-2 1.5s linear forwards;
}
.progress[data-percentage="20"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="30"] .progress-right .progress-bar {
  animation: loading-3 1.5s linear forwards;
}
.progress[data-percentage="30"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="40"] .progress-right .progress-bar {
  animation: loading-4 1.5s linear forwards;
}
.progress[data-percentage="40"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="50"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="50"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="60"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="60"] .progress-left .progress-bar {
  animation: loading-1 1.5s linear forwards 1.5s;
}

.progress[data-percentage="70"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="70"] .progress-left .progress-bar {
  animation: loading-2 1.5s linear forwards 1.5s;
}

.progress[data-percentage="80"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="80"] .progress-left .progress-bar {
  animation: loading-3 1.5s linear forwards 1.5s;
}

.progress[data-percentage="90"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="90"] .progress-left .progress-bar {
  animation: loading-4 1.5s linear forwards 1.5s;
}

.progress[data-percentage="100"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="100"] .progress-left .progress-bar {
  animation: loading-5 1.5s linear forwards 1.5s;
}

@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(36);
    transform: rotate(36deg);
  }
}
@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(72);
    transform: rotate(72deg);
  }
}
@keyframes loading-3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(108);
    transform: rotate(108deg);
  }
}
@keyframes loading-4 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(144);
    transform: rotate(144deg);
  }
}
@keyframes loading-5 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180);
    transform: rotate(180deg);
  }
}
.progress {
  margin-bottom: 1em;
}


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

#about {
  padding-top: 0px;
  margin-bottom: 40px;
}

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

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

.about-us .about-item h4 {
  font-size:38px;
  font-weight: 800;
  color:#088ec3;
}

.about-us .about-item h6 {
  font-size: 16px;
  margin-top: 5px;
  font-weight: 400;
  color: #2a2a2a;
  text-transform: capitalize;
}

.about-us p {
  margin: 40px 0px;
}

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

.our-services {
  padding-top: 120px;
}

.our-services .section-heading {
  text-align: center;
  margin-left: 75px;
  margin-right: 75px;
}

.our-services .container-fluid {
  padding: 0px 80px;
}

.service-item {
  padding: 60px 30px;
  border: 2px solid #f7f7f7;
  border-radius: 5px;
  transition: all .3s;
  margin-bottom: 30px;
}

.service-item:hover {
  background-color: #b0e7de;
  border: 2px solid transparent;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}

.service-item .icon {
  margin-top: 10px;
  width: 80px;
  height: 80px;
  display: inline-block;
  text-align: center;
  line-height: 80px;
  background-color: #f7f7f7;
  border-radius: 50%;
}

.service-item .icon img {
    width: 38px;
    height: 38px;
}

.service-item h4 {
  font-size: 22px;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 15px;
}


/* 
---------------------------------------------
Portfolio
--------------------------------------------- 
*/

.our-portfolio {
  padding-top: 100px;
  overflow: hidden;
}

.our-portfolio .container-fluid {
  padding-right: 0px;
  padding-left: 0px;
}

.portfolio-item {
  margin-bottom: 30px;
  border-radius: 50px;
}

.portfolio-item:hover .thumb .hover-content {
  opacity: 1;
  visibility: visible;
}

.portfolio-item .thumb {
  position: relative;
  border-radius: 50px;
}

.portfolio-item .thumb img {
  border-radius: 50px;
  overflow: hidden;
}

.portfolio-item .thumb .hover-content {
  border-radius: 50px;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  background: rgb(51,204,197);
  background: linear-gradient(105deg, rgba(51,204,197,1) 0%, rgba(8,141,195,1) 100%);
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all .5s;
}

.portfolio-item .thumb .hover-content .inner-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
}

.portfolio-item .thumb .hover-content .inner-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.portfolio-item .thumb .hover-content .inner-content span {
  font-size: 15px;
  color: #fff;
}

.our-portfolio .owl-nav {
  display: inline-block!important;
  position: absolute;
  top: -117px;
  right: 15%;
  max-width: 1320px;
}

.our-portfolio .owl-nav .owl-next {
  margin-left: 10px;
}

.our-portfolio .owl-nav span {
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 35px;
  font-size: 30px;
  border: 2px solid #eee;
  border-radius: 50%;
  color: #ddd;
  transition: all 0.5s;
}

.our-portfolio .owl-nav span:hover {
  color: #33ccc5;
  border-color: #33ccc5;
}
/* 
---------------------------------------------
Team Style
--------------------------------------------- 
*/

.team {
  margin-top: 100px;
    padding-top: 140px;
}

.team-member {
  position: relative;
}

.team-member:hover img {
  top: -120px;
}

.team-member img {
  max-width: 220px;
  border-radius: 50%;
  position: absolute;
  top: -110px;
  left: 50%;
  transform: translateX(-110px);
  transition: all .3s;
}

.team-member .main-content {
  border-radius: 25px;
  padding: 140px 30px 40px 30px;
  background-color: #defbf5;
  text-align: center;
}

.team-member .main-content span.category {
  color: #0ee4b2;
  font-size: 15px;
}

.team-member .main-content h4 {
  font-size: 22px;
  font-weight: 600;
  margin-top: 8px;
  margin-bottom: 15px;
}

.team-member .main-content ul li {
  display: inline-block;
  margin: 0px 2px;
}

.team-member .main-content ul li a {
  background-color: #fff;
  color: #23ebc6;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  font-size: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all .3s;
}

.team-member .main-content ul li a:hover {
  background-color: #33e9e0;
  color: #fff;
}

@media (max-width: 767px) {
  .team-member {
      margin-bottom: 80px !important; /* This spacing is missing in your CSS */
  }
}


/* 
---------------------------------------------
contact
--------------------------------------------- 
*/

.contact-us {
  margin-top: 20px;
  padding: 120px 0px;
  background-image: url(../images/contact-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.contact-us .section-heading {
  text-align: center;
  margin-left: 20px;
  margin-right: 20px;
}

.contact-us .contact-info {
  padding: 40px 30px;
  border: 2px solid #eee;
}

.contact-us .contact-info ul li {
  text-align: center;
  display: block;
  margin-bottom: 30px;
}

.contact-us .contact-info ul li a {
  font-size: 15px;
  color: #afafaf;
  transition: all .5s;
}

.contact-us .contact-info ul li:hover a {
  color: #2a2a2a;
}

.contact-us .contact-info ul li:last-child {
  margin-bottom: 0px;
}

.contact-us .contact-info ul li .icon {
  margin-bottom: 10px;
}

.contact-us .contact-info ul li .icon img {
  max-width: 32px;
}

form#contact {
  position: relative;
  background-color: #fff;
  padding: 60px 80px;
  border-radius: 50px;
  text-align: center;
}

form#contact input {
  width: 100%;
  height: 46px;
  border-radius: 5px;
  background-color: transparent;
  border: 2px solid #efefef;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 0px 20px;
  margin-bottom: 20px;
}

form#contact input::placeholder {
  color: #aaa;
}

form#contact textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  max-height: 180px;
  min-height: 140px;
  height: 140px;
  border-radius: 5px;
  background-color: transparent;
  border: 2px solid #efefef;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 15px 20px;
  margin-bottom: 20px;
}

form#contact textarea::placeholder {
  color: #aaa;
}

form#contact button {
  display: inline-block;
  background-color: #33ccc5;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  margin-top: 20px;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border-bottom: 2px solid #4771cb!important;
  transition: all .3s;
  outline: none;
  border: none;
}

form#contact button:hover {
  background-color: #4771cb!important;
  color: #fff!important;
  border-bottom: 2px solid #33ccc5!important;
}

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

footer p {
  text-align: center;
  margin: 30px 0px;
}

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

footer p a:hover {
  color: #4771cb;
}

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

@media (max-width: 992px) {
  .header-area .main-nav .logo h4 {
    font-size: 20px;
  }
  .main-banner .left-content {
    margin-right: 0px;
  }
  .main-banner {
    text-align: center;
  }
  .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;
  }
  .service-item {
    text-align: center;
  }
  .service-item .icon {
    margin-top: 0px;
    margin-bottom: 30px;
  }
  .about-us .left-image {
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 45px;
  }
  .our-portfolio .owl-nav {
    display: none !important;
  }
  .contact-info {
    margin-top: 60px;
  }
  form#contact {
    padding: 45px;
  }
}

@media (max-width: 767px) {
  .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;
  }
  .service-item {
    text-align: center;
    padding: 30px;
  }
  .service-item .icon {
    float: none;
    margin-right: 0px;
    margin-bottom: 15px;
  }
  .service-item .right-content {
    display: inline-block;
  }
  .our-portfolio .section-heading,
  .about-us .section-heading,
  .about-us .about-item,
  .about-us p,
  .about-us .main-green-button {
    text-align: center;
  }
  .our-services .section-heading {
    margin-left: 15px;
    margin-right: 15px;
  }
  .about-us .about-item {
    margin-top: 15px;
  }
  form#contact {
    padding: 30px;
  }
}


/* -------------------------------------------
 EAGLEEYE ABOUT + ACCORDION CUSTOM CSS
------------------------------------------- */

/* About Section Background Curve */
.about-us {
  position: relative;
  padding: 0;
  margin-top: 130px;
}

.about-us::before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 84%;
  height: 100%;
  content: "";
  background-color: #f1f0fe;
  border-top-left-radius: 500px;
  border-bottom-left-radius: 500px;
  z-index: -1;
}

/* Section Heading */
.about-us .section-heading {
  margin-left: 60px;
}

.about-us .section-heading h6 {
  color: #33ccc5;
  font-size: 14px;
  text-transform: uppercase;
}

.about-us .section-heading h2 {
  font-size: 36px;
  font-weight: 600;
  line-height: 44px;
}

.about-us .section-heading p {
  color: #4a4a4a;
  font-size: 15px;
  margin-top: 20px;
}

.about-us .section-heading .main-button {
  margin-top: 40px;
}

.about-us .main-button a {
  display: inline-block;
  background-color: #fff;
  color: #33ccc5;
  font-size: 14px;
  padding: 10px 25px;
  border-radius: 20px;
  font-weight: 500;
  transition: 0.3s;
}

.about-us .main-button a:hover {
  background-color: #33ccc5;
  color: #fff;
}

/* -------------------------------------------
 Accordion Style
------------------------------------------- */

.accordion {
  margin-top: -40px;
  margin-bottom: -40px;
  background-color: #33ccc5;
  border-radius: 40px;
  padding: 80px 50px 50px 50px;
}

.accordion-item {
  background-color: #fff;
  border: none;
  border-radius: 40px !important;
  margin-bottom: 25px;
  overflow: hidden;
}

.accordion-item .accordion-button {
  background-color: #fff;
  color: #1e1e1e;
  font-weight: 600;
  padding: 18px 25px;
  font-size: 16px;
  border-radius: 40px !important;
  box-shadow: none !important;
  transition: 0.3s;
}

.accordion-button.collapsed {
  color: #1e1e1e;
}

/* Active State */
.accordion-button:not(.collapsed) {
  color: #33ccc5;
  background-color: #fff;
}

/* Plus/Minus Icons */
.accordion-button::after {
  background-image: none !important;
  content: "+";
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  background-color: #33ccc5;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  text-align: center;
  line-height: 32px;
}

.accordion-button:not(.collapsed)::after {
  content: "-";
  line-height: 30px;
}

/* Body */
.accordion-body {
  padding: 0 25px 30px 25px;
  font-size: 14px;
  line-height: 26px;
  color: #4a4a4a;
}

/* -------------------------------------------
 Responsive Adjustments
------------------------------------------- */

@media (max-width: 992px) {
  .accordion {
    padding: 40px 25px 10px 25px;
  }

  .about-us .section-heading {
    margin-left: 0;
    margin-top: 60px;
  }

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





/* PROCESS */
/* EagleEye Process Custom Section */
.process-box {
  background-color: #33ccc5;
  padding: 50px 40px;
  border-radius: 25px;
  color: #fff;
  margin-bottom: 30px;
}

.process-box h4 {
  color: #fff;
  font-size: 20px;
  margin-bottom: 8px;
  font-weight: 600;
}

.process-box p {
  color: #e8e8e8;
  line-height: 26px;
  font-size: 14px;
  margin-bottom: 20px;
}

.process-step:not(:last-child) {
  margin-bottom: 25px;
}

.process-box hr {
  border-color: rgba(255,255,255,0.3);
  margin: 25px 0;
}

.process-points {
  padding-left: 18px;
  color: #fff;
  line-height: 28px;
  font-size: 14px;
}

.process-points li {
  margin-bottom: 6px;
}

.process-box .main-button a {
  background-color: #fff;
  color: #7a6ad8;
  padding: 10px 25px;
  border-radius: 25px;
  font-weight: 600;
  transition: all 0.3s;
}

.process-box .main-button a:hover {
  opacity: 0.8;
}

/* Responsive Fix */
@media (max-width: 767px) {
  .process-box {
    padding: 30px 20px;
  }
  .process-box h4 {
    font-size: 18px;
  }
}



/* SERVICES/ */
/* SERVICE AREAS LEFT SECTION */
.service-areas-accordion {
  margin-top: 40px;
  margin-bottom: 60px;
}

.service-areas-accordion .service-title {
  color: #33ccc5;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.service-areas-accordion .service-heading {
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 30px;
  color: #2a2a2a;
}

/* ACCORDION SAME STYLE AS ABOUT-US ACCORDION */
.service-areas-accordion .accordion {
  background-color: #33ccc5;
  padding: 60px 40px;
  border-radius: 40px;
}

.service-areas-accordion .accordion-item {
  background-color: #fff;
  margin-bottom: 20px;
  border-radius: 40px !important;
  border: none;
}

/* Accordion Button */
.service-areas-accordion .accordion-button {
  background-color: #fff;
  color: #1e1e1e;
  font-weight: 600;
  padding: 18px 25px;
  font-size: 16px;
  border-radius: 40px !important;
  box-shadow: none !important;
}

/* Active Button */
.service-areas-accordion .accordion-button:not(.collapsed) {
  color: #33ccc5;
  background-color: #fff;
}

/* Plus / Minus Icon */
.service-areas-accordion .accordion-button::after {
  background-image: none !important;
  content: "+";
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  background-color: #33ccc5;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  text-align: center;
  line-height: 32px;
}

.service-areas-accordion .accordion-button:not(.collapsed)::after {
  content: "-";
}

/* Body */
.service-areas-accordion .accordion-body {
  padding: 0 25px 30px 25px;
  font-size: 15px;
  line-height: 28px;
  color: #4a4a4a;
}

/* Responsive Fix */
@media (max-width: 992px) {
  .service-areas-accordion .accordion {
    padding: 30px 20px;
  }
}


.city-list {
  margin: 0;
  padding: 0;
  margin-left: 5px;
}

.city-list li {
  list-style: none;
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.city-list li::before {
  content: "›"; /* arrow */
  position: absolute;
  left: 0;
  top: 0;
  color: #33ccc5;
  font-size: 18px;
  line-height: 16px;
}


.no-collapse {
    pointer-events: none;
    background-color: #fff !important;
    color: #1e1e1e !important;
}

.no-collapse::after {
    display: none !important;
}




/* HSHH */

.no-toggle {
    pointer-events: none;
    background-color: #fff !important;
    color: #1e1e1e !important;
}

.no-toggle::after {
    display: none !important;
}


.city-list {
    list-style: none;
    padding-left: 10px;
}

.city-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
}

.city-list li::before {
    content: "\f105"; /* arrow */
    font-family: "FontAwesome";
    position: absolute;
    left: 0;
    top: 2px;
    color: #33ccc5;
}


/* gallery */
/* ================= GALLERY SECTION ================= */

.gallery-section {
    padding-top: 60px;
    padding-bottom: 60px;
}

.gallery-img {
    margin-bottom: 25px;
    overflow: hidden;
    border-radius: 12px;
    position: relative;
    background: #000;
}

.gallery-img img {
    width: 100%;
    border-radius: 12px;
    transition: transform .4s ease, opacity .4s ease;
}

.gallery-img:hover img {
    transform: scale(1.05);
    opacity: .9;
}

/* Responsive YouTube frames */
.gallery-img iframe {
    width: 100%;
    height: 260px;
    border-radius: 12px;
}

/* Hover effect for YouTube thumbnails */
.gallery-img iframe:hover {
    transform: scale(1.02);
    transition: .3s ease;
}

/* Heading */
.gallery-section h2 {
    font-weight: 700;
    color: #222;
}

.gallery-section p {
    font-size: 15px;
    color: #666;
}



/* Fix menu spacing */
.header-area .main-nav .nav li {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.header-area {
    height: 120px !important;
}

.header-area.header-sticky {
    height: 90px !important;
}
.header-area .main-nav .nav li {
    padding-left: 12px !important;
    padding-right: 12px !important;
}
.header-area .main-nav {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
}

.header-area .main-nav .logo {
    margin: 0 !important;
}

.header-area .main-nav .nav {
    margin-top: 0 !important;
}



/* -------------------- SLIDESHOW CORE -------------------- */

.tm-slideshow-section {
    display: flex;
    align-items: center;
    margin: 50px 50px;
}

.tm-slideshow-section-reverse {
    flex-direction: row-reverse;
}

.tm-slideshow {
    width: 40%;
}

.tm-slideshow img {
    width: 100%;
    height: auto;
    /* border-radius: 14px; */
}

/* -------------------- DESCRIPTION BOX -------------------- */

.tm-slideshow-description {
    padding: 50px;
    width: 48%;
    color: #fff;
    z-index: 10;
    margin-left: -42px;
    /* border-radius: 14px; */
}

.tm-bg-primary { background: #69c6ba; }
.tm-bg-highlight { background: #c66995; }

.tm-slideshow-description-left {
    margin-left: auto;
    margin-right: -42px;
}

.tm-slideshow-description h2 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 15px;
}

.tm-slideshow-description p {
    font-size: 15px;
    line-height: 26px;
    margin-bottom: 25px;
}

.tm-btn {
    display: inline-block;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 0;
}

.tm-btn-white { background: #fff; }
.tm-btn-white-primary { color: #69c6ba; }
.tm-btn-white-highlight { color: #c66995; }

/* Hover states */
.tm-btn-white-primary:hover { background: #c66995; color: #fff; }
.tm-btn-white-highlight:hover { background: #69c6ba; color: #fff; }

/* -------------------- SLIDESHOW ARROWS -------------------- */

.slick-prev, .slick-next {
    width: 45px;
    height: 45px;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    border-radius: 50%;
}

.slick-prev:hover,
.slick-next:hover {
    background: #69c6ba;
}

.slick-prev:before,
.slick-next:before {
    font-size: 22px;
    color: #fff;
}

/* -------------------- RESPONSIVE -------------------- */

@media(max-width: 986px){
    .tm-slideshow-section {
        flex-direction: column;
    }

    .tm-slideshow,
    .tm-slideshow-description {
        width: 100%;
        margin: 0;
        max-width: 700px;
    }

    .slick-prev, .slick-next {
        bottom: 15px;
        top: auto;
    }
}

@media(max-width: 767px){
    .tm-slideshow-description {
        padding: 25px;
    }
}


/* new by chat */
/* TIMELINE CONTAINER */
.timeline-container {
  position: relative;
  width: 100%;
  margin: 60px auto;
  padding: 20px 0;
}

/* CENTER LINE */
.timeline-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  background: #be1e2d;
  transform: translateX(-50%);
  border-radius: 10px;
}

/* TIMELINE ITEM */
.timeline-item {
  width: 50%;
  padding: 20px 40px;
  position: relative;
  opacity: 0;
  transform: translateY(40px);
  animation: fadeSlide 0.8s ease forwards;
}

/* DELAY EACH ITEM */
.timeline-item:nth-child(1) { animation-delay: 0.1s; }
.timeline-item:nth-child(2) { animation-delay: 0.2s; }
.timeline-item:nth-child(3) { animation-delay: 0.3s; }
.timeline-item:nth-child(4) { animation-delay: 0.4s; }
.timeline-item:nth-child(5) { animation-delay: 0.5s; }
.timeline-item:nth-child(6) { animation-delay: 0.6s; }
.timeline-item:nth-child(7) { animation-delay: 0.7s; }
.timeline-item:nth-child(8) { animation-delay: 0.8s; }
.timeline-item:nth-child(9) { animation-delay: 0.9s; }
.timeline-item:nth-child(10){ animation-delay: 1.0s; }

/* LEFT ITEMS */
.timeline-item.left {
  left: 0;
  text-align: right;
}

/* RIGHT ITEMS */
.timeline-item.right {
  left: 50%;
  text-align: left;
}

/* DOT */
.timeline-item::before {
  content: "";
  position: absolute;
  top: 20px;
  width: 18px;
  height: 18px;
  background: #fff;
  border: 4px solid #be1e2d;
  border-radius: 50%;
}

.timeline-item.left::before {
  right: -10px;
}

.timeline-item.right::before {
  left: -10px;
}

/* CONTENT BOX */
.timeline-content {
  background: #fff;
  padding: 20px 25px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  border-left: 5px solid #be1e2d;
}

.timeline-content h3 {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 700;
  color: #333;
}

.timeline-content p {
  font-size: 14px;
  color: #555;
  margin: 0;
}

/* ANIMATION */
@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .timeline-container::before {
    left: 10px;
  }

  .timeline-item {
    width: 100%;
    padding-left: 40px;
    text-align: left !important;
  }

  .timeline-item.left,
  .timeline-item.right {
    left: 0;
  }

  .timeline-item::before {
    left: 0;
  }
}



/* Floating WhatsApp Button */
.whatsapp-floating {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 65px;
  height: 65px;
  background: #25D366;
  border-radius: 50%;
  box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 9999;
  transition: 0.3s ease;
}

.whatsapp-floating img {
  width: 40px;
}

.whatsapp-floating:hover {
  transform: scale(1.1);
}

/* Popup Sticker */
.wa-popup {
  position: fixed;
  bottom: 95px;
  right: 20px;
  width: 240px;
  background: #ffffff;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  z-index: 9998;
  display: none;
  animation: fadeIn 0.3s ease;
}

.wa-popup p {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #333;
  font-weight: 600;
}

.wa-popup button {
  background: #25D366;
  color: white;
  padding: 8px 12px;
  width: 100%;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
}

.wa-popup button:hover {
  background: #1ea955;
}

/* Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Floating WhatsApp Button end */





/* Sticky Social Media Icons */
.social-sticky {
  position: fixed;
  top: 35%;
  right: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.social-sticky a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  color: #fff;
  font-size: 22px;
  text-decoration: none;
  border-radius: 8px 0px 0px 8px;
  transition: 0.3s;
}

/* Colors */
.social-sticky a.wa { background: #25D366; }      /* WhatsApp */
.social-sticky a.fb { background: #1877F2; }      /* Facebook */
.social-sticky a.ig { background: #E1306C; }      /* Instagram */
.social-sticky a.li { background: #0A66C2; }      /* LinkedIn */
.social-sticky a.mail { background: #ff9300; }    /* Email */

/* Hover effect */
.social-sticky a:hover {
  padding-left: 8px;
  border-radius: 0 12px 12px 0;
}

/* side bar end */









/* === Home Slider Styling === */

.home-slider .slider-img img {
  width: 100%;
  border-radius: 30px;
  height: 500px;
  object-fit: cover;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

/* Fade animation */
.owl-carousel .owl-item {
  transition: opacity 1s ease-in-out;
}

/* Dots styling */
.home-slider .owl-dots {
  margin-top: 15px;
  text-align: center;
}

.home-slider .owl-dots .owl-dot span {
  width: 12px;
  height: 12px;
  background: #c5c5c5;
  border-radius: 50%;
  display: inline-block;
  margin: 5px;
  transition: 0.3s;
}

.home-slider .owl-dots .owl-dot.active span {
  background: #1eaebe; /* EagleEye Red */
  transform: scale(1.3);
}

/* Home Banner Image Frame */
.home-slider img {
    border-radius: 25px;
    border: 6px solid #ffffff;           /* White frame */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15); /* Soft shadow */
    padding: 8px;                        /* Space for frame look */
    background: #fff;                    /* Makes it look like a photo frame */
}

/* Optional Floating Effect */
.home-slider .owl-item.active img {
    transform: translateY(-5px);
    transition: 0.5s ease;
}


/* css- animation 1 */
.scan-effect {
    position: relative;
}

.scan-effect::after {
    content: "";
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, transparent, #00eaff, transparent);
    animation: scanLine 3s infinite linear;
    opacity: 0.8;
}

@keyframes scanLine {
    0% { top: -20px; }
    100% { top: 100%; }
}

/* css- animation 2 */
.reveal-text {
    opacity: 0;
    transform: translateY(30px);
    animation: textReveal 0.9s forwards ease-out;
}

@keyframes textReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* css- animation 3 */


/* css- animation 4 */


/* ---------------------------------------------------
   GLOBAL ANIMATIONS
-----------------------------------------------------*/

/* Smooth Fade & Slide */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s forwards ease-out;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reveal Text Animation */
.reveal-text {
  position: relative;
  overflow: hidden;
}

.reveal-text::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: #be1e2d;
  animation: swipe 2s ease forwards;
}

@keyframes swipe {
  0% { width: 0; }
  50% { width: 100%; }
  100% { width: 0; left: 100%; }
}

/* Floating Animation */
.float-anim {
  animation: floatItem 3s ease-in-out infinite;
}

@keyframes floatItem {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* Soft Zoom Animation */
.zoom-soft {
  transition: 0.4s ease;
}

.zoom-soft:hover {
  transform: scale(1.06);
}

/* Border Glow */
.glow-frame {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.glow-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 3px;
  background: linear-gradient(45deg, #be1e2d, #ffffff, #be1e2d);
  -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
  mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: glowBorder 4s linear infinite;
}

@keyframes glowBorder {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}


/* ---------------------------------------------------
   BANNER RIGHT IMAGE — FRAME + INSPECTION THEME
-----------------------------------------------------*/

.right-image .slider-img img {
  width: 100%;
  border-radius: 25px;
  box-shadow: 0px 10px 25px rgba(0,0,0,0.25);
  border: 4px solid rgba(255,255,255,0.6);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.right-image .slider-img img:hover {
  transform: scale(1.04);
  box-shadow: 0px 15px 30px rgba(0,0,0,0.35);
}

/* Moving Glow Border (Professional Inspection Look) */
.right-image {
  position: relative;
  border-radius: 25px;
}

.right-image::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 25px;
  border: 3px dashed rgba(255, 255, 255, 0.4);
  animation: dashMove 5s linear infinite;
}

@keyframes dashMove {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ---------------------------------------------------
   INFO BOXES ANIMATION
-----------------------------------------------------*/

.info-stat {
  padding: 15px;
  border-radius: 15px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  transition: 0.4s ease;
}

.info-stat:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.2);
}


/* ---------------------------------------------------
   FEATURES SECTION (Hover Elevation)
-----------------------------------------------------*/

.features-item {
  transition: 0.4s ease;
  border-radius: 15px;
  padding: 20px;
}

.features-item:hover {
  transform: translateY(-10px);
  box-shadow: 0px 12px 30px rgba(0,0,0,0.15);
}


/* ---------------------------------------------------
   SERVICES — Inspection Scan Effect
-----------------------------------------------------*/

.scan-effect img {
  position: relative;
  overflow: hidden;
}

.scan-effect img::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: rgba(255,255,255,0.3);
  transform: skewX(-20deg);
  animation: scanLight 3s infinite;
}

@keyframes scanLight {
  0% { left: -100%; }
  50% { left: 120%; }
  100% { left: 120%; }
}


/* ---------------------------------------------------
   PORTFOLIO HOVER ANIMATION
-----------------------------------------------------*/

.portfolio-item .thumb img {
  transition: 0.4s ease;
}

.portfolio-item:hover img {
  transform: scale(1.1);
}

.hover-content {
  opacity: 0;
  transform: translateY(20px);
  transition: 0.4s ease;
}

.portfolio-item:hover .hover-content {
  opacity: 1;
  transform: translateY(0);
}


/* ---------------------------------------------------
   CONTACT FORM — Smooth Focus & Glow
-----------------------------------------------------*/

#contact input,
#contact textarea {
  border: 2px solid transparent;
  transition: 0.3s ease;
}

#contact input:focus,
#contact textarea:focus {
  border-color: #be1e2d;
  box-shadow: 0px 0px 8px rgba(190, 30, 45, 0.4);
}


/* ---------------------------------------------------
   STICKY SIDEBAR BUTTONS
-----------------------------------------------------*/

.social-sticky a {
  transition: 0.3s ease;
}

social-sticky a:hover {
  transform: scale(1.2) translateX(5px);
}

.whatsapp-floating {
  animation: floatItem 2.5s ease-in-out infinite;
}




/* footer */
/* ----------------------------- */
/*     EAGLEEYE FOOTER STYLE     */
/* ----------------------------- */

.eagle-footer {
  background: #1e1919;
  padding: 80px 0;
  color: #ddd;
  font-family: "Open Sans", sans-serif;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

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

.footer-col p {
  font-size: 15px;
  line-height: 24px;
  color: #bbb;
  text-align: start;
}

.footer-social a {
  display: inline-block;
  margin-right: 12px;
  font-size: 18px;
  color: #25d366;
  transition: 0.3s;
}

.footer-social a:hover {
  color: #fff;
}

.footer-links {
  list-style: none;
  padding: 0;
}

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

.footer-links li a {
  color: #bbb;
  text-decoration: none;
  transition: 0.3s;
}

.footer-links li a:hover {
  color: #25d366;
}

.newsletter-form {
  margin-top: 15px;
}

.newsletter-form input {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-bottom: 1px solid #777;
  background: transparent;
  color: #fff;
  margin-bottom: 20px;
  outline: none;
  font-size: 15px;
}

.newsletter-form button {
  width: 100%;
  padding: 12px;
  background: transparent;
  border: 1px solid #fff;
  border-radius: 30px;
  color: #fff;
  font-size: 15px;
  transition: 0.4s;
}

.newsletter-form button:hover {
  background: #25d366;
  border-color: #25d366;
  color: #000;
}

.footer-copy {
  margin-top: 25px;
  font-size: 14px;
  color: #888;
}

/* Responsive */
@media(max-width: 767px) {
  .footer-col {
    width: 100%;
  }
}

/* ------ */
/* FIX FOOTER LAYOUT */
.eagle-footer .row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-col {
  min-height: 250px; /* ensures equal height */
}

/* Prevent newsletter from dropping */
@media (min-width: 992px) {
  .footer-col {
    flex: 0 0 23%;
    max-width: 23%;
  }
}

/* Fix input shifting */
.newsletter-form input {
  width: 100%;
  margin-bottom: 18px;
}





/* -------- GALLERY SECTION -------- */

.gallery-section .filter-btn {
  border: none;
  padding: 10px 22px;
  margin: 5px;
  cursor: pointer;
  background: #eee;
  border-radius: 25px;
  font-size: 14px;
  transition: 0.3s;
}

.gallery-section .filter-btn.active,
.gallery-section .filter-btn:hover {
  background: #be1e2d;
  color: #fff;
}

.gallery-grid {
  margin-top: 30px;
}

.gallery-card {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  cursor: pointer;
  margin-bottom: 25px;
}

.gallery-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: 0.5s;
}

.gallery-card:hover img {
  transform: scale(1.1);
}

.gallery-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  opacity: 0;
  transition: 0.4s;
}

.gallery-card:hover .gallery-overlay {
  opacity: 1;
}


/* .contact-info */




/* brighton */
/* slider section */
.slider_section {
  background-image: url(../images/slider-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 90%;
  margin: 0 auto;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  height: 95%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.slider_section .detail-box {
  color: #fefdfc;
}

.slider_section .detail-box h1 {
  color: #ffff00;
  font-size: 1.8rem;
  text-transform: uppercase;
  font-weight: 400;
}

.slider_section .detail-box span {
  color: #fefdfc;
  font-size: 3.5rem;
  font-weight: 700;
}

.slider_section .detail-box p {
  color: #fefdfc;
  margin-top: 25px;
}

.slider_section .detail-box .btn-box {
  margin-top: 45px;
}

.slider_section .detail-box .btn-box .btn-1 {
  display: inline-block;
  padding: 12px 45px;
  background-color: #ffff00;
  color: #050505;
  border-radius: 0;
  text-transform: uppercase;
  margin-right: 10px;
}

.slider_section .detail-box .btn-box .btn-1:hover {
  background-color: #e6e600;
}

.slider_section .detail-box .btn-box .btn-2 {
  display: inline-block;
  padding: 12px 42px;
  background-color: #fefdfc;
  color: #050505;
  border-radius: 0;
  text-transform: uppercase;
}

.slider_section .detail-box .btn-box .btn-2:hover {
  background-color: #f8f0e9;
}

.slider_section ol.carousel-indicators {
  margin: 0;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  bottom: -75px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.slider_section ol.carousel-indicators li {
  width: 20px;
  height: 20px;
  opacity: 1;
  background-color: #ffff00;
  border-radius: 100%;
}

.slider_section ol.carousel-indicators li.active {
  background-color: transparent;
  border: 3px solid #fefdfc;
}

.offer_section .content-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 45px 0;
}

.offer_section .content-box .img-box {
  min-width: 125px;
  min-height: 115px;
  background-color: #53bec4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-right: 25px;
}

.offer_section .content-box .img-box svg {
  width: 55px;
  height: auto;
}

.offer_section .content-box:hover .img-box {
  background-color: #ba6e6e;
}

.offer_section .content-box:hover .img-box svg {
  fill: #fefdfc !important;
}

.offer_section .content-box:hover .img-box svg g {
  fill: #fefdfc !important;
}

.offer_section .content-box:hover .img-box svg path {
  fill: #fefdfc !important;
}

.offer_section .content-box .detail-box h6 {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 18px;
}

.offer_section .content-box .detail-box p {
  margin: 0;
}



/* scrolling */
/* ---------- Scrolling color-blink banner ---------- */
.scrolling-banner {
  width: 100%;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(0,0,0,0.85), rgba(30,30,30,0.85));
  color: #fff;
  border-top: 3px solid rgba(255,255,255,0.06);
  border-bottom: 3px solid rgba(255,255,255,0.06);
  z-index: 9998;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  padding: 8px 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}

/* the track holds two copies so scrolling is seamless */
.scrolling-track {
  display: flex;
  gap: 40px;
  white-space: nowrap;
  will-change: transform;
  align-items: center;
  animation: scroll-left linear infinite;
  animation-duration: 18s; /* adjust speed: lower = faster */
}

/* actual text blocks */
.scrolling-text {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  margin-right: 20px;
  animation: color-cycle 2s linear infinite;
}

/* color blinking / cycling */
@keyframes color-cycle {
  0%   { color: #ffd166; text-shadow: 0 0 6px rgba(255,209,102,0.4); }
  25%  { color: #06d6a0; text-shadow: 0 0 8px rgba(6,214,160,0.35); }
  50%  { color: #4cc9f0; text-shadow: 0 0 8px rgba(76,201,240,0.35); }
  75%  { color: #ff6b6b; text-shadow: 0 0 8px rgba(255,107,107,0.35); }
  100% { color: #ffd166; text-shadow: 0 0 6px rgba(255,209,102,0.4); }
}

/* scrolling animation: from full right -> left (repeat works because of two copies) */
@keyframes scroll-left {
  0%   { transform: translateX(0%); } /* track at start */
  100% { transform: translateX(-50%); } /* moves left by half width (second copy follows) */
}

/* smaller screens */
@media (max-width: 900px) {
  .scrolling-banner { font-size: 14px; padding: 7px 0; }
  .scrolling-track { animation-duration: 14s; }
}

/* accessibility: respects reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .scrolling-track { animation: none; transform: translateX(0); }
  .scrolling-text { animation: none; }
}


/* scroller */
/* SCROLLING HEADLINE BAR */
.scrolling-headline {
    background: #1e26be; /* headline color */
    color: #fff;
    padding: 8px 0;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    font-size: 16px;
    font-weight: 600;

margin-top: 90px;  }

.scrolling-text {
    display: inline-block;
    padding-left: 100%;
    animation: scroll-left 35s linear infinite;
}

/* Animation */
@keyframes scroll-left {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .scrolling-headline {
        font-size: 14px;
        padding: 6px 0;
    }
}



/* === FIX LOGO MOVING DOWN IN MOBILE NAV === */
@media (max-width: 767px) {

  /* Keep header fixed height so nothing shifts */
  .header-area {
      height: 100px !important;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 9999;
  }

  /* Mobile menu should not push logo */
  .header-area .main-nav .nav {
      position: absolute;
      top: 100px; /* dropdown appears BELOW header */
      left: 0;
      width: 100%;
      display: none !important;
      margin-top: 0 !important;
      z-index: 999999;
  }

  /* When user clicks hamburger menu */
  .header-area .main-nav .nav.show {
      display: block !important;
  }

  /* Remove problematic margin from template */
  .background-header .main-nav .nav {
      margin-top: 0 !important;
  }
}