@font-face {
  font-family: 'HgSans';
  src: url('../fonts/HGSansSS-Lt.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: 'HgSans';
  src: url('../fonts/HGSansSS-Rm.woff2') format('woff2');
  font-weight: 500;
}

@font-face {
  font-family: 'HgSans';
  src: url('../fonts/HGSansSS-Sm.woff2') format('woff2');
  font-weight: 700;
}
@font-face {
  font-family: 'Funkids';
  src: url('../fonts/Funkids.ttf') format('woff2');
}
.sp-category .sp-category-block .category-detail {
  margin-bottom: 26px;
}
.sp-collection-block .collection-detail {
  margin-bottom: 26px;
}
.sp-pro-list.row .col-md-3 {
  margin-bottom: 24px;
}
.sp-testimonial .sp-testimonial-box {
  margin-bottom: 24px;
  border: 1px solid #167ba726;
}
.colorBox {
}
.colorBox .colorType {
  height: 22px;
  width: 22px;
  background: red;
  border-radius: 30px;
  border: 1px solid #318ec3;
}
.colorBox .colorTypeOuter {
  display: flex;
  gap: 12px;
}
.sp-single-pro-tab-moreinfo {
  width: 60%;
}
.m-t-24.reviewTitle {
  margin-top: 12px;
  margin-bottom: 16px;
}
.colorBox .colorType.blue {
  background-color: blue;
}
.colorBox .colorType.green {
  background-color: green;
}
.sp-single-product .single-pro-content .sizeBox p {
  line-height: normal;
  font-size: 15px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.sp-single-product .single-pro-content .weightBox p {
  line-height: normal;
  font-size: 15px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.sizeBox select {
  padding: 4px;
  width: 100%;
  border-radius: 4px;
  color: #318ec3;
  border-color: #318ec3;
}
.sp-single-product .single-pro-content .meterialBox p {
  line-height: normal;
  font-size: 15px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.sp-single-product .single-pro-content .colorBox p {
  line-height: normal;
  font-size: 15px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.meterialBox select {
  padding: 4px;
  width: 100%;
  border-radius: 4px;
  color: #318ec3;
  border-color: #318ec3;
}
.sp-pro-variation.outer {
  display: flex;
  width: 100%;
}
.widthLength {
  width: 25%;
  padding: 0px 0px;
}
.sp-register-container.forProfile {
  margin-bottom: 20px;
}
.forProfile .sp-register-form {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.forProfile .sp-register-form .profileImg {
  height: 200px;
  width: 200px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.forProfile .sp-register-form .profileImg img {
  width: 100%;
  height: 100%;
}
.forProfile .sp-register-form .profileLogo {
  /* height: 200px; */
  width: 45%;
}
.forProfile .sp-register-form .profileLogo img {
  width: 100%;
  height: auto;
}
.userId h4 {
  color: #4b5966;
  text-align: end;
  margin-top: 8px;
}
.sp-register-wrapper .sp-register-container .sp-register-form .profileImg label {
  top: unset;
  bottom: 0px;
  margin: 0px;
  background: #00000082;
  color: #fff;
  height: 40px;
  border-radius: unset;
  width: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: absolute;
  box-shadow: 0px 0px 2px #fff;
}
.sp-register-wrapper .sp-register-container .sp-register-form .profileImg input {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  border-radius: 5px;
  opacity: 0;
  z-index: 2;
}
.ourVision {
  padding: 25px 0px;
  background-color: #eff4f7;
}
.ourVision .row {
  align-items: center;
}
.ourVision .image {
  border-radius: 12px;
  overflow: hidden;
}
.ourVision .image img {
  width: 100%;
}
.ourVision h2 {
  font-size: 34px;
  color: #4b5966;
  font-weight: 600;
}
.ourMission {
  padding: 25px 0px;
}
.ourMission .row {
  align-items: center;
}
.ourMission .image {
  border-radius: 12px;
  overflow: hidden;
}
.ourMission .image img {
  width: 100%;
}
.ourMission h2 {
  font-size: 34px;
  color: #4b5966;
  font-weight: 600;
}
.sp-header-buttons i {
  color: #fff;
  font-size: 24px;
}
.sp-header-buttons i:hover {
  color: #afe2f9;
}
.header-icon sup {
  top: 9px;
  color: #afe2f9;
  right: -3px;
}
