/*
Theme Name: Hemvist
Text Domain: pz-hemvist
Version: 2.0
Tested up to: 6.0
Requires at least: 4.7
Requires PHP: 5.2.4
Description: 
Tags: line producer
Author: Pooja Patel
Author URI: https://wordpress.org/
Theme URI: https://wordpress.org/themes/hemvist/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

All files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned
with others.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

	0. 	CSS Reset
	1. 	Document Setup
	2. 	Element Base
	3. 	Helper Classes
	4. 	Site Header
	5. 	Menu Modal
	6. 	Search Modal
	7. 	Page Templates
		a. 	Template: Cover Template
		c. 	Template: Full Width
	8.  Post: Archive
	9.  Post: Single
	10. Blocks
	11. Entry Content
	12. Comments
	13. Site Pagination
	14. Error 404
	15. Widgets
	16. Site Footer
	17. Media Queries

----------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------- */

/*	0. CSS Reset
/* -------------------------------------------------------------------------- */



@import url('https://fonts.googleapis.com/css2?family=Kanit&family=Noto+Sans&family=Poppins:wght@200&display=swap');


/* ----------- Variables ------------ */

:root{
    /* colors */
   --darkgrey : rgb(51, 51, 51);
   --mediumgrey : rgb(128, 128, 128);
   --lightgrey: rgb(200, 200, 200);
    --red : rgb(173, 0, 0);
    --white : rgb(255, 255, 255);
    --black : rgb(0, 0, 0);

    /* font family */
    --font-poppins : 'Poppins', 'sans-serif';
    --font-kanit : 'Kanit', 'sans-serif';
    --font-noto : 'Noto Sans', 'sans-serif';

    /* images */
    --header-img: url('./assets/images/header_image.jpg');
    --homepage-1: url('./assets/images/homepage_1.jpg');
    --homepage-2: url('./assets/images/homepage_2.jpg');
    --homepage-3: url('./assets/images/homepage_3.jpg');
}

* > * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
}

ul {
    list-style-type:none;
}

/* ----------- /Variables ------------ */

/* ----------- Global Classes ------------ */

.text-black{
    color: var(--black);
}

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

.text-red{
    color: var(--red);
}

.bg-white{
    background: var(--white);
}

.bg-dgrey{
    background: var(--darkgrey);
} 

.bg-lgrey{
    background-color: var(--lightgrey);
} 

.bg-black {
    background-color: var(--black);
}

.font-poppins{
    font-family: var(--font-poppins);
}

.font-kanit{
    font-family: var(--font-kanit);
}

.font-noto{
    font-family: var(--font-noto);
}

.text-left{
    text-align: left;
}

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

.text-header{
    font-size: 3em !important;
}

.flex{
    display: flex;
}

.flex-row{
    flex-direction: row;
}

.flex-column{
    flex-direction: column;
}

.flex-initial{
    flex: 0 1 auto;
}

.flex-grow{
    flex-grow: 1;
}

.justify-center{
    justify-content: center;
}

.container{
    width: 100%;
}

.container-fluid{
    width: 98%;
}

.mx-auto{
    margin-left: auto;
    margin-right: auto;
}

.link:hover{
    color: var(--red);
}

.font-xsm {
    font-size: 15px;
}

.font-sm {
    font-size: 20px;
}

.font-md {
    font-size: 30px;
}

.font-lg {
    font-size: 40px;
}

.font-xlg {
	font-size: 50px;
}

.link {
    color: var(--black);
}

.align-center {
    align-self: center;
}
.align-top {
    align-self: flex-start;
}
.py-2 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-5 {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem; 
}
.pt-5 {
    padding-top: 1.5rem;
}

.ml-5 {
	margin-left: 1.5rem;
}

.pb-5 {
    padding-bottom: 1.5rem;
}
.flex3 .pb-6 {
    padding-bottom: 2.7rem;
}
.pb-10 {
    padding-bottom: 4.5rem;
}

.py-10 {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}

.px-5 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.px-10 {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
}



/* ----------- /Global Classes ------------ */



/* ----------- Navigation ------------ */

#nav {
    position: absolute;
    padding: 1rem 1.5rem;
    width: 100%;
    /* background: var(--lightgrey); */
}

.brand  {
    font-size: 30px;
    position: relative;
    top: -13px;
}

#nav .nav-items > ul{
    justify-content: end;
}

#nav .nav-items > ul > li{
    padding-left: 5px;
    padding-right: 5px;
    font-size: 20px;
}

.custom-logo {
   width: 100px;
   height: auto;
   margin-right: 0.5rem;
}
.divider{
    border-width: 0;
    height: 2px;
    width: 50%;
    background-color: var(--red); justify-content: center; 
    margin:auto;
}


/* ----------- /Navigation ------------ */

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

.header-img {
    width: 100%;
    background: var(--header-img) no-repeat;
    /*background-color: var(--lightgrey);*/
    background-position: center;
    height: 90vh;
    justify-content: center;
}
.teamscontainer {
    display: flex;
    align-items: center;
    justify-content: center;
}
.teams {
    font-size: 60px;
    align-self: center;
    margin: 0 auto;
    position: relative;
    top: 200px;
}

#commitment {
    /* max-width: 700px; */
    justify-content: center;
    margin: auto;
}

.box1 {
    padding: 50px;
}

.box2 {
    padding-top: 0px;
    padding-bottom: 50px;
    padding-left: 50px;
    padding-right: 50px;
}

.box3 {
    padding-top: 0px;
    padding-bottom: 50px;
    padding-left: 50px;
    padding-right: 50px;
}

.image1 {
    max-width: 100%;
    display: block;
    margin: auto;
    /* padding-bottom: 30px; */
    color: var(--lightgrey);
    box-shadow: 15px -20px;
}

.image2 {
    max-width: 100%;
    display: block;
    margin: auto;
    /* padding-bottom: 30px; */
    color: var(--lightgrey);
    box-shadow: -15px -20px;

}
.image4 {
    max-width: 300px;
    display: block;
    /* margin: auto; */
    /* padding-bottom: 30px; */
    color: var(--lightgrey);
    box-shadow: 10px -10px;

}
.content {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}
.content2 {
    padding-top: 1.5rem;
}
.impressum {
    display: block;
    margin-left: 50px;
    padding-top: 50px;
    padding-bottom: 50px;
}
.dividersm{
    border-width: 0;
    height: 1px;
    width: 50%;
    background-color: var(--red); justify-content: center; align-items:flex-end; margin:auto
}


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

/* ----------- Media Query ------------ */

@media(min-width:640px){
    .brand  {
        font-size: 50px;
        position: relative;
        top: -22px;
    }

    #nav .nav-items > ul > li{
        padding-left: 20px;
        padding-right: 20px;
        font-size: 30px;
    }
	
	.ml-5 {
		margin-left: 3rem;
}
    
	

}

@media(min-width:1040px){
    .custom-logo {
        width: 100px;
    }
    .teams {
        position: relative;
        top: 200px;
        font-size:90px;
    }  

    .box1 {
        display:flex;
        gap: 70px;
        max-width: 1050px;
        margin:auto;
        align-items: flex-start;
    }

    .box2 {
        display: flex;
        flex-direction: row-reverse;
        gap: 70px;
        max-width: 1050px;
        margin:auto;
        padding-top:50px;
    }

    .box3 {
        display:flex;
        gap: 70px;
        max-width: 1050px;
        margin:auto;
        padding-top:50px;
    }


    .txt-align-right {
        text-align: right;
    }

    .content {
        padding-bottom: 90px;
    }

    .text-up {
        position:relative;
        top: -40px;
    }

    .content2{
        padding-top: 0px;
        position: relative;
        top: -35px;
    }

    .darksection {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .whatwedo {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: auto;
        flex-wrap: wrap;
    }
	
	.whatwedo2 {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: auto;
        flex-wrap: wrap;
    }
	
	.fillerbox {
		width: 500px;
	}

    .flex1 {
        max-width: 500px;
        padding-bottom: 2.5rem;
        
    }

    .flex2 {
        max-width: 500px;
		padding-bottom: 2.5rem;
       
    }

    .flex3{
        max-width: 500px;
        padding-top: 0px;
		padding-bottom: 2.5rem;
    }
    .header-img {
        background-size:cover;
        height: 100vh;
    }
     .image4 {
        box-shadow: 20px -20px;
    }
    .flex2 h1{display: none;}
    .flex3 h1{display: none;}
    .lg-download.lg-icon{display:none;}

@media(min-width:1600px){
    .header-img {
        height: 80vh;
    }

    .teams {
        position: relative;
        top: 250px;
    }
}
}

/* ----------- /Media Query ------------ */