@font-face {
  font-family: 'Atop';
  src: url(Atop.ttf);
}

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

.left{
  float: left;
}
.right{
   float: right;
}
html{
  width: 100vw;
  overflow-x: hidden;
}
body {
    background: #ff4900;
}
a{
  text-decoration: none;
  color: #fff;
  font-family: "Archivo", sans-serif;
}

a:hover{
  color: #ff4900;
}
.navbar {
    position: fixed;
    width: 100vw;
    /* background: url(../img/glaze.png); */
    z-index: 2;
}
.navbar-main {
    padding: 1% 3%;
    width: 100%;
}
.glaze {
    width: 90%;
    position: absolute;
    top: -27px;
    left: 8%;
}

.min-hand{
  animation-name: min-rotate;
  animation-duration: 36s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.hour-hand{
  animation-name: hand-rotate;
 animation-duration: 3s;
 animation-timing-function: linear;
   animation-iteration-count: infinite;
}
@keyframes hand-rotate{

  0%{
    rotate:0deg;
  }
  8.3%{
    rotate:30deg;
  }
  16.6%{
    rotate:60deg;
  }
  24.9%{
    rotate:90deg;
  }
  33.2%{
    rotate:120deg;
  }
  41.5%{
    rotate:150deg;
  }
  49.8%{
    rotate:180deg;
  }
  58.1%{
    rotate:210deg;
  }
  66.4%{
    rotate:240deg;
  }
  74.7%{
    rotate:270deg;
  }
  83%{
    rotate:300deg;
  }
  91.3%{
    rotate:330deg;
  }
  100%{
    rotate:360deg;
  }
}

@keyframes min-rotate{

  from{
    rotate:0deg;
  }

  to{
    rotate:360deg;
  }
}

/*
_________________________________________________________________________________
Hero
_________________________________________________________________________________
 */

 #Hero .left-hero-section {
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
     height: 100vh;
     align-content: center;
     justify-content: center;
     align-items: flex-start;
 }
 #Hero .circle-img {
     position: absolute;
     width: 520px;
     right: -84px;
     bottom: -108px;
 }
 #Hero .right-hero-section{
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 100vh;
}
 #Hero .right-hero-section .slider-donut-section ,
 #Hero .right-hero-section .hand-donut-section{
   position: absolute;
 }
 #Hero .right-hero-section .hand-donut-section img{
    width: 50%;
  }
  #Hero .right-hero-section .slider-donut-section img {
      width: 48%;
      /* opacity: 0.4; */
  }

#Hero .dots {
    width: 80%;
    position: relative;
    z-index: 1;
}

#Hero .left-hero-section h1 {
    color: #ffe9d3;
    font-size: 70px;
    margin-bottom: 70px;
    font-family: 'Atop';
    margin-top: 179px;
}
#Hero .right-hero-section p{
    position: absolute;
    right: 50px;
    bottom: 25px;
    color: #ff4900;
    font-size: 37px;
    font-family: 'Atop';
}
 #Hero .left-hero-section p {
     color: #ffe9d3;
     font-size: 23px;
     font-family: 'Atop';
     margin-top: 30px;
 }
 #Hero .left-hero-section p span{
    color: #ffd037;
}


#Hero .left-hero-section a{
    background: #ff6572;
    padding: 18px 27px;
    font-weight: 900;
    border-radius: 38px 38px;
}
.left-donut-bg {
    position: fixed;
    width: 500px;
    left: -250px;
    top: 83vh;
}
}



  @media (max-width: 1441px){
    .glaze {
        width: 100%;
        position: absolute;
        top: -4px;
        left: 2%;
    }
    .logo{
        width: 140px;
    }
    #Hero .dots {
        width: 100%;
        position: relative;
        z-index: 1;
    }
    #Hero .right-hero-section .slider-donut-section img {
        width: 67%;
    }
    #Hero .right-hero-section .hand-donut-section img {
        width: 60%;
    }
    #Hero .right-hero-section p {
        position: absolute;
        right: 50px;
        bottom: 25px;
        color: #ff4900;
        font-size: 49px;
        font-family: 'Atop';
    }
    #Hero .circle-img {
        position: fixed;
        width: 520px;
        right: -84px;
        bottom: -108px;
    }
    #Hero .left-hero-section {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        height: 100vh;
        padding: 18px;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
    }
    #Hero .left-hero-section a {
        font-size: 20px;
    }
    #Hero .left-hero-section p {
        font-size: 32px;
    }
    .menuicon{
      width: 100px;
    }
    .left-donut-bg {
      position: absolute;
      width: 500px;
      left: -250px;
      top: 83vh;
    }
  }


.w-14{
  width: 14.2%;
}
.donut-section-title {
    font-family: 'Atop';
    letter-spacing: 1px;
    /* font-size: 1.5rem; */
    margin-bottom: 30px;
}
.donut-menu-section{
    text-align: center;
    color: #ffce34;
    margin-top: 70px;
}
.donut-price{
    margin-bottom: 0;
}
.donut-menu {
    width: 94%;
    margin-bottom: 6%;
    padding: 6%;
    height: 270px;
    font-family: 'Atop';
    color: #ffe8d2;
    text-align: center;
    font-size: 1.4rem;
    letter-spacing: 1px;
    border-radius: 10px;
}
.text-left{
    text-align: left;
}
.Contact-right-section {
    background: #d08b2c;
    font-family: 'Atop';
    padding: 15px;
}
.menu-image {
    width: 80%;
    margin-bottom: 11px;
}

.right{
  float: right;
}

@media (max-width: 460px){
  .glaze {
      width: 100%;
      position: absolute;
      top: 0px;
      left: 37%;
      -webkit-transform: scaleX(-1);
      transform: scaleX(-1);
  }

  #Hero .left-hero-section h1 {
      color: #ffe9d3;
      font-size: 35px;
      margin-bottom: 40px;
      width: 94vw;
      font-family: 'Atop';
      margin-top: 0px;
  }
  #Hero .left-hero-section {
      height: 10vh;
      text-align: center;
      z-index: 11;
      position: relative;
  }

  #Hero .circle-img {
      position: fixed;
      width: 300px;
      right: -84px;
      bottom: -108px;
  }
  .logo{
    width: 75px;
}
  #Hero .left-hero-section a {
    background: #ff6572;
    padding: 10px 21px;
    border-radius: 38px 38px;
    font-size: 11px;
    width: 94vw;
  }
  #Hero .left-hero-section p {
    color: #ffe9d3;
    font-size: 16px;
    font-family: 'Atop';
    margin-top: 19px;
    width: 94vw;
  }
  #Hero .left-hero-section div{
    width: 94vw;
  }
  .left-donut-bg {
    display: none;
  }
  #Hero .right-hero-section p {
    position: absolute;
    right: 33px;
    bottom: 25px;
    color: #ff4900;
    font-size: 17px;
    font-family: 'Atop';
  }

  #Hero .right-hero-section {
      height: 72vh;
  }

  .navbar-toggler, .menuicon  {
    display: none;
}

}