body {
  background:#fff;
}
.web{
	background-color: #fff;
    padding: 50px 0 55px 0;
    background-image: url(../img/hero-bg.png);
    background-repeat: no-repeat;
    background-position: right 24%;
    background-size: unset;
}
.items{
	background:#d9d9d936;
	border:2px solid #d7d3d3;
	padding:20px;
	margin:10px;
	border-radius:10px;
}
.web .items h1{
	font-size:32px;
	font-weight:700;
	color:#333333;
}
.btn_pdwa{
	color: #fff;
	border-radius: 5px;
	padding: 10px 25px;
	font-family: 'Lato', sans-serif;
	font-weight: 500;
	background:#006cb5;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	display: inline-block;
	box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
	7px 7px 20px 0px rgba(0,0,0,.1),
	4px 4px 5px 0px rgba(0,0,0,.1);
	outline: none;
	text-decoration:none;
}
.btn_acbc{
	color: #fff;
	border-radius: 5px;
	padding: 10px 25px;
	font-family: 'Lato', sans-serif;
	font-weight: 500;
	background:#b9373c;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	display: inline-block;
	box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
	7px 7px 20px 0px rgba(0,0,0,.1),
	4px 4px 5px 0px rgba(0,0,0,.1);
	outline: none;
	text-decoration:none;
}
.custom-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
  text-decoration:none;
}

/* 7 */
.btn-7 {
  background: linear-gradient(0deg, rgb(0 108 181 / 92%) 0%, rgb(238 46 52 / 96%) 100%);  line-height: 42px;
  padding: 0;
  border: none;
}
.btn-7 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-7:before,
.btn-7:after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  background: #ac393e;
  box-shadow:
   -7px -7px 20px 0px rgba(255,255,255,.9),
   -4px -4px 5px 0px rgba(255,255,255,.9),
   7px 7px 20px 0px rgba(0,0,0,.2),
   4px 4px 5px 0px rgba(0,0,0,.3);
  transition: all 0.3s ease;
}
.btn-7:before{
   height: 0%;
   width: 2px;
}
.btn-7:after {
  width: 0%;
  height: 2px;
}
.btn-7:hover{
  color: #000;
  background: transparent;
}
.btn-7:hover:before {
  height: 100%;
}
.btn-7:hover:after {
  width: 100%;
}
.btn-7 span:before,
.btn-7 span:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: #006cb5;
  box-shadow:
   -7px -7px 20px 0px rgba(255,255,255,.9),
   -4px -4px 5px 0px rgba(255,255,255,.9),
   7px 7px 20px 0px rgba(0,0,0,.2),
   4px 4px 5px 0px rgba(0,0,0,.3);
  transition: all 0.3s ease;
}
.btn-7 span:before {
  width: 2px;
  height: 0%;
}
.btn-7 span:after {
  height: 2px;
  width: 0%;
}
.btn-7 span:hover:before {
  height: 100%;
}
.btn-7 span:hover:after {
  width: 100%;
}



.web .items img {
  --g: 4px; /* the gap */
  --b: 12px; /* border thickness*/
  --c: #006cb5; /* the color */

  padding: calc(var(--g) + var(--b));
  --_c: #0000 0 25%, var(--c) 0 50%;
  --_g1: repeating-linear-gradient(90deg, var(--_c)) repeat-x;
  --_g2: repeating-linear-gradient(180deg, var(--_c)) repeat-y;
  background: var(--_g1) var(--_p, 25%) 0, var(--_g2) 0 var(--_p, 125%),
    var(--_g1) var(--_p, 125%) 100%, var(--_g2) 100% var(--_p, 25%);
  background-size: 200% var(--b), var(--b) 200%;
  cursor: pointer;
  filter: grayscale(0%);
  transition: 0.3s;
}
.web .items img:hover {
  --_p: 75%;
  filter: grayscale(50%);
  
}

.web .bpleftbg {
    background-image:url(../img/servicecatbg1.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 9%;
}
.web .bpleftbg1 {
    background-image:url(../img/cat-bg-box.jpg);
    background-repeat: no-repeat;
    background-position: left 0%;
    background-size: 7%;
}
.web .bpleftbg2 {
    background-image:url(../img/servicecatbg2.png);
    background-repeat: no-repeat;
    background-position: right 85%;
    background-size: 8%;
}
.about{
	padding:30px 0px;
	color:#000;
	font-size:14px;
}
.about span{
	font-size:26px;
	font-weight:600;
}

/* Footer=========================================== */
.tl-footer {
	background: #353949;
	padding-top: 30px;
}
.tl-footer-info .container {
	border-bottom: 1px dashed #464b5c;
	padding-bottom: 30px;
	margin-bottom: 30px;
}
.footer-title {
	font-size: 28px;
	color: #fff;
	margin-bottom: 0;
}
.footer-title span {
	font-size: 16px;
	font-family: "Open Sans", sans-serif;
	font-weight: 400;
	color: #fff;
	margin-bottom: 0;
	margin-top: 13px;
	display: inline-block;
}
.footer-contact-info i {
	float: left;
	font-size: 30px;
	margin-right: 20px;
	position: relative;
	top: 10px;
}
.footer-contact-info h3,
.footer-contact-info p {
	margin-left: 19px;
	color: #fff;
}
.footer-contact-info h3 {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 3px;
}
.footer-contact-info p {
	font-size: 15px;
	font-weight: 500;
	font-family: "Open Sans", sans-serif;
	margin-bottom: 0;
}
.footer-contact-info.color-yellow i,.footer-contact-info.color-yellow p {
	color: #ffbd0a;
}
.footer-contact-info.color-green i,.footer-contact-info.color-green p {
	color: #a6c437;
}
.footer-contact-info.color-orange i,.footer-contact-info.color-orange p {
	color: #f05a21;
}
/* Contact */
.tl-copyright {
  background: #2d313e;
  padding: 27px 0;
}

.copyright-text {
  margin-bottom: 0;
  color: #929292;
  font-weight: 600;
  font-size: 15px;
}

.copyright-menu ul li {
  position: relative;
}
.copyright-menu ul li a {
  text-transform: uppercase;
  color: #929292;
  font-weight: 600;
  display: block;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.copyright-menu ul li a:hover {
  color: #ffbf10;
}
.copyright-menu ul li:not(:first-child) {
  margin-left: 15px;
}
.copyright-menu ul li:not(:first-child):before {
  content: "";
  position: absolute;
  top: calc(50% - 7px);
  left: -8px;
  width: 1px;
  height: 15px;
  background: #929292;
}
.social-links a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  font-size: 16px;
  margin-right: 10px;
  transition: 0.3s;
}
.social-links a img{
    width:30px;
}

.social-links a:hover {
  color: var(--contrast-color);
  background-color: var(--accent-color);
}

.mobile_foot h3{
	color:#CCCCCC;
	font-size:22px;
}