:root {
      --primary: #003366;
      --secondary: #0073e6;
      --background: #f8f9fb;
      --text: #333;
      --light: #fff;
      --gray: #666;
	  --logo: #005c76;
    }
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      font-family: 'Inter', sans-serif;
      color: var(--text);
      background-color: var(--background);
    }

    /* HEADER */
    header {
      background: var(--light);
      border-bottom: 1px solid #e5e8ec;
      position: sticky;
      top: 0;
      z-index: 100;
    }
	
	.logo {
	width: 200px;
	height: 60px;
}
	
	.logo img{
		width: auto;
		height: 100%;
	}
	
     .nav-container {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem 1.5rem;
    }
	
	.nav-container .nav-links{
		display: flex;
		gap: 15px
	}

    .nav-container .nav-links a {
      color: var(--text);
      text-decoration: none;
      margin-left: 1.5rem;
      font-weight: 500;
      transition: color 0.2s ease;
    }
	
    .nav-container .nav-links a:hover {
      color: var(--secondary);
    }
	
	.nav-container .hamburger {
      display: none;
      font-size: 1.5rem;
      cursor: pointer;
    }
	
	.mobile-menu {
      display: none;
      flex-direction: column;
      background: white;
    }
	
    .mobile-menu a {
      color: var(--text);
      padding: 10px 40px;
      text-decoration: none;
      border-top: 1px solid #444;
    }
	
	.mobile-menu a:hover {
      color: var(--secondary);
    }
	
	@media screen and (max-width: 768px) {
      .nav-container .nav-links { display: none; }
      .nav-container .hamburger { display: block; }

      .mobile-menu.show {
        display: flex;
      }
	}

    /* HERO */
    .hero {
      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
      color: var(--light);
      text-align: center;
      padding: 6rem 1.5rem;
    }

    .hero_flex{
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: center;
     }	

    .hero h1 {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 1rem;
    }
    .hero p {
      max-width: 700px;
      margin: 0 auto 2rem;
      color: #e6ecf5;
      line-height: 1.6;
    }
    .hero .btn {
      background: var(--light);
      color: var(--primary);
      padding: 0.75rem 1.5rem;
      border-radius: 5px;
      margin: 5px;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.2s ease;
    }
    .hero .btn:hover {
      background: #e6ecf5;
    }

    /* FEATURES / CONTENT */
    section {
      padding: 2rem 1.5rem;
      max-width: 1100px;
      margin: 0 auto;
    }
    section h2 {
      text-align: center;
      font-size: 2rem;
      margin-bottom: 2rem;
      color: var(--primary);
    }

    .features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5rem;
    }

    .feature {
      background: var(--light);
      padding: 2rem;
      border-radius: 10px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
      text-align: center;
    }

    .steps{
		margin-top:36px; 
		margin-left:5px;
	}
	
	.steps_with_picture{
	  display: flex;
      justify-content: space-between;
      align-items: center;
	}
	
	.about_with_picture{
	  display: flex;
      justify-content: space-between;
      align-items: center;
	}
	
	.steps_with_picture .steps{
		width: 65% 
	}
	
	.about{
		width: 65%
	}
	
	.steps_with_picture .picture{
		width: 35% 
	}
	
	.about_with_picture .picture{
		width: 35% 
	}
	
	.steps_with_picture .picture img{
		width: 100%;
		height: auto;
		display:block;
		margin:auto;
	}
	
	.about_with_picture .picture img{
		width: 100%;
		height: auto;
		display:block;
		margin:auto;
	}
	
	
    .step{
		display:flex;
		gap:14px;
		align-items:flex-start;
		margin-bottom:14px;
		margin-left:10px
	}
		
    .num{
		min-width:36px;
		height:36px;
		border-radius:9px;
		background:var(--logo);
		display:flex;
		align-items:center;
		justify-content:center;
		font-weight:700;
		color:white;
	}

    .num .strong{
      color: var(--secondary)
    }
	
	.after_num{
		color:var(--muted);
		font-size:14px
	}
	
	.section p {
  font-family: "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;                /* comfortable default: 16px */
  line-height: 1.6;               /* improves readability */
  color: #2c2c2c;                 /* softer than pure black */
  margin: 0 0 1.2em;              /* spacing between paragraphs */
}

  li {
	margin: 5px; 
  }
  
  h3 {

	  margin-top: 30px;
  }

    .feature h3 {
      margin-top: 0;
      color: var(--logo);
    }
    .feature p {
      color: var(--gray);
      font-size: 0.95rem;
    }
	
	.action_button{
		display:flex;
		gap:12px;
		flex-wrap:wrap;
		margin-top:24px;
		text-align: center;
		margin-top: 40px;
	}
	
	.action_button a{
		padding:20px 24px;
		border-radius:8px;
		border:1px solid #e6eef7;
		text-decoration:none;
		font-weight: 600;	
		color: white;
		background: var(--logo);  
		margin:auto;
		display:block;
	}
	
	.action_button a:hover {
      background: #2596be;
    }

    /* CALL TO ACTION */
    .cta {
      background: var(--secondary);
      color: var(--light);
      text-align: center;
      padding: 3rem 1.5rem;
      border-radius: 8px;
      margin-top: 3rem;
    }
    .cta a {
      display: inline-block;
      margin-top: 1rem;
      padding: 0.75rem 1.5rem;
      background: var(--light);
      color: var(--secondary);
      border-radius: 5px;
      font-weight: 600;
      text-decoration: none;
    }

    /* FOOTER */
    footer {
      background: var(--primary);
      color: #cfd8e3;
      text-align: center;
      padding: 2rem 1rem;
      font-size: 0.9rem;
    }
    footer a {
      color: #cfd8e3;
      text-decoration: underline;
    }

    /* RESPONSIVE NAVIGATION */
    @media (max-width: 768px) {
      nav {
        display: none;
      }
      .menu-toggle {
        display: inline-block;
        background: none;
        border: none;
        font-size: 1.5rem;
        color: var(--primary);
      }
      .mobile-nav {
        display: none;
        flex-direction: column;
        background: var(--light);
        border-top: 1px solid #eee;
      }
      .mobile-nav a {
        padding: 1rem;
        border-bottom: 1px solid #eee;
        color: var(--primary);
      }
      .mobile-nav.active {
        display: flex;
      }
    }