body {color:black; margin:0; padding:0;}
img {max-width:100%;}
p {margin:0px; font-size:18px; font-weight:400;}
a, .span-btn {background-image:linear-gradient(transparent calc(100% - 2px), black 5px); background-size:0; background-repeat:no-repeat; background-position:bottom left; padding-bottom:4px; text-decoration:none; transition:all .4s ease, text-decoration 0s ease; line-height:1.5; cursor:pointer;}
a:hover, a:focus {background-image:linear-gradient(transparent calc(100% - 2px), black 5px); background-size:100%;}
button {border:0px;}
hr {border-top:2px solid #e5e5e5; opacity:1;}
figure {margin-bottom:0px;}
.py-100 {padding-top:100px; padding-bottom:100px;}
.fw-500 {font-weight:500;}
.primary-heading {font-size:14px; line-height:20px; font-weight:400; text-transform:uppercase; letter-spacing:4px; margin-bottom:0px;}
.secondary-heading {font-size:36px; line-height:46px; font-weight:700;}
.third-heading {font-size:64px; line-height:74px; font-weight:400;}
.span-btn {font-size:18px; line-height:24px; padding-bottom:4px; cursor:pointer; background-size:100%;}
.span-btn:hover {background-image:linear-gradient(transparent calc(100% - 2px), black 5px); background-size:0%;}
.heading-container .primary-heading {font-size:16px; line-height:22px; letter-spacing:unset;}
.heading-container .secondary-heading {font-size:44px; line-height:54px;}
.first-header {background:#1d1d1d; color:white;}
.first-header svg {width:30px; height:30px;}
.second-header {border-bottom:1px solid #e5e5e5;}
.second-header ul, .third-header ul, .social-media ul {display:flex; list-style:none; margin-bottom:0px; padding-left:0px; column-gap:20px;}
.social-media ul li {font-size:16px; color:black; display:flex; align-items:center; cursor:pointer;}
.social-media ul li span {font-size:11px; margin-left:5px;}
.social-media ul li:hover {transform:scale(1.1);}
.search-box {width:100%; border-radius:10px; padding:10px; outline-color:black; border:1px solid #e5e5e5; color:#949494; font-size:20px;}
.third-header {position:sticky; top:0; z-index:9999;box-shadow: 0 3px 10px 0 rgb(15 16 18 / 10%), 0 12px 30px 0 rgb(15 16 18 / 10%);background: white;}
.menus ul li {font-size:16px; color:#1d1d1d; position:relative;}
.menus ul li a {padding-bottom:10px;}
.menus ul li.active {font-weight:700;}
.menus ul li i {font-size:10px;}
.dropdown-menu {display:none; position:absolute; padding:15px; border-radius:0px; left:-100px; top:32px; box-shadow:0 3px 10px 0 rgb(15 16 18 / 10%), 0 12px 30px 0 rgb(15 16 18 / 10%); border:0px; font-weight:500; width:max-content;}
.dropdown-menu a {padding-bottom:6px !important;}
.home:hover .dropdown-menu, .features:hover .dropdown-menu, .store:hover .dropdown-menu, .blog:hover .dropdown-menu {display:block;}
.menus span {width:25px; height:25px; display:flex; align-items:center; justify-content:center; cursor:pointer;}
#sidemenu-btn {font-size:20px !important;}
#cart-sidebar, #sidemenu {position:fixed; background:white; width:400px; height:100vh; right:0; top:0; z-index:9999; transform:translateX(100%); transition:transform 0.3s ease-in-out;}
#sidemenu {height:100%; overflow-y:auto; overflow-x:hidden;}
#cart-sidebar.open, #sidemenu.open {transform:translateX(0); box-shadow:2px 0 12px rgba(0,0,0,0.4);}
#sidemenu ul {display:flex; flex-direction:column; list-style:none; margin-bottom:0px; padding-left:0px; row-gap:20px;}
#sidemenu ul li {font-size:18px; color:#1d1d1d;}
#sidemenu ul li.active {font-weight:700;}
#sidemenu ul li.active>a {background-size:100%;}
#sidemenu .submenu {row-gap:10px; padding-left:20px; padding-top:20px;}
#sidemenu .submenu li {font-size:17px; font-weight:400;}
#sidemenu-close-btn, #cart-close-btn {opacity:0.7;}
#sidemenu-close-btn:hover, #cart-close-btn:hover {opacity:1;}
.hero {background:url(../img/hero.webp); background-position:center; background-repeat:no-repeat; background-size:cover; width:100%; height:700px; padding-top:440px;}
.hero-card {border-radius:12px; height:100%; border:1px solid #e5e5e5; position:relative; box-shadow:0 3px 10px 0 rgb(15 16 18 / 10%), 0 12px 30px 0 rgb(15 16 18 / 10%); background:white;}
.hero-card img {border-radius:12px 12px 0px 0px;}
.hero-card div {border-radius:0px 0px 12px 12px;}
.hero-card .card-heading {font-size:18px; line-height:24px; font-weight:700; margin-bottom:10px;}
.hero-card p {font-size:14px; font-weight:700;}
.hero-card button {font-size:14px; text-transform:uppercase; background:#995e65; border-radius:12px; padding:3px 16px; position:absolute; right:10px; top:10px; border:0px; color:white;}
.wellness-main .first-card-main {padding-top:100px;}
.wellness-card {position:relative; padding:15px; border-radius:12px; min-height:550px; display:flex; flex-direction:column; justify-content:end;}
.wellness-card img {position:absolute; left:0; top:0; object-position:34% 50%; object-fit:cover; height:100%; z-index:-1; border-radius:500px; border-bottom-right-radius:20px;}
.wellness-card.second-card img {border-radius:500px; border-top-left-radius:20px;}
.wellness-card .card-heading {font-size:30px; line-height:36px; font-weight:700; margin-bottom:10px;}
.primary-btn {background:black; color:white; border-radius:30px; padding:7px 25px; font-weight:700; font-size:17px; transition:all .3s ease; -webkit-transition:all .3s ease;}
.primary-btn:hover {padding:7px 28px;}
.third-sec-main {background:#f5f5f5;}
.third-sec-main img {flex-shrink:0;}
.third-sec-main .card-heading {font-size:20px; line-height:26px; font-weight:700; margin-bottom:0px;}
.third-sec-main .card-heading {font-size:18px; line-height:24px;}
.category-card {padding:10px; border-radius:12px; box-shadow:0 3px 10px 0 rgb(15 16 18 / 10%), 0 12px 30px 0 rgb(15 16 18 / 10%); height:100%; border:1px solid #e5e5e5;}
.category-card img {border-radius:4px;}
.category-card .card-heading {font-size:18px; line-height:24px; margin-bottom:0px; color:#1d1d1d;}
.category-card span {background:#995e65; color:white; border-radius:4px; padding:0px 8px; font-size:15px; margin-left:5px; font-weight:500;}
.bg-grey {background:#f5f5f5;}
.fifth-section .heading {font-size:30px; line-height:40px;}
.secondary-btn {background:transparent; color:black; padding:4px 25px; font-size:17px; line-height:22px; border:1px solid black; border-radius:30px; text-decoration:none; font-weight:700; transition:all .3s; cursor:pointer;}
.secondary-btn:hover {padding:4px 27px;}
.hot-deals-card {display:flex; align-items:center; justify-content:center; flex-direction:column; height:100%; border-radius:12px; padding:100px 30px; text-align:center; box-shadow:0 3px 10px 0 rgb(15 16 18 / 10%), 0 12px 30px 0 rgb(15 16 18 / 10%);}
.hot-deals-card.first-card {background:#e9d6d6;}
.hot-deals-card.second-card {background:#e5e5e5;}
.hot-deals-card.third-card {background:#d4e4de;}
.hot-deals-card img {padding:0px 70px;}
.testimonials-card {border-radius:12px; padding:30px; background:white; box-shadow:0 3px 10px 0 rgb(15 16 18 / 10%), 0 12px 30px 0 rgb(15 16 18 / 10%);}
.testimonials-card.second-card {background:#d4e4de;}
.testimonials-card.third-card {background:#e9d6d6;}
.testimonials-card .card-heading {font-size:24px; line-height:30px; font-weight:800; margin-bottom:0px;}
.testimonials-card p {font-size:20px; margin-bottom:20px;}
.testimonials-card .star {color:#995e65;}
.testimonials-card img {border-radius:50%; flex-shrink:0;}
.testimonials-card .author-name {font-weight:800; margin-left:20px; margin-bottom:0px;}
.subscribe-text {background:#995e65; display:flex; overflow:hidden; overflow-x:hidden; user-select:none; gap:1.5rem;}
.subscribe-text .content {flex-shrink:0; display:flex; align-items:center; justify-content:space-around; gap:1.5rem; min-width:100%; animation:scroll 20s linear infinite; margin-top:0 !important;}

@keyframes scroll {
0% {transform:translateX(0);}
100% {transform:translateX(calc(-100% - 1.5rem));}
}

.second-last-main {background:white; border-top:1px solid #e5e5e5;}
footer {background:#f5f5f5; position:relative;}
footer .heading {font-size:20px; line-height:26px; font-weight:700; margin-bottom:20px;}
.copyright-text {font-size:15px; line-height:21px; font-weight:500;}
#scroll-to-top {font-size:22px; font-weight:800; position:absolute; right:10px; bottom:10px; padding:5px; cursor:pointer;}

@media (max-width:1300px) {
.third-heading {font-size:54px; line-height:64px;}
}

@media (max-width:1200px) {
.hot-deals-card img {padding:0px 50px;}
}

@media (max-width:992px) {
p {font-size:17px;}
.py-100 {padding-top:50px; padding-bottom:50px;}
.secondary-heading {font-size:30px; line-height:40px;}
.third-heading {font-size:34px; line-height:44px;}
.span-btn {font-size:18px; line-height:24px;}
.heading-container .secondary-heading {font-size:28px; line-height:34px;}
.second-header ul {justify-content:center;}
.social-media ul li {font-size:14px;}
.second-header {border-bottom:2px solid #e5e5e5;}
.hero {height:1270px; padding-top:50px;}
.hero-card .card-heading {font-size:17px; line-height:23px; margin-bottom:5px;}
.wellness-main {padding-top:100px;}
.wellness-main .first-card-main {padding-top:0px;}
.wellness-card {min-height:350px;}
.wellness-card .card-heading {font-size:26px; line-height:32px;}
.wellness-main button {font-size:15px;}
.third-sec-main img {margin-bottom:10px;}
.fifth-section .heading {font-size:26px; line-height:36px;}
.hot-deals-card {padding:60px 30px;}
.hot-deals-card img {padding:0px 10px;}
}

@media (max-width:576px) {
#sidemenu, #cart-sidebar {width:100%;}
}