/*** General CSS ***/
body {
    line-height: 1.9em;
}

/*** Header Area ***/
/* Header Top */
#sp-top-bar {
    position: relative;
    z-index: 9999;
}

/* Header Menu */
#sp-header {
    top: 0;
    height: inherit;
    box-shadow: 0 0 4px 0 rgb(0 0 0 / 10%);
    padding: 0;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    width: 100%;
    z-index: 9999;
    position: relative;
}
#sp-header > .container {
	max-width: 100%;
	padding-left: 5%;
	padding-right: 5%;
}
#sp-header .logo {
	position: absolute;
	/*height: 128px;
	padding-top: min(15px,1%);*/
	height: auto;
	/*padding-top: min(15px,1vw);*/
	padding: min(1%,3vw) 0 20px 20px;
	background: #fff;
	border-radius: 85px;
	box-shadow: 0px 0px 10px 10px #FFF;
}
#sp-header.header-sticky {
    position: fixed;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.10);
    top: 0;
}
body:not(.home) #sp-header {
    box-shadow: 0 0 4px 0 rgb(0 0 0 / 10%);
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a {
  	font-size: 14px !important;
    font-weight: 400 !important;
    padding: 10px 0;
}
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
    text-transform: capitalize;
    position: relative;
}
.sp-megamenu-parent>li.active>a {
    font-weight: 600;
}
.sp-megamenu-parent > li {
    position: relative;
}

/* Canvas Menu */
.offcanvas-menu .offcanvas-inner .menu-child > li a {
    padding: 12px 10px !important;
    border-bottom: 1px solid rgba(197, 153, 153, 0.21);
    display: inherit;
}
.offcanvas-menu .offcanvas-inner ul.menu>li>a, .offcanvas-menu .offcanvas-inner ul.menu>li>span {
    font-size: 15px;
    font-weight: 500;
}
.burger-icon>span {
    background-color: #12265a;
}
.offcanvas-menu > .align-items-center {
    background: #fff;
}
.offcanvas-active .burger-icon>span, #modal-menu-toggler.active .burger-icon>span {
    background-color: #12265a;
}

/*** Block Styles ***/
/* Button */
.btn {
    position: relative;
    display: inline-block;
    width: auto;
    margin: 0;
    font-weight: 500;
    font-family: inherit;
    line-height: 2em;
    border: 2px solid #fff;
    letter-spacing: .02em;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 40px;
    cursor: pointer;
    text-transform: capitalize;
    color: #fff!important;
    border-radius: 5px;
    background-color: transparent;
}
.btn:hover {
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05), 0px 2px 2px rgba(0, 0, 0, 0.05), 0px 4px 4px rgba(0, 0, 0, 0.05), 0px 8px 8px rgba(0, 0, 0, 0.05), 0px 16px 16px rgba(0, 0, 0, 0.05);
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
    border: 2px solid #fff !important;
}
.button, .btn.button:hover {
    background-color: #3ED09C !important;
    border-color: #3ED09C !important;
}
.btn-word {
    color: #fff !important;
}

/* Slider */
.slider {
    position: relative;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
}
.slider:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    display: inline-block;
    background-image: url('../../../images/template/j21-bg2.svg');
    background-position: -65px 609px;
    background-repeat: no-repeat;
    /*background-size: auto;
*/
    background-size: 270px 1325px;
    opacity: 1;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}

/* Title */
.title h6 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 0;
    text-transform: capitalize;
}
.title h1 {
    color: #222D38;
    font-size: 50px;
    font-weight: 800;
    line-height: 60px;
    margin: 0 0 25px;
}
.title h2 {
    color: #222D38;
    font-size: 32px;
    font-weight: 800;
    line-height: 40px;
    margin: 0 0 25px;
}
.title.white h6,
.title.white h2 {
    color: #fff !important;
}
.title .text {
    color: #C19855;
    margin-bottom: 20px;
}

/* Skill */
#skill { 
    list-style: none;
    position: relative;
    padding-left: 0;
}
#skill li { 
    margin-bottom: 70px; 
    background: #DFE2E9;
    height: 7px; 
    border-radius: 10px;    
}
#skill li h3 { 
    position: relative;
    top: -28px;
    color: #3B434A;
    font-size: 16px;
    font-weight: 700;
}
.bar { 
    height: 7px;  
    position:absolute;
    border-radius: 10px;   
}
.graphic-design {
    width: 90%; 
    -moz-animation:graphic-design 2s ease-out;
    -webkit-animation:graphic-design 2s ease-out;
    background-color: #3ED09F;
}
.html-css {
    width: 80%;
    -moz-animation:html-css 2s ease-out;
    -webkit-animation:html-css 2s ease-out;
    background-color: #2B6BF3;
}
.jquery {
    width: 86%;
    -moz-animation:jquery 2s ease-out;
    -webkit-animation:jquery 2s ease-out;
    background-color: #FDC42D;
}

@-moz-keyframes graphic-design {0%  { width:0px;} 100%{ width:100%;}  }
@-moz-keyframes html-css        { 0%  { width:0px;} 100%{ width:90%;}  }
@-moz-keyframes jquery      { 0%  { width:0px;} 100%{ width:65%;}  }
@-moz-keyframes wordpress   { 0%  { width:0px;} 100%{ width:80%;}  }

@-webkit-keyframes graphic-design       { 0%  { width:0px;} 100%{ width:100%;}  }
@-webkit-keyframes html-css        { 0%  { width:0px;} 100%{ width:90%;}  }
@-webkit-keyframes jquery      { 0%  { width:0px;} 100%{ width:65%;}  }
@-webkit-keyframes wordpress   { 0%  { width:0px;} 100%{ width:80%;}  }

/* Testimonial */
.testimonial-column {
    box-shadow: 0px 0px 10px 0px rgb(159 159 158 / 58%);
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    margin: 10px 10px 10px 10px;
    padding: 0px 0px 0px 0px;
    position: relative;
}
.testimonial-column:after {
    position: absolute;
    bottom: 0;
    left: 24%;
    content: "";
    height: 4px;
    width: 100px;
    background-color: #b79c7d;
}
.testimonial-content-title h4 {
    color: #002072;
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 15px;
}
.testimonial-content i {
    margin: 7px 0 25px;
}
.testimonial-content h6 {
    color: #bfbfbf;
    font-size: 15px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.testimonial-content h3 {
    color: #002072;
    font-size: 30px;
    font-weight: 900;
    margin-top: 20px;
}

/* Counter */
.counter {
    position: relative !important;
    z-index: 99 !important;
    margin-bottom: -100px !important;
}
.counter .sppb-row-container {
    background-image: url('../images/counter-bg.png');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px;
}
.counter-item .counter.col_fourth,
.counter-item .counter.col_fourth h2 {
    display: inline-block;
    text-align: center;
}
.counter-item .elementor-counter-number-suffix {
    position: relative;
    top: -3px;
    left: -8px;
}
.counter-item .counter.col_fourth h2 {
    font-size: 37px;
    font-weight: 600;
    line-height: 40px;
}
.counter-item .counter.col_fourth h2.elementor-counter-number-suffix {
    font-size: 30px;
}
.counter-item .count-text {
    font-size: 16px;
    font-weight: 500;
    margin-top: 0;
    text-transform: capitalize;
    line-height: 38px;
    color: #222D38;
}
.wrapper {
    text-align: center;
}
.counter-about .counter-item .counter.col_fourth h2.count-number,
.counter-about .counter-item .counter.col_fourth h2.elementor-counter-number-suffix,
.counter-about .counter-item .count-text {
    color: #fff !important;
}

/* Tab */
.tab .sppb-panel-heading {
    border-width: 0px;
    border-color: rgba(191,191,191,0);
    text-transform: uppercase;
    text-transform: capitalize;
}
.tab .sppb-panel-heading .sppb-panel-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    color: #222D38;
}
.tab  .sppb-panel-body {
    padding: 15px;
    border-top: none;
}
.sppb-panel-modern,
.sppb-panel-modern>.sppb-panel-heading {
    background: none;
    border: 0;
}
.sppb-panel-modern .sppb-panel-body {
    border: 0;
}
.sppb-panel-heading.active {
    padding-bottom: 0!important;
}

/* Client */
h4.testimonial-name {
    color: #222D38;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    margin: 0;
}
h5.testimonial-job {
    color: #74818C;
    font-size: 15px;
    font-weight: 500;
    line-height: 28px;
}

/* Transition */
.transition-img img:hover {
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    transition: all 500ms ease;
}
.transition-img img:hover {
    transform: scale(0.9);
}

/* Feature */
#feature01 .sppb-row-container {
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

/* History */
.history-text .sppb-addon-title {
    width: 25%;
    float: left;
}
.history-text .sppb-addon-content {
    width: 75%;
    float: left;
}
.history-text .sppb-addon-content h4 {
    font-size: 18px;
    font-weight: 700;
}
.content-border .sppb-addon-content p {
    padding-bottom: 1rem;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.our .content-border .sppb-addon-content p {
    border-bottom: 1px solid #DFE6F4;
    padding-bottom: 20px;
}

/* Images */
.images {
    position: relative !important;
    z-index: 99 !important;
    margin-top: -50px !important;
}
.images .sppb-row-container {
    background-color: #fff;
    border-radius: 5px;
        padding: 30px 0 45px;
    box-shadow: 0px 15px 38px 0px rgba(75, 116, 235, 0.2);
}

/* Blog */
.jmm-item .jmm-image.mod-article-image {
  	overflow: hidden;
}
.jmm-image.mod-article-image img {
  	transform: scale(1);
  	-webkit-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}
.jmm-item:hover .jmm-image.mod-article-image img {
  	transform: scale(1.12);
  	filter: grayscale(100%);
}

/* Contact Info */
.contact-info h2, .contact-info h3 {
    font-size: 25px;
}
button.btn.btn-primary.validate {
    color: #fff !important;
    padding: 13px 20px;
}

/* Bottom */
#sp-bottom > .container {
	max-width: 100%;
	padding-left: 5%;
	padding-right: 5%;
}
#sp-bottom3 li em {
    margin-right: 10px;
    color: #2B6BF3;
}
#sp-bottom3 li strong {
    display: none;
}
#sp-bottom p, #sp-bottom a {
    line-height: 2.2;
}

/* Footer Copyright */
#sp-footer {
    text-align: center;
    display: inline-block;
    width: 100%;
}
#sp-footer .container-inner {
    border-top: 1px solid #252525;
}
#sp-footer1 {
  	padding-top: 5px;
}

/*** Responsive Layout ***/
/* Tablet Landscape Layout */
@media (min-width: 1400px) {
    .sppb-row-container {
      	max-width: 1320px;
    }
}

/* Mobile Standard Layout */
@media (max-width: 768px) {
	#sp-header, #sp-header .logo {
        height: 100px;
    }
  	#sp-footer p {
  		text-align: center;
	}
  	body #sp-header {
      	padding: 0;
	}
  	#sp-header {
    	top: 0px;
	}
  	.jm-category-module.default .jmm-rows.rows-3 > div > .jmm-item {
    	width: 98%;
    	margin: 20px 1%;
	}
}

/* Mobile Small Resolution */
@media (max-width: 480px) {
  	.category .sppb-column-addons .clearfix:nth-child(n+2) {
    	width: 100%;
    	margin-right: 0;
	}
}

/* General color defination
Color value depend on preset color that picking on template settings > Presets
*/

:root {
  --background-color: currentColor;
  --background: currentColor;
  --text-color: currentColor;
}
.page-item.active .page-link, .sp-simpleportfolio .sp-simpleportfolio-filter>ul>li.active>a, a.hikabtn.hikacart,
.sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-info:hover,
.sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-overlay-wrapper .sp-simpleportfolio-overlay,
.feature, .form, .history, .counter-about, .testimonial, .btn:hover, .offered, .btn-word {
 	background-color: var(--background-color) !important;
}
.article-list .article .readmore a:hover, .article-list .article .readmore a:active, .article-list .article .article-header h2 a:hover,
.title h6, .about-icon i, .counter-item .counter.col_fourth h2.count-number,
.counter-item .elementor-counter-number-suffix, .tab .sppb-panel-heading.active i, .tab .sppb-panel-heading.active .sppb-panel-title {
  	color: var(--text-color) !important; 
}
.dirider {
  	border-color: var(--text-color) !important;
}