/* New Main banner */
.top-section { position: relative; width: 100%; height: 750px; background-size: 100% 100%; z-index: 2; }
.top-section .main-banner-photo {position: absolute; width: 100%; height: 750px; top: 0; left: 0; user-select: none; z-index: 0; }
.top-section .main-banner-photo:before { content: ''; position: absolute; display: block; width: 100%; height: 30%; left: 0; top: 0; background: linear-gradient(180deg,rgba(0,0,0, .3) 0%, rgba(255,255,255,0) 100%); z-index: 1; }
.top-section .main-banner-photo .photo { position: absolute; width: 100%; height: 100%; display: block; object-fit: cover;}

.top-section .main-banner { position: absolute; width: 1360px; height: 750px; padding: 0 20px; top: 0; left: 50%; transform: translate(-50%, 0); }
.top-section .main-banner .title-wrap { position: absolute; top: 40%; transform: translate(0, -50%); width: calc(100% - 40px); display: flex; flex-direction: column; }
.top-section .main-banner .title-wrap h1 { width: 100%; margin: 30px 0; font-family: 'AlumniSans'; font-size: 124px; line-height: 105px; text-align: center; padding: 0 20px; box-sizing: border-box; color: white; text-shadow: 0 4px 20px rgba(0,0,0,.4); }
.top-section .main-banner .title-wrap .description { display: flex; gap: 30px; color: white; align-items: center; justify-content: center; font-size: 16px; }
.top-section .main-banner .title-wrap .description .item { display: flex; align-items: center; gap: 8px; text-shadow: 0 1px 5px black; }
.top-section .main-banner .title-wrap .description .item:before { content: ''; position: relative; display: inline-block; width: 24px; height: 24px; background-image: url('https://highcityappliance.com/images/ico/done-white.svg'); background-size: 100% 100%;}

.top-section .main-banner .bottom-wrap { position: absolute; align-items: center; bottom: 10%; width: calc(100% - 40px); display: flex; gap: 10px; flex-direction: row-reverse; justify-content: space-between; }
.top-section .main-banner .bottom-wrap .action-buttons { display: flex; gap: 10px; }
.top-section .main-banner .bottom-wrap .action-buttons .button { position: relative; display: flex; width: 140px; align-items: center; justify-content: center; font-size: 14px; gap: 10px; padding: 5px 10px; height: 44px; border-radius: 14px; background-color: rgba(0,0,0,.5); color: white; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); cursor: pointer; user-select: none; transition: background-color .2s ease-out; }
.top-section .main-banner .bottom-wrap .action-buttons .button:hover { background-color: black; }
.top-section .main-banner .bottom-wrap .action-buttons .button .ico { width: 24px; height: 24px; }
.top-section .main-banner .bottom-wrap .action-buttons .button:first-child { font-size: 16px; font-weight: bold; background-color: #006ec3; overflow: hidden; }
.top-section .main-banner .bottom-wrap .action-buttons .button:first-child:hover { background-color: #004478; }
.top-section .main-banner .bottom-wrap .action-buttons .button:first-child:before  { content: ''; position: absolute; left: -60%; top: -50%; width: 40%; height: 200%; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 45%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.25) 55%, rgba(255,255,255,0) 100%); transform: rotate(-20deg); filter: blur(6px); pointer-events: none; mix-blend-mode: screen; animation: sheen-move 5s ease-in-out infinite;}

.top-section .main-banner .bottom-wrap .trust { display: flex; gap: 10px; width: 500px; }
.top-section .main-banner .bottom-wrap .trust .item { position: relative; display: grid; grid-template-columns: auto 48px; width: 100%; gap: 0 10px; padding: 5px 7px 5px 12px; height: 44px; border-radius: 14px; background-color: rgba(255, 255, 255, .2); color: white; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); cursor: pointer; user-select: none; align-content: center; transition: background-color .2s ease-out; }
.top-section .main-banner .bottom-wrap .trust .item:hover { background-color: rgba(255,255,255,.4); }
.top-section .main-banner .bottom-wrap .trust .item .logo { height: 25px; grid-column: 1 / 2; grid-row: 1 / 2; }
.top-section .main-banner .bottom-wrap .trust .item .stars { height: 14px; grid-column: 1 / 2; grid-row: 2 / 3; }
.top-section .main-banner .bottom-wrap .trust .item .rate { display: flex; align-items: center; justify-content: center; grid-column: 2 / 3; grid-row: 1 / 3; background-color: black; border-radius: 10px; font-family: Arial; font-size: 17px; font-weight: bold; }

.top-section.bg-image header nav .list b { color: white; }
.top-section.bg-image header nav .list b:after { background-image: url('/images/ico/ico-arrow-down-white.svg'); }
.top-section.bg-image header nav .button { color: white; }
.top-section.bg-image header nav .book-button { border-color: white; background-color: rgba(0,0,0,.4); }
.top-section.bg-image header nav .book-button b { color: white; }
.top-section.bg-image header nav .phone-button:before { background-image: url('/images/ico/ico-phone-white.svg'); }

@media screen and (max-width: 1400px) {
.top-section .main-banner { width: calc(100% - 40px); }
}

@media screen and (max-width: 1050px) {
.top-section .main-banner .bottom-wrap { flex-direction: column; gap: 10px; }
.top-section .main-banner .title-wrap h1 { font-size: 100px; line-height: 90px; }
}

@media screen and (max-width: 600px) {
.top-section .main-banner .title-wrap h1 { font-size: 70px; line-height: 60px; }
.top-section .main-banner .title-wrap .description { flex-direction: column; gap: 10px; align-items: flex-start; }
.top-section .main-banner .bottom-wrap { bottom: 20px; }
}

@media screen and (max-width: 540px) {
.top-section .main-banner .bottom-wrap .action-buttons { flex-direction: column-reverse; width: 100%; gap: 6px; }
.top-section .main-banner .bottom-wrap .action-buttons .button { width: 100%; box-sizing: border-box; white-space: nowrap; }
.top-section .main-banner .bottom-wrap .action-buttons .button br {display: none;}
.top-section .main-banner .bottom-wrap .trust { width: 100%; }
.top-section .main-banner .bottom-wrap .trust .item { height: auto; display: flex; flex-direction: column; padding: 5px; gap: 5px; justify-content: flex-end; }
.top-section .main-banner .bottom-wrap .trust .item .logo { height: 100%; width: 100%; object-fit: contain; }
.top-section .main-banner .bottom-wrap .trust .item .stars { height: 12px; }
.top-section .main-banner .bottom-wrap .trust .item .rate { height: 30px; }
}