/* Import Google Font (Ensure link is also in HTML ) */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
/* ---=== Root Variables ===--- */
:root {
--pink: #e84393;
--light-pink: #fdecef;
--green: #4caf50;
/* Added a green */
--light-green: #8bc34a;
/* Added light green */
--black: #333;
--white: #fff;
--light-color: #666;
--box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
--border: 0.2rem solid rgba(0, 0, 0, 0.1);
--outline: 0.1rem solid rgba(0, 0, 0, 0.1);
--outline-hover: 0.2rem solid var(--black);
}
/* ---=== Basic Reset & Body Styles ===--- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
outline: none;
border: none;
text-decoration: none;
text-transform: capitalize;
transition: all 0.2s linear;
}
html {
font-size: 62.5%;
/* Makes 1rem = 10px for easier sizing */
overflow-x: hidden;
scroll-behavior: smooth;
scroll-padding-top: 7rem;
/* Adjust for fixed header */
}
body {
background: #f7f7f7;
/* Light grey background */
color: var(--light-color);
}
section {
padding: 3rem 9%;
}
/* ---=== Reusable Components ===--- */
.heading {
text-align: center;
padding: 2rem 0;
padding-bottom: 3rem;
font-size: 3.5rem;
color: var(--black);
position: relative;
/* For underline */
margin-bottom: 3rem;
}
/* Underline effect for headings */
.heading::after {
content: "";
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
width: 8rem;
height: 0.4rem;
background: var(--pink);
border-radius: 0.5rem;
}
.heading span {
background: var(--pink);
color: var(--white);
display: inline-block;
padding: 0.5rem 3rem;
clip-path: polygon(100% 0, 93% 50%, 100% 99%, 0% 100%, 7% 50%, 0% 0%);
}
.btn {
display: inline-block;
margin-top: 1rem;
padding: 0.9rem 3rem;
font-size: 1.7rem;
color: var(--white);
background: var(--green);
border-radius: 0.5rem;
cursor: pointer;
border: 0.2rem solid var(--green);
font-weight: 500;
}
.btn:hover {
background: var(--light-green);
border-color: var(--light-green);
color: var(--black);
letter-spacing: 0.1rem;
}
/* ---=== Header ===--- */
header {
position: fixed;
top: 0;
left: 0;
right: 0;
background: var(--white);
padding: 1.5rem 9%;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1000;
box-shadow: var(--box-shadow);
}
header .logo {
font-size: 2.5rem;
font-weight: bolder;
color: var(--black);
}
header .logo i {
/* If you add an icon to the logo */
color: var(--pink);
padding-right: 0.5rem;
}
header .navbar a {
font-size: 1.7rem;
padding: 0 1.5rem;
color: var(--light-color);
}
header .navbar a:hover {
color: var(--pink);
}
header .icons a,
header .icons .cart-icon-container a {
font-size: 2rem;
color: var(--black);
margin-left: 1.5rem;
cursor: pointer;
}
header .icons a:hover,
header .icons .cart-icon-container a:hover {
color: var(--pink);
}
/* Cart Count Badge */
header .cart-icon-container {
position: relative;
display: inline-block;
/* Align properly with other icons */
}
header .cart-count {
position: absolute;
top: -0.8em;
right: -0.8em;
background-color: var(--pink);
color: var(--white);
border-radius: 50%;
padding: 0.2em 0.5em;
font-size: 1.2rem;
font-weight: bold;
line-height: 1;
display: flex;
/* Use flex to center */
align-items: center;
justify-content: center;
min-width: 1.8em;
/* Ensure circle shape for single digit */
height: 1.8em;
}
/* Mobile Menu Toggle */
#toggler {
display: none;
}
header .fa-bars {
font-size: 2.5rem;
color: var(--light-color);
border-radius: 0.5rem;
padding: 0.5rem 1.5rem;
cursor: pointer;
border: var(--border);
display: none;
/* Hidden on larger screens */
}
/* ---=== Shopping Cart Styles ===--- */
.cart-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1001;
display: none;
/* Hidden by default */
opacity: 0;
transition: opacity 0.3s ease;
}
.cart-container {
position: fixed;
top: 0;
right: -100%;
/* Start off-screen */
width: 90%;
max-width: 400px;
height: 100%;
background-color: var(--white);
z-index: 1002;
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
transition: right 0.3s ease;
}
/* Active state for cart */
.cart-overlay.active {
display: block;
opacity: 1;
}
.cart-container.active {
right: 0;
}
.cart-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 2rem;
border-bottom: var(--border);
}
.cart-header h2 {
font-size: 2rem;
color: var(--black);
}
.close-cart {
font-size: 2.5rem;
color: var(--light-color);
cursor: pointer;
}
.close-cart:hover {
color: var(--pink);
}
.cart-items {
flex-grow: 1;
overflow-y: auto;
padding: 1rem 2rem;
}
/* Style individual cart items dynamically added by JS */
.cart-item {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: var(--outline);
}
.cart-item img {
width: 60px;
height: 60px;
object-fit: cover;
margin-right: 1rem;
border-radius: 0.5rem;
}
.cart-item-details {
flex-grow: 1;
}
.cart-item-details h3 {
font-size: 1.6rem;
color: var(--black);
margin-bottom: 0.5rem;
}
.cart-item-details .price {
font-size: 1.4rem;
color: var(--pink);
}
.cart-item .remove-item {
font-size: 1.8rem;
color: var(--light-color);
cursor: pointer;
margin-left: 1rem;
}
.cart-item .remove-item:hover {
color: red;
}
.cart-total {
padding: 1.5rem 2rem;
border-top: var(--border);
font-size: 1.8rem;
font-weight: bold;
color: var(--black);
text-align: right;
}
.cart-total span {
color: var(--pink);
}
.checkout-btn {
display: block;
width: calc(100% - 4rem);
/* Full width minus padding */
margin: 0 2rem 2rem 2rem;
/* Add margin */
padding: 1.2rem;
background-color: var(--green);
color: var(--white);
text-align: center;
font-size: 1.7rem;
border-radius: 0.5rem;
cursor: pointer;
border: none;
}
.checkout-btn:hover {
background-color: var(--light-green);
color: var(--black);
}
/* ---=== Home Section ===--- */
.home {
display: flex;
align-items: center;
min-height: 100vh;
background-image: url("R.jpg");
/* Add a background image */
background-size: cover;
background-position: center;
position: relative;
}
/* Optional: Add a slight overlay for better text contrast */
.home::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
/* Subtle dark overlay */
}
.home .content {
max-width: 55rem;
z-index: 1;
/* Ensure content is above overlay */
background: rgba(255, 255, 255, 0.85);
/* Semi-transparent white background */
padding: 3rem;
border-radius: 1rem;
box-shadow: var(--box-shadow);
}
.home .content h3 {
font-size: 5rem;
color: var(--black);
text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.1);
}
.home .content span {
font-size: 2.5rem;
color: var(--pink);
padding: 0.5rem 0;
display: block;
/* Makes span take full width */
}
.home .content p {
font-size: 1.6rem;
color: var(--light-color);
padding: 1rem 0;
line-height: 1.8;
}
/* ---=== Icons Container Section ===--- */
.icons-container {
background: var(--white);
display: flex;
flex-wrap: wrap;
gap: 2rem;
padding-top: 5rem;
padding-bottom: 5rem;
}
.icons-container .icons {
background: #fff;
border: var(--border);
padding: 2.5rem;
display: flex;
align-items: center;
flex: 1 1 25rem;
/* Grow, Shrink, Basis - allows responsive wrapping */
box-shadow: var(--box-shadow);
border-radius: 0.5rem;
}
.icons-container .icons img {
height: 6rem;
/* Increased size */
margin-right: 2rem;
}
.icons-container .icons .info h3 {
color: var(--black);
padding-bottom: 0.5rem;
font-size: 1.8rem;
}
.icons-container .icons .info span {
color: var(--light-color);
font-size: 1.5rem;
}
/* ---=== Products Section ===--- */
.products .box-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
/* Responsive grid */
gap: 2rem;
}
.products .box-container .box {
background: var(--white);
border-radius: 0.5rem;
box-shadow: var(--box-shadow);
border: var(--border);
position: relative;
overflow: hidden;
/* Important for icon positioning */
text-align: center;
}
.products .box-container .box .discount {
position: absolute;
top: 1rem;
left: 1rem;
padding: 0.7rem 1rem;
font-size: 1.4rem;
color: var(--pink);
background: var(--light-pink);
z-index: 1;
border-radius: 0.5rem;
}
.products .box-container .box .image {
position: relative;
text-align: center;
padding-top: 2rem;
overflow: hidden;
}
.products .box-container .box .image img {
height: 25rem;
object-fit: contain;
/* Ensure image fits well */
}
.products .box-container .box:hover .image img {
transform: scale(1.1);
/* Slight zoom on hover */
}
.products .box-container .box .image .icons {
position: absolute;
bottom: -7rem;
/* Start hidden below */
left: 0;
right: 0;
display: flex;
background: rgba(255, 255, 255, 0.9);
/* Semi-transparent background */
padding: 1rem 0;
}
.products .box-container .box:hover .image .icons {
bottom: 0;
/* Slide up on hover */
}
.products .box-container .box .image .icons a {
height: 5rem;
line-height: 5rem;
font-size: 2rem;
width: 50%;
/* Distribute space */
background: var(--pink);
color: var(--white);
margin: 0 0.5rem;
/* Spacing between icons */
border-radius: 0.5rem;
}
.products .box-container .box .image .icons .cart-btn {
background: var(--green);
width: 100%;
/* Make cart button wider */
}
.products .box-container .box .image .icons a:hover {
background: var(--black);
}
.products .box-container .box .content {
padding: 2rem;
text-align: center;
}
.products .box-container .box .content h3 {
font-size: 2rem;
color: var(--black);
}
.products .box-container .box .content .price {
font-size: 1.8rem;
color: var(--pink);
font-weight: bolder;
padding-top: 1rem;
}
.products .box-container .box .content .price span {
/* For original price if added */
font-size: 1.5rem;
color: var(--light-color);
font-weight: lighter;
text-decoration: line-through;
}
/* ---=== Review Section ===--- */
.review .box-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
gap: 2rem;
}
.review .box-container .box {
padding: 3rem;
border-radius: 0.5rem;
background: var(--white);
box-shadow: var(--box-shadow);
border: var(--border);
position: relative;
/* For quote icon */
}
.review .box-container .box .fa-quote-right {
/* Add a quote icon later if desired */
position: absolute;
bottom: 3rem;
right: 3rem;
font-size: 6rem;
color: #eee;
}
.review .box-container .box .stars i {
color: var(--pink);
font-size: 1.7rem;
padding-bottom: 1rem;
}
.review .box-container .box p {
color: var(--light-color);
font-size: 1.5rem;
line-height: 1.8;
padding-bottom: 2rem;
}
.review .box-container .box .user {
display: flex;
align-items: center;
padding-top: 2rem;
border-top: var(--border);
/* Separator line */
}
.review .box-container .box .user img {
/* Style if you add user images */
height: 6rem;
width: 6rem;
border-radius: 50%;
object-fit: cover;
margin-right: 1rem;
}
.review .box-container .box .user .user-info h3 {
font-size: 1.8rem;
color: var(--black);
}
.review .box-container .box .user .user-info span {
font-size: 1.4rem;
color: var(--light-color);
}
/* ---=== Contact Section ===--- */
.contact .row {
display: flex;
flex-wrap: wrap-reverse;
/* Put image first on mobile if needed */
gap: 2rem;
align-items: center;
}
.contact .row form {
flex: 1 1 40rem;
padding: 2rem 2.5rem;
box-shadow: var(--box-shadow);
border: var(--border);
background: var(--white);
border-radius: 0.5rem;
}
.contact .row .image {
flex: 1 1 40rem;
}
.contact .row .image img {
width: 100%;
border-radius: 0.5rem;
box-shadow: var(--box-shadow);
}
.contact .row form .box {
width: 100%;
padding: 1.2rem 1.4rem;
/* Increased padding */
margin: 0.7rem 0;
border: var(--border);
border-radius: 0.5rem;
font-size: 1.6rem;
color: var(--black);
text-transform: none;
/* Allow normal text input */
background: #f7f7f7;
/* Slightly different background */
}
.contact .row form .box:focus {
border-color: var(--pink);
box-shadow: 0 0 0 0.2rem var(--light-pink);
}
.contact .row form textarea {
height: 15rem;
resize: none;
/* Prevent resizing */
}
/* ---=== Footer Section ===--- */
.footer {
background: var(--light-pink);
/* Light pink background */
padding-top: 4rem;
}
.footer .box-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
gap: 2rem;
}
.footer .box-container .box h3 {
font-size: 2rem;
color: var(--black);
padding: 1rem 0;
}
.footer .box-container .box a {
display: block;
font-size: 1.5rem;
color: var(--light-color);
padding: 0.8rem 0;
/* Increased spacing */
}
.footer .box-container .box a:hover {
color: var(--pink);
padding-left: 0.5rem;
/* Indent on hover */
}
.footer .box-container .box a i {
/* If you add icons to links */
color: var(--pink);
padding-right: 0.5rem;
}
.footer .box-container .box img {
/* Payment icons image */
margin-top: 1rem;
height: 3rem;
/* Adjust as needed */
}
.footer .credit {
text-align: center;
padding: 1.5rem;
margin-top: 2.5rem;
padding-top: 2.5rem;
font-size: 1.8rem;
color: var(--black);
border-top: var(--border);
}
.footer .credit span {
color: var(--pink);
font-weight: 600;
}
/* ---=== Media Queries for Responsiveness ===--- */
/* Larger Tablets / Smaller Laptops */
@media (max-width: 991px) {
html {
font-size: 55%;
/* Adjust base font size */
}
header {
padding: 1.5rem 2rem;
}
section {
padding: 2rem;
}
.home {
background-position: left;
/* Adjust background */
}
.home .content h3 {
font-size: 4.5rem;
/* Slightly smaller heading */
}
}
/* Tablets */
@media (max-width: 768px) {
header .fa-bars {
display: block;
/* Show hamburger icon */
}
header .navbar {
position: absolute;
top: 100%;
/* Position below header */
left: 0;
right: 0;
background: #eee;
border-top: var(--border);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
/* Hide navbar */
transition: clip-path 0.3s ease-out;
/* Smooth transition */
}
header #toggler:checked ~ .navbar {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
/* Show navbar when checked */
}
header .navbar a {
margin: 1.5rem;
padding: 1.5rem;
background: var(--white);
border: var(--border);
display: block;
/* Stack links vertically */
text-align: center;
}
.home .content {
max-width: 90%;
/* Allow content to take more width */
padding: 2rem;
}
.home .content h3 {
font-size: 4rem;
}
.home .content span {
font-size: 2rem;
}
.home .content p {
font-size: 1.5rem;
}
.icons-container .icons {
flex-basis: 45%;
/* Allow two icons per row */
}
.contact .row {
flex-direction: column;
/* Stack form and image vertically */
}
.contact .row .image {
margin-top: 3rem;
/* Add space above image when stacked */
}
}
/* Mobile Phones */
@media (max-width: 450px) {
html {
font-size: 50%;
/* Further reduce base font size */
}
.heading {
font-size: 3rem;
}
.home .content {
text-align: center;
}
.products .box-container {
grid-template-columns: 1fr;
/* Force single column */
}
.review .box-container {
grid-template-columns: 1fr;
/* Force single column */
}
.icons-container .icons {
flex-basis: 100%;
/* Single icon per row */
}
.footer .box-container {
grid-template-columns: 1fr;
/* Force single column */
text-align: center;
}
.footer .box-container .box a {
text-align: center;
}
.footer .box-container .box a:hover {
padding-left: 0;
/* Remove indent on mobile */
}
}