/* 
Default style for home page and other pages that include nav/footer 

*/
:root{
    --accent: hsl(156, 82%, 32%);
    --accent-dark:  hsl(156, 82%, 20%);
    --primary-bg: #fff;
    --default-font-size: clamp(18px, 1.5vw, 40px);
    --default-h1-size: clamp(25px, 2.9vw, 50px);
    --default-h2-size: clamp(20px, 2vw, 40px);
    --font: "Montserrat", "Poppins", arial; /*poppins Montserrat*/
    --gray-shade: #666;
    --color-for-light-mode: #303030;
    --color-for-dark-mode: #a2a2a2;

}


/* bold span  / elemnt */
.inline-style--bold{
    font-weight: 700;
    color: var(--accent)
}
   
.inline-style--underline{
    display: inline-block;
    border-bottom: 2px solid var(--accent);
    color: white;
}

/* global default style for h2 */
h2 {
    font-size: var(--default-h2-size);
    color: var(--color-for-light-mode);
    margin: 0;
    font-weight: 500;
}



div, h1, p, section, a, ol, li{
    color: var(--color-for-light-mode);
    margin: 0;

}

 p, li{
    font-size: var(--default-font-size);
 }


 p, div, li{
    font-weight: 500;
 }

html{
    scroll-behavior: smooth;
    /* smooth scroll to #id when using internal link */
}
body{
    background: var(--primary-bg);
    margin: 0;
    padding: 0;
    font-family: var(--font);
    height: 100%;
    width:100%

}


*{
    box-sizing: border-box
}


/* when ther eare multipel call to action buttons next to each other*/
.cta-btn-grouper{
    display: flex;
    gap: 10px;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    align-items: center;

}


/* call to action button */

.cta-btn{
    
    text-decoration:none;
    text-align: center;
    font-weight: 500;
    font-size: 18px;
    display: inline-block;
    border: none;
    border-radius: 50px;
    padding: 12px 22px;
    background: rgb(66, 66, 66);
    color: white;
    cursor: pointer;
    line-height: normal;
    
    
}

.cta-btn--primary{
    color: white;
    background: var(--accent-dark);
}


.cta-btn--secondary{
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent)
    
}

.cta-btn:hover{
    
    opacity: 0.5;

    
}



nav{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    margin: 0 auto;
    height: 100px;
    padding: 0px 5%;
    align-content: center
    
}


.nav-links{
    width: 65%;
    display: flex;
    justify-content: space-around;
}

nav .logo img{
    height: 50px;
    width: auto;
}

nav a{
    text-decoration: none;
}


nav ul{
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 0;
    margin: 0
}

nav ul li{
    list-style-type: none;
    display: block;
    
}


nav ul li a {
    text-decoration: none;
    padding: 5px;
    font-size: 21px;
    display: block;
    text-transform: uppercase;
    font-family: var(--font);
    font-weight: 500;
    position: relative;
    
}


nav ul li a {

    position: relative;
    z-index: 2

}

/* active nav gar button. example home, projects */
.active-page:after{
    height: 2px;
    width: 0;
    position: absolute;
    content: "";
    background: #777;
    left: 0;
    bottom: 0;
    animation: animate-active 0.5s 1 forwards;
}

    /* make underline animation */
    @keyframes animate-active{
        100%{
            width: 100%;
        }
    }


    
nav ul li a:hover{
    opacity: 0.5
}


 /* ... */


nav .menu-button {
    background: #f0f0f0;
    color: black;
    padding: 10px;
    /* display: none; */
    display: none;
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 350px;
    flex-shrink: 0;
    align-content: center;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;

}


/* visible on mobile */
.active-nav-links{
    animation-name: anim 0.34s forwards;
    box-shadow: 14px 20px 20px 0px #00000052;
    z-index: 3
}


/* slide open the navigation menu from left to right */
@keyframes anim{
    0% {
    left: -50%;
    }

    100% {
        left: 0;
    }
}

/* slide back out */
@keyframes go-back{
0% {
    left: 0;
}
100% {
    left: -50%;
}

}


/* for screens less than 600px (mobile and small tablets)*/
@media screen and (max-width: 600px) {
nav{
    width: 100%;
    height: 67px;
}

nav .nav-links{
    top: 60px!important;
}
section.intro{
    height:calc(100vh - 67px);
 } 

    /* if it supports svh change the size to that, important for mobile device browsers becaus eof hte browser navigation bars that appear/disappear when scrolling up/down*/
    @supports (height: 100svh) {
        section.intro{
           height:calc(100svh - 67px)!important;
        }   
      }


}

/* tablets */
@media screen and (max-width: 900px) {

    nav {
        justify-content: space-between;

    }

    nav .menu-button{
        display: block;
    }

    nav ul{
        display: block;
    }


    nav .nav-links{
        display: flex;
        justify-content: start;
        flex-direction: column;
        display: block !important;
        top: 68px;
        background: rgba(255, 255, 255, 0.9);
        position: absolute;
        height: 100vh;
        width: 50vw;
        left: -50%;
        padding:20px;
        
    }

    nav ul li{
        margin-top: 20px;
    }

   

  }


/* next */





main {
    min-height: 100vh; /* prevent the footer being in the middle of the page if not enough content inside main */
}

/*main consistent area of content for all pages */
.top-section{
    padding: 5px 15%;
    background: white;
}

h1 {
    margin: 0;
}

section h1{
    color:var(--color-for-light-mode);
    font-size: var(--default-h1-size);
    font-weight: 400;
    text-align: center;
    margin-top: 30px;
}


p {
    font-size: var(--default-font-size);
}

.default-a{
    text-decoration: none;
    color: var(--accent)

}


/* hero */
section.intro{
    width: auto;
    padding: 0;
    gap: 2vw;
    align-items: center;
    position: relative;
    height: calc(100vh - 100px)

    
}


/* account for the extra browser navigation space on mobile device browsers */
@supports (height: 100svh) {
  section.intro{
     height:calc(100svh - 100px);
  }   
}



.intro-left {
    height: 100%;
}

.in-bottom{
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: end;
    width: 100%;
    height: 75%;
    align-items: center;
    padding: 50px 15vw;
    background:linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.95) 65%);

}


.in-bottom > div.button{
    flex:  0 0 auto;
    display: flex;
    justify-content: center;;
}

.in-bottom p, .in-bottom h1{
    text-align: center;
    margin: 0;
    color: white;
    font-family: "Montserrat", arial
}

.in-bottom p{
    font-weight: 500;
}

.in-bottom h1{
    font-weight: 700;
    font-size: clamp(30px, 4vw, 100px)
}


.in img{
    height: 100%;
    width: 100%;
    
    object-fit: cover;
    padding: 0;
    overflow: hidden;

}



section.intro a{

   font-size: 20px;

}

section.intro a:hover{
    opacity: 0.75
}






/* new */
/* bottom logo */

.footer-logo-image-section div{
    display: flex;
    justify-content: center;
    align-items: center;
    padding:10px;
    width:100%;
}





  @media screen and (max-width: 900px) {
    .top-section {
      padding-left: 12px;
      padding-right: 12px;
    }
    .in-bottom{
        
        padding: 50px 5vw;
        background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.89) 45%)

    } 

    .in-bottom h1{
        font-size: clamp(30px, 6vw, 100px)
    }




  }



/* NEW */
/* FOOTER */

footer{
    width: 100vw;
    background: rgb(255, 255, 255);
    min-height: 100px;
    padding-top: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: white;
    border-top: 1px solid #ccc;
}



footer div{
   
    display: flex;
    flex-direction: row;
    justify-content: center;
    
}

footer .footer-sub-section-title{
    padding: 15px 0
}

footer > div:nth-child(1){
    gap: 30px 5.5vw;
    padding: 15px;
    flex-wrap: wrap;
    
}

footer ul{
    display: flex;
    flex-direction: column;
    padding: 0;
}

footer ul li{
    list-style-type: none;
}
footer ul li a{
    text-decoration: none;
    color: var(--color-for-light-mode);
    padding: 5px 0;
    font-size: 18px;
    display: block;
    /* font-weight: bold; */
    font-family: var(--font);

}

footer div ul p{
    font-size: var(--default-font-size);
    font-weight: 600;
    
}

footer p i{
    font-size: 50px;
}


footer div > p{
    padding: 0px 30px 40px 30px;
    font-size: calc(var(--default-font-size) - 3px);
    margin-bottom:20px;
    text-align: center;
    color: var(--color-for-light-mode)

}
footer div p span, .phone-number {
    color: var(--accent);
    display: inline-block;
}



.footer-socials{
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 30px;
    margin-bottom: 30px;

}

.footer-socials img{
    width: 50px;
    border-radius: 10px;
    height: 50px;
    /* border: 1px solid gray; */
    padding: 0;    
    
}


/* new */



@media (max-width: 350px) {
    nav .logo img{
        height: 30px;
        /* even smaller logo on small devices, old iphones */
    }
    


}