.elementor-kit-3{--e-global-color-primary:#141414;--e-global-color-secondary:#FFFFFF;--e-global-color-text:#141414;--e-global-color-accent:#00657F;--e-global-color-a01d900:#F3F3F3;--e-global-color-e486af7:#FFFFFF;--e-global-typography-primary-font-family:"Silka Bold";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Silka";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Silka";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Silka Bold";--e-global-typography-accent-font-weight:700;}.elementor-kit-3 e-page-transition{background-color:#FFBC7D;}.elementor-kit-3 a{color:var( --e-global-color-accent );}.elementor-kit-3 a:hover{color:var( --e-global-color-primary );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1344px;}.e-con{--container-max-width:1344px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){margin-block-end:24px;}.elementor-element{--widgets-spacing:24px 24px;--widgets-spacing-row:24px;--widgets-spacing-column:24px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */.grecaptcha-badge { visibility: hidden; }

img {
    pointer-events: none;
}

body{
    overflow-x: hidden;
}

html{
    font-size: 62.5%; 
}




/*------------------------------------*
  #TYPOGRAPHY
*------------------------------------*/

.small-text p{
	font-size: 1.4rem !important;
    line-height: 2.4 !important;
}

p, 
td,
li,
ol,
.elementor-field-label{
    font-size: clamp(1.5rem, 2.5vw, 1.7rem) !important;
    line-height: 1.7 !important;
}
p {
    padding-top: 1rem;
}
li{
    font-size: 1.6rem !important;
}
.h6-h1 h1, h6 {
	font-size: 1.4rem !important;
	line-height: 2.4rem !important;
	text-transform: uppercase;
	letter-spacing: 1.6px;
}
h5 {
	font-size: 1.8rem !important;
	line-height: 2.8rem !important;
}
h4 {
	font-size: 2rem !important;
	line-height: 3.2rem !important;
}
h3 {
	font-size: 2.8rem !important;
	line-height: 3.8rem !important;
}
.h2-h1 h1, h2 {
    font-size: clamp(2.2rem, 2.8vw, 4.6rem) !important;
    line-height: 1.2 !important;
}
.large h2{
    font-size: clamp(2rem, 2.8vw, 5.8rem) !important;
	line-height: 1.3 !important;
}

h1{
    font-size: clamp(2.8rem, 5.4vw, 5.4rem) !important;
    line-height: 1.2 !important;
}
.hero h1,
.hero h2 {
    font-size: 9vw !important;
	line-height: 11vw !important;
}
  
@media only screen and (min-width: 768px) {
    .hero h1,
    .hero h2{
        font-size: 7vw !important;
	    line-height: 9vw !important;
    }
}

@media only screen and (min-width: 1024px) {
 
    h5 {
    	font-size: 2.2rem !important;
    	line-height: 3.4rem !important;
    }
    h4 {
    	font-size: 2.8rem !important;
    	line-height: 3.8rem !important;
    }
    h3 {
    	font-size: 3.2rem !important;
    	line-height: 4.2rem !important;
    }
    .hero h1,
    .hero h2{
	    font-size: 7.7rem !important;
    	line-height: 8.2rem !important;
    }
    .banner-medium .title h1,
    .banner-medium .title h2{
	    font-size: 4rem !important;
    	line-height: 5rem !important;
    }
}

.post-content ul{
    margin-bottom: 24px;
    margin-top: 24px;
}

.post-content ul li{
    margin-bottom: 16px;
}


.dark .text a{
    color: var( --e-global-color-accent ) !important;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.text a:hover{
    color: #000 !important;
}
.dark .text a:hover{
    color: #fff !important;
}



/*------------------------------------*
  #CATEGORY
*------------------------------------*/

.category .elementor-post-info__terms-list-item,
.text-image .category h6,
.banner-large .category h6{
	font-size: 1.4rem !important;
	line-height: 2.4rem !important;
	font-weight: 400 !important;
	/*text-transform: none;
	letter-spacing: normal;*/
    padding: 8px 16px;
    color: #000;
}

.banner-large .category,
.banner-project .category{
    background: rgba(255, 255, 255, 0.30);
	border-radius: 4px;
}

.post-thumb .category .elementor-post-info__terms-list-item{
    padding: 0;
    color: #fff;
    font-size: 1.2rem !important;
}




/*------------------------------------*
  #PADDING - Removes default padding from columns
*------------------------------------*/

.elementor-element-populated{
    padding: 0 !important;
    margin: 0 !important;
}




/*------------------------------------*
  #SPACING
*------------------------------------*/

:root {
    --padding-sm: 15px;
    --padding-md: 15px;
    --padding-lg: 30px;
    
    --margin-sm: 15px;       
    --margin-md: 15px;   
}

@media only screen and (min-width: 768px) {
    :root {
        --padding-sm: 30px;
        --padding-md: 30px;
        --padding-lg: 60px;

        --margin-sm: 30px;   
        --margin-md: 30px;  
    }
}

@media only screen and (min-width: 1024px) {
    :root {
        --padding-md: 4.1666666667vw;
        --padding-lg: 8.3333333334vw;
        
        --margin-md: 4.1666666667vw;
    }
}

/**
 * small padding
 */
.padding-sm {
    padding: var(--padding-sm);
}
.padding-lr-sm {
    padding-left: var(--padding-sm);
    padding-right: var(--padding-sm);
}
.padding-l-sm {
    padding-left: var(--padding-sm);
}
.padding-r-sm {
    padding-right: var(--padding-sm);
}
.padding-tb-sm {
    padding-top: var(--padding-sm);
    padding-bottom: var(--padding-sm);
}
.padding-t-sm {
    padding-top: var(--padding-sm);
}
.padding-b-sm {
    padding-bottom: var(--padding-sm);
}

/**
 * medium padding
 */
.padding-md {
    padding: var(--padding-md);
}
.padding-lr-md {
    padding-left: var(--padding-md);
    padding-right: var(--padding-md);
}
.padding-l-md {
    padding-left: var(--padding-md);
}
.padding-r-md {
    padding-right: var(--padding-md);
}
.padding-tb-md {
    padding-top: var(--padding-md);
    padding-bottom: var(--padding-md);
}
.padding-t-md {
    padding-top: var(--padding-md);
}
.padding-b-md {
    padding-bottom: var(--padding-md);
}

/**
 * large padding
 */
.padding-lg {
    padding: var(--padding-lg);
}
.padding-lr-lg {
    padding-left: var(--padding-lg);
    padding-right: var(--padding-lg);
}
.padding-l-lg {
    padding-left: var(--padding-lg);
}
.padding-r-lg {
    padding-right: var(--padding-lg);
}
.padding-tb-lg {
    padding-top: var(--padding-lg);
    padding-bottom: var(--padding-lg);
}
.padding-t-lg {
    padding-top: var(--padding-lg);
}
.padding-b-lg {
    padding-bottom: var(--padding-lg);
}

/**
 * small margin
 */
.margin-sm {
    margin: var(--margin-sm);
}


/**
 * medium margin
 */
.margin-md {
    margin: var(--margin-md);
}




/*------------------------------------*
  #BUTTONS
*------------------------------------*/

.btn-secondary .elementor-button,
.btn-primary .elementor-button {
    background: var( --e-global-color-accent ) !important;
    font-size: clamp(1.5rem, 2.5vw, 1.7rem) !important;
    line-height: 1.7 !important;
    color: #fff !important;
    padding: 14px 32px;
    margin-top: 24px;
    border-radius: 999px;
    transition: all .6s cubic-bezier(.4,0,.2,1);
}


.btn-text p{
    background: var( --e-global-color-accent ) !important;
    color: #fff !important;
    padding: 8px 32px;
    border-radius: 999px;
    transition: all .6s cubic-bezier(.4,0,.2,1);
}

.btn-primary .elementor-button:hover{
    background: #fff !important;
    color: var( --e-global-color-primary ) !important;
}

.btn-text:hover p{
    background: #000 !important;
}

.btn-secondary .elementor-button:hover {
    background: #141414 !important;
}




/*------------------------------------*
  #BACKGROUND-IMAGE
*------------------------------------*/

    .img-col{
        min-height: auto;
    }
    
    /**
     * Sizing the image (to maintain it's ratio)
     */
/*    .background-image:after {
      content: "";
      display: block;
      padding-bottom: 100%;
    }*/
    .background-image,
    .background-image img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
    .background-image img {
        object-fit: cover;
    }




/*------------------------------------*
  #DARK-SECTION
*------------------------------------*/

.dark,
.dark .text-image{
    background: var( --e-global-color-primary ) !important;
}

.dark .elementor-button:hover {
    background: white !important;
    color: var( --e-global-color-primary ) !important;
}


.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark p {
    color: #fff !important;
}

.dark-50-b::before,
.dark-50-t::before,
.dark-40-t::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 50%;
    left: 0;
    background: var( --e-global-color-primary );
}

.dark-40-t::before{
    bottom: 40%;
}

.dark-50-b::before{
    top: 50%;
}

.dark-50-t::before{
    bottom: 50%;
}




/*------------------------------------*
  #BANNER-LARGE
*------------------------------------*/

.banner-large{
    min-height: calc(100vh - 112px);
    overflow: hidden;
    padding: var(--padding-md);
}

.banner-large::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.40) 100%);
    z-index: 1 !important;
    pointer-events: none;
}

.banner-large .title,
.banner-large .subtitle,
.banner-large .text,
.banner-large .category,
.banner-large .project-details,
.banner-large .excerpt,
.banner-large .btn-primary{
    max-width: 100% !important;
    z-index: 2 !important;
}

/**
 * Sizing the image (to maintain it's ratio)
 */
.banner-large .banner-image:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}
.banner-large .banner-image,
.banner-large .banner-image img{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.banner-large .banner-image img{
    object-fit: cover;
}

@media only screen and (min-width: 768px) {
    .banner-large .title,
    .banner-large .text,
    .banner-large .subtitle,
    .banner-large .category,
    .banner-large .excerpt,
    .banner-large .btn-primary{
        max-width: 70% !important;
    }
}




/*------------------------------------*
  #BANNER-INSIGHTS
*------------------------------------*/

.banner-posts .category{
    background: rgba(0, 0, 0, 0.10);
	border-radius: 4px;
}

.banner-project{
    min-height: calc(80vh - 96px);
}

.banner-large::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.70) 100%);
    z-index: 1 !important;
    pointer-events: none;
}




/*------------------------------------*
  #TEXT-BANNER
*------------------------------------*/

@media only screen and (min-width: 768px) {


    .text-banner .text-container{
        padding: var(--padding-md);
            }
    
    .text-banner .image-container{
        min-height: calc(60vh + 96px);
        overflow: hidden !important;
    }
    .text-banner .image-container::before{
        content: "";
        position: absolute;
        width: 100%;
        height: calc(100% - 192px);
        top: 0;
        left: 0;
        background: var( --e-global-color-primary );
    }
    
    .text-banner .image-container img{
        padding: 0 24px 0 24px !important;
        width: 100%;
    }
}




/*------------------------------------*
  #CTA-SECTION
*------------------------------------*/

.cta-section {
    overflow: hidden;
}

.cta-section .border-col{
    margin: 24px 24px 0 24px;
}

.cta-section .text-col {
  padding: var(--padding-lg);
}

/*
** Make the image column stretch to full section height
*/
.cta-section .img-col {
    aspect-ratio: 4/3;
    align-self: stretch;
    padding: 0 !important;
}

/*
** Make the swiper wrapper and container fill the column height
*/
.cta-section .img-col .elementor-widget-image-carousel,
.cta-section .img-col .elementor-widget-container,
.cta-section .img-col .elementor-image-carousel-wrapper,
.cta-section .img-col .swiper,
.cta-section .img-col .swiper-wrapper,
.cta-section .img-col .swiper-slide {
  height: 100%;
}

/*
** Give the slide inner a positioning context
*/
.cta-section .img-col .swiper-slide-inner {
  position: relative;
  height: 100%;
  display: block;
}

/*
** Make images cover the slide area
*/
.cta-section .img-col .swiper-slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.cta-section.border-col img {
    padding: 24px;
}

@media only screen and (min-width: 768px) {
    .cta-section .border-col{
        margin: 24px;
    }
    .cta-section .img-col {
        height: auto;
    }
}

@media only screen and (min-width: 1024px) {
    .cta-section {
        max-height: 575px;
    }
    .cta-section .text-col,
    .cta-section .img-col{
        width: 50%;
    }
}




/*------------------------------------*
  #PAGE-LINK-SECTION
*------------------------------------*/

.page-link-section{
    padding: var(--padding-md);
}
.page-link-section .collection-thumb{
    height: calc(100vw - 48px) !important;
    border-radius: 24px;
}

@media only screen and (min-width: 768px) {
    .page-link-section .collection-thumb{
        height: auto !important;
        aspect-ratio: 1/1;
    }
}




/*------------------------------------*
  #TEXT-AND-IMAGE-SECTION
*------------------------------------*/

.text-image,
.text-image-full{
    overflow: hidden;
}

.text-image-full .text-col,
.text-image .text-col{
    padding: var(--padding-lg) var(--padding-md);
}

.text-image-full .img-col,
.text-image .img-col{
    min-height: 50vh !important;
}

@media only screen and (min-width: 1024px) {
    .text-image .text-col,
    .text-image .img-col,
    .text-image-full .img-col,
    .text-image-full .text-col{
        width: 50%;
    }
    .text-image .img-col{
        min-height: 100% !important;
    }
    .text-image-full .img-col{
        align-self: stretch;
    }
    .text-image-full .img-col .elementor-widget-image {
    height: 100%;
    }
    .text-image-full img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    .text-image .border-col,
    .text-image-full .border-col{
        margin: 24px !important;
    }
}




/*------------------------------------*
  #TEXT-IMAGE-CONTAINER-SECTION
*------------------------------------*/
.text-image-container .text-image{
    align-items: stretch;
}

/*.text-image-container .text-col{
    padding-right: 8.3333333334vw !important;    
}*/

.text-image-container .img-col{
    border: var(--padding-sm) solid #fff;
    border-bottom: 0;
}

@media only screen and (min-width: 1024px) {
    .text-image-container .img-col{
        border: var(--padding-sm) solid #fff;
    }
    .text-image-container .text-image .img-col{
        min-height: 0 !important;
        height: auto !important;
        position: relative;
        flex: 1;
    }
}




/*------------------------------------*
  #FEATURED-PROJECT-SECTION
*------------------------------------*/

.featured-project.border-col img {
    padding: 24px;
}




/*------------------------------------*
  #TEXT-SECTION
*------------------------------------*/

.text-section {
    padding: var(--padding-md);
}

@media only screen and (min-width: 768px) {
    .text-section .text {
        max-width: 70% !important;
    }
}




/*------------------------------------*
  #TEXT-COLUMNS-SECTION
*------------------------------------*/

/*
** Setting the space between rows
*/
.text-columns {
    padding: 0 var(--padding-md) var(--padding-md);
    gap: 4.1666666667%;
    row-gap: 48px;
}

/*
** Setting the title width
*/
.text-columns .title{
    width: 100% !important;
}

@media only screen and (min-width: 1024px) {
    
    /*
    ** Sizing the text columns
    */
    .text-columns .text-col{
        flex: 1;
    }

}




/*------------------------------------*
  #TESTIMONIAL-SECTION
*------------------------------------*/
.testimonial .dark {
    padding: var(--padding-lg);
}
.testimonial .testimonial-text,
.testimonial .testimonial-name{
    max-width: 888px !important;
}

.testimonial.border-col{
    padding: 24px;
}




/*------------------------------------*
  #IMAGE-SECTION
*------------------------------------*/

.image-section{
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.image-section.border-col{
    width: calc(100vw - 24px);
}

@media only screen and (min-width: 1024px) {
    .image-section{
        height: 600px; 
        overflow: hidden;
    }
    .image-section.border-col{
        width: calc(100vw - 48px);
    }

}



/*------------------------------------*
  #IMAGE-COLUMNS
*------------------------------------*/

.image-columns .img-container,
.image-columns .img-container img{
    height: calc(100vw - 96px) !important;
    width: calc(100vw - 96px) !important;
    overflow: hidden;
}

@media only screen and (max-width: 1023px) {
    .scroll-container {
        display: flex;
        height: auto !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .scroll-container::-webkit-scrollbar {
        display: none; /* Hide the scrollbar */
    }
    .image-columns .inner-container {
        width: calc(100vw - 72px);
        flex-shrink: 0;
        scroll-snap-align: start;
        box-sizing: border-box;
        padding-left: 24px;
    }
    .image-columns .inner-container img {
        width: 100%;
        display: block;
    }
    .image-columns .inner-container h2 {
        text-align: center;
    }
}

@media only screen and (max-width: 767px) {
    .scroll-container {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .scroll-container::-webkit-scrollbar {
        display: none; /* Hide the scrollbar */
    }

    .image-columns .inner-container img {
        width: 100%;
        height: auto;
        display: block;
    }
    .image-columns .inner-container h2 {
        text-align: center;
    }

}

@media only screen and (min-width: 768px) {
    .image-columns .inner-container {
        width: calc(50vw - 48px) !important;
 
    }
    .image-columns .img-container,
    .image-columns .img-container img{
        height: calc(50vw - 48px) !important;
        width: calc(50vw - 48px) !important;
    }
}

@media only screen and (min-width: 1024px) {
    .image-columns .inner-container {
        width: calc(25vw - 20px) !important;
 
    }
    .image-columns .img-container,
    .image-columns .img-container img{
        height: calc(20vw - 48px) !important;
        width: calc(20vw - 48px) !important;
    }
}




/*------------------------------------*
  #CONTACT-FORM-SECTION
*------------------------------------*/

.contact-us {
    padding: var(--padding-md);
}

/*
** Setting the columns widths
*/
.contact-us .contact-col {
    width: 100% !important;
}
.contact-us .form-col{
    width: 100% !important;
}

/*
** Styling the icons (could move this somewhere else)
*/

.contact-us .contact-col .elementor-icon-list-icon{
    background: var( --e-global-color-accent );
    border-radius: 100%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.contact-us .contact-col .elementor-icon-list-icon svg{
    margin: 0 !important;
}
.contact-us .contact-col .elementor-icon-list-text{
    padding-left: 12px !important;
}

/*
** Space above the contact form
*/
.contact-us .form-col {
    margin-top: 48px;
}

/*
** Form field shape
*/
.contact-us .form-col .elementor-field,
.contact-us .form-col .elementor-button {
    border-radius: 999px !important;
}

/*
** Space around the form fields
*/
.contact-us .form-col .elementor-field-group{
    padding: 0 8px !important;
    margin: 8px 0 !important;
}

@media only screen and (min-width: 768px) {
    /*
    ** Contact details on one line
    */
    .contact-us .contact-col .elementor-icon-list-items{
        display: flex;
        flex-wrap: nowrap !important;
        gap: 24px;
    }
    
    /*
    ** Aligning the contact details
    */
    .contact-us .contact-col  .elementor-icon-list-item{
        margin: 0 !important;
        padding: 0 !important;
    }
}

@media only screen and (min-width: 1024px) {
    /*
    ** Setting the columns widths
    */
    .contact-us .contact-col {
        width: 41.6666666667% !important;
    }
    .contact-us .form-col{
        width: 50% !important;
        margin-top: 0;
    }

    /*
    ** Stacking the contact details
    */
    .contact-us .contact-col .elementor-icon-list-items{
        display: flex;
        flex-wrap: wrap !important;
        gap: 16px;
    }
    .contact-us .contact-col  .elementor-icon-list-item{
        width: 100%;
    }
}




/*------------------------------------*
  #INSIGHTS-SINGLE-POST-TEMPLATE
*------------------------------------*/

.post-content {
    max-width: 888px !important;
}
.post-content img{
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
}




/*------------------------------------*
  #COLLECTIONS-LIGHTBOX
*------------------------------------*/

.dialog-type-lightbox{
    background: rgba(0,0,0,.9) !important;
}


/*.elementor-slideshow__footer,
.e-eicon-share-arrow{
    display: none !important;
}*/




/*------------------------------------*
  #RELATED-CONTENT
*------------------------------------*/

.related-content{
    padding: var(--padding-md);
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Silka';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://spacialartworks.co.uk/wp-content/uploads/sites/15/2024/06/silka-regular-webfont.eot');
	src: url('https://spacialartworks.co.uk/wp-content/uploads/sites/15/2024/06/silka-regular-webfont.eot?#iefix') format('embedded-opentype'),
		url('https://spacialartworks.co.uk/wp-content/uploads/sites/15/2024/06/silka-regular-webfont.woff2') format('woff2'),
		url('https://spacialartworks.co.uk/wp-content/uploads/sites/15/2024/06/silka-regular-webfont.woff') format('woff'),
		url('https://spacialartworks.co.uk/wp-content/uploads/sites/15/2024/06/silka-regular-webfont.ttf') format('truetype');
}
/* End Custom Fonts CSS */