/* Box Model Hack */
* {
  box-sizing: border-box;
 
}

:root {
  /* icon size increases / decreases the icon size. 0rem means it's native font size - 16.2px */
  --icon-size: 0;
  
  /* icon gap pushes the rightmost element to the right this amount. icon stays stationary in the left margin  */
  --icon-gap: 0rem;

  /* --icon-vertical-offset: 2%; currently unused.*/

  /* section gap controls the gap below each major section. Increase adds more space */
  --section-gap: 3.125rem;

  /* icon gutter controls the icon offset from the rightmost element */
  --icon-gutter: 2.25rem;

  --project-gap: 1.5rem;

  /* fluid gap & height bounds for corporate logos */
  /* .75rem, 2vw 1.75rem */
  --logo-gap: clamp(1rem, 2vw, 1.75rem);

  /* 32px 4vw 64px */
  --logo-height: clamp(50px, 3vw, 64px);

  
  /* p */
  --fs-2: 1rem;
  /* h1 */
  --fs-8: 2.027rem;
   /* h2 */
  --fs-7: 1.802rem;
  /* h3 */
  --fs-6: 1.602rem;
  /* h4 */
  --fs-5: 1.424rem;
  /* h5 */
  --fs-4: 1.266rem;
  /* h6 */
  --fs-3: 1rem;
  /* captioning */
  --fs-1: .9rem;
}

body {
  font-family: Helvetica, sans-serif;
  margin: 5%;
  /* was 10% */
}
.page-wrapper{
  max-width: 1200px;
  /* was max-width 1100px */
  margin: 0 auto;
}

main {
  margin-bottom: 12%;
}

section {
  margin-bottom: var(--section-gap)
}


a {
  text-decoration: none;
}

span {

}
h1 {
  font-size: var(--fs-8) 
}
h2 {
  font-size: var(--fs-7);
  font-weight: 600;
}
h3{
  font-size: var(--fs-6);
}
h4{
  font-size: var(--fs-5);
}

h5{
  font-size: var(--fs-4);
}
h6{
  font-size: var(--fs-3);
}
p {
  font-size: var(--fs-1);
}
/* Span styles */
.bold{
  font-weight:900;
}
.italic{
  font-style: italic;
}
.serif{
  font-family: 'Times New Roman', Times, serif;
}
/* ======================= */
/* ======================= */
/* ICONS */
/* ======================= */
/* ======================= */


.icon{
  font-style: normal;
  font-weight: normal;
  font-size: var(--icon-size);
  line-height: 1;
  display: inline-block;
  position: relative;
  margin-left: calc(-1 * var(--icon-gutter));
  /* color: rgb(240, 183, 181); */
  color: rgb(245 183 205);
}
/* mail icon */
.mail{ 
  margin-left: 0;
  margin-left: calc(-1 * var(--icon-gutter)); 
}
/* smiley */
.sentiment_satisfied{
  /* resolves the icon sitting too high */
  padding-top: .3rem;  
}
/* .project-text span.project-arrow */
.arrow-right { 
  margin: 0;
  padding: 0px;top: -4px;left: 7px;
}



/* David logo header */
.header-graphic{
  display: flex;
  width: 300px;
  margin-bottom:var(--section-gap);
}
.header-graphic img{
  width: 100%;
}
/* Intro Paragraph with icon */
.intro-p-icon-container {
  display: grid;
  grid-template-columns: var(--icon-size) 1fr;
  column-gap: var(--icon-gap);
  margin-bottom: var(--section-gap);
}


/* The intro paragraph is being treated as h2 */
.intro-p {
  font-size: var(--fs-7);
  line-height: 1.25;
  margin: 0;
}
.p-link {
  font-weight: 600;
  /* color: rgb(240, 183, 181); */
  color: rgb(245 183 205);
}


/* Client logos and contact */
.clients-wrapper {
  display: flex;
  width: 100%;
  align-items: flex-start;
  
}
/* the whole block that contains the diamond + the three <ul> rows */
.logos-container{
  display: grid;
  /* 1st col is “visual only” (0 px), 2nd col is everything else  */
  grid-template-columns: var(--icon-size) 1fr;   /* --icon-size is 0 rem */
  column-gap: var(--icon-gap);                   /* keeps left column    */
}


/* 2 ─ add the same spacing *only* in front of every UL except the first */
.logos-container ul{
  grid-column: 2;
  margin-top: var(--logo-gap - 1rem);
  list-style: none;
  padding-right: 6rem;
}
.logos-container ul:first-of-type{
  margin-top: -.75rem; 
}

.logos-container{
  flex: 0 0 52%;
  max-width: 52%;
  min-width: 0;
}

.contact-container{
  flex: 0 0 47%;
  max-width: 47%;
  min-width: 0;
}


.logo-row {
  /* flex layout */
  width: 100%;
  
  display: flex;
  justify-content: space-between;
  gap: var(--logo-gap);
}

.logo-row img{

  height: 54px;
  max-width: 100%;
  /* width: auto; */
  display: block;
}
.logo-row li,
.logo-row img{
  min-width: 0;
}


/* ------------------------- */
/* Specific logo adjustments */
/* ------------------------- */
li.amazon-logo {
  padding-top: .65rem;
}
li.cambells-logo{
  padding-top: .25rem;
}
li.champion-logo{
  padding-top: .45rem;
}
li.ka-logo{
  padding-top: .075rem;
}
li.powerbar-logo{
  padding-top: .2rem;
}
li.viasat-logo{
  padding-top: -.075rem;
}
li.walmart-logo{
  padding-top: .25rem;
}
li.whirlpool-logo{
  padding-top: .4rem;
}

.contact-col{
  flex: 0 0 47%;
  max-width: 47%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.contact-container{
  max-width: 70%;
  display: grid;
  grid-template-columns: var(--icon-size) 1fr;
  column-gap: var(--icon-gap);
  /* margin-bottom: var(--section-gap); */
  padding-left: calc(1 * var(--icon-gutter))
}
.contact-container{
  margin-bottom: .5rem;
}

.clients-wrapper{
  display:flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.contact-list {
  display: flex;
  line-height: 1.5;
  font-weight: 600;
  font-size: var(--fs-3)
}
.contact-list a{
  color: black;
}
.linkedin-icon {
  width: 22px;
  padding-left: 3px;
  padding-top: .1rem;
}



/* Projects Section heading with icon */
.section-heading {
  display: grid;
  grid-template-columns: var(--icon-size) 1fr;
  gap: var(--icon-gap);
  margin-bottom: var(--section-gap);
}

/* Project grid */
.project-section-container{
  width: 100%;
}
.projects-wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
}
.project-div {
  width: 48%;
}

.project-img {
  aspect-ratio: 16 / 9;
  overflow: hidden; 
  width: 100%;
  /* outline: 2px dotted gray; */
  border-radius: 1%;
}
.project-img > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.project-name{
  font-weight: 400;
  color: gray
}
.project-img a {
  padding: 2.5%;
}
.project-img video{
  margin-top: -1.15rem;
  width: 100%;
  height: auto;
}
.project-div .beans-video{
  margin-top: -.9rem;
}
.project-div .spaghettios-video{
  margin-top: -.5rem;
}
.project-heading {
  display: flex;
  justify-content: space-between;
  padding: 3% 0 2% 0;
  font-weight: 600;
  font-size: var(--fs-2);
}

.project-name-and-arrow{
  justify-content: space-around;
  display: flex;
}
#rain-arrow{
  padding: 0px; top: -5px; bottom: 5px; 
}


.info{
  
  font-size: var(--fs-2);
}

/* ---------------------- */
/* breakpoints */
/* ---------------------- */
@media(max-width: 1300px){
  
  .adobe-logo{
    padding-top: .125rem;
  }
   .handshake{
    padding-top: .125rem;
  }
  
}


@media (max-width: 1050px) {
  body{
    margin: 6%;
  }
    :root{
  /* p */
  --fs-2: 1.25rem;
  /* h1 */
  --fs-8: 2.527rem;
   /* h2 */
  --fs-7: 2.502rem;
  /* h3 */
  --fs-6: 2.102rem;
  /* h4 */
  --fs-5: 1.924rem;
  /* h5 */
  --fs-4: 1.766rem;
  /* h6 */
  --fs-3: 1.35rem;
  /* captioning */
  --fs-1: 1rem;

   --logo-gap: clamp(1rem, 5vw, 4rem);
   --logo-height: clamp(50px, 10vw, 75px);

   /* spacing between projects on mobile */
   --project-gap: 2rem;
  }

  .header-graphic{
    width: 225px;
  }
  /* icon adjustments */
  /* ------------------- */
 .sentiment_satisfied{
  /* resolves the icon sitting too high */
    padding-top: .6rem;
  }
  /* star */
  /* .material-symbols-outlined.section-logo.star */
  .mail,
  .linkedin{
  margin-left: calc(-1 * var(--icon-gutter));
  position: relative;
  padding-top: .25rem;
  }
  .linkedin-icon{
    padding-top: .6rem;
  }
 
  
  .image-icon{
    padding-top: .25rem;
  }
   
  .clients-wrapper,
  .projects-wrapper{
    flex-direction: column;
  }
  #contact.contact-col{
    width: 100%;
    max-width: 100%;
    gap: .25rem;
  }
  .contact-container{
    width: 100%;
    grid-template-columns: var(--icon-size) 1fr;
    column-gap: var(--icon-gap);
    margin-bottom: var(--project-gap);
    padding-left: 0;
}
  .contact-list{
    margin: 0;
    width: 100%;
    
  } 
  

  .logos-container{
    max-width: 95%;
    margin-bottom: var(--section-gap);
    margin-top: var(--section-gap);
  }

  .logos-container ul{
    padding-right: 0;
    width: 100%;
  }

  .logos-container ul:first-of-type{
  margin-top: -.25rem; 
}
  .logo-row {
    height: var(--logo-height);
  }
  .logo {
   max-height: 30px;
   min-height: 25px;
  }
  /* Individual logos */
  .adobe-logo{
    padding-top: .2rem;
  }

  /* .logo-list{
    justify-content: flex-start;
  } */
  /* adjust the min-height to change the limit between projects.  */
  .project-div{
    width: 100%;
  }
  /* increasing max-height allows the sequential image to fill the space left by the div above. Change the vh height if you want a wider aspect ratio like David's sketch.  */
  .project-img{
    /* height: 45vh; */
    max-height: 360px;
  }

  .project-img video{
    margin: -5.85rem 0 0 0
  }

  .project-div .beans-video{
  margin-top: -5.7rem;
}
  .project-div .spaghettios-video{
  margin-top: -4.75rem;
}

  .project-text{
    padding: 3% 0 5% 0;
    
  }
  .project-brand,
  .project-name{
    font-size: var(--fs-2);
  }

  /* .project-text span.project-arrow  */
  .arrow-right{
  margin: 0;
  padding: 0px;top: -2px;left: 7px;
}
#rain-arrow{
  padding: 0px; top: -2px; bottom: 5px; 
}

.beansAndBrew{
  outline: none;
}

}

@media (max-width: 1000px) {
  .project-img video{
    margin: -5.25rem 0 0 0
  }
  .project-div .beans-video{
  margin-top: -4.65rem;
}
.project-div .spaghettios-video{
  margin-top: -3.75rem;
}

}
   

@media (max-width: 950px){
  
     .project-img video{
    margin: -3.75rem 0 0 0
  }
  .project-div .beans-video{
  margin-top: -3.5rem;
}
.project-div .spaghettios-video{
  margin-top: -2.5rem;
}

}


@media (max-width: 850px){
  :root{
  /* p */
  --fs-2: 1rem;
  }

  .intro-p {
  font-size: var(--fs-5);
  line-height: 1.35;
  }
  .logos-container{
    width: 100%;
  }
  .material-symbols-outlined,
  .icon{
    visibility: collapse;
  }
   .project-img video{
    margin: -3rem 0 0 0
  }
  .project-div .beans-video{
    margin-top: -2.75rem;
}
  .project-div .spaghettios-video{
    margin-top: -2rem;
}
.perfect_ai_assist{
  /* width: 50%; */
}
  

}

@media (max-width: 775px) {
     .project-img video{
    margin: -1.65rem 0 0 0
  }
  .project-div .beans-video{
    margin-top: -1.25rem;
}
  .project-div .spaghettios-video{
    margin-top: -.75rem;
}
}

@media (max-width: 700px) {
     .project-img video{
    margin: -1.5rem 0 0 0
  }
  .project-div .beans-video{
  margin-top: -.9rem;
}
.project-div .spaghettios-video{
  margin-top: -.5rem;
}
}

@media (max-width: 600px) {
  .intro-p {
  font-size: var(--fs-3);
  line-height: 1.35;
  }
     .project-img video{
    margin: -1.15rem 0 0 0
  }
}
@media (max-width: 500px){
     .project-img video{
    margin: -.95rem 0 0 0
  }
}