/* files picker template start */

/* fixed file picker start */

section.filesPickerSection {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #fbf6f6;
  z-index: 99;
  width: 100%;
  min-height: 100vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.filesPickerContainer {
  width: 90vw;
  margin: 1rem auto;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  flex-shrink: 0;
}
.files {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  max-height: 70vh;
  overflow: auto;
  gap: 1rem;
}
.pdfBox {
  flex: 1 1 50%;
  height: 90vh;
  word-wrap: break-word;
  padding: 1rem;
  background-color: #0000ff0d;
  position: relative;
}
embed {
  width: 100%;
  height: 100%;
  word-wrap: break-word;
  aspect-ratio: 1;
}
.videoBox {
  max-width: 10rem;
  position: relative;
}
video {
  width: 100%;
  aspect-ratio: 16/9;
}
.video {
  padding: 0.8rem;
  background-color: #55556929;
}
.imageFile {
  max-width: 10rem;
  aspect-ratio: 16/9;
  background-position: center;
  background-size: auto 100%;
  width: 10rem;
  background-repeat: no-repeat;
  background-color: #5b5a7338;
}
object {
  width: 100%;
}
.pdfObject {
  padding: 0.8rem;
  background-color: #87879942;
}
.filesPickerContainer .btnArea {
  margin: 1rem auto 5rem auto;
  width: 50%;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.filesPickerContainer .btnArea div {
  flex: 1 1 40%;
}
.closeBtn {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  font-size: 3rem;
  z-index: 99;
  color: red;
  cursor: pointer;
}
.filesSelectBtn {
  position: absolute;
  top: 0;
  right: 0;
  font-size: clamp(1.5rem, 20vw, 1.8rem);
  background-color: white;
  border-radius: 50%;
  height: 2.3rem;
  width: 2.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s linear, color 0.3s linear;
}
.imageBox {
  position: relative;
}
.selected {
  background-color: #118911;
  color: white;
}
/*fixed file picker end */

/* files picker template end */

/* notice bulleting css start */

/* bulletin css start */

.bulletinContainer {
  width: 90vw;
  margin: 1rem auto;
  display: flex;
  border: 2px solid #ff00004a;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
}
.bulletingHeadlineContainer {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.bulletinHeadline {
  padding: clamp(0.2rem, 1vw, 0.5rem);
  background-color: var(--color-deep-blue);
  font-size: clamp(0.8rem, 4vw, 1.2rem);
  color: white;
  font-weight: 600;
  width: clamp(5rem, 23vw, 8rem);
  white-space: nowrap;
  text-align: center;
}
.bulletinNoticeContainer {
  display: flex;
  flex-shrink: 0;
  gap: 0.7rem;
  align-items: center;
}
.notice {
  flex-shrink: 0;
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 600;
  border-right: 13px solid red;
  padding: 0 1rem 0 0;
}

@keyframes bulletinSlide {
  from {
    transform: translateX(10%);
  }
  to {
    transform: translateX(-100%);
  }
}
/* bulletin css end */

/* notice bulleting css end */

/* noticeBoard css start */

.noticeBoardContainer {
  width: 90vw;
  margin: 1rem auto;
  position: relative;
  color: #bdc59e;
  font-weight: 600;
  font-size: clamp(1rem, 20vw, 1.2rem);
  padding: 1rem;
}
.sectionHeader {
  display: flex;
  gap: 1rem;
  justify-content: center;
  padding: 1rem;
  font-size: clamp(1.5rem, 20vw, 1.8rem);
}
.backTopDesign {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #040443;
  z-index: -1;
}
.backBottomDesign {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #2c1761;
  z-index: -1;
  clip-path: polygon(
    100% 100%,
    0% 100%,
    0% 32.94%,
    1% 32.68%,
    2% 32.5%,
    3% 32.38%,
    4% 32.33%,
    5% 32.36%,
    6% 32.45%,
    7% 32.61%,
    8% 32.84%,
    9% 33.14%,
    10% 33.51%,
    11% 33.94%,
    12% 34.43%,
    13% 34.99%,
    14% 35.6%,
    15% 36.27%,
    16% 37%,
    17% 37.77%,
    18% 38.6%,
    19% 39.47%,
    20% 40.38%,
    21% 41.33%,
    22% 42.31%,
    23% 43.32%,
    24% 44.37%,
    25% 45.43%,
    26% 46.51%,
    27% 47.6%,
    28% 48.71%,
    29% 49.81%,
    30% 50.92%,
    31% 52.03%,
    32% 53.13%,
    33% 54.21%,
    34% 55.28%,
    35% 56.33%,
    36% 57.35%,
    37% 58.35%,
    38% 59.31%,
    39% 60.23%,
    40% 61.12%,
    41% 61.96%,
    42% 62.75%,
    43% 63.49%,
    44% 64.18%,
    45% 64.82%,
    46% 65.39%,
    47% 65.91%,
    48% 66.36%,
    49% 66.74%,
    50% 67.06%,
    51% 67.32%,
    52% 67.5%,
    53% 67.62%,
    54% 67.67%,
    55% 67.64%,
    56% 67.55%,
    57% 67.39%,
    58% 67.16%,
    59% 66.86%,
    60% 66.49%,
    61% 66.06%,
    62% 65.57%,
    63% 65.01%,
    64% 64.4%,
    65% 63.73%,
    66% 63%,
    67% 62.23%,
    68% 61.4%,
    69% 60.53%,
    70% 59.62%,
    71% 58.67%,
    72% 57.69%,
    73% 56.68%,
    74% 55.63%,
    75% 54.57%,
    76% 53.49%,
    77% 52.4%,
    78% 51.29%,
    79% 50.19%,
    80% 49.08%,
    81% 47.97%,
    82% 46.87%,
    83% 45.79%,
    84% 44.72%,
    85% 43.67%,
    86% 42.65%,
    87% 41.65%,
    88% 40.69%,
    89% 39.77%,
    90% 38.88%,
    91% 38.04%,
    92% 37.25%,
    93% 36.51%,
    94% 35.82%,
    95% 35.18%,
    96% 34.61%,
    97% 34.09%,
    98% 33.64%,
    99% 33.26%,
    100% 32.94%
  );
}
.noticeContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 0.5rem;
}
.noticeContent {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: auto;
  padding: 0.3rem;
  background-image: linear-gradient(170deg, #00000085, transparent);
  flex: 1 1 30%;
  max-width: 100%;
}
.subHeadline {
  text-align: center;
  font-size: clamp(1rem, 20vw, 1.6rem);
}
.singleNotice {
  display: flex;
  gap: 0.5rem;
  background-color: #ffffff0d;
  padding: 0.5rem;
  align-items: center;
}
.date {
  width: 4rem;
  background-color: white;
  color: black;
  word-break: break-word;
  padding: 0.5rem;
  text-align: center;
  font-size: clamp(1rem, 4vw, 1.2rem);
}
.noticeText {
  background-color: #f5f3f391;
  width: clamp(8rem, 55vw, 13rem);
  padding: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: black;
  text-align: center;
  flex-grow: 1;
}
.singleNoticeContainerSlider {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transform: translateY(100%);
  animation: slideUp 10s cubic-bezier(0, 1.13, 1, -0.14) infinite forwards;
  position: relative;
  z-index: 1;
}
.singleNoticeContainerSlider:hover {
  animation-play-state: paused;
}
.singleNoticeContainer {
  position: relative;
  z-index: 2;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  justify-content: space-between;
}
.singleNoticeActionButton {
  position: relative;
  z-index: 2;
}
.noticeLink.btn {
  font-size: clamp(0.8rem, 2vw, 1rem);
  text-align: center;
}
@keyframes slideUp {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(-100%);
  }
}
/* noticeBoard css end */

/* imageCaptionDescription css start */

.noticeEventDataContainer {
  background-color: white !important;
}
.tabImageArea {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.tabCard {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: justify;
}
.tabCard > div {
  background-color: #01011c17;
}
.tabImageBottomLink a {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin: 1rem;
  font-size: clamp(1.5rem, 5vw, 1.8rem);
  color: #ff0000;
  font-weight: 600;
}
.tabCardImageUpperDescriptionBold {
  font-weight: 600;
}
.tabCardImageArea {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.tabImageBox {
  flex: 1 1 40%;
  aspect-ratio: 16/9;
}
.tabImageFile {
  background-position: center;
  background-size: auto 100%;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  position: relative;
}
.tabImageCaption {
  position: absolute;
  bottom: 0;
  background-color: #eeeef100;
  width: 100%;
  max-height: 30%;
  overflow: auto;
  padding: 0.2rem;
  font-weight: 600;
  backdrop-filter: blur(5px);
}
.tabVideoBox {
  flex: 1 1 40%;
}
.tabPDFBox {
  flex: 1 1 50%;
  aspect-ratio: 1;
}
.tabPDFFile {
  height: 100%;
}
.tabVideoBox video {
  width: 100% !important;
  position: relative;
}

/* imageCaptionDescription css end */

/* footer css start */

section.footerSection {
  width: 90vw;
  margin: auto auto 1rem auto;
}
.footerContainer {
  background-color: var(--color-deep-blue);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
  font-size: clamp(0.8rem, 2vw, 1.5rem);
  color: #f5d042;
}
.leftFooter {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
}
.rightFooter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.icon,
.textFooter {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
}

/* footer css end */

/* section header css start */

.sectionHeader {
  display: flex;
  gap: 1rem;
  justify-content: center;
  padding: 1.2rem;
  font-size: clamp(1.5rem, 20vw, 1.8rem);
  align-items: center;
  text-align: center;
}
/* sticky start */
.sticky {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 10;
}
/* sticky end */

/* section header css end */

/* css for only file selection div start */

.group {
  display: flex;
  gap: 0.5rem;
  min-width: 5rem;
  justify-content: space-between;
  align-items: center;
  background-color: #04044342;
}
.data {
  width: clamp(5rem, 40vw, 15rem);
}

.filesContainer {
  width: 100%;
  background-color: #8888e5;
  aspect-ratio: 3/4;
  max-height: 35vh;
  overflow: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.filesContainer .files {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 1rem;
}
.parentBox {
  position: relative;
}
.btn.delete.selectionDelete {
  position: absolute;
  top: 0;
  right: 0;
}
.filesContainer .files .imageBox {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.filesContainer .files .selectedImageFileCaption {
  width: 100%;
  max-width: 10rem;
}
.filesContainer .files .imageBox .imageFile {
  max-width: 10rem;
  aspect-ratio: 16/9;
  background-position: center;
  background-size: auto 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-color: #5b5a7338;
}
.filesContainer .filesUploadBtn {
  position: sticky;
  bottom: 0.2rem;
  right: 0;
  display: flex;
  justify-content: flex-end;
  margin: 0.2rem;
  font-size: clamp(1.1rem, 20vw, 1.5rem);
  color: var(--color-deep-blue);
  cursor: pointer;
}

/* css for only file selection div end */

/* image slider css part start */

.sliderTvPart {
  transform: scale(0.6);
}
.imageSliderContainer {
  width: 90vw;
  margin: 7rem auto 1rem auto;
  position: relative;
  aspect-ratio: 16/9;
  z-index: 9;
}
.sliderTv {
  height: 13rem;
  width: 13rem;
  overflow: hidden;
  position: absolute;
  top: -13.2rem;
  left: 50%;
  transform: translateX(-50%);
}
.roundScreen {
  height: 100%;
  width: 100%;
  background-color: var(--color-deep-blue);
  border-radius: 50%/45%;
  position: absolute;
  top: 5rem;
  border: 5px solid #c20202;
  display: flex;
  justify-content: center;
}
.screenText {
  font-family: var(--curlyHeader2-font);
  padding: 3.5rem 1rem 0rem 1rem;
  font-size: 2rem;
  color: white;
  font-weight: 600;
}
.antenna1,
.antenna2 {
  height: 7rem;
  width: 0.5rem;
  background-color: #ff0000;
  position: absolute;
  z-index: -1;
  border-radius: 1rem;
}
.antenna1 {
  bottom: 4rem;
  left: 2rem;
  transform: rotate(-36deg);
}
.antenna2 {
  bottom: 4rem;
  right: 2rem;
  transform: rotate(36deg);
}
.imageSliderPart {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: 100%;
  box-shadow: 1px 1px 10px 1px black inset;
}
.images {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.sliderControls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.rightArrow,
.leftArrow {
  margin: 0.5rem;
}
.slideImg {
  height: 100%;
  width: 100%;
  background-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  flex-shrink: 0;
  transform: translateX(0px);
  transition: transform 0.3s linear, opacity 0.3s linear;
  position: relative;
}
.sliderImageCaption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #0101257d;
  color: #f5d042;
  padding: 0.2rem;
  max-height: 30%;
  overflow: auto;
  font-weight: 600;
  text-align: justify;
}

/* image slider css part end */

/* section data handler start */

/* sectionsContainer css part start */

.sectionsControlBtnArea {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1rem auto;
}
.sectionBtnGroup {
  display: flex;
  gap: 1rem;
}
.sectionBtnGroup > div {
  flex: 1 1 30%;
}
.sectionGroupsContainer {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 1rem auto;
}
.sectionGroup {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* section container preview css part start */

.sectionsPreviewContainer {
  display: none;
  flex-direction: column;
  gap: 1rem;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  background-color: white;
  overflow: auto;
  width: 100%;
  z-index: 999;
}
.previewContent {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 90vw;
  margin: 1rem auto;
}
.previewSectionGroup {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: justify;
}
.topDescriptionBold {
  font-weight: 600;
}
.sectionFilesContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.sectionFilesContainer > div {
  flex: 1 1 40%;
}
.sectionImageBox .ImageFile {
  width: 100%;
  background-position: center;
  background-size: auto 100%;
  aspect-ratio: 16/9;
  background-repeat: no-repeat;
  position: relative;
}
.sectionImageBox .ImageFile .imageFileCaption {
  position: absolute;
  bottom: 0;
  left: 0;
  max-height: 30%;
  overflow: auto;
  padding: 0.2rem;
  backdrop-filter: blur(3px);
  font-weight: 600;
  width: 100%;
}
.sectionPDFBox {
  flex: 1 1 60% !important;
}
.sectionPreviewActionButton {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  margin: 1rem;
}
.previewSectionGroup > div {
  background-color: #0404370f;
}
/* section container preview css part end */

/* sectionsContainer css part end */

/* section data handler end */

/* searchModule css part start */

.searchModuleDivContainer {
  width: 100%;
  margin: 1rem auto;
}
input.searchModuleInput {
  font-size: clamp(1.2rem, 20vw, 1.5rem);
  padding: 0.2rem;
}
span.highlight {
  background-color: #04f904;
}

/* searchModule css part end */

/* award style start */
.awardFrameImage {
  flex: 1 1 50%;
  min-width: 10rem;
  position: relative;
  max-width: 25rem;
}
.awardFrame1 {
  position: relative;
  padding: 0.5rem;
  z-index: 1;
}
.awardPhoto {
  position: relative;
  background-position: left top;
  background-size: 100% 100%;
  aspect-ratio: 16/9;
  width: 100%;
  border: 10px solid var(--color-deep-blue);
}
.awardLargeTopBorder {
  height: 5rem;
  width: 5rem;
  background-color: #f5d042;
  clip-path: url(#awardBottomLargeSVGClip);
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(180deg);
}
.awardLargeBottomBorder {
  height: 5rem;
  width: 5rem;
  background-color: #f5d042;
  clip-path: url(#awardBottomLargeSVGClip);
  position: absolute;
  bottom: 0;
  right: 0;
}
.awardImageCaption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 20%;
  backdrop-filter: blur(5px);
  overflow: auto;
  padding: 0.2rem;
  background-color: #ffffff1f;
}

/* award style end */

/* parallax css start */

.paraBackImage {
  height: 100vh;
  width: 100%;
  margin: 1rem auto;
  background-position: center;
  background-size: auto 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* parallax css end */

/* navigation css start */
.navigationContainer {
  width: 90vw;
  margin: 1rem auto;
  user-select: none;
}
.upperPart {
  background-color: #040443;
}
.upperPartContainer {
  display: flex;
  gap: clamp(0.2rem, 1vw, 0.5rem);
  justify-content: space-between;
  padding: clamp(0.2rem, 1vw, 1rem);
  align-items: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.upperPartContainer::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: #2c1761;
  width: 100%;
  height: 100%;
  content: "";
  z-index: -1;
  clip-path: polygon(0% 0%, 70% 0%, 80% 100%, 0% 100%);
  transform: translateX(-100%);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.26, 1.75, 0.6, 1.14) 0.5s,
    opacity 1.6s linear;
}
.upperPartContainer.active:before {
  transform: translateX(0px);
  opacity: 1;
}
.upperPartContainer > div {
  flex: 1 1 10%;
}
.logo {
  aspect-ratio: 16/9;
  width: 100%;
  background-image: url("/images/casckLogo.png");
  background-position: center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  min-width: 3rem;
  background-color: #ffffff;
}
.navGroup {
  display: flex;
  font-size: clamp(0.5rem, 3vw, 1.2rem);
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s linear;
  gap: 0.4rem;
  align-items: center;
  justify-content: center;
}

.navGroup:hover {
  color: red;
}
.moreBtn {
  font-size: clamp(0.6rem, 4vw, 1.2rem);
  font-weight: 600;
  padding: 0.2rem;
  color: white;
  cursor: pointer;
  max-width: clamp(1.3rem, 3vw, 1.4rem);
  transition: color 0.2s linear;
}
.moreBtn:hover {
  color: #f5d042;
}
.lowerPart {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: space-evenly;
  background: #040443;
  padding: 0rem;
  position: relative;
  z-index: 1;
  height: 0vh;
  min-height: 0vh;
  overflow: hidden;
  transition: padding 0.5s linear, min-height 0.5s linear, height 0.5s linear;
}
.lowerPart::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  content: "";
  background-color: #2c1761;
  height: 100vh;
  width: 100%;
  clip-path: polygon(0% 0%, 70% 0%, 90% 100%, 0% 100%);
  z-index: -1;
  transform: translateX(-100%);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.26, 1.75, 0.6, 1.14) 0.5s,
    opacity 1.6s linear;
}
.lowerPart.active::before {
  transform: translateX(0%);
  opacity: 1;
}
.bigNavGroup {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  justify-content: space-evenly;
  color: #040443;
  opacity: 0;
  transition: opacity 0.2s linear;
}

.lowerPart > div {
  width: clamp(35rem, 25vw, 40rem);
  padding: 0.5rem;
  background: #ffffffc7;
  border-radius: 1rem;
}
.headLink {
  text-align: center;
  font-size: clamp(1rem, 20vw, 1.3rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  gap: 0.2rem;
  align-items: center;
}
.headLinkIcon {
  display: flex;
}
.subLinkContainer {
  display: flex;
  gap: 0.5rem;
  font-size: clamp(0.8rem, 10vw, 1.2rem);

  font-weight: 600;
  cursor: pointer;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.subLink {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.subLinkText {
  transition: color 0.3s linear;
  color: #2c1761;
  text-decoration: underline;
}
.subLinkText:hover {
  color: red;
}
.bigNavOpts {
  font-weight: 600;
  font-size: clamp(1rem, 20vw, 1.2rem);
  text-align: center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #040443;
  opacity: 0;
  transition: opacity 0.2s linear;
}
.navText {
  font-size: clamp(0.5rem, 3vw, 2rem);
}

/* navigation css end */

/* loader css start */

section.loaderSection {
  min-width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  position: fixed;
  z-index: var(--maxZIndex);
  transition: opacity 1s linear;
  display: flex;
  flex-direction: column;
  background-color: white;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.loaderContainer {
  width: 90vw;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  transform-style: preserve-3d;
  perspective: 1000px;
  position: relative;
}
.spinner {
  position: relative;
  height: 12rem;
  width: 12rem;
  transform: rotateY(0deg) translateY(1rem);
  opacity: 0;
  transform-style: preserve-3d;
  perspective: 1000px;
  z-index: 3;
  transition: opacity 1s linear, transform 1s linear;
}
.spinner.active {
  transform: rotateY(0deg) translateY(0rem);
  opacity: 1;
}
.frontImage.spinnerImage {
  transform: rotateY(0deg);
  z-index: 2;
  background-color: white;
  backface-visibility: hidden;
}
.backImage.spinnerImage {
  transform: rotateY(-180deg);
  backface-visibility: hidden;
  z-index: 1;
}
.spinnerImage {
  background-position: left top;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  box-shadow: 2px -2px 5px 1px black inset, -2px 2px 5px 1px black inset;
}
.topLeftCurve {
  height: 50rem;
  width: 50rem;
  background: #e90725;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: rotate(45deg) translate(-50rem, 0rem);
}
.bottomRightCurve {
  height: 50rem;
  width: 50rem;
  background: var(--color-deep-blue);
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  transform: rotate(45deg) translate(50rem, 0rem);
}

@keyframes bottomRight {
  from {
    transform: rotate(45deg) translate(50rem, -50rem);
  }
  to {
    transform: rotate(45deg) translate(50rem, 0rem);
  }
}

@keyframes topLeft {
  from {
    transform: rotate(45deg) translate(-50rem, 50rem);
  }
  to {
    transform: rotate(45deg) translate(-50rem, 0rem);
  }
}

@keyframes spinning {
  from {
    transform: rotateY(0deg) translateY(0);
  }
  to {
    transform: rotateY(360deg) translateY(0);
  }
}
/* loader css end */

/* notification css start */

section.notificationSection {
  height: 100vh;
  width: 100vw;
  background-color: rgba(255, 255, 255, 0.4);
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.notificationContainer {
  height: 90vh;
  width: 90vw;
  background-color: #1005db63;
  margin: 1rem auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.successNotification {
  background-color: #08c108;
}
.successNotification,
.errorNotification {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 3rem;
  border-radius: 0.5rem;
}
.notificationIcon {
  font-size: clamp(1.5rem, 20vw, 2rem);
}
.notificationMessage {
  font-size: clamp(1.5rem, 20vw, 2rem);
  font-weight: 600;
  color: blue;
}
.notificationBtn.btn {
  flex-basis: 90%;
  text-align: center;
  margin-top: 1rem;
}

.errorNotification {
  background-color: red;
  padding: 3rem 4rem;
}
.notificationClose {
  font-size: clamp(1.5rem, 20vw, 2rem);
  background: blue;
  border-radius: 50%;
  height: 3rem;
  width: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.5s linear, color 0.5s linear;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}
.notificationClose:hover {
  background-color: red;
  color: white;
}
.notificationCustomMsg {
  flex-basis: 100%;
  display: flex;
  justify-content: center;
  font-weight: 600;
}
/* notification css end */

/* for backURL START */

.backURLContainer {
  width: 90vw;
  margin: 1rem auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* for backURL END */

/* no data found css start */

.noDataFound {
  display: flex;
  justify-content: center;
  background-color: #02023533;
  padding: 1rem 0.5rem;
  width: 100%;
}

/* no data found css end */