@font-face {
    font-family: 'Xfinity Standard';
    src: url('/resource/XfinityStandardFont') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* ======================================================================== */
/* ------------------------------- BUTTONS -------------------------------- */
/* ======================================================================== */

.main {
    flex-grow: 1;
    gap: 24px;
}

/* ------------- HERO BUTTON ------------- */

/* Hero Button Container */
.HeroSection_buttonWrapper {
    	margin-top: 78px;
    	display: flex;
    	flex-direction: column;
    	align-items: flex-start;
}
    
/* Hero Button Styling */
.HeroSection_button {
        background-color: #217c7c!important;
    	border: none;
    	font-weight: 700;
    	color: #fff;
    	font-size: 18px;
    	cursor: pointer;
    	line-height: 1;
    	display: flex;
    	align-items: center;
    	justify-content: center;
}

a.HeroSection_button.Button_pillButton.Button_arrowButton {
    text-decoration: none;
    color: #fff;
}
    
/* Hero Button Hover */
.HeroSection_button.Button_arrowButton:hover {
        gap: 40px;
        transition: gap .3s ease;
}
        
.HeroSection_button:hover .Button_arrowWrapper {
    	transform: rotate(0deg);
        transition: transform .3s ease;
}

/* Content Button */
    
.ContentSection_button {
            background-color: #4762ad;
            border: none;
            font-weight: 700;
            color: #217c7c;
            font-size: 18px;
            cursor: pointer;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
}

/* ------------- PILL BUTTON ------------- */
.Button_pillButton {
        border-radius: 1000px;
}
    
/* ------------- ARROW BUTTON ------------- */
.Button_arrowWrapper {
    	width: 44px;
    	height: 44px;
    	border-radius: 100%;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	font-size: 24px;
    	background-color: #fff;
    	color: #217c7c;
    	transform: rotate(-45deg);
    	transition: transform .3s ease;
    	flex-shrink: 0;
}
    
.Button_arrowButton {
        padding: 6px 6px 6px 32px;
    	gap: 25px;
    	transition: gap .3s ease;
}
    
/* ------------- FLOATING BUTTON ------------- */    
/* Button Floating Animation */
.Button_buttonAnimation {
        cursor: pointer;
        transition: all 0.3s ease-in-out;
        position: relative;
        overflow: hidden;
        animation: floating 2s infinite ease-in-out;
}

/* Floating Up & Down Effect */
@keyframes floating {
        0% {
		transform: translateY(0);
        }

        50% {
            	transform: translateY(-8px);
        }

        /* Moves up */
        100% {
            	transform: translateY(0);
        }
}    

/* ======================================================================== */
/* ------------------------------- SECTIONS ------------------------------- */
/* ======================================================================== */
    
/* ------------- HERO SECTION ------------- */
/* Section Container */
.Section_section {
	width:100%;
	padding-left: 24px;
	padding-right: 24px;
}
    
/* 1st Inner Column General Attributes */
.HeroSection_sectionBackground {
	width: 100%; /* Makes it full width */
	position: relative;
	padding-right: 5%;
	padding-left: 5%;
	overflow: clip;
}

.TableSection_sectionBackground {
	width: 100%;
	position: relative;
	padding-right: 0;
	padding-left: 0;
	overflow: clip;
    margin-top: 64px;
}

/* 2nd Inner Column General Attributes */
.HeroSection_section {
        margin: auto;
        width: 100%;
}

.HeroSection_sectionLarge {
        max-width: 1440px;
}
    
@media (max-width: 1024px) {
	.HeroSection_sectionBackground {
		padding-right: 3%;
		padding-left: 3%;
	}
	
	.HeroSection_sectionMedium {
		max-width: 90%;
        }
	
	.TableSection_sectionMedium {
		max-width: 100%;
        }

	.HeroSection_content {
		padding: 25px 0;
	}
}
    
@media (max-width: 768px) {
    	.HeroSection_sectionSmall {
        	max-width: 90%;
        }

	.TableSection_sectionSmall {
		max-width: 100%;
        }

	.HeroSection_content {
		padding: 25px 0;
	}
}
    
.HeroSection_container {
        display: flex;
        position: relative;
        align-items: stretch;
}

.TableSection_container {
        display: flex;
        position: relative;
        align-items: stretch;
	flex-direction: column;
	gap: 24px;
	padding: 44px 0;
}
    
/* Content */
.HeroSection_content {
    	display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        z-index: 5;
        flex-shrink: 0;
        width: auto;
        padding: 100px 0;
}
    
.HeroSection_contentDescription {
        margin: 0px;
        font-size: 18px;
    	line-height: 150%;
    	font-weight: 400;
		width: 510px;
}
    
/* ------------- CONTENT SECTION ------------- */  

/* 1st Inner Column General Attributes */
.ContentSection_sectionBackground {
    	width: 100%; /* Makes it full width */
        position: relative;
        padding-right: 5%;
        padding-left: 5%;
        overflow: clip;
}
    
/* 2nd Inner Column General Attributes */
.ContentSection_section {
        margin: auto;
        width: 100%;
}
    
.ContentSection_sectionLarge {
        max-width: 1040px;
}
    
@media (max-width: 1024px) {
    	.ContentSection_sectionMedium {
        	max-width: 800px;
        }
}
    
@media (max-width: 768px) {
    	.ContentSection_sectionSmall {
        	max-width: 480px;
        }
	
		.ContentSection_content {
	        padding: 25px 0;
		}
}
    
.ContentSection_container {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: space-evenly;
}
        
.ServicesSection_container {
        display: flex;
        position: relative;
        flex-direction: column;
        gap: 48px;
}
    
.ContentSection_buttonSectionLarge {
        max-width: 1440px;
}
    
.ContentSection_buttonSectionMedium {
        max-width: 1440px;
}
    
.ContentSection_buttonSectionSmall {
        max-width: 1440px;
}
    
/* Content */
.ContentSection_content {
    	display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        z-index: 5;
        flex-shrink: 0;
        width: auto;
        padding: 50px 0;
}

.ContentSection_contentColumns {
	width: 100%;
	display: flex;
	gap: 5%;
	border: none;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0px;
	flex-flow: row;
	margin-bottom: 0px;
	min-width: 0px;
	max-width: 100%;
	-webkit-box-align: stretch;
	align-items: center;
	border-radius: 0px;
	background: transparent;
}

.ContentSection_contentImage {
	width: 50%;
	position: relative;
	overflow: hidden;
	display: flex;
	gap: 0px;
	border: none;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0px;
	flex-flow: column;
	margin-bottom: 0px;
	min-width: 0px;
	max-width: 100%;
	border-radius: 24px;
	background: rgb(233, 246, 251);
	height: 600px;
}

.ContentSection_contentInfo {
	width: 50%;
	text-align: left;
	display: flex;
	gap: 0px;
	border: none;
	margin-left: 0px;
	margin-right: 0px;
	padding: 48px 0px;
	flex-flow: column;
	margin-bottom: 0px;
	min-width: 0px;
	max-width: 100%;
	align-items: flex-start;
	border-radius: 0px;
	-webkit-box-pack: center;
	justify-content: center;
	background: transparent;
}
    
.ProductSection_content {
    	display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        z-index: 5;
        flex-shrink: 0;
        width: auto;
        padding: 50px;
        margin-top: 50px;
        margin-bottom: 50px;
        background-color: #fff;
}
    
.headingSection {
        text-align: center;
        display: block;
        gap: 0px;
        border: none;
        margin-left: auto;
        margin-right: auto;
        padding: 0px;
        flex-wrap: nowrap;
        margin-bottom: 0px;
        min-width: 0px;
        align-items: center;
        border-radius: 0px;
        -webkit-box-pack: center;
        justify-content: center;
        flex-direction: column;
        background: transparent;
}

.ServicesSection_greenContentColumn {
     	display: flex;
    	gap: 0px;
    	border: none;
    	margin-left: 0px;
    	margin-right: 0px;
    	flex-flow: column;
    	margin-bottom: 0px;
    	min-width: 0px;
    	max-width: 100%;
    	background: rgb(233, 246, 251);
    	padding: 8px;
    	border-radius: 20px;
    	height: 100%;
    	transition: background-color 0.3s;   
}

/* Additional Elements */
.none-y-padding {
       	padding-top: 0;
        padding-bottom: 0;
}
    
.none-x-padding {
        padding-left: 0;
        padding-right: 0;
}
    
.has-border-radius {
        border-radius: 24px;
}
    
.med-y-padding {
        padding-top: 64px;
        padding-bottom: 64px;
}
    
/* Text Elements */
.headingXL h1 {
        margin: 0;
        color: inherit;
        font-size: 56px!important;
        font-weight: 700;
        line-height: 110%;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        text-align: center;
        margin: 0 auto;
}

.has-top-margin {
	margin-top: -180px;
	z-index: 3;
}

.has-auto-margin {
	margin: 0 auto;
	width: 100%;
}

.tableHeader h5 {
	font-weight: 500!important;
}

/* ------------- BANNER STYLES ------------- */

.HeroSection_green-wavesBackground {
        background-image: url('https://notarypublicassociation.lightning.force.com/cms/media/MCNYNL3MZSORGETBHWF6PCCP3EYQ?version=3.1');
        background-size: cover; /* Adjusts image to cover the entire container */
        background-position: center center; /* Centers the image */
        background-repeat: no-repeat; /* Prevents the image from repeating */
}
        
.HeroSection_plain-wavesBackground {
        background-image: url('https://notarypublicassociation.lightning.force.com/cms/media/MCBDNEBUZZEZA6NKRXIVCZGTHXGM?version=1.1');
        background-size: cover; /* Adjusts image to cover the entire container */
        background-position: center center; /* Centers the image */
        background-repeat: no-repeat; /* Prevents the image from repeating */
}
    
.ContentSection_peachBackground {
        background-color: #f8e1d4;
}
    
.ContentSection_yellowBackground {
        background-color: #f8f6d4;
}

.ContentSection_greenBackground {
        background-color: #d7ebe1;
}

.ContentSection_blueBackground {
        background-color: #d4eff8;
}

.ContentSection_purpleBackground {
        background-color: #d5d4f8;
}

.ContentSection_whiteBackground {
        background-color: #ffffff;
}

.ContentSection_greyBackground {
	background-color: #9ab4b2;
}

.ContentSection_lightGreyBackground {
	background-color: #e3ebeb;
}

.ContentSection_greenTwoBackground {
        background-color: #e9f1f1;
}

.ContentSection_greenThreeBackground {
        background-color: #cad9d9;
}

.ContentSection_blue-purple-gradientBackground {
        background: linear-gradient(124deg, #c1f0ff 0%, #efdbf0 50%, #c8b5fa 100%);
}

.ContentSection_whiteOpaqueBackground {
	background: #b9c5c3c9;
}

 /* ---------- Package Flow Background ---------- */

dxp_flow-flow.traditional-package-flow flowruntime-lwc-body {
	background: #9ab4b2;
	border-radius: 24px;
	padding: 64px 0;
}

/* ======================================================================== */
/* -------------------------- MY ACCOUNT PAGES ---------------------------- */
/* ======================================================================== */

.account-content-title h3 {
    color: #404D61;
    font-family: 'DM Sans';
    font-weight: 600;
    line-height: 40px;
    word-wrap: break-word;
    font-size: 27px;
}

.account-content-card .slds-truncate {
    font-family: 'DM Sans';
}

.my-account_payment .addPaymentMethodHeader {
    display: none!important;
}

.account-content-card .slds-card,
.account-content-card .slds-box.address-card-style-class {
    border-radius: 10px!important;
    border-color: rgb(230 230 230)!important;
}

.account-content-card .dxp-text-heading-medium {
    font-family: 'DM Sans';
}

.address-footer-style {
    width: 100%!important;
    display: flex!important;
    justify-content: flex-end!important;
}

button.slds-button.address-footer-button-style {
    text-decoration-line: none !important;
    background: white!important;
    border-radius: 5px!important;
    padding: 5px 10px!important;
    border: 1px solid grey!important;
    font-size: 12px!important;
}