/* 

TemplateMo 562 Space Dynamic

https://templatemo.com/tm-562-space-dynamic

*/

/* ---------------------------------------------
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
13. main

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

* {
  box-sizing: border-box;
}

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

a {
  text-decoration: none !important;
}

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

ul {
  margin-bottom: 0px;
}

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

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

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

::selection {
  background: #02abef;
  color: #fff;
}

::-moz-selection {
  background: #02abef;
  color: #fff;
}

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

.section-heading h2 {
  font-size: 30px;
  text-transform: capitalize;
  color: #2a2a2a;
  font-weight: 700;
  letter-spacing: 0.25px;
  position: relative;
  z-index: 2;
  line-height: 44px;
}

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

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

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

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

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

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

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

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #1e1e1e!important;
}

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

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

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

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

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

.header-area .main-nav .logo h4 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    color: #02abef;
    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;
}

.logo h4 span {
  color: #f87617;
}

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

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

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

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

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

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

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

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

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

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

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #f87617!important;
  opacity: 1;
}

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

.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 30px;
}

.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #2a2a2a;
  position: absolute;
  right: 18px;
  top: 12px;
}

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

.header-area .main-nav .nav li.submenu ul {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 50px;
  opacity: 0;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.header-area .main-nav .nav li.submenu ul li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.submenu ul li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.submenu ul li a:hover {
  background: #fff;
  color: #f87617!important;
  padding-left: 25px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

nav.main-nav a.logo img {
    width: 121px;
}


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



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

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

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

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

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

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

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

.main-banner .left-content h2 em {
  color: #02abef;
  font-style: normal;
}

.main-banner .left-content h2 span {
  color: #f87617;
}

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

.main-banner .left-content form {
  margin-top: 30px;
  width: 470px;
  height: 66px;
  position: relative;
}

.main-banner .left-content form button {
  position: absolute;
  right: 10px;
  top: 10px;
  display: inline-block;
  background-color: #fff;
  font-size: 15px;
  font-weight: 500;
  color: #f87617;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  outline: none;
  border: none;
}

.main-banner .left-content form input {
  width: 470px;
  height: 66px;
  background-color: #02abef;
  border-radius: 33px;
  border: none;
  outline: none;
  padding: 0px 25px;
  color: #fff;
  letter-spacing: 0.25px;
  font-size: 15px;
  font-weight: 300;
}

.main-banner .left-content form input::placeholder {
  color: #fff;
}



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

#about {
  /*margin-top: 120px;*/
}

.about-us {
  /**background-image: url(../images/about-bg.png);*/
  background-image: url(../images/my-images/jharx_bg-1.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 140px 0px 120px 0px;
}

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

.about-us .services .item {
  margin-bottom: 30px;
}

.about-us .services .item .icon {
  float: left;
  margin-right: 25px;
}

.about-us .services .item .icon img {
  max-width: 70px;
}

.about-us .services .item h4 {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}

.about-us .services .item p {
  color: #fff;
}


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

.our-services {
  margin-top: 0px;
  /*padding-top: 120px;*/
}

.our-services .left-image {
  margin-right: 45px;
}

.our-services .section-heading h2 {
  margin-right: 100px;
}

.our-services .section-heading p {
  margin-top: 30px;
  margin-bottom: 60px;
}

.our-services .progress-skill-bar {
  margin-bottom: 30px;
  position: relative;
  width: 100%;
}

.our-services .progress-skill-bar span {
  position: absolute;
  top: 0;
  font-size: 18px;
  font-weight: 600;
  color: #02abef;
}

.our-services .first-bar span {
  left: 69%;
}

.our-services .second-bar span {
  left: 81%;
}

.our-services .third-bar span {
  left: 88%;
}

.our-services .progress-skill-bar h4 {
  font-size: 18px;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 14px;
}

.our-services .progress-skill-bar .full-bar {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background-color: #f7eff1;
  position: relative;
  z-index: 1;
}

.our-services .progress-skill-bar .filled-bar {
  background: rgb(255,77,30);
  background: linear-gradient(105deg, rgba(8, 98, 193, 1) 0%, rgba(255,44,109,1) 100%);
  height: 6px;
  border-radius: 3px;
  margin-bottom: -6px;
  position: relative;
  z-index: 2;
}

.our-services .first-bar .filled-bar {
  width: 71%;
}

.our-services .second-bar .filled-bar {
  width: 83%;
}

.our-services .third-bar .filled-bar {
  width: 90%;
}


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

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

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

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

.our-portfolio .item:hover .hidden-content {
  top: -100px;
  opacity: 1;
  visibility: visible;
}

.our-portfolio .item:hover .showed-content {
  top: 90px;
}

.our-portfolio .hidden-content {
  background: rgba(8, 98, 193, 1);
  background: linear-gradient(105deg, rgba(8, 98, 193, 1) 0%, rgba(255,44,109,1) 100%);
  padding: 30px;
  border-radius: 20px;
  text-align: center;
  opacity: 0;
  top: 0;
  visibility: hidden;
  position: absolute;
  z-index: 2;
  transition: all 0.5s;
}

.our-portfolio .hidden-content:after {
  width: 20px;
  height: 20px;
  position: absolute;
  background: rgb(255,77,30);
  content: '';
  left: 50%;
  bottom: -8px;
  margin-left: -5px;
  transform: rotate(45deg);
  background: linear-gradient(105deg, rgba(8, 98, 193, 1) 0%, rgba(255,51,78,1) 100%);
  z-index: -1;
}

.our-portfolio .hidden-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
}

.our-portfolio .hidden-content p {
  color: #fff;
}

.our-portfolio .showed-content {
  top: 0px;
  position: relative;
  z-index: 3;
  background-color: #fff;
  text-align: center;
  padding: 50px;
  border-radius: 20px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
  transition: all 0.5s;
}

.our-portfolio .showed-content img {
  max-width: 100px;
}


/* 
---------------------------------------------
Blog
--------------------------------------------- 
*/

.our-blog {
  position: relative;
  margin-top: 80px;
  padding-top: 100px;
}

.our-blog .section-heading h2 {
  margin-right: 180px;
}

.our-blog .top-dec {
  text-align: right;
  margin-top: -80px;
}

.our-blog .top-dec img {
  max-width: 270px;
}

.our-blog .left-image {
  position: relative;
}

.our-blog .left-image img {
  border-radius: 20px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
}

.our-blog .left-image .info {
  position: relative;
}

.our-blog .left-image .info .inner-content {
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  border-radius: 20px;
  margin-right: 75px;
  position: absolute;
  margin-top: -100px;
  padding: 30px;
}
.our-blog .left-image .info .inner-content .wp-block-post-date {
    float: left;
}
.our-blog .right-list .wp-block-post-date {
    float: left;
}

.our-blog .left-image ul li {
  display: inline-block;
  font-size: 15px;
  color: #afafaf;
  font-weight: 300;
  margin-right: 20px;
}

.our-blog .left-image ul li:last-child {
  margin-right: 0px;
}

.our-blog .left-image ul li i {
    color: #ff4d61;
    font-size: 16px;
    margin-right: 8px;
    float: left;
}

.our-blog .left-image h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin: 20px 0px 15px 0px;
}
.our-blog .left-image h4 a {
    color: #2a2a2a;
}

.our-blog .left-image .info .main-blue-button {
  position: absolute;
  bottom: -80px;
  left: 0;
}

.our-blog .right-list {
  margin-left: 30px;
}

.our-blog .right-list ul li {
  display: inline-flex;
  width: 100%;
  margin-bottom: 30px;
}

.our-blog .right-list .left-content {
  margin-right: 45px;
}

.our-blog .right-list .left-content span {
  font-size: 15px;
  color: #afafaf;
  font-weight: 300;
}

.our-blog .right-list .left-content span i {
    color: #ff4d61;
    font-size: 16px;
    margin-right: 8px;
    float: left;
}

.our-blog .right-list .left-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin: 20px 0px 15px 0px;
}

.our-blog .right-list .left-content h4 a {
    color: #2a2a2a;
}
.our-blog .right-list ul li:nth-child(odd) {
    display: none;
}

.our-blog .right-list .right-image img {
  width: 250px;
  border-radius: 20px;
}


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

.contact-us {
  padding: 160px 0px;
  /* background-image: url(../images/contact-bg.png); */
  background-image: url(../images/my-images/jharx_bg-2.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin-bottom: 30px !important;
}

.contact-us .section-heading h2,
.contact-us .section-heading h2 em,
.contact-us .section-heading h2 span {
  color: #fff;
}

.contact-us .section-heading p {
  color: #fff;
  margin-top: 30px;
}

.phone-info {
  margin-top: 40px;
}

.phone-info h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.phone-info h4 span i {
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  background-color: #fff;
  border-radius: 50%;
  color: #ff3b2c;
  font-size: 22px;
  margin-left: 30px;
  margin-right: 15px;
}

.phone-info h4 span a {
  color: #fff;
  font-size: 15px;
  font-weight: 400;
}

div#contact .contact-dec {
  position: absolute;
  right: -166px;
  bottom: 0;
}

div#contact .contact-dec img {
  max-width: 178px;
}

div#contact {
  margin-left: 30px;
  position: relative;
  background-color: #fff;
  padding: 60px 30px;
  border-radius: 20px;
}

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

div#contact input::placeholder {
  color: #2a2a2a;
}

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

div#contact textarea::placeholder {
  color: #2a2a2a;
}

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

div#contact button:hover {
  background-color: #f87617;
}


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

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

footer p a {
  color: #f87617;
}

footer .col-lg-12 {
    z-index: 9999;
}

.main-contents {
    padding: 124px 57px 0;
    
}

main.my-main-contents-box {
    padding-top: 100px;
}
header#defaoutl_page_header .main-nav .nav li:last-child {
    /* visibility: hidden; */
}

/*---footer-site-map----*/
button#myBtn {
    display: none;
    position: fixed !important;
    bottom: 4px;
    right: 8px;
    z-index: 9999;
    border: unset;
    font-size: 18px;
    font-weight: bold;
    width: 30px;
    height: 30px;
    padding: 6px;
    border-radius: 17px;
	background: fixed;
}

.footer_content_box .footer-content a.logo {
    float: left;
    width: 77px;
    height: 44px;
}
footer .footer_content_box {    
    padding: 0;
}
footer .footer_content_box .footer-content * {
    line-height: unset;
    margin: 0;
    font-size: 14px;
}
footer .footer_content_box .footer-content p {
    text-align: justify;
}

footer .footer_content_box .footer-content li {
    
}
footer .footer_content_box .footer-content li a {
    color: inherit;
    position: relative;
    font-size: 15px;
}
footer .footer_content_box .footer-content h4 {
    font-size: 19px;
    margin-bottom: 14px;
    margin-top: 15px;
}
footer .footer_content_box .footer-content li:hover a {
    color: #f87617;
}
footer p a:hover {
    color: #f87617;
}
footer .footer_content_box .footer-content li a::before {
    content: ">";
    font-size: 10px;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 1px;
    left: -10px;
    font-weight: bold;
}
footer .footer_content_box .footer-content ul.ftr_li_style {
    padding-left: 10px;
}

.ftr_social_box {
    text-align: center;
    position: relative;
    margin-top: 25px;
}
ul.ftr_social_icons {
    display: inline-flex;
}
.ftr_social_box ul.ftr_social_icons li {
    margin-right: 5px;
	position: relative;
}
.ftr_social_box ul.ftr_social_icons li img {
    width: 25px;
    height: 25px;
    transition: all 0.3s ease 0s;
}

.left-image.Grow_your_website img {
    width: 480px;
}
.ftr_social_box ul.ftr_social_icons li img:hover {
    transform: scale(1.2);
}
.ftr_jharx_support_box {
    text-align: center;
    position: relative;
    margin-top: 25px;
}
.ftr_jharx_support_box ul {
    display: inline-flex;
}
.ftr_jharx_support_box ul a {
    font-size: 12px;
    padding: 3px;
    color: inherit;
    float: left;
}
.ftr_jharx_support_box ul a:hover {
	color: #f87617;
}
.left-image.Grow_your_website {
    margin-left: -45px !important;
}
footer .footer_content_box .footer-content li.current-menu-item a {
    color: #f87617;
}

/*--sub-menus----*/
.header-area .main-nav ul.nav li{
    position: relative;
}
.header-area .main-nav ul.nav li:hover ul{
    display: block;
}
.header-area .main-nav ul.nav li ul {
    display: none;
    position: absolute;
    left: 7px;
    width: 300px;
}
.header-area .main-nav ul.nav ul li{
    padding: 0 !important;
}
.header-area .main-nav ul.nav li ul.sub_menus a {
    padding: 0 5px !important;
    background-color: unset;
    color: #000 !important;
}
.header-area .main-nav ul.nav li ul.sub_menus a:hover {
    background-color: unset;
    color: #f87617 !important;
}
/*---------pages------------*/
.entry-content {
    margin: unset !important;
    padding: unset !important;
    max-width: unset;
    margin-bottom: 41px !important;
}
.wp-block-columns {
    padding: 0 !important;
    margin: 0 !important;
}

/*---- page about-us----*/

/* Section Border Lines */
.wp-block-group.my-main-contents-box figure.wp-block-image {
    margin-bottom: 21px;
}

/* Headings style */
.wp-block-group.my-main-contents-box h2 {
    position: relative;
    width: auto !important;
    margin: 0 auto 20px;
    display: inline-block;
}
.wp-block-columns.my-sections-styles .wp-block-column p {
    text-align: center !important;
}
.wp-block-group.my-main-contents-box h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #0a3d91;
  margin-top: 8px;
}

/* Columns Card Style */
.wp-block-column {
  padding: 20px;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  transition: all 0.3s ease;
  background: #ffffff;
}

/* Hover Effect */
.wp-block-column:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* Images Styling */
.wp-block-image img {
  border-radius: 10px;
  border: 1px solid #eee;
}

/* Services Icons Center */
.wp-block-column svg {
  display: block;
  margin: 0 auto 10px;
}

/* Achievement Section Highlight */
.wp-block-columns:last-child .wp-block-column {
  border: 1px solid #e0eaff;
  background: #f9fbff;
}

/* CTA Section Overlay Enhancement */
.wp-block-cover__inner-container h2 {
  font-size: 32px;
  font-weight: 700;
}

.wp-block-cover__inner-container p {
  font-size: 18px;
}

/* Founder Section */
.page.page-id-35 .wp-block-group {
    border-top: 1px solid #e5e5e5;
}

/*----Services Page-----*/
.wp-block-column > div {
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  transition: 0.3s;
}
.wp-block-column > div:hover {
  transform: translateY(-8px);
}

/*----portfolio poge-----*/
.wp-block-buttons {
    padding-bottom: 15px;
    box-sizing: border-box;
}

/*---Contact Us page---*/
.wp-block-columns.get_in_touch_box p {
    margin-top: 0;
}
.wp-block-columns.get_in_touch_box .wp-block-heading{
	margin-bottom: 15px;
	position: relative;
}
.wp-block-columns.get_in_touch_box div#contact {
    padding-top: 20px;
    padding-bottom: 20px;
}
.wp-block-columns.get_in_touch_box div#contact .row {
    border: 0px;
    box-shadow: unset;
}
main.my-main-contents-box {
    background: #fafafa;
}
.page-id-65 .wp-block-column > div {
    box-shadow: unset;
}
.wp-block-columns.get_in_touch_box .wp-block-heading:before {
    content: "";
    position: absolute;
    width: 30px;
    height: 3px;
    background-color: gray;
    top: 22px;
}

/*-------BLOG PAGE STYLES----*/
.wp-block-query.blog_post_list_contents .wp-block-post-date {
    font-size: 11px;
}
.wp-block-query.blog_post_list_contents h2.wp-block-post-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 0;
    float: left;
    width: 100% !important;
}
.wp-block-query.blog_post_list_contents h2.wp-block-post-title:after {
	display:none;
}
.wp-block-query.blog_post_list_contents .wp-block-post-excerpt p {
    font-size: 12px;
    line-height: 18px;
}
.wp-block-column.blog_post_list_contents_sidebar li {
    list-style: square;
    margin-left: 21px;
    margin-top: 15px;
}

.wp-block-column.blog_post_list_contents_sidebar li.wp-block-post.category-blog::marker {
    font-size: 17px;
	color: blue;
}
.wp-block-column.blog_post_list_contents_sidebar h2.wp-block-post-title {
    margin-left: -7px;
    padding-top: 2px;
}
.wp-block-column.blog_post_list_contents_sidebar h2.wp-block-heading {
    margin-top: 35px;
}
p.post_tag_name.wp-block-tag-cloud a {
    float: left;
    width: 100%;
    font-size: 14px !important;
    font-weight: bold;
    position: relative;
}
p.post_tag_name.wp-block-tag-cloud a:before {
    content: ".";
    font-size: 34px;
    margin-right: 3px;
    margin-top: -9px;
    float: left;
}
.wp-block-query.blog_post_list_contents {
    border: unset;
    box-shadow: unset;
    background: transparent;
}
.wp-block-query.blog_post_list_contents .wp-block-column {
    margin-top: 50px;
}
p.overlap_inside_popup {
    width: 881px;
    position: absolute;
    bottom: 190px;
    left: 16%;
    background-color: #fff;
    color: #000;
    padding: 17px 0;
    border-radius: 12px;
    text-align: center;
    z-index: 9;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    font-size: 21px;
}
.post-template-single-blog p.overlap_inside_popup {
    bottom: 192px;
}
.page-id-20 p.has-text-align-left.has-large-font-size {
    line-height: 47px !important;
    font-weight: bold;
}
.wp-block-buttons {
    background-color: transparent !important;
}

.page-id-20 .wp-block-query.blog_post_list_contents .wp-block-column a.wp-block-read-more {
    background-color: var(--wp--preset--color--vivid-cyan-blue) !important;
    border-width: 0;
    color: #fff;
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    padding-top: calc(0.667em + 2px);
    padding-right: calc(1.333em + 2px);
    padding-bottom: calc(0.667em + 2px);
    padding-left: calc(1.333em + 2px);
    text-decoration: none;
    text-transform: inherit;
    border-radius: 25px;
}

/*-----single post----*/
main.wp-block-group.my-main-contents-box.my_single_post_page {
    float: left;
    width: 100%;
    margin-bottom: 30px;
}

main.wp-block-group.my-main-contents-box.my_single_post_page figure.alignwide.wp-block-post-featured-image {
    width: 303px;
    float: right;
    border: 1px solid #e0eaff;
    padding: 6px;
    border-radius: 11px;
    margin-left: 14px !important;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

/*-----tag page----*/
.my-single-post-tag .wp-block-query.is-layout-flow.wp-block-query-is-layout-flow {
    margin: 40px 3px !important;
}
h1.alignwide.wp-block-query-title {
    font-size: 0;
}
h1.alignwide.wp-block-query-title span {
    font-size: xx-large;
}
h1.alignwide.wp-block-query-title:before {
    content: "Category: ";
    font-size: 35px;
    margin-top: -6px;
    float: left;
}

/*-----wp dynamic menus----*/
.header-area .main-nav .nav li:last-child a {
    background-color: #02abef;
    color: #fff;
    border-radius: 17px;
}
.header-area .main-nav .nav li.current_page_item a {
    color: #f87617 !important;
}
.header-area .main-nav ul.nav li:nth-last-child(2) {
    display: none;
}
.page-id-22 .header-area .main-nav .nav li.current_page_item a {
    background-color: #f87617 !important;
    color: #fff !important;
}

/*------- PRICING PAGE STYLES ------*/
.page-pricing-wraper {
    padding-bottom: 55px;
    float: left;
    width: 100%;
}

.page-pricing-wraper h1{
  text-align:center;
  font-size:42px;
  background:linear-gradient(90deg,#38bdf8,#22c55e);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.page-pricing-wraper .subtitle{text-align:center;color:#94a3b8;margin:15px 0 50px}

.page-pricing-wraper .pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;
}
.page-pricing-wraper  ul.wp-block-post-template {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;
}

.page-pricing-wraper .card{
  position:relative;
  padding:30px 25px;
  border-radius:20px;
  backdrop-filter:blur(12px);
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 15px 40px rgba(0,0,0,0.6);
  transition:all 0.4s ease;
}
 
.page-pricing-wraper .card.pupular {
    box-shadow: 0 0 20px #22c55e;
}
.page-pricing-wraper  ul.wp-block-post-template li:first-child .card {
    box-shadow: 0 0 20px #22c55e;
}

.page-pricing-wraper .card:hover{
  transform:translateY(-12px) scale(1.03);
  box-shadow:0 25px 60px rgba(56,189,248,0.4);
}

.page-pricing-wraper .card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  padding:1px;
  background:linear-gradient(120deg,#38bdf8,#22c55e,#a855f7);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}

.page-pricing-wraper .card h2{font-size:22px;margin-bottom:10px;}

.page-pricing-wraper .price{
  font-size:30px;
  font-weight:700;
  margin:15px 0;
  color:#38bdf8;
}

.page-pricing-wraper ul{list-style:none;margin-top:10px;}

.page-pricing-wraper ul li{
  padding:8px 0;
  font-size:14px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.page-pricing-wraper .badge{
  position:absolute;
  top:-12px;
  left:20px;
  background:#22c55e;
  padding:5px 12px;
  border-radius:20px;
  font-size:12px;
  font-weight:600;
}

.page-pricing-wraper button {
    margin-top: 20px;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(90deg, #38bdf8, #22c55e);
    color: #000;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    position: relative;
    z-index: 9999;
}
.page-pricing-wraper button a {
    color: #000;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    position: relative;
    z-index: 9999;
}

.page-pricing-wraper button:hover{
  transform:scale(1.05);
  opacity:0.9;
}

.page-pricing-wraper .note,.page-pricing-wraper .suggestion{
  margin-top:60px;
  padding:25px;
  border-radius:15px;
}

.page-pricing-wraper .note{
  background:rgba(245,158,11,0.1);
  border:1px solid #f59e0b;
}

.page-pricing-wraper .suggestion{
  background:rgba(34,197,94,0.1);
  border:1px solid #22c55e;
}

.page-pricing-wraper .footer{
  text-align:center;
  margin-top:60px;
}

.page-pricing-wraper .footer h2{
  font-size:30px;
  margin-bottom:10px;
}

.page-pricing-wraper .footer a{
  display:inline-block;
  margin-top:15px;
  padding:14px 30px;
  background:linear-gradient(90deg,#22c55e,#38bdf8);
  color:#000;
  border-radius:30px;
  text-decoration:none;
  font-weight:600;
  transition:0.3s;
}

.page-pricing-wraper .footer a:hover{transform:scale(1.1)}

.page-pricing-wraper .whatsapp {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #25D366;
    color: #fff;
    padding: 15px 18px;
    border-radius: 50%;
    font-size: 22px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    text-decoration: none;
    z-index: 9999;
}

/*------- END-PRICING PAGE STYLES ------*/

/*----Get A Free Quote Form Box---------*/
div#get_a_free_quote_form_box .contact-dec {
  position: absolute;
  right: -166px;
  bottom: 0;
}
div#get_a_free_quote_form_box .contact-dec img {
  max-width: 178px;
}
div#get_a_free_quote_form_box {
    position: relative;
    background-color: #fff;
    padding: 60px 30px;
    border-radius: 20px;
    margin: 30px auto 0;
    width: 500px;
    min-height: 475px;
    max-height: 590px;
    border: 4px solid #d3cece;
}
div#get_a_free_quote_form_box input {
  width: 100%;
  height: 35px;
  border-radius: 33px;
  background-color: #d1f3ff;
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 0px 20px;
  margin-bottom: 20px;
}
div#get_a_free_quote_form_box input::placeholder {
  color: #2a2a2a;
}
div#get_a_free_quote_form_box textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  max-height: 180px;
  min-height: 140px;
  height: 140px;
  border-radius: 20px;
  background-color: #d1f3ff;
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 15px 20px;
  margin-bottom: 20px;
}
div#get_a_free_quote_form_box textarea::placeholder {
  color: #2a2a2a;
}
div#get_a_free_quote_form_box button {
  display: inline-block;
  background-color: #02abef;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border: none;
  outline: none;
  transition: all .3s;
}
div#get_a_free_quote_form_box button:hover {
  background-color: #f87617;
}
.wp-block-columns.get_in_touch_box div#get_a_free_quote_form_box {
    padding-top: 20px;
    padding-bottom: 20px;
}
.wp-block-columns.get_in_touch_box div#get_a_free_quote_form_box .row {
    border: 0px;
    box-shadow: unset;
}
.wp-block-group.get_form_overlay_out {
    position: fixed;
    width: 100%;
    height: 100%;
    background: transparent;
    top: 0;
    left: 0;
    z-index: 9999;
    transition: inherit;
}
.wp-block-group.get_form_overlay_out div#get_a_free_quote_form_box p {
    margin: 0;
    text-align: left;
}
div#get_a_free_quote_form_box span.close_btn {
    position: absolute;
    top: 7px;
    right: 14px;
    width: 15px;
    height: 15px;
    border-radius: 11px;
    text-align: center;
    line-height: 15px;
    font-weight: bold;
    font-size: 10px;
    cursor: pointer;
    background: red;
    color: #fff;
}
/*----End Get A Free Quote Form Box-----*/