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

*{
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}
/* html,body{
    width: 100%;
    height: 100%;c
} */



html, body {
    font-family: 'Quicksand', 'Poppins', ;
    /* width: 1440px !important; */
    min-height: 100vh;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    overflow-x: hidden;
    /* overflow-y: auto; */
}
p,h1,h2,h3,h4,h5,h6{
    cursor: default;    
}

.navbar-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 96px;
    background-color: #FFFFFF;
    box-shadow: 0px 4px 24px 0px #E2E2E2;
    border: 1.5px solid #E2E2E2;
    z-index: 999;
}



.navbar-content-container{
    width: 1359px;
    height: 45.32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* margin: 26px 40px 24.68px 40px; */
    /* margin: 31px auto; */
}
.middle-navigation-container{
    width: 1440px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 40px;
}

.logout-button{
    width: 91px;
    height: 44px;
    /* padding: 11px 18px; */
    font-size: 16px;
    font-weight: 700;
    line-height: 140%;
    color: #3D348B;
    border-radius: 12px;
    border: 1.5px solid #3D348B;
    background-color: #FFFFFF;
}
.logo{
    width: 200px;
    height: 100px;
    object-fit: cover;    
}

.middle-navigation-links-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.middle-navigation-link{
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    color: #A5A5A5;
}
.middle-navigation-link.active{
    width: fit-content;
    height: 36px;
    padding: 10px 16px;
    background-color: #FFAA3E;
    color: #FFFFFF;
    line-height: 16px;
    border-radius: 40px;
}

.logo-container{
    margin: 24px;
    width: fit-content;
}

.register-container{
    display: flex;
    justify-content: center;
    gap: 105px;
}

.register-form-container{
    max-width: 485px;
    max-height: 613px;
    margin-top: 40px;
    margin-left: 130px;
    margin-bottom: 70px;
}


.login-form-container{
    max-width: 485px;
    max-height: 316px;
    margin-top: 100px;
    margin-left: 130px;
}

.signup-image-container{
    width: 696px;
    height: 725px;
    margin-top: 24px;
    margin-right: 24px;
    margin-bottom: 24px;
}


.heading-1{
    /* height: 35px; */
    font-size: 36px;
    font-weight: 700;
    color: #1E1E1E;
    line-height: 34.7px;
}

.welcome-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 212px;
    /* margin-left: 249px; */
    /* gap: 105px; */
}

.welcome-heading{
    text-align: center;
    width: 941px;
    height: 92px;
    font-size: 40px;
    font-weight: 700;
    color: #1E1E1E;
    line-height: 46px;
    /* margin-top: 116px; */
    /* margin-left: 249px; */
}
.welcome-paragraph{
    text-align: center;
    width: 717px;
    height: 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    margin-top: 24px;
    /* margin-left: 362px; */
}

.paragraph-application{
    width:597px;
    height: 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    margin-top: 8px;
    /* margin-left: 4px; */
}

.paragraph-1{
    height: 14px;
    font-size: 14px;
    font-weight: 400;
    color: #1E1E1E;
    line-height: 14px;
    margin-top: 8px;
    margin-left: 4px;
}
#paragraph-1-interests{
    width: 686px;
    height:44px;
    line-height: 22px;
}

.explore-interests-paragraph{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 365px;
    height: 50px;
    padding: 17px 19px;
    gap: 10px;
    border:1.5px solid #50C879;
    border-radius: 12px;
    background-color: #F5FFF8;
}

.explore-interests-paragraph-text{
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    color: #50C879;

}

#otp-message{
    width: 445px;
    height: 36px;
    line-height: 18px;
}

.explore-interests-container{
    width: 1141px;
    height: 87px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.student-parent-label{
    height: 14px;
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
    margin-top: 24px ;
    margin-left: 5.21px;
    display: block;
}

.student-parent-button-container{
    margin-top: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.student-parent-button{
    margin-left: 0.21px;
    height: 40px;
    width: 133px;
    color: #1E1E1E;
    border: 1.5px solid #FFF5EB;
    background-color: #FFFAF5;
    border-radius: 12px;
    padding:12px 43px;
    font-size: 12.15px;
    font-weight: 700;
    line-height: 15.62px;
    white-space: nowrap;
}
.student-parent-button#working-btn{
    width: 182px;
    height: 40px;
    padding:12px 25.5px !important;
}


.form-input-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 16px;
}

.form-input-container-item{
    width: 100%;
}


.form-label{
    height: 14px;
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
    margin-top: 24px;
    margin-left: 0.31px;
    display: block;
}

html input[type="text"].form-input1,
html input[type="tel"].form-input1,
html input[type="email"].form-input1,
html input[type="password"].form-input1 {
    width: 480px;
    height: 40px;
    margin-top: 12px;
    margin-left: 0.21px;
    border-radius: 12px;
    border: 1.5px solid #F5F5F5;
    background-color: #FAFAFA;
    font-size: 14px;
    font-weight: 400;
    color: #1E1E1E;
    line-height: 12px;
    padding: 14px  20.82px;
}
#first_name, #last_name{
    /* width: 232px; */
    width: 100%;
}

.countrycode-dropdown{
    width: 68px;
    margin-top: 12px;
    position: absolute;
}

.countrycode-trigger{
    width: 68px;
    height: 40px;
  /* padding: 5px; */
  padding: 5px;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  border: 2px solid #F5F5F5;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  background-color: #FAFAFA;
  cursor: pointer;
}
.countrycode-menu{
display: flex;
flex-direction: column;
background-color: #FAFAFA;
width: 68px;
border-radius: 12px;
font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  color: #1E1E1E;
  position: absolute;
  z-index: 9999;
  top: 100%;
  left: 0;
  margin-top: 4px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.countrycode-item {
  padding: 8px 12px;
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  width: 100%;
}

.countrycode-item:hover {
  background-color: #F0F0F0;
}
.newpadding{
    padding-left: 70px !important;
}

.dropcode{
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
}



html input::placeholder {
    color: #D7D7D7; 
    font-size: 12px; /* Optional: Adjust font size */
    font-weight: 400; /* Optional: Adjust font weight */
    opacity: 1; /* Ensure full visibility */
}


.primary-button{
    /* width: 480px; */
    width: 100%;
    height: 40px;
    background-color: #3D348B;
    color: #FFFFFF;
    border-radius: 12px;
    border: 1.5px solid #2C2564;
    padding: 14px 390.18px 14px 20.82px;
    font-size: 12.15px;
    font-weight: 700;
    line-height: 15.62px;
    padding: 12px 219px;
    margin-top: 24px;
}

.primary-button:hover{
    background-color: #584DBC;
    border: 1.5px solid #473DA3;
}

#get-otp-button{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

.google-button{
    width: 480px;
    height: 40px;
    background-color: #F8F8FC;
    border: 1.5px solid #3D348B;
    border-radius: 12px;
    color: #1E1E1E;
    font-size: 12px;
    font-weight: 700;
    line-height: 12px;
    padding: 13.01px 88.49px 13.01px 88.49px;
}

.login-link{
    font-size: 14px;
    font-weight: 700;
    line-height: 14px;
    color: #1E1E1E;
    margin-top: 16.02px;
}

    

.divider{
    border: 1.3px solid #DDDDDD;
    margin-top: 24px;
    margin-bottom: 24px;
    width: 50%;
}
.divider-text{
    font-size: 12.15px;
    font-weight: 700;
    color: #DDDDDD;
    margin-top: 24px;
    margin-bottom: 24px;
}

.verify-otp-container{
    margin-top: 120px;
    margin-left: 130px;
    width: 485px;
    height: 265px;
}



/* OTP Input Styles */
.otp-input-container {
    display: inline-flex;
    gap: 16.55px;
    justify-content: center;
    margin-top: 24px;
    margin-left: 5px;

}

html input[type="text"].otp-input-wrapper {
    width: 66.21px;
    height: 64px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

html input[type="text"].otp-input {
    width: 66.21px;
    height: 64px;
    text-align: center;
    border: 1.5px solid #F5F5F5;
    border-radius: 12px;
    outline: none;
    background-color: #FAFAFA;
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
}

html input[type="text"].otp-input.filled {
    border-color: #FFAA3E;
    background-color: #FFFAF5;
} 

.resend-timer p{
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
    color: #767676;
    margin-top: 20px;
    width: 200px;
    height: 14px;
    margin-left: auto;
    margin-right: auto;
}
/* Vector Lines */

.page-background {
    position: fixed ;
    top: 15px;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFFFFF;
    overflow: hidden;
}

.page-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}




.welcome-cards-container {
    width:940px;
    height: 244px;
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: center;
    margin-top: 36px;
    /* margin-left: 250px; */
}

.welcome-card {
    width: 172px;
    height: 244px;
    border-radius: 16px;
    border: 2px dashed #D6D6D6;
    background-color: #FFFFFF;
    padding: 24px 12px;
}

.welcome-card-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.welcome-card#personal-information-1{
    border: 2px dashed #3D348B;
    background-color: #F1F0F9;
}
.welcome-card-icon{
    width:106px;
    height: 106px;
    border-radius: 53px;
    border:2px solid #F1F1F9;
    background-color: #F8F8FC;
    display: flex;
    align-items: center;
    justify-content: center;
}
.welcome-card-icon#personal-information-icon{
    background-color: #3D348B;
    border:2px solid #2C2564;
}


/* #personal-information-icon{
    width: 33px !important;
    height: 33px !important;
    margin:auto;
} */
.welcome-card-text{
    width: 148px;
    height: 52px;
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    color: #1E1E1E;
    margin-top: 16px;
    /* margin-left: 12px; */
    text-align: center;
}
#welcomep{
    font-size: 14px;
    font-weight: 700;
    line-height: 14px;
    color:#A1A1A1;
    width: 58px;
    height:14px;
    text-align: center;
    margin-top: 60px;
}

html .start-application-button{
    width: 941px !important;
    height: 54px !important;
    background-color: #3D348B;
    color: #FFFFFF;
    border-radius: 12px;
    border: 1.5px solid #2C2564;
    padding:5.61px 18px 5.61px 18px;
    margin-top: 36px;
    /* margin-left: 249px; */
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    width: 131px;
    position: relative;
    z-index: 1;
}


.start-application-button:hover{
    background-color: #584DBC;
    border: 1.5px solid #473DA3;
}

.start-application-button#next-button{
    width: 100% !important; 
    margin-left: 0px;
    margin-top: 32px; /* Adjusted margin-top */
}

.start-application-button#next-button-2{
    width: 239px !important;
    height: 54px !important;
    margin-left: 24px;
    /* margin: 40px; */

}
.start-application-button#next-button-finalize{
    width: 239px !important;
    height: 54px !important;
     margin: 40px;
}

.next-button-container{
    width: 1141px;
    display: flex;
    justify-content: space-between;
}

.next-button-container-mobile{
    display: none;
}
#next-button-container-2{
    width: 100%;
}


.back-button{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 239px;
    height: 54px;
    border: 2px solid #3D348B;
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    border-radius: 12px;
    padding: 5.61px 18px;
    margin-top: 34px;
    color:#3D348B ;
    background-color: #FFFFFF;   
}

.back-button:hover{
    background-color: #E3E1F4;
}


#back-button-finalize{
    margin: 40px;
}

.skip-button{
    width: 69px;
    height: 54px;
    border: 2px solid #3D348B;
    border-radius: 12px;
    font-size:16px;
    font-weight: 700;
    line-height: 140%;
    color: #3D348B;
    background-color: #FFFFFF;
    padding: 16px;
}

.skip-button:hover{
    background-color: #E3E1F4;
}

/* When dropdown is open, adjust button position */
#form-container1-student.expanded .start-application-button#next-button {
    margin-top: 270px;
    position: relative;
    z-index: 1;
}
#form-container1-parent.expanded .start-application-button#next-button {
    margin-top: 270px;
    position: relative;
    z-index: 1;
}


/* / */
form input[type="text"].form-input2,form input[type="email"].form-input2,form input[type="number"].form-input2{
    width: 1141px;
    height: 54px;
    border-radius: 12px;
    background-color: #FFFFFF;
    border: 1.5px solid #E9E9E9;
    margin-top: 12px;
    border-radius: 12px;
    padding: 21px 20.42px;
    font-size: 16px;
    font-weight: 700;
    line-height: 12px;
    color: #1E1E1E;
}

form input[type="text"].form-input2::placeholder,form input[type="email"].form-input2::placeholder,form input[type="number"].form-input2::placeholder{
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    color: #9D9D9D;
}

form input[type="text"].form-input2:focus,form input[type="email"].form-input2:focus,form input[type="number"].form-input2:focus{
    border: 1.5px solid #FFAA3E;
    background-color: #FFFBF5;
}

.parent-info-paragraph{
    display: flex;
    align-items: center;
    gap: 10px;
   width: 1141px;
   height: 54px;
   border-radius: 12px;
   background-color: #F5FFF8;
   border: 1.5px solid #00AD3A85;
   margin-top: 16px;
   font-size: 16px;
   font-weight: 700;
   line-height: 16px;
   color: #50C879;
   padding: 19px;
}
#choose-program-paragraph{
    margin-top: 32px;
    display: flex;
    align-items: center;
    gap: 10px;
}


.progress-bar-container{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-top: 136px;
    width: 1220px;
    height: 81px;
    gap: 20px;
}

.step-card-container-mobile{
    display: none;
}

.step-card{
    width:228px;
    height: 81px;
    background-color: #F1F0F9;
    border-radius: 20px;
    border: 2px solid #E4E2F3;
    display:flex;
    /* gap: 12px; */
}

#step-1{
    border: 2px solid #3D348B;
}

#step-1-done{
 border: 2px solid #2C2564;
 background-color: #3D348B;
}

#step-1-done .step-card-text h3{
    color: #FFFFFF;
}

#step-1-done .step-card-text-span{
    color: #FFFFFF;
}

#step-1-done .step-card-number{
    background-color: #FFAA3E;
    border: 2px solid #FF930A;
}

.step-card-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
}

.step-card-number {
    color: #1E1E1E;
    width: 60px;
    height: 60px;
    border: 2px solid #E4E2F3;
    border-radius: 50%;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
    flex-shrink: 0;
}
#step-1-number{
    color: #3D348B;
    border: 2px solid #3D348B;

}

.step-card-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.step-card-text h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 23.02px;
    color: #1E1E1E;
    margin: 0;
}
#step-1-text h3{
    color: #3D348B !important;
}

.step-card-text-span {
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: #1E1E1E;
}
#step-1-text-span{
    color: #3D348B !important;
}
.welcome-container{
    /* width: 685px !important;
    height: 781px !important; */
   
}
.form-container-container {
    position: relative;
    z-index: 1;
    width: 1338px;
    height: auto;
    /* min-height: 855px; */
    border-radius: 20px;
    display: flex;
    margin: 0 auto;
    background-color: transparent;
}
.form-1-span{
    /* position: relative; */
    position: absolute;
    top: 0px;
    left: -55px;
    font-size: 36px;
    font-weight: 700;
    line-height: 34.7px;
    color: #1E1E1E;
    margin-top: 72px;
    margin-left: 52px;
    display: block;
}


.form-container1 {
    /* position: relative; */
    /* position: absolute; */
    /* margin-top: 32px; */
    margin: 32px auto;
    z-index: 1;
    width: 1221px;
    height: 100%;
    border-radius: 20px;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 25px 0px #E2E2E2;
    /* margin-top: 32px; */
    /* margin-left: 52px; */
    padding: 40px 40px;
}

#form-container1-next-button{
padding: 0px ;
}

#form-container1-student{
    width: 1221px;
    /* height: 855px !important; */
    /* transition: height 0.3s ease; */
}

#form-container1-parent{
    width: 1221px;
    /* height: 561px !important; */
    height:fit-content;
    /* transition: height 0.3s ease; */
}

#form-container1-choose-program{
    width: 1221px;
    height: 886px !important;
}

#form-container1-student.expanded {
    /* height: 997px !important; */
}

#form-container1-parent.expanded {
    /* height: 800px !important; */
}

#form-container1-project-mentors{
    /* width: 1221px; */
    /* height: 543px; */
}

.project-mentors-container{
    width:1140.33px ;
    height: 134.56px;
    display: flex;
    gap: 20px;
    margin-top: 20px;
}
.project-mentors-heading{
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
    color: #1E1E1E;
}

.project-mentor-card{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9.61px;
    width: 270.08px;
    background-color: #F8F8FC;
    border-radius: 19.22px;
    border: 1.5px solid #E9E1F4;
    /* padding: 38.45px; */
    padding: 0px 20px;
}
.project-mentor-card-image img{
    min-width: 57.66px !important;
    height: 57.66px !important;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.project-mentor-card-name{
    width: fit-content;
    height: fit-content;
    
}
.project-mentor-card-name-heading{
    font-size: 18px;
    font-weight: 700;
    line-height: 100%;
    color: #000000;
}
.project-mentor-card-name-paragraph{
    font-size: 13px;
    font-weight: 600;
    line-height:24px;
    color: #838383;
    margin-top: 2.88px
}




html select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    border: none;
    cursor: pointer;
    width: 1141px; 
    height: 54px;
    border-radius: 12px;
    background-color: #FFFFFF;
    border: 1.5px solid #E9E9E9;
    margin-top: 12px; 
    padding: 16px 20.43px;
    font-size: 16px;
    font-weight: 700;
    line-height: 12px;
    color: #1E1E1E;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 16px;
}

html select:focus {
    border: 1.5px solid #FFAA3E;
    background-color: #FFFBF5;
}

html select option {
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    line-height: 12px;
    color: #1E1E1E;
    background-color: #FFFFFF;
    border: none;
}

/* Remove default select styling */
html select::-ms-expand {
    display: none;
}

/* Create a custom dropdown container */
.dropdown-menu1 {
    position: relative;
    width: 1141px;
}

.custom-select {
    position: relative;
    width: 100%;
    height: 54px;
    border-radius: 12px;
    background-color: #FFFFFF;
    border: 1.5px solid #E9E9E9;
    margin-top: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20.43px;
}

.select-arrow {
    width: 12px;
    height: 12px;
    border-right: 2px solid #9D9D9D;
    border-bottom: 2px solid #9D9D9D;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    margin-top: -6px;
}

.custom-select.active .select-arrow {
    transform: rotate(-135deg);
    margin-top: 6px;
}

.select-selected {
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    color: #353535;
    padding: 19px 20.43px; 
}

.select-selected-default {
    font-size: 16px;
    font-weight: 700;
    line-height: 12px;
    /* color: #1E1E1E; */
    color: #D7D7D7;
}


.select-options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: fit-content;
    background-color: #FFFFFF;
    border: 1.5px solid #E9E9E9;
    border-radius: 12px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none;
    overflow-y: auto;
    margin-top: 16px;
}
#project-duration-options{
   height: 180px !important;
}
#project-goal-options{
   height: 280px !important;
}


.select-options.show {
    display: block;
    height: auto !important;
}

.select-option {
    /* padding: 20px 16px; */
    padding-top: 20px;
    padding-bottom: 16px;
    padding-left: 20px;
    /* padding-right: 16px; */
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    color: #9D9D9D;
    cursor: pointer;
    position: relative;
    z-index: 10000;
}

.select-option:first-child {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.select-option:last-child {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.select-option:hover {
    background-color: #FFF7EB;
    border: 1.5px solid #FFAA3E;
    color: #000000;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
}

.select-option:first-child:hover {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.select-option:last-child:hover {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}




.custom-select:focus-within {
    border: 1.5px solid #FFAA3E;
    background-color: #FFFBF5;
    position: relative; /* Added position relative */
    z-index: 9999; /* Match z-index with options container */
}




.program-container{
    width: 1140px;
    height: 543px;
    display: flex;
    gap: 24px;
    margin-top: 32px;
    align-items: center;
    
}

.program-card {
    background-image: url("/icons/choose-vector.png"), linear-gradient(169.59deg, #FFFFFF 52.4%, rgba(255, 208, 147, 0.25) 100%);
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    overflow: hidden;
    width: 267px;
    height: fit-content;
    padding: 24px;
    border-radius: 16px;
    border: 1.5px solid #FFF6EB;
    cursor: pointer;
    /* transition: all 0.3s ease; */
}

/* Add styles for disabled program cards */
.program-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    /* background-image: url("/icons/choose-vector.png"), linear-gradient(169.59deg, #F5F5F5 52.4%, rgba(200, 200, 200, 0.25) 100%); */
    border: 1.5px solid #E9E9E9;
}

/* .program-card.disabled .program-card-title,
.program-card.disabled .program-card-description,
.program-card.disabled .program-card-includes,
.program-card.disabled .program-card-includes-item p,
.program-card.disabled .program-card-price {
    color: #9D9D9D;
} */

.program-card.disabled .program-card-includes-item img {
    opacity: 0.6;
}

#program-card-2{
    background-image: url("/icons/choose-vector.png"),linear-gradient(169.59deg, #FFFFFF 52.4%, rgba(165, 159, 219, 0.25) 100%);
    background-repeat: no-repeat;
    background-position: center center;
 
}


.program-card.selected {
    border: 2px solid #FFAA3E;
    box-shadow: 0px 0px 20px rgba(255, 170, 62, 0.1);
    /* transform: translateY(-2px); */
}

#program-card-head-2{

}


.program-card#program-card-2.selected {
    border: 2px solid #3D348B;
    box-shadow: 0px 0px 20px rgba(61, 52, 139, 0.1);
}

.program-card-head{
    /* width:135px; */
    width: fit-content;
    height:40px;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 700;
    line-height: 12px;
    color:#FFAA3E;
    border-radius: 80px;
    border: 1.5px solid #FFAA3E;
    background-color: #FFF6EB;
}


#program-card-head-2{
    color:#3D348B;
    border: 1.5px solid #3D348B;
    background-color: #F1F0F9;
}

.program-card-title{
    width:220px;
    height:90px;
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
    color: #353535;
    margin-top: 16px;
    white-space:pre-line;    
    
}

.program-card-description{
    width:220px;
    /* height:105px; */
    height: auto;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    color: #353535;
    margin-top: 16px;
    margin-bottom: 16px;
}
.program-card-includes{
    font-size: 20px;
    font-weight: 700;
    line-height: 27px;
    color: #353535;
}

.program-card-includes-item {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 10px;
}



.program-card-includes-item p {
   font-size: 14px;
   font-weight:600;
   line-height: 20px;
   color: #000000;
}
.program-card-price{
    font-family: 'Poppins';
    width: 220px;
    height:28px;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: #1E1E1E;
    margin-top: 16px;
}


.checkbox-group {
    width: 1141px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
}

.checkbox-container {
    width: 1141px;
    height: 84px;
    background-color:#F8F8FC;
    border-radius: 16px;
    border: 2px solid #F1F1F9;
    display: flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    padding: 16px 20px;
    position: relative;
    z-index: 1;
}

.checkbox-container input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border: 1.5px solid #E9E9E9;
    border-radius: 4px;
    cursor: pointer;
}

.checkbox-container input[type="checkbox"]:checked {
    background-color: #FFAA3E;
}


.checkbox-container:has(input[type="checkbox"]:checked) {
    background-color: #FFF6EB;
    border: 2px solid #FFAA3E;
}

.checkbox-text {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
    color: #1E1E1E;
}
.checkbox-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1.5px solid #E9E9E9;
    background-color: #FFFFFF;
}
.checkbox-container:has(input[type="checkbox"]:checked) .checkbox-icon {
    border: 1.5px solid #FFAA3E;
}

#form-container1-student-interests{
    width: 1221px;
    height:auto !important;
    /* transition: height 0.3s ease; */
}
#form-container1-student-interests.expanded{
    height: auto !important;
}




.checkbox-group,
.interest-dropdown .interest-cards {
    max-height: 260px; /* adjust as needed */
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
}
.checkbox-group::-webkit-scrollbar,
.interest-dropdown .interest-cards::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}





.quiz-paragraph{
    width: 700px;
    height: 24px;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    margin-top: 32px;
}

.quiz-paragraph span{
    color: #FFAA3E;
    cursor: pointer;
}

.interest-dropdown {
    width: 1141px;
    height: 260px;
    border-radius: 16px;
    border: 2px solid #FFF6EB;
    background-color:#FFFAF5;
    /* margin-top: 12px; */
    position: relative;
    z-index: 0;
    display: none; /* Hide by default */
}

 html input[type="text"].search-input-1{
    width: 1109px !important;
    height: 48px;
    border-radius: 12px;
    border: 1.5px solid #FFF1E0;
    background-color: #FFFFFF;
    margin-top: 12px;
    margin-left: 16px;
    padding: 14px 20.82px;
}
.search-input-1::placeholder{
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    color:#9D9D9D;
}

.interest-cards{
    width: 1063px;
    min-height: 160px;
    border-radius: 16px;
    background-color: #FFFAF5;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px;
}

.interest-card{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: fit-content;
    min-width: 165px;
    height: 72px;
    border-radius: 14px;
    border: 2px solid #FFF1E0;
    background-color: #FFFFFF;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0 20px;
}

.interest-card:hover {
    border-color: #FFAA3E;
    background-color: #FFF6EB;
}

.interest-card.selected {
    border: 2px solid #2C2564;
    background-color: #3D348B;
}

.interest-card.selected .interest-card-text {
    color: #FFFFFF;
}

.interest-card img{
    width: 32px;
    height: 32px;
    padding: 0;
}

.interest-card-text{
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color: #1E1E1E;
    white-space: normal;
    word-wrap: break-word;
    max-width: 120px;
    text-align: center;
}

#form-container1-student-project {
    width: 1221px;
    height: auto !important;
}

#form-container1-student-project.inspiration-selected {
    height: auto !important;
}

.select-option-container{
    margin-top: 32px;
}

.select-option-text{
    display: flex;
    align-items: center;
    justify-content: left;
    width: fit-content;
    height: 14px;
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
    color: #1E1E1E;
}

.select-option-button{
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: left;
    width: 1141px;
    height: 54px;
    border-radius: 12px;
    border: 1.5px solid #EAEAF6;
    gap: 8.68px;
    padding: 18px 20px;
    font-size: 16px;
    font-weight: 700;
    line-height: 15.62px;
    color: #1E1E1E;
    background-color: #F8F8FC;
    cursor: pointer;
    transition: all 0.3s ease;
}

.select-option-button.selected{
    background-color: #FFFAF5;
    border: 1.5px solid #FF930A;
}

.select-option-button.selected span img {
    filter: brightness(0) saturate(100%) invert(50%) sepia(100%) saturate(1000%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.idea-input-container {
    margin-top: 24px;
    width: 1141px;
}

.project-vision-input {
    border: 1.5px solid #E9E9E9;
    border-radius: 12px;
    padding: 20px;
    width: 1141px;
    height: 120px;
    margin-top: 12px;
    font-size: 16px;
    line-height: 16px;
    font-weight: 500;
    color: #1E1E1E;
    resize: none;
    background-color: #FFFFFF;
}
.project-vision-input::placeholder{
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    color: #9D9D9D;
}

.project-vision-input:focus {
    outline: none;
    border: 1.5px solid #FFAA3E;
    background-color: #FFFBF5;
}

.char-count-container {
    margin-top: 8px;
    text-align: right;
    font-size: 14px;
    font-weight: 500;
    color: #9D9D9D;
}

.project-idea-container{
    margin-top: 32px;
}

.project-duration-container-wrapper{
   display: flex;
   align-items: center;
   justify-content: center;
   width: 1141px;
   height: 80px;
   margin-top: 32px;
   gap: 16px;
}

.desired-project-start-date-container{
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    width: 299px;
    font-size: 14px;
    font-weight: 600;
}




.project-duration-container{
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    /* justify-content: center; */
    /* width: 826px; */
}





.date-input-container{
    width:826px ;
    height: 54px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.date-input-container input{
    margin-top: 12px;
    width: 299px;
    height: 54px;
    border-radius: 12px;
    border: 1.5px solid #E9E9E9;
    padding: 18px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #1E1E1E;
    cursor: pointer;    
}
.date-input-container input::-webkit-calendar-picker-indicator {
    cursor: pointer; /* Apply pointer cursor to the calendar icon */
}


.date-input-container input:hover{
    cursor: pointer;
}



#project_duration{
    width: 826px;
    
}
#project-duration-text{
    /* justify-content: left; */
    width: fit-content;
    /* margin-left: 82px; */
}
#desired-project-start-date-text{
    justify-content: left;
    width: fit-content;
    height: fit-content;
}

.review-details-span{
    font-size: 20px;
    line-height: 20px;
    font-weight: 700;
    color: #1E1E1E;
    margin-top: 32px;
}


#form-container1-student-finalize {
    width: 1221px;
    height: auto !important;
    /* padding-bottom: 40px; */
    overflow: visible;
}


.finalize-heading-container{
    margin-top: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.edit-button{
    width: 26px;
    height: 14px;
    text-decoration: underline;
    font-size: 14px;
    line-height: 14px;
    font-weight: 600;
    color:#3D348B;
}

.finalize-heading{
    font-size: 14px;
    line-height: 14px;
    font-weight: 600;
    color: #838383;
}

.finalize-section{
    margin-top: 12px;
    padding: 24px 24px 0px 24px;
    border-radius: 16px;
    border: 1.5px solid #FFF2E0;
    background-color: #FFFBF5;
}

#finalize-program-section{
    background-color: #F8F8FC;
    border: 1.5px solid #E3E1F4;
}

#finalize-project-vision-section{
    background-color: #F8F8FC;
    border: 1.5px solid #E3E1F4;
    /* margin-bottom: 24px; */
}

.finalize-item{
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}
#finalize-project-vision-description{
    top: 12px;
    flex-direction: column;
}
.finalize-label{
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
    color: #1E1E1E;
}

.finalize-value{
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
    color: #1E1E1E;

}
#finalize-project-vision-description .finalize-value{
    margin-top: 12px;
}

.finalize-value p {
    margin: 0;
    padding: 0;
}

/* Thank You Page Styles */
.form-container1-thank-you {
    width: 1440px !important;
    /* height: auto !important; */
    margin: 96px 0 auto;
    display: flex;
    /* position: fixed; */
    /* left: 50%; */
    /* transform: translateX(-50%); */
}

.thank-you-container-wrapper{
    display: flex;
    position: relative;
}

.thank-you-container{
    width: 635px;
    height: 404px;
    margin-top: 47px;
    margin-left: 168px;
    cursor: default;
}


.thank-you-heading{
    font-size: 52px;
    line-height:74px;
    font-weight: 700;
    color: #1E1E1E;
}


.highlight {
    display: inline-block;
    position: relative;
    color: #FFFFFF;
    background-color: #3D348B;
    padding: 6px 12px;
    border: 2px solid #1E1E1E;
    clip-path: polygon(
        0% 0%, 2.5% 25%, 0% 50%, 2.5% 75%, 0% 100%, 100% 100%, 
        97.5% 75%, 100% 50%, 97.5% 25%, 100% 0%
    );
}




.thank-you-paragraph{
    margin-top: 44px;
    width: 635px;
    height: 52px;
    font-size: 20px;
    line-height: 26px;
    font-weight: 500;
    color: #1E1E1E;
}

.thank-you-timer-container{
    margin-top: 55px;
    width: 232px;
    height:76px;
    padding:12px 13px;
    border-radius: 12px;
    border: 2px solid #FF930A;
    background-color: #FFAA3E;
}

.thank-you-timer{
    font-size: 52px;
    line-height: 52px;
    font-weight: 700;
    color: #3D348B;
}

.thank-you-download-container{
    margin-top: 44px;
   
}
.thank-you-download-container a{
    color: #3D348B;
    font-size: 20px;
    line-height: 100%;
    font-weight: 618;
    text-decoration: underline;
}

.thank-you-image-container{
    margin-top: 36px;
    /* position: fixed;
    
    margin-left: 800px;
    z-index: 10;
    display: block; */
}

.thank-you-image-container img {
    /* width: 559.98px !important; */
    /* height: 637px !important; */
    width: 100%;
    height: 100%;
    object-fit:contain;
    position: sticky;
    z-index: 2;
}

.thank-you-footer{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 120px;
    background-color: #3D348B;
    color: #FFFFFF;
    z-index: 1;
}

.thank-you-footer-container{
padding: 40px 168px;
}
.thank-you-footer-content{
    display: flex;
    align-items: center;
    justify-content:space-evenly;
    gap: 16px;
    width: 377.47px;
    height: 40px;
}

.thankyou-footer-text{
    width: 156px;
}
.thankyou-footer-icons{
    width: 205.47px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.icon-footer{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 39.37px;
    height: 39.37px;
    background-color: #413894;
    border:2px solid #483EA3 ;
    border-radius: 100%;
    cursor: pointer;
}



.dashboard-bg-container{
    position: fixed ;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFFFFF;
    overflow: hidden;

}

.dashboard-bg-container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.dashboard-container{
  display: flex;
  flex-direction: column;
  gap: 32px;
}









.dashboard-welcome-container{
    background-image: url('/images/dash-heading.png');
    background-size:contain;
    background-repeat: no-repeat;
    background-position: right;
    display: flex;
    flex-direction: column;
   width: 1360px;
   height: 197px;
   box-shadow: 0px 0px 24px 0px #00000040;
   margin: 90px  auto 0;
   border-radius: 32px;
   background-color: #FFFFFF;
   overflow: hidden;
   position: relative;
   z-index: 2;
}

.dashboard-welcome-container::before{
    width: 100%;
    height: 100%;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(93.6deg, #FFFFFF 64%, rgba(255, 170, 62, 0.4) 92%);
    z-index: 1;
    border-radius: 32px;
}

.dashboard-welcome-heading{
    margin-top: 43px;
    margin-left: 32px;
    font-size: 48px;
    line-height: 48px;
    font-weight: 700;
    color: #1E1E1E;
    z-index: 2;
    position: relative;
}

.dashboard-welcome-paragraph{
    margin-top: 18px;
    margin-left: 32px;
    width: 864px;
    height: 48px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #353535;
    z-index: 2;
    position: relative;
}
.dashboard-welcome-paragraph strong {
    font-weight: 700;
}
.dashboard-welcome-paragraph u {
    text-decoration: underline;
    font-weight: 600;
}


.dashboard-counselling-container{
    display: flex;
    gap: 32px;
    margin:auto;
    width: 1360px;
    height: 240px;
    border-radius: 32px;
}

.dashboard-counselling-heading-container{
    width: 664px;
    height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    background-color: #FFFFFF;
    border: 2px solid #FFFFFF;
    border-radius: 32px;
    padding: 32px;
    background-image: url('/icons/scholar-vector.png');
    background-size: cover;
    background-position: center;
}


.dashboard-counselling-heading-container:hover{
    border: 2px solid #3D348B;
    background-color: #443A9C;
    cursor:pointer;
    background-image: linear-gradient(rgba(68, 58, 156, 0.9), rgba(68, 58, 156, 0.9)), url('/icons/scholar-vector.png');

}

.dashboard-counselling-heading-container:hover .dashboard-counselling-heading,
.dashboard-counselling-heading-container:hover .dashboard-counselling-paragraph {
    color: #FFFFFF;
    cursor: pointer;
}

.dashboard-counselling-heading{
    width: 600px;
    height: 116px;
    font-size: 48px;
    line-height: 58px;
    font-weight: 700;
    color: #353535;
}

.dashboard-counselling-heading-icon{
    display: inline;    
}

.dashboard-counselling-paragraph{
    width: 600px;
    height: 44px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    color: #000000;
}

.dashboard-counselling-view-container{
    width: 316px;
    height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #3D348B;
    border-radius: 32px;
    padding: 32px;
    /* gap:14px; */
}

.dashboard-counselling-view-heading{
    font-size: 30px;
    line-height: 38px;
    font-weight: 700;
    color: #FFFFFF;
}

.dashboard-counselling-view-heading-span{
    color: #FFAA3E !important;
}

.dashboard-counselling-view-button{
    width: 252px;
    height: 48px;
    border-radius: 16px;
    border: 1.5px solid #FFFFFF;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    color: #FFFFFF;
    margin-top: 10px;
}

.dashboard-counselling-view-button:hover{
    background-color: #FFFFFF;
    color: #3D348B;
    cursor: pointer;
}

#dashboard-counselling-mentor-container{
    background-color: #F8F8FC;
    border: 2px solid #EAE9F7;
}

#dashboard-counselling-mentor-heading{
    color: #000000;
}
#dashboard-counselling-mentor-button{
    background-color: #3D348B;
    border: 1.5px solid #2C2564;
    color: #FFFFFF;
}

#dashboard-counselling-mentor-button:hover{
    background-color: #584DBC;
    border: 1.5px solid #473DA3;
}

.dashboard-webinar-container{
    display: flex;
    gap: 32px;
    margin:auto;
    width: 1360px;
    height: 232px;
}


.dashboard-webinar-heading-container{
    width: 422px;
    height: 232px;
    border-radius: 32px;
    background: linear-gradient(359.55deg, rgba(61, 52, 139, 0.5) 0.23%, rgba(255, 255, 255, 0.15) 99.46%);
    border: 2px solid #A4A0C4;
    backdrop-filter: blur(2px);
    padding: 32px;

}

.dashboard-webinar-heading{
    font-size: 44px;
    line-height: 52px;
    font-weight: 700;
    color: #3D348B;
}

.dashboard-webinar-button{
    margin-top: 16px;
    width: 181px;
    height: 48px;
    border-radius: 16px;
    border: 2px solid #2C2564;
    background-color: #3D348B;
    color: #FFFFFF;
}

.dashboard-webinar-button:hover{
    background-color: #584DBC;
    border: 2px solid #473DA3;
}


.dashboard-webinar-register-container{
    background-image: url('/images/dash-register.png');
    background-size: cover;
    background-position: center;
    width: 210px;
    height: 232px;
    border-radius: 32px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.dashboard-webinar-register-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6); /* dark overlay for contrast */
    border-radius: 32px;
    z-index: 0;
}

.dashboard-webinar-register-heading{
    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
    color: #FFFFFF;
    position: relative;
    z-index: 1;
}

.dashboard-webinar-register-button{
    width: 146px;
    height: 44px;
    border-radius: 16px;
    border: 2px solid #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 100%;
    font-weight: 700;
    color: #FFFFFF;
    z-index: 1;
}

.dashboard-webinar-register-button:hover{
    background-color: #FFFFFF;
    color: #3D348B;
}

.dashboard-webinar-project-container{
    width: 664px;
    height: 232px;
    border-radius: 32px;
    border: 2px solid #3D348B;
    backdrop-filter: blur(5.599999904632568px);
    padding: 32px;
    background-color: #3D348B;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dashboard-webinar-project-heading{
    font-size: 44px;
    line-height: 44px;
    font-weight: 700;
    color: #FFFFFF;
}

.dashboard-webinar-project-paragraph{
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    color: #FFFFFF;
}

.dashboard-webinar-project-button{
    width: 197px;
    height: 48px;
    border-radius: 16px;
    background-color: #ffffff;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    color: #3D348B;
    border: 2px solid #3D348B;
    box-shadow: 3px 3px 0 0 #ffffff; /* creates the bottom-right border effect */
    position: relative;
    /* transition: transform 0.2s ease, box-shadow 0.2s ease; */
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px; /* space between text and icon */
}
.dashboard-webinar-project-button:hover {
    background-color: #3D348B;
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
    /* transform: translate(-2px, -2px); */
    box-shadow: 3px 3px 0 0 black;
    ;     
}

.dashboard-brochure-container{
    width: 1360px;
    height: 66px;
    margin:auto;
    margin-bottom: 32px;
    border-radius: 32px;
    border: 1.5px solid #BAB5E3;
    background-color: #F8F8FC;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* gap: 16px; */
}

.dashboard-brochure-paragraph{
  
    font-size: 18px;
    line-height: 16px;
    font-weight: 700;
    color: #3D348B;
    /* padding: 16px 10px; */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 32px;
    gap: 10px;
}

.dashboard-brochure-button{
    width: 197px;
    height: 48px;
    border-radius: 32px;
    background-color: #3D348B;
    border: 1.5px solid #2C2564;
    color: #FFFFFF;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    display: flex;
    margin-right: 10px;
}

.dashboard-brochure-button:hover{
    background-color: #584DBC;
    border: 1.5px solid #473DA3;
}


.next-finalize-container{
    width: 1221px;
    height: 224px;
    /* top: 395px; */
    left: 50%;
    transform: translateX(-50%);
    position: relative;
    background-color: #3D348B;
    border-radius: 20px;
    border: 1.5px solid #2C2564;
}
.next-finalize-container-one{
    width: 1141px;
    height: 60px;
    color: #FFFFFF;
    border-radius: 20px;
    letter-spacing: 0%;
    margin-top: 40px;
    margin-left: 40px;
}
.refundable-button{
    position: absolute;
    top: -1px;
    right: -1px;
    width: 99px;
    height: 34.52px;
    color: #2C2564;
    border-top-right-radius: 20px;
    border: 1.29px solid #2C2564;
    background-color: #F1F0F9;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
}
.next-finalize-container-one-heading{
    width: 956px;
    height: 60px;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: #FFFFFF;
}

.next-finalize-container-two{
    width: 280px;
    height: 64px;
    border-radius: 14px;
    background-color: #FFFFFF;
    margin-top: 20px;
    margin-left: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px dashed #000000;
}
.next-finalize-container-two h1{
    width: 72px;
    height: 40px;
    /* padding: 12px 16px; */
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: #000000;
}
.next-finalize-container-two-icons{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.city-search-container {
    position: relative;
    width: 100%;
}

.city-suggestions {
    position: relative;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #FFFFFF;
    border: 1.5px solid #E9E9E9;
    border-radius: 12px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none;
    max-height: 200px;
    overflow-y: auto;
    margin-top: 16px;
}

.city-suggestion {
    padding: 20px 16px;
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    color: #9D9D9D;
    cursor: pointer;
    position: relative;
    z-index: 10000;
}

.city-suggestion:first-child {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.city-suggestion:last-child {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.city-suggestion:hover {
    padding: 20px 16px;
    background-color: #FFF7EB;
    border: 1.5px solid #FFAA3E;
    color: #000000;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
}

.city-suggestion:first-child:hover {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.city-suggestion:last-child:hover {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.dashboard-start-application-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #353535;
    text-decoration: underline;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
}

.dashboard-start-application-button:hover {
    color: #3D348B;
}

/* Booking Modal Styles */
.booking-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.booking-modal.show-backdrop::before {
    content: '';
    position: fixed;
    inset: 0;
    backdrop-filter: blur(4px);
    background: rgba(30, 30, 30, 0.71);
    z-index: 999;
}

.booking-modal-content {
    position: relative;
    z-index: 1000;
    background-color: #FFFFFF;
    border-radius: 32px;
    width: 100%;
    max-width: 640px;
    height: auto;
    padding: 32px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.booking-modal-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 100%;
    margin-bottom: 8px;
    color: #000000;
}

.booking-modal-subtitle {
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    margin-bottom: 20px;
    color: #353535;
}

.booking-topics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
    max-height: 320px;
    overflow-y: auto;
}
.booking-topics-grid-mobile{
    display: none;
}

.topic-btn {
    padding: 8px;
    border: 2px solid #F1F1F9;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    color: #353535 !important;
    background-color: #F8F8FC !important;
    cursor: pointer;
    text-align: left;
}

    /* transition: background-color 0.2s ease; */


.topic-btn.selected {
    background-color: #3D348B !important;
    color: #FFFFFF !important;
    border-color: #2C2564 !important;
}

.topic-btn-icon-container{
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background-color: #FFFFFF;
    border: 2px solid #F1F1F9;
    margin-right: 12px;
}

.topic-btn-icon-container img{
    filter: brightness(0);
}

.topic-btn.selected .topic-btn-icon-container {
    background-color: #443A9C;
    border: 1px solid #493EA7;
}

.topic-btn.selected .topic-btn-icon-container img {
    filter: brightness(0) invert(1);
}

.booking-modal-line{
    width: 100%;
    /* height: 1px; */
    /* background-color: #E9E9E9; */
    /* border: 2px dashed #E9E9E9; */
    background-image: linear-gradient(to right, #E9E9E9 50%, transparent 50%);
background-size: 15px 2px; /* Adjust 20px to control dash length */
background-position: bottom;
background-repeat: repeat-x;
padding-bottom: 2px; /* Same as border width */
    margin-top: 32px;
    margin-bottom: 32px;
}

.date-selectors {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 12px;
}

@media (min-width: 640px) {
    .date-selectors {
        flex-direction: row;
    }
}

.date-selector {
    flex: 1;
}

.date-selector label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
    margin-bottom: 12px;
    color: #1E1E1E;
}
.date-selector {
    position: relative;
}

.date-selector input[type="date"] {
    width: 100%;
    height: 54px;
    border: 1.5px solid #F5F5F5;
    border-radius: 12px;
    padding: 0 21px;
    font-size: 16px;
    /* line-height: 12px; */
    font-weight: 600;
    color: #1E1E1E;
    background-color: #FAFAFA;
    cursor: text;
}




.date-selector input[type="date"]:focus {
    border-color: #3D348B;
    background-color: #F8F8FC;
    border: 2px solid #3D348B;
    outline: none;
}

.schedule-button-container {
    display: flex;
    /* justify-content: flex-end; */
    margin-top: 24px;
}

.schedule-button {
    background-color: #3D348B;
    color: #FFFFFF;
    height: 54px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    border: 1.5px solid #2C2564;
    cursor: pointer;
    width: 100%;
    /* transition: all 0.2s ease; */
}

.schedule-button:hover {
    background-color: #584DBC;
    border-color: #473DA3;
}


.success-modal{
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.success-modal.show-backdrop::before {
    content: '';
    position: fixed;
    inset: 0;
    backdrop-filter: blur(4px);
    background: rgba(30, 30, 30, 0.71);
    z-index: 999;
}

.success-modal-content {
    position: relative;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    width: 457px;
    height: 344px;
    border-radius: 20px;
    background-color: #FFFFFF;
}
.success-modal-icon-container{
    /* position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%); */
   width:74px;
   height:74px;
   border-radius: 37px;
   background-color: #D5D2EE;
   border: 2px dashed #2C2564;
   /* padding: 10px; */
   display: flex;
   align-items: center;
   justify-content: center;
}

.success-modal-icon-container-inner{
    width: 54px;
    height: 54px;
    border-radius: 27px;
    border: 2px solid #2C2564;
    background-color:#3D348B ;
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-modal-heading{
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    color: #353535;
    font-family: 'Poppins';
    margin-top: 20px;
}

.success-modal-title{
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
    color: #353535;
    font-family: 'Poppins';
    text-align: center;
    margin-top: 20px;
}

.success-modal-paragraph{
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #4D4D4D;
    font-family: 'Poppins';
    margin-top: 12px;
    text-align: center;
}

.success-modal-button-container{
    width: 100%;
    margin-top: 20px;
}

.success-modal-button {
    background-color: #3D348B;
    color: #FFFFFF;
    height: 54px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 100%;
    border: 1.5px solid #2C2564;
    cursor: pointer;
    width: 100%;
    font-family: 'Poppins';
    /* transition: all 0.2s ease; */
}

.success-modal-button:hover {
    background-color: #584DBC;
    border-color: #473DA3;
}


.webinar-podcast-heading-container{
    margin-top: 137px;
  font-size: 52px;
  line-height: 52px;
  font-weight: 700;
  text-align: center;
}
.webinar-podcast-paragraph-container{
    margin-top: 16px;
    font-size: 20px;
    line-height: 20px;
    font-weight: 400;
    text-align: center;
}
.webinar-podcast-button-container{
    margin-top: 24px;
    display: flex;
    justify-content: center;
    gap: 16px;
}
.webinar-podcast-button{
    background-color: #FFFAF5;
    color: #FF930A;
    border: 1.5px solid #FF930A;
    height: 40px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    line-height: 15px;
    padding: 12px 36px;
}
.webinar-podcast-button.active{
    background-color: #FFAA3E;
    color: #FFFFFF;
}



.webinar-podcast-topics-grid {
    display: grid;
    grid-template-columns: repeat(3, 0fr);
    gap: 32px;
    margin: 40px auto;
    max-width: 1440px;
    padding: 0 20px;
    justify-content: center;
}

.webinar-podcast-topic-overlay-container{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 432px;
    height: 243px;
    border-radius: 32px;
    border: 1.5px solid #F5F5F5;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.webinar-podcast-topic-container {
    width: 432px;
    height: 243px;
    border-radius: 32px;
    border: 1.5px solid #F5F5F5;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.webinar-podcast-topic-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.webinar-podcast-topic-container:hover {
    transform: translateY(-5px);
}

.webinar-podcast-topic-overlay {
    /* position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: 28px;
    padding-left: 32px;
    background: linear-gradient(359.45deg, rgba(30, 30, 30, 0.72) 0.55%, rgba(30, 30, 30, 0) 99.48%);
    color: #FFFFFF;
    z-index: 2; */
    
        /* position: absolute; */
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: 28px;
    padding-left: 32px;
    background: linear-gradient(359.45deg, rgba(30, 30, 30, 0.72) 0.55%, rgba(30, 30, 30, 0) 99.48%);
    color: #FFFFFF;
    z-index: 2;
    
}

.webinar-podcast-topic-text {
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    color: #FFFFFF;
    cursor: pointer;
}

.webinar-podcast-topic-tag-container{
    /* position: absolute;
    top: 0;
    left: 0;
    margin-top: 133px;
    margin-left: 32px;
    display: flex;
    gap: 8px;
    z-index: 2; */
    /* position: absolute; */
    top: 0;
    left: 0;
    /* margin-top: 133px; */
    margin-left: 32px;
    display: flex;
    gap: 8px;
    z-index: 2;
    margin-bottom: 8px;

}

.webinar-podcast-topic-tag{
    font-size: 10px;
    font-weight: 500;
    line-height: 9.1px;
    color: #FFFFFF;
    font-family: 'Poppins';
    padding: 9.96px 13px;
    cursor: pointer;
    border-radius: 19.52px;
    border: 1.3px solid #FFFFFF;
    white-space: nowrap;
}


.webinar-podcast-topic-tag-container:has(p:first-child + p) p:first-child {
    background-color: #FFF5EB;
    color: #FF930A;
    border: 1.3px solid #FF930A;
}


/* researach project css */


.research-projects-container-background{
  background-color: #F8F8FC;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}




.research-projects-container{
    width: 453px;
    height: 52px;
    margin-top: 137px;
    font-weight: 700;
    font-size: 52px;
    line-height: 52px;
    letter-spacing: 0%;
    margin-left: auto;
    margin-right: auto;
    color: #1E1E1E;
}

.research-projects-paragraph-container{
    width: 872px;
    height: 20px;
    margin-top: 16px;
    font-size: 20px;
    line-height: 20px;
    font-weight: 400;
    color: #000000;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    text-wrap: nowrap;
}
.filter-container-mobile{
    display: none;
}
.filter-modal{
    display: none;
}

.filter-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1359px;
    height: 56px;
    margin: 40px auto;
    gap: 16px;
}



.filter-container-item {
    width: 316px;
    background-color: #FFFFFF;
    border-radius: 16px;
    display: flex;
    align-items: center;
    position: relative;
}

.filter-search-input {
    width: 316px;
    height: 56px;
    background-color: #FFFFFF;
    border-radius: 16px;
    border: 2px solid #F1F1F9;
    padding: 0 16px;
    font-size: 16px;
    font-weight: 500;
    color: #1E1E1E;
    outline: none;


    
}

.search-icon-container{
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.search-icon-container img{
    position: absolute;
    left: 16px;
    width: 20px;
    height: 20px;
    z-index: 2;
    pointer-events: none;
}


html input[type="text"].filter-search-input{
    border: 2px solid #F1F1F9;
    border-radius: 16px;
    padding-left: 52px;
}

html input[type="text"].filter-search-input::placeholder {
    color: #9CA3AF;
    font-size: 16px;
    font-weight: 400;
}

.filter-search-input:focus {
    border: 2px solid #FFAA3E !important;
    background-color: #FFFBF5;
    font-weight: 600;
}

/* Custom Dropdown Styles */
.custom-dropdown {
    position: relative;
    width: 316px;
    height: 56px;
}

.dropdown-btn {
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    border: 2px solid #F1F1F9;
    border-radius: 16px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: #1E1E1E;
    outline: none;
    transition: all 0.2s ease;
}

.dropdown-btn:hover {
    border-color: #E5E7EB;
}

.dropdown-btn:focus,
.dropdown-btn.active {
    border: 2px solid #FFAA3E;
    background-color: #FFFBF5;
}

.dropdown-btn.placeholder {
    color: #9CA3AF;
}
.dropdown-text{
    
font-weight: 600;
font-size: 16px;
line-height: 16px;
color: #353535;

}

.dropdown-arrow {
    width: 12px;
    height: 12px;
    border-right: 2px solid #6B7280;
    border-bottom: 2px solid #6B7280;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.dropdown-btn.active .dropdown-arrow {
    transform: rotate(-135deg);
}

.dropdown-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
    border: 2px solid #F1F1F9;
    border-radius: 16px;
    margin-top: 4px;
   padding-left: 20px;
   padding-bottom: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    max-height: 344px;
    overflow-y: auto;
}

.dropdown-options.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-option {
    width: 100%;
    height: 100%;
    background: none;
    margin-top: 16px;
    border: none;
    text-align: left;
    font-size: 16px;
    font-weight: 500;
    color: #1E1E1E;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.dropdown-option:first-child {
    border-radius: 14px 14px 0 0;
}

.dropdown-option:last-child {
    border-radius: 0 0 14px 14px;
}

.dropdown-option:only-child {
    border-radius: 14px;
}

.dropdown-option:hover {
    background-color: #F9FAFB;
}

.dropdown-option.selected {
    background-color: #FFFBF5;
    color: #3D348B;
    font-weight: 600;
}




.research-projects-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin: 32px auto;
    width: 1359px;
    margin-left: auto;
    margin-right: auto;
}

.research-projects-grid-item{
    width: 316px;
    /* height: 453px; */
    height: auto;
    border-radius: 20px;
    border: 2px solid #F1F1F9;
    overflow: hidden;
    background-color: #FFFFFF;
}

.research-projects-grid-item-image-container{
    width: 316px;
    height: 160px;
    /* border-radius: 20px; */
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    overflow: hidden;
   
}
.research-projects-grid-item-image-container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.research-projects-grid-item-title-container{
    padding: 24px;
    width: 316px;
    /* height: 293px; */
    height: auto;
}

.research-projects-grid-item-title-container-tags-container{
    display: flex;
    gap: 8px;
}

.research-projects-grid-item-title-container-tags{
    width: fit-content;
    padding: 9.96px 12px;
    border-radius: 19.52px;
    border: 1.3px solid #FF930A;
    font-size: 12px;
    font-weight: 700;
    line-height: 12px;
    color: #FF930A;
}
.research-projects-grid-item-title-container-title{
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    color: #000000;
    margin-top: 20px;
    height: 145px;
    overflow-y: auto;
}

.research-projects-grid-item-title-container-title::-webkit-scrollbar {
    width: 6px; /* Width of the scrollbar */
    display: none;
    
}


.research-projects-grid-item-title-container-title-container{
    padding-bottom: 24px;
}

.research-projects-grid-item-title-container-author-container{
    display: flex;
    align-items:center;
    gap: 6px;
}


.research-projects-grid-item-title-container-author-container-image-container{
    width: 45px;
    height: 45px;
    border-radius: 50%;
    overflow: hidden;
    object-fit: fill;
}


.research-projects-grid-item-title-container-author-container-text-container{
   /* margin-top: 15px;    */
   display: flex;
   flex-direction: column;
   gap: 5px;
}



.research-projects-grid-item-title-container-author-container-text-container-name{
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    color: #1E1E1E;
    /* margin-top: 15px; */
}
.research-projects-grid-item-title-container-author-container-text-container-role{
    font-size: 12px;
    font-weight: 500;
    line-height: 12px;
    color: #1E1E1E;
}





.research-projects-banner-container{
    width: 1359px;
    height: 240px;
    background-color: #3D348B;
    border-radius: 32px;
    border: 2px solid #F1F1F9;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

.research-projects-banner-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/images/research-projects-banner-container-design.png');
    opacity: 0.1;
    z-index: 1;
}

.research-projects-banner-content {
    position: relative;
    z-index: 2;
}

.research-projects-banner-container-title-container{
   
    margin-top: 37.23px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    h1{
        font-size: 48px;
        font-weight: 700;
        line-height: 60px;
        color: #FFFFFF;
        text-transform: capitalize;
    }
}

.research-projects-banner-container-description-container{
    margin-top: 16px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    p{
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        color: #FFFFFF;
    }
}

.research-projects-banner-container-button-container{
    margin-top: 18px;
    display: flex;
    justify-content: center;
    text-align: center;
    button{
        width: 285px;
        height: 48px;
        border-radius: 16px;
        border: 1.5px solid #FFFFFF;
        background-color: #3D348B;
        color: #FFFFFF;
        font-size: 16px;
        font-weight: 700;
        line-height: 16px;
    }
}


.highlight1 {
    display: inline-block;
    position: relative;
    color: #FFFFFF;
    background-color: #FF794A;
    padding: 6px 12px;
    border: 2px solid #FF551A;
    clip-path: polygon(
        0% 0%, 2.5% 25%, 0% 50%, 2.5% 75%, 0% 100%, 100% 100%, 
        97.5% 75%, 100% 50%, 97.5% 25%, 100% 0%
    );
}




/* each project details */

.research-project-title-container{
    width: 1359px;
    height: 353px;
    margin-top: 97px;
    margin-left: auto;
    margin-right: auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    z-index:0;
}

.research-project-title-container::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
   width: 100%;
   height: 100%;
    border-radius: 28px;
    z-index: 1;
    background-color: #1E1E1ECC;
}


.research-project-title-heading{
    width: 1164px;
    font-size: 48px;
    font-weight: 700;
    line-height: 55px;
    color: #FFFFFF;
    text-align: center;
    z-index: 2;
}

.research-project-author-name{
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    color: #FFFFFF;
    text-align: center;
    margin-top: 16px;
    z-index: 2;
}

.back-icon-container{
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    width: 40px;
    height: 40px;
    background-color: #FFFFFF;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1.5px solid #E3EDFC;
}

.back-icon-container-link{
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
    z-index: 2;
}


.research-project-container-wrapper{
    
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    gap: 32px;
    margin-bottom: 20px;
}


.research-project-summary-container{
    margin-top: 40px;
    width: 896px;
    height: auto;
  
}
.upcoming-width {
    width: 1012px;
}

.research-project-summary-heading{
    font-size: 36px;
    font-weight: 700;
    line-height: 36px;
    color: #353535;
}

.research-project-summary-paragraph{
    margin-top: 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    color: #353535;
}

.research-project-result-button-container{
    margin-top: 16px;
    display: flex;
    gap: 20px;
}

.research-project-result-button{
    width: 285px;
    height: 48px;
    border-radius: 32px;
    color: #3D348B;
    background-color: #FFFFFF;
    border: 1.5px solid #2C2564;
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}







.research-project-result-container{
    margin-top: 40px;
    width: 896px;
    height: auto;
}
.research-project-author-info-container-wrapper{
  width:432px;
}

.research-project-author-info-container-top{
    background-color: #3D348B;
    border: 1.5px solid #F1F1F9;
    border-radius: 20px;
    padding: 20px;
    color: #FFFFFF;
    margin-top: 50px;
}

.research-project-author-info-container-top-wrapper2, .research-project-author-info-container-top-wrapper3{
    padding-top: 20px;
}


.research-project-author-info-container-top-span{
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
    color: #FFFFFF;
}

.research-project-author-info-container-top-p{
    margin-top: 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 21px;
    color: #FFFFFF;
}

.research-project-author-info-container-bottom{
    margin-top: 24px;
    padding: 20px;
    border: 1.5px solid #F1F1F9;
    border-radius: 20px;
    background-color: #FFFFFF;
}

.research-project-author-info-container-bottom-wrapper1{
    display:flex;
    gap: 14px;
    align-items: center;

}

.research-project-author-info-container-bottom-wrapper1-img-wrapper{
    width: 74px;
    height: 72px;
}

.research-project-author-info-container-bottom-wrapper1-img-wrapper img{
    width: 100%;
    height: 100%;
    border-radius: 17.41px;
}

.research-project-author-info-container-bottom-wrapper1-h1{
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
    color: #1E1E1E;
}   

.research-project-author-info-container-bottom-wrapper1-p{
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
    color: #1E1E1E;
    margin-top: 7px;
}

.research-project-author-info-container-bottom-wrapper2{
    margin-top: 20px;
}

.research-project-author-info-container-bottom-wrapper2 p{
    font-size: 16px;
    font-weight: 500;
    line-height: 21px;
    color: #353535;
}


.research-project-extra-cards-grid{
    margin: 40px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.research-project-extra-cards-grid-item{
    width: 664px;
    height: 234px;
    border-radius: 32px;
    border: 2px solid #F1F1F9;
    padding: 20px;
    display: flex;
    gap: 20px;
    background-color: #FFFFFF;
}
.mobile-only {
    display: none !important;
}

.research-project-extra-cards-grid-item-image-container{
    width: 195px;
    height: 195px;
}

.research-project-extra-cards-grid-item-image-container img{
    width: 100%;
    height: 100%;
    border-radius: 24px;
}

.research-project-extra-cards-grid-item-text-container{
    width: 409px;
    align-self: center;
}

.research-project-extra-cards-grid-item-text-container-h1{
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
    color: #353535;
}

.research-project-extra-cards-grid-item-text-container-span{
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    color: #353535;
    margin-top: 4px;
}

.research-project-extra-cards-grid-item-text-container-p{
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    color: #353535;
    margin-top: 11px;
    overflow-y: auto;
    height: 110px;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.research-project-extra-cards-grid-item-text-container-p::-webkit-scrollbar {
    display: none;
}

.research-project-single-card-wrapper{
    margin-top: 40px 0px;
   
    /* margin-left: 34px; */
}

.research-project-single-card-heading-wrapper{
    margin-bottom: 20px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.research-project-single-card-heading{
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
    color: #353535;
}

.relation-indicator{
    font-size: 12px;
    font-weight: 600;
    line-height: 12px;
    color: #3D348B;
    background-color: #F8F8FC;
    padding: 6px 12px;
    border-radius: 16px;
    border: 1px solid #E4E2F3;
}
.research-project-single-card{
    
    height: 453px;
    width: 316px;
    border-radius: 20px;
    background-color: #FFFFFF;
    border: 2px solid #F1F1F9;
    overflow: hidden; 
}
.research-projects-grid-item1{
border: none !important;
}






/* @media (max-width: 1400px) {
    .webinar-podcast-topics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .webinar-podcast-topics-grid {
        grid-template-columns: 1fr;
    }
    
    .webinar-podcast-topic-container {
        width: 100%;
        max-width: 346px;
        margin: 0 auto;
    }
} */






@media (max-width: 768px) {


    html input[type="tel"].form-input1 {
          border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        height: 54px;
        padding-left: 5px !important;
    }

    .countrycode-dropdown{
        position: relative;
        z-index: 1000;
    }
    .countrycode-trigger{
        position: absolute;
        height: 54px;
        z-index: 1001;
    }
    
    .countrycode-menu{
        position: absolute;
        z-index: 9999;
        top: 100%;
        left: 0;
        margin-top: 4px;
    }

    .navbar-container {
        height: auto;
        flex-direction: column;
        align-items: stretch;
        padding: 10px 16px;
        z-index: 1000;
        }

    .navbar-content-container {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        z-index: 1000;
        }

    .middle-navigation-container,
    .logout-button {
        display: none;
        }

        /* Mobile Navigation Styles */
    .mobile-menu-button {
        display: none;
        cursor: pointer;
        padding: 10px;
    }

    .hamburger-icon {
        width: 24px;
        height: 20px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .hamburger-icon span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: #3D348B;
        transition: all 0.3s ease;
    }

    .hamburger-icon.open span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .hamburger-icon.open span:nth-child(2) {
        opacity: 0;
    }

    .hamburger-icon.open span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    .mobile-menu {
        display: none;
        position: fixed;
        top: 68.5px;
        left: 0;
        width: 100%;
        height: 0;
        background-color: #FFFFFF;
        overflow: hidden;
        transition: height 0.3s ease;
        z-index: 1000;
        box-shadow: 0 4px 24px 0 #E2E2E2;
    }

    .mobile-menu.open {
        /* height: calc(100vh - 68.5px); */
        height: auto;
    }

    .mobile-menu-content {
        /* padding: 24px; */
        display: flex;
        flex-direction: column;
        gap: 0px;
    }

    .mobile-menu-link {
        font-size: 16px;
        font-weight: 600;
        color: #000000;
        text-decoration: none;
        padding: 24px;
        /* border-radius: 12px; */
        transition: all 0.3s ease;
    }

    .mobile-menu-link.active {
        background-color: #FFAA3E33;
        /* color: #FFFFFF; */
        border: 1.5px solid #FF930A;
    }

    .mobile-logout-form {
        margin-top: 16px;
    }

    .mobile-logout-button {
        width: 100%;
        height: 48px;
        font-size: 16px;
        font-weight: 700;
        color: #3D348B;
        border-radius: 12px;
        border: 1.5px solid #3D348B;
        background-color: #FFFFFF;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .mobile-logout-button:hover {
        background-color: #3D348B;
        color: #FFFFFF;
    }







    .register-container{
        gap: 0px;
        }
    
    .register-form-container{
        max-width: 345px;
        max-height: 876px;
        margin-top: 40px;
        margin-left: 24px;
        margin-right: 24px;
        }
    .heading-1{
        font-size: 28px;
        line-height: 28px;
        font-weight: 700;
        }
    .paragraph-1{
        margin-top: 8px;
        margin-left: 4px;
        font-size: 14px;
        line-height: 14px;
        font-weight: 400;
        }

    .student-parent-label{
        font-size: 14px;
        line-height: 14px;
        font-weight: 600;
        }


    .student-parent-button-container {
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
        }

    .student-parent-button{
        width: 163px;
        height: 54px;
        font-size: 16px;
        line-height: 16px;
        font-weight: 700;
        }
    .student-parent-button#working-btn{
        width: 345px;
        height: 54px;
        }
    .form-input-container{
        display:flex;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        }

        .signup-image-container{
           display: none;   
        }



    html input[type="text"].form-input1,
    html input[type="email"].form-input1,
    html input[type="password"].form-input1 {
        width: 100%;
        height: 54px;
        margin-top: 12px;
        margin-left: 0.21px;
        border-radius: 12px;
        border: 1.5px solid #F5F5F5;
        background-color: #FAFAFA;
        font-size: 16px;
        font-weight: 400;
        color: #1E1E1E;
        line-height: 12px;
        padding: 14px  20.82px;
        }

    .form-input-container-item{
        width: 100%;
        }

    html input::placeholder {
        color: #D7D7D7; 
        font-size: 16px;
        line-height: 16px;
        font-weight: 400;
        opacity: 1;
        }

    .primary-button{
        width: 100%;
        height: 54px;
        font-size: 16px;
        font-weight: 700;
        line-height: 16px;
        padding: 12px;
        margin-top: 24px;
        }

    .login-form-container{
        max-width: 345px;
        max-height: 876px;
        margin-top: 40px;
        margin-left: 24px;
        margin-right: 24px;
        }

        .logo-container{
       margin: 0 24px;
        }

    .verify-otp-container{
        max-width: 345px;
        max-height: 276px;
        margin-top: 120px;
        margin-left: 24px;
        margin-right: 24px;
        }
    #otp-message{
        width: 342px;
        height: 36px;
        line-height: 18px;
    }



    /* OTP Input Styles */
    .otp-input-container {
        display: inline-flex;
        gap: 20px;
        justify-content: center;
        margin-top: 24px;
        margin-left: 5px;
    }

    html input[type="text"].otp-input-wrapper {
        width: 41px;
        height: 64px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    html input[type="text"].otp-input {
        width: 41px;
        height: 64px;
        text-align: center;
        border: 1.5px solid #F5F5F5;
        border-radius: 12px;
        outline: none;
        background-color: #FAFAFA;
        font-size: 24px;
        font-weight: 700;
        line-height: 24px;
    }

    html input[type="text"].otp-input.filled {
        border-color: #FFAA3E;
        background-color: #FFFAF5;
    } 

    .resend-timer p{
        font-size: 14px;
        font-weight: 600;
        line-height: 14px;
        color: #767676;
        margin-top: 20px;
        width: 200px;
        height: 14px;
        margin-left: auto;
        margin-right: auto;
    }

    .welcome-heading{
        text-align: center;
        width: 345px ;
        height: 90px;
        font-size: 24px;
        font-weight: 700;
        color: #1E1E1E;
        line-height: 30px;
        /* margin-top: 116px; */
        /* margin-left: 249px; */
    }

    .welcome-paragraph{
        text-align: center;
        width: 345px;
        height: 66px;
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
        margin-top: 20px;
        /* margin-left: 362px; */
    }

    .welcome-cards-container {
        width:369px;
        height: 746px;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
        align-items: center;
        margin-top: 36px;
        /* margin-left: 250px; */
    }

    .welcome-card {
        width: 163px;
        height: 244px;
        padding: 24px 7.5px;
    }

    #review-submit-1{
        width: 346px;
        height: 218px;
    }

    #review-submit-text{
    width: 163px;
    }


    html .start-application-button{
        width: 345px !important;
        height: 54px !important;
        font-size: 16px;
        font-weight: 700;
        line-height: 16px;
        margin-bottom: 22px;
        /* padding: 12px; */
    }
    .start-application-button#next-button{
        width: 345px;
        height: 54px;
    }



    .progress-bar-container {
        width: 343px !important;
        height: 81px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        /* margin-left: 100px; */
    }

    .step-card{
        display: none;
    }

    .step-card-container-mobile-one{
        width:343px;
        height: 81px;
        background-color: #F1F0F9;
        border-radius: 20px;
        border: 2px solid #E4E2F3;
        display:flex;
    }

    .step-card-container-mobile{
        display: block;
        width: 345px;
        height: 81px;
        display: flex;
    }
    .step-card-text {
        width: 251px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 4px;
    }

    .step-card-text-container-mobile{
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }



    .form-container-container {
        width: 345px;
        height: auto;
        border-radius: 0px;
        box-shadow: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }



    .form-1-span{
        display: none;
    }

    .form-container1{
        box-shadow:none;
        width: 345px;
        border-radius: 0px;
        padding: 0px;
    }

    #form-container1-student{
        width: 345px;
    }
    #form-container1-choose-program{
        width: 345px;
    }

    #form-container1-student-interests{
        width: 345px;
    }


    .explore-interests-container{
        width: 345px;
        height: 120px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 50px;
    }

    #paragraph-1-interests{
        width: 345px;
        height: 80px;
    }

    .explore-interests-paragraph{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: auto;
        padding: 17px 20px;
    
    }

    .checkbox-group {
        width: 345px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-top: 66px;
    }

    .checkbox-container{
        width: 100%;    
    }

    .interest-dropdown {
        width: 345px;
        height: auto;
    }

    html input[type="text"].search-input-1{
        width: 313px !important;
    }

    .interest-cards{
        width: 311px;
        min-height: 160px;
        border-radius: 16px;
        background-color: #FFFAF5;
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        padding: 16px;
    }

    .quiz-paragraph{
        width: 100%;
        height: auto;
        line-height: 28px;
    }








    .program-container{
        width: 345px;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .program-card {
        width: 345px;
        padding: 23.5px;
    }

    .next-button-container{
        margin-top: 32px;
        margin-bottom: 32px;
        width: 345px;
        display: none;
        align-items: center;
        justify-content: space-between;
    }

    .next-button-container-mobile{
        margin-top: 32px;
        width: 345px;
        height: fit-content;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 40px;

    }
    #next-button-container-2{
        width: 345px;
    }






    .start-application-button#next-button-2{
        width: 109px !important;
        height: 54px !important;
        margin: 0px;
        /* margin: 40px; */

    }

    .back-button{
        width: 109px;
        height: 54px;
        margin: 0px;

    }

    .skip-button{
        width: 109px !important;
        height: 54px;
        display: block;
        text-align: center;
    }


    #form-container1-student-project{
        width: 345px;
    }

    .select-option-container{
        width: 345px;   
    }
  

    .select-option-text{
        width: 345px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }

    .select-option-button{
        width: 345px;
    
    }

    .idea-input-container {
        width: 345px;
    }

    .select-option-text{
        width: 345px;
    }


    .project-vision-input {
        width: 345px;
        min-height: 120px;
    }
    .date-heading-container{
        width: 345px;
    }

    .project-duration-container-wrapper{
        flex-direction: column;
        width: 345px;
        height: auto;
        gap: 32px;
    }

    .date-input-container input {
        width: 345px;
        
    
    }

    .date-input-container {
        width: 345px;
        height: 54px;
       

    }
    .date-input-container input:hover{
        cursor: pointer;
    }

    .desired-project-start-date-container{
        width: 345px;
    }


    .parent-info-paragraph{
    width: 345px;
    height: auto;    
    line-height: 21px;
    
    }
    #choose-program-paragraph{
        margin-top: 32px;
        display: flex;
        align-items: center;
        gap: 10px;
    
    }
    #choose-program-paragraph img{
        width: 17px;
        height: 17px;
    }


    /* finalzie code */

    #form-container1-student-finalize {
        width: 345px;
    }

    .finalize-item{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 8px;
    }
    .next-finalize-container{
        width: 345px;
        height: auto;
        padding: 24px;
    }

    .next-finalize-container-one{
        width: 297px;
        height: auto;
        margin-top: 20px;
        margin-left: 0px;
    }

    .next-finalize-container-one-heading{
        width: 297px;
        height:auto;
    }

    .next-finalize-container-two{
        width:297px;
        margin-top:20px ;
        /* margin-bottom: 24px; */
        margin-left: auto;
        margin-right: auto;
    }

    .project-mentors-container{
        width:345px ;
        height: auto;
        flex-direction: column;
    }

    .project-mentor-card{
        width: 100%;
        justify-content: flex-start;
    }

    .start-application-button#next-button-finalize{
        width:167px !important;
        margin: 0px;
    }
    #back-button-finalize{
        width: 168px;
        margin: 0px;
    }





    .heading-1{
        font-size: 28px;
        line-height: 24px;
        font-weight: 700;
        width: 100%  ;
    }

    .paragraph-application{
        height: 40px;
        font-size: 16px;
        line-height: 20px;
        font-weight: 500;
        width: 341px;
        margin-top: 16px;
    }

    .form-label{
        margin-top: 32px;
        margin-left: 0.31px;
        display: block;
    }


    /* form input types */
    form input[type="text"].form-input2,form input[type="email"].form-input2,form input[type="number"].form-input2{
        width: 345px;
    }



    .parent-info-paragraph{
        /* width: 345px;
        height: 74.08px; */
    }


    .dropdown-menu1{
        width: 345px;
        height: 54px;
    }







    /* thankyoupage */
    .form-container1-thank-you {
        width: 393px !important;
        height: auto;
        margin: 96px 0 auto;
        
    
    }

    .thank-you-container-wrapper{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }


    .thank-you-container{
        width: 345px;
        height: auto;
        margin-top: 47px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: default;
        margin-left: auto;
        margin-right: auto;
    }
    .thank-you-heading{
        font-size: 28px;
        line-height:40px;
        text-align: center;
    }   

    .thank-you-paragraph{
        margin-top: 32px;
        width: 345px;
        height: auto;
        text-align: center;
    }

    .thank-you-timer-container{
        text-align: center;
        margin-top: 15px;
    }

    .thank-you-download-container{
        margin-top: 32px;
        text-align: center;
    }

    .thank-you-footer{
    height: 124px;
    position: relative;
    }

    .thank-you-footer-container{
        padding: 24px;
    }


    .thank-you-footer-content{
        width: 345px;
        height: 75.37px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .thankyou-footer-text{
        width: 291px;
    }

    .thank-you-image-container{
        margin-top: 27.5px;
            /* margin-top: 36px; */
        /* margin-left: 800px; */
        /* z-index: 10; */
        /* display: block; */
        z-index: 10;
    }



    /* dashboard page */


    .dashboard-container{
        display: flex;
        flex-direction: column;
        gap: 0px;
        height: auto;
    }



    .dashboard-welcome-container{
        margin-top: 112px;
        width: 345px;
        height:261px;
        display: flex;
        border-radius: 24px;
        flex-direction: column;
        padding: 24px;
        background-image: none;
        background-color: #FFFFFF;

    }

    .dashboard-welcome-container::before{
        display: none;
    }

    .dashboard-welcome-heading{
        margin: 0px;
        font-size: 28px;
        line-height: 40px;
        font-weight: 700;
        color: #1E1E1E;
    }

    .dashboard-welcome-heading>.highlight{
        margin-left: -5px;
        font-size: 28px;
        line-height: 40px;
        letter-spacing: 0%;
    }

    .dashboard-welcome-paragraph{
        margin: 0px;
        width: 297px;
        height: 120px;
        margin-top: 6px;
        font-size: 16px;
        line-height: 24px;
        font-weight: 500;
        color: #1E1E1E;
    }

    .dashboard-counselling-container{
        margin-top: 32px;
        width: 343px;
        display: flex;
        flex-direction: column;
        height: auto;
        /* height: 238px; */

    }

    .dashboard-counselling-heading-container{
    width: 343px;
    /* height: 108px; */
    }

    .dashboard-counselling-heading{
        width: 295px;
        height: 108px;
        font-size: 28px;
        line-height: 36px;
    }

    .dashboard-counselling-paragraph{
        width: 295px;
        height: 66px;
    }
    .dashboard-counselling-heading-icon{
        width: 62px;
        height: 33.43px;
    }

    .dashboard-counselling-view-container{
        width: 343px;
        height: 224px;
        padding: 24px;
    }

    .dashboard-counselling-view-heading{
        font-size: 28px;
        line-height: 38px;
    }

    .dashboard-counselling-view-button{
        width: 295px;
        height: 48px;
    }

    #dashboard-counselling-mentor-container{
        width: 343px;
        height: 186px;
    }

    #dashboard-counselling-mentor-heading{
        font-size: 28px;
        line-height: 38px;
        width: 295px;   
        height: 76px;
    }


    .dashboard-webinar-container{
        display: flex;
        flex-direction: column;
        margin: 32px auto;
        width: 345px;
        height: auto;
        border-radius: 24px;
    }

    .dashboard-webinar-heading-container{
        display: flex;
        flex-direction: column;
        padding: 24px;
        width: 345px;
        height: 188px;
    }

    .dashboard-webinar-heading{
        font-size: 28px;
        line-height: 38px;
        width: 296px;
        height: 76px;
    }

    .dashboard-webinar-button{
        margin-top: 12px;
        width: 296px;
        height: 48px;
    }


    .dashboard-webinar-register-container{
        width: 345px;    
        height: 184px;
        border-radius: 24px;
        padding: 24px;
    }
    .dashboard-webinar-register-container::before {
        border-radius: 24px;
        z-index: 1;
    }

    .dashboard-webinar-register-heading{
        line-height: 38px;
    }

    .dashboard-webinar-register-button{
        width: 297px;
        height: 44px;
    }


    .dashboard-webinar-project-container{
        width: 345px;
        height: 275px;
        padding: 24px;
        
    }

    .dashboard-webinar-project-heading{
        font-size: 28px;
        line-height: 38px;
    }

    .dashboard-webinar-project-button{
        width: 289.65px;
        height: 48px;
    }

    .dashboard-brochure-container{
        width: 345px;
        height: 202px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding:24px
    }

    .dashboard-brochure-paragraph{
    
        font-size: 18px;
        line-height: 24px;
        margin-left: 0px;
    }

    .dashboard-brochure-paragraph>span{
        display: none;
    }

    .dashboard-brochure-button{
        width: 297px;
        height: 48px;
        margin-top: 8px;
        align-items: center;
        justify-content: center;
        display: flex;
    
    }

    .booking-modal-content {
        border-radius: 24px;
        max-width: 345px;
        padding: 24px;
    }

    .booking-modal-title {
        font-size: 24px;
    }

/* model for mobile devices */


    .booking-topics-grid{
        display: none;
    }
    .booking-topics-grid-mobile{
        display: block;
    }


    .custom-dropdown-ms {
        position: relative;
        width: 100%;
    }

    .dropdown-toggle-ms {
        width: 100%;
    }

    .dropdown-options-ms {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 999;
        width: 100%;
        background-color: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        max-height: 300px;
        overflow-y: auto;
        margin-top: 8px;
    }

    .dropdown-option-ms {
        width: 100%;
        text-align: left;
    }

    .welcome-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 120px;
    /* margin-left: 249px; */
    /* gap: 105px; */
}


    .topic-select-ms {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        font-weight: 700;
        border: 2px solid #F1F1F9;
        border-radius: 16px;
        background-color: #F8F8FC;
        color: #353535;
        cursor: pointer;
        appearance: none;
    }

    .selected-topic-preview-ms {
        display: flex;
        align-items: center;
        margin-top: 10px;
        gap: 10px;
    }



    /* .success-modal */

    .success-modal-content{
        width: 345px;
        height: auto;
        border-radius: 24px;
        padding: 24px;
    }


    /* webinar-podcast-page */

    .webinar-podcast-page-container{
        width: 339px;
        
    }

    .webinar-podcast-heading{
    margin: auto;
        width: 339px;
        height: 76px;
        font-size: 28px;
        line-height: 38px;
    }

    .webinar-podcast-paragraph-container{
        line-height: 26px;
        
    }
    .webinar-podcast-button-container{
        width: 100%;
        justify-content: space-evenly;
        padding-left: 23px;
        padding-right: 23px;
    }

    .webinar-podcast-button{
        width: 100%;
        padding: 6px;
    }


    .webinar-podcast-topics-grid {
        display: grid;
        grid-template-columns: repeat(1, 0fr);
        margin: 24px auto;
        max-width: 345px;
        padding: 0 24px;
    }   

    .webinar-podcast-topic-container {
        width: 346px;
        height: 243px;
        border-radius: 24px;
    }



    .webinar-podcast-topic-overlay {
    padding-left: 24px;
    }


    /* research projects */

    .research-projects-container{
        width:345px;
        height: auto;
        margin-top: 120px;
    }

    .research-projects-heading{
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;
        width: 339px;
        text-align: center;
        font-size: 28px;
        line-height: 38px;
    }
    .research-projects-paragraph-container p{
        width: 345px;
        height: 78px;
        text-align: center;
        line-height: 26px;
        text-wrap: balance;
    }


    .research-projects-grid{
        grid-template-columns: repeat(1, 1fr);
        gap: 24px;
        width: 345px; 
    }

    .research-projects-grid-item{
        width: 345px;
    }

    .research-projects-grid-item-image-container{
        width: 345px;
    }
    .research-projects-grid-item-title-container{
        width: 345px;
    }

    .research-projects-banner-container{
        width: 345px;
        height: auto;
    }

    .research-projects-banner-content {
    padding: 27.79px;
    }

    .research-projects-banner-container-title-container{
    
        margin-top: 0px;
        text-align: left;
        h1{
            font-size: 28px;
            font-weight: 700;
            line-height: 37px;
        }
    }

    .research-projects-banner-container-description-container{
        margin-top: 18px;
        text-align: left;
        p{
            line-height: 22px;
        }
    }



    .research-projects-banner-container-button-container{
        display: flex;
        justify-content: left;
        text-align: center;
        }


        /* each project deatils moblie */

    .research-project-title-container{
        width: 345px;
        height: auto;
    }

    .research-project-title-heading{
        margin-top: 81px;
        width: 290px;
        font-size: 24px;
        font-weight: 700;
        line-height: 32px;
    }

    .research-project-author-name{
        width: 176px;
        line-height: 22px;
        margin-bottom: 52px;
    }


    .research-project-container-wrapper{
        display: flex;
        flex-direction: column;
        width: 345px;
        height: auto;
    }

    .research-project-summary-container{
        width: 345px;
        margin-top: 33px;
        height: auto;
    }

    .upcoming-width{
        width: 345px !important;
    }

    .research-project-summary-heading{
        font-size: 28px;
        line-height: 28px;
    }

    .research-project-summary-paragraph{
        font-size: 16px;
        line-height: 22px;
    }

    .research-project-result-container{
        width: 345px;
        margin-top: 24px;
        height: auto;
    }

    .research-project-result-button-container{
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .research-project-result-button{
        width: 344px;
    }

    .research-project-author-info-container-top{
        margin-top: 0px;
    }


    .research-project-author-info-container-wrapper{
        width:345px;
    }

    .research-project-extra-cards-grid{
        margin-top: 24px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 22px;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
    .research-project-extra-cards-grid-item{
        width: 345px;
        height: auto;
        display: flex;
        flex-direction: column;
    }
    .desktop-only {
        display: none !important;
    }
    .mobile-only {
        display: block !important;
    }

    .research-project-extra-cards-grid-item-top-row{
        display: flex;
        gap: 14px;
        align-items: center;
    }

    .research-project-extra-cards-grid-item-image-container{
        width: 75px;
        height: 75px;
    }

    .research-project-extra-cards-grid-item-image-container img{
        width: 100%;
        height: 100%;
        border-radius: 18px;
    }

    .research-project-extra-cards-grid-item-text-container-top-row-text-container{
    }

    .research-project-extra-cards-grid-item-text-container-h1{
        max-width: 210px;
    }

    .research-project-extra-cards-grid-item-text-container{
        width: 305px;
        align-self: center;
    }
    .research-project-extra-cards-grid-item-text-container-p{

        margin-top: 20px;
    }

    .research-project-single-card-wrapper{
        margin: 20px;

    }

    .research-project-single-card-heading-wrapper{
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .relation-indicator{
        font-size: 11px;
        padding: 4px 8px;
    }



    .mobile-menu-button {
        display: block;
    }

    .mobile-menu {
        display: block;
    }

    .middle-navigation-container,
    .logout-button {
        display: none;
    }

    .filter-container{
        display: none;
    }
    .filter-container-mobile{
        margin-top: 24px;
        display: flex;
        align-items: center;
        justify-content:center;
        gap: 12px; 
    }
    .filter-modal{
        display: block;
    }
    .filter-container-item{
        width: 345px;
        display: flex;
        align-items: center;
        background-color: #F5F5FB;

        justify-content: space-between;
    }
    .filter-container-item-mobile-filter-button{
        width: 56px;
        height: 56px;
        border-radius: 16px;
        border: 2px solid #F1F1F9;
        background-color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .search-icon-container{
        width: 277px;
    }

    html input[type="text"].filter-search-input{
        width: 277px !important;
    }
    


    /* Filter Modal Styles */
    .filter-modal {
        position: fixed;
        top: 65px;
        right: -100%;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(8px);
        z-index: 1001;
        transition: right 0.3s ease-in-out;
    }

    .filter-modal.active {
        right: 0;
    }

    .filter-modal-content {
        position: absolute;
        top: 0;
        right: 0;
        width: 85%;
        max-width: 400px;
        height: 100%;
        background-color: #F5F5FB;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
    }

    .filter-modal-header {
        padding: 24px 24px 15px 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
    }

    .filter-modal-header-title {
        margin: 0;
        font-size: 24px;
        line-height: 24px;
        font-weight: 700;
        color: #1E1E1E;
    }

    .filter-modal-close {
        background: none;
        border: none;
        font-size: 34px;
        cursor: pointer;
        color: #222124;
    }

    .filter-modal-body {
        flex: 1;
        padding: 0px 24px;
        overflow-y: auto;
    }



    /* Adjust filter container items in modal */
    .filter-modal .filter-container-item {
        margin-bottom: 20px;
        width: 290px;
    }

    .filter-modal .custom-dropdown {
        width: 100%;
    }

    .filter-modal .dropdown-btn {
        width: 100%;
        text-align: left;
    }

    .filter-modal .dropdown-options {
        width: 100%;
    }

    

}