/*
Theme Name: hello-elementor-child
Author: 
Description: Your description goes here
Version: 1.0
Template: hello-elementor

This is the child theme for Hello Elementor theme, generated with Generate Child Theme plugin by catchthemes.

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/
.header-call p.elementor-icon-box-description a {
    color: #000;
}

a.elementor-button.elementor-button-link span {
    position: relative;
}

a.elementor-button.elementor-button-link span:before {
    content: url("https://jnkt.co.za/wp-content/uploads/2025/02/arrow.png");
    position: absolute;
    left: 70%;
    top: -5px;
    width: 100%;
    height: 20px;
    transform: rotate3d(1, 1, 1, 55deg);
}

.hero-2 .hero-shape2-1 {
    left: 0;
    bottom: 5%;
}
.shape-mockup {
    position: absolute;
    z-index: -1;
}

#about-us figure.elementor-image-box-img {
    border-radius: 15px !important;
    background: #f2f2f2;
    padding: 10px;
    text-align: center;
    transition: 0.5s;
}

#about-us .elementor-image-box-wrapper:hover figure.elementor-image-box-img img {
    transform: rotateY(180deg);
    filter: brightness(9) grayscale(9);	
}

#whychooseus .choose-us-box:hover .elementor-image-box-img img {
	 transform: rotateY(180deg);
}

#whychooseus .elementor-image-box-wrapper {
	position:relative;
	
}
#whychooseus .elementor-image-box-wrapper:before {
    content: '';
    position: absolute;
    top: -8px;
    left: -15px;
    width: 52px;
    height: 52px;
    background: #0277fa24;
    border-radius: 50%;
    z-index: 0;
}

#whychooseus .elementor-image-box-img {
	z-index: 9;
}

#about-us .elementor-image-box-wrapper:hover figure.elementor-image-box-img {
   background-color: #0277FA;
}
.stroke-text {
	-webkit-text-stroke: 0.5px #fff;
}

.jump-reverse {
    animation: jumpReverseAni 7s linear infinite;
}

.bg-shape {
	filter: brightness(0) contrast(50%) !important;
}
.about-counter-wrap.style2 { 
    background-position: right bottom;    
}
@keyframes jumpReverseAni {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(30px);
  }
  100% {
    transform: translateY(0);
  }
}
.about-counter-wrap.style2.jump-reverse {
    animation: jumpReverseAni 7s linear infinite;
}
/* 
 * ============btn css start====== */
.common-btn a{
transition: color .15sease-in-out,
background-color .15sease-in-out,
	border-color .15sease-in-out,
	box-shadow .15sease-in-out;
	 overflow: hidden;
		position: relative;
    z-index: 2;
}
.common-btn a::before {
	background-color:#0277FA;
	content: "";
    display: block;
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%);
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    transition: 1s;
}
.common-btn a::after {
    content: "";
    display: block;
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%);
    position: absolute;
    z-index: -1;
    background-color:#0277FA;
    border-radius: 50%;
    transition: 1s;
	left: calc(100% + 2em);
    top: calc(100% + 2em);
}
.btn-style-2 a::after, .btn-style-2 a::before{
	 background-color:#000 !important;
}
.common-btn a:hover{
	transition: color .15sease-in-out, background-color .15sease-in-out, border-color .15sease-in-out, box-shadow .15sease-in-out;
}
.common-btn a:after {
    left: calc(100% + 2em);
    top: calc(100% + 2em);
}
.common-btn a:focus:after, .common-btn a:focus:before, .common-btn a:hover:after, .common-btn a:hover:before, .common-btn a:active:after, .common-btn a:active:before {
    height: 420px;
    width: 420px;
}
.common-btn a:before {
    top: -2em;
    left: -2em;
}



/* ======animation============== */
@keyframes ShapeAnim {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top left 2000px;
  }
}
.animation-infinite {
    animation: ShapeAnim 80s linear infinite;
    height: 30px;
    width: 100%;
    background-repeat: repeat;
    overflow: hidden;
}

.jump-reverse {
  animation: jumpReverseAni 7s linear infinite;
}

#services-products .services-list {
    gap: 50px;
}

/* ---customize-css-- */
.ul_class li img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}
.ul_class li {
   display: flex;
    align-items: center;
    list-style: none;
    line-height: 21px;
    padding: 5px;
text-transform: capitalize;
}
.ul_class li:hover {
    background-color: #fff;
    color: #000;
    padding: 5px;
    border-radius: 5px;
}

.ul_class li:hover img {
    filter: invert(1) sepia(1) saturate(500%) hue-rotate(180deg);
}

.ul_class {
    padding-left: 0px;
}
input#form-field-name:hover,
input#form-field-name:focus,
input#form-field-phone:hover,
input#form-field-phone:focus,
input#form-field-email:hover,
input#form-field-email:focus,
textarea#form-field-message:hover,
textarea#form-field-message:focus   {
    border: 2px solid #0277FA;
}

input#form-field-name,
input#form-field-name,
input#form-field-phone,
input#form-field-phone,
input#form-field-email,
input#form-field-email,
textarea#form-field-message{
    border: 2px solid #fff;
}
.footer-link li.elementor-icon-list-item:hover {
    text-decoration: underline;
    color: #ffffff;
		text-underline-offset:10px;		
		
}
.address-icon .elementor-icon-box-title {
    margin-top: -2px;
}
.address-icon .comments-area a, .page-content a, .address-icon.comments-area a:hover, .page-content a:hover  {
    text-decoration: none !important;
    color: #fff;
}
.contact-form-popup input,
.contact-form-popup textarea {
    border: 1px solid #000000 !important;
}

.contact-form-popup input,
.contact-form-popup textarea {
    border: 1px solid #000000;
}

.contact-form-popup input:hover,
.contact-form-popup input:focus,
.contact-form-popup textarea:hover,
.contact-form-popup textarea:focus {
	   border: 1px solid #0277FA !important;
}
.error404 .elementor-element-863627c .elementor-icon-box-wrapper {
    display: flex !important;
	align-items: center;
}
.error404 .elementor-element-863627c .elementor-icon-box-icon {
    margin-right: 15px;
}
@media (max-width: 768px) {
	.animation-infinite {
	animation: 80s linear 0s infinite normal none running ShapeAnim;
	}
#services-products .services-list {
    gap: 40px;
}
}

@media (max-width: 575px) {
	
#services-products .services-list {
    gap: 20px;
}
}