/**** variables ****/
:root {
  --color-1: #ffffff;
  --color-2: #000000;

  --color-3: #03045e;
  --color-4: #023e8a;
  --color-5: #0077b6;
  --color-6: #0096c7;
  --color-7: #00b4d8;
  --color-8: #48cae4;
  --color-9: #90e0ef;
  --color-10: #ade8f4;
  --color-11: #caf0f8;
  --color-12: #000085;

  --color-20: #105b6a;
  --color-21: #bfbfbf;
  --color-22: #f7f7f7;


  --error-color: #a60012;
  --success-color: #006400;

  --color-30: #0000FF;

  --ff-main: Figtree, Raleway, Arial, Sans-serif;
  --ff-header: BerkshireSwash;

  --bs-navbar-toggler-focus-width: var(--color-20) !important;
}

/**** typography and spacing ****/
@font-face {
  font-family: Figtree;
  src: url('../fonts/Figtree-VariableFont_wght.ttf');
}

@font-face {
  font-family: BerkshireSwash;
  src: url('../fonts/BerkshireSwash-Regular.ttf');
}

@font-face {
  font-family: Raleway;
  src: url('../fonts/Raleway-VariableFont_wght.ttf');
}

body {
  font-family: var(--ff-main);
  line-height: 1.8;
  background-color: var(--color-21);
  margin: auto;
  color: var(--color-2);
  font-size: 1em;
  font-weight: 400;
}

h1 {
  color: var(--color-1);
}

a {
  text-underline-position: under;
}

.py-6 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}

.p-6 {
  padding: 6rem !important;
}

.py-7 {
  padding-top: 7rem !important;
  padding-bottom: 7rem !important;
}

.p-7 {
  padding: 7rem !important;
}

.p-8 {
  padding: 8em !important;
}

.tt-upper {
  text-transform: uppercase;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.5 !important;
}

.f-italics{
  font-style: italic;
}
/**** clearfix ****/

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/**** header ****/

.h1-ls {
  letter-spacing: 4px;
}

.bswash-font {
  font-family: var(--ff-header);
}

.df-auto {
  flex: auto;
}

@media screen and (min-width: 1200px) {

  .h1,
  h1 {
    font-size: 4rem;
  }
}

/**** footer ****/

#footer-image {
  background-color: var(--color-11);
  color: var(--color-2);
  height: 100px;
}

.bg-one {
  background-color: var(--color-9);
}

.ul-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.sm-color {
  color: var(--color-3);
}

.li-horizontal {
  display: block;
  padding: 0.5rem;
  float: left;
}

/**** recent posts ****/
.block-8 .nl-img {
  display: block;
  height: 80px;
  width: 80px;
}

.rounded {
  border-radius: 0.25rem !important;
}

.nl-img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.fs-14 {
  font-size: 14px;
}

/**** logo and title ****/

.mcf-logo-title{
  font-family: var(--ff-header);
  color: var(--color-1);
  letter-spacing: 2px;
  margin-bottom: 0 !important;
  padding: 0 0 0 0.5rem;
  white-space: normal !important;
}

/**** navbar ****/

.mcf-navbar-light {
  background-color: var(--color-20);
  position: absolute;
  top: 2rem;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 0.25rem 0;
  letter-spacing: 1px;
}

.mcf-navbar-dark {
  background-color: var(--color-20);
  letter-spacing: 1px;
}

.navbar-nav>.nav-item>.nav-link {
  color: var(--color-1);
}

.navbar-nav>li>a:hover{
  color: var(--color-1) !important;
  text-decoration: underline;

}

.log-input:hover {
  background-color: var(--color-4);
  color: var(--color-1) !important;
  text-decoration: underline;
}

.navbar-nav>.nav-item>.nav-link.active {
  font-style: italic;
  background-color: var(--color-3);
  color: var(--color-1);
  text-decoration: underline;
}

.log-input {
  color: var(--color-1);
  letter-spacing: 1px;
}

@media screen and (max-width: 991.98px) {
  .mcf-navbar-light {
    padding: 1em 0;
    position: relative;
    top: 0;
  }

  .navbar-nav>.nav-item>.nav-link {
    color: var(--color-1);
  }

  .mcf-navbar-light .navbar-nav>.nav-item .nav-link.active {
    background-color: var(--color-3);
    text-decoration: underline;
  }

  .navbar-nav>li>a:hover {
    background-color: var(--color-9);
    color: var(--color-2) !important;
  }

}

/**** navbar toggle ****/
.navbar-toggler {
  border: 1px solid var(--color-1);
  color: var(--color-1) !important;
  cursor: pointer;
  font-size: 16px;
  background-color: var(--color-3);
  line-height: 1.5;;
}

.navbar-toggler-icon {
  background-image: url('../images/white-toggler.png') !important;
}
/**** hero-background ****/

#bg-left {
  background-color: var(--color-11);
  flex: auto;
}

#bg-right {
  background-color: var(--color-9);
  flex: auto;
}

.hero-content {
  position: relative;
  top: -75rem;
  margin-bottom: -65rem;
}

.h-rem {
  height: 85rem;
}

@media screen and (min-width: 768px) {


  .hero-content {
    top: -60rem;
    margin-bottom: -42rem;
  }
}

/**** info section ****/

.info-1 {
  background-color: var(--color-3);
}

.info-2 {
  background-color: var(--color-4);
}

.info-3 {
  background-color: var(--color-8);
}

.info-4 {
  background-color: var(--color-11);
}

.fc-1 {
  color: var(--color-1);
}

.fc-2 {
  color: var(--color-2);
}

/**** fade in bottom animation ****/
/**
 * https://www.cssanimatio.io
 * Github: https://github.com/yesiamrocks/cssanimation.io
 **/

.cssanimation,
.cssanimation span {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.cssanimation span {
  display: inline-block
}

.fadeInBottom {
  animation-name: fadeInBottom
}

@keyframes fadeInBottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }

  to {
    opacity: 1
  }
}

/**** tech statistics ****/

.tech-stat-numb {
  font-size: 3.25em;
  font-weight: 600;
  color: var(--color-2);
  line-height: 1.0;
  letter-spacing: 5px;
}

/**** testimonials ****/
/** source: https://codingyaar.com/bootstrap-4-carousel-multiple-items-responsive/ **/

.c-shadow {
  box-shadow: 2px 6px 8px 0 var(--color-4);
}

.carousel-control-prev,
.carousel-control-next {
  background-color: #e1e1e1;
  width: 5vh;
  height: 5vh;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.border-cust {
  border-color: var(--color-3);
}

/**** how it works ****/

.hiw-icon {
  width: 130px;
  height: 130px;
  margin: 0 auto;
  border-radius: 50%;
  position: relative;
  border: solid 1px var(--color-1);
}

.hiw-icon>div {
  position: absolute;
  top: 0px;
  right: 0px;
  content: '';
  width: 35px;
  height: 35px;
  background: var(--color-2);
  border-radius: 50%;
  border: solid 1px var(--color-1);
}

.mcf-button {
  border: solid 2px var(--color-1);
  height: auto;
  width: 10em;
  color: var(--color-1) !important;
  cursor: pointer;
  font-size: 16px;
  background-color: var(--color-3);
}

.mcf-btn-sm {
  width: 5em !important;
}

.mcf-btn-wide {
  width: revert;
}

.mcf-button:hover,
.mcf-button:focus {
  background-color: var(--color-5);
  border: solid 2px var(--color-2) !important;
}

.mcf-button:active {
  background-color: var(--color-9) !important;
  border: solid 2px var(--color-2) !important;
  color: var(--color-2) !important;
}

.img-pos-1 {
  max-width: 70%;
  position: absolute;
  top: 19px;
  left: 19px;
}

.img-pos-2 {
  max-width: 60%;
  position: absolute;
  top: 25px;
  left: 25px;
}

/**** recent from newsletter ****/

.nl-1 {
  background-color: var(--color-22);
}

/**** newsletter&post ****/

a.mcf-link,
a.mcf-link:active {
  color: var(--color-3);
}

a.mcf-link:hover,
a.mcf-link:focus {
  color: var(--color-30);
}

a.mcf-nl,
a.mcf-nl:active {
  color: var(--color-3);
}

a.mcf-nl:hover,
a.mcf-nl:focus {
  color: var(--color-30);
}

/**** lightbox ****/
/** source: https://www.youtube.com/watch?v=uKVVSwXdLr0 **/

#lightbox {
  position: fixed;
  z-index: 1000;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
}

#lightbox.active {
  display: flex;
  justify-content: center;
  align-items: center;
}

img.l-box {
  cursor: pointer;

}

#lightbox img {
  max-width: 90%;
  max-height: 80%;
  padding: 4px;
  background-color: #000;
  border: 2px solid #fff;
}

/**** image overlay ****/
/** source - https://www.youtube.com/watch?v=exb2ab72Xhs   WIP **/

.img-overlay {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: var(--color-1);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s;
}

.img-overlay:hover {
  opacity: 1;
}

.img-overlay>* {
  transform: translateY(20px);
  transition: transform 0.25s;
}

.img-overlay:hover {
  transform: translateY(0);
}

/**** contact us ****/

.bg-frame {
  height: 60vh;
  background-color: var(--color-20);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.bg-img-contactUs {
  background-image: url('../images/keyboard-email-blue.png');
}

.banner {
  border: solid 2px var(--color-1);
  box-shadow: 3px 3px 6px 0 var(--color-2);
  background-color: var(--color-4);
  color: var(--color-1);
}

/**** breadcrumbs ****/

a.mcf-crumb,
a.mch-crumb:active {
  text-decoration: none;
  color: var(--color-1);
  letter-spacing: 1px;
}

a.mcf-crumb:hover,
a.mcf-crumb:focus {
  color: var(--color-1);
  text-decoration: underline;
}

/**** our story ****/
.bg-img-ourStory {
  background-image: url('../images/emotion-rocks.png');
}

/**** newsletter ****/
.bg-img-newsletter {
  background-image: url('../images/green-flower-black-rock.png');
}

.nl-keyword {
  text-transform: uppercase;
  display: inline-block;
  padding: 4px 10px;
  margin-bottom: 7px;
  margin-right: 4px;
  border-radius: 4px;
  color: var(--color-1);
  font-weight: 500;
  font-size: 10px;
  background: var(--color-3);
}

.text-body-secondary {
  color: var(--color-2) !important;
}

.hero-text-border {
  border: solid 1px var(--color-2);
}

/**** accessibility ****/

.sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

/**** back to top ****/

.back-to-top {
  position: fixed;
  cursor: pointer;
  bottom: 16px;
  right: 16px;
  left: auto;
  opacity: 0;
  transition: opacity .5s linear;
  z-index: 11;
  background-color: var(--color-3);
}

/**** container ****/

.shadow-wrap {
  box-shadow: 0 0 8px 2px var(--color-21);
}

.container.shadow-wrap {
  background-color: var(--color-1);
}

/**** registration ****/

.bg-img-purchase {
  background-image: url('../images/sunflower.png');
}

.bg-img-login {
  background-image: url('../images/lock-bg-image.png');
}

fieldset {
  all: revert;
}

legend {
  float: none;
  width: unset;
  padding: unset;
}

.reg-form-label {
  margin: 0.5rem 0rem;
}

.status-msg.error {
  color: var(--error-color);
}

.status-msg.success {
  color: var(--success-color);
}

/**** sitemap ****/
.bg-img-sitemap {
  background-image: url('../images/zen-sand-rock.png');
}

/**** accessibilty ****/
.bg-img-access {
  background-image: url('../images/accessibility.png');

}

/**** TOS ****/
.bg-img-tos {
  background-image: url('../images/beautiful-macro-rocks-concept.png');
}

/**** privacy ****/
.bg-img-privacy {
  background-image: url('../images/zen-rock-stack.png');
}

/**** sitemap ****/
.bg-img-sitemap {
  background-image: url('../images/zen-sand-rock.png');
}

/**** skip to main content ****/
.btn-skip {
  font-weight: 600;
  cursor: pointer;
  position: absolute;
  z-index: 21;
  left: 0.5em;
  right: auto;
  top: 0.5em;
  opacity: 1;
  transition: transform 0.1875s ease-out;
  background-color: var(--color-21);
}

.btn-skip:not(:focus):not(:hover) {
  transform: translateY(-4em);
  opacity: 0;
}

/**** gallery ****/
.align-btm {
  align-items: flex-end !important;
}

.img-fluid-sm {
  max-width: 50%;
  height: 100%;
  padding: .25rem !important;
}

/**** pagination ****/
li.page-item.disabled{
  color: var(--color-2) !important;
}

a.page-link{
 color: var(--color-3) !important;
}

.active>.page-link{
  background-color: var(--color-3) !important;
  color: var(--color-1) !important;
}

/**** data table ****/
.dataTables_wrapper .dataTables_filter {
  margin-bottom: 0.5rem !important;
}

/**** iframe gmap ****/

iframe{
  width: 100%;
}