body {
            font-family: Arial, sans-serif;
        }
        /* Header */
        header {
            background-color: #343a40;
            color: #fff;
        }
p {
    font-family: 'Open Sans', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6; /* Adjust for readability */
    color: #4F4F4F; /* Soft gray */
}

/* Scoped Navigation Bar Styling */
.navbar-container {
    background-color: #000000; /* Black background */
    padding: 1rem 0;
    border-bottom: 1px solid #444; /* Optional subtle border for separation */
}





header a img {
    max-height: 50px;
    margin-right: 10px; /* Adds spacing if needed */
}
        .nav-link {
            color: #fff;
        }
        /* Hero Section */
.hero-app {
    background: url('images/hero-banner.jpg') no-repeat center center/cover;
    position: relative;
    height: 100vh; /* Full viewport height */
    overflow: hidden;
}

.hero {
    background: url('images/hero-banner.jpg') no-repeat center center/cover;
    position: relative;
    height: 100vh; /* Full viewport height */
}

.hero p {
    color: white; /* Keep text white in the hero section */
    font-size: 18px; /* Optional: slightly larger font */
    line-height: 1.8; /* Optional: more spacing for readability */
}

.gradient-overlay {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.gradient-overlay-app {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95); /* Almost pure black, 95% opacity */
    z-index: 1;
}

.hero .container-app {
    position: relative;
    z-index: 2; /* Container on top of overlay */
}


.hero h1 {
    font-size: 3rem;
    font-weight: bold;
    line-height: 1.4;
    text-align: left;
}

.hero p {
    font-size: 1.25rem;
    text-align: left;
}




.hero .btn-primary {
    background-color: #379EFF;
    border: none;
}

.hero .btn-outline-light {
    color: #fff;
    border-color: #fff;
}

.hero .btn-outline-light:hover {
    background-color: #fff;
    color: #379EFF;
}

        .hero-content {
            background: rgba(0, 0, 0, 0.6);
            padding: 2rem;
            border-radius: 8px;
        }
        /* Features Section */
        .features .feature {
            text-align: center;
            padding: 1.5rem;
        }
        .features img {
            width: 80px;
            height: 80px;
            margin-bottom: 1rem;
        }




        /* Testimonials Section */
        .testimonials .card {
            border: none;
            padding: 1rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        .testimonials img {
            width: 80px;
            height: 80px;
            margin-bottom: 1rem;
            border-radius: 50%;
        }
        /* Footer */
        footer {
            background-color: #343a40;
            color: white;
            padding: 2rem;
            text-align: center;
        }
.testimonials {
    background-color: #f8f9fa; /* Light gray background */
}

.testimonials h2 {
    font-weight: bold;
    font-size: 2rem;
}

.testimonials .card {
    border: none; /* Remove card border */
    border-radius: 12px; /* Slightly rounded corners */
}

.testimonials .card img {
    border: 2px solid #379EFF; /* Blue border around the avatar */
}

.testimonials .text-warning {
    font-size: 1.2rem; /* Larger star rating */
}

.testimonials .btn-primary {
    background-color: #379EFF;
    border: none;
}

.testimonials .btn-primary:hover {
    background-color: #0056b3;
}
.athletes-coaches-progress {
    background-color: #f8f9fa; /* Light background for the section */
}

.athletes-coaches-progress h2 {
    font-weight: bold;
    font-size: 2rem;
    line-height: 1.4;
}

.athletes-coaches-progress p {
    font-size: 1.1rem;
    line-height: 1.6;
}

.athletes-coaches-progress .btn-primary {
    background-color: #379EFF;
    border: none;
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
}

.athletes-coaches-progress .btn-primary:hover {
    background-color: #0056b3;
}

.athletes-coaches-progress img {
    max-width: 100%;
    margin-bottom: 20px;
}

.syncs-with img {
    max-width: 150px;
    margin: 0 auto;
    display: block;
}


/* Section Styling */
/* Section Styling */
.make-every-rep {
    background-color: #ffffff; /* White background for the section */
    padding: 3rem 1rem; /* Section padding */
}

/* Blue Box Styling */
.blue-box {
    background-color: #379EFF; /* Blue background */
    color: white; /* White text */
    border-radius: 16px; /* Rounded corners */
    padding: 2rem; /* Inner padding */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.blue-box h2 {
    font-size: 2rem; /* Heading size */
    font-weight: bold;
    line-height: 1.4;
}

.blue-box p {
    font-size: 1.2rem; /* Paragraph size */
    line-height: 1.6;
}

.blue-box .btn-light {
    background-color: #ffffff; /* White button background */
    color: #379EFF; /* Blue text */
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px; /* Rounded button corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Slight shadow */
}

.blue-box .btn-light:hover {
    background-color: #e6e6e6; /* Slightly darker button on hover */
    color: #379EFF; /* Keep text blue */
}

/* Image Styling */
.phone-front {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 40%; /* Adjust size */
    z-index: 2; /* Ensure it is above the back phone */
}

.phone-back {
    position: absolute;
    top: 30%;
    left: 35%;
    transform: translate(-50%, -50%);
    max-width: 40%; /* Adjust size */
    z-index: 1; /* Place it behind the front phone */
    opacity: 0.8; /* Slight transparency for depth */
}

/* Circle Background */
.circle-bg {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%; /* Larger than phones */
    height: 200%;
    background: radial-gradient(circle, #e6f3ff 20%, transparent 60%);
    border-radius: 50%;
    z-index: 0; /* Place it at the very back */
}



.training-partner img {
    max-width: 40%; /* Reduce size to 80% of the column width */
    height: auto;   /* Maintain aspect ratio */
    margin-top: 20px; /* Optional: Add spacing above */
}

/* General Section Styling */
.training-partner {
    background-color: #ffffff; /* White background */
    font-family: 'Open Sans', Arial, sans-serif; /* Keep font consistent */
}

/* Heading Styling */
.training-partner h2 {
    font-weight: bold;
    font-size: 2rem;
    color: #000; /* Black heading */
}



/* List Group Styling */
.list-group-item {
    border: none; /* Remove borders */
    background-color: #f8f9fa; /* Light background */
    font-size: 16px;
    padding: 1rem;
    margin-bottom: 10px;
    border-radius: 8px; /* Slightly rounded corners */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Active Item Styling */
.list-group-item.active {
    background-color: #379EFF; /* Blue active background */
    color: white;
    border: none;
}

/* List Group Hover Effect */
.list-group-item:hover {
    background-color: #e9ecef; /* Light hover effect */
}

/* Image Styling */
.fixed-width {
    max-width: 95%; /* Ensure consistent width */
    height: auto; /* Maintain aspect ratio */
    margin-top: 10px;
}

       
        .faq-section {
            background: #f8f9fa;
            padding: 4rem 2rem;
        }
        footer {
            background: #343a40;
            color: #fff;
            padding: 2rem 0;
            text-align: center;
        }
        footer a {
            color: #17a2b8;
        }


/* Plan Types */
.plan-box {
    background-color: #f8f9fa; /* Light background */
    border: 1px solid #ddd; /* Border for definition */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    padding: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.plan-box h3 {
    font-size: 1.2rem;
    font-weight: bold;
    color: #000; /* Dark text */
}

.plan-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

/* Coming Soon Section */
.coming-soon {
    background-color: #ffffff;
    padding: 3rem 1rem;
}

.coming-soon h2 {
    font-size: 2rem;
    font-weight: bold;
}