:root {
	--dark: #050713;
	--ink: #0a1024;
	--muted: #667085;
	--line: #e8eaf3;
	--purple: #6d28ff;
	--pink: #ec3cc8;
	--orange: #ff8a2a;
	--shadow: 0 26px 70px rgba(13, 18, 45, .12);
	 --primary:#7c4dff;
  
    --primary-light:#f3edff;
    --orange-light:#fff3e5;
    --border:#ececec;
}

body {
	font-family: Inter, Arial, sans-serif;
	color: var(--ink);
	background: #fff
}

a {
	text-decoration: none
}
.purple-txt{color:#5b2ed3}
.navbar {
	background: #050713;
	border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.logo {
	height: 70px;
	object-fit: contain
}

.nav-link {
	color: rgba(255, 255, 255, .86) !important;
	font-weight: 750;
	font-size: 14px
}

.industry-dropdown-toggle {
	border: 0;
	background: transparent;
	padding-right: 0;
	padding-left: 0
}

.industry-dropdown-toggle:focus {
	box-shadow: none
}

.industry-dropdown-menu {
	min-width: 260px;
	margin-top: 12px;
	padding: 10px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 14px;
	background: rgba(5, 7, 19, .98);
	box-shadow: 0 22px 54px rgba(0, 0, 0, .28)
}

.industry-dropdown-menu .dropdown-item {
	border-radius: 10px;
	padding: 10px 12px;
	color: rgba(255, 255, 255, .84);
	font-size: 14px;
	font-weight: 750
}

.industry-dropdown-menu .dropdown-item:hover,
.industry-dropdown-menu .dropdown-item:focus {
	background: rgba(124, 77, 255, .18);
	color: #fff
}

.btn-hype {
	border: 0;
	color: #fff !important;
	font-weight: 850;
	border-radius: 14px;
	padding: 13px 22px;
	background: linear-gradient(92deg, var(--purple), var(--pink), var(--orange));
	box-shadow: 0 18px 42px rgba(236, 60, 200, .25)
}

.btn-ghost {
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 14px;
	padding: 12px 21px;
	font-weight: 850;
	background: rgba(255, 255, 255, .03)
}

.hero {
	color: #fff;
	overflow: hidden;
	padding: 86px 0 58px;
	background: radial-gradient(circle at 80% 18%, rgba(109, 40, 255, .45), transparent 30%), radial-gradient(circle at 98% 82%, rgba(255, 138, 42, .36), transparent 28%), radial-gradient(circle at 55% 70%, rgba(236, 60, 200, .26), transparent 32%), linear-gradient(135deg, #050713 0%, #080b19 55%, #150427 100%)
}

.eyebrow {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 9px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .09);
	border: 1px solid rgba(255, 255, 255, .1);
	font-size: 13px;
	font-weight: 500
}
.laptop-bg{background:url(../images/laptop-bg.png) no-repeat right center;background-size:70%}
.hero h1 {
	font-size: clamp(42px, 5vw, 60px);
	line-height: 1.02;
	letter-spacing: -.06em;
	font-weight: 600;
	margin: 28px 0 18px
}

.gradient-text {
	background: linear-gradient(92deg, #7c3aed, #ec3cc8, #ff8a2a);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent
}

.hero-copy {
	color: rgba(255, 255, 255, .86);
	font-size: 19px;
	line-height: 1.65;
	max-width: 560px
}

.hero-feature {
	/* width: 78px; */
	text-align: center
}

.hero-feature .ico {
	width: 52px;
	height: 52px;
	border-radius: 16px;
	display: grid;
	place-items: center;
	margin: 0 auto 10px;
	background: rgba(109, 40, 255, .18);
	color: #c084fc;
	border: 1px solid rgba(255, 255, 255, .08);
	font-size: 22px
}

.hero-feature b {
	display: block;
	font-size: 14px;
	line-height: 1.25;
	color: #fff;
	font-weight:normal
}

.hero-feature span {
	display: block;
	font-size: 12px;
	color: rgba(255, 255, 255, .64);
	margin-top: 4px
}

.faces span {
	width: 34px;
	height: 34px;
	display: inline-block;
	border-radius: 50%;
	border: 2px solid #050713;
	margin-left: -8px;
	background: linear-gradient(135deg, #f59e0b, #ec4899)
}

.faces span:first-child {
	margin-left: 0
}

.laptop-wrap {
	position: relative;
	min-height: 520px;
	display: flex;
	align-items: center;
	justify-content: center
}

.laptop-wrap:after {
	content: "";
	position: absolute;
	width: 82%;
	height: 150px;
	right: 20px;
	bottom: 16px;
	background: radial-gradient(ellipse, rgba(236, 60, 200, .35), rgba(255, 138, 42, .24), transparent 70%);
	filter: blur(18px)
}

.laptop {
	width: min(820px, 100%);
	position: relative;
	z-index: 2;
	transform: perspective(1200px) rotateY(-12deg) rotateX(7deg) rotateZ(.4deg)
}

.laptop-top {
	border-radius: 32px 32px 22px 22px;
	padding: 18px 18px 30px;
	background: linear-gradient(145deg, #202638, #080c18);
	border: 1px solid rgba(255, 255, 255, .18);
	box-shadow: 0 45px 100px rgba(0, 0, 0, .48), inset 0 0 0 2px rgba(255, 255, 255, .08)
}

.laptop-screen {
	min-height: 430px;
	border-radius: 20px;
	overflow: hidden;
	background: #0b1020;
	border: 1px solid rgba(255, 255, 255, .12)
}

.laptop-base {
	height: 32px;
	width: 91%;
	margin: 0 auto;
	border-radius: 0 0 42px 42px;
	background: linear-gradient(90deg, #555b6a, #f1f1f5, #626673);
	box-shadow: 0 22px 44px rgba(0, 0, 0, .36)
}

.dash-layout {
	display: grid;
	grid-template-columns: 150px 1fr;
	min-height: 430px
}

.dash-sidebar {
	background: #070a14;
	padding: 22px 14px;
	border-right: 1px solid rgba(255, 255, 255, .08)
}

.dash-logo {
	color: #fff;
	font-size: 17px;
	font-weight: 900;
	margin-bottom: 18px
}

.dash-nav {
	display: grid;
	gap: 7px
}

.dash-nav span {
	color: rgba(255, 255, 255, .72);
	font-size: 11px;
	padding: 9px 10px;
	border-radius: 10px
}

.dash-nav span.active {
	background: linear-gradient(92deg, #6d28ff, #8b5cf6);
	color: #fff
}

.dash-main {
	padding: 22px;
	color: #fff;
	background: radial-gradient(circle at 90% 10%, rgba(236, 60, 200, .20), transparent 28%), #0d1224
}

.dash-card {
	background: rgba(255, 255, 255, .055);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 16px;
	padding: 16px
}

.kpi {
	background: rgba(255, 255, 255, .055);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 14px;
	padding: 12px
}

.kpi small {
	color: rgba(255, 255, 255, .55)
}

.kpi b {
	display: block;
	color: #fff;
	font-size: 22px
}

.project-row {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 9px;
	margin-top: 14px
}

.project {
	height: 78px;
	border-radius: 12px;
	padding: 8px;
	display: flex;
	align-items: end;
	font-size: 10px;
	font-weight: 800;
	background: linear-gradient(135deg, #172554, #6d28ff)
}

.project:nth-child(2) {
	background: linear-gradient(135deg, #3b1606, #ff8a2a)
}

.project:nth-child(3) {
	background: linear-gradient(135deg, #33152d, #ec3cc8)
}

.project:nth-child(4) {
	background: linear-gradient(135deg, #0f172a, #84cc16)
}

.project:nth-child(5) {
	background: linear-gradient(135deg, #522006, #fbbf24)
}

.mini-graph {
	height: 92px;
	border-radius: 14px;
	background: linear-gradient(135deg, transparent 10%, rgba(139, 92, 246, .35) 10% 13%, transparent 13% 28%, rgba(236, 60, 200, .35) 28% 31%, transparent 31% 45%, rgba(255, 138, 42, .35) 45% 49%, transparent 49%), rgba(255, 255, 255, .055);
	border: 1px solid rgba(255, 255, 255, .08)
}
 /* =========================
   BRANDS
========================= */

.brand-section{
    padding:24px 0;
        border-bottom: 1px solid #f7f4f4;
    background: #fffdfd;
}

.brand-label{
    text-align:center;
    font-size:11px;
    font-weight:700;
    color:#888;
    letter-spacing:1px;
    margin-bottom:18px;
    text-transform:uppercase;
}

.brand-row{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:55px;
    flex-wrap:wrap;
}

.brand-item svg{
    height:28px;
}

/* =========================
   TITLE
========================= */

.section-label{
    color:var(--primary);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
}

/* .section-title{
    font-size:42px;
    font-weight:700;
    margin-top:10px;
} */

@media(max-width:768px){
    .section-title{
        font-size:28px;
    }
}

/* =========================
   SWIPER
========================= */
.swiper-slide{height:auto;}
.slider-wrap{
    position:relative;
    padding:0 50px;
}

.swiper{
    padding-bottom:60px;
	padding-left: 50px;
    padding-right: 50px;
}

.industry-card{
    border:1px solid #e9e9e9;
    border-radius:18px;
    overflow:hidden;
    background:#fff;
    transition:.35s;
    height:100%;
}

.industry-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.08);
}

.industry-image{
    height:190px;
    overflow:hidden;
}

.industry-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.6s;
}

.industry-card:hover img{
    transform:scale(1.08);
}

.card-content{
    padding:20px;
}

.icon-circle{
    width:48px;
    height:48px;
    border-radius:50%;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:-44px;
    position:relative;
    z-index:2;
    margin-bottom:15px;
}

.green{background:#4CAF50;}
.blue{background:#2196F3;}
.orange{background:#ff7a00;}
.purple{background:#7E57C2;}

.card-title{
    font-weight:700;
    font-size:18px;
}

.card-text{
    color:#666;
    font-size:14px;
    line-height:1.6;
}

.card-link{
    text-decoration:none;
    font-weight:600;
    color:var(--primary);
}

/* arrows */

.swiper-button-next,
.swiper-button-prev{
    width:42px;
    height:42px;
    background:#fff;
    border-radius:50%;
    border:1px solid #e9e9e9;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.swiper-button-next:after,
.swiper-button-prev:after{
    font-size:14px;
    color:#333;
    font-weight:bold;
}

/* dots */

.swiper-pagination-bullet{
    width:8px;
    height:8px;
    opacity:1;
    background:#d7d7d7;
}

.swiper-pagination-bullet-active{
    background:var(--primary);
    width:22px;
    border-radius:20px;
}


.section-title {
	font-size: 34px;
	font-weight: 600;
	letter-spacing: -.04em
}

 

.industry-card {
	border: 1px solid var(--line);
	border-radius: 20px;
	overflow: hidden;
	background: #fff;
	/* box-shadow: var(--shadow); */
	height: 100%
}

.industry-img {
	height: 155px;
	background-size: cover;
	background-position: center
}

.industry-body {
	padding: 22px
}

.industry-icon {
	width: 48px;
	height: 48px;
	border-radius: 16px;
	display: grid;
	place-items: center;
	color: #fff;
	font-size: 22px;
	margin-top: -46px;
	margin-bottom: 14px;
	border: 4px solid #fff
}

.benefit {
	display: flex;
	gap: 15px;
	align-items: flex-start
}

.benefit-icon {
	width: 52px;
	height: 52px;
	border-radius: 17px;
	display: grid;
	place-items: center;
	background: #f6ebfb;
	color: var(--purple);
	font-size: 23px;
	flex: 0 0 auto
}
.templates-section{
    padding:80px 0;
}

.section-tag{
    color:#6D4AFF;
    font-size:12px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:8px;
}

.section-title{
    font-size:38px;
    font-weight:700;
    color:#111827;
    margin-bottom:50px;
}

.slider-wrapper{
    position:relative;
}

.template-slider{
    margin:0 30px;
}

.slide-item{
    padding:0 8px;
}

.template-card{
    background:#fff;
    border:1px solid #E5E7EB;
    border-radius:12px;
    overflow:hidden;
}

.poster{
    position:relative;
    height:210px;
}

.poster img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.poster::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.05),
        rgba(0,0,0,.65)
    );
}

.poster-content{
    position:absolute;
    top:14px;
    left:14px;
    z-index:2;
    color:#fff;
    width:80%;
}

.poster-content h4{
    font-size:24px;
    font-weight:800;
    line-height:1;
    margin-bottom:8px;
    text-shadow:0 2px 8px rgba(0,0,0,.4);
}

.poster-content p{
    font-size:11px;
    line-height:1.4;
    margin:0;
    text-shadow:0 2px 8px rgba(0,0,0,.4);
}

.template-category{
    padding:10px;
    font-size:11px;
    color:#6B7280;
}

/* Arrows */

.slick-prev,
.slick-next{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#fff !important;
    border:1px solid #E5E7EB;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
    z-index:999;
}

.slick-prev{
    left:-15px;
}

.slick-next{
    right:-15px;
}

.slick-prev:before,
.slick-next:before{
    font-family:"bootstrap-icons";
    color:#111;
    opacity:1;
    font-size:14px;
}

.slick-prev:before{
    content:"\f284";
}

.slick-next:before{
    content:"\f285";
}

/* Button */

.browse-btn{
    margin-top:40px;
    padding:12px 24px;
    border-radius:8px;
    background:#fff;
    border:1px solid #6D4AFF;
    color:#6D4AFF;
    font-size:14px;
    font-weight:600;
    display:inline-block
}

.browse-btn:hover{
    background:#6D4AFF;
    color:#fff;
}

@media(max-width:991px){

    .section-title{
        font-size:28px;
    }

    .template-slider{
        margin:0 20px;
    }
}
.quote-card {
	border: 1px solid var(--line);
	border-radius: 20px;
	background: #fff;
	padding: 25px;
	/* box-shadow: 0 16px 44px rgba(15, 23, 42, .06) */
}

.price-card {
	border: 1px solid var(--line);
	border-radius: 22px;
	padding: 28px;
	height: 100%;
	background: #fff;
	position: relative;
	box-shadow: 0 16px 44px rgba(15, 23, 42, .06)
}

.price-card.popular {
	border-color: var(--purple);
	box-shadow: 0 28px 70px rgba(109, 40, 255, .14)
}

.popular-tag {
	position: absolute;
	top: -14px;
	left: 0;
	right: 0;
	width: max-content;
	margin: auto;
	background: var(--purple);
	color: #fff;
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 900
}

.price-icon {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border-radius: 16px;
	background: #f4edff;
	color: var(--purple);
	font-size: 23px;
	margin-bottom: 14px
}

.price {
	font-size: 32px;
	font-weight: 900
}

.price small {
	font-size: 14px;
	color: var(--muted);
	font-weight: 700
}

.price-card ul {
	list-style: none;
	padding: 0;
	margin: 20px 0;
	display: grid;
	gap: 10px;
	font-size: 14px
}

.price-card li:before {
	content: "✓";
	color: var(--purple);
	font-weight: 900;
	margin-right: 9px
}

.cta-box {
	border-radius: 24px;
	padding: 32px;
	background: linear-gradient(92deg, #170827, #3b0764, #ec3cc8, #ff8a2a);
	color: #fff
}
.pricing-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    height:100%;
    overflow:hidden;
    position:relative;
    transition:.35s ease;
    animation:fadeUp .7s ease;
}

.pricing-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.08);
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(25px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* LEFT PROMO CARD */
.promo-card{
    background:linear-gradient(135deg,#4a08dc 0%,#9e1295 55%,#fa5a1e 100%);
    color:#fff;
    padding:32px;
}

.promo-icon{
    width:58px;
    height:58px;
    border-radius:14px;
    background:rgba(255,255,255,.18);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    margin-bottom:24px;
}

.promo-card h3{
    font-size:30px;
    font-weight:700;
    line-height:1.25;
    margin-bottom:16px;
}

.promo-card p{
    opacity:.9;
    font-size:14px;
    margin:0;
}

/* MOST POPULAR */
.popular-badge{
    position:absolute;
    top:0;
    left:0;
    right:0;
    background:var(--primary);
    color:#fff;
    text-align:center;
    font-size:11px;
    font-weight:700;
    padding:8px;
    letter-spacing:.8px;
}

/* CARD CONTENT */
.card-body-custom{
    padding:24px;
}

.plan-title-wrap{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:20px;
}

.plan-icon{
    width:52px;
    height:52px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    flex-shrink:0;
}

.growth-icon{
    background:var(--primary-light);
    color:var(--primary);
}

.pro-icon{
    background:var(--orange-light);
    color:var(--orange);
}

.enterprise-icon{
    background:var(--primary-light);
    color:var(--primary);
}

.plan-name{
    font-size:24px;
    font-weight:700;
    margin:0;
    color:#111;
}

.plan-desc{
    margin:4px 0 0;
    color:#777;
    font-size:13px;
}

/* PRICE */
.price{
    font-size:26px;
    font-weight:800;
    margin-bottom:4px;
    color:#111;
}

.price small{
    font-size:15px;
    color:#666;
    font-weight:500;
}

.price-sub{
    color:#888;
    font-size:13px;
    margin-bottom:24px;
}

/* FEATURES */
.feature-list{
    list-style:none;
    padding:0;
    margin:0 0 24px;
}

.feature-list li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom:14px;
    font-size:14px;
    color:#333;
}

.feature-list i{
    color:var(--primary);
    margin-top:2px;
}

/* BUTTONS */
.btn-purple{
    background:var(--primary);
    color:#fff;
    border:none;
     
    border-radius:12px;
    font-weight:600;
        display: inline-block;
    line-height: 50px;
}

.btn-purple:hover{
    background:#5d2df4;
    color:#fff;
}

.btn-outline-purple{
    border:1px solid var(--primary);
    color:var(--primary);
    background:#fff;
     
    border-radius:12px;
    font-weight:600;
        display: inline-block;
    line-height: 50px;
}

.btn-outline-purple:hover{
    background:var(--primary);
    color:#fff;
}

/* ENTERPRISE TOGGLE */
.enterprise-switch-wrap{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:20px;
}

.billing-switch{
    background:#f7f5ff;
    border:1px solid #ebe4ff;
    border-radius:999px;
    padding:3px;
    display:flex;
}

.billing-btn{
    border:none!important;
    background:transparent!important;
    color:#777!important;
    font-size:11px;
    font-weight:600;
    border-radius:999px;
    padding:5px 14px;
}

.btn-check:checked + .billing-btn{
    background:#fff!important;
    color:var(--primary)!important;
    box-shadow:0 2px 6px rgba(0,0,0,.08);
}

.save-pill{
    background:var(--primary-light);
    color:var(--primary);
    font-size:10px;
    font-weight:700;
    padding:5px 9px;
    border-radius:999px;
    white-space:nowrap;
}

/* BOTTOM FEATURES */
.bottom-features{
    margin-top:26px;
    display:flex;
    justify-content:center;
    gap:28px;
    flex-wrap:wrap;
}

.bottom-features div{
    display:flex;
    align-items:center;
    gap:8px;
    color:#666;
    font-size:13px;
}

.bottom-features i{
    color:var(--primary);
    font-size:15px;
}

@media(max-width:991px){
    .pricing-card{
        margin-bottom:20px;
    }

    .price{
        font-size:34px;
    }
}
.footer {
	background: #00020b;
	color: #fff;
	padding: 48px 0 28px
}

.footer img {
	height: 80px;
	margin-bottom: 15px
}

.footer p,
.footer a {
	color: rgba(255, 255, 255, .62);
	font-size: 14px;
	line-height: 1.6;
	display: block;
	margin-bottom: 9px
}

.newsletter {
	display: flex;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 14px;
	overflow: hidden;
	background: #070b18
}

.newsletter input {
	background: transparent;
	border: 0;
	color: #fff;
	padding: 13px;
	width: 100%
}

.newsletter button {
	background: var(--purple);
	color: #fff;
	border: 0;
	padding: 0 16px;
	font-weight: 850
}

@media(max-width:992px) {
	.laptop {
		transform: none
	}

	.dash-layout {
		grid-template-columns: 1fr
	}

	.dash-sidebar {
		display: none
	}

	.project-row {
		grid-template-columns: repeat(2, 1fr)
	}
}