/* Start custom CSS for html, class: .elementor-element-f4d0ced *//* ===========================
Sacred Skin Hero Section
=========================== */
.ss-hero{
position:relative;
height:82vh;
min-height:620px;
max-height:760px;
overflow:hidden;
border-radius:35px;
}
/* Slides */
.ss-slide{
position:absolute;
inset:0;
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
opacity:0;
transition:opacity .9s ease;
animation:zoomBackground 18s linear infinite;
}
.ss-slide.active{
opacity:1;
z-index:2;
}
@keyframes zoomBackground{
from{
transform:scale(1.03);
}
to{
transform:scale(1.10);
}
}
/* Overlay */
.ss-overlay{
position:absolute;
inset:0;
background:linear-gradient(
90deg,
rgba(255,255,255,.15),
rgba(206,162,253,.10),
rgba(255,255,255,.05)
);
}
/* Content Wrapper */
.ss-slide-inner{
position:relative;
z-index:2;
display:flex;
align-items:center;
height:100%;
padding:40px 8%;
box-sizing:border-box;
}
/* Glass Card */
.ss-content{
width:100%;
max-width:540px;
padding:40px 45px;
background:rgba(255,255,255,.35);
backdrop-filter:blur(28px);
-webkit-backdrop-filter:blur(28px);
border:1px solid rgba(255,255,255,.55);
border-radius:30px;
box-shadow:
0 20px 60px rgba(0,0,0,.08);
color:#333;
}
/* Tag */
.tag{
display:inline-block;
padding:10px 18px;
border-radius:40px;
background:rgba(255,255,255,.75);
color:#CEA2FD;
font-size:.82rem;
font-weight:600;
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:18px;
}
/* Heading */
.ss-content h1{
font-family:inherit;
font-size:clamp(2.8rem,4vw,4rem);
font-weight:700;
line-height:1.1;
color:#222;
margin:0 0 20px;
}
.ss-content h1 span{
color:#CEA2FD;
}
/* Description */
.ss-content p{
font-family:inherit;
font-size:1rem;
line-height:1.8;
color:#555;
margin-bottom:30px;
}
/* Buttons */
.buttons{
display:flex;
gap:18px;
flex-wrap:wrap;
}
.btn-primary,
.btn-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
padding:15px 34px;
border-radius:9px;
text-decoration:none !important;
font-family:inherit;
font-weight:600;
transition:all .35s ease;
}
/* Primary */
.btn-primary{
background:#CEA2FD;
color:#fff;
}
.btn-primary:hover{
background:#B48AFD;
transform:translateY(-4px);
box-shadow:
0 12px 30px rgba(206,162,253,.35);
}
/* Secondary */
.btn-secondary{
background:rgba(255,255,255,.65);
border:1px solid #CEA2FD;
color:#CEA2FD;
}
.btn-secondary:hover{
background:#fff;
transform:translateY(-4px);
box-shadow:
0 12px 30px rgba(0,0,0,.08);
}
/* Tablet */
@media (max-width:1024px){
.ss-hero{
height:75vh;
min-height:600px;
}
.ss-content{
max-width:500px;
padding:35px;
}
}
/* Mobile */
@media (max-width:768px){
.ss-hero{
height:70vh;
min-height:540px;
border-radius:24px;
}
.ss-slide-inner{
padding:25px 20px;
align-items:center;
}
.ss-content{
width:100%;
max-width:none;
padding:28px;
}
.ss-content h1{
font-size:2.2rem;
}
.ss-content p{
font-size:.95rem;
}
.buttons{
flex-direction:column;
gap:12px;
}
.btn-primary,
.btn-secondary{
width:100%;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9a36c36 *//*==============================
SHOP BY CATEGORY
===============================*/
.ss-categories{
position:relative;
padding:100px 0;
background:
linear-gradient(
135deg,
rgba(255,255,255,.55),
rgba(245,236,249,.65),
rgba(255,255,255,.55)
);
backdrop-filter:blur(35px);
-webkit-backdrop-filter:blur(35px);
border-top:1px solid rgba(255,255,255,.6);
border-bottom:1px solid rgba(255,255,255,.6);
overflow:hidden;
}
.ss-container{
position:relative;
z-index:2;
width:min(1200px,92%);
margin:auto;
}
.ss-section-heading{
text-align:center;
max-width:700px;
margin:0 auto 60px;
}
.ss-subtitle{
display:inline-block;
padding:10px 22px;
border-radius:50px;
background:#F7EFFA;
color:#CEA2FD;
font-size:.85rem;
font-weight:600;
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:18px;
}
.ss-section-heading h2{
font-family:inherit;
font-size:clamp(2rem,4vw,3rem);
color:#222;
margin-bottom:20px;
}
.ss-section-heading p{
color:#666;
line-height:1.8;
}
/* Grid */
.ss-category-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}
/* Card */
.ss-category-card{
background:#fff;
border-radius:30px;
padding:35px 25px;
text-align:center;
text-decoration:none;
color:inherit;
border:1px solid rgba(206,162,253,.12);
box-shadow:
0 12px 35px rgba(0,0,0,.05);
transition:.35s ease;
}
.ss-category-card:hover{
transform:translateY(-8px);
box-shadow:
0 22px 45px rgba(206,162,253,.15);
}
/* Image */
.ss-category-image{
width:150px;
height:150px;
margin:0 auto 25px;
border-radius:50%;
padding:8px;
background:
linear-gradient(
135deg,
#ffffff,
#f4ebf7
);
box-shadow:
0 10px 30px rgba(206,162,253,.12);
}
.ss-category-image img{
width:100%;
height:100%;
object-fit:cover;
border-radius:50%;
transition:.4s;
}
.ss-category-card:hover img{
transform:scale(1.08);
}
/* Heading */
.ss-category-card h3{
font-family:inherit;
font-size:1.3rem;
margin-bottom:18px;
color:#222;
}
/* Link */
.ss-category-card span{
display:inline-flex;
align-items:center;
gap:8px;
color:#CEA2FD;
font-weight:600;
transition:.3s;
}
.ss-category-card:hover span{
gap:14px;
}
/* Tablet */
@media(max-width:1024px){
.ss-category-grid{
grid-template-columns:repeat(2,1fr);
}
}
/* Mobile */
@media(max-width:767px){
.ss-categories{
padding:70px 0;
}
.ss-category-grid{
grid-template-columns:repeat(2,1fr);
gap:18px;
}
.ss-category-card{
padding:25px 15px;
}
.ss-category-image{
width:110px;
height:110px;
}
.ss-category-card h3{
font-size:1rem;
}
.ss-category-card span{
font-size:.85rem;
}
}
.ss-categories::before{
content:"";
position:absolute;
width:500px;
height:500px;
background:radial-gradient(
circle,
rgba(206,162,253,.18),
transparent 70%
);
top:-180px;
left:-150px;
border-radius:50%;
pointer-events:none;
}
.ss-categories::after{
content:"";
position:absolute;
width:450px;
height:450px;
background:radial-gradient(
circle,
rgba(206,162,253,.12),
transparent 70%
);
bottom:-220px;
right:-150px;
border-radius:50%;
pointer-events:none;
}
/*=========================================
CATEGORY CTA BUTTON
==========================================*/
.ss-category-footer{
display:flex;
justify-content:right;
align-items:right;
margin-top:26px;
}
.ss-category-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:1px;
padding:10px 18px;
border-radius:8px;
text-decoration:none!important;
font-family:inherit;
font-size:1rem;
font-weight:600;
color:#fff;
background:linear-gradient(
135deg,
#CEA2FD 0%,
#B48AFD 100%
);
border:none;
cursor:pointer;
box-shadow:
0 15px 40px rgba(206,162,253,.25);
transition:
all .35s ease;
}
.ss-category-btn svg{
width:20px;
height:20px;
transition:
transform .35s ease;
}
.ss-category-btn:hover{
color:#fff;
transform:translateY(-5px);
box-shadow:
0 22px 50px rgba(206,162,253,.35);
filter:brightness(1.05);
}
.ss-category-btn:hover svg{
transform:translateX(6px);
}
.ss-category-btn:active{
transform:translateY(-2px);
}
.ss-category-btn:focus{
outline:none;
}
/* Tablet */
@media (max-width:1024px){
.ss-category-footer{
margin-top:50px;
}
}
/* Mobile */
@media (max-width:767px){
.ss-category-footer{
margin-top:40px;
}
.ss-category-btn{
width:100%;
max-width:320px;
padding:16px 28px;
font-size:.95rem;
}
}/* End custom CSS */