/*FONTS*/
@import url("https://use.typekit.net/gsl7dof.css");

h1, h2, h3 {
	font-family: "indivisible", sans-serif !important;
	font-weight: 400;
	font-style: normal;
	text-transform: uppercase !important;
}
h4, h5, h6, span.fusion-toggle-heading, input#gform_submit_button_2 {
	font-family: "indivisible", sans-serif !important;
}
h3{
    font-size: 2.5rem !important;
}
h4 {
    font-size: 2rem !important;
}
p {
	font-family: 'Barlow Regular' !important;
    font-size: 1.4rem !important;
}

/*LAYOUTS*/
.one-third-col {
    width: 25% !important;
}
.two-thirds-col {
    width: 75%;
}
.half-col {
    width: 50%;
    margin: 3rem;
}
.flex-end {
    align-items: flex-end !important;
}
#main .full-width-container .fusion-builder-row{
	max-width: 100% !important;
	min-width: 100% !important;
}

/*ANIMATION*/
@keyframes bounce {
        0%   { transform: scale(1,1)      translateY(0); }
        10%  { transform: scale(1.1,.9)   translateY(0); }
        30%  { transform: scale(.9,1.1)   translateY(-200px); }
        50%  { transform: scale(1.05,.95) translateY(0); }
        57%  { transform: scale(1,1)      translateY(-7px); }
        64%  { transform: scale(1,1)      translateY(0); }
        100% { transform: scale(1,1)      translateY(0); }
    }

.bob-animation{
	animation: bounce 2s infinite cubic-bezier(0.280, 0.840, 0.420, 1);
}
@keyframes bounceLeftRight {
    0%   { transform: scale(1, 1) translateX(0); }
    10%  { transform: scale(1.03, 0.97) translateX(5px); }
    30%  { transform: scale(0.97, 1.03) translateX(-15px); }
    50%  { transform: scale(1.01, 0.99) translateX(5px); }
    57%  { transform: scale(1, 1) translateX(-2px); }
    64%  { transform: scale(1, 1) translateX(0); }
    100% { transform: scale(1, 1) translateX(0); }
}

.bounce-left-right-animation {
    animation: bounceLeftRight 2s infinite cubic-bezier(0.280, 0.840, 0.420, 1);
}

/* Style the header: fixed position (always stay at the top) */
.header {
  position: fixed;
  top: 0;
  z-index: 10000;
  width: 100%;
  background-color: #f1f1f1;
}

/*SCROLLER PROGRESS BAR*/
/* The progress container (grey background) */
.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;
}
/* The progress bar (scroll indicator) */
.progress-bar {
  height: 8px;
  background: #d35a1c;
  width: 0%;
}


/*HEADER*/
.header-video {
    height: -webkit-fill-available;
    padding-top: 25rem !important;
	padding-bottom: 200px !important;
	min-height: fit-content !important;
}
.line-seperator {
    width: 1.5px;
    height: 100px;
    background: white;
    margin: auto;
	position: absolute;
	bottom: -150px;
	left: 50%;
}
.line-seperator--dark {
    background: #26303e !important;
}
.animated-separator-col {
    margin-bottom: 200px !important;
}
.header-video .fusion-button {
    margin-top: 10rem;
    margin-bottom: 3rem;
}
.header-video img{
	margin-top: 3rem;
}

/*CUSTOM TABS*/
.horizontal-tabs-container {
    display: flex;
    width: 100%;
    flex-direction: column;
}
.horizontal-tabs {
  display: flex;
  padding: 10px;
  width: 100%;
}
.tab-content-container {
  flex: 1;
  padding: 10px;
}
.tab {
    cursor: pointer;
    text-align: center;
    width: 16.66666666666667%;
}
.tab-icon{
	padding: 2rem 10px;
}
.tab-icon img {
    margin-bottom: 2rem;
    height: 40px;
}
.tab-icon p {
    margin: 0 !important;
    font-size: 1.4rem !important;
}
.tab-stage {
    border-top: 1.5px solid #747c80;
    border-bottom: 1.5px solid #747c80;
    padding: 1rem 0rem;
    font-weight: bold;
}
.tab.active-tab .tab-icon, .tab:hover .tab-icon {
    background: linear-gradient(to right, #516477, #747c80);
    border-radius: 10px 10px 0 0;
    color: white;
}
.tab.active-tab img, .tab:hover img, .service:hover img{
filter: brightness(4) !important;
}
.tab.active-tab .tab-stage, .tab:hover .tab-stage{
    color: #c45a1c;
}

/*TAB CONTENT CONFIG*/
.tab-content-row, .tab-service-row {
    display: flex;
}
.tab-content-row .half-col:first-child {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.flex-stage-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3rem;
	align-items: center;
}
.stage-icon{
	width: 10%;
}
.flex-stage-title h5 {
	width: 80%;
	margin-left: 3rem;
}
.stage-seperator-icon{
	margin-top: 3rem;
}
.tab-content .tab-content--text{
    font-size: 14px;
	margin-top: 6rem;
}



/*SERVICE TABS*/

.services-container {
  	display: flex;
	margin-bottom: 3rem !important;
}
.services-container a {
    width: 25%;
}
.service {
    width: 100%;
    min-height: 30rem;
    cursor: pointer;
    margin: 10px !important;
    padding: 5rem 3rem;
    border: 1px solid #ccc;
    margin-right: 0px;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
    flex-direction: column;
	text-align: center;
}

.service:before, .service:after {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
	z-index: -2;
}
.service:before{
	background: #19303b;
	opacity: .9;
	z-index: -1;
}
.service:after{
	background-size: cover !important;
	background-repeat: no-repeat !important;
}
.service-1:after {
    background: url(/wp-content/uploads/2024/02/start-up-websites-img.png);
}
.service-2:after {
    background: url(/wp-content/uploads/2024/02/e-commerce-websites-img.png);
}
.service-3:after {
    background: url(/wp-content/uploads/2024/02/Corporate-websites-img.png);
}
.service-4:after {
    background: url(/wp-content/uploads/2024/02/SEO-img.png);
}
.service:hover {
  background-color: #c45a1c;
}
.service-content-container {
  display: flex;
  flex-wrap: wrap;
}
.service-content {
  display: none;
  width: 100%; /* Adjust the width based on your design */
  padding: 10px;
}
img.arrow {
    margin-right: 5rem;
    text-align: right;
    float: right;
}

/*WORDPRESS EXPERTS*/
.experts-content {
    width: 60%;
    margin-left: auto !important;
}
.shellcore-mockup {
    min-width: 120%;
    margin-right: -51% !important;
    margin-left: -52%;
    margin-top: -20px !important;
    z-index: -1 !important;
}
.shellcore-mockup .fusion-image-element:after {
    content: '';
    background: #516477;
    height: 20px;
    width: 100%;
    position: absolute;
    z-index: 100;
    bottom: 0;
    left: 0;
}

/*PROJECTS SCROLLER*/
.projects-container .fusion-column-wrapper {
    margin: 0 !important;
}
.project-scroller {
	display: flex;
	overflow: hidden;
	white-space: no-wrap;
}
.project-scroller:before, .project-scroller:after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 150px;
    z-index: 10;
}
.project-scroller:before {
    content: '';
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 0.41220238095238093) 50%, rgba(255, 255, 255, 0) 100%);
    left: 0;
}
.project-scroller:after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255, 0.41220238095238093) 25%, rgb(255 255 255) 70%, rgba(255, 255, 255, 1) 100%);
    right: 0;
}
.project-scroller--content {
	white-space: no-wrap;
    display: flex;
	animation: scroll 30s linear infinite; /* Adjust duration as needed */
}
.project-scroller--content:hover {
	animation-play-state: paused;
}
.project {
    width: 450px;
	margin: 1rem;
}
.project img {
    width: 100%;
}
.project .scroll-project:hover {
    width: 100%;
	animation: scrollimg 15s linear infinite; /* Adjust duration as needed */
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Adjust for slide width and spacing */
    }
}
@keyframes scrollimg {
    0% {
        transform: translateY(0);
    }
	100% {
        transform: translateY(-50%); /* Adjust for slide width and spacing */
    }
}
.stacked-projects {
    width: fit-content;
}
.project-scroller {
    height: 500px;
}
.top{
	height: 50%;
	overflow: hidden;
}
.bottom {
    display: flex;
	height: 50%;
	overflow: hidden;
}
.bottom > div {
    width: 50%;
}
.top:first-child {
	margin-bottom: 1rem;
}
.project.one-column-projects > div {
    height: 50%;
	overflow: hidden;
}
.project.one-column-projects > div:first-child {
	margin-bottom: 1rem;
}
.stacked-projects img {
    height: max-content;
    width: 100%;
}

.project.stacked-projects.column {
    display: flex;
    flex-direction: column;
}

.project.stacked-projects.column img{
    height: 50%;
}
.non-scroll--fit {
    height: 100%;
}
.non-scroll--fit img {
    object-fit: cover !important;
    height: 100%;
}





/*TESTIMONIALS SELECTOR*/
.testimonial-container {
    display: flex;
    margin-bottom: 3rem !important;
	flex-direction: column;
	position: relative;
}
.testimonial-container.animated-testimonials:before {
    content: '';
    background: #c45a1c;
    width: 0.5px;
    height: 50%;
    left: -15px;
    bottom: 0;
    position: absolute;
}
.testimonial-container a {
    width: 25%;
}
.testimonial-row {
    display: flex;
}
.testimonial {
    width: 100%;
    min-height: auto;
    cursor: pointer;
    margin: 10px !important;
    padding: 0rem 0rem;
    margin-right: 0px;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
.testimonial-img img {
    margin-bottom: -75%;
    margin-top: 65%;
}
.testimonial:before, .testimonial:after {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
}
.testimonial:before {
    background: #19303b;
    opacity: .9;
    z-index: -1;
}

.testimonial-1:after {
    background: url(/wp-content/uploads/2024/02/testimonial-img-1.png);
}

/* .testimonial:hover {
    background-color: #c45a1c;
} */

.testimonial-content-container {
    display: flex;
    flex-wrap: wrap;
}

.testimonial-content {
    display: none;
    width: 100%;
    padding: 10px;
}

.testimonial-container a {
    width: 100%;
}

.testimonial-content-container {
    width: 75%;
    padding: 20px;
}

.testimonial-content {
    display: none;
    width: 100%;
    padding: 10px;
}

.testimonials-title {
    margin-bottom: -25rem !important;
    margin-top: 5rem !important;
}
.indent-title{
    margin-left: 4rem;
    margin-top: 0;
}
.testimonial-graphics {
    position: absolute !important;
    top: -30px;
    width: 60%;
}

#testimonial-logo-1.active img {
    content: url('https://designoffice.co.uk/wp-content/uploads/2024/02/sandbach-council-orange-logo.png');
}
#testimonial-logo-2.active img, #testimonial-logo-2.active img:hover {
    content: url('https://designoffice.co.uk/wp-content/uploads/2024/02/blue-lagoon-orange-logo.png');
}
#testimonial-logo-3.active img {
    content: url('https://designoffice.co.uk/wp-content/uploads/2024/02/ceramictiles-logo-orange.png');
}
#testimonial-logo-4.active img {
    content: url('https://designoffice.co.uk/wp-content/uploads/2024/02/tautliners-logo-orange.png');
}
.testimonial-container .fusion-builder-row {
    margin: auto !important;
}
.testimonial-container.animated-testimonials div {
	width: 100%;
	display: flex;
}

/*CONTACT FORM*/
.contact-form-title {
    width: 60% !important;
    margin-left: auto !important;
}

div#gform_fields_5 {
    display: flex !important;
}
.contact-arrow {
    width: 60%;
    margin-left: auto;
    position: absolute;
    right: 40px;
    top: 100px;
}
.gform_wrapper.gravity-theme .ginput_complex:not(.ginput_container_address) span:not([style*="display:none"]):not(.ginput_full) {
    padding-right: 0% !important;
}

/*FAQ*/
.faq-container:before {
    content: '';
    background: #747c80;
    height: 100%;
    width: 40%;
    position: absolute;
    left: 0;
}
.faq-content {
    width: 60% !important;
	z-index: 10 !important;
    margin-bottom: 12rem !important;
    margin-top: 3rem !important;
}
.faq-content span.fusion-imageframe {
    margin-left: 20% !important;
}
.faq-img {
    margin-bottom: -65% !important;
    left: -50px !important;
	z-index: -1 !important;
}
.faq-toggles {
    width: 70% !important;
    margin-left: auto;
}


/*RESPONSIVE*/
@media screen and (max-width: 1200px){
	.faq-img {
		margin-bottom: -80rem !important;
		left: -40% !important;
		width: 60% !important;
	}
	.testimonial-row {
		display: flex;
		margin-top: 6rem;
	}
	.post-content .fusion-fullwidth.projects-container,
	.post-content .fusion-fullwidth.experts-container {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.post-content .fusion-fullwidth.testimonial-container{
		padding-left: 3rem !important;
		padding-right: 3rem !important;
	}
}
@media screen and (max-width: 1100px){
	h1.fusion-responsive-typography-calculated {
		font-size: 4rem !important;
	}
	h2.fusion-responsive-typography-calculated {
		font-size: 3rem !important;
	}
	.services-container {
		flex-wrap: wrap;
	}
	.services-container a {
		width: 50%;
	}
	.service {
    	margin: 0px !important;
	}
	.shellcore-mockup {
		min-width: 100%;
	}
	.experts-container .fusion-builder-row {
		flex-direction: column-reverse;
	}
	.shellcore-mockup {
		min-width: 70%;
		max-width: 50%;
		margin-top: -45rem !important;
		left: -30% !important;
	}
	.testimonial-row {
		margin-top: 10rem;
	}
}

@media screen and (max-width: 1000px){
	.horizontal-tabs {
		flex-wrap: wrap;
	}
	.tab {
		cursor: pointer;
		text-align: center;
		width: 33.333333%;
	}
		.testimonial-img img {
		margin-bottom: -10rem;
		margin-top: 10rem;
	}
	.contact-form-title {
	    width: 90% !important;
	}
	.contact-arrow {
		width: 90%;
		top: 60px;
	}
	.faq-container:before {
    	width: 20%;
	}
	.faq-content {
		width: 80% !important;
	}
	.faq-img {
		margin-bottom: -80rem !important;
		left: -54% !important;
		width: 55% !important;
	}
	.animated-separator-col {
		min-width: 100% !important;
	}
}
@media screen and (max-width: 900px){
	.tab-content-row, .tab-service-row {
		display: flex;
		flex-direction: column;
	}
	.half-col {
		width: 100%;
		margin: 0rem;
	}
	.shellcore-mockup {
		margin-top: -35rem !important;
	}
	.post-content .experts-content {
		margin-left: auto !important;
		margin-right: 6rem !important;
	}
	.testimonial-row {
		flex-wrap: wrap;
	}
	.testimonial-container {
		flex-direction: row;
	}
	.testimonial-row {
		flex-direction: column-reverse;
	}
	.testimonial-row {
		margin-top: 3rem;
	}
	.testimonials-title {
		margin-bottom: 0rem !important;
	}
	.testimonial-container.animated-testimonials div {
		height: 100%;
		display: flex;
	}
	.testimonial-container.animated-testimonials img{
		width: 80%;
		margin: auto;
	}
	.testimonial-container.animated-testimonials:before {
		width: 100%;
		height: 0.5px;
		left: 0;
		bottom: -20px;
	}
	.testimonial-content-container {
		width: 100%;
	}
	.testimonial-content .flex-row {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-start !important;
	}
	.testimonial-content--text {
		padding: 3rem;
	}
	.testimonial-img img {
		margin-bottom: -12rem;
		margin-top: 0rem;
	}
	img.arrow{
		display: none !important;
	}
}
@media screen and (max-width: 800px){
	.accordian.fusion-accordian.faq-toggles {
		margin-top: 3rem;
		width: 70% !important;
	}
	#content {
		margin-bottom: 50px;
	}
	.faq-img {
		margin-bottom: 0rem !important;
		left: 0 !important;
		width: 100% !important;
	}
	.shellcore-mockup .fusion-image-element:after {
    	height: 10px;
	}
	.shellcore-mockup {
		margin-top: -15rem !important;
	}
}
@media screen and (max-width: 600px){
	h1.fusion-responsive-typography-calculated {
		font-size: 3rem !important;
	}
	.post-content h2.fusion-responsive-typography-calculated {
		font-size: 2.5rem !important;
	}
	.post-content h3.fusion-responsive-typography-calculated {
		font-size: 2rem !important;
	}
	.post-content h4.fusion-responsive-typography-calculated {
		font-size: 1.8rem !important;
	}
	.shellcore-mockup {
		margin-top: -10rem !important;
	}
	.post-content .experts-content {
		margin-right: 0rem !important;
	}
	.experts-content {
		padding: 0 4rem !important;
	}
	.post-content .experts-content {
		width: 90%;
	}
	.accordian.fusion-accordian.faq-toggles {
		width: 90% !important;
	}
	.project {
		width: 250px;
	}
	.project-scroller:before, .project-scroller:after {
		width: 0px;
	}
	.services-container {
		margin-bottom: 2rem !important;
	}
	.testimonial-content-container {
		padding: 0px;
	}
	h4.grey, h4.orange {
		margin-top: 0;
	}
	.one-third-col {
		width: 100% !important;
	}
	.post-content .experts-content {
		width: 100%;
		margin-bottom: 3rem;
		text-align: right;
	}
	.fusion-text.experts-content {
		padding: 10px !important;
	}
	.two-thirds-col {
		width: 100%;
	}
	.faq-content {
		width: 100% !important;
	}
	.faq-container:before {
    	content: none;
	}
	.faq-content span.fusion-imageframe {
		margin-left: 20px !important;
	}
	.accordian.fusion-accordian.faq-toggles {
		width: 100% !important;
	}
	.faq-content {
    	margin-bottom: 6rem !important;
	}
	.bob-animation.line-seperator.line-seperator--dark {
		display: none;
	}
	.animated-separator-col {
		margin-bottom: 0px !important;
	}
	.header-video {
		padding-top: 20rem !important;
	}
	#pojo-a11y-toolbar.pojo-a11y-toolbar-left .pojo-a11y-toolbar-toggle {
		left: 180px;
		top: 100%;
	}
}
@media screen and (max-width: 500px){
	.post-content h1.fusion-responsive-typography-calculated {
		font-size: 2.7rem !important;
	}
	.post-content h2.fusion-responsive-typography-calculated {
		font-size: 2.2rem !important;
	}
	.post-content h3.fusion-responsive-typography-calculated {
		font-size: 2rem !important;
	}
	.post-content h4.fusion-responsive-typography-calculated {
		font-size: 1.5rem !important;
	}
	.tab {
		width: 50%;
	}
	.testimonial-content .flex-row {
		flex-direction: column-reverse;
	}
	.testimonial-container.animated-testimonials div {
		width: 50%;
	}
	.testimonial-container.animated-testimonials.flex-end {
		display: flex;
		flex-direction: column;
	}
	.testimonial-container.animated-testimonials div {
		width: 50%;
		margin: auto;
		margin-bottom: 3rem;
	}
	.testimonial-graphics {
		position: absolute !important;
		top: -20px;
		width: 100%;
	}
	.testimonial-container.animated-testimonials > div {
		width: 100%;
		justify-content: center;
	}
}
@media screen and (max-width: 400px){
	.services-container a {
		width: 100%;
	}
	.post-content .fusion-fullwidth.process-container {
		padding: 0 !important;
	}
	.post-content .fusion-fullwidth.process-container .fusion-text, .tab-content-row{
		padding: 3rem !important;
		
	}
}