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

html,
body {
   height: 100%;
   width: 100%;
}

body {
   font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   font-weight: 300;
   background-color: #fff;
   color: black;
}

::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
   color: #999;
   font-family: "Inter", sans-serif;
   font-weight: 300;
}

select:invalid {
   color: #999999;
   font-family: "Inter", sans-serif;
   font-weight: 300;
   /* Placeholder grey */
}

p {
   font-size: 18px;
}

a,
input,
textarea,
select,
button {
   transition: background-color 0.8s ease;
   -webkit-appearance: none;
   appearance: none;
   font-family: "Inter", sans-serif;
}

.inner {
   max-width: 1400px;
   width: 100%;
   display: block;
   margin: 0 auto;
}

/* --- Main styles --- */
:root {
   --green: #25AE60;
   --green-light: #EDF7EF;
   --blue: #2D3F51;
   --blue-light: #EAEBED;
   --orange: #F39C13;
   --orange-light: #FFF5E9;
   --daccaa: #0099cc;

   --white: #FBFCFC;
   --off-white: #FEFFFF;
   --grey: #f8f8f8;

   --note-outline: #FDEBA2;
   --note-bg: #FFFBEB;
   --note-text: #BF6829;
}

section {
   padding: 150px 0;
}

/* --- Navigation --- */
nav {
   background-color: transparent;
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   padding: 10px 0;
   z-index: 10;
   transition: background-color 0.3s ease;
}

nav .inner {
   display: flex;
   background-color: transparent;
   align-items: center;  
   justify-content: space-between; 
}

nav.scrolled {
   background-color: var(--off-white);
   box-shadow: 0 2px 4px 0 rgb(0 0 0 / 8%);
}

nav .inner .logo {
   color: var(--blue);
   font-size: 24px;
   font-weight: 700;
}

nav .inner .logo span {
   color: var(--orange);
}

nav .inner ul {
   display: inline-flex;
   list-style-type: none;
   gap: 35px;
   align-items: center;
}

nav .inner ul a {
   text-decoration: none;
   color: var(--blue);
   font-weight: 500;
}

nav .inner ul a:hover {
   text-decoration: underline;
}

nav .inner ul a.cta {
   padding: 15px 30px;
   display: inline-flex;
   background-color: var(--blue);
   border-radius: 30px;
   color: var(--white);
   font-weight: bold;
   transition: transform 0.3s ease, opacity 0.3s ease;
}

nav .inner ul a.cta:hover {
   opacity: 0.8;
   transform: scale(1.1);
   text-decoration: none;
}

/* --- Hero --- */
.hero {
   background-color: white;
   padding: 0 !important;
}

.inner.split {
   display: flex;
   flex-wrap: wrap;
   max-width: 100%;
   margin: 0 auto;
   width: 100%;
   min-height: 100vh;
}

.split-left {
   flex: 1;
   background-color: white;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.split-right {
   flex: 1;
   background: url('assets/victoria-park.jpeg') no-repeat center center;
   background-size: cover;
   min-height: 400px;
}

.pseudo-inner {
   padding-left: calc((100vw - 1400px) / 2);
   padding-right: 100px;
   width: 100%;
}

.split-right {
   position: relative;
   overflow: hidden;
}

.split-right .cover {
   background: rgba(255, 255, 255, 0.8);
   transition: background 0.3s ease;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
}

.split-right.hovering .cover {
   background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(255, 255, 255, 0) 180px,
      rgba(255, 255, 255, 0.8) 200px);
}

.split-left .daccaa {
   display: inline-flex;
   gap: 10px;
   align-items: center;
   margin-bottom: 20px;
}

.split-left .daccaa .line {
   width: 3rem;
   height: .25rem;
   background-color: var(--orange);
}

.split-left .daccaa .text {
   text-transform: uppercase;
   color: var(--orange);
   font-size: 14px;
   font-weight: bold;
}

.split-left h1 {
   font-size: 76px;
   color: var(--blue);
   display: block;
}

.split-left h1 .atten {
   color: var(--green);
   display: block;
}

.split-left h1 .small {
   color: var(--orange);
   font-size: 36px;
   display: block;
}

.split-left p {
   font-size: 20px;
   color: var(--blue);
   margin: 30px 0;
}

.pills {
   display: flex;
   gap: 20px;
}

.pill {
   padding: 8px 15px;
   border: solid 1px #ccc;
   border-radius: 30px;
   align-items: center;
   display: inline-flex;
   gap: 10px;
}

.pill i {
   font-size: 18px;
}

.pill span {
   font-size: 15px;
   color: var(--blue);
   font-weight: 500;
}

.pill:nth-child(1) i {
   color: var(--blue);
}

.pill:nth-child(2) i {
   color: var(--green);
}

.pill:nth-child(3) i {
   color: var(--orange);
}

.pill:nth-child(1) {
   border: 1px solid rgba(45, 63, 81, 0.2);
}

.pill:nth-child(2) {
   border: 1px solid rgba(37, 174, 96, 0.2);
}

.pill:nth-child(3) {
   border: 1px solid rgba(243, 156, 19, 0.2);
}

.buttons {
   margin: 40px 0;
   display: flex;
   gap: 20px;
   justify-content: flex-start;
   align-items: center;
}

.buttons a {
   padding: 16px 32px;
   border: solid 2px var(--blue);
   background-color: var(--white);
   color: var(--blue);
   border-radius: 8px;
   font-size: 18px;
   font-weight: bold;
   cursor: pointer;
   transition: transform 0.3s ease, opacity 0.3s ease;
   text-decoration: none;
   display: inline-flex;
   justify-content: space-between;
   align-items: center;
}

.buttons a.cta {
   background-color: var(--blue);
   color: var(--white);
   border: solid 2px var(--blue);
   flex-grow: 1;
}

.buttons a:hover {
   transform: scale(1.1);
}

.quickInfo {
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-top: solid 1px #ebebee;
   padding-top: 30px;
}

.quickInfo .info {
   display: inline-flex;
   flex-direction: column;
   gap: 5px;
   text-align: center;
   justify-content: center;
   align-items: center;
}

.quickInfo .info span {
   font-size: 22px;
   font-weight: 700;
}

.quickInfo .info:nth-child(1) span {
   color: var(--blue);
}

.quickInfo .info:nth-child(2) span {
   color: var(--green);
}

.quickInfo .info:nth-child(3) span {
   color: var(--orange);
}

/* --- How It Works --- */

.howItWorks {
   background-color: var(--grey);
   text-align: center;
}

.orangeBars {
   display: inline-flex;
   gap: 10px;
   justify-content: center;
   align-items: center;
}

.orangeBars .bar {
   width: 3rem;
   height: .25rem;
   background-color: var(--orange);
}

.orangeBars .text {
   color: var(--orange);
   text-transform: uppercase;
   font-size: 14px;
   font-weight: 600;
}

.howItWorks h2 {
   margin: 30px 0;
   color: var(--blue);
   font-size: 48px;
}

.howItWorks p {
   font-size: 20px;
   color: var(--blue);
   text-wrap: balance;
   max-width: 800px;
   display: inline-block;
}

.cards {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 50px;
   margin: 50px 0;
}

.cards .card {
   background-color: var(--off-white);
   box-shadow: 0 2px 4px 0 rgb(0 0 0 / 8%);
   color: var(--blue);
   padding: 30px;
   text-align: left;
   border-radius: 30px;
}

.cards .card .icon {
   padding: 15px;
   border-radius: 15px;
   background-color: var(--blue-light);
   display: inline-block;
}

.cards .card:nth-child(2) .icon {
   background-color: var(--green-light);
   color: var(--green);
}

.cards .card:nth-child(3) .icon {
   background-color: var(--orange-light);
   color: var(--orange);
}

.cards .card .icon i {
   font-size: 32px;
}

.cards .card h3 {
   font-size: 24px;
   font-weight: 700;
   margin: 20px 0;
}

.cards .card p {
   font-size: 18px;
}


.howItWorks .buttons {
   display: inline-block;
   margin-top: 0;
}

.howItWorks .buttons a {
   text-align: center;
}


/* --- Service Area --- */

.serviceArea {
   background-color: var(--grey);
}

.serviceArea .inner {
   display: flex;
   gap: 100px;
   align-items: center;
}

.serviceArea .inner .content {
   flex: 1;
}

.serviceArea .inner .boxHolder {
   flex: 1;
}

.serviceArea .sub {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   gap: 5px;
   color: var(--orange);
   text-transform: uppercase;
   font-size: 14px;
   font-weight: 600;
}

.serviceArea .sub i {
   font-weight: 400;
}

.serviceArea h2 {
   color: var(--blue);
   font-size: 48px;
   margin: 30px 0;
}

.serviceArea h2 span {
   color: var(--green);
   display: block;
}

.serviceArea .quote {
   border-left: solid 4px var(--orange);
   background-color: var(--off-white);
   padding: 20px;
   font-size: 22px;
   color: var(--blue);
   border-radius: 10px;
}

.serviceArea p {
   font-size: 20px;
   color: var(--blue);
   margin: 30px 0;
}

.serviceArea .points {
   display: flex;
   gap: 50px;
   margin: 50px 0;
}

.serviceArea .points .point {
   display: flex;
   gap: 10px;
   align-items: flex-start;
}

.serviceArea .points .point .icon {
   padding: 10px;
   background-color: var(--blue-light);
   color: var(--blue);
   border-radius: 5px;
}

.serviceArea .points .point:nth-child(2) .icon {
   background-color: var(--green-light);
   color: var(--green);
}

.serviceArea .points .point h4 {
   color: var(--blue);
   font-size: 16px;
   font-weight: 600;
}

.serviceArea .points .point p {
   margin: 0;
   font-size: 14px;
   margin-top: 5px;
}

.serviceArea .eligibilityNote {
   border: solid 1px var(--blue-light);
   padding: 20px;
   display: flex;
   gap: 10px;
   border-radius: 10px;
}

.serviceArea .eligibilityNote i {
   color: var(--orange);
}

.serviceArea .eligibilityNote h4 {
   font-size: 16px;
   color: var(--blue);
   font-weight: 600;
}

.serviceArea .eligibilityNote p {
   margin: 0;
   font-size: 14px;
   margin-top: 5px;
}

.serviceArea .boxHolder .box {
   padding: 30px;
   background-color: var(--white);
   box-shadow: 0 2px 4px 0 rgb(0 0 0 / 8%);
   border-radius: 60px;
}

.serviceArea .box img {
   max-width: 100%;
   border-radius: 30px;
}

.serviceArea .box h3 {
   margin: 30px 0;
   color: var(--blue);
   font-size: 20px;
   font-weight: 700;
}

.serviceArea .box .areas {
   display: grid;
   grid-template-columns: repeat(2, minmax(0px, 1fr));
   gap: 10px;
}

.serviceArea .box .areas .area {
   border: solid 1px var(--blue-light);
   border-radius: 10px;
   padding: 10px;
   width: 100%;
   display: inline-flex;
   gap: 10px;
   align-items: center;
}

.serviceArea .box .areas .area.primary {
   background-color: var(--blue);
   color: var(--white);
   box-shadow: 0 2px 4px 0 rgb(0 0 0 / 8%);
}

.serviceArea .box .note {
   text-align: center;
   margin-top: 30px;
   font-size: 14px;
   color: var(--blue);
}

/* --- Eligibility --- */

.eligibility {
   text-align: center;
}

.eligibility h2 {
   margin: 30px 0;
   color: var(--blue);
   font-size: 48px;
}

.eligibility p {
   font-size: 20px;
   color: var(--blue);
   text-wrap: balance;
   max-width: 800px;
   display: inline-block;
}

.cards .card ul {
   margin-left: 30px;
   font-size: 16px;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.cards .card h4 {
   margin-bottom: 15px;
   margin-top: 30px;
}

.important {
   background-color: var(--note-bg);
   border: solid 1px var(--note-outline);
   padding: 20px;
   border-radius: 10px;
   color: var(--note-text);
   text-align: left;
}

.important ul {
   margin-left: 30px;
   font-size: 16px;
   display: flex;
   flex-direction: column;
   gap: 5px;
   margin-top: 10px;
}

/* --- Application --- */

.apply {
   text-align: center;
   background-color: var(--grey);
}

.apply h2 {
   margin: 30px 0;
   color: var(--blue);
   font-size: 48px;
}

.apply p {
   font-size: 20px;
   color: var(--blue);
   text-wrap: balance;
   max-width: 800px;
   display: inline-block;
}

.apply .important {
   margin: 30px 0;
   max-width: 800px;
   display: inline-flex;
   width: 100%;
   gap: 10px;
}

.apply form {
   background-color: white;
   padding: 30px;
   box-shadow: 0 2px 4px 0 rgb(0 0 0 / 8%);
   text-align: left;
   border-radius: 10px;
   display: inline-flex;
   flex-direction: column;
   gap: 30px;
   max-width: 800px;
   width: 100%;
}

.apply form .formSec {
   display: flex;
   gap: 15px;
   flex-direction: column;
}

.apply form .formSec .formPre {
   display: inline-flex;
   gap: 10px;
   align-items: center;
}

.apply form .formSec .formPre .icon {
   padding: 10px;
   border-radius: 10px;
   background-color: var(--blue-light);
   color: var(--blue);
}

.apply form .formSec .formPre .icon i {
   font-size: 24px;
}

.apply form .formSec .formPre h3 {
   font-size: 20px;
   color: var(--blue);
   font-weight: 700;
}

.apply form .formSec .formEls {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 20px;
}

.apply form .formSec .formEls .formEl {
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.apply form .formSec .formEls .formEl input, .apply form .formSec .formEls .formEl select,
.apply form .formSec .formEls .formEl textarea {
   width: 100%;
   padding: 20px;
   border: solid 1px var(--blue-light);
   font-size: 18px;
   background-color: transparent;
   border-radius: 5px;
}

.apply form .formSec .formEls .formEl select {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right 12px center;
   background-size: 20px;
   padding-right: 40px;
   cursor: pointer;
}

.apply form .formSec .formEls .formEl textarea {
   height: 250px;
}

.apply form .formSec .formEls .formEl label {
   color: var(--blue);
}

.apply form .formSec .formEls .formEl label .required {
   color: firebrick;
   font-weight: 700;
}

.apply form .formSec:nth-child(2) .formPre .icon {
   background-color: var(--green-light);
   color: var(--green);
}

.apply form .formSec:nth-child(3) .formPre .icon {
   background-color: var(--orange-light);
   color: var(--orange);
}

.apply form .formSec.eli {
   padding: 30px;
   border: solid 1px var(--blue-light);
   border-radius: 10px;
}

.apply form .formSec.eli p {
   text-wrap: wrap;
   max-width: 100%;
   font-size: 20px;
}

.apply form .formSec.eli h3 {
   font-size: 18px;
   font-weight: 700;
   color: var(--blue);
}

.apply form .formSec.eli a {
   color: var(--daccaa);
}

.apply form .formSec.eli label {
   font-size: 20px;
   color: var(--blue);
   margin-top: 20px;
   display: block;
   line-height: 1.55;
}

.apply form .formSec.eli ul {
   font-size: 20px;
   color: var(--blue);
   margin-left: 30px;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.apply form .formSec.eli input[type="checkbox"] {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;

   width: 20px;
   height: 20px;
   border: 2px solid var(--blue);
   border-radius: 4px;
   display: inline-block;
   position: relative;
   margin-right: 8px;
   vertical-align: middle;
   cursor: pointer;
   background-color: white;
   transition: all 0.2s ease;
}

.apply form .formSec.eli input[type="checkbox"]:checked::after {
   content: '';
   position: absolute;
   left: 4px;
   top: 0px;
   width: 6px;
   height: 12px;
   border: solid var(--blue);
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
}

.apply form .turny {
   text-align: center;
   width: 100%;
   min-height: 70px;
}

.apply form .button {
   text-align: center;
   width: 100%;
}

.apply form button {
   padding: 16px 32px;
   border-radius: 8px;
   font-size: 18px;
   font-weight: bold;
   cursor: pointer;
   transition: transform 0.3s ease, opacity 0.3s ease;
   text-decoration: none;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   background-color: var(--blue);
   color: var(--white);
   border: solid 2px var(--blue);
   max-width: 280px;
   gap: 10px;
}

.apply form button:hover {
   transform: scale(1.1);
}

/* --- FAQs --- */
.faqs {
   text-align: center;
}

.faqs h2 {
   margin: 30px 0;
   color: var(--blue);
   font-size: 48px;
}

.faqs p {
   font-size: 20px;
   color: var(--blue);
   text-wrap: balance;
   max-width: 800px;
   display: inline-block;
}

.faqs #faq-filters {
   margin-top: 50px;
   margin-bottom: 50px;
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   justify-content: center;
}

.faqs #faq-filters button {
   color: var(--blue);
   padding: 10px 20px;
   border-radius: 50px;
   background-color: transparent;
   font-size: 16px;
   border: none;
   cursor: pointer;
}

.faqs #faq-filters button:hover {
   background-color: var(--blue-light);
}

.faqs #faq-filters button.active {
   color: var(--white);
   background-color: var(--blue);
}

.faqs #faq-list {
   max-width: 900px;
   width: 100%;
   display: inline-flex;
   flex-direction: column;
   gap: 10px;
}

.faqs .faq-item {
   width: 100%;
   border: 1px solid var(--blue-light);
   border-radius: 10px;
   box-shadow: 0 2px 4px 0 rgb(0 0 0 / 8%);
}

.faqs .faq-item .faq-toggle {
   width: 100%;
   background: transparent;
   font-size: 16px;
   border: none;
   display: flex;
   flex-direction: column;
   padding: 30px;
   gap: 10px;
   cursor: pointer;
}

.faqs .faq-item .faq-toggle .faq-question {
   display: flex;
   justify-content: space-between;
   font-size: 16px;
   color: var(--blue);
   width: 100%;
   align-items: center;
}

.faqs .faq-item .faq-toggle .faq-question .infos {
   display: flex;
   flex-direction: column;
   gap: 10px;
   justify-content: flex-start;
   align-items: flex-start;
}

.faqs .faq-item .faq-toggle .faq-tag {
   font-size: 12px;
   color: var(--orange);
}

.faqs .faq-item .faq-answer {
   padding: 30px;
   padding-top: 0;
   text-align: left;
   font-size: 16px;
   color: var(--blue);
}

.faqs .faq-item .faq-answer p {
   font-size: 16px;
   color: var(--blue);
   text-wrap: wrap;
}

/* --- Footer --- */
footer {
   background-color: #334A5E;
}

footer .main .inner {
   grid-template-columns: repeat(4, minmax(0, 1fr));
   display: grid;
   gap: 30px;
   padding: 50px 0;
   color: var(--blue-light);
}

footer .main .inner .logo {
   color: white;
   font-size: 24px;
   font-weight: 700;
   margin-bottom: 5px;
}

footer .main .inner .logo .stafford {
   color: var(--orange);
}

footer .main .inner p {
   font-size: 14px;
   color: var(--blue-light);
}

footer .main .inner .legals {
   display: flex;
   flex-direction: column;
   gap: 15px;
   margin-top: 30px;
}

footer .main .inner .legals .legal {
   display: flex;
   gap: 10px;
   align-items: center;
}

footer .main .inner .legals .legal .text {
   display: flex;
   flex-direction: column;
   gap: 2px;
}

footer .main .inner .legals .legal .header {
   color: var(--white);
   font-size: 14px;
   font-weight: 500;
}

footer .main .inner .legals .legal .smaller {
   color: var(--blue-light);
   font-size: 12px;
}

footer .main .inner .legals .legal:nth-child(1) .icon {
   color: var(--orange);
}

footer .main .inner .legals .legal:nth-child(2) .icon {
   color: var(--green);
}

footer .main .inner .legals .legal:nth-child(3) .icon {
   color: var(--blue-light);
}

footer .main a {
   color: var(--blue-light);
   text-decoration: none;
}

footer .main a:hover {
   color: var(--orange);
}

footer .main .col h3 {
   color: var(--white);
   font-size: 18px;
   margin-bottom: 20px;
}

footer .main .col ul {
   display: flex;
   flex-direction: column;
   gap: 5px;
   margin-left: 30px;
   font-size: 14px;
}

footer .main .col.links ul {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-left: 0;
}

footer .main .col .box {
   display: flex;
   flex-direction: column;
   padding: 15px;
   border-radius: 10px;
   border: solid 1px #ffffff1a;
   background-color: rgba(255, 255, 255, 0.04);
   margin-bottom: 20px;
   gap: 5px;
}

footer .main .col .box .line {
   display: flex;
   justify-content: space-between;
   font-size: 14px;
}

footer .main .col .box .line .start {
   color: #8993A0;
}

footer .main .col .box .line .end {
   color: var(--blue-light);
}

footer .main .col .note {
   font-size: 12px;
}

footer .green {
   color: limegreen;
}

footer .partnership {
   padding: 50px 0;
   border-top: solid 1px #ffffff1a;
   border-bottom: solid 1px #ffffff1a;
}

footer .partnership .box {
   border: solid 1px #ffffff1a;
   padding: 30px;
   text-align: center;
   background-image: linear-gradient(to right, rgba(44, 62, 80, 0.1), rgba(39, 174, 96, 0.1));
   border-radius: 10px;
   color: var(--blue-light);
}

footer .partnership .box h4 {
   font-size: 18px;
   font-weight: 700;
}

footer .partnership .box p {
   padding: 20px 0;
   font-size: 14px;
   max-width: 600px;
   text-wrap: balance;
   display: inline-block;
}

footer .partnership .box a {
   background-color: var(--orange);
   color: var(--blue);
   padding: 10px 20px;
   border-radius: 5px;
   text-decoration: none;
   display: block;
   max-width: 230px;
   margin: 0 auto;
   margin-top: 10px;
}

footer .partnership .box a:hover {
   background-color: #f39c12e6;
}

footer .footer .inner {
   padding: 50px 0;
   display: flex;
   justify-content: space-between;
   color: var(--blue-light);
}

footer .footer .inner .copyright {
   font-size: 14px;
}

footer .footer .inner .other {
   display: flex;
   justify-content: flex-end;
   gap: 10px;
   align-items: center;
   font-size: 12px;
}

footer .footer .inner .other .button button {
   color: var(--blue-light);
   background-color: var(--blue);
   border-radius: 50%;
   height: 32px;
   width: 32px;
   font-size: 24px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   border: 1px solid #ffffff1a;
   cursor: pointer;
}

footer .footer .inner .other .button button:hover {
   background-color: var(--orange);
}


/* Small desktop sizing issues --- */
@media only screen and (max-width: 1410px) {
   .inner {
      width: 85%;
   }
}

/* --- Mobile styles --- */
/* --- Mobile styles --- */
@media only screen and (max-width: 800px) {
   body {
      overflow-x: hidden;
   }

   .inner {
      width: 100%;
      padding: 20px;
      max-width: 100%;
      overflow-x: hidden;
   }

   /* Navigation */
   nav {
      padding: 10px 0;
   }

   nav .inner {
      padding: 0 20px;
      width: 100%;
   }

   nav .inner ul {
      display: none; /* You may want to add a mobile menu later */
   }

   nav .inner .logo {
      font-size: 18px;
      white-space: nowrap;
   }

   /* Hero Section */
   .inner.split {
      flex-direction: column;
      min-height: auto;
      max-width: 100%;
      width: 100%;
   }

   .split-left, .split-right {
      flex: none;
      width: 100%;
      max-width: 100%;
   }

   .split-right {
      min-height: 300px;
   }

   .pseudo-inner {
      padding: 40px 20px;
      width: 100%;
      max-width: 100%;
   }

   .split-left h1 {
      font-size: 36px;
      margin-bottom: 20px;
      word-wrap: break-word;
   }

   .split-left h1 .small {
      font-size: 22px;
   }

   .split-left p {
      font-size: 16px;
      margin: 20px 0;
   }

   .pills {
      flex-direction: column;
      gap: 10px;
      width: 100%;
   }

   .pill {
      width: 100%;
      justify-content: flex-start;
      box-sizing: border-box;
   }

   .buttons {
      flex-direction: column;
      gap: 15px;
      margin: 30px 0;
      width: 100%;
   }

   .buttons a {
      width: 100%;
      text-align: center;
      justify-content: center;
      font-size: 16px;
      padding: 14px 24px;
      box-sizing: border-box;
   }

   .quickInfo {
      flex-direction: column;
      gap: 20px;
      padding-top: 20px;
      width: 100%;
   }

   .quickInfo .info {
      width: 100%;
   }

   /* How It Works */
   section {
      padding: 60px 0;
      width: 100%;
      overflow-x: hidden;
   }

   .howItWorks h2, .serviceArea h2, .eligibility h2, .apply h2, .faqs h2 {
      font-size: 28px;
      margin: 20px 0;
      word-wrap: break-word;
   }

   .howItWorks p, .serviceArea p, .eligibility p, .apply p {
      font-size: 16px;
      max-width: 100%;
   }

   .cards {
      flex-direction: column;
      gap: 20px;
      margin: 30px 0;
      width: 100%;
   }

   .cards .card {
      padding: 25px;
      width: 100%;
      box-sizing: border-box;
   }

   .cards .card h3 {
      font-size: 20px;
   }

   .cards .card p {
      font-size: 16px;
   }

   .orangeBars {
      flex-wrap: wrap;
      gap: 8px;
   }

   .orangeBars .text {
      font-size: 12px;
   }

   /* Service Area */
   .serviceArea .inner {
      flex-direction: column;
      gap: 40px;
      width: 100%;
   }

   .serviceArea h2 {
      font-size: 28px;
   }

   .serviceArea .quote {
      font-size: 16px;
      padding: 15px;
      width: 100%;
      box-sizing: border-box;
   }

   .serviceArea .points {
      flex-direction: column;
      gap: 20px;
      margin: 30px 0;
      width: 100%;
   }

   .serviceArea .boxHolder .box {
      padding: 20px;
      border-radius: 30px;
      width: 100%;
      box-sizing: border-box;
   }

   .serviceArea .box .areas {
      grid-template-columns: 1fr;
      width: 100%;
   }

   .serviceArea .box .areas .area {
      width: 100%;
      box-sizing: border-box;
   }

   .serviceArea .eligibilityNote {
      width: 100%;
      box-sizing: border-box;
   }

   /* Eligibility */
   .cards .card ul {
      font-size: 14px;
      margin-left: 20px;
   }

   .important {
      padding: 15px;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
   }

   .important ul {
      font-size: 14px;
      margin-left: 20px;
   }

   /* Application Form */
   .apply .important {
      margin: 30px 0;
   }

   .apply form {
      padding: 20px;
      gap: 25px;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
   }

   .apply form .formSec {
      width: 100%;
   }

   .apply form .formSec .formEls {
      grid-template-columns: 1fr;
      gap: 15px;
      width: 100%;
   }

   .apply form .formSec .formEls .formEl {
      width: 100%;
   }

   .apply form .formSec .formEls .formEl input,
   .apply form .formSec .formEls .formEl select,
   .apply form .formSec .formEls .formEl textarea {
      padding: 15px;
      font-size: 16px;
      width: 100%;
      box-sizing: border-box;
   }

   .apply form .formSec .formEls .formEl textarea {
      height: 150px;
   }

   .apply form .formSec.eli {
      padding: 20px;
      width: 100%;
      box-sizing: border-box;
   }

   .apply form .formSec.eli p,
   .apply form .formSec.eli ul,
   .apply form .formSec.eli label {
      font-size: 16px;
   }

   .apply form .turny {
      width: 100%;
      overflow-x: hidden;
   }

   .apply form .turny .cf-turnstile {
      max-width: 100%;
   }

   .apply form button {
      width: 100%;
      max-width: 100%;
      padding: 14px 24px;
      font-size: 16px;
      box-sizing: border-box;
   }

   /* FAQs */
   #faq-filters {
      gap: 10px;
      margin: 30px 0;
      width: 100%;
   }

   #faq-filters button {
      font-size: 14px;
      padding: 8px 16px;
   }

   #faq-list {
      width: 100%;
      max-width: 100%;
   }

   .faqs .faq-item {
      width: 100%;
      box-sizing: border-box;
   }

   .faqs .faq-item .faq-toggle {
      padding: 20px;
      width: 100%;
      box-sizing: border-box;
   }

   .faqs .faq-item .faq-toggle .faq-question {
      font-size: 15px;
      flex-wrap: wrap;
   }

   .faqs .faq-item .faq-answer {
      padding: 20px;
      padding-top: 0;
      font-size: 14px;
      width: 100%;
      box-sizing: border-box;
   }

   .faqs .faq-item .faq-answer p {
      font-size: 14px;
   }

   /* Footer */
   footer .main .inner {
      grid-template-columns: 1fr;
      gap: 40px;
      padding: 40px 20px;
      width: 100%;
   }

   footer .main .col {
      width: 100%;
   }

   footer .main .col ul {
      font-size: 14px;
      margin-left: 20px;
   }

   footer .main .col.links ul {
      margin-left: 0;
   }

   footer .main .col .box {
      width: 100%;
      box-sizing: border-box;
   }

   footer .partnership {
      padding: 40px 0;
      width: 100%;
   }

   footer .partnership .box {
      padding: 20px;
      width: 100%;
      box-sizing: border-box;
   }

   footer .partnership .box h4 {
      font-size: 16px;
   }

   footer .partnership .box p {
      font-size: 14px;
      padding: 15px 0;
      max-width: 100%;
   }

   footer .partnership .box a {
      max-width: 100%;
   }

   footer .footer .inner {
      flex-direction: column;
      gap: 20px;
      padding: 30px 20px;
      text-align: center;
      width: 100%;
   }

   footer .footer .inner .other {
      justify-content: center;
      flex-wrap: wrap;
   }

   footer .footer .inner .copyright,
   footer .footer .inner .other .note {
      font-size: 12px;
   }
}