@keyframes fadeAndrise {
  0% {
      opacity: 0;
      transform: translateY(2rem);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

/* Utility class to visually hide elements but keep them accessible to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-optical-sizing: auto;
    font-style: normal;
    text-decoration: none;
    border-width: 0;

  
  
      /*no select*/
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
       user-select: none;
       -webkit-tap-highlight-color: transparent;
  }

  /*html {
    background-color: var(--smc-pink);
  }*/

  :root {
    --smc-pink: #ff7bac;
}

.white {
    color: white !important;
}

.title-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    margin: 0;
    background: linear-gradient(
        to bottom,
        #87c5e8 0%,
        #87c5e8 50%,
        #f1f8fc 100%
    );
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between; /* Pushes logo to left and nav to right */
    align-items: center; /* Vertically aligns items in the header */
    padding: 30px 20px; /* Add some padding */
    z-index: 10;
}

.logo a {
    color: white;
    font-size: 24px; /* Example size */
}

nav ul {
    list-style: none; /* Removes default bullet points */
    display: flex; /* Aligns nav items horizontally */
}

nav ul li {
    margin-right: 100px; /* Adds space to the right of each nav item */
    font-size: 30px; /* Example size */
}

nav ul li:last-child {
    margin-right: 30px; /* Removes margin from the last nav item */
}

.hero-banner {
    position: relative; /* Establishes a positioning context for the SVG layers */
    margin-top: 80px;
    width: min(90vw, 1200px);
    height: clamp(400px, 100svh, 1000px);
    margin-left: auto;
    margin-right: auto;
    overflow: hidden; /* Ensures SVGs don't spill out if they are larger */
}

.hero-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Scales the SVG to maintain aspect ratio while filling the element's entire content box. Some parts of the SVG may be clipped. */
}
.hero-text {
    /* Default size for larger screens */
    width: max(70%, 690px);
    height: 70%;
    left: 50%;
    transform: translateX(-50%);
}

/* Z-index to control stacking order */
.hero-layer-1 { z-index: 1; } /* Bottom-most layer */
.hero-layer-2 { z-index: 2; }
.hero-layer-3 { z-index: 3; }
.hero-layer-4 { z-index: 4; } /* Top-most layer */
/* Media query for mobile devices */
@media (max-width: 767px) {
    .hero-banner {
        width: 100vw;
        margin: 80px 0 0 0;
    }
    .hero-text {
        width: min(100%, 690px);
    }
    .hero-cloud {
        width: 170%;
        left: 50%;
        transform: translateX(-55%);
    }

    .about-content {
        flex-direction: column; /* Stack items vertically */
    }

    .about-image {
        order: 1; /* Image appears first */
    }

    .about-text {
        order: 2; /* Text appears second */
    }

    .featured-items-grid {
        flex-direction: column;
        align-items: center;
        gap: 4rem;
    }
}

/* About Me Section */
.about-section {
    padding: 4rem 2rem;
    max-width: 1300px;
    margin: 0 auto; /* Center the section */
}

.about-section h2 {
    text-align: center;
    margin-bottom: 3rem;
    /* Style the h2 as a container for the SVG */
    height: clamp(30px, 6vw, 45px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-section h2 object {
    height: 150%;
    max-width: 100%;
}

.about-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.about-text {
    flex: 1.2; /* Give text slightly more space */
    min-width: 300px;
    text-align: center;
    font-size: 1.5rem;
    line-height: 1.6;
    color: white;
}

.about-text p {
    margin-bottom: 1em;
    font-weight: 500;
}

.about-image {
    flex: 1;
    min-width: 300px;
    text-align: center;
}

.about-image object {
    width: clamp(300px, 100%, 400px); /* Responsive width */
}

/* Featured Items Section */
.featured-items-section {
    padding: 4rem 2rem;
    max-width: 1300px;
    margin: 0 auto; /* Center the section */
}

.featured-items-section h2 {
    text-align: center;
    margin-bottom: 4rem;
    height: clamp(32px, 10vw, 45px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.featured-items-section h2 object {
    height: 150%;
    max-width: 100%;
}

.featured-items-grid {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap; /* Allows items to wrap on smaller screens if needed */
}

.featured-item {
    text-align: center;
    flex-basis: 300px; /* Base size for each item */
    flex-grow: 1;
    max-width: 350px;
}

.featured-item object {
    width: 100%;
    filter: drop-shadow(0px 4px 15px rgba(0,0,0,0.1));
}

.featured-item h3 {
    margin-top: 1rem;
    color: white;
    font-size: 2.5rem;
}

main {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
    margin-bottom: 32vw;
}
footer {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 80vw;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
    background: linear-gradient(
        to bottom,
        #8fb7d6 0%,
        #1f6094 25%,
        #1f6094 100%
    );
}

.footer-bg-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%; /* Fill the width of the footer */
    height: auto; /* Maintain aspect ratio, preventing stretching */
}

.footer-bg-layer.layer-1 {
    z-index: 1; /* Bottom-most image layer */
}
.footer-bg-layer.layer-2 {
    z-index: 2; /* Middle image layer */
}
.footer-bg-layer.layer-3 {
    z-index: 3; /* Top-most image layer */
}

.footer-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: min(8vw, 100px);
    box-sizing: border-box;
    mix-blend-mode: luminosity;
}

.footer-text {
    color: #e0e0e0;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.footer-icons {
    display: flex;
    gap: 2rem;
}

.footer-icon {
    width: clamp(50px, 17vw, 80px);
    height: clamp(50px, 17vw, 80px);
    transition: transform 0.2s ease-out;
    pointer-events: none;
}

.footer-icons a:hover .footer-icon {
    transform: scale(1.1);
}

/*@media (prefers-color-scheme: dark) {
    .container {
        background: linear-gradient(
            to bottom,
            #000000 0%,
            #0d1b21 50%,
            #0f1c21 62.5%,
            #272523 75%,
            #563627 87.5%,
            #b15730 100%
        );
    }
    footer {
        background: linear-gradient(
            to bottom,
            #855d4c 0%,
            #001b30 25%,
            #001b30 100%
        );
    }
}