@color_1: #fff;
@color_2: #cfd8e3;
@color_3: white;
@color_4: #4fa7ff;
@color_5: #b8c6d8;
@color_6: #93a4ba;
@color_7: #3b82f6;
@color_8: #94a3b8;
@color_9: #64748b;
@color_10: rgba(255, 255, 255, .04);
@color_11: #60a5fa;
@color_12: #fbbf24;
@color_13: #22c55e;
@color_14: #ddd;
@color_15: #facc15;
@color_16: #cbd5e1;
@font_family_1: Inter, sans-serif;
@border_color_1: rgba(59, 130, 246, .5);
@border_color_2: #2563eb;
@border_color_3: rgba(255, 255, 255, .1);
@primary: #2563eb;
@secondary: #06b6d4;
@white: #fff;
@text: #cbd5e1;
@muted: #94a3b8;
@primary: #2563eb;
@secondary: #06b6d4;
@white: #fff;
@text: #cbd5e1;
@muted: #94a3b8;
@border: rgba(255,255,255,.08);
@card-bg: linear-gradient(
    145deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.03)
);


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	font-family: @font_family_1;
	background: #07131f;
	color: @color_1;
}
.navbar {
	padding: 20px 0;
	backdrop-filter: blur(18px);
	background: rgba(8, 15, 30, .65);
	border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.nav-link {
	color: @color_2;
	margin: 0 15px;
	font-weight: 500;
	&:hover {
		color: @color_3;
	}
}

.hero {
	padding-top: 170px;
	padding-bottom: 120px;
	position: relative;
	overflow: hidden;
	&::before {
		content: "";
		width: 700px;
		height: 700px;
		position: absolute;
		right: -250px;
		top: -250px;
		background: #2563eb;
		border-radius: 50%;
		filter: blur(180px);
		opacity: .18;
	}
	&::after {
		content: "";
		width: 500px;
		height: 500px;
		position: absolute;
		left: -180px;
		bottom: -180px;
		background: #00b4ff;
		border-radius: 50%;
		filter: blur(160px);
		opacity: .15;
	}
	h1 {
		font-size: 68px;
		font-weight: 800;
		line-height: 1.1;
		span {
			color: @color_4;
		}
	}
	p {
		margin-top: 30px;
		font-size: 18px;
		line-height: 1.8;
		color: @color_5;
		max-width: 560px;
	}
}
.hero-badge {
	display: inline-block;
	padding: 10px 18px;
	background: rgba(37, 99, 235, .18);
	border: 1px solid rgba(37, 99, 235, .35);
	border-radius: 50px;
	margin-bottom: 25px;
}
.dashboard-card {
	background: rgba(255, 255, 255, .05);
	padding: 22px;
	border-radius: 30px;
	border: 1px solid rgba(255, 255, 255, .08);
	box-shadow: 0 40px 80px rgba(0, 0, 0, .45);
	backdrop-filter: blur(30px);
	img {
		border-radius: 18px;
	}
}
.hero-stats {
	display: flex;
	gap: 50px;
	h3 {
		font-weight: 800;
		font-size: 34px;
		margin-bottom: 5px;
	}
	span {
		color: @color_6;
	}
}
.btn-primary {
	background: #2563eb;
	border: none;
	&:hover {
		background: #1d4ed8;
	}
}
.section-title {
	span {
		color: @color_7;
		font-size: 14px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 2px;
	}
	h2 {
		font-size: 48px;
		font-weight: 800;
		margin-top: 15px;
	}
	p {
		color: @color_8;
		font-size: 18px;
	}
}
.partners {
	padding: 100px 0;
	border-top: 1px solid rgba(255, 255, 255, .05);
}
.logo-slider {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 70px;
	margin-top: 60px;
	flex-wrap: wrap;
}
.logo-item {
	font-size: 24px;
	font-weight: 800;
	color: @color_9;
	transition: .3s;
	&:hover {
		color: @color_3;
		transform: translateY(-5px);
	}
}
.advantages {
	padding: 100px 0;
}

.feature-card {
	height: 100%;
	padding: 35px;
	background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 25px;
	transition: .35s;
	position: relative;
	overflow: hidden;
	&::before {
		content: "";
		position: absolute;
		width: 150px;
		height: 150px;
		background: #2563eb;
		filter: blur(100px);
		opacity: 0;
		transition: .3s;
	}
	&:hover {
		&::before {
			opacity: .5;
		}
		transform: translateY(-10px);
		border-color: @border_color_1;
	}
	h3 {
		font-size: 24px;
		font-weight: 700;
	}
	p {
		color: @color_8;
		line-height: 1.7;
		margin-top: 15px;
	}
}
.icon-box {
	width: 65px;
	height: 65px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 18px;
	background: #2563eb;
	font-size: 30px;
	margin-bottom: 25px;
}
.courses {
	padding: 100px 0;
	background: #081522;
}
.course-card {
	height: 100%;
	padding: 35px;
	position: relative;
	background: linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 28px;
	overflow: hidden;
	transition: .35s;
	&:hover {
		transform: translateY(-12px);
		border-color: @border_color_2;
		box-shadow: 0 25px 60px rgba(37, 99, 235, .15);
	}
	i {
		font-size: 45px;
		display: inline-flex;
		width: 75px;
		height: 75px;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #2563eb, #06b6d4);
		border-radius: 22px;
		margin-bottom: 30px;
	}
	h3 {
		font-size: 25px;
		font-weight: 750;
		margin-bottom: 15px;
	}
	p {
		color: @color_8;
		line-height: 1.8;
		min-height: 80px;
	}
	a {
		display: inline-flex;
		gap: 10px;
		align-items: center;
		margin-top: 20px;
		color: @color_11;
		text-decoration: none;
		font-weight: 600;
		&:hover {
			color: @color_3;
		}
	}
}
.course-number {
	position: absolute;
	right: 25px;
	top: 20px;
	font-size: 55px;
	font-weight: 900;
	color: @color_10;
}
.achievements {
	padding: 120px 0;
}
.achievement-box {
	display: flex;
	gap: 20px;
	margin-top: 45px;
	flex-wrap: wrap;
	div {
		padding: 25px;
		min-width: 140px;
		background: rgba(255, 255, 255, .05);
		border: 1px solid rgba(255, 255, 255, .08);
		border-radius: 20px;
	}
	h3 {
		font-size: 34px;
		font-weight: 800;
		margin-bottom: 5px;
	}
	span {
		color: @color_8;
		font-size: 14px;
	}
}
.certificate-wrapper {
	display: flex;
	justify-content: center;
}
.certificate-card {
	width: 420px;
	padding: 45px;
	background: linear-gradient(145deg, #111827, #1e293b);
	border-radius: 30px;
	border: 1px solid rgba(255, 255, 255, .12);
	box-shadow: 0 40px 80px rgba(0, 0, 0, .4);
	text-align: center;
	transform: rotate(3deg);
	transition: .4s;
	&:hover {
		transform: rotate(0deg) scale(1.04);
	}
	h3 {
		margin-top: 25px;
		font-size: 25px;
		font-weight: 700;
	}
	p {
		color: @color_8;
	}
}
.certificate-top {
	i {
		font-size: 70px;
		color: @color_12;
	}
}
.certificate-line {
	height: 1px;
	background: rgba(255, 255, 255, .15);
	margin: 30px 0;
}
.certificate-footer {
	display: flex;
	justify-content: center;
	gap: 10px;
	align-items: center;
	color: @color_13;
}
.payouts {
	padding: 100px 0;
	background: #081522;
}
.payout-card {
	height: 350px;
	overflow: hidden;
	border-radius: 25px;
	position: relative;
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: .5s;
	}
	&:hover {
		img {
			transform: scale(1.1);
		}
	}
}
.payout-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 30px;
	background: linear-gradient(transparent, rgba(0, 0, 0, .9));
	h4 {
		font-size: 35px;
		font-weight: 800;
		color: @color_13;
	}
	span {
		color: @color_14;
	}
}
.team {
	padding: 120px 0;
}
.team-card {
	background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 30px;
	padding: 35px;
	text-align: center;
	transition: .35s;
	&:hover {
		transform: translateY(-12px);
		border-color: @border_color_2;
		box-shadow: 0 30px 60px rgba(0, 0, 0, .25);
	}
	h3 {
		margin-top: 25px;
		font-weight: 700;
	}
	span {
		color: @color_11;
	}
	p {
		color: @color_8;
		margin-top: 15px;
		line-height: 1.7;
	}
}
.team-image {
	width: 130px;
	height: 130px;
	margin: auto;
	overflow: hidden;
	border-radius: 50%;
	border: 4px solid #2563eb;
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}
.socials {
	display: flex;
	justify-content: center;
	gap: 15px;
	margin-top: 20px;
	a {
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: rgba(255, 255, 255, .08);
		color: @color_3;
		text-decoration: none;
		transition: .3s;
		&:hover {
			background: #2563eb;
		}
	}
}
.testimonials {
	padding: 100px 0;
	background: #081522;
}
.review-card {
	height: 100%;
	padding: 35px;
	border-radius: 25px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .08);
	p {
		color: @color_16;
		line-height: 1.8;
		margin: 25px 0;
	}
}
.stars {
	color: @color_15;
	font-size: 22px;
	letter-spacing: 3px;
}
.review-user {
	display: flex;
	align-items: center;
	gap: 15px;
	h5 {
		margin: 0;
	}
	span {
		color: @color_8;
		font-size: 14px;
	}
}
.avatar {
	width: 50px;
	height: 50px;
	background: #2563eb;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 20px;
}
.faq {
	padding: 120px 0;
}
.accordion-item {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .08);
	margin-bottom: 15px;
	border-radius: 18px !important;
	overflow: hidden;
}
.accordion-button {
	background: transparent;
	color: @color_3;
	font-weight: 600;
	font-size: 18px;
	padding: 25px;
	&:not(.collapsed) {
		background: #2563eb;
		color: @color_3;
	}
	&:focus {
		box-shadow: none;
	}
}
.accordion-body {
	background: #0b1728;
	color: @color_16;
	padding: 25px;
}
.cta {
	padding: 80px 0 120px;
}
.cta-box {
	padding: 80px 40px;
	text-align: center;
	border-radius: 35px;
	background: linear-gradient(135deg, #2563eb, #06b6d4);
	h2 {
		font-size: 48px;
		font-weight: 800;
	}
	p {
		font-size: 18px;
		margin: 20px auto 35px;
		max-width: 600px;
	}
}
footer {
	background: #050b14;
	padding: 80px 0 30px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	h3 {
		font-weight: 800;
	}
	h5 {
		margin-bottom: 20px;
	}
	p {
		color: @color_8;
		text-decoration: none;
		display: block;
		margin-bottom: 12px;
	}
	a {
		color: @color_8;
		text-decoration: none;
		display: block;
		margin-bottom: 12px;
		&:hover {
			color: @color_3;
		}
	}
	hr {
		margin: 50px 0 25px;
		border-color: @border_color_3;
	}
}
.footer-social {
	display: flex;
	gap: 15px;
	a {
		width: 45px;
		height: 45px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(255, 255, 255, .08);
		font-size: 20px;
	}
}
.copyright {
	color: @color_9;
}
.btnGetStarted {
	display: inline-block;
	padding: 6px 22px;
	background: linear-gradient(to bottom, #4da3ff, #0b74e5);
	color: @color_1;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
	transition: all .2s ease;
	&:hover {
		background: linear-gradient(to bottom, #5ab0ff, #0968cf);
	}
	&:active {
		transform: translateY(1px);
	}
}
.btnLogin {
	color: @color_1;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

@media (max-width:991px) {
	.hero {
		text-align: center;
		padding-top: 140px;
		h1 {
			font-size: 42px;
		}
		p {
			margin: auto;
			margin-top: 25px;
		}
	}
	.hero-stats {
		justify-content: center;
	}
	.dashboard-card {
		margin-top: 60px;
	}
}
@media (max-width:768px) {
	.section-title {
		h2 {
			font-size: 36px;
		}
	}
	.logo-slider {
		gap: 30px;
	}
	.certificate-card {
		width: 100%;
	}
}


.loginFluid {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;

    .login-card {
        position: relative;
        z-index: 2;
    
        width: 100%;
        max-width: 430px;
        padding: 45px;
    
        border-radius: 30px;
        border: 1px solid rgba(255,255,255,.08);
    
        background: linear-gradient(
            145deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.03)
        );
    
        backdrop-filter: blur(30px);
        box-shadow: 0 30px 70px rgba(0,0,0,.45);
    
        h2 {
            text-align: center;
            font-size: 34px;
            font-weight: 800;
            margin-bottom: 10px;
        }
    
        p {
            text-align: center;
            color: @muted;
            margin-bottom: 35px;
        }
    
        a {
            color: lighten(@primary, 15%);
            text-decoration: none;
            transition: .3s;
    
            &:hover {
                color: @white;
            }
        }
    }
    
    // Logo
    .logo {
        width: 85px;
        height: 85px;
    
        margin: 0 auto 25px;
    
        display: flex;
        justify-content: center;
        align-items: center;
    
        border-radius: 50%;
    
        background: linear-gradient(135deg, @primary, @secondary);
    
        color: @white;
        font-size: 38px;
    
        box-shadow: 0 15px 35px fade(@primary, 35%);
    }
    
    // Form
    .form-label {
        color: @text;
        margin-bottom: 10px;
        font-weight: 600;
    }
    
    .form-control {
        height: 58px;
        padding: 0 18px;
    
        border-radius: 16px;
        border: 1px solid rgba(255,255,255,.08);
    
        background: rgba(255,255,255,.05);
        color: @white;
    
        &::placeholder {
            color: @muted;
        }
    
        &:focus {
            background: rgba(255,255,255,.08);
            border-color: @primary;
            color: @white;
            box-shadow: none;
        }
    }
    
    // Button
    .btn-login {
        width: 100%;
        height: 58px;
    
        border: none;
        border-radius: 16px;
    
        font-size: 17px;
        font-weight: 700;
    
        color: @white;
    
        background: linear-gradient(135deg, @primary, @secondary);
    
        transition: .3s;
    
        &:hover {
            transform: translateY(-3px);
            box-shadow: 0 20px 35px fade(@primary, 35%);
        }
    }
    
    // Checkbox
    .form-check {
        &-input {
            background: transparent;
            border: 1px solid rgba(255,255,255,.3);
    
            &:checked {
                background: @primary;
                border-color: @primary;
            }
        }
    
        &-label {
            color: @muted;
        }
    }
}



// Responsive
@media (max-width:576px) {
    .login-card {
        margin: 20px;
        padding: 35px 25px;

        h2 {
            font-size: 28px;
        }
    }
}


.registerFluid {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    // Register Card
    .register-card {
    
        width: 100%;
        max-width: 450px;
    
        border: 1px solid @border;
        border-radius: 30px;
    
        background: @card-bg;
    
        backdrop-filter: blur(30px);
    
        box-shadow: 0 30px 70px rgba(0,0,0,.45);
    
        .card-body {
            padding: 45px;
        }
    }
    
    // Logo
    .logo {
    
        width: 80px;
        height: 80px;
    
        margin: 0 auto 30px;
    
        display: flex;
        align-items: center;
        justify-content: center;
    
        border-radius: 50%;
    
        background: linear-gradient(
            135deg,
            @primary,
            @secondary
        );
    
        color: @white;
        font-size: 36px;
    
        box-shadow: 0 15px 35px fade(@primary,35%);
    }
    
    // Form Label
    .form-label {
        color: @text;
        font-weight: 600;
    }
    
    // Input
    .form-control {
    
        height: 56px;
    
        background: rgba(255,255,255,.05);
        border: 1px solid @border;
        border-radius: 16px;
    
        color: @white;
    
        &::placeholder {
            color: @muted;
        }
    
        &:focus {
    
            background: rgba(255,255,255,.08);
    
            border-color: @primary;
    
            color: @white;
    
            box-shadow: none;
        }
    }
    
    // Input Group
    .input-group {
    
        .input-group-text {
    
            background: rgba(255,255,255,.05);
    
            color: @muted;
    
            border: 1px solid @border;
    
            border-radius: 16px 0 0 16px;
        }
    
        .password-btn {
    
            background: rgba(255,255,255,.05);
    
            color: @muted;
    
            border: 1px solid @border;
    
            border-radius: 0 16px 16px 0;
    
            transition: .3s;
    
            &:hover {
                background: @primary;
                color: @white;
            }
        }
    }
    
    // Register Button
    .btn-register {
    
        width: 100%;
        height: 56px;
    
        border: none;
        border-radius: 16px;
    
        font-size: 17px;
        font-weight: 700;
    
        color: @white;
    
        background: linear-gradient(
            135deg,
            @primary,
            @secondary
        );
    
        transition: .3s;
    
        &:hover {
    
            transform: translateY(-3px);
    
            box-shadow: 0 20px 35px fade(@primary,35%);
        }
    }
    
    // Links
    a {
    
        color: lighten(@primary,15%);
        text-decoration: none;
        transition: .3s;
    
        &:hover {
            color: @white;
        }
    }

}


// Responsive
@media (max-width:576px) {

    .register-card {

        margin: 20px;

        .card-body {
            padding: 35px 25px;
        }
    }

    .logo {
        width: 70px;
        height: 70px;
        font-size: 32px;
    }
}