/* style.css */

:root {
    /* Color Scheme: Soft rose, ivory, lavender, sage green */
    --surna-soft-rose: #F8BBD0; /* A soft pink */
    --surna-ivory: #FDFDF7;     /* A creamy off-white */
    --surna-lavender: #E6E6FA;  /* A light lavender */
    --surna-sage-green: #B3C1AE; /* A muted sage blue */

    /* NEW MEDIUM BLUE PALETTE */
    --surna-primary: #1786B7;   /* A medium sea blue for primary actions and branding */
    --surna-secondary: #1786B7; /* A slightly blue for secondary elements and hover states */

    --surna-text-dark: #343a40; /* REVERTED: Dark text for readability (this is for offcanvas and general body text) */
    --surna-text-light: #6c757d; /* Lighter text for secondary info */
    --surna-white: #ffffff;
}

body {
    font-family: 'Inter', sans-serif; /* Friendly Sans-Serif Typography */
    background-color: var(--surna-ivory); /* Ivory background */
    color: var(--surna-text-dark); /* Body text will now be dark */
}

/* Navbar Styling */
.navbar {
    box-shadow: 0 2px 4px rgba(0,0,0,.05);
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--surna-primary); /* Navbar background is blue */

}
.navbar-brand {
    font-weight: 700; /* font-bold */
    font-size: 1.5rem; /* text-xl, slightly larger for brand */
    color: var(--surna-white) !important; /* Navbar brand text is WHITE */
}
/* Navbar Logo Sizing */
.navbar-brand img { /* Added/Updated this section for logo sizing */
    max-height: 90px; /* Increased logo size - adjust as needed */
    height: auto; /* Ensures aspect ratio is maintained */
    width: auto; /* Ensures aspect ratio is maintained */
}
.nav-link {
    color: var(--surna-white) !important; /* Navbar navigation links are WHITE */
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.15); /* Subtle white transparency hover */
    color: var(--surna-white) !important;
}
.navbar-toggler {
    border-color: transparent;
}
.navbar-toggler:focus {
    box-shadow: none;
}


/* Style the toggler icon itself to be white for visibility on blue */
.navbar-toggler .fas.fa-bars {
    color: var(--surna-white); /* Burger button icon is WHITE */
}

.offcanvas-header {
    background-color: var(--surna-primary); /* Medium blue */
    color: var(--surna-white);
    border-bottom: none;
}
.offcanvas-body {
    background-color: var(--surna-ivory);
}
.offcanvas .nav-link {
    font-size: 1.125rem; /* text-lg */
    padding: 0.75rem 1.5rem;
    display: block; /* ensures full clickable area */
    color: var(--surna-text-dark) !important; /* Offcanvas text is now DARK (from --surna-text-dark) */
}
.offcanvas .nav-link:hover {
    background-color: var(--surna-secondary); /* Darker blue hover for offcanvas */
    color: var(--surna-white) !important; /* Text turns white on hover in offcanvas */
}

/* Section Headings */
h1, h2 {
    font-weight: 700; /* font-bold */
    color: var(--surna-primary); /* Now medium blue */
}
h2 {
    font-size: 2rem; /* text-2xl */
}
h1 {
    font-size: 3rem; /* text-4xl */
}
h3 {
    font-weight: 600; /* font-semibold */
    color: var(--surna-text-dark); /* Headings will be dark */
}

/* Card Styling */
.card {
    border-radius: 1rem; /* rounded edges, more pronounced than default Bootstrap */
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.08); /* softer, more prominent shadow */
    border: none; /* remove default border */
    background-color: var(--surna-white);
    transition: transform 0.3s ease; /* for hover effects */
}
.card:hover {
    transform: translateY(-5px); /* slight lift on hover */
}
.card-body {
    padding: 2rem;
}

/* Button Styling */
.btn-primary {
    background-color: var(--surna-primary); /* Now medium blue */
    border-color: var(--surna-primary);     /* Now medium blue */
    border-radius: 0.75rem; /* rounded edges for buttons */
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}
.btn-primary:hover {
    background-color: var(--surna-secondary); /* Now darker blue */
    border-color: var(--surna-secondary);     /* Now darker blue */
    transform: translateY(-2px); /* slight lift on hover */
}
.btn-outline-primary {
    color: var(--surna-primary);     /* Now medium blue */
    border-color: var(--surna-primary); /* Now medium blue */
    border-radius: 0.75rem;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-outline-primary:hover {
    background-color: var(--surna-primary); /* Now medium blue */
    color: var(--surna-white);
}

/* Special for hero section white outline button */
#hero .btn-outline-light {
    color: var(--surna-white);
    border-color: var(--surna-white);
    background-color: transparent;
    border-radius: 0.75rem;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
#hero .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Subtle white background on hover */
    color: var(--surna-white);
    transform: translateY(-2px);
}


/* Form Controls */
.form-control {
    border-radius: 0.75rem; /* rounded edges for inputs */
    border: 1px solid #ced4da;
    padding: 0.75rem 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-control:focus {
    border-color: var(--surna-primary); /* Now medium blue */
    /* Adjusted RGBA to match your new --surna-primary blue (#1786B7) */
    box-shadow: 0 0 0 0.25rem rgba(23, 134, 183, 0.25);
}

/* Layout Utilities (mimicking some Tailwind spacing for consistency) */
.space-y-4 > *:not(:first-child) {
    margin-top: 1.5rem; /* equivalent to Tailwind's space-y-4 */
}
.gap-6 > *:not(:first-child) {
    margin-left: 1.5rem; /* equivalent to Tailwind's gap-6 */
}
.p-4 { padding: 1rem !important; }
.p-6 { padding: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.list-disc { list-style-type: disc; }
.pl-4 { padding-left: 1rem !important; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }

/* Modal Styling */
#messageModal .modal-content {
    border-radius: 1.5rem; /* More rounded for modal */
    box-shadow: 0 1rem 2rem rgba(0,0,0,.15);
}
#messageModal .modal-header {
    background-color: var(--surna-primary); /* Medium blue */
    color: var(--surna-white);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    border-bottom: none;
}


#messageModal .modal-footer {
    border-top: none;
    justify-content: center;
    padding-bottom: 1.5rem;
}

/* Scroll-reveal effect */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Simple fade-in for imagery (if used) or blocks */
.fade-in {
    opacity: 0;
    animation: fadeInAnimation 1s ease-in-out forwards;
}

@keyframes fadeInAnimation {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* General section padding */
section {
    padding: 2rem 0;
}


/* Custom Carousel CSS */

.carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden; /* Hides cards outside the visible area */
    margin: 0 auto;
    /* Adding some padding to the wrapper to account for card margin and make space for arrows if needed */
    padding: 0 15px; /* Adjust as needed */
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Smooth transition for sliding */
    will-change: transform; /* Optimize for animation */
}

.testimony-item {
    /* flex-shrink: 0; prevents items from shrinking */
    /* width is controlled by JS and media queries */
    flex-shrink: 0;
    /* Add padding/margin here for spacing between cards, not in .card */
    padding: 0 8px; /* Spacing between cards */
    box-sizing: border-box; /* Ensures padding is included in the width calculation */
}

/* Responsive widths for testimony items */
/* Default for small screens (1 item per view) */
.testimony-item {
    width: 100%; /* Full width for small screens */
}

/* Medium screens (e.g., md breakpoint - adjust as per your Bootstrap setup) */
@media (min-width: 768px) {
    .testimony-item {
        width: calc(100% / 2); /* 2 items per view on medium screens */
    }
}

/* Large screens (e.g., lg breakpoint - adjust as per your Bootstrap setup) */
@media (min-width: 992px) {
    .testimony-item {
        width: calc(100% / 3); /* 3 items per view on large screens */
    }
}

/* Ensure cards inside take full width of their testimony-item wrapper */
.testimony-item .card {
    width: 100%;
    height: 100%; /* Ensure all cards in a row have equal height */
}


/* Carousel Navigation Buttons Styling */
.carousel-nav-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

/* Carousel Pagination Dots Styling */
.carousel-pagination-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.pagination-dot {
    width: 10px;
    height: 10px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.pagination-dot.active {
    background-color: var(--surna-primary); /* Use your primary color for active dot */
}

/* Hide Bootstrap's default row gap if it causes issues with the track flex layout */
.carousel-wrapper .row {
    margin-left: 0;
    margin-right: 0;
}
.carousel-wrapper .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* Styles for the Scroll-to-Top Button */
        .scroll-to-top {
            position: fixed; /* Keeps the button in a fixed position on the screen */
            bottom: 30px;    /* 30 pixels from the bottom edge of the viewport */
            right: 30px;     /* 30 pixels from the right edge of the viewport */

            /* Button appearance */
            background-color: var(--surna-primary); /* Use primary color */
            color: white;             /* White color for the arrow */
            border: none;             /* No border around the button */
            border-radius: 50%;       /* Makes the button perfectly circular */

            /* Default size for larger screens */
            width: 55px;              /* Width of the circular button */
            height: 55px;             /* Height of the circular button */
            font-size: 32px;          /* Size of the arrow character for larger screens */

            line-height: 0;           /* Adjusts line height to help center the arrow vertically */

            /* Centering the arrow visually within the button */
            display: flex;            /* Enables Flexbox for centering */
            justify-content: center;  /* Centers horizontally */
            align-items: center;      /* Centers vertically */

            cursor: pointer;          /* Changes the mouse cursor to a pointer when hovering over the button */
            z-index: 1000;            /* Ensures the button is displayed on top of other page content */

            /* Initial state: hidden */
            opacity: 0;               /* Makes the button completely transparent */
            visibility: hidden;       /* Prevents interaction and makes it ignored by screen readers when hidden */

            /* Smooth transition effect for showing and hiding the button */
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, width 0.3s, height 0.3s, font-size 0.3s;
        }

        /* Media Query for Smaller Screens (e.g., up to 768px wide) */
        @media (max-width: 768px) {
            .scroll-to-top {
                width: 45px;      /* Smaller width for smaller screens */
                height: 45px;     /* Smaller height for smaller screens */
                font-size: 24px;  /* Smaller arrow size for smaller screens */
                bottom: 20px;     /* Slightly closer to the bottom on small screens */
                right: 20px;      /* Slightly closer to the right on small screens */
            }
        }

        /* Class added by JavaScript to make the button visible */
        .scroll-to-top.show {
            opacity: 1;
            visibility: visible;
        }

        .scroll-to-top:hover {
            background-color: var(--surna-secondary); /* Slightly darker green when hovered over */
            box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Add a subtle shadow on hover */
        }


        .scroll-to-top:active {
            transform: translateY(1px); /* Creates a slight 'pressed' effect */
        }

/* Custom styles for the new image container */
.image-wrapper {
    background-color: #e0e0e0; /* Light grey background for the "border" effect */
    border-radius: 1rem; /* Rounded corners for the container */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    padding: 0.5rem; /* This creates the thin visual "border" */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative; /* Needed for absolute positioning of image for aspect ratio */
    width: 100%; /* Take full width of its column */
    padding-top: 75%; /* Changed to 75% for 4:3 rectangular aspect ratio */
    height: 0; /* Important for padding-top trick to work */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
    cursor: pointer;
}

.image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area without distortion */
    border-radius: 0.75rem; /* Slightly less rounded than wrapper for inner image */
}

.image-wrapper:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* More prominent shadow on hover */
    transform: scale(1.01); /* Slight zoom effect */
}
/* ======================================= */
/* Hero Section Video Background Styling */
/* ======================================= */
#hero {
    position: relative; /* Needed for z-index and absolute positioning of children */
    overflow: hidden; /* Hides video content outside the hero bounds */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 90vh; /* Changed from 80vh to 100vh for full screen height */
    width: 100%;
    background: none; /* Remove any old background image */
    box-shadow: none;
    padding: 0; /* Adjust padding, content container will have its own */
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Below overlay and content */
    background-color: #000; /* Fallback background for slow video load */
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover; /* Ensures video covers the entire area */
    transition: opacity 1s ease-in-out; /* Smooth transition between videos */
    opacity: 0; /* Hidden by default, JavaScript controls visibility */
    pointer-events: none; /* Make video non-clickable/non-interactive */
}

.hero-video.active {
    opacity: 1; /* Show active video */
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent dark overlay */
    z-index: 2; /* Between video and text content */
    pointer-events: none; /* Ensures clicks pass through to content if needed */
}

#hero .container {
    position: relative; /* Ensures text content is above overlay */
    z-index: 3; /* Above video and overlay */
}

#hero h1{
    color: var(--surna-white); /* Keep text white for contrast */
    text-shadow: 1px 1px 5px rgba(0,0,0,0.7); /* Stronger shadow for better readability on video */
}

#hero p {
    color: white; /* White text for P tag */
    text-shadow: 1px 1px 6px rgba(0,0,0,0.8); /* Adjusted shadow for P tag for more "shininess" */
    font-weight: 600; /* Slightly bolder to enhance visibility */
}

/* Navigation Dots Styling */
.navigation-dots {
    position: absolute;
    bottom: 30px; /* Adjust as needed */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 4; /* Ensure dots are above everything */
}

.dot {
    width: 14px; /* Increased size for better visibility */
    height: 14px; /* Increased size for better visibility */
    background-color: rgba(255, 255, 255, 0.7); /* Increased opacity for inactive dots */
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.dot:hover {
    background-color: rgba(255, 255, 255, 0.8);
    transform: scale(1.1);
}

.dot.active {
    background-color: var(--surna-primary); /* Use your primary color for active dot */
    border: 2px solid var(--surna-white); /* White border for active dot */
    transform: scale(1.2);
}