:root {
  --header-bg:#814e00;  
  --bg:#f4f7f6;
  --alt-bg:#bbbebd;
  --lighttxt:#2f3e46;
  --btn:#48a85d;
  --btnhover:#367e46;
  --soft:#cad2c5;
  --txt:#ffffff;
  --headertxt:#7EB1FF;
  --txt-hover:#b8b8b8;
  --space-md:2rem;

  --font-test : "Segoe UI", Courier, monospace;
  --font-main : 'Tahoma', sans-serif;
}

* { box-sizing:border-box; margin:0; padding:0; }

body {
  font-family: var(--font-main);
  background-image: url("background.png");
  background-repeat: repeat;
  background-position: top left;
  line-height:1.7;
}

a {
	color: var(--txt);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
    color: var(--txt-hover);
}

.header {
  position: sticky;
  font-family: var(--font-test);
  top: 0;
  padding: 10px 16px;
  background: var(--header-bg);
  color: var(--headertxt);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 4rem;
}

.logo {
  font-weight:700;
  font-size:22px;
  text-decoration:none;
  color:var(--headertxt);
}

.navbar {
	display: flex;
	gap: var(--space-md);
	list-style: none;
}

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


.hero {
  padding:90px 0;
  text-align:center;
}

.hero h1 {
  font-size:42px;
  margin-bottom:20px;
}

.hero p {
  max-width:650px;
  margin:0 auto 30px;
  font-size:18px;
}

.cta-btn {
  background:var(--btn);
  color:white;
  padding:14px 28px;
  border:none;
  border-radius:8px;
  font-size:16px;
  cursor:pointer;
}

.cta-btn:hover {
  background:var(--btnhover);
}

.section {
  padding:80px 0;
}

.section h2 {
  text-align:center;
  margin-bottom:50px;
  font-size:30px;
}

.content-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
  margin-bottom:60px;
}

.content-row img {
  width:100%;
  border-radius:12px;
  background:var(--soft);
  min-height:300px;
}

.card {
  background:var(--txt);
  padding:50px 30px;
  border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,0.05);
  max-width:500px;
  margin:auto;
}

.aboutus {
    background-color: var(--alt-bg);
}

#Top {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 20px 15px;
}

#about{
  background-color: rgba(255, 255, 255, 0.9);
  padding: 60px 15px;
}

#solution {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 60px 15px;
}

#scalability {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 20px 15px;
}

#business-model {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 60px 15px;
}


/* 
Form styles
*/

.section f0 {
  text-align:center;
  color:red;
  margin-bottom:50px;
  font-size:12px;
}


form input {
  width:100%;
  padding:12px;
  margin-bottom:15px;
  border:1px solid #ddd;
  border-radius:8px;
  font-size:14px;
}

form button {
  width:100%;
  padding:14px;
  background:var(--btn);
  color:white;
  border:none;
  border-radius:8px;
  font-size:16px;
  cursor:pointer;
}

form button:hover {
  background:var(--btnhover);
}

footer {
  text-align:center;
  padding:50px 0;
  color:white;
  text-shadow:
    -1px -1px 0 black,
    1px -1px 0 black,
    -1px  1px 0 black,
    1px  1px 0 black;
  font-size:14px;
  opacity:0.7;
}

.f {
    font-size:14px;
    color:var(--lighttxt);
}


/* Tooltip text */
.freq .freqtxt {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}


/* Tooltip arrow */
.freq .freqtxt::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.freq:hover .freqtxt {
  visibility: visible;
  opacity: 1;
}

html {
	scroll-behavior: smooth;
}

@media(max-width:900px){
  .content-row {
    grid-template-columns:1fr;
  }
}