/* General styling for larger screens */
body {
            font-family: 'Garamond',serif;
            margin: 10;
            background-color: white;
            padding: 0cm;
        }
	header {
      padding: 20px;
      text-align: center;
      color: white;
    }

    main {
      max-width: 900px;
      margin: 40px auto;
	  margin-top: 70px;
      padding: 0 20px;
      line-height: 1.7;
	  font-size: 18px;
    }
	
	footer {
      text-align: center;
      padding: 20px;
      margin-top: 40px;
      background-color: #f0f0f0;
      color: #777;
    }
		
	/* Upper ribbon */
	.upper-ribbon {
		position: fixed;
		top: 0;
		width: 100vw;
		background-color: #fff;
		z-index: 1002;
		box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.08),
					0 1px 1px rgba(0, 0, 0, 0.12);
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100px; /* Adjust the height */
		transition: all 0.3s ease;
	}


	/* First row: CREDIT SIMULATOR text */
	.credit-text {
		text-align: left;
		font-size: 12px;
		font-weight: bold;
		padding: 8px;
		margin-top:20px;
		color: #fff;
	}

	/* Second row: Menu row (logo and sections) */
	.menu-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 5px;
		background-color: #8c0017;
	}

	/* Logo styling */
	.logo {
		padding: 10px;
		margin-left: 10px;
		height: 24px;
		width: 24px;
		border-radius: 20px;
	}

	/* Sections in the menu */
	.menu-section {
		padding: 10px;
		font-size: 18px;
		color: #fff;
		text-align: center;
		cursor: pointer;
		transition: color 0.3s;
		position: relative;
		margin-left: 5%;
		margin-right: 5%;
		font-weight:bold;
	}

	.menu-section:hover {
		color: #ffb012;
	}

	/* Section styles */
	.section {
		position: relative;
		cursor: pointer;
	}

	/* Dropdown list styles */
	.section-list {
		display: none;
		position: absolute;
		top: 100%;
		background-color: #ffffff;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		padding: 10px;
		left: 50%;
		transform: translateX(-50%);
		list-style-type: none;
		margin: 0;
		min-width: 250px;
		z-index: 1000;
	}

	.menu-section:hover .section-list {
		display: block;
	}

	.section-list li {
		padding: 8px 10px;
		color: #333;
	}

	.section-list li:hover {
		background-color: #f0f0f0;
		cursor: pointer;
	}

	.section-list li a {
		text-decoration: none;
		color: #333;
		font-size: 16px;
	}

	.section-list li a:hover {
		color: #ffb012;
	}
	
	.header-link {
		text-decoration: none; /* Remove underline */
		color: inherit; /* Inherit color from the parent for the text */
		display: inline-block; /* Ensure the link wraps the entire header */
	}

	.header-link .header {
		cursor: pointer; /* Shows pointer on hover to indicate a link */
	}



/* Mobile responsive styling for 768px width */
@media screen and (max-width: 430px) {
    body {
        padding: 1px; /* Reduce padding for small screens */
		margin-right:0px;
		margin-top: 20px;
	}
    
	.menu-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0px;
		background-color: #8c0017;
	}

	/* Logo styling */
	.logo {
		padding: 10px;
		margin-left: 10px;
		height: 20px;
		width: 20px;
		border-radius: 20px;
	}

	
	.box {
		padding: 3px;
		border-radius: 7px;
		box-shadow: none;
		text-align: center;
		min-width: 30px;
	}

	.box-pair {
        display: flex; /* Display box pair in a row */
        justify-content: flex-start;
        align-items: stretch;
		padding:5px;
        gap: 5px; /* Space between text-box and numeric-box */
    }
	
	.box-pair-monthly {
		display: flex; /* Display box pair in a row */
        justify-content: flex-start;
        align-items: stretch;
		padding:5px;
        gap: 5px; /* Space between text-box and numeric-box */
	}
	

   main {
      max-width: 900px;
      margin: 40px auto;
      padding: 0 20px;
      line-height: 2;
	  font-size: 16px;
    }