@font-face{
    font-family: 'Oswald';
    src: url('/static/fonts/Oswald-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Raleway';
    src: url('/static/fonts/Raleway-VariableFont_wght.ttf');
}

@font-face{
    font-family: 'Lato';
    src: url('/static/fonts/Lato-Regular.ttf')
}

@font-face {
    font-family: 'Poppins';
    src: url('/static/fonts/Poppins-Medium.ttf');
}

@font-face{
    font-family:'Nunito';
    src: url('/static/fonts/Nunito-VariableFont_wght.ttf');
    font-weight:bold;
}

.image-container{
    position:fixed;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-color:rgb(30, 30, 30);
    color:rgb(30, 30, 30);
    width:100vw;
    height:100vh;
    white-space:nowrap;
    transform: translateY(-100vh);
    z-index:-1;
}

.overlay-text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index:1;
    word-wrap: hidden;
    max-width: 90%;
    text-align:center;
    padding:10px;
}

.overlay-logo{
    border: none;
    width: 400px;
    text-align:left;
}

@media (max-width:550px) {
    .overlay-logo{
        width:250px;
    }
}

#company-history{
    background-color:rgb(240, 240, 240);
    display:flex;
    flex-direction:column;
    text-align:left;
    width:100vw;
    color:rgb(30, 30, 30);
    overflow:hidden;
}

.company-history-grid{
    margin-top:10vh;
    margin-left:5vh;
    margin-right:5vh;
    display: grid;
    column-gap: 30px;
    grid-template-columns: repeat(auto-fit, 500px);
    justify-content: center
}

.unique-container-a{
    width: 480px;
    height: 420px;
    margin-bottom: 0;
    overflow: hidden;
}

.unique-container-a p{
    font-family:'Lato',sans-serif;
    overflow:visible;
}

.unique-container-a h1{
    font-size:100px;
    transform:translateY(-20px);
    line-height:100px;
}

@media (max-width:750px) {
    .company-history-grid{
        margin-top:1rem;
        margin-left:13rem;
        margin-right:0;
    }
    
    #company-history .unique-container-a h1 {
        font-size:65px;
        line-height:65px;
        transform:translateY(0);
    }
    
    #company-history .unique-container-a p {
        font-size:12px;
    }
    
    #company-history .unique-container-a {
        width:280px;
        height:415px;
    }
}

.video-container{
    margin:auto;
    margin-bottom:0;
    border: 5px solid rgb(15, 15, 15);
    text-align: center;
    color:rgb(30, 30, 30);
    background-color:rgb(15,15,15);
    width:50vw;
    aspect-ratio: 16/9;
    object-fit:contain;
}

.unique-container-b{
    width: 100vw;
    height: 13rem;
    background-color: rgb(240, 240, 240);
    text-align: center;
    color: white;
    white-space: nowrap;
    overflow: hidden;
}

.scrolling-text{
    position: relative;
    font-size: 6rem;
    white-space: nowrap;
    transform: translateX(-100%);
    color: white;
    font-family: 'Raleway', sans-serif;
    font-weight: bolder;
}

#mission-vision{
    background-color:rgb(240, 240, 240);
    color:rgb(30, 30, 30);
    display:flex;
    flex-direction:column;
    width:100vw;
    padding-bottom:10vw;
    transition: background-color 0.5s ease, color 0.5s ease;
}

.mission-vision-grid{
    margin-top:5vh;
    margin-left:5vh;
    margin-right:5vh;
    display: grid;
    column-gap: 80px;
    row-gap:50px;
    grid-template-columns: repeat(auto-fit, 500px);
    justify-content: center
}

.unique-container-a.top-text {
    height:520px;
}

.unique-container-a.top-text h1{
    font-size:70px;
}

.unique-container-a.bottom-image{
    overflow:visible;
}

.image-container-a{
    margin:auto;
    text-align: center;
    color:rgb(30, 30, 30);
    background-color:rgb(15,15,15);
    width:50vw;
    object-fit:contain;
    height:500px;
    transform: translateY(10vh);
    margin-bottom:6vh;
    border:3px solid rgb(30, 30, 30);
    width:800px
}

.image-container-a .blob{
    height:200px;
    width:200px;
}

@media (max-width:1170px) and (min-width:751px) {
    #mission-vision .unique-container-a.top-text {
        transform:translateY(430px);
        text-align:center;
    }
    
    #mission-vision .unique-container-a.bottom-image{
        transform:translateY(-500px);
    }
    
    .mission-vision-grid{
        transform:translateY(-50px);
        gap:0;
        grid-template-columns: 1fr;
        margin:auto;
        margin-top:10vh;
    }
    
    #mission-vision{
        padding-bottom:0;
    }
    
    .image-container-a{
        width:500px;
        height:300px;
    }
    
    .image-container-a .blob{
        height:150px;
        width:150px;
    }
}

#important-figures{
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:100vw;
    background-color:rgb(240, 240, 240);
    text-align:center;
    padding-bottom:60px;
    transition: background-color 0.5s ease, color 0.5s ease;
}

.important-figures-grid{
    margin-top:8vh;
    margin-left:10vh;
    margin-right:10vh;
    margin-bottom:10vh;
    display: grid;
    gap: 30px;
    row-gap: 130px;
    grid-template-columns: repeat(auto-fit, 250px);
    justify-content: center
}

.unique-container-c{
    text-align:center;
    line-height:300px;
    width: 250px;
    height: 300px;
    transition: transform ease-in-out 0.2s;
    transform-origin:center;
}

.unique-container-c:hover{
    transform:translateY(-30px);
}

.unique-container-c:hover img{
    animation: shake 0.5s ease-out;
}

@keyframes shake {
    0% { transform: translate(0px, 15px) rotate(10deg); }
    20% { transform: translate(0px, -15px) rotate(-8deg); }
    40% { transform: translate(0px, 10px) rotate(6deg); }
    60% { transform: translate(0px, -7px) rotate(-4deg); }
    80% { transform: translate(0px, 3px) rotate(2deg); }
    100% { transform: translate(0px, 0px) rotate(0deg); }
}

.bottom-text{
    transform: translate(0, -280%);
    line-height:1;
}

#company-culture{
    background-color:rgb(240, 240, 240);
    text-align:center;
    display:flex;
    flex-direction:column;
    width:100vw;
    padding-bottom:6rem;
    color:white;
    transition: background-color 0.5s ease, color 0.5s ease;
    margin-top:-4rem;
}

#company-culture h2 {
    font-family: 'Raleway', sans-serif;
    margin:0 auto;
    padding: 0 2rem;
    font-size:120px;
}

.triple-box-container{
    margin: 5rem auto;
    display:grid;
    column-gap:30px;
    grid-template-columns: repeat(auto-fit, 300px);
    width:1000px;
    justify-content: center;
    justify-items:center;  
}

.unique-container-d{
    background-color:transparent;
    color:inherit;
    text-align:center;
    width: 300px;
    height: 300px;
}

.unique-container-d h1{
    font-family:'Raleway', sans-serif;
    color:greenyellow;
}

.unique-container-d h4{
    font-family:'Lato', sans-serif;
}

@media (max-width:1005px) {
    .triple-box-container{
        grid-template-columns: 1fr;
        margin:auto;
        margin-top:0;
        max-width:500px;
        width:auto;
    }
    
    .unique-container-d{
        padding:0;
        margin:0;
        max-height:300px;
        height:auto;
    }
    
    #company-culture h2{
        margin-top:8rem;
        margin-bottom:4rem;
    }
    
    #company-culture {
        padding-bottom:10rem;
    }
}

@media (max-width:750px) {
    .unique-container-a.top-text{
        width:300px;
        margin:auto;
        transform: translateY(280px);
        text-align:center;
    }
    
    .unique-container-a.top-text h1{
        font-size:40px;
        line-height:40px;
    }
    
    .unique-container-a.top-text p{
        font-size:12px;
    }
    
    .unique-container-a.bottom-image{
        height:180px;
        width:300px;
    }
    
    #mission-vision .unique-container-a.bottom-image{
        transform:translateY(-500px);
    }
    
    .mission-vision-grid{
        transform:translateY(-110px);
        gap:0;
        grid-template-columns: 1fr;
        margin:auto;
        margin-top:10vh;
    }
    
    #mission-vision{
        padding-bottom:0;
    }
    
    .unique-container-a.bottom-image .blob {
        height:80px;
        width:80px;
    }
    
    #company-culture h2{
        font-size:60px;
    }
    
    .image-container-a{
        width:300px;
        height:200px;
    }
    
    .image-container-a .blob{
        height:80px;
        width:80px;
    }
    
    .scrolling-text {
        font-size:4rem;
    }
    
    .unique-container-b{
        height:11rem;
    }
}

#company-principle{
    background-color:rgb(240, 240, 240);
    color:rgb(30, 30, 30);
    display:flex;
    flex-direction:column;
    text-align:left;
    width:100vw;
    padding-bottom:3vh;
}

#faq{
    padding-top:10vh;
    padding-bottom: 15vh;
    margin-bottom:0;
    background-color:rgb(220, 220, 220);
    color:rgb(30, 30, 30);
    text-align:center;
    width:100vw;
    display:flex;
    flex-direction:column;
}

.faq-border{
    width:80vw;
    border-bottom:1px rgb(30, 30, 30) solid;
    margin-right: 10vw;
    margin-left:10vw;
}

.faq-accordion{
    padding-top:10px;
    display:flex;
    width:80vw;
    height:100%;
    justify-content:space-between;
    column-gap:0vw;
    color:rgb(30, 30, 30);
}

.faq-container{
    padding-bottom:0;
    padding-left:3vw;
    margin-bottom:0;
    margin-top:10px;
    height:100%;
    width:100%;
    line-height:auto;
    font-size:24px;
    text-align:left;
}

.flip-button {
    background-color:transparent;
    border:none;
    width:10%;
    margin-top:-0.25rem;
}

.flip-button:hover{
    cursor:pointer;
}

.arrow-image{
    transition: transform 0.2s ease-in-out;
    height:15px;
    margin-top:18px;
    transform: rotate(0deg);
}

.arrow-image.flipped{
    transform: rotate(180deg);
}

.content-show {
    max-height: 2000px;
    font-size: 18px;
    padding-bottom: 7px;
    padding-top: 0;
    transform: none;
}

.content-hide {
    padding: 0;
    margin: 0;
    max-height: 0px;
    font-size: 0px;
}

.content-container {
    display: flex;
    font-size: 18px;
    width: 70vw;
    transition: max-height 0.5s ease-in-out, font-size 0.5s linear;
    text-align: left;
    padding-left: 20px;
    margin-bottom:20px;
    overflow: hidden;
    box-sizing: border-box;
    margin-left: 3vw;
    margin-top: 0;
    padding-top: 0;
    transform: none;
    height: auto;
}

.content-container p{
    font-family: 'Lato', sans-serif;
}

.content-container-grid {
    display: grid;
    margin-left: 5%;
    grid-template-columns: repeat(auto-fit, 50%);
    align-items: start;
    height: auto;
    width: 100%;
}

.content-container-grid > div:first-child {
    transform: none;
}

.faq-image-container{
    width:460px;
    height:260px;
    transform:translateX(130px);
}

@media (max-width: 1100px) {
    .content-container-grid > div:nth-child(2) img {
        display: none;
    }
    
    .content-container-grid {
        grid-template-columns: 100%;
    }
    
    .content-container-grid > div:first-child {
        width: 100%;
    }
}

@media (max-width: 550px) {
    .content-container-grid > div:first-child p {
        font-size:14px;
    }
    
    .faq-container {
        font-size:20px;
    }
    
    .content-container-grid{
        margin-left:0;
    }
}

#certification{
    width:100vw;
    background-color:rgb(240,240,240);
    color:rgb(30,30,30);
    position:relative;
    text-align:center;
    justify-items:center;
    overflow:hidden;
    padding-top:10vh;
    padding-bottom:5vh;
}

.certification-header{
    margin:auto;
    width:auto;
    max-width:100vw;
    font-size:50px;
    font-family: 'Oswald', sans-serif;
    font-weight:bolder;
    line-height:100px;
}

.certification-body{
    margin:auto;
    width:auto;
    max-width:800px;
    padding: 0 50px;
    font-size:18px;
    font-family: 'Lato', sans-serif;
}

.logo-grid{
    max-width:500px;
    width:100%;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, 200px);
    justify-content: center;
    text-align:center;
    align-items: center;
    place-items:center;
    grid-template-rows:auto;
    padding-top:30px;
    padding-bottom:80px;
}

.logo-container{
    align-self:center;
    height:200px;
    width:200px;
}

@media (max-width:750px) and (min-width:501px) {
    .certification-header{
        font-size:35px;
        line-height:65px;
    }
    
    .certification-body{
        font-size:16px;
    }
    
    .logo-grid{
        grid-template-columns: repeat(2, 150px);
    }
    
    .logo-container{
        height:150px;
        width:150px;
    }
}

@media (max-width:500px) {
    .certification-header{
        font-size:25px;
        line-height:50px;
    }
    
    .certification-body{
        font-size:14px;
        padding:0 25px;
    }
    
    .logo-grid{
        grid-template-columns: repeat(2, 120px);
    }
    
    .logo-container{
        height:120px;
        width:120px;
    }
    
    #certification{
        padding-top:4rem;
        padding-bottom:1rem;
    }
}