body {

    margin: 0;

    padding: 0;

    background-color: #ffffff; /* white background */

    font-family: Arial, sans-serif;

    padding-top: 100px;

}



.title {

    text-align: center;

    font-family: 'Segoe Script', sans-serif; /* beautiful font */

    font-size: 48px; /* adjust as needed */

    color: #ff007f; /* fuschia color */

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    background-color:rgba(255, 255, 255, 0.554); /* match body background color */

    z-index: 1000; /* ensure it's above other content */

    padding: 20px 0; /* add padding for better visibility */

}



/* add padding to body to prevent content from hiding behind fixed heading */



.button {

    position: fixed;

    top: 20px;

    left: 20px;

    background-color: transparent;

    border: none;

    cursor: pointer;

    z-index: 1000; /* ensure it's above other content */

    color: #333; /* dark gray color */

}



/* Style for the popup */

.popup {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 50%; /* Half the width of the page */

    height: 100vh; /* Full height of the viewport */

    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */

    z-index: 1000; /* ensure it's above other content */

}



.popup-content {

    background-color: #fff;

    width: 40%; /* Adjust as needed */

    margin: 50px auto; /* Center the popup vertically and horizontally */

    padding: 90px;

    border-radius: 10px;

}



.close-btn {

    position: absolute;

    top: 10px;

    right: 10px;

    color: #666; /* Light gray color */

    font-size: 24px;

    cursor: pointer;

}



/* Style for the dropdown menu */

.dropdown {

    position: relative;

    display: inline-block;

}



.dropdown-content {

    display: none;

    position: absolute;

    background-color: #f9f9f9; /* lighter gray background */

    min-width: 200px; /* wider dropdown panel */

    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

    z-index: 1000; /* ensure it's above other content */

}



.dropdown-content a {

    color: #666; /* lighter gray color */

    padding: 12px 16px;

    text-decoration: none;

    display: block;

}



.dropdown-content a:hover {

    background-color: #f1f1f1; /* lighter background color on hover */

}



.dropdown:hover .dropdown-content {

    display: block;

}

/* Style for the options */

.popup-content a {

    display: block; /* Each option on a new line */

    margin-bottom: 50px; /* Adjust spacing between options */

    text-decoration: none; /* Remove underline from links */

    color: #555; /* Dark gray color */

    font-family: 'Minion', serif; /* Minion font */

    font-weight: bold; /* Bold text */

    font-style: italic; /* Italic text */

    transition: color 0.3s; /* Add transition for smooth color change */

    font-size: 1.5em; /* Double the font size */

}



/* Change color on hover */

.popup-content a:hover {

    color: #ff007f; /* Fuschia color */

}



/* Center the options */

.popup-content a:last-child {

    margin-bottom: 0; /* Remove extra margin for the last option */

}

.hr{

    color:#edebeb;

}

/* Style for the Tell Quotes button */

.tell-quotes-btn {

    background-color: #ff007f; /* Fuschia color */

    color: #fff; /* White color */

    border: none; /* Remove border */

    padding: 10px 20px; /* Add padding */

    border-radius: 5px; /* Add border radius */

    cursor: pointer; /* Add cursor pointer */

    font-family: 'Minion', serif; /* Minion font */

    font-size: 16px; /* Font size */

    transition: background-color 0.3s; /* Add transition for smooth color change */

}



.tell-quotes-btn:hover {

    background-color: #d60063; /* Darker fuschia color on hover */

}