body {
    	margin: 0;
    	font-family: Arial, sans-serif;
    	line-height: 1.6;
    	color: #333;
    }

    header {
    	background: #0d2f75;
    	padding: 1rem 2rem;
    	color: #fff;
    	display: flex;
    	justify-content: space-between;
    	align-items: center;
    }

    header img {
    	margin: 0;
    	font-size: 1.5rem;
    }

    header nav a {
    	font-family: Inter;
    	font-weight: 400;
    	font-style: Regular;
    	font-size: 12px;
    	line-height: 24px;
    	letter-spacing: 0%;
    	color: #FFFFFF;
    	text-decoration: none;
    	color: inherit;
    	/*color: #fff;
      text-decoration: none;
      margin: 0 15px;
      font-weight: 500;*/
    }

    header nav a span {
    	font-family: Inter;
    	font-weight: 600;
    	font-style: Semi Bold;
    	font-size: 12px;
    	line-height: 24px;
    	letter-spacing: 0px;
    	color: #24AD51;

    }

    .hero {
    	display: flex;
    	justify-content: space-between;
    	align-items: flex-start;
    	padding: 60px 100px;
    	background: #f9fdfb;
    }

    .section-left h4 {
    	font-family: Inter;
    	font-weight: 400;
    	font-style: Regular;
    	font-size: 31px;
    	line-height: 54px;
    	letter-spacing: -2.5%;
    	color: #163B5D;

    	/*color: #555;
      font-size: 16px;
      margin-bottom: 10px;*/
    }

    .section-left h2 {
    	font-family: Inter;
    	font-weight: 600;
    	font-style: Semi Bold;
    	font-size: 49px;
    	line-height: 67px;
    	letter-spacing: -2.5%;
    	color: #02294A;
    	width: 80%;

    	/*font-size: 32px;
      font-weight: bold;
      color: #0a0a23;
      line-height: 1.4;*/
    }

    .section-left h2 span {
    	color: #24AD51;

    	/*color: #16a34a;*/
    	/* Green */
    }

    .hero-text {
    	/*  flex: 1;
      min-width: 250px;
      padding-right: 15px; */
    	flex: 1;
    	max-width: 483px;
    	/* match Figma width */
    	min-height: 319px;
    	/* match Figma height */
    	display: flex;
    	flex-direction: column;
    	gap: 21px;
    }

    /* Reset margins */
    .hero-text h2,
    .hero-text h3,
    .hero-text p {
    	margin: 0;
    }

    .hero-text h2 {
    	font-family: Inter;
    	font-weight: 300;
    	font-style: Light;
    	font-size: 34px;
    	line-height: 38px;
    	letter-spacing: -2.5%;
    	color: #02294A;



    	/*font-size: 20px;
      font-weight: 600;
      color: #2c3e50;*/
    	/*       margin-bottom: 10px;
      margin-left: 50px;
      margin-right: 50px; */
    }

    .hero-text h2 span {
    	color: #24AD51;
    }

    .hero-text h3 {
    	font-family: Inter;
    	font-weight: 400;
    	font-style: Regular;
    	font-size: 36px;
    	line-height: 54px;
    	letter-spacing: -2.5%;
    	color: #02294A;


    	/*font-size: 26px;
      line-height: 1.4;
      color: #222;*/
    	/*  margin-bottom: 20px;
      margin-left: 50px;
      margin-right: 50px; */
    }

    .hero-text h3 span {
    	font-family: Inter;
    	font-weight: 600;
    	font-style: Semi Bold;
    	font-size: 36px;
    	line-height: 54px;
    	letter-spacing: -2.5%;
    	color: #24AD51;

    	/*color: #1db954;*/
    }

    .hero-text p {
    	font-family: Inter;
    	font-weight: 400;
    	font-style: Regular;
    	font-size: 14px;
    	line-height: 28px;
    	letter-spacing: 0%;
    	color: #163B5D;

    	/*font-size: 15px;
      line-height: 1.6;
      color: #444;*/
    	/*   max-width: 400px;
      margin-left: 50px;
      margin-right: 50px; */
    }




    /* Form styling */
    .form-box {
    	background: #fff;
    	border-radius: 10px;
    	padding: 25px;
    	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    	max-width: 390px;
    	width: 100%;
    }

    .form-box h3 {
    	font-family: Inter;
    	font-weight: 600;
    	font-style: Semi Bold;
    	font-size: 21px;
    	line-height: 35px;
    	letter-spacing: -2.5%;
    	color: #02294A;
    	margin-bottom: 0;

    }

    .form-box h4 {
    	font-family: Inter;
    	font-weight: 700;
    	font-style: Bold;
    	font-size: 24.47px;
    	line-height: 35px;
    	letter-spacing: -2.5%;
    	color: #02294A;
    	margin-top: 0;

    	/*font-size: 16px;
      font-weight: bold;
      margin-bottom: 15px;*/
    }

    .form-box h4 span {
    	font-family: Inter;
    	font-weight: 700;
    	font-style: Bold;
    	font-size: 24.47px;
    	line-height: 35px;
    	letter-spacing: -2.5%;
    	color: #24AD51;

    }

    .form-box p {
    	font-family: Inter;
    	font-weight: 400;
    	font-style: Regular;
    	font-size: 12px;
    	line-height: 22px;
    	letter-spacing: 2%;
    	color: #7C8893;

    	/*font-size: 13px;
      margin-bottom: 20px;
      color: #555;*/
    }


    /*.form-box label {
      font-size: 13px;
      font-weight: 600;
      display: block;
      margin: 10px 0 5px;
    }
    .form-box input {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 14px;
    }
    .form-box button {
      margin-top: 20px;
      width: 100%;
      padding: 12px;
      background: #1db954;
      color: #fff;
      border: none;
      border-radius: 6px;
      font-size: 15px;
      font-weight: bold;
      cursor: pointer;
    }
    .form-box button:hover {
      background: #17a645;
    }*/

    /* Who We Serve Section */
    .serve {
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	gap: 60px;
    	padding: 60px 100px;
    	background: #fff;
    	min-height: 100vh;
    	/* box-sizing: border-box; */
    }

    .section-left {
    	flex: 2;
    }

    /*.serve h3 {
      font-size: 18px;
      color: #2c3e50;
      margin-bottom: 10px;
    }
    .serve h2 {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 40px;
      color: #222;
    }
    .serve h2 span {
      color: #1db954;
    }*/
    .cards {
    	flex: 1.2;
    	display: flex;
    	flex-direction: column;
    	gap: 20px;
    }

    .card {
    	background: #fff;
    	border: 1px solid #e5e7eb;
    	border-radius: 12px;
    	padding: 20px;
    	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
    }

    .card h4 {
    	/*font-size: 15px;
      font-weight: 600;
      margin-bottom: 10px;
      color: #2c3e50;*/
    	font-family: Inter;
    	font-weight: 600;
    	font-style: Semi Bold;
    	font-size: 23px;
    	line-height: 38px;
    	letter-spacing: -2.5%;
    	color: #02294A;

    }

    .card h4 span {
    	/*color: #1db954;*/
    	color: #24AD51;
    }

    .card p {
    	font-family: Inter;
    	font-weight: 400;
    	font-style: Regular;
    	font-size: 18px;
    	line-height: 28px;
    	letter-spacing: -2.5%;
    	color: #02294A;

    	/*font-size: 13px;
      color: #555;
      line-height: 1.6;*/
    }

    .section {
    	padding: 3rem 2rem;
    	text-align: center;
    }

    .dark-section {
    	background: #072a4d;
    	color: #fff;
    }

    .grid {
    	display: grid;
    	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    	gap: 1.5rem;
    	margin-top: 2rem;
    }

    .card {
    	background: #fff;
    	border-radius: 8px;
    	padding: 1.5rem;
    	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    /* SECTION 2 */
    .apart-section {
    	text-align: center;
    }

    /* Top Dark Blue Section */
    .apart-top {
    	background-color: #0a2a47;
    	color: #fff;
    	padding: 50px 20px;
    }

    .apart-top h2 {
    	font-family: Inter;
    	font-weight: 400;
    	font-style: Regular;
    	font-size: 31px;
    	line-height: 54px;
    	letter-spacing: -2.5%;
    	text-align: center;
    	color: #FFFFFF;
    	/*font-size: 22px;
      font-weight: 600;
      margin-bottom: 40px;*/
    }

    .apart-features {
    	display: flex;
    	justify-content: center;
    	gap: 40px;
    	flex-wrap: wrap;
    }

    .feature {
    	max-width: 250px;
    }

    .feature img {
    	font-size: 32px;
    	display: block;
    	margin-bottom: 15px;
    }

    .feature p {
    	font-family: Inter;
    	font-weight: 400;
    	font-style: Regular;
    	font-size: 20px;
    	line-height: 48px;
    	letter-spacing: -2.5%;
    	color: #FFFFFF;
    	/*font-size: 14px;
      line-height: 1.6;*/
    }

    .feature span {
    	font-family: Inter;
    	font-weight: 600;
    	font-style: Semi Bold;
    	font-size: 30px;
    	line-height: 48px;
    	letter-spacing: -2.5%;
    	color: #24AD51;
    	/*color: #3fd17d;
      font-weight: 600;*/
    }

    .feature label {
    	color: #FFFFFF;
font-family: Inter;
font-weight: 600;
font-style: Semi Bold;
font-size: 30px;
line-height: 48px;
letter-spacing: -2.5%;
    }

    /* Green Middle Section */
    .apart-middle {
    	background-color: #1db954;
    	color: #fff;
    	/*padding: 50px 20px;*/
    	padding-top: 40px;
    	padding-bottom: 5px;
    }

    .apart-middle h2 {
    	font-family: Inter;
    	font-weight: 600;
    	font-style: Semi Bold;
    	font-size: 30px;
    	line-height: 54px;
    	letter-spacing: -2.5%;
    	color: #FFFFFF;
    	text-align: center;
    	/*font-size: 18px;
      font-weight: 600;
      margin-bottom: 20px;
      text-align: left;
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;*/
    }

    .advantages {
    	display: flex;
    	justify-content: center;
    	gap: 20px;
    	flex-wrap: wrap;
    	max-width: 1000px;
    	margin: 0 auto 40px;

    }

    .advantages h3 {
    	font-family: Inter;
    	font-weight: 400;
    	font-style: Regular;
    	font-size: 28px;
    	line-height: 44px;
    	letter-spacing: -2.5%;
    	color: #FFFFFF;
    	min-width: 220px;
    	max-width: 220px;
    	text-align: left;

    }

    .advantages h3 span {
    	font-weight: 600;
    	font-style: Semi Bold;

    }

    .advantage {
    	background: #0a2a47;
    	background: rgba(36, 173, 81, 1);
    	color: #fff;
    	border-radius: 10px;
    	padding: 10px;
    	flex: 1;
    	min-width: 195px;
    	max-width: 195px;
    	text-align: left;
    }

    .advantage h4 {
    	font-family: Inter;
    	font-weight: 600;
    	font-style: Semi Bold;
    	font-size: 24px;
    	line-height: 44px;
    	letter-spacing: -2.5%;
    	color: #FFFFFF;
    	/*font-size: 14px;
      font-weight: bold;
      margin-bottom: 10px;*/
    }

    .advantage p {
    	font-family: Inter;
    	font-weight: 400;
    	font-style: Regular;
    	font-size: 18px;
    	line-height: 28px;
    	letter-spacing: -2.5%;
    	color: #FFFFFF;
    	/*font-size: 13px;
      line-height: 1.5;
      color: #cfe6d5;*/
    }

    /* Partner logos */
    .partners {
    	background: #fff;
    	padding: 20px;
    	border-radius: 10px;
    	max-width: 900px;
    	margin: 0 auto;
    }

    .partners h4 {
    	font-size: 16px;
    	font-weight: 600;
    	margin-bottom: 20px;
    	color: #0a2a47;
    	text-align: left;
    }

    .logos {
    	display: flex;
    	flex-wrap: wrap;
    	justify-content: space-between;
    	align-items: center;
    	gap: 20px;
    }

    .logos img {
    	height: 30px;
    	max-width: 100px;
    	object-fit: contain;
    }

    /* SECTION 3 */
    .section3 {
    	padding: 3rem 2rem;
    	max-width: 1100px;
    	margin: auto;
    }

    .headline3 {
    	display: flex;
    	flex-wrap: wrap;
    	justify-content: space-between;
    	/*align-items: flex-start;*/
    	align-items: center;
    	margin-bottom: 2rem;
    }

    .headline3-left h3 {
    	font-family: Inter;
    	font-weight: 400;
    	font-style: Regular;
    	font-size: 31px;
    	line-height: 54px;
    	letter-spacing: -2.5%;
    	color: #163B5D;
    	margin: 0;
    	/*color: #0d2f75;
      font-size: 1rem;*/
    }

    .headline3-left h2 {
    	font-family: Inter;
    	font-weight: 400;
    	font-style: Regular;
    	font-size: 49px;
    	line-height: 67px;
    	letter-spacing: -2.5%;
    	color: #02294A;
    	margin: 0.5rem 0;
    	max-width: 500px;
    	/*font-size: 2rem;
      color: #0d2f75;*/
    }

    .headline3-left h2 span {
    	font-weight: 600;
    	font-style: Semi Bold;
    	color: #24AD51;
    	/*color: #28a745;*/
    }

    .headline3-right {
    	max-width: 500px;
    	/*font-size: 0.95rem;
      color: #555;*/
    }

    .headline3-right p {
    	font-family: Inter;
    	font-weight: 400;
    	font-style: Regular;
    	font-size: 14px;
    	line-height: 28px;
    	letter-spacing: 0%;
    	color: #163B5D;

    }

    .features {
    	display: flex;
    	flex-wrap: wrap;
    	gap: 1rem;
    	justify-content: center;
    	margin: 2rem 0;
    }

    .feature-card {
    	flex: 1 1 250px;
    	background: #fff;
    	border: 1px solid #ddd;
    	border-radius: 10px;
    	padding: 1.5rem;
    	text-align: left;
    }

    .feature-card img {
    	height: 40px;
    	margin-bottom: 1rem;
    }

    .feature-card p {
    	margin: 0;
    	/*font-weight: 500;*/
    	font-family: Inter;
    	font-weight: 400;
    	font-style: Regular;
    	font-size: 20px;
    	line-height: 34px;
    	letter-spacing: -2.5%;
    	color: #02294A;

    }

    .testimonials {
    	text-align: center;
    	margin: 3rem 0;
    }

    .testimonials h3 {
    	font-family: Inter;
    	font-weight: 400;
    	font-style: Regular;
    	font-size: 31px;
    	line-height: 54px;
    	letter-spacing: -2.5%;
    	text-align: center;
    	color: #163B5D;
    	/*color: #0d2f75;*/
    	margin-bottom: 0.5rem;
    }

    .testimonials h2 {
    	font-family: Inter;
    	font-weight: 600;
    	font-style: Semi Bold;
    	font-size: 30px;
    	line-height: 54px;
    	letter-spacing: -2.5%;
    	text-align: center;
    	color: #02294A;
    	margin: 0 0 2rem;
    	/*font-size: 1.5rem;*/
    }

    .testimonial-grid {
    	display: flex;
    	flex-wrap: wrap;
    	gap: 1rem;
    	justify-content: center;
    }

    .testimonial {
    	flex: 1 1 280px;
    	background: #fff;
    	border-radius: 10px;
    	padding: 1.5rem;
    	text-align: left;
    	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    	font-style: italic;


    	font-family: Inter;
    	font-weight: 400;
    	font-style: Italic;
    	font-size: 20px;
    	line-height: 34px;
    	letter-spacing: -2.5%;
    	color: #02294A;

    }
    .testimonial img {
		padding-bottom: 10px;
	}

    /*.testimonial::before {
    	content: "“";
    	font-size: 2rem;
    	color: #28a745;
    	vertical-align: top;
    	margin-right: 0.3rem;
    }*/

    .testimonial-author {
    	margin-top: 1rem;
    	/*font-style: normal;
      font-weight: bold;
      color: #0d2f75;*/
    	font-family: Inter;
    	font-weight: 600;
    	font-style: Semi Bold;
    	font-size: 17px;
    	line-height: 34px;
    	letter-spacing: -2.5%;
    	color: #02294A;
    }

    .testimonial-location {
    	font-family: Inter;
    	font-weight: 400;
    	font-style: Regular;
    	font-size: 12px;
    	line-height: 24px;
    	letter-spacing: -2.5%;
    	color: #55565A;

    }

    .partner3-section {
    	text-align: center;
    	padding: 40px 20px;
    }

    .partner3-section h2 {
    	font-family: Inter;
    	font-weight: 400;
    	font-style: Regular;
    	font-size: 31px;
    	line-height: 54px;
    	letter-spacing: -2.5%;
    	text-align: center;
    	color: #163B5D;
    	margin-bottom: 0px;
    	/*font-size: 18px;
      font-weight: 500;
      color: #1c355e;
      margin-bottom: 10px;*/
    }

    .partner3-section h3 {
    	font-family: Inter;
    	font-weight: 600;
    	font-style: Semi Bold;
    	font-size: 30px;
    	line-height: 54px;
    	letter-spacing: -2.5%;
    	text-align: center;
    	color: #02294A;
    	margin-top: 0px;
    	/*font-size: 24px;
      font-weight: bold;
      color: #1c355e;
      margin-bottom: 40px;*/
    }

    .partner3-section h3 span {
    	color: #1c355e;
    	font-weight: 700;
    }

    .partner3-boxes {
    	display: flex;
    	justify-content: center;
    	gap: 20px;
    	flex-wrap: wrap;
    }

    .partner3-box {
    	flex: 1;
    	min-width: 250px;
    	max-width: 350px;
    	border: 1px solid #e0e0e0;
    	border-radius: 10px;
    	padding: 20px;
    	text-align: left;
    	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .partner3-box p {
    	font-family: Inter;
    	font-weight: 400;
    	font-style: Regular;
    	font-size: 20px;
    	line-height: 34px;
    	letter-spacing: -2.5%;
    	color: #02294A;
    	/*font-size: 14px;
      line-height: 1.6;*/
    	margin-bottom: 20px;
    }

    .partner3-box p span {
    	/*font-family: Inter;*/
    	font-weight: 600;
    	font-style: Semi Bold;
    	/*font-size: 20px;
line-height: 34px;
letter-spacing: -2.5%;*/
    	color: #24AD51;
    	/*color: #2e8b57;
      font-weight: 500;*/
    }

    .partner3-button {
    	background: #24AD51;

    	/*background-color: #2e8b57;*/
    	color: #fff;
    	border: none;
    	padding: 10px 18px;
    	border-radius: 5px;
    	cursor: pointer;
    	font-size: 14px;
    	font-weight: bold;
    }

    .partner3-button:hover {
    	background-color: #24AD52;
    }

    .contact-info p {
    	font-family: Inter;
    	font-weight: 400;
    	font-style: Regular;
    	font-size: 20px;
    	leading-trim: NONE;
    	line-height: 34px;
    	letter-spacing: -2.5%;
    	color: #02294A;
    	/*font-size: 14px;
      line-height: 1.8;*/
    }

    .contact-info strong {
    	font-family: Inter;
    	font-weight: 600;
    	font-style: Semi Bold;
    	font-size: 20px;
    	line-height: 34px;
    	letter-spacing: -2.5%;
    	color: #24AD51;
    	/*color: #2e8b57;
      font-weight: 600;*/
    }

    .contact-info a {
    	font-family: Inter;
    	font-weight: 600;
    	font-style: Semi Bold;
    	font-size: 20px;
    	line-height: 34px;
    	letter-spacing: -2.5%;
    	color: #02294A;
    	text-decoration: none;
    	/*color: #000;
      text-decoration: none;
      font-weight: bold;*/
    }

    /* What Sets Us Apart */
    .apart-features {
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	gap: 20px;
    	/* spacing between features */
    }

    .feature {
    	color: #fff;
    	/* assuming dark background */
    	padding: 0 20px;
    	text-align: left;
    	position: relative;
    }

    /* Add vertical divider */
    .feature:not(:last-child) {
    	border-right: 1px solid #fff;
    	/* white divider */
    }



    /* FOOTER */
    .footer {
    	background: #0d2f75;
    	color: #fff;
    	padding: 1rem;
    	text-align: center;
    }

    .footer-section {
    	background: #000000;
    	/*#003366; * dark blue */
    	color: #fff;
    	padding: 1rem;
    	display: flex;
    	justify-content: space-between;
    	/*align-items: center;*/
    }

    .footer-text {
    	max-width: 50%;
    }

    /*.footer-text h2 {
      margin: 0 0 0.5rem;
      font-size: 1.5rem;
      font-weight: bold;
      margin-left: 50px;
      margin-right: 40px;
    }*/
    .footer-text p {
    	margin: 0;
    	font-size: smaller;
    	line-height: 1.4;
    	margin-left: 50px;
    	margin-right: 40px;
    }

    .footer-text ul {
    	margin-left: 50px;
    	margin-right: 40px;
    }

    .footer-text a {
    	color: inherit;
    	/* use parent text color */
    	text-decoration: none;
    	/* remove underline */
    	cursor: pointer;
    }

    .footer-text a:hover {
    	text-decoration: underline;
    }

    /*.footer-buttons {
      display: flex;
      flex-direction: column;
      gap: 0.7rem;
      margin-right: 40px;
    }
    .footer-buttons button {
      padding: 0.6rem 1rem;
      border: 1px solid #fff;
      background: #fff;
      color: #003366;
      font-weight: bold;
      border-radius: 5px;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    .footer-buttons button:hover {
      background: #28a745;
      border-color: #28a745;
      color: #fff;
    }
    .footer-buttons .secondary {
      background: transparent;
      color: #fff;
      border: 1px solid #fff;
    }
    .footer-buttons .secondary:hover {
      background: #28a745;
      border-color: #28a745;
    }*/

    /*.upload-box {
      border: 1px dashed #ccc;
      padding: 15px;
      text-align: center;
      border-radius: 5px;
      margin-bottom: 15px;
    }*/

    /*.checkbox {
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      margin-left: 10px;
    }

    .checkbox label {
      cursor: pointer;
      margin-left: 5px;
    }*/
    /*.consent-details {
      font-size: 13px;
      color: #444;
      margin-left: 20px;
      margin-bottom: 20px;
      display: none;
    }

    .consent-details li {
      margin-bottom: 8px;
    }

    .consent-details a {
      color: #2a9d65;
      text-decoration: none;
    }*/


    /*     .result {
      max-width: 400px;
      margin: auto;
      background: #fff;
      border-radius: 14px;
      box-shadow: 0px 4px 12px rgba(0,0,0,0.1);
      padding: 20px;
      text-align: center;
    }

    .result h2 {
      font-size: 20px;
      margin-bottom: 20px;
    }

    .result h2 span {
         color: #2a9d65; green text for "Results"
 }

    .chart {
      width: 100%;
      height: 220px;
      margin-bottom: 20px;
      border: 1px solid #ddd;
      border-radius: 6px;
      overflow: hidden;
      background: #fff;
    }

    .status-btn {
      background: #4ad9a8;
      color: #fff;
      font-weight: bold;
      padding: 12px;
      border-radius: 6px;
      display: inline-block;
      margin-bottom: 15px;
    }

    .details {
      font-size: 13px;
      text-align: left;
      margin-top: 10px;
      color: #444;
    }

    .details p {
      margin: 6px 0;
    }

    .download-btn {
      width: 100%;
      background: #2a9d65;
      color: #fff;
      font-size: 15px;
      font-weight: bold;
      border: none;
      padding: 14px;
      border-radius: 6px;
      cursor: pointer;
      margin-top: 20px;
    }

    .download-btn:hover {
      background: #218a56;
    }
*/
    .result {
    	font-family: Inter;
    	font-weight: 700;
    	font-style: Bold;
    	font-size: 18.47px;
    	line-height: 35px;
    	letter-spacing: -2.5%;
    	text-align: center;
    	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    	background: #fff;
    	border-radius: 14px;
    	padding: 20px;

    	/*max-width: 420px;
    margin: auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.1);
    padding: 20px;
    text-align: center;*/
    }

    .result h2 {
    	color: #02294A;
    	/*font-size: 20px;*/
    	margin-bottom: 20px;
    }

    .result h2 span {
    	color: #24AD51;
    	/*color: #2a9d65;*/
    }

    .graph-msg-light {
    	font: Inter;
    	font-weight: 400;
    	size: 12px;
    	line-height: 22px;
    	letter-spacing: 2%;
    	color: #7C8893;
    	padding-left: 30px;
    }

    .graph-msg-dark {
    	font-family: Inter;
    	font-weight: 400;
    	font-style: Regular;
    	font-size: 12px;
    	line-height: 22px;
    	letter-spacing: 2%;
    	color: #02294A;
    }

    .graph-msg-grid {
    	display: grid;
    	gap: 20px;
    	/* space between columns */
    	max-width: 600px;
    	margin: 20px auto;
    	flex-wrap: wrap;
    	/* allows wrapping on small screens */
    }

    .graph-msg-cell {
    	flex: 1 1 48%;
    	/* equal width columns */
    	min-width: 250px;
    	/* controls when it wraps */
    	display: flex;
    	flex-direction: row;
    	/* label above input */
    }

    .graph-msg-cell label {
    	min-width: 140px;
    	max-width: 145px;
    	font-family: Inter;
    	font-weight: 400;
    	font-style: Regular;
    	font-size: 12px;
    	line-height: 22px;
    	letter-spacing: 2%;
    	color: #02294A;
    	padding-left: 30px;
    }

    .graph-msg-cell label:last-child {
    	max-width: 225px;
    	margin-right: 0;
    	font-family: Inter;
    	font-weight: 400;
    	font-style: Regular;
    	font-size: 12px;
    	line-height: 22px;
    	letter-spacing: 2%;
    	color: #02294A;
    }

    .chart {
    	width: 100%;
    	/*height: 300px;*/
    	margin-bottom: 20px;
    	border: 1px solid #ddd;
    	border-radius: 6px;
    	background: #fff;
    }

    .chart canvas {
    	height: 190px;
    	width: 360px;
    }

    .status-btn {
    	font-family: Inter;
    	font-weight: 400;
    	font-style: Regular;
    	font-size: 14px;
    	line-height: 35px;
    	letter-spacing: -2.5%;
    	color: #FFFFFF;
    	background: #32CBB9;
    }

    .details {
    	font-size: 13px;
    	text-align: left;
    	margin-top: 10px;
    	color: #444;
    }

    .details p {
    	margin: 6px 0;
    }

    /* Table for HFPI ranges */
    .hfpi-table {
    	width: 100%;
    	border-collapse: collapse;
    	margin-top: 8px;
    	font-size: 12px;
    	color: #02294A;
    }

    .hfpi-table td {
    	padding: 6px 4px;
    	vertical-align: top;
    }

    .hfpi-table td:first-child {
    	font-weight: bold;
    	width: 45%;
    }

    .download-btn {
    	width: 100%;
    	background: #24AD51;
    	color: #fff;
    	/*font-size: 15px;*/
    	/*font-weight: bold;*/
    	border: none;
    	padding: 14px;
    	border-radius: 6px;
    	cursor: pointer;
    	margin-top: 20px;

    	font-family: Inter;
    	font-weight: 600;
    	font-size: 15.5px;
    	line-height: 19.58px;
    	letter-spacing: 0%;

    }

    .download-btn:hover {
    	background: #218a56;
    }

    .try-btn {
    	width: 100%;
    	background: #fff;
    	color: #2a9d65;
    	/*font-size: 15px;*/
    	/*font-weight: bold;*/
    	border: 1px solid #28a745;
    	padding: 14px;
    	border-radius: 6px;
    	cursor: pointer;
    	margin-top: 20px;

    	font-family: Inter;
    	font-weight: 600;
    	font-size: 15.5px;
    	line-height: 19.58px;
    	letter-spacing: 0%;
    }

    .try-btnn:hover {
    	background: rgb(240, 251, 236);
    }


    /* Responsive code for table content*/
    /* Container for the entire form */
    .responsive-form {
    	/* max-width: 400px; */
    	max-width: 500px;
    	/*margin: 0 auto;*/
    	padding: 10px;
    	box-sizing: border-box;
    	font-family: Arial, sans-serif;
    }

    /* Each form row */
    .form-row {
    	display: flex;
    	flex-wrap: wrap;
    	margin-bottom: 15px;
    	/*gap: 10px;*/
    }

    /* Labels */
    .form-row label {
    	flex: 1 0 100%;
    	margin-bottom: 5px;
    	/*font-size: 13px;*/
    	/*font-weight: 600;*/
    	/*margin: 10px 0 5px;*/
    	font-family: Inter;
    	font-weight: 600;
    	font-style: Semi Bold;
    	font-size: 14.68px;
    	line-height: 28.55px;
    	letter-spacing: -2.5%;

    }

    .form-row p {
    	font-size: 13px;
    	margin-bottom: 5px;
    	margin-right: 15px;
    	color: #555;
    }

    /* Inputs for two-column rows */
    .form-row.two-cols input {
    	flex: 1 1 48%;
    	margin-right: 4%;
    }

    .form-row.two-cols input:last-child {
    	margin-right: 0;
    }

    .form-row.two-cols label {
    	flex: 1 1 48%;
    	margin-right: 4%;
    	margin-bottom: 0;
    	/*margin-right: 30%;*/
    	/*font-size: 13px;*/
    	/*font-weight: 600;*/
    }

    .form-row.two-cols label:last-child {
    	margin-right: 0;
    	margin-bottom: 0;
    	/*font-size: 13px;*/
    	/*font-weight: 600;*/
    }

    /* Full-width inputs */
    .form-row.full-width input,
    .form-row.full-width select,
    .form-row.full-width textarea {
    	width: 100%;
    	box-sizing: border-box;
    }

    /* File upload */
    .upload-box {
    	border: 1px dashed #ccc;
    	padding: 15px;
    	text-align: center;
    	border-radius: 5px;
    	margin-bottom: 15px;
    }

    .upload-box label {
    	font-family: Inter;
    	font-weight: 400;
    	font-style: Regular;
    	font-size: 12px;
    	line-height: 23.66px;
    	letter-spacing: -2.5%;
    	color: #7C8893;

    }

    .upload-box input[type="file"] {
    	margin-top: 5px;
    }



    /* Inputs for two-column rows */
    .form-row.checkbox-two-cols input {
    	/*flex: 0 0 20%;*/
    	margin-right: 4%;
    }

    .form-row.checkbox-two-cols label:last-child {
    	flex: 0 1 65%;
    	margin-right: 0;
    	font-family: Inter;
    	font-weight: 500;
    	font-style: Medium;
    	font-size: 12px;
    	line-height: 100%;
    	letter-spacing: 0%;
    	color: #162533;

    }

    /* Consent list hidden by default */
    .consent-details {
    	display: none;
    	padding-left: 20px;
    	margin-top: 5px;
    	font-size: 13px;
    	color: #555;
    }



    /* Show consent details when active */
    .consent-details.active {
    	display: block;
    	font-size: 13px;
    	color: #555;
    	/*margin-bottom: 20px;*/
    }

    /* Button styling */
    button {
    	padding: 10px 20px;
    	width: 100%;
    	background: #24AD51;

    	/*background-color: #1db954;*/
    	color: white;
    	border: none;
    	cursor: pointer;
    	border-radius: 4px;

    	font-family: Inter;
    	font-weight: 600;
    	font-size: 15.5px;
    	line-height: 19.58px;
    	letter-spacing: 0%;

    }

    /* Error label */
    #errorSpaceId {
    	color: red;
    	display: block;
    	margin-top: 5px;
    }


    /* OTP page */
    .otp-grid {
    	display: grid;
    	gap: 20px;
    	/* space between columns */
    	max-width: 600px;
    	margin: 20px auto;
    	flex-wrap: wrap;
    	/* allows wrapping on small screens */
    }

    .otp-cell {
    	flex: 1 1 48%;
    	/* equal width columns */
    	min-width: 250px;
    	/* controls when it wraps */
    	display: flex;
    	flex-direction: row;
    	/* label above input */
    }

    .otp-cell label {

    	font-family: Inter;
    	font-weight: 600;
    	font-style: Semi Bold;
    	font-size: 14.68px;
    	line-height: 28.55px;
    	letter-spacing: -2.5%;
    	color: #02294A;

    	min-width: 110px;
    	max-width: 150px;
    	/*font-family: Inter;
	font-weight: 400;
	font-style: Regular;
	font-size: 12px;
	line-height: 22px;
	letter-spacing: 2%;
	color: #02294A;*/
    }

    .otp-cell label:last-child {
    	color: #24AD51;

    	min-width: 210px;
    	max-width: 325px;
    	margin-right: 0;
    	text-align: end;
    	/*font-family: Inter;
	font-weight: 400;
	font-style: Regular;
	font-size: 12px;
	line-height: 22px;
	letter-spacing: 2%;
	color: #02294A;*/
    }

    .otp-msg {
    	font-family: Inter;
    	font-weight: 400;
    	font-style: Regular;
    	font-size: 18px;
    	line-height: 35px;
    	letter-spacing: -2.5%;
    	text-align: center;
    	font: #02294A;

    }

    .otp-msg span {
    	font-weight: 500;
    	font-style: Medium;

    }



    /* Responsive adjustments */
    @media (max-width: 480px) {
    	.form-row.two-cols input {
    		flex: 1 0 100%;
    		margin-right: 0;
    	}
    }

    @media (max-width: 480px) {
    	.form-row.two-cols label {
    		flex: 1 0 100%;
    		margin-right: 0;
    	}

    	#compDivId {
    		display: none;
    	}

    	.hero {
    		padding: 0px 0px;
    	}

    	/*.chart canvas {
    		height: 185px;
    		width: 90%;
    	}*/

    	.otp-cell label {
    		min-width: 110px;
    	}

    	.otp-cell label:last-child {
    		min-width: 210px;
    	}

    	#lastnameLabelDesktopId {
    		display: none;
    	}

    	#lastnameLabelMobileId {
    		display: block;
    	}
    }

    /*Checkbox design*/
    input[type="checkbox"] {
    	width: 8px;
    	height: 8px;
    	accent-color: #007bff;
    	/* modern browsers */
    }

    /* On small screens (≤ 600px) */
    @media (max-width: 600px) {
    	input[type="checkbox"] {
    		width: 8px;
    		height: 8px;
    		accent-color: #e63946;
    	}

    	#compDivId {
    		display: none;
    	}

    	.hero {
    		padding: 0px 0px;
    	}

    	.otp-cell label {
    		min-width: 110px;
    	}

    	.otp-cell label:last-child {
    		min-width: 210px;
    	}

    	#lastnameLabelDesktopId {
    		display: none;
    	}

    	#lastnameLabelMobileId {
    		display: block;
    	}
    }

    /* On large screens (≥ 1200px) */
    @media (min-width: 1200px) {
    	input[type="checkbox"] {
    		width: 12px;
    		height: 12px;
    		accent-color: #2a9d8f;
    	}

    	#compDivId {
    		display: block;
    	}

    	.hero {
    		padding: 60px 100px;
    	}

    	.otp-cell label {
    		min-width: 120px;
    	}

    	.otp-cell label:last-child {
    		min-width: 250px;
    	}

    	#lastnameLabelDesktopId {
    		display: block;
    	}

    	#lastnameLabelMobileId {
    		display: none;
    	}
    }
    
    
    
        /* Spinner inside button */
    .spinner {
      border: 2px solid #f3f3f3;
      border-top: 2px solid #3498db;
      border-radius: 50%;
      width: 16px;
      height: 16px;
      animation: spin 1s linear infinite;
      display: inline-block;
      vertical-align: middle;
      margin-left: 8px;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    button:disabled {
      opacity: 0.7;
      cursor: not-allowed;
    }