/* ----------------------------------------------------------------------------------------
Template: inox - Kitchen & Interior Design Template
Version: 1.1.0
Author: Darshat Mistry - support@Darshat Mistry.com
 -----------------------------------------------------------------------------------------*/
/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. header
04. global
05. parallax
06. our team
07. blog
08. footer
09. pages
10. faq
11. aside
12. contact
13. preloader

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&subset=latin-ext");
body {
  background: #f5f5f5;
}

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

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

.clearfix {
  display: inline-block;
}

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

* html .clearfix {
  height: 1%;
}

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

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

* {
  box-sizing: border-box;
}

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

a {
  text-decoration: none !important;
}

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

ul {
  margin-bottom: 0px;
}

/* 
---------------------------------------------
header
--------------------------------------------- 
*/
.header-area {
  position:fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 1000;
  height: 100px;
  background: #fff;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
}
.header-area .main-nav .logo {
  float: left;
  margin-top: 24px;
  -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 img {
  display: block;
  -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 .nav {
  float: right;
  margin-top: 28px;
  margin-left: 100px;
  -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 .nav li {
  padding-left: 20px;
  padding-right: 20px;
}
.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}
.header-area .main-nav .nav li a {
  display: block;
  font-weight: 400;
  font-size: 14px;
  color: #063783;
  -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: 1.58px;
}
.header-area .main-nav .nav li a:hover {
  color: #063783;
}
.header-area .main-nav .nav li a.contact-btn {
  padding-left: 25px;
  padding-right: 25px;
  border: 1px solid #063783;
  height: 35px;
  margin-top: 2px;
  line-height: 34px;
  letter-spacing: 0.5px;
  background: none;
  color: #063783;
  position: relative;
  overflow: hidden;
  -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 .nav li a.contact-btn:hover {
  background: #063783;
  color: #fff;
}
.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 35px;
}
.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #063783;
  position: absolute;
  right: 18px;
  top: 12px;
}
.header-area .main-nav .nav li.submenu ul {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.08);
  overflow: hidden;
  top: 40px;
  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 {
  display: block;
  background: #fff;
  color: #063783;
  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;
}
.header-area .main-nav .nav li.submenu ul li a:before {
  content: "";
  position: absolute;
  width: 0px;
  height: 40px;
  left: 0px;
  top: 0px;
  bottom: 0px;
  -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: #063783;
}
.header-area .main-nav .nav li.submenu ul li a:hover {
  background: #fafafa;
  padding-left: 25px;
}
.header-area .main-nav .nav li.submenu ul li a:hover:before {
  width: 1px;
}
.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: 23px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}
.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: #063783;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}
.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: #063783;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}
.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: #063783;
}
.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: #063783;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav .nav li.submenu {
    padding-right: 20px;
  }
  .header-area .main-nav .nav li.submenu:after {
    right: 5px;
  }
}
@media (max-width: 991px) {
  .header-area {
    background: #fff;
    height: 80px;
    box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
    margin-top: 24px !important;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: left;
    width: 100%;
    margin-top: 20px !important;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #f5f5f5;
    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;
    padding-left: 30px !important;
    border: none !important;
    background: #fff !important;
    color: #063783 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #f5f5f5 !important;
  }
  .header-area .main-nav .nav li a.contact-btn {
    margin-top: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
  }
  .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 {
    padding-left: 50px !important;
  }
  .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: #063783;
    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: 992px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}
/* 
---------------------------------------------
welcome
--------------------------------------------- 
*/
.welcome {
  background: url(../images/welcome-bg.png) left center no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.welcome .welcome-content {
  width: 100%;
  position: relative;
}
.welcome .welcome-content .welcome-text h1 {
  font-weight: 400;
  font-size: 32px;
  line-height: 48px;
  letter-spacing: 1.3px;
  margin-bottom: 35px;
  color: #063783;
}
.welcome .welcome-content .welcome-text p {
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 0.53px;
  color: #606060;
  margin-bottom: 35px;
}
.welcome .welcome-content .slider-wrapper {
  position: absolute;
  top: 0px;
  padding-left: 70px;
}
.welcome .welcome-content .slider-wrapper .base {
  position: absolute;
  width: 60%;
  height: 230px;
  left: 0px;
  bottom: 0px;
  background: #fff;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.13);
}
.welcome .welcome-content .slider-wrapper .base .prev {
  position: absolute;
  right: 70px;
  bottom: 33px;
  font-size: 40px;
  line-height: 40px;
  cursor: pointer;
  z-index: 999;
}
.welcome .welcome-content .slider-wrapper .base .next {
  position: absolute;
  right: 30px;
  bottom: 33px;
  font-size: 40px;
  line-height: 40px;
  cursor: pointer;
  z-index: 999;
}
.welcome .welcome-content .slider-wrapper .owl-carousel {
  position: relative;
  z-index: 2;
}
.welcome .welcome-content .slider-wrapper .owl-carousel .item .img {
  width: 100%;
  height: auto;
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
}
.welcome .welcome-content .slider-wrapper .owl-carousel .item .text {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3s linear, opacity 0.3s linear;
}
.welcome .welcome-content .slider-wrapper .owl-carousel .item .text h5 {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.53px;
  margin-bottom: 10px;
  color: #063783;
}
.welcome .welcome-content .slider-wrapper .owl-carousel .item .text p {
  font-weight: 400;
  font-size: 14px;
  color: #606060;
  letter-spacing: 0.47px;
  line-height: 26px;
}
.welcome .welcome-content .slider-wrapper .owl-carousel .firstActiveItem .text {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 1400px) {
  .welcome .welcome-content {
    margin-top: 100px;
  }
}
@media (max-width: 1200px) {
  .welcome {
    padding-top: 60px;
    padding-bottom: 100px;
  }
  .welcome .welcome-content .slider-wrapper .base {
    width: 100%;
    left: 15px;
  }
}
@media (max-width: 991px) {
  .welcome .welcome-content .welcome-text {
    text-align: center;
    margin-bottom: 50px;
  }
  .welcome .welcome-content .welcome-text a {
    margin: auto;
  }
}
/* 
---------------------------------------------
global
--------------------------------------------- 
*/
html,
body {
  background: #f5f5f5;
  color: #606060;
  font-family: "Montserrat", sans-serif;
}

::selection {
  background: #063783;
  color: #fff;
}

::-moz-selection {
  background: #063783;
  color: #fff;
}

.section {
  padding-top: 110px;
  padding-bottom: 90px;
}
.section.white {
  background: #fff;
}

.left-heading .section-title {
  font-weight: 400;
  font-size: 28px;
  color: #063783;
  letter-spacing: 1.75px;
  line-height: 42px;
  margin-bottom: 30px;
}

.center-heading {
  text-align: center;
}
.center-heading .section-title {
  font-weight: 400;
  font-size: 28px;
  color: #063783;
  letter-spacing: 1.75px;
  line-height: 38px;
  margin-bottom: 20px;
}

.center-text {
  text-align: center;
  font-weight: 400;
  font-size: 16px;
  color: #606060;
  line-height: 28px;
  letter-spacing: 1px;
  margin-bottom: 60px;
}
.center-text p {
  margin-bottom: 30px;
}

.left-text {
  font-weight: 400;
  font-size: 16px;
  color: #606060;
  line-height: 28px;
  letter-spacing: 1px;
}
.left-text p {
  margin-bottom: 30px;
}
.left-text p.dark {
  color: #063783;
}
.left-text ul li {
  font-weight: 400;
  font-size: 14px;
  color: #606060;
  padding-left: 30px;
  position: relative;
  margin-bottom: 10px;
  -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;
}
.left-text ul li:before {
  font-family: FontAwesome;
  content: "\f178";
  left: 0px;
  position: absolute;
}
.left-text ul li:hover {
  padding-left: 40px;
}

.align-self-center {
  -ms-flex-item-align: center !important;
  align-self: center !important;
}

.align-self-bottom {
  -ms-flex-item-align: flex-end !important;
  align-self: flex-end !important;
}

.dark-btn {
  display: block;
  width: 195px;
  height: 45px;
  position: relative;
  overflow: hidden;
  border: 1px solid #063783;
}
.dark-btn .show-btn {
  position: absolute;
  top: 0px;
  cursor: pointer;
  left: 0px;
  width: 195px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  -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;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.35px;
  color: #063783;
}
.dark-btn .hide-btn {
  position: absolute;
  top: 0px;
  cursor: pointer;
  left: 195px;
  width: 195px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  -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;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.35px;
  color: #fff;
  background: #063783;
}
.dark-btn:hover .show-btn {
  left: -195px;
}
.dark-btn:hover .hide-btn {
  left: 0px;
}

.light-btn {
  display: block;
  width: 195px;
  height: 45px;
  position: relative;
  overflow: hidden;
  border: 1px solid #fff;
}
.light-btn .show-btn {
  position: absolute;
  top: 0px;
  cursor: pointer;
  left: 0px;
  width: 195px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  -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;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.35px;
  color: #fff;
}
.light-btn .hide-btn {
  position: absolute;
  top: 0px;
  cursor: pointer;
  left: 195px;
  width: 195px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  -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;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.35px;
  color: #063783;
  background: #fff;
}
.light-btn:hover .show-btn {
  left: -195px;
}
.light-btn:hover .hide-btn {
  left: 0px;
}

blockquote {
  margin-bottom: 28px;
  padding: 30px;
  padding-top: 40px;
  background: #fff;
  overflow: hidden;
}
blockquote .text {
  position: relative;
  text-align: center;
}
blockquote .text p {
  position: relative;
  width: 100%;
  z-index: 2;
  margin-bottom: 10px !important;
}
blockquote .text:before {
  font-family: FontAwesome;
  content: "\f10d";
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
  font-size: 40px;
  color: #e1ecf4;
}
blockquote .text:after {
  font-family: FontAwesome;
  content: "\f10e";
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 1;
  font-size: 40px;
  color: #e1ecf4;
}
blockquote .author {
  color: #063783;
  text-align: center;
}

.page-gallery {
  height: 185px;
  display: block;
  overflow: hidden;
  margin-bottom: 30px;
}

.margin-bottom-0 {
  margin-bottom: 0px !important;
}

.margin-bottom-10 {
  margin-bottom: 10px !important;
}

.margin-bottom-20 {
  margin-bottom: 20px !important;
}

.margin-bottom-30 {
  margin-bottom: 30px !important;
}

.margin-bottom-40 {
  margin-bottom: 40px !important;
}

.margin-bottom-50 {
  margin-bottom: 50px !important;
}

.margin-bottom-60 {
  margin-bottom: 60px !important;
}

.margin-bottom-90 {
  margin-bottom: 90px !important;
}

.margin-top-10 {
  margin-top: 10px !important;
}

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

.margin-top-30 {
  margin-top: 30px !important;
}

.margin-top-40 {
  margin-top: 40px !important;
}

.margin-top-50 {
  margin-top: 50px !important;
}

.margin-top-60 {
  margin-top: 60px !important;
}

.padding-top-0 {
  padding-top: 0px !important;
}

.padding-top-70 {
  padding-top: 70px !important;
}

.padding-bottom-120 {
  padding-bottom: 120px !important;
}

.padding-bottom-140 {
  padding-bottom: 140px !important;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }

  .mobile-bottom-fix {
    margin-bottom: 30px;
  }

  .page-gallery {
    height: 140px;
  }
}
/* 
---------------------------------------------
parallax
--------------------------------------------- 
*/
.half-parallax .parallax-image {
  height: 200px;
  position: relative;
  overflow: hidden;
}
.half-parallax .parallax-image:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(6, 55, 131);
  z-index: 2;
  opacity: 100;
}
.half-parallax .parallax-items {
  position: relative;
  z-index: 3;
  margin-top: -140px;
}
.half-parallax .parallax-items .parallax-item {
  background: #fff;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.13);
  padding: 55px 40px;
  text-align: center;
  margin-bottom: 30px;
  -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;
}
.half-parallax .parallax-items .parallax-item i {
  font-size: 30px;
  display: block;
  color: #063783;
  margin-bottom: 30px;
}
.half-parallax .parallax-items .parallax-item .feature-title {
  font-weight: 400;
  font-size: 16px;
  color: #063783;
  letter-spacing: 0.7px;
  margin-bottom: 15px;
}
.half-parallax .parallax-items .parallax-item p {
  font-weight: 400;
  font-size: 14px;
  color: #606060;
  letter-spacing: 0.88px;
  line-height: 26px;
  margin-bottom: 20px;
}
.half-parallax .parallax-items .parallax-item .dark-btn {
  margin: auto;
}
.half-parallax .parallax-items .parallax-item:hover {
  margin-top: -10px;
}

.parallax-counter {
  min-height: 337px;
  overflow: hidden;
  position: relative;
}
.parallax-counter:before {
  content: "";
  position: absolute;
  width: 140%;
  height: 140%;
  opacity: 0.8;
  background: #000;
  opacity: 0.5;
  z-index: 2;
  top: -20%;
  left: -20%;
}
.parallax-counter .parallax-content {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: perspective(1px) translateY(-50%);
  width: 100%;
}
.parallax-counter .parallax-content .count-item {
  height: 280px;
  position: relative;
  overflow: hidden;
}
.parallax-counter .parallax-content .count-item:hover strong {
  margin-top: 60px;
}
.parallax-counter .parallax-content .count-item strong {
  display: block;
  text-align: center;
  font-weight: 400;
  font-size: 40px;
  letter-spacing: 1.72px;
  margin-bottom: 10px;
  color: #fff;
  margin-top: 70px;
  -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;
}
.parallax-counter .parallax-content .count-item span {
  display: block;
  text-align: center;
  color: #fff;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.86px;
}

@media (max-width: 991px) {
  .parallax-counter {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .parallax-counter .parallax-content {
    position: relative !important;
    top: 0% !important;
    transform: perspective(1px) translateY(0%) !important;
  }
  .parallax-counter .parallax-content .count-item {
    height: auto;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .parallax-counter .parallax-content .count-item:hover strong {
    margin-top: 0px;
  }
  .parallax-counter .parallax-content .count-item:before {
    display: none;
  }
  .parallax-counter .parallax-content .count-item:after {
    width: 40px;
    height: 1px;
  }
  .parallax-counter .parallax-content .count-item strong {
    margin-top: 0px;
  }
}
/* 
---------------------------------------------
our team
--------------------------------------------- 
*/
.person-item {
  margin-bottom: 45px;
  float: left;
  width: 100%;
}
.person-item .img {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  float: left;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.13);
  -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;
}
.person-item .content {
  position: absolute;
  z-index: 1;
  background: #fff;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.13);
  right: 15px;
  top: 0px;
  width: 80%;
  height: 183px;
  padding-left: 120px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.person-item .content .text {
  width: 100%;
  position: relative;
  min-height: 85px;
}
.person-item .content .text:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 85px;
  right: 0px;
  background: #DDDDDD;
  -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;
}
.person-item .content .text .user-name {
  display: block;
  width: 100%;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.69px;
  color: #063783;
  margin-bottom: 5px;
  margin-top: 3px;
}
.person-item .content .text span {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: #606060;
  letter-spacing: 0.52px;
  margin-bottom: 10px;
}
.person-item .content .text ul {
  overflow-x: hidden;
}
.person-item .content .text ul li {
  float: left;
}
.person-item .content .text ul li a {
  display: inline-block;
  font-size: 14px;
  color: #6F8BA4;
  margin-right: 15px;
}
.person-item.active .content .text:before {
  background: #063783;
}
.person-item:hover .img {
  margin-top: -15px;
}
.person-item:hover .content .text:before {
  background: #063783;
}

/* 
---------------------------------------------
blog
--------------------------------------------- 
*/
.blog-post-grid {
  display: block;
  width: 100%;
  height: 284px;
  overflow: hidden;
  position: relative;
  margin-bottom: 30px;
}
.blog-post-grid:hover h3 {
  padding-bottom: 27px;
}
.blog-post-grid:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.63) 100%);
  z-index: 1;
}
.blog-post-grid h3 {
  position: absolute;
  width: 100%;
  bottom: 0px;
  z-index: 2;
  padding: 20px 25px;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  line-height: 28px;
  letter-spacing: 1px;
  -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;
}
.blog-post-grid .date {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  overflow: hidden;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  letter-spacing: 0.75px;
}
.blog-post-grid .date:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.27;
  background-image: linear-gradient(-130deg, #000000 0%, #4C4D51 100%);
  z-index: -1;
  left: 0px;
}

.blog-post-single {
  display: block;
  width: 100%;
  height: 422px;
  overflow: hidden;
  position: relative;
  margin-bottom: 30px;
}
.blog-post-single:hover h3 {
  padding-bottom: 27px;
}
.blog-post-single:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.63) 100%);
  z-index: 1;
}
.blog-post-single .date {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  overflow: hidden;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  letter-spacing: 0.75px;
}
.blog-post-single .date:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.27;
  background-image: linear-gradient(-130deg, #000000 0%, #4C4D51 100%);
  z-index: -1;
  left: 0px;
}

.post-content {
  margin-bottom: 60px;
}
.post-content h3 {
  margin-bottom: 20px !important;
}
.post-content h3 a {
  font-weight: 400;
  font-size: 16px;
  color: #063783;
  letter-spacing: 1px;
  line-height: 26px;
  -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;
}
.post-content h3 a:hover {
  color: #063783;
}
.post-content .post-meta {
  overflow: hidden;
  margin-bottom: 20px;
}
.post-content .post-meta li {
  float: left;
  margin-right: 30px;
  height: 30px;
  line-height: 30px;
  color: #063783;
  font-size: 14px;
}
.post-content .post-meta li a {
  color: #063783;
}
.post-content .post-meta li span {
  display: inline-block;
  margin-right: 5px;
}
.post-content .text {
  font-weight: 400;
  font-size: 14px;
  color: #606060;
  letter-spacing: 0.88px;
  line-height: 26px;
  margin-bottom: 15px;
}
.post-content .text p {
  font-size: 14px !important;
  margin-bottom: 30px !important;
}
.post-content .post-footer {
  overflow: hidden;
  border-bottom: 1px solid #D8D8D8;
  border-top: 1px solid #D8D8D8;
  padding-top: 10px;
  padding-bottom: 10px;
}
.post-content .post-footer span {
  float: left;
  height: 30px;
  line-height: 30px;
  font-weight: 300;
  font-size: 14px;
  color: #606060;
}
.post-content .post-footer ul.share {
  float: right;
}
.post-content .post-footer ul.share li {
  float: left;
  margin-left: 15px;
}
.post-content .post-footer ul.share li a {
  display: block;
  height: 30px;
  line-height: 30px;
  color: #063783;
}
.post-content .dark-btn {
  box-shadow: none;
  margin: auto;
  padding-left: 30px;
  margin-top: 30px;
}

.section-comments {
  margin-bottom: 60px;
  background: #fff;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
  padding: 30px;
  padding-bottom: 0px;
}
.section-comments ul {
  overflow: hidden;
  margin: 0px;
  padding: 0px;
}
.section-comments ul li {
  overflow: hidden;
}
.section-comments ul li .avatar {
  width: 70px;
  height: 70px;
  overflow: hidden;
  float: left;
  margin-right: 20px;
}
.section-comments ul li .comment-content {
  font-weight: 400;
  font-size: 14px;
  color: #606060;
  float: left;
  width: calc(100% - 90px);
  width: -webkit-calc(100% - 90px);
}
.section-comments ul li .comment-content .comment-by {
  margin-bottom: 10px;
  position: relative;
}
.section-comments ul li .comment-content .comment-by strong {
  display: block;
  color: #063783;
}
.section-comments ul li .comment-content .comment-by span {
  font-size: 12px;
}
.section-comments ul li .comment-content .comment-by .btn-reply {
  position: absolute;
  right: 0px;
  top: 15px;
  background: #F4F8FB;
  color: #606060;
  height: 25px;
  line-height: 25px;
  padding-left: 10px;
  padding-right: 10px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  -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;
}
.section-comments ul li .comment-content .comment-by .btn-reply i {
  font-size: 12px;
}
.section-comments ul li .comment-content .comment-by .btn-reply:hover {
  background: #063783;
  color: #fff;
}
.section-comments ul li ul {
  padding-left: 30px;
}

.post-comment {
  background: #fff;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
  padding: 30px;
  padding-bottom: 0px;
  margin-bottom: 30px;
}
.post-comment .comment-form .form-item {
  margin-bottom: 20px;
}
.post-comment .comment-form .form-item label {
  display: block;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 0px;
}
.post-comment .comment-form .form-item input, .post-comment .comment-form .form-item textarea {
  border: 1px solid #eee;
  width: 100%;
  height: 50px;
  outline: none;
  padding-left: 20px;
  padding-right: 20px;
  -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;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.post-comment .comment-form .form-item input:focus, .post-comment .comment-form .form-item textarea:focus {
  border: 1px solid #ddd;
}
.post-comment .comment-form .form-item textarea {
  height: 150px;
  resize: none;
  padding: 20px;
}
.post-comment .comment-form .dark-btn {
  margin-bottom: 30px;
}

/* 
---------------------------------------------
footer
--------------------------------------------- 
*/
footer {
  background: #063783;
  padding-top: 70px;
}
footer img.logo {
  margin-bottom: 30px;
}
footer .text {
  font-weight: 400;
  font-size: 14px;
  color: #D8D8D8;
  line-height: 30px;
  letter-spacing: 0.88px;
}
footer h5 {
  font-weight: 400;
  font-size: 16px;
  color: #fff;
  letter-spacing: 0.69px;
  line-height: 30px;
  margin-bottom: 30px !important;
}
footer .social {
  overflow: hidden;
  margin-top: 10px;
}
footer .social li {
  float: left;
  font-size: 16px;
  margin-right: 10px;
}
footer .social li a {
  color: #fff;
}
footer .footer-nav li a {
  display: block;
  overflow: hidden;
}
footer .footer-nav li a:hover span {
  padding-left: 5px;
}
footer .footer-nav li a i {
  float: left;
  height: 32px;
  line-height: 32px;
  margin-right: 12px;
  font-size: 14px;
  color: #fff;
}
footer .footer-nav li a span {
  float: left;
  height: 32px;
  line-height: 32px;
  font-weight: 400;
  font-size: 14px;
  color: #D8D8D8;
  -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;
}
footer .address p {
  display: block;
  overflow: hidden;
  font-weight: 400;
  font-size: 14px;
  color: #fff;
  line-height: 26px;
  letter-spacing: 0.88px;
  margin-bottom: 5px;
}
footer .address p a {
  color: #D8D8D8;
}
footer .copyright {
  text-align: center;
  border-top: 1px solid #343641;
  margin-top: 30px;
  padding-top: 30px;
  padding-bottom: 30px;
  font-weight: 400;
  font-size: 14px;
  color: #D8D8D8;
  letter-spacing: 0.88px;
}

@media (max-width: 991px) {
  footer .social {
    margin-bottom: 30px;
  }
  footer .text {
    margin-bottom: 30px;
  }
  footer h5 {
    margin-bottom: 15px;
  }
  footer .footer-nav {
    margin-bottom: 30px;
  }
}
/* 
---------------------------------------------
pages
--------------------------------------------- 
*/
.page .cover {
  margin-top: 100px;
  min-height: 400px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page .cover:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  background: #000;
  z-index: 2;
  opacity: 0.6;
}
.page .cover .cover-top {
  position: relative;
  width: 100%;
  z-index: 3;
  text-align: center;
  transform: perspective(1px) translateY(0%);
  overflow: hidden;
}
.page .cover .cover-top h1 {
  font-weight: 400;
  font-size: 28px;
  line-height: 42px;
  letter-spacing: 1.4px;
  color: #fff;
  text-align: center;
  margin-bottom: 60px;
}
.page .cover .cover-top .breadcrumb {
  position: relative;
  z-index: 9;
  float: none;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  background: none;
  padding: 0px;
  padding-left: 15px;
  padding-right: 15px;
  text-align: center;
  display: inline-block;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.13);
  margin: 0px;
  border: 1px solid #fff;
}
.page .cover .cover-top .breadcrumb li {
  font-weight: 400;
  font-size: 14px;
  color: #D8D8D8;
  line-height: 30px;
  margin-left: 10px;
  display: inline-block;
}
.page .cover .cover-top .breadcrumb li:after {
  font-family: FontAwesome;
  content: "\f105";
  margin-left: 10px;
  color: #fff;
}
.page .cover .cover-top .breadcrumb li:first-child {
  margin-left: 0px;
}
.page .cover .cover-top .breadcrumb li:last-child:after {
  content: "";
  margin-left: 0px;
}
.page .cover .cover-top .breadcrumb li a {
  font-weight: 400;
  font-size: 14px;
  color: #fff;
}
.page .page-bottom {
  padding-top: 120px;
  padding-bottom: 90px;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.88px;
  line-height: 28px;
  color: #606060;
}
.page .page-bottom p {
  margin-bottom: 45px;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 1px;
}
.page .page-bottom .project-grid .project-grid-item {
  -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;
  display: block;
  margin-bottom: 30px;
}
.page .page-bottom .project-grid .project-grid-item .img {
  width: 100%;
  height: 228px;
  position: relative;
  overflow: hidden;
}
.page .page-bottom .project-grid .project-grid-item .text {
  background: #fff;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
  width: 90%;
  margin: auto;
  position: relative;
  z-index: 2;
  margin-top: -30px;
  -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;
  text-align: center;
  padding: 30px 25px;
}
.page .page-bottom .project-grid .project-grid-item .text h3 {
  font-weight: 400;
  font-size: 16px;
  color: #063783;
  letter-spacing: 0.7px;
  margin-bottom: 10px;
}
.page .page-bottom .project-grid .project-grid-item .text p {
  margin-bottom: 0px;
  font-weight: 400;
  font-size: 14px;
  color: #606060;
  letter-spacing: 0.88px;
  line-height: 26px;
}
.page .page-bottom .project-grid .project-grid-item:hover {
  padding-bottom: 10px;
}
.page .page-bottom .project-grid .project-grid-item:hover .text {
  margin-top: -40px;
}
.page .page-bottom .project-list .project-list-item {
  -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;
  display: block;
  margin-bottom: 30px;
  position: relative;
  display: flex;
  align-items: center;
}
.page .page-bottom .project-list .project-list-item .img {
  width: 45%;
  height: 228px;
  float: left;
  position: relative;
  overflow: hidden;
}
.page .page-bottom .project-list .project-list-item .text {
  background: #fff;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
  width: 70%;
  right: 0px;
  position: absolute;
  z-index: 2;
  text-align: left;
  padding: 30px;
  -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;
}
.page .page-bottom .project-list .project-list-item .text h3 {
  font-weight: 400;
  font-size: 16px;
  color: #063783;
  letter-spacing: 0.7px;
  margin-bottom: 10px;
}
.page .page-bottom .project-list .project-list-item .text p {
  margin-bottom: 0px;
  font-weight: 400;
  font-size: 14px;
  color: #606060;
  letter-spacing: 0.88px;
  line-height: 26px;
}
.page .page-bottom .project-list .project-list-item:hover .text {
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.2);
}
.page .page-bottom .page-single .page-single-img {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page .page-bottom .page-single .page-single-img .play {
  display: block;
  width: 80px;
  height: 80px;
  position: absolute;
  z-index: 2;
  text-align: center;
  transition: all 0.3s ease-in-out;
}
.page .page-bottom .page-single .page-single-img .play:hover {
  transform: scale(1.1);
}
.page .page-bottom .page-single .page-single-img .play:before {
  content: "";
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  background: #fff;
  width: 80px;
  height: 80px;
  z-index: 2;
  opacity: 0.39;
}
.page .page-bottom .page-single .page-single-img .play:after {
  content: "";
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  position: absolute;
  left: 10px;
  top: 10px;
  background: #fff;
  width: 60px;
  height: 60px;
  z-index: 2;
}
.page .page-bottom .page-single .page-single-img .play i {
  position: absolute;
  z-index: 3;
  width: 80px;
  left: 0px;
  padding-left: 7px;
  line-height: 80px;
  font-size: 20px;
  color: #063783;
}
.page .page-bottom .page-single .page-single-text .title {
  font-weight: 600;
  font-size: 16px;
  color: #063783;
  letter-spacing: 1px;
  margin-bottom: 20px;
}
.page .page-bottom .page-single .page-single-text .sub-title {
  font-weight: 400;
  font-size: 18px;
  color: #063783;
  letter-spacing: 1px;
  margin-bottom: 30px;
}
.page .page-bottom .page-single .page-single-text p {
  font-weight: 400;
  font-size: 16px;
  color: #606060;
  letter-spacing: 1px;
  line-height: 28px;
  margin-bottom: 30px;
}
.page .page-bottom .page-single .page-single-text .info-list {
  background: #fff;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
  padding: 15px 20px;
  margin-bottom: 40px;
}
.page .page-bottom .page-single .page-single-text .info-list strong {
  display: inline-block;
  font-weight: 400;
  font-size: 16px;
  color: #063783;
  letter-spacing: 1px;
}
.page .page-bottom .page-single .page-single-text .info-list span {
  display: inline-block;
  font-weight: 400;
  font-size: 16px;
  color: #606060;
  letter-spacing: 1px;
}
.page .page-bottom .page-single .page-single-text .count strong {
  display: block;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 1.29px;
  color: #063783;
  margin-bottom: 10px;
  text-align: center;
}
.page .page-bottom .page-single .page-single-text .count span {
  display: block;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.69px;
  color: #606060;
  text-align: center;
}
.page .page-bottom .page-single .page-single-text .skill-wrapper .skill-item {
  margin-bottom: 20px;
}
.page .page-bottom .page-single .page-single-text .skill-wrapper .skill-item strong {
  font-weight: 400;
  font-size: 14px;
  color: #063783;
  letter-spacing: 0.88px;
  display: block;
  margin-bottom: 5px;
}
.page .page-bottom .page-single .page-single-text .skill-wrapper .skill-item .skill-progress {
  width: 100%;
  position: relative;
  height: 10px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background: #E2E2E2;
}
.page .page-bottom .page-single .page-single-text .skill-wrapper .skill-item .skill-progress .line {
  position: absolute;
  height: 10px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background: #063783;
  width: 0%;
  -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;
}

.project-grid .project-grid-item {
  -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;
  display: block;
  margin-bottom: 30px;
}
.project-grid .project-grid-item .img {
  width: 100%;
  height: 228px;
  position: relative;
  overflow: hidden;
}
.project-grid .project-grid-item .text {
  background: #fff;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
  width: 90%;
  margin: auto;
  position: relative;
  z-index: 2;
  margin-top: -30px;
  -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;
  text-align: center;
  padding: 30px 25px;
}
.project-grid .project-grid-item .text h3 {
  font-weight: 400;
  font-size: 16px;
  color: #063783;
  letter-spacing: 0.7px;
  margin-bottom: 10px;
}
.project-grid .project-grid-item .text p {
  margin-bottom: 0px;
  font-weight: 400;
  font-size: 14px;
  color: #606060;
  letter-spacing: 0.88px;
  line-height: 26px;
}
.project-grid .project-grid-item:hover {
  padding-bottom: 10px;
}
.project-grid .project-grid-item:hover .text {
  margin-top: -40px;
}

.pagination {
  margin-bottom: 30px;
}
.pagination li a {
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 24px;
  font-weight: 400;
  font-size: 14px;
  color: #063783;
  -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;
}
.pagination li a:hover, .pagination li a.active {
  background: #063783;
  color: #fff;
}

@media (max-width: 991px) {
  .page .cover {
    margin-top: 80px;
  }
  .page .page-bottom .page-single .page-single-img {
    margin-bottom: 30px;
  }
  .page .page-bottom .page-single .page-single-text .count span {
    margin-bottom: 30px;
  }
}
/* 
---------------------------------------------
faq
--------------------------------------------- 
*/
.faq-wrapper .faq-header {
  padding-bottom: 60px;
  margin-bottom: 60px;
  border-bottom: 1px solid #E9E9E9;
}
.faq-wrapper .faq-header h2 {
  font-weight: 400;
  font-size: 30px;
  color: #063783;
  letter-spacing: 1.88px;
  margin-bottom: 20px;
}
.faq-wrapper .faq-header p {
  font-weight: 400;
  font-size: 14px;
  line-height: 28px;
  letter-spacing: 0.88px;
}
.faq-wrapper .faq-header .search {
  height: 50px;
  position: relative;
}
.faq-wrapper .faq-header .search input {
  position: absolute;
  width: 100%;
  height: 50px;
  left: 0px;
  border: none;
  background: #fff;
  outline: none;
  top: 5px;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
  padding-left: 20px;
  -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;
  font-weight: 400;
  font-size: 14px;
  color: #606060;
  letter-spacing: 0.88px;
  z-index: 1;
}
.faq-wrapper .faq-header .search input:focus {
  padding-left: 30px;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.13);
}
.faq-wrapper .faq-header .search input::-webkit-input-placeholder {
  font-weight: 400;
  font-size: 14px;
  color: #606060;
  letter-spacing: 0.88px;
}
.faq-wrapper .faq-header .search input:-moz-placeholder {
  font-weight: 400;
  font-size: 14px;
  color: #606060;
  letter-spacing: 0.88px;
}
.faq-wrapper .faq-header .search button {
  width: 40px;
  height: 40px;
  position: absolute;
  z-index: 2;
  right: 5px;
  top: 10px;
  border: none;
  background: #063783;
  color: #fff;
  outline: none;
  cursor: pointer;
}

.accordion .accordion-item {
  border: none;
  background: none;
  background: #FFFFFF;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
  margin-bottom: 20px;
  border-radius: 0px;
}
.accordion .accordion-item .accordion-header {
  padding: 0px;
  border: none;
  background: none;
  -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;
  border-radius: 0px;
}
.accordion .accordion-item .accordion-header:hover {
  background: #063783;
}
.accordion .accordion-item .accordion-header:hover .accordion-button {
  padding-left: 30px;
}
.accordion .accordion-item .accordion-header .accordion-button {
  width: 100%;
  text-align: left;
  padding: 0px;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 1px;
  color: #063783;
  text-decoration: none !important;
  -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;
  cursor: pointer;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 30px;
  box-shadow: none !important;
}
.accordion .accordion-item .accordion-header .accordion-button .num {
  float: left;
  width: 24px;
  height: 24px;
  line-height: 24px;
  color: #fff;
  background: #063783;
  text-align: center;
  font-size: 12px;
  margin-right: 20px;
  margin-top: -3px;
}
.accordion .accordion-item .accordion-body {
  padding: 30px;
  padding-bottom: 16px;
  padding-top: 0px;
  font-weight: 400;
  font-size: 16px;
  color: #606060;
  line-height: 28px;
  letter-spacing: 1px;
}
.accordion .accordion-item .accordion-body .content {
  border-top: 1px solid #E4EFF9;
  padding-top: 30px;
}
.accordion .accordion-item .accordion-body p {
  margin-bottom: 14px;
  font-size: 14px !important;
  line-height: 28px !important;
  letter-spacing: 0.88px !important;
}

@media (max-width: 991px) {
  .accordion {
    margin-bottom: 30px;
  }
  .accordion .accordion-item .accordion-header .accordion-button {
    line-height: 26px;
    margin-top: 10px;
  }
}
/* 
---------------------------------------------
aside
--------------------------------------------- 
*/
aside.default-aside {
  -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;
}
aside.default-aside .sidebar ul {
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  margin-bottom: 30px;
}
aside.default-aside .sidebar ul li.active a {
  background: #063783;
  color: #fff;
}
aside.default-aside .sidebar ul li.active a:after {
  color: #fff;
}
aside.default-aside .sidebar ul li.active a:hover {
  padding-left: 60px;
}
aside.default-aside .sidebar ul li:last-child a {
  border: none;
}
aside.default-aside .sidebar ul li a {
  display: block;
  border-bottom: 1px solid #f5f5f5;
  height: 50px;
  line-height: 50px;
  padding-left: 50px;
  position: relative;
  font-weight: 400;
  font-size: 14px;
  color: #606060;
  letter-spacing: 0.88px;
  -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;
}
aside.default-aside .sidebar ul li a:hover {
  padding-left: 60px;
}
aside.default-aside .sidebar ul li a:after {
  font-family: FontAwesome;
  content: "\f105";
  position: absolute;
  left: 30px;
  color: #063783;
}
aside.default-aside .sidebar ul li a span {
  float: right;
  margin-right: 30px;
  display: inline-block;
  background: #F6F4FD;
  height: 20px;
  line-height: 20px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 10px;
  color: #606060;
  margin-top: 18px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
}
aside.default-aside .sidebar .box {
  text-align: center;
  height: 230px;
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
aside.default-aside .sidebar .box:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #063783;
  z-index: 2;
  left: 0px;
  top: 0px;
  opacity: 0.7;
}
aside.default-aside .sidebar .box .hovered {
  position: relative;
  z-index: 3;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 30px;
}
aside.default-aside .sidebar .box .hovered p {
  color: #fff;
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 1.12px;
  margin-bottom: 30px;
}
aside.default-aside .sidebar .box .hovered a {
  margin: auto;
  padding-left: 30px;
}

/* 
---------------------------------------------
contact
--------------------------------------------- 
*/
.contact {
  position: relative;
  margin-top: -90px;
  margin-bottom: 50px;
}
.contact .contact-item {
  background: #fff;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
  margin-bottom: 30px;
  text-align: center;
  padding: 20px;
  padding-top: 30px;
  position: relative;
  font-weight: 400;
  font-size: 14px;
  color: #606060;
}
.contact .contact-item .icon {
  width: 46px;
  height: 46px;
  left: 0px;
  right: 0px;
  margin: auto;
  background: #F5F5F5;
  color: #063783;
  margin-bottom: 20px;
}
.contact .contact-item .icon i {
  display: block;
  width: 46px;
  height: 46px;
  line-height: 46px;
}
.contact .contact-item p {
  margin-bottom: 0px !important;
  font-size: 14px;
}
.contact .contact-item a {
  display: block;
  color: #606060;
}
.contact .map-wrapper {
  position: relative;
  width: 100%;
  height: 500px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
  z-index: 1;
}
.contact .map-wrapper .map-canvas {
  width: 100%;
  height: 100%;
}

.map {
  overflow: hidden;
  padding: 0px;
}
.map .top {
  margin-bottom: -70px;
}
.map .bottom {
  float: left;
  margin-top: -60px;
}
.map .item {
  width: 100%;
  height: 400px;
  float: left;
  position: relative;
}
.map .item .map-canvas {
  position: absolute;
  width: 100%;
  height: 100%;
}
.map .content {
  position: absolute;
  width: 60%;
  left: 0px;
  right: 0px;
  margin: auto;
  z-index: 3;
  text-align: center;
  top: 30%;
  transform: perspective(1px) translateY(0%);
}
.map .content h6 {
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 1px;
  color: #fff;
  margin-bottom: 20px;
}
.map .content p {
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 30px !important;
  letter-spacing: 1.12px !important;
  color: #fff;
  margin-bottom: 30px !important;
}
.map .content .btn-primary-line {
  margin-bottom: 0px;
  height: 36px;
  line-height: 36px;
  text-transform: capitalize;
}

.contact-bottom {
  margin-top: 20px;
  margin-bottom: 30px;
}
.contact-bottom .contact-text {
  font-weight: 400;
  font-size: 14px;
  color: #606060;
  letter-spacing: 0.6px;
  line-height: 26px;
}
.contact-bottom .contact-text p {
  margin-bottom: 28px;
  font-size: 14px !important;
  letter-spacing: 0.7px;
}
.contact-bottom .contact-form input, .contact-bottom .contact-form textarea {
  border: 1px solid #eee;
  width: 100%;
  height: 50px;
  outline: none;
  padding-left: 20px;
  padding-right: 20px;
  -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;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-bottom: 30px;
  color: #9BADBD;
  font-size: 14px;
}
.contact-bottom .contact-form input:focus, .contact-bottom .contact-form textarea:focus {
  border: 1px solid #063783;
  padding-left: 30px;
}
.contact-bottom .contact-form textarea {
  height: 150px;
  resize: none;
  padding: 20px;
}
.contact-bottom .contact-form .dark-btn .show-btn {
  background: #f5f5f5;
}

@media (max-width: 991px) {
  .contact {
    overflow: initial !important;
    margin-bottom: 10px !important;
  }
  .contact .map-wrapper {
    width: 100% !important;
    height: 300px;
    margin-bottom: 30px;
  }
  .contact .contact-info {
    position: relative !important;
    width: 100% !important;
    margin-top: 10px !important;
    margin-left: 0px !important;
    transform: perspective(1px) translateY(0%) !important;
    box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
  }

  .contact-bottom {
    margin-top: 30px;
    padding-top: 30px;
  }
}
/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/
.preloader-wrapper {
  overflow: hidden;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  z-index: 9999;
  color: #fff;
  background: #f5f5f5;
}
.preloader-wrapper .loader {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  position: absolute;
  margin: auto;
  background: #063783;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  animation: loader 3s ease;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

@keyframes loader {
  33% {
    transform: rotate(45deg);
    border-radius: 10px;
  }
  66% {
    transform: rotate(90deg);
    border-radius: 0;
  }
  100% {
    transform: rotate(135deg);
    border-radius: 50%;
  }
}
/* ===== Client Logos: centered, same-size rectangular tiles ===== */

/* center the whole grid block */
.logo-grid-wrap{
  display: flex;
  justify-content: center;   /* centers grid within container */
}

/* 5 columns x 2 rows, consistent tile size */
.logo-grid{
  display: grid;
  grid-template-columns: repeat(5, 240px);   /* tile width */
  grid-template-rows:    repeat(2, 140px);   /* tile height */
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0 auto;                            /* keep centered */
}

/* identical tile boxes (focus on rectangle) */
.logo-tile{
  width: 240px;
  height: 140px;
  box-sizing: border-box;
  border-radius: 8px;
  /* optional subtle frame so all tiles align visually */
  border: 1px solid rgba(0,0,0,0.06);
  background: transparent;

  /* center each logo and give inner margin so nothing gets cut */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;                        /* EXTRA INNER MARGINS */
}

/* normalize mixed PNG/JPG logos */
.logo-tile img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;                        /* no stretching */
  display: block;

  /* optional: unify look while you adjust square logos later */
  filter: grayscale(100%);
  opacity: 0.9;
  transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}
.logo-tile img:hover{
  filter: none;
  opacity: 1;
  transform: translateY(-2px);
}

/* ===== Responsive (keeps same tile size, stays centered) ===== */
@media (max-width: 1199.98px){
  .logo-grid{ grid-template-columns: repeat(4, 240px); }
}
@media (max-width: 991.98px){
  .logo-grid{ grid-template-columns: repeat(3, 240px); }
}
@media (max-width: 767.98px){
  .logo-grid{ grid-template-columns: repeat(2, 240px); }
}


/* ===== Our Process (Animated Timeline) ===== */
.process-timeline{
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
  margin-top: 10px;
}

.process-step{
  text-align: center;
  padding: 18px 14px 10px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  position: relative;
}

.process-step h5{
  font-weight: 600;
  margin: 12px 0 8px;
  letter-spacing: .3px;
}

.process-step p{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  opacity: .9;
}

/* Icon chip */
.process-icon{
  width: 58px;
  height: 58px;
  border-radius: 50%;
  margin: 0 auto;
  display: grid;
  place-items: center;
  background: #EFF3F7;       /* soft chip */
  color: #5B6F91;            /* PCM accent from logo */
  font-size: 22px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

/* Subtle connecting line across cards */
.process-line{
  position: absolute;
  left: 0; right: 0;
  top: 58px;                 /* aligns through icon centers */
  height: 2px;
  background: linear-gradient(90deg, rgba(91,111,145,.15), rgba(91,111,145,.35), rgba(91,111,145,.15));
  z-index: 0;
}
.process-step { z-index: 1; } /* raise steps over line */

/* Hover micro-interaction */
.process-step:hover .process-icon{
  transform: translateY(-2px);
  transition: transform .2s ease;
}

/* ===== Responsive ===== */
@media (max-width: 1199.98px){
  .process-timeline{ grid-template-columns: repeat(3, 1fr); }
  .process-line{ display: none; } /* hide line when grid wraps */
}
@media (max-width: 767.98px){
  .process-timeline{ grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 479.98px){
  .process-timeline{ grid-template-columns: 1fr; }
}

/* ===== Sustainability & Responsibility (Mobile Optimized) ===== */
.sr-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  padding: 20px 16px;
  text-align: center;
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
  margin-bottom: 20px;
}
.sr-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}
.sr-card h5{
  margin: 10px 0 6px;
  font-weight: 600;
  font-size: 16px;
}
.sr-card p{
  margin: 0;
  opacity: .9;
  line-height: 1.5;
  font-size: 14px;
}
.sr-icon{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
  background: #EFF3F7;
  color: #063783;
  font-size: 20px;
}

/* Metrics */
.sr-metrics{
  margin-top: 24px;
}
.sr-metric{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 18px;
}
.sr-metric-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.sr-metric-head span{
  font-size: 14px;
  opacity: .85;
}
.sr-metric-head strong{
  font-weight: 700;
  font-size: 15px;
  color: #1A1F24;
}
.sr-bar{
  height: 7px;
  background: #E7ECF2;
  border-radius: 999px;
  overflow: hidden;
}
.sr-bar > span{
  display: block;
  height: 100%;
  width: 0; /* animated via inline style */
  background: linear-gradient(90deg, #063783, #6f84a9);
  border-radius: 999px;
  transition: width 1.2s ease;
}

/* Note */
.sr-note{
  margin-top: 12px;
  text-align: center;
  font-size: 12.5px;
  opacity: .7;
}

/* ===== Responsive ===== */
@media (max-width: 991.98px){
  .sr-card{text-align: center;}
}
@media (max-width: 767.98px){
  .sr-card{ padding: 18px; }
  .sr-metric-head{ flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* Simple fade animations */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s forwards;
}

.fade-in-right {
  opacity: 0;
  transform: translateX(30px);
  animation: fadeRight 1s forwards;
}

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

@keyframes fadeRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Delay support */
[style*="animation-delay"] {
  animation-fill-mode: forwards;
}

/* Team section hover subtle */
.person-item:hover .img img {
  transform: scale(1.05);
  transition: 0.5s ease;
}


/* ===== ABOUT: Legacy (scoped, responsive) ===== */
.aboutx-legacy .aboutx-lead{
  font-weight:600; line-height:1.45; opacity:.96; margin-bottom:10px;
}
.aboutx-legacy .aboutx-body{
  line-height:1.6; opacity:.9; margin-bottom:14px;
}

/* Chips */
.aboutx-chips{
  display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 6px;
}
.aboutx-chips .chip{
  display:inline-flex; align-items:center; gap:8px;
  background:#EFF3F7; color:#1A1F24;
  border:1px solid rgba(0,0,0,.06);
  border-radius:999px; padding:7px 12px; font-size:13px; white-space:nowrap;
}
.aboutx-chips .chip i{ color:#5B6F91; }

/* Bullets */
.aboutx-bullets{ list-style:none; padding-left:0; margin:12px 0 0; }
.aboutx-bullets li{ display:flex; gap:8px; margin:6px 0; line-height:1.5; }
.aboutx-bullets i{ color:#5B6F91; position:relative; top:2px; }

/* Thumbs */
.aboutx-thumb{
  border-radius:10px;
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

/* Right image wrapper */
.aboutx-hero-wrap{
  position:relative;
  border-radius:14px;
  overflow:hidden;                 /* keeps rounded corners on image */
  box-shadow:0 12px 26px rgba(0,0,0,.08);
}
.aboutx-hero{
  display:block; width:100%; height:auto;
  transform:translateZ(0);
  transition:transform .25s ease;
}
.aboutx-hero-wrap:hover .aboutx-hero{ transform:translateY(-2px); }

/* Floating tag */
.aboutx-tag{
  position:absolute; right:12px; bottom:12px;
  background:#1A1F24; color:#fff; border-radius:999px;
  font-size:12px; padding:6px 10px; opacity:.92;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}

/* Spacing & alignment fixes across screens */
@media (max-width: 991.98px){
  .aboutx-legacy .left-heading, 
  .aboutx-legacy .section-title,
  .aboutx-legacy .aboutx-lead,
  .aboutx-legacy .aboutx-body { text-align:left; }
  .aboutx-hero-wrap{ margin-top:6px; }
}
@media (max-width: 575.98px){
  .aboutx-chips{ gap:6px; }
  .aboutx-chips .chip{ font-size:12px; padding:6px 10px; }
  .aboutx-tag{ font-size:11px; padding:5px 9px; right:10px; bottom:10px; }
}



/* ===== ABOUT: Strengths (3 Tiles) ===== */
.aboutx-strengths .aboutx-sub{
  opacity:.9; margin:0 auto 6px; max-width:620px;
}

.aboutx-tile{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:20px 18px;
  height:100%;
  text-align:left;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
}
.aboutx-tile:hover{
  transform: translateY(-3px);
  box-shadow:0 14px 26px rgba(0,0,0,.08);
  border-color: rgba(0, 68, 185, 0.864); /* #5B6F91 accent */
}

.aboutx-icon{
  width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center;
  background:#EFF3F7; color:#003ca5; font-size:22px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  margin-bottom:10px;
}
.aboutx-tile h5{
  margin:8px 0 6px; font-weight:600;
}
.aboutx-tile p{
  margin:0 0 10px; opacity:.92; line-height:1.55; font-size:14.5px;
}

.aboutx-tile .mini-points{
  list-style:none; padding-left:0; margin:0;
}
.aboutx-tile .mini-points li{
  position:relative; padding-left:16px; margin:4px 0; font-size:13.5px; opacity:.9;
}
.aboutx-tile .mini-points li::before{
  content:""; position:absolute; left:0; top:8px;
  width:6px; height:6px; border-radius:50%;
  background:#003fab;
}

/* Responsive polish */
@media (max-width: 991.98px){
  .aboutx-icon{ width:56px; height:56px; font-size:20px; }
}
@media (max-width: 575.98px){
  .aboutx-tile{ padding:18px 16px; }
}




/* ===== ABOUT: Milestones Timeline ===== */
.aboutx-milestones .aboutx-sub{
  opacity:.9; margin:0 auto; max-width:640px;
}

/* layout */
.aboutx-timeline{
  position: relative;
  display: flex;
  gap: 22px;
  justify-content: space-between;
  align-items: flex-start;
  padding: 22px 18px;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
  overflow: hidden;
}

/* central connector line (desktop) */
.aboutx-timeline::before{
  content:"";
  position:absolute;
  left: 48px; right: 48px;
  top: 46px; height: 2px;
  background: linear-gradient(90deg, rgba(91,111,145,.18), rgba(91,111,145,.36), rgba(91,111,145,.18));
  pointer-events: none;
}

.aboutx-node{
  flex: 1 1 160px;
  min-width: 160px;
  max-width: 240px;
  text-align: center;
  padding-top: 6px;
}

/* year badge */
.aboutx-year{
  display: inline-grid;
  place-items: center;
  width: 64px; height: 64px;
  margin: 0 auto 10px;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(ellipse at 30% 30%, #6f84a9, #5B6F91);
  box-shadow: 0 6px 14px rgba(91,111,145,.25);
  font-weight: 700;
  letter-spacing: .3px;
}

/* dot to sit on the connector */
.aboutx-year::after{
  content:"";
  position:absolute;
  width:10px; height:10px; border-radius:50%;
  background:#5B6F91;
  margin-top: 76px;         /* pushes dot below the badge */
  box-shadow: 0 0 0 4px rgba(91,111,145,.12);
}

.aboutx-node p{
  margin: 6px auto 0;
  max-width: 240px;
  font-size: 14.5px;
  line-height: 1.55;
  opacity: .9;
}

/* Responsive */
@media (max-width: 991.98px){
  .aboutx-timeline{
    flex-wrap: wrap;
    row-gap: 18px;
    column-gap: 16px;
    justify-content: center;
  }
  .aboutx-timeline::before{ display:none; }
  .aboutx-node{
    max-width: 280px;
    padding-top: 0;
  }
  .aboutx-year::after{ display:none; }
}
@media (max-width: 575.98px){
  .aboutx-year{ width:56px; height:56px; }
  .aboutx-node p{ font-size:14px; }
}



/* ===== ABOUT: Ethos Band ===== */
.aboutx-ethos{
  background:#1A1F24;
  color:#fff;
  padding:18px 0;
  position: relative;
  overflow: hidden;
}
.aboutx-ethos::before{
  /* soft gradient sheen */
  content:"";
  position:absolute; inset:-20%;
  background: radial-gradient(60% 60% at 80% 20%, rgba(91,111,145,0.18), transparent 60%),
              radial-gradient(40% 40% at 10% 80%, rgba(139,160,191,0.15), transparent 60%);
  pointer-events:none;
}

.aboutx-ethos-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:24px;
  list-style:none;
  margin:0;
  padding:0;
}

.aboutx-ethos-list li{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border-radius:999px;
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  transform: translateZ(0);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.aboutx-ethos-list li:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
}

.aboutx-ethos-list i{
  color:#8BA0BF;
  font-size:16px;
  opacity:.95;
}
.aboutx-ethos-list span{
  font-size:14px;
  font-weight:600;
  letter-spacing:.2px;
  white-space:nowrap;
}

/* Responsive spacing */
@media (max-width: 767.98px){
  .aboutx-ethos-list{ gap:14px; }
  .aboutx-ethos-list li{ padding:7px 12px; }
  .aboutx-ethos-list span{ font-size:13px; }
}



/* ===== ALTERNATING SERVICES (scoped) ===== */
.alt-services { padding: 60px 0; }

.alt-services .section-header h2 {
  font-weight: 700;
  color: #063783;
  margin-bottom: 6px;
}
.alt-services .section-header p {
  margin: 0;
  opacity: .9;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* strip */
.alt-service {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  background: #f7f9ff;                /* light tint complimentary to #063783 */
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 24px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}
.alt-service:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px rgba(0,0,0,.08);
  border-color: rgba(6,55,131,.25);    /* #063783 with alpha */
  background: #f2f6ff;
}

/* alternating direction */
.alt-service.reverse { flex-direction: row-reverse; text-align: right; }

/* icon */
.alt-icon {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #063783;
  color: #fff;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(6,55,131,.35);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.alt-service:hover .alt-icon {
  transform: scale(1.04);
  box-shadow: 0 10px 22px rgba(6,55,131,.45);
  background: #052e6b;                 /* slightly darker on hover */
}

/* content */
.alt-content h4 {
  margin: 0 0 6px;
  font-weight: 600;
  color: #063783;
}
.alt-content p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  opacity: .92;
}

/* subtle divider line effect across long rows (desktop only) */
@media (min-width: 992px){
  .alt-service::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(6,55,131,.18), rgba(6,55,131,.06));
    margin-left: 8px;
    opacity: .6;
  }
  .alt-service.reverse::after {
    margin-left: 0;
    margin-right: 8px;
  }
}

/* responsive */
@media (max-width: 991.98px){
  .alt-service,
  .alt-service.reverse {
    flex-direction: column;
    text-align: center;
  }
  .alt-service::after { display: none; }
  .alt-icon { margin: 0 0 12px 0 !important; }
}

/* compact on very small screens */
@media (max-width: 575.98px){
  .alt-service { padding: 18px 16px; border-radius: 14px; }
  .alt-icon { width: 64px; height: 64px; font-size: 24px; }
  .alt-content p { font-size: 14.5px; }
}






.privacy-policy-section {
  background: #f9f9f9;
  color: #333;
  font-size: 15px;
  line-height: 1.7;
}
.privacy-policy-section h1 {
  color: #063783;
  font-weight: 700;
}
.privacy-policy-section h3 {
  margin-top: 30px;
  color: #063783;
  font-weight: 600;
}



/* ===== Shlok Ticker (Above Footer) ===== */
.shlok-ticker{
  background:#24b5cf;            /* updated brand cyan */
  color:#fff;
  border-top:1px solid rgba(255,255,255,.15);
  border-bottom:1px solid rgba(0,0,0,.08);
  overflow:hidden;
  position:relative;
  padding:8px 0;
}

.shlok-track{
  display:flex;
  gap:60px;
  white-space:nowrap;
  will-change: transform;
  animation: shlokScroll 28s linear infinite;
}

.shlok-ticker:hover .shlok-track{
  animation-play-state: paused;
}

.shlok-items{
  display:inline-flex;
  gap:34px;
  align-items:center;
  padding-left: 16px;
}

.shlok-items span{
  display:inline-block;
  font-size:15px;
  line-height:1.6;
  font-weight:500;
  font-family: inherit, "Nirmala UI", "Mangal", "Kohinoor Devanagari", sans-serif;
  opacity:.95;
  position:relative;
  padding-right:28px;
}

.shlok-items span::after{
  content:"•";
  position:absolute;
  right:10px;
  top:0; bottom:0;
  margin:auto;
  height:1em;
  opacity:.6;
}
.shlok-items span:last-child::after{ content:""; }

@keyframes shlokScroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 991.98px){
  .shlok-items{ gap:24px; }
  .shlok-items span{ font-size:14px; }
}
@media (max-width: 575.98px){
  .shlok-ticker{ padding:7px 0; }
  .shlok-items{ gap:18px; }
  .shlok-items span{ font-size:13.5px; padding-right:22px; }
}







/* === Header Nav: ghost-on-hover (no box at rest) === */
.header-area .main-nav .nav li a {
  border: 1px solid transparent;   /* hide the box by default */
  padding: 0 14px;                  /* a little breathing room */
  border-radius: 4px;               /* subtle rounding */
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

/* Hover/Focus: brand navy background + white text + visible border */
.header-area .main-nav .nav li a:hover,
.header-area .main-nav .nav li a:focus {
  background: #063783;
  color: #fff !important;
  border-color: #063783;
}

/* Make the Contact button match this behavior too (no box until hover) */
.header-area .main-nav .nav li a.contact-btn {
  border-color: transparent;
  background: transparent;
  color: #063783;
  height: 40px;            /* align with other links */
  line-height: 38px;       /* visually centered text */
}
.header-area .main-nav .nav li a.contact-btn:hover,
.header-area .main-nav .nav li a.contact-btn:focus {
  background: #063783;
  color: #fff;
  border-color: #063783;
}

/* Keep dropdown caret color consistent */
.header-area .main-nav .nav li.submenu:after {
  color: #063783;
}

/* Mobile menu: keep simple gray hover, no boxed hover */
@media (max-width: 991px){
  .header-area .main-nav .nav li a {
    border-color: transparent !important;
    border-radius: 0;
    padding-left: 30px !important;  /* preserve template spacing */
  }
  .header-area .main-nav .nav li a:hover,
  .header-area .main-nav .nav li a:focus {
    background: #f5f5f5 !important;
    color: #063783 !important;
    border-color: transparent !important;
  }
  .header-area .main-nav .nav li a.contact-btn {
    height: 50px !important; 
    line-height: 50px !important;
  }
}



/* === Header Nav Font Style === */
.header-area .main-nav .nav li a {
  font-family: "Poppins", "Segoe UI", Arial, sans-serif; /* or your brand font */
  font-weight: 600;   /* semi-bold, feels bold without being too heavy */
  letter-spacing: 0.5px; /* subtle spacing for premium feel */
  text-transform: uppercase; /* optional: all caps for stronger header presence */
  color: #000; /* keep base text black */
  border: 1px solid transparent;
  padding: 0 14px;
  border-radius: 4px;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

/* Hover remains same as before */
.header-area .main-nav .nav li a:hover,
.header-area .main-nav .nav li a:focus {
  background: #063783;
  color: #fff !important;
  border-color: #063783;
}




/* === Header Nav Links Style === */
.header-area .main-nav .nav li a {
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  font-weight: 600;         /* bolder font */
  color: #063783;           /* brand navy blue */
  letter-spacing: 0.3px;    /* slight spacing for premium look */
  padding: 8px 12px;        /* reduced padding to bring tabs closer */
  margin: 0 4px;            /* less space between menu items */
  border: 1px solid transparent;
  border-radius: 4px;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
  text-transform: uppercase; /* optional for strong presence */
}

/* === Hover State (like Contact Button) === */
.header-area .main-nav .nav li a:hover,
.header-area .main-nav .nav li a:focus {
  background: #063783;
  color: #fff !important;
  border-color: #063783;
}


/* 1) Center nav link text vertically & keep compact spacing */
.header-area .main-nav .nav li a{
  display: inline-flex;          /* overrides block */
  align-items: center;           /* vertical center */
  justify-content: center;       /* horizontal center */
  height: 40px;                  /* consistent button height */
  line-height: 1;                /* avoid vertical drift */
  padding: 0 12px;               /* no top/bottom padding */
  margin: 0 4px;
  border: 1px solid transparent; /* hidden box until hover/active */
  border-radius: 4px;
}

/* 2) Contact button matches alignment too */
.header-area .main-nav .nav li a.contact-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  line-height: 1;
}

/* 3) Little nudge for submenu caret to stay centered */
.header-area .main-nav .nav li.submenu:after{
  top: 14px; /* was 12px; adjust if needed */
}

/* 4) Mobile menu: keep same centering */
@media (max-width: 991px){
  .header-area .main-nav .nav li a{
    display: flex;
    align-items: center;
    justify-content: flex-start; /* left-align in mobile */
    height: 50px;
    line-height: 1;
    padding: 0 30px !important;
  }
}



/* Reduce spacing between nav items */
.header-area .main-nav .nav li {
  margin: 0 4px;   /* reduce horizontal gap */
}

/* Reduce padding inside buttons */
.header-area .main-nav .nav li a {
  padding: 0 10px;  /* was bigger, now tighter */
  font-weight: 600; /* keep bold */
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: all 0.3s ease;
}

/* Hover style */
.header-area .main-nav .nav li a:hover,
.header-area .main-nav .nav li a.active {
  border-color: #063783;      /* brand navy border */
  background: #063783;        /* filled background */
  color: #fff !important;     /* text white */
}

/* Contact button still prominent */
.header-area .main-nav .nav li a.contact-btn {
  padding: 0 14px;
  height: 38px;
  font-weight: 700;
}





/* default: grayscale */
.logo-tile img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: grayscale(100%);
  opacity: .9;
  transition: filter .35s ease, opacity .35s ease, transform .25s ease;
}

/* hover or JS-highlighted */
.logo-tile img:hover,
.logo-tile img.colored{
  filter: none;
  opacity: 1;
  transform: translateY(-2px);
}

/* optional: respect users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  .logo-tile img{
    transition: none;
  }
}




.clientele-list {
  max-width: 800px;
  margin: 0 auto;
}

.client-item {
  margin-bottom: 25px;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  transition: transform .3s ease, background .3s ease;
}

.client-item h4 {
  font-weight: 700;
  color: #063783;
  margin-bottom: 5px;
}

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

/* Hover luxury effect */
.client-item:hover {
  transform: translateX(5px);
  background: #f9f9f9;
}

/* Animations */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp .8s forwards;
}
@keyframes fadeUp {
  to { opacity:1; transform:translateY(0); }
}



.clientele-columns {
  display: flex;
  gap: 40px;
}

.client-col {
  flex: 1;
}

@media (max-width: 767px) {
  .clientele-columns {
    flex-direction: column;
    gap: 20px;
  }
}




.header-area .main-nav .nav li a {
  position: relative;
}

.header-area .main-nav .nav li a.active::after {
  content: "";
  position: absolute;
  bottom: -12px;   /* place underline at bottom of header box */
  left: 0;
  width: 100%;
  height: 3px;
  background: #063783; /* brand navy blue */
  border-radius: 2px;
}




.header-area .main-nav .nav li a::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 0;
  height: 3px;
  background: #063783;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.header-area .main-nav .nav li a:hover::after {
  width: 100%;
}

.header-area .main-nav .nav li a.active::after {
  width: 100%; /* keep full width for active tab */
}






/* ===== Projects: filter + grid ===== */
.proj-filter{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center; margin-bottom:22px;
}
.pf-btn{
  border:1px solid #063783; background:#fff; color:#063783;
  padding:8px 14px; border-radius:999px; font-size:14px; font-weight:600;
  letter-spacing:.2px; cursor:pointer; transition:.2s;
}
.pf-btn:hover{ background:#f2f6ff; }
.pf-btn.active{ background:#063783; color:#fff; box-shadow:0 6px 16px rgba(6,55,131,.25); }

.proj-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

/* Card */
.proj-card{
  display:block; background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:14px; overflow:hidden; text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.proj-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 26px rgba(0,0,0,.08);
  border-color: rgba(6,55,131,.25);
}

/* Horizontal media: always 16:9 and auto-crop long images */
.proj-media{
  position:relative; width:100%;
  aspect-ratio: 16 / 9;
  background:#e9eef6;
}
/* Fallback for very old browsers (optional) */
@supports not (aspect-ratio: 16 / 9) {
  .proj-media { padding-top:56.25%; }
  .proj-media > img { position:absolute; inset:0; }
}
.proj-media > img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Meta */
.proj-meta{ padding:14px 14px 16px; }
.proj-meta h3{
  margin:0 0 4px; font-size:16px; line-height:1.4; color:#063783; font-weight:600;
}
.proj-tag{
  display:inline-block; font-size:12px; color:#606060; background:#f2f6ff;
  border:1px solid rgba(0,0,0,.06); border-radius:999px; padding:4px 8px;
}

/* Filter hide animation */
.pf-hide{ opacity:0; transform:scale(.98); transition:opacity .18s ease, transform .18s ease; }
 


/* ===== Projects Hub (final hover style) ===== */
.projects-hub .card{
  position:relative; border-radius:18px; overflow:hidden;
  background:#0b1733;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  transition: transform .3s ease, box-shadow .3s ease;
}
.projects-hub .card:hover{
  transform: translateY(-4px);
  box-shadow:0 16px 36px rgba(0,0,0,.12);
}



/* === HEIGHT ADJUST: keep 2/3 of previous tall height (1:2 -> 3:4) === */
.projects-hub .grid .card .media{
  aspect-ratio: 3 / 4 !important;   /* portrait, not too tall */
}

/* Center the capsule exactly */
.projects-hub .grid .card .content{
  position: absolute; inset: 0; z-index: 2; padding: 0;
  display: grid; place-items: center; color: #fff;
}

/* Ensure overlay + B&W -> color on hover stay intact */
.projects-hub .grid .card .media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.55) 100%);
}

.projects-hub .grid .card .media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform: scale(1.02);
  filter: grayscale(100%) brightness(.9) contrast(1.05);
  transition: transform .35s ease, filter .35s ease;
}
.projects-hub .grid .card:hover .media img,
.projects-hub .grid .card:focus-within .media img{
  filter: none;                       /* colored on hover */
  transform: scale(1.06);
}
/* Brand color (optional) */
.projects-hub { --pcm-blue: #063783; }

/* Center the capsule exactly */
.projects-hub .grid .card .content{
  position: absolute; inset: 0; z-index: 2; padding: 0;
  display: grid; place-items: center; text-align: center;
}

/* Capsule: colored by default */
.projects-hub .grid .card .title{
  margin: 0;
  display: inline-block;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 1.2px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--pcm-blue);
  color: #fff;
  border: 1px solid var(--pcm-blue);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

/* On hover: transparent pill with white outline & white text */
.projects-hub .grid .card:hover .title,
.projects-hub .grid .card:focus-within .title{
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.95);
}








/* Base: logos start muted */
.logo-grid .logo-tile img{
  filter: grayscale(100%);
  opacity: 0.85;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
  will-change: filter, opacity, transform;
}

/* Hover still shows color (optional) */
.logo-grid .logo-tile img:hover{
  filter: none;
  opacity: 1;
  transform: translateY(-2px);
}

/* Flash-on class toggled by JS */
.logo-grid .logo-tile.flash img{
  filter: none !important;
  opacity: 1 !important;
}

/* If you prefer a true “blink” pulse, keep this too */
@keyframes blinkColor {
  0%, 100% { filter: grayscale(100%); opacity: .6; }
  50%      { filter: none;            opacity: 1;  }
}
/* Uncomment to see a pulsing effect while .flash is applied */
/* .logo-grid .logo-tile.flash img { animation: blinkColor .6s linear; } */




/* ===== Preloader: favicon ring + pulse ===== */
.preloader-wrapper{
  position: fixed; inset: 0; z-index: 9999;
  background: #f5f5f5; display: grid; place-items: center;
}
.preloader-wrapper .loader{
  position: relative;
  width: 96px; height: 96px;
  border-radius: 50%;
}

/* Spinning ring in brand navy */
.preloader-wrapper .loader::before{
  content: "";
  position: absolute; inset: -12px;
  border-radius: 50%;
  border: 3px solid rgba(6,55,131,0.15);
  border-top-color: #063783;                 /* brand */
  animation: pcm-spin 0.9s linear infinite;
  box-shadow: 0 6px 18px rgba(6,55,131,0.07) inset;
}

/* Favicon pulse */
.preloader-logo{
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.08));
  animation: pcm-pulse 1.4s ease-in-out infinite;
}

/* Animations */
@keyframes pcm-spin {
  to { transform: rotate(360deg); }
}
@keyframes pcm-pulse {
  0%   { transform: scale(.92); opacity: .9; }
  50%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(.92); opacity: .9; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  .preloader-wrapper .loader::before,
  .preloader-logo{ animation: none; }
}













/* ===== PCM Preloader (text-only, gradient) ===== */
:root{
  --brand:#063783;   /* primary navy */
  --brand2:#6F84A9;  /* secondary slate */
  --pre-bg:#ffffff;  /* page preloader background */
}

.preloader-wrapper{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background: var(--pre-bg);
  transition: opacity .45s ease;
}
.preloader-wrapper.hide{ opacity:0; pointer-events:none; }

.preloader-inner{ text-align:center; padding: 16px 24px; }

.brand-wordmark{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 6vw, 56px);
  letter-spacing: .08em;
  line-height: 1.05;
  /* animated gradient fill */
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand2) 50%, var(--brand) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: pcm-shimmer 1.6s linear infinite;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.loading-bar{
  width: 220px; height: 4px; margin: 0 auto;
  background: rgba(6,55,131,.15);
  border-radius: 999px; overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(6,55,131,.08);
}
.loading-bar > span{
  display:block; height:100%; width:40%;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  border-radius: inherit;
  animation: pcm-slide 1.2s ease-in-out infinite;
}

@keyframes pcm-shimmer{
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@keyframes pcm-slide{
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(50%); }
  100% { transform: translateX(200%); }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  .brand-wordmark, .loading-bar > span{ animation: none; }
}

/* Optional: screen reader only helper */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}








<style>
  /* === Align right-column content to the left, match slideshow edge === */
  .project-hero-left{
    display: block;
    justify-content: flex-start !important; /* stop centering */
  }
  .page-single-img.slideshow{
    margin: 24px 0 0 !important; /* remove auto-centering */
  }

  .page-single-text{
    text-align: left !important;
    margin-top: 16px;
  }
  .page-single-text .title{
    text-align: left !important;
    margin: 0 0 10px;
  }
  .page-single-text .left-text{
    max-width: 560px;          /* same as slideshow width cap */
    margin: 12px 0 0 !important; /* left-anchored */
    text-align: left;
  }

  /* keep the icons removed on bullets (as you wanted) */
  .page-single-text .aboutx-bullets i{ display:none !important; }
</style>