body {
    background-color: #f7f7f7;
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden; /* Prevents unwanted scrollbars */
    font-family: sans-serif;
}

/* Centered wrapper to align both elements vertically */
.container-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 1. LARGER IFRAME CONTAINER */
.iframe-container {
    position: absolute;
    top: 40px; /* Leaves a small gap at the very top of the screen */
    bottom: 180px; /* Ends exactly 40px above the new menu positioning */
    width: 90%; /* Expanded width */
    max-width: 1200px; /* Allows it to scale beautifully on larger monitors */
}

.iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 16px;
    box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
    background-color: #ffffff;
}

/* 2. LOWER MENU POSITION */
.menu {
    position: fixed;
    bottom: 30px; /* Pushed much lower to the bottom edge of the screen */
    height: 50px;
    width: 325px;
    padding: 20px;
    border-radius: 22px;
    box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.options {
    height: 50px;
    width: 50px;
    font-size: 25px;
    border: none;
    background-color: #EFEFEF;
    border-radius: 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.2s ease;
}

.options:hover {
    box-shadow: rgba(0, 0, 0, 1) 0px 0px 0px 2px;
}

    img {
      width: 250px;
      height: 250px;
      display: block;
    }

.search-container {
      position: relative;
      margin-top: 20px; /* Positions container exactly 20px below the logo */
    }

    /* 2. Styled input field */
    .search-bar {
      font-family: Google Sans;
      width: 300px;
      /* padding order: top | right | bottom | left */
      /* Left padding is set to 45px to prevent text from overlapping the icon */
      padding: 18px 18px 18px 45px; 
      background-color: #ffffff;
      border: 1px solid #DADCE0;
      border-radius: 35px;
      font-size: 15px;
      outline: none;
      /* Smoothly animates the glow effect on hover/focus */
      transition: box-shadow 0.2s ease, border-color 0.2s ease; 
    }

    /* 3. Interactive States (Hover and Focus) */
    .search-bar:hover,
    .search-bar:focus {
      border-color: transparent;
      box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
    }

    /* 4. Absolute icon positioning inside the input */
    .search-icon {
      position: absolute;
      left: 18px; /* Matches the vertical padding alignment of the input */
      top: 50%;
      transform: translateY(-50%); /* Keeps icon vertically centered */
      color: #70757a; /* Subtle gray tint */
      font-size: 20px; /* Scales the icon cleanly */
      pointer-events: none; /* Allows user clicks to register on the input behind it */
    }