main {
    min-height: 150vh;
    height: max-content;
}

.service-header {
    height: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-m);
    padding-bottom: var(--spacing-xl);
    padding-top: var(--spacing-xl);
}

.service-title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-family: var(--welcome-font-style);
    font-size: var(--font-h2);

}

@media(max-width:1043px) {
    .service-title div {
        text-align: center;
    }
}

.service-subtitle {
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-family: var(--secondary-font-style);
    color: var(--hover-rose);
    font-size: var(--font-m);
}

@media(max-width:1043px) {
    .service-subtitle div {
        text-align: center;
    }
}

.service-body {
    min-height: 80vh;
    height: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xl);
    padding-bottom: var(--spacing-m);
}

.main-service-card {
    width: 800px;
    margin-left: var(--spacing-xl);
    margin-right: var(--spacing-xl);
    border: 1px solid black;
    /* new class */
    display: flex;
    flex-direction: column;
    min-height: 200px;
    height: max-content;
    border-radius: var(--round-border);
    box-shadow: 5px 8px 10px rgba(12, 12, 12, 0.312)
}

@media(max-width:801px) {
    .main-service-card {
        width: auto;
    }
}

.service-card-header {
    font-size: var(--font-l);
    font-family: var(--inter-title-font);
    width: 100%;
    text-align: center;
    /* padding: var(--spacing-s); */
    padding-top: var(--spacing-m);
    padding-bottom: var(--spacing-m);
}

.service-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-l);
    padding-top: var(--spacing-m);
    padding-bottom: var(--spacing-m);
    overflow: auto;
}

.service {
    padding: var(--spacing-s);
    border: 1px solid #B8941E;
    box-shadow: 5px 5px 8px #B8941E;
    height: max-content;
    width: 80%;
    border-radius: var(--round-border);
    min-height: calc(2 * var(--spacing-xl));
    gap: var(--spacing-s);
    display: flex;
    flex-direction: column;
}

.sr-info {
    height: 0;
    transition: all 300ms ease-in-out;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m);
    overflow: hidden;
    justify-content: center;
}

.sr-info-s {
    min-height: var(--info-s);
}

.sr-info-m {
    min-height: var(--info-m);
}

.sr-info- {
    min-height: var(--info-s);
}

.sr-info-s {
    min-height: var(--info-s);
}


.sr-inf-card {
    height: 32%;
    border: 2px solid var(--gold-dark);
    transition: all 300ms ease-in-out;
    border-radius: var(--round-border);
    min-height: max-content;
}

.inf-card-body {
    height: 60%;
    padding-left: var(--spacing-s);
    padding-right: var(--spacing-s);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-family: var(--inter-title-font);
    font-size: var(--font-m);
}

@media(max-width:468px) {
    .inf-card-body {
        font-size: var(--font-s);
    }
}

@media(max-width:380px) {
    .inf-card-body {
        font-size: var(--font-xs);
    }
}

.inf-card-body-1 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s);
}



.inf-card-booking {
    height: 40%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: var(--unit-pixel);
    align-items: center;
    font-family: var(--secondary-font-style);
    font-size: var(--font-m);
    color: black;
    transition: all 300ms ease-in-out;
    font-weight: 700;
}

@media(max-width:400px){
    .inf-card-booking {
        font-size: var(--font-s);
    }
}

.btn {
    color: var(--gold-primary);
    transition: all 300ms ease-in-out;
    display: flex;
    align-items: center;
}

.btn div {
    transition: all 300ms ease-in-out;
}

.btn div:hover {
    cursor: pointer;
    text-decoration: underline;
}

.btn:hover {
    color: var(--gold-dark);
}


.sr-header {
    height: max-content;
    font-family: var(--inter-title-font);
    font-size: var(--font-m);
}

.sr-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m);
}

.sr-body-gold-extended {
    color: var(--gold-dark);
}

.sr-desc {
    height: max-content;
    font-family: var(--secondary-font-style);
    font-weight: 600;
}

.sr-desc-fontSize24 {
    font-size: calc(3 * var(--unit-pixel));
}

.sr-info-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.info-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-s);
    border: 1px solid var(--gold-dark);
    border-radius: var(--round-border);
    gap: var(--spacing-xs);
    background-color: var(--gold-light);
    color: var(--hover-rose);
    font-weight: 700;
    transition: all 300ms ease-in-out;
}

.info-button:hover {
    cursor: pointer;
    box-shadow: 5px 5px 8px rgba(12, 12, 12, 0.312)
}

.more-button {
    font-family: var(--inter-title-font);
}

.arrow-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.arrow-img {
    height: 16px;
    width: 16px;
}

/* controll-class */
.info-open {
    height: 420px;
}