/*==================================================
BIZMA LANDING PAGE
==================================================*/

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

html{
scroll-behavior:smooth;
}

body{

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

background:#082B6B;

color:#ffffff;

overflow-x:hidden;

position:relative;

min-height:100vh;

}

/*==================================================
BACKGROUND
==================================================*/

.background-animation{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

overflow:hidden;

z-index:-10;

background:
linear-gradient(135deg,#082B6B 0%,#0A347F 50%,#103E93 100%);

}

.background-animation::before{

content:"";

position:absolute;

width:520px;

height:520px;

background:#FF6600;

border-radius:50%;

filter:blur(120px);

opacity:.18;

left:-180px;

top:-150px;

animation:blobOne 15s infinite ease-in-out;

}

.background-animation::after{

content:"";

position:absolute;

width:480px;

height:480px;

background:#FFE84D;

border-radius:50%;

filter:blur(130px);

opacity:.18;

right:-180px;

bottom:-150px;

animation:blobTwo 18s infinite ease-in-out;

}

@keyframes blobOne{

0%{
transform:translate(0,0);
}

50%{
transform:translate(90px,60px);
}

100%{
transform:translate(0,0);
}

}

@keyframes blobTwo{

0%{
transform:translate(0,0);
}

50%{
transform:translate(-80px,-70px);
}

100%{
transform:translate(0,0);
}

}

/*==================================================
TOP BAR
==================================================*/

.top-bar{

padding:18px 0;

position:relative;

z-index:100;

}

.top-bar-inner{

display:flex;

justify-content:space-between;

align-items:center;

gap:15px;

flex-wrap:wrap;

}

#liveLocation{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 18px;

border-radius:50px;

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

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

backdrop-filter:blur(16px);

font-weight:600;

font-size:15px;

}

#liveLocation i{

color:#FFD93D;

font-size:18px;

}

.top-tagline{

background:#FF6600;

padding:12px 20px;

border-radius:40px;

font-weight:700;

color:#fff;

box-shadow:0 10px 25px rgba(255,102,0,.35);

}

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

.hero{

padding:45px 0 70px;

text-align:center;

}

.hero-logo img{

width:190px;

max-width:90%;

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

filter:drop-shadow(0 0 25px rgba(255,255,255,.35));

}

@keyframes logoFloat{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-12px);
}

100%{
transform:translateY(0);
}

}

.hero h1{

margin-top:25px;

font-size:54px;

font-weight:800;

color:#ffffff;

}

.hero p{

margin-top:15px;

font-size:20px;

color:#E8E8E8;

max-width:760px;

margin-left:auto;

margin-right:auto;

line-height:1.8;

}

.hero-cards{

margin-top:60px;

display:grid;

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

gap:35px;

}

/*==================================================
CUSTOMER & VENDOR CARD
==================================================*/

.portal-card{

position:relative;

overflow:hidden;

padding:40px;

border-radius:28px;

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

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

backdrop-filter:blur(20px);

transition:.35s;

}

.portal-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 45px rgba(0,0,0,.30);

}

.portal-icon{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,#FF6600,#FFD93D);

font-size:38px;

color:#fff;

margin-bottom:25px;

box-shadow:0 12px 30px rgba(255,102,0,.35);

}

.portal-card h2{

font-size:32px;

font-weight:700;

margin-bottom:15px;

}

.portal-card p{

font-size:16px;

line-height:1.8;

color:#F3F3F3;

margin-bottom:25px;

}

.portal-btn{

display:block;

width:100%;

padding:16px;

border:none;

border-radius:50px;

font-size:17px;

font-weight:700;

text-decoration:none;

text-align:center;

transition:.30s;

cursor:pointer;

}

.customer-btn{

background:#FFD93D;

color:#082B6B;

}

.vendor-btn{

background:#FF6600;

color:#FFFFFF;

}

.portal-btn:hover{

transform:scale(1.03);

}

/* Continue in Part 4 */

/*==================================================
FEATURED SHOPS
==================================================*/

.featured-section{

padding:80px 0;

position:relative;

}

.section-title{

text-align:center;

margin-bottom:50px;

}

.section-title h2{

font-size:42px;

font-weight:800;

color:#ffffff;

margin-bottom:15px;

}

.section-title p{

font-size:18px;

color:#dddddd;

max-width:650px;

margin:auto;

line-height:1.8;

}

/*==================================================
SWIPER
==================================================*/

.swiper{

width:100%;

padding-bottom:30px;

}

.swiper-slide{

height:auto;

display:flex;

justify-content:center;

}

/*==================================================
ADVERTISEMENT CARD
==================================================*/

.ad-card{

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

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

backdrop-filter:blur(20px);

border-radius:25px;

overflow:hidden;

transition:.35s;

height:100%;

}

.ad-card:hover{

transform:translateY(-10px);

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

}

.ad-image{

position:relative;

height:340px;

overflow:hidden;

}

.ad-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

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

transform:scale(1.08);

}

.offer-badge{

position:absolute;

top:15px;

left:15px;

background:#FF6600;

color:#fff;

padding:8px 14px;

border-radius:30px;

font-size:13px;

font-weight:700;

box-shadow:0 8px 20px rgba(255,102,0,.30);

}

.ad-content{

padding:22px;

}

.business-name{

font-size:22px;

font-weight:700;

margin-bottom:10px;

color:#fff;

}

.offer-title{

font-size:15px;

line-height:1.7;

color:#e9e9e9;

margin-bottom:18px;

min-height:55px;

}

.business-location{

display:flex;

align-items:center;

gap:8px;

font-size:14px;

color:#FFD93D;

margin-bottom:20px;

}

.business-location i{

font-size:15px;

}

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

.action-buttons{

display:grid;

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

gap:10px;

}

.action-buttons a{

display:flex;

justify-content:center;

align-items:center;

gap:6px;

padding:12px;

border-radius:12px;

font-size:14px;

font-weight:600;

text-decoration:none;

transition:.30s;

}

.btn-whatsapp{

background:#25D366;

color:#fff;

}

.btn-map{

background:#1A73E8;

color:#fff;

}

.btn-view{

background:#FF6600;

color:#fff;

}

.action-buttons a:hover{

transform:translateY(-3px);

filter:brightness(1.08);

}

/*==================================================
LOADING
==================================================*/

.loading-box{

text-align:center;

padding:70px 20px;

}

.loading-box .spinner-border{

width:55px;

height:55px;

color:#FFD93D;

}

.loading-box p{

margin-top:20px;

font-size:18px;

color:#fff;

}

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

.features-section{

padding:90px 0;

}

.features-grid{

display:grid;

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

gap:25px;

}

.feature-box{

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

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

backdrop-filter:blur(18px);

padding:35px 25px;

border-radius:25px;

text-align:center;

transition:.35s;

}

.feature-box:hover{

transform:translateY(-8px);

box-shadow:0 18px 35px rgba(0,0,0,.30);

}

.feature-box i{

font-size:45px;

color:#FFD93D;

margin-bottom:18px;

}

.feature-box h4{

font-size:22px;

font-weight:700;

margin-bottom:10px;

}

.feature-box p{

font-size:15px;

color:#e8e8e8;

line-height:1.8;

}

/* Continue in Part 5 */

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

.stats-section{

padding:90px 0;

position:relative;

}

.stats-grid{

display:grid;

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

gap:25px;

}

.stat-card{

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

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

backdrop-filter:blur(18px);

padding:35px 20px;

border-radius:25px;

text-align:center;

transition:.35s;

}

.stat-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 35px rgba(0,0,0,.30);

}

.stat-card i{

font-size:42px;

color:#FFD93D;

margin-bottom:18px;

}

.stat-number{

font-size:42px;

font-weight:800;

color:#ffffff;

margin-bottom:8px;

}

.stat-title{

font-size:16px;

color:#e8e8e8;

font-weight:500;

}

/*==================================================
COMING SOON MODAL
==================================================*/

.modal-content{

background:#0B347B;

border:none;

border-radius:25px;

color:#fff;

overflow:hidden;

}

.modal-header{

border-bottom:1px solid rgba(255,255,255,.10);

padding:20px 25px;

}

.modal-title{

font-weight:700;

font-size:24px;

}

.modal-body{

padding:40px 30px;

text-align:center;

}

.modal-body i{

font-size:65px;

color:#FFD93D;

margin-bottom:25px;

animation:pulseIcon 2s infinite;

}

@keyframes pulseIcon{

0%{

transform:scale(1);

}

50%{

transform:scale(1.12);

}

100%{

transform:scale(1);

}

}

.modal-body h3{

font-size:34px;

font-weight:800;

margin-bottom:15px;

}

.modal-body p{

font-size:17px;

line-height:1.8;

color:#e8e8e8;

}

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

.footer{

padding:60px 0 25px;

margin-top:80px;

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

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

}

.footer-logo{

height:55px;

margin-bottom:20px;

}

.footer h4{

font-size:28px;

font-weight:700;

margin-bottom:15px;

}

.footer p{

color:#dddddd;

line-height:1.8;

}

.footer-links{

display:flex;

gap:18px;

flex-wrap:wrap;

margin-top:18px;

}

.footer-links a{

color:#FFD93D;

text-decoration:none;

font-weight:600;

}

.footer-links a:hover{

color:#FF6600;

}

.copyright{

margin-top:40px;

padding-top:20px;

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

text-align:center;

font-size:15px;

color:#cccccc;

}

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

@media(max-width:1199px){

.hero-cards{

grid-template-columns:1fr;

}

.features-grid{

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

}

.stats-grid{

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

}

}

@media(max-width:768px){

.hero h1{

font-size:38px;

}

.hero p{

font-size:17px;

}

.section-title h2{

font-size:30px;

}

.top-bar-inner{

flex-direction:column;

align-items:flex-start;

}

.action-buttons{

grid-template-columns:1fr;

}

.features-grid{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:1fr;

}

.portal-card{

padding:30px 22px;

}

.ad-image{

height:280px;

}

}

@media(max-width:576px){

.hero-logo img{

width:140px;

}

.portal-icon{

width:75px;

height:75px;

font-size:30px;

}

.business-name{

font-size:20px;

}

.stat-number{

font-size:34px;

}

.modal-body{

padding:30px 20px;

}


/*=========================================
VENDOR CARD
=========================================*/

.vendor-card{

position:relative;

overflow:hidden;

}

.vendor-card::before{

content:"";

position:absolute;

width:220px;

height:220px;

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

border-radius:50%;

left:-70px;

top:-70px;

}

.vendor-icon{

background:linear-gradient(135deg,#FF6600,#FFD93D);

}

.vendor-badge{

position:absolute;

top:18px;

right:18px;

background:#FFD93D;

color:#082B6B;

padding:8px 15px;

border-radius:30px;

font-size:13px;

font-weight:700;

animation:badgePulse 2s infinite;

}

@keyframes badgePulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}

.vendor-btn{

background:linear-gradient(135deg,#FF6600,#FF8C00);

color:#ffffff;

box-shadow:0 15px 35px rgba(255,102,0,.35);

}

.vendor-btn:hover{

color:#ffffff;

transform:translateY(-3px);

box-shadow:0 20px 40px rgba(255,102,0,.45);

}


/*=========================================
COMING SOON MODAL
=========================================*/

.coming-modal{

background:rgba(8,43,107,.96);

border-radius:28px;

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

backdrop-filter:blur(20px);

overflow:hidden;

color:#fff;

}

.coming-animation{

position:relative;

width:150px;

height:150px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

}

.coming-animation i{

font-size:58px;

color:#FFD93D;

z-index:2;

}

.pulse-circle{

position:absolute;

width:90px;

height:90px;

border-radius:50%;

background:#FF6600;

opacity:.30;

animation:pulseRing 2s infinite;

}

.pulse-circle.delay{

animation-delay:1s;

}

@keyframes pulseRing{

0%{

transform:scale(.7);

opacity:.6;

}

100%{

transform:scale(2.2);

opacity:0;

}

}

.countdown-box{

margin-top:25px;

display:inline-block;

padding:12px 22px;

border-radius:40px;

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

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

font-weight:700;

}

#modalCounter{

color:#FFD93D;

font-size:22px;

margin:0 5px;

}


/*=========================================
SWIPER
=========================================*/

.bizmaSwiper{

padding:10px 5px 60px;

}

.swiper-button-next,
.swiper-button-prev{

color:#FFD93D;

}

.swiper-pagination-bullet{

background:#ffffff;

opacity:.5;

}

.swiper-pagination-bullet-active{

background:#FF6600;

opacity:1;

}

.loading-box{

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

border-radius:25px;

padding:60px 20px;

text-align:center;

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

}

.loading-box p{

color:#ffffff;

font-size:17px;

margin-bottom:0;

}


}

/*=============================
END OF STYLE.CSS
=============================*/