@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Rubik:ital,wght@0,300..900;1,300..900&family=Space+Grotesk:wght@300..700&display=swap');

body, html{
    background: #eaeaea;
    color: #000;
}

body.light{
    background: #FFFFFF !important;
}

/** Navbar **/
header{
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px;
}

header .logo img{
    width: 83px;
    height: 124px;
}

header .nav{
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

header .nav nav{
    background: #FFFFFF;
    box-shadow: rgba(113,152,172, .3) 0px 0px 18px 0px;
    padding: 5px 20px 5px 25px;
    border-radius: 50px;
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: 16px;
    font-style: normal;
    position: relative;
}

header .nav nav .desktop{
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

header .nav nav .mobile{
    display: none;
}

header .nav nav a.link{
    color: #000;
    height: 50px;
    display: flex;
    align-items: center;
}

header .nav nav a.link:hover{
    color: #41B51D;
}

header .nav nav a.login{
    margin-left: 50px;
    background-image: linear-gradient(to right, #41B51D , #194701);
    padding: 5px 50px 4px 50px;
    color: white;
    font-size: 18px;
    letter-spacing: 5px;
    border-radius: 25px;
    transition: background-image .2s ease;
    position: relative;
}

header .nav nav a.login:after{
    content: 'LOGIN';
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    background-image: linear-gradient(to left, #41B51D , #194701);
    padding: 5px 50px 4px 50px;
    color: white;
    font-size: 18px;
    letter-spacing: 5px;
    border-radius: 25px;
    opacity: 0;
    transition: opacity .2s ease;
}

header .nav nav a.login:hover:after{
    opacity: 1;
}

header .nav nav .dropdown{
    position: relative;
}

header .nav nav .dropdown:hover .menu{
    display: flex;
}

header .nav nav .dropdown:hover .link{
    color: #41B51D;
}

header .nav nav .dropdown .menu{
    display: none;
    position: absolute;
    left: 0;
    top: 40px;
    width: 225px;
    max-width: 225px;
    background: #FFFFFF;
    box-shadow: rgba(113,152,172, .3) 0px 0px 18px 0px;
    border-radius: 13px;
    border: 1px solid rgba(11, 11, 11, .2);
    padding: 5px;
    flex-direction: column;
}

header .nav nav .dropdown .menu a{
    padding: 5px 10px !important;
    color: #000;
    border-radius: 8px;
}

header .nav nav .dropdown .menu a:hover{
    background: #41B51D;
}

.mobile-nav-container.show .background{
    /*pointer-events: all !important;*/
    opacity: 1;
}

.mobile-nav-container.show .mobile-nav{
    left: 0;
}

.mobile-nav-container.show{
    display: block;
}

.mobile-nav-container{
    position: fixed;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 9999;
    /*pointer-events: none;*/
    display: none;
}

.mobile-nav-container .background{
    position: absolute;
    z-index: 99998;
    background: rgba(11, 11, 11, .3);
    backdrop-filter: blur(2px);
    width: 100vw;
    height: 100vh;
    /*pointer-events: none;*/
    opacity: 0;
    transition: opacity .2s ease;
}

.mobile-nav{
    position: absolute;
    height: 100vh;
    width: 300px;
    background: #FFFFFF;
    z-index: 99999;
    box-shadow: rgba(113,152,172, .3) 0px 0px 18px 0px;
    padding: 25px 15px;
    left: -300px;
    transition: left .2s ease;
}

.mobile-nav .close-section{
    display: flex;
}

.mobile-nav .close-section .logo{
    flex-grow: 1;
}

.mobile-nav .close-section .logo img{
    width: 40%;
}

.mobile-nav .close-section .close{
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border-radius: 100%;
    background: rgba(11, 11, 11, .1);
}

.mobile-nav .close-section .close:hover{
    background: rgba(11, 11, 11, .2);
    cursor: pointer;
}

.mobile-nav .nav{
    display: flex;
    flex-direction: column;
    margin-top: 25px;
}

.mobile-nav .nav .link{
    padding: 10px;
    margin-bottom: 5px;
    color: #000;
}

/** Home **/
.banner{
    margin: 25px 0 35px 0;
}

.banner .banner-img{
    margin-top: auto;
}

.column.is-content-bottom{
    display:flex;
    flex-direction:column;
    justify-content:space-between
}

.banner h1{
    color: #2B6708;
    font-size: 54px;
    margin-bottom: 25px;
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    line-height: 1.3;
    font-weight: 450;
    font-style: normal;
}

.banner p{
    font-size: 18px;
    color: #333333;
    margin-bottom: 5px;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.banner .book-demo{
    background-image: linear-gradient(to right, #E7391B , #8B1B21);
    padding: 7px 50px 7px 50px;
    color: white;
    font-size: 18px;
    letter-spacing: 5px;
    border-radius: 25px;
    transition: background-image .2s ease;
    position: relative;
    margin-top: 55px;
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
}

.banner .book-demo.get-inspected:after{
    content: "GET A DOOR INSPECTED";
}

.banner .book-demo:after{
    content: 'BOOK A DEMO';
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    background-image: linear-gradient(to left, #E7391B , #8B1B21);
    padding: 4.5px 50px 4.5px 50px;
    color: white;
    font-size: 18px;
    letter-spacing: 5px;
    border-radius: 25px;
    opacity: 0;
    transition: opacity .2s ease;
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    cursor: pointer;
}

.banner .book-demo:hover:after{
    opacity: 1;
}


.services{
    background-image: linear-gradient(to right, #41B51D , #194701);
    padding: 25px;
}

.services .service img{
    width: 107px;
    height: 104px;
}

.services .service h1{
    margin-top: 10px;
    font-size: 22px;
    color: #FFFFFF;
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.services .service p{
    font-size: 16px;
    color: #FFFFFF;
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
}


.section-header{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-header span{
    background-image: linear-gradient(to right, #E7391B , #8B1B21);
    font-size: 16px;
    letter-spacing: 1px;
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    padding: 5px 50px;
    color: #FFFFFF;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}


.portal{
    width: 100%;
    padding-bottom: 25px;
    background-color: #FFFFFF;
}

.portal h1{
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 35px;
    color: #2B6708;
    text-align: center;
    margin: 40px 0;
}

.portal p{
    margin-top: 35px;
    color: #666666;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.portal .request-access{
    display: inline;
    margin-top: 50px;
    background-image: linear-gradient(to right, #41B51D , #194701);
    padding: 7px 25px 6px 25px;
    color: white;
    font-size: 18px;
    letter-spacing: 5px;
    border-radius: 25px;
    transition: background-image .2s ease;
    position: relative;
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    cursor: pointer;
}

.portal .request-access:after{
    content: 'REQUEST ACCESS';
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    background-image: linear-gradient(to left, #41B51D , #194701);
    padding: 4px 25px 3px 25px;
    color: white;
    font-size: 18px;
    letter-spacing: 5px;
    border-radius: 25px;
    opacity: 0;
    transition: opacity .2s ease;
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
}

.portal .request-access:hover:after{
    opacity: 1;
}

.golden-thread{
    background: #eaeaea;
    position: relative;
    height: 500px;
}

.golden-thread .background{
    position: absolute;
    right: 0;
    bottom: 25px;
    width: 390px;
    height: 377px;
}

.golden-thread .our-surveys{
    display: inline;
    margin-top: 50px;
    background-image: linear-gradient(to right, #E7391B , #8B1B21);
    padding: 7px 25px 6px 25px;
    color: white;
    font-size: 18px;
    letter-spacing: 5px;
    border-radius: 25px;
    transition: background-image .2s ease;
    position: relative;
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    cursor: pointer;
}

.golden-thread .our-surveys:after{
    content: 'OUR SURVEYS';
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    background-image: linear-gradient(to left, #E7391B , #8B1B21);
    padding: 5px 25px 2px 25px;
    color: white;
    font-size: 18px;
    letter-spacing: 5px;
    border-radius: 25px;
    opacity: 0;
    transition: opacity .2s ease;
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
}

.golden-thread .our-surveys:hover:after{
    opacity: 1;
}


.footer{
    background-image: linear-gradient(to right, #41B51D , #194701);
    color: #FFFFFF;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    height: unset;
    min-height: unset;
    padding-left: 10px;
    padding-right: 20px;
    padding-bottom: 20px;
}

.footer p{
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    text-align: center;
    margin-bottom: 15px;
    font-size: 18px;
}

.footer img{
    width: 120px;
    height: 179px;
}

input[type=text], input[type=email], textarea{
    width: 100%;
    border: 1px solid transparent;
    background: #FFFFFF;
    color: #000000;
    font-size: 16px;
    padding: 5px 15px;
    border-radius: 15px;
    margin-bottom: 10px;
    outline: none;
}

textarea{
    resize: none;
    height: 150px;
}

input[type=text]:hover,
input[type=text]:focus,
input[type=text]:active,
input[type=email]:hover,
input[type=email]:focus,
input[type=email]:active{
    border-color: #000;
}

input[type=text]::placeholder,
input[type=email]::placeholder,
textarea::placeholder{
    color: #96C57A;
}

input[type=submit]{
    position: relative;
    background-image: linear-gradient(to right, #41B51D , #194701);
    padding: 7px 70px 6px 70px;
    color: white;
    font-size: 18px;
    letter-spacing: 5px;
    border-radius: 25px;
    transition: background-image .2s ease;
    position: relative;
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    cursor: pointer;
    border: 1px solid #FFFFFF;
    margin: 10px auto;
}

.footer input[type=submit]:after{
    content: 'SUBMIT';
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    background-image: linear-gradient(to left, #41B51D , #194701);
    padding: 5px 70px 2px 70px;
    color: white;
    font-size: 18px;
    letter-spacing: 5px;
    border-radius: 25px;
    opacity: 0;
    transition: opacity .2s ease;
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
}

.footer small{
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    margin: 25px auto;
    font-size: 16px;
}

.footer .column.right{
    text-align: right;
}


/** Contact Page **/
.contact{
    padding-top: 25px;
    padding-bottom: 25px;
}

.contact h1{
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 450;
    line-height: 1.3;
    font-style: normal;
    font-size: 54px;
    color: #2B6708;
    max-width: 90%;
}

.contact p{
    color: #2B6708;
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    margin-top: 15px;
}

.contact .book-demo{
    background-image: linear-gradient(to right, #E7391B , #8B1B21);
    padding: 7px 50px 7px 50px;
    color: white;
    font-size: 18px;
    letter-spacing: 5px;
    border-radius: 25px;
    transition: background-image .2s ease;
    position: relative;
    margin-top: 55px;
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    display: inline-block;
}

.contact .book-demo:after{
    content: 'BOOK A DEMO';
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    background-image: linear-gradient(to left, #E7391B , #8B1B21);
    padding: 7px 50px 6.5px 50px;
    color: white;
    font-size: 18px;
    letter-spacing: 5px;
    border-radius: 25px;
    opacity: 0;
    transition: opacity .2s ease;
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    cursor: pointer;
}

.contact .book-demo:hover:after{
    opacity: 1;
}


.contact form{
    padding: 25px;
    border-radius: 10px;
    background-color: #E9E9E9;
    color: #666666;
}

.contact form input[type=text]{
    margin-bottom: 15px;
    width: 100%;
}

.faq{
    background: white;
    padding: 25px;
}


.faq h1{
    text-align: center;
    font-size: 32px;
    color: #2B6708;
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    margin-bottom: 15px;
}

.faq .faq-item{
    display: relative;
    border: 1px solid #5A8F3C;
    border-radius: 25px;
    padding: 10px 20px 7px 20px;
    transition: all .2s ease;
    margin-bottom: 10px;
}

.faq .faq-item .question{
    display: flex;
    cursor: pointer;
    gap: 10px;
    align-items: center;
}

.faq .faq-item .question span{
    font-size: 16px;
    margin-top: -5px;
}

.faq .faq-item .question h2{
    font-size: 18px;
    font-weight: normal;
    color: #2B6708;
    font-family: "Space Grotesk", sans-serif;
}

.faq .faq-item .answer{
    display: none;
}

.faq .faq-item.show .answer{
    display: block;
}

.faq .request-access{
    display: inline;
    margin-top: 50px;
    background-image: linear-gradient(to right, #41B51D , #194701);
    padding: 7px 25px 6px 25px;
    color: white;
    font-size: 18px;
    letter-spacing: 5px;
    border-radius: 25px;
    transition: background-image .2s ease;
    position: relative;
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    cursor: pointer;
}

.faq .request-access:after{
    content: 'REQUEST ACCESS';
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    background-image: linear-gradient(to left, #41B51D , #194701);
    padding: 4px 25px 3px 25px;
    color: white;
    font-size: 18px;
    letter-spacing: 5px;
    border-radius: 25px;
    opacity: 0;
    transition: opacity .2s ease;
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
}

.faq .request-access:hover:after{
    opacity: 1;
}

.tablet-stack{
    display: flex;
    gap: -25%;
}

.tablet-stack{
    background: white;
}

.legislation{
    background: white;
    padding: 25px;
}

.legislation h1{
    text-align: center;
    font-size: 32px;
    color: #2B6708;
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    margin-bottom: 15px;
}

.legislation p{
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.infobox{
    position: relative;

    border-radius: 10px;
    background-image: linear-gradient(to right, #41B51D , #194701);
    margin-top: 50px;
    padding: 15px;
    min-height: 580px;
    max-width: 450px;
}
.infobox.shorter {
    min-height: 465px;
}

.infobox h3{
    margin-top: 10px;
}

.infobox .number{
    position: absolute;
    top: -20px;
    left: 25px;
    width: 42px;
    height: 42px;
    background: #8B1B21;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: white;
}

.infobox .number span{
    margin-left: -2px;
}

.infobox h3{
    color: white;
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 28px;
    margin-bottom: 10px;
}

.infobox .imgsection{
    display: flex;
    gap: 5px;
    color: white;
    margin-bottom: 10px;
}

.infobox .imgsection img{
    width: 42px;
    height: 42px;
}

.legislation .request-access{
    display: inline;
    margin-top: 50px;
    background-image: linear-gradient(to right, #E7391B , #8B1B21);
    padding: 7px 25px 6px 25px;
    color: white;
    font-size: 18px;
    letter-spacing: 5px;
    border-radius: 25px;
    transition: background-image .2s ease;
    position: relative;
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    cursor: pointer;
}

.legislation .request-access:after{
    content: 'REQUEST ACCESS';
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    background-image: linear-gradient(to left, #E7391B , #8B1B21);
    padding: 4px 25px 3px 25px;
    color: white;
    font-size: 18px;
    letter-spacing: 5px;
    border-radius: 25px;
    opacity: 0;
    transition: opacity .2s ease;
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
}

.legislation .request-access:hover:after{
    opacity: 1;
}


.is-height-300{
    max-height: 300px !important;
}