.elementor-7804 .elementor-element.elementor-element-20be039:not(.elementor-motion-effects-element-type-background), .elementor-7804 .elementor-element.elementor-element-20be039 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://dandemutande.africa/wp-content/uploads/2026/04/self-service-portal.png");background-position:center center;background-repeat:no-repeat;background-size:auto;}.elementor-7804 .elementor-element.elementor-element-20be039 > .elementor-container{min-height:600px;}.elementor-7804 .elementor-element.elementor-element-20be039, .elementor-7804 .elementor-element.elementor-element-20be039 > .elementor-background-overlay{border-radius:0px 0px 0px 0px;}.elementor-7804 .elementor-element.elementor-element-20be039{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-7804 .elementor-element.elementor-element-20be039 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-7804 .elementor-element.elementor-element-774e1ec > .elementor-element-populated{margin:70px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-7804 .elementor-element.elementor-element-34d8c9b > .elementor-container{min-height:400px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-7804 .elementor-element.elementor-element-5820653{margin:100px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-7804 .elementor-element.elementor-element-5820653 .elementor-heading-title{font-family:"Comfortaa", Sans-serif;font-size:46px;font-weight:600;line-height:75px;word-spacing:0px;color:var( --e-global-color-075cc30 );}.elementor-7804 .elementor-element.elementor-element-37abd30{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-7804 .elementor-element.elementor-element-34d8c9b > .elementor-container{min-height:292px;}.elementor-7804 .elementor-element.elementor-element-5820653{margin:-140px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-7804 .elementor-element.elementor-element-5820653 .elementor-heading-title{font-size:21px;line-height:2em;letter-spacing:0px;}}/* Start custom CSS for heading, class: .elementor-element-5820653 */.title-color{
    color:#009EE1;
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-20be039 */.elementor-7804 .elementor-element.elementor-element-20be039 {
    position: relative;
}

.elementor-7804 .elementor-element.elementor-element-20be039:after {
    content: "";
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 45px;

    background-image: url('/wp-content/uploads/2025/11/down-chevron.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    cursor: pointer;
    animation: bounce 1.2s infinite ease-in-out; /* faster speed */

    filter: brightness(0) invert(1); /* tint white */
}

/* Bounce animation */
@keyframes bounce {
    0%,100% { transform: translate(-50%, 0); }
    50%     { transform: translate(-50%, 10px); }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8c8cd72 */:root {
    --primary-blue: #082860;
    --hover-blue: #009EE1;
    --bg-light: #f4f7ff;
    --card-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); /* Slightly deepened for better lift */
}

.portal-section {
    padding: 80px 20px; /* Increased padding for more breathing room */
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    font-family: Comfortaa;
}

.portal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 40px;
    max-width: 900px; /* Widened slightly for better balance */
    width: 100%;
}

.portal-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 30px;
    border-radius: 24px; /* Softer, more modern corners */
    background: #ffffff;
    border: 1px solid #edf2f7;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Smoother "springy" transition */
}

.portal-card:hover {
    /* Fixed the variable typo here */
    box-shadow: var(--card-shadow); 
    transform: translateY(-10px);
    border-color: var(--hover-blue);
}

.portal-icon {
    width: 100px; /* Slightly larger icons */
    height: 100px;
    color: var(--primary-blue);
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    border-radius: 50%;
    transition: all 0.3s ease;
}

/* Interaction: Icon pops when card is hovered */
.portal-card:hover .portal-icon {
    background-color: var(--primary-blue);
    color: #ffffff;
}

.portal-icon svg {
    width: 45px;
    height: 45px;
}

.portal-button {
    display: inline-block;
    background-color: var(--primary-blue);
    color: white;
    text-decoration: none;
    padding: 14px 0;
    width: 220px;
    text-align: center;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(8, 40, 96, 0.15);
}

.portal-button:hover {
    background-color: var(--hover-blue);
    box-shadow: 0 6px 15px rgba(8, 40, 96, 0.25);
    transform: scale(1.02);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .portal-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .portal-section {
        padding: 40px 20px;
    }
}/* End custom CSS */