body {
     background-color: #23252F ;
     font-family: 'Genos' ;
     font-size: 24px;
     color: white;
     font-weight: lighter;
}

.backgroundimage {
     background-image: url('images/cyber.png');
     background-repeat: no-repeat;
     background-position: right;
     background-size: 750px 750px;
     background-position: top right;
     max-width: 1280px;
     margin: auto;
     height: 800px;
}


      /* Top Navigation starts here */ 

/* Navigation bar */ 

.header {
     display: flex;
     max-width: 1280px;
     margin: auto;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     background-color: #23252F;
     z-index: 100;
}

.topnav {
     margin: auto;
}


.header nav ul {
     list-style-type: none;
     padding-bottom: 4px;
     padding-left: 0px;
     padding-right: 0px;
}

.header nav ul li {
     display: inline-block;
}

.header a {
     color: white;
     text-decoration: none;
     padding: 0 32px 0 32px;
     padding-bottom: 4px;
     border-color: transparent;
     border-radius: 0px;
     border-style: solid;
     border-width: 1px;
}

.header a:hover {
     text-decoration: none;
     padding: 0 32px 0 32px;
     padding-bottom: 4px;
     border:#02BD88;
     border-radius: 0px;
     border-style: solid;
     border-width: 1px;
}

/* Home selected */ 

.current a {
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,1);
     border: none;
     border-color: #02BD88;
     border-radius: 0px;
     border-style: solid;
     border-width: 1px;
}
.current a:hover {
     color: white;
     text-decoration: none;
     padding: 0 32px 0 32px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,1);
     padding-bottom: 4px;
     border: #02BD88;
     border-radius: 0px;
     border-style: solid;
     border-width: 1px;
}

#current {
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,1);
     border-color: #02BD88;
     border-radius: 0px;
     border-style: solid;
     border-width: 1px;
}




      /* Hamburger menu Hidden */ 

.menu {
     display: none;
}

.menudropdown {
     display: none;
}


      /* Dropdown - case study */ 

.dropdown img {
     width: 20px;
     padding-left: 12px;
}

.dropdowncontent {
     position: absolute;
     display: none;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     background-color: #23252F;
}

.dropdowncontent a {
     display: block;
     width: auto;
     width: 83%;
     z-index: 1;
     padding-top: 6px;
     padding-bottom: 8px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     font-size:large;
     background-color: #23252F;
     border:#23252F;
     border-style: solid;
     border-width: 1px;
}

.dropdowncontent a:hover {
     display: block;
     box-shadow: none;
     width: 83%;
     z-index: 1;
     padding-top: 6px;
     padding-bottom: 8px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     background-color: #23252F;
     border:#02BD88;
     border-radius: 0px;
     border-style: solid;
     border-width: 1px;
}

.dropdown:hover .dropdowncontent {
     display: block;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     margin-top: 5.5px;
     margin-bottom: 5px;
}



   /* Hero section starts */

.hero {
     display: flex;
     justify-content: left;
     align-items: center;
     max-width: 1280px;
     margin: auto;
     margin-top: 330px;
}

.glitch {
     float: right;
     margin-top: -450px;
     margin-right: 530px;
     background-color: #23252F;
}
.glitch img {
     width:200px;
     mix-blend-mode: lighten;
     filter:saturate(100)
}
.hero-txt {
     color: white;
     margin-bottom: 100px;
     padding-left: 24px;
}

.hero-txt p {
     padding-left: 4px;
     margin-bottom: -16px;
     color: white;
     margin-top: 0px;
}

.hero-txt h1 {
     color: white;
     font-size: 80px;
     margin-bottom: 24px;
     margin-top: 0px;
}

.hero-txt label {
     font-weight: lighter;
     font-size: 30px;
     color: white;
}

.email{
     margin-top: 60px;
     padding: 24px;
     margin-bottom: 120px;
     border:#23252F;
     border-radius: 0px;
     border-style: solid;
     border-width: 1px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,1);
}

.emailbox {
     background-color:#23252F;
}

@keyframes neon {
     0% { box-shadow: 100px;}
     20% { box-shadow: none;}
     40% { box-shadow: 100px;}
     60% { box-shadow: none;}
     80% { box-shadow: 100px;}
     100% { box-shadow: none;}
     }

@-webkit-keyframes neon {
     0% { box-shadow: 100px;}
     20% { box-shadow: none;}
     40% { box-shadow: 100px;}
     60% { box-shadow: none;}
     80% { box-shadow: 100px;}
     100% { box-shadow: none;}
     }

.email:hover {
     border: #02BD88;
     border-radius: 0px;
     border-style: solid;
     padding: 24px;
     border-width: 1px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,1);
}

.email a {
     font-size: 24px;
     text-decoration: none;
     color: white;
}

.email a:hover {
     font-size: 24px;
     text-decoration: none;
}

.email img {
     margin-left: 12px;
}

.emailbox a {
     color: white;
     text-decoration: none;
}
.emailbox a:hover {

}



/*  Case study section starts  */

.casestudy {
     display: block;
     margin-top: 24px;
     max-width: 1280px;
     margin: auto;
}
.casestudytitle {
}
.casegallerycontainer {
}

.casestudytitle img {
     width: 300px;
     margin-left: 24px;
}

.casegallerytext {
     text-align: center;
     color: #484A5A;
     padding-top: 12px;
     padding-bottom: 48px;   
}

.casegallery {
     text-align: center;
}

.casegallery img {
    width: 500px;
    height: 500px;
}

.card {
    display: inline-block;
    color: rgb(188, 186, 186);
    text-align: center;
    margin-bottom: 60px;
    padding: 0 48px 0 48px;
}
.card :hover {

}
.card img {
     opacity: 80%;
     border:#23252F;
     border-width: 2px;
     border-style: solid;
     border-radius: 0px;
}
.card img:hover {
     opacity: 100%;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,1);
     border: #02BD88;
     border-width: 2px;
     border-style: solid;
     border-radius: 0px;
}

.card a {
     text-decoration: none;
     color: rgb(235, 235, 235);
}

.Viewmore {
     max-width: 1120px;
     margin: auto;
     display: flex;
     justify-content: center;
}
.Viewmore a {
     color: #ffffff;
     padding-top: 10px;
     padding-bottom: 12px;
     padding-left: 24px;
     padding-right: 24px;
     text-decoration: none;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,1);
     border:#23252F;
     border-width: 1px;
     border-style: solid;
     border-radius: 0px;
}
.Viewmore a:hover {
     border:#02BD88;
     border-width: 1px;
     border-style: solid;
     border-radius: 0px;
}

/*  Level up Decor section  */

@keyframes level {
     0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
     40% {transform: translateY(-30px);} 
     60% {transform: translateY(-15px);} 
     0% {opacity: 0%;}
     100% {opacity: 100%;}
} 

.level {
     max-width: 1120px;
     margin: auto;
     display: flex;
     justify-content: start;
     margin-top: 60px;
     margin-bottom: 100px;
     animation: level 1s ease-in-out infinite;
}

.level img{
     width: 200px;
}

.level i img{
     padding-left: 16px;
     width: 30px;
}


/*  Three D section starts  */

.ThreeD {
     max-width: 1280px;
     margin: auto;
}

.ThreeDtitle img {
     width: 350px;
}

.ThreeDtitle img {
     
}
.card h3 img:hover {
     border: none;
     box-shadow: none;
     opacity: 100%;
}
.card h3 img {
     border: none;
     box-shadow: none;
     opacity: 100%;
}


/*  Hidden mobile ThreeD section  */
.MobileThreeD {
     display: none;
}



/*  Bonus Decor section  */

.bonuscontainer {
     max-width: 1125px;
     margin: auto;
}

@keyframes bounce {
     0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
     40% {transform: translateY(-30px);} 
     60% {transform: translateY(-15px);} 
} 

.bonus {
     display: flex;
     justify-content: start;
     margin-top: 50px;
     margin-bottom: 50px;
}

.bonus img {
     width: 150px;
     animation: bounce 1s ease-in-out infinite;
}


/*  Spaceship Decor section  */

.blink img {
     mix-blend-mode: lighten;
     filter: grayscale(100%);
     width: 200px;
     margin-bottom: 120px;
}
.blink {
     display: flex;
     justify-content: end;
     max-width: 1120px;
     margin: auto;
}


/*  Resume section Starts */

.resumecontainer {
     display: flex;
     justify-content: center;
     max-width: 1280px;
     margin: auto;
}

.resume {
     margin: 48px;
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 40%;
}
.resume h3 img {
     height: 38px;
     border: none;
     opacity: 100%;
}
.resume h3 img:hover {
     box-shadow: none;
     border: none;
     border-width: 0px;
     border-style: none;
     border-radius: 0px;
}

.aboutme {
     margin: 48px;
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 40%;
}
.aboutme h3 img {
     height: 38px;
     border: none;
     opacity: 100%;
}
.aboutme h3 img:hover{
     box-shadow: none;
     border: none;
     border-width: 0px;
     border-style: none;
     border-radius: 0px;
}

.resume img {
     width: 100%;
     opacity: 80%;
     border:#23252F;
     border-width: 2px;
     border-style: solid;
     border-radius: 0px;
}
.resume img:hover {
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,1);
     opacity: 100%;
     border: #02BD88;
     border-width: 2px;
     border-style: solid;
     border-radius: 0px;
}

.aboutme img {
     width: 100%;
     opacity: 80%;
     border:#23252F;
     border-width: 2px;
     border-style: solid;
     border-radius: 0px;
}
.aboutme img:hover {
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,1);
     opacity: 100%;
     border: #02BD88;
     border-width: 2px;
     border-style: solid;
     border-radius: 0px;
}


/*  Loading Decor section  */

.loadingcontainer {
     display: flex;
     justify-content: center;
}
.loading img {
     mix-blend-mode: lighten;
     width: 300px;
     filter: saturate(60%);
}



/*  Linktree section Starts */

.linktree {
     max-width: 1280px;
     margin: auto;
}

.linkcontainer {
     color: white;
     border: #02BD88;
     border-style: solid;
     border-radius: 0px;
     border-width: 1px;
     max-width: 1200px;
     margin: auto;
}

.contacttitle {
     display: flex;
     align-items: center;
     margin-left: 72px;
     margin-top: -54px;
     background-color: #23252F;
     width: 285px;
}

.contacttitle h2{
     padding-left: 24px;
}

.contacttitle img {
     height: 50px;
     padding: 8px 12px 0px 4px;
}



.emailbox2 {
     background-color:#23252F;
     display: flex;
     justify-content: center;
}

.email2 {
     margin-top: 24px;
     padding: 24px;
     margin-bottom: 72px;
     border:#23252F;
     border-radius: 0px;
     border-style: solid;
     border-width: 1px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,1);
}

.email2:hover {
     border: #02BD88;
     border-radius: 0px;
     border-style: solid;
     border-width: 1px;
     padding: 24px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,1);
}

.email2 a {
     font-size: 24px;
     text-decoration: none;
     color: white;
}

.email2 a:hover {
     font-size: 24px;
     text-decoration: none;
     color: white;
}

.email2 img {
     margin-left: 12px;
}

.emailbox2 a {
     color: white;
     text-decoration: none;
}


.icons {
     display: flex;
     justify-content: center;
     margin-bottom: 42px;
     width: 100%;
}

.icons i{
     display: flex;
     justify-content: center;
     padding-bottom: 24px;
}

.icons img {
     margin-left: 12px;
     margin-right: 12px;
     width: 40%;
     border:#23252F;
     border-radius: 0px;
     border-style: solid;
     border-width: 1px;
}

.icons img:hover {
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,1);
     border: #02BD88;
     border-radius: 0px;
     border-style: solid;
     border-width: 1px;
}


 /*  Footer section Starts */

footer {
     margin-top: 100px;
     justify-content: center;
     text-align: center;
}
.footer img {
     width: 100px;
     margin-top: 48px;
}
.footer h1{
     margin-top: 0px;
     color: #ffffff;
}





/* Breakpoints */
/* Breakpoints for index page start here*/

@media screen and (max-width: 1000px) {

     .glitch img {
          display: none;
     }

/* Linktree */
     .linkcontainer {
          display: block;
     }

     .icons {
          flex-wrap: wrap;
     }

     .icons i {
          display: flex;
          padding-bottom: 24px;
     }

     .resumecontainer {
          flex-wrap: wrap;
     }


     /* ThreeD */
     .container {
          height: 400px;
          width: 90%;
          font-weight: lighter;
     }
     .icon {
          padding-left: 72px;   
          padding-bottom: 12px;
     }
     .cardsThreeD {
          height: 350px;
     }

       /*  Spaceship Decor section  */

     .blink{
          margin-top: -72px;
          display: flex;
          justify-content: center;
     }

}


@media screen and (max-width: 820px) {


         /* Hamburger Dropdown menu */ 
     
          .topnav a {
               display: none;
          }
     
          .menu {
               display: block;              
          }

          .menudropdown {
               display: none;
               position: absolute;
          }

          .menudropdown a {
               display: block;
               padding-top: 16px;
               text-align: right;
               font-weight: lighter;
          }

          .menudropdown a:hover {
               padding-top: 16px;
               text-align: right;
          }
          .menu img:hover {
               box-shadow: 0px 8px 16px 0px rgba(0,0,0,1);
          }


          .menu:hover .menudropdown {
               display: block;
               margin-left: -125px;
               background-color: #23252F;
               box-shadow: 0px 8px 16px 0px rgba(0,0,0,1);
          }


/* Hero section starts here */

    .backgroundimage {
     background-size: 650px;
     background-position: top right;
    }

    .hero {
     margin-bottom: 0%;
    }
    .heroo {
    }

    .hero-txt{
     margin-bottom: 0%;
    }

    .hero-txt h1 {
     font-size: 60px;
    }

    .hero-txt label {
     font-size: 20px;
    }

    .hero-txt p{
     margin-top: -40px;
    }

    .email {
     margin-top: 48px;
     margin-bottom: 200px;
    }
    .emailbox {
     width: 300px;
     margin-top: 10px;
    }

    .emailbox a {
     font-size: 20px;
    }
    .emailbox a:hover {
     font-size: 20px;
    }
    .emailbox img {
     width: 30px;
    }

    .glitch {
     display: none;
    }
    .glitch img {
     display: none;
    }



/* Case study section starts here */

    .casestudytitle {
     display: flex;
     justify-content: center;
     margin-top: 50px;
    }



/* ThreeD section starts here */

.ThreeD {
     margin: auto;
}

.ThreeDtitle{
     display: flex;
     justify-content: center;
}
.ThreeDtitle img {
     margin-top: 48px;
}

.cardsThreeD {
     height: 250px;
}
 
.cardsThreeD > .row > .icon {
     padding-left: 52px;
}


        /*  Spaceship Decor section  */

        .blink{
          margin-top: -150px;
          margin-bottom: 48px;
        }


/* Resume section starts here */

.resumecontainer {
     flex-wrap: wrap;
}


/* Linktree section starts here */

.linkcontainer {
     display: block;
}

.icons i {
     display: flex;
     justify-content: center;
}

.resume {
     width: 60%;
}

.aboutme {
     width: 60%;
}

}




@media screen and (max-width: 600px) {

     /* Hero starts here */

          .backgroundimage {
          background-size: 500px;
          background-position: top right;
          background-image: url(images/mobbackgraound.png);
          }

          .hero {
          margin-bottom: 0%;
          }
          
          .hero-txt{
          margin-top: 20px;
          margin-bottom: 0%;
          }

          .hero-txt p{
               margin-top: -150px;
          }

          .email {
          margin-bottom: 200px;
          margin-top: 60px;
          }

      /* Case study starts here */
   
         .casegallery img {
          width: 100%;
          }
   
         .casestudytitle img {
          width: 60%;
          }
          .casestudytitle {
          margin-top: 0px;
          }


         /*  Level up Decor section  */

               .level {
                    margin-bottom: 72px;
                    margin-top: 16px;
               }
               .level img {
                    width: 150px;
               }
               

         /*  Bonus Decor section  */
               .bonus img {
                    width: 100px;
               }


     /* Hidden Desktop ThreeD section */

     .wrapper {
        display: none;
     }


     /*  Mobile ThreeD section  */

     .MobileThreeD {
         display: block;
         margin-top: 72px;
     }



           /*  Spaceship Decor section  */

          .blink{
               margin-top: 72px;
          }


           /* Resume starts here */
          .resume {
               width: 100%;
          }
     
          .aboutme {
               width: 100%;
          }

          .card img {
               height: 100%;
          }

          .contacttitle {
               margin-left: 125px;
          }

}







/* Page 2 */
/* CSS for Case Study page start here */


 /* Top nav Case study selected */ 

#current {
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,1); 
     padding-bottom: 4px;
}



 /* Hero section */ 

.CBbeauty {
     max-width: 1180px;
     margin: auto;
}
.CBbeautytitle {

     
}
.CBbeautytitle img {
     width: 300px;
     margin-top: 60px;

}


.coverimage {
     display: flex;
     justify-content: center;
     width: 100%;
     margin-top: 40px;
}
.coverimage img {
     width: 50%;
}

.leftimg {
     background-color: aqua;
}
.leftimg img{
     width: 100%;
     margin-top: 28px;
     float: right;
}
.centerimg {
     background-color: blue;
     display: flex;
     justify-content: center;
}
.centerimg img{
     width: 100%;
}
.rightimg {
     background-color: beige;
}
.rightimg img{
     width: 100%;
     margin-top: 28px;
     float: left;
}


/* Content Section starts here */


/* 3d */



/* Titles */

.CaseStudy {
     max-width: 1180px;
     margin: auto;
}

.CaseStudytitle {
     display: flex;
     align-items: center;
     margin-top: 60px;
}

.CaseStudytitle h2{
     font-weight: lighter;
}

.CaseStudytitle img {
     height: 50px;
     padding: 8px 20px 0px 0px;
}


/* para */

.CaseStudypara {
     margin-top: -24px;
}

/* lists */

.CaseStudylist {
     margin-top: -24px;
}


/* figjam image */

.figjam {
     position: relative;
}

.figjam .pan {
     overflow: hidden;
}

.figjam .pan img {
     width: 100%;
     transition: all 0.3s;
}

.pan:hover img {
     transform: scale(1.2);
}
   

/* styleguide image */

.styleguide img {
     width: 100%;
     transition: all 0.3s;
}
.styleguide {
     position: relative;
     overflow: hidden;
     width: 100%;
}
.styleguide:hover img {
     transform: scale(1.2);
}




/* solution section starts here */

.solution {
     display: block;
     margin-top: 24px;
     max-width: 1280px;
     margin: auto;
}


.solutioncontainer img {
     width: 100%;
     margin-bottom: 48px;
}

.solutioncontainer p{
     width: 100%
}

.solutioncontainer .box {
     display: inline-block;
     text-align: left;
     padding: 0 48px 0 48px;
}



 /*  Bonus Decor section  */

    .bonuscontainer2 {
     max-width: 1280px;
     margin: auto;
     padding-top: 48px;
     }
     
     .lines2 {
     margin-top: 5%;
     }
     
     .bonus2 {
     margin-bottom: 5%;
     display: flex;
     justify-content: end;
     }
     
     .bonus2 img {
     width: 200px;
     }
     


/* Continue to next section */

.Continuecasegallerytext {
     max-width: 1280px;
     margin: auto;
     padding-bottom: 48px;
     color: white;
}
.Viewmore {
     text-align: center;
     color: white;
}
.Viewmore:hover {
     color: #02BD88;
}




/* Breakpoints */
/* Breakpoints for case study page-2 start here */



@media screen and (max-width: 820px) {


     /* Case study Content */

     .CaseStudy {
          max-width: 750px;
     }

     /* Hero section */

     .CBbeautytitle img {
          width: 350px;
     }

}


@media screen and (max-width: 600px) {


     /* Hero section */

     .CBbeautytitle img {
          width: 300px;
     }
}