@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');
/*

TemplateMo 563 SEO Dream

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

/
/* ---------------------------------------------
Table of contents
------------------------------------------------
00. vars roots
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

--------------------------------------------- */

/* 
---------------------------------------------
vars roots
--------------------------------------------- 
*/
:root {
  --main-color: #33ccc5;
  --accent-color: #4771cb;
  --heading-color: #FA9D4D;
  --heading-color-grad:#FF4F6B;
  --circle-color: #fd6a54;
  --light-color: #ffffff;
  --dark-color: #2a2a2a;
}

/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/

/* 
---------------------------------------------
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: var(--light-color) ;
  -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: var(--dark-color) ;
}

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

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: var(--light-color) ;
  font-family: 'Open Sans', sans-serif;
}

::selection {
  background: #03a4ed;
  color: var(--light-color) ;
}

::-moz-selection {
  background: #03a4ed;
  color: var(--light-color) ;
}

@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;
}

.u-2bc53058 {
  margin-bottom: 60px;
}

.u-2bc53058 h6 {
  font-size: 15px;
  font-weight: 700;
  color: var(--main-color);
  text-transform: uppercase;
  margin-bottom: 15px;

}

.u-2bc53058 h2 {
  font-size: 30px;
  text-transform: capitalize;
  color: var(--dark-color) ;
  font-weight: 800;
  position: relative;
  z-index: 2;
  line-height: 45px;
}

.u-2bc53058 h2 em {
  font-style: normal;
  color: var(--main-color);
}

.u-2bc53058 h2 span {
  color: #088ec3;
}

.u-34a16352 a {
  display: inline-block;
  background-color: var(--accent-color);
  font-size: 15px;
  font-weight: 400;
  color: var(--light-color) ;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border-bottom: 2px solid var(--light-color) !important;
  transition: all .3s;
}

.u-34a16352 a:hover {
  background-color: var(--light-color) !important;
  color: var(--accent-color) !important;
  border-bottom: 2px solid var(--accent-color) !important;
}

.u-7cbb5b57 a {
  display: inline-block;
  background-color: var(--main-color);
  font-size: 15px;
  font-weight: 400;
  color: var(--light-color) ;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border-bottom: 2px solid var(--accent-color) !important;
  transition: all .3s;
}

.u-7cbb5b57 a:hover {
  background-color: var(--accent-color) !important;
  color: var(--light-color) !important;
  border-bottom: 2px solid var(--main-color) !important;
}


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

.background-header {
  background-color: var(--main-color) !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 .u-96d6f2e7,
.background-header .u-5655cef9 .u-d72e5ee9 li a {
  color: var(--light-color) ;
}

.background-header .u-5655cef9 .u-d72e5ee9 li:hover a {
  color: var(--main-color);
}

.background-header .u-d72e5ee9 li a.u-c76a5e84 {
  position: relative;
  color: var(--light-color) ;
}

.background-header .u-d72e5ee9 li a.u-c76a5e84:after {
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: var(--accent-color);
  content: '';
  left: 50%;
  bottom: 0px;
  transform: translateX(-10px);
}

.u-60fc6485 {
  background-color: var(--main-color);
  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;
}

.u-60fc6485 .u-5655cef9 {
  min-height: 80px;
  background: transparent;
}

.u-60fc6485 .u-5655cef9 .u-96d6f2e7 {
  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;
}

.u-60fc6485 .u-5655cef9 .u-96d6f2e7 h4 {
    font-size: 30px;
    font-weight: 800;
    text-transform: capitalize;
    color: var(--light-color) ;
    line-height: 100px;
    float: left;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.u-60fc6485 .u-5655cef9 .u-96d6f2e7 h4 img {
  max-width: 30px;
  margin-top: -20px;
  margin-left: 5px;
}

.background-header .u-5655cef9 .u-96d6f2e7 h4 {
  line-height: 80px;
}

.background-header .u-5655cef9 .u-d72e5ee9 {
  margin-top: 20px !important;
}

.u-60fc6485 .u-5655cef9 .u-d72e5ee9 {
  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;
}

.u-60fc6485 .u-5655cef9 .u-d72e5ee9 li {
  padding-left: 20px;
  padding-right: 20px;
}

.u-60fc6485 .u-5655cef9 .u-d72e5ee9 li:last-child {
  padding-right: 0px;
  padding-left: 40px;
}

.u-60fc6485 .u-5655cef9 .u-d72e5ee9 li:last-child a ,
.background-header .u-5655cef9 .u-d72e5ee9 li:last-child a {
  padding: 0px 20px;
  font-weight: 400;
}

.u-60fc6485 .u-5655cef9 .u-d72e5ee9 li:last-child a:hover ,
.background-header .u-5655cef9 .u-d72e5ee9 li:last-child a:hover {
  color: var(--accent-color) !important;
}

.u-60fc6485 .u-5655cef9 .u-d72e5ee9 li a {
  display: block;
  font-weight: 500;
  font-size: 15px;
  color: var(--light-color) ;
  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;
}

.u-60fc6485 .u-5655cef9 .u-d72e5ee9 li:hover a,
.u-60fc6485 .u-5655cef9 .u-d72e5ee9 li a.u-c76a5e84 {
  color: var(--light-color) !important;
}

.background-header .u-5655cef9 .u-d72e5ee9 li:hover a,
.background-header .u-5655cef9 .u-d72e5ee9 li a.u-c76a5e84 {
  color: var(--light-color) !important;
  opacity: 1;
}

.u-60fc6485 .u-5655cef9 .u-d72e5ee9 li.submenu {
  position: relative;
  padding-right: 30px;
}

.u-60fc6485 .u-5655cef9 .u-d72e5ee9 li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: var(--dark-color) ;
  position: absolute;
  right: 18px;
  top: 12px;
}

.background-header .u-5655cef9 .u-d72e5ee9 li.submenu:after {
  color: var(--dark-color) ;
}

.u-60fc6485 .u-5655cef9 .u-d72e5ee9 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;
}

.u-60fc6485 .u-5655cef9 .u-d72e5ee9 li.submenu ul li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.u-60fc6485 .u-5655cef9 .u-d72e5ee9 li.submenu ul li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: var(--dark-color) !important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.u-60fc6485 .u-5655cef9 .u-d72e5ee9 li.submenu ul li a:hover {
  background: var(--light-color) ;
  color: var(--main-color) !important;
  padding-left: 25px;
}

.u-60fc6485 .u-5655cef9 .u-d72e5ee9 li.submenu ul li a:hover:before {
  width: 3px;
}

.u-60fc6485 .u-5655cef9 .u-d72e5ee9 li.submenu:hover ul {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.u-60fc6485 .u-5655cef9 .u-6e07dcb7 {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .u-5655cef9 .u-6e07dcb7 {
  top: 23px;
}

.u-60fc6485 .u-5655cef9 .u-6e07dcb7 span,
.u-60fc6485 .u-5655cef9 .u-6e07dcb7 span:before,
.u-60fc6485 .u-5655cef9 .u-6e07dcb7 span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: var(--light-color) ;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .u-5655cef9 .u-6e07dcb7 span,
.background-header .u-5655cef9 .u-6e07dcb7 span:before,
.background-header .u-5655cef9 .u-6e07dcb7 span:after {
  background-color: var(--light-color) ;
}

.u-60fc6485 .u-5655cef9 .u-6e07dcb7 span:before,
.u-60fc6485 .u-5655cef9 .u-6e07dcb7 span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: var(--light-color) ;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .u-5655cef9 .u-6e07dcb7 span:before,
.background-header .u-5655cef9 .u-6e07dcb7 span:after {
  background-color: var(--light-color) ;
}

.u-60fc6485 .u-5655cef9 .u-6e07dcb7 span:before,
.u-60fc6485 .u-5655cef9 .u-6e07dcb7 span:after {
  content: "";
}

.u-60fc6485 .u-5655cef9 .u-6e07dcb7 span {
  top: 16px;
}

.u-60fc6485 .u-5655cef9 .u-6e07dcb7 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;
}

.u-60fc6485 .u-5655cef9 .u-6e07dcb7 span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.u-60fc6485 .u-5655cef9 .u-6e07dcb7.u-c76a5e84 span,
.u-60fc6485 .u-5655cef9 .u-6e07dcb7.u-c76a5e84 span:before,
.u-60fc6485 .u-5655cef9 .u-6e07dcb7.u-c76a5e84 span:after {
  background-color: transparent;
  width: 100%;
}

.u-60fc6485 .u-5655cef9 .u-6e07dcb7.u-c76a5e84 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: var(--light-color) ;
}

.background-header .u-5655cef9 .u-6e07dcb7.u-c76a5e84 span:before {
  background-color: var(--light-color) ;
}

.u-60fc6485 .u-5655cef9 .u-6e07dcb7.u-c76a5e84 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: var(--light-color) ;
}

.background-header .u-5655cef9 .u-6e07dcb7.u-c76a5e84 span:after {
  background-color: var(--light-color) ;
}

.u-60fc6485.u-69e976f6 {
  min-height: 80px;
}

.u-60fc6485 .u-d72e5ee9 {
  margin-top: 30px;
}

.u-60fc6485.u-69e976f6 .u-d72e5ee9 li a.u-c76a5e84 {
  color: var(--main-color);
}

@media (max-width: 1200px) {
  .u-60fc6485 .u-5655cef9 .u-d72e5ee9 li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .u-60fc6485 .u-5655cef9:before {
    display: none;
  }
}

@media (max-width: 992px) {
  .u-60fc6485 .u-5655cef9 .u-d72e5ee9 li:last-child  ,
  .background-header .u-5655cef9 .u-d72e5ee9 li:last-child {
    display: none;
  }
  .u-60fc6485 .u-5655cef9 .u-d72e5ee9 li:nth-child(6),
  .background-header .u-5655cef9 .u-d72e5ee9 li:nth-child(6) {
    padding-right: 0px;
  }
}

@media (max-width: 767px) {
  .background-header .u-5655cef9 .u-d72e5ee9 {
    margin-top: 80px !important;
  }
  .u-60fc6485 .u-5655cef9 .u-96d6f2e7 {
    color: #1e1e1e;
  }
  .u-60fc6485.u-69e976f6 .u-d72e5ee9 li a:hover,
  .u-60fc6485.u-69e976f6 .u-d72e5ee9 li a.u-c76a5e84 {
    color: var(--main-color) !important;
    opacity: 1;
  }
  .u-60fc6485.u-69e976f6 .u-d72e5ee9 li.search-icon a {
    width: 100%;
  }
  .u-60fc6485 {
    background-color: var(--main-color);
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }
  .u-60fc6485 .u-5f0b6ebc {
    padding: 0px;
  }
  .u-60fc6485 .u-96d6f2e7 {
    margin-left: 30px;
  }
  .u-60fc6485 .u-6e07dcb7 {
    display: block !important;
  }
  .u-60fc6485 .u-5655cef9 {
    overflow: hidden;
  }
  .u-60fc6485 .u-5655cef9 .u-d72e5ee9 {
    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 .u-d72e5ee9 {
    margin-top: 80px;
  }
  .u-60fc6485 .u-5655cef9 .u-d72e5ee9 li:first-child {
    border-top: 1px solid #eee;
  }
  .u-60fc6485.u-69e976f6 .u-d72e5ee9 {
    margin-top: 100px;
  }
  .u-60fc6485 .u-5655cef9 .u-d72e5ee9 li {
    width: 100%;
    background: var(--light-color) ;
    border-bottom: 1px solid #e7e7e7;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .u-60fc6485 .u-5655cef9 .u-d72e5ee9 li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .u-60fc6485 .u-5655cef9 .u-d72e5ee9 li a:hover {
    background: #eee !important;
    color: var(--main-color) !important;
  }
  .u-60fc6485 .u-5655cef9 .u-d72e5ee9 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;
  }
  .u-60fc6485 .u-5655cef9 .u-d72e5ee9 li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .u-60fc6485 .u-5655cef9 .u-d72e5ee9 li.submenu ul li a:hover:before {
    width: 0px;
  }
  .u-60fc6485 .u-5655cef9 .u-d72e5ee9 li.submenu ul.u-c76a5e84 {
    height: auto !important;
  }
  .u-60fc6485 .u-5655cef9 .u-d72e5ee9 li.submenu:after {
    color: #3B566E;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .u-60fc6485 .u-5655cef9 .u-d72e5ee9 li.submenu:hover ul, .u-60fc6485 .u-5655cef9 .u-d72e5ee9 li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 768px) {
  .u-60fc6485 .u-5655cef9 .u-d72e5ee9 {
    display: flex !important;
  }
}

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

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

.u-263d10ab: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;
}

.u-263d10ab: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;
}

.u-263d10ab .u-24bc8d96 {
  margin-right: 45px;
}

.u-263d10ab .u-24bc8d96 h6 {
  text-transform: capitalize;
  font-size: 15px;
  font-weight: 400;
  color: var(--dark-color) ;
  margin-bottom: 8px;
}

.u-263d10ab .u-24bc8d96 h4 {
  z-index: 2;
  position: relative;
  font-weight: 700;
  font-size: 20px;
  color: var(--dark-color) ;
}

.u-263d10ab .u-24bc8d96 h2 {
  /*border-top: 1px solid #eee;*/
  margin-top: 30px;
  padding-top: 20px;
  margin-bottom: 45px;
  font-size: 60px;
  font-weight: 800;
  color: var(--dark-color) ;
  line-height: 72px;
  background: var(--heading-color) ;
  background: -webkit-linear-gradient(to right, var(--heading-color)  0%, var(--heading-color-grad)  100%);
  background: -moz-linear-gradient(to right, var(--heading-color)  0%, var(--heading-color-grad)  100%);
  background: linear-gradient(to right, var(--heading-color)  0%, var(--heading-color-grad)  100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.u-263d10ab .u-50eaa6f4 {
  text-align: right;
  position: relative;
  z-index: 2;
}

.u-263d10ab .u-50eaa6f4 img {
  max-width: 593px;
}



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

#features {
  padding-top: 130px;
}

.u-9f034b63 .u-b7661aeb {
  z-index: 2;
  position: relative;
  background-color: var(--light-color) ;
  border-radius: 50px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
}

.u-66fc42a1 {
  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;
}

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

.u-66fc42a1:hover h4 {
  color: var(--light-color) ;
}

.u-66fc42a1:hover p {
  color: var(--light-color) ;
}

.u-66fc42a1:hover .u-7371b00c {
  background-color: rgba(255,255,255,0.3);
}

.u-74493f6a:hover .u-baec6461 {
  background-image: url(../images/features-icon-white-01.png);
}

.u-e0ba64cd:hover .u-baec6461 {
  background-image: url(../images/features-icon-white-02.png);
}

.u-66fc42a1 .u-b1bc248a h6 {
  background-repeat: no-repeat;
  width: 110px;
  height: 69px;
  color: var(--light-color) ;
  margin-left: auto;
  margin-right: auto;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  line-height: 69px;
  margin-top: -65px;
  margin-bottom: 30px;
}

.u-66fc42a1 .u-6cfae6b6 h6 {
  background-image: url(../images/features-number-01.png);
}

.u-66fc42a1 .u-61166958 h6 {
  background-image: url(../images/features-number-02.png);
}

.u-66fc42a1 .u-43386d33 h6 {
  background-image: url(../images/features-number-03.png);
}

.u-66fc42a1 .u-f29fe431 h6 {
  background-image: url(../images/features-number-04.png);
}

.u-74493f6a .u-baec6461 {
  background-image: url(../images/features-icon-black-01.png);
}

.u-e0ba64cd .u-baec6461 {
  background-image: url(../images/features-icon-black-02.png);
}

.u-66fc42a1 .u-baec6461 {
  width: 63px;
  height: 63px;
  margin: 0 auto;
  transition: all 0.5s;
}

.u-66fc42a1 h4 {
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 30px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  color: var(--dark-color) ;
  position: relative;
  transition: all 0.5s;
}

.u-66fc42a1 .u-7371b00c {
  width: 100px;
  height: 2px;
  background-color: rgba(51,204,197,0.3);
  margin: 30px auto;
  transition: all 0.5s;
}

.u-66fc42a1 p {
  position: relative;
  margin-top: 0px;
  transition: all 0.5s;
}

.u-c35feb64 {
  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;
}

.u-f8ff6407 {
  text-align: center;
}

.u-3c709b10 {
  width: 150px;
  height: 150px;
  line-height: 150px;
  background: none;
  margin: 0 auto;
  box-shadow: none;
  position: relative;
}
.u-3c709b10:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid #ddd;
  position: absolute;
  top: 0;
  left: 0;
}
.u-3c709b10 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.u-3c709b10 .u-aa0f67c3 {
  left: 0;
}
.u-3c709b10 .u-63d8602c {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 5px;
  border-style: solid;
  position: absolute;
  top: 0;
  border-color: var(--circle-color);
}
.u-3c709b10 .u-aa0f67c3 .u-63d8602c {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.u-3c709b10 .u-eff5199a {
  right: 0;
}
.u-3c709b10 .u-eff5199a .u-63d8602c {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}
.u-3c709b10 .u-b91f1df8 {
  text-align: center;
  color: var(--dark-color) ;
  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;
}
.u-3c709b10 .u-b91f1df8 div {
  margin-top: 10px;
}
.u-3c709b10 .u-b91f1df8 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. 
*/
.u-3c709b10[data-percentage="10"] .u-eff5199a .u-63d8602c {
  animation: loading-1 1.5s linear forwards;
}
.u-3c709b10[data-percentage="10"] .u-aa0f67c3 .u-63d8602c {
  animation: 0;
}

.u-3c709b10[data-percentage="20"] .u-eff5199a .u-63d8602c {
  animation: loading-2 1.5s linear forwards;
}
.u-3c709b10[data-percentage="20"] .u-aa0f67c3 .u-63d8602c {
  animation: 0;
}

.u-3c709b10[data-percentage="30"] .u-eff5199a .u-63d8602c {
  animation: loading-3 1.5s linear forwards;
}
.u-3c709b10[data-percentage="30"] .u-aa0f67c3 .u-63d8602c {
  animation: 0;
}

.u-3c709b10[data-percentage="40"] .u-eff5199a .u-63d8602c {
  animation: loading-4 1.5s linear forwards;
}
.u-3c709b10[data-percentage="40"] .u-aa0f67c3 .u-63d8602c {
  animation: 0;
}

.u-3c709b10[data-percentage="50"] .u-eff5199a .u-63d8602c {
  animation: loading-5 1.5s linear forwards;
}
.u-3c709b10[data-percentage="50"] .u-aa0f67c3 .u-63d8602c {
  animation: 0;
}

.u-3c709b10[data-percentage="60"] .u-eff5199a .u-63d8602c {
  animation: loading-5 1.5s linear forwards;
}
.u-3c709b10[data-percentage="60"] .u-aa0f67c3 .u-63d8602c {
  animation: loading-1 1.5s linear forwards 1.5s;
}

.u-3c709b10[data-percentage="70"] .u-eff5199a .u-63d8602c {
  animation: loading-5 1.5s linear forwards;
}
.u-3c709b10[data-percentage="70"] .u-aa0f67c3 .u-63d8602c {
  animation: loading-2 1.5s linear forwards 1.5s;
}

.u-3c709b10[data-percentage="80"] .u-eff5199a .u-63d8602c {
  animation: loading-5 1.5s linear forwards;
}
.u-3c709b10[data-percentage="80"] .u-aa0f67c3 .u-63d8602c {
  animation: loading-3 1.5s linear forwards 1.5s;
}

.u-3c709b10[data-percentage="85"] .u-eff5199a .u-63d8602c {
  animation: loading-5 1.5s linear forwards;
}
.u-3c709b10[data-percentage="85"] .u-aa0f67c3 .u-63d8602c {
  animation: loading-6 1.5s linear forwards 1.5s;
}

.u-3c709b10[data-percentage="90"] .u-eff5199a .u-63d8602c {
  animation: loading-5 1.5s linear forwards;
}
.u-3c709b10[data-percentage="90"] .u-aa0f67c3 .u-63d8602c {
  animation: loading-4 1.5s linear forwards 1.5s;
}

.u-3c709b10[data-percentage="100"] .u-eff5199a .u-63d8602c {
  animation: loading-5 1.5s linear forwards;
}
.u-3c709b10[data-percentage="100"] .u-aa0f67c3 .u-63d8602c {
  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);
  }
}
@keyframes loading-6 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(126);
    transform: rotate(126deg);
  }
}
.u-3c709b10 {
  margin-bottom: 1em;
}


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

#about {
  padding-top: 130px;
}

.u-9d7f564a .u-2bc53058 {
  margin-bottom: 40px;
}

.u-9d7f564a .u-41a9c645 {
  margin-right: 45px;
}

.u-9d7f564a .u-34aa6b7f h4 {
  font-size:38px;
  font-weight: 800;
  color:#088ec3;
}

.u-9d7f564a .u-34aa6b7f h6 {
  font-size: 16px;
  margin-top: 5px;
  font-weight: 400;
  color: var(--dark-color) ;
  text-transform: capitalize;
}

.u-9d7f564a p {
  margin: 40px 0px;
}

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

.u-f4846963 {
  padding-top: 120px;
}

.u-f4846963 .u-2bc53058 {
  text-align: center;
  margin-left: 75px;
  margin-right: 75px;
}

.u-f4846963 .u-fada7f8f {
  padding: 0px 80px;
}

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

.u-fb05adaf:hover {
  background-color: var(--light-color) ;
  border: 2px solid transparent;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}

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

.u-fb05adaf .u-baec6461 img {
    width: 38px;
    height: 38px;
}

.u-fb05adaf h4 {
  font-size: 22px;
  font-weight: 700;
  color: var(--dark-color) ;
  margin-bottom: 15px;
}


/* 
---------------------------------------------
pricing
--------------------------------------------- 
*/

.u-59aab28b.u-73d5342e {
  padding: 100px 0;
  background-color: #f8f9fa; /* Light gray background for contrast */
}

.u-59aab28b .u-2bc53058 {
  text-align: center;
  margin-bottom: 60px;
}

.u-59aab28b .u-2bc53058 h2 {
  font-size: 36px;
  font-weight: 700;
  color: var(--dark-color) ;
  margin-bottom: 20px;
}

.u-59aab28b .u-01233256 {
  background-color: var(--light-color) fff;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 30px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%; /* Ensure equal height for all cards */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.u-59aab28b .u-01233256:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.u-59aab28b .u-01233256 h4 {
  font-size: 24px;
  font-weight: 600;
  color: var(--dark-color) ;
  margin-bottom: 15px;
}

.u-59aab28b .u-01233256 p {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

.u-59aab28b .u-01233256 ul {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}

.u-59aab28b .u-01233256 ul li {
  font-size: 15px;
  color: #333;
  margin-bottom: 10px;
  position: relative;
  padding-left: 25px;
}

.u-59aab28b .u-01233256 ul li::before {
  content: "\f058"; /* FontAwesome check-circle icon */
  font-family: "FontAwesome";
  color: var(--accent-color);
  position: absolute;
  left: 0;
  top: 2px;
}

.u-59aab28b .u-01233256 .u-78a5eb43 {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: 20px;
}

.u-59aab28b .u-01233256 .u-34a16352 {
  margin-top: auto; /* Push button to bottom for consistent card height */
}

.u-59aab28b .u-01233256 .u-34a16352 a {
  display: inline-block;
  padding: 12px 30px;
  background-color: #007bff;
  color: var(--light-color) ;
  font-size: 16px;
  font-weight: 500;
  border-radius: 25px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.u-59aab28b .u-01233256 .u-34a16352 a:hover {
  background-color: #0056b3; /* Darker blue on hover */
}


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

.u-03f2197d {
  margin-top: 90px;
  padding: 120px 0px;
  background-image: url(../images/contact-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.u-03f2197d .u-2bc53058 {
  text-align: center;
  margin-left: 20px;
  margin-right: 20px;
}

.u-03f2197d .u-e4c397f6 {
  padding: 40px 30px;
  border: 2px solid #eee;
}

.u-03f2197d .u-e4c397f6 ul li {
  text-align: center;
  display: block;
  margin-bottom: 30px;
}

.u-03f2197d .u-e4c397f6 ul li a {
  font-size: 15px;
  color: #afafaf;
  transition: all .5s;
  word-break: break-all;
}

.u-03f2197d .u-e4c397f6 ul li:hover a {
  color: var(--dark-color) ;
}

.u-03f2197d .u-e4c397f6 ul li:last-child {
  margin-bottom: 0px;
}

.u-03f2197d .u-e4c397f6 ul li .u-baec6461 {
  margin-bottom: 10px;
}

.u-03f2197d .u-e4c397f6 ul li .u-baec6461 img {
  max-width: 32px;
}

form#contact {
  position: relative;
  background-color: var(--light-color) ;
  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 #aeaeae;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: var(--dark-color) ;
  padding: 0px 20px;
  margin-bottom: 20px;
}

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

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

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

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

form#contact button:hover {
  background-color: var(--accent-color) !important;
  color: var(--light-color) !important;
  border-bottom: 2px solid var(--main-color) !important;
}

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

footer { 
  padding: 30px 0px;
}

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

footer a {
  color: var(--dark-color);
  transition: all .5s;
  opacity: .5;
}

footer p a:hover {
  color: var(--accent-color);
}

.u-f1f3e776 {
  text-align: center;
}

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

@media (max-width: 1200px) {
  .u-60fc6485 .u-5655cef9 .u-96d6f2e7 h4 {
    font-size: 24px;
  }
  .u-60fc6485 .u-5655cef9 .u-96d6f2e7 h4 img {
    max-width: 25px;
    margin-left: 0px;
  }
  .u-60fc6485 .u-5655cef9 .u-d72e5ee9 li:last-child {
    padding-left: 20px;
  }
}

@media (max-width: 992px) {
  .u-60fc6485 .u-5655cef9 .u-96d6f2e7 h4 {
    font-size: 20px;
  }
  .u-263d10ab .u-24bc8d96 {
    margin-right: 0px;
  }
  .u-263d10ab {
    text-align: center;
  }
  .u-263d10ab:before {
    display: none;
  }
  .u-263d10ab .u-50eaa6f4 {
    margin: 30px auto 0px auto;
    text-align: center;
  }
  .u-66fc42a1 {
    margin-bottom: 45px;
  }
  .u-5fbc0004,
  .u-c234d673 {
    margin-bottom: 0px !important;
  }
  .u-f8ff6407 {
    margin-bottom: 30px;
  }
  .u-fb05adaf {
    text-align: center;
  }
  .u-fb05adaf .u-baec6461 {
    margin-top: 0px;
    margin-bottom: 30px;
  }
  .u-9d7f564a .u-41a9c645 {
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 45px;
  }
  .our-portfolio .owl-nav {
    display: none !important;
  }
  .u-e4c397f6 {
    margin-top: 60px;
  }
  form#contact {
    padding: 45px;
  }
}

@media (max-width: 767px) {
  .u-60fc6485 .u-5655cef9 .u-96d6f2e7 h4 {
    font-size: 30px;
  }
  .u-60fc6485 .u-5655cef9 .u-96d6f2e7 h4 img {
    max-width: 30px;
    margin-left: 5px;
  }
  .u-263d10ab .u-deef1eaf {
    margin-bottom: 15px;
  }
  .u-fb05adaf {
    text-align: center;
    padding: 30px;
  }
  .u-fb05adaf .u-baec6461 {
    float: none;
    margin-right: 0px;
    margin-bottom: 15px;
  }
  .u-fb05adaf .u-508dd78c {
    display: inline-block;
  }
  .our-portfolio .u-2bc53058,
  .u-9d7f564a .u-2bc53058,
  .u-9d7f564a .u-34aa6b7f,
  .u-9d7f564a p,
  .u-9d7f564a .u-7cbb5b57 {
    text-align: center;
  }
  .u-f4846963 .u-2bc53058 {
    margin-left: 15px;
    margin-right: 15px;
  }
  .u-9d7f564a .u-34aa6b7f {
    margin-top: 15px;
  }
  form#contact {
    padding: 30px;
  }
}

.u-03f2197d{
  overflow: hidden;
}

@media (max-width: 575px) {
  .u-263d10ab .u-24bc8d96 h2{
    font-size: 36px;
    line-height: 140%;
  }
}