:root {
     --main-color: #223F5D;
 }
.navbar li.nav-item{
    font-weight: 500;
}
  .btn-navbar-outline {
     height: 40px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 0;
     background-color: transparent;
     border: 1px solid var(--main-color);
     color: var(--main-color);
     padding: 0 1rem;
     font-weight: 500;
     transition: all 0.3s ease;
 }
  .btn-navbar-outline:hover {
     background-color: var(--main-color);
     color: white;
     border: 1px solid var(--main-color);
 }



 .hero {
     min-height: 676px;
     background: url('../images/luxury-big-yacht-stay-sea-around-island-back11ground-sky.jpg') center/cover no-repeat;
     color: white;
     position: relative;
     isolation: isolate;
     /* Creates new stacking context */
 }

 .hero-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg,
             rgba(40, 78, 107, 0.55) 0%,
             rgba(40, 78, 107, 0.0) 70%,
             transparent 100%);
     z-index: -1;
 }

 .hero-content {
     position: absolute;
     top: 45%;
     /* transform: translateY(-50%); */
     width: 100%;
 }

 .hero .section-heading {
     color: white;
 }

 .btn-hero {
     height: 60px;
     display: inline-flex;
     /* For better alignment of content */
     align-items: center;
     justify-content: center;
     /* Center text horizontally */
     border-radius: 0;
     background-color: var(--main-color);
     border: 1px solid var(--main-color);
     color: white;
     /* Assuming you want white text */
     padding: 0 2rem;
     /* Horizontal padding */
     font-weight: 500;
     /* Medium weight for better visibility */
     text-decoration: none;
     /* Remove underline if applied to <a> tags */
     transition: all 0.3s ease;
     /* Smooth transition for hover effects */
 }

 .btn-hero:hover {
     background-color: var(--main-color);
     /* Same as normal state */
     border-color: var(--main-color);
     /* Same as normal state */
     opacity: 0.9;
     /* Slight fade effect on hover */
     /* Alternative hover effect options: */
     /* box-shadow: 0 0 10px rgba(0,0,0,0.2); */
     /* transform: translateY(-1px); */
 }

 /* If this is for the outline button variant */
 .btn-hero-outline {
     height: 60px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 0;
     background-color: transparent;
     border: 1px solid white;
     color: white;
     padding: 0 2rem;
     font-weight: 500;
     transition: all 0.3s ease;
 }

 .btn-hero-outline:hover {
     background-color: var(--main-color);
     color: white;
     border: 1px solid var(--main-color);
 }

 @media (max-width: 768px) {
     .hero {
         height: auto;
         padding: 100px 0;
     }

     .hero-overlay {
         background: linear-gradient(180deg,
                 rgba(40, 78, 107, 0.70) 0%,
                 rgba(40, 78, 107, 0.0) 100%);
         /* Full overlay on mobile */
     }

     .hero-content {
         position: static;
         top: auto;
         transform: none;
         padding-top: 0;
     }
 }

 a {
     text-decoration: none;
 }

 a.email {
     color: #212529;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: 'Libre Baskerville', serif;
     color: var(--main-color);
 }

 p {
     font-family: 'Inter', sans-serif;
 }

 .text-grey {
     color: #777F88;
 }

 .overlay-text {
     background: rgba(0, 0, 0, 0.4);
     color: white;
     padding: 2rem;
 }

 .section-dark {
     background-color: #133c55;
     color: white;
 }

 footer {
     background-color: #0b2c44;
     color: white;
 }

 .section-dark {
     background-color: var(--main-color);
 }

 .section-dark h1,
 .section-dark h2,
 .section-dark h3,
 .section-dark h4,
 .section-dark h5,
 .section-dark h6 {
     color: white;
 }

 .section-heading {
     font-size: 48px;
     font-weight: bold;
 }

 .section-sub-heading {
     font-size: 32px;
 }

 .section-what-we-offer h2 {
     color: var(--main-color);
 }

 .section-what-we-offer h1,
 .section-what-we-offer h3,
 .section-what-we-offer h4,
 .section-what-we-offer h5,
 .section-what-we-offer h6 {
     color: white !important;
 }

 .section-guided-purpose .section-box {
     background-color: var(--main-color);
 }



 .section-guided-purpose h2,
 .section-guided-purpose h5,
 .section-guided-purpose p {
     color: white;
 }

 .section-footer h6 {
     color: white;
     font-size: 24px;
 }

 .section-footer ul li {
     margin-bottom: 13px;
 }

 .section-footer .footer-email {
     display: inline-block;
     margin-top: 13px;
     margin-bottom: 13px;
 }
 .justify{
    text-align: justify;
 }

 @media (max-width: 768px) {
     .w-80 {
         width: 100% !important;
     }
 }