@import url("https://fonts.googleapis.com/css2?family=Cardo:ital,wght@0,400;0,700;1,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,700&display=swap");
.container {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 3.2rem;
}

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

html {
  font-size: 62.5%;
}

body {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  line-height: 1;
  color: #495057;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/*
Open colors contrast ratio against white (#fff) background:
The same ratio is true if you reverse the order, e.g white text on the following backgrounds.

: The great ratio to use is 10 as used in Venture for America website - especially when non-white colors are used. E.g darker color on a lighter background.
FFFDFB on 023257 = 12.96
On their homepage: 59C8D0 (text) on 023257 (background) = 6.64



Gray-9: #212529, Contrast Ratio is 15.43
Red-9: #c92a2a, Contrast Ratio is 5.46 (fail AAA)
Pink-9: #a61e4d, Contrast Ratio is 7.21
Grape-9: #862e9c, Contrast Ratio is 7.28 (I used this color as main color on Website Vanilla Blog)
Violet-9: #5f3dc4, Contrast Ratio is 7.12
Indigo-9: #364fc7, Contrast Ratio is 6.77 (fail AAA)
Blue-9: #1864ab, Contrast Ratio is 6.09 (fail AAA)
Cyan-9: #0b7285, Contrast Ratio is 5.59 (fail AAA)
Teal-9: #087f5b, Contrast Ratio is 5 (fail AAA)
Green-9: #2b8a3e, Contrast Ratio is 4.37 (fail AAA)
Lime-9: #5c940d, Contrast Ratio is 3.69 (fail AAA)
Yellow-9: #e67700, Contrast Ratio is 3 (fail AAA)
Orange-9: #d9480f, Contrast Ratio is 4.3 (fail AAA)

*/
/*
Crimson: DC143C on white: 4.99 (lighter FF1745 is 3.85, darker 990E2A 8.57)
*/
/*
Open colors contrast ratio against default landing page - hero section yellowish (#fff9db) background:
The same ratio is true if you reverse the order, e.g yellowish (#fff9db) on the following backgrounds.

((7 is a pass for AAA))

Gray-7: ##495057, Contrast Ratio is 7.72 --- used for default landing page
Gray-9: #212529, Contrast Ratio is 14.56
Red-9: #c92a2a, Contrast Ratio is 5.15 (fail AAA)
Pink-9: #a61e4d, Contrast Ratio is 6.8 (fail AAA)
Grape-9: #862e9c, Contrast Ratio is 6.87
Violet-9: #5f3dc4, Contrast Ratio is 6.72
Indigo-9: #364fc7, Contrast Ratio is 6.4 (fail AAA)
Blue-9: #1864ab, Contrast Ratio is 5.75 (fail AAA)
Cyan-9: #0b7285, Contrast Ratio is 5.25 (fail AAA)
Teal-9: #087f5b, Contrast Ratio is 4.72 (fail AAA) but pass (AA) --- Used for default landing page
Green-9: #2b8a3e, Contrast Ratio is 4.12 (fail AAA)
Lime-9: #5c940d, Contrast Ratio is 3.69 (fail AAA)
Yellow-9: #e67700, Contrast Ratio is 2.83 (fail AA)
Orange-9: #d9480f, Contrast Ratio is 4.06 (fail AA)

*/
/*
Too much contrast is also bad, as in this case #0d0e97 (ABC SCHOOl LOGO COLOR) against white text it has 13.75 ratio which is too striking to the eye.
*/
/*
Open colors (Lighter Colors) contrast ratio against white background:

White on white (1)

Gray-0: #f8f9fa, Contrast Ratio is 1.05
Red-0: #fff5f5, Contrast Ratio is 1.07
Pink-0: #fff0f6, Contrast Ratio is 1.1
Grape-0: #f8f0fc, Contrast Ratio is 1.11
Violet-0: #f3f0ff, Contrast Ratio is 1.12
Indigo-0: #364fc7, Contrast Ratio is 1.12
---change the color names below---
Blue-0: #1864ab, Contrast Ratio is 1.11
Cyan-0: #0b7285, Contrast Ratio is 1.09
Teal-0: #087f5b, Contrast Ratio is 1.07
Green-0: #2b8a3e, Contrast Ratio is 1.07
Lime-0: #5c940d, Contrast Ratio is 1.06
Yellow-0: #e67700, Contrast Ratio is 1.06
Orange-0: #d9480f, Contrast Ratio is 1.09

*/
/*
Open colors contrast ratio of darker text against lighter background of the same color:
https://yeun.github.io/open-color/
https://color.adobe.com/create/color-contrast-analyzer (try inverting the colors too - background vs text)


Gray-9: #212529 (text) vs #f8f9fa (background) Contrast Ratio is 14.63: 1 (on white is 15.43)
Red-9: #c92a2a vs #fff5f5 Contrast Ratio is 5.1 (All ratios is to 1) (on white is 5.46)
Pink-9: #a61e4d vs #fff0f6 Contrast Ratio is 6.54 (on white is 7.21)
Grape-9: #862e9c vs #f8f0fc Contrast Ratio is 6.54 ((on white is 7.28)
Violet-9: #5f3dc4 vs #f3f0ff Contrast Ratio is 6.34 (7.12)

===THE CUT OFF IS AT THE RATIO of 7. 7 and above is a pass both for AA and AAA standards===

Indigo-9: #364fc7 vs #edf2ff Contrast Ratio is 6.05 (6.77)
Blue-9: #1864ab vs #e7f5ff Contrast Ratio is 5.48 (6.09)
Cyan-9: #0b7285 vs #e3fafc Contrast Ratio is 5.15 (5.59)
Teal-9: #087f5b vs #e6fcf5 Contrast Ratio is 4.67 (5)
Green-9: #2b8a3e vs #ebfbee Contrast Ratio is 4.07 (4.37)
Lime-9: #5c940d vs #f4fce3 Contrast Ratio is 3.49 (3.69)
Yellow-9: #e67700 vs #fff9db Contrast Ratio is 2.83 (3)
Orange-9: #d9480f vs #fff4e6 Contrast Ratio is 3.96 (4.3) : (On brackets is against white)
*/
/*
Open colors contrast ratio of darker text against lighter background of the same color (tints using https://maketintsandshades.com/: (
*/
/*
---To be done next
*/
/*
#777 as text color on the following lighter backgrounds (as used on IJ homepage to divide between sections
#777 - the color used by Jonas on his earlier courses. then #555 on his later courses.
*/
/*
gray-0: #f8f9fa (4.25)
red-0: #fff5f5 (4.19)
pink-0: #fff0f6 (4.06)
grape-0: #f8f0fc (4.02)
violet-0: #f3f0ff (3.99)
indigo-0: #edf2ff (4.1)
blue-0: #e7f5ff (4.03)
cyan-0: #e3fafc (4.13)
teal-0: #e6fcf5 (4.18)
green-0: #ebfbee (4.17)
lime-0: #f4fce3 (4.24)
yellow-0: #f4fce3 (4.23)
orange-0: #f4fce3 (4.12)
*/
/*GRAY-07: 495057 (My normal text color - on the lighter version of Open Colors*/
/*
white: #fff (8.18)
gray-0: #f8f9fa (7.76)
red-0: #fff5f5 (7.64)
pink-0: #fff0f6 (7.42)
grape-0: #f8f0fc (7.34)
violet-0: #f3f0ff (7.29)
indigo-0: #edf2ff (7.3)
blue-0: #e7f5ff (7.36)
cyan-0: #e3fafc (7.53)
teal-0: #e6fcf5 (7.63)
green-0: #ebfbee (7.62)
lime-0: #f4fce3 (7.74)
lime-0-50%-#fafef1 (7.99) - from tints and shades
lime-0-90%-#FEFFFC (8.15) - from tints and shades
yellow-0: #fff9db (7.72)
orange-0: #fff4e6 (7.53)
*/
/*GRAY-09: 212529 (Darkest open color text color - on the lighter version of Open Colors*/
/*

000 on fff contrast ratio is 21 (the reverse is the same ratio)

white: #fff (15.43)
gray-0: #f8f9fa (14.63)
red-0: #fff5f5 (14.42)
pink-0: #fff0f6 (13.99)
grape-0: #f8f0fc (13.85)
violet-0: #f3f0ff (13.75)
indigo-0: #edf2ff (13.77)
blue-0: #e7f5ff (13.89)
cyan-0: #e3fafc (14.21)
teal-0: #e6fcf5 (14.4)
green-0: #ebfbee (14.37)
lime-0: #f4fce3 (14.6)
yellow-0: #fff9db (14.56)
orange-0: #fff4e6 (14.2)
*/
/*
FLAT UI COLORS: (white text color on these backgrounds)
*/
/*
#1abc9c (Turquoise) : 2.41
#16a085 (Green Sea) : 3.28
#2ecc71 (Emerald)   : 2.1
#27ae60 (Nephritis) : 2.87 - Used in SwingMentor: #e9f7ef
#3498db (Peter River):3.15
#2980b9 (Belize Hole): 4.3
#9b59b6 (Amethyst)  : 4.67
#8e44ad (Wisteria)  : 5.87
#34495e (Wet Asphalt): 9.29
#2c3e50 (Midnight Blue):10.98
===
====
#f1c40f (Sun Flower)  : 1.66
#f39c12 (Orange)      : 2.19
#e67e22 (Carrot)      : 2.85 - Used in Jonas omnifood.dev course
#d35400 (Pumpkin)     : 4.17
#e74c3c (Alizarin)    : 3.82
#c0392b (Pomegranate) : 5.44
#ecf0f1 (Clouds)      : 1.15
#bdc3c7 (Silver)      : 1.78
#95a5a6 (Concrete)    : 2.56
#7f8c8d (Asbestos)    : 3.48

*/
/*
FLATUI COLOR + TINTS AND SHADES
Nephritis (#27ae60) = contrast color against black is 7.31
Tint 90% (#e9f7ef) = contrast color against black is 19.02
Tint 100% (#ffffff) = white. Contrast color against black is 21

#27ae60 on #E9F7EF = contrast is 2.6
#27ae60 on #fff = contrast is 2.87

Shade of Nephritis
239d56 (10% shade) on E9F7EF (90% tint) = contrast is 3.15

#e67e22 (Carrot)  = contrast color against black is 7.37
Tint 10% (#e98b38) = contrast color against black is 8.21
Tint 20% (#eb984e) = contrast color against black is 9.13
Tint 90% (#fdf2e9) = contrast color against black is 19.05
Tint 80% (#fae5d3) = contrast color against black is 17.21
Tiny 100% is #ffffff
*/
/*
OPEN COLOR: white text on these backgrounds
For AAA - the cut off is 7
For AA - the cut off is 4.5

WCAG Accessibility Criteria

Large Text refers to 18 pt and above for regular font-weight, or 14 pt and above for bold font-weight. For AAA, the qualifying ratio is 4.5:1. For AA, the qualifying ratio is 3:1.

Regular Text refers to 17 pt and below for regular font-weight, or 13 pt and below for bold font-weight. For AAA, the qualifying ratio is 7:1. For AA, the qualifying ratio is 4.5:1. Read More (https://helpx.adobe.com/creative-cloud/adobe-color-accessibility-tools.html)

*/
/*
Gray-9: #212529, Contrast Ratio is 15.43
Red-9: #c92a2a, Contrast Ratio is 5.46 (fail AAA)
Pink-9: #a61e4d, Contrast Ratio is 7.21
Grape-9: #862e9c, Contrast Ratio is 7.28 (I used this color as main color on Website Vanilla Blog)
Violet-9: #5f3dc4, Contrast Ratio is 7.12
Indigo-9: #364fc7, Contrast Ratio is 6.77 (fail AAA)
Blue-9: #1864ab, Contrast Ratio is 6.09 (fail AAA)
Cyan-9: #0b7285, Contrast Ratio is 5.59 (fail AAA)
Teal-9: #087f5b, Contrast Ratio is 5 (fail AAA)
Green-9: #2b8a3e, Contrast Ratio is 4.37 (fail AAA)
Lime-9: #5c940d, Contrast Ratio is 3.69 (fail AAA)
Yellow-9: #e67700, Contrast Ratio is 3 (fail AAA)
Orange-9: #d9480f, Contrast Ratio is 4.3 (fail AAA)
*/
/*
OPEN COLOR: Dark text on The lightest Grey - which is kinda neutral if you dont want to use white
So these colors against (f8f9fa - gray-0)
*/
/*
Gray-9: #212529, Contrast Ratio is 14.63
Red-9: #c92a2a, Contrast Ratio is 5.18
Pink-9: #a61e4d, Contrast Ratio is 6.84
Grape-9: #862e9c, Contrast Ratio is 6.91
Violet-9: #5f3dc4, Contrast Ratio is 6.75
Indigo-9: #364fc7, Contrast Ratio is 6.43
Blue-9: #1864ab, Contrast Ratio is 5.77
Cyan-9: #0b7285, Contrast Ratio is 5.3
Teal-9: #087f5b, Contrast Ratio is 4.75
Green-9: #2b8a3e, Contrast Ratio is 4.14
Lime-9: #5c940d, Contrast Ratio is 3.5
Yellow-9: #e67700, Contrast Ratio is 2.84
Orange-9: #d9480f, Contrast Ratio is 4.08
*/
/*
TAILWIND COLOR: white text on these backgrounds
*/
/*
BRIGHT COLORS: https://simplicable.com/colors/bright-colors
*/
/*
BASIC COLOR: From Basic color names in English: e.g blue, red, yellow, gold, etc.
*/
/*
Blue: #0000FF: Contrast is 8.15  (Adobe Color Contrast has a brightness slider: For blue: this is the brightest and on the low end there is #000099 -  Contrast ratio is 13.65 against gray-0

Red: #FF0000: Contrast ratio is 3.79 (The lowest red is 990000. Contrast ratio is 8.46)

Green: #008000: Contrast ratio is 4.87 (Green is in the middle of brightness. Lowest is 004D00 with contrast of 9.66 and Brightest is 00B300 with contrast of 2.67

Yellow: #FFFF00: COntrast is 1.02 (darkest yellow is 999900 with contrast of 2.88

Orange: #FFA500: Contrast is 1.87 (darkest orange is #996300 with contrast of 4.81

Maroon:#800000: Contrast ratio is 10.39 (Maroonis in the middle of brightness. Darkest is 4D0000 with a contrast ratio of 15.14 and brightest is B30000 with contrast of 6.83

Purple: #800080: Contrast ratio is 8.94 (Purple is in the middle of brightness. Darkest is 4D004D with contrast ratio of 14 and brightness is B300B3 with contrast of 5.58

Magenta: FF00FF: Contrast ratio is 2.98 (darkest magenta is 990099 with contrast of 7.08)





*/
/*
https://blog.adioma.com/brightest-noticeable-color/
The brightest, most noticeable colors
The brightest colors available on the web are the most saturated colors. These are simply the colors in the upper right corner of the color picker.
*/
/*
1. RED #FF0000 Contrast ratio is 3.79 (The lowest red is 990000. Contrast ratio is 8.46)

2. ORANGE #FFC000 Contrast ratio is 1.56 (Darkest is 997300 with contrast ratio of 4.14)

3. YELLOW #FFFC00 Contrast ratio is 1.04 (Darkest is 999600 with contrast ratio of 2.97)

4. GREEN #FF0000 Contrast ratio is 1.3 (Darkest is 009900 with contrast ratio of 3.59)

5. CYAN #00FFFF Contrast ratio is 1.19 (Darkest is 009999 with contrast ratio of 3.31)

6. Magenta #FF0000 Contrast ratio is 2.98 (Darkest is 990099 with contrast ratio of 7.08)

*/
/*
https://simplicable.com/colors/bright-colors
*/
/*
New Homepage

Blue (0000FF) on Yellow (FFFF00): Contrast ratio is 8
Blue (0000FF) on White (FFFFFF): Contrast ratio is 8.59

BLUE ON:
Gray-0: f8f9fa Contrast is 8.15
Red-0: fff5f5 Contrast is 8.03
Pink-0: fff5f5 Contrast is 7.79
Grape-0: f8f0fc Contrast is 7.72
Violet-0: f3f0ff Contrast is 7.66
Indigo-0: edf2ff Contrast is 7.67
Blue-0: e7f5ff Contrast is 7.73
Cyan-0: e3fafc Contrast is 7.92
Teal-0: e6fcf5 Contrast is 8.02
Green-0: ebfbee Contrast is 8.01
Lime-0: f4fce3 Contrast is 8.13
Yellow-0: fff9db Contrast is 8.11
Orange-0: fff4e6 Contrast is 7.91

*/
/*
https://www.color-meanings.com/what-are-the-brightest-colors-draw-attention/
*/
/*
More contrast ratio:
Grape-09: against white text is 7.28
Grape-09 against grape-00 text is 6.54

teal-09: against teal-00 text is 4.67
teal-09: against white text is 5
*/
/*
https://www.salesforce.com/dreamforce/register/
from that page: text is #005254 and background is EDC959 contrast is 5.61

*/
/*1. GRAY*/
.bg-gray-00 {
  background-color: #f8f9fa;
}

.bg-gray-02 {
  background-color: #e9ecef;
}

.bg-gray-04 {
  background-color: #ced4da;
}

.bg-gray-05 {
  background-color: #adb5bd;
}

.bg-gray-07 {
  background-color: #495057;
}

.bg-gray-09 {
  background-color: #212529;
}

.bg-red-00 {
  background-color: #fff5f5;
}

.bg-red-02 {
  background-color: #ffc9c9;
}

.bg-red-04 {
  background-color: #ff8787;
}

.bg-red-05 {
  background-color: #ff6b6b;
}

.bg-red-07 {
  background-color: #f03e3e;
}

.bg-red-09 {
  background-color: #c92a2a;
}

.bg-pink-00 {
  background-color: #fff0f6;
}

.bg-pink-02 {
  background-color: #fcc2d7;
}

.bg-pink-04 {
  background-color: #f783ac;
}

.bg-pink-05 {
  background-color: #f06595;
}

.bg-pink-07 {
  background-color: #d6336c;
}

.bg-pink-09 {
  background-color: #a61e4d;
}

.bg-grape-00 {
  background-color: #f8f0fc;
}

.bg-grape-02 {
  background-color: #eebefa;
}

.bg-grape-04 {
  background-color: #da77f2;
}

.bg-grape-05 {
  background-color: #cc5de8;
}

.bg-grape-07 {
  background-color: #ae3ec9;
}

.bg-grape-09 {
  background-color: #862e9c;
}

.bg-magenta-00 {
  background-color: #f8f0fc;
}

.bg-magenta-02 {
  background-color: #eebefa;
}

.bg-magenta-04 {
  background-color: #da77f2;
}

.bg-magenta-05 {
  background-color: #cc5de8;
}

.bg-magenta-07 {
  background-color: #ae3ec9;
}

.bg-magenta-09 {
  background-color: #862e9c;
}

.bg-fuchsia-00 {
  background-color: #f8f0fc;
}

.bg-fuchsia-02 {
  background-color: #eebefa;
}

.bg-fuchsia-04 {
  background-color: #da77f2;
}

.bg-fuchsia-05 {
  background-color: #cc5de8;
}

.bg-fuchsia-07 {
  background-color: #ae3ec9;
}

.bg-fuchsia-09 {
  background-color: #862e9c;
}

.bg-violet-00 {
  background-color: #f3f0ff;
}

.bg-violet-02 {
  background-color: #d0bfff;
}

.bg-violet-04 {
  background-color: #9775fa;
}

.bg-violet-05 {
  background-color: #845ef7;
}

.bg-violet-07 {
  background-color: #6D28D9;
}

.bg-violet-09 {
  background-color: #4C1D95;
}

.bg-purple-00 {
  background-color: #f3f0ff;
}

.bg-purple-02 {
  background-color: #d0bfff;
}

.bg-purple-04 {
  background-color: #9775fa;
}

.bg-purple-05 {
  background-color: #845ef7;
}

.bg-purple-07 {
  background-color: #7048e8;
}

.bg-purple-09 {
  background-color: #5f3dc4;
}

.bg-blue-00 {
  background-color: #e7f5ff;
}

.bg-blue-02 {
  background-color: #a5d8ff;
}

.bg-blue-04 {
  background-color: #4dabf7;
}

.bg-blue-05 {
  background-color: #339af0;
}

.bg-blue-07 {
  background-color: #1c7ed6;
}

.bg-blue-09 {
  background-color: #1864ab;
}

.bg-cyan-00 {
  background-color: #e3fafc;
}

.bg-cyan-02 {
  background-color: #99e9f2;
}

.bg-cyan-04 {
  background-color: #3bc9db;
}

.bg-cyan-05 {
  background-color: #22b8cf;
}

.bg-cyan-07 {
  background-color: #1098ad;
}

.bg-cyan-09 {
  background-color: #0b7285;
}

.bg-teal-00 {
  background-color: #e6fcf5;
}

.bg-teal-02 {
  background-color: #96f2d7;
}

.bg-teal-04 {
  background-color: #38d9a9;
}

.bg-teal-05 {
  background-color: #20c997;
}

.bg-teal-07 {
  background-color: #0ca678;
}

.bg-teal-09 {
  background-color: #087f5b;
}

.bg-green-00 {
  background-color: #ebfbee;
}

.bg-green-02 {
  background-color: #b2f2bb;
}

.bg-green-04 {
  background-color: #69db7c;
}

.bg-green-05 {
  background-color: #51cf66;
}

.bg-green-07 {
  background-color: #37b24d;
}

.bg-green-09 {
  background-color: #2b8a3e;
}

.bg-yellow-00 {
  background-color: #fff9db;
}

.bg-yellow-02 {
  background-color: #ffec99;
}

.bg-yellow-04 {
  background-color: #ffd43b;
}

.bg-yellow-05 {
  background-color: #fcc419;
}

.bg-yellow-07 {
  background-color: #f59f00;
}

.bg-yellow-09 {
  background-color: #e67700;
}

.bg-orange-00 {
  background-color: #fff4e6;
}

.bg-orange-02 {
  background-color: #ffd8a8;
}

.bg-orange-04 {
  background-color: #ffa94d;
}

.bg-orange-05 {
  background-color: #ff922b;
}

.bg-orange-07 {
  background-color: #f76707;
}

.bg-orange-09 {
  background-color: #d9480f;
}

.bg-white {
  background-color: #fff;
}

.bg-black {
  background-color: #000;
}

/*1. GRAY*/
.gray-00 {
  color: #f8f9fa;
}

.gray-02 {
  color: #e9ecef;
}

.gray-04 {
  color: #ced4da;
}

.gray-05 {
  color: #adb5bd;
}

.gray-07 {
  color: #495057;
}

.gray-09 {
  color: #212529;
}

.red-00 {
  color: #fff5f5;
}

.red-02 {
  color: #ffc9c9;
}

.red-04 {
  color: #ff8787;
}

.red-05 {
  color: #ff6b6b;
}

.red-07 {
  color: #f03e3e;
}

.red-09 {
  color: #c92a2a;
}

.pink-00 {
  color: #fff0f6;
}

.pink-02 {
  color: #fcc2d7;
}

.pink-04 {
  color: #f783ac;
}

.pink-05 {
  color: #f06595;
}

.pink-07 {
  color: #d6336c;
}

.pink-09 {
  color: #a61e4d;
}

.grape-00 {
  color: #f8f0fc;
}

.grape-02 {
  color: #eebefa;
}

.grape-04 {
  color: #da77f2;
}

.grape-05 {
  color: #cc5de8;
}

.grape-07 {
  color: #ae3ec9;
}

.grape-09 {
  color: #862e9c;
}

.magenta-00 {
  color: #f8f0fc;
}

.magenta-02 {
  color: #eebefa;
}

.magenta-04 {
  color: #da77f2;
}

.magenta-05 {
  color: #cc5de8;
}

.magenta-07 {
  color: #ae3ec9;
}

.magenta-09 {
  color: #862e9c;
}

.fuchsia-00 {
  color: #f8f0fc;
}

.fuchsia-02 {
  color: #eebefa;
}

.fuchsia-04 {
  color: #da77f2;
}

.fuchsia-05 {
  color: #cc5de8;
}

.fuchsia-07 {
  color: #ae3ec9;
}

.fuchsia-09 {
  color: #862e9c;
}

.violet-00 {
  color: #f3f0ff;
}

.violet-02 {
  color: #d0bfff;
}

.violet-04 {
  color: #9775fa;
}

.violet-05 {
  color: #845ef7;
}

.violet-07 {
  color: #6D28D9;
}

.violet-09 {
  color: #4C1D95;
}

.purple-00 {
  color: #f3f0ff;
}

.purple-02 {
  color: #d0bfff;
}

.purple-04 {
  color: #9775fa;
}

.purple-05 {
  color: #845ef7;
}

.purple-07 {
  color: #7048e8;
}

.purple-09 {
  color: #5f3dc4;
}

.blue-00 {
  color: #e7f5ff;
}

.blue-02 {
  color: #a5d8ff;
}

.blue-04 {
  color: #4dabf7;
}

.blue-05 {
  color: #339af0;
}

.blue-07 {
  color: #1c7ed6;
}

.blue-09 {
  color: #1864ab;
}

.cyan-00 {
  color: #e3fafc;
}

.cyan-02 {
  color: #99e9f2;
}

.cyan-04 {
  color: #3bc9db;
}

.cyan-05 {
  color: #22b8cf;
}

.cyan-07 {
  color: #1098ad;
}

.cyan-09 {
  color: #0b7285;
}

.teal-00 {
  color: #e6fcf5;
}

.teal-02 {
  color: #96f2d7;
}

.teal-04 {
  color: #38d9a9;
}

.teal-05 {
  color: #20c997;
}

.teal-07 {
  color: #0ca678;
}

.teal-09 {
  color: #087f5b;
}

.green-00 {
  color: #ebfbee;
}

.green-02 {
  color: #b2f2bb;
}

.green-04 {
  color: #69db7c;
}

.green-05 {
  color: #51cf66;
}

.green-07 {
  color: #37b24d;
}

.green-09 {
  color: #2b8a3e;
}

.yellow-00 {
  color: #fff9db;
}

.yellow-02 {
  color: #ffec99;
}

.yellow-04 {
  color: #ffd43b;
}

.yellow-05 {
  color: #fcc419;
}

.yellow-07 {
  color: #f59f00;
}

.yellow-09 {
  color: #e67700;
}

.orange-00 {
  color: #fff4e6;
}

.orange-02 {
  color: #ffd8a8;
}

.orange-04 {
  color: #ffa94d;
}

.orange-05 {
  color: #ff922b;
}

.orange-07 {
  color: #f76707;
}

.orange-09 {
  color: #d9480f;
}

.white {
  color: #fff;
}

.black {
  color: #000;
}

.accordion {
  display: flex;
  flex-direction: column;
  gap: 4.8rem;
}

.item {
  border-top: 4px solid #087f5b;
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 2.4rem;
  align-items: baseline;
  background-color: white;
}

.item-2 {
  border-top: 6px solid #0B7285;
  background-color: white;
  position: relative;
}

.item-3 {
  border: 6px solid #0b7285;
  border-radius: 10px;
  background-color: white;
}

.text {
  line-height: 1.2;
}

.number-2 {
  /*  vertical-align: baseline;
    color: #0B7285;
    background-color: white;
    background-color: red;
    height: 4rem;
    width: 4rem;
    border-radius: 50%;*/
  font-family: "Lora", serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5rem;
  width: 5rem;
  background-color: white;
  color: #0B7285;
  border-radius: 50%;
}

p.icon {
  display: none;
}

.hidden-box {
  grid-column: 2;
}

.hidden-box p {
  font-size: 1.6rem;
}

.hidden-box ul {
  display: none;
}

.quot {
  color: #0B7285;
  position: absolute;
  top: -5rem;
  left: -5rem;
  font-size: 9.6rem;
  font-family: "Lora", serif !important;
}

.jung-img {
  position: absolute;
  top: 25%;
  left: 95%;
}

.book-img {
  position: absolute;
  top: 25%;
  left: 95%;
}

/*CTA BUTTONS*/
.cta:link,
.cta:visited {
  padding: 1.6rem 3.2rem;
  font-size: 2.4rem;
  text-decoration: none;
  color: white;
  border-radius: 1rem;
  transition: all 0.3s;
}

.cta-1:link,
.cta-1:visited {
  background-color: #087f5b;
}

.cta-1:hover,
.cta-1:active {
  background-color: #0ca678;
}

.cta-2:link,
.cta-2:visited {
  background-color: #a61e4d;
}

.cta-2:hover,
.cta-2:active {
  background-color: #d6336c;
}

.cta-3:link,
.cta-3:visited {
  background-color: #0b7285; /*teal 9 - open color*/
}

.cta-3:hover,
.cta-3:active {
  background-color: #1098ad;
}

.cta-4:link,
.cta-4:visited {
  background-color: #1864ab; /*blue 9 - open color*/
}

.cta-4:hover,
.cta-4:active {
  background-color: #1c7ed6;
}

.cta-5:link,
.cta-5:visited {
  background-color: #d9480f; /*orange 9 - open color*/
}

.cta-5:hover,
.cta-5:active {
  background-color: #f76707;
}

.cta-6:link,
.cta-6:visited {
  background-color: #5f3dc4; /*violet 9 - open color*/
}

.cta-6:hover,
.cta-6:active {
  background-color: #7048e8; /*violet 7 - open color*/
}

.cta-7:link,
.cta-7:visited {
  background-color: #0b7285; /*cyan 9 - open color*/
}

.cta-7:hover,
.cta-7:active {
  background-color: #1098ad; /*cyan 7 - open color*/
}

.bd-rd-05 {
  border-radius: 0.5rem;
}

.bd-rd-10 {
  border-radius: 1rem;
}

.bd-rd-15 {
  border-radius: 1.5rem;
}

.bd-rd-50p {
  border-radius: 50%;
}

.tx-dn-0 {
  text-decoration: none;
}

bd-inside {
  box-shadow: inset 0 0 0 3px #fff;
}

.shadow-1 {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}

.shadow-2 {
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);
}

.scale-11 {
  transform: scale(1.1);
}

.scale-12 {
  transform: scale(1.2);
}

.scale-13 {
  transform: scale(1.3);
}

.scale-14 {
  transform: scale(1.4);
}

.scale-15 {
  transform: scale(1.5);
}

.rotate-90 {
  transform: rotate(90deg);
}

.rotate-180 {
  transform: rotate(180deg);
}

.bd-bm-1 {
  border-bottom: 1px solid black;
}

.bd-bm-2 {
  border-bottom: 2px solid black;
}

.bd-bm-2-white {
  border-bottom: 2px solid white;
}

.bd-bm-4-white {
  border-bottom: 4px solid white;
}

.bd-tp-1 {
  border-top: 1px solid black;
}

.bd-rt-1 {
  border-right: 1px solid black;
}

.heading::after {
  /*content: "   ";
  color: #cf711f;
  height: 2rem;
  width: 2rem;
  border-bottom: 4px solid blue;*/
  display: block;
  height: 2px;
  background-color: #5f3dc4;
  content: " ";
  width: 10rem;
  margin-top: 1.2rem;
}

.cursor {
  cursor: pointer;
}

h1 {
  font-family: "Cardo", serif;
}

.heading-two {
  font-family: "Lora", serif;
  line-height: 1.2;
}

.heading-3 {
  line-height: 1.2;
}

.heading-three {
  line-height: 1.3;
}

.pos-relative {
  position: relative;
}

.display-block {
  display: block;
}

.display-i-block {
  display: inline-block;
}

/*
.grid {
  display: grid;
  gap: 9.6rem; //applies both to row and column
}*/
.display-grid {
  display: grid;
}

.grid {
  display: grid;
  column-gap: 6.4rem;
  row-gap: 9.6rem;
}

.grid--2-cols {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3-cols {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4-cols {
  grid-template-columns: repeat(4, 1fr);
}

.grid-center-v {
  align-items: center;
}

.grid-self-center {
  align-self: center;
}

.display-flex {
  display: flex;
}

.flex-space-between {
  justify-content: space-between;
}

.flex-space-around {
  justify-content: space-around;
}

.flex-order-0 {
  order: 0;
}

.flex-order-1 {
  order: 1;
}

.flex-order-neg-1 {
  order: -1;
}

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

.flex-75p {
  flex-basis: 75%;
}

.flex-70p {
  flex-basis: 70%;
}

.flex-65p {
  flex-basis: 65%;
}

.flex-60p {
  flex-basis: 60%;
}

.flex-50p {
  flex-basis: 50%;
}

.flex-40p {
  flex-basis: 40%;
}

.flex-35p {
  flex-basis: 35%;
}

.flex-30p {
  flex-basis: 30%;
}

.flex-25p {
  flex-basis: 25%;
}

.flex-20p {
  flex-basis: 20%;
}

.flex-10p {
  flex-basis: 10%;
}

.flex-center-v {
  align-items: center;
}

.flex-center-h {
  justify-content: center;
}

.display-flex-center-both {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-g {
  flex-grow: 1;
}

.flex-g-2 {
  flex-grow: 2;
} /*will occupy double the space*/
.flex-g-3 {
  flex-grow: 3;
} /*will occupy three times the space*/
.flex-ns {
  flex-shrink: 0;
}

.wd-100p {
  width: 100%;
}

.wd-90p {
  width: 90%;
}

.wd-80p {
  width: 80%;
}

.wd-70p {
  width: 70%;
}

.wd-60p {
  width: 60%;
}

.wd-50p {
  width: 50%;
}

.wd-40p {
  width: 40%;
}

.wd-35p {
  width: 35%;
}

.wd-30p {
  width: 30%;
}

.wd-0 {
  width: 0;
}

.wd-2 {
  width: 0.2rem;
}

.wd-4 {
  width: 0.4rem;
}

.wd-8 {
  width: 0.8rem;
}

.wd-12 {
  width: 1.2rem;
}

.wd-16 {
  width: 1.6rem;
}

.wd-24 {
  width: 2.4rem;
}

.wd-32 {
  width: 3.2rem;
}

.wd-48 {
  width: 4.8rem;
}

.wd-64 {
  width: 6.4rem;
}

.wd-80 {
  width: 8rem;
}

.wd-96 {
  width: 9.6rem;
}

.wd-120 {
  width: 12rem;
}

.wd-160 {
  width: 16rem;
}

.wd-240 {
  width: 24rem;
}

.wd-320 {
  width: 32rem;
}

.wd-480 {
  width: 48rem;
}

.wd-640 {
  width: 64rem;
}

.wd-700 {
  width: 70rem;
}

.wd-800 {
  width: 80rem;
}

.wd-900 {
  width: 90rem;
}

.wd-960 {
  width: 96rem;
}

.mx-wd-120 {
  max-width: 12rem;
}

.mx-wd-160 {
  max-width: 16rem;
}

.mx-wd-240 {
  max-width: 24rem;
}

.mx-wd-320 {
  max-width: 32rem;
}

.mx-wd-480 {
  max-width: 48rem;
}

.mx-wd-640 {
  max-width: 64rem;
}

.mx-wd-700 {
  max-width: 70rem;
}

.mx-wd-800 {
  max-width: 80rem;
}

.mx-wd-900 {
  max-width: 90rem;
}

.mx-wd-960 {
  max-width: 96rem;
}

.mg-center {
  margin: 0 auto;
}

.ht-0 {
  height: 0;
}

.ht-2 {
  height: 0.2rem;
}

.ht-4 {
  height: 0.4rem;
}

.ht-8 {
  height: 0.8rem;
}

.ht-12 {
  height: 1.2rem;
}

.ht-16 {
  height: 1.6rem;
}

.ht-24 {
  height: 2.4rem;
}

.ht-32 {
  height: 3.2rem;
}

.ht-48 {
  height: 4.8rem;
}

.ht-64 {
  height: 6.4rem;
}

.ht-80 {
  height: 8rem;
}

.ht-96 {
  height: 9.6rem;
}

.ht-120 {
  height: 12rem;
}

.ht-160 {
  height: 16rem;
}

.ht-240 {
  height: 24rem;
}

.ht-320 {
  height: 32rem;
}

.ht-480 {
  height: 48rem;
}

.ht-640 {
  height: 64rem;
}

.ht-700 {
  height: 70rem;
}

.ht-800 {
  height: 80rem;
}

.ht-900 {
  height: 90rem;
}

.ht-960 {
  height: 96rem;
}

/*Page Links*/
.page-link:link,
.page-link:visited {
  text-decoration: none;
  color: #1c7ed6;
  transition: all 0.2s;
}

.page-link:hover,
.page-link:active {
  color: #1864ab;
}

.page-link-default:link,
.page-link-default:visited {
  color: #1c7ed6;
  transition: all 0.2s;
}

.page-link-default:hover,
.page-link-default:active {
  color: #1864ab;
}

.page-link-1:link,
.page-link-1:visited {
  text-decoration: none;
  color: #495057;
  color: #f783ac;
  color: #ffd43b;
  transition: all 0.2s;
}

.page-link-1:hover,
.page-link-1:active {
  color: #adb5bd;
}

/*
.special-link:link,
.special-link:visited {
  text-decoration: none;
  color: #f76707;
  transition: all .2s;
}*/
.special {
  color: #f76707;
  transition: all 0.3s;
}

.special:hover,
.special:active {
  color: #d9480f;
}

/*FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98*/
.font-size-10 {
  font-size: 1rem;
}

.font-size-12 {
  font-size: 1.2rem;
}

.font-size-14 {
  font-size: 1.4rem;
}

.font-size-16 {
  font-size: 1.6rem;
}

.font-size-18 {
  font-size: 1.8rem;
}

.font-size-20 {
  font-size: 2rem;
}

.font-size-24 {
  font-size: 2.4rem;
}

.font-size-30 {
  font-size: 3rem;
}

.font-size-36 {
  font-size: 3.6rem;
}

.font-size-44 {
  font-size: 4.4rem;
}

.font-size-52 {
  font-size: 5.2rem;
}

.font-size-62 {
  font-size: 6.2rem;
}

.font-size-74 {
  font-size: 7.4rem;
}

.font-weight-300 {
  font-weight: 300;
}

.font-weight-400 {
  font-weight: 400;
}

.font-weight-500 {
  font-weight: 500;
}

.font-weight-600 {
  font-weight: 600;
}

.font-weight-700 {
  font-weight: 700;
}

.line-height-10 {
  line-height: 1;
}

.line-height-11 {
  line-height: 1.1;
}

.line-height-12 {
  line-height: 1.2;
}

.line-height-13 {
  line-height: 1.3;
}

.line-height-14 {
  line-height: 1.4;
}

.line-height-15 {
  line-height: 1.5;
}

.line-height-16 {
  line-height: 1.6;
}

.line-height-17 {
  line-height: 1.7;
}

.line-height-18 {
  line-height: 1.8;
}

.letter-space-05 {
  letter-spacing: 0.5px;
}

.letter-space-075 {
  letter-spacing: 0.75px;
}

.letter-space-1 {
  letter-spacing: 1px;
}

.letter-space-2 {
  letter-spacing: 2px;
}

.letter-space-3 {
  letter-spacing: 3px;
}

.letter-space-4 {
  letter-spacing: 4px;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

.upper {
  text-transform: uppercase;
}

.lower {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.unordered-list {
  list-style: none;
  font-size: 1.8rem;
  line-height: 1.6;
}

.unordered-list li {
  margin-bottom: 1rem;
  display: flex;
}

.list-style {
  font-size: 2rem;
  padding-right: 1rem;
  color: #087f5b;
}

/*SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128*/
.gap-0 {
  gap: 0;
}

.gap-2 {
  gap: 0.2rem;
}

.gap-4 {
  gap: 0.4rem;
}

.gap-8 {
  gap: 0.8rem;
}

.gap-12 {
  gap: 1.2rem;
}

.gap-16 {
  gap: 1.6rem;
}

.gap-24 {
  gap: 2.4rem;
}

.gap-32 {
  gap: 3.2rem;
}

.gap-48 {
  gap: 4.8rem;
}

.gap-64 {
  gap: 6.4rem;
}

.gap-80 {
  gap: 8rem;
}

.gap-96 {
  gap: 9.6rem;
}

/*
\\mg margin This apply to all sides top, bottom, right and left
*/
.mg-0 {
  margin: 0;
}

.mg-2 {
  margin: 0.2rem;
}

.mg-4 {
  margin: 0.4rem;
}

.mg-8 {
  margin: 0.8rem;
}

.mg-12 {
  margin: 1.2rem;
}

.mg-16 {
  margin: 1.6rem;
}

.mg-24 {
  margin: 2.4rem;
}

.mg-32 {
  margin: 3.2rem;
}

.mg-48 {
  margin: 4.8rem;
}

.mg-64 {
  margin: 6.4rem;
}

.mg-80 {
  margin: 8rem;
}

.mg-96 {
  margin: 9.6rem;
}

\\mg-rt margin-right .mg-rt-0 {
  margin-right: 0;
}

.mg-rt-2 {
  margin-right: 0.2rem;
}

.mg-rt-4 {
  margin-right: 0.4rem;
}

.mg-rt-8 {
  margin-right: 0.8rem;
}

.mg-rt-12 {
  margin-right: 1.2rem;
}

.mg-rt-16 {
  margin-right: 1.6rem;
}

.mg-rt-24 {
  margin-right: 2.4rem;
}

.mg-rt-32 {
  margin-right: 3.2rem;
}

.mg-rt-48 {
  margin-right: 4.8rem;
}

.mg-rt-64 {
  margin-right: 6.4rem;
}

.mg-rt-80 {
  margin-right: 8rem;
}

.mg-rt-96 {
  margin-right: 9.6rem;
}

\\mg-lt margin-left .mg-lt-0 {
  margin-left: 0;
}

.mg-lt-2 {
  margin-left: 0.2rem;
}

.mg-lt-4 {
  margin-left: 0.4rem;
}

.mg-lt-8 {
  margin-left: 0.8rem;
}

.mg-lt-12 {
  margin-left: 1.2rem;
}

.mg-lt-16 {
  margin-left: 1.6rem;
}

.mg-lt-24 {
  margin-left: 2.4rem;
}

.mg-lt-32 {
  margin-left: 3.2rem;
}

.mg-lt-48 {
  margin-left: 4.8rem;
}

.mg-lt-64 {
  margin-left: 6.4rem;
}

.mg-lt-80 {
  margin-left: 8rem;
}

.mg-lt-96 {
  margin-left: 9.6rem;
}

\\mg-tp margin-top .mg-tp-0 {
  margin-top: 0;
}

.mg-tp-2 {
  margin-top: 0.2rem;
}

.mg-tp-4 {
  margin-top: 0.4rem;
}

.mg-tp-8 {
  margin-top: 0.8rem;
}

.mg-tp-12 {
  margin-top: 1.2rem;
}

.mg-tp-16 {
  margin-top: 1.6rem;
}

.mg-tp-24 {
  margin-top: 2.4rem;
}

.mg-tp-32 {
  margin-top: 3.2rem;
}

.mg-tp-48 {
  margin-top: 4.8rem;
}

.mg-tp-64 {
  margin-top: 6.4rem;
}

.mg-tp-80 {
  margin-top: 8rem;
}

.mg-tp-96 {
  margin-top: 9.6rem;
}

\\mg-bm margin-bottom .mg-bm-0 {
  margin-bottom: 0;
}

.mg-bm-2 {
  margin-bottom: 0.2rem;
}

.mg-bm-4 {
  margin-bottom: 0.4rem;
}

.mg-bm-8 {
  margin-bottom: 0.8rem;
}

.mg-bm-12 {
  margin-bottom: 1.2rem;
}

.mg-bm-16 {
  margin-bottom: 1.6rem;
}

.mg-bm-24 {
  margin-bottom: 2.4rem;
}

.mg-bm-32 {
  margin-bottom: 3.2rem;
}

.mg-bm-48 {
  margin-bottom: 4.8rem;
}

.mg-bm-64 {
  margin-bottom: 6.4rem;
}

.mg-bm-80 {
  margin-bottom: 8rem;
}

.mg-bm-96 {
  margin-bottom: 9.6rem;
}

/*
\\pd padding This applies to all sides top, bottom, right and left
*/
.pd-0 {
  padding: 0;
}

.pd-2 {
  padding: 0.2rem;
}

.pd-4 {
  padding: 0.4rem;
}

.pd-8 {
  padding: 0.8rem;
}

.pd-12 {
  padding: 1.2rem;
}

.pd-16 {
  padding: 1.6rem;
}

.pd-24 {
  padding: 2.4rem;
}

.pd-32 {
  padding: 3.2rem;
}

.pd-48 {
  padding: 4.8rem;
}

.pd-64 {
  padding: 6.4rem;
}

.pd-80 {
  padding: 8rem;
}

.pd-96 {
  padding: 9.6rem;
}

\\pd-rt padding-right .pd-rt-0 {
  padding-right: 0;
}

.pd-rt-2 {
  padding-right: 0.2rem;
}

.pd-rt-4 {
  padding-right: 0.4rem;
}

.pd-rt-8 {
  padding-right: 0.8rem;
}

.pd-rt-12 {
  padding-right: 1.2rem;
}

.pd-rt-16 {
  padding-right: 1.6rem;
}

.pd-rt-24 {
  padding-right: 2.4rem;
}

.pd-rt-32 {
  padding-right: 3.2rem;
}

.pd-rt-48 {
  padding-right: 4.8rem;
}

.pd-rt-64 {
  padding-right: 6.4rem;
}

.pd-rt-80 {
  padding-right: 8rem;
}

.pd-rt-96 {
  padding-right: 9.6rem;
}

\\pd-lt padding-left .pd-lt-0 {
  padding-left: 0;
}

.pd-lt-2 {
  padding-left: 0.2rem;
}

.pd-lt-4 {
  padding-left: 0.4rem;
}

.pd-lt-8 {
  padding-left: 0.8rem;
}

.pd-lt-12 {
  padding-left: 1.2rem;
}

.pd-lt-16 {
  padding-left: 1.6rem;
}

.pd-lt-24 {
  padding-left: 2.4rem;
}

.pd-lt-32 {
  padding-left: 3.2rem;
}

.pd-lt-48 {
  padding-left: 4.8rem;
}

.pd-lt-64 {
  padding-left: 6.4rem;
}

.pd-lt-80 {
  padding-left: 8rem;
}

.pd-lt-96 {
  padding-left: 9.6rem;
}

\\pd-tp padding-top .pd-tp-0 {
  padding-top: 0;
}

.pd-tp-2 {
  padding-top: 0.2rem;
}

.pd-tp-4 {
  padding-top: 0.4rem;
}

.pd-tp-8 {
  padding-top: 0.8rem;
}

.pd-tp-12 {
  padding-top: 1.2rem;
}

.pd-tp-16 {
  padding-top: 1.6rem;
}

.pd-tp-24 {
  padding-top: 2.4rem;
}

.pd-tp-32 {
  padding-top: 3.2rem;
}

.pd-tp-48 {
  padding-top: 4.8rem;
}

.pd-tp-64 {
  padding-top: 6.4rem;
}

.pd-tp-80 {
  padding-top: 8rem;
}

.pd-tp-96 {
  padding-top: 9.6rem;
}

\\pd-bm padding-bottom .pd-bm-0 {
  padding-bottom: 0;
}

.pd-bm-2 {
  padding-bottom: 0.2rem;
}

.pd-bm-4 {
  padding-bottom: 0.4rem;
}

.pd-bm-8 {
  padding-bottom: 0.8rem;
}

.pd-bm-12 {
  padding-bottom: 1.2rem;
}

.pd-bm-16 {
  padding-bottom: 1.6rem;
}

.pd-bm-24 {
  padding-bottom: 2.4rem;
}

.pd-bm-32 {
  padding-bottom: 3.2rem;
}

.pd-bm-48 {
  padding-bottom: 4.8rem;
}

.pd-bm-64 {
  padding-bottom: 6.4rem;
}

.pd-bm-80 {
  padding-bottom: 8rem;
}

.pd-bm-96 {
  padding-bottom: 9.6rem;
}

/*******************************/
/**HEADER**/
/*******************************/
.header {
  background-color: #fff9db;
}

.logo {
  height: 12.8rem;
}

/*******************************/
/**NAVIGATION**/
/*******************************/
.main-nav-link:link,
.main-nav-link:visited {
  display: inline-block;
  text-decoration: none;
  color: #333;
  font-weight: 500;
  font-size: 1.8rem;
  transition: all 0.3s;
}

.main-nav-link:hover,
.main-nav-link:active {
  color: #cf711f;
}

.main-nav-link.nav-cta:link,
.main-nav-link.nav-cta:visited {
  padding: 1.2rem 2.4rem;
  border-radius: 9px;
  color: #fff;
  background-color: #e67e22;
}

.main-nav-link.nav-cta:hover,
.main-nav-link.nav-cta:active {
  background-color: #cf711f;
}

.section-hero {
  background-color: #fff9db;
  padding: 1.6rem 0 4.8rem 0;
}

.hero {
  max-width: 130rem;
  margin: 0 auto;
  padding: 0 3.2rem;
}

.hero-2 {
  max-width: 130rem;
  margin: 0 auto;
  padding: 0 3.2rem;
}

.para-2 {
  font-family: "Cardo", serif;
  font-style: italic;
  margin-top: 3.2rem;
}

.para-3 {
  font-family: "Cardo", serif;
  margin-top: 3.2rem;
  font-weight: bold;
}

.heading-primary {
  font-weight: 700;
  line-height: 1.3;
}

.hero-description {
  font-size: 2rem;
  line-height: 1.6;
  margin-bottom: 4.8rem;
}

.btn:link,
.btn:visited {
  display: inline-block;
  text-decoration: none;
  font-size: 2rem;
  font-weight: 600;
  padding: 1.6rem 3.2rem;
  border-radius: 9px;
  transition: background-color 0.3s;
}

.btn-full:link,
.btn-full:visited {
  color: #fff;
  background-color: #e67e22;
}

.btn-full:hover,
.btn-full:active {
  background-color: #cf711f;
}

.btn-outline:link,
.btn-outline:visited {
  background-color: #fff;
  color: #555;
}

.btn-outline:hover,
.btn-outline:active {
  background-color: #fdf2e9;
  /*Trick to add border inside*/
  box-shadow: inset 0 0 0 3px #fff;
}

.hero-img {
  border-radius: 2rem;
  width: 24rem;
}

.delivered-meals {
  display: flex;
}

.delivered-imgs {
  display: flex;
}

.delivered-imgs img {
  height: 6.4rem;
  width: 6.4rem;
  border-radius: 50%;
}

input[type=submit] {
  color: white;
  background-color: #0b7285;
  border: 0;
  border-radius: 5px;
  transition: all 0.3s;
}

input[type=submit]:hover {
  background-color: #e3fafc;
  color: #0b7285;
}

.form-messages {
  color: white;
  font-size: 2rem;
  font-weight: bold;
  width: 90%;
  margin: 0 auto 3rem auto;
  padding: 1.6rem 3.2rem;
  border-radius: 3px;
}

.success {
  background-color: #2b8a3e;
}

.green-success {
  background-color: white;
  color: #2b8a3e;
}

.red-error {
  background-color: white;
  color: #c92a2a;
}

.error {
  background-color: #c92a2a;
}

.img-box {
  /*width: 32rem;
  height: 100%;
  background-size: cover;
  background-position: center;*/
}

.img-1 {
  background-image: url("../images/overview-1.png");
  background-size: cover;
}

.img-11 {
  background-image: url("../images/rocks.jpg");
  background-size: cover;
}

.img-2 {
  background-image: url("../images/overview-2.png");
  background-size: cover;
}

.img-12 {
  background-image: url("../images/clouds-mountain.jpg");
  background-size: cover;
}

.img-13 {
  background-image: url("../images/mountain.jpg");
  background-size: cover;
}

.img-14 {
  background-image: url("../images/reflective.jpg");
  background-size: cover;
}

.img-15 {
  background-image: url("../images/candle.jpg");
  background-size: cover;
}

.img-16 {
  background-image: url("../images/wisdom.jpg");
  background-size: cover;
}

.img-17 {
  background-image: url("../images/life.jpg");
  background-size: cover;
}

.img-4 {
  background-image: url("../images/landing-img-4.png");
  background-size: cover;
}

.img-3b {
  background-image: url("../images/overview-3.png");
  background-size: cover;
  background-position: center;
}

.img-5 {
  background-image: url("../images/landing-img-5.png");
  background-size: cover;
}

.img-6 {
  background-image: url("../images/sun.jpg");
  background-size: cover;
}

.img-ira-2 {
  background-image: url("../images/progoff-2.png");
  background-size: cover;
}

/*
IMAGE DIVIDER
*/
.image-divider {
  height: 40rem;
  background-size: cover;
  background-position: center;
}

.divider-1 {
  background-image: url("../images/nature-1.jpg");
}

.divider-2 {
  background-image: url("../images/nature-2.jpg");
}

.divider-3 {
  background-image: url("../images/nature-3.jpg");
}

.divider-4 {
  background-image: url("../images/nature-4.jpg");
}

/*Videos and Videos Embeds*/
.video {
  /*  width: 32rem;
    height: 24rem;*/
  /*  width: 56rem;
    height: 31.5rem;*/
  width: 48rem;
  /*margin-top: -3.2rem;
  margin-bottom: 3.2rem;*/
  border-radius: 1rem;
}

/*width="560" height="315"*/
.youtube-iframe {
  width: 56rem;
  height: 31.5rem;
}

.section-next-steps {
  padding-bottom: 0;
}

/*# sourceMappingURL=main.css.map */