/* Start custom CSS for html, class: .elementor-element-edefdeb *//* =========================================================
PRABHAT SUPPLEMENTS
HEADER — SCREENSHOT MATCH
========================================================= */
.ps-header {
width: 100%;
background: #080b0b;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
position: relative;
z-index: 9999;
}
/* =========================================================
TOP BAR
========================================================= */
.ps-topbar {
width: 100%;
height: 76px;
padding: 0 28px;
background: #050606;
border-bottom: 1px solid #5b4b00;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.ps-top-item {
display: flex;
align-items: center;
gap: 11px;
color: #eeeeee;
font-size: 14px;
line-height: 1;
white-space: nowrap;
}
.ps-top-item strong {
color: #e5b900;
font-weight: 700;
}
.ps-top-icon {
color: #e5b900;
font-size: 20px;
line-height: 1;
display: inline-flex;
align-items: center;
}
/* =========================================================
MAIN HEADER
========================================================= */
.ps-main-header {
width: 100%;
height: 214px;
background: #080b0b;
border-bottom: 1px solid #5b4b00;
padding-left: 265px;
display: flex;
align-items: center;
position: relative;
}
/* =========================================================
LOGO BOX
========================================================= */
.ps-header-logo {
position: absolute;
left: 0;
top: 0;
width: 265px;
height: 275px;
background: #080b0b;
border-left: 1px solid #5b4b00;
border-right: 1px solid #5b4b00;
border-bottom: 1px solid #5b4b00;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
.ps-header-logo a {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.ps-header-logo img {
width: 215px;
height: 235px;
object-fit: contain;
display: block;
}
/* =========================================================
NAVIGATION
========================================================= */
.ps-navigation {
width: auto;
margin-left: 45px;
display: flex;
align-items: center;
gap: 39px;
}
.ps-navigation a {
color: #eeeeee;
text-decoration: none;
font-size: 15px;
font-weight: 600;
white-space: nowrap;
position: relative;
padding: 12px 0;
transition: .25s ease;
}
.ps-navigation a:hover {
color: #e5b900;
}
/* ACTIVE LINK */
.ps-navigation a.ps-active {
color: #e5b900;
}
.ps-navigation a.ps-active::after {
content: "";
position: absolute;
left: 18px;
right: 18px;
bottom: -2px;
height: 2px;
background: #e5b900;
}
/* =========================================================
HEADER ICONS
========================================================= */
.ps-header-icons {
margin-left: auto;
padding-right: 28px;
display: flex;
align-items: center;
gap: 25px;
}
.ps-icon {
width: 29px;
height: 29px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
text-decoration: none;
transition: .25s ease;
}
.ps-icon:hover {
color: #e5b900;
transform: translateY(-1px);
}
.ps-icon svg {
width: 28px;
height: 28px;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
/* =========================================================
CART
========================================================= */
.ps-cart {
position: relative;
}
.ps-cart-count {
position: absolute;
top: -12px;
right: -12px;
width: 22px;
height: 22px;
background: #e5b900;
color: #111111;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
/* =========================================================
SECOND NAVIGATION
========================================================= */
.ps-second-nav {
width: 100%;
height: 80px;
background: #0a0d0c;
border-bottom: 1px solid #5b4b00;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* SHOP ALL */
.ps-shop-all {
color: #ffffff;
text-decoration: none;
font-size: 16px;
font-weight: 700;
transition: .25s ease;
}
.ps-shop-all:hover {
color: #e5b900;
}
/* =========================================================
APPOINTMENT BUTTON
========================================================= */
.ps-appointment {
position: absolute;
right: 19px;
top: 50%;
transform: translateY(-50%);
height: 55px;
min-width: 278px;
padding: 0 25px;
background: #e5b900;
color: #111111;
border-radius: 5px;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
font-size: 15px;
font-weight: 800;
letter-spacing: .2px;
transition: .25s ease;
}
.ps-appointment span {
font-size: 22px;
line-height: 1;
}
.ps-appointment:hover {
background: #f1c91b;
color: #111111;
transform:
translateY(-50%)
translateY(-2px);
box-shadow:
0 7px 20px rgba(229,185,0,.18);
}
/* =========================================================
DESKTOP SCREENSHOT ALIGNMENT
========================================================= */
@media (min-width: 1200px) {
.ps-navigation {
margin-left: 45px;
gap: 38px;
}
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1200px) {
.ps-topbar {
padding: 0 18px;
gap: 12px;
}
.ps-top-item {
font-size: 11px;
}
.ps-main-header {
padding-left: 215px;
}
.ps-header-logo {
width: 215px;
}
.ps-header-logo img {
width: 175px;
height: 220px;
}
.ps-navigation {
margin-left: 30px;
gap: 22px;
}
.ps-navigation a {
font-size: 12px;
}
.ps-header-icons {
gap: 14px;
padding-right: 18px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
.ps-topbar {
display: none;
}
.ps-main-header {
height: 115px;
padding-left: 180px;
}
.ps-header-logo {
width: 180px;
height: 115px;
border-bottom: none;
}
.ps-header-logo img {
width: 145px;
height: 105px;
}
.ps-navigation {
display: none;
}
.ps-header-icons {
margin-left: auto;
padding-right: 22px;
}
.ps-second-nav {
height: 65px;
}
.ps-appointment {
height: 47px;
min-width: 230px;
font-size: 13px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.ps-main-header {
height: 90px;
padding-left: 125px;
}
.ps-header-logo {
width: 125px;
height: 90px;
}
.ps-header-logo img {
width: 105px;
height: 82px;
}
.ps-header-icons {
gap: 13px;
padding-right: 15px;
}
.ps-icon {
width: 24px;
height: 24px;
}
.ps-icon svg {
width: 23px;
height: 23px;
}
.ps-cart-count {
width: 18px;
height: 18px;
font-size: 9px;
top: -9px;
right: -9px;
}
.ps-second-nav {
height: 58px;
}
.ps-shop-all {
font-size: 14px;
}
.ps-appointment {
right: 10px;
height: 40px;
min-width: auto;
padding: 0 13px;
font-size: 10px;
}
.ps-appointment span {
font-size: 17px;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 400px) {
.ps-main-header {
padding-left: 105px;
}
.ps-header-logo {
width: 105px;
}
.ps-header-logo img {
width: 90px;
}
.ps-header-icons {
gap: 9px;
}
.ps-appointment {
font-size: 9px;
padding: 0 9px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c505f32 *//* =====================================
PRABHAT SUPPLEMENTS
PREMIUM PRODUCT SECTION
===================================== */
.ps-products {
width: 100%;
padding: 90px 20px;
background:
radial-gradient(
circle at 10% 10%,
rgba(212,175,55,.08),
transparent 30%
),
radial-gradient(
circle at 90% 90%,
rgba(212,175,55,.06),
transparent 30%
),
#070707;
font-family: Arial, sans-serif;
box-sizing: border-box;
}
.ps-container {
max-width: 1250px;
margin: auto;
}
/* HEADING */
.ps-heading {
text-align: center;
margin-bottom: 55px;
}
.ps-heading span {
color: #d4af37;
font-size: 12px;
font-weight: 700;
letter-spacing: 4px;
}
.ps-heading h2 {
color: #fff;
font-size: 42px;
margin: 12px 0;
}
.ps-heading p {
color: #888;
font-size: 15px;
margin: 0;
}
/* PRODUCT GRID */
.ps-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
}
/* CARD */
.ps-card {
position: relative;
background: linear-gradient(
145deg,
#1a1a1a,
#0d0d0d
);
border: 1px solid #292929;
border-radius: 18px;
overflow: hidden;
transition: .4s ease;
}
.ps-card:hover {
transform: translateY(-10px);
border-color: #d4af37;
box-shadow:
0 20px 50px
rgba(212,175,55,.15);
}
/* IMAGE */
.ps-image {
height: 300px;
padding: 25px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(
circle,
rgba(212,175,55,.09),
transparent 65%
);
}
.ps-image img {
width: 100%;
height: 100%;
object-fit: contain;
transition: .5s ease;
}
.ps-card:hover .ps-image img {
transform: scale(1.08);
}
/* BADGE */
.ps-badge {
position: absolute;
top: 15px;
left: 15px;
background: #d4af37;
color: #080808;
padding: 6px 10px;
border-radius: 4px;
font-size: 9px;
font-weight: 800;
letter-spacing: 1px;
z-index: 2;
}
/* INFO */
.ps-info {
padding: 25px;
border-top: 1px solid #292929;
}
.ps-info small {
color: #d4af37;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
}
.ps-info h3 {
color: #fff;
font-size: 18px;
line-height: 1.4;
margin: 9px 0;
min-height: 50px;
}
/* STARS */
.ps-stars {
color: #d4af37;
font-size: 14px;
letter-spacing: 3px;
margin: 12px 0;
}
/* PRICE */
.ps-price {
color: #fff;
font-size: 24px;
font-weight: 700;
margin-bottom: 20px;
}
.ps-price del {
color: #666;
font-size: 13px;
font-weight: 400;
margin-left: 7px;
}
/* BUTTON */
.ps-info button {
width: 100%;
height: 48px;
border: 1px solid #d4af37;
border-radius: 7px;
background:
linear-gradient(
135deg,
#d4af37,
#a9821c
);
color: #080808;
font-size: 12px;
font-weight: 800;
letter-spacing: 1px;
cursor: pointer;
transition: .3s ease;
}
.ps-info button:hover {
background:
linear-gradient(
135deg,
#f4dc87,
#d4af37
);
box-shadow:
0 8px 25px
rgba(212,175,55,.25);
transform: translateY(-2px);
}
/* TABLET */
@media (max-width: 1050px) {
.ps-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* MOBILE */
@media (max-width: 600px) {
.ps-products {
padding: 60px 15px;
}
.ps-heading h2 {
font-size: 30px;
}
.ps-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.ps-image {
height: 280px;
}
.ps-info {
padding: 22px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f7659c8 */.reviews-section {
width: 100%;
padding: 70px 20px;
background: #f7f7f7;
font-family: Arial, sans-serif;
}
.reviews-container {
max-width: 1200px;
margin: auto;
}
.reviews-heading {
text-align: center;
margin-bottom: 45px;
}
.reviews-heading span {
color: #e63946;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.reviews-heading h2 {
margin: 10px 0;
font-size: 38px;
color: #111;
}
.reviews-heading p {
color: #666;
font-size: 16px;
}
.reviews-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
.review-card {
background: #fff;
padding: 30px;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0,0,0,0.08);
transition: 0.3s ease;
}
.review-card:hover {
transform: translateY(-7px);
}
.stars {
color: #f5b301;
font-size: 22px;
letter-spacing: 3px;
margin-bottom: 18px;
}
.review-card p {
color: #555;
font-size: 16px;
line-height: 1.7;
margin-bottom: 25px;
}
.customer {
display: flex;
align-items: center;
gap: 12px;
}
.customer-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: #111;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: bold;
}
.customer h4 {
margin: 0 0 4px;
color: #111;
font-size: 16px;
}
.customer span {
color: #888;
font-size: 13px;
}
/* Mobile */
@media (max-width: 768px) {
.reviews-grid {
grid-template-columns: 1fr;
}
.reviews-heading h2 {
font-size: 30px;
}
.review-card {
padding: 25px;
}
}/* End custom CSS */