@charset "UTF-8"; header { position: fixed; top: 0px; left: 0px; width: 100%; } .top-menu { display: flex; flex-direction: row; justify-content: space-between; padding: 2em; color: var(--main-text-color); } .top-menu_logo { padding: 5px; } .top-menu_side { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; grid-gap: 23px; } .top-menu_phone { text-wrap: nowrap; } .block-banner { text-align: center; background-image: url("../assets/banner.png"); height: 822px; display: flex; flex-direction: column; justify-content: center; grid-gap: 2em; } .block-banner h1 { /* position: relative; top:100px; left:auto;*/ font-size: 65px; font-weight: 800; text-transform: uppercase; width: 1051px; margin: 0 auto; color: var(--main-text-color); } .block-banner button { padding: 16px 42px; margin: 0 auto; background-color: #FFFFFF; border-radius: 4px; font-size: 24px; } .carousel-control-next-icon { fill: #373737; } .carousel-control-next-icon :hover { fill: #D9D9D9; } .carousel-control-prev-icon { fill: #373737; } .carousel-control-prev-icon :hover { fill: #D9D9D9; } .carousel-custom { display: flex; flex-direction: row; overflow-x: auto; scroll-behavior: smooth; } .carousel-custom::-webkit-scrollbar { display: none; } .carousel-custom_title { width: 531px; font-size: 35px; font-weight: 600; text-transform: uppercase; color: var(--main-text-color); margin: 50px 50px; } .carousel-custom-item { flex: 0 0 auto; scroll-snap-align: start; /* Карточка всегда «магнитится» к левому краю */ padding: 5px 10px; text-align: center; } .carousel-custom-item h5 { color: #7E7E7E; font-size: 18px; } .carousel-custom-item p { color: #FFFFFF; font-size: 1em; } .carousel-custom-item + .carousel-custom-item { border-left: 2px solid #FFFFFF; /* Серый цвет из палитры Bootstrap */ } .carousel-custom_buttons { position: relative; width: 130px; margin-top: 1em; margin-left: auto; margin-right: 2em; } .carousel-custom_buttons button { width: 60px; height: 60px; border: 3px solid #373737; border-radius: 4px; } .carousel-custom_buttons button :hover { border-color: #D9D9D9; } .service_title { width: 531px; font-size: 35px; font-weight: 600; text-transform: uppercase; color: var(--main-text-color); margin: 50px 50px; } .service-item { /* position: relative; &::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: { size: cover; position: center; image: url('../assets/services/1.png'); } filter: brightness(28%); z-index: 1; } */ } .service-item:hover { /* &::before { filter: brightness(66%); } */ cursor: pointer; } .service-item { height: 800px; } .service-item_content { display: flex; flex-direction: column; justify-content: flex-end; backdrop-filter: brightness(28%); height: 100%; } .service-item_content:hover { backdrop-filter: brightness(66%); } .service-item_content:hover .service-item_link { display: block; } .service-item_content:hover p { display: block; } .service-item_content .left-border { border-left: 2px solid #fff; height: 242px; margin-left: 56px; } .service-item_num { font-size: 30px; font-weight: 800; padding-left: 38px; color: #fff; } .service-item_title { padding-left: 38px; color: #fff; font-size: 24px; font-weight: 600; } .service-item p { color: #fff; padding-left: 38px; padding-right: 79px; display: none; } .service-item_link { color: #fff; display: none; margin: 21px auto 39px 40px; font-size: 20px; } .service-item_link::before { content: ""; display: inline-block; width: 50px; height: 18px; margin-right: 23px; background-image: url("../assets/long_arrow.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; } * { box-sizing: border-box; font-family: "Mulish", sans-serif; } :root { --main-text-color: #E9E9E9; --bs-body-bg:#212121; } .block-arrow { position: relative; top: -30px; width: 100%; height: 20px; text-align: center; background-image: url(../assets/arrow.svg); background-repeat: no-repeat; background-position: center; } .arrow-down { display: inline-block; width: 15px; height: 15px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(45deg); } /*# sourceMappingURL=style.css.map */