/*** General CSS ***/
body {
    line-height: 1.9em;
    color: #333;
}
a:hover, a:focus, a:active {
    color: #000;
}

/*** Header Area ***/
/* Header Top */
#sp-top-bar {
    position: relative;
    z-index: 9999;
    box-shadow: 0 0 4px 0 rgb(0 0 0 / 10%);
  	color: #fff;
  	background: #1b4962;
}
#sp-top-bar a {
  	color: #fff;
}

/* Header Menu */
#sp-header {
    top: 0px;
  	padding: 0px;
    height: inherit;
    background: #fff;
  	box-shadow: 0 0 4px 0 rgb(0 0 0 / 10%);
}
#sp-header > .container {
    max-width: 100%;
    padding: 0 5%;
}
#sp-header.header-sticky {
    position: fixed;
    top: 0;
  	background: #fff;
  	box-shadow: 0 0 4px 0 rgb(0 0 0 / 10%);
}
body:not(.home) #sp-header {
    background: #fff;
    position: static;
}
body:not(.home) #sp-header.header-sticky {
    position: fixed;    
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a {
    color: #252525;
  	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;
    color: #000;
}
.sp-megamenu-parent>li.active>a {
    font-weight: 600;
}
.sp-megamenu-parent > li {
    position: relative;
}
#sp-menu ul.social-icons a {
    color: #fff;
}
.sp-megamenu-parent > li > a:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 60%;
    top: 0;
    height: 3px;
    display: inline-block;
    background-color: #554D89;
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.sp-megamenu-parent > li:hover > a:before, 
.sp-megamenu-parent > li.focus > a:before, .sp-megamenu-parent > li.active > a:before {
    opacity: 1;
}
.sp-megamenu-parent > li:last-child a {
    color: #fff !important;
    line-height: 24px;
    padding: 12px 15px;
    border-radius: 5px;
    background-color: #222;
}

/* 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: #000;
}
.offcanvas-menu > .align-items-center {
    background: #fff;
}
.offcanvas-active .burger-icon>span, #modal-menu-toggler.active .burger-icon>span {
    background-color: #000;
}

/*** Block Styles ***/
/* Button */
.button {
    font-size: 16px;
    padding: 18px 25px;
    background: #BA43FC;
    color: #fff !important;
    text-transform: capitalize;
    overflow: hidden;
    display: inline-block;
    border-radius: 5px;
}
.button:hover {
    color: #FFFFFF !important;
    cursor: pointer;
    background-color: #6852ED !important;
}
.button.color {
    border: none !important;
    background-color: transparent !important;
}
.button.color:hover {
    color: #EF7171 !important;
}
#sp_qc_submit: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);
    background-color: #C19855 !important;
    color: #fff !important;
}

/* Slider */
.silder .button {
  	display: inline-block;
    overflow: hidden;
  	margin-bottom: 20px;
}
.btn-slider {
  	font-size: 17px;
    padding: 9px 25px;
    background: #fff;
    margin-right: 20px;
  	color: #FF0437;
    text-transform: uppercase;
    overflow: hidden;
    display: inline-block;
    border-radius: 5px;
}
.button-slider {
    background: #ba43fc;
    border: none !important;
    color: #fff !important;
    text-transform: capitalize;
    overflow: hidden;
    display: inline-block;
    font-size: 20px !important;
    padding: 8px 28px !important;
}
.button-slider:hover {
    color: #fff !important;
}
.button-slider:hover {
    background: #fff;
}

/* Button */
.icon-link a:hover {
    color: #fff !important;
}
.btn.color {
    font-size: 12px;
}

/* Title */
.title h2 {
    color: #12265A;
    font-size: 60px;
    font-weight: 600;
}
.title-icon {
    max-width: 170px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.title-icon:before {
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    z-index: -1;
    top: 12px;
    left: 0;
}
.title-icon i {
  	padding: 0 10px;
}

/* Bg */
.bg-colum {
    border-radius: 0px 1000px 1000px 0px;
}

/* Services */
.services-item svg {
  	fill: #554D89;
  	width: 60px;
}
.services-item .sppb-addon-content h3 {
    font-size: 18px;
    margin-top: 15px;
}
.services-item {
    padding: 30px 30px 10px 30px;
    background-color: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0px 0px 20px 0px #e1e4ed;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    margin-bottom: 30px;
}
.services-item:hover {
  	box-shadow: 0px 0px 10px 0px rgb(104 82 237 / 44%);
}

/* Pricing */
.pricing-colum {
    padding: 50px 30px 30px;
    background-color: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0px 0px 20px 0px #e1e4ed !important;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    margin-bottom: 30px;
}
.pricing-colum:hover {
    box-shadow: 0px 0px 10px 0px rgb(104 82 237 / 44%)!important;
}
.pricing-colum .list-pricing {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.pricing-colum .list-pricing li {
    line-height: 32px;
}
.pricing-colum .list-pricing strong {
    display: none;
}
.pricing-colum .list-pricing em {
    padding-right: 10px;
    font-size: 18px;
}


/* Feature */
.services-item.feature, .services-item.feature:hover {
    padding: 0;
    box-shadow: none !important;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    margin-bottom: 50px !important;
}

/* Dirived */
.dirived {
    margin: 0 auto;
}

/* Counter */
.counter-colum {
    padding: 30px 30px 30px 30px;
    background-color: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0px 0px 20px 0px #e1e4ed !important;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.counter-colum:hover {
    box-shadow: 0px 0px 10px 0px rgb(104 82 237 / 44%) !important;
}
.counter-item .count, .counter-item #shiva {
    line-height: 60px;
    font-weight: 500;
    font-size: 45px;
    color: #BA43FC;
}

/* About */
.about-colum .clearfix:first-child {
    clear: left;
}
.about-colum .clearfix {
    float: left;
}
.about-img-01 img {
    border-radius: 237px 237px 80px 237px;
}
.about-img-02 img {
    border-radius: 237px 237px 237px 80px;
}

/* Testimonial */
.testimonial-name {
    font-size: 20px;
    font-weight: 600;
    margin-top: 15px;
}
.testimonial-job {
    color: #bfbfbf;
    font-size: 15px;
    font-weight: 300;
    margin-top: -5px;
}

/* Successful */
.successful .title h3 {
    font-size: 22px;
    margin: 0;
}
.successful .title h3 span {
    color: #EF7171 !important;
}

/* Support */
.support img {
    border-radius: 0px 1000px 1000px 0px;
}

/* Questions */
.button-questions strong {
    display: none;
}
.button-questions em {
    padding-left: 10px;
}
.button-questions:hover {
    color: #EF7171 !important;
}

/* Team */
.team-item img {
    border-radius: 125px 125px 125px 40px;
}

/* Skill */
.skill {
    position: relative;
}
.skill:before {
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    content: '';
    position: absolute;
    background: linear-gradient(135deg, rgba(0,0,0,0.33) 0%, rgba(246,131,56,0.67) 100%);
    z-index: -1;
    opacity: 1;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}
.bar .sppb-row-container {
    margin-top: -250px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.18);
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    padding: 90px 50px 20px;
}
.skill-left #skill li p {
    color: #000 !important;
}
#skill { 
    list-style: none;
    position: relative;
    padding-left: 0;
}
#skill li { 
    margin-bottom: 60px; 
    background: #eee;
    height: 18px; 
    border-radius: 20px;    
}
#skill li h3, #skill li p { 
    position: relative;
    top: -25px;
    color: #000;
    font-size: 15px;
    font-weight: 500;
    float: left;
    width: 100%;
}
#skill li p { 
    text-align: right;
    font-size: 15px;
}
.bar { 
    height: 18px;  
    position:absolute;
    border-radius: 20px;   
}
.graphic-design {
    width: 90%; 
    -moz-animation:graphic-design 2s ease-out;
    -webkit-animation:graphic-design 2s ease-out;
}
.html-css {
    width: 80%;
    -moz-animation:html-css 2s ease-out;
    -webkit-animation:html-css 2s ease-out;
}
.jquery {
    width: 86%;
    -moz-animation:jquery 2s ease-out;
    -webkit-animation:jquery 2s ease-out;
}
.thread {
    width: 70%;
    -moz-animation:jquery 2s ease-out;
    -webkit-animation:jquery 2s ease-out;
}
@-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%;}  }


/* Say */
.say .title-icon:before {
    background: #fff !important;
}
.say .title-icon i {
    color: #fff !important;
}
.say .button {
    background: #ffc107 !important;
}

/* Questions */
.questions .title-icon:before {
    background: #fff !important;
}
.questions .title-icon i {
    color: #fff !important;
}

/* Bg Title */
.bg-title .sppb-addon-content {
    margin-top: -50px;
}
.bg-title h4 {
    font-size: 55px;
    font-weight: 600;
}
.bg-title h6 {
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.63);
} 

/* 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%);
}
/*** Video ***/
.et-video {
    position: relative;
}
.video-item {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}
.video-item figure {
    position: relative;
    width: 100%;
    font-size: 0;
}
.video-item figure img {
    width: 100%;
}
.video-item figure a:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    width: 85px;
    border: 4px solid #BA43FC;
    height: 85px;
    border-radius: 50%;
    background-color: #BA43FC;
    z-index: 10;
}
.video-item figure a:after {
    content: '';
    position: absolute;
    top: 32px;
    width: 15px;
    height: 15px;
    left: 37px;
    border: solid 11px transparent;
    border-left: solid 17px;
    border-left-color: #fff;
    z-index: 10;
}
.modal-open {
    overflow: hidden;
}
.lightbox {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 120px 10px;
    display: none;
    box-sizing: border-box;
    overflow: auto;
    z-index: 100;
}
.popup-modal {
    position: relative;
    margin: 0 auto;
    display: none;
}
.popup-modal .close {
    position: absolute;
    top: 18px;
    right: 30px;
    width: 28px;
    height: 28px;
    border: solid 1px #004eff;
    border-radius: 50%;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    cursor: pointer;
}
.popup-modal .close:before {
    position: absolute;
    width: 14px;
    height: 2px;
    top: 50%;
    left: 50%;
    margin-left: -7px;
    background-color: #004eff;
    content: '';
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.popup-modal .close:after {
    position: absolute;
    width: 14px;
    height: 2px;
    top: 50%;
    right: 50%;
    margin-right: -7px;
    background-color: #004eff;
    content: '';
    -ms-transform: translateY(-50%) rotate(90deg);
    -webkit-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
}
.popup-modal .close:hover {
    border-color: #ff2700;
}
.popup-modal .close:hover:before {
    background-color: #ff2700;
}
.popup-modal .close:hover:after {
    background-color: #ff2700;
}
.post-popup {
    width: 100%;
    max-width: 875px;
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
}
.post-popup .popup-header {
    padding: 20px 30px;
    font-size: 14px;
    margin-right: 60px;
}
.post-popup .popup-video {
    font-size: 0;
}
.post-popup .popup-video video {
    width: 100%;
}
.post-popup .popup-video img {
    width: 100%;
}
.post-popup .popup-main {
    padding: 40px 30px;
}
.post-popup .popup-main p {
    margin: 0 0 10px 0;
}

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

/* Bottom */
#sp-bottom2 strong {
   display: none;
}
#sp-bottom2 em {
  	padding-right: 10px;
}
#sp-bottom3 ul {
   width: 50%;
   float: left;
}

/* Footer Copyright */
#sp-footer {
    text-align: center;
    display: inline-block;
    width: 100%;
}
#sp-footer .container-inner {
    border-top: 1px solid rgba(255,255,255,.1);
}
#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: 70px;
    }
  	#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,
.slider-item .sppb-btn-success, .sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-info:hover,
.sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-overlay-wrapper .sp-simpleportfolio-overlay, .slider-btn a:hover,
.bar, .sp-megamenu-parent > li:last-child a {
 	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,
.button.color, .title h3, .testimonial-name, .services-item h3, .title-big h1, .title-small p, #sp-bottom a:hover {
  	color: var(--text-color) !important; 
}
.btn.bg:hover {
  	border-color: var(--text-color) !important;
}