.navbar {
        width: 100%;
        display: flex;
        flex-direction: row;
        padding: 20px 40px;
        box-shadow: 6px 6px 22px -3px #00000011;
        position: fixed;
        top: 0;
        left: 0;
        background-color: white;
        z-index: 9999;
    }
    
    html,
    body {
        max-width: 100vw;
    }
    
     :root {
        --brand-col1: #73296f;
        --brand-col2: rgba(242, 173, 0, 1);
        --brand-col2-accent: rgba(242, 203, 0, 1);
    }
    
    * {
        font-family: Poppins;
    }
    
    .booklet img {
        width: auto;
        max-height: 100%;
        object-fit: contain;
    }
    
    .logo_holder img {
        height: 50px;
        width: auto;
    }
    
    .form_holder {
        overflow: hidden;
        width: 100%;
        height: auto;
        position: relative;
        display: flex;
        flex-direction: row;
        margin: 0 auto;
        align-items: stretch;
        align-content: flex-start;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    html,
    body {
        margin: 0;
        padding: 0;
    }
    
    .hero {
        min-height: 39vw;
        height: auto;
        background-color: var(--brand-col1);
        border-bottom: 2px solid #ddd;
        padding: 20px 50px;
        display: flex;
        background: url('https://www.ipmcareer.com/files/2023/11/webinar-1.jpg');
        background-position: top;
        background-repeat: no-repeat;
        background-size: contain;
        align-content: center;
        align-items: center;
        justify-content: center;
        color: white;
        text-align: center;
    }
    
    .scholar {
        width: 100%;
        height: auto;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        box-sizing: border-box;
        padding: 50px 50px;
    }
    
    .scholar img {
        position: relative;
        width: 100%;
        box-shadow: 8px 8px 32px -4px #00000033;
        border: 2px solid var(--brand-col1);
    }
    
    .y {
        color: var(--brand-col2);
    }
    
    .error {
        color: red;
    }
    
    .form_holder>div {
        flex: 1 1 40%;
    }
    
    .form-section form {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: flex-start;
        align-items: stretch;
    }
    
    .form-section {
        padding: 60px 5%;
    }
    
    button[type="submit"],
    .hero a {
        border: 0 none;
        color: #fff;
        display: inline-block;
        font-size: 17px;
        font-weight: 500;
        margin-top: 0px;
        padding: 12px 30px;
        border-radius: 33px;
        width: fit-content;
        margin-top: 20px;
        font-family: 'Poppins', sans-serif;
        background: rgb(242, 173, 0) !important;
        background: linear-gradient(127deg, rgba(242, 173, 0, 1) 1%, rgba(242, 203, 0, 1) 65%) !important;
    }
    
    form label {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: flex-start;
        align-items: stretch;
        width: 80%;
    }
    
    label span {
        marginm: 10px 0;
    }
    
    .head {
        font-size: 26px;
        color: rgb(129, 9, 109);
        margin: 0;
    }
    
    .form-section p {
        margin: 10px 0;
    }
    
    form label input {
        width: 100%;
        padding: 10px 20px;
        border: 0;
        border-radius: 5px;
        background-color: #f0f0f0;
    }
    
    form label input:focus {
        outline: 1px solid var(--brand-col1);
    }
    
    input[type="number"]::-webkit-inner-spin-button {
        opacity: 0;
    }
    
    .footer {
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        text-align: center;
        padding: 50px 30px;
        background-color: var(--brand-col1);
        color: white;
    }
    
    .footer a,.betn {
        background-color: var(--brand-col2);
        text-decoration: none;
        border-radius: 200px;
        padding: 10px 20px;
        color: white;
        margin: 20px 0;
    }
    
    .hero a {
        text-decoration: none;
    }
    
    .hero {
        flex-direction: column;
    }
    
    .selct-wrapper select {
        appearance: none;
        display: none;
        opacity: 0;
    }
    
    .selct-wrapper select {
        overflow: hidden;
    }
    
    * {
        box-sizing: border-box;
    }
    
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    .booklet iframe {
        width: 80%;
        overflow: hidden !important;
        border-radius: 20px !important;
        display: block;
        height: 50vh;
        padding: 20px;
    }
    
    @media only screen and (max-width:968px) {
        .form_holder {
            flex-direction: column;
            width: 100vw;
        }
        .scholar {
            padding: 5px;
        }
        .sec_cont.points {
            width: 98vw;
            overflow: hidden;
            padding: 20px;
        }
        .booklet img {}
        .booklet {
            overflow: hidden;
        }
        .main {
            width: 95vw !important;
        }
    }
    
     ::-webkit-scrollbar {
        width: 5px;
    }
    
     ::-webkit-scrollbar-thumb {
        background-color: var(--brand-col2);
    }
    
    .clone-wrap {
        position: absolute;
        top: 40px;
        z-index: 999;
        padding: 0;
        background: #eee;
        width: 100%;
        max-width: 100%;
        max-height: 0px;
        list-style-type: none;
        overflow: hidden;
        transform: translateY(-50px);
        transition: all .3s cubic-bezier(0, .66, .18, .99);
        border-radius: 0 0 10px 10px;
        opacity: 0;
    }
    
    .clone-wrap.active {
        transform: translateY(0px);
        max-height: 150px;
        opacity: 1;
        overflow-y: overlay;
    }
    
    .clone-wrap li {
        transition: all .6s cubic-bezier(.38, .5, 0, 1);
        width: 100%;
        position: relative;
        padding: 5px 10px;
        transform: translateX(-150px);
    }
    
    .clone-wrap li:hover {
        background: #fffdf8;
    }
    
    .indicator {
        transition: all .3s cubic-bezier(0, .66, .18, .99);
        max-width: 80%;
        padding: 10px 20px;
        border: 0px solid;
        background: #ddd;
        z-index: 7;
        position: relative;
        border-radius: 10px;
    }
    
    .selct-wrapper {
        width: 100%;
        position: relative;
        margin: 0px;
    }
    
    .indicator::after {
        content: ' ';
        position: absolute;
        right: 0;
        top: 0;
        width: 50px;
        height: 50px;
        background: red;
        z-index: 7;
        display: block;
    }
    
    .ind {
        width: auto;
        height: auto;
        background: rgb(255, 186, 10);
        background: linear-gradient(137deg, rgba(255, 186, 10, 1) 0%, rgba(251, 151, 19, 1) 100%);
        padding: 5px 10px;
        border: 0px solid;
        color: white;
        border-radius: 5px;
        margin-top: 20px;
    }
    
    .indicator:focus {
        border: 0px solid;
        outline: 0px solid;
        background: #ccc;
    }
    
    .indicator:hover {
        background: #ccc;
        color: #555;
    }
    
    .clone-wrap::-webkit-scrollbar {
        width: 2px;
        background: white;
    }
    
    .clone-wrap::-webkit-scroll-thumb {
        background: #ddd;
    }
    
    .clone-wrap li.selected {
        background: #aaa;
    }
    
    .clone-wrap.active li {
        transform: translateX(0px);
    }
    
    .clone-wrap li:nth-child(1) {
        transition-delay: 20ms;
    }
    
    .clone-wrap li:nth-child(2) {
        transition-delay: 40ms;
    }
    
    .clone-wrap li:nth-child(3) {
        transition-delay: 60ms;
    }
    
    .clone-wrap li:nth-child(4) {
        transition-delay: 80ms;
    }
    
    .clone-wrap li:nth-child(5) {
        transition-delay: 100ms;
    }
    
    .clone-wrap li:nth-child(6) {
        transition-delay: 120ms;
    }
    
    .clone-wrap li:nth-child(7) {
        transition-delay: 140ms;
    }
    
    .main {
        width: 100%;
        position: relative;
        min-height: 60vh;
        margin: 0;
        padding: 5vw;
        margin: 0 auto;
        width: 75vw;
    }
    
    .main-faq {
        border-radius: 8px;
        background: white;
        padding: 10px 20px;
        position: relative;
        box-shadow: 2px 2px 12px -2px #00000022;
    }
    
    .booklet {
        background-color: var(--brand-col1);
        min-height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        width: 100%;
    }
    
    .main h1 {
        font-size: 3rem;
        line-height:normal;
    }
    
    .opener {
        position: absolute;
        right: 20px;
        top: 50%;
        height: 24px;
        width: auto;
        transform: translateY(-50%);
        transition: all .3s cubic-bezier(0, .66, .18, .99);
    }
    
    .inner-content {
        max-height: 0px;
        transition: all .3s cubic-bezier(0, .66, .18, .99);
        overflow: hidden;
        margin: 20px;
    }
    
    .active .inner-content {
        max-height: 100px;
    }
    
    .active .opener {
        transform: translateY(-50%) rotate(45deg);
    }
    
    .active .opener svg path {
        fill: red !important;
    }
    
    .sec_cont {
        width: 100%;
        min-height: 50vh;
        height: auto;
        padding: 0px;
        background: #eee;
        font-family: Poppins;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        flex-wrap: wrap;
    }