/* ===== COLOR SCHEME - PROFESSIONAL SALT/OCEAN THEME ===== */
:root {
    --primary-navy: #1a4d6d;
    --primary-ocean: #007fa3;
    --accent-sand: #f5e6d3;
    --accent-gray: #2c3e50;
    --text-dark: #1a1a1a;
    --text-light: #ffffff;
    --border-light: #e0e0e0;
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ===== GENERAL STYLING ===== */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-dark);
    background: #f8f9fa;
    line-height: 1.6;
}

a {
    color: var(--primary-ocean);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-navy);
    text-decoration: underline;
}

/* ===== BUTTONS ===== */
.btn {
    transition: all 0.3s ease;
    border-radius: 6px;
    font-weight: 500;
}

.btn-primary {
    background-color: var(--primary-ocean);
    border-color: var(--primary-ocean);
    color: var(--text-light);
}

.btn-primary:hover {
    background-color: var(--primary-navy);
    border-color: var(--primary-navy);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.btn-secondary {
    background-color: var(--accent-gray);
    border-color: var(--accent-gray);
    color: var(--text-light);
}

.btn-secondary:hover {
    background-color: var(--primary-navy);
    border-color: var(--primary-navy);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

/* ===== NAVBAR ===== */
.navbar {
    background-color: var(--text-light) !important;
    box-shadow: var(--shadow-light);
}

.navbar-brand {
    font-weight: bold;
    color: var(--primary-navy) !important;
}

.nav-link {
    color: var(--text-dark) !important;
    margin-left: 1rem;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--primary-ocean) !important;
}

/* ===== CAROUSEL ===== */
     /* position: relative;
     width: 100vw;
     height: 65vh;
 } */

 .carousel-track-container {
     overflow: hidden;
     height: 100%;
     width: 100%;

 }

 .carousel-track {
     display: flex;
     transition: transform 0.5s ease;
     height: 100%;
 }

 .slide {
     min-width: 100%;
     height: 100%;
 }

 .slide img {
     width: 100%;
     /* display: block; */
     height: 100%;
     object-fit: cover;
 }

 .nav {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(26, 77, 109, 0.8);
     color: white;
     border: none;
     padding: 10px 15px;
     cursor: pointer;
     z-index: 10;
     border-radius: 4px;
     transition: all 0.3s ease;
 }

 .nav:hover {
     background: rgba(26, 77, 109, 1);
     transform: translateY(-50%) scale(1.1);
 }

 .prev {
     left: 10px;
 }

 .next {
     right: 10px;
 }

 /* ===== VISION SECTION ===== */
 .vision {
     width: 100vw;
     height: fit-content;
     padding: 3rem 1rem;
     text-align: center;
     background: linear-gradient(135deg, rgba(245, 230, 211, 0.3) 0%, rgba(0, 127, 163, 0.05) 100%);
 }

 .vision h1 {
     color: var(--primary-navy);
     font-size: 2.5rem;
     font-weight: 700;
     margin-bottom: 1rem;
 }

 .vision h2 {
     color: var(--accent-gray);
     font-size: 1.3rem;
     font-weight: 400;
     line-height: 1.8;
 }

 /* ===== STEPS SECTION (Why/What/How Cards) ===== */
 .steps {
     display: flex;
     flex-direction: column;
     gap: 2rem;
     padding: 2rem;
     background: #ffffff;
 }

 .steps .card {
     width: 100%;
     padding: 2rem;
     background: white;
     box-shadow: var(--shadow-light);
     border-radius: 8px;
     border-left: 4px solid var(--primary-ocean);
     display: flex;
     flex-direction: row;
     justify-content: start;
     transition: all 0.3s ease;
 }

 .steps .card:hover {
     box-shadow: var(--shadow-medium);
     transform: translateY(-4px);
     border-left-color: var(--primary-navy);
 }

 .steps .card-body {
     display: flex;
     flex-direction: row;
     width: 100%;
     gap: 2rem;
     align-items: flex-start;
 }

 .why_img {
     width: 40%;
     flex-shrink: 0;
 }

 .why_img img {
     width: 100%;
     border-radius: 6px;
     box-shadow: var(--shadow-light);
 }

 .why_text {
     display: flex;
     width: 60%;
     flex-direction: column;
     justify-content: start;
     gap: 1.5rem;
 }

 .why_text h2 {
     color: var(--primary-navy);
     font-size: 1.8rem;
     margin: 0;
 }

 .why_text .card-text {
     color: var(--text-dark);
     line-height: 1.8;
 }

 .why_text .card-text p {
     margin: 0;
 }

 .why_text .btn {
     align-self: flex-start;
 }

 /* ===== FOOTER ===== */
 footer {
     background-color: var(--primary-navy);
     color: var(--text-light);
     padding: 2rem 1rem;
 }

 footer.footer-content {
     margin-top: auto;
 }

 footer h5 {
     font-weight: 600;
     margin-bottom: 1rem;
 }

 footer p, footer a {
     color: var(--text-light);
     font-size: 0.95rem;
 }

 footer a {
     text-decoration: none;
     transition: color 0.3s ease;
 }

 footer a:hover {
     color: var(--accent-sand);
     text-decoration: underline;
 }

 footer ul li {
     margin-bottom: 0.5rem;
 }

 footer .text-accent {
     color: var(--accent-sand) !important;
 }

 footer .social-links {
     margin-top: 1rem;
 }

 footer .border-light {
     border-color: rgba(255, 255, 255, 0.2) !important;
 }

 /* ===== RESPONSIVE DESIGN ===== */
 @media (max-width: 768px) {
     .steps .card-body {
         flex-direction: column;
         gap: 1rem;
     }

     .why_img {
         width: 100%;
     }

     .why_text {
         width: 100%;
     }

     .vision h1 {
         font-size: 1.8rem;
     }

     .vision h2 {
         font-size: 1rem;
     }

     .carousel {
         height: 40vh;
     }
 }

 /* ===== UTILITY CLASSES ===== */
 .text-primary {
     color: var(--primary-navy) !important;
 }

 .text-accent {
     color: var(--primary-ocean) !important;
 }

 .bg-light-sand {
     background-color: var(--accent-sand) !important;
 }

 .vrb {
     border-left: 1px solid #ccc;
     height: 100%;
     margin: 0 20px;
 }