/* General body styling */
body {
    /* Ensures the body takes at least 100% of the viewport height */
    min-height: 100vh;
    /* Background color for the entire page */
    background: white;
}

/* Navigation bar styling */
nav {
    /* Dark background color for the navbar with some transparency */
    background-color: #604233ed;
    /* Adds a shadow effect for depth */
    box-shadow: 3px 3px 7px #ffffff;
    /* Navbar spans the entire width of the viewport */
    width: 100%;
    /* Navbar remains fixed at the top of the page */
    position: fixed;
    /* Border color for the navbar */
    border: #000;
    /* Font size for text in the navbar */
    font-size: 15px;
}

/* Styling for unordered lists within the navbar */
nav ul {
    /* Ensures the list takes the full width of the navbar */
    width: 100%;
    /* Removes default list styling */
    list-style: none;
    /* Flexbox to arrange list items */
    display: flex;
    /* Aligns list items to the end (right) */
    justify-content: flex-end;
    align-items: center;
}

/* Styling for individual list items within the navbar */
nav li {
    height: 70px;
}

/* Styling for anchor tags within the navbar */
nav a {
    /* Anchor tags have full height of the navbar */
    height: 100%;
    padding: 0 30px;
    text-decoration: none;
    display: flex;
    align-items: center;
    color: white;
    background-color: rgba(50, 29, 29, 0);
}

/* Changes background color on hover to indicate interactivity */
nav a:hover {
    background-color: rgb(121, 96, 96);
}

/* Left-aligns the first list item */
nav li:first-child {
    margin-right: auto;
}

/* Sidebar styling */
.sidebar {
    /* Fixed position at the top right of the viewport */
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 250px;
    /* Ensures the sidebar appears above other content */
    z-index: 999;
    /* Background color with some transparency and a blur effect */
    backdrop-filter: blur(10px);
    box-shadow: -10px 0 10px gray;
    /* Initially, the sidebar is hidden */
    display: none;
    /* Flexbox for vertical alignment of items */
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    background-color: #603a2f88;
}

/* Ensures list items in the sidebar take the full width */
.sidebar li {
    width: 100%;
}

/* Ensures anchor tags in the sidebar take the full width */
.sidebar a {
    width: 100%;
}

/* Initially, the menu button is hidden (for larger screens) */
.menu-button {
    display: none;
}

/* Media query for screens smaller than 800px */
@media (max-width: 800px) {
    /* Hides elements with this class on smaller screens */
    .hideOnMobile {
        display: none;
    }
    /* Shows the menu button on smaller screens */
    .menu-button {
        display: block;
    }
}

/* Media query for screens smaller than 400px */
@media (max-width: 400px) {
    /* Sidebar takes the full width on smaller screens */
    .sidebar {
        width: 100%;
    }
}

/* Importing a custom Google font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Display:ital,wght@0,100..900;1,100..900&display=swap');

/* Setting default styling for the body */
body {
    line-height: 1.5;  
    font-family: "Noto Serif Display", serif;  
}

/* Global reset for margin, padding, and box-sizing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;  /* Ensures padding doesn't affect width */
}

/* Container for centralized content with a maximum width */
.container {
    max-width: 1170px;
    margin: auto;  
}

/* Flexbox to manage row-based layouts */
.row {
    display: flex;
    flex-wrap: wrap;  
}

/* Removes default list styling */
ul {
    list-style: none;
}

/* Styling for the Home section */
#Home {
    padding: 0;
    margin: 0;  
}

/* Centers content within an element */
.center {
    display: block;
    margin-left: 0px; 
    margin-right: 0px;
    width: 100%;  
    height: 100%; 
}

/* Styling for the Products section */
#Products {
    padding: 10px;
    text-align: center;  
    font-size: 20px;  
}

/* Flexbox container for product cards */
.card-container {
    display: flex;
    justify-content: center;  
    flex-wrap: wrap;  /* Allows elements to wrap */
    gap: 20px;  
    margin-top: 20px;
    margin: 0px; 
    padding: 0px;  
    box-sizing: border-box;
    text-align: center;  
}

/* Styling for individual product cards */
.pcard {
    width: 325px;  
    background-color: white; 
    border-radius: 0px;  
    box-shadow: #ffffff; 
    cursor: pointer;  /* Changes cursor to indicate interactivity */
}

/* Background color change on hover to indicate interactivity */
.pcard:hover {
    background-color: #ffffff6f;
}

/* Content styling within product cards */
.card-content {
    padding: 30px 30px;  
    line-height: 1.3; 
}

/* Styling for card headers */
.card-content h1 {
    font-size: 25px;  
    margin-bottom: 10px;  
    color: black; 
}

/* Styling for paragraph text within cards */
.card-content p {
    font-size: 18px;  
    margin-bottom: 20px;  
    color: #000; 
}

/* Styling for "Add to Cart" links */
.card-content .add {
    padding: 10px;  
    margin: 10px;  
    background-color: #603a2f88;  
    border-radius: 10%;  
    font-size: 15px;  
    text-decoration: none;  
    color: white; 
    font-weight: bold;
}

/* Styling for the "About Us" section */
.abt {
    display: flex;  /* Flexbox for aligning content */
    align-items: center; 
    justify-content: center;  
    padding: 0;  
    margin: 0; 
}
  
/* Styling for the image in the "About Us" section */
.abtimg {
    float: left;  
    margin: 0; 
}
  
/* Styling for the text content in the "About Us" section */
.abttext {
    font-size: 20px;  
    padding-left: 20px;  
    padding-top: 20%; 
    float: left;  
    text-align: left;  
    margin-bottom: auto;  
}

/* Styling for the "Read More" button in the "About Us" section */
.abtbtn {
    display: inline-block;  
    border-radius: 50px;
    background-color: #603a2f;  
    border: none;  
    color: #FFFFFF;  
    text-align: center;
    font-size: 15px;  
    padding: 10px;  
    width: 150px;  
    transition: all 0.5s;  /* Smooth transition for hover effects */
    cursor: pointer;  
    margin: 5px; 
    position: absolute; 
}
  
/* Styling for inner span elements within the "Read More" button */
.abtbtn span {
    cursor: pointer;  /* Indicates interactivity */
    display: inline-block; 
    position: relative; 
    transition: 0.5s;  
}
  
/* Styling for the hover effect on the inner span */
.abtbtn span:after {
    content: '\00bb';  /* Unicode character for an arrow */
    position: absolute;  
    opacity: 0;  /* Initial opacity for fade-in effect */
    top: 0;
    right: -20px;  /* Positioning of the arrow */
    transition: 0.5s;  /* Smooth transition */
}
  
/* Hover effect for the "Read More" button */
.abtbtn:hover span {
    padding-right: 25px; 
}
  
/* Arrow effect for hover */
.abtbtn:hover span:after {
    opacity: 1;
    right: 0;  /* Moves the arrow into view */
}

/* Styling for the quote section */
.quote {
    margin-top: 0px;  
    font-family: 'Libre Baskerville', serif;  
    font-size: 60px; 
    color: #4f5664;  
    line-height: 76px;  /* Line height for readability */
    text-align: center; 
    overflow: hidden;  /* Ensures text doesn't overflow */
}

/* Styling for the quote symbol */
.quoteSymbol {
    margin-top: 80px; 
    margin-bottom: -200px;  
    font-family: 'Libre Baskerville', serif;  
    font-size: 360px;  
    color: #adb8cf; 
    line-height: 360px;  
    text-align: center;  
}

/* Styling for the footer section */
.footer {
    background-color: #604233;  
    padding: 70px 0;  
}

/* Column-based layout for footer content */
.footer-col {
   width: 25%; 
   padding: 0 15px; 
}

/* Styling for footer headings */
.footer-col h4 {
	font-size: 18px;  
	color: #ffffff;  
	text-transform: capitalize;  
	margin-bottom: 35px;  /* Spacing below the heading */
	font-weight: 500; 
	position: relative;  
}

/* Decorative line under footer headings */
.footer-col h4::before {
	content: '';
	position: absolute;  /* Absolute positioning */
	left: 0;
	bottom: -10px;  /* Positioning the line */
	background-color: #d6a000;  
	height: 2px;  
	box-sizing: border-box;  /* Ensures consistent behavior */
	width: 50px;  
}

/* Spacing between list items in the footer */
.footer-col ul li:not(:last-child) {
	margin-bottom: 10px; 
}

/* Styling for footer links */
.footer-col ul li a {
	font-size: 16px; 
	text-transform: capitalize; 
	color: #ffffff;  
	text-decoration: none;  
	font-weight: 300; 
	color: #bbbbbb;  
	display: block; 
	transition: all 0.3s ease;  /* Smooth transition for hover effects */
}

/* Hover effect for footer links */
.footer-col ul li a:hover {
	color: #ffffff;  
	padding-left: 8px;  /* Adds padding on hover for a slide-in effect */
}

/* Styling for social media links in the footer */
.footer-col .social-links a {
	display: inline-block;  
	height: 40px;  
	width: 40px;  
	background-color: rgba(255,255,255,0.2);  
	margin: 0 10px 10px 0;  /* Spacing around links */
	text-align: center;  
	line-height: 40px;  /* Centers text vertically */
	border-radius: 50%;  
	color: #ffffff; 
	transition: all 0.5s ease;  /* Smooth transition for hover effects */
}

/* Hover effect for social media links */
.footer-col .social-links a:hover {
	color: #24262b; 
	background-color: #ffffff;  
}

/* Styling for column-based layout */
.contact {
    color: white;  
    font-size: 35px; 
}

/* Responsive design for smaller screens */
@media (max-width: 767px) {
  .footer-col {
    width: 50%; 
    margin-bottom: 30px; 
}
}

/* Further adjustments for smaller screens */
@media (max-width: 574px) {
  .footer-col {
    width: 100%; 
}
}