/**
 * app/css/main.css
 *
 * This file is for any css that should be applied site wide.
 *
 * @version 5.0.1
 * @author  Joey Kimsey <Joey@thetempusproject.com>
 * @link    https://TheTempusProject.com
 * @license https://opensource.org/licenses/MIT [MIT LICENSE]
 */
.about-background-banner {
    background-image: url('/images/code_editor_banner.jpg');
}
/* .hero-section-home {
    background: url('https://placehold.co/1920x1080/2c3e50/ffffff?text=Your+Background+Image') no-repeat center center;
} */

.context-main-border {
    border-color: #1e1e1e!important;
}
.context-main-border-other {
    border-color: #f5f5f5!important;
}

.context-main-bg {
    background-color: #f7f7f7;
    /* background-color: #b1b; */
}
.context-second-bg {
    background-color: #eaeaea;
    /* background-color: #b1b; */
}
.context-third-bg {
    background-color: #ccc;
    /* background-color: #b1b; */
}

.context-main {
    color: #000;
}

hr {
    color: #000;
}

/* Base styles for the switch container */
.material-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
}

/* Hide the default checkbox */
.material-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Style the label as the switch */
.material-switch .label-default {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--switch-off-bg, #ccc);
    border-radius: 25px;
    transition: background-color 0.3s ease-in-out;
}

/* Style the toggle circle (slider) */
.material-switch .label-default::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: var(--switch-slider-bg, #fff);
    bottom: 2.5px;
    left: 5px;
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 2px 4px #00000033;
}

/* Change background color when checked */
.material-switch input:checked + .label-default {
    background-color: var(--switch-on-bg, #555); /* Bootstrap primary color */
}

/* Move the slider when checked */
.material-switch input:checked + .label-default::before {
    transform: translateX(25px); /* Adjust based on switch width */
}

html {
    font-family: 'Open Sans', sans-serif;
    position: relative;
    min-height: 100%;
}
pre {
    white-space: pre-wrap;
}

body {
    background-color: #e4e4e4;
    /* background-image: linear-gradient(180deg, #eee, #fff 100px, #fff); */
}
@media ( min-width: 768px ) {
    .main {
        padding-right: 40px;
        padding-left: 40px;
    }
    #wrapper {
        padding-right: 225px;
        padding-left: 0;
    }
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

/**
 * Install Terms
 */
.install-terms {
    text-align: left;
    width: 800px;
    height: 600px;
    border: 1px solid #ccc;
    background: #f2f2f2;
    padding: 6px;
    overflow: auto;
}
.install-terms p,
.install-terms li {
    font: normal 11px/15px arial;
    color: #333;
}
.install-terms h3 {
    font: bold 14px/19px arial;
    color: #000;
}
.install-terms h4 {
    font: bold 12px/17px arial;
    color: #000;
}
.install-terms strong {
    color: #000;
}

/**
 * Terms Page
 */
.terms-page {
    text-align: left;
    border: 1px solid #ccc;
    background: #f2f2f2;
    padding: 6px;
    overflow: auto;
    margin-bottom: 70px;
}
.terms-page p,
.terms-page li {
    font: normal 11px/15px arial;
    color: #333;
}
.terms-page h3 {
    font: bold 14px/19px arial;
    color: #000;
}
.terms-page h4 {
    font: bold 12px/17px arial;
    color: #000;
}
.terms-page strong {
    color: #000;
}

/**
 * Terms
 */
.terms {
    text-align: left;
    width: 450px;
    height: 150px;
    border: 1px solid #ccc;
    background: #f2f2f2;
    padding: 6px;
    overflow: auto;
}
.terms p,
.terms li {
    font: normal 11px/15px arial;
    color: #333;
}
.terms h3 {
    font: bold 14px/19px arial;
    color: #000;
}
.terms h4 {
    font: bold 12px/17px arial;
    color: #000;
}
.terms strong {
    color: #000;
}
.pricing-header {
    max-width: 700px;
}
.pricing-container {
    max-width: 960px;
}
.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
}
.bi {
    vertical-align: -.125em;
    fill: currentColor;
}
.form-control-dark {
    border-color: var(--bs-gray);
}
.form-control-dark:focus {
    border-color: #fff;
    box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
}
.text-small {
    font-size: 85%;
}
.dropdown-toggle {
    outline: 0;
}
.b-example-divider {
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
}
.nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
}
.nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
.b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
}
.feature-icon {
    width: 4rem;
    height: 4rem;
    border-radius: .75rem;
}
.icon-link > .bi {
    margin-top: .125rem;
    margin-left: .125rem;
    fill: currentcolor;
    transition: transform .25s ease-in-out;
}
.icon-link:hover > .bi {
    transform: translate(.25rem);
}
.icon-square {
    width: 3rem;
    height: 3rem;
    border-radius: .75rem;
}
.text-shadow-1 {
    text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25);
}
.text-shadow-2 {
    text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25);
}
.text-shadow-3 {
    text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
}
.card-cover {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.feature-icon-small {
    width: 3rem;
    height: 3rem;
}

.gradient-custom-2 {
    /* fallback for old browsers */
    background: #fccb90;
    
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right, #2c2c2c, #1e1e1e, #1e1e1e);
    
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to right, #2c2c2c, #1e1e1e, #1e1e1e);
}

:root {
    --primary-green-rgb: 56, 142, 60;
    --primary-green: #388E3C; /* A darker green from your logo for accents */
    --light-green: #8BC34A;  /* A lighter green from your logo for accents */
    --text-dark: #333;
    --text-light: #f8f9fa;
    --bg-light: #f8f9fa;
    --bg-dark: #343a40;
    --bs-link-color: var(--primary-green); /* Default link color for Bootstrap */
    --bs-link-hover-color: var(--light-green); /* Default link hover color for Bootstrap */

    --bs-dropdown-link-active-bg: var(--light-green); 
    --bs-dropdown-link-color: var(--primary-green);
}

/* Custom styles for the header and navigation */
.header-white {
    background-color: white !important;
    border-bottom: 1px solid #e0e0e0; /* Subtle border for separation */
    box-shadow: 0 2px 4px rgba(0,0,0,.05); /* Light shadow for depth */
    position: relative; /* Add this */
    z-index: 1050;     /* Add this, or higher than any potential hero image z-index */
}

.dropdown-item.active {
    /* color: #fff !important; # Active link color
    background-color: var(--primary-green); */
    
    font-weight: bold;
    background-color: #fff !important; /* Active link color */
    color: var(--primary-green) !important; /* Active link color */
}

.nav-link.active {
    color: var(--primary-green) !important; /* Active link color */
    font-weight: bold;
    border-bottom: 2px solid var(--primary-green); /* Underline for active */
    padding-bottom: 0.5rem; /* Adjust padding for underline */
}
.nav-link:hover {
    color: var(--light-green) !important; /* Hover color for nav links */
}

/* Custom button styles using your green colors */
.btn-primary-green {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
    color: white;
    border-radius: 0.5rem; /* Rounded corners for buttons */
}
.btn-primary-green:hover {
    background-color: var(--light-green);
    border-color: var(--light-green);
    color: white;
}

.btn-outline-primary-green {
    color: var(--primary-green);
    border-color: var(--primary-green);
            border-radius: 0.5rem; /* Rounded corners for buttons */
}
.btn-outline-primary-green:hover {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
    color: white;
}


.btn-light-green {
    background-color: var(--light-green);
    border-color: var(--light-green);
    color: white;
    border-radius: 0.5rem; /* Rounded corners for buttons */
}
.btn-light-green:hover {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
    color: white;
}

.btn-outline-light-green {
    color: var(--light-green);
    border-color: var(--light-green);
            border-radius: 0.5rem; /* Rounded corners for buttons */
}
.btn-outline-light-green:hover {
    background-color: var(--light-green);
    border-color: var(--light-green);
    color: white;
}

/* Adjust dropdown menu text color for light theme */
.dropdown-menu.dropdown-menu-light .form-check-label {
    color: #212529; /* Bootstrap's default dark text color */
}

/* Mobile toggler icon color */
.navbar-toggler-icon-green {
    color: var(--primary-green);
}

body {
    font-family: sans-serif;
    color: var(--text-dark);
}

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

.accent-bg {
    background-color: var(--light-green);
    color: var(--text-light);
}

.accent-text {
    color: var(--primary-green);
}

/* Footer specific styles */
.footer-white {
    padding-top: 2rem;
    padding-bottom: 1rem;
}

.footer-link {
    color: #6c757d; /* Muted text color for normal links */
    text-decoration: none;
}

.footer-link:hover {
    color: var(--primary-green); /* Green on hover */
    text-decoration: underline;
}

.social-icon-footer {
    color: var(--primary-green); /* Changed to primary green by default */
    transition: color 0.3s ease; /* Smooth transition on hover */
}

.social-icon-footer:hover {
    color: var(--light-green); /* Light green on hover */
}

/* New style for footer section headings */
.footer-section-title {
    color: var(--primary-green);
    border-bottom: 2px solid var(--primary-green); /* Green bottom border */
    padding-bottom: 0.5rem; /* Space between text and border */
    margin-bottom: 1rem; /* Space below the border */
    display: inline-block; /* Ensures border only wraps text content */
}

/* New style for top banner */
.top-banner {
    background: linear-gradient(to right, var(--primary-green), var(--light-green));
    color: white;
    padding: 0.75rem 1rem;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 500;
}

.top-banner a {
    color: white;
    text-decoration: underline;
    margin: 0 0.25rem;
}

.top-banner a:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* Style for dropdown menu items */
.dropdown-item:hover, .dropdown-item:focus {
    background-color: rgba(var(--primary-green-rgb), 0.1); /* Light green background on hover */
    color: var(--primary-green) !important; /* Green text on hover */
}

/* About Section - Facebook Profile Style */
.about-profile-header {
    position: relative;
    background-color: #f8f9fa; /* Light background for the overall section */
    padding-bottom: 2rem; /* Space below the white content box */
    overflow: hidden; /* Important for containing absolutely positioned elements */
    border-radius: 0.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    max-width: 90%; /* Example: Limit to 1200px */
    margin-left: auto; /* Center the block */
    margin-right: auto; /* Center the block */
    margin-top: 20px;
}

.about-background-banner {
    height: 300px; /* Adjust height as needed for the banner */
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 0;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.about-content-area {
    position: relative;
    z-index: 1; /* Ensure content is above the background */
    margin-top: -100px; /* Pulls content up to overlap the background */
    padding-left: 1rem; /* Padding for content */
    padding-right: 1rem; /* Padding for content */
}

.about-image-wrapper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -100px; /* Half on background, half on content area */
    z-index: 2; /* On top of background and main content */
    border-radius: 50%;
    background-color: white; /* To ensure a clean circle cut-out */
    padding: 5px; /* Padding for the border */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.about-image {
    width: 180px; /* Adjust size as needed */
    height: 180px; /* Adjust size as needed */
    object-fit: cover;
    border-radius: 50%; /* Make it circular */
    border: 3px solid var(--light-green); /* Light green border */
}

.about-text-box {
    background-color: white;
    border-radius: 0.5rem;
    padding: 2rem;
    padding-top: 5rem; /* Extra padding to accommodate image overlap */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Subtle shadow for the box */
    margin-left: auto;
    margin-right: auto;
    max-width: 900px; /* Constrain width for better readability */
    position: relative; /* For z-index to work with text */
    z-index: 1;
}

.about-text-box h2 {
    margin-top: 0;
}

.about-text-box p {
    color: #343a40; /* Darker text for readability */
    line-height: 1.7; /* Improve readability */
    margin-bottom: 1rem;
}

/* Responsive adjustments for the about section */
@media (max-width: 767.98px) {
    .about-background-banner {
        height: 150px;
    }
    .about-image-wrapper {
        top: -75px; /* Adjust for smaller banner height */
    }
    .about-image {
        width: 120px;
        height: 120px;
    }
    .about-content-area {
        margin-top: -60px; /* Adjust for smaller image/banner overlap */
    }
    .about-text-box {
        padding-top: 4rem; /* Adjust padding for smaller image */
    }
    .about-profile-header {
        padding-bottom: 1rem;
    }
}

/* Contact Section Styles */
.contact-section-container {
    background-color: white; /* White background */
    border-radius: 0.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* Consistent shadow */
    padding: 2rem;
}

.contact-form-label {
    color: #343a40; /* Dark text for labels */
}

.contact-form-control {
    border-radius: 0.3rem; /* Slightly rounded inputs */
    border-color: #ced4da; /* Default Bootstrap border color */
}
.contact-form-control:focus {
    border-color: var(--light-green); /* Green border on focus */
    box-shadow: 0 0 0 0.25rem rgba(var(--light-green-rgb), 0.25); /* Light green shadow on focus */
}

/* FAQ Section Styles */
.faq-section-container {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    padding: 2rem;
}

.faq-toc-heading {
    color: var(--primary-green);
    margin-bottom: 1rem;
}

.faq-toc-link {
    color: #495057; /* Darker text for TOC links */
    text-decoration: none;
    padding: 0.25rem 0;
    display: block;
}
.faq-toc-link:hover {
    color: var(--primary-green);
    text-decoration: underline;
}

.accordion-item {
    border-radius: 0.5rem; /* Rounded corners for accordion items */
    border: 1px solid #e0e0e0; /* Light border */
    margin-bottom: 0.75rem; /* Space between accordion items */
    overflow: hidden; /* Ensures rounded corners are applied */
}
.accordion-item:last-of-type {
    margin-bottom: 0;
}

.accordion-button {
    background-color: white;
    color: var(--primary-green);
    font-weight: 600;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 0.5rem; /* Apply rounded corners to button as well */
    transition: all 0.3s ease; /* Smooth transition for hover/active states */
}
.accordion-button:not(.collapsed) {
    background-color: var(--primary-green); /* Green background when open */
    color: white; /* White text when open */
    border-color: var(--primary-green);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125); /* Subtle inner shadow */
}
.accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1); /* Invert arrow color to white when open */
}
.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-green-rgb), 0.25); /* Green focus outline */
    border-color: var(--primary-green);
}
.accordion-button::after {
    color: var(--primary-green); /* Green arrow icon */
    transition: transform 0.2s ease-in-out, color 0.3s ease;
}

.accordion-body {
    background-color: #f8f9fa; /* Slightly off-white background for body */
    color: #343a40; /* Dark text for readability */
    padding: 1rem 1.25rem;
    line-height: 1.6;
}

/* Service Page Specific Styles */
.service-section-container {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    padding: 2rem;
    max-width: 1200px; /* Consistent width limit */
    margin-left: auto;
    margin-right: auto;
}

.service-image {
    width: 100%;
    height: auto;
    border-radius: 0.5rem; /* Rounded corners for images */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow for images */
    object-fit: cover; /* Ensures image covers area, might crop */
}

.service-text {
    color: #343a40; /* Dark text for readability */
    line-height: 1.7;
}

/* Ensure text and image columns are vertically centered */
.service-feature-row {
    align-items: center;
    margin-bottom: 3rem; /* Space between feature rows */
}
.service-feature-row:last-child {
    margin-bottom: 0; /* No bottom margin on the last row */
}

/* Responsive adjustments for service images */
@media (max-width: 767.98px) {
    .service-feature-row img {
        margin-bottom: 1.5rem; /* Space below image on small screens */
    }
}









        /* Custom Styles */
        .hero-section-home {
            background-size: cover;
            color: white;
            padding: 120px 0;
            text-align: center;
        }
        .hero-section {
            background: linear-gradient(to right, var(--primary-green), var(--light-green));
            color: var(--text-light);
            padding: 80px 0;
            text-align: center;
        }
        .hero-section h1 {
            font-size: 3.5rem;
            font-weight: 700;
        }
        .hero-section .lead {
            font-size: 1.4rem;
            max-width: 800px;
            margin: 0 auto;
        }
        .section-padding {
            padding: 80px 0;
        }
        .section-title-home {
            margin-bottom: 60px;
            font-weight: 700;
        }
        .section-title {
            color: var(--primary-green);
            margin-bottom: 40px;
            font-weight: bold;
        }
        .service-card-home {
            border: none;
            transition: transform .2s, box-shadow .2s;
        }
        .service-card-home:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(0,0,0,.12);
        }

        .service-card, .review-card, .stack-card {
            border: none;
            box-shadow: 0 4px 8px rgba(0,0,0,.1);
            transition: transform 0.3s ease;
        }

        .service-card:hover, .review-card:hover, .stack-card:hover {
            transform: translateY(-5px);
        }

        .portfolio-item img {
            transition: transform .3s;
        }
        .portfolio-item:hover img {
            transform: scale(1.05);
        }
        .testimonial-card {
            background-color: #f8f9fa;
            border-left: 5px solid var(--light-green); /* Primary color border */
            padding: 20px;
        }
        .nav-pills .nav-link.active {
            background-color: var(--white); /* broken var means its over-written but not working - by design */
        }
        .form-check-input:checked {
            background-color: var(--light-green);
            border-color: var(--primary-green);
        }

        /* CTA Section */
        .cta-section {
            background-color: var(--primary-green);
            background: linear-gradient(135deg, var(--primary-green), var(--light-green));
            color: white;
            padding: 80px 0;
            text-align: center;
        }