*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.hero-wrap {
max-width: 100%;
margin: auto;
}
.hero {
width: 100%;
position: relative;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, .35)
}
.hero .swiper {
width: 100%;
height: min(100vh, 100vh)
}
.slide__media {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden
}
.slide__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left center; /* Ye line image ko right side se align karegi */
display: block;
transform: scale(1.1);
}
/* Ken Burns only on active */
.swiper-slide-active .slide__img {
animation: kb 5.2s ease-out forwards
}
@keyframes kb {
from {
transform: scale(1)
}
to {
transform: scale(1.1)
}
}
/* overlays */
.slide__overlay:before,
.slide__overlay:after {
content: “”;
position: absolute;
inset: 0;
pointer-events: none
}
.slide__overlay:before {
background: linear-gradient(0deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .08));
z-index: 1
}
.slide__overlay:after {
background: linear-gradient(90deg, rgba(0, 0, 0, .65), transparent 55%);
z-index: 1
}
.slide__content {
z-index: 2;
padding: 20px;
max-width: 1200px;
margin: auto;
position: absolute;
left: 0;
right: 0;
bottom: 20vh;
}
.hero_title {
margin: .25rem 0 1rem;
font: 700 clamp(34px, 4.5vw, 48px)/1 “Big Shoulders Display”, Inter, sans-serif;
text-transform: uppercase;
letter-spacing: .02em;
color: white;
}
.hero_desc {
opacity: .62;
max-width: 56ch
}
/* Base button */
.hero_cta {
margin-top: 20px;
padding-left: 14px;
border-radius: 30px;
background: #fff;
color: #121212;
border: 1px solid rgba(255, 255, 255, .1);
text-decoration: none;
font-weight: 600;
position: relative;
display: inline-flex;
align-items: center; /* space between text and circle */
padding: 12px;
padding-right: 56px; /* right pad leaves room for the circle */
padding-left: 28px;
text-decoration: none;
overflow: hidden; /* clips the expanding circle */
box-shadow: 0 4px 15px rgba(0,0,0,.08);
transition: color .45s ease, background .45s ease, box-shadow .45s ease;
}
/* Keep the text above the expanding layer */
.hero_cta .label {
position: relative;
z-index: 2;
}
/* The arrow circle (anchor point for the expansion) */
.hero_cta .dot {
position: absolute;
right: 7px;
top: 50%;
width: 34px;
height: 34px;
transform: translateY(-50%);
border-radius: 50%;
display: grid;
place-items: center;
z-index: 1; /* arrow sits above the expanding bg */
}
/* The expanding black background lives on the dot’s ::before */
.hero_cta .dot::before {
content: “”;
position: absolute;
inset: 0;
border-radius: 50%;
background: #000000;
transform: scale(1);
transition: transform .55s ease; /* expansion speed/curve */
z-index: 0; /* behind the arrow SVG */
}
/* Arrow icon */
.hero_cta .dot svg {
width: 18px;
height: 18px;
fill: #ffffff;
position: relative;
z-index: 1; /* stay visible while background expands */
transition: transform .35s ease;
}
/* Hover state: circle grows to cover entire button, text goes white */
.hero_cta:hover,
.hero_cta:focus-visible {
color: #ffffff; /* text turns white */
background: #ffffff; /* stays white; black layer covers it */
box-shadow: 0 6px 20px rgba(0,0,0,.15);
}
.hero_cta:hover .dot::before,
.hero_cta:focus-visible .dot::before {
transform: scale(20); /* big enough to fill the pill */
}
/* Optional: subtle arrow nudge (remove if you want zero movement) */
.hero_cta:hover .dot svg,
.hero_cta:focus-visible .dot svg {
transform: translateX(1px);
}
/* Press/tap feedback */
.hero_cta:active { transform: scale(.98); }
/* Accessibility: keyboard focus ring */
.hero_cta:focus-visible {
outline: 2px solid rgba(0,0,0,.35);
outline-offset: 3px;
}
/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
.hero_cta,
.hero_cta .dot::before,
.hero_cta .dot svg {
transition: none;
}
}
/* ===== Bottom Navigator ===== */
.hero-nav {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 0 20px 18px;
z-index: 3;
max-width: 1200px;
margin: auto;
}
.hero-nav__rail {
height: 1px;
background: rgba(255, 255, 255, .25);
transform: translateY(-14px)
}
.hero-nav__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
list-style: none;
margin: 0;
padding: 0
}
.hero-nav__item {
position: relative;
padding: 14px 16px;
border-radius: 10px;
color: #fff8;
cursor: pointer;
user-select: none;
outline: none;
}
.hero-nav__item:focus-visible {
box-shadow: 0 0 0 2px #fff8 inset
}
.hero-nav__num {
font: 700 18px/1 “Big Shoulders Display”, Inter, sans-serif;
letter-spacing: .03em;
margin-bottom: 6px;
display: block
}
.hero-nav__label {
font-size: 13px;
opacity: .8
}
/* Underline track + filling bar */
.hero-nav__bar {
position: absolute;
left: 0;
right: 0;
top: -14px;
height: 4px;
overflow: hidden;
}
.hero-nav__fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #fff;
transform-origin: left center;
}
/* active aesthetics */
.hero-nav__item.is-active {
color: #fff;
/* background: rgba(255, 255, 255, .06) */
}
.hero-nav__item.is-active .hero-nav__label {
opacity: .95
}
.hero-nav__item:hover {
color: white;
}
/* Swiper specifics (no CSS vars here) */
.swiper-slide {
opacity: .4;
transition: opacity .5s ease
}
.swiper-slide-active {
opacity: 1
}
@media (max-width:900px) {
.slide__content{
padding: 20px !important;
}
/* ===== Bottom Navigator ===== */
.hero-nav {
padding: 20px;
}
}
@media (max-width:600px) {
.slide__content{
padding: 20px !important;
bottom: 15vh;
}
/* ===== Bottom Navigator ===== */
.hero-nav {
padding: 20px;
}
.hero-nav__label{
display: none;
}
.swiper-slide .slide__content .hero_desc{
font-size: 14px;
color: white ;
}
.hero .swiper {
width: 100%;
height: min(94vh, 100vh)
}
.slide__img {
object-position: 90% center;
}
}
/* ✨ Text Fade-Up Animation */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* By default hidden */
.slide__content > * {
opacity: 0;
transform: translateY(30px);
}
/* Animate when active slide */
.swiper-slide-active .slide__content > * {
animation: fadeUp 0.9s ease-out forwards;
}
/* Small stagger delay for each element */
.swiper-slide-active .slide__content .eyebrow {
animation-delay: 0.1s;
}
.eyebrow {
color: white;
}
.swiper-slide-active .slide__content .hero_title {
animation-delay: 0.3s;
}
.swiper-slide-active .slide__content .hero_desc {
animation-delay: 0.5s;
}
.swiper-slide-active .slide__content .hero_cta {
animation-delay: 0.7s;
}
#hero_desc {
color: white;
}
// — Build the bottom nav from slides —
const swiperEl = document.querySelector(‘.hero-swiper’);
const slides = […swiperEl.querySelectorAll(‘.swiper-slide’)];
const nav = document.getElementById(‘heroNav’);
slides.forEach((s, i) => {
const li = document.createElement(‘li’);
li.className = ‘hero-nav__item’;
li.setAttribute(‘role’,’button’);
li.setAttribute(‘tabindex’,’0′);
li.dataset.index = i;
li.innerHTML = `
${String(i+1).padStart(2,’0′)}
${s.dataset.title || ‘Slide’}
`;
li.addEventListener(‘click’, () => {
swiper.slideToLoop(i, 100, false);
restartAutoplayProgress();
});
li.addEventListener(‘keydown’, (e) => {
if(e.key === ‘Enter’ || e.key === ‘ ‘) { e.preventDefault(); li.click(); }
});
nav.appendChild(li);
});
// — Swiper init —
const AUTOPLAY_DELAY = 4200; // ms (match Ken Burns animation)
const swiper = new Swiper(‘.hero-swiper’, {
loop: true,
effect: ‘fade’,
fadeEffect: { crossFade: true },
speed: 100,
autoplay: { delay: AUTOPLAY_DELAY, disableOnInteraction: false },
on: {
init(){ setActiveNav(this.realIndex); },
slideChange(){ setActiveNav(this.realIndex); }
}
});
// — Progress fill logic (like Framer progress line) —
let raf;
function setActiveNav(realIndex){
const items = […nav.children];
items.forEach((li, idx) => {
li.classList.toggle(‘is-active’, idx === realIndex);
const fill = li.querySelector(‘.hero-nav__fill’);
if(idx === realIndex){
fill.style.transform = ‘scaleX(0)’;
}else{
fill.style.transform = ‘scaleX(0)’;
}
});
}
function animateProgress(_, timeLeft, progress){
// Swiper’s autoplayTimeLeft gives progress 0..1 (0 start, 1 end)
const active = nav.querySelector(‘.hero-nav__item.is-active .hero-nav__fill’);
if(active){
active.style.transform = `scaleX(${1 – progress})`;
}
}
swiper.on(‘autoplayTimeLeft’, animateProgress);
function restartAutoplayProgress(){
// reset all fills then restart autoplay so the timer restarts
nav.querySelectorAll(‘.hero-nav__fill’).forEach(f=>f.style.transform=’scaleX(0)’);
swiper.autoplay.start();
}
Clothing
Home & Lifestyle
Popular
Available Now
Carry “Forever Muslim”
Carry “Forever Muslim”
In Your Pocket
Download our official app for a faster shopping experience. Get notified about new Attar drops and Hijab collections.
GET IT ON
Google Play
Clothing with Purpose
Welcome to Forever Muslim, where we’re on a mission to create a positive #MuslimNarrative. Our brand is dedicated to amplifying positive stories and highlighting the good in the world.
At Forever Muslim, we believe that representation matters. That’s why our clothing is designed to celebrate Muslim Identity and Culture. We want to create a world where Being Muslim is seen as a positive, empowering part of your identity. We want you to feel proud of who you are and what you believe in, and to know that your life matters.
Our brand is more than just clothing; with over 50K+ strong communities on social media who share our vision for a better world, we’re proud to be at the forefront of the movement to shift the narrative surrounding Islam.
We are also committed towards giving back to society and empowering the community. With strategic partnerships with high-value Non-Profits we work closely in creating opportunities, providing relief to victims of violence and disaster and creating an environment to nurture young minds with empathy and compassion.
We welcome people of all backgrounds to join our community and be a part of something bigger than ourselves. Together, we can make a difference. Join us in spreading the message of peace and compassion, and let’s create a brighter future.