/* fonts */
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");

:root {
    /* dark shades of primary color*/
    --clr-primary-1: hsl(205, 86%, 17%);
    --clr-primary-2: hsl(205, 77%, 27%);
    --clr-primary-3: hsl(205, 72%, 37%);
    --clr-primary-4: hsl(205, 63%, 48%);
    /* primary/main color */
    --clr-primary-5: #49a6e9;
    /* lighter shades of primary color */
    --clr-primary-6: hsl(205, 89%, 70%);
    --clr-primary-7: hsl(205, 90%, 76%);
    --clr-primary-8: hsl(205, 86%, 81%);
    --clr-primary-9: hsl(205, 90%, 88%);
    --clr-primary-10: hsl(205, 100%, 96%);
    /* darkest grey - used for headings */
    --clr-grey-1: hsl(209, 61%, 16%);
    --clr-grey-2: hsl(211, 39%, 23%);
    --clr-grey-3: hsl(209, 34%, 30%);
    --clr-grey-4: hsl(209, 28%, 39%);
    /* grey used for paragraphs */
    --clr-grey-5: hsl(210, 22%, 49%);
    --clr-grey-6: hsl(209, 23%, 60%);
    --clr-grey-7: hsl(211, 27%, 70%);
    --clr-grey-8: hsl(210, 31%, 80%);
    --clr-grey-9: hsl(212, 33%, 89%);
    --clr-grey-10: hsl(210, 36%, 96%);
    --clr-white: #fff;
    --clr-red-dark: hsl(360, 67%, 44%);
    --clr-red-light: hsl(360, 71%, 66%);
    --clr-green-dark: hsl(125, 67%, 44%);
    --clr-green-light: hsl(125, 71%, 66%);
    --clr-secondary: hsla(182, 63%, 54%);
    --clr-black: #222;
    --ff-primary: "Roboto", sans-serif;
    --ff-secondary: "Open Sans", sans-serif;
    --transition: all 0.3s linear;
    --spacing: 0.25rem;
    --radius: 0.5rem;
    --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    --max-width: 1170px;
    --fixed-width: 620px;
  }

  html {
    scroll-behavior: smooth;
  }
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

/* nav */

.wrapper{
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0 auto;
  max-width: 1550px;
  padding-top: .5rem;
  width: 93%;

}

.main-header a{
  letter-spacing: .18rem;
  text-align: center;
}
.masthead{
  /* Both of these are needed to keep the #menu-toggle visible when nav list is active / open. */
  position: relative;
  z-index: 1000;
  /********************************/
  top: 0;
  left: 0;
  width: 100%;
  align-items: baseline;
  display: flex;
  justify-content: space-between;
}
.masthead h1{
  transition-delay: 450ms;
}

.menu-toggle{
  cursor: pointer;
  width: 55px;
  z-index: 3;
  padding: 10px;
}

.menu-toggle div{
  background-color: #ccc;
  border-radius: 25px;
  box-shadow: 0px 3px 13px rgba(0,0,0,.3);
  height: 7px;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(.13,.24,.35,1.64);
  
}

.menu-toggle .one,
.menu-toggle .two{
    margin-bottom: 7px;
}

.main-contents{
    flex: auto;
}

.main-contents h2{
  letter-spacing: 1.5px;
  margin-bottom: .6rem;
  
}

.main-contents p{
  font-size: 1.1rem;
  letter-spacing: 1.7px;
  line-height: 1.35;
       color: #ccc;
       transition-delay: 150ms;
       transition-duration: 850ms;
}

/*** Just getting silly now ***************************/
.main-footer span{
/*      color: #ccc; */
   transition-delay: 150ms;
   transition-duration: 1350ms;
}

/*********************************************/
.main-footer{
  font-size: .9em;
  letter-spacing: .18rem;
  margin-bottom: 1.5rem;
   margin-top: 4rem;
  text-align: center;
  text-transform: uppercase;
}


/************* Style and animate the nav overlay ***********************/
.main-nav-list::before,
.main-nav-list::after{
  background-color:black;
  filter: brightness(20%);
  opacity: 0.5;
  content:"";
  position: absolute;
  top: 0;
  height: 100vh;
  width: 0vw;
  transition: all 100ms ease-in-out 300ms;
}

.main-nav-list::before{
  left: 0;
}
.main-nav-list::after{
  right: 0;
}

.main-nav-list ul{
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
  z-index: 2000;
}

.main-nav-list a{
  display: block;
  font-size: 5em;
  letter-spacing: 3px;
  margin-bottom: 50px;
  opacity: 1;
  text-align: center;
  color: whitesmoke;
  text-decoration: none;
  transition-delay: 130ms;
  
}
.main-nav-list li{
  list-style-type: none;
  font-family: monospace;

}
.main-nav-list .mobile-hide{/** Hide the link when viewing site on mobile devices. **/
  display: none;
}

/************* Style the nav elements when active. ***********************/
.masthead.active h1{
  text-shadow: 0px 3px 3px rgba(0,0,0,.4);
}

.menu-toggle.active .one{
  box-shadow: 0px 3px 13px rgba(0,0,0,.4);
  transform: translate(0, 14px) rotate(45deg);
}

.menu-toggle.active .two{
  background-color: transparent;
  box-shadow: none;
  transform: translateX(-55px);
}

.menu-toggle.active .three{
  box-shadow: 0px 3px 13px rgba(0,0,0,.4);
  transform: translate(0,-14px) rotate(-45deg);
}

.main-nav-list.active::before,
.main-nav-list.active::after{
  width: 25vw;
/*     transition-duration: 1000ms; */
}
.main-nav-list.active ul{
  top: 50%;
  transform: translate(-50%,-50%);
  transition-delay: 560ms;
  transition-duration: 240ms;
  transition-timing-function: cubic-bezier(.1, .2, .3, 1.4);
}

.main-nav-list.active a{
  transition-delay: 600ms;
  opacity: 1;
}


/*** Just getting silly now ***************************/
.wrapper.active p{
   color: rgb(50, 101, 134);
             transition-delay: 150ms;
   transition-duration: 350ms;
}

.main-footer.active span{
   color: rgb(50, 101, 134);
        transition-duration: 350ms;
}


/* body */

.hero {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

#heroVideo {
 position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: brightness(50%)
}

.hero-content {
    position: absolute;
    display: block;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    z-index: 1;
}

.hero-content h1 {
    font-size: 5em;
    margin-bottom: 10px;
}

.hero-content p {
    font-size: 1.5em;
}

.btn {
    text-transform: uppercase;
    background: transparent;
    color: var(--clr-white);
    padding: 0.375rem 0.75rem;
    letter-spacing: var(--spacing);
    display: inline-block;
    transition: var(--transition);
    font-size: 0.875rem;
    border: 2px solid var(--clr-white);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    border-radius: var(--radius);
    text-decoration: none;
  }

  /* Section */
  .section {
    padding-bottom: 5rem;
    
  }
 
  .section-center {
    width: 80%;
    margin: 0 auto;
    max-width: 1170px;
    text-align: center;
  }

  .title  {
    font-size: 2em;
  }

  .title span {
    color: var(--clr-secondary);
  }
  #about,
  #work,
   {
    height: 80vh;
  }
  /* about section */
  .about-content {
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: left;
  }
  
  .about-text {
    max-width: 600px;
  }
  
  .about-text h1 {
    font-size: 2em;
  }
  
  .about-text p {
    font-size: 1.2em;
  }
  
  .about-image img {
    border-radius: 60%;
    width: 230px; /* Adjust the size as needed */
    height: 220px;
    object-fit: cover;
    border: 2px solid #fff; /* Optional border styling */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional box shadow */
  }

  .links {
    display: flex;
    margin: auto;
    height: 3vh;
  }


.work-previews {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 180px; /* Add padding to the container */
  padding-top: 0px;
 
}

.work-preview {
  width: calc(33.3333% - 0px); /* Three previews per row with reduced margin */
  text-align: center;
  margin-bottom: 20px; /* Optional: Add margin only at the bottom for vertical spacing */
}

.work-preview img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ddd;
}

.work-preview h3 {
    font-size: 18px; /* Adjust the font size as needed */
    margin-top: 10px; /* Add some top margin for spacing */
    color: #333; /* Set the text color */
    text-align: center; /* Center the text */
    transition: color 0.3s; /* Add a transition effect for color changes */
    
    
   
}

.work-preview h3:hover {
    color: #777; /* Change the text color on hover */
}
 
@media (max-width: 1025px) {
  .work-preview{
    width: 100%; /* Full width for smaller screens */
  }

  .work-previews {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 50px; /* Add padding to the container */
    padding-top: 0px;
    
  }
  .work-preview h3 {
    border-bottom-color:  #333; /* Your desired color for mobile underline */;
}

.work-preview h3:hover {
    border-bottom-color: #333; /* Your desired hover color for mobile underline */;
}

  #about,#work {
    padding-bottom: 10px;
}
  .about-content {
    flex-direction: column; /* Stack items on top of each other */
    text-align: center; /* Adjust text alignment */
    font-size: 80%;
  }

  .about-image,
  .about-text {
    width: 100%; /* Full width for individual items */
    margin-bottom: 20px; /* Add spacing between items */
    
  }
  .about-image{
    text-align: center; /* Center the image within its container */
  }
  .about-image img {
    display: inline-block; /* Align the image as inline block */
    border-radius: 50%;
    width: 200px; /* Adjust the size as needed */
    height: 170px;
    object-fit: cover;
    border: 2px solid #fff; /* Optional border styling */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional box shadow */
  }

  .hero {
    height: 100vh; /* Set the hero section height to cover the viewport */
}

#heroVideo {
    width: 100%;
    height: 100%;
    top: 0; /* Adjust to keep the video at the top on mobile */
    transform: none; /* Reset transform on mobile */
}

ul{
  padding-left: 0;
}

.main-nav-list a{
  display: block;
  font-size: 3em;
  letter-spacing: 3px;
  margin-bottom: 50px;
  opacity: 1;
  text-align: center;
  color: whitesmoke;
  text-decoration: none;
  transition-delay: 130ms;
  align-items: center;
  padding-left:0px !important;

}

.main-nav-list ul{
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
  z-index: 2000;
  padding-left: 0px !important;
}

}


footer {
    background-color: ;
    color: #fff;
    text-align: center;
    padding: 20px;
    position: fixed;
    bottom: 0;
    width: 100%;
}