/*
  Theme Name: Interscape Interlocking
  Author: Whetham Solutions
  Author URI: https://whethamsolutions.com
  Description: Wordpress theme for Interscape Interlocking. Use of this theme outside of this company's website is strictly prohibited.
  Template: ion
  Text Domain: childtheme
*/

:root {

    --font: "Plus Jakarta Sans", serif;
    --heading: var(--font);
    --spacing: clamp(66.666666666667px, 5.2083333333333vw, 100px);

    --mainFontSize: clamp(16px, 1.0416666666667vw, 20px);
    --smallFontSize: clamp(15px, 0.83333333333333vw, 16px);
    --h1FontSize: clamp(35px, 3.75vw, 72px);
    --h2FontSize: clamp(28px, 2.3958333333333vw, 46px);
    --h3FontSize: clamp(20px, 1.5625vw, 30px);
    --h4FontSize: clamp(14px, 1.09375vw, 21px);
    --lineHeight: 1.65;
    --headingLineHeight: 1.15;

    --containerAbove1600: 1450px;
    --containerAbove1368: clamp(872px, 68.125vw, 1308px);

    --red: #d62a2d;
    --text: #4D4D4D;
    --dark: #131313;
    --light: #FFFFFF;
    --primary: var(--red);
    --secondary: var(--dark);

    --buttonPaddingTop: clamp(9.3333333333333px, 0.72916666666667vw, 14px);
    --buttonPaddingBottom: var(--buttonPaddingTop);
    --buttonPaddingLeft: clamp(18.666666666667px, 1.4583333333333vw, 28px);
    --buttonPaddingRight: var(--buttonPaddingLeft);
    --buttonCasing: none;
    --buttonRadius: var(--radius);
    --buttonFontSize: var(--smallFontSize);
    --buttonWeight: 600;
    --buttonFont: var(--font);
    --buttonBackgroundPrimary: var(--primary);
    --buttonBackgroundSecondary: var(--secondary);
    --buttonBackgroundGhost: transparent;
    --buttonHoverBackgroundColour: var(--dark);
    --buttonHoverFontColour: #FFFFFF;
    --buttonDarkHoverBackgroundColour: var(--primary);
    --buttonDarkHoverFontColour: #FFFFFF;

    --formFieldBorder: #CCCCCC;
    --formFieldPaddingTop: clamp(9.3333333333333px, 0.72916666666667vw, 14px);
    --formFieldPaddingBottom: var(--formFieldPaddingTop);
    --formFieldPaddingLeft: clamp(18.666666666667px, 1.4583333333333vw, 28px);
    --formFieldPaddingRight: var(--formFieldPaddingLeft);

    --headerAdjustment: clamp(21.333333333333px, 1.6666666666667vw, 32px);

}

body {
    font-size: var(--mainFontSize);
    color: var(--text);
    line-height: var(--lineHeight);
    font-family: var(--font);
    font-weight: 400;
}

h1, h2, h3 {
    font-family: var(--font);
    line-height: var(--headingLineHeight);
    font-weight: 700;
    color: var(--dark);
}

.bg-light {
    background-color: #F9F9F9;
}

.pt-sm { padding-top: calc( var(--spacing) / 2 ) !important; }
.pb-sm { padding-bottom: calc( var(--spacing) / 2 ) !important; }

#header {
    padding: clamp(10px, 0.78125vw, 15px) 0;
}

#header .navigation li {
    margin-right: clamp(20px, 1.5625vw, 30px);
}

#header .navigation li:first-of-type {
    margin-right: 10px;
}

#header .navigation li#menu-item-258 {
    margin-right: auto;
}

#header .navigation li:last-of-type {
    margin: 0;
}

#header .navigation li:first-of-type a {
    max-width: clamp(166.66666666667px, 13.020833333333vw, 250px);
    display: flex;
}

#header .navigation li:first-of-type a:hover,
#header .navigation li:first-of-type a:focus {
    opacity: 0.75;
}

#header .navigation li a {
    font-size: var(--mainFontSize);
    color: var(--dark);
}

#header .navigation li a:hover,
#header .navigation li a:focus,
#header .navigation li.current-menu-item a {
    color: var(--primary);
}

#hero {
    height: calc(100vh - clamp(75.333333333333px, 5.8854166666667vw, 113px));
}

#hero.inner {
    height: auto;
}

.admin-bar #hero:not(#hero.inner) {
    height: calc( 100vh - ( clamp(75.333333333333px, 5.8854166666667vw, 113px) + var(--headerAdjustment) ) );
}

#hero * {
    color: #FFF;
}

#hero h1, #hero h1 + p {
    max-width: clamp(733.33333333333px, 57.291666666667vw, 1100px);
    margin: 0 auto;
}

#hero h1 {
    margin-bottom: clamp(5.3333333333333px, 0.41666666666667vw, 8px);
}

#hero.inner {
    padding: clamp(75px, 10.677083333333334vw, 205px) 0;
}

.content-text.ct-left { padding: 0 clamp(10px, 2.6041666666667vw, 50px) 0 0 !important; }
.content-text.ct-right { padding: 0 0 0 clamp(10px, 2.6041666666667vw, 50px) !important; }

.content-text h2 {
    margin: 0 0 clamp(13.333333333333px, 1.0416666666667vw, 20px);
}

.content-text.double-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    grid-gap: clamp(13.333333333333px, 1.0416666666667vw, 20px);
}

.content-text.double-list ul li {
    line-height: 1.3;
    margin: 0;
    background-image: url(i/icon-check.svg);
    background-size: clamp(16.666666666667px, 1.3020833333333vw, 25px);
    background-repeat: no-repeat;
    background-position: left 1px;
    padding-left: clamp(23.333333333333px, 1.8229166666667vw, 35px);
    width: calc(50% - clamp(10px, 0.78125vw, 15px));
}

#banner {
    background-color: var(--text);
}

#banner * {
    color: #FFF;
    fill: #FFF;
}

#banner h2 {
    margin: 0 0 clamp(20px, 1.5625vw, 30px);
}

#banner svg {
    width: clamp(20px, 1.5625vw, 30px) !important;
    height: auto !important;
    transition: all 0.3s !important;
}

#homeGallery > .e-con-inner {
    display: flex;
    flex-wrap: wrap;
    grid-gap: clamp(20px, 1.5625vw, 30px) !important;
    justify-content: center;
}

#homeGallery .hg-card {
    width: calc(25% - 25px);
}

#homeGallery .hg-card a {
    display: block;
    position: relative;
    height: clamp(200px, 15.625vw, 300px);
    border-radius: 20px;
    overflow: hidden;
}

#homeGallery .hg-card a:after {
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    color: #FFF;
    font-size: clamp(12px, 0.9375vw, 18px);
    line-height: 1.3;
    font-family: var(--font);
    padding: clamp(13.333333333333px, 1.0416666666667vw, 20px);
    transition: all 0.3s;
}

#homeGallery .hg-card:nth-child(1) a:after {
    content: 'Custom Work';
}

#homeGallery .hg-card:nth-child(2) a:after {
    content: 'Front of House and Back of House Custom Design';
}

#homeGallery .hg-card:nth-child(3) a:after {
    content: 'Modern Design for Front of House and Back Patio';
}

#homeGallery .hg-card:nth-child(4) a:after {
    content: 'Custom design - Front, Back and Side of House with Landscaping';
}

#homeGallery .hg-card a img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s;
}

#homeGallery .hg-card a:hover img,
#homeGallery .hg-card a:focus img {
    transform: scale(1.1);
    transition: all 0.3s;
}

#homeGallery .hg-card a:hover:after,
#homeGallery .hg-card a:hover:after {
    opacity: 1;
    transition: all 0.3s;
}

#dream h2 {
    color: #FFF;
    margin: 0 0 clamp(20px, 1.5625vw, 30px);
}

#footer {
    background-color: var(--text);
}

#footer:not(#footer .footer-socials ul li:nth-child(2)) * {
    color: #FFF;
}

#footer .footer-socials ul li:not(#footer .footer-socials ul li:nth-child(1)) svg *,
#footer .footer-contact svg * {
    fill: #FFF;
}

.contact-left svg {
    fill: var(--primary) !important;
}

.contact-left .contact-map iframe {
    height: clamp(133.33333333333px, 10.416666666667vw, 200px) !important;
}

#footer .footer-contact,
.contact-left .contact-map,
.contact-left .contact-contact{
    margin: 0 0 clamp(13.333333333333px, 1.0416666666667vw, 20px) !important;
}

#footer .footer-contact svg,
.contact-left .contact-contact svg {
    width: clamp(13.333333333333px, 1.0416666666667vw, 20px) !important;
    height: auto !important;
    max-height: clamp(13.333333333333px, 1.0416666666667vw, 20px) !important;
    position: relative !important;
    top: clamp(0.66666666666667px, 0.052083333333333vw, 1px) !important;
}

#footer .footer-socials svg {
    width: clamp(20px, 1.5625vw, 30px) !important;
    height: auto !important;
    transition: all 0.3s !important;
}

.contact-left .contact-socials svg {
    width: clamp(16.666666666666668px, 1.3020833333333333vw, 25px) !important;
    height: auto !important;
    transition: all 0.3s !important;
}

.contact-left .contact-socials li {
    margin: 0 !important;
}

#footer .footer-socials svg:hover,
#footer .footer-socials svg:focus,
#banner svg:hover, #banner svg:focus,
.contact-left .contact-socials svg:hover, .contact-left .contact-socials svg:focus {
    opacity: 0.75 !important;
    transition: all 0.3s !important;
}

#footer .elementor-icon-list-text,
.contact-left .elementor-icon-list-text {
    transition: all 0.3s !important;
}

.contact-left .elementor-icon-list-text {
    color: var(--text) !important;
}

#footer .elementor-icon-list-text:hover,
#footer .elementor-icon-list-text:focus,
.contact-left .elementor-icon-list-text:hover,
.contact-left .elementor-icon-list-text:focus {
    color: var(--primary) !important;
    transition: all 0.3s !important;
}

#galleryContainer {
    display: flex;
    flex-wrap: wrap;
    grid-gap: clamp(40px, 3.125vw, 60px) clamp(20px, 1.5625vw, 30px);
    justify-content: center;
}

#galleryContainer > .elementor-element {
    width: calc(50% - clamp(13.333333333333px, 1.0416666666667vw, 20px)) !important;
}

#galleryContainer .elementor-widget-image a {
    display: block;
    width: 100%;
    height: clamp(200px, 26.041666666666668vw, 500px);
    margin: 0 0 clamp(6.6666666666667px, 0.52083333333333vw, 10px);
    overflow: hidden;
}

#galleryContainer .elementor-widget-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s;
}

#galleryContainer .elementor-widget-image a:hover img,
#galleryContainer .elementor-widget-image a:focus img {
    transform: scale(1.1);
    transition: all 0.3s;
}

#galleryContainer h2 {
    font-size: clamp(18.666666666667px, 1.4583333333333vw, 28px);
    margin: 0 0 clamp(20px, 1.5625vw, 30px);
}

#galleryContainer .elementor-widget-button {
    margin-top: auto;
}

#testimonials .elementor-testimonial__text {
    font-style: normal;
    font-size: clamp(16px, 1.0416666666667vw, 20px);
}

#testimonials .elementor-testimonial__name {
    font-size: clamp(16px, 1.09375vw, 21px);
    position: relative;
    padding-bottom: clamp(20px, 1.5625vw, 30px);
    width: max-content;
}

#testimonials .elementor-testimonial__name:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: clamp(83.333333333333px, 6.5104166666667vw, 125px);
    height: clamp(16.666666666667px, 1.3020833333333vw, 25px);
    background-image: url(i/icon-stars.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
}

#btn-spacing {
    margin-top: clamp(26.666666666666668px, 2.0833333333333335vw, 40px);
}

#hero #btn-spacing {
    margin-top: clamp(13.333333333333px, 1.0416666666667vw, 20px);
}

.contact-left {
    padding-right: 30px !important;
    border-right: clamp(0.66666666666667px, 0.052083333333333vw, 1px) solid #CCC;
}

.content-img {
    border-radius: 20px !important;
    overflow: hidden !important;
}

.content-img img {
    max-height: 700px;
}

#footer h2 {
    margin: 0 0 20px;
    font-weight: 700;
}

#header .navigation li.badges a {
    max-width: clamp(40px, 3.125vw, 60px);
    height: clamp(40px, 3.125vw, 60px);
    display: flex;
    position: relative;
    top: 5px;
}

#header .navigation li.badges a:hover,
#header .navigation li.badges a:focus {
    opacity: 0.75;
}

#copyright {
    text-align: center;
}

#footer .footer-socials {
    margin: 0 0 40px;
}