html, body
    {
    height: 100%;
    overscroll-behavior: none;
    }

body 
    {
    text-align: center;
    font-family: 'Ubuntu', sans-serif;
    background-color: #ffffff;
    }
.topmenu
    {
    background-color: #ffffff;
    padding: 5px;
    height: 50px;
    width: 80%;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    /*border-bottom: 1px solid #005252;*/
    }
.headlet
    {
    display: inline-block;
    font-size: 30px;
    font-weight: bold;
    color: #000;
    height: 45px;
    vertical-align: bottom;
    margin-left: 10px;
    font-family: 'Ubuntu', sans-serif;
    line-height: 25px;
    }
.divmenu
    {
    display: inline-block;
    width: calc(100% - 360px);
    text-align: right;
    margin-right: 10px;
    vertical-align: bottom;
    height: 40px;
    }
.menuitem
    {
    display: inline-block;
    margin-left: 20px;
    font-size: 16px;
    color: #005252;
    text-decoration: none;
    }
.menuitem:hover
    {
    text-decoration: underline;
    }
.divholder
    {
    width: 80%;
    height: calc(100vh - 300px);
    margin-left: auto;
    margin-right: auto;
    margin-top: 85px;
    /*border: 1px solid #ffffff;*/
    padding: 70px 0px;
    border-radius: 30px;
    }    
h1 
    {
    font-size: 48px;
    color: #333;
    }
.divh1 
    {
    font-family: 'Ubuntu', sans-serif;                        
    font-size: 35px;
    color: chocolate;
    font-weight:bold;
    }
.divh2
    {
    font-family: 'Ubuntu', sans-serif;                        
    font-size: 25px;
    color: chocolate;
    font-weight:bold;
    }
.divh3
    {
    font-family: 'Ubuntu', sans-serif;
    font-size: 20px;
    color: #005252;
    line-height:30px;
    }
img 
    {
    max-width: 100%;
    height: auto;
    }
form 
    {
    margin-top: 20px;
    }
input[type='email'] 
    {
    padding: 10px;
    width: 250px;
    max-width: 250px;
    font-size: 16px;
    }
input[type='submit'] 
    {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #000;
    color: #ffffff;
    border: none;
    cursor: pointer;
    }
.thank-you 
    {
    font-size: 24px;
    color: #000;
    }
.divfooter
    {
    transition: top 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position:fixed;
    background-color: #005252;
    color: #ffffff;
    /*padding: 40px 0;*/
    margin-top: 50px;
    top:calc(100vh - 95px);
    width:100%;
    }

.scrollingWords
    {
    display: inline-block; 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    /* This line adds a smooth transition effect to the opacity property of elements with the 'scrollingWords' class.
       When the opacity changes (e.g., for fade-in or fade-out effects), it will animate over 0.6 seconds using a cubic-bezier timing function for a natural feel. */
    transition: opacity 0.6s ease-in-out;
    }
    
.demobutton
    {
    display: inline-block;
    padding: 16px 36px;
    background: #d2691e;
    color: #ffffff;
    border-radius: 32px;
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(255,140,0,0.18);
    letter-spacing: 0.5px;
    }

#pageholder
    {
    opacity: 0.0;
    transition: opacity 1s ease;
    }

/* Mobile Menu Toggle Styles */
.mobile-menu-toggle
    {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 8px;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    }

.mobile-menu-toggle span
    {
    width: 25px;
    height: 3px;
    background-color: #005252;
    margin: 3px 0;
    transition: 0.3s;
    }

.mobile-menu-toggle.mobile-menu-open span:nth-child(1)
    {
    transform: rotate(-45deg) translate(-5px, 6px);
    }

.mobile-menu-toggle.mobile-menu-open span:nth-child(2)
    {
    opacity: 0;
    }

.mobile-menu-toggle.mobile-menu-open span:nth-child(3)
    {
    transform: rotate(45deg) translate(-5px, -6px);
    }

/* Mobile Responsive Styles */
@media screen and (max-width: 768px)
    {
    body 
        {
        text-align: center;
        font-family: 'Ubuntu', sans-serif;
        background-color: #ffffff;
        }
    /* Smooth scrolling for mobile */
    html
        {
        scroll-behavior: smooth;
        }
    .topmenu
        {
        padding: 5px 10px;
        height: 60px;
        }

    .headlet
        {
        font-size: 24px;
        margin-left: 5px;
        }

    .divmenu
        {
        position: fixed;
        top: 60px;
        left: 0;
        width: 100%;
        background-color: #ffffff;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        display: none;
        flex-direction: column;
        padding: 20px 0;
        z-index: 999;
        }

    .divmenu.mobile-menu-open
        {
        display: flex;
        }

    .menuitem
        {
        display: block;
        padding: 15px 20px;
        margin: 0;
        border-bottom: 1px solid #eee;
        font-size: 18px;
        }

    .menuitem:last-child
        {
        border-bottom: none;
        }

    .mobile-menu-toggle
        {
        display: flex;
        }

    .divholder
        {
        width: 95%;
        margin-top: 80px;
        padding: 20px 0;
        height: auto;
        min-height: calc(100vh - 200px);
        }

    .divcontent
        {
        width: 100% !important;
        display: block !important;
        margin-bottom: 30px;
        padding: 0 10px;
        }

    .divh1
        {
        font-size: 28px;
        line-height: 1.3;
        }

    .divh2
        {
        font-size: 22px;
        }

    .divh3
        {
        font-size: 18px;
        line-height: 1.5;
        }

    .demobutton
        {
        padding: 14px 28px;
        font-size: 1.1em;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        }

    /* Image galleries - show only first image on mobile */
    .divcontent[style*="width:25%"]
        {
        width: 100% !important;
        margin-bottom: 20px;
        }
        
    /* Hide 2nd and 3rd images in each group on mobile */
    .divcontent[style*="width:25%"]:nth-child(1),
    .divcontent[style*="width:25%"]:nth-child(2)
        {
        display: none !important;
        }

    /* Footer adjustments */
    .divfooter
        {
        position: relative;
        top: auto;
        margin-top: 50px;
        }

    .divfooter div[style*="width: 20%"]
        {
        width: 100% !important;
        margin-bottom: 30px;
        }

    /* Corner art adjustments */
    .corner-art
        {
        display: none;
        }

    /* Scrolling words adjustments for mobile */
    .scrollingWords
        {
        font-size: 24px;
        line-height: 1.3;
        }

    /* Better touch targets */
    .menuitem, .demobutton
        {
        min-height: 44px;
        }

    }

@media screen and (max-width: 480px)
    {
    body 
        {
        text-align: center;
        font-family: 'Ubuntu', sans-serif;
        background-color: #ffffff;
        }
    html
        {
        scroll-behavior: smooth;
        }
    .headlet
        {
        font-size: 20px;
        }

    .divh1
        {
        font-size: 24px;
        }

    .divh3
        {
        font-size: 16px;
        }

    .demobutton
        {
        padding: 12px 24px;
        font-size: 1em;
        min-height: 44px;
        }

    .divholder
        {
        width: 98%;
        padding: 15px 0;
        }

    .scrollingWords
        {
        font-size: 20px;
        }
    }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce)
    {
    html
        {
        scroll-behavior: auto;
        }
    }