body{
    background-color: var(--background-black);
 }
 /*styling case study intro*/

 .top-container-project{
    width:100%;
    color: var(--white);
}
a{
    color:var(--white);
}

/*custom background*/
#amazontitle{
    background-image: url("img/amazoncover.png");
    background-size: 110%;
    background-position: right 35% bottom 15%; 
    background-repeat: no-repeat; /* Do not repeat the image */
}
#mcdonaldstitle{
    background-image: url("img/mcdonaldstitle.png");
    background-size: 100%;
    background-position: right 35% bottom 15%; 
    background-repeat: no-repeat; /* Do not repeat the image */
}
#canseratitle{
    background-image: url("img/canseratitle.png");
    background-size: 100%;
    background-position: right 35% bottom 0%; 
    background-repeat: no-repeat; /* Do not repeat the image */
}
#scoretitle{
    background-image: url("img/scoretitle.png");
    background-size: 100%;
    background-position: right 35% bottom 0%; 
    background-repeat: no-repeat; /* Do not repeat the image */
}
#krushtitle{
    background-image: url("ixd/krush/Krushsample.png");
    background-size: 100%;
    background-position: right 35% bottom 0%; 
    background-repeat: no-repeat; /* Do not repeat the image */
}
#blazetitle{
    background-image: url("img/Blaze1.png");
    background-color: #449FBD;
    background-size: 100%;
    background-position: right 35% bottom 0%; 
    background-repeat: no-repeat; /* Do not repeat the image */
}
#swapfultitle{
    background-image: url("img/swapful-1.png");
    background-size: 100%;
    background-position: right 35% bottom 0%; 
    background-repeat: no-repeat; /* Do not repeat the image */
}
#newcity{
    background-color: #006747;
}
#newtitle{
    background-image: url("img/CHcase.png");
    background-size: 100%;
    background-repeat: no-repeat; /* Do not repeat the image */
}
#nomotitle{
    background-image: url("ixd/krush/nomotop.png");
    background-size: 100%;
    background-repeat: no-repeat; /* Do not repeat the image */
    background-color: #47496C;
}
nav{
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
.casestudy-intro{
    max-width:1200px;
    margin:auto;
    padding:100px 20px 100px 20px;
}
.casestudy-intro-left{
    width:35%;
}

 /*styling project details*/
.project-detail-banner{
    padding:50px 20px 50px 20px;
    background-color: var(--accent-black);
    color: var(--white);
}
.project-detail-container{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap:10px;
    width:960px;
    margin:auto;
}
.detail-title{
    font-weight: bold;
}

 /*styling case study frames*/
.case-study{
    background-color: var(--background-black);
    color:var(--white);
}
.case-study-frame{
    padding:100px 120px 0px 120px;
}
.bottom-case-study-frame{
    padding:100px 120px 100px 120px;
    border-bottom:1px var(--white) solid;
}
.case-study-frame-2{
    padding:100px 120px 0px 120px;
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}
.case-study-frame-2-bottom{
    padding:100px 120px 100px 120px;
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    border-bottom:1px var(--white) solid;
}

/*creating gallery*/
.bentoimg2{
    aspect-ratio: 80/95;
}
.bentoimg{
    width: 100%;
    height: 100%;
}
.bentobox{
    display: flex;
    flex-direction: row;
    gap: 50px;
}
.bentobox1{
    display: flex;
    flex-direction: column;
    gap: 50px;
    flex-grow: 1;
}
.bentobox2{
    display: flex;
    flex-direction: row;
    gap: 50px;
}
.bentobox3{
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.bento4{
    width: 450px;
    flex-shrink: 0;
    background: #131718;
}
.bento3{
    display: table;
    width: 100%;
    margin: auto;
    text-align: center;
    justify-content: center;
    background: #131718;
    flex-grow: 1;
}
.bento2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    background: #449FBD;
}
.tablecell{
    display: table-cell;
    vertical-align: middle;
    background: #131718;
    height: 100%;
}
.contactbutton{
    padding:  0px 24px ;
    height: 56px;
    margin-top: 10px;
    background-color: #449FBD;
    border:  0px;
    border-radius: 8px;
    color:  white;
    box-shadow: 0 3px 10px #00000025;
    font-size: 16px;
}

.contactbutton:hover{
    background-color: #286073;
}



 /*styling case study sub 2 grid sub boxes*/
 .case-study-2-frames, .case-study-2-frames-images{
    margin-top:50px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
 }
 .case-study-3-frames{
    margin-top:50px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
 }
 .frame-2{
    background-color: var(--accent-black);
    padding:30px;
    margin-bottom: 20px;
 }
 .frame-4{
    background-color: var(--accent-black);
    padding:30px;
 }
 .frame-icon{
    padding-right:20px;
    font-size: large;
 }

 /* styling quotes*/
 .quote-box{
    margin-top:50px;
    padding: 50px 60px 50px 60px;
    background-color: var(--accent-black);
    display: inline-block;
 }

blockquote{
    font-family: EB Garamond;
    font-style:italic;
    line-height:1.6;
    position: relative;
    font-size: 32px;
    font-weight: 500;
  }
  
  blockquote::before{
    font-family: EB Garamond;
    content: "\201C";
    color:var(--white);
    font-size:3.5em;
    position: absolute;
    left: -60px;
    top:-80px;
  }
  
  blockquote::after{
    content: '';
  }
  
  blockquote span{
    display:block;
    font-style: normal;
    margin-top:1em;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
  }

 /*styling images*/
 .large-image{
    position:relative;
    margin:auto;
    width:80%;
    padding:40px 20px 0px 20px;
 }

 .left-image, .right-image{
    width:90%;
    margin:auto;
}
#utterances{
    width:100%;
    padding:4px 0px 4px 0px;
    background-color: white;
    position:relative;
    top:2px;
}

 /*framing video*/
 .frame-phone-video{
    display: block; 
    width:275px; 
    height:600px; 
    border-radius: 44px;
    overflow: hidden;
    position:relative;
    left:20%;
 }
 .frame-voiceflow-video{
    border-radius: 8px;
    overflow: hidden;
 }
 .voiceflow-video{
    width:100%;
    height:100%;
 }
 #frame-gif{
    overflow:hidden;
    background-color: #14191a;
    border-radius: 10px;

 }
 #center-image{
    display:block;
    margin:auto;
    position:relative;
    top:-25px;
 }

 /*QR-code*/
.qr-block{
    display:inline-block;
    height: 100%;
}
#qr-prototype{
    position: relative;
    top: 50%;
    left:30%;
    transform: translateY(-50%);
}
.button:hover{
    opacity:75%;
    transition: opacity ease 0.3s;
}

/*CREATING SPEECH BUBBLES*/
.message-frame{
    width:90%;
    height:fit-content;
    padding:20px;
    border-radius: 8px;
    background-color: white;
    overflow:hidden;
}
.message-frame-clear{
    width:100%;
    background-color: none;
    overflow:hidden;
}
.message-row{
    width:100%;
    display:inline-block;
}

.speech-bubble-left, .speech-bubble-right{
	position: relative;
	border-radius: .4em;
    width: fit-content;
    margin-top:10px;
}
.speech-bubble-left{
	background:var(--white);
    color:var(--background-black);
    left:0px;
    display:block;
    float: left;
}
.speech-bubble-left-carousel{
    position:relative;
    left:-10px;
    display: grid;
    grid-template-columns: repeat(1, 3fr);
    overflow:hidden;
    width:800px;
}
.speech-bubble-right{
	background: var(--accent-black);
    color:var(--white);
    display:block;
    float: right;
    /*transition-delay: .8s;*/
}

.delay-2{
    transition-delay:.5s;
}
.delay-3{
    transition-delay:1s;
}
.delay-4{
    transition-delay:1.5s;
}
.delay-5{
    transition-delay:2s;
}
.delay-6{
    transition-delay:2.5s;
}
.delay-7{
    transition-delay:3s;
}
.delay-8{
    transition-delay:3.5s;
}
.speech-bubble-content{
    padding:10px;
}

/*styling messages with inner buttons*/
.sweet-option{
    border-radius: 8px;
    border: 1px var(--accent-white) solid;
    display: inline-block;
    overflow:hidden;
    background-color: white;
    box-shadow:0px 3px 5px #e4e4e4;
}
.sweet-option img{
    width:130px;
    padding:10px;
}
.sweet-option p{
   margin-left:10px;
}
/*LIGHT MODE*/
.light-mode{
    background-color: var(--accent-white);
    color:var(--background-black);
    border: var(--background-black);
}
.light-mode-accent{
    background-color: var(--white);
    color:var(--background-black);
}
.light-mode-bottom{
    border-bottom:1px var(--background-black) solid;
}
/*CAROUSEL*/
.dot {
    height: 15px;
    width: 15px;
    background-color: #f6addf;
    border-radius: 50%;
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.dot.active {
    background-color:  #f574cc;
}

#project-display {
    margin-top: 20px;
    background-color: var(--white);
    padding:0px 20px 20px 20px;
    border-radius: 8px;
    color: #000000;
}

.project-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
    padding: 10px;
    background-color: #00286e;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.project-button:hover {
    background-color: #0199da;
}

.project-button img {
    object-fit: cover;
    margin-bottom: 10px;
}


@media screen and (max-width: 1000px){
    /*framing video*/
    .frame-phone-video{
        display: block; 
        width:286px;  
        border-radius:44px;
        overflow: hidden;
        position:relative;
        margin:auto;
        left:0%;
    }
  
    .message-frame{
        position:relative;
        margin:auto;
        width:90%;
    }
    .message-row{
        width:100%;
    }
    #utterances{
        position:relative;
        margin:auto;
        width:95%;
        padding-top:40px;
    }

    /*QR-code*/
    .qr-block{
        display:inline-block;
        padding-top:40px;
        margin:auto;
        height: 100%;
    }
    #qr-prototype{
        position: relative;
        top: 50%;
        left:0%;
        transform: translateY(-50%);
    }
}

 /*this collapses galleryto one column at 1130px*/
@media screen and (max-width: 1130px) {

.bentobox{
    display: flex;
    flex-direction: column;
    gap: 50px;

}
.bentobox1{
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.bentobox2{
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.bentobox3{
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.bento4{
    margin: auto;
    width: fit-content;
    background: none;
}
#downloadCIQ{
    height: 500px;
    border-radius: 18px;
}
.bento3{
    display: table;
    width: 100%;
    height: 100%;
    margin: auto;
    text-align: center;
    justify-content: center;
    background: #131718;
}
.bento2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    background: #449FBD;
}
.wrapperWide{
    justify-content: center;
    width: 100%;
    background: #449FBD;
    padding: 30px 0px 30px 0px;
}
#blazetitle{
            background-size: cover;
        background-position: center; /* Optional: centers the image */
        background-repeat: no-repeat; /* Optional: prevents tiling */
        }

}

     /*this collapses everything to one column at 975px*/
     @media screen and (max-width: 975px) {
         /*styling intro*/
         .casestudy-intro-left{
            padding-bottom:10px;
        }
        /*project details*/
        .project-detail-container{
            width:100%;
            grid-template-columns: repeat(2, 1fr);
            gap: 5px;
        }
        .project-details{
            width:80%;
        }
        .project-detail-banner{
            margin-bottom:40px;
        }
        nav{
            margin: 0 auto;
            padding: 20px;
        }
        .casestudy-intro{
            padding:0px 20px 0px 20px;
        }
        .casestudy-intro-left{
            width:85%;
        }
         /*title background photos*/
         #amazontitle{
            background-image:  linear-gradient( #3fcfd9, #7581ff );
            background-position: center; /* Center the image */
            background-repeat: no-repeat; /* Do not repeat the image */
        }
        #mcdonaldstitle{
            background-image:  linear-gradient( #722337, #9A3344,#A93946,#D26B33, #DA9E48 );
            background-position: center; /* Center the image */
            background-repeat: no-repeat; /* Do not repeat the image */
        }
        #canseratitle{
            background-image:  linear-gradient( #292178, #362A9A,#4834D5,#6C56E9, #806CEB );
            background-position: center; /* Center the image */
            background-repeat: no-repeat; /* Do not repeat the image */
        }
        #scoretitle{
            background-image:  linear-gradient( #A51D12,#C52D14, #DA3210, #FF7700 );
            background-position: center; /* Center the image */
            background-repeat: no-repeat; /* Do not repeat the image */
        }
        #krushtitle{
            background-image:  linear-gradient( #A51D12,#C52D14, #f65180, #f57dd7 );
            background-position: center; /* Center the image */
            background-repeat: no-repeat; /* Do not repeat the image */
        }
        #CHtitle{
            background-color: #006747;
        }
     }

    /*this collapses everything to one column at 950px*/
    @media screen and (max-width: 950px) {
        /*styling case study frames*/
        .case-study-frame, .bottom-case-study-frame{
            padding:0px 0px 40px 0px;
            margin-bottom:40px;
        }
        .case-study-frame-2{
            padding:0px 0px 40px 0px;
            width: 100%;
            margin-bottom: 1.3 em20px;
            grid-template-columns: repeat(1, 1fr);
            gap: 0px;
        }
        .case-study-2-frames, .case-study-3-frames{
            grid-template-columns: repeat(1, 1fr);
            gap: 0px;
        }
        .case-study-frame-2-bottom{
            padding:0px 0px 40px 0px;
            margin-bottom:40px;
            grid-template-columns: repeat(1, 1fr);
            gap: 0px;
        }
        .frame-4{
            margin-bottom: 20px;
        }

        .image-grid {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 20px;
            padding-top:10px;
         }
        
        .display{
            font-size:32px;
        }
        /* styling quotes*/
        .quote-box{
            margin-top:30px;
            padding: 30px 20px 30px 20px;
        }
        
        blockquote::before{
            font-size:3em;
            left: -50px;
            top:-60px;
        }
        /*styling images*/
        .large-image{
            position:relative;
            margin:auto;
            width:96%;
            padding:40px 5px 0px 5px;
        }
    }


     /*this collapses everything to one column at 783px*/
     @media screen and (max-width: 783px) {
        #blazetitle{
            background-image:  linear-gradient( #449FBD);
        }
        
     }
 

     /*this collapses everything to one column at 500px*/
     @media screen and (max-width: 500px) {
        /*styling side by side images*/
        .case-study-2-frames-images{
            grid-template-columns: repeat(1, 1fr);
            gap: 0px;
        }
        .left-image, .right-image{
            width:100%;
        }
        .right-image{
            padding:40px 5px 0px 5px;
        }
        .message-frame{
            width:80%;
        }
        /*framing video*/
        #frame-phone-video{
            overflow:visible;
        }
        .frame-phone-video{
         overflow:visible;
        }
        .frame-voiceflow-video{
        background-color: var(--accent-white);
        }
        
     }