/* Style Guide starts here 

Color-Theory
primary-color   : #2A6FC8
secondary-color : #8FB4AB
body-text-color : #000000

Title font family : Ubuntu
Body font family : Rubik


*/
h1,h2,h3,h4,h5,h6{ font-family: "Outfit", sans-serif; margin: 0px !important;}
h1{font-size:40px !important;}
h2{font-size:35px !important;}
h3{font-size:30px !important;}
h4{font-size:26px !important;}
h5{font-size:24px !important;}
h6{font-size:20px !important;}


p,span,strong,ul,li,a,label,table,input,thead,tbody,tr,th,td,button {font-family: "Manrope", sans-serif ; margin: 0px !important;}
.b1{font-size: 18px !important;}
.b2{font-size: 16px !important;}
.b3{font-size: 14px !important;}
.b4{font-size: 12px !important;}
.b5{font-size: 10px !important;}
.b6{font-size: 8px !important;}


/* global css starts here */

.py-60{padding:60px 0px !important;}
.py-70{padding:70px 0px !important;}
.py-80{padding:80px 0px !important;}
.py-90{padding:90px 0px !important;}
.py-100{padding:100px 0px !important;}

.px-60{padding:0px 60px !important;}
.px-70{padding:0px 70px !important;}
.px-80{padding:0px 80px !important;}
.px-90{padding:0px 90px !important;}
.px-100{padding:0px 100px !important;}


.pt-60{padding-top:60px !important;}
.pt-70{padding-top:70px !important;}
.pt-80{padding-top:80px !important;}
.pt-90{padding-top:90px !important;}
.pt-100{padding-top:100px !important;}

.pb-60{padding-bottom:60px !important;}
.pb-70{padding-bottom:70px !important;}
.pb-80{padding-bottom:80px !important;}
.pb-90{padding-bottom:90px !important;}
.pb-100{padding-bottom:100px !important;}


.pl-60{padding-left:60px !important;}
.pl-70{padding-left:70px !important;}
.pl-80{padding-left:80px !important;}
.pl-90{padding-left:90px !important;}
.pl-100{padding-left:100px !important;}


/* global css ends here */



/* sign-up page here  */

.sign-page-img-div{background-image: url('../images/sign-right-img.png'); background-repeat: no-repeat; background-size: 100%;}

.sign-left-bg{background-image: url('../images/sign-left-img.png'); background-repeat: no-repeat; background-size: 100%; border-radius:0px 40px 40px 0px;}
.logo{ width:100%; height: auto;}
.logo img{ width:35%; height: auto;}

.sign-right-bg{}
.sign-speaker-div{}
.sign-speaker-div img{width:80%; height:auto; position: relative; left: 270px;}


.card-bg{width: 420px !important; height: auto; border-radius:20px; background-color: #fff; padding: 30px !important; z-index: 10000; margin-top: -585px !important; position: relative; top: -60px;}
.card-heading{ color:#2A6FC8;}
.card-heading h6{width: 32% !important;float: left; padding-right:5px;}
.card-heading h5{width: 68% !important; float: left;}

.account-info-div{padding:10px 0px 10px 0px;}
.account-info-div h3{ width: 65%; float: left;}
.account-info{width: 35% !important; text-align: right; padding: 0px !important; float: left;}
.sign-info-account{}
.sign-info-optn-btn{color: #2A6FC8;}
.sign-info-optn-btn a{text-decoration: none;}




.form-group{}
.form-username{}
.form-label{margin-bottom:5px !important;}
.form-input{
    display: block;
    width: 100%;
    padding: 5px 10px;
    line-height: 1.5;
    color:#000;
    background-color:#ffffff;
    border:1px solid #e1e1e1;
    border-radius:5px;  
}

.form-input:required:valid{border-color: #2A6FC8;}
.form-input:invalid:focus{border-color:#e72424;}
.form-input:focus{border-color: #2A6FC8; outline: none;}

.form-email{}


.form-password{}
.input-icon{position: relative; float: right; top:33px; padding-right: 10px; color:#7d7b7b;}
.placeholder-div{}
.form-input::placeholder{}

.form-checkbox-div{width: 100%; height: auto; margin-bottom: 25px;}

.checkbox-info{width: 60%; float:left;}
.checkbox-box{ margin-right: 5px !important; float: left; margin-top: 2px !important;}
.forgot-password{width: 40%; float: right; text-align: right;}
.forgot-password a{color: #e72424; text-decoration: none;}



.social-media-div{}
.social-media-div p{margin: 5px 0px !important;}
.google-btn{padding:8px 10px !important; background-color: #EDF7FF; border-radius:9px; text-decoration: none;}
.google-btn img{padding-right: 5px; margin-top: -2px; width:20px; height: auto;}
.facebook-btn{background-color: #f6f6f6; padding:5px 8px; border-radius:9px;}
.facebook-btn img {width: 20px; height: auto; margin-top:-3px;}
/* sign-up page ends here  */



/* Social media hover effect CSS starts here */
.zoom {
  transition: transform .2s; /* Animation */
}

.zoom:hover{
  -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Safari 3-8 */
  transform: scale(1.2); 
   
}

/* Social media hover effect CSS ends here */



/* sign-up large btn starts here */

.primary-btn-sign{
  align-items: center;
  appearance: none;
  background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);
  border: 0;
  border-radius: 6px;
  box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  width: 100% !important;
  /* font-family: "JetBrains Mono",monospace; */

  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
 
   padding: 15px 25px;

  position: relative;
  text-align: left;
  text-decoration: none;
  transition: box-shadow .15s,transform .15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow,transform;
  font-size: 18px;
  
}

.primary-btn-sign:focus {
  box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
}

.primary-btn-sign:hover {
  box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
  transform: translateY(-2px);
}

.primary-btn-sign:active {
  box-shadow: #3c4fe0 0 3px 7px inset;
  transform: translateY(2px);
}

/* sign-up large btn ends here */




/* sign-in page starts here  */

.sign-img{width: 122px; height: auto; float: none; margin:0px auto 16px; display: flex;}

/* sign-in page ends here  */




/* OTP Page starts here */

.sign-otp-img{width: 118px; height: auto; float: none; margin:0px auto 16px; display: flex;}
.otp-box-div{}

.otp-container {
  display: flex;
  gap: 12px;
  justify-content: left;
  margin-bottom: 10px;
}
.otp-text{margin-bottom:5px !important;}
.para{color:#646464; margin-bottom:25px !important;}

.otp-container input {
  width: 40px;
  height: 40px;
  text-align: center;
  font-size: 14px;
  border: 2px solid #ccc;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.3s ease;
}

.otp-container input:focus {
  border-color: #639dea;
  box-shadow: 0 0 5px #72a6e9;
}


/* OTP Page ends here */


/* Verification Success Page starts here */

.verify-head{width: 100% !important;}
.success-img{width: 160px; height: auto; float: none; margin:45px auto 45px; display: flex;}
.para-green{color:#29CC6A; margin-bottom:25px !important;}
.head-position{ color: #2A6FC8;}
.head-position h6{ padding-right: 5px !important;}
.btn-margin{margin-bottom: 70px !important;}
/* Verification Success Page ends here */



/* Forgot Password page starts here */

.sign-forgot-img{width: 174px; height: auto; float: none; margin:25px auto 25px; display: flex;}
.forgot-input-margin{ margin-bottom: 40px !important;}

/* Forgot Password page ends here */


/* Reset Password page starts here */
.reset-head-margin{margin-bottom: 74px !important;}
.reset-info{margin:25px 0px !important;}
.reset-info li{list-style-type:disc; color: #646464;}
/* Reset Password page ends here */




/* Booking summary page CSS starts here */

/* Processing steps css starts here */

:root {
  --primary-blue: #007bff; /* Main blue theme */
  --gray-light: #e0e0e0;
}

.progress-container {
  width: 100%;
  max-width: 450px;
  margin-bottom: 15px;
  position: relative;
}

.progress-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 100%;
  text-align: center;
}

/* Base Step & Circle */
.step {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  color: #999;
  transition: color 0.3s;
}

.circle {
  width: 30px;
  height: 30px;
  background: #fff;
  border: 3px solid var(--gray-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease; /* Smooth transition for hover */
}

/* SVG Checkmark Logic */
.circle svg {
  width: 20px;
  fill: white;
  display: none; /* Hidden by default */
}

/* Blue Active & Completed States */
.step.active .circle,
.step.completed .circle {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
}

.step.active .circle svg,
.step.completed .circle svg {
  display: block; /* Show checkmark when blue */
}

.step.active .label {
  color: var(--primary-blue);
  font-weight: 600;
}

/* Hover Effect: Border changes to blue */
.step:hover .circle {
  border-color: var(--primary-blue);
  transform: translateY(-2px); /* Subtle lift */
  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
}

/* Progress Line Styling */
.progress-line {
  position: absolute;
  top: 15px; left: 33.8px;
  height: 2px;
  width: 85%;
  max-width: 520px;
  background: var(--gray-light);
  z-index: 0;
  transform: translateY(-50%);
}

.indicator {
  height: 100%;
  background: var(--primary-blue);
  width: 0%; /* Adjusted by JS */
  transition: width 0.5s ease;
}

/*Processing steps css ends here */
.arrow-position{padding-top: 0px !important;}
.back-arrow{font-size: 25px; float: left; width: 32%; padding-top: 8px;}
.back-arrow a{color: #000; float: left;}
.back-arrow a img{ float: left;}
.back-arrow h6{width: 83%; float: left; padding-left: 15px !important;}

.steps-div{width: 68%; height: auto; float: left; padding-left: 7px;}

.payment-container-div{background-color:#F4F9FF; height: 700px; padding: 50px 0px;}
.card-div{float: left; width: 100%;}
.card-box{padding: 30px 30px; border: 1px solid #e1e1e1; width: 100%; height: auto; border-radius: 10px; max-width:445px;}
.card-info{ border-bottom:2px solid #e1e1e1; padding-bottom: 5px;}
.card-para{margin-bottom: 5px;}
.card-para-left{width:70%; float: left;}
.card-price-right{width:30%; float: left;}

.sub-total-div{padding: 10px 0px;}
.radio-btn-div{ margin-bottom:10px;}
.radio-btn-left{width:50%; float: left;}
.radio-btn-right{width: 50%; float:right; text-align: right;}
.book-btn-width{width: 100%;}
.payment-total-btn{ display: flex; justify-content:space-between; text-decoration: none;}

/* Booking summary page CSS ends here */


/* attendee-details page css starts here */

.attendee-info-div{width: 100%; height: auto;  float: left; padding:25px 25px 0px 25px;}
.attendee-info-div h6{ margin-bottom: 15px !important;}
.attendee-username{ width:50%; padding-right:25px; float: left; margin-bottom: 20px;}
.attendee-input{
    display: block;
    width: 100%;
    padding: 5px 10px;
    line-height: 2;
    color: #000;
    background-color: transparent;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
}

.attendee-input::placeholder{color: #000 !important;}
.attendee-input:focus{border-color: #2A6FC8;  outline: none;}
.attendee-input:required:valid{border-color: #2A6FC8;}
.attendee-input:invalid:focus{border-color:#e72424;}

.btn-div{float: none; width: 100%; display: flex; justify-content: center; margin: auto;}
.primary-btn-width{width:auto !important;}

/* attendee-details page css ends here */


/* Payment-success page css starts here */
.progress-width{width:100% !important;}
.booking-qr-div{width: 100%; height: auto; float: left;}
.booking-qr-div h4{color:#21A64C; padding-bottom:5px;}
.pymt-success-img{width: 120px !important; height: auto; padding-bottom: 10px;}
.qr-code-img{width: 180px !important; height: auto;}
.para-blue{color:#2A6FC8; padding-bottom: 5px;}
.share-options{ padding-top: 15px;}
.share-options a{text-decoration: none; width: 30px;}
.share-options a img{width: 35px;}
.gmail-img{margin:0px 15px;}
/* Payment-success page css ends here */



/* ticket page css starts here */
.ticket-div{width: 100%; height: 550px;}
.ticket-card{width: 520px; height: auto; border-radius:15px; background-color: #fff; padding: 15px 15px;}
.tck-left-info{width: 60%; height: auto; float: left;}
.tck-left-info h5{padding-bottom: 5px; border-bottom: 3px solid #2A6FC8;}
.tck-info{padding: 5px 0px 0px 0px;}
.tck-info img{width: 8%; height: auto; float: left; padding: 1px 5px 0px 0px;}
.tck-info h6{width:auto; float: left; padding-right: 5px;}
.tck-info p{width: 53%; height: auto; float: left; padding-top: 2px;}

.tck-right-info{width: 40%; height: auto; float: left;}
.tck-right-info a{ float: right; color:#2A6FC8;}
.tck-right-info img{width:100%; height: auto; float: left; padding:0px 15px 0px 15px;}
.tck-right-info p{width: 100%; height: auto; float: left; padding:5px 0px 0px 0px; text-align: center;}

/* ticket page css ends here */

/* Payment details css starts here */
.payment-div{width: 100%; float: left;}
.payment-options-div{height: auto;}
.payment-options{width:100% !important; float:left; background-color:#fff;border: 1px solid #e1e1e1; padding: 10px 10px;}
.payment-options a{ text-decoration: none;}
.payment-options a p{ color: #000;}
.payment-options:hover{background:none;}

.payment-upi-div{height: auto;}
.upi-heading{float: left; margin-bottom: 15px;}
.upi-heading img{width: 8% ; float: left;}
.upi-heading h6{width: 92% ; float: left; padding-left: 15px;}
.upi-options-div{height: auto; float: left;}
.upi-options{float:left; padding:10px 0px 25px;}
.upi-options input{width:10%; max-width:15px; height: 15px; float:left; margin:5px 10px 5px 5px !important;}
.upi-options img{width:25%; float:left;}
.upi-options p{width:60%; float:left; padding: 2px 0px 2px 10px; color:#A1A2A4;}

.phonepay-img{width: 50px !important; height:auto; margin-top:-10px;}
.qr-scanner-heading{margin-bottom:10px !important;}
.qr-scanner-img{width: 30px !important; height: auto;}
/* Payment details css ends here */