/*
COPYRIGHT NOTICE

Copyright © 2024 Elements Creative (https://www.elementscreative.in). All Rights Reserved.

All textual and multimedia content, design, layout, and underlying codebase, including but not restricted to markups, stylesheets, scripts, and databases, which constitute this “website” are the intellectual property of Elements Creative (https://www.elementscreative.in). Any third-party copyrighted or trademarked content presented or re-produced is with permission, implied understanding, or on the grounds of fair dealing covered under Section 52 of the Indian Copyright Act, 1957. Any unauthorized use, reproduction, or distribution of the content without express permission from the copyright holder(s) is strictly prohibited. All rights not expressly granted herein are reserved to be enforced to the fullest extent of the law.

For permissions or inquiries, contact Elements Creative at info@elementscreative.in.

DISCLAIMER

Access to this website, i.e., elementscreative.in, including but not restricted to any of its subdomains or internal links, is provided by the copyright holders and contributors “as is”, and any express or implied warranties are disclaimed. In no event shall the copyright holders or contributors be liable for any direct, indirect, incidental, special, exemplary, or consequential damages however caused, and on any theory of liability, arising in any way out of the use of this website or its contents thereof, even if advised of the possibility of such damage.

The COPYRIGHT NOTICE and DISCLAIMER are effective from 22 October 2024.
*/

:root {
    --primary-color: #0A192F;
    --secondary-color: #2E8B57;
    --background-color: #F5F3EF;
    --text-color: #141414;
    --font-family: 'Inter', sans-serif;
    --line-height: 1.3;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    line-height: var(--line-height);
    color: var(--text-color);
    background-color: var(--background-color);
    font-size: 14px;
}

::selection {
    background-color: #fbd714;
    color: #141414;
    text-shadow: none;
}

::-moz-selection {
    background-color: #fbd714;
    color: #141414;
    text-shadow: none;
}

::-webkit-selection {
    background-color: #fbd714;
    color: #141414;
    text-shadow: none;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1rem;
	overflow-x: hidden;
    position: relative;
}

/* Header and Navigation */
.sticky-header {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

.header-content {
    display: flex;
    justify-content: flex-end;
}

.nav-island {
    background-color: var(--primary-color);
    border-radius: 25px;
    padding: 10px 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

nav ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    margin-left: 15px;
}

nav ul li:first-child {
    margin-left: 0;
}

.icon-link img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    transition: transform 0.3s ease;
    filter: brightness(0) invert(1);
}

@media (hover: hover) {
    .icon-link:hover img {
        transform: scale(1.1);
    }
}

/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: opacity 2s ease-in-out;
    z-index: 1;
    filter: brightness(0.8);
}

.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: #F5F3EF;
    max-width: 800px;
    padding: 2rem;
}

.company-name {
    font-size: 6rem;
    font-weight: 700;
    letter-spacing: -2px;
    margin-bottom: 1rem;
    line-height: 1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5),
                 0 0 20px rgba(0, 0, 0, 0.4),
                 0 0 30px rgba(0, 0, 0, 0.3);
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
}

.elements {
    display: block;
    text-transform: lowercase;
}

.creative {
    display: block;
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: lowercase;
    color: var(--secondary-color);
    margin-top: -0.5rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5),
                 0 0 15px rgba(0, 0, 0, 0.3);
    -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.2);
}

.hero .subtitle {
    font-size: 1.5rem;
    font-weight: 300;
    margin-top: 2rem;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease-out 0.5s forwards;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5),
                 0 0 10px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
}

.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
    z-index: 2;
    pointer-events: none;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    opacity: 0;
    animation: fadeIn 1s ease-out 1.5s forwards;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mouse {
    width: 30px;
    height: 50px;
    border: 2px solid #F5F3EF;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 2px;
}

.wheel {
    width: 3px;
    height: 10px;
    background-color: #F5F3EF;
    border-radius: 3px;
    animation: scrollVertical 1.5s infinite;
}

@keyframes scrollVertical {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(15px); }
}

@keyframes fadeIn {
    to { opacity: 1; }
}

@media (hover: hover) {
    .scroll-indicator:hover {
        transform: translateX(-50%) scale(1.1);
    }

    .scroll-indicator:hover .mouse {
        border-color: var(--secondary-color);
    }

    .scroll-indicator:hover .wheel {
        background-color: var(--secondary-color);
    }
}

/* Company Profile Section */
.company-profile {
    padding: 3rem 0;
}

.company-profile h2 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: var(--primary-color);
}

.company-profile p {
    margin-bottom: 1rem;
	font-size: 0.9rem;
}

/* Vision Section */
.vision {
    padding: 3rem 0;
    background-color: var(--primary-color);
    color: #F5F3EF;
}

.vision h2 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: var(--secondary-color);
}

.vision p {
    line-height: 1.3;
	font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* Verticals Section */
.verticals {
    padding: 3rem 0;
}

.verticals h2 {
    font-size: 1.8rem;
    margin-bottom: 2rem;
    color: var(--primary-color);
}

.vertical-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.vertical-item {
    flex: 0 1 calc(33.333% - 2rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.vertical-item:hover {
    transform: translateY(-5px);
}

.vertical-item img {
    width: 60px;
    height: 60px;
    margin-bottom: 1rem;
}

.vertical-item h3 {
    font-size: 1.2rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.vertical-item p {
    font-size: 0.9rem;
    color: var(--text-color);
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Projects Section */
.projects {
    padding: 1rem 0 2rem;
}

.filters {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.filters input[type="text"],
.filters select {
    flex: 1;
    min-width: 120px;
    padding: 0.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #f9f9f9;
    color: var(--text-color);
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.filters input[type="text"]:focus,
.filters select:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 2px rgba(46, 139, 87, 0.2);
}

.filters input[type="text"]::placeholder,
.filters select::placeholder {
    color: #999;
}

.filters select {
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 0.7em top 50%;
    background-size: 0.65em auto;
    padding-right: 1.5em;
}

.project-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.project-card {
    background-color: #FFFFFF;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.project-card a {
    text-decoration: none;
}

@media (hover: hover) {
    .project-card:hover {
        transform: translateY(-3px);
    }
}

.project-card .thumbnail {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    overflow: hidden;
}

.project-card .thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-card .category-label {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    padding: 4px 8px;
    font-size: 0.6rem;
    z-index: 1;
}

.project-card .play-button,
.project-card .external-link {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background-color: rgba(10, 25, 47, 0.8);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.project-card .play-button::after {
    content: '';
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 10px solid #ffffff;
    margin-left: 3px;
}

.project-card .external-link::after {
    content: '\1F517\FE0E';
    color: #F5F3EF;
    font-size: 20px;
}

@media (hover: hover) {
    .project-card .play-button,
    .project-card .external-link {
        opacity: 0;
    }

    .project-card:hover .play-button,
    .project-card:hover .external-link {
        opacity: 1;
    }

    .project-card .play-button:hover,
    .project-card .external-link:hover {
        background-color: var(--primary-color);
    }
}

.project-card .info {
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.project-card h3 {
    margin-bottom: 0.3rem;
    font-size: 0.8rem;
    color: var(--primary-color);
    line-height: 1.3;
    flex-grow: 1;
}

.project-card p {
    color: var(--secondary-color);
    font-size: 0.7rem;
    margin-bottom: 0.2rem;
}

/* People Section */
.people {
    padding: 1rem 0 2rem;
}

.people-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.person-card {
    background-color: #FFFFFF;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

@media (hover: hover) {
    .person-card:hover {
        transform: translateY(-3px);
    }
}

.person-card .thumbnail {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    overflow: hidden;
}

.person-card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.person-card .info {
    padding: 0.8rem;
    text-align: center;
}

.person-card h3 {
    margin-bottom: 0.2rem;
    font-size: 0.9rem;
    color: var(--primary-color);
}

.person-card p {
    color: var(--secondary-color);
    font-size: 0.8rem;
}

.info-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 18px;
    height: 18px;
    background-color: rgba(10, 25, 47, 0.8);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #F5F3EF;
    font-size: 12px;
    font-weight: bold;
}

@media (hover: hover) {
    .info-button:hover {
        background-color: var(--secondary-color);
    }
}

/* Clients Section */
.clients {
    padding: 1rem 0 1rem;
}

.client-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin-top: 1rem;
}

.client-logo {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.client-logo img {
    max-width: 100%;
    max-height: 100%;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

@media (hover: hover) {
    .client-logo:hover img {
        filter: grayscale(0%);
        opacity: 1;
    }
}

/* Achievements and Testimonials Sections */
.achievements, .testimonials {
    padding: 3rem 0 3rem;
    overflow: hidden;
}

.achievements {
    background-color: var(--primary-color);
    color: #F5F3EF;
}

.achievements h2, .testimonials h2 {
    font-size: 1.8rem;
    margin-bottom: 2rem;
}

.achievements h2 {
    color: var(--secondary-color);
}

.testimonials h2 {
    color: var(--primary-color);
}

.carousel-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 1rem 0;
}

.carousel-container::before,
.carousel-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}

.carousel-container::before {
    left: 0;
    background: linear-gradient(to right, var(--background-color), transparent);
}

.carousel-container::after {
    right: 0;
    background: linear-gradient(to left, var(--background-color), transparent);
}

.achievements .carousel-container::before,
.achievements .carousel-container::after {
    background: linear-gradient(to right, var(--primary-color), transparent);
}

.achievements .carousel-container::after {
    background: linear-gradient(to left, var(--primary-color), transparent);
}

.achievement-carousel, .testimonial-carousel {
    display: flex;
    animation: scroll 60s linear infinite;
}

.achievement-item, .testimonial-item {
    flex: 0 0 auto;
    width: 300px;
    margin-right: 1rem;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.achievement-item a,
.achievement-carousel a {
    text-decoration: none;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-100% / 2));
    }
}

.achievement-carousel:hover,
.testimonial-carousel:hover {
    animation-play-state: paused;
}

.achievement-item {
    position: relative;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
}

.achievement-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.achievement-item .award-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: #F5F3EF;
    padding: 0.5rem;
    font-size: 0.9rem;
    text-align: center;
}

.achievement-item .external-link {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background-color: rgba(10, 25, 47, 0.8);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.achievement-item .external-link::after {
    content: '\1F517\FE0E';
    color: #F5F3EF;
    font-size: 16px;
}

@media (hover: hover) {
    .achievement-item .external-link:hover {
        background-color: var(--secondary-color);
    }
}

.testimonial-item {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.testimonial-item .text {
    font-style: italic;
    margin-bottom: 1rem;
    line-height: 1.6;
    flex-grow: 1;
}

.testimonial-item .author-info {
    text-align: right;
    margin-top: auto;
}

.testimonial-item .author {
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 0.2rem;
}

.testimonial-item .company {
    color: var(--secondary-color);
    font-size: 0.8rem;
}

/* Contact Section */
.contact {
    padding: 3rem 0 4rem;
    background-color: var(--background-color);
}

.contact h2 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: var(--primary-color);
}

.contact-content {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}

.contact-info {
    flex: 1;
}

.contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.8rem;
}

.contact-icon {
    width: 18px;
    height: 18px;
    margin-right: 0.8rem;
    fill: var(--primary-color);
}

.contact-item p,
.contact-item a {
    margin: 0;
    font-size: 14px;
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s ease;
    line-height: 1.3;
}

.contact-item a:hover {
    color: var(--secondary-color);
}

.map-container {
    flex: 1;
    height: 250px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Footer */
footer {
    background-color: var(--primary-color);
    color: var(--background-color);
    padding: 1rem 0;
    text-align: center;
}

.footer-content {
    font-size: 0.8rem;
}

/* Collapsible Styles */
.collapsible-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--primary-color);
    transition: 0.3s;
    background-color: transparent;
    font-size: 1.2rem;
}

@media (hover: hover) {
    .collapsible-header:hover {
        color: var(--secondary-color);
    }
}

.toggle-icon {
    font-size: 1.2rem;
    font-weight: bold;
}

.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: transparent;
}

.collapsible-header.active + .collapsible-content {
    max-height: 2000px;
    padding-bottom: 1rem;
}

/* Add padding for cards within collapsibles */
.collapsible-content .project-cards,
.collapsible-content .people-cards {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 1000px;
    aspect-ratio: 16 / 9;
}

.video-content {
    background-color: #000;
    padding: 0;
}

.video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#video-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.modal-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1001;
}

.close-btn {
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.close-btn::before,
.close-btn::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 2px;
    background-color: var(--secondary-color);
}

.close-btn::before {
    transform: rotate(45deg);
}

.close-btn::after {
    transform: rotate(-45deg);
}

@media (hover: hover) {
    .close-btn:hover {
        background-color: var(--secondary-color);
    }
    
    .close-btn:hover::before,
    .close-btn:hover::after {
        background-color: #fff;
    }
}

.bio-content {
    background-color: #F5F3EF;
    padding: 20px;
    border-radius: 8px;
    max-width: 400px;
    width: 90%;
}

.bio-content h3 {
    margin-bottom: 10px;
    color: var(--primary-color);
}

.bio-content p {
    font-size: 14px;
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .sticky-header {
        top: 10px;
        right: 10px;
    }

    .nav-island {
        padding: 8px 15px;
    }

    .icon-link img {
        width: 18px;
        height: 18px;
    }

    .company-name {
        font-size: 4rem;
    }

    .creative {
        font-size: 2rem;
    }
    
    .hero .subtitle {
        font-size: 1.2rem;
    }

    .hero {
        height: 100vh;
        min-height: -webkit-fill-available;
    }

    .modal-content {
        width: 100%;
        height: 100%;
        max-width: none;
        aspect-ratio: auto;
    }

    .video-wrapper {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 100%;
        height: 56.25vw; /* 16:9 aspect ratio */
    }

    .modal-controls {
        top: 20px;
        right: 20px;
    }

    .close-btn {
        width: 50px;
        height: 50px;
    }

    .close-btn::before,
    .close-btn::after {
        width: 25px;
    }

    .project-card .play-button,
    .project-card .external-link {
        width: 50px;
        height: 50px;
        opacity: 1;
    }

    .project-card .play-button::after {
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-left: 12px solid #F5F3EF;
        margin-left: 4px;
    }

    .project-card .external-link::after {
        font-size: 25px;
    }

    .contact-content {
        flex-direction: column;
    }

    .map-container {
        width: 100%;
        margin-top: 1rem;
    }

    .vertical-item {
        flex: 0 1 calc(50% - 2rem);
    }

    .bio-content {
        width: 95%;
        max-width: none;
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .sticky-header {
        top: 5px;
        right: 5px;
    }

    .nav-island {
        padding: 6px 12px;
    }

    .icon-link img {
        width: 16px;
        height: 16px;
    }

    .company-name {
        font-size: 3rem;
    }

    .creative {
        font-size: 1.5rem;
    }
    
    .hero .subtitle {
        font-size: 1rem;
    }

    .hero-content {
        padding: 1rem;
    }

    .scroll-indicator {
        bottom: 20px;
    }

    .mouse {
        width: 25px;
        height: 40px;
    }

    .wheel {
        height: 8px;
    }

    .footer-content {
        font-size: 0.7rem;
    }

    .project-card .play-button,
    .project-card .external-link {
        width: 40px;
        height: 40px;
        opacity: 1;
    }

    .project-card .play-button::after {
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 9px solid #F5F3EF;
        margin-left: 3px;
    }

    .project-card .external-link::after {
        font-size: 15px;
    }

    .close-btn {
        width: 30px;
        height: 30px;
    }

    .close-btn::before,
    .close-btn::after {
        width: 15px;
    }

    .contact h2 {
        font-size: 1.5rem;
    }

    .contact-item p,
    .contact-item a {
        font-size: 13px;
    }

    .contact-icon {
        width: 16px;
        height: 16px;
        margin-right: 0.6rem;
    }

    .vertical-item {
        flex: 0 1 100%;
    }

    .filters {
        flex-direction: column;
    }

    .filters input[type="text"],
    .filters select {
        width: 100%;
    }

    .project-cards {
        grid-template-columns: 1fr;
    }

    .people-cards {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    .achievement-item,
    .testimonial-item {
        width: 250px;
    }

    .achievement-item img {
        height: 150px;
    }

    .testimonial-item {
        padding: 1rem;
    }

    .testimonial-item .text {
        font-size: 0.9rem;
    }

    .client-logo {
        width: 60px;
        height: 60px;
    }

    .collapsible-header {
        font-size: 1rem;
    }

    .toggle-icon {
        font-size: 1rem;
    }

    .bio-content {
        padding: 10px;
    }

    .bio-content h3 {
        font-size: 1.2rem;
    }

    .bio-content p {
        font-size: 0.9rem;
    }
}

/* Additional responsive adjustments */
@media (max-width: 360px) {
    .company-name {
        font-size: 2.5rem;
    }

    .creative {
        font-size: 1.2rem;
    }

    .hero .subtitle {
        font-size: 0.9rem;
    }

    .achievement-item,
    .testimonial-item {
        width: 220px;
    }
}

/* Ensure proper display on iOS devices */
@supports (-webkit-touch-callout: none) {
    .hero {
        height: -webkit-fill-available;
    }
}

/* Improve touch interactions on mobile devices */
@media (hover: none) {
    .project-card .play-button,
    .project-card .external-link,
    .info-button {
        opacity: 1;
    }

    .scroll-indicator,
    .client-logo img {
        transition: none;
    }
}

/* Optimize for print */
@media print {
    .sticky-header,
    .scroll-indicator,
    .modal,
    .video-wrapper,
    .map-container {
        display: none;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }

    .container {
        width: 100%;
        max-width: none;
    }

    a {
        text-decoration: underline;
    }

    h1, h2, h3 {
        page-break-after: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 2cm;
    }
}