/* color */

     .html {
        background-color:#eeece8;
        color:#405869;
     }
     .primary-background {
         background-color:#eeece8;
     }
     .light-background {
        background-color:#f5f4f1;
     }
     .midtone-background {
        background-color:#c8c4c2;
     }
     .footer-background {
         background-color:#263646;
     }
     
/* type colors */

     .primary-dark, .body-text {
        color:#405869;
     }
    
     .primary-light {
        color:#6cafd0;
     }
    
     .dark-text {
        color:#263646;
     }
    
     .light-text {
        color:#f5f5f5;
     }
    
     .white-text {
        color:#fff;
     }
    
     .dark-red {
        color:#a13a3c;
     }
    
     .dark-green {
        color:#42914e;
     }
    .midtone-border{
        border:1px solid #c8c4c2;
    }
    
/* end color */
 
/* fonts (Adobe font kit) Roboto and Inter Families */
    @font-face {
      font-family: Roboto;
      src: url(/fonts/Roboto.ttf) format('truetype');
    }
    
    @font-face {
      font-family: Inter;
      src: url(/fonts/Inter.ttf) format('truetype');
    }
    
     p, p .text-link {
         font-family:Inter, Roboto, Arial, sans-serif;
         font-size:20px;
     }
     
      h1,h2,h3,h4,h5,h6 {
          font-family:Roboto, Inter, Arial, sans-serif;
          color:#263646;
      }
      
      h1 {
          font-size:3.25rem;
          font-weight:bold;
      }
      
      h2 {
          font-size:2.5rem;
          font-weight:bold;
      }
      
      h3 {
          font-size:2rem;
          font-weight:400;
          color:#405869;
      }
      
      h4 {
          font-size:1.75rem;
          font-weight:bold;
      }
      
      h5 {
          font-size:1.5rem;
          font-weight:bold;
      }
      
      h6 {
          font-size:1.25rem;
          font-weight:bold;
      }
      
    
      
      .contact-data, .contact-data a, .contact-data a:active, .contact-data a:visited, a, a:active, a:visited {
          font-family:Inter, Arial, sans-serif;
          font-size:16px;
          font-weight:400;
          color:#405869;
          text-decoration:none;
      }
    
      .contact-data a:hover {
          color:#6cafd0;
      }
      
      
      .text-link, .text-link:visited, .text-link:active {
          text-decoration:underline;
      }
      
      .text-link:hover {
          color: #6cafd0;
      }
  
/* end fonts */
  
/* lists */

    .list-group-item, .list-group-item-action {
        font-size:20px;
        color:#405869;
        background-color:#f5f4f1;
        border-color:#c8c4c2;
    }
    .list-group-item-action:not(.active):hover {
        color:#6cafd0;
        background-color:#f5f4f1;
    }
    .list-group-item-action:not(.active):active {
        color: #263646;
        background-color:#f5f4f1;
    }

/* end lists */
  
/* forms */
  
    .form-control {
        border-color:#C8C4C2;
    }
    
    .form-control::placeholder {
        color:#c8c4c2;
        font-weight:300;
    }

/* end forms */
  
/* pills */
  
      .nav-pills {
          color:#405869;
      }
    
      .nav-pills .nav-link {
          color:#405869;
          font-size:16px;
          font-weight:300;
          padding:4px 8px;
      }
      
      .nav-pills .nav-link:active, .nav-pills .nav-link.active {
          color:#263646;
          background-color:#fff;
      }
      
      .nav-pills .nav-link:not(.active):hover{
          color:#263646;
          background-color:#F7F5F3;
      }
      
/* end pills */
  
/* buttons */
    
    /* navbar animation */
    .navbar-tolggler, .navbar-toggler:focus, .navbar-toggler:active, .navbar-toggler.collapsed {
        box-shadow: none !important;
        border:0;
        outline: none;
    }
    
    /* hover */
    @media (hover: hover) {
      .navbar-toggler.collapsed:hover .custom-morph-icon .line, .navbar-toggler:hover .custom-morph-icon .line {
        background-color: #6cafd0; 
    }

    /* icon container */
    .custom-morph-icon {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 24px;
      height: 18px;
      position: relative;
      border:0;
    }

    
    .custom-morph-icon .line {
      display: block;
      width: 100%;
      height: 3px;
      background-color: #405869;
      border-radius: 1px;
      transition: transform 0.25s ease-in-out, opacity 0.2s ease-in-out;
    }
    
    .custom-morph-icon, .custom-morph-icon .line {
      pointer-events: none;
    }

    /* revert */
    .navbar-toggler:not(.collapsed) .line-top {
      transform: translateY(8px) rotate(45deg);
    }
    
    .navbar-toggler:not(.collapsed) .line-mid {
      opacity: 0;
    }
    
    .navbar-toggler:not(.collapsed) .line-bot {
      transform: translateY(-8px) rotate(-45deg);
    }
    /* end navbar animation */

    .je-btn, .je-btn:visited {
        background-color:#6cafd0;
        color:#f5f5f5;
    }
    .je-btn:hover, .je-btn:active {
        background-color:#7ccaf0;
        color:#fff;
    }
    
    .btn-outline-dark, .btn-outline-dark:visited {
        border:solid 1px #405869;
        color:405869;
        background-color:transparent;
    }
    
    .btn-outline-dark:hover, .btn-outline-dark:active {
        border:1px solid #6cafd0;
        color:#fff;
        background-color:#6cafd0;
    }
    
    /* navbar buttons */
      .navbar-nav .nav-item .nav-link, .navbar-nav .nav-item .nav-link:visited {
          color:#405869;
          border-radius: 8px;
          padding:8px 12px;
      }
      .navbar-nav .nav-item .nav-link:hover {
          background-color:#f5f4f1;
          color:#263646;
      }
      .navbar-nav .nav-item .nav-link.active, .navbar-nav .nav-item .nav-link:active {
          background-color:#eeece8;
          color:#263646;
      }
/* end buttons */

/* tag */

    .je-tag-light, .je-tag-dark {
        display: block;
        font-size: 14px;
        border-radius: 20px;
        padding: 2px 8px;
        background-color: #eeece8;
        color: #fff;
         
    }

    
    .je-tag-dark {
        background-color: #263646;
        color: #a0a0a0;

    }
/* end tag */
  
/* footer */

      .footerlinks, .footerlinks:active, .footerlinks:visited {
        color: #A8AFB5;  
      }
      .footerlinks:hover {
          color: #fff;
      }
  
/* end footer */
  
/* gallery */

    .gallery-item {
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        border: solid 2px transparent;
        background-color: #fff;
        cursor: pointer;
    }
    
    .gallery-item:hover {
        transform: rotate(-1deg) translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
        border:solid 2px #6cafd0;
    }
    
    .gallery-item .gallery-img {
        width: 100%;
        height: 250px;
        object-fit: cover; /* Prevents stretching by cropping extra edges */
        transition: transform 0.3s ease;
    }
    
    .gallery-item:hover img .gallery-img {
        transform: scale(1.05);
    }

    /* lightbox*/
    #lightboxModal .modal-dialog {
        max-width: 950px; /* Limits maximum width on massive desktop monitors */
    }
    
    #lightboxModal img#modalImage {
        max-height: 85vh; /* Prevents the image from bursting past the vertical viewport screen */
        object-fit: contain;
    }
    
    /* nav arrow */
    .lightbox-nav-btn {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        border: none;
        font-size: 1.5rem;
        padding: 0.5rem 0.8rem;
        border-radius: 50%;
        transition: background 0.2s, transform 0.2s;
        z-index: 10;
    }
    
    .lightbox-nav-btn:hover {
        background: rgba(255, 255, 255, 0.25);
        color: #fff;
        transform: scale(1.1);
    }
    
    .lightbox-nav-btn:active {
        transform: scale(0.95);
    }
    
    /* thumbnails */
    .lightbox-thumb {
        width: 80px;
        height: 55px;
        object-fit: cover;
        cursor: pointer;
        opacity: 0.5;
        transition: opacity 0.2s ease, border-color 0.2s ease;
        border: 2px solid transparent;
    }
    
    .lightbox-thumb:hover, .lightbox-thumb.active {
        opacity: 1;
        border-color: #6cafd0; 
    }
    
/* end gallery */

/* full screen modal */
    #iframeDetailsModal .modal-header {
        background-color:#f5f4f1;
        border:0;
    }
    #iframeDetailsModal .modal-title {
       font-weight:300;
        color:#c8c4c2; 
    }
}