/* Basic styling */
body {
    background-color: #f0f7ff;
    font-family: 'Poppins', sans-serif;
    max-width: 1280px;
    margin: auto;
    margin-bottom: 30px;
    touch-action: manipulation;
}
.note-txt{font-size:12px;font-weight: 300;}

/* @font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Light.woff2') format('woff2'),
         url('../fonts/Poppins-Light.woff') format('woff');
    font-weight: 300; Light
    font-style: normal;
} */

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.woff2') format('woff2'),
         url('../fonts/Poppins-Regular.woff') format('woff');
    font-weight: 400; /* Regular */
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Medium.woff2') format('woff2'),
         url('../fonts/Poppins-Medium.woff') format('woff');
    font-weight: 500; /* Medium */
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-SemiBold.woff2') format('woff2'),
         url('../fonts/Poppins-SemiBold.woff') format('woff');
    font-weight: 600; /* Semi-bold */
    font-style: normal;
}

 

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-ExtraBold.woff2') format('woff2'),
         url('../fonts/Poppins-ExtraBold.woff') format('woff');
    font-weight: 800; /* Extra-bold */
    font-style: normal;
}
.whitebg{background-color: #FFFFFF !important;}
input, textarea, select {
    touch-action: manipulation;
}
input, select, textarea, button {
    font-size: 16px; /* Ensures no zooming on focus */
}
header .container-sec {
    max-width: 100%;
}

h2.page-heading {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: #233252;
    margin-bottom: 0;
    margin-top:1.5rem;
}

button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #808080;
  }
.btn:hover{background-color:#0083C3;}
#cancelButton.btn:hover{background-color:#FFF;color: #0083C3; border:1px solid #0083C3}
.justify-content{justify-content: center;}
.blue{background-color: #0083C3;
    min-width: 120px;
    border: none;
    border-radius: 4px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    margin:0 auto;
    margin-top: 12px;
    cursor: pointer;box-shadow: 0 4px 6px -1px rgba(104, 186, 226, 0.5);}
    
.notice{font-size: 12px; color:#1F2223;border-bottom: 1px solid #c5bfbf;}
.notice ul{padding-left:1rem}
.notice p{font-size: 12px !important; color:#1F2223 !important;}
.notice h6{font-size: 12px; font-weight: 700;}
.notice strong{font-size:14px;font-weight: 600;}
/*Common Styles*/
a{    color: #0083C3; text-decoration: none;text-decoration: underline;}
.alert-blue{font-size: 12px; color:#0083C3}
a:hover{text-decoration: none;}
.form-check{margin-left: 7px;}
.form-check-input[type=checkbox]{border: 1px solid #657D93;margin-right:5px;margin-top:2px}
.form-check-input:focus{border-color:#657D93;box-shadow:none}
.form-check-input:checked{background-color:#D81921;border-color:transparent;}
.form-select{background-color: #F4F4F4;
    color: #233253;
    font-size: 12px;box-shadow:none; margin-top:10px; margin-bottom:10px}
    .form-select:focus{border-color:#657D93;box-shadow:none}
.bank-selection{margin-bottom: 30px !important;}
.form-control:focus{box-shadow:none}
.form-check-input[type=radio]{    width: 12px;
    height: 12px;margin-top: 7px;
    margin-left: -18px;}
    .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .bs-tooltip-start .tooltip-arrow::before{border-left-color:#E8E8E8}
.account-details{padding:0;margin-top: 15px;}
.account-details label{    font-size: 12px;
    color: #233253;}
    .account-details input{    border: 1px solid #8A93A5;
        border-radius: 4px;color: #233253; font-size: 12px;margin-bottom: 15px;}   
        input::placeholder{color:#59595B; font-style: italic; font-weight: 300; font-size: 12px;}
        .form-check-input.is-invalid~.form-check-label{color:#59595B}
    /* Container styling */
.container-sec {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
}
.inner-container-sec {
    max-width: 1220px; /* or another desired max-width */
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 20px; 
}
.custom-row {
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping */
    align-items: flex-start; /* Align items to the top */
    width:90% !important;
}
/* Header styling */
.site-header {
    background-color: transparent;
    padding-bottom: 10px;
}



.title-section {
    text-align: center;
    margin-bottom: 20px;
}

.title-section .title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 21px;
    line-height: 30px;
    color: #233253;
    margin:0 auto;
    max-width: 70%;
}

.title-section .title .highlight {
    color: #ED1C24;
}

.title-section .subtitle {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #758197;
    margin-top: 5px;
}

.play-icon-wrapper {
    min-height: 40vh;
}

.play-icon {
    width: 56px;
    height: 56px;
    background-color: #233253;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.play-icon svg{margin-left:6px; width:25px}
.right-section {
    /* Ensure .right-section takes up the intended column width from Bootstrap grid */
    position: relative;
    box-sizing: border-box;
    
}

/* Clear floats after the sections */
.container-sec::after {
    content: "";
    display: table;
    clear: both;
}

/* Left Section - Tab and Tab Content */
.left-section .tab-navigation {
    width: 30%;
    float: left;
}

.left-section .tab-content {
    width: 100%;
    float: left;
    padding-left: 0px;
    margin-bottom: 30px;
}
.active-tab-label {
    font-weight: 600;
    color: #233252;
    float: left;
    font-size:14px;
}

/* Clear floats inside the left section */
.left-section::after {
    content: "";
    display: table;
    clear: both;
}
/*Payment Summary*/

.premium-container {
  max-width: 300px;
  margin: 10px 0 10px 0;
}

.premium-label {
  font-weight: 600;
  font-size: 1rem;
  display: block;
  margin-bottom: 6px;
  color: #212529;
}

.premium-value-wrapper {
  display: flex;
  align-items: center;
  gap: 3px;
  position: relative;
}

.premium-rupee-icon {
 font-size: 14px !important;
    color: #005E9E;
  line-height: 1;
  flex-shrink: 0;
}

.premium-text {
 font-size: 14px !important;
    color: #005E9E;
    font-weight: 600;
  user-select: text;
}
.proceed-left-section .premium-amount{
    font-size: 18px !important;
    font-weight: 700;
    color: #233252;
    max-width: 110px;
    text-align: center;
}
.edit-icon {
  font-size: 14px;
  color: #005E9E;;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
  transition: color 0.2s ease;
    position: absolute;
    right: 0;
    top: 3px;
    font-weight: 500;
}

.edit-icon:hover {
  color: #005E9E;;
}

.premium-tooltip {
  font-style: italic;
  color: #1F2223;
  font-size: 11px;
  margin-top: 6px;
  display: none;
}

.premium-input {
  font-size: 14px !important;
  color: #005E9E;
  font-weight: 600;
  margin-bottom: 5px !important;
  border: 1px solid #8A93A5;
  border-radius: 5px;
  padding: 3px 6px;
  font-family: inherit;
  width: 100px;
  box-sizing: border-box;
  outline: none;
}
/* Optional: You can also add a minimum height for both sections to prevent content overflow */
.left-section,
.right-section {
    min-height: 100%; /* Ensures the sections stretch to fill the height */
}
.white-container {
    position: relative;
    background-color: #FFFFFF;
    padding: 10px; /* Add some padding */
    padding-top: 40px; /* Space above the section */
    padding-bottom:50px;
    box-shadow: 0 8px 8px rgb(191 188 188 / 30%);
}
.white-container::before {
    content: ''; /* Required for pseudo-element */
    position: absolute; /* Position it absolutely within the container */
    left: 0; /* Align to the left */
    top: 0; /* Start from the top */
    width: 4px; /* Width of the border */
    height: 80px; /* Height of the border */
    background-color: #ED1C24; /* Color of the border */
}
.payee-details {
    background-color: #F9F9F9;
    color: #233253;
    font-family: Poppins; font-weight: 500; font-size: 12px;
    padding: 15px;
}
.payee-details ul {
    list-style-type: none; /* Remove default list styling */
    padding: 0; /* Remove padding */
    margin-bottom: 0;
}
.payee-details li {
    border-bottom: 1px dotted #CCCCCC; /* Dotted border for list items */
    padding: 10px 0; /* Space between items */
}
.payee-details li:last-child{border-bottom: 0px }
.payee-details li p{color:#005E9E; font-family: Poppins; font-weight: 600; font-size: 12px;margin-bottom: 0;}
.summary-details {
    padding: 15px;
    margin-left:20px;
    margin-right:20px;
    padding-top:0;
}

.summary-details h2{font-size:14px; font-weight: 500;margin-bottom: 5px !important;}
.summary-details .policy-status {
    font-size: 11px;
    font-style: italic;
    color: #1F2223;
}
.deposit-amount{font-size: 14px !important;
    color: #005E9E;
    font-weight: 600;
    margin-bottom: 5px !important;}
.fa{font-size: inherit;}
.summary-details .pan-input {
    font-size: 12px;
    font-weight: 400;
    color: #59595B;
    border-color: #8A93A5;
}

.summary-details .no-pan-check, .form-check-label,
.summary-details .terms-check {
    color: #233253;
    font-size: 12px;
}
.emi-check-label{color: #FFFFFF;
    font-size: 12px;}
.terms-check{margin-top:10px;}
.no-pan-check{margin-top:10px;margin-bottom:5px}
.summary-details .policy-holder-section {
    background-color: #233253;
    padding: 10px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    padding-left: 20px;
    padding-right: 20px;
}

.summary-details .policy-holder-section .policy-holder-text {
    color: #FFFFFF;
    font-size: 14px;
    margin-bottom: 0px;
    font-weight: 600;
}

.summary-details .policy-holder-section .form-check-label {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
}

.summary-details .submit-button {
    width: 100%;
    background-color: #0083C3;
    border: none;
    margin-top:20px;
    font-size:14px;
}
.red-button {
    display: flex;
    justify-content: center;
    min-width: 120px;
    margin:0 auto;
    background-color: #FFFFFF;
    border: 1px solid red;
    color:#FF373F;
    border-radius: 4px;
    font-size:12px;
    font-weight: 500;
    padding:10px;
}

.footer-content{margin-bottom:40px;}
.footer-content p{color:#1F2223 !important; font-weight: 400;}
.semi-bold{font-weight: 500 !important;}
.premium-amount{font-size: 14px !important;
    color: #005E9E;
    font-weight: 600;margin-bottom: 5px !important;}
.payee-details a{text-decoration: none;}
/* Tab styling for the left section */
#tab-navigation .nav-link {
    background-color: #f9f9f9;
    color: #233252;
    font-weight: 600;
    font-size: 12px;
    padding: 12px;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
    border-left: 4px solid transparent;
    transition: all 0.3s ease;
}

#tab-navigation .nav-link:last-child {
    border-bottom: none;
}

/* Hover and Active state for the tabs */
#tab-navigation .nav-link:hover,
#tab-navigation .nav-link.active {
    background-color: #005E9C !important;
    color: #FFFFFF;
    border-left: 4px solid #EE1C24;
}

/* Premium payable styling */
.net-premium {
    text-align: right;
    padding: 10px;
    padding-right: 20px;
    padding-bottom: 2px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    padding-left:0;
}

.net-premium p {
    font-size: 10px;
    color: #97a0a7 !important;
    font-weight: 600;
}

.net-premium h4 {
    font-size: 24px;
    font-weight: 700;
    color: #233252;
}

/* Icon boxes styling */
.icon-boxes img {
min-height: 30px;
}
.pay-icon-boxes{margin-bottom:20px !important}
.pay-icon-boxes img{min-height: 30px;}

.policy-holder-section {
    background-color: #233253;
    padding: 10px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    padding-left: 20px;
    padding-right: 20px;
}

.emi-holder-section {
    background-color: #233253;
    padding: 10px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    padding-left: 20px;
    padding-right: 20px;
}
.calendar-month-year .month{margin-right:5px}
.left-section .first-tab-content .icon-box {
    width: 75px;
    height: 85px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 1px 6px 8px 2px #E7F0F9;
    padding: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 15px;
    margin-bottom: 25px;
}
.pay-icon-box {
    width: 75px;
    height: 85px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 1px 6px 8px 2px #E7F0F9;
    padding: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 15px;
    margin-bottom: 5px;
}
.pay-icon-box:hover{border:1px solid #ED1C24; cursor: pointer;}
.pay-icon-box p {
    font-size: 10px !important;
    font-weight: 600 !important;
    margin-bottom: 5px;
    margin-top: 10px;
    color: #233252;
}
.icon-box:hover{border:1px solid #ED1C24; cursor: pointer;}
.icon-box p {
    font-size: 10px !important;
    font-weight: 600 !important;
    margin-bottom: 5px;
    margin-top: 10px;
    color: #233252;
}

/* Textbox with verify button */
.left-section .first-tab-content .verify-input {
    margin-bottom: 20px;
    position: relative;
    margin-left: 0;
}

.left-section .first-tab-content .verify-input .input-group {
    background-color: #f4f4f4;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    height: 50px;
}

.zero-left .col-12 {
    padding-left: 0;
}

.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.left-section .first-tab-content .verify-input .form-control {
    border: none;
    padding: 5px;
    padding-left:10px;
    font-size: 14px;
    color: #6c6c6e;
    background-color: transparent;
    height: 100%;
}

.left-section .first-tab-content .verify-input .btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #c4c9d2;
    color: #FFFFFF;
    border: none;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}
button.active{background-color: #1183ce !important;}
/* White box with OR text */
.left-section .first-tab-content .or-section {
    text-align: center;
    margin-bottom: 20px;
}

.left-section .first-tab-content .or-section p {
    font-size: 14px;
    font-weight: 600;
    color: #233252;
    margin-bottom: 0;
}

/* QR Section styling */
.left-section .first-tab-content .qr-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    margin-top: 0px;
}
.left-section .first-tab-content{padding-left:0}
.left-section .first-tab-content .qr-section img {
    max-width: 50px;
}

.left-section .first-tab-content .qr-section p {
    font-size: 14px;
    color: #233252;
}

.left-section .first-tab-content .qr-section .icon-box {
    margin-right: 20px;
}

/* Timer and Proceed button */
.left-section  .timer-section {
    text-align: center;
    margin-bottom: 10px;
}

.left-section .timer-section p {
    font-size: 12px;
    font-weight: 600;
    color: #EE1C24;
    margin-bottom: 0px;
}

.left-section .proceed-btn {
    display: block;
    width: 35%;
    margin: 0 auto;
    background-color: #c4c9d2;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
}
.tab-content h6{text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #005E9E;margin:10px 0 10px 0}
/* Pay UPI app section styling */
.pay-upi-app-section .col-12 {
    padding-left: 0;
    padding-right: 0;
    position: relative;
}
.pay-upi-app-section{margin-top:20px !important}
.pay-upi-app-section label {
    display: block;
    background-color: #f7f7f7;
    padding: 20px;
    width: 100%;
    border-radius: 15px;
    border: 1px solid #d9d9d9;
    color: #000000;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    position: relative;
    padding-left: 40px;
    margin-top:0px;
    margin-bottom:10px
}

.pay-upi-app-section label::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 15px;
    width: 18px;
    height: 18px;
    background-color: #e4e4e4;
    border-radius: 50%;
    border: 1px solid #d9d9d9;
    transform: translateY(-50%);
    transition: background-color 0.3s ease;
}

.pay-upi-app-section label::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 24px;
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: background-color 0.3s ease;
}

.pay-upi-app-section input {
    display: none;
}

.pay-upi-app-section input:checked + label {
    background-color: #ffffff;
    border-color: #0083c1;
}

.pay-upi-app-section input:checked + label::before {
    background-color: #ffffff;
    border-color: #0083c1;
}

.pay-upi-app-section input:checked + label::after {
    background-color: #ee1c24;
}

.pay-upi-app-section label:hover {
    background-color: #ebf5f9;
    border-color: #0083c1;
}

.pay-upi-app-section input:checked + label {
    background-color: #ebf5f9;
    border-color: #0083c1;
}

/* Right Section Styling */
.payment-container-sec .right-section{padding-right: 0;}
.right-section ul {
    background-color: #FFFFFF;
    padding: 20px;
    list-style-type: none;
    margin-left: 5px;
}
.right-section ul::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 0;
    width: 4px;
    height: 80px;
    background-color: #ED1C24;
}
.right-section ul li {
    padding: 10px 20px;
    border-bottom: 1px dotted #e0e0e0;
    display: flex;
    flex-direction: column;
    background-color: #ebf5f9;
}

.right-section ul li .item-heading {
    font-size: 14px;
    color: #333333;
    font-weight: 500;
    position: relative;
    margin-bottom: 5px;
    padding-left: 22px;
}

.right-section ul li .item-heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    transform: translateY(-50%);
    background: url('../images/shield.png') no-repeat;
    background-size: contain;
    width: 20px;
    height: 18px;
}

.right-section ul li .item-value {
    font-size: 14px;
    color: #005e9c;
    font-weight: 600;
    display: flex;
    margin-left: 22px;
    align-items: center;
}

.info-icon {
    width: 20px;
    margin-right: 2px;
}
.info-icon img{width:15px}
.tooltip-inner{background-color: #E8E8E8;
    color: #233253;font-size:11px;min-width: 260px; padding: 5px; box-shadow: 0px 3px 7px rgb(6 6 6 / 32%);
}
    .tooltip .tooltip-arrow::before {border-top-color: #E8E8E8 !important;}
.right-section ul li:last-child {
    border-bottom: none;
}

/* View More button styling */
.view-more-btn {
    display: inline-block;  
    text-align: center;  
    color: #0083C3 !important;  
    text-transform: uppercase; 
    font-size: 12px;  
    font-weight: 500;  
    border: none;  
    background: none;  
    cursor: pointer;  
    margin: 10px auto;  
    padding: 5px;  
    text-decoration: none;
}
/* Layout for Payable Row */
.net-premium .payable-row {
    float: right;
}

.net-premium .payable-info {
    text-align: right;
    margin-left: 10px;
    color: #233252;
}

/* Alert slide styling */
#slow-internet-alert {
    position: fixed;
    top: -100px; /* Start off the screen above */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    max-width: 90%;
    background-color: #f5e94b; /* Warning yellow color */
    border: 1px solid #C7CACC;
    color: #333;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    transition: top 0.5s ease; /* Slide-in effect */
    z-index: 1000;
}

#slow-internet-alert.show {
    top: 40px; /* Slide down from the top */
}

#slow-internet-alert .warning-icon {
    font-size: 24px;
    color: #FF5722; /* Warning color for icon */
    margin-right: 10px;
}
.container-sec .row {
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping on larger screens */
    justify-content: space-between; /* Space between left and right sections */
    align-items: flex-start; /* Align sections to the top */
    margin: 0 auto; /* Center the content within the container */
    max-width: 1220px; /* Restrict maximum width */
    padding: 0 20px;
}
.inner-container-sec .row {
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping on larger screens */
    justify-content: space-between; /* Space between left and right sections */
    align-items: flex-start; /* Align sections to the top */
    max-width: 1220px; /* Restrict maximum width */
    padding: 0 20px;
    margin-left:0;
    margin-right:0
}
.payment-container-sec{margin:0 80px}
.payment-container-sec .row{display: flex;
    justify-content: space-between; /* Space between left and right sections */
    align-items: flex-start; /* Align sections to the top */
    margin: 0 auto; /* Center the content within the container */
    max-width: 1220px; /* Restrict maximum width */
    padding: 0;}
.payment-container-sec .left-section{background-color: #FFFFFF; padding:15px 5px}
.login-form{
    border-radius: 24px; /* Border radius */
    background-color: #ffffff; /* White background */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.05);
    padding:40px 25px 40px 25px;
    margin-top:30px;
}

.error{display:none; color:#ED1C24; font-size: 12px; margin-top:5px;}
.login-form .quick-pay-title{
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #233253;
    margin-bottom: 20px;
    background: url(../images/heading-bg.png) no-repeat 0 0;
    background-size: 54px 54px;
    padding-left: 25px;
    height: 54px;
    padding-top: 13px;
    margin:0 auto;
    margin-bottom: 20px;
}

.login-form .mb-3{margin-bottom:20px !important}

.login-form .quick-pay-title .quick {
    color: #ED1C24; /* Highlight "Quick" in red */
}
.login-form .form-label{
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #233253;
    margin-bottom: 8px; 
}

.login-form .form-control {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #233253;
    background-color: #F4F4F4;
    border: 1px solid #F4F4F4; /* Default border */
    border-radius: 8px; /* Optional rounded corners */
    padding: 10px; /* Space inside the input */
    padding-left:12px;
    box-sizing: border-box;
    transition: border-color 0.3s ease; /* Smooth transition for border color */
}

.login-form .form-control:focus {
    border: 1px solid #ED1C24; /* Border color when focused */
    outline: none !important; /* Remove default outline */
    box-shadow: none !important;
}
.login-form .btn-primary {
    background-color: #0083C3;
    color: #FFFFFF;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    border: none;
    padding: 12px 20px; /* Button padding */
    border-radius: 8px; /* Rounded corners */
    cursor: pointer;
    margin-top:10px;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
    box-shadow: 0px 8px 12px rgba(0, 131, 195, 0.2); /* Button shadow */
    width:100%;
}
.login-form .btn-primary:hover {
    background-color: #006999; /* Slightly darker shade */
    box-shadow: 0px 12px 20px rgba(0, 131, 195, 0.3); /* Enhanced shadow on hover */
    transform: translateY(-2px); /* Lift effect */
}

/* Button active state */
.login-form .btn-primary:active {
    transform: translateY(1px); /* Pressed effect */
    box-shadow: 0px 6px 10px rgba(0, 131, 195, 0.2); /* Slightly smaller shadow */
}
input.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
/*Calander*/
/* Calendar Wrapper */
.date-picker-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}

.calendar-icon {
    cursor: pointer;
    margin-left: 8px;
    color: #233253;
    font-size: 16px;
}

.calendar-icon svg{color: #233253;}

.custom-calendar {
    position: absolute;
    z-index: 1050; /* Ensure it's above other elements */
    width: 100%; /* Match the width of the form-control */
    max-width: none; /* Remove any predefined max-width */
    background-color: #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 15px;
    display: block; /* Hidden by default */
    box-sizing: border-box;
}

.custom-calendar.hidden {
    display: none;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #F4F4F4;
    border-bottom: 1px solid #E0E0E0;
}
.calendar-header button{box-shadow:none; margin-top:0; min-width: auto;}
.calendar-header .prev-year-btn,
.calendar-header .next-year-btn {
    background: none;
    border: none;
    color: #233253;
    font-size: 16px;
    cursor: pointer;
}

.calendar-header .icon {
    margin-right: 10px; /* Add space between text and icon */
    font-size: 12px;
    color: #6c757d; /* Gray color */
}

.dob-container {
    position: relative;
    display: inline-block; /* Adjust as per layout */
    width: 100%; /* Ensure input and icon fit container */
}

.dob-container .form-control {
    width: 100%; /* Ensure full width */
    background-color: #F4F4F4; /* Background color */
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #233253;
    border: 1px solid #F4F4F4; /* Default border */
    border-radius: 8px; /* Smooth corners */
    padding: 10px 12px;
    outline: none; /* Remove blue outline */
    box-sizing: border-box;
    transition: border-color 0.3s ease-in-out;
}

.dob-container .calendar-icon {
    position: absolute;
    top: 50%;
    right: 10px; /* Adjust the right spacing */
    transform: translateY(-50%);
    pointer-events: none; /* Prevent icon from blocking input click */
    color: #233253; /* Icon color */
}

.calendar-header .calendar-month-year {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #233253;
}

.calendar-body {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 7 columns for days of the week */
    gap: 5px;
    padding: 10px;
}

.calendar-body .calendar-day,
.calendar-body .calendar-month,
.calendar-body .calendar-year {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #233253;
    background-color: #F4F4F4;
    border: none;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
}

.calendar-body .calendar-day:hover,
.calendar-body .calendar-month:hover,
.calendar-body .calendar-year:hover {
    background-color: #ED1C24;
    color: #FFFFFF;
}

.calendar-body .empty-cell {
    background: none;
    pointer-events: none;
}

mobile-video-player iframe {
    width: 100%;
    height: 200px;
    border: none;
    border-radius: 8px;
}

/* Fixed Footer Container for Mobile View */
.fixed-footer-container {
    position: fixed;
    bottom: 0; /* Fix to bottom */
    left: 0; /* Ensure it starts at the left */
    width: 100%; /* Full width of the viewport */
    background-color: #FFFFFF; /* White background */
    border-top: 1px solid #CCCCCC; /* Add top border */
    z-index: 1000; /* Ensure it stays on top */
    display: flex;
    justify-content: space-between; /* Space between left and right sections */
    align-items: center;
    padding: 10px 20px; /* Padding for spacing */
    box-sizing: border-box; /* Prevent padding from increasing width */
    overflow: hidden; /* Prevent content overflow */
    max-width: 100%;
}

.fixed-footer-container .proceed-left-section {
    text-align: left; /* Align text to the left */
    white-space: nowrap; /* Prevent text from breaking */
    flex: 1; /* Allow the section to take available space */
    font-size: 10px;
}

.fixed-footer-container .proceed-right-section {
    text-align: right; /* Align text to the right */
    flex: 1; /* Allow the section to take available space */
}

.fixed-footer-container .net-premium-label {
    font-size: 10px;
    color: #CCCCCC;
    font-weight: 600;
}

.fixed-footer-container .right-section .proceed-btn {
    background-color: #0083C3; /* Button color */
    color: #FFFFFF; /* Text color */
    border: none;
    border-radius: 8px;
    padding: 10px 20px; /* Adjust button padding */
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.fixed-footer-container .right-section .proceed-btn:hover {
    background-color: #006999; /* Darker on hover */
}

.fixed-footer-container .premium-amount-value {
    font-size: 14px;
    font-weight: 600;
    color: #233253;
    margin: 0;
}

.fixed-footer-container .btn {
    background-color: #0083C3;
    color: #FFFFFF;
    font-weight: 600;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 12px;
    margin-top:0;
}

.policy-renewal-heading {
    background-color: #EBF5F9;
    text-align: center;
    padding: 20px 20px 20px; /* Add space for the SVG */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    gap: 10px; /* Space between SVG and text */
    font-size: 20px;
    color: #005E9E;
    font-weight: 600;
    display: none;
    
}
h2.policy-renewal-heading{margin-bottom:0;}
.circle-tick {
    display: block; /* Ensures proper block alignment */
}
.policy-renewal-unsuccess {
    background-color: #EBF5F9;
    text-align: center;
    padding: 20px 20px 20px; /* Add space for the SVG */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    gap: 10px; /* Space between SVG and text */
    font-size: 20px;
    color: #ED1C24;
    font-weight: 600;
    margin-bottom:0
}

.line {
    display: block;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, #ED1C24 50%, #005E9E 50%);
}

.graybg{background-color: #F9F9F9;}
.center-container{max-width: 75%; margin: 0 auto; margin-top:40px}
.center-container p{font-size:12px; color:#5A5A5A}
.policy-info {
    background-color: #EBF5F9;
  }
  
  /* Ensure the row's columns stretch to the same height */
  .policy-info .row {
    align-items: stretch; 
  }
  
  .policy-detail .shield-icon {
    /* Replace inline SVG with your shield.png */
    width: 20px;
    height: 20px;
    background: url('../images/shield.png') no-repeat center center;
    background-size: contain;
  }
  
  .label-text {
    font-size: 12px;
    color: #808C9B; /* Muted label color */
  }
  
  .value-text {
    font-size: 12px;
    color: #1A1A1A; /* Darker value color */
    font-weight: 500;
  }
  
  /* Vertical Divider */
  .vertical-line {
    width: 1px;
    background-color: #CCD1D9;
    height: 22vh;
    /* Let the parent .row + align-items-stretch determine the height */
  }
  
  /* Icons Column */
  .icons-column {
    justify-content: center;
  }
  
  .icon-stack i {
    color: #333; /* Or #005E9E if you prefer a bluish icon */
  }
  
  .icon-label {
    font-size: 11px;
    margin-top: 2px;
    color: #000000;
    font-weight: 500;
  }
  
  .icon-separator {
    width: 30px;
    border: 0;
    border-top: 1px solid #000000;
    margin: 8px auto;
    opacity: inherit;
  }
  

.policy-info .row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.payee-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
}

.payee-details ul li {
    margin-bottom: 8px;
    color: #333;
    font-weight: 500;
}

.policy-info .text-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.policy-info .text-center i {
    margin-bottom: 2px;
    color: #5A5A5A;
}

.policy-info .text-center p {
    margin: 0;
    font-size: 14px;
    color: #333;
}


/*Calander*/
/* Responsive behavior for medium screens (1280px and below) */
@media (max-width: 1280px) {
    .container-sec .row {
        max-width: 100%; /* Ensure full width for smaller desktops */
        padding: 0 15px; /* Adjust padding */
    }

    
}
/* Desktop-specific styles */
@media (min-width: 992px) {
    
    .payee-list-container {
        flex-direction: column; /* Stack items in desktop */
        align-items: flex-start; /* Align content to the left */
    }
    .extra-li {
        display: inline-block; /* Show all list items on desktop */
    }
    #viewMoreBtn {
        display: none; /* Hide the "View More" button on desktop */
    }
    .right-section {
        position: relative;
    }

    .extra-li {
        display: block !important;
        
    }

    .view-more-btn {
        display: none;
    }
    .fixed-footer-container {
        display: none; /* Hide fixed footer container for desktop */
    }
}

/* Mobile behavior */


@media (max-width: 549.98px) {

    #slow-internet-alert {
        top: -100px;
        width: 90%;
        font-size: 12px;
        padding: 8px;
    }

    #slow-internet-alert.show {
        top: 30px;
    }

    #slow-internet-alert .warning-icon {
        font-size: 18px;
        margin-right: 6px;
    }
    .right-section ul {
        width: 100%;
    }

    .accordion-body {
        padding: 0;
    }

    .right-section {
        padding-left: 5px;
        padding-right: 5px;
    }

    .icon-boxes, .verify-input {
        display: none;
    }

    /* Show .pay-upi-app-section only in mobile view */
    .pay-upi-app-section {
        display: block;
    }
    .accordion-button:not(.collapsed){box-shadow:none}
    /* Show icon-boxes and verify-input when the UPI address radio is selected */
    #pay-upi-address:checked ~ .icon-boxes,
    #pay-upi-address:checked ~ .verify-input {
        display: flex;
    }

    /* Hide icon-boxes and verify-input when the installed UPI option is selected */
    #pay-installed-upi:checked ~ .icon-boxes,
    #pay-installed-upi:checked ~ .verify-input {
        display: none;
    }
    .accordion-body {
        padding: 20px;
        padding-bottom: 20px;
    }
    /* Ensure proper flex layout for icon-boxes and verify-input */
    .icon-boxes,.pay-icon-boxes,.verify-input {
        flex-direction: row;
    }
    .pay-icon-boxes, .icon-boxes{gap:8px; margin-bottom:10px}
    .form-control{display: flex !important;}
    .or-class{display: none;}
}

/* Desktop behavior */
@media (min-width: 550px) {
    .first-tab-content{    padding-left: 10px;
        padding-right: 10px;}
    /* Hide .pay-upi-app-section on desktop */
    .pay-upi-app-section label{display: none;}
    /* Force show .icon-boxes and .verify-input on desktop */
    .icon-boxes,.pay-icon-boxes,.verify-input {
        display: flex !important; /* Ensure they are shown on desktop */
        margin-left: 10px;
        margin-bottom: 20px;
       
    }
.form-control{display: flex !important;}
    /* Add any additional styling needed for desktop view */
    .icon-boxes,.pay-icon-boxes {
        flex-direction: row; /* Align icons horizontally for desktop */
        gap: 10px;
        margin-top: 10px;
    }
    .or-class{text-align: center;}
    
}

/*Login Section*/

/* Video container styling */

.container-sec.login-bg {
    display: flex;
    justify-content: flex-end; /* Align content to the right */
    align-items: center; /* Vertically center content */
    background: url('../images/login-bg.png') no-repeat right 35%; /* Adjust positioning */
    background-size: contain; /* Ensure the image is fully visible */
    padding: 20px;
    min-height: 60vh; /* Use min-height for full viewport height */
    width: 100%;  
    box-sizing: border-box;  
    margin-top: 20px;
}
/* Slider section styling */
/* Slider Section */
.slider-section {
    width: 100%;
    overflow: hidden; /* Prevent overflow */
    position: relative;
    margin: 0px auto;
}

.slider {
    width: 100%;
    overflow: hidden;
}
.white-box {
    background-color: #fff;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    padding: 15px;
    box-sizing: border-box;
    margin-right: 20px; /* Space between boxes */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.notice-box {
    box-sizing: border-box; font-size:12px;margin-top:20px;padding-bottom:15px;border-bottom: 1px solid #c5bfbf;margin-bottom:20px}
    .notice-box ul{list-style: none; 
        padding: 0;
        margin: 0;}
    .notice-box li {
        position: relative;     /* So we can place the custom bullet absolutely */
        padding-left: 20px;     /* Space for the arrow bullet on the left */
        margin-bottom: 8px;     /* Optional spacing between items */
        color: #233253;
        font-weight: 400;
        line-height: 22px;
      }

      .notice-box li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10px;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-left: 6px solid #ED1C24;
        border-top: 6.5px solid transparent;
        border-bottom: 6.5px solid transparent;
        margin-right: 10px;
      }
.notice-box p{margin-bottom: 10px;}
.notice-box strong{color:#233253; font-size:12px;font-weight:600}
.wrap{display: flex;margin-bottom:10px}
.disclaimer{font-size:10px; font-weight: 400; color:#233253;font-style: italic;}
.list-container{width:100%; margin-top:20px}
.list-box{display: flex;
    align-items: flex-start;
    padding: 5px;
    box-sizing: border-box;
    margin-right: 20px; }
.slider-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    
}

.arrow-left {
    width: 0;
    height: 0;
    border-left: 6px solid #ED1C24;
    border-top: 6.5px solid transparent;
    border-bottom: 6.5px solid transparent;
    margin-right: 10px;
    margin-top: 2px;
}

.list-text {
    color: #233253;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 400;
}
.head{font-size: 12px; color: #233253; font-weight: 600; margin-bottom: 5px;}
/* Slider Dots */
.slider-dots {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.slider-dots .dot {
    width: 10px;
    height: 10px;
    background-color: transparent;
    border: 1px solid #0083C3;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}


.slider-dots .dot.active {
    background-color: #0083C3;
}
.payment-summary-slider .slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.payment-summary-slider .slider-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    box-sizing: border-box;
    gap: 20px;
    margin-left: 10px;
    width: 100%;

}

.payment-summary-slider .slide {
    flex: 0 0 calc(100% - 15px); 
    margin-right: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
}

.payment-summary-slider .white-box {
    display: flex;
    align-items: flex-start;
    background-color: #ffffff;
    border-radius: 0px;
    padding: 15px;
    margin: 0 auto;
    margin-bottom: 20px;
    box-shadow: none;
    box-sizing: border-box;
    height: auto;
}

.payment-summary-slider .arrow-left {
    width: 0;
    height: 0;
    border-left: 6px solid #ED1C24;
    border-top: 6.5px solid transparent;
    border-bottom: 6.5px solid transparent;
    margin-right: 10px;
    margin-top: 2px;
    flex-shrink: 0;
}

.payment-summary-slider .list-text {
    color: #233253;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    line-height: 1.4;
    flex: 1;
}

/* Slider Dots */
.payment-summary-slider .slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.payment-summary-slider .slider-dots .dot {
    width: 10px;
    height: 10px;
    background-color: transparent;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    border: 1px solid #0083C3;
}

.payment-summary-slider .slider-dots .dot.active {
    background-color: #0083C3;
}
.tooltip-section{position: relative;}
.footer{font-size:10px;background-color: #FFF;}
.h-100{min-height: 112px;}
/* Lightbox styling */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999 !important;
    justify-content: center;
    align-items: center;
}

.lightbox.show {
    display: flex;
}

.lightbox-content {
    position: relative;
    background: #ffffff;
    border-radius: 8px;
    padding: 10px;
    max-width: 80%; /* Adjust as needed */
    width: 800px; /* Set a fixed width */
    display: flex;
    justify-content: center;
    align-items: center;
}
.lightbox-content iframe {
    width: 100%; /* Make iframe fill the container */
    height: 100%; /* Make iframe fill the container */
    border: none; /* Remove border */
    border-radius: 8px;
}
.close-lightbox {
    position: absolute;
    top: -20px; /* Adjust position */
    right: -20px; /* Adjust position */
    width: 40px; /* Circle diameter */
    height: 40px; /* Circle diameter */
    background-color: #ffffff; /* White circle background */
    border: 2px solid #ED1C24; /* Red border */
    color: #ED1C24; /* Red close icon color */
    font-size: 30px; /* Icon size */
    text-align: center; /* Center the icon */
    line-height: 36px; /* Vertically align the icon */
    border-radius: 50%; /* Make it circular */
    cursor: pointer; /* Add pointer cursor */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Optional: Add shadow */
    z-index: 1001; /* Ensure it's above other elements in the lightbox */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add hover effect */
}
.close-lightbox:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Emphasize shadow on hover */
}

.payment-lightbox, .transfer-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 87%); /* Semi-transparent background */
    display: flex/*  !important */; /* Flexbox for centering */
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure it appears above other elements */
    opacity: 1 !important; /* Ensure visibility */
    visibility: visible !important; /* Ensure it's not hidden */
}

.payment-lightbox h2, .transfer-lightbox h2{font-size: 22px;
    color: #233253; font-weight: 500;margin-top:20px; margin-bottom: 10px;}
    .transfer-lightbox h2{margin-bottom: 0px;}

    .payment-lightbox p, .transfer-lightbox p{color:#233253; font-size: 14px; max-width: 80%; font-weight: 400; margin:8px 0} 
    .transfer-lightbox p{margin:10px 0} 
    
    .payment-lightbox .premium-amount{font-size: 21px !important; font-weight: 600;color: #233253;}

    .timer-note{font-size: 12px !important; font-weight: 400 !important;}
    .timer{color: #FF373F;}
.lightbox-buttons{    margin: 10px;
    gap: 20px;
    display: grid
;}
.qr-code{margin:10px 0 10px 0}
.payment-lightbox strong, .transfer-lightbox strong{font-size: 14px; font-weight: 500;}
/* Lightbox content */
.payment-lightbox .lightbox-content, .transfer-lightbox .lightbox-content {
    background: #fff;
    border-radius: 10px;
    width: 90%;
    max-width: 700px;
    padding: 20px;
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    flex-direction: column;
}



/* Close button */
.payment-lightbox .lightbox-close, .transfer-lightbox .lightbox-close  {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #233253;
}
/* QR code image */
 
.auto-debit-yes{background-color: #0083C3;
    border-radius: 4px;
    font-size: 14px; color: #FFFF; padding: 10px;}

    .auto-debit-yes:hover{background-color: #0083C3;}

    .auto-debit-no{background-color: #FFFFFF;
        border-radius: 4px;
        font-size: 14px; color: #0083C3;border:1px solid #0083C3; padding: 10px;}
        .auto-debit-no:hover{background-color: #FFFFFF;color: #0083C3;border:1px solid #0083C3;}

    .auto-debit-yes span, .auto-debit-no span{font-weight: 600;}
/* Cancel button */
.lightbox-cancel {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #0083C3;
    border: 1px solid #0083C3;
    color: #FFFFFF;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 600;
    min-width: 200px;
    box-shadow: 0px 8px 12px rgba(0, 131, 195, 0.2);
}
.red-outline {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: transparent;
    border: 1px solid #FF373F;
    color: #FF373F;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 600;
    min-width: 200px;
}


/*Payment Status*/

.payment-failed-container, .payment-sucess-container {
    text-align: center;
     padding: 20px;
      max-width: 500px;
    width: 100%;
    margin: 0 auto;
    align-items: center;
    display: flex
;
    flex-direction: column;
}

.payment-failed-container img, .payment-sucess-container img {
     margin-bottom: 20px;
}

.payment-failed-title {
    font-size: 20px;
    color: #FF4E4E;
    margin-bottom: 10px;
    font-weight: 600;
}
.payment-success-title {
    font-size: 20px;
    color: #38C170;
    margin-bottom: 10px;
    font-weight: 600;
}
.payment-failed-message {
    font-size: 12px;
    color: #FF4E4E;
    margin-bottom: 20px;
}
.payment-success-message {
    font-size: 13px;
    color: #233253;
    margin-bottom: 20px;
    font-weight: 600;

}

.payment-amount {
    font-size: 12px;
    color: #233253;
    margin-bottom: 30px;
}

.payment-amount .amount {
    font-size: 20px;
    color: #233253;
    font-weight: 600;
}
.payment-amount .rupees{font-size: 20px; font-weight: 600;}
.payment-failed-container.buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.payment-failed-container .buttons button {
    padding: 10px 20px;
    font-size: 14px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    flex: 1;
    margin: 0 5px;
}

.close-btn {
    background-color: #FFFFFF;
    color: #0083C3;
    border: 1px solid #0083C3 !important;
    min-width: 200px;
    font-size: 14px;
    font-weight:500;
    margin-bottom: 20px !important;
}

.close-btn:hover {
    background-color: #FFFFFF;
}

.retry-btn {
    background-color: #0083C3;
    color: #fff;
    min-width: 200px;
    font-size: 14px;
    font-weight:500;
}

.retry-btn:hover {
    background-color: #0083C3;
}



.des-text{position: relative; top:-30px; font-size: 12px; font-weight: 400;}
#youtube-player {
    border-radius: 8px;
    width: 100%;
    height: 400px;
}
.debit-section{background-color: #FFFFFF;
    padding: 20px;
    margin: 0 auto;border: 1px solid #C7CACC; padding-top:60px;   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2); padding-bottom: 60px;/* Shadow for depth */
}
.debit-section .row{margin:60px;background-color: #ebf5f9;padding:50px; margin-top:0 ; margin-bottom: 30px;}
 .item-heading{    font-size: 14px;
    color: #8A93A5 !important;
    font-weight: 500;
    position: relative;
    margin-bottom: 5px;
    padding-left: 22px;}
.debit-section .item-heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    transform: translateY(-50%);
    background: url('../images/shield.png') no-repeat;
    background-size: contain;
    width: 20px;
    height: 18px;
}
.debit-section .item-value {
    font-size: 14px;
    color: #1F2223;
    font-weight: 500;
    margin-left: 22px;
}
.debit-section .row>*{border-bottom: 1px solid #8A93A5; padding-bottom: 20px;padding-top:20px}
.debit-section .no-border{border-bottom: 0px solid red;}

.debit-section-title {
    background: url(../images/heading-bg.png) no-repeat 0px 0px;
    background-size: 54px 54px;
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    font-weight: 600;
    height: 60px;
    padding-left: 30px;
    padding-top: 10px;
}
.title-card{margin: 0 auto;width:300px;}
.debit-section-title .red {
    color: #ED1C24;
}   
.debit-section .btn-primary {
    background-color: #0083C3;
    color: #FFFFFF;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 10px;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
    box-shadow: 0px 8px 12px rgba(0, 131, 195, 0.2);
    width: 100%;
    max-width: 300px;
   
    margin: 0 auto;
}

.btn-primary {
    background-color: #0083C3;
    color: #FFFFFF;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    border: none;
    padding: 12px 20px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
    box-shadow: 0px 8px 12px rgba(0, 131, 195, 0.2);
    width: 100%;
    margin: 0 auto;
}

 

.pad-left-70{padding-left:70px;}
@keyframes bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
}
.custom-tooltip {
    background-color: #f3e199e6; /* Tooltip background color */
    font-size: 12px;
    color: black; /* Tooltip text color */
    padding: 10px; /* Padding around the text */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2); /* Shadow for depth */
    text-align: center;
    min-height: 40px;
    z-index: 9999; /* Ensure it appears above other elements */
    animation: bounce 0.9s ease-in-out infinite;
}

.custom-tooltip.hidden {
    display: none; /* Ensure hidden class hides the tooltip */
}

.custom-tooltip.d-block {
    display: block; /* Show the tooltip when d-block class is added */
}


/* Positioning classes */
.tooltip-top {
    margin-bottom:10px;
}

/* Arrow styling */
.custom-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: rotateX(180deg);
    margin-left: -5px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #f3e199e6 transparent;
}
.accordion-button::after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.accordion-button:not(.collapsed)::after {
    transform: translateY(-50%) rotate(180deg); /* Upward arrow */
}


.accordion-section .accordion,.accordion-body{border:0px;--bs-accordion-border-width:none;--bs-accordion-border-color:transparent}
.accordion-section .accordion-item{margin-bottom: 20px; border:1px solid #C7CACC;border-radius: 0; }
.accordion-section {
    margin-top: 30px;
  }
.accordion-heading {
    background-color: #005E9E;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 16px;
    margin-bottom: 16px;
    border: none; 
 }
 .warning-txt {
  color:#ED1C24 !important
  }

.warning-txt svg{margin-right:5px}
  
  
.accordion-section .accordion-header {
    position: relative;
    padding-left: 40px; /* Space for the number circle */
    font-size: 14px;
    font-weight: 500;
    color:#233253;
    margin-bottom:10px;
    padding-top:10px;
}
.accordion-body{font-size:13px}
.accordion-section .accordion-number {
    display: inline-block;
    width: 40px;
    height: 40px;
    /* Gradient from top (#EDF8FF) to bottom (#FFFFFF) for a subtle effect */
    background: linear-gradient(180deg, #FFFFFF 0%, #EDF8FF 100%);
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    font-weight: 500;
    color: #005E9E;
    position: absolute;
    left: 10px;
    top: 60%;
    transform: translateY(-50%);
  }
  .accordion-section button{margin-top:0}

.accordion-section .accordion-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 40px;
    background-color: #ED1C24;
}
.accordion-section .accordion-button{ box-shadow: none !important;
    border: 0 !important;
    background: transparent;
    position: relative;
    padding-right: 50px;font-size:14px;font-weight:500;color:#233253}
.accordion-section .accordion-button:not(.collapsed){background-color: transparent;}

.accordion-section .accordion-button:focus{border:0px; border-color:none;box-shadow:none}

.accordion-number {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: linear-gradient(0%, #EDF8FF, #EDF8FF);
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    font-weight: 500;
    color: #005E9E;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}
.accordion-section .accordion-button::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: 1px solid #ED1C24;
    border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ED1C24'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%2010%20L12%2016%20L18%2010'%20/%3E%3C/svg%3E")
              no-repeat
              center;
background-size: 12px;
transition: transform 0.3s ease;  }
.accordion-section .accordion-button.completed::after {
    content: "";
    background-color: #3BB719; /* Green circle */
    border-color: #3BB719;    /* Green border */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0%200%2024%2024' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6%2012l4%204l8-8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px; /* Tick size inside the circle */
    transform: translateY(-50%) rotate(0deg) !important;
  }
  

.accordion-section .accordion-button:not(.collapsed)::after {
    transform: translateY(-50%) rotate(180deg);
  }

.accordion-section p{font-size:14px;font-weight: 400;}


/*Auto Debit*/

.radio-group {
    background-color: #233253;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    margin: 0 auto;
    padding:5px;
    max-width: 368px;
}



.radio-group input {
    margin-right: 2px;
}
.radio-group input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #FFFFFF;
    position: relative;
    cursor: pointer;
    outline: none;

}

.radio-group input[type="radio"]:checked::before {
    content: '';
    width: 8px;
    height: 8px;
    background-color: #ee1c24; /* Red color for selected dot */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.radio-group label {
    font-size: 14px;
    margin: 10px 10px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 2px;
}



.radio-group-white {
    display: flex;
    align-items: center;
    max-width: 368px;
}



.radio-group-white input {
    margin-right: 2px;
}
.radio-group-white input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #FFFFFF;
    position: relative;
    cursor: pointer;
    border: 1px solid #005E9E;
    outline: none;

}

.radio-group-white input[type="radio"]:checked::before {
    content: '';
    width: 8px;
    height: 8px;
    background-color: #ee1c24; /* Red color for selected dot */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.radio-group-white label {
    font-size: 14px;
    margin: 0 15px 0 0;
    color: #59595B;
    display: flex;
    align-items: center;
    gap: 2px;
}
.form-title {
    font-size: 14px;
    font-weight: 500;
    color: #1F2223;
}
.form-group p{font-size: 12px; font-weight: 400; line-height:25px; color:#1F2223}

#autoDebitForm .form-label{font-size:12px; font-weight:500; color:#233253}
#autoDebitForm .form-select{margin-top:0; background-color: transparent;border: 1px solid #8A93A5;}

#autoDebitForm input.form-control{border-radius: 4px; border:1px solid #8A93A5; color:#233253; font-size:12px;}
#autoDebitForm ul{padding-left:20px; color:#233253; font-size:12px}
#autoDebitForm .bluetxt{font-size:12px; color:#233253;}
 /*.form-check .form-check-input{float:none}*/  
.form-check-label{line-height: 18px; color: #59595B;}
.form-check .form-check-label a{font-weight: 400;}
hr {
    border: 1px solid #ddd;
    margin: 20px 0;
}
#autoDebitForm button{min-width:180px; width:auto; margin:0;}
.gap-20{gap:20px;}
.btn-outline-secondary{font-size:14px; color:#0083C3; border: 1px solid #0083C3;box-shadow:none}
#autoDebitForm .info{font-size:12px; font-weight:500 !important; color: #233253;margin: 0 0 10px 0;}
.list-unstyled{ color: #233253;}

.voc-title{
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #233253;
    margin-bottom: 20px;
    background: url(../images/heading-bg.png) no-repeat 0 0;
    background-size: 54px 54px;
    padding-left: 25px;
    height: 62px;
    padding-top: 13px;
    margin:0 auto;
    margin-bottom: 35px;
    max-width: 40%;
}


.voc-title .voc {
    color: #ED1C24; /* Highlight "Quick" in red */
}

/*VOC Starts*/
.feedback-container {
    max-width: 80%;
    margin: 40px auto;
    margin-bottom: 80px;
    padding: 80px 140px;
    background-color: #fff;
    border-radius: 12px;
    border: 1px solid #C7CACC;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-size: 12px;
  }
  .feedback-header img {
    width: 50px;
    margin-bottom: 10px;
  }
  .feedback-header h1 {
    font-size: 28px;
    color: #ED1C24;
    font-weight: bold;
  }
  .question-text {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #59595B;
    text-align: left;
  }
  
  /* ================ Q1: Rating Options ================ */
  .rating-options {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap; 
    margin-top: 30px;
    margin-bottom: 20px;
  }
  .rating-item {
    flex: 1 1 0;
    max-width: 80px;
    max-height: 80px;
    text-align: center;
    border: 1px solid transparent;  /* default border */
    border-radius: 12px;
    font-size: 10px;
    color: #767676;
    font-weight: 600;
    padding: 10px;
    background-color: #FFFFFF;
    transition: all 0.3s ease;
    box-shadow: 0 7px 15px rgb(35 54 160 / 16%);
    cursor: pointer;
  }
  .rating-item:hover {
    border-color: #ED1C24;  /* hover border */
  }
  .rating-item.active {
    border-color: #ED1C24;  /* active border */
    color: #233253;
  }
  .rating-item img {
    width: 40px;
    height: 40px;
    margin-bottom: 5px;
  }
  
  /* ================ Q2: Feedback Textarea ================ */
  .feedback-textarea {
    width: 100%;
    padding: 20px;
    height: 80px;
    background-color: #F4F4F4;
    border: 0;
    font-style: italic;
    font-size: 12px;
  }
  
  /* ================ Q3: Multiple Choice Options ================ */
  .multiple-choice-options .form-check {
    margin: 10px 6px;
    text-align: left;
  }
  .multiple-choice-options p {
    text-align: left;
    font-size: 12px;
    color: #233253;
  }
  
  /* ================ Q4: NPS Rating Section ================ */
  .nps-rating {
    text-align: center;
  }
  /* --- Mobile: Big Circle & Slider --- */
  .nps-mobile {
    display: block;
  }
  .nps-circle {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background-color: #FF4D4D;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #fff;
    margin: 0 auto 10px;
  }
  .nps-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 80%;
    height: 6px;
    border-radius: 10px;
    background: #EAF1F8;
    background-image: linear-gradient(#0083C3, #0083C3);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    outline: none;
  }
  .nps-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0083C3;
    border: 2px solid #fff;
    cursor: pointer;
    margin-top: 0px;
  }
  .nps-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0083C3;
    border: 2px solid #fff;
    cursor: pointer;
  }
  /* --- Desktop: Clickable Dots --- */
  .nps-dots {
    display: flex;
    gap: 17px;
    margin-bottom: 15px;
  }
  .nps-dots .rating-option {
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    background-color: #8A93A5;
    border-radius: 50%;
    font-weight: 400;
    font-size: 20px;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  .nps-dots .rating-option.active {
    background-color: #657D93;
  }
  .divider {
    border: none;            
    height: 1px;             
    background-color: #8A93A5;  
    margin: 30px 0;
  }
  
  /* ================ Q5 & Q6: Conditionally Shown ================ */
  .radio-group-white label {
    margin-right: 15px;
  }
  
  /* ================ Submit/Next Buttons ================ */
  .submit-button {
    background-color: #0083C3;
    color: #fff;
    display: flex;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    padding: 12px;
    border: none;
    border-radius: 8px;
    width: 100%;
    max-width: 330px;
    margin: 30px auto 0 auto;
    box-shadow: 0 4px 6px rgba(0, 131, 195, 0.2);
    transition: background-color 0.3s ease;
    cursor: pointer;
  }
 
   .hidden {
    display: none;
  }
  .nps-line-container {
    margin: 20px 0;
    text-align: left;
  }
  .rating-line {
    height: 6px;
    background: linear-gradient(to right, 
      #FF373F 63%, 
      #FFCE2B 64%, 
      #FFCE2B 82%, 
      #4ECC58 83%, 
      #4ECC58 100%
    );
    border-radius: 10px;
    max-width: 80%;
    margin-left: 0;
  }
  .nps-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 500;
    max-width: 80%;
    margin-left: 0;
  }
  .yellow-txt {
    margin-left: 35%;
  }
  .green-txt {
    margin-right: -1%;
  }
/*VOC Ends*/
#auto-debit-dropdown{margin-top:20px}
.name-title{font-size:12px; color:#1F2223; text-align: left;font-weight:500; margin-bottom: 20px;}
@media (min-width: 992px) {
    .container-sec.login-bg {
        max-width: 100%; /* Stretch the container to full width */
        margin: 0; /* Remove centering margins */
        padding: 0 20px; /* Add padding to avoid touching screen edges */
    }
}   
/* Responsive adjustments */
@media (max-width: 991px) {
    .center-container{max-width:85%}
    .container-sec.login-bg {
        flex-direction: column; /* Stack sections vertically */
        align-items: center; /* Center sections */
        background: none;
    }
    .debit-section{box-shadow: none; border: 0px;}
    .debit-section .row{margin:0; margin-bottom: 20px;}

    .debit-section .pad-left-70{padding-left:0;border-bottom: 1px solid #8A93A5;
        padding-bottom: 20px;}
    .form-section {
        width: 100%; /* Full width */
    }
    
    .container-sec.login-bg {
        background: none; /* Remove background for mobile */
        flex-direction: column; /* Stack items vertically */
    }

    .form-section {
        order: 1; /* Show the form section first */
        margin-bottom: 20px;
        width: 100%; /* Ensure full width on mobile */
    }
    .form-check-input[type=radio]{margin-top:5px}
    .slider-section {
        display: block; 
    }

    .lightbox {
        display: none !important; /* Always hide lightbox in mobile */
    }

    body{background-color: #FFFFFF;}

    .summary-details .policy-holder-section .form-check-label{font-size: 13px;}
    .summary-details .policy-holder-section .policy-holder-text{font-size: 13px;}
    .row {
        flex-direction: column;
    }
    #slow-internet-alert {
        top: -100px;
        width: 90%;
        font-size: 14px;
        padding: 10px;
    }

    #slow-internet-alert.show {
        top: 40px;
    }

    #slow-internet-alert .warning-icon {
        font-size: 20px;
        margin-right: 8px;
    }
    .net-premium {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #FFFFFF;
        padding: 15px;
        z-index: 1000;
        flex-direction: column;
    }
    .active-tab-label {
        display: none;
    }
    .pay-upi-app-section{margin-top:0px; margin-bottom: 20px !important;}
    .net-premium p.small,
    .net-premium h4 {
        text-align: left;
        margin: 0;
        padding: 0;
    }
    .left-section .first-tab-content .qr-section{display: none;}
    .timer-section p{color: #EE1C24 !important;margin-bottom:0}
    .container-sec {
        max-width: 100%;
    }
    .right-section ul li .item-value{    color: #504646;font-weight:600;}
    .container-sec .row {
        margin-right: 0;
        margin-left: 0;
        flex-wrap: wrap; /* Allow sections to stack vertically */
        padding: 0; /* Remove side padding */
        flex-direction: row;
    }

    .right-section ul {
        width: 80%;
        padding: 0;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 10px;
        position: relative;
    }

    .right-section ul::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 1px;
        background-color: #C7CACC;
    }

    .right-section ul li {
        border: none;
        display: flex;
        flex-direction: column;
        padding: 0 6px;
    }

    .left-section {
        width: 100%;
        margin: 0 auto;
        margin-top: 0px;
        border: none;
        position: relative;
    }

    .left-section {
        padding: 15px;
        min-height: 85%;
    }

    .net-premium {
        margin-bottom: 0px;
        text-align: center;
        display: block !important;
    }

    .left-section .tab-navigation {
        width: 100%;
    }

    .left-section .tab-content {
        width: 100%;
        padding-left: 0;
    }

   .extra-li {
        display: none;
        
    }
    .view-more-btn {
        display: block;
    }

    .accordion-button {
        font-size: 14px;
        font-weight: 600;
    }

    .accordion-item {
        border-top: 0;
        border-left: 0;
        border-right: 0;
        font-size: 14px;
        font-weight: 600;
    }
    #paymentAccordion .accordion-button[aria-expanded="true"]::after {
        content: '';
        width: 0;
        height: 0;
        border: none;
        border-radius: 0%;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 8px solid #ee1c24;
        position: absolute;
        right: 0px !important;
        top: 40%;
        transform: rotate(180deg);
        transition: transform 0.3s ease;
    }
    #paymentAccordion .accordion-button[aria-expanded="false"]::after {
        content: '';
        width: 0;
        height: 0;
        border: none;
        border-radius: 0%;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 8px solid #ee1c24;
        position: absolute;
        right: 0px !important;
        top: 40%;
        transform: rotate(180deg);
        transition: transform 0.3s ease;
        
    }

    .accordion-button[aria-expanded="false"]::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 10px !important;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        border: 1px solid #ED1C24;
        border-radius: 50%;
        background: url(data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ED1C24'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%2010%20L12%2016%20L18%2010'%20/%3E%3C/svg%3E) no-repeat center;
        background-size: 12px;
        transition: transform 0.3s ease;
    }
.hide-mobile{display: none;}
.icon-boxes,.pay-icon-boxes{margin-top:20px !important;margin-bottom: 30px !important;}
.payment-container-sec .accordion{    padding: 0px 20px;}
.accordion-button{color: #233253;}
.payment-container-sec .accordion-button {padding-left:0}
.accordion-button::after{right:2px !important;}
.payment-container-sec .right-section{padding-right:5px;}
.payment-container-sec .left-section{padding: 0;}
    .payment-container-sec .right-section{order: 1;    background-color: #ebf5f9;padding-top:10px}
    .payment-container-sec .right-section ul{width: 100%;background-color: transparent;padding: 5px;}
    .payment-container-sec .right-section ul::before{background-color: transparent;}
    .payment-container-sec .left-section{order: 2;}
    .net-premium .pay-sec{margin-right:0 ;}
    [aria-label="UPI Apps"],
    [aria-label="Enter UPI address to verify"] {
        display: none; /* Initially hidden */
    }
.pay-upi-app-section h6{display: none;}
.left-section .first-tab-content .verify-input{margin-bottom:30px}
    .accordion-button[aria-expanded="true"]::after {
        content: '';
    position: absolute;
    top: 50%;
    right: 10px !important;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: 1px solid #ED1C24;
    border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ED1C24'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%2010%20L12%2016%20L18%2010'%20/%3E%3C/svg%3E") no-repeat center;
background-size: 12px;
transition: transform 0.3s ease;}
    .des-text{top:0}
    .bank-selection{margin-top:-15px;margin-bottom: 20px !important;}
    .list-container{margin-bottom: 30px;}
    .pay-icon-boxes{margin-bottom: 40px !important;}
    .account-details .row{gap:0 !important;}
    .account-details .row>*{padding: 0;}
    .list-container{margin-top: 0;}
    .accordion-button:not(.collapsed) {
        background-color: transparent;
        border: none;
        outline: none;
        
    }

    .accordion-button:focus {
        box-shadow: none;
    }

    /* Align the "Net premium payable" text and amount to the left */
    .net-premium p.small,
    .net-premium h4 {
        text-align: left;
        margin: 0;
        padding: 0;
        font-weight: bold;
        width: auto; /* Auto width for alignment */
    }
    /* Flex row for premium text and button alignment */
    .net-premium .payable-row {
        display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    }

    /* Adjust the layout for elements in net-premium */
    .net-premium p.small {
        margin-right: 10px; /* Spacing between text and amount */
        color: #97a0a7 !important;
        font-weight: 600;
    }

    .net-premium h4 {
        font-size: 24px;
        font-weight: 700;
        color: #233252;
    }

    /* Center-align the timer */
    .net-premium .timer-section {
        text-align: center;
        color: #EE1C24;
        font-weight: bold;
        margin-bottom: 10px;
    }

    /* Right-align the proceed button */
    .net-premium .proceed-btn {
        background-color: #c4c9d2;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        color: white;
        text-align: center;
        width:100%;
        min-width: 200px;
    }

    /* Add space at the bottom of the content to prevent overlap with the fixed net-premium */
    .left-section {
        padding-bottom: 80px; /* Adjust to avoid overlap with fixed section */
    }

    .accordion-item .timer-section, .accordion-item .pay-sec {
        display: none;
    }
    .inner-container-sec{padding: 0;margin-bottom: 150px;}
    .login-bg .left-section{order: 2;}
    .login-bg .right-section{order: 1;}
    .left-section, .right-section {
        width: 100% !important;
    }
    .payment-container-sec{margin: 0;margin-bottom: 120px;}
    .summary-details .pan-input{max-width:300px}
    .left-section .first-tab-content .icon-box{margin-bottom: 0;}
    
    .summary-details .policy-holder-section{max-width: 300px;}
 
    .payment-container-sec .row{flex-direction: row; justify-content: flex-start;gap: 20px;}
    .payment-container-sec .accordion-body{padding:0;}
    .left-section{padding-bottom: 0;}
    .left-section,
    .right-section {
        width: 100%; /* or a known max-width if needed */
  box-sizing: border-box;
    }
    .summary-details{margin-left:0; margin-right:0; padding: 0; width:100%}
    .white-container{padding:0;border: 1px solid #CCCCCC; box-shadow: 0 0 10px rgb(191 188 188 / 30%);padding-bottom: 20px;}
    .payee-details{background-color:transparent; padding: 0; padding-top:20px; width: 100%;}
    .payment-summary-slider .white-box{margin-bottom:0; padding: 10px;}

    .payment-summary-slider .slide{flex: 0 0 calc(100% - 20px);padding:10px; padding-top:20px; border: 1px solid #CCCCCC;}
    .login-form .quick-pay-title{background: url(../images/heading-bg.png) no-repeat 67px 0px;background-size: 54px 54px;max-width:300px; margin:0 auto; margin-bottom:30px;}
    .login-form{box-shadow:none;margin-top:0; padding: 0px 5px 30px 5px;}
    .quick-pay-title{text-align: center;}
    .right-section {
        margin-top: 0px; /* Add spacing between stacked sections */
        padding-top:0;
        background-color: transparent;
    }
    .slider-section {
        overflow: visible; /* Ensure all white boxes are visible */
    }
    .play-icon-wrapper{min-height: auto;}
    .slider-wrapper {
        display: block; /* Stack white boxes */
        margin-top:20px;

    }
    .left-section .slider-wrapper {
        display: block; /* Stack white boxes */
        margin-top:20px;
        border: 1px solid #C7CACC;
        padding: 20px;
    }
    .white-box{box-shadow:none; height: auto; margin-bottom: 0; width: 100%;padding: 15px 10px 0 10px;}

    .container-sec.login-bg{padding:10px}
    .summary-details .policy-holder-section{padding:15px 0 15px 15px}
    .lightbox {
        display: none !important; /* Hide lightbox on mobile */
    }
    
    .payee-list .extra-li           {
        display: none;
    }
    .payment-summary-slider .slider-wrapper {margin-top:25px}
    .policy-info .row{flex-direction: row !important;}

.checkbox-container {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between checkbox and text */
}

@media (max-width: 768px) {
    .site-header{ 
        justify-content: center;
        display: flex
    ;}
    .login-form{padding-top:0}
    #paymentForm .form-check{margin-left:10px}

    .center-container{max-width: 85%;}
    .button-group {
        flex-direction: column;
        gap: 20px; /* Add vertical spacing between buttons */
    }
    .voc-title{max-width: 100%;text-align: center;padding-left: 0;background: url(../images/heading-bg.png) no-repeat 20px 0;}

    .button-group button {
        width: 100%; /* Full width for each button */
        text-align: center; /* Center the button text */
    }
    .icons-column {
        flex-direction: row !important;
        justify-content: space-around;
        width: 100%;
        margin-top: 10px !important;
    }
    .payment-lightbox .lightbox-content, .transfer-lightbox .lightbox-content{border-radius: 30px;}
    .payment-lightbox .lightbox-close, .transfer-lightbox .lightbox-close{top: 10px;
        right: 15px; font-size: 35px;}
    .icon-stack {
        width: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .icon-separator {
        display: none; /* Hide the separators on mobile */
    }
    .form-check-label{max-width:80%;}
    .emi-holder-section .form-check{width: 100%;margin-right: 0; margin-top:5px}
    .emi-holder-section .form-check-input[type=radio] {
        margin-top: 4px;
    }
    .dv-4{margin-bottom:1rem!important}

    #feedbackPanel {
        width: 90% !important;
        
      }
      #feedbackPanel .panel-content p {
        font-size: 14px !important;
        line-height: 27px;
        font-weight: 400;
        margin-top: 20px; 
        max-width: 180px !important;
      }
#paymentAccordion .view-more-btn{    margin-top: -20px;
    margin-bottom: 15px;}
    #paymentAccordion .toggle-icon {
        width: 20px;
        margin-right: 2px;
    }
      /*VOC Starts*/
      .nps-dots {
        gap: 21px;
        margin-top: 10px;
        margin-bottom: 25px;
        justify-content: center;
      }
      .nps-dots .rating-option {
        width: 5px;
        height: 5px;
        line-height: 12px;
        font-size: 0;
        background-color: rgb(101 125 147 / 50%);
      }
      .feedback-container {
        padding: 20px;
        font-size: 12px;
        max-width: 95%;
        border: none;
        box-shadow: none;
        margin-top: 10px;
      }
      .rating-options {
        justify-content: space-between;
      }
      .rating-item {
        flex: 0 0 calc(20% - 8px);
        padding: 5px;
        height: 60px;
        font-size: 8px;
      }
      .rating-item img {
        width: 30px;
        height: 30px;
      }
      .nps-line-container {
        display: none;
      }
      .nps-mobile {
        display: none;
      }
      .nps-dots .rating-option {
        width: 38px;
        height: 38px;
        line-height: 38px;
        font-size: 20px;
      }
      .nps-line-container {
        display: block;
      }
      
      /*VOC Ends*/
}