/* RESET CSS */
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

img { max-width: 100%; height: auto;}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

/* VARIABLES */
:root {
    --primary-color: #27863a;
    --color-primary-1: #dcebdf;
    --secondary-color: #d9ae13;
    --color-secondary-1: #0d0334;
    --color-secondary-2: #f9f4e1;
    --color-secondary-3: #fbf8ed;
    --tertiary-color: #016f2e;
    --quarternary-color: #252525;
    --color-typography-primary: #2b2b2b;
    --color-red: #c90300;
    --color-neutral-1: #f0f3f7;
}

/* separator */
.hr-separator {background: #1e2125; width: 100%; height: 3px; margin: 12px 0;}

.text-secondary {color: var(--secondary-color)!important;}
.bg-secondary {background: var(--secondary-color)!important;}

/* Typography */
h1,h2,h3,h4,h5,h6 {font-weight: 700; margin-bottom: 14px; line-height: normal; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--color-secondary-1);}

h1 {font-size: 28px;}
h2 {font-size: 24px;}
h3 {font-size: 20px;}
h4 {font-size: 18px;}
h5,h6 {font-size: 16px;}

p {margin-bottom: 16px;}

/* Buttons */
.button {display: inline-flex; text-align: center; align-items: center; justify-content: center; min-height: 50px; font-weight: 600; font-size: 16px; border-radius: 6px;}

.button-primary {background: var(--primary-color); color: #fff;}
.button-primary:hover {background: var(--tertiary-color); color: #fff; text-decoration: none;}

.button-secondary {background: var(--secondary-color); color: #fff;}
.button-secondary:hover {background: #43534f; color: #fff; text-decoration: none;}

.button-wide {width: 100%;}
.button-small {font-size: 14px!important; min-height: 40px!important;}

/* CUSTOM CSS */
html {height: 100%; scroll-behavior: smooth;}
body {min-height: 100%; display: flex; flex-direction: column; font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue"; font-size: 15px; color: var(--color-typography-primary);}
main {flex-grow: 1;}

/* Header */
header {background:var(--primary-color); color: #fff; min-height: 60px; box-shadow: 0 1px 5px #e8e8e8;}

/* Main Menu */
.main-nav {display: none;}

.main-nav .main-menu a {color: #fff; text-decoration: none; padding: 4px 0;}
.main-nav .main-menu a:hover {color: yellow;}

@media screen and (min-width: 992px) {
    .main-nav {display: block;}
    .main-nav .main-menu {gap: 10px 15px;}
}

@media screen and (max-width: 991px) {
    /* Mobile Menu Side Panel */
    .main-nav {position: fixed; top: 0; right: -300px; display: block !important; height: calc(100% - 60px); max-width: 280px; width: 100%; background: #fff; z-index: 2; top: 60px; box-shadow: -1px 1px 4px #d2d2d2; transition: right .2s ease-in-out;}
    .main-nav.menu-opened {right: 0;}

    .main-nav .main-menu li {width: 100%;}
    .main-nav .main-menu a {color: #000; width: 100%; display: block; text-align: left; padding: 4px 14px;}

    .main-menu .submenu-opened > .sub-menu {display: block; padding-left: 14px!important;} 
}

/* Submenu */
.has-child-menu {position: relative;}
.main-menu .sub-menu {display: none;}

.has-child-menu > a { position: relative; }


@media screen and (min-width: 992px) {
    .has-child-menu:hover .sub-menu {display: block;}
    .main-menu .sub-menu {border-radius: 6px; width: 200px; position: absolute; top: calc(100% + 3px); overflow: hidden; }
    .main-menu .sub-menu li:not(:first-child) {border-top: 1px solid #6a6a6a;}
    .main-menu .sub-menu a{background: #545454; color: fff; display: block; padding: 4px 10px;}
}

/* Menu Toggle */
#menu-toggle {appearance: none; border: none; outline: none; background: none; position: relative; width: 30px; height: 30px; cursor: pointer; top: 2.3px;}

#menu-toggle span:before,
#menu-toggle span:after {content: '';}

#menu-toggle span { top: calc(50% - 1px); }
#menu-toggle span,
#menu-toggle span:before,
#menu-toggle span:after {position: absolute; left: 0; display: block; height: 3px; width: 100%; background: #fff; border-radius: 10px;}

#menu-toggle span:before {top: -10px;}
#menu-toggle span:after {bottom: -10px;}

/* Menu Toggle Opened */
#menu-toggle.menu-opened span {background: none;}
#menu-toggle.menu-opened span:before{transform: rotate(45deg); top: 0;}
#menu-toggle.menu-opened span:after{transform: rotate(-45deg); top: 0;}

#menu-toggle.menu-opened span:before,
#menu-toggle.menu-opened span:after {transition: transform .1s ease-in-out}

/* Footer */
footer {background: var(--tertiary-color); color: #fff;}
.footer-links {font-size: 15px;}
.footer-links li:not(:last-child) {margin-bottom: 8px;}
.footer-links a {color: #fff; text-decoration: underline;}
footer p {opacity: .8; font-size: 13px;}

/* Footer Logos */
.footer-logos {background: var(--quarternary-color)}


/* Banner Header */
.header-main-container {
    min-height: 450px;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    background-color: var(--color-neutral-1);
    color: var(--color-typography-primary);
}

.header-main-container h1 span {
  color: var(--secondary-color);
}

.header-main-container .secured-text {color: var(--primary-color);}

/* Pros and Cons */
.pros-wrap {
    border-radius: 8px;
    background: #e4fff0;
    height: 100%;
    border: 1px solid #bff7d8;
    overflow: hidden;
}

.cons-wrap {
    border-radius: 8px;
    background: #ffe2e5;
    height: 100%;
    border: 1px solid #f1c9cd;
    overflow: hidden;
}

.pros-wrap ul,
.cons-wrap ul {list-style: none; padding: 0; margin: 0;}

.pros-wrap h3 {background: var(--tertiary-color); color: #fff;}
.cons-wrap h3 {background: var(--color-red); color: #fff;}

.pros-wrap h3,
.cons-wrap h3 {font-size: 16px;}