/*Home page*/
/*GoogleWorkspace Section*/
.googleworkspace_title h2{font-size:60px; color:#34352f; letter-spacing:3.3px;line-height:0.8;padding-bottom:0;margin-bottom:0;}
.googleworkspace_title h4{font-size:40px; color:#34352f; letter-spacing:1.8px;line-height:1;padding-bottom: 0.3em;margin-top:10px;}
.googleworkspace_title {font-size:15px; color:#34352f; letter-spacing:0.75px;text-align:center;}

.theme-btn.bluebg a {text-align:center; width:auto;background:#4284f3;color:white;border:#4284f3;border-radius:5px;}
.theme-btn.bluebg a:hover {background:#174EA6;color:white;border:#4284f3}

.theme-btn.transparent a{width:auto; color:#4284f3;border:0px;text-align:center;}
.theme-btn.transparent a:hover {color:#174EA6;background:transparent;}

/*Visual Disable WPBakery Tabs Animation*/
.vc_tta-panel.vc_animating {
     opacity: 0;
}


/* The following code can be used to add a fade animation */
.vc_tta.vc_general .vc_tta-panel.vc_active .vc_tta-panel-body {
    animation: vctabsAnimate 0.5s cubic-bezier(0.4, 0, 0.6, 1) 1;
}


@keyframes vctabsAnimate {
    0% {
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}
/*Our Packages Section*/
.free {padding:4px 12px; background:#5d5d5c; border-radius:50px;color:white;margin-right:5px;}
.packages_list {}

.our_packages_row>.wpb_column>.vc_column-inner{
	max-width: 305px;
    margin-left: auto;
    margin-right: auto;}
.pricinglisting{display:flex; align-items:flex-start;}
.pricinglisting.free_tag{align-items:center;}
.pricinglisting img{width:28px;height:28px;object-fit:contain;}
.pricinglisting img.tick{width:auto;height:auto;margin-top:5px;margin-right:5px;}
.theme-btn.yellowhover a {width:100%; max-width:220px;}
.theme-btn.yellowhover a:hover {background:#efff1a; color:#34352f;}

/*Website design service Page*/
.web_design {
	background-color: #c8ceac;}
.website_letusbuild h2{font-size:60px;color:#34352f; letter-spacing:6px;line-height:0.8;padding-bottom:0;margin-bottom:0;font-weight: bold;}
.website_letusbuild h3{font-size:60px;color:#34352f; letter-spacing:7px;line-height:0.8;padding-top:0;margin-top:0; margin-bottom:30px;font-weight: bold;}
.website_letusbuild h6{font-size:20px; color:#34352f; letter-spacing:1px;font-weight: 10;}
.website_letusbuild {font-size: 17px; color: #34352f; line-height: 35px;}

/*Site building made easy*/
.sitebuilding_section{
	background-image: url(img/zhi_solution-wd_site-building-bg.png);
    background-repeat: no-repeat;
    background-position: right -20%;
	background-size: 100%;}
.theme-btn.webdesign a {width:auto;text-align:center;}
.service_details {box-shadow:0px 35px 35px;color:#DFE1D9BF;background:white;height:300px;width:306px;margin:30px;text-align:inherit}
.service_list h3{font-size:25px; color:#5d5d5c; letter-spacing:0.5px;align-content:center}
.service_list p{font-size:15px; color:#5d5d5c; letter-spacing:0.3px;align-content:center;}

/*Explore Services*/
.explore_services{
	background-image: url(img/zhi_solution-wd_service-bgtop.png),url(img/zhi_solution-wd_service-bgbottom.png);
    background-repeat: no-repeat;
	background-position: right 10% top -20%, left 3% bottom -15%;
	background-color: #c8ceac;}
.explore_services_list {background-color:rgba(194, 201, 159, 0.35);padding-left: 55px;padding-right: 55px; padding-top: 55px;}
.explore_services_table td {vertical-align: top;padding-right: 15px; }
.explore_services_table td:last-child {padding-bottom: 40px;}
.explore_services_table h3{font-size:25px; color:#5d5d5c; letter-spacing:0.5px;align-content:center;margin-top:0;}
.explore_services_table {font-size:15px; color:#5d5d5c; letter-spacing:0.5px;align-content:center;}

/*Work we've done - Portfolio*/
.zhi_portfolio{
	text-align: center;
}
.portfolio_name{
	font-size:21px;
	font-weight: 600;
	color:#5d5d5c;
	text-align:center;
	margin-bottom: 20px;
}
.portfolio {
	box-shadow:0 3px 6px #00000040;
	background-position:top center;
	background-size:100% auto;
	background-color:#fff;
position: relative;
display: inline-block;
width: 100%;
max-width: 300px;
height: 300px;
overflow: hidden;
border-radius: 20px;
}
.portfolio:hover{
	animation: scroll 12s alternate;
}
.portfolio-overlay {
position: absolute;
background: rgba(0,0,0,0.3);
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1;
justify-content: center;
display: flex;
align-items: center;
}
.portfolio-overlay img {
max-width: 48px;
}
.portfolio-bg {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.portfolio a {
display: inline-block;
width: 100%;
height: 100%;
}
.portfolio-link {
color: #fff;
position: absolute;
z-index: 3;
font-weight: 500;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
font-size: 21px;
white-space:nowrap;
}
.portfolio-overlay, .portfolio-link {
opacity: 0;
transition: all .3s ease;
}
.portfolio-wrapper:hover .portfolio-overlay, .portfolio-wrapper:hover .portfolio-link {
opacity: 1;
transition: all .3s ease;
}

/* Responsive */
@media screen and (max-width: 992px) {
/*Website design service Section*/
.website_letusbuild h2{font-size:50px;letter-spacing:0px;}
.website_letusbuild h3{font-size:46px;letter-spacing:3px;}
.website_letusbuild {font-size:16px;}

/*Explore Services*/	
.explore_services_list {padding-top: 15px;padding-left: 15px;padding-right: 15px;}
.explore_services_table,.explore_services_table tr, .explore_services_table td {vertical-align: middle;padding-right:0;display:inline-block;height:unset!important;}
.explore_services_table td:last-child {width:100% !important;padding-top:10px;}
.explore_services_table td:first-child {width:21px !important;}
.explore_services_table td:nth-child(2) {width:calc(100% - 28px) !important;}	
.explore_services_table h3{font-size:20px; color:#5d5d5c; letter-spacing:0.5px;align-content:center;margin-top:0;}
.explore_services_table {font-size:15px; color:#5d5d5c; letter-spacing:0.5px;align-content:center;}	

/*Site building made easy section*/
.service_list.vc_row.vc_row-flex {flex-direction:row;flex-wrap:nowrap;align-content:center;justify-content: center;}
.service_details {height: 290px;width: 300px;margin: 10px;text-align: inherit;}
.sitebuilding_section{background-image: url(img/zhi_solution-wd_site-building-bg.png);background-size: 100%;background-position: center;}

/*Work we've done - Portfolio*/
/*.portfolio {height: 250px;}*/
.portfolio-wrapper{margin-bottom: 30px;}
}

@media screen and (max-width: 768px) {
.packages_list{
	/*border-bottom: solid 1px #5d5d5c;
    border-top: solid 1px #5d5d5c;*/
    border-right: 0px;
	border-left: 0px;}
.our_packages_row>.wpb_column>.vc_column-inner{
	margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
	max-width: 245px;
	
	}
.packageinclude {max-width: 220px;margin-left:auto;margin-right: auto;}
.googleworkspace_title h2{font-size:28px;}
.googleworkspace_title h4{font-size:20px;}
.googleworkspace_title {font-size:15px;}
.package_tab.vc_tta.vc_general .vc_tta-tabs-list{
    display: inline-flex;
    justify-content: center;
	width:100%;
}
	
.website_letusbuild h2{font-size:40px;letter-spacing:1px;line-height:normal;}
.website_letusbuild h3{font-size:40px;letter-spacing:1px;}
.website_letusbuild h6{font-size:15px;}
.website_letusbuild {font-size:15px;}

.explore_services_section.vc_row.vc_row-flex {box-sizing: border-box;display: flex;justify-content: center;}
	
.service_list.vc_row.vc_row-flex {flex-direction: row;flex-wrap: wrap;align-content: center;justify-content: center;}
.sitebuilding_section{background-image: url(img/zhi_solution-wd_site-building-mobilebg.png);background-size: contain;}

/*Work we've done - Portfolio*/
/*.portfolio {height: 250px;}*/
.portfolio-wrapper{margin-bottom: 30px;}
}

@media screen and (max-width: 576px) {
/*Work we've done - Portfolio*/
.portfolio_name, .portfolio-link{font-size:18px;}
.portfolio {border-radius: 10px;}
.portfolio-wrapper{margin-bottom: 25px;}
.portfolio-link img, .portfolio_name img { max-width: 16px;}	
	
	.package_tab.vc_tta-tabs.vc_tta-tabs-position-top .vc_tta-tabs-list{display:block;padding:0 15px; background-color: transparent;}
	.package_tab.vc_tta.vc_tta-spacing-1 .vc_tta-tab{display:block;margin-bottom:8px;margin-left:0;}
	.package_tab.vc_tta.vc_tta-spacing-1 .vc_tta-tab:last-child{margin-bottom:0px;}
}


@media screen and (max-width: 360px) {
/*Work we've done - Portfolio*/
.portfolio_name, .portfolio-link{font-size:18px;}
.portfolio {border-radius: 10px;}
.portfolio-wrapper{margin-bottom: 25px;}
.portfolio-link img, .portfolio_name img { max-width: 16px;}	
}
body, html{overflow-x:hidden;width:100%;}

@keyframes scroll {
  from {background-position: top center;}
  to {background-position: bottom center;}
}