/*Basict styling to make viewing components easier*/
html {
    background-color: rgba(var(--clr-highlight));
    background-color: rgba(var(--clr-accent));
    background-color: rgba(var(--clr-secondary));
    background-color: rgba(var(--clr-primary));
    background-color: rgba(0, 0, 0);
    background-color: rgba(255, 255, 255);
}

.component-label {
    margin: 2rem;
}

/*zen hero demo styling*/
.tc-zen-navbar {
    position: fixed !important;
}
.tc-zen-navbar img {
    position: relative;
    top: 1rem;
    /* scale: 1.4; */
    transform-origin: top left; 
}
.tc-zen-hero-img-wrapper{
    transform: scaleX(-1);
}
.tc-zen-hero-content-container > *:not(:last-child) {
    margin-bottom: 2rem;
}
.tc-zen-hero-content-container h1{
    font-size: 4.5rem;
    color: white;
}
.tc-zen-hero-content-container p {
    color: white;
    font-size: 1.8rem;
}
.tc-zen-hero .button,
#brck-about-us .button {
    font-size: 1.8rem;
    color: white;
    background-color: transparent;
    border-radius: 0;
    border: 3px solid white;
    width: max-content;

}
.tc-zen-hero .button:hover,
#brck-about-us .button:hover {
    font-size: 1.8rem;
    border-radius: 0;

    background-color: white;
    color: black;
}

/*BRCK demo styling*/
#brck-nav-2 {
    --tc-girder-navbar-background-color: 255, 100, 60;
    --tc-girder-navbar-border-color: 255, 255, 255;
    --tc-girder-navbar-text-color: var(--clr-text-light);
}

#brck-hero h1{
    font-size: clamp(4.5rem, 20vw, 12rem);
}

#BRCK-logo-carousel {
    margin: 4rem 0;
}
#BRCK-logo-carousel h2 {
    font-size: 2rem;
}

#brck-about-us h2,
#brck-about-us  p{
    color: white !important;
}
#brck-about-us h2 {
    font-size: 2rem;
}
#brck-about-us  p{
    letter-spacing: 0.02em;
    font-size: 1.1rem
}

/*GoldElec demo styling*/
.elec-btn {
    border: 2px solid rgb(22,3,112);
    border-radius: 0;
    padding: 0.6rem;
    min-width: 150px;
    background-color: rgb(22,3,112);
    font-size: 1.6rem;
    color: white;
}
.elec-btn:hover {
    border: 2px solid rgb(22,3,112);
    border-radius: 0;
    padding: 0.6rem;
    min-width: 150px;
    background-color: white;
    font-size: 1.6rem;
    color: rgb(22,3,112);
}

.elec-btn-alt,
#elec-banner-1 .button,
#elec-banner-2 .button,
#goldelec-form-1 button {
    border: 2px solid rgb(22,3,112);
    border-radius: 0;
    padding: 0.6rem;
    min-width: 150px;
    /*background-color: rgb(255,255,255);*/
    background-color: rgb(248, 212, 26);
    font-size: 1.6rem;
    color: rgb(22,3,112);
    text-align: center;
}
.elec-btn:hover,
.elec-btn-alt:hover,
#elec-banner-1 .button:hover,
#elec-banner-2 .button:hover,
#goldelec-form-1 button:hover {
    border: 2px solid rgb(22,3,112);
    border-radius: 0;
    padding: 0.6rem;
    min-width: 150px;
    /*background-color: rgb(22,3,112);*/
    background-color: white;
    font-size: 1.6rem;
    color: rgb(22,3,112);
    box-shadow: 3px 3px 6px 4px #0000001b;
}

#goldelec-navbar {
    background-color: rgb(22,3,112);
}
#goldelec-navbar .tc-simple-nav-bar-social-bar {
    background-color: rgb(248, 212, 26);
    align-items: center;
}
#goldelec-navbar .tc-simple-nav-bar-social-bar a:hover,
#goldelec-navbar .tc-simple-nav-bar-social-bar a:hover svg {
    color: rgb(22,3,112) !important;
    fill: rgb(22,3,112);
}

#goldelec-navbar > .tc-simple-navbar-logo-wrapper img {
    width: 100%;
    height: auto;
}

#goldelec-navbar > .tc-simple-navbar-logo-wrapper {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#gold-elec-hero .tc-split-hero-container-inner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#gold-elec-hero *:not(.elec-btn) {
    color: rgb(22,3,112);
}

.gold-elec-hero-card {
    padding: 1rem;
    max-width: 500px;
    background: rgb(255,255,255,0.7);
    backdrop-filter: blur(3px);
}
.gold-elec-hero-card h1 {
    font-size: 4rem;
    margin-bottom: 1.2rem;
}
.gold-elec-hero-card p {
    margin-bottom: 1.2rem;
    font-size: 1.6rem;
}

#elec-about-content-block-1 p,
#elec-about-content-block-1 h2{
    max-width: 700px;
    color: rgb(22,3,112);
}
#elec-about-content-block-1 h2 {
    font-size: 3rem;
}

#elec-banner-1 .tc-simple-banner-inner>span,
#elec-banner-2 .tc-simple-banner-inner>span {
    font-size: 3rem;
    flex-basis: 100%;
}

#goldelec-services-grid {
    margin-top: 3rem;
    margin-bottom: 3rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

#goldelec-services-grid * {
    color: rgb(22,3,112);
}

#goldelec-services-grid h2 {
    text-align: center;
    font-size: 3rem;
}
#goldelec-services-grid h3 {
    text-align: center;
    font-size: 1.8rem;
}

#goldelec-services-grid p {
    max-width: 700px;
}

#goldelec-services-grid a {
    align-self: center;
}

#goldelec-services-grid .tc-card-grid-card > article {
    display: flex;
    flex-direction: column;
}

#goldelec-services-grid > .tc-card-grid-main-container {
    grid-template-columns: repeat(3, 1fr);
}
@media only screen and (max-width: 960px) {
    #goldelec-services-grid > .tc-card-grid-main-container {
        grid-template-columns: repeat(1, 1fr);
    }
}

#goldelec-services-grid .tc-card-grid-card {
    border: 2px solid rgb(22,3,112);
    border-radius: 0;
}

#goldelec-services-grid .tc-card-grid-card li {
    margin-bottom: 0.3rem;
}

#goldelec-pricing-grid * {
    color: rgb(22,3,112);
}

#goldelec-pricing-grid h2 {
    text-align: center;
    font-size: 3rem;
}
#goldelec-pricing-grid h3 {
    text-align: center;
    font-size: 1.8rem;
}


#goldelec-pricing-grid {
    margin-top: 3rem;
    margin-bottom: 3rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

#goldelec-pricing-grid hr {
    margin: 1rem;
    border: 1px solid rgb(22,3,112);
    background-color: rgb(22,3,112);
}

#goldelec-pricing-grid > .tc-card-grid-main-container {
    grid-template-columns: repeat(3, 1fr);
}
@media only screen and (max-width: 960px) {
    #goldelec-pricing-grid > .tc-card-grid-main-container {
        grid-template-columns: repeat(1, 1fr);
    }
}

#goldelec-pricing-grid .tc-card-grid-card {
    border: 2px solid rgb(22,3,112);
    border-radius: 0;
}

.gePricing {
    text-align: center;
    font-size: 3rem;
}

#goldelec-form-1 * {
    color: rgb(22,3,112) !important;
}

#goldelec-form-1 h2 {
    font-size: 3rem;
}
/*
#goldelec-form-1 button {
    border: 2px solid rgb(22,3,112);
    border-radius: 0;
    padding: 0.6rem;
    min-width: 150px;
    background-color: rgb(248, 212, 26);
    font-size: 1.6rem;
    color: rgb(22,3,112);
    text-align: center;
}*/

#goldelec-pagefooter {
    background-color: rgb(22,3,112);
}