@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

html,
    body{
    width:100%;
    overflow-x:hidden;
    } 
    
body{
    font-family: "Poppins", sans-serif !important;
}

.top-bar{
    background-color: transparent;
    color: white;
    border: 2px dotted white;
    border-radius: 25px;
}

.boldFont{
    font-weight: 800px !important;
    color: #FFBC00;
}

.heading5{
    /* font-family: "Poppins", sans-serif; */
    color: #fff;
    font-weight: 600;
    font-size: 26px;
    line-height: 34px;
    text-align: center;
}

.hero1{
    background: linear-gradient(0deg, rgba(2, 0, 0, 0.1), rgb(0, 0, 0)), url('bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center !important;
    padding: 0 150px !important;
}

.heading1{
    font-size: 44px;
    color: white;
    text-transform: uppercase;
    line-height: 1.3em;
    font-weight: 600px;
}

.heading2{
    font-size: 31px;
    color: white;
    font-weight: 500;
    line-height: 44px;
}

.headingx{
  font-size: 24px;
  color: #fff;
  font-weight: 700;
  line-height: 34px;
  word-spacing: 0;
  font-family: "Raleway", sans-serif;
}

.webinarDate{
    padding: 5px 0;
    font-size: 30px;
    width: 80% !important;
    margin: 0 auto;
    border-radius: 6px;
}
.afterWorkshop{
    padding-left: 3rem;
   }

.wd1{
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
}

.wd2{
    font-size: 16px;
    font-weight: 600;
}

.wdbg{
    border: 1px solid #fff;
    border-radius: 10px;
    color: white;
    background: linear-gradient(45deg, rgba(255, 247, 0, 0.4), rgb(0, 0, 0));
}

#countdown1, #countdown2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0 auto;
    padding: 10px;
  }

  #countdown3{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: auto 0;
    padding: 10px;
  }

  #minutes{
    margin: auto 8px;
  }
  
  .time {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* padding: 12px 70px !important; */
    border: 4px solid #FFBC00;
    border-radius: 10px;
    gap: 0px;
    background-color: white;
  }
  
  .time-number {
    font-size: 48px;
    color: #000;
    font-weight: bold;
  }
  
  .time-label {
    font-size: 1em;
    color: #000;
  }

  .time-number1 {
    font-size: 30px;
    color: #fff;
    font-weight: bold;
  }
  
  .time-label1 {
    font-size: 10px;
    color: #fff;
  }

  .animatedBtn{
    width: 90% !important;
    margin: 10px auto !important;

  }

  .btn-txt1{
    font-size: 32px;
    font-weight: 600;
    color: #fff;
  }

  .btn-txt2{
    font-size: 22px;
    font-weight: 400;
    color: #fff;
  }

    
  .btn {
    background-image: linear-gradient(60deg, #FFBC00, #fd770e, #EDCC5B) !important;
    -webkit-animation: animatedgradient 3s ease infinite alternate;
    animation: animatedgradient 3s ease infinite alternate;
    background-size: 300% 300%;
    border-radius: 7px;
    margin-bottom: 1em;
    box-shadow: #ebc467 0px 15px 10px -10px;
}

@keyframes animatedgradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
	 10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
   20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

.hero2{
    background-color: #181821;
    padding: 50px 150px !important;
}

.herox{
    background-color: #fff;
    padding: 50px 150px !important;
    color: #333;
}

.hero2text{
    font-size: 20px;
    font-weight: 500;
    text-align: left;
    width: 85%;
    font-family: "Raleway", sans-serif;
    line-height: 28px;
}

.hero7text{
    font-size: 16px;
    font-weight: 300;
    font-family: "Raleway", sans-serif;
    line-height: 20px;
}

.hero2box{
    border-left: 10px solid #FFBC00;
    padding: 20px;
    background-color: #090703;
}

.hero5box{
    border-left: 10px solid #FFBC00;
    border-radius: 10px;
    padding: 20px;
}

.hero3{
    background-color: #f6f6f6;
    padding: 50px 150px !important;
}

.hero4{
    background-color: #0c0c10;
    padding: 50px 150px !important;
}

.hero5{
    background-color: #fff;
    padding: 50px 150px !important;
}

.hero7{
    background-color: #0c0c10;
    margin: 0px auto !important;
}
  
.checkmark {
    display: block;
    width: 30px;
    height: 30px;
    background-color: #ddd;
    border-radius: 4px;
    position: relative;
    transition: background-color 0.4s;
    overflow: hidden;
    cursor: pointer;
   }
   
   #check:checked ~ .checkmark {
    background-color: #E99320;
   }
   
   .checkmark::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 15px;
    border-right: 3px solid #2d2d2d;
    border-bottom: 3px solid #2d2d2d;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%) rotateZ(40deg) scale(10);
    opacity: 0;
    transition: all 0.4s;
   }

   .gray-text{
    color: #9e9c9c;
   }
   
   #check:checked ~ .checkmark::after {
    opacity: 1;
    transform: translate(-50%, -50%) rotateZ(40deg) scale(1);
   }
    input.checkbox {
     width: 25px;
     height: 25px;
     vertical-align: middle;
   }
   .dG {
       background-image: linear-gradient(130deg,#A1ED4B 45%,#ffffff 60%,#EFE507 55%);
       -webkit-background-clip: text;
       background-clip: text;
       -webkit-text-fill-color: transparent;
       background-size: 200%;
       animation: shine 1s infinite;
   }
    @keyframes shine {
                   0% {
                       background-position: 100%
                   }
    to {
        background-position: 0
                   }
               }


   .checkWaalaBox{
    background-color: #fff;
    padding: 10px 20px;
    border-radius: 6px;
   }

   .hero3heading{
    font-size: 32px;
    font-weight: 400;
    font-family: "Raleway", sans-serif;
    line-height: 45px;
   }

   .bigHeading{
    font-size: 65px;
    line-height: 65px;
    font-weight: 700;
   }

   .highBox{
    border: 1px dashed #fdcf0a;
    border-radius: 10px;
    padding: 25px;
    width: 90% !important;
    margin: 10px auto !important;
   }

   .wfbox{
    border: 1px dashed #fff;
    border-radius: 10px;
    padding: 20px;
    background-color: #282831;
   }

   .bonus{
    background-color: #282831;
    border: 1px dashed #fff;
    border-radius: 10px;
    margin: 10px 10px !important;
    padding: 20px;
   }

   .bonus-section{
    margin: 10px auto !important;
   }

   .testimonial{
    margin-top: 40px !important;
   }

   .textimonialtext{
    padding-left: 30px !important;
   }

   .before{
    width: 50%;
   }

   .afterWorkshop{
    border-left: 1px solid #0c0c10;
   }

   .counterbhai{
    display: flex;
    flex-direction: column;
    justify-content: center;
   }



   @media screen and (max-width:600px) {
    .heading5{
        font-size: 16px;
        line-height: 20px;
        font-weight: 400;
    }
    .hero1 .heading1{
        font-size: 24px;
        line-height: 1.3em;
    }

    .hxx{
        font-size: 20px !important;
        line-height: 1.3em !important;
        margin-bottom: 6px;
    }

    .container-fluid{
        padding: 0px !important;
    }
    .heading2{
        font-size: 16px;
        line-height: 1.3em !important;
        margin-bottom: 6px;
    }
    .herox .heading2{
      font-size: 19px;
      line-height: 1.2em;
      margin-top: 10px;
    }
    iframe{
        max-width: 94vw;
        height: 60vw !important;
        padding-top: 20px !important;
        padding-bottom: 0px !important;
    }
    .col-6 div:nth-child(2) p{
        font-size: 14px;
        line-height: 16px;
    }
   .hero2 .heading2{
    font-size: 26px;
    line-height: 24px;
    margin-top: 15px;
   }

   .hero5 .heading2{
    font-size: 26px;
    line-height: 28px;
    margin-top: 15px;
   }
   .hero7 .heading2{
    font-size: 26px;
    line-height: 28px;
   }
   .hero2 .heading1{
    font-size: 27px;
    line-height: 1.1em;
    margin-bottom: 5px;
   }
   .hero3{
    padding-top: 50px !important;
    padding-bottom: 50px !important;
    padding-left: 14px;
   }

   .hero5{
    padding-top: 50px !important;
    /* padding-bottom: 50px !important; */
    text-align: center;
   }
   .hero3 .heading2{
    font-size: 27px;
    
   }
   .hero3 .heading1{
    font-size: 26px;
    text-transform: capitalize;
    line-height: 1.3em;
    
   }
   .hero3 .checkWaalaBox{

    justify-content: flex-start !important;
    padding: 8px !important;
   }

   .hero3heading{
    font-size: 24px;
    line-height: 26px;
   }
   .countdownx{
    padding: 8px;
   }
   .time{
    /* padding: 10px 40px !important; */
    /* margin: 10px; */
    padding: 10px 0px !important;
   }
   .hero4{
    padding: 50px 10px !important;
   }
   .hero4 .bigHeading{
    font-size: 48px;
    line-height: 1.2em;
   }
   .afterWorkshop{
    padding-left: 2px !important;
    border: none;
   }

   .btn-txt1{
    font-size: 19px;
    line-height: 1.2em !important;
   }

   .btn-txt2{
    font-size: 16px;
   }

   #minutes{
    /* margin-bottom: 10px !important; */
   }

   .hero2{
    padding-top: 30px !important;
    padding-bottom: 30px !important;
   }

   .w-70{
    width: 100% !important;
   }

  .wd2{
    font-size: 14px !important;
    padding: 0;
  }

   .margin-2{
    margin-top: 20px !important;
   }

   #countdown1.row{
    margin: 20px 0px !important;
    padding: 0px !important;
   }

   .row.animatedBtn{
    margin: 10px auto !important;

    /* padding: 0px !important; */
   }

   .pointers{
    width: 100% !important;
    margin: 0 auto !important;
  }

  .bigMobile{
    font-size: 26px !important;
  }

  .highBox{
    padding: 20px 10px !important;
  }

  .testimonial{
    margin-top: 8px !important;
   }

  .time-number{
    font-size: 26px;
    line-height: 1em;
  }
  .time-label{
    font-size: 12px;
  }
   .textimonialtext{
    padding-left: 0px !important;
   }

   .before{
    width: 100% !important;
    margin: 10px auto !important;
   }

   .worth{
    font-size: 42px !important;
   }

   .counterbhai{
    display: none !important;
   }

   .mobilebtn{
    padding: 40px auto !important;
   }
 
   }