@charset "UTF-8";
/*
!
 * Bootstrap Icons v1.11.3 (https://icons.getbootstrap.com/)
 * Copyright 2019-2024 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/icons/blob/main/LICENSE)
 */
/*!
 * Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2023 Fonticons, Inc.
 */
:host,
:root {
  --fa-style-family-classic: "Font Awesome 6 Free";
  --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free" ;
}

/* @font-face {
     font-display: block;
     font-family: bootstrap-icons;
     src: url(fonts/bs.woff2?brightdd67030699838ea613ee6dbda90effa6) format("woff2"), url(fonts/bs.woff?brightdd67030699838ea613ee6dbda90effa6) format("woff"), url(fonts/bs.ttf?brightdd67030699838ea613ee6dbda90effa6) format("truetype")
 } */
@font-face {
  font-display: block;
  font-family: bootstrap-icons;
  src: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6") format("woff2"), url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff?dd67030699838ea613ee6dbda90effa6") format("woff");
}
/* @font-face {
     font-family: 'Font Awesome 6 Free';
     font-style: normal;
     font-weight: 900;
     font-display: block;
     src: url(fonts/fa.woff2?brightdd67030699838ea613ee6dbda90effa6) format("woff2"), url(fonts/fa.ttf?brightdd67030699838ea613ee6dbda90effa6) format("truetype"), url(fonts/fa.woff?brightdd67030699838ea613ee6dbda90effa6) format("woff")
 } */
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url(fonts/fa.woff2?brightdd67030699838ea613ee6dbda90effa6) format("woff2"), url(fonts/fa.ttf?brightdd67030699838ea613ee6dbda90effa6) format("truetype"), url(fonts/fa.woff?brightdd67030699838ea613ee6dbda90effa6) format("woff");
}
.fa-solid {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display, inline-block);
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.bi::before,
[class*=" bi-"]::before,
[class^=bi-]::before {
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: 400 !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -0.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#moon_light > i::before {
  content: "\f1d1";
}

#moon_light > i[moon_light]::before {
  content: "\f495";
}

.bi-chat-text-fill::before {
  content: "\f266";
}

.bi-chat-fill::before {
  content: "\f24b";
}

.bi-patch-check-fill::before {
  content: "\f4b5";
}

.bi-arrow-up-circle-fill::before {
  content: "\f139";
}

.bi-youtube::before {
  content: "\f62b";
}

.bi-whatsapp::before {
  content: "\f618";
}

.bi-twitter-x::before {
  content: "\f8db";
}

.bi-threads::before {
  content: "\f8d9";
}

.bi-facebook::before {
  content: "\f344";
}

.bi-book::before {
  content: "\f194";
}

.bi-building::before {
  content: "\f1dd";
}

.bi-camera::before {
  content: "\f220";
}

.bi-envelope-at-fill::before {
  content: "\f84b";
}

.bi-geo-alt-fill::before {
  content: "\f3e7";
}

.bi-geo-alt::before {
  content: "\f3e8";
}

.bi-pencil-square::before {
  content: "\f4ca";
}

.bi-person-lines-fill::before {
  content: "\f4db";
}

.bi-person-standing-dress::before {
  content: "\f8f8";
}

.bi-telephone-fill::before {
  content: "\f5b4";
}

.fa-school::before {
  content: "\f549";
}

.fa-briefcase-medical::before {
  content: "\f469";
}

.fa-hands-holding-child::before {
  content: "\e4fa";
}

.fa-building-shield::before {
  content: "\e4d8";
}

/*!
  * Bright IQ Academy Custom Style
  * Copyright 2024
  */
.main-404 {
  margin-left: 1rem;
  margin-right: 1rem;
  text-align: center;
}

.sub-text-404 {
  font-size: 4vw;
}

.div404 {
  font-size: 35vw;
  font-weight: 700;
  background-image: url(https://img.freepik.com/premium-photo/beautiful-sunrise-river_605423-10692.jpg);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 992px) {
  .div404 {
    font-size: 347.2px;
  }
  .sub-text-404 {
    font-size: 39.68px;
  }
  .btn-404 {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 1.25rem;
    --bs-btn-border-radius: var(--bs-border-radius-lg) ;
  }
}
@media (max-width: 270px) {
  .div404 {
    font-size: 94.5px;
    min-width: 270px;
  }
  .sub-text-404 {
    font-size: 10.8px;
  }
}
@media (max-width: 500px) {
  .btn-404 {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-border-radius: var(--bs-border-radius-sm) ;
  }
}
.about h4::before {
  content: "🏫";
  margin-right: 0.5rem;
}

.about p {
  margin: 1rem;
  margin-left: 0;
  margin-right: 0;
}

#imageContainer {
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

#admission-body {
  background-color: #ffd404 !important;
}

.admission-main-top a {
  color: navy;
}

.admission-main-top a:hover {
  color: rgba(0, 0, 128, 0.4);
}

.about-font {
  font-size: x-large;
}

@media (max-width: 576px) {
  .admission-main-top .h5 {
    font-size: medium;
  }
  .classes-container {
    font-size: xx-small;
  }
  .about-font {
    font-size: small;
  }
}
@media (max-width: 992px) {
  .about-font {
    font-size: medium;
  }
}
@media (max-width: 375px) {
  .admission-main-top .h5 {
    font-size: x-small;
  }
  .admission-main-top .h4 {
    font-size: medium;
  }
  .about-font {
    font-size: medium;
  }
  .admission-main-top .h1 {
    font-size: x-large;
  }
}
@media (min-width: 576px) {
  #flexSwitch.form-switch {
    margin-bottom: 1rem;
  }
  #flexSwitch.form-switch .form-check-input {
    height: 1.25rem;
    width: 2.75rem;
    -moz-border-radius: 3rem;
         border-radius: 3rem;
  }
  #flexSwitch.form-switch .form-check-label {
    font-size: 1.25rem;
  }
}
#flexSwitch.form-switch .form-check-label {
  font-size: 0.75rem;
}

@media (max-width: 576px) {
  #flexSwitch.form-switch {
    position: fixed;
    top: 25%;
    left: -45px;
    background-color: #000;
    color: #fff;
    border: 2px solid #000;
    -moz-border-radius: 20px;
         border-radius: 20px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    -webkit-transform: rotate(270deg);
       -moz-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
         -o-transform: rotate(270deg);
            transform: rotate(270deg);
  }
}
@media (max-width: 576px) {
  .classes-container {
    margin-left: auto;
    max-width: 500px;
    margin-right: auto;
  }
}
#skeleton {
  width: 100%;
  padding: 4%;
  height: 63.6vw;
  background-color: #fff;
}

@media (max-width: 767.5px) {
  #skeleton {
    height: 134.2666666667vw;
  }
}
.skeleton {
  display: none;
}

#skeleton .skeleton-top {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  height: 13%;
}

#skeleton .skeleton-second {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  height: 40%;
  opacity: 0.5;
}

#skeleton .skeleton-third {
  height: 35%;
  opacity: 0.5;
}

#skeleton .skeleton-forth {
  height: 12%;
}

#skeleton .skeleton-second > div:nth-child(2),
#skeleton .skeleton-top .skeleton-top-second {
  -webkit-box-flex: 1;
     -moz-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 100%;
}

#skeleton .skeleton-top .skeleton-top-second > div:first-child {
  opacity: 0.5;
  height: 40%;
  margin-top: 3%;
  width: 90%;
  margin-left: 2%;
}

#skeleton .skeleton-top .skeleton-top-second > div:nth-child(2) {
  opacity: 0.5;
  height: 20%;
  margin-top: 1%;
  width: 80%;
  margin-left: 3%;
  display: inline-block;
}

#skeleton .skeleton-second .skeleton-second-second,
#skeleton .skeleton-top .skeleton-top-first {
  height: 100%;
}

#skeleton .skeleton-top .skeleton-top-first {
  -ms-flex-preferred-size: 20%;
      flex-basis: 20%;
  opacity: 0.5;
  -moz-border-radius: 50%;
       border-radius: 50%;
}

#skeleton .skeleton-second .skeleton-second-second {
  -ms-flex-preferred-size: 75%;
      flex-basis: 75%;
  opacity: 0.5;
}

#skeleton .skeleton-second > div:nth-child(2) {
  margin-left: 2%;
}

#skeleton .skeleton-second .skeleton-second-second > div:first-child {
  height: 30%;
  margin-top: 5%;
  opacity: 0.5;
  margin-left: 10%;
  margin-right: 5%;
}

#skeleton .skeleton-second .skeleton-second-second > div:nth-child(2) {
  height: 15%;
  margin-top: 5%;
  margin-left: 6%;
  margin-right: 5%;
}

#skeleton .skeleton-second .multiple-lines > div {
  height: 10%;
  margin-top: 2%;
}

#skeleton .skeleton-second .multiple-lines > div:last-child {
  margin-right: 8%;
}

#skeleton .skeleton-second .multiple-lines {
  margin-top: 5%;
  margin-left: 2%;
  height: 40%;
}

#skeleton .skeleton-third > div:first-child {
  height: 12%;
  margin-top: 0.5%;
  margin-left: 2%;
  width: 48%;
}

#skeleton .skeleton-third .multiple-lines .half {
  width: 50%;
}

#skeleton .skeleton-third .multiple-lines {
  margin-top: 2%;
  height: 40%;
}

#skeleton .skeleton-third .multiple-lines > div {
  height: 11%;
  margin-top: 1.75%;
}

#skeleton .skeleton-third > div:nth-child(3),
#skeleton .skeleton-third > div:nth-child(4),
#skeleton .skeleton-third > div:nth-child(5) {
  height: 8%;
  margin-top: 1%;
  margin-left: 10%;
  margin-right: 10%;
}

#skeleton .skeleton-third > div:nth-child(3) {
  margin-top: 7%;
}

#skeleton .skeleton-forth,
#skeleton .skeleton-second .multiple-lines > div,
#skeleton .skeleton-second .skeleton-second-second > div:first-child,
#skeleton .skeleton-second .skeleton-second-second > div:nth-child(2),
#skeleton .skeleton-second > div:nth-child(2),
#skeleton .skeleton-third .multiple-lines > div,
#skeleton .skeleton-third > div:first-child,
#skeleton .skeleton-third > div:nth-child(3),
#skeleton .skeleton-third > div:nth-child(4),
#skeleton .skeleton-third > div:nth-child(5),
#skeleton .skeleton-top .skeleton-top-first,
#skeleton .skeleton-top .skeleton-top-second > div:first-child,
#skeleton .skeleton-top .skeleton-top-second > div:nth-child(2) {
  -moz-border-radius: 10px;
       border-radius: 10px;
  opacity: 0.7;
  -webkit-animation: skeliton-animation 1s linear infinite alternate;
     -moz-animation: skeliton-animation 1s linear infinite alternate;
       -o-animation: skeliton-animation 1s linear infinite alternate;
          animation: skeliton-animation 1s linear infinite alternate;
}

@-webkit-keyframes skeliton-animation {
  0% {
    background-color: #a3b7c1;
  }
  100% {
    background-color: #eff3f4;
  }
}

@-moz-keyframes skeliton-animation {
  0% {
    background-color: #a3b7c1;
  }
  100% {
    background-color: #eff3f4;
  }
}

@-o-keyframes skeliton-animation {
  0% {
    background-color: #a3b7c1;
  }
  100% {
    background-color: #eff3f4;
  }
}

@keyframes skeliton-animation {
  0% {
    background-color: #a3b7c1;
  }
  100% {
    background-color: #eff3f4;
  }
}
.song {
  max-width: 576px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 576px) {
  .song {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}
.bg-pink-3 main > div.books-main-top a {
  color: #add8e6;
  cursor: not-allowed;
}

@media (max-width: 576px) {
  .books-main-top .h5,
  .books-main-top h5 {
    font-size: -moz-calc(0.725rem + 1.5vw);
    font-size: calc(0.725rem + 1.5vw);
  }
  .books-main-top h1 span {
    display: block;
  }
}
@media (max-width: 768px) {
  .books-main-top h1 span {
    display: none;
  }
}
.books-main-top h5 a {
  white-space: nowrap;
}

.contact-main-top {
  border-bottom: 2px solid #fff;
}

@media (max-width: 576px) {
  .contact-main-top .h5,
  .contact-main-top h5 {
    font-size: -moz-calc(0.725rem + 1.5vw);
    font-size: calc(0.725rem + 1.5vw);
  }
  .contact-main-top h1 span {
    display: block;
  }
}
@media (max-width: 768px) {
  .contact-main-top h1 span {
    display: none;
  }
}
.contact-main-top h5 a {
  white-space: nowrap;
}

.card-container {
  -moz-border-radius: 0.5rem;
       border-radius: 0.5rem;
  border-color: #d4af37;
  border-style: solid;
  background-color: #000;
  color: #d4af37;
  margin-left: 0.1rem;
  margin-right: 0.1rem;
  padding: 1rem;
  min-height: 125px;
  font-size: 0.8rem;
  font-weight: 600;
}

.card-container a {
  color: #d4af37;
  text-decoration: none;
}

.card-container a:hover {
  color: gold;
  text-decoration: underline;
}

.flower-img {
  display: none;
}

.detail {
  position: relative;
  padding-left: 1.2rem;
}

.card-head {
  font-size: 1.2rem;
  font-weight: 800;
}

.card-head img {
  height: 3.2rem;
}

@media (max-width: 350px) {
  .col-auto {
    margin: 0 !important;
  }
  .card-container .col-8 {
    width: 100%;
  }
  .card-container .col-2 {
    width: 0;
  }
}
@media (min-width: 350px) {
  .card-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
    min-height: 175px;
  }
  .flower-img {
    display: block;
    height: 175px;
  }
}
@media (min-width: 576px) {
  .card-container {
    margin-left: auto;
    margin-right: auto;
    -moz-border-radius: 1rem;
         border-radius: 1rem;
    max-width: 500px;
    min-height: 270px;
    font-size: small;
  }
  .flower-img {
    height: 270px;
  }
  .detail {
    padding-left: 1.75rem;
  }
  .card-head {
    font-size: 1.75rem;
  }
  .card-head img {
    height: 4.5rem;
  }
}
@media (min-width: 768px) {
  .card-container {
    margin-left: auto;
    margin-right: auto;
    -moz-border-radius: 1rem;
         border-radius: 1rem;
    max-width: 700px;
    min-height: 350px;
    font-size: large;
  }
  .flower-img {
    height: 300px;
  }
  .detail {
    padding-left: 2.25rem;
  }
  .card-head {
    font-size: 2rem;
  }
  .card-head img {
    height: 6rem;
  }
}
.detail div {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.location::before {
  content: "\f3e7";
  font-family: Bootstrap-icons;
  position: absolute;
  left: 0.25rem;
}

.email::before {
  content: "\f84b";
  font-family: Bootstrap-icons;
  position: absolute;
  left: 0.25rem;
}

.phoneno::before {
  content: "\f5b4";
  font-family: Bootstrap-icons;
  position: absolute;
  left: 0.25rem;
}

@media (max-width: 576px) {
  .dress-main-top .h5,
  .dress-main-top h5 {
    font-size: -moz-calc(0.725rem + 1.5vw);
    font-size: calc(0.725rem + 1.5vw);
  }
  .dress-main-top h1 span {
    display: block;
  }
}
@media (max-width: 768px) {
  .dress-main-top h1 span {
    display: none;
  }
}
.dress-main-top h5 a,
.title a {
  white-space: nowrap;
}

.image-shadow {
  background: -moz-radial-gradient(center, circle closest-side, #fff, rgba(255, 255, 255, 0));
  background: -o-radial-gradient(center, circle closest-side, #fff, rgba(255, 255, 255, 0));
  background: radial-gradient(circle closest-side at center, #fff, rgba(255, 255, 255, 0));
}

.all-dress img {
  max-width: 100%;
}

.title a {
  color: navy;
  text-decoration: none;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}

[data-bs-theme=dark] .title a {
  color: var(--bs-primary-text-emphasis);
}

.title a:hover {
  color: #00f;
  font-weight: 400;
}

.box-padding {
  max-width: 960px;
}

.box-padding .image-shadow {
  width: 250px;
}

.title .image-shadow {
  max-width: 300px;
}

.box-padding > div {
  margin-bottom: 3rem;
  padding: 1rem;
}

.box-padding > div:nth-child(even) {
  background-color: navy;
  color: #fff;
}

[data-bs-theme=dark] .box-padding > div:nth-child(even) {
  background-color: rgba(0, 4, 53, 0.5);
}

.box-padding > div:nth-child(odd) {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity));
  color: #000;
}

[data-bs-theme=dark] .box-padding > div:nth-child(odd) {
  background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity));
  color: var(--bs-dark-text-emphasis);
}

.title .title-text {
  font-size: 3.2rem;
  margin-bottom: 0.5rem;
}

.title .title-text span {
  font-weight: bolder;
  font-size: 3.5rem;
}

.title .image-shadow {
  position: relative;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  min-height: -webkit-max-content;
  min-height: -moz-max-content;
  min-height: max-content;
}

.title .image-shadow::before {
  content: "";
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
       -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 90%;
  height: 90%;
  background-color: #000;
  -moz-border-radius: 50%;
       border-radius: 50%;
  z-index: -1;
}

@media (max-width: 769px) {
  .title .title-text,
  .title .title-text span {
    font-size: 2.4rem;
    margin-bottom: 0;
  }
  .box-padding .image-shadow {
    width: 100%;
  }
  .title .image-shadow {
    width: 100%;
    max-width: 240px;
  }
  .title .h4 {
    font-size: inherit;
  }
  .title blockquote {
    font-size: small;
  }
  .discription {
    margin-top: 2rem;
  }
}
@media (max-width: 576px) {
  .title {
    text-align: center;
  }
  .title .image-shadow {
    min-height: 100px;
  }
}
#dress-body {
  --bs-bg-opacity: 1;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity))), to(rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity))));
  background: -moz-linear-gradient(top, rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)), rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity)));
  background: -o-linear-gradient(top, rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)), rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity)));
  background: linear-gradient(to bottom, rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)), rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity)));
}

.all-dress .shadow-dress {
  background: -webkit-gradient(linear, left bottom, right top, from(rgba(var(--bs-body-bg-rgb))), color-stop(var(--bs-dark-bg-subtle)), to(rgba(var(--bs-body-bg-rgb))));
  background: -moz-linear-gradient(left bottom, rgba(var(--bs-body-bg-rgb)), var(--bs-dark-bg-subtle), rgba(var(--bs-body-bg-rgb)));
  background: -o-linear-gradient(left bottom, rgba(var(--bs-body-bg-rgb)), var(--bs-dark-bg-subtle), rgba(var(--bs-body-bg-rgb)));
  background: linear-gradient(to right top, rgba(var(--bs-body-bg-rgb)), var(--bs-dark-bg-subtle), rgba(var(--bs-body-bg-rgb)));
  -moz-border-radius: 20px;
       border-radius: 20px;
  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity));
}

.discription li {
  margin-top: 0.3rem;
}

.images img {
  max-height: 300px;
  max-width: 100%;
  border: 30px solid transparent;
  -moz-border-image: 196 round;
    -o-border-image: 196 round;
       border-image: 196 round;
  border-image-source: url(../../images/border-stick.png);
}

.occasion-sticky {
  position: sticky;
  top: 0;
  padding-top: 2rem;
  padding-bottom: 2rem;
  z-index: 1;
}

@media (min-width: 576px) {
  .occasion-sticky {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
.g-date,
.occasion-sticky {
  color: var(--bs-primary-text-emphasis) !important;
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
}

.occasion-sticky.top-50px {
  top: 70px;
  text-align: center;
  padding-top: 0;
}

.occasion-sticky.top-50px > span {
  display: block;
  max-width: 600px;
  margin: auto;
  background-color: rgb(0, 0, 128);
  -moz-border-radius: 40px;
       border-radius: 40px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: #fff;
}

html.js .gallery .g-skeleton {
  min-height: 400px;
  -webkit-animation: gallery-animation 1s linear infinite alternate;
     -moz-animation: gallery-animation 1s linear infinite alternate;
       -o-animation: gallery-animation 1s linear infinite alternate;
          animation: gallery-animation 1s linear infinite alternate;
}

@-webkit-keyframes gallery-animation {
  0% {
    background-color: #a3b7c1;
  }
  100% {
    background-color: #eff3f4;
  }
}

@-moz-keyframes gallery-animation {
  0% {
    background-color: #a3b7c1;
  }
  100% {
    background-color: #eff3f4;
  }
}

@-o-keyframes gallery-animation {
  0% {
    background-color: #a3b7c1;
  }
  100% {
    background-color: #eff3f4;
  }
}

@keyframes gallery-animation {
  0% {
    background-color: #a3b7c1;
  }
  100% {
    background-color: #eff3f4;
  }
}
html.js .gallery .g-skeleton div img {
  height: 0;
  border: none;
}

.gallery-main-top {
  margin-bottom: 3rem;
}

.images {
  margin: 1.5rem;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
     -moz-box-orient: horizontal;
     -moz-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.images > div {
  margin: 1rem;
  position: relative;
  display: inline-block;
}

.images > div::before {
  position: absolute;
  -moz-border-radius: 0.75rem;
       border-radius: 0.75rem;
  height: 1.5rem;
  width: -moz-calc(100% + 5rem);
  width: calc(100% + 5rem);
  left: -2.5rem;
  top: 50%;
  -webkit-transform: translate(0, -50%);
     -moz-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
       -o-transform: translate(0, -50%);
          transform: translate(0, -50%);
  background-color: #9acd32;
  content: "";
  z-index: -1;
}

.model-blur {
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.4);
}

@media (max-width: 576px) {
  .images {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .images img {
    max-width: 100%;
  }
  .images > div::before {
    height: -moz-calc(100% + 4rem);
    height: calc(100% + 4rem);
    width: 1.5rem;
    top: -2rem;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
       -moz-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
         -o-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
  .gallery-main-top .h5,
  .gallery-main-top h5 {
    font-size: -moz-calc(0.725rem + 1.5vw);
    font-size: calc(0.725rem + 1.5vw);
  }
  .gallery-main-top h1 span {
    display: block;
  }
}
@media (max-width: 768px) {
  .gallery-main-top h1 span {
    display: none;
  }
}
.gallery-main-top h5 a {
  white-space: nowrap;
}

.g-date span {
  text-wrap: nowrap;
}

.g-date span:nth-child(2) {
  font-size: small;
}

@media only screen and (min-width: 768px) {
  .h4.line {
    border-bottom: 1px solid #000;
    line-height: 0.1em;
    white-space: inherit;
  }
  .g-date span:nth-child(2) {
    font-size: inherit;
  }
}
.font-top {
  font-size: x-large;
  font-weight: 600;
}

.top-change-from-to::after {
  content: attr(data-text-1);
  -webkit-animation: textChange 7s infinite;
     -moz-animation: textChange 7s infinite;
       -o-animation: textChange 7s infinite;
          animation: textChange 7s infinite;
  color: var(--my-drk-ylo);
  display: inline-block;
  min-width: 100%;
  text-align: center;
}

@-webkit-keyframes textChange {
  0%, 100%, 20%, 80% {
    content: attr(data-text-1);
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
  30%, 50%, 70% {
    content: attr(data-text-2);
    opacity: 1;
  }
}

@-moz-keyframes textChange {
  0%, 100%, 20%, 80% {
    content: attr(data-text-1);
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
  30%, 50%, 70% {
    content: attr(data-text-2);
    opacity: 1;
  }
}

@-o-keyframes textChange {
  0%, 100%, 20%, 80% {
    content: attr(data-text-1);
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
  30%, 50%, 70% {
    content: attr(data-text-2);
    opacity: 1;
  }
}

@keyframes textChange {
  0%, 100%, 20%, 80% {
    content: attr(data-text-1);
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
  30%, 50%, 70% {
    content: attr(data-text-2);
    opacity: 1;
  }
}
@media (min-width: 576px) {
  .top-change-from-to::after {
    text-align: start;
    min-width: auto;
    width: 218px;
  }
  .font-top {
    font-size: xx-large;
  }
}
@media (min-width: 768px) {
  .top-change-from-to::after {
    width: 272px;
  }
  .font-top {
    font-size: 40px;
  }
}
@media (min-width: 992px) {
  .contant .text {
    font-size: larger;
  }
}
.safe h5 {
  font-weight: 900;
}

.contant > div {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

#faq li {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.no-wrap, .weather .weather-detail > div:nth-child(2), .weather .weather-detail > span:nth-child(2), .weather .weather-detail > div:first-child, .weather .weather-detail > span:first-child {
  text-wrap: nowrap;
}

.bulletin-list-group {
  position: relative;
  overflow-y: scroll;
}

.bulletin,
.words {
  margin-top: 2rem;
}

.bulletin > div {
  height: 21.5rem;
}

@media (min-width: 575.98px) {
  .words > div {
    height: 21.5rem;
  }
}
.bulletin-sticky {
  position: sticky;
  top: 0;
  z-index: 10;
}

.words .card-text > span {
  white-space: nowrap;
}

.words .card-text > span > span {
  width: 0;
  margin-left: 0.5rem;
  border-right: 0.1rem solid #000;
  -webkit-animation: blink-animation 1s infinite;
     -moz-animation: blink-animation 1s infinite;
       -o-animation: blink-animation 1s infinite;
          animation: blink-animation 1s infinite;
}

[data-bs-theme=dark] .words .card-text > span > span {
  border-right: 0.1rem solid #fff;
}

@-webkit-keyframes blink-animation {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@-moz-keyframes blink-animation {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@-o-keyframes blink-animation {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes blink-animation {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.btn-clicked,
.btn-notclicked {
  vertical-align: middle;
  border: 1px solid #6c757d;
  -moz-border-radius: 0.375rem;
       border-radius: 0.375rem;
  display: inline-block;
  -webkit-transition: padding 0.5s, font-size 0.5s;
  -o-transition: padding 0.5s, font-size 0.5s;
  -moz-transition: padding 0.5s, font-size 0.5s;
  transition: padding 0.5s, font-size 0.5s;
  margin-left: 0.2rem;
  margin-right: 0.2rem;
}

.btn-clicked {
  padding: 0.375rem 0.75rem;
  color: #fff;
  background-color: var(--bs-primary);
  cursor: default;
}

.btn-notclicked {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  cursor: pointer;
}

.btn-notclicked:hover {
  background-color: var(--bs-secondary);
  color: #fff;
}

#click-notclick {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 4rem;
  padding-left: 0.2rem;
}

.bulletin-list-group a {
  margin-bottom: 0.1rem;
}

.events .card:hover {
  scale: 1.05;
}

.video_container {
  position: relative;
  background-color: rgb(237, 237, 237);
  -moz-border-radius: 20px;
       border-radius: 20px;
}

.video_container__video {
  display: none;
  width: 100%;
  -moz-border-radius: 20px;
       border-radius: 20px;
  -o-object-fit: cover;
     object-fit: cover;
  height: 400px;
}

.video_container__image {
  width: 100%;
  -moz-border-radius: 20px;
       border-radius: 20px;
  -o-object-fit: cover;
     object-fit: cover;
  height: 400px;
}

.video_container__text {
  position: absolute;
  -moz-border-radius: 20px;
       border-radius: 20px;
  top: 1rem;
  right: -2rem;
  left: -2rem;
  padding: 0.25rem;
  text-align: center;
  border: 2px solid rgba(0, 0, 0, 0.3);
  color: #000;
  background: 0 0;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}

[data-bs-theme=dark] .video_container__text {
  --bs-bg-opacity: .5;
  background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity));
  color: #fff;
}

@media (max-width: 768px) {
  .video_container .h5 {
    font-size: 0.9rem;
  }
  .video_container .h1 {
    font-size: 1.5rem;
  }
  .video_container__image,
  .video_container__video {
    height: 300px;
  }
  .video_container__text {
    top: 0.5rem;
    right: -1.5rem;
    left: -1.5rem;
  }
}
.fa-custompx {
  font-size: 70px;
}

@media (max-width: 575.98px) {
  .video_container {
    margin-right: 1rem;
    margin-left: 1rem;
  }
  .words > div {
    min-height: 21.5rem;
  }
  .fa-custompx {
    font-size: 40px;
  }
  .video_container__text {
    right: -1.5rem;
    left: -1.5rem;
  }
  .video_container__image,
  .video_container__video {
    -o-object-fit: 100%;
       object-fit: 100%;
    -o-object-position: 50% 10px;
       object-position: 50% 10px;
  }
}
@media (max-width: 450px) {
  .video_container .h5 {
    font-size: 0.8rem;
  }
  .video_container .h1 {
    font-size: 1.25rem;
  }
}
@media (max-width: 320px) {
  .video_container .h5 {
    font-size: 0.75rem;
  }
  .video_container__image,
  .video_container__video {
    -o-object-position: 50% 30px;
       object-position: 50% 30px;
  }
}
.school-img {
  max-width: 22.875rem;
}

.school-img img {
  width: 100%;
}

.img_card__body {
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.img_card__date_month > div:first-child {
  width: 3rem;
}

.img_card__date_month > div {
  display: inline-block;
  text-align: center;
}

.bg-navy {
  color: #fff;
  background-color: navy;
}

.btn.bg-navy:hover {
  color: #fff;
  background-color: rgba(0, 0, 128, 0.7);
}

.btn.bg-outline-navy {
  color: #000;
  border: 1px solid navy;
}

[data-bs-theme=dark] .btn.bg-outline-navy:not(:hover) {
  color: white;
  border: 1px solid rgb(0, 90, 128);
}

.btn.bg-outline-navy:hover {
  color: #fff;
  background-color: navy;
  border: 1px solid navy;
}

.img_card__date_month .img_card__name {
  color: navy;
  margin-left: 0.25rem;
}

[data-bs-theme=dark] .img_card__date_month .img_card__name {
  color: rgb(105, 105, 255);
}

.img_card__body .img_card__detail {
  margin-top: 0.5rem;
  margin-bottom: 0.2rem;
  color: rgba(var(--bs-body-color-rgb));
}

.img_card {
  -moz-border-radius: 7px;
       border-radius: 7px;
  --bs-bg-opacity: .7;
  background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity));
  color: var(--bs-dark-text-emphasis);
}

@media only screen and (max-width: 576px) {
  .img_card {
    max-width: 300px;
    margin: auto;
  }
}
.img_card__img img {
  -moz-border-radius: 10px;
       border-radius: 10px;
  height: 200px;
}

.img_card__img {
  -moz-border-radius: 10px;
       border-radius: 10px;
  border: 2px solid rgba(0, 0, 128, 0.2);
}

.bg-s-puja {
  background-color: #88cdea;
}

@font-face {
  font-family: "Varela Round";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/varelaround/v20/w8gdH283Tvk__Lua32TysjIfp8uP.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --my-drk-ylo: rgb(255, 195, 0);
  --bg-alter: rgb(216, 0, 101) ;
}

body {
  font-family: "Varela Round", Arial, Helvetica, sans-serif !important;
  min-width: 270px;
}

.tnr {
  font-family: "Times New Roman", Times, serif;
}

.italic {
  font-style: italic;
}

.arial {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
}

.hollow {
  color: var(--hollow-color, #fff);
  text-shadow: -1px -1px 0 var(--hollow-bg, #000), 1px -1px 0 var(--hollow-bg, #000), -1px 1px 0 var(--hollow-bg, #000), 1px 1px 0 var(--hollow-bg, #000);
}

.bold {
  font-weight: 700;
}

main {
  min-height: 59vh;
}

button[data-search] {
  display: none;
}

.collapse-custom {
  overflow: hidden;
  -webkit-transition: height 0.3s ease;
  -o-transition: height 0.3s ease;
  -moz-transition: height 0.3s ease;
  transition: height 0.3s ease;
  height: auto;
}

@media screen and (max-width: 992px) {
  .collapse-custom {
    height: 0;
    min-width: 100%;
  }
  button[data-search] {
    display: block;
  }
}
@media (max-width: 576px) {
  .offcanvas.offcanvas-end {
    width: 250px !important;
  }
  footer .quick-access li {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
}
.bg-pink-3 main > div:first-child,
.bg-pink-3 nav {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity)) !important;
}

.bg-pink-3 main > :first-child a {
  text-decoration: none;
  color: var(--bs-primary-text-emphasis);
}

.navbar li {
  text-wrap: nowrap;
}

.navbar-brand {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.navbar-brand .text {
  font-size: xx-large;
  font-weight: 700;
}

@media (max-width: 470px) {
  .navbar-brand .text {
    font-size: large;
    white-space: normal;
  }
}
.navbar {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

footer {
  margin-top: 1rem;
  padding-top: 1rem;
}

footer h4 {
  font-weight: 500;
  white-space: nowrap;
}

@media (max-width: 270px) {
  .navbar {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
  footer h4 {
    margin-top: 1rem;
    font-size: large;
    font-weight: 800;
  }
}
footer ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

footer a {
  color: #fff;
  text-decoration: none;
}

footer .quick-access h4 {
  margin-top: 1rem;
}

footer .quick-access {
  margin-bottom: 1rem;
}

.footer-office p {
  margin-left: 10px;
}

footer .footer-office {
  margin-top: 1rem;
}

.bg-alter {
  background-color: var(--bg-alter);
  color: #fff;
}

.navbar {
  background-color: inherit;
}

#scrollTop {
  position: fixed;
  display: none;
  cursor: pointer;
  z-index: 10;
}

#scrollTop::before {
  bottom: 40px;
  right: 20px;
  position: fixed;
  font-size: xx-large;
  color: #000;
  background-color: #fff;
  -moz-border-radius: 50%;
       border-radius: 50%;
  max-width: 32px;
  max-height: 32px;
}

.pointer:hover,
a:hover {
  cursor: pointer;
}

.text-justify {
  text-align: justify;
}

.upper {
  text-transform: uppercase;
}

.fade-in {
  opacity: 1;
  -webkit-transition: opacity 1s ease;
  -o-transition: opacity 1s ease;
  -moz-transition: opacity 1s ease;
  transition: opacity 1s ease;
}

.fade-out {
  opacity: 0;
  -webkit-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  -moz-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}

.display-yt {
  font-size: xx-large;
}

.display-fb {
  margin-top: 0.25rem;
  font-size: x-large;
}

@media (max-width: 576px) {
  .map-main-top .h5,
  .map-main-top h5 {
    font-size: -moz-calc(0.725rem + 1.5vw);
    font-size: calc(0.725rem + 1.5vw);
  }
  .map-main-top h1 span {
    display: block;
  }
}
@media (max-width: 768px) {
  .map-main-top h1 span {
    display: none;
  }
}
.map-main-top h5 a {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .train-modal-body.train-modal table {
    font-size: small;
  }
}
.train-modal-body.train-modal table {
  width: 100%;
  white-space: nowrap;
}

.train-modal-body.train-modal table td,
.train-modal-body.train-modal table th {
  border: 1px solid #000;
  border-collapse: collapse;
  padding: 10px;
}

.train-modal-body.train-modal table th {
  text-align: center;
}

.train-modal-body.train-modal table td:nth-child(even),
.train-modal-body.train-modal table th:nth-child(even) {
  background-color: rgba(var(--bs-secondary-bg-rgb));
}

.train-opacity-5 {
  opacity: 0.5;
}

.mapdata div.by-catog {
  padding: 0.5rem;
}

#image-container {
  max-width: 700px;
}

.mapdata h4 {
  -moz-border-radius: 20px 20px 0 0;
       border-radius: 20px 20px 0 0;
  padding: 1rem;
  background-color: rgba(var(--bs-warning-rgb));
  color: rgba(var(--bs-dark-rgb));
  margin: 0;
}

.mapdata div.by-catog {
  -moz-border-radius: 0 0 20px 20px;
       border-radius: 0 0 20px 20px;
  margin-bottom: 1rem;
  background-color: rgba(var(--bs-secondary-bg-rgb));
  color: var(--bs-light-text-emphasis);
}

@media (min-width: 576px) {
  .mapdata .catog-sub {
    border-bottom: 1px solid rgba(var(--bs-warning-rgb));
    line-height: 0.1em;
    white-space: inherit;
  }
}
.mapdata .catog-sub {
  margin-bottom: 2rem;
  margin-top: 2rem;
  background-color: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
  position: relative;
}

.mapdata .catog-sub::before {
  content: "";
  position: absolute;
  -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
       -o-transform: translateY(-50%);
          transform: translateY(-50%);
  background-color: var(--bs-warning-bg-subtle);
  height: 3.5rem;
  width: 100%;
  top: 50%;
  right: 0;
  z-index: -1;
}

.mapdata .catog-sub > span {
  background-color: var(--bs-warning-bg-subtle);
  padding-left: 2rem;
  padding-right: 2rem;
}

/* [data-bs-theme="dark"] .mapdata{
     color: black;
 } */
#by-location a {
  white-space: nowrap;
  margin-top: 1rem;
}

@media (max-width: 576px) {
  .office-main-top .h5,
  .office-main-top h5 {
    font-size: -moz-calc(0.725rem + 1.5vw);
    font-size: calc(0.725rem + 1.5vw);
  }
  .office-main-top h1 span {
    display: block;
  }
}
@media (max-width: 992px) {
  .office-main-top h1 span {
    display: none;
  }
}
.office-main-top h5 a {
  white-space: nowrap;
}

tr:first-child {
  background-color: #000;
  color: #fff;
}

td,
th {
  border-bottom: 1px solid #000;
  text-align: left;
  padding: 8px;
  text-align: center;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.custom-container {
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
  max-width: 500px;
}

.bot-container {
  display: none;
  position: fixed;
  max-width: 600px;
  width: 100%;
  max-height: 500px;
  height: 100%;
  bottom: 0;
  right: 0;
  z-index: 50;
  padding: 10px;
}

.bot {
  -moz-border-radius: 10px;
       border-radius: 10px;
  height: 100%;
}

.bot .conversation {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.bot .conversation::-webkit-scrollbar {
  display: none;
}

.bot .minimize {
  width: 40%;
  height: 5px;
  -moz-border-radius: 50rem;
       border-radius: 50rem;
  display: inline-block;
}

.system .text,
.user .text {
  position: relative;
  padding: 10px;
  -moz-border-radius: 10px;
       border-radius: 10px;
  margin-top: 3rem;
}

.system .help-text,
.user .help-text {
  position: relative;
  padding: 0.25rem;
  -moz-border-radius: 10px;
       border-radius: 10px;
  margin-top: 0.5rem;
  font-weight: lighter;
  color: var(--bs-danger-text-emphasis);
  border-width: 1px;
  border-style: solid;
  border-color: var(--bs-border-color);
  font-size: 0.75rem;
}

.system .help-text::before,
.user .help-text::before {
  content: "\f4b8";
  margin-left: 0.5rem;
  margin-right: 0.25rem;
  vertical-align: -0.125rem;
  font-family: "bootstrap-icons";
}

.user .help-text {
  margin-left: 10%;
}

.system .help-text {
  margin-right: 10%;
}

.system .text {
  margin-right: 10%;
  background-color: var(--bs-info-bg-subtle);
  color: var(--bs-info-text-emphasis);
}

.user .text {
  margin-left: 10%;
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

.system .text::before,
.user .text::before {
  position: absolute;
  color: rgba(var(--bs-body-color-rgb));
  font-family: "bootstrap-icons";
  font-size: 1rem;
}

.system .text::before {
  content: "\f6b1";
  top: -1.75rem;
  left: 10px;
}

.user .text::before {
  content: "\f4da";
  top: -1.75rem;
  right: 10px;
}

.bot .user-input input:focus {
  border-color: var(--bs-border-color);
  color: inherit;
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
}

.weather input[name=forcast] + .btn, .weather .blur, .weather .weather-card {
  --rounded: 0;
  --bs-bg-opacity: .5;
  position: relative;
}
.weather input[name=forcast] + .btn::before, .weather .blur::before, .weather .weather-card::before {
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  -moz-border-radius: var(--rounded);
       border-radius: var(--rounded);
  bottom: 0;
  position: absolute;
  -webkit-backdrop-filter: blur(var(--bs-bg-blur));
          backdrop-filter: blur(var(--bs-bg-blur));
  z-index: -1;
}

.weather .weather-detail > div:nth-child(2), .weather .weather-detail > span:nth-child(2) {
  font-size: -moz-calc(1.275rem + 0.3vw) !important;
  font-size: calc(1.275rem + 0.3vw) !important;
}

@media (min-width: 1200px) {
  .weather .weather-detail > div:nth-child(2), .weather .weather-detail > span:nth-child(2) {
    font-size: 1.5rem !important;
  }
}
.weather #forcast-4:checked ~ .day-3, .weather #forcast-3:checked ~ .day-2, .weather #forcast-2:checked ~ .day-1, .weather #forcast-1:checked ~ .day-1, .weather #forcast-1:checked ~ .day-2, .weather #forcast-1:checked ~ .day-3 {
  height: 100%;
  opacity: 1;
  visibility: visible;
  -webkit-transition-property: opacity;
  -o-transition-property: opacity;
  -moz-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 0.1s;
     -moz-transition-duration: 0.1s;
       -o-transition-duration: 0.1s;
          transition-duration: 0.1s;
  -webkit-transition-timing-function: ease-in-out;
     -moz-transition-timing-function: ease-in-out;
       -o-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
}

.weather {
  --bs-bg-blur: 5px;
  --deg-size: 5px;
  --deg-weight: 1.5px;
  --deg-saperation: 7px;
  --deg-margin-right: 2px;
}
.weather .bg-body-tertiary {
  --text-color: rgba(var(--bs-white-rgb));
  color: var(--text-color);
}
.weather .weather-card {
  --text-color: rgba(var(--bs-white-rgb));
  color: var(--text-color);
  background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity));
  -moz-border-radius: var(--bs-border-radius);
       border-radius: var(--bs-border-radius);
}
.weather .weather-card > .weather-detail:nth-child(n+2) {
  margin-top: 0.5rem;
}
.weather .weather-detail > div:nth-child(2), .weather .weather-detail > span:nth-child(2) {
  line-height: 1.25;
}
.weather .weather-detail.wrap > div:nth-child(2), .weather .weather-detail.wrap > span:nth-child(2) {
  white-space: normal;
}
.weather .weather_sticky {
  position: sticky;
  top: 0;
  z-index: 5;
}
.weather .deg {
  position: relative;
  padding-right: var(--deg-saperation);
  margin-right: var(--deg-margin-right);
}
.weather .deg::after {
  content: "";
  position: absolute;
  height: var(--deg-size);
  width: var(--deg-size);
  -moz-border-radius: 50%;
       border-radius: 50%;
  border: var(--deg-weight) solid var(--text-color, #fff);
  top: 0%;
  right: 0;
}
.weather .deg.fs-1 {
  --deg-weight: 1.5px;
  --deg-size: 8px;
  --deg-saperation: 12px;
}
.weather .deg.fs-3 {
  --deg-weight: 1.5px;
  --deg-size: 6px;
  --deg-saperation: 8px;
}
.weather_img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  overflow: hidden;
  z-index: -20;
}
.weather_img img {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
       -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
}
.weather .weather_content .weather_text {
  padding: 0.5rem;
}
.weather .blur-opacity-1 {
  --bs-bg-opacity: .125;
}
.weather .blur-intencity-2 {
  --bs-bg-blur: 10px;
}
.weather .blur-intencity-3 {
  --bs-bg-blur: 30px;
}
.weather .blur-rouneded-pill {
  -moz-border-radius: 50rem;
       border-radius: 50rem;
}
.weather .blur-rouneded-pill::before {
  -moz-border-radius: 50rem;
       border-radius: 50rem;
}
.weather input[name=forcast] {
  display: none;
}
.weather input[name=forcast]:checked + .btn {
  --bs-bg-opacity: .5;
  --bs-btn-color: #fff;
  --bs-btn-bg: rgba(13, 110, 253, var(--bs-bg-opacity));
  --bs-btn-border-color: rgba(13, 110, 253, var(--bs-bg-opacity));
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(11, 94, 215, var(--bs-bg-opacity));
  --bs-btn-hover-border-color: rgba(10, 88, 202, var(--bs-bg-opacity));
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(10, 88, 202, var(--bs-bg-opacity));
  --bs-btn-active-border-color: rgba(10, 83, 190, var(--bs-bg-opacity));
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: rgba(13, 110, 253, var(--bs-bg-opacity));
  --bs-btn-disabled-border-color: rgba(13, 110, 253, var(--bs-bg-opacity));
}
.weather input[name=forcast] + .btn {
  --bs-bg-opacity: .625;
  --bs-btn-color: #fff;
  --bs-btn-bg: rgba(108, 117, 125, var(--bs-bg-opacity));
  --bs-btn-border-color: rgba(108, 117, 125, var(--bs-bg-opacity));
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(92, 99, 106, var(--bs-bg-opacity));
  --bs-btn-hover-border-color: rgba(86, 94, 100, var(--bs-bg-opacity));
  --bs-btn-focus-shadow-rgb: 130, 138, 145;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(86, 94, 100, var(--bs-bg-opacity));
  --bs-btn-active-border-color: rgba(81, 88, 94, var(--bs-bg-opacity));
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: rgba(108, 117, 125, var(--bs-bg-opacity));
  --bs-btn-disabled-border-color: rgba(108, 117, 125, var(--bs-bg-opacity));
}
.weather .day-1,
.weather .day-2,
.weather .day-3 {
  height: 0;
  opacity: 0;
  visibility: hidden;
}
.weather #forcast-2:checked ~ .day-2, .weather #forcast-2:checked ~ .day-3 {
  overflow: hidden;
}
.weather #forcast-3:checked ~ .day-1, .weather #forcast-3:checked ~ .day-3 {
  overflow: hidden;
}
.weather #forcast-4:checked ~ .day-1, .weather #forcast-4:checked ~ .day-2 {
  overflow: hidden;
}

.fs-7, .weather .weather-detail > div:first-child, .weather .weather-detail > span:first-child {
  font-size: 0.825rem;
}

.w-min-c {
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
  white-space: wrap;
}

.w-max-c {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  white-space: nowrap;
}

.day_weather hr {
  margin-bottom: 0.5rem;
  margin-top: 0.25rem;
}

.grid-container_current {
  display: grid;
  gap: 10px;
  margin: auto;
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-template-areas: "current-1" "current-2" "current-4" "current-3";
}
.grid-container_current .item-1,
.grid-container_current .item-2 {
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
  min-width: 250px;
}
.grid-container_current .item-1 {
  grid-area: current-1;
  padding: 1rem;
}
.grid-container_current .item-2 {
  grid-area: current-2;
  justify-self: end;
  padding: 1rem;
}
.grid-container_current .item-3 {
  grid-area: current-3;
  padding: 1rem;
}
.grid-container_current .item-4 {
  grid-area: current-4;
  padding: 1rem;
}
.grid-container_current .item-2 > div {
  display: inline-block;
}
.grid-container_current .item-2 > div:first-child {
  margin-right: 1rem;
}
.grid-container_current table {
  --bs-table-bg: transparent;
}
.grid-container_current table tr:first-child {
  background-color: inherit;
  color: inherit;
}
.grid-container_current table td:first-child {
  text-align: center;
}
.grid-container_current table td,
.grid-container_current table th {
  border-bottom: 1px solid var(--bs-table-border-color);
  text-align: left;
}

.day-1 .date-viewer,
.day-2 .date-viewer,
.day-3 .date-viewer {
  position: sticky;
  top: 5px;
  text-align: end;
  z-index: 10;
}
.day-1 .date-viewer .content,
.day-2 .date-viewer .content,
.day-3 .date-viewer .content {
  --rounded: 5px;
  font-weight: bold;
  color: black;
  display: inline-block;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.day-1 .date-viewer .content i,
.day-2 .date-viewer .content i,
.day-3 .date-viewer .content i {
  font-family: "Times New Roman", Times, serif;
}
.day-1 .date-viewer .content i::before,
.day-2 .date-viewer .content i::before,
.day-3 .date-viewer .content i::before {
  content: "— ";
}

.grid-container_day {
  display: grid;
  gap: 10px;
  margin: auto;
  grid-template-columns: 5px auto auto 5px;
  grid-template-rows: auto auto auto auto auto auto auto auto 5px;
  grid-template-areas: "item-1 item-1 item-1 item-1" ". item-2 item-2 ." ". item-3 item-10 ." ". item-4 item-4 ." ". item-5 item-6 ." ". item-7 item-8 ." ". hourly item-9 ." ". w w ." ". . . .";
}
.grid-container_day .item-10 > div,
.grid-container_day .item-2 > div {
  display: inline-block;
}
.grid-container_day .item-2 > div:first-child {
  margin-right: 1rem;
}
.grid-container_day .item-1 {
  grid-area: item-1;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem;
}
.grid-container_day .item-2 {
  grid-area: item-2;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem;
}
.grid-container_day .item-3 {
  grid-area: item-3;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem;
}
.grid-container_day .item-4 {
  grid-area: item-4;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem;
}
.grid-container_day .item-5 {
  grid-area: item-5;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem;
}
.grid-container_day .item-6 {
  grid-area: item-6;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem;
}
.grid-container_day .item-7 {
  grid-area: item-7;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem;
}
.grid-container_day .item-8 {
  grid-area: item-8;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem;
}
.grid-container_day .item-9 {
  grid-area: item-9;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem;
}
.grid-container_day .item-10 {
  grid-area: item-10;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem;
}
.grid-container_day .hourly {
  grid-area: hourly;
  text-align: center;
}
.grid-container_day .hourly > div {
  display: inline-block;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}
.grid-container_day .hourly-weather {
  grid-area: w;
  min-width: 0;
  max-width: 100%;
}
.grid-container_day .hourly-weather .d-flex {
  overflow-x: auto;
  gap: 1rem;
}
.grid-container_day .hourly-weather .d-flex > div {
  --border-color: rgba(255, 255, 255, 0.125);
  --bs-bg-opacity: .25;
  padding: 1rem;
  -moz-border-radius: 10px;
       border-radius: 10px;
  border: 1px solid var(--border-color);
  display: inline-block;
  color: var(--text-color, #fff);
  --text-color: rgba(var(--bs-white-rgb));
  background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity));
}
.grid-container_day .hourly-weather .d-flex > div:hover {
  --bs-bg-opacity: .75;
  --text-color: rgba(var(--bs-dark-rgb));
}
.grid-container_day .hourly-weather .d-flex > div.night:hover {
  --bs-bg-opacity: 1;
}
.grid-container_day .hourly-weather .d-flex > div.night {
  --text-color: rgba(var(--bs-white-rgb));
  background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity));
}

@media (min-width: 450px) {
  .grid-container_current {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "current-1 current-2" "current-4 current-4" "current-3 current-3";
  }
  .grid-container_current .item-1,
  .grid-container_current .item-2 {
    width: 100%;
    min-width: auto;
  }
  .grid-container_current .item-10 > div:first-child {
    margin-right: 1rem;
  }
  .grid-container_day {
    grid-template-columns: 5px auto auto 1fr 5px;
    grid-template-rows: auto auto -webkit-min-content -webkit-min-content auto auto auto auto auto auto auto 5px;
    grid-template-rows: auto auto min-content min-content auto auto auto auto auto auto auto 5px;
    grid-template-areas: "item-1 item-1 item-1 . ." "item-1 item-1 item-1 item-2 ." ". item-3 item-10 item-10 ." ". item-3 item-4 item-4 ." ". item-7 item-4 item-4 ." ". item-6 item-4 item-4 ." ". item-6 . item-8 ." ". item-5 item-5 item-8 ." ". item-5 item-5 item-9 ." ". hourly hourly item-9 ." ". w w w ." ". . . . .";
  }
  .grid-container_day .hourly > div {
    width: auto;
  }
}
@media (min-width: 576px) {
  .grid-container_current {
    grid-template-columns: 1.25fr 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "current-1 current-2" "current-3 current-2" "current-3 current-4" "current-3 current-4";
  }
  .grid-container_day {
    grid-template-columns: 5px auto auto auto 5px;
    grid-template-rows: 5px auto auto minmax(auto, 40px) minmax(auto, 40px) auto auto auto 5px;
    grid-template-areas: "item-1 item-1 . . ." "item-1 item-1 item-4 item-4 ." ". item-2 item-3 item-10 ." ". item-2 item-7 item-6 ." ". item-5 item-7 item-6 ." ". item-5 item-8 item-9 ." ". hourly item-8 item-9 ." ". w w w ." ". . . . .";
  }
}
@media (min-width: 768px) {
  .grid-container_current {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "current-1 current-2" "current-1 current-3" "current-4 current-3" "current-4 current-3";
  }
  .grid-container_day {
    grid-template-columns: 5px -webkit-min-content -webkit-max-content minmax(0, 1fr) auto 5px;
    grid-template-columns: 5px min-content max-content minmax(0, 1fr) auto 5px;
    grid-template-rows: 5px auto auto auto auto auto -webkit-min-content -webkit-max-content 5px;
    grid-template-rows: 5px auto auto auto auto auto min-content max-content 5px;
    grid-template-areas: "item-1 item-1 . . . ." "item-1 item-1 item-2 item-3 item-10 ." ". item-1 item-4 item-4 item-4 ." ". item-5 item-4 item-4 item-4 ." ". item-6 item-4 item-4 item-4 ." ". item-6 item-7 item-8 item-9 ." ". hourly item-7 item-8 item-9 ." ". w w w w ." ". . . . . .";
  }
}
@media (min-width: 992px) {
  .grid-container_current {
    grid-template-columns: 1fr 1fr 2fr;
    grid-template-rows: auto auto;
    grid-template-areas: "current-1 current-2 current-3" "current-4 current-4 current-3";
  }
  .item-2 > div {
    display: initial;
  }
  .item-2 > div:first-child {
    margin-right: auto;
  }
  .grid-container_day {
    grid-template-columns: 10px -webkit-min-content -webkit-min-content -webkit-min-content -webkit-min-content auto auto minmax(0, 1fr) 10px;
    grid-template-columns: 10px min-content min-content min-content min-content auto auto minmax(0, 1fr) 10px;
    grid-template-rows: 10px auto auto -webkit-min-content -webkit-min-content auto auto 10px;
    grid-template-rows: 10px auto auto min-content min-content auto auto 10px;
    grid-template-areas: "item-1 item-1 item-1 . . . . . ." "item-1 item-1 item-1 item-2 item-3 item-4 item-4 item-4 ." "item-1 item-1 item-1 item-2 item-10 item-4 item-4 item-4 ." "item-1 item-1 item-1 item-8 item-10 item-4 item-4 item-4 ." ". item-5 item-9 item-8 item-10 item-7 item-7 item-6 ." ". item-5 item-9 hourly item-10 item-7 item-7 item-6 ." ". w w w w w w w ." ". . . . . . . . .";
  }
}
.sun-circle {
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
  width: 150px;
  height: 75px;
}
.sun-circle::before {
  position: absolute;
  content: "";
  -moz-border-radius: 50% 50% 50% 50%;
       border-radius: 50% 50% 50% 50%;
  margin: 1rem;
  border: 0.2rem solid var(--bs-warning-bg-subtle);
  top: 0;
  left: 0;
  bottom: -100%;
  right: 0;
  z-index: 2;
}

.sun-indicator {
  position: relative;
  display: inline-block;
}
.sun-indicator::before {
  position: absolute;
  border-width: 0 0.2rem 0 0.2rem;
  border-color: var(--bs-warning-bg-subtle);
  border-style: solid;
  content: "";
  margin: 0 1rem;
  top: 75px;
  left: 0;
  right: 0;
  height: 20px;
  z-index: 2;
}
.sun-indicator .bi-sun-fill {
  color: var(--bs-warning-text-emphasis);
  font-size: 1.3rem;
  position: absolute;
  left: 3px;
  top: 0;
  z-index: 3;
}