/* RESET & BASE */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: linear-gradient(145deg, #f6f9fc 0%, #edf2f7 100%);
      font-family: 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Segoe UI', system-ui, -apple-system, 'Roboto', sans-serif;
      line-height: 1.4;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
    }
	
	.green {
		color: green;
		font-style: normal !important;
	}
	
	.red {
		color: red;
	}
	
	.gray {
		color: gray;
	}
	
	a {
		text-decoration: none;
	}
	
	.center {
		text-align: center;
	}
	.right {
		text-align: right;
	}
	
	.container {
  width: 100%;
  overflow: hidden;
}

.scroll-text {
  color: green;	
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%; /* start from right */
  animation: scrollText 30s linear infinite;
}

@keyframes scrollText {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

    /* MAIN CARD – elegant & breathable */
    .brand-container {
      max-width: 1100px;
      width: 100%;
      margin: 0 auto;
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(0px);
      border-radius: 2.5rem;
      box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.05);
      padding: 2.2rem 2rem;
      transition: all 0.2s ease;
      border: 1px solid rgba(255, 255, 255, 0.5);
    }
    /* fluid typography – text shrinks smoothly on small windows */
    h1 {
      font-size: clamp(1.8rem, 6vw, 3.2rem);
      font-weight: 800;
      letter-spacing: -0.02em;
      color: #0a2540;
      margin-bottom: 0.4rem;
      line-height: 1.2;
      word-break: break-word;
      background: linear-gradient(135deg, #0f2b3d, #1e4a6e);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      text-shadow: 0 1px 1px rgba(0,0,0,0.02);
    }

    h3 {
      font-size: clamp(1.4rem, 4.8vw, 2.4rem);
      font-weight: 700;
      color: #1f6392;
      margin-top: 0.25rem;
      margin-bottom: 1rem;
      letter-spacing: -0.01em;
      border-left: 4px solid #2b8bb3;
      padding-left: 1rem;
      word-break: break-word;
    }
    
	
	 .welcome {
      font-size: clamp(1.4rem, 4.8vw, 2.4rem);
      font-weight: 700;
      color: green;
      margin-top: 0.25rem;
      margin-bottom: 1rem;
      letter-spacing: -0.01em;
      padding-left: 1rem;
      word-break: break-word;
    }
    h4 {
      font-size: clamp(1.1rem, 3.8vw, 1.65rem);
      font-weight: 550;
      color: #2c3e44;
      margin-top: 0.75rem;
      margin-bottom: 0.4rem;
      line-height: 1.45;
      word-break: break-word;
      letter-spacing: -0.2px;
      transition: all 0.1s;
    }
 .article {
	 color: #2c3e44;
	 line-height: 2.0;
 }
    /* subtle distinction for the two taglines */
    .tagline-group {
      margin-top: 1.2rem;
      padding-top: 0.75rem;
      border-top: 2px dashed #cbdde6;
    }

    /* extra polish: keep hashes visible but elegant */
    .hash-muted {
      opacity: 0.7;
      font-weight: 500;
    }

    /* make entire text block responsive & readable */
    .brand-container > * + * {
      margin-top: 0.5rem;
    }
	
	#risk {
		text-align: center;
		color: red;
	}
	
.button {
  border: none;
  padding: 16px 32px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 5px;
  
  
}

.button1 {
  background-color: #4965DE; 
  color: #EAE9F5; 
  border: 2px solid #04AA6D;
  
}

.button1:hover {
  background-color: #04AA6D;
  color: white;
}

.button2 {
  background-color: #4965DE; 
  color: #EAE9F5; 
  border: 2px solid #008CBA;
}

.button2:hover {
  background-color: #04AA6D;
  color: white;
}


.link {
	color: #EAE9F5;
	
}
	
	
	
	

    /* small spacing adjustments for very narrow screens */
    @media (max-width: 550px) {
      .brand-container {
        padding: 1.5rem 1.2rem;
        border-radius: 1.8rem;
      }
      h2 {
        padding-left: 0.7rem;
      }
    }

    /* optional: fine tune for extremely small devices (<=380px) */
    @media (max-width: 380px) {
      body {
        padding: 0.8rem;
      }
      .brand-container {
        padding: 1.2rem 1rem;
      }
    }

    /* maintain readability for long Assamese / Devanagari lines */
    .brand-container, h1, h2, h3 {
      overflow-wrap: break-word;
      hyphens: auto;
    }

    /* subtle hover / interactive vibe (optional) */
    .brand-container {
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .brand-container:hover {
      box-shadow: 0 30px 50px -18px rgba(0, 0, 0, 0.3);
    }

    /* small elegant footnote (resize indicator) – minimal, helpful */
    .resize-note {
      text-align: center;
      font-size: clamp(0.7rem, 2.8vw, 0.85rem);
      color: #6b8c9e;
      margin-top: 2rem;
      padding-top: 1rem;
      border-top: 1px solid #e2edf2;
      letter-spacing: 0.3px;
      font-weight: 450;
    }
    .resize-note span {
      display: inline-block;
      background: #eef4f9;
      padding: 0.2rem 0.6rem;
      border-radius: 40px;
      font-size: 0.75rem;
    }