@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: "Inter", sans-serif !important;
}

body{
    background:#f5f8ff;
}

/*=========================================
          SECTION BACKGROUND
=========================================*/
.product-category-section{

    --bg1:#eef4ff;
    --bg2:#f8fbff;
    --bg3:#ffffff;

    background:linear-gradient(135deg,var(--bg1),var(--bg2),var(--bg3));

    transition:1.5s ease;
}
.product-category-section{
    position:relative;
    overflow:hidden;
    min-height:100vh;
    padding:20px 0 180px;
}
.product-category-section::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    top:-220px;
    left:-180px;
    background:#4f7dff;
    filter:blur(120px);
    opacity:.18;
	animation:blobOne 30s ease-in-out infinite alternate;
}

.product-category-section::after{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    border-radius:50%;
    right:-180px;
    bottom:-180px;
    background:#b14dff;
    filter:blur(120px);
    opacity:.16;
    animation:blobTwo 35s ease-in-out infinite alternate;
}

@keyframes blobOne{

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

    50%{
        transform:translate(20px,15px) scale(1.03);
    }

    100%{
        transform:translate(40px,25px) scale(1.08);
    }

}

@keyframes blobTwo{

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

    50%{
        transform:translate(-15px,-10px) scale(1.02);
    }

    100%{
        transform:translate(-35px,-20px) scale(1.06);
    }

}
.product-category-section .container{
    position:relative;
    z-index:5;
}

/*=========================================
              CARD BASE
=========================================*/

.category-card{
    position:relative;
    overflow:hidden;
    background:#fff;
    border-radius: 90%;
    padding:28px 20px;
    text-align:center;
    cursor:pointer;
    transition:.45s ease;
    border:1px solid #edf1f7;
    box-shadow:
    0 12px 35px rgba(0,0,0,.06);
    z-index:2;
	height: 250px !important;
	width: 250px !important;
}
@media (min-width:768px){
	.mb-minus-100 {
		margin-top: -80px;
	}
}
/* Floating */

.category-card{

    animation:floating 5s ease-in-out infinite;

}

.category-card:nth-child(even){

    animation-delay:.4s;

}

/*=========================================
         HALF CIRCLE DESIGN
=========================================*/

.category-card::before{
	content:"";
	position:absolute;
	width:170px;
	height:170px;
	border-radius:50%;
	top:-90px;
	right:-70px;
	opacity:.12;
	transition:.45s;
	z-index:-1;
}

.category-card::after{
	content:"";
	position:absolute;
	width:90px;
	height:90px;
	border-radius:50%;
	left:-35px;
	bottom:-35px;
	opacity:.08;
	transition:.45s;
	z-index:-1;

}

/*=========================================
             ICON DESIGN
=========================================*/

.icon-box{
	width:72px;
	height:72px;
	margin:auto;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:90px;
	font-size:30px;
	margin-bottom:18px;
	margin-top: 10px;
	transition:.4s;
}

.icon-box i{

transition:.4s;

}

/*=========================================
              CARD TEXT
=========================================*/

.category-card h4{
	font-size:18px;
	font-weight:600;
	color:#1e293b;
	margin-bottom:4px;
	transition:.35s;
}

.category-card span{

font-size:13px;

color:#64748b;

transition:.35s;

}
/*=========================================
          WOMEN ENTREPRENEUR
=========================================*/

.womenep::before{background:#f9a8d4;}
.womenep::after{background:#f472b6;}

.womenep .icon-box{
    background:#fdf2f8;
    color:#ec4899;
}

.womenep:hover{
    background:linear-gradient(135deg,#9d174d,#ec4899,#f472b6);
    border-color:transparent;
    box-shadow:0 20px 50px rgba(236,72,153,.35);
}

.womenep:hover h4,
.womenep:hover span{
    color:#fff;
}

.womenep:hover .icon-box{
    background:#fff;
    color:#ec4899;
}

/*=========================================
            FASHION
=========================================*/

.fashion::before{background:#9333ea;}
.fashion::after{background:#d8b4fe;}

.fashion .icon-box{
    background:#f6ebff;
    color:#9333ea;
}

.fashion:hover{
    background:linear-gradient(135deg,#5b21b6,#9333ea);
    border-color:transparent;
    box-shadow:0 20px 50px rgba(147,51,234,.35);
}

.fashion:hover h4,
.fashion:hover span{
    color:#fff;
}

.fashion:hover .icon-box{
    background:#fff;
    color:#9333ea;
}

/*=========================================
              FOOD
=========================================*/

.food::before{background:#ff9800;}
.food::after{background:#ffd580;}

.food .icon-box{
    background:#fff4e3;
    color:#ff9800;
}

.food:hover{
    background:linear-gradient(135deg,#d97706,#ff9800);
    border-color:transparent;
    box-shadow:0 20px 50px rgba(255,152,0,.35);
}

.food:hover h4,
.food:hover span{
    color:#fff;
}

.food:hover .icon-box{
    background:#fff;
    color:#ff9800;
}

/*=========================================
           AUTOMOBILE
=========================================*/

.auto::before{background:#ef4444;}
.auto::after{background:#fca5a5;}

.auto .icon-box{
    background:#fff0f0;
    color:#ef4444;
}

.auto:hover{
    background:linear-gradient(135deg,#b91c1c,#ef4444);
    border-color:transparent;
    box-shadow:0 20px 50px rgba(239,68,68,.35);
}

.auto:hover h4,
.auto:hover span{
    color:#fff;
}

.auto:hover .icon-box{
    background:#fff;
    color:#ef4444;
}

/*=========================================
            MEDICAL
=========================================*/

.medical::before{background:#16a34a;}
.medical::after{background:#86efac;}

.medical .icon-box{
    background:#eafff1;
    color:#16a34a;
}

.medical:hover{
    background:linear-gradient(135deg,#166534,#16a34a);
    border-color:transparent;
    box-shadow:0 20px 50px rgba(22,163,74,.35);
}

.medical:hover h4,
.medical:hover span{
    color:#fff;
}

.medical:hover .icon-box{
    background:#fff;
    color:#16a34a;
}

/*=========================================
            FURNITURE
=========================================*/

.furniture::before{background:#8b5e34;}
.furniture::after{background:#d6b48a;}

.furniture .icon-box{
    background:#faf2ea;
    color:#8b5e34;
}

.furniture:hover{
    background:linear-gradient(135deg,#5b3a1f,#8b5e34);
    border-color:transparent;
    box-shadow:0 20px 50px rgba(139,94,52,.35);
}

.furniture:hover h4,
.furniture:hover span{
    color:#fff;
}

.furniture:hover .icon-box{
    background:#fff;
    color:#8b5e34;
}

/*=========================================
              MARKET
=========================================*/

.market::before{background:#d946ef;}
.market::after{background:#f0abfc;}

.market .icon-box{
    background:#fae8ff;
    color:#c026d3;
}

.market:hover{
    background:linear-gradient(135deg,#86198f,#d946ef,#a21caf);
    border-color:transparent;
    box-shadow:0 20px 50px rgba(217,70,239,.35);
}

.market:hover h4,
.market:hover span{
    color:#fff;
}

.market:hover .icon-box{
    background:#fff;
    color:#c026d3;
}

/*=========================================
              OTHERS
=========================================*/

.others::before{background:#64748b;}
.others::after{background:#cbd5e1;}

.others .icon-box{
    background:#f3f4f6;
    color:#64748b;
}

.others:hover{
    background:linear-gradient(135deg,#334155,#64748b);
    border-color:transparent;
    box-shadow:0 20px 50px rgba(100,116,139,.35);
}

.others:hover h4,
.others:hover span{
    color:#fff;
}

.others:hover .icon-box{
    background:#fff;
    color:#64748b;
}

/*=========================================
        YOUTH ENTREPRENEUR
=========================================*/

.youth::before{background:#60a5fa;}
.youth::after{background:#2563eb;}

.youth .icon-box{
    background:#eaf3ff;
    color:#2563eb;
}

.youth:hover{
    background:linear-gradient(135deg,#0f3d91,#2563eb,#0b1f4d);
    border-color:transparent;
    box-shadow:0 20px 50px rgba(37,99,235,.35);
}

.youth:hover h4,
.youth:hover span{
    color:#fff;
}

.youth:hover .icon-box{
    background:#fff;
    color:#2563eb;
}


/*=========================================
            E-COMMERCE
=========================================*/

.ecommerce::before{background:#7dd3fc;}
.ecommerce::after{background:#0284c7;}

.ecommerce .icon-box{
    background:#e0f2fe;
    color:#0284c7;
}

.ecommerce:hover{
    background:linear-gradient(135deg,#075985,#0ea5e9,#0369a1);
    border-color:transparent;
    box-shadow:0 20px 50px rgba(14,165,233,.35);
}

.ecommerce:hover h4,
.ecommerce:hover span{
    color:#fff;
}

.ecommerce:hover .icon-box{
    background:#fff;
    color:#0284c7;
}


/*=========================================
        GANGA PLUS EXPRESS
=========================================*/

.ganga::before{background:#34d399;}
.ganga::after{background:#059669;}

.ganga .icon-box{
    background:#ecfdf5;
    color:#059669;
}

.ganga:hover{
    background:linear-gradient(135deg,#065f46,#10b981,#064e3b);
    border-color:transparent;
    box-shadow:0 20px 50px rgba(16,185,129,.35);
}

.ganga:hover h4,
.ganga:hover span{
    color:#fff;
}

.ganga:hover .icon-box{
    background:#fff;
    color:#059669;
}


/*=========================================
                FOOD
=========================================*/

.foodplus::before{background:#fde047;}
.foodplus::after{background:#eab308;}

.foodplus .icon-box{
    background:#fef9c3;
    color:#ca8a04;
}

.foodplus:hover{
    background:linear-gradient(135deg,#a16207,#eab308,#facc15);
    border-color:transparent;
    box-shadow:0 20px 50px rgba(234,179,8,.40);
}

.foodplus:hover h4,
.foodplus:hover span{
    color:#fff;
}

.foodplus:hover .icon-box{
    background:#fff;
    color:#ca8a04;
}
/*=========================================
        PREMIUM HOVER EFFECT
=========================================*/

.category-card:hover{
    transform:translateY(-12px) scale(1.03);
}

.category-card:hover::before{
    transform:scale(1.45) rotate(25deg);
    opacity:.22;
}

.category-card:hover::after{
    transform:scale(1.6);
    opacity:.16;
}

.category-card:hover .icon-box{
    transform:translateY(-6px) rotate(8deg) scale(1.08);
    box-shadow:0 15px 30px rgba(255,255,255,.18);
}

.category-card:hover h4{
    transform:translateY(-2px);
}

.category-card:hover span{
    opacity:.95;
}

/*=========================================
            SHINE EFFECT
=========================================*/

.category-card .shine{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    border-radius:22px;
}

.category-card .shine::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-70%;

    width:60%;

    height:300%;

    background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.45),
    transparent);

    transform:rotate(25deg);

    transition:1s;

}

.category-card:hover .shine::before{

    left:170%;

}

/*=========================================
          FLOAT ANIMATION
=========================================*/

@keyframes floating{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-8px);

}

}

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

@keyframes blobOne{

0%{

transform:translate(0,0) scale(1);

}

100%{

transform:translate(60px,30px) scale(1.15);

}

}

@keyframes blobTwo{

0%{

transform:translate(0,0) scale(1);

}

100%{

transform:translate(-70px,-30px) scale(1.12);

}

}

/*=========================================
        ICON PULSE
=========================================*/

@keyframes pulse{

0%{

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

}

70%{

box-shadow:0 0 0 14px rgba(255,255,255,0);

}

100%{

box-shadow:0 0 0 0 rgba(255,255,255,0);

}

}

.category-card:hover .icon-box{

animation:pulse 1.3s infinite;

}

/*=========================================
       SMOOTH TRANSITIONS
=========================================*/

.category-card,
.category-card::before,
.category-card::after,
.category-card h4,
.category-card span,
.category-card .icon-box{
    transition:all .4s ease;
}

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

@media (max-width:992px){

.page-title{

font-size:34px;

}

.category-card{

padding:24px 16px;

}

.icon-box{

width:64px;
height:64px;
font-size:26px;

}

.category-card h4{

font-size:18px;

}

}

@media (max-width:768px){
	.product-category-section{
		padding:50px 0;
	}
	.page-title{
		font-size:28px;
	}
	.page-subtitle{
		font-size:14px;
	}
	.category-card{
		padding:22px 15px;
		border-radius:18px;
		width: 100% !important;
		margin-bottom: -80px;
	}

.icon-box{

width:58px;
height:58px;
font-size:24px;

margin-bottom:12px;

}

.category-card h4{

font-size:17px;

}

.category-card span{

font-size:12px;

}

}

@media (max-width:576px){

.page-title{

font-size:24px;

}

.category-card{

padding:20px 14px;

}

}
/*==========================
      SECTION HEADING
==========================*/

.section-heading{
    position:relative;
    text-align:center;
    margin-bottom:60px;
}

/* Badge */

.heading-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 18px;

    background:rgba(37,99,235,.08);

    color:#2563eb;

    border:1px solid rgba(37,99,235,.15);

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    margin-bottom:18px;

    backdrop-filter:blur(15px);

}

.heading-badge i{

    font-size:16px;

}

/* Title */

.page-title{
    font-size:28px;
    font-weight:700;
    margin-bottom:15px;
    color:#1e293b;
    letter-spacing:1px;
	font-family: "Lobster", sans-serif !important;
}

/* Gradient Word */

.page-title span{
    background:linear-gradient(90deg,#2563eb,#7c3aed,#ec4899);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* Subtitle */

.page-subtitle{
    max-width:600px;
    margin:auto;
    color:#64748b;
    font-size:12px;
}

/* Animated Line */
.title-line{
    width:120px;
    height:5px;
    margin:30px auto 0;
    border-radius:50px;
    background:linear-gradient(90deg,#2563eb,#7c3aed,#ec4899);
    position:relative;
    overflow:hidden;
}
.title-line::before{
    content:"";
    position:absolute;
    width:45px;
    height:100%;
    background:rgba(255,255,255,.8);
    animation:titleShine 2s linear infinite;
}
.heading-badge,
.page-title,
.page-title span,
.page-subtitle,
.title-line,
.poweredby,
.poweredby a{
    transition:all .45s ease;
}
@keyframes titleShine{

0%{

left:-50px;

}

100%{

left:130px;

}

}


/*=========================================
            PREMIUM TOPBAR
=========================================*/

.topbar{
    position:fixed;
    top:0px;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    z-index:999;

    background:rgba(255,255,255,.75);
    backdrop-filter:blur(18px);

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

    border-radius:0px;

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

    padding:14px 10px;

    transition:.35s;
}

.navbar-brand{
    font-size:24px;
    color:#2563eb;
}

.navbar-brand i{
    color:#7c3aed;
}

/*=========================================
            TOPBAR MENU
=========================================*/

.navbar-nav{
    gap:28px;
}

.navbar-nav .nav-link{
    position:relative;
    color:#1e293b;
    text-decoration:none;
    font-size:15px;
    font-weight:500;
    transition:.3s;
    padding:0 !important;
}

/* Underline */

.navbar-nav .nav-link::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:2px;
    border-radius:20px;
    background:#4f7dff;
    transition:.35s ease;
}

/* Hover */

.navbar-nav .nav-link:hover{
    color:#2563eb;
}

.navbar-nav .nav-link:hover::after{
    width:100%;
}

/* Active */

.navbar-nav .nav-link.active{
    color:#2563eb;
}

.navbar-nav .nav-link.active::after{
    width:100%;
}

.btn-primary{
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    border:none;
    padding:11px 28px;
    font-weight:600;
}

.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 25px rgba(37,99,235,.30);
}
/*=========================================
            GOOGLE FONT
=========================================*/

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

/*=========================================
        FLOATING GLASS FOOTER
=========================================*/

.footer-section{
    position:relative;
    margin-top:-170px;      /* Section ke upar overlap */
    z-index:100;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-top:0px solid rgba(255,255,255,.18);

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

    color:#fff;

    overflow:hidden;
}

/*=========================================
            LEFT CONTENT
=========================================*/

.cta-content{
    position:relative;
    z-index:2;
}

.cta-icon{
    width:70px;
    height:70px;
    min-width:70px;
    border-radius:18px;
    background:rgba(255,255,255,.15);
    display:flex;
    justify-content:center;
    align-items:center;
    margin-right:20px;
    font-size:34px;
    color:#000;
}

.cta-content h3{
    font-size:30px;
    font-weight:700;
    margin-bottom:8px;
}

.cta-content p{
    color:#000;
    font-size:15px;
    line-height:1.7;
}

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

.cta-buttons{
    display:flex;
    justify-content:flex-end;
    gap:15px;
    flex-wrap:wrap;
    position:relative;
    z-index:2;
}

.cta-buttons .btn{
    height:56px;
    padding:0 28px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
    transition:.35s;
    border:none;
    white-space:nowrap;
}

.btn-download{
    color:#000;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.25) !important;
}

.btn-download:hover{
    background:#fff;
    color:#1b43b9;
    transform:translateY(-4px);
}

.btn-register{
    background:#ff7b18;
    color:#000;
}

.btn-register:hover{
    background:#ff983f;
    color:#000;
    transform:translateY(-4px);
    box-shadow:0 15px 35px rgba(255,123,24,.35);
}

.btn-partner{
    background:#fff;
    color:#173c9d;
}

.btn-partner:hover{
    background:#eef3ff;
    color:#173c9d;
    transform:translateY(-4px);
}
/*=========================================
            FOOTER MAIN
=========================================*/

.footer-main{
    padding:45px 0 25px;
    position:relative;
    z-index:2;
}

.footer-main::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:1px;
    background:rgba(255,255,255,.08);
}

/*=========================================
            LOGO
=========================================*/

.footer-logo{
    display:inline-flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:#000;
    font-size:30px;
    font-weight:700;
    transition:.35s;
}

.footer-logo i{
    width:55px;
    height:55px;
    border-radius:16px;
    background:linear-gradient(135deg,#2d5be3,#4f7dff);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    color:#fff;
}

.footer-logo:hover{
    color:#000;
    transform:translateY(-2px);
}

/*=========================================
            MENU
=========================================*/

.footer-menu{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:28px;
}

.footer-menu li{
    list-style:none;
}

.footer-menu a{
    color:#000;
    text-decoration:none;
    font-size:15px;
    font-weight:500;
    transition:.3s;
    position:relative;
}

.footer-menu a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    border-radius:20px;
    background:#4f7dff;
    transition:.35s;
}

.footer-menu a:hover{
    color:#000;
}

.footer-menu a:hover::after{
    width:100%;
}

/*=========================================
            SOCIAL
=========================================*/

.footer-social{
    display:flex;
    justify-content:flex-end;
    gap:12px;
}

.footer-social a{
    width:44px;
    height:44px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#000;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    transition:.35s;
}

.footer-social a:hover{
    background:#4f7dff;
    color:#fff;
    transform:translateY(-6px);
    box-shadow:0 12px 25px rgba(79,125,255,.35);
}

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

.footer-bottom{
    padding:22px 0;
}

.footer-bottom p{
    margin:0;
    color:#000;
    font-size:14px;
}

.footer-links{
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    justify-content:flex-end;
    gap:22px;
    flex-wrap:wrap;
}

.footer-links li{
    list-style:none;
}

.footer-links a{
    color:#000;
    text-decoration:none;
    font-size:14px;
    transition:.3s;
}

.footer-links a:hover{
    color:#000;
}

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

@media(max-width:991px){

    .footer-section{
        padding-top:70px;
    }

    .footer-cta{
        margin-top:0;
        padding:30px 25px;
    }

    .cta-content{
        flex-direction:column;
        text-align:center;
    }

    .cta-icon{
        margin-right:0;
        margin-bottom:18px;
    }

    .cta-buttons{
        justify-content:center;
        margin-top:25px;
    }

    .footer-logo{
        justify-content:center;
        display:flex;
        margin-bottom:25px;
    }

    .footer-menu{
        margin-bottom:30px;
        gap:18px;
    }

    .footer-social{
        justify-content:center;
        margin-top:15px;
    }

    .footer-bottom p{
        text-align:center;
        margin-bottom:15px;
    }

    .footer-links{
        justify-content:center;
    }
}

@media(max-width:576px){

    .footer-cta{
        border-radius:20px;
        padding:25px 18px;
    }

    .cta-content h3{
        font-size:22px;
    }

    .cta-buttons .btn{
        width:100%;
    }

    .footer-menu{
        flex-direction:column;
        gap:14px;
    }

    .footer-links{
        flex-direction:column;
        gap:10px;
        align-items:center;
    }
}