@charset "utf-8";
/* CSS Document */

    body {
      font-family: 'Arial', sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0px;
       
    }

/*.headerpage {background-image: url("../st-link-images/bg-modern-1.jpg")} 
.headerpage {padding-left: 10px;}*/
    .headerpage {
  position: absolute;
  /*top: 80px;*/
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
		 background: linear-gradient(
    180deg,
    rgba(7,9,15,.88),
    rgba(7,9,15,.55)
  );
  background-color: rgba(0, 0, 0, 0.8);
  padding: 10px 20px;
  /*transition: all 0.3s ease-in-out;*/
  z-index: 9999; /* Make sure it’s above other content */
}
 @media (max-width: 480px) {
     .headerpage { top:85px;}
}
        .headerpage img {
            width: 100px;
            height: auto;
        }

        .login-icon {
            color: white;
            font-size: 24px;
            text-decoration: none;
            margin-right: 40px;
        }

        .login-icon:hover {
            color: #00d9ff;
        }

        .sticky {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: rgba(0, 0, 0, 1);
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
        }

    header h1 {
      margin: 0;
      font-size: 2.5rem;
    }

    .article-content {
		
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
        margin-top: 100px; /* Prevents overlap from sticky header */
    }

    .article-content h2 {
      color: #333;
      font-size: 2rem;
      margin-bottom: 10px;
    }

    .article-content p {
      color: #666;
      font-size: 1.2rem;
      line-height: 1.6;
      margin-bottom: 20px;
    }

    .features {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
		background-image: url("../st-link-images/bg-modern-1.jpg");
			border-radius: 8px;
    }

    .feature {
      background-color: #F0F5F8;
      padding: 20px;
      margin: 10px;
      border-radius: 8px;
      flex: 1;
      min-width: 250px;
      text-align: center;
      transition: transform 0.3s ease;
    }

    .feature:hover {
      /*transform: scale(1.05);*/
    }

    .feature i {
      font-size: 2rem;
      color: #1976D2;
      margin-bottom: 10px;
    }

    .feature h3 {
      font-size: 1.5rem;
      color: #333;
    }

    .feature p {
      color: #666;
    }

   

    @media (max-width: 768px) {
      .features {
        flex-direction: column;
      }

      header h1 {
        font-size: 2rem;
      }
		body {width: 100%;}
		.container {padding: 0px; width: 100%;}
    }

.module-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px 0px;
}

.module {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.module-icon {
    width: 80px;
    height: 80px;
    margin-right: 10px;
}

.last-module {
    font-style: italic;
    color: #666;
    flex-grow: 1;
    text-align: center;
}