body {
        margin: 0;
        padding: 0;
        
    }


    .top-nav {
        top:0;
        z-index: 1000;
        position: sticky;
    }

    .top-nav a {
        text-decoration: none;
    }


    .top-nav-container {        
        display: flex;    
        background-color: #FFFFFF;       
        /* align-items: center; */
        /*  text-align: center;*/
        justify-content:space-between; 
        padding: 0px 100px; 
        
     }
     
    .top-nav-logo {       
        display: flex;
        font-size: 1.7rem;
        font-weight: bold;
        color: rgb(63, 63, 126);
        align-items: center;

    }    

    .top-nav-links > ul {
       
        display: flex;
        flex-direction: row;
       
        gap:20px;
        list-style-type: none;
       
        align-items: center;  
       
     }

     .top-nav li {
      font-family: 'Roboto', Arial, sans-serif;
      list-style-type: none;
      font-weight: 500;
      color: rgb(63, 63, 126);
       
     }

     .top-nav li:hover {
      color: rgb(9, 9, 46);
       cursor: pointer;
     }

    .tutorials-menu {
     position: relative;
    }

    .tutorials-sub-menu {
      display: none;
      position: absolute;
      padding: 5px 2px;
      background-color:rgb(89, 89, 126);
    }

    .tutorials-sub-menu li {     
      padding: 10px 20px;
      color: white;    
      font-size: 0.9rem;
    }

    .tutorials-sub-menu a {           
      color: white;
    }

    .tutorials-sub-menu li:hover {     
      text-decoration: underline;
      color: white;    
    }

    .tutorials-menu:hover .tutorials-sub-menu {
      display: block;
      top: 100%;
      z-index: 99999;
    }


    .hero {        
        display:flex;
        flex-direction: row;
        background: linear-gradient(135deg, #e0f2fe 0%, #f9fafb 100%);
        align-items: center;   
        box-sizing: border-box;
 
        padding: 0px 100px;   
     }

     .hero-content {       
        max-width: 600px;     
        
     }

    .hero-image {         
      width: 100%;
      
      display: flex;
      align-items: center;   
      justify-content: center;   
      
     
     }

     .hero-image img {            
        width: 80%;
        height: auto;
        object-fit: contain;
      
        
     }     

     .hero h1 {
        font-size: 2.8rem;
        font-weight: 700;
        line-height: 1.2;
        color: rgb(63, 63, 126);
     }

     .hero p {
        line-height: 1.6;
        font-size: 1.2rem;
       
     }

     .btn-primary {
        color: white;
        border: none;
        border-radius: 7px;
        padding: 18px 22px;
        background-color: rgb(63, 63, 126);
        font-weight: bold;
        width: 180px;
       
     }

     .btn-secondary {
        color: rgb(63, 63, 126);
        border: solid 2px rgb(63, 63, 126);
        border-radius: 7px;
        padding: 18px 22px;
        background-color:white;
        font-weight: bold;
        width: 180px;
       
     }

    .btn-tutorial {
        color: rgb(63, 63, 126);
        border: none;
       
        padding: 18px 22px;
        background-color:white;
        font-weight: bold;
        width: 180px;
       
     }

     .btn-tutorial:hover{
         color:rgb(49, 14, 131);
         text-decoration: underline;
         cursor: pointer;
     }

     .hero button:hover {
        cursor:pointer;
     }

     .hero-buttons {
        display: flex;
        gap: 10px;
     } 

     .hero-buttons .btn-primary a {
        color: #ffffff;
        text-decoration: none;
     } 

    .hero-buttons .btn-secondary a {
       color:rgb(49, 14, 131);
       text-decoration: none;
     } 


    .latest-docs {       
        width: 100%;        
     }    
     
     
    .latest-docs-content {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));         
        gap: 50px; 
        box-sizing: border-box;
        padding: 0px 100px;   
     }

    .latest-docs-header {
        padding: 0px 100px;
    }

    .latest-docs-header h3 {
      
        font-weight: 700;
        font-size: 1.8rem;
        color:  rgb(63, 63, 126);       
        width: 100%;
       
     }

     .tutorial-card {
        
        max-width: 260px;
        border: 1px solid #ddd6eb;
        border-radius: 10px;
        padding: 5px;
        align-items: center;
        text-align: center;
     }

     .tutorial-card img {
        width: 100px;
        height: 100px;
        background-color: rgb(248, 245, 250);
        padding: 0 50px;
     }

    .footer {
        margin-top: 20px;
        background-color: #dddddd;       
       
    }

    .footer-content {
        display:flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 0px 100px;
      
     }

    .footer-legal {
        max-width: 250px;
    }

    .footer-subscribe {
        display: block;
        flex-direction: column;
    }

    .footer-legal h3 {
        color:rgb(49, 14, 131);
        font-size: 1.1rem
    }

    .footer-legal p {
      color:#000000;
      font-size: 1.0rem;
      line-height: 1.2;
      margin: 0px;
    }

    .footer-links p  {
        color:rgb(49, 14, 131);    
        font-weight: bold;  
     
    }

    .footer-links ul {
        list-style-type: none;
        color:rgb(49, 14, 131);      
        padding: 0px;
    }

     .footer-links li {
        padding: 2px 0px;
    }

    .footer-links a {
        text-decoration: none;
    }

    .footer-subscribe p {
        color:rgb(49, 14, 131);     
        font-size: bold; 

    }

    .footer-subscribe input {
        width: 80%;
        height: 24px;
        font-size: 2.4 rem;
        border-radius: 2px;
        border: 2px solid #DCDCDC;
    }

    .subscribe-button {
        border: none;
        padding: 8px 12px;
        border-radius: 5px;
        background-color: rgb(49, 14, 131);
        color: #ffffff;
        margin-top: 10px;
    }

    .subscribe-button:hover {
        cursor: pointer;       
    }

    .footer-social-media p {
        color:rgb(49, 14, 131);     
        font-size: bold; 

    }

    .fa-brands  {
       color: rgb(49, 14, 131);
       width: 40px;
       height: 40px;
       font-size: 18px;
       border-radius: 50%;       
    }  

.article-top-bar {  
  font-family: "Roboto", Arial, sans-serif;
  display: flex;
  flex-direction: row;
  background-color: rgb(49, 14, 131);
  height: 60px;
  margin-top: 20px;
  margin-bottom: 20px; 
  position: sticky;
  top: 45px;
  z-index: 200;
  justify-content: space-between;
  align-items: center;
  padding: 0px 100px;
}

.search-box-menu ul {
  display: flex;
  list-style-type: none;
  padding: 0px;
}

.search-box-menu li {
 color: #ffffff;
 padding: 0px 5px;
}

.search-area { 
    display: flex; 
}

.search-button { 

  margin-left: 5px;
}

.search-box {   
  color: red; 
  width: 300px
}

.search-box input { 
  border: 1px solid #ffffff;
  width: 100%;
  border-radius: 5px;
  height: 25px
}




.btn-search {
  border: 1px solid #ffffff;
  color: #ffffff;
  background-color:  rgb(49, 14, 131);  
  border-radius: 50%;
  width: 30px;
  height:  30px;
  margin-left: 10px;
}

.btn-search:hover{
  cursor: pointer;
}


.article-content {
 
  display:flex;
  flex-direction:row;
  padding: 0px 100px;
   
}

  .article-left-bar {
    height: 100%;     
  
    max-width:250px;
    padding: 0px 5px;  
    background-color: rgb(244, 247, 252); 
  }

  .article-body {
    height: 100%;        
    max-width:60%;
    min-height: 800px;
  }

   .article-right-bar {
    border: 1px solid #000000;
    height: 800px;
    padding: 0px 0px;
    max-width:250px;
   
  }


 

  .article-left-bar ul {
    /* color: rgb(49, 14, 131); */
    color: #03284d;
    list-style-type: none;
    padding: 0px;
  }

  .article-left-bar a {   
    text-decoration: none;   
     color: #03284d;
  }

  .article-left-bar a:after {   
     color: #054483;
    background-color: bisque;
    
  }

  .article-left-bar li {
    padding: 5px 3px;
    font-size:1.0rem;
    font-family: 'Roboto', Arial, sans-serif;
    
  }

  .article-left-bar li:hover {
    cursor: pointer;   
    background-color: rgb(180, 176, 235);    
  }
 

  .article-body {  
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333; 
    padding: 0px 20px;
  } 

  .article-content h1 {  
    font-size: 1.4rem;
  }

  .article-content h2 {    
    font-size: 1.3rem;
  }

  .article-content h3 {
  
    font-size: 1.2rem;
  }

  .article-content h4 {
  
    font-size: 1.1rem;
  }


  .article-content h1, h2, h3, h4 {
    color: rgb(13, 4, 34);
   
  }

  .author-details {
    border: 1px solid #f1f0f0;
    border-radius: 5px;   
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }


  .author-details img {
    border: 1px solid #ffffff;
    width: 80px;
    height: 80px;
    border-radius: 50%;

  }

  .author-details p {
    text-align: center;
    font-family: 'Roboto', Arial, sans-serif;
    color: rgb(7, 7, 99);
  }

  .contents-header {
    background-color: rgb(7, 7, 99);
    color: white;
    text-align: left;
    padding: 5px 10px;
  }

  .article-categories p {
    color: rgb(7, 7, 99);
    padding: 0px 20px;
    font-size: 1.1 rem;
    font-weight: bold;
  }

  .article-categories ul {
    list-style-type: none;
    padding: 0px 20px;
   
  }

  .article-categories li {
   font-size: 0.9rem;
   padding: 4px 0px;
   font-family: 'Roboto', Arial, sans-serif;
  }

  .article-categories a {
   text-decoration: none;  
  }

  .article-categories li::before {
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   content: "\f02c";
   margin-right: 8px;
   color:  rgb(7, 7, 99);
  }


  .highlight {
    background-color: #DCDCDC;
    border: 1px solid #F1F1F1;
    border-radius: 5px;    
  }  

  .highlight pre {   
    padding: 0px 10px;   
  }

  .highlight button {
    color: rgb(64, 78, 202);
  }

  .highlight button:hover {
    cursor: pointer;
  }

.highlight pre,
.highlight code {
 
  display: block;
  width: 100%;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-break: break-word;
}

p code {
  background-color: rgb(194, 183, 29);
}

.highlight .filename {  
    color:  #ffffff;
    text-transform: uppercase;    
    font-size: 0.8rem;
    
  }

  .custom_prefix {   
    color:#000000;
  }
    
  @media (max-width: 1200px) {
  .footer-content {
    flex-direction: column;   /* stack vertically */
    align-items: flex-start;  /* align to left (or center if you prefer) */
    gap: 20px;                /* space between sections */
    padding: 20px;            /* reduce side padding */
  }

  .footer-legal,
  .footer-links,
  .footer-social-media,
  .footer-subscribe {
    width: 100%;              /* make each block full width */
  }

  

   .hero {
    flex-direction: column;   /* stack vertically */
    padding: 20px;            /* reduce side padding */
    text-align: center;       /* center text for mobile */
  }

  .hero-content {
    max-width: 100%;          /* let text fill width */
    margin-bottom: 20px;      /* space between text and image */
  }

  .hero-image img {
    width: 100%;              /* image scales to screen */
    max-width: 400px;         /* optional: limit size */
  }
}

.cards-contents {
  display: flex;
  flex-direction: row;
  padding: 0px 100px;
  min-height: 800px;
}

.articles-cards-left-bar {
  width: 250px;
  max-width: 400px;
  padding: 0px;
}

.articles-cards {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);  
  gap: 10px;
  padding: 0px 20px;
}

.articles-cards-left-bar {
  border: 4px solid #F8F8F8;
  border-radius: 5%;
}

.article-card {
  max-width: 250px;
  padding: 5px 5px;
  border: 1px solid #d3c9c9cc;
  border-radius: 5%;
  min-height: 200px;
}


.article-card button {
  border-radius: 5px;
  background-color:  rgb(49, 14, 131);
  color: white;
  padding: 8px 12px;
}

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

.article-card a:hover {   
  text-decoration: underline;
}



.article-card button:hover {
  cursor: pointer;
}

.article-card h3 a {  
  color:  rgb(49, 14, 131);
  font-size: 1.0rem;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
}

.article-card p {    
  font-size: 1.0rem;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  text-align: left;
}


.article-tags ul {    
  list-style-type: none;
  display: flex;
  padding: 0px;
}

.article-tags li {
  padding: 0px 10px;  
}

.article-tags li::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f02b";
  margin-right: 8px;
  color: rgb(7, 7, 99);
}


.code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1a025e;
  padding: 4px 8px;
  border-bottom: 1px solid #ddd;
  border-radius: 5px;
}

.code-title .filename {
  font-weight: bold;
}

.copy-button button {
  padding: 2px 8px;
  font-size: 0.9em;
  cursor: pointer;
}

/*
custom_prefix(mysql>)
*/