.box{
    border: 2px solid green;
}
.box1{
    border:2px solid blue;
}


/*GLOBAL------------------------------------------------------------------*/
:root{
    font-size:18px;
}
html{
    scroll-behavior: smooth; 
}
*{
    box-sizing: border-box;
}
body{
   margin:0;
   padding:0;
   font-family: 'Raleway', sans-serif;
   color:#333;
   background-color:#ededed;
}
.flex{
    display: flex;
}
.center{
    margin:0 auto;
    padding:0;
}
.button{
    padding:10px 50px 10px 50px;
    text-decoration: none;
    color:#ededed;
    border-radius: o;
    border: 2px solid #ededed;
    background-color: #333;
}
.button:hover{
    border: 2px solid lightpink;
    font-weight: 600;
    transition: 1.5s;
    filter:drop-shadow(5px 5px 20px rgba(255,105,180,.5));
}
.button2{
    padding:10px 50px 10px 50px;
    text-decoration: none;
    color:#ededed;
    border-radius: o;
    background-color:#999;
    border: 2px solid #ededed;
}
h1 {
    font-weight: 300;
    font-size: clamp(3rem, 10vw, 5rem);
  }
h2{
    font-weight: 300;
    font-size:4.25rem;
}
h3{
    font-size: 1.3rem;
    font-weight: 600;
}
p{
    font-size:clamp(1.1rem,2vw,1.3rem);
    line-height: 154%;
}
img{
    max-width:100%;
    height:auto;
}
.box-shadow{
    box-shadow:4px 4px 14px rgba(0,0,0,.4);
}
.text-center{
    text-align: center;
    margin:0;
}
ul {
    list-style: none;
    padding:0;
}
ul li{
    display: inline;
}
ul li a {
    color:#ededed;
    text-decoration: none;
}
.link{
    text-decoration: none;
    font-size: 24px;
    color:#333;
}
.d-large{
    display: none;
}
.d-small{
    display: block;
}

.neonTitle{
    color:lightpink;
    text-shadow:
                -2px -2px 1rem #000,
                2px 2px 4px #333,
                0 0 8px rgba(255,105,180,1),
                0 0 16px rgba(255,105,180,.7),
                0 0 32px rgba(255,105,180,.2),
                0 0 64px rgba(255,105,180,.4),
                0 0 70px rgba(255,105,180,.8); 
}
.neon{
    color:lightpink;
    animation: flicker 1.5s infinite;
    border:solid 2px hotpink;
    font-weight: 500;
    animation: flicker 1.5s infinite;
}


/* Animate neon flicker */
@keyframes flicker {
    
    0%, 19%, 21%, 25%, 54%, 56%, 100% {
        
        text-shadow:
            -2px -2px 1rem #000,
            2px 2px 4px #333,
            0 0 8px rgba(255,105,180,.6),
            0 0 16px rgba(255,105,180,.7),
            0 0 32px rgba(255,105,180,.2),
            0 0 64px rgba(255,105,180,.4),
            0 0 70px rgba(255,105,180,.8);  
        box-shadow:
            -2px -2px 1rem #000,
            2px 2px 4px #333,
            0 0 8px rgba(255,105,180,.6),
            0 0 16px rgba(255,105,180,.7),
            0 0 20px rgba(255,105,180,.2),
            0 0 28px rgba(255,105,180,.4),
            0 0 32px rgba(255,105,180,.2);     
    }
    
    20%, 55% {        
        text-shadow: none;
        box-shadow: none;
    }    
}
.neonP{
    color: lightpink !important;
    animation: flickers 1.5s infinite;
}
@keyframes flickers {
    
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        
        text-shadow:
            -2px -2px 1rem #000,
            2px 2px 4px #333,
            0 0 8px rgba(255,105,180,1),
            0 0 16px rgba(255,105,180,.7),
            0 0 32px rgba(255,105,180,.2),
            0 0 64px rgba(255,105,180,.4),
            0 0 70px rgba(255,105,180,.8);       
    }
    
    20%, 24%, 55% {        
        text-shadow: none;
        box-shadow: none;
    }    
}
.logo{
    width:100%;
    width:2.5em;
    height:auto;
}
.logo:hover{
    filter:drop-shadow(2px 2px 8px rgba(255,105,180,1));
}

/*nav----------------------------------------------------------------*/
.primary_header{
    position:fixed;
    top:0;
    z-index: 100;
    background-color:#333;
}
nav{
    position: fixed;
    z-index: 100;
    text-align: right;
}
nav ul li a{
    padding:0;
}
nav ul li a:hover{
    color:lightpink;
    text-shadow: 2px 2px 15px rgba(255,105,180,1);
    font-weight: 600;
}
.primary_navigation_container{
    padding:0 max(1em, 7%);
    width: 100vw;
    height:100px;
    background-color: rgba(51,51,51,.75);
    border-bottom: solid 2px  rgba(249, 243, 238,.4);
    display: flex;
    justify-content: space-between;
}
.primary_logo{
    align-self: center;
}
.primary_navigation{
    align-self:center;
    display: flex;
    flex-direction: column;
    align-content: center;
}
.primary_navigation__links{
    padding:.2em;
}
.hero{
    background-color:#313233; 
    display: flex;
    justify-content: center;
    z-index:-1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 80%);
    margin-bottom:max(3em, 6vw);
}
.hero_content{
    text-align: center;
    display: block;
    margin: clamp(5em,12vh,18em) 0;
    float:left;
}
.hero p{
    color:#ededed;
}
.hero_img{
    width:100%;
    max-width:550px;
    align-self: center;
    padding:4em 3em 0 3em;
}
.hero_btn{
    padding-top:2em;
    padding-bottom:11em;
}
.about{
    width:100%;
    max-width: 1600px;
    padding :0 max(2em, 5%);
    flex-direction: column;
    margin:0 auto;
    margin-bottom: 5em;
    color:#333;
}
.about__container{
    display: flex;
    flex-direction: column;
    gap:2em; 
}
.about_h1{
    margin:0;padding:0;
    font-size: clamp(3rem, 15vw, 6rem);
    font-weight: 500;
    line-height:2rem;
}
.about_subtitle{
    width: 100%;
    max-width:600px;
    line-height:2.2rem;
    font-size: clamp(2rem, 5vw, 2.5rem);
}
.about_p{
    width:100%;
    max-width:700px;
    align-self: baseline;
}
.about__portfolio_img{
    width:100%;
    max-width: 350px;
    margin:0 auto;
}
.aboutImgBackground{
    background-color:#333; 
    width:100vw;
    height: max(20em, 20vw);
    clip-path: polygon(0% 40%, 100% 0%, 100% 60%, 0% 100%);
    position: relative;
    z-index: -1;
    margin:-5em auto;
}
.featuredProjects{
    display: flex;
    flex-direction: column;
    padding : max(1em, 8%) 0 0 0;
    margin:max(2em,8%);
}
.cards{
    margin:0 auto;
    width:100%;
    max-width: 850px;
    display: flex;
    flex-flow: wrap-reverse row-reverse;
    gap:3em; column-gap: 5em; row-gap: 5em;
    margin-bottom:max(6em , 10%);
}
.card:nth-child(1){
    order:3;
}
.card:nth-child(2){
    order:2;
}
.card:nth-child(3){
    order:1;
}
.featured_title{
    text-align: center;
    padding-bottom:1em;
    width:100%;
    max-width:650px;
    margin:0 auto;
    font-size: clamp(3rem, 10vw, 5rem);
}
.card{
    margin:0 auto;
    width:100%;
    max-width:352px;
    height:450px;
    background-repeat: no-repeat;
    background-size: cover;
    display: grid;
    grid-template-rows: 70% 30%;
    grid-template-areas:
     "top"
    "bottom";
    filter: grayscale(85%);
    box-shadow:rgba(0, 0, 0,.8) 0px 0px 10px 1px;
    z-index: 2;
    text-decoration:none;
}
.card:hover{
    filter: grayscale(0%) saturate(1.25);
    transform: scale(1.05);
    box-shadow:rgba(155, 15, 107,.9) 0px 0px 10px 1px,rgba(188, 15, 107,.9) 0px 0px 50px -5px;
    text-decoration: none;
    /*box-shadow: rgba(164, 126, 59,1) 0px 25px 50px -12px;*/
}
.card1{
    background-image: linear-gradient(to top, rgba(0,0,0,.4), rgba(100,100,100,.0)), url(../images/dhsCardImg.png);
}

.card2{
    background-image: linear-gradient(to top, rgba(0,0,0,.6), rgba(100,100,100,.0)), url(../images/jaaduee_cardImg.png);
}
.card2:hover{
    background-image: linear-gradient(to top, rgba(0,0,0,.4), rgba(100,100,100,.0)), url(../images/jaaduee_cardImg.png);
}
.card3{
    background-image: linear-gradient(to top, rgba(0,0,0,.4), rgba(100,100,100,.0)), url(../images/thembnail_jmc3.png);
}
.card3:hover{
    filter: grayscale(0%) saturate(1.5);
}
.card-title{
    line-height: 1em;
    
}
.card_info{
    grid-area:bottom;
    text-align: left;
    color:#ededed; 
    line-height: .5em;
    padding: 0 1.3em;
    text-decoration: none;
}
.card-detail{
    font-size: 1.3em;
    font-weight: 200;
}
footer{
    display: flex;
    flex-direction: column;

    background-color: #333;
    overflow: hidden;
    padding:0 max(1em, 5%);
}
.footerTop{
    width: 100%; 
    text-align: center;
    color:#ededed;
}
.footerTitle{ 
    font-weight: 300;
    font-size:40px;
}
.footerBtn{
    padding-bottom: 50px;
}
.footerBottom{
    border-top:solid 1px rgba(249, 243, 238, .3);
}
.footerNav{
    text-align: center; 
    width: 100%;
    max-width: 500px; 
    margin: 1em auto;
}
.footerNav li{
    margin: 0 auto;
    padding:1.5em;
}
.caseStudy_container{
    width:100%;
    max-width:1440px;
    flex-direction: column;
    gap:5em;
    margin: 100px auto;
    padding:0 1em;
    overflow-x: hidden;
}
.caseStudy_hero{
    justify-content: center;
    flex-direction: column;
    gap:3em;
}
.caseStudy_info h4{
    line-height: 0;
    text-align: left;
    margin:0 0 1em 0;
}
.caseStudy_info{
    background-color: #333;
    padding:1em 0;
    width:100%;
    max-width: 600px;
    margin:0 auto;
    justify-content:space-evenly;
}
.caseStudy_top{
    flex-direction: column;
    gap:1em;
    justify-items: center;
}
.caseStudy_info ul{
    color:#ededed;
}
.caseStudy_title{
    font-size: clamp(2rem, 8vw, 4.5rem);
    margin-bottom:0;
    width:100%;
    text-align: center;
}
.ingredients{
    line-height: 2em;
}
.ingredients li{
    display: block;
}
.tools, .cooktime{
    padding-bottom:1em;
    border-bottom:1px solid #ededed;
}
.caseStudy_definition, .users, .prototype, .styleguide__jmc, .color_scheme_styleguide__jmc, .typography_container__jmc, .cta__jmc{
    width:100%;
    max-width: 850px;
    margin:0 auto;
    display: flex;
    flex-direction: column;
    gap:2em;
}
.colorscheme_img{
    margin:3em auto;
}
.problem__jmc{
    padding-bottom: 2em;
}
.website_img{
    width:100%;
    max-width: 422px;
    margin:0 auto;
}
.lo-hifi{
    width:100%;
    max-width:950px;height:2440px;
    background-image: url(../images/DHS-Homepage-Wireframe.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center;
    margin:0 auto;
    box-shadow:rgba(0,0,0,.4) 0px 0px 10px 1px;
}
.lo-hifi:hover{
    width:100%;
    max-width:750px;height:2440px;
    background-image: url(../images/DHS-Homepage-Highfi.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: center;
    box-shadow:rgba(155, 15, 107,.7) 0px 0px 10px 1px,rgba(188, 15, 107,.8) 5px 5px 50px -5px;
}
.designs{
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
}
.change{
    margin:0 auto;
    width:100%;
    max-width: 750px;
    border:solid 1px #333;
    margin-bottom: 4em;
}
.change h3{
    text-align:center;
}
.change_text{
    padding:1em 2em;
    background-color: #fff;
}
.comment_box{
    display: flex;
    width: 100%;
    max-width:10em;
}
.comment_box li{
    font-weight: 600;
    padding:.5em .75em;
    background:#ededed;
    border:1px solid #313233; 
    display: block;
    text-align: right;
    width:180px;
}
.comment_box_left{
    position: absolute;
    z-index: 2;
    filter: drop-shadow(4px 4px 8px rgba(0,0,0,.2));
    margin-left:1.5em;
}
.comment{
    line-height: 140%;
}
.comment1{
    margin-bottom:240px;
    font-weight: 600;
    font-size:18px;
}
.comment2{
    margin-bottom:760px;
    font-size:18px;
}
.comment_box_right {
    margin-left:-1.5em;
    z-index: 2;
 }
.comment_box_right li{
    text-align:left;
    filter: drop-shadow(-4px 4px 8px rgba(0,0,0,.2));
}
.comment4{
    margin-top:260px;
    margin-bottom:350px;
}
.comment5{
    margin-bottom:1350px;
}

/*JMC*/
.website_img_jmc{
    width:950px;
    margin:0 auto;
    position: relative;
    z-index: 1;
}
.comment1__jmc{
    margin-top:3.5em;
}
.comment2__jmc{
    margin-top:24em;
}
.comment5__jmc{
    margin-top:5em;
}
.comment6__jmc{
    margin-top:25em;
}
.comment_box_right__jmc{
    margin-left:-1.5em;
}
.comment_box_left__jmc{
    margin-left:1.5em;
}
.problem__jmc{
    max-width: 850px;
    width:100%;
    margin:0 auto;
}
.goals{
    flex-direction: column;
    margin:0 auto;
    max-width: 1200px;
}
.goal{
    max-width: 350px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
.styleguide_logo{
    flex-direction: column;
    gap:2.5em;
    max-width: 200px;
    width: 100%;
    margin:2em auto;
}
.styleguide_logo_container{
    width:100%;
    max-width: 750px;
    margin: 0 auto;
    justify-content: center;
    flex-direction: column;
}
.styleguide_margin__jmc{
    margin-bottom:5em;
}
.color_scheme_styleguide__jmc{
    justify-self:center;
}
.typography_ex1__jmc{
    width:100%;
    max-width: 320px;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    margin:0 auto;
}
.regular-font{
    font-weight: 400;
}
.typography__jmc{
    justify-content: center;
    flex-direction: column;
}
.designs_jmc{
    width:100%;
    max-width: 600px;
   flex-direction: row;
}
.design_verbage__jmc{
    width:100%;
    max-width: 700px;
}
.design_large{
    gap:3em;
    flex-direction: column-reverse;
    padding:min(1vw,1em);
}
.subtitle{
    text-align: center;
    font-style: italic;
    margin: .5em;
    font-size: 1rem;
}
.proto_img{
    padding-bottom:1em;
}
.prototype_container{
    display: block;
    margin:0 auto;
}
.prototype_link{
    width:100%;
    margin:0 auto;
    text-align: center;
    text-decoration: none;
    color:#333;
    display: block;
}
.prototype_link:hover{
    text-shadow: 2px 2px 15px rgba(255,105,180,1);
}

.jmcLandscape_photoGrid{
   flex-direction: column;  
   gap:3em;   
}
/*JMC Landscaping-------------------------------------*/
.caseStudy_title__jmc{
    width:100%;
    margin:.5em auto;
}
.caseStudy_top__jmc{
    flex-direction: column;
    margin:0 auto;
}
.website-mock{
    filter: drop-shadow(0px 4px 8px rgba(0,0,0,.3));
}
.color_scheme_styleguide__jmc{
    display: grid;
    justify-content: center;
}
.drop_shadow{
    filter: drop-shadow(4px 4px 10px rgba(0,0,0,.3));
}
.drop_shadow1{
    filter: drop-shadow(2px 2px 6px rgba(0,0,0,.3));
}
.caseStudy_hero_img{
    width:100%;
    max-width: 700px;
   margin:0 auto;
}
.cta_images__jmc{
    margin: 3em auto;
    display: grid;
    width:100%;
    max-width: 510px;
    gap:20px;
    justify-content: space-around;
}


/*JAADUEE*/
.caseStudy_top__jaaduee{
    flex-direction: column;
}
.jaaduee_title{
    font-size: clamp(32px,5vw,2.5rem);
    margin:0;
    line-height:.5rem;
}
.casestudy_title__jaaduee{
    flex-direction: column;
    justify-content: space-around;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}
.caseStudy_hero_img__jaaduee{
    width:100%;
    max-width: 440px;
    margin:0 auto;
}
.logo_box__jaaduee{
    background-color:#fcf9ee;
    padding:1em;
}
.keywords_box__jaaduee{
    background-color:#2d2d2d;
    color:#fcf9ee;
    flex-direction: column;
    padding:1em 4.5em;
}
.keywords__jaaduee{
    margin-bottom: 9em;
}
.styleguide_logo__jaaduee{
    flex-direction: row;
}

.secondary_title__jaaduee{
    font-size: 3.5rem;
}
.content__jaaduee{
    gap:5em;
}
.jaaduee_logo_list{
    flex-direction: column;
    justify-content: space-between;
    gap:5em;
    align-items: center;
    margin:5em 0;

}
.logo_img__jaaduee{
    width: auto;
    max-height: 200px;
    height: 100%;

}
.logo_hz__jaaduee{
    width: auto;
    max-height: 125px;
    height: 100%;
}
.menu_display__jaaduee{
    margin: 3em auto;
    display: grid;
    width:100%;
    max-width: 810px;
    gap:20px;
    justify-content: space-around;
    
}


@media screen and (min-width:1100px) {
    .d-large{
        display: flex;
    }
    .d-small{
        display: none;
    }
    .primary_navigation{
        flex-direction: row;
    }
    .primary_navigation__links{
        padding:2em;
    }
    .about__container{
        display: flex;
        flex-direction:row;
    }  
    .caseStudy_hero{
        margin-top:3em;
    }
    .caseStudy_title{
        padding:0 .5em;
    }
    .caseStudy_hero_img{
        width:100%;
        max-width: 900px;
    }
    .caseStudy_info{
        flex-direction: row;
    }
    .caseStudy_top{
        flex-direction: row;
        justify-content: space-around;
        width: 100%;
        max-width: 1200px;
    }
    .caseStudy_title{
        text-align: left;
    }
    .caseStudy_info{
        flex-direction: column;
        width:100%;
        max-width: 950px;
        padding:.5em;
    }
    .ingredients{
        border:none;
        margin:0 auto;
        border-bottom:1px solid #ededed;
        height: fit-content;
    }
    .ingredients h4{
        text-align: center;
    }
    .ingredients li{
       display: inline;
      padding-right:1em;
    }
    .specifics{
        display: flex;
        justify-content: space-around;
        padding-top:1em;
    }
    .tools, .cooktime{
        border:none;
    }
    .goals{
        padding:2em;
        flex-direction: row;
        gap:2em;
    }
    .goal{
        max-width: 300px;
    }
    .styleguide_logo_container, .typography__jmc{
        flex-direction: row;
        justify-content: space-between;
    }
    .design_large{
        flex-direction: row;
    }
    .design_verbage__jmc{
        padding-top:2.5em;
    }
    .design_choice1__jmc{
        padding-bottom:3.5em;
    }
    .cta_1{
        grid-column: 1/3;
    }
    .cta_2{
        grid-column:1/2;
        grid-row: 2/3;
    }
    .cta_3{
        grid-column: 2/3;
        grid-row: 2/3;
        justify-self: flex-end;
    }
    .caseStudy_top__jaaduee{
        flex-direction: row;
    }
    .jaaduee_logo_list{
        flex-flow: wrap;
        justify-content: space-around;
        gap:5em;
        align-items: center;
    }

  }