.sAndS {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
}
.sAndS img {
    height: 150px;
    width: auto;

}
.sAndSDesc {
    flex-direction: column;
}
.sAndSDesc h1 {
    font-size: 70px;
}
.sAndSDesc p {
    font-size: 40px;
}
.sAndSDesc h1, p {
    margin: 5px;
}
.help {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 60px 20px;
    flex-wrap: wrap;
    gap: 35px;
}

/* CARD STYLE */
.help .card {
    width: 280px;
    min-height: 260px;
    background: #ffffff;
    color: #000;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 25px 25px 30px;
    border-radius: 14px;
    gap: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.help .card h3 {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

.help .card p {
    font-size: 16px;
    line-height: 1.45;
    margin: 0;
    color: #444;
}

/* BUTTONS */
.help .card a {
    margin-top: auto;
    padding: 12px 26px;
    font-size: 17px;
    line-height: 20px;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    width: 100%; /* cleaner button alignment */
    font-weight: 500;
}

.help .card a:hover {
    opacity: 0.85;
}

.help .card a.startRequest, .help .card a.email {
    background-color: #e2a45a;
    color: #fff;
}

.help .card a.call {
    background-color: #e2a45a;
    color: #fff;
}
/* --- Card media block (goes under the <p>) --- */
.help .card .media {
    width: 100%;
    /* Set a consistent visual box for the image */
    aspect-ratio: 16 / 9;           /* modern, keeps heights aligned across cards */
    background: #f7f7f7;            /* subtle backdrop for transparent images */
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The image itself */
.help .card .media img {
    height: 50px;
    width: auto;
    object-fit: contain;            /* prevents cropping; keeps logos/illustrations tidy */
    display: block;
}

/* Spacing from the paragraph above */
.help .card p + .media {
    margin-top: 8px;
}

/* Optional: gentle hover lift on the image area */
.help .card .media:hover {
    transform: translateY(-1px);
    transition: transform 160ms ease;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
.help .card .media:hover {
        transform: none;
    }
}
/* --- Title row: image next to h3 --- */
.help .card .title {
    display: inline-flex;           /* inline-flex keeps it as a single line block inside the card */
    align-items: center;            /* vertically centers image & text */
    gap: 10px;                      /* space between image and title */
    width: 100%;
}

/* Optional: tighter spacing above title since we moved content into a row */
.help .card h3 {
    font-size: 22px;
    font-weight: 700;
    margin: 0;                      /* ensure the <h3> inside the .title has no extra margins */
    line-height: 1.2;               /* compact, but readable */
}

/* The icon/image next to the title */
.help .card .title img {
    width: auto;                    /* adjust to taste: 24–36px works well */
    height: 75px;
    object-fit: contain;            /* preserves aspect ratio */
    flex: 0 0 auto;                 /* prevents squishing */
    display: block;
    border-radius: 4px;             /* optional: soften corners if icons are square */
}

/* If you want the title to wrap while keeping the icon fixed */
.help .card .title h3 {
    flex: 1 1 auto;
    min-width: 0;                   /* prevents overflow when long titles wrap */
}