//
// Variables
// --------------------------------------------------


//== Colors

$gradient-hero-blue: linear-gradient(180deg, transparent, rgba(0,14,29,1) 75%);
$gradient-blue-black: transparent linear-gradient(180deg, #00000000 0%, #000000 100%) 0% 0% no-repeat padding-box;
$gradient-hero-white: transparent linear-gradient(180deg, transparent 0%, #ffffff 100%) 0% 0% no-repeat;
$gradient-feature-box: transparent linear-gradient(240deg, #00000000 0%, #000000 100%) 0% 0% no-repeat;
$gradient-articles-blue: transparent linear-gradient(180deg, #1dabeb00 0%, #1dabeb 100%) 0% 0% no-repeat;
$gradient-articles-green: transparent linear-gradient(180deg, #02c31900 0%, #02c319 100%) 0% 0% no-repeat;
$gradient-articles-red: transparent linear-gradient(180deg, #e1232100 0%, #e12321 100%) 0% 0% no-repeat;

$white:                 #ffffff !default;
$black:    				#000000 !default;

$blue:                  #006D8F !default;
$blue-dark:             #0995d4 !default;
$blue-darker:           #000E1D !default;
$blue-light:            #32C3EE !default;
$blue-lighter:          #27B2C1 !default;
$blue-70c:          	#006D8F !default;
$blue-6ce:          	#6cecfb !default;
$blue-03:          		#002733 !default;
$orange:                #faa608 !default;
$orange-dark:           #d68e08 !default;
$green:                 #02c319 !default;
$green-dark:            #029013 !default;
$green-light:           #93ffa0 !default;
$green-lighter:         #69ffd1 !default;
$red:                   #e12321 !default;
$red-dark:              #D03554 !default;
$rose:                  #f6bed9 !default;
$violet-light:          #c3a3fd !default;
$yellow:	            #ffdb38 !default;
$yellow-e8b:            #e8b666 !default;
$yellow-ecc:            #ecc720 !default;

$gray-c9: 				#c9c9c9 !default;
$gray-a2: 				#a2a2a2 !default;
$gray-50: 				#50b9ff !default;
$gray-88: 				#00000088 !default;
$gray-66: 				#666666 !default;
$gray-c9: 				#c9c9c9 !default;
$gray-01a:				#0000001a !default;

$primary-color:         $white !default;
$secondary-color:     	$blue-light !default;
$tertiary-color:     	$black !default;
$quaternary-color:     	$blue !default;

$primary-bg:            $blue-darker;
$secondary-bg:       	$blue-03 !default;
$tertiary-bg:       	$gradient-blue-black !default;

$link-color:            $primary-color !default;
$link-hover-color:      $secondary-color !default;
$link-hover-decoration-none: none !default;
$link-hover-decoration-underline: underline !default;


$drayton-blue: #41448E;


// custom components colors

$oc-color-1: $drayton-blue;
$oc-color-3: #ffffff;
$oc-color-2: #FAB702;

// hero search component colors
$hs-color-1: $drayton-blue;
$hs-color-2: #00A5B5;
$hs-color-3: #FFFFFF;
$hs-button-bg: #FAB702;


// hero section components colors

// SCSS Variables
// Color Variables
$hero-text-color: #ffffff;

// Black overlay opacity levels
$hero-black-70: rgba(0, 0, 0, 0.7);
$hero-black-50: rgba(0, 0, 0, 0.5);
$hero-black-30: rgba(0, 0, 0, 0.3);
$hero-black-10: rgba(0, 0, 0, 0.1);

//ridetile component colors

$ridetile-title-color: $drayton-blue;
$ridetile-text-white: #ffffff;
$ridetile-overlay-black: rgba(0, 0, 0, 0.9);
$ridetile-overlay-black-60: rgba(0, 0, 0, 0.6);
$ridetile-overlay-black-30: rgba(0, 0, 0, 0.3);
$ridetile-shadow-black: rgba(0, 0, 0, 0.2);
$ridetile-dot-inactive: #d1d5db;
$ridetile-background-color: #282F7E;



// Semantic aliases
$hero-overlay-start: $hero-black-70;
$hero-overlay-middle: $hero-black-30;
$hero-overlay-end: $hero-black-10;
$hero-overlay-mobile-start: $hero-black-50;
$hero-overlay-mobile-end: $hero-black-70;
$hero-text-shadow: $hero-black-50;
$hero-text-shadow-light: $hero-black-50;


/* Promotion Bar Styles */
$promotion-bar-bg-color: #D31216;
$promotion-bar-text-color: #FFFFFF;
$promotion-bar-close-hover-bg: rgba(0, 0, 0, 0.15);


$news-carousel-color-primary: $drayton-blue;
$news-carousel-color-accent: #D31216;



// Promotion Carousel Variables
$promotion-color-1: #e0e0e0;
$promotion-color-2: $drayton-blue;
$promotion-color-3: #fff;
$promotion-color-4: #000;
$promotion-color-5: #9747FF;
$promotion-color-6: #FAB702;
$promotion-color-9: transparent;




// Pricecard SCSS Variables
$pricecard-white: #ffffff;
$pricecard-shadow-light: rgba(0, 0, 0, 0.08);
$pricecard-border-gray: #e5e7eb;
$pricecard-purple-gradient-start: #5b4a9f;
$pricecard-purple-gradient-end: #4c3d95;
$pricecard-purple-dark: #4c3d91;
$pricecard-purple-hover: #4a3a8a;
$pricecard-purple-subtitle: #6d28d9;
$pricecard-pink-badge: rgba(236, 72, 153, 0.9);
$pricecard-orange-description: #f59e0b;
$pricecard-yellow-save: #FAB702;
$pricecard-red-gradient-start: #dc2626;
$pricecard-red-gradient-end: #b91c1c;
$pricecard-red-hover-end: #991b1b;
$pricecard-red-shadow: rgba(220, 38, 38, 0.3);
$pricecard-red-shadow-hover: rgba(220, 38, 38, 0.4);
$pricecard-purple-shadow: rgba(91, 74, 159, 0.4);


// Stay Component SCSS Variables
$stay-text-white: #fff;
$stay-card-border: #e0e0e0;
$stay-badge-gradient-start: #7c3aed;
$stay-badge-gradient-end: #4c1d95;
$stay-badge-text-bg: #9747FF;
$stay-title-color: #3730a3;
$stay-subtitle-color: #6d28d9;
$stay-button-primary-bg: #fbbf24;
$stay-button-primary-text: #1f2937;
$stay-button-primary-hover: #f59e0b;
$stay-button-primary-shadow: rgba(251, 191, 36, 0.4);


$color-1: $drayton-blue;
$color-4: #FAB702;
$color-5: #EC4899E6;
$color-6: #dc2626;
$color-7: #b91c1c;
$color-8: #991b1b;
$color-9: #DC26264D;
$color-10: #DC262666;
$color-11: $primary-color;
$color-12: #F1F0F0;
$color-13: #d1d5db;
$color-14: #00000033;

$staytile-title-color: #3730a3;
$staytile-tabs-bg: $color-12;
$staytile-text-white: $primary-bg;
$staytile-card-border: #e0e0e0;
$staytile-badge-box-bg: $drayton-blue;
$staytile-badge-text-bg: #9747FF;
$staytile-card-title-color: #42448E;
$staytile-card-subtitle-color: $color-4;
$staytile-button-primary-bg: #fbbf24;
$staytile-button-primary-text: #1f2937;
$staytile-button-primary-hover: #f59e0b;
$staytile-button-primary-shadow: rgba(251, 191, 36, 0.4);
$staytile-nav-button-bg: #5b4a9f;
$staytile-nav-button-hover: #4c3d95;
$staytile-shadow-black: rgba(0, 0, 0, 0.2);
$staytile-dot-inactive: $color-13;

$menutabs-color-primary: $drayton-blue;
$menutabs-color-background: $color-12;
$menutabs-color-white: $primary-bg;

// Sticky Footer Menu Variables
$sfm-color-1: #40458E;
$sfm-color-2: #7B7FBD;
$sfm-color-3: white;
$sfm-color-4: black;
$sfm-shadow-color: rgba(0, 0, 0, 0.2);
$sfm-border-color: rgba(255, 255, 255, 0.2);
$sfm-item-bg: rgba(255, 255, 255, 0.15);
$sfm-item-hover-bg: rgba(255, 255, 255, 0.25);
$sfm-item-hover-shadow: rgba(0, 0, 0, 0.15);
$sfm-item-active-bg: rgba(255, 255, 255, 0.3);
$sfm-item-active-border: rgba(255, 255, 255, 0.5);



//== Typography

$font-family-montserrat:      "Montserrat", sans-serif !default;
$font-family-opensans:        "Open Sans", sans-serif !default;
$font-family-gotham:          "Gotham", sans-serif !default;
$font-family-raleway:         "Raleway", sans-serif !default;
$font-family-mukta:           "Mukta", sans-serif !default;
$font-family-fredoka:         "Fredoka One", sans-serif !default;
$font-family-questrial:       "Questrial", sans-serif !default;
$font-family-titan:           "Titan One", sans-serif !default;
$font-family-sans-serif:      $font-family-raleway !default;
$font-family-dm:              "DM" !default;

$font-family-primary:         $font-family-raleway !default;
$font-family-secondary:       $font-family-opensans !default;
$font-family-tertiary:        $font-family-mukta !default;

$font-size-base:              1rem !default;
$font-size-sm:                $font-size-base * .875 !default;
$font-size-lg:                $font-size-base * 1.25 !default;
$font-size-10:                .625rem !default;
$font-size-12:                .75rem !default;
$font-size-14:                .875rem !default;
$font-size-16:                1rem !default;
$font-size-18:                1.125rem !default;
$font-size-20:                1.25rem !default;
$font-size-22:                1.375rem !default;
$font-size-24:                1.5rem !default;
$font-size-26:                1.625rem !default;
$font-size-32:                2rem !default;
$font-size-40:                2.75rem !default;
$font-size-48:                3rem !default;
$font-size-54:                3.5rem !default;
$font-size-64:                4rem !default;

$font-size-1:                 1;
$font-size-1-1:               1.1;

$font-weight-thin:            100 !default;
$font-weight-lighter:         lighter !default;
$font-weight-light:           300 !default;
$font-weight-normal:          400 !default;
$font-weight-medium:          500 !default;
$font-weight-bold:            700 !default;
$font-weight-bolder:          800 !default;
$font-weight-black:           900 !default;

$line-height-base:            1.25 !default;
$line-height-sm:              1.125 !default;
$line-height-lg:              1.5 !default;
$line-height-lem:             1em !default;
$line-height-11:              .688rem !default;
$line-height-14:              .875rem !default;
$line-height-16:              1rem !default;
$line-height-18:              1.125rem !default;
$line-height-20:              1.25rem !default;
$line-height-22:              1.375rem !default;
$line-height-24:              1.5rem !default;
$line-height-26:              1.625rem !default;
$line-height-28:              1.75rem !default;
$line-height-30:              1.875rem !default;
$line-height-32:              2rem !default;
$line-height-34:              2.125rem !default;
$line-height-38:              2.375rem !default;
$line-height-40:              2.5rem !default;
$line-height-46:              2.875rem !default;
$line-height-50:              3.125rem !default;
$line-height-60:              3.75rem !default;
$line-height-70:              4.375rem !default;
$line-height-80:              5rem !default;

// $h1-font-size:                $font-size-base * 4.5 !default;
// $h2-font-size:                $font-size-base * 3 !default;
// $h3-font-size:                $font-size-base * 2 !default;
// $h4-font-size:                $font-size-base * 1.5 !default;
// $h5-font-size:                $font-size-base * 1.25 !default;
// $h6-font-size:                $font-size-base !default;

// $h1-font-size-md:             $font-size-base * 3.75 !default;
// $h2-font-size-md:             $font-size-base * 2.5 !default;

// $h1-font-size-sm:             $font-size-base * 1.9 !default;
// $h2-font-size-sm:             $font-size-base * 1.8 !default;
// $h3-font-size-sm:             $font-size-base * 1.3 !default;


// header
$header-height: 70px;
$header-height-mobile: 70px;

// interferes with defaults .e.g. makes every button rounded// @include border-radius($border-radius);
$border-radius:               360px;
$border-radius-card:          8px;


// box-shadow: $box-shadow;
$box-shadow:                  0 .5rem 1rem rgba($black, .15);
$box-shadow-sm:               0 .125rem .25rem rgba($black, .075);
$box-shadow-lg:               0 1rem 3rem rgba($black, .175);
$box-shadow-inset:            inset 0 1px 2px rgba($black, .075);
$box-shadow-box:              0px 5px 15px #0000001A;
$box-shadow-box-inset:        inset 0px 3px 6px #00000029;
$box-shadow-none:             none;


$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xll: 1300px,
  xxl: 1400px,
  xxxl: 1550px
) !default;

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px,
  xxxl: 1550px
) !default;


$reviews-section-bg: #E8F4F8;
$reviews-card-bg: #41448E;
$reviews-text-dark: #41448E;
$reviews-title-color: $reviews-text-dark;
$reviews-rating-color: $reviews-text-dark;
$reviews-nav-bg: $reviews-card-bg;
$reviews-star-active: #FFCB00;
$reviews-dot-inactive: #B0BEC5;
$reviews-dot-active: $reviews-card-bg;

$review-card-bg: #1AADB1;


// herosearch default background 
$herosearch-bg : #ffffff;

//
// imports
// --------------------------------------------------

@import "../../Public/Contrib/node_modules/bootstrap/scss/bootstrap";
@import "../../Public/Contrib/node_modules/animate.css/animate";
@import "../../Public/Contrib/node_modules/owl.carousel/src/scss/owl.carousel";
@import "headings";