:root {
    --dynamic-vh: 1vh;
}
/* 
body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
  } */

.container, .login-container, .onboarding-modal, .edit-modal {
    height: calc(var(--dynamic-vh, 1vh) * 100);
}


@font-face {
    font-family: 'Geist Sans';
    src: url('../fonts/GeistSans-Regular.woff2') format('woff2'),
         url('../fonts/GeistSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Geist Mono';
    src: url('../fonts/GeistMono-Regular.woff2') format('woff2'),
         url('../fonts/GeistMono-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* General styles */

.alert {
    color: red;
    padding:16px;
}

.alert.error {
    /* background-color: #ffcccc; */
    color: red;
    /* padding: 16px; */
    /* margin: 10px 0; */
    /* border: 1px solid red; */
    border-radius: 8px;
    font-size: 14px;
}

.disclaimer a {
    text-decoration: underline;
    color: #000;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: #fff; */
    padding: 8px 16px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white */
    backdrop-filter: blur(10px); /* Blur effect */
    -webkit-backdrop-filter: blur(10px); /* For Safari */
}

.navbar-logo img {
    height: 40px; /* Adjust as needed */
}

.navbar-menu {
    position: relative;
    color:#000;
}


.onboarding-nav {
    display: flex;
    justify-content: space-between;
    height: 60px;

}

.onboard-nav-button {
    background: none;
    color: black;
    width: auto;
    /* padding: 0px;
    height: 60px; */
}

.onboard-nav-button button {
    padding: 0px;
}

.dropdown-header {
    display: flex;
    color: black;
    padding: 16px;
    text-decoration: none;
    text-align: left;
    align-items: center;
    border-bottom: solid 1px #F7F7F7;
    gap: 16px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.80);

}

.dropdown-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
}

.user-avatar {
    border-radius: 50%; /* Circular avatar */
    height: 40px; /* Adjust size as needed */
    width: 40px;
    object-fit: cover; /* Ensures the image covers the area well */
}


.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #fff;
    min-width: 256px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
    z-index: 1;
    border-radius: 16px;
}

.dropdown-content a {
    color: rgba(0, 0, 0, 0.60);
    padding: 16px;
    text-decoration: none;
    display: flex;
    text-align: left;
    gap: 16px;
}

.nav-icon {
    color: rgba(0, 0, 0, 0.48);
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

.dropdown-button:hover {
    opacity: 0.5; /* Adjust the opacity on hover */
    transition: ease-in-out 0.2s;
    background-color: #f1f1f1;

}

.dropdown-button {
    /* background-color: #EBEBEB; */
    color: #787878;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    padding: 8px;
    padding-bottom: 4px;
    transition: ease-in-out 0.2s;

}

.dropdown-button svg {
    stroke-width: 2.6;
}

.dropdown-button i {
    color: #000; /* Replace #yourIconColor with the color for the icon */
}


.dropdown-button:hover .dropdown-content {
    display: block;
}




.fields, .form-group {
    width: 100%; /* Full width */
    box-sizing: border-box; /* Include padding and border in width */
    padding: 0; /* Remove any default padding */
    margin: 0; /* Remove any default margin */
}

/*ONBOARDING STYLES*/

.notif-options-container {
    margin-top: 24px;
}

/* Custom Toggle Switch Style */
.switch {
    position: relative;
    display: inline-block;
    width: 48px; /* Width of the switch */
    height: 24px; /* Height of the switch */
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    transform: translateX(24px); /* Adjusted for new width */
}
  
  /* Adjust the notification option container */
  .notification-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    margin-bottom: 8px;
    background: #f9f9f9;
    border-radius: 8px;
  }
  
  .notification-option span {
    font-size: 16px;
    color: #333;
    font-weight: 600;
  }
  

.sortable-ghost {
    background-color: #e1e1e1; /* Different background for dragging element */
    opacity: 0.7;
}


.draggable-list {
    list-style: none;
    padding: 0;
}

.draggable-item {
    background-color: #f5f5f5; /* Light grey background */
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px 15px;
    margin-bottom: 10px; /* Space between items */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.item-number {
    font-weight: bold;
    margin-right: 10px;
}

.icon-right {
    display: inline-block; /* Or block, depending on your layout */
    width: 24px; /* Width of your icon */
    height: 24px; /* Height of your icon */
    background-image: url('/static/images/sort-icon.png');
    background-size: contain; /* Or cover, depending on how you want it displayed */
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle; /* Aligns icon with your text, if necessary */
    opacity: 0.5;;
}


.access-denied-container {
    padding: 0px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}


.onboarding-modal {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 92px); /* Subtract the height of the onboarding-nav */
}


.container-onboarding {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Keep this to space out the content and CTA */
    height: 100%;
    padding: 16px;
}

.edit-modal {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 44px); /* Subtract the height of the onboarding-nav */
}

/* .edit-subhead p {
    font-weight: 500 !important;
} */


.container-edit {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Keep this to space out the content and CTA */
    height: 100vh;
    padding: 16px;
}

.onboarding-body, .onboarding-biz-body {
    margin-bottom: auto; /* Pushes CTA to the bottom */
}

.onboarding-CTA-container {
    margin-top: auto; /* Ensures it sticks at the bottom */
}

.onboarding-body {
    /* other styles */
    margin-bottom: auto; /* Pushes everything else down */
    text-align: left;
}

.onboarding-biz-body, .onboarding-body {
    text-align: left;
}


.onboarding-biz-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.biz-body-copy p {
    font-weight: 400;
}

.onboarding-biz-body p {
    margin-top: 4px;
    font-weight: 400;
}

.onboarding-biz-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* height: 100%; */
}

.biz-info-wrapper {
    /* Styles for the new wrapper div */
    flex-grow: 1; /* Allows this div to take up all available space */
}


.onboarding-CTA-container {
    margin-top: auto; /* Pushes it to the bottom */
    margin-bottom: 16px; /* Add some space at the bottom */
    /* padding: 0 16px; */
   
}

.edit-CTA-container {
    margin-top: auto; /* Pushes it to the bottom */
    margin-bottom: 16px; /* Add some space at the bottom */
    /* padding: 0 16px; */
   
}

.modal-step {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distributes space between items */
    height: 100%; /* Takes full height of the parent */
}


.onboarding-body p {
    margin-top: 4px;
}


/* Business Info Step Styles */
.form-group {
    /* margin-bottom: 20px;  */
    width: 100%;
    /* width: 100%; */
    display: flex;
    width: 100%;
    flex-direction: column;
}


/* Text Input and Textarea Styling */
.form-group input[type="text"], .form-group textarea {
    width: calc(100% - 34px); /* Full width minus padding */
    padding: 16px; /* Padding inside the text field */
    margin: 8px 0; /* Margin for spacing */
    border-radius: 8px; /* Border radius */
    border: 1px solid #ccc; /* Light grey border */
    font-size: 16px; /* Text size */
    color: #333; /* Text color */
}

/* Placeholder Text Styling */
.form-group input[type="text"]::placeholder,
.form-group textarea::placeholder {
    color: #aaa; /* Grey color for placeholder text */
}

/* Textarea Specific Styling */
.form-group textarea {
    height: 100px; /* Adjust the height as needed */
    resize: vertical; /* Allow vertical resize only */
    font-family: inherit; /* This will make it use the body's font */
    font-size: 16px; /* Match the font size of paragraphs */
}





/* Avatar Container Styles */
.avatar-upload-container {
    display: flex;
    align-items: left;
    justify-content: space-between;
    /* padding: 16px; */
    flex-direction: column;
    max-width: 100%; /* Ensure it fits within the screen */
    margin-top: 16px;

  }
  
  .avatar-upload-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border: 1px solid lightgrey;
    margin-top: 8px;
    border-radius: 8px;
  }
  
  .avatar-preview {
    width: 48px; /* Size of the avatar preview */
    height: 48px;
    border-radius: 50%; /* Circular preview */
    background-color: #D9D9D9; /* Placeholder color */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-size: cover; /* Ensure the image covers the full area */
    background-position: center; /* Center the image */
}

#avatar-placeholder {
    background-image: url('/static/images/avi-placeholder.png');
}

#avatar-button {
    padding: 16px;
    width: 108px;
    font-size: 14px;
    background-color: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.50);
}
  
  /* Hidden File Input */
  .hidden {
    display: none;
  }
  
  /* Upload Button - Initially visible */
  .upload-button {
    border: none;
    background-color: #e0e0e0;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 4px;
    margin-left: auto; /* Push it to the right */
  }
  
  /* When an image is uploaded, JS adds this class to hide the Upload button */
  .upload-button.hide {
    display: none;
}

.remove-button {
    display: none;
    /* Same styles as upload-button */
}

.remove-button.show {
    display: inline-block;
    /* More styles if needed */
}

/* ACCOUNT STYLES*/

.member-snippet {
    display: flex;
    align-items: center;
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
    gap: 16px;
    margin-top: 24px;
}

.member-snippet img {
    width: 48px;
    height: 48px;
}


.member-details .user-name {
    font-weight: 500;
    font-size: 18px;
    margin-top: 0px;
    opacity: 1;

}

.member-details .member-since {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 0px;


}

.resources-account {
    margin-top: 20px;
}

.resource-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 16px 0;
}

.resource-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: black;
}

.resource-link span {
    font-size: 16px;
}

.account-icons {
    color: rgba(0, 0, 0, 0.24);
}



.onboarding-CTA-container .delete-account-action {
    background-color: #D94E4E;
}

.onboarding-CTA-container .delete-confirm {
    color: #D94E4E;
    background-color: white;
    margin-top: 8px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0);
}



html {
    height: -webkit-fill-available;
    margin: 0;
}


body {
    background-color: #fff;
    color: #333;
    font-family: 'Geist Sans', sans-serif;
    line-height: 1.6;
    margin: 0;
    text-align: center;
    min-height: -webkit-fill-available;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

code, pre {
    font-family: 'Geist Mono', monospace;
    /* other styles */
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100vh - 56px); /* Adjust height to account for navbar height */
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
    overflow-y: auto; /* Add scroll for overflow content */
}

.login-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* height: calc(100vh - 0px);  */
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
    overflow-y: auto; /* Add scroll for overflow content */
}

.login-body {
    flex-grow: 1; /* Allow this div to grow and take available space */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Center content */
}

.prop-body .prop {
    text-align: left;
    width: 100%;
    margin-top: 8px;
    z-index: -1;
}

.prop-body {
    flex-grow: 1; /* Allow this div to grow and take available space */
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center; /* Center content */
}

.report-body {
    flex-grow: 1; /* Allow this div to grow and take available space */
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center; /* Center content */
    z-index: -1;
}

.report-heading {
    text-align: left;
    width: 100%;
    padding-bottom: 8px;
}

#gif-loader {
    text-align: center;
    margin: 20px 0;
}

#gif-loader img {
    max-width: 100%; /* Ensures the image doesn't exceed the container width */
    width: 100%; /* Adjust this value to control the size of the GIF */
    height: auto; /* Maintains the aspect ratio of the GIF */
}

#gif-loader, #submit-button {
    transition: all 140ms ease-in-out;

}

.beta-access-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.CTA-beta-container {
    margin-bottom: 16px;
}

.beta-access-content img {
    width: 116px;
    height: 116px;
}

.denied-vis {
    display: flex;
    justify-content: center;
    padding-bottom: 16px;
}


.login-vis {
    width: 64%; /* Full width for mobile */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 20px; /* Adjust as needed for mobile layout */
}


#insights {
    text-align: left;
    max-width: 100%;
    justify-content: center;
    display: flex;
    
}



.insights-container {
    border-radius: 16px;
    width: 100%;
}


#date-range-header {
    color: #000;
    /* font-family: Geist; */
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.5px;
    opacity: 0.32;
    position: relative;
    /* padding: 0px; */
    margin: 0 auto;
    padding-top: 4px;
    z-index: -1;
}


h1 {
    color: #000;
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: 2px;
    margin-top: 4px;
    width: 100%;
    font-family: 'Geist Sans', sans-serif;

}

p {
    opacity: 0.64;
}

ul, p, select, label {
    font-size: 16px;
    margin-bottom: 0px;
    font-family: 'Geist Sans', sans-serif;

}

.disclaimer {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.5);
}

/* Form styling */
form {
    /* margin: 20px 0; */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 0px;
    gap: 16px;
}

label {
    margin-right: 10px;
}

.fields {
    width: 100%;
}

#date-range-picker {
    display: flex;
    gap: 16px;
    width: 100%;
    padding-top: 24px;
    padding-bottom: 16px;

}

#start-date, #end-date {
    padding: 0px 40px 0px 16px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 16px;
    height: 52px;
    width: 100%;
    background-color: #fff;
    cursor: pointer;
    display: flex;
}

select option[value=""][disabled] {
    color: grey;
}

/* Custom styles for the select element */
select {
    color: #000;
    padding: 12px 40px 12px 16px; /* Increased right padding for icon space */
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);    
    font-size: 16px;
    height: 52px;
    width: 100%;
    background-color: #fff;
    /* margin: 16px 0; */
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('/path/to/arrow-image.svg'), url('data:image/svg+xml;utf8,<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M35 55l35 35 35-35z"/></svg>');
    background-position: right 10px center, right 15px center;
    background-size: 20px, 15px;
    background-repeat: no-repeat;
}

/* Style for the placeholder */
.select-placeholder {
    color: #757575;
}

/* Style to reset color when an option is selected */
.select-placeholder option {
    color: black;
}


.custom-select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.custom-select-wrapper i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

button, input[type="submit"], .button-disabled {
    transition: background-color 140ms ease-in-out, color 140ms ease-in-out;
}

.button-disabled {
    background-color: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.24);
    cursor: not-allowed;
}

/* Make sure your disabled button styling is specific enough to override any other button styles */
.onboarding-CTA-container button.button-disabled {
    background-color: rgba(0, 0, 0, 0.08) !important; /* Using !important to ensure override */
    color: rgba(0, 0, 0, 0.24) !important;
    cursor: not-allowed;
}




button, input[type="submit"] {
    padding: 16px;
    border-radius: 8px;
    border: none;
    width: 100%;
    background-color: #1e1e1e;
    color: white;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
}




input[type="submit"]:disabled {
    background-color: rgba(0, 0, 0, 0.08);;
    color: rgba(0, 0, 0, 0.24); /* Optional: change text color for disabled state */
    cursor: not-allowed;
}

/* Ensure that hover effects do not apply to disabled buttons */
input[type="submit"]:disabled:hover {
    background-color: rgba(0, 0, 0, 0.08);;
    color: rgba(0, 0, 0, 0.24); /* Maintain the text color of the disabled state */
}

/* Insights and loader styling */
#insights h2 {
    margin: 20px 0;
    color: #000;
}

#loader {
    font-style: italic;
    color: #7F8C8D;
}

#dots {
    font-weight: bold;
}

/* Footer styles */
footer {
    margin-top: 40px;
    color: #7F8C8D;
}

/* Additional styles for new sections */

.key-insights {
    border-radius: 8px;
    margin-bottom: 20px;
}

.key-insights .grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Set two columns */
    gap: 16px;
}

.key-insights .insight-item {
    background: #FFFFFF;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.key-insights .insight-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.72);
}

.key-insights .insight-data {
    font-size: 28px;
    font-weight: 300;
}

.key-insights .insight-comment {
    font-size: 14px;
    line-height: 1.3;
    color: rgba(0, 0, 0, 0.5);
}


.actionable-strategies {
    border-radius: 8px;
    margin-bottom: 20px;
}

.strategy-item {
    padding: 16px;
    display: flex;
    margin-bottom: 16px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0px 0px 8px -2px rgba(0, 0, 0, 0.16);
    align-items: center;
}

.summary, .key-insights, .actionable-strategies {
    padding-bottom: 16px;
}


.summary h3, .key-insights h3, .actionable-strategies h3 {
    color: #000;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 500;
}

/* existing styles */


.strategy-emoji {
    /* Styles for the emoji */
    font-size: 24px;
    margin-right: 16px;
}

.strategy-text {
    /* Styles for the strategy text */
    font-size: 14px;
    line-height: 1.3;
    color: rgba(0, 0, 0, 0.5);
}

.strategy {
    display: flex;
}








/* Responsive styles for desktop */
@media screen and (min-width: 768px) {
    .ob-html {
        display: flex;
        justify-content: center;
        height: -webkit-fill-available;

    }

    .body {
        background-color: #fff;
        color: #333;
        font-family: 'Helvetica Neue', Arial, sans-serif;
        line-height: 1.6;
        margin: 0;
        text-align: center;
        min-height: 100vh; /* Ensure it covers at least the entire viewport */
        min-height: -webkit-fill-available;
        position: relative;

    }

    .ob-body {
        display: flex;
        flex-direction: column;
        justify-content: center;

    }
    
    .container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 800px;
        padding: 16px;
        box-sizing: border-box;
        margin: 0 auto;
    }

    .onboarding-nav {
        width: 800px;

    }

    .container-onboarding {
        display: block;
    }

    .onboarding-modal {
        height: 800px;
        width: 800px;
    }

    .onboarding-CTA-container {
        display: flex;
        margin-top: 24px;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        
    }

    .login-container {
        justify-content: center;
    }

    .login-body {
        flex-grow: 0;
        padding-bottom: 40px;
    }



    .draggable-list {
        padding-top: 24px;
    }

    .onboarding-biz-body p {
        /* font-weight: 500; */
    }


    .biz-info-wrapper {
        /* Styles for the new wrapper div */
        width: 100%;
    }

    .edit-CTA-container {
        display: flex;
        justify-content: left;
    }

    .edit-modal {
        width: 800px;
    }

    .beta-access-content {
        height: auto;
        padding-bottom: 32px;
    }

    h1 {
        color: #000;
        font-size: 40px;
        line-height: 1.2;
        margin-bottom: 4px;
        margin-top: 0px;
    }

    .login-vis {
        /* Styles for the image itself */
        width: 50%; /* Make the image expand to fill its container */
        height: auto; /* Maintain the aspect ratio */

    }

    .navbar {
        padding: 8px 84px;
    }

    .dropdown-button {
        width: 40px;
    }
    

    .prop-body {
        /* justify-content: center; */
    }


    .insights-container {
        width: 100%; /* Use full width of the container */
        border-radius: 16px;
    }

    /* Adjusting form and button sizes for desktop */
    button, select, input[type="submit"] {
        /* padding: 24px; */
        font-size: 16px;
        width: 240px;
    }

    /* Adjusting the font size for list items */
    ul, p, select, label {
        font-size: 16px;
        width: 100%;
    }

    .disclaimer {
        font-size: 14px;
        line-height: 1.3;
        font-weight: 500;
        width: 100%;
        max-width: 524px;
        display: block;
        margin: 0 auto;
        padding-top: 16px;
    }

    /* Additional styles for insights sections */
    .summary, .key-insights, .actionable-strategies {
        margin-bottom: 30px;
    }

    .summary h3, .key-insights h3, .actionable-strategies h3 {
        margin-bottom: 15px;
    }

    /* Strategy section adjustments */
    .strategy-emoji {
        font-size: 24px; /* Larger emoji size */
    }

    .strategy-text {
        font-size: 18px; /* Larger text size for readability */
    }

    .strategy {
        align-items: center; /* Align items vertically */
        margin-bottom: 10px; /* Spacing between strategy items */
    }

    /* Footer style adjustments */
    footer {
        font-size: 1.2em;
    }
}