/* ======================================================================== */
/* -------------------------- BECOME A NOTARY PAGE ------------------------ */
/* ======================================================================== */


.banner-image-become {
	background-image: url('https://notarypublicassociation.lightning.force.com/cms/media/MCLONXS2ZGPBBOVF2CRH37NPZJ6U?version=3.1');
	background-size: contain; /* Adjusts image to cover the entire container */
	background-position: center right; /* Centers the image */
	background-repeat: no-repeat; /* Prevents the image from repeating */
	margin-top: 20px;
	margin-bottom: 20px;
}

/* ------------- Sticky Menu ------------- */
.sticky-menuWrapper {
	position: relative; /* Default position */
	top: 0;
	width: 100%;
	background: white;
	padding: 10px;
	z-index: 100;
	transition: all 0.3s ease-in-out;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	gap: 10px;
}

#sticky-menuLink {
	text-decoration: none !important;
}

.sticky-menuButton {
	display: block;
	background: #fff;
	padding: 10px 12px;
	border-radius: 8px;
	color: #333;
	width: 120px;
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	height: 35px;
	align-content: center;
	box-sizing: content-box;
}

.sticky-menuButton:hover {
	background: #78b4aa;
	color: #fff;
	text-decoration: none;
	transition: background-color 0.3s ease-in-out;
}

.sticky-menuButton.active {
	background-color: #217c7c;
	color: #fff;
	transition: background-color 0.3s ease-in-out;
}

.sticky {
 	position: fixed;
 	top: 89px;
	left: 0;
	z-index: 100;
	width: 100%;
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
	justify-content: center;	
}

.divider {
	background-color: #e3e8ef;
	width: 1px;
	height: 16px;
	margin: auto 21px auto 21px;
}

/* ------------- Requirements Box ------------- */

.requirements-list_Wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
	border: 1px solid #e3e8ef;
	padding: 15px 20px;
	border-radius: 16px;
}

.requirements-list {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	line-height: 100%;
	gap: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}

.requirements-list_Text {
	font-weight: 500;
	font-size: 14px;
}

.horizontal-divider {
	background-color: #e3e8ef;
	width: 100%;
	height: 1px;
}

/* ------------- Traditional - Banner ------------- */

.banner-image-traditional {
	background-image: url('https://notarypublicassociation.lightning.force.com/cms/media/MCIWAB35HR7VFLXPLK2WMT227FK4?version=1.1');
	background-size: contain; /* Adjusts image to cover the entire container */
	background-position: bottom; /* Centers the image */
	background-repeat: no-repeat; /* Prevents the image from repeating */
	margin-bottom: -20px!important;
}
    
/* Hero Section Pill */

.HeroSection_pillWrapper {
	margin-bottom: 10px;
	margin-top: 40px;
}

.banner-section-pill {
	background-color: white;
	font-weight: 500;
	line-height: 1;
	padding: 8px 12px;
	align-items: center;
	justify-content: center;
	border-radius: 64px;
	display: flex;
	gap: 8px;
	font-size: 18px;
	flex: 0;
	width: fit-content;
}

.themePill {
	color: #217c7c;
	border: 1px solid rgb(203, 234, 233);
	background-color: white;
	
}

.greenPill {
	background-color: #d7eae2;
	color: #217c7c;
	border: 1px solid rgb(203, 234, 233);
	box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(255, 255, 255, 1);
}

.banner-section-pill-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 18px;
}

.banner-section-pill-icon i.fa-solid {
    font-size: 1.125rem !important;
}

.banner-section-pill-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .25rem;
	font-size: 18px;
	font-weight: 400;
	color: #217c7c;
}

.banner-section-heading {
	margin: 24px 0px;
	color: inherit;
	font-size: 40px;
	font-weight: 700;
	line-height: 120%;
}

.banner-section-description {
	margin: 0px 0px 32px;
	color: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 150%;
}

.highlight {
	color: #217c7c;
	font-weight: 600;
}

.inline_doubleButton {
    display: flex;
    justify-content: space-between;
    gap: 50px;
}

.ContentSection_contentImage_traditional {
	background-image: url(https://notarypublicassociation.lightning.force.com/notary/sfsites/c/cms/delivery/media/MCSQ7GXZPRT5HNREC3C5L7PSAJKQ?version=1.1&channelId=0apPP00000005Kf);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.ContentSection_contentImage img {
    object-fit: cover;
    width: 100%;
    height: 600px;
}
    
/* ------------- Traditional - Packages Table ------------- */
.gradient-column {
	background: linear-gradient(to bottom, #B2E190, #E0F89E); /* Vertical gradient */
	height: 100%; /* Ensure the column is fully covered */
	min-width: 100%; /* Optional: Ensure full width if necessary */
	padding: 0px; /* Optional: Add padding inside the column */
}

/* Table Container */
.table-container {
	display: flex;
	background-color: white;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 0px 25px rgba(0, 0, 0, 0.1);
	width: 100%;
}

/* Table Styling */
.comparison-table {
	width: 100%;
	border-collapse: collapse;
	text-align: center;
}

/* Table Header */
.table-header th {
	font-size: 18px;
	font-weight: bold;
	padding: 15px;
	text-align: center;
}

.empty-header {
	background: white;
	text-align: left;
}

.package {
	font-weight: bold;
	text-align: center;
}

.price {
	font-size: 16px;
	display: block;
	color: #333;
	text-align: center;
}

th.package.package-essential {
	color: #217c7c;
}

th.package.package-enhanced {
	color: #009E96;
}

th.package.package-ultimate {
	color: #3754A5;
}

/* Row Styling */
.table-body .table-row td {
	padding: 15px;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	border-left: 1px solid #eee;
}

/* Feature Column */
.feature-name {
	text-align: left;
	font-weight: bold;
	border-left: 0px !important;
}


td.check.check-essential,
td.check.check-enhanced,
td.check.check-ultimate {
	text-align: center;
}

i.fa-solid.fa-circle-xmark {
	color: #f8164f;
}

i.fa-solid.fa-circle-check.essential {
	color: #217c7c;
}

i.fa-solid.fa-circle-check.enhanced {
	color: #009E96;
}

i.fa-solid.fa-circle-check.ultimate {
	color: #3754A5;
}

.fas,
.fa-solid {
	font-weight: 900;
	font-size: 1.5rem;
}

/* Last Row (Merged) */
.get-started-cell {
	text-align: center;
	border: 0px !important;
	padding: 0px !important;
}

.get-started-button {
	background-color: #1e5bff !important;
	color: #ffffff !important;
	padding: 12px 20px;
	font-size: 16px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	width: 100%;
	height: 50px;
}

/* ------------- Traditional - FAQ ------------- */
.traditional-faq-container {
	background-color: #90dfa2;
}

  
/* ----------------------------------------------------- */
/* ============ Commission Comparison Table ============ */
/* ----------------------------------------------------- */

     /* Component Height */
	.comparison-table-html-1 .lwc-1nf8r8ii43j.cb-outputRichText-container { height: 775px; }
	.comparison-table-html-2 .lwc-1nf8r8ii43j.cb-outputRichText-container { height: 585px; }
	.comparison-table-html-3 .lwc-1nf8r8ii43j.cb-outputRichText-container { height: 700px; }

     /* Table Title */
	.chart-title-wrapper {
	    	display: flex;
	    	flex-direction: column;
	    	align-items: center;
	    	justify-content: center;
	    	width: 1100px;
		text-align: center;
    		margin: 0 auto;
    		padding: 12px 0;
	}
	
	h1.chart-title {
		font-size: 40px;
		text-align: center;
		font-weight: 500;
	}

	h3.chart-title {
		font-size: 24px;
		text-align: center;
		padding: 12px 0px;
		font-weight: 500;
	}

	

     /* Container */
	.comparison-container-wrapper {
    		padding-bottom: 30px;
	}

	.comparison-container,
	.comparison-container-one,
	.comparison-container-two,
	.comparison-container-three {
		position: relative;
		width: 1056px;
		margin: auto;
		font-family: Xfinity Standard;
	}

/* ----- Layer 1: Row Layer ----- */
	.row-layer {
		display: grid;
		position: relative;
		width: 1056px;
		height: 100%;
		z-index: 1;
	}
	
	.table-one.row-layer { grid-template-rows: 90px 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
	.table-two.row-layer { grid-template-rows: 90px 1fr 1fr 1fr 1fr; }
	.table-three.row-layer { grid-template-rows: 90px 1fr 1fr 1fr 1fr 195px; }

     /* Row 1 */
	.row-header {
		background-color: unset;
		height: 90px
	}

     /* Rows 2-8 */
	.row {
		background-color: #217c7c;
		margin-bottom: 10px;
	}

	.table-one.row { height: 80px; }
	.table-two.row { height: 100px; }
	.table-three.row { height: 80px; }
	
	.table-three.row.row-summary {
        	height: 185px;
    	}
	
/* ----- Layer 2: Column Layer ----- */
	.column-layer {
		display: grid;
		grid-template-columns: 250px 245px 245px auto;
		position: absolute;
		width: 1056px;
		height: 100%;
		z-index: 2;
		top: 0;
	}

     /* Column 1 */
	.label-column {
	    	background-color: unset;
	    	width: 250px;
	}

     /* Columns 2-4 */
	.column.text-column {
		background-color: rgba(143, 210, 199, 0.5);
		text-align: center;
		font-size: 18px;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.table-one.column { height: 750px; }
	.table-two.column { height: 560px; }
	.table-three.column { height: 675px; }

	.text-column {
		width: 232px;
	}

	.blank-text-column {
		background-color: unset;
		width: 232px;
	}

/* ----- Layer 3: Text Layer ----- */
	.text-layer {
		display: grid;
		grid-template-columns: 250px 245px 245px auto;
		position: absolute;
		width: 1056px;
		height: 100%;
		z-index: 3;
		top: 0;
	}

	.table-one.text-layer { grid-template-rows: 90px 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
	.table-two.text-layer { grid-template-rows: 90px 1fr 1fr 1fr 1fr; }
	.table-three.text-layer { grid-template-rows: 90px 1fr 1fr 1fr 1fr 185px; }

     /* Header Row - Same Size for all Tables */
	.label-header {
		width: 250px;
		height: 90px;
	}

	.text-header {
		height: 90px;
		font-size: 22px;
		font-weight: 500;
		align-content: flex-start;
		padding: 20px 11px 0px;
		text-align: center;
		width: 232px;
	}
	
	.text-header.sub-header {
		font-size: 14px;
		line-height: 1;
		display: inline-block;
		padding: 0;
		margin: 0;
		height: fit-content;
    		width: 210px;
	}

     /* Header Column - Width is same for all, Height is different */
	.label-wrapper,
	.label-wrapper-summary {
		display: flex;
		align-items: center;
		padding-left: 25px;
		width: 250px;
	}

	.label-wrapper-summary {
		height: 80px;
	}

	.table-one.label-wrapper { height: 80px; }
	.table-two.label-wrapper { height: 100px; }
	.table-three.label-wrapper { height: 80px; }

	.label-icon-wrapper {
		width: 30px;
		text-align: left;
	}
	
	i#label-icon {
		font-size: 19px;
		color: #57a9a4;
	}
			
	.label {
		color: white;
		font-weight: 400;
		font-size: 17px;
	}

     /* Columns 2-3 */
	.table-one.text,
	.table-two.text,
	.table-three.text {
		text-align: center;
		font-weight: 400;
		font-size: 16px;
		align-content: center;
		padding: 10px 11px;
		width: 232px;
	}

	.table-one.text { height: 80px; }
	.table-two.text { height: 100px; }
	.table-three.text { height: 80px; }

	.table-three.text.text-summary {
	    height: 185px;
	    align-content: flex-start!important;
	    text-align: center;
	    font-weight: 400;
	    font-size: 16px;
	    align-content: center;
	    padding: 10px 11px;
	    width: 232px;
	}
	

	
	
/* ====== Tablet ===== */
	@media (max-width: 1025px) {
		/* Component Height */
		.comparison-table-html-1 .lwc-1nf8r8ii43j.cb-outputRichText-container { height: 790px; }
		.comparison-table-html-2 .lwc-1nf8r8ii43j.cb-outputRichText-container { height: 592px; }
		.comparison-table-html-3 .lwc-1nf8r8ii43j.cb-outputRichText-container { height: 693px; }
		
	     /* Container */
		.comparison-container,
		.comparison-container-one,
		.comparison-container-two,
		.comparison-container-three {
			width: 826px;
		}
     
	/* ----- Layer 1: Row Layer ----- */
		.row-layer {    
			width: 826px;
		}

		.table-one.row-layer {grid-template-rows: 80px 1fr 1fr 1fr 1fr 1fr 1fr 1fr;}
		.table-two.row-layer {grid-template-rows: 80px 1fr 1fr 1fr 1fr;}	
		.table-three.row-layer {grid-template-rows: 80px 1fr 1fr 1fr 1fr 185px;}

		
	     /* Row 1 */
		.row-header {
			height: 80px
		}

	     /* Rows 2-8 */
		.row {
			margin-bottom: 6px;
		}

		.table-one.row { height: 90px; }
		.table-two.row { height: 110px; }
		.table-three.row { height: 90px; }
		
		.table-three.row.row-summary {
	        	height: 185px;
	    	}

	/* ----- Layer 2: Column Layer ----- */
		.column-layer {
			grid-template-columns: 210px 195px 195px 195px;
			width: 826px;
		}

	     /* Column 1 */
		.label-column {
		    	width: 210px;
		}
	
	     /* Columns 2-4 */
		.column.text-column {
			background-color: rgba(143, 210, 205, 0.5);
			text-align: center;
			font-size: 18px;
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	
		.table-one.column { height: 770px; }
		.table-two.column { height: 572px; }
		.table-three.column { height: 673px; }
	
		.text-column {
			width: 185px;
		}
	
		.blank-text-column {
			width: 185px;
		}
		
	/* ----- Layer 3: Text Layer ----- */
		.text-layer {
			width: 826px;
			grid-template-columns: 210px 195px 195px 195px;
		}

		.table-one.text-layer { grid-template-rows: 80px 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
		.table-two.text-layer { grid-template-rows: 80px 1fr 1fr 1fr 1fr; }
		.table-three.text-layer { grid-template-rows: 80px 1fr 1fr 1fr 1fr 185px; }
	
	     /* Header Row - Same Size for all Tables */
		.label-header {
			width: 210px;
			height: 80px;
		}

		.text-header {
			width: 185px;
			height: 80px;
			font-size: 18px;
			padding: 15px 8px 0px;
		}

		.text-header.sub-header {
    			font-size: 12px;
			height: fit-content;
 			width: 165px;
		}

	     /* Header Column - Width is same for all, Height is different */
		.label-wrapper,
		.label-wrapper-summary {
			padding-left: 15px;
    			width: 210px;
    			margin-bottom: 6px;
		}

		.label-wrapper-summary {
			height: 90px;
		}
	
		.table-one.label-wrapper { height: 90px; }
		.table-two.label-wrapper { height: 110px; }
		.table-three.label-wrapper { height: 90px; }
	
		.label-icon-wrapper {
			width: 25px;
		}
		
		i#label-icon {
			font-size: 17px;
		}
				
		.label {
			font-size: 15px;
		}

	     /* Columns 2-4 */
		.table-one.text,
		.table-two.text,
		.table-three.text {
			font-size: 14px;
			padding: 10px 11px;
			width: 185px;
		}

		.table-one.text { height: 90px; }
		.table-two.text { height: 110px; }
		.table-three.text { height: 90px; }
	
		.table-three.text.text-summary {
		    height: 185px;
		    font-size: 14px;
		    width: 185px;
		}
	}
		
	/* Hide Icons on 860 screen */
	@media (max-width: 860px) {
		.comparison-table-html-1 .lwc-1nf8r8ii43j.cb-outputRichText-container { height: 790px; }
		.comparison-table-html-2 .lwc-1nf8r8ii43j.cb-outputRichText-container { height: 562px; }
		.comparison-table-html-3 .lwc-1nf8r8ii43j.cb-outputRichText-container { height: 688px; }

		
	    	.comparison-container,
		.comparison-container-one,
		.comparison-container-two,
		.comparison-container-three {
		        width: 695px;
		        margin: 0 auto;
		        display: flex;
		        flex-direction: column;
		        align-items: center;
		        justify-content: center;
	    	}

	/* ----- Layer 1: Row Layer ----- */
	    	.row-layer {
        		width: 710px;
        		margin: 0 auto;
    		}

		.table-one.row-layer {grid-template-rows: 80px 1fr 1fr 1fr 1fr 1fr 1fr 1fr;}
		.table-two.row-layer {grid-template-rows: 80px 1fr 1fr 1fr 1fr;}	
		.table-three.row-layer {grid-template-rows: 80px 1fr 1fr 1fr 1fr 200px;}

		/* Row 1 */
		.row-header {
        		height: 80px;
    		}

		/* Rows 2-8 */
		.row {
			margin-bottom: 6px;
		}
		
		.table-one.row { height: 90px; }
		.table-two.row { height: 105px; }
		.table-three.row { height: 85px; }

		.table-three.row.row-summary {
	        	height: 200px;
	    	}

	/* ----- Layer 2: Column Layer ----- */
		.column-layer {
        		width: 695px;
        		grid-template-columns: 180px 175px 175px 165px;
    		}

		.table-one.column { height: 770px; }
		.table-two.column { height: 542px; }
		.table-three.column { height: 668px; }

		/* Column 1 */
		.label-column {
        		width: 180px;
        		margin: 0 auto;
		}

		/* Columns 2-4 */
		.text-column {
        		width: 165px;
    		}

	/* ----- Layer 3: Text Layer ----- */
		.text-layer {
        		width: 695px;
        		grid-template-columns: 180px 175px 175px 165px;
    		}

		.table-one.text-layer {grid-template-rows: 80px 1fr 1fr 1fr 1fr 1fr 1fr 1fr;}
		.table-two.text-layer {grid-template-rows: 80px 1fr 1fr 1fr 1fr;}	
		.table-three.text-layer {grid-template-rows: 80px 1fr 1fr 1fr 1fr 200px;}

		/* Header Row - Same Size for all Tables */
		.label-header {
        		width: 180px;
        		height: 80px;
    		}

		.text-header {
			width: 165px;
        		height: 80px;
        		font-size: 16px;
        		padding: 15px 8px 0px;
		}

		.text-header.sub-header {
 			width: 149px;
		}

		/* Header Column - Width is same for all, Height is different */
		.label-wrapper {
        		padding-left: 15px;
        		width: 180px;
        		margin-bottom: 6px
		}
		
	    	.label-icon-wrapper {
        		display: none;
		}

		.label {
        		font-size: 15px;
		}

		.table-one.label-wrapper { height: 90px }	
		.table-two.label-wrapper { height: 105px }
		.table-three.label-wrapper { height: 85px }

		/* Columns 2-4 */
		.table-one.text,
		.table-two.text,
		.table-three.text {
        		font-size: 14px;
        		width: 165px;
			padding: 8px;
    		}

		.table-one.text { height: 90px; }
		.table-two.text { height: 105px; }
		.table-three.text { height: 85px; }

		.table-three.text.text-summary {
		    height: 200px;
		    font-size: 14px;
		    width: 165px;
		}
	        
	}

	/* Scroll on mobile */
	@media (max-width: 768px) {
	    	.comparison-container {
	        	overflow: scroll;
	    	}
	}