*,
*::before,
*::after{
    box-sizing: border-box;
}

body{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.25rem;

    line-height: 1.5;
    margin: 0;
    /* background-image: url(../imgs/background.png); */
    background-color: #21212e;
    color: antiquewhite;
}

html {
    scroll-behavior: smooth;
  }

.nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 200px;
    background: rgb(238,174,202);
    background: linear-gradient(180deg, rgba(238,174,202,1) 20%, rgba(148,187,233,1) 100%);
    color: #fff;
    padding: 30px;
    overflow: auto;
    z-index: 1;
    transition: all 0.3s ease-in-out;
    text-align: center;


  }
  
  .nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .nav li {
    margin-top: 80px;
    margin-bottom: 30px;
  }
  
  .nav a {
    color: #333;
    text-decoration: none;
    border: #21212e 2px solid;
    padding: 10px;
    border-radius: 20px;
    width: 20rem;

    
    
  }


    .nav a:hover {
        color: antiquewhite;
        background: rgba(148,187,233,1);
        background: linear-gradient(180deg, rgba(148,187,233,1) 20%, rgba(238,174,202,1) 100%);
       
     }
  
  /* CSS for the hero section */
  .hero {
    margin-left: 200px;
    padding: 50px;
  }
  
  .hero h1 {
    font-size: 41px;
    margin-bottom: 10px;
  }

  .hero h2 {
    font-size: 31px;
    margin-bottom: 20px;
  }
  
  
  .hero p {
    font-size: 17px;
    line-height: 1.5;
   
  }
  
  .hero img {
    max-width: 100%;
    height: auto;
  }

  #check{
      margin-top: 30PX;

  }
  
  /* CSS for the hamburger menu */
  .hamburger {
    position: fixed;
    top: 20px;
    right: 20px;
    display: none;
    z-index: 2;
  }
  
  .hamburger span {
    display: block;
    width: 30px;
    height: 3px;
    margin-bottom: 5px;
    background-color: #333;
    border-radius: 3px;
  }

  #hero{
    width: 35rem;
    
    position: relative;
    right:10px;
    z-index: -1;
    top: 50px;
  
  }

  .contain1{
    display: flex;
    flex-direction: row;



  }

  .contain2{
    display: flex;
    flex-direction: column;
    width: 41rem;
    position: relative;
    top: 50px;
    border: #fff dashed solid;
    padding: 2rem;
    left: 20px;

    background-image:  linear-gradient(
        to right, 
        #21212e,
        #424260
    );
    box-shadow:  0 0 8px 8px #21212e;
}

.button{
    margin: 0px 0 0 0px;
    

    
    
    
}
    
 .button a{
    padding: 0.5rem;
    color: #fff ;
    text-decoration: none;
    background-color: #424260; 
    border-radius: 10px;
      
     
    }
    
    .button a:hover{
      background-color: #21212e;
      color: #e3d1d1;
  
    }

    .line-1{
        position: relative;
        top: 3%;  
        width: 38rem;
        margin: 0 auto;
        border-right: 2px solid rgba(255,255,255,.75);
   
    
        white-space: nowrap;
        overflow: hidden;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-box-sizing:content-box;
        box-sizing:content-box;
    }

    .anim-typewriter{
        width:0;
        animation: typewriter 4s steps(44) 1s 1 normal both,
                   blinkTextCursor 500ms steps(44) infinite normal;
                   animation-delay: 2s;
      }

    @keyframes typewriter{
        from{width: 0;}
        to{width: 13.6em;}
      }
      
      @keyframes blinkTextCursor{
        from{border-right-color: rgba(255,255,255,.75);}
        to{border-right-color: transparent;}
      }
      
      .fade-in {
          animation: fadeIn ease 5s;
          -webkit-animation: fadeIn ease 5s;
          -moz-animation: fadeIn ease 5s;
          -o-animation: fadeIn ease 5s;
          -ms-animation: fadeIn ease 5s;
        }
        
        
        @keyframes fadeIn{
          0% {
            opacity:0;
          }
          100% {
            opacity:1;
          }
        }
        @-moz-keyframes fadeIn {
          0% {
            opacity:0;
          }
          100% {
            opacity:1;
          }
        }
        
        @-webkit-keyframes fadeIn {
          0% {
            opacity:0;
          }
          100% {
            opacity:1;
          }
        }
        
        @-o-keyframes fadeIn {
          0% {
            opacity:0;
          }
          100% {
            opacity:1;
          }
        }
        
        @-ms-keyframes fadeIn {
          0% {
            opacity:0;
          }
          100% {
            opacity:1;
          }
        }


.diagonal{
  --skew-angle: -2deg;
  --background:linear-gradient(45deg,
  #21212e, #0575e6, #363535);
  
  position: relative;
  isolation: isolate;  
   
}

.diagonal::after{
  content: '';
  background: var(--background);
  position: absolute;
  inset: 0;
  transform: skewY(var(--skew-angle));
  z-index: -2;
}

.diagonal2{
  --skew-angle: -2deg;
  --background:linear-gradient(45deg,
  #21212e, #d24427, #363535);
  
  position: relative;
  isolation: isolate;  
   
}

.diagonal2::after{
  content: '';
  background: var(--background);
  position: absolute;
  inset: 0;
  transform: skewY(var(--skew-angle));
  z-index: -2;
}

.diagonal3{
  --skew-angle: -2deg;
  --background:linear-gradient(45deg,
  #21212e, #087b6e, #363535);
  
  position: relative;
  isolation: isolate;  
   
}

.diagonal3::after{
  content: '';
  background: var(--background);
  position: absolute;
  inset: 0;
  transform: skewY(var(--skew-angle));
  z-index: -2;
}


.wavy{
  background: linear-gradient(
      to right,
      #424260,
      #0575e6
  );

  --mask:
    radial-gradient(38.10px at 50% 53.75px,#000 99%,#0000 101%) calc(50% - 50px) 0/100px 51% repeat-x,
    radial-gradient(38.10px at 50% -28.75px,#0000 99%,#000 101%) 50% 25px/100px calc(51% - 25px) repeat-x,
    radial-gradient(38.10px at 50% calc(100% - 53.75px),#000 99%,#0000 101%) calc(50% - 50px) 100%/100px 51% repeat-x,
    radial-gradient(38.10px at 50% calc(100% + 28.75px),#0000 99%,#000 101%) 50% calc(100% - 25px)/100px calc(51% - 25px) repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}

.wavy2{
  background: linear-gradient(
      to right,
      #424260,
      #d24427
  );

  --mask:
    radial-gradient(38.10px at 50% 53.75px,#000 99%,#0000 101%) calc(50% - 50px) 0/100px 51% repeat-x,
    radial-gradient(38.10px at 50% -28.75px,#0000 99%,#000 101%) 50% 25px/100px calc(51% - 25px) repeat-x,
    radial-gradient(38.10px at 50% calc(100% - 53.75px),#000 99%,#0000 101%) calc(50% - 50px) 100%/100px 51% repeat-x,
    radial-gradient(38.10px at 50% calc(100% + 28.75px),#0000 99%,#000 101%) 50% calc(100% - 25px)/100px calc(51% - 25px) repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);

    position: relative;
    top: -200px;      
}

.wavy3{
  background: linear-gradient(
      to right,
      #424260,
      #2c3155
  );

  --mask:
    radial-gradient(38.10px at 50% 53.75px,#000 99%,#0000 101%) calc(50% - 50px) 0/100px 51% repeat-x,
    radial-gradient(38.10px at 50% -28.75px,#0000 99%,#000 101%) 50% 25px/100px calc(51% - 25px) repeat-x,
    radial-gradient(38.10px at 50% calc(100% - 53.75px),#000 99%,#0000 101%) calc(50% - 50px) 100%/100px 51% repeat-x,
    radial-gradient(38.10px at 50% calc(100% + 28.75px),#0000 99%,#000 101%) 50% calc(100% - 25px)/100px calc(51% - 25px) repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}



         .work {
            position: relative;
            left: 100px;
            top: 0px;
          
          } 
          
          .work h2 {
            text-align: center;
            margin-bottom: 100px;
            font-size: 36px;
          }
          
          #head{
            position: relative;
            top: 0;
            opacity: 0;
          
          
          }
          .card-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            margin: 0 20px;
          }
          
          .card {
            width: calc(40% - 40px);
            margin-bottom: 40px;
            
            box-shadow: 0px 0px 10px rgb(255, 255, 255);
            transition: all 0.3s ease-in-out;
            background: rgba(148,187,233,1);
            background: linear-gradient(160deg, rgba(148,187,233,1) 20%, rgba(238,174,202,1) 100%);
            filter: grayscale();
            opacity: 0;
          }
          
          .card:hover {
            transform: translateY(-5px);
            box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
            filter: none;
           
          }
          
          .card img {
            width: 100%;
            height: auto;
            margin-bottom: 10px;
            border-bottom: #21212e 5px solid;
         
          }

          /* .card img:hover {
            width: 100%;
            height: auto;
            margin-bottom: 10px;
            border-bottom: #21212e 5px solid;
            filter: none;
          }
           */
          
          .card h3 {
            font-size: 21px;
            margin-bottom: 10px;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
            color: #21212e;
          }
          
          .card p {
            font-size: 18px;
            margin-bottom: 30px;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
            color: #21212e;
          }
          
          .card .button {
            display: block;
            text-align: center;
            font-size: 16px;
          
            background-color: #424260; 
            color: #fff;
            text-decoration: none;
           
            transition: all 0.3s ease-in-out;
          }
          
          .card .button:hover {
            background-color: #21212e;
            color: #e3d1d1;
          }

          .about {
            position: relative;
            left: 240px;
            top: 200px;
           
            background-color: #21212e;
          }
          
          .about-container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            width: calc(85% - 20px);
      
          }
          
          .about-img {
            margin-right: 80px;
          }
          
          .about-img img {
            width: 100%;
            max-width: 380px;
            height: auto;
            padding-left: 20px;
          }

          .about-info{
         
            background-image:  linear-gradient(
                to left, 
                #21212e,
                #424260
            );
            box-shadow:  0 0 8px 8px #21212e;
            padding: 20px;
          }
          
          .about-info h2 {
            font-size: 28px;
            font-weight: bold;
           
          }
          
          .about-info p {
            font-size: 17px;
            line-height: 1.5;
            margin-bottom: 30px;
          }

          #resume{
            margin-top: 30px;


          }
          
          #cof{
            opacity: 1;

          }

          .contact {
            position: relative;
            top: 300px;
            left: 40px;
            background-color: #21212e;
          }
          
          .contact-container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
          }
          
          .contact-img {
            margin-right: 250px;
          }
          
          .contact-img img {
            width: 100%;
            max-width: 500px;
            height: auto;
            margin-left: 160px;
          }
          
          .contact-form {
            max-width: 600px;
            margin-bottom: 30px;
            background-image:  linear-gradient(
              to right, 
              #21212e,
              #424260
          );
          }
          
          .contact-form h2 {
            font-size: 34px;
            font-weight: bold;
            margin-bottom: 40px;
            padding-right: 30px;
          }
          
          .contact-form form {
            display: flex;
            flex-direction: column;
            
          }
          
          .contact-form label {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
          }
          
          .contact-form input,
          .contact-form textarea {
            padding: 10px;
            margin-bottom: 20px;
            border: none;
            border-radius: 5px;
            width: 90%;
          }
          
          .contact-form input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
          }
          
          .contact-form input[type="submit"]:hover {
            background-color: #45a049;
          }

          /* casestudy styles */
          .case-study {
            max-width: 100%;
            margin: 0 auto;
            
          }
          
          .case-study nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgb(238,174,202);
            background: linear-gradient(180deg, rgba(238,174,202,1) 20%, rgba(148,187,233,1) 100%);
            padding: 40px 0;
            border-bottom: 1px solid #ddd;
            width: 100%;
          }
          
          .case-study nav a.home {
            color: #333;
            text-decoration: none;
            border: #21212e 2px solid;
            padding: 10px;
            border-radius: 20px;
            margin-left: 40px;
            
            
          }

          .case-study a:hover {
            color: antiquewhite;
            background: rgba(148,187,233,1);
            background: linear-gradient(180deg, rgba(148,187,233,1) 20%, rgba(238,174,202,1) 100%);
         }
      
          
          .case-study h1 {
            font-size: 28px;
            font-weight: normal;
            margin: 0;
            margin-right: 40px;
            color: #000;
          }
          
          .case-study h2 {
            font-size: 24px;
            margin: 50px;
          }
          
          .case-study section {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin: 50px 0;
       
          }
          
          .case-study section:nth-child(even) .media {
            flex-direction: row-reverse;
          }
          
          .case-study section .media {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin: 0 20px;
          }
          
          .case-study section .media .description {
            flex: 1;
            margin: 50px;
          }
          
          .case-study section .media .image {
            flex: 1;
            text-align: center;
        
          }
          
          .case-study section .media .image img {
            max-width: 100%;
            max-height: 400px;
            object-fit: contain;
            outline: antiquewhite 5px solid;
            border-radius: 20px;
         
            
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
          }
          
          .case-study section .media .video {
            flex: 1;
            margin: 0 20px;
            position: relative;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */
            height: 0;
          }
          
          .case-study section .media .video iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
          }
          
          .case-study section .final-project {
            text-align: center;
            margin-top: 100px;
          }
          
          .case-study section .final-project .button {
            display: inline-block;
            padding: 10px 30px;
            background-color: #007bff;
            color: #fff;
            font-size: 18px;
            border-radius: 5px;
            text-decoration: none;
            transition: all 0.3s;
          }
          
          .case-study section .final-project .button:hover {
            background-color: #0069d9;
          }

          .project-overview{
            border-bottom: antiquewhite 5px solid;
            padding-bottom: 60px;
            

          }

          .project-overview .media {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
          }
          
          .project-overview .media .description {
            flex: 1;
            max-width: 50%;
            padding-right: 80px;
          }
          
          .project-overview .media .video {
            flex: 1;
            max-width: 50%;
            padding-right: 600px;
            
          }
            
          .project-overview .media .video iframe {
            width: 100%;
            height: 100%;
          }

          .project-planning{
            border-bottom: antiquewhite 5px solid;
            padding-bottom: 60px;


          }

          .process-implementation{
            border-bottom: antiquewhite 5px solid;
            padding-bottom: 60px;


          }

          .user-experience{
            border-bottom: antiquewhite 5px solid;
            padding-bottom: 60px;

          }

    

          #pro-over{
             margin-left: 60px;


          }

          .description{
            margin-left: 80px;


          }

          #final{
            margin-right: 60pc;
            

          }

  
  /* CSS for responsive design */
  @media only screen and (max-width: 768px) {
    .nav {
      position: absolute;
      width: 100%;
      background-color: #fff;
      color: #333;
      padding: 0;
      height: auto;
      max-height: 0;
    }
    
    .nav.show {
      max-height: 100%;
    }

    .nav img{
      display: none;

    }
    
    .nav ul {
      flex-direction: column;
    }
    
    .nav li {
      margin-bottom: 60px;
    }
    
    .nav a {
      color: #333;
    }

    .button{
      margin: 0px 0 0 0px;
      
      
      
  }
      
   .button a{
      padding: 0.5rem;
      color: #fff ;
      text-decoration: none;
      background-color: #424260; 
      border-radius: 10px;
        
       
      }
      
      .button a:hover{
        background-color: #21212e;
        color: #e3d1d1;
      }
      .hero h1 {
        font-size: 24px;
        margin-bottom: 10px;
      }
    
    .hero {
      margin-left: 0;
      padding: 0px;
    }

    .hero h2 {
      font-size: 20px;
      margin-bottom: 20px;
    }
    
    
    .hero p {
      font-size: 20px;
      line-height: 1.5;
     
    }
    
    .hero img {
      max-width: 100%;
      height: auto;
    }
    
    .hamburger {
      display: block;
    }
    .contain1{
        display: flex;
        flex-direction: column;


    }

  
    .contain2{
      display: flex;
      flex-direction: column;
      width: 100%;
      position: relative;
      top: 90px;
      left: 0;
      border: #fff dashed solid;
     
      
  
      background-image:  linear-gradient(
          to right, 
          #21212e,
          #424260
      );
      box-shadow:  0 0 8px 8px #21212e;
  }

  .line-1{
    position: relative;
    top: 3%;  
    width: 38rem;
    margin: 0 auto;
    border-right: 2px solid rgba(255,255,255,.75);


    white-space: nowrap;
    overflow: hidden;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
}

.card {
  width: 100%; /* One column at full screen on mobile */
}


.work {
 position: relative;
 left: -0px;
 top: 100px;
}

#head{
  width: 400px;


}

.card-container {
  display: flex;

  width: 100%;  
 
}

.card {
  flex-basis: calc(100% - 20px);
  max-width: calc(100% - 20px);
  margin-bottom: 40px;
  margin-right: 30px;
 
  box-shadow: 0px 0px 10px rgb(255, 255, 255);
  transition: all 0.3s ease-in-out;
  background: rgba(148,187,233,1);
  background: linear-gradient(160deg, rgba(148,187,233,1) 20%, rgba(238,174,202,1) 100%);
  filter: grayscale();
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
  filter: none;
 
}

.card img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  border-bottom: #21212e 5px solid;

}

 .card img:hover {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  border-bottom: #21212e 5px solid;
  filter: none;
}

.card h3 {
  font-size: 21px;
  margin-bottom: 10px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  color: #21212e;
}

.card p {
  font-size: 18px;
  margin-bottom: 30px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  color: #21212e;
}

.card .button {
  display: block;
  text-align: center;
  font-size: 16px;

  background-color: #424260; 
  color: #fff;
  text-decoration: none;
 
  transition: all 0.3s ease-in-out;
} 

 .card .button:hover {
  background-color: #21212e;
  color: #e3d1d1;
} 


    .about-container {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      position: relative;
      top: 50px;
      left: 0;
   

    }

    .about {
     
      background-color: #21212e;
      position: relative;
      left: 25px;
    }
    
    .about-img img {
      display: none;
      
     
      
    }

    .about-info{
   
      background-image:  linear-gradient(
          to left, 
          #21212e,
          #424260
      );
      box-shadow:  0 0 8px 8px #21212e;
      padding: 20px;
    } 
    
    .about-info h2 {
      font-size: 36px;
      font-weight: bold;
     
    }
    
    .about-info p {
      font-size: 22px;
      line-height: 1.5;
      margin-bottom: 30px;
    }
    

    .case-study {
      max-width: 100%;
      margin: 0 auto;
      
    }
    
    .case-study nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgb(238,174,202);
      background: linear-gradient(180deg, rgba(238,174,202,1) 20%, rgba(148,187,233,1) 100%);
      padding: 40px 0;
      border-bottom: 1px solid #ddd;
      width: 100%;
    }
    
    .case-study nav a.home {
      color: #333;
      text-decoration: none;
      border: #21212e 2px solid;
      padding: 10px;
      border-radius: 20px;
      margin-left: 40px;
      
      
    }

    .case-study a:hover {
      color: antiquewhite;
      background: rgba(148,187,233,1);
      background: linear-gradient(180deg, rgba(148,187,233,1) 20%, rgba(238,174,202,1) 100%);
   }

    .case-study section {
      display: flex;
      flex-direction: column;
      align-items: center;
     
      
 
    }

    .case-study h1 {
      font-size: 28px;
      font-weight: normal;
      margin: 0;
      margin-right: 40px;
      color: #000;
    }
    
 

    .case-study section:nth-child(even) .media {
      flex-direction: column;
    }
    
    .case-study section .media {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      margin: 0 20px;
    }
    
    .case-study section .media .description {
      flex: 1;
      margin: 50px;
    }
    
    .case-study section .media .image {
      flex: 1;
      text-align: center;
  
    }
    
    .case-study section .media .image img {
      max-width: 100%;
      max-height: 400px;
      object-fit: contain;
      outline: antiquewhite 5px solid;
      border-radius: 20px;
   
      
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    
    .case-study section .media .video {
      flex: 1;
      margin: 0 20px;
      position: relative;
      padding-bottom: 56.25%; /* 16:9 aspect ratio */
       height: 0;
    }
    
    .case-study section .media .video iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    } 
     
    .case-study section .final-project {
      text-align: center;
      margin-top: 100px;
    
    }
    
    .case-study section .final-project .button {
      display: inline-block;
      padding: 10px 30px;
      background-color: #007bff;
      color: #fff;
      font-size: 18px;
      border-radius: 5px;
      text-decoration: none;
      transition: all 0.3s;
    }
    
    .case-study section .final-project .button:hover {
      background-color: #0069d9;
    }





    .contact-container {
      display: flex;
      flex-direction: column;
      position: relative;
      top: 50px;
      right: 40px;
      
    }

   
    
    .contact-img img {
      display: none;

      
    }

    .contact-form h2 {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 40px;
      
    }
    
    .contact-form form {
      display: flex;
      flex-direction: column;
 
      
    }
    
    .contact-form label {
      font-size: 18px;
      font-weight: bold;
      
      margin-bottom: 10px;
    }
    
    .contact-form input,
    .contact-form textarea {
      padding: 10px;
     
      margin-bottom: 20px;
      border: none;
      border-radius: 5px;
      width: 95%;
    }
    
    .contact-form input[type="submit"] {
      background-color: #4CAF50;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      
    
    }
    
    .contact-form input[type="submit"]:hover {
      background-color: #45a049;
    }
    
  }