:root {
  --primary-color: #362fc8;
  --white-color: #ffffff;
  --dark-color: #171819;
  

  --h1-font-size: 48px;
  --h2-font-size: 36px;
  --h3-font-size: 28px;
  --h4-font-size: 24px;
  --p-font-size: 18px;
  --menu-font-size: 14px;
  --border-radius-small: 2px;
}

body {
  background: var(--white-color);
  
}

/* Typography */
h1, h2, h3, h4 {

  line-height: normal;
}



h1 {
  font-size: var(--h1-font-size);
  letter-spacing: -1px;
  text-transform: uppercase;
  margin: 20px 0;
}

h2 {
  font-size: var(--h2-font-size);
  letter-spacing: -2px;
}

h3 {
  font-size: var(--h3-font-size);
  letter-spacing: -1px;
  margin: 0;
}

h4 {
  font-size: var(--h4-font-size);
}

p {
  color: var(--p-color);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-light);
  line-height: 1.5em;
}

/* Links */
a {
  color: var(--link-color);
  text-decoration: none;
  transition: all 0.3s ease;
}

a:hover,
a:active,
a:focus {
  color: var(--primary-color);
  text-decoration: none;
}

/* Navbar */
.navbar {
  background: var(--white-color);
  padding: 1rem;
  height: 80px;
}

.navbar-expand-lg .navbar-nav .nav-link {
  padding: 0 1.5rem;
}

.navbar-brand {
  color: var(--white-color);
  font-size: var(--h3-font-size);
  font-weight: var(--font-weight-bold);
  padding-top: 0;
}

.nav-item .nav-link {
  color: var(--primary-color);
  font-size: var(--menu-font-size);
  font-weight: normal;
  text-transform: uppercase;
  padding: 2px 6px;
}

.nav-item .nav-link.active,
.nav-item .nav-link:hover {
  color: var(--primary-color);
}

.navbar-toggler {
  border: 0;
  padding: 0;
  cursor: pointer;
  margin-right: 10px;
  width: 30px;
  height: 35px;
}

.navbar-toggler .navbar-toggler-icon {
  background: var(--primary-color);
  display: block;
  width: 30px;
  height: 2px;
  position: relative;
}

.navbar-toggler .navbar-toggler-icon::before,
.navbar-toggler .navbar-toggler-icon::after {
  background: var(--primary-color);
  width: 30px;
  height: 2px;
  content: '';
  position: absolute;
  left: 0;
  transition: top 300ms 350ms ease, transform 300ms 50ms ease;
}

.navbar-toggler .navbar-toggler-icon::before {
  top: -8px;
}

.navbar-toggler .navbar-toggler-icon::after {
  top: 8px;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background: transparent;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
  transform: rotate(45deg);
  top: 0;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
  transform: rotate(-45deg);
  top: 0;
}

/* Profession Sections */
.profess {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Montserrat';
}

.prog,
.db-admin,
.info-sys,
.web-dev,
.econom,
.tech-maintenance,
.fire-safety,
.accounting,
.banking {
  font-family: 'Montserrat';
}

.hidden {
  display: none;
}

.list-item,
.db-admin-item,
.info-sys-item,
.web-dev-item,
.econom-item,
.tech-maintenance-item,
.fire-safety-item,
.accounting-item,
.banking-item {
  margin: 25px;
  padding: 10px;
  border-bottom: 1px solid;
  list-style: none;
}

.toggle-button,
.db-toggle-button,
.info-sys-toggle-button,
.web-dev-toggle-button,
.econom-toggle-button,
.tech-maintenance-toggle-button,
.fire-safety-toggle-button,
.accounting-toggle-button,
.banking-toggle-button {
  background: none;
  border: none;
  cursor: pointer;
  color: #444242;
  padding: 0 10px;
  font-family: 'Montserrat';
  font-size: 25px;
  float: right;
  outline: none;
}

.toggle-button:hover,
.db-toggle-button:hover,
.info-sys-toggle-button:hover,
.web-dev-toggle-button:hover,
.econom-toggle-button:hover,
.tech-maintenance-toggle-button:hover,
.fire-safety-toggle-button:hover,
.accounting-toggle-button:hover,
.banking-toggle-button:hover,
.toggle-button:focus,
.db-toggle-button:focus,
.info-sys-toggle-button:focus,
.web-dev-toggle-button:focus,
.econom-toggle-button:focus,
.tech-maintenance-toggle-button:focus,
.fire-safety-toggle-button:focus,
.accounting-toggle-button:focus,
.banking-toggle-button:focus {
  background: none;
  border: none;
  color: #333;
  outline: none;
  box-shadow: none;
}

.naviki,
.db-skills-list,
.info-sys-skills-list,
.web-dev-skills-list,
.econom-skills-list,
.tech-maintenance-skills-list,
.fire-safety-skills-list,
.accounting-skills-list,
.banking-skills-list {
  list-style-type: disc;
  margin-left: 20px;
  padding-left: 20px;
}

.naviki li,
.db-skills-list li,
.info-sys-skills-list li,
.web-dev-skills-list li,
.econom-skills-list li,
.tech-maintenance-skills-list li,
.fire-safety-skills-list li,
.accounting-skills-list li,
.banking-skills-list li {
  margin-bottom: 5px;
}

.textxy,
.db-admin-text,
.info-sys-text,
.web-dev-text,
.econom-text,
.tech-maintenance-text,
.fire-safety-text,
.accounting-text,
.banking-text {
  margin-top: 50px;
  width: 600px;
}

.cartinka {
  float: right;
  display: flex;
  flex-direction: column;
  width: 600px;
}

#salary,
#db-salary,
#info-sys-salary,
#web-dev-salary,
#econom-salary,
#tech-maintenance-salary,
#fire-safety-salary,
#accounting-salary,
#banking-salary {
  width: 500px;
  height: 300px;
}

/* Scroll Offsets */
#prog-info::before,
#abd::before,
#econ::before,
#web::before,
#tec::before,
#pb::before,
#bd::before,
#info-sys::before,
#sisad::before,
#about_kkrit::before {
  content: "";
  display: block;
  height: 180px;
  margin-top: -90px;
}

/* Owl Carousel */
.owl-carousel-image {
  max-width: 100%;
}

.owl-carousel-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
}

.owl-carousel-info h3 {
  font-family: 'Sono', sans-serif;
  font-size: 32px;
  font-weight: 600;
}

.owl-carousel-info p {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 300;
}

.badge {

  font-size: 14px;
  font-weight: 500;
}

/* Footer */
.footer-section {
  background: #f7f7f7;
  position: relative;
}

.footer-cta {
  border-bottom: 1px solid #373636;
}

.cta-text {
  padding-left: 15px;
  display: inline-block;
}

.cta-text h4 {
  color: #4836a1;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 2px;
}

.cta-text span {
  color: #757575;
  font-size: 15px;
}

.footer-content {
  position: relative;
  z-index: 2;
}

.footer-logo {
  margin-bottom: 30px;
}

.footer-logo img {
  max-width: 200px;
}