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

:root {
    --primaryColor: #673BB7;
    --whiteColor: #FFF;
    --textBlack2: color: rgba(0, 0, 0, 0.60);
}

* {
    font-family: 'Poppins', sans-serif;
}

nav {
    box-shadow: 0px 0px 48px 0px rgba(6, 28, 61, 0.05);
}

nav ul li a {
    font-weight: 500;
}

nav ul li a.active {
    position: relative;
    display: block;
    color: var(--primaryColor) !important;
}

nav ul li a.active::after {
    content: "";
    background-color: var(--primaryColor);
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: -19px;
    z-index: 100;
}

.main-banner {
    padding: 7% 1%;
    background-image: url('../images/banner.png');
    background-position: center;
    background-repeat: no-repeats;
    background-size: 100% 100%;
}


.get-started-box {
    padding: 2%;
}

.get-started-header ul {
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px;
    margin-bottom: 10px;
}

.get-started-header ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primaryColor);
    font-weight: 600;
    transition: .4s all;
}

@media(min-width:991px) {
    .get-started-header ul li.active {
        transform: translateY(-100%) scale(1.1);
    }
}

.get-started-header ul li.active {
    transform: translateY(-10%) scale(1.1);
}

.get-started-header ul li.active svg {
    display: none;
}

.get-started-body {
    background: var(--whiteColor);
    box-shadow: 0px 8px 26.7px 0px rgba(0, 0, 0, 0.10);
}

.get-started-body img {
    width: 40%;
    display: block;
    margin: auto;
}

.loader {
    width: 0%;
    height: 2px;
    background-color: var(--primaryColor);
    display: block;
    transition: 4s all;
}

.md-banner {
    background-image: url('../images/md-banner.png');
    background-position: center;
    background-size: 100% 100%;
    border-radius: 30px;
    overflow: hidden;
}

.subscription-banner {
    background-image: url('../images/subscription-banner.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.subscription-box {
    border-radius: 13px;
    background: #FFF;
    box-shadow: 0px 0px 12.3px 0px rgba(0, 0, 0, 0.25);
    max-width: 340px;
    width: 100%;
    padding: 0px;
}

.subscription-type {
    padding: 15%;
    border-radius: 0px 0px 60% 60%;
    background: linear-gradient(90deg, #683AB1 7.29%, rgba(104, 58, 177, 0.62) 93.18%), url('../images/subscription.png');
    background-size: 100%;
    background-repeat: no-repeat;
}

.subscription-detail {
    padding: 25px 30px;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.subscription-detail ul {
    list-style-type: none;
    padding: 0px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
}

.subscription-detail button {
    width: 70%;
}

.modal-content {
    border-radius: 0px;
    border: none;
}

.authform {
    padding: 10%;
}

.authform form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.authform input {
    border: none;
    background-color: #EFEFEF;
    padding: 10px;
    width: 100%;
}

.authform input::placeholder {
    font-size: small;
}
.authform input:focus{
    outline: 0;
}

.authform button {
    width: 100%;
    border: 1px solid #683AB1;
    color: #FFF;
    border-radius: 62px;
    background: #683AB1;
    padding: 10px;
    transition: .4s all;
}

.authform button:hover {
    background-color: transparent;
    color: #683AB1;
}
.navbar-toggler:focus{
    box-shadow: none;
}

footer {
    background-color: #061C3D;
    padding: 4% 0px;
    padding-bottom: 2.5%;
}

.footer-links ul {
    list-style-type: none;
    padding: 0px;
}

.footer-links ul li a {
    text-decoration: none;
    color: #6A778B;
    margin-bottom: 10px;
    display: block;
    transition: .4s all;
}

.footer-links ul li a:hover {
    color: #FFF;
}

.footer-links h4 {
    margin-bottom: 30px;
}

.footer-links p {
    color: #6A778B;
}

.copyright {
    border-top: 1px solid #E6E8EC;
    color: #FFF;
    text-align: center;
    padding-top: 40px;
}