:root {
    --blue: #00ACCB;
    --pink: #EC008C;
}
#hero {
	position: relative;
    background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
    height: 267px;
}



#content.branches {
    position: relative;
    max-width: 100vw;
    min-height: 800px;
    padding: 72px 0 160px;
    overflow: hidden;
}

#content.branches:before {
    content: '';
    position: absolute;
    top: 720px;
    left: 0;
    width: 166px;
    height: 240px;
    background-image: url('../img/branches-before.svg');
    background-size: contain;
    background-repeat: no-repeat;
}
#content.branches:after {
    content: '';
    position: absolute;
    bottom: 75px;
    right: -14px;
    width: 140px;
    height: 241px;
    background-image: url('../img/about-after.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

#content.branches .page-title {
    margin-bottom: 28px;
    font-family: 'NextExitRounded', serif;
    font-size: 100px;
    font-weight: 700;
    line-height: normal;
}
#content.branches .search-box {
    align-items: center;
    position: relative;
    height: 155px;
    margin-bottom: 70px;
    background-color: #E9F4F9;
}
#content.branches .search-box:before {
    content: '';
    position: absolute;
    top: 0;
    right: 100%;
    width: 100%;
    height: 100%;
    background-color: #E9F4F9;
}
#content.branches .search-box:after {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background-color: #E9F4F9;
}
#content.branches .search-box input[type="text"] {
    width: 100%;
    padding: 6px 50px 6px 24px;
    font-size: 21px;
    font-weight: 500;
    color: #000;
    background-color: transparent;
}
#content.branches .search-box input[type="submit"] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(calc(-50% - 4px));
    width: 32px;
    height: 32px;
    padding: 0;
    background-color: transparent;
    background-image: url('../img/icon-search.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#content.branches .search-box input[type="submit"]:focus-visible {
    outline: 2px solid #000;
}

.accordion {
	position: relative;
	cursor: pointer;
	padding: 34px 96px 34px 98px;
	width: 100%;
	font-size: 18px;
	font-weight: 700;
	transition: 0.4s;
}
.accordion:focus-visible {
    outline: 1px solid #000;
}
.accordion .arrow {
	position: absolute;
	left: 98px;
	top: 36px;
}
.accordion.active .arrow {
	transform: rotate(180deg);
}
.branches-list .branch-item + .branch-item {
    margin-top: 1px;
}
.branches-list .branch-item:has(:focus-visible) {
    outline: 1px solid #000;
}
.branches-list .branch-item:has(:focus-visible) .accordion {
    outline: none !important;
}
.branches-list .branch-item:nth-child(odd) .accordion {
    background-color: #F0F0F0;
}
.branches-list .branch-item:nth-child(even) .accordion {
    background-color: #fff;
}
.branches-list .branch-item .accordion.active {
    background-color: #A2D5E5;
}
.branches-list .branch-item .branch-name {
	font-family: 'NextExitRounded', serif;
    font-size: 45px;
    font-weight: 400;
}
.branches-list .branch-item .branch-address {
	font-size: 17px;
    font-weight: 500;
}


.branches-list .branch-item .panel {
	justify-content: space-between;
    align-items: center;
	max-height: 0;
	padding: 0 96px 0 98px;
    background-color: #A2D5E5;
	overflow: hidden;
	transition: max-height 0.5s ease-in-out, border 0.1s ease-in-out 0.5s;
}
.branches-list .branch-item .accordion.active + .panel {
	max-height: 500px;
    padding: 20px 96px 81px 98px;
	transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
}
.branches-list .branch-item .text-container {
	width: 29%;
    font-size: 17px;
    font-weight: 400;
    line-height: 25px;
}
.branches-list .branch-item .text-container h3 {
	font-size: 17px;
    font-weight: 500;
}
.branches-list .branch-item .text-container .opening-hours,
.branches-list .branch-item .text-container .phone-number {
    margin-bottom: 20px;
}

.branches-list .branch-item .branch-item-map {
	flex-grow: 0;
    width: 58.7%;
	height: 284px;
	/* padding: 18px 0 18px 18px; */
}

@media (max-width: 1399px) {
    .accordion {
        padding: 34px 66px 34px 68px;
    }
    .accordion .arrow {
        left: 68px;
    }
    .branches-list {
        position: relative;
        z-index: 1;
    }
    .branches-list .branch-item .panel {
        padding: 0 66px 0 68px;
    }
    .branches-list .branch-item .accordion.active + .panel {
        padding: 20px 66px 71px 68px;
    }
    #content.branches:before {
        transform: scale(0.85);
        transform-origin: left top;
    }
    #content.branches:after {
        transform: scale(0.85);
        transform-origin: right bottom;
    }
}

@media (max-width: 1249px) {
    #content.branches:before {
        transform: scale(0.75);
    }
    #content.branches:after {
        transform: scale(0.75);
    }
    .branches-list .branch-item .text-container {
        width: 33%;
    }
    .branches-list .branch-item .branch-item-map {
        width: 63%;
    }
}

@media (max-width: 1023px) {
    #content.branches:before {
        top: 338px;
    }
    #content.branches {
        padding: 60px 0 160px;
    }
    #content.branches .page-title {
        font-size: 86px;
    }
    #content.branches .search-box {
        height: 140px;
        margin-bottom: 90px;
    }
    .accordion {
        padding: 30px 60px 30px 62px;
    }
    .accordion .arrow {
        left: 62px;
    }
    .branches-list .branch-item .accordion.active + .panel {
        padding: 20px 60px 61px 62px;
    }
    #content.branches:after {
        bottom: 40px;
    }
}

@media (max-width: 767px) {
    #content.branches {
        padding: 30px 0 130px;
    }
    #content.branches:before {
        top: 220px;
        transform: none;
        height: 125px;
        width: 70px;
    }
    #content.branches:after {
        bottom: 14px;
        width: 88px;
        height: 141px;
        transform: none;
    }
    #content.branches .page-title {
        font-size: 60px;
    }
    #content.branches .search-box {
        height: 77px;
        margin-bottom: 109px;
    }
    #content.branches .search-box input[type="text"] {
        padding-right: 40px;
        font-size: 18px;
    }
    #content.branches .search-box input[type="text"]::placeholder,
    #content.branches .search-box input[type="text"]::-webkit-input-placeholder {
        font-size: 18px;
    }
    #content.branches .search-box input[type="submit"] {
        width: 32px !important;
        padding: 0;
    }
    .accordion {
        padding: 30px 24px 30px 26px;
    }
    .accordion .arrow {
        top: 32px;
        left: 26px;
    }
    .branches-list .branch-item .branch-name {
        margin-bottom: 6px;
        font-size: 32px;
        line-height: 34px;
    }
    .branches-list .branch-item .address {
        font-size: 16px;
        line-height: 1.5;
    }
    .branches-list .branch-item .panel {
        flex-direction: column;
        padding: 0 24px 0 24px;
    }
    .branches-list .branch-item .accordion.active + .panel {
        padding: 2px 24px 24px 24px;
    }
    .branches-list .branch-item .text-container {
        width: 100%;
        font-size: 16px;
    }
    .branches-list .branch-item .text-container h3 {
        font-size: 16px;
    }
    .branches-list .branch-item .text-container .opening-hours,
    .branches-list .branch-item .text-container .phone-number,
    .branches-list .branch-item .text-container .accessibility {
        margin-bottom: 18px;
    }
    .branches-list .branch-item .branch-item-map {
        width: 100%;
        height: 204px;
    }
}

@media (prefers-color-scheme: dark) {
    #content.branches .page-title {
        color: #fff;
    }
}