/* Burly House Website Style Sheet */
/* Authored by, Marc Oldham */


/* Home Page Styles */

/* Hero Area */

.home .hero-section {
    background-image: url(/images/tri-bg.jpg);
    background-color: var(--color-deep-aqua);
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-position-x: left;
    margin-top: 113px;
    padding: 114px 24px 96px;

    border-bottom: 12px solid var(--color-purple);
}
.home .hero-section .content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: end;
    max-width: 1140px;    
}
.home .hero-section .hero-text {
    max-width: 960px;
    width: -webkit-fill-available;
}
.home .hero-section .hero-text h1 {
    color: #FFFFFF;
    font-size: 3.125em;
    padding-bottom: 0.625rem;
}
.home .hero-section .hero-text .hero-subtitle {
    color: var(--color-light-aqua);
    font-size: 1.675em;
    font-weight: 600;
    padding-bottom: 0.625rem;
}
.home .hero-section .hero-buttons {
    display: flex;
    margin-top: 1.325rem;
}
.home .hero-section .hero-buttons .button-outline-ko {
    background-color: var(--color-body);
    margin-bottom: 0.625rem;
    margin-right: 0.625rem;
    transition: all 0.3s ease;
}
.home .hero-section .hero-buttons .button-outline-ko::after {
    color: #FFFFFF;
    content: "\2192"; 
    font-size: 18px;
    margin-left: 10px; 
    transition: all 0.3s ease;
}
.home .hero-section .hero-buttons .button-outline-ko:hover {
    background-color: var(--color-purple);
}
.home .hero-section .hero-buttons .button-outline-ko:hover::after {
    margin-left: 14px; 
}

/* About Us Intro Section */

.home .about-us-intro-section {
    padding: 56px 24px 24px;
    display: flex;
    flex-direction: column;
}

.home .about-us-intro-section .content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: end;
    max-width: 1140px;
    padding: 0 32px;
}
.home .about-us-intro-section .text-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    
}
.home .about-us-intro-section .text-column h2 {
    /* font-size: 1.925em; */
}
.home .about-us-intro-section .button-row {
    flex: 1;
    display: flex;
    flex-direction: row;
}
.home .about-us-intro-section img.intro-icon {
    max-width: 64px;
    margin-bottom: 24px;
}
.home .about-us-intro-section p {
    display: flex;
    justify-content: flex-start;
    line-height: 1.6;
}


/* Two-Column Cards Section */

.two-cards-section {
    padding: 16px 32px 32px;
}
.two-cards-section h2 {
    padding-bottom: 0.5rem;
    text-align: center;
}
.two-cards-section .content-wrapper {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    padding: 0rem 1rem;
}
.two-cards-section .text-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.two-cards-section .button-row {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.two-cards-section .cards-wrapper {
    display: flex;
    justify-content: center;
    gap: 1.325rem;
    max-width: 1140px;
    margin: 0 auto;
    padding: 32px 24px 32px;
    background-color: #fff;
}
.two-cards-section .cards-wrapper .card-column {
    background-color: var(--color-light-grey);
    border-radius: 8px;
    width: 100%;
}
.two-cards-section .cards-wrapper .card-column .card-wrap {
    display: block;
    margin: 0 auto;
    padding: 28px 32px;
}
.two-cards-section .cards-wrapper .card-column h3 {
    border-bottom: 2px solid var(--color-grey);
    color: var(--color-body);
    margin-bottom: 0.825rem;
}

.two-cards-section .cards-wrapper .card-column p {
    padding-bottom: 1.325em;
}


/* Burly Built Section */

.burly-built-section {
    margin-bottom: 96px;
    padding: 16px 32px;
}

.burly-built-section .content-wrapper {
    align-items: center;
    justify-content: center;
    display: flex;
    padding: 0 0px;
}

.burly-built-section .burly-built-wrapper {
    background: var(--color-body);
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 1140px;
    margin: 0 auto;
    border-radius: 8px;
    padding: 16px 32px 16px 8px;
}

.burly-built-section .burly-built-wrapper .burly-built-icon-wrapper .burly-built-icon {
    filter: brightness(0) saturate(100%) invert(89%) sepia(21%) saturate(5626%) hue-rotate(176deg) brightness(119%) contrast(111%);
}

.burly-built-section .burly-built-wrapper .burly-built-icon-wrapper .burly-built-icon {
    padding: 24px 30px;
    justify-items: center;
    flex: 1;
}
.burly-built-section .burly-built-wrapper .burly-built-icon-wrapper .burly-built-icon img.intro-icon {
    width: 64px;
}

.burly-built-section .burly-built-wrapper .burly-built-text-wrapper .burly-built-text p {
    color: #FFFFFF;
    font-size: 1.425em;
    font-weight: 600;
    line-height: 1.6;
    padding-bottom: 0;
}


/* CTA - Call To Action */

.cta-contact-section {
    background-image: url(/images/tri-bg.jpg);
    background-color: var(--color-deep-aqua);
    background-repeat: repeat;
    background-blend-mode: multiply;
    background-position-x: left;
    border-top: 12px solid var(--color-purple);
}
.cta-contact-section .content-wrapper {
    margin: 0 auto;
    display: flex;
    gap: 2rem;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 64px 0 72px;
}
.cta-contact-section .text-column {
    flex: 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.cta-contact-section .button-column {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Text Column Styling */
.cta-contact-section .text-column h2 {
    color: #FFFFFF;
    padding-bottom: 8px;
}
.cta-contact-section .text-column p {
    font-size: 1.325em;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 1.6;
    padding-bottom: 0;
}

/* Button Column Styling */
.cta-contact-section .button-column .button-outline-ko {
    background-color: var(--color-body);
    margin-bottom: 0.625rem;
    margin-right: 0.625rem;
    transition: all 0.3s ease;
}
.cta-contact-section .button-column .button-outline-ko:hover {
    background-color: var(--color-purple);
    text-decoration: none;
}


/* Products Page */

.product-page-body-section {
    padding: 56px 0; 
}

.products {
    padding: 0px 0 56px;
    display: flex;
    flex-direction: column;
}
.products .content-wrapper {
    max-width: 1140px;
    margin: 0 auto; 
    display: flex;
    gap: 2.625rem;
    align-items: center;
}

/* Products Text Content */

.products .text-column {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.products.bg-grey {
    background-color: #f4f4f4;
}

/* .products .content-wrapper .text-column h2 {
    padding-bottom: 0rem;
} */

.products .content-wrapper .text-column hr {
    border:0;
    width: 80px;
    height: 3px;
    background-color: var(--color-light-aqua);
    margin: 1rem 0;
}

.products .content-wrapper .text-column p {
    padding-bottom: 1.325rem;
}
.products .content-wrapper .text-column .button-wrap {
    margin-top: 0.625rem;
}

/* Burly Product Image */

.products .content-wrapper .image-column {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.products .content-wrapper .image-column .product-thumb img {
    border: 1px solid #CCCCCC;
    border-radius: 0 36px 0 36px;
    max-width: 100%;
    width: auto;
}

/* About Us Page */

.about-burly-house {
    padding: 56px 0 0px; 
    display: flex;
    flex-direction: column;
}
.about-burly-house .content-wrapper {
    max-width: 1140px;
    margin: 0 auto; 
    display: flex;
    gap: 64px;
    align-items: start;
}

/* About Intro Text Content */

.about-burly-house .text-column {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-burly-house .content-wrapper .text-column h2 {
    margin-bottom: 0rem;
}

.about-burly-house .content-wrapper .text-column p {
    padding-bottom: 1.325rem;
}

/* Burly House About Image */

.about-burly-house .content-wrapper .image-column {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.about-burly-house .content-wrapper .image-column img {
    /* border-radius: 0 36px 0 36px; */
    max-width: 100%;
    width: auto;
}



/* We Believe Intro Section */

.believe-intro-section {
    padding: 16px 32px 24px;
}

.believe-intro-section h2 {
    padding-bottom: 0rem;
    text-align: center;
}

.believe-intro-section p.believe-intro {
    font-size: 1.625em;
    font-weight: 600;
    max-width: 820px;
    margin: 0 auto;
    line-height: 1.325em;
    text-align: center;
}

.believe-intro-section .content-wrapper {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    padding: 0rem 1rem;
}
.believe-intro-section .text-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.believe-intro-section .button-row {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/* Four-Column Believe Icon Section */

.believe-intro-section .icons-wrapper {
    display: flex;
    justify-content: center;
    gap: 4rem;
    padding: 0rem 2rem 3.5rem;
    background-color: #fff;
    flex-wrap: wrap;
}

.believe-intro-section .icons-wrapper .icon-column {
    text-align: center;
    max-width: 300px;
}
.believe-intro-section .icons-wrapper .icon-column .icon-wrap {
    background-color: var(--color-light-grey);
    border-radius: 70px;
    display: block;
    margin: 0 auto;
    padding: 30px;
    height: 140px;
    width: 140px;
}

.believe-intro-section .icons-wrapper .icon-column img {
    width: 80px;
    height: 80px;
    margin-bottom: 1rem;
}

.believe-intro-section .icons-wrapper .icon-column h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    margin-top: 1.125rem;
}


/* About Team Section */
.about-burly-team {
    padding: 16px 0 72px; 
    display: flex;
    flex-direction: column;
    row-gap: 48px;    
}
.about-burly-team .content-wrapper .text-column h2 {
    padding-bottom: 36px;
    text-align: center;
}
.about-burly-team .team-grid-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; 
    padding: 18px;
}

.about-burly-team .team-grid-item {
    flex: 1 1 calc(33.33% - 10px); 
    box-sizing: border-box;
    background-color: var(--color-light-grey);
    border-radius: 6px;
    padding: 24px;
    text-align: center;
    align-items: stretch;
    max-width: 32.33%;
}

.about-burly-team img.headshot {
    border-radius: 64px;
    border: 4px solid #FFFFFF;
    width: 100%;
    max-width: 125px;
    margin: 0 auto;
}

.about-burly-team .team-member h3 {
    color: var(--color-deep-aqua);
    font-size: 1.325em;
    margin: 8px 0 4px;
    padding-bottom: 0.125em;
}

.about-burly-team .team-member p {
    color: var(--color-teal);
    line-height: 1.325em;
    font-size: 1.0em;
    margin: 0;
    padding-bottom: 0.125em;
}

/* Contact Us Page */

.contact-burly-house {
    padding: 56px 0; 
    display: flex;
    flex-direction: column;
    row-gap: 0;    
}

.contact-burly-house .content-wrapper {
    max-width: 1140px;
    margin: 0 auto; /* Center align wrapper */
    display: flex;
    gap: 2.625rem;
    align-items: start;
}

/* Contact Form Column */

.contact-burly-house .form-column {
    flex: 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.contact-burly-house .form-column h3 {
    color: var(--color-body);
    border-bottom: 2px solid var(--color-light-grey);
}

.contact-form-container {
background-color: var(--color-light-grey);
    border-radius: 24px;
    border: 1px solid #D6D7D9;
    padding: 32px;
    max-width: 760px;
}

/* Burly House Contact Info Column */

.contact-burly-house .content-wrapper .info-column {
    flex: 2;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 32px;
    width: 100%;
}
.contact-burly-house .content-wrapper .info-column .contact-info h3 {
    color: var(--color-body);
    border-bottom: 2px solid var(--color-light-grey);
    margin-bottom: 16px;
}
.contact-burly-house .content-wrapper .info-column .contact-info p {
    border-bottom: 2px solid var(--color-light-grey);
    line-height: 1.625em;
    padding-bottom: 16px;
    padding-top: 16px;
}

.contact-burly-house .content-wrapper .info-column .contact-info p .contact-option {
    font-weight: 600;
    margin-bottom: 8px;
}

/* Right Sidebar Page */

.right-sidebar-page {
    padding: 72px 0; 
    display: flex;
    flex-direction: column;
    row-gap: 96px;
}
.right-sidebar-page .content-wrapper {
    max-width: 1140px;
    margin: 0 auto; 
    display: flex;
    gap: 2.625rem;
    align-items: start;
}

/* Body Column Left */

.body-column-left {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.body-column-left h2 {
    padding-bottom: 0rem;
}

.body-column-left hr {
    border:0;
    width: 80px;
    height: 3px;
    background-color: var(--color-light-aqua);
    margin: 1rem 0;
}

.body-column-left p {
    padding-bottom: 1.325rem;
}


/* Sidebar Column Right */

.sidebar-column-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: left;
    width: 100%;
}

.sidebar-column-right h3 {
    color: var(--color-body);
    border-bottom: 2px solid var(--color-light-grey);
    line-height: 1.325em;
    padding-bottom: 16px;
}

.sidebar-column-right ul {
    list-style: none;
    margin-top: 24px;
}
.sidebar-column-right ul li {
    background-color: var(--color-light-grey);
    border-left: 4px solid var(--color-purple);
    font-size: 1.0em;
    font-weight: 600;
    letter-spacing: 0.03em;
    list-style: none;
}
.sidebar-column-right ul li a {
    
    color: var(--color-body);
    display: block;    
    line-height: 1.325em;
    margin-bottom: 16px;
    padding: 12px 16px;

    list-style: none;
    text-decoration: none;
    text-transform: uppercase;
}
.sidebar-column-right ul li a:hover {
    color: var(--color-light-aqua);
}


/* One-Column Section with Full-Width Background */
.one-column-section {
    background-color: #f4f4f4; 
    padding: 4rem 0; 
}

/* Responsive 1140px max */
@media (max-width: 1140px) {
    .believe-intro-section .icons-wrapper {
        gap: 2rem;
    }
}

/* Responsive 1024px max */
@media (max-width: 1024px) {

    .believe-intro-section .icons-wrapper {
        gap: 5rem;
        margin: 0 auto;
        max-width: 740px;
    }

    /* .products {
        padding: 64px 0;
    } */
    .products .content-wrapper {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }     
    .products.career-lattices .content-wrapper {
        flex-direction: column;
    }         
    .products .text-column, 
    .products .image-column {
        flex: 1;
    }
}

/* Responsive 960px max */
@media (max-width: 960px) {
    .home .hero-section {
        /* height: 70vh; */
    }
    .home .hero-section .hero-text h1 {
        font-size: 3.125em;
    }    

    .about-us-intro-section .icons-wrapper {
        gap: 6rem;
        padding: 32px 64px 64px;
    }

    .burly-built-section {
        margin-bottom: 56px;
        padding: 0 56px;
    }    
    .burly-built-section .burly-built-wrapper {
        padding: 16px 24px 16px 24px;
    }    

    .cta-contact-section .content-wrapper {
        padding: 64px 32px;
        flex-direction: column;
        align-items: flex-start;
    }

    .products-intro-section .icons-wrapper {
        gap: 6rem;
        padding: 32px 64px 64px;
    }

    .about-burly-team .team-grid-item {
        flex: 1 1 calc(50% - 10px);
        max-width: 50%;
    }
    
    .contact-burly-house .content-wrapper {
        display: flex;
        flex-direction: column;
        align-items: start;
    }
}

/* Responsive 768px max */
@media (max-width: 768px) {
    .home .hero-section .content-wrapper {
        padding: 0 32px;
    }
    .home .hero-section .hero-text h1 {
        font-size: 2.625em;
    }
    .home .hero-section .hero-buttons {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }
    .about-us-intro-section {
        padding: 64px 64px;
    }    
    .about-us-intro-section .icons-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 3rem;
        padding: 32px 32px 64px;
    }

    .two-cards-section {
        padding: 16px 0;
    }    

    .two-cards-section .cards-wrapper {
        flex-direction: column;
    }
    .burly-built-section {
        margin-bottom: 48px;
        padding: 0 24px;
    }    
    .burly-built-section .burly-built-wrapper {
        flex-direction: column-reverse;
        padding: 16px 24px 16px 24px;
    }    

    .cta-contact-section .content-wrapper {
        padding: 64px 24px;
    }
    .cta-contact-section .text-column, 
    .cta-contact-section .button-column {
        flex: 1;
    }

    .believe-intro-section {
        padding: 16px 32px;
    }    
    .believe-intro-section .icons-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        padding: 32px 32px 64px;
    }

    .right-sidebar-page .content-wrapper {
        display: flex;
        flex-direction: column;
        align-items: start;
    }    

}

/* Responsive 540px max */
@media (max-width: 540px) {
    .home .hero-section {
        margin-top: 102px;
        padding: 64px 24px 48px;
    }
    
    .home .hero-section .content-wrapper {
        padding: 0 0px;
    }    
    .home .hero-section .hero-text h1 {
        font-size: 2.1em;
    }
    .home .about-us-intro-section {
        padding: 40px 24px;
    }    
    .home .about-us-intro-section .content-wrapper  {
        padding: 0 0;
    }
    .home .about-burly-house .content-wrapper {
        padding: 0 18px;        
    }
    .products-intro-section {
        padding: 64px 0px;
    } 
    .about-burly-house {
        padding: 32px 0 0px;
    }    
    .about-burly-team .team-grid-container {
        padding: 0;
    }       
    .about-burly-team .team-grid-item {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .contact-burly-house {
        padding: 32px 0;
    }    
}