/* ===================================================================
 * # ABOUT
 *
 *
 * ------------------------------------------------------------------- */

.s-about {
    padding-top: var(--vspace-5);
}

.s-about__content {
    align-items    : flex-start;
    justify-content: space-between;
}

.s-about__content-start {
    position     : sticky;
    top          : var(--vspace-5);
    margin-bottom: var(--vspace-2);
}

.s-about__content-end {
    padding-top   : var(--vspace-1_5);
    padding-bottom: var(--vspace-1);
}
/**/


.about .profile .profile-image {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
}

.about .profile .profile-name {
	font-size: 1.125rem;
	margin: 0;
}

.about .profile .profile-position {
	color: var(--accent-color);
	margin: 0;
	font-size: .875rem;
}

.about .contact-info {
	padding: 1rem 1.5rem;
	background-color: var(--surface-color);
	border-radius: .5rem;
	box-shadow: 0 0 15px #0000000f;
}

.about .contact-info i {
	color: var(--accent-color);
	font-size: 1.5rem;
}

.about .contact-info .contact-label {
	color: color-mix(in srgb, var(--default-color), transparent 30%);
	font-size: .875rem;
	margin: 0;
}


.about .contact-info .contact-number, .contact-number a  {
	font-weight: 600;
	margin: 0;
    	font-size: 14px;
	  color: #212529;
}
.about .image-wrapper {
	position: relative;
}

.about .image-wrapper .small-image {
	position: absolute;
	top: 20%;
	left: -10%;
	width: 45%;
	border: 8px solid var(--surface-color);
}

.about .image-wrapper .experience-badge {
	position: absolute;
	bottom: 5%;
	right: 5%;
	background-color: var(--accent-color);
	color: var(--contrast-color);
	padding: 1.5rem;
	border-radius: .5rem;
	text-align: center;
	min-width: 200px;
	animation: experience-float 3s ease-in-out infinite;
}

.about .image-wrapper .experience-badge h3 {
	color: var(--contrast-color);
	font-size: 2.5rem;
	margin: 0;
	line-height: .5;
}

.about .image-wrapper .experience-badge h3 span {
	font-size: 1rem;
	display: inline-block;
	margin-left: .25rem;
}

.about .image-wrapper .experience-badge p {
	margin: .5rem 0 0;
	font-size: .875rem;
}


/* --------------------------------------------------------------------
 * ## about content
 * -------------------------------------------------------------------- */
.about-pic-primary {
    width: 100%;
}

.about-pic-primary img {
    padding           : 0;
    margin            : 0;
    -o-object-fit     : cover;
    object-fit        : cover;
    -o-object-position: center;
    object-position   : center;
    aspect-ratio      : 2000/2000;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * about
 * ------------------------------------------------------------------- */
@media screen and (max-width: 1000px) {
    .s-about__content-start {
        position     : static;
        margin-bottom: var(--vspace-1);
        display      : flex;
        gap          : var(--gutter);
    }

    .s-about__content-start .section-header {
        width: 50%;
    }

    .s-about__content-start .about-pic-primary {
        width: 50%;
    }

    .s-about__content-end {
        padding-top: 0;
    }
}

@media screen and (max-width: 600px) {
    .s-about__content-start {
        display: block;
    }

    .s-about__content-start .section-header {
        width: auto;
    }

    .s-about__content-start .about-pic-primary {
        width        : min(400px, 100%);
        margin-inline: auto;
    }
}


/* ===================================================================
 * # MENU
 *
 *
 * ------------------------------------------------------------------- */
.s-menu {
    padding-top: var(--vspace-5);
}

.s-menu__content {
    justify-content: space-between;
    align-items    : flex-start;
    height         : auto;
}

.s-menu__content-start {
    position     : sticky;
    top          : var(--vspace-5);
    margin-bottom: var(--vspace-2);
}

.s-menu__content-end {
    padding-top: var(--vspace-2_5);
}

.topmenu-phone {
color: #212529;
font-size: 18px;
font-weight: 600;
margin-right: 10px;

} 
/* --------------------------------------------------------------------
 * ## tab navigations
 * -------------------------------------------------------------------- */
.tab-nav__list {
    list-style    : none;
    display       : flex;
    flex-direction: column;
    margin-left   : 0;
    border-top    : 1px solid var(--color-border);
    counter-reset : ctr;
}

.tab-nav__list li {
    padding-left : 0;
    border-bottom: 1px solid var(--color-border);
}

.tab-nav__list li[data-tab-active] {
    border-bottom: 1px solid var(--color-bg-accent);
}

.tab-nav__list li[data-tab-active] a {
    background-color: var(--color-bg-accent);
    color           : var(--color-white);
}

.tab-nav__list li[data-tab-active] a::before {
    color: var(--color-text);
}

.tab-nav__list li[data-tab-active] a svg {
    opacity   : 1;
    visibility: visible;
    transform : translateX(0);
}

.tab-nav__list li[data-tab-active] a svg path {
    fill: var(--color-white);
}

.tab-nav__list a {
    display       : flex;
    align-items   : center;
    height        : 100%;
    color         : var(--color-text);
    padding-top   : var(--vspace-0_75);
    padding-bottom: var(--vspace-0_75);
    padding-left  : var(--vspace-0_75);
    padding-right : var(--vspace-0_75);
}

.tab-nav__list a::before {
    display          : block;
    content          : counter(ctr, decimal-leading-zero) ".";
    font-size        : var(--text-xs);
    margin-right     : var(--vspace-0_625);
    color            : var(--color-text-light);
    counter-increment: ctr;
}

.tab-nav__list a svg {
    height                    : var(--vspace-0_5);
    width                     : var(--vspace-0_5);
    margin-left               : auto;
    opacity                   : 0;
    visibility                : hidden;
    transform                 : translateX(-2rem);
    transition-property       : opacity, visibility, transform;
    transition-duration       : 0.3s;
    transition-timing-function: var(--ease-smooth-in-out);
}

.tab-nav__list a svg path {
    fill: var(--color-text);
}

.tab-nav__list a:hover,
.tab-nav__list a:focus {
    background-color: var(--color-neutral-900);
    color           : var(--color-text);
}

.tab-nav__list a:hover svg,
.tab-nav__list a:focus svg {
    opacity   : 1;
    visibility: visible;
    transform : translateX(0);
}

/* --------------------------------------------------------------------
 * ## tab contents
 * -------------------------------------------------------------------- */
.tab-content {
    position: relative;
    top     : calc(var(--vspace-0_5) * -1);
}

.tab-content__item {
    opacity   : 0;
    visibility: hidden;
    height    : 0;
    overflow  : hidden;
    position  : absolute;
    top       : 100px;
}

.tab-content__item[data-tab-active] {
    opacity                   : 1;
    visibility                : visible;
    height                    : auto;
    transition-property       : opacity, visibility, top;
    transition-duration       : 0.9s;
    transition-timing-function: var(--ease-smooth-in-out);
    transition-delay          : 0s;
    position                  : relative;
    top                       : 0;
}

/* menu block
 */
.menu-block {
    margin: 0;
}

.menu-block__group {
    margin-bottom: var(--vspace-3);
}

.menu-block__cat-name {
    margin-top   : 0;
    margin-bottom: var(--vspace-1);
    padding-left : var(--vspace-1);
    color        : var(--color-text);
    position     : relative;
}

.menu-block__cat-name::before {
    content         : "";
    display         : block;
    height          : 1px;
    width           : var(--vspace-0_5);
    background-color: var(--color-border);
    position        : absolute;
    top             : 50%;
    left            : 0;
}

.menu-list {
    list-style : none;
    margin-left: 0;
}

.menu-list__item {
    display        : flex;
    justify-content: space-between;
    padding-top    : var(--vspace-1);
    padding-inline : var(--vspace-1);
    border-radius  : var(--border-radius);
}

.menu-list__item:nth-child(odd) {
    background-color: var(--color-bg-neutral-dark);
}

.menu-list__item h4 {
    font-family  : var(--type-body);
    margin-top   : 0;
    margin-bottom: var(--vspace-0_25);
}

.menu-list__item p {
    font-weight  : 300;
    font-size    : var(--text-sm);
    line-height  : var(--vspace-0_75);
    margin-bottom: var(--vspace-1);
    color        : var(--color-text-light);
}

.menu-list__item-desc {
    max-width    : min(100%, 90rem);
    padding-right: calc(var(--gutter) * 2);
}

.menu-list__item-price {
    font-family  : var(--type-body);
    font-weight  : 500;
    font-size    : var(--text-base);
    padding-right: 0.2rem;
}

.menu-list__item-price span {
    font-size: 0.8em;
    position : relative;
    bottom   : 0.2em;
    left     : -1px;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * menu
 * ------------------------------------------------------------------- */
@media screen and (max-width: 1000px) {
    .s-menu__content-start {
        position: static;
    }

    .s-menu__content-end {
        padding-top: 0;
    }

    .tab-nav__list {
        flex-direction: row;
        flex-wrap     : wrap;
        border-color  : var(--color-border);
        border-style  : solid;
        border-width  : 1px 0 0 1px;
        align-items   : stretch;
        align-content : stretch;
    }

    .tab-nav__list li {
        flex        : 1;
        border-color: var(--color-border);
        border-style: solid;
        border-width: 0 1px 1px 0;
    }

    .tab-nav__list a {
        line-height: var(--vspace-0_75);
    }

    .tab-nav__list a::before {
        margin-right: var(--vspace-0_25);
    }

    .tab-nav__list a svg {
        display: none;
    }
}

@media screen and (max-width: 800px) {
    .tab-nav__list li {
        flex : none;
        width: 50%;
    }
}

@media screen and (max-width: 600px) {
    .tab-nav__list {
        flex-direction: column;
    }

    .tab-nav__list li {
        width: 100%;
    }

    .tab-nav__list a svg {
        display: block;
    }
}

@media screen and (max-width: 500px) {
    .menu-list__item {
        padding-inline: var(--vspace-0_875);
    }

    .menu-list__item h4 {
        font-size: var(--text-md);
    }
}
/* ------------------------------------------------------------------- 
 *  footer
 * ------------------------------------------------------------------- */
.footer-phone {
	font-size: 48px;
	font-weight: 700;
    color: #212529;
}