@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200;300;400;600;700;800&display=swap');

/*General CSS*/
body {font-family: 'Assistant', sans-serif;overflow-x: hidden; font-size: 16px;}
a:hover{text-decoration: none!important;}
.row{margin: 0px; padding: 0px;}
.nopadding{padding: 0px;}
.mini-webguys{font-family: 'Righteous', sans-serif;}
h2 { font-weight: 400!important; font-size: 20px!important; color: #d5096b; margin: 0px 0px 5px;}
h3 { font-weight: 400!important; font-size: 20px!important; color: #d5096b; margin: 0px 0px 5px;}


/*Cookies*/
.cookie-concent { background-color: #000; text-align: center; padding: 10px; position: fixed; width: 100%; bottom: 0px;}
.white{color: #fff;}
a.gdprlink { color: #f185b3;transition: 0.3s all;}
a.gdprlink:hover{color: #f185b3;text-decoration: none;}
span.dismiss { margin: 0px 10px; color: #fff; font-size: 20px; cursor: pointer;}
button#agree { background-color: #d5096b; color: #fff; padding: 2px 20px; transition: 0.3s;}
button#agree:hover {background-color: #bf4680;};
/*Paddings*/
.padd15{padding: 15px;}

/*Share*/
ul#shareUL {padding: 0px;list-style: none;}
li.shareli {display: inline-block;}

/*Colors*/
.mainColor{color: #e80566;}
.text-white {color: #fff;}
.text-white:hover {color: #eaeaea;text-decoration: none;transition: 0.3s;}
h3.title {color: #fff;}

/*Headings*/
h1.main_page_heading {font-size: 25px;margin: 0px;}
.subtext {font-size: 19px;font-style: italic;}

/*Top Row*/
div#toprow {background-color: #65258a;}
div#top-left {text-align: left;line-height: 35px;}
div#top-right {text-align: right;line-height: 35px;}
.topicon{margin-left: 10px;}
#top-right a.text-white.toplink:first-child::after {content: " | ";margin-left: 5px;margin-right: 5px;}

/*Navigation*/
.navbar {min-height: 50px; margin-bottom: 0px;}
.navbar-default .navbar-collapse,.navbar-default .navbar-form {border-color: transparent;}
.navbar-default {background-color: transparent;border-color: transparent;padding: 10px 0px;}
a.navbar-brand {font-family: 'Righteous', cursive;font-size: 41px;font-weight: 100;background: linear-gradient(to right, #65258a 0%, #2196F3 119%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
a.navbar-brand::first-letter {font-weight: 800;}
li.quoteLI {padding-top: 10px;}
li > a.navbarLink { transition: all 0.3s ease-in-out 0s!important; color: #081d43; font-size: 16px; font-weight: 400;border-bottom: 2px solid transparent;}
li > a.navbarLink:hover{color: #353535!important; border-bottom: 2px solid #65258a;}
ul.nav.navbar-nav {margin-right: 15px;}
.navbar-right {float: left!important;margin-right: -15px;}
a.btn-quote.toplink { padding: 5px 10px; border-radius: 4px; color: #fff!important; transition: 0.3s;}
.dropdown-menu {padding: 5px 10px;}
a.dropdownLink { color: #d5096b; transition: 0.3s; padding: 5px 10px;}
a.dropdownLink:hover {color: #702286;}

/*Buttons*/
.btn-quote {background: #e80566;border: 1px solid #e80566;color: #fff; transition: 0.5s;}
.btn-quote:hover {background: #ffffff;color: #081d43;}

/*Hero Section*/
.gradient-bg {background: linear-gradient(75deg, #65258a 10%, #e80566) !important; padding: 40px 0px;clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 93%);}
section#hero {background-color: #f1f1f1;}

.webguys-hero {font-family: 'Righteous', cursive;font-size: 55px;font-weight: 100;color: #fff;}
.webguys-hero::first-letter {font-weight: 800;}
div#hero-text {text-align: center;}
.webguys-hero-slogen{color: #fff; font-size: 30px;}
h1.webguys-hero.animated.fadeInUp {animation-duration: 1s;animation-delay: 0.5s;margin-bottom: 20px;font-size: 70px;}
.webguys-hero-slogen.animated.fadeInUp{animation-duration: 1s;animation-delay: 0.7s;}
.hero-text{font-size: 17px;     margin-bottom: 25px; }
.hero-button { color: #fff; background: #e80566; border: 1px solid #e80566; padding: 8px 30px;  transition: 0.3s all;}
.hero-button:hover { background: transparent; color: #fff; -webkit-box-shadow: none; box-shadow: none;}

/*Services*/
.service-icon { font-size: 18px; background-image: url(assets/img/service_icon.png); background-size: 65px; padding: 25px; background-repeat: no-repeat; background-position: 0 25%; display: inline-block; margin-bottom: 0px;}
section#services { padding: 40px 0px; background-color: #f1f1f1;}
.service-box { text-align: center; transform: translateY(-5px); box-shadow: 0 1rem 3rem rgba(31,45,61,.125)!important; padding: 30px 0px; border-radius: 13px; transition: 0.3s linear; margin-bottom: 15px;}
.service-box:hover{box-shadow: 0 1rem 3rem rgba(31, 45, 61, 0.33)!important; }
h3.service-heading { margin: 5px; color: #67258a; font-weight: 600;}
.service-text { font-size: 16px; margin: 0px; color: #707070; font-style: italic;}
.service_fa_icon { color: #fff; position: relative; top: -2px; right: 2px;}
.main_heading {margin: 0px auto 0px;}

/*Why Us*/
section#why-us {padding: 40px 0px 0px;}

/*Dividors*/
.small-devidor { border-bottom: 3px dashed #e80566; width: 120px; margin: 5px auto 30px;}
.small-devidor.rightside { border-bottom: 3px dashed #e80566; width: 120px; margin: 5px auto 15px; float: right;}
.large-devidor { border-bottom: 3px dashed #e80566; width: 100%; margin: 10px 0px 15px;}


/*Calltoaction*/
#calltoaction {background: rgb(210,41,100);padding: 40px 0px;margin-top: -1px;}
button#submitform { padding: 8px 15px; border: 0px; background-color: #fff; border-radius: 4px; transition: 0.3s;border: 1px solid transparent;}
button#submitform:hover { background-color: #8c003c; color: #fff; border: 1px dashed #fff;}
.calltoaction_input { padding: 9px 20px; border-radius: 5px; border: 1px solid #d22964;}

/*Latest Projects Home page*/
#latest_projects{margin: 40px 0px;}
.box{ background: linear-gradient(180deg, #65258a 0%, #d00159 100%); font-family: 'Nanum Gothic', sans-serif; border-radius: 25px 0; position: relative; overflow: hidden;}
.box:before,.box:after,.box .box-content:before,.box .box-content:after{ content: ""; background: #fff; width: 50%; height: 4px; transform: scaleX(0); position: absolute; top: 15px; left: 15px; z-index: 1; transition: all 600ms ease;}
.box:after{ top: auto; bottom: 15px; left: auto; right: 15px;}
.box .box-content:before,.box .box-content:after{ width: 4px; height: 50%; transform: scaleY(0);}
.box .box-content:after{ left: auto; right: 15px; top: auto; bottom: 15px;}
.box:hover:before,.box:hover:after,.box:hover .box-content:before,.box:hover .box-content:after{ transform: scale(1);}
.box img{ width: 100%; height: 250px; transform: scale3d(1.1, 1.1, 1); transition: all 0.25s linear;}
.box:hover img{ opacity: 0.25; transform: scale(1.25);}
.box .inner-content{ color: #fff; text-align: center; width: 70%; opacity: 0; transform: translateX(-50%) translateY(-50%); position: absolute; top: 70%; left: 50%; transition: all 600ms ease;}
.box:hover .inner-content{ opacity: 1; top: 50%;}
.box .title{ font-size: 20px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 3px;font-family: 'Assistant', sans-serif;}
.box .post{ font-size: 14px; letter-spacing: 1px; text-transform: capitalize; margin: 0 0 12px; display: block;}
.box .icon{ padding: 0; margin: 0; list-style: none;}
.box .icon li{ display: inline-block; margin: 0 4px;}
.box .icon li a{ color: #fff; font-size: 18px; line-height: 32px; height: 35px; width: 35px; border: 2px solid #fff; border-radius: 10px 0 10px 0; display: block; transition: all 0.3s;}
.box .icon li a:hover{ color: #b31217; background: #fff; border-radius: 0 10px 0 10px;}

/*Price Plan*/
#priceplanes {margin: 80px auto;}
.price { list-style-type: none; border: 1px solid #eee; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s;}
.price:hover { box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2);}
.price .header { background-color: #702286; color: white; font-size: 25px;}
.price li { border-bottom: 1px solid #eee; padding: 6px 20px; text-align: right;}
.price .grey { background-color: #eee; font-size: 20px; text-align: center; padding: 20px 0px;}
.price_button { background: #e80566; border: 1px solid #e80566; color: #fff; transition: 0.5s; padding: 8px 15px;}
li.grey.price_heading { text-align: center; color: darkgreen; font-weight: 700;}
a.price_button:hover{color: #000; background-color: #fff;}
li.header.landing {background-color: #702286;}
li.header.tadmiti {background-color: #d22964;}
li.header.fullsite {background-color: #eb812b;}
li.header.store {background-color: #9ccd50;}

/* Showcase */
section#showcase {margin: 40px auto;}
.slick-slide { margin: 0px 20px;}
.slick-slide img { width: 100%;}
.slick-slider{ position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;}
.slick-list{ position: relative; display: block; overflow: hidden; margin: 0; padding: 0;}
.slick-list:focus{ outline: none;}
.slick-list.dragging{ cursor: pointer; cursor: hand;}
.slick-slider .slick-track,.slick-slider .slick-list{ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
.slick-track{ position: relative; top: 0; left: 0; display: block;}
.slick-track:before,.slick-track:after{ display: table; content: '';}
.slick-track:after{ clear: both;}
.slick-loading .slick-track{ visibility: hidden;}
.slick-slide{ display: none; float: left; height: 100%; min-height: 1px;}
[dir='rtl'] .slick-slide{ float: right;}
.slick-slide img{ display: block; max-height: 80px;}
.slick-slide.slick-loading img{ display: none;}
.slick-slide.dragging img{ pointer-events: none;}
.slick-initialized .slick-slide{ display: block;}
.slick-loading .slick-slide{ visibility: hidden;}
.slick-vertical .slick-slide{ display: block; height: auto; border: 1px solid transparent;}
.slick-arrow.slick-hidden { display: none;}

/*Footer call to action*/
section#call_to_action_footer { margin-top: 20px; background-color: #eeeeee; padding: 30px 0px;}
a.price_button.footer_call2action_button {width: 100%;}
div#footer_cll2actnBtn {text-align: center;padding-top: 20px;}

/*Footer*/
section#footer {  background: linear-gradient(75deg, #65258a 10%, #e80566) !important; padding: 20px 0px 60px;;}
span.footer_heading { color: #fff; font-size: 25px;}
ul.footerUL { padding: 0px; list-style: none;}
.footer_dividor { border-bottom: 2px dashed #fff; width: 100px; margin-bottom: 15px;}
a.footerLink {color: #ccc8c8; transition: 0.3s all; line-height: 30px;}
a.footerLink:hover { color: #fff!important; text-decoration: none!important;}

/* Scroll to top */
.scroll-top-wrapper { position: fixed; opacity: 0; visibility: hidden; overflow: hidden; text-align: center; z-index: 99999999; background-color: #9e187b; color: #eeeeee; width: 50px; height: 48px; line-height: 44px; right: 30px; bottom: 30px; padding-top: 2px; border-radius:50%; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
.scroll-top-wrapper:hover { background-color: #9e187b;}
.scroll-top-wrapper.show { visibility: visible; cursor: pointer; opacity: 1.0;}
.scroll-top-wrapper i.fa { line-height: inherit;}

/*Breadcrumbs*/
div#breadcrumbs {background-color: #d5096b;}
.breadcrumb { padding: 15px; margin-bottom: 0px; list-style: none; background-color: transparent; border-radius: 0px;}
ol.breadcrumb a {color: #fff;}
.breadcrumb > .active {color: #fff;}

/*Main Content*/
section#mainContent {margin: 20px 0px 0px;}

/*Panels*/
.panel{border-radius: 0px;}
.panel-heading.panel-sidrbar-top {color: #fff;background-color: #d5096b;border-color: #d5096b;}
ul#sidebarUL { padding: 0px; margin: 0px; list-style: none;}
.panel-body {padding: 0px;}
a.sidebarLink {padding: 0px 10px;}
li.sidebarLI {padding: 10px 5px;border-bottom: 1px solid #ccc;}
li.sidebarLI:hover {background-color: whitesmoke;}
span#togglepanel {float: left;}
span.sidebarbadge { float: left; margin-left: 5px; border: 1px solid #ccc; padding: 0px 10px; font-size: 13px; border-radius: 4px; background-color: #d5096b; color: #fff;}

/*Modals*/
.closeButton {float: right;}
.modal-header {background-color: #d5096b;color: #fff;}

/*Portolio*/
ul.filterUL {list-style: none;padding: 0px;font-size: 20px;}
li.filterLI {display: inline-block;margin: 0px 10px; border-bottom: 2px solid transparent; transition: 0.3s;}
li.filterLI:hover {border-bottom: 2px dashed #d5096b;cursor: pointer;}
.all_filters {font-weight: 600;}
.box img { width: 100%; height: 244px; transform: scale3d(1.1, 1.1, 1); transition: all 0.25s linear;}
.row.text-center.portfolio_link {margin: 10px auto;}
.row.text-center.portfolio_link a {font-size: 20px;color: #d5096b;transition: 0.3s;}
.row.text-center.portfolio_link a:hover{color: #000; }

/*Price list*/
ul#other_pricelistUL { padding: 0px; list-style: none; margin: 10px 0px;}
li.other_Pricelist_LI {display: inline-block;margin: 0px 5px;}
li.other_Pricelist_LI:first-child {display: inline-block;margin-right: 0px;}



@media screen and (max-width: 768px) {
body{font-size: 18px;}
#mainContent img {max-width: 100%!important;height: auto;}
div#top-right {text-align: center;margin: 10px auto 0px;}
div#top-left {text-align: center;margin: 0px auto 10px;}
img.hero_image {width: 90%;}
.navbar-header {margin: 20px;}
.toplink {font-size: 15px; display:  block;}
img.hero_image {height: 225px;margin: 25px 15px 15px;}
.gradient-bg {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 97%);}
.calltoaction_input{width: 100%; margin: 10px auto; text-align: center;}
button#submitform {width: 100%;margin: 10px auto;}
.slide.slick-slide{ margin: 20px;}
div#footer_cll2actnText {text-align: center;}
ul.footerUL { text-align: center; font-size: 20px;}
.footer_dividor {margin: 15px auto;}   
.navbar-right {float: none!important;margin-right: 15px;}
a.btn-quote.toplink{text-align: center;}
a.footerLink { color: #ccc8c8; transition: 0.3s all; line-height: 48px;}
a.text-white.toplink:first-child::after { content: " "!important; margin-left: 0px; margin-right: 0px;}
.other_Pricelist_LI a.btn.btn-quote {width: 100%!important;margin: 10px auto;}
li.shareli {display: block; margin: 25px auto;}
    .col-md-4.col-sm-4.category6.padd15.grid-item {
    overflow-y: auto;
}
}
@media only screen and (max-width:990px){
    .box { margin: 0 0 30px; }
}