html {
  scroll-behavior: smooth;
}

/*
 * Colour control
 *
 * Change the Pinpoint variables below to recolour the theme from this file.
 * The rules underneath push those colours into template sections that set
 * their own local --color-* values.
 */
:root {
  --pinpoint-brand: #EE1D23;
  --pinpoint-gradient: linear-gradient(to right, #f03a3f, #EE1D23, #a3151a);
  --pinpoint-brand-dark: #95111F;
  --pinpoint-brand-navy: #1a1c2e;
  --pinpoint-brand-rgb: 238, 29, 35;
  --pinpoint-brand-dark-rgb: 149, 17, 31;
  --pinpoint-heading: var(--pinpoint-brand-navy);
  --pinpoint-text: #5d666f;
  --pinpoint-light: #ffffff;
  --pinpoint-soft-bg: #f2f2f2;
  --pinpoint-border-soft: rgba(93, 102, 111, 0.25);

  --color-primary: var(--pinpoint-brand);
  --color-primary-background: var(--pinpoint-brand);
  --color-primary-hover: var(--pinpoint-brand-dark);
  --color-primary-background-hover: var(--pinpoint-brand-dark);

  --color-foreground: var(--pinpoint-text);
  --color-foreground-heading: var(--pinpoint-heading);
  --color-foreground-subheading: var(--pinpoint-text);
  --color-background: var(--pinpoint-light);
  --color-background-subheading: rgba(255, 255, 255, 0.1);
  --color-border-subheading-bg: rgba(32, 40, 45, 0.1);

  --color-primary-button-text: var(--pinpoint-light);
  --color-primary-button-background: var(--pinpoint-brand);
  --color-primary-button-border: var(--pinpoint-brand);
  --color-primary-button-icon: var(--pinpoint-brand);
  --color-primary-button-icon-background: var(--pinpoint-light);

  --color-primary-button-hover-text: var(--pinpoint-brand);
  --color-primary-button-hover-background: var(--pinpoint-light);
  --color-primary-button-hover-border: var(--pinpoint-brand);
  --color-primary-button-hover-icon: var(--pinpoint-light);
  --color-primary-button-hover-icon-background: var(--pinpoint-brand);

  --color-secondary-button-text: var(--pinpoint-heading);
  --color-secondary-button-background: var(--pinpoint-light);
  --color-secondary-button-border: var(--pinpoint-light);
  --color-secondary-button-icon: var(--pinpoint-light);
  --color-secondary-button-icon-background: var(--pinpoint-brand);

  --color-secondary-button-hover-text: var(--pinpoint-light);
  --color-secondary-button-hover-background: var(--pinpoint-brand);
  --color-secondary-button-hover-border: var(--pinpoint-brand);
  --color-secondary-button-hover-icon: var(--pinpoint-brand);
  --color-secondary-button-hover-icon-background: var(--pinpoint-light);

  --color-input-background: var(--pinpoint-light);
  --color-input-text: var(--pinpoint-text);
  --color-input-border: var(--pinpoint-border-soft);
}

.header-1.header-floating:hover, .header-1.header-sticky.scrolled-past-header {
    --color-background: var(--pinpoint-brand);
}

.scroll-to-top{
  background-color: var(--pinpoint-brand);
}

.text-lists li svg{
  color: var(--pinpoint-brand);
}

.text-lists li .pinpoint-home-check-icon {
  width: 28px;
  min-width: 28px;
  height: auto;
}

.multicolumn-card .card-icon .pinpoint-home-card-tick-icon {
  width: 40px;
  height: auto;
}

/* Image Banner colour override.
   Uses the root Pinpoint variables above so it follows the theme palette. */
#image-banner .card-project,
.image-banner .card-project {
  --color-foreground: var(--pinpoint-light);
  --color-foreground-heading: var(--pinpoint-light);
}

#image-banner .card-project::after,
.image-banner .card-project::after {
  background: linear-gradient(
    180deg,
    rgba(var(--pinpoint-brand-dark-rgb), 0) 0%,
    var(--pinpoint-brand-dark) 100%
  );
}

#image-banner .icon-project-link svg circle,
.image-banner .icon-project-link svg circle {
  fill: var(--pinpoint-light);
}

#image-banner .icon-project-link svg path,
.image-banner .icon-project-link svg path {
  fill: var(--pinpoint-brand);
}

.text-banner,
.footer-bottom,
.footer-main,
.section-contact-form .contact-form-wrap,
.contact-2 .contact-box,
.pricing-plan-2,
.faq-2 .accordion-block.active,
.blog-share-item .subheading-bg:focus,
.blog-share-item .subheading-bg:hover {
  --color-background: var(--pinpoint-brand);
  --color-foreground: var(--pinpoint-light);
  --color-foreground-heading: var(--pinpoint-light);
  --color-foreground-subheading: var(--pinpoint-light);
}

/* Gradients (if removed will default to background colour of brand */
.text-banner-inner, .multicolumn-card:hover {
  background: var(--pinpoint-gradient);
}

.footer-main {
  --color-background: var(--pinpoint-brand-navy);
  --color-primary-hover: rgba(255, 255, 255, 0.75);
  background-image: none!important;
}

.footer-bottom {
  /* --color-background: var(--pinpoint-brand); */
  background: #232534;
}

.multicolumn.with-bg-color,
.multicolumn-page .multicolumn-card,
.multicolumn-card .card-icon,
.section-contact-form {
  --color-background: var(--pinpoint-soft-bg);
}

/* Project card white text override.
   Remove or comment out this block to revert project card text colours. */
.image-text-card.text-white,
.image-text-card.text-white * {
  color: #fff;
}

.image-text-card.text-white svg,
.image-text-card.text-white svg * {
  color: #fff;
  fill: currentColor;
}

.image-text-card.text-white .button .svg-wrapper,
.image-text-card.text-white .button .svg-wrapper * {
  color: var(--color-primary-button-icon);
  fill: currentColor;
}

.image-text-card.text-white .button:focus .svg-wrapper,
.image-text-card.text-white .button:focus .svg-wrapper *,
.image-text-card.text-white .button:hover .svg-wrapper,
.image-text-card.text-white .button:hover .svg-wrapper * {
  color: var(--color-primary-button-hover-icon);
  fill: currentColor;
}

.image-text-card.text-white .button--secondary .svg-wrapper,
.image-text-card.text-white .button--secondary .svg-wrapper * {
  color: var(--color-secondary-button-icon);
  fill: currentColor;
}

.image-text-card.text-white .button--secondary:focus .svg-wrapper,
.image-text-card.text-white .button--secondary:focus .svg-wrapper *,
.image-text-card.text-white .button--secondary:hover .svg-wrapper,
.image-text-card.text-white .button--secondary:hover .svg-wrapper * {
  color: var(--color-secondary-button-hover-icon);
  fill: currentColor;
}

.multicolumn-card,
.multicolumn-page .multicolumn-card .card-icon,
.contact-box {
  --color-background: var(--pinpoint-light);
}

.multicolumn .multicolumn-card:focus,
.multicolumn .multicolumn-card:hover,
.service-content-left .card-icon,
.promotion-has-column .promotion-item:hover,
.pricing-plan .card-pricing.active,
.pricing-plan .card-pricing:hover {
  --color-background: var(--pinpoint-brand);
  --color-foreground: var(--pinpoint-light);
  --color-foreground-heading: var(--pinpoint-light);
}

.multicolumn .multicolumn-card:focus .card-icon,
.multicolumn .multicolumn-card:hover .card-icon {
  --color-background: var(--pinpoint-light);
  --color-foreground: var(--pinpoint-brand);
}

.subheading-bg,
.sidebar-widget .subheading-bg:focus,
.sidebar-widget .subheading-bg:hover,
.sidebar-widget .subheading-bg.active {
  /* --color-foreground-subheading: var(--pinpoint-brand); */
  /* --color-border-subheading-bg: rgba(18, 52, 86, 0.18); */
}

footer .social-link,
.contact-2 .card-icon-text svg {
  background-color: var(--pinpoint-brand);
  color: var(--pinpoint-light);
}

footer .social-link:focus,
footer .social-link:hover,
.contact-2 .card-icon-text a:focus,
.contact-2 .card-icon-text a:hover {
  background-color: var(--pinpoint-brand-dark);
  color: var(--pinpoint-light);
}

.footer-menu .link,
.button--cta,
.link {
  color: var(--color-primary);
}

.footer-main .footer-menu .link,
.footer-main .widget-heading,
.footer-main .text {
  color: var(--pinpoint-light);
}

.scrolled-past-header .header-logo img, .header-floating:hover img{
  filter: brightness(0) invert(1);
}

/* Turn off when we have logos */
.footer-logo img, .header-logo img{
  filter: brightness(0) invert(1);
}
.drawer-menu.show .header-logo img{
 filter: unset;
}
.card-project.no-hover::after{
  display: none;
}


/* ----------------------------------------------------------------------------------
    THIS CURRENTLY OVERWRITES THE PROJECTS SLIDING 
   ------------------------------------------------------------------------------------*/
.text-image-sticky .image-text-card:nth-child(1){
  background: linear-gradient(to right, #e57a17, #F5881F, #b96512);
}
.text-image-sticky .image-text-card:nth-child(2){
  background: linear-gradient(to right, #d9441d, #F04E22, #a53216);
}
.text-image-sticky .image-text-card:nth-child(3) {
  background: linear-gradient(to right, #f03a3f, #EE1D23, #a3151a);
}
.text-image-sticky .image-text-card:nth-child(4){
  background: linear-gradient(to right, #2a6a9f, #1b4f7e, #10324f);
}
.text-image-sticky .image-text-card:nth-child(5){
  background: linear-gradient(to right, #1f2442, #12152a, #090b16);
}
.text-image-sticky .image-text-card .button--primary{
    background: transparent;
    border: 1px solid #fff;
}
.text-image-sticky .image-text-card .button--primary .svg-wrapper{
    background-color: transparent;
}
.text-image-sticky .image-text-card .button--primary .svg-wrapper *{
    color: #fff;
    fill: #fff;
}
.text-image-sticky .image-text-card .button--primary:hover .svg-wrapper{
    background-color: #fff;
}
.text-image-sticky .image-text-card .button--primary:hover .svg-wrapper *{
    color: #d9441d;
    fill: #d9441d;
}
/* ----------------------------------------------------------------------------------
    THIS CURRENTLY OVERWRITES THE HEADER DELETE EVERYTHING BELOW TO ABOVE TO PREVIOUS COMMENT
   ------------------------------------------------------------------------------------*/


/* ----------------------------------------------------------------------------------
    THIS CURRENTLY OVERWRITES THE HEADER DELETE EVERYTHING BELOW TO REVERT
    Optional header variation: transparent sticky header with shadow.
    Comment out this whole block to return to the solid colour sticky header. 
   ------------------------------------------------------------------------------------*/
.header-1.header-sticky.scrolled-past-header,
.header-1.header-sticky.scrolled-past-header:hover {
  --color-background: rgba(255, 255, 255, 0.92);
  --color-foreground: var(--pinpoint-heading);
  --color-primary-hover: var(--pinpoint-brand);
  --color-border: rgba(52, 57, 62, 0.08);
  --color-secondary-button-text: var(--pinpoint-heading);
  --color-secondary-button-background: var(--pinpoint-light);
  --color-secondary-button-border: rgba(52, 57, 62, 0.18);
  --color-secondary-button-icon: var(--pinpoint-light);
  --color-secondary-button-icon-background: var(--pinpoint-brand);
  --color-secondary-button-hover-text: var(--pinpoint-light);
  --color-secondary-button-hover-background: var(--pinpoint-brand);
  --color-secondary-button-hover-border: var(--pinpoint-brand);
  --color-secondary-button-hover-icon: var(--pinpoint-brand);
  --color-secondary-button-hover-icon-background: var(--pinpoint-light);
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(52, 57, 62, 0.08);
  box-shadow: 0 12px 34px rgba(52, 57, 62, 0.16);

}

.header-1.header-sticky.scrolled-past-header .header-grid,
.header-1.header-sticky.scrolled-past-header:hover .header-grid {
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
}

.header-1.header-sticky.scrolled-past-header .menu-link,
.header-1.header-sticky.scrolled-past-header:hover .menu-link,
.header-1.header-sticky.scrolled-past-header .header-actions,
.header-1.header-sticky.scrolled-past-header:hover .header-actions,
.header-1.header-sticky.scrolled-past-header .menu-open,
.header-1.header-sticky.scrolled-past-header:hover .menu-open {
  color: var(--pinpoint-heading);
}

.header-1.header-sticky.scrolled-past-header .header-logo img,
.header-1.header-sticky.scrolled-past-header:hover .header-logo img {
  filter: none;
}

.header-1.header-sticky.scrolled-past-header .menu-open svg circle,
.header-1.header-sticky.scrolled-past-header:hover .menu-open svg circle {
  fill: var(--pinpoint-light);
  stroke: var(--pinpoint-heading);
}

.header-1.header-sticky.scrolled-past-header .menu-open svg path,
.header-1.header-sticky.scrolled-past-header:hover .menu-open svg path {
  fill: var(--pinpoint-heading);
}

.header-1.header-floating:hover:not(.scrolled-past-header) {
  --color-background: rgba(28, 37, 57, 0);
  --color-foreground: var(--pinpoint-light);
  --color-primary-hover: rgba(255, 255, 255, 0.6);
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.2);
  box-shadow: none;
}

.header-1.header-floating:hover:not(.scrolled-past-header) .header-grid {
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
}

/* ----------------------------------------------------------------------------------
    THIS CURRENTLY OVERWRITES THE HEADER DELETE EVERYTHING BELOW TO ABOVE TO PREVIOUS COMMENT
   ------------------------------------------------------------------------------------*/