@font-face {
     font-family: "Jura-Regular";
     src: url("../assets/fonts/Jura-Regular.ttf")
 }

 @font-face {
     font-family: "Jura-Bold";
     src: url("../assets/fonts/Jura-Bold.ttf")
 }
/* 
 @font-face {
     font-family: "Jura-Medium";
     src: url("../assets/fonts/Jura-Medium.ttf")
 }

 @font-face {
     font-family: "Jura-SemiBold";
     src: url("../assets/fonts/Jura-SemiBold.ttf")
 }

 @font-face {
     font-family: "Jura-Light";
     src: url("../assets/fonts/Jura-Light.ttf")
 } */

 :root {
     --gap: 0.5px;
     --duration-shrink: .5s;
     --duration-expand: .25s;
     --no-duration: 0s;
 }

 body,
 nav,
 h2,
 h3,
 h1,
 p {
     margin: 0;
 }

 a {
     text-decoration: none;
 }

 a:focus,
 a:hover {
     text-decoration: underline;
 }


 li {
     list-style: none;
 }

 .header {
     display: flex;
     max-width: 100%;
     align-items: center;
     justify-content: space-between;
     padding: 8px 24px 8px 8px;
     flex: 0 0 auto;
     background-color: #002b4d;
 }

 .logo {
     width: auto;
     height: 56px;
     align-self: center;
 }

 .navbar {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 40px;
     padding: 0;
     margin: 0;
 }

 .navbar-item {
     font-family: "Jura-Regular", Helvetica;
     font-weight: 400;
     color: #ffffff;
     font-size: 24px;
     letter-spacing: 0;
     line-height: normal;
     white-space: nowrap;
     text-decoration: none;
 }

 .navbar-item:hover,
 .navbar-item:focus {
     color: #ffffff;
     text-decoration: underline;
 }

 .sidebar {
     height: 100%;
     width: 100%;
     position: absolute;
     top: 0;
     z-index: 1;
     text-align: right;
     padding: 8px 24px 8px 8px;
     background-color: #002B4D;
 }

 .sidebar menu {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 40px;
     margin: 0;
 }


 .animate-right {
     animation: animateright 0.4s
 }

 @keyframes animateright {
     from {
         right: 0;
         opacity: 0;
     }

     to {
         right: 0;
         opacity: 1;
     }
 }

 /* =========================================================================== */

 .hero-banner {
     max-width: 100%;
     height: auto;
     text-align: center;
     background: url("../assets/hero-image.png");
     background-position: center;
     /* Center the image */
     background-repeat: no-repeat;
     /* Do not repeat the image */
     background-size: cover;
     /* Resize the background image to cover the entire container */
 }

 .hero-heading {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding-top: 160px;
     padding-bottom: 160px;
 }

 .hero-banner-supheader {
     color: #002B4D;
     text-align: center;
     font-family: "Jura-Bold", Helvetica;
     font-size: 3.5rem;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
     margin-top: 0px;
     margin-bottom: 0px;
     max-width: 560px;
 }

 .hero-banner-subheader {
     color: #002B4D;
     font-family: "Jura-Bold", Helvetica;
     font-size: 3rem;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
     margin-top: 4px;
     margin-bottom: 0px;
 }

 @media (max-width:576px) {
     .hero-heading {
         padding-top: 40px;
         padding-bottom: 40px;
     }

     .hero-banner-supheader {
         font-size: 1rem;
     }

     .hero-banner-subheader {
         font-size: 1.5rem;
     }

     .logo-big {
         max-width: 80%;
         height: auto;
     }
 }


 /* ========================================================= gallery */

 .gallery-section {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 32px;
     padding: 72px 0px;
 }

 @media (max-width:576px) {
     .gallery-section {
         padding: 48px 0px;
         gap: 24px;
     }
 }

 .section-header {
     /* width: fit-content; */
     margin-top: -1px;
     font-family: "Jura-Regular", Helvetica;
     font-weight: 400;
     color: #002b4d;
     font-size: 34px;
     letter-spacing: 0;
     line-height: normal;
     white-space: nowrap;
 }

 .divider {
     width: 50px;
     height: 2px;
     background-color: #FB2941;
     outline: none;
     border: none;
 }

 .subheader {
     font-family: "Jura-Regular", Helvetica;
     font-weight: 400;
     color: #000000;
     font-size: 18px;
     letter-spacing: 0;
     line-height: normal;
 }

 @media (max-width:576px) {
     .subheader {
         text-align: center;
     }
 }

 .gallery-section .gallery {
     /* display: flex;
    flex-direction: row;
    flex-wrap: wrap; */
     max-width: 1077px;
     /* align-items: flex-start;
    gap: 0px 0px; */

 }

 .gallery-section .gallery-img {
     width: 100%;
     height: auto;
     object-fit: cover;
 }

 .gallery-section ul {
     display: grid;
     grid-template-columns: repeat(1, 1fr);
     grid-gap: var(--gap);
     list-style: none;
     padding: 0;
     justify-items: center;
 }

 @media screen and (min-width: 640px) {
    .gallery-section ul {
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     }
 }

 .gallery-section li {
     transition-property: transform, opacity;
     transition-timing-function: ease-in-out;
     transition-duration: var(--duration-expand);
 }

 .gallery-section li.is-zoomed {
     transition-duration: var(--duration-shrink);
 }

 .gallery-section .is-zoomed li:not(.is-zoomed) {
     opacity: 0.3;
 }

 .gallery-section button {
     all: initial;
     display: flex;
     overflow: hidden;
     cursor: pointer;
     width: fit-content;
     height: auto;
     padding: 0;
     margin: 0;
     border: none;
     outline: none;
 }

 .gallery-section button:focus {
     outline: none;
 }

 .gallery-section li.is-zoomed button,
 .gallery-section ul:not(.is-zoomed) button:focus {
     border: 1px solid #D9D9D9;
 }

 .visually-hidden {
     display: block;
     height: 1px;
     width: 1px;
     overflow: hidden;
     clip: rect(1px 1px 1px 1px);
     clip: rect(1px, 1px, 1px, 1px);
     clip-path: inset(1px);
     white-space: nowrap;
     position: absolute;
 }

 @media (prefers-reduced-motion) {

    .gallery-section li,
    .gallery-section li.is-zoomed {
         transition-duration: var(--no-duration);
     }
 }



 .linkCTA {
     font-family: "Jura-Regular", Helvetica;
     font-weight: 400;
     color: #002b4d;
     font-size: 24px;
     text-align: right;
     letter-spacing: 0;
     line-height: normal;
     /* align-self: flex-end; */
     background-color: #ffffff;
     outline: none;
     border: none;
 }

 .linkCTA:hover,
 .linkCTA:focus {
     text-decoration: underline;
     text-decoration-color: #002b4d;
     -webkit-text-decoration-color: #002b4d;
     /* Safari */
 }

 /*  */
 .service-section {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 32px;
     padding: 72px 0px;
     flex: 0 0 auto;
     background-color: #d9d9d9;
 }

 @media (max-width:576px) {
     .service-section {
         padding: 48px 16px;
         gap: 24px;
     }
 }

 .service-list {
     max-width: 689px;
     font-family: "Jura-Regular", Helvetica;
     font-weight: 400;
     color: #000000;
     font-size: 18px;
     letter-spacing: 0;
     line-height: 26px;
     padding: 0;
 }

 .service-list .list-style-dash{
    color: #FB2941;
    font-weight: 700;
 }
 /* ================================================================= */
 .contact-section {
     display: flex;
     flex-direction: column;
     width: 100%;
     align-items: center;
     justify-content: center;
     gap: 32px;
     padding: 72px 0px;
     flex: 0 0 auto;
 }

 @media (max-width:576px) {
     .contact-section {
         padding: 48px 0px;
         gap: 24px;
     }
 }

 .amaksaki {

     width: 289px;
     height: 234px;
     object-fit: cover;
 }

 .two-column-section {
     display: flex;
     align-items: flex-start;
     gap: 40px;
     flex: 0 0 auto;
 }

 .two-col-section-img {
    max-width: 408px;
}

 @media (max-width:576px) {
     .two-column-section {
         flex-direction: column-reverse;
         padding: 48px 0px;
         gap: 24px;
         padding: 16px;
     }

     .two-col-section-img {
         max-width: 100%;
         align-self: center;
     }
 }

 .contact-section-info {
     display: flex;
     flex-direction: column;
     max-width: 407px;
     align-items: flex-start;
     gap: 24px;
 }

 .contact-section-info-address {
     display: flex;
     flex-direction: row;
     gap: 4px;
 }

 .location-on {
     width: 24px;
     height: 24px;
 }

 .contact-section-info table,
 .contact-section-info a {
     font-family: "Jura-Regular", Helvetica;
     font-weight: 400;
     color: #000000;
     font-size: 18px;
     letter-spacing: 0;
     line-height: normal;
     margin: 0;
 }


 .footer {
     display: flex;
     max-width: 100%;
     align-items: center;
     gap: 10px;
     padding: 18px 16px;
     flex: 0 0 auto;
     background-color: #002b4d;
 }

 .footer-text {
     color: #FFF;
     font-family: "Jura-Regular", Helvetica;
     font-size: 24px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     margin: 0px;
 }

 /*  =/o.o\= media responsiveness */
 /* Small devices (mobile devices, 768px and down) */
 @media (max-width:768px) {
     .hide-small {
         display: none
     }
 }

 /* Medium devices (landscape tablets, 768px and up) */
 @media (max-width:992px) and (min-width: 760px) {
     .hide-medium {
         display: none
     }
 }

 /* Large devices (laptops/desktops, 992px and up) */
 @media (min-width: 992px) {
     .hide-large {
         display: none
     }
 }