
/* Contact us banner starts */

.contactNewUs .HomeBanner {
    position: relative;
    background-position: right center !important;
    background-size: auto 100% !important;
    background-repeat: no-repeat !important;
    min-height: 412px;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .contactNewUs .HomeBanner {
        min-height: 368px;
    }
    .post-content p.MsoNormal {
        padding: 40px 25px 0px 25px;
    }
}

.contactNewUs .HomeBanner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #50213F 0%, #50213F calc(100% - 650px), rgba(80, 33, 63, 0) calc(100% - 460px));
    pointer-events: none;
    z-index: 1;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .contactNewUs .HomeBanner::before {
        background: linear-gradient(to right, #50213F 0%, #50213F calc(100% - 380px), rgba(80, 33, 63, 0) calc(100% - 280px));
    }
}

@media (max-width: 767px) {
    .contactNewUs .HomeBanner {
        background-position: center bottom !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        min-height: 159vw;
    }

    .contactNewUs .HomeBanner::before {
        inset: 0;
        background: linear-gradient(to bottom, #50213F 0px, #50213F 94vw, rgba(80, 33, 63, 0) 123vw);
    }
    .post-content p.MsoNormal {
        padding: 40px 40px 0px 40px;
    }
}

.contactNewUs .HomeBanner > .container {
    position: relative;
    z-index: 2;
}

/* Contact us banner ends */

.formContainer {
            max-width: 523px;
            margin: 40px auto;
            padding: 40px;
            border-radius: 15px;
            text-align: center;
            background: #f8f8f8;
        }
        #step1 button.step-button {
    margin-top: 20px;
}
        .step-header {
            font-size: 15px;
            margin-bottom: 5px;
            font-family: 'FSMeWeb-Light';
            color: #333;
        }
        select {
            max-width: 372px;
            padding: 10px;
            margin-top: 10px;
            font-size: 13px;
            width: 100%;
            color: #333;
            border: unset;
            background: #fff;
            height: 45px;
            font-family: 'FSMeWeb-Light';
        }
        .step-button {
            margin-top: 10px;
            padding: 10px 20px;
            cursor: pointer;
            background-color: #b73764;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 14px;
            font-family: 'FSMeWeb-Light';
        }

        .contctInformation {
            /*margin-top: 20px;*/
            padding: 0 15px 15px;
            /*background-color: #f9eff3;*/
            display: flex;
            justify-content: center;
            gap: 100px;
        }

        .description-box .pod-contact img {
    width: 24px;
    height: 24px;
}
.step-button:disabled {
    background: #c9c9c9;
    color: #aaaaaa;
    font-weight: normal;
}
#continueBtn.step-button:disabled::after, #initialContinueBtn.step-button:disabled::after {
    content: url("c763ea2d0aa2276fc2.svg");
    position: relative;
    top: 3px;
    left: 4px;
}

#continueBtn.step-button::after, #initialContinueBtn.step-button::after  {
    content: url("e3f856ef99ccdef46f.svg");
    position: relative;
    top: 3px;
    left: 4px;
}
.dividerLine {
    border: 1px solid;
    height: 120px;
    margin-top: 40px;
}
.description-box p.paraRed {
    color: #b73764;
    margin-top: 25px;
}
.navHeader {
    background: #f9eff3;
    margin: -40px -40px 20px -40px;
    border-radius: 15px 15px 0px 0px;
    height: 50px;
    display: flex;
    justify-content: space-between;
}

button.back-button, .not-button {
    background: unset;
    border: unset;
    padding: 0px 25px;
    text-decoration: underline;
    font-size: 15px;
    color: #333;
    font-family: 'FSMeWeb-Light';
}

#selection1 button.step-button {
    width: 100%;
    max-width: 350px;
}
#selection3 .step-button {
    width: 100%;
    max-width: 350px;
}
.selected-item {
    font-family: 'FSMeWeb-Light';
    color: #333;
    font-size: 15px;
    padding: 13px 20px;
    border-radius: 5px;
    background: var(--charcoal-tint-30, #C9C9C9);
    width: fit-content;
    margin: 30px auto;
}
.button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#not-sure-options .step-button {
    width: 100%;
    max-width: 360px;
}
button.back-button img {
    margin-right: 3px;
    pointer-events: none;
}
.cntctUsPge {
    margin-bottom: 160px;
}

.cntctUsPge .pod-contact {
    height: 100%;
    padding: 25px;
    width: 292px;
}
.noteDesc {
    width: 100%;
    max-width: 696px;
    margin: 10px auto;
}

.noteDesc p span {
    color: #b73764;
    font-weight: 600;
}

.noteDesc p a {
    color: #333;
}

select:focus-visible {
    outline: none;
}    

.custom-dropdown {
    position: relative;
  }

  .custom-dropdown select {
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
  }

  .custom-dropdown::after {
    content: ""; 
    background: url("e8912a91ffd3b713c9.svg") no-repeat;
    position: absolute;
    top: 67%;
    right: 40px;
    transform: translateY(-50%);
    height: 24px;
    width: 24px;
    pointer-events: none;
  }
  .description-box .contctInformation {
    gap: 20px;
}
@media (max-width: 767px){
    .contactNewUs .bannerMain h1, .contactNewUs .bannerMain p, .contactNewUs .description-box {
    padding: 0px 30px;
}
.contactNewUs  h1.page-title {
    font-size: 40px;
    margin-bottom: 10px;
}
.custom-dropdown::after{
    right: 5px;
}
.contctInformation .pod-contact h5 {
    font-size: 24px !important;
}
.cntctUsPge {
    margin-bottom: 60px;
}
.formContainer{
    border-radius: 0px;
}
    .contctInformation {
    flex-direction: column;
    gap: 20px;
}

.dividerLine {
    display: none;
}

.contctInformation {
    background: transparent;
    padding: 0px;
}

.cntctUsPge .pod-contact {
    background: transparent;
    padding: 0px;
}
}

@media (min-width: 768px) and (max-width: 1024px){
    .contctInformation {
    gap: 20px;
}

.cntctUsPge .pod-contact {
    width: 100%;
}
}

#description-box .contctInformation, #description-box3 .contctInformation, #description-box4 .contctInformation, #description-box5 .contctInformation {
    gap: 20px;
}

.cntctUsPge .pod-contact.postPod {
    width: 260px;
}

#alternativeContent button.step-button.cntct {
    max-width: 350px;
    width: 100%;
}

#step0 button.step-button {
    margin-top: 20px;
}

#somethingElse button.step-button.cntct {
    width: 100%;
    max-width: 165px;
}

@media (max-width: 380px){
    .formContainer .step-button{
        padding: 10px 18px;
    }
    .formContainer select{
        padding-right: 35px;
    }
}

.main-desc {
    background-color: #f9eff3;
    margin: 0 auto;
    padding: 20px 0 0;
}
.contact-p  {
    text-align: center;
}
.contact-p p {
    color: #333;
    text-align: center;
    font-family: 'FSMeWeb-Light';
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .cntctUsPge .pod-contact.postPod {
        width: 30%;
    }
    .cntctUsPge .pod-contact{
        width: 30%;
    }
    .ParaKRS .MainSup .DtSup {
    width: 50%;
}
.ParaKRS .MainSup {
    display: flex;
    justify-content: revert;
    gap: 5px;
}
}

@media (max-width: 767px) {
   .main-desc  {
        padding: 20px 30px 0px !important;
    }
 .description-box {
        padding: 0 !important;
    }
   .cntctUsPge .container {
        padding: 0px !important;
    }
    .cntctUsPge .container.popupISASec {
        padding: 20px !important;
    }
    .noteDesc {
    padding: 0 30px;
}
}

/* Category accordion starts — replaces the old Yes/No + dropdown step wizard */

.ContactCategoryAccordion {
    width: 100%;
    margin: 40px 0px;
}

/* Side margin is desktop-only — combined with width:100% it was overflowing
   the page on mobile/tablet, so those breakpoints use padding instead (which
   width:100% already accounts for, border-box) rather than margin. */
@media (min-width: 768px) and (max-width: 1024px) {
    .ContactCategoryAccordion {
        margin: 0;
        padding: 0 5px;
    }
}

@media (max-width: 767px) {
    .ContactCategoryAccordion {
        margin: 0;
    }
}

.ContactCategoryAccordion__heading {
    margin: 0;
}

.ContactCategoryAccordion__item {
    border-bottom: 1px solid #50213F;
}

.ContactCategoryAccordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 20px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: 'FSMeWeb-Light';
    font-size: 15px;
    font-weight: 300;
    color: #333;
}

.ContactCategoryAccordion__trigger:focus {
    color: #333 !important;
}

.ContactCategoryAccordion__trigger > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.ContactCategoryAccordion__item.is-open > .ContactCategoryAccordion__heading .ContactCategoryAccordion__trigger {
    color: #333;
}

.ContactCategoryAccordion__item.is-open:not(.ContactCategoryAccordion__item--nested) > .ContactCategoryAccordion__heading .ContactCategoryAccordion__trigger {
    font-size: 24px;
}

.ContactCategoryAccordion__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    position: relative;
}

.ContactCategoryAccordion__icon::before,
.ContactCategoryAccordion__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #50213F;
    transform: translate(-50%, -50%);
}

.ContactCategoryAccordion__icon::before {
    width: 14px;
    height: 2px;
}

.ContactCategoryAccordion__icon::after {
    width: 2px;
    height: 14px;
}

/* Open state: hide the vertical bar so the icon reads as "−" instead of "+" */
.ContactCategoryAccordion__item.is-open > .ContactCategoryAccordion__heading .ContactCategoryAccordion__icon::after {
    display: none;
}

.ContactCategoryAccordion__panel {
    padding: 0 20px 28px;
}

.ContactCategoryAccordion__nested {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ContactCategoryAccordion .umb-block-list,
.ContactCategoryAccordion .umb-block-list__block {
    padding: 0 !important;
    margin: 0 !important;
}

.ContactCategoryAccordion__item--nested,
.ContactCategoryAccordion__nested .ContactCategoryAccordion__item {
    border-bottom: none;
    border-radius: 15px;
    background: rgba(248, 248, 248, 0.50);
    margin-bottom: 12px;
}

.ContactCategoryAccordion__item--nested:last-child,
.ContactCategoryAccordion__nested .ContactCategoryAccordion__item:last-child {
    margin-bottom: 0;
}

.ContactCategoryAccordion__item--nested .ContactCategoryAccordion__trigger,
.ContactCategoryAccordion__nested .ContactCategoryAccordion__item .ContactCategoryAccordion__trigger {
    min-height: 66px;
    padding: 0 25px;
    font-family: 'FSMeWeb-Light';
    font-size: 15px;
    color: #000000 !important;
    font-weight: 300;
}

.ContactCategoryAccordion__item--nested.is-open > .ContactCategoryAccordion__heading .ContactCategoryAccordion__trigger,
.ContactCategoryAccordion__nested .ContactCategoryAccordion__item.is-open > .ContactCategoryAccordion__heading .ContactCategoryAccordion__trigger {
    font-size: 20px;
}

.ContactCategoryAccordion__item--nested .ContactCategoryAccordion__panel,
.ContactCategoryAccordion__nested .ContactCategoryAccordion__item .ContactCategoryAccordion__panel {
    padding: 15px 25px 25px;
}

.ContactCategoryAccordion__panel--card {
    background: rgba(248, 248, 248, 0.50);
    border-radius: 15px;
    /* Matches .ContactCategoryAccordion__item--nested .ContactCategoryAccordion__panel's
       open-state padding exactly (15px top, not 25px), so a plain-content parent's card
       looks identical to a nested child's open panel. */
    padding: 15px 25px 25px;
    margin-bottom: 16px;
}

.ContactDetailsGrid, .ContactCategoryAccordion__panel:has(> .ContactDetailsGrid__col) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.ContactDetailsGrid__col {
    padding-left: 40px;
    border-left: 1px solid #D9D9D9;
}

.ContactDetailsGrid__col:first-child {
    padding-left: 0;
    border-left: none;
}

.ContactDetailsGrid__col p {
    color: #333;
    font-family: 'FSMeWeb-Light';
    font-size: 15px;
    font-weight: 300;
    line-height: 150%;
    margin: 0 0 8px;
}

.ContactDetailsGrid__label {
    font-family: 'FSMeWeb-Light';
    font-weight: 300 !important;
    color: #000000 !important;
}

.ContactDetailsGrid__col p a {
    color: #B73764;
    text-decoration: underline;
}

.ContactDetailsGrid__label + p {
    color: #B73764;
}

.ContactDetailsGrid__hoursLabel {
    font-family: 'FSMeWeb-Bold';
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #333;
    margin-top: 16px !important;
}

.ContactOpeningTimes {
    border-collapse: collapse;
    margin-top: 6px;
}

.ContactOpeningTimes td {
    font-family: 'FSMeWeb-Light';
    font-size: 13px;
    font-weight: 300;
    color: #333;
    padding: 3px 20px 3px 0;
    white-space: nowrap;
}

.ContactOpeningTimes td:last-child {
    color: #B73764;
    padding-right: 0;
}

.ContactOpeningTimes td:last-child::before {
    content: "-";
    color: #333;
    margin-right: 10px;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .ContactDetailsGrid,
    .ContactCategoryAccordion__panel:has(> .ContactDetailsGrid__col) {
        grid-template-columns: repeat(2, 1fr);
    }
    .ContactDetailsGrid--three .ContactDetailsGrid__col:last-child,
    .ContactCategoryAccordion__panel:has(> .ContactDetailsGrid__col:nth-child(3)) > .ContactDetailsGrid__col:last-child {
        grid-column: 1 / -1;
        padding-left: 0;
        padding-top: 20px;
        border-left: none;
        border-top: none;
    }
}

@media (max-width: 767px) {
    .ContactDetailsGrid,
    .ContactCategoryAccordion__panel:has(> .ContactDetailsGrid__col) {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .ContactDetailsGrid__col {
        padding-left: 0;
        border-left: none;
    }
    .ContactCategoryAccordion__heading {
        padding: 0px !important;
    }
    .ContactCategoryAccordion__item:not(.ContactCategoryAccordion__item--nested) > .ContactCategoryAccordion__heading .ContactCategoryAccordion__trigger {
        padding: 20px 40px !important;
    }
}

.ContactDetailsGrid__col p:nth-of-type(3) {
    font-size: 13px;
}
/* Category accordion ends */