@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,800,900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  
  font-family: 'Poppins', sans-serif;
  background-color: #000;
}

.container {
  width: 100%;
}


.item1
{
width: 100%;
}
.item1 img{
    width: 100vw;
    height: 100vh;
}
.item2
{
width: 100%;
}
.item2 img{
    width: 100vw;
    height: 100vh;
}



.overlay-timer{
    position: absolute;
    z-index: 99;
    margin: auto;
    width: 100%;
    top: 50%;
}



.container h2 {
  font-weight: 500;
  color: #fff;
  text-align: center;
}

#countdown {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 0;
  -webkit-backdrop-filter: unset;
  backdrop-filter:unset;
}

#countdown .circle {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#countdown .circle svg {
  position: relative;
  width: 150px;
  height: 150px;
  transform: rotate(270deg);
}

#countdown .circle svg circle {
  width: 100%;
  height: 100%;
  fill: transparent;
  stroke-width: 4;
  stroke: #092c62;
  stroke-linecap: round;
  transform: translate(5px, 5px);
}

#countdown .circle svg circle:nth-child(2) {
  stroke: var(--clr);
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
}

#countdown div {
  position: absolute;
  text-align: center;
  font-weight: 500;
  color: #fff;
  font-size: 1.3em;
  line-height: 0.8em;
}

#countdown div span {
  font-size: 0.35em;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}



ion-icon[name="snow-outline"] {
  color: #fff;
  position: absolute;
  top: -20px;
  animation: fall linear forwards;
}



/* social/share menu */
.menu {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: flex-end;
  margin: 0 1em 1em 0;
  z-index: 9;
}

.menu #help {
  position: relative;
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333;
  cursor: pointer;
  font-size: 1.75em;
  transition: 1.25s;
}

.menu li span {
  text-transform: uppercase;
  color:#fff;
  text-align: center;
}

.menu.active .overlay {
  position: absolute;
  right: -1em;
  bottom: -1em;
  height: 100vh;
  width: 100vw;
  background: rgba(0, 0, 0, 0.5);
  transition: 0.5s;
}

.menu.active #help {
  transform: rotate(360deg);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15),
  0 0 0 2px #333,
  0 0 0 6px #fff;
}

.share-container {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
}

.social-container {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
}

.shareMenu {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.socialMenu {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.shareMenu li {
  padding: 0 0.75em 0 0;
}

.socialMenu li {
  padding: 0 0 0.75em;
}

.menu li,
.menu li {
  list-style: none;
  transition: 0.5s;
  scale: 0;
  transition-delay: calc(0.05s * var(--i));
}

.menu.active li,
.menu.active li {
  scale: 1;
}

.menu li a {
  display: flex;
  width: 45px;
  height: 45px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 1.4em;
  color: var(--clr);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
  transition: 0.5s;
}

.menu li:hover a {
  font-size: 1.6em;
  box-shadow: 0 0 0 2px var(--clr),
  0 0 0 6px #fff;
}

@media screen and (max-width: 600px) {
  #countdown .circle {
    width: 100px;
    height: 100px;
  }

  #countdown .circle svg {
    height: 100px;
    width: 100px;
  }

  #countdown .circle svg circle {
    cx: 45;
    cy: 45;
    r: 45;
    stroke-width: 5;
  }

  #countdown div {
    font-size: 1.25em;
  }
}

@media screen and (max-width: 300px) {
  .text {
    font-size: 25px;
  }
}



.banner{
  background-image: url(/new-2/images/bg-1.png);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  width: 100vw;
}

.mobile-img {
  position: relative;
  vertical-align: baseline;
}



.mobile-img img {
  width: 60%;
  margin: auto;
  display: block;
  margin-top: 10px;
}



.background-image {
  background-image: url(../images/bg-1.png);
}

.header-txt h1 {
  width: 100%;
  text-align: center;
  color: #fff;
  font-weight: 300;
  font-size: calc(16px + 2.5vw);
  letter-spacing: 3px;
  line-height: 1.1;
  padding: 2px 2px 2px 6px;
}
.header-txt span{
  font-size: 14px;
  color: #fff;
  font-weight: 200;
  display: block;
  margin-top: 15px;
  line-height: 20px;
}

.logo-img img {
 
  display: block;
  margin: auto;
  padding: 20px;
  width: calc(10rem + 100px);

}

@media screen and (max-width: 768px){
  .mobile-img img {
    width: 90%;
    margin-top: 4.2rem;

}
#countdown {

  gap: 4em;

  -webkit-backdrop-filter: unset;
  backdrop-filter: unset;
}

.countdown-sec {
  position: unset;
  bottom: unset;
  left: unset;
  transform: unset;
}
.background-image {
  height: unset;
}
}








@layer demo, countdown;

@layer countdown{
  .countdown {
    width: fit-content;
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 1rem;
  }
  .countdown > .part {
    display: grid;
    gap: 0.5rem;
  }
  .countdown > .part > .number {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid hsl(0 0% 50% / .5);
    font-size: 2rem;
    position: relative
  }
  .countdown > .part.days { --num: 365 }
  .countdown > .part.hours { --num: 24 }
  .countdown > .part:where(.minutes, .seconds) { --num: 60 }
  .countdown > .part > .number::after{
    content: "";
    position: absolute;
    inset: calc(var(--border-size) * -0.5);
    border-radius: inherit;

    --degree: calc(360deg / var(--num) * (var(--num) - var(--value,0)));
    background-image: conic-gradient(var(--accent) var(--degree), transparent calc(var(--degree) + 0.1deg));

    --border-size: 4px;  
    --mask-image: radial-gradient(100% 100%, transparent calc(50% - var(--border-size)), black calc(50% - var(--border-size) + 1px));
    -webkit-mask-image: var(--mask-image);
    mask-image: var(--mask-image);
  }
  .countdown > .part > .text {
    text-align: center;
    opacity: 0.75
  }
}
@layer demo {
  * { box-sizing: border-box }
  body {
    background-color: #060D1F;
    color: #FEFEFE;
    font-family: system-ui, sans-serif;
    text-align: center;
  }
  h2 {
    margin-top: 4rem;
  }
}
.header-txt {
  margin-bottom: 2rem;
}
.text {
  text-transform: capitalize;
}
h3.count-head {
  color: #fff;
  margin: 20px;
  font-size: 17px;
  font-weight: 300;
}
/* @media screen and (max-width: 667px){
.background-image {
    height: 100%;
}
} */

@media screen and (max-width: 991px){
  .mobile-img img {
      width: 90%;

  }
    }