html{ overflow-x: hidden;}

:root {
      --rupepro-blue1: #1d2b80;
      --rupepro-blue2: #233bc9;
      --rupepro-blue3: #333c6f;
      --rupepro-blue4: #07b7fd;
      --rupepro-blue5: #242e65;
      --rupepro-blue6: #602e9e;
      --rupepro-dark: #1a1a1a;
      --rupepro-border: #1d1d1d;
      --rupepro-yellow: #ffd51e;
      --rupepro-text-light: #8d8d8d;
      --rupepro-font: "Poppins", sans-serif;
    }

body {
  font-family: var(--rupepro-font);
  color: #58595b;
  font-weight: 400;
  background: #cdf1ff;
  font-size: 15px;
  line-height: 24px;
  overflow-x: hidden; padding: 0px !important;
}

h1, h2, .h1, .h2, h3,
h4,
h5,
h6,
.h3,
.h4,
.h5 {
  color: #000;
  font-weight: 400;
   font-family: "Poppins", sans-serif;
}

.text-muted{ color: var(--rupepro-text-light) !important;}

.text-blue-3{ color: var(--rupepro-blue3);}

.bg-blue-4{ background: var(--rupepro-blue6);}
.bg-blue-5{ background:var(--rupepro-blue6);}

::-moz-selection {
  color: #fff;
  background: #293268;
}

::selection {
  color: #fff;
  background: #293268;
}


.flft {float: left; margin-left: 4%; margin-top: 1%;}
.rlft {float: right; margin-right:4%;}
.fs-7 {
    font-size: 18px;
}

.navbar-brand img{ width: 140px;}

.logo-b img{ max-width: 140px; width: 100%;}

.btn{ background: var(--rupepro-blue6); display: inline-flex; align-items: center; justify-content: center; min-width: 130px; min-height: 40px; color: #fff; border-radius: 50px; padding: 0px 20px; border: none !important; font-weight: 600; font-size: 14px;}
.btn:hover{ background: #ffd51e; color: #fff;} 


.btn-3{ background: #80c342; font-size: 18px;} 
.btn-3 i img{ width: 40px;} 

.btn-4{ border: #fff 1px solid; padding: 5px 12px; font-size: 13px; display: inline-block; border-radius: 50px; color: #fff; white-space: nowrap; text-decoration: none; }
.btn-4:hover{ background: #fff; color: var(--rupepro-blue6);}

.rounded-6{ border-radius: 80px;}

/*========================================= Start navigation ====================================*/
.navbar-light {
  background: none !important;
}

.navbar-nav>li {
  position: relative; padding: 0px 10px;  text-align: center;

} 


.navbar-nav>li:first-child{ padding-left: 0px;}

.navbar-nav>li>a {
  color: #000 !important; 
  font-weight: 500;
  font-size: 15px;
  padding: 0px 15px 1px 0px !important; 
  text-decoration: none;  position: relative;
}

.navbar-nav>li>a.active,
.navbar-nav>li>a:hover,
.navbar-nav>li>a:focus,
.navbar-nav>li:hover>a { 
  color: var(--rupepro-blue6) !important; text-decoration: none; 
  }




.navbar-nav > li.dropdown > .nav-link{ padding-right: 20px !important;}



.navbar-nav>li>.dropdown-toggle:after {
  position: absolute; right: 0px;
  top: 0px; border: none !important; font-size: 20px;
  font-family:'FontAwesome'; content: "\f107"; margin-left: 0px;
  
}

.navbar-nav>li>.dropdown-menu {
  border: none;
  background: #602e9e;
  border-radius: 8px;
  padding: 10px;
  
}

.navbar-nav>li>.dropdown-menu li { margin-bottom: 5px;}

.navbar-nav>li>.dropdown-menu li a {
  color: #fff; white-space: nowrap;
  font-size: 15px;
  font-weight: 500;
  outline: none !important; 
  background: none !important;
  font-family: 'Poppins', sans-serif;
padding: 5px 15px !important; border-radius: 5px;
}

.navbar-nav>li>.dropdown-menu li a:hover,
.navbar-nav>li>.dropdown-menu li a:focus {
  color: #fff;
  background: var(--rupepro-yellow) !important; 
}


/*========================================= End navigation ====================================*/ 


/*=======================login page css start=========================*/

/* === Left Panel === */
    .left-panel {
      background: url(../images/left-part-bg.png) no-repeat left top; background-size: cover;
      height: 100vh;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 0 2rem;
    }

    .left-panel h1 {
      font-size: 2.2rem;
      font-weight: 500;
      line-height: 1.4;
      margin-bottom: 2rem;
    }

    .left-panel img {
      max-width: 300px;
      margin-bottom: 2rem;
    }

    .left-panel p {
      font-size: 1.3rem; line-height: 28px;
      color: rgba(255, 255, 255, 0.5); font-weight: 500;
      letter-spacing: 0.5px; margin: 0px;
    }

    /* === Right Panel === */
    .right-panel {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff;
    }

    .login-box {
      width: 100%;
      max-width: 420px;
      color: var(--rupepro-dark);
    }

    .login-box h3 {
      font-weight: 600;
      font-size: 1.5rem;
      margin-bottom: 0.5rem;
    }

    .managed-by {
      font-size: 0.9rem;
      margin-bottom: 1.2rem;
    }

    .managed-by img {
      height: 28px;
      margin-left: 6px;
      vertical-align: middle;
    }

    /* === QR Box === */
    .qr-box {
      border: 1px solid var(--rupepro-border);
      border-radius: 10px;
      padding: 0.5rem 1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
    }

    .qr-box .left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .qr-box i {
      font-size: 1.8rem;
      color: #008cff;
    }

       .qr-box i img{ width: 30px;}
       .qr-box span{font-size: 1rem;}

    .qr-box small {
      color:var(--rupepro-dark);
      display: block;
      line-height: 1.2; font-size: 0.7rem;
    }

    .reg-br{ border-bottom: 1px solid var(--rupepro-border); padding-bottom: 5px;}

    /* === Form === */
    .form-label {
      font-weight: 400;
      font-size: 0.95rem;
      margin-bottom: 4px;
    }

    .form-control {
      border-radius: 8px;
      padding:0.5rem 0.7rem;
      border: 1px solid var(--rupepro-border);
      font-size: 0.95rem;
    }

    .input-group-text {
      background: none;
      border: 1px solid var(--rupepro-border);
      border-left: none ;
      cursor: pointer;
    }

    .form-control:focus{ border-color:var(--rupepro-border) ;}

    .small-link {
      font-size: 0.8rem;
      color: var(--rupepro-dark);
      margin-top: 2px;
      display: inline-block;
    }


   

    /* === Buttons (Gradient) === */
    .btn-gradient {
     
      color: #fff;
      font-weight: 700;
      border: none;
      border-radius: 8px;
      transition: 0.3s;
    }

    .btn-gradient:hover {
       background: #ffd51e;
    }

    .btn-login {
      width: 100%;
      padding: 0.65rem;
      margin-top: .2rem;
    }

    .register-box {
      border: 1px solid var(--rupepro-border);
      border-radius: 8px;
      padding: 0.6rem 0.8rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.9rem;
      margin-top: 0.8rem;
    }

    .register-box i img{ width: 25px;} 
    .reg-br span{ font-size: 13px; line-height: 18px;}

    .register-box button {
      padding: 0.2rem 0.9rem; border-radius: 3px; text-decoration: underline;
      font-size: 0.75rem; min-height: inherit; min-width: inherit; white-space: nowrap;
    }

    /* === Info Card === */
    .info-box {
      border: 1px solid var(--rupepro-border);
      border-radius: 8px;
      padding: 0.75rem;
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-top: 0.8rem;
    }

    .info-box img {
      width: 108px;
      border-radius: 6px;
    }

    .info-box p {
      font-size: 0.75rem;
      color: #333;
      margin: 0;
      line-height: 1.3;
    }
/*=======================login page css end=========================*/

.header{box-shadow: rgba(50, 50, 93, 0.1) 0px 50px 100px -10px, rgba(0, 0, 0, 0.1) 0px 30px 60px -30px;}

.w-130{ width: 130px;}
.distributor-bx{
background: linear-gradient(to right,  rgba(196,229,224,1) 0%,rgba(234,252,248,1) 100%); 
border-radius: 15px; padding: 20px;}
.distributor-bx .btn-group label{ display: inline-flex; position: relative; padding-left: 30px; align-items: center; cursor: pointer;}  
.distributor-bx .btn-group label i{ width: 23px; height: 23px; border-radius: 100%; position: absolute; left: 0px; top: 0px; background-image: linear-gradient(to bottom, #31d2fb, #125aee); } 
.distributor-bx .btn-group .btn-check:checked + label i:before{ content: ""; position: absolute; left: 0px; top: 0px; width: 23px; height: 23px; background: url(../images/check.png) no-repeat center center; background-size: 12px;}
.btn-2{ background: #ff3131;} 
.link-u{ background: #e6ecff; justify-content: center; font-size: 32px; display: inline-flex; align-items: flex-end; overflow: hidden; width: 40px; height: 40px; border-radius: 100%; text-decoration: none; color: #4294ff;} 
.c-r-id a{ border: 1px solid var(--rupepro-border); font-size: 18px;
      border-radius: 10px;
      padding: 0.5rem 1rem; text-decoration: none; color: var(--rupepro-blue3);} 
         .c-r-id a i{ margin-right: 8px;}
      .c-r-id a i img{ width: 40px;} 
      .c-r-id a:hover{border: 1px solid #2dc0ff; color: #2dc0ff;}
.c-web-link a{ text-decoration: none; color: var(--rupepro-blue3);}       
.c-web-link a:hover{ color: #2dc0ff;} 
.reg-bg{ background: url(../images/register_l-bg.png) no-repeat left top !important; background-size: cover !important;} 

.otp .form-control::-moz-placeholder{color:#242e65; opacity:1; letter-spacing: 1rem;} 
.otp .form-control::placeholder{color:#242e65; opacity:1; letter-spacing: 1rem;} 

.f-bx{border: 1px solid var(--rupepro-border);
      border-radius: 10px;
      padding: 1rem 1rem;} 

      .c-p-bg{ background: url(../images/c-password_bg.png) no-repeat left top !important; background-size: cover !important;}


.home_slider{ min-height: 650px;}     
.home_slider h2{ font-size: 45px; text-shadow: 3px 3px 2px rgba(36,46,101,.3);}   
.btn-s{ font-weight: 800; font-size: 35px; padding: 10px 35px; background: var(--rupepro-blue6); text-shadow: 3px 3px 2px rgba(36,46,101,.6);} 
.btn-s i img{ width: 40px;}


.banking-col i{ display: inline-flex; align-items: center; border:var(--rupepro-blue6)  1px solid; justify-content: center; min-height: 98px;  min-width: 70px; border-radius: 10px;}
.banking-col i img{ max-width: 53px;}
.banking-col h5{ padding-top: 10px; font-size: 14px;} 


.count i{ width: 50px; height: 50px;}
.count i img{ max-height: 30px;}
.w-any-kind small{ font-size: 12px; display: block; line-height: 18px;} 

.wallet-bx .banking-col i{ min-height: 74px; border: var(--rupepro-blue6) 2px solid;} 
.wallet-bx .banking-col i img{ max-width: 60px; max-height: 54px;} 

.w-price{border: var(--rupepro-blue6) 2px solid; border-radius: 8px; color: var(--rupepro-blue6); font-weight: 700; font-size: 16px; line-height: 18px; text-align: center; padding:8px 5px;}

.min-h-70{ min-height: 70px;} 

.shape-1{ width: 170px; height: 170px; position: absolute; left: -40px; bottom: -30px; background: var(--rupepro-blue6); border-radius: 30px;  transform: skew(-15deg) rotate(-10deg); opacity: 0.5;}
.shape-2{ width: 170px; height: 170px; position: absolute; left: -60px; bottom: 10px; background: var(--rupepro-blue6); border-radius: 30px;  transform: skew(-15deg) rotate(-10deg); opacity: 0.5;}

.pay-n-btn{ background: #ffd51e; border: #fff 1px solid !important; font-weight: 400; color: var(--rupepro-blue5); font-size: 28px; min-height: 60px;} 
.pay-n-btn:hover{ background: var(--rupepro-blue6); border: #fff 1px solid !important; color: #fff; }


.triangle, .triangle:before, .triangle:after { width: 200px; height: 200px; }
.triangle {
	overflow: hidden;
	position: absolute; right: -30px; top: -140px;
opacity: 0.4; 
	border-radius: 20%;
	transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866);
	cursor: pointer;
	pointer-events: none;
} 
.triangle:before, .triangle:after {
	position: absolute;
	background: var(--rupepro-blue6); 
	pointer-events: auto;
	content: '';
}
.triangle:before {
	border-radius: 20% 20% 20% 53%;
	transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) 
			skewX(30deg) scaleY(.866) translateX(-24%);
}
.triangle:after {
	border-radius: 20% 20% 53% 20%;
	transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) 
			skewX(-30deg) scaleY(.866) translateX(24%);
}


.pan-card-service .banking-col i img{ max-width: 70px; width: 100%;} 

.pan-card-service .card-footer{ margin-left: -1.5rem; margin-right: -1.5rem;} 

.uti-pan-ftr{ min-height: 91px;
background: var(--rupepro-blue6); 
}

.applynow{ background: var(--rupepro-blue6);  border: #fff 1px solid !important; font-weight: 700; color: #fff; font-size: 28px; min-height: 60px;} 
.applynow:hover{ background: #ffd51e; border: #ffd51e 1px solid !important; color: #fff; }


.banner {
      background: var(--rupepro-blue6);
      border-radius: 15px; border: #000 1px solid;
      padding: 0px 40px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }
    .banner .icon-section {
      display: flex;
      align-items: center;
      gap: 80px;
      flex: 1;
    }
    .icon-box {
      text-align: center;
    }
    .icon-box img { max-height: 96px;
     
      margin-bottom: 10px;
    }
    .logo-section {
      text-align: center;
      flex: 1;
    }
    .logo-box {
      background-color: #fff;
      border-radius: 10px;
      display: inline-block; width: 100%; max-width: 270px;
      padding: 8px 15px 6px; border: 1px solid var(--rupepro-blue6);
      margin-bottom: 10px;
    }
    .logo-box img {
      height: 28px;
    }
    .start-btn {
      background-color: #fff;
      color: #242e65;
      font-weight: 700;
      font-size: 1.3rem;
      border-radius: 10px;
      padding: 10px 25px;
      display: inline-block; width: 100%; max-width: 350px; 
      border: 1px solid var(--rupepro-blue6);
    }
    .right-img img {
    
      width: 138px;
     
    }

    .banner .right-img{ margin: -20px 0px -1px;}

.footer{ background: var(--rupepro-blue6);} 

.home_slider figure img{ max-width: 325px; width: 100%;}

/*======================dashboard style start=======================*/    

   /* ===== Sidebar ===== */
    .sidebar {
      background-color: #fff; overflow-y: auto;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      width: 240px;
      border-right: 1px solid #eaeaea;
      transition: all 0.3s ease;
      z-index: 1050;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .sidebar .logo {
      padding: 15px;
      text-align: center;
   
    }

    .sidebar .nav-link {
      color: #000;
      font-weight: 400; font-size: 14px;
      padding: 0px 0px;
      display: flex;
      align-items: center;
      transition: background 0.3s;
      white-space: nowrap;
      margin: 0 25px 8px;
    }

    .sidebar .nav-link i {
      width: 18px;
      margin-right: 10px;
      text-align: center;
    }
        .sidebar .nav-link i img{ max-width: 100%;}

    .sidebar .nav-link.active,
    .sidebar .nav-link:hover {
      
      color: var(--rupepro-blue6);
      
      
    }

    .sidebar.collapsed {
      width: 70px;
    }

    .sidebar.collapsed .nav-link span {
      display: none;
    }

    .sidebar li.dashboard .nav-link .dash-ic img{ width: 30px;} 
    .sidebar li.dashboard .nav-link{ margin: 0px; padding: 10px 25px; border-radius: 0px 50px 50px 0px;
background: var(--rupepro-blue6); color: #fff;
}
.sidebar li.dashboard .nav-link img{ filter: brightness(0) invert(1);}

    /* ===== Sidebar Bottom ===== */
.g-bg-1{ background: var(--rupepro-blue6) !important;}

    .sidebar-bottom {
      padding: 15px 25px; margin-top: 50px;
     
    }

    .social-media h6 {
      border-radius: 5px; color: #fff; font-weight: 400; font-size: 18px; padding:6px 10px;
   margin-bottom: 12px; background:var(--rupepro-blue6);
    }

    .social-media a {
      font-size: 16px;
      margin-right: 8px; background: #e8e8e8;
      color: #fff;
      padding: 2px 9px;
      border-radius: 5px;
      display: inline-block;
      transition: 0.3s;
    }

    .social-media a.youtube{ color: #ff0000;}
   .social-media a.telegram{ color: #0088cc;}
 .social-media a.whatsapp{ color: #25d366;}
    .social-media a.youtube:hover { background: #ff0000; }
    .social-media a.telegram:hover { background: #0088cc; }
    .social-media a.whatsapp:hover { background: #25d366; }

    .social-media a:hover { opacity: 1; color: #fff !important; }

    .support-info {
      font-size: 14px;
      margin-top: 10px;
    }
     .support-info ul li{ margin-bottom: 5px;}
       .support-info ul li a{ text-decoration: none; display: flex; align-items: center; color: #000;}

       .support-info i{margin-right: 10px; width: 18px; text-align: center; display: inline-block;}
    .support-info i img {  max-width: 100%;  }
    .support-info ul li a .bracket{ max-width: 15px;}
    .support-info ul li a:hover{ color: #242e65;}

    /* ===== Main Content ===== */
    .main-content {
      margin-left: 240px;
      padding: 0px 0px 0px 20px;
      transition: margin-left 0.3s;
    }

    .main-content.expanded {
      margin-left: 70px;
    }

    .topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
    margin-bottom: 30px;
      position: relative;
    }

    .topbar input {
      border: none;
      outline: none;
      background: #fff;
      border-radius: 8px;
      padding: 8px 15px 8px 40px;
      width: 100%;
    }

    

    .menu-toggle {
      display: none;
      font-size: 22px; margin-right: 10px;
      color: #000;
      cursor: pointer;
    }

    /* ===== Bill Section ===== */
  

    .bill-card {
      background: #fff;
      text-align: center;
      border-radius: 12px;
      padding: 20px 15px;
      transition: all 0.3s;
      cursor: pointer;
    }

    .bill-card:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transform: translateY(-3px);
    }

    .bill-card:hover {
      background: var(--rupepro-blue6);
      color: #fff;
    }

    .bill-card img {
      
      max-height: 70px;
      margin-bottom: 10px;
    }

    .bill-card p{ margin: 0px; color: #252525; font-size:13.9px;}
    .bill-card:hover p{ color: #fff;}

    /* ===== Right Panel ===== */
    .right-panel-2 {
      background: #fff;
      border-radius: 0px; margin-right: -12px;
      padding: 15px; width: calc(100% + 12px);
      
    }

  .wallet-card {
      background: var(--rupepro-blue6);
      border-radius: 12px;
      padding: 8px 14px;
      display: flex;
      align-items: center;
      color: #fff;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      transition: all 0.3s ease;
    }

    .wallet-card:hover {
      transform: translateY(-3px); background: var( --rupepro-yellow);
      box-shadow: 0 4px 10px rgba(0,0,0,0.15); color: #000;
    }

    .wallet-card:hover h6{ color: #000;}

    .wallet-icon {
      margin-right: 12px;
     
    }
    .wallet-icon img{ width: 40px;}

    .wallet-text {
      flex: 1; text-align: right;
    }

    .wallet-text h6 {
      margin: 0;
      font-weight: 400;
      font-size: 0.95rem; color: #fff;
    }

    .wallet-text p {
      margin: 0;
      font-size: 0.9rem;
      opacity: 0.9;
    }

    .add-money-card {
      background: var(--rupepro-blue6);
      justify-content: center;
      text-align: center;
      font-weight: 600;
    }

    .notice-card {
    border: 1px solid var(--rupepro-blue6);
      border-radius: 10px;
      padding: 10px;
      background-color: #fff;
     
    }

    .add-money-card .wallet-icon img{ filter: brightness(0) invert(1);}
     .add-money-card:hover .wallet-icon img{ filter: inherit;}

    .notice-card p { font-size: 10px; line-height: 14px; color: #000; font-weight: 500; margin: 0; }

    .training-section {
      background: #f5f7ff;
      border-radius: 10px;
      padding: 10px;
      margin-top: 15px;
    }

    .training-video {
      display: flex;
      align-items: center;
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 12px;
      transition: 0.3s;
    }

    .training-video img {
      width: 60px;
  
    }

    .training-video p { font-size: 11px; margin: 0; padding: 0 0px 0px 10px; line-height: 16px; color: #000; }

    .training-video:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); }

    .news-v-bx{ border: var(--rupepro-blue6) 1px solid;}

.r-top > ul > li{ margin-left: 10px;} 
.r-top > ul > li > a{ display: inline-flex; justify-content: center; align-items: center; border-radius: 5px; justify-content: center; width: 50px; height: 45px;}
.r-top > ul > li > a img{ width: 25px;}
.r-top > ul > li.filter > a{ background: #fff; }
.r-top > ul > li.notification > a{ 
background: var(--rupepro-blue6); }
.r-top > ul > li.notification > a:hover{ background: var(--rupepro-yellow);}

.btn-1{ background: linear-gradient(to right, rgba(32,169,238,1) 0%,rgba(69,72,217,1) 100%); color: #252525; font-weight: 600; font-size: 18px; border-radius: 5px; box-shadow: none; border: none; padding: 4px 12px;line-height: 20px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; min-width: 104px;}
.btn-1:hover{ color: #fff; opacity: 1; background: linear-gradient(to right, rgba(69,72,217,1) 0%,rgba(32,169,238,1) 100%); }

.btn-02{ background: var(--rupepro-blue6); color: #fff; font-weight: 500; font-size: 14px; box-shadow: none; border: none; padding: 4px 12px;line-height: 20px; min-width: 104px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border-radius: 5px;}
.btn-02:hover{ background: var(--rupepro-yellow); color: #fff;}

/*===========dashboard style end=====================*/