/*

TemplateMo 563 SEO Dream

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

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

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

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

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

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

.grid-item {
  float: left;
}

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

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

.clearfix {
  display: inline-block;
}

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

* html .clearfix {
  height: 1%;
}

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

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

* {
  box-sizing: border-box;
}

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

a {
  text-decoration: none !important;
}

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

ul {
  margin-bottom: 0px;
}

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

.main-green-button a {
  display: inline-block;
  background-color: #A8DADC;
  font-size: 17px;
  font-weight: 450;
  color: #355172;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border-bottom: 2px solid #A8DADC!important;
  transition: all .3s;
}

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


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

.background-header {
  background-color: #355172!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: #355172;
}

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

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

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

.header-area {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: 100px;
  background-color: #355172;
  transition: background-color 0.3s ease; /* NOT all */
}

.header-area .logo span {
  white-space: nowrap;
}

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

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

.header-area .main-nav .logo {
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.header-area .main-nav .logo h4 {
    font-size: 20px;
    font-weight: 550;
    font-family: 'Poppins', sans-serif;
    text-transform: capitalize;
    color: #fff;
    line-height: 70px;
    float: left;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

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

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

.header-area .main-nav .logo h4 {
  display: flex;             /* keeps image + text on one line */
  align-items: center;       /* vertically align them */
  line-height: normal !important; /* prevents cutting text */
  gap: 8px;                  /* space between logo & text */
}

.background-header .main-nav .nav {
  margin-top: 20px !important;
}

/* .header-area {
  position: sticky;
  top: 0;
  z-index: 9999;
  background-color: #355172; /* or whatever your header bg is */
  /* overflow: hidden; /* THIS prevents logo escaping */
  /* transform: none !important;
} */ */ */

.main-nav .logo {
  display: flex;
  align-items: center;
  height: 100%;
}

.header-area,
.header-area * {
  transform: none !important;
}

header .nav {
  display: flex;
  align-items: center;       /* vertically center the menu items relative to header */
  justify-content: flex-end;  /* pushes nav items to the right, use space-between if logo + nav are in same container */
  gap: 18px;                  /* spacing between menu items */
  /* flex-wrap: wrap; */
}


/* .header-area .container {
  flex-wrap: wrap;
} */


.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

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

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

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

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

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 700;
  font-size: 17px;
  font-family: 'Poppins', sans-serif;
  color: #355172;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

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

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #A8DADC!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: 20px;
  font-family: 'Poppins', sans-serif;
  color: #355172;
  position: absolute;
  right: 18px;
  top: 12px;
}

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

.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: #355172;
  color: #355172!important;
  padding-left: 20px;
  font-family: 'Poppins', sans-serif;
  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: #355172!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.submenu ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.submenu:hover ul {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

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

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

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

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #fff;
}

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

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #fff;
}

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

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

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

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

.background-header .logo h4 img {
  max-height: 40px !important;
}


@media (max-width: 768px) {
  .header-area {
    height: 90px;
  }

  .main-nav {
    min-height: 90px;
  }
}

@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: #355172;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #355172!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #355172;
    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: #355172 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a.active {
    color: #A8DADC;       /* scroll highlight color */
  }
  .header-area .main-nav .nav li a:hover {
    background: #355172;
    color: #A8DADC;
  }
  .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: #A8DADC;
    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: #A8DADC;
    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: #A8DADC;
    border-radius: 50%;
}



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

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

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

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

.rounded-img {
  width: 100%;           /* Makes the image slightly bigger and responsive */
  max-width: 600px;      /* Optional: limits how wide it can grow */
  height: auto;
  border-radius: 15px;   /* Rounded edges */
  display: block;
  margin: 0 auto;        /* Centers the image */
}

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

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

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

.main-banner .left-content h2 {
  /* border-top: 1px solid #eee; */
  margin-top: 30px;
  padding-top: 20px;
  margin-bottom: 45px;
  font-size: 60px;
  font-weight: 800;
  color: #2a2a2a;
  line-height: 72px;
  background: #355172;
  /* background: -webkit-linear-gradient(to right, #A8DADC 0%, #355172 100%);
  background: -moz-linear-gradient(to right, #A8DADC 0%, #355172 100%);
  background: linear-gradient(to right, #A8DADC 0%, #355172 100%); */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

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

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

.rounded-img {
  border-radius: 15px;
  width: 100%;
  height: auto;
}

.slide-texts {
  margin-bottom: 20px;
}

.slide-text {
  font-size: 2.5rem;
  font-weight: 750;
  color: #355172;
  display: none; /* hide by default */
}

.owl-nav .owl-prev,
.owl-nav .owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #355172; /* Brand color */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #355172 !important;
}

.owl-nav .owl-prev:hover,
.owl-nav .owl-next:hover {
  background-color: #2a4161;
}




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

#features {
  padding-top: 130px;
}

/* Main features container color */
.features-box {
  background: #a8dadc;
  border-radius: 15px;
  padding: 40px 20px;
  margin-top: 40px;
}

.how-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: #355172;
  font-size: 1.5rem;
  margin-bottom: 35px;
  text-transform: uppercase;
  /* text-transform: capitalize; */
}

/* Feature Step Card (no boxes, just spacing) */
.feature-step {
  padding: 20px 10px;
  color: #fff; 
}

/* Image Styling */
.feature-img {
  width: 100%;
  /* height: 160px; */
  object-fit: cover;
  border-radius: 20px;
  display: block;
  /* margin-bottom: 15px; */
}

/* Numbers Styling */
.step-number {
  font-size: 26px;
  font-weight: 800;
  color: #355172; /* Soft brand accent */
  margin-bottom: 10px;
}

/* Text Styling */
.feature-step h4 {
  font-size: 20px;
  font-weight: 700;
  color: #355172;
  margin-bottom: 10px;
  font-family: 'Lora', serif;
}

.feature-step p {
  font-size: 18px;
  line-height: 1.6;
  color: #444;
  font-family: 'Lora', serif;
}

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

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

.features-item:hover {
  background: rgb(53,81,114);
  background: linear-gradient(105deg, #355172 0%, #355172 100%);
  /* background: #355172; */
  /* background: linear-gradient(105deg, rgba(51,204,197,1) 0%, rgba(53,81,114,1) 100%); */
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.features-item h4 {
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 30px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 730;
  font-family: 'Lora', serif;
  color: #2e2e2e;
  position: relative;
  transition: all 0.5s;
  font-family: 'Lora', serif;
}

.features-item .line-dec {
  width: 100px;
  height: 2px;
  background-color: rgba(53,81,114,1);
  margin: 30px auto;
  transition: all 0.5s;
}

.features-item p {
  position: relative;
  margin-top: 0px;
  transition: all 0.5s;
  font-family: 'Lora', serif;
  font-size: 1.20rem;     /* Slightly smaller than About page, still readable */
  line-height: 1.7;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

#about {
  padding-top: 130px;
}

.about-us .section-heading {
  position: relative;
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  padding-bottom: 10px;
}


/* .about-us .section-heading::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 3px;
  background-color: #b8a8dc; /* soft accent color */
  /* bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 3px;
} */ */

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

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

.about-us .about-item h4 {
  font-size:38px;
  font-weight: 800;
  font-family: 'Lora', serif;
  color:#355172;
}

#about .section-heading h6.about-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: #355172;
    font-size: 1.5rem;
    margin-bottom: 35px;
    text-transform: uppercase;
    text-align: center;
    display: block;       /* ensures centering works */
}

/* .about-us .about-item h6 {
  font-size: 16px;
  margin-top: 5px;
  font-weight: 400;
  color: #2a2a2a;
  font-family: 'Lora', serif;
  text-transform: capitalize;
} */

.about-us p {
  margin: 40px 0;
  font-family: 'Lora', serif;
  font-size: 1.30rem;      /* Slightly bigger text */
  line-height: 1.75;       /* Better reading flow */
  color: #444;             /* Softer dark grey for readability */
  max-width: 750px;        /* Prevents text from stretching too wide */
}

/* .about-us p {
  margin: 40px 0px;
  font-family: 'Lora', serif;
} */

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

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

/* .our-services .section-heading h2 {
  font-family: 'Lora', serif;
  color: #355172;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
} */

/* Only style the small section heading "Features" */
.our-services .section-heading h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: #355172;
  font-size: 1.5rem;       /* Adjust size as needed */
  text-transform: uppercase;
  margin-bottom: 15px;
}

.our-services .section-heading {
  text-align: center;
  margin-left: 75px;
  margin-right: 75px;
  font-family: 'Poppins', sans-serif;
  color: #355172;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
}

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

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

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

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

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

/* .service-item h4 {
  font-size: 22px;
  font-weight: 700;
  color: #2a2a2a;
  font-family: 'Lora', serif;
  margin-bottom: 15px;
} */

.our-services p {
  margin: 30px 0;
  font-family: 'Lora', serif;
  font-size: 1.20rem;     /* Slightly smaller than About page, still readable */
  line-height: 1.7;
  color: #444;            /* Soft dark grey */
  max-width: 700px;       /* Balanced width for service descriptions */
  margin-left: auto;
  margin-right: auto;     /* Center paragraphs */
}

.feature-card h4 {
    font-family: 'Poppins', sans-serif;
    color: #355172;
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 550;
}

.feature-card p {
    font-family: 'Lora', serif;
    font-size: 18px;
    line-height: 1.6;
    color: #444;
    text-align: justify;       /* Change from center to justify */
}

/* .feature-card p {
    font-family: 'Lora', serif;
    font-size: 18px;
    line-height: 1.6;
    color: #444;
    /* font-family: 'Lora', serif; */
/* } */ */

/* Ensure carousel container is relative */
.features-carousel {
    position: relative;
}

.owl-nav .owl-prev,
.owl-nav .owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #355172; /* Box color */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.owl-nav .owl-prev:hover,
.owl-nav .owl-next:hover {
    background-color: #2a4161;
}

/* Arrow color */
.owl-nav .owl-nav-arrow {
    color: #355172 !important;
    font-size: 2rem;
    font-weight: bold;
}

/* Horizontal positions */
.owl-nav .owl-prev { left: -120px; }
.owl-nav .owl-next { right: -30px; }



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

/* Center only the column that contains the form */
.contact-us .contact-form-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Make sure the form itself is centered */
form#contact {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Center the Send Message button */
form#contact button {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.contact-us {
  margin-top: 90px;
  padding: 120px 0px;
  background-image: url(../images/footer\ bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.contact-us .section-heading h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: #355172;
  font-size: 1.5rem;
  margin-bottom: 20px;
  text-transform: uppercase;
  text-align: center;
}

/* .contact-us .section-heading {
  text-align: center;
  margin-left: 20px;
  margin-right: 20px;
  font-family: 'Poppins', sans-serif;
  color: #355172;
  font-weight: 700;
  font-size: 1.5rem;
  text-transform: uppercase;
} */

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

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

.contact-us .contact-info ul li a {
  font-size: 20px;
  color: #355172;
  font-family: 'Lora', serif;
  color: #444;
  transition: all .5s;
}

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

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

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

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

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

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

form#contact input::placeholder {
  color: #444;
  font-weight: 500;
  font-size: 20px;
  font-family: 'Lora', serif;
}

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

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

form#contact button {
  display: inline-block;
  background-color: #A8DADC;
  font-size: 20px;
  font-weight: 500;
  color: #355172;
  font-family: 'Lora', serif;
  margin-top: 20px;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border-bottom: 2px solid #A8DADC!important;
  transition: all .3s;
  outline: none;
  border: none;
}

form#contact button:hover {
  background-color: #355172!important;
  color: #fff!important;
  font-size: 20px;
  font-weight: 700;
  border-bottom: 2px solid #355172!important;
}

a.email-link {
  color: #355172;           /* brand color */
  text-decoration: none;
}

a.email-link:hover {
  text-decoration: underline;
}

/* hide the right-side contact info column while keeping HTML in place
#contact .contact-side {
  display: none;
} */

/* make the form area narrower and centered on large screens */
/* #contact .col-lg-9 {
  /* change the left column to act as an 8/12 width and center it */
  /* width: 100%;
} */ */

/* on large screens, force the inner inputs column to be centered
@media (min-width: 992px) {
  #contact .col-lg-9 > .row {
    justify-content: center; /* center the inner row content */
    /* display: flex;
  } */
  /* target the inner input column blocks (left/right halves) so they behave as a centered 2-column layout */
  /* #contact .col-lg-9 .col-lg-6 {
    max-width: 48%;
    flex: 0 0 48%;
  }
  /* make the textarea and full-width fields stretch */
  /* #contact .col-lg-9 .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
} */ */ */

/* ensure the form itself is centered within its parent column
#contact form#contact {
  margin-left: auto;
  margin-right: auto;
  max-width: 900px; /* adjust as needed */
/* } */ */

/* center the submit button
#contact form#contact .main-button,
#contact form#contact button {
  display: block;
  margin-left: auto;
  margin-right: auto;
} */

/* Checkbox styling */
#consent {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #355172; /* tick + box color */
}

/* #consent:hover {
  accent-color: #a8dadc; /* tick + box color */
/* } */ */

/* Label styling */
.consent-checkbox label {
  font-family: 'Lora', serif;
  font-size: 1.1rem;
  color: #444;
  cursor: pointer;
}

/* Link styling inside label */
.consent-checkbox label a {
  color: #355172;
  text-decoration: underline;
}

.consent-checkbox label a:hover {
  color: #A8DADC; /* darker hover */
}


/* 
---------------------------------------------
Consent Banner
--------------------------------------------- 
*/

.consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #B8A8DC; /* your brand color */
  color: #fff;
  text-align: center;
  padding: 15px;
  font-family: 'Lora', serif;
  z-index: 10000;
  display: none; /* will show with JS if consent not given */
}

.consent-banner p {
  display: inline;
  margin: 0;
  font-family: 'Lora', serif;
  /* font-size: 20px; */
  font-size: 1.2rem;
}

.consent-banner a {
  color: #355172; /* lighter accent color */
  text-decoration: underline;
}

.consent-banner a:hover {
  color: #fff; /* lighter accent color */
  text-decoration: underline;
}

.consent-button {
  background-color: #A8DADC; /* accent color */
  color: #355172; /* text color */
  border: none;
  padding: 8px 16px;
  margin-left: 15px;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 5px;
  font-weight: 600;
  transition: 0.3s all;
}

.consent-button:hover {
  background-color: #8ab8c9;
}


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

footer p {
  text-align: center;
  font-family: 'Lora', serif;
  font-size: 20px;
  margin: 30px 0px;
}

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

footer p a:hover {
  color: #A8DADC;
}

footer {
  text-align: center;        /* Ensures footer content centers */
}

footer .container,
footer .row,
footer .col-lg-12 {
  display: flex;
  justify-content: center;   /* Centers the paragraph horizontally */
  text-align: center;
}

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

@media (max-width: 1200px) {
  .header-area .main-nav .logo h4 {
    font-size: 24px;
  }
  .header-area .main-nav .logo h4 img {
    max-width: 25px;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:last-child {
    padding-left: 20px;
  }
}

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

@media (max-width: 767px) {
  .header-area .main-nav .logo h4 {
    font-size: 30px;
  }
  .header-area .main-nav .logo h4 img {
    max-width: 30px;
    margin-left: 5px;
  }
  .main-banner .info-stat {
    margin-bottom: 15px;
  }
  .service-item {
    text-align: center;
    padding: 30px;
  }
  .service-item .icon {
    float: none;
    margin-right: 0px;
    margin-bottom: 15px;
  }
  .service-item .right-content {
    display: inline-block;
  }
  .our-portfolio .section-heading,
  .about-us .section-heading,
  .about-us .about-item,
  .about-us p,
  .about-us .main-green-button {
    text-align: center;
  }
  .our-services .section-heading {
    margin-left: 15px;
    margin-right: 15px;
  }
  .about-us .about-item {
    margin-top: 15px;
  }
  form#contact {
    padding: 30px;
  }

  @media (max-width: 767px) {

  /* Scale down SVG logo */
  .header-area .logo svg {
    width: 65px !important;
    height: 65px !important;
  }

  /* Reduce company name size */
  .header-area .logo span:first-child {
    font-size: 1.6rem !important;
    line-height: 1.2;
  }

  /* Reduce tagline size */
  .header-area .logo span:last-child {
    font-size: 0.9rem !important;
    line-height: 1.3;
  }

  /* Reduce gap between logo and text */
  .header-area .logo > div {
    gap: 6px !important;
  }

}

@media (max-width: 767px) {

  /* Force tagline line break */
  .header-area .logo span:last-child {
    max-width: 160px;
    white-space: normal;
  }

}

@media (max-width: 767px) {

  .header-area .logo div div {
    align-items: flex-start !important;
    text-align: left !important;
  }

}

@media (max-width: 767px) {

  .header-area {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

}
  
}