body{background-color:#fff;font-size: 16px;font-weight: 400;color:#262830;font-family: 'Poppins', sans-serif;}
a {text-decoration: none;transition: all 0.3s linear;}


.boxborder-gray{border:solid 1px #e8e8e8;}
.top-gray-border{border-top:solid 1px #555;}
.boxshadow {box-shadow: 0 3px 10px #eee;}

.lineanim{position: relative}
.lineanim::before{position: absolute;content: '';bottom: -2px;left: 0px;width: 0%;height: 1px;background-color:#7152cc;transition: all .7s cubic-bezier(0,1.53,.97,-0.21)}
.lineanim:hover::before{width: 100%;}

.logo {padding:16px 0px 14px 0px;}
.logo img{height:50px;transition: all 0.3s linear;}


/* navibar **/
.navibar {display: block;margin-top:30px;margin-bottom:4px;}
.navibar a {color:#fff;margin-left:14px;font-size: 16px;font-weight: 400;opacity: 0.8;position: relative;}
.navibar a:hover {opacity: 1.0;color:#23bdff}

h3.title {display: block;font-size:23px;font-weight:300;color:#000;margin:30px 0px 15px 0px;line-height:38px;text-transform: uppercase;}
h3.title span{font-weight:700;}

/* heroslider*/
.heroslider .heroslide {position: relative;overflow: hidden;}
.heroslider .heroslide .slidecontent{top:55%;transform:translateY(-50%);left:-100%;display: inline-block;padding:45px 60px;background-color:rgb(0,0,0, 0.89);position: absolute;transition: all 0.3s linear;}

.heroslider .heroslide .slidecontent h3 {display:block;font-size:30px;font-weight: 700;background: rgb(92,230,255);background: linear-gradient(50deg, rgba(92,230,255,1) 0%, rgba(19,171,200,1) 41%, rgba(79,10,189,1) 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.heroslider .heroslide .slidecontent .brand {display:block;font-size:16px;font-weight:400;color:#777;margin-bottom: 9px;}
.heroslider .heroslide .slidecontent a {display:block;font-size:13px;font-weight:400;color:#aaa;margin-top: 45px;position: relative;}
.heroslider .heroslide .slidecontent a::before{position: absolute;content: '';bottom: -5px;left: 0px;width:100%;height:1px;background: rgb(92,230,255);background: linear-gradient(50deg, rgba(92,230,255,1) 0%, rgba(19,171,200,1) 41%, rgba(79,10,189,1) 100%);transition: all 0.3s linear;} 
.heroslider .heroslide .slidecontent a:hover::before{width: 25%;}
.heroslider .heroslide .slidecontent a:hover{color:#fff;}

.herotext {display: block;margin:20px 0px;}
.herotext .imgbox{display: block;position: relative;overflow: hidden;}
.herotext .imgbox img{transition: all 0.3s linear;}
.herotext .imgbox::before{top:0px;right: 0px;width: 100%;height: 100%;position: absolute;content: '';background-color: rgba(0,0,0,0.2);transition: all 0.3s linear;z-index: 1;}
.herotext .imgbox::after{bottom:0px;left: 0px;width: 100%;height: 100%;position: absolute;content: '';background-color: rgba(0,0,0,0.2);transition: all 0.3s linear;}
.herotext h3 {font-size:18px;font-weight:500;color:#999;margin-bottom: 10px;margin-top: 20px;transition: all 0.3s linear;}
.herotext p {display: inline-block;color:#888;font-size:14px;font-weight:400;margin-right:10%;transition: all 0.3s linear;}

.herotext:hover .imgbox::before, .herotext:hover .imgbox::after {height: 0%;width: 0%;}
.herotext:hover .imgbox img{transform:scale(1.1);}
.herotext:hover h3 {color:#fff;}
.herotext:hover p{color:#ddd;}

/* Products*/
.prodtitle {display:block;padding:30px;}
.prodtitle h5{display:block;font-size: 20px;font-weight:300;position: relative;padding-left: 70px;margin-bottom:4px;color:#aaa}
.prodtitle h5::before{left:0px;top:10px;width:55px;height:4px;background-color: #36c0fc;position: absolute; content: '';}
.prodtitle h3{display: block;font-size: 32px;font-weight:600;margin-bottom: 4px;}
.prodtitle a {display: inline-block;border: solid 2px #eee;color:#000;font-weight: 600;padding:11px 18px;transition: all 0.3s linear;text-align: left;}
.prodtitle a span{display: block;font-size: 12px;color:#0e9edc;transition: all 0.3s linear;font-weight: 400;}
.prodtitle a:hover {background-color: #c23793;border: solid 2px #c23793;color:#fff;font-weight: 600;} 
.prodtitle a:hover span{color:#eee}

.proditems {display:block;text-align:center;margin-bottom:0px;padding:1px;user-select:none;position: relative;}
.proditems img{width:100%;-webkit-transition: all 0.3s linear;-o-transition: all 0.3s linear;transition: all 0.3s linear;}
.proditems label{display:block;text-align:center;font-size:16px;font-weight:400;color:#232323;margin-top:18px;}
.proditems label span{font-weight:700;}
.proditems .itemtx {position: absolute;bottom:0;left:50%;transform: translate(-50% -50%);width:1px;height:1px;
    background: rgb(0,0,0, 0.8);
    overflow: hidden;transition: all 0.3s linear;}
.proditems:hover .itemtx {width: 100%;height:100%;left: 0px;top:0px;}
.proditems .itemtx .tx {position:absolute;bottom: 20px;left: 30px;transition: all 0.3s linear;text-align: left;}
.proditems .itemtx h3 {font-size:0px;font-weight:300;color:#fff;transition: all 0.3s linear;}
.proditems .itemtx h3 span{font-weight: 600;}
.proditems .itemtx .tx a {display:inline-block;font-size:13px;font-weight:400;color:#aaa;margin-top:50px;transition: all 0.3s linear;}
.proditems:hover .itemtx .tx h3 {font-size:16px;}
.proditems .itemtx .tx a:hover{color:#fff;}

.prodcta {display: block;padding:70px 60px 50px 60px;
    background: rgb(0,0,0);
    background: linear-gradient(125deg, rgba(0,0,0,1) 70%, rgba(70, 195, 244, 0.9) 85%, rgba(51,0,133,1) 100%);
    box-shadow: inset 0px 0px 3px 120px rgba(0,0,0,0.3);
}
.prodcta h2{display:block;font-size:30px;font-weight:600;color: #eee;text-transform: uppercase;}
.prodcta p{color:#999}
.prodcta a {display: inline-block;padding: 11px 30px;border-radius: 30px;color:#fff;border:solid 1px #fff;}
.prodcta a:hover {color:#000;background: rgb(92,230,255);background: linear-gradient(50deg, rgba(92,230,255,1) 0%, rgba(19,171,200,1) 41%, rgba(79,10,189,1) 100%);border:solid 1px #000;}


/**About Section*/
.aboutcontent {display: block;margin-right:3%;}
.aboutcontent h4{display: inline-block;font-size:16px;font-weight:500;color:#000;margin-bottom:18px;position: relative;}
.aboutcontent h4::after{position: absolute;top:49%;right:110%;width:500px;height:1px;background-color: #000;content: '';}
.aboutcontent h3{display: block;font-size:30px;font-weight:300;color:#000;margin-bottom:30px;line-height:38px;}
.aboutcontent h3 span{font-weight:700;}
.aboutcontent p{display: block;font-size:16px;font-weight:400;color:#000;line-height: 24px;}
.aboutcontent a{display: inline-block;padding: 12px 30px;color:#000;border:solid 1px #aaa;background-color: #fff;border-radius: 90px;margin-right: 10px;}
.aboutcontent a.dark, .aboutcontent a:hover {background-color: #000;color:#fff;}
.aboutcontent a.dark:hover{color: #000;background-color:#fff;}

h4.brandhead{display: block;font-size:20px;font-weight:400;color:#000;line-height:32px;}
h4.brandhead span {font-weight:600;}

/* WHY US Section*/
.whycontent {display: block;padding-right: 60px;}
.whycontent h3{display: block;font-size: 32px;font-weight:600;color:#000;margin-bottom: 20px;}
.whycontent h3 span{display: block;font-size: 14px;font-weight:700;color:#000;opacity: 0.45;margin-bottom: 11px;text-transform: uppercase;}

.whycard {display: block;position: relative;height: 100%;z-index: 1;padding-right: 60px;}
.whycard h3{display:block;font-size: 20px;font-weight: 700;color:#000;position: relative;padding: 26px 24px 4px 60px;}
.whycard h3::before{left:-10px;top:34px;width:55px;height: 5px;background-color: #c23793;position: absolute; content: '';}
.whycard p{display:block;font-size: 14px;font-weight: 300;color:#000;position: relative;padding: 2px 2px 8px 60px;margin-bottom: 0px;}



.brandslider {box-sizing:border-box;overflow:hidden;padding-right:2px;}
.brandslider .brandslide {display:block;padding:24px;background-color: rgba(240,240,240,1);border-radius: 3px;margin:3px;}
.brandslider .brandslide img{transition: all 0.3s linear;max-width:80%;margin:auto 10%;}
.brandslider .brandslide:hover img{transform:scale(1.2);}

.brandslider .slick-track { display: flex !important;}
.brandslider .slick-slide { height: inherit !important;}

/* Title Section*/
.section-title {display: block;padding: 20px 0px;}
.section-title h3{display: inline-block;font-size: 20px;font-weight: 600;color: 0b0f47;position: relative;margin-bottom: 15px;}
.section-title h3::before{position: absolute;bottom: -15px;left: 0px;content: '';background-color: #c23793;height: 3px;width: 45%;}

.contactcta{display: block;background: url('../images/cta.jpg') no-repeat center center;background-size: cover;padding: 70px 0px 70px 0px;}
.contactcta h3{display:block;font-size:30px;font-weight:500;color:#eee;line-height: 42px;margin: auto 15%;}
.contactcta p{display:block;font-size:17px;font-weight:400;color:#aaa;}


/* Conatct Info*/
.contactinfo {display: block;padding: 20px 0px;color:#aaa;font-size: 14px;}
.contactinfo h3{display:block;font-size:16px;font-weight:500;color:#eee;position: relative;}
.contactinfo h3::before{position: absolute;left: 0px;top: 50%;transform: translateY(-50%);font-family: boxicons;font-size: 26px;}
.contactinfo p{margin-bottom:0px;padding-bottom: 0px;line-height: 24px;}
.contactinfo a {display:inline-block;color:#eee;font-size: 14px;margin-bottom: 8px;}
.contactinfo a:hover{color:#23bdff} 

.contactinfo img{animation: graykeyamin 15s infinite;}
@keyframes graykeyamin{
    0%{filter: grayscale(100%);}
    50%{filter: grayscale(0%);}
    100%{filter: grayscale(100%);}
}

/*  Footer  */
.copy{font-size:12px;color:#ccc;opacity: 0.8;}
.copy a{display: inline-block;font-size: 12px;color:#ccc;opacity: 0.8;}
.copy a:hover{opacity: 1.0;color:#fff;}