:root {
     --brand-orange: #e99c52;
     --brand-background: #222222;
     --brand-text-light: #eaeaea;
     --brand-text-dark: #303030;
     --brand-button-hover: #d88b47;
     --disclaimer-background: #f8d7da;
     --disclaimer-text: #721c24;
     --disclaimer-hover: #a8323a;
     --hyperlink-inline: #f0c99c;
     /*            --logo-path: url('assets/img/logo-dao-trn4blk-lg_coin_left.svg');*/
     /*            --logo-wide-path: url('assets/img/logo-dao-trn4blk-wide-lg_coin_left.svg');*/
 }

 *,
 *::before,
 *::after {
     box-sizing: border-box;
 }

 * {
     margin: 0;
     padding: 0;
 }

 @font-face {
     font-family: 'Roboto';
     src: url('../../../assets/font/Roboto/Roboto-Light.ttf') format('truetype');
     font-weight: 300;
     font-style: normal;
 }


 @font-face {
     font-family: 'Roboto';
     src: url('../../../assets/font/Roboto/Roboto-Medium.ttf') format('truetype');
     font-weight: 400;
     font-style: normal;
 }

 html,
 body {
     font-family: 'Roboto', Arial, sans-serif;
     font-weight: 300;
     height: 100%;
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: column;
     background-color: var(--brand-background);
     color: var(--brand-text-light);
     line-height: 1.3;
     letter-spacing: 0.5px;
 }

 .signature-line {
     width: 400px;
     border-top: 1px solid #ffffff;

     font-size: 0.85em;

 }



/* Styling the statistics section */
.statistics {
    font-size: 1.5em;
    color: var(--brand-orange);
    font-weight: bold;
    text-align: left;
    margin-top: 20px;
}

.pdf-count {
    font-size: 1.5em;
    color: var(--brand-text-light);
    font-weight: 700;
}

 a.styled-link {
     position: relative;
     /* Position relative to anchor the ::before element */
     color: var(--hyperlink-inline);
     /* Default text color */
     font-weight: bold;
     /* Make the link bold */
     text-decoration: none;
     /* Remove default underline */
     transition: color 0.3s ease;
     /* Smooth transition for text color */
 }

 a.styled-link::before {
     content: '';
     /* Empty content for the pseudo-element */
     position: absolute;
     /* Position it relative to the link */
     left: 0;
     bottom: 0;
     /* Position it at the bottom of the link */
     width: 0;
     /* Initially set the width to 0 */
     height: 2px;
     /* Height of the underline */
     background-color: var(--brand-orange);
     /* Underline color */
     transition: width 0.3s ease;
     /* Animate the width */
 }

 a.styled-link:hover::before {
     width: 100%;
     /* Expand underline to full width on hover */
 }

 a.styled-link:hover {
     color: var(--brand-button-hover);
     /* Change text color on hover */
 }

 sup {
     font-size: 0.65em;
     padding-left: 2px;
 }

 .supporting-links {
     font-size: 0.75em;
     /* Adjust to match <sup> */
     margin-top: 10px;
     margin-bottom: 20px;
     padding-left: 15px;
     /* Optional indent */
     line-height: 1.3;
     /* Adjust to desired spacing, 1.5 is typical for readability */
 }


 strong.highlight {
     color: var(--hyperlink-inline);
     font-weight: bold;
     /* Ensure it remains bold */
 }

 /*
        strong.highlight:hover {
    box-shadow: 0 0 6px rgba(233, 156, 82, 0.6);
}
*/
 .page-grid {
     display: grid;
     grid-template-rows: auto auto auto 1fr;
     grid-template-columns: 1fr;
     height: 100vh;
 }

 .wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     box-sizing: border-box;
 }

 .inner-content {
     max-width: 1440px;
     width: 100%;
     padding: 20px;
     margin: 0 auto;
     box-sizing: border-box;
 }

 .header-wrapper {
     grid-row: 1 / span 1;
     border-top: 6px solid var(--brand-orange);
 }

 .header {
     display: flex;
     justify-content: center;
     align-items: center;
 }


 .logo-wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100px;
     width: 100%;
 }

 .logo-wrapper a {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100%;
     width: 100%;
 }

 .logo-wrapper a img {
     max-height: 100%;
     width: auto;
 }

 .logo-nav {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 50px;
     width: 100%;
 }

 .logo-nav a {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100%;
     width: 100%;
 }

 .logo-nav a img {
     max-height: 100%;
     width: auto;
 }

 strong {
     font-weight: 500;
 }

 .hide-lg-screen {
     display: none;
 }

 .hide-sm-screen {
     display: block;
 }



 .required-text {
     /*    color: #cc0000;*/
     font-weight: bold;
     /*    font-size: .9rem;*/
     font-style: italic;
 }

 .required-text-2 {
     /*    color: #cc0000;*/
     font-weight: bold;
     font-size: .9rem;
     font-style: italic;
 }




 /* General styles for the steps container */
 .final-steps {
     /*    margin: 20px;*/
     padding: 20px;
     /*    background-color: #f9f9f9;*/
     border: 1px solid #cc0000;
     border-radius: 8px;
     font-family: Arial, sans-serif;
 }

 /* Ordered list styles */
 .final-steps ol {
     padding-left: 20px;
     margin-bottom: 20px;
 }

 /* List item styles */
 .final-steps li {
     font-size: .9rem;
     margin-bottom: 10px;
     line-height: 1.1;
     color: #fff;
 }

 /* Sublist item styles */
 .final-steps ul {
     margin-top: 5px;
     margin-bottom: 10px;
     padding-left: 15px;
 }

 .final-steps ul li {
     list-style-type: disc;
     font-size: 0.8rem;
     color: #f2f2f2;
 }

 /* Bold text for step titles */
 .final-steps li strong {
     color: #fff;
     font-size: .8rem;
     font-weight: bold;
 }


 .banner-wrapper {
     grid-row: 2 / span 1;
     padding-top: 0px !important;
     padding-bottom: 0px !important;
 }

 .disclaimer {
     background-color: var(--disclaimer-background);
     color: var(--disclaimer-text);
     padding: 10px 20px;
     font-size: 14px;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: space-between;
     margin: 0 auto;
     box-sizing: border-box;
     max-height: 650px;
     /* Maximum height for the disclaimer */
     overflow-y: scroll;
     /* Enable vertical scrolling */
     overflow-x: hidden;
     /* Prevent horizontal scrolling */

     /* Hide scrollbar in Webkit browsers (Chrome, Safari) */
     scrollbar-width: none;
     /* Firefox */
     -ms-overflow-style: none;
     /* IE and Edge */
 }

 /* Hide scrollbar in Webkit browsers (Chrome, Safari) */
 .disclaimer::-webkit-scrollbar {
     display: none;
     /* Hides the scrollbar */
 }

 .disclaimer .acknowledge-btn {
     background-color: var(--disclaimer-text);
     color: white;
     border: none;
     padding: 5px 10px;
     font-weight: bold;
     cursor: pointer;
     border-radius: 5px;
     align-self: flex-end;
     margin-top: 10px;
 }

 .disclaimer .acknowledge-btn:hover {
     background-color: var(--disclaimer-hover);
 }

 /* Reset default list styling */
 .inner-content ol {
     list-style-position: inside;
     /* Ensures the numbers align with the text */
     padding-left: 0;
     /* Removes default padding from the ol */
     margin-left: 0;
     /* Removes default margin from the ol */
 }

 /* Add padding only to the content of each list item */
 .inner-content ol li {
     padding-left: 15px;
     /* Padding for the content of the list items */
     margin-bottom: 10px;
     /* Adds space between each list item */
 }

 /* Optional: Adjust the appearance of the numbers if needed */
 .inner-content ol li::marker {
     font-weight: bold;
     /* Makes the numbers bold */
 }













 .navbar-wrapper {
     grid-row: 3 / span 1;
 }

 .navbar {
     display: flex;
     justify-content: center;
 }

 nav {
     display: flex;
     gap: 25px;
 }

 .nav-btn {
     font-family: 'Roboto', sans-serif;
     font-weight: 400;
     margin-top: 10px;
     background-color: transparent;
     color: var(--brand-orange);
     border: none;
     border-bottom: 2px solid transparent;
     padding-bottom: 5px;
     cursor: pointer;
     font-size: 22px;
     text-align: center;
 }

 .nav-btn:hover {
     border-bottom: 2px solid var(--brand-orange);
 }

 .nav-btn:focus,
 .read-more-btn:focus {
     outline: 2px solid var(--brand-orange);
     outline-offset: 2px;
 }












 .content-wrapper {
     grid-row: 4 / span 1;
     display: flex;
     justify-content: flex-start;
     align-items: flex-start;
     overflow-y: auto;
     scrollbar-width: none;
     -ms-overflow-style: none;
 }

 .content-wrapper::-webkit-scrollbar {
     display: none;
 }

 .content {
     max-width: 1440px;
     width: 100%;
     padding: 20px;
     display: flex;
     flex-wrap: wrap;
     gap: 40px;
     justify-content: flex-start;
     box-sizing: border-box;
 }













 .card {
     background-color: var(--brand-text-dark);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     padding: 20px;
     text-align: left;
     border-top: 3px solid var(--brand-orange);
     transition: transform 0.3s ease;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     box-sizing: border-box;
     flex-shrink: 1;
 }

 .card .content-wrapper {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: flex-start;
 }

 .card .text-content {
     text-align: left;
     margin-top: 0;
     flex-grow: 0;
     align-self: flex-start;
 }

 .card .card-image {
     float: left;
     margin-right: 20px;
     width: 100%;
     max-width: 350px;
     min-width: 100px;
     height: auto;
 }

/*
 .card .card-video {
     float: left;
     margin-right: 20px;
     width: 100%;
     max-width: 250px;
     min-width: 150px;
     height: auto;
     overflow: hidden;
     border-radius: 50%;
 }
*/

 .card .rumble-video {
     float: left;
     margin-right: 20px;
     width: 100%;
     max-width: 450px;
     min-width: 250px;
     height: auto;
     overflow: hidden;
 }

 /*
.youtube-container {
    display: flex;
    justify-content: left;
    align-items: left;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
}
*/

 .youtube-video {

     float: right;
     width: 100%;
     max-width: 480px;
     aspect-ratio: 16/9;
     margin-left: 20px;
     margin-bottom: 20px;
     height: auto;
     position: relative;
     overflow: hidden;
 }

 .youtube-video iframe {
     aspect-ratio: 16/9;
     position: relative;
     width: 100%;
     height: auto;
     border: 0;
 }

 .card .read-more-btn {
     background-color: transparent;
     color: var(--brand-orange);
     border: none;
     cursor: pointer;
     text-align: center;
     align-self: flex-end;

     font-size: 14px;
 }

 video::-internal-media-controls {
     display: none !important;
     /* Hide browser's default controls */
 }

 .card h4 {

     color: var(--brand-orange);
     font-weight: 400;
     font-size: 16px;
     margin-bottom: 20px;
     margin-top: 35px;

 }

 .card h3 {
     font-family: 'Roboto', sans-serif;
     font-weight: 400;
     font-weight: 00;
     font-size: 22px;
     color: var(--brand-orange);
     margin-bottom: 10px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: normal;
 }

 .form-group {
     display: flex;
     flex-direction: column;
     gap: 10px;
     margin-bottom: 20px;
     width: 100%;
 }



 .form-group input,
 .form-group textarea {
     padding: 12px;
     border: 1px solid var(--brand-text-dark);
     border-radius: 4px;
     font-size: 16px;
     width: 100%;
     /*            background-color: #333;*/
     color: #000000;
     transition: border-color 0.3s ease-in-out;
 }

 .form-group input:focus,
 .form-group textarea:focus {
     border-color: var(--brand-orange);
     outline: none;
 }

 .form-group textarea {
     resize: vertical;
     min-height: 120px;
 }

 .card p {
     font-size: 16px;
     color: var(--brand-text-light);
     margin-bottom: 10px;
 }

 .width-1 {
     min-width: 300px;
     max-width: calc(100% - 0px);
     flex: 1 1 calc(100% - 0px);
 }

 .width-2 {
     flex: 1 1 calc(45% - 0px);
     box-sizing: border-box;
     min-width: 600px;
 }

 .width-3 {
     width: 33.33%;
 }

 .width-4 {
     flex: 1 1 calc(20% - 0px);
     box-sizing: border-box;
     min-width: 250px;
 }



 .section-title {
     font-family: 'Roboto', sans-serif;
     font-weight: 300;
     color: var(--brand-orange);
     width: 100%;
     text-align: left;
     margin: 40px 0 -10px;
 }





 /* Button styles for 'Read More' */
 .card .view-btn {
     background-color: transparent;
     color: white;
     border: none;
     padding: 10px 20px;
     cursor: pointer;
     text-align: center;
     transition: background-color 0.3s ease;
 }

 .card .view-btn:hover {
     background-color: var(--brand-button-hover);
 }

 .text-center {
     font-family: 'Roboto', sans-serif;
     font-weight: 300;
     color: var(--brand-orange);
     width: 100%;
     text-align: center;
     margin: 40px 0 -10px;
 }



 .quote p {
     /*
            color: #4A8DB3;
            color: #AACBE3;
            color: #87CEFA;
            color: #3E5E74;
            color: #739FB7;
            color: #6D6A75;
            color: #D1D1D6;
*/
     color: #B0B0B5;
     font-style: italic;
     font-size: 18px;
 }



 .view-guide {
     color: var(--brand-orange);
     text-decoration: underline;
     cursor: pointer;
     font-size: 16px;
 }

 .view-guide:hover {
     color: var(--brand-orange);
 }


 .generate-btn {
     padding: 12px 24px;
     /* Adds padding inside the button */
     background-color: var(--brand-orange);
     border: none;
     /* Removes default border */
     color: #FFFFFF;
     /* Text color */
     border-radius: 8px;
     /* Rounded corners */
     font-size: 16px;
     /* Increases the font size */
     cursor: pointer;
     /* Adds a pointer cursor on hover */
     transition: background-color 0.3s ease;
     /* Smooth transition for hover effect */
 }

 /* Hover effect */
 .generate-btn:hover {
     background-color: #CC5200;
     /* Slightly darker shade of orange */
 }

 /* Active state */
 .generate-btn:active {
     background-color: #B34700;
     /* Darker shade for active state */
     transform: scale(0.98);
     /* Adds a slight press-down effect */
 }

 /* Focus state */
 .generate-btn:focus {
     outline: none;
     /* Removes default outline */
     box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.5);
     /* Adds a shadow outline */
 }

 label {
     /*    color: var(--brand-orange);*/
     font-weight: bold;
     /* Optional: Makes the text bold */
     font-size: 14px;
     /* Optional: Adjusts the font size */
 }


 /* Flex container for left and right sections */
 .flex-container {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
 }

 /* Left section styling */
 .left-section {
     flex: 1;
     display: flex;
     flex-direction: column;
     min-width: 300px;
 }

 /* Ensuring h3 and p do not stretch */
 .left-section h3,
 .left-section p {
     margin: 0 0 10px 0;
 }

 /* Textarea styling to fill remaining space */
 #impactStatement {
     flex-grow: 1;
     /* Allow textarea to grow and take remaining space */
     min-height: 150px;
     /* Minimum height */
     resize: none;
     /* Disable manual resizing */
     margin-top: 10px;
     /* Space from the paragraph above */
     padding: 10px;
     /* Inner padding for better user experience */
     box-sizing: border-box;
     /* Include padding in the total size */
     width: 100%;
     /* Full width within parent */
     border: 1px solid #ccc;
     /* Border styling */
     border-radius: 5px;
     /* Slightly rounded corners */
     overflow-y: auto;
     /* Handle overflow with scroll */
 }


 ul {
     list-style-position: inside;
     /* Ensures list markers are inside the content */
     padding-left: 20px;
     /* Indentation for the entire list */
     margin-bottom: 15px;
     /* Adds space below the list */
 }

 li {
     margin-bottom: 10px;
     /* Adds space between list items */
     padding-left: 10px;
     /* Further indentation for the list items */
     text-indent: -10px;
     /* Negative indent to pull back the bullet points */
 }

 .left-section h3 {
     margin-top: 0;
 }

 .left-section textarea {
     width: 100%;
     padding: 10px;
     border: 1px solid #ccc;
     border-radius: 4px;
     margin-top: 10px;
 }

 /* Right section styles */
 .right-section {
     flex: 1;
     min-width: 300px;
 }

 /* Hide scrollbar for modern browsers */
 -webkit-scrollbar {
     display: none;
     /* Safari and Chrome */
 }

 .suggestions {
     max-height: 1100px;
     /*            margin-bottom: 50px;*/
     /* Set the maximum height */
     overflow-y: auto;
     /* Enable vertical scrolling */
     -ms-overflow-style: none;
     /* Internet Explorer and Edge */
     scrollbar-width: none;
     /* Firefox */

 }

 .suggestion-frame {
     /*            max-height: 925px;*/
     margin-bottom: 50px;
     /*            overflow-y: auto;*/
     /*            -ms-overflow-style: none;*/
     /*            scrollbar-width: none;*/
 }

 .suggestion-box {
     border: 2px solid #555555;
     /* Change the border color as needed */
     border-radius: 10px;
     /* Rounded corners */
     padding: 15px;
     /* Padding inside the border */
     /*        background-color: #f9f9f9;  */
     margin-bottom: 40px;
 }


 /* Specific style when inside .right-section .sugg-frame */
 .right-section .sugg-frame .suggestions {
     max-height: 625px;
     /* Ensures max-height is retained for this structure */
 }

 /* Keep max-height for .modal .modal-content .sugg-frame .suggestions */
 .modal .modal-content .sugg-frame .suggestions {
     max-height: none;
     /* Remove max-height when inside .right-section .sugg-frame */
 }


 .right-section h3 {
     margin-top: 0;
 }

 .right-section ul {
     list-style-type: none;
     padding-left: 0;
 }

 .right-section li {
     margin-bottom: 10px;
 }


 .leading-statement-title {
     margin-bottom: 10px;
     /* You can adjust the value as needed */
 }

 .lead-para {
     border: 2px solid #555555;
     /* Change the border color as needed */
     border-radius: 10px;
     /* Rounded corners */
     padding: 15px;
     /* Padding inside the border */
     /*        background-color: #f9f9f9;  */
     margin-bottom: 10px;
 }


 .top-instructions {

     margin-bottom: 50px;
 }

 a.theme-link {
     color: var(--brand-orange);
     text-decoration: none;
     font-weight: 400;
     font-size: 14px;
 }

 a.theme-link:hover {
     text-decoration: underline;
 }




 .view-btn:hover {
     background-color: #d88b47;
 }

 .full-width-block {
     color: var(--brand-orange);
     width: 100%;
     text-align: left;
     margin: 40px 0 8px;
 }

 .full-width-block h2,
 .full-width-block h3 {
     font-size: 28px;
     font-weight: bold;
 }


 .modal {
     display: none;
     position: fixed;
     z-index: 1000;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     background-color: rgba(0, 0, 0, 0.8);
     /* Black with opacity */
     color: var(--brand-text-dark);
 }

 .modal-content {
     background-color: #fefefe;
     /*            margin: 5% auto;*/
     padding: 20px;
     border: 1px solid #888;
     /*            width: 90%;*/
     /*            max-width: 800px;*/
     /*            height: 80%;*/
     overflow-y: auto;
     position: relative;
     border-radius: 5px;
     padding-top: 100px;
 }

 .close-button {
     position: absolute;
     top: 10px;
     right: 20px;
     font-size: 30px;
     font-weight: bold;
     color: #aaa;
     cursor: pointer;
 }

 .close-button:hover,
 .close-button:focus {
     color: #000;
     text-decoration: none;
     cursor: pointer;
 }

 .modal-button {
     display: inline-block;
     padding: 5px 0px 5px 0px;
     background-color: var(--brand-orange);
     color: white;
     text-align: center;
     border-radius: 5px;
     cursor: pointer;
     width: 240px;
     float: right;
 }

 .modal-button:hover {
     background-color: var(--brand-button-hover);
 }

 .hide-lg-screen {
     display: none;
 }

 @media (max-width: 768px) {
     .hide-lg-screen {
         display: block;
     }
 }

 .modal-hidden {
     display: none;
 }


 @media (max-width: 1440px) {
     .logo {
         height: 100px;
     }

     .logo-wrapper {
         height: 70px;
     }

     .navbar-spacer {
         min-height: 120px;
     }
 }

 @media (max-width: 1280px) {
     .logo {
         height: 50px;
     }

     .navbar-spacer {
         min-height: 70px;
     }

     .section-title {
         font-family: 'Roboto', sans-serif;
         font-weight: 300;
         color: var(--brand-orange);
         width: 100%;
         text-align: left;
         margin: 0px 0 10px;
     }

 }

 @media (max-width: 1024px) {

     .logo-nav {
         height: 50px;
     }

     .hide-lg-screen {
         display: block;
     }

     .hide-sm-screen {
         display: none;
     }

     .section-title {
         margin-top: 0px;
     }

     .card .card-image {
         width: 200px;
         min-width: 100px;
         background-color: red;
     }
 }

 @media (max-width: 768px) {


     .logo-nav {
         height: 40px;
     }

     .card .card-image {
         width: 200px;
         min-width: 80px;
     }




     .card .rumble-video {
         margin-bottom: 30px;
     }

     .content {
         gap: 20px;
     }


     .youtube-video {

         float: none;
         width: 100%;
         max-width: 768px;
         margin-left: 0px;
     }
 }


 @media (max-width: 668px) {


     .logo-nav {
         height: 30px;
     }

     .card .card-image {
         width: 150px;
         min-width: 80px;
     }

     .width-2 {
         min-width: 360px;
     }
 }

 @media (max-width: 480px) {
     .logo-nav {
         height: 20px;
     }

     .card .video-container {
         display: flex;
         justify-content: center;
         align-items: center;
     }

     .card .card-video {
         float: none;
         align-self: center;
         max-width: 80%;
         height: auto;
         margin: 30px;
     }

     .width-2 {
         min-width: 300px;
     }
 }