/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 07 2025 | 07:22:37 */
/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

.circlebox {
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: "Poppins", sans-serif;
  width:100%;
}

/* Main Container */
.qr-container {
  position: relative;
  width: 750px;
  height: 750px;

}

/* Center Image */
.center-image {
    position: relative;
    top: 55%;
    left: 53%;
    transform: translate(-55%, -53%);
    z-index: 3;
	text-align:center;
}

/* Step Box (Icon + Text together) */
.step-box {
  position: absolute;
  width:216px;
  background: transparent;
  text-align: center;
  z-index: 4;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.step-box:hover .icon-box {
  background: #009444;
  transform: scale(1.1);
}


/* Icon inside Step */
.icon-box {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  background:#082542;
  border-radius: 16px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  transition: all 0.3s ease;
  padding-top:8px;
}

.icon-box img {
  width: 30px;
  margin-bottom: 4px;
}

.icon-box span {
  font-size: 12px;
	font-family:"Montserrat", Sans-serif;
  font-weight: 500;
  color: #ffffff;
  background:#009444;
  padding:3px 6px;
  border-radius: 50%;
  position: absolute;
  top: -10px;
}
.step-box:hover .icon-box span {
  background:#082542;}
/* Text below icon */
.step-text {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.3;
  color: #0d1b2a;
}

.step-text p {margin: 2px 0; font-size:14px; font-family:"Montserrat", Sans-serif; line-height:20px;}

/* Position each Step Box */
.step1 { top:8%; left:8%; }
.step2 { top:8%; right:13%; }
.step3 { top:38%; right:3%;  }
.step4 { bottom: 8%; right: 16%;}
.step5 { bottom:10%; left:10%; }
.step6 { top:39%; left: -4%; }

.qr-container-v {position: relative;width: 850px; height: 850px;}
.center-image-v {position: relative; top: 55%;left: 53%; transform: translate(-55%, -53%); z-index: 3; text-align:center;}
.step-box-v {position: absolute; width:200px; background: transparent; text-align: center; z-index: 4; cursor: pointer; transition: transform 0.3s ease;}
.step-box-v:hover .icon-box-v {background: #009444; transform: scale(1.1);}
.icon-box-v {width: 80px; height: 80px; margin: 0 auto; background:#082542; border-radius: 16px; color: #fff; display: flex; justify-content: center; align-items: center; flex-direction: column;
  position: relative; transition: all 0.3s ease; padding-top:8px;}
.icon-box-v img {width: 30px;margin-bottom: 4px;}
.icon-box-v span {font-size: 12px; font-family:"Montserrat", Sans-serif; font-weight: 500; color: #ffffff; background:#009444; padding:3px 6px; border-radius: 50%; position: absolute; top: -10px;}
.step-box-v:hover .icon-box-v span {background:#082542;}
.step-text-v {margin-top: 8px; font-size: 12px; line-height: 1.3; color: #0d1b2a;}
.step-text-v p {margin: 2px 0; font-size:14px; font-family:"Montserrat", Sans-serif; line-height:20px;}
.step-1 { top:18%; left:8%; }
.step-2 { top:8%; left:37%; }
.step-3 { top:18%; right:17%; }
.step-4 { top:39%; right:10%; }
.step-5 { bottom: 25%; right: 11%; }
.step-6 { bottom:8%; right:26%; }
.step-7 { bottom: 5%; left: 24%; }
.step-8 { bottom: 16%; left: 5%;}
.step-9 { top: 40%;  left: 1%; }
@media all and (max-width:768px) and (min-width:300px) {
.mobileversion .step-box{position:relative !important;}	
.mobileversion .step-box:hover .icon-box span {
  background:#082542;}
/* Text below icon */
.step-box-mb{position:relative; background: transparent;text-align: center;}
.icon-box-mb {width: 80px;height: 80px;margin: 0 auto;background:#082542; border-radius: 16px; color: #fff; display: flex; justify-content: center; align-items: center;flex-direction: column;position: relative;transition: all 0.3s ease; padding-top:8px;}
.icon-box-mb img {width: 30px; margin-bottom: 4px;}
.icon-box-mb span {font-size: 12px; font-family:"Montserrat", Sans-serif;  font-weight: 500;  color: #ffffff;  background:#009444;  padding:3px 6px;  border-radius: 50%;  position: absolute;  top: -10px;}
.entry-content .step-text-mb p {margin-bottom: 0 !important; line-height:19px; margin-top:10px; font-size:13px;}
}