@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primaryColor: #7B3EC0;
  --secondaryHoverColor: #f4f4f4;
  --secondaryTextColor: #455A64;
}

body {
  font-family: "Montserrat", sans-serif;
}

/* width */
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  border: 4px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  border-radius: 9999px;
  background-color: #C9C9C9;
}

.container {
  width: 75%;
  margin: 0 auto;
}
@media (max-width: 1800px) {
  .container {
    width: 85%;
  }
}
@media (max-width: 480px) {
  .container {
    width: 90%;
  }
}

a,
article,
button,
div,
span,
i,
b,
h1,
h2,
h3,
h4,
h5,
h6,
p,
input,
ul,
li,
select,
label,
textarea {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  font-family: "Montserrat", sans-serif;
}

input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
  font-family: "Montserrat", sans-serif;
}

input {
  -webkit-tap-highlight-color: transparent;
}

::-webkit-datetime-edit-year-field:not([aria-valuenow]),
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
::-webkit-datetime-edit-day-field:not([aria-valuenow]) {
  color: transparent;
}

video::-internal-media-controls-overlay-cast-button {
  display: none;
}

textarea {
  resize: none;
  font-family: "Montserrat", sans-serif;
}

::-moz-selection {
  color: var(--secondaryColor);
  background: rgba(204, 204, 204, 0.537254902);
}

::selection {
  color: var(--secondaryColor);
  background: rgba(204, 204, 204, 0.537254902);
}

main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 50px;
  padding: 50px 0px;
}
@media (max-width: 768px) {
  main {
    padding-bottom: 80px;
  }
}
@media (max-width: 480px) {
  main {
    gap: 30px;
    padding: 30px 0px;
    padding-bottom: 80px;
  }
}

.subTitle {
  font-size: 30px;
  font-weight: 400;
}
@media (max-width: 768px) {
  .subTitle {
    font-size: 25px;
  }
}
@media (max-width: 480px) {
  .subTitle {
    font-size: 20px;
  }
}

.shimmer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 105;
  background: rgba(0, 0, 0, 0.486);
  display: none;
}

.pageloader{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 110;
  background: var(--primaryColor);
	display :flex;
	justify-content :center;
	align-items: center;
}
.pageloader .pageloaderIcon{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border :4px solid #ffffff1f;
	border-top:4px solid #fff;
	animation: pageLoader 1s linear infinite;
}
@keyframes pageLoader {
	100%{
		transform: rotate(1turn);
	}
}

.pageloader2{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 110;
  background: white;
	display :flex;
	justify-content :center;
	align-items: center;
}
.pageloader2 .pageloaderIcon2{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border :4px solid #eeee;
	border-top:4px solid var(--primaryColor);
	animation: pageLoader2 1s linear infinite;
}
@keyframes pageLoader2 {
	100%{
		transform: rotate(1turn);
	}
}

.studentToNurseconversionPopup{
  position: fixed;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 800px;
  background: white;
  border-radius: 10px;
  padding: 40px;
  z-index: 120;
  display: none;
}
@media(max-width:850px){
  .studentToNurseconversionPopup{
    width: 90%;
  }
}
@media(max-width:480px){
  .studentToNurseconversionPopup{
    width: 95%;
    padding: 20px;
	flex-direction:column;
  }
}
.studentToNurseconversionPopup h2{
  font-size: 25px;
  font-weight: 500;
}
@media(max-width:480px){
  .studentToNurseconversionPopup h2{
    margin-top: 30px;
  }
}
.studentToNurseconversionPopup .closeStudentToNurseconversionPopup{
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  cursor: pointer;
  font-size: 25px;
  opacity: .7;
}
.studentToNurseconversionPopup .closeStudentToNurseconversionPopup i{
  line-height: .5;
}
.studentToNurseconversionPopup form{
  width: 100%;
  display: flex;
  flex-direction: column;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody{
  width: 100%;
  height: 55vh;
  overflow-y: auto;
  padding: 20px 0px;
  margin-top: 20px;
}
.studentToNurseconversionPopupBodyMain{
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 30px;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup{
  flex: 0 0 48%;
}
@media(max-width:768px){
  .studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup{
    flex: 100%;
  }
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .customDropDown {
  width: 100%;
  position: relative;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .customDropDownHead {
  width: 100%;
  position: relative;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .customDropDownHead label {
  color: #8F8F8F;
  font-size: 16px;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .customDropDownHead .customDropDownHeadInput {
  height: 50px;
  border: 1px solid #343434;
  outline: none;
  border-radius: 5px;
  margin-top: 4px;
  outline: none;
  padding: 0px 15px;
  width: 100%;
  display: flex;
  align-items: center;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .customDropDownHead .customDropDownHeadInput:disabled {
  cursor: pointer;
  background: white;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .customDropDownHead .customDropDownHeadIcon {
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 10px;
  top: 17px;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .customDropDownHead .customDropDownHeadIcon i {
  line-height: 0.5;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .customDropDownPopup {
  position: absolute;
  top: calc(100% - 3px);
  width: 100%;
  background: white;
  z-index: 10;
  border: 1px solid #343434;
  display: none;
  max-height: 200px;
  overflow-y: auto;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .customDropDownPopup ul {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .customDropDownPopup ul li {
  list-style: none;
  padding: 8px 15px;
  cursor: pointer;
  transition: 0.3s;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .customDropDownPopup ul li:hover {
  transition: 0.3s;
  background: #f3f3f3;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .customDropDownPopup ul li p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .customDropDownPopup ul .selected {
  background: #f3f3f3;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .customDropDownPopupUp {
  top: calc(100% - 3px);
  bottom: inherit;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .customDropDownPopupDown {
  bottom: calc(100% - 3px);
  top: inherit;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .formGroupInput{
  width: 100%;
  display: flex;
  flex-direction: column;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .formGroupInput label {
  color: #8F8F8F;
  font-size: 16px;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .formGroupInput input{
  height: 50px;
  border: 1px solid #343434;
  outline: none;
  border-radius: 5px;
  margin-top: 4px;
  outline: none;
  padding: 0px 15px;
  width: 100%;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .formGroupCheckbox{
  width: 100%;
  display: flex;
  flex-direction: column;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .formGroupCheckbox label {
  color: #8F8F8F;
  font-size: 16px;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .formGroupCheckbox .formGroupCheckboxList{
  width: 100%;
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: 4px;
  min-height: 50px;
  align-items: center;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .formGroupCheckbox .formGroupCheckboxList input{
  display: none;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .formGroupCheckbox .formGroupCheckboxList input:checked ~ label .checkboxInputBox{
  background: var(--primaryColor);
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .formGroupCheckbox .formGroupCheckboxList input:checked ~ label .checkboxInputBox::after{
  display: block;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .formGroupCheckbox .formGroupCheckboxList label{
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .formGroupCheckbox .formGroupCheckboxList label:hover .checkboxInputBox{
  background: #eee;
  transition: .3s;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .formGroupCheckbox .formGroupCheckboxList label .checkboxInputBox{
  width: 20px;
  height: 20px;
  border: 2px solid var(--primaryColor);
  border-radius: 5px;
  transition: .3s;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .formGroupCheckbox .formGroupCheckboxList label .checkboxInputBox::after{
  position: absolute;
  content: '';
  width: 10px;
  height: 4px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg);
  top: 3px;
  display: none;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .formGroupCheckbox .formGroupCheckboxList label p{
  font-size: 16px;
  color: black;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .formGroupFileUpload {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .formGroupFileUpload .uploadBtn {
  width: 100%;
  background: #AACB73;
  color: white;
  padding: 20px;
  border-radius: 10px;
  margin-top: 10px;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 15px;
  cursor: pointer;
  transition: 0.3s;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .formGroupFileUpload .uploadBtn:hover {
  transition: 0.3s;
  background: #8fb54e;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .formGroupFileUpload .uploadBtn i {
  line-height: 0.5;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .formGroupFileUpload #file-input {
  display: none;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .formGroupFileUpload .filePreview {
  width: 100%;
  display: flex;
  display: flex;
  flex-direction: column;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .formGroupFileUpload .filePreview .filePreviewBox {
  width: 100%;
  margin-top: 10px;
  background: #f3fff4;
  padding: 5px 10px;
  border-radius: 5px;
  display: none;
  align-items: center;
  justify-content: space-between;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .formGroupFileUpload .filePreview .filePreviewBox .filePreviewName {
  width: calc(100% - 40px);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .formGroupFileUpload .filePreview .filePreviewBox .closeFileBtn {
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  background: rgb(0 0 0 / 4%);
  color: black;
  font-size: 12px;
  transition: 0.3s;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .formGroupFileUpload .filePreview .filePreviewBox .closeFileBtn:hover {
  transition: 0.3s;
  transform: translateY(-5px);
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupBody .formGroup .formGroupFileUpload .filePreview .filePreviewBox .closeFileBtn i {
  line-height: 0.5;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupFooter{
  width: 100%;
  border-top: 1px solid #eee;
  padding-top: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupFooter button{
  padding: 10px 30px;
  background: var(--primaryColor);
  color: white;
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 10px;
  font-size: 18px;
  transition: .3s;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupFooter button:hover{
  transition: .3s;
  opacity: .7;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupFooter button:disabled{
  cursor: not-allowed;
  opacity: .5;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupFooter .backStudentToNurseconversionBtn{
  display: flex;
  align-items: center;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 10px;
  font-size: 18px;
  transition: .3s;
  background: #eeeeeeb9;
  gap: 10px;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupFooter .backStudentToNurseconversionBtn:hover{
  transition: .3s;
  opacity: .7;
}
.studentToNurseconversionPopup form .studentToNurseconversionPopupFooter .backStudentToNurseconversionBtn i{
  line-height: .5;
}




@media (max-width: 768px) {
  .nav-2-page nav {
    display: none;
  }
}
@media (max-width: 768px) {
  .nav-2-page .mobileNav {
    display: none;
  }
}
@media (max-width: 768px) {
  .nav-2-page .mobileNav2 {
    display: block;
  }
}

.bottom-nav-off .footerMenu {
  display: none;
}
.bottom-nav-off main {
  padding-bottom: 30px;
}
.bottom-nav-off #formSection {
  padding-bottom: 40px;
}

.home nav {
  border: none;
  background: var(--primaryColor);
  box-shadow: none;
}
.home nav .navMain .navLink ul li a {
  color: white;
}
.home nav .navMain .navLink ul li a:hover {
  border-bottom: 2px solid white;
}
.home nav .navMain .navLink ul li .navLinkActive {
  border-bottom: 2px solid white;
}
.home nav .navMain .navIcon a {
  color: white;
}
.home nav .navMain .navIcon a:hover {
  background: rgba(255, 255, 255, 0.1921568627);
}

nav {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  background: white;
  border-bottom: 1px solid #E1DFDF;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.0784313725);
}
@media (max-width: 768px) {
  nav {
    display: none;
  }
}
nav .navMain {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  gap: 60px;
}
nav .navMain .navLogo {
  text-decoration: none;
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}
nav .navMain .navLogo img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
nav .navMain .navLink {
  margin-left: auto;
}
nav .navMain .navLink ul {
  display: flex;
  align-items: center;
  align-items: center;
  gap: 60px;
}
nav .navMain .navLink ul li {
  list-style: none;
}
nav .navMain .navLink ul li a {
  text-decoration: none;
  font-size: 18px;
  color: var(--primaryColor);
  font-weight: 400;
  padding: 5px 10px;
}
nav .navMain .navLink ul li a:hover {
  border-bottom: 2px solid var(--primaryColor);
}
nav .navMain .navLink ul li .navLinkActive {
  border-bottom: 2px solid var(--primaryColor);
}
nav .navMain .navIcon {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
}
nav .navMain .navIcon a {
  text-decoration: none;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--primaryColor);
  border-radius: 5px;
  font-size: 20px;
  line-height: 0.5;
  transition: 0.3s;
}
nav .navMain .navIcon a:hover {
  transition: 0.3s;
  background: rgba(164, 42, 240, 0.2);
}
nav .navMain .navIcon .notificationActive{
	position: relative;
}
nav .navMain .navIcon .notificationActive::after{
	position: absolute;
	content: '';
	    width: 8px;
    height: 8px;
    border-radius: 20px;
    background: orange;
    top: 8px;
    right: 8px;
    border: 2px solid white;
}
nav .navMain .navIcon .navProfile {
  text-decoration: none;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--primaryColor);
  border-radius: 5px;
  font-size: 20px;
  line-height: 0.5;
  cursor: pointer;
  transition: 0.3s;
  position: relative;
}
.home nav .navMain .navIcon .navProfile {
  text-decoration: none;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  border-radius: 5px;
  font-size: 20px;
  line-height: 0.5;
  cursor: pointer;
  transition: 0.3s;
  position: relative;
}
nav .navMain .navIcon .navProfile:hover {
  transition: 0.3s;
  background: rgba(164, 42, 240, 0.2);
}
nav .navMain .navIcon .navProfile:hover .navProfileMenuPopup {
  display: block;
}
nav .navMain .navIcon .navProfile .navProfileMenuPopup {
  position: absolute;
  background: white;
  top: 100%;
  width: 220px;
  border: 1px solid #eee;
  right: 0;
  border-radius: 8px;
  display: none;
}
nav .navMain .navIcon .navProfile .navProfileMenuPopup a {
  width: 100%;
  display: flex;
  align-items: center;
  color: #343434;
  font-size: 14px;
  justify-content: flex-start;
  text-align: left;
  padding: 12px 15px;
  height: auto;
  border-radius: 0;
  gap: 15px;
}
nav .navMain .navIcon .navProfile .navProfileMenuPopup a:hover {
  background: var(--secondaryHoverColor);
}
nav .navMain .navIcon .navProfile .navProfileMenuPopup a i {
  font-size: 14px;
  color: #aaa;
}

.mobileNav {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  background: var(--primaryColor);
  display: none;
}
@media (max-width: 768px) {
  .mobileNav {
    display: block;
  }
}
.mobileNav .mobileNavMain {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobileNav .mobileNavMain .mobileNavLogo {
  text-decoration: none;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mobileNav .mobileNavMain .mobileNavLogo img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.mobileNav .mobileNavMain .mobileNavNotification {
  text-decoration: none;
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
}
.mobileNav .mobileNavMain .mobileNavNotification img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.mobileNav .mobileNavMain .notificationActive{
	position: relative;
}
.mobileNav .mobileNavMain .notificationActive::after{
	position: absolute;
	content: '';
	    width: 8px;
    height: 8px;
    border-radius: 20px;
    background: orange;
        top: 3px;
    right: 0px;
    border: 2px solid var(--primaryColor);
}
.mobileNav .mobileNavMain .mobileNavAccount {
  text-decoration: none;
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 40px;
  color: white;
  font-size: 24px;
}
.mobileNav .mobileNavMain .mobileNavAccount i{
  line-height: .5;
}
.mobileNav .mobileNavMain .mobileNavAccount img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.mobileNav2 {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  background: var(--primaryColor);
  display: none;
}
.mobileNav2 .mobileNav2Main {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.mobileNav2 .mobileNav2Main .mobileNav2Back {
  position: absolute;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  font-size: 30px;
  color: white;
  cursor: pointer;
}
.mobileNav2 .mobileNav2Main .mobileNav2Back i {
  line-height: 0.5;
}
.mobileNav2 .mobileNav2Main .mobileNav2Name {
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mobileNav2 .mobileNav2Main .mobileNav2Name p {
  color: white;
  font-size: 20px;
}
.mobileNav2 .mobileNav2Main .mobileNav2Account{
	text-decoration: none;
	color: white;
	font-size: 24px;
	display: flex;
	    position: absolute;
    right: 0;
}
.mobileNav2 .mobileNav2Main .mobileNav2Account i{
	line-height: .5
}

.footerMenu {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 50;
  background: white;
  display: none;
  border-top: 1px solid #E1DFDF;
  box-shadow: 0px -3px 5px rgba(0, 0, 0, 0.0784313725);
}
@media (max-width: 768px) {
  .footerMenu {
    display: block;
  }
}
.footerMenu .footerMenuMain {
  width: 100%;
  height: 60px;
  display: flex;
}
.footerMenu .footerMenuMain ul {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.footerMenu .footerMenuMain ul li {
  list-style: none;
  width: 100%;
}
.footerMenu .footerMenuMain ul li a {
  text-decoration: none;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 5px;
  color: black;
  padding: 7px 5px;
  border-radius: 10px;
}
.footerMenu .footerMenuMain ul li a i {
  line-height: 0.5;
  font-size: 12px;
}
.footerMenu .footerMenuMain ul li a p {
  font-size: 10px;
}
.footerMenu .footerMenuMain ul li .footerMenuActive {
  background: var(--primaryColor);
  color: white;
}

.backBtnArea {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 80px;
}
.backBtnArea .formBackBtn {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 15px;
}
.backBtnArea .formBackBtn .formBackBtnIcon {
  width: 20px;
}
@media (max-width: 768px) {
  .backBtnArea .formBackBtn .formBackBtnIcon {
    display: none;
  }
}
.backBtnArea .formBackBtn .formBackBtnIcon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.backBtnArea .formBackBtn p {
  color: black;
  font-size: 22px;
}
@media (max-width: 768px) {
  .backBtnArea .formBackBtn p {
    font-weight: 600;
  }
}

#banner {
  width: 100%;
  background: var(--primaryColor);
  margin-top: 80px;
}
@media (max-width: 768px) {
  #banner {
    margin-top: 30px;
    background: white;
  }
}
#banner .bannerMain {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 1000px) {
  #banner .bannerMain {
    padding: 50px 0px;
  }
}
@media (max-width: 768px) {
  #banner .bannerMain {
    padding: 20px 0px 0px 0px;
  }
}
#banner .bannerMain .bannerDetails {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1000px) {
  #banner .bannerMain .bannerDetails {
    flex: 100%;
  }
}
#banner .bannerMain .bannerDetails h1 {
  font-size: 3em;
  color: white;
  font-weight: 500;
}
@media (max-width: 768px) {
  #banner .bannerMain .bannerDetails h1 {
    display: none;
  }
}
#banner .bannerMain .bannerDetails p {
  font-size: 22px;
  color: white;
  font-weight: 300;
  line-height: 1.5;
  width: 85%;
  margin-top: 15px;
}
@media (max-width: 1350px) {
  #banner .bannerMain .bannerDetails p {
    width: 100%;
  }
}
@media (max-width: 768px) {
  #banner .bannerMain .bannerDetails p {
    display: none;
  }
}
#banner .bannerMain .bannerDetails .bannerSearch {
  width: 500px;
  background: white;
  margin-top: 30px;
  display: flex;
  align-items: center;
  border-radius: 5px;
  overflow: hidden;
  height: 50px;
}
@media (max-width: 768px) {
  #banner .bannerMain .bannerDetails .bannerSearch {
    margin-top: 0;
    width: 100%;
    border: 1px solid #37474F;
    height: 40px;
  }
}
#banner .bannerMain .bannerDetails .bannerSearch input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  padding: 0px 15px;
  font-size: 18px;
}
@media (max-width: 768px) {
  #banner .bannerMain .bannerDetails .bannerSearch input {
    font-size: 16px;
  }
}
#banner .bannerMain .bannerDetails .bannerSearch input::-moz-placeholder {
  font-weight: 300;
  font-size: 18px;
}
#banner .bannerMain .bannerDetails .bannerSearch input::placeholder {
  font-weight: 300;
  font-size: 18px;
}
@media (max-width: 768px) {
  #banner .bannerMain .bannerDetails .bannerSearch input::-moz-placeholder {
    font-size: 16px;
    font-weight: 400;
  }
  #banner .bannerMain .bannerDetails .bannerSearch input::placeholder {
    font-size: 16px;
    font-weight: 400;
  }
}
#banner .bannerMain .bannerDetails .bannerSearch button {
  width: 60px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  outline: none;
  border: none;
  font-size: 20px;
  color: #5a5a5a;
  cursor: pointer;
}
#banner .bannerMain .bannerDetails .bannerSearch button i {
  line-height: 0.5;
}
#banner .bannerMain .bannerThumbnail {
  flex: 0 0 35%;
}
@media (max-width: 1000px) {
  #banner .bannerMain .bannerThumbnail {
    display: none;
  }
}
#banner .bannerMain .bannerThumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

#profileSection {
  width: 100%;
  margin-top: 80px;
}
@media (max-width: 768px) {
  #profileSection {
    margin-top: 60px;
  }
}
#profileSection .profileSectionMain {
  width: 100%;
  display: flex;
  flex-direction: column;
}
#profileSection .profileSectionMain .profileSectionHead {
  width: 100%;
  display: flex;
  gap: 20px;
  align-items: center;
}
@media (max-width: 768px) {
  #profileSection .profileSectionMain .profileSectionHead {
    gap: 20px;
    justify-content: center;
    flex-direction: column;
  }
}
@media (max-width: 480px) {
  #profileSection .profileSectionMain .profileSectionHead {
    padding: 0px 5%;
  }
}
#profileSection .profileSectionMain .profileSectionHead .profileSectionthumbnail {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
}
@media (max-width: 768px) {
  #profileSection .profileSectionMain .profileSectionHead .profileSectionthumbnail {
    width: 135px;
    height: 135px;
  }
}
#profileSection .profileSectionMain .profileSectionHead .profileSectionthumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#profileSection .profileSectionMain .profileSectionHead .profileSectionthumbnail .radialProgressBar {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: flex;
  background: #fff;
  justify-content: center;
  align-items: center;
  position: relative;
}
#profileSection .profileSectionMain .profileSectionHead .profileSectionthumbnail .radialProgressBar .overlay {
  border-radius: 50%;
  width: 130px;
  height: 130px;
  background: #fff;
  text-align: center;
  overflow: hidden;
  border: 2px solid white;
}
@media (max-width: 768px) {
  #profileSection .profileSectionMain .profileSectionHead .profileSectionthumbnail .radialProgressBar .overlay {
    width: 120px;
    height: 120px;
  }
}
#profileSection .profileSectionMain .profileSectionHead .profileSectionthumbnail .radialProgressBar .overlay img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#profileSection .profileSectionMain .profileSectionHead .profileSectionthumbnail .radialProgressBar .percentageValue {
  position: absolute;
  z-index: 2;
  background: white;
  border: 1px solid #000;
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 12px;
}
#profileSection .profileSectionMain .profileSectionHead .profileSectionthumbnail .radialProgressBar .percentageprogress-0 {
  bottom: 88%;
  left: 37%;
}
#profileSection .profileSectionMain .profileSectionHead .profileSectionthumbnail .radialProgressBar .percentageprogress-40 {
  bottom: 5px;
  left: 15%;
}
#profileSection .profileSectionMain .profileSectionHead .profileSectionthumbnail .radialProgressBar .percentageprogress-60 {
  bottom: 5px;
  left: 60%;
}
#profileSection .profileSectionMain .profileSectionHead .profileSectionthumbnail .radialProgressBar .percentageprogress-80 {
  bottom: 60%;
  left: 80%;
}
#profileSection .profileSectionMain .profileSectionHead .profileSectionthumbnail .radialProgressBar .percentageprogress-100 {
  bottom: 88%;
  left: 37%;
}
#profileSection .profileSectionMain .profileSectionHead .profileSectionthumbnail .progress-0 {
  background-image: linear-gradient(90deg, #fff 50%, transparent 50%), linear-gradient(90deg, var(--primaryColor) 50%, #fff 50%);
}
#profileSection .profileSectionMain .profileSectionHead .profileSectionthumbnail .progress-10 {
  background-image: linear-gradient(54deg, #fff 50%, transparent 50%), linear-gradient(90deg, var(--primaryColor) 50%, #fff 50%);
}
#profileSection .profileSectionMain .profileSectionHead .profileSectionthumbnail .progress-20 {
  background-image: linear-gradient(18deg, #fff 50%, transparent 50%), linear-gradient(90deg, var(--primaryColor) 50%, #fff 50%);
}
#profileSection .profileSectionMain .profileSectionHead .profileSectionthumbnail .progress-30 {
  background-image: linear-gradient(-18deg, #fff 50%, transparent 50%), linear-gradient(90deg, var(--primaryColor) 50%, #fff 50%);
}
#profileSection .profileSectionMain .profileSectionHead .profileSectionthumbnail .progress-40 {
  background-image: linear-gradient(-54deg, #fff 50%, transparent 50%), linear-gradient(90deg, var(--primaryColor) 50%, #fff 50%);
}
#profileSection .profileSectionMain .profileSectionHead .profileSectionthumbnail .progress-50 {
  background-image: linear-gradient(-90deg, #fff 50%, transparent 50%), linear-gradient(90deg, var(--primaryColor) 50%, #fff 50%);
}
#profileSection .profileSectionMain .profileSectionHead .profileSectionthumbnail .progress-60 {
  background-image: linear-gradient(90deg, var(--primaryColor) 50%, transparent 50%), linear-gradient(54deg, var(--primaryColor) 50%, #fff 50%);
}
#profileSection .profileSectionMain .profileSectionHead .profileSectionthumbnail .progress-70 {
  background-image: linear-gradient(90deg, var(--primaryColor) 50%, transparent 50%), linear-gradient(18deg, var(--primaryColor) 50%, #fff 50%);
}
#profileSection .profileSectionMain .profileSectionHead .profileSectionthumbnail .progress-80 {
  background-image: linear-gradient(90deg, var(--primaryColor) 50%, transparent 50%), linear-gradient(-18deg, var(--primaryColor) 50%, #fff 50%);
}
#profileSection .profileSectionMain .profileSectionHead .profileSectionthumbnail .progress-90 {
  background-image: linear-gradient(90deg, var(--primaryColor) 50%, transparent 50%), linear-gradient(-54deg, var(--primaryColor) 50%, #fff 50%);
}
#profileSection .profileSectionMain .profileSectionHead .profileSectionthumbnail .progress-100 {
  background-image: linear-gradient(90deg, var(--primaryColor) 50%, transparent 50%), linear-gradient(-90deg, var(--primaryColor) 50%, #fff 50%);
}
#profileSection .profileSectionMain .profileSectionHead .profileSectionDetails {
  display: flex;
  flex-direction: column;
}
@media (max-width: 768px) {
  #profileSection .profileSectionMain .profileSectionHead .profileSectionDetails {
    justify-content: center;
    align-items: center;
  }
}
#profileSection .profileSectionMain .profileSectionHead .profileSectionDetails h2 {
  font-size: 22px;
  font-weight: 500;
}
@media (max-width: 768px) {
  #profileSection .profileSectionMain .profileSectionHead .profileSectionDetails h2 {
    font-size: 20px;
    text-align: center;
  }
}
#profileSection .profileSectionMain .profileSectionHead .profileSectionDetails p {
  font-size: 16px;
  color: #979797;
  margin-top: 7px;
}
@media (max-width: 768px) {
  #profileSection .profileSectionMain .profileSectionHead .profileSectionDetails p {
    margin-top: 5px;
    text-align: center;
  }
}
#profileSection .profileSectionMain .profileSectionHead .profileSectionDetails a {
  text-decoration: none;
  border: 1px solid #434343;
  padding: 10px 15px;
  border-radius: 5px;
  margin-top: 12px;
  font-size: 14px;
  color: #434343;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 300px;
  transition: 0.3s;
}
#profileSection .profileSectionMain .profileSectionHead .profileSectionDetails a:hover {
  transition: 0.3s;
  background: var(--secondaryHoverColor);
}
@media (max-width: 650px) {
  #profileSection .profileSectionMain .profileSectionHead .profileSectionDetails a {
    width: 100%;
    margin-top: 10px;
    font-size: 14px;
    gap: 20px;
  }
}
#profileSection .profileSectionMain .profileSectionHead .profileSectionDetails a i {
  line-height: 0.5;
  font-size: 20px;
}
#profileSection .profileSectionMain .profileSectionHead .WalletBox{
  width: 260px;
  padding: 10px;
  border-radius: 10px;
  background: linear-gradient(45deg, #336deb, #0847cc);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: auto;
}
@media(max-width:768px){
  #profileSection .profileSectionMain .profileSectionHead .WalletBox{
    width: 100%;
    justify-content: center;
    align-items: center;
  }
}
#profileSection .profileSectionMain .profileSectionHead .WalletBox .WalletBoxCol1{
  width: 100%;
  display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}
#profileSection .profileSectionMain .profileSectionHead .WalletBox .WalletBoxCol1 h4{
  font-size: 16px;
  font-weight: 600;
  color: white;
}
#profileSection .profileSectionMain .profileSectionHead .WalletBox .WalletBoxCol1 h4 span{
  font-size: 16px;
  font-weight: 400;
}
#profileSection .profileSectionMain .profileSectionHead .WalletBox .WalletBoxCol1 p{
  margin-top: 2px;
  color: white;
  font-size: 16px;
  font-weight: 300;
}

#profileSection .profileSectionMain .profileSectionBody {
  width: 100%;
  display: flex;
  margin-top: 80px;
  -moz-column-gap: 70px;
       column-gap: 70px;
  flex-wrap: wrap;
  row-gap: 50px;
}
@media (max-width: 1200px) {
  #profileSection .profileSectionMain .profileSectionBody {
    -moz-column-gap: 40px;
         column-gap: 40px;
  }
}
@media (max-width: 650px) {
  #profileSection .profileSectionMain .profileSectionBody {
    row-gap: 0px;
    margin-top: 20px;
  }
}
#profileSection .profileSectionMain .profileSectionBody .profileSectionMenuBtn {
  width: calc(33.3333333333% - 47px);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #CCCCCC;
  padding: 15px 20px;
  border-radius: 5px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1098039216);
  color: black;
  transition: 0.3s;
}
#profileSection .profileSectionMain .profileSectionBody .profileSectionMenuBtn:hover {
  transition: 0.3s;
  background: var(--secondaryHoverColor);
}
@media (max-width: 1200px) {
  #profileSection .profileSectionMain .profileSectionBody .profileSectionMenuBtn {
    width: calc(33.3333333333% - 27px);
  }
}
@media (max-width: 1000px) {
  #profileSection .profileSectionMain .profileSectionBody .profileSectionMenuBtn {
    width: calc(50% - 20px);
  }
}
@media (max-width: 650px) {
  #profileSection .profileSectionMain .profileSectionBody .profileSectionMenuBtn {
    width: 100%;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid #CCCCCC;
    padding: 20px;
  }
}
#profileSection .profileSectionMain .profileSectionBody .profileSectionMenuBtn .profileSectionMenuBtnCol1 {
  display: flex;
  align-items: center;
  gap: 15px;
}
@media (max-width: 650px) {
  #profileSection .profileSectionMain .profileSectionBody .profileSectionMenuBtn .profileSectionMenuBtnCol1 {
    gap: 20px;
  }
}
#profileSection .profileSectionMain .profileSectionBody .profileSectionMenuBtn .profileSectionMenuBtnCol1 img {
  width: 18px;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#profileSection .profileSectionMain .profileSectionBody .profileSectionMenuBtn .profileSectionMenuBtnCol1 i {
  font-size: 16px;
  line-height: 0.5;
}
#profileSection .profileSectionMain .profileSectionBody .profileSectionMenuBtn .profileSectionMenuBtnCol1 p {
  font-size: 18px;
}
#profileSection .profileSectionMain .profileSectionBody .profileSectionMenuBtn .profileSectionMenuBtnCol2 {
  display: flex;
  justify-content: center;
  align-items: center;
}
#profileSection .profileSectionMain .profileSectionBody .profileSectionMenuBtn .profileSectionMenuBtnCol2 img {
  width: 20px;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#profileSection .profileSectionMain .profileSectionBody .profileSectionMenuBtn .profileSectionMenuBtnCol2 i {
  font-size: 24px;
  line-height: 0.5;
}
#profileSection .profileSectionMain .profileSectionBody .mobileProMenu {
  display: none;
}
@media (max-width: 768px) {
  #profileSection .profileSectionMain .profileSectionBody .mobileProMenu {
    display: flex;
  }
}
#profileSection .profileSectionMain .profileSectionFooter {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 100px;
  left: 0;
  position: fixed;
  z-index: 10;
}
@media (max-width: 1000px) {
  #profileSection .profileSectionMain .profileSectionFooter {
    position: inherit;
    margin-top: 40px;
    justify-content: flex-start;
  }
}
@media (max-width: 650px) {
  #profileSection .profileSectionMain .profileSectionFooter {
    margin-top: 20px;
  }
}
#profileSection .profileSectionMain .profileSectionFooter a {
  text-decoration: none;
  color: black;
  font-size: 14px;
  display: flex;
  padding: 10px 15px;
  border-radius: 5px;
  transition: 0.3s;
  background: rgba(238, 238, 238, 0.3137254902);
}
#profileSection .profileSectionMain .profileSectionFooter a:hover {
  transition: 0.3s;
  background: rgba(238, 238, 238, 0.5098039216);
}
@media (max-width: 1000px) {
  #profileSection .profileSectionMain .profileSectionFooter a {
    border-radius: 5px;
    width: calc(50% - 20px);
  }
}
@media (max-width: 650px) {
  #profileSection .profileSectionMain .profileSectionFooter a {
    width: 100%;
  }
}

@media (max-width: 650px) {
  .accountPofile .container {
    width: 100%;
  }
}

#formSection {
  width: 100%;
  margin-top: 80px;
  padding-bottom: 80px;
  min-height: calc(100vh - 140px);
}
@media (max-width: 768px) {
  #formSection {
    margin-top: 60px;
  }
}
#formSection .formSectionMain {
  width: 100%;
  display: flex;
  flex-direction: column;
}
#formSection .formSectionMain .formBackBtnArea {
  width: 100%;
  display: flex;
  align-items: center;
}
#formSection .formSectionMain .formBackBtnArea .formBackBtn {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 15px;
}
#formSection .formSectionMain .formBackBtnArea .formBackBtn .formBackBtnIcon {
  width: 20px;
}
@media (max-width: 768px) {
  #formSection .formSectionMain .formBackBtnArea .formBackBtn .formBackBtnIcon {
    display: none;
  }
}
#formSection .formSectionMain .formBackBtnArea .formBackBtn .formBackBtnIcon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#formSection .formSectionMain .formBackBtnArea .formBackBtn p {
  color: black;
  font-size: 22px;
}
@media (max-width: 768px) {
  #formSection .formSectionMain .formBackBtnArea .formBackBtn p {
    font-weight: 600;
  }
}

#formSection .formSectionMain .customeDropdown {
  position: relative;
  width: 160px;
  margin-top: 20px;
}
#formSection .formSectionMain .customeDropdown .customeDropdownHead {
  background: white;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--primaryColor);
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1803921569);
  transition: 0.3s;
}
@media (max-width: 768px) {
  #formSection .formSectionMain .customeDropdown .customeDropdownHead {
    border: 1px solid rgba(168, 168, 168, 0.462745098);
    box-shadow: none;
    color: black;
  }
}
#formSection .formSectionMain .customeDropdown .customeDropdownHead:hover {
  transition: 0.3s;
  background: var(--secondaryHoverColor);
}
#formSection .formSectionMain .customeDropdown .customeDropdownHead p {
  font-size: 16px;
}
#formSection .formSectionMain .customeDropdown .customeDropdownHead .customeDropdownHeadIcon {
  display: flex;
  justify-content: center;
  align-items: center;
}
#formSection .formSectionMain .customeDropdown .customeDropdownHead .customeDropdownHeadIcon i {
  line-height: 0.5;
}
#formSection .formSectionMain .customeDropdown .customeDropdownBody {
  position: absolute;
  background: white;
  border-radius: 5px;
  width: 100%;
  top: calc(100% + 1px);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1803921569);
  max-height: 160px;
  overflow-y: auto;
  display: none;
}
#formSection .formSectionMain .customeDropdown .customeDropdownBody ul {
  width: 100%;
  display: flex;
  flex-direction: column;
}
#formSection .formSectionMain .customeDropdown .customeDropdownBody ul li {
  list-style: none;
  padding: 5px 15px;
  font-size: 14px;
  cursor: pointer;
  transition: 0.3s;
}
#formSection .formSectionMain .customeDropdown .customeDropdownBody ul li:hover {
  transition: 0.3s;
  background: var(--secondaryHoverColor);
}
#formSection .formSectionMain .customeDropdown .customeDropdownBody ul .selected {
  color: var(--primaryColor);
  background: var(--secondaryHoverColor);
}
#formSection .formSectionMain form {
  width: 100%;
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 40px;
  -moz-column-gap: 100px;
       column-gap: 100px;
}
@media (max-width: 1350px) {
  #formSection .formSectionMain form {
    -moz-column-gap: 80px;
         column-gap: 80px;
  }
}
@media (max-width: 1200px) {
  #formSection .formSectionMain form {
    -moz-column-gap: 40px;
         column-gap: 40px;
  }
}
@media (max-width: 768px) {
  #formSection .formSectionMain form {
    margin-top: 20px;
  }
}
#formSection .formSectionMain form .formGroupMain{
  width: 100%;
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 40px;
  -moz-column-gap: 100px;
       column-gap: 100px;
}
@media (max-width: 1350px) {
  #formSection .formSectionMain form .formGroupMain{
    -moz-column-gap: 80px;
         column-gap: 80px;
  }
}
@media (max-width: 1200px) {
  #formSection .formSectionMain form .formGroupMain{
    -moz-column-gap: 40px;
         column-gap: 40px;
  }
}
@media (max-width: 768px) {
  #formSection .formSectionMain form .formGroupMain{
    margin-top: 20px;
  }
}
#formSection .formSectionMain form .formSubTitle{
  width: 100%;
  margin-top: 20px;
}

#formSection .formSectionMain form .formSubTitle:nth-of-type(1){
  margin-top: 0;
}
#formSection .formSectionMain form .formSubTitle h2{
  font-size: 20px;
  font-weight: 500;
}
#formSection .formSectionMain form .formGroup {
  width: calc(33.3333333333% - 67px);
  display: flex;
  flex-direction: column;
}
@media (max-width: 1350px) {
  #formSection .formSectionMain form .formGroup {
    width: calc(33.3333333333% - 54px);
  }
}
@media (max-width: 1200px) {
  #formSection .formSectionMain form .formGroup {
    width: calc(33.3333333333% - 27px);
  }
}
@media (max-width: 1000px) {
  #formSection .formSectionMain form .formGroup {
    width: calc(50% - 20px);
  }
}
@media (max-width: 650px) {
  #formSection .formSectionMain form .formGroup {
    width: 100%;
  }
}
#formSection .formSectionMain form .formGroup label {
  font-size: 18px;
}
#formSection .formSectionMain form .formGroup select {
  width: 100%;
  height: 50px;
  border: 1px solid #000;
  padding: 10px 10px;
  border-radius: 5px;
  margin-top: 5px;
  font-size: 14px;
  outline: none;
  background: white;
  color: black;
}
#formSection .formSectionMain form .formGroup .formGroupBox {
  width: 100%;
  position: relative;
}
#formSection .formSectionMain form .formGroup .formGroupBox input {
  width: 100%;
  height: 50px;
  border: 1px solid #343434;
  border-radius: 5px;
  outline: none;
  padding: 0px 15px;
  font-size: 20px;
}
#formSection .formSectionMain form .formGroup .formGroupBox input:focus {
  border-color: var(--primaryColor);
}
#formSection .formSectionMain form .formGroup .formGroupBox input:focus ~ label {
  color: var(--primaryColor);
}
#formSection .formSectionMain form .formGroup .formGroupBox textarea {
  width: 100%;
  height: 100px;
  border: 1px solid #343434;
  border-radius: 5px;
  outline: none;
  padding: 12px 15px;
  font-size: 20px;
}
#formSection .formSectionMain form .formGroup .formGroupBox textarea:focus {
  border-color: var(--primaryColor);
}
#formSection .formSectionMain form .formGroup .formGroupBox textarea:focus ~ label {
  color: var(--primaryColor);
}
#formSection .formSectionMain form .formGroup .formGroupBox label {
  position: absolute;
  background: white;
  width: -moz-fit-content;
  width: fit-content;
  padding: 2px 5px;
  top: -10px;
  left: 12px;
  color: #8F8F8F;
  font-size: 16px;
}
#formSection .formSectionMain form .formGroup .formGroupBox .togglePassword {
  position: absolute;
  right: 15px;
  top: 5%;
  cursor: pointer;
  background: white;
  height: 90%;
  width: 30px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
#formSection .formSectionMain form .formGroup .courseDateParice {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
#formSection .formSectionMain form .formGroup .courseDateParice input {
  display: none;
}
#formSection .formSectionMain form .formGroup .courseDateParice input:checked ~ label {
  border-color: var(--primaryColor);
}
#formSection .formSectionMain form .formGroup .courseDateParice input:checked ~ label .courseDateBox {
  background: var(--primaryColor);
}
#formSection .formSectionMain form .formGroup .courseDateParice input:checked ~ label .courseTimeBox {
  border-right: 1px solid var(--primaryColor);
}
#formSection .formSectionMain form .formGroup .courseDateParice input:checked ~ label .courseTimeBox i {
  color: var(--primaryColor);
}
#formSection .formSectionMain form .formGroup .courseDateParice input:checked ~ label .courseTimeBox p {
  color: var(--primaryColor);
}
#formSection .formSectionMain form .formGroup .courseDateParice input:checked ~ label .coursePriceBox i {
  color: var(--primaryColor);
}
#formSection .formSectionMain form .formGroup .courseDateParice input:checked ~ label .coursePriceBox p {
  color: var(--primaryColor);
}
#formSection .formSectionMain form .formGroup .courseDateParice label {
  width: 100%;
  display: flex;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 5px;
  height: 50px;
  cursor: pointer;
  transition: 0.3s;
}
#formSection .formSectionMain form .formGroup .courseDateParice label:hover {
  transition: 0.3s;
  background: var(--secondaryHoverColor);
}
#formSection .formSectionMain form .formGroup .courseDateParice label .courseDateBox {
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.8);
  padding: 0px 10px;
  height: 100%;
}
#formSection .formSectionMain form .formGroup .courseDateParice label .courseDateBox p {
  color: white;
  font-size: 14px;
  text-transform: uppercase;
}
#formSection .formSectionMain form .formGroup .courseDateParice label .courseTimeBox {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0px 10px;
  height: 100%;
}
#formSection .formSectionMain form .formGroup .courseDateParice label .courseTimeBox i {
  line-height: 0.5;
  font-size: 16px;
}
#formSection .formSectionMain form .formGroup .courseDateParice label .courseTimeBox p {
  font-size: 14px;
  text-transform: uppercase;
}
#formSection .formSectionMain form .formGroup .courseDateParice label .coursePriceBox {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0px 10px;
  height: 100%;
}
#formSection .formSectionMain form .formGroup .courseDateParice label .coursePriceBox i {
  line-height: 0.5;
  font-size: 16px;
  color: #1CA733;
}
#formSection .formSectionMain form .formGroup .courseDateParice label .coursePriceBox p {
  color: #1CA733;
  font-size: 14px;
  font-weight: 500;
}
#formSection .formSectionMain form .formGroup .formGroupInput{
  width: 100%;
  position: relative;
}
#formSection .formSectionMain form .formGroup .formGroupInput input{
  width: 100%;
  position: relative;
  height: 50px;
  border: 1px solid #343434;
  border-radius: 5px;
  outline: none;
  font-size: 20px;
  padding: 0px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
#formSection .formSectionMain form .formGroup .formGroupInput label {
  position: absolute;
  background: white;
  width: -moz-fit-content;
  width: fit-content;
  padding: 2px 5px;
  top: -10px;
  left: 12px;
  color: #8F8F8F;
  font-size: 16px;
}
#formSection .formSectionMain form .formGroup .formGroupFileUpload {
  width: 100%;
  display: flex;
  flex-direction: column;
	margin-top: 10px;
}
#formSection .formSectionMain form .formGroup .formGroupFileUpload .uploadBtn {
  width: 100%;
  background: #AACB73;
  color: white;
  padding: 10px 20px;
  height: 50px;
  border-radius: 10px;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 15px;
  cursor: pointer;
  transition: 0.3s;
}
#formSection .formSectionMain form .formGroup .formGroupFileUpload .uploadBtn:hover {
  transition: 0.3s;
	background:#8fb54e;
}
#formSection .formSectionMain form .formGroup .formGroupFileUpload .uploadBtn i {
  line-height: 0.5;
}
#formSection .formSectionMain form .formGroup .formGroupFileUpload #file-input {
  display: none;
}
#formSection .formSectionMain form .formGroup .formGroupFileUpload .filePreview {
  width: 100%;
  display: flex;
  display: flex;
  flex-direction: column;
}
#formSection .formSectionMain form .formGroup .formGroupFileUpload .filePreview .filePreviewBox {
  width: 100%;
  margin-top: 10px;
  background: #f3fff4;
  padding: 5px 10px;
  border-radius: 5px;
  display: none;
  align-items: center;
  justify-content: space-between;
}
#formSection .formSectionMain form .formGroup .formGroupFileUpload .filePreview .filePreviewBox .filePreviewName {
  width: calc(100% - 40px);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
#formSection .formSectionMain form .formGroup .formGroupFileUpload .filePreview .filePreviewBox .closeFileBtn {
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  background: rgb(0 0 0 / 4%);
  color: black;
  font-size: 12px;
  transition: 0.3s;
}
#formSection .formSectionMain form .formGroup .formGroupFileUpload .filePreview .filePreviewBox .closeFileBtn:hover {
  transition: 0.3s;
  transform: translateY(-5px);
}
#formSection .formSectionMain form .formGroup .formGroupFileUpload .filePreview .filePreviewBox .closeFileBtn i {
  line-height: 0.5;
}



#formSection .formSectionMain form .formGroup .customDropDown {
  width: 100%;
  position: relative;
}
#formSection .formSectionMain form .formGroup .customDropDown .customDropDownHead {
  width: 100%;
  position: relative;
  height: 50px;
  border: 1px solid #343434;
  border-radius: 5px;
  outline: none;
  padding: 0px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
#formSection .formSectionMain form .formGroup .customDropDown .customDropDownHead label {
  position: absolute;
  background: white;
  width: -moz-fit-content;
  width: fit-content;
  padding: 2px 5px;
  top: -10px;
  left: 12px;
  color: #8F8F8F;
  font-size: 16px;
}
@media(max-width:480px){
	#formSection .formSectionMain form .formGroup .customDropDown .customDropDownHead label{
		font-size :14px;
	}
}
#formSection .formSectionMain form .formGroup .customDropDown .customDropDownHead .customDropDownHeadInput {
  width: 100%;
  border: none;
  outline: none;
  font-size: 20px;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
	color :#343434;
}
#formSection .formSectionMain form .formGroup .customDropDown .customDropDownHead .customDropDownHeadInput:disabled {
  cursor: pointer;
  background: white;
}
#formSection .formSectionMain form .formGroup .customDropDown .customDropDownHead .customDropDownHeadIcon {
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#formSection .formSectionMain form .formGroup .customDropDown .customDropDownHead .customDropDownHeadIcon i {
  line-height: 0.5;
}
#formSection .formSectionMain form .formGroup .customDropDown .customDropDownPopup {
  position: absolute;
  top: calc(100% - 3px);
  width: 100%;
  background: white;
  z-index: 10;
  border: 1px solid #343434;
  display: none;
  max-height: 200px;
  overflow-y: auto;
}
#formSection .formSectionMain form .formGroup .customDropDown .customDropDownPopup ul {
  width: 100%;
  display: flex;
  flex-direction: column;
}
#formSection .formSectionMain form .formGroup .customDropDown .customDropDownPopup ul li {
  list-style: none;
  padding: 8px 15px;
  cursor: pointer;
  transition: 0.3s;
}
#formSection .formSectionMain form .formGroup .customDropDown .customDropDownPopup ul li:hover {
  transition: 0.3s;
  background: #f3f3f3;
}
#formSection .formSectionMain form .formGroup .customDropDown .customDropDownPopup ul li p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
#formSection .formSectionMain form .formGroup .customDropDown .customDropDownPopup ul .selected {
  background: #f3f3f3;
}
#formSection .formSectionMain form .formGroup .customDropDown .customDropDownPopupUp {
  top: calc(100% - 3px);
  bottom: inherit;
}
#formSection .formSectionMain form .formGroup .customDropDown .customDropDownPopupDown {
  bottom: calc(100% - 3px);
  top: inherit;
}
#formSection .formSectionMain form .col-1 {
  width: 100%;
}
#formSection .formSectionMain form .col-2 {
  width: calc(50% - 25px);
}
@media (max-width: 1024px) {
  #formSection .formSectionMain form .col-2 {
    width: calc(50% - 10px);
  }
}
@media (max-width: 768px) {
  #formSection .formSectionMain form .col-2 {
    width: 100%;
  }
}
#formSection .formSectionMain form .col-3 {
  width: calc(33.3333333333% - 33.5px);
}
@media (max-width: 1024px) {
  #formSection .formSectionMain form .col-3 {
    width: calc(33.3333333333% - 14px);
  }
}
@media (max-width: 768px) {
  #formSection .formSectionMain form .col-3 {
    width: calc(50% - 10px);
  }
}
@media (max-width: 480px) {
  #formSection .formSectionMain form .col-3 {
    width: 100%;
  }
}
#formSection .formSectionMain form .formBtnArea {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 100px;
  left: 0;
  position: fixed;
  z-index: 10;
}
@media (max-width: 480px) {
  #formSection .formSectionMain form .formBtnArea {
    bottom: 60px;
    left: 0;
  }
}
#formSection .formSectionMain form .formBtnArea .formSbtBtn {
  background: var(--primaryColor);
  color: white;
  border: none;
  outline: none;
  padding: 8px 15px;
  border-radius: 7px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1803921569);
}
@media (max-width: 480px) {
  #formSection .formSectionMain form .formBtnArea .formSbtBtn {
    width: 100%;
    border-radius: 0;
    padding: 12px 15px;
  }
}
#formSection .formSectionMain form .formBtnArea .formSbtBtn:hover {
  transition: 0.3s;
  opacity: 0.7;
  box-shadow: none;
}
#formSection .formSectionMain form .formBtnArea .formSbtBtn:disabled{
	cursor: not-allowed;
	background: #cbcbcb;
}
#cashbackSection {
  width: 100%;
  margin-top: 80px;
}
@media (max-width: 768px) {
  #cashbackSection {
    margin-top: 60px;
  }
}
#cashbackSection .cashbackSectionMain {
  width: 100%;
  display: flex;
  flex-direction: column;
}
#cashbackSection .cashbackSectionMain .cashbackBackBtnArea {
  width: 100%;
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  #cashbackSection .cashbackSectionMain .cashbackBackBtnArea {
    display: none;
  }
}
#cashbackSection .cashbackSectionMain .cashbackBackBtnArea .cashbackBackBtn {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 15px;
}
#cashbackSection .cashbackSectionMain .cashbackBackBtnArea .cashbackBackBtn .cashbackBackBtnIcon {
  width: 15px;
}
#cashbackSection .cashbackSectionMain .cashbackBackBtnArea .cashbackBackBtn .cashbackBackBtnIcon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#cashbackSection .cashbackSectionMain .cashbackBackBtnArea .cashbackBackBtn p {
  color: black;
  font-size: 22px;
}
#cashbackSection .cashbackSectionMain .cashbackSectionTab {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 50px;
  gap: 5px;
}
@media (max-width: 768px) {
  #cashbackSection .cashbackSectionMain .cashbackSectionTab {
    margin-top: 0;
  }
}
#cashbackSection .cashbackSectionMain .cashbackSectionTab button {
  border: none;
  outline: none;
  color: #ADADAD;
  background: none;
  padding: 7px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid white;
  transition: 0.3s;
}
#cashbackSection .cashbackSectionMain .cashbackSectionTab button:hover {
  transition: 0.3s;
  color: var(--primaryColor);
  border-bottom: 2px solid var(--primaryColor);
}
#cashbackSection .cashbackSectionMain .cashbackSectionTab .active {
  color: var(--primaryColor);
  border-bottom: 2px solid var(--primaryColor);
}
#cashbackSection .cashbackSectionMain .cashbackSectionTabList {
  width: 50%;
  margin-top: 20px;
}
@media (max-width: 1200px) {
  #cashbackSection .cashbackSectionMain .cashbackSectionTabList {
    width: 70%;
  }
}
@media (max-width: 768px) {
  #cashbackSection .cashbackSectionMain .cashbackSectionTabList {
    width: 100%;
  }
}
#cashbackSection .cashbackSectionMain .cashbackSectionTabList .cashbackSectionTabListBox {
  width: 100%;
  display: none;
  animation: fadeEffect 1s;
}
#cashbackSection .cashbackSectionMain .cashbackSectionTabList .cashbackSectionTabListBox .cashbackSectionTabListBoxMain {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#cashbackSection .cashbackSectionMain .cashbackSectionTabList .cashbackSectionTabListBox .cashbackSectionTabListBoxMain .cashbackSectionTabListBoxBtn {
  text-decoration: none;
  background: white;
  border: 1px solid rgba(204, 204, 204, 0.5607843137);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 5px;
  padding: 10px;
  transition: 0.3s;
}
#cashbackSection .cashbackSectionMain .cashbackSectionTabList .cashbackSectionTabListBox .cashbackSectionTabListBoxMain .cashbackSectionTabListBoxBtn:hover {
  transition: 0.3s;
  background: var(--secondaryHoverColor);
}
#cashbackSection .cashbackSectionMain .cashbackSectionTabList .cashbackSectionTabListBox .cashbackSectionTabListBoxMain .cashbackSectionTabListBoxBtn .cashbackSectionTabListBoxCol1 {
  flex: 0 0 80%;
  display: flex;
  flex-direction: column;
}
#cashbackSection .cashbackSectionMain .cashbackSectionTabList .cashbackSectionTabListBox .cashbackSectionTabListBoxMain .cashbackSectionTabListBoxBtn .cashbackSectionTabListBoxCol1 h3 {
  font-size: 14px;
  font-weight: 500;
  color: black;
}
#cashbackSection .cashbackSectionMain .cashbackSectionTabList .cashbackSectionTabListBox .cashbackSectionTabListBoxMain .cashbackSectionTabListBoxBtn .cashbackSectionTabListBoxCol1 p {
  font-size: 12px;
  margin-top: 5px;
  color: var(--secondaryTextColor);
}
#cashbackSection .cashbackSectionMain .cashbackSectionTabList .cashbackSectionTabListBox .cashbackSectionTabListBoxMain .cashbackSectionTabListBoxBtn .cashbackSectionTabListBoxCol2 {
  flex: 0 0 15%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#cashbackSection .cashbackSectionMain .cashbackSectionTabList .cashbackSectionTabListBox .cashbackSectionTabListBoxMain .cashbackSectionTabListBoxBtn .cashbackSectionTabListBoxCol2 p {
  font-size: 12px;
  color: var(--secondaryTextColor);
}
#cashbackSection .cashbackSectionMain .cashbackSectionTabList .cashbackSectionTabListBox .cashbackSectionTabListBoxMain .cashbackSectionTabListBoxBtn .cashbackSectionTabListBoxCol2 h3 {
  font-size: 14px;
  font-weight: 500;
  margin-top: 5px;
  color: var(--primaryColor);
}
@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#innerWebinar {
  width: 100%;
  margin-top: 80px;
}
@media (max-width: 768px) {
  #innerWebinar {
    margin-top: 60px;
  }
}
#innerWebinar .innerWebinarMain {
  width: 100%;
  display: flex;
  flex-direction: column;
}
#innerWebinar .innerJobsDetails{
  padding: 0px 20%;
}
@media(max-width:1800px){
  #innerWebinar .innerJobsDetails{
    padding: 0px 15%;
  }
}
@media(max-width:1024px){
  #innerWebinar .innerJobsDetails{
    padding: 0px 10%;
  }
}
@media(max-width:768px){
  #innerWebinar .innerJobsDetails{
    padding: 0px;
  }
}
#innerWebinar .innerJobsDetails .innerWebinarListCol1{
  flex: 100% !important;
}
#innerWebinar .innerJobsDetails .innerWebinarListCol2{
  display: none !important;
}
#innerWebinar .innerWebinarMain .innerWebinarBtnArea {
  width: 100%;
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  #innerWebinar .innerWebinarMain .innerWebinarBtnArea {
    display: none;
  }
}
#innerWebinar .innerWebinarMain .innerWebinarBtnArea .innerWebinarBtn {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 15px;
}
#innerWebinar .innerWebinarMain .innerWebinarBtnArea .innerWebinarBtn .innerWebinarBtnIcon {
  width: 15px;
}
#innerWebinar .innerWebinarMain .innerWebinarBtnArea .innerWebinarBtn .innerWebinarBtnIcon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#innerWebinar .innerWebinarMain .innerWebinarBtnArea .innerWebinarBtn p {
  color: black;
  font-size: 18px;
}
#innerWebinar .innerWebinarMain .innerWebinarList {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 50px;
}
@media (max-width: 768px) {
  #innerWebinar .innerWebinarMain .innerWebinarList {
    margin-top: 0px;
  }
}
@media (max-width: 480px) {
  #innerWebinar .innerWebinarMain .innerWebinarList {
    padding-bottom: 40px;
  }
}
#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol1 {
  flex: 0 0 65%;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1000px) {
  #innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol1 {
    flex: 100%;
  }
}
#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol1 .innerWebinarThumbnail {
  width: 100%;
}
#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol1 .innerWebinarThumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol1 .innerWebinarDetails {
  width: 100%;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}
#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol1 .innerWebinarDetails h2 {
  font-size: 18px;
  font-weight: 500;
  color: black;
}
#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol1 .innerWebinarDetails p {
  font-size: 14px;
  color: var(--secondaryTextColor);
  margin-top: 16px;
  line-height: 1.5;
}
#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol1 .innerWebinarDetails .innerWebinarSpec {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 60px;
       column-gap: 60px;
  row-gap: 20px;
}
@media (max-width: 480px) {
  #innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol1 .innerWebinarDetails .innerWebinarSpec {
    -moz-column-gap: 30px;
         column-gap: 30px;
  }
}
#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol1 .innerWebinarDetails .innerWebinarSpec li {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol1 .innerWebinarDetails .innerWebinarSpec li .innerWebinarSpecIcon {
  width: 15px;
}
#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol1 .innerWebinarDetails .innerWebinarSpec li .innerWebinarSpecIcon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol1 .innerWebinarDetails .innerWebinarSpec li i {
  font-size: 16px;
  line-height: 0.5;
}
#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol1 .innerWebinarDetails .innerWebinarSpec li span {
  font-size: 14px;
  display: flex;
}
#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol1 .innerWebinarDetails .innerWebinarSpec li .free {
  color: #1CA733;
}
#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol1 .innerWebinarDetails .innerWebinarBtnArea {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 50px;
}
@media(max-width:480px){
	#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol1 .innerWebinarDetails .innerWebinarBtnArea{
		position: fixed;
		bottom: 60px;
		left: 0;
		width :100%;
		z-index: 10;
	}
}
#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol1 .innerWebinarDetails .innerWebinarBtnArea .applyWebinarBtn {
  background: var(--primaryColor);
  color: white;
  font-size: 16px;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1803921569);
}
@media(max-width:480px){
	#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol1 .innerWebinarDetails .innerWebinarBtnArea a{
		width :100%;
		display :flex;
		justify-content :center;
		align-items: center;
	}
}
@media(max-width:480px){
	#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol1 .innerWebinarDetails .innerWebinarBtnArea a .joinWebinarBtn{
		padding: 12px;
		text-align :center;
		border-radius: 0;
		width :100%;
	}
}
@media(max-width:480px){
	#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol1 .innerWebinarDetails .innerWebinarBtnArea .applyWebinarBtn{
		padding: 12px;
		text-align :center;
		border-radius: 0;
		width :100%;
	}
}
#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol1 .innerWebinarDetails .innerWebinarBtnArea .applyWebinarBtn:hover {
  transition: 0.3s;
  opacity: 0.7;
  box-shadow: none;
}
#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol1 .innerWebinarDetails .innerWebinarBtnArea .joinWebinarBtn {
  background: var(--primaryColor);
  color: white;
  font-size: 16px;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1803921569);
}
#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol1 .innerWebinarDetails .innerWebinarBtnArea .joinWebinarBtn:hover {
  transition: 0.3s;
  opacity: 0.7;
  box-shadow: none;
}
#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol2 {
  flex: 0 0 28%;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1350px) {
  #innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol2 {
    flex: 0 0 29%;
  }
}
@media (max-width: 1000px) {
  #innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol2 {
    flex: 100%;
    margin-top: 50px;
  }
}
#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol2 h2 {
  font-size: 22px;
  font-weight: 500;
}
#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol2 .speakersList {
  width: 100%;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol2 .speakersList li {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol2 .speakersList li .speakersThumbnail {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #eee;
  overflow: hidden;
}
@media (max-width: 1350px) {
  #innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol2 .speakersList li .speakersThumbnail {
    width: 70px;
    height: 70px;
  }
}
#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol2 .speakersList li .speakersThumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol2 .speakersList li .speakersDetails {
  width: calc(100% - 100px);
  display: flex;
  flex-direction: column;
}
@media (max-width: 1350px) {
  #innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol2 .speakersList li .speakersDetails {
    width: calc(100% - 85px);
  }
}
#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol2 .speakersList li .speakersDetails h3 {
  font-size: 18px;
  font-weight: 500;
}
@media (max-width: 1350px) {
  #innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol2 .speakersList li .speakersDetails h3 {
    font-size: 16px;
  }
}
#innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol2 .speakersList li .speakersDetails p {
  font-size: 14px;
  color: #455A64;
  margin-top: 5px;
}
@media (max-width: 1350px) {
  #innerWebinar .innerWebinarMain .innerWebinarList .innerWebinarListCol2 .speakersList li .speakersDetails p {
    font-size: 12px;
  }
}

#welcomeForm {
  width: 100%;
  background: var(--primaryColor);
}
#welcomeForm .welcomeFormMain {
  width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 50px 0;
}
@media (max-width: 768px) {
  #welcomeForm .welcomeFormMain {
    width: 100%;
  }
}
#welcomeForm .welcomeFormMain .welcomeFormThumbnail {
  width: 50%;
}
#welcomeForm .welcomeFormMain .welcomeFormThumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails h2 {
  font-size: 24px;
  font-weight: 600;
  color: white;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails p {
  font-size: 16px;
  margin-top: 10px;
  color: white;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails .roleRadioSection {
  width: 100%;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails .roleRadioSection .roleRadioSectionBox {
  width: 100%;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails .roleRadioSection .roleRadioSectionBox input {
  display: none;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails .roleRadioSection .roleRadioSectionBox input:checked ~ label .roleRadioSectionBoxCol2 .roleRadioBtn .roleRadioBtnBox {
  display: block;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails .roleRadioSection .roleRadioSectionBox label {
  width: 100%;
  background: white;
  border-radius: 5px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails .roleRadioSection .roleRadioSectionBox label .roleRadioSectionBoxCol1 {
  width: calc(100% - 40px);
  display: flex;
  flex-direction: column;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails .roleRadioSection .roleRadioSectionBox label .roleRadioSectionBoxCol1 h3 {
  font-size: 18px;
  font-weight: 500;
  color: black;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails .roleRadioSection .roleRadioSectionBox label .roleRadioSectionBoxCol1 p {
  color: black;
  font-size: 14px;
  margin-top: 4px;
  line-height: 21px;
  width: 80%;
}
@media (max-width: 768px) {
  #welcomeForm .welcomeFormMain .welcomeFormDetails .roleRadioSection .roleRadioSectionBox label .roleRadioSectionBoxCol1 p {
    width: 100%;
  }
}
#welcomeForm .welcomeFormMain .welcomeFormDetails .roleRadioSection .roleRadioSectionBox label .roleRadioSectionBoxCol2 {
  display: flex;
  justify-content: center;
  align-items: center;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails .roleRadioSection .roleRadioSectionBox label .roleRadioSectionBoxCol2 .roleRadioBtn {
  width: 25px;
  height: 25px;
  border: 2px solid #1C1B1F;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails .roleRadioSection .roleRadioSectionBox label .roleRadioSectionBoxCol2 .roleRadioBtn .roleRadioBtnBox {
  width: 15px;
  height: 15px;
  background: #1C1B1F;
  border-radius: 50%;
  display: none;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails .nextSbtBtn {
  position: fixed;
  text-decoration: none;
  right: 50px;
  bottom: 50px;
  width: 70px;
  height: 70px;
  background: white;
  z-index: 5;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: black;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1019607843);
  transition: 0.3s;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails .nextSbtBtn:hover {
  transition: 0.3s;
  background: var(--secondaryHoverColor);
}
@media (max-width: 768px) {
  #welcomeForm .welcomeFormMain .welcomeFormDetails .nextSbtBtn {
    right: 20px;
    bottom: 20px;
    width: 60px;
    height: 60px;
  }
}
#welcomeForm .welcomeFormMain .welcomeFormDetails .nextSbtBtn i {
  line-height: 0.5;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form {
  width: 100%;
  background: white;
  padding: 20px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  margin-top: 30px;
  gap: 20px;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup {
  width: 100%;
  display: flex;
  flex-direction: column;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup label {
  font-size: 16px;
  font-weight: 600;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup select {
  width: 100%;
  height: 45px;
  background: white;
  border: 1px solid rgba(204, 204, 204, 0.8);
  border-radius: 5px;
  margin-top: 5px;
  font-size: 14px;
  color: black;
  padding: 0px 15px;
  outline: none;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup select:focus {
  border-color: black;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup select::-moz-placeholder {
  color: #7B7B7B;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup select::placeholder {
  color: #7B7B7B;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup input {
  width: 100%;
  height: 45px;
  background: white;
  border: 1px solid rgba(204, 204, 204, 0.8);
  border-radius: 5px;
  margin-top: 5px;
  font-size: 14px;
  color: black;
  padding: 0px 15px;
  outline: none;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup textarea{
  width: 100%;
  height: 75px;
  background: white;
  border: 1px solid rgba(204, 204, 204, 0.8);
  border-radius: 5px;
  margin-top: 5px;
  font-size: 14px;
  color: black;
  padding: 15px 15px;
  outline: none;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup input:focus {
  border-color: black;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup input::-moz-placeholder {
  color: #7B7B7B;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup input::placeholder {
  color: #7B7B7B;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .multipleDate {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .multipleDate .multipleDateBox {
  width: 100%;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .multipleDate .multipleDateBoxText {
  font-size: 14px;
  color: #7B7B7B;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formGroupRadio {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 10px;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formGroupRadio .formGroupRadioBox input {
  display: none;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formGroupRadio .formGroupRadioBox input:checked ~ label .formGroupRadioBoxIcon .formGroupRadioBoxIconBtn {
  display: block;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formGroupRadio .formGroupRadioBox label {
  display: flex;
  align-items: center;
  gap: 10px;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formGroupRadio .formGroupRadioBox label .formGroupRadioBoxIcon {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 2px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formGroupRadio .formGroupRadioBox label .formGroupRadioBoxIcon .formGroupRadioBoxIconBtn {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: black;
  display: none;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formGroupRadio .formGroupRadioBox label p {
  color: black;
  font-weight: 500;
  margin-top: 0;
}




#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formGroupCheckBox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 10px;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formGroupCheckBox .formGroupCheckBoxBox input {
  display: none;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formGroupCheckBox .formGroupCheckBoxBox input:checked ~ label .formGroupCheckBoxBoxIcon{
	background: black;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formGroupCheckBox .formGroupCheckBoxBox input:checked ~ label .formGroupCheckBoxBoxIcon .formGroupCheckBoxBoxIconBtn {
  display: block;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formGroupCheckBox .formGroupCheckBoxBox label {
  display: flex;
  align-items: center;
  gap: 10px;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formGroupCheckBox .formGroupCheckBoxBox label .formGroupCheckBoxBoxIcon {
  width: 25px;
  height: 25px;
  border: 2px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formGroupCheckBox .formGroupCheckBoxBox label .formGroupCheckBoxBoxIcon .formGroupCheckBoxBoxIconBtn {
	width: 15px;
    height: 9px;
    display: none;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(-55deg) translate(1px, -1px);
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formGroupCheckBox .formGroupCheckBoxBox label p {
  color: black;
  font-weight: 500;
  margin-top: 0;
}




#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formPhoneCodeArea {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formPhoneCodeArea .formPhoneCodeAreaBox {
  border: 1px solid rgba(204, 204, 204, 0.8);
  border-radius: 5px;
  margin-top: 5px;
  font-size: 14px;
  color: black;
  height: 45px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0px 10px;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formPhoneCodeArea .formPhoneCodeAreaBox span {
  font-size: 14px;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formPhoneCodeArea .formPhoneCodeAreaBox .formPhoneCodeAreaBoxFlag {
  width: 25px;
  height: 100%;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formPhoneCodeArea .formPhoneCodeAreaBox .formPhoneCodeAreaBoxFlag img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formSubTitle {
  font-size: 20px;
  font-weight: 600;
  margin-top: 10px;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formLanguageRadio {
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formLanguageRadio .formLanguageRadioBox {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 5px;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formLanguageRadio .formLanguageRadioBox input {
  display: none;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formLanguageRadio .formLanguageRadioBox input:checked ~ label .formLanguageRadioIcon .formLanguageRadioIconBox {
  display: block;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formLanguageRadio .formLanguageRadioBox label {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.062745098);
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formLanguageRadio .formLanguageRadioBox label p {
  color: black;
  margin-top: 0;
  font-size: 16px;
  font-weight: 500;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formLanguageRadio .formLanguageRadioBox label .formLanguageRadioIcon {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formLanguageRadio .formLanguageRadioBox label .formLanguageRadioIcon .formLanguageRadioIconBox {
  width: 15px;
  height: 15px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 50%;
  display: none;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formGroupFileUpload {
  width: 100%;
  display: flex;
  margin-top: 10px;
  flex-direction: column;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formGroupFileUpload .uploadBtn {
  width: 100%;
  background: #AACB73;
  color: white;
  padding: 10px 20px;
  height: 50px;
  border-radius: 10px;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 15px;
  cursor: pointer;
  transition: 0.3s;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formGroupFileUpload .uploadBtn:hover {
  transition: 0.3s;
  background: #8fb54e;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formGroupFileUpload .uploadBtn i {
  line-height: 0.5;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formGroupFileUpload #file-input {
  display: none;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formGroupFileUpload .filePreview {
  width: 100%;
  display: flex;
  display: flex;
  flex-direction: column;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formGroupFileUpload .filePreview .filePreviewBox {
  width: 100%;
  margin-top: 10px;
  background: #f3fff4;
  padding: 5px 10px;
  border-radius: 5px;
  display: none;
  align-items: center;
  justify-content: space-between;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formGroupFileUpload .filePreview .filePreviewBox .filePreviewName {
  width: calc(100% - 40px);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formGroupFileUpload .filePreview .filePreviewBox .closeFileBtn {
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  background: rgb(0 0 0 / 4%);
  color: black;
  font-size: 12px;
  transition: 0.3s;
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formGroupFileUpload .filePreview .filePreviewBox .closeFileBtn:hover {
  transition: 0.3s;
  transform: translateY(-5px);
}
#welcomeForm .welcomeFormMain .welcomeFormDetails form .formGroup .formGroupFileUpload .filePreview .filePreviewBox .closeFileBtn i {
  line-height: 0.5;
}


#welcomeForm .welcomeFormMain .welcomeFormBar {
  width: 100%;
  height: 7px;
  border-radius: 10px;
  margin-bottom: 10px;
  background: white;
  overflow: hidden;
}
#welcomeForm .welcomeFormMain .welcomeFormBar .welcomeFormBarLine {
  height: 100%;
  background: rgba(123, 62, 192, 0.5);
  border-radius: 10px;
}
#welcomeForm .welcomeFormMain .welcomeFormBar .barLineWidth-35 {
  width: 35%;
}
#welcomeForm .welcomeFormMain .welcomeFormBar .barLineWidth-65 {
  width: 65%;
}
#welcomeForm .welcomeFormMain .welcomeFormBar .barLineWidth-95{
  width: 95%;
}
#welcomeForm .welcomeFormMain .welcomeFormBar .barLineWidth-100 {
  width: 100%;
}

#notificationSection {
  width: 100%;
  margin-top: 80px;
}
@media (max-width: 768px) {
  #notificationSection {
    margin-top: 60px;
  }
}
#notificationSection .notificationSectionMain {
  width: 100%;
  display: flex;
  flex-direction: column;
}
#notificationSection .notificationSectionMain .notificationBackBtnArea {
  width: 100%;
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  #notificationSection .notificationSectionMain .notificationBackBtnArea {
    display: none;
  }
}
#notificationSection .notificationSectionMain .notificationBackBtnArea .notificationBackBtn {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 15px;
}
#notificationSection .notificationSectionMain .notificationBackBtnArea .notificationBackBtn .notificationBackBtnIcon {
  width: 15px;
}
#notificationSection .notificationSectionMain .notificationBackBtnArea .notificationBackBtn .notificationBackBtnIcon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#notificationSection .notificationSectionMain .notificationBackBtnArea .notificationBackBtn p {
  color: black;
  font-size: 22px;
}
#notificationSection .notificationSectionMain .notificationSectionTabList {
  width: 50%;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (max-width: 1200px) {
  #notificationSection .notificationSectionMain .notificationSectionTabList {
    width: 70%;
  }
}
@media (max-width: 768px) {
  #notificationSection .notificationSectionMain .notificationSectionTabList {
    width: 100%;
  }
}
#notificationSection .notificationSectionMain .notificationSectionTabList .notificationSectionTabListBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #ccc;
  padding-top: 20px;
}
#notificationSection .notificationSectionMain .notificationSectionTabList .notificationSectionTabListBox:nth-of-type(1) {
  border-top: none;
}
#notificationSection .notificationSectionMain .notificationSectionTabList .notificationSectionTabListBox h2 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
}
#notificationSection .notificationSectionMain .notificationSectionTabList .notificationSectionTabListBox p {
  font-size: 16px;
  margin-top: 4px;
  line-height: 1.5;
  color: #455A64;
}

#profileSection {
  width: 100%;
  margin-top: 80px;
  min-height: calc(100vh - 180px);
}
@media (max-width: 768px) {
  #profileSection {
    margin-top: 60px;
  }
}
#profileSection .profileSectionMain {
  width: 100%;
  display: flex;
  flex-direction: column;
}
#profileSection .profileSectionMain .profileBackBtnArea {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 50px;
}
@media (max-width: 768px) {
  #profileSection .profileSectionMain .profileBackBtnArea {
    display: none;
  }
}
#profileSection .profileSectionMain .profileBackBtnArea .profileBackBtn {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 15px;
}
#profileSection .profileSectionMain .profileBackBtnArea .profileBackBtn .profileBackBtnIcon {
  width: 15px;
}
#profileSection .profileSectionMain .profileBackBtnArea .profileBackBtn .profileBackBtnIcon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#profileSection .profileSectionMain .profileBackBtnArea .profileBackBtn p {
  color: black;
  font-size: 22px;
}
#profileSection .profileSectionMain .profileSectionDetails {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  #profileSection .profileSectionMain .profileSectionDetails {
    justify-content: center;
    align-items: center;
  }
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionThumbnail {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionThumbnail .editProfileIcon {
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--primaryColor);
  color: white;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 10%;
  top: 5%;
  cursor: pointer;
  transition: 0.3s;
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionThumbnail .editProfileIcon i {
  line-height: 0.5;
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionThumbnail .editProfileIcon:hover {
  transition: 0.3s;
  background: #ae68ff;
  box-shadow: none;
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionThumbnail .editProfileIcon input {
  display: none;
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionThumbnail .profileSectionThumbnailImg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionThumbnail .profileSectionThumbnailImg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm {
  width: calc(100% - 250px);
  display: flex;
  flex-direction: column;
}
@media (max-width: 1024px) {
  #profileSection .profileSectionMain .profileSectionDetails .profileSectionForm {
    width: calc(100% - 200px);
  }
}
@media (max-width: 480px) {
  #profileSection .profileSectionMain .profileSectionDetails .profileSectionForm {
    width: 100%;
    margin-top: 50px;
    padding-bottom: 40px;
  }
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 50px;
       column-gap: 50px;
  row-gap: 30px;
}
@media (max-width: 1024px) {
  #profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form {
    -moz-column-gap: 20px;
         column-gap: 20px;
  }
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .formGroup .formGroupBox {
  width: 100%;
  position: relative;
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .formGroup .formGroupBox input {
  width: 100%;
  height: 50px;
  border: 1px solid #343434;
  border-radius: 5px;
  outline: none;
  padding: 0px 15px;
  font-size: 20px;
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .formGroup .formGroupBox input:focus {
  border-color: var(--primaryColor);
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .formGroup .formGroupBox input:focus ~ label {
  color: var(--primaryColor);
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .formGroup .formGroupBox textarea {
  width: 100%;
  height: 100px;
  border: 1px solid #343434;
  border-radius: 5px;
  outline: none;
  padding: 12px 15px;
  font-size: 20px;
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .formGroup .formGroupBox textarea:focus {
  border-color: var(--primaryColor);
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .formGroup .formGroupBox textarea:focus ~ label {
  color: var(--primaryColor);
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .formGroup .formGroupBox label {
  position: absolute;
  background: white;
  width: -moz-fit-content;
  width: fit-content;
  padding: 2px 5px;
  top: -10px;
  left: 12px;
  color: #8F8F8F;
  font-size: 16px;
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .formGroup .customDropDown {
  width: 100%;
  position: relative;
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .formGroup .customDropDown .customDropDownHead {
  width: 100%;
  position: relative;
  height: 50px;
  border: 1px solid #343434;
  border-radius: 5px;
  outline: none;
  padding: 0px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .formGroup .customDropDown .customDropDownHead label {
  position: absolute;
  background: white;
  width: -moz-fit-content;
  width: fit-content;
  padding: 2px 5px;
  top: -10px;
  left: 12px;
  color: #8F8F8F;
  font-size: 16px;
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .formGroup .customDropDown .customDropDownHead .customDropDownHeadInput {
  width: 100%;
  border: none;
  outline: none;
  font-size: 20px;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .formGroup .customDropDown .customDropDownHead .customDropDownHeadInput:disabled {
  cursor: pointer;
  background: white;
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .formGroup .customDropDown .customDropDownHead .customDropDownHeadIcon {
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .formGroup .customDropDown .customDropDownHead .customDropDownHeadIcon i {
  line-height: 0.5;
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .formGroup .customDropDown .customDropDownPopup {
  position: absolute;
  top: calc(100% - 3px);
  width: 100%;
  background: white;
  z-index: 10;
  border: 1px solid #343434;
  display: none;
  max-height: 200px;
  overflow-y: auto;
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .formGroup .customDropDown .customDropDownPopup ul {
  width: 100%;
  display: flex;
  flex-direction: column;
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .formGroup .customDropDown .customDropDownPopup ul li {
  list-style: none;
  padding: 8px 15px;
  cursor: pointer;
  transition: 0.3s;
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .formGroup .customDropDown .customDropDownPopup ul li:hover {
  transition: 0.3s;
  background: #f3f3f3;
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .formGroup .customDropDown .customDropDownPopup ul li p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .formGroup .customDropDown .customDropDownPopup ul .selected {
  background: #f3f3f3;
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .formGroup .customDropDown .customDropDownPopupUp {
  top: calc(100% - 3px);
  bottom: inherit;
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .formGroup .customDropDown .customDropDownPopupDown {
  bottom: calc(100% - 3px);
  top: inherit;
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .col-1 {
  width: 100%;
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .col-2 {
  width: calc(50% - 25px);
}
@media (max-width: 1024px) {
  #profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .col-2 {
    width: calc(50% - 10px);
  }
}
@media (max-width: 768px) {
  #profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .col-2 {
    width: 100%;
  }
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .col-3 {
  width: calc(33.3333333333% - 33.5px);
}
@media (max-width: 1024px) {
  #profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .col-3 {
    width: calc(33.3333333333% - 14px);
  }
}
@media (max-width: 768px) {
  #profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .col-3 {
    width: calc(50% - 10px);
  }
}
@media (max-width: 480px) {
  #profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .col-3 {
    width: 100%;
  }
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .formBtnArea {
  width: 100%;
  display: flex;
  align-items: center;
}
@media (max-width: 480px) {
  #profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .formBtnArea {
    bottom: 0;
    left: 0;
    position: fixed;
    z-index: 10;
  }
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .formBtnArea button {
  background: var(--primaryColor);
  color: white;
  border: none;
  outline: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 18px;
  cursor: pointer;
  transition: 0.3s;
}
#profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .formBtnArea button:hover {
  transition: 0.3s;
  opacity: 0.7;
}
@media (max-width: 480px) {
  #profileSection .profileSectionMain .profileSectionDetails .profileSectionForm form .formBtnArea button {
    width: 100%;
    border-radius: 0;
    padding: 14px 20px;
  }
}/*# sourceMappingURL=main.css.map */


#loginArea {
  width: 100%;
}
#loginArea .loginAreaMain {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#loginArea .loginAreaMain form {
  width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 200px;
}
@media (max-width: 480px) {
  #loginArea .loginAreaMain form {
    width: 100%;
    margin-top: 100px;
	justify-content:center;
  }
}
#loginArea .loginAreaMain form .loginLogo {
  width: 80px;
}
#loginArea .loginAreaMain form .loginLogo img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#loginArea .loginAreaMain form h2 {
  font-size: 28px;
  color: var(--primaryColor);
  font-weight: 600;
  text-align: center;
  margin-top: 50px;
}
@media (max-width: 480px) {
  #loginArea .loginAreaMain form h2 {
    margin-top: 30px;
  }
}
#loginArea .loginAreaMain form .loginAreaForm {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 15px;
  margin-top: 20px;
}
#loginArea .loginAreaMain form .loginAreaForm .formGroup {
  display: flex;
  flex-direction: column;
  width: 100%;
}
#loginArea .loginAreaMain form .loginAreaForm .formGroup input {
  width: 100%;
  height: 50px;
  border: 1px solid #525658;
  border-radius: 5px;
  padding: 0px 15px;
  font-size: 16px;
  outline: none;
}
#loginArea .loginAreaMain form .loginAreaForm .formGroup input:focus {
  border-color: black;
}
#loginArea .loginAreaMain form .loginAreaForm .formGroup input::-moz-placeholder {
  color: #AE9999;
}
#loginArea .loginAreaMain form .loginAreaForm .formGroup input::placeholder {
  color: #AE9999;
}
#loginArea .loginAreaMain form .loginAreaForm .formGroup label.error {
  font-size: 14px;
  margin-top: 4px;
  color: #343434;
}
#loginArea .loginAreaMain form .loginAreaForm .inputCaption {
  text-align: center;
  width: 100%;
  color: #000000;
  font-size: 14px;
  line-height: 1.5;
}
#loginArea .loginAreaMain form .loginAreaForm .formBtnArea {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
@media (max-width: 480px) {
  #loginArea .loginAreaMain form .loginAreaForm .formBtnArea {
    position: fixed;
    bottom: 50px;
  }
}
#loginArea .loginAreaMain form .loginAreaForm .formBtnArea button {
  padding: 12px 40px;
  background: #B0B0B0;
  color: white;
  border: none;
  outline: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 18px;
  cursor: not-allowed;
}
#loginArea .loginAreaMain form .loginAreaForm .formBtnArea .formBtnAreaBtnActive {
  background: var(--primaryColor);
  cursor: pointer;
}
#loginArea .loginAreaMain form .loginAreaForm .formOTPGroup {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
#loginArea .loginAreaMain form .loginAreaForm .formOTPGroup input {
  width: 30px;
  height: 30px;
  border: 1px solid #C0C0C0;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0;
  outline: none;
}
#loginArea .loginAreaMain form .loginAreaForm .formOTPGroup input:focus {
  border-color: black;
}
#loginArea .loginAreaMain form .loginAreaForm .mailEdit {
  text-decoration: none;
  text-align: center;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #809BFB;
}
#loginArea .loginAreaMain form .loginAreaForm .otpTimer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
#loginArea .loginAreaMain form .loginAreaForm .otpTimer p {
  font-size: 14px;
}
#loginArea .loginAreaMain form .loginAreaForm .otpTimer .resendOtpBtn {
  background: #809BFB;
  color: white;
  font-size: 12px;
  padding: 7px 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.2s;
  display: none;
}
#loginArea .loginAreaMain form .loginAreaForm .otpTimer .resendOtpBtn:hover {
  transition: 0.2s;
  opacity: 0.7;
}
.pageLoader {
  position: fixed;
  z-index: 300;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pageLoader .pageLoaderThumbnail {
  width: 100px;
}
.pageLoader .pageLoaderThumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}