@import url("/_assets/css/__root.css");
@import url("/_assets/css/__template.css");

#hero {
    width: 100%;
    height: 50vh;
    overflow: hidden;
}

#hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

section {
    width: 100%;
}

#company {
    padding: 5rem 0 3rem 0;
}

#title {
    font-size: 2rem;
    text-align: center;
    font-family: Cunia, Calibri, sans-serif;
}

@media (max-width: 1300px) {
    #company {
        padding: 4rem 0 2rem 0;
    }
}

/*  Main-Section ----------------------------------------------------------------- */

#main-section {
    padding: 2rem 0;
}

#main-container {
    width: 90%;
    height: 100%;
    display: grid;
    grid-template-columns: 2fr 5fr 1fr;
    gap: 2rem;
}

@media (max-width: 1300px){
    #main-container {
        grid-template-columns: 1fr;
        width: 100%;
    }
}

.grid {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

#products {
    background-color: var(--color-lightgrey);
    padding: 3rem 2rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-link {
    position: relative;
    color: white;
    display: block;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    overflow: hidden;
    font-family: Cunia, Calibri, sans-serif;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.product-link img {
    display: none;
}

.product-link p {
    background: var(--color-main);
    display: block;
    width: 100%;
    height: 100%;
    padding: 15px 35px;
}

.product-link p:hover {
    background: var(--color-highlight);
}

.subtitle {
    font-family: Cunia, Calibri, sans-serif;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 1rem;
}

#certification-images {
    text-align: center;
}

#certification-images img {
    height: 4rem;
    margin: 0 .25rem;
}

@media (max-width: 1300px) {
    .grid {
        border-radius: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
    }

    #products {
        background-color: inherit;
        padding: 1rem 1%;
    }
    
    .product-link {
        height: 15rem;
        overflow: hidden;
        margin-bottom: .5rem;
        border: 1px solid var(--color-lightgrey);
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
}
    
    .product-link img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }

    .product-link p {
        background: none;
        color: white;
        z-index: 999;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        text-shadow: 5px 5px 5px rgba(0,0,0,0.8);
    }

    .product-link p:hover {
        background-color: rgba(0,0,0,0.5);
        color: var(--color-highlight);
        transition: all .3s;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;
    }
}

@media (max-width: 768px) {
    #main-container {
        grid-template-columns: 1fr;
        width: 100%;
    }

    #products {
        padding: 1rem 1%;
    }

    .product-link {
        height: 10rem;
        margin-bottom: .25rem;
    }

    .product-link:last-of-type {
        margin-bottom: 2rem;
    }

    #certification-images img {
        height: 6rem;
        margin: 1rem;
    }
}

#data {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
}

.data-box {
    width: 100%;
    height: 100%;
    padding: 4rem 4rem;
    background-color: var(--color-lightgrey);
    margin-bottom: 2rem;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

#data hr {
    display: none;
}

.data-box h2, .data-box h3 {
    font-family: Cunia, Calibri, sans-serif;
    text-transform: uppercase;
    font-size: 1.5rem;
    margin-bottom: .5rem;
    text-align: center;
}

.data-box h2 {
    font-size: 2rem;
}

.data-box h3 {
    color: var(--color-main);
    margin-bottom: 3rem;
}

.data-box p, .data-box a {
    font-family: Calibri, sans-serif;
    font-size: 1.5rem;
    text-align: justify;
    margin-bottom: 1.5rem;
}

.data-box ul {
    margin: 1.5rem 0;
    font-family: Calibri, sans-serif;
    font-size: 1.5rem;
    text-align: justify;
    margin-bottom: 1.5rem;
    color: var(--color-main);
}

.data-box li {
    list-style: none;
    line-height: 1.5;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.data-box li i {
    margin-right: 1.5rem;
    padding-top: .5rem;
}

.data-box a {
    color: var(--color-main);
    font-size: 1.25rem;
}

.data-box a:hover {
    border-bottom: 1px solid var(--color-highlight);
    color: var(--color-highlight);
}

@media (max-width: 1300px) {
    #data {
        display: block;
    }

    .data-box {
        height: fit-content;
        padding: 4rem 7.5% 4rem 7.5%;
        background-color: white;
        margin-bottom: 0;
        border-radius: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
    }

    .data-box:last-of-type {
        padding-bottom: 4rem;
    }

    #data hr {
        display: block;
        width: 90%;
        margin: 0 auto;
    }

    .data-box li {
        margin-bottom: 1rem;
        text-align: left;
        font-size: 1.25rem;
    }

    .data-box a {
        color: white;
        padding: 10px 25px;
        background-color: var(--color-main);
        display: block;
        width: fit-content;
        margin: 3rem auto 0 auto;
        border: 1px solid var(--color-main);
    }

    .data-box a:hover {
        background-color: var(--color-lightgrey);
    }
}

#contact {
    background-color: var(--color-lightgrey);
    padding: 3rem 2rem 2rem 2rem;
}

#contact * {
    display: block;
}

.subheading {
    font-family: Cunia, Calibri, sans-serif;
    text-transform: uppercase;
    margin-bottom: .5rem;
    font-size: 1.5rem;
}

#contact p, .contact-links {
    font-family: Cunia, Calibri, sans-serif;
    font-size: 1.3rem;
    margin-bottom: .5rem;
    color: var(--color-main);
}

#contact div {
    margin-bottom: 1rem;
}

#contact .contact-btn {
    background-color: var(--color-main);
    color: white;
    padding: 15px 0;
    text-transform: uppercase;
    font-family: Cunia, Calibri, sans-serif;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

#contact .contact-btn:hover {
    background-color: var(--color-highlight);
}

#contact hr {
    margin: 2rem 0;
}

#contact ul {
    margin: 1rem 0;
}

#contact li {
    margin-bottom: .5rem;
    font-size: 1.2rem;
}

#contact li i {
    display: inline-block;
    margin-right: .5rem;
    color: var(--color-main);
    font-size: 1.2rem;
}

@media (max-width: 1300px){
    #contact {
        width: 80%;
        margin: 0 auto;
        min-width: 400px;
        max-width: 600px;
    }

    #contact .contact-btn {
        padding: 10px 0;
    }
}

@media (max-width: 768px){
    #contact {
        width: 100%;
        min-width: 0;
    }
}

/* FORM SECTION --------------------------------------------------------------- */

#form-section {
    background-color: var(--color-main);
    padding: 8rem 2rem 5rem 2rem;
    font-size: 1.5rem;
}

#form-section-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: white;
    gap: 5rem;
}

#form-grid-label {
    width: 50%;
}

#form-grid-label h3 {
    font-family: Cunia, Calibri, sans-serif;
    text-transform: uppercase;
    font-size: 3rem;
    margin-bottom: 3rem;
}

#form-grid-label p {
    margin-bottom: .5rem;
}

#form-grid-label address {
    margin-bottom: 2rem;
}

#form-grid-form * {
    display: block;
}

#form-grid-form {
    width: 50%;
}

#form-grid-form label {
    font-family: Cunia, Calibri, sans-serif;
    text-transform: uppercase;
    margin-bottom: .5rem;
}

#form-grid-form input {
    font-family: Calibri, sans-serif;
    margin-bottom: 1.5rem;
    padding: .5rem 1rem;
    font-size: 1.5rem;
    width: 100%;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

#form-grid-form textarea {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    min-height: 20rem;
    max-height: 40rem;
    margin-bottom: 2rem;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

#form-submit {
    background-color: var(--color-highlight);
    color: white;
    cursor: pointer;
}

#form-submit:hover {
    background-color: #ff7f50;
}

@media (max-width: 1100px){
    #form-section {
        padding: 5rem 5%;
        font-size: 1.25rem;
    }
    
    #form-section-container {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    #form-grid-form, #form-grid-label {
        width: 100%;
    }
}

/* FAQS ---------------------------------------------------------------- */

#faqs {
    padding: 5rem 0 3rem 0;
}

.section-title {
    color: var(--color-main);
    font-family: Cunia, Calibri, sans-serif;
    font-size: 3rem;
    margin-bottom: 2rem;
}

#faq-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
}

.faq {
    width: 100%;
    margin-bottom: 2rem;
}

.question {
    font-size: 1.8rem;
    color: var(--color-main);
    cursor: pointer;
    border-bottom: 1px solid var(--color-main);
}

.question:hover {
    font-weight: 600;
}

.answer {
    padding-top: .5rem;
    font-size: 1.25rem;
    color: rgb(50,50,50);
    max-height: 0;
    overflow: hidden;
    transition: 0.3s all;
    -webkit-transition: 0.3s all;
    -moz-transition: 0.3s all;
    -ms-transition: 0.3s all;
    -o-transition: 0.3s all;
}

.answer a {
    color: var(--color-highlight)
}

.answer a:hover {
    text-decoration: underline;
}

.faq input:checked + .answer {
    max-height: 500px;
    transform: 0.3s all;
    -webkit-transform: 0.3s all;
    -moz-transform: 0.3s all;
    -ms-transform: 0.3s all;
    -o-transform: 0.3s all;
}

@media (max-width: 1300px){
    #faq-content {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .faq {
        padding-left: 1.5rem;
        width: 98%;
    }
}

@media (max-width: 768px){
    .question {
        font-size: 1.3rem;
    }

    .section-title {
        padding-left: 1.5rem;
    }
}