/* ======================================================================== */
/* -------------------------- HOME PAGE ------------------------ */
/* ======================================================================== */

    .HeroSection_homeBackground {
        background-image: linear-gradient(rgb(0 0 0 / .45), rgba(0, 0, 0, 0.45)), url(https://notarypublicassociation.lightning.force.com/cms/media/MCJATJCTYDLZGYZOGPDCNLCFTLGQ?version=2.1);
        background-size: cover; /* Adjusts image to cover the entire container */
        background-position: top center; /* Centers the image */
        background-repeat: no-repeat; /* Prevents the image from repeating */
    }    
    
/* ---------------- Services Section ---------------- */
    /* General Elements */
    .ContentSection_services {
        border: none;
        margin-left: 0px;
        margin-right: 0px;
        padding: 0px;
        flex-flow: column;
        margin-bottom: 0px;
        min-width: 0px;
        max-width: 100%;
        border-radius: 0px;
        background: transparent;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
    
    @media (max-width: 1085px) {
        .ContentSection_services {
            grid-template-columns: repeat(2, 1fr);
            row-gap: 42px;
        }
    }

	@media (max-width: 768px) {
        .ContentSection_services {
            grid-template-columns: repeat(1, 1fr);
            row-gap: 42px;
        }
    }
    
    @media (max-width: 540px) {
        .services_contentTitle {
            font-size: 22px;
        }
    }
    
	.services_imageWrapper {
		width: 100%;
		position: relative;
        overflow: hidden;
        height: 355px;
        padding: 16px;
        -webkit-align-items: flex-end;
        -webkit-box-align: flex-end;
        -ms-flex-align: flex-end;
        align-items: flex-end;
        border-radius: 20px;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        gap: 0px;
        border: none;
        margin-left: 0px;
        margin-right: 0px;
        flex-wrap: nowrap;
        margin-bottom: 0px;
        min-width: 0px;
        max-width: 100%;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

.services_imageWrapper img {
    object-fit: cover;
    align-items: flex-end;
    height: 325px;
    object-position: center;
    border-radius: 20px;
}

    .services_arrowWrapper {
        width: 44px;
        font-size: 24px;
        position: absolute;
        z-index: 2;
        display: flex;
        gap: 0px;
        height: 44px;
        border: none;
        margin-left: 0px;
        margin-right: 0px;
        padding: 0px;
        flex-flow: column;
        margin-bottom: 0px;
        min-width: 0px;
        max-width: 100%;
        -webkit-box-align: center;
        align-items: center;
        border-radius: 100%;
        -webkit-box-pack: center;
        justify-content: center;
        background: white;
        transition: color 0.3s, transform 0.3s;
        color: rgb(13, 18, 28);
        transform: rotate(-45deg);
	right: 30px;
    	bottom: 30px;
    }

    .services_contentWrapper {
        padding: 18px 7.5%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        gap: 0px;
        border: none;
        margin-left: 0px;
        margin-right: 0px;
        padding: 18px 7.5%;
        -webkit-box-flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        margin-bottom: 0px;
        min-width: 0px;
        max-width: 100%;
        border-radius: 0px;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        background: transparent;
        align-items: flex-start;
    }

    .services_contentIconWrapper {
        font-size: 32px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        gap: 0px;
        border: none;
        margin-left: 0px;
        margin-right: 0px;
        padding: 0px;
        -webkit-box-flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        margin-bottom: 0px;
        min-width: 0px;
        max-width: 100%;
        border-radius: 0px;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        background: transparent;
    }

    .services_contentTitle {
        margin: 0;
        color: inherit;
        font-size: 24px;
        font-weight: 700;
        line-height: 130%;
        font-weight: 600;
        margin-top: 16px;
        margin-bottom: 12px;
        text-align: left;
    }

    .services_contentDescription {
        margin: 0;
        color: inherit;
        font-size: 14px;
        font-weight: 400;
        line-height: 150%;
        color: #4b5565;
        text-decoration: none;
        text-align: left;
    }
    
    /* Notary Column */
    .services_greenColumn {
        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: #d7ebe1;
        padding: 8px;
        border-radius: 20px;
        height: 100%;
        transition: background-color 0.3s;
    }
    
    .services_notaryImage {
        background-image: url('https://notarypublicassociation.lightning.force.com/cms/media/MC46DU66SHGNEBFCIHP4QWO74DJE?version=1.2');
        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 */

    }
    
    #services_greenIcon {
        color: #217c7c;
    }
    
    .services_greenColumn:hover {
        background: #b5decc;
    }
    
    .services_greenColumn:hover .services_arrowWrapper {
		transform: rotate(0deg);
        transition: transform .3s;
    }
    
    .services_greenColumn:hover #services_greenArrow {
        color: #bedfdd;
        transition: color .3s, transform .3s;
    }

    /* Insurance Column */
    .services_peachColumn {
        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: #f8e1d4;
        padding: 8px;
        border-radius: 20px;
        height: 100%;
        transition: background-color 0.3s;
    }
    
    .services_insuranceImage {
        background-image: url('https://notarypublicassociation.lightning.force.com/cms/media/MCVOEE53ERABFX5DRK3CUNZW4P3Y?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 */

    }
    
    #services_peachIcon {
        color: #f48b6e;
    }
    
    .services_peachColumn:hover {
        background: #ecc1a8;
    }
    
    .services_peachColumn:hover .services_arrowWrapper {
		transform: rotate(0deg);
        transition: transform .3s;
    }
    
    .services_peachColumn:hover #services_peachArrow {
        color: #f48b6e;
        transition: color .3s, transform .3s;
    }
    
    /* Course Column */
    .services_blueColumn {
        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: #d4eff8;
        padding: 8px;
        border-radius: 20px;
        height: 100%;
        transition: background-color 0.3s;
    }
    
    .services_courseImage {
        background-image: url('https://notarypublicassociation.lightning.force.com/cms/media/MCM5IDC43F3BGKHOFTS2SGTZNGCQ?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 */

    }
    
    #services_blueIcon {
        color: #38a5c7;
    }
    
    .services_blueColumn:hover {
        background: #a8d3e1;
    }
    
    .services_blueColumn:hover .services_arrowWrapper {
		transform: rotate(0deg);
        transition: transform .3s;
    }
    
    .services_blueColumn:hover #services_blueArrow {
        color: #38a5c7;
        transition: color .3s, transform .3s;
    }
    
    /* Supplies Column */
    .services_purpleColumn {
        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: #d5d4f8;
        padding: 8px;
        border-radius: 20px;
        height: 100%;
        transition: background-color 0.3s;
    }
    
    .services_suppliesImage {
        background-image: url('https://notarypublicassociation.lightning.force.com/cms/media/MCIYVNYD35Y5C7ZA2VB7HR23P3V4?version=1.2');
        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 */

    }
    
    #services_purpleIcon {
        color: #8b5acc;
    }
    
    .services_purpleColumn:hover {
        background: #bab9e7;
    }
    
    .services_purpleColumn:hover .services_arrowWrapper {
		transform: rotate(0deg);
        transition: transform .3s;
    }
    
    .services_purpleColumn:hover #services_purpleArrow {
        color: #8b5acc;
        transition: color .3s, transform .3s;
    }
    
/* --------------------- Features Section --------------------- */
    .ContentSection_featuresWrapper {
        display: flex;
        gap: 0px;
        border: none;
        margin-left: 0px;
        margin-right: 0px;
        padding: 10px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    #features-icons {
        color: #4762ad;
    }
    
    h1.stamps-feature-title {
        line-height: 130%;
        font-weight: 500;
        margin-top: 12px;
        margin-bottom: 12px;
        text-align: left;
    }

/* ----------------- Sticky/Scrollable Section ----------------- */
    .sticky-section {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 5%;
        position: relative;
    }

    .sticky-left {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
        position: -webkit-sticky;
        position: sticky;
        top: 110px;
        gap: 48px;
    }

    .scrollable-right {
      width: 70%; /* Width of the right side */
      overflow: hidden; /* Right side scrolls naturally */
      padding: 20px;
    }