/* Sets the background image for the entire webpage */
body {
    background-image: url(https://i.postimg.cc/J7Jv1wgZ/Brown-Watercolor-Photo-Coffee-Shop-Facebook-Cover.png);
}

/* Highlights the active navigation link */
.container .nav .nav-items ul .about a {
    color: #eca049; /* Active link color */
    
    /* Text shadow for glowing effect */
    text-shadow: 0px 3px 8px #eca049; /* Outer glow */
    text-shadow: 1px 1px 2px #232126; /* Inner shadow for depth */
    
    text-decoration: none; /* Removes underline from the link */
}

/* Main content container styling */
.container .body {
    margin: 120px 90px; /* Outer margin for spacing */
    width: 45%; /* Width relative to the parent container */
}

/* Header text styling */
.container .body .header {
    text-align: center; /* Centers the header text */
    font-size: 40px; /* Larger font size */
    font-weight: bolder; /* Makes the text bold */
    font-family: system-ui; /* Modern UI font */
    margin-bottom: 40px; /* Space below the header */
    text-shadow: 2px 6px 8px #eca049; /* Adds a glowing effect */
}

/* Special text highlight within the header */
.container .body .header span {
    color: #eca049; /* Text color */
    text-shadow: 2px 1px 2px white; /* Glow effect with white */
}

/* Paragraph text styles */
.container .body .p1,
.container .body .p2 {
    font-family: math; /* Sets a unique font style */
    font-size: 20px; /* Adjusts text size */
    color: #232126; /* Dark text color */
    margin-left: 10px; /* Indents from the left */
    margin-bottom: 15px; /* Space below the text */
}

/* Call-to-action button styles */
.container .body button {
    padding: 12px 50px; /* Button padding */
    margin-left: 250px; /* Indents from the left */
    margin-top: 50px; /* Adds space above the button */
    background-color: #232126; /* Button background color */
    color: white; /* Button text color */
    box-shadow: 2px 4px 15px -1px #232126; /* Adds depth with a shadow */
}

/* Removing the syle from the button text */
.container .body button a {
    all: unset;
}

/* Button hover effect */
.container .body button:hover {
    background-color: #eca049; /* Background color changes */
    border: 1px solid #232126; /* Adds a border */
    color: #232126; /* Changes text color */
}

/* Popup container styling */
.container .body .popup {
    width: 600px; /* Popup width */
    height: 170px; /* Popup height */
    background-color: #232126; /* Background color */
    padding: 15px 60px 15px 15px; /* Padding around the content */
    border-radius: 15px; /* Rounded corners */
    position: absolute; /* Positioned relative to the nearest positioned ancestor */
    left: -569px; /* Initial position off the screen */
    top: 45%; /* Centered vertically */
    transition: all 0.3s 0s linear; /* Smooth transition on hover */
}

/* Arrow indicator for the popup */
.container .body .popup:after {
    content: ""; /* No content, used as a visual element */
    width: 0px; /* No width, since it’s a triangle */
    height: 0px; /* No height, since it’s a triangle */
    
    /* Creates a triangle by using border properties */
    border-color: transparent white transparent transparent; 
    border-style: solid;
    border-width: 5px;
    
    position: absolute; /* Positioned within the popup */
    right: 10px; /* From the right edge */
    top: 50%; /* Centered vertically */
    margin-top: -5px; /* Adjusts centering */
    transition: all 0.5s 0s linear; /* Smooth transition on hover */
}

/* Moves the popup into view when hovered */
.container .body .popup:hover {
    left: -12px; /* Moves the popup into view */
}

/* Changes the arrow color when hovered */
.container .body .popup:hover:after {
    border-color: transparent transparent transparent white; /* Sets new arrow color */
}

/* Popup header text */
.container .body .popup h4 {
    text-align: center; /* Centers the header text */
    font-size: 20px; /* Sets text size */
    margin-bottom: 30px; /* Space below the header */
}

/* Popup paragraph text */
.container .body .popup p {
    text-align: center; /* Centers the paragraph text */
    width: 520px; /* Sets width for readability */
}