/*scrollable ad images for mobile*/
.compart-m{
      /*display: flex;*/
      background-color: white;
      height: 47vw;
      padding: 10px;
      width: 100%;
      z-index: 0;
}
.ad-link:hover{text-decoration: none;}
.m-ad-img{
      /*position: relative;*/
      height: 100%;
      width: 94vw;
      border-radius: 7px 7px 0px 0px;
      }
.ad-image{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      border-radius: 5px;
      object-fit: cover;
      display: block;
      }
/*advert product*/
.compart-3-cont{
      background-color: white;
      height: 300px;
      border-radius: 5px;
      }
.compart-3-cont-m{
      background-color: white;
      padding-bottom: 20px;
      }
/*special products*/
.special-prod-area{
      max-width: 1200px;
      margin: auto;
      padding: 0px 5px;
      }
.special-prod-compart{background-color: white; border-radius: 5px 5px 0px 0px;}
.special-prod-cont{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      width: 100%;
      padding: 10px 10px 0px 10px;
      background-color: white;
      border-radius: 5px;
      overflow-x: auto;
      }
.special-button {
      white-space: nowrap;
      padding: 8px 12px;
      font-size: 14px;
      text-align: center;
      cursor: pointer;
      outline: none;
      color: black;
      background-color: white;
      border: none;
      border-radius: 15px;
      box-shadow: 0 5px lightgrey;
      margin: 4px 5px 15px;

      }
.special-button:hover {background-color: #df930B; color: white;}
.special-button:active {
      background-color: #df930B;
      box-shadow: 0 5px #df930B;
      transform: translateY(4px);
      }
.active-prods{background-color: #df930B; color: white;}
@media screen and (min-width: 900px){
      .compart-m{display: none;}
      .special-prod-area{padding: 0px 20px;}
      }
@media screen and (min-width: 400px){
      .special-prod-cont{
      justify-content: center;
      }
      }
/*slider for advert products*/
/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
}
.advert-product-mobile{
max-width: 300px;
position: relative;
margin: auto;
}
/* Fading animation */
.fade-advert {
  -webkit-animation-name: fade-advert;
  -webkit-animation-duration: 1.5s;
  animation-name: fade-advert;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade-advert {
  from {opacity: .4} 
  to {opacity: 1}
}
@keyframes fade-advert {
  from {opacity: .4} 
  to {opacity: 1}
}
.each-product-advert{   
      display: flex;
      flex-wrap: wrap;
      background-color: white;
      position: relative;
      font-size: 13px;
      height: 300px;
      border-radius: 5px;
      padding: 5px;
      transition: transform 2s;
      }
.each-product-advert:hover{
      transform: scale(1.1, 1.1);
      box-shadow: 3px 7px 0px lightgrey;
      }
/*save certain discount amount*/
.each-product-advert .save-amt{
      text-align: center;
      font: normal 400 0.6em sans-serif;
      position: absolute;
      top: 3px;
      left: 3px;
      padding: 10px 5px;
      border-radius: 100%;
      background-color: #df930B;
      color: black;
      }


/*categories*/
.categories{
	padding: 10px 0px 10px 0px;
}
.category-cont{
	display: flex;
	flex-wrap: wrap;
      padding: 0px 0px 0px 4px;
}
.cat-sub-cont{
	padding: 2px 4px 2px 0px;
}
.category-link{text-decoration: none; color: black;}
.category-link:hover{text-decoration: none; color: black;}
.each-category{   
            /*box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
            padding: 5px;
            background-color: white;
            text-align: center;
            height: 100px;
            border-radius: 5px;
            }
.cat-img-cont{
            position: relative;
		margin-top: 7px;
		height: 60%;
            width: 100%;
            border-radius: 0px;  
            }
.cat-img{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      border-radius: 0px;
      object-fit: contain;
      }
.cat-text{
		font: normal 500 12px 'roboto';
		margin-top: 2px;
}
/*desktop*/
.header-area{ 
      width: 100%;
      }
.main-header{
      display: flex; 
      padding: 20px;
      flex-wrap: wrap;
      }
.header-title{
      padding: 15px 0px 0px 20px;
      width: 100%;
      height: 300px;
      text-align: left; 
      background-color: white;
      /*box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
      border-radius: 5px;
      }
.catig-cont{width: 100%;}
.category-big, .services-link, .ad-link, .ad-link-desktop{
      text-decoration: none;
      }
.compart{ padding-right: 20px; }
.compart3{ padding-left: 20px;  }
/*hover section*/
.hover-cont{
      background-color: white;
      height: 300px;
      /*box-shadow:  1px 2px 4px rgba(0, 0, 0, .5);*/
      border-radius: 0px 5px 5px 0px;
      display: none;
      padding: 10px 20px;
}
.hover-compart{
      display: flex;
      flex-wrap: wrap;
}
.subCategories a{
      display: block;
      color: grey;
      text-decoration: none;
     font: normal 400 17px 'Roboto';
     line-height: 1.4;
}
.subCategories a:hover{color: black;}
.subCategories h4{
            margin: 0px 0px 5px 0px;
            font: normal 400 19px 'roboto';
            color: #df930B;
            padding-bottom: 3px;
            border-bottom: 1px solid lightgrey;
  }
.cat-big-cont{ 
      display: flex;
      max-width: 150px;
      height: 45px;
      border-radius: 50px;
      border-width: 2px;
      border-style: solid;
      border-color: white;
      padding: 8px 5px 0px 5px; 
      }
.catig-title{
      color: black;
      font: normal 700 1em 'roboto';
      margin: 7px 0px;
      }
.cat-big-cont:hover{ border-color:  #df930B;}
.catig-cont a:hover {text-decoration: none;}
.cat-big-img{
      max-width: 90%;
      height: 100%;
      margin: 0px 0px 3px 3px;
      color: black;
      }
.cat-big-text{
      color: black;
      font: normal 400 0.8em 'roboto';
      margin: 4px 0px 0px 3px;
      }
/*ad images*/
.ad-img{
      width: 320px;
      margin: 3px;
      height: 100%;
      border-radius: 5px;
      }
.advert-img{
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 5px;  
      }
.ad-image{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      border-radius: 5px;
      object-fit: cover;
      }
.header-a{
      height: 300px;
      max-width: 100%;
      text-align: center;
      background-color: white;
      /*box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
      border-radius: 5px;
      z-index: 0;
      }
/*ads and events*/
.event-place{
      max-width:1200px; margin: auto;
      display: flex;
      flex-wrap: wrap;
      padding: 0px 15px 10px 20px;
      }
.event-area{
      padding: 10px 5px 0px 0px; 
      height: 220px; 
      }
.event-cont{
      border: none;
      max-width: 100%;
      text-align: center;
      z-index: 0;
      position: relative;
      height: 100%; 
      }
.event-link{text-decoration: none;}
.event-img{
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      /*object-fit: cover;*/
      }
@media screen and (max-width: 900px){
      .event-place{
      max-width:100%; margin: auto;
      padding: 0px 0px 0px 5px;
      }
.event-area{
      padding-right: 5px;
      height: 190px;
      }
      }
.col-sf-6{width:50%;}
@media screen and (max-width: 600px){ 
      .col-sf-6{width:100%;}
      .event-place{padding: 0px;}
      .event-area{
      padding: 10px 0px 0px 0px;
      }
      .event-cont{
      border-top: 3px solid #ccccb3;
      border-bottom: 3px solid #ccccb3;
      }
      .second-event{display: none;}
      }


/*header & news area responsiveness*/
      .col-n-8{width: 60%;} 
      .col-n-2{width: 20%;}
@media screen and (max-width: 900px){
      .header-area{display: none;}
      .header-a{height: 300px;}
      [class*="col-n"]{ width: 100%; }
      .main-header{
      display: flex; 
      padding: 10px 5px 10px 5px;
      /*background-color: #cccccc;*/
      background-color: #d3d3d3;
      }
      }
@media screen and (max-width: 598px){
      .hide-b{visibility: hidden;}
      .cat-big-img{
      margin-left: -20px;
      }
.cat-big-text{
      font: normal 400 2.5vw 'roboto';
      margin: 4px 0px 0px -15px;
      }
.header-a{height: 180px;}
      }
@media screen and (max-width: 430px){
       .header-a{height: 200px;}
      .cat-big-img{
      margin: 3px 0px 0px -10px;
      max-width: 70%;
      height: 70%;
      }
.cat-big-text{
      font: normal 400 11px 'roboto';
      margin-top: 6px;
      }
      }
@media screen and (max-width: 380px){
      .cat-big-img{
      margin: 3px 0px 0px -15px;
      }
      }
@media screen and (max-width: 315px){
      .cat-big-img{display: none;}
      .cat-big-text{
      font: normal 400 11px 'roboto';
      margin: 4px 0px;
      }
      }
@media screen and (min-width: 900px){
      .hide-i{visibility: hidden;}
      .categories{display: none;
            }
      .compart3-advert{display: none;}
      }
@media screen and (max-width: 1100px){
      .services-img{
      height: 70%;
      margin-top: 7px;
      }
}
@media screen and (max-width: 350px){
.m-serve-img{
      height: 40%;
      width: 40px;
      }
      }
/*header & news area ends*/

.col-cat-2{ width: 33.33%; }
@media screen and (max-width :350px){
.col-cat-2{width: 50%;}
.cat-text {font-size: 11px;}
}
@media screen and (min-width :800px){
		.wel-text{
	 font-size: 16px;
	 line-height: 1.7;
}
.wel-link{
	margin-bottom: 10px;
	max-width: 150px;
	font-size: 12px;
}
        .col-cat-2 {width: 16.66%;}
        .cat-text {font-size: 13px;}
        }

/*testimonial*/
.tes-title{
      position: relative;
}
.tes-title::after{
      content: "";
      width: 130px;
      position: absolute;
      margin: 0 auto;
      height: 3px;
      background: #df930B;
      left: 0;
      right: 0;
      bottom: -10px;
      border-radius: 50%;
}
.inn .it .img-box{
      position: relative;
      width: 130px;
      height: 130px;
}
.inn .it .img-box .img-item{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      object-fit: cover;
} 
.inn .it p{
      font: normal 400 17px 'roboto';
      line-height: 1.5;
}
@media screen and (max-width: 640px) {
      .inn .it p{
            font-size: 15px;
      }
}
/* mini generalised responsiveness */
.col-c-3{ width: 50%; }
@media screen and (min-width :800px){
.col-c-3 {width: 25%;}
      }