img{
    max-width: 100%;
}
html {
    scroll-behavior: smooth;
  }
.topbar{
    background: #4a388a;
    padding: 5px 0;
    position: relative;
}
.socil-header{
    margin: 0;
    padding: 0;
    display: block;
}
.socil-header li{
    display: inline-block;
    padding: 0px 5px;
    color: #fff;
    font-size: 14px;
    vertical-align: middle;
}
.socil-header li a{
    display: block;
    margin: 0;
    padding: 0;
}
.fb{
    background: url(../img/fb.png) no-repeat center;
    width: 25px;
    height: 26px;
    display: inline-block;
    background-size:cover ;
}
.ins{
    background: url(../img/ins.png) no-repeat center;
    width: 25px;
    height: 26px;
    display: inline-block;
    background-size:cover ;
}
.main-menu{
    display: block;
    text-align: right;
    margin: 0;
    padding: 0;
}
.main-menu li{
    display: inline-block;
    padding: 0px 15px;
    position: relative;
    font-size: 14px;
}
.main-menu li:last-child{
    padding-right: 0px;
}
.main-menu li:before{
   content: "|";
   color: #fff;
   position: absolute;
   left: 0;
   left: -5px;
}

.main-menu li:first-child:before{
    content: none;
}
.main-menu li a{
    display: block;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
}
.header{
    background:#29166f url(../img/header.png);
    padding: 10px 0px;
    position: relative;
}
.hero{
    background: url(../img/hero.jpg) no-repeat center;
    background-size: cover;
    padding:20px 0px
	height: 550;
	min-height: 550px;
}
.right-image-hero{
    text-align: right;
}
.hero h1{
    color: #361442;
    text-align: center;
    padding:10px 0;
    margin: 0;
    font-size: 35px;
    font-weight: bold;
}

.infobar{
    background: #dedaed url(../img/pat.png);
    padding:10px 0px;
}
.info-box{
    display: block;
    position: relative;
    text-align: center;
    padding: 15px 0px;
}
.info-bg:before{
    content: "";
    background:url(../img/divider.png) no-repeat left;
    left: -10px;
    top: 0;
    width:10px;
    height: 100%;
    position: absolute;
}
.info-bg:after{
    content: "";
    background:url(../img/divider.png) no-repeat left;
    right: -10px;
    top: 0;
    width:10px;
    height: 100%;
    position: absolute;
}

.info-box h2{
    color:#29166f;
    font-size: 25px;
    font-weight: bold;
    text-indent: -100px;
}
.info-box h3{
    color: #361442;
    font-size: 20px;
}
#about{
    background: #fff;
    padding: 20px 0px;
    position: relative;
}
#about p{
    color: #29166f;
    font-size: 16px;
}
#about h2{
    text-align: center;
    color: #29166f;
    font-size:30px;
    padding-bottom:30px;
    font-weight: bold;
}

.product-section{
    background: url(../img/patter.png);
    padding: 20px 0px;
    position: relative;
    border-bottom:5px solid #d1c9ee ;
    text-align: center;
}
.product-section h2{
    text-align: center;
    margin: 0;
    padding: 0;
    font-size: 30px;
    position: relative;
    display: inline-block;
    color: #29166f;
    font-weight: bold;
}
.product-section h2:before{
    content: "";
    position: absolute;
    background: url(../img/grafti.png) no-repeat left;
    width: 70px;
    height: 37px;
    left:-88px;
    top: 0;
}

.product-section h2:after{
    content: "";
    position: absolute;
    background: url(../img/grafti.png) no-repeat left;
    width: 70px;
    height: 37px;
    right:-88px;
    top: 0;
}
.prducts{
    padding-top: 35px;
    text-align: center;
}
#location{
    padding:20px 0;
    position: relative;
    background: url(../img/section.jpg) no-repeat center center;
    background-size: cover;
}

#location h2{
    text-align: center;
    color: #29166f;
    font-size: 30px;
    padding-bottom:30px;
    font-weight: bold;
}
#location p{
    color: #29166f;
    font-size: 16px;
}

#location iframe{ 
    width: 100%; 
    height: 300px;
}
.footer{
    padding:30px 0px;
    background: #393640;
    color: #fff;
}
.footer p{
    margin: 0;
    padding: 0;
    font-size: 14px;
}
.menu-trigger{
    width: 35px;
    height:30px;
    display: none;
    position: absolute;
    right: 15px;
    top: 5px;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    cursor: pointer;
}
.menu-trigger:before{
    content: '';
    width: 35px;
    height: 2px;
    background: #fff;
    position: absolute;
    left: 0;
    top:12px
}

@media(max-width:980px){
    .info-bg:before{
        content: "";
        background: none;
        width: 0;
        left: 0;
    }
    .info-bg:after{
        content: "";
        background: none;
        width: 0;
        right:0px;
    }
    .info-box h2,.info-box h3{
        text-indent: 0;
    }
    .product-section h2:before{
        background: 0;
        width: 0;
        left: 0;
    }
    .product-section h2:after{
        background: 0;
        width: 0;
        right: 0;
    }
	.hero
	{
    background: url(../img/hero-mob.jpg) no-repeat center;
    background-size: cover;
	width: 100%;
	min-height: 450px;
	height: 450px;
	}

}
@media(max-width:768px){
    .mobile-padding{
        padding-bottom: 30px;
    }
    .menu-trigger{
        display: inline-block;
    }
    .main-menu{
       display: none;
       text-align: left;
    }
    .menu-show{
        display: block;
        margin-top: 12px;
    } 
    .menu-show li{
        display: block;
        padding: 10px;
        border-top:1px solid rgb(255, 255, 255, 0.1);
    }
    .main-menu li:before{
        content: none;
    }
	.hero
	{
    background: url(../img/hero-mob.jpg) no-repeat center;
    background-size: cover;
	width: 100%;
	min-height: 450px;
	height: 450px;
	}
}