/* Base setup */
p {
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 16px;
}

h1 {
  font-size: clamp(32px, 4vw, 48px);
}

h2 {
  font-size: clamp(24px, 3vw, 32px);
}

@media (max-width: 480px) {
  p {
    font-size: 12px;
  }

  h1 {
    font-size: 32px;
  }

  h2 {
    font-size: 18px;
  }
}
@media (min-width: 480px) {
  p {
    font-size: 12px;
  }

  h1 {
    font-size: 42px;
  }

  h2 {
    font-size: 22px;
  }

}

@media (min-width: 768px) {
  p {
    font-size: 14px;
  }

  h1 {
    font-size: 42px;
  }

  h2 {
    font-size: 22px;
  }

}

@media (min-width: 1200px) {
  p {
    
    font-size: 14px;
  }

  h1 {
    font-size: 48px;
  }

  h2 {
    font-size: 26px;
  }
}


#sp1 .splide__pagination,
#sp2 .splide__pagination,
#sp3 .splide__pagination,
#sp4 .splide__pagination,
#sp5 .splide__pagination,
#sp6 .splide__pagination,
#sp7 .splide__pagination,
#sp8 .splide__pagination,
#sp9 .splide__pagination,
#sp10 .splide__pagination,
#spcate .splide__pagination{
  display: none !important;
}

/* nav bar */

.main-nav ul li {
  padding-top: 10px;
  padding-bottom: 10px
}

.main-nav ul li a {
  padding-right: 20px
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  /* centers all nav links */
  align-items: center;
  /* vertically centers them if heights differ */
}

.submenu {
  margin-top: 0px;
  border-radius: 20px;
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  /* max-width:800px; */
  /* margin:auto; */
  background: #f9f9f9;
  border-top: 1px solid #ddd;
}

.submenu.show {
  display: block;
  /* shown when JS adds .show */
}

.submenu-content {
  display: flex;
  text-align: left;
  /* justify-content: space-around; */
  padding: 20px;
}

/* .splide__pagination{ */
/* margin-top:20px */
/* } */
.v-center {
  display: flex;
  align-items: center;
  /* justify-content: center; */
}

.h-center {
  display: flex;
  justify-content: center;
}

.sidebar2 {
  position: fixed;
  /* stick to screen */
  top: 0;
  left: -280px;
  /*hide off-screen*/
  width: 280px;
  height: 100%;
  /* your orange color */
  transition: left 0.3s ease;
  /* smooth slide */
  overflow: auto;
  z-index: 1000;
}

.cartbar2,
.wishbar2 {
  position: fixed;
  /* stick to screen */
  top: 0;
  right: -280px;
  /*hide off-screen*/
  width: 280px;
  height: 100%;
  /* your orange color */
  transition: right 0.3s ease;
  /* smooth slide */
  /*overflow: auto;*/
  z-index: 1000;
}

.sidebar2.active {
  left: 0;
  /* slide in */
}

.cartbar2.active,
.wishbar2.active {
  right: 0;
  /* slide in */
}







@keyframes circle1 {

  0%,
  65%,
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
  }

  95% {
    -webkit-transform: scale(1.6);
    -moz-transform: scale(1.6);
    -ms-transform: scale(1.6);
    -o-transform: scale(1.6);
    transform: scale(1.6);
  }
}

@-webkit-keyframes circle1 {

  0%,
  65%,
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
  }

  95% {
    -webkit-transform: scale(1.6);
    -moz-transform: scale(1.6);
    -ms-transform: scale(1.6);
    -o-transform: scale(1.6);
    transform: scale(1.6);
  }
}

@keyframes circle2 {

  0%,
  65%,
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }

  50% {
    box-shadow: 0px 0px 0px 8px rgba(255, 255, 255, 0.5);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }

  70% {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
  }

  85% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
  }

  90% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
  }

  97% {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
  }
}

@-webkit-keyframes circle2 {

  0%,
  65%,
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }

  50% {
    box-shadow: 0px 0px 0px 8px rgba(255, 255, 255, 0.5);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }

  70% {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
  }

  85% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
  }

  90% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
  }

  97% {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
  }
}

/* google icons */
/* .tdb-icon{font-family: 'Material Icons';text-transform: none;} */


.swal-button {
  border-radius: 0 !important;
  background-color: black;
}

.swal-button:hover {
  background-color: black !important;
  opacity: 0.8;
}

.swal-modal {
  border-radius: 0 !important;
}

/* loaders */
.myloader {
  margin: auto;
  width: 50px;
  height: 50px;
  -webkit-animation: spin 10s linear infinite;
  /* Safari */
  animation: spin 1s linear infinite;
}

.loader1 {
  border-radius: 50%;
  border: 8px solid #ffffff;
  border-top: 8px solid black;
  border-bottom: 8px solid black;
}

.loader2 {
  border-radius: 50%;
  border: 8px solid #c0c0c0bd;
  border-top: 8px solid black;
}

.loader3 {
  border-radius: 50%;
  border: 0px solid #c0c0c0bd;
  border-top: 8px solid black;
}

.loader4 {
  border-radius: 50%;
  border: 8px solid #c0c0c0bd;
  border-top: 5px solid black;
}

.loader5 {
  border-radius: 0%;
  border: 8px solid #c0c0c0bd;
  border-top: 5px solid black;
  border-bottom: 5px solid black;
}

.loader6 {
  border-radius: 0%;
  border: 0px solid #c0c0c0bd;
  border-top: 5px solid black;
  border-bottom: 5px solid black;
}

.loader7 {
  border-radius: 0%;
  border: 0px solid #c0c0c0bd;
  border: 5px solid black;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

/* chrome */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes animation {
  0% {
    margin-left: 0%;
    width: 30px;
  }

  50% {
    width: 100px;
  }

  90% {
    margin-left: 100%;
    width: 50px
  }
}

/* nav bar */
/* nav bar */
/* nav bar */
/* nav bar */
/* nav bar */
.nav {
  z-index: 1000;
}

.nav span {
  display: inline-block;
}

.nav .mylink {
  cursor: pointer;
}

/* submenu */
.nav .expend {
  display: none;
  z-index: 1000;
  position: absolute;
  padding: 20px 10px 10px 20px;
  margin-top: 0px;
  min-width: 150px
}

.nav .expend a p {
  display: block;
  letter-spacing: 1px;
  padding: 0px 0px 10px 0;
  margin: 0
}

/* mobile side menu */
/* .nav .sidebar {border-radius: 0 0 0 0;z-index: 10500;display: none;animation: side 0.2s;padding: 0px;overflow-x: hidden;box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1);position: fixed;top: 0px;left: 0;width: 310px;height: 100%;
} */
/* transparent cover */
.nav .cover {
  display: none;
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.158);
  z-index: 1000;
  top: 0;
  left: 0
}

/* toggle button */
.nav .toggle {
  font-size: 19px;
  cursor: pointer;
  display: none;
  z-index: 1000
}

/* mobile links */
.anchor {
  display: block;
}

.fixed-bottom {
  display: none;
}

@media screen and (max-width:768px) {
  .fixed-bottom {
    display: block;
  }

  .nav #toggle41 {
    display: inline-block;
  }

  .nav #toggle42 {
    display: none;
  }

  .links {
    display: none
  }
}

/* swipable sidebar */
.container {
  position: fixed;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 999;
  -webkit-transition: left 0.2s ease-in-out;
  -moz-transition: left 0.2s ease-in-out;
  -ms-transition: left 0.2s ease-in-out;
  -o-transition: left 0.2s ease-in-out;
  transition: left 0.2s ease-in-out;
}

.container.open-sidebar {
  left: 300px;
}

.swipe-area {
  position: absolute;
  width: 20px;
  left: 0;
  top: 85px;
  bottom: 70px;
  background: #ffffff00;
  z-index: 0;
}

#sidebar {
  background: #ffffff;
  position: absolute;
  width: 300px;
  height: 100%;
  left: -300px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

/* common */
/* common */
/* common */
/* common */
/* common */
/* @font-face{
  font-family:myfont;
  src:url(Fonseca.otf);
} */
:root {
  /* font-families */
  --heading: "Poppins", sans-serif !important;
  --font-one: "Poppins", sans-serif !important;
  --font-two: "Poppins", sans-serif !important;
  --font-three: "Poppins", sans-serif !important;
  --font-four: "Poppins", sans-serif !important;

  /*section padding*/
  --section-padding-top: 60px;
  --section-padding-bottom: 60px;
}

* {
  box-sizing: border-box;
}

.splide__pagination {
  display: none;
}

/* sizes */
.fixed {
  max-width: 1600px;
  margin: auto;
  overflow-x: hidden;
}

.wide {
  max-width: 1900;
  margin: auto;
  overflow-x: hidden;
}

.full {
  max-width: 2200px;
  margin: auto;
  overflow-x: hidden;
}

/* section padding */
/* section{padding-top:var(--section-padding-top);padding-bottom:var(--section-padding-bottom);} */
* {
  font-family: var(--font-one);
}

.font-tdb-one {
  font-family: var(--heading) !important;
}

.font-tdb-two {
  font-family: var(--font-one) !important;
}

.font-tdb-three {
  font-family: var(--font-three) !important;
}


h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading) !important;
  margin: 0px 0px 0px 0px
}

p {
  margin: 0px 0 0px 0
}

* {
  -webkit-tap-highlight-color: transparent;
  background-repeat: no-repeat;
  box-sizing: border-box !important;
}

a {
  color: inherit;
  transition: 0.3s;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  opacity: 0.8;
}

a:active {
  opacity: 1
}

/* fixed bottom */
/* fixed bottom */
/* fixed bottom */
/* fixed bottom */



/* circular progress bar */
/* circular progress bar */
/* circular progress bar */
.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
}

.circle {
  fill: none;
  stroke-width: 3.8;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.percentage {
  fill: #666;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
}

/*pagination*/
/*pagination*/
.arrow {
  border: solid var(--color-one) 1px;
  border-radius: 0%;
  width: 35px;
  height: 35px;
  padding: 5px !important;
}

.arrow:hover {
  background-color: var(--color-one);
  color: rgb(255, 255, 255);
  border: solid var(--color-one) 1px;
}


input[type=range].slider5 {
  -webkit-appearance: none;
  margin: 5px 0;
  background: rgb(203, 203, 203);
  border-radius: 1em;
}

input[type=range].slider5::-webkit-slider-runnable-track {
  cursor: pointer;
  background: var(--color-one);
  border-radius: 1em;
  border: 1px var(--color-one);
  height: 8px;
}

input[type=range].slider5:focus {
  outline: none;
  background: var(--color-one);
  border-radius: 1em;
}

input[type=range].slider5::-webkit-slider-thumb {
  /* box-shadow: 1.7px 1.7px 1.6px #730000, 0px 0px 1.7px #8d0000; */
  border: 2px solid var(--color-one);
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: var(--color-one);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
}

/* input[type=range].slider5:focus::-webkit-slider-runnable-track {
                background: #c0c0c0;
                } */


/* pulse */
.pulse {
  transform: scale(1);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
  }

  50% {
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.2);
  }

  100% {
    box-shadow: 0 0 0 30px rgba(0, 0, 0, 0);
  }
}




/* slider */

/* Next & previous buttons */
.prev,
.next,
.prev1,
.next1 {
  background-color: transparent;
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: 30px;
  height: 30px;
  margin-top: -10px;
  padding: 8px;
  text-align: center;
  color: rgb(94, 94, 94);
  font-weight: bold;
  font-size: 10px;
  transition: 0.6s ease;
  border-radius: 50%;
  user-select: none;
}

/* Position the "next button" to the right */
.next,
.next1 {
  right: 10px;
  border-radius: 50%;
}

.prev,
.prev1 {
  left: 10px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover,
.prev1:hover,
.next1:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;

  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot,
.dot1 {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.active1,
.dot:hover,
.dot1:hover {
  background-color: #717171;
}

/* Fading animation */
.fade,
.fade1 {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: .4
  }

  to {
    opacity: 1
  }
}

@keyframes fade {
  from {
    opacity: .4
  }

  to {
    opacity: 1
  }
}

/* animation */
.updown {
  animation: upDown 4s ease-in-out infinite
}

@keyframes upDown {
  0% {
    transform: translate3d(0, 10px, 0)
  }

  50% {
    transform: translateZ(0)
  }

  to {
    transform: translate3d(0, 10px, 0)
  }
}

/* splide.js */
@keyframes splide-loading {
  0% {
    transform: rotate(0)
  }

  to {
    transform: rotate(1turn)
  }
}

.splide__container {
  position: relative;
  box-sizing: border-box
}

.splide__list {
  margin: 0 !important;
  padding: 0 !important;
  width: -webkit-max-content;
  width: max-content;
  will-change: transform
}

.splide.is-active .splide__list {
  display: flex
}

.splide__pagination {
  display: inline-flex;
  align-items: center;
  width: 95%;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0
}

.splide__pagination li {
  list-style-type: none;
  display: inline-block;
  line-height: 1;
  margin: 0
}

.splide {
  visibility: hidden
}

.splide,
.splide__slide {
  position: relative;
  outline: none
}

.splide__slide {
  box-sizing: border-box;
  list-style-type: none !important;
  margin: 0;
  flex-shrink: 0
}

.splide__slide img {
  vertical-align: bottom
}

.splide__slider {
  position: relative
}

.splide__spinner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #999;
  border-left-color: transparent;
  animation: splide-loading 1s linear infinite
}

.splide__track {
  position: relative;
  z-index: 0;
  overflow: hidden
}

.splide--draggable>.splide__track>.splide__list>.splide__slide {
  -webkit-user-select: none;
  user-select: none
}

.splide--fade>.splide__track>.splide__list {
  display: block
}

.splide--fade>.splide__track>.splide__list>.splide__slide {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0
}

.splide--fade>.splide__track>.splide__list>.splide__slide.is-active {
  position: relative;
  z-index: 1;
  opacity: 1
}

.splide--rtl {
  direction: rtl
}

.splide--ttb>.splide__track>.splide__list {
  display: block
}

.splide--ttb>.splide__pagination {
  width: auto
}

.splide__arrow {
  /* display: none; */
  color: white !important;
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  width: 2em;
  height: 2em;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
  opacity: .7;
  background: none;
  /* background: rgba(192, 192, 192, 0.411) */
}

.splide__arrow svg {
  width: 0.7em;
  height: 0.7em;
  fill: white !important
}

.splide__arrow:hover {
  cursor: pointer;
  opacity: .9
}

.splide__arrow:focus {
  outline: none
}

.splide__arrow--prev {
  left: 1em
}

.splide__arrow--prev svg {
  transform: scaleX(-1)
}

.splide__arrow--next {
  right: 1em
}

.splide__pagination {
  position: absolute;
  z-index: 1;
  bottom: .5em;
  left: 50%;
  transform: translateX(-50%);
  padding: 0
}

.splide__pagination__page {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #ccc;
  border-radius: 50%;
  margin: 3px;
  padding: 0;
  transition: transform .2s linear;
  border: none;
  opacity: .7
}

.splide__pagination__page.is-active {
  transform: scale(1.4);
  background: #fff
}

.splide__pagination__page:hover {
  cursor: pointer;
  opacity: .9
}

.splide__pagination__page:focus {
  outline: none
}

.splide__progress__bar {
  width: 0;
  height: 3px;
  background: #ccc
}

.splide--nav>.splide__track>.splide__list>.splide__slide {
  border: 3px solid transparent
}

.splide--nav>.splide__track>.splide__list>.splide__slide.is-active {
  border-color: #000
}

.splide--nav>.splide__track>.splide__list>.splide__slide:focus {
  outline: none
}

.splide--rtl>.splide__arrows .splide__arrow--prev,
.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev {
  right: 1em;
  left: auto
}

.splide--rtl>.splide__arrows .splide__arrow--prev svg,
.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev svg {
  transform: scaleX(1)
}

.splide--rtl>.splide__arrows .splide__arrow--next,
.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next {
  left: 1em;
  right: auto
}

.splide--rtl>.splide__arrows .splide__arrow--next svg,
.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next svg {
  transform: scaleX(-1)
}

.splide--ttb>.splide__arrows .splide__arrow,
.splide--ttb>.splide__track>.splide__arrows .splide__arrow {
  left: 50%;
  transform: translate(-50%)
}

.splide--ttb>.splide__arrows .splide__arrow--prev,
.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev {
  top: 1em
}

.splide--ttb>.splide__arrows .splide__arrow--prev svg,
.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev svg {
  transform: rotate(-90deg)
}

.splide--ttb>.splide__arrows .splide__arrow--next,
.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next {
  top: auto;
  bottom: 1em
}

.splide--ttb>.splide__arrows .splide__arrow--next svg,
.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next svg {
  transform: rotate(90deg)
}

.splide--ttb>.splide__pagination {
  display: flex;
  flex-direction: column;
  bottom: 50%;
  left: auto;
  right: .5em;
  transform: translateY(50%)
}


.pp {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1039%26quot%3b)' fill='none'%3e%3cpath d='M859.7809425833668 224.03875687485768L864.6616584634287 363.80417301825685 1004.4270746068278 358.9234571381951 999.546358726766 219.15804099479587z' fill='rgba(28%2c 83%2c 142%2c 0.05)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1179.567%2c591.667C1214.19%2c593.472%2c1250.808%2c584.443%2c1269.522%2c555.258C1289.552%2c524.02%2c1288.528%2c483.258%2c1269.515%2c451.391C1250.945%2c420.267%2c1215.798%2c405.423%2c1179.567%2c404.485C1141.355%2c403.496%2c1099.019%2c412.711%2c1081.174%2c446.515C1064.024%2c479.001%2c1083.903%2c516.247%2c1104.515%2c546.654C1122.058%2c572.534%2c1148.343%2c590.039%2c1179.567%2c591.667' fill='rgba(28%2c 83%2c 142%2c 0.05)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M752.07 375.51 a149.29 149.29 0 1 0 298.58 0 a149.29 149.29 0 1 0 -298.58 0z' fill='rgba(28%2c 83%2c 142%2c 0.05)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M593.824%2c429.049C621.179%2c428.151%2c638.305%2c402.09%2c650.635%2c377.655C661.496%2c356.13%2c665.318%2c331.41%2c653.772%2c310.244C641.743%2c288.192%2c618.942%2c273.731%2c593.824%2c273.507C568.326%2c273.279%2c544.932%2c287.185%2c531.993%2c309.157C518.855%2c331.468%2c518.299%2c358.596%2c530.167%2c381.608C543.168%2c406.817%2c565.475%2c429.979%2c593.824%2c429.049' fill='rgba(28%2c 83%2c 142%2c 0.05)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M413.470139087377 109.7304313684408L320.864487419869 237.19117605704997 448.3252321084782 329.79682772455794 540.9308837759861 202.33608303594877z' fill='rgba(28%2c 83%2c 142%2c 0.05)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1207.790424073751 99.56615604901918L1060.9432803931952 174.21231710281864 1180.3249833269947 254.73629248681905z' fill='rgba(28%2c 83%2c 142%2c 0.05)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M330.30145124256023 442.0362327531265L231.2027332575603 395.8257416433786 184.99224214781236 494.9244596283785 284.0909601328123 541.1349507381265z' fill='rgba(28%2c 83%2c 142%2c 0.05)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M977.05 376.22 a98.08 98.08 0 1 0 196.16 0 a98.08 98.08 0 1 0 -196.16 0z' fill='rgba(28%2c 83%2c 142%2c 0.05)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M112.29 90.74 a136.85 136.85 0 1 0 273.7 0 a136.85 136.85 0 1 0 -273.7 0z' fill='rgba(28%2c 83%2c 142%2c 0.05)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1325.5378069787623 312.9523311209228L1373.5262102742718 469.9153256969129 1530.4892048502618 421.92692240140354 1482.5008015547523 264.9639278254134z' fill='rgba(28%2c 83%2c 142%2c 0.05)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M982.9556393354985 210.81142400292237L1110.3634120906067 140.1881423393285 1039.740130427013 12.780369584220352 912.3323576719047 83.40365124781422z' fill='rgba(28%2c 83%2c 142%2c 0.05)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M277.89 32.25 a115.3 115.3 0 1 0 230.6 0 a115.3 115.3 0 1 0 -230.6 0z' fill='rgba(28%2c 83%2c 142%2c 0.05)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M807.01 96.29 a130.97 130.97 0 1 0 261.94 0 a130.97 130.97 0 1 0 -261.94 0z' fill='rgba(28%2c 83%2c 142%2c 0.05)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M775.2462567926104 401.2722295921572L677.0312655846785 392.67953127316486 713.2497137101559 544.2983672445591z' fill='rgba(28%2c 83%2c 142%2c 0.05)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M272.78586508388656 309.57285189125935L201.02775019581998 190.14729359089893 81.60219189545955 261.9054084789655 153.36030678352614 381.33096677932593z' fill='rgba(28%2c 83%2c 142%2c 0.05)' class='triangle-float1'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1039'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
  background-position: center top;
}

.swal-modal,
.kk {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1400' height='1000' preserveAspectRatio='none' viewBox='0 0 1400 1000'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1158%26quot%3b)' fill='none'%3e%3crect width='1400' height='1000' x='0' y='0' fill='rgba(142, 197, 121, 0.13)'%3e%3c/rect%3e%3cpath d='M197.9961732736271 537.0320799245353L101.66098959126312 743.6235480199243 404.5876413690162 633.3672636068993z' fill='rgba(197%2c 168%2c 121%2c 0.13)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M586.7136111655649 456.7972129774619L586.7136111655649 600.8707060600896 802.8238507895064 528.8339595187757z' fill='rgba(197%2c 168%2c 121%2c 0.13)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M507.1714597280199 829.5524401840147L379.5992430983139 640.4188511421606 318.0378706861659 957.1246568137208z' fill='rgba(197%2c 168%2c 121%2c 0.13)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M-38.40519115227973 117.96414904851099L86.9469514816674 226.93110419704914 187.72131288750109-15.58058732814061z' fill='rgba(197%2c 168%2c 121%2c 0.13)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M281.06160488726243 347.6237185641463L257.5565388207658 245.8120919736606 116.59163196828561 331.9755043686485z' fill='rgba(197%2c 168%2c 121%2c 0.13)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M620.5577281143032 210.44078697907506L695.9044404083216 120.64607191251633 523.5390116614744 52.52336100476816z' fill='rgba(197%2c 168%2c 121%2c 0.13)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M931.7385136165088 261.9759618913583L864.5578813960128 436.9874922481886 1106.7500439733392 329.1565941118543z' fill='rgba(197%2c 168%2c 121%2c 0.13)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1190.004458301841 228.15422601136203L1272.7451698063733 300.07962919973033 1339.2629188366595 140.0058603487479z' fill='rgba(197%2c 168%2c 121%2c 0.13)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M793.8973350750604 343.08225322742624L847.5063443975064 482.7384971823982 1030.1862056687412 332.4968612212432z' fill='rgba(197%2c 168%2c 121%2c 0.13)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1200.8881702731342 313.2118388132657L1255.0720681594426 124.25013070095295 1011.9264621608214 259.02794092695734z' fill='rgba(197%2c 168%2c 121%2c 0.13)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1067.5891122067587 607.7857076932238L1298.7555417669466 661.3867831717325 1241.578162366482 461.98556438958065z' fill='rgba(197%2c 168%2c 121%2c 0.13)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M958.9714981156749 805.4375173121174L988.9979551817793 1091.120173108102 1244.6541539116595 775.411060246013z' fill='rgba(197%2c 168%2c 121%2c 0.13)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M565.3822867547559 749.740045127615L360.4941605783487 915.3321211796992 574.0123099949257 1001.599053235786z' fill='rgba(197%2c 168%2c 121%2c 0.13)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1174.621975658507 940.6605669246925L1227.5936681863316 1054.258728141717 1371.505063747956 918.0021087414676z' fill='rgba(197%2c 168%2c 121%2c 0.13)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M678.9774869360006 790.4677591002618L581.7783215103423 856.0294240098442 728.7204015875451 969.0473396935404z' fill='rgba(197%2c 168%2c 121%2c 0.13)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M952.7118293064374 843.3878764221561L1105.5813346366956 875.8812928593528 985.2052457436341 690.5183710918977z' fill='rgba(197%2c 168%2c 121%2c 0.13)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1352.807520712445 740.3631943880539L1413.262005732128 597.9413528297771 1169.402000884871 578.4705460793909z' fill='rgba(197%2c 168%2c 121%2c 0.13)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M609.6621879923923 782.9614969689736L430.6924811163801 666.4945670538789 417.6718724965489 852.6979453853529z' fill='rgba(197%2c 168%2c 121%2c 0.13)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M631.8000492471142 419.19293067691655L413.0455346804707 407.5194315406904 496.9927019018353 579.6366309843536z' fill='rgba(197%2c 168%2c 121%2c 0.13)' class='triangle-float1'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1158'%3e%3crect width='1400' height='1000' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
  background-size: cover;
}

.nvv {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1015%26quot%3b)' fill='none'%3e%3cpath d='M 0%2c357 C 57.6%2c292.8 172.8%2c2.2 288%2c36 C 403.2%2c69.8 460.8%2c523.6 576%2c526 C 691.2%2c528.4 748.8%2c75.2 864%2c48 C 979.2%2c20.8 1036.8%2c347.2 1152%2c390 C 1267.2%2c432.8 1382.4%2c287.6 1440%2c262L1440 560L0 560z' fill='rgba(24%2c 74%2c 126%2c 0.09)'%3e%3c/path%3e%3cpath d='M 0%2c550 C 22.2%2c461.4 66.6%2c134.4 111%2c107 C 155.4%2c79.6 177.6%2c415 222%2c413 C 266.4%2c411 288.6%2c111.6 333%2c97 C 377.4%2c82.4 399.6%2c310.6 444%2c340 C 488.4%2c369.4 510.6%2c233.6 555%2c244 C 599.4%2c254.4 621.6%2c407 666%2c392 C 710.4%2c377 732.6%2c163 777%2c169 C 821.4%2c175 843.6%2c436.6 888%2c422 C 932.4%2c407.4 954.6%2c72.2 999%2c96 C 1043.4%2c119.8 1065.6%2c524.2 1110%2c541 C 1154.4%2c557.8 1176.6%2c205 1221%2c180 C 1265.4%2c155 1288.2%2c429 1332%2c416 C 1375.8%2c403 1418.4%2c175.2 1440%2c115L1440 560L0 560z' fill='rgba(34%2c 100%2c 171%2c 0.08)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1015'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
  background-position: center center;
  background-size: cover
}

/* .pp {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1400' height='1000' preserveAspectRatio='none' viewBox='0 0 1400 1000'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1006%26quot%3b)' fill='none'%3e%3crect width='1400' height='1000' x='0' y='0' fill='rgba(142, 197, 121, 0.13)'%3e%3c/rect%3e%3cpath d='M907.73 64.13 a203.49 203.49 0 1 0 406.98 0 a203.49 203.49 0 1 0 -406.98 0z' fill='rgba(121%2c 146%2c 197%2c 0.13)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M413.534%2c861.629C471.672%2c863.495%2c529.378%2c841.958%2c561.346%2c793.362C596.696%2c739.625%2c610.543%2c668.507%2c576.459%2c613.958C543.772%2c561.644%2c475.17%2c554.313%2c413.534%2c556.8C357.221%2c559.072%2c300.209%2c577.517%2c271.892%2c626.246C243.457%2c675.178%2c252.109%2c735.884%2c281.289%2c784.375C309.502%2c831.259%2c358.844%2c859.874%2c413.534%2c861.629' fill='rgba(121%2c 146%2c 197%2c 0.13)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M139.626%2c1198.658C208.353%2c1201.348%2c283.472%2c1185.752%2c318.019%2c1126.278C352.676%2c1066.615%2c330.734%2c992.491%2c292.904%2c934.787C258.98%2c883.042%2c201.492%2c853.181%2c139.626%2c854.167C79.504%2c855.125%2c25.563%2c888.006%2c-5.421%2c939.539C-37.451%2c992.812%2c-46.48%2c1058.96%2c-16.118%2c1113.201C14.883%2c1168.583%2c76.207%2c1196.176%2c139.626%2c1198.658' fill='rgba(121%2c 146%2c 197%2c 0.13)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M-106.78 253.45 a260.61 260.61 0 1 0 521.22 0 a260.61 260.61 0 1 0 -521.22 0z' fill='rgba(121%2c 146%2c 197%2c 0.13)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M996.02 239.49 a320.55 320.55 0 1 0 641.1 0 a320.55 320.55 0 1 0 -641.1 0z' fill='rgba(121%2c 146%2c 197%2c 0.13)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M24.09 248.23 a175.88 175.88 0 1 0 351.76 0 a175.88 175.88 0 1 0 -351.76 0z' fill='rgba(121%2c 146%2c 197%2c 0.13)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M142.636%2c649.811C183.873%2c648.732%2c217.454%2c619.442%2c236.819%2c583.019C254.941%2c548.934%2c253.35%2c509.25%2c235.592%2c474.974C216.091%2c437.334%2c184.945%2c403.88%2c142.636%2c401.227C96.082%2c398.307%2c49.554%2c421.05%2c27.025%2c461.894C5.128%2c501.592%2c15.759%2c549.565%2c39.515%2c588.179C62.005%2c624.735%2c99.731%2c650.933%2c142.636%2c649.811' fill='rgba(121%2c 146%2c 197%2c 0.13)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M773.162%2c1172.037C848.392%2c1169.276%2c918.565%2c1133.921%2c957.108%2c1069.255C996.604%2c1002.989%2c998.711%2c921.827%2c963.072%2c853.409C924.395%2c779.158%2c856.88%2c715.423%2c773.162%2c716.12C690.331%2c716.81%2c629.586%2c784.514%2c588.654%2c856.528C548.323%2c927.484%2c523.046%2c1013.216%2c564.247%2c1083.67C605.157%2c1153.626%2c692.177%2c1175.009%2c773.162%2c1172.037' fill='rgba(121%2c 146%2c 197%2c 0.13)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1422.902%2c744.77C1488.867%2c749.574%2c1557.457%2c721.346%2c1589.135%2c663.286C1619.819%2c607.048%2c1598.857%2c539.617%2c1564.252%2c485.703C1532.774%2c436.66%2c1481.119%2c406.912%2c1422.902%2c404.294C1359.183%2c401.429%2c1288.116%2c415.867%2c1257.673%2c471.916C1228.055%2c526.446%2c1261.764%2c588.706%2c1293.907%2c641.786C1324.453%2c692.229%2c1364.087%2c740.487%2c1422.902%2c744.77' fill='rgba(121%2c 146%2c 197%2c 0.13)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1147.61 653.84 a179.6 179.6 0 1 0 359.2 0 a179.6 179.6 0 1 0 -359.2 0z' fill='rgba(121%2c 146%2c 197%2c 0.13)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M399.096%2c899.882C495.956%2c901.637%2c603.757%2c894.944%2c656.105%2c813.429C711.566%2c727.067%2c693.481%2c613.508%2c638.772%2c526.667C587.626%2c445.482%2c494.876%2c399.706%2c399.096%2c405.471C312.104%2c410.707%2c249.792%2c478.235%2c204.678%2c552.798C157.343%2c631.033%2c113.04%2c724.622%2c157.727%2c804.399C203.046%2c885.306%2c306.376%2c898.202%2c399.096%2c899.882' fill='rgba(121%2c 146%2c 197%2c 0.13)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M457.539%2c843.164C524.374%2c848.059%2c590.462%2c811.569%2c621.595%2c752.226C650.984%2c696.207%2c629.116%2c631.494%2c597.262%2c576.839C565.701%2c522.686%2c520.182%2c472.869%2c457.539%2c470.74C391.769%2c468.505%2c329.231%2c507.622%2c300.34%2c566.749C274.165%2c620.318%2c300.946%2c679.073%2c330.42%2c730.9C360.373%2c783.568%2c397.111%2c838.738%2c457.539%2c843.164' fill='rgba(121%2c 146%2c 197%2c 0.13)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M759.43 915.94 a284.43 284.43 0 1 0 568.86 0 a284.43 284.43 0 1 0 -568.86 0z' fill='rgba(121%2c 146%2c 197%2c 0.13)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1064.564%2c955.229C1134.117%2c950.272%2c1197.798%2c919.286%2c1235.16%2c860.412C1275.655%2c796.602%2c1294.491%2c716.415%2c1258.183%2c650.133C1220.689%2c581.686%2c1142.584%2c547.039%2c1064.564%2c548.981C989.875%2c550.841%2c927.434%2c596.58%2c886.954%2c659.375C841.963%2c729.168%2c803.184%2c816.957%2c845.924%2c888.151C887.978%2c958.203%2c983.065%2c961.037%2c1064.564%2c955.229' fill='rgba(121%2c 146%2c 197%2c 0.13)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M116.67 769.62 a315.33 315.33 0 1 0 630.66 0 a315.33 315.33 0 1 0 -630.66 0z' fill='rgba(121%2c 146%2c 197%2c 0.13)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M598.07 532.57 a206.74 206.74 0 1 0 413.48 0 a206.74 206.74 0 1 0 -413.48 0z' fill='rgba(121%2c 146%2c 197%2c 0.13)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M654.399%2c911.928C716.181%2c911.148%2c761.892%2c860.902%2c791.714%2c806.788C820.296%2c754.924%2c832.965%2c692.793%2c803.457%2c641.45C773.864%2c589.959%2c713.785%2c568.426%2c654.399%2c567.866C593.855%2c567.295%2c531.22%2c586.481%2c500.389%2c638.591C469.087%2c691.498%2c480.767%2c756.777%2c510.943%2c810.334C541.772%2c865.049%2c591.601%2c912.721%2c654.399%2c911.928' fill='rgba(121%2c 146%2c 197%2c 0.13)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M214.67 274.51 a170.87 170.87 0 1 0 341.74 0 a170.87 170.87 0 1 0 -341.74 0z' fill='rgba(121%2c 146%2c 197%2c 0.13)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M790.103%2c449.914C883.756%2c455.421%2c986.243%2c434.301%2c1034.489%2c353.842C1083.735%2c271.716%2c1056.12%2c169.73%2c1007.624%2c87.16C959.877%2c5.865%2c884.382%2c-62.564%2c790.103%2c-62.251C696.262%2c-61.939%2c617.757%2c5.025%2c575.071%2c88.597C536.12%2c164.856%2c547.103%2c254.173%2c590.896%2c327.758C633.592%2c399.499%2c706.762%2c445.013%2c790.103%2c449.914' fill='rgba(121%2c 146%2c 197%2c 0.13)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M734.328%2c289.335C791.527%2c286.853%2c838.385%2c246.914%2c864.613%2c196.022C888.632%2c149.416%2c882.722%2c95.638%2c857.975%2c49.415C831.501%2c-0.033%2c790.343%2c-44.451%2c734.328%2c-47.325C673.89%2c-50.426%2c617.415%2c-16.573%2c586.561%2c35.489C555.087%2c88.598%2c551.808%2c154.895%2c582.866%2c208.249C613.745%2c261.295%2c673.007%2c291.996%2c734.328%2c289.335' fill='rgba(121%2c 146%2c 197%2c 0.13)' class='triangle-float2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1006'%3e%3crect width='1400' height='1000' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
            background-size: cover;
        } */

#navbar {

  transition: top 0.3s;
}

.fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.8);
  /* border-bottom: solid rgb(223, 153, 3) 2px; */
  color: rgba(34, 34, 34, 1);
  /* blur */
  backdrop-filter: blur(5px);
}

.sidebar {
  /* background-color: #ffffff; */
  position: fixed;
  top: 0px;
  left: 0;
  width: 300px;
  height: 100%;
  /*left: -300px;*/
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  z-index: 10000;
}


.swal-modal {
  border-radius: 20px !important;
}

.swal-button--confirm {
  background-color: #17376e;
}

.swal-button--danger {
  background-color: red !important;
}

.swal-button--cancel {
  color: white;

}


/* Base styles (Mobile First) */
h1 {
  font-size: 1.8rem;
  /* ~28px */
  line-height: 2.4rem;
  /* ~38px */
  font-weight: bold;
  margin-bottom: 1rem;
}



/* Tablets (≥ 600px) */
@media (min-width: 600px) {

  h1 {
    font-size: 2.2rem;
    /* ~35px */
    line-height: 2.8rem;
    /* ~45px */
  }
}

/* Small Laptops (≥ 768px) */
@media (min-width: 768px) {

  h1 {
    font-size: 2.5rem;
    /* ~40px */
    line-height: 3.2rem;
    /* ~51px */
  }
}

/* Desktops (≥ 1024px) */
@media (min-width: 1024px) {

  h1 {
    font-size: 3rem;
    /* ~48px */
    line-height: 3.6rem;
    /* ~58px */
  }
}

/* Large Screens (≥ 1440px) */
@media (min-width: 1440px) {

  h1 {
    font-size: 3.5rem;
    /* ~56px */
    line-height: 4.2rem;
    /* ~67px */
  }
}


.circles {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
  background-color: transparent;
  border-radius: 100%;
}

.circle-1 {
  border: 3px solid #000;
  -webkit-animation: circle1 5s ease infinite;
  -moz-animation: circle1 5s ease infinite;
  -ms-animation: circle1 5s ease infinite;
  -o-animation: circle1 5s ease infinite;
  animation: circle1 5s ease infinite;
}

.circle-2 {
  box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.5);
  -webkit-animation: circle2 5s ease infinite;
  -moz-animation: circle2 5s ease infinite;
  -ms-animation: circle2 5s ease infinite;
  -o-animation: circle2 5s ease infinite;
  animation: circle2 5s ease infinite;
}