body, h1, p, button {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}




/* ============================
   DESKTOP-ONLY FIXED WIDTHS
   ============================ */
@media (min-width: 769px) {

    #works_supervisor,
    #supervisor_phone,
    #supervisor_email,
    #direct_employer,
    #person_responsible_for_swms_review {
        width: 250px;
    }

    #date_swms_to_be_reviewed {
        width: 150px;
    }

    #site_locations {
        width: 80%;
        height: 20px;
        padding: 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 18px;
    }
}

/* ============================
   SIGNATURE TABLE – DESKTOP
   ============================ */
@media (min-width: 769px) {

  /* Restore real table layout */
  table.signature-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
  }

  table.signature-table thead {
    display: table-header-group;
  }

  table.signature-table tbody {
    display: table-row-group;
  }

  table.signature-table tr {
    display: table-row;
  }

  table.signature-table th,
  table.signature-table td {
    display: table-cell;
    vertical-align: top;
    padding: 12px;
    border: 1px solid #ddd;   /* 🔑 RESTORE BORDERS */
  }

  table.signature-table th {
    background: #f2f2f2;
    font-weight: bold;
    text-align: left;
  }

  /* Column widths (matches your original working layout) */
  .signature-table .sig-col  { width: 500px; }
  .signature-table .pos-col  { width: 400px; }
  .signature-table .date-col { width: 200px; }

  /* Hide mobile-only labels */
  .mobile-label {
    display: none;
  }

  /* Signature canvas */
  .signature-pad {
    width: 500px;
    height: 120px;
    border: 1px solid #ccc;
  }

  /* Controls layout */
  .signature-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
  }

  /* Inputs */
  .signature-name-input {
    width: 388px;
    height: 42px;
    font-size: 18px;
  }

  .signature-position-input {
    width: 300px;
    height: 42px;
    font-size: 18px;
  }

  .signature-date-input {
    width: 180px;
    height: 42px;
    font-size: 16px;
  }

  /* Buttons */
  .signature-clear-btn,
  .date-time-stamp-button {
    height: 42px;
    font-size: 16px;
    margin-bottom: 20px;
    padding: 8px 14px;
    width: auto;
  }
  /* Override global input margins inside signature table */
    .signature-table .signature-name-input,
    .signature-table .signature-position-input,
    .signature-table .signature-date-input {
        margin-bottom: 20px;
    }
    
    .genswms-container .signature-table input.signature-position-input {
        width: 330px;
        max-width: 330px;
    }

    /* Force Date/Time input width inside signature table */
    .genswms-container .signature-table input.signature-date-input {
        width: 250px;
        max-width: 250px;
        display: inline-block;
    }
}

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

div#page-wrapper {
    width: 97%;
    padding: 5px;
}

.hero-bg {
    width: 100%;
    background: linear-gradient(135deg, Blue);
}


header img {
    height: 40px;
}

.header-buttons {
    display: flex;
    gap: 15px;
}

.header-buttons button {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: white;
    color: black;
    transition: background-color 0.3s, color 0.3s;
}

.hero-heading {
    font-size: 2.8rem;
    line-height: 1.2;
    color: #fff;
}

/* Visible window */
.animated-word-wrapper {
    display: inline-block;
    height: 1.2em;
    overflow: hidden;
    vertical-align: bottom;
    margin: 0 px;
}

/* Stack */
.animated-word-stack {
    display: block;
    animation: stepWords 9s ease-in-out infinite;
}

/* Individual words */
.animated-word-stack span {
    display: block;
    height: 1.2em;
    font: inherit;
    color: inherit;
}

/* Pause → slide → pause */

@keyframes stepWords {
    /* Business */
    0%   { transform: translateY(0); }
    18%  { transform: translateY(0); }

    /* People */
    26%  { transform: translateY(-1.2em); }
    44%  { transform: translateY(-1.2em); }

    /* Workplace */
    52%  { transform: translateY(-2.4em); }
    70%  { transform: translateY(-2.4em); }

    /* Mind */
    78%  { transform: translateY(-3.6em); }
    92%  { transform: translateY(-3.6em); }

    /* Duplicate Business (hidden reset) */
    100% { transform: translateY(-4.8em); }
}

/* SECTION */
.audience-section {
    background: #f7f8fa;
    padding: 20px 30px;
}

/* GRID */
.audience-container {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* CARD BASE */
.audience-card {
    position: relative;
    color: #ffffff;
    padding: 28px;
    border-radius: 18px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* IMAGE LAYER */
.audience-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1);
    transition: transform 0.6s ease;
    filter: contrast(1.1) brightness(1.1);
    z-index: 1;
}

/* BLUE → BLACK GRADIENT OVERLAY */
.audience-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(76, 176, 243, 0.18) 0%,   /* very light blue tint */
        rgba(124, 167, 247, 0.35) 30%,  /* gentle blue */
        rgba(78, 156, 245, 0.65) 55%,     /* deeper blue */
        rgba(3, 27, 241, 0.95) 100%        /* dark for text */
    );

    z-index: 2;
}



/* TEXT ABOVE OVERLAY */
.audience-card h3,
.audience-card p {
    position: relative;
    z-index: 3;
}

/* TEXT STYLES */
.audience-card h3 {
    font-size: 1.8rem;
    font-weight: 1000;
    margin-bottom: 0.6rem;
}

.audience-card p {
    font-size: 1.1rem;
    line-height: 1.5;
    opacity: 0.95;
}

/* HOVER EFFECT */
.audience-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}

.audience-card:hover::before {
    transform: scale(1.05);
}

.outlined-text {
    color: #000;
    font-weight: 1000;               /* ⬅ thicker black */
    
}




/* RESPONSIVE */
@media (max-width: 1024px) {
    .audience-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .audience-container {
        grid-template-columns: 1fr;
    }

    .audience-card {
        min-height: 240px;
    }
}


.card-survey::before {
    background-image: url("/static/images/small-business.jpg");
}
.card-policies::before {
    background-image: url("/static/images/psychosocial_policies_page_1.jpg");
}
.card-analytics::before {
    background-image: url("/static/images/Personal_User_Analytics1.png");
}

.card-action-plans::before {
    background-image: url("/static/images/Wellbeing_Action_Plan_Page_1.png");
}

.card-medium::before {
    background-image: url("/static/images/Managers_Guide_Page_1.png");
}

.card-saved-docs::before {
    background-image: url("/static/images/Save_Docs_Files.png");
}

.card-incident::before {
    background-image: url("/static/images/Psychosocial_Incident_Report_Page_11.png");
}
.card-expand-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 4;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, transform 0.25s ease;
}

.card-expand-btn:hover {
    background: rgba(11, 44, 255, 0.85);
    transform: scale(1.1);
}

.image-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.image-lightbox.active {
    opacity: 1;
    pointer-events: auto;
}

.image-lightbox-content {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
}

.image-lightbox-content img {
    width: 100%;
    height: auto;
    display: block;
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 28px;
    color: #fff;
    cursor: pointer;
    z-index: 10000;
}

/* DOCUMENT LIGHTBOX */
#docLightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#docLightbox.active {
    opacity: 1;
    pointer-events: auto;
}

.image-viewer {
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px;
    background: #111;
    border-radius: 18px;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);

    display: flex;
    flex-direction: column;
    align-items: center;
}

.image-viewer img {
    display: block;
    margin: 0 auto 24px auto;

    /* 🔥 KEY QUALITY FIXES */
    width: auto;
    max-width: 100%;
    height: auto;

    /* Keep text crisp */
    image-rendering: auto;

    user-select: none;
    pointer-events: none;
}

.how-it-works-section {
    background: #ffffff;
    padding: 80px 20px;
}

.how-it-works-container {
    max-width: 1240px;
    margin: 0 auto;
    text-align: center;
}

.how-it-works-container h2 {
    font-size: 2.3rem;
    font-weight: 800;
    color: #faf9f9;
    margin-bottom: 1rem;
    margin-top: 1rem;
    padding-top: 2rem;
}

.how-it-works-intro {
    max-width: 1000px;
    margin: 0 auto 3rem;
    font-size: 1.25rem;
    line-height: 1.6;
    color: #faf9f9;
}

.how-it-works-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    text-align: left;
}

.how-step {
    background: #f7f8fa;
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 3rem;
}

.how-step i {
    font-size: 2.3rem;
    
    color: #007bff;
    margin-bottom: 1rem;
    display: block;
    text-align: center;
}


.how-step h3 {
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.75rem;
}

.how-step p {
    font-size: .98rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    color: #333;
}

.how-step ul {
    padding-left: 1.2rem;
    margin: 0;
}

.how-step ul li {
    font-size: .98rem;
    margin-bottom: 0.4rem;
}

.how-note {
    font-size: 0.85rem;
    color: #555;
    margin-top: 0.5rem;
}

@media (max-width: 900px) {
    .how-it-works-steps {
        grid-template-columns: 1fr;
    }
}

/* =========================
   FOOTER (SOLID BLUE, NO WHITE BOX)
========================= */

.site-footer {
    background: #0000ff;
    color: #ffffff;
    margin-top: 0px;
    font-size: 18px;
}

/* IMPORTANT: prevent any “card/white” styles leaking into footer */
.site-footer * {
    background: transparent !important;
}

/* 1200px aligned inner grid */
.site-footer .footer-container {
    min-width: 1200px;
    margin: 0;
    padding: 60px 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
}

/* LINKS AREA */
.site-footer .footer-links {
    display: flex;
    gap: 80px;
    flex-wrap: wrap;
}

.site-footer .footer-column h4 {
    color: #ffffff;
    font-size: 26px;
    margin: 0 0 14px 0;
}

.site-footer .footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer .footer-column li {
    margin-bottom: 12px;
}

.site-footer .footer-column a {
    color: #ffffff;
    text-decoration: none;
    font-size: 22px;
    transition: color 0.2s ease;
}

.site-footer .footer-column a:hover {
    color: orange;
}

/* SOCIAL */
.site-footer .footer-social {
    text-align: right;
    min-width: 180px;
}

.site-footer .footer-social h4 {
    color: #ffffff;
    font-size: 26px;
    margin: 0 0 14px 0;
}

.site-footer .social-icons {
    display: flex;
    gap: 14px;
    justify-content: flex-end;
}

.site-footer .social-icons a {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 20px;
    transition: transform 0.2s ease, background 0.2s ease;
}

.site-footer .social-icons a:hover {
    background: #38b6ff !important;
    transform: translateY(-2px);
}

/* BOTTOM BAR */
.site-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    padding: 26px 20px;
    text-align: center;
    font-size: 18px;
}

.site-footer .footer-bottom p {
    margin: 8px 0;
    color: #ffffff;
}

.site-footer .acknowledgement {
    max-width: 1200px;
    margin: 0 auto 10px;
    line-height: 1.6;
}
.site-footer .footer-container {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ==========================================
   HERO BG – INVERTED VERSION (THIS PAGE ONLY)
   ========================================== */

.hero-bg-inverted {
    background: #ffffff;
}

/* Headings & intro text */
.hero-bg-inverted h2,
.hero-bg-inverted .how-it-works-intro {
    color: #000000;
}

/* Step cards */
.hero-bg-inverted .how-step {
    background: #ffffff;
    color: #000000;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Card headings */
.hero-bg-inverted .how-step h3 {
    color: #000000;
}

/* Icons */
.hero-bg-inverted .how-step i {
    color: #000000;
}

/* Paragraphs & lists */
.hero-bg-inverted .how-step p,
.hero-bg-inverted .how-step li {
    color: #000000;
}

/* Notes */
.hero-bg-inverted .how-note {
    color: #333333;
}

/* Remove any inherited blue overlays/gradients */
.hero-bg-inverted::before,
.hero-bg-inverted::after {
    display: none;
}
/* ==========================================
   HERO BG INVERTED – BLUE HOW-STEP CARDS
   ========================================== */

.hero-bg-inverted .how-step {
    background: #0a1cff; /* brand blue */
    color: #ffffff;
}

/* Headings */
.hero-bg-inverted .how-step h3 {
    color: #ffffff;
}

/* Icons */
.hero-bg-inverted .how-step i {
    color: #ffffff;
}

/* Paragraphs & list items */
.hero-bg-inverted .how-step p,
.hero-bg-inverted .how-step li {
    color: #ffffff;
}

/* Optional: softer note text */
.hero-bg-inverted .how-step .how-note {
    color: #e5e7eb;
}

.quick-start-heading {
    color: #ffffff;
}


.header-buttons button:hover {
    background-color: lightgrey;
    color: blue;
    border: 1px solid lightgrey;
}


/* Risk Score Color Coding */
.low-risk {
    background-color: #98FB98 !important; /* Light Green */
    color: black !important;
}
.medium-risk {
    background-color: #FFD700 !important; /* Gold */
    color: black !important;
}
.high-risk {
    background-color: #FFA500 !important; /* Orange */
    color: black !important;
}
.extreme-risk {
    background-color: orange !important; /* Red */
    color: white !important;
}

.container, .pricing-content-container {
    display: flex;
	max-width: 1200px;
	margin: 20px auto;
	padding-top: 5px;
	padding: 20px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	flex-direction: row;
}

.hero-section {
    max-width: 1200px;
    margin: 0px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 80px 20px;
    background-color: blue;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
}

.hero-text {
    max-width: 50%;
    padding-right: 20px;
}

.hero-text h1 {
    font-size: 3em;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.2;
    color: #ffffff;
}

.hero-text p {
    font-size: 1.2em;
    margin-bottom: 20px;
    color: #ffffff;
}

.hero-button {
    padding: 15px 30px;
    font-size: 1em;
    color: #fff;
    background-color: #007BFF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    animation: glow 2s infinite alternate;
}

@keyframes glow {
    0% {
        background-color: #FF4500; /* Orange */
        box-shadow: 0 0 10px #FF4500;
    }
    100% {
        background-color: #ff0055; /* Blue */
        box-shadow: 0 0 20px #00ff55;
    }
}

.hero-button:hover {
    background-color: #0056b3;
    animation: none; /* Stops the animation on hover */
}

.hero-image {
    max-width: 45%;
}

.hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.promo-video {
    text-align: center;
    margin: 40px auto;
}

.promo-video h2 {
    font-size: 2em;
    margin-bottom: 20px;
    color: #333;
}

.promo-video .video-container {
    position: relative;
    width: 100%;
    max-width: 800px; /* Keep your desired max width */
    height: 450px;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}


.promo-video .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px;
}

.features-section {
    max-width: 1200px;
    margin: 50px auto;
    padding: 20px 20px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.features-section h2 {
    text-align: center;
    font-size: 2.0em;
    margin-bottom: 20px;
}

.feature-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    padding: 0;
}

.feature-item {
    flex-basis: 30%;
    margin-bottom: 15px;
    background-color: #007BFF;
    color: white;
    padding: 10px 10px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}

.feature-item h3 {
    font-size: 1.1em;
    margin-left: 8px;
}

.feature-item i {
    font-size: 1.5em;
    margin-right: 10px;
}

.additional-features {
    text-align: center;
    margin-top: 40px;
}

.additional-feature-boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-box {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.feature-box i {
    font-size: 2em;
    color: #007BFF;
}

.feature-box h3 {
    margin-top: 10px;
    font-size: 1.2em;
}

.feature-box p {
    font-size: 1em;
    margin-top: 10px;
}
.faq-section {
    margin-top: 40px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    width: 100%;
}

.faq-question {
    font-size: 1.2em;
    font-weight: bold;
    background-color: #C4C4D4;
    padding: 15px;
    margin: 10px 0;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-answer {
    display: none;
    font-size: 1em;
    padding: 15px;
    margin: 10px 0;
    background-color: #fff;
    border-left: 5px solid #007BFF;
    border-radius: 5px;
}

.faq-answer.show {
    display: block;
}

.faq-plus {
    font-size: 1.5em;
    color: #007BFF;
    font-weight: bold;
}

.subscription-info {
    text-align: center;
    font-size: 1.2em;
    color: #007BFF;
    margin-top: 0px;
    margin-bottom: 30px;
}

.subscription-form {
	flex: 1;
	background-color: #fff;
	padding: 20px;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	text-align: left;
	max-width: 400px;
}

.subscription-form h1 {
	font-size: 2.5em;
	font-weight: bold;
	color: #007BFF;
	margin-bottom: 20px;
}

.subscription-form input[type="email"] {
	width: 100%;
	padding: 15px; /* Adjusted padding to match button height */
	margin-bottom: 20px;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 1.1em;
	box-sizing: border-box; /* Ensures padding does not affect width */
}

.subscription-form button {
	width: 100%;
	padding: 15px; /* Same padding as the input for alignment */
	font-size: 1.1em;
	color: white;
	background-color: #007BFF;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	box-sizing: border-box; /* Ensures padding does not affect width */
}

.submit-button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
}

.submit-button:hover {
    background-color: #0056b3;
}


.subscription-form button:hover {
	background-color: #0056b3;
}

.subscription-image {
	max-width: 600px;  /* Increased the width of the image container */
	display: flex;
	align-items: center;
}

.subscription-image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	transform: scale(1.0);  /* Enlarges the image */
	margin: auto;
}

/* Terms and Conditions at the bottom of the page */
.terms-container {
	max-width: 1200px;
	margin: 100px auto 40px auto; /* Added 100-pixel gap above */
	padding: 0 300px; /* Add a 300-pixel margin on the sides */
	font-size: 0.75em; /* Smaller font size for terms and conditions */
	color: #555;
	text-align: center;
}

.terms-container a {
	color: #007BFF;
	text-decoration: none;
}

.terms-container a:hover {
	text-decoration: underline;
}

.terms-summary {
    width: 100%;
}

/* Flash message styling */
.flashes {
	list-style: none;
	padding: 10px;
	margin: 20px 0;
}

.flashes li {
	margin: 5px 0;
	padding: 10px;
	border-radius: 5px;
	color: white;
	background-color: #e74c3c;
}

.alert {
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid transparent;
	border-radius: 4px;
	font-size: 16px;
	font-weight: bold;
}

.alert-success {
	color: #155724;
	background-color: #d4edda;
	border-color: #c3e6cb;
}

.alert-danger {
	color: #721c24;
	background-color: #f8d7da;
	border-color: #f5c6cb;
}

.alert-info {
	color: #0c5460;
	background-color: #d1ecf1;
	border-color: #bee5eb;
}



/* Timeline styles */
.timeline-container {
	width: 100%;
	max-width: 1200px;
	margin: 30px auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.timeline-step {
	flex: 1;
	text-align: center;
	position: relative;
}

.timeline-step::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 4px;
	background-color: #ddd;
	z-index: -1;
	transform: translateX(-50%);
}

.timeline-step span {
	display: inline-block;
	padding: 10px 20px;
	border-radius: 50px;
	background-color: #ddd;
	color: #555;
	font-weight: bold;
	transition: background-color 0.3s, color 0.3s;
}

.timeline-step.active span {
	background-color: #007BFF;
	color: white;
}

.timeline-step:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -50%;
	width: 100%;
	height: 4px;
	background-color: #ddd;
	z-index: -1;
}

.timeline-step.active ~ .timeline-step span {
	background-color: #ddd;
	color: #555;
}

/* Form box */
.mypw-container {
    max-width: 400px;
    margin: 40px auto;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.mypw-container h1 {
    color: #007BFF;
    font-size: 1.8em;
    margin-bottom: 20px;
}

.mypw-container label {
    display: block;
    text-align: left;
    font-weight: bold;
    margin-bottom: 5px;
}

.mypw-container input[type="email"],
.mypw-container input[type="password"] {
    width: calc(100% - 20px); /* 20px smaller width */
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1.1em;
    display: block;
    margin-left: auto; /* Center the fields */
    margin-right: auto; /* Center the fields */
}




/* Plans Styles*/

.plan-box, .details-form {
	flex: 1;
}

.plan-box {
	background-color: #fff;
	padding: 20px;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	text-align: center;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 400px;
	margin:0 10px;
}

.plan-box h2 {
	font-size: 2em;
	color: #007BFF;
	margin-bottom: 15px;
}

.plan-box p {
	font-size: 1.1em;
	color: #555;
	margin-bottom: 20px;
}

.plan-price {
	text-align: center;
	line-height: 1;
	margin-bottom: 20px;
}

.plan-price .from {
	font-size: 1em;
	font-weight: bold;
	margin-bottom: 5px;
}

.plan-price .currency {
	font-size: 1.5em;
	vertical-align: top;
	margin-right: 2px;
	margin-top: 0.3em;
}

.plan-price .amount {
	font-size: 3em;
	font-weight: bold;
	color: black;
	line-height: 1;
}

.plan-price .details {
	font-size: 1.2em;
	line-height: 1.2em;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-left: -3px;
}

.plan-price .details .decimals {
	font-size: 0.9em;
}

.plan-price .details .per {
	color: #666;
	font-size: 0.9em;
}

.details-form {
	background-color: #fff;
	padding: 60px 50px 50px 50px;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	text-align: left;
	max-width: 470px;
}

.details-form h1 {
	font-size: 2em;
	font-weight: bold;
	color: #007BFF;
	margin-bottom: 15px;
}

.details-form label {
	font-size: 1.1em;
	margin-bottom: 10px;
	display: block;
}

.details-form input[type="text"],
.details-form input[type="email"],
.details-form input[type="tel"] {
	width: 100%;
	padding: 10px;
	margin-bottom: 20px;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 1.1em;
}

.details-form input[type="checkbox"] {
	margin-right: 10px;
	vertical-align: middle;
}

.details-form .checkbox-group {
	margin-bottom: 20px;
	display: flex;
	align-items: flex-start;
}

.details-form .checkbox-group label {
	display: inline-block;
	vertical-align: middle;
	font-size: 0.9em;
	line-height: 1.4em;
}

.details-form button {
	width: 100%;
	padding: 10px;
	font-size: 1.1em;
	color: white;
	background-color: #007BFF;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

.details-form button:hover {
	background-color: #0056b3;
}

.subscription-image {
	max-width: 600px;
	display: flex;
	align-items: flex-start;
}

.subscription-image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* Terms and Conditions at the bottom of the page */
.terms-container {
	max-width: 1200px;
	margin: 100px auto 40px auto;
	padding: 0 300px;
	font-size: 0.75em;
	color: #555;
	text-align: center;
}

.terms-container a {
	color: #007BFF;
	text-decoration: none;
}

.terms-container a:hover {
	text-decoration: underline;
}

.content-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.content-container h1 {
    font-size: 2.5em;
    font-weight: bold;
    color: #333;
    margin-top: 20px;
}

.content-container h2 {
    font-size: 1.5em;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #007BFF;
}

.content-header {
    margin-bottom: 30px;
    text-align: center;
}

.content-header h1 {
    font-size: 2.5em;
    font-weight: bold;
    color: #333;
    margin-top: 20px;
}

.contact-section {
    padding: 20px;
    text-align: left;
    font-size: 1em;
    line-height: 1.6;
}

.contact-section h2 {
    font-size: 1.5em;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #007BFF;
}

.contact-section p {
    margin-bottom: 20px;
}

.contact-section a {
    color: #007BFF;
    text-decoration: none;
}

.contact-section a:hover {
    text-decoration: underline;
}

.contact-form {
    margin-top: 20px;
}

.container-login {
    max-width: 600px;
    margin: 40px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* disclaimer */

.content-header {
    margin-bottom: 30px;
    text-align: center;
}

.content-header h1 {
    font-size: 2.5em;
    font-weight: bold;
    color: #333;
    margin-top: 20px;
}

.privacy-section {
    padding: 20px;
    text-align: left;
    font-size: 1em;
    line-height: 1.6;
}

.privacy-section h2 {
    font-size: 1.5em;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #007BFF;
}

.privacy-section p {
    margin-bottom: 20px;
}

.privacy-section ul {
    list-style-type: disc;
    margin-left: 20px;
}

.privacy-summary {
    font-size: 0.8em;
    color: #555;
    margin-top: 30px;
    text-align: center;
}

.privacy-summary a {
    color: #007BFF;
    text-decoration: none;
}

.privacy-summary a:hover {
    text-decoration: underline;
}


/* Payment form and promo code section */
.payment-form {
	flex: 1;
	margin-left: 40px;
	padding: 20px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.payment-form h2 {
	font-size: 1.8em;
	color: #007BFF;
	margin-bottom: 20px;
}

.payment-form label {
	display: block;
	text-align: left;
	font-weight: bold;
	margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="number"] {
	width: calc(100% - 20px);
	padding: 10px;
	margin-bottom: 20px;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 1.1em;
}

#card-element {
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 5px;
	margin-bottom: 20px;
}

#card-errors {
	color: red;
	font-size: 0.9em;
}

input[type="email"],
input[type="password"] {
	width: calc(100% - 20px); /* 20px smaller width */
	padding: 10px;
	margin-bottom: 20px;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 1.1em;
	display: block;
	
}

button {
/*	width: 100%; */
	padding: 10px;
	font-size: 1.1em;
	color: white;
	background-color: #007BFF;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}
.err-nrr-cell {
    text-align: center !important; 
    vertical-align: middle !important;
}

button:hover {
	background-color: #0056b3;
}

/* Promo Code Section */
.promo-code-section {
	margin-top: 20px;
}

.promo-code-section input {
	width: calc(100% - 20px);
	padding: 10px;
	margin-bottom: 20px;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 1.1em;
}

.promo-code-section button {
	width: 100%;
	padding: 10px;
	background-color: #28a745;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

.promo-code-section button:hover {
	background-color: #218838;
}

.promo-code-section #promo-code-error {
	color: red;
	display: none;
}

.promo-code-section #promo-code-success {
	color: green;
	display: none;
}

.page-title-container {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 20px;
}

.page-title-container h1 {
    font-size: 2.5em;
    color: #007BFF;
    font-weight: bold;
}


/* Smaller logos and center aligned */
.card-logos {
	display: flex;
	justify-content: center;
	margin-top: 10px;
	margin-bottom: 10px;
}

.card-logos img {
	width: 30px;
	margin-right: 10px;
}

.stripe-powered {
	text-align: center;
	font-size: 0.8em;
	color: #666;
}

.stripe-powered a {
	color: #666;
	text-decoration: none;
}

.stripe-powered a:hover {
	text-decoration: underline;
}

/* Section styling */
.section {
    max-width: 1200px;
    margin: 60px auto;
    padding: 20px;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.section-intro{
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    text-align: center;
    background-color: #fff;
    padding-bottom: 20px;
    
}
.section img {
    max-width: 100%;
    height: auto;
}

.intro {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 60px;
}
.intro img {
    max-width: 45%; /* Ensures the image width matches the other sections */
    height: auto;
    border-radius: 10px;
}

.intro-text {
    max-width: 50%;
    padding-right: 20px;
}

.large-heading {
    font-size: 36px;
    font-weight: bold;
}

.paragraph {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
}

.content-section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 40px 0;
}

.content-section .text {
    max-width: 45%;
}

.content-section img {
    max-width: 45%;
}

/* Pricing */

.pricing-container {
    max-width: 1200px;
    margin: 40px auto;
    text-align: center;
}

.pricing-header {
    margin-bottom: 30px;
}

.pricing-header h1 {
    font-size: 2.5em;
    font-weight: bold;
    color: #333;
}

.plans {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.plan {
    flex: 1;
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.plan:hover {
    transform: translateY(-5px);
}

.plan h2 {
    font-size: 2em;
    color: #007BFF;
    margin-bottom: 15px;
}

.plan p {
    font-size: 1.1em;
    color: #555;
    margin-bottom: 20px;
    text-align: center;
}

.plan-price {
    text-align: center;
    line-height: 1;
    margin-bottom: 20px;
}

.plan-price .from {
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 5px;
}

.plan-price .currency {
    font-size: 1.5em;
    vertical-align: top;
    margin-right: 2px;
    margin-top: 0.3em;
}

.plan-price .amount {
    font-size: 3em;
    font-weight: bold;
    color: black;
    line-height: 1;
}

.plan-price .details {
    font-size: 1.2em;
    line-height: 1.2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: -3px;
}

.plan-price .details .decimals {
    font-size: 0.9em;
}

.plan-price .details .per {
    color: #666;
    font-size: 0.9em;
}

.features {
    text-align: left;
    font-size: 0.95em;
    margin-top: 20px;
    list-style: none;
    padding: 0;
}

.features li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
    text-align: left;
    flex-wrap: wrap;
}

.features li:before {
    content: '✓';
    color: #007BFF;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.2em;
}

.features li b {
    font-weight: bold;
    margin-right: 5px;
    flex-basis: 100%;
}




.purchase-button {
    margin-top: 20px;
    display: inline-block;
    font-size: 1em;
    color: #fff;
    background-color: #007BFF;
    border: 1px solid #007BFF;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.purchase-button:hover {
    background-color: #0056b3;
}

/* GLOBAL DEFAULT (DESKTOP) */
.hamburger {
    display: none;
}

/* Base styles remain the same */

/* Responsive styles for devices with screen width of 768px or less (tablets and phones) */
	/* Ensure the section and its contents adjust properly */

@media (max-width: 768px) {

		

	.promo-video .video-container {
        max-width: 600px; /* Adjust max width for smaller screens */
        width: 100%;
        padding-bottom: 44%; /* Adjusted aspect ratio for a shorter height */
        height: 0;
        margin: 0 auto;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

	/* Adjust hero section for smaller screens */
	.hero-section {
		flex-direction: column;
		text-align: center;
	}

	.hero-text, .hero-image {
		max-width: 100%;
        flex: 1 1 300px !important;
		padding: 0;
	}

	.hero-text h1 {
		font-size: 3em;
        text-align: left;
	}

	.hero-text p {
		font-size: 1em;
	}

	.feature-item {
		flex-basis: 100%;
		height: auto;
		margin-bottom: 20px;
	}

	.additional-feature-boxes {
		grid-template-columns: 1fr;
	}

	.intro, .content-section {
		flex-direction: column; /* Stack content vertically */
	}

	.intro-text, .text {
		max-width: 100%; /* Make the text take up full width */
		padding-right: 0; /* Remove extra padding */
	}

	.intro img, .content-section img {
		max-width: 100%; /* Make images take up full width */
		margin-top: 20px; /* Add spacing for readability */
	}

	.large-heading {
		font-size: 28px; /* Adjust heading size for smaller screens */
	}

	.paragraph {
		font-size: 14px; /* Adjust paragraph font size for readability on small screens */
	}

	/* Footer buttons adjustments */
	.footer-buttons {
		flex-direction: column;
		gap: 10px;
	}

	.footer-buttons button {
		width: 100%;
		text-align: center;
	}
	/* General styles for both pages */


    /* Styles for swms_promo_email.html */
    .subscription-image, 
    .plan-box {
        display: none; /* Hide these elements */
    }

    .subscription-form {
        margin-top: 20px; /* Adjust margin for better spacing */
    }

    .subscription-form form {
        width: 100%; /* Make the form full width */
        padding: 10px; /* Add some padding */
    }

    .subscription-form input,
    .subscription-form button {
        width: 100%; /* Make input and button full width */
        font-size: 16px; /* Improve readability */
    }

    /* Styles for swms_promo_enter_details.html */
    .subscription-image, 
    .plan-box {
        display: none; /* Hide these elements */
    }

    .details-form {
        margin-top: 20px; /* Adjust spacing for better alignment */
    }

    .details-form form {
        width: 100%; /* Make the form full width */
        padding: 10px; /* Add some padding */
    }

    .details-form input,
    .details-form button {
        width: 100%; /* Make input and button full width */
        font-size: 16px; /* Improve readability */
    }
    .genswms-container .form-group label {
        text-align: left;
        display: block;
    }
    .container {
        text-align: center; /* Center the form for better presentation */
    }
	.details-form {
		background-color: #fff;
		padding: 60px 50px 40px 10px;
		border: 1px solid #ddd;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		text-align: left;
		max-width: 470px;
	}
	.checkbox-group {
        display: flex;
        flex-direction: column; /* Stack items vertically */
        align-items: flex-start; /* Align labels and checkboxes to the left */
        padding: 10px 0; /* Add some spacing around the group */
        margin: 0; /* Reset any external margins */
        width: 100%; /* Ensure the group spans the full width */
        box-sizing: border-box; /* Include padding in width calculation */
    }

    .checkbox-group input[type="checkbox"] {
        margin-right: 10px; /* Add spacing between checkbox and label */
    }

    .checkbox-group label {
        font-size: 14px; /* Adjust label size for readability on smaller screens */
        line-height: 1.5; /* Improve spacing between lines */
        width: 100%; /* Ensure labels wrap properly within the container */
    }
	.plan-box {
		display: none; /* Hide the left plan box */
	}
	
	.payment-form {
		margin-top: 20px; /* Add spacing at the top */
		width: 100%; /* Ensure full width responsiveness */
		max-width: 95%; /* Limit maximum width for proper centering */
		padding: 15px; /* Add internal padding for spacing */
		box-sizing: border-box; /* Include padding and borders in the width */
		background-color: #fff; /* Ensure a clean background */
		border-radius: 8px; /* Add rounded corners */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
		margin-left: auto; /* Center the payment-form */
		margin-right: auto; /* Center the payment-form */
	}
	
	.container {
		display: flex;
		flex-direction: column; /* Stack items vertically */
		align-items: center; /* Center align all child elements */
		width: 100%; /* Full width for the container */
		padding: 0 10px; /* Add padding on left and right */
		box-sizing: border-box; /* Include padding in width */
	}
	.terms-container {
        margin-top: 20px; /* Add space above the terms container */
        padding: 10px; /* Add internal padding for readability */
        width: 90%; /* Ensure the container is responsive */
        max-width: 400px; /* Optional: Limit the width for consistency */
        box-sizing: border-box; /* Include padding in width */
        background-color: #f9f9f9; /* Optional: Add a light background for contrast */
        border-radius: 8px; /* Add rounded corners */
        text-align: left; /* Align text to the left */
        font-size: 14px; /* Adjust font size for smaller screens */
        line-height: 1.6; /* Improve readability */
        margin-left: auto; /* Center the container horizontally */
        margin-right: auto; /* Center the container horizontally */
    }
	.plans {
        display: flex;
        flex-direction: column; /* Stack the plans vertically */
        gap: 20px; /* Add spacing between plan boxes */
        align-items: center; /* Center align each plan box */
    }

    .plan {
        width: 90%; /* Reduce width for a cascading effect */
        max-width: 350px; /* Limit the maximum width */
        padding: 15px; /* Add padding inside each box */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for a cascading appearance */
        border-radius: 8px; /* Add rounded corners */
        background-color: #fff; /* Ensure a clean background */
        box-sizing: border-box; /* Include padding and border in the width */
        transform: translateY(10px); /* Slightly offset each box for cascading effect */
        transition: transform 0.3s ease; /* Smooth animation effect */
    }

    .plan:nth-child(2) {
        transform: translateY(20px); /* Offset second box slightly more */
    }

    .plan:nth-child(3) {
        transform: translateY(30px); /* Offset third box the most */
    }

    .plan:hover {
        transform: translateY(0); /* Bring hovered box to the same level */
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Enhance shadow on hover */
    }
    .button-container {
        display: flex;
        flex-direction: column; /* Stack buttons vertically */
        align-items: center; /* Center align the buttons */
        gap: 15px; /* Add spacing between buttons */
        padding: 10px; /* Add padding around the container */
    }

    .button-cell {
        width: 100%; /* Make the button cell take the full width of the container */
        max-width: 350px; /* Optional: Set a maximum width for buttons */
        box-sizing: border-box; /* Include padding and border in width */
    }

    .button-cell button {
        width: 100%; /* Make the button fill the width of the cell */
        font-size: 14px; /* Adjust font size for better readability */
        padding: 10px; /* Add padding for comfortable tap zones */
        background-color: #007BFF; /* Adjust button color as needed */
        color: #fff; /* Ensure text is readable on the button */
        border: none; /* Remove borders */
        border-radius: 8px; /* Add rounded corners for better aesthetics */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for depth */
        text-align: center; /* Center-align button text */
        cursor: pointer; /* Indicate clickable buttons */
    }

    .button-cell button:hover {
        background-color: #0056b3; /* Change button color on hover */
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Enhance shadow on hover */
    }
    .swms-list-container {
        padding: 15px;
        margin: 10px auto;
        width: 100%; /* Full width for mobile */
        max-width: 100%; /* Remove the desktop max-width */
        border-radius: 6px; /* Smaller border radius */
    }

    .swms-list {
        width: 100%; /* Full width for the table on mobile */
    }

    .swms-list th, .swms-list td {
        padding: 10px; /* Smaller padding for table cells */
        font-size: 12px; /* Adjust font size for smaller screens */
    }

    .action-buttons {
        flex-direction: column; /* Stack buttons vertically on mobile */
        gap: 5px; /* Reduce gap between buttons */
    }

    .action-buttons button {
        padding: 8px; /* Smaller padding for buttons */
        font-size: 12px; /* Smaller font size for buttons */
    }
    .hero-buttons-container {
        display: flex;
        flex-direction: column; /* Stack buttons vertically */
        align-items: center; /* Center buttons horizontally */
        gap: 30px; /* Add 30px spacing between buttons */
        margin-bottom: 30px;
    }

    .hero-buttons-container .hero-button {
        width: 80%; /* Optional: Adjust width for better usability */
    }
	
	
    

    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Kill desktop centering containers */
    .header-inner,
    .container,
    .page-container,
    .hero-section,
    .pricing-content-container {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }
    .how-it-works-container {
        max-width: 100%;
        width: 100%;
        margin: 0;
        padding: 40px 20px;   /* mobile-friendly spacing */
        box-sizing: border-box;
        text-align: center;
    }
    .site-footer {
        width: 100%;
        padding: 0;
    }

    .site-footer .footer-container {
        min-width: 0;               /* 🔥 kill desktop constraint */
        max-width: 100%;
        width: 100%;
        margin: 0;
        padding: 40px 20px;
        box-sizing: border-box;

        display: flex;
        flex-direction: column;     /* stack columns */
        align-items: flex-start;
        gap: 32px;
    }

    /* Footer columns */
    .site-footer .footer-column {
        width: 100%;
    }

    /* Headings */
    .site-footer h4 {
        font-size: 16px;
        margin-bottom: 12px;
    }

    /* Links */
    .site-footer a {
        font-size: 14px;
        line-height: 1.6;
    }

    /* Bottom bar */
    .site-footer .footer-bottom {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        text-align: center;
    }
    .genswms-container.container,
    .genswms-container,
    .container {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
    }
    

	
}


	


/* Further responsive adjustments for very small devices (max width 480px) */
@media (max-width: 480px) {
    header img {
        max-width: 70%;
    }

    .header-buttons button {
        font-size: 12px; /* Reduce button font size */
        padding: 8px; /* Reduce button padding */
    }
	.promo-video .video-container {
        max-width: 360px; /* Adjust max width for smaller screens */
        width: 100%;
        padding-bottom: 44%; /* Adjusted aspect ratio for a shorter height */
        height: 0;
        margin: 0 auto;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }
	/* General styles for both pages */

/* Hide elements and enhance layout on small screens (like iPhones) */

    /* Styles for sims_promo_email.html */
    .subscription-image, 
    .plan-box {
        display: none; /* Hide these elements */
    }

    .subscription-form {
        margin-top: 20px; /* Adjust margin for better spacing */
    }

    .subscription-form form {
        width: 100%; /* Make the form full width */
        padding: 10px; /* Add some padding */
    }

    .subscription-form input,
    .subscription-form button {
        width: 100%; /* Make input and button full width */
        font-size: 16px; /* Improve readability */
    }

    /* Styles for swms_promo_enter_details.html */
    .subscription-image, 
    .plan-box {
        display: none; /* Hide these elements */
    }

    .details-form {
        margin-top: 20px; /* Adjust spacing for better alignment */
    }

    .details-form form {
        width: 100%; /* Make the form full width */
        padding: 10px; /* Add some padding */
    }

    .details-form input,
    .details-form button {
        width: 100%; /* Make input and button full width */
        font-size: 16px; /* Improve readability */
    }

    .container {
        text-align: center; /* Center the form for better presentation */
    }
	.details-form {
		background-color: #fff;
		padding: 60px 50px 40px 10px;
		border: 1px solid #ddd;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		text-align: left;
		max-width: 470px;
	}
	.plan-box {
		display: none; /* Hide the left plan box */
	}
	
	.payment-form {
		margin-top: 20px; /* Add spacing at the top */
		width: 100%; /* Ensure full width responsiveness */
		max-width: 95%; /* Limit maximum width for proper centering */
		padding: 15px; /* Add internal padding for spacing */
		box-sizing: border-box; /* Include padding and borders in the width */
		background-color: #fff; /* Ensure a clean background */
		border-radius: 8px; /* Add rounded corners */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
		margin-left: auto; /* Center the payment-form */
		margin-right: auto; /* Center the payment-form */
	}
	
	.container {
		display: flex;
		flex-direction: column; /* Stack items vertically */
		align-items: center; /* Center align all child elements */
		width: 100%; /* Full width for the container */
		padding: 0 10px; /* Add padding on left and right */
		box-sizing: border-box; /* Include padding in width */
	}
    .genswms-container .form-group label {
        text-align: left;
        display: block;
    }

	.terms-container {
        margin-top: 20px; /* Add spacing above the terms section */
        padding: 10px; /* Add internal padding for better readability */
        background-color: #f9f9f9; /* Optional: Light background for contrast */
        border-radius: 8px; /* Add rounded corners */
        width: 90%; /* Limit width to fit within the screen */
        box-sizing: border-box; /* Include padding in the width */
        text-align: center; /* Center-align the text */
        font-size: 14px; /* Adjust font size for smaller screens */
        line-height: 1.5; /* Improve readability */
        margin-left: auto; /* Center horizontally */
        margin-right: auto; /* Center horizontally */
    }
	.plans {
        display: flex;
        flex-direction: column; /* Stack the plans vertically */
        gap: 20px; /* Add spacing between plan boxes */
        align-items: center; /* Center align each plan box */
    }

    .plan {
        width: 90%; /* Reduce width for a cascading effect */
        max-width: 350px; /* Limit the maximum width */
        padding: 15px; /* Add padding inside each box */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for a cascading appearance */
        border-radius: 8px; /* Add rounded corners */
        background-color: #fff; /* Ensure a clean background */
        box-sizing: border-box; /* Include padding and border in the width */
        transform: translateY(10px); /* Slightly offset each box for cascading effect */
        transition: transform 0.3s ease; /* Smooth animation effect */
    }

    .plan:nth-child(2) {
        transform: translateY(20px); /* Offset second box slightly more */
    }

    .plan:nth-child(3) {
        transform: translateY(30px); /* Offset third box the most */
    }

    .plan:hover {
        transform: translateY(0); /* Bring hovered box to the same level */
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Enhance shadow on hover */
    }
    .button-container {
        display: flex;
        flex-direction: column; /* Stack buttons vertically */
        align-items: center; /* Center align the buttons */
        gap: 15px; /* Add spacing between buttons */
        padding: 10px; /* Add padding around the container */
    }

    .button-cell {
        width: 100%; /* Make the button cell take the full width of the container */
        max-width: 350px; /* Optional: Set a maximum width for buttons */
        box-sizing: border-box; /* Include padding and border in width */
    }

    .button-cell button {
        width: 100%; /* Make the button fill the width of the cell */
        font-size: 14px; /* Adjust font size for better readability */
        padding: 10px; /* Add padding for comfortable tap zones */
        background-color: #007BFF; /* Adjust button color as needed */
        color: #fff; /* Ensure text is readable on the button */
        border: none; /* Remove borders */
        border-radius: 8px; /* Add rounded corners for better aesthetics */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for depth */
        text-align: center; /* Center-align button text */
        cursor: pointer; /* Indicate clickable buttons */
    }

    .button-cell button:hover {
        background-color: #0056b3; /* Change button color on hover */
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Enhance shadow on hover */
    }
    .swms-list-container {
        padding: 15px;
        margin: 10px auto;
        width: 100%; /* Full width for mobile */
        max-width: 100%; /* Remove the desktop max-width */
        border-radius: 6px; /* Smaller border radius */
    }

    .swms-list {
        width: 100%; /* Full width for the table on mobile */
    }

    .swms-list th, .swms-list td {
        padding: 10px; /* Smaller padding for table cells */
        font-size: 12px; /* Adjust font size for smaller screens */
    }

    .action-buttons {
        flex-direction: column; /* Stack buttons vertically on mobile */
        gap: 5px; /* Reduce gap between buttons */
    }

    .action-buttons button {
        padding: 8px; /* Smaller padding for buttons */
        font-size: 12px; /* Smaller font size for buttons */
    }
    .hero-buttons-container {
        display: flex;
        flex-direction: column; /* Stack buttons vertically */
        align-items: center; /* Center buttons horizontally */
        gap: 30px; /* Add 30px spacing between buttons */
        margin-bottom: 30px;
    }

    .hero-buttons-container .hero-button {
        width: 80%; /* Optional: Adjust width for better usability */
    }
    
    .how-it-works-container {
        max-width: 100%;
        width: 100%;
        margin: 0;
        padding: 40px 20px;   /* mobile-friendly spacing */
        box-sizing: border-box;
        text-align: center;
    }
    .site-footer {
        width: 100%;
        padding: 0;
    }

    .site-footer .footer-container {
        min-width: 0;               /* 🔥 kill desktop constraint */
        max-width: 100%;
        width: 100%;
        margin: 0;
        padding: 40px 20px;
        box-sizing: border-box;

        display: flex;
        flex-direction: column;     /* stack columns */
        align-items: flex-start;
        gap: 32px;
    }

    /* Footer columns */
    .site-footer .footer-column {
        width: 100%;
    }

    /* Headings */
    .site-footer h4 {
        font-size: 16px;
        margin-bottom: 12px;
    }

    /* Links */
    .site-footer a {
        font-size: 14px;
        line-height: 1.6;
    }

    /* Bottom bar */
    .site-footer .footer-bottom {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        text-align: center;
    }
    
}

.form-flash-messages {
    margin: 20px 0; /* Add spacing above the submit button */
    text-align: center; /* Center the messages */
}

.alert {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid transparent;
    border-radius: 5px;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}



.highlight-h3 {
    font-size: inherit;
    font-weight: bold; /* Adjust as necessary to match your global h3 styling */
    color: inherit; /* Ensures it keeps the color */
}

.form-group-row {
	display: flex;
	justify-content: flex-start; /* Align items to the start */
	margin-bottom: 20px;
	gap: 0px; /* Adjust the gap between the form groups */
	flex-wrap: nowrap; /* Prevent wrapping to the next line */
}

.form-group {
	flex: 0 0 18%; /* Adjust width to fit more elements on the same line */
	display: flex;
	flex-direction: column;
}

/* Adjust widths for each specific input */
#person_responsible_for_swms_reveiw,
#date_swms_to_be_reveiwed,
#principal_contractor,
#pc_email,
#date_swms_provided_to_pc {
	width: 100%;
}
/* Adjustments specifically for the first row */
.form-group-row.first-row {
	display: flex;
	justify-content: space-between;
	gap: 0px; /* Adjust gap as needed */
	flex-wrap: nowrap; /* Prevent inputs from wrapping to the next line */
}

.form-group.first-row-item {
	flex: 0 0 22%; /* Adjust percentage values for each input width */
}


/* Adjust widths for each specific input */
#works_supervisor {
	width: 100%;
}

#supervisor_phone {
	width: 100%;
}

#supervisor_email {
	width: 100%;
}

#date_swms_to_be_reveiwed {
	width: 100%;
}


.form-group-inline {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
	flex: 1;
}

.form-group label,
.form-group-inline label {
	margin-bottom: 5px;
	font-weight: bold;
}

.form-group input,
.form-group textarea,
.form-group-inline input {
	width: 100%;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 18px;
}
/* Set specific widths for each input */
#works_supervisor {
	width: 250px; /* Adjust as needed */
}

#supervisor_phone {
	width: 250px; /* Adjust as needed */
}

#supervisor_email {
	width: 250px; /* Adjust as needed */
}

#direct_employer {
	width: 250px; /* Adjust as needed */
}

#person_responsible_for_swms_reveiw {
	width: 260px; /* Adjust as needed */
}

#date_swms_to_be_reveiwed {
	width: 150px; /* Adjust as needed */
}

#principal_contractor {
	width: 190px; /* Adjust as needed */
}

#pc_email {
	width: 200px; /* Adjust as needed */
}

#date_swms_provided_to_pc {
	width: 190px; /* Adjust as needed */
}

#site_locations {
	width: 80%; /* Full width of the container */
}

.form-group input,
.form-group textarea,
.form-group-inline input {
	width: 100%;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 18px;
	height: 18px; /* Set a fixed height for all input fields */
}

/* Ensure date inputs match the other input fields */
.form-group input[type="date"] {
	height: 18px; /* Same height as the text inputs */
	line-height: normal; /* Ensure vertical alignment */
}


h2 {
	font-size: 150%;
	margin-bottom: 20px;
}

.button-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-bottom: 20px;
}

.container-dashboard h1 {
    text-align: center;
    margin-bottom: 10px;
    font-size: 2.5em;
    color: #333;
}

.container-dashboard .button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px;
}

.container-dashboard .button-cell {
    flex: 1 1 30%; /* Each button takes up about 30% of the row */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.container-dashboard .button-cell button {
    width: 100%;
    padding: 15px 20px;
    background-color: #007BFF;
    color: white;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    min-height: 70px; /* Ensures all buttons are of minimum height */
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
}


.genswms-container {
    flex-wrap: wrap;
    display: block;
	flex-direction: column;
}

.genswms-container .form-group-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0px;
    flex-wrap: wrap;
/*    gap: 100px; */
}

.genswms-container .form-group {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.genswms-container .form-group-inline {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    flex: 1;
}

.genswms-container .form-group label,
.genswms-container .form-group-inline label {
    margin-bottom: 5px;
    font-weight: bold;
}


.genswms-container .form-group input,
.genswms-container .form-group textarea,
.genswms-container .form-group-inline input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 18px;
}

.genswms-container h2 {
    font-size: 150%;
    margin-bottom: 20px;
}

.genswms-container .button-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}


.risk-button {
	padding: 10px;
	border: none;
	border-radius: 4px;
	background-color: #007BFF;
	color: white;
	cursor: pointer;
	text-align: center;
	font-size: 20px;
}


.risk-button.selected {
	background-color: orange;
	color: black;
}

.image-container {
	text-align: center;
	    margin: 5px auto;
}

.image-container img {
	width: 10%;
	height: auto;
}



/* TABLES (only tables) */
.risk-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

/* CONTAINERS (only containers) */
.risk-table-container {
    width: 100%;
    margin-top: 20px;
}


.risk-table th{
	background-color: lightgrey;
}

.risk-table th,
.risk-table td {
	border: 1px solid #ccc;
	text-align: center;
	padding: 12px;
}

.risk-table .swms-title {
	background-color: orange;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	padding: 15px;

	/* 🔧 Add these for responsive wrapping */
	white-space: normal;          /* allow wrapping */
	word-break: break-word;       /* break long words */
	overflow-wrap: break-word;    /* better wrapping on all browsers */
	box-sizing: border-box;       /* include padding in width */
	width: 100%;                  /* force it to stay within the table */
}
.risk-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 20px;
	table-layout: fixed; /* <-- ADD THIS */
}


.risk-table input {
	width: 100%;
	padding: 0px;
	border: 1px solid #ccc;
	border-radius: 4px;
	text-align: center;
	font-size: 20px;
}

.submit-container {
	text-align: center;
	margin-top: 20px;
	margin: 0 auto;
}

.submit-container button {
	padding: 15px 30px;
	font-size: 20px;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	width: 200px;
    margin: 10px;
}

.save-png-button {
	background-color: blue;
}

.page-break {
	page-break-before: always;
}

/* Styles for the colored boxes with padding */
.table-container {
    width: 100%;
    margin: 20px auto;
}

.table-content {
	border: 3px solid black;
	border-radius: 8px;
	padding: 20px;
	color: white;
	font-weight: bold;
	text-align: left;
	margin: 0 auto;
    width: 80%;
}

.table-red {
	background-color: #007BFF;;
}

.table-orange {
	background-color: #007BFF;;
}

.table-green {
	background-color: #007BFF;;
}

/* Spinner Styles */
.spinner-overlay {
	display: none; /* Hidden by default */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
	z-index: 9999; /* Make sure it appears above other elements */
	justify-content: center;
	align-items: center;
}

.spinner {
    width: 300px; /* Adjust to fit your GIF size */
    height: auto;
    border: none; /* Remove border */
    border-radius: 0; /* No need for a circular spinner */
}


@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
/* Centered flash message styling */
.flash-message {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #d4edda;
	padding: 20px;
	border: 1px solid #c3e6cb;
	border-radius: 8px;
	z-index: 10000;
	text-align: center;
	font-size: 18px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.flash-message button {
	margin-top: 10px;
	padding: 5px 10px;
	font-size: 16px;
	cursor: pointer;
}


/* Add the container styles from dashboard.html */
.container-dashboard {
    display: block;
}

.pricing-content-container {
	flex-direction: column;
}

::placeholder {
	color: #cccccc; /* Light grey color for the placeholder */
	opacity: 1; /* Ensure the color applies across different browsers */
	font-style: italic; /* Optional: make the placeholder text italic */
}

:-ms-input-placeholder { /* For Internet Explorer 10-11 */
	color: #cccccc;
}

::-ms-input-placeholder { /* For Microsoft Edge */
	color: #cccccc;
}

.forgot-password {
	text-align: right;
	margin-top: -10px;
}

.forgot-password a {
	color: #007BFF;
	text-decoration: none;
	font-size: 14px;
	transition: color 0.3s;
}

.forgot-password a:hover {
	color: #0056b3;
}

.swms-list-container {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center align all child elements */
    width: 100%; /* Full width for the container */
    padding: 0 10px; /* Add padding on left and right */
    box-sizing: border-box; /* Include padding in width */
    display: flex;
	max-width: 1240px;
	margin: 20px auto;
	padding-top: 5px;
	padding: 20px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	
}
.swms-list {
    width: 80%; /* Adjust table width as needed */
    border-collapse: collapse;
    margin: auto;
}
.swms-list th, .swms-list td {
    padding: 15px;
    border: 1px solid #ddd;
    text-align: center;
    vertical-align: middle;
}
.swms-list th {
    background-color: #f2f2f2;
}
.action-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.action-buttons button {
    padding: 10px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.action-buttons .download {
    background-color: green;
    color: white;
}
.action-buttons .delete {
    background-color: red;
    color: white;
}
.action-buttons .rename {
    background-color: blue;
    color: white;
}
.rename-form {
    display: none;
    margin-top: 10px;
}
.rename-form input {
    padding: 8px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
}
.rename-form button {
    padding: 8px;
    font-size: 14px;
    border-radius: 4px;
    background-color: blue;
    color: white;
    cursor: pointer;
}


/* Admin Main Content Styles */
.container-admin {
    max-width: 1800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.container-admin table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.container-admin th, .container-admin td {
    padding: 0px;
    border: 1px solid #ddd;
    text-align: left;
}

.container-admin th {
    background-color: #f4f4f4;
}

.container-admin h1 {
    text-align: center;
    margin-bottom: 20px;
}




/* Updated CSS to match your design */

.security-question-table {
	width: 40%; /* Reduced width to 50% */
	margin-top: 10px;
	margin-left: 0; /* Align table to the left */
	border-collapse: collapse; /* Ensures borders are not double-lined */
	border: 1px solid #ddd; /* Add a border to the entire table */
}

.security-question-table td {
	padding: 10px;
	vertical-align: middle;
	border: 1px solid #ddd; /* Add border to all cells */
}

.option-label {
	width: 10%; /* Adjusted percentage after table size change */
	font-weight: bold;
	background-color: #f0f0f0;
	text-align: center;
	vertical-align: middle;
}

.option-answer {
	width: 70%; /* Adjusted width for the answer text */
	background-color: #e0f7fa;
	padding: 10px;
	vertical-align: middle;
}

.option-select {
	width: 10%; /* Adjusted width for the radio buttons */
	background-color: #f0f0f0;
	text-align: center;
	vertical-align: middle;
}

input[type="radio"] {
	transform: scale(1.2);
}

.option-answer:hover {
	background-color: #d0eff3;
}



.footer-container {
    max-width: 1240px;
    margin: 40px auto;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    padding: 20px 0;
}

footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.footer-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
}

.footer-buttons button {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: white;
    color: black;
    transition: background-color 0.3s, color 0.3s;
}

.footer-buttons button:hover {
    background-color: lightgrey;
    color: blue;
    border: 1px solid lightgrey;
}

.footer-copy {
    text-align: center;
    font-size: 0.9em;
    color: #666;
}

.footer-copy p {
    margin: 0;
}

/* General table styles */
table {
    border-collapse: collapse;
    width: 100%;
}

/* Prevent rows from breaking across pages */
tr {
    page-break-inside: avoid; /* Prevent row splits inside tables */
}

/* Ensure individual cells are not split */
td, th {
    page-break-inside: avoid; /* Prevent cell splitting */
    page-break-before: auto; /* Prevent unnecessary page breaks before cells */
}

/* Specific rules for signature and risk tables */
.risk-table tr {
    page-break-inside: avoid; /* Prevent rows in signature and risk tables from being split */
}

/* Additional styles for better presentation in the PDF */

.risk-table td {
    padding: 10px; /* Add padding for better readability */
    text-align: left; /* Align text to the left for better structure */
}


.risk-table th {
    font-weight: bold; /* Bold headers for clarity */
    text-align: center; /* Center-align table headers */
}

/* Adjust table headers for signature and risk tables */

.risk-table th {
    background-color: #f2f2f2; /* Light gray background for headers */
}
.ppe-table-container td {
    text-align: center !important;  
    vertical-align: middle !important;
}

.ppe-table-container td img {
    width: 75px !important;
    height: 115px !important;
    display: block !important;
    margin: auto !important;
}

.generate-swms-button {
    display: block;
    margin: 20px auto;
    padding: 10px 100px;
    background-color: #28a745; /* Green color */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease;
}

.generate-swms-button:hover {
    background-color: #218838; /* Slightly darker green on hover */
}
.next-button {
    display: block;
    margin: 30px auto 0; /* Add margin on top to separate from other buttons */
    padding: 12px 100px;
    background-color: #28a745; /* Green color */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease;
}

.next-button:hover {
    background-color: #218838; /* Slightly darker green on hover */
}
.container-dashboardirp {
    display: block;
    background: #fff;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px;
}


.container-dashboardirp h1 {
    text-align: center;
    margin-bottom: 10px;
    font-size: 2.5em;
    color: #333;
}

.container-dashboardirp .button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px;
}

.container-dashboardirp .button-cell {
    flex: 1 1 30%; /* Each button takes up about 30% of the row */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.container-dashboardirp .button-cell button {
    width: 100%;
    padding: 15px 20px;
    background-color: #007BFF;
    color: white;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    min-height: 70px; /* Ensures all buttons are of minimum height */
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.spinner.fire svg animateTransform,
.spinner.fire svg animate {
    display: none;
}
}
.wellbeing-button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 40px auto;
}

.wellbeing-button-cell {
    width: 100%;
    max-width: 1000px;
    text-align: center;
    margin-bottom: 20px;
}

.wellbeing-btn {
    width: 100%;
    padding: 15px 25px;
    background-color: #0d6efd;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, transform 0.2s;
}

.wellbeing-btn:hover {
    background-color: #0b5ed7;
    transform: scale(1.02);
}

.wellbeing-btn small {
    font-size: 18px;
    color: #e0e0e0;
    display: block;
    margin-top: 5px;
}

.generate-action-plan-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    width: 100%;
    text-align: center;
}

.generate-action-plan-btn {
    padding: 12px 24px;
    font-weight: 700;
    font-size: 38px;
    border-radius: 8px;
    background-color: #05bb4b;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.2s ease;
}

.generate-action-plan-btn:hover {
    background-color: #049b3e;
    transform: scale(1.03);
}
/* ✅ 3-column equal-size grid */
.wellbeing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    justify-items: center;
    align-items: stretch; /* ensures all buttons in each row stretch to equal height */
    width: 100%;
    max-width: 1100px;
    margin: 40px auto;
}

/* ✅ Uniform button sizing */
.wellbeing-btn {
    width: 100%;
    max-width: 320px;
    min-height: 100px; /* ensures equal height across categories */
    display: flex;
    flex-direction: column;
    justify-content: center;  /* centers the text vertically */
    align-items: center;      /* centers the text horizontally */
    padding: 18px 20px;
    font-size: 20px;
    line-height: 1.3;
    text-align: center;
    background-color: #0d6efd;
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* ✅ Small subtext style */
.wellbeing-btn small {
    display: block;
    font-size: 14px;
    color: #e0e0e0;
    margin-top: 5px;
}

/* ✅ Hover + selected states */
.wellbeing-btn:hover {
    background-color: #0b5ed7;
    transform: scale(1.03);
}

.wellbeing-btn.selected {
    background-color: #FFA500 !important; /* orange when selected */
    color: #fff;
}

/* ✅ Responsive breakpoints */
@media (max-width: 992px) {
    .wellbeing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .wellbeing-grid {
        grid-template-columns: 1fr;
    }
}


.wellbeing-table th, .wellbeing-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
    vertical-align: top;
}
.wellbeing-table th {
    background-color: #007bff;
    color: white;
    font-weight: bold;
}
.wellbeing-table tr:nth-child(even) {
    background-color: #f9f9f9;
}
.wellbeing-btn.selected {
    background-color: #ff9800 !important;
    color: #fff;
}
/* ===== Persons Involved: aligned single-row layout ===== */
.container-dashboardirp #persons-involved-container {
display: flex;
flex-direction: column;
gap: 18px;
}

/* Grid row: 5 fields + remove button */
.container-dashboardirp .person-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;  /* evenly spaced 4 columns */
    gap: 18px;                               /* equal horizontal spacing */
    align-items: stretch;                    /* consistent field height */
}


/* Make all controls fill their grid cell and share identical height */
.container-dashboardirp .person-row .form-control,
.container-dashboardirp .person-row select,
.container-dashboardirp .person-row .delete-person-btn {
height: 42px;             /* <- unified control height */
width: 100%;
box-sizing: border-box;
font-size: 14px;
}

/* Tidy select & input padding (Bootstrap-friendly) */
.container-dashboardirp .person-row .form-control,
.container-dashboardirp .person-row select {
padding: .375rem .75rem;
line-height: 1.5;
}

/* Remove button styled to match input height and align center */
.container-dashboardirp .person-row .delete-person-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 0 12px;          /* <- no vertical padding so height is exact */
border-radius: 6px;
white-space: nowrap;
}

/* Keep the add button centered under the grid */
.container-dashboardirp .add-person-wrapper {
text-align: center;
margin-top: 12px;
}

/* Mobile/tablet stacking */
@media (max-width: 992px) {
    .container-dashboardirp .person-row {
        grid-template-columns: 1fr 1fr; /* two columns on smaller screens */
    }
    .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    }
    .modal-box {
    background: #fff;
    padding: 25px 30px;
    border-radius: 12px;
    text-align: center;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }
    .modal-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    }
    .modal-actions .btn {
    flex: 1;
    margin: 0 5px;
    padding: 10px 12px;
    font-weight: 600;
    }

    .management-plan-content h1,
    .management-plan-content h2,
    .management-plan-content h3 {
        margin-top: 25px;
        margin-bottom: 12px;
        font-weight: 700;
        color: #333;
    }

    .management-plan-content p {
        margin-bottom: 12px;
        line-height: 1.6;
    }

    .management-plan-content ul {
        margin-left: 20px;
        margin-bottom: 15px;
    }

    .management-plan-content li {
        margin-bottom: 6px;
    }

    .management-plan-content strong,
    .management-plan-content b {
        font-weight: 700;
    }
    #editable-plan:focus {
        outline: 3px solid #FFA500;
        background: #fffef2;
    }
}



/* ============================
   MOBILE/TABLET FORM OVERRIDES
   ============================ */
@media (max-width: 768px) {

    /* Stack ALL form rows on mobile */
    .genswms-container .form-group-row {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .genswms-container .form-group.first-row-item {
        width: 100%;
        max-width: 100%;
    }

    /* All form controls */
    .genswms-container input,
    .genswms-container select,
    .genswms-container textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin-bottom: 18px;
        padding: 12px;
        font-size: 16px;
        line-height: 1.4;
        min-height: 44px;
    }

    /* Override ALL fixed-width IDs on mobile (CORRECT SPELLING) */
    #works_supervisor,
    #supervisor_phone,
    #supervisor_email,
    #direct_employer,
    #person_responsible_for_swms_reveiw,
    #date_swms_to_be_reveiwed,
    #site_locations {
        width: 100%;
        max-width: 100%;
    }

    /* Date inputs */
    .genswms-container input[type="date"] {
        min-height: 44px;
        padding: 12px;
    }

    /* Textareas */
    .genswms-container textarea {
        resize: vertical;
    }
}




/* ============================
   SIGNATURE TABLE – MOBILE
   ============================ */
@media (max-width: 768px) {

  .signature-table-container {
    width: 100%;
  }

  /* stacked “cards” */
  table.signature-table,
  table.signature-table tbody,
  table.signature-table tr,
  table.signature-table td {
    display: block;
    width: 100%;
  }

  table.signature-table thead {
    display: none;
  }

  table.signature-table td {
    padding: 0;
    border: none;
    margin-bottom: 28px;
  }

  .mobile-label {
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
    text-align: left;
    font-size: 16px;
  }

  .signature-pad {
    width: 100%;
    height: 120px;
    border: 1px solid #ccc;
  }

  .signature-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
  }

  .signature-name-input,
  .signature-position-input,
  .signature-date-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    font-size: 16px;
    min-height: 44px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  .signature-clear-btn,
  .date-time-stamp-button {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
  }

  .signature-date-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
}

@media (max-width: 768px) {
    .contact-form-wrapper {
        grid-template-columns: 1fr;
    }

    .contact-map iframe {
        min-height: 260px;
    }
}

/* ===============================
   Contact Form + Map Layout
   =============================== */

.contact-form-wrapper {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 40px;
    margin-top: 30px;
    align-items: start;
}

.contact-form,
.contact-map {
    width: 100%;
}

/* Map styling */
.contact-map iframe {
    width: 100%;
    min-height: 360px;
    border: 0;
    border-radius: 8px;
}

.map-caption {
    font-size: 13px;
    color: #666;
    margin-top: 8px;
    text-align: center;
}


/* ============================
   HOMEPAGE HERO OVERRIDES
============================ */

body.homepage .hero-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 80px 0;
    gap: 40px;
}

body.homepage .hero-text {
    flex: 1 1 500px;
    max-width: 50%;
}

body.homepage .hero-heading {
    font-size: clamp(3.2rem, 4.8vw, 4.4rem);
    line-height: 1.28;
    font-weight: 800;
    margin: 0;
}

/* =========================================
   MOBILE HERO – FULL WIDTH CENTERED
========================================= */

@media (max-width: 768px) {

  body.homepage .hero-section {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 40px 20px !important;
      gap: 30px !important;
      text-align: center;
  }

  body.homepage .hero-text {
      flex: 1 1 auto !important;
      max-width: 100% !important;
      width: 100% !important;
      padding: 0 !important;
      text-align: center;
  }

  body.homepage .homepage-hero-heading {
      font-size: clamp(2.8rem, 8vw, 3.4rem) !important;
      line-height: 1.05;
      margin: 0 auto;
      text-align: center;
  }

  body.homepage .hero-image {
      width: 100%;
      max-width: 100%;
  }

}
   

/* =========================================
   MIND SAFETY – AUDIENCE SECTION (ISOLATED)
========================================= */

.ms-audience-section {
    padding: 50px 20px;
    background-color: #f7f9fc;
}

.ms-audience-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Intro */

.ms-audience-intro {
    text-align: left;
    max-width: 1200px;
    margin: 0 auto 0px auto;
}

.ms-audience-intro h2 {
    font-size: 2.8rem;
    margin-bottom: 20px;
    color: #142033;
    font-weight: 800;
    letter-spacing: -0.5px;
    position: relative;
}

.ms-audience-intro h2 {
    font-size: 2.3rem;
    text-align: center;
    margin-bottom: 20px;
    align-content: center;
    color: #142033;
    font-weight: 800;
    letter-spacing: -0.5px;
    position: relative;
}

.ms-audience-intro p {
    font-size: 1.4rem;
    line-height: 1.8;
    color: #3b4552;
    margin-bottom: 10px;
    max-width: 1200px;
}

/* Divider */

.ms-audience-divider {
    width: 150px;
    height: 3px;
    background-color: #C4C4D4;
    margin: 20px auto;
}

/* Audience Wrapper */

.ms-audience-wrapper {
    max-width: 1240px;
    margin: 0 auto;
    padding-bottom: 40px;
    text-align: center;
}

.ms-audience-wrapper h3 {
    font-size: 2.3rem;
    margin-bottom: 50px;
    color: #1e2a38;
    font-weight: 800;
}

/* Grid */

.ms-audience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
}

/* Cards */

.ms-audience-card {
    background: #ffffff;
    padding: 45px 30px;
    border-radius: 14px;
    border: 1px solid #C4C4D4;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ms-audience-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
}

.ms-audience-icon {
    font-size: 32px;
    color: #007bff;
    margin-bottom: 20px;
}

.ms-audience-card h4 {
    font-size: 1.25rem;
    margin-bottom: 15px;
    color: #1e2a38;
    font-weight: 600;
}

.ms-audience-card p {
    font-size: .98rem;
    line-height: 1.6;
    color: #555;
}

/* Responsive */

@media (max-width: 992px) {
    .ms-audience-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .ms-audience-intro h2 {
        font-size: 2.2rem;
    }

    .ms-audience-intro p {
        font-size: 1.3rem;
    }

    .ms-audience-wrapper h3 {
        font-size: 1.8rem;
    }

    .ms-audience-card h4 {
        font-size: 1.3rem;
    }

    .ms-audience-card p {
        font-size: 1.1rem;
    }
}
/* =========================================
   DOCUMENT SAMPLES HEADER
========================================= */



.ms-documents-subtext {
    font-size: 1.8rem;
    color: #555;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
    line-height: 1.6;
}

/* =========================================
   MIND SAFETY – HOW IT WORKS SECTION
========================================= */

.ms-how-section {
    background-color: #7c7c90;
    
   

}

/* =========================================
   FAQ CTA BUTTON
========================================= */

.faq-contact-button {
    display: inline-block;
    padding: 12px 26px;
    background-color: #1e3a8a; /* Blue */
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 6px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.faq-contact-button:hover {
    background-color: #162e6f;
    transform: translateY(-2px);
}
.plans {
    display: flex;
    gap: 25px;
    align-items: stretch;
}

.plan {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.features {
    min-height: 260px;
}
.plan-title {
    font-size: 22px;
    margin-bottom: 4px;
}

.plan-subtitle {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}
.plan:nth-child(2) {
    transform: scale(1.03);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.plan-badge,
.plan-badge-placeholder {
    height: 32px;
    margin-bottom: 10px;
}

.plan-badge {
    background:blue;
    color:white;
    padding:6px 18px;
    border-radius:20px;
    font-size:13px;
    font-weight:bold;

    display:flex;              /* 👈 Use flexbox */
    align-items:center;        /* 👈 Vertical centre */
    justify-content:center;    /* 👈 Horizontal centre */

    width: fit-content;
    margin: 0 auto 15px auto;
}

.trial-label {
    color:#28a745;
    font-weight:bold;
    font-size:24px;
    display:block;
    margin-bottom:10px;
}

.price-row {
    display:flex;
    align-items:flex-start;
    justify-content:center;
}

.monthly-label {
    font-size:14px;
    font-weight:bold;
    margin-top:14px;
    display:block;
}

.microcopy {
    font-size:13px;
    color:#666;
    margin-top:8px;
}

.cta-primary {
    display: inline-block;
    background: linear-gradient(135deg, #007bff, #0056d2);
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    padding: 14px 32px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.35);
    transition: all 0.25s ease;
    letter-spacing: 0.3px;
}

.cta-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 123, 255, 0.45);
    background: linear-gradient(135deg, #0056d2, #0041a8);
}

.cta-wrapper {
    text-align: center;
    margin: 0px 0;
}

.ms-feature-list {
    list-style: none;
    padding: 0;
    margin: 35px 0 40px 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.ms-feature-list li {
    background: #C4C4D4;
    padding: 20px 24px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    font-weight:500;
    transition: all 0.25s ease;
    border: 1px solid rgba(0,0,0,0.03);
}

.ms-feature-list li:hover {
    transform: translateY(-4px);
    background-color:blue;
    color: white;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.08);
}
.ms-audience-section {
    position: relative;
    overflow: hidden;   /* prevents bleed into header */
}

.ms-audience-section::before {
    content: "";
    position: absolute;
    top: 0;              /* remove negative offset */
    left: 0;
    width: 100%;
    height: 120px;
    background: radial-gradient(
        circle at center,
        rgba(0,123,255,0.08),
        transparent 70%
    );
    pointer-events: none;
    z-index: -1;         /* safely behind section content */
}

/* =========================================
   MIND SAFETY – 3 STEP FLOW (REFINED)
========================================= */

.ms-plan-section.ms-plan-flow {
    padding: 20px 20px 20px 20px;
    margin-top: 30px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
}

.ms-plan-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Intro */

.ms-plan-intro {
    text-align: center;
    margin-bottom: 20px;
}

.ms-plan-intro h2 {
    font-size: 2.3rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.ms-plan-intro p {
    max-width: 1000px;
    margin: 0 auto;
    font-size: 1.4rem;
    line-height: 1.8;
    color: #444;
}

/* FLOW WRAPPER */

.ms-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    position: relative;
    margin-top: 0px;
    padding-top: 60px;
}

/* Horizontal line */

.ms-flow::before {
    content: "";
    position: absolute;
    top: 25px;
    left: 8%;
    right: 8%;
    height: 4px;
    background: rgba(0, 123, 255, 0.2);
    border-radius: 4px;
}

/* Each step */

.ms-flow-step {
    text-align: center;
    position: relative;
}

/* Node */

.ms-flow-node {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #007bff, #0041a8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px auto;
    box-shadow: 0 12px 30px rgba(0,123,255,0.25);
}

.ms-flow-num {
    color: #fff;
    font-weight: 700;
}

/* Card */

.ms-flow-card {
    background: #ffffff;
    padding: 35px 30px;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.05);
    text-align: left;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ms-flow-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 55px rgba(0,0,0,0.08);
}

.ms-flow-card h3 {
    font-size: 1.25rem;
    color: #007bff;
    margin-bottom: 15px;
    text-align: center;
    font-weight: 700;
}

.ms-flow-card p {
    font-size: 0.98rem;
    line-height: 1.75;
    color: #555;
}

/* CTA spacing */

.cta-wrapper {
    margin-top: 20px;
    text-align: center;
}

/* MOBILE */

@media (max-width: 992px) {

    .ms-flow {
        grid-template-columns: 1fr;
        gap: 50px;
        padding-top: 0;
    }

    .ms-flow::before {
        display: none;
    }

    .ms-plan-intro h2 {
        font-size: 2.2rem;
    }
}

.trial-benefits {
    background: #e9f7ef;
    padding: 20px 25px;
    border-radius: 6px;
    margin-bottom: 15px;
}

.trial-benefits ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.trial-benefits li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 8px;
    text-align: left;
    font-weight: 500;
}

.trial-benefits li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: #28a745;
    font-weight: bold;
}