* {
    scroll-behavior: smooth;
}

* h1, h2, h3, h4, h5 {
    font-family: new icon serif;
    font-weight: 500;
}

* h2, h3 {
    font-size: xx-large;
}

* p {
    font-family: 'Times New Roman', Times, serif;
    font-size: large;
}

* img {
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

body {
    background-color: #F2F2F2;
    height: 100vh; 

    margin: 0%;
    padding: 0%;
    

    display: grid; 
    grid-template-columns: 
        1fr
        repeat(4,minmax(0,272px))
        1fr 
    ;
    grid-gap: 0px; 
    grid-template-rows:
        1fr
        84svh
        45px
        1fr
        1fr
        50px
        1fr
        1fr
        1fr
        1fr
        60px
    ;
    grid-template-areas: 
        "header header header header header header"
        "intro intro intro intro intro intro"
        "ST ST ST ST ST ST"
        "mainContainer mainContainer mainContainer mainContainer mainContainer mainContainer"
        "services services services services services services"
        "ft ft ft ft ft ft"
        "display display display display display display"
        "KW KW KW KW KW KW"
        "MC MC MC MC MC MC"
        "footer footer footer footer footer footer"
        "credit credit credit credit credit credit"
        ;

       
    color: #0C0C0C;
}


/*____________HEADER___________*/
header{
    grid-area: header;
    padding: 16px 0px;
    width: 100%;
    background-color: #040404;
}
    header img {
        width: 180px;
        margin: 10px 0 0 8px;
    }


/*____________NAV & Burgermenu___________*/
nav{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 8px;
}
.navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
.tab-nav{
    outline: none;
    display: none;
}
.label{
    display: none;
    color: #F4F1EB;
}
.burger{
    width: 30px;
    height: 2px;
    background-color: #F4F1EB;
    margin-top: 5px;
}
.content_nav {
    grid-column: 3;
    list-style: none;
    margin: 0;
    padding: 0;
    
}
    .content_nav li {
        display: inline-block;
    }
        .content_nav li a {
            text-decoration: none;
            color: #F4F1EB;
            padding: 8px;
            font-family: new icon serif;
        }  
        .content_nav li a:hover {
            font-style: italic;
        }


  

#intro__display {
    grid-area: intro;
}

#hero_section {
    color: #F4F1EB;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background: url("../images/Homepage-Background-mockup.png") repeat 0 0;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        filter: grayscale(100%);
}
        #hero_section_text {
            text-align: center;
            width: 70%;
        }


#scrolling_text {
    grid-area: ST;
    overflow: hidden;
    display: flex;
    white-space: nowrap;
    align-items: center;
    background-color: #02110C;
}
    .text {
        animation: animate_text 32s linear infinite;
        font-family: new icon serif;
        font-weight: bold;
        color: #48897B;
    }
        .text span {
            margin: 0 50px;
        }

        @keyframes animate_text {
            from {
              transform: translate3d(0, 0, 0);
            }
            to {
              transform: translate3d(-100%, 0, 0);
            }
        }



#mainContainer {
    grid-area: mainContainer;
    padding: 3%;
    display: flex;
    justify-content: center;
    align-items: center;

}
    .mainContainerBox {
        width: 50%;
    }
        #mainBoxImg{
            align-items: right;
            display: flex;
            justify-content: right;
        }
            #mainBoxImg img {
                width: 60%;
            }
            .mainContainerBox p {
                width: 70%;
            }

        
#servicesContainer {
    grid-area: services;
    display: flex;
    justify-content:space-between;
    align-items: center;
    color: #e4e4e4;
    background-color: #02110C;
}
    .servicesContainerBox {
        width: 50%;
        padding: 5% 3%;
    }

    #serviceBoxImg {
        background: url("../images/stemnings-img.png") repeat 0 0;
        height: 100%; 
        width: 50%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
 
.collapsible {
    background-color: transparent; 
    color: #e4e4e4;

    cursor: pointer;
    padding: 3% 0;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;

    font-size: larger;
    font-family: new icon serif;
}
    
    .collapsible:after {
        content: '\002B';
        color: #e4e4e4;
        font-weight: bold;
        float: right;
    }
    
    .active:after {
        content: "\2212";
    }
    
    .content {
        padding: 0 18px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        border-bottom: 1px solid #e4e4e4;
    }
        .content a, .content p {
            color: #e4e4e4;
        }


#featured_projects_container {
    grid-area: ft;
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 4% 3% 0 3% ;
}


    #display__cases {
        grid-area: display;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 4%;
    }
    .caseContainer {
        margin: 0 15px;
        width: 340px;
        height: fit-content;
        border-bottom: #02110C solid 1px;
    }
        .caseContainer__img {
            height: 500px;
        }
        .caseContainer__img img{
            height: 100%;
            transition: 5s; 
            filter: grayscale(90%);
            -webkit-filter: grayscale(90%);
            -webkit-transition: all 0.5s ease;
        }
            .caseContainer__img img:hover{
                filter: grayscale(0%);
                -webkit-filter: grayscale(0%);
            }

        .caseContainer__info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: fit-content;
        }
        .caseContainer__info p{
            font-size: medium;
            text-align: right;
    		font-family: new icon serif;
        }

      
#slideshow-container{
    grid-area: KW;
    background-color: #0C0C0C;
    color: white;
    font-size: large;
    position: relative;
}
#slideshow-container h2 {
    display: flex;
    justify-content: center;
    padding-top: 20px;
}
#slideshow-container q {
    font-style: italic;
    font-size: larger;
}
  .mySlides {
    display: none;
    padding: 80px;
    text-align: center; 
    font-size: large;
  }
  
  .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -30px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }
  .next {
    position: absolute;
    right: 0;
    border-radius: 3px 0 0 3px;
  }
    .author a, .author {
        color: white;
        font-family: new icon serif;
    }


.enquire-container {
    grid-area: MC;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;   
    background-color: #1F030C;
    
    padding: 3%;

    }
        .enquire-box {
            width: 50%;
        }
    
    .secondary-btn {
        padding: 14px 16px 10px 0%;
        color: #ffffff;
        font-family: New icon serif;
    }
       
        

footer {
    grid-area: footer;
    background-color: #000000;
    color: #FFF;
    padding: 4%;

    display: flex;
    justify-content: space-between;
}


.footer_nav_info {
    list-style-type: none;
    margin: 5px;
    padding: 0%;
}


.footer_box {
    margin: 0 10px;
}
.footer_box h3 {
    font-family: new icon serif;
    font-weight: 500;
    
    margin: 0%;
    margin-top: 30px;
}
    .footer_nav_info a{
        text-decoration: none;
        color: #E0E0E0;
    }

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

    .footer_logo_box {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: space-evenly;
        margin: 0 100px;
        width: 40%;
    }

    .footerLogo {
        width: 200px;
    }
    .footer_logo_wrap {
        font-style: italic;
    }

    div.navigate {order:1;}
    div.connect {order:2;}
    div.logoOrder {order:3;}
    div.contact {order:4;}
    div.addi {order:5;}


#credit {
    grid-area: credit;
    background-color: #000705;
    color: #48897B;
    font-size: small;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    height: fit-content;
}

#credit h3 {
    font-family: 'Times New Roman', Times, serif;
    font-size: small;
}



@media screen and (min-width: 370px) and (max-width: 767px) { /*PHONE, MB*/
    .content_nav{
        padding-right: 12px;
    }
    .content_nav li{
        padding-left: 12px;
    }
    .label{
        display: grid;
        cursor: pointer;
        grid-column: 3;
        padding-right: 20px;
    }

    .content_nav{
        display: grid;
        grid-template-columns: 1fr;
        grid-column: 1/4;
        
        padding-left: 10px;
        text-align: center;
        max-height: 0;
        overflow: hidden;
        transition: all ease-in-out 0.6s;
    }
    .nav_checkbox input:checked ~ .content_nav{
        max-height: 500px;
    }
    .content_nav li{
        padding: 15px 0px;
    }



#mainContainer {
    flex-direction: column;
}
    .mainContainerBox, #mainBoxImg img, .mainContainerBox p {
        width: 100%;
    }

 #hero_section_text {
   text-align: center;
   width: 82%;
   font-size: small;
  }

#servicesContainer {
    flex-direction: column;
}
    .servicesContainerBox, #serviceBoxImg {
        width: auto;
    }

    
    #serviceBoxImg img {
        width: 40%;
        padding: 5% 0;
    }


    #display__cases {
        flex-direction: column;
    }
        .caseContainer {
                margin: 18px 0;
            }

.enquire-container {
    flex-direction: column;
    }
        .enquire-box, .enquire-img {
            width: 100%;
        }


    footer {
        flex-direction: column;
    }
}



@media screen and (min-width: 768px) and (max-width: 1024px) { /*TABLET*/
    .mainContainerBox {
        width: 100%;
    }
    #mainBoxImg img, .mainContainerBox p {
        width: 90%;
    }

        
        .service-box {
            width: 70%;
            margin: 40px 0px;
        }

}



@media screen and (min-width: 300px) and (max-width: 1000px) { /*LAPTOP, PC*/
    #intro__display {
        flex-direction: column;
    }
        #hero_section, #hero_img_section {
            width: auto;
            
        }

footer {
    flex-direction: column;
    margin-top: 0%;
}



.footer_logo_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    justify-content: space-evenly;

}


    .footer_logo_box {
        width: 100%;
        padding: 30px 0px;
        margin: 0;
    }


.navigate {order:2;}
.connect {order:3;}
.logoOrder {order:1;}
.contact {order:4;}
.addi {order:5;}
}