/* =========================================================
   HAYNA UI v2
   Design System
   ========================================================= */

/* =========================
   GOOGLE FONT
========================= */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');


/* =========================
   ROOT
========================= */

:root{

--primary:#6E44FF;
--primary-dark:#5A34E0;
--primary-light:#8F67FF;

--secondary:#B89BFF;

--accent:#E8DEFF;

--success:#22C55E;

--danger:#EF4444;

--warning:#F59E0B;

--info:#3B82F6;

--bg:#F6F4FF;

--surface:#FFFFFF;

--surface-2:#FAFAFD;

--text:#1E2235;

--text-light:#6C738A;

--border:#ECEAF5;

--shadow:0 10px 30px rgba(40,28,100,.08);

--shadow-lg:0 25px 70px rgba(40,28,100,.12);

--glass:rgba(255,255,255,.60);

--radius:24px;

--radius-lg:34px;

--transition:.30s ease;

--container:1320px;

}


/* =========================
RESET
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{

scroll-behavior:smooth;

}

body{

font-family:'Tajawal',sans-serif;

background:var(--bg);

color:var(--text);

overflow-x:hidden;

line-height:1.8;

}


img{

max-width:100%;

display:block;

}


a{

text-decoration:none;

color:inherit;

transition:var(--transition);

}


ul{

list-style:none;

}


button,input,select,textarea{

font-family:'Tajawal',sans-serif;

outline:none;

}


/* =========================
CONTAINER
========================= */

.container{

width:min(var(--container),92%);

margin:auto;

}


/* =========================
SECTION
========================= */

section{

padding:80px 0;

}


.section-title{

text-align:center;

margin-bottom:50px;

}

.section-title h2{

font-size:38px;

font-weight:800;

margin-bottom:15px;

}

.section-title p{

font-size:18px;

color:var(--text-light);

}


/* =========================
BUTTONS
========================= */

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:14px 28px;

border:none;

border-radius:16px;

cursor:pointer;

transition:.3s;

font-weight:700;

}

.btn-primary{

background:linear-gradient(135deg,#6E44FF,#8F67FF);

color:#fff;

box-shadow:var(--shadow);

}

.btn-primary:hover{

transform:translateY(-4px);

box-shadow:var(--shadow-lg);

}

.btn-outline{

background:#fff;

border:1px solid var(--border);

}

.btn-outline:hover{

background:var(--primary);

color:#fff;

}


/* =========================
CARDS
========================= */

.card{

background:#fff;

border-radius:24px;

box-shadow:var(--shadow);

transition:.3s;

overflow:hidden;

}

.card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow-lg);

}


/* =========================
GLASS
========================= */

.glass{

background:var(--glass);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.35);

}


/* =========================
GRID
========================= */

.grid{

display:grid;

gap:25px;

}

.grid-2{

grid-template-columns:repeat(2,1fr);

}

.grid-3{

grid-template-columns:repeat(3,1fr);

}

.grid-4{

grid-template-columns:repeat(4,1fr);

}
/* ==========================================================
   HEADER & NAVBAR
========================================================== */

.site-header{

position:fixed;

top:0;

left:0;

right:0;

z-index:9999;

padding:18px 0;

transition:.35s;

}

.site-header.scrolled{

padding:12px 0;

background:rgba(255,255,255,.72);

backdrop-filter:blur(20px);

box-shadow:0 10px 35px rgba(0,0,0,.08);

}

.navbar{

display:flex;

align-items:center;

justify-content:space-between;

gap:30px;

}

.navbar-logo{

display:flex;

align-items:center;

gap:12px;

font-size:30px;

font-weight:800;

color:var(--primary);

}

.navbar-logo img{

height:54px;

}

.logo-fallback{

display:flex;

align-items:center;

gap:10px;

font-size:30px;

font-weight:800;

}

.logo-fallback i{

width:52px;

height:52px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,var(--primary),var(--primary-light));

color:#fff;

border-radius:16px;

}

.nav-menu{

display:flex;

align-items:center;

gap:12px;

}

.nav-menu a{

padding:12px 18px;

border-radius:14px;

font-weight:700;

color:var(--text);

transition:.3s;

}

.nav-menu a:hover{

background:#fff;

color:var(--primary);

box-shadow:var(--shadow);

}

.nav-menu .active{

background:linear-gradient(135deg,var(--primary),var(--primary-light));

color:#fff;

}

.navbar-actions{

display:flex;

align-items:center;

gap:14px;

}

.btn-register{

padding:14px 26px;

border-radius:16px;

background:linear-gradient(135deg,var(--primary),var(--primary-light));

color:#fff;

font-weight:700;

display:flex;

align-items:center;

gap:10px;

box-shadow:var(--shadow);

}

.btn-register:hover{

transform:translateY(-4px);

box-shadow:var(--shadow-lg);

}

.btn-login{

padding:14px 24px;

background:#fff;

border-radius:16px;

border:1px solid var(--border);

font-weight:700;

display:flex;

align-items:center;

gap:10px;

}

.btn-login:hover{

background:var(--primary);

color:#fff;

}

.mobile-toggle{

display:none;

background:none;

border:none;

font-size:30px;

cursor:pointer;

color:var(--primary);

}


/* ==========================================================
   HERO
========================================================== */

.hero{

padding-top:170px;

padding-bottom:120px;

position:relative;

overflow:hidden;

background:
linear-gradient(135deg,#6E44FF 0%,#7C55FF 45%,#B18FFF 100%);

color:#fff;

}

.hero::before{

content:"";

position:absolute;

width:700px;

height:700px;

background:rgba(255,255,255,.08);

border-radius:50%;

top:-250px;

left:-250px;

filter:blur(30px);

}

.hero::after{

content:"";

position:absolute;

width:550px;

height:550px;

background:rgba(255,255,255,.08);

border-radius:50%;

bottom:-220px;

right:-180px;

filter:blur(40px);

}

.hero .container{

position:relative;

z-index:5;

text-align:center;

}

.hero h1{

font-size:64px;

font-weight:800;

margin-bottom:25px;

line-height:1.3;

}

.hero p{

font-size:22px;

opacity:.95;

max-width:760px;

margin:auto;

margin-bottom:50px;

}


/* ==========================================================
   SEARCH BOX
========================================================== */

.search-box{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr auto;

gap:18px;

background:rgba(255,255,255,.18);

backdrop-filter:blur(25px);

padding:24px;

border-radius:30px;

box-shadow:0 25px 60px rgba(0,0,0,.12);

}

.search-box input,
.search-box select{

height:58px;

border:none;

border-radius:16px;

padding:0 18px;

font-size:16px;

background:#fff;

}

.search-box button{

height:58px;

padding:0 32px;

border:none;

border-radius:16px;

background:#fff;

color:var(--primary);

font-weight:800;

cursor:pointer;

transition:.3s;

}

.search-box button:hover{

transform:scale(1.04);

}


/* ==========================================================
   STATISTICS
========================================================== */

.stats{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

}

.stat-card{

background:#fff;

border-radius:26px;

padding:35px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

}

.stat-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-lg);

}

.stat-card i{

width:78px;

height:78px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

border-radius:22px;

background:linear-gradient(135deg,var(--primary),var(--primary-light));

color:#fff;

margin-bottom:20px;

}

.stat-card h3{

font-size:40px;

font-weight:800;

margin-bottom:8px;

}

.stat-card span{

color:var(--text-light);

font-size:18px;

}


/* ==========================================================
   CATEGORY CARD
========================================================== */

.category-grid{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(220px,1fr));

gap:25px;

}

.category-card{

background:#fff;

padding:35px;

border-radius:24px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

}

.category-card:hover{

transform:translateY(-8px);

background:linear-gradient(135deg,var(--primary),var(--primary-light));

color:#fff;

}

.category-card i{

font-size:42px;

margin-bottom:18px;

}

.category-card h4{

font-size:22px;

font-weight:700;

}
/* ==========================================================
   STORE CARDS
========================================================== */

.store-grid{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(320px,1fr));

gap:30px;

}

.store-card{

position:relative;

background:#fff;

border-radius:28px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.35s;

}

.store-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-lg);

}

.store-cover{

position:relative;

height:210px;

overflow:hidden;

background:#eee;

}

.store-cover img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

.store-card:hover .store-cover img{

transform:scale(1.08);

}

.store-logo{

position:absolute;

top:155px;

right:25px;

width:88px;

height:88px;

border-radius:50%;

overflow:hidden;

border:5px solid #fff;

background:#fff;

box-shadow:0 8px 20px rgba(0,0,0,.12);

}

.store-logo img{

width:100%;

height:100%;

object-fit:cover;

}

.store-body{

padding:70px 25px 25px;

}

.store-name{

font-size:24px;

font-weight:800;

margin-bottom:8px;

}

.store-category{

color:var(--primary);

font-weight:700;

margin-bottom:18px;

}

.store-rating{

display:flex;

align-items:center;

gap:8px;

margin-bottom:18px;

font-weight:700;

}

.store-rating i{

color:#FFC107;

}

.store-actions{

display:flex;

gap:12px;

margin-top:20px;

}

.btn-view{

flex:1;

height:48px;

display:flex;

align-items:center;

justify-content:center;

border-radius:14px;

background:linear-gradient(135deg,var(--primary),var(--primary-light));

color:#fff;

font-weight:700;

}

.btn-view:hover{

transform:translateY(-3px);

}

.btn-whatsapp{

width:48px;

height:48px;

display:flex;

align-items:center;

justify-content:center;

border-radius:14px;

background:#22C55E;

color:#fff;

font-size:22px;

}


/* ==========================================================
   OFFER CARDS
========================================================== */

.offer-grid{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(320px,1fr));

gap:30px;

}

.offer-card{

background:#fff;

overflow:hidden;

border-radius:26px;

box-shadow:var(--shadow);

transition:.35s;

}

.offer-card:hover{

transform:translateY(-10px);

}

.offer-card img{

width:100%;

height:230px;

object-fit:cover;

}

.offer-content{

padding:24px;

}

.offer-title{

font-size:22px;

font-weight:800;

margin-bottom:12px;

}

.offer-content p{

color:var(--text-light);

line-height:1.8;

margin-bottom:20px;

}

.offer-date{

font-size:15px;

color:var(--primary);

font-weight:700;

}


/* ==========================================================
   BADGES
========================================================== */

.badge{

display:inline-flex;

align-items:center;

justify-content:center;

padding:8px 16px;

border-radius:999px;

font-size:13px;

font-weight:700;

}

.bg-success{

background:#22C55E;

color:#fff;

}

.bg-danger{

background:#EF4444;

color:#fff;

}


/* ==========================================================
   FOOTER
========================================================== */

.footer{

margin-top:100px;

background:linear-gradient(135deg,#5B35E6,#7D57FF);

color:#fff;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:50px;

padding:70px 0;

}

.footer h4{

font-size:22px;

margin-bottom:22px;

}

.footer ul li{

margin-bottom:14px;

}

.footer ul a{

opacity:.9;

}

.footer ul a:hover{

opacity:1;

padding-right:8px;

}

.footer-about{

line-height:2;

opacity:.9;

margin:20px 0;

}

.social-icons{

display:flex;

gap:12px;

margin-top:25px;

}

.social-icons a{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:rgba(255,255,255,.12);

font-size:20px;

}

.social-icons a:hover{

background:#fff;

color:var(--primary);

}

.newsletter{

padding:40px 0;

background:rgba(255,255,255,.08);

}

.newsletter-box{

display:flex;

align-items:center;

justify-content:space-between;

gap:30px;

}

.newsletter form{

display:flex;

gap:12px;

}

.newsletter input{

height:54px;

width:320px;

border:none;

border-radius:14px;

padding:0 18px;

}

.newsletter button{

height:54px;

padding:0 28px;

border:none;

border-radius:14px;

background:#fff;

color:var(--primary);

font-weight:700;

cursor:pointer;

}

.footer-bottom{

border-top:1px solid rgba(255,255,255,.15);

padding:22px 0;

}

.footer-bottom-content{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

}

.footer-links{

display:flex;

gap:25px;

}


/* ==========================================================
   MOBILE BOTTOM NAV
========================================================== */

.bottom-nav{

display:none;

position:fixed;

bottom:0;

right:0;

left:0;

background:#fff;

height:72px;

box-shadow:0 -10px 30px rgba(0,0,0,.08);

z-index:9999;

justify-content:space-around;

align-items:center;

}

.bottom-nav a{

display:flex;

flex-direction:column;

align-items:center;

gap:5px;

font-size:13px;

font-weight:700;

color:#666;

}

.bottom-nav a i{

font-size:20px;

}

.bottom-nav a.active{

color:var(--primary);

}
/* ==========================================================
   MOBILE MENU
========================================================== */

.mobile-menu{

position:fixed;

top:0;

right:-100%;

width:320px;

max-width:90%;

height:100vh;

background:#fff;

z-index:10001;

transition:.35s;

padding:25px;

box-shadow:-20px 0 60px rgba(0,0,0,.15);

overflow-y:auto;

}

.mobile-menu.active{

right:0;

}

.mobile-menu-overlay{

position:fixed;

inset:0;

background:rgba(0,0,0,.45);

opacity:0;

visibility:hidden;

transition:.3s;

z-index:10000;

}

.mobile-menu-overlay.active{

opacity:1;

visibility:visible;

}

.mobile-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

padding-bottom:20px;

border-bottom:1px solid var(--border);

}

.mobile-logo{

display:flex;

align-items:center;

gap:12px;

font-size:24px;

font-weight:800;

color:var(--primary);

}

.mobile-header button{

background:none;

border:none;

font-size:28px;

cursor:pointer;

}

.mobile-menu nav{

display:flex;

flex-direction:column;

gap:12px;

}

.mobile-menu nav a{

display:flex;

align-items:center;

gap:14px;

padding:15px 18px;

border-radius:14px;

font-weight:700;

transition:.3s;

}

.mobile-menu nav a:hover{

background:var(--accent);

color:var(--primary);

}

.mobile-buttons{

margin-top:30px;

display:grid;

gap:15px;

}


/* ==========================================================
   PAGE LOADER
========================================================== */

#page-loader{

position:fixed;

inset:0;

background:#fff;

display:flex;

align-items:center;

justify-content:center;

z-index:99999;

transition:.4s;

}

#page-loader.hide{

opacity:0;

visibility:hidden;

}

.loader{

width:65px;

height:65px;

border:5px solid #ECEAF5;

border-top:5px solid var(--primary);

border-radius:50%;

animation:loaderSpin .8s linear infinite;

}

@keyframes loaderSpin{

100%{

transform:rotate(360deg);

}

}


/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#F4F4F4;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:100px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--primary-dark);

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:1200px){

.search-box{

grid-template-columns:1fr 1fr;

}

.stats{

grid-template-columns:repeat(2,1fr);

}

.footer-grid{

grid-template-columns:repeat(2,1fr);

}

}


@media(max-width:992px){

.nav-menu{

display:none;

}

.navbar-actions{

display:none;

}

.mobile-toggle{

display:block;

}

.hero{

padding-top:150px;

}

.hero h1{

font-size:44px;

}

.hero p{

font-size:18px;

}

.search-box{

grid-template-columns:1fr;

}

.grid-4{

grid-template-columns:repeat(2,1fr);

}

}


@media(max-width:768px){

section{

padding:60px 0;

}

.hero{

padding-top:130px;

padding-bottom:70px;

}

.hero h1{

font-size:34px;

line-height:1.5;

}

.hero p{

font-size:16px;

}

.stats{

grid-template-columns:1fr;

}

.category-grid{

grid-template-columns:repeat(2,1fr);

}

.store-grid{

grid-template-columns:1fr;

}

.offer-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.newsletter-box{

flex-direction:column;

}

.newsletter form{

flex-direction:column;

width:100%;

}

.newsletter input{

width:100%;

}

.footer-bottom-content{

flex-direction:column;

text-align:center;

}

.bottom-nav{

display:flex;

}

body{

padding-bottom:80px;

}

}


@media(max-width:480px){

.container{

width:94%;

}

.hero h1{

font-size:28px;

}

.section-title h2{

font-size:28px;

}

.category-card{

padding:20px;

}

.category-card h4{

font-size:18px;

}

.store-body{

padding:65px 18px 18px;

}

.store-name{

font-size:20px;

}

.stat-card{

padding:25px;

}

}
/* ========================= HERO ========================= */

.hero{

position:relative;

padding:170px 0 100px;

background:linear-gradient(135deg,#5B3DF5,#7B5BFF);

overflow:hidden;

}

.hero-overlay{

position:absolute;

inset:0;

background:
radial-gradient(circle at top right,
rgba(255,255,255,.18),
transparent 40%),
radial-gradient(circle at bottom left,
rgba(255,255,255,.12),
transparent 40%);

}

.hero .container{

position:relative;

z-index:2;

}

.hero-content{

max-width:760px;

margin:auto;

text-align:center;

color:#fff;

}

.hero-badge{

display:inline-flex;

gap:8px;

align-items:center;

padding:10px 18px;

border-radius:50px;

background:rgba(255,255,255,.15);

backdrop-filter:blur(12px);

margin-bottom:25px;

}

.hero h1{

font-size:56px;

font-weight:800;

line-height:1.3;

margin-bottom:25px;

}

.hero h1 span{

color:#FFD54F;

}

.hero p{

font-size:20px;

opacity:.95;

margin-bottom:45px;

}

.hero-search{

background:#fff;

border-radius:24px;

padding:18px;

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr auto;

gap:15px;

box-shadow:0 25px 60px rgba(0,0,0,.18);

}

.search-item{

display:flex;

align-items:center;

gap:10px;

height:60px;

padding:0 18px;

border:1px solid #ECECEC;

border-radius:16px;

}

.search-item input,
.search-item select{

border:none;

width:100%;

background:none;

outline:none;

font-size:15px;

}

.hero-search-btn{

height:60px;

padding:0 30px;

border:none;

border-radius:16px;

background:#6E44FF;

color:#fff;

font-weight:700;

cursor:pointer;

transition:.3s;

}

.hero-search-btn:hover{

transform:translateY(-2px);

}

.hero-stats{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

margin-top:60px;

}

.hero-stats div{

background:rgba(255,255,255,.12);

backdrop-filter:blur(12px);

padding:25px;

border-radius:20px;

text-align:center;

color:#fff;

}

.hero-stats strong{

display:block;

font-size:34px;

margin-bottom:8px;

}

.hero-stats span{

opacity:.9;

}
/*==========================================================
HOME CATEGORIES
==========================================================*/

.categories-section{

padding:90px 0;

background:#ffffff;

}

.section-header{

display:flex;

justify-content:space-between;

align-items:end;

margin-bottom:50px;

gap:30px;

}

.section-badge{

display:inline-block;

padding:8px 18px;

border-radius:50px;

background:#F3EEFF;

color:var(--primary);

font-weight:700;

margin-bottom:15px;

}

.section-header h2{

font-size:40px;

font-weight:800;

margin-bottom:12px;

}

.section-header p{

color:#777;

font-size:17px;

}

.categories-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(210px,1fr));

gap:25px;

}

.category-card{

background:#fff;

border-radius:24px;

padding:35px 25px;

text-align:center;

transition:.35s;

border:1px solid #EFEFEF;

box-shadow:0 8px 25px rgba(0,0,0,.04);

position:relative;

overflow:hidden;

}

.category-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:linear-gradient(90deg,#6E44FF,#8E6BFF);

transform:scaleX(0);

transition:.35s;

}

.category-card:hover::before{

transform:scaleX(1);

}

.category-card:hover{

transform:translateY(-8px);

box-shadow:0 18px 45px rgba(110,68,255,.18);

}

.category-icon{

width:90px;

height:90px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#F5F2FF;

color:var(--primary);

font-size:38px;

margin-bottom:25px;

transition:.35s;

}

.category-card:hover .category-icon{

background:var(--primary);

color:#fff;

transform:rotate(-8deg) scale(1.05);

}

.category-card h3{

font-size:22px;

font-weight:800;

margin-bottom:10px;

color:#222;

}

.category-card span{

font-size:15px;

color:#888;

}
/*==================================================
FEATURED STORES
==================================================*/

.featured-section{

padding:100px 0;

background:#faf9ff;

}

.featuredSwiper{

padding:15px 5px 60px;

}

.featuredSwiper .swiper-slide{

height:auto;

}

.store-card{

background:#fff;

border-radius:24px;

overflow:hidden;

border:1px solid #ededed;

transition:.35s;

box-shadow:0 8px 25px rgba(0,0,0,.05);

height:100%;

display:flex;

flex-direction:column;

}

.store-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 50px rgba(110,68,255,.18);

}

.store-cover{

height:180px;

position:relative;

overflow:hidden;

}

.store-cover img{

width:100%;

height:100%;

object-fit:cover;

transition:.4s;

}

.store-card:hover .store-cover img{

transform:scale(1.08);

}

.store-status{

position:absolute;

top:15px;

right:15px;

padding:6px 14px;

border-radius:50px;

font-size:13px;

font-weight:700;

color:#fff;

}

.store-status.open{

background:#28c76f;

}

.store-status.closed{

background:#ea5455;

}

.store-badge{

position:absolute;

left:15px;

top:15px;

background:#ffb800;

color:#222;

padding:6px 14px;

border-radius:50px;

font-size:13px;

font-weight:700;

}

.store-body{

padding:20px;

display:flex;

flex-direction:column;

height:100%;

}

.store-logo{

width:75px;

height:75px;

border-radius:18px;

overflow:hidden;

margin-top:-55px;

background:#fff;

padding:5px;

border:4px solid #fff;

box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.store-logo img{

width:100%;

height:100%;

object-fit:cover;

}

.store-name{

font-size:22px;

font-weight:800;

margin:18px 0 10px;

}

.store-category{

color:#777;

margin-bottom:12px;

}

.store-rating{

display:flex;

align-items:center;

gap:8px;

color:#f8b400;

margin-bottom:18px;

}

.store-description{

color:#666;

line-height:1.8;

margin-bottom:20px;

min-height:60px;

}

.store-meta{

display:flex;

gap:12px;

flex-wrap:wrap;

margin-bottom:22px;

font-size:14px;

color:#777;

}

.store-footer{

display:flex;

gap:10px;

margin-top:auto;

}

.store-footer .btn{

flex:1;

}
/*==========================================================
OFFERS
==========================================================*/

.offers-section{

padding:100px 0;

background:#ffffff;

}

.offersSwiper{

padding-bottom:55px;

}

.offer-card{

background:#fff;

border-radius:24px;

overflow:hidden;

border:1px solid #ececec;

transition:.35s;

box-shadow:0 10px 30px rgba(0,0,0,.05);

height:100%;

}

.offer-card:hover{

transform:translateY(-8px);

box-shadow:0 18px 45px rgba(110,68,255,.15);

}

.offer-image{

height:220px;

position:relative;

overflow:hidden;

}

.offer-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.4s;

}

.offer-card:hover .offer-image img{

transform:scale(1.08);

}

.offer-badge{

position:absolute;

top:18px;

left:18px;

background:#ff3b30;

color:#fff;

padding:8px 16px;

border-radius:50px;

font-size:13px;

font-weight:700;

}

.offer-content{

padding:22px;

}

.offer-store{

display:flex;

align-items:center;

gap:12px;

margin-bottom:18px;

}

.offer-store img{

width:46px;

height:46px;

border-radius:12px;

object-fit:cover;

}

.offer-store span{

font-weight:700;

}

.offer-content h3{

font-size:22px;

margin-bottom:12px;

font-weight:800;

}

.offer-content p{

color:#666;

line-height:1.8;

margin-bottom:18px;

min-height:70px;

}

.offer-date{

display:flex;

align-items:center;

gap:8px;

color:#8b8b8b;

margin-bottom:20px;

font-size:14px;

}
/*==========================================================
WHY HAYNA
==========================================================*/

.why-section{

padding:100px 0;

background:#faf9ff;

}

.section-header.center{

text-align:center;

max-width:700px;

margin:0 auto 60px;

}

.why-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:28px;

}

.why-card{

background:#fff;

border-radius:24px;

padding:35px;

border:1px solid #ededed;

transition:.35s;

text-align:center;

box-shadow:0 8px 25px rgba(0,0,0,.05);

}

.why-card:hover{

transform:translateY(-8px);

box-shadow:0 18px 45px rgba(110,68,255,.18);

}

.why-icon{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,#6E44FF,#8F67FF);

color:#fff;

font-size:34px;

margin-bottom:25px;

}

.why-card h3{

font-size:22px;

font-weight:800;

margin-bottom:15px;

}

.why-card p{

line-height:1.9;

color:#666;

font-size:15px;

}
/*==================================================
REGISTER CTA
==================================================*/

.register-section{

padding:100px 0;

background:#fff;

}

.register-box{

background:linear-gradient(135deg,#5B3DF5,#7B5BFF);

border-radius:35px;

padding:70px;

display:grid;

grid-template-columns:1.2fr 1fr;

gap:60px;

align-items:center;

overflow:hidden;

position:relative;

}

.register-box::before{

content:"";

position:absolute;

width:450px;

height:450px;

background:rgba(255,255,255,.08);

border-radius:50%;

top:-200px;

left:-120px;

}

.register-content{

position:relative;

z-index:2;

color:#fff;

}

.section-badge.light{

background:rgba(255,255,255,.15);

color:#fff;

}

.register-content h2{

font-size:46px;

font-weight:800;

margin:20px 0;

line-height:1.3;

}

.register-content p{

font-size:18px;

line-height:2;

opacity:.92;

max-width:620px;

margin-bottom:35px;

}

.register-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.btn-white{

background:#fff;

color:#5B3DF5;

padding:16px 30px;

border-radius:16px;

font-weight:700;

transition:.3s;

}

.btn-white:hover{

transform:translateY(-3px);

}

.btn-outline-light{

border:2px solid rgba(255,255,255,.35);

color:#fff;

padding:16px 30px;

border-radius:16px;

transition:.3s;

}

.btn-outline-light:hover{

background:rgba(255,255,255,.12);

}

.register-image{

position:relative;

height:350px;

}

.floating-card{

position:absolute;

background:#fff;

padding:18px 24px;

border-radius:18px;

box-shadow:0 15px 40px rgba(0,0,0,.15);

display:flex;

align-items:center;

gap:12px;

font-weight:700;

color:#333;

animation:floatCard 4s ease-in-out infinite;

}

.floating-card i{

color:#6E44FF;

font-size:22px;

}

.card-1{

top:30px;

right:30px;

}

.card-2{

bottom:120px;

left:20px;

animation-delay:1s;

}

.card-3{

bottom:20px;

right:80px;

animation-delay:2s;

}

@keyframes floatCard{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}
/*==================================================
FAQ
==================================================*/

.faq-section{

padding:100px 0;

background:#faf9ff;

}

.faq-wrapper{

max-width:900px;

margin:auto;

}

.faq-item{

background:#fff;

border-radius:18px;

margin-bottom:18px;

overflow:hidden;

border:1px solid #ececec;

box-shadow:0 8px 25px rgba(0,0,0,.04);

}

.faq-question{

width:100%;

padding:24px 30px;

display:flex;

justify-content:space-between;

align-items:center;

border:none;

background:none;

cursor:pointer;

font-size:18px;

font-weight:700;

}

.faq-question i{

transition:.3s;

color:var(--primary);

}

.faq-item.active i{

transform:rotate(45deg);

}

.faq-answer{

max-height:0;

overflow:hidden;

transition:.35s;

}

.faq-answer p{

padding:0 30px 25px;

line-height:2;

color:#666;

}
/*==================================================
SEARCH SIDEBAR
==================================================*/

.search-layout{

display:grid;

grid-template-columns:320px 1fr;

gap:30px;

padding:50px 0;

}

.search-sidebar{

position:sticky;

top:100px;

height:max-content;

}

.filter-card{

background:#fff;

border-radius:24px;

padding:28px;

border:1px solid #ececec;

box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.filter-card h3{

font-size:22px;

margin-bottom:30px;

display:flex;

gap:10px;

align-items:center;

}

.form-group{

margin-bottom:22px;

}

.form-group label{

display:block;

margin-bottom:10px;

font-weight:700;

}

.input-icon{

display:flex;

align-items:center;

gap:12px;

padding:0 16px;

border:1px solid #ddd;

border-radius:14px;

height:54px;

}

.input-icon input{

border:none;

outline:none;

width:100%;

background:none;

}

.form-group select{

width:100%;

height:54px;

border:1px solid #ddd;

border-radius:14px;

padding:0 14px;

background:#fff;

}

.form-switch{

margin-bottom:18px;

}

.form-switch label{

display:flex;

align-items:center;

gap:12px;

cursor:pointer;

}