* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    font-size: 62.5%;
    /* scroll bar */
    /* width */
    ::-webkit-scrollbar {
      width: 0.2vw;
    }
  
    /* Track */
    ::-webkit-scrollbar-track {
      background: black;
    }
    
    /* Handle */
    ::-webkit-scrollbar-thumb {
      background: #ff3131;
    }
  
    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
      background: #ff3131;
      width: 0.5vw;
    }
  }
  
  body {
    font-family: "Courier Prime", "Roboto Mono", "Space Grotesk", sans-serif;
  }

  .frontend-hero {
    height: 110vh;
    background-color: #f5f5f5;
    /*
    background-image: url("images/david\ ero\ bkg.png");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position-x: 100%;
    background-position-y: 80%;
    background-size: cover;
    background-origin: padding-box;
    z-index: 0;
    object-fit: cover;
    object-position: 100% 100%; */
    display: flex;
    justify-content: space-between;
  }

  /*
  .frontend-hero .videobox {
    height: 100%;
    width: 100%;
    transform: scale(1.4) translate3d(150px, 80px, 0);
    z-index: 0;
    position: relative;
}

.videovid {
    height: 89.3vh;
    object-fit: contain;
    overflow-clip-margin: content-box;
    overflow: clip;
}
    */

  .logobox1 {
    display: flex;
    flex-direction: column;
    margin-left: 1vw;
  }
  
  .logobox1a {
    display: inline-block;
    margin-top: 5vh;
    padding-left: 1vw;
  }
  
  .logobox1b {
    display: block;
    margin-top: -2vh;
  }
  
  .logo1a {
    height: 6vh;
  }
  
  .logo1b {
    height: 12vh;
    margin-left: 0.5vw;
  }

  .barsicon {
    display: none;
  }

  .navbox {
    height: 90vh;
    width: 30vw;
    margin-right: 2vw;
    margin-left: 18vw;
    margin-top: 2vh;
  }
  
  .navul {
    list-style: none;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin: auto;
  }
  
  .navli {
    font-family: "Roboto Mono", serif;
    font-optical-sizing: auto;
    font-style: normal;
    text-decoration: none;
    font-size: 2.2vh;
    font-weight: 300;
    text-align: right;
    line-height: 10vh;
  }
  
  .navlid {
    font-family: "Roboto Mono", serif;
    font-optical-sizing: auto;
    font-style: normal;
    text-decoration: none;
    text-decoration: none;
    font-size: 2.2vh;
    text-align: right;
    line-height: 3vh;
  }
  
  a.Alink-nav:link,
  a.Alink-nav:visited {
    text-decoration: none;
    color: black;
    font-size: 2.6vh;
    font-weight: 500;
  }
  
  a.Alink-nav:hover,
  a.Alink-nav:active {
    color: black;
    font-size: 3vh;
    font-weight: 300;
    transition: 0.5s ease-out;
    text-shadow: 1px 1px 2px #004aad;
  }

  .hero-buttons {
    height: 10vh;
    width: 28.2vw;
    display: flex;
    margin: auto;
    justify-content: space-between;
    margin-top: 43vh;
  }
  
  a.Alink-hbutt1:link, a.Alink-hbutt1:visited {
    font-family: "Roboto Mono", sans-serif;
    color: black;
    background-color: white;
    border: 2px solid black;
    font-size: 3vh;
    text-decoration: none;
    width: 12vw;
    height: 7.9vh;
    text-align: center;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 1vh;
  }
  
  a.Alink-hbutt1:hover, a.Alink-hbutt1:active {
    color: white;
    background-color: black;
    font-size: 3vh;
    width: 15vw;
    height: 7.9vh;
    transition: 0.5s ease-in-out;
    box-shadow: 2px 2px 5px #004aad;
  }
  
  a.Alink-hbutt2:link, a.Alink-hbutt2:visited {
    font-family: "Roboto Mono", sans-serif;
    color: white;
    background-color: #ff3131;
    font-size: 3vh;
    text-decoration: none;
    width: 12vw;
    height: 8vh;
    text-align: center;
    /* margin-left: 1.2vw; */
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 1vh;
    border: 2px solid black;
  }
  
  a.Alink-hbutt2:hover, a.Alink-hbutt2:active {
    color: white;
    background: linear-gradient(#ff3131, #b62613);
    border: none;
    font-size: 3vh;
    width: 15vw;
    height: 8vh;
    transition: 0.5s ease-in-out;
    box-shadow: 2px 2px 5px black;
  }
  
  h1 {
    font-family: "Boldonse", system-ui;
    font-weight: 100;
    font-size: 15vh;
    color: black;
    text-align: left;
    line-height: 20vh;
    /* text-shadow: 2px 2px 2px black; */
    padding-left: 1.7vw;
    margin-top: 25vh;
    width: 50vw;
    /* text-shadow: 2px 2px 8px #004aad;*/
  }

  /*
  .herotitle {
    font-size: 25vh;
    color: rgba(255, 255, 255, 0.33);
    position: absolute;
    margin: auto;
    align-self: center;
    font-weight: 100;
    left: 18vw;
    top: 35vh;
    text-shadow: 2px 2px 6px black;
  }

  .herotitlemin {
    font-size: 5vh;
    color: white;
  }
    */

  .code {
    height: 454vh;
    background-color: white;
    padding-top: 0vh;
  }
  
  .code-inner {
    display: flex;
  }
  
  .code-title {
    display: none;
    margin-top: 60vh;
    rotate: 270deg;
    height: 30vh;
  }
  
  .code-head1 {
    font-family: "Courier Prime", serif;
    font-weight: 100;
    font-size: 10vh;
    font-optical-sizing: auto;
    font-style: normal;
    color: black;
    padding-top: 5vh;
  }
  
  .code-head2 {
    font-family: "Courier Prime", serif;
    font-weight: 300;
    font-size: 18vh;
    color: #004aad;
    margin-left: 14vw;
    margin-top: -3vh;
  }
  
  .code-images {
    width: 50.5vw;
    margin: auto;
    display: flex;
    margin-left: 25.5vw;
    margin-top: -14vh;
    justify-content: space-between;
  }
  
  .code-img1 {
    height: 27.3vh;
    border-radius: 5.2vw;
  }
  
  .code-img2 {
    padding-top: 3vh;
  }
  
  .code-i1 {
    width: 50vw;
    filter: grayscale(100%);
    box-shadow: 2px 2px 15px black;
    border-radius: 5vw;
  }
  
  .code-i2 {
    display: none;
    height: 20vh;
    opacity: 1;
    filter: grayscale(100%);
     /* margin-top: -10vh; */
  }
  
  .code-body {
    width: 100%;
    height: 452vh;
    background: linear-gradient(
      180deg,
      #ffffff,
      #fafafa,
      #f5f5f5,
      #e5e5e5,
      #d4d4d4
    );
    /* border-top: 2px solid #be0032; 
    border-left: 2px solid #ff3131;
    border-bottom: 2px solid #b62713; */
  }
  
  .code-body-content {
    width: 100%;
    height: 460vh;
  }
  
  .code-body-text {
    width: 93vw;
    height: 23vh;
    margin-top: 6vh;
    margin-left: 3vw;
  }
  
  .code-body-text-heading {
    font-family: "Courier Prime", serif;
    color: black;
    font-size: 3vh;
    font-weight: 500;
    font-optical-sizing: auto;
    font-style: normal;
    padding-top: 1vh;
  }
  
  .code-body-text-para {
    font-family: "Roboto Mono", serif;
    color: black;
    font-size: 2vh;
    font-weight: 300;
    font-optical-sizing: auto;
    font-style: normal;
    margin-top: 2vh;
    line-height: 3.4vh;
  }
  
  .codeicon, .fa-code {
    color: #ff3131;
    display: inline;
  }

   
  a.Alink-code:link, a.Alink-code:visited {
    color: #ff3131;
    font-family: "Roboto Mono", serif;
    font-size: 2.2vh;
    font-weight: 500;
    text-decoration: none;
  }
  
  a.Alink-code:hover, a.Alink-code:active {
    font-family: "Roboto Mono", serif;
    font-size: 2.3vh;
    font-weight: 500;
    color: #b62713;
    transition: 1s ease-in-out;
  }
  
  .projects {
    height: 409.7vh;
    display: flex;
    flex-direction: column;
    background-image: url("images/IMG_3295.JPG");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position-x: 100%;
    background-position-y: 38%;
    background-size: cover;
    background-origin: padding-box;
    object-fit: cover;
    object-position: 100% 100%;
  }
  
  .projects1 {
    height: 408vh;
    padding-top: 4vh;
    padding-bottom: 10vh;
  }
  
  .projects-heading-bold {
    font-family: "Boldonse", system-ui;
    color: black;
    font-size: 7vh;
    font-weight: 200;
    position: relative;
    top: 35vh;
    margin-left: 3vw;
    position: sticky;
    z-index: 0;
    letter-spacing: 0vw;
  }
  
  .projects-heading-para {
    font-family: "Roboto Mono", sans-serif;
    color: black;
    font-size: 2vh;
    text-align: left;
    position: relative;
    position: sticky;
    top: 50vh;
    margin-left: 3.2vw;
  }
  
  .projects-logo {
    height: 15vh;
    position: relative;
    position: sticky;
    z-index: 0;
    margin-left: 89vw;
    top: 70vh;
  }

  .toparrow {
    font-size: 4vh;
    display: inline;
    width: 2vw;
    position: relative;
    left: 96vw;
    top: 90vh;
    position: fixed;
    z-index: 99;
  }
  
  .projects2 {
    height: 374.5vh;
    z-index: 2;
    background: linear-gradient(#ffffff05,
    #fafafa6f,
    #f5f5f565,
    #e5e5e570,
    #d4d4d48a,
      white);
    position: relative;
    bottom: 0vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 0vh;
  }
  
  .project1, .project2, .project3, .project4, .project5, .project6, .project7, .project8 {
    width: 34.9vw;
    height: 32.9vh;
    margin: auto;
    position: relative;
    box-shadow: 1px 1px 4px black;
  }
  
  .project1:hover, .project2:hover, .project3:hover, .project4:hover, .project5:hover, .project6:hover, .project7:hover, .project8:hover {
    width: 34.9vw;
    height: 32.9vh;
    margin: auto;
    position: relative;
    transition: 0.7s ease-in-out;
    transform: scale(1.2,1.2);
  }
  
  /* image */
  .code-grid-i1, .code-grid-i2, .code-grid-i3, .code-grid-i4, .code-grid-i5, .code-grid-i6, .code-grid-i7, .code-grid-i8 {
    opacity: 1;
    display: block;
    height: 32.9vh;
    width: 34.9vw;
    transition: .5s ease;
    backface-visibility: hidden;
  }
  
  /* what happens when the div and image are hovered */
  .project1:hover, .code-grid-i1, .project2:hover, .code-grid-i2, .project3:hover, .code-grid-i3, .project4:hover, .code-grid-i4, .project5:hover, .code-grid-i5, .project6:hover, .code-grid-i6, .project7:hover, .code-grid-i7, .project8:hover, .code-grid-i8 {
    opacity: 0.9;
    box-shadow: 5px 10px 10px black;
  }
  
  /* to show the text when the div is hovered */
  .project1:hover .code-grid-img-txt, .project2:hover .code-grid-img-txt, .project3:hover .code-grid-img-txt, .project4:hover .code-grid-img-txt, .project5:hover .code-grid-img-txt, .project6:hover .code-grid-img-txt, .project7:hover .code-grid-img-txt, .project8:hover .code-grid-img-txt {
    opacity: 1;
  }
  
  /*
  a.Alink-grid:link, a.Alink-grid:visited {}
  a.Alink-grid:hover, a.Alink-grid:active {} */
  
  .code-grid-img-txt /* text div*/ {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }
  
  .cgi-txt {
    font-size: 7vh;
    color: white;
    text-shadow: 2px 2px 10px black;
  }
  
  .fa-brands {
    font-size: 3vh;
    color: black;
  }
  
  .shiftright {
    left: 13vw;
  }
  
  .shiftleft {
    right: 18vw;
  }
  
  .moreprojectslink {
    height: 5vh;
    width: 15vw;
    position: relative;
    left: 70vw;
    bottom: 0vh;
  }
  
  a.Alink-moreprojects:link, a.Alink-moreprojects:visited {
    font-size: 2.5vh;
    text-decoration: none;
    color: #ff3131;
  }
  
  a.Alink-moreprojects:hover, a.Alink-moreprojects:active {
    font-size: 2.7vh;
    text-decoration: none;
    transition: 0.5s ease-in-out;
    color: #b62713;
  }
  
  
  /*
  .code-body-grid {
    width: 86vw;
    height: 95vh;
    margin-left: 3vw;
    margin-top: 3vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  a.Alink-code:link, a.Alink-code:visited {
    color: #d6c09f;
    font-family: "Roboto Mono", serif;
    font-size: 2.2vh;
    font-weight: 500;
    text-decoration: none;
  }
  
  a.Alink-code:hover, a.Alink-code:active {
    font-family: "Roboto Mono", serif;
    font-size: 2.3vh;
    font-weight: 500;
    color: #d6c09f;
    transition: 1s ease-in-out;
    text-shadow: 2px 2px 5px #9e8461;
  }
  
  .code-body-grid-row1,.code-body-grid-row2, .code-body-grid-row3, .code-body-grid-row4 {
    display: flex;
    justify-content: space-between;
  }
  
  .code-grid-img1, .code-grid-img2, .code-grid-img3, .code-grid-img4, .code-grid-img5, .code-grid-img6, .code-grid-img7, .code-grid-img8, .code-grid-img9, .code-grid-img10, .code-grid-img11, .code-grid-img12 /* container */
  
  /* {
    position: relative;
  } 
  
  .code-grid-i1, .code-grid-i2, .code-grid-i3, .code-grid-i4, .code-grid-i5, .code-grid-i6, .code-grid-i7, .code-grid-i8, .code-grid-i9, .code-grid-i10, .code-grid-i11, .code-grid-i12 /* image */ /* {
    width: 18.5vw;
    opacity: 1;
    display: block;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
  }
  
  a.Alink-grid:link, a.Alink-grid:visited {
    width: 18.5vw;
  }
  
  a.Alink-grid:hover, a.Alink-grid:active {
    width: 18.5vw;
  }
  
  .code-grid-img-txt /* middle*/ /* {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%)
  }
  
  .cgi-txt {
    font-family: "Roboto Mono", serif;
    font-size: 2.5vh;
    color: white;
  }
  
  .code-grid-img1:hover .code-grid-i1, 
  .code-grid-img2:hover .code-grid-i2, 
  .code-grid-img3:hover .code-grid-i3,
  .code-grid-img4:hover .code-grid-i4,
  .code-grid-img5:hover .code-grid-i5,
  .code-grid-img6:hover .code-grid-i6,
  .code-grid-img7:hover .code-grid-i7,
  .code-grid-img8:hover .code-grid-i8,
  .code-grid-img9:hover .code-grid-i9,
  .code-grid-img10:hover .code-grid-i10,
  .code-grid-img11:hover .code-grid-i11,
  .code-grid-img12:hover .code-grid-i12 {
    opacity: 0.3;
    width: 20vw;
    box-shadow: 5px 10px 10px black;
  }
  
  .code-grid-img1:hover .code-grid-img-txt,
  .code-grid-img2:hover .code-grid-img-txt, 
  .code-grid-img3:hover .code-grid-img-txt,
  .code-grid-img4:hover .code-grid-img-txt,
  .code-grid-img5:hover .code-grid-img-txt,
  .code-grid-img6:hover .code-grid-img-txt,
  .code-grid-img7:hover .code-grid-img-txt,
  .code-grid-img8:hover .code-grid-img-txt,
  .code-grid-img9:hover .code-grid-img-txt,
  .code-grid-img10:hover .code-grid-img-txt,
  .code-grid-img11:hover .code-grid-img-txt,
  .code-grid-img12:hover .code-grid-img-txt {
    opacity: 1;
  }
  */
  
  .experience {
    height: 120vh;
    background-color: white;
    padding-top: 5vh;
  }
  
  .exper-inner {
    margin: auto;
    height: 120vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .exper-inner-head {
    display: flex;
    flex-direction: column;
    width: 90vw;
    margin: auto;
  }
  
  .exper-inner-head1 {
    width: 59vw;
    height: 35vh;
    margin-top: 0vh;
    margin: auto;
    border-bottom: 1px solid #757575;
    z-index: 2;
  }
  
  .exper-ih-txt {
    font-size: 6vh;
    color: black;
    font-family: "Courier Prime", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    margin-bottom: 3vh;
  }
  
  .exper-span {
    color: black;
    font-weight: 500;
    font-size: 7vh;
    font-family: "Boldonse", system-ui;
  }

  .exper-span-red {
    font-size: 4vh;
    color: #ff3131;
    font-family: "Courier Prime", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    font-style: normal;
    text-align: right;
    margin-bottom: 3vh;
  }
  
  .exper-ih-para {
    font-family: "Roboto Mono", serif;
    font-size: 2vh;
    color: black;
    font-weight: 400;
    text-align: center;
  }

  .exper-inner-head2 {
    width: 9vw;
    height: 17vh;
    align-content: center;
    margin: auto;
  }
  
  .exper-inner-img {
    height: 14vh;
    top: 0;
    position: relative;
    align-content: center;
  }
  
  .exper-inner-box {
    width: 94vw;
    height: 60vh;
    display: flex;
    justify-content: space-evenly;
    margin: auto;
  }
  
  .scale {
    height: 4vh;
    width: 25vw;
    /*rotate: 90deg; flex-direction: column;*/
    rotate: 90deg;
    display: inline;
    margin-top: 26vh;
    margin-left: -5vw;
  }
  
  .slider {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 1px;
    background: black;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
  }
  
  .slider:hover {
    opacity: 1;
  }
  
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: white;
    border: 2px solid #004aad;
    cursor: pointer;
  }
  
  .slider::-moz-range-thumb {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: white;
    border: 2px solid #004aad;
    cursor: pointer;
  }
  
  .exper-info {
    height: 53vh;
    width: 40vw;
    display: flex;
    justify-content: space-between;
    margin-left: -7vw;
  }
  
  .exper-info-logobox {
    width: 6vw;
    height: 12vh;
  }
  
  .exper-info-logo {
    width: 5.6vw;
    height: 11vh;
  }
  
  .exper-info-txt {
    width: 26vw;
    height: 33vh;
  }
  
  .exper-ift-heading {
    font-family: "Roboto Mono", serif;
    font-size: 2.7vh;
    color: black;
    font-weight: 400;
  }
  
  .exper-ift-para {
    font-family: "Roboto Mono", serif;
    font-size: 1.7vh;
    color: #004aad;
    font-weight: 300;
  }

  .experyears {
    color: black;
    font-size: 1.4vh;
  }
  
  .fa-brands {
    font-size: 3vh;
  }
  
  .exper-ift-para2 {
    font-family: "Roboto Mono", serif;
    font-size: 1.8vh;
    color: black;
    font-weight: 300;
    line-height: 3vh;
  }
  
  a.Alink-exper:link,
  a.Alink-exper:visited {
    font-family: "Roboto Mono", serif;
    text-decoration: none;
    color: #004aad;
    font-size: 2.2vh;
    font-weight: 400;
  }
  
  a.Alink-exper:hover,
  a.Alink-exper:active {
    color: #032b44;
    font-size: 2.3vh;
    font-weight: 400;
    transition: 0.5s ease-out;
  }
  
  .fa-arrow-up-right-from-square, .fa-2xs {
    color: black;
  }
  
  .exper-cert {
    margin-left: 5vw;
    width: 55vw;
    height: 59vh;
    display: flex;
    padding-left: 5vw;
  }
  
  .exper-cert-img {
    height: 50vh;
    align-self: center;
    transform: skewX(-10deg);
    box-shadow: 5px 2px 5px black;
  }
  
  .exper-cert-img:hover {
    height: 58vh;
    align-self: center;
    transform: skewX(0deg);
    box-shadow: 2px 2px 30px #ff3131;
    transition: 0.8s ease-in-out;
  }
  
  .featured-projects {
    height: 150vh;
    background-color: white;
  }
  
  .featured-inner {
    width: 98vw;
    height: 140vh;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .featured-head {
    margin: auto;
    height: 12vh;
    margin-top: 10vh;
  }
  
  .feat-heading {
    font-family: "Boldonse", system-ui;
    font-optical-sizing: auto;
    font-style: normal;
    color: black;
    font-size: 7vh;
    font-weight: 300;
    text-align: center;
  }
  
  .feat-para {
    font-family: "Roboto Mono", serif;
    color: rgb(65, 65, 65);
    text-align: center;
    font-size: 2.4vh;
  }
  
  .featured-body {
    display: flex;
    height: 70vh;
    width: 90vw;
    margin-top: 2vh;
    position: relative;
    margin: auto;
  }
  
  .mySlides {
    display: none;
  }
  
  .fade {
    animation-name: fade;
    animation-duration: 1.5s;
  }
  
  @keyframes fade {
    from {
      opacity: 0.4;
    }
    to {
      opacity: 1;
    }
  }
  
  .ftb1, .ftb2, .ftb3, .ftb4, .ftb5 {
    width: 90vw;
    height: 70vh;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 3vw;
    padding-top: 3vh;
    margin-left: 0vw;
    margin: auto;
    /* background: linear-gradient(white, whitesmoke, black); */
    background: linear-gradient(#004bad89, #004aad);
    position: relative;
    z-index: 0;
    border-radius: 6vw;
    border: 2px solid black;
  }
  
  .ftb1-deets {
    width: 33vw;
    height: 53vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 3vh;
  }
  
  .ftb1-preview {
    width: 36.7vw;
    height: 60vh;
    position: absolute;
    z-index: 1;
    left: 48vw;
    top: 9.7vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*
    box-shadow: 2px 2px 10px #002f6c;*/
  }

  .ftb1-preview:hover {
    width: 36.7vw;
    height: 73vh;
    position: absolute;
    z-index: 1;
    left: 48vw;
    top: -3.3vh;
    transition: 0.7s ease-in-out;
    background: linear-gradient(rgba(0, 0, 0, 0.129), rgba(0, 0, 0, 0.311), black);
    box-shadow: 2px 2px 15px #002f6c;
  }
  
  a.Alink-preview:link, a.Alink-preview:active {
    height: 30vh;
  }

  a.Alink-preview:hover, a.Alink-preview:visited {
    height: 33vh;
  }
  
  .preview-scnsht {
    height: 33vh;
    box-shadow: 2px 2px 2px #b6261343;
  }

  .preview-scnsht2 {
    height: 37vh;
    box-shadow: 2px 2px 2px #b6261343;
  }

  .ftb1-head {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 20vh;
    width: 27vw;
  }
  
  .ftb1-head-logo {
    width: 10vw;
    height: 20vh;
    padding-top: 1.5vh;
  }
  
  .ftb1-head-logo-img {
    height: 7vh;
  }

  .ftb2-head-logo-img {
    height: 9vh;
  }

  .ftb3-head-logo-img {
    height: 6vh;
  }

  .ftb4-head-logo-img {
    height: 10vh;
  }

  .ftb5-head-logo-img {
    height: 7vh;
    border-radius: 50%;
  }
  
  .ftb1-head-deets {
    width: 22vw;
    display: flex;
    flex-direction: column;
    height: 17vh;
    justify-content: space-between;
    margin-left: 0vw;
  }

  .ftb2-head-deets {
    width: 22vw;
    display: flex;
    flex-direction: column;
    height: 14vh;
    justify-content: space-between;
    margin-left: 0vw;
  }
  
  .fhd-heading {
    font-family: "Roboto Mono", serif;
    color: black;
    font-size: 3.6vh;
    font-weight: 300;
    text-shadow: 2px 2px 10px black;
  }
  
  .fhd-tools {
   display: flex;
   width: 16vw;
   justify-content: space-between;
  }
  
  .fhd-tools-para-p1 {
    font-family: "Roboto Mono", serif;
    display: block;
    background-color: rgba(0, 0, 0, 0.148);
    color: rgb(255, 175, 27);
    font-weight: 200;
    border-radius: 5vw;
    font-size: 1.8vh;
    box-shadow: 2px 2px 8px black;
    padding: 2px 10px 2px 10px; /*top, right, bottom, left */
    cursor: pointer;
  }
  
  .fhd-tools-para-p2 {
    font-family: "Roboto Mono", serif;
    font-weight: 200;
    display: block;
    background-color: rgba(0, 0, 0, 0.148);
    color: #a3cbff;
    border-radius: 5vw;
    font-size: 1.8vh;
    box-shadow: 2px 2px 8px black;
    padding: 2px 10px 2px 10px;
    cursor: pointer;
  }
  
  .fhd-tools-para-p3 {
    font-family: "Roboto Mono", serif;
    font-weight: 200;
    display: block;
    background-color: rgba(0, 0, 0, 0.148);
    color: rgb(239, 223, 0);
    border-radius: 5vw;
    font-size: 1.8vh;
    box-shadow: 2px 2px 8px black;
    padding: 2px 10px 2px 10px;
    cursor: pointer;
  }
  
  .fhd-para-timeline {
    font-family: "Roboto Mono", serif;
    color: white;
    font-size: 1.7vh;
    padding-left: 0.3vw;
    font-weight: 100;
  }
  
  .ftb1-devices {
    display: flex;
    border: 0.2px solid rgba(255, 255, 255, 0.145);
    background-color: #002f6c09;
    width: 25vw;
    height: 5vh;
    border-radius: 1vw; 
    padding: 5px;
    margin: auto;
    margin-top: 7vh;
    box-shadow: 1px 1px 2px black;
    justify-content: space-between;
  }
  
  .ftb1-devices-desk {
    width: 10vw;
    display: flex;
    margin: auto;
    cursor: pointer;
  }
  
  .ftb1-devices-mobile {
    width: 13vw;
    border-left: 0.5px solid #626262;
    display: flex;
    margin: auto;
    margin-left: 1vw;
    cursor: pointer;
  }
  
  .ftb1-devices-iPad {
    width: 9vw;
    border-left: 0.5px solid #626262;
    display: flex;
    margin: auto;
    margin-left: 1vw;
    cursor: pointer;
  }
  
  .ftb1-devices-desk-para, .ftb1-devices-mobile-para, .ftb1-devices-iPad-para {
    font-family: "Roboto Mono", serif;
    font-size: 1.5vh;
    color: white;
    padding-left: 2vw;
    text-align: center;
  }
  
  .fa-solid {
    color: black;
    display: block;
    margin-left: 5px;
    margin-top: 3px;
  }

  .previewpara {
    color: white;
    width: 30vw;
    margin: auto;
    display: inline;
  }

  .ftb-name {
    color: white;
    font-size: 4vh;
  }
  
  .ftb1-para {
    font-family: "Roboto Mono", serif;
    color: white;
    font-size: 2vh;
    text-align: left;
    display: block;
  }
  
  .ftb1-info {
    height: 11vh;
    width: 35vw;
    display: flex;
    margin: auto;
    margin-top: 0vw;
  }
  
  a.Alink-feat1:link, a.Alink-feat1:visited {
    color: white;
    border: 1px solid white;
    background: #004bad68;
    font-size: 2.1vh;
    text-decoration: none;
    width: 15vw;
    height: 8vh;
    text-align: center;
    margin: auto;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 1vw;
  }
  
  a.Alink-feat1:hover, a.Alink-feat1:active {
    color: white;
    border: 1px solid white;
    background: linear-gradient(#004badc6, #002f6ca9);
    font-size: 2.1vh;
    width: 15vw;
    height: 9.5vh;
    transition: 0.8s ease-in-out;
    transform: scale(1.1, 1.1);
    box-shadow: 2px 2px 5px black;
  }
  
  a.Alink-feat2:link, a.Alink-feat2:visited {
    color: white;
    border: 1px solid #ff3131;
    font-size: 2.1vh;
    text-decoration: none;
    width: 15vw;
    height: 8vh;
    margin: auto;
    text-align: center;
    /* margin-left: 1.2vw; */
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 1vw;
  }
  
  a.Alink-feat2:hover, a.Alink-feat2:active {
    color: white;
    background: linear-gradient(#ff3131db, #4b1008);
    font-size: 2.1vh;
    border: 1px solid #ff3131;
    width: 15vw;
    height: 9.5vh;
    transition: 1s ease-in-out;
    transform: scale(1.1, 1.1);
    box-shadow: 2px 2px 5px black;
  }
  
  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: black;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    z-index: 2;
  }
  
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  .prev:hover,
  .next:hover {
    background-color: #004badad;
  }
  
  .dots {
    width: 8vw;
    height: 4vh;
    margin: auto;
  }
  
  .dot {
    cursor: pointer;
    height: 11px;
    width: 11px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  
  .active,
  .dot:hover {
    background-color: #004aad;
  }
  
  @media only screen and (max-width: 500px) {
    .prev,
    .next,
    .text {
      font-size: 11px;
    }
  }
  
  #who {
    width: 10vw;
    height: 5vh;
  }
  
  .option {
    font-size: 2vh;
    padding: 2vh;
    background-color: beige;
  }
  
  .connect {
    height: 100vh;
    width: 100%;
    background-color: white;
    z-index: -1; 
  }
  
  .connect-inner {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;
    background-image: url("images/erobkg2.jpg");
    background-repeat: repeat;
    background-attachment: fixed;
    background-position-x: 100%;
    background-position-y: 60%;
    background-size: contain;
    background-origin: padding-box;
    object-fit: contain;
    object-position: 100% 100%;
    border-top-left-radius: 10vw;
    border-top-right-radius: 10vw;
    z-index: 0;
  }
  
  /*
  .connect-overlay {
    height: 90vh;
    width: 99.8vw;
    z-index: 1;
    background: linear-gradient(rgba(0, 0, 0, 0.955), rgba(0, 0, 0, 0.279), rgba(0, 0, 0, 0.463), black);
    position: relative;
    left: 0;
    border-top-left-radius: 10vw;
    border-top-right-radius: 10vw;
  } */
  
  .connect-inner-cta {
    position: absolute;
    height: 40vh;
    width: 60vw;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    top: 15vh;
    z-index: 3;
    left: 20vw;
  }
  
  .solid2 {
    color: white;
    font-size: 10vh;
    padding-left: 3vw;
  }
  
  .cic-heading {
    color: white;
    font-size: 6vh;
    text-align: center;
    font-weight: 500;
    line-height: 7vh;
    text-shadow: 2px 2px 6px black;
  }
  
  .cic-buttons {
    height: 10vh;
    width: 35vw;
    display: flex;
    justify-content: space-around;
    position: relative;
  }
  
  a.cic-email:link, a.cic-email:visited {
    font-family: "Roboto Mono", sans-serif;
    height: 8vh;
    width: 12vw;
    text-decoration: none;
    display: flex;
    align-items: center;
    text-align: center;
    background-color: white;
    border-bottom: 2px solid #004aad;
    cursor: pointer;
    color: black;
    font-weight: 400;
    font-size: 2.3vh;
    justify-content: center;
    border-radius: 1vw;
  }
  
  a.cic-email:hover, a.cic-email:active {
    background-color: #004bad76;
    border: 2px solid #004aad;
    color: white;
    height: 8vh;
    width: 15vw;
    text-decoration: none;
    transition: 0.5s ease-in-out;
  }
  
  a.cic-WA:link, a.cic-WA:visited {
    font-family: "Roboto Mono", sans-serif;
    background-color: black;
    border-bottom: 1px solid greenyellow;
    height: 8vh;
    width: 12vw;
    text-decoration: none;
    display: flex;
    align-items: center;
    text-align: center;
    cursor: pointer;
    color: white;
    font-weight: 400;
    font-size: 2.3vh;
    justify-content: center;
    border-radius: 1vw;
  }
  
  a.cic-WA:hover, a.cic-WA:active {
    width: 15vw;
    border: 2px solid greenyellow;
    background-color: rgba(0, 48, 0, 0.292);
    transition: 0.5s ease-in-out;
  }
  
  .connect-inner-socials {
    width: 90vw;
    height: 4vh;
    margin: auto;
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 83vh;
    left: 5vw;
  }
  
  .cis1 {
  
  }
  
  .cis1-para {
    color: white;
    font-size: 1.7vh;
    font-weight: 200;
  }
  
  .cis2 {
  
  }
  
  a.Alink-socials:link, a.Alink-socials:visited {
    font-size: 1.7vh;
    color: white;
    text-decoration: none;
    cursor: pointer;
  }
  
  a.Alink-socials:hover, a.Alink-socials:active {
    color: #004aad;
    font-size: 2.7vh;
    transition: 0.5s ease-in-out;
  }

  /* TABLET SCREEN */

  @media (max-width: 1024px),
  (max-width: 1228px),
  (max-width: 820px),
  (max-width: 768px) {
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    html {
      font-size: 62.5%;
      /* scroll bar */
      /* width */
      ::-webkit-scrollbar {
        width: 0.2vw;
      }
    
      /* Track */
      ::-webkit-scrollbar-track {
        background: black;
      }
      
      /* Handle */
      ::-webkit-scrollbar-thumb {
        background: #ff3131;
      }
    
      /* Handle on hover */
      ::-webkit-scrollbar-thumb:hover {
        background: #ff3131;
        width: 0.5vw;
      }
    }
    
    body {
      font-family: "Courier Prime", "Roboto Mono", "Space Grotesk", sans-serif;
    }
  
    .frontend-hero {
      height: 100vh;
      background-color: #f5f5f5;
      /*
      background-image: url("images/IMG_2946.JPG.jpeg");
      background-repeat: no-repeat;
      background-attachment: scroll;
      background-position-x: 89%;
      background-position-y: 100%;
      background-size: cover;
      background-origin: padding-box;
      z-index: 0;
      object-fit: cover;
      object-position: 100% 100%; */
      display: flex;
      justify-content: space-between;
    }
  
    .logobox1 {
      display: flex;
      flex-direction: column;
      margin-left: 2vw;
    }
    
    .logobox1a {
      display: inline-block;
      margin-top: 3vh;
      padding-left: 1vw;
    }
    
    .logobox1b {
      display: block;
      margin-top: -1.2vh;
    }
    
    .logo1a {
      height: 4vh;
    }
    
    .logo1b {
      height: 7vh;
      margin-left: 0.5vw;
    }
  
    .navbox {
      height: 95vh;
      width: 42vw;
      margin-right: 0vw;
      margin-top: 0vh;
      margin-left: -33vw;
      padding-right: 3vw;
    }

    .barsicon {
      display: none;
    }
    
    .navul {
      list-style: none;
      list-style-type: none;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      margin: auto;
    }
    
    .navli {
      font-family: "Roboto Mono", serif;
      font-optical-sizing: auto;
      font-style: normal;
      text-decoration: none;
      font-weight: 300;
      text-align: right;
      line-height: 8vh;
    }
    
    .navlid {
      font-family: "Roboto Mono", serif;
      font-optical-sizing: auto;
      font-style: normal;
      text-decoration: none;
      text-decoration: none;
      text-align: right;
      line-height: 1vh;
    }
    
    a.Alink-nav:link,
    a.Alink-nav:visited {
      text-decoration: none;
      color: black;
      font-size: 2vh;
      font-weight: 400;
    }
    
    a.Alink-nav:hover,
    a.Alink-nav:active {
      color: black;
      font-size: 2.3vh;
      font-weight: 300;
      transition: 0.5s ease-out;
      text-shadow: 2px 2px 5px #004aad;
    }
  
    .hero-buttons {
      height: 15vh;
      width: 38vw;
      display: flex;
      flex-direction: column;
      margin: auto;
      padding-left: 1.5vw;
      margin-top: 51vh;
      margin-left: 0vw; /* remove this to keep the buttons on the right*/
    }
    
    a.Alink-hbutt1:link, a.Alink-hbutt1:visited {
      color: black;
      font-family: "Roboto Mono", sans-serif;
      background-color: white;
      border: 2px solid black;
      font-size: 2.5vh;
      text-decoration: none;
      width: 35vw;
      height: 6vh;
      text-align: center;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      border-radius: 1vh;
    }
    
    a.Alink-hbutt1:hover, a.Alink-hbutt1:active {
      color: white;
      background-color: black;
      font-size: 2.5vh;
      width: 35vw;
      height: 7vh;
      transition: 1s ease-in-out;
      box-shadow: 2px 2px 10px #004aad;
    }
    
    a.Alink-hbutt2:link, a.Alink-hbutt2:visited {
      font-family: "Roboto Mono", sans-serif;
      color: white;
      background-color: #ff3131;
      font-size: 2.5vh;
      text-decoration: none;
      width: 35vw;
      height: 6vh;
      text-align: center;
      /* margin-left: 1.2vw; */
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      border-radius: 1vh;
      border: 2px solid black;
    }
    
    a.Alink-hbutt2:hover, a.Alink-hbutt2:active {
      color: white;
      border: none;
      background: linear-gradient(#ff3131, #b62613);
      font-size: 2.5vh;
      width: 35vw;
      height: 7vh;
      transition: 1s ease-in-out;
      box-shadow: 2px 2px 10px black;
    }
    
    h1 {
      font-family: "Boldonse", system-ui;
      font-weight: 100;
      font-size: 9vh;
      color: black;
      text-align: left;
      line-height: 12vh;
      /* text-shadow: 2px 2px 2px black; */
      padding-left: 1vw;
      margin-top: 27vh;
      width: 88vw;
    }

    /*
    .herotitle {
      font-size: 8vh;
      color: rgba(255, 255, 255, 0.33);
      position: absolute;
      margin: auto;
      align-self: center;
      font-weight: 100;
      left: 18vw;
      top: 35vh;
      text-shadow: 2px 2px 6px black;
    }

    .herotitlemin {
      color: white;
      font-size: 3vh;
    }
      */
  
    
    .code {
      height: 378vh;
      width: 100%;
      background-color: white;
      padding-top: 0vh;
    }
    
    .code-inner {
      display: flex;
      flex-direction: column;
    }
    
    /*
    .code-title {
      display: inline;
      margin-top: 0vh;
      margin-left: 0vw;
      margin: auto;
      rotate: 0deg;
      height: 15vh;
      width: 30vw;
      padding-left: 2vw;
      padding-top: 1.7vh;
      display: none;
    }
    
    .code-head1 {
      font-family: "Courier Prime", serif;
      font-weight: 100;
      font-size: 3.6vh;
      font-optical-sizing: auto;
      font-style: normal;
      color: black;
      padding-top: 1vh;
      padding-left: 0vw;
    }
    
    .code-head2 {
      font-family: "Courier Prime", serif;
      font-weight: 300;
      font-size: 8vh;
      color: #004aad;
      margin-left: 0vw;
      margin-top: -1vh;
    }
      */
    
    .code-images {
      width: 90vw;
      display: flex;
      flex-direction: row;
      margin-left: 4vw;
      margin-top: 0vh;
      justify-content: space-between;
    }
    
    .code-img1 {
      height: 17.1vh;
      margin-top: -3vh;
      border-radius: 5vw;
    }
     
    .code-img2 {
      padding-top: 3vh;
    }
    
    .code-i1 {
      width: 90vw;
      filter: grayscale(100%);
      box-shadow: 2px 2px 15px black;
      border-radius: 5vw;
    }
    
    .code-i2 {
      height: 8vh;
      margin-left: 0vw;
      filter: grayscale(100%);
      margin-top: -5vh;
      display: none;
    }
    
    .code-body {
      width: 100%;
      height: 370vh;
      background: linear-gradient(
        180deg,
        #ffffff,
        #fafafa,
        #f5f5f5,
        #e5e5e5,
        #d4d4d4
      );
      align-self: self-end;
      /* border-top: 2px solid #ff3131;
      border-left: 2px solid #ff3131;
      border-bottom: 2px solid #b62713; */
    }
    
    .code-body-content {
      width: 62.6vw;
      height: 380vh;
    }
    
    .code-body-text {
      width: 90vw;
      height: 23vh;
      margin-top: 4vh;
      margin-left: 4vw;
    }
    
    .code-body-text-heading {
      font-family: "Courier Prime", serif;
      color: black;
      font-size: 2.5vh;
      font-weight: 400;
      font-optical-sizing: auto;
      font-style: normal;
      padding-top: 1vh;
    }
    
    .code-body-text-para {
      font-family: "Roboto Mono", serif;
      color: black;
      font-size: 1.5vh;
      font-weight: 300;
      font-optical-sizing: auto;
      font-style: normal;
      margin-top: 2vh;
      line-height: 2.6vh;
    }
    
    .codeicon, .fa-code {
      color: #ff3131;
      display: inline;
    }
     
    a.Alink-code:link, a.Alink-code:visited {
      color: #ff3131;
      font-family: "Roboto Mono", serif;
      font-size: 1.5vh;
      font-weight: 500;
      text-decoration: none;
    }
    
    a.Alink-code:hover, a.Alink-code:active {
      font-family: "Roboto Mono", serif;
      font-size: 1.7vh;
      font-weight: 500;
      color: #b62713;
      transition: 1s ease-in-out;
    }

    .projects {
      height: 336vh;
      display: flex;
      flex-direction: column;
      width: 99.5vw;
      background-image: url("images/IMG_3295.JPG");
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position-x: 50%;
      background-position-y: 100%;
      background-size: cover;
      background-origin: padding-box;
      object-fit: cover;
      object-position: 100% 100%;
    }
    
    .projects1 {
      height: 336vh;
      padding-top: 4vh;
    }
 
    .projects-heading-bold {
      font-family: "Boldonse", system-ui;
      color: black;
      font-size: 7vh;
      font-weight: 200;
      position: relative;
      top: 30vh;
      margin-left: 3vw;
      position: sticky;
      z-index: 0;
      letter-spacing: -0.3vw;
    }
    
    .projects-heading-para {
      font-family: "Roboto Mono", sans-serif;
      color: black;
      font-size: 1.8vh;
      text-align: left;
      position: relative;
      position: sticky;
      top: 43vh;
      margin-left: 4vw;
    }
    
    .projects-logo {
      height: 8vh;
      position: relative;
      top: 3vh;
      position: sticky;
      z-index: 0;
      margin-left: 80vw;
      top: 80vh;
    }

    .toparrow {
      font-size: 3vh;
      display: inline;
      width: 2vw;
      position: relative;
      left: 94vw;
      top: 94vh;
      position: fixed;
      z-index: 99;
    }
    
    .projects2 {
      height: 308vh;
      z-index: 2;
      background: linear-gradient(#ffffff05,
      #fafafa6f,
      #f5f5f565,
      #e5e5e570,
      #d4d4d48a,
      white);
      position: relative;
      bottom: 0vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-top: 0vh;
    }
    
    .project1, .project2, .project3, .project4, .project5, .project6, .project7, .project8 {
      width: 60vw;
      height: 21vh;
      margin: auto;
      position: relative;
      box-shadow: 1px 1px 4px black;
    }
    
    .project1:hover, .project2:hover, .project3:hover, .project4:hover, .project5:hover, .project6:hover, .project7:hover, .project8:hover {
      width: 60vw;
      height: 21vh;
      margin: auto;
      position: relative;
      transition: 0.7s ease-in-out;
      transform: scale(1.2,1.2);
    }
    
    /* image */
    .code-grid-i1, .code-grid-i2, .code-grid-i3, .code-grid-i4, .code-grid-i5, .code-grid-i6, .code-grid-i7, .code-grid-i8 {
      opacity: 1;
      display: block;
      width: 60vw;
      height: 21vh;
      transition: .5s ease;
      backface-visibility: hidden;
    }
    
    /* what happens when the div and image are hovered */
    .project1:hover, .code-grid-i1, .project2:hover, .code-grid-i2, .project3:hover, .code-grid-i3, .project4:hover, .code-grid-i4, .project5:hover, .code-grid-i5, .project6:hover, .code-grid-i6, .project7:hover, .code-grid-i7, .project8:hover, .code-grid-i8 {
      opacity: 0.9;
      box-shadow: 5px 10px 10px black;
    }
    
    /* to show the text when the div is hovered */
    .project1:hover .code-grid-img-txt, .project2:hover .code-grid-img-txt, .project3:hover .code-grid-img-txt, .project4:hover .code-grid-img-txt, .project5:hover .code-grid-img-txt, .project6:hover .code-grid-img-txt, .project7:hover .code-grid-img-txt, .project8:hover .code-grid-img-txt {
      opacity: 1;
    }
    
    /*
    a.Alink-grid:link, a.Alink-grid:visited {}
    a.Alink-grid:hover, a.Alink-grid:active {} */
    
    .code-grid-img-txt /* text div*/ {
      transition: .5s ease;
      opacity: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
    }
    
    .cgi-txt {
      font-size: 3vh;
      color: white;
      text-shadow: 2px 2px 10px black;
    }
    
    .fa-brands {
      font-size: 2vh;
      color: black;
    }
    
    .shiftright {
      left: 11vw;
    }
    
    .shiftleft {
      right: 12vw;
    }
    
    .moreprojectslink {
      height: 5vh;
      width: 30vw;
      position: relative;
      left: 35vw;
      bottom: 3vh;
    } 
    
    a.Alink-moreprojects:link, a.Alink-moreprojects:visited {
      font-size: 1.8vh;
      text-align: center;
      text-decoration: none;
      color: #ff3131;
    }
    
    a.Alink-moreprojects:hover, a.Alink-moreprojects:active {
      font-size: 2.2vh;
      text-decoration: none;
      transition: 0.5s ease-in-out;
      color: #b62713;
    }
    
    /*
    .code-body-grid {
      width: 90vw;
      height: 52vh;
      margin-left: 4vw;
      margin-top: 5vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    
    a.Alink-code:link, a.Alink-code:visited {
      color: #d6c09f;
      font-family: "Roboto Mono", serif;
      font-size: 1.5vh;
      font-weight: 500;
      text-decoration: none;
    }
    
    a.Alink-code:hover, a.Alink-code:active {
      font-family: "Roboto Mono", serif;
      font-size: 1.6vh;
      font-weight: 500;
      color: #d6c09f;
      transition: 1s ease-in-out;
      text-shadow: 2px 2px 5px #9e8461;
    }
    
    .code-body-grid-row1,.code-body-grid-row2, .code-body-grid-row3, .code-body-grid-row4 {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    
    .code-grid-img1, .code-grid-img2, .code-grid-img3, .code-grid-img4, .code-grid-img5, .code-grid-img6, .code-grid-img7, .code-grid-img8, .code-grid-img9, .code-grid-img10, .code-grid-img11, .code-grid-img12 /* container {
      position: relative;
      margin-bottom: 2vh;
    }
    
    .code-grid-i1, .code-grid-i2, .code-grid-i3, .code-grid-i4, .code-grid-i5, .code-grid-i6, .code-grid-i7, .code-grid-i8, .code-grid-i9, .code-grid-i10, .code-grid-i11, .code-grid-i12 /* image {
      width: 27vw;
      opacity: 1;
      display: block;
      height: auto;
      transition: .5s ease;
      backface-visibility: hidden;
    }
    
    a.Alink-grid:link, a.Alink-grid:visited {
      width: 18.5vw;
    }
    
    a.Alink-grid:hover, a.Alink-grid:active {
      width: 18.5vw;
    }
    
    .code-grid-img-txt /* middle {
      transition: .5s ease;
      opacity: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%)
    }
    
    .cgi-txt {
      font-family: "Roboto Mono", serif;
      font-size: 2.5vh;
      color: white;
    }
    
    .code-grid-img1:hover .code-grid-i1, 
    .code-grid-img2:hover .code-grid-i2, 
    .code-grid-img3:hover .code-grid-i3,
    .code-grid-img4:hover .code-grid-i4,
    .code-grid-img5:hover .code-grid-i5,
    .code-grid-img6:hover .code-grid-i6,
    .code-grid-img7:hover .code-grid-i7,
    .code-grid-img8:hover .code-grid-i8,
    .code-grid-img9:hover .code-grid-i9,
    .code-grid-img10:hover .code-grid-i10,
    .code-grid-img11:hover .code-grid-i11,
    .code-grid-img12:hover .code-grid-i12 {
      opacity: 0.3;
      width: 20vw;
      box-shadow: 5px 10px 10px black;
    }
    
    .code-grid-img1:hover .code-grid-img-txt,
    .code-grid-img2:hover .code-grid-img-txt, 
    .code-grid-img3:hover .code-grid-img-txt,
    .code-grid-img4:hover .code-grid-img-txt,
    .code-grid-img5:hover .code-grid-img-txt,
    .code-grid-img6:hover .code-grid-img-txt,
    .code-grid-img7:hover .code-grid-img-txt,
    .code-grid-img8:hover .code-grid-img-txt,
    .code-grid-img9:hover .code-grid-img-txt,
    .code-grid-img10:hover .code-grid-img-txt,
    .code-grid-img11:hover .code-grid-img-txt,
    .code-grid-img12:hover .code-grid-img-txt {
      opacity: 1;
    }
    */
    
    .experience {
      height: 150vh;
      background-color: white;
      padding-top: 3vh;
    }
    
    .exper-inner {
      margin: auto;
      height: 149vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    
    .exper-inner-head {
      display: flex;
      flex-direction: column;
      width: 90vw;
      height: 50vh;
      margin: auto;
      margin-top: -2vh;
    }
    
    .exper-inner-head1 {
      width: 90vw;
      height: 37vh;
      margin-top: 0vh;
      margin: auto;
      padding-bottom: 5vh;
      border-bottom: 1px solid #757575;
      z-index: 2;
    }
    
    .exper-ih-txt {
      font-size: 3.3vh;
      color: black;
      font-family: "Courier Prime", serif;
      font-optical-sizing: auto;
      font-style: normal;
      font-weight: 400;
      font-style: normal;
      text-align: center;
      margin-bottom: 3vh;
    }
    
    .exper-span {
      color: black;
      font-weight: 500;
      font-size: 7vh;
      font-family: "Boldonse", system-ui;
    }
  
    .exper-span-red {
      font-size: 3vh;
      color: #ff3131;
      font-family: "Courier Prime", serif;
      font-optical-sizing: auto;
      font-style: normal;
      font-weight: 400;
      font-style: normal;
      text-align: right;
      margin-bottom: 3vh;
    }
    
    .exper-ih-para {
      font-family: "Roboto Mono", serif;
      font-size: 1.7vh;
      color: black;
      font-weight: 400;
      text-align: justify;
    }
    
    .exper-inner-head2 {
      width: 23vw;
      height: 14vh;
      align-content: center;
      margin: auto;
    }
    
    .exper-inner-img {
      height: 10vh;
      top: 0;
      position: relative;
      align-content: center;
      margin: auto;
    }
    
    .exper-inner-box {
      width: 94vw;
      height: 84.9vh;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      margin: auto;
      margin-top: 0vh;
    }
    
    .scale {
      height: 3vh;
      width: 80vw;
      /*rotate: 90deg; flex-direction: column;*/
      rotate: 0deg;
      display: inline;
      position: relative;
      top: 79vh;
      margin: auto;
      margin-top: 2vh;
      height: 5vh;
      align-self: center;
      align-content: center;
      z-index: 3;
    }
  
    .slider {
      appearance: none;
      -webkit-appearance: none;
      width: 80vw;
      height: 1px;
      background: #004aad;
      outline: none;
      -webkit-transition: .2s;
      transition: opacity .2s;
    }
      
    .slider:hover {
      opacity: 0.5;
    }
      
    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: white;
      border: 1px solid #004aad;
      cursor: pointer;
    }
      
    .slider::-moz-range-thumb {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #004aad;
      cursor: pointer;
    }
    
    .exper-info {
      height: 39vh;
      width: 93vw;
      display: flex;
      margin: auto;
      margin-left: 0vw;
      margin-top: 0vh;
    }
    
    .exper-info-logobox {
      width: 10vw;
      height: 10vh;
    }
    
    .exper-info-logo {
      width: 10vw;
      height: 7vh;
    }
    
    .exper-info-txt {
      width: 80vw;
      height: 30vh;
    }
    
    .exper-ift-heading {
      font-family: "Roboto Mono", serif;
      font-size: 2.2vh;
      color: black;
      font-weight: 400;
    }
    
    .exper-ift-para {
      font-family: "Roboto Mono", serif;
      font-size: 1.6vh;
      color: #004aad;
      font-weight: 300;
    }
    
    .fa-brands {
      font-size: 2.2vh;
      color: black;
    }
    
    .exper-ift-para2 {
      font-family: "Roboto Mono", serif;
      font-size: 1.5vh;
      color: black;
      font-weight: 300;
      line-height: 2.7vh;
      text-align: justify;
    }
    
    a.Alink-exper:link,
    a.Alink-exper:visited {
      font-family: "Roboto Mono", serif;
      text-decoration: none;
      color: #004aad;
      font-size: 1.6vh;
      font-weight: 400;
    }
    
    a.Alink-exper:hover,
    a.Alink-exper:active {
      color: #032b44;
      font-size: 1.6vh;
      font-weight: 400;
      transition: 0.5s ease-out;
    }
    
    .fa-arrow-up-right-from-square, .fa-2xs {
      color: black;
    }
    
    .exper-cert {
      margin: auto;
      width: 65.5vw;
      height: 50vh;
      display: flex;
      margin-top: -3vh;
      margin-bottom: 2.5vh;
      padding-left: 0vw;
    }
    
    .exper-cert-img {
      height: 25vh;
      align-self: center;
      transform: skewX(-10deg);
      box-shadow: 5px 2px 5px black;
    }
    
    .exper-cert-img:hover {
      height: 35vh;
      align-self: center;
      transform: skewX(0deg);
      box-shadow: 2px 2px 30px #ff3131;
      transition: 0.8s ease-in-out;
    }
    
    .featured-projects {
      height: 140vh;
      background-color: white;
    }
    
    .featured-inner {
      width: 95vw;
      height: 139vh;
      margin: auto;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    
    .featured-head {
      margin: auto;
      height: 30vh;
      margin-top: 5vh;
    }
    
    .feat-heading {
      font-family: "Boldonse", system-ui;
      font-optical-sizing: auto;
      font-style: normal;
      color: black;
      font-size: 7vh;
      line-height: 10vh;
      font-weight: 300;
      text-align: center;
    }
    
    .feat-para {
      font-family: "Roboto Mono", serif;
      color: rgb(65, 65, 65);
      text-align: center;
      font-size: 2.2vh;
    }
    
    .featured-body {
      display: flex;
      height: 90vh;
      width: 95vw;
      margin-top: 0vh;
      position: relative;
      margin: auto;
    }
    
    .mySlides {
      display: none;
    }
    
    .fade {
      animation-name: fade;
      animation-duration: 1.5s;
    }
    
    @keyframes fade {
      from {
        opacity: 0.4;
      }
      to {
        opacity: 1;
      }
    }
    
    .ftb1, .ftb2, .ftb3, .ftb4, .ftb5 {
      width: 80vw;
      height: 83vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-left: 3vw;
      padding-top: 3vh;
      margin-left: 0vw;
      margin: auto;
      border-radius: 6vw;
      border: 2px solid black;
      background: linear-gradient(#004bad89, #004aad);
      position: relative;
      z-index: 0;
      box-shadow: 2px 2px 30px #002f6c;
      /*
      animation-name: ftbani;
      animation-duration: 4s;
      animation-delay: 0s;
      animation-iteration-count: 10;
      animation-direction: alternate;
      animation-timing-function: ease-in-out; */
    }
    
    /*
    @keyframes htbani {
        0% {top:20px; bottom:0px;}
        25% {top:0px; bottom:20px;}
        50% {top:20px; bottom:0px;}
        75% {top:0px; bottom:20px;}
        100% {top:20px; bottom:0px;}
    } */
    
    .ftb1-deets {
      width: 73vw;
      height: 30vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-top: 0vh;
    }
    
    .ftb1-preview {
      width: 80vw;
      height: 48vh;
      position: absolute;
      z-index: 1;
      left: 0vw;
      top: 35vh;
      display: flex;
      flex-direction: column;
      border-bottom-right-radius: 6vw;
      border-bottom-left-radius: 6vw;
    }
  
    .ftb1-preview:hover {
      width: 80vw;
      height: 80vh;
      position: absolute;
      z-index: 1;
      left: 0vw;
      top: -3vh;
      transition: 0.7s ease-in-out;
      background: linear-gradient(rgba(0, 0, 0, 0.129), rgba(0, 0, 0, 0.311), black);
      box-shadow: 2px 2px 15px #002f6c;
    }
    
    a.Alink-preview:link, a.Alink-preview:active {
      height: 30vh;
    }
    a.Alink-preview:hover, a.Alink-preview:visited {
      height: 33vh;
    }
    
    .preview-scnsht {
      height: 25vh;
      box-shadow: 2px 2px 2px #b6261343;
    }
  
    .preview-scnsht2 {
      height: 28vh;
      box-shadow: 2px 2px 2px #b6261343;
    }
  
    .ftb1-head {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 20vh;
      width: 27vw;
    }
    
    .ftb1-head-logo {
      width: 30vw;
      height: 10vh;
      padding-top: 1.5vh;
    }
    
    .ftb1-head-logo-img {
      height: 7vh;
    }
  
    .ftb2-head-logo-img {
      height: 7vh;
    }
  
    .ftb3-head-logo-img {
      height: 6vh;
    }
  
    .ftb4-head-logo-img {
      height: 8vh;
    }
  
    .ftb5-head-logo-img {
      height: 4vh;
    }
    
    .ftb1-head-deets {
      width: 30vw;
      display: flex;
      flex-direction: column;
      height: 6vh;
      justify-content: space-between;
      margin-left: 0vw;
    }
  
    .ftb2-head-deets {
      width: 35vw;
      display: flex;
      flex-direction: column;
      height: 9vh;
      justify-content: space-between;
      margin-left: 0vw;
    }
    
    .fhd-heading {
      font-family: "Roboto Mono", serif;
      color: black;
      font-size: 3vh;
      font-weight: 300;
      text-shadow: 2px 2px 10px black;
    }
    
    .fhd-tools {
     display: flex;
     width: 26vw;
     justify-content: space-between;
    }
    
    .fhd-tools-para-p1 {
      font-family: "Roboto Mono", serif;
      display: block;
      background-color: rgba(0, 0, 0, 0.148);
      color: rgb(255, 175, 27);
      font-weight: 200;
      border-radius: 2vh;
      font-size: 1vh;
      box-shadow: 2px 2px 8px #002f6c;
      padding: 6px 10px 2px 10px; /*top, right, bottom, left */
      cursor: pointer;
    }
    
    .fhd-tools-para-p2 {
      font-family: "Roboto Mono", serif;
      font-weight: 200;
      display: block;
      background-color: rgba(0, 0, 0, 0.148);
      color: #a3cbff;
      border-radius: 2vh;
      font-size: 1vh;
      box-shadow: 2px 2px 8px #002f6c;
      padding: 6px 10px 2px 10px;
      cursor: pointer;
    }
    
    .fhd-tools-para-p3 {
      font-family: "Roboto Mono", serif;
      font-weight: 200;
      display: block;
      background-color: rgba(0, 0, 0, 0.148);
      color: rgb(239, 223, 0);
      border-radius: 2vh;
      font-size: 1vh;
      box-shadow: 2px 2px 8px #002f6c;
      padding: 6px 10px 2px 10px;
      cursor: pointer;
    }
    
    .fhd-para-timeline {
      font-family: "Roboto Mono", serif;
      color: white;
      font-size: 1.5vh;
      padding-left: 0.5vw;
      font-weight: 100;
    }
    
    .ftb1-devices {
      display: flex;
      border: 0.1px solid rgba(255, 255, 255, 0.145);
      background-color: #002f6c09;
      width: 50vw;
      height: 3vh;
      border-radius: 5vw; 
      padding: 5px;
      margin-top: 0vh;
      margin: auto;
      box-shadow: 2px 2px 2px black;
      justify-content: space-between;
    }
    
    .ftb1-devices-desk {
      width: 10vw;
      display: flex;
      margin: auto;
      cursor: pointer;
    }
    
    .ftb1-devices-mobile {
      width: 13vw;
      border-left: 0.5px solid #626262;
      display: flex;
      margin: auto;
      margin-left: 1vw;
      cursor: pointer;
    }
    
    .ftb1-devices-iPad {
      width: 9vw;
      border-left: 0.5px solid #626262;
      display: flex;
      margin: auto;
      margin-left: 1vw;
      cursor: pointer;
    }
    
    .ftb1-devices-desk-para, .ftb1-devices-mobile-para, .ftb1-devices-iPad-para {
      font-family: "Roboto Mono", serif;
      font-size: 1.4vh;
      color: white;
      padding-left: 2vw;
      text-align: center;
    }
    
    .fa-solid {
      color: black;
      display: inline;
      margin-left: 5px;
      margin-top: 0px;
    }
  
    .previewpara {
      color: white;
      width: 30vw;
      margin: auto;
      display: inline;
    }

    .ftb-name {
      color: white;
      font-size: 3vh;
      font-weight: 100;
    }
    
    .ftb1-para {
      font-family: "Roboto Mono", serif;
      color: white;
      font-size: 1.6vh;
      text-align: left;
      display: block;
    }
    
    .ftb1-info {
      height: 7vh;
      width: 77vw;
      display: flex;
      margin: auto;
    }
    
    a.Alink-feat1:link, a.Alink-feat1:visited {
      color: white;
      border: 2px solid white;
      background: #004bad68;
      font-size: 1.8vh;
      text-decoration: none;
      width: 34vw;
      height: 4vh;
      text-align: center;
      margin: auto;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      border-radius: 1vw;
    }
    
    a.Alink-feat1:hover, a.Alink-feat1:active {
      color: white;
      border: 1px solid white;
      background: linear-gradient(#004badc6, #002f6ca9);
      font-size: 1.8vh;
      width: 36vw;
      height: 6vh;
      transition: 1s ease-in-out;
      transform: scale(1.1, 1.1);
      box-shadow: 2px 2px 4px black;
      border-radius: 0;
    }
    
    a.Alink-feat2:link, a.Alink-feat2:visited {
      color: white;
      border: 1.7px solid #ff3131;
      background-color: #b62713;
      font-size: 1.8vh;
      text-decoration: none;
      width: 34vw;
      height: 4vh;
      margin: auto;
      text-align: center;
      /* margin-left: 1.2vw; */
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      border-radius: 1vw;
    }
    
    a.Alink-feat2:hover, a.Alink-feat2:active {
      color: white;
      background: linear-gradient(#ff3131db, #4b1008);
      border: 1px solid #ff3131;
      font-size: 1.8vh;
      width: 36vw;
      height: 6vh;
      transition: 1s ease-in-out;
      transform: scale(1.1, 1.1);
      box-shadow: 2px 2px 4px black;
      border-radius: 0;
    }
    
    .prev,
    .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      padding: 16px;
      margin-top: -22px;
      color: black;
      font-weight: bold;
      font-size: 40px;
      transition: 0.6s ease;
      border-radius: 50%;
      user-select: none;
      z-index: 2;
    }
    
    .next {
      right: 0;
      border-radius: 50%;
    }
    
    .prev:hover,
    .next:hover {
      background-color: #004badad;
    }
    
    .dots {
      width: 30vw;
      height: 4vh;
      margin: auto;
    }
    
    .dot {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }
    
    .active,
    .dot:hover {
      background-color: #6eadff67;
    }
    
    @media only screen and (max-width: 500px) {
      .prev,
      .next,
      .text {
        font-size: 11px;
      }
    }
    
    #who {
      width: 10vw;
      height: 5vh;
    }
    
    .option {
      font-size: 2vh;
      padding: 2vh;
      background-color: beige;
    }
    
    .connect {
      height: 90vh;
      width: 100%;
      background-color: white;
      z-index: -1; 
    }
    
    .connect-inner {
      height: 90vh;
      justify-content: space-around;
      position: relative;
      background-image: url("images/erobkg2.jpg");
      background-repeat: repeat;
      background-attachment: fixed;
      background-position-x: 50%;
      background-position-y: 100%;
      background-size: cover;
      background-origin: padding-box;
      object-fit: cover;
      object-position: 100% 100%;
      display: flex;
      flex-direction: column;
      border-top-left-radius: 10vw;
      border-top-right-radius: 10vw;
      z-index: 0;
    }
    
    /*
    .connect-overlay {
      height: 90vh;
      width: 99.8vw;
      z-index: 1;
      background: linear-gradient(rgba(0, 0, 0, 0.955), rgba(0, 0, 0, 0.279), rgba(0, 0, 0, 0.463), black);
      position: absolute;
      top: 0;
      left: 0;
      border-top-left-radius: 10vw;
      border-top-right-radius: 10vw;
    } */
    
    .connect-inner-cta {
      position: absolute;
      height: 40vh;
      width: 70vw;
      margin: auto;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      top: 19vh;
      left: 17vw;
      z-index: 3;
    }
    
    .solid2 {
      color: white;
      font-size: 7vh;
      padding-left: 3vw;
    }
    
    .cic-heading {
      color: white;
      font-size: 5vh;
      text-align: center;
      font-weight: 500;
      line-height: 5vh;
      text-shadow: 2px 2px 6px black;
    }
    
    .cic-buttons {
      height: 10vh;
      width: 60vw;
      display: flex;
      justify-content: space-around;
      position: relative;
    }
    
    a.cic-email:link, a.cic-email:visited {
      font-family: "Roboto Mono", sans-serif;
      height: 5vh;
      width: 20vw;
      text-decoration: none;
      display: flex;
      align-items: center;
      text-align: center;
      background-color: white;
      border-bottom: 2px solid #004aad;
      cursor: pointer;
      color: black;
      font-weight: 400;
      font-size: 2vh;
      justify-content: center;
      border-radius: 1vw;
    }
    
    a.cic-email:hover, a.cic-email:active {
      background-color: #004bad76;
      color: white;
      border: 2px solid #004aad;
      height: 5vh;
      width: 25vw;
      text-decoration: none;
      transition: 0.5s ease-in-out;
    }
    
    a.cic-WA:link, a.cic-WA:visited {
      font-family: "Roboto Mono", sans-serif;
      background-color: black;
      border-bottom: 1px solid greenyellow;
      height: 5vh;
      width: 20vw;
      text-decoration: none;
      display: flex;
      align-items: center;
      text-align: center;
      cursor: pointer;
      color: white;
      font-weight: 400;
      font-size: 2vh;
      justify-content: center;
      border-radius: 1vw;
    }
    
    a.cic-WA:hover, a.cic-WA:active {
      height: 5vh;
      width: 25vw;
      border: 2px solid greenyellow;
      background-color: rgba(0, 48, 0, 0.292);
      transition: 0.5s ease-in-out;
    }
    
    .connect-inner-socials {
      width: 90vw;
      height: 4vh;
      margin: auto;
      display: flex;
      position: absolute;
      justify-content: space-between;
    }
    
    .cis1 {
    
    }
    
    .cis1-para {
      color: white;
      font-size: 1.5vh;
      font-weight: 200;
    }
    
    .cis2 {
    
    }
    
    a.Alink-socials:link, a.Alink-socials:visited {
      font-size: 1.5vh;
      color: white;
      text-decoration: none;
      cursor: pointer;
    }
    
    a.Alink-socials:hover, a.Alink-socials:active {
      color: #004aad;
      font-size: 2vh;
      transition: 0.5s ease-in-out;
    }
  }


  /* Mobile screen */

@media (max-width: 932px),
(max-width: 850px),
(max-width: 600px),
(max-width: 412px),
(max-width: 390px),
(max-width: 375px),
(max-width: 360px) {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    font-size: 62.5%;
    /* scroll bar */
    /* width */
    ::-webkit-scrollbar {
      width: 0.2vw;
    }
  
    /* Track */
    ::-webkit-scrollbar-track {
      background: black;
    }
    
    /* Handle */
    ::-webkit-scrollbar-thumb {
      background: #ff3131;
    }
  
    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
      background: #ff3131;
      width: 0.5vw;
    }
  }
  
  body {
    font-family: "Courier Prime", "Roboto Mono", "Space Grotesk", sans-serif;
  }

  .frontend-hero {
    width: 100%;
    height: 100vh;
    background-color: #f5f5f5;
    /*
    background-image: url("images/IMG_2946.JPG.jpeg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position-x: 70%;
    background-position-y: 10%;
    background-size: cover;
    background-origin: padding-box;
    z-index: 0;
    object-fit: cover;
    object-position: 100% 100%;
    */
    display: flex;
    justify-content: space-between;
  }

  .logobox1 {
    display: flex;
    flex-direction: column;
    margin-left: 3vw;
    position: relative;
    z-index: 1;
    width: 48vw;
  }
  
  .logobox1a {
    display: inline-block;
    margin-top: 2vh;
    padding-left: 1vw;
  }
  
  .logobox1b {
    display: block;
    margin-top: -1.4vh;
  }
  
  .logo1a {
    height: 3.7vh;
  }
  
  .logo1b {
    height: 6.2vh;
    margin-left: 0.5vw;
  }

  .navbox {
    height: 89vh;
    width: 44vw;
    margin-top: 0vh;
    margin-left: -26vw;
    list-style: none;
    display: flex;
    flex-direction: column;
    margin-right: 1vw;
    position: relative;
    z-index: 2;
    border-radius: 1vw;
    padding-right: 5vw;
    /*
    background-color: rgba(3, 3, 3, 0.038);
    box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.453);*/
  }

  .navbox .show {
    display: flex;
    transition: 1s ease-in-out;
}

  .navul {
    list-style: none;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin: auto;
    margin-top: 0vh;
    width: 42vw;
    height: 24vh;
  }
  
  .navli {
    font-family: "Roboto Mono", serif;
    font-optical-sizing: auto;
    font-style: normal;
    text-decoration: none;
    font-weight: 300;
    text-align: right;
    line-height: 5vh;
  }
  
  .navlid {
    font-family: "Roboto Mono", serif;
    font-optical-sizing: auto;
    font-style: normal;
    text-decoration: none;
    text-decoration: none;
    text-align: right;
    line-height: 3vh;
  }
  
  a.Alink-nav:link,
  a.Alink-nav:visited {
    text-decoration: none;
    color: black;
    font-size: 1.7vh;
    font-weight: 400;
  }
  
  a.Alink-nav:hover,
  a.Alink-nav:active {
    color: black;
    font-size: 1.9vh;
    font-weight: 300;
    transition: 0.5s ease-out;
    text-shadow: 2px 2px 5px #004aad;
  }

  /*
  .barsicon {
    display: flex;
    margin-left: -20vw;
    margin-right: 2vw;
    margin-top: 2vh;
    height: 5vh;
    width: 10vw;
    z-index: 3;
  }

  .fa-solid {
    color: black;
    font-size: 3vh;
  }*/

  .hero-buttons {
    height: 11.3vh;
    width: 38vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    margin-top: 0vh;
    margin-right: -3vw;
    margin-bottom: 5vh;
  }
  
  a.Alink-hbutt1:link, a.Alink-hbutt1:visited {
    color: black;
    font-family: "Roboto Mono", sans-serif;
    background-color: white;
    border: 2px solid black;
    font-size: 1.8vh;
    text-decoration: none;
    width: 33vw;
    height: 5vh;
    text-align: center;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 1vh;
  }
  
  a.Alink-hbutt1:hover, a.Alink-hbutt1:active {
    color: white;
    background-color: black;
    font-size: 1.8vh;
    width: 35vw;
    height: 5vh;
    transition: 1s ease-in-out;
    box-shadow: 2px 2px 10px #004aad;
  }
  
  a.Alink-hbutt2:link, a.Alink-hbutt2:visited {
    font-family: "Roboto Mono", sans-serif;
    color: white;
    background-color: #ff3131;
    text-decoration: none;
    width: 33vw;
    height: 5vh;
    font-size: 1.8vh;
    text-align: center;
    /* margin-left: 1.2vw; */
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 1vh;
    border: 2px solid black;
  }
  
  a.Alink-hbutt2:hover, a.Alink-hbutt2:active {
    color: white;
    border: none;
    background: linear-gradient(#ff3131, #b62613);
    font-size: 1.8vh;
    width: 35vw;
    height: 5vh;
    transition: 1s ease-in-out;
    transition-delay: 5s;
    box-shadow: 2px 2px 10px black;
  }
  
  h1 {
    font-family: "Boldonse", system-ui;
    font-weight: 100;
    font-size: 8vh;
    color: black;
    text-align: left;
    line-height: 10.3vh;
    /* text-shadow: 2px 2px 2px black; */
    padding-left: 0vw;
    margin-left: -36vw;
    margin-top: 33vh;
    rotate: -90deg;
    display: inline-block;
    width: 120vw;
    /*
    text-shadow: 2px 2px 10px black; */
  }

  .herotitle {
    font-size: 5vh;
    color: rgba(255, 255, 255, 0.33);
    position: absolute;
    margin: auto;
    align-self: center;
    font-weight: 100;
    left: 3vw;
    top: 35vh;
    width: 65vw;
    display: inline-block;
    display: flex;
    flex-direction: column;
    text-shadow: 2px 2px 6px black;
  }

  .herotitlemin {
    color: white;
    font-size: 2.5vh;
  }

  .code {
    height: 272vh;
    width: 100%;
    background-color: white;
    padding-top: 0vh;
  }
  
  .code-inner {
    display: flex;
    flex-direction: column;
  }
  
  /*
  .code-title {
    display: inline;
    margin-top: 0vh;
    margin-left: 0vw;
    margin: auto;
    rotate: 0deg;
    height: 8vh;
    width: 50vw;
    padding-left: 0vw;
    padding-top: 1.7vh;
    position: sticky;
    top: 10vh;
    z-index: 0;
    display: flex;
    display: none;
  }
  
  .code-head1 {
    font-family: "Courier Prime", serif;
    font-weight: 100;
    font-size: 2.3vh;
    font-optical-sizing: auto;
    font-style: normal;
    color: black;
    padding-top: 1vh;
    padding-left: 0vw;
    z-index: 0;
  }
  
  .code-head2 {
    font-family: "Courier Prime", serif;
    font-weight: 300;
    font-size: 6.7vh;
    color: #004aad;
    margin-left: 1vw;
    margin-top: -1vh;
    z-index: 0;
  }*/
  
  .code-images {
    width: 82vw;
    display: flex;
    flex-direction: row;
    margin-top: -1vh;
    justify-content: space-between;
    z-index: 0;
    margin: auto;
  }
  
  .code-img1 {
    height: 9.66vh;
    border-radius: 6vw;
  }
  
  .code-img2 {
  
  }
  
  .code-i1 {
    width: 80vw;
    filter: grayscale(100%);
    box-shadow: 2px 2px 15px #ff3131;
    border-radius: 6vw;
  }
  
  .code-i2 {
    height: 6vh;
    margin-left: 0vw;
    margin-top: -2vh;
    opacity: 0.9;
    filter: grayscale(100%);
    /* margin-top: -10vh; */
  }
  
  .code-body {
    width: 100%;
    height: 273.3vh;
    background: linear-gradient(
      180deg,
      #ffffff,
      #fafafa,
      #f5f5f5,
      #e5e5e5,
      #ffffff
    );
    align-self: self-end;
    /*
    border-top: 2px solid #ff3131;
    border-left: 2px solid #ff3131;
    border-bottom: 2px solid #b62713;*/
  }
  
  .code-body-content {
    width: 100%;
    height: 270vh;
  }
  
  .code-body-text {
    width: 90vw;
    height: 36vh;
    margin-top: 4vh;
    margin-left: 4vw;
    z-index: 6;
    background-color: white;
  }
  
  .code-body-text-heading {
    font-family: "Courier Prime", serif;
    color: black;
    font-size: 2.2vh;
    font-weight: 400;
    font-optical-sizing: auto;
    font-style: normal;
    padding-top: 1vh;
    position: absolute;
    z-index: 4;
  }
  
  .code-body-text-para {
    font-family: "Roboto Mono", serif;
    color: black;
    font-size: 1.5vh;
    font-weight: 300;
    font-optical-sizing: auto;
    font-style: normal;
    top: 7vh;
    line-height: 2.6vh;
    text-align: justify;
    position: relative;
    width: 90vw;
    margin: auto;
  }

  .really {
    display: inline;
  }
  
  .codeicon, .fa-code {
    color: #ff3131;
    display: inline;
    font-size: 1.3vh;
  }

  a.Alink-code:link, a.Alink-code:visited {
    color: #ff3131;
    font-family: "Roboto Mono", serif;
    font-size: 1.5vh;
    font-weight: 500;
    text-decoration: none;
  }
  
  a.Alink-code:hover, a.Alink-code:active {
    font-family: "Roboto Mono", serif;
    font-size: 1.7vh;
    font-weight: 500;
   color: #b62713;
    transition: 1s ease-in-out;
  }

  .projects {
    height: 230vh;
    display: flex;
    flex-direction: column;
    background-color: white;
    background-image: url("images/IMG_3295.JPG");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position-x: 50%;
    background-position-y: 80%;
    background-size: cover;
    background-origin: padding-box;
    object-fit: cover;
    object-position: 100% 100%;
  } 
  
  .projects1 {
    height: 228vh;
    padding-top: 4vh;
  }
  
  .projects-heading-bold {
    font-family: "Boldonse", system-ui;
    font-size: 5vh;
    color: black;
    font-weight: 200;
    position: relative;
    top: 30vh;
    margin-left: 3vw;
    position: sticky;
    z-index: 0;
    letter-spacing: -0.3vw;
  }
  
  .projects-heading-para {
    font-family: "Roboto Mono", sans-serif;
    color: black;
    font-size: 1.4vh;
    text-align: left;
    position: relative;
    position: sticky;
    top: 40vh;
    margin-left: 4vw;
  }
  
  .projects-logo {
    height: 7vh;
    position: relative;
    margin-top: 10vh;
    position: sticky;
    z-index: 0;
    margin-left: 83vw;
    top: 85vh;
  }
  
  .toparrow {
    font-size: 2vh;
    display: inline;
    width: 2vw;
    position: relative;
    left: 93vw;
    top: 94vh;
    position: fixed;
    z-index: 99;
  }
  
  .projects2 {
    height: 198vh;
    z-index: 2;
    background: linear-gradient(#ffffff05,
    #fafafa6f,
    #f5f5f565,
    #e5e5e570,
    #d4d4d48a,
    white);
    position: relative;
    bottom: 0vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 0vh;
  }
  
  .project1, .project2, .project3, .project4, .project5, .project6, .project7, .project8, .project9 {
    width: 70vw;
    height: 15vh;
    margin: auto;
    position: relative;
    box-shadow: 1px 1px 4px black;
  }
  
  .project1:hover, .project2:hover, .project3:hover, .project4:hover, .project5:hover, .project6:hover, .project7:hover, .project8:hover, .project9:hover {
    width: 70vw;
    height: 15vh;
    margin: auto;
    position: relative;
    transition: 0.7s ease-in-out;
    transform: scale(1.2,1.2);
  }
  
  /* image */
  .code-grid-i1, .code-grid-i2, .code-grid-i3, .code-grid-i4, .code-grid-i5, .code-grid-i6, .code-grid-i7, .code-grid-i8, .code-grid-i9 {
    opacity: 1;
    display: block;
    width: 70vw;
    height: 15vh;
    transition: .5s ease;
    backface-visibility: hidden;
  }
  
  /* what happens when the div and image are hovered */
  .project1:hover, .code-grid-i1, .project2:hover, .code-grid-i2, .project3:hover, .code-grid-i3, .project4:hover, .code-grid-i4, .project5:hover, .code-grid-i5, .project6:hover, .code-grid-i6, .project7:hover, .code-grid-i7, .project8:hover, .code-grid-i8,
  .project9:hover, .code-grid-i9 {
    opacity: 0.9;
    box-shadow: 5px 10px 10px black;
  }
  
  /* to show the text when the div is hovered */
  .project1:hover .code-grid-img-txt, .project2:hover .code-grid-img-txt, .project3:hover .code-grid-img-txt, .project4:hover .code-grid-img-txt, .project5:hover .code-grid-img-txt, .project6:hover .code-grid-img-txt, .project7:hover .code-grid-img-txt, .project8:hover .code-grid-img-txt, .project9:hover .code-grid-img-txt {
    opacity: 1;
  }
  
  /*
  a.Alink-grid:link, a.Alink-grid:visited {}
  a.Alink-grid:hover, a.Alink-grid:active {} */
  
  .code-grid-img-txt /* text div*/ {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }
  
  .cgi-txt {
    font-size: 2vh;
    color: white;
    text-shadow: 2px 2px 10px black;
  }
  
  .fa-brands {
    font-size: 1.2vh;
    color: black;
  }
  
  .shiftright {
    left: 7vw;
  }
  
  .shiftleft {
    right: 7vw;
  }
  
  .moreprojectslink {
    height: 5vh;
    width: 40vw;
    position: relative;
    left: 30vw;
    bottom: 3vh;
  } 
  
  a.Alink-moreprojects:link, a.Alink-moreprojects:visited {
    font-size: 1.3vh;
    text-align: center;
    text-decoration: none;
    color: #ff3131;
    margin: auto;
  }
  
  a.Alink-moreprojects:hover, a.Alink-moreprojects:active {
    font-size: 1.3vh;
    text-decoration: none;
    color: #b62713;
  }
  
  /*
  .code-body-grid {
    width: 62vw;
    height: 130vh;
    margin: auto;
    margin-left: 19vw;
    margin-top: 6vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: scroll;
  }
  
  a.Alink-code:link, a.Alink-code:visited {
    color: #d6c09f;
    font-family: "Roboto Mono", serif;
    font-size: 1.5vh;
    font-weight: 500;
    text-decoration: none;
  }
  
  a.Alink-code:hover, a.Alink-code:active {
    font-family: "Roboto Mono", serif;
    font-size: 1.5vh;
    font-weight: 500;
    color: #d6c09f;
    transition: 1s ease-in-out;
    text-shadow: 2px 2px 5px #9e8461;
  }
  
  .code-body-grid-row1,.code-body-grid-row2, .code-body-grid-row3, .code-body-grid-row4 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  
  .code-grid-img1, .code-grid-img2, .code-grid-img3, .code-grid-img4, .code-grid-img5, .code-grid-img6, .code-grid-img7, .code-grid-img8, .code-grid-img9, .code-grid-img10, .code-grid-img11, .code-grid-img12 /* container {
    position: relative;
    margin-bottom: 2vh;
  }
  
  .code-grid-i1, .code-grid-i2, .code-grid-i3, .code-grid-i4, .code-grid-i5, .code-grid-i6, .code-grid-i7, .code-grid-i8, .code-grid-i9, .code-grid-i10, .code-grid-i11, .code-grid-i12 /* image {
    width: 60vw;
    opacity: 1;
    display: block;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
  }
  
  a.Alink-grid:link, a.Alink-grid:visited {
    width: 18.5vw;
  }
  
  a.Alink-grid:hover, a.Alink-grid:active {
    width: 18.5vw;
  }
  
  .code-grid-img-txt /* middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%)
  }
  
  .cgi-txt {
    font-family: "Roboto Mono", serif;
    font-size: 2.5vh;
    color: white;
  }
  
  .code-grid-img1:hover .code-grid-i1, 
  .code-grid-img2:hover .code-grid-i2, 
  .code-grid-img3:hover .code-grid-i3,
  .code-grid-img4:hover .code-grid-i4,
  .code-grid-img5:hover .code-grid-i5,
  .code-grid-img6:hover .code-grid-i6,
  .code-grid-img7:hover .code-grid-i7,
  .code-grid-img8:hover .code-grid-i8,
  .code-grid-img9:hover .code-grid-i9,
  .code-grid-img10:hover .code-grid-i10,
  .code-grid-img11:hover .code-grid-i11,
  .code-grid-img12:hover .code-grid-i12 {
    opacity: 0.3;
    width: 65vw;
    box-shadow: 5px 10px 10px black;
  }
  
  .code-grid-img1:hover .code-grid-img-txt,
  .code-grid-img2:hover .code-grid-img-txt, 
  .code-grid-img3:hover .code-grid-img-txt,
  .code-grid-img4:hover .code-grid-img-txt,
  .code-grid-img5:hover .code-grid-img-txt,
  .code-grid-img6:hover .code-grid-img-txt,
  .code-grid-img7:hover .code-grid-img-txt,
  .code-grid-img8:hover .code-grid-img-txt,
  .code-grid-img9:hover .code-grid-img-txt,
  .code-grid-img10:hover .code-grid-img-txt,
  .code-grid-img11:hover .code-grid-img-txt,
  .code-grid-img12:hover .code-grid-img-txt {
    opacity: 1;
  }
    */
  
  .experience {
    height: 137vh;
    background-color: white;
    padding-top: 3vh;
    margin-top: 6vh;
  }
  
  .exper-inner {
    margin: auto;
    height: 126vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .exper-inner-head {
    display: flex;
    flex-direction: column;
    margin: auto;
  }
  
  .exper-inner-head1 {
    width: 90vw;
    height: 45vh;
    margin-top: 0vh;
    margin: auto;
    border-bottom: 1px solid #757575;
    z-index: 2;
  }
  
  .exper-ih-txt {
    font-size: 2.5vh;
    color: black;
    font-family: "Courier Prime", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    margin-bottom: 3vh;
  }
  
  .exper-span {
    color: black;
    font-weight: 500;
    font-size: 5vh;
    font-family: "Boldonse", system-ui;
  }

  .exper-span-red {
    font-size: 2vh;
    color: #ff3131;
    font-family: "Courier Prime", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    font-style: normal;
    text-align: right;
    margin-bottom: 2vh;
  }
  
  .exper-ih-para {
    font-family: "Roboto Mono", serif;
    font-size: 1.5vh;
    color: black;
    font-weight: 400;
    line-height: 2.3vh;
    text-align: justify;
  }
  
  .exper-inner-head2 {
    width: 21vw;
    height: 12vh;
    align-content: center;
    margin: auto;
  }
  
  .exper-inner-img {
    top: 0;
    height: 7vh;
    position: relative;
    align-content: center;
    margin: auto;
  }
  
  .exper-inner-box {
    width: 94vw;
    height: 75vh;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin: auto;
  }
  
  .scale {
    margin-top: 0vh;
    height: 7vh;
    align-self: center;
    align-content: center;
    z-index: 3;
    width: 80vw;
}

   .slider {
      appearance: none;
      -webkit-appearance: none;
      width: 80vw;
      height: 1px;
      background: #004aad;
      outline: none;
      -webkit-transition: .2s;
      transition: opacity .2s;
    }
    
    .slider:hover {
      opacity: 0.5;
    }
    
    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: white;
      border: 1px solid #004aad;
      cursor: pointer;
    }
    
    .slider::-moz-range-thumb {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #004aad;
      cursor: pointer;
    }
  
  .exper-info {
    height: 39vh;
    width: 90vw;
    display: flex;
    margin: auto;
  }
  
  .exper-info-logobox {
    width: 10vw;
    height: 10vh;
  }
  
  .exper-info-logo {
    width: 8vw;
    height: 3.6vh;
  }
  
  .exper-info-txt {
    width: 77vw;
    height: 31vh;
  }
  
  .exper-ift-heading {
    font-family: "Roboto Mono", serif;
    font-size: 1.6vh;
    color: black;
    font-weight: 400;
  }
  
  .exper-ift-para {
    font-family: "Roboto Mono", serif;
    font-size: 1.3vh;
    color: #004aad;
    font-weight: 300;
  }
  
  .fa-brands {
    font-size: 2.2vh;
    color: black;
  }
  
  .exper-ift-para2 {
    font-family: "Roboto Mono", serif;
    font-size: 1.3vh;
    color: black;
    font-weight: 300;
    line-height: 2.2vh;
    text-align: justify;
    width: 73vw;
  }
  
  a.Alink-exper:link,
  a.Alink-exper:visited {
    font-family: "Roboto Mono", serif;
    text-decoration: none;
    color: #004aad;
    font-size: 1.3vh;
    font-weight: 400;
  }
  
  a.Alink-exper:hover,
  a.Alink-exper:active {
    color: #032b44;
    font-size: 1.4vh;
    font-weight: 400;
    transition: 0.5s ease-out;
  }
  
  .fa-arrow-up-right-from-square, .fa-2xs {
    color: black;
  }
  
  .exper-cert {
    margin: auto;
    width: 86vw;
    height: 46vh;
    display: flex;
    padding-left: 0vw;
  }
  
  .exper-cert-img {
    height: 18vh;
    align-self: center;
    transform: skewX(-10deg);
    box-shadow: 5px 2px 5px black;
    margin-left: 10vw;
  }
  
  .exper-cert-img:hover {
    height: 28vh;
    align-self: center;
    transform: skewX(0deg);
    box-shadow: 2px 2px 30px #ff3131;
    transition: 0.8s ease-in-out;
    margin-left: 0vw;
  }
  
  .featured-projects {
    height: 125vh;
    background-color: white;
  }
  
  .featured-inner {
    width: 94vw;
    height: 120vh;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .featured-head {
    margin: auto;
    height: 12vh;
    margin-top: 8vh;
  }
  
  .feat-heading {
    font-family: "Boldonse", system-ui;
    font-optical-sizing: auto;
    font-style: normal;
    color: black;
    font-size: 5vh;
    line-height: 7vh;
    font-weight: 300;
    text-align: center;
  }
  
  .feat-para {
    font-family: "Roboto Mono", serif;
    color: rgb(65, 65, 65);
    text-align: center;
    font-size: 1.6vh;
    width: 80vw;
    margin: auto;
  }
  
  .featured-body {
    display: flex;
    height: 70vh;
    width: 90vw;
    margin-top: 2vh;
    position: relative;
    margin: auto;
  }
  
  .mySlides {
    display: none;
  }
  
  .fade {
    animation-name: fade;
    animation-duration: 1.5s;
  }
  
  @keyframes fade {
    from {
      opacity: 0.4;
    }
    to {
      opacity: 1;
    }
  }
  
  .ftb1, .ftb2, .ftb3, .ftb4, .ftb5 {
    width: 90vw;
    height: 75vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 3vw;
    padding-top: 3vh;
    margin-left: 0vw;
    margin: auto;
    border-radius: 6vw;
    border: 2px solid black;
    background: linear-gradient(#004bad89, #004aad);
    position: relative;
    z-index: 0;
    box-shadow: 2px 2px 30px #002f6c;
  }
  
  .ftb1-deets {
    width: 83vw;
    height: 27vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 0vh;
  }
  
  .ftb1-preview {
    width: 90vw;
    height: 44vh;
    position: absolute;
    z-index: 1;
    left: 0vw;
    top: 31vh;
    display: flex;
    flex-direction: column;
    border-bottom-right-radius: 6vw;
    border-bottom-left-radius: 6vw;
  }

  .ftb1-preview:hover {
    width: 89.5vw;
    height: 50vh;
    position: absolute;
    z-index: 1;
    left: 0vw;
    top: 24.5vh;
    transition: 0.7s ease-in-out;
    background: linear-gradient(rgba(0, 0, 0, 0.129), rgba(0, 0, 0, 0.311), black);
    box-shadow: 2px 2px 15px #002f6c;
  }
  
  a.Alink-preview:link, a.Alink-preview:active {
    height: 16.8vh;
  }

  a.Alink-preview:hover, a.Alink-preview:visited {
    height: 16.8vh;
  }
  
  .preview-scnsht {
    height: 17.3vh;
    margin: auto;
    box-shadow: 2px 2px 2px #b6261343;
  }

  .preview-scnsht2 {
    height: 19.5vh;
    margin: auto;
    box-shadow: 2px 2px 2px #b6261343;
  }

  .ftb1-head {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 16vh;
    width: 50vw;
  }
  
  .ftb1-head-logo {
    width: 30vw;
    height: 8vh;
    padding-top: 1.5vh;
  }
  
  .ftb1-head-logo-img {
    height: 5vh;
  }

  .ftb2-head-logo-img {
    height: 5vh;
  }

  .ftb3-head-logo-img {
    height: 4vh;
  }

  .ftb4-head-logo-img {
    height: 6vh;
  }

  .ftb5-head-logo-img {
    height: 3vh;
  }
  
  .ftb1-head-deets {
    width: 45vw;
    display: flex;
    flex-direction: column;
    height: 5vh;
    justify-content: space-between;
    margin-left: 0vw;
  }

  .ftb2-head-deets {
    width: 35vw;
    display: flex;
    flex-direction: column;
    height: 6vh;
    justify-content: space-between;
    margin-left: 0vw;
  }
  
  .fhd-heading {
    font-family: "Roboto Mono", serif;
    color: black;
    font-size: 3vh;
    font-weight: 300;
    text-shadow: 2px 2px 10px black;
  }
  
  .fhd-tools {
   display: flex;
   width: 43vw;
   justify-content: space-between;
  }
  
  .fhd-tools-para-p1 {
    font-family: "Roboto Mono", serif;
    display: block;
    background-color: rgba(0, 0, 0, 0.148);
    color: rgb(255, 175, 27);
    font-weight: 200;
    border-radius: 2vh;
    font-size: 1.2vh;
    box-shadow: 2px 2px 8px #002f6c;
    padding: 3px 10px 2px 10px; /*top, right, bottom, left */
    cursor: pointer;
  }
  
  .fhd-tools-para-p2 {
    font-family: "Roboto Mono", serif;
    font-weight: 200;
    display: block;
    background-color: rgba(0, 0, 0, 0.148);
    color: #a3cbff;
    border-radius: 2vh;
    font-size: 1.2vh;
    box-shadow: 2px 2px 8px #002f6c;
    padding: 3px 10px 2px 10px;
    cursor: pointer;
  }
  
  .fhd-tools-para-p3 {
    font-family: "Roboto Mono", serif;
    font-weight: 200;
    display: block;
    background-color: rgba(0, 0, 0, 0.148);
    color: rgb(239, 223, 0);
    border-radius: 2vh;
    font-size: 1vh;
    box-shadow: 2px 2px 8px #002f6c;
    padding: 3px 10px 2px 10px;
    cursor: pointer;
  }
  
  .fhd-para-timeline {
    font-family: "Roboto Mono", serif;
    color: white;
    font-size: 1.3vh;
    padding-left: 0.5vw;
    font-weight: 100;
  }
  
  .ftb1-devices {
    display: flex;
    flex-direction: column;
    border: 0.1px solid rgba(255, 255, 255, 0.145);
    background-color: #002f6c09;
    width: 50vw;
    height: 10vh;
    border-radius: 3vw; 
    padding: 5px;
    margin-top: 0vh;
    margin: auto;
    box-shadow: 2px 2px 2px black;
    justify-content: space-between;
  }
  
  .ftb1-devices-desk {
    width: 40vw;
    display: flex;
    justify-content: space-between;
    margin: auto;
    cursor: pointer;
  }
  
  .ftb1-devices-mobile {
    width: 40vw;
    border-left: 0.5px solid #626262;
    display: flex;
    justify-content: space-between;
    margin: auto;
    cursor: pointer;
  } 
  
  .ftb1-devices-iPad {
    width: 40vw;
    border-left: 0.5px solid #626262;
    display: flex;
    justify-content: space-between;
    margin: auto;
    cursor: pointer;
  }
  
  .ftb1-devices-desk-para, .ftb1-devices-mobile-para, .ftb1-devices-iPad-para {
    font-family: "Roboto Mono", serif;
    font-size: 1.2vh;
    color: white;
    padding-left: 2vw;
    text-align: center;
    font-weight: 200;
  }
  
  .fa-solid {
    color: black;
    display: inline;
    margin-left: 5px;
    margin-top: 0px;
  }

  .previewpara {
    color: white;
    width: 30vw;
    margin: auto;
    display: inline;
  }

  .ftb-name {
    color: white;
    font-size: 2vh;
    font-weight: 100;
  }
  
  .ftb1-para {
    font-family: "Roboto Mono", serif;
    color: white;
    font-size: 1.3vh;
    text-align: left;
    display: block;
  }
  
  .ftb1-info {
    height: 8vh;
    width: 85vw;
    display: flex;
    margin: auto;
  }
  
  a.Alink-feat1:link, a.Alink-feat1:visited {
    color: white;
    border: 2px solid white;
    background: #004bad68;
    font-size: 1.3vh;
    text-decoration: none;
    width: 38vw;
    height: 5vh;
    text-align: center;
    align-content: center;
    margin: auto;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 1vw;
  }
  
  a.Alink-feat1:hover, a.Alink-feat1:active {
    color: white;
    border: 1px solid white;
    background: linear-gradient(#004badc6, #002f6ca9);
    font-size: 1.2vh;
    width: 38vw;
    height: 5vh;
    transition: 1s ease-in-out;
    transform: scale(1.1, 1.1);
    box-shadow: 2px 2px 4px black;
    border-radius: 0;
  }
  
  a.Alink-feat2:link, a.Alink-feat2:visited {
    color: white;
    border: 1.7px solid #ff3131;
    background-color: #b62713;
    font-size: 1.2vh;
    text-decoration: none;
    width: 38vw;
    height: 5vh;
    margin: auto;
    text-align: center;
    align-content: center;
    /* margin-left: 1.2vw; */
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 1vw;
  }
  
  a.Alink-feat2:hover, a.Alink-feat2:active {
    color: white;
    background: linear-gradient(#ff3131db, #4b1008);
    border: 1px solid #ff3131;
    font-size: 1.2vh;
    width: 38vw;
    height: 5vh;
    transition: 1s ease-in-out;
    transform: scale(1.1, 1.1);
    box-shadow: 2px 2px 4px black;
    border-radius: 0;
  }
  
  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    width: auto;
    padding: 15px;
    top: 2.6vh;
    color: white;
    font-weight: bold;
    font-size: 40px;
    transition: 0.6s ease;
    border-radius: 50%;
    user-select: none;
    z-index: 2;
  }
  
  .next {
    right: 0;
    border-radius: 50%;
  }
  
  .prev:hover,
  .next:hover {
    background-color: #6eadff67;
  }
  
  .dots {
    width: 30vw;
    height: 4vh;
    margin: auto;
  }
  
  .dot {
    cursor: pointer;
    height: 13px;
    width: 13px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  
  .active,
  .dot:hover {
    background-color: #004aad;
  }
  
  @media only screen and (max-width: 500px) {
    .prev,
    .next,
    .text {
      font-size: 15px;
    }
  }
  
  #who {
    width: 10vw;
    height: 5vh;
  }
  
  .option {
    font-size: 2vh;
    padding: 2vh;
    background-color: beige;
  }
  
  .connect {
    height: 100vh;
    width: 100%;
    background-color:white;
    z-index: -1;
  }
  
  .connect-inner {
    height: 100vh;
    background-color: black ;
    background-image: url("images/erobkg2.jpg");
    background-repeat: repeat;
    background-attachment: fixed;
    background-position-x: 100%;
    background-position-y: 10%;
    background-size: contain;
    background-origin: padding-box;
    object-fit: cover;
    object-position: 100% 100%;
    display: flex;
    flex-direction: column;
    border-top-left-radius: 10vw;
    border-top-right-radius: 10vw;
    z-index: 0;
  }
  
  /*
  .connect-overlay {
    height: 80vh;
    width: 99.8vw;
    z-index: 1;
    background: linear-gradient(rgba(0, 0, 0, 0.955), rgba(0, 0, 0, 0.279), rgba(0, 0, 0, 0.463), black);
    position: absolute;
    top: 0;
    left: 0;
    border-top-left-radius: 10vw;
    border-top-right-radius: 10vw;
  } */
  
  .connect-inner-cta {
    position: absolute;
    height: 40vh;
    width: 70vw;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    top: 30vh;
    z-index: 3;
  }
  
  .solid2 {
    color: white;
    font-size: 4vh;
    padding-left: 3vw;
  }
  
  .cic-heading {
    color: white;
    font-size: 3.6vh;
    text-align: center;
    font-weight: 500;
    line-height: 4vh;
    text-shadow: 2px 2px 6px black;
  }
  
  .cic-buttons {
    height: 10vh;
    width: 70vw;
    display: flex;
    justify-content: space-around;
    position: relative;
  }
  
  a.cic-email:link, a.cic-email:visited {
    font-family: "Roboto Mono", sans-serif;
    height: 4vh;
    width: 28vw;
    text-decoration: none;
    display: flex;
    align-items: center;
    text-align: center;
    background-color: white;
    border-bottom: 2px solid #004aad;
    cursor: pointer;
    color: black;
    font-weight: 400;
    font-size: 1.8vh;
    justify-content: center;
    border-radius: 1vw;
  }
  
  a.cic-email:hover, a.cic-email:active {
    background-color: #004bad76;
    color: white;
    border: 2px solid #004aad;
    height: 5vh;
    width: 30vw;
    text-decoration: none;
    transition: 0.5s ease-in-out;
  }
  
  a.cic-WA:link, a.cic-WA:visited {
    background-color: black;
    border-bottom: 1px solid greenyellow;
    height: 4vh;
    width: 28vw;
    text-decoration: none;
    display: flex;
    align-items: center;
    text-align: center;
    cursor: pointer;
    color: white;
    font-weight: 400;
    font-size: 1.8vh;
    justify-content: center;
    border-radius: 1vw;
  }
  
  a.cic-WA:hover, a.cic-WA:active {
    height: 5vh;
    width: 30vw;
    background-color: rgba(0, 48, 0, 0.292);
    border: 2px solid greenyellow;
    transition: 0.5s ease-in-out;
  }
  
  .connect-inner-socials {
    width: 90vw;
    height: 10vh;
    margin: auto;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    top: 85vh;
    position: absolute;
  }
  
  .cis1 {
  
  }
  
  .cis1-para {
    color: white;
    font-size: 1.5vh;
    font-weight: 200;
  }
  
  .cis2 {
  
  }
  
  a.Alink-socials:link, a.Alink-socials:visited {
    font-size: 2vh;
    color: white;
    text-decoration: none;
    cursor: pointer;
  }
  
  a.Alink-socials:hover, a.Alink-socials:active {
    color: #004aad;
    font-size: 2.5vh;
    transition: 0.5s ease-in-out;
  }
}