/* Ensure the section covers full width */
.full-width-background {
    width: 100%;
    display: block;
}

/* Styles for the container within each section */

.container {
    max-width: 1200px; /* or any other max-width you prefer */
    margin: auto; /* this will center your container */
    padding: 0 15px; /* this adds some padding on the sides */
    text-align: center; /* Center-align inline or inline-block elements */

}

/* Apply the container class to the main content areas */
.main, .section-content, footer {
    width: 100%;
}

/* Ensure full-width sections like header and footer are not constrained */
header, footer {
    max-width: 100%;
}

/* Responsive Design Adjustments */
@media (max-width: 1200px) {
    .container {
        padding: 0 30px; /* you can adjust the padding for smaller screens */
    }
}


/* Logo styling */
/* Logo styling to match the mandalawi.ca website */
/* Logo styling to match the mandalawi.ca website */
/* Logo styling to match the mandalawi.ca website */
.logo {
    display: inline-flex;
    align-items: center;
    font-size: 2rem; /* Adjust the size as needed */
    background-color: #ff8177;
    background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    text-decoration: none; /* Remove underline from link */
}

.logo .logo-icon {
    /* Align icon size with the text, optional */
    font-size: 1.5em; /* Adjust based on your preference */
    margin-right: 0.5rem; /* Space between icon and text */
}

/* Logo and Navigation Links: Ensuring Color Consistency in Dark Mode */
.logo, .nav-links a {
    transition: color 0.3s ease; /* Smooth transition for color changes */
}
/* Base styles for section titles */
h2 {
    font-size: 2.5rem; /* Size of the titles */
    margin-bottom: 40px;
    text-transform: uppercase;
    padding: 15px 30px; /* Padding inside titles */
    position: relative; /* Enables absolute positioning of pseudo-elements */
    display: inline-block; /* Necessary for positioning */
    background: rgba(255, 255, 255, 0.5); /* Semi-transparent background for contrast */
    border-radius: 10px; /* Rounded corners */
    z-index: 2; /* Ensures text is above the background */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effects */
}

/* Adjusted 3D text shadow for depth */
h2 {
    text-shadow: 
        1px 1px 0 rgba(0,0,0,0.6),
        2px 2px 0 rgba(0,0,0,0.4),
        3px 3px 0 rgba(0,0,0,0.3);
}

/* Background effect */
h2::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    z-index: -1;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease; /* Smooth transition for the shadow */
}

/* Matching text and background colors for each section */
#about h2, #about h2::before { background-color: #ff6277; color: #ff6277; }
#services h2, #services h2::before { background-color: #ff5177; color: #ff5177; }
#portfolio h2, #portfolio h2::before { background-color: #ff7599; color: #ff7599; }
#testimonials h2, #testimonials h2::before { background-color: #ff999c; color: #ff999c; }
#blog h2, #blog h2::before { background-color: #ffb199; color: #ffb199; }
#contact h2, #contact h2::before { background-color: #ff7e5f; color: #ff7e5f; }

/* Styles for the About Me image */
#about-img {
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for scaling and shadow */
    border-radius: 10px; /* Optional: rounds the corners of the image */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Hover effect */
#about-img:hover {
    transform: scale(1.05); /* Slightly enlarges the image */
    box-shadow: 0 0 20px rgba(255, 194, 194, 0.787), /* Soft glow in the theme color */
                 0 0 30px rgba(255, 147, 111, 0.75); /* Secondary glow color */
}

/* Dark Mode Adjustments */
body.dark-mode #about-img {
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Ensures smooth transitions in dark mode */
}

body.dark-mode #about-img:hover {
    transform: scale(1.05); /* Maintains the scale effect */
    box-shadow: 0 0 20px rgba(255, 84, 68, 0.6), /* Adjusted glow intensity for dark mode */
                 0 0 30px rgba(255, 177, 153, 0.6); /* Slightly more intense for visibility */
}

/* Subtle glow effect for each section */
h2 {
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
}

/* 3D popping and shadow hover effect */
h2:hover {
    transform: scale(1.05); /* Slightly larger scale for a popping effect */
    box-shadow: 0 0 15px rgba(0,0,0,0.3); /* More pronounced shadow for depth */
}

h2:hover::before {
    box-shadow: 0 5px 15px rgba(0,0,0,0.4); /* More pronounced shadow for a 3D effect */
}

/* Dark mode adjustments for h2, keeping original text colors */
body.dark-mode h2 {
    background: rgba(0, 0, 0, 0.5); /* Darker background for contrast */
    /* No change to text color here to keep original colors */
    text-shadow: 
        1px 1px 0 rgba(255,255,255,0.2),
        2px 2px 0 rgba(255,255,255,0.15),
        3px 3px 0 rgba(255,255,255,0.1);
}

body.dark-mode h2::before {
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.1));
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.2);
}

/* Dark mode matching text and background colors for each section */
body.dark-mode #about h2, body.dark-mode #about h2::before { background-color: #374785; color: #ff6277; }
body.dark-mode #services h2, body.dark-mode #services h2::before { background-color: #5C4B51; color: #ff5177; }
body.dark-mode #portfolio h2, body.dark-mode #portfolio h2::before { background-color: #233B6E; color: #ff7599; }
body.dark-mode #testimonials h2, body.dark-mode #testimonials h2::before { background-color: #423F8D; color: #ff999c; }
body.dark-mode #blog h2, body.dark-mode #blog h2::before { background-color: #34262f; color: #ffb199; } /* Adjusted for better visibility */
body.dark-mode #contact h2, body.dark-mode #contact h2::before { background-color: #34262f; color: #ff7e5f; } /* Adjusted for better visibility */

/* Dark Mode Specific Section Styles */
/* Dark Mode Styles */


/* Specific Colors for Navigation Links Matching Section Titles (Light Mode) */
.nav-links a[href="#about"] { color: #ff6277;; }
.nav-links a[href="#services"] { color: #ff5177;  }
.nav-links a[href="#portfolio"] { color: #ff7599; }
.nav-links a[href="#testimonials"] { color: #ff9c9e; }
.nav-links a[href="#blog"] { color: #ffb199; }
.nav-links a[href="#contact"] { color: #ff7e5f; }

/* Dark Mode Styles - Ensuring colors remain consistent */
body.dark-mode .logo {
    color: #007aff; /* Explicitly setting the logo color for dark mode */
}

/* Applying specific colors to nav links in dark mode to match their light mode appearances */
body.dark-mode .nav-links a[href="#about"] { color: #ff6277;; }
body.dark-mode .nav-links a[href="#services"] { color: #ff5177;  }
body.dark-mode .nav-links a[href="#portfolio"] { color: #ff7599; }
body.dark-mode .nav-links a[href="#testimonials"] { color: #ff9c9e; }
body.dark-mode .nav-links a[href="#blog"] { color: #ffb199; }
body.dark-mode .nav-links a[href="#contact"] { color: #ff7e5f; }

/* Ensure these styles are placed after all other link and logo color styles to maintain specificity */



/* portfolio window styling  */

/* portfolio window styling */

/* Ensure base state has a perspective set for 3D effect */
.portfolio-window {
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    transform: translateZ(0);
    display: block;
    margin: 20px auto;
    border: 3px solid #ff7599;
    box-sizing: border-box;
    max-width: 1240px;
    width: 100%;
    aspect-ratio: 16 / 9; /* Adjust based on the preferred aspect ratio */
}

.portfolio-window {
    zoom: 0.8;
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
}

.portfolio-window:hover {
    transform: scale(1) translateZ(50px); /* Scales up and moves towards the user */
    box-shadow: 0 20px 30px rgba(0,0,0,0.5); /* Enhances depth with shadow */
}


/* Responsive Design Adjustments */


/* Navigation Link Styling */

.nav-links a {
    transition: transform 0.3s ease, color 0.3s ease; /* Smooth transition for transform and color */
    /* Ensuring enough space around the text for the 3D effect */
    margin-left: 4px; /* Add a small margin to the left of each link */
    display: inline-block; /* Ensures that margin and transform are applied correctly */
    
}

.nav-links a:hover {
    transform: scale(1.1); /* Slightly scale up the link */
    opacity: 0.5; /* Optional: Slightly reduce the opacity */
}


.nav-links a:hover {
    /* Basic hover effect settings */
    opacity: 0.9;

    /* 3D effect with adjusted shadows */
    transform: translateZ(0) translateY(-2px) scale(1.05); /* Adding translateZ for better layer handling */
    text-shadow:
        1px 1px 2px rgba(255, 8, 68, 0.7), /* Shadow for depth */
        -1px -1px 2px rgba(255, 177, 153, 0.7), /* Lighter shadow for contrast */
        0 0 5px rgba(255, 8, 68, 0.5), /* Additional depth */
        0 0 7px rgba(255, 177, 153, 0.5); /* Additional light shadow for contrast */

    transition: transform 0.3s ease, text-shadow 0.3s ease, opacity 0.3s ease; /* Smooth transition for the effects */
    position: relative; /* Ensuring the element is positioned relatively */
    z-index: 1; /* Raising the z-index to ensure it's above other elements */
    overflow: visible; /* Ensuring that no part of the text or effect is hidden */
}




/* Ensure the logo retains its color in dark mode */
body.dark-mode .logo .logo-icon {
    color: #ff4500 !important; /* Specific color for the logo icon */
}

/* ... [rest of your styles] ... */


/* ... [remaining styles including responsive adjustments] ... */
/* General Styles */
body {
    font-family: 'Arial', sans-serif;
    overflow-x: hidden; /* Prevent horizontal overflow */
    background-color:  #ff7e5f;

      }
      svg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
    }
     
    .links {
        position: fixed;
        bottom: 20px;
        right: 20px;
        font-size: 18px;
        font-family: sans-serif;
    }
    a {
        text-decoration: none;
        color: black;
        margin-left: 1em;
    }
    a:hover {
        text-decoration: underline;
    }
    a img.icon {
        display: inline-block;
        height: 1em;
        margin: 0 0 -0.1em 0.3em;
    }

    /* background-color: #f9f9f9;
    background-color: #f9f9f9;
    background-image: repeating-radial-gradient(circle at 0 0, transparent 0, rgba(249, 249, 249, 0.6) 29px), repeating-linear-gradient(rgba(196, 126, 133, 0.33), rgba(196, 126, 133, 0.6));
} */
/* ... other global styles ... */
  
  /* Continue with your existing CSS styles without altering the new background pattern */
  

/* ... other styles for nav and .nav-container ... */

p, a {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

a {
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

a:hover {
    color: #007aff;
}

/* Header and Navigation Styles */
header {
    width: 100%;
    background-color: rgba(10, 1, 1, 0.65); /* Light grey with some transparency */
    backdrop-filter: blur(10px); /* Blurring any content behind the header */
    color: #333; /* Dark grey text color */
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1), /* Adding a subtle shadow for depth */
                 0 0 20px rgba(0, 0, 0, 0.1), /* Additional shadow for 3D effect */
                 inset 0 -1px 2px rgba(0, 0, 0, 0.1); /* Inset shadow for more depth */
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0.5em 1em;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1); /* Thin bottom border for subtle edge */
}


header nav {
    display: flex; /* Flexbox layout for the navigation */
    justify-content: space-between; /* Spreads out nav items and toggle container */
    align-items: center; /* Vertically centers the items in the nav */
}

.nav-container {
    display: flex; /* Flexbox for direct children (links and toggle container) */
    justify-content: space-between; /* Spreads children across the full width */
    align-items: center; /* Aligns children vertically in the center */
    width: 100%; /* Full width of the header */
}

.nav-links {
    list-style: none; /* Removes default list bullets */
    display: flex; /* Displays the navigation links in a row */
    margin: 0; /* Resets default margin */
    padding: 0; /* Resets default padding */
}

.nav-links li {
    margin-right: 20px; /* Right margin for each list item */
    display: inline-block; /* Displays list items in line */
}

.nav-links li:last-child {
    margin-right: 0; /* Removes margin from the last list item */
}

.nav-links li a {
    color: #333; /* Text color for links */
    font-weight: bold; /* Makes the font weight bold */
    text-decoration: none; /* Removes underline from links */
    transition: color 0.3s ease-in-out; /* Smooth transition for color change */
}

/* Full-Screen Section Styles */

/* CSS Adjustments for Full-Screen Sections */

/* General Reset (if not already present) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Ensures padding doesn't affect overall width/height */
}


html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    /* scroll-behavior: smooth; Smooth scrolling effect for anchor links */
    height: 100%; /* Full height of the viewport */
}

body {
    scroll-snap-type: y mandatory; /* Enables vertical scroll snapping */
}

section {
    min-height: 100vh; /* Each section takes up minimum 100% of viewport height */
    scroll-snap-align: start; /* Aligns the start of each section at the start of the viewport */
    display: flex; /* Flexbox layout for content within each section */
    flex-direction: column; /* Stacks content vertically */
    align-items: center; /* Centers content horizontally */
    justify-content: center; /* Centers content vertically */
    padding: 15px; /* Padding within each section */
    text-align: center; /* Centers text within each section */
}
/* Enhanced 3D Effect for Active Navigation Link in Light Mode */
.nav-links a.active {
    font-weight: 900; /* Extra bold font weight */
    text-shadow: 
        0 1px 0 rgba(0, 0, 0, 0.7),
        0 2px 0 rgba(0, 0, 0, 0.6),
        0 3px 0 rgba(0, 0, 0, 0.5),
        0 4px 0 rgba(0, 0, 0, 0.4),
        0 5px 0 rgba(0, 0, 0, 0.3),
        0 6px 0 rgba(0, 0, 0, 0.2),
        0 7px 0 rgba(0, 0, 0, 0.1),
        0 8px 10px rgba(255, 255, 255, 0.4),
        0 10px 20px rgba(255, 255, 255, 0.3),
        0 15px 30px rgba(255, 255, 255, 0.2); /* Enhanced shadow for dark mode */
    transition: transform 0.3s ease, text-shadow 0.3s ease;
}

/* Smooth Interaction Effect on Hover in Light Mode */
.nav-links a.active:hover {
    transform: translateY(-2px) scale(1.03); /* Gentle lift and scale for a subtle pop */
}


/* Adjusting for dark mode */



/* Animation on Scroll (Fade-in effect) */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); } /* Start state of animation */
    to { opacity: 1; transform: translateY(0); } /* End state of animation */
}

section {
    animation: fadeIn 1s ease-out; /* Applies fade-in animation to each section */
    visibility: visible; /* Ensures sections are visible */
}


/* Dark Mode Toggle Switch */
.toggle-container {
    display: flex;
    align-items: center;
}

.mode-icon {
    display: inline-block;
    margin: 0 5px;
}

#toggle-dark-mode {
    height: 0;
    width: 0;
    visibility: hidden;
}

.toggle-label {
    cursor: pointer;
    text-indent: -9999px;
    width: 50px;
    height: 25px;
    background: grey;
    display: block;
    border-radius: 100px;
    position: relative;
}

.toggle-label:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 21px;
    height: 21px;
    background: #fff;
    border-radius: 90px;
    transition: 0.3s; /* Ensure smooth transition */
}


#toggle-dark-mode:checked + .toggle-label:after {
    left: 27px; /* Adjust to the correct position */
    transform: translateX(0); /* Remove unnecessary transform */
}

/* Full-Screen Section Styles */
section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    text-align: center;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

section {
    animation: fadeIn 1s ease-out;
    visibility: visible;
}

/* Section Specific Styles for Personalization */
/* Section Specific Styles for Light Mode */
/* Using lighter shades for a professional look */
/* Additional styles for the #about section */
#about {
    /* Ensure the section has enough space at the top */
    padding-top: 100px; /* Adjust this value as necessary */
    /* Any other specific styling you want for this section */
}

/* --section-background-light: rgba(255, 255, 255, 0.8); Light mode with reduced transparency */
/* --section-background-dark: rgba(0, 0, 0, 0.8); Dark mode with reduced transparency */


/* Define default light mode variables */
:root {
    /* Section colors matching the navigation bar */
    --color-about: #ff6277;
    --color-services: #ff5177;
    --color-portfolio: #ff7599;
    --color-testimonials: #ff9c9e;
    --color-blog: #ffb199;
    --color-contact: #ff7e5f;

    /* Light theme colors */
    --text-color: #830000d0; /* Default text color */
    --background-color: #fff; /* Default background color */

    /* Dark theme colors */
    --text-color-dark: #ff7f7f; /* White text for dark mode */
    --background-color-dark: #333; /* Dark background for dark mode */

}
/* Apply unique gradient backgrounds to each section with an extremely transparent spotlight */
#about {
    background: radial-gradient(circle at center, rgba(255, 98, 119, 0.2) 50%, transparent 70%);
}
#services {
    background: radial-gradient(circle at center, rgba(255, 81, 119, 0.2) 50%, transparent 70%);
}
#portfolio {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: visible;
    border-radius: 0;
}

#testimonials {
    background: radial-gradient(circle at center, rgba(255, 156, 158, 0.2) 50%, transparent 70%);
}
#blog {
    background: radial-gradient(circle at center, rgba(255, 177, 153, 0.2) 50%, transparent 70%);
}
#contact {
    background: radial-gradient(circle at center, rgba(255, 126, 95, 0.2) 50%, transparent 70%);
}



/* Additional CSS for sections */
section {
    position: relative;
    overflow: hidden;
    padding: 10px 20px; /* Adjust padding as needed */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 50000px; /* Rounded corners for each section */
    margin: 20px 0; /* Space between sections */
    transition: all 0.3s ease; /* Smooth transition for interactions */
}

/* Dark Mode Adjustments */
body.dark-mode #about,
body.dark-mode #services,
body.dark-mode #portfolio,
body.dark-mode #testimonials,
body.dark-mode #blog,
body.dark-mode #contact {
    background-color: var(--section-background-dark); /* Adjust if you want a specific dark mode behavior */
}

/* Ensure text colors and other elements inside sections are styled appropriately */
section h2, section p {
    color: var(--text-color);
    /* Rest of your p styles */
}

/* Light Mode Styles */
p {
    position: relative;
    padding: 5px 0; /* Adjust padding as needed */
    transition: color 0.3s ease, text-shadow 0.3s ease;
    cursor: default; /* Assuming the custom cursor is omitted for simplicity */
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 84, 68, 0.75), rgba(255, 255, 255, 0)); /* Intense central gradient for a brighter effect */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* Hide the text color, showing the gradient */
    text-shadow: none; /* Start without text-shadow */
}

p:hover {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 84, 68, 0.75) 50%, rgba(255, 255, 255, 0)); /* Brighter gradient */
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 1), /* Ultra-bright white glow */
        0 0 20px rgb(253, 125, 113, 1), /* Intense red glow */
        0 0 30px rgb(248, 155, 147, 1), /* More pronounced red glow */
        0 0 40px rgba(255, 177, 153, 1), /* Bright peach glow */
        0 0 50px rgba(255, 177, 153, 1); /* Maximum brightness peach glow */
}

/* Adjusting for a Brighter Dark Mode Glow */
/* Dark Mode Adjustments for a Subtler Effect */
body.dark-mode p {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 132, 68, 0.5), rgba(0, 0, 0, 0)); /* Dark mode start color */
}

body.dark-mode p:hover {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 177, 153, 0.5) 50%, rgba(0, 0, 0, 0)); /* Dark mode end color */
    text-shadow: 
        0 0 5px rgba(255, 132, 68, 0.5), /* Subtler glowing effect for dark mode */
        0 0 8px rgba(255, 132, 68, 0.5), /* Less pronounced glow for dark mode */
        0 0 11px #ff0844, /* Soft glow for dark mode */
        0 0 14px #ffb199; /* Soft and subtle glow for dark mode */
}

/* Light Mode Styles */
h3 {
    color: rgb(255, 52, 34); /* Darker color for light mode */
    transition: color 0.3s ease; /* Smooth transition for color changes */
    position: relative;
    padding: 5px 0; /* Adjust padding as needed */
    transition: color 0.3s ease, text-shadow 0.3s ease;
    cursor: default; /* Assuming the custom cursor is omitted for simplicity */
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 84, 68, 0.75), rgba(255, 255, 255, 0)); /* Intense central gradient for a brighter effect */
    -webkit-background-clip: text;
    background-clip: text;
    transition: color 0.3s ease;
    text-shadow: none; /* Start without text-shadow */
}

h3:hover {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 84, 68, 0.75) 50%, rgba(255, 255, 255, 0)); /* Brighter gradient */
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 1), /* Ultra-bright white glow */
        0 0 20px rgb(253, 125, 113, 1), /* Intense red glow */
        0 0 30px rgb(248, 155, 147, 1), /* More pronounced red glow */
        0 0 40px rgba(255, 177, 153, 1), /* Bright peach glow */
        0 0 50px rgba(255, 177, 153, 1); /* Maximum brightness peach glow */
}

/* Adjusting for a Brighter Dark Mode Glow */
/* Dark Mode Adjustments for a Subtler Effect */
body.dark-mode h3 {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 132, 68, 0.5), rgba(0, 0, 0, 0)); /* Dark mode start color */
    color: rgb(255, 177, 153); /* Lighter color for dark mode */
}

body.dark-mode h3:hover {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 177, 153, 0.5) 50%, rgba(0, 0, 0, 0)); /* Dark mode end color */
    text-shadow: 
        0 0 5px rgba(255, 132, 68, 0.5), /* Subtler glowing effect for dark mode */
        0 0 8px rgba(255, 132, 68, 0.5), /* Less pronounced glow for dark mode */
        0 0 11px #ff0844, /* Soft glow for dark mode */
        0 0 14px #ffb199; /* Soft and subtle glow for dark mode */
}


/* Further adjustments can be added here for responsiveness and other styling as needed */

/* Light Mode Section Backgrounds with Textures */
/* section#about {
    background-image: url('/backgrounds/light_full-bloom.png');
    background-repeat: repeat; 
    background-size: auto;
}

section#services {
    background-image: url('/backgrounds/light_wavy-dots.png');
    background-repeat: repeat; 
    background-size: auto;}

section#portfolio {
    background-image: url('/backgrounds/light_so-serious-white.png');
    background-repeat: repeat; 
    background-size: auto;}

section#testimonials {
    background-image: url('/backgrounds/light_fabric_1.png');
    background-repeat: repeat; 
    background-size: auto;}

section#blog {
    background-image: url('/backgrounds/light_45degreee_fabric.png');
    background-repeat: repeat; 
    background-size: auto;}

section#contact {
    background-image: url('/backgrounds/light_seamless_paper_texture.png');
    background-repeat: repeat; 
    background-size: auto;}

body.dark-mode section#about {
    background-image: url('/backgrounds/dark_footer_lodyas.png');
    background-repeat: repeat; 
    background-size: auto;}

body.dark-mode section#services {
    background-image: url('/backgrounds/dark_tactile_noise.png');
    background-repeat: repeat; 
    background-size: auto;}

body.dark-mode section#portfolio {
    background-image: url('/backgrounds/dark_micro_carbon.png');
    background-repeat: repeat; 
    background-size: auto;}

body.dark-mode section#testimonials {
    background-image: url('/backgrounds/dark_triangles.png');
    background-repeat: repeat; 
    background-size: auto;}

body.dark-mode section#blog {
    background-image: url('/backgrounds/dark_leather.png');
    background-repeat: repeat; 
    background-size: auto;}

body.dark-mode section#contact {
    background-image: url('/backgrounds/dark_zig zag wool.png');
    background-repeat: repeat; 
    background-size: auto;} */


/* ... [Rest of the existing styles for animations, responsiveness, etc.] ... */

/* Adjusted Media Query for Responsive Design */
@media (max-width: 768px) {
    /* Navigation items layout for smaller screens */
    .nav-links li {
        margin: 10px 0;
    }
    /* ... other responsive styles ... */
}


/* ... [other existing styles] ... */

/* Contact Form Styles */
#contact form {
    position: relative; /* Needed for absolute positioning of the button */
    max-width: 600px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Create two columns */
    grid-gap: 20px; /* Space between the columns */
    margin-top: 50px; /* Adjust this value to control the amount of upward movement */
}

#contact form input[type="text"],
#contact form input[type="email"] {
    width: 100%; /* Full width of the grid column */
}

#contact form textarea {
    grid-column: 1 / -1; /* Span across both columns */
    width: 100%;
    height: 150px; /* Adjust height as needed */
    resize: vertical;
}

#send-message {
    position: absolute; /* Absolute position */
    right: 0; /* Align to the right */
    bottom: -50px; /* Position below the form */
}
/* ... [other existing styles] ... */

/* Style for Character Counter */
#message-info {
    font-size: 0.8em; /* Smaller font size */
    color: #888; /* Faded grey color */
    margin-right: 0px; /* Add right margin to push it leftward */
    align-self: flex-end; /* Align at the end of the flex container */
    /* Other styles */
}

/* ... [other existing styles] ... */



/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    #contact form {
        grid-template-columns: 1fr; /* Single column layout for smaller screens */
    }
    #send-message {
        position: static; /* Reset position on smaller screens */
    }
}

/* ... [other existing styles] ... */

/* Content within sections */
.section-content {
    opacity: 0; /* Start elements as invisible */
    transform: translateY(20px); /* Start elements slightly below their final position */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Smooth transition for opacity and position */
}


/* When elements are in view, animate them to their final state */
.animate-on-scroll {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Move to final position */
}

/* Example of subtle background movement on scroll */
section {
    background-attachment: fixed; /* Keep the background fixed to create a parallax-like effect */
}
/* Light mode section backgrounds */
section {
    background-color: var(--section-background-light);
}

/* Dark mode section backgrounds */
body.dark-mode section {
    background-color: var(--section-background-dark);
}
/* Heading Styles within Sections */


/* Paragraph Styles within Sections */
section p {
    font-size: 1.2em;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Image Styles within Sections */
section img {
    max-width: 60%;
    height: auto;
    border-radius: 10px;
}

/* Additional Section Styles */
/* ... Add any specific styles for your sections ... */

/* Footer Styles */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1.5em 0;
    clear: both; /* Clear any floating elements */
    position: relative; /* Adjust position */
    width: 100%; /* Full width */
}
/* Responsive Design Adjustments */
@media (max-width: 768px) {
    /* Your existing responsive styles */
}


/* Dark Mode Styles */
body.dark-mode .logo,
body.dark-mode .nav-links a {
    color: inherit; /* This keeps the color the same as in light mode */
}

/* Ensure hover effects for nav links are consistent in dark mode */
body.dark-mode .nav-links a:hover {
    /* Here, you can add the same hover effect as in light mode or adjust as needed */
    transform: scale(1.1); /* Slightly scale up the link on hover */
    opacity: 0.8; /* Slightly reduce the opacity to give a hover feedback */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition */
}

/* To keep the colors of the nav bar words matching their respective sections,
   ensure you have defined the specific colors for each link in both light and dark modes. */
/* Example for a specific nav link matching the 'About' section color */
body.dark-mode .nav-links a[href="#about"] {
    color: #ff6277;; /* Adjust the color to match the 'About' section title color */
}
body.dark-mode {
    /* Apply dark theme variables */
    --text-color: var(--text-color-dark);
    --background-color: var(--background-color-dark);
}

body.dark-mode header {
    width: 100%;
    background-color: rgba(10, 1, 1, 0.65); /* Light grey with some transparency */
    backdrop-filter: blur(10px); /* Blurring any content behind the header */
    color: #333; /* Dark grey text color */
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1), /* Adding a subtle shadow for depth */
                 0 0 20px rgba(0, 0, 0, 0.1), /* Additional shadow for 3D effect */
                 inset 0 -1px 2px rgba(0, 0, 0, 0.1); /* Inset shadow for more depth */
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0.5em 1em;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1); /* Thin bottom border for subtle edge */
}

body.dark-mode nav ul li a {
    /* Remove background-color to avoid box-like sections for each link */
    color: #fff; /* White text color for navigation links */
    /* Other styles for navigation links */
}

/* Additional styles for the header and navigation bar might include */

body.dark-mode .navbar, body.dark-mode .nav-container {
    /* Ensure these containers do not have a separate background color */
    background-color: transparent;
}

/* Ensure the navbar is also transparent in dark mode */
body.dark-mode .navbar {
    background-color: transparent;
}


/* Dark Mode Styles for Inputs and Buttons */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode textarea {
    background-color: #666; /* Dark background for input fields */
    color: #fff; /* White text color for input fields */
    border: 1px solid #777; /* Subtle border for input fields */
}

body.dark-mode button {
    background-color: #777; /* Dark background for buttons */
    color: #fff; /* White text color for buttons */
    border-color: #888; /* Subtle border color for buttons */
}

/* ... [remaining styles including responsive adjustments] ... */

/* Additional Dark Mode Adjustments as Needed */
/* ... [previous styles] ... */

/* Responsive Design Adjustments for Smaller Screens */
@media (max-width: 768px) {
    /* Navigation items layout for smaller screens */
    nav ul li {
        display: block; /* Stack navigation items vertically */
        margin: 10px 0; /* Add space between each item */
    }

    /* Adjusting the navigation links to stack vertically */
    .nav-links {
        flex-direction: column; /* Change layout to vertical */
    }

    /* Adjusting the spacing for each navigation link */
    .nav-links li {
        margin-bottom: 10px; /* Add space below each link */
    }

    /* Increasing the font size of navigation links for better readability */
    .nav-links li a {
        font-size: 1.2em; /* Make the font size larger */
    }
/* Hamburger Menu Icon */
/* Always hide the menu icon by default */
/* Initial state: Display navigation links on large screens, hide menu icon */
.nav-links {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/* Ensuring the menu icon is hidden by default, and only shown on smaller screens */
.site-header .menu-icon {
    display: none !important;
    cursor: pointer;
    /* Style your menu icon here */
}


@media (max-width: 768px) {
    .nav-container .menu-icon {
        display: block !important; /* Show the menu icon on smaller screens */
        position: absolute;
        right: 20px;
        top: 20px;
        cursor: pointer;
    }

    .nav-container .nav-links {
        display: flex; /* Ensure the container is ready for animation */
        flex-direction: column;
        position: absolute;
        top: 57px; /* Adjust based on your header size */
        left: 50%;
        transform: translateX(-50%) translateY(-100%); /* Start off-screen */
        width: 90%;
        background-color: #00000096; /* Semi-transparent background color */
        transition: transform 0.5s ease; /* Animation effect */
        visibility: hidden; /* Hide the menu */
    }
    
    .nav-container .nav-links.active {
        transform: translateX(-50%) translateY(0); /* Slide into view */
        visibility: visible; /* Show the menu */
    }


    /* Adjusting the contact form layout */
    #contact form {
        grid-template-columns: 1fr; /* Single column layout for the form */
        grid-gap: 20px; /* Space between form elements */
    }

    /* Resetting position of the 'Send Message' button */
    #send-message {
        position: static; /* Align button within the normal document flow */
    }
}

/* ... [other styles including rounded sliders and image adjustments] ... */


.brand-name a {
    font-size: 1.5em;
    color: #333;
    text-decoration: none;
}

/* Styling for footer links */
footer a {
    color: #007aff;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}
/* Additional styles as needed */
}

/* ... [other styles including rounded sliders and image adjustments] ... */