body {
    font-family: "Hanken Grotesk", serif;
    font-optical-sizing: auto;
    font-style: normal;
    padding: 0;
    margin: 0;
    color:rgb(203, 203, 203);
    line-height: 1.6;
}
.SD_floating_nav{
    width: 150px;
    position:absolute;
    z-index:10;
    background-color:black;
    margin-bottom:10px;
    margin-left:70px;
}
.cta-button {
    font-family: "Hanken Grotesk", sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 999px;

    text-decoration: none;
    background-color: transparent;

    transition: 
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.15s ease;
}

.cta-button:hover {
    background-color: #4028CA;
    transform: translateY(-1px);
    border: none;
}

.cta-button:active {
    transform: translateY(0);
}
#graph_page{
    background-color: black;
}
html{
background-color:#161515;
}
#starting_statement{
    text-align:center;
    font-family: "Syne", serif;
    font-size: 1.3rem;
    margin: 0em;
    font-weight: 600;
}
#jersey {
    position:absolute;
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 20px auto;
}
#tag_design{
    font-family: "Hanken Grotesk", sans-serif;
    font-size: 14px;
    padding: 5px 10px;
    border: 2px solid #f2f2f2;
    border-radius: 20px;
    color: white;
    background: transparent;
    white-space: nowrap;
}
#tag_design2{
    font-family: "Hanken Grotesk", sans-serif;
    font-size: 14px;
    padding: 5px 10px;
    border: 2px solid rgb(146, 209, 133);
    border-radius: 20px;
    color: rgb(146, 209, 133);
    background: rgb(36, 36, 39);
    white-space: nowrap;
}
#jersey_2 {
    position:absolute;
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 20px auto;
}
.project_tags{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 0;
}
.project_tags2{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 0;
}
.project_content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}
.bg_element{
    position: relative;
    top: 0;
    width: 100%;
    height: auto;
    border-top-right-radius: 50px;
    border-top-left-radius: 50px;
    z-index: 1;
    padding: 20px;
    background-color:rgb(17, 16, 16);
    /*box-shadow: 0px -10px 20px -4px #73a9b7;*/
}
.after_header{
    margin-left:60px;
    margin-right: 60px;
    display:grid;
    grid-template-rows: auto auto;
    row-gap: 15px;
}
.contact_links {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
}

#linkedin_image {
    width: 26px;
    height: auto;
}

.contact_links p {
    margin: 0;
    font-size:1.2rem;
}

#contactMe2 {
    border: none;
    background-color: #78867a;
    color: black;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 25px;
    cursor: pointer;
    font-family: "Hanken Grotesk", serif;
}

#linkedin_image {
    width: 30px;
    height: auto;
    cursor: pointer;
}
#name_start{
    font-family: "Syne", serif;
    font-size: 1.3rem;
    margin: 0em;
    font-weight: 600;
}
#first_title {
    font-family: "Syne", serif;
    font-size: 2.5rem;
    margin: 0em;
    font-weight: 600;
}
#title_des{
    font-size: 1.2rem;
    margin-top: 0;
}
#thumbnail_fit{
    object-fit: cover;
    width: 100%;
}
.ux_container{
    margin-left: 45px;
    margin-right: 45px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    padding-top:10px;
    column-gap: 30px;
    row-gap: 30px;

}
@media (max-width: 768px) {
    .ux_container {
        grid-template-columns: 1fr;
        margin-left: 20px;
        margin-right: 20px;
    }
}
.anim_content{
    display:grid;
    grid-template-columns: repeat(2, 1fr); 
    margin-left:70px;
    margin-right: 70px;
    gap:20px;
    align-items: center;

}
.anim_content_two{
    display:grid;
    gap:20px;
    grid-template-columns: 1fr 3fr; 
    margin-right: 70px;
    margin-left:70px;
    align-items:center;
}
#gifs{
    column-gap: 10px;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
}
#plant_gifs{
    width:100%;
    border-color: white;
    border-width: 1px;
}
.project_link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.pre_proj_one {
    background: rgb(36, 36, 39);
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(36, 36, 36, 0.1); 
    color: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pre_proj_two {
    background: rgb(39, 36, 36);
    padding: 15px;
    border-radius: 10px;
    border: 3px solid rgb(36, 36, 39);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    color: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pre_proj_one:hover {
    transform: translateY(-5px);
    color: #161515;
    background-color: rgb(132, 132, 132);
}
.pre_proj_two:hover {
    transform: translateY(-5px);
}
#project_one{
    color:white;
    display:grid;
    grid-template-rows: 1fr 1fr;
    row-gap:10px;

}
#project_two{
    color:white;
    display:grid;
    grid-template-rows: 1fr 1fr;
    row-gap:10px;
}
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding: 20px 70px; 
    background-color: #151616;
    width: 100%;
    box-sizing: border-box;
}
#Resume{
    margin-right:40px;
}

#logo img {
    height: 50px; 
    margin-left: 50px;
    
}
#name_styling{
    font-family: "Hanken Grotesk", sans-serif;
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
    letter-spacing: 3px;
}
#name_styling a:hover{
    text-decoration: underline;
}

.nav-name {
    font-family: "Hanken Grotesk", sans-serif;
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
    letter-spacing: 3px;
}

.nav-buttons {
    display: flex;
    gap: 20px; 
}

.nav-buttons a {
    font-family: "Hanken Grotesk", sans-serif;
    color: white;
    text-decoration: none;
    background: transparent;
    padding: 5px 10px;
    font-size: 1rem;
    cursor: pointer;
}

.nav-buttons a:hover {
    text-decoration: underline;
}
.footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 40px;
    display: flex;
    flex-direction: column;
    gap: 6px;              
    line-height: 3;
    background-color: #151616;
    color: white;
}
.footer * {
    margin: 0;
}
.footer_row2 img {
    vertical-align: left;
    display: inline-block;
}
#linkedin_image{
    grid-column:1/3;
}
#contactMe{
    grid-column:2/3;
}
#email{
    grid-column:3/3;
}
#contain_one {
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    column-gap:80px;
    margin-right: 70px;
    margin-left:70px;    
}

.description b {
 
    margin-bottom: 10px;
    display: block;
}
.description ul {
    padding: 0; 
    margin-top: 0; 
    list-style-type: none;
    text-indent: 0; 
}
.description ul li {
    margin-left: 0;
    padding-left: 0; 
    line-height: 1.5; 
}
.description p {
    margin-bottom: 15px; 
}
.aboutMe_1 {
    grid-column: 1/2;
    display: grid;
    grid-template-rows: auto auto auto;
    row-gap: 5px;
}
.about_closing{
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    gap: 10px;
}
#about_title{
    font-size:4rem;
    margin:auto;
    font-family: "Syne", serif;
    font-weight: 700;
}
.image_left{
    width:80%;
}


#my_description{
    margin-top:0;
}

#title {
    font-family: "Syne", serif;
    grid-row:1/2;
    font-size: 4rem;
}
ul {
    padding-left: 20px;
    margin: 10px 0;
}
ul li {
    margin-bottom: 5px;
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #539152;
    margin: 1em 0;
    padding: 0;
}
.first_project{
    display:grid;
    grid-template-columns: 1fr 1fr;
    margin-left: 15px;
    margin-right: 15px;
    column-gap: 15px;;
}
#description_2{
    grid-column: 1/2;
}
#thumbnail_title{
    font-family: "Syne", serif;
    font-weight: bold;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    margin-top: 0;
}
#thumbnail_description{
    font-size: 14px;
}
#thumbnail_description2{
    font-size: 14px;
    margin-top: 0;
}

#first_mockup{
    grid-column: 2/2;
    width:90%;
}
#nav_direction {
    margin-top: 20px !important;
    margin-left: 70px;
    margin-right:70px;
    font-size:11px;
}
#nav_direction_2 {
    font-size:11px;
}
#links_nav{
    color:white;
}

/* Style for Print Page*/
.main-content{
    padding: 0 20px;}
#g_container{
    display: block; 
    max-width: 100%;
    padding: 0;
    margin-left:70px;
    margin-right:70px;
}
#g_containerOne, #g_containerThree, #g_containerTwo, #g_containerFour, #g_containerFive {
        display: grid;
        grid-template-columns: 1fr 2fr; 
        gap: 20px;
        margin: 0 auto;
        max-width: 100%;
        align-items: start;
}
#container_Right2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    max-width: 100%;
    margin: 0 auto; 
}
#container_Right2 img {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 300px;
    border: 1px solid #ccc;
}
#g_titles {
    font-size: 24px;
    margin: 0 0 10px;
}
#proj_info{
    font-size: 14px;
    line-height: 1.5;
    margin: 0; 
}
#g_descriptions {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}
#containerRight1 img, #containerRight2 img, #containerRight3 img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
#containerRight_Mod{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 100%;
    grid-template-rows: auto auto; 
}
#containerRight_Mod img{
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
#g_containerOne, #g_containerTwo, #g_containerThree {

    margin-bottom: 50px;
}

#containerRight1, #containerRight2, #containerRight3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    gap: 10px;
    max-width: 100%;
}
.side-by-side {
    width: 100%;
    height: auto;
    object-fit: contain;
}
#mockup_prints{
    grid-column: span 2;
    width: 100%;
    margin-top: 10px;
}
.poster-wrapper {
    position: relative;
    width: 100%;
}
#ai_poster{
    border: 1px solid #ccc;
    width:100%;
    height: auto;
  
}
#ai_poster2{

    width:100%;
    height: auto;
    object-fit: contain;
    object-fit: contain;
}
#mockup_poster{
    grid-column: span 3; 
    width: 100%;
    height: auto;
    margin-top: 10px;
}
@media (max-width: 768px) {
    #containerRight1, #containerRight_Mod {
        grid-template-columns: 1fr;
    }
    .side-by-side, #mockup_prints, #ai_poster, #mockup_poster {
        grid-column: span 1;
        width: 100%;
    }
}
.page-layout {
    display: grid;
    grid-template-columns: 300px auto;
    min-height: 100vh;
}

.side-nav {
    height: 100vh;
    width: 300px;
    background-image: linear-gradient(to right, #4028CA, #151616);
    padding: 100px 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    position: sticky;
    top: 0;
    align-self: start;
}
#menu_type{
    font-family: "Syne", serif;
    font-size: 1.3rem;
    margin: 0em;
    font-weight: 400;
    color:white;
}
.side-nav a {
    text-decoration: none;
    color:white;
    transition: color 0.2s;
}

.side-nav a:hover {
    color: #161515;
    font-weight: bold;
}

.side-nav p {
    font-size: 15px;
    margin-bottom: 10px;
    color: #555;
}
#g_title{
    font-family: "Syne", serif;
    font-size: 1.5rem;
    font-weight: bold;
}
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
.g_description{
    padding: 20px;
}
.proj_collection{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:10px;
    margin-left:70px;
    margin-right:70px;
}
.proj_box{
    display:block;
    /*border: 1px solid white;*/
}
.proj_box img {
    width:100%;
}
.entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

.entry img {
  width: 100%;
  display: block;
}

.text-block {
  padding: 15px;
  background: #f8f8f8;
  width: 100%;
}

.text-block h3 {
  margin: 0;
  font-size: 1.2em;
  color: #333;
}

.text-block p {
  margin: 5px 0 0;
  font-size: 0.95em;
  color: #666;
}

.entry:hover {
  transform: translateY(-5px);
}

#gd_thumbnail {
    margin: 15px auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    box-sizing: border-box;
    width: 90%;
    
}
.entry img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.3s ease;
}
@media (max-width: 768px) {
    #gd_thumbnail {
        grid-template-columns: 1fr;
    }
}
.entry video {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}
.entry {
    border-radius: 6px;
    font-family: "Chakra Petch", serif;
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
}
.entry:hover::after{
    opacity:1;
}
.entry::after {
    content: "";
    font-style: italic;
    font-size: 0.9rem;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 255, 0.735);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1; 
}
.entry::before {
    content: attr(data-text);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
    opacity: 0; 
    transition: opacity 0.3s ease;
    z-index: 2;
    font-family: "Syne", serif;
    font-size: 2rem;
    font-weight: bold;
    
}
.entry:hover {
    transform: translateY(-7px);

}
.entry:hover::before{
    opacity:1;
}

/*csp */
.display_two{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:20px;
}
.single_display_two {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  gap: 20px;
}
.single_display_two img {
  max-width: 50%;
  height: auto;
}
.single_display{
    display:grid;
    margin-left:70px;
    margin-right:70px;
    gap: 20px;
    align-items: center;
}
.single_display img {
    width:100%;
    border-radius: 8px;
}
.homepage_display{
    display:grid;
    margin-left:200px;
    margin-right:200px;
    place-items: center;
    align-items: center;
    justify-content: center;
}
.homepage_display img{
    width:80%;
}
.cal img {
    width:100%;
}
.csp_row1{
    margin-left: 70px;
    margin-right:70px;
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:15px;
}
.slides_encomp{
    max-width: calc(80% - 140px);
    margin: 0 auto;

}
.csp_slide {
    position: relative;
}

* {
    box-sizing: border-box;
}
  
.mySlides {
    display:none;
}
.mySlides:first-child{
    display:block;
}
.cursor {
    cursor: pointer;
}
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 20px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    border-radius: 25px;
    user-select: none;
    -webkit-user-select: none;
    background-color: rgba(0, 0, 0, 0.867);
    margin-left:10px;
}

.next {
    right: 0;
    border-radius: 25px;
    margin-right:10px;
  }
.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}
  
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}
.caption-container {
    text-align: center;
    background-color: #222;
    padding: 2px 16px;
    color: white;
}
.row:after {
    content: "";
    display: table;
    clear: both;
}
.column {
    float: left;
    width: 16.66%;
}
.demo {
    opacity: 0.6;
}
.active,.demo:hover {
    opacity: 1;
}
.caption_csp {
    margin-left: 70px;
    margin-right:70px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 25px;
    align-items: start;
}
.g_1,.g_2 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.g_2 p{
    margin:0;
    padding:0;
}
#CSP_title{
    font-size:1.8rem;
    margin-bottom: 10px;
    font-family: "Syne", serif;
    font-weight: 500;
    line-height: 1.5;
}
#CSP_title2{
    font-size:1.8rem;
    margin-bottom: 10px;
    font-family: "Syne", serif;
    font-weight: bold;
    line-height: 1.5;
    margin-left:70px;
    margin-right:70px;
}
.sec_row{
    margin-left:70px;
    margin-right:70px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:20px;
}
.sec_row4{
    margin-left:90px;
    margin-right:90px;
}
.sec_row2{
    margin-left:200px;
    margin-right:200px;
    display:grid;
    grid-template-columns: 1fr;
    gap:15px;
}
.sec_row3{
    margin-left:70px;
    margin-right:70px;
    display:grid;
    grid-template-columns: 1.5fr 1fr;
    gap:15px;
}
#csp_animation{
    object-fit: cover; 
    width:100%;
}
.indivProj p{
    text-align:center;
}
.single_display p{
    text-align:center;
}
.logo_an{
    margin-left:70px;
    margin-right:70px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:15px;
    align-items: center;
}
#nametags{
    width:100%;
    grid-column: 1/2;
    
}
#video_embed{
    width:100%;
    grid-column:1/2;
}

/* WOMEN IN TECHNOLOGY STYLE*/
.grid-four {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}
.grid-four img {
    width: 70%;
    display: block;
    margin: 0 auto;
}
.grid-four > div,
.grid-four > * {
    display: flex;
    justify-content: center;
    align-items: center;
}
.poster-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.poster-wrapper img {
    width: 70%;
}
.compare_1 {
    display:grid;
    justify-content:center;
    align-items:center;
    grid-template-columns: 1fr 1.3fr;
    gap: 50px;
    margin-left:70px;
    margin-right:70px;
}
.grid-six{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap:5px;
}
.prev1,.next1 {
      cursor: pointer;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: auto;
      padding: 20px;
      color: white;
      font-weight: bold;
      font-size: 20px;
      border-radius: 30%;
      user-select: none;
      -webkit-user-select: none;
      background-color: rgba(0, 0, 0, 0.867);
      margin-left:10px;
      transition: background-color 0.3s ease;
}
.next1 {
    right: 10px;
}
.prev1 {
    left:10px;
}
.prev1:hover,.next1:hover {
    background-color: rgba(0, 0, 0, 0.8);
}
#shrink{
    width:30%;
    display: block;
    margin: 0 auto;
    align-items: left;
}
.wit_row1 {
    display: grid;
    grid-template-columns: 1.2fr 2fr; 
    gap: 20px;
    align-items:top;
    align-items: stretch;
    margin: 0 auto;
    margin-left: 70px;
    margin-right: 70px;
    max-width: 90%;
}

.wit_insta img {
    width: 100%; 
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}
.wit_insta{
    display: flex;
    align-items: stretch;
    justify-content: center;
    height: 100%;
}
.wit_meeting {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    align-content: center;
    position:relative;
}
.mySlides img {
    width: 100%;
    height: auto;
    display: block;
}
.thumbnail_row {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.thumbnail_row img {
    width: 60px;
    height: auto;
    cursor: pointer;
    object-fit: cover;
    border-radius: 5px;

}
.contents2 {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 15px;
    margin: 0 70px;
    align-items: start;
}

.contents2 img {
    width: 100%;
    height: auto;
    display: block;
}
.contents {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 15px;
    padding: 0 5%;
}
.contents img{
    width:100%;
}
.the_challenge {
    display: flex;
    gap: 20px;
    padding: 70px;
    background-image: linear-gradient(black, rgb(77, 0, 0), black);
}
#mini_title{
    font-family: "Syne", serif;
    font-size: 2rem;
    font-weight: bold;
}
.column {
    display: flex;
    flex-direction: column;
}
.text {
    flex: 1;
    font-family: "Hanken Grotesk", sans-serif;
    line-height: 1.6;
}
.caption {
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    background-color: rgb(175, 33, 33);
    color: white;
    text-align: center;
    font-size: 14px;
    padding: 5px 0;
    font-family: "Hanken Grotesk", sans-serif;
    z-index: 1;
}
.social_media_graphics {
    margin: 0 auto;
    max-width: 90%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
}
.wit_s {
    object-fit: cover;
    width: 100%;
    height: auto; 
    max-height: 600px;
    border-radius: 5px;
}
#ad_grid{
    margin-left:70px;
    display:grid;
    grid-template-columns: repeat(3,2fr);
    margin-right:70px;
    column-gap: 10px;
}
#ad_image1{
    width: 70%;
    grid-column: 2/2;
}
#ad_image{
    width: 100%;
    grid-column: 2/2;
}
#ad_sections{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    text-align:center;
    margin-right:70px;
    margin-left:70px;
}


.carousel {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-track img {
    width: 100%;
    flex-shrink: 0;
    display: block;
}
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(21, 22, 22, 0.8);
    color: white;
    border: none;
    font-size: 32px;
    padding: 6px 14px;
    cursor: pointer;
    z-index: 10;
    border-radius: 20px;
}

.carousel-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #151616;
}

.carousel-btn.left {
    left: 10px;
}

.carousel-btn.right {
    right: 10px;
}


/*************************************************************************/
/* FIT QUEST*/
#stage_title{
    font-family: "Syne", serif;
    font-size: 2rem;
    font-weight: bold;
}
.title_card_R1{
    display:grid;
    grid-template-columns: 2fr, 1fr;
    margin-left: 70px;
    margin-right: 70px;
}
#page_contents_left{
    grid-column: 1/2;
}
#page_contents_right{
    grid-column: 2/2;

}
#page_contents_right3{
    grid-column: 2/2;
    text-align: left;
    display:grid;
    grid-template-rows: auto auto;
}
.heading_bottomrow{
    grid-row: 2/2;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: left;
    column-gap: 10px;
    margin-top:0;

}
#description_of_heading{
    margin-bottom:0;
}
#size_contents{
    width:35%;
    align-items: center;
}
#project_details{
    display:grid;
    margin-right: 70px;
    margin-left:70px;
    grid-template-columns: 1fr 2fr 2fr 2fr 1fr;
    justify-items:center;
    align-items:start;
    gap:10px;
}
.first_column{
    grid-column: 2/3;
}
.second_column{
    grid-column: 3/4;
}

.third_column{
    grid-column: 4/5;
}

#column_title{
    font-weight: bold;
}
#temp_org{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:30px;
    margin-right: 70px;
    margin-left:70px;
    margin-top:20px;
    margin-bottom:50px;
}
#headlines_other{
    font-size:1.6rem;
    margin: 0;
    padding: 0;
}
#headlines {
    font-size: clamp(1.5rem, 2vw, 2.5rem);
}
#headlines2{
    font-size:1.5rem;
    margin-right:100px;
    margin-left:100px;
}
.heading_bottomrow .role_info ul,
.heading_bottomrow .time_info ul,
.heading_bottomrow .team_info ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.heading_bottomrow .role_info li,
.heading_bottomrow .time_info li,
.heading_bottomrow .team_info li {
    margin: 0;
    padding: 0;
    text-indent: 0;
}
#CSP_title3{
    font-size:4rem;
    margin-top: 10px;
    font-family: "Syne", serif;
    font-weight: bold;
    line-height: 1.5;
}
.heading_row{
    margin-top:60px;
}
.part1{
    position: relative;
    top: 0;
    width: 100%;
    height: auto;
    background-image: linear-gradient(to right, #201464, #4028CA);
    z-index: 1;
    padding: 20px;
    text-align: left;
}
.part1_B{
    position: relative;
    top: 0;
    width: 100%;
    height: auto;
    background-color: rgb(5, 39, 78);
    z-index: 1;
    padding: 20px;
    text-align: left;
}
#stage_title_ux {
   font-weight: bold;
   margin-top: 40px;
   margin-bottom: 20px;
   padding: 0;
   display: block;
   font-size: 1.5rem;
}
#stage_title_ux4 {
    font-weight: bold;
    margin-top: 40px;
    margin-bottom: 20px;
    padding: 0;
    display: block;
    font-size: 1.3rem;
    text-align: center;
}
.key_features {
    position: relative;
    top: 0;
    width: 100%;
    height: auto;
    background-image: linear-gradient( #342493, #161515);
    border-top-right-radius: 50px;
    border-top-left-radius: 50px;
    z-index: 1;
    padding: 20px;
}
.ending_screens {
    margin-left:100px;
    margin-right:100px;
    display:grid;
    gap:20px;
    grid-template-columns: repeat(5, 1fr);
}
#break1 {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
}
#break2 {
    width: 60%;
    margin: 0 auto;
    padding: 20px;
}
#caption_chart{
    margin-top:5px;
    color:rgb(133, 133, 133);
    justify-content: center;
    text-align: center;
}
.brand_images {
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    row-gap: 10px;
}
.brand_images2 {
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: left;
    width: 100%;
}
#fitquest_docuimages {
    width: 30%;
    display: block;
}
.feedback_change1 {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 20px;
    max-width: 900px;          
    margin: 0 auto;                
}
.fq_insight_box{
    justify-content: center;
}

#FQ_O_insight{
    padding:50px;
    background-color: #040538;
    border-radius: 20px;
    display:grid;
    grid-template-columns: 1fr 2fr;
    font-size:1.3rem;
    gap:30px;
    margin:0;
    position: relative;
    place-items: center;


}
#insight_icon {
    display: block;
    margin-left: auto;
    width:30%; 
}

.improv_1A, .improv_1B {
    background-color: #1c0834;
    color: white;
    padding: 20px 10px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.improv_1A img, .improv_1B img {
    border-radius: 20px;
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;
}
#insight_tags{
    background-color:#2a3391;
    border: 1px solid white;
    border-style: dashed solid;
    padding-left: 20px;
    padding-right:20px;
    padding-top:20px;
    padding-bottom:20px;
    border-radius: 10px;
}
.bg_final{
    background-image: linear-gradient( #201464, #161515);
    box-shadow: 0 30px 40px #5f82f6;
}
#hmw{
    background-color:#292929;
    border: 1px solid white;
    padding-left: 20px;
    padding-right:20px;
    padding-top:20px;
    padding-bottom:20px;
    border-radius: 10px;
}
#insight_callout{
    font-size:1.5rem;
}
.insight_tags2{
    background-color:#29292942;
    border: 1px solid rgb(203, 203, 203);
    padding:20px;
    border-radius: 10px;
    justify-content: left;
    text-align: left;
}
.title_placement{
    display:grid;
    width: 70%;
    margin:0 auto;
}
#insights{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: 20px;
    margin:0 auto;
    row-gap:20px;
    justify-content:center;
    align-items: center;
    align-items: start;

}
.fit_tag_one {
    grid-column: 1;
    grid-row: 1;
}
.fit_tag_two {
    grid-column: 1;
    grid-row: 2;
}
.fit_tag_three {
    grid-column: 1;
    grid-row: 3;
}
.fit_tag_four {
    grid-column: 2;
    grid-row: 1;
}
.fit_tag_five {
    grid-column: 2;
    grid-row: 2;
}
.fit_tag_six {
    grid-column: 2;
    grid-row: 3;
}
.improv_encasing{
   margin-left:200px;
   margin-right:200px;
}
.improvements{
    position: relative; 
    top: 0;
    width: 100%;
    height: auto;
    background-image: linear-gradient( #2f2471, #161515);
    border-top-right-radius: 50px;
    border-top-left-radius: 50px;
    z-index: 1;
    padding: 20px;
    text-align: center;
}
.improvements_defined {
    display: grid;
    grid-template-columns: 1fr auto; 
    gap: 10px;
    align-items: start; 
    justify-content: center;
    text-align: center; 
    max-width: 80%; 
    margin: 0 auto;
}
.screen_it{
    display: grid;
    gap:30px;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start; 
   
}
.screen_it_details{
    display: grid;
    gap:30px;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start; 
    text-align: center;
   
}
#detail_tag{
    background-image: linear-gradient(#161515, #201464);

    border-radius:30px 10px 20px 10px;
}

.improvement_two_ux{
    display: grid;
    grid-template-rows: auto 1fr; 
    gap: 20px; 
    align-items: start;
    justify-content: center; 
    text-align: center; 
    max-width: 80%; 
    margin: 0 auto; 
}
.improvements_defined p {
    text-align: center;
    align-self: start; 
}
.improv_1, .improv_2, .improv_3 {
    text-align: center;
}

.improv_1 p, .improv_2 p, .improv_3 p {
    position: relative;
    top: 10px;
 
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
}
.improv_1 img, .improv_2 img {
    width: 80%;
    height: auto; 
    display: block;
    box-shadow: 5px 10px 5px rgba(0, 0, 0, 0.398);
}
.screens_collected_arrows {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    margin: 20px auto;
}
@media (max-width: 768px) {
    .screens_collected_arrows {
        flex-direction: column;
    }

    .arrow_block {
        transform: rotate(90deg);
    }
}
.improvement_two img{
    width: 80%; 
    height: auto;
    display: block;
    box-shadow: 5px 10px 5px rgba(0, 0, 0, 0.398);
}
.final_stage{
    place-items: center;
    padding-top:10px;
    background-color:#263726;
    padding-bottom:50px;
    text-align: center;
}
.final_stage2{
    place-items: center;
    padding-top:10px;
}
.spacing{
    height:50px;
}
#title_placement{
    text-align: left;
}

/*THE STONE DRY COMPANY*/
#SD_testimony{
    background-image: linear-gradient( #64765D,#3b4d33);
    text-align: left;
    border-radius: 30px 30px 30px 5px;
    padding:40px;
}
#SD_testimony2{
    background-image: linear-gradient( #64765D,#3b4d33);
    text-align: left;
    border-radius: 30px 30px 5px 30px;
    padding:40px;
}
.part2{
    position: relative; 
    top: 0;
    width: 100%;
    height: auto;
    background-color: #4a5a44;
    z-index: 1;
    padding: 20px;
    text-align: left;
}
.brief{
    position: relative; 
    top: 0;
    width: 100%;
    height: auto;
    z-index: 1;
    padding-left:200px;
    padding-right:200px;
    text-align: left;

}
.constraint_item{
    border-radius:20px;
    background-image: linear-gradient( #64765D,#3b4d33, #161515);
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    align-items: center;         
    padding: 15px;
    min-height: 250px;

}
.constraint_headings{
    display:grid;
    text-align: center;
    grid-template-columns: repeat(3, 1fr);
    gap:30px;
    
    
}
#click_link{
    text-align:center;
}

.constraints_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    text-align: center;
}

.constraint_item p {
    margin-bottom: 10px;
    color: #c1d8b8;
    font-size:1.3rem;
}

.constraint_item img {
    width: 40%;
    margin: 0 auto;
    display: block;
    cursor: pointer;
}
#phone_i{
    width:20%;
}
#brand_i{
    width:30%;
}
.constraints_details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.constraint_text {
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease;
    opacity: 0;
    padding: 0 10px;
}
.constraint_text.show {
    max-height: 500px;
    opacity: 1;
    padding: 15px 10px;
}
.key_features2{
    position: relative;
    top: 0; 
    width: 100%;
    height: auto;
    background-image: linear-gradient( #64765D, #161515);
    border-top-right-radius: 50px;
    border-top-left-radius: 50px;
    z-index: 1; 
    padding: 20px;
}
.title_card_R2{
    display:grid;
    grid-template-columns: 2fr, 1fr;
    column-gap: 50px;
    margin-left:200px;
    margin-right: 70px;
}
#page_contents_left4{
    grid-column: 1/2;
    align-items: center;
    margin-top:0;
    padding-top: 0;
}
#page_contents_right5{
    grid-column: 2/2;
}
.heading_bottomrow{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: left;
    column-gap: 10px;
    margin-top:0;

}
#headlinesB{
    font-size:2rem;
}
.break4{
    display:box;
    margin-right: 100px;
    margin-left: 100px;
}
#temp_org_threeB{
    grid-column: 2/2;
    align-items: center;
    margin-top:30%;
}
#temp_org_threeBA{
    grid-column: 1/2;
    align-items: center;
    margin-top:30%;
}
.improvements2{
    position: relative; 
    top: 0; 
    width: 100%;
    height: auto;
    background-image: linear-gradient(#4f6148, #161515);
    border-top-right-radius: 50px;
    border-top-left-radius: 50px;
    z-index: 1;
    padding: 20px;
    text-align: center;
}
.tem_2{
    display: grid;
    grid-template-columns: 1fr 1.5fr; 
    gap: 20px;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 100%; 
    margin: 0 auto; 
}
.improvement_two{
    display: grid;
    grid-template-columns: 1fr 2fr; 
    gap: 20px;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 100%; 
    margin: 0 auto; 
}
.improvement_three{
    display: grid;
    grid-template-columns: 1fr 2fr; 
    gap: 30px;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 100%; 
    margin: 0 auto; 
}
.improvements_defined2 {
    display: grid;
    grid-template-columns: 1fr 2fr; 
    gap: 30px;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 100%; 
    margin: 0 auto; 
}
#custom_links{
    color:rgb(203, 203, 203);
}
.precursor_section_title{
    margin-right: 70px;
    margin-left:70px;
    align-items:left;
    align-content: left;
}
#testimony_headlines{
    font-size:1.5rem;
    margin: 0; 
    padding: 0;
}
.improv_encasing2{
    display: flex;
    row-gap: 50px; 
}
.improv_encasing3{
    margin-left:100px;
    margin-right:100px;
    display: grid;
    row-gap: 30px; 
}
.components_nolink{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.components_nolink p{
    position: relative;
    top: 10px; 

    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;

}
.components_nolink img{
    width:100%;
    border-radius:20px;

}

#screens_collected2{
    display: flex;
    gap: 10px;
    width:100%;

}
#screens_collected2 img{
    width:100%;
    max-width:200px;
    height:auto;
    display:block;
}
.improv_4 p, .improv_5 p{
    position: relative;
    top: 10px; 
    background-color: #64765D; 
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
}
.improv_4{
    display:grid;

}
#screens{
    border-radius:20px;
    width:100%;
    display:block;
    max-width:260px;
    height:auto;
}
.screens_collected{
    display: flex;
    gap: 20px;
    width:100%;
    max-width:900px;
    margin:20px auto;
    align-items: center;
}
@media (max-width: 768px) {
    .screens_collected {
        flex-direction: column;
        align-items: center;
    }
}
.iteration_images_group {
    display: flex;
    gap: 30px;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}

.improv_block {

    border-radius: 10px;
    padding: 15px;
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.iteration_label {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 14px;
}

.dual_image_block {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.dual_image_block img {
    max-width: 200px;
    width: 100%;
    border-radius: 10px;
}

.single_image {
    max-width: 260px;
    width: 100%;
    border-radius: 10px;
}
.arrow_block {
    align-self: center;
    font-size: 2rem;
    color: #9fb597;
}

@media (max-width: 768px) {
    .iteration_images_group {
        flex-direction: column;
        align-items: center;
    }

    .arrow_block {
        transform: rotate(90deg);
    }
}
#quote_format1,
#quote_format2 {
    font-size: clamp(1.3rem, 2vw, 1.4rem);
    max-width: 60ch;
    width: 80%;
    padding: 25px;
    line-height: 1.5;
    background-color: #263726;
    background-image: linear-gradient(#64765D, #3b4d33);
    color: white;
}
#quote_format1 {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
    border-radius: 30px 30px 30px 5px;
}
#quote_format2 {
    margin-left: auto;
    margin-right: 0;
    border-radius: 30px 30px 5px 30px;
    background-image: none;
}
#quote_format3 {
    font-size: clamp(1.3rem, 2vw, 1.4rem);
    max-width: 60ch;
    width: 80%;
    padding: 25px;
    line-height: 1.5;
    background-color: #263726;
    background-image: linear-gradient(#14a1b1, #285459);
    color: white;
}

@media (min-width: 1024px) {
    #quote_format1,
    #quote_format2 {
        font-size: 1.2rem;
        max-width: 50ch;
    }
}
#sectioning_200{
    margin-left:200px;
    margin-right:200px;
}
#guiding{
    width:45%;
}
.contain_guiding{
    justify-content: center;
    text-align: center;
}
#headlines3{
    font-size:1.5rem;
}
#headlines4{
    font-size:1.5rem;
    align-items: center;
}

#still_mockup{
    width: 250px;
    height: auto;
    z-index:2;
    position: relative;
}
#solution {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    column-gap: 50px;
    flex-wrap: nowrap;
   margin-left:240px;
   margin-right:200px;
}
#s_left_side {
    position: relative;
    flex: 0 0 auto;
    min-width: 250px;
    max-width: 500px;
}
#s_right_side {
    flex: 1;

}
#still_mockup_back{
    width: 250px;
    height: auto;
    position: absolute;
    top: 10px;
    left: -25px;
    z-index: 1;
    transform: rotate(-7deg);
    opacity: 0.8;
}
#docuimages {
    width: 69%;
    display: block;
}
#docuimages2 {
    width: 100%;
    display: block;
}
#docuimages3{
    width: 30%;
    display: block;
}
#new_spacers{
    display:block;
    height:40px;
}
.goals_encompassing{
    background-color: #263726;
    padding-top:30px;
    padding-bottom:30px;
}
.goals_content{
    margin-left:200px;
    margin-right:200px;
}
.goals{
    text-align:center;
    margin-right:30px;
    margin-left:30px;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.goals img {
    width: 15vw;
    max-width: 80px;
    min-width: 60px;
    height: auto;
    transition: width 0.3s ease-in-out;
}
#events_tag{
    font-size:1.2rem;
}
@media (max-width: 768px) {
    .goals img {
        width: 20vw;
        max-width: 120px;
    }
}

@media (max-width: 480px) {
    .goals img {
        width: 25vw;
        max-width: 140px;
    }
}
.goals_title{
    text-align:center;
    margin-right:30px;
    margin-left:30px;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    
}
#key_feature_300 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 80%;
    margin: 0 auto;
    align-items: left;
}
#feature_left, #feature_right {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    text-align: left;
}
#feature_left p, #feature_right p {
    text-align: left;
}

#size_contents_gif {
    width: clamp(200px, 25vw, 250px);
    height: auto;
    border-radius: 30px;
    box-shadow: 0 5px 10px 3px #1414145c;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.features_organized {
    display: grid;
    row-gap: 40px;
    max-width: 90%;
    margin: 0 auto;
}
#key_feature_200{
    display:grid;
    grid-template-columns: 1fr auto;
    column-gap:40px;
    margin-right: 200px;
    margin-left:250px;
}
#size_contents_gif_top{
    width: 230px;
    height: auto;
    border-radius:30px;
}
#case_study_details{
    grid-template-rows: auto auto;
}
#case_title{
    font-size:3.7rem;
    font-family: "Syne", serif;
    font-weight: bold;
    line-height: 1.5;
    grid-row: 1/2;
}
.research_divider{
    padding:20px;
    background-color:#263726;
    font-size:1.2rem;
    text-align: center;
}
.research_divider2{
    padding:20px;
    font-size:1.2rem;
    background-color:#201464;
    text-align: center;
}
#quote_format3{
    border-radius: 30px 30px 30px 5px;
    background-color: #263726;
    width:80%;
    padding-left:25px;
    padding-right:25px;
    padding-top:25px;
    padding-bottom:25px;
}
#quote_format4{
    color: rgb(213, 188, 165);
    border-radius: 30px 30px 5px 30px;
    background-color: #263726;
    width:80%;
    padding-left:25px;
    padding-right:25px;
    padding-top:25px;
    padding-bottom:25px;
    align-content: right;
    align-items:right;
    margin-left: auto; 
    margin-right: 0;
}
.reflections{
    display:grid;
    grid-template-rows: 1fr auto;
    column-gap:20px;
}
#team{
    width:100%;
}
.recommendations{
    display:grid;
    grid-template-columns: 0.5fr 1fr;
    padding:20px;
    gap:10px;
    margin-left:70px;
    margin-right:70px;
}
#rec_details{
    font-size: 1rem;
}

#audience img{
    width:100%;
}
.audience_encompassed{
    background-image: linear-gradient( #505e4a, #161515);
    padding:15px;
    border-radius:25px;
    padding-left:40px;
    padding-right:40px;
}
.audience, .audience_images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
    column-gap: 30px;
    row-gap: 20px;
    margin-bottom: 40px;
    margin-top:10px;
}

.audience p {
    margin: 0;
    padding: 0;
}
.audience_images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: end;
    justify-items: center;
}

.audience_images img {
    height: 100px;
    width: auto;
    object-fit: contain;
    display: block;
    transform: scale(1.5);
}
#p_icon {
    transform: scale(1.3);
}

.pause{
    margin-left: 200px;
    margin-right: 200px;
}

/*WEB DESIGN */
#web_organization{
    display:grid;
    grid-template-columns: 2fr 1fr;
    margin-left: 70px;
    margin-right:70px;
    gap:30px;
}
#web_organization2{
    display:grid;
    grid-template-columns: 1fr auto;
    margin-left: 70px;
    margin-right:70px;
    gap:30px;
    align-items: center;
}
#bear_gif{
    width:100%;
    border-radius:25px;
    gap:20px;
}
#sub_title{
    font-size:2rem;
    margin-bottom: 10px;
    font-family: "Syne", serif;
    font-weight: bold;
    line-height: 1.5;
}
#poster_mockup{
    align-content: right;
}
.sketches_poster{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap:20px;
    margin-left:70px;
    margin-right:70px;
}
.sketches_poster img{
    width:100%;
}
/*XHIBITION*/
.exhib_sectioning_200 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-left:70px;
    margin-right:70px;
    max-width: 100%;
 }
  
.exhib_sectioning_200 img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
 } 

.ETH_design_doc{
    margin-right:70px;
    margin-left:70px;
}
.branding{
    display:grid;
    margin:70px;
    grid-template-columns: 1fr 2fr;
}
.B_txt{
    grid-column: 1/2;
}

.B_right_images img{
    width:100%;
}

.eth_slide{
    max-width: calc(100% - 140px);
    margin: 0 auto;
}
.eth_brand img{
    width:100%;
    display: block;
}
.eth_brand{
    margin-left: 70px;
    margin-right: 70px;
    margin-top:0;
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:15px;
}
.mySlides2 {
    display:none;
}
.mySlides2:first-child{
    display:block;
}
.prev3,
.next3 {
    cursor: pointer;
    position: absolute;
    width: auto;
    padding: 20px;
    margin-top:-30%;
    color: white;
    font-weight: bold;
    font-size: 20px;
    border-radius: 25px;
    user-select: none;
    -webkit-user-select: none;
    background-color: rgba(0, 0, 0, 0.867);
    margin-left:10px;
}

.next3 {
    right: 10%;
    border-radius: 25px;
    margin-right:30px;
  }
.story{
    display:grid;
    grid-template-columns: 1fr 2fr;
    gap:20px;
    margin-left:70px;
    margin-right:70px;
}
#story_title, #eth_title{
    grid-column: 1/2 ;
    text-align: center;
    
}
#descri{
    grid-column:2/2;
}
.eth_color{
    padding:20px;
}
.ETH_Challenge {
    display: grid;
    grid-template-columns: 2fr, 1fr;
    gap:20px;
    margin-left: 70px;
    margin-right: 70px;
}
.Copy_color{
    background-color:rgb(49, 32, 183);
}
.Copy_Challenge {
    display: grid;
    grid-template-columns: 1fr, 1fr;
    gap:20px;
    margin-left: 70px;
    margin-right: 70px;
}
#eth_title{
    grid-column: 1/2;
    align-items: center;
    
}
#eth_descri{
    grid-column: 2/2;
}
.eth_applications{
    margin:70px;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px;

}
.eth_applications img{
    width: 100%;
}

/*Wit*/
.social-grid-wrapper {
    display: grid;
    grid-template-columns: 0.66fr 1fr;
    gap: 20px;
    margin: 0 70px;
    max-width: 100%;
    align-items: start;
}
.grid-six {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
}

.grid-six img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}
.animation-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}
.animation-wrapper img {
    width: 100%;
    height: auto;
    max-height: 100%; 
}
.wit_social_media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 0 70px;
    max-width: 100%;
    overflow: hidden;
}
.wit_social_media img {
    width:100%;
}
.wit_text{
    margin: 70px;
    
}
.wit_text2{
    margin: 70px;
    padding-right:100px;
}
.wit_images{
    grid-column:1/2;
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:15px;
}
.wit_images img{
    width:100%;
}
#WIT_smaller_title{
    font-family: syne;
    font-size:1.3rem;
    font-weight: 600;
    margin-left:70px;
}
#SD_Intro{
    background-color: #263726;
}
/*TrueVoice*/
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
  padding: 20px;

}

.grid-box {
  background-color: #4c70bf;
  color: white;
  text-align: center;
  padding: 20px;
  border-radius: 12px;
  
}

.grid-box h3 {
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.grid-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.grid-box li {
  margin: 4px 0;
  font-size: 0.95rem;
}


.part3{
    position: relative; 
    top: 0;
    width: 100%;
    height: auto;
    background-color: #05274E;
    z-index: 1;
    text-align: left;
}
.TV_constraint_item{
    border-radius:20px;
    background-image: linear-gradient( #3b5181,#05274E, #161515);
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    align-items: center;         
    padding: 15px;
    min-height: 250px;
}
.TV_constraint_item img {
    width: 50%;
    margin: 0 auto;
    display: block;
    cursor: pointer;
}
#TV_Coloring{
    background-image: linear-gradient(#0E2E57, #161515);

}

.TV_research_divider{
    padding:20px;
    background-color:#0E2E57;
    font-size:1.2rem;
    text-align: center;
}
.TV_PersonaGrid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap:20px;
}
#TV_P{
    width:100%;
}
.XTVG{
    margin-left:70px;
    margin-right:70px;
}
#TV_IntroImage{
    width: 450px;
    height: auto;
    border-radius:10px;
}
#TV_Intro_Card{
    display:grid;
    grid-template-columns: 1fr auto;
    column-gap:40px;
    margin-right: 150px;
    margin-left:150px;
}
#TV_CaseTitle{
    font-size:3.7rem;
    font-family: "Syne", serif;
    font-weight: bold;
    line-height: 1.5;
    grid-row: 1/2;
    margin-bottom:0;
}
#TV_Description{
    font-size:1.2rem;
    font-family: "Hanken Grotesk", serif;
    font-optical-sizing: auto;
    font-style: normal;
    line-height: 1.5;
    grid-row: 1/2;
    margin-top:0;
}
.TV_Intro{
    grid-template-rows: auto auto;
}
.Encompass_XTVG{
    width:60%;
    align-items: center;
    margin:auto;
}
.TV_FinalStage{
    place-items: center;
    padding-top:10px;
    background-color:#05274E;
    padding-bottom:50px;
    text-align: center;
}
.TVgoals{
    text-align:center;
    margin-right:30px;
    margin-left:30px;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.TVgoals_title{
    text-align:center;
    margin-right:30px;
    margin-left:30px;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.TV_goals_encompassing{
    background-color: #263726;
    padding-top:20px;
    padding-bottom:20px;
}
#icon_sd1, #icon_sd4{
    width:55%;
}
#icon_sd2{
    width:40%;
}
#icon_sd3{
    width:35%;
}
#TVMap{
    width:100%
}
.TV_Wireframes{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:10px;
}
#TV_W2{
    width:100%;
}
#TV{
    background-color:#05274E;
}
p + ul{
  margin-top: 0;
}
.TV_DD{
    margin:auto;
    display:grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(2, 1fr);
    width:100%;
    background-color:#5f82cd;
    color:#05274E;
    padding:40px;
    border-radius: 25px;

}
.TV_DD_Columns{
    display:grid;
    grid-template-rows: repeat(2,1fr);
}
.TV_DD_Columns p, .TV_DD_Columns ul{
    font-size: 0.9rem;
}
#TV_Ctitle{
    text-align: center;
    grid-column: 1/2;
}
#TV_CDes{
    margin-top:0;
}
#TV_align{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:30px;
}
#TVP_Title{
    align-items:left;
    align-content: left;
}
#TV_solution {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    column-gap: 30px;
    flex-wrap: nowrap;
    margin-left:200px;
    margin-right:200px;
}
#TV_200{
    padding-top:20px;
    padding-bottom:40px;
    margin-left:200px;
    margin-right:200px;

}
.layout1{
    display:grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-left:70px;
    margin-right:70px;
    
}
.layout1 img{
    width:100%;
}
.csp_text{
    margin-left:70px;
    margin-right:70px;
}
.bcc_layout{
    margin-left:70px;
    margin-right:70px;
}
.intDec{
    padding: 50px;
    background-color: #2a5e53;
    margin-left:70px;
    margin-right:70px;
    border-radius: 20px;
}
#Color1{
    background-image: linear-gradient( #2a5e53, #161515);

}
#Color2{
    background-image: linear-gradient(#151515, #2a5e53);

}
#int_txt{
    margin-left:70px;
    margin-right:70px;
}

.squaregrid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-left:200px;
    margin-right:200px;
    max-width: 1000px;
    margin: 0 auto;
}

.squaregrid-item {
    text-align: center;
}

.squaregrid-item img {
    width: 100%;
    height: auto;
    display: block;
}

.squaregrid-caption {
    margin-top: 8px;
    font-size: 14px;
    color: #858585;
}
#standin{
    margin-left:70px;
    margin-right: 120px;
    width: 100%;
}
.textThree{
    margin-left:200px;
    margin-right:200px;
}
.infoTextGrid{
    margin-left:100px;
    margin-right:100px;
    display:grid;
    gap:20px;
    grid-template-columns: 1fr 2fr;
    align-items: center;

}
.layout3 {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 40px;
    margin-left: 70px;
    margin-right: 70px;
    align-items: start;
    text-align: start;
}

.layout3 p {
    font-size: 16px;
    line-height: 1.6;
}

.layout3 img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}
#smaller_title{
    font-family: syne;
    font-size:1.3rem;
    font-weight: 600;
}
.wit_social_media figcaption {
    margin-top: 8px;
    font-size: 14px;
    color: #555;
    font-style: italic;
    text-align: center;
}
.About_Info {
    display: flex;  
    align-items: center;
    gap: 10px;
}

.image_left {
    flex-shrink: 0;
}

#my_picture {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
}

#about_title {
    font-size: 50px;
    color: rgb(175, 255, 159);
    margin: 0;
}
.spacer-block {
  width: 100px;
  height: 100px; 
}

/*Unbroken*/
.case-nav-vertical {
  position: fixed;   
  top: 150px;
  right: 20px;
  width: 150px;
  background: rgba(20, 161, 177, 0.9);
  padding: 20px 15px;
  border-radius: 12px;
  z-index: 9999;
}

.case-nav-vertical ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.case-nav-vertical li {
  margin-bottom: 12px;
}

.case-nav-vertical a {
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: color 0.2s ease;
  display: block;
}
.case-nav-vertical a:hover {
  color: #ffdd57;
}
section, div[id^="sectioning_"], #solution, .brief, .improvements2 {
  scroll-margin-top: 80px; 
}
#UB_Intro{
    background-color: #285459;
}
#unbroken_bg_color{
    background-image: linear-gradient( #285459, #161515);
}
#Unbroken{
    background-image: linear-gradient( #008796, #161515);
}
#Unbroken p{
    color:white;
}
.brand_images3{
    display: grid; 
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    align-items: center;
    text-align: left;
    width: 100%;
}
.brand_images3 img{
    width:100%;
    height:100%;
}
.ThreeRow{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    margin-left:70px;
    margin-right:70px;
    gap:20px;
}
.ThreeRow img{
    width:100%;
}
.masonry { 
  column-count: 2; 
  column-gap: 10px;
  margin-left: 70px;
  margin-right: 70px;
}
.masonry-item {
  break-inside: avoid;
  margin-bottom: 10px;
}
.masonry-item img {
  width: 100%;
  height: auto;
  display: block;
}
.three_layout{
    grid-template-columns: repeat(3, 1fr);
}