/* Load the Nivea font */
@font-face {
    font-family: 'Nivea';
    src: url('/assets/Nivea-Bold.woff') format('woff'); /* Update path as necessary */
    font-weight: normal;
    font-style: normal;
}

/* Apply Nivea to all text on the page */
body {
    font-family: 'Nivea', Arial, sans-serif;
    color: #ffffff;
    background-color: #000000;
    margin-top: 2rem;
    text-align: left; /* Default text alignment for desktop */
}

/* Additional styling */
.container {
    max-width: 1200px;
    padding: 20px;
    padding-bottom: 5rem;
}

.main {
    padding-bottom: 5rem;
}

a {
    text-decoration: none;
    color: #ffffff; /* Link color */
}

a:hover {
    text-decoration: underline; /* Optional hover effect */
    color: #e1d665; /* Slightly darker shade on hover */
}

h2 {
    color: #e1d665; /* Yellow for the main header */
    font-weight: 700;
    text-align: center;
}

h3, h5, .email-section {
    font-weight: 100;
}

.business-description p {
    font-size: 1.2em;
    color: #cccccc;
    text-align: justify;
}

.logo img {
    scale: 250%;
    max-width: 100%;
    margin-bottom: 2rem;
}

.position-relative {
    position: relative;
}

.email-section{
    align-self: start;
}

.position-absolute {
    position: absolute;
    bottom: 0; /* Aligns to the bottom of the parent container */
    left: 0;
    right: 0;
    z-index: 0; /* Ensure it stays behind other elements */
}

.owner-image img {
    height: auto; /* Ensures image scales correctly */
    object-fit: cover;
    border-radius: 10px;
}

.social-icons a {
    font-size: 2rem; /* Ensure icon size is visible */
    color: #ffffff;
    transition: transform 0.3s ease-in-out;
}

.social-icons a:hover {
    transform: scale(1.2);
    color: #e1d665; /* Icon color change on hover */
}

.new-section {
    padding: 40px 20px; /* Add some padding for spacing */
    color: #ffffff; /* Ensure text color is white */
}

.section-title {
    font-size: 2rem; /* Adjust title size as needed */
    margin-bottom: 20px; /* Space below title */
}

.section-paragraph {
    font-size: 1.2rem; /* Set a comfortable size for the paragraphs */
    margin: 10px 0; /* Space above and below paragraphs */
    text-align: justify; /* Justify text for a neat appearance */
}

/* Custom styles */
.textarea-custom {
    background-color: black; /* Black background */
    color: white; /* White text */
    border: 1px solid #e1d665; /* Optional: Border color for visibility */
}

.btn-custom {
    background-color: #333; /* Default background color */
    color: #fff; /* Text color */
}

.btn-custom-active {
    background-color: #e1d665; /* Yellow for active button */
    color: #000; /* Change text color if needed */
}

.content-area {
    text-align: left; /* Align text to the left */
    padding: 15px; /* Optional: Add padding for better readability */
}

.content-area ul {
    padding-left: 20px; /* Adjust padding for the bullet points if needed */
    margin: 0; /* Remove default margin */
    list-style-position: inside; /* Optional: Adjust the position of bullets */
}

.final-section-title {
    font-size: 3rem; /* Large font size for H1 */
    margin-bottom: 20px; /* Space below the title */
}

.btn-buy-course {
    width: 500px; /* Fixed width */
    height: 150px; /* Fixed height */
    font-size: calc(1rem + 2vw); /* Responsive font size */
    background-color: #e1d665; /* Button background color */
    color: #ffffff; /* Button text color */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Change cursor to pointer */
    transition: background-color 0.3s; /* Smooth transition for hover effects */
}


.btn-buy-course-card {
    align-self: center; /* Center the button horizontally */
    width: 150px; /* Fixed width */
    height: 75px; /* Fixed height */
    font-size: calc(0.5rem + 1vw); /* Responsive font size */
    background-color: #e1d665; /* Button background color */
    color: #ffffff; /* Button text color */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Change cursor to pointer */
    transition: background-color 0.3s; /* Smooth transition for hover effects */
}

.btn-buy-course:disabled {
    background-color: #6c757d; /* Grey color for disabled state */
    cursor: not-allowed; /* Change cursor for disabled state */
}

.btn-buy-course:hover {
    background-color: #fdec2c; /* Darker shade on hover */
}

.price-text {
    font-size: 1.25rem; /* Medium font size for price text */
    margin-top: 10px; /* Space above price text */
}

.spacer {
    height: 50px; /* Spacer height */
}

.contact-text {
    font-size: 1.1rem; /* Slightly smaller font for contact text */
    margin-top: 20px; /* Space above contact text */
}

/* Floating Action Button Styles */
.fab {
    position: fixed; /* Makes it float */
    bottom: 100px; /* Distance from the bottom */
    right: 200px; /* Distance from the right */
    width: 80px; /* Button size */
    height: 50px; /* Button size */
    border: none; /* No border */
    border-radius: 10%; /* Circular shape */
    background-color: #e1d665; /* Button color */
    color: white; /* Text color */
    font-size: calc(0.8rem + 1vh); /* Font size for the text inside */
    display: flex;
    align-items: center; /* Center the text vertically */
    justify-content: center; /* Center the text horizontally */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Shadow effect */
    cursor: pointer; /* Change cursor on hover */
    transition: background-color 0.3s, transform 0.3s; /* Transition effects */
}

.fab:hover {
    background-color: #000000; /* Darker color on hover */
    transform: scale(1.1); /* Slightly increase size on hover */
}

/* Responsive Styles */
@media (max-width: 768px) {
    body {
        text-align: center; /* Center align text on mobile */
    }

    h2, .section-title, .final-section-title {
        font-size: 1.8rem; /* Adjust heading size for mobile */
    }

    .btn-buy-course {
        width: 90%; /* Make button full-width on mobile */
        max-width: 500px; /* Limit the max width */
        height: auto; /* Allow height to adjust based on content */
        padding: 20px; /* Adjust padding */
    }

    .contact-text {
        font-size: 1rem; /* Smaller font for contact text */
    }

    .social-icons a {
        font-size: 1.5rem; /* Adjust icon size for mobile */
    }

    .fab {
        width: calc(3rem + 4vh); /* Adjust FAB size for mobile */
        height: calc(1rem + 2vh); /* Adjust FAB size for mobile */
        bottom: 90px; /* Distance from the bottom */
        right: 40px; /* Distance from the right */
        font-size: calc(0.8rem + 1vh); /* Font size for the text inside */
    }

    .email-section {
        text-align: center; /* Center align email section on mobile */
        align-self: center;
        padding-bottom: 1rem;
    }

    .content-area {
        text-align: left; /* Ensure content area is left-aligned for bullets */
    }
}

@media (hover: none) {
    .fab:hover {
        background-color: #e1d665; /* Reset to yellow */
        transform: scale(1); /* Reset the scale */
    }

    .fab:focus {
        outline: none; /* Prevent focus outline */
        background-color: #e1d665; /* Same as the default yellow color */
        transform: scale(1); /* Reset the scale */
    }
}


/* Cookie Toast Styling */
.cookie-toast {
    position: fixed; /* Ensures it hovers over content */
    bottom: 20px; /* Position near the bottom */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center alignment correction */
    max-width: 90%; /* Responsive width */
    background-color: rgba(51, 51, 51, 0.9); /* Semi-transparent background */
    color: #ffffff; /* White text for contrast */
    font-family: 'Nivea', Arial, sans-serif; /* Use your font */
    padding: 20px;
    z-index: 1000; /* Ensure it appears above other elements */
    border-radius: 10px; /* Rounded corners for a modern look */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Floating shadow effect */
    opacity: 1; /* Fully visible */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transitions */
}

.cookie-toast.hidden {
    opacity: 0; /* Fade out effect when hidden */
    pointer-events: none; /* Disable interaction when hidden */
    transform: translateX(-50%) translateY(20px); /* Slide down when hidden */
}

.cookie-toast-content p {
    margin: 0;
    font-size: 1rem;
    color: #cccccc; /* Match your paragraph text color */
}

.cookie-toast-content a {
    color: #e1d665; /* Yellow link color */
    text-decoration: underline;
}

.cookie-buttons {
    display: flex;
    gap: 10px; /* Spacing between buttons */
    margin-top: 10px; /* Spacing above buttons */
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #fdec2c; /* Hover effect */
}

.btn-custom {
    background-color: #333; /* Default button background */
    color: #ffffff;
    font-family: 'Nivea', Arial, sans-serif;
}

.btn-custom-active {
    background-color: #e1d665; /* Active button background */
    color: #000000;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .cookie-toast {
        bottom: 10px; /* Move closer to the bottom */
        left: 5%; /* Adjust horizontal alignment */
        transform: none; /* Remove transform for simplicity */
        max-width: 90%; /* Ensure it fits the screen */
    }

    .cookie-buttons {
        flex-direction: column; /* Stack buttons vertically */
        gap: 10px; /* Larger spacing between buttons */
    }


}
/* Product Card Styles */
.product-card {
    background-color: #333; /* Matches existing dark theme */
    color: #ffffff; /* White text */
    border: 1px solid #444; /* Subtle border */
    border-radius: 10px; /* Rounded corners */
    overflow: hidden; /* Prevent overflow */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover effect */
    cursor: pointer;
    margin-bottom: 20px; /* Space between cards */
    text-align: center; /* Center-align text */
    display: flex;
    flex-direction: column; /* Flexbox for alignment */
    justify-content: space-between; /* Space between content and button */
}

.product-card:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Shadow on hover */
}

.product-card-img {
    width: 100%;
    height: 100%; /* Consistent height for images */
    object-fit: cover; /* Crop image without distortion */
    border-bottom: 1px solid #444; /* Divider between image and body */
}

.product-card-body {
    height: 23rem;
    padding: 15px; /* Padding for text content */
    display: flex;
    flex-direction: column; /* Stack content vertically */
    justify-content: space-between; /* Push the button to the bottom */
}

.product-card-body h3 {
    font-size: 1.3rem; /* Slightly smaller than headers */
    margin: 10px 0; /* Space around the title */
    color: #e1d665; /* Yellow for titles */
}

.product-card-body .price-text {
    color: #cccccc; /* Subtle grey for price */
    margin-bottom: 15px; /* Space below price text */
}

.product-description ul {
    margin: 0 auto;              /* centers the whole list */
    display: table;              /* treat as a shrink-to-fit block */
    text-align: left;            /* needed so bullets show properly */
    list-style-position: outside;
}

.product-description ul li {
    text-align: justify;         /* clean alignment of multiline items */
    max-width: 700px;            /* optional: limit line length */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .product-card-img {
        height: 100%px; /* Adjust image height for smaller screens */
    }

    .product-card-body h3 {
        font-size: 1.3rem; /* Smaller font size for mobile */
    }

    .btn-buy-course-card {
        width: 80%; /* Full-width buttons on mobile */
        height: auto; /* Allow buttons to adjust height */
        padding: 15px; /* Add padding for better tap area */
        font-size: 1.5rem;
    }
}

.product-detail {
    text-align: center; /* Center align text inside */
    max-width: 800px; /* Limit the width of the content */
    margin: 0 auto; /* Center the content horizontally */
    padding: 20px; /* Add some padding for spacing */
    color: #ffffff; /* Keep the white text color */
}

.product-image img {
    display: block; /* Ensures the image respects the centering */
    margin: 0 auto; /* Center the image horizontally */
    max-width: 60%; /* Responsive width */
    border-radius: 10px; /* Optional: Add rounded corners */
    margin-bottom: 20px; /* Space below the image */
}

.product-title,
.product-description,
.product-purchase {
    margin: 0 auto; /* Center-align each section */
    max-width: 800px; /* Keep it consistent with the main container */
}

.btn-buy-course-pdp {
    padding: 10px 20px; /* Adjust padding for a larger button */
    font-size: 1.2rem; /* Larger font for the button text */
    border-radius: 5px; /* Rounded corners for consistency */
    background-color: #e1d665; /* Button background color */
    color: #ffffff; /* Button text color */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Change cursor to pointer */
    transition: background-color 0.3s; /* Smooth transition for hover effects */
}

.btn-buy-course-pdp:hover {
    background-color: #fdec2c; /* Darker shade on hover */
    transform: translateY(-2px); /* Slight lift on hover */
}