/************************** FONTS IMPORT ****************************/
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');

/************************************ INITIAL **************************************/

* {
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}

body, a, p, sup, a:active, a:visited {
    font-family: 'Mulish', sans-serif;
    font-weight: 400;
    text-decoration: none;
    color: inherit;
}

ul {list-style-type: none;}

/*************************************** BG COLORS ********************************/

.bgGray {background-color: #F5FAFE;}
.bgWhite {background-color: #FFFFFF;}
.bgBlue {background-color: #0A223D;}
.bgRed {background-color: #EC1F46;}

/************************************************ TEXT *******************************/

.textWhite {color: #FFFFFF;}
.textRed {color: #EC1F46;}
.textGray {color: #333333;}
.textLGrey {color: #BDBDBD;}
.star {color: #F2994A;}

.size8 {font-size: 8px;}
.size10 {font-size: 10px;}
.size12 {font-size: 12px;}
.size14 {font-size: 14px;}
.size18 {font-size: 18px;}
.size24 {font-size: 24px;}
.size36 {font-size: 36px;}

.bold {font-weight: 700;}
.uppercase {text-transform: uppercase;}
.logo {font-family: 'Luckiest Guy', cursive;}
.line-spacing {margin-bottom: 10px;}

.active {padding-bottom: 15px; margin-top: 25px;border-bottom: 3px solid;}
.centred {text-align: center;}
/**************************************** TOP NAVIGATION *****************************/

.topnav {
    width: 100%;
    height: 60px;
    padding: 0px 165px;
}

.topnav p, .topnav a {
    float: left;
    margin: 0px 20px;
    font-size: 10px;
    line-height: 60px;
    text-decoration: none;
    text-align: center;
}

.topnav-right {  
    float: right;
}

/************************************ CENTRAL NAVBAR ************************************/

.navbar {
    width: 100%;
    height: 170px;
    padding: 0px 180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.navbar a {
    transition: 0.5s ease 0s;
    transition-property: initial;
}

.navbar a:hover {
    color: rgba(51, 51, 51, 0.8)
}

/******************************/
/********* NAVBAR LOGO ********/
/******************************/

.navbar__logo {
    cursor: pointer;
    font-family: 'Luckiest Guy', cursive;
    color: #333333;
    flex: 1; order: 1;
}

/******************************/
/****** NAVBAR SEARCHBOX ******/
/******************************/

.navbar__searchbox{flex: 2; order: 2; padding: 0 20px;}

.navbar__searchbox input {
    width: 350px;
    height: 40px;
    background-color: #F5FAFE;
    border-radius: 6px 0 0 6px;
    border: 0;
    padding: 0 10px;
}

.navbar__searchbox input::placeholder, input:focus {
    font-family: 'Mulish', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #333333;
    text-decoration: none;
}

.navbar__searchbox button {
    width: 65px;
    height: 40px;
    text-align: center;
    border-radius: 0px 6px 6px 0;
    border: 0;
    transition: 0.5s ease 0s;
    transition-property: initial;
    margin-left: -4px;
}

.navbar__searchbox button:hover {
    background-color: #f34e6d;
    color: #FFFFFF;
}

/*********************************/
/****** NAVBAR RIGHT LINKS ******/
/********************************/

.navbar__links {
    flex:1; 
    order:3; 
    display: flex; 
    justify-content: space-evenly; 
    align-content: center;
}

.navbar__links a {margin: auto;}

.navbar__links .badge{
    position: relative;
    top: -5px;
    left: -5px;
    padding: 2px 5px;
    border-radius: 100%;
}

/************************************ BOTTOM NAVBAR ************************************/

.navbottom {
    width: 100%;
    height: 80px;
    padding: 0px 180px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/************************************ HOTEL SECTION ************************************/
.hotel {
    width: 100%;
    padding: 10px 180px;
}

.breadcrumb {
    height: 50px;
}

/*************************/
/****** HOTEL NAME ******/
/***********************/

.info {
    width: 100%;
    height: 100px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: space-between;
}

.info__name {
    flex:11;
    order: 1;
}

.info__rattings {
    flex:1;
    order: 2;
    width: 60px;
    height: 55px;
    line-height: 20px;
    border-radius: 3px;
    padding: 5px;
    text-align: center;
}

/********************************/
/****** BADGE FLASH OFFER ******/
/******************************/
#flash-offer {
    padding: 3px 10px; 
    position: relative; 
    text-transform: capitalize;
    left: 10px;
    bottom: 5px;
    border-radius: 3px;
}

/**********************************/
/****** IMAGE, PLAN AND MAP ******/
/*********************************/

.details {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.details__image {
    width: 728px;
    height: 450px;
    background: url('../img/grand-hilton-hotel.png');
    flex: 2;
    margin-right: 15px;
    border-radius: 10px;
}

.details__plan-map {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 15px;
}

.details__map {
    width: 350px;
    height: 210px;
    border-radius: 8px;
    flex: 1;
    background: url('../img/map.png');
    margin-top: 15px;
}

/*******************
**** PLAN PANEL ****
********************/

.details__plan {
    width: 350px;
    height: 210px;
    margin-bottom: 15px;
    padding: 20px;
    border-radius: 8px;
    flex:1;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas:
        "price guest"
        ". ."
        ". ."
        "booking number"
        "button button"
}

.price {grid-area: price; align-self: center;}
.guest {grid-area: guest; justify-self: end; align-self: center;}
.booking {grid-area: booking;}
.number {grid-area: number; justify-self: end;}
.plan-button {
        border-radius: 4px;
        border: none;
        width: 295px;
        height: 45px;
        grid-area: button;
        justify-self: center;
        align-self: end;
}

/****************************** PACKAGES ********************/
.packages {
    width: 100%;
    padding: 30px 180px;
}

.cardsmenu {
    width: 100%;
    height: 80px;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.summery {
    width: 100%;
    margin-top: 30px;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
}

.package {width: 520px; margin: 10px; border-radius: 10px;}
.package:last-child {flex-grow: 1;}
.package__title {line-height: 50px; padding: 0 20px; border-radius: 5px 5px 0 0;}
.package__content {padding: 10px 20px; border-radius: 0 0 5px 5px;display: grid; justify-items: center;}
.package__content i {font-size: 18px; margin-right: 20px;}
.package__content li {margin: 15px auto;}

/*************
*** BOX 1 ***
************/
.package:nth-child(1) .package__content {
    align-items: start;
    grid-template-areas: 
    "col1 col2";
}

/*************
*** BOX 2 ***
************/

.package:nth-child(2) .package__content {
    align-items: start;
    grid-template-areas: 
    "col1 col2";
}

/*************
*** BOX 3 ***
************/
.package:nth-child(3) .package__content {
    align-items: start;
    grid-template-areas: 
    "col1 col2 col3"
}

.col1 {grid-area: col1;} 
.col2 {grid-area: col2;} 
.col3 {grid-area: col3;}
/****************** OTHER PACKAGES ******************/
.other {
    padding: 30px 0;
}

.other_container {
    width: 1197px;
    margin: 0 auto;   
}

.other__packages {margin-top:30px; display: flex; flex-wrap: wrap; gap: 30px;}

.other__packages__box {
    display: flex;
    flex-basis: calc(100% / 3 * 2 - 10px);
    height: 500px;
    border-radius: 10px;
}
.other__packages__box__image {
    overflow: hidden;
}
.other__packages__box__image img {
    width: 100%;
    height: auto;
}

.other__packages__box__image, .other__packages__box__info {
    width: 50%;
}

.other__packages__box__info {
    padding: 20px;
    position: relative;
    border-radius: 0 10px 10px 0;
}

.other__packages__box__info__rating {
    margin-bottom: 5px;
}

.hotel__top__main__title__stars__icon {
    margin-right: 3px;
}

.other__packages__box__info__name {
    margin-bottom: 30px;
}

.other__packages__box__info__description {
    margin-bottom: 50px;
    font-weight: 300;
    line-height: 25px;
}

.other__packages__box__info__location {
    font-weight: 300;
    margin-bottom: 50px;
}

.other__packages__box__info__location li i {
    margin-right: 10px;
}

.other__packages__box__info__location li:not(:last-child) {
    margin-bottom: 10px;
}

.other__packages__box__info__price__original {
    text-decoration: line-through;
}

.other__packages__box__info__price__discounted {
    font-weight: 700;
}

.other__packages__box__info__book {
    position: absolute;
    right: 20px;
    bottom: 20px;
}

.other__packages__box__info__button {
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 5px;
    text-align: center;
    border: 0;
}

.other__packages__box--small {
    flex-basis: calc(100% / 3 - 20px);
    height: 500px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}

.other__packages__box--small .other__packages__box__image {
    position: relative;
}

.other__packages__box--small .other__packages__box__image, .other__packages__box--small .other__packages__box__info {
    height: 250px;
    width: 100%;
}

.other__packages__box--small .other__packages__box__image span {
    position: absolute;
    top: 30px;
    left: 0;
    border-radius: 0 5px 5px 0;
    background: #EC1F46;
    padding: 5px 10px;
}

.other__packages__box--small .other__packages__box__info {
    border-radius: 0 0 10px 10px;
    padding: 30px 15px 15px 30px;
}

.other__packages__box--small .other__packages__box__info .other__packages__box__info__name, .other__packages__box--small .other__packages__box__info .other__packages__box__info__location {
    margin-bottom: 25px;
}

/****************************************** REVIEWS */
.reviews {padding: 50px 0 80px 0;}

.reviews__box {
    margin: 100px auto 0 auto;
    padding: 50px 100px 30px;
    width: 730px;
    border-radius: 5px;
    position: relative;
}

.reviews__box img {
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
}

.reviews__box__name {margin-bottom: 10px;}
.reviews__box__date {margin-bottom: 4px; display: block;}
.reviews__box__rating {margin-bottom: 35px; display: block;}
.reviews__box__body {text-align: justify; line-height: 18px;}
.reviews__box__left-arrow, .reviews__box__right-arrow { font-size: 20px; position: absolute; top: 100px;}
.reviews__box__left-arrow {left: -170px;}
.reviews__box__right-arrow {right: -170px;}

/******************************************** NEWSLETTER */
.newsletter {
    height: 260px;
    background-image: url(../img/newsletter.png);
    position: relative;
}

.newsletter::before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 34, 61, 0.8);
}

.newsletter__content {
    margin: 0 auto;
    width: 730px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.newsletter__content__form {display: flex;}
.newsletter__content__form__input {
    width: 250px;
    height: 50px;
    padding-left: 30px;
    color: #BDBDBD;
    border: none;
    border-radius: 8px 0 0 8px;
    flex: 1;
}

.newsletter__content__form__button {
    width: 60px;
    height: 50px;
    border: none;
    border-radius: 0 8px 8px 0;
}

/****************************** ACTIVITIES */
.activities { 
    max-width: 100%;
    margin: 0 auto;
    padding: 30px 180px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}
.activities__title {display: block; padding: 40px 185px 20px 185px;}
.activities__box {
    width: 255px;
    height: 255px;
    margin-bottom: 20px;
    padding: 150px 30px 30px 20px;
    border-radius: 0;
}

.activities__box:nth-child(1){background: url('../img/barman.png');}
.activities__box:nth-child(2){background: url('../img/golf.png');}
.activities__box:nth-child(3){background: url('../img/falls.png');}
.activities__box:nth-child(4){background: url('../img/boat.png');}

.activities__box__title {margin-bottom: 20px;}
.activities__box__button {padding: 7px 20px; border-radius: 5px;}

/******************************************************* FOOTER */
.footer {
    width: 100%;
    padding: 80px 180px;
}

/******* TOP */
.footer__top {display: flex; margin-bottom: 100px;}
.footer__top__logo {font-size:40px; flex-basis: 25%; margin-top: 30px;}
.footer__top__list {flex-basis: 25%;}
.footer__top__list__title {margin-bottom: 20px;}
.footer__top__list__link {line-height: 15px; margin-bottom: 10px;}
.footer__top__list__title .social-link:not(:last-child) {margin-right: 20px;}

/****** BOTTOM */
.footer__bottom {
    display: flex;
    align-items: flex-start;
    margin-bottom: 100px;
    gap: 30px;
}

.footer__bottom__contact, .footer__bottom__form {flex-basis: 50%;}
.footer__bottom__contact__title, .footer__bottom__form__title {margin-bottom: 25px;}
.footer__bottom__contact__text, .footer__bottom__contact__address, .footer__bottom__contact__phone {margin-bottom: 30px;}
.footer__bottom__contact__address, .footer__bottom__contact__phone, .footer__bottom__contact__email {display: flex;}
.footer__bottom i {font-size: 20px; margin-right: 30px;}

/****** BOTTOM FORM */
.footer__bottom__message__title {margin-bottom: 20px;}
.footer__bottom__message__form {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    position: relative;
}

.footer__bottom__message__form__name, 
.footer__bottom__message__form__phone, 
.footer__bottom__message__form__body {
    border-radius: 5px;
    padding-left: 30px;
}

.footer__bottom__message__form__name, 
.footer__bottom__message__form__phone {
    flex-basis: calc(50% - 15px);
    height: 50px;
}

.footer__bottom__message__form__body {
    flex-basis: 100%;
    height: 123px;
    padding-top: 20px;
}

.footer__bottom__message__form__name::placeholder, 
.footer__bottom__message__form__phone::placeholder, 
.footer__bottom__message__form__body::placeholder { 
    color: #BDBDBD; font-family:'Mulish', sans-serif;
}

.footer__bottom__message__form__submit {
    padding: 15px 60px;
    border-radius: 5px;
    border: 0;
}

.footer__bottom__message__form__required {
    position: absolute;
    right: 0;
    bottom: 20px;
}

/******** CONDITIONS ***/
.footer__conditions {display: flex;}

.footer__conditions__empty, 
.footer__conditions__list, 
.footer__conditions__credit-cards {flex-basis: calc(100% / 3);}

.footer__conditions__list {text-align: center;}

.footer__conditions__list, 
.footer__conditions__list__item, 
.footer__conditions__credit-cards {display: inline-block;}

.footer__conditions__list__item:not(:last-child) {margin-right: 20px;}
.footer__conditions__credit-cards {text-align: right;}