html, body {
    width: 100%;
    overflow-x: hidden;
    max-width: 100%;
}

body * {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

div, section, article {
    overflow: hidden; 
}

#truths, .container, .truth {
    width: 100%;  
    padding: 0 15px;  
    margin: 0 auto;  
    box-sizing: border-box;  
}

@media (max-width: 768px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}



.container {
    padding-left: 15px; /* or a suitable padding value */
    padding-right: 15px; /* or a suitable padding value */
}


@media (max-width: 600px) {
    .container {
        width: 100%;
        position: relative;
        left: 0;
        transform: none;
    }
}
.fixed-element {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: auto; /* or set a max-width */
}


/* Reset the navbar styling */
.navbar {
    background-color: #000 !important; /* Ensures the navbar is definitely black */
    position: fixed; /* Make the navbar fixed to the top */
    width: 100%; /* Ensure it spans the full width */
    top: 0; /* Start at the top */
    transition: top 0.3s; /* Smooth transition for moving up and down */
}


.navbar-light .navbar-nav .nav-link {
    color: white; /* Ensures text in the navbar is white */
}

.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
    color: #05aaf2; /* Changes text color to blue on hover/focus */
}
.navbar-light .navbar-toggler:focus {
    outline: none !important; /* Removes default focus outline */
    box-shadow: 0 0 0 2px rgb(5, 170, 242) !important; /* Custom focus outline color (blue) with !important to ensure application */
}


.navbar-toggler {
    border-color: rgba(153, 109, 109, 0.1); /* Lightens the border color slightly for visibility */
}

.navbar-light .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='rgb(5, 170, 242)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}


/* Override Bootstrap's button styling for consistency */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    background-color: #05aaf2; /* Sets the background of the entire page to black */
    color: white; /* Sets the default text color to white for contrast */
}

/* Button Styling */
button {
    background-color: #05aaf2; /* Clear background */
    color: white; /* White text */
    border: 2px solid white; /* White border */
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.2s;
    cursor: pointer;
    outline: none;
}

button:hover, button:focus {
    background-color: white; /* White background on hover */
    color: black; /* Black text on hover */
    border-color:  #05aaf2; /* Dark blue border on hover */
    transform: scale(1.05);
}

/* Ensure the header fills the screen */
.header-content {
    background-color: #000; /* Black background */
    background-image: none; /* Remove or adjust if there's an existing image */
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
}

/* Use Bootstrap's container for consistent padding and flexbox */
.testimonial {
    margin-top: 20px;
    background: #fff;
    padding: 20px;
    border-radius: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Adjustments for responsive settings */
@media (max-width: 576px) { /* Bootstrap's small breakpoint */
    .header-content h1 {
        font-size: 24px; /* Smaller font size for small devices */
    }
    .header-content p {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    nav ul {
        flex-direction: column; /* Stack nav items vertically on smaller screens */
    }
}

/* Navbar customizations */
nav {
    background-color: #fff; /* White background for the navbar */
}

nav a {
    color: #808080; /* Grey text for links */
    text-decoration: none;
    font-size: 18px;
    padding: 8px 12px; /* Padding for better click area */
    transition: color 0.3s ease; /* Smooth transition for color change */
}

nav a:hover, nav a:focus {
    color: #05aaf2; /* Light blue on hover, standard Bootstrap primary blue */
}


.navbar-brand img {
    height: 50px; /* Adjust size as needed */
}

/* Ensure logo and nav items are vertically centered */
.navbar-brand, .navbar-nav li a {
    display: flex;
    align-items: center;
}

.header-content {
    background: url('header-bg.jpg') no-repeat center center / cover;
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
}

.header-about {
    
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
}
 
.header-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Dark overlay */
    z-index: 1;
}

.header-content h1, .header-content p, .header-content button {
    position: relative;
    z-index: 2;
}
#truths {
    background-color: #05aaf2; /* Black background for the section */
    color: #000000; /* White text for readability */
    padding: 40px 0; /* Padding for the section */
}

#truths p {
    color: #fff; /* White text for headings and introductory paragraph */
}
h2{
    font-weight: bold; /* Makes the heading bold */
    font-size: 34px;
    color:#101010;
}

.truth {
    background-color: #f4bbbb; /* White background for each content block */
    color: #101010; /* Black text for content inside the white blocks */
    padding: 20px;
    margin: 10px;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

.truth-icon {
    width: 50px; /* Size of the icons */
    margin-bottom: 10px;
}

.truth h3 {
    font-weight: bold; /* Makes the heading bold */
    font-size: 24px; /* Increases the font size to make it slightly larger */
}


@media (max-width: 768px) {
    .truth {
        margin-bottom: 20px;
    }
}

p1 {
    color: #101010 !important; /* Sets paragraph text color to black */
}
.about-heading {
    font-weight: bold; /* Makes the heading bold */
    font-size: 34px; /* Sets a larger font size for the heading */
    color: #101010; /* Optional: Set a specific color for the heading if needed */
    margin-bottom: 20px; /* Adds spacing below the heading */
}

.about-text {
    font-size: 18px; /* Slightly larger font size for readability */
    color: #ffffff; /* Darker text color for contrast */
    margin-bottom: 10px; /* Adds spacing between paragraphs */
}
.truth h3 {
    font-weight: bold;
    font-size: 24px;
}
.header-content {
    background: url('header-bg.jpg') no-repeat center center / cover;
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
}
.header-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Dark overlay */
    z-index: 1;
}
.header-content h1, .header-content p, .header-content button {
    position: relative;
    z-index: 2;
}
.testimonial {
    margin-top: 15px;
    background: #a2e8a2;
    padding: 10px;
    border-radius: 1rem;
    
}
.testimonial p {
    color: black;
}
#testimonials {
    background-color: rgb(255, 255, 255); 
}
#successStory {
    background-color: rgb(0, 0, 0); 
    text-align: center;
    padding: 20px;
}


/* Form Section Styling */
.form-section {
    background-color: white; /* Sets the background of the form section to white */
    border: 2px solid black; /* Black border as requested */
    padding: 20px;
    margin-top: 20px;
    border-radius: 10px; /* Rounded corners for the entire form section */
}

/* Input and Label Styling */
.form-control, .form-control:focus {
    border-radius: 1rem; /* Rounded corners for form inputs */
    border: 1px solid black; /* Black borders for inputs */
    color: black; /* Text color for input */
}

label {
    color: black; /* Text color for labels */
}

/* Button Styling Adjustments */
.btn-primary {
    background-color: black; /* Black background for buttons */
    border-color: black; /* Black border for buttons */
}

.btn-primary:hover {
    background-color: #333; /* Darker grey on hover */
    border-color: #333; /* Darker grey border on hover */
}

/* Responsive Adjustments for Horizontal Pairing */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
    }
    .form-group {
        width: 100%;
    }
}

/* Additional styles for the new section */

#onlyFansSection {
    background-color: black; /* Background color set to black */
    color: white; /* Text color set to white */
    padding: 40px 20px; /* Padding for spacing */
    border-radius: 1px; /* Rounded corners with a 1px radius */
    text-align: left; /* Ensure text aligns to the left */
    margin-top: 5px; /* Space from the previous content */
    margin-bottom: 70px;
    border-radius: 1rem;
}
#onlyFansSection ul {
    list-style: none; /* Remove default list styling */
    padding-left: 0; /* Align list to the left */
    text-align: left; /* Ensure text aligns to the left */
}

#onlyFansSection li {
    margin-bottom: 15px; /* Space between list items */
    font-size: 14px; /* Further reduced font size for compactness */
    position: relative; /* Position relative for absolute positioning of icons */
    padding-left: 15%; /* Adjusted space for icon */
    padding-right: 15%;
}
.fa-ul {
    list-style: none; /* Remove default list styling */
    padding: 0; /* Remove padding */
    margin: 0 auto; /* Center the list in the container */
    text-align: center; /* Center-align the text */
    display: table; /* Makes the ul behave like a table */
    width: 100%; /* Ensure it takes full width */
}

.fa-ul li {
    display: table-row; /* Each li as a table row for proper vertical alignment */
}

.fa-ul li p1 {
    display: table-cell; /* Each paragraph in li as a table cell */
    vertical-align: middle; /* Center content vertically */
    text-align: center; /* Center content horizontally */
}

#onlyFansSection .fa-li {
    position: absolute; /* Absolute positioning of icons */
    left: 0; /* Align icons to the left edge */
    top: 0; /* Adjust vertical position to align with text */
    color: green; /* Color of the check icon */
    font-size: 20px; /* Larger icon size */
    padding-left: 18%;
}

#testimonials, #onlyFansSection, #formSection, #onlyFansSection2 {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8); /* Adds shadow with moderate visibility */
}   

#onlyFansSection2 {
    background-color: black; /* Background color set to black */
    color: white; /* Text color set to white */
    padding: 40px 20px; /* Padding for spacing */
    border-radius: 1px; /* Rounded corners with a 1px radius */
    text-align: left; /* Ensure text aligns to the left */
    margin-top: 5px; /* Space from the previous content */
    margin-bottom: 70px;
    border-radius: 1rem;
}
#onlyFansSection2 ul {
    list-style: none; /* Remove default list styling */
    padding-left: 0; /* Align list to the left */
    text-align: left; /* Ensure text aligns to the left */
}

#onlyFansSection2 li {
    margin-bottom: 15px; /* Space between list items */
    font-size: 16px; /* Further reduced font size for compactness */
    position: relative; /* Position relative for absolute positioning of icons */
    padding-left: 10px; /* Adjusted space for icon */
    padding-right: 10px;
}

#onlyFansSection2 .fa-li {
    position: absolute; /* Absolute positioning of icons */
    left: 0; /* Align icons to the left edge */
    top: 0; /* Adjust vertical position to align with text */
    color: green; /* Color of the check icon */
    font-size: 20px; /* Larger icon size */
    padding-left: 115px;
}


/* Apply styles to images within a specific section, e.g., within the class "content-section" */
.content-section img {
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Slight shadow for depth */
}

/* If you want these styles to apply to all images on the page, use the img tag directly */
img {
    border-radius: 10px; /* Rounded corners for all images */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Shadow for all images */
}
#successStory .content-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    width: 100%; /* Ensure full width */
    padding: 20px 0;
}

#successStory .content-box {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 0 10px white; /* White shadow for emphasis */
    text-align: left; /* Align text to the left */
}

#successStory .red-text {
    width: 35%; /* Reduced width for the left box */
    background-color: #e74c3c; /* Red color for negative items */
    color: white; /* White text for readability */
}

#successStory .white-text {
    width: 45%; /* Standard width for the right box */
    background-color: #2ecc71; /* Green color for positive items */
    color: white; /* White text for readability */
}

@media (max-width: 768px) {
    #successStory .content-container {
        flex-direction: column;
    }

    #successStory .content-box {
        width: 90%; /* Full width for smaller screens */
        margin-bottom: 20px; /* Spacing between boxes on smaller screens */
    }
}


.content-container {
    display: flex;
    justify-content: space-around;
    margin: 20px 0;
}

.content-box {
    width: 45%; /* Larger width for more content */
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 0 10px white; /* White shadow for emphasis */
    background-color: #333; /* Dark background for contrast */
    text-align: left; /* Align text to the left */
}

.content-box h3 {
    text-align: center; /* Center-align the header */
    margin-bottom: 15px; /* Space below the header */
    color: #000000; /* Light blue for visibility */
}

.content-box h1 {
    text-align: center; /* Center-align the header */
    margin-bottom: 15px; /* Space below the header */
    color: #e74c3c;; /* Light blue for visibility */
}




ul {
    list-style: none; /* No default list styling */
    padding: 0;
}

li {
    padding: 8px 0; /* Padding for list items */
    display: flex;
    align-items: center; /* Center items vertically */
}

.fa {
    margin-right: 10px; /* Space between icon and text */
}

.red-text {
    background-color: rgb(5, 170, 242) !important; /* Red color for negative items */
    color: white; /* White text for readability */
}

.white-text {
    background-color: rgb(5, 170, 242) !important;/* Green color for positive items */
    color: white; /* White text for readability */
}

@media (max-width: 768px) {
    .content-container {
        flex-direction: column; /* Stack the boxes on smaller screens */
    }

    .content-box {
        width: 90%; /* Full width for smaller screens */
        margin: 10px auto; /* Centering boxes */
    }
}
#ctaSection {
    background-color: #000; /* Dark background */
    color: white; /* White text color */
    padding: 40px 20px; /* Padding around the text */
    margin-top: 20px; /* Spacing above the section */
    border-radius: 8px; /* Rounded corners */
    text-align: center; /* Center text alignment */
}

#ctaSection h3 {
    font-size: 28px; /* Larger font size for the heading */
    margin-bottom: 20px; /* Space below the heading */
}
#ctaSection p {
    font-size: 16px; /* Font size for the paragraph */
    margin-bottom: 20px; /* Space below each paragraph */
    max-width: 600px; /* Maximum width of the paragraph text */
    margin-left: auto; /* Centering the paragraph */
    margin-right: auto; /* Centering the paragraph */
}
.calendly-widget-container {
    background-color: white; /* Sets the background to white */
    padding: 20px; /* Adds padding around the widget for spacing */
    border-radius: 8px; /* Optional: Adds rounded corners */
    box-shadow: 0 2px 4px rgba(0,0,0,0.15); /* Optional: Adds a slight shadow for depth */
}
/* Testimonials Section Styling */
.testimonials-section {
    background-color: #ffffff; /* White background for the testimonials section */
    text-align: center;
    padding: 40px 20px; /* Spacing and padding around the section */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow for subtle depth */
}

.testimonials-heading {
    color: #000000; /* Black color for the heading */
    font-size: 24px; /* Suitable font size for the heading */
    margin-bottom: 20px; /* Space below the heading */
}

.testimonials-slideshow-container {
    max-width: 600px;
    position: relative;
    margin: auto;
}

.slideshow {
    position: relative;
    width: 100%;
    height: 550px;
    overflow: hidden;
}

.slide-image {
    width: 60% !important;
    height: 100% !important;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    position: absolute;
    top: 50%; /* Position the top edge of the image at the center of the container */
    left: 50%; /* Position the left edge of the image at the center of the container */
    transform: translate(-50%, -50%); /* Move the image up by half its height and left by half its width */
    display: none;
}


.slide-image.active {
    opacity: 1;
    display: block;
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    user-select: none;
    background-color: rgba(0,0,0,0.8); /* Ensure visibility against potential light images */
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev {
    left: 0;
    border-radius: 3px 0 0 3px;
}