html {
            scroll-padding-top: 80px; /* or the exact height of your banner */
            scroll-behavior: smooth;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Helvetica, Arial, sans-serif;
        }

        body {
            background: url('assets/beach72_back.jpg') no-repeat center top/cover fixed;
        }
        /* ----- When a modal is open, prevent the page underneath from scrolling -------- */
                    body.modal-open{
                        overflow:hidden;          /* stops vertical scrolling */
                        height:100%;              /* prevents the page from “stretching” */
                        /* optional – keep the page from jumping when the scrollbar disappears */
                        padding-right:calc(100vw - 100%);   /* compensates for the removed scrollbar width */
                    }
        h1 {
            font-size: clamp(1.4rem, 3vw, 1.8rem);
        }

        p {
            font-size: clamp(0.9rem, 3vw, 1rem);
        }

    /* Banner Section --------------------------------------------------------- */
        .banner {
            position: sticky;
            top: 0;
            background: url('assets/beach_banner.jpg') no-repeat center top/cover;
            padding: 0.2rem 2rem 0.75rem 1rem;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            z-index: 1000;
            transition: height 0.3s ease;
            height: clamp(65px, 10vw, 85px);
        }
        .banner.scrolled {
            height: clamp(55px, 8vw, 70px);
        }
        .banner::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1.75px;
            background: #fff;
            z-index: 1;
        }
        .hamburger {
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: transparent;
            border: none;
            padding: 0.5rem;
            align-self: flex-end;
            margin-top: auto;
        }
        .hamburger div {
            width: 25px;
            height: 2.5px;
            background: #fff;
            margin: 2.5px 0;
            border-radius: 2px;
        }
        .menu {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 200px;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            padding: 2rem;
            z-index: 1001;
        }
        .menu.active {
            display: block;
        }
        .menu a {
            display: block;
            color: #fff;
            text-decoration: none;
            font-size: clamp(1rem, 3vw, 1.2rem);
            margin: 1rem 0;
        }
        .logo {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            transition: all 0.3s ease;
            align-self: flex-end;
            margin: 0;
            aspect-ratio: 300/81;
            width: clamp(200px, 25vw, 240px);
        }
        .logo img {
            width: 100%;
            height: auto;
            transition: all 0.3s ease;
            display: block;
        }
        .banner.scrolled .logo,
        .banner.tablet .logo {
            width: clamp(144px, 18vw, 173px);
        }
        .banner.phone .logo {
            width: clamp(100px, 13vw, 120px);
        }
        .nav-links {
            display: flex;
            gap: 1rem;
            align-self: flex-end;
        }
        .nav-links a {
            color: #fff;
            text-decoration: none;
            font-size: clamp(0.9rem, 3vw, 1rem);
        }

    /* Projects Section ------------------------------------------------*/
        .projects {
            background: none;
            padding: 1.75rem 1rem;
            text-align: center;
        }
        .projects h1 {
            color: #fff;
            margin-bottom: 1.75rem;
        }
        .gallery {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1.00rem;
        }
        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            width: clamp(160px, 20vw, 200px);
            height: clamp(207px, 25.9vw, 259px);
            transition: transform 0.3s ease;
        }
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        .gallery-item:hover img {
            transform: scale(1.1);
        }
        .gallery-item .overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 0;
            background: rgba(0, 0, 0, 0.6);
            transition: height 0.3s ease;
        }
        .gallery-item:hover .overlay {
            height: 50%;
        }
        .project-link-overlay {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            z-index: 10;
            display: block;
        }
        .gallery-item .label {
            position: absolute;
            bottom: 10px;
            left: 0;
            width: 100%;
            color: #fff;
            font-weight: bold;
            text-align: center;
            font-size: 1rem; /* Fixed font size for all screens */
            transition: font-size 0.3s ease, transform 0.3s ease; /* Added font-size to transition */
        }
        .gallery-item:hover .label {
            transform: translateY(-20px);
        }


    /* Awards Section --------------------------------------------------------*/
        .awards {
            background: #fff;
            padding: 2rem 1rem;
            text-align: center;
            transition: padding 0.3s ease;
        }
        .awards h1 {
            color: #af8949;
            margin-bottom: 1.75rem;
        }
        .awards-gallery {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: clamp(0.5rem, 2vw, 1rem); /* gap shrinks proportionally */
            max-width: 920px;
            margin: 0 auto;
            transition: gap 0.3s ease;
}
        .award-item {
            position: relative;
            width: clamp(120px, 18vw, 168px); /* scales with viewport */
            height: clamp(72px, 10vw, 101px);
            cursor: pointer;
            transform: scale(0.9); /* 🔹 start smaller */
            transition: transform 0.3s ease, opacity 0.3s ease;
        }
        .award-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 6px;
            transition: transform 0.3s ease;
        }
        /* Subtle hover shrink */
        .award-item:hover {
            transform: scale(0.97);
        }
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 1002;
            justify-content: center;
            align-items: center;
        }
        .modal.active {
            display: flex;
        }
        .modal-content {
            text-align: center;
            max-width: 500px;
            width: 90%;
            position: relative;
            background: #fff;
            padding: 1rem;
            border-radius: 10px;
        }
        .modal-content img {
            width: 100%;
            height: auto;
            max-width: 500px;
        }
        .modal-content p {
            color: #000;
            margin-top: 1rem;
        }
        .close-modal{
            position:absolute;
            top:-10px;
            right:-10px;
            background:#fff;
            border:none;
            border-radius:50%;
            width:30px;
            height:30px;
            font-size:1.2rem;
            cursor:pointer;
        }


    /* Talent Section ------------------------------------------------------------*/
        .talent {
            position: relative;
            background: #000; /* Fill uncovered areas */
            padding: 0;
            overflow: auto; /* Allow scroll for large images */
            min-height: clamp(300px, 50vh, 500px);
        }
        .sticky-image {
            position: sticky;
            top: 0;
            right: 0;
            float: right;
            width: auto;
            height: auto;
            z-index: 0;
            margin-left: 1rem; /* Reduced margin to bring image closer to text */
            margin-right: 4rem; /* Matches talent-container padding-left for symmetry */
        }
        .mobile-talent-image {
            display: none;
            margin-bottom: 0 !important;
            padding-bottom: 0 !important;
        }
        .talent-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 1rem 4rem 0rem 4rem; /* Adjusted for display */
            position: relative;
            z-index: 1;
            transition: padding 0.3s ease; /* Smooth transition for padding changes */
        }
        .talent-content {
            text-align: left;
            color: #fff;
            padding-right: 0;
            max-width: 600px;
        }
        .talent-content h1 {
            color: #af8949;
            padding: 1rem 0;
            font-size: clamp(1.4rem, 3vw, 1.8rem);
        }
        .talent-content p {
            font-size: clamp(0.9rem, 3vw, 1rem);
            text-align: left;
            line-height: 1.3875;
            padding: 0rem 0rem 1rem 0rem; /* Adjusted for display */
        }



    /* Testimonials Section -----------------------------------------------------------*/
        .testimonials {
            background: rgba(0, 0, 0, 0.18);
            /* background: url('assets/beach72_back.jpg') no-repeat center bottom/cover; */
            padding: 2rem 1rem 1rem;
            text-align: center;
        }
        .testimonials h1 {
            color: #fff;
            margin-bottom: 1.5rem;
        }
        .testimonials p {
            color: #fff;
            max-width: 600px;
            margin: 0 auto;
        }
        .testimonials p.bold {
            font-weight: bold;
            margin-bottom: 0.2rem;
        }
        .testimonials p.regular {
            margin-bottom: 2rem;
            font-size: clamp(0.8rem, 2.8vw, 0.9rem); /* Slightly smaller than the main p */
        }
        .testimonials p.email,
        .testimonials p.city {
            text-shadow: 1.5px 1.5px 3px rgba(0, 0, 0, 0.5); /* Adds a subtle shadow to text */
            margin-bottom: 0.2rem;
        }
        .testimonials img.banner-logo {
            width: 200px;
            margin: 1rem 0;
            filter: drop-shadow(1.5px 1.5px 3px rgba(0, 0, 0, 0.6)); /* Shadow follows the PNG's visible shape */
        }        
        .testimonials img.icon {
            width: 33px;
            height: 33px;
            margin: 0.2rem 0 0.1rem;
        }

    /* Closer Section -----------------------------------------------------------*/
        .closer {
            background: url('assets/beach72_back.jpg') no-repeat center bottom/cover;
            padding: 2rem 1rem 1rem;
            text-align: center;
        }
        .closer h1 {
            color: #fff;
            margin-bottom: 1.5rem;
        }
        .closer p {
            color: #fff;
            max-width: 600px;
            margin: 0 auto;
        }
        .closer p.bold {
            font-weight: bold;
            margin-bottom: 0.2rem;
        }
        .closer p.regular {
            margin-bottom: 2rem;
            font-size: clamp(0.8rem, 2.8vw, 0.9rem); /* Slightly smaller than the main p */
        }
        .closer p.email,
        .closer p.city {
            margin-bottom: 0.2rem;
        }
        .closer img.banner-logo {
            width: 200px;
            margin: 1rem 0;
        }
        .closer img.icon {
            width: 33px;
            height: 33px;
            margin: 0.2rem 0 0.1rem;
        }

    /* Footer Section ---------------------------------------------------- */
        .footer {
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            text-align: center;
            padding: 0.5rem;
        }
        .footer p {
            font-size: clamp(0.6rem, 2.0vw, 0.90rem);
        }



    /* Responsive Design================================================== */
    @media (max-width: 800px) {
        .sticky-image {
            display: none;
        }  
        .mobile-talent-image {
            display: block;
            margin: 0 auto; /* Center the image */
            width: 100%; /* 100% width at 500px */
            max-width: 360px;
            height: auto;
        }
        .talent-content {
            text-align: center;
            width: 100%; /* Full width to center <p> elements */
            max-width: none; /* Remove max-width constraint */
            padding-right: 0; /* Ensure no extra padding */
        }
        .talent-container {
            padding: 1rem 2rem 0rem 2rem; /* Reduced padding for less left/right spacing */
        }
    }

    @media (max-width: 768px) { /* Tablet */
        .banner.phone .menu {
            width: 100%;
            left: 50%;
            transform: translateX(-50%);
        }
        .nav-links {
            display: none;
        }
        .awards {
            padding: 1.5rem 0.75rem;
        }
    }

    @media (max-width: 600px) {
            /* make the whole section a bit tighter */
        .projects{
            padding:1.25rem 0.8rem;          /* less vertical padding */
        }
            /* shrink the gap between items so they fit better */
        .gallery{
            gap:0.6rem;                     /* from 1.00rem → 0.6rem */
        }
            /* shrink each gallery item */
        .gallery-item{
            /* we keep the clamp but tighten the max values */
            width:clamp(130px, 30vw, 170px);
            height:clamp(165px, 35vw, 210px);
        }
            /* make the label text a little smaller */
        .gallery-item .label{
            font-size:0.85rem;              /* from 1rem → 0.85rem */
            }
        .awards {
            padding: 1.25rem 0.5rem;
        }
        .footer p {
            font-size: 0.78rem;
        }    
    }    

    @media (min-width: 501px) {
        .sticky-image {
            margin-left: -3rem; /* Bring image closer to text */
        }
    }

    @media (max-width: 500px) {
        .mobile-talent-image {
            width: 100%; /* 100% width at 500px */
            max-width: 360px;
            padding-bottom: 0;
            min-height: auto;
        }
        .talent-content p {
            padding: 0rem; 
            margin-bottom: 1em; /* increases white space after a paragraph */
        }
    }
    
    @media (max-width: 480px) { /* Phone */
        .banner {
            height: clamp(50px, 7vw, 60px);
        }
        .banner.scrolled {
            height: clamp(45px, 6vw, 55px);
        }
        .banner.phone .menu {
            width: 72%;
            left: 0;
            transform: none;
        }
        .gallery-item .label {
            font-size: 0.8rem; /* Smaller font size for screens 480px and below */
        }
        .awards {
            padding: 1rem 0.5rem;
        }
        .testimonials img.icon {
            width: 24px;
            height: 24px;
        }    
        .closer img.icon {
            width: 24px;
            height: 24px;            
        }
        .footer p{
        font-size: 0.70rem;   /* even smaller for the tiniest screens */
    }
    }

    </style>