/* ==========================================================================
 * File Name:         Variable
 * Description:       List of all variables used in Beet
 * Editing Details:   Change any variable to override to the values
                      you choose
                      Ensure to recompile this SASS file after modification

 * Attn: Variables are organized according to sections/type for ease of reference
 ============================================================================ */

//GENERAL GLOBAL VARIABLES: Breakpoints, columns

$breakpoints: (
  sm: 550px, //phones
  md: 750px, //tablet
  lg: 990px //desktop
  //Your custom breakpoints
);

//Grid Columns
$grid-col: 6;

/* ==========================================================================
 *
 * COLOURS
 * The palette is inspired of British artist Melanie Johnson's print work
 * To change any colours, simply swap out the current color values for your desired ones
 *
============================================================================= */

//Back ground and font colour:

//Accent colours
$accent: (
  beet: #580C2D,
  acai: #B43D76,
  rose: #F098A4,

  kale: #617C2D,
  avocado: #89924F,
  lettuce: #c8dcb7,

  tomatoe: #EC5B2C,
  orange: #EF993A,
  lemon: #f9e753,

  deepwater: #2a5277,
  hydrangea: #6CB0DA,
  wave: #C1CFD9,
  //Your own accent colours
);

//Basic colours
$basic: (
    mute: #F9F7EF,
    dark: #1E1C1B,
    peach: #F8E9D9,
    //Your own basic or gradient colours
);

//Gradient of gray
    $main-gray: #b4b4b3;
    $light-gray: ligten($main-gray, 18%);
    $dark-gray: darken($main-gray, 18%);
    $extra-dark-gray: darken($main-gray, 36%);

/* ==========================================================================
 *
 * FONT SCALES, TYPES & WEIGHTS
 * Beet has incorporated 3 types of Adobe fonts: Giulia, Forma DJP Micro, Realist
 * To change any font, rename the font name into the variables below and incorporate
   the corresponding font code.
 * 
============================================================================= */

// Fonts
$primary-font: "Giulia", san-serif;
$secondary-font: "Forma DJR Micro", serif;
$terciary-font: "Realist", serif;

$base-font-size: 16px;
$mobile-base-font-size: 14px;

$font-light: 300;
$font-regular: 400;
$font-bold: 500;

// Typographic scales
$multipliers: (
    minor-third: 1.200,
    major-second: 1.125,
    augmented-fourth: 1.414,
    // Your custom name: ratio pair
);

/* ==========================================================================
 *
 * HEIGHTS, PADDING & MARGIN
 * Default height, padding and margin values
 *
 *
============================================================================= */

/* Padding */

// Size Map

$sizes: (
  xs: 0.25rem,
  s: 0.5rem,
  m: 1rem,
  l: 1.5rem,
  xl: 2rem
);

$padding-xs: map-get($sizes, xs);
$padding-s: map-get($sizes, s);
$padding-m: map-get($sizes, m);
$padding-l: map-get($sizes, l);
$padding-xl: map-get($sizes, xl);

/* Margins */
$margin-xs: $padding-xs;
$margin-s: $padding-s;
$margin-m: $padding-m;
$margin-l: $padding-l;
$margin-xl: $padding-xl;

/* Line Height */
$base-line-height: 1.5em;
$large-line-height: calc(#{$base-line-height} + 1.5em);

/* Container Heights */
$height-s: 1.5rem;
$height-m: 2.5rem;
$height-l: 4.5rem;
$height-xl: 6.5rem;
$height-xxl: 8.5rem;

/* ==========================================================================
 *
 * BUTTONS
 * Button size, background & text color
 *
 *
============================================================================= */

$button-s: 1rem;
$button-m: 1.1rem;
$button-l: 1.2rem;

$button-bkgd-beet: map-get($accent,beet);
$button-bkgd-kale: map-get($accent,kale);
$button-bkgd-tomatoe: map-get($accent,tomatoe);
$button-bkgd-deepwater: map-get($accent,deepwater);
$button-bkgd-dark: map-get($basic,dark);
$button-bkgd-mute: map-get($basic,mute);
$button-bkgd-gray: map-get($basic,main-gray);
$button-bkgd-peach: map-get($basic,peach);

$button-text-light:map-get($basic,mute);
$button-text-dark: map-get($basic,dark);

/* ==========================================================================
 *
 * CARDS
 * Card colours, padding, box-shadow, and backgrounds
 *
 *
============================================================================= */

//General cards
$card-box-shadow: 1px 3px 9px rgba(0, 0, 0, 0.1);
$card-box-shadow-hover: 0 3px 9px rgba(0, 0, 0, 0.3);
$card-padding-l: 0rem 1.5rem;
$card-padding-m: 0rem 1rem;
$card-padding-s: 0rem 0.5rem;
$card-margin: 0 0 1rem 0;
$card-bkgd-mute: $button-bkgd-mute;
$card-bkgd-dark: $button-bkgd-dark;
$card-bkgd-rose: map-get($accent,rose);
$card-bkgd-lettuce: map-get($accent,lettuce);
$card-bkgd-wave: map-get($accent,wave);

/* ==========================================================================
 *
 * File Name:         Grid & Layout & visibility
 * Description:       Flexbox Responsive Grid
 * Editing Details:   Do NOT modify variables or code in this file as that may
 *                    cause Berry's responsive framework to malfunction
 *
 ============================================================================ */

/* Border Box Model */
html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

//Layout and Visibility
.max-width-center {
  width: 100%;
  justify-content: center;
}

.hide {
  display: none;
}

.show {
  display: block;
}

//Container Spacing & Widths

.container-s, .container-m, .container-l {
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
}

.container-s {
    padding: $padding-s;
    margin: 0;
}

.container-m {
    padding: $padding-m;
    margin: 0;
}

.container-l {
    padding: $padding-l;
    margin: 0;
}

//For Smartphone dimension
.container, ul { 
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    --columns: 6;
}

header, main, aside, li {
    /* flex-basis declaration
    flex-basis: calc( calc(6/6) * 100%);
    */
    --width: 6;
    --initialbasis: calc(var(--width) / var(--columns) * 100%);
    --gap: calc((var(--columns) -  var(--width)) * 0.05%);
    flex-basis: calc(var(--initialbasis) - var(--gap));
}
// For Tablet dimension    
@media (min-width: 551px) {
    aside, main, li {
    --width: 3;
    }
}
// For Desktop dimension 
@media (min-width: 751px) {
    main {
        --width: 4;
    }
    aside {
        --width: 2;
    }
    li {
        --width: 3;
    }
}

.container > *, li {
    background-color: map-get($basic, mute);
    border: 2px solid white;
    border-radius: 0.5rem;
    padding: $padding-m;
  }
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

//Section Spacing & Widths

section {
    display: block;
    height: min-content;
    position: relative;
  }

/* General Element Widths */
h1, h2, h3, h4, h5, div{
  width: 100%;
}

p, h6, img {
  width: 90%;
}


/* ==========================================================================
 * File Name:         Font
 * Description:       List of all scaled font sizes and relevant spacing
 *
 * Fonts are set using a responsive typescale that sets font sizes along a
   specified ratio. You can change the size of your fonts by changing the
   multiplier map in variables.scss, by setting your own ratio as a new map key,
   or by changing the base-font CSS variable below.
 *
 * For information about type scaling, read the link below:
   https://medium.com/sketch-app-sources/exploring-responsive-type-scales-cf1da541be54
 *
============================================================================= */

//General Font Style - Fonts and Weights
h1, h2, h3 {
    font-family: $primary-font;
    font-weight: $font-regular;
    text-align: left;
  }
  
  h4, h5, h6 {
      font-family: $secondary-font;
      font-weight: $font-light;
      text-align: left;
  }
  
  p {
    font-family: $terciary-font;
    font-weight: $font-light;
    text-align: left;
  }
  
  a {
    font-family: $primary-font;
    font-weight: $font-light;
    color: map-get($accent, kale);
  }
  
  .Italic-heading-font {
    font-family: $primary-font;
    font-style: italic;
    font-weight: $font-regular;
  }
  
  .Italic-subtitle-font{
    font-family: $secondary-font;
    font-style: italic;
    font-weight: $font-light;
  }
  
  .Italic-body-font{
      font-family: $terciary-font;
      font-style: italic;
      font-weight: $font-light;
  }
  
  .strong {
    font-weight: $font-bold;
    color: map-get($accent, beet);
  }
  
  /* ============================================================================
      Font Sizing
   * ============================================================================ */
  
  // Font sizing for laptop: (Breakpoint: 990px, base font size: 16px, typography scale: 1.200 minor third)
  h6 { 
      font-size: $base-font-size;
  }
  h5 {
      font-size: calc($base-font-size * map-get($multipliers, minor-third));
  }
  h4 {
      font-size: calc($base-font-size * map-get($multipliers, minor-third) * map-get($multipliers, minor-third));
  }
  h3 {
      font-size: calc($base-font-size * map-get($multipliers, minor-third) * map-get($multipliers, minor-third) * map-get($multipliers, minor-third));
  }
  h2 {
      font-size: calc($base-font-size * map-get($multipliers, minor-third) * map-get($multipliers, minor-third) * map-get($multipliers, minor-third) * map-get($multipliers, minor-third));
  }
  h1 {
      font-size: calc($base-font-size * map-get($multipliers, minor-third) * map-get($multipliers, minor-third) * map-get($multipliers, minor-third) * map-get($multipliers, minor-third) * map-get($multipliers, minor-third));
  }
  p {
      font-size: calc($base-font-size / map-get($multipliers, minor-third));
  }
  a {
      font-size: calc($base-font-size / map-get($multipliers, minor-third)); 
  }
  
  //  Media Query Font Size: Change multiplier (typography scale) and base font size values accordinly for tablet and phone breakpoint.
  
  // Font sizing for tablet: (Breakpoint: 750px, base font size: 16px, typography scale: 1.125 major second)
  
  @media (max-width: map-get($breakpoints, md)) {
      h6 { 
          font-size: $base-font-size;
      }
      h5 {
          font-size: calc($base-font-size * map-get($multipliers, major-second));
      }
      h4 {
          font-size: calc($base-font-size * map-get($multipliers, major-second) * map-get($multipliers, major-second));
      }
      h3 {
          font-size: calc($base-font-size * map-get($multipliers, major-second) * map-get($multipliers, major-second) * map-get($multipliers, major-second));
      }
      h2 {
          font-size: calc($base-font-size * map-get($multipliers, major-second) * map-get($multipliers, major-second) * map-get($multipliers, major-second) * map-get($multipliers, major-second));
      }
      h1 {
          font-size: calc($base-font-size * map-get($multipliers, major-second) * map-get($multipliers, major-second) * map-get($multipliers, major-second) * map-get($multipliers, major-second) * map-get($multipliers, major-second));
      }
      p {
          font-size: calc($base-font-size / map-get($multipliers, major-second));
      }
      a {
          font-size: calc($base-font-size / map-get($multipliers, major-second)); 
      }
  
  };
  
  // Font sizing for phone: (Breakpoint: 550px, base font size: 14px, typography scale: 1.125 major second)
  
  @media (max-width: map-get($breakpoints, sm)) {
      h6 { 
          font-size: $mobile-base-font-size;
      }
      h5 {
          font-size: calc($mobile-base-font-size * map-get($multipliers, major-second));
      }
      h4 {
          font-size: calc($mobile-base-font-size * map-get($multipliers, major-second) * map-get($multipliers, major-second));
      }
      h3 {
          font-size: calc($mobile-base-font-size * map-get($multipliers, major-second) * map-get($multipliers, major-second) * map-get($multipliers, major-second));
      }
      h2 {
          font-size: calc($mobile-base-font-size * map-get($multipliers, major-second) * map-get($multipliers, major-second) * map-get($multipliers, major-second) * map-get($multipliers, major-second));
      }
      h1 {
          font-size: calc($mobile-base-font-size * map-get($multipliers, major-second) * map-get($multipliers, major-second) * map-get($multipliers, major-second) * map-get($multipliers, major-second) * map-get($multipliers, major-second));
      }
      p {
          font-size: calc($mobile-base-font-size / map-get($multipliers, major-second));
      }
      a {
          font-size: calc($mobile-base-font-size / map-get($multipliers, major-second)); 
      }
  
  };
  
  /* ============================================================================
      Font Spacing
   * ============================================================================ */
  
   /* Line Height */
  
  body * {
    line-height: $base-line-height;
  }
  
  /* Font Bottom Margins
   */
  
  p {
    margin: 0 0 $margin-m 0;
  }
  
  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: $padding-m 0;
  }
  
  .large-line-height {line-height: $large-line-height;}
  .small-line-height {line-height: calc($general-line-height - 0.2rem) !important;}
  
  
  /* ==========================================================================
   *
   * FONT COLOURS
   * Default font colours for general HTML text elements
   *
   *
  ============================================================================= */
  
  
  $h1-font-color: map-get($accent, beet);
  $body-font-color: map-get($basic, dark);
  $link-font-color: map-get($accent, kale);
  $hero-font-color: map-get ($basic, mute);
  
  h1 {color: $h1-font-color}
  body, h2, h3, h4, h5, h6 {color: $body-font-color}

  /* ==========================================================================
 *
 * File Name:         Navbar
 * Description:       Responsive Navigation Grid
 * Editing Details:   Change any variable you want to override to the values
                      you choose and recompile this SASS file
 *
 ============================================================================ */
//General navbar
 .navbar {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: center;
  }
 
 // If there is no navbar logo, comment out .navbar-logo and change
 // the flex-basis of .nav-item to 100%;
 
 .navbar-logo, .nav-item {
   display: flex;
   flex-basis: 10%;
   height: $height-xl;
   align-items: center;
   justify-content: center;
   padding: $padding-xs;
 
   .nav-img {
     width: auto;
     max-height: 70%;
   }
 }
 
  .nav-item {
    flex-basis: 90%;
    padding: 0 $padding-m;
    justify-content: flex-start;
    align-items: center;
 
    ul {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      list-style: none;
      margin: 0.5rem 0;
      padding: 0;
 
       li {
         display: inline-flex;
 
         a {
           text-decoration: none;
           color: map-get($accent, acai);
           font-family: $primary-font;
           font-size: 1.2rem;
           letter-spacing: 1.3px;
           margin: 0 $margin-s;
           font-weight: $font-regular;
         }
 
         a:hover {
         color: map-get($accent,kale);
         text-transform: capitalize;
         letter-spacing: 1.5px;
         }
       }
     }
 }
 
 .nav-left {
 justify-content: flex-start;
 text-align: left;
 }
 
 .nav-center {
 justify-content: center;
 text-align: center;
 }
 
 .nav-right {
   justify-content: flex-end;
   text-align:  right;
 }
 
 // Navbar for smart phone
 
 @media (max-width: map-get($breakpoints, sm)) {
 
   .navbar {
     align-items: center;
     justify-content: center;
 
     .nav-item, .navbar-logo {
       height: auto;
       flex-basis: 100%;
       text-align: center;
       align-items: flex-start;
       justify-content: center;
     }
 
     ul {
       align-items: center;
       justify-content: center;
       margin: 0.8rem 0;
     }
 
     .navbar-logo {
       height: $height-l;
       align-items: center;
 
       .nav-img {
         width: auto;
         max-height: 70%;
       }
     }
   }
 }
 
 //navbar color styling:
 @mixin navbar-text-colour ($colour) {
   color: $colour;
 
   &:hover {
     color: darken($colour, 5%);
   }
 
   &:active {
     color: darken($colour, 25%);
   }
 }
 .navbar-beet {
   @include navbar-text-colour (map-get($accent,acai));
   background-color: map-get($accent,beet);
 }
 .navbar-kale {
   @include navbar-text-colour (map-get($accent,lettuce));
   background-color: map-get($accent,kale);
 }
 .navbar-water {
   @include navbar-text-colour (map-get($accent,wave));
   background-color: map-get($accent,deepwater);
 }
 .navbar-mute {
   @include navbar-text-colour (map-get($basic,dark));
   background-color: map-get($basic,main-gray);
 }

 /* ==========================================================================
 *
 * File Name:         Dropdown Menu
 * Description:       Dropdown menu option for navbar
 * Editing Details:   Change any variable you want to override to the values
                      you choose and recompile this SASS file
 * Source:            https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar
 ============================================================================ */
li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: get-map($accent,lettuce);
    min-width: 160px;
    box-shadow: $card-box-shadow;
    z-index: 1;
}

.dropdown-content a {
    color: get-map($accent,kale);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {color: map-get($accent, tomatoe);}

.dropdown:hover .dropdown-content {
    display: block;
}

/* ==========================================================================
 *
 * File Name:         List
 * Description:       Unordered and ordered listed styles
 * Editing Details:   Do NOT modify variables or code in this file as that may
 *                    cause Berry's responsive framework to malfunction
 *
 ============================================================================ */

 ul.a {
    list-style-type: circle;
    }
    
    ul.b {
    list-style-type: square;
    }
    
    ol.c {
    list-style-type: upper-roman;
    }
    
    ol.d {
    list-style-type: lower-alpha;
    }
    
    ul.img {
        list-style-image: url('<i class="fas fa-pen ratio=1"></i>');
    }

/* ==========================================================================
 *
 * File Name:         Align
 * Description:       Classes to align items left or right
 * Editing Details:   Do not change key-value pairs or variables in this file
                      as that may alter the functionality of Berry
 * Use:               Add the appropriate align class to any html element whose
                      alignment you want to change
 *
 ============================================================================ */


 .align-left {
    text-align: left;
  }
  
  .align-right {
    text-align: right;
  }
  
  .align-center {
    text-align: center;
  }
  
  .align-justify {
    text-align: justify;
  }
  
  @each $breakpoint, $size in $breakpoints {
    @media (min-width: #{$size}) {
      .align-left-#{$breakpoint} {
        text-align: left;
      }
      .align-right-#{$breakpoint} {
        text-align: right;
      }
      .align-center-#{$breakpoint} {
        text-align: center;
      }
      .align-justify-#{$breakpoint} {
      text-align: justify;
      }
    }
  }
  
  
  /* Default alignment */
  h1, h2, h3, h4, h5, h6, p {
    text-align: left;
  }

/* ==========================================================================
 *
 * File Name:         Responsive Column layout
 * Description:       Varieties of column display for website
 * Editing Details:   Do NOT modify variables or code in this file as that may
 *                    cause Berry's responsive framework to malfunction
 * Source:            https://www.w3schools.com/css/css_website_layout.asp
 ============================================================================ */

/* Create three unequal columns that floats next to each other */
.column {
    float: left;
    padding: 10px;
  }
  
/* Left and right column */
.column.side {
    width: 25%;
}

/* Middle column */
.column.middle {
    width: 50%;
}
  
/* Wide column */
.column.wide {
    width: 65%;
}

/* Even column */
.column.even {
    width: 30%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
  
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: map-get($breakpoints,sm)) {
    .column.side, .column.middle, .column.wide, .column.even {
        width: 100%;
    }
}

/* ==========================================================================
 *
 * File Name:         Button
 * Description:       Button styles with some cool animations
 * Editing Details:   Change button colours in the variable.scss file
 * Use:               Add the appropriate button class to any <a> tag that you
                      want to style as a button
 *
 ============================================================================ */

 //General button
 %general-button {
    text-decoration: none;
    border: none;
    padding: 0.5rem 1rem;
    margin: 0.5rem 0.3rem;
    line-height: auto;
    background: beet;
    text-align: center;
    font-family: "Giulia";
    font-size: 16px;
  }
  
  /*
   * Media Query Font Size: Changing typescale across breakpoints
   *
   */
   @media only screen and (min-width: 0px) and (max-width: map-get($breakpoints,sm)) {
      button {
          font-size: $button-s;
      }
    }
    @media only screen and (min-width: map-get($breakpoints, sm)) and (max-width: map-get($breakpoints, md)) {
      button {
          font-size: $button-m;
      }
    }
    @media only screen and (min-width: map-get($breakpoints, md)) and (max-width: none) {
      button {
          font-size: $button-l;
      }
    }
  
  //button width
  .button-width-s {
    padding: 0.5rem 0.5rem;
  }
  .button-width-m {
    padding: 0.5rem 1rem;
  }
  .button-width-l {
    padding: 0.5rem 2rem;
  }
  .button-width-xl {
    padding: 0.5rem 3rem;
  }
  
  //button corner style
  .button-sq {
    border-radius: 0px;
  }
  .button-semisquare {
    border-radius: 7px;
  }
  .button-semipill {
    border-radius: 13px;  
  }
  .button-pill {
    border-radius: 20px;  
  }
  
  //button style: filled
/*  @mixin button-color($button-bkgd) {
      background-color: $button-bkgd;
      color: $button-text-light;
    
      &:hover {
        background-color: lighten($button-bkgd,10%);
      }
    
      &:active {
        background-color: darken($button-bkgd,10%);
      }
    }
  .button-filled-beet {
      @include button-color($button-bkgd-beet);
  }
  .button-filled-kale {
      @include button-color($button-bkgd-kale);
  }
  .button-filled-tomatoe {
      @include button-color($button-bkgd-tomatoe);
  }
  .button-filled-deepwater {
      @include button-color($button-bkgd-deepwater);
  }
  .button-filled-dark {
      @include button-color($button-bkgd-dark);  
  }
  .button-filled-mute {
      @include button-color($button-bkgd-mute);
      color: $button-text-dark;
  }
  .button-filled-gray {
      @include button-color($button-bkgd-gray);  
      color: $button-text-dark;
  }
  .button-filled-peach {
      @include button-color($button-bkgd-peach);  
      color: $button-text-dark;
  } */
  
  //button style: outlined
/*  @mixin button-outlined($color) {
      border: solid $color 1px;
      background: none;
      color: $color;
    
      &:hover {
        background: darken($color, 5%);
        color: $color;
      }
    
      &:active {
        background: darken($color, 25%);
        color: $color;
      } 
    } 

  .button-outlined-beet {
      @include button-outlined (map-get($accent,beet));
  }
  .button-outlined-kale {
      @include button-outlined (map-get($accent,kale));
  }
  .button-outlined-tomatoe {
      @include button-outlined (map-get($accent,tomatoe));
  }
  .button-outlined-deepwater {
      @include button-outlined (map-get($accent,deepwater));
  }    
  .button-outlined-dark {
      @include button-outlined  (map-get($basic,dark));
  }
  .button-outlined-gray {
      @include button-outlined  (map-get($basic,$extra-dark-gray));
  }
*/
/* ==========================================================================
 *
 * File Name:         Cards
 * Description:       Visual cards that help to segment information
 * Editing Details:   Feel free to edit padding, margins, colours, and shadow.
 *                    Do not edit class display properties or change/eliminate classes.
 *
 ============================================================================ */
//Card Spacing & Widths
.card-container {
    display: flex;
    flex: row wrap unset;
    width: 75%;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
  }
  
  .card {
    margin: $card-margin;
    padding: $card-padding-s;
    position: relative;
  }
  
  .card-body-1 {
      padding: 1.25rem 0.5rem;
      box-shadow: $card-box-shadow;
    
      * {
        margin: 0 auto;
      }
      &:hover {box-shadow: $card-box-shadow-hover;}
    }
  
  .card-body-2 {
    padding: 1.25rem 0.5rem;
    border-radius: 15px;
    box-shadow: $card-box-shadow;
  
    * {
      margin: 0 auto;
    }
    &:hover {box-shadow: $card-box-shadow-hover;}
  }
  
  //Card Color:
  .card-beet {
      background-color: $card-bkgd-rose;
      color: map-get($accent,beet);
  }
  
  .card-kale {
      background-color: $card-bkgd-lettuce;
      color: map-get($accent,kale);
  }
  
  
  .card-deepwater {
      background-color: $card-bkgd-wave;
      color: map-get($accent,deepwater);
  }
  
  .card-mute {
      background-color: $card-bkgd-mute;
      color: map-get($basic,dark);
  }
  
  .card-dark {
      background-color: $card-bkgd-dark;
      color: map-get($basic,mute);
  }
  
  //Media Queries and responsiveness
  
  @media (min-width: map-get($breakpoints, md)) and (max-width: map-get($breakpoints, lg)){
    .card-container {
      width: 70%;
    }
  }
  
  @media (min-width: map-get($breakpoints, sm)) and (max-width: map-get($breakpoints, md)){
    .card-container {
      width: 100%;
    }
  }
  
  @media (max-width: map-get($breakpoints, sm)) {
    .card-container {
      width: 100%;
    }
  }

/* ==========================================================================
 *
 * File Name:         Form
 * Description:       Stylished form for your webpage
 * Editing Details:   Change font, box styleline properties as needed
 * Use:               Use <input type="text"> and affiliates to display form on 
                      your website
 * Affiliates:        Works with the align list of classes to set text direction
                      of the form text
 * Source:            For more information of the code source, please visit:
                      https://www.w3schools.com/css/css_form.asp         
 ============================================================================ */

//bottom line focused Inputs form
.bottom-line-focused-input-form {
    input[type=text] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
        border: none;
        border-bottom: 2px solid map-get($accent, beet );
    }

    input[type=text]:focus {
        background-color: $light-gray;
    }
}

//animated search form
.animated-search-form {
    input[type=text] {
        width: 130px;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
        background-color: white;
        background-image: url('searchicon.png');
        background-position: 10px 10px; 
        background-repeat: no-repeat;
        padding: 12px 20px 12px 40px;
        transition: width 0.4s ease-in-out;
    }
      
    input[type=text]:focus {
    width: 100%;
    }
}

//textarea
.textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid map-get($accent, beet);
    border-radius: 4px;
    background-color: map-get($basic, mute);
    font-size: 16px;
    resize: none;
}

//select menu
.select {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 4px;
    background-color: map-get($basic, mute);
}

//form width
.form-width-full {
    width:100%;
}
.form-width-half {
    display: flex;
    flex-flow: column;
    width:50%;
}

/* ==========================================================================
 *
 * File Name:         Tooltip
 * Description:       Simple, visual toolstip for your webpage
 * Editing Details:   Change font, color, background properties as needed
 * Use:               Add the 'tooltip' class and its affiliates to the section or div
                      you want to display as the tooltip
 * Affiliates:        Works with the align list of classes to set text direction
                      of the hero text
 * Source:            For more information of code source please visit:
                      https://www.w3schools.com/css/css_tooltip.asp
 ============================================================================ */
//General tooltip
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 2px dotted map-get($accent, beet);
  }

//Default tooltip
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: rgba(90, 12, 46, 0.5);
    font-family: $terciary-font;
    color: map-get($basic, mute);
    text-align: center;
    border-radius: 7px;
    padding: 3px 0;

/* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

//Toolstip position
.tooltiptext-right {
    top: -5px;
    left: 105%;  
}

.tooltiptext-left {
    top: -5px;
    right: 105%;
}

.tooltiptext-top {
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
}

.tooltiptext-bottom {
    width: 120px;
    top: 100%;
    left: 50%;
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

//Tooltip style:
.tooltip-fadein {
    /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
    opacity: 0;
    transition: opacity 1s;
}

//Toolstip Arrow:

%general-tooltip-arrow {
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: rgba(99, 12, 50, 0.5);
        font-family: $terciary-font;
        color: map-get($basic, mute);
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        top: -5px;
        left: 110%;
        }
        .tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 100%; /* To the left of the tooltip */
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent rgba(95, 12, 48, 0.5) transparent transparent;
        }
        .tooltip:hover .tooltiptext {
        visibility: visible;
        }
}
.tooltip .tooltip-arrow-right {
    @extend %general-tooltip-arrow;
}

.tooltip .tooltip-arrow-left {
    @extend %general-tooltip-arrow;
    .tooltip .tooltiptext::after {
        left: 100%; /* To the right of the tooltip */
    }
}

.tooltip .tooltip-arrow-top {
    @extend %general-tooltip-arrow;
    .tooltip .tooltiptext::after {
        content: " ";
        position: absolute;
        top: 100%; /* At the bottom of the tooltip */
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: rgba(90, 12, 46, 0.5) transparent transparent transparent;
    }
}

.tooltip .tooltip-arrow-bottom {
    @extend %general-tooltip-arrow;
    .tooltip .tooltiptext::after {
        content: " ";
        position: absolute;
        bottom: 100%;  /* At the top of the tooltip */
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent rgba(97, 12, 49, 0.5) transparent;
    }
}