﻿/*#region fonts import */
@font-face {
    font-family: 'Heebo-Light';
    font-display: swap;
    src: url('fonts/Heebo-Light.ttf') format('truetype');
}
@font-face {
    font-family: 'Heebo-Regular';
    font-display: swap;
    src: url('fonts/Heebo-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Heebo-Bold';
    font-display: swap;
    src: url('fonts/Heebo-Bold.ttf') format('truetype');
}

/*#endregion fonts */
:root {
    /*#region ==================================== general color variables ======================================= */
    --main-color: #252525 !important;
    --primary-color: #343B43;
    --secondary-color: #343B43;
    --sub-color: #4f4c45;
    --text-color: #424242;
    --text-sub-color: #616161;
    --body-background-color: #EEECE5;
    --sub-background-color: #FBFAF7;
    --head-color: var(--main-color);
    --footer-color: #415161;
    --benefits-banner-background: #223B5A;
    /*#region grayscale */
    --color-100: #0A0A0A;
    --color-90: #424242;
    --color-80: #616161;
    --color-70: #757575;
    --color-60: #9E9E9E;
    --color-50: #C2C2C2;
    --color-40: #BDBDBD;
    --gray-30: #EDEDED;
    --gray-20: #F5F5F5;
    --gray-10: #EBE8E6;
    /*#endregion grayscale */
    --body-background: #FFF;
    /*#endregion color variables*/
    /*#region elements */
    /* navbar */
    --scrolled-navbar-height: 100px;
    --navbar-background: linear-gradient(180deg, #000000 -66.49%, rgba(0, 0, 0, 0) 100%);
    --scrolled-navbar-background: var(--gray-10);
    --navbar-mobile-background: var(--scrolled-navbar-background);
    --navbar-mobile-height: 80px;
    /* main-menu */
    --menu-background: #FFFFFF;
    --menu-desktop-height: 100vh;
    --menu-top-section-height: 140px;
    --menu-desktop-width: 400px;
    --menu-mobile-height: 95vh;
    --menu-mobile-width: 100%;
    --menu-mobile-top-location: 80px;
    --close-menu-btn-fill: var(--text-color);
    --menu-line-border: transparent;
    --menu-line-color: var(--text-color);
    --menu-line-hover: var(--font-semibold);
    --room-slider-wrap-desktop-height: auto;
    --room-slider-wrap-mobile-height: 500px;
    /*#endregion elements*/
    /*#region buttons */
    --book-btn-desktop-text-color: #FFFFFF;
    --book-btn-desktop-font-size: var(--extra-large);
    --book-btn-desktop-hover-font-size: 24px;
    --book-btn-desktop-background-color: #32302C;
    --book-btn-desktop-border-radius: 3px;
    --book-btn-desktop-hover-color: var(--book-btn-desktop-background-color);
    --book-btn-desktop-active-color: #3E4E5F;
    --book-btn-desktop-focus-border: none;
    --book-btn-desktop-width: 100%;
    --book-btn-desktop-max-width: 200px;
    --book-btn-desktop-height: 50px;
    --book-btn-desktop-shadow: none;
    --book-btn-desktop-border: none;
    --book-btn-mobile-text-color: var(--gray-10);
    --book-btn-mobile-font-size: var(--large);
    --book-btn-mobile-background-color: var(--book-btn-desktop-background-color);
    --book-btn-mobile-border-radius: 5px;
    --book-btn-mobile-hover-color: var(--book-btn-desktop-background-color);
    --book-btn-mobile-active-color: var(--book-btn-desktop-active-color);
    --book-btn-mobile-focus-color: none;
    --book-btn-mobile-width: calc(100% - 20px);
    --book-btn-mobile-height: 60px;
    --book-btn-mobile-shadow: none;
    --book-btn-mobile-border: none;
    --book-btn-mobile-fake-background: #EEECE5;
    --secondary-btn-desktop-text-color: var(--gray-10);
    --secondary-btn-desktop-font-size: var(--medium);
    --secondary-btn-desktop-hover-font-size: var(--large);
    --secondary-btn-desktop-background-color: #32302C;
    --secondary-btn-desktop-border-radius: 2px;
    --secondary-btn-desktop-hover-color: var(--sub-color);
    --secondary-btn-desktop-active-color: #4F757D;
    --secondary-btn-desktop-focus-color: none;
    --secondary-btn-desktop-width: 180px;
    --secondary-btn-desktop-height: 40px;
    --secondary-btn-desktop-shadow: none;
    --secondary-btn-desktop-border: none;
    --secondary-btn-desktop-font-family: var(--font-semibold);
    --secondary-btn-desktop-line-height: var(--large-line);
    --secondary-btn-mobile-font-family: var(--font-regular);
    --secondary-btn-mobile-text-color: var(--gray-10);
    --secondary-btn-mobile-font-size: var(--medium);
    --secondary-btn-mobile-hover-font-size: var(--large);
    --secondary-btn-mobile-background-color: var(--book-btn-mobile-background-color);
    --secondary-btn-mobile-border-radius: 2px;
    --secondary-btn-mobile-hover-color: #55848E;
    --secondary-btn-mobile-active-color: none;
    --secondary-btn-mobile-focus-color: none;
    --secondary-btn-mobile-width: 164px;
    --secondary-btn-mobile-height: 40px;
    --secondary-btn-mobile-shadow: none;
    --secondary-btn-mobile-border: none;
    --secondary-btn-mobile-line-height: var(--large-line);
    --room-more-details-btn-mobile-width: 100%;
    --room-more-details-btn-mobile-background: none;
    --room-more-details-btn-mobile-color: #9C8047;
    --room-more-details-btn-desktop-width: 150px;
    --room-more-details-btn-line-height: var(--h4-size);
    --all-deals-link-background: var(--gray-10);
    --all-deals-link-border-radius: 2px;
    --all-deals-link-border: 2px solid #32302C;
    --contact-btn-send-background: var(--secondary-btn-desktop-background-color);
    --contact-btn-send-color: var(--gray-10);
    /*#endregion buttons */
    /*img tag border-radius*/
    --element-image-border-radius: 0;
    /*#region backgrounds */
    --lang-switch-arrow: url('/Content/images/arrow-language.png') no-repeat;
    --lang-switch-arrow-mobile: url('/Content/images/arrow-language-mobile.png') no-repeat;
    --main-logo: url('/Content/images/logomainport.png') no-repeat;
    --logo-width: 200px;
    --logo-height: 100px;
    --deal-carousel-arrow: url('/Content/images/deal-arrow-right.png');
    --main-carousel-arrow: url('images/main-arrow-right.png');
    --carousel-arrow-height: 30px;
    --carousel-arrow-width: 100%;
    --element-main-background: var(--gray-10);
    --room-slider-wrap-background: none;
    --gallery-tab-background: var(--secondary-btn-desktop-background-color);
    --gallery-tab-border-radius:2px;
    /*#endregion backgrounds */
    /*#region indicators*/
    --active-indicator-background: #3E3E3E;
    --indicator-border: 1px solid #3E3E3E;
    --indicator-bottom-location: 70px;
    /*#endregion */
    /*#region heights */
    --home-page-slider-height: 85vh;
    --inner-page-slider-height: 70vh;
    --deals-page-image-height: 450px;
    --room-inner-page-img-height-desktop: 600px;
    --room-inner-page-img-height-mobile: 260px;
    /*#endregion heights */
    /*#region engine location */
    --engine-location: 79vh;
    --engine-inner-page-location: 64vh;
    /*#endregion */
    /*#region fonts vars */
    --font-light: 'Heebo-Light';
    --font-regular: 'Heebo-Regular';
    --font-semibold: 'Heebo-SemiBold';
    --font-bold: '';
    --font-size: 16px;
    /*#endregion fonts */
    /*#region headings font sizes */
    --engine-discount-font-size: 1.25rem;
    --h1-size: 2rem;
    --h2-size: 2rem;
    --h3-size: 1.375rem;
    --h4-size: 1.25rem;
    --h1-mobile-size: 24px;
    --h2-mobile-size: 22px;
    --h3-mobile-size: 18px;
    --h4-mobile-size: 1.125rem;
    /*#endregion headings font sizes */
    /*#region lines-height */
    --h1-line-height: 2.75rem;
    --h2-line-height: 2.25rem;
    --h3-line-height: 1.75rem;
    --h4-line-height: 1.625rem;
    /*#endregion lines-height */
    /*#region text font sizes */
    --extra-small: 0.875rem;
    --small: 0.938rem;
    --medium: 1rem;
    --large: 1.0625rem;
    --extra-large: 1.45rem;
    --mobile-font-size: 1rem;
    /*#endregion text font sizes */
    /*#region text lines-height*/
    --large-line: 2.5rem;
    --big-line: 1.5rem;
    --medium-line: 1.313rem;
    --small-line: 1.25rem;
    /*#endregion text lines heights*/
    /*#region Banner grid vars*/
    --grid-template-columns-desktop: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    --grid-template-rows-desktop: 1fr;
    --grid-template-gap-desktop: 30px;
    --grid-template-areas-desktop: "a6 a6 a6 a1 a1 a1 a2 a2 a2" "a3 a3 a4 a4 a4 a4 a4 a5 a5";
    --grid-width-desktop: 83vw;
    --grid-max-width-desktop: 1400px;
    /*#endregion Banner grid vars*/
}
/*#region headings Hebrew Language */

.rtl {
    --font-light: 'Heebo-Light';
    --font-regular: 'Heebo-Regular';
    --font-semibold: 'Heebo-SemiBold';
    --dir: rtl;
}
/*#endregion Hebrew Language */
/*#region headings ltr Languages */
.ltr {
    --dir: ltr;
    /*#region fonts vars */
    --font-light: 'Heebo-Light';
    --font-regular: 'Heebo-Regular';
    --font-semibold: 'Heebo-SemiBold';
    --font-bold: '';
    /*#endregion fonts */
    /*#region headings font sizes */
    --h1-size: 2rem;
    --h2-size: 2rem;
    --h3-size: 1.375rem;
    --h4-size: 1.25rem;
    /*#endregion headings font sizes */
    /*#region lines-height */
    --h1-line-height: 2.75rem;
    --h2-line-height: 2.25rem;
    --h3-line-height: 1.75rem;
    --h4-line-height: 1.625rem;
    /*#endregion lines-height */
    /*#region text font sizes */
    --small: 0.938rem;
    --medium: 1rem;
    --large: 1.0625rem;
    --extra-large: 1.45rem;
    /*#endregion text font sizes */
    /*#region text lines-height*/
    --large-line: 2.5rem;
    --big-line: 1.5rem;
    --medium-line: 1.313rem;
    --small-line: 1rem;
    /*#endregion text lines heights*/
    /*overrides*/
    --menu-line-hover: var(--font-semibold);
    --secondary-btn-desktop-font-family: var(--font-regular);
}
/*#endregion ltr Languages */