body {

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 100vh;

    margin: 0;

    background-color: #f0f0f0;

    font-family: Arial, sans-serif;

    padding: 20px;

    box-sizing: border-box;

}



.browser-frame {

    width: 800px;

    height: 500px;

    background-color: #fff;

    border-radius: 10px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

    overflow: hidden;

    display: flex;

    flex-direction: column;

}



.browser-header {

    background-color: #209F8C;

    padding: 10px 15px;

    display: flex;

    align-items: center;

    border-top-left-radius: 10px;

    border-top-right-radius: 10px;

    flex-shrink: 0;

}



.traffic-lights .dot {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    margin-right: 5px;

    display: inline-block;

}



.traffic-lights .dot.red { background-color: #FC6058; }

.traffic-lights .dot.yellow { background-color: #FDBC40; }

.traffic-lights .dot.green { background-color: #34C748; }



.address-bar {

    flex-grow: 1;

    height: 25px;

    background-color: rgba(255, 255, 255, 0.3);

    border-radius: 5px;

    margin: 0 20px;

    padding: 10px 0 0 0;

    text-align: center;



}

.address-bar .simtxt {

    font-weight: bold;

    color:#046C59;

    font-size: 1em;



}

.simtxtbold {

    font-weight: bold;

    color:#046C59;

    font-size: 1em;



}

.menu-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.menu-toggle i {
    color: white;
    font-size: 1.4rem;
}

.menu-toggle:hover {
    transform: scale(1.1);
}


.browser-content {

    flex-grow: 1;

    padding: 20px;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow-y: auto;

    overflow-x: hidden;

    /*overflow: visible; */

}



.scroll-container-wrapper {

    display: flex;

    align-items: center;

    background-color: #E0F2EF;

    border-radius: 20px;

    padding: 0px 10px;

    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);

    width: fit-content;

    max-width: 100%;

    /*overflow: visible; /*added */

}



.scroll-arrow {

    background-color: #92DCD0;

    border: none;

    border-radius: 50%;

    width: 40px;

    height: 40px;

    display: flex;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    font-size: 1.2em;

    color: #209F8C;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

    transition: background-color 0.2s ease, box-shadow 0.2s ease;

    flex-shrink: 0;

}



.scroll-arrow:hover {

    background-color: #7AD9CC;

    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);

}



.scroll-arrow:active {

    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);

}



.left-arrow {

    margin-right: 15px;

}



.right-arrow {

    margin-left: 15px;

}



.scroll-container {

    display: flex;

    overflow-x: scroll;

    scroll-snap-type: x mandatory;

    -webkit-overflow-scrolling: touch;

    padding: 5px 0;

    /* --- MODIFIED: Increased gap between cards --- */

    gap: 30px; /* Increased from 20px to 30px for more space */

    scrollbar-width: none;

    -ms-overflow-style: none;

}



/* Hide scrollbar for Chrome, Safari and Opera */

.scroll-container::-webkit-scrollbar {

    display: none;

}



.card {
    flex: 0 0 auto;
    width: 150px;
    height: 150px;
    background-color: #4CAF9D;
    border-radius: 25px;
    margin: 15px 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15), inset 0 0 10px rgba(255, 255, 255, 0.3);
    scroll-snap-align: center;
    transition: transform 0.5s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;

}



.card:hover {

    transform: translateY(0px) translateX(0px) scale(1.1);

    /*transform-origin: bottom left;*/

}



.browser-footer {

    background-color: transparent; /* Make background transparent to show only the pill */

    padding: 0px; /* Remove padding from this container */

    display: flex;

    justify-content: center;

    align-items: center;

    flex-shrink: 0;

    /* --- MODIFIED: Adjusted for the new footer pill --- */

    height: 120px; /* Give it a fixed height to center the pill */

}



.footer-dots {

    /* --- MODIFIED: New styles for the footer pill --- */

    background-color: #209F8C; /* Teal color for the pill */

    padding: 10px 30px; /* Padding inside the pill */

    border-radius: 25px; /* Makes it a pill shape (half of height for full pill) */

    display: flex;

    justify-content: center;

    align-items: center;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* Soft shadow for the pill */

    /* Position the pill slightly below the main frame to match your drawing */

    margin-top: 20px; /* Adjust as needed */

    margin-bottom: -40px; /* Pull it slightly out of the frame */

}



.footer-dots .dot {

    width: 8px; /* Slightly smaller dots */

    height: 8px; /* Slightly smaller dots */

    border-radius: 50%;

    background-color: rgba(255, 255, 255, 0.4); /* Slightly less opaque inactive dots */

    margin: 0 10px; /* Increased margin for more space between dots */

    display: inline-block;

}



.footer-dots .dot.active {

    background-color: #fff;

    width: 10px; /* Active dot can be slightly larger */

    height: 10px;

}











/* --- START MENU STYLES --- */

.menu-container {

    position: relative; /* Crucial for positioning the dropdown-menu relative to this container */

    display: flex; /* To keep the dot horizontally centered within its space if needed */

    align-items: center;

}



.menu-toggle {

    cursor: pointer; /* Indicate it's clickable */

    /* Optional: Add hover effect for the dot if desired */

    /* transition: background-color 0.2s ease; */

}

/* Optional: Add hover effect for the dot */

/* .menu-toggle:hover .dot {

    background-color: rgba(255, 255, 255, 0.5);

} */



.dropdown-menu {

    position: absolute;

    top: 100%; /* Position below the toggle element (window-controls dot) */

    right: 0; /* Align to the right of the toggle element */

    background-color: #A7E6DE;

    border-radius: 8px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);

    padding: 10px 0; /* Vertical padding for the menu */

    min-width: 150px; /* Minimum width for the menu */

    display: none; /* HIDDEN BY DEFAULT */

    z-index: 1000; /* Ensure it appears above other content */

    opacity: 0; /* Start with 0 opacity for fade effect */

    transform: translateY(-10px); /* Start slightly above for slide-down effect */

    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Smooth animation */

}



.dropdown-menu.show {

    display: block; /* Show the menu */

    opacity: 1; /* Fade in */

    transform: translateY(0); /* Slide down to original position */

}



.dropdown-menu button {

    display: block; /* Each button on its own line */

    width: 100%; /* Full width of the menu */

    padding: 10px 15px; /* Padding for each button */

    border: none;

    background-color: transparent;

    text-align: left;

    cursor: pointer;

    font-size: 0.95em;

    color: #003330;

    transition: background-color 0.2s ease, color 0.2s ease;

}



.dropdown-menu button:hover {

    background-color: #1E675D; /* Light gray background on hover */

    color: #AFEFE5; /* Teal text on hover */

}


.card-img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    border-radius: 15px;
}

.card img, .card i {
    width: 100px;
    height: 100px;
    object-fit: contain;
}