/*--------------------------------------------------
-    Title:    style.css
-    File:     /includes/css/style.css
-    Author:   David Vincent Gagne, dvg@davidgagne.net
-    Created:  WED MAR 04 2026 @ 15:16
-    Modified: FRI MAR 06 2026 @ 17:02
-    Version:  0.2.5
--------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");
@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap");

/* Smooth scroll */

@media (prefers-reduced-motion: no-preference) {
     html {
          scroll-behavior: smooth;
     }
}

@media (prefers-reduced-motion: reduce) {
     html {
          scroll-behavior: auto;
     }
}

/* Basic */

body {
     background: #fff;
}

body, input, select, textarea {
     color: #000;
     font-family: "Merriweather", sans-serif;
     font-size: 16pt;
     font-weight: 400;
     line-height: 1.75em;
}

a {
     transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
     color: inherit;
     text-decoration: none;
}

a:hover {
     color: #2d8bfd !important;
}

h1, h2, h3, h4, h5, h6 {
     font-weight: bolder;
}

/* Section/Article */

header p {
     color: #aaa;
     position: relative;
     margin: 0 0 1.6875em 0;
}

/* Form */

label {
     color: #111;
     display: block;
     font-size: 0.9em;
     font-weight: 700;
     margin: 0 0 1.125em 0;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
select,
textarea {
     appearance: none;
     border-radius: 5px;
     border: solid 2px #e4e4e4;
     color: inherit;
     display: block;
     outline: 0;
     padding: 0 1em;
     text-decoration: none;
     width: 100%;
}

input[type="text"]:invalid,
input[type="password"]:invalid,
input[type="email"]:invalid,
input[type="tel"]:invalid,
select:invalid,
textarea:invalid {
     box-shadow: none;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
     border-color: #2d8bfd;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
select {
     height: 2.75em;
}

textarea {
     padding: 0.75em 1em;
}

::placeholder {
     color: #aaa !important;
     font-style: italic;
     opacity: 1.0;
}

/* Icon */

.icon {
     text-decoration: none;
     border-bottom: none;
     position: relative;
}

.icon > .label {
     display: none;
}

/* List */

ul {
     list-style: disc;
     margin: 0 0 2.25em 0;
     padding-left: 1em;
}

ul li {
     padding-left: 0.5em;
}

ul.icons {
     cursor: default;
     list-style: none;
     padding-left: 0;
}

ul.icons li {
     display: inline-block;
     padding: 0 1em 0 0;
}

ul.icons li:last-child {
     padding-right: 0 !important;
}

ul.icons li .icon:before {
     font-size: 1.25em;
}

/* Button */

input[type="submit"],
input[type="reset"],
input[type="button"] {
     appearance: none;
     transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
     background-color: #989898;
     border-radius: 5px;
     border: 0;
     color: #ffffff !important;
     cursor: pointer;
     display: inline-block;
     font-weight: 700;
     height: 2.75em;
     line-height: 2.75em;
     padding: 0 1.5em;
     text-align: center;
     text-decoration: none;
     white-space: nowrap;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
     background-color: #a5a5a5;
     color: #ffffff !important;
}

input[type="submit"].special,
input[type="reset"].special,
input[type="button"].special,
.btn-primary {
     background-color: #2d8bfd !important;
     border-color: #2d8bfd !important;
     color: #ffffff !important;
}

input[type="submit"].special:hover,
input[type="reset"].special:hover,
input[type="button"].special:hover,
.btn-primary:hover {
     background-color: #78AED6 !important;
     border-color: #78AED6 !important;
}

input[type="submit"].special:active,
input[type="reset"].special:active,
input[type="button"].special:active,
.btn-primary:active {
     background-color: #5096CA !important;
     border-color: #5096CA !important;
}

/* Features */

.features article {
     border-top: solid 3px #f4f4f4;
     margin-bottom: 2.25em;
     padding-top: 2.25em;
     margin-top: 1.25em;
}

.features article:first-child {
     border-top: 0;
     padding-top: 0;
}

/* Header (Sidebar) */

#header {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     background: #2d8bfd;
     color: #D8E7F3;
     height: 100%;
     overflow-y: auto;
     text-align: center;
     top: 0;
     width: 23em;
     right: 0;
     --bs-offcanvas-width: 23em;
     --bs-offcanvas-bg: #2d8bfd;
}

#header h1, #header h2, #header h3, #header h4, #header h5, #header h6 {
     color: #ffffff;
}

#header h1 a, #header h2 a, #header h3 a, #header h4 a, #header h5 a, #header h6 a {
     color: #ffffff;
}

#header header p {
     color: #C1D9EC;
}

#header a {
     color: #D8E7F3;
}

#header a:hover {
     color: #ffffff !important;
}

#header > header {
     flex-shrink: 0;
     padding: 3em;
}

#header > header .avatar {
     border-radius: 100%;
     display: block;
     margin: 0 auto 2.25em auto;
     width: 8em;
}

#header > header h1 {
     font-size: 1.75em;
     margin: 0;
}

#header > header p {
     color: #D8E7F3;
     font-style: italic;
     margin: 1em 0 0 0;
}

#header > footer {
     flex-shrink: 0;
     bottom: 0;
     left: 0;
     padding: 2em;
     width: 100%;
}

#header > footer .icons {
     margin: 0;
}

#header > footer .icons li a {
     color: #C1D9EC;
}

#header > nav {
     flex-grow: 1;
}

#header > nav ul {
     list-style: none;
     margin: 0;
     padding: 0;
}

#header > nav ul li {
     border-top: solid 2px #ffd300;
     display: block;
     padding: 0;
}

#header > nav ul li a {
     transition: none;
     border: 0;
     color: #ffffff !important;
     display: block;
     padding: 0.85em 0;
     text-decoration: none;
}

#header > nav ul li a.active {
     background: #fff;
     color: #2d8bfd !important;
}

#header > nav ul li:first-child {
     border-top: 0;
}

/* Desktop: always show sidebar */
@media screen and (min-width: 992px) {

     #header {
          visibility: visible !important;
          transform: none !important;
          position: fixed;
     }

}

/* Mobile offcanvas close button area */
.offcanvas-close-btn {
     text-align: right;
     padding: 0.5em 1em;
     flex-shrink: 0;
}

/* Wrapper */

#wrapper {
     background: #fff;
     padding-right: 23em;
}

/* Main */

#main > section {
     border-top: solid 6px #f4f4f4;
}

#main > section > .container {
     padding-top: 0;
     padding-bottom: 4em;
}

#main > section:first-child {
     border-top: 0;
}

/* Footer */

#footer {
     background: #fafafa;
     border-top: 0;
     color: #c0c0c0;
     overflow: hidden;
     padding: 4em 0 2em 0;
}

#footer .copyright {
     line-height: 1em;
     list-style: none;
     padding: 0;
     text-align: center;
}

#footer .copyright li {
     display: block;
     font-size: 0.8em;
     line-height: 1.75em;
     margin: 0.75em 0 0 0;
}

#footer .copyright li:first-child {
     margin-top: 0;
}

#footer .copyright li a {
     color: inherit;
}

/* XLarge */

@media screen and (max-width: 1680px) {

/* Basic */

     body, input, select, textarea {
          font-size: 13pt;
     }

/* Header */

     #header {
          width: 21em;
          --bs-offcanvas-width: 21em;
     }

     #header > header {
          padding: 2em;
     }

     #header > footer {
          padding: 1.5em;
     }

}

/* Large */

@media screen and (max-width: 1280px) {

/* Basic */

     body, input, select, textarea {
          font-size: 11pt;
     }

/* Header */

     #header {
          width: 20em;
          --bs-offcanvas-width: 20em;
     }

/* Wrapper */

     #wrapper {
          padding-right: 20em;
     }

}

/* Medium / Mobile (below Bootstrap lg breakpoint) */

@media screen and (max-width: 991px) {

/* Header */

     #header > footer {
          bottom: auto;
          left: auto;
          margin: 0.5em 0 0 0;
          position: relative;
          right: auto;
          top: auto;
     }

/* Wrapper */

     #wrapper {
          padding: 56px 0 1px 0;
     }

}

/* Small */

@media screen and (max-width: 736px) {

/* Header */

     #header > header {
          padding: 2em;
     }

     #header > header .avatar {
          margin: 0 auto 1.6875em auto;
          width: 6em;
     }

     #header > header h1 {
          font-size: 1.5em;
     }

     #header > header p {
          margin: 1em 0 0 0;
     }

     #header > footer {
          padding: 1.5em;
     }

}

.nobreak {
     white-space: nowrap;
}
.endorsements{
    max-width: 175px;
    margin-right: 10px;
}
#primary_background{
    background-color: #2d8bfd;
}