/*

Theme Name: TransPro - Translation Agency WordPress Theme

Author: Themes Bird

Description: transpro brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.

Version: 1.0.3

Requires at least: 4.7

Requires PHP: 5.2.4

Text Domain: transpro

*/



/*====================/====================/

                [ CSS Table ]

/====================/====================*/

/*========/ General

/*========/ Elementor Background Row

/*========/ Background inner section

/*========/ Title Color & Subtitle color

/*========/ Header

/*========/ Button

/*========/ Button BG Color

/*========/ Button BG Color Hover

/*========/ Button Text Color

/*========/ Button Text Color Hover

/*========/ Back to Top

/*========/ Loader

/*========/ Sidebar Comman Details

/*========/ Search no Results   

/*========/ WordPress Core

/*========/ Faq

/*========/ Project

/*========/ Team

/*========/ Services

/*========/ Services Features Item

/*========/ Contact Form

/*========/ Quote Form

/*========/ Team form

/*========/ Project form

/*========/ Services Sidebar

/*========/ Widget Search

/*========/ Pagination

/*========/ Widget

/*========/ Blog Pagination

/*========/ Table

/*========/ RSS

/*========/ Tag Cloud

/*========/ Widget Image

/*========/ Archive

/*========/ Calendar

/*========/ Leave a Reply

/*========/ Comment

/*========/ Blog Post

/*========/ Site Content Gallery

/*========/ Navigation

/*========/ Error-404 Page

/*========/ Gallery

/*========/ Block Calendar

/*========/ Page links

/*========/ Footer

/*====================/====================/

                [ CSS Table ]

/====================/====================*/



:root {

  --jnj-primary-color: #fb6239;

  --jnj-dark-color: #1b1a1a;

  --jnj-light-color: #f7f7f7;

  --jnj-white-color: #ffffff;

  --jnj-body-color: #666666;

  --jnj-title-color: #1b1a1a;

  --jnj-font-family: 'Outfit', sans-serif;

  --jnj-body-font-family: 'Poppins', sans-serif;

}



/*====================/====================/

                   General

/====================/====================*/

a,

a:hover,

a:active,

a:focus {

  text-decoration: none;

  color: inherit;

  outline: none;

}



a {

  color: var(--jnj-dark-color);

}



a:hover {

  color: var(--jnj-primary-color);

}



a {

  -webkit-transition: all .25s ease-in-out;

  transition: all .25s ease-in-out;

}



body {

  overflow: visible;

  overflow-x: hidden;

  font-size: 15px;

  line-height: 26px;

  color: var(--jnj-body-color);

  font-family: var(--jnj-body-font-family);

}



dl,

ol,

ul {

  margin-bottom: 25px;

}



h1 {

  font-size: 46px;

  line-height: 50px;

  font-weight: 700;

  letter-spacing: 0px;

  color: var(--jnj-dark-color);

  font-family: var(--jnj-font-family);

}



h2 {

  font-size: 42px;

  line-height: 46px;

  font-weight: 700;

  letter-spacing: 0px;

  color: var(--jnj-dark-color);

  font-family: var(--jnj-font-family);

}



h3 {

  font-size: 38px;

  line-height: 42px;

  font-weight: 700;

  letter-spacing: 0px;

  color: var(--jnj-dark-color);

  font-family: var(--jnj-font-family);

}



h4 {

  font-size: 34px;

  line-height: 38px;

  font-weight: 700;

  letter-spacing: 0px;

  color: var(--jnj-dark-color);

  font-family: var(--jnj-font-family);

}



h5 {

  font-size: 30px;

  line-height: 34px;

  font-weight: 700;

  letter-spacing: 0px;

  color: var(--jnj-dark-color);

  font-family: var(--jnj-font-family);

}



h6 {

  font-size: 26px;

  line-height: 30px;

  font-weight: 700;

  letter-spacing: 0px;

  color: var(--jnj-dark-color);

  font-family: var(--jnj-font-family);

}



p {

  margin: 0 0 25px;

}



.row .jnj-col-5 {

  -ms-flex: 0 0 20%;

  flex: 0 0 20%;

  max-width: 20%;

}



.elementor-widget:not(:last-child) {

  margin-bottom: 0 !important;

}



img {

  max-width: 100%;

  height: auto;

}



/*====================/====================/

             Elementor Background Row

/====================/====================*/

.elementor-section.elementor-top-section.jnj-primary-color {

  background: var(--jnj-primary-color);

}



.elementor-section.elementor-top-section.jnj-dark-color {

  background: var(--jnj-dark-color);

}



.elementor-section.elementor-top-section.jnj-light-color {

  background: var(--jnj-light-color);

}



.elementor-section.elementor-top-section.jnj-white-color {

  background: var(--jnj-white-color);

}



.elementor-section.elementor-top-section.jnj-transparent-color {

  background: transparent;

}



/*====================/====================/

        Background inner section

/====================/====================*/

.jnj-primary-color.elementor-inner-section {

  background: var(--jnj-primary-color);

}



.jnj-dark-color.elementor-inner-section {

  background: var(--jnj-dark-color);

}



.jnj-light-color.elementor-inner-section {

  background: var(--jnj-light-color);

}



.jnj-white-color.elementor-inner-section {

  background: var(--jnj-white-color);

}



.jnj-transparent-color.elementor-inner-section {

  background: transparent;

}



/*====================/====================/

        Background inner section

/====================/====================*/

.jnj-primary-color.elementor-column>.elementor-element-populated {

  background: var(--jnj-primary-color);

}



.jnj-dark-color.elementor-column>.elementor-element-populated {

  background: var(--jnj-dark-color);

}



.jnj-light-color.elementor-column>.elementor-element-populated {

  background: var(--jnj-light-color);

}



.jnj-white-color.elementor-column>.elementor-element-populated {

  background: var(--jnj-white-color);

}



.jnj-transparent-color.elementor-column>.elementor-element-populated {

  background: transparent;

}



/*====================/====================/

         Title Color & Subtitle color

/====================/====================*/

.jnj-heading-title.primary-color,

.jnj-heading-subtitle.primary-color,

.jnj-heading-item-1 .jnj-heading-content.primary-color {

  color: var(--jnj-primary-color) !important;

}



.jnj-heading-title.dark-color,

.jnj-heading-subtitle.dark-color,

.jnj-heading-item-1 .jnj-heading-content.dark-color {

  color: var(--jnj-dark-color) !important;

}



.jnj-heading-title.white-color,

.jnj-heading-subtitle.white-color,

.jnj-heading-item-1 .jnj-heading-content.white-color {

  color: var(--jnj-white-color) !important;

}





/*====================/====================/

                   Heading

/====================/====================*/

/********** Elementor Heading Title **********/

.elementor-widget-heading .elementor-heading-title {

  font-weight: 700;

  font-family: var(--jnj-font-family) !important;

  color: var(--jnj-title-color);

}



/********** Heading Item 1 **********/

.jnj-heading-item-1 {

  margin-bottom: 40px;

}



.jnj-heading-item-1 .jnj-heading-title {

  font-size: 42px;

  font-weight: 700;

  line-height: 48px;

  margin-bottom: 0;

}



.jnj-heading-item-1 .jnj-heading-subtitle {

  font-size: 15px;

  font-weight: 700;

  line-height: 18px;

  text-transform: uppercase;

  color: var(--jnj-primary-color);

  position: relative;

  display: inline-block;

  margin-bottom: 10px;

}



.jnj-heading-item-1.text-align-left .jnj-heading-subtitle:before{

  position: absolute;

  right: -15px;

  bottom: 3px;

  content: "";

  width: 8px;

  height: 2px;

  background: var(--jnj-primary-color);

}



.jnj-heading-item-1.text-align-center .jnj-heading-subtitle:before {

  position: absolute;

  left: -15px;

  bottom: 3px;

  content: "";

  width: 8px;

  height: 2px;

  background: var(--jnj-primary-color);

}



.jnj-heading-item-1.text-align-center .jnj-heading-subtitle:after {

  position: absolute;

  right: -15px;

  bottom: 3px;

  content: "";

  width: 8px;

  height: 2px;

  background: var(--jnj-primary-color);

}



.jnj-heading-item-1.text-align-right .jnj-heading-subtitle {

  margin-left: 15px;

}



.jnj-heading-item-1.text-align-right .jnj-heading-subtitle:after {

  position: absolute;

  left: -15px;

  bottom: 3px;

  content: "";

  width: 8px;

  height: 2px;

  background: var(--jnj-primary-color);

}



.jnj-heading-item-1 .jnj-heading-content {

  margin-top: 15px;

}



.jnj-primary-color .jnj-heading-item-1.text-align-left .jnj-heading-subtitle:before {

  background: var(--jnj-white-color);

}



.jnj-heading-item-1.text-align-left .jnj-heading-subtitle.white-color:before,

.jnj-heading-item-1.text-align-left .jnj-heading-subtitle.white-color:after,

.jnj-heading-item-1.text-align-center .jnj-heading-subtitle.white-color:before,

.jnj-heading-item-1.text-align-center .jnj-heading-subtitle.white-color:after,

.jnj-heading-item-1.text-align-right .jnj-heading-subtitle.white-color:before,

.jnj-heading-item-1.text-align-right .jnj-heading-subtitle.white-color:after{

  background: var(--jnj-white-color);

}



.jnj-heading-item-1.text-align-left .jnj-heading-subtitle.dark-color:before,

.jnj-heading-item-1.text-align-left .jnj-heading-subtitle.dark-color:after,

.jnj-heading-item-1.text-align-center .jnj-heading-subtitle.dark-color:before,


.jnj-heading-item-1.text-align-center .jnj-heading-subtitle.dark-color:after,

.jnj-heading-item-1.text-align-right .jnj-heading-subtitle.dark-color:before,

.jnj-heading-item-1.text-align-right .jnj-heading-subtitle.dark-color:after{

  background: var(--jnj-dark-color);

}



.jnj-heading-item-1.text-align-left .jnj-heading-subtitle.light-color:before,

.jnj-heading-item-1.text-align-left .jnj-heading-subtitle.light-color:after,

.jnj-heading-item-1.text-align-center .jnj-heading-subtitle.light-color:before,

.jnj-heading-item-1.text-align-center .jnj-heading-subtitle.light-color:after,

.jnj-heading-item-1.text-align-right .jnj-heading-subtitle.light-color:before,

.jnj-heading-item-1.text-align-right .jnj-heading-subtitle.light-color:after{

  background: var(--jnj-light-color);

}



/*====================/====================/

                   Button

/====================/====================*/

.elementor-widget-button .elementor-button {

  padding: 18px 30px;

  font-size: 13px;

  text-transform: uppercase;

  color: var(--jnj-white-color) !important;

  font-weight: 700 !important;

  letter-spacing: 1px;

  line-height: 13px;

  border-radius: 0;

}



/*====================/====================/

              Button BG Color

/====================/====================*/

.elementor-widget-button .jnj-primary-color.elementor-button {

  background-color: var(--jnj-primary-color) !important;

}



.elementor-widget-button .jnj-dark-color.elementor-button {

  background-color: var(--jnj-dark-color) !important;

}



.elementor-widget-button .jnj-tertiary-color.elementor-button {

  background-color: var(--jnj-gray-color) !important;

}



.elementor-widget-button .jnj-dark-color.elementor-button {

  background-color: var(--jnj-title-color) !important;

}



.elementor-widget-button .jnj-white-color.elementor-button {

  background-color: var(--jnj-white-color) !important;

}



/*====================/====================/

             Button BG Color Hover

/====================/====================*/

.elementor-widget-button .primary-btn-hover.elementor-button:hover {

  background-color: var(--jnj-primary-color) !important;

}



.elementor-widget-button .dark-btn-hover.elementor-button:hover {

  background-color: var(--jnj-dark-color) !important;

}



.elementor-widget-button .tertiary-btn-hover.elementor-button:hover {

  background-color: var(--jnj-tertiary-color) !important;

}



.elementor-widget-button .dark-btn-hover.elementor-button:hover {

  background-color: var(--jnj-title-color) !important;

}



.elementor-widget-button .white-btn-hover.elementor-button:hover {

  background-color: var(--jnj-white-color) !important;

}



/*====================/====================/

            Button Text Color

/====================/====================*/

.elementor-widget-button .primary-text-color.elementor-button {

  color: var(--jnj-primary-color) !important;

}



.elementor-widget-button .dark-text-color.elementor-button {

  color: var(--jnj-dark-color) !important;

}



.elementor-widget-button .tertiary-text-color.elementor-button {

  color: var(--jnj-tertiary-color) !important;

}



.elementor-widget-button .dark-text-color.elementor-button {

  color: var(--jnj-title-color) !important;

}



.elementor-widget-button .white-text-color.elementor-button {

  color: var(--jnj-white-color) !important;

}



/*====================/====================/

            Button Text Color Hover

/====================/====================*/

.elementor-widget-button .primary-text-color-hover.elementor-button:hover {

  color: var(--jnj-primary-color) !important;

}



.elementor-widget-button .dark-text-color-hover.elementor-button:hover {

  color: var(--jnj-dark-color) !important;

}



.elementor-widget-button .tertiary-text-color-hover.elementor-button:hover {

  color: var(--jnj-tertiary-color) !important;

}



.elementor-widget-button .dark-text-color-hover.elementor-button:hover {

  color: var(--jnj-title-color) !important;

}



.elementor-widget-button .white-text-color-hover.elementor-button:hover {

  color: var(--jnj-white-color) !important;

}



/*====================/====================/

                 Back to Top

/====================/====================*/

#jnj-scroll-up {

  text-align: center;

  position: fixed;

  bottom: 20px;

  right: 0;

  display: inline-block;

  background-color: var(--jnj-primary-color);

  width: 55px;

  height: 55px;

  line-height: 55px;

  transition: background-color .3s, opacity .5s, visibility .5s;

  opacity: 0;

  visibility: hidden;

  z-index: 999;

}



#jnj-scroll-up i {

  color: var(--jnj-white-color);

}



#jnj-scroll-up:hover {

  cursor: pointer;

  background-color: #333;

}



#jnj-scroll-up:active {

  background-color: #555;

}



#jnj-scroll-up.show {

  opacity: 1;

  visibility: visible;

}



/*====================/====================/

                   Loader

/====================/====================*/

.jnj-loader {

  width: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  position: fixed;

  text-align: center;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: var(--jnj-white-color);

  z-index: 7777;

  font-family: var(--jnj-font-family);



}



.jnj-loader img {

  width: 150px;

  -webkit-animation-name: fadebounce;

  -moz-animation-name: fadebounce;

  -ms-animation-name: fadebounce;

  -o-animation-name: fadebounce;

  animation-name: fadebounce;

  -webkit-animation-duration: 8s;

  -moz-animation-duration: 8s;

  -ms-animation-duration: 8s;

  -o-animation-duration: 8s;

  animation-duration: 8s;

  -webkit-animation-iteration-count: infinite;

  -moz-animation-iteration-count: infinite;

  -ms-animation-iteration-count: infinite;

  -o-animation-iteration-count: infinite;

  animation-iteration-count: infinite;

}



#jnj-head-check {

  display: block;

  opacity: 0;

}



.jnj-loader img {

  -webkit-animation-name: fadebounce;

  -moz-animation-name: fadebounce;

  -ms-animation-name: fadebounce;

  -o-animation-name: fadebounce;

  animation-name: fadebounce;

  -webkit-animation-duration: 8s;

  -moz-animation-duration: 8s;

  -ms-animation-duration: 8s;

  -o-animation-duration: 8s;

  animation-duration: 8s;

  -webkit-animation-iteration-count: infinite;

  -moz-animation-iteration-count: infinite;

  -ms-animation-iteration-count: infinite;

  -o-animation-iteration-count: infinite;

  animation-iteration-count: infinite;

}



@-moz-keyframes fadebounce {

  0% {

    -moz-transform: translateY(0);

    transform: translateY(0);

    opacity: 1

  }



  50% {

    -moz-transform: translateY(40px);

    transform: translateY(40px);

    opacity: 1

  }



  100% {

    -moz-transform: translateY(0);

    transform: translateY(0);

    opacity: 1

  }

}



@-webkit-keyframes fadebounce {

  0% {

    -webkit-transform: translateY(0);

    transform: translateY(0);

    opacity: 1

  }



  50% {

    -webkit-transform: translateY(40px);

    transform: translateY(40px);

    opacity: 1

  }



  100% {

    -webkit-transform: translateY(0);

    transform: translateY(0);

    opacity: 1

  }

}



@-o-keyframes fadebounce {

  0% {

    -o-transform: translateY(0);

    transform: translateY(0);

    opacity: 1

  }



  50% {

    -o-transform: translateY(40px);

    transform: translateY(40px);

    opacity: 1

  }



  100% {

    -o-transform: translateY(0);

    transform: translateY(0);

    opacity: 1

  }

}



@-ms-keyframes fadebounce {

  0% {

    -ms-transform: translateY(0);

    transform: translateY(0);

    opacity: 1

  }



  50% {

    -ms-transform: translateY(40px);

    transform: translateY(40px);

    opacity: 1

  }



  100% {

    -ms-transform: translateY(0);

    transform: translateY(0);

    opacity: 1

  }

}



@keyframes fadebounce {

  0% {

    transform: translateY(0);

    opacity: 1

  }



  50% {

    transform: translateY(40px);

    opacity: 1

  }



  100% {

    transform: translateY(0);

    opacity: 1

  }

}





/*====================/====================/

         Sidebar Comman Details

/====================/====================*/

.archive .site-content .jnj-content-area,

.search-results .site-content .jnj-content-area,

.single-project .site-content .site-main,

.single-services .site-main .jnj-content-service,

.single-post .site-main .jnj-content-area,

.blog .site-main .jnj-content-area,

.single-team .site-main .jnj-content-team {

  margin-top: 100px;

  margin-bottom: 140px;

}



.archive .site-content .jnj-widget-area,

.search-results .site-content .jnj-widget-area,

.single-post .site-main .jnj-widget-area,

.blog .site-main .jnj-widget-area,

.single-team .site-main .jnj-widget-team,

.single-services .site-main .jnj-widget-sercice {

  margin-top: 100px;

  margin-bottom: 120px;

}



/*====================/====================/

              Search no Results

/====================/====================*/

.search-no-results .site-content-contain .site-content {

  padding: 100px 0px;

}



.search-no-results .site-content-contain .site-content .search-form {

  position: relative;

}



.search-no-results .site-content-contain .site-content button {

  position: absolute;

  right: 0px;

}



/*====================/====================/

                   Header

/====================/====================*/

.admin-bar header .jnj-header-fix {

  top: 32px;

}



/********** jnj-sticky **********/

.jnj-header-fix .jnj-site-logo,

.jnj-site-sticky-logo {

  display: none;

}



.jnj-header-fix .jnj-site-sticky-logo {

  display: block;

  display: inline-block;

}



@media (min-width: 1200px) {

  #jnj-mobile-view {

    display: none;

    margin-left: auto;

  }



  .jnj-nav-area li,

  .jnj-nav-area ul {

    list-style: none;

    margin: 0;

    padding: 0;

  }



  .jnj-nav-area a {

    text-decoration: none;

    display: block;

  }



  .jnj-nav-area.navbar-expand-lg {

    padding: 0;

  }

  .jnj-nav-area div>div>ul>li {

    margin: 0 24px;

  }

  .jnj-nav-area div>div>ul>li:first-child {

    margin-left: 0;

  }

  .jnj-nav-area div div ul ul,

  .jnj-nav-area div div ul ul:before {

    background-position: center center;

    background-repeat: repeat;

    background-size: cover;

    background-attachment: scroll;

  }

  .jnj-nav-area ul>li>ul>li>a {

    padding: 12px 0px;

  }

  .jnj-nav-area ul>li>ul li:hover>a {

    color: var(--jnj-primary-color);

  }

  .jnj-nav-area div>div>ul>li>a {

    font-family: var(--jnj-body-font-family);

    font-size: 15px;

    line-height: 27px;

    font-weight: 600;

    letter-spacing: 0;

    text-transform: capitalize;

    font-style: normal;

  }

  .jnj-nav-area ul ul a {

    font-family: var(--jnj-body-font-family);

    font-size: 15px;

    line-height: 24px;

    font-weight: 600;

    letter-spacing: 0;

    text-transform: none;

    font-style: normal;

    color: var(--jnj-title-color);

  }

  .jnj-nav-area>div>div>ul>li,

  .jnj-nav-area>div>div>ul>li>a,

  .jnj-nav-area div>div>ul>li>a {

    z-index: 900;

    transition: all 0.4s ease-in-out;

    -moz-transition: all 0.4s ease-in-out;

    -ms-transition: all 0.4s ease-in-out;

    -o-transition: all 0.4s ease-in-out;

    -webkit-transition: all 0.4s ease-in-out;

  }

  .jnj-nav-area.navbar-expand-lg {

    padding: 0px;

  }

  .jnj-nav-area>div>div>ul>li {

    position: relative;

    float: left;

    vertical-align: middle;

  }

  .jnj-nav-area div div ul ul {

    visibility: hidden;

    position: absolute;

    top: 100%;

    left: 0;

    z-index: 598;

  }

  .jnj-nav-area div div ul ul {

    min-width: 200px;

    opacity: 0;

    visibility: hidden;

    -webkit-transition: all .3s linear 0s;

    transition: all .3s linear 0s;

    width: -webkit-max-content;

    width: -moz-max-content;

    width: max-content;

    -webkit-transform: translateY(30px);

    -ms-transform: translateY(30px);

    transform: translateY(30px);

    transition: .5s;

  }

  .jnj-nav-area div>div>ul>li:hover>ul {

    visibility: visible;

    opacity: 1;

    z-index: 600;

    -webkit-transform: translateY(0);

    -ms-transform: translateY(0);

    transform: translateY(0);

    -webkit-transition: all 300ms ease;

    transition: all 300ms ease;

    -moz-transition: all 300ms ease;

    -webkit-transition: all 500ms ease;

    -ms-transition: all 300ms ease;

    -o-transition: all 300ms ease;

  }

  .jnj-nav-area>div>div>ul ul {

    position: absolute;

    visibility: hidden;

    top: 100%;

    left: 0;

    z-index: 500;

  }

  .jnj-nav-area div div ul ul {

    opacity: 0;

    visibility: hidden;

    position: absolute;

    border-radius: 0px;

    width: 200px;

    z-index: 580;

    left: 0;

    width: -webkit-max-content;

    width: -moz-max-content;

    width: max-content;

    -webkit-transform: translateY(56x);

    -ms-transform: translateY(56px);

    transform: translateY(56px);

    transition: .5s;

  }

  .jnj-nav-area>div>div>ul>li:hover>ul {

    visibility: visible;

    opacity: 1;

    z-index: 900;

    -webkit-transform: translateY(0px);

    -ms-transform: translateY(0px);

    transform: translateY(0px);

    -webkit-transition: all 300ms ease;

    transition: all 300ms ease;

    -moz-transition: all 300ms ease;

    -webkit-transition: all 500ms ease;

    -ms-transition: all 300ms ease;

    -o-transition: all 300ms ease;

    padding-top: 36px;

  }

  .jnj-header-fix .jnj-nav-area>div>div>ul>li:hover>ul {

    padding-top: 26px;

  }

  .jnj-nav-area>div>div>ul ul li {

    float: none;

  }

  .jnj-nav-area div div ul ul li {

    position: relative;

    padding: 0 25px;

    background-color: var(--jnj-white-color);

    border-right: 1px solid #eee;

    border-left: 1px solid #eee

  }

  .jnj-nav-area div div ul ul li:last-child {

    border-bottom: 1px solid #eee;

  }

  .jnj-nav-area div div ul ul li:first-child {

    border-top: 3px solid var(--jnj-primary-color);

  }

  .jnj-nav-area div div ul ul li a {

    -webkit-transition: all .3s linear;

    transition: all .3s linear;

    border-bottom: 1px solid #f2f2f2;

  }

  .jnj-nav-area div div ul ul li:last-child a {

    border-bottom: none;

  }

  .jnj-nav-area ul>li:hover>ul {

    visibility: visible;

    opacity: 1;

    -webkit-transform: translateY(0);

    -ms-transform: translateY(0);

    transform: translateY(0);

    -webkit-transition: all 300ms ease;

    transition: all 300ms ease;

    -moz-transition: all 300ms ease;

    -webkit-transition: all 500ms ease;

    -ms-transition: all 300ms ease;

    -o-transition: all 300ms ease;

  }

  .jnj-nav-area>div>div>ul ul ul {

    top: 0;

    left: 100%;

    width: 200px;

  }

  .jnj-nav-area>div>div>ul li:nth-last-child(-n+1) > ul,

  .jnj-nav-area>div>div>ul li:nth-last-child(-n+2) > ul,

  .jnj-nav-area>div>div>ul li:nth-last-child(-n+3) > ul,

  .jnj-nav-area>div>div>ul li:nth-last-child(-n+4) > ul{

    left: auto;

    right: 0;

  }

  .jnj-nav-area>div>div>ul>li:hover>a,

  .jnj-nav-area>div>div>ul>li.current-menu-parent>a {

    color: var(--jnj-primary-color);

  }

  .jnj-nav-area ul>li>ul>li.current-menu-item>a,

  .jnj-nav-area ul>li>ul li.current_page_item>a,

  .jnj-nav-area>div>div>ul>li:hover>a,

  .jnj-nav-area>div>div>ul>li.current_page_item>a,

  .jnj-nav-area>div>div>ul>li.current-menu-parent>a {

    color: var(--jnj-primary-color) !important;

  }

  .jnj-nav-area ul>li>ul li>a:before {

    content: "";

    display: block;

    position: absolute;

    height: 1px;

    bottom: -1px;

    left: 0;

    right: 0;

    transform: scaleX(0);

    margin-top: -1px;

  }

  .jnj-nav-area ul>li>ul li>a:hover:before {

    transform-origin: left center;

    -webkit-transform-origin: left center;

    -webkit-transform: scale(1, 1);

    -khtml-transform: scale(1, 1);

    -moz-transform: scale(1, 1);

    -ms-transform: scale(1, 1);

    -o-transform: scale(1, 1);

    transform: scale(1, 1);

  }

  .jnj-nav-area ul>li>ul li>a:before {

    content: "";

    position: absolute;

    background-color: var(--jnj-primary-color);

    height: 1px;

    left: 25px;

    right: 25px;

    bottom: 0px;

    margin: auto;

    -webkit-transition: transform 0.5s cubic-bezier(.37, .31, .2, .85);

    -khtml-transition: transform 0.5s cubic-bezier(.37, .31, .2, .85);

    -moz-transition: transform 0.5s cubic-bezier(.37, .31, .2, .85);

    -ms-transition: transform 0.5s cubic-bezier(.37, .31, .2, .85);

    -o-transition: transform 0.5s cubic-bezier(.37, .31, .2, .85);

    transition: transform 0.5s cubic-bezier(.37, .31, .2, .85);

    transform-origin: right center;

    -webkit-transform-origin: right center;

    -webkit-transform: scale(0, 1);

    -khtml-transform: scale(0, 1);

    -moz-transform: scale(0, 1);

    -ms-transform: scale(0, 1);

    -o-transform: scale(0, 1);

    transform: scale(0, 1);

  }

  .jnj-nav-area ul>li>ul li:last-child>a:before {

    content: none;

  }

  .jnj-nav-area ul ul li {

    position: relative;

  }

  .jnj-nav-area #jnj-menu>li:nth-last-child(-n+2)>ul {

    left: auto;

    right: 0;

  }

  .jnj-nav-area #jnj-menu>li:nth-last-child(-n+2)>ul>li>ul {

    left: auto;

    right: 100%;

  }



  /********** jnj-top-header **********/

  .jnj-top-header {

    height: 40px;

    line-height: 39px;

  }

  .jnj-top-header ul {

    margin: 0;

    padding: 0;

    list-style: none;

  }

  .jnj-top-header li {

    position: relative;

    display: inline-flex;

  }

  /********** jnj-header-item-1 **********/

  .jnj-header-item-1 {

    position: relative;

  }

  .jnj-header-item-1 .jnj-menu-wrapper {

    padding: 25px 0px;

    background-color: var(--jnj-white-color);

    -webkit-box-shadow: 0px 0px 30px 0px rgb(0 0 0 / 10%);

    -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);

    box-shadow: 0px 0px 30px 0px rgb(0 0 0 / 10%);

  }

  .jnj-header-item-1 .jnj-site-branding-area {

    margin: 0 150px;

  }

  .jnj-header-item-1 .jnj-menu-wrapper.jnj-header-fix {

    padding: 15px 0px;

  }

  .jnj-header-item-1 .header-container .jnj-nav-area #jnj-menu>li:nth-last-child(-n+3)>ul {

    left: auto;

    right: 0;

  }

  .jnj-header-item-1 .header-container .jnj-nav-area #jnj-menu>li:nth-last-child(-n+3) ul li ul {

    left: auto;

    right: 100%;

  }

  /********** jnj-header-item-2 **********/

  .jnj-header-item-2 .jnj-topbar-wrapper .jnj-header-fix {

    display: none;

  }



  .jnj-header-item-2 .jnj-topbar-wrapper {

    background-color: var(--jnj-dark-color);

  }



  .jnj-header-item-2 .jnj-topbar-wrapper .jnj-header-social {

    position: relative;

  }



  .jnj-header-item-2 .jnj-topbar-wrapper .jnj-header-social:after {

    position: absolute;

    right: 0;

    width: 2000px;

    background: var(--jnj-primary-color);

    content: "";

    height: calc(100% + 0px);

    z-index: 0;

  }



  .jnj-header-item-2 .jnj-topbar-wrapper .jnj-header-social li {

    margin-right: 25px;

  }



  .jnj-header-item-2 .jnj-topbar-left-items .jnj-contact-info {

    margin-left: 25px;

  }



  .jnj-header-item-2 .jnj-topbar-wrapper .jnj-header-social li a {

    font-size: 14px;

    color: var(--jnj-white-color);

    z-index: 9;

  }



  .jnj-header-item-2 .jnj-contact-info li {

    margin-right: 25px;

  }



  .jnj-header-item-2 .jnj-contact-info li:last-child {

    margin-right: 0px;

  }



  .jnj-header-item-2 .jnj-contact-info li a i {

    font-size: 18px;

    color: var(--jnj-primary-color);

    margin-right: 6px;

    font-weight: 500;

    position: relative;

    top: 4px;

  }



  .jnj-header-item-2 .jnj-contact-info li a {

    font-size: 14px;

    line-height: normal;

    font-family: var(--jnj-font-family);

    font-weight: 500;

    color: var(--jnj-white-color);

  }



  .jnj-header-item-2 .jnj-menu-wrapper .jnj-nav-area div>div>ul>li>a {

    color: var(--jnj-dark-color);

  }



  .jnj-header-item-2 .jnj-menu-wrapper .jnj-menu-right-items .jnj-button a {

    font-size: 14px;

    line-height: 25px;

    font-weight: 600;

    padding: 14px 28px;

    background: var(--jnj-primary-color);

    color: var(--jnj-white-color);

    -webkit-transition: all .25s ease-in-out;

    transition: all .25s ease-in-out;

  }



  .jnj-header-item-2 .jnj-menu-wrapper .jnj-menu-right-items .jnj-button a:hover {

    background-color: var(--jnj-dark-color);

    color: var(--jnj-white-color)

  }



  .jnj-header-item-2 .jnj-menu-wrapper .jnj-site-branding-area .header-container {

    margin-left: auto;

  }



  .jnj-header-item-2 .jnj-header-logo .jnj-logo .jnj-site-logo,

  .jnj-header-item-2 .jnj-header-logo .jnj-logo .jnj-site-sticky-logo {

    width: 190px;

  }



  /********** jnj-header-item-2 jnj-sticky **********/

  .jnj-header-item-2 .jnj-menu-wrapper.jnj-header-fix .jnj-nav-area div>div>ul>li>a {

    color: var(--jnj-dark-color);

  }



  .jnj-header-item-2 .jnj-menu-wrapper.jnj-header-fix .jnj-menu-right-items .jnj-button a:hover {

    background-color: var(--jnj-dark-color);

    color: var(--jnj-white-color);

  }



}



@media (max-width: 1200px) {

  #jnj-mobile-view {

    display: block;

  }



  .jnj-header-item-2 {

    position: relative;

  }



  .jnj-nav-area,

  .jnj-header-item-2 .jnj-menu-wrapper .jnj-menu-right-items .jnj-button a,

  .jnj-header-item-2 .jnj-topbar-wrapper {

    display: none !important;

  }

}



/********** jnj-sticky **********/

header .jnj-header-fix {

  position: fixed;

  top: 0px;

  left: 0px;

  width: 100%;

  z-index: 99;

  background: var(--jnj-white-color);

  animation: 800ms ease-in-out 0s normal none 1 running fadeInDown;

  box-shadow: 0 0 10px 3px rgb(0 0 0 / 5%);

  -webkit-transition: all 0.3s ease-out 0s;

  -moz-transition: all 0.3s ease-out 0s;

  -ms-transition: all 0.3s ease-out 0s;

  -o-transition: all 0.3s ease-out 0s;

  transition: all 0.3s ease-out 0s;

  -webkit-box-shadow: 0px 0px 30px 0px rgb(0 0 0 / 10%);

  -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);

  box-shadow: 0px 0px 30px 0px rgb(0 0 0 / 10%);

}



@keyframes jnj-header-fix {

  0% {

    transform: translateY(-50px);

  }



  100% {

    transform: translateY(0px);

  }

}



.jnj-header-item-2 .jnj-menu-wrapper.jnj-header-fix {

  background-color: var(--jnj-white-color);

  padding: 15px 0px;

}



.jnj-header-item-2 .jnj-menu-wrapper {

  background-color: var(--jnj-white-color);

  border-bottom: 1px solid rgb(255 255 255 / 8%);

  border-top: 1px solid rgb(255 255 255 / 8%);

  padding: 25px 0px;

}



.jnj-header-item-2 .jnj-header-fix.jnj-menu-wrapper .jnj-menu-right-items .jnj-search-icon-header button {

  color: var(--jnj-dark-color);

}



.jnj-header-item-2 .jnj-menu-wrapper .jnj-menu-right-items .jnj-search-icon-header button {

  background: transparent;

  padding: 0;

  font-size: 16px;

  padding: 0 25px;

  color: var(--jnj-dark-color);

}



/*====================/====================/

               Header item 2

/====================/====================*/

.jnj-header-item-2 .jnj-header-overlay {

  position: relative;

  width: 100%;

  z-index: 999;

  box-shadow: 0px 6px 15px 0px rgb(0 0 0 / 8%);

}



.jnj-header-logo,

.jnj-site-branding-area {

  flex: 1;

}



/********** Slicknav Menu **********/

#jnj-mobile-view .slicknav_menu {

  background: 0 0;

  padding: 0;

}



#jnj-mobile-view .slicknav_menu .slicknav_btn {

  margin: 0;

  width: auto;

  height: 35px;

  justify-content: center;

  display: flex;

  flex-wrap: wrap;

  align-content: center;

  align-items: center;

  background-color: var(--jnj-white-color);

  padding: 10px;

  box-shadow: 6px 5px 30px 0px rgba(0, 0, 0, 0.12);

}



#jnj-mobile-view .slicknav_menu .slicknav_icon {

  width: 22px;

  height: 17px;

  margin: 0;

}



.slicknav_menu .slicknav_icon .slicknav_icon-bar {

  width: 100%;

  height: 2px;

  background: var(--jnj-title-color);

  box-shadow: none;

}



.slicknav_btn .slicknav_icon-bar+.slicknav_icon-bar {

  margin-top: 0;

}



.slicknav_nav {

  position: absolute;

  left: 0;

  top: 100%;

  z-index: 99;

  background: var(--jnj-white-color);

  width: 100%;

  -webkit-box-shadow: 0 4px 18px rgb(0 0 0 / 10%);

  -moz-box-shadow: 0 4px 18px rgba(0, 0, 0, .1);

  box-shadow: 0 4px 18px rgb(0 0 0 / 10%);

}



.slicknav_nav {

  margin: 0;

  padding: 0;

  max-height: 300px;

  overflow: auto;

}



.slicknav_nav li {

  margin: 0 30px;

  list-style: none;

}



.slicknav_nav li .slicknav_arrow {

  float: right;

  font-size: 1em;

  display: block;

  padding: 0 10px;

  background: #f5f5f5;

}



.header-type-header_builder .slicknav_nav li .slicknav_arrow {

  padding: 0 10px 0 20px;

  margin: 0;

}



.slicknav_nav li>a {

  padding: 10px 0;

  margin: 0;

  font-size: 16px;

  font-weight: 700;

  display: inline-block;

  width: 100%;

  color: var(--jnj-title-color);

  border-bottom: 1px solid #e8e8e8;

  font-family: var(--jnj-font-family)

}



.slicknav_nav li:last-child>a {

  border-bottom: none;

}



.slicknav_nav li>a a {

  color: var(--jnj-title-color);

}



.slicknav_nav li.current-menu-item>a,

.slicknav_nav li.slicknav_open>a,

.slicknav_nav li.slicknav_open>a a {

  color: var(--jnj-title-color);

}



.slicknav_nav li .sub-menu li {

  margin: 0;

}



.slicknav_nav ul {

  margin: 0 0 0 10px;

  padding: 0;

}



.slicknav_nav .slicknav_row:hover {

  -webkit-border-radius: 0;

  -moz-border-radius: 0;

  border-radius: 0;

}



.slicknav_btn .slicknav_icon {

  width: 30px;

  height: 17px;

  position: relative;

  margin: 20px auto;

  -webkit-transform: rotate(0);

  -moz-transform: rotate(0);

  -ms-transform: rotate(0);

  -o-transform: rotate(0);

  transform: rotate(0);

  -webkit-transition: all .5s ease;

  -moz-transition: all .5s ease;

  -ms-transition: all .5s ease;

  -o-transition: all .5s ease;

  transition: all .5s ease;

  cursor: pointer;

}



.slicknav_btn .slicknav_icon span {

  display: block;

  position: absolute;

  height: 2px;

  width: 100%;

  background: var(--jnj-primary-color);

  border-radius: 0;

  opacity: 1;

  left: 0;

  -webkit-transform: rotate(0);

  -moz-transform: rotate(0);

  -ms-transform: rotate(0);

  -o-transform: rotate(0);

  transform: rotate(0);

  -webkit-transition: all .25s ease;

  -moz-transition: all .25s ease;


  -ms-transition: all .25s ease;

  -o-transition: all .25s ease;

  transition: all .25s ease;

}



.slicknav_btn .slicknav_icon span:nth-child(1) {

  top: 1px;

  -webkit-transform-origin: left center;

  -moz-transform-origin: left center;

  -o-transform-origin: left center;

  transform-origin: left center;

}



.slicknav_btn .slicknav_icon span:nth-child(2) {

  top: 8px;

  -webkit-transform-origin: left center;

  -moz-transform-origin: left center;

  -o-transform-origin: left center;

  transform-origin: left center;

}



.slicknav_btn .slicknav_icon span:nth-child(3) {

  top: 15px;

  -webkit-transform-origin: left center;

  -moz-transform-origin: left center;

  -o-transform-origin: left center;

  transform-origin: left center;

}



.slicknav_btn.slicknav_open .slicknav_icon span:nth-child(1) {

  top: 0px;

  left: 3px;

  -webkit-transform: rotate(45deg);

  -moz-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  -o-transform: rotate(45deg);

  transform: rotate(45deg);

}



.slicknav_btn.slicknav_open .slicknav_icon span:nth-child(2) {

  width: 0%;

  opacity: 0;

}



.slicknav_btn.slicknav_open .slicknav_icon span:nth-child(3) {

  top: 15px;

  left: 3px;

  -webkit-transform: rotate(-45deg);

  -moz-transform: rotate(-45deg);

  -ms-transform: rotate(-45deg);

  -o-transform: rotate(-45deg);

  transform: rotate(-45deg);

}



/********** Search Modal **********/

.modal.jnj-seaech-popup {

  background-color: rgba(0, 0, 0, 0.8);

  padding-right: 30px;

  padding-left: 30px;

}



.modal.jnj-seaech-popup .modal-dialog {

  height: 100%;

  max-width: inherit;

  width: 100%;

  margin: 0;

}



.modal.jnj-seaech-popup .modal-dialog .modal-header {

  position: relative;

}



.modal.jnj-seaech-popup .modal-dialog .modal-header button.close {

  position: absolute;

  top: 10px;

  right: 10px;

  padding: 0;

  margin: 0;

  width: 40px;

  height: 40px;

  background-color: var(--jnj-primary-color);

  color: var(--jnj-white-color);

  opacity: inherit;

  outline: none;

}



.modal.jnj-seaech-popup .modal-dialog .modal-header button.close:hover {

  background-color: var(--jnj-dark-color);

}



.modal.jnj-seaech-popup .modal-dialog .modal-content {

  border: none;

  border-radius: 0;

  border: none;

  border-radius: 0;

  position: absolute;

  left: 50%;

  top: 50%;

  -webkit-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

  width: 100%;

  max-width: 560px;

  overflow: hidden;

}



.modal.jnj-seaech-popup .modal-dialog .modal-content .modal-body .search-form {

  position: relative;

}



.modal.jnj-seaech-popup .modal-dialog .modal-content .modal-body .search-submit {

  position: absolute;

  right: 0;

  top: 0;

  box-shadow: none;

  border: none;

  background: var(--jnj-primary-color);

  width: 60px;

  height: 60px;

  color: var(--jnj-white-color);

  outline: none;

  padding: 0;

}



.modal.jnj-seaech-popup .modal-dialog .modal-content .modal-body .search-field {

  margin-bottom: 0;

  height: 60px;

  background-color: var(--jnj-white-color);

  border: none;

}



.modal.jnj-seaech-popup button.close {

  background: var(--jnj-primary-color);

  position: absolute;

  right: 20px;

  width: 40px;

  height: 40px;

  font-size: 28px;

  opacity: inherit;

  color: var(--jnj-white-color);

  top: 20px;

}



.modal.jnj-seaech-popup button.close:hover {

  background: var(--jnj-white-color);

  color: var(--jnj-title-color);

}



.modal.jnj-seaech-popup .modal-body {

  background-color: inherit;

  padding: 0;

}



/********** Sticky Header **********/

header.fix-head {

  background: var(--jnj-white-color);

  box-shadow: 0px 5px 24px 0px rgba(0, 0, 0, 0.05);

  margin: 0 auto !important;

  position: fixed !important;

  padding: 0;

  left: 0;

  right: 0;

  top: 0px;

  width: 100%;

  z-index: 9999;

  opacity: 1;

  visibility: visible;

  -ms-animation-name: fadeInDown;

  -moz-animation-name: fadeInDown;

  -op-animation-name: fadeInDown;

  -webkit-animation-name: fadeInDown;

  animation-name: fadeInDown;

  -ms-animation-duration: 400ms;

  -moz-animation-duration: 400ms;

  -op-animation-duration: 400ms;

  -webkit-animation-duration: 400ms;

  animation-duration: 400ms;

  -ms-animation-timing-function: linear;

  -moz-animation-timing-function: linear;

  -op-animation-timing-function: linear;

  -webkit-animation-timing-function: linear;

  animation-timing-function: linear;

  -ms-animation-iteration-count: 1;

  -moz-animation-iteration-count: 1;

  -op-animation-iteration-count: 1;

  -webkit-animation-iteration-count: 1;

  animation-iteration-count: 1;

}



header.fix-head .navbar .jnj-logo .navbar-brand {

  color: var(--jnj-primary-color);

}



header.fix-head ul.navbar-nav li a:hover {

  color: var(--jnj-dark-color);

}



header.fix-head ul.navbar-nav li:hover a:after {

  color: var(--jnj-dark-color);

}



header.fix-head button.search-submit {

  color: var(--jnj-primary-color);

}



/********** WordPress Core **********/

.alignnone {

  margin: 5px 20px 20px 0;

}



.wp-caption.alignright:after {

  visibility: hidden;

  display: block;

  font-size: 0;

  content: " ";

  clear: both;

  height: 0;

}





.aligncenter,

div.aligncenter {

  display: block;

  margin: 5px auto 5px auto;

}



.alignright {

  float: right;

  margin: 5px 0 20px 20px !important;

}



a img.alignright {

  float: right;

  margin: 5px 0 20px 20px;

}



a img.alignnone {

  margin: 5px 20px 20px 0;

}



a img.alignleft {

  float: left;

  margin: 5px 20px 20px 0;

}



.wp-caption img {

  border: 0 none;

  height: auto;

  margin: 0;

  max-width: 98.5%;

  padding: 0;

  width: auto;

}



.wp-caption .wp-caption-text {

  font-style: italic;

  color: #757575;

  font-size: 16px;

  line-height: 1.6153846154;

  padding-top: .5384615385em;

}



.alignleft {

  float: left;

  margin: 5px 20px 20px 0 !important;

}



a img.aligncenter {

  display: block;

  margin-left: auto;

  margin-right: auto;

}



.wp-caption {

  max-width: 100%;

}



.wp-caption.alignnone {

  margin: 5px 20px 20px 0;

}



.wp-caption.alignleft {

  margin: 5px 20px 20px 0;

}



.wp-caption.alignright {

  margin: 5px 0 20px 20px;

}



/*====================/====================/

                   Faq

/====================/====================*/

body .elementor-element .elementor-widget-accordion .elementor-accordion .elementor-tab-title {

  padding: 25px;

  position: relative;

  overflow: hidden;

  display: flex;

  align-items: center;

}



body .elementor-element .elementor-widget-accordion .elementor-accordion .elementor-tab-title .elementor-accordion-icon {

  width: 40px;

  height: 40px;

  line-height: 40px;

  text-align: center;

  color: var(--jnj-white-color);

  position: relative;

  top: 0;

  background: var(--jnj-primary-color);

  display: inline-table;

}



body .elementor-element .elementor-widget-accordion .elementor-accordion .elementor-tab-title .elementor-accordion-icon span i {

  font-size: 14px;

}



body .elementor-element .elementor-accordion .elementor-tab-title {

  padding: 10px 10px 10px 10px !important;

}



body .elementor-element .elementor-accordion .elementor-accordion-title {

  display: inline-block;

  font-size: 18px;

  font-family: var(--jnj-font-family);

  color: var(--jnj-title-color);

  margin-left: 20px;

  line-height: 28px;

  font-weight: 700;

}



body .elementor-element .elementor-accordion .elementor-accordion-item {

  border: 1px solid #ECECEC;

  margin-bottom: 30px;

}



body .elementor-element .elementor-accordion .elementor-tab-content {

  border-top: 1px solid #ECECEC;

  line-height: 26px;

}



/*====================/====================/

                 Project

/====================/====================*/

.jnj-project-item-1 .jnj-project-button:before,

.jnj-project-item-1 .jnj-project-button {

  -webkit-transition: all 0.5s ease 0s;

  -o-transition: all 0.5s ease 0s;

  transition: all 0.5s ease 0s;

}



.jnj-project-item-1 .jnj-project-area {

  margin-bottom: 30px;

  position: relative;

}



.jnj-project-item-1 .jnj-project-area:before {

  opacity: 1;

  -webkit-transition: .5s;

  transition: .5s;

  position: absolute;

  content: "";

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  background: linear-gradient(0deg, var(--jnj-primary-color) 0%, rgba(184, 130, 252, 0) 65%);

  -webkit-transform: perspective(400px) rotateX(-90deg) scale(.2);

  transform: perspective(400px) rotateX(-90deg) scale(.2);

  -webkit-transform-origin: top;

  transform-origin: top;

  z-index: 1;

}



.jnj-project-item-1 .jnj-project-area:hover:before {

  opacity: 1;

  -webkit-transform: perspective(400px) rotateX(0deg) scale(1);

  transform: perspective(400px) rotateX(0deg) scale(1);

  z-index: 2;

}



.jnj-project-item-1 .jnj-project-area:after {

  opacity: 1;

  -webkit-transition: .5s;

  transition: .5s;

  position: absolute;

  content: "";

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  background: linear-gradient(0deg, #000 0%, rgba(184, 130, 252, 0) 65%);

  -webkit-transform: perspective(400px) rotateX(0deg) scale(1);

  transform: perspective(400px) rotateX(0deg) scale(1);

  -webkit-transform-origin: top;

  transform-origin: top;

  z-index: 1;

}



.jnj-project-item-1 .jnj-project-image {

  position: relative;

  overflow: hidden;

}



.jnj-project-item-1 .jnj-project-image img{

  width: 100%;

}



.jnj-project-item-1 .jnj-project-image .jnj-project-icon {

  position: absolute;

  color: var(--jnj-white-color);

  width: 60px;

  height: 60px;

  line-height: 60px;

  text-align: center;

  z-index: 9;

  left: 50%;

  top: 50%;

  -webkit-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

  font-size: 36px;

}



.jnj-project-item-1 .jnj-project-heading {

  position: absolute;

  left: 30px;

  bottom: 30px;

  z-index: 9;

}



.jnj-project-item-1 .jnj-project-area .jnj-project-button {

  font-size: 24px;

  position: absolute;

  right: 20px;

  bottom: 20px;

  width: 40px;

  height: 40px;

  line-height: 40px;

  text-align: center;

  z-index: 99;

  color: var(--jnj-white-color);

  border: 1px solid var(--jnj-white-color);

  border-radius: 100%;

  -webkit-transform: scale(0);

  transform: scale(0);

  -webkit-transition: all .5s ease;

  transition: all .5s ease;

}



.jnj-project-item-1 .jnj-project-area:hover .jnj-project-button {

  -webkit-transform: scale(1);

  transform: scale(1);

}



.jnj-project-item-1 .jnj-project-subtitle {

  color: var(--jnj-white-color);

  font-size: 14px;

  line-height: 22px;

  font-weight: 500;

  text-transform: uppercase;

  margin-top: 8px;

}



.jnj-project-item-1 .jnj-project-title {

  font-size: 22px;

  line-height: 26px;

  margin-bottom: 0;

  color: var(--jnj-white-color);

}



.jnj-project-item-1 .jnj-project-title a {

  color: var(--jnj-white-color);

}



.jnj-project-item-1 .jnj-project-title:hover {

  color: var(--jnj-white-color);

}





/********** Project Details  **********/

.single-project .jnj-project-image {

  margin-bottom: 60px;

}



.single-project .jnj-project-image {

  overflow: hidden;

  height: 600px;

}



.single-project .jnj-project-image img{

  width: 100%;

}



.jnj-content-project .jnj-project-image img {

  width: 100%;

  height: inherit;

}



.single-project .jnj-project-details ul li:last-child {

  padding: 0;

}



.single-project .jnj-project-details ul li span.title {

  font-weight: 700;

  color: var(--jnj-title-color);

  font-family: var(--jnj-font-family);

  font-size: 18px;

}



.jnj-content-project .jnj-content-info {

  background: var(--jnj-light-color);

  list-style-type: none;

  padding: 0;

  margin: 0;

  display: inline-block;

  width: 100%;

}



.jnj-content-project .jnj-content-info span.title {

  font-size: 20px;

  font-weight: 700;

  line-height: 28px;

  ;

  font-family: var(--jnj-font-family);

  color: var(--jnj-dark-color);

  position: relative;

}



.jnj-content-project .jnj-content-info li {

  width: 25%;

  float: left;

  border-left: 1px solid #e6e6e6;

  padding: 30px 0 30px 25px;

  display: inline-grid;

}



.jnj-content-project .jnj-content-info li:first-child {

  border: none;

}



.jnj-content-project .jnj-content-info span.title:before {

  position: absolute;

  left: -25px;

  top: -4px;

  width: 4px;

  height: 35px;

  content: "";

  background: var(--jnj-primary-color);

}



.jnj-content-project .jnj-project-details .widget ul>li {

  padding: 0px 0px 15px 0;

}



.single-portfolio .jnj-project-detail {

  padding-right: 180px;

  position: relative;

  margin-bottom: 30px;

}



.single-portfolio .jnj-project-detail .jnj-info ul {

  list-style: none;

  margin: 0;

  padding: 30px;

}



.single-portfolio .jnj-project-detail .jnj-image img {

  position: relative;

}



.single-portfolio .jnj-project-detail .jnj-info {

  position: absolute;

  top: 50%;

  right: 0;

  -webkit-transform: translatey(-50%);

  -ms-transform: translateX(-50%);

  transform: translatey(-50%);

  background: var(--jnj-gray-color);

}



.single-portfolio .jnj-project-detail .jnj-info h2 {

  font-size: 26px;

  line-height: 26px;

  position: relative;

  display: block;

  padding: 20px 30px;

  background: var(--jnj-primary-color);

  color: var(--jnj-white-color);

}



.single-portfolio .jnj-project-detail .jnj-info h2:before {

  position: absolute;

  content: "";

  width: 2px;

  height: 50%;

  background-color: var(--jnj-dark-color);

  left: 0;

  top: 20px;

}



.single-portfolio .jnj-project-detail .jnj-info h2:after {

  content: "";

  position: absolute;

  height: 1px;

  width: 100%;

  bottom: 0;

  left: 0;

  background: #e1e5e9;

}



.single-portfolio .jnj-project-detail .jnj-info li {

  margin-bottom: 20px;

}



.single-portfolio .jnj-project-detail .jnj-info li:last-child {

  margin-bottom: 0;

}



.single-portfolio .jnj-project-detail .jnj-info li .title {

  font-family: var(--jnj-font-family);

  color: var(--jnj-title-color);

  font-size: 18px;

  font-weight: 600;

  margin-right: 8px;

}



.single-portfolio .jnj-project-detail .jnj-info li .sub-title {

  color: var(--jnj-title-color);

}



.single-portfolio .site-main .jnj-content-project {

  margin-top: 100px;

}



/*====================/====================/

                    Team

/====================/====================*/

/********** Team Item 1 **********/

.jnj-team-item-1 .jnj-team-area {

  overflow: hidden;

  position: relative;

  margin-bottom: 30px;

}



.jnj-team-item-1 .jnj-team-heading {

  border: 1px solid #f1f1f1;

  padding: 20px;

  background: var(--jnj-white-color);

}



.jnj-team-item-1 .jnj-team-name a:hover {

  color: var(--jnj-primary-color);

}



.jnj-team-item-1 .jnj-team-social-button ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

  position: absolute;

  left: 0;

  top: 10px;

}



.jnj-team-item-1 .jnj-team-social-button ul li a {

  width: 40px;

  height: 40px;

  line-height: 40px;

  background: var(--jnj-primary-color);

  display: inline-block;

  text-align: center;

  color: var(--jnj-white-color);

  position: relative;

  transform: translateX(calc(-100% - 1px));

  transition: transform .2s ease-in-out, all 0.4s;

  font-size: 14px;

}



.jnj-team-item-1 .jnj-team-social-button ul li a:hover {

  color: var(--jnj-dark-color);

}



.jnj-team-item-1 .jnj-team-area .jnj-team-social-button ul li:nth-child(1) a {

  transition-delay: 0.1s;

}



.jnj-team-item-1 .jnj-team-area .jnj-team-social-button ul li:nth-child(2) a {

  transition-delay: 0.12s;

}



.jnj-team-item-1 .jnj-team-area .jnj-team-social-button ul li:nth-child(3) a {

  transition-delay: 0.14s;

}



.jnj-team-item-1 .jnj-team-area .jnj-team-social-button ul li:nth-child(4) a {

  transition-delay: 0.16s;

}



.jnj-team-item-1 .jnj-team-area .jnj-team-social-button ul li:nth-child(5) a {

  transition-delay: 0.18s;

}



.jnj-team-item-1 .jnj-team-area .jnj-team-social-button ul li:nth-child(6) a {

  transition-delay: 0.20s;

}



.jnj-team-item-1 .jnj-team-area:hover .jnj-team-social-button ul li a {

  transform: translateX(0);

  transition: transform .3s ease-in-out, all .4s;

}



.jnj-team-item-1 .jnj-team-area:hover .jnj-team-social-button ul li:nth-child(1) a {

  transition-delay: 0s;

}



.jnj-team-item-1 .jnj-team-area:hover .jnj-team-social-button ul li:nth-child(2) a {

  transition-delay: 0.05s;

}



.jnj-team-item-1 .jnj-team-area:hover .jnj-team-social-button ul li:nth-child(3) a {

  transition-delay: 0.1s

}



.jnj-team-item-1 .jnj-team-area:hover .jnj-team-social-button ul li:nth-child(4) a {

  transition-delay: 0.15s;

}



.jnj-team-item-1 .jnj-team-area:hover .jnj-team-social-button ul li:nth-child(5) a {

  transition-delay: 0.20s;

}



.jnj-team-item-1 .jnj-team-area:hover .jnj-team-social-button ul li:nth-child(6) a {

  transition-delay: 0.25s;

}



.jnj-team-item-1 .jnj-team-name {

  font-size: 22px;

  line-height: 26px;

  margin-bottom: 4px;

}



.jnj-team-item-1 .jnj-team-designation {

  font-weight: 500;

  font-size: 15px;

  color: var(--jnj-primary-color);

}



/********** Team Details **********/

.single-services .content-area .jnj-service-image,

.single-team .content-area .jnj-content-inner {

  margin-bottom: 50px;

}



.single-team .jnj-team-image img {

  width: 100%;

  height: inherit;

  overflow: hidden;

}



.single-team .jnj-team-details .jnj-top-heading .jnj-title {

  font-size: 32px;

  line-height: 42px;

}



.single-team .jnj-team-details .jnj-top-heading .jnj-sub-title {

  font-size: 16px;

  line-height: 16px;

  font-weight: 600;

  margin-top: 8px;

  color: var(--jnj-primary-color);

}



.single-team .jnj-team-details .jnj-content {

  padding-top: 15px;

}



.single-team .jnj-team-details ul {

  list-style-type: none;

}



.single-team .jnj-team-details ul.jnj-detail {

  margin: 25px 0 45px 0;

  padding: 0px;

}



.single-team .jnj-team-details ul.jnj-detail li {

  margin-bottom: 15px;

}



.single-team .jnj-team-details ul.jnj-detail li .title {

  font-family: var(--jnj-font-family);

  color: var(--jnj-title-color);

  font-size: 18px;

}



.single-team .jnj-team-details ul.jnj-detail li .title {

  font-family: var(--jnj-font-family);

  color: var(--jnj-title-color);

  font-size: 18px;

  font-weight: 600;

  margin-right: 8px;

}



.single-team .jnj-team-details ul.jnj-detail li .sub-title {

  color: var(--jnj-title-color);

}



.single-team .jnj-team-details ul.jnj-social {

  margin-top: 20px;

  padding: 0px;

}



.single-team .jnj-team-details ul.jnj-social li {

  display: inline-flex;

  margin-right: 4px;

}



.single-team .jnj-team-details ul.jnj-social li:last-child {

  margin-right: 0;

}



.single-team .jnj-team-details ul.jnj-social li a {

  width: 35px;

  height: 35px;

  line-height: 35px;

  text-align: center;

  color: var(--jnj-white-color);

  background-color: var(--jnj-primary-color);

}



.single-team .jnj-team-details ul.jnj-social li a:hover {

  background-color: var(--jnj-dark-color);

  color: var(--jnj-white-color);

}



.jnj-team-form [type=submit].wpcf7-submit {

  font-size: 15px;

  font-weight: 600;

  padding: 15px 35px;

  background: var(--jnj-primary-color);

  color: var(--jnj-white-color);

  -webkit-transition: all .25s ease-in-out;

  transition: all .25s ease-in-out;

  text-transform: none;

  width: initial;

  letter-spacing: 0;

}



.jnj-team-form [type=submit].wpcf7-submit:hover {

  background: var(--jnj-dark-color);

}



.jnj-team-form input[type=text],

.jnj-team-form input[type="url"],

.jnj-team-form input[type=email],

.jnj-team-form input[type=search],

.jnj-team-form input[type=tel],

.jnj-team-form input[type=number],

.jnj-team-form textarea {

  background-color: var(--jnj-light-color);

  border: none;

  margin-bottom: 20px;

}





/*====================/====================/

                   Services

/====================/====================*/

/********** Services Item 1 **********/

.jnj-service-item-1 .jnj-service-area {

  position: relative;

  margin-right: 10px;

  margin-bottom: 30px;

}



.jnj-service-item-1 .jnj-service-area:before {

  position: absolute;

  left: 0;

  top: 0;

  content: "";

  height: 100%;

  width: 100%;

  border-width: 1px;

  border-color: var(--jnj-primary-color);

  border-style: solid;

  -webkit-transition: all 0.5s ease-in-out;

  transition: all 0.5s ease-in-out;

}



.jnj-service-item-1 .jnj-service-area:hover:before {

  left: 10px;

  top: 10px;

}



.jnj-service-item-1 .jnj-service-area .jnj-service-inner:after {

  position: absolute;

  content: '';

  left: 0;

  right: 0;

  bottom: 0;

  top: 0;

  opacity: 0;

  z-index: -1;

  background-color: var(--jnj-primary-color);

  -webkit-transition: .5s;

  -o-transition: .5s;

  transition: .5s;

  -webkit-transform-origin: top;

  -ms-transform-origin: top;

  transform-origin: top;

  -webkit-transform: perspective(400px) rotateX(-90deg);

  -ms-transform: perspective(400px) rotateX(-90deg);

  transform: perspective(400px) rotateX(-90deg);

}



.jnj-service-item-1 .jnj-service-area:hover .jnj-service-inner:after {

  opacity: 1;

  -webkit-transform: perspective(400px) rotateX(0deg);

  -ms-transform: perspective(400px) rotateX(0deg);

  transform: perspective(400px) rotateX(0deg);

}



.jnj-service-item-1 .jnj-service-inner {

  background: var(--jnj-white-color);

  padding: 40px 20px;

  box-shadow: 0px 0px 4px 0px rgb(0 0 0 / 4%);

  margin-bottom: 10px;

  text-align: center;

  position: relative;

  z-index: 9;

}



.jnj-service-item-1 .jnj-service-icon {

  background: var(--jnj-primary-color);

  color: var(--jnj-white-color);

  width: 70px;

  height: 70px;

  line-height: 70px;

  font-size: 40px;

  display: inline-block;

  margin-bottom: 15px;

}



.jnj-service-item-1 .jnj-service-area:hover .jnj-service-icon {

  background-color: rgb(255 255 255 / 20%);

}



.jnj-service-item-1 .jnj-service-title a {

  font-size: 22px;

  font-weight: 700;

  line-height: 30px;

  margin-top: 25px;

  -webkit-transition: .5s;

  -o-transition: .5s;

  transition: .5s;

}



.jnj-service-item-1 .jnj-service-area:hover .jnj-service-content p,

.jnj-service-item-1 .jnj-service-area:hover .jnj-service-title a {

  color: var(--jnj-white-color);

}



.jnj-service-item-1 .jnj-service-content p {

  font-size: 15px;

  margin-bottom: 0;

  padding: 0 6px;

  line-height: 25px;

  -webkit-transition: .5s;

  -o-transition: .5s;

  transition: .5s;

}



/********** Services Item 2 **********/

.jnj-service-item-2 .jnj-service-inner {

  background: var(--jnj-white-color);

  padding: 30px;

  box-shadow: 0px 5px 20px 0px rgb(0 0 0 / 6%);

  margin: 15px 0;

}



.jnj-service-item-2 .jnj-service-icon {

  background: var(--jnj-light-color);

  color: var(--jnj-primary-color);

  width: 70px;

  height: 70px;

  line-height: 70px;

  font-size: 40px;

  display: inline-block;

  text-align: center;

}



.jnj-service-item-2 .jnj-service-title a {

  font-size: 24px;

  font-weight: 700;

  line-height: 32px;

  margin-left: 20px;

  display: inline-block;

}



.jnj-service-item-2 .jnj-service-content p {

  font-size: 15px;

  margin-bottom: 0;

  line-height: 25px;

  margin-top: 25px;

}



.jnj-service-item-2 .jnj-service-button {

  position: relative;

  color: var(--jnj-dark-color);

  font-family: var(--jnj-font-family);

  font-weight: 700;

  font-size: 14px;

  line-height: 14px;

  margin-top: 20px;

  display: inline-block;

  text-transform: uppercase;

}



.jnj-service-item-2 .jnj-service-button:after {

  position: absolute;

  right: -26px;

  top: 0px;

  content: "\f115";

  font-family: flaticon !important;

  font-size: 16px;

}



.jnj-service-item-2 .jnj-service-button:hover {

  color: var(--jnj-primary-color); 

}



/********** Services Item 3 **********/

.jnj-service-item-3 .jnj-service-area{

  background: var(--jnj-white-color);

  -webkit-box-shadow: 0px 10px 60px 0px rgb(0 0 0 / 7%);

  box-shadow: 0px 10px 60px 0px rgb(0 0 0 / 7%);

  margin-bottom: 30px;

}



.jnj-service-item-3 .jnj-service-area .jnj-service-heading{

    padding: 60px 30px 0 30px;

    position: relative;

}



.jnj-service-item-3 .jnj-service-area .jnj-service-heading .jnj-service-title{

  font-size: 26px;

  line-height: 36px;

}



.jnj-service-item-3 .jnj-service-area .jnj-service-heading i{

  background: var(--jnj-primary-color);

  color: var(--jnj-white-color);

  width: 80px;

  height: 80px;

  line-height: 68px;

  display: inline-block;

  text-align: center;

  font-size: 34px;

  border-radius: 100px;

  position: absolute;

  top: -40px;

  border: 6px solid var(--jnj-white-color);

}



.jnj-service-item-3 .jnj-service-area .jnj-service-content{

  padding: 0 30px 10px 30px;

  border-bottom: 1px solid #EEEEEE;

}



.jnj-service-item-3 .jnj-service-area .jnj-service-button{

  margin: 15px 30px 15px 30px;

  display: inline-block;

  font-size: 14px;

  line-height: 25px;

  font-weight: 600;

  -webkit-transition: all .25s ease-in-out;

  transition: all .25s ease-in-out;

  position: relative;

  text-transform: uppercase;

}



.jnj-service-item-3 .jnj-service-area .jnj-service-button:before{

  position: absolute;

  right: 0;

  top: 14px;

  content: "\f115";

  font-size: 14px;

  line-height: 14px;

  font-family: 'flaticon' !important;

  -webkit-transform: translateX(calc(50% - -40px)) translateY(calc(50% - 22px));

  -ms-transform: translateX(calc(50% - -40px)) translateY(calc(50% - 22px));

  transform: translateX(calc(50% - -15px)) translateY(calc(50% - 16px));

  -webkit-transition: all 0.1s ease 0s;

  -moz-transition: all 0.1s ease 0s;

  -ms-transition: all 0.1s ease 0s;

  -o-transition: all 0.1s ease 0s;

  transition: all 0.1s ease 0s;

}





/********** Service Details **********/

.jnj-service-image {

  overflow: hidden;

}



.jnj-service-image img {

  width: 100%;

  height: inherit;

}



/*====================/====================/

           Services Features Item

/====================/====================*/



/********** jnj-services-features-item-1 **********/

.jnj-services-features-item-1 {

  background: #1d1d1d;

  border: 1px solid #262626;

  overflow: hidden;

}



.jnj-services-features-item-1 .jnj-services-features-top {

  position: relative;

}



.jnj-services-features-item-1 .jnj-services-features-price {

  background: var(--jnj-white-color);

  width: 70px;

  height: 70px;

  line-height: 70px;

  text-align: center;

  color: var(--jnj-dark-color);

  position: absolute;

  right: 40px;

  bottom: 0;

  border-radius: 100%;

}



.jnj-services-features-item-1 .jnj-services-features-price .jnj-currency {

  font-family: var(--jnj-font-family);

  font-size: 18px;

  font-weight: 700;

}



.jnj-services-features-item-1 .jnj-services-features-price .jnj-price {

  font-family: var(--jnj-font-family);

  font-size: 32px;

  font-weight: 700;

}



.jnj-services-features-item-1 .jnj-services-features-title {

  color: var(--jnj-white-color);

  font-size: 24px;

  font-weight: 700;

  line-height: 34px;

  margin-top: 40px;

  margin-left: 40px;

  margin-right: 40px;

}



.jnj-services-features-item-1 .jnj-services-features-content p {

  color: var(--jnj-white-color);

  margin-left: 40px;

  margin-right: 40px;

  line-height: 26px;

}



.jnj-services-features-item-1 .jnj-services-features-list ul {

  list-style-type: none;

  padding: 0;

  margin: 0;

  margin-left: 40px;

  margin-right: 40px;

}



.jnj-services-features-item-1 .jnj-services-features-list ul li {

  color: var(--jnj-white-color);

  font-family: var(--jnj-font-family);

  font-size: 16px;

  font-weight: 600;

  position: relative;

  padding-left: 30px;

  margin: 8px 0;

  display: block;

}



.jnj-services-features-item-1 .jnj-services-features-list ul li:before {

  position: absolute;

  left: 0;

  top: 0;

  content: "\f11b";

  font-family: flaticon !important;

  font-size: 15px;

  color: var(--jnj-primary-color);

}



.jnj-services-features-item-1 .jnj-services-features-button {

  background: var(--jnj-white-color);

  color: var(--jnj-dark-color);

  font-weight: 700;

  font-size: 15px;

  line-height: 15px;

  padding: 12px 17px;

  font-family: var(--jnj-font-family);

  display: inline-block;

  margin: 30px 40px 40px 40px;

}



.jnj-services-features-item-1 .jnj-services-features-button:hover {

  background: var(--jnj-primary-color);

  color: var(--jnj-white-color);

}



/********** jnj-services-features-item-2 **********/

.jnj-services-features-item-2 .jnj-services-features-area {

  padding: 50px 30px;

  border: 1px solid #e2e3e4;

  margin-left: -1px;

  position: relative;

}



.jnj-services-features-item-2 .jnj-services-features-area:before {

  position: absolute;

  left: 0;

  bottom: 0;

  content: "";

  width: 0;

  height: 1px;

  background: var(--jnj-primary-color);

  -webkit-transition: all 0.4s ease 0s;

  -moz-transition: all 0.4s ease 0s;

  -ms-transition: all 0.4s ease 0s;

  -o-transition: all 0.4s ease 0s;

  transition: all 0.4s ease 0s;

}



.jnj-services-features-item-2:hover .jnj-services-features-area:before {

  width: 50%;

}



.jnj-services-features-item-2 .jnj-services-features-area:after {

  position: absolute;

  right: 0;

  bottom: 0;

  content: "";

  width: 0;

  height: 1px;

  background: var(--jnj-primary-color);

  -webkit-transition: all 0.4s ease 0s;

  -moz-transition: all 0.4s ease 0s;

  -ms-transition: all 0.4s ease 0s;

  -o-transition: all 0.4s ease 0s;

  transition: all 0.4s ease 0s;

}



.jnj-services-features-item-2:hover .jnj-services-features-area:after {

  width: 50%;

}



.jnj-services-features-item-2 .jnj-services-features-icon i {

  font-size: 70px;

  line-height: 70px;

  color: var(--jnj-primary-color);

  display: grid;

}



.jnj-services-features-item-2 .jnj-services-features-title {

  font-size: 24px;

  line-height: 32px;

  margin: 25px 0;

}



.jnj-services-features-item-2 .jnj-services-features-list ul {

  list-style-type: none;

  padding: 0;

  margin: 0;

}



.jnj-services-features-item-2 .jnj-services-features-list ul li {

  font-family: var(--jnj-body-font-family);

  font-size: 15px;

  line-height: 24px;

  font-weight: 500;

  position: relative;

  padding-left: 20px;

  margin-bottom: 8px;

  display: block;

}



.jnj-services-features-item-2 .jnj-services-features-list ul li:before {

  position: absolute;

  left: 0;

  top: 9px;

  content: "";

  background-color: var(--jnj-primary-color);

  width: 6px;

  height: 6px;

}



.jnj-services-features-item-2 .jnj-services-features-button {

  font-size: 14px;

  line-height: 14px;

  margin-top: 25px;

  display: inline-block;

  font-family: var(--jnj-font-family);

  font-weight: 700;

  color: var(--jnj-dark-color);

  position: relative;

  text-transform: uppercase;

}



.jnj-services-features-item-2 .jnj-services-features-button:hover {

  color: var(--jnj-primary-color);

}



.jnj-services-features-item-2 .jnj-services-features-button::after {

  position: absolute;

  right: 0;

  top: 9px;

  content: "\f115";

  font-size: 14px;

  line-height: 14px;

  font-family: 'flaticon' !important;

  -webkit-transform: translateX(calc(50% - -40px)) translateY(calc(50% - 22px));

  -ms-transform: translateX(calc(50% - -40px)) translateY(calc(50% - 22px));

  transform: translateX(calc(50% - -15px)) translateY(calc(50% - 16px));

  -webkit-transition: all 0.1s ease 0s;

  -moz-transition: all 0.1s ease 0s;

  -ms-transition: all 0.1s ease 0s;

  -o-transition: all 0.1s ease 0s;

  transition: all 0.1s ease 0s;

}



/*====================/====================/

              Contact Form

/====================/====================*/

.wpcf7 p {

  margin-bottom: 20px;

}



.wpcf7 form label {

  display: block !important;

  margin-bottom: 0px;

}



.wpcf7 form label br {

  display: none;

}



.wpcf7 form textarea {

  height: 100px;

  padding: 15px 20px;

}



.wpcf7 form [type=submit] {

  width: 100%;

  padding: 15px 30px;

  color: var(--jnj-white-color);

  box-shadow: none;

  position: relative;

  display: inline-block;

  text-align: center;

  cursor: pointer;

  border: none;

  background-color: var(--jnj-primary-color);

  transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  -webkit-transition: all 0.3s ease-in-out;

  font-size: 15px;

  line-height: 25px;

  font-weight: 600;

  letter-spacing: inherit;

  margin-bottom: 10px;

}



.wpcf7-spinner,

.wpcf7 .ajax-loader {

  position: absolute;

  right: 0px;

}



.wpcf7 form [type=submit]:hover {

  background-color: var(--jnj-dark-color);

}



input[type=text],

input[type="url"],

input[type=number],

input[type=file],

textarea,

select,

input[type=email],

input[type=search],

input[type=tel] {

  background-color: var(--jnj-light-color);

  border: none;

  color: var(--jnj-body-color);

  padding: 8px 20px;

  line-height: normal;

  font-size: 15px;

  margin-bottom: 20px;

  font-weight: normal;

  transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  -webkit-transition: all 0.3s ease-in-out;

  height: 55px;

  width: 100%;

  box-shadow: none;

  outline: none;

}



input[type=submit],

input[type=text]:focus,

input[type=email]:focus,

input[type=search]:focus,

input[type=tel]:focus,

input[type=number]:focus,

input[type=file]:focus,

textarea:focus,

select:focus {

  border-color: none;

}



textarea {

  height: 150px;

  resize: none;

  padding: 15px;

}



select {

  width: 100%;

  padding: 8px 15px;

  margin-bottom: 25px;

  line-height: normal;

  background-color: var(--jnj-white-color);

}



.wpcf7 form .wpcf7-response-output {

  margin: 0;

}



button,

input[type=reset],

input[type=submit],

input[type=button] {

  font-size: 18px;

  line-height: 24px;

  position: relative;

  border: none;

  background-color: var(--jnj-primary-color);

  transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  -webkit-transition: all 0.3s ease-in-out;

  padding: 14px 25px;

  font-weight: 600;

  cursor: pointer;

  color: var(--jnj-white-color);

  outline: inherit !important

}



.select2-container--default .select2-selection--single {

  background-color: var(--jnj-white-color);

}



/*====================/====================/

               Quote Form

/====================/====================*/

.jnj-quote-form .wpcf7-textarea {

  margin-top: 20px;

  color: var(--jnj-white-color);

  padding-top: 15px;

}



.jnj-quote-form .jnj-language-arrow {

  position: relative;

}



.jnj-quote-form .jnj-language-arrow:before {

  font-family: 'Flaticon';

  position: absolute;

  content: "\f10e";

  right: -8px;

  top: 15px;

  font-size: 10px;

  z-index: 99;

  color: var(--jnj-white-color);

  -webkit-animation: vibrate 0.32s cubic-bezier(.36, .07, .19, .97) infinite;

  animation: vibrate 0.32s cubic-bezier(.36, .07, .19, .97) infinite;

  -webkit-transform: translate3d(0, 0, 0);

  transform: translate3d(0, 0, 0);

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

  -webkit-perspective: 300px;

  perspective: 300px;

  color: var(--jnj-dark-color);

}



@keyframes vibrate {



  0.50%,

  90% {

    -webkit-transform: translate3d(-0.6px, 0, 0);

    transform: translate3d(-0.6px, 0, 0);

  }



  0.50%,

  80% {

    -webkit-transform: translate3d(0.6px, 0, 0);

    transform: translate3d(0.6px, 0, 0);

  }



  30%,

  50%,

  70% {

    -webkit-transform: translate3d(-0.6px, 0, 0);

    transform: translate3d(-0.6px, 0, 0);

  }



  0.50%,

  60% {

    -webkit-transform: translate3d(0.6px, 0, 0);

    transform: translate3d(0.6px, 0, 0);

  }

}



.jnj-quote-form .wpcf7-form-control-wrap {

  position: relative;

}



.jnj-quote-form .wpcf7-form-control-wrap:before {

  position: absolute;

  top: 3px;

  right: 5px;

  content: "";

  width: 12px;

  height: 12px;

  z-index: 99;

  color: var(--jnj-white-color);

  background-color: var(--jnj-dark-color);

}



.jnj-quote-form .select-language:after,

.jnj-quote-form .convert-to-language:after {

  font-family: 'Flaticon';

  position: absolute;

  top: -4px;

  right: 20px;

  content: "\f10e";

  z-index: 99;

  font-size: 8px;

  color: var(--jnj-white-color);

  transform: rotate(90deg);

}



.jnj-quote-form [type=submit].wpcf7-submit {

  font-size: 15px;

  font-weight: 600;

  padding: 14px 25px;

  background: var(--jnj-primary-color);

  color: var(--jnj-white-color);

  -webkit-transition: all .25s ease-in-out;

  transition: all .25s ease-in-out;

  text-transform: none;

  width: initial;

}



.jnj-quote-form [type=submit].wpcf7-submit:hover {

  background: var(--jnj-white-color);

  color: var(--jnj-dark-color);

}



.jnj-quote-form input[type=text],

.jnj-quote-form input[type="url"],

.jnj-quote-form input[type=email],

.jnj-quote-form input[type=search],

.jnj-quote-form input[type=tel],

.jnj-quote-form input[type=number],

.jnj-quote-form textarea,

.jnj-quote-form select {

  border: 1px solid #2d2d2d;

  background-color: var(--jnj-dark-color);

  color: var(--jnj-white-color);

  margin-bottom: 20px;

}



.jnj-quote-form input[type=text]::placeholder,

.jnj-quote-form input[type="url"]::placeholder,

.jnj-quote-form input[type=email]::placeholder,

.jnj-quote-form input[type=search]::placeholder,

.jnj-quote-form input[type=tel]::placeholder,

.jnj-quote-form input[type=number]::placeholder,

.jnj-quote-form textarea::placeholder,

.jnj-quote-form select::placeholder {

  color: var(--jnj-white-color);

  opacity: 1;

}



.jnj-quote-form .custom-file {

  margin-bottom: 15px;

  font-size: 15px;

}



.jnj-quote-form .custom-file .custom-file-label {

  line-height: 50px;

  padding: 0;

  height: 50px;

  padding-left: 20px;

  color: var(--jnj-white-color);

  background-color: var(--jnj-dark-color);

  border: 1px solid #2d2d2d;

  border-radius: 0;

}



.jnj-quote-form-02 .custom-file .custom-file-label::after,

.jnj-quote-form .custom-file .custom-file-label::after {

  padding: 0px 20px;

  height: 48px;

  line-height: 48px;

  font-weight: 700;

  color: var(--jnj-white-color);

  background-color: var(--jnj-primary-color);

  border-radius: 0;

}



/*==================== jnj-quote-form-02 ====================*/

.jnj-quote-form-second {

  position: relative;

  background: var(--jnj-white-color);

  padding: 40px;

  box-shadow: rgb(0 0 0 / 20%) 0 0 50px 0;

  z-index: 1;

}



.jnj-quote-form-second .jnj-form-title {

  margin-bottom: 20px;

}



.jnj-quote-form-second select,

.jnj-quote-form-second input[type=file],

.jnj-quote-form-second input,

.jnj-quote-form.jnj-quote-form-second .custom-file .custom-file-label {

  border: 1px solid #e5e5e5 !important;

  box-shadow: none;

}



.jnj-quote-form.jnj-quote-form-second input[type=text],

.jnj-quote-form.jnj-quote-form-second input[type="url"],

.jnj-quote-form.jnj-quote-form-second input[type=email],

.jnj-quote-form.jnj-quote-form-second input[type=search],

.jnj-quote-form.jnj-quote-form-second input[type=tel],

.jnj-quote-form.jnj-quote-form-second input[type=number],

.jnj-quote-form.jnj-quote-form-second textarea,

.jnj-quote-form.jnj-quote-form-second select {

  border: 1px solid #2d2d2d;

  background-color: transparent;

  color: var(--jnj-dark-color);

  margin-bottom: 20px;

  padding-left: 15px;

}



.jnj-quote-form.jnj-quote-form-second input[type=text]::placeholder,

.jnj-quote-form.jnj-quote-form-second input[type="url"]::placeholder,

.jnj-quote-form.jnj-quote-form-second input[type=email]::placeholder,

.jnj-quote-form.jnj-quote-form-second input[type=search]::placeholder,

.jnj-quote-form.jnj-quote-form-second input[type=tel]::placeholder,

.jnj-quote-form.jnj-quote-form-second input[type=number]::placeholder,

.jnj-quote-form.jnj-quote-form-second textarea::placeholder,

.jnj-quote-form.jnj-quote-form-second select::placeholder {

  color: var(--jnj-dark-color);

  opacity: 1;

}



.jnj-quote-form.jnj-quote-form-second .wpcf7-form-control-wrap:before {

  background-color: var(--jnj-white-color);

}



.jnj-quote-form.jnj-quote-form-second .select-language:after,

.jnj-quote-form.jnj-quote-form-second .convert-to-language:after {

  color: var(--jnj-dark-color);

}



.jnj-quote-form.jnj-quote-form-second .custom-file .custom-file-label {

  background-color: transparent;

  color: var(--jnj-dark-color);

}



.jnj-quote-form.jnj-quote-form-second [type=submit].wpcf7-submit {

  background: var(--jnj-dark-color);

  color: var(--jnj-white-color);

}



.jnj-quote-form.jnj-quote-form-second [type=submit].wpcf7-submit:hover {

  background: var(--jnj-primary-color);

}



/*==================== jnj-quote-form-new ====================*/



.jnj-quote-form-new h3 {

  font-size: 30px;

  line-height: 36px;

  margin-bottom: 26px;

}



.jnj-quote-form-new .custom-file {

  margin-bottom: 35px;

  font-size: 15px;

}



.jnj-quote-form-new .custom-file .custom-file-label {

  line-height: 50px;

  padding: 0;

  height: 50px;

  padding-left: 20px;

  border-radius: 0;

  background-color: var(--jnj-light-color);

  border: none;

}



.jnj-quote-form-new .custom-file .custom-file-label::after {

  padding: 0px 20px;

  height: 48px;

  line-height: 48px;

  font-weight: 700;

  color: var(--jnj-white-color);

  background-color: var(--jnj-primary-color);

  border-radius: 0;

}



.jnj-quote-form-new .select-language{

  position: relative;

}



.jnj-quote-form-new .select-language:before{

  position: absolute;

  right: 15px;

  top: 0;

  content: "\f10e";

  font-size: 10px;

  font-family: 'flaticon' !important;

  z-index: 9;

  transform: rotate(90deg);

}



.jnj-quote-form-new .select-language:after{

  position: absolute;

  right: 0px;

  top: 0;

  content: "";

  background-color: var(--jnj-light-color);

  width: 20px;

  height: 20px;

  }



.jnj-quote-form-new .convert-to-language:before{

  position: absolute;

  right: 15px;

  top: 0;

  content: "\f10e";

  font-size: 10px;

  font-family: 'flaticon' !important;

  z-index: 9;

  transform: rotate(90deg);

}



.jnj-quote-form-new .convert-to-language:after{

  position: absolute;

  right: 0px;

  top: 0;

  content: "";

  background-color: var(--jnj-light-color);

  width: 20px;

  height: 20px;

  }



.jnj-quote-form-new select {

  background-color: var(--jnj-light-color);

}



/*====================/====================/

               jnj team form

/====================/====================*/

.jnj-contact-form input[type=text],

.jnj-contact-form input[type="url"],

.jnj-contact-form input[type=email],

.jnj-contact-form input[type=search],

.jnj-contact-form input[type=tel],

.jnj-contact-form input[type=number],

.jnj-contact-form textarea {

  background-color: var(--jnj-white-color);

  border: none;

  margin-bottom: 20px;

}



.jnj-contact-form textarea {

  height: 120px !important;

}



.jnj-contact-form [type=submit].wpcf7-submit {

  font-size: 15px;

  font-weight: 600;

  padding: 16px 40px;

  background: var(--jnj-primary-color);

  color: var(--jnj-white-color);

  -webkit-transition: all .25s ease-in-out;

  transition: all .25s ease-in-out;

  text-transform: none;

  width: initial;

}



.jnj-contact-form [type=submit].wpcf7-submit:hover {

  background: var(--jnj-dark-color);

}



/*====================/====================/

               jnj-project-form

/====================/====================*/

.jnj-project-form input[type=text],

.jnj-project-form input[type="url"],

.jnj-project-form input[type=email],

.jnj-project-form input[type=search],

.jnj-project-form input[type=tel],

.jnj-project-form input[type=number],

.jnj-project-form textarea {

  background-color: var(--jnj-white-color);

  border: none;

  margin-bottom: 20px;

}



.jnj-project-form {

  text-align: center;

}



.jnj-project-form h3 {

  font-size: 28px;

  line-height: 32px;

  margin-bottom: 20px;

}



.post-password-form input[name="post_password"] {

  height: 55px;

  position: relative;

  border: none;

  outline: none;

  background: var(--jnj-light-color);

  padding: 5px 15px;

}



.post-password-form input[type=submit] {

  height: 55px;

  background: var(--jnj-dark-color);

  -webkit-transition: all .25s ease-in-out;

  transition: all .25s ease-in-out;

  margin-left: -4px;

}



.post-password-form input[type=submit]:hover {

  background-color: var(--jnj-primary-color);

}



/***************************************

        Services Sidebar 

***************************************/

.jnj-sidebar .widget.widget_jnj_servicecat.jnj-list-space {

  padding: 30px;

}



.jnj-sidebar .widget.widget_jnj_servicecat h3.widget-title {

  padding: 15px 0;

  text-align: center;

  color: var(--jnj-white-color);

  background-color: var(--jnj-primary-color);

}



.jnj-sidebar .widget.widget_jnj_servicecat h3.widget-title:after,

.jnj-sidebar .widget.widget_jnj_servicecat h3.widget-title:before {

  content: none;

}



.widget_jnj_servicecat ul li.jnj-list,

.widget_jnj_teamname ul li.jnj-list {

  display: block;

  padding: 0;

}



.widget_jnj_servicecat ul>li.jnj-active a,

.widget_jnj_teamname ul>li.jnj-active a {

  color: var(--jnj-primary-color);

  border-color: var(--jnj-primary-color);

  border-right: 4px solid;

}



.widget_jnj_servicecat ul li a,

.widget_jnj_teamname ul li a {

  position: relative;

  display: block;

  font-size: 17px;

  line-height: 20px;

  font-weight: 700;

  padding: 20px;

  -webkit-transition: .5s;

  -o-transition: .5s;

  transition: .5s;

  background-color: var(--jnj-white-color);

  color: var(--jnj-dark-color);

  margin-bottom: 1px;

  border-right: 4px solid;

  border-color: var(--jnj-white-color);

}



.jnj-list-space.widget {

  padding-top: 0;

}



.jnj-list-space h2.widget-title {

  color: var(--jnj-white-color);

  background: var(--jnj-primary-color);

  padding: 15px 20px;

  text-align: center;

}



/*====================/====================/

                 Widget Search

/====================/====================*/

.widget_search {

  margin-bottom: 25px;

}



.widget_search .search-form {

  width: 100%;

  position: relative;

  overflow: hidden;

}



.wp-block-search input,

.widget_search .search-form input {

  width: 100%;

  height: 60px;

  padding-left: 15px;

  border: none;

  margin-bottom: 0;

  background-color: var(--jnj-white-color)

}



.widget_search .search-form button[type="submit"] {

  background: var(--jnj-primary-color);

  color: var(--jnj-white-color);

  font-size: 15px;

  line-height: 0;

  text-align: center;

  cursor: pointer;

  position: absolute;

  right: 0;

  padding: 0;

  border: none;

  outline: none;

  top: 0;

  height: 60px;

  z-index: 1;

  width: 60px;

  border-radius: 0;

}



.widget_search .search-form button:hover[type="submit"] {

  background: var(--jnj-dark-color);

}



.widget-area .widget {

  margin-bottom: 40px;

}



.widget-area .widget:last-child {

  margin-bottom: 0px;

}



.widget-area .widget.enhanced-text-widget {

  background-color: var(--jnj-primary-color);

}



/*====================/====================/

                 Pagination

/====================/====================*/

.pagination {

  display: none;

  clear: both;

  position: relative;

  font-size: 11px;

  line-height: 13px;

  float: right;

}



.pagination span,

.pagination a {

  display: block;

  float: left;

  margin: 2px 2px 2px 0;

  padding: 6px 9px 5px 9px;

  text-decoration: none;

  width: auto;

  color: var(--jnj-white-color);

  background: #555;

  -webkit-transition: all .25s ease-in-out;

  transition: all .25s ease-in-out;

}



.pagination a:hover {

  color: var(--jnj-white-color);

  background: var(--jnj-primary-color);

}



.pagination .current {

  padding: 6px 9px 5px 9px;

  background: var(--jnj-primary-color);

  color: var(--jnj-white-color);

}



/*====================/====================/

                   Widget

/====================/====================*/

.widget {

  padding: 30px;

  margin-bottom: 50px;

  overflow: hidden;

  background-color: var(--jnj-light-color);

}



.widget ul {

  margin: 0;

  padding: 0px;

  overflow: hidden;

}



.widget ul li {

  list-style: none;

}



.widget a {

  -webkit-transition: all .25s ease-in-out;

  transition: all .25s ease-in-out;

  font-size: 16px;

  line-height: 20px;

  font-family: var(--jnj-font-family);

  font-weight: 700;

  color: var(--jnj-title-color);

}



.widget a:hover {

  color: var(--jnj-primary-color);

}



.widget ul a {

  display: inline-block;

}



.widget ul>li ul {

  margin-left: 15px;

  margin-top: 15px;

}



.widget ul>li {

  padding: 0px 0px 25px 0;

}



.widget>ul>li:last-child {

  padding-bottom: 0;

}



.widget ul>li ul>li:last-child {

  border-bottom: 0;

  padding-bottom: 0;

  padding-top: 0;

  margin-bottom: 0;

}



li.recentcomments {

  color: var(--jnj-primary-color);

  font-size: 16px;

  line-height: 20px;

  font-family: var(--jnj-font-family);

  font-weight: 700;

}



.widget h2:before,

.widget .wp-block-search__label:before,

.widget h2.widget-title:before {

  position: absolute;

  content: "";

  width: 4px;

  height: 35px;

  background-color: var(--jnj-primary-color);

  left: 0;

  top: -7px;

}



.widget h2,

.widget .wp-block-search__label,

.widget h2.widget-title {

  position: relative;

  display: block;

  font-size: 22px;

  line-height: 22px;

  font-weight: 700;

  margin-left: -30px;

  margin-right: -30px;

  margin-bottom: 30px;

  color: var(--jnj-title-color);

  padding: 0px 30px 28px 30px;

}



.widget h2:after,

.widget .wp-block-search__label:after,

.widget h2.widget-title:after {

  content: "";

  position: absolute;

  height: 1px;

  width: 100%;

  bottom: 0;

  left: 0;

  background: #e1e5e9;

}



.widget.jnj-padding {

  padding: 0;

}



.wp-block-latest-comments li {

  position: relative;

}



.widget.widget_block .wp-block-latest-comments li:before {

  position: absolute;

  content: "\f075";

  font-family: 'Font Awesome 5 Free';

  top: 5px;

  left: -30px;

  font-size: 14px;

  color: var(--jnj-primary-color);

}



/*====================/====================/

              Blog Pagination

/====================/====================*/

.jnj-blog-pagination {

  margin-top: 20px;

}



.jnj-blog-pagination .page-numbers {

  width: 40px;

  height: 40px;

  line-height: 40px;

  text-align: center;

  background-color: transparent;

  color: var(--jnj-dark-color);

  display: inline-block;

  border: 1px solid var(--jnj-dark-color);

  font-size: 16px;

  font-weight: 700;

  margin-right: 6px;

  margin-top: 6px;

}



.jnj-blog-pagination .page-numbers i {

  font-size: 14px;

}



.jnj-blog-pagination .page-numbers:hover,

.jnj-blog-pagination .page-numbers.current {

  background-color: var(--jnj-primary-color);

  color: var(--jnj-white-color);

  border: 1px solid var(--jnj-primary-color);

}



/*====================/====================/

                   Table

/====================/====================*/

table {

  border-collapse: collapse;

  border-spacing: 0;

  vertical-align: middle;

  width: 100%;

  margin: 0 0 1.75em;

}



table tbody tr,

table thead tr {

  border: 1px solid #e1e5e9;

}



table tbody th,

table tbody td {

  border-color: #e1e5e9 !important;

  border-right: 1px solid;

}



table th {

  border: 0;

  padding: 10px;

  font-weight: bold;

  background: inherit;

  border-right: 1px solid #e1e5e9;

  color: #000;

}



table th a,

table td a {

  color: var(--jnj-primary-color);

  font-weight: bold;

}



table th a:hover {

  color: #000;

}



table td {

  padding: 5px 10px;

}



/*====================/====================/

                 Tag Cloud

/====================/====================*/

.widget_tag_cloud .tagcloud a,

.wp-block-tag-cloud a {

  color: var(--jnj-dark-color);

  margin-right: 10px;

  padding: 8px 20px;

  margin-bottom: 10px;

  background: var(--jnj-white-color);

  display: inline-block;

  font-weight: 600;

  font-size: 15px !important;

  line-height: 24px;

  border: 1px solid #e6e6e6;

}



.widget_tag_cloud .tagcloud a:hover,

.wp-block-tag-cloud a:hover {

  color: var(--jnj-white-color);

  background: var(--jnj-primary-color);

  border-color: var(--jnj-primary-color);

}



.widget_tag_cloud,

.wp-block-tag-cloud {

  margin-bottom: 0;

}



/*====================/====================/

              Widget Image

/====================/====================*/

.widget.widget_media_image img {

  width: 100%;

}



.widget.widget_media_image {

  padding: 0;

}



/*====================/====================/

                    RSS

/====================/====================*/

.rss-date {

  font-size: 15px;

  font-family: var(--jnj-font-family);

  font-weight: 600;

  display: block;

  color: #666;

}



.rss-widget-icon {

  position: relative;

  top: -3px;

}



.widget_rss.widget ul>li {

  padding-bottom: 30px;

}



.widget_rss.widget ul>li:last-child {

  padding-bottom: 0;

}



.widget_rss .rssSummary {

  font-size: 15px;

  opacity: 0.9;

}



/*====================/====================/

               Archive

/====================/====================*/

.widget.widget_categories .cat-item .jnj-count,

ul.wp-block-categories li .jnj-count {

  right: 0;

  top: 0px;

  float: right;

  width: 24px;

  height: 24px;

  line-height: 24px;

  color: var(--jnj-white-color);

  background-color: var(--jnj-primary-color);

  text-align: center;

  display: block;

  font-size: 11px;

  font-weight: 700;

  -webkit-transition: all 0.2s linear;

  transition: all 0.2s linear;

}



.widget_archive ul li,

ul.wp-block-categories li {

  padding-bottom: 0;

  position: relative;

  margin: 15px 0;

  padding: 0;

}



.widget_archive ul>li:last-child,

ul.wp-block-categories>li:last-child {

  border: none;

}



.widget.widget_archive ul>li {

  color: var(--jnj-primary-color);

  font-family: var(--jnj-font-family);

  font-size: 16px;

  line-height: 16px;

  font-weight: 700;

  margin-top: 0;

}



.widget.widget_archive ul>li:last-child {

  margin-bottom: 0;

}



.jnj-footer-one .footer-content .widget-container.widget_archive ul>li a,

.widget.widget_archive ul>li>a {

  margin-right: 15px;

}



.jnj-footer-one .footer-content .col-xl-3 {

  margin-bottom: 30px;

}



/********** Recentpost **********/

.widget_jnj_recentpost li {

  display: -webkit-box !important;

  display: -ms-flexbox !important;

  display: flex !important;

  padding-bottom: 30px;

}



.widget_jnj_recentpost .jnj-post-image img {

  flex-shrink: 0;

  margin-right: 20px;

  width: 70px;

  height: 70px;

  min-width: 70px;

}



.widget_jnj_recentpost .jnj-post-content a {

  font-family: var(--jnj-font-family);

  font-size: 16px;

  line-height: 22px;

  font-weight: 700;

  margin-bottom: 10px;

  display: inline-block;

  color: var(--jnj-dark-color);

}



.widget_jnj_recentpost .jnj-post-content a:hover {

  color: var(--jnj-primary-color);

}



.widget_jnj_recentpost li .jnj-post-date {

  display: block;

  font-size: 12px;

  line-height: 12px;

  font-weight: 600;

  text-transform: uppercase;

  color: var(--jnj-primary-color);

}



.widget_jnj_recentpost li .jnj-post-date i {

  font-size: 12px;

  margin-right: 3px;

}



/*====================/====================/

                  Calendar

/====================/====================*/

.widget_calendar table td#today {

  font-weight: 700;

  color: var(--jnj-primary-color) !important;

  border: 4px solid;

  border-color: var(--jnj-primary-color) !important;

}



.widget_calendar tbody a {

  color: var(--jnj-primary-color);

}



.widget_calendar table {

  border-collapse: separate;

  border-color: #dedede;

  border-spacing: 0;

  border-style: solid;

  border-width: 1px 0 0 1px;

  margin-bottom: 0px;

  width: 100%;

  border-color: rgba(191, 191, 191, 0.32);

}



.widget_calendar table th,

.widget_calendar table td {

  border-bottom: 1px solid #dedede;

  border-right: 1px solid #dedede;

  padding: 7px;

  border-bottom-color: rgba(191, 191, 191, 0.32);

  border-right-color: rgba(191, 191, 191, 0.32);

  text-align: center;

}



.widget_calendar caption {

  padding: 0px;

  margin: 0px;

  margin-bottom: 5px;

  letter-spacing: 0;

  font-size: 16px;

  font-weight: 700;

  caption-side: top;

  color: inherit;

  font-family: var(--jnj-font-family);

  color: var(--jnj-title-color);

  ;

}



.widget_calendar tbody a {

  display: block;

  font-weight: 700;

}



.widget_calendar table th {

  background: var(--jnj-primary-color);

  color: var(--jnj-white-color);

}



.widget_calendar nav.wp-calendar-nav {

  margin-top: 15px;

}



.widget_calendar .wp-calendar-nav-next {

  float: right;

}



iframe {

  max-width: 100%;

}



/*====================/====================/

                Leave a Reply

/====================/====================*/

.comment-notes,

.logged-in-as {

  margin-bottom: 30px;

}



.comment-form p {

  margin-bottom: 20px;

}



.comment-form p.comment-form-comment{

  margin-bottom: 0;

}



.comments-area .comment-respond {

  margin-top: 60px;

}



.comment-respond .comment-form {

  padding: 30px;

  box-shadow: 0px 0px 20px 5px rgb(0 0 0 / 4%);

}



.comment-respond .comment-form .jnj-comment-form {

  display: flex;

  display: -ms-flexbox;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

}



.comments-area .comment-list .edit-link a:hover {

  color: var(--jnj-primary-color);

}



.comments-area .comment-form .comment-form-cookies-consent {

  display: flex;

}



.comments-area .comment-form .comment-form-cookies-consent input {

  margin-top: 6px;

}



.comments-area .comment-form .comment-form-cookies-consent label {

  margin-left: 10px;

}



.comment-respond .jnj-comment-form p.comment-form-url,

.comment-respond .jnj-comment-form p.comment-form-email,

.comment-respond .jnj-comment-form p.comment-form-author {

  -ms-flex: 1 1 30%;

  flex: 1 1 30%;

  width: 33.3333%;

  margin-bottom: 15px;

  margin-left: 15px;

}



.comment-respond .jnj-comment-form p:first-child {

  margin-left: 0;

}



.comments-area .comments-title,

.comment-respond .comment-reply-title {

  font-size: 30px;

  line-height: 36px;

  margin-bottom: 40px;

  margin-top: 0;

  word-break: break-word;

  font-weight: 700;

  color: var(--jnj-title-color);

}



.comment-respond {

  margin-bottom: 30px;

}



.comment-list .comment-respond {

  padding-left: 80px;

}



.content-area.col-md-12 .comment-respond {

  margin-bottom: 0;

}



.comment-respond .comment-form p.form-submit {

  margin: 0;

}



.content-area.col-md-12 .comment-list .comment .comment-respond {

  margin-bottom: 50px;

}



.comment-respond .comment-reply-title small {

  margin-left: 15px;

}



.comment-form input[type=submit] {

  font-size: 15px;

  line-height: 25px;

  font-weight: 600;

  padding: 15px 30px;

  font-family: var(--jnj-body-font-family);

}



.comment-form input[type=submit]:hover {

  background-color: var(--jnj-dark-color);

}



#comments small #cancel-comment-reply-link {

  font-size: 20px;

  font-weight: 600;

  color: var(--jnj-dark-color);

}



#comments small #cancel-comment-reply-link:hover {

  color: var(--jnj-primary-color);

}



/*====================/====================/

                  Comment

/====================/====================*/

.comment-list li.comment .comment-body {

  margin-bottom: 30px;

  display: grid;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  position: relative;

}



.comments-area {

  margin-top: 50px;

}



.comments-area .comment-list .edit-link a.comment-edit-link:hover,

.comments-area .comment-list li.pingback a,

.comments-area .comment-list li.trackback a {

  color: var(--jnj-primary-color);

}



.children,

.comment-list {

  position: relative;

  list-style: none;

  margin: 0;

  padding: 0;

}



.comment-list .jnj-comment {

  margin-bottom: 40px;

}



.comment-list .jnj-comment-descript {

  position: relative;

  margin-left: 80px;

  border: 1px solid #ECECEC;

  border-radius: 0;

  padding: 20px;

  flex: 1;

  padding-bottom: 0;

}



.jnj-comment-descript .jnj-comment-meta {

  margin-bottom: 25px;

}



.comment-list .children {

  padding-left: 50px;

  position: relative;

}



.comments-area .comment-list li.trackback a,

.comments-area .comment-list li.pingback a {

  font-weight: 800;

}



.comments-area .comment-list li.pingback a:hover,

.comments-area .comment-list li.trackback a:hover {

  color: var(--jnj-primary-color);

}



.comments-area .comment-list .edit-link a.comment-edit-link {

  color: var(--jnj-title-color);

}



.comments-area .comment-list .edit-link {

  padding-left: 20px;

  margin-top: 5px;

  display: inline-block;

}



.comments-area .comment-list .edit-link a {

  display: inline-block;

  padding: 6px 20px;

  background-color: #f8f8f8;

  font-size: 12px;

  color: var(--jnj-title-color);

}



.comments-area .comment-list li.pingback,

.comments-area .comment-list li.trackback {

  margin-bottom: 20px;

}



.comment-list a.comment-reply-link {

  display: inline-block;

  background-color: var(--jnj-primary-color);

  color: var(--jnj-white-color);

  padding: 5px 12px;

  font-weight: 600;

  font-size: 13px;

  line-height: 18px;

}



.comment-list .reply {

  position: absolute;

  top: 20px;

  right: 20px;

  font-weight: 700;

  overflow: hidden;

  width: 100px;

  height: 50px;

  text-align: right;

}



.comment-list a.comment-reply-link:after {

  content: "\f3e5";

  font-family: 'Font Awesome 5 Free';

  font-size: 10px;

  padding-left: 6px;

}



.comment-list a.comment-reply-link:hover {

  background-color: var(--jnj-dark-color);

}



.jnj-comment-avatar {

  float: left;

  margin-right: 25px;

  overflow: hidden;

}



.jnj-comment-avatar img {

  width: 60px;

  height: 60px;

  line-height: 60px;

}



.comment-list .jnj-comment-descript span.jnj-author {

  color: var(--jnj-title-color);

  font-size: 20px;

  line-height: 24px;

  display: block;

  margin: 5px 0;

  font-family: var(--jnj-font-family);

  font-weight: 700;

  text-transform: capitalize;

}



.comment-list .jnj-comment-descript span.jnj-date {

  display: block;

  font-size: 13px;

  line-height: 13px;

  font-weight: 700;

  margin-top: 6px;

}



.comment-list .comment-date a {

  color: var(--jnj-title-color);

  font-size: 13px;

}



.comment-list .jnj-comment-descript span.jnj-date a {

  color: var(--jnj-primary-color);

}



/*====================/====================/

                  Blog Post

/====================/====================*/

/********** Blog Item 1 **********/

.jnj-blog-item-1 .jnj-blog-area {

  overflow: hidden;

  margin-bottom: 30px;

  background-color: var(--jnj-white-color);

  border: 1px solid #ECECEC;

  box-shadow: 0px 5px 20px 0px rgb(0 0 0 / 6%);

}



.jnj-blog-item-1 .jnj-blog-content {

  padding: 0 30px 25px 30px;

  ;

  position: relative;

  display: inline-block;

}



.jnj-blog-item-1 .jnj-post-date {

  background: var(--jnj-primary-color);

  color: var(--jnj-white-color);

  font-size: 13px;

  line-height: 16px;

  font-weight: 700;

  display: inline-grid;

  padding: 10px;

  position: absolute;

  right: 20px;

  top: 0;

  text-align: center;

  margin: 0;

  -webkit-transition: all 0.2s ease-in-out;

  transition: all 0.2s ease-in-out;

}



.jnj-blog-item-1 .jnj-blog-area:hover .jnj-post-date {

  padding: 15px 10px 8px 10px;

}



.jnj-blog-item-1 .jnj-date {

  font-size: 18px;

  margin-bottom: 3px;

}



.jnj-blog-item-1 .jnj-blog-top {

  position: relative;

}



.jnj-blog-item-1 .jnj-post-date i {

  margin-right: 3px;

}



.jnj-blog-item-1 .jnj-blog-title {

  font-size: 20px;

  line-height: 26px;

  margin: 15px 0 0 0;

}



.jnj-blog-item-1 .jnj-blog-list {

  list-style-type: none;

  margin: 0 0 15px 0;

  line-height: 14px;

  background-color: var(--jnj-primary-color);

  display: inline-block;

  padding: 10px 14px;

}



.jnj-blog-item-1 .jnj-blog-list li {

  display: inline-block;

  margin-right: 15px;

  font-weight: 500;

  color: var(--jnj-white-color);

}



.jnj-blog-item-1 .jnj-blog-list li:last-child {

  margin-right: 0;

}



.jnj-blog-item-1 .jnj-blog-list li a {

  color: var(--jnj-white-color);

  font-size: 14px;

  text-transform: capitalize;

}



.jnj-blog-item-1 .jnj-blog-list li i {

  color: var(--jnj-white-color);

  margin-right: 5px;

  font-size: 14px;

}



.jnj-blog-item-1 .jnj-blog-title:hover {

  color: var(--jnj-primary-color);

}



.jnj-blog-item-1 .item {

  padding: 0 0 12px 8px;

}



.jnj-blog-item-1 .jnj-content {

  margin-top: 15px;

}



.jnj-blog-item-1 .jnj-content p {

  margin-bottom: 0;

}



.jnj-blog-item-1 .jnj-blog-area .jnj-read-more {

  font-size: 14px;

  line-height: 14px;

  margin-top: 25px;

  display: inline-block;

  font-family: var(--jnj-font-family);

  font-weight: 600;

  color: var(--jnj-dark-color);

  position: relative;

  text-transform: uppercase;

}



.jnj-blog-item-1 .jnj-blog-area .jnj-read-more::after {

  position: absolute;

  right: -24px;

  top: 0px;

  content: "\f115";

  font-size: 14px;

  line-height: 14px;

  font-family: 'flaticon' !important;

  -webkit-transition: all 0.1s ease 0s;

  -moz-transition: all 0.1s ease 0s;

  -ms-transition: all 0.1s ease 0s;

  -o-transition: all 0.1s ease 0s;

  transition: all 0.1s ease 0s;

}



.jnj-blog-item-1 .jnj-blog-area .jnj-read-more:hover {

  color: var(--jnj-primary-color);

}



/********** Blog Standard **********/

.post.sticky .jnj-blog-standard {

  border: 4px solid var(--jnj-primary-color);

}



.jnj-blog-standard {

  overflow: hidden;

  margin-bottom: 30px;

}



.jnj-blog-standard .jnj-blog-body .blog-overlay img {

  width: 100%;

  height: inherit;

}



.jnj-blog-standard .jnj-blog-body {

  position: relative;

}



.jnj-blog-standard .jnj-blog-body .jnj-post-date {

  position: absolute;

  top: 0px;

  right: 30px;

  background-color: var(--jnj-primary-color);

  padding: 10px 12px;

  text-align: center;

  font-weight: 700;

  color: var(--jnj-white-color);

  font-size: 14px;

  line-height: 14px;

  font-family: var(--jnj-font-family);

}



.jnj-blog-standard .jnj-blog-body .blog-overlay .jnj-post-date a {

  font-size: 12px;

  color: var(--jnj-white-color);

  font-family: var(--jnj-body-font-family);

  font-weight: 600;

}



.jnj-blog-standard .jnj-blog-body .jnj-post-content .jnj-post-date a {

  color: var(--jnj-white-color);

}



.jnj-blog-standard .jnj-post-content {

  padding: 30px;

  background-color: var(--jnj-gray-color);

  border: 1px solid #ECECEC;

  display: inline-block;

  width: 100%;

}



.jnj-blog-standard .jnj-post-content .jnj-meta {

  padding-bottom: 15px;

  margin-bottom: 15px;

  border-bottom: 1px solid #ECECEC;

}



.jnj-blog-standard .jnj-post-content .jnj-meta span {

  margin-right: 15px;

  font-family: var(--jnj-body-font-family);

  font-weight: 600;

  font-size: 16px;

  line-height: 16px;

  color: var(--jnj-title-color);

  font-family: var(--jnj-font-family);

}



.jnj-blog-standard .jnj-post-content .jnj-meta span i {

  color: var(--jnj-primary-color);

  margin-right: 5px;

  font-size: 15px;

}



.jnj-blog-standard .jnj-post-content .jnj-meta span a{

  text-transform: capitalize;

}



.jnj-blog-standard .jnj-post-content .jnj-post-title {

  font-size: 28px;

  line-height: 38px;

  font-weight: 700;

  margin-bottom: 10px;

  word-break: break-all;

}



.jnj-blog-standard .jnj-post-content .jnj-post-title a:hover {

  color: var(--jnj-primary-color)

}



.jnj-blog-standard .jnj-post-content .jnj-button {

  margin-top: 20px;

}



.jnj-blog-standard .jnj-post-content .jnj-button a {

  background-color: var(--jnj-primary-color);

  padding: 15px 30px;

  color: var(--jnj-white-color);

  font-weight: 600 !important;

  display: inline-block;

  font-size: 15px;

  line-height: 18px;

}



.jnj-blog-standard .jnj-post-content .jnj-button a:hover {

  background-color: var(--jnj-dark-color);

}



.jnj-blog-standard .jnj-content .content-box {

  position: relative;

  display: block;

  background-size: cover;

  background-repeat: no-repeat;

  background-position: center;

  padding: 90px 40px 90px 40px;

  width: 100%;

  overflow: hidden;

}



.jnj-blog-standard .jnj-content .content-box:before {

  position: absolute;

  content: '';

  left: 0px;

  top: 0px;

  right: 0px;

  width: 100%;

  height: 100%;

  background: var(--jnj-primary-color);

  opacity: 0.9;

}



.jnj-blog-form [type=submit].wpcf7-submit {

  font-size: 18px;

  font-weight: 600;

  padding: 14px 25px;

  font-family: var(--jnj-font-family);

  background: var(--jnj-primary-color);

  color: var(--jnj-white-color);

  -webkit-transition: all .25s ease-in-out;

  transition: all .25s ease-in-out;

  text-transform: none;

  width: initial;

  letter-spacing: 0;

}



.jnj-blog-form [type=submit].wpcf7-submit:hover {

  background: var(--jnj-dark-color);

}



.jnj-blog-form input[type=text],

.jnj-blog-form input[type="url"],

.jnj-blog-form input[type=email],

.jnj-blog-form input[type=search],

.jnj-blog-form input[type=tel],

.jnj-blog-form input[type=number],

.jnj-blog-form textarea {

  background-color: var(--jnj-light-color);

  border: none;

}



/********** Single Blog **********/

blockquote small,

blockquote {

  position: relative;

  background-color: var(--jnj-white-color);

  padding: 25px 57px 25px 37px;

  font-size: 20px;

  line-height: 30px;

  color: var(--jnj-title-color);

  font-weight: 700;

  margin-top: 50px;

  margin-bottom: 50px;

  box-shadow: 0px 0px 30px 0px rgb(0 0 0 / 10%);

}



.single-post .jnj-content p {

  margin-bottom: 20px;

  z-index: 9;

  position: relative;

}



.single-post .jnj-content p:last-child {

  margin-bottom: 0;

}



.jnj-blog-standard blockquote {

  position: relative;

  background-color: var(--jnj-white-color);

  padding: 30px;

  font-size: 20px;

  line-height: 26px;

  color: var(--jnj-title-color);

  font-weight: 700;

  margin-top: 20px;

  margin-bottom: 20px;

  box-shadow: 0px 0px 16px 0px rgb(0 0 0 / 5%);

  margin-right: 20px;

  border-left: inherit;

  font-style: italic;

  font-family: var(--jnj-font-family) !important;

}



.wp-block-quote.has-text-align-right {

  border-right: inherit;

}



.jnj-blog-standard blockquote:before {

  position: absolute;

  left: 10px;

  top: 10px;

  content: "";

  border: 1px solid var(--jnj-primary-color);

  height: 100%;

  width: 100%;

  z-index: -1;

  -webkit-transition: all 0.5s ease-in-out;

  transition: all 0.5s ease-in-out;

}



.jnj-blog-standard blockquote p {

  font-size: 20px !important;

  font-weight: 600;

  letter-spacing: 0px;

  font-style: italic;

  color: var(--jnj-title-color);

  font-family: var(--jnj-font-family);

}



.jnj-blog-standard blockquote:after {

  content: "\f10e";

  font-family: 'Font Awesome 5 Free';

  position: absolute;

  right: 20px;

  bottom: 20px;

  font-size: 70px;

  line-height: 50px;

  text-align: center;

  color: var(--jnj-light-color);

  -webkit-font-smoothing: antialiased;

  font-weight: 900;

  z-index: 2;

}



blockquote cite {

  color: var(--jnj-title-color);

  font-style: normal;

  font-family: var(--jnj-body-font-family);

  font-weight: 700;

  font-size: 18px;

  position: relative;

  display: block;

  z-index: 9;

  margin-top: 25px;

}



.single-format-quote blockquote cite{

  display: block !important;

}

blockquote em {

  font-style: normal;

  font-size: 15px;

  line-height: 24px;

  color: var(--jnj-primary-color);

  font-family: var(--jnj-body-font-family);

  font-weight: 600;

}



.jnj-blog-standard .entry-title a:hover {

  text-decoration: none !important;

}



.jnj-blog-standard-inner {

  padding: 90px 30px 30px 25px;

  position: relative;

}



.jnj-blog-standard .posted-on {

  display: block;

  position: absolute;

  top: 18px;

  left: 10px;

  width: 65px;

  text-align: center;

  color: var(--jnj-white-color);

  text-transform: uppercase;

  padding: 0 0;

}



.jnj-blog-standard .posted-on a {

  color: var(--jnj-white-color);

  font-size: 22px;

  line-height: 22px;

  letter-spacing: 0;

  position: relative;

  z-index: 2;

  font-weight: 700;

}



.jnj-blog-standard .posted-on a span {

  display: block;

  font-size: 14px;

  letter-spacing: 2px;

  line-height: 16px;

  position: relative;

  z-index: 2;

}



.jnj-blog-standard .posted-on:after {

  content: '';

  width: 140px;

  height: 140px;

  left: -65px;

  top: -75px;

  position: absolute;

  z-index: 1;

  background: #f8f8f8;

}



blockquote.wp-block-quote.is-style-large {

  margin-top: 60px;

  margin-bottom: 30px;

  padding: 40px 50px 40px !important;

}



.wp-block-pullquote {

  border-color: var(--jnj-primary-color) !important;

}



.jnj-blog-form input[type=text],

.jnj-blog-form input[type="url"],

.jnj-blog-form input[type=email],

.jnj-blog-form input[type=search],

.jnj-blog-form input[type=tel],

.jnj-blog-form input[type=number],

.jnj-blog-form textarea {

  background-color: var(--jnj-light-color);

  border: none;

}



.jnj-blog-form [type=submit].submit {

  font-size: 18px;

  font-weight: 600;

  padding: 14px 25px;

  font-family: var(--jnj-font-family);

  background: var(--jnj-primary-color);

  color: var(--jnj-white-color);

  -webkit-transition: all .25s ease-in-out;

  transition: all .25s ease-in-out;

  text-transform: none;

  width: initial;

  letter-spacing: 0;

}



.jnj-blog-form [type=submit].submit:hover {

  background: var(--jnj-dark-color);

}



.jnj-blog-standard .jnj-entry-footer {

  background-color: var(--jnj-light-color);

  padding: 30px;

  width: 100%;

  margin-top: 40px;

}



.jnj-blog-standard .jnj-entry-footer .jnj-entry-share span.jnj-entry-title,

.jnj-blog-standard .jnj-entry-footer .jnj-entry-tag span.jnj-entry-title {

  font-size: 20px;

  color: var(--jnj-title-color);

  font-weight: 700;

  margin-right: 10px;

  font-family: var(--jnj-font-family);

}



.jnj-blog-standard .jnj-entry-footer .jnj-entry-tag a {

  color: var(--jnj-dark-color);

  padding: 8px 20px;

  background: var(--jnj-white-color);

  display: inline-block;

  font-weight: 600;

  font-size: 15px !important;

  border: 1px solid #e6e6e6;

  -webkit-transition: all .3s;

  -o-transition: all .3s;

  transition: all .3s;

  margin: 5px 10px 5px 0;

}



.jnj-blog-standard .jnj-entry-footer .jnj-entry-tag a:hover {

  background-color: var(--jnj-primary-color);

  color: var(--jnj-white-color);

}



.jnj-blog-standard .jnj-entry-footer .jnj-entry-share {

  margin-left: auto;

  display: flex;

  align-items: center;

}



.jnj-blog-standard .jnj-entry-share .jnj-social-icon {

  list-style: none;

  display: contents;

  padding: 0;

  margin: 0;

}



.jnj-blog-standard .jnj-entry-footer .jnj-entry-share .jnj-social-icon li a {

  width: 40px;

  height: 40px;

  font-size: 16px;

  color: var(--jnj-primary-color);

  background-color: var(--jnj-white-color);

  display: inline-block;

  line-height: 40px;

  text-align: center;

  margin-right: 5px;

  -webkit-transition: all .3s;

  -o-transition: all .3s;

  transition: all .3s;

  border: 1px solid #e6e6e6;

}



.jnj-blog-standard .jnj-entry-footer .jnj-entry-share .jnj-social-icon li a:hover {

  color: var(--jnj-white-color);

  background-color: var(--jnj-primary-color);

}



.jnj-blog-standard .jnj-entry-footer .jnj-entry-share .jnj-social-icon li:last-child a {

  margin-right: 0;

}



.jnj-blog-standard footer ul.social-share-icons a.icon-link:hover {

  background: #0a172a;

}



.jnj-blog-standard footer .social-icon-share:hover ul.social-share-icons {

  visibility: visible;

  opacity: 1;

  top: 0;

}



.widget_search .search-submitpost.sticky .jnj-blog-standard-inner {

  position: relative;

}



.post.sticky .jnj-blog-standard-inner:after {

  content: "\f08d";

  font-family: 'Font Awesome 5 Free';

  font-size: 25px;

  position: absolute;

  color: var(--jnj-white-color);

  opacity: 1;

  right: -39px;

  top: -39px;

  padding: 0;

  width: 120px;

  line-height: 120px;

  height: 120px;

  text-align: center;

  font-weight: 900;

  padding-right: 25px;

  padding-top: 15px;

}



.archive-description {

  margin-bottom: 30px;

}



body.blog .site-main article:last-of-type .jnj-blog-standard {

  margin-bottom: 0;

}



.jnj-blog-standard .post-thumbnail {

  position: relative;

  display: inline-block;

}



body .has-post-thumbnail .jnj-blog-standard .jnj-blog-standard-inner {

  padding-top: 30px;

}



.jnj-blog-standard-inner .wp-block-button__link {

  color: var(--jnj-white-color) !important;

}



.jnj-blog-standard-inner .wp-block-button.is-style-outline .wp-block-button__link {

  color: #32373c !important;

  border: 2px solid #32373c;

}



.jnj-blog-standard-inner .wp-block-button.is-style-outline .wp-block-button__link:hover {

  border: 2px solid var(--jnj-primary-color);

  color: var(--jnj-primary-color) !important;

  background-color: transparent;

}



/*====================/====================/

                   Gallery

/====================/====================*/

.format-gallery .featured-wrapper {

  position: relative;

}



.format-gallery .lSSlideOuter .lSPager.lSpg>li a {

  height: 13px;

  width: 13px;

  border: 2px solid var(--jnj-white-color);

  background-color: transparent;

}



.site-content .widget.widget_meta ul li a:before,

.site-content .widget.widget_recent_comments ul li:before,

.site-content .widget.widget_recent_entries ul li>a:before,

.site-content .widget.widget_nav_menu ul li>a:before,

.site-content .widget.widget_archive ul li>a:before,

.site-content .widget ul.wp-block-categories li>a:before,

.widget.widget_pages ul li a:before {

  position: absolute;

  content: '';

  width: 6px;

  height: 6px;

  background-color: var(--jnj-primary-color);

  left: 0px;

  top: 8px;

}



.format-gallery .lSSlideOuter .lSPager.lSpg>li:hover a {

  background-color: transparent !important;

}



.format-gallery .lSSlideOuter .lSPager.lSpg>li.active a {

  background-color: var(--jnj-white-color);

}



.format-gallery .lSPager {

  position: absolute;

  bottom: 10px;

  left: 50%;

  -khtml-transform: translateX(-50%) translateY(0%);

  -moz-transform: translateX(-50%) translateY(0%);

  -ms-transform: translateX(-50%) translateY(0%);

  -o-transform: translateX(-50%) translateY(0%);

  transform: translateX(-50%) translateY(0%);

}



.site-content .widget.widget_recent_comments ul li,

.site-content .widget.widget_meta ul li>a,

.site-content .widget.widget_recent_entries ul li>a,

.site-content .widget.widget_archive ul li>a,

.site-content .widgetul ul.wp-block-categories li>a,

.site-content .widget.widget_nav_menu ul li>a,

.site-content .widget.widget_pages ul li>a {

  position: relative;

  padding-left: 20px;

  line-height: normal;

}



/*====================/====================/

                  Navigation

/====================/====================*/

.post-navigation .nav-links {

  justify-content: space-between;

  display: flex;

}



.post-navigation .nav-links .nav-previous,

.post-navigation .nav-links .nav-next {

  width: 50%;

}



.post-navigation .nav-links .nav-previous a,

.post-navigation .nav-links .nav-next a {

  position: relative;

  border: 1px solid #ECECEC;

  padding: 10px;

  -webkit-transition: all .3s;

  -o-transition: all .3s;

  transition: all .3s;

}



.post-navigation .nav-links .nav-previous a:hover,

.post-navigation .nav-links .nav-next a:hover {

  border-color: var(--jnj-primary-color);

}



.post-navigation .nav-links .nav-previous a,

.post-navigation .nav-links .nav-next a {

  display: inline-flex;

  align-items: center;

}



.post-navigation .nav-links .nav-previous {

  margin-right: auto;

  text-align: left;

  float: left;

}



.post-navigation .nav-links .nav-next {

  margin-left: auto;

  text-align: right;

  float: right;

}



.post-navigation .nav-links .nav-previous img {

  width: 80px;

  height: 80px;

  margin-right: 20px;

}



.post-navigation .nav-links .nav-next img {

  width: 80px;

  height: 80px;

  margin-left: 20px;

}



.post-navigation .nav-links .nav-subtitle {

  font-size: 16px;

  color: var(--jnj-primary-color);

  font-weight: 600;

  margin-bottom: 5px;

  display: inline-block;

  font-family: var(--jnj-body-font-family);

}



.post-navigation .nav-links .nav-title {

  display: block;

  font-size: 18px;

  line-height: 22px;

  font-weight: 700;

  font-family: var(--jnj-font-family);

  color: var(--jnj-title-color);

  word-wrap: break-word;

  max-width: 300px;

}



.post-navigation .nav-links {

  margin: 50px 0;

}



.single-post .post-navigation .nav-links .nav-title {

  max-width: 240px;

}



.single-project .post-navigation .nav-links {

  margin-bottom: 0px;

}



.single-project .post-navigation .nav-links .nav-previous,

.single-project .post-navigation .nav-links .nav-next {

  width: unset;

}



.single-project .post-navigation .nav-links .nav-previous a {

  padding-right: 30px;

}



.single-project .post-navigation .nav-links .nav-next a {

  padding-left: 30px;

}



/*====================/====================/

               Error-404 Page

/====================/====================*/

section.error-404 {

  padding: 100px 0 140px 0;

  text-align: center;

}



section.error-404 .page-header img {

  margin-bottom: 80px;

  width: 100%;

}



section.error-404 .search-form {

  position: relative;

  max-width: 600px;

  margin: 0 auto;

  margin-bottom: 0px;

  border: none;

}



section.error-404 .search-form input {

  margin-bottom: 0px;

}



section.error-404 .page-content p {

  font-size: 18px;

  line-height: 24px;

  margin: 20px 0 50px 0;

}



section.error-404 .search-form .search-submit {

  position: absolute;

  right: 0;

  color: var(--jnj-white-color);

  height: 55px;

  width: 55px;

  line-height: 55px;

  padding: 0;

  background: var(--jnj-dark-color);

}



section.error-404 .search-form .search-submit:hover {

  background: var(--jnj-primary-color);

}



section.error-404 .back-to-home a.button {

  font-size: 15px;

  font-weight: 600;

  padding: 0px 35px;

  background: var(--jnj-primary-color);

  color: var(--jnj-white-color);

  -webkit-transition: all .25s ease-in-out;

  transition: all .25s ease-in-out;

  text-transform: none;

  width: initial;

  display: inline-block;

  margin-top: 20px;

  height: 52px;

  line-height: 52px;

}



section.error-404 .back-to-home a:hover.button {

  background: var(--jnj-dark-color);

}



/*====================/====================/

                  Gallery

/====================/====================*/

.gallery {

  margin: 0;

}



.gallery-item {

  text-align: center;

  vertical-align: top;

  width: 100%;

  margin: 0;

  max-width: 33.33%;

  display: inline-block;

  padding: 2px;

}



.gallery-caption {

  color: #666666;

  padding-top: 0.53em;

  display: block;

  font-size: 16px;

  font-style: italic;

  line-height: 26px;

  padding-bottom: 0.53em;

}



.gallery-columns-1 .gallery-item {

  max-width: 100%;

}



.gallery-columns-2 .gallery-item {

  max-width: 50%;

}



.gallery-columns-4 .gallery-item {

  max-width: 25%;

}



.gallery-columns-5 .gallery-item {

  max-width: 20%;

}



.gallery-columns-6 .gallery-item {

  max-width: 16.66%;

}



.gallery-columns-7 .gallery-item {

  max-width: 14.28%;

}



.gallery-columns-6 .gallery-caption,

.gallery-columns-7 .gallery-caption,

.gallery-columns-8 .gallery-caption,

.gallery-columns-9 .gallery-caption {

  display: none;

}



.gallery-columns-8 .gallery-item {

  max-width: 12.5%;

}



.gallery-columns-9 .gallery-item {

  max-width: 11%;

}



.gallery-icon img {

  margin: 0 auto;

}



/*====================/====================/

              Block Calendar 

/====================/====================*/

.wp-block-calendar {

  padding-bottom: 30px;

}



.wp-block-calendar table td#today {

  font-weight: bold;

  color: var(--jnj-primary-color);

  border: 4px solid;

  border-color: var(--jnj-primary-color) !important;

}



.wp-block-calendar table {

  border-collapse: separate;

  border-color: #eee;

  border-spacing: 0;

  border-style: solid;

  border-width: 1px 0px 0px 1px;

  margin-bottom: 0px;

  width: 100%;

}



.wp-block-calendar table th,

.wp-block-calendar table td {

  border: 0;

  border-bottom: 1px solid #eee;

  border-right: 1px solid #eee;

  padding: 10px;

  text-align: center;

}



.wp-block-calendar table th {

  font-weight: bold;

  color: var(--jnj-white-color);

  background: var(--jnj-primary-color);

}



.wp-block-calendar caption {

  padding: 0px;

  margin: 0px;

  margin-bottom: 5px;

  letter-spacing: 0;

  font-size: 16px;

  font-weight: normal;

  caption-side: top;

  color: inherit;

  color: var(--jnj-title-color);

}



.wp-block-calendar tbody a {

  display: block;

  font-weight: 600;

  text-decoration: none;

}



.wp-block-calendar nav {

  text-align: inherit;

  margin-top: 15px;

  font-size: 16px;

  line-height: 20px;

}



.wp-block-calendar .wp-calendar-nav-prev {

  float: left;

}



.wp-block-calendar .wp-calendar-nav-next {

  float: right;

}



.wp-block-calendar .wp-calendar-nav-prev a,

.wp-block-calendar .wp-calendar-nav-next a {

  text-decoration: none;

  font-weight: 500;

}



.wp-block-calendar table td#prev {

  text-align: left;

}



.wp-block-calendar table td#next {

  text-align: right;

}



.wp-block-calendar tfoot a {

  text-decoration: none;

}



/*====================/====================/

                 Page links 

/====================/====================*/

.page-links {

  clear: both;

  font-size: 16px;

  font-weight: 600;

  margin: 20px 0;

  color: var(--jnj-title-color);

  letter-spacing: 0.5px;

}



.page-links a {

  background-color: var(--jnj-primary-color);

  color: var(--jnj-white-color);

}



.page-links a,

.page-links>span {

  text-decoration: none;

  display: inline-block;

  width: 35px;

  height: 35px;

  line-height: 35px;

  text-align: center;

  margin: 2px;

  color: var(--jnj-white-color);

}



.page-links>span,

.page-links a:hover {

  background-color: var(--jnj-dark-color);

}



.page-links>a:first-child,

.page-links>span:first-child {

  margin-left: 15px;

}



.wp-block-button {

  color: var(--jnj-white-color);

}



.wp-block-buttons.aligncenter,

.wp-block-button.aligncenter,

.wp-block-calendar {

  text-align: center;

}



.wp-block-button__link:hover,

.is-style-outline a.wp-block-button__link:hover {

  background-color: var(--jnj-primary-color);

  color: var(--jnj-white-color);

  border-color: var(--jnj-primary-color);

}



.is-style-outline>.wp-block-button__link:not(.has-background),

.wp-block-button__link.is-style-outline:not(.has-background) {

  border: 1px solid var(--jnj-dark-color);

  color: var(--jnj-dark-color) !important;

}



.is-style-outline>.wp-block-button__link:hover:not(.has-background) {

  border: 1px solid var(--jnj-primary-color);

  color: var(--jnj-white-color) !important;

}



.is-style-squared.wp-block-button .wp-block-button__link {

  border-radius: 0;

}



.wp-block-button {

  margin: 50px 0;

}



.wp-block-cover-image-text,

.wp-block-cover-text,

section.wp-block-cover-image h2 {

  color: var(--jnj-white-color) !important;

}



.jnj-blog-standard .wp-block-gallery .blocks-gallery-image,

.jnj-blog-standard .wp-block-gallery .blocks-gallery-item {

  overflow: hidden;

}



.jnj-blog-standard .jnj-blog-body .wp-audio-shortcode:last-child,

.jnj-blog-standard .jnj-blog-body .wp-block-pullquote:last-child,

.jnj-blog-standard .jnj-blog-body .wp-block-media-text:last-child,

.jnj-blog-standard .jnj-blog-body .wp-block-cover.has-background-dim,

.jnj-post-content .wp-caption:last-child {

  margin-bottom: 30px;

}



.jnj-blog-standard .wp-block-gallery .blocks-gallery-image figcaption,

.jnj-blog-standard .wp-block-gallery .blocks-gallery-item figcaption {

  position: absolute;

  font-size: 14px;

  font-weight: 400;

  overflow: hidden;

  padding: 10px 0;

  bottom: -100%;

  text-indent: 10px;

  text-overflow: ellipsis;

  width: 100%;

  background: rgba(255, 255, 255, .8);

  background: var(--jnj-gray-color);

  color: var(--jnj-title-color);

  white-space: nowrap;

  -webkit-transition: all 0.3s ease 0s;

  -moz-transition: all 0.3s ease 0s;

  -ms-transition: all 0.3s ease 0s;

  -o-transition: all 0.3s ease 0s;

  transition: all 0.3s ease 0s;

}



.wp-block-button.alignleft {

  margin-top: 0;

  margin-right: 20px;

}



.comment-list .comment-content>ul,

.comment-list .comment-content>ol {

  margin-bottom: 20px;

}



dl,

ol,

ul {

  margin-bottom: 25px;

}



.jnj-blog-standard .wp-block-gallery .blocks-gallery-image:hover figcaption,

.jnj-blog-standard .wp-block-gallery .blocks-gallery-item:hover figcaption {

  bottom: 0;

}



.jnj-blog-standard .wp-block-gallery .blocks-gallery-image figcaption,

.jnj-blog-standard .wp-block-gallery .blocks-gallery-item figcaption {

  position: absolute;

  font-size: 13px;

  font-weight: 400;

  overflow: hidden;

  padding: 10px 0;

  bottom: -100%;

  width: 100%;

  color: #333;

  background: rgba(255, 255, 255, .7);

  white-space: nowrap;

  text-indent: 10px;

  text-overflow: ellipsis;

  -webkit-transition: all 0.3s ease 0s;

  -moz-transition: all 0.3s ease 0s;

  -ms-transition: all 0.3s ease 0s;

  -o-transition: all 0.3s ease 0s;

  transition: all 0.3s ease 0s;

}



ul.wp-block-latest-posts,

ul.wp-block-categories,

ul.wp-block-archives {

  list-style: none;

}



ul.wp-block-latest-posts li,

ul.wp-block-categories li,

ul.wp-block-archives li {

  position: relative;

  margin-bottom: 12px;

  margin-top: 0;

  padding-bottom: 0;

  padding: 0;

}



ul.wp-block-latest-posts li:last-child,

ul.wp-block-categories li:last-child,

ul.wp-block-archives li:last-child {

  margin-bottom: 0;

}



.widget.widget_categories ul>li>a {

  position: relative;

  padding-left: 20px;

}



.widget.widget_categories ul>li>a:before {

  position: absolute;

  content: '';

  width: 6px;

  height: 6px;

  background-color: var(--jnj-primary-color);

  left: 0px;

  top: 7px;

}



ul.wp-block-categories li>a,

ul.wp-block-archives li>a {

  position: relative;

  padding-left: 20px;

  font-family: var(--jnj-font-family);

  font-size: 16px;

  line-height: 20px;

  font-family: var(--jnj-font-family);

  font-weight: 700;

  color: var(--jnj-title-color);

}



ul.wp-block-categories li>a:hover,

ul.wp-block-archives li>a:hover{

  color: var(--jnj-primary-color);

}



ul.wp-block-categories li>a:before,

ul.wp-block-archives li>a:before {

  position: absolute;

  content: '';

  width: 6px;

  height: 6px;

  background-color: var(--jnj-primary-color);

  left: 0px;

  top: 6px;

}



.wp-block-search button {

  font-size: 13px;

  line-height: 13px;

  font-weight: 600;

  padding: 20px 25px;

  border-radius: 0px;

  text-transform: uppercase;

  border: none;

  outline: none;

  right: 0;

  height: 54px;

  color: var(--jnj-white-color) !important;

  background-color: var(--jnj-primary-color) !important;

  z-index: 1;

  -webkit-transition: all .25s ease-in-out;

  transition: all .25s ease-in-out;

}



.wp-block-search button:hover {

  background-color: var(--jnj-dark-color);

}



.wp-block-search input[type="search"] {

  border: 1px solid #efefef !important;

}



.wp-block-group.has-background {

  padding: 25px !important;

  margin-bottom: 15px !important;

}



.wp-block-quote.is-large cite,

.wp-block-quote.is-large footer,

.wp-block-quote.is-style-large cite,

.wp-block-quote.is-style-large footer {

  font-size: 16px !important;

  text-align: left;

}



.jnj-blog-standard .wp-block-column blockquote cite,

.jnj-blog-standard .wp-block-column blockquote small {

  font-size: 11px !important;

  bottom: -5px !important;

  right: 10px !important;

}



.single-post .jnj-blog-standard .jnj-post-content .jnj-post-title {

  font-size: 36px;

  line-height: 46px;

  font-weight: 600;

  color: var(--jnj-title-color);

  font-family: var(--jnj-font-family);

  margin-bottom: 10px;

  word-break: break-all;

}



.has-large-font-size {

  line-height: 40px !important;

}



.jnj-blog-standard .entry-content .wp-block-image .is-resized {

  margin-bottom: 30px;

}



.wp-block-search {

  margin-bottom: 25px;

}



.wp-block-search .wp-block-search__inside-wrapper {

  position: relative;

  overflow: hidden;

}



.wp-block-search .wp-block-search__inside-wrapper .wp-block-search__input {

  height: 55px;

  padding-right: 60px;

  padding-left: 15px;

  background-color: var(--jnj-light-color);

  border: none !important;

}

.jnj-widget-area .wp-block-search .wp-block-search__inside-wrapper .wp-block-search__input{

  background-color: var(--jnj-white-color);

}



.wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button {

  position: absolute;

  height: 55px;

  padding: 0;

  width: 55px;

  border: none;

}



.wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button:before {

  position: absolute;

  content: "\f002";

  z-index: 55;

  font-family: 'Font Awesome 5 Free';

  text-align: center;

  font-size: 16px;

  left: 50%;

  top: 50%;

  -webkit-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

}



.wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button:after {

  position: absolute;

  content: "";

  top: 0;

  left: 0;

  background: var(--jnj-primary-color);

  width: 100%;

  height: 100%;

}



.jnj-content iframe,

.jnj-content p img,

.entry-content p img {

  width: 100%;

}



.jnj-content .gallery {

  margin-bottom: 30px;

}



.wp-block-archives-dropdown {

  margin-bottom: 10px;

}

.wp-block-categories-dropdown select,

.wp-block-archives-dropdown select{

  background-color: var(--jnj-light-color);

}



.wp-block-media-text.has-media-on-the-right{

  margin-bottom: 25px;

}



/*====================/====================/

                   Footer

/====================/====================*/



footer.jnj-footer {

  position: relative;

}

.footer-content a:hover{

  color: var(--jnj-primary-color);

}



/********** Footer Topbar **********/

.jnj-footer .jnj-footer-topbar {

  position: absolute;

  width: 100%;

  left: 0;

  top: -60px;

}



.jnj-footer-topbar .container .row {

  background: var(--jnj-primary-color);

  padding: 30px;

  margin: 0;

}



.jnj-newslatter .mc4wp-form-fields {

  display: flex;

  -ms-flex-align: center !important;

  align-items: center !important;

  justify-content: space-between;

}



.jnj-newslatter .jnj-newslatter-title h3 {

  font-size: 28px;

  line-height: 38px;

  color: var(--jnj-white-color);

  margin-right: 30px;

  margin-bottom: 0;

}



.jnj-newslatter input[type=email] {

  height: 60px;

  border-color: rgba(255, 255, 255, 20%);

  background: transparent;

  color: var(--jnj-white-color);

  margin-bottom: 0;

  border: 1px solid rgba(255, 255, 255, 0.2);

  padding-right: 200px;

}



.jnj-newslatter input[type=email]::placeholder {

  color: var(--jnj-white-color)

}



.jnj-newslatter .jnj-footer-newslatter {

  flex-grow: 1;

  position: relative;

}



.jnj-newslatter .jnj-footer-newslatter button {

  position: absolute;

  top: 4px;

  right: 4px;

  background: var(--jnj-dark-color);

  color: var(--jnj-white-color);

  font-weight: 600;

  text-transform: initial;

  letter-spacing: inherit;

}



.jnj-newslatter .jnj-footer-newslatter button .jnj-button {

  top: 15px;

}



.jnj-newslatter .jnj-footer-newslatter button:hover .jnj-button {

  top: -25px;

}



.jnj-newslatter .jnj-footer-newslatter button .jnj-button-hover {

  top: 50px;

}



.jnj-newslatter .jnj-footer-newslatter button:hover .jnj-button-hover {

  top: -11px;

}



.jnj-footer-topbar .row {

  display: flex;

  -ms-flex-align: center !important;

  align-items: center !important;

}



.jnj-footer-topbar .jnj-social {

  text-align: right;

}



.jnj-footer-topbar .jnj-social ul {

  list-style-type: none;

  display: inline-block;

  margin: 0;

  padding: 0;

}



.jnj-footer-topbar .jnj-social ul li {

  display: inline-block;

  float: left;

}



.jnj-footer-topbar .jnj-social ul li a {

  background: rgba(255, 255, 255, 0.2);

  width: 40px;

  height: 40px;

  line-height: 40px;

  text-align: center;

  display: inline-block;

  margin-left: 10px;

  color: var(--jnj-white-color);

}



.jnj-footer-topbar .jnj-social ul li a:hover {

  background: var(--jnj-dark-color);

}



.jnj-footer .footer-content ul.menu li {

  line-height: 18px;

}



.jnj-footer .footer-content ul.menu li a {

  font-family: var(--jnj-font-family);

  font-size: 16px;

  line-height: 16px;

  font-weight: 600;

  margin-bottom: 20px;

  display: inline-block;

  color: var(--jnj-white-color);

}



.jnj-footer .footer-content ul.menu li a:hover {

  color: var(--jnj-primary-color);

}



.jnj-footer .footer-content>.row ul,

.jnj-footer .widget_jnj_social_icon ul.jnj-footer-social,

.jnj-footer .menu-service-menu-container ul.menu {

  list-style: none;

  padding: 0;

  margin: 0;

}



.jnj-footer .footer-content {

  padding: 130px 0 30px 0;

  color: var(--jnj-white-color);

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

}



.jnj-footer .footer-content .col-lg-3 {

  margin-bottom: 50px;

}



.jnj-footer .footer-content .widget_jnj_logo {

  margin-bottom: 20px;

}



.jnj-footer .footer-content .widget_jnj_logo img {

  width: 200px;

}



.jnj-footer .footer-content h3.widget-title {

  color: var(--jnj-white-color);

  font-size: 24px;

  font-weight: 700;

  margin-bottom: 30px;

  position: relative;

  line-height: 34px;

}



.jnj-footer .widget_jnj_social_icon ul.jnj-footer-social {

  margin-top: 20px;

}



.jnj-footer .widget_jnj_social_icon ul.jnj-footer-social li {

  display: inline-flex;

  margin-right: 4px;

}



.jnj-footer .widget_jnj_social_icon ul.jnj-footer-social li:last-child {

  margin-right: 0;

}



.jnj-footer .widget_jnj_social_icon ul.jnj-footer-social li a {

  width: 40px;

  height: 40px;

  line-height: 40px;

  text-align: center;

  color: var(--jnj-primary-color);

  background-color: var(--jnj-white-color);

}



.jnj-footer .widget_jnj_social_icon ul.jnj-footer-social li a:hover {

  background-color: var(--jnj-dark-color);

  color: var(--jnj-white-color);

}



.jnj-footer .menu-service-menu-container ul.menu li {

  padding: 0 0 18px 0;

}



.jnj-footer .menu-service-menu-container ul.menu li a {

  color: var(--jnj-white-color);

}



.jnj-footer .menu-service-menu-container ul.menu li a:hover {

  color: var(--jnj-dark-color);

}



.jnj-footer .widget_mc4wp_form_widget .jnj-footer-newslatter input {

  background-color: var(--jnj-white-color);

  height: 55px;

  border-radius: 0px;

  width: 100%;

  font-size: 14px;

  color: var(--jnj-primary-color);

  border: 1px solid transparent;

}



.jnj-footer .widget_mc4wp_form_widget .jnj-footer-newslatter button {

  padding: 0 40px;

  margin: 15px 0;

  color: var(--jnj-white-color);

  height: 50px;

  background-color: var(--jnj-dark-color);

  line-height: 50px;

  border-radius: 0;

  display: block;

  width: 100%;

  border: none;

  outline: none;

  -webkit-transition: all 0.25s ease;

  transition: all 0.25s ease;

  cursor: pointer;

  -webkit-font-smoothing: antialiased;

  font-size: 13px;

  line-height: 13px;

  text-transform: uppercase;

  font-weight: 700;

  letter-spacing: 1px;

  margin: 0 0 10px 0;

}



.jnj-footer .widget_mc4wp_form_widget .jnj-footer-newslatter button:hover {

  background-color: var(--jnj-title-color);

}



.jnj-footer .widget_mc4wp_form_widget .jnj-footer-newslatter button i {

  position: relative;

  margin-left: 40px;

  font-size: 10px;

}



.jnj-footer .widget_mc4wp_form_widget .jnj-footer-newslatter button i:after {

  position: absolute;

  content: "";

  width: 30px;

  height: 1px;

  right: 10px;

  top: 7px;

  background-color: var(--jnj-white-color);

}



.jnj-footer .widget_text .textwidget p {

  font-size: 15px;

  line-height: 26px;

  padding-right: 30px;

  margin-bottom: 20px;

}



.jnj-footer .widget_text .textwidget p a {

  color: var(--jnj-dark-color);

  text-decoration: underline !important;

}



.jnj-footer .footer-content .widget_jnj_location ul li {

  margin-bottom: 15px;

}



.jnj-footer .footer-content .widget_jnj_location ul li:last-child {

  margin-bottom: 0;

}



.jnj-footer .footer-content .widget_jnj_location ul li .jnj-phone {

  display: inline-flex;

  align-items: baseline;

  background: rgba(255, 255, 255, 0.1);

  padding: 10px 20px 10px 10px;

}



.jnj-footer .footer-content .widget_jnj_location ul li .jnj-phone i {

  background: var(--jnj-white-color);

  width: 40px;

  height: 40px;

  line-height: 40px;

  color: var(--jnj-primary-color);

  text-align: center;

  font-size: 20px;

  margin-right: 12px;

}



.jnj-footer .footer-content .widget_jnj_location ul li .jnj-phone .jnj-text {

  font-size: 16px;

  font-weight: 600;

  line-height: 16px;

  font-family: var(--jnj-font-family);

}



.jnj-footer .footer-content .widget_jnj_location ul li .jnj-contact {

  display: inline-flex;

  align-items: baseline;

}



.jnj-footer .footer-content .widget_jnj_location ul li .jnj-contact i {

  color: var(--jnj-primary-color);

  margin-right: 10px;

  font-size: 15px;

}



.jnj-footer .footer-content .widget_jnj_location ul li .jnj-contact .jnj-text {

  font-size: 15px;

  font-weight: 500;

  line-height: 15px;

}



.jnj-footer-bottom {

  padding: 20px 0;

}



.jnj-footer-bottom ul.bottom-link {

  padding: 0;

  margin: 0;

  list-style-type: none;

}



.jnj-footer-bottom ul.bottom-link li {

  display: inline;

  position: relative;

  padding: 0 24px;

}



.jnj-footer-bottom ul.bottom-link li:before {

  position: absolute;

  content: "";

  right: 0;

  top: 4px;

  width: 1px;

  height: 14px;

  background: var(--jnj-white-color)

}



.jnj-footer-bottom ul.bottom-link li:first-child {

  padding-left: 0px;

}



.jnj-footer-bottom ul.bottom-link li:last-child:before {

  content: none;

  padding-right: 0px;

}



.jnj-footer-bottom ul.bottom-link li a {

  color: var(--jnj-white-color);

  font-size: 15px;

  line-height: 15px;

  font-weight: 500;

}



.jnj-footer-bottom ul.bottom-link li a:hover {

  color: var(--jnj-primary-color);

}



.jnj-footer-bottom .copyright-text {

  color: var(--jnj-white-color);

  font-size: 15px;

  line-height: 15px;

  font-weight: 500;

  text-align: right;

}



.jnj-footer-bottom .copyright-text a {

  color: var(--jnj-white-color);

  font-weight: 500;

}



.jnj-footer-bottom .copyright-text a:hover {

  color: var(--jnj-primary-color);

}



.jnj-footer-bottom .default-copyright-text {

  text-align: center;

  color: var(--jnj-white-color);

  font-size: 15px;

}



.jnj-footer .widget_jnj_recentpost .jnj-post-content a,

.jnj-footer .widget-container.widget_jnj_recentpost li .jnj-post-date {

  color: var(--jnj-white-color);

}



.jnj-footer .widget_jnj_recentpost .jnj-post-content a:hover {

  color: var(--jnj-primary-color);

}




/*====================/====================/

                 jnj-footer-one

/====================/====================*/



.jnj-footer-one {

  background-color: var(--jnj-dark-color);

}

.jnj-footer-one .footer-content .widget-container {

  padding: 60px 0px 0px 0px;

}

.jnj-footer-one .footer-content .widget-container ul>li {

  margin: 0 0 15px 0;

}

.jnj-footer-one .footer-content .widget-container h3 a,

.jnj-footer-one .footer-content .widget-container h3 {

  font-size: 24px;

  line-height: 24px;

  font-weight: 700;

  margin-bottom: 30px;

  color: var(--jnj-primary-color);

}

.jnj-footer-one .footer-content .widget-container ul {

  padding: 0;

  margin: 0;

  list-style: none;

}



.jnj-footer-one .footer-content .widget-container.widget_archive ul>li {

  color: var(--jnj-primary-color);

  font-family: var(--jnj-font-family);

  font-size: 16px;

  line-height: 16px;

  font-weight: 700;

}



.jnj-footer-one .footer-content .widget-container ul li .rss-date,

.jnj-footer-one .footer-content .widget-container {

  color: var(--jnj-white-color);

}



.jnj-footer-one .footer-content .widget-container ul>li a {

  -webkit-transition: all .25s ease-in-out;

  transition: all .25s ease-in-out;

  font-size: 16px;

  line-height: 20px;

  font-family: var(--jnj-font-family);

  font-weight: 600;

  color: var(--jnj-white-color);

}

.jnj-footer-one .footer-content .widget-container ul>li a:hover{

  color: var(--jnj-primary-color);

}

.jnj-footer-one .footer-content .widget-container.widget_recent_comments ul>li.recentcomments,

.jnj-footer-one .footer-content .widget-container.widget_nav_menu ul>li>a,

.jnj-footer-one .footer-content .widget-container.widget_recent_entries ul>li>a,

.jnj-footer-one .footer-content .widget-container.widget_meta ul>li>a,

.jnj-footer-one .footer-content .widget-container.widget_pages ul>li>a,

.jnj-footer-one .footer-content .widget-container.widget_categories ul>li>a,

.jnj-footer-one .footer-content .widget-container.widget_archive ul>li>a {

  position: relative;

  padding-left: 20px;

  line-height: normal;

}



.jnj-footer-one .footer-content .widget-container.widget_recent_comments ul>li.recentcomments:before,

.jnj-footer-one .footer-content .widget-container.widget_nav_menu ul>li>a:before,

.jnj-footer-one .footer-content .widget-container.widget_recent_entries ul>li>a:before,

.jnj-footer-one .footer-content .widget-container.widget_meta ul>li>a:before,

.jnj-footer-one .footer-content .widget-container.widget_pages ul>li>a:before,

.jnj-footer-one .footer-content .widget-container.widget_categories ul>li>a:before,

.jnj-footer-one .footer-content .widget-container.widget_archive ul>li>a:before {

  position: absolute;

  content: '';

  width: 6px;

  height: 6px;

  background-color: var(--jnj-primary-color);

  left: 0px;

  top: 6px;

}



.jnj-footer-one .footer-content .widget-container ul>li>ul {

  margin-left: 15px;

  margin-top: 15px;

}



.jnj-footer-one .footer-content .widget_categories ul li span {

  right: 0;

  top: 0px;

  float: right;

  width: 24px;

  height: 24px;

  line-height: 24px;

  color: var(--jnj-white-color);

  background-color: var(--jnj-primary-color);

  text-align: center;

  display: block;

  font-size: 11px;

  font-weight: 700;

  -webkit-transition: all 0.2s linear;

  transition: all 0.2s linear;

}



.jnj-footer-one .footer-content .widget_calendar .calendar_wrap table {

  border-color: var(--jnj-white-color);

}



.jnj-footer-one .footer-content .widget_calendar .calendar_wrap table th,

.jnj-footer-one .footer-content .widget_calendar .calendar_wrap table td,

.jnj-footer-one .footer-content .widget_calendar .calendar_wrap caption {

  color: var(--jnj-white-color);

}



.widget_calendar table th,

.widget_calendar table td:last-child {

  border-color: var(--jnj-white-color);

}



.jnj-footer-one .footer-content .widget_calendar .calendar_wrap nav .wp-calendar-nav-prev a,

.jnj-footer-one .footer-content .widget_calendar .calendar_wrap nav .wp-calendar-nav-next a {

  -webkit-transition: all .25s ease-in-out;

  transition: all .25s ease-in-out;

  font-size: 18px;

  line-height: 20px;

  font-family: var(--jnj-font-family);

  font-weight: 700;

  color: var(--jnj-white-color);

}



.default-copyright-text {

  padding: 40px 0px;

  color: var(--jnj-white-color);

  border-top: 1px solid rgba(255, 255, 255, 0.1);

}



.default-copyright-text a {

  color: var(--jnj-white-color);

}

.default-copyright-text a:hover {

  color: var(--jnj-primary-color);

}



/*====================/====================/

                  Pull-coluam

/====================/====================*/

.jnj-pull-right.elementor-top-section:after,

.jnj-pull-form.elementor-top-column .elementor-widget-wrap:after,

.jnj-pull-right.elementor-top-column .elementor-widget-wrap:after {

  position: absolute;

  content: ' ';

  top: 0;

  left: 0;

  height: 100%;

  width: 100%;

  display: block !important;

  z-index: -1;

}



.jnj-pull-left.elementor-top-section:after,

.jnj-pull-left.elementor-top-column .elementor-widget-wrap:after {

  position: absolute;

  content: ' ';

  top: 0;

  right: 0;

  height: 100%;

  width: 100%;

  display: block !important;

  z-index: -1;

}



.jnj-pull-left.elementor-top-column .elementor-widget-wrap,

.jnj-pull-right.elementor-top-column .elementor-widget-wrap,

.jnj-pull-form.elementor-top-column .elementor-widget-wrap {

  display: block !important;

}



.jnj-pull-right .elementor-widget-wrap>.elementor-element {

  width: 565px;

  margin-left: 0;

  margin-right: auto;

  z-index: 5;

}



.jnj-pull-form .elementor-widget-wrap>.elementor-element {

  width: 580px;

}



/*====================/====================/

                   Iconboxs

/====================/====================*/



/********** Iconbox Item 1 **********/

.jnj-iconbox-item-1 .jnj-iconbox-icon {

  margin-right: 20px;

  transition: all 600ms ease;

  -moz-transition: all 600ms ease;

  -webkit-transition: all 600ms ease;

  -ms-transition: all 600ms ease;

  -o-transition: all 600ms ease;

}



.jnj-iconbox-item-1 .jnj-iconbox-icon i {

  font-size: 52px;

  color: var(--jnj-primary-color);

  line-height: 52px;

}



.jnj-iconbox-item-1 .jnj-iconbox-icon img {

  width: 50px;

}



.jnj-iconbox-item-1 .jnj-iconbox-icon.jnj-number {

  font-family: var(--jnj-font-family);

  font-weight: 800;

  font-size: 26px;

  background: var(--jnj-primary-color);

  color: var(--jnj-white-color);

  width: 80px;

  height: 50px;

  line-height: 50px;

  text-align: center;

}



.jnj-iconbox-item-1 .jnj-iconbox-title {

  font-size: 22px;

  line-height: 32px;

  margin-bottom: 0px;

}



.jnj-iconbox-item-1 .jnj-iconbox-subtitle {

  font-size: 15px;

}



.jnj-iconbox-item-1 .jnj-iconbox-content {

  margin-top: 5px;

  font-size: 15px;

  line-height: 26px;

}



/********** Iconbox Item 2 **********/

.jnj-iconbox-item-2 {

  text-align: center;

}



.jnj-iconbox-item-2 .jnj-iconbox-area {

  margin-bottom: 40px;

}



.jnj-iconbox-item-2 .jnj-iconbox-icon {

  width: 100px;

  height: 100px;

  line-height: 100px;

  background: #292929;

  text-align: center;

  margin: auto;

  position: relative;

}



.jnj-iconbox-item-2 .jnj-iconbox-icon:before {

  position: absolute;

  right: -16px;

  top: 50%;

  content: "";

  width: 0;

  height: 0;

  border-top: 8px solid transparent;

  border-left: 16px solid #292929;

  border-bottom: 8px solid transparent;

  margin-top: -8px;

}



.jnj-iconbox-item-2 .jnj-iconbox-icon i {

  font-size: 50px;

  color: var(--jnj-white-color);

}



.jnj-iconbox-item-2 .jnj-iconbox-step {

  background: var(--jnj-primary-color);

  font-family: var(--jnj-font-family);

  font-weight: 700;

  color: var(--jnj-white-color);

  width: 32px;

  height: 32px;

  line-height: 32px;

  position: absolute;

  top: 34px;

  right: -58px;

  font-size: 16px;

  border-radius: 100%;

}



.jnj-iconbox-item-2 .jnj-iconbox-title {

  font-size: 22px;

  font-weight: 700;

  line-height: 26px;

  margin-bottom: 5px;

  color: var(--jnj-white-color);

}



.jnj-iconbox-item-2 .jnj-iconbox-heading {

  margin-top: 30px;

}



.jnj-iconbox-item-2 .jnj-iconbox-subtitle {

  color: var(--jnj-white-color);

  margin-bottom: 10px;

}



.jnj-iconbox-item-2 .jnj-iconbox-content {

  color: var(--jnj-white-color);

  font-size: 15px;

  opacity: 0.8;

  margin-top: 10px;

  padding: 0 15px;

  line-height: 26px;

}



.jnj-iconbox-item-2 .jnj-iconbox-icon img {

  width: 50px;

}



.jnj-iconbox-item-2 .jnj-iconbox-icon.jnj-number {

  font-family: var(--jnj-font-family);

  font-weight: 700;

  font-size: 50px;

  color: var(--jnj-primary-color);

}



/********** Iconbox Item 3 **********/

.jnj-iconbox-item-3 {

  margin: 20px 0;

}



.jnj-iconbox-item-3 .jnj-iconbox-title {

  font-size: 22px;

  line-height: 32px;

  margin-bottom: 0px;

  color: var(--jnj-white-color);

}



.jnj-iconbox-item-3 .jnj-iconbox-icon i {

  background: var(--jnj-white-color);

  color: var(--jnj-primary-color);

  width: 60px;

  height: 60px;

  line-height: 60px;

  font-size: 30px;

  display: inline-block;

  text-align: center;

}



.jnj-iconbox-item-3 .jnj-iconbox-icon.jnj-number {

  background: var(--jnj-white-color);

  color: var(--jnj-primary-color);

  width: 60px;

  height: 60px;

  line-height: 60px;

  font-size: 30px;

  font-weight: 700;

  font-family: var(--jnj-font-family);

  display: inline-block;

  text-align: center;

}



.jnj-iconbox-item-3 .jnj-iconbox-details {

  margin-left: 20px;

}



.jnj-iconbox-item-3 .jnj-iconbox-content {

  color: var(--jnj-white-color);

  opacity: 0.8;

  margin-bottom: 0;

  margin-top: 8px;

  font-size: 15px;

  line-height: 24px;

}



.jnj-iconbox-item-3 .jnj-iconbox-content p {

  margin-bottom: 0px;

}



/********** Iconbox Item 4 **********/

.jnj-iconbox-item-4 .jnj-iconbox-title {

  font-size: 22px;

  font-weight: 700;

  line-height: 28px;

  margin-bottom: 10px;

}



.jnj-iconbox-item-4 .jnj-iconbox-icon i{

  color: var(--jnj-primary-color);

  font-size: 60px;

  line-height: 60px;

  position: relative;

  z-index: 1;

}



.jnj-iconbox-item-4 .jnj-iconbox-icon i:after{

  content: "";

  position: absolute;

  width: 30px;

  height: 30px;

  bottom: -2px;

  right: -10px;

  background-color: var(--jnj-white-color);

  z-index: -1;

}

.jnj-iconbox-item-4 .jnj-iconbox-icon img{

  width: 60px;

}

.jnj-iconbox-item-4 .jnj-iconbox-details {

  margin-left: 20px;

}



/********** Iconbox Item 5 **********/

.jnj-iconbox-item-5 .jnj-iconbox-area {

  margin-bottom: 50px;

  position: relative;

}



.jnj-iconbox-item-5 .jnj-iconbox-area::before {

  content: "";

  position: absolute;

  left: 25px;

  top: 50px;

  width: 2px;

  height: 100%;

  background-color: var(--jnj-primary-color);

}



.jnj-iconbox-item-5 .jnj-iconbox-title {

  font-size: 26px;

  font-weight: 700;

  line-height: 30px;

  margin-bottom: 15px;

  color: var(--jnj-white-color);

}



.jnj-iconbox-item-5 .jnj-iconbox-icon i {

  background: var(--jnj-white-color);


  color: var(--jnj-primary-color);

  width: 60px;

  height: 60px;

  line-height: 60px;

  font-size: 30px;

  display: inline-block;

  text-align: center;

}



.jnj-iconbox-item-5 .jnj-iconbox-icon.jnj-number {

  background: var(--jnj-white-color);

  color: var(--jnj-primary-color);

  width: 60px;

  height: 60px;

  line-height: 60px;

  font-size: 30px;

  font-weight: 700;

  font-family: var(--jnj-font-family);

  display: inline-block;

  text-align: center;

}



.jnj-iconbox-item-5 .jnj-iconbox-content {

  color: var(--jnj-white-color);

  margin-bottom: 0;

  margin-top: 5px;

  font-size: 15px;

  line-height: 24px;

}



.jnj-iconbox-item-5 .jnj-iconbox-content p {

  margin-bottom: 0px;

}



.jnj-iconbox-item-5 .jnj-iconbox-icon {

  width: 80px;

  margin-right: 40px;

  z-index: 9;

  display: inline-block;

}



.jnj-iconbox-item-5 .jnj-iconbox-icon img {

  width: 100%;

}



/********** Iconbox Item 6 **********/

.jnj-iconbox-item-6 .jnj-iconbox-icon {

  transition: all 600ms ease;

  -moz-transition: all 600ms ease;

  -webkit-transition: all 600ms ease;

  -ms-transition: all 600ms ease;

  -o-transition: all 600ms ease;

}



.jnj-iconbox-item-6:hover .jnj-iconbox-icon {

  -webkit-transform: scale(-1) rotate(180deg);

  -moz-transform: scale(-1) rotate(180deg);

  -ms-transform: scale(-1) rotate(180deg);

  -o-transform: scale(-1) rotate(180deg);

  transform: scale(-1) rotate(180deg);

}



.jnj-iconbox-item-6 .jnj-iconbox-icon i {

  font-size: 60px;

  color: var(--jnj-primary-color);

  line-height: 60px;

}



.jnj-iconbox-item-6 .jnj-iconbox-icon img {

  width: 0px;

}



.jnj-iconbox-item-6 .jnj-iconbox-icon.jnj-number {

  font-family: var(--jnj-font-family);

  font-weight: 700;

  font-size: 30px;

  background: var(--jnj-primary-color);

  color: var(--jnj-white-color);

  width: 80px;

  height: 50px;

  line-height: 50px;

  text-align: center;

}



.jnj-iconbox-item-6 .jnj-iconbox-title {

  font-size: 22px;

  line-height: 32px;

  margin-bottom: 0px;

  color: var(--jnj-white-color);

}



.jnj-iconbox-item-6 .jnj-iconbox-subtitle {

  font-size: 15px;

}



.jnj-iconbox-item-6 .jnj-iconbox-content {

  font-size: 15px;

  line-height: 26px;

  color: var(--jnj-white-color);

}



/********** Iconbox Item 7 **********/

.jnj-iconbox-item-7 .jnj-iconbox-icon {

  margin-right: 20px;

  transition: all 600ms ease;

  -moz-transition: all 600ms ease;

  -webkit-transition: all 600ms ease;

  -ms-transition: all 600ms ease;

  -o-transition: all 600ms ease;

}



.jnj-iconbox-item-7 .jnj-iconbox-icon i {

  font-size: 52px;

  color: var(--jnj-primary-color);

  line-height: 52px;

}



.jnj-iconbox-item-7 .jnj-iconbox-icon img {

  width: 50px;

}



.jnj-iconbox-item-7 .jnj-iconbox-icon.jnj-number {

  font-family: var(--jnj-font-family);

  font-weight: 800;

  font-size: 26px;

  background: var(--jnj-white-color);

  color: var(--jnj-primary-color);

  width: 80px;

  height: 50px;

  line-height: 50px;

  text-align: center;

}



.jnj-iconbox-item-7 .jnj-iconbox-title {

  font-size: 22px;

  line-height: 32px;

  margin-bottom: 0px;

  color: var(--jnj-white-color);

}



.jnj-iconbox-item-7 .jnj-iconbox-subtitle {

  font-size: 15px;

}



.jnj-iconbox-item-7 .jnj-iconbox-content {

  margin-top: 5px;

  font-size: 15px;

  line-height: 26px;

  color: var(--jnj-white-color);

}



/*====================/====================/

                 Testimonial

/====================/====================*/

/********** Testimonial Item 1 **********/

.jnj-testimonial-item-1 .jnj-testimonial-image img {

  width: 70px;

  height: 70px;

  margin-right: 15px;

}



.jnj-testimonial-item-1 .jnj-testimonial-name {

  color: var(--jnj-white-color);

  font-size: 18px;

  font-weight: 700;

  line-height: 24px;

  margin-bottom: 0;

}



.jnj-testimonial-item-1 .jnj-testimonial-designation {

  margin-top: 8px;

  font-weight: 600;

  font-size: 15px;

  line-height: 15px;

  color: var(--jnj-white-color);

}



.jnj-testimonial-item-1 .jnj-star-rating {

  list-style-type: none;

  margin-bottom: 0;

  padding-left: 0;

}



.jnj-testimonial-item-1 .jnj-star-rating li {

  display: inline;

  color: var(--jnj-primary-color);

}



.jnj-testimonial-item-1 .jnj-testimonial-content {

  font-size: 20px;

  font-weight: 600;

  line-height: 34px;

  color: var(--jnj-white-color);

  font-style: italic;

  margin-bottom: 25px;

  font-family: var(--jnj-font-family);

}



.jnj-testimonial-item-1 .d-flex.align-items-center{

  width: 100%;

  padding-right: 15px;

}



.jnj-testimonial-item-1 .jnj-testimonial-author-area {

  width: 50%;

}



.jnj-testimonial-item-1 .jnj-testimonial-rating {

  width:50%;

  text-align: right;

}



.jnj-arrow-left .owl-carousel .owl-nav button.owl-prev,

.jnj-arrow-left .owl-carousel .owl-nav button.owl-next {

  left: 0;

  top: inherit;

  bottom: -90px;

  background: rgba(255, 255, 255, 0.15);

  color: var(--jnj-white-color);

  right: inherit;

}



.jnj-arrow-left .owl-carousel .owl-nav button.owl-prev i,

.jnj-arrow-left .owl-carousel .owl-nav button.owl-next i {

  font-size: 14px;

}



.jnj-arrow-left .owl-carousel .owl-nav button.owl-prev:hover,

.jnj-arrow-left .owl-carousel .owl-nav button.owl-next:hover {

  background: var(--jnj-primary-color);

  color: var(--jnj-white-color);

}



.jnj-arrow-left .owl-carousel .owl-nav button.owl-next {

  left: 50px;

}



/********** Testimonial Item 2 **********/

.jnj-testimonial-item-2 .jnj-testimonial-image img {

  width: 70px;

  height: 70px;

  margin-right: 15px;

}



.jnj-testimonial-item-2 .jnj-testimonial-name {

  color: var(--jnj-primary-color);

  font-size: 22px;

  font-weight: 700;

  line-height: 28px;

  margin-bottom: 4px;

}



.jnj-testimonial-item-2 .jnj-testimonial-designation {

  font-weight: 500;

  font-size: 15px;

  color: var(--jnj-dark-color);

}



.jnj-testimonial-item-2 .jnj-star-rating {

  list-style-type: none;

  margin-bottom: 0;

  padding-left: 0;

}



.jnj-testimonial-item-2 .jnj-star-rating li {

  display: inline;

  color: var(--jnj-primary-color);

}



.jnj-testimonial-item-2 .jnj-testimonial-content {

  font-size: 20px;

  font-weight: 700;

  line-height: 30px;

  color: var(--jnj-dark-color);

  font-style: italic;

  margin-bottom: 25px;

  font-family: var(--jnj-font-family);

}



.jnj-testimonial-item-2 .jnj-testimonial-author-area {

  width: 70%;

}



.jnj-testimonial-item-2 .jnj-testimonial-rating {

  width: 30%;

  text-align: right;

}



.jnj-testimonial-item-2 .jnj-testimonial-area {

  -webkit-box-shadow: 0px 0px 18px 0px rgb(0 0 0 / 10%);

  box-shadow: 0px 0px 30px 0px rgb(0 0 0 / 10%);

  padding: 30px;

  position: relative;

  margin-bottom: 50px;

}



.jnj-testimonial-item-2 .jnj-testimonial-area:before {

  position: absolute;

  content: '';

  left: 40px;

  bottom: -20px;

  width: 0;

  height: 0;

  border-left: 13px solid transparent;

  border-right: 13px solid transparent;

  border-top: 20px solid var(--jnj-white-color);

}



/********** Testimonial Item 3 **********/

.jnj-testimonial-item-3 .jnj-testimonial-image img {

  width: 70px;

  height: 70px;

  margin-right: 15px;

}



.jnj-testimonial-item-3 .jnj-testimonial-name {

  color: var(--jnj-dark-color);

  font-size: 18px;

  font-weight: 700;

  line-height: 24px;

  margin-bottom: 0;

}



.jnj-testimonial-item-3 .jnj-testimonial-designation {

  margin-top: 8px;

  font-weight: 600;

  font-size: 15px;

  line-height: 15px;

  color: var(--jnj-primary-color);

}



.jnj-testimonial-item-3 .jnj-star-rating {

  list-style-type: none;

  margin-bottom: 0;

  padding-left: 0;

}



.jnj-testimonial-item-3 .jnj-star-rating li {

  display: inline;

  color: var(--jnj-primary-color);

}



.jnj-testimonial-item-3 .jnj-testimonial-content {

	font-size: 20px;

	font-weight: 600;

	line-height: 34px;

	color: var(--jnj-dark-color);

	font-style: italic;

	margin-bottom: 25px;

	font-family: var(--jnj-font-family);

}



.jnj-testimonial-item-3 .d-flex.align-items-center{

  width: 100%;

  padding-right: 15px;

}



.jnj-testimonial-item-3 .jnj-testimonial-author-area {

  width: 50%;

}



.jnj-testimonial-item-3 .jnj-testimonial-rating {

  width:50%;

  text-align: right;

}











/*====================/====================/

                   Client

/====================/====================*/

/********** Client Item 1 **********/

.jnj-client-image {

  text-align: center;

}



.jnj-client-image img {

  width: 175px !important;

  margin: auto;

  filter: grayscale(100%);

  -webkit-transition: all .25s ease-in-out;

  transition: all .25s ease-in-out;

}



.jnj-client-image img:hover {

  filter: inherit;

}



/*====================/====================/

                  Language

/====================/====================*/



/********** Language Item 1 **********/

.jnj-language-item {

  text-align: center;

}



.jnj-language-item img {

  width: 80px !important;

  margin: auto;

}



.jnj-language-item .jnj-language-title {

  font-size: 15px;

  line-height: 15px;

  margin-top: 15px;

  margin-bottom: 0;

  color: var(--jnj-white-color);

}



/*====================/====================/

                Progress Bar

/====================/====================*/



/********** Progress Bar Item 1 **********/

.jnj-line-progressbar-item-1 .progress-bar {

  margin: 0 0 30px;

  overflow: hidden;

  background: inherit;

}



.jnj-line-progressbar-item-1 .progress-bar:last-child {

  margin: 0 0 0px;

}



.jnj-line-progressbar-item-1 .progress-title-holder {

  position: relative;

  font-size: 15px;

  line-height: 15px;

  font-weight: 400;

  color: var(--jnj-dark-color);

  width: 100%;

  margin-bottom: 5px;

}



.jnj-line-progressbar-item-1 .progress-title {

  z-index: 100;

  float: left;

  font-size: 16px;

  font-weight: 700;

  line-height: 16px;

  margin-bottom: 0px;

}



.jnj-line-progressbar-item-1 .progress-number-wrapper {

  width: 100%;

  z-index: 10;

}



.jnj-line-progressbar-item-1 .progress-number-mark {

  height: 22px;

  letter-spacing: 0px;

  font-style: normal;

  text-transform: none;

  color: var(--jnj-white-color);

  width: 40px;

  position: absolute;

  right: 0;

  top: 0;

  font-size: 12px;

  font-weight: 800;

  line-height: 22px;

  margin: 0;

  padding: 0;

  left: inherit !important;

  background: var(--jnj-dark-color);

}



.jnj-line-progressbar-item-1 .progress-number-mark:before {

  position: absolute;

  right: 0;

  bottom: -8px;

  content: "";

  width: 0;

  height: 0;

  border-top: 8px solid var(--jnj-dark-color);

  border-left: 8px solid transparent;

}



.jnj-line-progressbar-item-1 .progress-content-outter {

  height: 8px;

  background: #ddd;

  border-radius: 0px;

  margin-top: 12px;

}



.jnj-line-progressbar-item-1 .progress-content {

  height: 8px;

  background: var(--jnj-primary-color);

  width: 0%;

  border-radius: 0px;

}



/*====================/====================/

                   Counter

/====================/====================*/

/********** Counter Item 1 **********/

.jnj-counter-image .jnj-counter-item-1 {

  position: absolute;

  content: "";

  top: 0px;

  padding-top: 35px;

  padding-left: 25px;

  right: 0px;

  width: 259px;

  background-image: url(../images/counter-bg.png);

  z-index: 9999;

  background-repeat: no-repeat;

  background-position: center center;

  height: 191px;

}



.jnj-counter-item-1 .jnj-counter-icon {

  color: var(--jnj-primary-color);

  font-size: 50px;

}



.jnj-counter-item-1 .jnj-counter-heading {

  margin-left: 20px;

}



.jnj-counter-item-1 .jnj-counter-numbers {

  font-size: 40px;

  line-height: 40px;

  position: relative;

  display: inline-block;

  margin-bottom: 10px;

  color: var(--jnj-dark-color);

}



.jnj-counter-item-1 .jnj-counter-subtitle {

  font-weight: 500;

}



.jnj-counter-item-1 .jnj-counter-numbers:before {

  position: absolute;

  right: -10px;

  top: -20px;

  content: "+";

  font-family: var(--jnj-font-family);

  font-size: 24px;

  font-weight: 800;

}



.jnj-counter-item-1 .jnj-counter-content {

  margin-top: 10px;

}



.jnj-counter-item-1 .jnj-counter-icon img {

  width: 70px;

}



/********** Counter Item 2 **********/

.jnj-counter-item-2 {

  background: var(--jnj-primary-color);

  padding: 30px 40px 20px 20px;

  display: inline-block;

  position: relative;

}



.jnj-counter-item-2:before {

  position: absolute;

  left: -20px;

  bottom: 15px;

  content: "";

  width: 0;

  height: 0;

  border-top: 15px solid transparent;

  border-right: 20px solid var(--jnj-primary-color);

  border-bottom: 15px solid transparent;

}



.jnj-counter-image .jnj-counter-item-2 {

  position: absolute;

  content: "";

  top: 0px;

  padding-top: 40px;

  padding-left: 30px;

  right: 0px;

  width: 244px;

  background-image: url(../images/counter-bg.png);

  z-index: 9999;

  background-repeat: no-repeat;

  background-position: center center;

  height: 192px;

}



.jnj-counter-item-2 .jnj-counter-icon {

  color: var(--jnj-white-color);

  font-size: 50px;

}



.jnj-counter-item-2 .jnj-counter-heading {

  margin-left: 20px;

}



.jnj-counter-item-2 .jnj-counter-numbers {

  font-size: 34px;

  line-height: 34px;

  position: relative;

  display: inline-block;

  margin-bottom: 10px;

  color: var(--jnj-white-color);

}



.jnj-counter-item-2 .jnj-counter-subtitle {

  font-weight: 500;

  color: var(--jnj-white-color);

}



.jnj-counter-item-2 .jnj-counter-numbers:before {

  position: absolute;

  right: -10px;

  top: -20px;

  content: "+";

  font-family: var(--jnj-font-family);

  font-size: 24px;

  font-weight: 800;

}



.jnj-counter-item-2 .jnj-counter-content {

  margin-top: 10px;

  color: var(--jnj-white-color);

}



.jnj-counter-item-2 .jnj-counter-icon img {

  width: 70px;

}





/********** Counter Item 3 **********/

.jnj-counter-image .jnj-counter-item-3 {

  position: absolute;

  content: "";

  top: 0px;

  padding-top: 40px;

  padding-left: 30px;

  right: 0px;

  width: 244px;

  background-image: url(../images/counter-bg.png);

  z-index: 9999;

  background-repeat: no-repeat;

  background-position: center center;

  height: 192px;

}



.jnj-counter-item-3 .jnj-counter-icon {

  color: var(--jnj-primary-color);

  font-size: 50px;

  margin-right: 20px;

}



.jnj-counter-item-3 .jnj-counter-numbers {

  font-size: 40px;

  line-height: 40px;

  position: relative;

  display: inline-block;

  margin-bottom: 10px;

  color: var(--jnj-primary-color);

}



.jnj-counter-item-3 .jnj-counter-subtitle {

  font-weight: 500;

}



.jnj-counter-item-3 .jnj-counter-numbers:before {

  position: absolute;

  right: -10px;

  top: -20px;

  content: "+";

  font-family: var(--jnj-font-family);

  font-size: 24px;

  font-weight: 800;

}



.jnj-counter-item-3 .jnj-counter-content {

  margin-top: 10px;

}



.jnj-counter-item-3 .jnj-counter-icon img {

  width: 70px;

}



/*====================/====================/

                Custom Button

/====================/====================*/

/********** Custom Button Item 1 **********/

.jnj-button-item-1 {

  height: 52px;

  padding: 0 32px;

  font-size: 15px;

  line-height: 25px;

  font-weight: 600;

  display: inline-grid;

  position: relative;

  border-radius: 0px;

  text-align: center;

  overflow: hidden;

}



.jnj-button-item-1 .jnj-button {

  -webkit-transition: all 0.2s ease-in-out;

  transition: all 0.2s ease-in-out;

  position: relative;

  top: 13px;

}



.jnj-button-item-1:hover .jnj-button {

  top: -24px;

}



.jnj-button-item-1 .jnj-button-hover {

  -webkit-transition: all 0.2s ease-in-out;

  transition: all 0.2s ease-in-out;

  position: relative;

  top: 24px;

}



.jnj-button-item-1:hover .jnj-button-hover {

  top: -14px;

}



.jnj-button-item-1.primary-color {

  color: var(--jnj-primary-color);

}



.jnj-button-item-1.secondary-color {

  color: var(--jnj-dark-color);

}



.jnj-button-item-1.white-color {

  color: var(--jnj-white-color);

}



.jnj-button-item-1.primary-background-color {

  background: var(--jnj-primary-color);

}



.jnj-button-item-1.secondary-background-color {

  background: var(--jnj-dark-color);

}



.jnj-button-item-1.white-background-color {

  background: var(--jnj-white-color);

}



/*====================/====================/

                    Tab

/====================/====================*/

/********** Tab Item 1 **********/

.jnj-tab-item-1 .item-tabs .nav-link h4 {

  font-size: 18px;

  line-height: 18px;

  margin-bottom: 0;

  font-weight: 700;

  position: relative;

  z-index: 9;

}



.jnj-tab-item-1 .nav-tabs,

.jnj-tab-item-1 .nav-link {

  border: none;

}



.jnj-tab-item-1 .nav-link.active {

  border: none;

  background: var(--jnj-primary-color);

  color: var(--jnj-white-color);

}



.jnj-tab-item-1 .nav-item {

  margin-bottom: -1px;

  text-align: center;

}



.jnj-tab-item-1 .nav-link {

  padding: 15px 10px;

  position: relative;

  overflow: hidden;

}



.jnj-tab-item-1 .item-tabs .nav-link:hover h4,

.jnj-tab-item-1 .item-tabs .nav-link.active h4 {

  color: var(--jnj-white-color);

}



.jnj-tab-item-1 .tab-content {

  margin-top: 20px;

}



.jnj-tab-item-1 .nav-link:before {

  position: absolute;

  left: 0;

  bottom: 0;

  content: "";

  background: var(--jnj-primary-color);

  height: 1px;

  width: 100%;

  -webkit-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}



.jnj-tab-item-1 .nav-link:hover:before {

  height: 100%;

}



.jnj-tab-item-1 .item-tabs>ul.nav.nav-tabs {

  display: table;

  width: 100%;

  table-layout: fixed;

}



.jnj-tab-item-1 .item-tabs>ul.nav.nav-tabs>li {

  float: none;

  display: table-cell;

}



.jnj-tab-item-1 .item-tabs>ul.nav.nav-tabs>li>a {

  text-align: center;

}



/*====================/====================/

                    Pricing

/====================/====================*/

/********** Pricing Item 1 **********/

.jnj-pricing-item-1 .jnj-pricing-header {

  box-shadow: 0px 5px 20px 0px rgb(0 0 0 / 8%);

  padding: 50px 50px 0 50px;

  text-align: center;

  border-top: 8px solid var(--jnj-dark-color);

}



.jnj-pricing-item-1 .jnj-pricing-title {

  font-size: 24px;

  line-height: 30px;

  font-weight: 700;

  margin-bottom: 20px;

}



.jnj-pricing-item-1 .jnj-pricing-button {

  background: var(--jnj-primary-color);

  color: var(--jnj-white-color);

  font-weight: 600;

  font-size: 15px;

  line-height: 15px;

  padding: 12px 25px;

  display: inline-block;

  margin-top: 20px;

}



.jnj-pricing-item-1 .jnj-pricing-button:hover {

  background: var(--jnj-dark-color);

}



.jnj-pricing-item-1 .jnj-pricing-prices {

  font-size: 34px;

  line-height: 34px;

  color: var(--jnj-dark-color);

  font-weight: 700;

}



.jnj-pricing-item-1 .jnj-currency {

  font-size: 24px;

  line-height: 24px;

}



.jnj-pricing-item-1 .jnj-pricing-list ul {

  list-style: none;

  margin: 0;

  background: var(--jnj-light-color);

  padding: 40px 40px 40px 70px;

  margin-top: -8px;

}



.jnj-pricing-item-1 .jnj-pricing-term {

  font-size: 16px;

  line-height: 16px;

  color: var(--jnj-body-color);

  margin-left: 6px;

}



.jnj-pricing-item-1 .jnj-offer-prices {

  font-size: 60px;

  line-height: 60px;

}



.jnj-pricing-item-1 .jnj-pricing-prices.jnj-offer-on {

  font-size: 40px;

  line-height: 40px;

  text-decoration: line-through;

}



.jnj-pricing-item-1 .jnj-pricing-list {

  margin: 0 8px;

}



.jnj-pricing-item-1 .jnj-pricing-list ul li span {

  color: var(--jnj-body-color);

  font-weight: 700;

  font-size: 16px;

  line-height: 22px;

  font-family: var(--jnj-font-family);

  position: relative;

  margin: 8px 0;

  display: inline-block;

}



.jnj-pricing-item-1 .jnj-pricing-list ul li span.true {

  color: var(--jnj-dark-color);

}



.jnj-pricing-item-1 .jnj-pricing-list ul li span.true:before {

  position: absolute;

  left: -30px;

  top: 0;

  content: "\f058";

  color: var(--jnj-dark-color);

  font-family: "Font Awesome 5 Free";

  font-weight: 900;

}



.jnj-pricing-item-1 .jnj-pricing-list ul li span.false {

  text-decoration: line-through;

}



.jnj-pricing-item-1 .jnj-pricing-list ul li span.false:before {

  position: absolute;

  left: -30px;

  top: 0;

  content: "\f057";

  font-family: "Font Awesome 5 Free";

  font-weight: 900;

}



.jnj-pricing-item-1 .jnj-pricing-populer {

  background: var(--jnj-dark-color);

  color: var(--jnj-white-color);

  font-size: 14px;

  line-height: 14px;

  font-weight: 700;

  display: inline-block;

  padding: 8px 15px;

  position: absolute;

  right: 10px;

  top: 0;

}



.jnj-pricing-item-1 .jnj-pricing-header.jnj-populer-on {

  border-top: 8px solid var(--jnj-primary-color);

}



/*====================/====================/

                   Timeline

/====================/====================*/



/********** Timeline Item 1 **********/

.jnj-timeline-item .jnj-timeline-flag {

  background: var(--jnj-primary-color);

  width: 10px;

  height: 25px;

  position: relative;

  transform: rotate(180deg);

}



.jnj-timeline-item .jnj-timeline-flag:before {

  content: "";

  position: absolute;

  left: 0;

  top: 0px;

  width: 0px;

  height: 0;

  border-top: 5px solid var(--jnj-dark-color);

  border-left: 5px solid transparent;

  border-right: 5px solid transparent;

}



.jnj-timeline-area {

  position: relative;

}



.jnj-timeline-area:before {

  position: absolute;

  content: "";

  left: 0;

  top: 4px;

  width: 100%;

  height: 1px;

  background: var(--jnj-white-color);

  opacity: 0.3;

}



.jnj-timeline-item .jnj-timeline-title .jnj-title {

  font-size: 26px;

  font-weight: 700;

  line-height: 27px;

  margin-bottom: 5px;

  color: var(--jnj-white-color);

  margin-top: 50px;

  margin-right: 50px;

}



.jnj-timeline-item .jnj-timeline-content {

  color: var(--jnj-white-color);

  font-size: 15px;

  opacity: 0.8;

  margin-top: 15px;

  margin-right: 50px;

  line-height: 26px;

}



.jnj-timeline-item .jnj-timeline-image {

  margin-right: 50px;

  position: relative;

  overflow: hidden;

}



.jnj-timeline-item .jnj-timeline-image img {

  width: 100%;

}



.jnj-timeline-item .jnj-timeline-year .jnj-year {

  font-size: 18px;

  font-weight: 700;

  line-height: 20px;

  margin-bottom: 0;

  color: var(--jnj-white-color);

  position: absolute;

  top: 10px;

  left: 15px;

  z-index: 1

}



.jnj-timeline-item .jnj-timeline-image:before {

  position: absolute;

  content: "";

  left: -22px;

  top: -52px;

  width: 100px;

  height: 100px;

  background: var(--jnj-primary-color);

  border-radius: 100%;

}



.jnj-timeline-item .jnj-timeline-image:after {

  position: absolute;

  content: "";

  left: -30px;

  top: -60px;

  width: 120px;

  height: 120px;

  background: var(--jnj-primary-color);

  border-radius: 100%;

  opacity: 0.5;

}



/*====================/====================/

                   List

/====================/====================*/

/********** List Item 1 **********/

.jnj-list-item-1 {

  list-style-type: none;

  padding: 0;

  margin: 0;

}



.jnj-list-item-1 .jnj-list-icon {

  color: var(--jnj-primary-color);

}



.jnj-list-item-1 .jnj-list-title {

  font-size: 18px;

  font-weight: 700;

  line-height: 28px;

  font-family: var(--jnj-font-family);

  color: var(--jnj-dark-color);

  margin-left: 10px;

}



.jnj-list-item-1 li {

  display: inline-flex;

  margin-bottom: 10px;

  width: 100%;

}



.jnj-list-item-1 li i {

  line-height: inherit;

}



/********** List Item 2 **********/

.jnj-list-item-2 {

  list-style-type: none;

  padding: 0;

  margin: 0;

}



.jnj-list-item-2 .jnj-list-icon {

  color: var(--jnj-white-color);

}



.jnj-list-item-2 .jnj-list-title {

  font-size: 16px;

  font-weight: 700;

  line-height: 26px;

  font-family: var(--jnj-font-family);

  color: var(--jnj-white-color);

  margin-left: 10px;

}



.jnj-list-item-2 li {

  display: inline-flex;

  margin-bottom: 10px;

  width: 100%;

}



.jnj-list-item-2 li i {

  line-height: inherit;

}



/*====================/====================/

         Owl Carousel Arrow and Dots

/====================/====================*/

/********** Owl Carousel Arrow **********/

.owl-carousel .owl-nav button.owl-next,

.owl-carousel .owl-nav button.owl-prev {

  width: 40px;

  height: 40px;

  outline: none;

  -webkit-transition: all 0.2s ease-out 0s;

  -moz-transition: all 0.2s ease-out 0s;

  -ms-transition: all 0.2s ease-out 0s;

  -o-transition: all 0.2s ease-out 0s;

  transition: all 0.2s ease-out 0s;

  background: var(--jnj-primary-color);

  color: var(--jnj-white-color);

  position: absolute;

  margin-top: -20px;

  line-height: 40px;

  top: 50%;

}



.owl-carousel .owl-nav button.owl-next:hover,

.owl-carousel .owl-nav button.owl-prev:hover {

  background: var(--jnj-dark-color);

}



.owl-carousel .owl-nav button.owl-prev {

  left: -80px;

}



.owl-carousel .owl-nav button.owl-next {

  right: -80px;

}



.owl-carousel .owl-nav button.owl-prev .flaticon-back:before {

  content: "\f10d";

}



.owl-carousel .owl-nav button.owl-next .flaticon-right-arrow:before {

  content: "\f10e";

}



/********** Owl Carousel Dots **********/

.owl-carousel .owl-dots {

  text-align: center;

  position: absolute;

  left: 50%;

  bottom: -30px;

  -webkit-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

  line-height: 10px;

}



.owl-carousel .owl-dots .owl-dot span {

  width: 10px;

  height: 10px;

  margin: 0 5px;

  display: block;

  -webkit-backface-visibility: visible;

  -webkit-transition: all 0.5s ease-in-out;

  transition: all 0.5s ease-in-out;

  background: var(--jnj-dark-color);

  color: var(--jnj-white-color);

}



.owl-carousel .owl-dots button.owl-dot.active span {

  background: var(--jnj-primary-color);

}



.owl-carousel .owl-dots button.owl-dot {

  box-shadow: inherit;

  outline: none;

}



.jnj-primary-color .owl-carousel .owl-dots .owl-dot span {

  background: var(--jnj-white-color);

}



/*====================/====================/

         Sidebar Custom Widget

/====================/====================*/

/********** Sidebar Banner **********/

.jnj-sidebar-banner {

  background: url(../images/jnj-sidebar-banner.jpg);

  background-repeat: no-repeat;

  position: relative;

  overflow: hidden;

  background-size: cover;

  background-position: center center;

}



.jnj-sidebar-banner:before {

  position: absolute;

  left: 0;

  top: 0;

  content: "";

  background: var(--jnj-dark-color);

  width: 100%;

  height: 100%;

  opacity: 0.7;

}



.jnj-sidebar-banner .jnj-sidebar-area {

  position: relative;

  z-index: 9;

}



.jnj-sidebar-banner .jnj-sidebar-area:after {

  position: absolute;

  left: 0;

  bottom: 0;

  content: "";

  width: 0;

  height: 0;

  border-bottom: 100px solid var(--jnj-dark-color);

  border-right: 120px solid transparent;

  z-index: 9;

}



.jnj-sidebar-banner h4 {

  color: var(--jnj-white-color);

  font-size: 30px;

  margin: 60px 50px 30px 40px;

  font-weight: 700;

}



.jnj-sidebar-banner .jnj-sidebar-logo {

  display: inherit;

  position: absolute;

  bottom: 15px;

  left: 15px;

  width: 46px;

  z-index: 99;

}




.jnj-sidebar-banner .jnj-sidebar-contact {

  background: var(--jnj-primary-color);

  color: var(--jnj-white-color);

  padding: 20px 20px 20px 120px;

  margin-top: 70px;

}



.jnj-sidebar-banner h6 {

  color: var(--jnj-white-color);

  font-size: 16px;

  line-height: 16px;

  margin: 0;

  font-weight: 600;

  margin-bottom: 10px;

}



.jnj-sidebar-banner h5 {

  color: var(--jnj-white-color);

  font-size: 20px;

  line-height: 20px;

  margin: 6px 0 0 0;

  font-weight: 700;

}



.jnj-sidebar-banner .jnj-sidebar-icon {

  font-size: 40px;

  margin-right: 15px;

  line-height: 40px;

}



.jnj-sidebar-banner .jnj-button-item-1 {

  margin-left: 40px;

  font-size: 15px;

  line-height: 14px;

  font-weight: 600;

  padding: 16px 24px;

  background: var(--jnj-white-color);

  color: var(--jnj-dark-color);

  font-family: var(--jnj-body-font-family);

  height: inherit;

}



.jnj-sidebar-banner .jnj-button-item-1:hover {

  background: var(--jnj-primary-color);

  color: var(--jnj-white-color);

}



/*====================/====================/

                   Download

/====================/====================*/

.jnj-download {

  position: relative;

  background: var(--jnj-white-color);

  padding: 20px;

  margin: 5px 0;

  display: inline-block;

  width: 100%;

}



.jnj-download h4 {

  font-size: 18px;

  line-height: 18px;

  margin: 0;


}



.jnj-download h6 {

  font-size: 12px;

  line-height: 12px;

  background: var(--jnj-primary-color);

  color: var(--jnj-white-color);

  text-transform: uppercase;

  display: inline-block;

  padding: 8px 12px;

  position: absolute;

  right: 10px;

  top: 0;

  margin-bottom: 0;

}



/*====================/====================/

                 Breadcrumb

/====================/====================*/

.jnj-breadcrumb {

  padding: 125px 0;

  position: relative;

}

.jnj-breadcrumb:before{

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: var(--jnj-dark-color);

  opacity: 0.8;

}



.jnj-breadcrumb .jnj-title {

  color: var(--jnj-white-color);

  font-weight: 700;

  font-style: normal;

  font-size: 42px;

  line-height: 52px;

}



.jnj-breadcrumb .jnj-breadcrumb-item {

  background: rgba(255, 255, 255, 0.05);

  color: var(--jnj-primary-color);

  display: inline-block;

  padding: 15px 25px;

  margin-top: 15px;

  font-weight: 600;

}



.jnj-breadcrumb .jnj-breadcrumb-item a {

  color: var(--jnj-white-color);

}



.jnj-breadcrumb .jnj-breadcrumb-item .separator {

  margin: 0 8px;

  color: var(--jnj-white-color);

}



.jnj-breadcrumb .jnj-breadcrumb-item .jnj-bread {

  color: var(--jnj-white-color);

}



.jnj-breadcrumb-one {

  background-color: var(--jnj-dark-color);

  padding: 70px 0px;

}



.jnj-breadcrumb-one h2.jnj-title {

  color: var(--jnj-white-color);

  margin-bottom: 0px;

  font-weight: 700;

  font-size: 50px;

  line-height: 60px;

}



/*====================/====================/

            jnj-video-btn-icon

/====================/====================*/

.jnj-video-btn-icon a {

  font-size: 25px;

  color: var(--jnj-primary-color);

  position: relative;

  width: 120px;

  height: 120px;

  line-height: 120px;

  border-radius: 100%;

  background: #fff;

  text-align: center;

  display: inline-block;

}



.jnj-popup-video-item i {

  background: rgba(255, 255, 255, 0.1);

  width: 100px;

  height: 100px;

  line-height: 100px;

  border-radius: 100%;

}



.jnj-video-btn-icon a:before {

  position: absolute;

  content: '';

  left: 0;

  top: 0;

  opacity: 0;

  border: 1px solid var(--jnj-White-color);

  height: 100%;

  width: 100%;

  border-radius: 100%;

  -webkit-animation: pulse-border-2 1.5s linear infinite;

  -moz-animation: pulse-border-2 1.5s linear infinite;

  -o-animation: pulse-border-2 1.5s linear infinite;

  animation: pulse-border-2 1.5s linear infinite;

}



.jnj-video-btn-icon a:after {

  position: absolute;

  left: 0;

  top: 0;

  content: '';

  opacity: 0;

  border: 1px solid var(--jnj-white-color);

  height: 100%;

  width: 100%;

  border-radius: 100%;

  -webkit-animation: pulse-border 1s linear infinite;

  -moz-animation: pulse-border 1s linear infinite;

  -o-animation: pulse-border 1s linear infinite;

  animation: pulse-border 1s linear infinite;

}



@-webkit-keyframes rotation {

  from {

    -webkit-transform: rotate(0deg);

  }



  to {

    -webkit-transform: rotate(359deg);

  }

}



@keyframes pulse-border {

  0% {

    transform: scale(1.0);

    -webkit-transform: scale(1.0);

    opacity: 1;

  }



  100% {

    transform: scale(1.3);

    -webkit-transform: scale(1.3);

    opacity: 0;

  }

}



@keyframes pulse-border-2 {

  0% {

    transform: scale(1.0);

    -webkit-transform: scale(1.0);

    opacity: 1;

  }



  100% {

    transform: scale(1.5);

    -webkit-transform: scale(1.5);

    opacity: 0;

  }

}

/********** jnj-popup-video-item-2 **********/

.jnj-popup-video-item-2.jnj-video-btn-icon a:after,

.jnj-popup-video-item-2.jnj-video-btn-icon a:before{

  content: none;

}

.jnj-popup-video-item-2.jnj-video-btn-icon a{

  font-size: 16px;

  color: var(--jnj-primary-color);

  width: 40px;

  height: 40px;

  line-height: 40px;

  border-radius: inherit;

  background: var(--jnj-white-color);

  position: absolute;

  left: 50%;

  top: 50%;

  -webkit-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

}

.jnj-popup-video-item-2 .jnj-popup-video-item i{

  background: transparent;

  width: inherit;

  height: inherit;

  line-height: inherit;

  border-radius: inherit;

}

.jnj-popup-video-item-2{

  background-image: url(https://jandjteams.com/wordpress/transpro/wp-content/uploads/2021/08/blog-img3.jpg);

  width: 100%;

  height: 100px;

  background-position: center center;

  background-size: cover;

  position: relative;

}



/*====================/====================/

               Custom Css

/====================/====================*/

.jnj-border-primary-1 .elementor-widget-container {

  position: relative;

}



.jnj-border-primary-1 .elementor-widget-container:before {

  position: absolute;

  left: 10px;

  top: 10px;

  content: "";

  border: 1px solid var(--jnj-primary-color);

  height: 100%;

  width: 100%;

  border-radius: 0px;

  z-index: -1;

  -webkit-transition: all 0.5s ease-in-out;

  transition: all 0.5s ease-in-out;

}



.jnj-border-primary-2.elementor-column .elementor-element-populated:before {

  position: absolute;

  left: 10px;

  top: 10px;

  content: "";

  border: 1px solid var(--jnj-primary-color);

  height: 100%;

  width: 100%;

  z-index: -1;

  -webkit-transition: all 0.5s ease-in-out;

  transition: all 0.5s ease-in-out;

}



.jnj-quote-bg {

  position: relative;

}



.jnj-quote-bg:before {

  position: absolute;

  left: -30px;

  top: 0;

  height: 100%;

  width: 30px;

  background: var(--jnj-dark-color);

  content: "";

}



.jnj-vertical-heading h2.elementor-heading-title {

  writing-mode: vertical-lr;

  transform: rotate(180deg);

  text-orientation: sideways;

  top: 0;

  right: 0;

  letter-spacing: 0px;

  -webkit-transition-delay: .35s;

  transition-delay: .35s;

  text-align: center;

  padding: 40px 20px;

  font-weight: 700;

  color: var(--jnj-white-color) !important;

  background: var(--jnj-dark-color);

  font-size: 18px;

}



.jnj-text-primary-color {

  color: var(--jnj-primary-color);

  font-weight: 700;

}



.jnj-redirect-link {

  font-family: var(--jnj-font-family);

  font-size: 18px;

  font-weight: 600;

  color: var(--jnj-dark-color);

}



.jnj-redirect-link a {

  color: var(--jnj-primary-color);

  border-bottom: 1px solid var(--jnj-primary-color);

}



.jnj-redirect-link a:hover {

  color: var(--jnj-dark-color);

  border-bottom: 1px solid var(--jnj-dark-color);

}



/*====================/====================/

               Signature Css

/====================/====================*/

/********** Signature Item 1 **********/

.jnj-signature-item-1 .jnj-signature-icon {

  width: 70px;

  height: 70px;

  border: 2px solid var(--jnj-primary-color);

  margin-right: 15px;

  text-align: center;

  line-height: 65px;

  border-radius: 100%;

}



.jnj-signature-item-1 .jnj-signature-icon img {

  width: 54px;

  height: 54px;

  border-radius: 100%;

}



.jnj-signature-item-1 .jnj-signature-title {

  color: var(--jnj-dark-color);

  font-size: 15px;

  font-weight: 600;

  margin-top: 6px;

}



/*====================/====================/

                   banner

/====================/====================*/

.popup-color {

  color: var(--jnj-primary-color);

}



/*====================/====================/

                   Faq form

/====================/====================*/

.jnj-faq-form{

  padding: 40px;

  background-color: var(--jnj-light-color);

}



.jnj-faq-form h5{

  margin-bottom: 20px;

}



.jnj-faq-form input,

.jnj-faq-form textarea{

  background-color: var(--jnj-white-color);

}

/*====================/====================/

                   Marquee

/====================/====================*/

marquee.marquee-1 span{

  font-size: 150px;

  line-height: 200px;

  font-weight: 700;

  color: #fff;

  -webkit-text-stroke-width: 1px;

  -webkit-text-stroke-color: #e2e3e4;

  margin: 0 100px;

  }