/* Import font from Google - Go to fonts.google.com, select a font and look for the import command */

@import url('https://fonts.googleapis.com/css2?family=Georama:wght@100&display=swap');

/* Change some root colors and settings of the document */

:root {

    --cassiopeia-color-primary: #252525;
    --cassiopeia-color-link: #2ba84a;
    --cassiopeia-color-hover: #20c997;

    --cassiopeia-font-family-body: "Roboto", sans-serif;
    --cassiopeia-font-family-headings: "Roboto", sans-serif;
    --cassiopeia-font-weight-headings: 700;
    --cassiopeia-font-weight-normal: 400;
    
    --blue: #0d6efd;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #d63384;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #198754;
    --teal: #20c997;
    --cyan: #0dcaf0;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --primary: #0d6efd;
    --secondary: #6c757d;
    --success: #198754;
    --info: #0dcaf0;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #212529;
    --primary-rgb: 13, 110, 253;
    --secondary-rgb: 108, 117, 125;
    --success-rgb: 25, 135, 84;
    --info-rgb: 13, 202, 240;
    --warning-rgb: 255, 193, 7;
    --danger-rgb: 220, 53, 69;
    --light-rgb: 248, 249, 250;
    --dark-rgb: 33, 37, 41;
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;
    --body-color-rgb: 33, 37, 41;
    --body-bg-rgb: 255, 255, 255;
    --font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --body-font-family: var(--cassiopeia-font-family-body);
    --body-font-size: 1rem;
    --body-font-weight: 400;
    --body-line-height: 1.5;
    --body-color: #252525;
    --body-bg: #ffffff;
}


/* Use the imported font (See first lines of the document) on the page: On Google you can also find the CSS instruction for using the font. If you put this in the body element then the font will be used on the whole website. */

body {
    font-family: 'Roboto', sans-serif;
}

/* The page header of Cassiopeia has the class "header" so you control it with .header */

.header {
    background: #ffffff; /*rgb(2, 0, 36);
    background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(119, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);*/
}

Smaller banner
.container-banner .banner-overlay {
    height: 40vh;
}

/* Remove underline from Logo */

.container-header a {
  text-decoration: none;
}

/* Menu item color */

.container-header .mod-menu {
justify-content: center;
color: #2ba84a;
text-decoration: none;
padding: 0;
}

/* Menu item hover color */

.container-header .mod-menu .metismenu-item:hover {
  color: #252525;
  text-decoration: none;
}

/* Color the dropdown menu in the menu with the class .metismenu.mod-menu .mm-collapse */

.metismenu.mod-menu .mm-collapse {
    background: #ffffff;
}

/* The links in the dropdown menu you have to adress them individually */

.metismenu.mod-menu .mm-collapse .metismenu-item a {
    color: #252525;
 	text-decoration: none;
}

.metismenu.mod-menu .mm-collapse .metismenu-item a:hover {
    color: #2ba84a;
 	text-decoration: none;
}

.metismenu.mod-menu .mm-collapse .metismenu-item:hover {
    color: #2ba84a;
  	text-decoration: none;
}

/* Modules have the class card, so you control them with .card - if you want to control only a specific module, you can give the module its own CSS class in the settings and then control it with that */

.card {/*
    box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);*/
}

/* Modules are on different module positions in the Cassiopeia template then the modules get in addition to card also the position as class name, for example main-top - so if you want to change all modules to main top you take .main-top.card */

.main-top.card {
    background: #d9d7d7;
}


.h1 {
    text-shadow: 2px 2px 8px rgba(150, 150, 150, 1);
    color: rgba(119, 9, 121, 1);
}

.btn-primary {
    background: #2ba84a;
    border-radius: 8px;
    border: 0px;
}

.btn-primary:hover {
    background: rgba(43, 121, 74, 0.8); /*#044cd0;*/
}

.item-image {
    border: 0px solid #ff0000;
}


/*If you run into icons on the website, you can color them individually*/

.icon-user {
    color: #171717;

}

/* or you color all icons with this special statement*/

.fa, .fas, [class*=" icon-"], [class^="icon-"] {
    color: #171717;
}

/* The page footer of Cassiopeia has the class "footer" so you control it with .footer */

.footer {
    background: rgb(2, 0, 36);
    background: #343a40;
}

.read-more-btn {
  color: #ffffff;
  background: #2BA84A;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  width: 115px;
  font-family: Roboto;
  font-size: 14px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.read-more-btn a:link {
  color: #000000;
  text-decoration: none;
}

.read-more-btn a:visited {
  color: #ffffff;
  text-decoration: none;
}

.read-more-btn:hover {
  background: #000000;
  text-decoration: none;
}

.read-more-btn-sm:link, visited, active  {
  background: #2BA84A;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  width: 90px;
  font-family: Roboto;
  color: #ffffff;
  font-size: 12px;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
}

.read-more-btn-sm:hover {
  background: #2BA84A;
  text-decoration: none;
}

.dt-card {
-webkit-box-shadow: 0px 0px 1.25em -0.25em rgba(43, 121, 74, 0.7);
box-shadow: 0px 0px 1.25em -0.25em rgba(43, 121, 74, 0.7);
border-right: 0.05em solid rgba(49, 1, 1, 1);
border-top: 0.05em solid rgba(49, 1, 1, 1);
border-left: 0.05em solid rgba(49, 1, 1, 1);
border-bottom: 0.25em solid rgba(49, 1, 1, 1);
}