/* Basic Reset & Body Styling */
body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: "Poppins", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color:white; /* Light grey background for outside the email */
}

.email-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align to top */
    padding: 0px 0px; /* Padding around the email */
    box-sizing: border-box;
    min-height: 100%;
	background-color:#F2F2F9;
}

.email-container {
    background-color: #4b6fff; /* Main blue background */
    color: #ffffff; /* Default text color for container */
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    /*border-radius: 10px;*/ /* Slight rounding */
    overflow: hidden; /* Important for containing elements and border-radius */
    position: relative;
    /*box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);*/
}

/* Header/Footer Image Styling */
.header-image,
.footer-image {
    width: 100%; /* Make images fill container width */
    display: block; /* Remove extra space below images */
    vertical-align: middle; /* Best practice */
    line-height: 1; /* Prevent potential line-height issues */
}

/* Content Area Styling */
.content {
    padding: 30px 40px; /* Padding inside the content area */
    position: relative; /* Keep stacking context */
    z-index: 2;
}

/* Headings */
.content h1 {
    font-size: 26px; /* Slightly smaller for T&C title */
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 15px;
    text-align: center;
    color: #ffffff;
    line-height: 1.3;
}

.content h2 {
    font-size: 20px;
    font-weight: 700;
    margin-top: 30px; /* More space before sections */
    margin-bottom: 15px;
    color: #ffffff;
    border-bottom: 1px solid #6a78f6; /* Subtle divider */
    padding-bottom: 8px;
}

.content h3 {
    font-size: 16px;
    font-weight: 600; /* Slightly less bold than h2 */
    margin-top: 20px;
    margin-bottom: 8px;
    color: #ffffff;
}

.content h4 {
    font-size: 15px;
    font-weight: 600;
    margin-top: 18px;
    margin-bottom: 6px;
    color: #ffffff;
}

/* Paragraphs */
.content p {
    font-size: 14px; /* Slightly smaller for dense text */
    line-height: 1.7; /* More line spacing for readability */
    margin-top: 0;
    margin-bottom: 16px;
    color: #ffffff;
}

/* Strong / Bold */
.content strong,
.content b {
    /* Style both b and strong */
    font-weight: 600; /* Or 700 if more emphasis needed */
}

/* Links */
.content a {
    color: #ffffff; /* White link */
    text-decoration: underline;
}

.content a:hover {
    text-decoration: none;
}

/* Lists */
.content ul {
    list-style: disc; /* Standard bullets */
    margin-top: 0;
    margin-bottom: 16px;
    padding-left: 25px; /* Indentation for bullets */
}

.content ul ul { /* Nested lists */
    list-style: circle; /* Different bullet */
    margin-top: 5px; /* Space before nested list */
    margin-bottom: 10px; /* Space after nested list */
    padding-left: 20px; /* Further indentation */
}

.content li {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 8px; /* Space between list items */
    color: #ffffff;
}


/* Table Styles */
.content .table-container { /* Optional wrapper for responsiveness */
     overflow-x: auto; /* Allows horizontal scroll on small screens */
     margin-bottom: 20px;
}

.content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0; /* Margin handled by container now */
    font-size: 13px; /* Smaller font for table */
}

.content th,
.content td {
    border: 1px solid #6A78F6; /* Lighter blue border */
    padding: 8px 10px;
    text-align: left;
    vertical-align: top; /* Align content to top of cell */
    color: #ffffff; /* Ensure text color */
    line-height: 1.5; /* Adjust line height for table */
}

.content th {
    font-weight: 600;
    background-color: rgba(0, 0, 0, 0.1); /* Subtle header background */
}


/* Helper Classes (Optional, used in HTML above) */
.content .center-text {
    text-align: center;
}

.content .warning {
    background-color: rgba(255, 255, 255, 0.1); /* Subtle highlight */
    padding: 10px 15px;
    border-radius: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-left: 4px solid #e84378; /* Use accent color */
    color: #ffffff;
}

.content .warning strong {
    color: #ffffff; /* Ensure strong text within warning is visible */
}

.content .section-divider {
    margin-top: 40px;
    border-top: 1px solid #6a78f6;
    border-bottom: none; /* Remove double border */
    padding-top: 20px;
    padding-bottom: 0;
    font-size: 16px; /* Smaller for this divider style */
    color: #ffffff; /* Lighter color */
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .email-wrapper {
       
    }
    .content {
        padding: 25px 20px;
    }
    .content h1 {
        font-size: 22px;
    }
    .content h2 {
        font-size: 18px;
    }
    .content h3 {
       font-size: 15px;
   }
    .content h4 {
       font-size: 14px;
   }
    .content p,
    .content li {
        font-size: 13px;
        line-height: 1.6;
    }
    .content ul {
        padding-left: 20px;
    }
    .content ul ul {
        padding-left: 18px;
    }
    .content table {
        font-size: 12px; /* Even smaller for mobile tables */
    }
     .content th,
    .content td {
        padding: 6px 8px;
    }
}