/*Rgamarra 2023 Porfolio Styling*/

/* -- custom font -- */
@import url('https://fonts.googleapis.com/css2?family=Chivo:ital,wght@0,400;0,500;0,700;0,900;1,700;1,900&family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&display=swap');

/*
font-family: 'Chivo', sans-serif;
font-family: 'Playfair Display', serif;
*/



html, body{
  margin:0px;
  padding:0px;
  font-family: "Nohemi" ;
  letter-spacing:.05em;
  background:#393e46;
  color:#eee;
  scroll-behavior: smooth;
}

p{
  margin: 0px;
  padding: 0px; 
}
a{
  color:#000;
}
ul{
  list-style: none;
}

h1,
h2,
h3,
h4{
  margin:0px;
  padding:0px;
}

h1{
  font-size: 4em;
  font-weight:800;
  margin-bottom: -24px;
}
h3{
  font-size: 2.5em;
  margin-bottom: 24px;
  text-transform: capitalize;
}
h4{
  margin:48px 0 12px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing:.1em;
  text-transform: uppercase;
}


/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

.card{
  background-color: #eee;
  border-radius: 20px;
  padding: 24px;
  color:#222831;
  overflow:clip;
}

/*Main Nav-----*/
.main-nav{
  width: 100%;
  padding:24px 0 24px 10%;
  display: flex;
  position:fixed;
  top:0;
  left:0;
  background: #222831;
}
.main-nav .nav-home{
  font-size: 1.2em;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform:lowercase;
  text-decoration: none;
  color:#eee;
}
.main-nav .nav-home:hover{
  color:#ffa621;
}

/*****************
*************
MAIN CONTAINER
****************
**************/
.main-container{
  margin:0px;
  padding:0px;
}

/*INTRO Section*/
.intro {
  background-color: #222831;
}
/*INTRO - Job title*/
.job-title{
  width:80%;
  margin: 0 auto;
  padding-top:min(80px , 8em);
}
.job-title p{
  font-size: clamp(4.5rem, 16vw, 18rem);
  line-height:clamp(4rem, 12.5vw, 14rem);
  text-transform: uppercase;
  font-weight: 900;
  color:#393e46;
}
.job-title span{
  font-size: clamp(4.5rem, 16vw, 18rem);
  line-height:clamp(4.5rem, 12.5vw, 14rem);
  text-transform: uppercase;
  font-weight: 100;
  color:#eee;
}

.info-block{
  width:80%;
  margin:0 auto;
  padding:2rem 0 6rem;
  display: grid;
  align-items: start;
  gap: 24px;
  grid-template-columns: 1fr 80%;
}
.info-block h3{
  margin:0px;
  text-align: end;
}
.info-block p{
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 200;
}
.info-block a{
  padding:12px 16px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  font-size: 14px;
  font-weight:500;
  text-decoration: none;
  color:#ffa621;
  border: 1px solid #ffa621;
}
.info-block a:hover{
  background-color: #e68900;
  border: 1px solid #e68900;
  color:#eee;
}

/*WORK Samples*/
.work-samples {
  padding:6em 10%;
}
.work-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  gap:24px;
}
.work-grid .card-work{
  display: grid;
  background-color: #393e46;
  aspect-ratio: 4/3;
  border-radius: 20px;
  overflow: clip;
  text-decoration: none;
}
/*Selects any child inside this class container*/
.card-work > *{
  grid-row: 1/2;
  grid-column: 1/2;
}
.card-img{
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  
}
.card-work p{
  text-align: center;
  font-size: max(2em);
  font-weight: 600;
  padding:34.5% 24px;
  color: #eee;
  background: rgba(34, 40, 49, .5);
}
.card-work:hover p{
  background: rgba(255, 166, 33, 1);
}


/*****************
*************
PROJECT PAGES
****************
**************/
.work-container{
  display: block;
  width:80%;
  margin:6rem auto 0px;
  padding:0px;
}

.work-container .project-tile{
  color:#eee;
  background-color:unset;
  padding: 0px;
  border-radius: 0px;
  margin-bottom: 24px;
}

.client-usecase span{
font-weight: 600;
text-transform: uppercase;
}
.client-usecase p{
  font-size:1rem;
  font-weight: 300;
  padding-top:6px;
}

/*WORK - Disclaimer*/
.disclaimer{
  background-color: unset;
  font-size: 14px;
  line-height: 1.5em;
  font-weight:600;
  border-radius: 0px;
  padding: 0px;
  color:#ffa621;
  margin-bottom: 24px;
}

/*WORK - mockups*/
.work-mockups{
  padding-top:24px;
  border-top: 1px solid #000;
}

.card-container {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(35rem , 1fr));
}
.mock-work{
  padding: 0px !important;
}

.mock-work .thumbnail{
  width:100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.mock-work .thumbnail-vertical{
  width:100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}

.mock-work .description{
  padding:24px;
  font-size:16px;
  line-height: 1.25em;
  font-weight:400;
  margin-bottom:0px;
}

/*WORK - quote*/

.quote {
  margin:75px 0;
  padding: 0 10%;
}
.quote p{
  margin:0px;
  padding:0px;
  font-size:2em;
  line-height:1.25em;
  font-weight:600;
  color: #ffa621;
  text-align: center;
}
.quote p:last-child{
  font-size: 1em;
  margin-top:12px;
  padding:0px;
  font-weight:600;
  color:#eee;
}
.quote p:last-child span {
  font-weight:300;
}

/*WORK - subnav*/
.project-subnav{
  margin:24px 0 48px;
  display:flex;
  justify-content: space-between;
}
.project-subnav :is(.button-secondary , .button-primary){
  padding:12px 16px 7px;
  border-radius: 6px;
  text-transform: uppercase;
  font-size: 14px;
  font-weight:500;
  text-decoration: none;
}
.project-subnav .button-primary{
  background-color: #ffa621;
  border: 1px solid #ffa621;
}
.project-subnav .button-secondary{
  color:#ffa621;
  border: 1px solid #ffa621;
  padding-bottom: 8px;
}
.project-subnav a:hover{
  background-color: #e68900;
  border: 1px solid #e68900;
  color:#eee;
}

/* -- footer --*/
.footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width:80%;
  padding: 24px 10%;
  background-color: #222831;
  color:#fff;
}

.footer p{
  width:65%;
  margin:0px;
  padding:0px;
  font-size: 14px;
  font-weight:200;
}
.footer p span{
  font-weight:500;
  margin-left:6px;
}
.footer-nav{
  width:80%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
/*Social icon in footer */
.footer-nav a{
  display:flex;
  align-items: center;
  color:#fff;
  font-size: 14px;
  padding-bottom: 6px;
  margin-left:24px;
  font-weight:500;
  text-decoration: none;
}
.footer-nav a:hover{
  color:#F6AB3C;
}

/*MOBILE -- styling*/
@media only screen and (max-width: 500px) {
  
  .work-container{
    width:90%;
  }
  .project-tile h2{
    font-size:2.5em;
  }
  .project-tile p{
    font-size: 18px;
    line-height: 1.35em;
  }
  .project-tile .client-usecase p{
    font-size: 15px;
    line-height: 1.35em;
  }

  .quote {
    padding: 0 5%;
  }

  .card-container {
    grid-template-columns: repeat(auto-fit, minmax(25rem , 1fr));
  }

}

/*Custom Font*/
/*Nohemi - Thin*/
@font-face {
  font-family: "Nohemi";
  src: url('font/Nohemi/Nohemi-Thin.otf');
  font-weight: 100;
  font-style: normal;
}
/*Nohemi - Extra Light*/
@font-face {
  font-family: "Nohemi";
  src: url('font/Nohemi/Nohemi-ExtraLight.otf');
  font-weight: 200;
  font-style: normal;
}
/*Nohemi - Light*/
@font-face {
  font-family: "Nohemi";
  src: url('font/Nohemi/Nohemi-Light.otf');
  font-weight: 300;
  font-style: normal;
}
/*Nohemi - Regular*/
@font-face {
  font-family: "Nohemi";
  src: url('font/Nohemi/Nohemi-Regular.otf');
  font-weight: 400;
  font-style: normal;
}
/*Nohemi - Medium*/
@font-face {
  font-family: "Nohemi";
  src: url('font/Nohemi/Nohemi-Medium.otf');
  font-weight: 500;
  font-style: normal;
}
/*Nohemi - Semi Bold*/
@font-face {
  font-family: "Nohemi";
  src: url('font/Nohemi/Nohemi-SemiBold.otf');
  font-weight: 600;
  font-style: normal;
}
/*Nohemi - Bold*/
@font-face {
  font-family: "Nohemi";
  src: url('font/Nohemi/Nohemi-Bold.otf');
  font-weight: 700;
  font-style: normal;
}
/*Nohemi - Extra Bold*/
@font-face {
  font-family: "Nohemi";
  src: url('font/Nohemi/Nohemi-ExtraBold.otf');
  font-weight: 800;
  font-style: normal;
}
/*Nohemi - Black*/
@font-face {
  font-family: "Nohemi";
  src: url('font/Nohemi/Nohemi-Black.otf');
  font-weight: 900;
  font-style: normal;
}