@import url('https://fonts.googleapis.com/css2?family=Jost: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&family=Sen:wght@400;700;800&display=swap');

:root
{
--primary-gradiant: linear-gradient( 0deg, rgb(84,76,249) 0%, rgb(144,49,141) 0%, rgb(204,22,32) 0%, rgb(207,20,31) 100%);
--primary-color: rgb(185, 10, 19);
--secondary-color: rgb(22,35,43);
--text-color: rgb(39,39,39);
--field-color: rgb(255,255,255);
}

html {
scroll-behavior: smooth;
}

.id-seg{
scroll-margin-top: 90px;
}


body
{
font-family: "Jost";
background-size: cover;
width: 100%;
height: auto;
position: relative;
overflow-x: hidden !important;
}

.question_name{
font-size: 20px;
}
.desc-txt{
color: black;
font-weight: 500;
font-size: 16px;
margin-top: 15px;

}

.steps
{
display: flex;
flex-direction: column;
max-height: 100%;
box-shadow: 0px 6px 24px 3px rgba(0, 0, 0, 0.251);

}



.two-in{
padding: 0px 70px;
}




@font-face{
font-family:"Font Awesome 6 Free";
src:url("../fonts/fontawesome/fa-solid-900.woff2") format("woff2"),
url("../fonts/fontawesome/fa-solid-900.ttf") format("truetype");
font-weight:900;
font-style:normal;
}

@font-face{
font-family:"Font Awesome 6 Free";
src:url("../fonts/fontawesome/fa-regular-400.woff2") format("woff2"),
url("../fonts/fontawesome/fa-regular-400.ttf") format("truetype");
font-weight:400;
font-style:normal;
}

@font-face{
font-family:"Font Awesome 6 Free";
src:url("../fonts/fontawesome/fa-light-300.woff2") format("woff2"),
url("../fonts/fontawesome/fa-light-300.ttf") format("truetype");
font-weight:300;
font-style:normal;
}

@font-face{
font-family:"Font Awesome 6 Free";
src:url("../fonts/fontawesome/fa-thin-100.woff2") format("woff2"),
url("../fonts/fontawesome/fa-thin-100.ttf") format("truetype");
font-weight:100;
font-style:normal;
}

@font-face{
font-family:"Font Awesome 6 Brands";
src:url("../fonts/fontawesome/fa-brands-400.woff2") format("woff2"),
url("../fonts/fontawesome/fa-brands-400.ttf") format("truetype");
font-weight:400;
font-style:normal;
}



@media (max-width: 991px) {

.two-in{
padding: 0px 20px;
}

}
.three-in{
padding: 0px 20px;
}

.font-30{
font-size: 14px;
}



.h-border
{
position: absolute;
background: rgb(212,11,33);
clip-path: polygon(0 15%, 10% 15%, 10% 90%, 100% 90%, 100% 100%, 0 100%, 0 50%);
width: 150px;
height: 100%;
top: -10px;
right: -40px;
transform: rotate(45deg);
z-index: 10;
border: solid 2px red;
}
.flex-1
{
flex: 1;
}

.quiz-inner
{
flex: 1;
width: 100%;
padding: 40px 90px 0 90px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.side
{
width: 100%;
height: 100%;
position: relative;
text-align: center;
margin-top: 20px;
}
.side img:nth-child(1)
{
width: 80%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
}
.question
{
position: absolute;
top: 20px;
right: 25px;
width: 100px;
transform: rotate(25deg);
opacity: 0.5;
}



.left-format{
left: 120px !important;
}

@media (min-width: 991px) and (max-width: 1199px) {

.left-format{
left: 75px !important;
}


}
.form-inner
{
margin-top: 40px;
}
.radio-field
{
position: relative;
height: 150px;
width: 85%;
margin-left: auto;
margin-bottom: 40px;
text-align: center;
display: grid;
align-items: center;
justify-content: center;
padding: 20px;
}
.radio-field input
{
appearance: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: solid 4px rgb(225,225,225);
border-radius: 4px;
background-color: var(--field-color);
cursor: pointer;
transition: 0.4s all;

}
.radio-field input:focus
{
outline: none;
}
.radio-field label, .radio-field img
{
position: relative;
z-index: 10;
pointer-events: none;
}
.radio-field img
{
width: 42px;
margin: 0 auto;
}
.radio-field label
{
font-size: 25px;
color: var(--text-color);
font-weight: bold;
text-transform: capitalize;
}
.radio-field input::before
{
position: absolute;
border: solid 4px rgb(225,225,225);
border-radius: 50%;
background-color: var(--field-color);
width: 57px;
height: 57px;
top: 42px;
left: -28px;
font-size: 24px;
color: var(--primary-color);
text-align: center;
font-weight: bold;
display: grid;
align-items: center;
transition: 0.4s all;

}
.radio1::before
{
content: "A";
}
.radio2::before
{
content: "B";
}
.radio3::before
{
content: "C";
}
.radio4::before
{
content: "D";
}
.radio-field input:checked::before
{
content: "";
border-color: var(--primary-color);
/* background-color: var(--primary-color); */
}
.radio-field input:checked::after
{
content: "";
position: absolute;
border-left: solid 4px var(--primary-color);
border-bottom: solid 4px var(--primary-color);
top: 69px;
left: -14px;
width: 25px;
height: 15px;
border-radius: 3px;
transform: rotate(-45deg);
opacity: 0;
}
.radio-field input:checked
{
border-color: var(--primary-color);
}

a{
	text-decoration: none;

}

.next-prev
{
margin-top: 20px;

}
.next-prev button
{
border-radius: 5px;
padding: 10px;
/* height: 70px; */
background: var(--primary-gradiant);
font-size: 20px;
color: rgb(255, 255, 255);
font-weight: 500;
font-size: 21px;
border: 0;
text-transform: capitalize;
margin-bottom: 20px;
background: #004185;

}



.step-bar
{
border: solid 1px #dddddd;
width: 100%;
height: 14px;
overflow: hidden;
background: #dddddd;


}

.step-bar .fill
{
width: 0;
border-radius: inherit;
height: 100%;
background-color: var(--primary-color);
transition: 0.4s all;
}
.step-number
{
text-align: center;
margin-top: 8px;
font-size: 16.5px;
color: rgb(0, 10, 56);
font-weight: bold;
}


#error div
{
position: fixed;
top: 20px;
left: 20px;
}


.select-card {
width: 100%;
border-radius: 8px;
overflow: hidden;
background: #fff;
border: 2px solid #e5e5e5;
cursor: pointer;
display: inline-block;
transition: 0.3s;
user-select: none;
position: relative;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.select-card img {
width: 100%;
height: 150px;
object-fit: cover;
}

.select-card .title {
text-align: center;
padding: 14px;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.5px;
position: relative;
}

.select-card input {
display: none;
}

/* When checkbox is selected */
.select-card input:checked + img,
.select-card input:checked ~ .title {
filter: brightness(0.9);
}

/* Card border highlight when checked */
.select-card input:checked ~ .title,
.select-card input:checked {
border-color: #007bff;
}

.select-card input:checked + img {
border-bottom: 2px solid #007bff;
filter: brightness(50%);
}

.select-card:has(input:checked) {
border-color: #007bff;
box-shadow: 0 4px 12px rgba(0,123,255,0.3);
}



.select-card .badge-num {
position: absolute;
top: 40px;
left: 180px;
width: 80px;
z-index: 999;
height: 80px;
background: #0b4893d1;
color: white;
font-size: 46px;
font-weight: bold;
border-radius: 50%;
display: none;
justify-content: center;
align-items: center;
}


.select-card .choice-label{
position: absolute;
top: 0px;
left: 0px;
background: #007bff;
width: 40px;
color: white;
height: 100%;
font-weight: 600;
text-align: center;
align-self: center;
display: none;
justify-content: center;
align-items: center;
}

.w-60{
width: 60%;
}

@media (max-width: 991px) {
.w-60{
width: 100%;
}


.quiz-inner {
padding: 40px 90px 0 50px;

}

.img-row {
padding: 0px 16px;
}


}
@media (max-width: 1199px) {
.select-card .badge-num {
left: 85px;

}
}

.step-bar {
width: 100%;
height: 12px;
background: #e5e5e5;
border-radius: 0px;
}

.step-bar .fill {
height: 100%;
width: 0%;
background: #479668;
transition: width 0.3s ease;
}

.choosealert{
position:fixed;top:15px;right:15px;
background:#dc3545;color:#fff;
padding:10px 15px;border-radius:6px;
display:none;z-index:9999;
}

.icon-card {
background: #fff;
padding: 18px 30px;
border-radius: 0px;
box-shadow: 0px 2px 10px rgba(0,0,0,0.4);
display: flex;
justify-content: space-between;
align-items: center;
}
@media(max-width: 768px) {
.next-prev{
text-align: center !important;
} 

.question_name{
font-size: 15px;
}

.desc-txt{
font-size: 13px;
}

.icon-w img{
width: 40px;
}

}

@media (min-width: 350px) and (max-width: 550px) {
.select-card input:checked ~ .title {
margin-left: 28px;
}

}
@media (min-width: 480px) and (max-width: 767px) {

.icon-w{
width: 16% !important; 
}

.select-card .badge-num {
left: 140px;
}

}

@media (min-width: 320px) and (max-width: 479px) {

.icon-w{
width: 33.3% !important;
margin-top: 10px; 
}

}


@media (min-width: 400px) and (max-width: 500px) {
.select-card .badge-num {
left: 150px;
}

}



@media (min-width: 501px) and (max-width: 600px) {
.select-card .badge-num {
left: 175px;
}

}






@media (min-width: 1200px) and (max-width: 1399px) {
.select-card .badge-num {
left: 125px;
}

}


.header{
background:#fff;
border-bottom:2px solid #f1f1f1;
padding:14px 24px;
display:flex;
justify-content:space-between;
align-items:center;
position:relative;
z-index:1000;
transition:.3s
}

.header.fixed{
position:fixed;
width: 100%;
top:0;
left:0;
box-shadow:0 8px 25px rgba(0,0,0,.08)
}

.left{display:flex;align-items:center}

.logo img{width:120px}

.toggle{
display:none;
font-size:26px;
cursor:pointer;
color:#e91e63;
margin-right:16px
}

.nav{
display:flex;
gap:32px;
margin-left:40px
}

.nav li{list-style:none;position:relative}

.nav a{
color:#e91e63;
font-weight:600;
text-decoration:none
}

.submenu{
position:absolute;
top:35px;
padding: 10px 0px;
left:0;
background:#fff;
min-width:220px;
border-radius:12px;
box-shadow:0 12px 30px rgba(0,0,0,.12);
opacity:0;
visibility:hidden;
transform:translateY(12px);
transition:.25s
}

.submenu a{
display:block;
padding:10px 22px;
color:#333;
font-size: 14px;
}

.submenu a:hover{
background: #e91e63;
color: #fff;
border-radius: 7px;
}

.right .submenu {
left: -105px;
min-width: 150px;
padding: 2px 0px;
}

.nav li.show .submenu{
opacity:1;
visibility:visible;
transform:translateY(0)
}

.right{display:flex;gap:16px}

.login{color:#1e88e5;font-weight:600;text-decoration:none}

.signup{
background:#e91e63;
color:#fff;
padding:8px 18px;
border-radius:22px;
text-decoration:none;
font-weight:600
}

@media(max-width:900px){



.toggle{display:block}
.nav{
margin-left:0px;
position:fixed;
top:0;
left:-280px;
width:280px;
height:100%;
background:#fff;
flex-direction:column;
gap:16px;
padding:50px 20px;
box-shadow:4px 0 25px rgba(0,0,0,.12);
transition:.3s;
z-index:2000
}
.nav.active{left:0;
padding: 0px 20px;}
.right{display:none}
.submenu{
position:static;
opacity:1;
visibility:visible;
transform:none;
box-shadow:none;
display:none;
margin-top:0px;
padding: 3px 0px;
}

.submenu a {
display: block;
padding: 10px 10px;
color: #333;
font-size: 12px;
}
}

#mobile-logo{
display: none;
}


.sub-icon{
float: right;
margin-top: 5px;
margin-left: 10px;
color: #002554;
}


@media (min-width: 901px) {
.submenu {

display: block !important;
}

}


.mobile-right{
display: none;
}

.mobile-menu{
display: none;
}

@media(max-width:900px){
.heading{
text-align: center;
margin-top: 10px;
}
.mobile-menu{
display: block;
}
.mobile-right{
display: flex;
gap: 20px;
}
.mobile-right ul{
margin-top: 5px;
margin-bottom: 1px;
}
.mobile-right li{
list-style-type: none;
}
.mobile-right li a{
all: unset;
}
#mobile-logo{
display: block;
}
.top-br{
border-top: 1px solid #0000001a;
padding-top: 12px;
}
.menu-arrow{
float:right;
font-size:14px;
transition:.3s;
}

.nav li.open > a .menu-arrow{
transform:rotate(180deg);
}

.sub-arrow{
font-size:13px;
margin-right:6px;
color:#e91e63;
}

}


.sapce-top {
padding-top: 35px;
}

.sapce-bottom{
padding-bottom: 35px;
}



@media (max-width: 1199px) {
.sapce-top {
padding-top: 15px;
}

.sapce-bottom{
padding-bottom: 15px;
}
}

.default-btn{
background: #e82561 !important;
border: 1px solid #e82561 !important;
}
.para{
text-align: justify;
color: black;
font-size: 16px;
line-height: 25px;
}


.heading{
color: #e82561;
margin-bottom: 12px;
}

.about-img{
border-radius: 20px;
}
.bg-img{
position:relative;
border-radius: 10px;
padding: 30px;
}

.bg-img::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius: 10px;
background:url("../images/personality-bg.jpg") center/cover no-repeat;
opacity:0.2;
z-index:-1;
}

.course-card{
filter: drop-shadow(0px 2px 4px #bcbcbc);
border-radius: 0px;
}

.cus-brd{
border: 0.1px solid #ababab3d;
border-radius: 0px !important;
}

.list-inline-item a{
color: #000 !important;
font-weight: 600;
}


.list-inline-item i{
color: #e82561 !important;
}

.footer-bg{
position:relative;
background:#ffffff;
box-shadow:0 0 11px rgba(0,0,0,.25);
color:#000;
overflow:hidden;
z-index:1;
}

.footer-bg > *{
position:relative;
z-index:1;
}
.footer-bg::before{
content:"";
position:absolute;
inset:0;
background-image:url(../images/footer.jpg);
background-size:cover;
background-position:center;
opacity:.4;
z-index:0;
}
.footer-logo {
max-width:140px;
}
.footer-text {
max-width:900px;
font-size:15px;
font-weight: 500;
line-height:1.7;
color:#000;
}
.social-icon {
width:42px;
height:42px;
border:1px solid #000;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#e82561;
font-size:18px;
text-decoration:none;
}
.footer-links a {
color:#e82561;
text-decoration:none;
padding:0 8px;
font-size:15px;
}
.footer-links a:hover,
.social-icon:hover {
opacity:.8;
}
@media (max-width:576px) {
.footer-text {
font-size:14px;
}
.footer-links li {
display:block;
margin-bottom:8px;
}
}

.a-tag{
all: unset;
cursor: pointer;
}

.personality-course{
margin-right: 20px;
background: #b1adad63;
padding: 2px 20px;
border-radius: 4px;
font-weight: 500;
font-size: 13px;

}


@media (min-width: 450px) and (max-width: 1199px) {

.personality-course {
margin-right: 3px;
padding: 2px 8px;
}

}


@media (min-width: 350px) and (max-width: 449px) {

.personality-course {
margin-right: 2px;
padding: 2px 5px;
}

}


.course-det-card{
border: 0px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
border-radius: 1px;
}


.tabs {
display: flex;
border-bottom: 1px solid #ddd;
}

.tab {
background: none;
border: none;
padding: 12px 20px;
cursor: pointer;
font-size: 16px;
position: relative;
}

.tab.active {
color: #e91e63;
}

.tab.active::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 100%;
height: 3px;
background: #e91e63;
}

.tab-content {
display: none;
padding: 20px 0;
}

.tab-content.active {
display: block;
}


.course-space{
padding-bottom: 20px !important;
}

.desc li{
list-style-type: none;
}


.edu-desc{
list-style:none;
padding-left:0;
}

.edu-desc ul{
list-style-type:none !important;
padding-left:0;
}

.edu-desc li{
position:relative;
padding-left:28px;
}

.edu-desc li::before{
content:"\f19d";
font-family:"Font Awesome 6 Free";
font-weight:900;
position:absolute;
left:0;
top:2px;
color: #e82561;
}


.desc{
list-style:none;
padding-left:0;
}


.desc li{
position:relative;
padding-left:28px;
}

.desc li::before{
content:"\f061";
font-family:"Font Awesome 6 Free";
font-weight:900;
position:absolute;
left:0;
top:2px;
color: #e82561;
}


.home-course{
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
border: 0px;
}



.counter-box{
background:#fff;
border-radius:12px;
text-align:center;
padding:30px 20px 20px;
box-shadow:0 4px 10px rgba(0,0,0,.2);
position:relative;
}
.badge-icon{
width:70px;
height:70px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
margin:-55px auto 10px;
color:#fff;
font-size:28px;
}
.green{background:#8bc34a}
.blue{background:#4a90e2}
.orange{background:#ff7043}
.gray{background:#9e9e9e}
.count{
font-size:24px;
font-weight:bold;
margin-top:5px;
}
.title{
font-size:15px;
color:#000;
font-weight: 500;
margin-top:5px;
}

.suffix{
font-size:20px;
font-weight:600;
color:#e82561;
margin-bottom:4px;
}


@media (max-width: 991px) {
    .counter-top{
    	margin-top: 50px;
    }
}

.custom-accordion .accordion-item{
  border:0;
  border-bottom:1px solid #e5e5e5
}
.custom-accordion .accordion-button{
  background:#fff;
  box-shadow:none;
  font-weight:500;
  color:#e82561;
  font-size: 18px;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.custom-accordion .accordion-button::after{
  display:none
}
.custom-accordion .icon{
  position:relative;
  width:20px
}
.custom-accordion .icon .fa-minus{
  display:none
}
.custom-accordion .accordion-button:not(.collapsed) .fa-minus{
  display:inline-block
}
.custom-accordion .accordion-button:not(.collapsed) .fa-plus{
  display:none
}	

.accordion-button{
	color:#e82561;
}


.strip{
 padding: 30px 0px 30px 0px;
   background-color: #c0003b;
}

.s-text{
      margin-bottom: 20px !important;
    color: #fff;
    font-size: 20px;
}
.main-s{
   display: block;
    /* margin-bottom: 20px !important; */
    margin-top: 0px !important;
    color: #FFF176 !important;
    text-transform: uppercase;
}
.strip-btn{
      background: #4caf50;
    padding: 7px 30px;
    border-radius: 50px;
    margin-top: 19px;
    font-weight: 700;
    font-size: 17px;
    color: white;
}

.mb-30{
  margin-bottom: 30px;
}