/* General Body & Root Styles */
body {
    margin: 0;
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    background-color: #f8f9fa; /* Lighter background for overall appeal */
    color: #343a40; /* Darker text for readability */
    scroll-behavior: smooth; /* Smooth scrolling for anchor links */
}

/* Helper Class for Sections */
section {
    padding: 100px 0; /* Generous padding for all sections */
    position: relative;
    overflow: hidden; /* Clear floats and contain content */
}

section:nth-of-type(even) {
    background-color: #eaf6ff; /* Light blue tint for alternate sections */
}

h2 {
    color: #0077b6; /* Primary brand color for headings */
    font-weight: 700; /* Bold headings */
    margin-bottom: 50px; /* Space below headings */
    text-align: center;
    font-size: 2.5rem; /* Larger heading for impact */
}

/* --- NAVBAR STYLES --- */
.navbar-wrapper {
    position: sticky;
    top: 0;
    z-index: 1000; /* Ensure navbar is always on top */
    background: rgba(255, 255, 255, 0.1); /* Slightly transparent background */
    backdrop-filter: blur(12px); /* Glassmorphism effect */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Subtle shadow */
}

.glass-navbar {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    border-radius: 20px; /* Rounded corners for the navbar itself */
    padding: 8px 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
    font-weight: bold;
    font-size: 1.75rem; /* Larger brand text */
    color: #0077b6 !important;
    display: flex;
    align-items: center;
}

.navbar-brand img {
    height: 35px; /* Slightly larger logo */
    margin-right: 10px;
}

.nav-link {
    color: #003f5c !important; /* Darker blue for links */
    font-weight: 500;
    margin-left: 15px; /* More space between links */
    transition: all 0.3s ease; /* Smooth hover transition */
    position: relative; /* For underline effect */
}

.nav-link:hover {
    color: #0077b6 !important;
    transform: translateY(-2px); /* Slight lift on hover */
}

/* Underline effect on hover */
.nav-link::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    background-color: #0077b6;
    left: 0;
    bottom: -5px;
    transition: all 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.navbar-toggler {
    border: none; /* No border for the toggler */
    padding: 0; /* Remove default padding */
}

.navbar-toggler:focus {
    box-shadow: none; /* Remove focus outline */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%280, 119, 182, 0.8%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* --- HERO SECTION --- */
.hero-section {
    margin-top: -350px; /* Pull content up under navbar more */
    background: linear-gradient(135deg, #e0f7fa 0%, #ffffff 100%); /* Soft gradient */
    padding-top: 280px; /* More space above content */
    padding-bottom: 120px;
    border-bottom-left-radius: 50px; /* More pronounced border radius */
    border-bottom-right-radius: 50px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Stronger shadow */
    position: relative;
    z-index: 1; /* Ensure hero section is behind the navbar-wrapper */
}

.hero-img {
    max-height: 480px; /* Taller image */
    border-radius: 40px; /* More rounded image */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); /* Prominent shadow for image */
    animation: floatImage 3s ease-in-out infinite; /* Floating animation */
}

@keyframes floatImage {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}

.hero-section .btn {
    font-size: 1.1rem;
    padding: 12px 30px;
}

/* --- ABOUT US SECTION --- */
.about-section {
    background-color: #ffffff;
    padding: 80px 0;
}

.about-section img {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* --- FEATURES SECTION --- */
.features-section {
    background-color: #f8f9fa; /* Light background for contrast */
}

.feature-card {
    background: #fff;
    border-radius: 20px; /* More rounded cards */
    padding: 35px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: all 0.4s ease; /* Slower, smoother transition */
    height: 100%;
    display: flex; /* Flexbox for internal alignment */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(0, 119, 182, 0.1); /* Subtle border */
}

.feature-card:hover {
    transform: translateY(-15px) scale(1.02); /* More pronounced lift and slight scale */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
    background-color: #e6f7ff; /* Light blue background on hover */
}

.feature-icon {
    font-size: 3.5rem; /* Larger icons */
    color: #0077b6;
    margin-bottom: 25px;
    transition: transform 0.4s ease, color 0.4s ease;
}

.feature-card:hover .feature-icon {
    transform: rotateY(360deg) scale(1.1); /* Spin and scale effect */
    color: #005682; /* Darker color on hover */
}

.feature-card h3 {
    color: #005682;
    font-weight: 600;
    margin-bottom: 15px;
}

.feature-card p {
    color: #6c757d;
    font-size: 0.95rem;
}

/* --- HOW IT WORKS SECTION --- */
.how-it-works-section {
    background-color: #eaf6ff;
}

.step-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: all 0.4s ease;
    height: 100%;
    border: 1px solid rgba(0, 119, 182, 0.1);
}

.step-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.step-icon {
    font-size: 4rem; /* Larger icons for steps */
    color: #0077b6;
    margin-bottom: 25px;
    animation: bounceIcon 2s infinite ease-in-out; /* Subtle bounce animation */
}

@keyframes bounceIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.step-card h4 {
    color: #005682;
    font-weight: 700;
    margin-bottom: 15px;
}

.step-card p {
    color: #6c757d;
}

/* --- APP MOCKUPS SECTION --- */
.mockups-section {
    background-color: #ffffff;
}

.carousel-img {
    max-height: 600px; /* Adjust as needed */
    width: auto; /* Maintain aspect ratio */
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    margin: 0 auto; /* Center the images */
}

.carousel-indicators [data-bs-target] {
    background-color: #0077b6; /* Primary color for indicators */
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 6px;
    border: none; /* Remove default border */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-image: none; /* Remove default Bootstrap icons */
}

.carousel-control-prev, .carousel-control-next {
    width: 5%; /* Make controls smaller */
    opacity: 0.8; /* Slightly visible always */
    transition: opacity 0.3s ease;
}

.carousel-control-prev:hover, .carousel-control-next:hover {
    opacity: 1;
}

.carousel-control-prev::before,
.carousel-control-next::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 2.5rem;
    color: #0077b6;
}

.carousel-control-prev::before {
    content: "\f053"; /* fa-chevron-circle-left */
}

.carousel-control-next::before {
    content: "\f054"; /* fa-chevron-circle-right */
}


/* --- DOWNLOAD APP SECTION --- */
.download-section {
    background: linear-gradient(90deg, #0077b6 0%, #00b4d8 100%); /* Vibrant gradient */
    padding: 100px 0;
    text-align: center;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 1;
}

.download-btn {
    background-color: #fff;
    color: #0077b6;
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 1.3rem;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.4s ease;
    display: inline-flex;
    align-items: center;
    margin: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.download-btn:hover {
    background-color: #e0f7fa;
    color: #005682;
    transform: translateY(-8px) scale(1.03); /* Lift and slight scale */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
}

.download-btn i {
    margin-right: 12px;
    font-size: 1.5rem;
}

/* --- CONTACT US SECTION --- */
.contact-section {
    background-color: #f8f9fa;
    padding-bottom: 80px;
}

.contact-info .col-md-6 {
    padding: 30px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.contact-info .col-md-6:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.contact-info a {
    font-weight: 500;
}

/* --- FOOTER --- */
.footer {
    background-color: #003f5c; /* Darker blue for footer */
    color: #e0f7fa;
    padding: 30px 0;
    font-size: 0.9rem;
}

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

.footer a:hover {
    color: #00b4d8;
}

/* --- RESPONSIVENESS --- */
@media (max-width: 992px) {
    .navbar-brand {
        font-size: 1.5rem;
    }
    .hero-section {
        padding-top: 150px;
        padding-bottom: 80px;
    }
    .hero-img {
        max-height: 400px;
    }
    h2 {
        font-size: 2rem;
    }
    section {
        padding: 80px 0;
    }
}

@media (max-width: 768px) {
    .navbar-toggler {
        margin-left: auto; /* Push toggler to right */
    }
    .hero-section {
        padding-top: 120px;
        padding-bottom: 60px;
    }
    .hero-img {
        max-height: 350px;
        margin-top: 50px; /* Space between text and image */
    }
    .hero-section .d-flex {
        justify-content: center !important; /* Center buttons on mobile */
    }
    h1 {
        font-size: 2.2rem;
        text-align: center !important;
    }
    .lead {
        text-align: center;
    }
    h2 {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }
    section {
        padding: 60px 0;
    }
    .feature-card, .step-card {
        padding: 25px;
    }
    .feature-icon, .step-icon {
        font-size: 3rem;
        margin-bottom: 20px;
    }
    .download-btn {
        font-size: 1.1rem;
        padding: 12px 30px;
    }
    .carousel-img {
        max-height: 500px;
    }
}

@media (max-width: 576px) {
    .hero-section {
        padding-top: 100px;
    }
    .hero-img {
        max-height: 300px;
    }
    h1 {
        font-size: 1.8rem;
    }
    .lead {
        font-size: 1rem;
    }
    .navbar-brand {
        font-size: 1.2rem;
    }
    .navbar-brand img {
        height: 25px;
    }
    .download-btn {
        font-size: 1rem;
        padding: 10px 25px;
        flex-direction: column; /* Stack buttons vertically */
    }
    .download-btn i {
        margin-right: 0;
        margin-bottom: 5px;
    }
    .carousel-img {
        max-height: 400px;
        width: 80%; /* Smaller width on very small screens */
    }
    .contact-info .col-md-6 {
        margin-bottom: 20px; /* Add space between stacked contact cards */
    }
}

.contact-section {
    background-color: var(--white-color);
}

.contact-form {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.contact-info {
    margin-bottom: 40px;
    font-size: 1.1rem;
    color: var(--gray-dark);
}

.contact-info p {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}



.contact-info i {
    color: var(--red-color);
    font-size: 1.4rem;
}

.contact-info a:hover {
    text-decoration: underline;
}
.contact-info a {
    color: var(--red-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-form input,
.contact-form textarea {
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.contact-form .send-message-btn:hover {
    background-color: var(--black-color);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.contact-form .send-message-btn {
    background-color: var(--blue-color);
    color: var(--blue-color);
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 15px 30px;
}
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--blue-color);
    box-shadow: #0077b6;;
    outline: none;
}