html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  
    scroll-behavior: smooth;
  }
  :root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #1abc9c;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #1abc9c;
    --secondary: #2c3e50;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: 'Lato', -apple-system, BlinkMacSystemFont,
      'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
      'Liberation Mono', 'Courier New', monospace;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  
  article,
  aside,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  main,
  nav,
  section {
    display: block;
  }
  
  body {
    margin: 0;
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
      'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
    position: relative;
  }
  
  [tabindex='-1']:focus:not(:focus-visible) {
    outline: 0 !important;
  }
  
  hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
  }
  
  p {
    margin-top: 0;
    margin-bottom: 1rem;
  }
  
  .btn-xl {
    padding: 2rem 0.5rem;
    font-size: 1.25rem;
  }
  
  #mainNav {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    font-weight: 700;
    background-color: #000000;
  }
  
  #mainNav .navbar-brand {
    color: #fff;
  }
  #mainNav .navbar-nav {
    margin-top: 1rem;
  }
  #mainNav .navbar-nav li.nav-item a.nav-link {
    color: #fff;
  }
  
  #mainNav .navbar-toggler {
    font-size: 80%;
    padding: 0.8rem;
  }
  
  .masthead {
    padding-top: calc(6rem + 74px);
    padding-bottom: 6rem;
    background-image: url('https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: -4%;
  }
  
  .masthead .masthead-subheading {
    font-size: 1.25rem;
  }
  .masthead .masthead-avatar {
    width: 12rem;
    border-radius: 100%;
    padding-bottom: 0px;
  
  
  }
  
  @media (min-width: 992px) {
    .masthead {
      padding-top: calc(6rem + 104px);
      padding-bottom: 6rem;
    }
    .masthead .masthead-heading {
      font-size: 2rem;
      line-height: 3.5rem;
    }
    .masthead .masthead-subheading {
      font-size: 1.5rem;
    }
  }
  
  .divider-custom {
    margin: 1.25rem 0 1.5rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .divider-custom .divider-custom-line {
    width: 100%;
    max-width: 7rem;
    height: 0.25rem;
    background-color: #2f2fa1;
    border-radius: 1rem;
    border-color: #2f2fa1 !important;
  }
  .divider-custom .divider-custom-line:first-child {
    margin-right: 1rem;
  }
  .divider-custom .divider-custom-line:last-child {
    margin-left: 1rem;
  }
  .divider-custom .divider-custom-icon {
    color: #2f2fa1 !important;
    font-size: 2rem;
  }
  .divider-custom.divider-light .divider-custom-line {
    background-color: #fff;
  }
  .divider-custom.divider-light .divider-custom-icon {
    color: #fff !important;
  }
  
  
  
  .layer {
    background-color: rgba(0, 0, 0, 0.93);
  
    top: 0;
    left: 0;
    width: 90%;
    height: 100%;
    padding-bottom: 1.5%;
    padding-top: 1.5%;
    border-radius: 2rem;
    
  }
  
  .page-section {
    padding: 12rem;
    padding-top: 12.2rem;
  }
  .page-section .page-section-heading {
    font-size: 2.25rem;
    line-height: 2rem;
  }
  @media (min-width: 992px) {
    .page-section .page-section-heading {
      font-size: 3rem;
      line-height: 2.5rem;
    }
  }
  
  @media (max-width: 920px) {
    .layer {
      border-radius: 1%;
    }
    .masthead {
      margin-top: -8%;
    }
    .page-section {
      padding: 6rem 0;
    }
  }
  
  @media (max-width: 540px) {
    .layer {
      border-radius: 1%;
    }
    .masthead {
      margin-top: -19%;
    }
  }
  
  @media (max-width: 320px) {
    .layer {
      border-radius: 1%;
    }
    .masthead {
      margin-top: -15%;
    }
  }
  .lead {
    font-size: 1.25rem;
    font-weight: 300;
  }
  
  .bg-theme {
    background-color: #2f2fa1;
  }
  
  .navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    content: '';
    background: no-repeat center center;
    background-size: 100% 100%;
  }
  
  #mainNav .navbar-nav > li.nav-item > a.nav-link.active {
    color: #2f2fa1;
  }
  
  #mainNav .navbar-nav > li.nav-item > a.nav-link:hover {
    color: #2f2fa1;
  }
  
  .container,
  .container-fluid,
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm {
    width: 100%;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    margin-right: auto;
    margin-left: auto;
  }
  
  .bg-contact {
    background: url(../images/contact-bg.jpg) no-repeat center center fixed;
  
  }
  
  
  
  .layerContact {
    background-color: rgba(0, 0, 0, 0.93);
  
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-bottom: 6%;
    padding-top: 6%;
    border-radius: 2%;
  }
  
  
  #portfolio{
    background-color: #000000;
  }
  
  .portfolio .portfolio-item {
    cursor: pointer;
    position: relative;
    display: block;
    max-width:35rem;
    border-radius: 0.5rem;
    overflow: hidden;
  }
  .portfolio .portfolio-item .portfolio-item-caption {
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.2s ease-in-out;
    opacity: 0;
    background-color: rgba(235, 69, 89, 0.9);
  }
  .portfolio .portfolio-item .portfolio-item-caption:hover {
    opacity: 1;
  }
  .portfolio
    .portfolio-item
    .portfolio-item-caption
    .portfolio-item-caption-content {
    font-size: 1.5rem;
  }
  
  .text-portfolioHeading {
    color: #2f2fa1;
  }
  
  .portfolio-modal .close {
    position: absolute;
    z-index: 1;
    right: 1.5rem;
    top: 1rem;
    font-size: 3rem;
    line-height: 3rem;
  
    opacity: 1;
  }
  
  .footer {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: #000000;
    color: #fff;
  }
  
  a {
    color: #2f2fa1;
  }
  
  .copyright {
    background-color: #2f2fa1;
  }