:root {
    --white-color: #fff;
    --yellow-color: #CC9933;
    --yellow-color2: #F0BF5F;
    --yellow-color__dark: #A47312;
    --white-color1: #f1f1f1;
    --white-color2: #e9e9e9;
    --grey-color: #999;
    --cursed-color: #666;
    --grey-color__dark: #333;
}

@font-face {
    font-family: "Muller";
    src: local('Muller-Bold'),
        url('../fonts/MullerBold.woff2') format("woff2"),
        url("../fonts/MullerBold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Muller";
    src: local('Muller-Medium'),
        url('../fonts/MullerMedium.woff2') format("woff2"),
        url("../fonts/MullerMedium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Muller";
    src: local('Muller-Regular'),
        url('../fonts/MullerRegular.woff2') format("woff2"),
        url("../fonts/MullerRegular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Muller', sans-serif;
    font-weight: 400;
    background-color: var(--white-color1);
}

/* glob */
.list-reset {
    margin: 0;
    padding: 0;
    list-style: none;
}

.btn {
    border-radius: 10px;
    padding: 13px 20px;
    font-family: inherit;
    font-weight: 400;
    font-size: 16px;
    transition: background-color 0.3s ease-in-out;
}

.btn:focus, .btn:hover {
    background-color: var(--yellow-color);
    color: var(--white-color);
}

.btn:active {
    color: var(--white-color);
    background-color: var(--yellow-color__dark);
}

.btn-reset {
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.flex {
    display: flex;
}

.container {
    width: 100%;
    max-width: 1140px;
    padding: 0 15px;
    margin: 0 auto;
}

.section-title {
    margin-bottom: 20px;
    padding-left: 40px;
    font-weight: 400;
    font-size: 40px;
    line-height: 40px;
    color: var(--grey-color__dark);
}

.section-offset {
    padding-top: 35px;
    padding-bottom: 35px;
}

.flex-column {
    flex-direction: column;
}

.hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
}

/* header */
.header {
    padding-top: 30px;
    padding-bottom: 35px;
}

.header-top {
    align-items: center;
    margin-bottom: 30px;
    gap: 40px;
}

.header-list {
    gap: 30px;
}

.phone-number {
    margin-right: auto;
    font-weight: 500;
    font-size: 20px;
    color: var(--cursed-color);
    transition: color 0.3s ease-in-out;
}

.phone-number:focus {
    color: var(--yellow-color);
    outline: 1px solid var(--yellow-color);
    outline-offset: 5px;
}

.phone-number:hover {
    color: var(--yellow-color);
}

.phone-number:active {
    color: var(--yellow-color__dark);
    outline: none;
}

.private-link {
    gap: 5px;
    display: flex;
    align-items: center;
    color: var(--yellow-color);
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    transition: color 0.3s ease-in-out;
}

.private-link:focus {
    outline: 1px solid var(--yellow-color);
    outline-offset: 5px;
}

.private-link:hover {
    color: var(--yellow-color2);
    transition: color 0.3s ease-in-outs;
}

.private-link:hover svg path {
    fill: var(--yellow-color2);
    transition: fill 0.3s ease-in-out;
}

.private-link:active {
    color: var(--yellow-color__dark);
    outline: none;
}

/* header-wrapper */
.header-wrapper {
    align-items: center;
    background-color: var(--white-color);
    padding: 14px 45px;
    border-radius: 15px;
    justify-content: space-between;
}

.header-link {
    color: var(--cursed-color);
    font-weight: 400;
    font-size: 16px;
    transition: color 0.3s ease-in-out;
} 

.header-link:focus {
    color: var(--yellow-color);
    outline: 1px solid var(--yellow-color);
    outline-offset: 5px;
}

.header-link:hover {
    color: var(--yellow-color);
}

.header-link:active {
    color: var(--yellow-color__dark);
    outline: none;
}

.btn-wrapper {
    display: flex;
    gap: 40px;
}

.header-btn {
    display: inline-block;
    line-height: 16px;
    color: var(--yellow-color);
    border: 1px solid var(--yellow-color);
}

/* special */
.special-wrapper {
    gap: 24px;
}

.special-item {    
    position: relative;
    max-width: 573px;
    width: 100%;
    border-radius: 15px;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 40px 108px 40px 45px;
    min-height: 258px;
}

.special-item__img1 {    
    background-image:  linear-gradient(90deg, rgba(48, 64, 89, 0.84) 0%, rgba(53, 65, 83, 0.00) 66.67%)
    ,url("../img/special/01.jpg");
}

.special-item__img2 {
    background-image: linear-gradient(90deg, rgba(48, 64, 89, 0.84) 0%, rgba(53, 65, 83, 0.00) 66.67%)
    ,url('../img/special/02.jpg');
}

.special-item__img3 {
    background-image: linear-gradient(0deg, rgba(48, 64, 89, 0.84) 0%, rgba(53, 65, 83, 0.00) 66.67%)
    ,url('../img/special/03.jpg');
}

.special-item__big {
    position: relative;
    min-height: 540px;
    padding: 212px 229px 40px 45px;
    background-repeat: no-repeat;
    max-width: 573px;
    width: 100%;
    background-size: cover;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.special-item:first-child {
    margin-bottom: 24px;
}

.special-item-title {
    margin-bottom: 15px;
    font-size: 40px;
    font-weight: 700;
    line-height: 40px;
    color: var(--white-color);
}

.special-item-title__big {
    font-size: 60px;
    line-height: 60px;
}

.special-price {
    display: block;
    margin-bottom: 47px;
    font-size: 20px;
    font-weight: 400;
    line-height: 20px;
    color: var(--white-color);
    opacity: .8;
}

.special-price__big {
    font-size: 30px;
    line-height: 30px;
}

.more {
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    color: var(--yellow-color2);
    background-image: url('../img/services/arrow.svg');
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 15px;
    width: fit-content;
    transition: color 0.3s ease-in-out, padding 0.6s ease-in-out;
}

.more::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    outline: 1px solid var(--yellow-color);
    outline-offset: 5px;
    opacity: 0;
}

.more:focus-visible::after {
    opacity: 1;
    transition: opacity 0.6s ease-in-out;
}

.more:hover {
    padding-right: 25px;
}

.more:active {
    color: var(--white-color);
    padding-right: 15px;
}

/* about */
.about-descr {
    width: 100%;
    max-width: 888px;
    font-size: 16px;
    font-weight: 400;
    line-height: 32px;
}

/* services */
.services-list {
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 50px;
    justify-content: space-between;
}

.services-list-item {
    position: relative;
    width: 513px;
    padding: 191px 45px 35px;
    background-repeat: no-repeat;
    background-color: var(--white-color);
    border-radius: 15px;
}

.services-list-item-img1 { 
    background-image: url('../img/services/01.jpg');
}

.services-list-item-img2 {
    background-image: url('../img/services/02.jpg');
}

.services-list-item-img3{
    background-image: url('../img/services/03.jpg');
}

.services-list-item-img4 {
    background-image: url('../img/services/04.jpg');
}

.services-link {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 500;
    line-height: 40px;
    color: var(--yellow-color);
    transition: all 0.6s ease-in-out;
    width: fit-content;
}

.services-link::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    outline: 1px solid var(--yellow-color);
    outline-offset: 5px;
    opacity: 0;
}

.services-link:focus-visible::after {
    opacity: 1;
}

.services-link__svg {
    transform: translateX(5px);
    transition: all 0.6s ease-in-out;
}

.services-link:hover {
    color: var(--yellow-color2);
}

.services-link:hover .services-link__svg {   
    transform: translateX(15px);
    transition: all 0.6s ease-in-out;
}

.services-link:hover .services-link__svg path {
    stroke: var(--yellow-color2);
}

.services-link:active {
    color: var(--yellow-color__dark);
}

.services-descr {
    width: 100%;
    max-width: 402px;
    font-size: 16px;
    font-weight: 400;
    line-height: 32px;
}

/* advantages */
.advantages-list {
    flex-wrap: wrap;
    gap: 22px;
}

.advantages-list-item {
    width: 256px;
    padding: 116px 42px 32px 45px;
    border-radius: 15px;
    background-repeat: no-repeat;
    background-position: 40px 45px;
    background-color: var(--white-color);
}

.advantages-list-descr {
    font-size: 16px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: -0.5px;
}

.advantages-list-item__img1 {
    background-image: url('../img/advantages/01.svg');
}

.advantages-list-item__img2 {
    background-image: url('../img/advantages/02.svg');
}

.advantages-list-item__img3 {
    background-image: url('../img/advantages/03.svg');
}

.advantages-list-item__img4 {
    background-image: url('../img/advantages/04.svg');
}

.advantages-list-item__img5 {
    background-image: url('../img/advantages/05.svg');
}

.advantages-list-item__img6 {
    background-image: url('../img/advantages/06.svg');
}

.advantages-list-item__img7 {
    background-image: url('../img/advantages/07.svg');
}

.advantages-list-item__img8 {
    background-image: url('../img/advantages/08.svg');
}


/* placement */
.placement-list {
    flex-wrap: wrap;
    gap: 24px;
}

.placement-list-item {
    width: 354px;
    background-color: var(--white-color);
    border-radius: 15px;
    overflow: hidden;
}

.placement-item-wrapper {
    padding: 32px 45px 45px;
}

.placement-img {
    display: block;
}

.price-wrapper {
    align-items: center;
    margin-bottom: 16px;
    justify-content: space-between;
}

.placement-name {
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
}

.placement-location {
    display: block;
    margin-bottom: 20px;
    color: var(--grey-color);
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
}

.placement-link {
    display: inline-block;
    color: var(--yellow-color);
    border: 1px solid var(--yellow-color);
    line-height: 16px;
}

.from {
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    color: var(--grey-color);
}

.placement-price {
    font-weight: 700;
    font-size: 20px;
    color: #000;
}

.night {
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
} 

.placement-list-item__img {
    background-image: linear-gradient(0deg, rgba(48, 64, 89, 0.84) 0%, rgba(53, 65, 83, 0.00) 66.67%)
    ,url('../img/placement/bg.jpg');
    border-radius: 15px;
    display: flex;
    align-items: end;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 27px;
}

.placement-list-item__full {
    position: relative;
    gap: 15px;
}

.all {
    color: var(--white-color);
    font-size: 20px;
    font-weight: 500;
    line-height: 200%;
}

.arrow {
    margin-bottom: 11px;
}

.all::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* want-tour */
.want-tour__body {
    background-color: var(--white-color2);
    border-radius: 15px;
    padding: 45px;
}

.want-tour__form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--white-color);
    border-radius: 15px;
    padding: 31px 28px 32px 28px;
}

.want-tour__title {
    padding-left: 0;
}

.form-select {
    border: none;
    width: 169px;
}

.form-input {
    border: none;
    width: 121px;
}

.form-input__border {
    border-bottom: 1px solid var(--white-color2);
} 

/* labels */
.form-label {
    display: flex;
    flex-direction: column;
}

.label-title {  
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 15px;
}

/* btn */
.want-form__btn {
    color: var(--yellow-color);
    border: 1px solid var(--yellow-color);
}

/* contacts */
.contacts-content {
    justify-content: space-between;
    padding: 45px;
    border-radius: 10px;
    background-color: var(--white-color);
} 

.contacts-content-left {
    width: 100%;
    max-width: 375px;
}

.contacts-content::after {
    content: "";
    width: 653px;
    background-repeat: no-repeat;
    background-image: url("../img/contacts/contacts-img.jpg");
    border-radius: 10px;
}

.contacts-list-item {
    justify-content: space-between;
    width: 100%;
    margin-bottom: 25px;
    padding-bottom: 23px;
    border-bottom: 1px solid var(--white-color2);
}

.contacts-body-address {
    font-style: normal;
}

.contacts-list-item-title {
    font-size: 20px;
    font-weight: 700;
}

.contacts-list-item-descr {
    width: 100%;
    max-width: 229px;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
}

.phone-body {
    width: 100%;
    max-width: 229px;
}

.email-body {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 229px;
}

.phone-link {
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    color: var(--yellow-color);
    line-height: 150%;
    transition: color 0.3s ease-in-out;
    width: fit-content;
}

.phone-link:focus-visible {
    color: var(--yellow-color);
    outline: 1px solid var(--yellow-color);
    outline-offset: 5px;
}

.phone-link:hover {
    color: var(--yellow-color2);
}

.phone-link:active {
    color: var(--yellow-color__dark);
    outline: none;
}

.email-link {
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: var(--yellow-color);
    transition: color 0.3s ease-in-out;
    width: fit-content;
}

.email-link:focus-visible {
    color: var(--yellow-color);
    outline: 1px solid var(--yellow-color);
    outline-offset: 5px;
}

.email-link:hover {
    color: var(--yellow-color2);
}

.email-link:active {
    color: var(--yellow-color__dark);
}

.by-questions {
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-color);
}

.schedule-descr {
    width: 100%;
    max-width: 229px;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
}

.contacts-body-btn { 
    display: inline-block;
    color: var(--yellow-color);
    font-size: 16px;
    font-weight: 400;
    border: 1px solid var(--yellow-color);
    padding: 27px 30px;
} 

/* footer */
.footer {
    padding-bottom: 30px;
} 

.footer-body {
    background-repeat: no-repeat;
    background-position: 739px bottom;
    background-image: url("../img/footer/footer-img.svg");
    background-color: var(--grey-color__dark);
    border-radius: 15px;
    justify-content: space-between;
    padding: 45px;
}

/* block 1 */
.footer-descr {
    margin-bottom: 40px;
    width: 100%;
    max-width: 302px;
    color: var(--white-color);
    font-size: 16px;
    font-weight: 400;
    line-height: 190%;
}

.agreement {
    color: var(--yellow-color);
    font-size: 16px;
    font-weight: 400;
}

/* block 2 */
.footer-item-address {
    font-style: normal;
}

.footer-address-descr {
    margin-bottom: 15px;
    width: 100%;
    max-width: 359px;
    color: var(--white-color);
    font-size: 16px;
    font-weight: 400;
    line-height: 190%;
}

.footer-contacts {
    gap: 5px;
}

.footer-contacts-item {
    font-size: 16px;
    font-weight: 400;
    color: var(--yellow-color);
}

.footer-list-item__link {
    transition: color 0.3s ease-in-out;
    color: var(--yellow-color);
    font-size: 16px;
    font-weight: 400;
}

.footer-list-item__link:focus-visible {
    color: var(--yellow-color);
    outline: 1px solid var(--yellow-color);
    outline-offset: 5px;
}

.footer-list-item__link:hover {
    color: var(--yellow-color2);
}

.footer-list-item__link:active {
    color: var(--yellow-color__dark);
    outline: none;
}

/* block 3 */
.social-list {
    row-gap: 20px;
}

.social-list-item__img {
    transition: fill 0.3s ease-in-out;
}

.social-list-item-link svg {
    fill: var(--grey-color);
}

.social-list-item-link:focus svg, 
.social-list-item-link:hover svg {
    fill: var(--yellow-color);
}

.social-list-item-link:active svg {
    fill: var(--yellow-color__dark);
}