body {
  margin: 0;
  padding: 0;        
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
}

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

.top-nav a {
  text-decoration: none;
}
.top-nav a:visited {
  color: rgb(63, 63, 126);     
}

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

.top-nav-logo img {     
  width: 200px; 
  height: 50px;  
}  

.top-nav-links > ul {     
  z-index: 10000;  
  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;
}

.top-nav-hamburger {
  position: relative;
  margin-top: 5px;
  font-size: 24px;
  display: none;
  background: none ;
  border: none;
  cursor: pointer;
  color: rgb(63, 63, 126);       
}

.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: 5% 5%;   
}

.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;
}     

.testimonial-card img {
  width: 100px;
  height: 100px;
}

.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: 5%; 
  box-sizing: border-box;
  padding: 0px 5%;   
}

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

.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; */
  background-color: rgb(63, 63, 126);     
  color: #ffffff;
}

.footer-content {
  font-family: 'Roboto', Arial, sans-serif;
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0px 5%;
}

.footer-legal {
  max-width: 250px; 
  font-family: Arial, sans-serif;
 
}

.footer-legal p { 
  line-height: 1.6;
}

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

.footer-legal h3 {
  color:#ffffff;
  font-size: 1.1rem
}

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

.footer-links p  {
  color:ffffff;    
  font-weight: bold;    
}

.footer-links ul {
  list-style-type: none;
  color:#ffffff;      
  padding: 0px;
}

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

.footer-links a {
  text-decoration: none;
  color:#ffffff;   
  font-family: 'Roboto', Arial, sans-serif;   
}

.footer-subscribe p {
  color:#ffffff;     
  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: #ffffff;     
  font-size: bold; 
}

.fa-brands  {
  color: #ffffff;
  width: 40px;
  height: 40px;
  font-size: 18px;
  border-radius: 50%;       
}  

.article-top-bar {  
  padding: 0px 5%;
  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; 
}

.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; 
    width: 100%;
}

.search-button { 
  margin-left: 5px;
}


.search-box  { 
 flex: 1;
}

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

.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 { 
  width: 100%; 
  display:flex;
  flex-direction:row;
  box-sizing: border-box;
  padding: 0px 5%;   
}

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

.article-body {
  flex:1;
  height: 100%;
  min-width: 0;  
  min-height: 800px;
  padding: 0% 10px; 
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;   
}

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

.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 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-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);  
}


.article-last-updated::before { 
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f073";
  margin-right: 6px; 
  margin-top: 0px;
  color: rgb(49, 14, 131);  
}

kbd {
  padding: 6px;
  color: #000000;
  background-color: #F0F0F0;
  border-radius: 3px;
  border: 1px solid rgb(36, 33, 33);
  font-size: 0.8rem;
}

.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;
  overflow-wrap: break-word;
  overflow-x: auto; 

}

p code {
  background-color: rgb(194, 183, 29);
  
  width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
}

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

.custom_prefix {   
  color:#000000;
} 

.cards-contents {
  display: flex;
  flex-direction: row;
  padding: 0px 5%;
  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: 2%; 
}

.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;
  font-size: 0.7rem;
}

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

/* Hide on mobile (screens smaller than 768px) */
@media (max-width: 768px) {
  .top-nav-links {
    display: none; 
    position: absolute;
    top: 100%; 
    right: 5%;
  }
  .top-nav-links.active {
    display: block;
    background-color: rgb(219, 214, 233);
    border-radius: 5px;
    text-align: left;
    padding: 5px
  }
  .top-nav-links.active > ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    align-items: flex-start; 

  }

  .top-nav-hamburger {
    display: block;
  }

  .article-left-bar {
    display: none;
  }
  .article-right-bar {
    display: none;
  }

  .article-menu {
    display: none;
  }

  .top-nav-links {
    display:none;
  }

  .articles-cards-left-bar {
    display:none;
  }
  .articles-cards-right-bar{
    display:none;
  }


  .article-tags {
    display:none;
  }

.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; 
  padding: 20px; 
  text-align: center;
}

.hero-content {
  max-width: 100%;
  margin-bottom: 20px;
}

.hero-image img {
    width: 100%; 
    max-width: 400px; 
}


}