@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* 
font-family: "Montserrat", sans-serif;
font-family: "Manrope", sans-serif;
font-family: "Poppins", sans-serif;
*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a{
    text-decoration: none  !important;
}
h1,h2,h3,h4,h5,h6{
    font-family: "Manrope", sans-serif;
}
p,a,span,label,input{
    font-family: "Poppins", sans-serif;
}
body{
    background-color: #fff;
}
.logo{
    font-family: "Montserrat", sans-serif;
}

/* Login page code start */
.login-container{
    margin: auto;
    width: 350px;
    padding: 30px 0 30px 0;
}
.login-page .logo{
    color: #4F46E5;
    font-size: 26px;
    font-weight: 400;
    padding-top: 15px;
}
.login-container h1{
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 30px;
}
.login-container label, .settings label{
    color: #1F2937;
    font-size: 14px;
}
.login-container input, .settings input{
    border-radius: 4px;
    border: 1px solid #ebebeb;
    padding: 8px 16px;
    font-size: 15px;
}
.login-container #eyeIcon, .settings .icon-e{
    font-size: 13px;
    color: #fff;
}
.login-container #togglePassword, .settings .input-group-text{
    background-color: #10B981;
}
.login-container input::placeholder{
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    color: #6B7280;
}
.login-container .btn{
    font-family: "Manrope", sans-serif;
    width: 100%;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 700;
}
.login-container .btn-primary{
    background-color: #4F46E5;
    margin-bottom: 40px;
}
.login-container hr{
    margin: 10px 0 40px;
}
.login-container .btn-secondary{
    background-color: #F4F4F4;
    border: none;
    color: #1F2937;
}
/* Login page code end */



/* Home page code start */
.navbar{
    padding: 4px 35px !important;
    background-color: #1f2937de;
    position: fixed;
    width: 100%;
    backdrop-filter: blur(10px); 
    z-index: 9999;
}
.navbar .logo{
    color: #fff;
    font-size: 24px;
    font-weight: 400;
}
.nav-profile{
    align-items: center;
}
.nav-profile p{
    margin: 0 0 0 5px;
    color: #fff;
    font-size: 14px;
}
.nav-profile i{
    border: 1px solid #fff;
    width: 28px;
    height: 28px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}
.navbar .nav-link{
    font-size: 15px;
    color: #fff;
    padding: 0 20px !important;
}
.navbar .nav-link.active{
    color: #10B981 !important;
    font-weight: 500;
}
.navbar-toggler:focus{ 
    box-shadow: none;
}
.navbar-toggler{
    border: none;
    font-size: 16px;
}
@keyframes hero-gradient-animation {
    0% {
        --s-start-0: 19.135897602991477%;
        --s-end-0: 90%;
        --x-0: 102%;
        --c-0: hsla(254.4578313253012, 46%, 34%, 0);
        --y-0: 81%;
        --y-2: 87%;
        --x-2: 89%;
        --s-start-2: 19%;
        --s-end-2: 68.6079947648648%;
        --c-2: hsla(254.4578313253012, 46%, 34%, 1);
        --y-3: 8%;
        --x-3: 8%;
        --c-3: hsla(215.3846153846154, 93%, 77%, 1);
        --s-start-3: 15.33994806356517%;
        --s-end-3: 72.72834165653069%;
    }

    100% {
        --s-start-0: 10.200824358459853%;
        --s-end-0: 60.91248103602826%;
        --x-0: 5%;
        --c-0: hsla(255.21126760563376, 34%, 40%, 0);
        --y-0: 90%;
        --y-2: 76%;
        --x-2: 10%;
        --s-start-2: 24%;
        --s-end-2: 64.96034012297672%;
        --c-2: hsla(255.21126760563376, 34%, 40%, 1);
        --y-3: 32%;
        --x-3: 95%;
        --c-3: hsla(215.3846153846154, 93%, 77%, 1);
        --s-start-3: 7.665123802620919%;
        --s-end-3: 60.59163058161022%;
    }
}

@property --s-start-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 19.135897602991477%
}

@property --s-end-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 90%
}

@property --x-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 102%
}

@property --c-0 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(254.4578313253012, 46%, 34%, 0)
}

@property --y-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 81%
}

@property --y-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 48%
}

@property --s-start-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 14.431239310789728%
}

@property --s-end-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 80%
}

@property --c-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(241.2, 24%, 59%, 0)
}

@property --x-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 53%
}

@property --y-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 87%
}

@property --x-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 89%
}

@property --s-start-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 19%
}

@property --s-end-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 68.6079947648648%
}

@property --c-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(254.4578313253012, 46%, 34%, 1)
}

@property --y-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8%
}

@property --x-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8%
}

@property --c-3 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(215.3846153846154, 93%, 77%, 1)
}

@property --s-start-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 15.33994806356517%
}

@property --s-end-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 72.72834165653069%
}

.hero {
    --x-0: 102%;
    --c-0: hsla(254.4578313253012, 46%, 34%, 0);
    --y-0: 81%;
    --y-1: 48%;
    --c-1: hsla(241.2, 24%, 59%, 0);
    --x-1: 53%;
    --y-2: 87%;
    --x-2: 89%;
    --c-2: hsla(254.4578313253012, 46%, 34%, 1);
    --y-3: 8%;
    --x-3: 8%;
    --c-3: hsla(215.3846153846154, 93%, 77%, 1);
    ;
    background-color: hsla(254.4578313253012, 39%, 50%, 1);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 3000 3000' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"), radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3));
    animation: hero-gradient-animation 10s linear infinite alternate;
    background-blend-mode: overlay, normal, normal, normal, hard-light;
}
.hero{
    position: relative; 
    height: 670px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero .col-md-12{
    text-align: center;
    z-index: 8;
}
.hero .col-md-12 h1{
    color: #fff;
    font-size: 62px;
    font-weight: 600;
    margin-bottom: 30px;
}
.hero .col-md-12 h1 span{
    font-family: "Manrope", sans-serif;
}
.hero .col-md-12 p{
    color: #fff;
    padding: 0 200px;
}
.hero .col-md-12 .btn{
    background-color: #4F46E5;
    padding: 12px 42px;
    border-radius: 100px;
    border: 1px solid #fff;
    transition: ease-in-out .3s;

}
.hero .col-md-12 .btn:hover{
    background: #1F2937;
    transition: ease-in-out .3s;
}
#tsparticles{
    z-index: 1;
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0;
}

.quiz *, .session *, .cta *, footer *, .footer-last *, .view-std *, .details *, .scanix-intro *{
    z-index: 2;
}
.leader h2, .leader .btn{
    z-index: 3;
    position: relative;
}

.view-std{
    padding: 100px 0;
}

.view-std h2{
    color: #1F2937;
    text-align: center;
    font-weight: 700;
    font-size: 48px;
    line-height: 54px;
    margin-bottom: 20px;
}
.view-std h2 > span{
    color: #4F46E5;
    font-family: "Manrope", sans-serif;
}
.view-std p{
    color: #6B7280;
    font-size: 14px;
    text-align: center;
    padding: 0 250px;
    margin-bottom: 80px;
}
.view-std .highlight{
    background: #4F46E5;
    color: #fff I !important;
} 
.view-std .highlight img{
    background: #1F2937 !important;
}
.view-std .highlight h3, 
.view-std .highlight h4, 
.view-std .highlight h5,
.view-std .highlight h6,
.view-std .highlight .rounded-pill{
    color: #fff !important;
}
.view-std .highlight .rounded-pill{
    border: 1px solid #fff !important;
}
.view-std .std-cards{
    margin-bottom: 20px;
}

.quiz{
    padding: 105px 0 100px;
}
.quiz h2{
    color: #4F46E5;
    font-weight: 600;
    font-size: 32px;
    margin-bottom: 20px;
}
.quiz p, .session .pd-2, .leader p{
    color: #6B7280;
    font-size: 14px;
    margin-bottom: 50px;
    padding-right: 300px;
}
.quiz .quiz-box{
    background-color: #fff;
    border: 1px solid #ebebeb;
    padding: 20px 40px;
    border-radius: 5px;
    margin-bottom: 20px;
}
.quiz .quiz-box h3{
    font-size: 18px;
    color: #1F2937;
}
.quiz .quiz-box h6{
    margin-bottom: 0;
}
.quiz .quiz-box .col-md-8 h6{
    color: #6B7280;
    font-size: 14px;
}
.quiz .quiz-box .btn{
    background-color: #10B981;
    border: 1px solid #10B981;
    padding: 8px 28px;
    border-radius: 3px;
}
.quiz .quiz-box .col-md-2{
    display: flex;
    justify-content: end;
    align-items: center;
}
.quiz .quiz-box .col-md-2 h6{
    font-size: 22px;
}

/* scanix-intro */
.scanix-intro{
    padding: 100px 0;
}

.scanix-intro .col-md-7{
    padding-right: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.scanix-intro h2{
    font-size: 52px;
    font-weight: 700;
    color: #1F2937;
}
.scanix-intro h2 span{
    color: #4F46E5;
    font-family: "Manrope", sans-serif;
}
.scanix-intro .col-md-5{
    text-align: right;
}
.scanix-intro .col-md-5 img{
    height: 500px;
    width: 90%;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 6px 18px rgba(79, 70, 229, 0.12);
    border: 2px solid rgba(0, 0, 0, 0.09);
}
.scanix-intro p{
    font-weight: 300;
    color: #6B7280;
    text-align: justify;
    margin-bottom: 30px;
}

.scanix-intro .btn{
    background: linear-gradient(90deg, #1f2937, #4F46E5);
    font-family: "Manrope", sans-serif;
    padding: 14px 35px;
    font-weight: 600;
    border: none;
    border-radius: 3px;
}
/* scanix-intro */

.session{
    padding: 105px 0 100px;
}
.session h2{
    color: #4F46E5;
    font-weight: 600;
    font-size: 32px;
    margin-bottom: 20px;
}
.session .session-box{
    background-color: #fff;
    border: 1px solid #ebebeb;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 20px;
}
.session .session-box img{
    border-bottom: 1px solid #6B7280;
}
.session .session-box .content{
    padding: 20px;
}
.session .session-box .content h3{
    color: #4F46E5;
    font-size: 18px;
}
.session .session-box .content h4{
    color: #1F2937;
    font-size: 14px;
    font-weight: bold;
}
.session .session-box .content h5{
    color: #1F2937;
    font-size: 14px;
}
.session .session-box .content p{
    margin-bottom: 0;
    color: #6B7280;
}
.details .col-md-4{
    display: flex;
    align-items: center;
}
.ses-single, .blog-box{
    padding-top: 55px;
}
.details-box{
    background-color: #1F2937;
    height: 100%;
    color: #fff;
    border-radius: 10px;
    padding: 50px;
}
.details-box h2{
    font-size: 24px;
    margin-bottom: 30px;
}
.details-box p{
    font-size: 14px;
    text-align: justify;
    color: #c0c0c0;
}
.details-box .btn{
    padding: 12px 30px;
    border-radius: 3px;
    margin: 0 5px;
    background-color: #4F46E5;
    border: 1px solid #4F46E5;
    margin-top: 20px;
    transition: ease-in-out .2s;
}
.details-box .btn:hover{
    background-color: #fff;
    color: #1F2937;
    transition: ease-in-out .2s;
}
.leader{
    padding: 105px 0 100px;
}
.leader h2{
    color: #4F46E5;
    font-weight: 600;
    font-size: 32px;
    margin-bottom: 20px;
}
.leader .leader-box{
    background-color: #fff;
    border: 1px solid #4F46E5;
    padding: 20px 40px;
    border-radius: 5px;
    margin-bottom: 20px;
}
.glow {
    position: relative !important;
    border: none !important;
}
.glow::before {
    content: '';
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: -5px;
    right: -5px;
    padding: 2px;
    z-index: -1;
    border-radius: 7px;
    background: linear-gradient( 109.6deg,  rgba(166,64,221,1) 21.2%, rgba(102,165,235,1) 74.4% );
    background-size: 600% 600%;
    animation: moveBorder 5s linear infinite;
}
@keyframes moveBorder {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.leader .leader-box .col-md-1 h5{
    margin-bottom: 0;
    font-size: 22px;
    font-weight: bold;
}
.leader .leader-box .col-md-3 h3{
    font-size: 18px;
    color: #1F2937;
    margin-bottom: 0;
}
.leader .leader-box .col-md-4 h3{
    font-size: 16px;
    color: #1F2937;
    margin-bottom: 0;
}
.leader .leader-box .col-md-2 h5{
    font-size: 24px;
    color: #4F46E5;
    margin-bottom: 0;
    font-weight: bold;
}
.leader .leader-box .col-md-2 h6{
    font-size: 16px;
    color: #1F2937;
    margin-bottom: 0;
    font-weight: bold;
}
.leader .leader-box .col-md-1,
.leader .leader-box .col-md-3{
    display: flex;
    justify-content: start;
    align-items: center;
}
.leader .leader-box .col-md-2{
    display: flex;
    justify-content: end;
    align-items: center;
}
.leader .leader-box .col-md-4{
    display: flex;
    justify-content: center;
    align-items: center;
}
.dataTables_wrapper{
    overflow-x: scroll;
}
.leader .btn,
.cta .btn,
.view-std .btn{
    padding: 12px 30px;
    border-radius: 3px;
    margin: 0 5px;
    background-color: #1F2937;
    border: 1px solid #1F2937;
    display: block;
    margin: auto;
    margin-top: 20px;
    transition: ease-in-out .2s;
}
.leader .btn:hover,
.cta .btn:hover,
.view-std .btn:hover{
    background-color: #4F46E5;
    transition: ease-in-out .2s;
}
.feedback .card{
    border: 1px solid #ebebeb;
    border-radius: 4px;
}
.profile{
    padding-top: 55px;
}
.profile-box-container{
    gap: 20px !important;
}
.profile-box-container .profile-box{
    border: 1px solid #4F46E5;
}
.profile-box-container .profile-box img{
    width: 100%;
    height: 350px !important;
    object-fit: cover;
    margin-bottom: 10px;
}
.profile-box-container .profile-box h5{
    font-weight: 600;
    padding: 0 10px;
}
.profile-box-container .profile-box h6{
    padding: 0 10px;
    font-weight: 500;
}
.profile-box-container .profile-box p{
    padding: 0 10px;
    font-weight: 400;
    font-size: 14px;
    text-align: justify;
}
.blog-single{
    padding: 30px;
    border: 1px solid #ebebeb;
    margin-top: 30px;
    border-radius: 5px;
}
.blog-single img{
    width: 90%;
    display: block;
    margin: 40px auto;
    box-shadow: 2px 2px 20px #ebebeb;
    border-radius: 7px;
}
.blog-single h1{
    font-size: 30px;
}
.blog-single div{
    margin-top: 30px;
    text-align: justify;
}

footer{
    padding: 100px 0;
}
footer .col-md-4 h3{
    color: #4F46E5;
    font-size: 26px;
    font-weight: 400;
}
footer .col-md-4 p{
    font-size: 14px;
    color: #6B7280;
    font-weight: 300;
    margin-bottom: 20px;
}
footer .col-md-4 h6{
    color: #1F2937;
}
footer ul,
.footer-last ul{
    list-style: none;
    padding-left: 0;
}
footer ul li{
    padding-bottom: 10px;
}
footer ul li a{
    color: #6B7280;
    font-weight: 300;
    font-size: 14px;
}
footer .col-md-2 h5{
    color: #1F2937;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 10px;
}
.footer-last{
    background-color: #1F2937;
    padding: 20px 0;
    position: relative;
    z-index: 3;
}
footer .col-md-4 ul{
    margin-bottom: 0;
    margin-top: 20px;
}
footer .col-md-4 ul li{
    display: inline-block;
    padding: 0 5px;
}
.footer-last p{
    color: #fff;
    margin-bottom: 0;
}
.footer-last p a{
    color: #e9ff45;
}
footer .col-md-4 ul li i{
    color: #4F46E5;
    font-size: 18px;
}
.cta .cta-box{
    background: url(../images/cta.svg);
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 80px 80px;
    text-align: center;
    margin: 50px 0;
    border-radius: 20px;
    box-shadow: 0px 30px 50px 0px #4f46e530;
}
.cta h2{
    font-weight: 500;
    font-size: 44px;
    margin-bottom: 20px;
}
.cta p{
    font-size: 14px;
    font-weight: 300;
    color: #6B7280;
}

/* Home page code end */


/* Explore page code  start*/
.std-cards{
    padding-top: 55px;
    margin-bottom: 50px;
}
.std-cards h1, .quiz h1, .conn-sec h1{
    color: #1F2937;
    text-align: center;
    font-size: 42px;
    font-weight: 600;
    margin: 70px 0 70px;
}
.quiz h1, .session h1, .leader h1{
    color: #1F2937;
    text-align: center;
    font-size: 42px;
    font-weight: 600;
    margin: 20px 0 70px;
}
.std-cards .std-filter .d-flex{
    /* justify-content: space-between; */
}
.std-cards .std-filter .d-flex select{
    width: 250px;
}
.select2-container--default .select2-selection--single {
    height: 44px;
    border: 1px solid #ebebeb;
    border-radius: 6px;
    font-size: 16px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: 40px;
}
.select2-container--default .select2-selection--single .select2-selection__clear{
    height: 40px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
    height: 40px;
}
.select2-results__options li{
    color: #1F2937;
    font-size: 14px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder{
    color: #1F2937;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
    background-color: #4F46E5;
}
.select2-container{
    margin-right: 20px;
}
.std-cards .std-filter .btn{
    background-color: #10B981;
    border: 1px solid #10B981;
    padding: 6px 20px;
} 
.std-cards .search-box{
    margin-bottom: 50px;
}
.std-cards .search-box input{
    width: 60%;
    display: block;
    margin: auto;
    border: 1px solid #4F46E5;
    box-shadow: 1px 1px 8px #4f46e517;
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 14px;
}
.std-cards .search-box input::placeholder{
    font-size: 14px;
}
.std-cards #filterSection{
    margin-bottom: 100px;
}
.std-cards .std-box{
    border: 1px solid #ebebeb;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    min-height: 312px;
}
.std-cards .std-box img{
    background-color: #4F46E5;
    padding: 10px;
    width: 60px;
    border-radius: 100%;
    margin-bottom: 15px;
}
.std-cards .std-box h3{
    font-size: 18px;
    color: #1F2937;
}
.std-cards .std-box h4{
    font-size: 14px;
    color: #1F2937;
    margin-bottom: 20px;
}
.std-cards .std-box h5,
.std-cards .std-box h6{
    color: #1F2937;
    font-size: 13px;
    font-weight: bold;
}
.std-cards .std-box .rounded-pill{
    border: 1px solid #10B981;
    color: #1F2937;
    font-weight: 400;
    margin-right: 5px;
    margin-bottom: 10px;
}
.std-cards .std-box .rounded-pill:hover{
    background-color: #10B981;
    color: #fff;
    transition: background-color 0.3s, color 0.3s;
    cursor: pointer;
}
.std-cards .std-box .btn{
    background-color: #4F46E5;
    color: #fff;
    border: none;
    padding: 8px 24px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 600;
    margin-top: 15px;
}
.leader .mt-4 #leaderboardTable{
    border-top: 1px solid rgba(0, 0, 0, 0.3);
}
.leader #leaderboardTable_filter{
    margin-bottom: 20px;
}
.profile img{
    background: #4F46E5;
}
.profile .rounded-pill{
    border: 1px solid #10B981;
    color: #1F2937;
    font-weight: 400;
    margin-right: 5px;
}
.profile .rounded-pill:hover{
    background-color: #10B981;
    color: #fff;
    transition: background-color 0.3s, color 0.3s;
    cursor: pointer;
}
.conn a{
    display: flex;
}
.profile-wrapper{
    border: 1px solid #ebebeb;
    margin-top: 40px;
    border-radius: 7px;
    padding: 40px;
}
.profile-wrapper img{
    width: 120px;
    padding: 10px;
    border-radius: 100%;
    margin-bottom: 30px;
}
.profile-wrapper h1{
    color: #1F2937;
    font-size: 28px;
}
.profile-wrapper h1 i{
    font-size: 22px;
    color: #4F46E5;
}
.profile-wrapper .mt-3 h5{
    color: #1F2937;
    font-size: 18px;
    font-weight: 600;
}
.profile-wrapper .mt-3 p{
    text-align: justify;
}
.profile h2{
    color: #4F46E5;
    font-size: 52px;
    font-weight: 600;
}
.profile h2 span{
    font-size: 28px;
}
/* Explore page code  end*/


/* Session page single */
.session-single{
    border: 1px solid #ebebeb;
    margin-top: 40px;
    border-radius: 7px;
    padding: 40px;
}
.session-single h1{
    color: #4F46E5;
    font-size: 28px;
    margin-bottom: 40px;
}
.session-single img{
    width: 70%;
    display: block;
    margin: auto;
    margin-bottom: 40px;
    box-shadow: 2px 2px 20px #ebebeb;
    border-radius: 7px;
}
.session-single p{
    text-align: justify;
    margin-bottom: 20px;
}
.session-single h6{
    font-size: 18px;
    color: #1F2937;
}
.session-single h6 span{
    color: #4F46E5;
}
.session-single h5{
    font-size: 18px;
    color: #1F2937;
}
.session-single h4{
    font-size: 18px;
}

/* Session page single */

/* Take quiz code */

.quiz-single{
    padding: 95px 20px;
}
.quiz-single h1,
.quiz-result h1{
    color: #4F46E5;
    font-size: 28px;
    text-align: center;
}
.quiz-single p{
    color: #6B7280;
    text-align: center;
    margin-bottom: 40px;
}
.quiz-single form h5{
    font-size: 18px;
}
.quiz-single form label{
    font-size: 16px;
}
.quiz-result{
    padding: 95px 20px;
}
.quiz-result strong{
    color: #4F46E5;
}
.quiz-result h3{
    font-size: 22px;
    color: #1F2937;
    margin: 30px 0;
    font-weight: 700;
}
.quiz-result .card strong{
    color: #1F2937;
}
.quiz-result .btn{
    margin-top: 40px;
}

/* Take quiz code */
.delete{
    display: flex;
    justify-content: end;
}
.profile .btn{
    padding: 7px 18px;
}
.profile .btn-primary{
    background-color: #4F46E5;
}
.profile .btn i{
    padding-right: 5px;
}
.email-req{
    padding: 30px 0 0;
}
.email-req h4{
    font-size: 18px;
    margin-bottom: 20px;
}
.email-req .email-box{
    border: 1px solid #10B981;
    background-color: #9dffdf12;
    padding: 15px;
    border-radius: 4px;
}
.email-req .email-box i{
    padding: 0;
}
.about{
    overflow: hidden;
}
.about .banner{
    height: 350px;
    background-color: hsla(200, 90%, 85%, 1);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1799 1799' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"), radial-gradient(circle at 92% 85%, hsla(210, 80%, 72%, 1) 4%, transparent 70%), radial-gradient(circle at 70% 30%, hsla(250, 90%, 80%, 1) 8%, transparent 65%), radial-gradient(circle at 45% 60%, hsla(280, 60%, 78%, 1) 6%, transparent 75%), radial-gradient(circle at 15% 40%, hsla(185, 100%, 78%, 1) 10%, transparent 80%), radial-gradient(circle at 80% 10%, hsla(195, 70%, 88%, 1) 5%, transparent 70%);
    background-blend-mode: overlay, normal, normal, normal, normal, normal;
    border-radius: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 80px;
}
.about .banner h2{
    color: #1F2937;
    margin-bottom: 0;
    font-size: 42px;
}
.about h3{
    color: #4F46E5;
    font-size: 32px;
    margin-bottom: 20px;
}
.about p{
    color: #6B7280;
    font-weight: 300;
    text-align: justify;
    margin-bottom: 0;
}
.about hr{
    border: 1px solid #4e46e5a1;
    margin: 50px 0;
}
.about h4{
    text-align: right;
    color: #4F46E5;
    font-size: 32px;
    margin-bottom: 20px;
}
.about ul{
    margin-left: 50px;
}

.about ul li b{
    color: #1F2937;
}
.about ul li{
    font-family: "Poppins", sans-serif;
    margin-bottom: 10px;
    color: #6B7280;
    font-weight: 300;
}
.about .btn{
    background-color: #4F46E5;
    border-radius: 2px;
    margin-top: 30px;
    padding: 10px 30px;
}

/* View connection */

.conn-sec{
    padding-top: 55px;    
    padding-bottom: 100px;
}
.view-conn-box{
    border: 1px solid #ebebeb;
    margin-bottom: 10px;
    padding: 15px 20px;
    border-radius: 3px;
    box-shadow: 1px 1px 8px #4f46e517;
}
.view-conn-box .col-md-5, .view-conn-box .col-md-4, .view-conn-box .col-md-3{
    display: flex;
    align-items: center;
}
.view-conn-box .col-md-4{
    justify-content: start;
}
.view-conn-box .col-md-3{
    justify-content: end;
}
.view-conn-box .col-md-3 .btn{
    background-color: #4F46E5;
    border-radius: 0;
    font-size: 15px;
    padding: 8px 20px;
}

.spark .filter-spark{
    display: flex;
    justify-content: end;
}
.spark .filter-spark select{
    width: 180px;
}
.spark-feed{
    padding: 50px 70px;
}
.spark-feed .spark-box{
    border: 1px solid #ebebeb;
    box-shadow: 1px 1px 10px #4e46e50c;
    border-radius: 5px;
    padding: 30px 40px;
    margin-bottom: 20px;
}
.spark-feed .spark-box .spark-profile{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.spark-feed .spark-box .spark-profile h6{
    margin-bottom: 0;
}
.spark-feed .spark-box .spark-profile h6{    
    color: #1F2937;
}
.spark-feed .spark-box .spark-profile img{
    background-color: #4F46E5;
    width: 40px;
    padding: 5px;
    border-radius: 100%;
    margin-right: 7px;
}
.spark-feed .spark-box .details{
    text-align: justify;
    font-size: 14px;
}
.spark-feed .spark-box .details p{
    color: #6B7280;
}
.spark-feed .spark-box .details h6{
    color: #4F46E5;
    font-size: 14px;
}
.spark-feed .spark-box hr{
    border: 1px solid #4F46E5;
}
.spark-feed .spark-box .btn{
    background: transparent;
    border: 1px solid #ebebeb;
    transition: ease-in-out .3s;
    border-radius: 3px;
    margin-left: 5px;
}
.spark-feed .spark-box .btn:hover{
    border: 1px solid #4F46E5;
    transition: ease-in-out .3s;
}
.spark-feed .spark-box .btn.active{
    border: 1px solid #4F46E5;
    color: #fff;
}
.spark-feed .spark-box .btn.active p{
    color: #4F46E5;
}
.spark-feed .spark-box .btn span{
    display: flex;
    align-items: center;
}
.spark-feed .action .btn img{
    width: 20px;
}
.spark-feed .action .btn p{
    color: #000;
    margin-bottom: 0;
    font-size: 13px;
}
.spark-feed .action{
    display: flex;
    justify-content: end;
}
.spark{
    padding-top: 55px;
}
.spark .col-md-12 h1{
    color: #1F2937;
    text-align: center;
    font-size: 42px;
    font-weight: 600;
    margin: 70px 0 20px;
}
.spark .col-md-12 p{
    text-align: center;
    color: #6B7280;
    font-size: 15px;
}
.spark .col-md-12 a{
    color: #4F46E5;
    border-bottom: 1px solid #4F46E5;
    padding: 0 5px;
}
.spark .details .read-more{
    color: #4F46E5;
}