/* ============================================= */
/* TABLE OF CONTENTS                             */
/* ============================================= */
/*
1. GLOBAL RESETS & BASE STYLES
  1.1 Box Model Reset
  1.2 Typography
  1.3 Links & Images
  1.4 Utility Classes

2. LAYOUT COMPONENTS
  2.1 Header
  2.2 Page Content
  2.3 Footer

3. CONFIRMATION PAGE STYLES
  3.1 Thank You Container
  3.2 Signup Form
  3.3 Form Elements
  3.4 Error Handling

4. RESPONSIVE ADJUSTMENTS
  4.1 Tablet & Small Laptop
  4.2 Mobile Devices
*/
/* ============================================= */


/* ============================================= */
/* 1. GLOBAL RESETS & BASE STYLES                */
/* ============================================= */

/* 1.1 Box Model Reset */
*, *:after, *:before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
    font-style: normal;
}

h1, h2, h3, h4, h5, h6, ul, p {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

/* 1.2 Typography */
p {
    color: #314150;
    font-size: clamp(16px, 0.938vw, 18px);
    font-weight: 400;
    line-height: 150%;
}

/* 1.3 Links & Images */
a {
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    color: #314150;
    display: inline-block;
}

a:hover {
    color: #51B55B;
}

img {
    max-width: 100%;
    height: auto;
    transition: all 0.3s ease-in-out;
    display: block;
}

/* 1.4 Utility Classes */
.container {
    max-width: 1315px;
    width: 100%;
    margin: 0 auto;
    padding: 0 clamp(16px, 1.563vw, 30px);
}

.max-container {
    max-width: 1820px;
    width: 100%;
    margin: 0 auto;
    padding: 0 clamp(16px, 1.563vw, 30px);
}


/* ============================================= */
/* 2. LAYOUT COMPONENTS                          */
/* ============================================= */

/* 2.1 Header */
.header {
    padding: clamp(16px, 1.25vw, 24px) 0;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 2px 4px 32px 0px rgba(14.000000000000005, 86, 158, 0.05);
}

.logo img {
    max-width: clamp(260px, 16.771vw, 322px);
    width: 100%;
}

.logo a {
    display: block;
    max-width: max-content;
    margin: 0 auto;
}

/* 2.2 Page Content */
.page-content-sec {
    padding: clamp(32px, 3.125vw, 60px) 0;
}

.page-content {
    padding: clamp(16px, 1.042vw, 20px);
    border-radius: 16px;
    border: solid 5px #022C55;
}

.page-content p {
    padding: clamp(5px, 0.521vw, 10px) 0;
}

.page-content ul li {
    list-style: disc;
    color: #314150;
    font-size: clamp(16px, 0.938vw, 18px);
    font-weight: 400;
    line-height: 150%;
}

.page-content ul {
    margin: 0;
    padding-left: clamp(20px, 1.563vw, 30px);
}

.page-content h2 {
    font-size: clamp(20px, 1.25vw, 24px);
    font-weight: 700;
    color: #314150;
    line-height: 125%;
    margin: 16px 0 10px 0;
}

/* 2.3 Footer */
.footer {
    background: #022C55;
    padding: clamp(24px, 2.5vw, 48px) clamp(16px, 1.25vw, 24px) clamp(24px, 1.667vw, 32px);
    margin-top: clamp(16px, 1.25vw, 24px);
}

.ft-logo {
    padding-bottom: clamp(24px, 2.917vw, 56px);
    border-bottom: solid 1px #4A8DCD;
}

.ft-logo a {
    display: block;
    max-width: max-content;
}

.ft-logo img {
    max-width: clamp(260px, 16.771vw, 322px);
    width: 100%;
}

.ft-menu-list li a,
.ft-menu p {
    font-family: "Fira Sans", Sans-serif;
    font-size: clamp(16px, 1.389vw, 20px);
    font-weight: 400;
    line-height: 125%;
    color: #fff;
    position: relative;
}

.ft-menu-list li a:hover {
    color: #51B55B;
}

.ft-menu-list li:not(:last-of-type) a::before {
    content: '';
    position: absolute;
    top: 0;
    right: -24px;
    height: 100%;
    width: 2px;
    background: #fff;
}

.ft-menu-list {
    display: flex;
    gap: 40px;
}

.ft-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: clamp(24px, 2.5vw, 48px);
    gap: 16px;
}


/* ============================================= */
/* 3. CONFIRMATION PAGE STYLES                   */
/* ============================================= */

/* 3.1 Thank You Container */
.thank-you-container {
    max-width: 950px;
    margin: 65px auto;
    padding: 0 20px;
    text-align: center;
}

.thank-you-container h1 {
    font-size: 64px;
    font-weight: 700;
    margin-bottom: 67px;
    font-family: "Averta Bold", Sans-serif;
}

.confirmation-message {
    font-size: 20px;
    color: #555;
    margin-bottom: 67px;
}
div#confirm a {
    margin: 0;
}
/* 3.2 Signup Form */
.signup-box {
    background-color: #f9fcf8;
    padding: 30px 25px;
    border-radius: 0;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    text-align: center;
}

.form-heading-parts {
    display: flex;
    align-items: center;
    gap: 45px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.form-heading-parts .icon img {
    width: 100%;
    height: 92px;
    object-fit: cover;
    object-position: center center;
}

.form-heading-parts h2 {
    font-family: "Averta Bold", Sans-serif;
    font-size: 28px;
    line-height: 160%;
    color: #000000;
}

.signup-box .subtext {
    text-align: center;
    color: #383838;
    font-family: "Public Sans", Sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 160%;
    margin-bottom: 40px;
    width: 100%;
    padding: 0 4px 0 12px;
}

/* 3.3 Form Elements */
#signup-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
}

#signup-form input[type="email"] {
    width: 100%;
    max-width: 536px;
    font-size: 16px;
    outline: 0;
    border: 1px solid #ccc;
    color: #353535;
    background-color: transparent;
    -webkit-appearance: initial;
    -moz-appearance: initial;
    appearance: initial;
    height: 62px;
    padding: 16px;
    margin-bottom: 33px;
}

#signup-form button, #signup-form a {
    color: #ffffff;
    background-color: #70ac48;
    border: 2px solid #70ac48;
    font-family: "Public Sans", Sans-serif;
    font-size: 25px;
    font-weight: 700;
    padding: 15px;
    outline: 0;
    margin: 0;
    transition: all 0.3s linear;
    text-align: center;
    height: 62px;
    width: 100%;
    max-width: 250px;
}

#signup-form button:hover, #signup-form a:hover {
    background-color: #689f38;
}

#signup-form .disclaimer {
    margin-top: 32px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

#signup-form input:checked {
    background-color: #000000;
    border-color: #000000;
}

/* 3.4 Error Handling */
label.error, .error-message {
    color: #d93025;
    font-size: 14px;
    margin-bottom: 10px;
    margin-left: 4px;
    text-align: left;
    display: block;
    font-weight: 500;
}

input.input-error {
    border: 1px solid #d93025 !important;
    background-color: #fff6f6;
}

input[type="checkbox"].input-error {
    outline: 2px solid #d93025;
}

.disclaimer label.error-message {
    color: #d93025;
    font-size: 14px;
    margin-top: 10px;
    margin-left: 4px;
    text-align: left;
    display: block;
    font-weight: 500;
}


/* ============================================= */
/* 4. RESPONSIVE ADJUSTMENTS                     */
/* ============================================= */

/* 4.1 Tablet & Small Laptop */
@media (max-width: 950px) {
    .thank-you-container {
        margin: 40px auto;
        padding: 0 15px;
    }

    .thank-you-container h1 {
        font-size: 48px;
        margin-bottom: 40px;
    }

    .confirmation-message {
        font-size: 18px;
        margin-bottom: 40px;
    }

    .form-heading-parts {
        gap: 30px;
    }

    .form-heading-parts h2 {
        font-size: 24px;
    }

    .signup-box .subtext {
        font-size: 20px;
    }

    #signup-form button, #signup-form a {
        font-size: 20px;
        height: 54px;
        max-width: 200px;
    }
}

/* 4.2 Mobile Devices */
@media (max-width: 767px) {
    /* Footer adjustments */
    .ft-logo a {
        margin: 0 auto;
    }

    .ft-menu {
        flex-wrap: wrap;
    }

    .ft-menu .ft-menu-list, .ft-menu p {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* Confirmation page adjustments */
    .thank-you-container h1 {
        margin-bottom: 16px;
        font-size: 35px;
    }

    .confirmation-message {
        margin-bottom: 16px;
        font-size: 18px;
    }

    .form-heading-parts h2 {
        font-size: 24px;
    }

    .signup-box .subtext {
        font-size: 20px;
    }

    .form-heading-parts {
        gap: 30px;
        flex-direction: column;
        text-align: center;
    }

    .form-heading-parts .icon img {
        height: 72px;
    }

    #signup-form {
        width: 100%;
    }

    #signup-form input[type="email"] {
        height: 50px;
        padding: 12px;
        font-size: 14px;
    }

    #signup-form button, #signup-form a {
        font-size: 18px;
        padding: 12px;
        height: 50px;
        width: 100%;
        max-width: 100%;
    }

    .disclaimer {
        flex-direction: column;
        font-size: 12px;
        padding: 0 10px;
    }

    .disclaimer label.error-message {
        font-size: 12px;
    }

    /* Logo adjustments */
    #confirm.logo {
        text-align: center;
    }

    #confirm.logo a {
        margin: 0 auto;
        display: inline-block;
    }
}

@media (max-width: 600px) {
    .form-heading-parts {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .form-heading-parts h2 {
        text-align: center;
        font-size: 22px;
    }
}