*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    user-select:none;
    scrollbar-width: none;
}


      img{width:100%;height:100%;margin:0rem;display: block;}
      a{text-decoration:none}
      
     
body{
    background:#040B18;
    overflow-x:hidden;
    margin:0rem;
}

a{text-decoration:none;}

/* ---------- NAV ---------- */
section.header-landing{
    position:fixed;
    top:0;
    z-index:100;
    width:100%;
    height:3rem;
    display:grid;
    background:whitesmoke;
    grid-template-columns:1fr 2fr 1fr;
    padding:0 1rem;
}

#nemx-logo img{
    width:6rem;
    height:3rem;
}

#navigation-links{
    background:none;
    display:flex;
    gap:4rem;
    justify-content:center;
    align-items:center;
}

#navigation-links a{
    color:black;
    font-weight:bold;
    font-size:18px;
    white-space: nowrap;
    font-family:Arial, sans-serif;
    transition: 0.3s;
}

#navigation-links a:hover{
    color:#ff5a1f;
    /*-webkit-text-stroke:0.3px #ff5a1f;*/
}

/* ---------- HEADER IMAGE ---------- */
header{
    position:relative;
}

.portfolio_start{
    width:100%;
    display:block;
}




/* SKILLS WRAPPER */


  div.skills-wrapper { 
      width: 100%;
      overflow: hidden; 
      white-space: nowrap;
      padding: 10px 0;
      background: rgba(40, 40, 40);  
      font-family: Georgia, serif;
      position:absolute;
      bottom:-30%;
    
 }

div.skills-track {
    display: inline-block;
    padding-left: 100%;
    animation: scrollSkills 15s linear infinite; 
    }

div.skills-track span { 
    display: inline-block; 
    color: white;
    font-size: 14px; 
    margin: 0 18px;
    }

.diamonds { 
    color: white;
    font-size: 12px;
    }

@keyframes scrollSkills {
    from 
    { transform: translateX(0); }
    to 
    { transform: translateX(-100%);
    } 
}

@media (max-width: 480px) {
.skills-track span { 
font-size: 12px;
margin: 0 12px;
     } 
}

  
      section.second-section{
          width:100%;
          height:50rem;
          display:flex;
          margin-top:9rem;
      }
      
      div#second-section-title{
        width:60%;
        height:10rem;
        padding-left:0.5rem;
      }
      section.left-side-section{
          width:60%;
          height:100%;
          background:none;
      }
      
      section.right-side-section{
          width:40%;
          height:100%;
          background:none;
      }
      
      p#second-section-intro-paragraph{
          color:white;
          font-size:1.4rem;
      }
      
      div#second-section-intro-paragraph{
        padding:1rem;
        margin-bottom:2rem;
        
      }

      section.who-am-i-parts{
          width:100%;
          height:18.5rem;
          display:flex;
          margin-top:1rem;
      }
      
      section.who-am-i-section{
          width:33.33%;
          height:100%;
          background:none;
          padding:1rem;
      }
      
       
       .features{
          display:flex;
          flex-direction:column;
          gap:18px;
          padding:1rem;
    }
       .row{
           display:flex;
           gap:18px;
           font-family:Arial, Helvetica, sans-serif
           }


      .pill{
    padding:10px 20px;
    border-radius:30px;
    border:2px solid #aaa;
    color:white;
    font-size:14px;
    letter-spacing:1px;
    white-space:nowrap;
}


.filled{
    background:white;
    color:black;
    border:none;
}


div#subtitle{
    width:60%;
    height:3.5rem;
    background:none;
}

div#who-am-i-paragraph{
     width:100%;
     height:14rem;
     padding-top:1rem;
     background:none;
     color:white;
     word-spacing:2px;
}



section.contact-section{
  width:100%;
  height:45rem;
  position: relative;
  background: none;
}

img.background-image-section-3{
    position: absolute;
    top:0%;
    z-index:-1;
}

section.contact-section-2{
   width:100%;
   height:100%;
   background-color:none;
   padding:0 1rem 0 1rem;


}

section#section3-title{
   width:60%;
   height:9rem;
   background:none;
   padding-top:1rem;
}

div#little-logon{
   
   color:white;
   font-weight: bold;
   font-size:1.2rem;
   margin-bottom:3rem;
}

section.personal-details-section{
   width:100%;
   display:flex;
   justify-content: center;
   padding-top:3rem;
}
/* White card */
div.contact-card{
  width:77%;
  height:450px;
  background:white;
  border-radius:25px;
  position:relative; /* IMPORTANT */
  display:flex;
  padding:1.5rem;
}

section.my-image{
  width:33%;
  height:100%;
  background:none;
  margin-left:1rem;
}
/* Social container */
div.socials{
  position:absolute;
  left:-35px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* Buttons */
div#social{
  width:55px;
  height:55px;
  border-radius:50%;
  background:orangered;
  border:0.1rem solid white;
}                

img#social{
    border-radius:50%;
}

img#my-image{
  border-radius:1rem;
}

section#personal-details-side{
  width:67%;
  height:100%;
  background:none;
  padding-left:2rem;
}

div#personal-details-container{
  width:100%;
  height:80%;
  background:none;
}

p#userdetails-title{
  font-size:0.9rem;
  color:grey;
  font-weight: bold;
  margin-bottom:0;
  font-family:Arial, Helvetica, sans-serif
}

p#user-info{
  font-size:1.6rem;
  margin-bottom:1rem;
  font-family:Arial, Helvetica, sans-serif
}

div#cv-downloader{
  width:100%;
  height:20%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

div#download-cv-title{
  width:10rem;
  height:70%;
  background:orangered;
  border-radius: 1rem;
  font-weight:bold;
  font-family:Arial, Helvetica, sans-serif;
 text-align: center;
 padding-top:0.5rem;
 
}


button#download-cv{
  width:4rem;
  height:70%;
  background:orangered;
  border:none;
  border-radius:1rem;
  margin-left:1rem;
  padding:0.8rem 0.9rem 0.8rem 0.9rem;
}


div#logo-side-container{
    position: absolute;
    top:1rem;
    right:1rem;
    background:none;
    width:4rem;
    height:4rem;
}


      section.cybersection-section{
        width:100%;
        height:52rem;
        background:none;
        position: relative;
        padding:1rem;
        margin-top:4rem;
      }

      img.cyber-background{
        position:absolute;
        top:0;
        z-index:-1;
      }
      section.cyber-upper-section{
        width:100%;
        height:20%;
        background-color:none;
        display: flex;
      }

      section.cyber-lower-section{
        width:50%;
        height:80%;
        background:none;
        position: relative;
      }

      div#cyber-title{
        width:60%;
        height:100%;
        background:none;
        padding:none;
      }

        div#cyber-navigation{
        width:40%;
        height:30%;
        background:none;
        position:relative;
      }

      div#cyber-intro-paragraph{
        width:100%;
        background:none;
        margin:1rem 0 5rem 0;
        color:white;
        font-weight:bold;
        font-family:Arial, Helvetica, sans-serif;
        word-spacing:2px;
      }

      div#cyber-intro-pic{
        position: absolute;
        right:0%;
        background:none;
        top:13rem;
        z-index:10;
        width:20rem;
        height :8rem;
        border-radius:1rem;
        border:0.1rem solid white;
      }

      section.cyber-table-container{
        width:100%;
        position: absolute;
        bottom:0%;
        background:none;
      }

      div#cyber-table-title{
        font-weight: bold;
        font-size:2rem;
        color:white;
        margin-bottom:1rem;
      }

      div#cyber-table-info{
        width:70%;
        height:20rem;
        padding:1rem;
        background:white;
        border-radius:1rem;
        display:flex;
        flex-flow:column;
        justify-content: center;
      }

      a.cyber-table-shortcuts{text-decoration: none;color:black}
      
      section.cyber-image-section{
        width:35rem;
        height:35rem;
        background:none;        
        position: absolute;
        bottom:0%;
        right:0%;
        opacity:0.8;
  
      }

      

.table-section{
    display:flex;
    align-items:center;
    margin-bottom:1.8rem;
}

      
.table-circle{
    width:2rem;
    height:2rem;
    background:black;
    border-radius:50%;
    color:white;
    font-size:1rem;
    font-weight:bold;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:40px;
}

.table-title{
    font-size:1.2em;
    font-weight:700;
    color:black;
    text-decoration: 0.1rem underline black;
}

       img.intro-pic{
        border-radius:1rem;
       }

       

      section.tools-section{
           width:100%;
           height:40rem;
           background:none;
           padding:1rem;
           
      }

      div#subtitle-img{
        width:50%;
        height:6rem;
      }

      div#section-title-bio{
         width:100%;
          color:white;
        font-weight:bold;
        font-family:Arial, Helvetica, sans-serif;
        word-spacing:2px;
        margin-top:1rem;
      }
  
      section.os-list{
        width:100%;
        height:23rem;
        background:none;
        margin-top:5rem;
        display: flex;
        overflow-x: auto;
      }

      div.object-container{
        min-width:18rem;
        height:100%;
        border-radius:1rem;
        background:white;
        padding:1rem;
        margin-right:6rem;
      }

      section#header-container{
        width:100%;
        height:15%;
        background:none;
        display:flex;
      }

      div#number-of-object{
        width:20%;
        height:100%;
        border-radius:50%;
        background:black;
        margin-right:1rem;
        color:white;
        font-size: 1.2rem;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      div#name-of-object{
        width:80%;
        height:100%;
        font-size:1.3rem;
        font-weight: bold;
        display: flex;
        align-items: center;
      }

      section.object-used-for{
        width:100%;
        height:25%;
        background:none;
        padding-top:1rem;
      }

      section.object-image{
        width:100%;
        height:60%;
        border-radius:1rem;
      }

      img.object-image{border-radius:1rem}

      section.security-env-title{
        width:100%;
        height:15rem;
        background:none;
        display: flex;
        padding:0 1rem 0 1rem;
        margin:7rem 0 2rem 0;
      }

      div.security-env-title{
        width:50%;
        height:100%;
        background:none;
        padding-bottom:6rem;
      }

      div.security-env-paragraph{
        width:50%;
        height:100%;
        background:none;
        font-weight:bold;
        font-size:1.1rem;
        color:white;
        font-family:Arial, Helvetica, sans-serif;
        word-spacing:2px;
        display:flex;
        align-items:none;
        padding:1rem 0 0 2rem
      }

      
/* Scroll container */
.scroll-container {
    display: flex;
    gap: 20px;
    padding: 30px;
    overflow-x: auto;
}

/* Hide scrollbar */
.scroll-container::-webkit-scrollbar {
    display: none;
}

/* Card */
.card {
    min-width: 350px;
    background: #f1f1f1;
    border-radius: 30px; /* 🔥 smooth curves */
    overflow: hidden;
    flex-shrink: 0;
    margin-right:3rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

/* Image section */
.card-image {
    width:100%;
    position: relative;
    height: 180px;
}
/* 01 badge */
.badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: white;
    color: black;
    font-weight: bold;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Content */
.card-content {
    padding: 18px;
}

.small-title {
    color: #555;
    font-size: 14px;
}

.main-title {
    font-size: 20px;
    font-weight: bold;
    margin: 5px 0;
}

.desc {
    font-size: 14px;
    color: #333;
}

/* Footer */
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

/* Grey placeholders */
.box {
    width: 80px;
    height: 30px;
    background: lightgrey;
    border-radius: 10px;
    display:flex;
    justify-content: center;
    align-items:center;
}

/* Button */
.btn {
    background: #ff4d00;
    color: white;
    padding: 10px 18px;
    border-radius: 15px;
    text-decoration: none;
    font-weight: bold;
}

img.card-image{
    position:absolute;
    top:0%;
    z-index:0;
}

section.cybersection-projects-section{
    width:100%;
  background-color:none;
    padding:1rem;
    margin-top:2rem;
}

div#cybersection-projects-title{
    width: 50%;
    height:9rem;
    background:none;
}

div#cybersection-projects-introducting{
        font-size:1.1rem;
        font-weight:bold;
        font-family:Arial, Helvetica, sans-serif;
        word-spacing:2px;
        width:70%;
        color:white;
        margin:2rem 0 4rem 0;
}

  section.websecurity-section{
        width:100%;
        height:47rem;
        border-radius: 2rem;
        background:white;
        padding:2rem;
      }

      section.webpara-header{
        width:100%;
        height:4rem;
        background:orangered;
        padding:0.3rem;
        border-radius:2rem;
        display: flex;
      }
      
      section#webpara-number{
        width:33.33%;
        height:100%;
        background:none;
        display: flex;
      }

     div.webpara-number-container{
        width:15%;
        height:100%;
        background:none;
     }
  
     div.webpara-title{
        width:85%;
        height:100%;
        background:none;
        display: flex;
        padding-left:1rem;
        align-items: center;
        font-size:1.2rem;
        font-weight: bold;
        color:white;
     }

     div#webpara-number-container{
        width:100%;
        height:100%;
        border-radius: 50%;
        background:black;
        color:white;
        font-size:1.2rem;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
     }

     section.webpara-containers-info{
        width:100%;
        height:15rem;
        background:none;
        display: flex;
     }


     div.webpara-info{
        width:33.3%;
        height:100%;
        background:none;
        padding-top:1rem;
        word-spacing: 2px;
        font-weight: bold;
        margin-top:1rem;
     }

     div.webpara-info:nth-child(1), div.webpara-info:nth-child(2){
          border-right:0.2rem solid black;
     }

     div.webpara-info:nth-child(2), div.webpara-info:nth-child(3){
          padding-left:1rem;
     }
     
     section.websecurity-section-title{
        width:50%;
        height:9rem;
        margin-top:5rem;
     }

     div.websecurity-section-intro{
        margin:2rem 0 4rem 0;
        font-size:1.1rem;
        font-weight:bold;
        font-family:Arial, Helvetica, sans-serif;
        word-spacing:2px;
        width:70%;
        color:white;
     }

     section.websecurity-section-holder{
        padding:1rem;
     }


      section.write-ups-section{
        width:100%;
        height: 23rem;
        background: none;
        display: flex;
        overflow-x: scroll;
        margin:5rem 0 12rem 0;
        padding:1rem;
      }

      section.writeup-intro{
        min-width:20rem;
        height:100%;
        background:none;
      }

      div#writeup-intro{
        width:100%;
        height:55%;
        background:orangered;
        padding:0.5rem;
        border-radius:1rem;
        margin-bottom: 1rem;
      }

      section.writeup-picture{
        width:100%;
        height:40%;
        background:none;
      }

      img.writeup-picture{
        border-radius: 1rem;
      }

      div#writeup-header{
        width:100%;
        height:25%;
        background:none;
        display:flex;
        color:white;
      }

      div#writeup-body{
        width:100%;
        height:75%;
        background:none;
        padding-top:1rem;
        font-weight:bold;
        color:white;
        font-family:Arial, Helvetica, sans-serif;
      }

      div#writeup-section-icon-container{
        width:14%;
        height: 90%;
        background:none;
      }

      div.writeup-section-icon{
        width:100%;
        height:100%;
        border-radius: 50%;
        background:white;
        padding:0.4rem;
        border:0.1rem solid black;
      }

      


      div#write-ups-section-title-intro{
        width:83%;
        height: 100%;
        background:none;
        display:flex;
        align-items:center;
        padding-left: 1rem;
        font-size:1.1rem;
        font-weight:bold;
        font-family:Arial, Helvetica, sans-serif;
    
      }

      section.report-container{
        min-width:20rem;
        height: 100%;
        background: white;
        border-radius: 1rem;
        margin-left:3rem;
        padding:0.5rem;
      }

      div#report-container-number{
        width:50%;
        height:13%;
        background-color:none;
      }

      div#report-number{
        width:30%;
        height:100%;
        background:black;
        color:white;
        border-radius:50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size:1.1rem;
      }


      section.report-title{
        width:100%;
        height:27%;
        background:none;
        padding-top:1rem;
        font-size:1.4rem;
        font-weight:bold;
        font-family:Arial, Helvetica, sans-serif;
        display:flex;
        align-items: flex-end;
        border-bottom: 0.1rem solid grey;
      }

      section.report-summary{
        width:100%;
        height:45%;
        background:none;
        padding-top:1rem;
        font-weight:bold;
        font-family:Arial, Helvetica, sans-serif;
        word-spacing:2px;
      }

      div#report-view{
        width:100%;
        height:15%;
        background:none;
        display: flex;
        
        justify-content: flex-end;
      }

      div#report-view-button{
        width:8rem;
        height:100%;
        border-radius:2rem;
        background:orangered;
        display:flex;
        justify-content: center;
        align-items: center;
        color:white;
        font-size:1.1rem;
        font-family:Arial, Helvetica, sans-serif;
        font-weight:bold;
      }

      section#write-ups-container-title{
        width:100%;
        height:6rem;
        display:flex;
        justify-content:center;
        align-items: center;
        margin-top:9rem;
      }

      section.write-ups-container-title{
        width:50%;
        height:100%;
      }


      footer.footer-section{
         width:100%;
         height:75rem;
         position: relative;
      }


      section.footer-info{
        position: absolute;
        top:0%;
        left:0%;
        width:100%;
        height:100%;
      }


      header.footer-header{
        width:69%;
        height:6%;
        background:none;
        display:flex;
        align-items: center;
        padding-left:2rem;
        font-weight: bold;
        font-size:1.3em;
      }

      section#saving-space{
        width:100%;
        height:42.3%;
      }

      section.footer-bottom{
        width:100%;
        height:51.7%;
        background:none;
        display:flex;
      }

      section.footer-bottom-left{
        width:69%;
        height: 100%;
        background:none;
      }

      section.footer-bottom-right{
        width:31%;
        height: 100%;
        background:none;
      }

      section#links-and-media{
        width:100%;
        height:27.7%;
        display:flex;
        justify-content: space-between;
        background:none;
      }

      section#quick-links{
        width:40%;
        height:100%;
        padding:1rem;
        display:flex;
      }

      div#quick-links,div#others{
        width:50%;
        height:100%;
      }

      p#links-title{
        font-weight: bold;
        font-size:1.1rem;
        margin-bottom:1rem;
      }

      p.links{
        padding-bottom: 0.5rem;
        text-decoration: none;
        color:rgb(0, 0, 0)
      }

      section.social-media-links{
        width:21.5%;
        height:100%;
        background: none;

      }

      div.upper-socials,div.lower-socials{
        width:100%;
        height: 50%;
        display:flex;
      }

      div#social-box{
        width:50%;
        height:100%;
        background:none;
      }

      section.nemx-logo{
        width:100%;
        height:62.5%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
      }

      div#nemx-detials{
        width:70%;
        height:45%;
        background:none;
        padding:0 1rem 0 1rem;
        display:flex;
        flex-flow:column;
       font-size: 1.5rem;
      }

      section.footer-copyright{
        width:100%;
        height:9.8%;
        background:none;
        display:flex;
        justify-content: center;
        align-items: center;
        word-spacing: 3px;
        font-weight:bold;
      }

      div#back-to-top-content{
        width:100%;
        height: 15%;
        background:none;
        display:flex;
        justify-content: flex-end;
      }

      div#back-to-top{
        width:40%;
        height:100%;
        background:none;
        display:flex;
        justify-content: flex-end;
        padding-right:1rem;
        align-items: center;
      }

      section.header-of-headers{
        width:100%;
        height:5rem;
        background:none;
        display:flex;
      }

      div.headers-name-side{
        width:69%;
        height: 100%;
        display:flex;
        background:none;
      }

      div.contact-us-side{
        width:31%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items:center ;
        background: #E5E5E5;
      }

      div#header-name{
        width:40%;
        height:100%;
        display: flex;
        justify-content: center;
        align-items:center ;
        background:#010B18;
        word-spacing: 4px;
        font-weight: bold;
        color:white;
      }

      div#header-pic{
        width:60%;
        padding:0 5rem 0 5rem;
        height:100%;
        background:#010B18;
         display: flex;
          align-items: center;
      }


p#hook{
    font-weight: bold;color:#ff7a00;
}

section.pc-site{
    display: block;
}


section.mobile-site{
    display: none;
}

@media (max-width: 768px) {


section.pc-site{
    display: none;
}


section.mobile-site{
    display: block;
}

    
      *{
          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:#040B18;margin:0rem;}
        
      header.hero-section{
          width:100%;
          
          position:relative;
      }
      
      img.hero-image{
          
          top:0;
          
      }
      
      
      /* ---------- NAV ---------- */
section.header-landing{
    position:fixed;
    top:0;
    z-index:100;
    width:100%;
    height:3rem;
    display:grid;
    background:whitesmoke;
    grid-template-columns:1fr 2fr 1fr;
    padding:0 1rem;
}

#nemx-logo img{
    width:3rem;
    height:3rem;
    margin-right:1rem;
    padding:0.4rem;
}

#navigation-links{
    background:none;
    display:flex;
    gap:2rem;
    justify-content:center;
    align-items:center;
}

#navigation-links a{
    color:black;
    font-weight:bold;
    font-size:1rem;
    white-space: nowrap;
    font-family:Arial, sans-serif;
    transition: 0.3s;
}

#navigation-links a:hover{
    color:#ff5a1f;
    /*-webkit-text-stroke:0.3px #ff5a1f;*/
}


  div.skills-wrapper { 
      width: 100%;
      overflow: hidden; 
      white-space: nowrap;
      padding: 10px 0;
      background: rgba(40, 40, 40, 0.85);  
      font-family: Georgia, serif;
      position:absolute;
      bottom:5%;
 }

div.skills-track {
    display: inline-block;
    padding-left: 100%;
    animation: scrollSkills 15s linear infinite; 
    }

div.skills-track span { 
    display: inline-block; 
    color: white;
    font-size: 14px; 
    margin: 0 18px;
    }

.diamonds { 
    color: white;
    font-size: 12px;
    }

@keyframes scrollSkills {
    from 
    { transform: translateX(0); }
    to 
    { transform: translateX(-100%);
    } 
}

@media (max-width: 480px) {
.skills-track span { 
font-size: 12px;
margin: 0 12px;
     } 
}

    section.second-section-introduction{
        width:100%;
        background:none;
        padding:none;
    }
    
    div#second-section-title{
        width:90%;
        
    }

    div#second-section-information{
        width:90%;
        color:white;
        margin:1rem 0 0 1rem;
    }
    
    /*  PILLS OF ABILITIES */
           .features{
          display:flex;
          flex-direction:column;
          gap:7px;
          margin-top:2rem;
    }
       .row{
           display:flex;
           gap:7px;
           font-family:Arial, Helvetica, sans-serif
           }


      .pill{
    padding:6px 6px;
    border-radius:30px;
    border:2px solid #aaa;
    color:white;
    font-size:14px;
    letter-spacing:1px;
    white-space:nowrap;
}


.filled{
    background:white;
    color:black;
    border:none;
    display:flex;
    align-items:center;
}

/* WHAT WHO AND HOW ABOUT ME */


         section.what-who-how-section{
             width:100%;
             height:18rem;
             background:none;
             display:flex;
             align-items:center;
             margin-top:4rem;
             padding-left: 1rem;
             overflow:auto;
         }
         
         section.question-container{
             min-width:20rem;
             height:100%;
             background:none;
             display:flex;
             flex-flow:column;
             justify-content:space-between;
         }
         
         div#question-box{
             width:35%;
             height:17%
            
            
            
         }
         
         div#answer-box{
             width:70%;
             height:75%;
             padding-top:0.5rem;
             border: 1px solid rgba(255,140,0,0.7);
             box-shadow: 0 0 15px rgba(255,140,0,0.08);
             border-radius:1rem;
             padding:0.7rem;
             display:grid;
             color:white;
             place-items:center;
             position:relative;
         }
         

/* CARD LIST */
.card-list {
  display: flex;
  gap: 20px;
  padding: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

/* CARD */
.card {
  position: relative;
  min-width: 300px;
  height: 380px;
  border-radius: 25px;
  overflow: hidden;
  scroll-snap-align: center;
}

/* IMAGE */
.card img.main-img {
  object-fit: cover;
}

/* LOGO */
.logo {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 45px;
  height: 45px;
}

/* BLUR CONTENT */
.card-content {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 15px;
  color: white;
  backdrop-filter: blur(12px);
  background: rgba(0,0,0,0.3);
  
}

/* TEXT */
.title {
  font-size: 18px;
  font-weight: bold;
}

.location {
  font-size: 0.8rem;
  opacity: 0.85;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 5px 0 12px;
}

.location img {
  width: 12px;
  height: 12px;
}

/* BOTTOM ROW */
.bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  background: rgba(255,255,255,0.2);
  padding: 8px 14px;
  border-radius: 20px;
}

.btn {
  background: white;
  color: black;
  padding: 10px 28px;
  border-radius: 25px;
  border: none;
  cursor: pointer;
}

/* DOTS */
.dots {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  gap: 8px;
}

.dot {
  width: 8px;
  height: 8px;
  background: #bbb;
  border-radius: 50%;
  transition: 0.3s;
}

.dot.active {
  background: orangered;
  transform: scale(1.3);
}

#title-title{font-size:0.7rem;margin-bottom:0.5rem;opacity:0.85}


/*MAIN CARD INFO*/
.card-contact-info{
  position:relative;
  min-width:300px;
  height:380px;
  border-radius:25px;
  overflow:hidden;	
  scroll-snap-align: center;
}

/* REAL IMAGE */
.card-contact-info img{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* GLASS / BLUR BOX */
.blur-box-info{
  position:absolute;
  inset:15px; /* 👈 spacing instead of padding */
  border-radius:20px;
  backdrop-filter:blur(18px);
  background:rgba(255,255,255,0.12);
  color:white;
  padding:20px;

  box-shadow: inset 0 0 25px rgba(255,255,255,0.15);
  
}


     div#location-me{
         width:100%;
         height:3rem;
         background:#4A4A4A;
         display:flex;
         padding:0.5rem;
         border-radius:1rem;
         align-items:center;
     }
     
     div#location-icon{ 
         width:3rem;
         height:3rem;
         display:flex;
         align-items:center;
         justify-content:center;
     }
     
     img.location-icon{
         width:2rem;height:2rem
     }
     
     p#location-title{
         margin-left:0.5rem;
         font-size:1.2rem;
         font-weight:bold;
     }
     
     ul{padding:15px}
     li{margin-bottom:5px;color:black;font-size:1.1rem;}
     
     section.social-medias{
         width:100%;
         height:15rem;
         background:none;
     }
     
     section.upper-medias{
         width:100%;
         height:50%;
         display:flex;
     }
     
     div#social-box{
         width:50%;
         height:100%;
         background:none;
         position:relative;         
     }
     
     img.media-icon{position:absolute}
     
     .media-container {
    width: 100%;
    height: 80%;
    background:none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .social-box {
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .social-box img.media-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
  }

  .social-box:hover {
    background: rgba(0,0,0,0.2);
  }
  
  div.cyberprojects-title{
      width:100%;
      height:10rem;
      padding:1rem;
      margin:4rem 0 9rem 0;

  }
  
  
  div.contact-me{
      width:100%;
      height:10rem;
      padding:1rem;
      margin:4rem 0 3rem 0;
  }

  div.cyberprojects-title{margin-top:6rem}
  
  div#title-image,div#cyberprojects-title-image{
      margin-bottom:1.5rem;
}

  p#contact-title,p#cyberprojects-info{
      color:white;
  }
  
  
        section.cybersection-table{
          width:100%;
          height:27rem;
          background:none;
          display:flex;
          flex-flow:column;
          justify-content:flex-end;
          align-items:flex-end;
          padding:0.5rem;
          position:relative;
          margin-top:8rem;
      }
      
      section#cybersection-table-content{
          width:90%;
          background:white;
          border-radius:1rem;
          padding:0.5rem;
      }
      
      div#cybersection-table-title{
          width:50%;
          height:20%;
          background:none;
          display:flex;
          justify-content:flex-end;
          align-items:flex-end;
          font-size:1.2rem;
          padding-bottom: 1rem;
          font-weight:bold;
          color:white;
          
      }
      
      div#cybersection-table-image{
          position:absolute;
          top:4%;
          left:0.5rem;
          width:53%;
          height:5rem;
          border-radius:1rem;
          border:0.1rem solid white;
      }
      
      img.cybersection-table-image{border-radius:1rem}
      
      
      div.cybersection-content,div.cybersection-contents{
          width:100%;
          height:25%;
          background:none;
          display:flex;
      }
      
      

      div#cybersection-number{
          width:20%;
          height:100%;
          background:none;
          padding:1.3rem 0.7rem 1.3rem 0.7rem;
      }
      
      div#cybersection-number-container{
          width:2.5rem;
          height:2.5rem;
          border-radius:50%;
          background:black;
          display:flex;
          justify-content:center;
          align-items:center;
          color:white;
          font-weight:bold;
          
      }
      
      div#cybersection-links{
          width:80%;
          height:100%;
          background:none;
          display:flex;
          align-items:center;
          padding-left:0.5rem;
          
      }
      
      a.shortcut{
          color:black;
          font-weight:bold;
          text-decoration:0.1rem underline black;
      }
      
      div#cyberprojects-subtitle-image{
          padding:0.5rem 4rem 0.5rem 0;
      }
      
     

      div#cybersubtitle{  
          padding:0 6rem 0 0.5rem;
          margin:6rem 0 2rem 0;
      }
      
      section.tools-section{
        background:none;
        height: auto;
        padding:0 0 0 0.5rem;
      }
      
      section.os-list{
        width:100%;
        height:20rem;
        background:none;
        margin-top:0;
        display: flex;
        overflow-x: auto;
        padding-left:0.5rem;
      }

      div.object-container{
        min-width:15rem;
        height:100%;
        border-radius:1rem;
        background:white;
        padding:1rem;
        margin-right:3rem;
      }

      section#header-container{
        width:100%;
        height:15%;
        background:none;
        display:flex;
      }

      div#number-of-object{
        width:23%;
        height:100%;
        border-radius:50%;
        background:black;
        margin-right:1rem;
        color:white;
        font-size: 1.2rem;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      div#name-of-object{
        width:80%;
        height:100%;
        font-size:1.3rem;
        font-weight: bold;
        display: flex;
        align-items: center;
      }

      section.object-used-for{
        width:100%;
        height:25%;
        background:none;
        padding-top:1rem;
      }

      section.object-image{
        width:100%;
        height:60%;
        border-radius:1rem;
      }

      img.object-image{border-radius:1rem}

      /* PROJECTS */
      
              
/* Scroll container */
.scroll-container {
    display: flex;
    gap: 20px;
    padding:30px 30px 30px 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;

}

/* Hide scrollbar */
.scroll-container::-webkit-scrollbar {
    display: none;
}

/* Card */
.project-card {
    min-width: 300px;
    background: #f1f1f1;
    border-radius: 30px; /* 🔥 smooth curves */
    overflow: hidden;
    flex-shrink: 0;
    margin-right:3rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    scroll-snap-align: center;
    
}

/* Image section */
.project-card-image {
    width:100%;
    position: relative;
    height: 180px;
}
/* 01 badge */
.badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: white;
    color: black;
    font-weight: bold;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Content */
.card-info {
    padding: 18px;
}

.small-title {
    color: #555;
    font-size: 14px;
}

.main-title {
    font-size: 20px;
    font-weight: bold;
    margin: 5px 0;
}

.desc {
    font-size: 14px;
    color: #333;
}

/* Footer */
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

/* Grey placeholders */
.place-box {
    width: 80px;
    height: 30px;
    background: lightgrey;
    border-radius: 10px;
    display:flex;
    justify-content: center;
    align-items:center;
}

/* Button */
.view-project {
    background: #ff4d00;
    color: white;
    padding: 10px 18px;
    border-radius: 15px;
    text-decoration: none;
    font-weight: bold;
}

div#cybersection-projects-introducting{
     color:white; 
     width:100%;
     padding-left:0.5rem;
     margin-bottom:2rem;
     font-weight:400;
     font-size:1rem;
     background:none;
     font-family: Georgia,serif;
}


/* DOTS */
.project-dots, .write-dots {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  gap: 8px;
}

.project-dot, .write-dot {
  width: 8px;
  height: 8px;
  background: #bbb;
  border-radius: 50%;
  transition: 0.3s;
}

.project-dot.active , .write-dot.active{
  background: orangered;
  transform: scale(1.3);
}

div#cybersection-projects-title{
    width:100%;
    height:7rem;
    margin:0 0 1rem 0;
}


/* WRITEUP SECTION */

      section.write-ups-section{
        width:100%;
        height: 23rem;
        background: none;
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin:2rem 0 3rem 0;
        padding:1rem;
      }

      section.writeup-intro{
        min-width:20rem;
        height:100%;
        background:none;
        overflow: hidden;
        scroll-snap-align: center;
      }

      div#writeup-intro{
        width:100%;
        height:55%;
        background:orangered;
        padding:0.5rem;
        border-radius:1rem;
        margin-bottom: 1rem;
      }

      section.writeup-picture{
        width:100%;
        height:40%;
        background:none;
      }

      img.writeup-picture{
        border-radius: 1rem;
      }

      div#writeup-header{
        width:100%;
        height:25%;
        background:none;
        display:flex;
        color:white;
      }

      div#writeup-body{
        width:100%;
        height:75%;
        background:none;
        padding-top:1rem;
        font-weight:bold;
        color:white;
        font-family:Arial, Helvetica, sans-serif;
      }

      div#writeup-section-icon-container{
        width:14%;
        height: 90%;
        background:none;
      }

      div.writeup-section-icon{
        width:100%;
        height:100%;
        border-radius: 50%;
        background:white;
        padding:0.4rem;
        border:0.1rem solid black;
      }

      


      div#write-ups-section-title-intro{
        width:83%;
        height: 100%;
        background:none;
        display:flex;
        align-items:center;
        padding-left: 1rem;
        font-size:1.1rem;
        font-weight:bold;
        font-family:Arial, Helvetica, sans-serif;
    
      }

      section.report-container{
        min-width:20rem;
        height: 100%;
        background: white;
        border-radius: 1rem;
        margin-left:3rem;
        padding:0.5rem;
        overflow: hidden;
        scroll-snap-align: center;
      }

      div#report-container-number{
        width:50%;
        height:13%;
        background-color:none;
      }

      div#report-number{
        width:30%;
        height:100%;
        background:black;
        color:white;
        border-radius:50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size:1.1rem;
      }


      section.report-title{
        width:100%;
        height:27%;
        background:none;
        padding-top:1rem;
        font-size:1.4rem;
        font-weight:bold;
        font-family:Arial, Helvetica, sans-serif;
        display:flex;
        align-items: flex-end;
        border-bottom: 0.1rem solid grey;
      }

      section.report-summary{
        width:100%;
        height:45%;
        background:none;
        padding-top:1rem;
        font-weight:bold;
        font-family:Arial, Helvetica, sans-serif;
        word-spacing:2px;
      }

      div#report-view{
        width:100%;
        height:15%;
        background:none;
        display: flex;
        
        justify-content: flex-end;
      }

      div#report-view-button{
        width:8rem;
        height:100%;
        border-radius:2rem;
        background:orangered;
        display:flex;
        justify-content: center;
        align-items: center;
        color:white;
        font-size:1.1rem;
        font-family:Arial, Helvetica, sans-serif;
        font-weight:bold;
      }

      section#write-ups-container-title{
        width:100%;
        height:6rem;
        display:flex;
        justify-content:center;
        align-items: center;
        margin-top:7rem;
      }

      section.write-ups-container-title{
        width:80%;
        height:60%;
      }


 /* FOOTER */
 
       footer{
          width:100%;
          
          position:relative;
          margin-top:3rem;
      }
      
      img.footer-image{z-index:1}
      
      section.footer-information{
          width:100%;
          height:100%;
          position:absolute;
          z-index:2;
          top:0%;
          left:0%;
          background:none;
      }
      
      div#footer-quote{
          width:76.5%;
          height:6.7%;
          background:none;
            display:flex;
        align-items: center;
        font-weight: bold;
        font-size:0.7em;
        padding-left:0.5rem;
      }
      
      div#blank-space{
          width:100%;
          height:49%;
          background:none;
      }
      
      div#quick-socials-container{
          width:100%;
          height:15.8%;
          background:none;
          display:flex;
          justify-content:space-between;
      }
      
      section.quick-links-container{
          width:52%;
          height:100%;
          display:flex;
          padding:0.5rem 0 0 0.5rem;
      }
      
      p#links-title{
          text-decoration:none;
          color:black;
          font-weight:bold;
          white-space: nowrap;
      }
      
      a.links{
          text-decoration:none;
          color:black;
      }
      
      p.links{
          margin-top:0rem;
      }
      
      section.social-medias-container{
          width:23.5%;
          height:100%;
          background:none;  
          
      }
      
      div#mylogo-info{
          width:76.5%;
          height:23.5%;
          background:none;

      }
      
      div#copyrights{
          width:100%;
          height:5%;
          background:none;
          display:flex;
          justify-content: center;
          align-items: center;
          word-spacing: 3px;
          font-weight:bold;
          font-size:0.8rem;
      }
      
      div.upper-social-medias,div.lower-social-medias{
          width:100%;
          height:50%;
          background:none;
          display:flex;
      }
      
      div#footer-social-media-container{
         width:50%;
         height:100%;
         background:none;
      }
      
      
      /* WEBSECURITY INFO */
      
    div#websecurity-title{
        width:80%;
        background:none;
        padding:0.5rem;
        margin-top:7rem;
      }

      div#websecurity-info{
        width:100%;
        margin-bottom:3rem;
        padding:0.5rem;
        color:white;
      }

      section.websecurity-list{
        width: 100%;
        background:none;
        padding:0.5rem;
        overflow: auto;
        display:flex;
      }


      div.websecurity-card{
        min-width:18rem;
        background:white;
        border-radius: 1rem;
        padding:1rem;
        margin-right:3rem;
      }

      div#websecurity-card-title{
        width:100%;
        background:orangered;
        border-radius:3rem;
        display:flex;
        padding:0.5rem;
        font-weight:bold;
        display: flex;
        align-items:center;
        color:white;
      }

      div#websecurity-card-number{
        min-width:2.5rem;
        height:2.5rem;
        background:black;
        color:white;
        border-radius:50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        margin-right:0.5rem;
      }


      div#websecurity-card-info{
        width:100%;
        height:85%;
        background:none;
        padding-top:1rem;
      }
      
      a.cv-download{text-decoration:none;color:black}
      
}
@media (max-width: 500px){
    p.links{
        font-size:0.8rem;
    }

       div#cybersection-table-title{
          font-size:1rem;
      }

      
/* Card */
.project-card {
    min-width: 300px;  
    margin-right:6rem;
}
}