/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


/* Import Martian Mono from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Martian+Mono:wght@400;600&display=swap');

/* Base Styles */
html {
  scroll-behavior: smooth;
}

body, footer {
  font-family: 'Martian Mono', monospace;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #1a1a1a; /* Almost black with a tad of grey */
  margin: 0;
  padding: 0;
  background-color: #fffbf0;
}

button {
  font-family: 'Martian Mono', monospace;
  font-weight: 400;
  font-size: 16px;
  }

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Martian Mono', monospace;
  font-weight: 600; /* Semi-bold */
  margin: 0 0 1rem 0;
  line-height: 1.2;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 28px;
}

h3 {
  font-size: 22px;
}

h4 {
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: .02em;
}

h5 {
  font-size: 16px;
}

h6 {
  font-size: 14px;
  color: gray;
}

/* Paragraphs */
p {
  font-size: 14px;
  font-family: 'Martian Mono', monospace;
  font-weight: 400;
  margin: 0 0 1.2rem 0;
}


a {
  text-decoration: none; /* no underline */
  color: #1a1a1a;
}

nav a {
  color: #D8513D;
}

nav a:hover {
  color: #db351d;
  font-weight: 600;
  transform: translateY(-1px);
  }

.main-nav {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  background-color: #ffebe8;
  flex-direction: row;
  width: 250px;
  justify-content: space-between;
  padding: 12px 48px 12px 48px;
  border-radius: 60px;
  border: 2px solid #D8513D;
  /*-webkit-box-shadow: 1px 0px 39px -10px rgba(177,255,78,0.68); 
box-shadow: 1px 0px 39px -10px rgba(177,255,78,0.68);*/


  overflow: hidden; /* Ensures content within the navbar stays within bounds */
  position: fixed; /* Fixes the navbar position relative to the viewport */
  z-index: 1000;
  }
.case-study-content {
  display: flex;
  flex-direction: column;
  gap: 16px;

  }  
.case-details-content {
    display:flex;
    flex-direction: column;
    gap: 48px;
    max-width:750px;
  }
  
.case-section {
  display: flex;
  flex-direction: column;
  
  }

/* DESKTOP FLEX STYLING */

main {
  background-color: #fffbf0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 88px;
  padding: 104px;
  padding-top: 48px;
  position: relative; /* creates stacking context */
  z-index: 1;         /* ensures it's above the footer */
  border-radius: 0px 0px 48px 48px;
  margin-bottom: 75vh;
}

.back-home-button {
    display: flex;
    flex-direction:column;
    padding-top:24px;
    padding-left: 104px;
    justify-content: flex-start;
  }
  
.back-home-button a {
    color: #D8513D;
    padding: 8px;
    
  }
  
  .back-home-button a:hover {
    color: #db351d;
  font-weight: 600;
  }

  
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 85vh;      /* adjust as needed */
  background: #1a1a1a;
  z-index: -1;       
}

.footer-content {
  display: flex;
  flex-direction: column;
  color: white;
  padding: 88px;
    padding-top: 240px;
    gap: 24px;
  }
.footer-image {
  max-width: 88px;
  margin: 88px;
  display: flex;
  flex-direction: column;
  align-self: flex-end;
  }
.hero {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 80px;
  }
  
#header-text {
  min-width: 400px;
  max-width: 650px;
  }
  
#header-text h1 {
    padding-bottom: 24px;
  }
#header-image {
  display: flex;
  }
#header-image img {
    height: 85vh;
    border: 2px solid #1a1a1a;
    border-radius: 12px;
  }
  
      
  .case-study-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
     padding-top: 24px;
     height: 100vh;
    background: green;
    }
    
  .case-study-section-head {
    min-width: 300px;
    }
    
     .case-study-content {
    display: flex;
    flex-direction: column;
    gap: 48px;
    justify-content: center;
    }
    
  .case-study {
    display: flex;
    flex-direction: column;
    justify-content: center; gap: 12px;
    border: 2px solid #1a1a1a;
    padding: 48px 64px 48px 64px;
    border-radius: 12px;
    background-color: #fcfaf5;
    max-width: 850px;
    
    }
    
  .case-study:hover {
    transform: translateY(-2px);
-webkit-box-shadow: 9px 9px 0px 2px #1a1a1a; 
box-shadow: 9px 9px 0px 2px #1a1a1a;
    }
    
 .case-study:hover h3 {
   font-weight: 800;
   color: #bf4736;
   }
    
  .case-study-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    gap:48px;
    }
    
  .case-study-left {
    display: flex;
    flex-direction: column;
    max-width: 800px;
    }
    
  .case-study-right {
    display: flex;
    flex-direction: column;
    min-width: 240px;
    text-align: right;
  }    
  .case-myRole {
    display: flex;
    flex-direction: column;
    }
    
  .case-study-right h5 {
    padding-bottom: 0px;
    margin-bottom: 4px;
    }
    
  .case-Timeline {
    display: flex;
    flex-direction: column;
    }
    
  .case-image-1, .case-image-2 {
    display: flex;
    justify-content: center;
    background-color: blue;
    padding: 48px;
    border-radius: 12px;
    }
  .case-image-1 img {
    width: 100%;
    }
  
  .case-image-2 img {
    width: 100%
    }
  
  .case-image-1 {
    background-color: #CABC3F;
    }
  .case-study > .case-image-2 {
    background-color: #7997DB;
    }
    

    .previous-work {
  display: flex;
  flex-direction: column;
  gap: 8px;
  }
  
  .carousel {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly; /* optional spacing between columns */
               /* lets items wrap on smaller screens */
  gap: 16px;
}

.carousel > .previous-project {
  flex: 1 1 33%;
  max-width: 33%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;     /* vertical center */
  justify-content: center; /* horizontal center */
  padding-top:24px;
  padding-bottom: 8px;
  border-radius: 12px;
  gap: 6px;
}

.carousel > .previous-project:hover {
  border: 2px solid black;
  background-color: #fffefa;
  transform: translateY(-2px);
-webkit-box-shadow: 9px 9px 0px 1px #1a1a1a; 
box-shadow: 9px 9px 0px 1px #1a1a1a;
}


.carousel > .previous-project > h5 {
  padding-top:24px;
  }

.carousel img {
  width: 90%;        /* image scales down to fit parent div */
  height: auto;
  display: block;
  border-radius: 8px;
  border: 2px solid #1a1a1a;
}



.testimonials {
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin: 0px;
    padding: 0px;
    width: 100%;
  }
  
  .testimonial-content {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    /*
background-color: #F0B9B1;
 border: 2px solid #bf4736;
    */
    border-radius: 12px;
    gap: 24px;
    }
    
  
  .align-left {
    display: flex;
    justify-content: flex-start;;
  }
  
  .align-right {
    display: flex;
    justify-content: flex-end;
  }

    
    
    .testimonial-text {

        background-color: #fffbf0;
        color: #1a1a1a;
        border-radius: 12px;
      
        border: 2px solid #bf4736;
        padding: 48px;
      }
  
  .footer-links {
    display: flex;
    flex-direction: row;
    gap: 16px;
    
    }
    
    
  
  button {
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  background-color: #1a1a1a;
  border: 2px solid white;
  border-radius: 60px;
  align-content: center;
  justify-content: center;
}



  button:hover {
    background-color: #f5bdb5;
    color: #bf4736;
    border: 2px solid #bf4736;
    }
    
    
.arrow-icon {
  width: 24px;
  }