*{
          margin:0rem;
          padding:0rem;
          user-select:none;
          box-sizing:border-box;
      }
      
      img{width:100%;height:100%;margin:0rem;display: block;}
      a{text-decoration:none}
      
      body{background:rgb(24, 24 ,24);margin:0rem;}

      
      section.intro-header{
        width:100%;
        height:55px;
        background:#000;
        position: relative;
        top:0%;
        z-index:1000000;
        display:flex;
        justify-content: space-between;
      }

      div#nn-logo{
        height:100%;
        background:none;
        padding:0.2rem;
      }

       div#nn-site-name{
        height:100%;
        background:none;
        padding:0.4rem;
      }

      header.nn-header{
        position: relative;
        height: auto ;
        margin-top:none;
      }

     
      div.hero-bg{
        margin-top:none;
        position: absolute;
      
    
      }

      section.header-nagivation-mother{
        width:100%;
        height:10%;
        position: absolute;
        top:0%;
        background:none;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      section.header-nagivation{
        height:100%;
        background:none;
        display:flex;
        color:white;
      }

      div#header-nagivation-link{
        height:100%;
        padding:1rem;
        margin-right:5rem;
      }

      div.active-link{
        background:dodgerblue;
        border-bottom-left-radius:20px ;
        border-bottom-right-radius:20px ;
      }
      

      a.header-nagivation-link{
        text-decoration: none;
      }

      p#header-nagivation-link-name{
        color:white;
        font-weight: bold;
      }

      


      section.nemx-logo{
        width:100%;
        height:26%;
        background:none;
        position: absolute;
        top:9%;
        padding-top:1rem;
        display: flex;
        
        justify-content: center;
      }


      @font-face{
         font-family: 'SigmarOneLocal';
         src: url('SigmarOne.ttf')
         format('truetype');

      }

      p#nemx-logo{
        -webkit-text-stroke: 6px black;
        color:white;
        font-family: 'SigmarOneLocal';
        font-size: clamp(4em, 10.8vw, 10.8rem);
      }



 

    section.header-content-section{
      width:100%;
      height:54%;
      background:none;
      display: flex;
      padding:0 4rem 0 4rem;
      position: absolute;
      bottom:0%;
      justify-content: space-between;
    }


    section.left-side-content, section.right-side-content{
      width:40%;
      height:100%;
      background:none;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }   

    div#cover-container{
      width:40%;
      height:60%;
      background:none;
      border-radius:1rem;
    }

    img.cover-container{border-radius:1rem;}


    main.about-main{
      width:100%;
      position: relative;
    }

  

    section.about-section-title{
      display:flex;
      align-items: center;
      justify-content: center;
      gap:20px;
      margin:50px 0;
      position: absolute;
      top:15%;
      width:100%;
    }

    section.about-section-title::before, 
    section.about-section-title::after{
      content:'';
      flex:1;
      height:2px;
      background:white;
    }

     section.about-section-title span.about-title{
      color:white;
      font-size:3rem;
      font-weight: bold;
      text-transform: uppercase;
     }

     section.about-section-container{
      width:100%;
      height:65%;
      background:none;
      position: absolute;
      bottom:0%;
      display:flex;
     }

     section.about-section-left-content,
     section.about-section-right-content{
      height:100%;
      background:none;
      position: relative;
      padding:1rem;
     }

      section.about-section-left-content{
        width:40%;
        padding:1rem;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        padding-bottom:3rem;
      }

      p#about-us{
        color:white;
        font-size:1.2rem;
        font-family: Arial, Helvetica, sans-serif;
        line-height: 1.3;
      }

     section.about-section-right-content{
      width:60%;
      background:none;
      display: grid;
      place-items: center;
     }

     .timeline{
      height:100%;
      width:4px;
      background:white;
      position: relative;
     }


     
/* Timeline Dots */
.timeline-dot{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:24px;
    height:24px;
    background:#fff;
    border-radius:50%;
}

/* Dot Positions */
.timeline-dot:nth-child(1){
    top:0;
}

.timeline-dot:nth-child(2){
    top:50%;
    transform:translate(-50%, -50%);
}

.timeline-dot:nth-child(3){
    bottom:0;
}


div#timeline-dots-images-1{
  width:25%;
  height: 30%;
  background: grey;
  position: absolute;
  top:2%;
  left:0%;
}

div#timeline-dots-images-2{
  width:25%;
  height: 25%;
  background:red;
  position: absolute;
  top:25%;
  left:20%;
}


div#timeline-dots-images-3{
  width:30%;
  height: 30%;
  background:red;
  position: absolute;
  bottom:2%;
  left:15%;
}



div#timeline-dots-images-4{
  width:30%;
  height: 30%;
  background:red;
  position: absolute;
  top:10%;
  right:10%;
}


div#timeline-dots-images-5{
  width:30%;
  height: 30%;
  background:red;
  position: absolute;
  bottom:19%;
  right:5%;
}


div#timeline-dots-images-6{
  width:25%;
  height: 25%;
  background:blue;
  position: absolute;
  bottom:3%;
  right:20%;
}


div#timeline-name-container-1{
  position: absolute;
  top:1rem;
  left:27%;
  background:none;
}

p#timeline-name{
  font-size:1.1rem;
  font-weight: bold;
  color:white;
  font-family: Arial, Helvetica, sans-serif;
}


div#timeline-name-container-2{
  position: absolute;
  top:47%;
  right:30%;
  background:none;
}


div#timeline-name-container-3{
  position: absolute;
  bottom:2%;
  left:30%;
  background:none;
}

img.timeline-images{object-fit: cover;}


div.cover-container-tablets{
  display:block;
}

  p#about-us-bottom{display:block}
  
  img#footer-image-tablet{display:none}
  img#footer-image-pc{display:block}
  section.exiting-about-page{display:none}

@media (max-width: 768px) {
    p#nemx-logo{
        -webkit-text-stroke: 3px black;
        color:white;
        font-family: 'SigmarOneLocal';
        font-size: clamp(4em, 10.8vw, 10.8rem);
      }

      
      section.nemx-logo{
        width:100%;
        height:26%;
        background:none;
        position: absolute;
        top:7%;
        padding-top:1rem;
        display: flex;
        
        justify-content: center;
      }

    img#footer-image-tablet{display:block}
    img#footer-image-pc{display:none}


    div#cover-container{
      width:60%;
      height:80%;
      background:none;
      border-radius:1rem;
    }

    div.cover-container-tablets{display:none}


     section.header-content-section{
      width:100%;
      height:54%;
      background:none;
      display: flex;
      padding:0 2rem 0 2rem;
      position: absolute;
      bottom:0%;
      justify-content: space-between;
    }

   
    section.left-side-content, section.right-side-content{
      width:40%;
      height:100%;
      background:none;
      display: flex;
      align-items: center;
    
    }   

    section.left-side-content{justify-content: flex-start;}

    
    section.right-side-content{justify-content: flex-end;}

    div#cover-container{
      width:55%;
      height:80%;
      background:none;
      border-radius:1rem;
    }

    section.header-nagivation-mother{display:none}

      section.about-section-title span.about-title{
      color:white;
      font-size:2rem;
      font-weight: bold;
      text-transform: uppercase;
     }

 section.about-section-title{
      display:flex;
      align-items: center;
      justify-content: center;
      gap:20px;
      margin:50px 0;
      position: absolute;
      top:5%;
      width:100%;
    }

    
     section.about-section-container{
      width:100%;
      height:65%;
      background:none;
      position: absolute;
      bottom:5%;
      display:flex;
     }

       p#about-us{
        color:white;
        font-size:0.8rem;
        font-family: Arial, Helvetica, sans-serif;
        line-height: 1.3;
      }

      p#about-us-bottom{display:none}

      p#timeline-name{
        display:none
      }

      div.timeline{display:none}

      
div#timeline-dots-images-2{
  width:25%;
  height: 25%;
  background:none;
  position: absolute;
  top:25%;
  left:35%;
}


div#timeline-dots-images-3{
  width:30%;
  height: 30%;
  background:none;
  position: absolute;
  bottom:2%;
  left:20%;
}


div#timeline-dots-images-1{
  width:25%;
  height: 30%;
  background:none;
  position: absolute;
  top:2%;
  left:10%;
}

section.exiting-about-page{
  display: block;
  width:100%;
  height:14%;
  position: absolute;
  top:0%;
  background: none;
  padding:0.4rem;
}

div#exiting-about-page{
  width:7%;
  height:100%;
  background: none; 
  padding:0.2rem;
}



}