.elementor-kit-4{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-kit-4 h1{font-family:"Bellefair", Sans-serif;}.elementor-kit-4 h2{font-family:"Red Hat Display", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}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 */:root {
    --primary-font: "Red Hat Display", sans-serif;
    --heading-font: "Bellefair", serif;
    --white: #FFF;
    --black: #000;
}

.secondary h2 {
    font-family: var(--primary-font);
     font-size: 23px !important;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 2.53px;
    text-transform: uppercase;
   
    
}

h1 {
    color: var(--white);
}

.hero-cta {
    color: var(--white);
    text-align: center;
    font-family: var(--primary-font);
    font-size: 23px !important;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 2.53px;
    text-transform: uppercase;
   
}

.hero-cta svg {
    width: 80%;
}

.hero-banner h1 {
    color: var(--white);
    text-align: center;
    font-family: var(--heading-font);
    font-size: 75px;
    font-style: normal;
    font-weight: 400;
    line-height: 92%; /* 78px */
    letter-spacing: 6.8px;
    text-transform: uppercase;
}

.hero-banner h2 {
    color: var(--white);
    text-align: center;
    font-family: var(--primary-font);
    font-size: 31px;
    font-style: normal;
    font-weight: 400;
    line-height: 101%; /* 31px */
    letter-spacing: 7.5px;
    text-transform: uppercase;
}

.intro-section p {
    color: var(--black);
    font-family: var(--primary-font);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 28.8px */
}

.intro-section h3 {
    color: var(--black);
    font-family: var(--heading-font);
    font-size: 45px;
    font-style: normal;
    font-weight: 400;
    line-height: 101%;
    text-transform: uppercase;
}

.light-link {
    color: var(--white);
    font-family: var(--primary-font);
    display: block;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    border: none;
    padding: 0;
    background-image: url("https://www.buildcustomhomes.ca/wp-content/uploads/2025/02/angle-right-sm-dark.svg");
    background-repeat: no-repeat;
    background-position: right;
}

.light-link:hover {
    color: #ccc; /* Change this to the desired hover color */
}

.dark-link {
    color: var(--black);
    font-family: var(--primary-font);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    border: none;
    padding: 0;
   background-image: url("https://www.buildcustomhomes.ca/wp-content/uploads/2025/02/arrow-right.svg");
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 20px;
}

.what-we-build h1 {
    color: var(--white);
    font-family: var(--heading-font);
    font-size: 45px;
    font-style: normal;
    font-weight: 400;
    line-height: 101%;
    text-transform: uppercase;
}

.what-we-build p {
    color: var(--white);
    padding-top:15px;
    font-family: var(--primary-font);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 28.8px */
}

.build-box-area h4 {
    color: var(--white);
    font-family: var(--heading-font);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 101%;
    text-transform: uppercase;
}

.featured-project h1 {
    color: var(--black);
    font-family: var(--heading-font);
    font-size: 45px;
    font-style: normal;
    font-weight: 400;
    line-height: 101%;
    text-transform: uppercase;
   
}

.featured-project p {
    color: var(--black);
    font-family: var(--primary-font);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 28.8px */
}


.contact-section h3 {
    
    color: #000;

font-family: Bellefair;
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: 101.127%; /* 40.451px */
text-transform: uppercase;
    
    
}



.why-we-build-intro h4 {
     color: var(--black);
    padding-top:15px;
    font-family: var(--primary-font);
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 28.8px */
}

.why-we-build-intro h2 {
   color: #000;

font-family: Bellefair;
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: 101.127%; /* 40.451px */
text-transform: uppercase;
      
}


.why-we-build-intro p {
    color: var(--black);
    font-family: var(--primary-font);
    font-size: 18px;
    color: #000;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 28.8px */   
}

.why-we-build-intro ul {
    color: var(--black);
    font-family: var(--primary-font);
    font-size: 18px;
    list-style: none;
    color: #000;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; 
}

.why-we-build-intro li {
    color: var(--black);
    font-family: var(--primary-font);
    font-size: 18px;
    color: #000;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    margin-top: 15px;
    background-image: url("https://www.buildcustomhomes.ca/wp-content/uploads/2025/02/arrow-right.svg");
    background-position:  5px 8px;
    padding-left: 25px;
  
    background-repeat: no-repeat;
    
}

.toogle-active{
    background: #000;
    padding: 20px 80px 20px 80px;
    width: 100%;
    color: #fff!important;
     font-family: var(--primary-font);
}

.toogle-active a:hover{
    background: #fff;
    padding: 20px 80px 20px 80px;
    width: 100%;
    color: #fff!important;
     font-family: var(--primary-font);
}


.toogle {
 background: #ffffff;
    padding: 20px 80px 20px 80px;
    width: 100%;
    color: #000000!important;
     font-family: var(--primary-font);
}


.toogle a:hover{
 background: #000;
    padding: 20px 80px 20px 80px;
    width: 100%;
    color: #000000!important;
     font-family: var(--primary-font);
}


.approach-icons svg path {
 

}


.why-choose h2 {
   color: var(--white);
    font-family: var(--heading-font);
    font-size: 45px;
    font-style: normal;
    font-weight: 400;
    line-height: 101%;
    text-transform: uppercase; 
}


.why-choose p {
      color: var(--white);
    font-family: var(--primary-font);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 28.8px */   
}
.why-choose-block span {
    color: #fff!important;
    
}

.why-choose-block svg {
    color: #fff!important;
    fill: #ffffff;
}

.why-choose-block p {
    color: #fff!important;
}



@media (max-width:767px) {
    
    .contact-section h3 {
    
  
font-size: 35px;
    
}

    
    
}/* End custom CSS */