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

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins,sans-serif;
}

html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

body{

background:#07131f;

color:#fff;

overflow-x:hidden;

}

.navbar {
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(18px);
    padding: 18px 0;
    transition: .4s;

    position: relative;
    z-index: 1000;
}

.nav-link{

color:#fff;

margin-left:20px;

font-weight:500;

}

.nav-link:hover{

color:#2ce7f3;

}

.join-btn{

background:linear-gradient(90deg,#29e9f2,#8b4dff);

color:#fff;

padding:12px 35px;

border:none;

font-weight:700;

transition:.4s;
position: relative;
z-index: 999999;

}

.join-btn:hover{

transform:translateY(-4px);

box-shadow:0 0 25px #29e9f2;

}

.hero{

padding-top:170px;

padding-bottom:120px;

background:
linear-gradient(135deg,#07131f,#102741,#1a1555);

position:relative;

}

.subtitle{

letter-spacing:3px;

color:#2ce7f3;

margin-bottom:15px;

}

.hero h1{

font-size:70px;

font-weight:800;

}

.hero h1 span{

color:#2ce7f3;

}

.hero h2{

font-size:42px;

font-weight:700;

margin:20px 0;

}

.hero p{

font-size:18px;

line-height:32px;

color:#d6d6d6;

margin-top:20px;

}

.wheel{

    animation: spin 20s linear infinite;
    filter: drop-shadow(0 0 40px #2ce7f3);
    max-width: 100%;
    height: auto;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

.hero::before{

content:"";

position:absolute;

width:500px;

height:500px;

background:#29e9f2;

filter:blur(220px);

right:-200px;

top:0;

opacity:.2;

}

.hero::after{

content:"";

position:absolute;

width:400px;

height:400px;

background:#8b4dff;

filter:blur(200px);

left:-150px;

bottom:0;

opacity:.25;

}

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

.statistics{

padding:80px 0;

background:#081420;

}

.stat-card{

padding:45px 20px;

border-radius:25px;

text-align:center;

transition:.4s;

height:100%;

}

.stat-card:hover{

transform:translateY(-12px);

}

.stat-icon{

font-size:45px;

color:#29e9f2;

margin-bottom:20px;

}

.counter{

font-size:42px;

font-weight:700;

margin-bottom:10px;

color:#fff;

animation:counterGlow 2s infinite alternate;

}

.stat-card p{

color:#cfd5df;

font-size:17px;

}


/*==========================
HOW IT WORKS
===========================*/

.how-section{

padding:100px 0;

background:linear-gradient(180deg,#081420,#0d1d31);

}

.section-title{

font-size:48px;

font-weight:700;

margin-top:15px;

}

.work-card{

padding:50px 35px;

text-align:center;

position:relative;

height:100%;

}

.step-number{

position:absolute;

top:20px;

right:20px;

font-size:55px;

font-weight:800;

opacity:.08;

color:#fff;

}

.work-icon{

font-size:65px;

margin-bottom:30px;

background:linear-gradient(45deg,#29e9f2,#8b4dff);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.work-card h3{

margin-bottom:20px;

font-size:28px;

}

.work-card p{

color:#d5d5d5;

line-height:30px;

}

/* =========================================================
   SPINNWIN LOGIN PAGE
   ========================================================= */

.login-row {
    width: 100%;
    min-height: calc(100vh - 82px);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 50px 15px;

    position: relative;

    background:
        radial-gradient(
            circle at 10% 30%,
            rgba(41, 233, 242, 0.08),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 70%,
            rgba(139, 77, 255, 0.12),
            transparent 35%
        );

    overflow: hidden;
}


/* Decorative glow */

.login-row::before {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    left: -180px;
    top: 10%;

    background: #29e9f2;

    filter: blur(180px);

    opacity: .12;

    pointer-events: none;
}


.login-row::after {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    right: -200px;
    bottom: -100px;

    background: #8b4dff;

    filter: blur(180px);

    opacity: .15;

    pointer-events: none;
}


/* =========================================================
   LOGIN CARD
   ========================================================= */

.login-card {
    width: 100%;
    max-width: 430px;

    background: rgba(255, 255, 255, 0.98);

    border-radius: 22px;

    padding: 38px 36px 30px;

    position: relative;

    z-index: 2;

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

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .35),
        0 0 40px rgba(41, 233, 242, .05);

    overflow: hidden;
}


/* Top cyan/purple line */

.login-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background: linear-gradient(
        90deg,
        #29e9f2,
        #8b4dff,
        #29e9f2
    );
}


/* =========================================================
   LOGIN HEADER
   ========================================================= */

.login-header {
    text-align: center;

    margin-bottom: 28px;
}


.login-icon {
    width: 58px;
    height: 58px;

    margin: 0 auto 14px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #29e9f2,
            #8b4dff
        );

    box-shadow:
        0 8px 25px rgba(41, 233, 242, .25),
        0 8px 25px rgba(139, 77, 255, .20);
}


.login-icon i {
    font-size: 21px;
}


.login-header h4 {
    margin: 0;

    color: #18202b;

    font-size: 25px;

    font-weight: 700;
}


.login-header p {
    margin: 7px 0 0;

    color: #7d8793;

    font-size: 13px;
}


/* =========================================================
   FORM LABEL
   ========================================================= */

.login-field .form-label {
    display: block;

    margin-bottom: 8px;

    color: #29313b;

    font-size: 13px;

    font-weight: 600;
}


/* =========================================================
   INPUT GROUP
   ========================================================= */

.login-input-group {
    position: relative;

    width: 100%;
}


.login-input-group .form-control {
    width: 100%;

    height: 52px;

    padding-left: 44px;
    padding-right: 48px;

    border: 1px solid #e1e5ea;

    border-radius: 11px;

    background: #f8fafc;

    color: #202833;

    font-family: Poppins, sans-serif;

    font-size: 14px;

    box-shadow: none;

    outline: none;

    transition: .25s ease;
}


.login-input-group .form-control::placeholder {
    color: #a2a9b2;
}


.login-input-group .form-control:hover {
    border-color: #cdd3db;

    background: #fff;
}


.login-input-group .form-control:focus {
    border-color: #29cfdc;

    background: #fff;

    box-shadow:
        0 0 0 3px rgba(41, 233, 242, .10);
}


/* =========================================================
   LEFT INPUT ICON
   ========================================================= */

.login-input-icon {
    position: absolute;

    left: 16px;

    top: 50%;

    transform: translateY(-50%);

    z-index: 5;

    color: #929aa5;

    font-size: 14px;

    pointer-events: none;
}


/* =========================================================
   PASSWORD EYE
   ========================================================= */

.login-password-toggle {
    position: absolute;

    right: 15px;

    top: 50%;

    transform: translateY(-50%);

    z-index: 10;

    color: #929aa5;

    cursor: pointer;

    transition: .2s ease;
}


.login-password-toggle:hover {
    color: #8b4dff;
}


/* =========================================================
   ERROR
   ========================================================= */

.login-error {
    margin-top: 6px;

    font-size: 12px;
}


/* =========================================================
   REMEMBER / FORGOT PASSWORD
   ========================================================= */

.login-options {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin: 18px 0 22px;
}


.login-options .form-check {
    margin: 0;

    padding-left: 25px;
}


.login-options .form-check-input {
    width: 15px;
    height: 15px;

    margin-top: 3px;

    border-color: #d2d7dd;

    cursor: pointer;
}


.login-options .form-check-input:checked {
    background-color: #29cfdc;

    border-color: #29cfdc;
}


.login-options .form-check-label {
    color: #7c858f;

    font-size: 12px;

    cursor: pointer;
}


.login-options > a {
    color: #7650d9;

    font-size: 12px;

    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;
}


.login-options > a:hover {
    color: #29bfc9;

    text-decoration: underline;
}


/* =========================================================
   SIGN IN BUTTON
   ========================================================= */

.login-submit-btn {
    width: 100%;

    height: 52px;

    border: 0;

    border-radius: 11px;

    color: #fff !important;

    background:
        linear-gradient(
            90deg,
            #29e9f2,
            #8b4dff
        );

    font-family: Poppins, sans-serif;

    font-size: 14px;

    font-weight: 700;

    box-shadow:
        0 8px 25px rgba(41, 233, 242, .15),
        0 8px 25px rgba(139, 77, 255, .15);

    transition: .3s ease;
}


.login-submit-btn:hover {
    color: #fff !important;

    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(41, 233, 242, .20),
        0 12px 30px rgba(139, 77, 255, .25);
}


.login-submit-btn:active {
    transform: translateY(0);
}


/* =========================================================
   GENERAL ERROR ALERT
   ========================================================= */

.login-alert {
    border-radius: 10px;

    font-size: 13px;

    margin-bottom: 0;
}


/* =========================================================
   SIGN UP
   ========================================================= */

.login-register {
    margin-top: 24px;

    padding-top: 20px;

    border-top: 1px solid #edf0f3;

    text-align: center;

    font-size: 13px;
}


.login-register span {
    color: #89919b;
}


.login-register a {
    margin-left: 5px;

    color: #7650d9;

    font-weight: 700;

    text-decoration: none;

    transition: .2s ease;
}


.login-register a:hover {
    color: #29bfc9;

    text-decoration: underline;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .login-row {
        min-height: calc(100vh - 75px);

        padding: 45px 20px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .login-row {
        min-height: calc(100vh - 70px);

        padding: 40px 15px;

        align-items: center;
    }


    .login-card {
        max-width: 430px;

        padding: 34px 28px 27px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 575px) {

    .login-row {
        min-height: calc(100vh - 65px);

        padding: 30px 12px;
    }


    .login-card {
        padding: 32px 20px 25px;

        border-radius: 18px;
    }


    .login-header {
        margin-bottom: 24px;
    }


    .login-icon {
        width: 54px;
        height: 54px;
    }


    .login-header h4 {
        font-size: 22px;
    }


    .login-input-group .form-control {
        height: 50px;
    }


    .login-submit-btn {
        height: 50px;
    }


    .login-options {
        margin-top: 16px;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

    .login-row {
        padding: 25px 10px;
    }


    .login-card {
        padding: 28px 16px 22px;
    }


    .login-header h4 {
        font-size: 21px;
    }


    .login-options .form-check-label,
    .login-options > a {
        font-size: 11px;
    }

}


/* =========================================================
   SPINNWIN REGISTER PAGE
   MATCHES LOGIN DESIGN
========================================================= */

.register-section {
    width: 100%;
    min-height: calc(100vh - 82px);

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    padding: 50px 15px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 25%,
            rgba(41, 233, 242, 0.09),
            transparent 32%
        ),
        radial-gradient(
            circle at 92% 75%,
            rgba(139, 77, 255, 0.12),
            transparent 35%
        ),
        #07131f;
}


/* Background circles */

.bg-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.bg-circle-1 {
    width: 400px;
    height: 400px;

    left: -220px;
    top: 10%;

    background: #29e9f2;

    filter: blur(180px);

    opacity: .10;
}

.bg-circle-2 {
    width: 450px;
    height: 450px;

    right: -240px;
    bottom: -120px;

    background: #8b4dff;

    filter: blur(190px);

    opacity: .13;
}


/* Container */

.register-section .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   WHITE REGISTER CARD
========================================================= */

.register-card {
    width: 100%;

    background: #ffffff;

    border-radius: 22px;

    padding: 36px 38px 30px;

    position: relative;

    border: 1px solid rgba(0, 0, 0, 0.04);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .35),
        0 5px 20px rgba(0, 0, 0, .08);

    overflow: hidden;
}


/* Top gradient */

.register-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            #29e9f2,
            #8b4dff,
            #29e9f2
        );
}


/* =========================================================
   REGISTER HEADER
========================================================= */

.register-header {
    text-align: center;

    margin-bottom: 30px;
}


.register-icon {
    width: 56px;
    height: 56px;

    margin: 0 auto 13px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #29e9f2,
            #8b4dff
        );

    box-shadow:
        0 8px 22px rgba(41, 233, 242, .18),
        0 8px 22px rgba(139, 77, 255, .18);
}


.register-icon i {
    font-size: 20px;
}


.register-header h4 {
    margin: 0;

    color: #18202b;

    font-size: 24px;

    font-weight: 700;
}


.register-header p {
    margin: 6px 0 0;

    color: #89919b;

    font-size: 12px;
}


/* =========================================================
   LABELS
========================================================= */

.register-card .form-label {
    display: block;

    margin-bottom: 7px;

    color: #353c45;

    font-size: 12px;

    font-weight: 600;
}


/* =========================================================
   INPUT GROUP
========================================================= */

.custom-input {
    display: flex;

    width: 100%;

    border-radius: 10px;

    transition: .2s ease;
}


/* Icon */

.custom-input .input-group-text {
    min-width: 46px;

    height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #929aa5;

    background: #f8fafc;

    border: 1px solid #e2e6eb;

    font-size: 13px;
}


/* First icon */

.custom-input .input-group-text:first-child {
    border-right: 0;

    border-radius: 10px 0 0 10px;
}


/* Input */

.custom-input .form-control {
    height: 50px;

    border: 1px solid #e2e6eb;

    background: #f8fafc;

    color: #202833;

    font-family: Poppins, sans-serif;

    font-size: 12px;

    box-shadow: none;

    outline: none;

    transition: .2s ease;
}


.custom-input .form-control::placeholder {
    color: #a4abb4;
}


/* Focus */

.custom-input:focus-within {
    box-shadow:
        0 0 0 3px rgba(41, 233, 242, .08);
}


.custom-input:focus-within .form-control,
.custom-input:focus-within .input-group-text {
    border-color: #29d4df;

    background: #ffffff;
}


/* =========================================================
   PASSWORD EYE
========================================================= */

.custom-input .password-toggle {
    min-width: 46px;

    border-left: 0 !important;

    border-radius: 0 10px 10px 0 !important;

    cursor: pointer;

    transition: .2s ease;
}


.custom-input .password-toggle:hover {
    color: #8b4dff;

    background: #f1f3ff;
}


/* =========================================================
   WALLET CONNECT
========================================================= */

.connect-wallet {
    height: 40px;

    align-self: center;

    margin-right: 5px;
    margin-left: 5px;

    padding: 0 15px;

    border: 0;

    border-radius: 8px !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            90deg,
            #29e9f2,
            #8b4dff
        );

    font-size: 11px;

    font-weight: 700;

    transition: .25s ease;
}


.connect-wallet:hover {
    color: #fff !important;

    transform: translateY(-1px);

    box-shadow:
        0 5px 15px rgba(139, 77, 255, .25);
}


/* =========================================================
   ERRORS
========================================================= */

.register-card .text-danger {
    display: block;

    margin-top: 5px;

    color: #dc3545 !important;

    font-size: 11px;
}


/* =========================================================
   TERMS
========================================================= */

.register-card .form-check {
    display: flex;

    align-items: flex-start;

    gap: 7px;

    margin: 0;
}


.register-card .form-check-input {
    width: 15px;
    height: 15px;

    margin: 3px 0 0;

    flex-shrink: 0;

    cursor: pointer;
}


.register-card .form-check-input:checked {
    background-color: #29cfdc;

    border-color: #29cfdc;
}


.register-card .form-check-label {
    color: #7c858f;

    font-size: 11px;

    line-height: 19px;
}


.register-card .form-check-label a {
    color: #7650d9;

    font-weight: 600;

    text-decoration: none;
}


.register-card .form-check-label a:hover {
    color: #29bfc9;

    text-decoration: underline;
}


/* =========================================================
   REGISTER BUTTON
========================================================= */

.register-btn {
    width: 100%;

    height: 50px;

    border: 0;

    border-radius: 10px;

    color: #ffffff !important;

    background:
        linear-gradient(
            90deg,
            #29e9f2,
            #8b4dff
        );

    font-family: Poppins, sans-serif;

    font-size: 13px;

    font-weight: 700;

    box-shadow:
        0 8px 22px rgba(41, 233, 242, .12),
        0 8px 22px rgba(139, 77, 255, .15);

    transition: .25s ease;
}


.register-btn:hover {
    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(41, 233, 242, .18),
        0 12px 28px rgba(139, 77, 255, .22);
}


/* =========================================================
   LOGIN LINK
========================================================= */

.register-card .text-center {
    color: #89919b;

    font-size: 12px;
}


.register-card .text-center a {
    margin-left: 4px;

    color: #7650d9;

    font-weight: 700;

    text-decoration: none;
}


.register-card .text-center a:hover {
    color: #29bfc9;

    text-decoration: underline;
}


/* =========================================================
   SUCCESS MESSAGE
========================================================= */

.register-card .alert-success {
    border-radius: 10px;

    border: 0;

    font-size: 12px;

    margin-bottom: 20px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .register-section {
        min-height: calc(100vh - 75px);

        padding: 45px 20px;
    }

    .register-card {
        padding: 35px 30px 28px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .register-section {
        min-height: calc(100vh - 70px);

        padding: 35px 15px;

        align-items: flex-start;
    }

    .register-card {
        padding: 32px 25px 27px;

        border-radius: 19px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .register-section {
        min-height: calc(100vh - 65px);

        padding: 25px 12px 35px;
    }

    .register-card {
        padding: 30px 18px 24px;

        border-radius: 17px;
    }

    .register-header {
        margin-bottom: 25px;
    }

    .register-header h4 {
        font-size: 21px;
    }

    .register-header p {
        font-size: 11px;
    }

    .register-icon {
        width: 52px;
        height: 52px;
    }

    .custom-input .form-control {
        font-size: 11px;
    }

    .connect-wallet {
        padding: 0 10px;

        font-size: 10px;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .register-section {
        padding-left: 8px;
        padding-right: 8px;
    }

    .register-card {
        padding: 27px 14px 22px;
    }

    .register-header h4 {
        font-size: 20px;
    }

}

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

.plans-section {
    position: relative;

    padding: 105px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 30%,
            rgba(41, 233, 242, .07),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 70%,
            rgba(139, 77, 255, .09),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #0a1928 0%,
            #07131f 100%
        );
}


.plans-slider-viewport {
    width: 100%;
    overflow: hidden;
}

/* Decorative glow */

.plans-section::before {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    left: -250px;
    top: 20%;

    background: #29e9f2;

    filter: blur(180px);

    opacity: .06;

    pointer-events: none;
}


.plans-section::after {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    right: -250px;
    bottom: 5%;

    background: #8b4dff;

    filter: blur(180px);

    opacity: .07;

    pointer-events: none;
}


/* =========================================================
   HEADING
========================================================= */

.section-heading {
    position: relative;

    z-index: 2;

    max-width: 700px;

    margin: 0 auto 55px;

    text-align: center;
}


.plans-subtitle {
    display: inline-block;

    margin-bottom: 12px;

    color: #29e9f2;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;
}


.section-heading h2 {
    margin: 0;

    color: #fff;

    font-size: 44px;

    line-height: 1.2;

    font-weight: 800;
}


.section-heading h2 span {
    color: #29e9f2;
}


.section-heading p {
    max-width: 570px;

    margin: 16px auto 0;

    color: #8d9baa;

    font-size: 14px;

    line-height: 25px;
}


/* =========================================================
   SLIDER
========================================================= */

.plans-slider-wrapper {
    position: relative;

    z-index: 2;

    padding: 0 55px;
}


.plans-slider {
    display: flex;
    transition: transform 0.7s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}


.plan-slide {
    flex: 0 0 33.333333%;

    padding: 10px;

    box-sizing: border-box;
}


/* =========================================================
   PLAN CARD
========================================================= */

.plan-card {
    min-height: 420px;

    height: 100%;

    position: relative;

    padding: 32px 25px 25px;

    text-align: center;

    overflow: hidden;

    border-radius: 22px;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        );

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

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


/* Card glow */

.plan-card::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -110px;
    right: -90px;

    border-radius: 50%;

    background: #29e9f2;

    filter: blur(70px);

    opacity: .10;

    transition: .4s ease;
}


.plan-card::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    left: -90px;
    bottom: -90px;

    border-radius: 50%;

    background: #8b4dff;

    filter: blur(65px);

    opacity: .10;
}


.plan-card:hover {
    transform: translateY(-8px);

    border-color: rgba(41,233,242,.35);

    box-shadow:
        0 25px 60px rgba(0,0,0,.35),
        0 0 35px rgba(41,233,242,.08);
}


/* =========================================================
   PLAN NUMBER
========================================================= */

.plan-number {
    position: absolute;

    top: 12px;
    right: 18px;

    color: #fff;

    font-size: 42px;

    line-height: 1;

    font-weight: 800;

    opacity: .045;
}


/* =========================================================
   POPULAR BADGE
========================================================= */

.popular-badge {
    position: absolute;

    top: 15px;
    left: 15px;

    padding: 5px 12px;

    border-radius: 20px;

    color: #07131f;

    background: #29e9f2;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .6px;

    box-shadow:
        0 5px 15px rgba(41,233,242,.15);
}


/* =========================================================
   PLAN ICON
========================================================= */

.plan-icon {
    width: 62px;
    height: 62px;

    margin: 0 auto 18px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 18px;

    color: #29e9f2;

    background:
        linear-gradient(
            135deg,
            rgba(41,233,242,.12),
            rgba(139,77,255,.14)
        );

    border: 1px solid rgba(41,233,242,.14);

    font-size: 23px;

    position: relative;

    z-index: 2;
}


.plan-card h3 {
    margin: 0 0 12px;

    color: #fff;

    font-size: 21px;

    font-weight: 700;

    position: relative;

    z-index: 2;
}


/* =========================================================
   PRICE
========================================================= */

.plan-price {
    color: #29e9f2;

    font-size: 36px;

    font-weight: 800;

    line-height: 1;

    position: relative;

    z-index: 2;
}


.plan-price span {
    font-size: 17px;
}


.plan-period {
    margin-top: 7px;

    color: #758392;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1px;
}


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

.plan-card ul {
    list-style: none;

    padding: 0;

    margin: 23px 0;

    text-align: left;

    position: relative;

    z-index: 2;
}


.plan-card li {
    display: flex;

    align-items: center;

    gap: 8px;

    padding: 8px 0;

    color: #aeb9c5;

    font-size: 11px;

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


.plan-card li:last-child {
    border-bottom: 0;
}


.plan-card li i {
    flex-shrink: 0;

    color: #29e9f2;

    font-size: 9px;
}


/* =========================================================
   BUTTON
========================================================= */

.plan-btn {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 43px;

    padding: 10px 15px;

    border-radius: 9px;

    color: #fff !important;

    background:
        linear-gradient(
            90deg,
            #29e9f2,
            #8b4dff
        );

    font-size: 11px;

    font-weight: 700;

    text-decoration: none;

    position: relative;

    z-index: 2;

    transition: .3s ease;
}


.plan-btn:hover {
    color: #fff !important;

    transform: translateY(-2px);

    box-shadow:
        0 8px 25px rgba(41,233,242,.18);
}


/* =========================================================
   FEATURED CARD
========================================================= */

.featured-plan {
    border-color: rgba(41,233,242,.30);

    background:
        linear-gradient(
            145deg,
            rgba(41,233,242,.075),
            rgba(139,77,255,.045)
        );

    box-shadow:
        0 20px 55px rgba(41,233,242,.08);
}


.featured-plan .plan-icon {
    background:
        linear-gradient(
            135deg,
            rgba(41,233,242,.20),
            rgba(139,77,255,.20)
        );

    border-color: rgba(41,233,242,.30);
}


/* =========================================================
   ARROWS
========================================================= */

.plan-arrow {
    width: 44px;
    height: 44px;

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 10;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(41,233,242,.22);

    border-radius: 50%;

    background: rgba(7,19,31,.85);

    backdrop-filter: blur(10px);

    color: #29e9f2;

    cursor: pointer;

    transition: .3s ease;
}


.plan-arrow:hover {
    color: #07131f;

    background: #29e9f2;

    border-color: #29e9f2;

    box-shadow:
        0 0 25px rgba(41,233,242,.25);
}


.plan-prev {
    left: 0;
}


.plan-next {
    right: 0;
}


/* =========================================================
   DOTS
========================================================= */

.plan-dots {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 25px;
}


.plan-dot {
    width: 7px;
    height: 7px;

    padding: 0;

    border: 0;

    border-radius: 10px;

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

    cursor: pointer;

    transition: .3s ease;
}


.plan-dot.active {
    width: 24px;

    background: #29e9f2;

    box-shadow:
        0 0 10px rgba(41,233,242,.25);
}


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

@media (max-width: 991px) {

    .plans-section {
        padding: 85px 0;
    }

    .section-heading h2 {
        font-size: 38px;
    }

    .plan-slide {
        flex: 0 0 50%;
    }

}


@media (max-width: 767px) {

    .plans-slider-wrapper {
        padding: 0 45px;
    }

    .plan-slide {
        flex: 0 0 100%;
    }

    .plan-card {
        min-height: 410px;
    }

}


@media (max-width: 575px) {

    .plans-section {
        padding: 65px 0;
    }

    .section-heading {
        padding: 0 20px;

        margin-bottom: 35px;
    }

    .section-heading h2 {
        font-size: 30px;
    }

    .section-heading p {
        font-size: 12px;

        line-height: 22px;
    }

    .plans-slider-wrapper {
        padding: 0 38px;
    }

    .plan-card {
        min-height: 400px;

        padding: 30px 22px 23px;

        border-radius: 19px;
    }

    .plan-price {
        font-size: 34px;
    }

    .plan-arrow {
        width: 34px;
        height: 34px;

        font-size: 11px;
    }

    .plan-prev {
        left: 2px;
    }

    .plan-next {
        right: 2px;
    }

}

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

.site-footer {
    position: relative;

    padding: 80px 0 0;

    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(41,233,242,.05),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #07131f,
            #040b12
        );

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

    overflow: hidden;
}


/* Top glow */

.site-footer::before {
    content: "";

    position: absolute;

    top: -150px;
    left: 50%;

    width: 500px;
    height: 200px;

    transform: translateX(-50%);

    background: #29e9f2;

    filter: blur(150px);

    opacity: .035;

    pointer-events: none;
}


/* Brand */

.footer-brand {
    max-width: 360px;
}


.footer-logo {
    display: inline-block;

    margin-bottom: 16px;

    color: #fff !important;

    font-size: 28px;

    font-weight: 800;

    text-decoration: none;
}


.footer-logo span {
    color: #29e9f2;
}


.footer-brand p {
    margin: 0;

    color: #7f8d9b;

    font-size: 12px;

    line-height: 24px;
}


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

.footer-social {
    display: flex;

    gap: 9px;

    margin-top: 20px;
}


.footer-social a {
    width: 37px;
    height: 37px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    color: #8e9aa7;

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

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

    text-decoration: none;

    transition: .3s ease;
}


.footer-social a:hover {
    color: #07131f;

    background: #29e9f2;

    border-color: #29e9f2;

    transform: translateY(-3px);
}


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

.footer-column h4 {
    margin: 0 0 20px;

    color: #fff;

    font-size: 14px;

    font-weight: 700;
}


.footer-column ul {
    list-style: none;

    margin: 0;
    padding: 0;
}


.footer-column li {
    margin-bottom: 12px;
}


.footer-column li a {
    color: #7f8d9b;

    font-size: 12px;

    text-decoration: none;

    transition: .25s ease;
}


.footer-column li a:hover {
    color: #29e9f2;

    padding-left: 4px;
}


/* =========================================================
   CONTACT
========================================================= */

.footer-contact > div {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 14px;

    color: #7f8d9b;

    font-size: 12px;

    line-height: 20px;
}


.footer-contact i {
    flex-shrink: 0;

    width: 18px;

    margin-top: 2px;

    color: #29e9f2;

    text-align: center;
}


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

.footer-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 60px;

    padding: 20px 0;

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

    color: #596776;

    font-size: 10px;
}


.footer-bottom-links {
    display: flex;

    gap: 20px;
}


.footer-bottom-links a {
    color: #596776;

    text-decoration: none;

    transition: .2s ease;
}


.footer-bottom-links a:hover {
    color: #29e9f2;
}


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

@media (max-width: 767px) {

    .site-footer {
        padding-top: 60px;
    }

    .footer-brand {
        max-width: none;

        margin-bottom: 35px;
    }

    .footer-column {
        margin-bottom: 30px;
    }

    .footer-bottom {
        flex-direction: column;

        text-align: center;

        margin-top: 30px;
    }

    .footer-bottom-links {
        gap: 15px;
    }

}

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

.about-section {
    position: relative;
    padding: 110px 0;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(41, 233, 242, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 30%,
            rgba(139, 77, 255, 0.08),
            transparent 30%
        ),
        #07131f;
}


/* About image */

.about-image-wrapper {
    position: relative;
    padding: 15px;
}

.about-image {
    width: 100%;
    max-width: 520px;
    height: 420px;

    object-fit: cover;

    border-radius: 28px;

    border: 1px solid rgba(41, 233, 242, 0.18);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.35),
        0 0 40px rgba(41, 233, 242, 0.08);

    position: relative;
    z-index: 2;
}


/* Glow behind image */

.about-image-wrapper::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    left: -50px;
    top: 50%;

    transform: translateY(-50%);

    background: #29e9f2;

    filter: blur(130px);

    opacity: .12;
}


/* Decorative border */

.about-image-wrapper::after {
    content: "";

    position: absolute;

    width: 90%;
    height: 90%;

    right: -5px;
    bottom: -5px;

    border: 1px solid rgba(139, 77, 255, .25);

    border-radius: 28px;

    z-index: 1;
}


/* About content */

.about-content {
    padding-left: 35px;
}


.about-subtitle {
    display: inline-block;

    margin-bottom: 15px;

    color: #29e9f2;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 3px;
}


.about-content h2 {
    margin: 0 0 20px;

    color: #fff;

    font-size: 45px;

    line-height: 1.2;

    font-weight: 800;
}


.about-content h2 span {
    color: #29e9f2;
}


.about-content > p {
    margin-bottom: 28px;

    color: #aeb9c6;

    font-size: 15px;

    line-height: 28px;
}


/* About features */

.about-features {
    display: grid;

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

    gap: 15px;

    margin-bottom: 30px;
}


.about-feature {
    padding: 18px;

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

    border-radius: 14px;

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

    transition: .3s ease;
}


.about-feature:hover {
    transform: translateY(-4px);

    border-color: rgba(41,233,242,.25);

    background: rgba(41,233,242,.05);
}


.about-feature i {
    display: inline-flex;

    width: 35px;
    height: 35px;

    align-items: center;
    justify-content: center;

    margin-bottom: 10px;

    border-radius: 9px;

    color: #29e9f2;

    background: rgba(41,233,242,.08);
}


.about-feature h4 {
    margin: 0 0 5px;

    color: #fff;

    font-size: 14px;

    font-weight: 700;
}


.about-feature p {
    margin: 0;

    color: #8795a4;

    font-size: 11px;

    line-height: 19px;
}


/* About button */

.about-btn {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 13px 25px;

    border-radius: 10px;

    color: #fff !important;

    background:
        linear-gradient(
            90deg,
            #29e9f2,
            #8b4dff
        );

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

    box-shadow:
        0 8px 25px rgba(41,233,242,.10);

    transition: .3s ease;
}


.about-btn:hover {
    color: #fff !important;

    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(139,77,255,.20);
}


/* About responsive */

@media (max-width: 991px) {

    .about-section {
        padding: 85px 0;
    }

    .about-content {
        padding-left: 0;
        margin-top: 45px;
    }

    .about-content h2 {
        font-size: 38px;
    }

    .about-image {
        max-width: 100%;
    }

}


@media (max-width: 575px) {

    .about-section {
        padding: 65px 0;
    }

    .about-content {
        margin-top: 30px;
    }

    .about-content h2 {
        font-size: 30px;
    }

    .about-content > p {
        font-size: 13px;
        line-height: 25px;
    }

    .about-features {
        grid-template-columns: 1fr;
    }

    .about-image {
        height: 300px;
        border-radius: 20px;
    }

}


/* =========================================================
   SPINNWIN FORGOT PASSWORD
========================================================= */

.forgot-section {

    width: 100%;

    min-height: calc(100vh - 82px);

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    padding: 60px 15px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 25%,
            rgba(41, 233, 242, 0.09),
            transparent 32%
        ),
        radial-gradient(
            circle at 92% 75%,
            rgba(139, 77, 255, 0.13),
            transparent 35%
        ),
        #07131f;
}


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

.forgot-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;
}


.forgot-glow-1 {

    width: 400px;

    height: 400px;

    left: -220px;

    top: 10%;

    background: #29e9f2;

    filter: blur(180px);

    opacity: .10;
}


.forgot-glow-2 {

    width: 450px;

    height: 450px;

    right: -240px;

    bottom: -150px;

    background: #8b4dff;

    filter: blur(190px);

    opacity: .13;
}


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

.forgot-section .container {

    position: relative;

    z-index: 2;
}


/* =========================================================
   FORGOT CARD
========================================================= */

.forgot-card {

    width: 100%;

    background: #ffffff;

    border-radius: 22px;

    padding: 40px 36px 30px;

    position: relative;

    overflow: hidden;

    border: 1px solid rgba(0, 0, 0, .04);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .35),
        0 5px 20px rgba(0, 0, 0, .08);
}


/* Top Gradient Line */

.forgot-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            #29e9f2,
            #8b4dff,
            #29e9f2
        );
}


/* =========================================================
   HEADER
========================================================= */

.forgot-header {

    text-align: center;

    margin-bottom: 30px;
}


/* Icon */

.forgot-icon {

    width: 60px;

    height: 60px;

    margin: 0 auto 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #29e9f2,
            #8b4dff
        );

    box-shadow:
        0 8px 25px rgba(41, 233, 242, .22),
        0 8px 25px rgba(139, 77, 255, .20);
}


.forgot-icon i {

    font-size: 22px;
}


/* Heading */

.forgot-header h4 {

    margin: 0;

    color: #18202b;

    font-size: 25px;

    font-weight: 700;
}


/* Description */

.forgot-header p {

    max-width: 330px;

    margin: 8px auto 0;

    color: #7d8793;

    font-size: 12px;

    line-height: 20px;
}


/* =========================================================
   FORM
========================================================= */

.forgot-field {

    margin-bottom: 22px;
}


.forgot-field .form-label {

    display: block;

    margin-bottom: 8px;

    color: #29313b;

    font-size: 13px;

    font-weight: 600;
}


/* =========================================================
   INPUT
========================================================= */

.forgot-input {

    position: relative;

    width: 100%;
}


.forgot-input .form-control {

    width: 100%;

    height: 52px;

    padding-left: 44px;

    padding-right: 15px;

    border: 1px solid #e1e5ea;

    border-radius: 11px;

    background: #f8fafc;

    color: #202833;

    font-family: Poppins, sans-serif;

    font-size: 13px;

    box-shadow: none;

    outline: none;

    transition: .25s ease;
}


.forgot-input .form-control::placeholder {

    color: #a2a9b2;
}


.forgot-input .form-control:hover {

    border-color: #cdd3db;

    background: #ffffff;
}


.forgot-input .form-control:focus {

    border-color: #29cfdc;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(41, 233, 242, .10);
}


/* =========================================================
   EMAIL ICON
========================================================= */

.forgot-input-icon {

    position: absolute;

    left: 16px;

    top: 50%;

    transform: translateY(-50%);

    z-index: 5;

    color: #929aa5;

    font-size: 14px;

    pointer-events: none;
}


.forgot-input:focus-within
.forgot-input-icon {

    color: #29cfdc;
}


/* =========================================================
   ERROR
========================================================= */

.forgot-error {

    display: block;

    margin-top: 6px;

    color: #dc3545;

    font-size: 11px;
}


/* =========================================================
   ALERT
========================================================= */

.forgot-alert {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 12px;

    margin-bottom: 20px;

    border-radius: 9px;

    font-size: 12px;

    line-height: 18px;
}


.forgot-alert i {

    font-size: 14px;

    flex-shrink: 0;
}


.forgot-alert.success {

    color: #146c43;

    background: #d1e7dd;

    border: 1px solid #badbcc;
}


.forgot-alert.error {

    color: #842029;

    background: #f8d7da;

    border: 1px solid #f5c2c7;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.forgot-submit-btn {

    width: 100%;

    height: 52px;

    border: 0;

    border-radius: 11px;

    color: #ffffff !important;

    background:
        linear-gradient(
            90deg,
            #29e9f2,
            #8b4dff
        );

    font-family: Poppins, sans-serif;

    font-size: 13px;

    font-weight: 700;

    box-shadow:
        0 8px 25px rgba(41, 233, 242, .15),
        0 8px 25px rgba(139, 77, 255, .15);

    transition: .3s ease;

    cursor: pointer;
}


.forgot-submit-btn:hover {

    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(41, 233, 242, .20),
        0 12px 30px rgba(139, 77, 255, .25);
}


.forgot-submit-btn:active {

    transform: translateY(0);
}


/* =========================================================
   BACK TO LOGIN
========================================================= */

.forgot-login {

    margin-top: 25px;

    padding-top: 20px;

    border-top: 1px solid #edf0f3;

    text-align: center;

    color: #89919b;

    font-size: 12px;
}


.forgot-login a {

    margin-left: 5px;

    color: #7650d9;

    font-weight: 700;

    text-decoration: none;

    transition: .2s ease;
}


.forgot-login a:hover {

    color: #29bfc9;

    text-decoration: underline;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .forgot-section {

        min-height: calc(100vh - 75px);

        padding: 50px 20px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .forgot-section {

        min-height: calc(100vh - 70px);

        padding: 40px 15px;
    }


    .forgot-card {

        padding: 35px 28px 28px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .forgot-section {

        min-height: calc(100vh - 65px);

        padding: 30px 12px;
    }


    .forgot-card {

        padding: 32px 20px 25px;

        border-radius: 18px;
    }


    .forgot-header {

        margin-bottom: 25px;
    }


    .forgot-icon {

        width: 54px;

        height: 54px;
    }


    .forgot-header h4 {

        font-size: 22px;
    }


    .forgot-header p {

        font-size: 11px;

        line-height: 18px;
    }


    .forgot-input .form-control {

        height: 50px;
    }


    .forgot-submit-btn {

        height: 50px;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 360px) {

    .forgot-section {

        padding: 25px 10px;
    }


    .forgot-card {

        padding: 28px 16px 22px;
    }


    .forgot-header h4 {

        font-size: 21px;
    }

}

/* =========================================================
   SPINNWIN RESET PASSWORD / OTP
========================================================= */

.reset-section {

    width: 100%;

    min-height: calc(100vh - 82px);

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    padding: 60px 15px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 25%,
            rgba(41, 233, 242, 0.09),
            transparent 32%
        ),
        radial-gradient(
            circle at 92% 75%,
            rgba(139, 77, 255, 0.13),
            transparent 35%
        ),
        #07131f;
}


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

.reset-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.reset-glow-1 {

    width: 400px;

    height: 400px;

    left: -220px;

    top: 10%;

    background: #29e9f2;

    filter: blur(180px);

    opacity: .10;
}


.reset-glow-2 {

    width: 450px;

    height: 450px;

    right: -240px;

    bottom: -150px;

    background: #8b4dff;

    filter: blur(190px);

    opacity: .13;
}


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

.reset-section .container {

    position: relative;

    z-index: 2;
}


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

.reset-card {

    width: 100%;

    background: #ffffff;

    border-radius: 22px;

    padding: 40px 36px 30px;

    position: relative;

    overflow: hidden;

    border: 1px solid rgba(0, 0, 0, .04);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .35),
        0 5px 20px rgba(0, 0, 0, .08);
}


/* Top Gradient */

.reset-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            #29e9f2,
            #8b4dff,
            #29e9f2
        );
}


/* =========================================================
   HEADER
========================================================= */

.reset-header {

    text-align: center;

    margin-bottom: 30px;
}


.reset-icon {

    width: 60px;

    height: 60px;

    margin: 0 auto 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #29e9f2,
            #8b4dff
        );

    box-shadow:
        0 8px 25px rgba(41, 233, 242, .22),
        0 8px 25px rgba(139, 77, 255, .20);
}


.reset-icon i {

    font-size: 22px;
}


.reset-header h4 {

    margin: 0;

    color: #18202b;

    font-size: 25px;

    font-weight: 700;
}


.reset-header p {

    max-width: 330px;

    margin: 8px auto 0;

    color: #7d8793;

    font-size: 12px;

    line-height: 20px;
}


/* =========================================================
   FORM FIELD
========================================================= */

.reset-field {

    margin-bottom: 20px;
}


.reset-field .form-label {

    display: block;

    margin-bottom: 8px;

    color: #29313b;

    font-size: 13px;

    font-weight: 600;
}


/* =========================================================
   INPUT
========================================================= */

.reset-input {

    position: relative;

    width: 100%;
}


.reset-input .form-control {

    width: 100%;

    height: 52px;

    padding-left: 44px;

    padding-right: 45px;

    border: 1px solid #e1e5ea;

    border-radius: 11px;

    background: #f8fafc;

    color: #202833;

    font-family: Poppins, sans-serif;

    font-size: 13px;

    box-shadow: none;

    outline: none;

    transition: .25s ease;
}


.reset-input .form-control::placeholder {

    color: #a2a9b2;
}


.reset-input .form-control:hover {

    border-color: #cdd3db;

    background: #ffffff;
}


.reset-input .form-control:focus {

    border-color: #29cfdc;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(41, 233, 242, .10);
}


/* =========================================================
   INPUT ICON
========================================================= */

.reset-input-icon {

    position: absolute;

    left: 16px;

    top: 50%;

    transform: translateY(-50%);

    z-index: 5;

    color: #929aa5;

    font-size: 14px;

    pointer-events: none;

    transition: .2s ease;
}


.reset-input:focus-within
.reset-input-icon {

    color: #29cfdc;
}


/* =========================================================
   OTP
========================================================= */

.otp-input {

    letter-spacing: 5px;

    font-weight: 600;

    text-align: left;
}


/* =========================================================
   PASSWORD TOGGLE
========================================================= */

.reset-password-toggle {

    position: absolute;

    right: 15px;

    top: 50%;

    transform: translateY(-50%);

    z-index: 10;

    color: #929aa5;

    cursor: pointer;

    transition: .2s ease;
}


.reset-password-toggle:hover {

    color: #8b4dff;
}


/* =========================================================
   ERROR
========================================================= */

.reset-error {

    display: block;

    margin-top: 6px;

    color: #dc3545;

    font-size: 11px;

    line-height: 16px;
}


/* =========================================================
   GENERAL ERROR
========================================================= */

.reset-alert {

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 10px 12px;

    margin-bottom: 20px;

    border-radius: 9px;

    color: #842029;

    background: #f8d7da;

    border: 1px solid #f5c2c7;

    font-size: 12px;

    line-height: 18px;
}


.reset-alert i {

    flex-shrink: 0;

    font-size: 14px;
}


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

.reset-submit-btn {

    width: 100%;

    height: 52px;

    border: 0;

    border-radius: 11px;

    color: #ffffff !important;

    background:
        linear-gradient(
            90deg,
            #29e9f2,
            #8b4dff
        );

    font-family: Poppins, sans-serif;

    font-size: 13px;

    font-weight: 700;

    box-shadow:
        0 8px 25px rgba(41, 233, 242, .15),
        0 8px 25px rgba(139, 77, 255, .15);

    transition: .3s ease;

    cursor: pointer;
}


.reset-submit-btn:hover {

    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(41, 233, 242, .20),
        0 12px 30px rgba(139, 77, 255, .25);
}


.reset-submit-btn:active {

    transform: translateY(0);
}


/* =========================================================
   BACK TO LOGIN
========================================================= */

.reset-login {

    margin-top: 25px;

    padding-top: 20px;

    border-top: 1px solid #edf0f3;

    text-align: center;

    color: #89919b;

    font-size: 12px;
}


.reset-login a {

    margin-left: 5px;

    color: #7650d9;

    font-weight: 700;

    text-decoration: none;

    transition: .2s ease;
}


.reset-login a:hover {

    color: #29bfc9;

    text-decoration: underline;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .reset-section {

        min-height: calc(100vh - 75px);

        padding: 50px 20px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .reset-section {

        min-height: calc(100vh - 70px);

        padding: 40px 15px;
    }


    .reset-card {

        padding: 35px 28px 28px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .reset-section {

        min-height: calc(100vh - 65px);

        padding: 30px 12px;
    }


    .reset-card {

        padding: 32px 20px 25px;

        border-radius: 18px;
    }


    .reset-header {

        margin-bottom: 25px;
    }


    .reset-icon {

        width: 54px;

        height: 54px;
    }


    .reset-header h4 {

        font-size: 22px;
    }


    .reset-header p {

        font-size: 11px;

        line-height: 18px;
    }


    .reset-input .form-control {

        height: 50px;
    }


    .reset-submit-btn {

        height: 50px;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 360px) {

    .reset-section {

        padding: 25px 10px;
    }


    .reset-card {

        padding: 28px 16px 22px;
    }


    .reset-header h4 {

        font-size: 21px;
    }

}

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

.faq-section {
    position: relative;

    padding: 100px 0;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #07131f 0%,
            #0b1929 50%,
            #07131f 100%
        );
}


/* Background glow */

.faq-section::before {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    left: -250px;
    top: 15%;

    background: #29e9f2;

    filter: blur(180px);

    opacity: .08;

    pointer-events: none;
}


.faq-section::after {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    right: -250px;
    bottom: 0;

    background: #8b4dff;

    filter: blur(180px);

    opacity: .10;

    pointer-events: none;
}


/* =========================================================
   FAQ HEADING
========================================================= */

.faq-heading {
    position: relative;

    z-index: 2;

    max-width: 700px;

    margin: 0 auto 50px;
}


.faq-subtitle {
    display: inline-block;

    margin-bottom: 12px;

    color: #29e9f2;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 3px;
}


.faq-heading h2 {
    margin: 0;

    color: #fff;

    font-size: 46px;

    font-weight: 700;

    line-height: 1.2;
}


.faq-heading h2 span {
    color: #29e9f2;
}


.faq-heading p {
    max-width: 600px;

    margin: 15px auto 0;

    color: #9ca9b8;

    font-size: 14px;

    line-height: 25px;
}


/* =========================================================
   FAQ WRAPPER
========================================================= */

.faq-wrapper {
    position: relative;

    z-index: 2;

    max-width: 850px;

    margin: 0 auto;
}


/* =========================================================
   FAQ ITEM
========================================================= */

.faq-item {
    margin-bottom: 15px;

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

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.02)
        );

    overflow: hidden;

    transition: .3s ease;
}


.faq-item:hover {
    border-color: rgba(41,233,242,.25);

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


.faq-item.active {
    border-color: rgba(41,233,242,.35);

    box-shadow:
        0 10px 35px rgba(41,233,242,.06);
}


/* =========================================================
   QUESTION
========================================================= */

.faq-question {
    width: 100%;

    min-height: 70px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 20px 25px;

    border: 0;

    outline: none;

    background: transparent;

    color: #fff;

    font-family: Poppins, sans-serif;

    font-size: 14px;

    font-weight: 600;

    text-align: left;

    cursor: pointer;
}


.faq-question:hover {
    color: #29e9f2;
}


/* =========================================================
   PLUS ICON
========================================================= */

.faq-icon {
    width: 32px;
    height: 32px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border: 1px solid rgba(41,233,242,.25);

    color: #29e9f2;

    font-size: 11px;

    transition: .3s ease;
}


.faq-item.active .faq-icon {
    color: #07131f;

    background: #29e9f2;

    transform: rotate(45deg);

    box-shadow:
        0 0 15px rgba(41,233,242,.20);
}


/* =========================================================
   ANSWER
========================================================= */

.faq-answer {
    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows .35s ease;
}


.faq-answer p {
    overflow: hidden;

    margin: 0;

    padding: 0 25px;

    color: #aeb9c6;

    font-size: 13px;

    line-height: 25px;

    transition:
        padding .35s ease;
}


.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
}


.faq-item.active .faq-answer p {
    padding:
        0 25px 22px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .faq-section {
        padding: 80px 20px;
    }

    .faq-heading h2 {
        font-size: 40px;
    }

    .faq-wrapper {
        max-width: 750px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575px) {

    .faq-section {
        padding: 65px 12px;
    }

    .faq-heading {
        margin-bottom: 35px;
    }

    .faq-subtitle {
        font-size: 11px;

        letter-spacing: 2px;
    }

    .faq-heading h2 {
        font-size: 30px;
    }

    .faq-heading p {
        font-size: 12px;

        line-height: 22px;
    }

    .faq-question {
        min-height: 62px;

        padding: 17px 16px;

        font-size: 12px;
    }

    .faq-icon {
        width: 28px;
        height: 28px;

        font-size: 9px;
    }

    .faq-answer p {
        padding-left: 16px;
        padding-right: 16px;

        font-size: 11px;

        line-height: 21px;
    }

    .faq-item.active .faq-answer p {
        padding:
            0 16px 18px;
    }

}