﻿:root{
	--primary-color: #121212;
   --primary-text-color: #1A1A1A;
   --secondary-color: #303030;
   --territory-color: #FAD745;
   --text-yellow-color:#FFD500;
   --white-color: #fff;
   --black-color: #000;
   --gray-color:#313131;
   --border-color:#3A3B3B;


   --body-font-family:'Inter';
   --body-font-size: 16px;

   --body-line-height: 1.4;
   --heading-line-height: 1.4;
   --line-height-base: 1.6;

	--heading-h1: 90px;
	--heading-h2: 48px;
	--heading-h3: 31px;
	--heading-h4: 25px;
	--heading-h5: 36px;
	--heading-h6: 16px;
   --button-font-size: 20px;
   --medium-heading-font-size: 40px;
   --large-heading-font-size: 60px;


	--light-font-weight:300;
	--regular-font-weight:400;
	--medium-font-weight:500;
	--semi-bold-font-weight:600;
	--bold-font-weight:700;
	--extra-bold-font-weight:800;
	--heavy-bold-font-weight:900;

	--primary-border-radius: 10px;
   --secondry-border-radius: 12px;
}
* {
	box-sizing: border-box;
}
body {
	font-family:var(--body-font-family);
}
.container{
   max-width: 1200px;
}
a {
	text-decoration: none;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.btn {
   font-size: var(--button-font-size);
   font-family: var(--body-font-family);
   font-weight: var(--medium-font-weight);
   border-radius: var(--primary-border-radius);
   background: linear-gradient(225deg, #F9E45F 0%, #FEC519 100%);
   border: 1px solid rgba(255, 220, 126, 1);
   box-shadow: 0px 30px 30px 0px rgba(0, 0, 0, 0.4);
   padding: 12px 40px;  
   position: relative;
}
 
h1, h2, h3, h4, h5, h6, p {
	margin: 0;
}
h1 {
   font-size: var(--heading-h1);
   font-weight: var(--semi-bold-font-weight);
   color: var(--white-color);
   line-height: 1;
}
h1 span {
   color: var(--territory-color);
}
h2 {
   font-size: var(--heading-h2);
   font-weight: var(--semi-bold-font-weight); 
   color: var(--white-color);
   line-height: var(--heading-line-height);
}
h2 span {
   color: var(--text-yellow-color);
}
h3 {
   font-size: var(--heading-h3);
   font-weight: var(--regular-font-weight); 
   line-height: var(--line-height-base);
   color: var(--white-color);
}
h3 span {
   color: var(--primary-text-color);
   font-weight: var(--semi-bold-font-weight); 
}
h3.heading {
   font-size: var(--button-font-size);
   font-weight: var(--regular-font-weight);
   color: var(--text-yellow-color);
}
h4 {
   font-size: var(--heading-h4);
   font-weight: var(--semi-bold-font-weight);
   line-height: var(--heading-line-height);
   color: var(--white-color);
}
h4 span {
   color: var(--primary-text-color);
}
h5 {
   font-size: var(--heading-h5);
   font-weight: var(--bold-font-weight); 
   color: var(--white-color);
   line-height: var(--heading-line-height);
}
h4 span {
   color: var(--primary-text-color);
}
h6 {
   font-size: var(--heading-h6);
   font-weight: var(--bold-font-weight); 
   color: var(--primary-text-color);
   line-height: var(--heading-line-height);
}
p {
   font-size: var(--body-font-size);
   font-weight: var(--regular-font-weight);
   color: var(--white-color); 
}
.primary-box {
	border: 1px solid rgba(255, 209, 86, 1);
   border-radius: var(--primary-border-radius);
}
.secondry-box {
   background: rgba(49, 49, 49, 1);
   border-radius: var(--primary-border-radius);
}
h1.video-head {
    font-size: 80px;
}
/*.hero-banner .date-box {
   background: var(--white-color);
   border-radius: var(--primary-border-radius);
   padding: 14px 40px;
   color: var(--primary-text-color);
   margin: 30px auto;
   max-width: 330px;
}
.hero-banner .date-box h4 {
   color: var(--primary-text-color);
}
.hero-banner ul.date-time-list {
   display: flex;
   justify-content: center;
   gap: 30px;
}*/
.hero-banner .video-box .video-heading {
   padding-bottom: 50px;
}
.hero-banner .video-box .video-heading h1 {
   text-align: center;
}
/*Top Bar Style Start*/
.top-bar .live-webinar-slider {
   transform: rotate(0deg) !important;
}
.top-bar .marquee {
   position: relative;
   overflow: hidden;
}
.top-bar .live-webinar {
   background: #FF4B5C;
   padding: 6px 0;
}
.top-bar .live-webinar ul {
   display: flex;
   gap: 10px;
   overflow: hidden;
}
.top-bar .marquee__inner {
   -webkit-font-smoothing: antialiased;
   width: fit-content;
   display: flex;
   flex: auto;
   flex-direction: row;
}
.top-bar .live-webinar ul li {
   font-size: var(--heading-h4);
   font-weight: var(--bold-font-weight);
   color: var(--white-color);
   display: flex;
   white-space: nowrap;
   justify-content: center;
   align-items: center;   
   flex: 0 0 250px;
   width: 250px;
}
.top-bar .live-webinar ul li:before {
   content: '\ ';
   display: inline-block;
   width: 21px;
   height: 21px;
   background: url('../image/white-star.svg') no-repeat;   
   margin-right: 10px;
}
.top-bar .live-webinar ul li:nth-child(3n-0) {
   font-size: var(--heading-h4);
   font-weight: var(--bold-font-weight);
   color: #EBD85B;
}
.top-bar .live-webinar ul li:nth-child(3n-0) div {
   font-size: var(--body-font-size) !important;
   text-decoration: line-through;
   margin-left: 10px;
}
.top-bar .live-webinar ul li:nth-child(3n-0):before{
   background: url('../image/yellow-star.svg') no-repeat;
}
/*Top Bar Style End*/
.hero-banner {
   background-color: var(--primary-color);
   padding-top: 50px;
}
.hero-banner .video-box {
   margin: 30px auto 0;
}
.hero-banner .video-box video {
   border-radius: 20px;
}


.hero-banner .webinar-detail {
   border: 1px solid rgba(255, 209, 86, 1);
   border-radius: var(--primary-border-radius);
   padding: 50px 30px;
   margin: 10px 0 30px 0;
}
.hero-banner ul.detail-box {
   display: flex;
   justify-content: space-between;
   align-items: top;
}
.hero-banner .webinar-detail h3.heading {
   font-weight: var(--regular-font-weight);
   color: var(--white-color);
   text-align: center;
   text-transform: uppercase;
   padding-bottom: 40px;
}
.hero-banner ul.detail-box li {
   font-size: var(--heading-h4);
   font-weight: var(--semi-bold-font-weight);
   color: var(--text-yellow-color);
   position: relative;
   line-height: 1.2;
}
.hero-banner ul.detail-box li:not(:first-child):before {
   content: "";
   position: absolute;
   top: 0;
   border-right: 1px solid var(--border-color);
   width: 1px;
   height: 60px;
   left: -40px;  
}
.hero-banner ul.detail-box li span {
   font-size: var(--body-font-size);
   font-weight: var(--regular-font-weight);
   color: #FDF8D3;
   display: block;
   margin-bottom: 6px;
}
.hero-banner .webinar-detail span.live-hour {
   font-size: 14px;
   font-weight: var(--medium-font-weight);
   color: rgba(229, 49, 33, 1) !important;
   background: rgba(255, 241, 243, 1);
   border-radius: 16px;
   padding: 4px 14px 6px;
   margin-top: 8px;
}

.section-1 {
   background-color: var(--primary-color);
   padding: 90px 0 60px;
}
.section-1 .left-box {
   max-width: 580px;
}
.section-1 .left-box h3 {
   padding: 40px 0 40px;
}
.section-1 .primary-btn { 
   width: 98%;
}
.section-1 .right-box {
   padding: 0 0 30px 0;
   position: relative;
}
.section-1 .right-box .content-box {
   padding: 40px 35px 0 35px;
}
.section-1 .right-box  .outer-box {
   background: var(--white-color);
   text-align: center;
   border-radius: var(--primary-border-radius);
   padding: 14px 40px;
   position: absolute;
   top: -22px;
   left: 50%;
   transform: translateX(-50%);
   width: 60%;
   z-index: 9;
}
.section-1 .right-box .inner-box {
   background: linear-gradient(269.84deg, #F6D703 5.24%, #121212 93.82%);
   backdrop-filter: blur(5px);
   padding: 35px 0;
   border-radius: 10px 10px 10px 0;
}
.section-1 .right-box ul {
   padding-top: 24px;
}
.section-1 .right-box ul li {
   font-size: var(--body-font-size);
   font-weight: var(--regular-font-weigh);
   color: var(--white-color);
   position: relative;
   display: flex;
   gap: 12px;
   padding-bottom: 14px;
}
.section-1 .right-box ul li:before {
   content: '\ ';
   background: url('../image/check-circle.svg');
   height: 18px;
   background-repeat: no-repeat;
   background-size: 100%;
   margin-top: 4px;
   flex: 0 0 18px;
}
/*.section-1 .webinar-detail {
   border: 1px solid rgba(255, 209, 86, 1);
   border-radius: var(--primary-border-radius);
   padding: 50px 30px;
   margin-top: 100px;
}
.section-1 ul.detail-box {
   display: flex;
   justify-content: space-between;
   align-items: top;
}
.section-1 .webinar-detail h3.heading {
   font-weight: var(--regular-font-weight);
   color: var(--white-color);
   text-align: center;
   text-transform: uppercase;
   padding-bottom: 40px;
}
.section-1 ul.detail-box li {
   font-size: var(--heading-h4);
   font-weight: var(--semi-bold-font-weight);
   color: var(--text-yellow-color);
   position: relative;
   line-height: 1.2;
}
.section-1 ul.detail-box li:not(:first-child):before {
   content: "";
   position: absolute;
   top: 0;
   border-right: 1px solid var(--border-color);
   width: 1px;
   height: 60px;
   left: -40px;  
}
.section-1 ul.detail-box li span {
   font-size: var(--body-font-size);
   font-weight: var(--regular-font-weight);
   color: #FDF8D3;
   display: block;
   margin-bottom: 6px;
}
.section-1 .webinar-detail span.live-hour {
   font-size: 14px;
   font-weight: var(--medium-font-weight);
   color: rgba(229, 49, 33, 1) !important;
   background: rgba(255, 241, 243, 1);
   border-radius: 16px;
   padding: 4px 14px 6px;
   margin-top: 8px;
}*/
.section-2 {
   background-color: var(--primary-color);
   padding: 50px 0 90px;
}
.section-2 .inner-col {
   padding: 30px 30px 30px 70px;
}
.section-2 ul {
   padding-top: 24px;
}
.section-2 ul li {
   font-size: var(--body-font-size);
   font-weight: var(--regular-font-weigh);
   color: var(--white-color);
   position: relative;
   display: flex;
   gap: 4px;
   padding-bottom: 20px;
}
.section-2 ul li:before {
   content: '\ ';
   background: url('../image/check-circle.svg');
   height: 18px;
   background-repeat: no-repeat;
   background-size: 100%;
   margin-top: 4px;
   margin-right: 10px;
   flex: 0 0 18px;
}
.section-2 ul li span {
   font-size: var(--body-font-size);
   font-weight: var(--bold-font-weight);
   color: var(--text-yellow-color);
}
.section-2 h5 {
   padding: 24px 0 8px 0;
}
.section-2 .image-box img {
   border-radius: var(--primary-border-radius);
   max-width: 100%;
}
.section-2 .inner-col p {
   max-width: 312px;
}
.section-3 {
   background-color: var(--primary-color);
   padding: 30px 0 50px;
}
.section-3 ul {
   padding-top: 24px;
   max-width: 388px;
   margin: auto;
}
.section-3 ul li {
   font-size: var(--body-font-size);
   font-weight: var(--regular-font-weigh);
   color: var(--white-color);
   position: relative;
   display: flex;
   gap: 4px;
   padding-bottom: 20px;
}
.section-3 ul li:before {
   content: '\ ';
   background: url('../image/check-circle.svg');
   height: 18px;
   background-repeat: no-repeat;
   background-size: 100%;
   margin-top: 4px;
   margin-right: 10px;
   flex: 0 0 18px;
}
.section-3 .inner-content-box {
   text-align: center;
   max-width: 800px;
   margin: auto;
}
.section-3 .inner-content-box h4.box-style {
   background: var(--white-color);
   border-radius: var(--primary-border-radius);
   padding: 14px 40px;
   color: var(--primary-text-color);
   margin: 30px auto;
   max-width: 500px;
}
.section-3 .primary-btn {
   width: 68%;
   margin-top: 40px;
}
.section-4 {
   background-color: var(--primary-color);
   padding: 50px 0 90px;
}
.section-4 h3 {
   padding-bottom: 60px;
}
.section-4 .box {
   padding: 40px 44px 0 40px;
   min-height: 234px;
}
.section-4 .box .img-box {
   margin-bottom: 20px;
}
/*.section-4 .row {
   justify-content: center!important;
   gap: 24px;
}
.section-4 .col-lg-4.col-md-6 {
   margin: 0 !important;
   padding: 0 !important;
   width: 32%;
}*/
.section-4 .col-6{
   margin-bottom: 25px;
}
.section-5 {
   background-color: var(--primary-color);
   padding: 50px 0 90px;
}
.section-5 h2 {
   font-size: var(--large-heading-font-size);
   font-weight: var(--semi-bold-font-weight);
   text-transform: uppercase;
}
.section-5 h4.box-style {
   background: var(--white-color);
   border-radius: var(--primary-border-radius);
   padding: 10px 20px;
   color: var(--primary-text-color);
   margin: 30px auto 70px;
   max-width: 266px;
}
.section-5 .table-sec {
   border-radius: 10px;
   overflow: hidden;
}
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.section-5 table {
   width: 100%;
   background-color: var(--gray-color);
   border-radius: var(--primary-border-radius);
}
.section-5 table tr {
   text-align: left;
}
.section-5 table th {
   font-size: var(--heading-h3);
   font-weight: var(--semi-bold-font-weight);
   color: var(--primary-text-color);
   padding: 24px;
   width: 33%;
   text-align: center;
}
.section-5 table th:not(:last-child) {
   border-right:  3px solid #3B3B3B;
}
.section-5 table tr.heading-tr {
   background-color: var(--white-color);
   border-radius: 10px 10px 0 0;
}
.section-5 table td {
   font-size: var(--heading-h4);
   font-weight: var(--regular-font-weight);
   color: var(--white-color);
   border:3px solid #3B3B3B;
   padding: 26px 35px 26px;
}
.section-5 table td.price {
   font-size: var(--heading-h5);
   font-weight: var(--bold-font-weight);
   color: var(--text-yellow-color);
   text-align: center;
}
.section-5 h3.bonus-heading {
   font-size: var(--medium-heading-font-size);
   font-weight: var(--semi-bold-font-weight);
   color: var(--text-yellow-color);
   padding: 50px 0;
}
.section-5 .primary-btn {
   width: 45%;
}

.section-6 {
   background-color: var(--primary-color);
   padding: 90px 0 150px;
}
.section-6 h2 {
   padding-bottom: 70px;
}
.section-6 .box {
   margin-bottom: 30px;
   padding: 10px 44px 10px 30px;
   display: flex;
   gap: 24px;
   min-height: 110px;
   align-items: center;
}
/*Register Button Style Start*/
.mobile-countdown-register-button {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #1F2229;
    padding: 15px 10px;    
    color: #fff;
    border-top: none;
    z-index: 999;
}
.mobile-countdown-register-button span.strike-price {
    font-size: 40px;
    font-weight: 500;
    line-height: 1;
}
.mobile-countdown-register-button span.discount-price {
    font-size: 25px;
    text-decoration: line-through;
    margin-left: 5px;
}
.mobile-countdown-register-button h5 {
    font-size: 25px;
    color: #FFD000;
}
.mobile-countdown-register-button .price {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 5px;
}
.mobile-countdown-register-button a {
    background: #FFD000;
    display: inline-block;
    border-radius: 50px;
    padding: 10px 50px;
    color: #000;
    font-weight: 500;
    line-height: 1.2;
    float: right;
    text-align: center;
}
.discount-price-inner {
    text-align: center;
    max-width: max-content;
}
.mobile-countdown-register-button a span.countdown, .mobile-countdown-register-button .button {
    font-size: 20px;
}
.mobile-countdown-register-button .button {
    font-weight: 700;
}
/*Register Button Style End*/
@media screen and (max-width:1024px) {
   :root{
      --heading-h1: 70px;
      --heading-h2: 48px;
      --heading-h3: 31px;
      --heading-h4: 25px;
      --heading-h5: 36px;
      --heading-h6: 16px;
      --button-font-size: 20px;
      --medium-heading-font-size: 40px;
      --large-heading-font-size: 64px;

      --line-height-base:1.4;
   }
   .primary-btn:before {
      left: 31%;
   }
   .section-1 .primary-btn {
      width: 87%;
   }
   .section-1 .right-box .inner-box {
      padding: 26px 0
   }
   .section-1 .right-box  .outer-box {
      padding: 14px 14px;
   }
   .section-1 .right-box .content-box {
      padding: 24px 20px 0 20px;
   }
   .section-1 .right-box {
      padding: 0 0 20px 0;
   }
   .section-1 .webinar-detail {
      padding: 30px 20px;
      margin-top: 90px;
   }
   .section-1 ul.detail-box li:not(:last-child):after {
      left: 124%;
   }
   .section-1 ul.detail-box li {
      font-size: var(--button-font-size);
   }
  .section-1 ul.detail-box {
      display: unset;
   }
   .section-1 ul.detail-box li span {
      margin-bottom: 4px;
   }
   .section-1 ul.detail-box li {
      border-bottom: 1px solid var(--border-color);
      margin-bottom: 18px;
      padding-bottom: 18px;
   }
   .section-1 .webinar-detail span.live-hour {
      width: 220px;
   }
   .section-2 .image-box img {
      max-width: 100%;
   }
   .section-3 .primary-btn {
      width: 48%;
   }   
   .section-4 .box {
      padding: 30px 16px 30px 20px;
      min-height: 240px;
   }
   .section-5 h2 {
      font-size: var(--heading-h2);
   }
   .section-5 table th {
      font-size: 28px;
      padding: 18px;
   }
   .section-5 table td {
      padding: 20px 20px 20px;
   }
   .section-5 .primary-btn {
      width: 48%;
   }
   .section-6 .box .content-box h4 {
      font-size: var(--button-font-size);
   }
   .section-6 {
      padding: 60px 0 150px;
   }
}
@media screen and (max-width:767px) {
   :root {
      --heading-h1: 40px;
      --heading-h3: 22px;
      --heading-h2: 32px;
      --heading-h4: 22px;
      --sm-heading-font-size: 30px;
      --md-heading-font-size: 32px;
   }
   .section-1 .primary-btn,
   .section-3 .primary-btn,
   .section-5 .primary-btn {
      width: 100%;
   }
   .section-1 {
      padding: 30px 0;
   }
   .section-1 .left-box h3 {
      padding: 0 0 30px;
   }
   .section-1 .right-box {
      margin-top: 70px;
   }
   .hero-banner .webinar-detail {
      margin-top: 24px;
      padding: 30px 20px 20px;
   }
   .hero-banner .webinar-detail h3.heading {
      padding-bottom: 30px;
   }
   .hero-banner ul.detail-box {
      display: unset;
   }
   .hero-banner ul.detail-box li span {
      margin-bottom: 4px;
   }
   .hero-banner ul.detail-box li {
      border-bottom: 1px solid var(--border-color);
      margin-bottom: 18px;
      padding-bottom: 18px;
   }
   .hero-banner .webinar-detail span.live-hour {
      width: 220px;
   }
   /*.section-1 .webinar-detail {
      margin-top: 50px;
      padding: 30px 20px 20px;
   }
   .section-1 .webinar-detail h3.heading {
      padding-bottom: 30px;
   }
   .section-1 ul.detail-box {
      display: unset;
   }
   .section-1 ul.detail-box li span {
      margin-bottom: 4px;
   }
   .section-1 ul.detail-box li {
      border-bottom: 1px solid var(--border-color);
      margin-bottom: 18px;
      padding-bottom: 18px;
   }
   .section-1 .webinar-detail span.live-hour {
      width: 220px;
   }*/
   .section-2 {
      padding: 20px 0 50px;
   }
   .section-2 .inner-col {
      padding: 14px 14px;
   }
   .section-2 h5 {
      padding: 10px 0 8px 0;
   }
   .section-3 .inner-content-box h4.box-style {
      padding: 8px 6px;
   }
   .section-3 .primary-btn {
      margin-top: 30px;
   }
   .section-1 ul.detail-box li:not(:last-child):after {
      display: none;
   }
   .section-4 {
      padding: 20px 0 50px;
   }
   .section-4 .box h4 {
      font-size: calc(var(--heading-h4) - 5px);
   }
   .section-4 h3 {
      padding-bottom: 36px;
   }
   /*.section-4 .row {
      gap: 14px;
   }*/
   .section-4 .col-lg-4.col-md-6 {
   /*      width: 100%;*/
   }
   .section-4 .box {
      padding: 20px 10px 0 10px;
      min-height: 200px;
   }
   .section-5 h2 {
      font-size: var(--md-heading-font-size);
   }
   .section-5 h4.box-style {
      margin: 24px auto 34px;
   }
   .section-5 table th {
      font-size: var(--button-font-size);
      padding: 14px;
   }
   .section-5 table th:not(:last-child) {
      border-right: 2px solid #3B3B3B;
   }
   .section-5 table td {
      border: 2px solid #3B3B3B;
   }
   .section-5 table td {
      padding: 10px;
      font-size: var(--body-font-size);
   }
   .section-5 table td.price {
      font-size: var(--body-font-size);
   }
   .section-5 h3.bonus-heading {
      font-size: calc(var(--heading-h5) - 10px);
      padding: 30px 0;
   }
   .section-5 {
      padding: 50px 0 30px;
   }
   .section-6 h2 {
      padding-bottom: 30px;
      font-size: calc(var(--heading-h5) - 5px);
   }
   .section-6 .box {
      margin-bottom: 14px;
      padding: 20px 24px 20px 24px;
      gap: 20px;
      min-height: auto;
   }
   .section-6 {
      padding: 60px 0 120px;
   }
   .hero-banner {
      padding-top: 36px;
   }
   .hero-banner .video-box .video-heading {
      padding-bottom: 36px;
   }
   .hero-banner .video-box {
      margin: 20px auto 0;
   }
   .hero-banner ul.date-time-list {
      display: unset;
   }
   .hero-banner .date-box {
      margin: 0 auto 20px;
   }
   .hero-banner ul.detail-box li:not(:first-child):before {      
      border-right: unset;
   }
   h1.video-head {
      font-size: 40px;
      line-height: 1.2;
   }
   /*Register Button Style Start*/
   .mobile-countdown-register-button {
      display: block;
   }
   .mobile-countdown-register-button span.strike-price {
       font-size: 25px;
   }
   .mobile-countdown-register-button span.discount-price {
       font-size: 16px;
   }
   .mobile-countdown-register-button h5 {
       font-size: 16px;
   }
   .mobile-countdown-register-button .price {
       margin-bottom: 0;
   }
   .mobile-countdown-register-button a {
       padding: 8px 25px;
   }
   .mobile-countdown-register-button a span.countdown {
       font-size: 16px;
   }
   .mobile-countdown-register-button .button {
       font-size: 18px;
   }
}


.site-footer {
  text-align: center;
  padding: 20px;
  background-color: #121212;
  color: #ffffff;
  font-size: 14px;
  font-family: 'Arial', sans-serif;
  position: relative;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #444;
}
