/* Default styles - small devices (Mobile, screen width < 768px) */

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body {
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    overflow-x: hidden;
}
h1, h2, h3, h4 {
    font-weight: 400;
}
p {
    font-size: 1.125rem;
}
  .v-hidden {
    visibility: hidden;
  }
  .section-h2 {
    font-size: 2.5rem;
    font-weight: 400;
  }
  .upp {
    text-transform: uppercase;
  }
.section-triangle {
    margin-top: -2rem;
    margin-right: 0;
    margin-bottom: 1rem;
    margin-left: 0;
    max-height: 135px;
}

.btn.btn-white-outline {
    color: var(--white);
    border: 2px solid var(--white);
    border-radius: 0;
    text-transform: uppercase;
    padding: 1.25rem;
    transition: all 0.3s;
    width: fit-content;
}
.btn.btn-white-outline:hover {
    color: var(--blue-dark);
    background-color: var(--white);
}

/*--------------------------------------------------------------
# Top Bar
--------------------------------------------------------------*/
.top-bar {
    background-color: var(--gold);
    border-bottom: 2px solid var(--black);
}
.top-bar .social-logos a {
    text-decoration: none;
}
.top-bar .social-logos a:hover svg path, .top-bar .social-logos a:hover svg polyline {
    fill: var(--black)!important;
}
.top-bar .social-logos svg {
    height: 24px;
}
#search input {
    border-radius: 0;
    border: thin solid var(--black);
}
#search input::placeholder {
    color: var(--gray);
}
.search-btn {
    background-color: var(--black);
    border: thin solid var(--black);
    border-radius: 0;
    padding: .28em .47em .47em .47em;
    transition: .3s all;
}
.search-btn:hover {
    background-color: var(--black);
}
.search-btn svg {
    display: inline-block;
}
.search-btn svg:nth-of-type(2) {
    display: none;
}
.search-btn:hover svg:nth-of-type(1) {
    display: none;
}
.search-btn:hover svg:nth-of-type(2) {
    display: inline-block;
 
}

.navbar .top-bar {
    background-color: var(--black);
}
/* .contact-col {
    display: flex;
    justify-content: end;
    align-items: end;
}
.contact-header {
    height: 100%;
    width: 95%;
    padding-left: 1.25rem;
    padding-right: .75rem;
    margin-top: 1rem;
}
.contact-container {
    background-color: var(--black);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;
    height: 100%;
    padding-left: 4rem;
    padding-right: 1rem;
}
.contact-container a{
    padding: .875rem;
    text-decoration: none;
}
.contact-container a.phone {
    color: var(--yellow);
    font-size: 1rem;
}
.contact-container a.email {
    color: var(--white);
    font-size: 0.875rem;
    text-transform: uppercase;
    font-weight: 300;
}
.contact-container .phone-svg {
    position: absolute;
    left: -1.5rem;
    height: 100%;
}
.contact-container .triangle-svg {
    position: absolute;
    right: -1.45rem;
    height: 100%;
} */
#main-nav .contact-col2 {
    display: flex;
    justify-content: end;
    align-items: end;
}
#main-nav .contact-header2 {
    height: 100%;
    width: 95%;
    padding-left: 1.25rem;
    padding-right: .75rem;
    margin-top: 1rem;
}
#main-nav .contact-container2 {
    background-color: var(--black);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;
    height: 100%;
    padding-left: 4rem;
    padding-right: 1rem;
}
#main-nav .contact-container2 a{
    padding: .875rem;
    text-decoration: none;
}
#main-nav .contact-container2 a.phone {
    color: var(--yellow);
    font-size: 1rem;
}
#main-nav .contact-container2 a.email {
    color: var(--white);
    font-size: 0.875rem;
    text-transform: uppercase;
    font-weight: 300;
}
#main-nav .contact-container2 .phone-svg {
    position: absolute;
    left: -1.5rem;
    height: 100%;
}
#main-nav .contact-container2 .triangle-svg {
    position: absolute;
    right: -1.45rem;
    height: 100%;
}
/*--------------------------------------------------------------
# Main Navigation
--------------------------------------------------------------*/
.nav-outer {
    background-color: var(--white);
}

.navbar-toggler {
    border: none;
}

#main-nav .active a {
    color: #ffffff;
}

#main-nav a {
    /* text-transform: uppercase; */
    color: var(--blue);
    font-weight: 300;
    transition: all .3s;
}
#main-nav a:hover {
    color: var(--gold);
}

#main-nav .nav-item {
    /* border-bottom: 1px solid #132a441a; */
}
#main-nav .nav-item.active a {
    /* border-left: 2px solid var(--black); */
    /* padding-left: 1em; */
}
#main-nav .btn {
    font-size: 18px;
}

#main-nav .active .nav-link {
     color: var(--black);
     /* font-weight: 600; */
}

#main-nav .btn {
    font-size: 18px;
}

.nav-outer .container {
    padding: 0;
}

.navbar ul {
    padding: 0;
}

    .navbar ul li, .site-logo-top, .navbar-toggler, .mobile-search-btn {
        padding-left: calc(var(--bs-gutter-x) * .5);
        padding-right: calc(var(--bs-gutter-x) * .5);
    }

        .navbar-nav .nav-item, .navbar ul li:first-child {
            padding: 1rem calc(var(--bs-gutter-x) * .5);
        }

        .navbar a {
            padding: 0;
        }

.nav-contact a, .nav-contact p {
    color: #ffffff;
    text-decoration: none;

}

/* .top-bar {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
    box-sizing: border-box;
} */
.site-logo-top svg {
    margin-left: -.5rem;
}
/* Collapse Button Mobile */
.animated-icon {
    cursor: pointer;
    height: 20px;
    margin: 0px;
    position: relative;
    width: 30px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

    .animated-icon span {
        border-radius: 9px;
        display: block;
        height: 3px;
        position: absolute;
        left: 0;
        opacity: 1;
        width: 100%;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }

    .animated-icon span {
        background: var(--black);
    }

        .animated-icon span:nth-child(1) {
            top: 0px;
            -webkit-transform-origin: left center;
            -moz-transform-origin: left center;
            -o-transform-origin: left center;
            transform-origin: left center;
        }

        .animated-icon span:nth-child(2) {
            top: 10px;
            -webkit-transform-origin: left center;
            -moz-transform-origin: left center;
            -o-transform-origin: left center;
            transform-origin: left center;
        }

        .animated-icon span:nth-child(3) {
            top: 20px;
            -webkit-transform-origin: left center;
            -moz-transform-origin: left center;
            -o-transform-origin: left center;
            transform-origin: left center;
        }

    .animated-icon.open span:nth-child(1) {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        top: 0px;
        left: 8px;
    }

    .animated-icon.open span:nth-child(2) {
        width: 0%;
        opacity: 0;
    }

    .animated-icon.open span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        top: 21px;
        left: 8px;
    }


    /* Search toggle  */
    .mobile-search-btn {
        position: relative;
    }
    .mobile-search-btn svg {
        position: absolute;
        opacity: 1;
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }
    .mobile-search-btn .icon {
        opacity: 0;
        cursor: pointer;
        height: 20px;
        margin: 0px;
        position: relative;
        width: 30px;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);

        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        
    }
    .mobile-search-btn .icon span {
        border-radius: 9px;
        display: block;
        height: 3px;
        position: absolute;
        left: 0;
        opacity: 1;
        width: 100%;
        
     
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
        background: #000000;
    }

    .mobile-search-btn .icon span:nth-child(1) {
        
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        top: calc(50% + 3px);
        /* left: calc(50% + 5px); */
    }
   
    .mobile-search-btn .icon span:nth-child(2) {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        top: calc(50% + 3px);
        /* left: calc(50% + 5px); */
    }



    .mobile-search-btn .icon.open {
        opacity: 1;
    }

    .mobile-search-btn svg.open {
        opacity: 0;
    }
    /* .mobile-search-btn svg {
        opacity: 1;
    } */


/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs .container-fluid {
    background-color: var(--gold);
}
.breadcrumb-item a {
    color: #ffffff;
    font-weight: 400;
    text-decoration: none;
}
.breadcrumb-item.active {
    font-weight: 500;
    color: #ffffff;
}


    

/*--------------------------------------------------------------
# Hero - Homepage
--------------------------------------------------------------*/
.section {
    overflow: hidden;
}
.hero {
    position: relative;
    background-color: var(--blue);
    overflow: hidden;
}
.hero .container-fluid, .hero .container, .hero .row, .hero .col-12, .hero .swiper-wrapper, .hero .swiper-slide, .hero .hero-img-container {
    overflow: visible;
}
.hero h1 {
    color: var(--white);
    font-weight: 300;
    line-height: 1.34;
}
.hero .hero-img-container, .hero .swiper-slide {
    position: relative;
}
.hero .hero-text-container {
    background-color: var(--blue-dark);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    padding: 2rem;
    margin-left: -5rem;
    margin-bottom: -3rem;
}
.hero .hero-text{
    padding: 2rem 3rem 2rem 5rem;
    z-index: 9;
    position: relative;
}
.hero .hero-img {
    width: 90%;
    object-fit: cover;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.hero .swiper .hero-hexagon {
    transform: rotate(90deg);
    background-color: var(--black);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    position: absolute;
    top: 0;
    right: -2rem;
}
/*--------------------------------------------------------------
# Guide - Homepage
--------------------------------------------------------------*/
.guide .container-fluid {
    background-color: var(--gray);
}
.guide h2 {
    font-size: 2.6rem;
    font-weight: 400;
}
.guide h2 span {
    text-transform: uppercase;
}
.guide .card {
    background-color: var(--white);
    border: 3px solid var(--grayLight);
    border-radius: 0;
    padding: 0 2.5rem 1rem 2.5rem;
}
.guide .card h3 {
    font-weight: 400;
    font-size: 2rem;
    text-align: center;
}
.guide .card svg {
    max-height: 135px;
    margin: -2rem 0 1rem 0;
}

/*--------------------------------------------------------------
# Our Doors - Homepage
--------------------------------------------------------------*/
.our-doors-home a.card {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    margin-top: 2.5rem;
}
.our-doors-home a.card svg {
    width: 75%;
    margin-bottom: 1.5rem;
}
.our-doors-home p {
    text-transform: uppercase;
    font-size: 1.875rem;
}
.our-doors-home a {
    text-decoration: none;
    color: var(--black);
}
.our-doors-home a.card p:nth-of-type(2) {
    color: var(--blue);
    margin-top: -1.75rem;
    transition: all .3s;
}
.our-doors-home a.card p:nth-of-type(3) {
    font-size: 1rem;
    transition: all .3s;
    margin-top: -.5rem;
}
.our-doors-home a.card svg polyline {
    transition: all .3s;
}
.our-doors-home a.card:hover svg polyline {
    fill: var(--black)!important;
}
.our-doors-home a.card:hover p:nth-of-type(2) {
    color: var(--black);
}
.our-doors-home a.card:hover p:nth-of-type(3) {
    transform: translateY(-1rem);
}

/*--------------------------------------------------------------
# About Us - Homepage
--------------------------------------------------------------*/
.about-us {
    background-color: var(--grayLight);
    margin-top: -6.9rem;
    padding-top: 7rem !important;
}
.about-us a.card {
    background-color: transparent;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.about-us a.card svg {
    width: 4rem;
    margin-bottom: 1rem;
}
.about-us a {
    text-decoration: none;
    color: var(--black);
}
.about-us a.card p {
    text-transform: uppercase;
    transition: all .3s;
    text-align: center;
}
.about-us .card-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.about-us .card-col .card-divider {
    border-bottom: 2px solid var(--black);
    width: 100px;
    height: 2px;
    margin: 1.25rem 0 2.5rem 0;
}
.about-us .desktop-div {
    width: 2px;
    height: 4rem;
    background-color: var(--black);
}
/*--------------------------------------------------------------
# Testimonials - Homepage
--------------------------------------------------------------*/
.testimonials {
    position: relative;
    background-color: var(--blue);
    overflow: hidden;
    padding-top: 2rem;
    padding-bottom: 5rem;
}
.testimonials .container-fluid, .testimonials .container, .testimonials .row, .testimonials .col-12, .testimonials .swiper-wrapper, .testimonials .swiper-slide, .testimonials .testimonials-img-container {
    overflow: visible;
}
.testimonials p {
    color: var(--white);
    font-weight: 300;
    line-height: 1.34;
    text-transform: uppercase;
}

.testimonials p:nth-of-type(2) {
    text-transform: unset;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.5;
    
}
.testimonials p:nth-of-type(3) {
    font-size: .65rem;
}
.testimonials .testimonials-img-container, .testimonials .swiper-slide {
    position: relative;
}
.testimonials .testimonials-text-container {
    /* background-color: var(--blue-dark); */
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    padding: 2rem;
    margin-left: -5rem;
    margin-bottom: -3rem;
}
.testimonials .testimonials-text{
    padding: 0 3rem 2rem 5rem;
    margin-bottom: 3rem;
    z-index: 9;
    position: relative;
}
.testimonials .testimonials-img {
    width: 90%;
    object-fit: cover;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.testimonials .swiper .testimonials-hexagon {
    transform: rotate(90deg);
    background-color: var(--black);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    position: absolute;
    top: 0;
    right: -2rem;
}

.testimonials .testimonials-header {
    clip-path: polygon(0 0, 100% 0%, 86% 100%, 0% 100%);
    background-color: var(--blue-light);
    padding: 2rem 1.5rem;margin-left: -1rem;
    margin-bottom: 1.5rem;
}

.testimonials .testimonials-header h2 {
    color: var(--black);
    font-weight: 400;
}
.testimonials .testimonials-header h2 span {
    color: var(--white);
    text-transform: uppercase;
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs .container-fluid {
    background-color: var(--blue);
}
.breadcrumb-item a {
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
}
.breadcrumb-item.active {
    font-weight: 300;
    color: #ffffff;
}


/*--------------------------------------------------------------
# Inner Header 1
--------------------------------------------------------------*/
.inner-header-1 {
    background-color: var(--black);
}
.inner-header-1 h1 {
    color: var(--blue-light);
    margin-bottom: 2rem;
}
.inner-header-1 p {
    color: var(--white);
    font-weight: 300;
    font-size: 1.25rem;
    margin-bottom: 2rem;
}
.inner-header-1 p:last-of-type {
    margin-bottom: 0;
}
.inner-header-1-img {
    width: 100%;
    object-fit: cover;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
/*--------------------------------------------------------------
# Inner Header 2
--------------------------------------------------------------*/
.inner-header-2 {
    background-color: var(--black);
}
.inner-header-2 h1 {
    color: var(--white);
}
.inner-header-2 p {
    color: var(--white);
    font-weight: 300;
    font-size: 1.25rem;
    margin-bottom: 2rem;
}
.inner-header-2 p:last-of-type {
    margin-bottom: 0;
}
.inner-header-2-title {
    background-color: var(--blue);
    width: 100%;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    display: flex;
    justify-content: center;
    align-items: center;
}
/*--------------------------------------------------------------
# Door Cards 1
--------------------------------------------------------------*/
.door-cards-1 {
    padding: 4rem 0;
    background-color: var(--grayLight);

}
.door-cards-1 a {
    text-decoration: none;
    color: var(--white);
}
.door-card-1-container {
    display: block;
    position: relative;
    height: 100%;
}
.door-cards-1 .title {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background-color: var(--black);
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.25rem;
    position: absolute;
    top: 0;
    left: 0;
}
.door-cards-1 .title h2 {
    font-size: 1.25rem;
    text-transform: uppercase;
}

.door-cards-1 .door-card-1-container img {
    border-radius: 50%;
    width: 100%;
    object-fit: cover;
}

.door-cards-1 .foot {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background-color: var(--blue);
    width: 33%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.25rem;
    position: absolute;
    bottom: 0;
    right: 0;
}

.door-cards-1 .foot p {
    text-align: center;
    font-size: 1.25rem;
    text-transform: uppercase;
    margin-bottom: 0;
    font-size: 0.875rem;
}

.door-cards-1 .sub {
    text-transform: uppercase;
    text-align: center;
}
.door-cards-1 .sub p {
    font-size: 1.5rem;
}

a.door-card-1-container:hover .title {
    background-color: var(--white);
}
a.door-card-1-container:hover .title h2 {
    color: var(--black);
}
a.door-card-1-container:hover .foot {
    background-color: var(--white);
}
a.door-card-1-container:hover p {
    color: var(--black);
}
a.door-card-1-container .title {
    transition: all .3s;
}
a.door-card-1-container .title h2 {
    transition: all .3s;
}
a.door-card-1-container .foot {
    transition: all .3s;
}
a.door-card-1-container p {
    transition: all .3s;
}
.door-card-1-container .img-container img {
    max-width: 368px;
    max-height: 368px;
}
/*--------------------------------------------------------------
# Door Cards 2
--------------------------------------------------------------*/
.door-cards-2 {
    padding: 4rem 0;
    background-color: var(--grayLight);

}
.door-cards-2 .door-card-col {
    margin-bottom: 1rem;
}
.door-cards-2 a {
    text-decoration: none;
    color: var(--black);
}
.door-card-2-container {
    display: block;
    position: relative;
    height: 100%;
    background-color: transparent;
}
.door-cards-2 .img-container {
    border: medium solid var(--gray);
    padding: 3rem;
    background-color: var(--white);
    transition: all .3s;
}
.door-cards-2 .title {
    padding: 0 1.25rem;
    width: 100%;
    border: medium solid var(--gray);
    padding: 2.5rem 2rem;
    background-color: var(--white);
    transition: all .3s;
}
.door-cards-2 .title h2 {
    font-size: 1.75rem;
    font-weight: 300;
    color: var(--black);
    transition: all .3s;
}
.door-cards-2 .title p {
    font-size: 1rem;
    color: var(--blue);
    margin-bottom: 0;
    transition: all .3s;
}

.door-cards-2 .door-card-2-container img {
    background-color: var(--white);
    width: 100%;
    height: 100%;
    /* width: 50%;
    height: 50%; */
    object-fit: cover;
}
.door-cards-2 .foot-container {
    display: flex;
    justify-content: end;
    background-color: transparent;
    padding-right: 2rem;
    margin-top: -2.5rem;
}

.door-cards-2 .foot {
    /* clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); */
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background-color: var(--blue);
    width: 33%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 2rem;
    /* position: absolute;
    bottom: calc(-10%+2rem);
    right: 2rem; */
    transition: all .3s;
}

.door-cards-2 .foot p {
    text-align: center;
    font-size: 1.25rem;
    text-transform: uppercase;
    margin-bottom: 0;
    font-size: 0.875rem;
    transition: all .3s;
}

.door-cards-2 .sub {
    text-transform: uppercase;
    text-align: center;
}
.door-cards-2 .sub p {
    font-size: 1.5rem;
}
.door-cards-2 a:hover .img-container {
    border-color: var(--blue);
}
.door-cards-2 a:hover .title {
    background-color: var(--blue);
    border-color: var(--blue);
}

.door-cards-2 a:hover .foot {
    background-color: var(--white);
    color: var(--blue);
}

.door-cards-2 a:hover .title h2, .door-cards-2 a:hover .title p {
    color: var(--white);
}
/*--------------------------------------------------------------
# Inner Header 3
--------------------------------------------------------------*/
.inner-header-3 .container {
    background-color: var(--black);
    padding: 2rem 2rem;
}
.inner-header-3 h1 {
    color: var(--blue);
}
.inner-header-3 h1 span {
    color: var(--white);
}
/*--------------------------------------------------------------
# Door Product Inner
--------------------------------------------------------------*/
.door-product-inner img {
    width: 100%;
    object-fit: cover;
}
.door-product-inner .container {
    border: thick solid var(--gray);
}
.door-product-inner .title {
    background-color: var(--grayLight);
    padding: 2rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.door-product-inner p, li {
    font-size: 1.125rem;
    font-weight: 300;
}
.door-product-inner li { 
    padding: .5rem 0;
}
.door-product-inner .container.hex-container {
    border: thick solid var(--gray);
    background-color: var(--gray);
}
.door-product-inner .hex-container .blue-hex-product {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background-color: var(--blue);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 3rem;
    margin-top: 2rem;
}
.door-product-inner .hex-container .blue-hex-product svg {
    width: 30%;
    max-height: 85.0px;
}
.door-product-inner .hex-container .blue-hex-product .sm-svg {
    padding: .5rem;
}
.door-product-inner .hex-container .blue-hex-product h4 {
    color: var(--white);
    font-size: 1.5rem;
}
.door-product-inner .hex-container .blue-hex-product p, .hex-container .blue-hex-product a {
    color: var(--white);
    /* font-size: 1.5rem; */
    text-decoration: none;
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer {
    font-size: 1rem;
    background-color: var(black);
}

    footer a {
        color: var(--white);
    }


    #footer .social-logos a:hover svg g rect {
    fill: var(--blue)!important;
}

footer#footer {
    border-top: 2px solid var(--gold);
    background: var(--black);
}
    footer a span {
        color: var(--cyan);
    }

    /* footer .footer-title {
        font-weight: 600;
    } */



    footer a {
        color: var(--white);
        font-size: .875rem;
        text-decoration: none;
        font-weight: 400;
    }

        footer a:hover {
            /* text-decoration: underline; */
            color: var(--blue);
        }

            footer a:hover span {
                color: var(--blue);
            }
footer .fas.fa-angle-down path, footer .fas.fa-angle-right path {
    fill: var(--blue);
}
.footer-title, footer a, footer p {
    font-weight: 400;
}
footer p {
    font-size: 0.875rem;
}
footer p, footer h4 {
    color: var(--white);
}
.footer-title {
    color: var(--blue-light);
    font-size: 1rem;
    /*font-weight: 500;*/
    margin-bottom: 20px;
    /* text-transform: uppercase; */
}

footer ul li {
    margin-bottom: 10px;
    padding-left: 2.3rem;
    text-indent: -1.1rem;
}
footer .fa-angle-right {
   height: 20px;
}
footer .fa-angle-down {
    width: 20px;
}
footer .fa-chevron-right {
    /*color: #ffffff;*/
    /*color: #ffffff;*/
    padding-right: 0.2rem;
}

.shfooter .collapse {
    display: inherit;
}

.shfooter i::before {
    color: var(--grayLight);
}


.resize {
    text-align: center;
}

.resize {
    margin-top: 3rem;
    font-size: 1.25rem;
}

/* Social footer  */
footer .fa-brands {
    width: 7%;
}

footer .fab:before {
    font-size: 1.1rem;
}

.social-footer a:hover svg {
    /*color: var(--links); */
    animation: icons-rise 0.3s linear forwards;
}

#footer .social-logos svg {
   width: 30px;
   height: 30px;
   transition: all .3s;
}
#footer .social-logos svg g rect{
   
    transition: all .3s;
 }
#footer h4 {
    font-size: 1rem;
    margin-top: 2rem;
}
#footer .social-logos a svg {
    height: 30px!important;
    padding: 0!important;
    margin-right: 1rem;
}
@keyframes icons-rise {
    from {
        transform: translateX(0px);
    }

    to {
        transform: translate(2.5px, -2.5px);
    }
}

.social-footer a:hover {
    text-decoration: none;
}

    .social-footer a:hover span {
        text-decoration: underline;
    }

@keyframes arrow-right {
    from {
        transform: translateX(0px);
    }

    to {
        transform: translateX(3px);
    }
}



footer hr:not([size]) {
    height: 1px;
    color: var(--blue);
    opacity: .8;
}

footer ul li {
    padding-left: 0;
    text-indent: 0;
    /* remove this if issue 616 617 */
    display: flex;
    align-items: center;
}

footer .fa-chevron-right {
    display: none;
}

.footer-title {
    margin-bottom: 0;
}

.shfooter ul {
    margin-bottom: 0;
}

.shfooter .collapse {
    display: none;
}

    .shfooter .collapse.show {
        display: block;
    }

.shfooter .title .fa-angle-down,
.shfooter .title[aria-expanded=true] .fa-angle-right {
    display: none;
}

.shfooter .title[aria-expanded=true] .fa-angle-down {
    display: block;
}

.shfooter .navbar-toggler {
    display: inline-block;
    padding: 0;
}

.sub-footer {
    background-color: var(--blue);
    color: var(--white);
    font-weight: 300;
}

footer .footer-text {
    text-transform: uppercase;
    color: var(--white);
}