/* General Styles */
* {
    font-family: 'Open Sans', sans-serif;
}

.img-bg-right {
    position: absolute;
    right: 0;
    z-index: 1;
    top: 0;
    width: auto;
    height: 100%;
}



.bg-main-green {
    background: #81b71a;
    background-size: cover;
    width: 100%;
    height: 100%;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.bg-main-hero {
    background: url('./assets/knee-bk.jpg') no-repeat right center;
    background-size: contain;
    width: 100%;
    position: relative;
    z-index: 2;
    /* This ensures the background image is in front of the sub-heading */
}

.sub-heading-bg {
    background-color: rgba(255, 255, 255, 0.4);
    position: relative;
    z-index: 1;
    /* This keeps the white background behind the image */
}

.header-title {
    z-index: 3;
    /* Ensures the content is in front of both background and sub-heading */
    position: relative;

}

.title-bg a { 
    display: inline-block; 
    transition: transform 0.2s; 
}

.title-bg a:hover { 
    animation: bounce 0.5s; 
}

@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { 
        transform: translateY(0); 
    } 
    40% { 
        transform: translateY(-10px); 
    } 
    60% { 
        transform: translateY(-5px); 
    }
}


/* Header Title */
.header-title h1 {
    font-weight: 800;
    font-family: var(--font-alegreya);
    font-size: 60px;
    color: #252525;
    text-shadow: 1px 1px 0px rgba(255,255,255,0.5);
    /* Adds a subtle shadow */
}

.header-title h3 {
    font-weight: 600;
    font-family: var(--font-alegreya);
    font-size: 25px;
    padding-top: 15px;
    padding-bottom: 8px;
}

.header-title h4 {
    font-weight: 600;
    font-family: var(--font-alegreya);
    font-size: 24px;
}


/* Sub Header and Paragraphs */
.sub-header-title p {
    font-size: 20px;
}

p {
    font-size: 20px;
}

li {
    font-size: 18px;
}

/* Title Background */
.title-bg {
    background: #81b71a;
}

.title-bg-2 {
    background: #81b71a;
}


/* Borders and Icons */
.content-border {
    border: 1px solid #f1f3f5;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
}

.square-check-icon {
    color: #81b71a;
}

.highlighter {
    background: #81b71a;
}

/* Title Line Height */
.title-line-height {
    line-height: 1.5;
}

/* Content Background */
.bg-content {
    background: #e2eeca;
}

/* Beating Knee Pain Section */
.bg-beating-knee-pain {
    background: url('assets/discover.png') no-repeat right center;
    background-size: contain;
    position: relative;
    /* Needed for the overlay to position correctly */
}

.bg-beating-knee-pain::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
    z-index: 1;
    /* Ensure the overlay is above the background image */
}

.bg-beating-knee-pain>* {
    position: relative;
    /* Ensure content on top of the overlay */
    z-index: 2;
    /* Place content above the overlay */
}

/* Discover Backgrounds */
.discover-bg {
    background: #81b71a;
    color: #ffffff;
    font-weight: 800;
    padding: 5px;
}

.discover-bg-bone {
    background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), url('assets/bone.png') no-repeat right center;
    background-size: contain;
    padding: 10px;
    position: relative;
}


/* Image Banners and Profiles */
.img-content-banner {
    width: 65%;
    height: auto;
}

.img-profile-picture {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    /* Ensures a perfect circle */
}

/* Responsive Design */
@media (max-width: 768px) {
    .img-content-banner {
        width: 100%;
    }
}

@media (max-width: 600px) {

    .discover-bg-bone {
        background-size: cover;
    }

    .bg-YourGoalsToday {
        background-size: contain !important;
    }



    .header-title h1 {
        font-size: 5vw;
    }

    .header-title h1 {
        font-size: 5vw;
    }

    h1 {
        font-size: 5vw;
    }

    .header-title h3 {
        font-size: 4vw;
    }

    h3 {
        font-size: 4vw;
    }

    .header-title h4 {
        font-size: 3vw;
    }

    h4 {
        font-size: 3vw;
    }



    p,
    li,
    span {
        font-size: 3.5vw;
    }

    .testimony p {
        font-size: 3vw !important;
    }

}


.container,
.container-lg,
.container-md,
.container-sm {
    max-width: 1000px !important;
}

.testimony p {
    font-size: 17px;
}


.text-success {
    color: #81b71a !important;
}



/* Beating Knee Pain Section */
.bg-YourGoalsToday {
    background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url('assets/Dear Reader 6.png') no-repeat top right;
    background-size: contain;
    position: relative;
    /* Needed for the overlay to position correctly */
}


.expect-from-the-call-bg {
    background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), url('assets/call-doctor.png');
    background-position: center center;
    background-repeat: no-repeat;
}

.card-header {
    background-color: #f8f9fa;
    /* Light background for the header */
    padding: 0.75rem 1.25rem;
    /* Adjust padding as needed */
}

.btn-link {
    color: #000;
    /* Black text color */
    font-size: 16px;
    /* Adjust font size as needed */
    font-weight: normal;
    /* Remove bold styling */
    text-decoration: none;
    /* Remove underline */
    display: block;
    /* Make button take full width */
    width: 100%;
    /* Ensure button takes full width of the header */
    text-align: left;
    /* Align text to the left */
    padding: 0.375rem 0;
    /* Adjust padding inside button */
}

.btn-link:hover {
    color: #000;
    /* Black text color on hover */
    text-decoration: none;
    /* Ensure no underline on hover */
}

.img-border-design {
    border-radius: 20px;
    border: 5px solid #fff;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
}

.main-bg {
    background: url('assets/knee-bk.png');
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 2;
    height: auto;
}

.offer-header-blue {
    color: #1155CC!important;
}