/*

TemplateMo 565 Onix Digital

https://templatemo.com/tm-565-onix-digital


------------------------------------------------
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=Poppins:wght@100;200;300;400;500;600;700;800;900&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: 'Poppins', 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: 'Poppins', 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 h2 {
  font-size: 30px;
  text-transform: capitalize;
  color: #2a2a2a;
  font-weight: 700;
  letter-spacing: 0.25px;
  position: relative;
  z-index: 2;
  line-height: 44px;
  margin-bottom: -5px;
}

.section-heading h2 em {
  font-style: normal;
  color: #03a4ed;
}

.section-heading h2 span {
  color: #ff695f;
  font-weight: 700;
  opacity: 1;
  text-transform: capitalize;
}

.section-heading span {
  font-size: 30px;
  text-transform: uppercase;
  font-weight: 700;
  color: #ff695f;
  opacity: 0.15;
}

.main-blue-button a {
  display: inline-block;
  background-color: #03a4ed;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

.main-blue-button-hover a {
  display: inline-block;
  background-color: #03a4ed;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  transition: all .3s;
}

.main-blue-button-hover a:hover {
  background-color: #ff695f;
}

.main-red-button a {
  display: inline-block;
  background-color: #ff695f;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

.main-red-button-hover a {
  display: inline-block;
  background-color: #ff695f;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  transition: all .3s;
}

.main-red-button-hover a:hover {
  background-color: #03a4ed;
}

.main-white-button a {
  display: inline-block;
  background-color: #fff;
  font-size: 15px;
  font-weight: 400;
  color: #ff695f;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

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

.background-header {
  background-color: #fff!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: #1e1e1e!important;
}

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

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

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

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

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

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

.background-header .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 {
  color: #fff !important;
  padding: 0px 20px;
  font-weight: 400;
}

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

.header-area .main-nav .nav li:last-child .main-red-button-hover a:hover,
.background-header .main-nav .nav li:last-child .main-red-button-hover a:hover {
  background-color: #03a4ed !important;
}

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

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

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

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #ff685f!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: #ff685f!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: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

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

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  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: #1e1e1e;
}

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

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

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

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

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

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

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

@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: #ff685f!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #f7f7f7;
    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: #ff685f!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: #ff695f;
    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: #ff695f;
    border-radius: 50%;
}



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

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

.main-banner:after {
  content: '';
  background-image: url(../images/baner-dec-left.png);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 100px;
  width: 267px;
  height: 532px;
}

.main-banner:before {
  content: '';
  background-image: url(../images/banner-right-image.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  right: 0;
  top: 100px;
  width: 819px;
  height: 674px;
}

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

.main-banner .item h6 {
  text-transform: uppercase;
  font-size: 18px;
  color: #ff695f;
  margin-bottom: 15px;
}

.main-banner .item h2 {
  font-size: 50px;
  font-weight: 700;
  color: #2a2a2a;
  line-height: 72px;
}

.main-banner .item h2 em {
  color: #03a4ed;
  font-style: normal;
}

.main-banner .item h2 span {
  color: #ff695f;
}

.main-banner .item p {
  margin: 20px 0px;
}

.main-banner .item .down-buttons {
  display: inline-flex;
}

.main-banner .item .down-buttons .call-button i {
  margin-right: 5px;
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  border-radius: 50%;
  background: rgb(255,104,95);
  background: linear-gradient(105deg, rgba(255,104,95,1) 0%, rgba(255,144,104,1) 100%);
  color: #fff;
  font-size: 20px;
}

.main-banner .item .down-buttons .call-button a {
  color: #ff695f;
  font-size: 15px;
  font-weight: 500;
  margin-left: 30px;
}

.main-banner .owl-dots {
  margin-top: 60px;
  counter-reset: dots;
}

.main-banner .owl-dot:before {
  counter-increment:dots;
  content: counter(dots);
  font-size: 20px;
  font-weight: 500;
  margin-left: 10px;
  color: #2a2a2a;
  width: 15px;
  display: inline-block;
  text-align: center;
  border-bottom: 3px solid transparent;
  transition: all .5s;
}

.main-banner .active:before {
  color: #ff685f;
  border-bottom: 3px solid #ff685f;
}


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

.our-services .services-left-dec img {
  width: 387px;
  height: 638px;
  left: -80px;
  top: -140px;
  position: absolute;
  z-index: 1;
}

.our-services .services-right-dec img {
  width: 305px;
  height: 305px;
  right: 25px;
  bottom: -120px;
  position: absolute;
  z-index: 1;
}

.our-services .container {
  position: relative;
}

.our-services {
  position: relative;
  margin-top: 0px;
  padding-top: 120px;
}

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

.our-services .section-heading h2 {
  margin: 0px 60px;
  margin-bottom: -10px;
}

.our-services .item {
  text-align: center;
  margin: 15px;
  border-radius: 20px;
  background-color: #fff;
  padding: 30px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.05);
}

.our-services .item h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 30px;
  line-height: 30px;
}

.our-services .item .icon {
  width: 45px;
  height: 45px;
  margin: 0 auto;
}

.our-services .item p {
  margin-top: 35px;
  padding-top: 30px;
  border-top: 1px solid #eee;
}

.our-services .owl-dots {
  text-align: center;
  margin-top: 40px;
}
.our-services .owl-dots .owl-dot {
  width: 6px;
  height: 6px;
  background-color: #ff695f;
  border-radius: 50%;
  opacity: 0.3;
  margin: 0px 5px;
}

.our-services .owl-dots .active {
  opacity: 1;
  width: 10px;
  height: 10px;
}


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

.about-us {
  margin-top: 0px;
  padding-top: 120px;
}

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

.about-us .section-heading h2 {
  margin-right: 60px;
}

.about-us .section-heading p {
  margin-top: 50px;
}

.about-us .fact-item .icon {
  width: 45px;
  height: 45px;
}

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

.about-us .fact-item .count-digit {
  font-size: 48px;
  font-weight: 700;
  color: #2a2a2a;
  margin-top: 5px;
}

.about-us .fact-item .count-title {
  font-size: 15px;
  color: #ff695f;
}

.about-us .fact-item p {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}


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

.our-portfolio .portfolio-left-dec img {
  width: 342px;
  height: 311px;
  left: 45px;
  top: 120px;
  position: absolute;
  z-index: 1;
}

.our-portfolio {
  padding-top: 120px;
  margin-top: 0px;
  position: relative;
}

.our-portfolio .section-heading {
  text-align: center;
  margin-bottom: 60px;
}

.our-portfolio .section-heading h2 {
  text-align: center;
  margin: 0px 60px 0px 60px;
  margin-bottom: -5px;
  position: relative;
  z-index: 1;
}

.our-portfolio {
  margin: 0px 15px;
}

.our-portfolio .item .thumb {
  position: relative;
}

.our-portfolio .item .thumb:hover .hover-effect {
  bottom: 30px;
}

.our-portfolio .item .thumb:hover img {
  opacity: 0.7;
}

.our-portfolio .item .hover-effect {
  position: absolute;
  background-image: url(../images/hover-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  transition: all .5s;
  bottom: -240px;
  right: 30px;
  width: 239px;
  height: 210px;
}

.our-portfolio .item .hover-effect .inner-content {
  position: absolute;
  right: 30px;
  bottom: 30px;
  text-align: right;
}

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

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

.our-portfolio .item .thumb img {
  border-radius: 20px;
  transition: all .3s;
}

.owl-portfolio .owl-nav {
  position: absolute;
  top: 42%;
  width: 100%;
}

.owl-portfolio .owl-nav .owl-prev {
  position: absolute;
  left: 25px;
}

.owl-portfolio .owl-nav .owl-next {
  position: absolute;
  right: 30px;
}

.owl-portfolio .owl-nav .owl-prev span {
    color: transparent;
}

.owl-portfolio .owl-nav .owl-prev span:hover::after{
  opacity: 1;
}

.owl-portfolio .owl-nav .owl-prev span:after {
  width: 46px;
  height: 46px;
  background-color: #ff695f;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  border-radius: 50%;
  color: #fff;
  content: '\f104';
  font-size: 22px;
  font-family: 'FontAwesome';
  transition: all .5s;
  opacity: 0.5;
}

.owl-portfolio .owl-nav .owl-next span {
    color: transparent;
}

.owl-portfolio .owl-nav .owl-next span:hover::after{
  opacity: 1;
}

.owl-portfolio .owl-nav .owl-next span:after {
  width: 46px;
  height: 46px;
  background-color: #ff695f;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  border-radius: 50%;
  color: #fff;
  content: '\f105';
  font-size: 22px;
  font-family: 'FontAwesome';
  transition: all .5s;
  opacity: 0.5;
}

.owl-portfolio .owl-dots {
  text-align: center;
  margin-top: 40px;
}
.owl-portfolio .owl-dots .owl-dot {
  width: 6px;
  height: 6px;
  background-color: #ff695f;
  border-radius: 50%;
  opacity: 0.3;
  margin: 0px 5px;
}

.owl-portfolio .owl-dots .active {
  opacity: 1;
  width: 10px;
  height: 10px;
}

/* 
---------------------------------------------
Pricing
--------------------------------------------- 
*/

.pricing-tables .tables-left-dec img {
  width: 418px;
  height: 851px;
  left: 0;
  top: 120px;
  position: absolute;
  z-index: 1;
}

.pricing-tables .tables-right-dec img {
  width: 359px;
  height: 848px;
  right: 0;
  top: 45px;
  position: absolute;
  z-index: 1
}

.pricing-tables {
  z-index: 2;
  position: relative;
  padding-top: 120px;
  margin-top: 0px;
}

.pricing-tables .section-heading {
  text-align: center;
  margin-bottom: 60px;
}

.pricing-tables .section-heading h2 {
  text-align: center;
  margin: 0px 60px 0px 60px;
  margin-bottom: -5px;
  position: relative;
  z-index: 1;
}

.pricing-tables .item {
  position: relative;
  z-index: 2;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 60px;
  text-align: center;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  border-radius: 45px;
}

.pricing-tables .item h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
}

.pricing-tables .item em {
  color: #ff695f;
  font-size: 15px;
  display: block;
  margin-top: 25px;
  text-decoration: line-through;
  font-style: normal;
}

.pricing-tables .item span {
  font-size: 44px;
  color: #ff695f;
  font-weight: 700;
  display: block;
  margin-top: -5px;
}

.pricing-tables .item ul {
  margin-top: 30px;
}

.pricing-tables .item ul li {
  display: block;
  font-size: 15px;
  color: #7a7a7a;
  margin-bottom: 20px;
}

.pricing-tables .item .main-blue-button {
  margin-top: 40px;
}

.pricing-tables .first-item {
  background-image: url(../images/first-plan-bg.png);
}

.pricing-tables .second-item {
  background-image: url(../images/second-plan-bg.png);
}

.pricing-tables .third-item {
  background-image: url(../images/third-plan-bg.png);
}


/* 
---------------------------------------------
Subscribe
--------------------------------------------- 
*/

.subscribe {
  margin-top: 120px;
}

.subscribe .inner-content {
  background-image: url(../images/subscribe-bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 20px;
  padding: 60px 0px;
  width: 100%;
  position: relative;
}

.subscribe .inner-content:after {
  content: '';
  background-image: url(../images/subscribe-dec.png);
  position: absolute;
  width: 195px;
  height: 138px;
  background-repeat: no-repeat;
  background-position: center center;
  right: -20px;
  top: -20px;
}

.subscribe .inner-content h2 {
  font-size: 30px;
  color: #fff;
  font-weight: 700;
  text-align: center;
  margin-bottom: 25px;
}

.subscribe .inner-content form {
  width: 100%;
  height: 80px;
  border-radius: 40px;
  background-color: #fff;
}

.subscribe .inner-content form input {
  width: 38.5%;
  margin-top: 20px;
  line-height: 40px;
  background-color: transparent;
  border: none;
  outline: none;
  padding: 0px 20px;
  font-size: 15px;
  color: #2a2a2a;
}

.subscribe .inner-content form input#website {
  border-right: 1px solid #eee;
}

.subscribe .inner-content form input::placeholder {
  color: #afafaf;
}

.subscribe .inner-content form button {
  display: inline-block;
  background-color: #03a4ed;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  width: 20%;
  margin-right: 10px;
  text-transform: capitalize;
  padding: 12px 20px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border: none;
  text-align: center;
  transition: all .3s;
}

.subscribe .inner-content form button:hover {
  background-color: #ff695f;
}


/* 
---------------------------------------------
Video
--------------------------------------------- 
*/

.our-videos .videos-left-dec img {
  width: 220px;
  height: 471px;
  left: 0;
  top: 120px;
  position: absolute;
}

.our-videos .videos-right-dec img {
  width: 730px;
  height: 523px;
  right: 0;
  top: 45px;
  position: absolute;
}

.our-videos {
  position: relative;
  margin-bottom: -30px;
  padding-top: 120px;
  margin-top: 0px;
}

.our-videos .naccs {
  position: relative;
}

.our-videos .naccs .menu div {
  margin-bottom: 30px;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.our-videos .naccs .menu div {
  transition: all 0.3s;
}

.our-videos .naccs .menu div.active .thumb .inner-content {
  text-align: center;
  width: 100%;
  height: 100%;
  border-radius: 23px;
}

.our-videos .naccs .menu div.active .thumb .inner-content h4 {
  top: 40%;
  transform: translateY(-55%);
  position: relative;
}

.our-videos .naccs .menu div.active .thumb .inner-content span {
  display: block;
  position: relative;
  top: 55%;
  transform: translateY(-55%);
}

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

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

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

.our-videos ul.nacc li {
  width: 100%;
}

.our-videos .nacc .thumb {
  position: relative;
  border-radius: 23px;
}

.our-videos .nacc .thumb iframe {
  border-radius: 23px;
  height: 675px;
}

.our-videos .nacc .thumb .overlay-effect {
  background: rgb(255,104,95);
  background: linear-gradient(105deg, rgba(255,104,95,1) 0%, rgba(255,144,104,1) 100%);
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  border-top-left-radius: 23px;
  border-bottom-right-radius: 23px;
  padding: 35px 30px;
  text-align: center;
}

.our-videos .nacc .thumb .overlay-effect h4 {
  font-size: 20px;
  margin-top: 5px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.our-videos .nacc .thumb .overlay-effect span {
  font-size: 15px;
  color: #fff;
}

.our-videos .menu .thumb {
  position: relative;
}

.our-videos .menu .thumb .inner-content {
  background: rgb(255,104,95);
  background: linear-gradient(105deg, rgba(255,104,95,1) 0%, rgba(255,144,104,1) 100%);
  border-top-left-radius: 23px;
  border-bottom-right-radius: 23px;
  position: absolute;
  left: 0;
  top: 0;
  padding: 20px 30px;
  transition: all 0.3s;
}

.our-videos .menu .thumb .inner-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  transition: all 0.3s;
}

.our-videos .menu .thumb .inner-content span {
  font-size: 15px;
  color: #fff;
  font-weight: 400;
  display: none;
  transition: all 0.3s;
}


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

.contact-dec img {
  position: absolute;
  z-index: 1;
  width: 459px;
  height: 702px;
  right: 0;
  bottom: -400px;
}

.contact-left-dec img {
  position: absolute;
  z-index: 1;
  width: 174px;
  height: 319px;
  left: 0;
  top: 120px;
}

.contact-us {
  z-index: 2;
  position: relative;
  padding-top: 120px;
  margin-top: 0px;
}

.contact-us .section-heading h2 {
  margin-right: 100px;
  margin-bottom: 40px;
}

.contact-us #map iframe {
  border-radius: 23px;
  position: relative;
  z-index: 2;
}

.contact-us .info {
  margin-top: 30px;
  position: relative;
  z-index: 5;
  display: inline-flex;
}

.contact-us .info span {
  opacity: 1;
  display: inline-flex;
  margin-right: 30px;
}

.contact-us .info span i {
  float: left;
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  background: rgb(255,104,95);
  background: linear-gradient(105deg, rgba(255,104,95,1) 0%, rgba(255,144,104,1) 100%);
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  margin-left: 30px;
  margin-right: 15px;
}

.contact-us .info span a {
  color: #ff685f;
  font-size: 14px;
  font-weight: 400;
  line-height: 25px;
  text-transform: none;
}

form#contact {
  margin-left: -100px;
  position: relative;
  z-index: 2;
  background-image: url(../images/contact-form-bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  padding: 60px 120px;
  border-radius: 20px;
}

form#contact input {
  width: 100%;
  height: 46px;
  border-radius: 0px;
  background-color: transparent;
  border-bottom: 1px solid #9bdbf8;
  border-top: none;
  border-left: none;
  border-right: none;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 0px 0px;
  margin-bottom: 35px;
}

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

form#contact button {
  display: inline-block;
  background-color: #ff695f;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border: none;
  outline: none;
  transition: all .3s;
}

form#contact button:hover {
  background-color: #03a4ed;
}


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

.footer-dec {
  width: 100%;
  margin-top: 160px;
}

footer {
  margin-top: -50px;
  z-index: 2;
  position: relative;
}

footer .footer-item h4 {
  font-size: 18px;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 30px;
}

footer .about .logo img {
  width: 89px;
  margin-bottom: 30px;
}

footer .about a {
  color: #afafaf;
  font-weight: 300;
}

footer .about ul {
  margin-top: 20px;
}

footer .about ul li {
  display: inline-block !important;
  margin-right: 5px;
}

footer .about ul li a {
  width: 32px;
  height: 32px;
  background-color: #03a4ed;
  color: #fff !important;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  line-height: 32px;
  font-size: 15px;
}

footer .about ul li a:hover {
  background-color: #ff695f;
}

footer .footer-item ul li {
  display: block;
  margin-bottom: 12px;
}

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

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

footer .footer-item ul li a:hover {
  color: #ff695f;
}

footer .footer-item p {
  font-size: 15px;
  color: #afafaf;
  margin-top: -5px;
}

footer .footer-item form {
  background-color: #03a4ed;
  height: 46px;
  border-radius: 23px;
  position: relative;
  margin-top: 15px;
}

footer .footer-item form input {
  line-height: 46px;
  background-color: transparent;
  border: none;
  font-size: 14px;
  padding: 0px 20px;
  outline: none;
}

footer .footer-item form input::placeholder {
  color: #fff;
}

footer .footer-item form button {
  position: absolute;
  right: 20px;
  top: 10px;
  color: #fff;
  background-color: transparent;
  border: none;
  outline: none;
}

footer .copyright p {
  text-align: center;
  border-top: 1px solid #eee;
  color: #afafaf;
  margin-top: 50px;
  padding: 20px 0px;
  font-weight: 300;
}

footer .copyright p a {
  color: #ff695f;
}

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


@media (max-width: 1240px) {
  .main-banner::before {
    width: 640px;
    height: 526px;
  }

}

@media (max-width: 992px) {
  .main-banner::before {
    display: none;
  }
  .main-banner .item {
    margin-right: 0px;
  }
  .main-banner  {
    padding-bottom: 0px;
  }
  .about-us .section-heading h2 {
    margin-right: 0px;
  }
  .fact-item {
    text-align: center;
  }
  .fact-item .icon {
    margin: 0 auto;
  }
  .our-portfolio .section-heading h2,
  .pricing-tables .section-heading h2 {
    margin: 0px;
  }
  .pricing-tables .item {
    margin-bottom: 30px;
  }
  .subscribe .inner-content {
    padding: 60px 30px;
  }
  .our-videos ul.nacc {
    margin-bottom: 30px;
  }
  .our-videos .naccs .menu div img {
    border-radius: 50px;
  }
  .our-videos .menu .thumb .inner-content {
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
  }
  .contact-us .section-heading h2 {
    margin-right: 0px;
    text-align: center;
  }
  .our-videos ul.nacc li {
    transform: translateX(0px);
    transform: translateY(-50px);
  }
  .our-videos .nacc .thumb iframe {
    height: 500px;
  }
  form#contact {
    margin-left: 0px;
    margin-top: 60px;
  }
  form#contact {
    padding: 45px 30px;
  }
  .footer-item {
    margin-bottom: 45px;
  }
  .subscribe-newsletters {
    margin-bottom: 0px;
  }
}

@media (max-width: 767px) {
  .main-banner .item .down-buttons {
    display: inline-block;
  }
  .main-banner .item .down-buttons .main-blue-button {
    margin-right: 0px;
    margin-bottom: 15px;
  }
  .main-banner .item .down-buttons .call-button a {
    margin-left: 0px;
  }
  .subscribe .inner-content:after {
    z-index: -1;
  }
  .subscribe .inner-content {
    padding: 60px 30px 100px 30px;
  }
  .subscribe .inner-content form input {
    width: 49%;
  }
  .subscribe .inner-content form button {
    width: 100%;
    background-color: #ff695f;
    margin-top: 30px;
  }
  .our-videos ul.nacc li {
    transform: translateX(0px);
    transform: translateY(-50px);
  }
  .contact-left-dec {
    display: none;
  }
  .contact-us .info {
    display: inline-block;
  }
  .contact-us .info span {
    margin-bottom: 20px;
  }
}

/* --- PARTNERS ANIMATED SECTION --- */
.partners-section {
    padding: 60px 0;
    background: #fafafa;
    overflow: hidden;
}
.slider {
    height: 100px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.slide-track {
    animation: scroll 40s linear infinite;
    display: flex;
    width: calc(250px * 14); /* Width of slide * number of slides */
}
.slide {
    height: 100px;
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slide img {
    max-width: 150px;
    height: 150px;
    opacity: 0.7;
    transition: 0.3s;
}
.slide img:hover {
    opacity: 1;
    transform: scale(1.1);
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 7)); } /* Half the total width */
}

/* --- EDGEVIBE PREMIUM CHAT CARD CSS --- */

.edge-chat-wrapper {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99999;
    font-family: 'Poppins', sans-serif;
}

/* Launcher Button */
.chat-launcher-btn {
    width: 60px;
    height: 60px;
    background-color: #000; /* Or use Brand Blue #03a4ed */
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
    position: relative;
}

.chat-launcher-btn:hover {
    transform: scale(1.1);
}

.notify-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff695f;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border: 2px solid white;
}

/* The Chat Card */
.chat-card {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 340px; /* Slightly wider for the list */
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    display: flex;
    flex-direction: column;
}

.chat-card.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Header */
.chat-card-header {
    background-color: #111;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    flex-shrink: 0;
}

.agent-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.image-wrapper {
    position: relative;
}

.image-wrapper img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #333;
}

.online-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background-color: #25d366;
    border-radius: 50%;
    border: 1px solid #111;
}

.agent-details h5 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: #fff;
}

.agent-details span {
    font-size: 11px;
    color: #bbb;
}

.close-btn {
    background: transparent;
    border: none;
    color: #888;
    font-size: 18px;
    cursor: pointer;
}

.close-btn:hover {
    color: #fff;
}

/* Body (Scrollable List) */
.chat-card-body {
    padding: 15px 20px;
    background: #f9f9f9;
    max-height: 300px; /* Limits height */
    overflow-y: auto; /* Adds scroll if list is long */
}

.intro-msg {
    font-size: 13px;
    color: #555;
    margin-bottom: 10px;
}

/* Service Checkbox Styling */
.service-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    border: 1px solid #eee;
    transition: all 0.2s;
}

.service-item:hover {
    border-color: #03a4ed;
    background: #f0f8ff;
}

/* Hide default checkbox */
.service-item input {
    display: none;
}

.service-item .text {
    font-size: 13px;
    font-weight: 500;
    color: #333;
}

.service-item .check-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 10px;
    transition: all 0.2s;
}

/* When Checked */
.service-item input:checked ~ .check-icon {
    background-color: #03a4ed;
    border-color: #03a4ed;
    color: white;
}
.service-item input:checked ~ .text {
    color: #03a4ed;
    font-weight: 600;
}

/* Footer */
.chat-card-footer {
    padding: 15px 20px;
    background: white;
    border-top: 1px solid #eee;
    flex-shrink: 0;
}

.whatsapp-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    background-color: #F4B400; /* Premium Yellow (or use #03a4ed for Blue) */
    color: #000;
    font-weight: 600;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    gap: 8px;
    font-size: 14px;
    transition: background 0.3s;
}

.whatsapp-cta-btn:hover {
    filter: brightness(0.9);
}

/* Checkboxes */
.service-option {
    background: white;
    margin-bottom: 8px;
    padding: 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.2s;
}
.service-option:hover {
    background: #f9f9f9;
}
.service-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}
.service-option label {
    font-size: 14px;
    color: #333;
    cursor: pointer;
    width: 100%;
    margin-bottom: 0;
}

/* Footer */
.chat-footer {
    padding: 15px;
    background: white;
    border-top: 1px solid #eee;
}
.whatsapp-send-btn {
    width: 100%;
    background: #25D366;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.3s;
}
.whatsapp-send-btn:hover {
    background: #128C7E;
}

/* --- PORTFOLIO GRID ADJUSTMENTS VIDEOS --- */
.our-portfolio .item {
    margin-bottom: 30px; /* Spacing between grid items */
}
/* Ensure hover effect fits grid */
.our-portfolio .item .hover-effect {
    bottom: -100%; /* Hidden initially */
    right: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.8); /* Cyan with opacity */
}
.our-portfolio .item .thumb:hover .hover-effect {
    bottom: 0;
}
.our-portfolio .item .hover-effect .inner-content {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    right: auto;
    bottom: auto;
}

/* Video Card Styling */
.video-thumb video {
    border-radius: 20px;
    object-fit: cover;
    background: #000;
}
.inner-content-static {
    text-align: center;
    margin-top: 10px;
}
.inner-content-static h4 {
    font-size: 18px;
    font-weight: 700;
    color: #2a2a2a;
}
.inner-content-static span {
    font-size: 14px;
    color: #ff695f;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}
.shake {
  animation: shake 0.3s;
}

@keyframes shake {
  0% { box-shadow: 0 10px 40px rgba(0,0,0,0.15); border: 1px solid transparent; }
  50% { box-shadow: 0 0 20px rgba(3, 164, 237, 0.6); border: 1px solid #03a4ed; }
  100% { box-shadow: 0 10px 40px rgba(0,0,0,0.15); border: 1px solid transparent; }
}

.shake {
  animation: shake 1s ease-in-out;
}

/* Style for the mobile phone number */
.mobile-contact {
    margin-top: 15px;
    border-top: 1px solid #eee;
    padding-top: 10px;
    text-align: center;
}
.mobile-contact a:hover {
    color: #ff695f !important;
}
/* --- MOBILE FIX FOR CHATBOT --- */
@media (max-width: 767px) {
    .chat-card {
        width: 90% !important; /* Take up 90% of screen width */
        right: 5% !important;  /* Center it (5% left + 5% right) */
        bottom: 90px !important; /* Move it up slightly so launcher is visible */
        max-height: 80vh; /* Prevent it from being taller than the screen */
    }
    
    .chat-card-body {
        max-height: 250px; /* Make the list scrollable earlier on mobile */
    }
    
    /* Adjust the launcher position for mobile */
    .edge-chat-wrapper {
        bottom: 20px;
        right: 20px;
    }
}

/* --- CERTIFICATE SECTION STYLES --- */
.certificate-section {
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(3,164,237,1) 100%); /* Brand Blue Gradient */
    padding: 80px 0;
    margin-top: 80px;
    color: white;
    position: relative;
    overflow: hidden;
}

/* Text Side */
.badge-verified {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,0.4);
}
.badge-verified i { color: #00ff88; margin-right: 5px; }

.cert-text h2 {
    font-size: 40px;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
}
.cert-text h2 em { font-style: normal; color: #ff695f; } /* Red Accent */
.cert-text p { color: #f0f0f0; font-size: 16px; margin-bottom: 30px; }

.cert-features { display: flex; gap: 30px; }
.c-item { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; }
.c-item i { color: #ff695f; font-size: 24px; }

/* Image Side (The Certificate) */
.cert-image-wrapper {
    position: relative;
    padding: 20px;
    background: rgba(255,255,255,0.1);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    text-align: center;
}

.cert-img {
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 5px solid #fff; /* White Frame */
    max-width: 100%;
    transition: transform 0.5s;
}

.cert-image-wrapper:hover .cert-img {
    transform: scale(1.02);
}

/* Mobile Adjustments for Cert Section */
@media (max-width: 992px) {
    .certificate-section { text-align: center; }
    .cert-features { justify-content: center; margin-bottom: 40px; }
    .cert-text h2 { font-size: 30px; }
}

/* --- MOBILE FIX: CENTER THE CARD PERFECTLY --- */
@media (max-width: 767px) {
    .chat-card {
        /* Force the card to fit the screen width */
        width: 90% !important;
        max-width: 350px !important;
        
        /* Center it horizontally */width: 340px; /* Don't get huge on tablets */
        
        /* Perfect Centering Trick */
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto;
        
        /* Positioning */
        bottom: 90px !important; 
        position: fixed;
    }

    /* Make the launcher button slightly smaller on mobile to save space */
    .chat-launcher-btn {
        width: 50px;
        height: 50px;
        font-size: 20px;
        bottom: 20px;
        right: 20px;
    }
    
    .edge-chat-wrapper {
        bottom: 20px;
        right: 20px;
    }
}

/* Slider Container Spacing */
.partners-section {
    padding: 60px 0;
    background-color: #fff; /* or your preferred background */
}

/* The Logo Box */
.partnerSwiper {
    width: 100%;
    padding-bottom: 50px; /* Space for pagination dots */
}

.swiper-slide {
    /* Center content in the slide */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px; /* Fixed height ensures alignment */
    background: transparent;
}

/* THE FIX: Ensures images are never cut off */
.swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;      /* Allows width to adjust naturally */
    height: auto;     /* Allows height to adjust naturally */
    object-fit: contain; /* Crucial: Keeps the whole image visible */
    filter: grayscale(100%); /* Optional: Makes logos grey until hovered */
    transition: 0.3s;
    opacity: 0.7;
}

/* Optional: Color on hover */
.swiper-slide img:hover {
    filter: grayscale(0%);
    opacity: 1;
}
/* 1. Makes the images line up horizontally */
.swiper-wrapper {
    display: flex;        
    transition-property: transform;
    box-sizing: content-box;
}

/* 2. Ensures the content doesn't overflow out of the box */
.partnerSwiper {
    overflow: hidden;
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* 3. Stops the slides from squashing or shrinking */
.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
}

/* 1. Forces the list to be a horizontal row, not a vertical stack */
.swiper-wrapper {
    display: flex;
    align-items: center; /* Centers them vertically */
}

/* 2. Hides the scrollbar and keeps it clean */
.partnerSwiper {
    width: 100%;
    overflow: hidden; 
    padding: 20px 0; /* Reduces the white space above/below */
}

/* 3. CRITICAL FIX: Forces images to be small and uniform */
.swiper-slide img {
    height: 80px !important;  /* Locks the height so they aren't huge */
    width: auto !important;   /* Keeps the correct shape (aspect ratio) */
    object-fit: contain;      /* Ensures the logo fits inside the box */
    max-width: 150px;         /* Prevents any logo from getting too wide */
    display: block;
    margin: 0 auto;           /* Centers the image in its slot */
}

/* 4. Ensures the slide container behaves */
.swiper-slide {
    flex-shrink: 0;           /* Prevents squishing */
    display: flex;
    justify-content: center;
}
/* Makes the movement smooth and linear (no stopping) */
.swiper-wrapper {
    transition-timing-function: linear !important;
}