body {
    background-color: #FFFFFF; /* White background */
    color: #333333; /* Dark gray text for readability */
    font-family: Arial, sans-serif; /* Original font */
    margin: 0;
    padding: 0;
}

header {
    background-color: #008080; /* Teal header */
    color: white;
    padding: 10px 20px;
    text-align: center;
}
.brand-title {
    font-family: 'Quicksand', serif;
    font-weight: 300;
    font-size: 1.8rem;
    color: white;
    margin: 0;
}
nav {
    background-color: #006666; /* Darker teal */
    padding: 6px 10px;
    text-align: center;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 8px 12px; /* Increased for touch */
    margin: 0 10px;
    min-height: auto; /* Touch-friendly size */
    display: inline-block; /* Ensure tap area */
    line-height: 1.4;
    transition: background-color 0.3s;
}

nav a:hover, nav a:focus {
    background-color: #004C4C; /* Even darker teal */
}

button {
    background-color: #008080;
    color: white;
    border: none;
    padding: 12px 24px; /* Increased for touch */
    min-width: 44px; /* Touch-friendly */
    min-height: 44px; /* Touch-friendly */
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover, button:focus {
    background-color: #006666;
}

section {
    padding: 15px; /* Reduced for mobile */
    background: #F9F9F9; /* Light gray for contrast */
    margin: 10px;
    border-radius: 8px;
}

section h2, section h3 {
    font-family: Arial, sans-serif; /* Original font */
    font-size: 1.3rem; /* Adjusted for mobile */
    color: #008080; /* Teal headings */
    margin: 15px 0 10px; /* Reduced margin */
    text-align: center;
}

.centered-intro {
    text-align: center; /* Center specific intro text */
}

.values-list {
    display: flex;
    flex-wrap: nowrap; /* Single row */
    justify-content: space-between;
    margin-top: 15px;
}

.value-item {
    flex: 1;
    margin: 0 10px;
    text-align: center;
    padding: 15px; /* Slightly reduced */
    background: #FFFFFF; /* White oval */
    border-radius: 50% / 30%; /* Oval shape */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Disable hover animation on mobile */
@media (max-width: 430px) {
    .value-item:hover {
        animation: none;
    }
}

@keyframes bounce {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    75% { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}

.portfolio-container {
    position: relative;
    margin: 20px 0;
    padding: 0 40px; /* Space for arrows */
}

.portfolio-items {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 20px;
    padding: 10px 0;
    scrollbar-width: none; /* Hide scrollbar Firefox */
    -webkit-overflow-scrolling: touch; /* Smooth iOS scrolling */
}

.portfolio-items::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
}

.portfolio-item {
    flex: 0 0 90%; /* Scale to viewport */
    max-width: 300px; /* Cap for larger iPhones */
    text-align: center;
    background: #FFFFFF; /* Solid white background */
    padding: 15px;
    border-radius: 10px;
    scroll-snap-align: center;
    animation: slideIn 0.5s ease-out forwards;
    opacity: 0; /* For entrance */
    transition: transform 0.3s;
    overflow: hidden; /* Prevent zoom overflow */
}

.portfolio-item:nth-child(1) { animation-delay: 0.1s; }
.portfolio-item:nth-child(2) { animation-delay: 0.2s; }
.portfolio-item:nth-child(3) { animation-delay: 0.3s; }
.portfolio-item:nth-child(4) { animation-delay: 0.4s; }

/* Disable hover on mobile */
@media (max-width: 430px) {
    .portfolio-item:hover {
        transform: none;
    }
}

.portfolio-item img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    max-height: 200px;
    object-fit: cover;
    border: 2px solid #008080; /* Teal border */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
    image-rendering: auto; /* Maintain sharpness */
}

/* Hover zoom for Project Management Tools and Notion Workspace images */
#tools-container .portfolio-item img,
#notion-container .portfolio-item img {
    transition: transform 0.3s ease; /* Smooth zoom transition */
}

#tools-container .portfolio-item img:hover,
#notion-container .portfolio-item img:hover {
    transform: scale(1.1); /* 10% zoom on hover */
}

.portfolio-item h3 {
    margin: 10px 0;
    font-size: 1.1rem; /* Adjusted for mobile */
    color: #333333;
}

.portfolio-item p {
    font-size: 0.85rem; /* Adjusted for mobile */
    color: #666666;
}

.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #666666; /* Simple gray */
    color: white;
    border: none;
    padding: 12px; /* Increased for touch */
    min-width: 44px; /* Touch-friendly */
    min-height: 44px; /* Touch-friendly */
    cursor: pointer;
    font-size: 1.2em;
    border-radius: 50%;
    transition: background-color 0.3s;
    z-index: 10; /* Ensure arrows stay above portfolio items */
}

.scroll-arrow:hover, .scroll-arrow:focus {
    background: #4d4d4d; /* Slightly darker gray for hover */
}

.left-arrow {
    left: 5px; /* Adjusted to prevent overlap */
}

.right-arrow {
    right: 10px;
}

#contact p {
    text-align: center;
}

#services li strong {
    color: #008080; /* Teal for service item titles */
}

#services ul {
    list-style: none; /* Remove default bullets */
    padding-left: 20px; /* Adjust spacing for checkmarks */
}

#services li {
    position: relative; /* For positioning the checkmark */
    padding-left: 30px; /* Space for the checkmark */
    margin-bottom: 10px; /* Space between items */
}

#services li:before {
    content: "✔"; /* Black checkmark Unicode */
    position: absolute;
    left: 0;
    color: #333333; /* Dark gray/black */
    font-size: 1.2em; /* Slightly larger for visibility */
}

footer {
    text-align: center; /* Center footer text */
    padding: 10px;
}

@keyframes slideIn {
    0% { opacity: 0; transform: translateX(50px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* Media query for iPhone screens */
@media (max-width: 430px) {
    .values-list {
        flex-wrap: wrap; /* Stack vertically */
        flex-direction: column;
        align-items: center;
    }

    .value-item {
        width: 80%; /* Full width on small screens */
        margin: 10px 0;
    }

    section {
        padding: 10px; /* Further reduce padding */
    }

    .portfolio-container {
        padding: 0 20px; /* Reduce arrow space */
    }

    /* Disable hover zoom on mobile */
    #tools-container .portfolio-item img:hover,
    #notion-container .portfolio-item img:hover {
        transform: none; /* No zoom on mobile */
    }
}